@cloud-ru/ds-list 1.0.0

package/dist/cjs/components/Lists/contexts/NewListProvider.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListContext = void 0;
+exports.useNewListContext = useNewListContext;
+exports.NewListContextProvider = NewListContextProvider;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const constants_1 = require("../../../constants");
+exports.ListContext = (0, react_1.createContext)({
+    flattenItems: {},
+    focusFlattenItems: {},
+    firstItemId: constants_1.ITEM_PREFIXES.default,
+});
+function useNewListContext() {
+    return (0, react_1.useContext)(exports.ListContext);
+}
+function extractListProps({ size, marker, flattenItems, focusFlattenItems, contentRender, firstItemId, virtualized, }) {
+    return { size, marker, contentRender, flattenItems, focusFlattenItems, firstItemId, virtualized };
+}
+function NewListContextProvider({ children, size, marker, flattenItems, focusFlattenItems, contentRender, firstItemId, virtualized, }) {
+    const value = (0, react_1.useMemo)(() => extractListProps({ size, marker, flattenItems, focusFlattenItems, contentRender, firstItemId, virtualized }), [size, marker, flattenItems, focusFlattenItems, contentRender, firstItemId, virtualized]);
+    return (0, jsx_runtime_1.jsx)(exports.ListContext.Provider, { value: value, children: children });
+}

package/dist/cjs/components/Lists/contexts/OpenListProvider.d.ts

@@ -0,0 +1,6 @@
+export type OpenListContextType = {
+    closeDroplistOnItemClick?: boolean;
+    closeDroplist(): void;
+};
+export declare const OpenListContext: import("react").Context<OpenListContextType>;
+export declare const useOpenListContext: () => OpenListContextType;

package/dist/cjs/components/Lists/contexts/OpenListProvider.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOpenListContext = exports.OpenListContext = void 0;
+const react_1 = require("react");
+exports.OpenListContext = (0, react_1.createContext)({
+    closeDroplist: () => { },
+    closeDroplistOnItemClick: false,
+});
+const useOpenListContext = () => (0, react_1.useContext)(exports.OpenListContext);
+exports.useOpenListContext = useOpenListContext;

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

