@snack-uikit/list 0.10.0 → 0.10.1-preview-80576138.0

package/dist/components/Items/NextListItem/NextListItem.js

@@ -10,58 +10,66 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Dropdown } from '@snack-uikit/dropdown';
 import { ChevronRightSVG } from '@snack-uikit/icons';
-import { withCollapsedItems } from '../../../utils';
-import { ParentListContext, useParentListContext } from '../../Lists/contexts';
+import { useCollapseContext, useFocusListContext, useNewListContext } from '../../Lists/contexts';
 import { ListPrivate } from '../../Lists/ListPrivate';
 import { BaseItem } from '../BaseItem';
 import { useGroupItemSelection } from '../hooks';
-import { useKeyboardNavigation } from './hooks';
-const FALLBACK_PLACEMENTS = [
-    'right',
-    'right-start',
-    'right-end',
-    'left',
-    'left-start',
-    'left-end',
-];
+import { extractActiveItems, isNextListItem } from '../utils';
+import { FALLBACK_PLACEMENTS } from './constants';
 export function NextListItem(_a) {
-    var { items: itemsProp, placement = 'right-start', id, search, scroll, scrollRef, disabled, onSublistOpenChanged, loading = false } = _a, option = __rest(_a, ["items", "placement", "id", "search", "scroll", "scrollRef", "disabled", "onSublistOpenChanged", "loading"]);
-    const listRef = useRef(null);
-    const [openCollapsedItems, setOpenCollapsedItems] = useState([]);
-    const { items, itemRefs, ids, expandedIds } = useMemo(() => withCollapsedItems({
-        items: itemsProp,
-        openCollapsedItems,
-    }), [itemsProp, openCollapsedItems]);
-    const { parentOpenNestedIndex, parentIds, triggerRef, parentResetNestedIndex, parentResetActiveFocusIndex } = useParentListContext();
-    const { open, setOpen, handleListKeyDown, activeFocusIndex, openNestedIndex, resetNestedIndex, resetActiveFocusIndex, } = useKeyboardNavigation({ ids, expandedIds, itemRefs, id });
-    const { isIndeterminate, checked, handleOnSelect } = useGroupItemSelection({ items: itemsProp, id, disabled });
-    const handleOpenChange = useCallback((open) => {
-        if (!open) {
-            resetActiveFocusIndex();
-            resetNestedIndex();
-            setOpenCollapsedItems([]);
+    var { items, placement = 'right-start', id, scroll, scrollRef, disabled, onSublistOpenChanged, allChildIds, loading = false, focusId = id } = _a, option = __rest(_a, ["items", "placement", "id", "scroll", "scrollRef", "disabled", "onSublistOpenChanged", "allChildIds", "loading", "focusId"]);
+    const { flattenItems, focusFlattenItems } = useNewListContext();
+    const { openCollapseItems = [] } = useCollapseContext();
+    const item = flattenItems[id];
+    const { ids, expandedIds } = useMemo(() => {
+        const { ids, expandedIds } = extractActiveItems({
+            focusCloseChildIds: items,
+            focusFlattenItems,
+            openCollapseItems,
+        });
+        return { ids, expandedIds: expandedIds.concat([id]) };
+    }, [focusFlattenItems, id, items, openCollapseItems]);
+    const { handleListKeyDownFactory, activeItemId, forceUpdateActiveItemId } = useFocusListContext();
+    const [open, setOpen] = useState();
+    const handleListKeyDown = useCallback((e) => {
+        handleListKeyDownFactory(ids, expandedIds)(e);
+        if (e.code === 'ArrowLeft') {
+            forceUpdateActiveItemId === null || forceUpdateActiveItemId === void 0 ? void 0 : forceUpdateActiveItemId(focusId);
+            setOpen(false);
+            e.stopPropagation();
+            return;
         }
-        onSublistOpenChanged === null || onSublistOpenChanged === void 0 ? void 0 : onSublistOpenChanged(open, id);
-        setOpen(open);
-    }, [id, onSublistOpenChanged, resetActiveFocusIndex, resetNestedIndex, setOpen]);
+    }, [handleListKeyDownFactory, ids, expandedIds, forceUpdateActiveItemId, focusId]);
+    const { indeterminate, checked, handleOnSelect } = useGroupItemSelection({
+        items: isNextListItem(item) ? item.items : [],
+        id,
+        disabled,
+        allChildIds,
+    });
     const handleOutsideClick = useCallback(() => {
-        parentResetNestedIndex === null || parentResetNestedIndex === void 0 ? void 0 : parentResetNestedIndex();
-        parentResetActiveFocusIndex === null || parentResetActiveFocusIndex === void 0 ? void 0 : parentResetActiveFocusIndex();
+        forceUpdateActiveItemId === null || forceUpdateActiveItemId === void 0 ? void 0 : forceUpdateActiveItemId('~drop-focus');
+        setOpen(false);
         return true;
-    }, [parentResetActiveFocusIndex, parentResetNestedIndex]);
-    return (_jsx(Dropdown, { outsideClick: handleOutsideClick, fallbackPlacements: FALLBACK_PLACEMENTS, content: _jsx(ParentListContext.Provider, { value: {
-                parentIds: ids,
-                parentActiveFocusIndex: activeFocusIndex,
-                parentExpandedIds: expandedIds,
-                parentItemRefs: itemRefs,
-                parentOpenNestedIndex: openNestedIndex,
-                triggerRef,
-                parentRef: listRef,
-                parentResetNestedIndex: resetNestedIndex,
-                parentResetActiveFocusIndex: resetActiveFocusIndex,
-                toggleOpenCollapsedItems: id => setOpenCollapsedItems(items => items.includes(id) ? items.filter(item => item !== id) : items.concat([id])),
-            }, children: _jsx(ListPrivate, { onKeyDown: handleListKeyDown, items: items, nested: true, search: search, scroll: scroll, scrollRef: scrollRef, limitedScrollHeight: true, loading: loading }) }), trigger: 'hover', open: (open || parentIds[parentOpenNestedIndex] === id) && !disabled, onOpenChange: handleOpenChange, placement: placement, widthStrategy: 'auto', children: _jsx(BaseItem, Object.assign({}, option, { disabled: disabled, open: open, expandIcon: _jsx(ChevronRightSVG, {}), id: id, isParentNode: true, indeterminate: isIndeterminate && !checked, onSelect: handleOnSelect })) }));
+    }, [forceUpdateActiveItemId]);
+    const isOpen = useMemo(() => Boolean(!disabled && activeItemId && focusFlattenItems[focusId].allChildIds.includes(activeItemId)), [activeItemId, disabled, focusFlattenItems, focusId]);
+    useEffect(() => {
+        setOpen(open => open && isOpen);
+    }, [id, isOpen]);
+    const listRef = useRef(null);
+    return (_jsx(Dropdown, { outsideClick: handleOutsideClick, fallbackPlacements: FALLBACK_PLACEMENTS, content: _jsx(ListPrivate, { onKeyDown: handleListKeyDown, items: items, nested: true, scroll: scroll, tabIndex: 0, ref: listRef, onFocus: e => {
+                e.stopPropagation();
+                forceUpdateActiveItemId === null || forceUpdateActiveItemId === void 0 ? void 0 : forceUpdateActiveItemId(ids[0]);
+            }, scrollRef: scrollRef, limitedScrollHeight: true, loading: loading }), trigger: 'hover', open: isOpen || open, onOpenChange: value => {
+            setOpen(value);
+            onSublistOpenChanged === null || onSublistOpenChanged === void 0 ? void 0 : onSublistOpenChanged(value, id);
+        }, placement: placement, widthStrategy: 'auto', children: _jsx(BaseItem, Object.assign({}, option, { disabled: disabled, open: open, expandIcon: _jsx(ChevronRightSVG, {}), id: id, isParentNode: true, indeterminate: indeterminate, checked: checked, onOpenNestedList: () => {
+                setOpen(true);
+                setTimeout(() => {
+                    var _a;
+                    (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                }, 0);
+            }, onSelect: handleOnSelect })) }));
 }

