@snack-uikit/list 0.19.0 → 0.21.0

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

@@ -29,6 +29,10 @@ export type ListProps = WithSupportProps<{
     footer?: ReactNode;
     /** Список ссылок на кастомные элементы, помещенные в специальную секцию внизу списка  */
     footerActiveElementsRefs?: RefObject<HTMLElement>[];
+    /** Ссылка на управление навигацией листа с клавиатуры  */
+    keyboardNavigationRef?: RefObject<{
+        focusItem(id: ItemId): void;
+    }>;
     /** Настройки поисковой строки */
     search?: SearchState;
     /** Tab Index */
@@ -37,9 +41,14 @@ export type ListProps = WithSupportProps<{
     collapse?: CollapseState;
     /** CSS-класс */
     className?: string;
-    onKeyDown?(e: KeyboardEvent<HTMLElement>): void;
     /** Флаг, отвещающий за состояние загрузки списка */
     loading?: boolean;
+    /** Обработчик события по нажатию клавиш */
+    onKeyDown?(e: KeyboardEvent<HTMLElement>): void;
+    /** Флаг, отвещающий за включение самого родительского контейнера листа в цепочку фокусирующихся элементов */
+    hasListInFocusChain?: boolean;
+    /** Флаг, отвещающий за прокручивание до выбранного элемента */
+    scrollToSelectedItem?: boolean;
 } & SelectionState & PublicListContextType & ScrollProps & EmptyState>;
 export type DroplistProps = {
     /** Ссылка на элемент-триггер для дроплиста */
@@ -62,8 +71,8 @@ export type DroplistProps = {
     children: ReactNode | ((params: {
         onKeyDown?: (e: KeyboardEvent<HTMLElement>) => void;
     }) => ReactNode);
-} & Pick<DropdownProps, 'trigger' | 'placement' | 'widthStrategy' | 'open' | 'onOpenChange' | 'triggerClassName'> & Omit<ListProps, 'tabIndex' | 'onKeyDown'>;
-export type ListPrivateProps = Omit<ListProps, 'pinTop' | 'pinBottom' | 'items'> & {
+} & Pick<DropdownProps, 'trigger' | 'placement' | 'widthStrategy' | 'open' | 'onOpenChange' | 'triggerClassName'> & Omit<ListProps, 'tabIndex' | 'onKeyDown' | 'hasListInFocusChain' | 'keyboardNavigationRef'>;
+export type ListPrivateProps = Omit<ListProps, 'pinTop' | 'pinBottom' | 'items' | 'hasListInFocusChain'> & {
     nested?: boolean;
     active?: boolean;
     tabIndex?: number;

package/dist/cjs/constants.d.ts

@@ -0,0 +1,8 @@
+export declare const ITEM_PREFIXES: {
+    default: string;
+    pinTop: string;
+    pinBottom: string;
+    footer: string;
+    search: string;
+    dropFocus: string;
+};

package/dist/cjs/constants.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ITEM_PREFIXES = void 0;
+exports.ITEM_PREFIXES = {
+  default: '~main',
+  pinTop: '~pinTop',
+  pinBottom: '~pinBottom',
+  footer: '~footer',
+  search: '~search',
+  dropFocus: '~dropFocus'
+};

package/dist/cjs/index.d.ts

@@ -2,3 +2,5 @@ export * from './components';
 export type { SearchState } from './types';
 export { kindFlattenItems } from './components/Items';
 export * from './helperComponents/ItemContent';
+export * from './utils';
+export * from './constants';

package/dist/cjs/index.js

@@ -31,4 +31,6 @@ Object.defineProperty(exports, "kindFlattenItems", {
     return Items_1.kindFlattenItems;
   }
 });
-__exportStar(require("./helperComponents/ItemContent"), exports);
+__exportStar(require("./helperComponents/ItemContent"), exports);
+__exportStar(require("./utils"), exports);
+__exportStar(require("./constants"), exports);

package/dist/cjs/utils.d.ts

@@ -0,0 +1,16 @@
+import { ItemId } from './components';
+/**
+ * Возвращает id для элемента футера
+ * @function  helper
+ */
+export declare const getFooterItemId: (id: ItemId) => string;
+/**
+ * Возвращает id для элемента, подставляя перфикс
+ * @function  helper
+ */
+export declare const getItemAutoId: (prefix: ItemId, id: ItemId) => string;
+/**
+ * Возвращает id для дефолтного элемента
+ * @function  helper
+ */
+export declare const getDefaultItemId: (id: ItemId) => string;

package/dist/cjs/utils.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getDefaultItemId = exports.getItemAutoId = exports.getFooterItemId = void 0;
+const constants_1 = require("./constants");
+/**
+ * Возвращает id для элемента футера
+ * @function  helper
+ */
+const getFooterItemId = id => `${constants_1.ITEM_PREFIXES.footer}__${id}`;
+exports.getFooterItemId = getFooterItemId;
+/**
+ * Возвращает id для элемента, подставляя перфикс
+ * @function  helper
+ */
+const getItemAutoId = (prefix, id) => [prefix, id].join('-');
+exports.getItemAutoId = getItemAutoId;
+/**
+ * Возвращает id для дефолтного элемента
+ * @function  helper
+ */
+const getDefaultItemId = id => (0, exports.getItemAutoId)(constants_1.ITEM_PREFIXES.default, id);
+exports.getDefaultItemId = getDefaultItemId;

package/dist/esm/components/Items/BaseItem/BaseItem.js

@@ -23,11 +23,11 @@ export function BaseItem(_a) {
     var _b;
     var { beforeContent, afterContent, content, onClick, onMouseDown, id, expandIcon, disabled, open, itemRef, switch: switchProp, onKeyDown, onFocus, indeterminate, checked: checkedProp, onSelect, onOpenNestedList, isParentNode, className, inactive, itemWrapRender } = _a, rest = __rest(_a, ["beforeContent", "afterContent", "content", "onClick", "onMouseDown", "id", "expandIcon", "disabled", "open", "itemRef", "switch", "onKeyDown", "onFocus", "indeterminate", "checked", "onSelect", "onOpenNestedList", "isParentNode", "className", "inactive", "itemWrapRender"]);
     const interactive = !inactive;
-    const { size = 's', marker, contentRender } = useNewListContext();
+    const { size = 's', marker, contentRender, firstItemId, focusFlattenItems } = useNewListContext();
     const { level = 0 } = useCollapseLevelContext();
     const { closeDroplist, closeDroplistOnItemClick } = useOpenListContext();
     const { value, onChange, mode, isSelectionSingle, isSelectionMultiple } = useSelectionContext();
-    const isChecked = isSelectionSingle ? checkedProp !== null && checkedProp !== void 0 ? checkedProp : value === id : checkedProp !== null && checkedProp !== void 0 ? checkedProp : value === null || value === void 0 ? void 0 : value.includes(id !== null && id !== void 0 ? id : '');
+    const isChecked = isSelectionSingle ? (checkedProp !== null && checkedProp !== void 0 ? checkedProp : value === id) : (checkedProp !== null && checkedProp !== void 0 ? checkedProp : value === null || value === void 0 ? void 0 : value.includes(id !== null && id !== void 0 ? id : ''));
     const handleChange = () => {
         onChange === null || onChange === void 0 ? void 0 : onChange(id);
     };
@@ -86,7 +86,7 @@ export function BaseItem(_a) {
         }
     };
     const props = extractSupportProps(rest);
-    const itemJSX = (_jsx("div", { className: cn(commonStyles.itemWrapper, styles.innerWrapper, className), "data-inactive": inactive || undefined, "data-disabled": disabled || undefined, "data-variant": mode || undefined, "data-checked": (isParentNode && (indeterminate || isChecked)) || (isChecked && !switchProp) || undefined, children: _jsxs("li", { "data-type": 'outside', role: 'menuitem', "data-test-id": props['data-test-id'] || 'list__base-item_' + id, "data-checked": (isParentNode && (indeterminate || isChecked)) || (isChecked && !switchProp) || undefined, ref: itemRef, className: cn(commonStyles.listItem, styles.droplistItem), "data-size": size, onClick: handleItemClick, onMouseDown: handleItemMouseDown, tabIndex: -1, "data-non-pointer": inactive && !onClick, "data-variant": mode || undefined, "data-open": open || undefined, onKeyDown: handleItemKeyDown, onFocus: handleItemFocus, style: { '--level': level }, children: [!switchProp && isSelectionSingle && marker && !isParentNode && interactive && (_jsx("div", { className: styles.markerContainer, "data-test-id": 'list__base-item-marker' })), !switchProp && isSelectionMultiple && interactive && (_jsx("div", { className: styles.checkbox, children: _jsx(Checkbox, { size: CHECKBOX_SIZE_MAP[size !== null && size !== void 0 ? size : 's'], disabled: disabled, tabIndex: -1, onChange: isParentNode ? handleCheckboxChange : undefined, checked: isChecked, "data-test-id": 'list__base-item-checkbox', onClick: handleCheckboxClick, indeterminate: indeterminate }) })), beforeContent && _jsx("div", { className: styles.beforeContent, children: beforeContent }), content && isContentItem(content) ? ((_b = contentRender === null || contentRender === void 0 ? void 0 : contentRender({ id, content, disabled })) !== null && _b !== void 0 ? _b : _jsx(ItemContent, Object.assign({ disabled: disabled }, content))) : (_jsxs("div", { className: styles.content, children: [" ", content, " "] })), afterContent, switchProp && interactive && (_jsx(Switch, { disabled: disabled, checked: isChecked, "data-test-id": 'list__base-item-switch' })), !switchProp && expandIcon && _jsx("span", { className: styles.expandableIcon, children: expandIcon })] }) }));
+    const itemJSX = (_jsx("div", { className: cn(commonStyles.itemWrapper, styles.innerWrapper, className), "data-inactive": inactive || undefined, "data-disabled": disabled || undefined, "data-variant": mode || undefined, "data-checked": (isParentNode && (indeterminate || isChecked)) || (isChecked && !switchProp) || undefined, children: _jsxs("li", { "data-type": 'outside', role: 'menuitem', "data-test-id": props['data-test-id'] || 'list__base-item_' + id, "data-checked": (isParentNode && (indeterminate || isChecked)) || (isChecked && !switchProp) || undefined, ref: itemRef, className: cn(commonStyles.listItem, styles.droplistItem), "data-size": size, onClick: handleItemClick, onMouseDown: handleItemMouseDown, tabIndex: id === focusFlattenItems[firstItemId].originalId ? 0 : -1, "data-non-pointer": inactive && !onClick, "data-variant": mode || undefined, "data-open": open || undefined, onKeyDown: handleItemKeyDown, onFocus: handleItemFocus, style: { '--level': level }, children: [!switchProp && isSelectionSingle && marker && !isParentNode && interactive && (_jsx("div", { className: styles.markerContainer, "data-test-id": 'list__base-item-marker' })), !switchProp && isSelectionMultiple && interactive && (_jsx("div", { className: styles.checkbox, children: _jsx(Checkbox, { size: CHECKBOX_SIZE_MAP[size !== null && size !== void 0 ? size : 's'], disabled: disabled, tabIndex: -1, onChange: isParentNode ? handleCheckboxChange : undefined, checked: isChecked, "data-test-id": 'list__base-item-checkbox', onClick: handleCheckboxClick, indeterminate: indeterminate }) })), beforeContent && _jsx("div", { className: styles.beforeContent, children: beforeContent }), content && isContentItem(content) ? (((_b = contentRender === null || contentRender === void 0 ? void 0 : contentRender({ id, content, disabled })) !== null && _b !== void 0 ? _b : _jsx(ItemContent, Object.assign({ disabled: disabled }, content)))) : (_jsxs("div", { className: styles.content, children: [" ", content, " "] })), afterContent, switchProp && interactive && (_jsx(Switch, { disabled: disabled, checked: isChecked, "data-test-id": 'list__base-item-switch' })), !switchProp && expandIcon && _jsx("span", { className: styles.expandableIcon, children: expandIcon })] }) }));
     if (!itemWrapRender) {
         return itemJSX;
     }

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

@@ -13,6 +13,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Dropdown } from '@snack-uikit/dropdown';
 import { ChevronRightSVG } from '@snack-uikit/icons';
+import { ITEM_PREFIXES } from '../../../constants';
 import { useCollapseContext, useFocusListContext, useNewListContext, useSelectionContext } from '../../Lists/contexts';
 import { ListPrivate } from '../../Lists/ListPrivate';
 import { BaseItem } from '../BaseItem';
@@ -52,7 +53,7 @@ export function NextListItem(_a) {
         allChildIds,
     });
     const handleOutsideClick = useCallback(() => {
-        forceUpdateActiveItemId === null || forceUpdateActiveItemId === void 0 ? void 0 : forceUpdateActiveItemId('~drop-focus');
+        forceUpdateActiveItemId === null || forceUpdateActiveItemId === void 0 ? void 0 : forceUpdateActiveItemId(ITEM_PREFIXES.dropFocus);
         setOpen(false);
         return true;
     }, [forceUpdateActiveItemId]);

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

