@snack-uikit/fields 0.18.2-preview-86dac340.0 → 0.18.2-preview-cb79db34.0

package/README.md

@@ -312,6 +312,8 @@ const [isOpen, setIsOpen] = useState(false);
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
+| pinBottom* | `OptionProps[]` | - |  |
+| pinTop* | `OptionProps[]` | - |  |
 | options* | `OptionProps[]` | - |  |
 | disabled | `boolean` | false | Является ли поле деактивированным |
 | readonly | `boolean` | false false | Является ли поле доступным только для чтения |
@@ -332,28 +334,25 @@ const [isOpen, setIsOpen] = useState(false);
 | validationState | enum ValidationState: `"default"`, `"error"`, `"warning"`, `"success"` | - | Состояние валидации |
 | showHintIcon | `boolean` | - | Отображать иконку подсказки |
 | loading | `boolean` | - |  |
-| value | `SelectionSingleValueType \| SelectionSingleValueType[]` | - | Controlled состояние |
-| onChange | `((value: any) => void) \| ((value: any) => void)` | - | Controlled обработчик измения состояния |
-| defaultValue | `SelectionSingleValueType \| SelectionSingleValueType[]` | - | Начальное состояние |
+| value | `ItemId \| ItemId[]` | - | Controlled состояние |
+| onChange | `OnChangeHandler<any>` | - | Controlled обработчик измения состояния |
+| defaultValue | `ItemId \| ItemId[]` | - | Начальное состояние |
 | searchable | `boolean` | - |  |
 | showCopyButton | `boolean` | - | Отображение кнопки Копировать для поля (актуально только для `readonly = true`) |
 | showClearButton | `boolean` | true | Отображение кнопки очистки поля |
 | prefixIcon | `ReactElement<any, string \| JSXElementConstructor<any>>` | - | Иконка-префикс для поля |
-| footer | `ReactNode` | - | Footer списка айтемов |
-| widthStrategy | enum PopoverWidthStrategy: `"auto"`, `"gte"`, `"eq"` | - | Управление шириной выпадающего списка |
+| footer | `ReactNode` | - |  |
 | search | `SearchState` | - |  |
 | autocomplete | `boolean` | - |  |
 | addOptionByEnter | `boolean` | - |  |
 | open | `boolean` | - |  |
 | onOpenChange | `(open: boolean) => void` | - |  |
 | selectedOptionFormatter | `SelectedOptionFormatter` | - |  |
-| pinTop | `ItemProps[]` | - | Элементы списка, закрепленные сверху |
-| pinBottom | `ItemProps[]` | - | Элементы списка, закрепленные снизу |
-| dataFiltered | `boolean` | - |  |
 | dataError | `boolean` | - |  |
 | noDataState | `EmptyStateProps` | - | Экран при отстутствии данных |
 | noResultsState | `EmptyStateProps` | - | Экран при отстутствии результатов поиска или фильтров |
 | errorDataState | `EmptyStateProps` | - | Экран при ошибке запроса |
+| dataFiltered | `boolean` | - |  |
 | selection | "single" \| "multiple" | - |  |
 | ref | `Ref<HTMLInputElement>` | - | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom |
 | key | `Key` | - |  |

package/dist/components/FieldDate/FieldDate.js