package/dist/components/Items/NextListItem/constants.d.ts

@@ -0,0 +1,2 @@
+import { DropdownProps } from '@snack-uikit/dropdown';
+export declare const FALLBACK_PLACEMENTS: DropdownProps['fallbackPlacements'];

package/dist/components/Items/NextListItem/constants.js

@@ -0,0 +1,10 @@
+export const FALLBACK_PLACEMENTS = [
+    'right',
+    'right-start',
+    'right-end',
+    'left',
+    'left-start',
+    'left-end',
+    'bottom',
+    'top',
+];

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

@@ -1,5 +1,7 @@
+import { RefObject } from 'react';
 import { SearchState } from '../../../types';
 export type SearchItemProps = {
     search?: SearchState;
+    itemRef?: RefObject<HTMLElement>;
 };
-export declare function SearchItem({ search }: SearchItemProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function SearchItem({ search, itemRef }: SearchItemProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/Items/SearchItem/SearchItem.js

@@ -1,28 +1,25 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import cn from 'classnames';
 import { SearchPrivate } from '@snack-uikit/search-private';
-import { useListContext, useParentListContext } from '../../Lists/contexts';
+import { useNewListContext } from '../../Lists/contexts';
 import commonStyles from '../styles.module.css';
 import styles from './styles.module.css';
-export function SearchItem({ search }) {
-    const { parentItemRefs, parentSetActiveFocusIndex } = useParentListContext();
-    const { size } = useListContext();
+export function SearchItem({ search, itemRef }) {
+    const { size = 's' } = useNewListContext();
     const handleKeyDown = (e) => {
         if (['ArrowDown', 'ArrowUp'].includes(e.key)) {
             e.preventDefault();
         }
         if (['ArrowRight'].includes(e.key)) {
             e.stopPropagation();
+            e.preventDefault();
         }
     };
     const handleFocus = (e) => {
-        if (e.target === parentItemRefs[0].current) {
-            parentSetActiveFocusIndex === null || parentSetActiveFocusIndex === void 0 ? void 0 : parentSetActiveFocusIndex(0);
-        }
         e.stopPropagation();
     };
     if (!Boolean(search)) {
         return null;
     }
-    return (_jsx("div", { className: cn(commonStyles.listItem, styles.searchItem), "data-size": size, "data-test-id": 'list__search-item', children: _jsx(SearchPrivate, Object.assign({ size: size, tabIndex: -1, onKeyDown: handleKeyDown, onFocus: handleFocus }, search, { ref: parentItemRefs[0] })) }));
+    return (_jsx("div", { className: cn(commonStyles.listItem, styles.searchItem), "data-size": size, "data-test-id": 'list__search-item', children: _jsx(SearchPrivate, Object.assign({ size: size, tabIndex: -1, onKeyDown: handleKeyDown, onFocus: handleFocus }, search, { ref: itemRef })) }));
 }

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

@@ -1,22 +1,23 @@
 import { RefObject } from 'react';
-import { ItemProps } from './types';
-export declare function useRenderItems(items: ItemProps[]): import("react/jsx-runtime").JSX.Element[];
-type UseItemsWithIdsProps = {
+import { Flatten, FlattenBaseItem, ItemId } from './types';
+export declare function useRenderItems(focusCloseChildIds?: ItemId[]): import("react/jsx-runtime").JSX.Element[] | null[];
+type UseCreateBaseItemsProps = {
     search?: boolean;
     footerActiveElementsRefs?: RefObject<HTMLElement>[];
 };
-export declare function useItemsWithIds({ search, footerActiveElementsRefs }: UseItemsWithIdsProps): {
-    search: ItemProps[];
-    footerRefs: ItemProps[];
+export declare function useCreateBaseItems({ footerActiveElementsRefs }: UseCreateBaseItemsProps): {
+    searchItem: Flatten<FlattenBaseItem, 'itemRef'>;
+    footerItems: Flatten<FlattenBaseItem, 'itemRef'>[];
 };
 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, allChildIds }: UseGroupItemSelectionProps): {
     checked: boolean | undefined;
-    isIndeterminate: boolean;
+    indeterminate: boolean;
     handleOnSelect: () => void;
 };
 export {};

package/dist/components/Items/hooks.js

@@ -1,61 +1,79 @@
 import { createElement as _createElement } from "react";
-import { createRef, useEffect, useMemo } from 'react';
-import { extractAllChildIds, extractChildIds } from '../../utils';
-import { useSelectionContext } from '../Lists/contexts';
+import { createRef, useMemo } from 'react';
+import { useNewListContext, useSelectionContext } from '../Lists/contexts';
 import { AccordionItem } from './AccordionItem';
 import { BaseItem } from './BaseItem';
 import { GroupItem } from './GroupItem';
+import { GroupSelectItem } from './GroupSelectItem';
 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 { isAccordionItem, isGroupItem, isGroupSelectItem, isNextListItem } from './utils';
+export function useRenderItems(focusCloseChildIds) {
+    const { focusFlattenItems, flattenItems } = useNewListContext();
+    const { isSelectionSingle } = useSelectionContext();
+    return useMemo(() => {
+        if (!focusCloseChildIds) {
+            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]);
+        return focusCloseChildIds.map(id => {
+            const { itemRef, key, originalId, items } = focusFlattenItems[id];
+            const flattenItem = flattenItems[originalId];
+            if (isGroupItem(flattenItem) ||
+                (isSelectionSingle && isGroupSelectItem(flattenItem))) {
+                return _createElement(GroupItem, Object.assign({}, flattenItem, { items: items, key: key }));
+            }
+            if (isGroupSelectItem(flattenItem)) {
+                return _createElement(GroupSelectItem, Object.assign({}, flattenItem, { items: items, itemRef: itemRef, key: key }));
+            }
+            if (isAccordionItem(flattenItem)) {
+                return _createElement(AccordionItem, Object.assign({}, flattenItem, { items: items, itemRef: itemRef, key: key }));
+            }
+            if (isNextListItem(flattenItem)) {
+                return _createElement(NextListItem, Object.assign({}, flattenItem, { focusId: id, items: items, itemRef: itemRef, key: key }));
+            }
+            return _createElement(BaseItem, Object.assign({}, flattenItem, { itemRef: itemRef, key: key }));
+        });
+    }, [flattenItems, focusCloseChildIds, focusFlattenItems, isSelectionSingle]);
 }
-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',
+                items: [],
+                allChildIds: [],
+            },
+            footerItems: (_a = footerActiveElementsRefs === null || footerActiveElementsRefs === void 0 ? void 0 : footerActiveElementsRefs.map((itemRef, idx) => ({
+                id: `~footer__${idx}`,
+                itemRef,
+                parentId: '~main',
+                items: [],
+                allChildIds: [],
+            }))) !== null && _a !== void 0 ? _a : [],
+        });
+    }, [footerActiveElementsRefs]);
 }
