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

Code before:
        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) ?? {};

  return (
    <div
      style={props.UNSAFE_style}
      className={
        (props.UNSAFE_className || '') +
        tablistWrapper(null, props.styles)}>
      <div className={tablist({orientation, labelBehavior, density})}>
        <HiddenTabs items={tabs} density={density} listRef={listRef} />
      </div>
      <RACTabList
        {...props}
        aria-label={ariaLabel}
        aria-labelledby={ariaLabelledBy}
        ref={tablistRef}
        className={renderProps => tablist({...renderProps, labelBehavior, density})} />
    </div>
  );
}

const selectedIndicator = style<{isDisabled: boolean, orientation?: Orientation}>({
  position: 'absolute',
  backgroundColor: {
    default: 'neutral',
    isDisabled: 'disabled',
    forcedColors: {
      default: 'Highlight',
      isDisabled: 'GrayText'
    }
  },
  height: {
    default: 'full',
    orientation: {

Review comment (suggestion):
we moved the HiddenTabs into the `InnerTabList` so that the hidden tabs take up the same space as the visible tabs. previously, if we had wrapped a tablist + buttons together (like in this [example](https://react-spectrum.adobe.com/react-spectrum/Tabs.html#customizing-layout)), the visible tabs would only take up space up to the buttons. however, the hidden tabs would take up the space of the entire tab container (far exceeding where the visible tabs should be visible). as a result, you could continue adding tabs even though they would be displayed behind the button before it would collaspe

Code after:
        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) ?? {};

  return (
    <div
      style={props.UNSAFE_style}
      className={
        (props.UNSAFE_className || '') +
        tablistWrapper(null, props.styles)}>
      {listRef && <div className={tablist({orientation, labelBehavior, density})}>
        <HiddenTabs items={tabs} density={density} listRef={listRef} />
      </div>}
      <RACTabList
        {...props}
        aria-label={ariaLabel}
        aria-labelledby={ariaLabelledBy}
        ref={tablistRef}
        className={renderProps => tablist({...renderProps, labelBehavior, density})} />
    </div>
  );
}

const selectedIndicator = style<{isDisabled: boolean, orientation?: Orientation}>({
  position: 'absolute',
  backgroundColor: {
    default: 'neutral',
    isDisabled: 'disabled',
    forcedColors: {
      default: 'Highlight',
      isDisabled: 'GrayText'
    }
  },
  height: {
    default: 'full',
    orientation: {
      horizontal: '[2px]'