@@ -14,7 +14,7 @@ import mergeRefs from 'merge-refs';
 import { forwardRef, useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { useUncontrolledProp } from 'uncontrollable';
 import { Calendar } from '@snack-uikit/calendar';
-import { Dropdown } from '@snack-uikit/droplist';
+import { Dropdown } from '@snack-uikit/dropdown';
 import { CalendarSVG } from '@snack-uikit/icons';
 import { ICON_SIZE, InputPrivate, runAfterRerender, SIZE, useButtonNavigation, useClearButton, } from '@snack-uikit/input-private';
 import { extractSupportProps } from '@snack-uikit/utils';

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

@@ -9,17 +9,18 @@ export declare const FieldSelectMultiple: import("react").ForwardRefExoticCompon
     'data-test-id'?: string | undefined;
 } & import("react").AriaAttributes & {
     options: import("./types").OptionProps[];
+    pinTop: import("./types").OptionProps[];
+    pinBottom: import("./types").OptionProps[];
     searchable?: boolean | undefined;
     showCopyButton?: boolean | undefined;
     showClearButton?: boolean | undefined;
     readonly?: boolean | undefined;
     prefixIcon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
     footer?: import("react").ReactNode;
-    widthStrategy?: import("@snack-uikit/popover-private/dist/types").PopoverWidthStrategy | undefined;
     search?: import("./types").SearchState | undefined;
     autocomplete?: boolean | undefined;
     addOptionByEnter?: boolean | undefined;
     open?: boolean | undefined;
     onOpenChange?(open: boolean): void;
     selectedOptionFormatter?: SelectedOptionFormatter | undefined;
-} & Pick<import("@snack-uikit/list").DroplistProps, "pinTop" | "pinBottom" | "dataFiltered" | "dataError" | "noDataState" | "noResultsState" | "errorDataState">, "showCopyButton"> & import("react").RefAttributes<HTMLInputElement>>;
+} & Pick<import("@snack-uikit/list").ListProps, "dataError" | "dataFiltered" | "noDataState" | "noResultsState" | "errorDataState">, "showCopyButton"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/FieldSelect/FieldSelectMultiple.js

@@ -14,7 +14,7 @@ import cn from 'classnames';
 import mergeRefs from 'merge-refs';
 import { forwardRef, useLayoutEffect, useRef, useState } from 'react';
 import { InputPrivate } from '@snack-uikit/input-private';
-import { Droplist, useFuzzySearch } from '@snack-uikit/list';
+import { Droplist } from '@snack-uikit/list';
 import { Tag } from '@snack-uikit/tag';
 import { extractSupportProps } from '@snack-uikit/utils';
 import { FieldContainerPrivate } from '../../helperComponents';
@@ -22,10 +22,14 @@ import { useValueControl } from '../../hooks';
 import { FieldDecorator } from '../FieldDecorator';
 import { extractFieldDecoratorProps } from '../FieldDecorator/utils';
 import { useButtons, useHandleDeleteItem, useHandleOnKeyDown, useSearchInput } from './hooks';
+import { useFuzzySearch } from './legacy';
 import styles from './styles.module.css';
 import { extractListProps, getArrowIcon, updateMultipleItems } from './utils';
 const BASE_MIN_WIDTH = 4;
-const defaultSelectedOptionFormatter = item => (item === null || item === void 0 ? void 0 : item.content.option) || '';
+const defaultSelectedOptionFormatter = item => 
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-expect-error
+(item === null || item === void 0 ? void 0 : item.content.option) || '';
 export const FieldSelectMultiple = forwardRef((_a, ref) => {
     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, selectedOptionFormatter = defaultSelectedOptionFormatter } = _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", "selectedOptionFormatter"]);

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

@@ -7,17 +7,18 @@ export declare const FieldSelectSingle: import("react").ForwardRefExoticComponen
     'data-test-id'?: string | undefined;
 } & import("react").AriaAttributes & {
     options: import("./types").OptionProps[];
+    pinTop: import("./types").OptionProps[];
+    pinBottom: import("./types").OptionProps[];
     searchable?: boolean | undefined;
     showCopyButton?: boolean | undefined;
     showClearButton?: boolean | undefined;
     readonly?: boolean | undefined;
     prefixIcon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
     footer?: import("react").ReactNode;
-    widthStrategy?: import("@snack-uikit/popover-private/dist/types").PopoverWidthStrategy | undefined;
     search?: import("./types").SearchState | undefined;
     autocomplete?: boolean | undefined;
     addOptionByEnter?: boolean | undefined;
     open?: boolean | undefined;
     onOpenChange?(open: boolean): void;
     selectedOptionFormatter?: SelectedOptionFormatter | undefined;
-} & Pick<import("@snack-uikit/list").DroplistProps, "pinTop" | "pinBottom" | "dataFiltered" | "dataError" | "noDataState" | "noResultsState" | "errorDataState"> & import("react").RefAttributes<HTMLInputElement>>;
+} & Pick<import("@snack-uikit/list").ListProps, "dataError" | "dataFiltered" | "noDataState" | "noResultsState" | "errorDataState"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/FieldSelect/FieldSelectSingle.js

