UNPKG

@workday/canvas-kit-react

Version:

The parent module that contains all Workday Canvas Kit React components

40 lines (39 loc) 1.86 kB
"use strict"; var __importDefault = (this && this.__importDefault) || function (mod) { return (mod && mod.__esModule) ? mod : { "default": mod }; }; Object.defineProperty(exports, "__esModule", { value: true }); exports.TabsPanel = exports.useTabsPanel = void 0; const react_1 = __importDefault(require("react")); const styled_1 = __importDefault(require("@emotion/styled")); const common_1 = require("@workday/canvas-kit-react/common"); const layout_1 = require("@workday/canvas-kit-react/layout"); const useTabsModel_1 = require("./useTabsModel"); const StyledTabsPanel = (0, styled_1.default)(layout_1.Box)(); exports.useTabsPanel = (0, common_1.createElemPropsHook)(useTabsModel_1.useTabsModel)(({ state, events }, _, elemProps = {}) => { var _a; const [localId, setLocalId] = react_1.default.useState(elemProps['data-id'] || ((_a = elemProps.item) === null || _a === void 0 ? void 0 : _a.id) || ''); (0, common_1.useMountLayout)(() => { const defaultId = state.panelIndexRef.current; const itemId = localId || String(defaultId); events.registerPanel({ id: itemId, textValue: '' }); setLocalId(itemId); return () => { events.unregisterPanel({ id: itemId }); }; }); return { role: 'tabpanel', 'aria-labelledby': (0, common_1.slugify)(`${state.id}-${localId}`), hidden: !!localId && localId !== state.selectedIds[0], id: (0, common_1.slugify)(`tabpanel-${state.id}-${localId}`), tabIndex: 0, }; }); exports.TabsPanel = (0, common_1.createSubcomponent)('div')({ displayName: 'Tabs.Panel', modelHook: useTabsModel_1.useTabsModel, elemPropsHook: exports.useTabsPanel, })(({ children, ...elemProps }, Element) => { return (react_1.default.createElement(StyledTabsPanel, { as: Element, ...elemProps }, children)); });