@snack-uikit/list 0.9.2-preview-c8f85f20.0 → 0.9.2-preview-0a44b2fc.0

package/dist/components/Lists/hooks.js

@@ -1,73 +1,112 @@
-import { useEffect, useState } from 'react';
-export function useKeyboardNavigation({ ids, itemRefs, expandedIds, parentRef, btnRef, }) {
-    const [activeFocusIndex, setActiveFocusIndex] = useState(-1);
-    const [openNestedIndex, setOpenNestedIndex] = useState(-1);
-    const handleListKeyDown = (e) => {
-        var _a, _b, _c, _d;
+import { useCallback, useRef, useState } from 'react';
+import { isBaseItemProps, isGroupItemProps, } from '../Items';
+export function useNewKeyboardNavigation({ mainRef, btnRef, flattenedItems, }) {
+    const [activeItemId, setActiveItemId] = useState();
+    const activeItemIdRef = useRef();
+    const handleListKeyDownFactory = useCallback((ids, expandedIds) => (e) => {
+        var _a, _b, _c, _d, _e, _f, _g;
         switch (e.key) {
             case 'ArrowDown': {
-                setActiveFocusIndex(activeIndex => Math.min(activeIndex + 1, ids.length - 1));
-                // TODO: go to loader from last item
-                // if (activeFocusIndex === ids.length - 2) {
-                //   return;
-                // }
+                if (activeItemIdRef.current !== undefined) {
+                    const activeIndex = ids.findIndex(id => id === activeItemIdRef.current);
+                    const nextId = Math.min(activeIndex + 1, ids.length - 1);
+                    const itemId = ids[nextId];
+                    const item = flattenedItems[itemId];
+                    activeItemIdRef.current = itemId;
+                    setActiveItemId(itemId);
+                    if (!isGroupItemProps(item)) {
+                        (_a = item.itemRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                    }
+                }
+                else {
+                    const itemId = ids[0];
+                    const item = flattenedItems[itemId];
+                    activeItemIdRef.current = itemId;
+                    setActiveItemId(itemId);
+                    if (!isGroupItemProps(item)) {
+                        (_b = item.itemRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+                    }
+                }
                 e.stopPropagation();
                 e.preventDefault();
                 return;
             }
             case 'ArrowUp': {
-                if (activeFocusIndex === 0) {
-                    (_a = parentRef === null || parentRef === void 0 ? void 0 : parentRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                    setActiveFocusIndex(-1);
+                if (ids[0] === activeItemIdRef.current) {
+                    const item = flattenedItems[ids[0]];
+                    if (item.parentId === '~main') {
+                        activeItemIdRef.current = undefined;
+                        setActiveItemId(undefined);
+                        (_c = mainRef === null || mainRef === void 0 ? void 0 : mainRef.current) === null || _c === void 0 ? void 0 : _c.focus();
+                    }
                     return;
                 }
-                setActiveFocusIndex(activeIndex => Math.max(activeIndex - 1, 0));
+                if (activeItemIdRef.current !== undefined) {
+                    const activeIndex = ids.findIndex(id => id === activeItemIdRef.current);
+                    const nextId = Math.max(activeIndex - 1, 0);
+                    const itemId = ids[nextId];
+                    const item = flattenedItems[itemId];
+                    activeItemIdRef.current = itemId;
+                    setActiveItemId(itemId);
+                    if (!isGroupItemProps(item)) {
+                        (_d = item.itemRef.current) === null || _d === void 0 ? void 0 : _d.focus();
+                    }
+                }
                 e.stopPropagation();
                 e.preventDefault();
                 return;
             }
             case 'ArrowRight': {
-                if (expandedIds.includes(ids[activeFocusIndex])) {
-                    setOpenNestedIndex(activeFocusIndex);
+                if (activeItemIdRef.current !== undefined && expandedIds.includes(activeItemIdRef.current)) {
+                    const item = flattenedItems[activeItemIdRef.current];
+                    if (!isBaseItemProps(item)) {
+                        const newItemId = item.items[0];
+                        const newItem = flattenedItems[newItemId];
+                        activeItemIdRef.current = newItemId;
+                        setActiveItemId(newItemId);
+                        if (!isGroupItemProps(newItem)) {
+                            setTimeout(() => { var _a; return (_a = newItem.itemRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, 0);
+                        }
+                    }
                 }
                 e.stopPropagation();
                 e.preventDefault();
                 return;
             }
             case 'Tab': {
-                if (parentRef && activeFocusIndex !== -1) {
+                if (activeItemIdRef.current !== undefined) {
                     e.preventDefault();
-                    (_b = parentRef === null || parentRef === void 0 ? void 0 : parentRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+                    activeItemIdRef.current = undefined;
+                    setActiveItemId(undefined);
+                    (_e = mainRef === null || mainRef === void 0 ? void 0 : mainRef.current) === null || _e === void 0 ? void 0 : _e.focus();
                 }
-                else if (activeFocusIndex === -1) {
-                    btnRef && !e.shiftKey ? (_c = btnRef === null || btnRef === void 0 ? void 0 : btnRef.current) === null || _c === void 0 ? void 0 : _c.focus() : (_d = parentRef === null || parentRef === void 0 ? void 0 : parentRef.current) === null || _d === void 0 ? void 0 : _d.focus();
+                else {
+                    btnRef && !e.shiftKey ? (_f = btnRef === null || btnRef === void 0 ? void 0 : btnRef.current) === null || _f === void 0 ? void 0 : _f.focus() : (_g = mainRef === null || mainRef === void 0 ? void 0 : mainRef.current) === null || _g === void 0 ? void 0 : _g.focus();
                 }
-                setOpenNestedIndex(-1);
-                setActiveFocusIndex(-1);
                 return;
             }
             default: {
                 return;
             }
         }
-    };
-    const resetNestedIndex = () => {
-        setActiveFocusIndex(openNestedIndex);
-        setOpenNestedIndex(-1);
-    };
-    const resetActiveFocusIndex = () => {
-        setActiveFocusIndex(-1);
-    };
-    useEffect(() => {
-        var _a, _b;
-        activeFocusIndex !== -1 && openNestedIndex === -1 && ((_b = (_a = itemRefs === null || itemRefs === void 0 ? void 0 : itemRefs[activeFocusIndex]) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.focus());
-    }, [activeFocusIndex, itemRefs, openNestedIndex]);
+    }, [flattenedItems, mainRef, btnRef]);
+    const resetActiveItemId = useCallback(() => {
+        setActiveItemId(undefined);
+        activeItemIdRef.current = undefined;
+    }, []);
+    const forceUpdateActiveItemId = useCallback((itemId) => {
+        var _a;
+        setActiveItemId(itemId);
+        activeItemIdRef.current = itemId;
+        const newItem = flattenedItems[itemId];
+        if (!isGroupItemProps(newItem)) {
+            (_a = newItem.itemRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, [flattenedItems]);
     return {
-        activeFocusIndex,
-        setActiveFocusIndex,
-        openNestedIndex,
-        resetNestedIndex,
-        resetActiveFocusIndex,
-        handleListKeyDown,
+        resetActiveItemId,
+        activeItemId,
+        forceUpdateActiveItemId,
+        handleListKeyDownFactory,
     };
 }

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

@@ -3,13 +3,8 @@ import { DropdownProps } from '@snack-uikit/dropdown';
 import { WithSupportProps } from '@snack-uikit/utils';
 import { EmptyStateProps } from '../../helperComponents';
 import { ScrollProps, SearchState } from '../../types';
-import { ItemProps } from '../Items';
-import { ListContextPrivateType, ListContextType, SelectionState } from './contexts';
-type CollapseState = {
-    value?: (string | number)[];
-    onChange?(value: (string | number)[]): void;
-    defaultValue?: (string | number)[];
-};
+import { AnyType, FlattenBaseItem, FlattenItem, ItemId, ItemProps } from '../Items';
+import { CollapseState, PublicListContextType, SelectionState } from './contexts';
 export type EmptyState = {
     dataFiltered?: boolean;
     dataError?: boolean;
@@ -20,13 +15,13 @@ export type EmptyState = {
     /** Экран при ошибке запроса */
     errorDataState?: EmptyStateProps;
 };
-export type ListProps = WithSupportProps<{
+export type ListProps<Meta = AnyType> = WithSupportProps<{
     /** Основные элементы списка */
-    items: ItemProps[];
+    items: ItemProps<Meta>[];
     /** Элементы списка, закрепленные сверху */
-    pinTop?: ItemProps[];
+    pinTop?: ItemProps<Meta>[];
     /** Элементы списка, закрепленные снизу */
-    pinBottom?: ItemProps[];
+    pinBottom?: ItemProps<Meta>[];
     /**
      * Кастомизируемый элемент в конце списка
      * @type ReactNode;
@@ -45,8 +40,8 @@ export type ListProps = WithSupportProps<{
     onKeyDown?(e: KeyboardEvent<HTMLElement>): void;
     /** Флаг, отвещающий за состояние загрузки списка */
     loading?: boolean;
-} & SelectionState & ListContextType & ScrollProps & EmptyState>;
-export type DroplistProps = {
+} & SelectionState & PublicListContextType<Meta> & ScrollProps & EmptyState>;
+export type DroplistProps<Meta = AnyType> = {
     /** Ссылка на элемент-триггер для дроплиста */
     triggerElemRef?: RefObject<HTMLElement>;
     /** Триггер для дроплиста
@@ -57,8 +52,13 @@ export type DroplistProps = {
     children: ReactNode | ((params: {
         onKeyDown?: (e: KeyboardEvent<HTMLElement>) => void;
     }) => ReactNode);
-} & Pick<DropdownProps, 'trigger' | 'placement' | 'widthStrategy' | 'open' | 'onOpenChange'> & Omit<ListProps, 'tabIndex' | 'onKeyDown'>;
-export type ListPrivateProps = ListProps & ListContextPrivateType & {
+} & Pick<DropdownProps, 'trigger' | 'placement' | 'widthStrategy' | 'open' | 'onOpenChange' | 'triggerClassName'> & Omit<ListProps<Meta>, 'tabIndex' | 'onKeyDown'>;
+type UseRenderItemsProps<Meta = AnyType> = {
+    items: ItemId[];
+    allChildIds?: ItemId[];
+    flattenedItems: Record<string, FlattenItem<Meta>>;
+};
+export type ListPrivateProps<Meta = AnyType> = Omit<ListProps<Meta>, 'pinTop' | 'pinBottom' | 'items'> & {
     nested?: boolean;
     active?: boolean;
     tabIndex?: number;
@@ -66,5 +66,9 @@ export type ListPrivateProps = ListProps & ListContextPrivateType & {
     onBlur?(e: FocusEvent<HTMLElement>): void;
     onKeyDown?(e: KeyboardEvent<HTMLElement>): void;
     limitedScrollHeight?: boolean;
+    searchItem?: FlattenBaseItem<Meta>;
+    pinTop?: UseRenderItemsProps<Meta>;
+    items: UseRenderItemsProps<Meta>;
+    pinBottom?: UseRenderItemsProps<Meta>;
 };
 export {};

package/dist/helperComponents/ItemContent/ItemContent.d.ts

@@ -0,0 +1,15 @@
+import { TruncateStringProps } from '@snack-uikit/truncate-string';
+import { WithSupportProps } from '@snack-uikit/utils';
+export type ItemContentProps = WithSupportProps<{
+    option: string | number;
+    caption?: string;
+    description?: string;
+    truncate?: {
+        option?: number;
+        description?: number;
+        variant?: TruncateStringProps['variant'];
+    };
+    disabled?: boolean;
+    className?: string;
+}>;
+export declare function ItemContent({ truncate, caption, description, option, className, disabled, ...rest }: ItemContentProps): import("react/jsx-runtime").JSX.Element;

package/dist/helperComponents/ItemContent/ItemContent.js

@@ -0,0 +1,23 @@
+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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import { TruncateString } from '@snack-uikit/truncate-string';
+import { extractSupportProps } from '@snack-uikit/utils';
+import { useNewListContext } from '../../components/Lists/contexts';
+import styles from './styles.module.css';
+export function ItemContent(_a) {
+    var _b, _c;
+    var { truncate, caption, description, option, className, disabled } = _a, rest = __rest(_a, ["truncate", "caption", "description", "option", "className", "disabled"]);
+    const { size = 's' } = useNewListContext();
+    return (_jsxs("div", Object.assign({ className: cn(styles.content, className) }, extractSupportProps(rest), { "data-size": size !== null && size !== void 0 ? size : 's', "data-disabled": disabled !== null && disabled !== void 0 ? disabled : undefined, children: [_jsxs("div", { className: styles.headline, children: [_jsx("span", { className: styles.label, children: _jsx(TruncateString, { variant: truncate === null || truncate === void 0 ? void 0 : truncate.variant, text: String(option), maxLines: (_b = truncate === null || truncate === void 0 ? void 0 : truncate.option) !== null && _b !== void 0 ? _b : 1, "data-test-id": 'list__base-item-option' }) }), caption && _jsx("span", { className: styles.caption, children: caption })] }), description && (_jsx("div", { className: styles.description, children: _jsx(TruncateString, { text: description, maxLines: (_c = truncate === null || truncate === void 0 ? void 0 : truncate.description) !== null && _c !== void 0 ? _c : 2, "data-test-id": 'list__base-item-description' }) }))] })));
+}

package/dist/helperComponents/ItemContent/index.d.ts

@@ -0,0 +1 @@
+export * from './ItemContent';

package/dist/helperComponents/ItemContent/index.js

@@ -0,0 +1 @@
+export * from './ItemContent';

package/dist/helperComponents/ItemContent/styles.module.css

@@ -0,0 +1,117 @@
+.headline{
+  display:flex;
+  align-items:center;
+}
+
+.label{
+  overflow:hidden;
+  flex:1;
+  color:var(--sys-neutral-text-main, #33333b);
+}
+
+.caption{
+  overflow:hidden;
+  color:var(--sys-neutral-text-light, #868892);
+  text-overflow:ellipsis;
+  white-space:nowrap;
+}
+
+.description{
+  color:var(--sys-neutral-text-support, #656771);
+}
+
+.content{
+  overflow:hidden;
+  flex-grow:1;
+  flex-shrink:1;
+  box-sizing:border-box;
+}
+.content[data-size=s] .headline{
+  gap:var(--space-drop-list-item-s-container-headline-gap, 8px);
+  height:var(--size-drop-list-item-headline, 24px);
+}
+.content[data-size=s] .label{
+  font-family:var(--sans-body-s-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-s-font-weight, Regular);
+  line-height:var(--sans-body-s-line-height, 16px);
+  font-size:var(--sans-body-s-font-size, 12px);
+  letter-spacing:var(--sans-body-s-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-s-paragraph-spacing, 6.6px);
+}
+.content[data-size=s] .caption{
+  font-family:var(--sans-body-s-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-s-font-weight, Regular);
+  line-height:var(--sans-body-s-line-height, 16px);
+  font-size:var(--sans-body-s-font-size, 12px);
+  letter-spacing:var(--sans-body-s-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-s-paragraph-spacing, 6.6px);
+}
+.content[data-size=s] .description{
+  font-family:var(--sans-body-s-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-s-font-weight, Regular);
+  line-height:var(--sans-body-s-line-height, 16px);
+  font-size:var(--sans-body-s-font-size, 12px);
+  letter-spacing:var(--sans-body-s-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-s-paragraph-spacing, 6.6px);
+}
+.content[data-size=m] .headline{
+  gap:var(--space-drop-list-item-m-container-headline-gap, 8px);
+  height:var(--size-drop-list-item-headline, 24px);
+}
+.content[data-size=m] .label{
+  font-family:var(--sans-body-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-m-font-weight, Regular);
+  line-height:var(--sans-body-m-line-height, 20px);
+  font-size:var(--sans-body-m-font-size, 14px);
+  letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
+}
+.content[data-size=m] .caption{
+  font-family:var(--sans-body-s-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-s-font-weight, Regular);
+  line-height:var(--sans-body-s-line-height, 16px);
+  font-size:var(--sans-body-s-font-size, 12px);
+  letter-spacing:var(--sans-body-s-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-s-paragraph-spacing, 6.6px);
+}
+.content[data-size=m] .description{
+  font-family:var(--sans-body-s-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-s-font-weight, Regular);
+  line-height:var(--sans-body-s-line-height, 16px);
+  font-size:var(--sans-body-s-font-size, 12px);
+  letter-spacing:var(--sans-body-s-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-s-paragraph-spacing, 6.6px);
+}
+.content[data-size=l] .headline{
+  gap:var(--space-drop-list-item-l-container-headline-gap, 8px);
+  height:var(--size-drop-list-item-headline, 24px);
+}
+.content[data-size=l] .label{
+  font-family:var(--sans-body-l-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-l-font-weight, Regular);
+  line-height:var(--sans-body-l-line-height, 24px);
+  font-size:var(--sans-body-l-font-size, 16px);
+  letter-spacing:var(--sans-body-l-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-l-paragraph-spacing, 8.8px);
+}
+.content[data-size=l] .caption{
+  font-family:var(--sans-body-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-m-font-weight, Regular);
+  line-height:var(--sans-body-m-line-height, 20px);
+  font-size:var(--sans-body-m-font-size, 14px);
+  letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
+}
+.content[data-size=l] .description{
+  font-family:var(--sans-body-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-m-font-weight, Regular);
+  line-height:var(--sans-body-m-line-height, 20px);
+  font-size:var(--sans-body-m-font-size, 14px);
+  letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
+}
+.content[data-disabled] .option,
+.content[data-disabled] .description,
+.content[data-disabled] .caption{
+  color:var(--sys-neutral-text-disabled, #b3b6bf);
+}

package/dist/helperComponents/ListEmptyState/ListEmptyState.d.ts

@@ -9,6 +9,6 @@ export type ListEmptyState = {
     loading?: boolean;
     dataError?: boolean;
     dataFiltered?: boolean;
-    itemsLength: number;
+    hasNoItems: boolean;
 };
-export declare function ListEmptyState({ dataError, dataFiltered, itemsLength, emptyStates, loading }: ListEmptyState): import("react/jsx-runtime").JSX.Element | null;
+export declare function ListEmptyState({ dataError, dataFiltered, hasNoItems, emptyStates, loading }: ListEmptyState): null;

package/dist/helperComponents/ListEmptyState/ListEmptyState.js

@@ -1,9 +1,18 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { InfoBlock } from '@snack-uikit/info-block';
 import styles from './styles.module.css';
-export function ListEmptyState({ dataError, dataFiltered, itemsLength, emptyStates, loading }) {
-    if (itemsLength || loading) {
+export function ListEmptyState({ dataError, dataFiltered, hasNoItems, emptyStates, loading }) {
+    if (loading) {
         return null;
     }
-    return (_jsxs("div", { className: styles.listEmptyStateWrapper, children: [dataError && _jsx(InfoBlock, Object.assign({}, emptyStates.errorDataState, { size: 's', align: 'vertical' })), !dataError && dataFiltered && (_jsx(InfoBlock, Object.assign({}, emptyStates.noResultsState, { size: 's', align: 'vertical', "data-test-id": 'list__no-results' }))), !dataError && !dataFiltered && (_jsx(InfoBlock, Object.assign({}, emptyStates.noDataState, { size: 's', align: 'vertical', "data-test-id": 'list__no-data' })))] }));
+    if (dataError) {
+        _jsx("div", { className: styles.listEmptyStateWrapper, children: _jsx(InfoBlock, Object.assign({}, emptyStates.errorDataState, { size: 's', align: 'vertical' })) });
+    }
+    if (dataFiltered && hasNoItems) {
+        _jsx("div", { className: styles.listEmptyStateWrapper, children: _jsx(InfoBlock, Object.assign({}, emptyStates.noResultsState, { size: 's', align: 'vertical', "data-test-id": 'list__no-results' })) });
+    }
+    if (!dataFiltered && hasNoItems) {
+        _jsx("div", { className: styles.listEmptyStateWrapper, children: _jsx(InfoBlock, Object.assign({}, emptyStates.noDataState, { size: 's', align: 'vertical', "data-test-id": 'list__no-data' })) });
+    }
+    return null;
 }

package/dist/helperComponents/index.d.ts

@@ -2,3 +2,4 @@ export * from './CollapseBlockPrivate';
 export * from './Separator';
 export * from './HiddenTabButton';
 export * from './ListEmptyState';
+export * from './ItemContent';

package/dist/helperComponents/index.js

@@ -2,3 +2,4 @@ export * from './CollapseBlockPrivate';
 export * from './Separator';
 export * from './HiddenTabButton';
 export * from './ListEmptyState';
+export * from './ItemContent';

package/dist/hooks.d.ts

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

package/dist/hooks.js

@@ -1,15 +1,20 @@
-import FuzzySearch from 'fuzzy-search';
+// import FuzzySearch from 'fuzzy-search';
 import { useCallback } from 'react';
-import { flattenItems } from './utils';
-const DEFAULT_MIN_SEARCH_INPUT_LENGTH = 2;
+// import { flattenItems } from './utils';
+// const DEFAULT_MIN_SEARCH_INPUT_LENGTH = 2;
 /**
  * Нечеткий поиск среди айтемов по полям 'content.option', 'content.caption', 'content.description', 'label'
  */
-export function useFuzzySearch(items, minSearchInputLength) {
-    return useCallback((search) => {
-        const searcher = new FuzzySearch(flattenItems(items), ['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;
-    }, [items, minSearchInputLength]);
+export function useFuzzySearch(items) {
+    return useCallback(() => 
+    // (search: string) =>
+    // const searcher = new FuzzySearch(
+    //   // flattenItems(items),
+    //   ['content.option', 'content.caption', 'content.description', 'label'],
+    //   {},
+    // );
+    // return search.length > (minSearchInputLength ?? DEFAULT_MIN_SEARCH_INPUT_LENGTH)
+    //   ? searcher.search(search)
+    //   : items;
+    items, [items]);
 }

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export * from './components';
-export { useFuzzySearch } from './hooks';
 export type { SearchState } from './types';
-export { extractChildIds, flattenItems } from './utils';
+export { kindFlattenItems } from './utils';
+export * from './helperComponents/ItemContent';
+export * from './legacy';

package/dist/index.js

@@ -1,3 +1,4 @@
 export * from './components';
-export { useFuzzySearch } from './hooks';
-export { extractChildIds, flattenItems } from './utils';
+export { kindFlattenItems } from './utils';
+export * from './helperComponents/ItemContent';
+export * from './legacy';

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

@@ -0,0 +1,12 @@
+import { ItemProps } from '../../../components';
+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/legacy/components/Items/hooks.js

@@ -0,0 +1,33 @@
+import { useEffect, useMemo } from 'react';
+import { useSelectionContext } from '../../../components/Lists/contexts';
+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/legacy/components/index.d.ts

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

package/dist/legacy/components/index.js

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

package/dist/legacy/hooks.d.ts

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

package/dist/legacy/hooks.js

@@ -0,0 +1,15 @@
+import FuzzySearch from 'fuzzy-search';
+import { useCallback } from 'react';
+import { flattenItems } from './utils';
+const DEFAULT_MIN_SEARCH_INPUT_LENGTH = 2;
+/**
+ * Нечеткий поиск среди айтемов по полям 'content.option', 'content.caption', 'content.description', 'label'
+ */
+export function useFuzzySearch(items, minSearchInputLength) {
+    return useCallback((search) => {
+        const searcher = new FuzzySearch(flattenItems(items), ['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;
+    }, [items, minSearchInputLength]);
+}

package/dist/legacy/index.d.ts

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

package/dist/legacy/index.js

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

package/dist/legacy/utils.d.ts

@@ -0,0 +1,29 @@
+import { RefObject } from 'react';
+import { AccordionItemProps, BaseItemProps, ItemProps, NextListItemProps } from '../components/Items';
+type WithCollapsedItemsProps = {
+    items: ItemProps[];
+    openCollapsedItems: Array<number | string>;
+};
+export declare function withCollapsedItems({ items, openCollapsedItems }: WithCollapsedItemsProps): {
+    items: ItemProps[];
+    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 {};