@@ -14,16 +14,20 @@ import cn from 'classnames';
 import mergeRefs from 'merge-refs';
 import { forwardRef, useCallback, useEffect, useLayoutEffect, useRef, useState, } from 'react';
 import { InputPrivate } from '@snack-uikit/input-private';
-import { Droplist, useFuzzySearch } from '@snack-uikit/list';
+import { Droplist } from '@snack-uikit/list';
 import { extractSupportProps } from '@snack-uikit/utils';
 import { FieldContainerPrivate } from '../../helperComponents';
 import { useValueControl } from '../../hooks';
 import { FieldDecorator } from '../FieldDecorator';
 import { extractFieldDecoratorProps } from '../FieldDecorator/utils';
 import { useButtons, useHandleOnKeyDown, useSearchInput } from './hooks';
+import { useFuzzySearch } from './legacy';
 import styles from './styles.module.css';
 import { extractListProps, getArrowIcon, updateItems } from './utils';
-const defaultSelectedOptionFormatter = item => (item === null || item === void 0 ? void 0 : item.content.option) || '';
+const defaultSelectedOptionFormatter = item => 
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-expect-error
+(item === null || item === void 0 ? void 0 : item.content.option) || '';
 export const FieldSelectSingle = forwardRef((_a, ref) => {
     var _b;
     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, selectedOptionFormatter = defaultSelectedOptionFormatter } = _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", "selectedOptionFormatter"]);
@@ -35,7 +39,10 @@ export const FieldSelectSingle = forwardRef((_a, ref) => {
         onChange: onChangeProp,
     });
     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 : '', selectedOptionFormatter }));
