@workday/canvas-kit-react/dist/commonjs/select/lib/SelectInput.js

The parent module that contains all Workday Canvas Kit React components

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SelectInput = exports.selectInputStencil = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const common_1 = require("@workday/canvas-kit-react/common");
const icon_1 = require("@workday/canvas-kit-react/icon");
const text_input_1 = require("@workday/canvas-kit-react/text-input");
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
const useSelectInput_1 = require("./hooks/useSelectInput");
const useSelectModel_1 = require("./hooks/useSelectModel");
exports.selectInputStencil = (0, canvas_kit_styling_1.createStencil)({
    parts: {
        caret: 'select-caret-icon',
        caretContainer: 'select-caret-container',
        startIconContainer: 'select-start-icon-container',
        startIcon: 'select-start-icon',
        endIcon: 'select-end-icon',
        hiddenInput: 'select-hidden-input',
        visualInput: 'select-visual-input',
    },
    base: { name: "3xhrb6", styles: "box-sizing:border-box;[data-part=\"select-hidden-input\"]{position:absolute;top:0;bottom:0;left:0;right:0;opacity:var(--cnvs-sys-opacity-zero);cursor:default;pointer-events:none;min-width:100%;width:100%;}[data-part=\"select-start-icon\"], [data-part=\"select-end-icon\"], [data-part=\"select-caret-container\"], [data-part=\"select-start-icon-container\"]{position:absolute;pointer-events:none;}[data-part=\"select-visual-input\"]{caret-color:transparent;background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));color:var(--cnvs-sys-color-fg-default);cursor:default;&::placeholder{color:var(--cnvs-sys-color-fg-default);}&::selection{background-color:transparent;}}[data-part=\"select-caret-icon\"]{--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-default);}&:has(:disabled, .disabled){[data-part=\"select-caret-icon\"]{--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-disabled);}}" },
    modifiers: {
        error: {
            error: { name: "29pz84", styles: "[data-part=\"select-visual-input\"]{background-color:var(--cnvs-sys-color-brand-surface-critical-default, oklch(0.6289 0.2567 29.11 / 0.04));}" },
            caution: { name: "1hpvx9", styles: "[data-part=\"select-visual-input\"]{background-color:var(--cnvs-sys-color-brand-surface-caution-default, oklch(0.7982 0.159 92.57 / 0.1));}" }
        }
    }
}, "select-input-3e661d");
exports.SelectInput = (0, common_1.createSubcomponent)(text_input_1.TextInput)({
    modelHook: useSelectModel_1.useSelectModel,
    elemPropsHook: useSelectInput_1.useSelectInput,
})(({ inputStartIcon, formInputProps, error, ...elemProps }, Element, model) => {
    return ((0, jsx_runtime_1.jsxs)(text_input_1.InputGroup, { "data-width": "ck-formfield-width", ...(0, exports.selectInputStencil)({ error: error }), children: [inputStartIcon && model.state.selectedIds.length > 0 && ((0, jsx_runtime_1.jsx)(text_input_1.InputGroup.InnerStart, { ...exports.selectInputStencil.parts.startIconContainer, children: (0, jsx_runtime_1.jsx)(icon_1.SystemIcon, { ...exports.selectInputStencil.parts.startIcon, icon: inputStartIcon }) })), (0, jsx_runtime_1.jsx)(text_input_1.InputGroup.Input, { ...exports.selectInputStencil.parts.hiddenInput, ...formInputProps }), (0, jsx_runtime_1.jsx)(text_input_1.InputGroup.Input, { as: Element, placeholder: "Choose an option", error: error, ...exports.selectInputStencil.parts.visualInput, ...elemProps }), (0, jsx_runtime_1.jsx)(text_input_1.InputGroup.InnerEnd, { ...exports.selectInputStencil.parts.caretContainer, children: (0, jsx_runtime_1.jsx)(icon_1.SystemIcon, { size: "md", ...exports.selectInputStencil.parts.caret, icon: model.state.visibility === 'visible' ? canvas_system_icons_web_1.chevronUpSmallIcon : canvas_system_icons_web_1.chevronDownSmallIcon }) })] }));
});