Function TabsInner

packages/react-aria-components/src/Tabs.tsx:282–324

({props, tabsRef: ref, collection}: TabsInnerProps)

}

function TabsInner({props, tabsRef: ref, collection}: TabsInnerProps) {
  let {orientation = 'horizontal'} = props;
  let state = useTabListState({
    ...props,
    collection,
    children: undefined
  });
  let {focusProps, isFocused, isFocusVisible} = useFocusRing({within: true});
  let values = useMemo(
    () => ({
      orientation,
      isFocusWithin: isFocused,
      isFocusVisible
    }),
    [orientation, isFocused, isFocusVisible]
  );
  let renderProps = useRenderProps({
    ...props,
    defaultClassName: 'react-aria-Tabs',
    values
  });

  let DOMProps = filterDOMProps(props, {global: true});

  return (
    <dom.div
      {...mergeProps(DOMProps, renderProps, focusProps)}
      ref={ref}
      slot={props.slot || undefined}
      data-focused={isFocused || undefined}
      data-orientation={orientation}
      data-focus-visible={isFocusVisible || undefined}
      data-disabled={state.isDisabled || undefined}>
      <Provider
        values={[
          [TabsContext, props],
          [TabListStateContext, state]
        ]}>
        {renderProps.children}
      </Provider>
    </dom.div>
  );
}

/**
 * A TabList is used within Tabs to group tabs that a user can switch between. The ids of the items