@snack-uikit/list 0.1.1-preview-57c837e3.0

package/dist/components/Lists/Droplist/DropList.js

@@ -0,0 +1,97 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cloneElement, isValidElement, useCallback, useMemo, useRef, useState } from 'react';
+import { useUncontrolledProp } from 'uncontrollable';
+import { Dropdown } from '@snack-uikit/dropdown';
+import { extractItemIds, extractItemRefs, withCollapsedItems } from '../../../utils';
+import { addItemsIds, getSlicedItems, useItemsWithIds } from '../../Items';
+import { extractSelectionProps, ParentListContext, SelectionProvider } from '../contexts';
+import { useKeyboardNavigation } from '../hooks';
+import { ListPrivate } from '../ListPrivate';
+export function Droplist(_a) {
+    var { items: itemsProp, search, pinBottom, pinTop, footerActiveElementsRefs, children, trigger, placement, widthStrategy, triggerElemRef: triggerElemRefProp, open: openProp, onOpenChange } = _a, props = __rest(_a, ["items", "search", "pinBottom", "pinTop", "footerActiveElementsRefs", "children", "trigger", "placement", "widthStrategy", "triggerElemRef", "open", "onOpenChange"]);
+    const hasSearch = useMemo(() => Boolean(search), [search]);
+    const memorizedItems = useMemo(() => addItemsIds((pinBottom !== null && pinBottom !== void 0 ? pinBottom : []).concat(itemsProp).concat(pinTop !== null && pinTop !== void 0 ? pinTop : [])), [itemsProp, pinBottom, pinTop]);
+    const [openCollapsedItems, setOpenCollapsedItems] = useState([]);
+    const { search: searchItem, footerRefs } = useItemsWithIds({
+        search: hasSearch,
+        footerActiveElementsRefs,
+    });
+    const { items, itemRefs, ids, expandedIds } = useMemo(() => {
+        const res = withCollapsedItems({
+            items: memorizedItems,
+            openCollapsedItems,
+        });
+        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,
+        };
+    }, [footerRefs, memorizedItems, openCollapsedItems, searchItem]);
+    const slicedItems = useMemo(() => getSlicedItems({ items, hasSearch, pinTop, pinBottom, footerRefs }), [items, hasSearch, pinTop, pinBottom, footerRefs]);
+    const triggerElemRef = useRef(null);
+    const listRef = useRef(null);
+    const { activeFocusIndex, setActiveFocusIndex, openNestedIndex, handleListKeyDown, resetNestedIndex, resetActiveFocusIndex, } = useKeyboardNavigation({ ids, expandedIds, parentRef: triggerElemRefProp !== null && triggerElemRefProp !== void 0 ? triggerElemRefProp : triggerElemRef, itemRefs });
+    const [open, setOpen] = useUncontrolledProp(openProp, false, onOpenChange);
+    const handleOpenChange = (open) => {
+        if (!open) {
+            resetNestedIndex();
+            resetActiveFocusIndex();
+            setOpenCollapsedItems([]);
+        }
+        setOpen(open);
+    };
+    const onKeyDown = useCallback((e, cb) => {
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            setOpen(true);
+            setTimeout(() => {
+                var _a;
+                (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                setActiveFocusIndex(0);
+            }, 0);
+        }
+        cb === null || cb === void 0 ? void 0 : cb(e);
+    }, [setActiveFocusIndex, setOpen]);
+    const triggerElem = useMemo(() => {
+        if (isValidElement(children)) {
+            const props = typeof children.props === 'object' ? children.props : {};
+            return cloneElement(children, Object.assign(Object.assign({}, props), { onKeyDown: (e) => {
+                    var _a;
+                    onKeyDown(e, (_a = children.props) === null || _a === void 0 ? void 0 : _a.onKeyDown);
+                } }));
+        }
+        return children;
+    }, [onKeyDown, children]);
+    return (
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    _jsx(SelectionProvider, Object.assign({}, extractSelectionProps(props), { children: _jsx(ParentListContext.Provider, { value: {
+                parentIds: ids,
+                parentActiveFocusIndex: activeFocusIndex,
+                parentExpandedIds: expandedIds,
+                parentItemRefs: itemRefs,
+                parentOpenNestedIndex: openNestedIndex,
+                triggerRef: triggerElemRefProp !== null && triggerElemRefProp !== void 0 ? triggerElemRefProp : triggerElemRef,
+                parentRef: listRef,
+                parentResetNestedIndex: resetNestedIndex,
+                parentResetActiveFocusIndex: resetActiveFocusIndex,
+                toggleOpenCollapsedItems: id => setOpenCollapsedItems(items => items.includes(id) ? items.filter(item => item !== id) : items.concat([id])),
+            }, children: _jsx(Dropdown, Object.assign({ content: _jsx(ListPrivate, Object.assign({ onKeyDown: handleListKeyDown, tabIndex: 0, ref: listRef, search: search }, slicedItems, props)), trigger: trigger, placement: placement, widthStrategy: widthStrategy }, (triggerElemRefProp
+                ? {}
+                : {
+                    triggerRef: triggerElemRef,
+                }), { open: open, onOpenChange: handleOpenChange, children: triggerElem })) }) })));
+}

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

