Function useTab

packages/react-aria/src/tabs/useTab.ts:52–104

(
  props: AriaTabProps,
  state: TabListState<T>,
  ref: RefObject<FocusableElement | null>
)

 * When selected, the associated tab panel is shown.
 */
export function useTab<T>(
  props: AriaTabProps,
  state: TabListState<T>,
  ref: RefObject<FocusableElement | null>
): TabAria {
  let {key, isDisabled: propsDisabled, shouldSelectOnPressUp} = props;
  let {selectionManager: manager, selectedKey} = state;

  let isSelected = key === selectedKey;

  let isDisabled = propsDisabled || state.isDisabled || state.selectionManager.isDisabled(key);
  let item = state.collection.getItem(key);
  let {itemProps, isPressed} = useSelectableItem({
    selectionManager: manager,
    key,
    ref,
    isDisabled,
    // Link tabs should behave like native anchors (navigate on press up)
    // This avoids reopening beforeunload dialogs when browsers replay
    // queued pointer enter/leave events after cancellation.
    shouldSelectOnPressUp: shouldSelectOnPressUp ?? item?.props.href != null,
    linkBehavior: 'selection'
  });

  let tabId = generateId(state, key, 'tab');
  let tabPanelId = generateId(state, key, 'tabpanel');
  let {tabIndex} = itemProps;

  let domProps = filterDOMProps(item?.props, {labelable: true});
  delete domProps.id;
  let linkProps = useLinkProps(item?.props);
  let {focusableProps} = useFocusable(
    {
      ...item?.props,
      isDisabled
    },
    ref
  );

  return {
    tabProps: mergeProps(domProps, focusableProps, linkProps, itemProps, {
      id: tabId,
      'aria-selected': isSelected,
      'aria-disabled': isDisabled || undefined,
      'aria-controls': isSelected ? tabPanelId : undefined,
      tabIndex: isDisabled ? undefined : tabIndex,
      role: 'tab'
    }),
    isSelected,
    isDisabled,
    isPressed
  };
}