-export function useGroupItemSelection({ id, items, disabled }) {
+export function useGroupItemSelection({ id, allChildIds }) {
     const { value, setValue, isSelectionMultiple } = useSelectionContext();
-    const { childIds, allChildIds } = useMemo(() => ({ childIds: extractChildIds({ items }), allChildIds: extractAllChildIds({ items }) }), [items]);
-    const isIndeterminate = isSelectionMultiple
-        ? allChildIds.some(childId => value === null || value === void 0 ? void 0 : value.includes(childId))
-        : allChildIds.includes(value !== null && value !== void 0 ? value : '');
-    const checked = isSelectionMultiple ? allChildIds.every(childId => value === null || value === void 0 ? void 0 : value.includes(childId)) : undefined;
-    useEffect(() => {
-        if (isSelectionMultiple) {
-            if (checked && !(value === null || value === void 0 ? void 0 : value.includes(id))) {
-                setValue === null || setValue === void 0 ? void 0 : setValue((value) => (value !== null && value !== void 0 ? value : []).concat([id !== null && id !== void 0 ? id : '']));
-            }
-            if (!checked && (value === null || value === void 0 ? void 0 : value.includes(id))) {
-                setValue === null || setValue === void 0 ? void 0 : setValue((value) => (value !== null && value !== void 0 ? value : []).filter(itemId => itemId !== id));
-            }
-        }
-    }, [checked, disabled, id, isSelectionMultiple, setValue, value]);
+    const { flattenItems } = useNewListContext();
+    const baseChildIds = useMemo(() => allChildIds.filter(itemId => {
+        const item = flattenItems[itemId];
+        return item && !('type' in item);
+    }), [allChildIds, flattenItems]);
+    const checked = isSelectionMultiple
+        ? value && Boolean(value.length) && baseChildIds.every(childId => value === null || value === void 0 ? void 0 : value.includes(childId))
+        : undefined;
+    const indeterminate = isSelectionMultiple
+        ? !checked && baseChildIds.some(childId => value === null || value === void 0 ? void 0 : value.includes(childId))
+        : baseChildIds.includes(value !== null && value !== void 0 ? value : '');
     const handleOnSelect = () => {
         if (checked) {
-            setValue === null || setValue === void 0 ? void 0 : setValue((value) => (value !== null && value !== void 0 ? value : []).filter(itemId => itemId !== id && !childIds.includes(itemId)));
-            return;
-        }
-        if (isIndeterminate) {
-            setValue === null || setValue === void 0 ? void 0 : setValue((value) => Array.from(new Set([...(value !== null && value !== void 0 ? value : []), ...childIds, id])));
+            setValue === null || setValue === void 0 ? void 0 : setValue((value) => (value !== null && value !== void 0 ? value : []).filter(itemId => itemId !== id && !baseChildIds.includes(itemId)));
             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) => Array.from(new Set([...(value !== null && value !== void 0 ? value : []), ...baseChildIds])));
     };
-    return { checked, isIndeterminate, handleOnSelect };
+    return { checked, indeterminate, handleOnSelect };
 }

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

@@ -1,9 +1,5 @@
-export * from './BaseItem';
-export * from './NextListItem';
-export * from './AccordionItem';
-export * from './GroupItem';
-export * from './SearchItem';
 export * from './hooks';
 export * from './types';
 export * from './utils';
+export * from './SearchItem';
 export * from './PinGroupItem';

package/dist/components/Items/index.js

@@ -1,9 +1,5 @@
-export * from './BaseItem';
-export * from './NextListItem';
-export * from './AccordionItem';
-export * from './GroupItem';
-export * from './SearchItem';
 export * from './hooks';
 export * from './types';
 export * from './utils';
+export * from './SearchItem';
 export * from './PinGroupItem';

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,34 @@
-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[];
+};
+type ExtractActiveItemsReturnType = {
+    ids: ItemId[];
+    expandedIds: ItemId[];
+};
+export declare function extractActiveItems({ focusFlattenItems, focusCloseChildIds, openCollapseItems, }: ExtractActiveItemsProps): ExtractActiveItemsReturnType;
+export {};