@@ -0,0 +1 @@
+export * from './DropList';

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

@@ -0,0 +1 @@
+export * from './DropList';

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export declare const List: import("react").ForwardRefExoticComponent<{
+    'data-test-id'?: string | undefined;
+} & import("react").AriaAttributes & {
+    items: import("../../Items").ItemProps[];
+    pinTop?: import("../../Items").ItemProps[] | undefined;
+    pinBottom?: import("../../Items").ItemProps[] | undefined;
+    footer?: import("react").ReactNode;
+    search?: import("../../../types").SearchState | undefined;
+    loading?: boolean | undefined;
+    noData?: string | undefined;
+    noResults?: string | undefined;
+    footerActiveElementsRefs?: import("react").RefObject<HTMLElement>[] | undefined;
+} & Pick<import("../contexts").SelectionProviderProps, "value" | "defaultValue" | "selection" | "onChange"> & import("../contexts").ListContextType & import("../../../types").ScrollProps & import("react").RefAttributes<HTMLElement>>;

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

@@ -0,0 +1,77 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useMemo, useRef, useState } from 'react';
+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 { ListPrivate } from '../ListPrivate';
+import styles from '../styles.module.css';
+export const List = forwardRef((_a) => {
+    var { items: itemsProp, search, pinBottom, pinTop, footerActiveElementsRefs } = _a, props = __rest(_a, ["items", "search", "pinBottom", "pinTop", "footerActiveElementsRefs"]);
+    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] = useState([]);
+    const { search: searchItem, footerRefs } = useItemsWithIds({
+        search: hasSearch,
+        footerActiveElementsRefs,
+    });
+    const { items, itemRefs, ids, expandedIds } = useMemo(() => {
+        const res = withCollapsedItems({
+            items: memorizedItems,
+            openCollapsedItems,
+        });
+        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,
+        };
+    }, [footerRefs, memorizedItems, openCollapsedItems, searchItem]);
+    const slicedItems = useMemo(() => getSlicedItems({ items, hasSearch, pinTop, pinBottom, footerRefs }), [items, hasSearch, pinTop, pinBottom, footerRefs]);
+    const listRef = useRef(null);
+    const btnRef = useRef(null);
+    const { triggerRef } = useParentListContext();
+    const { activeFocusIndex, openNestedIndex, handleListKeyDown, resetNestedIndex, resetActiveFocusIndex, setActiveFocusIndex, } = useKeyboardNavigation({
+        ids,
+        expandedIds,
+        parentRef: listRef,
+        btnRef,
+        itemRefs,
+    });
+    const isActive = listRef.current === document.activeElement && activeFocusIndex === -1 && openNestedIndex === -1;
+    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.concat([id])),
+            }, children: _jsxs("div", { className: styles.wrapper, "data-active": isActive || undefined, children: [_jsx(ListPrivate, Object.assign({}, props, slicedItems, { ref: listRef, onFocus: e => {
+                            if (e.relatedTarget === null ||
+                                (e.relatedTarget && itemRefs.every(({ current }) => current !== e.relatedTarget))) {
+                                resetActiveFocusIndex();
+                            }
+                        }, onKeyDown: handleListKeyDown, tabIndex: 0, search: search, nested: false })), _jsx(HiddenTabButton, { ref: btnRef, listRef: listRef })] }) }) })));
+});

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

@@ -0,0 +1 @@
+export * from './List';

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

@@ -0,0 +1 @@
+export * from './List';

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

