braid-design-system/dist/lib/components/Tabs/TabPanels.mjs

Themeable design system for the SEEK Group

import { jsx } from "react/jsx-runtime";
import assert from "assert";
import { useContext, useEffect, Fragment } from "react";
import { flattenChildren } from "../../utils/flattenChildren.mjs";
import { TabPanelsContext } from "./TabPanelsContext.mjs";
import { TAB_PANELS_UPDATED } from "./Tabs.actions.mjs";
import { TabsContext } from "./TabsProvider.mjs";
const TabPanels = ({
  renderInactivePanels = false,
  children
}) => {
  const tabsContext = useContext(TabsContext);
  if (!tabsContext) {
    throw new Error("TabPanels rendered outside TabsProvider context");
  }
  const { dispatch } = tabsContext;
  const panelItems = [];
  const panels = flattenChildren(children).map((panel, index) => {
    assert(
      // @ts-expect-error
      typeof panel === "object" && panel.type.__isTabPanel__,
      "Only TabPanel elements can be direct children of a TabPanels"
    );
    panelItems.push(index);
    return /* @__PURE__ */ jsx(
      TabPanelsContext.Provider,
      {
        value: {
          renderInactive: renderInactivePanels,
          panelIndex: index
        },
        children: panel
      },
      index
    );
  });
  useEffect(() => {
    dispatch({ type: TAB_PANELS_UPDATED, panels: panelItems });
  }, [panelItems.join(), dispatch]);
  return /* @__PURE__ */ jsx(Fragment, { children: panels });
};
export {
  TabPanels
};