@cloud-ru/ds-fields 1.0.0

package/dist/cjs/components/FieldSelect/FieldSelect.js

@@ -0,0 +1,360 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldSelect = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const system_1 = require("@cloud-ru/ds-icons/interface/system");
+const input_private_1 = require("@cloud-ru/ds-input-private");
+const list_1 = require("@cloud-ru/ds-list");
+const tag_1 = require("@cloud-ru/ds-tag");
+const utils_1 = require("@cloud-ru/ds-utils");
+const classnames_1 = __importDefault(require("classnames"));
+const merge_refs_1 = __importDefault(require("merge-refs"));
+const react_1 = require("react");
+// Минимальная ширина поискового input'а в режиме чипов: при пустом вводе input «схлопывается»
+// к этому значению и прижимается к последнему чипу (паритет с легаси BASE_MIN_WIDTH).
+const SEARCH_INPUT_PLUG_MIN_WIDTH = 4;
+const field_decorator_1 = require("@cloud-ru/ds-field-decorator");
+const constants_1 = require("../../constants");
+const hooks_1 = require("../../hooks");
+const shared_1 = require("../shared");
+const styles_module_scss_1 = __importDefault(require('../shared/styles.module.css'));
+const styles_module_scss_2 = __importDefault(require('./styles.module.css'));
+const utils_2 = require("./utils");
+exports.FieldSelect = (0, react_1.forwardRef)(function FieldSelect(props, ref) {
+    const { label = '', labelTooltip, caption, hint, error, validationState = field_decorator_1.VALIDATION_STATE.Default, showHintIcon, length, required, size = field_decorator_1.SIZE.M, className, fieldClassName, items, pinTop, pinBottom, placeholder = '', iconBefore, prefix, postfix, disabled, readonly: readOnly, background = true, open: openProp, onOpenChange, placement, widthStrategy = 'eq', searchable = true, search, autocomplete = false, addOptionByEnter = false, resetSearchOnOptionSelection = true, showClearButton = true, showCopyButton = true, onCopyButtonClick, id, name, autoFocus, layoutPresets, onFocus: onFocusProp, onBlur: onBlurProp, enableFuzzySearch = true, selectedOptionFormatter, footer, footerActiveElementsRefs, loading, noDataState, noResultsState, errorDataState, dataError, dataFiltered, virtualized, scrollToSelectedItem, limitedScrollHeight, untouchableScrollbars, closeOnPopstate, onKeyDown: onKeyDownProp, 'data-test-id': dataTestId = constants_1.TEST_IDS.fieldSelect, } = props;
+    const multiple = (0, utils_2.isMultiple)(props);
+    const chips = multiple ? (props.chips ?? true) : false;
+    const removeByBackspace = multiple ? (props.removeByBackspace ?? true) : false;
+    const closeDroplistOnItemClick = props.closeDroplistOnItemClick ?? !multiple;
+    const resolvedAutoFocus = (0, hooks_1.useAdaptiveAutoFocus)(autoFocus, layoutPresets);
+    const inputRef = (0, react_1.useRef)(null);
+    // Реальный <input>: `inputRef` уходит в Droplist как `triggerElemRef`, а `PopoverPrivate`
+    // перезаписывает его `.current` своей span-обёрткой (см. MR!101). Отдельный ref на сам input
+    // нужен для `useButtonNavigation` (курсор/фокус) и возврата фокуса после очистки.
+    const inputElementRef = (0, react_1.useRef)(null);
+    const clearButtonRef = (0, react_1.useRef)(null);
+    const copyButtonRef = (0, react_1.useRef)(null);
+    // Контейнер чипов+input (замер доступной ширины) и скрытый плаг (замер ширины введённого текста)
+    // для расчёта minWidth поискового input'а в режиме чипов — см. searchInput ниже.
+    const contentRef = (0, react_1.useRef)(null);
+    const inputPlugRef = (0, react_1.useRef)(null);
+    const [chipInputMinWidth, setChipInputMinWidth] = (0, react_1.useState)(undefined);
+    const [hover, setHover] = (0, react_1.useState)(false);
+    const [focusVisible, setFocusVisible] = (0, react_1.useState)(false);
+    const [openLocal, setOpenLocal] = (0, react_1.useState)(false);
+    const open = openProp ?? openLocal;
+    const [singleLocal, setSingleLocal] = (0, react_1.useState)(!multiple ? props.defaultValue : undefined);
+    const [multipleLocal, setMultipleLocal] = (0, react_1.useState)(
+    // Array.isArray-страховка: при multiple defaultValue обязан быть массивом по типам,
+    // но «расхлябанный» вызов (например, Storybook-spread, где single-default остаётся
+    // строкой при переключении selection) не должен ронять компонент на `.map` строки.
+    multiple && Array.isArray(props.defaultValue) ? props.defaultValue : []);
+    const singleValue = (0, react_1.useMemo)(() => (!multiple ? (props.value ?? singleLocal) : undefined), [multiple, props.value, singleLocal]);
+    const multipleValue = (0, react_1.useMemo)(() => {
+        if (!multiple) {
+            return [];
+        }
+        return Array.isArray(props.value) ? props.value : multipleLocal;
+    }, [multiple, props.value, multipleLocal]);
+    const effectiveValidationState = (0, react_1.useMemo)(() => (error ? field_decorator_1.VALIDATION_STATE.Error : validationState), [error, validationState]);
+    const allItems = (0, react_1.useMemo)(() => [...(pinTop ?? []), ...items, ...(pinBottom ?? [])], [items, pinTop, pinBottom]);
+    const selectedPairs = (0, react_1.useMemo)(() => {
+        if (!multiple || multipleValue.length === 0) {
+            return [];
+        }
+        // Неизвестное значение (ещё не загружены опции) показываем по его id, не теряем (паритет с легаси).
+        return multipleValue.map(id => {
+            const item = (0, utils_2.findItem)(allItems, id);
+            return {
+                id,
+                label: item ? (0, utils_2.extractLabel)(item) : String(id),
+                disabled: Boolean(item?.disabled),
+                appearance: (0, utils_2.extractAppearance)(item),
+            };
+        });
+    }, [allItems, multiple, multipleValue]);
+    const formatPair = (0, react_1.useCallback)((pair) => (selectedOptionFormatter ? selectedOptionFormatter(pair) : pair.label), [selectedOptionFormatter]);
+    const selectedLabel = (0, react_1.useMemo)(() => {
+        if (!multiple) {
+            if (singleValue === undefined) {
+                return '';
+            }
+            const item = (0, utils_2.findItem)(allItems, singleValue);
+            const label = item ? (0, utils_2.extractLabel)(item) : String(singleValue);
+            return formatPair({ id: singleValue, label });
+        }
+        if (chips) {
+            return '';
+        }
+        if ('formatSelected' in props && props.formatSelected) {
+            return props.formatSelected(selectedPairs);
+        }
+        return selectedPairs.map(formatPair).join(', ');
+    }, [allItems, multiple, singleValue, selectedPairs, chips, props, formatPair]);
+    // Строка поиска: controlled через `search.value`, иначе локальный state. Auto-sync к выбранному
+    // значению делаем через СТАБИЛЬНЫЙ setLocalInput, а не через setInputValue в deps эффекта —
+    // иначе нестабильная ссылка сеттера зацикливает эффект (сбрасывала бы значение постоянно).
+    const [localInput, setLocalInput] = (0, react_1.useState)(search?.defaultValue ?? selectedLabel);
+    const inputValue = search?.value !== undefined ? search.value : localInput;
+    const [typing, setTyping] = (0, react_1.useState)(false);
+    const setInputValue = (0, react_1.useCallback)((next) => {
+        if (search?.value === undefined) {
+            setLocalInput(next);
+        }
+        search?.onChange?.(next);
+    }, [search]);
+    (0, react_1.useEffect)(() => {
+        if (!typing && resetSearchOnOptionSelection && search?.value === undefined) {
+            setLocalInput(selectedLabel);
+        }
+    }, [selectedLabel, typing, resetSearchOnOptionSelection, search]);
+    // autocomplete — клиентскую фильтрацию не делаем, список берётся из items как есть (серверный поиск).
+    const filteredItems = (0, react_1.useMemo)(() => {
+        if (!searchable || autocomplete || !typing) {
+            return items;
+        }
+        return (0, utils_2.filterItems)(items, inputValue, enableFuzzySearch);
+    }, [searchable, autocomplete, typing, items, inputValue, enableFuzzySearch]);
+    const filteredPinTop = (0, react_1.useMemo)(() => {
+        if (!searchable || autocomplete || !typing || !pinTop) {
+            return pinTop;
+        }
+        return (0, utils_2.filterItems)(pinTop, inputValue, enableFuzzySearch);
+    }, [searchable, autocomplete, typing, pinTop, inputValue, enableFuzzySearch]);
+    const filteredPinBottom = (0, react_1.useMemo)(() => {
+        if (!searchable || autocomplete || !typing || !pinBottom) {
+            return pinBottom;
+        }
+        return (0, utils_2.filterItems)(pinBottom, inputValue, enableFuzzySearch);
+    }, [searchable, autocomplete, typing, pinBottom, inputValue, enableFuzzySearch]);
+    const handleOpenChange = (0, react_1.useCallback)((next) => {
+        // Дроплист открывается кликом по полю (Droplist дёргает onOpenChange(true)).
+        // readonly/disabled поле открывать нельзя — блокируем открытие, закрытие разрешаем.
+        if (next && (disabled || readOnly))
+            return;
+        if (openProp === undefined) {
+            setOpenLocal(next);
+        }
+        onOpenChange?.(next);
+        if (!next) {
+            setTyping(false);
+            if (resetSearchOnOptionSelection) {
+                setInputValue(selectedLabel);
+            }
+        }
+    }, [openProp, onOpenChange, disabled, readOnly, resetSearchOnOptionSelection, setInputValue, selectedLabel]);
+    const handleSingleChange = (next) => {
+        if (multiple) {
+            return;
+        }
+        if (props.value === undefined) {
+            setSingleLocal(next);
+        }
+        props.onChange?.(next);
+        setTyping(false);
+    };
+    const handleMultipleChange = (next) => {
+        if (!multiple) {
+            return;
+        }
+        if (props.value === undefined) {
+            setMultipleLocal(next);
+        }
+        props.onChange?.(next);
+        if (searchable) {
+            setTyping(false);
+            if (resetSearchOnOptionSelection) {
+                setInputValue('');
+            }
+        }
+    };
+    const handleInputChange = (next) => {
+        setInputValue(next);
+        setTyping(true);
+        if (!open) {
+            handleOpenChange(true);
+        }
+    };
+    const handleClear = (0, react_1.useCallback)(() => {
+        if (multiple) {
+            // Отключённые выбранные значения остаются при очистке (паритет с легаси).
+            const keepDisabled = selectedPairs.filter(pair => pair.disabled).map(pair => pair.id);
+            if (props.value === undefined) {
+                setMultipleLocal(keepDisabled);
+            }
+            props.onChange?.(keepDisabled);
+        }
+        else {
+            if (props.value === undefined) {
+                setSingleLocal(undefined);
+            }
+            props.onChange?.(undefined);
+        }
+        setInputValue('');
+        setTyping(false);
+        inputElementRef.current?.focus();
+        // required → переоткрыть дроплист после очистки (паритет с легаси onClear).
+        if (required && !open) {
+            handleOpenChange(true);
+        }
+    }, [multiple, props, selectedPairs, setInputValue, required, open, handleOpenChange]);
+    const removeChip = (0, react_1.useCallback)((id) => {
+        if (!multiple) {
+            return;
+        }
+        // Нельзя удалить отключённый чип (паритет с легаси).
+        if (selectedPairs.find(pair => pair.id === id)?.disabled) {
+            return;
+        }
+        const next = multipleValue.filter(v => v !== id);
+        if (props.value === undefined) {
+            setMultipleLocal(next);
+        }
+        props.onChange?.(next);
+    }, [multiple, multipleValue, props, selectedPairs]);
+    const handleRemoveChip = (0, react_1.useCallback)((id) => (e) => {
+        e.stopPropagation();
+        removeChip(id);
+    }, [removeChip]);
+    const hasValue = multiple ? multipleValue.length > 0 : singleValue !== undefined;
+    const showClear = Boolean(showClearButton && hasValue && !disabled && !readOnly);
+    const showCopy = Boolean(showCopyButton && hasValue && readOnly && !disabled);
+    const valueToCopy = multiple ? selectedPairs.map(formatPair).join(', ') : selectedLabel;
+    const onCopy = (0, react_1.useCallback)(async () => {
+        const copied = await (0, shared_1.copyTextToClipboard)(valueToCopy);
+        if (copied) {
+            onCopyButtonClick?.();
+        }
+        return copied;
+    }, [onCopyButtonClick, valueToCopy]);
+    // Clear/Copy как roving-postfix: ArrowRight из input (курсор в конце или readonly) уводит на
+    // кнопку, ArrowLeft — обратно в поле. Паритет с FieldCombo. `inputElementRef` — реальный input,
+    // т.к. `inputRef` клобберится popover'ом.
+    const clearButtonSettings = (0, input_private_1.useClearButton)({
+        clearButtonRef,
+        showClearButton: showClear,
+        size: (0, shared_1.toInputSize)(size),
+        onClear: handleClear,
+        onDown: shared_1.preventSlotMouseDown,
+        disabled: Boolean(disabled || readOnly),
+        dataTestId: constants_1.TEST_IDS.fieldSelectClear,
+    });
+    const copyButtonSettings = (0, shared_1.useCopyButton)({
+        copyButtonRef,
+        showCopyButton: showCopy,
+        size: (0, shared_1.toInputSize)(size),
+        onCopy,
+        disabled: Boolean(disabled),
+        dataTestId: constants_1.TEST_IDS.fieldSelectCopy,
+    });
+    const { postfixButtons, inputTabIndex, onInputKeyDown } = (0, input_private_1.useButtonNavigation)({
+        inputRef: inputElementRef,
+        postfixButtons: (0, react_1.useMemo)(() => [clearButtonSettings, copyButtonSettings], [clearButtonSettings, copyButtonSettings]),
+        readonly: !searchable || Boolean(readOnly),
+        submitKeys: ['Enter', 'Space', 'Tab'],
+    });
+    const handleTriggerKeyDown = (event) => {
+        // Пробрасываем consumer onKeyDown до внутренней обработки (паритет с легаси useHandleOnKeyDown).
+        onKeyDownProp?.(event);
+        // Roving-навигация по clear/copy (ArrowRight/ArrowLeft). ArrowDown/Enter ниже не перехватываются.
+        onInputKeyDown(event);
+        if (disabled || readOnly) {
+            return;
+        }
+        if (event.key === 'ArrowDown' && !open) {
+            event.preventDefault();
+            handleOpenChange(true);
+        }
+        if (event.key === 'Escape' && open) {
+            event.preventDefault();
+            handleOpenChange(false);
+        }
+        if (addOptionByEnter && event.key === 'Enter' && inputValue !== '') {
+            // Зафиксировать введённый текст как новый выбор (создание опции «на лету»).
+            event.preventDefault();
+            if (multiple) {
+                if (!multipleValue.includes(inputValue)) {
+                    handleMultipleChange([...multipleValue, inputValue]);
+                }
+            }
+            else {
+                handleSingleChange(inputValue);
+            }
+            return;
+        }
+        if (event.key === 'Enter' && !open) {
+            event.preventDefault();
+            handleOpenChange(true);
+        }
+        if (event.key === 'Backspace' && removeByBackspace && multiple && inputValue === '' && multipleValue.length > 0) {
+            event.preventDefault();
+            const last = multipleValue[multipleValue.length - 1];
+            removeChip(last);
+        }
+    };
+    const handleTriggerMouseEnter = (0, react_1.useCallback)(() => {
+        if (!readOnly && !disabled) {
+            setHover(true);
+        }
+    }, [readOnly, disabled]);
+    const handleTriggerMouseLeave = (0, react_1.useCallback)(() => {
+        setHover(false);
+    }, []);
+    const handleTriggerClick = (0, react_1.useCallback)(() => {
+        if (disabled || readOnly) {
+            return;
+        }
+        if (!open) {
+            handleOpenChange(true);
+        }
+        inputElementRef.current?.focus();
+    }, [disabled, readOnly, open, handleOpenChange]);
+    const handleInputFocus = (0, react_1.useCallback)((event) => {
+        setFocusVisible(event.target.matches(':focus-visible'));
+        if (searchable) {
+            event.target.select();
+        }
+        onFocusProp?.(event);
+    }, [searchable, onFocusProp]);
+    const handleInputBlur = (0, react_1.useCallback)((event) => {
+        setFocusVisible(false);
+        onBlurProp?.(event);
+    }, [onBlurProp]);
+    const droplistSelection = multiple
+        ? { mode: 'multiple', value: multipleValue, onChange: handleMultipleChange }
+        : { mode: 'single', value: singleValue, onChange: handleSingleChange };
+    const hasChips = chips && selectedPairs.length > 0;
+    // minWidth поискового input'а в режиме чипов: ширина введённого текста (скрытый `.inputPlug`),
+    // но не больше ширины строки чипов (`contentRef`). Замер в layout-эффекте (до paint, без мигания):
+    // пустой ввод → ~4px (input прижат к последнему чипу), длинный ввод → перенос на новую строку
+    // через flex-wrap. Без чипов minWidth не задаётся (input занимает всю строку как single-select).
+    (0, utils_1.useLayoutEffect)(() => {
+        if (!hasChips) {
+            setChipInputMinWidth(undefined);
+            return;
+        }
+        const content = contentRef.current?.clientWidth ?? SEARCH_INPUT_PLUG_MIN_WIDTH;
+        const plug = inputPlugRef.current?.clientWidth ?? SEARCH_INPUT_PLUG_MIN_WIDTH;
+        setChipInputMinWidth(Math.min(content, Math.max(plug, SEARCH_INPUT_PLUG_MIN_WIDTH)));
+    }, [hasChips, inputValue, selectedPairs.length]);
+    const searchInputField = ((0, jsx_runtime_1.jsx)(input_private_1.InputPrivate, { ref: (0, merge_refs_1.default)(ref, inputRef, inputElementRef), className: (0, classnames_1.default)(styles_module_scss_1.default.fieldInput, !searchable && styles_module_scss_2.default.readonlyCursor), value: inputValue, onChange: searchable ? handleInputChange : undefined, placeholder: selectedLabel ? '' : placeholder, disabled: disabled, readonly: !searchable || readOnly, id: id, name: name, autoFocus: resolvedAutoFocus, tabIndex: inputTabIndex, onFocus: handleInputFocus, onBlur: handleInputBlur, onKeyDown: handleTriggerKeyDown, "data-test-id": constants_1.TEST_IDS.fieldSelectInput }));
+    // В режиме чипов input заворачивается в `.inputWrapper` с динамической minWidth (флоу за чипами);
+    // без чипов — обычный `inputArea` на всю строку.
+    const searchInput = hasChips ? ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_2.default.inputWrapper, style: { minWidth: chipInputMinWidth }, children: searchInputField })) : ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.inputArea, children: searchInputField }));
+    const trigger = (
+    // Семантика: combobox-обёртка с InputPrivate внутри (input = focusable element).
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.fieldWrapper, styles_module_scss_2.default.trigger, fieldClassName), "data-size": size, "data-validation-state": effectiveValidationState, "data-disabled": disabled || undefined, "data-readonly": readOnly || undefined, "data-withbackground": background || undefined, "data-focusvisible": focusVisible || open || undefined, "data-hover": !readOnly && !disabled && hover ? true : undefined, "data-test-id": dataTestId, onMouseEnter: handleTriggerMouseEnter, onMouseLeave: handleTriggerMouseLeave, onClick: handleTriggerClick, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.backgroundWrapper, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.materialLayer, ...(0, shared_1.getAcrylicProps)({
+                            validationState: effectiveValidationState,
+                            disabled,
+                            readonly: readOnly,
+                            hover,
+                            focusVisible: focusVisible || open,
+                        }), children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.acrylicBg, "aria-hidden": true }) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.borderStateLayer, "data-state": 'borderOnBackground' }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.focusLayer })] }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.fieldContainer, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.contentWrapper, children: [iconBefore && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.iconSlot, children: iconBefore }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.inputLine, children: [prefix && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.prefix, children: prefix }), hasChips ? ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_2.default.chipsRow, ref: contentRef, "data-test-id": constants_1.TEST_IDS.fieldSelectChips, children: [selectedPairs.map(pair => ((0, jsx_runtime_1.jsx)(tag_1.Tag, { label: formatPair(pair), size: utils_2.TAG_SIZE_MAP[size], appearance: pair.appearance ?? 'neutral', onDelete: disabled || readOnly || pair.disabled ? undefined : handleRemoveChip(pair.id) }, String(pair.id)))), searchInput, (0, jsx_runtime_1.jsx)("span", { ref: inputPlugRef, className: styles_module_scss_2.default.inputPlug, "aria-hidden": true, children: inputValue })] })) : (searchInput), postfixButtons && (
+                                // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+                                (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.postfixButtonsSlot, onMouseDown: shared_1.preventSlotMouseDown, onClick: shared_1.stopSlotClickPropagation, children: postfixButtons })), postfix && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.postfix, children: postfix })] }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.iconSlot, children: (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_2.default.chevron, "data-open": open || undefined, "aria-hidden": true, children: (0, jsx_runtime_1.jsx)(system_1.ChevronDownSVG, {}) }) })] }) })] }));
+    return ((0, jsx_runtime_1.jsx)(field_decorator_1.FieldDecorator, { className: className, label: label, labelTooltip: labelTooltip, caption: caption, hint: hint, error: error, size: size, validationState: validationState, showHintIcon: showHintIcon, length: length, required: required, labelFor: id, disabled: disabled, readonly: readOnly, children: (0, jsx_runtime_1.jsx)(list_1.Droplist, { items: filteredItems, label: label, pinTop: filteredPinTop, pinBottom: filteredPinBottom, trigger: 'click', placement: placement, widthStrategy: widthStrategy, triggerElemRef: inputRef, size: size, open: open, onOpenChange: handleOpenChange, selection: droplistSelection, closeDroplistOnItemClick: closeDroplistOnItemClick, footer: footer, footerActiveElementsRefs: footerActiveElementsRefs, loading: loading, noDataState: noDataState, noResultsState: noResultsState, errorDataState: errorDataState, dataError: dataError, dataFiltered: dataFiltered ?? (searchable && typing && inputValue !== ''), virtualized: virtualized, scroll: true, scrollToSelectedItem: scrollToSelectedItem, limitedScrollHeight: limitedScrollHeight, untouchableScrollbars: untouchableScrollbars, closeOnPopstate: closeOnPopstate, children: trigger }) }));
+});

