@snack-uikit/list 0.10.0 → 0.10.1-preview-69abc1d3.0

package/dist/components/Items/utils.js

@@ -1,43 +1,138 @@
+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 { createRef } from 'react';
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function isBaseItemProps(item) {
-    return 'content' in item;
-}
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function isAccordionItemProps(item) {
-    return 'items' in item && item['type'] === 'collapse';
-}
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function isNextListItemProps(item) {
-    return 'items' in item && item['type'] === 'next-list';
-}
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function isGroupItemProps(item) {
-    return 'items' in item && item['type'] === undefined;
-}
-export function getSlicedItems({ items, hasSearch, pinTop, pinBottom, footerRefs, }) {
-    var _a, _b, _c;
-    const searchShift = hasSearch ? 1 : 0;
-    const pinTopNumber = (_a = pinTop === null || pinTop === void 0 ? void 0 : pinTop.length) !== null && _a !== void 0 ? _a : 0;
-    const pinBottomNumber = (_b = pinBottom === null || pinBottom === void 0 ? void 0 : pinBottom.length) !== null && _b !== void 0 ? _b : 0;
-    const footerElementsNumber = (_c = footerRefs === null || footerRefs === void 0 ? void 0 : footerRefs.length) !== null && _c !== void 0 ? _c : 0;
-    return {
-        pinTop: items.slice(searchShift, pinTopNumber + searchShift),
-        items: items.slice(pinTopNumber + searchShift, items.length - pinBottomNumber - footerElementsNumber),
-        pinBottom: items.slice(items.length - pinBottomNumber - footerElementsNumber, items.length - footerElementsNumber),
-    };
+export function isBaseItem(item) {
+    return item && !('items' in item);
+}
+export function isAccordionItem(item) {
+    return item && 'items' in item && item['type'] === 'collapse';
+}
+export function isNextListItem(item) {
+    return item && 'items' in item && item['type'] === 'next-list';
+}
+export function isGroupItem(item) {
+    return item && 'items' in item && item['type'] === 'group';
+}
+export function isGroupSelectItem(item) {
+    return item && 'items' in item && item['type'] === 'group-select';
 }
-export function addItemsIds(itemsProp, prefix) {
-    return itemsProp.map((item, idx) => {
-        var _a;
+export function isContentItem(item) {
+    return typeof item === 'object' && item['option'] !== undefined;
+}
+export const isBaseItemProps = isBaseItem;
+export const isAccordionItemProps = isAccordionItem;
+export const isNextListItemProps = isNextListItem;
+export const isGroupItemProps = isGroupItem;
+export function kindFlattenItems({ items, prefix, parentId }) {
+    const flattenItems = {};
+    const focusFlattenItems = {};
+    function flatten({ item, idx, prefix, parentId = '~main' }) {
+        var _a, _b;
         const autoId = prefix !== undefined ? [prefix, idx].join('-') : String(idx);
-        const itemId = (_a = item.id) !== null && _a !== void 0 ? _a : autoId;
-        if (isGroupItemProps(item)) {
-            return Object.assign(Object.assign({ key: autoId }, item), { id: itemId, items: addItemsIds(item.items, itemId) });
+        const itemId = (_a = (!isGroupItem(item) ? item.id : undefined)) !== null && _a !== void 0 ? _a : autoId;
+        if (isBaseItem(item)) {
+            flattenItems[itemId] = Object.assign(Object.assign({}, item), { items: [], allChildIds: [], id: itemId });
+            focusFlattenItems[autoId] = {
+                key: autoId,
+                originalId: itemId,
+                id: autoId,
+                disabled: item.disabled,
+                parentId,
+                items: [],
+                allChildIds: [],
+                itemRef: item.itemRef || createRef(),
+            };
+            return { id: itemId, children: [itemId], autoId, focusChildren: [autoId] };
         }
-        if (isAccordionItemProps(item) || isNextListItemProps(item)) {
-            return Object.assign(Object.assign({ key: autoId }, item), { id: itemId, items: addItemsIds(item.items, itemId), itemRef: item.itemRef || createRef() });
+        let allChildIds = [];
+        let allFocusChildIds = [];
+        const closeChildIds = [];
+        const autoChildIds = [];
+        const { items } = item, rest = __rest(item, ["items"]);
+        const childActiveParent = isGroupItem(item) ? parentId !== null && parentId !== void 0 ? parentId : '~main' : autoId;
+        for (let idx = 0; idx < items.length; idx++) {
+            const { id, children, autoId, focusChildren } = flatten({
+                item: items[idx],
+                idx,
+                prefix: itemId,
+                parentId: childActiveParent,
+            });
+            autoChildIds.push(autoId);
+            closeChildIds.push(id);
+            allChildIds = allChildIds.concat(children);
+            allFocusChildIds = allFocusChildIds.concat(focusChildren);
         }
-        return Object.assign(Object.assign({ key: autoId }, item), { id: itemId, itemRef: item.itemRef || createRef() });
-    });
+        const children = [...new Set(allChildIds.concat(closeChildIds))];
+        const focusChildren = [...new Set(allFocusChildIds.concat(autoChildIds))];
+        flattenItems[itemId] = Object.assign(Object.assign({}, rest), { id: itemId, items: [], allChildIds: children });
+        focusFlattenItems[autoId] = {
+            key: autoId,
+            originalId: itemId,
+            id: autoId,
+            parentId,
+            items: autoChildIds,
+            allChildIds: focusChildren,
+            disabled: (item.type === 'collapse' || item.type === 'next-list') && item.disabled,
+            type: item.type,
+            itemRef: (_b = (!isGroupItem(item) ? item.itemRef : undefined)) !== null && _b !== void 0 ? _b : createRef(),
+        };
+        return { id: itemId, children, autoId, focusChildren };
+    }
+    const closeChildIds = [];
+    const autoChildIds = [];
+    let allChildIds = [];
+    for (let idx = 0; idx < items.length; idx++) {
+        const { id, children, autoId } = flatten({ item: items[idx], idx, prefix, parentId });
+        autoChildIds.push(autoId);
+        closeChildIds.push(id);
+        allChildIds.push(id);
+        allChildIds = allChildIds.concat(children);
+    }
+    const children = [...new Set(allChildIds)];
+    return {
+        focusCloseChildIds: autoChildIds,
+        allChildIds: children,
+        flattenItems,
+        focusFlattenItems,
+    };
+}
+export function extractActiveItems({ focusFlattenItems, focusCloseChildIds, openCollapseItems, }) {
+    const ids = [];
+    const expandedIds = [];
+    function internalFn(focusCloseChildIds) {
+        focusCloseChildIds.forEach(id => {
+            const child = focusFlattenItems[id];
+            if (child.type === 'group') {
+                internalFn(child.items);
+                return;
+            }
+            if (!child.disabled) {
+                ids.push(child.id);
+                if (child.type === 'group-select') {
+                    internalFn(child.items);
+                    return;
+                }
+                if (child.type) {
+                    expandedIds.push(id);
+                    if (openCollapseItems.includes(id)) {
+                        internalFn(child.items);
+                    }
+                }
+            }
+        });
+    }
+    internalFn(focusCloseChildIds);
+    return {
+        ids,
+        expandedIds,
+    };
 }

package/dist/components/Lists/Droplist/DropList.d.ts

@@ -1,2 +1,2 @@
 import { DroplistProps } from '../types';
-export declare function Droplist({ items: itemsProp, search, pinBottom, pinTop, footerActiveElementsRefs, children, trigger, placement, widthStrategy, triggerElemRef: triggerElemRefProp, open: openProp, onOpenChange, collapse, ...props }: DroplistProps): import("react/jsx-runtime").JSX.Element;
+export declare function Droplist({ items: itemsProp, search, pinBottom: pinBottomProp, pinTop: pinTopProp, footerActiveElementsRefs, children, trigger, placement, widthStrategy, triggerElemRef: triggerElemRefProp, open: openProp, onOpenChange, collapse, triggerClassName, selection, contentRender, size, marker, className, ...props }: DroplistProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Lists/Droplist/DropList.js

@@ -10,46 +10,71 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
+import cn from 'classnames';
 import { cloneElement, isValidElement, useCallback, useMemo, useRef } from 'react';
-import { useUncontrolledProp } from 'uncontrollable';
 import { Dropdown } from '@snack-uikit/dropdown';
-import { extractItemIds, extractItemRefs, withCollapsedItems } from '../../../utils';
-import { addItemsIds, getSlicedItems, useItemsWithIds } from '../../Items';
-import { extractSelectionProps, ParentListContext, SelectionProvider } from '../contexts';
-import { useKeyboardNavigation } from '../hooks';
+import { useValueControl } from '@snack-uikit/utils';
+import { extractActiveItems, kindFlattenItems, useCreateBaseItems } from '../../Items';
+import { CollapseContext, FocusListContext, NewListContextProvider, SelectionProvider } from '../contexts';
+import { useNewKeyboardNavigation } from '../hooks';
 import { ListPrivate } from '../ListPrivate';
+import styles from '../styles.module.css';
+const DEFAULT_FALLBACK_PLACEMENTS = ['top', 'right', 'bottom', 'left'];
 export function Droplist(_a) {
-    var _b;
-    var { items: itemsProp, search, pinBottom, pinTop, footerActiveElementsRefs, children, trigger, placement, widthStrategy, triggerElemRef: triggerElemRefProp, open: openProp, onOpenChange, collapse = {} } = _a, props = __rest(_a, ["items", "search", "pinBottom", "pinTop", "footerActiveElementsRefs", "children", "trigger", "placement", "widthStrategy", "triggerElemRef", "open", "onOpenChange", "collapse"]);
+    var { items: itemsProp, search, pinBottom: pinBottomProp = [], pinTop: pinTopProp = [], footerActiveElementsRefs, children, trigger, placement, widthStrategy, triggerElemRef: triggerElemRefProp, open: openProp, onOpenChange, collapse = {}, triggerClassName, selection, contentRender, size = 's', marker = true, className } = _a, props = __rest(_a, ["items", "search", "pinBottom", "pinTop", "footerActiveElementsRefs", "children", "trigger", "placement", "widthStrategy", "triggerElemRef", "open", "onOpenChange", "collapse", "triggerClassName", "selection", "contentRender", "size", "marker", "className"]);
     const hasSearch = useMemo(() => Boolean(search), [search]);
-    const memorizedItems = useMemo(() => addItemsIds((pinTop !== null && pinTop !== void 0 ? pinTop : []).concat(itemsProp).concat(pinBottom !== null && pinBottom !== void 0 ? pinBottom : [])), [itemsProp, pinBottom, pinTop]);
-    const [openCollapsedItems, setOpenCollapsedItems] = useUncontrolledProp(collapse.value, (_b = collapse.defaultValue) !== null && _b !== void 0 ? _b : [], collapse.onChange);
-    const { search: searchItem, footerRefs } = useItemsWithIds({
-        search: hasSearch,
-        footerActiveElementsRefs,
+    const [openCollapseItems = [], setOpenCollapsedItems] = useValueControl(collapse);
+    const toggleOpenCollapseItem = useCallback((id) => setOpenCollapsedItems((items) => (items === null || items === void 0 ? void 0 : items.includes(id)) ? items.filter(item => item !== id) : (items !== null && items !== void 0 ? items : []).concat([id])), [setOpenCollapsedItems]);
+    const [open = false, setOpen] = useValueControl({
+        value: openProp,
+        defaultValue: false,
+        onChange: onOpenChange,
     });
-    const { items, itemRefs, ids, expandedIds } = useMemo(() => {
-        const res = withCollapsedItems({
-            items: memorizedItems,
-            openCollapsedItems,
+    const { searchItem, footerItems } = useCreateBaseItems({ footerActiveElementsRefs });
+    /**
+     * Объект с пропсами всех вложенных айтемов; ключ id
+     */
+    const _b = useMemo(() => {
+        const pinTop = kindFlattenItems({ items: pinTopProp, prefix: '~pinTop', parentId: '~main' });
+        const items = kindFlattenItems({ items: itemsProp, prefix: '~main', parentId: '~main' });
+        const pinBottom = kindFlattenItems({ items: pinBottomProp, prefix: '~pinBottom', parentId: '~main' });
+        const flattenItems = Object.assign(Object.assign(Object.assign({}, pinTop.flattenItems), pinBottom.flattenItems), items.flattenItems);
+        const focusFlattenItems = Object.assign(Object.assign(Object.assign({}, pinTop.focusFlattenItems), pinBottom.focusFlattenItems), items.focusFlattenItems);
+        [...footerItems, searchItem].forEach(item => {
+            flattenItems[item.id] = item;
+            focusFlattenItems[item.id] = Object.assign(Object.assign({}, item), { originalId: item.id, items: [], key: item.id, allChildIds: [] });
+        });
+        return { items, pinTop, pinBottom, flattenItems, focusFlattenItems };
+    }, [itemsProp, pinTopProp, pinBottomProp, searchItem, footerItems]), { flattenItems, focusFlattenItems } = _b, memorizedItems = __rest(_b, ["flattenItems", "focusFlattenItems"]);
+    const { ids, expandedIds } = useMemo(() => {
+        const { pinTop, items, pinBottom } = memorizedItems;
+        let ids = [];
+        let expandedIds = [];
+        if (hasSearch) {
+            ids.push(searchItem.id);
+        }
+        [pinTop, items, pinBottom].forEach(({ focusFlattenItems, focusCloseChildIds }) => {
+            const activeItems = extractActiveItems({ focusFlattenItems, focusCloseChildIds, openCollapseItems });
+            ids = ids.concat(activeItems.ids);
+            expandedIds = expandedIds.concat(activeItems.expandedIds);
+        });
+        footerItems.forEach(footerItem => {
+            ids.push(footerItem.id);
         });
-        const items = searchItem.concat(res.items).concat(footerRefs);
         return {
-            items,
-            ids: extractItemIds(searchItem).concat(res.ids).concat(extractItemIds(footerRefs)),
-            itemRefs: extractItemRefs(searchItem).concat(res.itemRefs).concat(extractItemRefs(footerRefs)),
-            expandedIds: res.expandedIds,
+            ids,
+            expandedIds,
         };
-    }, [footerRefs, memorizedItems, openCollapsedItems, searchItem]);
-    const slicedItems = useMemo(() => getSlicedItems({ items, hasSearch, pinTop, pinBottom, footerRefs }), [items, hasSearch, pinTop, pinBottom, footerRefs]);
+    }, [footerItems, hasSearch, memorizedItems, openCollapseItems, searchItem.id]);
     const triggerElemRef = useRef(null);
     const listRef = useRef(null);
-    const { activeFocusIndex, setActiveFocusIndex, openNestedIndex, handleListKeyDown, resetNestedIndex, resetActiveFocusIndex, } = useKeyboardNavigation({ ids, expandedIds, parentRef: triggerElemRefProp !== null && triggerElemRefProp !== void 0 ? triggerElemRefProp : triggerElemRef, itemRefs });
-    const [open, setOpen] = useUncontrolledProp(openProp, false, onOpenChange);
+    const { handleListKeyDownFactory, resetActiveItemId, activeItemId, forceUpdateActiveItemId } = useNewKeyboardNavigation({
+        mainRef: triggerElemRefProp !== null && triggerElemRefProp !== void 0 ? triggerElemRefProp : triggerElemRef,
+        focusFlattenItems,
+    });
+    const handleListKeyDown = useCallback((e) => handleListKeyDownFactory(ids, expandedIds)(e), [handleListKeyDownFactory, ids, expandedIds]);
     const handleOpenChange = (open) => {
-        resetNestedIndex();
-        resetActiveFocusIndex();
-        setOpenCollapsedItems([]);
+        resetActiveItemId();
         setOpen(open);
     };
     const onKeyDown = useCallback((e, cb) => {
@@ -58,12 +83,15 @@ export function Droplist(_a) {
             setOpen(true);
             setTimeout(() => {
                 var _a;
+                resetActiveItemId();
                 (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                setActiveFocusIndex(0);
             }, 0);
         }
+        if (e.key === 'ArrowUp') {
+            setOpen(false);
+        }
         cb === null || cb === void 0 ? void 0 : cb(e);
-    }, [setActiveFocusIndex, setOpen]);
+    }, [resetActiveItemId, setOpen]);
     const triggerElem = useMemo(() => {
         if (isValidElement(children)) {
             const props = typeof children.props === 'object' ? children.props : {};
@@ -77,24 +105,19 @@ export function Droplist(_a) {
         }
         return children;
     }, [onKeyDown, children]);
-    return (
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    _jsx(SelectionProvider, Object.assign({}, extractSelectionProps(props), { children: _jsx(ParentListContext.Provider, { value: {
-                parentIds: ids,
-                parentActiveFocusIndex: activeFocusIndex,
-                parentExpandedIds: expandedIds,
-                parentItemRefs: itemRefs,
-                parentOpenNestedIndex: openNestedIndex,
-                triggerRef: triggerElemRefProp !== null && triggerElemRefProp !== void 0 ? triggerElemRefProp : triggerElemRef,
-                parentRef: listRef,
-                parentResetNestedIndex: resetNestedIndex,
-                parentResetActiveFocusIndex: resetActiveFocusIndex,
-                openCollapsedItems,
-                toggleOpenCollapsedItems: id => setOpenCollapsedItems((items = []) => items.includes(id) ? items.filter(item => item !== id) : items === null || items === void 0 ? void 0 : items.concat([id])),
-            }, children: _jsx(Dropdown, Object.assign({ content: _jsx(ListPrivate, Object.assign({}, slicedItems, props, { onKeyDown: handleListKeyDown, tabIndex: 0, ref: listRef, search: search, limitedScrollHeight: true, parent: 'droplist' })), trigger: trigger, placement: placement, widthStrategy: widthStrategy }, (triggerElemRefProp
-                ? {}
-                : {
-                    triggerRef: triggerElemRef,
-                }), { open: open, onOpenChange: handleOpenChange, children: triggerElem })) }) })));
+    return (_jsx(NewListContextProvider, { flattenItems: flattenItems, focusFlattenItems: focusFlattenItems, contentRender: contentRender, size: size, marker: marker, children: _jsx(SelectionProvider, Object.assign({}, selection, { children: _jsx(CollapseContext.Provider, { value: {
+                    openCollapseItems,
+                    toggleOpenCollapseItem,
+                }, children: _jsx(FocusListContext.Provider, { value: {
+                        activeItemId,
+                        handleListKeyDownFactory,
+                        forceUpdateActiveItemId,
+                    }, children: _jsx(Dropdown, Object.assign({ content: _jsx("div", { className: cn(styles.wrapper, className), children: _jsx(ListPrivate, Object.assign({}, props, { items: memorizedItems.items.focusCloseChildIds, pinTop: memorizedItems.pinTop.focusCloseChildIds, pinBottom: memorizedItems.pinBottom.focusCloseChildIds, onKeyDown: handleListKeyDown, searchItem: searchItem, tabIndex: 0, ref: listRef, search: search, onFocus: e => {
+                                    e.stopPropagation();
+                                    forceUpdateActiveItemId === null || forceUpdateActiveItemId === void 0 ? void 0 : forceUpdateActiveItemId(ids[0]);
+                                }, limitedScrollHeight: true })) }), triggerClassName: triggerClassName, fallbackPlacements: DEFAULT_FALLBACK_PLACEMENTS, trigger: trigger, placement: placement, widthStrategy: widthStrategy }, (triggerElemRefProp
+                        ? {}
+                        : {
+                            triggerRef: triggerElemRef,
+                        }), { open: open, onOpenChange: handleOpenChange, children: triggerElem })) }) }) })) }));
 }

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

@@ -2,19 +2,15 @@ import { KeyboardEvent } from 'react';
 export declare const List: import("react").ForwardRefExoticComponent<{
     'data-test-id'?: string | undefined;
 } & import("react").AriaAttributes & {
-    items: import("../../Items").ItemProps[];
-    pinTop?: import("../../Items").ItemProps[] | undefined;
-    pinBottom?: import("../../Items").ItemProps[] | undefined;
+    items: import("../../Items").Item[];
+    pinTop?: import("../../Items").Item[] | undefined;
+    pinBottom?: import("../../Items").Item[] | undefined;
     footer?: import("react").ReactNode;
     footerActiveElementsRefs?: import("react").RefObject<HTMLElement>[] | undefined;
     search?: import("../../..").SearchState | undefined;
     tabIndex?: number | undefined;
-    collapse?: {
-        value?: (string | number)[] | undefined;
-        onChange?(value: (string | number)[]): void;
-        defaultValue?: (string | number)[] | undefined;
-    } | undefined;
+    collapse?: import("../contexts").CollapseState | undefined;
     className?: string | undefined;
     onKeyDown?(e: KeyboardEvent<HTMLElement>): void;
     loading?: boolean | undefined;
-} & import("../contexts").SelectionState & import("../contexts").ListContextType & import("../../../types").ScrollProps & import("../types").EmptyState & import("react").RefAttributes<HTMLElement>>;
+} & import("../contexts").SelectionState & import("../contexts").PublicListContextType & import("../../../types").ScrollProps & import("../types").EmptyState & import("react").RefAttributes<HTMLElement>>;

package/dist/components/Lists/List/List.js

@@ -12,75 +12,77 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import cn from 'classnames';
 import mergeRefs from 'merge-refs';
-import { forwardRef, useMemo, useRef } from 'react';
-import { useUncontrolledProp } from 'uncontrollable';
+import { forwardRef, useCallback, useMemo, useRef } from 'react';
+import { useValueControl } from '@snack-uikit/utils';
 import { HiddenTabButton } from '../../../helperComponents';
-import { extractItemIds, extractItemRefs, withCollapsedItems } from '../../../utils';
-import { addItemsIds, getSlicedItems, useItemsWithIds } from '../../Items';
-import { extractSelectionProps, ParentListContext, SelectionProvider, useParentListContext } from '../contexts';
-import { useKeyboardNavigation } from '../hooks';
+import { extractActiveItems, kindFlattenItems, useCreateBaseItems } from '../../Items';
+import { CollapseContext, FocusListContext, NewListContextProvider, SelectionProvider } from '../contexts';
+import { useNewKeyboardNavigation } from '../hooks';
 import { ListPrivate } from '../ListPrivate';
 import styles from '../styles.module.css';
 export const List = forwardRef((_a, ref) => {
-    var _b;
-    var { items: itemsProp, search, pinBottom, pinTop, footerActiveElementsRefs, onKeyDown, tabIndex = 0, className, collapse = {} } = _a, props = __rest(_a, ["items", "search", "pinBottom", "pinTop", "footerActiveElementsRefs", "onKeyDown", "tabIndex", "className", "collapse"]);
+    var { items: itemsProp = [], search, pinBottom: pinBottomProp = [], pinTop: pinTopProp = [], footerActiveElementsRefs, onKeyDown, tabIndex = 0, className, collapse = {}, selection, contentRender, size = 's', marker = true } = _a, props = __rest(_a, ["items", "search", "pinBottom", "pinTop", "footerActiveElementsRefs", "onKeyDown", "tabIndex", "className", "collapse", "selection", "contentRender", "size", "marker"]);
     const hasSearch = useMemo(() => Boolean(search), [search]);
-    const memorizedItems = useMemo(() => addItemsIds((pinTop !== null && pinTop !== void 0 ? pinTop : []).concat(itemsProp).concat(pinBottom !== null && pinBottom !== void 0 ? pinBottom : [])), [itemsProp, pinBottom, pinTop]);
-    const [openCollapsedItems, setOpenCollapsedItems] = useUncontrolledProp(collapse.value, (_b = collapse.defaultValue) !== null && _b !== void 0 ? _b : [], collapse.onChange);
-    const { search: searchItem, footerRefs } = useItemsWithIds({
-        search: hasSearch,
-        footerActiveElementsRefs,
-    });
-    const { items, itemRefs, ids, expandedIds } = useMemo(() => {
-        const res = withCollapsedItems({
-            items: memorizedItems,
-            openCollapsedItems,
+    const [openCollapseItems = [], setOpenCollapsedItems] = useValueControl(collapse);
+    const toggleOpenCollapseItem = useCallback((id) => setOpenCollapsedItems((items) => (items === null || items === void 0 ? void 0 : items.includes(id)) ? items.filter(item => item !== id) : (items !== null && items !== void 0 ? items : []).concat([id])), [setOpenCollapsedItems]);
+    const { searchItem, footerItems } = useCreateBaseItems({ footerActiveElementsRefs });
+    /**
+     * Объект с пропсами всех вложенных айтемов; ключ id
+     */
+    const _b = useMemo(() => {
+        const pinTop = kindFlattenItems({ items: pinTopProp, prefix: '~pinTop', parentId: '~main' });
+        const items = kindFlattenItems({ items: itemsProp, prefix: '~main', parentId: '~main' });
+        const pinBottom = kindFlattenItems({ items: pinBottomProp, prefix: '~pinBottom', parentId: '~main' });
+        const flattenItems = Object.assign(Object.assign(Object.assign({}, pinTop.flattenItems), pinBottom.flattenItems), items.flattenItems);
+        const focusFlattenItems = Object.assign(Object.assign(Object.assign({}, pinTop.focusFlattenItems), pinBottom.focusFlattenItems), items.focusFlattenItems);
+        [...footerItems, searchItem].forEach(item => {
+            flattenItems[item.id] = item;
+            focusFlattenItems[item.id] = Object.assign(Object.assign({}, item), { originalId: item.id, items: [], key: item.id, allChildIds: [] });
+        });
+        return { items, pinTop, pinBottom, flattenItems, focusFlattenItems };
+    }, [itemsProp, pinTopProp, pinBottomProp, searchItem, footerItems]), { flattenItems, focusFlattenItems } = _b, memorizedItems = __rest(_b, ["flattenItems", "focusFlattenItems"]);
+    const { ids, expandedIds } = useMemo(() => {
+        const { pinTop, items, pinBottom } = memorizedItems;
+        let ids = [];
+        let expandedIds = [];
+        if (hasSearch) {
+            ids.push(searchItem.id);
+        }
+        [pinTop, items, pinBottom].forEach(({ focusFlattenItems, focusCloseChildIds }) => {
+            const activeItems = extractActiveItems({ focusFlattenItems, focusCloseChildIds, openCollapseItems });
+            ids = ids.concat(activeItems.ids);
+            expandedIds = expandedIds.concat(activeItems.expandedIds);
+        });
+        footerItems.forEach(footerItem => {
+            ids.push(footerItem.id);
         });
-        const items = searchItem.concat(res.items).concat(footerRefs);
         return {
-            items,
-            ids: extractItemIds(searchItem).concat(res.ids).concat(extractItemIds(footerRefs)),
-            itemRefs: extractItemRefs(searchItem).concat(res.itemRefs).concat(extractItemRefs(footerRefs)),
-            expandedIds: res.expandedIds,
+            ids,
+            expandedIds,
         };
-    }, [footerRefs, memorizedItems, openCollapsedItems, searchItem]);
-    const slicedItems = useMemo(() => getSlicedItems({ items, hasSearch, pinTop, pinBottom, footerRefs }), [items, hasSearch, pinTop, pinBottom, footerRefs]);
+    }, [footerItems, hasSearch, memorizedItems, openCollapseItems, searchItem.id]);
     const listRef = useRef(null);
     const btnRef = useRef(null);
-    const { triggerRef } = useParentListContext();
-    const { activeFocusIndex, openNestedIndex, handleListKeyDown, resetNestedIndex, resetActiveFocusIndex, setActiveFocusIndex, } = useKeyboardNavigation({
-        ids,
-        expandedIds,
-        parentRef: listRef,
+    const { handleListKeyDownFactory, activeItemId, resetActiveItemId, forceUpdateActiveItemId } = useNewKeyboardNavigation({
+        mainRef: listRef,
         btnRef,
-        itemRefs,
+        focusFlattenItems,
     });
-    const isActive = listRef.current === document.activeElement && activeFocusIndex === -1 && openNestedIndex === -1;
+    const handleListKeyDown = useCallback((e) => handleListKeyDownFactory(ids, expandedIds)(e), [handleListKeyDownFactory, ids, expandedIds]);
+    const isActive = listRef.current === document.activeElement && activeItemId === undefined;
     const mergedHandlerKeyDown = (e) => {
         onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
         handleListKeyDown === null || handleListKeyDown === void 0 ? void 0 : handleListKeyDown(e);
     };
-    const handleOnFocus = (e) => {
-        if (e.relatedTarget === null ||
-            (e.relatedTarget && itemRefs.every(({ current }) => current !== e.relatedTarget))) {
-            resetActiveFocusIndex();
-        }
+    const handleOnFocus = () => {
+        resetActiveItemId();
     };
-    return (
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    _jsx(SelectionProvider, Object.assign({}, extractSelectionProps(props), { children: _jsx(ParentListContext.Provider, { value: {
-                parentIds: ids,
-                parentActiveFocusIndex: activeFocusIndex,
-                parentExpandedIds: expandedIds,
-                parentItemRefs: itemRefs,
-                parentOpenNestedIndex: openNestedIndex,
-                triggerRef: triggerRef !== null && triggerRef !== void 0 ? triggerRef : listRef,
-                parentRef: listRef,
-                parentSetActiveFocusIndex: setActiveFocusIndex,
-                parentResetNestedIndex: resetNestedIndex,
-                parentResetActiveFocusIndex: resetActiveFocusIndex,
-                openCollapsedItems,
-                toggleOpenCollapsedItems: id => setOpenCollapsedItems((items = []) => items.includes(id) ? items.filter(item => item !== id) : items === null || items === void 0 ? void 0 : items.concat([id])),
-            }, children: _jsxs("div", { className: cn(styles.wrapper, className), "data-active": isActive || undefined, children: [_jsx(ListPrivate, Object.assign({}, props, slicedItems, { ref: mergeRefs(ref, listRef), onFocus: handleOnFocus, onKeyDown: mergedHandlerKeyDown, tabIndex: tabIndex, search: search, nested: false, parent: 'list' })), _jsx(HiddenTabButton, { ref: btnRef, listRef: listRef, tabIndex: tabIndex })] }) }) })));
+    return (_jsx(NewListContextProvider, { flattenItems: flattenItems, focusFlattenItems: focusFlattenItems, contentRender: contentRender, size: size, marker: marker, children: _jsx(SelectionProvider, Object.assign({}, selection, { children: _jsx(CollapseContext.Provider, { value: {
+                    openCollapseItems,
+                    toggleOpenCollapseItem,
+                }, children: _jsx(FocusListContext.Provider, { value: {
+                        activeItemId,
+                        handleListKeyDownFactory,
+                        forceUpdateActiveItemId,
+                    }, children: _jsxs("div", { className: cn(styles.wrapper, className), "data-active": isActive || undefined, children: [_jsx(ListPrivate, Object.assign({}, props, { items: memorizedItems.items.focusCloseChildIds, pinTop: memorizedItems.pinTop.focusCloseChildIds, pinBottom: memorizedItems.pinBottom.focusCloseChildIds, searchItem: searchItem, ref: mergeRefs(ref, listRef), onFocus: handleOnFocus, onKeyDown: mergedHandlerKeyDown, tabIndex: tabIndex, search: search, nested: false })), _jsx(HiddenTabButton, { ref: btnRef, listRef: listRef, tabIndex: tabIndex })] }) }) }) })) }));
 });

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

@@ -1,23 +1,5 @@
-import { RefObject } from 'react';
-export declare const ListPrivate: import("react").ForwardRefExoticComponent<{
-    'data-test-id'?: string | undefined;
-} & import("react").AriaAttributes & {
-    items: import("../../Items").ItemProps[];
-    pinTop?: import("../../Items").ItemProps[] | undefined;
-    pinBottom?: import("../../Items").ItemProps[] | undefined;
-    footer?: import("react").ReactNode;
-    footerActiveElementsRefs?: RefObject<HTMLElement>[] | undefined;
-    search?: import("../../..").SearchState | undefined;
-    tabIndex?: number | undefined;
-    collapse?: {
-        value?: (string | number)[] | undefined;
-        onChange?(value: (string | number)[]): void;
-        defaultValue?: (string | number)[] | undefined;
-    } | undefined;
-    className?: string | undefined;
-    onKeyDown?(e: import("react").KeyboardEvent<HTMLElement>): void;
-    loading?: boolean | undefined;
-} & import("../contexts").SelectionState & import("../contexts").ListContextType & import("../../../types").ScrollProps & import("../types").EmptyState & import("../contexts").ListContextPrivateType & {
+/// <reference types="react" />
+export declare const ListPrivate: import("react").ForwardRefExoticComponent<Omit<import("../types").ListProps, "items" | "pinTop" | "pinBottom"> & {
     nested?: boolean | undefined;
     active?: boolean | undefined;
     tabIndex?: number | undefined;
@@ -25,4 +7,8 @@ export declare const ListPrivate: import("react").ForwardRefExoticComponent<{
     onBlur?(e: import("react").FocusEvent<HTMLElement, Element>): void;
     onKeyDown?(e: import("react").KeyboardEvent<HTMLElement>): void;
     limitedScrollHeight?: boolean | undefined;
+    searchItem?: import("../../Items").FlattenBaseItem | undefined;
+    pinTop?: import("../../Items").ItemId[] | undefined;
+    items: import("../../Items").ItemId[];
+    pinBottom?: import("../../Items").ItemId[] | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/dist/components/Lists/ListPrivate/ListPrivate.js

@@ -17,25 +17,26 @@ import { Scroll } from '@snack-uikit/scroll';
 import { extractSupportProps } from '@snack-uikit/utils';
 import { ListEmptyState, useEmptyState } from '../../../helperComponents';
 import { PinBottomGroupItem, PinTopGroupItem, SearchItem, useRenderItems } from '../../Items';
-import { ListContextProvider } from '../contexts';
+import { useNewListContext } from '../contexts';
 import commonStyles from '../styles.module.css';
 import styles from './styles.module.css';
 export const ListPrivate = forwardRef((_a, ref) => {
-    var { items, pinTop, pinBottom, onKeyDown, onBlur, onFocus, tabIndex, active, scroll, nested, search, scrollRef, scrollContainerRef, footer, loading, size = 's', marker = true, limitedScrollHeight, className, parent = 'list', noDataState, noResultsState, errorDataState, dataError, dataFiltered } = _a, props = __rest(_a, ["items", "pinTop", "pinBottom", "onKeyDown", "onBlur", "onFocus", "tabIndex", "active", "scroll", "nested", "search", "scrollRef", "scrollContainerRef", "footer", "loading", "size", "marker", "limitedScrollHeight", "className", "parent", "noDataState", "noResultsState", "errorDataState", "dataError", "dataFiltered"]);
+    var { items, pinTop, pinBottom, onKeyDown, onBlur, onFocus, tabIndex, active, scroll, nested, search, searchItem, scrollRef, scrollContainerRef, footer, loading, limitedScrollHeight, className, noDataState, noResultsState, errorDataState, dataError, dataFiltered } = _a, props = __rest(_a, ["items", "pinTop", "pinBottom", "onKeyDown", "onBlur", "onFocus", "tabIndex", "active", "scroll", "nested", "search", "searchItem", "scrollRef", "scrollContainerRef", "footer", "loading", "limitedScrollHeight", "className", "noDataState", "noResultsState", "errorDataState", "dataError", "dataFiltered"]);
+    const { size = 's' } = useNewListContext();
     const itemsJSX = useRenderItems(items);
-    const itemsPinTopJSX = useRenderItems(pinTop !== null && pinTop !== void 0 ? pinTop : []);
-    const itemsPinBottomJSX = useRenderItems(pinBottom !== null && pinBottom !== void 0 ? pinBottom : []);
+    const itemsPinTopJSX = useRenderItems(pinTop);
+    const itemsPinBottomJSX = useRenderItems(pinBottom);
     const emptyStates = useEmptyState({ noDataState, noResultsState, errorDataState });
     const hasNoItems = items.length === 0;
     const loadingJSX = useMemo(() => loading && (_jsx("div", { role: 'spinbutton', tabIndex: -1, className: styles.loader, "data-size": size, "data-no-items": hasNoItems || undefined, "data-test-id": 'list__loader', children: _jsx(Spinner, { size: size === 'l' ? 's' : 'xs' }) })), [hasNoItems, loading, size]);
-    const content = useMemo(() => (_jsxs("div", { className: styles.content, children: [itemsJSX, loadingJSX, _jsx(ListEmptyState, { loading: loading, dataError: dataError, emptyStates: emptyStates, itemsLength: items.length, dataFiltered: dataFiltered !== null && dataFiltered !== void 0 ? dataFiltered : Boolean(search === null || search === void 0 ? void 0 : search.value) })] })), [dataError, dataFiltered, emptyStates, items.length, itemsJSX, loading, loadingJSX, search === null || search === void 0 ? void 0 : search.value]);
-    const listJSX = (_jsxs("ul", Object.assign({ className: cn(commonStyles.listContainer, className), ref: ref, onKeyDown: onKeyDown, tabIndex: tabIndex, onFocus: !nested ? onFocus : undefined, onBlur: onBlur, "data-active": active || undefined, role: 'menu' }, extractSupportProps(props), { children: [(Number(pinTop === null || pinTop === void 0 ? void 0 : pinTop.length) > 0 || search) && (_jsxs(PinTopGroupItem, { children: [search && _jsx(SearchItem, { search: search }), Number(pinTop === null || pinTop === void 0 ? void 0 : pinTop.length) > 0 && itemsPinTopJSX] })), scroll ? (_jsxs(Scroll, { className: cn({
+    const content = useMemo(() => (_jsxs("div", { className: styles.content, children: [itemsJSX, loadingJSX, _jsx(ListEmptyState, { loading: loading, dataError: dataError, emptyStates: emptyStates, hasNoItems: hasNoItems, dataFiltered: dataFiltered !== null && dataFiltered !== void 0 ? dataFiltered : Boolean(search === null || search === void 0 ? void 0 : search.value) })] })), [dataError, dataFiltered, emptyStates, hasNoItems, itemsJSX, loading, loadingJSX, search === null || search === void 0 ? void 0 : search.value]);
+    const listJSX = (_jsxs("ul", Object.assign({ className: cn(commonStyles.listContainer, className), ref: ref, onKeyDown: onKeyDown, tabIndex: tabIndex, onFocus: onFocus, onBlur: onBlur, "data-active": active || undefined, role: 'menu' }, extractSupportProps(props), { children: [(Number(pinTop === null || pinTop === void 0 ? void 0 : pinTop.length) > 0 || search) && (_jsxs(PinTopGroupItem, { children: [search && _jsx(SearchItem, Object.assign({ search: search }, searchItem)), Number(pinTop === null || pinTop === void 0 ? void 0 : pinTop.length) > 0 && itemsPinTopJSX] })), scroll ? (_jsxs(Scroll, { className: cn({
                     [commonStyles.scrollContainerS]: scroll && limitedScrollHeight && size === 's',
                     [commonStyles.scrollContainerM]: scroll && limitedScrollHeight && size === 'm',
                     [commonStyles.scrollContainerL]: scroll && limitedScrollHeight && size === 'l',
-                }), barHideStrategy: 'never', size: size === 's' ? 's' : 'm', ref: scrollContainerRef, children: [content, _jsx("div", { className: styles.scrollStub, ref: scrollRef })] })) : (_jsx(_Fragment, { children: content })), Number(pinBottom === null || pinBottom === void 0 ? void 0 : pinBottom.length) > 0 && _jsx(PinBottomGroupItem, { children: itemsPinBottomJSX }), footer && _jsx("div", { className: styles.footer, children: footer })] })));
+                }), barHideStrategy: 'never', size: size === 's' ? 's' : 'm', ref: scrollContainerRef, children: [content, _jsx("div", { className: styles.scrollStub, ref: scrollRef })] })) : (_jsx(_Fragment, { children: content })), Number(pinBottom === null || pinBottom === void 0 ? void 0 : pinBottom.length) > 0 && _jsx(PinBottomGroupItem, { children: itemsPinBottomJSX }), footer && (_jsx("div", { className: styles.footer, onFocus: e => e.stopPropagation(), children: footer }))] })));
     if (!nested) {
-        return (_jsx(ListContextProvider, { size: size, marker: marker, parent: parent, children: listJSX }));
+        return listJSX;
     }
     return (_jsx("li", { style: { listStyleType: 'none' }, role: 'menuitem', children: listJSX }));
 });

package/dist/components/Lists/ListPrivate/styles.module.css

@@ -46,5 +46,6 @@
 }
 
 .content{
+  overflow:hidden;
   flex-grow:1;
 }

package/dist/components/Lists/contexts/CollapseProvider.d.ts

@@ -1,6 +1,18 @@
 /// <reference types="react" />
-export type CollapseContextType = {
+import { ItemId } from '../../Items';
+export type CollapseLevelContextType = {
     level?: number;
 };
+export declare const CollapseLevelContext: import("react").Context<CollapseLevelContextType>;
+export declare const useCollapseLevelContext: () => CollapseLevelContextType;
+export type CollapseContextType = {
+    openCollapseItems?: ItemId[];
+    toggleOpenCollapseItem?(id: ItemId): void;
+};
 export declare const CollapseContext: import("react").Context<CollapseContextType>;
 export declare const useCollapseContext: () => CollapseContextType;
+export type CollapseState = {
+    value?: ItemId[];
+    onChange?(value?: ItemId[]): void;
+    defaultValue?: ItemId[];
+};

package/dist/components/Lists/contexts/CollapseProvider.js

@@ -1,3 +1,5 @@
 import { createContext, useContext } from 'react';
+export const CollapseLevelContext = createContext({});
+export const useCollapseLevelContext = () => useContext(CollapseLevelContext);
 export const CollapseContext = createContext({});
 export const useCollapseContext = () => useContext(CollapseContext);