@@ -0,0 +1,22 @@
+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;
+    search?: import("../../../types").SearchState | undefined;
+    loading?: boolean | undefined;
+    noData?: string | undefined;
+    noResults?: string | undefined;
+    footerActiveElementsRefs?: RefObject<HTMLElement>[] | undefined;
+} & Pick<import("../contexts").SelectionProviderProps, "value" | "defaultValue" | "selection" | "onChange"> & import("../contexts").ListContextType & import("../../../types").ScrollProps & {
+    nested?: boolean | undefined;
+    active?: boolean | undefined;
+    tabIndex?: number | undefined;
+    onFocus?(e: import("react").FocusEvent<HTMLElement, Element>): void;
+    onBlur?(e: import("react").FocusEvent<HTMLElement, Element>): void;
+    onKeyDown?(e: import("react").KeyboardEvent<HTMLElement>): void;
+    collapse?: "single" | "multiple" | undefined;
+} & import("react").RefAttributes<HTMLElement>>;

package/dist/components/Lists/ListPrivate/ListPrivate.js

@@ -0,0 +1,41 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import { forwardRef, useMemo } from 'react';
+import { Spinner } from '@snack-uikit/loaders';
+import { Scroll } from '@snack-uikit/scroll';
+import { ToggleGroup } from '@snack-uikit/toggles';
+import { extractSupportProps } from '@snack-uikit/utils';
+import { PinBottomGroupItem, PinTopGroupItem, SearchItem, useRenderItems } from '../../Items';
+import { ListContextProvider } from '../contexts';
+import commonStyles from '../styles.module.css';
+import styles from './styles.module.css';
+export const ListPrivate = forwardRef((_a, ref) => {
+    var _b, _c;
+    var { items, pinTop, pinBottom, collapse = 'multiple', onKeyDown, onBlur, onFocus, tabIndex, active, scroll, nested, search, scrollRef, scrollContainerRef, footer, loading, noData = 'No data', noResults = 'No results', size = 's', marker } = _a, props = __rest(_a, ["items", "pinTop", "pinBottom", "collapse", "onKeyDown", "onBlur", "onFocus", "tabIndex", "active", "scroll", "nested", "search", "scrollRef", "scrollContainerRef", "footer", "loading", "noData", "noResults", "size", "marker"]);
+    const itemsJSX = useRenderItems(items);
+    const itemsPinTopJSX = useRenderItems(pinTop !== null && pinTop !== void 0 ? pinTop : []);
+    const itemsPinBottomJSX = useRenderItems(pinBottom !== null && pinBottom !== void 0 ? pinBottom : []);
+    const hasNoItems = items.length + ((_b = pinTop === null || pinTop === void 0 ? void 0 : pinTop.length) !== null && _b !== void 0 ? _b : 0) + ((_c = pinBottom === null || pinBottom === void 0 ? void 0 : pinBottom.length) !== null && _c !== void 0 ? _c : 0) === 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(_Fragment, { children: [itemsJSX, loadingJSX, hasNoItems && !(search === null || search === void 0 ? void 0 : search.value) && !loading && (_jsx("div", { className: commonStyles.infoBlock, "data-test-id": 'list__no-data', children: noData })), hasNoItems && (search === null || search === void 0 ? void 0 : search.value) && !loading && (_jsx("div", { className: commonStyles.infoBlock, "data-test-id": 'list__no-results', children: noResults }))] })), [hasNoItems, itemsJSX, loading, loadingJSX, noData, noResults, search === null || search === void 0 ? void 0 : search.value]);
+    const listJSX = (_jsx("ul", Object.assign({ className: commonStyles.listContainer, ref: ref, onKeyDown: onKeyDown, tabIndex: tabIndex, onFocus: !nested ? onFocus : undefined, onBlur: onBlur, "data-active": active || undefined, role: 'menu' }, extractSupportProps(props), { children: _jsxs(ToggleGroup, { selectionMode: collapse, 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({
+                        [commonStyles.scrollContainerS]: scroll && size === 's',
+                        [commonStyles.scrollContainerM]: scroll && size === 'm',
+                        [commonStyles.scrollContainerL]: scroll && size === 'l',
+                    }), barHideStrategy: 'never', size: 's', 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 || footer) && (_jsxs(PinBottomGroupItem, { children: [Number(pinBottom === null || pinBottom === void 0 ? void 0 : pinBottom.length) > 0 && itemsPinBottomJSX, footer && _jsx("div", { className: styles.footer, children: footer })] }))] }) })));
+    if (!nested) {
+        return (_jsx(ListContextProvider, { size: size, marker: marker, children: listJSX }));
+    }
+    return (_jsx("li", { style: { listStyleType: 'none' }, role: 'menuitem', children: listJSX }));
+});

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

