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

The parent module that contains all Workday Canvas Kit React components

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.SelectInput = void 0;
const react_1 = __importDefault(require("react"));
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 layout_1 = require("@workday/canvas-kit-react/layout");
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");
const selectInputStencil = (0, canvas_kit_styling_1.createStencil)({
    base: { name: "d63q5a", styles: "box-sizing:border-box;caret-color:transparent;cursor:default;&::selection{background-color:transparent;}" }
}, "select-input-f7e590");
const selectIconsStencil = (0, canvas_kit_styling_1.createStencil)({
    base: { name: "d63q5b", styles: "box-sizing:border-box;position:absolute;pointer-events:none;" }
}, "select-icons-c9a14d");
const hiddenSelectInputStencil = (0, canvas_kit_styling_1.createStencil)({
    base: { name: "d63q5c", styles: "box-sizing:border-box;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;" }
}, "hidden-select-input-d9dbbc");
exports.SelectInput = (0, common_1.createSubcomponent)(text_input_1.TextInput)({
    modelHook: useSelectModel_1.useSelectModel,
    elemPropsHook: useSelectInput_1.useSelectInput,
})(({ placeholder = 'Choose an option', inputStartIcon, formInputProps, ...elemProps }, Element, model) => {
    return (react_1.default.createElement(text_input_1.InputGroup, { "data-width": "ck-formfield-width" },
        inputStartIcon && model.state.selectedIds.length > 0 && (react_1.default.createElement(text_input_1.InputGroup.InnerStart, { "data-part": "select-start-icon-container", ...selectIconsStencil() },
            react_1.default.createElement(icon_1.SystemIcon, { "data-part": "select-start-icon", icon: inputStartIcon }))),
        react_1.default.createElement(text_input_1.InputGroup.Input, { "data-part": "select-hidden-input", ...formInputProps, ...hiddenSelectInputStencil() }),
        react_1.default.createElement(text_input_1.InputGroup.Input, { as: Element, placeholder: placeholder, "data-part": "select-visual-input", ...elemProps, ...(0, layout_1.mergeStyles)(elemProps, selectInputStencil()) }),
        react_1.default.createElement(text_input_1.InputGroup.InnerEnd, { "data-part": "select-caret-container", ...selectIconsStencil() },
            react_1.default.createElement(icon_1.SystemIcon, { "data-part": "select-caret-icon", icon: canvas_system_icons_web_1.caretDownSmallIcon }))));
});