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

The parent module that contains all Workday Canvas Kit React components

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { createSubcomponent } from '@workday/canvas-kit-react/common';
import { SystemIcon, systemIconStencil } from '@workday/canvas-kit-react/icon';
import { InputGroup, TextInput } from '@workday/canvas-kit-react/text-input';
import { createStencil } from '@workday/canvas-kit-styling';
import { chevronDownSmallIcon, chevronUpSmallIcon, } from '@workday/canvas-system-icons-web';
import { system } from '@workday/canvas-tokens-web';
import { useSelectInput } from './hooks/useSelectInput';
import { useSelectModel } from './hooks/useSelectModel';
export const selectInputStencil = 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");
export const SelectInput = createSubcomponent(TextInput)({
    modelHook: useSelectModel,
    elemPropsHook: useSelectInput,
})(({ inputStartIcon, formInputProps, error, ...elemProps }, Element, model) => {
    return (_jsxs(InputGroup, { "data-width": "ck-formfield-width", ...selectInputStencil({ error: error }), children: [inputStartIcon && model.state.selectedIds.length > 0 && (_jsx(InputGroup.InnerStart, { ...selectInputStencil.parts.startIconContainer, children: _jsx(SystemIcon, { ...selectInputStencil.parts.startIcon, icon: inputStartIcon }) })), _jsx(InputGroup.Input, { ...selectInputStencil.parts.hiddenInput, ...formInputProps }), _jsx(InputGroup.Input, { as: Element, placeholder: "Choose an option", error: error, ...selectInputStencil.parts.visualInput, ...elemProps }), _jsx(InputGroup.InnerEnd, { ...selectInputStencil.parts.caretContainer, children: _jsx(SystemIcon, { size: "md", ...selectInputStencil.parts.caret, icon: model.state.visibility === 'visible' ? chevronUpSmallIcon : chevronDownSmallIcon }) })] }));
});