UNPKG

@trail-ui/react

Version:
96 lines (93 loc) 4.41 kB
"use strict"; var __defProp = Object.defineProperty; var __getOwnPropDesc = Object.getOwnPropertyDescriptor; var __getOwnPropNames = Object.getOwnPropertyNames; var __hasOwnProp = Object.prototype.hasOwnProperty; var __export = (target, all) => { for (var name in all) __defProp(target, name, { get: all[name], enumerable: true }); }; var __copyProps = (to, from, except, desc) => { if (from && typeof from === "object" || typeof from === "function") { for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable }); } return to; }; var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod); // src/tabs/index.ts var tabs_exports = {}; __export(tabs_exports, { Tab: () => Tab, TabList: () => TabList, TabPanel: () => TabPanel, Tabs: () => Tabs, TabsContext: () => import_react_aria_components2.TabsContext }); module.exports = __toCommonJS(tabs_exports); var import_react_aria_components2 = require("react-aria-components"); // src/tabs/tabs.tsx var import_hooks = require("@trail-ui/hooks"); var import_shared_utils = require("@trail-ui/shared-utils"); var import_theme = require("@trail-ui/theme"); var import_react = require("react"); var import_react_aria_components = require("react-aria-components"); var import_jsx_runtime = require("react/jsx-runtime"); var InternalTabsContext = (0, import_react.createContext)( {} ); function Tabs(props) { const { className, classNames, indicator, onSelectionChange, ...otherProps } = props; const variantProps = (0, import_theme.filterVariantProps)(props, import_theme.tabs.variantKeys); const slots = (0, import_react.useMemo)(() => (0, import_theme.tabs)({ ...variantProps }), [variantProps]); const baseStyles = (0, import_shared_utils.clsx)(classNames == null ? void 0 : classNames.base, className); return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InternalTabsContext.Provider, { value: { slots, classNames, indicator }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)( import_react_aria_components.Tabs, { ...otherProps, onSelectionChange, className: slots.base({ class: baseStyles }) } ) }); } function TabList(props) { const { slots, classNames } = (0, import_react.useContext)(InternalTabsContext); return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_aria_components.TabList, { ...props, className: slots.tabList({ class: classNames == null ? void 0 : classNames.tabList }) }); } function Tab(props) { const { slots, classNames, indicator } = (0, import_react.useContext)(InternalTabsContext); const { children } = props; const [, isMounted] = (0, import_hooks.useIsMounted)({ rerender: true }); const getIndicatoContent = () => { if (indicator === null) { return null; } if (indicator) { if (!(0, import_react.isValidElement)(indicator)) return null; return (0, import_react.cloneElement)(indicator, { className: slots.cursor({ class: classNames == null ? void 0 : classNames.cursor }) }); } return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: slots.cursor({ class: classNames == null ? void 0 : classNames.cursor }) }); }; return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_aria_components.Tab, { ...props, className: slots.tab({ class: classNames == null ? void 0 : classNames.tab }), children: (renderProps) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [ renderProps.isSelected && isMounted ? getIndicatoContent() : null, /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: slots.tabContent({ class: classNames == null ? void 0 : classNames.tabContent }), children: typeof children === "function" ? children(renderProps) : children }) ] }) }); } function TabPanel(props) { const { slots, classNames } = (0, import_react.useContext)(InternalTabsContext); return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_aria_components.TabPanel, { ...props, className: slots.panel({ class: classNames == null ? void 0 : classNames.panel }) }); } // Annotate the CommonJS export names for ESM import in node: 0 && (module.exports = { Tab, TabList, TabPanel, Tabs, TabsContext });