@@ -1,11 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import cn from 'classnames';
 import { SearchPrivate } from '@snack-uikit/search-private';
+import { ITEM_PREFIXES } from '../../../constants';
 import { useNewListContext } from '../../Lists/contexts';
 import commonStyles from '../styles.module.css';
 import styles from './styles.module.css';
 export function SearchItem({ search, itemRef }) {
-    const { size = 's' } = useNewListContext();
+    const { size = 's', firstItemId } = useNewListContext();
     const handleKeyDown = (e) => {
         if (['ArrowDown', 'ArrowUp'].includes(e.key)) {
             e.preventDefault();
@@ -17,5 +18,5 @@ export function SearchItem({ search, itemRef }) {
     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: itemRef })) }));
+    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: ITEM_PREFIXES.search === firstItemId ? 0 : -1, onKeyDown: handleKeyDown, onFocus: handleFocus }, search, { ref: itemRef })) }));
 }

package/dist/esm/components/Items/hooks.js

@@ -1,5 +1,7 @@
 import { createElement as _createElement } from "react";
 import { createRef, useMemo } from 'react';
+import { ITEM_PREFIXES } from '../../constants';
+import { getFooterItemId } from '../../utils';
 import { useNewListContext, useSelectionContext } from '../Lists/contexts';
 import { AccordionItem } from './AccordionItem';
 import { BaseItem } from './BaseItem';
