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

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

@@ -1,20 +1,25 @@
 import { RefObject } from 'react';
-import { ItemProps } from './types';
-export declare function useRenderItems(items: ItemProps[]): import("react/jsx-runtime").JSX.Element[];
-type UseItemsWithIdsProps = {
+import { AnyType, FlattenBaseItem, FlattenItem, ItemId } from './types';
+type UseRenderItemsProps<Meta = AnyType> = {
+    items: ItemId[];
+    flattenedItems: Record<string, FlattenItem<Meta>>;
+};
+export declare function useRenderItems<Meta>(props: UseRenderItemsProps<Meta> | undefined): null[] | import("react/jsx-runtime").JSX.Element[];
+type UseCreateBaseItemsProps = {
     search?: boolean;
     footerActiveElementsRefs?: RefObject<HTMLElement>[];
 };
-export declare function useItemsWithIds({ search, footerActiveElementsRefs }: UseItemsWithIdsProps): {
-    search: ItemProps[];
-    footerRefs: ItemProps[];
+export declare function useCreateBaseItems<Meta>({ footerActiveElementsRefs }: UseCreateBaseItemsProps): {
+    searchItem: FlattenBaseItem<Meta>;
+    footerItems: FlattenBaseItem<Meta>[];
 };
 type UseGroupItemSelectionProps = {
-    items: ItemProps[];
-    id?: string | number;
+    allChildIds: ItemId[];
+    items: ItemId[];
+    id: ItemId;
     disabled?: boolean;
 };
-export declare function useGroupItemSelection({ id, items, disabled }: UseGroupItemSelectionProps): {
+export declare function useGroupItemSelection({ id, disabled, allChildIds }: UseGroupItemSelectionProps): {
     checked: boolean | undefined;
     isIndeterminate: boolean;
     handleOnSelect: () => void;

package/dist/components/Items/hooks.js

@@ -1,41 +1,57 @@
 import { createElement as _createElement } from "react";
 import { createRef, useEffect, useMemo } from 'react';
-import { extractAllChildIds, extractChildIds } from '../../utils';
-import { useSelectionContext } from '../Lists/contexts';
+import { useNewListContext, useSelectionContext } from '../Lists/contexts';
 import { AccordionItem } from './AccordionItem';
 import { BaseItem } from './BaseItem';
 import { GroupItem } from './GroupItem';
 import { NextListItem } from './NextListItem';
-import { addItemsIds, isAccordionItemProps, isGroupItemProps, isNextListItemProps } from './utils';
-export function useRenderItems(items) {
-    return useMemo(() => items.map(item => {
-        if (isGroupItemProps(item)) {
-            return _createElement(GroupItem, Object.assign({}, item, { key: item.label }));
+import { isAccordionItemProps, isBaseItemProps, isGroupItemProps, isNextListItemProps } from './utils';
+export function useRenderItems(props) {
+    return useMemo(() => {
+        if (!props) {
+            return [null];
         }
-        if (isAccordionItemProps(item)) {
-            return _createElement(AccordionItem, Object.assign({}, item, { key: item.key }));
-        }
-        if (isNextListItemProps(item)) {
-            return _createElement(NextListItem, Object.assign({}, item, { key: item.key }));
-        }
-        return _createElement(BaseItem, Object.assign({}, item, { key: item.key }));
-    }), [items]);
+        const { items, flattenedItems } = props;
+        return items.map(id => {
+            const item = flattenedItems[id];
+            if (isGroupItemProps(item)) {
+                return _createElement(GroupItem, Object.assign({}, item, { key: item.label }));
+            }
+            if (isAccordionItemProps(item)) {
+                return _createElement(AccordionItem, Object.assign({}, item, { key: item.key }));
+            }
+            if (isNextListItemProps(item)) {
+                return _createElement(NextListItem, Object.assign({}, item, { key: item.key }));
+            }
+            return _createElement(BaseItem, Object.assign({}, item, { key: item.key }));
+        });
+    }, [props]);
 }
-export function useItemsWithIds({ search, footerActiveElementsRefs }) {
-    return useMemo(() => ({
-        search: addItemsIds(search ? [{ itemRef: createRef() }] : [], 'search'),
-        footerRefs: addItemsIds(footerActiveElementsRefs
-            ? footerActiveElementsRefs === null || footerActiveElementsRefs === void 0 ? void 0 : footerActiveElementsRefs.map(ref => ({ itemRef: ref }))
-            : [], 'footer'),
-    }), [footerActiveElementsRefs, search]);
+export function useCreateBaseItems({ footerActiveElementsRefs }) {
+    return useMemo(() => {
+        var _a;
+        return ({
+            searchItem: {
+                itemRef: createRef(),
+                id: '~search',
+                parentId: '~main',
+            },
+            footerItems: (_a = footerActiveElementsRefs === null || footerActiveElementsRefs === void 0 ? void 0 : footerActiveElementsRefs.map((itemRef, idx) => ({
+                id: `~footer__${idx}`,
+                itemRef,
+                parentId: '~main',
+            }))) !== null && _a !== void 0 ? _a : [],
+        });
+    }, [footerActiveElementsRefs]);
 }
-export function useGroupItemSelection({ id, items, disabled }) {
+export function useGroupItemSelection({ id, disabled, allChildIds }) {
     const { value, setValue, isSelectionMultiple } = useSelectionContext();
-    const { childIds, allChildIds } = useMemo(() => ({ childIds: extractChildIds({ items }), allChildIds: extractAllChildIds({ items }) }), [items]);
+    const { flattenedItems } = useNewListContext();
+    const baseChildIds = useMemo(() => allChildIds.filter(itemId => isBaseItemProps(flattenedItems[itemId])), [allChildIds, flattenedItems]);
     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;
+        ? baseChildIds.some(childId => value === null || value === void 0 ? void 0 : value.includes(childId))
+        : baseChildIds.includes(value !== null && value !== void 0 ? value : '');
+    const checked = isSelectionMultiple ? baseChildIds.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))) {
@@ -48,14 +64,14 @@ export function useGroupItemSelection({ id, items, disabled }) {
     }, [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)));
+            setValue === null || setValue === void 0 ? void 0 : setValue((value) => (value !== null && value !== void 0 ? value : []).filter(itemId => itemId !== id && !baseChildIds.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])));
+            setValue === null || setValue === void 0 ? void 0 : setValue((value) => Array.from(new Set([...(value !== null && value !== void 0 ? value : []), ...baseChildIds, 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 : '']));
+        setValue === null || setValue === void 0 ? void 0 : setValue((value) => (value !== null && value !== void 0 ? value : []).concat([...baseChildIds, id !== null && id !== void 0 ? id : '']));
     };
     return { checked, isIndeterminate, handleOnSelect };
 }

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

@@ -1,23 +1,18 @@
 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 { ItemContentProps, 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<{
+export type AnyType = any;
+export type ContentRenderProps<Meta = AnyType> = {
+    label: string | number;
+    meta?: Meta;
+};
+export type ItemId = string | number;
+export type BaseItemProps<Meta = AnyType> = WithSupportProps<{
     /**
      * Слот до основного контента
      * @type ReactElement
@@ -28,8 +23,10 @@ export type BaseItemProps = WithSupportProps<{
      * @type ReactElement
      */
     afterContent?: ReactNode;
-    /** Основной контент айтема */
-    content: ItemContentProps;
+    /**
+     * Основной контент айтема
+     */
+    content?: ItemContentProps | ReactNode;
     /** Колбек обработки клика */
     onClick?(e: MouseEvent<HTMLElement>): void;
     /** Колбек обработки нажатия кнопки мыши */
@@ -41,7 +38,7 @@ export type BaseItemProps = WithSupportProps<{
     /** Колбек обработки блюра */
     onBlur?(e: FocusEvent<HTMLElement>): void;
     /** Уникальный идентификатор */
-    id?: string | number;
+    id?: ItemId;
     /** Флаг неактивности элемента */
     disabled?: boolean;
     itemRef?: RefObject<HTMLElement>;
@@ -58,22 +55,40 @@ export type BaseItemProps = WithSupportProps<{
     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[];
+}> & {
+    /**
+     * Дополнительные поля для айтема, которые можно использовать для contentRender функции или поиска
+     */
+    meta?: Meta;
+};
+type BaseItemsWithoutNonGroupProps<Meta = AnyType> = Omit<BaseItemProps<Meta>, 'switch' | 'inactive'>;
+export type ItemProps<Meta = AnyType> = BaseItemProps<Meta> | AccordionItemProps<Meta> | NextListItemProps<Meta> | GroupItemProps<Meta>;
+export type AccordionItemProps<Meta = AnyType> = BaseItemsWithoutNonGroupProps<Meta> & {
+    items: ItemProps<Meta>[];
     type: 'collapse';
 };
-export type NextListItemProps = BaseItemsWithoutNonGroupProps & {
-    items: ItemProps[];
+export type NextListItemProps<Meta = AnyType> = BaseItemsWithoutNonGroupProps<Meta> & {
+    items: ItemProps<Meta>[];
     type: 'next-list';
     placement?: 'right-start' | 'left-start' | 'left' | 'right' | 'left-end' | 'right-end';
     search?: SearchState;
-    onSublistOpenChanged?(open: boolean, id?: string | number): void;
 } & ScrollProps;
-export type GroupItemProps = Omit<SeparatorProps, 'size'> & {
-    items: ItemProps[];
+export type GroupItemProps<Meta = AnyType> = Omit<SeparatorProps, 'size'> & {
+    items: ItemProps<Meta>[];
     id?: string | number;
+    meta?: undefined;
+};
+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>;
+type CommonFlattenProps = {
+    items: ItemId[];
+    allChildIds: ItemId[];
+};
+export type FlattenBaseItem<Meta = AnyType> = Flatten<BaseItemProps<Meta>, 'id' | 'itemRef'>;
+export type FlattenNextListItem<Meta = AnyType> = Flatten<Omit<NextListItemProps<Meta>, 'items'>, 'id' | 'itemRef'> & CommonFlattenProps;
+export type FlattenGroupListItem<Meta = AnyType> = Flatten<Omit<GroupItemProps<Meta>, 'items'>, 'id'> & CommonFlattenProps;
+export type FlattenAccordionItem<Meta = AnyType> = Flatten<Omit<AccordionItemProps<Meta>, 'items'>, 'id' | 'itemRef'> & CommonFlattenProps;
+export type FlattenItem<Meta = AnyType> = (FlattenBaseItem<Meta> | FlattenNextListItem<Meta> | FlattenGroupListItem<Meta> | FlattenAccordionItem<Meta>) & {
+    parentId?: ItemId;
 };
 export {};

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

@@ -1,17 +1,7 @@
-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[];
-};
-export declare function addItemsIds(itemsProp: ItemProps[], prefix?: string | number): ItemProps[];
+import { ItemContentProps } from '../../helperComponents';
+import { AccordionItemProps, AnyType, BaseItemProps, GroupItemProps, NextListItemProps } from './types';
+export declare function isBaseItemProps<Meta, ReturnType = BaseItemProps<Meta>>(item: AnyType): item is ReturnType;
+export declare function isAccordionItemProps<Meta, ReturnType = AccordionItemProps<Meta>>(item: AnyType): item is ReturnType;
+export declare function isNextListItemProps<Meta, ReturnType = NextListItemProps<Meta>>(item: AnyType): item is ReturnType;
+export declare function isGroupItemProps<Meta, ReturnType = GroupItemProps<Meta>>(item: AnyType): item is ReturnType;
+export declare function isContentItemProps(item: AnyType): item is ItemContentProps;

package/dist/components/Items/utils.js

@@ -1,43 +1,15 @@
-import { createRef } from 'react';
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function isBaseItemProps(item) {
-    return 'content' in item;
+    return !('items' 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 addItemsIds(itemsProp, prefix) {
-    return itemsProp.map((item, idx) => {
-        var _a;
-        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) });
-        }
-        if (isAccordionItemProps(item) || isNextListItemProps(item)) {
-            return Object.assign(Object.assign({ key: autoId }, item), { id: itemId, items: addItemsIds(item.items, itemId), itemRef: item.itemRef || createRef() });
-        }
-        return Object.assign(Object.assign({ key: autoId }, item), { id: itemId, itemRef: item.itemRef || createRef() });
-    });
+export function isContentItemProps(item) {
+    return typeof item === 'object' && item['option'] !== undefined;
 }

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

@@ -1,2 +1,3 @@
+import { AnyType } from '../../Items';
 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<Meta = AnyType>({ 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<Meta>): 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 { 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 } from '../../../utils';
+import { 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 flattenedItems = Object.assign(Object.assign(Object.assign({}, pinTop.flattenedItems), pinBottom.flattenedItems), items.flattenedItems);
+        [...footerItems, searchItem].forEach(item => {
+            flattenedItems[item.id] = item;
+        });
+        return { items, pinTop, pinBottom, flattenedItems };
+    }, [itemsProp, pinTopProp, pinBottomProp, searchItem, footerItems]), { flattenedItems } = _b, memorizedItems = __rest(_b, ["flattenedItems"]);
+    const { itemRefs, ids, expandedIds } = useMemo(() => {
+        const { pinTop, items, pinBottom } = memorizedItems;
+        let ids = [];
+        let expandedIds = [];
+        let itemRefs = [];
+        if (hasSearch) {
+            ids.push(searchItem.id);
+            itemRefs.push(searchItem.itemRef);
+        }
+        [pinTop, items, pinBottom].forEach(({ flattenedItems, items }) => {
+            const activeItems = extractActiveItems({ flattenedItems, items, openCollapseItems });
+            ids = ids.concat(activeItems.ids);
+            expandedIds = expandedIds.concat(activeItems.expandedIds);
+            itemRefs = itemRefs.concat(activeItems.itemRefs);
+        });
+        footerItems.forEach(footerItem => {
+            ids.push(footerItem.id);
+            itemRefs.push(footerItem.itemRef);
         });
-        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,
+            itemRefs,
+            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, searchItem.itemRef]);
     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,
+        itemRefs,
+        expandedIds,
+        flattenedItems,
+    });
+    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,16 @@ 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') {
+            // e.preventDefault();
+            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 +112,24 @@ 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 })) }) })));
+    // const handleOnFocus = e => {
+    //   // resetActiveItemId();
+    // };
+    return (_jsx(NewListContextProvider, { flattenedItems: flattenedItems, 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, memorizedItems, { onKeyDown: handleListKeyDown, tabIndex: 0, ref: listRef, search: search, 
+                                // onFocus={handleOnFocus}
+                                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

@@ -1,20 +1,16 @@
-import { KeyboardEvent } from 'react';
+import { KeyboardEvent, RefObject } 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").ItemProps<unknown>[];
+    pinTop?: import("../../Items").ItemProps<unknown>[] | undefined;
+    pinBottom?: import("../../Items").ItemProps<unknown>[] | undefined;
     footer?: import("react").ReactNode;
-    footerActiveElementsRefs?: import("react").RefObject<HTMLElement>[] | undefined;
+    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;
+    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<unknown> & import("../../../types").ScrollProps & import("../types").EmptyState & import("react").RefAttributes<HTMLElement>>;