Function useTabList

packages/react-aria/src/tabs/useTabList.ts:56–93

(
  props: AriaTabListOptions<T>,
  state: TabListState<T>,
  ref: RefObject<HTMLElement | null>
)

 * Tabs organize content into multiple sections and allow users to navigate between them.
 */
export function useTabList<T>(
  props: AriaTabListOptions<T>,
  state: TabListState<T>,
  ref: RefObject<HTMLElement | null>
): TabListAria {
  let {orientation = 'horizontal', keyboardActivation = 'automatic'} = props;
  let {collection, selectionManager: manager, disabledKeys} = state;
  let {direction} = useLocale();
  let delegate = useMemo(
    () => new TabsKeyboardDelegate(collection, direction, orientation, disabledKeys),
    [collection, disabledKeys, orientation, direction]
  );

  let {collectionProps} = useSelectableCollection({
    ref,
    selectionManager: manager,
    keyboardDelegate: delegate,
    selectOnFocus: keyboardActivation === 'automatic',
    disallowEmptySelection: true,
    scrollRef: ref,
    linkBehavior: 'selection'
  });

  // Compute base id for all tabs
  let tabsId = useId();
  tabsIds.set(state, tabsId);

  let tabListLabelProps = useLabels({...props, id: tabsId});

  return {
    tabListProps: {
      ...mergeProps(collectionProps, tabListLabelProps),
      role: 'tablist',
      'aria-orientation': orientation,
      tabIndex: undefined
    }
  };
}