@cloud-ru/ds-list 1.0.0

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

@@ -0,0 +1,83 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useValueControl } from '@cloud-ru/ds-utils';
+import { createContext, useCallback, useContext } from 'react';
+import { MODE } from '../../../constants.js';
+export const SelectionContext = createContext({
+    value: undefined,
+    onChange: undefined,
+    mode: undefined,
+});
+export function isSelectionMultipleProps(props) {
+    return 'mode' in props && props['mode'] === MODE.Multiple;
+}
+export function isSelectionSingleProps(props) {
+    return 'mode' in props && props['mode'] === MODE.Single;
+}
+function SelectionNoneProvider({ children }) {
+    return (_jsx(SelectionContext.Provider, { value: {
+            mode: MODE.None,
+        }, children: children }));
+}
+function SelectionSingleProvider({ value: valueProp, defaultValue, onChange: onChangeProp, children, }) {
+    const [value, setValue] = useValueControl({
+        value: valueProp,
+        defaultValue,
+        // На deselect внутреннее значение становится undefined; наружу передаём только реальный id.
+        onChange: newValue => newValue !== undefined && onChangeProp?.(newValue),
+    });
+    const onChange = useCallback((newValue) => setValue((oldValue) => {
+        if (newValue !== oldValue) {
+            return newValue;
+        }
+        return undefined;
+    }), [setValue]);
+    return (_jsx(SelectionContext.Provider, { value: {
+            value,
+            onChange,
+            mode: MODE.Single,
+            isSelectionSingle: true,
+            isSelectionMultiple: false,
+            setValue,
+        }, children: children }));
+}
+function SelectionMultipleProvider({ value: valueProp, defaultValue, onChange: onChangeProp, children, }) {
+    const [value, setValue] = useValueControl({
+        value: valueProp,
+        defaultValue,
+        onChange: newValue => onChangeProp?.(newValue ?? []),
+    });
+    const onChange = 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 (_jsx(SelectionContext.Provider, { value: {
+            value,
+            onChange,
+            mode: MODE.Multiple,
+            isSelectionSingle: false,
+            isSelectionMultiple: true,
+            setValue,
+        }, children: children }));
+}
+export function SelectionProvider({ children, ...props }) {
+    if (isSelectionSingleProps(props)) {
+        return _jsx(SelectionSingleProvider, { ...props, children: children });
+    }
+    if (isSelectionMultipleProps(props)) {
+        return _jsx(SelectionMultipleProvider, { ...props, children: children });
+    }
+    return _jsx(SelectionNoneProvider, { children: children });
+}
+export function useSelectionContext() {
+    return useContext(SelectionContext);
+}

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

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

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

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