package/dist/cjs/components/FieldSelect/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const SELECTION_MODE: {
+    readonly Single: "single";
+    readonly Multiple: "multiple";
+};

package/dist/cjs/components/FieldSelect/constants.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SELECTION_MODE = void 0;
+exports.SELECTION_MODE = {
+    Single: 'single',
+    Multiple: 'multiple',
+};

package/dist/cjs/components/FieldSelect/index.d.ts

@@ -0,0 +1,3 @@
+export * from './FieldSelect';
+export * from './constants';
+export * from './types';

package/dist/cjs/components/FieldSelect/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./FieldSelect"), exports);
+__exportStar(require("./constants"), exports);
+__exportStar(require("./types"), exports);

package/dist/cjs/components/FieldSelect/styles.module.css

@@ -0,0 +1,92 @@
+.chevron{
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+  transition:transform 0.15s ease-in-out;
+}
+.chevron[data-open=true]{
+  transform:rotate(180deg);
+}
+
+.trigger{
+  cursor:text;
+}
+.trigger[data-disabled=true]{
+  cursor:not-allowed;
+}
+.trigger[data-readonly=true]{
+  cursor:default;
+}
+
+.readonlyCursor{
+  cursor:pointer;
+}
+
+.chipsRow{
+  display:flex;
+  flex:1 0 0;
+  flex-wrap:wrap;
+  align-content:center;
+  align-items:center;
+  min-width:0;
+}
+[data-size=s] .chipsRow{
+  gap:var(--sn-tag-anatomy-size-xs-tagRow-gap, var(--sn-density-spacing-control-wrapper-horizontal-xs, var(--sn-primitive-dimension-8, 8px)));
+  padding-top:var(--sn-field-anatomy-size-s-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-s, var(--sn-primitive-dimension-8, 8px)));
+  padding-bottom:var(--sn-field-anatomy-size-s-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-s, var(--sn-primitive-dimension-8, 8px)));
+}
+[data-size=m] .chipsRow{
+  gap:var(--sn-tag-anatomy-size-xs-tagRow-gap, var(--sn-density-spacing-control-wrapper-horizontal-xs, var(--sn-primitive-dimension-8, 8px)));
+  padding-top:var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-m, var(--sn-primitive-dimension-8, 8px)));
+  padding-bottom:var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-m, var(--sn-primitive-dimension-8, 8px)));
+}
+[data-size=l] .chipsRow{
+  gap:var(--sn-tag-anatomy-size-s-tagRow-gap, var(--sn-primitive-dimension-2, 2px));
+  padding-top:var(--sn-field-anatomy-size-l-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-l, var(--sn-primitive-dimension-8, 8px)));
+  padding-bottom:var(--sn-field-anatomy-size-l-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-l, var(--sn-primitive-dimension-8, 8px)));
+}
+
+.inputWrapper{
+  position:relative;
+  display:inline-flex;
+  flex:1 1 0;
+  min-width:var(--sn-primitive-dimension-4, 4px);
+}
+
+.inputPlug{
+  pointer-events:none;
+  position:absolute;
+  top:0;
+  left:0;
+  overflow:hidden;
+  width:-moz-fit-content;
+  width:fit-content;
+  max-width:100%;
+  height:0;
+  white-space:pre;
+}
+[data-size=s] .inputPlug{
+  font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-s, var(--sn-brand-font-fontWeight-light-regular-body-s, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
+  font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
+  letter-spacing:var(--sn-regular-body-s-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
+}
+[data-size=m] .inputPlug{
+  font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+  font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
+  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
+}
+[data-size=l] .inputPlug{
+  font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-l, var(--sn-brand-font-fontWeight-light-regular-body-l, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
+  font-size:var(--sn-regular-body-l-fontSize, var(--sn-density-typography-roleBody-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
+  letter-spacing:var(--sn-regular-body-l-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
+}