braid-design-system
Version:
Themeable design system for the SEEK Group
49 lines (48 loc) • 1.64 kB
JavaScript
import { jsx } from "react/jsx-runtime";
import assert from "assert";
import { useContext } from "react";
import { Box } from "../Box/Box.mjs";
import { buildDataAttributes } from "../private/buildDataAttributes.mjs";
import { TabPanelsContext } from "./TabPanelsContext.mjs";
import { TabsContext } from "./TabsProvider.mjs";
import { tabPanel } from "./Tabs.css.mjs";
const TabPanel = ({
children,
data,
item,
...restProps
}) => {
const tabsContext = useContext(TabsContext);
const tabPanelsContext = useContext(TabPanelsContext);
assert(
tabsContext !== null,
"A TabPanel must be rendered as a child of TabsProvider. See the documentation for correct usage: https://seek-oss.github.io/braid-design-system/components/Tabs"
);
if (!tabPanelsContext) {
throw new Error("TabPanel rendered outside TabPanels");
}
if (!tabsContext) {
throw new Error("TabPanel rendered outside TabsProvider");
}
const { a11y, selectedIndex, selectedItem } = tabsContext;
const { panelIndex, renderInactive } = tabPanelsContext;
const isSelected = selectedIndex > -1 ? panelIndex === selectedIndex : selectedItem === item;
return /* @__PURE__ */ jsx(
Box,
{
...a11y.tabPanelProps({ panelIndex, isSelected }),
display: isSelected ? void 0 : "none",
position: "relative",
outline: "focus",
borderRadius: "large",
className: tabPanel,
...buildDataAttributes({ data, validateRestProps: restProps }),
children: isSelected || renderInactive ? children : void 0
}
);
};
TabPanel.displayName = "TabPanel";
TabPanel.__isTabPanel__ = true;
export {
TabPanel
};