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

The parent module that contains all Workday Canvas Kit React components

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ExpandableIcon = exports.expandableIconStencil = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const common_1 = require("@workday/canvas-kit-react/common");
const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
const useExpandableIcon_1 = require("./hooks/useExpandableIcon");
const icon_1 = require("@workday/canvas-kit-react/icon");
const useExpandableModel_1 = require("./hooks/useExpandableModel");
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
const layout_1 = require("@workday/canvas-kit-react/layout");
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
exports.expandableIconStencil = (0, canvas_kit_styling_1.createStencil)({
    extends: icon_1.systemIconStencil,
    base: { name: "27ygkq", styles: "box-sizing:border-box;padding:var(--cnvs-sys-space-x1);" },
    modifiers: {
        isExpanded: {
            true: { name: "36vi8k", styles: "" },
            false: { name: "taccl", styles: "" }
        },
        position: {
            start: { name: "3hndpc", styles: "" },
            end: { name: "3ap6ir", styles: "" },
            only: { name: "4ear4d", styles: "" }
        }
    },
    compound: [
        {
            modifiers: { position: 'end', isExpanded: false },
            styles: { name: "2mk7e2", styles: "margin-inline-start:auto;transform:rotate(180deg);padding-inline-end:var(--cnvs-sys-space-x3);" }
        },
        {
            modifiers: { position: 'end', isExpanded: true },
            styles: { name: "195nfa", styles: "margin-inline-start:auto;padding-inline-start:var(--cnvs-sys-space-x3);" }
        },
        {
            modifiers: { position: 'start', isExpanded: false },
            styles: { name: "2yyo47", styles: "margin-inline-end:var(--cnvs-sys-space-x2);transform:rotate(90deg);:dir(rtl){transform:rotate(-90deg);}" }
        },
        {
            modifiers: { position: 'start', isExpanded: true },
            styles: { name: "38mp6w", styles: "margin-inline-end:var(--cnvs-sys-space-x2);transform:rotate(180deg);" }
        }
    ]
}, "expandable-icon-a75423");
exports.ExpandableIcon = (0, common_1.createSubcomponent)('span')({
    modelHook: useExpandableModel_1.useExpandableModel,
    elemPropsHook: useExpandableIcon_1.useExpandableIcon,
})(({ icon, visible, iconPosition = 'start', ...elementProps }, Element) => {
    return ((0, jsx_runtime_1.jsx)(icon_1.SystemIcon, { as: Element, icon: icon || canvas_system_icons_web_1.chevronUpIcon, ...(0, layout_1.mergeStyles)(elementProps, (0, exports.expandableIconStencil)({ position: iconPosition, isExpanded: visible })) }));
});