+    const { inputValue, setInputValue, prevInputValue, updateInputValue } = useSearchInput(Object.assign(Object.assign({}, search), { 
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-expect-error
+        defaultValue: (_b = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.content.option) !== null && _b !== void 0 ? _b : '', selectedOptionFormatter }));
     const prevSelectedItem = useRef(selectedItem);
     useLayoutEffect(() => {
         setItems(({ selectedItem }) => updateItems({ options, value, selectedItem }));
@@ -43,6 +50,8 @@ export const FieldSelectSingle = forwardRef((_a, ref) => {
     useEffect(() => {
         if (prevSelectedItem.current &&
             prevSelectedItem.current.id === (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id) &&
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-expect-error
             prevSelectedItem.current.content.option === (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.content.option)) {
             return;
         }

package/dist/components/FieldSelect/hooks.js

@@ -1,7 +1,10 @@
 import { useCallback, useMemo, useRef } from 'react';
 import { useButtonNavigation, useClearButton } from '@snack-uikit/input-private';
-import { extractChildIds, isAccordionItemProps, isNextListItemProps, } from '@snack-uikit/list';
+import { 
+// extractChildIds,
+isAccordionItemProps, isNextListItemProps, } from '@snack-uikit/list';
 import { useCopyButton, useValueControl } from '../../hooks';
+import { extractChildIds } from './legacy';
 import { isBaseOptionProps } from './utils';
 export function useHandleOnKeyDown({ setOpen, inputKeyDownNavigationHandler, onInputKeyDownProp, }) {
     return useCallback((onKeyDown) => (e) => {
@@ -74,7 +77,10 @@ export function useHandleDeleteItem(setValue) {
             return;
         }
         if (isBaseOptionProps(item)) {
-            setValue((value) => value === null || value === void 0 ? void 0 : value.filter(v => v !== item.id));
+            setValue((value) => value === null || value === void 0 ? void 0 : value.filter(v => 
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-expect-error
+            v !== item.id));
         }
     }, [setValue]);
 }

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

@@ -0,0 +1,12 @@
+import { ItemProps } from '@snack-uikit/list';
+type UseGroupItemSelectionProps = {
+    items: ItemProps[];
+    id?: string | number;
+    disabled?: boolean;
+};
+export declare function useLegacyGroupItemSelection({ id, items, disabled }: UseGroupItemSelectionProps): {
+    checked: boolean | undefined;
+    isIndeterminate: boolean;
+    handleOnSelect: () => void;
+};
+export {};

package/dist/components/FieldSelect/legacy/components/Items/hooks.js

@@ -0,0 +1,33 @@
+import { useEffect, useMemo } from 'react';
+import { useSelectionContext } from '@snack-uikit/list';
+import { extractAllChildIds, extractChildIds } from '../../utils';
+export function useLegacyGroupItemSelection({ id = '', items, disabled }) {
+    const { value, setValue, isSelectionMultiple } = useSelectionContext();
+    const { childIds, allChildIds } = useMemo(() => ({ childIds: extractChildIds({ items }), allChildIds: extractAllChildIds({ items }) }), [items]);
+    const isIndeterminate = isSelectionMultiple
+        ? allChildIds.some(childId => value === null || value === void 0 ? void 0 : value.includes(childId))
+        : allChildIds.includes(value !== null && value !== void 0 ? value : '');
+    const checked = isSelectionMultiple ? allChildIds.every(childId => value === null || value === void 0 ? void 0 : value.includes(childId)) : undefined;
+    useEffect(() => {
+        if (isSelectionMultiple) {
+            if (checked && !(value === null || value === void 0 ? void 0 : value.includes(id))) {
+                setValue === null || setValue === void 0 ? void 0 : setValue((value) => (value !== null && value !== void 0 ? value : []).concat([id !== null && id !== void 0 ? id : '']));
+            }
+            if (!checked && (value === null || value === void 0 ? void 0 : value.includes(id))) {
+                setValue === null || setValue === void 0 ? void 0 : setValue((value) => (value !== null && value !== void 0 ? value : []).filter(itemId => itemId !== id));
+            }
+        }
+    }, [checked, disabled, id, isSelectionMultiple, setValue, value]);
+    const handleOnSelect = () => {
+        if (checked) {
+            setValue === null || setValue === void 0 ? void 0 : setValue((value) => (value !== null && value !== void 0 ? value : []).filter(itemId => itemId !== id && !childIds.includes(itemId)));
+            return;
+        }
+        if (isIndeterminate) {
+            setValue === null || setValue === void 0 ? void 0 : setValue((value) => Array.from(new Set([...(value !== null && value !== void 0 ? value : []), ...childIds, id])));
+            return;
+        }
+        setValue === null || setValue === void 0 ? void 0 : setValue((value) => (value !== null && value !== void 0 ? value : []).concat([...childIds, id !== null && id !== void 0 ? id : '']));
+    };
+    return { checked, isIndeterminate, handleOnSelect };
+}

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

@@ -0,0 +1 @@
+export { useLegacyGroupItemSelection } from './Items/hooks';

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

@@ -0,0 +1 @@
+export { useLegacyGroupItemSelection } from './Items/hooks';

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

@@ -0,0 +1,5 @@
+import { ItemProps } from '@snack-uikit/list';
+/**
+ * Нечеткий поиск среди айтемов по полям 'content.option', 'content.caption', 'content.description', 'label'
+ */
+export declare function useFuzzySearch(items: ItemProps[], minSearchInputLength?: number): (search: string) => import("@snack-uikit/list/dist/components/Items").Item[] | import("@snack-uikit/list/dist/components/Items").FlattenItem[];

package/dist/components/FieldSelect/legacy/hooks.js

@@ -0,0 +1,19 @@
+import FuzzySearch from 'fuzzy-search';
+import { useCallback, useMemo } from 'react';
+import { kindFlattenItems } from '@snack-uikit/list';
+const DEFAULT_MIN_SEARCH_INPUT_LENGTH = 2;
+/**
+ * Нечеткий поиск среди айтемов по полям 'content.option', 'content.caption', 'content.description', 'label'
+ */
+export function useFuzzySearch(items, minSearchInputLength) {
+    const flattenItems = useMemo(() => {
+        const { flattenItems } = kindFlattenItems({ items });
+        return Object.values(flattenItems);
+    }, [items]);
+    return useCallback((search) => {
+        const searcher = new FuzzySearch(flattenItems, ['content.option', 'content.caption', 'content.description', 'label'], {});
+        return search.length > (minSearchInputLength !== null && minSearchInputLength !== void 0 ? minSearchInputLength : DEFAULT_MIN_SEARCH_INPUT_LENGTH)
+            ? searcher.search(search)
+            : items;
+    }, [flattenItems, items, minSearchInputLength]);
+}

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

@@ -0,0 +1,3 @@
+export * from './components';
+export { useFuzzySearch } from './hooks';
+export { extractChildIds, flattenItems } from './utils';

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

@@ -0,0 +1,3 @@
+export * from './components';
+export { useFuzzySearch } from './hooks';
+export { extractChildIds, flattenItems } from './utils';

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

@@ -0,0 +1,29 @@
+import { RefObject } from 'react';
+import { AccordionItemProps, BaseItemProps, ItemProps, NextListItemProps } from '@snack-uikit/list';
+type WithCollapsedItemsProps = {
+    items: ItemProps[];
+    openCollapsedItems: Array<number | string>;
+};
+export declare function withCollapsedItems({ items, openCollapsedItems }: WithCollapsedItemsProps): {
+    items: import("@snack-uikit/list/dist/components/Items").Item[];
+    itemRefs: RefObject<HTMLElement>[];
+    ids: (string | number)[];
+    expandedIds: (string | number)[];
+};
+/**
+ * Функция возвращает массив id дочерних items
+ * @function  extractItemIds
+ */
+export declare function extractItemIds(items: ItemProps[]): Array<string | number>;
+export declare function extractChildIds({ items }: {
+    items: ItemProps[];
+}): Array<string | number>;
+export declare function extractAllChildIds({ items }: {
+    items: ItemProps[];
+}): Array<string | number>;
+/**
+ *  Функция разворачивает массив айтемов в плоский список
+ *  @function  flattenItems
+ */
+export declare function flattenItems(items: ItemProps[]): (BaseItemProps | AccordionItemProps | NextListItemProps)[];
+export {};

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

@@ -0,0 +1,107 @@
+import { isAccordionItemProps, isBaseItemProps, isGroupItemProps, isNextListItemProps, } from '@snack-uikit/list';
+export function withCollapsedItems({ items, openCollapsedItems }) {
+    let itemRefs = [];
+    let newItems = [];
+    let ids = [];
+    let expandedIds = [];
+    items.forEach(item => {
+        var _a;
+        if (((isBaseItemProps(item) && !item.inactive) || isNextListItemProps(item) || isAccordionItemProps(item)) &&
+            !item.disabled) {
+            newItems = newItems.concat([item]);
+            ids = ids.concat([(_a = item.id) !== null && _a !== void 0 ? _a : '']);
+            if (item.itemRef) {
+                itemRefs = itemRefs.concat([item.itemRef]);
+            }
+        }
+        if (isNextListItemProps(item) && item.id && !item.disabled) {
+            expandedIds = expandedIds.concat(item.id);
+        }
+        if (isGroupItemProps(item)) {
+            const { itemRefs: nestedItemsRefs, ids: nestedIds } = withCollapsedItems({
+                items: item.items,
+                openCollapsedItems,
+            });
+            ids = ids.concat(nestedIds);
+            itemRefs = itemRefs.concat(nestedItemsRefs);
+        }
+        if (isAccordionItemProps(item) && item.id && openCollapsedItems.includes(item.id)) {
+            const { itemRefs: nestedItemsRefs, ids: nestedIds, items: nestedItems, expandedIds: nestedExpandedIds, } = withCollapsedItems({
+                items: item.items,
+                openCollapsedItems,
+            });
+            ids = ids.concat(nestedIds);
+            newItems = newItems.concat(nestedItems);
+            itemRefs = itemRefs.concat(nestedItemsRefs);
+            expandedIds = expandedIds.concat(nestedExpandedIds);
+        }
+    });
+    return { items, itemRefs, ids, expandedIds };
+}
+/**
+ * Функция возвращает массив id дочерних items
+ * @function  extractItemIds
+ */
+export function extractItemIds(items) {
+    return items.reduce((prev, item) => {
+        if (isGroupItemProps(item)) {
+            return prev.concat(extractItemIds(item.items));
+        }
+        return item.id ? prev.concat([item.id]) : prev;
+    }, []);
+}
+export function extractChildIds({ items }) {
+    return items
+        .filter(item => isAccordionItemProps(item) ||
+        isNextListItemProps(item) ||
+        isGroupItemProps(item) ||
+        (isBaseItemProps(item) && !item.disabled && !item.inactive))
+        .reduce((prev, item) => {
+        var _a;
+        if (isAccordionItemProps(item) || isNextListItemProps(item)) {
+            return prev.concat([(_a = item.id) !== null && _a !== void 0 ? _a : '']).concat(extractChildIds({ items: item.items }));
+        }
+        if (isGroupItemProps(item)) {
+            return prev.concat(extractChildIds({ items: item.items }));
+        }
+        return item.id && !isGroupItemProps(item) ? prev.concat([item.id]) : prev;
+    }, []);
+}
+export function extractAllChildIds({ items }) {
+    return items
+        .filter(item => isAccordionItemProps(item) ||
+        isNextListItemProps(item) ||
+        isGroupItemProps(item) ||
+        (isBaseItemProps(item) && !item.inactive))
+        .reduce((prev, item) => {
+        var _a;
+        if (isAccordionItemProps(item) || isNextListItemProps(item)) {
+            return prev.concat([(_a = item.id) !== null && _a !== void 0 ? _a : '']).concat(extractAllChildIds({ items: item.items }));
+        }
+        if (isGroupItemProps(item)) {
+            return prev.concat(extractAllChildIds({ items: item.items }));
+        }
+        return item.id && !isGroupItemProps(item) ? prev.concat([item.id]) : prev;
+    }, []);
+}
+/**
+ *  Функция разворачивает массив айтемов в плоский список
+ *  @function  flattenItems
+ */
+export function flattenItems(items) {
+    const flattenItems = [];
+    function flatten(item) {
+        if (!isGroupItemProps(item)) {
+            flattenItems.push(item);
+        }
+        if ('items' in item) {
+            for (const nestedItem of item.items) {
+                flatten(nestedItem);
+            }
+        }
+    }
+    for (const item of items) {
+        flatten(item);
+    }
+    return flattenItems;
+}

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

@@ -4,8 +4,6 @@
 }
 
 .contentWrapper{
-  position:relative;
-  overflow:hidden;
   display:flex;
   flex-wrap:wrap;
   width:100%;
@@ -73,10 +71,14 @@
 }
 .container[data-size=s][data-variant=single-line-container] .displayValue{
   width:calc(100% - (
-            var(--space-fields-single-line-container-s-right, 6px) + var(--space-fields-single-line-container-s-gap, 4px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-xs, 16px) * 2)
+            var(--space-fields-single-line-container-s-right, 6px) +
+              var(--space-fields-single-line-container-s-gap, 4px) +
+              calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-xs, 16px) * 2)
           ));
   margin-right:calc(
-            var(--space-fields-single-line-container-s-right, 6px) + var(--space-fields-single-line-container-s-gap, 4px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-xs, 16px) * 2)
+            var(--space-fields-single-line-container-s-right, 6px) +
+              var(--space-fields-single-line-container-s-gap, 4px) +
+              calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-xs, 16px) * 2)
           );
   padding-left:var(--space-fields-single-line-container-s-left, 6px);
   border-radius:var(--radius-fields-s, 12px);