@@ -0,0 +1,74 @@
+import { Dispatch, ReactNode, SetStateAction } from 'react';
+import { MODE } from '../../../constants';
+import { ItemId } from '../../Items';
+export type SelectionValue = ItemId | ItemId[];
+export type OnChangeHandler<T = SelectionValue> = (value: T) => void;
+export type SelectionSingleValueType = ItemId;
+export type SelectionSingleState = {
+    /** Начальное состояние */
+    defaultValue?: ItemId;
+    /** Controlled состояние */
+    value?: ItemId;
+    /** Controlled обработчик изменения состояния — получает выбранный `ItemId` */
+    onChange?: OnChangeHandler<ItemId>;
+    /** Режим выбора */
+    mode: typeof MODE.Single;
+};
+export type SelectionSingleProps = {
+    setValue?: Dispatch<SetStateAction<ItemId | undefined>>;
+    /** Внутренний toggle-обработчик: выбирает/снимает один элемент по id */
+    onChange?: OnChangeHandler<ItemId>;
+    /** Режим выбора single */
+    isSelectionSingle: true;
+    /** Режим выбора multi */
+    isSelectionMultiple: false;
+} & Omit<SelectionSingleState, 'onChange'>;
+export type SelectionMultipleState = {
+    /** Начальное состояние */
+    defaultValue?: ItemId[];
+    /** Controlled состояние */
+    value?: ItemId[];
+    /** Controlled обработчик изменения состояния — получает массив выбранных `ItemId[]` */
+    onChange?: OnChangeHandler<ItemId[]>;
+    /** Режим выбора */
+    mode: typeof MODE.Multiple;
+};
+export type SelectionMultipleProps = {
+    setValue?: Dispatch<SetStateAction<ItemId[] | undefined>>;
+    /** Внутренний toggle-обработчик: добавляет/убирает один элемент по id */
+    onChange?: OnChangeHandler<ItemId>;
+    /** Режим выбора single */
+    isSelectionSingle: false;
+    /** Режим выбора multi */
+    isSelectionMultiple: true;
+} & Omit<SelectionMultipleState, 'onChange'>;
+type SelectionNoneProps = {
+    mode?: typeof MODE.None;
+    value?: undefined;
+    onChange?: undefined;
+    setValue?: undefined;
+    defaultValue?: undefined;
+    isSelectionSingle?: undefined;
+    isSelectionMultiple?: undefined;
+};
+type SelectionContextType = Omit<SelectionNoneProps, 'defaultValue'> | Omit<SelectionSingleProps, 'defaultValue'> | Omit<SelectionMultipleProps, 'defaultValue'>;
+export type SelectionState = {
+    /**
+     * Настройки выбора элементов. `mode: 'single'` — один выбранный элемент (`value: ItemId`),
+     * `mode: 'multiple'` — множественный выбор (`value: ItemId[]`). Без `selection` выбора нет —
+     * клик вызывает только `onClick` элемента.
+     */
+    selection?: SelectionSingleState | SelectionMultipleState;
+};
+export declare const SelectionContext: import("react").Context<SelectionContextType>;
+export declare function isSelectionMultipleProps(props: object): props is SelectionMultipleState;
+export declare function isSelectionSingleProps(props: object): props is SelectionSingleState;
+type Child = {
+    children: ReactNode;
+};
+type SelectionProviderProps = SelectionSingleState | SelectionMultipleState | {
+    mode?: typeof MODE.None;
+};
+export declare function SelectionProvider({ children, ...props }: SelectionProviderProps & Child): import("react/jsx-runtime").JSX.Element;
+export declare function useSelectionContext(): SelectionContextType;
+export {};

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

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectionContext = void 0;
+exports.isSelectionMultipleProps = isSelectionMultipleProps;
+exports.isSelectionSingleProps = isSelectionSingleProps;
+exports.SelectionProvider = SelectionProvider;
+exports.useSelectionContext = useSelectionContext;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("@cloud-ru/ds-utils");
+const react_1 = require("react");
+const constants_1 = require("../../../constants");
+exports.SelectionContext = (0, react_1.createContext)({
+    value: undefined,
+    onChange: undefined,
+    mode: undefined,
+});
+function isSelectionMultipleProps(props) {
+    return 'mode' in props && props['mode'] === constants_1.MODE.Multiple;
+}
+function isSelectionSingleProps(props) {
+    return 'mode' in props && props['mode'] === constants_1.MODE.Single;
+}
+function SelectionNoneProvider({ children }) {
+    return ((0, jsx_runtime_1.jsx)(exports.SelectionContext.Provider, { value: {
+            mode: constants_1.MODE.None,
+        }, children: children }));
+}
+function SelectionSingleProvider({ value: valueProp, defaultValue, onChange: onChangeProp, children, }) {
+    const [value, setValue] = (0, utils_1.useValueControl)({
+        value: valueProp,
+        defaultValue,
+        // На deselect внутреннее значение становится undefined; наружу передаём только реальный id.
+        onChange: newValue => newValue !== undefined && onChangeProp?.(newValue),
+    });
+    const onChange = (0, react_1.useCallback)((newValue) => setValue((oldValue) => {
+        if (newValue !== oldValue) {
+            return newValue;
+        }
+        return undefined;
+    }), [setValue]);
+    return ((0, jsx_runtime_1.jsx)(exports.SelectionContext.Provider, { value: {
+            value,
+            onChange,
+            mode: constants_1.MODE.Single,
+            isSelectionSingle: true,
+            isSelectionMultiple: false,
+            setValue,
+        }, children: children }));
+}
+function SelectionMultipleProvider({ value: valueProp, defaultValue, onChange: onChangeProp, children, }) {
+    const [value, setValue] = (0, utils_1.useValueControl)({
+        value: valueProp,
+        defaultValue,
+        onChange: newValue => onChangeProp?.(newValue ?? []),
+    });
+    const onChange = (0, react_1.useCallback)((newValue) => {
+        setValue((oldValues) => {
+            if (Array.isArray(oldValues)) {
+                if (oldValues.includes(newValue)) {
+                    return oldValues.filter(oldValue => oldValue !== newValue);
+                }
+                return oldValues.concat(newValue);
+            }
+            if (oldValues === undefined) {
+                return Array.isArray(newValue) ? newValue : [newValue];
+            }
+            return undefined;
+        });
+    }, [setValue]);
+    return ((0, jsx_runtime_1.jsx)(exports.SelectionContext.Provider, { value: {
+            value,
+            onChange,
+            mode: constants_1.MODE.Multiple,
+            isSelectionSingle: false,
+            isSelectionMultiple: true,
+            setValue,
+        }, children: children }));
+}
+function SelectionProvider({ children, ...props }) {
+    if (isSelectionSingleProps(props)) {
+        return (0, jsx_runtime_1.jsx)(SelectionSingleProvider, { ...props, children: children });
+    }
+    if (isSelectionMultipleProps(props)) {
+        return (0, jsx_runtime_1.jsx)(SelectionMultipleProvider, { ...props, children: children });
+    }
+    return (0, jsx_runtime_1.jsx)(SelectionNoneProvider, { children: children });
+}
+function useSelectionContext() {
+    return (0, react_1.useContext)(exports.SelectionContext);
+}

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

