@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 { caretDownSmallIcon } from '@workday/canvas-system-icons-web';
import { createStencil } from '@workday/canvas-kit-styling';
import { InputGroup, TextInput } from '@workday/canvas-kit-react/text-input';
import { SystemIcon, systemIconStencil } from '@workday/canvas-kit-react/icon';
import { useSelectInput } from './hooks/useSelectInput';
import { useSelectModel } from './hooks/useSelectModel';
import { createSubcomponent } from '@workday/canvas-kit-react/common';
import { system, brand } from '@workday/canvas-tokens-web';
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: "3g92ua", 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: "299ew0", styles: "[data-part=\"select-visual-input\"]{background-color:var(--cnvs-brand-error-lightest);}" },
            caution: { name: "121qqc", styles: "[data-part=\"select-visual-input\"]{background-color:var(--cnvs-brand-alert-lightest);}" }
        }
    }
}, "select-input-9444aa");
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, { ...selectInputStencil.parts.caret, icon: caretDownSmallIcon }) })] }));
});