@@ -0,0 +1 @@
+export * from './ListPrivate';

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

@@ -0,0 +1 @@
+export * from './ListPrivate';

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

@@ -0,0 +1,46 @@
+.loader{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+}
+.loader[data-size=s]{
+  height:var(--dimension-3m, 24px);
+}
+.loader[data-size=s][data-no-items]{
+  height:calc(3 * var(--dimension-3m, 24px));
+}
+.loader[data-size=m]{
+  height:var(--dimension-4m, 32px);
+}
+.loader[data-size=m][data-no-items]{
+  height:calc(3 * var(--dimension-4m, 32px));
+}
+.loader[data-size=l]{
+  height:var(--dimension-5m, 40px);
+}
+.loader[data-size=l][data-no-items]{
+  height:calc(3 * var(--dimension-5m, 40px));
+}
+.loader:focus-visible{
+  outline-width:var(--border-state-focus-s-border-width, 2px);
+  outline-style:var(--border-state-focus-s-border-style, solid);
+  outline-color:var(--border-state-focus-s-border-color, );
+  outline-offset:calc(var(--border-state-focus-s-border-width, 2px) * -1);
+  outline-color:var(--sys-available-complementary, #131313);
+}
+
+.scrollStub{
+  height:calc(var(--dimension-025m, 2px) / 2);
+  margin-top:calc(var(--dimension-025m, 2px) / -2);
+  background:transparent;
+}
+
+.footer{
+  display:flex;
+  flex-direction:column;
+  gap:var(--dimension-050m, 4px);
+  align-items:center;
+  justify-content:center;
+  box-sizing:border-box;
+  padding:var(--dimension-050m, 4px);
+}

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export type CollapseContextType = {
+    level?: number;
+};
+export declare const CollapseContext: import("react").Context<CollapseContextType>;
+export declare const useCollapseContext: () => CollapseContextType;

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

@@ -0,0 +1,3 @@
+import { createContext, useContext } from 'react';
+export const CollapseContext = createContext({});
+export const useCollapseContext = () => useContext(CollapseContext);

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

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+export type ListContextType = {
+    size?: 's' | 'm' | 'l';
+    marker?: boolean;
+};
+type Child = {
+    children: ReactNode;
+};
+export declare const ListContext: import("react").Context<ListContextType>;
+export declare const useListContext: () => ListContextType;
+export declare function ListContextProvider({ children, ...props }: ListContextType & Child): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,22 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+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 }) {
+    return { size, marker };
+}
+export function ListContextProvider(_a) {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    return _jsx(ListContext.Provider, { value: extractListProps(props), children: children });
+}

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

@@ -0,0 +1,18 @@
+import { RefObject } from 'react';
+export type ParentListContextType = {
+    parentActiveFocusIndex: number;
+    parentSetActiveFocusIndex?(idx: number): void;
+    parentResetActiveFocusIndex?(): void;
+    parentIds: Array<string | number>;
+    parentExpandedIds: Array<string | number>;
+    parentItemRefs: Array<RefObject<HTMLButtonElement>>;
+    parentOpenNestedIndex: number;
+    parentResetNestedIndex?(): void;
+    openCollapsedItems?: Array<string | number>;
+    toggleOpenCollapsedItems?(id: string | number): void;
+    triggerRef?: RefObject<HTMLElement>;
+    parentRef?: RefObject<HTMLElement>;
+};
+export declare const ParentListContext: import("react").Context<ParentListContextType>;
+export declare const useParentListContext: () => ParentListContextType;
+export declare function ParentListProvider(): null;

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

@@ -0,0 +1,12 @@
+import { createContext, useContext } from 'react';
+export const ParentListContext = createContext({
+    parentActiveFocusIndex: -1,
+    parentOpenNestedIndex: -1,
+    parentIds: [],
+    parentExpandedIds: [],
+    parentItemRefs: [],
+});
+export const useParentListContext = () => useContext(ParentListContext);
+export function ParentListProvider() {
+    return null;
+}

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

