Repository: adobe/react-spectrum
File: packages/@react-spectrum/s2/src/Tabs.tsx (TypeScript)

Code before:
      vertical: 20
    }
  },
  marginStart: {
    orientation: {
      vertical: 12
    }
  },
  minWidth: 'min'
});

const tablistWrapper = style({
  position: 'relative',
  minWidth: 'min',
  flexShrink: 0,
  flexGrow: 0
}, getAllowedOverrides());

export function TabList<T extends object>(props: TabListProps<T>): ReactNode | null {
  let {showTabs, menuId, valueId, tabs, listRef, onSelectionChange, ariaLabel, ariaDescribedBy} = useContext(CollapseContext) ?? {};
  let {density, orientation, labelBehavior} = useContext(InternalTabsContext);

  if (showTabs) {
    return <TabListInner {...props} />;
  }
  
  return (
    <div className={tablistWrapper(null, props.styles)}>
      <div className={tablist({orientation, labelBehavior, density})}>
        <HiddenTabs items={tabs} density={density} listRef={listRef} />
      </div>
      <TabsMenu
        id={menuId}
        valueId={valueId}
        items={tabs}
        onSelectionChange={onSelectionChange}
        aria-label={ariaLabel}
        aria-describedby={ariaDescribedBy} />
    </div>
  );
}

function TabListInner<T extends object>(props: TabListProps<T>) {
  let {
    tablistRef,
    orientation,
    density,
    labelBehavior,
    'aria-label': ariaLabel,
    'aria-labelledby': ariaLabelledBy
  } = useContext(InternalTabsContext) ?? {};

Review comment (refactor):
at some point, i know we [refactored the collapse behavior of Tabs](https://github.com/adobe/react-spectrum/pull/7600) due to an AXE accessibility error due to where we were rendering the menu but i've run AXE on this and nothing has come up

the reason as to why i moved it is because before, if a user chose to add a custom wrapper like this:
```
<div>
  <TabList />
  <div>
    <Button />
  </div>
</div>
```
what would happen is when the tabs collapsed, the wrapper would no longer wrap around both the menu + (hidden tabs) + buttons. so in order to ensure the wrapper actually wraps the expected item, i've moved the menu + hidden tabs into here

Code after:
    }
  },
  marginStart: {
    orientation: {
      vertical: 12
    }
  },
  minWidth: 'min'
});

const tablistWrapper = style({
  position: 'relative',
  minWidth: 'min',
  flexShrink: 0,
  flexGrow: 0
}, getAllowedOverrides());

export function TabList<T extends object>(props: TabListProps<T>): ReactNode | null {
  let {showTabs, menuId, valueId, tabs, listRef, onSelectionChange, ariaLabel, ariaDescribedBy} = useContext(CollapseContext) ?? {};
  let {density, orientation, labelBehavior} = useContext(InternalTabsContext);

  if (showTabs) {
    return <TabListInner {...props} />;
  }
  
  return (
    <div className={tablistWrapper(null, props.styles)}>
      {listRef && <div className={tablist({orientation, labelBehavior, density})}>
        <HiddenTabs items={tabs} density={density} listRef={listRef} />
      </div>}
      <TabsMenu
        id={menuId}
        valueId={valueId}
        items={tabs}
        onSelectionChange={onSelectionChange}
        aria-label={ariaLabel}
        aria-describedby={ariaDescribedBy} />
    </div>
  );
}

function TabListInner<T extends object>(props: TabListProps<T>) {
  let {
    tablistRef,
    orientation,
    density,
    labelBehavior,
    'aria-label': ariaLabel,
    'aria-labelledby': ariaLabelledBy
  } = useContext(InternalTabsContext) ?? {};
  let {tabs, listRef} = useContext(CollapseContext) ?? {};