@equinor/eds-core-react/dist/esm/components/Tabs/TabPanels.js

The React implementation of the Equinor Design System

import { forwardRef, useContext, Children, isValidElement, cloneElement } from 'react';
import { TabsContext } from './Tabs.context.js';
import { jsx } from 'react/jsx-runtime';

const TabPanels = /*#__PURE__*/forwardRef(function TabPanels({
  children,
  conditionalRender,
  ...props
}, ref) {
  const {
    activeTab,
    tabsId
  } = useContext(TabsContext);
  const Panels = Children.map(children, (child, $index) => {
    if (! /*#__PURE__*/isValidElement(child) || conditionalRender && activeTab !== $index) return null;
    return /*#__PURE__*/cloneElement(child, {
      id: `${tabsId}-panel-${$index + 1}`,
      'aria-labelledby': `${tabsId}-tab-${$index + 1}`,
      hidden: activeTab !== $index
    });
  });
  return /*#__PURE__*/jsx("div", {
    ref: ref,
    ...props,
    children: Panels
  });
});

export { TabPanels };