@@ -0,0 +1,53 @@
+import { ReactNode } from 'react';
+type SelectionSingleValueType = string | number | undefined;
+export type SelectionSingleProps = {
+    /** Начальное состояние */
+    defaultValue?: SelectionSingleValueType;
+    /** Controlled состояние */
+    value?: SelectionSingleValueType;
+    /** Controlled обработчик измения состояния */
+    onChange?(value: any): void;
+    setValue?(value: any): void;
+    /** Режим выбора */
+    selection: 'single';
+    /** Режим выбора single */
+    isSelectionSingle: true;
+    /** Режим выбора multi */
+    isSelectionMultiple: false;
+};
+export type SelectionMultipleProps = {
+    /** Начальное состояние */
+    defaultValue?: SelectionSingleValueType[];
+    /** Controlled состояние */
+    value?: SelectionSingleValueType[];
+    /** Controlled обработчик измения состояния */
+    onChange?(value: any): void;
+    setValue?(value: any): void;
+    /** Режим выбора */
+    selection: 'multiple';
+    /** Режим выбора single */
+    isSelectionSingle: false;
+    /** Режим выбора multi */
+    isSelectionMultiple: true;
+};
+type SelectionNoneProps = {
+    selection?: undefined;
+    value?: undefined;
+    onChange?: undefined;
+    setValue?: undefined;
+    defaultValue?: undefined;
+    isSelectionSingle?: undefined;
+    isSelectionMultiple?: undefined;
+};
+export type SelectionProviderProps = SelectionSingleProps | SelectionMultipleProps | SelectionNoneProps;
+type SelectionContextType = Omit<SelectionNoneProps, 'defaultValue'> | Omit<SelectionSingleProps, 'defaultValue'> | Omit<SelectionMultipleProps, 'defaultValue'>;
+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;
+type Child = {
+    children: ReactNode;
+};
+export declare function SelectionProvider(props: SelectionProviderProps & Child): import("react/jsx-runtime").JSX.Element;
+export declare const useSelectionContext: () => SelectionContextType;
+export declare function extractSelectionProps<T extends SelectionProviderProps>({ selection, value, defaultValue, onChange, }: T): SelectionProviderProps;
+export {};

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

@@ -0,0 +1,61 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext } from 'react';
+import { useUncontrolledProp } from 'uncontrollable';
+export const SelectionContext = createContext({
+    value: undefined,
+    onChange: undefined,
+    selection: undefined,
+});
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function isSelectionMultipleProps(props) {
+    return 'selection' in props && props['selection'] === 'multiple';
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function isSelectionSingleProps(props) {
+    return 'selection' in props && props['selection'] === 'single';
+}
+function SelectionSingleProvider({ value: valueProp, defaultValue, onChange: onChangeProp, children, }) {
+    const [value, setValue] = useUncontrolledProp(valueProp, defaultValue, cb => {
+        onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(cb(value));
+    });
+    const onChange = useCallback((newValue) => setValue((oldValue) => {
+        if (newValue !== oldValue) {
+            return newValue;
+        }
+        return undefined;
+    }), [setValue]);
+    return (_jsx(SelectionContext.Provider, { value: { value, onChange, selection: 'single', isSelectionSingle: true, isSelectionMultiple: false, setValue }, children: children }));
+}
+function SelectionMultipleProvider({ value: valueProp, defaultValue, onChange: onChangeProp, children, }) {
+    const [value, setValue] = useUncontrolledProp(valueProp, defaultValue, cb => {
+        onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(cb(value));
+    });
+    const onChange = useCallback((newValue) => setValue((oldValues) => {
+        if (Array.isArray(oldValues)) {
+            if (oldValues.includes(newValue)) {
+                return oldValues.filter(oldValue => oldValue !== newValue);
+            }
+            return oldValues.concat(newValue);
+        }
+        return undefined;
+    }), [setValue]);
+    return (_jsx(SelectionContext.Provider, { value: { value, onChange, selection: 'multiple', isSelectionSingle: false, isSelectionMultiple: true, setValue }, children: children }));
+}
+export function SelectionProvider(props) {
+    if (isSelectionSingleProps(props)) {
+        return _jsx(SelectionSingleProvider, Object.assign({}, props));
+    }
+    if (isSelectionMultipleProps(props)) {
+        return _jsx(SelectionMultipleProvider, Object.assign({}, props));
+    }
+    return _jsx(SelectionContext.Provider, { value: {}, children: props.children });
+}
+export const useSelectionContext = () => useContext(SelectionContext);
+export function extractSelectionProps({ selection, value, defaultValue, onChange, }) {
+    return {
+        selection,
+        value,
+        defaultValue,
+        onChange,
+    };
+}

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

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

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

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

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

@@ -0,0 +1,16 @@
+import { KeyboardEvent, RefObject } from 'react';
+export type UseKeyboardNavigationProps<T extends HTMLElement> = {
+    ids: Array<number | string>;
+    expandedIds: Array<number | string>;
+    parentRef?: RefObject<T>;
+    btnRef?: RefObject<HTMLButtonElement>;
+    itemRefs?: RefObject<HTMLButtonElement>[];
+};
+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;
+};

