Function useTabPanel

packages/react-aria/src/tabs/useTabPanel.ts:34–59

(
  props: AriaTabPanelProps,
  state: TabListState<T> | null,
  ref: RefObject<Element | null>
)

 * container for the contents of a tab, and is shown when the tab is selected.
 */
export function useTabPanel<T>(
  props: AriaTabPanelProps,
  state: TabListState<T> | null,
  ref: RefObject<Element | null>
): TabPanelAria {
  // The tabpanel should have tabIndex=0 when there are no tabbable elements within it.
  // Otherwise, tabbing from the focused tab should go directly to the first tabbable element
  // within the tabpanel.
  let tabIndex = useHasTabbableChild(ref) ? undefined : 0;

  const id = generateId(state, props.id ?? state?.selectedKey, 'tabpanel');
  const tabPanelProps = useLabels({
    ...props,
    id,
    'aria-labelledby': generateId(state, state?.selectedKey, 'tab')
  });

  return {
    tabPanelProps: mergeProps(tabPanelProps, {
      tabIndex,
      role: 'tabpanel',
      'aria-describedby': props['aria-describedby'],
      'aria-details': props['aria-details']
    })
  };
}