@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 canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
const text_input_1 = require("@workday/canvas-kit-react/text-input");
const icon_1 = require("@workday/canvas-kit-react/icon");
const useSelectInput_1 = require("./hooks/useSelectInput");
const useSelectModel_1 = require("./hooks/useSelectModel");
const common_1 = require("@workday/canvas-kit-react/common");
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
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: "452ex6", styles: "box-sizing:border-box;[data-part=\"select-hidden-input\"]{position:absolute;top:var(--cnvs-sys-space-zero);bottom:var(--cnvs-sys-space-zero);left:var(--cnvs-sys-space-zero);right:var(--cnvs-sys-space-zero);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-bg-default);color:var(--cnvs-sys-color-text-default);cursor:default;&::placeholder{color:var(--cnvs-sys-color-text-default);}&::selection{background-color:transparent;}}&:has(:disabled, .disabled){[data-part=\"select-caret-icon\"]{--color-system-icon-3a4847:var(--cnvs-sys-color-fg-disabled);}}" },
    modifiers: {
        error: {
            error: { name: "46ovjg", styles: "[data-part=\"select-visual-input\"]{background-color:var(--cnvs-brand-error-lightest);}" },
            caution: { name: "1h53ex", styles: "[data-part=\"select-visual-input\"]{background-color:var(--cnvs-brand-alert-lightest);}" }
        }
    }
}, "select-input-9444aa");
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, { ...exports.selectInputStencil.parts.caret, icon: canvas_system_icons_web_1.caretDownSmallIcon }) })] }));
});