@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
45 lines (44 loc) • 2.09 kB
JavaScript
;
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 jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const styled_1 = __importDefault(require("@emotion/styled"));
const common_1 = require("@workday/canvas-kit-react/common");
const collection_1 = require("@workday/canvas-kit-react/collection");
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 = {}) => {
const { item } = react_1.default.useContext(collection_1.ListRenderItemContext);
const [localId, setLocalId] = react_1.default.useState(elemProps['data-id'] || (item === null || item === void 0 ? void 0 : item.id) || '');
(0, common_1.useMountLayout)(() => {
if (item) {
return;
}
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 ((0, jsx_runtime_1.jsx)(StyledTabsPanel, { as: Element, ...elemProps, children: children }));
});