@@ -96,10 +98,14 @@
 }
 .container[data-size=m][data-variant=single-line-container] .displayValue{
   width:calc(100% - (
-            var(--space-fields-single-line-container-m-right, 8px) + var(--space-fields-single-line-container-m-gap, 4px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2)
+            var(--space-fields-single-line-container-m-right, 8px) +
+              var(--space-fields-single-line-container-m-gap, 4px) +
+              calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2)
           ));
   margin-right:calc(
-            var(--space-fields-single-line-container-m-right, 8px) + var(--space-fields-single-line-container-m-gap, 4px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2)
+            var(--space-fields-single-line-container-m-right, 8px) +
+              var(--space-fields-single-line-container-m-gap, 4px) +
+              calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2)
           );
   padding-left:var(--space-fields-single-line-container-m-left, 8px);
   border-radius:var(--radius-fields-m, 14px);
@@ -119,10 +125,14 @@
 }
 .container[data-size=l][data-variant=single-line-container] .displayValue{
   width:calc(100% - (
-            var(--space-fields-single-line-container-l-right, 10px) + var(--space-fields-single-line-container-l-gap, 8px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2)
+            var(--space-fields-single-line-container-l-right, 10px) +
+              var(--space-fields-single-line-container-l-gap, 8px) +
+              calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2)
           ));
   margin-right:calc(
-            var(--space-fields-single-line-container-l-right, 10px) + var(--space-fields-single-line-container-l-gap, 8px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2)
+            var(--space-fields-single-line-container-l-right, 10px) +
+              var(--space-fields-single-line-container-l-gap, 8px) +
+              calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2)
           );
   padding-left:var(--space-fields-single-line-container-l-left, 10px);
   border-radius:var(--radius-fields-l, 16px);

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