package/dist/components/Lists/hooks.js

@@ -0,0 +1,73 @@
+import { useEffect, useState } from 'react';
+export function useKeyboardNavigation({ ids, itemRefs, expandedIds, parentRef, btnRef, }) {
+    const [activeFocusIndex, setActiveFocusIndex] = useState(-1);
+    const [openNestedIndex, setOpenNestedIndex] = useState(-1);
+    const handleListKeyDown = (e) => {
+        var _a, _b, _c, _d;
+        switch (e.key) {
+            case 'ArrowDown': {
+                setActiveFocusIndex(activeIndex => Math.min(activeIndex + 1, ids.length - 1));
+                // TODO: go to loader from last item
+                // if (activeFocusIndex === ids.length - 2) {
+                //   return;
+                // }
+                e.stopPropagation();
+                e.preventDefault();
+                return;
+            }
+            case 'ArrowUp': {
+                if (activeFocusIndex === 0) {
+                    (_a = parentRef === null || parentRef === void 0 ? void 0 : parentRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                    setActiveFocusIndex(-1);
+                    return;
+                }
+                setActiveFocusIndex(activeIndex => Math.max(activeIndex - 1, 0));
+                e.stopPropagation();
+                e.preventDefault();
+                return;
+            }
+            case 'ArrowRight': {
+                if (expandedIds.includes(ids[activeFocusIndex])) {
+                    setOpenNestedIndex(activeFocusIndex);
+                }
+                e.stopPropagation();
+                e.preventDefault();
+                return;
+            }
+            case 'Tab': {
+                if (parentRef && activeFocusIndex !== -1) {
+                    e.preventDefault();
+                    (_b = parentRef === null || parentRef === void 0 ? void 0 : parentRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+                }
+                else if (activeFocusIndex === -1) {
+                    btnRef && !e.shiftKey ? (_c = btnRef === null || btnRef === void 0 ? void 0 : btnRef.current) === null || _c === void 0 ? void 0 : _c.focus() : (_d = parentRef === null || parentRef === void 0 ? void 0 : parentRef.current) === null || _d === void 0 ? void 0 : _d.focus();
+                }
+                setOpenNestedIndex(-1);
+                setActiveFocusIndex(-1);
+                return;
+            }
+            default: {
+                return;
+            }
+        }
+    };
+    const resetNestedIndex = () => {
+        setActiveFocusIndex(openNestedIndex);
+        setOpenNestedIndex(-1);
+    };
+    const resetActiveFocusIndex = () => {
+        setActiveFocusIndex(-1);
+    };
+    useEffect(() => {
+        var _a, _b;
+        activeFocusIndex !== -1 && openNestedIndex === -1 && ((_b = (_a = itemRefs === null || itemRefs === void 0 ? void 0 : itemRefs[activeFocusIndex]) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.focus());
+    }, [activeFocusIndex, itemRefs, openNestedIndex]);
+    return {
+        activeFocusIndex,
+        setActiveFocusIndex,
+        openNestedIndex,
+        resetNestedIndex,
+        resetActiveFocusIndex,
+        handleListKeyDown,
+    };
+}

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

@@ -0,0 +1,4 @@
+export * from './Droplist';
+export * from './List';
+export type { ListProps, DroplistProps } from './types';
+export type { SelectionSingleProps, SelectionMultipleProps, isSelectionSingleProps, isSelectionMultipleProps, } from './contexts';

package/dist/components/Lists/index.js

@@ -0,0 +1,2 @@
+export * from './Droplist';
+export * from './List';