@snack-uikit/fields 0.17.13 → 0.17.14-preview-b0dbf1fa.0

package/dist/components/FieldSelect/FieldSelectMultiple.js

@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import cn from 'classnames';
 import mergeRefs from 'merge-refs';
-import { forwardRef, useMemo, useRef } from 'react';
+import { forwardRef, useLayoutEffect, useRef, useState } from 'react';
 import { InputPrivate } from '@snack-uikit/input-private';
 import { Droplist, useFuzzySearch } from '@snack-uikit/list';
 import { Tag } from '@snack-uikit/tag';
@@ -23,58 +23,35 @@ import { FieldDecorator } from '../FieldDecorator';
 import { extractFieldDecoratorProps } from '../FieldDecorator/utils';
 import { useButtons, useHandleDeleteItem, useHandleOnKeyDown, useSearchInput } from './hooks';
 import styles from './styles.module.css';
-import { extractListProps, findSelectedOptions, getArrowIcon, mapOptionToAppearance, transformOptionsToItems, } from './utils';
+import { extractListProps, getArrowIcon, updateMultipleItems } from './utils';
 const BASE_MIN_WIDTH = 4;
 export const FieldSelectMultiple = forwardRef((_a, ref) => {
-    var _b, _c, _d;
+    var _b;
     var { id, name, placeholder, size = 's', options, value: valueProp, defaultValue, onChange: onChangeProp, disabled = false, readonly = false, searchable = true, showClearButton = true, onKeyDown: onInputKeyDownProp, validationState = 'default', search, autocomplete = false, prefixIcon, removeByBackspace = false, addOptionByEnter = false, open: openProp, onOpenChange } = _a, rest = __rest(_a, ["id", "name", "placeholder", "size", "options", "value", "defaultValue", "onChange", "disabled", "readonly", "searchable", "showClearButton", "onKeyDown", "validationState", "search", "autocomplete", "prefixIcon", "removeByBackspace", "addOptionByEnter", "open", "onOpenChange"]);
     const localRef = useRef(null);
     const inputPlugRef = useRef(null);
     const contentRef = useRef(null);
     const [open = false, setOpen] = useValueControl({ value: openProp, onChange: onOpenChange });
-    const items = useMemo(() => transformOptionsToItems(options), [options]);
-    const mapItemsToTagAppearance = useMemo(() => mapOptionToAppearance(options), [options]);
     const [value, setValue] = useValueControl({
         value: valueProp,
         defaultValue,
         onChange: onChangeProp,
     });
-    const { selected, itemsWithPlaceholder, disabledSelected } = useMemo(() => {
-        const [notSortSelectedOption, placeholder] = findSelectedOptions(items, value);
-        const selectedWithPlaceholder = notSortSelectedOption || placeholder ? (placeholder !== null && placeholder !== void 0 ? placeholder : []).concat(notSortSelectedOption !== null && notSortSelectedOption !== void 0 ? notSortSelectedOption : []) : undefined;
-        const selected = selectedWithPlaceholder
-            ? selectedWithPlaceholder.sort((a, b) => {
-                if (b.disabled && !a.disabled) {
-                    return 1;
-                }
-                if (a.disabled && !b.disabled) {
-                    return -1;
-                }
-                return 0;
-            })
-            : undefined;
-        const placeholderItems = placeholder ? placeholder : [];
-        const disabledSelected = selected === null || selected === void 0 ? void 0 : selected.filter((item) => item.disabled);
-        return {
-            selected,
-            disabledSelected,
-            itemsWithPlaceholder: placeholderItems.concat(items),
-        };
-    }, [items, value]);
-    const { inputValue, onInputValueChange, prevInputValue } = useSearchInput(Object.assign(Object.assign({}, search), { defaultValue: '' }));
+    const [{ selectedItems, items = [] }, setItems] = useState(() => updateMultipleItems({ options, value, currentItems: [], selectedItems: undefined }));
+    const { inputValue, setInputValue, prevInputValue, updateInputValue } = useSearchInput(Object.assign(Object.assign({}, search), { defaultValue: '' }));
+    useLayoutEffect(() => {
+        setItems(({ selectedItems }) => updateMultipleItems({ options, value, selectedItems }));
+    }, [options, value]);
     const onClear = () => {
         var _a;
-        const disabledValues = disabledSelected === null || disabledSelected === void 0 ? void 0 : disabledSelected.map(item => item.id);
-        setValue(disabledValues);
-        onInputValueChange('');
+        setValue(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.filter(item => item.disabled).map(item => item.id));
         (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-        setOpen(true);
     };
     const { ArrowIcon, arrowIconSize } = getArrowIcon({ size, open });
     const { buttons, inputKeyDownNavigationHandler, buttonsRefs } = useButtons({
         readonly,
         size,
-        showClearButton: showClearButton && !disabled && !readonly && ((_b = value === null || value === void 0 ? void 0 : value.length) !== null && _b !== void 0 ? _b : 0) > ((_c = disabledSelected === null || disabledSelected === void 0 ? void 0 : disabledSelected.length) !== null && _c !== void 0 ? _c : 0),
+        showClearButton: showClearButton && !disabled && !readonly && Boolean(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.find(item => !item.disabled)),
         showCopyButton: false,
         inputRef: localRef,
         onClear,
@@ -87,8 +64,8 @@ export const FieldSelectMultiple = forwardRef((_a, ref) => {
     const handleItemDelete = useHandleDeleteItem(setValue);
     const handleOnKeyDown = (onKeyDown) => (e) => {
         if (removeByBackspace && e.code === 'Backspace' && inputValue === '') {
-            if ((selected === null || selected === void 0 ? void 0 : selected.length) && !selected.slice(-1)[0].disabled) {
-                handleItemDelete(selected.pop())();
+            if ((selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) && !selectedItems.slice(-1)[0].disabled) {
+                handleItemDelete(selectedItems.pop())();
             }
         }
         if (e.code === 'Enter') {
@@ -97,8 +74,7 @@ export const FieldSelectMultiple = forwardRef((_a, ref) => {
         }
         if (addOptionByEnter && e.code === 'Enter' && inputValue !== '') {
             setValue((value) => (value !== null && value !== void 0 ? value : []).concat(inputValue));
-            onInputValueChange('');
-            prevInputValue.current = '';
+            updateInputValue();
         }
         if (!open && prevInputValue.current !== inputValue) {
             setOpen(true);
@@ -109,8 +85,7 @@ export const FieldSelectMultiple = forwardRef((_a, ref) => {
         if (!readonly && !disabled && !buttonsRefs.includes(document.activeElement)) {
             setOpen(open);
             if (!open) {
-                onInputValueChange('');
-                prevInputValue.current = '';
+                updateInputValue();
                 if (inputPlugRef.current) {
                     inputPlugRef.current.style.width = BASE_MIN_WIDTH + 'px';
                 }
@@ -124,26 +99,27 @@ export const FieldSelectMultiple = forwardRef((_a, ref) => {
     };
     const handleBlur = (e) => {
         var _a;
-        if (!open) {
-            onInputValueChange('');
-        }
         (_a = rest === null || rest === void 0 ? void 0 : rest.onBlur) === null || _a === void 0 ? void 0 : _a.call(rest, e);
     };
-    const fuzzySearch = useFuzzySearch(itemsWithPlaceholder);
-    const result = autocomplete || !searchable || prevInputValue.current === inputValue
-        ? itemsWithPlaceholder
-        : fuzzySearch(inputValue);
+    const fuzzySearch = useFuzzySearch(items);
+    const result = autocomplete || !searchable || prevInputValue.current === inputValue ? items : fuzzySearch(inputValue);
     return (_jsx(FieldDecorator, Object.assign({}, extractSupportProps(rest), extractFieldDecoratorProps(rest), { labelFor: id, size: size, validationState: validationState, children: _jsx(Droplist, Object.assign({}, extractListProps(rest), { items: result, triggerElemRef: localRef, selection: {
                 mode: 'multiple',
                 value: value,
-                onChange: setValue,
-            }, dataFiltered: (_d = rest.dataFiltered) !== null && _d !== void 0 ? _d : Boolean(inputValue.length), size: size, open: !disabled && !readonly && open, onOpenChange: handleOpenChange, children: ({ onKeyDown }) => {
+                onChange: value => {
+                    updateInputValue();
+                    setValue(value);
+                },
+            }, dataFiltered: (_b = rest.dataFiltered) !== null && _b !== void 0 ? _b : Boolean(inputValue.length), size: size, open: !disabled && !readonly && open, onOpenChange: handleOpenChange, children: ({ onKeyDown }) => {
                 var _a, _b, _c, _d;
-                return (_jsx(FieldContainerPrivate, { className: cn(styles.container, styles.tagContainer), validationState: validationState, disabled: disabled, readonly: readonly, focused: open, variant: 'single-line-container', inputRef: localRef, size: size, prefix: prefixIcon, children: _jsxs(_Fragment, { children: [_jsxs("div", { className: styles.contentWrapper, ref: contentRef, children: [selected &&
-                                        selected.map(option => (_jsx(Tag, { size: size === 'l' ? 's' : 'xs', tabIndex: -1, label: String(option.content.option), appearance: option.id ? mapItemsToTagAppearance[option === null || option === void 0 ? void 0 : option.id] : 'neutral', onDelete: !option.disabled && !disabled && !readonly ? handleItemDelete(option) : undefined }, option.id))), _jsx("div", { className: styles.inputWrapper, style: {
+                return (_jsx(FieldContainerPrivate, { className: cn(styles.container, styles.tagContainer), validationState: validationState, disabled: disabled, readonly: readonly, focused: open, variant: 'single-line-container', inputRef: localRef, size: size, prefix: prefixIcon, children: _jsxs(_Fragment, { children: [_jsxs("div", { className: styles.contentWrapper, ref: contentRef, children: [selectedItems &&
+                                        selectedItems.map(option => {
+                                            var _a;
+                                            return (_jsx(Tag, { size: size === 'l' ? 's' : 'xs', tabIndex: -1, label: String(option.content.option), appearance: (_a = option.appearance) !== null && _a !== void 0 ? _a : 'neutral', onDelete: !option.disabled && !disabled && !readonly ? handleItemDelete(option) : undefined }, option.id));
+                                        }), _jsx("div", { className: styles.inputWrapper, style: {
                                             minWidth: value
                                                 ? Math.min((_b = (_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _b !== void 0 ? _b : BASE_MIN_WIDTH, (_d = (_c = inputPlugRef.current) === null || _c === void 0 ? void 0 : _c.clientWidth) !== null && _d !== void 0 ? _d : BASE_MIN_WIDTH)
                                                 : '100%',
-                                        }, children: _jsx(InputPrivate, { id: id, name: name, type: 'text', disabled: disabled, placeholder: !selected || !selected.length ? placeholder : undefined, ref: mergeRefs(ref, localRef), onChange: searchable ? onInputValueChange : undefined, value: searchable ? inputValue : '', readonly: !searchable || readonly, "data-test-id": 'field-select__input', onKeyDown: handleOnKeyDown(onKeyDown), onBlur: handleBlur, className: styles.input }) })] }), _jsxs("div", { className: styles.postfix, children: [buttons, _jsx(ArrowIcon, { size: arrowIconSize, className: styles.arrowIcon })] }), _jsx("span", { ref: inputPlugRef, className: styles.inputPlug, children: inputValue })] }) }));
+                                        }, children: _jsx(InputPrivate, { id: id, name: name, type: 'text', disabled: disabled, placeholder: !selectedItems || !selectedItems.length ? placeholder : undefined, ref: mergeRefs(ref, localRef), onChange: searchable ? setInputValue : undefined, value: searchable ? inputValue : '', readonly: !searchable || readonly, "data-test-id": 'field-select__input', onKeyDown: handleOnKeyDown(onKeyDown), onBlur: handleBlur, className: styles.input }) })] }), _jsxs("div", { className: styles.postfix, children: [buttons, _jsx(ArrowIcon, { size: arrowIconSize, className: styles.arrowIcon })] }), _jsx("span", { ref: inputPlugRef, className: styles.inputPlug, children: inputValue })] }) }));
             } })) })));
 });

package/dist/components/FieldSelect/FieldSelectSingle.js

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import mergeRefs from 'merge-refs';
-import { forwardRef, useEffect, useMemo, useRef } from 'react';
+import { forwardRef, useCallback, useEffect, useLayoutEffect, useRef, useState, } from 'react';
 import { InputPrivate } from '@snack-uikit/input-private';
 import { Droplist, useFuzzySearch } from '@snack-uikit/list';
 import { extractSupportProps } from '@snack-uikit/utils';
@@ -21,7 +21,7 @@ import { FieldDecorator } from '../FieldDecorator';
 import { extractFieldDecoratorProps } from '../FieldDecorator/utils';
 import { useButtons, useHandleOnKeyDown, useSearchInput } from './hooks';
 import styles from './styles.module.css';
-import { extractListProps, findSelectedOption, getArrowIcon, transformOptionsToItems } from './utils';
+import { extractListProps, getArrowIcon, updateItems } from './utils';
 export const FieldSelectSingle = forwardRef((_a, ref) => {
     var _b, _c;
     var { id, name, placeholder, size = 's', options, value: valueProp, defaultValue, onChange: onChangeProp, disabled = false, readonly = false, searchable = true, showCopyButton = true, showClearButton = true, onKeyDown: onInputKeyDownProp, required = false, validationState = 'default', search, autocomplete = false, prefixIcon, addOptionByEnter = false, open: openProp, onOpenChange } = _a, rest = __rest(_a, ["id", "name", "placeholder", "size", "options", "value", "defaultValue", "onChange", "disabled", "readonly", "searchable", "showCopyButton", "showClearButton", "onKeyDown", "required", "validationState", "search", "autocomplete", "prefixIcon", "addOptionByEnter", "open", "onOpenChange"]);
@@ -32,35 +32,27 @@ export const FieldSelectSingle = forwardRef((_a, ref) => {
         defaultValue,
         onChange: onChangeProp,
     });
-    const items = useMemo(() => transformOptionsToItems(options), [options]);
-    const { selected, itemsWithPlaceholder } = useMemo(() => {
-        const [fonded, placeholder] = findSelectedOption(items, value);
-        return {
-            selected: fonded !== null && fonded !== void 0 ? fonded : placeholder,
-            itemsWithPlaceholder: (placeholder ? [placeholder] : []).concat(items),
-        };
-    }, [items, value]);
-    const { inputValue, onInputValueChange, prevInputValue } = useSearchInput(Object.assign(Object.assign({}, search), { defaultValue: (_b = selected === null || selected === void 0 ? void 0 : selected.content.option) !== null && _b !== void 0 ? _b : '' }));
+    const [{ selectedItem, items = [] }, setItems] = useState(() => updateItems({ options, value, currentItems: [], selectedItem: undefined }));
+    const { inputValue, setInputValue, prevInputValue, updateInputValue } = useSearchInput(Object.assign(Object.assign({}, search), { defaultValue: (_b = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.content.option) !== null && _b !== void 0 ? _b : '' }));
+    useLayoutEffect(() => {
+        setItems(({ selectedItem }) => updateItems({ options, value, selectedItem }));
+    }, [options, value]);
     useEffect(() => {
-        if ((selected === null || selected === void 0 ? void 0 : selected.content.option) && prevInputValue.current !== (selected === null || selected === void 0 ? void 0 : selected.content.option)) {
-            onInputValueChange(selected.content.option);
-            prevInputValue.current = selected === null || selected === void 0 ? void 0 : selected.content.option;
-        }
-    }, [onInputValueChange, selected === null || selected === void 0 ? void 0 : selected.content.option, prevInputValue]);
+        updateInputValue(selectedItem);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selectedItem]);
     const handleBlur = (e) => {
-        var _a, _b;
-        if (!open && (selected === null || selected === void 0 ? void 0 : selected.content.option) !== inputValue) {
-            onInputValueChange((_a = selected === null || selected === void 0 ? void 0 : selected.content.option) !== null && _a !== void 0 ? _a : '');
+        var _a;
+        if (!open) {
+            updateInputValue(selectedItem);
         }
-        (_b = rest === null || rest === void 0 ? void 0 : rest.onBlur) === null || _b === void 0 ? void 0 : _b.call(rest, e);
+        (_a = rest === null || rest === void 0 ? void 0 : rest.onBlur) === null || _a === void 0 ? void 0 : _a.call(rest, e);
     };
-    const onClear = () => {
+    const onClear = useCallback(() => {
         var _a;
-        setValue('');
-        onInputValueChange('');
+        setValue(undefined);
         (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-        setOpen(true);
-    };
+    }, [setValue]);
     const { ArrowIcon, arrowIconSize } = getArrowIcon({ size, open });
     const { buttons, inputKeyDownNavigationHandler, buttonsRefs } = useButtons({
         readonly,
@@ -69,13 +61,21 @@ export const FieldSelectSingle = forwardRef((_a, ref) => {
         showCopyButton,
         inputRef: localRef,
         onClear,
-        valueToCopy: (_c = selected === null || selected === void 0 ? void 0 : selected.content.option) !== null && _c !== void 0 ? _c : '',
+        valueToCopy: (_c = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.content.option) !== null && _c !== void 0 ? _c : '',
     });
     const commonHandleOnKeyDown = useHandleOnKeyDown({
         inputKeyDownNavigationHandler,
         onInputKeyDownProp,
         setOpen,
     });
+    const handleSelectionChange = useCallback((newValue) => {
+        var _a;
+        setValue(newValue);
+        (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        if (newValue) {
+            setOpen(false);
+        }
+    }, [setOpen, setValue]);
     const handleOnKeyDown = (onKeyDown) => (e) => {
         if (!open && prevInputValue.current !== inputValue) {
             setOpen(true);
@@ -85,35 +85,26 @@ export const FieldSelectSingle = forwardRef((_a, ref) => {
             e.preventDefault();
         }
         if (addOptionByEnter && e.code === 'Enter' && inputValue !== '') {
-            setValue(inputValue);
+            handleSelectionChange(inputValue);
         }
         commonHandleOnKeyDown(onKeyDown)(e);
     };
-    const handleSelectionChange = (newValue) => {
-        var _a;
-        setValue(newValue);
-        (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-        if (newValue) {
-            setOpen(false);
-        }
-    };
     const handleOpenChange = (open) => {
-        var _a, _b;
         if (!readonly && !disabled && !buttonsRefs.includes(document.activeElement)) {
             setOpen(open);
             if (!open) {
-                onInputValueChange((_a = selected === null || selected === void 0 ? void 0 : selected.content.option) !== null && _a !== void 0 ? _a : '');
-                prevInputValue.current = (_b = selected === null || selected === void 0 ? void 0 : selected.content.option) !== null && _b !== void 0 ? _b : '';
+                updateInputValue(selectedItem);
             }
         }
     };
-    const fuzzySearch = useFuzzySearch(itemsWithPlaceholder);
-    const result = autocomplete || !searchable || prevInputValue.current === inputValue
-        ? itemsWithPlaceholder
-        : fuzzySearch(inputValue);
+    const fuzzySearch = useFuzzySearch(items);
+    const result = autocomplete || !searchable || prevInputValue.current === inputValue ? items : fuzzySearch(inputValue);
     return (_jsx(FieldDecorator, Object.assign({}, extractSupportProps(rest), extractFieldDecoratorProps(rest), { validationState: validationState, required: required, readonly: readonly, labelFor: id, disabled: disabled, size: size, children: _jsx(Droplist, Object.assign({}, extractListProps(rest), { items: result, selection: {
                 mode: 'single',
                 value: value,
                 onChange: handleSelectionChange,
-            }, size: size, open: open, onOpenChange: handleOpenChange, triggerElemRef: localRef, children: ({ onKeyDown }) => (_jsxs(FieldContainerPrivate, { className: styles.container, validationState: validationState, disabled: disabled, readonly: readonly, focused: open, variant: 'single-line-container', inputRef: localRef, size: size, prefix: prefixIcon, children: [_jsx(InputPrivate, { id: id, name: name, type: 'text', disabled: disabled, placeholder: placeholder, ref: mergeRefs(ref, localRef), onChange: searchable ? onInputValueChange : undefined, value: inputValue, readonly: !searchable || readonly, "data-test-id": 'field-select__input', onKeyDown: handleOnKeyDown(onKeyDown), onBlur: handleBlur }), _jsxs("div", { className: styles.postfix, children: [buttons, _jsx(ArrowIcon, { size: arrowIconSize, className: styles.arrowIcon })] })] })) })) })));
+            }, size: size, open: open, onOpenChange: handleOpenChange, triggerElemRef: localRef, children: ({ onKeyDown }) => {
+                var _a;
+                return (_jsxs(FieldContainerPrivate, { className: styles.container, validationState: validationState, disabled: disabled, readonly: readonly, focused: open, variant: 'single-line-container', inputRef: localRef, size: size, prefix: prefixIcon, children: [_jsx(InputPrivate, { id: id, name: name, type: 'text', disabled: disabled, placeholder: placeholder, ref: mergeRefs(ref, localRef), onChange: searchable ? setInputValue : undefined, value: searchable ? inputValue : (_a = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.content.option) !== null && _a !== void 0 ? _a : '', readonly: !searchable || readonly, "data-test-id": 'field-select__input', onKeyDown: handleOnKeyDown(onKeyDown), onBlur: handleBlur }), _jsxs("div", { className: styles.postfix, children: [buttons, _jsx(ArrowIcon, { size: arrowIconSize, className: styles.arrowIcon })] })] }));
+            } })) })));
 });

package/dist/components/FieldSelect/hooks.d.ts

@@ -23,8 +23,10 @@ export declare function useButtons({ readonly, showClearButton, showCopyButton,
 };
 export declare function useSearchInput({ value, onChange, defaultValue }: SearchState): {
     inputValue: string;
-    onInputValueChange: Handler;
+    setInputValue: (value: any, ...args: any[]) => any;
     prevInputValue: import("react").MutableRefObject<string>;
+    onInputValueChange: (value: any, ...args: any[]) => any;
+    updateInputValue: (selectedItem?: ItemWithId) => void;
 };
 export declare function useHandleDeleteItem(setValue: Handler): (item?: ItemWithId) => (e?: MouseEvent<HTMLButtonElement>) => void;
 export {};

package/dist/components/FieldSelect/hooks.js

@@ -50,9 +50,15 @@ export function useButtons({ readonly, showClearButton, showCopyButton, size, on
     return { buttons, inputKeyDownNavigationHandler, buttonsRefs };
 }
 export function useSearchInput({ value, onChange, defaultValue }) {
-    const [inputValue = '', onInputValueChange] = useValueControl({ value, onChange, defaultValue });
+    const [inputValue = '', setInputValue] = useValueControl({ value, onChange, defaultValue });
     const prevInputValue = useRef(inputValue);
-    return { inputValue, onInputValueChange, prevInputValue };
+    const updateInputValue = useCallback((selectedItem) => {
+        var _a;
+        const newInputValue = (_a = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.content.option) !== null && _a !== void 0 ? _a : '';
+        setInputValue(() => newInputValue);
+        prevInputValue.current = newInputValue;
+    }, [prevInputValue, setInputValue]);
+    return { inputValue, setInputValue, prevInputValue, onInputValueChange: setInputValue, updateInputValue };
 }
 export function useHandleDeleteItem(setValue) {
     return useCallback((item) => (e) => {

package/dist/components/FieldSelect/types.d.ts

@@ -62,5 +62,8 @@ export type FieldSelectProps = (FieldSelectSingleProps & {
 }) | (FieldSelectMultipleProps & {
     selection: 'multiple';
 });
-export type ItemWithId = BaseItemProps | AccordionItemProps | NextListItemProps;
+export type ItemWithId = (BaseItemProps | AccordionItemProps | NextListItemProps) & {
+    placeholder?: boolean;
+    appearance?: TagProps['appearance'];
+};
 export {};

package/dist/components/FieldSelect/utils/extractListProps.d.ts

@@ -0,0 +1,3 @@
+import { DroplistProps } from '@snack-uikit/list';
+import { FieldSelectProps } from '../types';
+export declare function extractListProps({ dataError, noDataState, noResultsState, errorDataState, pinTop, pinBottom, dataFiltered, loading, }: Partial<FieldSelectProps>): Partial<DroplistProps>;

package/dist/components/FieldSelect/utils/extractListProps.js

@@ -0,0 +1,17 @@
+export function extractListProps({ dataError, noDataState, noResultsState, errorDataState, pinTop, pinBottom, dataFiltered, loading, }) {
+    return {
+        dataError,
+        noDataState,
+        noResultsState,
+        errorDataState,
+        pinTop,
+        pinBottom,
+        dataFiltered,
+        loading,
+        trigger: 'clickAndFocusVisible',
+        placement: 'bottom',
+        'data-test-id': 'field-select__list',
+        scroll: true,
+        marker: true,
+    };
+}

package/dist/components/FieldSelect/utils/getArrowIcon.d.ts

@@ -0,0 +1,8 @@
+import { Size } from '@snack-uikit/input-private';
+export declare function getArrowIcon({ size, open }: {
+    size: Size;
+    open: boolean;
+}): {
+    ArrowIcon: ({ size, ...props }: import("@snack-uikit/icons/dist/components/interface-icons/chevronUp").ISvgIconProps) => import("react/jsx-runtime").JSX.Element;
+    arrowIconSize: 16 | 24;
+};

package/dist/components/FieldSelect/utils/getArrowIcon.js

@@ -0,0 +1,8 @@
+import { ChevronDownSVG, ChevronUpSVG } from '@snack-uikit/icons';
+import { ICON_SIZE, SIZE } from '@snack-uikit/input-private';
+export function getArrowIcon({ size, open }) {
+    return {
+        ArrowIcon: open ? ChevronUpSVG : ChevronDownSVG,
+        arrowIconSize: size === SIZE.S ? ICON_SIZE.Xs : ICON_SIZE.S,
+    };
+}

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

@@ -0,0 +1,5 @@
+export * from './typeGuards';
+export * from './extractListProps';
+export * from './options';
+export * from './updateItems';
+export * from './getArrowIcon';

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

@@ -0,0 +1,5 @@
+export * from './typeGuards';
+export * from './extractListProps';
+export * from './options';
+export * from './updateItems';
+export * from './getArrowIcon';

package/dist/components/FieldSelect/utils/options.d.ts

@@ -0,0 +1,8 @@
+import { ItemProps, SelectionSingleValueType } from '@snack-uikit/list';
+import { TagProps } from '@snack-uikit/tag';
+import { ItemWithId, OptionProps } from '../types';
+export declare function transformOptionsToItems(options: OptionProps[]): (ItemProps & {
+    appearance?: TagProps['appearance'];
+})[];
+export declare function findSelectedOption(items: ItemProps[], value: SelectionSingleValueType): [ItemWithId | undefined, ItemWithId | undefined];
+export declare function findSelectedOptions(items: ItemProps[], value: SelectionSingleValueType[] | undefined): [ItemWithId[] | undefined, ItemWithId[] | undefined];

package/dist/components/FieldSelect/utils/options.js

@@ -0,0 +1,56 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { flattenItems } from '@snack-uikit/list';
+import { isAccordionOptionProps, isGroupOptionProps, isNextListOptionProps } from './typeGuards';
+export function transformOptionsToItems(options) {
+    return options.map(option => {
+        if (isAccordionOptionProps(option) || isNextListOptionProps(option)) {
+            const { description, option: contentOption, caption, options, value } = option, rest = __rest(option, ["description", "option", "caption", "options", "value"]);
+            return Object.assign(Object.assign({ 'data-test-id': 'field-select__list-option-' + option.value }, rest), { id: value, content: { option: contentOption, caption, description }, items: transformOptionsToItems(options) });
+        }
+        if (isGroupOptionProps(option)) {
+            const { options } = option, rest = __rest(option, ["options"]);
+            return Object.assign(Object.assign({}, rest), { items: transformOptionsToItems(options) });
+        }
+        const _a = option, { description, option: contentOption, caption, value, appearance } = _a, rest = __rest(_a, ["description", "option", "caption", "value", "appearance"]);
+        return Object.assign(Object.assign({ 'data-test-id': 'field-select__list-option-' + option.value }, rest), { id: value, appearance: appearance, content: { option: contentOption, caption, description } });
+    });
+}
+export function findSelectedOption(items, value) {
+    const flatten = flattenItems(items);
+    if (!value) {
+        return [undefined, undefined];
+    }
+    const foundItem = flatten.find(item => String(item.id) === String(value));
+    const placeholderItem = { id: value, content: { option: String(value) } };
+    return [foundItem, !foundItem ? placeholderItem : undefined];
+}
+export function findSelectedOptions(items, value) {
+    const flatten = flattenItems(items);
+    if (!value || !(value === null || value === void 0 ? void 0 : value.length)) {
+        return [undefined, undefined];
+    }
+    let foundItems;
+    let placeholderItems;
+    value.forEach(value => {
+        if (flatten) {
+            const [found, placeholder] = findSelectedOption(flatten, value);
+            if (found || foundItems) {
+                foundItems = (foundItems !== null && foundItems !== void 0 ? foundItems : []).concat(found !== null && found !== void 0 ? found : []);
+            }
+            if (placeholder || placeholderItems) {
+                placeholderItems = (placeholderItems !== null && placeholderItems !== void 0 ? placeholderItems : []).concat(placeholder !== null && placeholder !== void 0 ? placeholder : []);
+            }
+        }
+    });
+    return [foundItems, placeholderItems];
+}

package/dist/components/FieldSelect/utils/typeGuards.d.ts

@@ -0,0 +1,7 @@
+import { AccordionOptionProps, BaseOptionProps, FieldSelectMultipleProps, FieldSelectSingleProps, GroupOptionProps, NestListOptionProps } from '../types';
+export declare function isBaseOptionProps(option: any): option is BaseOptionProps;
+export declare function isAccordionOptionProps(option: any): option is AccordionOptionProps;
+export declare function isNextListOptionProps(option: any): option is NestListOptionProps;
+export declare function isGroupOptionProps(option: any): option is GroupOptionProps;
+export declare function isFieldSelectMultipleProps(props: any): props is FieldSelectMultipleProps;
+export declare function isFieldSelectSingleProps(props: any): props is FieldSelectSingleProps;

package/dist/components/FieldSelect/utils/typeGuards.js

@@ -0,0 +1,24 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function isBaseOptionProps(option) {
+    return !('options' in option);
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function isAccordionOptionProps(option) {
+    return 'options' in option && option['type'] === 'collapse';
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function isNextListOptionProps(option) {
+    return 'options' in option && option['type'] === 'next-list';
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function isGroupOptionProps(option) {
+    return 'options' in option && option['type'] === undefined;
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function isFieldSelectMultipleProps(props) {
+    return 'selection' in props && props['selection'] === 'multiple';
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function isFieldSelectSingleProps(props) {
+    return ('selection' in props && props['selection'] === 'single') || props['selection'] === undefined;
+}

package/dist/components/FieldSelect/utils/updateItems.d.ts

@@ -0,0 +1,32 @@
+import { ItemProps, SelectionSingleValueType } from '@snack-uikit/list';
+import { ItemWithId, OptionProps } from '../types';
+export declare function createPlaceholderItem(value: SelectionSingleValueType): {
+    id: SelectionSingleValueType;
+    content: {
+        option: string;
+    };
+    placeholder: boolean;
+};
+export declare function updateItems({ options, value, selectedItem, }: {
+    options: OptionProps[];
+    value: SelectionSingleValueType;
+    selectedItem?: ItemWithId;
+    currentItems?: ItemProps[];
+}): {
+    selectedItem: ItemWithId | undefined;
+    items: ItemProps[];
+};
+export declare function updateMultipleItems({ options, value, selectedItems, }: {
+    options: OptionProps[];
+    value?: SelectionSingleValueType[];
+    selectedItems?: ItemWithId[];
+    currentItems?: ItemProps[];
+}): {
+    selectedItems: undefined;
+    items: (ItemProps & {
+        appearance?: import("@snack-uikit/tag/dist/types").Appearance | undefined;
+    })[];
+} | {
+    selectedItems: ItemWithId[];
+    items: ItemProps[];
+};

package/dist/components/FieldSelect/utils/updateItems.js

@@ -0,0 +1,67 @@
+import { flattenItems } from '@snack-uikit/list';
+import { transformOptionsToItems } from './options';
+export function createPlaceholderItem(value) {
+    return { id: value, content: { option: String(value) }, placeholder: true };
+}
+export function updateItems({ options, value, selectedItem, }) {
+    const originalItems = transformOptionsToItems(options);
+    if (!value) {
+        return {
+            selectedItem: undefined,
+            items: originalItems,
+        };
+    }
+    let newItems = originalItems;
+    let newSelectedItem = selectedItem;
+    const foundItem = flattenItems(originalItems).find(item => item.id === value);
+    if (!foundItem) {
+        if (selectedItem && (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id) === value) {
+            newItems = [selectedItem, ...newItems];
+        }
+        else {
+            newSelectedItem = createPlaceholderItem(value);
+            newItems = [newSelectedItem, ...newItems];
+        }
+    }
+    else {
+        newSelectedItem = foundItem;
+    }
+    return {
+        selectedItem: newSelectedItem,
+        items: newItems,
+    };
+}
+export function updateMultipleItems({ options, value, selectedItems, }) {
+    const originalItems = transformOptionsToItems(options);
+    if (!value || !value.length) {
+        return {
+            selectedItems: undefined,
+            items: originalItems,
+        };
+    }
+    let newItems = originalItems;
+    let newSelectedItems = selectedItems;
+    const flattenOriginalItems = flattenItems(originalItems);
+    const foundItems = flattenOriginalItems.filter(item => value.includes(item.id));
+    const nonFoundValues = value.filter(value => !flattenOriginalItems.find(item => item.id === value));
+    if (nonFoundValues.length) {
+        const nonFoundItems = nonFoundValues.map(value => (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.find(selectedItem => selectedItem.id === value)) || createPlaceholderItem(value));
+        newSelectedItems = [...foundItems, ...nonFoundItems];
+        newItems = [...nonFoundItems, ...newItems];
+    }
+    else {
+        newSelectedItems = foundItems;
+    }
+    return {
+        selectedItems: newSelectedItems.sort((a, b) => {
+            if (b.disabled && !a.disabled) {
+                return 1;
+            }
+            if (a.disabled && !b.disabled) {
+                return -1;
+            }
+            return 0;
+        }),
+        items: newItems,
+    };
+}