@@ -0,0 +1,5 @@
+export * from './SelectionProvider';
+export * from './CollapseProvider';
+export * from './NewListProvider';
+export * from './FocusListProvider';
+export * from './OpenListProvider';

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

@@ -0,0 +1,21 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./SelectionProvider"), exports);
+__exportStar(require("./CollapseProvider"), exports);
+__exportStar(require("./NewListProvider"), exports);
+__exportStar(require("./FocusListProvider"), exports);
+__exportStar(require("./OpenListProvider"), exports);

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

@@ -0,0 +1,83 @@
+import { DragEndEvent } from '@dnd-kit/core';
+import { KeyboardEvent, RefObject } from 'react';
+import { Mode, SearchState } from '../../types';
+import { FocusFlattenItem, Item, ItemId, ReorderItem } from '../Items';
+import { CollapseState } from './contexts';
+type UseListItemsModelProps = {
+    items: Item[] | ReorderItem[];
+    pinTop: Item[];
+    pinBottom: Item[];
+    search?: SearchState;
+    collapse: CollapseState;
+    selectionMode?: Mode;
+    footerActiveElementsRefs?: RefObject<HTMLElement>[];
+    /**
+     * Колбек drag&drop-переупорядочивания (см. `ListProps.onItemsReorder`). Наличие переключает
+     * `items` в сортируемый режим: `kindFlattenItems` размечает каждый узел `type: ITEM_TYPE.Simple`,
+     * а хук дополнительно возвращает `onDragEnd`/`sortableIds` для `DndContext`/`SortableContext`
+     * (собираемых уже в `ListPrivate`).
+     */
+    onItemsReorder?(items: ReorderItem[]): void;
+};
+/**
+ * Единая модель данных списка для `List` и `Droplist`: collapse-состояние,
+ * плоские карты айтемов (`flattenItems` / `focusFlattenItems`) и производный
+ * порядок навигации (`ids` / `expandedIds`). Оба компонента собирают одну и ту же
+ * структуру, поэтому она живёт в одном хуке — расхождение между списком и дроплистом
+ * физически невозможно.
+ */
+export declare function useListItemsModel({ items: itemsProp, pinTop: pinTopProp, pinBottom: pinBottomProp, search, collapse, selectionMode, footerActiveElementsRefs, onItemsReorder, }: UseListItemsModelProps): {
+    hasSearch: boolean;
+    openCollapseItems: ItemId[];
+    toggleOpenCollapseItem: (id: ItemId) => any;
+    searchItem: import("../Items").Flatten<import("../Items").FlattenBaseItem, "itemRef">;
+    footerItems: import("../Items").Flatten<import("../Items").FlattenBaseItem, "itemRef">[];
+    flattenItems: {
+        [x: string]: import("../Items").FlattenItem;
+    };
+    focusFlattenItems: {
+        [x: string]: FocusFlattenItem;
+    };
+    memorizedItems: {
+        items: {
+            focusCloseChildIds: ItemId[];
+            allChildIds: ItemId[];
+            flattenItems: Record<string, import("../Items").FlattenItem>;
+            focusFlattenItems: Record<string, FocusFlattenItem>;
+        };
+        pinTop: {
+            focusCloseChildIds: ItemId[];
+            allChildIds: ItemId[];
+            flattenItems: Record<string, import("../Items").FlattenItem>;
+            focusFlattenItems: Record<string, FocusFlattenItem>;
+        };
+        pinBottom: {
+            focusCloseChildIds: ItemId[];
+            allChildIds: ItemId[];
+            flattenItems: Record<string, import("../Items").FlattenItem>;
+            focusFlattenItems: Record<string, FocusFlattenItem>;
+        };
+    };
+    ids: ItemId[];
+    expandedIds: ItemId[];
+    firstItemId: ItemId;
+    onDragEnd: (({ active, over }: DragEndEvent) => void) | undefined;
+    sortableIds: ItemId[] | undefined;
+};
+type UseNewKeyboardNavigationProps<T extends HTMLElement> = {
+    mainRef?: RefObject<T>;
+    btnRef?: RefObject<HTMLButtonElement>;
+    focusFlattenItems: Record<string, FocusFlattenItem>;
+    keyboardNavigationRef?: RefObject<{
+        focusItem(item: ItemId): void;
+    }>;
+    hasListInFocusChain: boolean;
+    firstItemId: ItemId;
+};
+export declare function useNewKeyboardNavigation<T extends HTMLElement>({ mainRef, btnRef, focusFlattenItems, keyboardNavigationRef, hasListInFocusChain, firstItemId, }: UseNewKeyboardNavigationProps<T>): {
+    resetActiveItemId: () => void;
+    activeItemId: ItemId | undefined;
+    forceUpdateActiveItemId: (itemId: ItemId) => void;
+    handleListKeyDownFactory: (ids: ItemId[], expandedIds: ItemId[]) => (e: KeyboardEvent<T>) => void;
+};
+export {};

