@snack-uikit/list 0.11.1-preview-5d3667ec.0 → 0.11.1

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

@@ -12,75 +12,82 @@ 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,
+                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 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);

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

@@ -0,0 +1,9 @@
+import { KeyboardEvent } from 'react';
+import { ItemId } from '../../Items';
+export type FocusListContextType = {
+    activeItemId?: ItemId;
+    forceUpdateActiveItemId?(itemId: ItemId): void;
+    handleListKeyDownFactory: (ids: ItemId[], expandedIds: ItemId[]) => (e: KeyboardEvent<HTMLElement>) => void;
+};
+export declare const FocusListContext: import("react").Context<FocusListContextType>;
+export declare const useFocusListContext: () => FocusListContextType;

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

@@ -0,0 +1,5 @@
+import { createContext, useContext } from 'react';
+export const FocusListContext = createContext({
+    handleListKeyDownFactory: () => () => { },
+});
+export const useFocusListContext = () => useContext(FocusListContext);

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

@@ -0,0 +1,32 @@
+import { ReactNode } from 'react';
+import { ItemContentProps } from '../../../helperComponents';
+import { FlattenItem, FocusFlattenItem, ItemId } from '../../Items';
+type ContentRenderProps = {
+    id?: ItemId;
+    content?: ItemContentProps | ReactNode;
+};
+export type PublicListContextType = {
+    /** Размер списка */
+    size?: 's' | 'm' | 'l';
+    /** Отображать ли маркер у выбранного жлемента списка */
+    marker?: boolean;
+    /**
+     * Рендер функция основного контента айтема
+     */
+    contentRender?(props: ContentRenderProps): ReactNode;
+};
+export type PrivateListContextType = {
+    flattenItems: Record<string, FlattenItem>;
+    focusFlattenItems: Record<string, FocusFlattenItem>;
+};
+type Child = {
+    children: ReactNode;
+};
+type ListContextType = PublicListContextType & PrivateListContextType;
+export declare const ListContext: import("react").Context<{
+    flattenItems: {};
+    focusFlattenItems: {};
+}>;
+export declare function useNewListContext(): ListContextType;
+export declare function NewListContextProvider({ children, ...props }: ListContextType & Child): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Lists/contexts/{ListProvider.js → NewListProvider.js}