@@ -1,12 +1,13 @@
 import { ReactElement } from 'react';
 import { InputPrivateProps } from '@snack-uikit/input-private';
-import { AccordionItemProps, BaseItemProps, DroplistProps, GroupItemProps, NextListItemProps, SelectionMultipleState, SelectionSingleState } from '@snack-uikit/list';
+import { AccordionItemProps, BaseItemProps, GroupItemProps, ItemContentProps, ListProps, NextListItemProps, SelectionMultipleState, SelectionSingleState } from '@snack-uikit/list';
 import { TagProps } from '@snack-uikit/tag';
 import { WithSupportProps } from '@snack-uikit/utils';
 import { FieldDecoratorProps } from '../FieldDecorator';
+export type AnyType = any;
 export type OptionProps = BaseOptionProps | AccordionOptionProps | GroupOptionProps | NestListOptionProps;
 export type OptionWithoutGroup = BaseOptionProps | AccordionOptionProps | NestListOptionProps;
-export type BaseOptionProps = Pick<BaseItemProps, 'beforeContent' | 'afterContent' | 'disabled'> & BaseItemProps['content'] & {
+export type BaseOptionProps = Pick<BaseItemProps, 'beforeContent' | 'afterContent' | 'disabled'> & Pick<ItemContentProps, 'option' | 'caption' | 'description'> & {
     value: string | number;
 } & Pick<TagProps, 'appearance'>;
 export type AccordionOptionProps = Pick<AccordionItemProps, 'type'> & BaseOptionProps & {
@@ -36,6 +37,8 @@ export type FieldSelectPrivateProps = InputProps & WrapperProps & {
 };
 type FiledSelectCommonProps = WithSupportProps<{
     options: OptionProps[];
+    pinTop: OptionProps[];
+    pinBottom: OptionProps[];
     searchable?: boolean;
     /** Отображение кнопки Копировать для поля (актуально только для `readonly = true`) */
     showCopyButton?: boolean;
@@ -51,21 +54,14 @@ type FiledSelectCommonProps = WithSupportProps<{
     readonly?: boolean;
     /** Иконка-префикс для поля */
     prefixIcon?: ReactElement;
-    /**
-     * Footer списка айтемов
-     */
-    footer?: DroplistProps['footer'];
-    /**
-     * Управление шириной выпадающего списка
-     */
-    widthStrategy?: DroplistProps['widthStrategy'];
+    footer?: ListProps['footer'];
     search?: SearchState;
     autocomplete?: boolean;
     addOptionByEnter?: boolean;
     open?: boolean;
     onOpenChange?(open: boolean): void;
     selectedOptionFormatter?: SelectedOptionFormatter;
-}> & Pick<DroplistProps, 'dataError' | 'noDataState' | 'noResultsState' | 'errorDataState' | 'pinTop' | 'pinBottom' | 'dataFiltered'>;
+}> & Pick<ListProps, 'dataError' | 'noDataState' | 'noResultsState' | 'errorDataState' | 'dataFiltered'>;
 export type FieldSelectSingleProps = FieldSelectPrivateProps & Omit<SelectionSingleState, 'mode'> & WrapperProps & FiledSelectCommonProps;
 export type FieldSelectMultipleProps = FieldSelectPrivateProps & {
     removeByBackspace?: boolean;

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

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

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

@@ -1,15 +1,11 @@
-export function extractListProps({ dataError, noDataState, noResultsState, errorDataState, pinTop, pinBottom, dataFiltered, loading, footer, widthStrategy, }) {
+export function extractListProps({ dataError, noDataState, noResultsState, errorDataState, dataFiltered, loading, }) {
     return {
         dataError,
         noDataState,
         noResultsState,
         errorDataState,
-        pinTop,
-        pinBottom,
         dataFiltered,
         loading,
-        footer,
-        widthStrategy,
         trigger: 'clickAndFocusVisible',
         placement: 'bottom',
         'data-test-id': 'field-select__list',

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

@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { flattenItems } from '@snack-uikit/list';
+import { flattenItems } from '../legacy';
 import { isAccordionOptionProps, isGroupOptionProps, isNextListOptionProps } from './typeGuards';
 export function transformOptionsToItems(options) {
     return options.map(option => {

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

@@ -12,7 +12,7 @@ export function isNextListOptionProps(option) {
 }
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function isGroupOptionProps(option) {
-    return 'options' in option && option['type'] === undefined;
+    return 'options' in option && option['type'] === 'group';
 }
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function isFieldSelectMultipleProps(props) {

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

@@ -1,7 +1,7 @@
-import { ItemProps, SelectionSingleValueType } from '@snack-uikit/list';
+import { ItemId, ItemProps, SelectionSingleValueType } from '@snack-uikit/list';
 import { ItemWithId, OptionProps } from '../types';
 export declare function createPlaceholderItem(value: SelectionSingleValueType): {
-    id: SelectionSingleValueType;
+    id: ItemId;
     content: {
         option: string;
     };
@@ -9,12 +9,12 @@ export declare function createPlaceholderItem(value: SelectionSingleValueType):
 };
 export declare function updateItems({ options, value, selectedItem, }: {
     options: OptionProps[];
-    value: SelectionSingleValueType;
+    value?: ItemId;
     selectedItem?: ItemWithId;
     currentItems?: ItemProps[];
 }): {
     selectedItem: ItemWithId | undefined;
-    items: ItemProps[];
+    items: import("@snack-uikit/list/dist/components/Items").Item[];
 };
 export declare function updateMultipleItems({ options, value, selectedItems, }: {
     options: OptionProps[];
@@ -23,10 +23,10 @@ export declare function updateMultipleItems({ options, value, selectedItems, }:
     currentItems?: ItemProps[];
 }): {
     selectedItems: undefined;
-    items: (ItemProps & {
+    items: (import("@snack-uikit/list/dist/components/Items").Item & {
         appearance?: import("@snack-uikit/tag/dist/types").Appearance | undefined;
     })[];
 } | {
     selectedItems: ItemWithId[];
-    items: ItemProps[];
+    items: import("@snack-uikit/list/dist/components/Items").Item[];
 };