@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
40 lines (39 loc) • 1.86 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 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));
});