@@ -11,12 +11,17 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext } from 'react';
-export const ListContext = createContext({});
-export const useListContext = () => useContext(ListContext);
-function extractListProps({ size, marker, parent }) {
-    return { size, marker, parent };
+export const ListContext = createContext({
+    flattenItems: {},
+    focusFlattenItems: {},
+});
+export function useNewListContext() {
+    return useContext(ListContext);
 }
-export function ListContextProvider(_a) {
+function extractListProps({ size, marker, flattenItems, focusFlattenItems, contentRender, }) {
+    return { size, marker, parent, contentRender, flattenItems, focusFlattenItems };
+}
+export function NewListContextProvider(_a) {
     var { children } = _a, props = __rest(_a, ["children"]);
     return _jsx(ListContext.Provider, { value: extractListProps(props), children: children });
 }

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

@@ -1,17 +1,19 @@
 import { ReactNode } from 'react';
-export type SelectionSingleValueType = string | number | undefined;
+import { AnyType, ItemId } from '../../Items';
+export type OnChangeHandler<T = AnyType> = (value: T) => void;
+export type SelectionSingleValueType = ItemId;
 export type SelectionSingleState = {
     /** Начальное состояние */
-    defaultValue?: SelectionSingleValueType;
+    defaultValue?: ItemId;
     /** Controlled состояние */
-    value?: SelectionSingleValueType;
+    value?: ItemId;
     /** Controlled обработчик измения состояния */
-    onChange?(value: any): void;
+    onChange?: OnChangeHandler;
     /** Режим выбора */
     mode: 'single';
 };
 export type SelectionSingleProps = {
-    setValue?(value: any): void;
+    setValue?(value: AnyType): void;
     /** Режим выбора single */
     isSelectionSingle: true;
     /** Режим выбора multi */
@@ -19,23 +21,23 @@ export type SelectionSingleProps = {
 } & SelectionSingleState;
 export type SelectionMultipleState = {
     /** Начальное состояние */
-    defaultValue?: SelectionSingleValueType[];
+    defaultValue?: ItemId[];
     /** Controlled состояние */
-    value?: SelectionSingleValueType[];
+    value?: ItemId[];
     /** Controlled обработчик измения состояния */
-    onChange?(value: any): void;
+    onChange?: OnChangeHandler;
     /** Режим выбора */
     mode: 'multiple';
 };
 export type SelectionMultipleProps = {
-    setValue?(value: any): void;
+    setValue?(value: AnyType): void;
     /** Режим выбора single */
     isSelectionSingle: false;
     /** Режим выбора multi */
     isSelectionMultiple: true;
 } & SelectionMultipleState;
 type SelectionNoneProps = {
-    mode?: undefined;
+    mode?: 'none';
     value?: undefined;
     onChange?: undefined;
     setValue?: undefined;
@@ -43,18 +45,26 @@ type SelectionNoneProps = {
     isSelectionSingle?: undefined;
     isSelectionMultiple?: undefined;
 };
-type SelectionProviderProps = SelectionSingleProps | SelectionMultipleProps | SelectionNoneProps;
 type SelectionContextType = Omit<SelectionNoneProps, 'defaultValue'> | Omit<SelectionSingleProps, 'defaultValue'> | Omit<SelectionMultipleProps, 'defaultValue'>;
 export type SelectionState = {
     selection?: SelectionSingleState | SelectionMultipleState;
 };
 export declare const SelectionContext: import("react").Context<SelectionContextType>;
-export declare function isSelectionMultipleProps(props: any): props is SelectionMultipleProps;
-export declare function isSelectionSingleProps(props: any): props is SelectionSingleProps;
+export declare function isSelectionMultipleProps(props: AnyType): props is SelectionMultipleProps;
+export declare function isSelectionSingleProps(props: AnyType): props is SelectionSingleProps;
 type Child = {
     children: ReactNode;
 };
+type SelectionProviderProps = {
+    /** Начальное состояние */
+    defaultValue?: AnyType;
+    /** Controlled состояние */
+    value?: AnyType;
+    /** Controlled обработчик измения состояния */
+    onChange?: OnChangeHandler;
+    /** Режим выбора */
+    mode?: 'multiple' | 'single' | 'none';
+};
 export declare function SelectionProvider({ children, ...props }: SelectionProviderProps & Child): import("react/jsx-runtime").JSX.Element;
-export declare const useSelectionContext: () => SelectionContextType;
-export declare function extractSelectionProps<T extends SelectionState>({ selection }: T): SelectionProviderProps;
+export declare function useSelectionContext(): SelectionContextType;
 export {};

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

@@ -11,24 +11,28 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useCallback, useContext } from 'react';
-import { useUncontrolledProp } from 'uncontrollable';
+import { useValueControl } from '@snack-uikit/utils';
 export const SelectionContext = createContext({
     value: undefined,
     onChange: undefined,
     mode: undefined,
 });
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function isSelectionMultipleProps(props) {
     return 'mode' in props && props['mode'] === 'multiple';
 }
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function isSelectionSingleProps(props) {
     return 'mode' in props && props['mode'] === 'single';
 }
+function SelectionNoneProvider({ children }) {
+    return (_jsx(SelectionContext.Provider, { value: {
+            mode: 'none',
+        }, children: children }));
+}
 function SelectionSingleProvider({ value: valueProp, defaultValue, onChange: onChangeProp, children, }) {
-    const [value, setValue] = useUncontrolledProp(valueProp, defaultValue, newValue => {
-        const result = typeof newValue === 'function' ? newValue(value) : newValue;
-        onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(result);
+    const [value, setValue] = useValueControl({
+        value: valueProp,
+        defaultValue,
+        onChange: onChangeProp,
     });
     const onChange = useCallback((newValue) => setValue((oldValue) => {
         if (newValue !== oldValue) {
@@ -46,9 +50,10 @@ function SelectionSingleProvider({ value: valueProp, defaultValue, onChange: onC
         }, children: children }));
 }
 function SelectionMultipleProvider({ value: valueProp, defaultValue, onChange: onChangeProp, children, }) {
-    const [value, setValue] = useUncontrolledProp(valueProp, defaultValue, newValue => {
-        const result = typeof newValue === 'function' ? newValue(value) : newValue;
-        onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(result);
+    const [value, setValue] = useValueControl({
+        value: valueProp,
+        defaultValue,
+        onChange: onChangeProp,
     });
     const onChange = useCallback((newValue) => {
         setValue((oldValues) => {
@@ -81,9 +86,8 @@ export function SelectionProvider(_a) {
     if (isSelectionMultipleProps(props)) {
         return _jsx(SelectionMultipleProvider, Object.assign({}, props, { children: children }));
     }
-    return _jsx(SelectionContext.Provider, { value: {}, children: children });
+    return _jsx(SelectionNoneProvider, { children: children });
 }
-export const useSelectionContext = () => useContext(SelectionContext);
-export function extractSelectionProps({ selection }) {
-    return Object.assign({}, (selection !== null && selection !== void 0 ? selection : {}));
+export function useSelectionContext() {
+    return useContext(SelectionContext);
 }

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

@@ -1,4 +1,5 @@
-export * from './ListProvider';
 export * from './SelectionProvider';
-export * from './ParentListProvider';
 export * from './CollapseProvider';
+export * from './NewListProvider';
+export * from './SelectionProvider';
+export * from './FocusListProvider';

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

@@ -1,4 +1,5 @@
-export * from './ListProvider';
 export * from './SelectionProvider';
-export * from './ParentListProvider';
 export * from './CollapseProvider';
+export * from './NewListProvider';
+export * from './SelectionProvider';
+export * from './FocusListProvider';

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

@@ -1,16 +1,14 @@
 import { KeyboardEvent, RefObject } from 'react';
-export type UseKeyboardNavigationProps<T extends HTMLElement> = {
-    ids: Array<number | string>;
-    expandedIds: Array<number | string>;
-    parentRef?: RefObject<T>;
+import { FocusFlattenItem, ItemId } from '../Items';
+type UseNewKeyboardNavigationProps<T extends HTMLElement> = {
+    mainRef?: RefObject<T>;
     btnRef?: RefObject<HTMLButtonElement>;
-    itemRefs?: RefObject<HTMLElement>[];
+    focusFlattenItems: Record<string, FocusFlattenItem>;
 };
-export declare function useKeyboardNavigation<T extends HTMLElement>({ ids, itemRefs, expandedIds, parentRef, btnRef, }: UseKeyboardNavigationProps<T>): {
-    activeFocusIndex: number;
-    setActiveFocusIndex: import("react").Dispatch<import("react").SetStateAction<number>>;
-    openNestedIndex: number;
-    resetNestedIndex: () => void;
-    resetActiveFocusIndex: () => void;
-    handleListKeyDown: (e: KeyboardEvent<T>) => void;
+export declare function useNewKeyboardNavigation<T extends HTMLElement>({ mainRef, btnRef, focusFlattenItems, }: UseNewKeyboardNavigationProps<T>): {
+    resetActiveItemId: () => void;
+    activeItemId: ItemId | undefined;
+    forceUpdateActiveItemId: (itemId: ItemId) => void;
+    handleListKeyDownFactory: (ids: ItemId[], expandedIds: ItemId[]) => (e: KeyboardEvent<T>) => void;
 };
+export {};