Function Tabs

packages/react-aria/stories/tabs/example.tsx:24–53

({shouldSelectOnPressUp, ...props}: TabProps)

}

export function Tabs({shouldSelectOnPressUp, ...props}: TabProps): JSX.Element {
  let state = useTabListState(props);
  let ref = React.useRef(null);
  let {tabListProps} = useTabList(props, state, ref);
  return (
    <div style={{height: '150px'}}>
      <div
        {...tabListProps}
        ref={ref}
        style={{
          display: 'flex',
          borderBottom: '1px solid grey',
          borderLeft: '10px solid grey',
          borderRight: '20px solid grey',
          maxWidth: '400px',
          overflow: 'auto'
        }}>
        {[...state.collection].map(item => (
          <Tab
            key={item.key}
            item={item}
            state={state}
            shouldSelectOnPressUp={shouldSelectOnPressUp}
          />
        ))}
      </div>
      <TabPanel key={state.selectedItem?.key} state={state} />
    </div>
  );
}

function Tab({shouldSelectOnPressUp, item, state}) {
  let {key, rendered} = item;