Function TabPanel

packages/@adobe/react-spectrum/src/tabs/Tabs.tsx:487–510

(props: TabPanelProps)

// @private
function TabPanel(props: TabPanelProps) {
  const {tabState, tabPanelProps: ctxTabPanelProps} = useContext(TabContext)!;
  const {tabListState} = tabState;
  let ref = useRef<HTMLDivElement | null>(null);
  const {tabPanelProps} = useTabPanel(props, tabListState, ref);
  let {styleProps} = useStyleProps(props);

  if (ctxTabPanelProps['aria-labelledby']) {
    // oxlint-disable-next-line react/react-compiler
    tabPanelProps['aria-labelledby'] = ctxTabPanelProps['aria-labelledby'];
  }

  return (
    <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>
      <div
        {...styleProps}
        {...tabPanelProps}
        ref={ref}
        className={classNames(styles, 'spectrum-TabsPanel-tabpanel', styleProps.className)}>
        {props.children}
      </div>
    </FocusRing>
  );
}

interface TabPickerProps<T> extends Omit<SpectrumPickerProps<T>, 'children' | 'onSelectionChange'> {
  density?: 'compact' | 'regular';