Function TabsInner

starters/hooks/src/Tabs.tsx:64–95

({
  collection,
  ...props
}: AriaTabListOptions<object> &
  Omit<TabListStateOptions<object>, 'children'> & {
    collection: ICollection<Node<object>>;
  })

}

function TabsInner({
  collection,
  ...props
}: AriaTabListOptions<object> &
  Omit<TabListStateOptions<object>, 'children'> & {
    collection: ICollection<Node<object>>;
  }) {
  let state = useTabListState({...props, collection, children: undefined});
  let ref = useRef<HTMLDivElement>(null);
  /*- begin highlight -*/
  let {tabListProps} = useTabList(props, state, ref);
  /*- end highlight -*/
  let orientation = props.orientation || 'horizontal';

  return (
    <div className="react-aria-Tabs" data-orientation={orientation}>
      <div
        {...tabListProps}
        ref={ref}
        className="react-aria-TabList"
        data-orientation={orientation}>
        <TabListStateContext.Provider value={state}>
          {[...state.collection].map(item => (
            <Fragment key={item.key}>{item.render!(item)}</Fragment>
          ))}
        </TabListStateContext.Provider>
      </div>
      {/* Re-mount the panel when the selection changes so DOM state isn't shared between tabs. */}
      <TabPanel key={state.selectedItem?.key} state={state} />
    </div>
  );
}

function TabPanel({state, ...props}: {state: TabListState<object>}) {
  let ref = useRef<HTMLDivElement>(null);