@snack-uikit/list 0.11.0 → 0.11.1

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

@@ -1,23 +1,12 @@
 import { FocusEvent, KeyboardEvent, MouseEvent, ReactNode, RefObject } from 'react';
 import { TruncateStringProps } from '@snack-uikit/truncate-string';
 import { WithSupportProps } from '@snack-uikit/utils';
-import { SeparatorProps } from '../../helperComponents';
-import { ScrollProps, SearchState } from '../../types';
-export type ItemContentProps = {
-    option: string;
-    caption?: string;
-    description?: string;
-    truncate?: {
-        option?: number;
-        description?: number;
-        variant?: TruncateStringProps['variant'];
-    };
-};
-export type BaseItemPrivateProps = {
-    expandIcon?: ReactNode;
-    open?: boolean;
-};
-export type BaseItemProps = WithSupportProps<{
+import { ItemContentProps } from '../../helperComponents';
+import { ScrollProps } from '../../types';
+export type AnyType = any;
+export type ItemId = string | number;
+type ItemContent = ItemContentProps;
+export type BaseItem = WithSupportProps<{
     /**
      * Слот до основного контента
      * @type ReactElement
@@ -28,8 +17,10 @@ export type BaseItemProps = WithSupportProps<{
      * @type ReactElement
      */
     afterContent?: ReactNode;
-    /** Основной контент айтема */
-    content: ItemContentProps;
+    /**
+     * Основной контент айтема
+     */
+    content?: ItemContent | ReactNode;
     /** Колбек обработки клика */
     onClick?(e: MouseEvent<HTMLElement>): void;
     /** Колбек обработки нажатия кнопки мыши */
@@ -41,7 +32,7 @@ export type BaseItemProps = WithSupportProps<{
     /** Колбек обработки блюра */
     onBlur?(e: FocusEvent<HTMLElement>): void;
     /** Уникальный идентификатор */
-    id?: string | number;
+    id?: ItemId;
     /** Флаг неактивности элемента */
     disabled?: boolean;
     itemRef?: RefObject<HTMLElement>;
@@ -56,25 +47,68 @@ export type BaseItemProps = WithSupportProps<{
      * Флаг отображения состояния выбранного элемента через switch
      */
     switch?: boolean;
-    key?: string | number;
     itemWrapRender?(item: ReactNode): ReactNode;
 }>;
-type BaseItemsWithoutNonGroupProps = Omit<BaseItemProps, 'switch' | 'inactive'>;
-export type ItemProps = BaseItemProps | AccordionItemProps | NextListItemProps | GroupItemProps;
-export type AccordionItemProps = BaseItemsWithoutNonGroupProps & {
-    items: ItemProps[];
+type BaseItemWithoutNonGroup = Omit<BaseItem, 'switch' | 'inactive'>;
+export type Item = BaseItem | AccordionItem | NextListItem | GroupItem | GroupSelectItem;
+export type AccordionItem = BaseItemWithoutNonGroup & {
+    items: Item[];
     type: 'collapse';
 };
-export type NextListItemProps = BaseItemsWithoutNonGroupProps & {
-    items: ItemProps[];
+export type NextListItem = BaseItemWithoutNonGroup & ScrollProps & {
+    items: Item[];
     type: 'next-list';
-    placement?: 'right-start' | 'left-start' | 'left' | 'right' | 'left-end' | 'right-end';
-    search?: SearchState;
-    onSublistOpenChanged?(open: boolean, id?: string | number): void;
+    onSublistOpenChanged?(open: boolean, id?: ItemId): void;
     loading?: boolean;
-} & ScrollProps;
-export type GroupItemProps = Omit<SeparatorProps, 'size'> & {
-    items: ItemProps[];
-    id?: string | number;
+    dataError?: boolean;
+    dataFiltered?: boolean;
+    placement?: 'right-start' | 'left-start' | 'left' | 'right' | 'left-end' | 'right-end';
+};
+type CommonGroupItem = {
+    label?: string;
+    truncate?: {
+        variant?: TruncateStringProps['variant'];
+    };
+    mode?: 'primary' | 'secondary';
+    divider?: boolean;
+};
+export type GroupItem = CommonGroupItem & {
+    items: Item[];
+    type: 'group';
+};
+export type GroupSelectItem = CommonGroupItem & {
+    items: Item[];
+    type: 'group-select';
+    id?: ItemId;
+    itemRef?: RefObject<HTMLElement>;
+};
+type RequiredFields<T, K extends keyof T> = Required<Pick<T, K>> & Omit<T, K>;
+export type Flatten<T, K extends keyof T> = RequiredFields<T, K>;
+export type CommonFlattenProps = {
+    items: ItemId[];
+    allChildIds: ItemId[];
+};
+export type FlattenBaseItem = Flatten<BaseItem, 'id'>;
+export type FlattenNextListItem = Flatten<Omit<NextListItem, 'items'>, 'id'>;
+export type FlattenGroupListItem = Omit<GroupItem, 'items'> & {
+    id: ItemId;
 };
+export type FlattenGroupSelectListItem = Flatten<Omit<GroupSelectItem, 'items'>, 'id'>;
+export type FlattenAccordionItem = Flatten<Omit<AccordionItem, 'items'>, 'id'>;
+export type FlattenItem = FlattenBaseItem | ((FlattenNextListItem | FlattenGroupListItem | FlattenAccordionItem | FlattenGroupSelectListItem) & CommonFlattenProps);
+export type FocusFlattenItem = {
+    key: ItemId;
+    id: ItemId;
+    originalId: ItemId;
+    parentId?: ItemId;
+    itemRef?: RefObject<HTMLElement>;
+    type?: 'next-list' | 'collapse' | 'group' | 'group-select';
+    disabled?: boolean;
+} & CommonFlattenProps;
+export type ItemProps = Item;
+export type BaseItemProps = BaseItem;
+export type GroupItemProps = GroupItem;
+export type NextListItemProps = NextListItem;
+export type AccordionItemProps = AccordionItem;
+export type GroupSelectItemProps = GroupSelectItem;
 export {};

package/dist/components/Items/utils.d.ts

@@ -1,17 +1,35 @@
-import { AccordionItemProps, BaseItemProps, GroupItemProps, ItemProps, NextListItemProps } from './types';
-export declare function isBaseItemProps(item: any): item is BaseItemProps;
-export declare function isAccordionItemProps(item: any): item is AccordionItemProps;
-export declare function isNextListItemProps(item: any): item is NextListItemProps;
-export declare function isGroupItemProps(item: any): item is GroupItemProps;
-export declare function getSlicedItems({ items, hasSearch, pinTop, pinBottom, footerRefs, }: {
-    items: ItemProps[];
-    hasSearch: boolean;
-    footerRefs: ItemProps[];
-    pinTop?: ItemProps[];
-    pinBottom?: ItemProps[];
-}): {
-    pinTop: ItemProps[];
-    items: ItemProps[];
-    pinBottom: ItemProps[];
+import { ItemContentProps } from '../../helperComponents';
+import { AccordionItem, AnyType, BaseItem, FlattenItem, FocusFlattenItem, GroupItem, GroupSelectItem, Item, ItemId, NextListItem } from './types';
+export declare function isBaseItem<ReturnType = BaseItem>(item: AnyType): item is ReturnType;
+export declare function isAccordionItem<ReturnType = AccordionItem>(item: AnyType): item is ReturnType;
+export declare function isNextListItem<ReturnType = NextListItem>(item: AnyType): item is ReturnType;
+export declare function isGroupItem<ReturnType = GroupItem>(item: AnyType): item is ReturnType;
+export declare function isGroupSelectItem<ReturnType = GroupSelectItem>(item: AnyType): item is ReturnType;
+export declare function isContentItem(item: AnyType): item is ItemContentProps;
+export declare const isBaseItemProps: typeof isBaseItem;
+export declare const isAccordionItemProps: typeof isAccordionItem;
+export declare const isNextListItemProps: typeof isNextListItem;
+export declare const isGroupItemProps: typeof isGroupItem;
+type KindFlattenItemsProps = {
+    items: Item[];
+    prefix?: ItemId;
+    parentId?: ItemId;
 };
-export declare function addItemsIds(itemsProp: ItemProps[], prefix?: string | number): ItemProps[];
+export declare function kindFlattenItems({ items, prefix, parentId }: KindFlattenItemsProps): {
+    focusCloseChildIds: ItemId[];
+    allChildIds: ItemId[];
+    flattenItems: Record<string, FlattenItem>;
+    focusFlattenItems: Record<string, FocusFlattenItem>;
+};
+type ExtractActiveItemsProps = {
+    focusFlattenItems: Record<string, FocusFlattenItem>;
+    focusCloseChildIds: ItemId[];
+    openCollapseItems: ItemId[];
+    isSelectionMultiple?: boolean;
+};
+type ExtractActiveItemsReturnType = {
+    ids: ItemId[];
+    expandedIds: ItemId[];
+};
+export declare function extractActiveItems({ focusFlattenItems, focusCloseChildIds, openCollapseItems, isSelectionMultiple, }: ExtractActiveItemsProps): ExtractActiveItemsReturnType;
+export {};

package/dist/components/Items/utils.js

@@ -1,43 +1,141 @@
+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, isSelectionMultiple, }) {
+    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) {
+                if (child.type === 'group-select') {
+                    if (isSelectionMultiple) {
+                        ids.push(child.id);
+                    }
+                    internalFn(child.items);
+                    return;
+                }
+                ids.push(child.id);
+                if (child.type) {
+                    expandedIds.push(id);
+                    if (openCollapseItems.includes(child.originalId)) {
+                        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,77 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
+import cn from 'classnames';
+import mergeRefs from 'merge-refs';
 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,
+                isSelectionMultiple: (selection === null || selection === void 0 ? void 0 : selection.mode) === 'multiple',
+            });
+            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, selection === null || selection === void 0 ? void 0 : selection.mode]);
     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: 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 +89,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 +111,18 @@ 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, { 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, 
+                        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                        // @ts-expect-error
+                        triggerRef: triggerElemRefProp ? mergeRefs(triggerElemRef, triggerElemRefProp) : 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>>;