@intility/bifrost-react
Version:
React library for Intility's design system, Bifrost.
42 lines (41 loc) • 1.69 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import classNames from "classnames";
import { forwardRef, useContext } from "react";
import { createPortal } from "react-dom";
import useUniqueId from "../../hooks/useUniqueId.js";
import TabsContext from "./TabsContext.js";
/**
* A single tab for `<Tabs>` container
* @visibleName Tabs.Item
*/ const TabsItem = /*#__PURE__*/ forwardRef(({ active: activeProp, onClick, children, content, contentProps, className, disabled = false, noPadding = false, eager = false, ...props }, ref)=>{
const id = useUniqueId();
const { portal, isActive, setActive } = useContext(TabsContext);
const active = activeProp ?? isActive(id, disabled);
return /*#__PURE__*/ _jsxs(_Fragment, {
children: [
/*#__PURE__*/ _jsx("button", {
type: "button",
...props,
disabled: disabled,
className: classNames("bf-tab", className, {
"bf-tab-active": active,
"bf-tab-disabled": disabled
}),
onClick: onClick ?? (()=>setActive(id)),
ref: ref,
children: children
}),
(active || eager) && portal && /*#__PURE__*/ createPortal(/*#__PURE__*/ _jsx("div", {
hidden: !active,
...contentProps,
className: classNames({
"bf-page-padding": !noPadding
}, contentProps?.className),
children: content
}), portal)
]
});
});
TabsItem.displayName = "Tabs.Item";
export default TabsItem;