package/dist/cjs/components/Lists/hooks.js

@@ -0,0 +1,242 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useListItemsModel = useListItemsModel;
+exports.useNewKeyboardNavigation = useNewKeyboardNavigation;
+const utils_1 = require("@cloud-ru/ds-utils");
+const react_1 = require("react");
+const constants_1 = require("../../constants");
+const Items_1 = require("../Items");
+const utils_2 = require("./utils");
+// Селектор фокусируемых узлов для возврата фокуса на триггер при «выходе вверх» из списка.
+const FOCUSABLE_SELECTOR = 'input,textarea,select,button,a[href],[tabindex]';
+/**
+ * Вернуть фокус на триггер списка. `mainRef` может указывать не на сам фокусируемый узел, а на
+ * обёртку popover'а (`PopoverPrivate` перезаписывает переданный `triggerRef.current` своим span-
+ * wrapper'ом — см. MR!101). Span не фокусируется, поэтому если узел сам не focusable — фокусируем
+ * первый focusable-потомок (input у FieldSelect, Button у голого Droplist).
+ */
+function focusReturnTarget(el) {
+    if (!el) {
+        return;
+    }
+    const target = el.matches(FOCUSABLE_SELECTOR) ? el : el.querySelector(FOCUSABLE_SELECTOR);
+    target?.focus();
+}
+/**
+ * Единая модель данных списка для `List` и `Droplist`: collapse-состояние,
+ * плоские карты айтемов (`flattenItems` / `focusFlattenItems`) и производный
+ * порядок навигации (`ids` / `expandedIds`). Оба компонента собирают одну и ту же
+ * структуру, поэтому она живёт в одном хуке — расхождение между списком и дроплистом
+ * физически невозможно.
+ */
+function useListItemsModel({ items: itemsProp, pinTop: pinTopProp, pinBottom: pinBottomProp, search, collapse, selectionMode, footerActiveElementsRefs, onItemsReorder, }) {
+    const hasSearch = (0, react_1.useMemo)(() => Boolean(search), [search]);
+    const sortable = Boolean(onItemsReorder);
+    const [openCollapseItems = [], setOpenCollapsedItems] = (0, utils_1.useValueControl)(collapse);
+    const toggleOpenCollapseItem = (0, react_1.useCallback)((id) => setOpenCollapsedItems((items) => items?.includes(id) ? items.filter(item => item !== id) : (items ?? []).concat([id])), [setOpenCollapsedItems]);
+    const { searchItem, footerItems } = (0, Items_1.useCreateBaseItems)({ footerActiveElementsRefs });
+    /**
+     * Объект с пропсами всех вложенных айтемов; ключ id
+     */
+    const { flattenItems, focusFlattenItems, ...memorizedItems } = (0, react_1.useMemo)(() => {
+        const pinTop = (0, Items_1.kindFlattenItems)({
+            items: pinTopProp,
+            prefix: constants_1.ITEM_PREFIXES.pinTop,
+            parentId: constants_1.ITEM_PREFIXES.default,
+        });
+        const items = (0, Items_1.kindFlattenItems)({
+            items: itemsProp,
+            prefix: constants_1.ITEM_PREFIXES.default,
+            parentId: constants_1.ITEM_PREFIXES.default,
+            sortable,
+        });
+        const pinBottom = (0, Items_1.kindFlattenItems)({
+            items: pinBottomProp,
+            prefix: constants_1.ITEM_PREFIXES.pinBottom,
+            parentId: constants_1.ITEM_PREFIXES.default,
+        });
+        const flattenItems = { ...pinTop.flattenItems, ...pinBottom.flattenItems, ...items.flattenItems };
+        const focusFlattenItems = {
+            ...pinTop.focusFlattenItems,
+            ...pinBottom.focusFlattenItems,
+            ...items.focusFlattenItems,
+        };
+        [...footerItems, searchItem].forEach(item => {
+            flattenItems[item.id] = item;
+            focusFlattenItems[item.id] = { ...item, originalId: item.id, items: [], key: item.id, allChildIds: [] };
+        });
+        return { items, pinTop, pinBottom, flattenItems, focusFlattenItems };
+    }, [itemsProp, pinTopProp, pinBottomProp, searchItem, footerItems, sortable]);
+    const { ids, expandedIds } = (0, react_1.useMemo)(() => {
+        const { pinTop, items, pinBottom } = memorizedItems;
+        let ids = [];
+        let expandedIds = [];
+        if (hasSearch) {
+            ids.push(searchItem.id);
+        }
+        [pinTop, items, pinBottom].forEach(({ focusFlattenItems, focusCloseChildIds }) => {
+            const activeItems = (0, Items_1.extractActiveItems)({
+                focusFlattenItems,
+                focusCloseChildIds,
+                openCollapseItems,
+                isSelectionMultiple: selectionMode === constants_1.MODE.Multiple,
+            });
+            ids = ids.concat(activeItems.ids);
+            expandedIds = expandedIds.concat(activeItems.expandedIds);
+        });
+        footerItems.forEach(footerItem => {
+            ids.push(footerItem.id);
+        });
+        return { ids, expandedIds };
+    }, [footerItems, hasSearch, memorizedItems, openCollapseItems, searchItem.id, selectionMode]);
+    // Работает с исходным (не плоским) деревом `itemsProp` — гарантированно `ReorderItem[]`, когда
+    // `onItemsReorder` передан (см. дискриминированный `ListProps` — вызывающая сторона это
+    // обеспечивает на уровне типов, здесь только рантайм-каст).
+    const handleDragEnd = (0, react_1.useCallback)(({ active, over }) => {
+        if (!onItemsReorder || !over || active.id === over.id) {
+            return;
+        }
+        onItemsReorder((0, utils_2.reorderItems)(itemsProp, active.id, over.id));
+    }, [itemsProp, onItemsReorder]);
+    return {
+        hasSearch,
+        openCollapseItems,
+        toggleOpenCollapseItem,
+        searchItem,
+        footerItems,
+        flattenItems,
+        focusFlattenItems,
+        memorizedItems,
+        ids,
+        expandedIds,
+        firstItemId: ids[0],
+        // Всегда `undefined`, когда `onItemsReorder` не передан — `ListPrivate` включает
+        // `DndContext`/`SortableContext` и принудительно отключает виртуализацию по наличию `onDragEnd`.
+        onDragEnd: sortable ? handleDragEnd : undefined,
+        // Внешний `SortableContext` держит сортируемые элементы верхнего уровня: строки без группы
+        // (`Simple`) и сами группы (`Group`) — группы переставляются между собой за ручку на заголовке.
+        // Строки внутри групп сортируются в собственных `SortableContext` (их разворачивает
+        // `getRenderItems`), чтобы переупорядочивание шло строго внутри группы. Для плоского списка —
+        // просто все id.
+        sortableIds: sortable
+            ? memorizedItems.items.focusCloseChildIds
+                .map(focusId => focusFlattenItems[focusId])
+                .filter(item => item?.type === constants_1.ITEM_TYPE.Simple || item?.type === constants_1.ITEM_TYPE.Group)
+                .map(item => item.originalId)
+            : undefined,
+    };
+}
+function useNewKeyboardNavigation({ mainRef, btnRef, focusFlattenItems, keyboardNavigationRef, hasListInFocusChain, firstItemId, }) {
+    const defaultActiveItemId = hasListInFocusChain ? undefined : firstItemId;
+    const [activeItemId, setActiveItemId] = (0, react_1.useState)(() => defaultActiveItemId);
+    const activeItemIdRef = (0, react_1.useRef)(defaultActiveItemId);
+    const resetActiveItemId = (0, react_1.useCallback)(() => {
+        setActiveItemId(defaultActiveItemId);
+        activeItemIdRef.current = defaultActiveItemId;
+    }, [defaultActiveItemId]);
+    const handleListKeyDownFactory = (0, react_1.useCallback)((ids, expandedIds) => (e) => {
+        // Стрелки навигации по списку гасим централизованно — иначе нативное поведение скроллит
+        // страницу (элементы — кнопки/li, не текст, поэтому безопасны все четыре стрелки).
+        (0, utils_1.preventScrollOnArrowKeys)(e);
+        switch (e.key) {
+            case 'ArrowDown': {
+                if (activeItemIdRef.current !== undefined) {
+                    const activeIndex = ids.findIndex(id => id === activeItemIdRef.current);
+                    const nextId = Math.min(activeIndex + 1, ids.length - 1);
+                    const itemId = ids[nextId];
+                    const item = focusFlattenItems[itemId];
+                    activeItemIdRef.current = itemId;
+                    setActiveItemId(itemId);
+                    if (item?.type !== constants_1.ITEM_TYPE.Group) {
+                        item?.itemRef?.current?.focus();
+                    }
+                }
+                else {
+                    const itemId = ids[0];
+                    const item = focusFlattenItems[itemId];
+                    activeItemIdRef.current = itemId;
+                    setActiveItemId(itemId);
+                    if (item?.type !== constants_1.ITEM_TYPE.Group) {
+                        item?.itemRef?.current?.focus();
+                    }
+                }
+                e.stopPropagation();
+                return;
+            }
+            case 'ArrowUp': {
+                if (ids[0] === activeItemIdRef.current) {
+                    if (hasListInFocusChain) {
+                        const item = focusFlattenItems[ids[0]];
+                        if (item?.parentId === constants_1.ITEM_PREFIXES.default) {
+                            activeItemIdRef.current = undefined;
+                            setActiveItemId(undefined);
+                            focusReturnTarget(mainRef?.current);
+                        }
+                    }
+                }
+                else if (activeItemIdRef.current !== undefined) {
+                    const activeIndex = ids.findIndex(id => id === activeItemIdRef.current);
+                    const nextId = Math.max(activeIndex - 1, 0);
+                    const itemId = ids[nextId];
+                    const item = focusFlattenItems[itemId];
+                    activeItemIdRef.current = itemId;
+                    setActiveItemId(itemId);
+                    if (item?.type !== constants_1.ITEM_TYPE.Group) {
+                        item?.itemRef?.current?.focus();
+                    }
+                }
+                e.stopPropagation();
+                return;
+            }
+            case 'ArrowRight': {
+                if (activeItemIdRef.current !== undefined && expandedIds.includes(activeItemIdRef.current)) {
+                    const item = focusFlattenItems[activeItemIdRef.current];
+                    const newItemId = item?.items[0];
+                    if (newItemId === undefined) {
+                        return;
+                    }
+                    const newItem = focusFlattenItems[newItemId];
+                    activeItemIdRef.current = newItemId;
+                    setActiveItemId(newItemId);
+                    setTimeout(() => newItem?.itemRef?.current?.focus(), 0);
+                    e.stopPropagation();
+                }
+                return;
+            }
+            case 'Tab': {
+                if (activeItemIdRef.current !== undefined) {
+                    if (hasListInFocusChain) {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        activeItemIdRef.current = undefined;
+                        setActiveItemId(undefined);
+                        focusReturnTarget(mainRef?.current);
+                    }
+                    else {
+                        resetActiveItemId();
+                    }
+                }
+                else {
+                    btnRef && !e.shiftKey ? btnRef?.current?.focus() : focusReturnTarget(mainRef?.current);
+                }
+                return;
+            }
+            default: {
+                return;
+            }
+        }
+    }, [focusFlattenItems, hasListInFocusChain, mainRef, resetActiveItemId, btnRef]);
+    const forceUpdateActiveItemId = (0, react_1.useCallback)((itemId) => {
+        setActiveItemId(itemId);
+        activeItemIdRef.current = itemId;
+        const item = focusFlattenItems[itemId];
+        item?.itemRef?.current?.focus();
+    }, [focusFlattenItems]);
+    (0, react_1.useImperativeHandle)(keyboardNavigationRef, () => ({ focusItem: forceUpdateActiveItemId }), [forceUpdateActiveItemId]);
+    return {
+        resetActiveItemId,
+        activeItemId,
+        forceUpdateActiveItemId,
+        handleListKeyDownFactory,
+    };
+}

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

