@workday/canvas-kit-react/dist/commonjs/expandable/lib/ExpandableTarget.js

The parent module that contains all Workday Canvas Kit React components

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ExpandableTarget = exports.expandableTargetStencil = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const common_1 = require("@workday/canvas-kit-react/common");
const layout_1 = require("@workday/canvas-kit-react/layout");
const text_1 = require("@workday/canvas-kit-react/text");
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
const useExpandableModel_1 = require("./hooks/useExpandableModel");
const useExpandableTarget_1 = require("./hooks/useExpandableTarget");
exports.expandableTargetStencil = (0, canvas_kit_styling_1.createStencil)({
    extends: common_1.cornerShapeStencil,
    base: { name: "30nzun", styles: "box-sizing:border-box;background:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));border-color:var(--cnvs-sys-color-border-transparent);--shape-corner-shape-ccab68:var(--cnvs-sys-shape-lg, 0.75rem);border-width:0;display:flex;align-items:center;flex-direction:row;gap:var(--cnvs-sys-gap-none, var(--cnvs-sys-space-zero, 0));justify-content:start;padding:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));cursor:pointer;width:100%;&:hover, &.hover{background-color:var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));}&:focus-visible, &.focus{outline:0.125rem solid var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));}" }
}, "expandable-target-6f2998");
exports.ExpandableTarget = (0, common_1.createSubcomponent)('button')({
    modelHook: useExpandableModel_1.useExpandableModel,
    elemPropsHook: useExpandableTarget_1.useExpandableTarget,
})(({ children, headingLevel, ...elementProps }, Element) => {
    const button = ((0, jsx_runtime_1.jsx)(Element, { ...(0, layout_1.mergeStyles)(elementProps, (0, exports.expandableTargetStencil)()), children: children }));
    return headingLevel ? ((0, jsx_runtime_1.jsx)(text_1.Heading, { size: "small", as: headingLevel, cs: { margin: 0 }, children: button })) : (button);
});