Function Tab

packages/@react-spectrum/s2/src/Tabs.tsx:466–532

(props: TabProps)

});

export function Tab(props: TabProps): ReactNode {
  let {density, orientation, labelBehavior, baseId} = useContext(InternalTabsContext) ?? {};

  // Derive a stable content id from the shared baseId on InternalTabsContext.
  // Prevents infinite loop when rendering across multiple CollectionBuilder portals.
  let fallbackId = useId();
  let contentId = `${baseId ?? fallbackId}-content-${props.id ?? fallbackId}`;
  let ariaLabelledBy = props['aria-labelledby'] || '';

  return (
    <RACTab
      {...props}
      // @ts-ignore
      originalProps={props}
      aria-labelledby={`${labelBehavior === 'hide' ? contentId : ''} ${ariaLabelledBy}`}
      style={props.UNSAFE_style}
      className={renderProps =>
        (props.UNSAFE_className || '') +
        tab({...renderProps, density, labelBehavior, orientation}, props.styles)
      }>
      {({
        // @ts-ignore
        isMenu,
        isDisabled
      }) => {
        if (isMenu) {
          return props.children;
        } else {
          return (
            <Provider
              values={[
                [
                  TextContext,
                  {
                    id: contentId,
                    styles: style({
                      order: 1,
                      display: {
                        labelBehavior: {
                          hide: 'none'
                        }
                      }
                    })({labelBehavior})
                  }
                ],
                [
                  IconContext,
                  {
                    render: centerBaseline({slot: 'icon', styles: style({order: 0})}),
                    styles: icon
                  }
                ]
              ]}>
              <TabInner orientation={orientation!} isDisabled={isDisabled}>
                {typeof props.children === 'string' ? (
                  <Text>{props.children}</Text>
                ) : (
                  props.children