@@ -0,0 +1,5 @@
+export * from './Droplist';
+export * from './List';
+export * from './ListPrivate';
+export * from './types';
+export * from './contexts';

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

@@ -0,0 +1,21 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Droplist"), exports);
+__exportStar(require("./List"), exports);
+__exportStar(require("./ListPrivate"), exports);
+__exportStar(require("./types"), exports);
+__exportStar(require("./contexts"), exports);

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

@@ -0,0 +1,65 @@
+.listContainer{
+  display:flex;
+  flex-direction:column;
+  height:100%;
+  margin:0;
+  padding:0;
+}
+.listContainer:focus-visible{
+  border:none;
+  outline:none;
+}
+.listContainer:focus-visible[data-active]{
+  outline:var(--sn-theme-color-available-complementary, #000000) solid var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
+  outline-offset:calc(0px - var(--sn-primitive-strokeWeight-strokeSemiBold, 2px));
+}
+.listContainer:focus-visible[data-active] *{
+  cursor:inherit;
+}
+.listContainer li,
+.listContainer ul{
+  list-style-type:none;
+}
+.listContainer a{
+  color:inherit;
+  text-decoration:none;
+}
+.listContainer a:hover, .listContainer a:focus, .listContainer a:active, .listContainer a:visited{
+  color:inherit;
+  text-decoration:none;
+}
+
+.wrapper{
+  position:relative;
+  overflow:hidden;
+  display:block;
+  box-sizing:border-box;
+  height:100%;
+}
+.wrapper:has(.listContainer:focus-visible){
+  outline:var(--sn-theme-color-available-complementary, #000000) solid var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
+  outline-offset:calc(0px - var(--sn-primitive-strokeWeight-strokeSemiBold, 2px));
+}
+.wrapper li,
+.wrapper ul{
+  list-style-type:none;
+}
+
+.scrollContainerS:global(.osThemeSnack),
+.scrollContainerM:global(.osThemeSnack),
+.scrollContainerL:global(.osThemeSnack){
+  height:auto;
+  min-height:0;
+}
+
+.scrollContainerS:global(.osThemeSnack){
+  max-height:calc(var(--sn-primitive-dimension-8, 8px) * 32);
+}
+
+.scrollContainerM:global(.osThemeSnack){
+  max-height:calc(var(--sn-primitive-dimension-8, 8px) * 40);
+}
+
+.scrollContainerL:global(.osThemeSnack){
+  max-height:calc(var(--sn-primitive-dimension-8, 8px) * 48);
+}