@@ -40,15 +42,15 @@ export function useCreateBaseItems({ footerActiveElementsRefs }) {
         return ({
             searchItem: {
                 itemRef: createRef(),
-                id: '~search',
-                parentId: '~main',
+                id: ITEM_PREFIXES.search,
+                parentId: ITEM_PREFIXES.default,
                 items: [],
                 allChildIds: [],
             },
             footerItems: (_a = footerActiveElementsRefs === null || footerActiveElementsRefs === void 0 ? void 0 : footerActiveElementsRefs.map((itemRef, idx) => ({
-                id: `~footer__${idx}`,
+                id: getFooterItemId(idx),
                 itemRef,
-                parentId: '~main',
+                parentId: ITEM_PREFIXES.default,
                 items: [],
                 allChildIds: [],
             }))) !== null && _a !== void 0 ? _a : [],

package/dist/esm/components/Items/utils.js

@@ -10,6 +10,8 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { createRef } from 'react';
+import { ITEM_PREFIXES } from '../../constants';
+import { getItemAutoId } from '../../utils';
 export function isBaseItem(item) {
     return item && !('items' in item);
 }
@@ -35,9 +37,9 @@ export const isGroupItemProps = isGroupItem;
 export function kindFlattenItems({ items, prefix, parentId }) {
     const flattenItems = {};
     const focusFlattenItems = {};
-    function flatten({ item, idx, prefix, parentId = '~main' }) {
+    function flatten({ item, idx, prefix, parentId = ITEM_PREFIXES.default }) {
         var _a, _b;
-        const autoId = prefix !== undefined ? [prefix, idx].join('-') : String(idx);
+        const autoId = prefix !== undefined ? getItemAutoId(prefix, idx) : String(idx);
         const itemId = (_a = (!isGroupItem(item) ? item.id : undefined)) !== null && _a !== void 0 ? _a : autoId;
         if (isBaseItem(item)) {
             flattenItems[itemId] = Object.assign(Object.assign({}, item), { items: [], allChildIds: [], id: itemId });
@@ -58,7 +60,7 @@ export function kindFlattenItems({ items, prefix, parentId }) {
         const closeChildIds = [];
         const autoChildIds = [];
         const { items } = item, rest = __rest(item, ["items"]);
-        const childActiveParent = isGroupItem(item) ? parentId !== null && parentId !== void 0 ? parentId : '~main' : autoId;
+        const childActiveParent = isGroupItem(item) ? parentId !== null && parentId !== void 0 ? parentId : ITEM_PREFIXES.default : autoId;
         const filteredItems = items.filter(item => !item.hidden);
         for (let idx = 0; idx < filteredItems.length; idx++) {
             const { id, children, autoId, focusChildren } = flatten({

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

@@ -15,6 +15,7 @@ import mergeRefs from 'merge-refs';
 import { cloneElement, isValidElement, useCallback, useMemo, useRef } from 'react';
 import { Dropdown } from '@snack-uikit/dropdown';
 import { useValueControl } from '@snack-uikit/utils';
+import { ITEM_PREFIXES } from '../../../constants';
 import { extractActiveItems, kindFlattenItems, useCreateBaseItems } from '../../Items';
 import { CollapseContext, FocusListContext, NewListContextProvider, OpenListContext, SelectionProvider, } from '../contexts';
 import { useNewKeyboardNavigation } from '../hooks';
@@ -36,9 +37,21 @@ export function Droplist(_a) {
      * Объект с пропсами всех вложенных айтемов; ключ id
      */
     const _b = useMemo(() => {
-        const pinTop = kindFlattenItems({ items: pinTopProp, prefix: '~pinTop', parentId: '~main' });
-        const items = kindFlattenItems({ items: itemsProp, prefix: '~main', parentId: '~main' });
-        const pinBottom = kindFlattenItems({ items: pinBottomProp, prefix: '~pinBottom', parentId: '~main' });
+        const 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,
+        });
+        const pinBottom = kindFlattenItems({
+            items: pinBottomProp,
+            prefix: ITEM_PREFIXES.pinBottom,
+            parentId: ITEM_PREFIXES.default,
+        });
         const flattenItems = Object.assign(Object.assign(Object.assign({}, pinTop.flattenItems), pinBottom.flattenItems), items.flattenItems);
         const focusFlattenItems = Object.assign(Object.assign(Object.assign({}, pinTop.focusFlattenItems), pinBottom.focusFlattenItems), items.focusFlattenItems);
         [...footerItems, searchItem].forEach(item => {
@@ -74,9 +87,12 @@ export function Droplist(_a) {
     }, [footerItems, hasSearch, memorizedItems, openCollapseItems, searchItem.id, selection === null || selection === void 0 ? void 0 : selection.mode]);
     const triggerElemRef = useRef(null);
     const listRef = useRef(null);
+    const firstItemId = ids[0];
     const { handleListKeyDownFactory, resetActiveItemId, activeItemId, forceUpdateActiveItemId } = useNewKeyboardNavigation({
         mainRef: triggerElemRefProp !== null && triggerElemRefProp !== void 0 ? triggerElemRefProp : triggerElemRef,
         focusFlattenItems,
+        hasListInFocusChain: true,
+        firstItemId,
     });
     const handleListKeyDown = useCallback((e) => handleListKeyDownFactory(ids, expandedIds)(e), [handleListKeyDownFactory, ids, expandedIds]);
     const handleOpenChange = useCallback((open) => {
@@ -112,7 +128,7 @@ export function Droplist(_a) {
         }
         return children;
     }, [onKeyDown, children]);
-    return (_jsx(NewListContextProvider, { flattenItems: flattenItems, focusFlattenItems: focusFlattenItems, contentRender: contentRender, size: size, marker: marker, children: _jsx(SelectionProvider, Object.assign({}, selection, { children: _jsx(CollapseContext.Provider, { value: {
+    return (_jsx(NewListContextProvider, { flattenItems: flattenItems, focusFlattenItems: focusFlattenItems, contentRender: contentRender, size: size, marker: marker, firstItemId: firstItemId, children: _jsx(SelectionProvider, Object.assign({}, selection, { children: _jsx(CollapseContext.Provider, { value: {
                     openCollapseItems,
                     toggleOpenCollapseItem,
                 }, children: _jsx(FocusListContext.Provider, { value: {

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

@@ -1,4 +1,5 @@
 import { KeyboardEvent } from 'react';
+import { ItemId } from '../../Items';
 export declare const List: import("react").ForwardRefExoticComponent<{
     'data-test-id'?: string;
 } & import("react").AriaAttributes & {
@@ -7,10 +8,15 @@ export declare const List: import("react").ForwardRefExoticComponent<{
     pinBottom?: import("../../Items").Item[];
     footer?: import("react").ReactNode;
     footerActiveElementsRefs?: import("react").RefObject<HTMLElement>[];
+    keyboardNavigationRef?: import("react").RefObject<{
+        focusItem(id: ItemId): void;
+    }>;
     search?: import("../../..").SearchState;
     tabIndex?: number;
     collapse?: import("../contexts").CollapseState;
     className?: string;
-    onKeyDown?(e: KeyboardEvent<HTMLElement>): void;
     loading?: boolean;
+    onKeyDown?(e: KeyboardEvent<HTMLElement>): void;
+    hasListInFocusChain?: boolean;
+    scrollToSelectedItem?: boolean;
 } & import("../contexts").SelectionState & import("../contexts").PublicListContextType & import("../../../types").ScrollProps & import("../types").EmptyState & import("react").RefAttributes<HTMLElement>>;

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

@@ -14,6 +14,7 @@ import cn from 'classnames';
 import mergeRefs from 'merge-refs';
 import { forwardRef, useCallback, useMemo, useRef } from 'react';
 import { isBrowser, useValueControl } from '@snack-uikit/utils';
+import { ITEM_PREFIXES } from '../../../constants';
 import { HiddenTabButton } from '../../../helperComponents';
 import { extractActiveItems, kindFlattenItems, useCreateBaseItems } from '../../Items';
 import { CollapseContext, FocusListContext, NewListContextProvider, SelectionProvider } from '../contexts';
@@ -21,7 +22,7 @@ import { useNewKeyboardNavigation } from '../hooks';
 import { ListPrivate } from '../ListPrivate';
 import styles from '../styles.module.css';
 export const List = forwardRef((_a, ref) => {
-    var { items: itemsProp = [], search, pinBottom: pinBottomProp = [], pinTop: pinTopProp = [], footerActiveElementsRefs, onKeyDown, tabIndex = 0, className, collapse = {}, selection, contentRender, size = 's', marker = true } = _a, props = __rest(_a, ["items", "search", "pinBottom", "pinTop", "footerActiveElementsRefs", "onKeyDown", "tabIndex", "className", "collapse", "selection", "contentRender", "size", "marker"]);
+    var { items: itemsProp = [], search, pinBottom: pinBottomProp = [], pinTop: pinTopProp = [], footerActiveElementsRefs, onKeyDown, tabIndex = 0, className, collapse = {}, selection, contentRender, size = 's', marker = true, keyboardNavigationRef, hasListInFocusChain = true } = _a, props = __rest(_a, ["items", "search", "pinBottom", "pinTop", "footerActiveElementsRefs", "onKeyDown", "tabIndex", "className", "collapse", "selection", "contentRender", "size", "marker", "keyboardNavigationRef", "hasListInFocusChain"]);
     const hasSearch = useMemo(() => Boolean(search), [search]);
     const [openCollapseItems = [], setOpenCollapsedItems] = useValueControl(collapse);
     const toggleOpenCollapseItem = useCallback((id) => setOpenCollapsedItems((items) => (items === null || items === void 0 ? void 0 : items.includes(id)) ? items.filter(item => item !== id) : (items !== null && items !== void 0 ? items : []).concat([id])), [setOpenCollapsedItems]);
@@ -30,9 +31,21 @@ export const List = forwardRef((_a, ref) => {
      * Объект с пропсами всех вложенных айтемов; ключ id
      */
     const _b = useMemo(() => {
-        const pinTop = kindFlattenItems({ items: pinTopProp, prefix: '~pinTop', parentId: '~main' });
-        const items = kindFlattenItems({ items: itemsProp, prefix: '~main', parentId: '~main' });
-        const pinBottom = kindFlattenItems({ items: pinBottomProp, prefix: '~pinBottom', parentId: '~main' });
+        const 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,
+        });
+        const pinBottom = kindFlattenItems({
+            items: pinBottomProp,
+            prefix: ITEM_PREFIXES.pinBottom,
+            parentId: ITEM_PREFIXES.default,
+        });
         const flattenItems = Object.assign(Object.assign(Object.assign({}, pinTop.flattenItems), pinBottom.flattenItems), items.flattenItems);
         const focusFlattenItems = Object.assign(Object.assign(Object.assign({}, pinTop.focusFlattenItems), pinBottom.focusFlattenItems), items.focusFlattenItems);
         [...footerItems, searchItem].forEach(item => {
@@ -68,10 +81,14 @@ export const List = forwardRef((_a, ref) => {
     }, [footerItems, hasSearch, memorizedItems, openCollapseItems, searchItem.id, selection === null || selection === void 0 ? void 0 : selection.mode]);
     const listRef = useRef(null);
     const btnRef = useRef(null);
+    const firstItemId = ids[0];
     const { handleListKeyDownFactory, activeItemId, resetActiveItemId, forceUpdateActiveItemId } = useNewKeyboardNavigation({
         mainRef: listRef,
         btnRef,
         focusFlattenItems,
+        keyboardNavigationRef,
+        hasListInFocusChain,
+        firstItemId,
     });
     const handleListKeyDown = useCallback((e) => handleListKeyDownFactory(ids, expandedIds)(e), [handleListKeyDownFactory, ids, expandedIds]);
     const isActive = isBrowser() && listRef.current === document.activeElement && activeItemId === undefined;
@@ -82,12 +99,12 @@ export const List = forwardRef((_a, ref) => {
     const handleOnFocus = () => {
         resetActiveItemId();
     };
-    return (_jsx(NewListContextProvider, { flattenItems: flattenItems, focusFlattenItems: focusFlattenItems, contentRender: contentRender, size: size, marker: marker, children: _jsx(SelectionProvider, Object.assign({}, selection, { children: _jsx(CollapseContext.Provider, { value: {
+    return (_jsx(NewListContextProvider, { flattenItems: flattenItems, focusFlattenItems: focusFlattenItems, contentRender: contentRender, size: size, marker: marker, firstItemId: firstItemId, children: _jsx(SelectionProvider, Object.assign({}, selection, { children: _jsx(CollapseContext.Provider, { value: {
                     openCollapseItems,
                     toggleOpenCollapseItem,
                 }, children: _jsx(FocusListContext.Provider, { value: {
                         activeItemId,
                         handleListKeyDownFactory,
                         forceUpdateActiveItemId,
-                    }, children: _jsxs("div", { className: cn(styles.wrapper, className), "data-active": isActive || undefined, children: [_jsx(ListPrivate, Object.assign({}, props, { items: memorizedItems.items.focusCloseChildIds, pinTop: memorizedItems.pinTop.focusCloseChildIds, pinBottom: memorizedItems.pinBottom.focusCloseChildIds, searchItem: searchItem, ref: mergeRefs(ref, listRef), onFocus: handleOnFocus, onKeyDown: mergedHandlerKeyDown, tabIndex: tabIndex, search: search, nested: false })), _jsx(HiddenTabButton, { ref: btnRef, listRef: listRef, tabIndex: tabIndex })] }) }) }) })) }));
+                    }, children: _jsxs("div", { className: cn(styles.wrapper, className), "data-active": isActive || undefined, children: [_jsx(ListPrivate, Object.assign({}, props, { items: memorizedItems.items.focusCloseChildIds, pinTop: memorizedItems.pinTop.focusCloseChildIds, pinBottom: memorizedItems.pinBottom.focusCloseChildIds, searchItem: searchItem, ref: mergeRefs(ref, listRef), onFocus: handleOnFocus, onKeyDown: mergedHandlerKeyDown, tabIndex: hasListInFocusChain ? tabIndex : undefined, search: search, nested: false })), hasListInFocusChain && _jsx(HiddenTabButton, { ref: btnRef, listRef: listRef, tabIndex: tabIndex })] }) }) }) })) }));
 });

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

@@ -1,4 +1,5 @@
-export declare const ListPrivate: import("react").ForwardRefExoticComponent<Omit<import("../types").ListProps, "items" | "pinTop" | "pinBottom"> & {
+import { FlattenBaseItem } from '../../Items';
+export declare const ListPrivate: import("react").ForwardRefExoticComponent<Omit<import("../types").ListProps, "items" | "hasListInFocusChain" | "pinTop" | "pinBottom"> & {
     nested?: boolean;
     active?: boolean;
     tabIndex?: number;
@@ -6,7 +7,7 @@ export declare const ListPrivate: import("react").ForwardRefExoticComponent<Omit
     onBlur?(e: import("react").FocusEvent<HTMLElement>): void;
     onKeyDown?(e: import("react").KeyboardEvent<HTMLElement>): void;
     limitedScrollHeight?: boolean;
-    searchItem?: import("../../Items").FlattenBaseItem;
+    searchItem?: FlattenBaseItem;
     pinTop?: import("../../Items").ItemId[];
     items: import("../../Items").ItemId[];
     pinBottom?: import("../../Items").ItemId[];

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

@@ -17,12 +17,14 @@ import { Scroll } from '@snack-uikit/scroll';
 import { extractSupportProps } from '@snack-uikit/utils';
 import { ListEmptyState, useEmptyState } from '../../../helperComponents';
 import { PinBottomGroupItem, PinTopGroupItem, SearchItem, useRenderItems } from '../../Items';
-import { useNewListContext } from '../contexts';
+import { useNewListContext, useSelectionContext } from '../contexts';
 import commonStyles from '../styles.module.css';
 import styles from './styles.module.css';
 export const ListPrivate = forwardRef((_a, ref) => {
-    var { items, pinTop, pinBottom, onKeyDown, onBlur, onFocus, tabIndex, active, scroll, nested, search, searchItem, scrollRef, scrollContainerRef, onScroll, footer, loading, limitedScrollHeight, untouchableScrollbars, className, noDataState, noResultsState, errorDataState, dataError, dataFiltered } = _a, props = __rest(_a, ["items", "pinTop", "pinBottom", "onKeyDown", "onBlur", "onFocus", "tabIndex", "active", "scroll", "nested", "search", "searchItem", "scrollRef", "scrollContainerRef", "onScroll", "footer", "loading", "limitedScrollHeight", "untouchableScrollbars", "className", "noDataState", "noResultsState", "errorDataState", "dataError", "dataFiltered"]);
-    const { size = 's' } = useNewListContext();
+    var { items, pinTop, pinBottom, onKeyDown, onBlur, onFocus, tabIndex, active, scroll, nested, search, searchItem, scrollRef, scrollContainerRef, onScroll, footer, loading, limitedScrollHeight, untouchableScrollbars, className, noDataState, noResultsState, errorDataState, dataError, dataFiltered, scrollToSelectedItem } = _a, props = __rest(_a, ["items", "pinTop", "pinBottom", "onKeyDown", "onBlur", "onFocus", "tabIndex", "active", "scroll", "nested", "search", "searchItem", "scrollRef", "scrollContainerRef", "onScroll", "footer", "loading", "limitedScrollHeight", "untouchableScrollbars", "className", "noDataState", "noResultsState", "errorDataState", "dataError", "dataFiltered", "scrollToSelectedItem"]);
+    const { size = 's', flattenItems } = useNewListContext();
+    const { value, isSelectionSingle } = useSelectionContext();
+    const selectedItem = isSelectionSingle && value ? flattenItems[value] : undefined;
     const itemsJSX = useRenderItems(items);
     const itemsPinTopJSX = useRenderItems(pinTop);
     const itemsPinBottomJSX = useRenderItems(pinBottom);
@@ -30,11 +32,17 @@ export const ListPrivate = forwardRef((_a, ref) => {
     const hasNoItems = items.length === 0;
     const loadingJSX = useMemo(() => loading && (_jsx("div", { role: 'spinbutton', tabIndex: -1, className: styles.loader, "data-size": size, "data-no-items": hasNoItems || undefined, "data-test-id": 'list__loader', children: _jsx(Spinner, { size: size === 'l' ? 's' : 'xs' }) })), [hasNoItems, loading, size]);
     const content = useMemo(() => (_jsxs("div", { className: styles.content, children: [itemsJSX, loadingJSX, _jsx(ListEmptyState, { loading: loading, dataError: dataError, emptyStates: emptyStates, hasNoItems: hasNoItems, dataFiltered: dataFiltered !== null && dataFiltered !== void 0 ? dataFiltered : Boolean(search === null || search === void 0 ? void 0 : search.value) })] })), [dataError, dataFiltered, emptyStates, hasNoItems, itemsJSX, loading, loadingJSX, search === null || search === void 0 ? void 0 : search.value]);
+    const onScrollInitialized = () => {
+        var _a, _b;
+        if (scrollToSelectedItem) {
+            (_b = (_a = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.itemRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.scrollIntoView();
+        }
+    };
     const listJSX = (_jsxs("ul", Object.assign({ className: cn(commonStyles.listContainer, className), ref: ref, onKeyDown: onKeyDown, tabIndex: tabIndex, onFocus: onFocus, onBlur: onBlur, "data-active": active || undefined, role: 'menu' }, extractSupportProps(props), { children: [(Number(pinTop === null || pinTop === void 0 ? void 0 : pinTop.length) > 0 || search) && (_jsxs(PinTopGroupItem, { children: [search && _jsx(SearchItem, Object.assign({ search: search }, searchItem)), Number(pinTop === null || pinTop === void 0 ? void 0 : pinTop.length) > 0 && itemsPinTopJSX] })), scroll ? (_jsxs(Scroll, { className: cn({
                     [commonStyles.scrollContainerS]: scroll && limitedScrollHeight && size === 's',
                     [commonStyles.scrollContainerM]: scroll && limitedScrollHeight && size === 'm',
                     [commonStyles.scrollContainerL]: scroll && limitedScrollHeight && size === 'l',
-                }), barHideStrategy: 'never', size: size === 's' ? 's' : 'm', ref: scrollContainerRef, untouchableScrollbars: untouchableScrollbars, onScroll: onScroll, children: [content, _jsx("div", { className: styles.scrollStub, ref: scrollRef })] })) : (_jsx(_Fragment, { children: content })), Number(pinBottom === null || pinBottom === void 0 ? void 0 : pinBottom.length) > 0 && _jsx(PinBottomGroupItem, { children: itemsPinBottomJSX }), footer && (_jsx("div", { className: styles.footer, onFocus: e => e.stopPropagation(), children: footer }))] })));
+                }), barHideStrategy: 'never', size: size === 's' ? 's' : 'm', ref: scrollContainerRef, untouchableScrollbars: untouchableScrollbars, onScroll: onScroll, onInitialized: onScrollInitialized, children: [content, _jsx("div", { className: styles.scrollStub, ref: scrollRef })] })) : (_jsx(_Fragment, { children: content })), Number(pinBottom === null || pinBottom === void 0 ? void 0 : pinBottom.length) > 0 && _jsx(PinBottomGroupItem, { children: itemsPinBottomJSX }), footer && (_jsx("div", { className: styles.footer, onFocus: e => e.stopPropagation(), children: footer }))] })));
     if (!nested) {
         return listJSX;
     }

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

@@ -19,15 +19,13 @@ export type PublicListContextType = {
 export type PrivateListContextType = {
     flattenItems: Record<string, FlattenItem>;
     focusFlattenItems: Record<string, FocusFlattenItem>;
+    firstItemId: ItemId;
 };
 type Child = {
     children: ReactNode;
 };
 type ListContextType = PublicListContextType & PrivateListContextType;
-export declare const ListContext: import("react").Context<{
-    flattenItems: {};
-    focusFlattenItems: {};
-}>;
+export declare const ListContext: import("react").Context<ListContextType>;
 export declare function useNewListContext(): ListContextType;
 export declare function NewListContextProvider({ children, ...props }: ListContextType & Child): import("react/jsx-runtime").JSX.Element;
 export {};

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

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

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

@@ -4,8 +4,13 @@ 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, }: UseNewKeyboardNavigationProps<T>): {
+export declare function useNewKeyboardNavigation<T extends HTMLElement>({ mainRef, btnRef, focusFlattenItems, keyboardNavigationRef, hasListInFocusChain, firstItemId, }: UseNewKeyboardNavigationProps<T>): {
     resetActiveItemId: () => void;
     activeItemId: ItemId | undefined;
     forceUpdateActiveItemId: (itemId: ItemId) => void;

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

@@ -1,7 +1,13 @@
-import { useCallback, useRef, useState } from 'react';
-export function useNewKeyboardNavigation({ mainRef, btnRef, focusFlattenItems, }) {
-    const [activeItemId, setActiveItemId] = useState();
-    const activeItemIdRef = useRef();
+import { useCallback, useImperativeHandle, useRef, useState } from 'react';
+import { ITEM_PREFIXES } from '../../constants';
+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) => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         switch (e.key) {
@@ -32,11 +38,13 @@ export function useNewKeyboardNavigation({ mainRef, btnRef, focusFlattenItems, }
             }
             case 'ArrowUp': {
                 if (ids[0] === activeItemIdRef.current) {
-                    const item = focusFlattenItems[ids[0]];
-                    if (item.parentId === '~main') {
-                        activeItemIdRef.current = undefined;
-                        setActiveItemId(undefined);
-                        (_e = mainRef === null || mainRef === void 0 ? void 0 : mainRef.current) === null || _e === void 0 ? void 0 : _e.focus();
+                    if (hasListInFocusChain) {
+                        const item = focusFlattenItems[ids[0]];
+                        if (item.parentId === ITEM_PREFIXES.default) {
+                            activeItemIdRef.current = undefined;
+                            setActiveItemId(undefined);
+                            (_e = mainRef === null || mainRef === void 0 ? void 0 : mainRef.current) === null || _e === void 0 ? void 0 : _e.focus();
+                        }
                     }
                 }
                 else if (activeItemIdRef.current !== undefined) {
@@ -69,11 +77,16 @@ export function useNewKeyboardNavigation({ mainRef, btnRef, focusFlattenItems, }
             }
             case 'Tab': {
                 if (activeItemIdRef.current !== undefined) {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    activeItemIdRef.current = undefined;
-                    setActiveItemId(undefined);
-                    (_h = mainRef === null || mainRef === void 0 ? void 0 : mainRef.current) === null || _h === void 0 ? void 0 : _h.focus();
+                    if (hasListInFocusChain) {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        activeItemIdRef.current = undefined;
+                        setActiveItemId(undefined);
+                        (_h = mainRef === null || mainRef === void 0 ? void 0 : mainRef.current) === null || _h === void 0 ? void 0 : _h.focus();
+                    }
+                    else {
+                        resetActiveItemId();
+                    }
                 }
                 else {
                     btnRef && !e.shiftKey ? (_j = btnRef === null || btnRef === void 0 ? void 0 : btnRef.current) === null || _j === void 0 ? void 0 : _j.focus() : (_k = mainRef === null || mainRef === void 0 ? void 0 : mainRef.current) === null || _k === void 0 ? void 0 : _k.focus();
@@ -84,11 +97,7 @@ export function useNewKeyboardNavigation({ mainRef, btnRef, focusFlattenItems, }
                 return;
             }
         }
-    }, [focusFlattenItems, mainRef, btnRef]);
-    const resetActiveItemId = useCallback(() => {
-        setActiveItemId(undefined);
-        activeItemIdRef.current = undefined;
-    }, []);
+    }, [focusFlattenItems, hasListInFocusChain, mainRef, resetActiveItemId, btnRef]);
     const forceUpdateActiveItemId = useCallback((itemId) => {
         var _a, _b;
         setActiveItemId(itemId);
@@ -96,6 +105,7 @@ export function useNewKeyboardNavigation({ mainRef, btnRef, focusFlattenItems, }
         const item = focusFlattenItems[itemId];
         (_b = (_a = item === null || item === void 0 ? void 0 : item.itemRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.focus();
     }, [focusFlattenItems]);
+    useImperativeHandle(keyboardNavigationRef, () => ({ focusItem: forceUpdateActiveItemId }), [forceUpdateActiveItemId]);
     return {
         resetActiveItemId,
         activeItemId,