Function TabPanelInner

packages/react-aria-components/src/Tabs.tsx:595–653

(
  props: TabPanelProps & {
    tabPanelRef: RefObject<HTMLDivElement | null>;
    isInitiallySelected: boolean;
    isExiting: boolean;
  }
)

});

function TabPanelInner(
  props: TabPanelProps & {
    tabPanelRef: RefObject<HTMLDivElement | null>;
    isInitiallySelected: boolean;
    isExiting: boolean;
  }
) {
  let state = useContext(TabListStateContext)!;
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  let {id, tabPanelRef: ref, isInitiallySelected, isExiting, ...otherProps} = props;
  let {tabPanelProps} = useTabPanel(props, state, ref);
  let {focusProps, isFocused, isFocusVisible} = useFocusRing();

  let isSelected = state.selectedKey === props.id;
  let isEntering = useEnterAnimation(ref) && !isInitiallySelected;
  let renderProps = useRenderProps({
    ...props,
    defaultClassName: 'react-aria-TabPanel',
    values: {
      isFocused,
      isFocusVisible,
      // @ts-ignore - compatibility with React < 19
      isInert: inertValue(!isSelected),
      isEntering,
      isExiting,
      state
    }
  });

  let DOMProps = filterDOMProps(otherProps, {global: true});
  delete DOMProps.id;

  let domProps = isSelected
    ? mergeProps(DOMProps, tabPanelProps, focusProps, renderProps)
    : mergeProps(DOMProps, renderProps);

  return (
    <dom.div
      {...domProps}
      ref={ref}
      data-focused={isFocused || undefined}
      data-focus-visible={isFocusVisible || undefined}
      // @ts-ignore
      inert={inertValue(!isSelected || props.inert)}
      data-inert={!isSelected ? 'true' : undefined}
      data-entering={isEntering || undefined}
      data-exiting={isExiting || undefined}>
      <Provider
        values={[
          [TabsContext, null],
          [TabListStateContext, null]
        ]}>
        <CollectionRendererContext.Provider value={DefaultCollectionRenderer}>
          {renderProps.children}
        </CollectionRendererContext.Provider>
      </Provider>
    </dom.div>
  );