@workday/canvas-kit-labs-react
Version:
Canvas Kit Labs is an incubator for new and experimental components. Since we have a rather rigorous process for getting components in at a production level, it can be valuable to make them available earlier while we continuously iterate on the API/functi
72 lines (71 loc) • 4.02 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.SidePanel = exports.panelStencil = exports.useSidePanelContainer = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const common_1 = require("@workday/canvas-kit-react/common");
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
const useSidePanelModel_1 = require("./useSidePanelModel");
const SidePanelToggleButton_1 = require("./SidePanelToggleButton");
const SidePanelHeading_1 = require("./SidePanelHeading");
/**
* Adds the necessary props to the SidePanel container element.
* This includes the `id` and `aria-labelledby` attributes for accessibility.
*/
exports.useSidePanelContainer = (0, common_1.createElemPropsHook)(useSidePanelModel_1.useSidePanelModel)(({ state, events }) => {
return {
id: state.panelId,
'aria-labelledby': state.labelId,
onTransitionEnd: events.handleAnimationEnd,
};
});
exports.panelStencil = (0, canvas_kit_styling_1.createStencil)({
vars: {
expandedWidth: '',
collapsedWidth: '',
},
base: { name: "p0gms", styles: "box-sizing:border-box;overflow:hidden;position:relative;height:100%;outline:0.0625rem solid transparent;transition:width ease-out 200ms, max-width ease-out 200ms;" },
modifiers: {
variant: {
alternate: { name: "3tq923", styles: "background-color:var(--cnvs-sys-color-bg-default);box-shadow:var(--cnvs-sys-depth-5);" },
standard: { name: "2piv55", styles: "background-color:var(--cnvs-sys-color-bg-alt-softer);" }
},
expanded: {
expanded: { name: "q3a3s", styles: "width:var(--expandedWidth-panel-dc50a6);max-width:var(--expandedWidth-panel-dc50a6);" },
collapsed: { name: "48553m", styles: "width:var(--collapsedWidth-panel-dc50a6);max-width:var(--collapsedWidth-panel-dc50a6);" },
expanding: { name: "37367s", styles: "width:var(--expandedWidth-panel-dc50a6);max-width:var(--expandedWidth-panel-dc50a6);" },
collapsing: { name: "207jie", styles: "width:var(--collapsedWidth-panel-dc50a6);max-width:var(--collapsedWidth-panel-dc50a6);" }
}
}
}, "panel-dc50a6");
exports.SidePanel = (0, common_1.createContainer)('section')({
displayName: 'SidePanel',
modelHook: useSidePanelModel_1.useSidePanelModel,
elemPropsHook: exports.useSidePanelContainer,
subComponents: {
/**
* `SidePanel.ToggleButton` is a control that toggles between expanded and collapsed states.
* It must be used within the `SidePanel` component as a child. For accessibility purposes,
* it should be the first focusable element in the panel.
*
* The button automatically receives `aria-controls`, `aria-expanded`, and `aria-labelledby`
* attributes from the model.
*/
ToggleButton: SidePanelToggleButton_1.SidePanelToggleButton,
/**
* `SidePanel.Heading` is a styled heading that provides the accessible name for the SidePanel.
* The heading's `id` is automatically linked to the panel's `aria-labelledby` attribute.
* By default, the heading is hidden when the panel is collapsed.
*/
Heading: SidePanelHeading_1.SidePanelHeading,
},
})(({ collapsedWidth = 64, expandedWidth = 320, variant = 'standard', children, ...elemProps }, Element, model) => {
return ((0, jsx_runtime_1.jsx)(Element, { ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, [
(0, exports.panelStencil)({
expanded: model.state.transitionState,
variant,
expandedWidth: typeof expandedWidth === 'number' ? (0, canvas_kit_styling_1.px2rem)(expandedWidth) : expandedWidth,
collapsedWidth: typeof collapsedWidth === 'number' ? (0, canvas_kit_styling_1.px2rem)(collapsedWidth) : collapsedWidth,
}),
]), children: children }));
});