package/dist/esm/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.js';
+import { FocusFlattenItem, Item, ItemId, ReorderItem } from '../Items/index.js';
+import { CollapseState } from './contexts/index.js';
+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("..").Flatten<import("..").FlattenBaseItem, "itemRef">;
+    footerItems: import("..").Flatten<import("..").FlattenBaseItem, "itemRef">[];
+    flattenItems: {
+        [x: string]: import("..").FlattenItem;
+    };
+    focusFlattenItems: {
+        [x: string]: FocusFlattenItem;
+    };
+    memorizedItems: {
+        items: {
+            focusCloseChildIds: ItemId[];
+            allChildIds: ItemId[];
+            flattenItems: Record<string, import("..").FlattenItem>;
+            focusFlattenItems: Record<string, FocusFlattenItem>;
+        };
+        pinTop: {
+            focusCloseChildIds: ItemId[];
+            allChildIds: ItemId[];
+            flattenItems: Record<string, import("..").FlattenItem>;
+            focusFlattenItems: Record<string, FocusFlattenItem>;
+        };
+        pinBottom: {
+            focusCloseChildIds: ItemId[];
+            allChildIds: ItemId[];
+            flattenItems: Record<string, import("..").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/esm/components/Lists/hooks.js

@@ -0,0 +1,238 @@
+import { preventScrollOnArrowKeys, useValueControl } from '@cloud-ru/ds-utils';
+import { useCallback, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { ITEM_PREFIXES, ITEM_TYPE, MODE } from '../../constants.js';
+import { extractActiveItems, kindFlattenItems, useCreateBaseItems, } from '../Items/index.js';
+import { reorderItems } from './utils.js';
+// Селектор фокусируемых узлов для возврата фокуса на триггер при «выходе вверх» из списка.
+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`). Оба компонента собирают одну и ту же
+ * структуру, поэтому она живёт в одном хуке — расхождение между списком и дроплистом
+ * физически невозможно.
+ */
+export function useListItemsModel({ items: itemsProp, pinTop: pinTopProp, pinBottom: pinBottomProp, search, collapse, selectionMode, footerActiveElementsRefs, onItemsReorder, }) {
+    const hasSearch = useMemo(() => Boolean(search), [search]);
+    const sortable = Boolean(onItemsReorder);
+    const [openCollapseItems = [], setOpenCollapsedItems] = useValueControl(collapse);
+    const toggleOpenCollapseItem = useCallback((id) => setOpenCollapsedItems((items) => items?.includes(id) ? items.filter(item => item !== id) : (items ?? []).concat([id])), [setOpenCollapsedItems]);
+    const { searchItem, footerItems } = useCreateBaseItems({ footerActiveElementsRefs });
+    /**
+     * Объект с пропсами всех вложенных айтемов; ключ id
+     */
+    const { flattenItems, focusFlattenItems, ...memorizedItems } = useMemo(() => {
+        const pinTop = kindFlattenItems({
+            items: pinTopProp,
+            prefix: ITEM_PREFIXES.pinTop,
+            parentId: ITEM_PREFIXES.default,
+        });
+        const items = kindFlattenItems({
+            items: itemsProp,
+            prefix: ITEM_PREFIXES.default,
+            parentId: ITEM_PREFIXES.default,
+            sortable,
+        });
+        const pinBottom = kindFlattenItems({
+            items: pinBottomProp,
+            prefix: ITEM_PREFIXES.pinBottom,
+            parentId: 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 } = 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: selectionMode === 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 = useCallback(({ active, over }) => {
+        if (!onItemsReorder || !over || active.id === over.id) {
+            return;
+        }
+        onItemsReorder(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 === ITEM_TYPE.Simple || item?.type === ITEM_TYPE.Group)
+                .map(item => item.originalId)
+            : undefined,
+    };
+}
+export function useNewKeyboardNavigation({ mainRef, btnRef, focusFlattenItems, keyboardNavigationRef, hasListInFocusChain, firstItemId, }) {
+    const defaultActiveItemId = hasListInFocusChain ? undefined : firstItemId;
+    const [activeItemId, setActiveItemId] = useState(() => defaultActiveItemId);
+    const activeItemIdRef = useRef(defaultActiveItemId);
+    const resetActiveItemId = useCallback(() => {
+        setActiveItemId(defaultActiveItemId);
+        activeItemIdRef.current = defaultActiveItemId;
+    }, [defaultActiveItemId]);
+    const handleListKeyDownFactory = useCallback((ids, expandedIds) => (e) => {
+        // Стрелки навигации по списку гасим централизованно — иначе нативное поведение скроллит
+        // страницу (элементы — кнопки/li, не текст, поэтому безопасны все четыре стрелки).
+        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 !== ITEM_TYPE.Group) {
+                        item?.itemRef?.current?.focus();
+                    }
+                }
+                else {
+                    const itemId = ids[0];
+                    const item = focusFlattenItems[itemId];
+                    activeItemIdRef.current = itemId;
+                    setActiveItemId(itemId);
+                    if (item?.type !== 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 === 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 !== 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 = useCallback((itemId) => {
+        setActiveItemId(itemId);
+        activeItemIdRef.current = itemId;
+        const item = focusFlattenItems[itemId];
+        item?.itemRef?.current?.focus();
+    }, [focusFlattenItems]);
+    useImperativeHandle(keyboardNavigationRef, () => ({ focusItem: forceUpdateActiveItemId }), [forceUpdateActiveItemId]);
+    return {
+        resetActiveItemId,
+        activeItemId,
+        forceUpdateActiveItemId,
+        handleListKeyDownFactory,
+    };
+}

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

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

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

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

package/dist/esm/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);
+}