@snack-uikit/list 0.20.0 → 0.21.0

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.21.0 (2024-10-31)
+
+
+### Features
+
+* **PDS-438:** add keyboardNavigationRef, hasListInFocusChain props; export ids for navigation ([4472173](https://github.com/cloud-ru-tech/snack-uikit/commit/447217313b3aaf71196f20ce3298ce129a49a750))
+* **PDS-438:** add scrollToSelectedItem prop ([ffc168f](https://github.com/cloud-ru-tech/snack-uikit/commit/ffc168f2201891a48b50d638ee0f4de91df18aa6))
+
+
+
+
+
 # 0.20.0 (2024-10-28)
 
 

package/README.md

@@ -74,6 +74,7 @@
 | search | `SearchState` | - | Настройки поисковой строки |
 | collapse | `CollapseState` | {} | Настройки раскрытия элементов |
 | loading | `boolean` | - | Флаг, отвещающий за состояние загрузки списка |
+| scrollToSelectedItem | `boolean` | - | Флаг, отвещающий за прокручивание до выбранного элемента |
 | selection | `SelectionSingleState \| SelectionMultipleState` | - |  |
 | size | "s" \| "m" \| "l" | s | Размер списка |
 | marker | `boolean` | true | Отображать ли маркер у выбранного жлемента списка |
@@ -97,12 +98,15 @@
 | pinBottom | `Item[]` | - | Элементы списка, закрепленные снизу |
 | footer | `ReactNode ;` | - | Кастомизируемый элемент в конце списка |
 | footerActiveElementsRefs | `RefObject<HTMLElement>[]` | - | Список ссылок на кастомные элементы, помещенные в специальную секцию внизу списка |
+| keyboardNavigationRef | `RefObject<{ focusItem(id: ItemId): void; }>` | - | Ссылка на управление навигацией листа с клавиатуры |
 | search | `SearchState` | - | Настройки поисковой строки |
 | tabIndex | `number` | - | Tab Index |
 | collapse | `CollapseState` | {} | Настройки раскрытия элементов |
 | className | `string` | - | CSS-класс |
-| onKeyDown | `(e: KeyboardEvent<HTMLElement>) => void` | - |  |
 | loading | `boolean` | - | Флаг, отвещающий за состояние загрузки списка |
+| onKeyDown | `(e: KeyboardEvent<HTMLElement>) => void` | - | Обработчик события по нажатию клавиш |
+| hasListInFocusChain | `boolean` | true | Флаг, отвещающий за включение самого родительского контейнера листа в цепочку фокусирующихся элементов |
+| scrollToSelectedItem | `boolean` | - | Флаг, отвещающий за прокручивание до выбранного элемента |
 | selection | `SelectionSingleState \| SelectionMultipleState` | - |  |
 | size | "s" \| "m" \| "l" | s | Размер списка |
 | marker | `boolean` | true | Отображать ли маркер у выбранного жлемента списка |
@@ -129,6 +133,18 @@
 | truncate | `TruncateProps` | - |  |
 | disabled | `boolean` | - |  |
 | className | `string` | - | CSS-класс |
+## getFooterItemId
+`helper` 
+
+Возвращает id для элемента футера
+## getItemAutoId
+`helper` 
+
+Возвращает id для элемента, подставляя перфикс
+## getDefaultItemId
+`helper` 
+
+Возвращает id для дефолтного элемента
 
 
 [//]: DOCUMENTATION_SECTION_END

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

@@ -57,7 +57,9 @@ function BaseItem(_a) {
   const {
     size = 's',
     marker,
-    contentRender
+    contentRender,
+    firstItemId,
+    focusFlattenItems
   } = (0, contexts_1.useNewListContext)();
   const {
     level = 0
@@ -146,7 +148,7 @@ function BaseItem(_a) {
       "data-size": size,
       onClick: handleItemClick,
       onMouseDown: handleItemMouseDown,
-      tabIndex: -1,
+      tabIndex: id === focusFlattenItems[firstItemId].originalId ? 0 : -1,
       "data-non-pointer": inactive && !onClick,
       "data-variant": mode || undefined,
       "data-open": open || undefined,

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

@@ -16,12 +16,13 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const dropdown_1 = require("@snack-uikit/dropdown");
 const icons_1 = require("@snack-uikit/icons");
+const constants_1 = require("../../../constants");
 const contexts_1 = require("../../Lists/contexts");
 const ListPrivate_1 = require("../../Lists/ListPrivate");
 const BaseItem_1 = require("../BaseItem");
 const hooks_1 = require("../hooks");
 const utils_1 = require("../utils");
-const constants_1 = require("./constants");
+const constants_2 = require("./constants");
 function NextListItem(_a) {
   var {
       items,
@@ -92,7 +93,7 @@ function NextListItem(_a) {
     allChildIds
   });
   const handleOutsideClick = (0, react_1.useCallback)(() => {
-    forceUpdateActiveItemId === null || forceUpdateActiveItemId === void 0 ? void 0 : forceUpdateActiveItemId('~drop-focus');
+    forceUpdateActiveItemId === null || forceUpdateActiveItemId === void 0 ? void 0 : forceUpdateActiveItemId(constants_1.ITEM_PREFIXES.dropFocus);
     setOpen(false);
     return true;
   }, [forceUpdateActiveItemId]);
@@ -103,7 +104,7 @@ function NextListItem(_a) {
   const listRef = (0, react_1.useRef)(null);
   return (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, {
     outsideClick: handleOutsideClick,
-    fallbackPlacements: constants_1.FALLBACK_PLACEMENTS,
+    fallbackPlacements: constants_2.FALLBACK_PLACEMENTS,
     content: (0, jsx_runtime_1.jsx)(ListPrivate_1.ListPrivate, {
       onKeyDown: handleListKeyDown,
       items: items,

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

@@ -12,6 +12,7 @@ exports.SearchItem = SearchItem;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const classnames_1 = __importDefault(require("classnames"));
 const search_private_1 = require("@snack-uikit/search-private");
+const constants_1 = require("../../../constants");
 const contexts_1 = require("../../Lists/contexts");
 const styles_module_scss_1 = __importDefault(require('../styles.module.css'));
 const styles_module_scss_2 = __importDefault(require('./styles.module.css'));
@@ -21,7 +22,8 @@ function SearchItem(_ref) {
     itemRef
   } = _ref;
   const {
-    size = 's'
+    size = 's',
+    firstItemId
   } = (0, contexts_1.useNewListContext)();
   const handleKeyDown = e => {
     if (['ArrowDown', 'ArrowUp'].includes(e.key)) {
@@ -40,7 +42,7 @@ function SearchItem(_ref) {
     "data-test-id": 'list__search-item',
     children: (0, jsx_runtime_1.jsx)(search_private_1.SearchPrivate, Object.assign({
       size: size,
-      tabIndex: -1,
+      tabIndex: constants_1.ITEM_PREFIXES.search === firstItemId ? 0 : -1,
       onKeyDown: handleKeyDown,
       onFocus: handleFocus
     }, search, {

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

@@ -8,13 +8,15 @@ exports.useCreateBaseItems = useCreateBaseItems;
 exports.useGroupItemSelection = useGroupItemSelection;
 const react_1 = require("react");
 const react_2 = require("react");
+const constants_1 = require("../../constants");
+const utils_1 = require("../../utils");
 const contexts_1 = require("../Lists/contexts");
 const AccordionItem_1 = require("./AccordionItem");
 const BaseItem_1 = require("./BaseItem");
 const GroupItem_1 = require("./GroupItem");
 const GroupSelectItem_1 = require("./GroupSelectItem");
 const NextListItem_1 = require("./NextListItem");
-const utils_1 = require("./utils");
+const utils_2 = require("./utils");
 function useRenderItems(focusCloseChildIds) {
   const {
     focusFlattenItems,
@@ -35,27 +37,27 @@ function useRenderItems(focusCloseChildIds) {
         items
       } = focusFlattenItems[id];
       const flattenItem = flattenItems[originalId];
-      if ((0, utils_1.isGroupItem)(flattenItem) || !isSelectionMultiple && (0, utils_1.isGroupSelectItem)(flattenItem)) {
+      if ((0, utils_2.isGroupItem)(flattenItem) || !isSelectionMultiple && (0, utils_2.isGroupSelectItem)(flattenItem)) {
         return (0, react_1.createElement)(GroupItem_1.GroupItem, Object.assign({}, flattenItem, {
           items: items,
           key: key
         }));
       }
-      if ((0, utils_1.isGroupSelectItem)(flattenItem)) {
+      if ((0, utils_2.isGroupSelectItem)(flattenItem)) {
         return (0, react_1.createElement)(GroupSelectItem_1.GroupSelectItem, Object.assign({}, flattenItem, {
           items: items,
           itemRef: itemRef,
           key: key
         }));
       }
-      if ((0, utils_1.isAccordionItem)(flattenItem)) {
+      if ((0, utils_2.isAccordionItem)(flattenItem)) {
         return (0, react_1.createElement)(AccordionItem_1.AccordionItem, Object.assign({}, flattenItem, {
           items: items,
           itemRef: itemRef,
           key: key
         }));
       }
-      if ((0, utils_1.isNextListItem)(flattenItem)) {
+      if ((0, utils_2.isNextListItem)(flattenItem)) {
         return (0, react_1.createElement)(NextListItem_1.NextListItem, Object.assign({}, flattenItem, {
           focusId: id,
           items: items,
@@ -79,15 +81,15 @@ function useCreateBaseItems(_ref) {
     return {
       searchItem: {
         itemRef: (0, react_2.createRef)(),
-        id: '~search',
-        parentId: '~main',
+        id: constants_1.ITEM_PREFIXES.search,
+        parentId: constants_1.ITEM_PREFIXES.default,
         items: [],
         allChildIds: []
       },
       footerItems: (_a = footerActiveElementsRefs === null || footerActiveElementsRefs === void 0 ? void 0 : footerActiveElementsRefs.map((itemRef, idx) => ({
-        id: `~footer__${idx}`,
+        id: (0, utils_1.getFooterItemId)(idx),
         itemRef,
-        parentId: '~main',
+        parentId: constants_1.ITEM_PREFIXES.default,
         items: [],
         allChildIds: []
       }))) !== null && _a !== void 0 ? _a : []

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

@@ -21,6 +21,8 @@ exports.isContentItem = isContentItem;
 exports.kindFlattenItems = kindFlattenItems;
 exports.extractActiveItems = extractActiveItems;
 const react_1 = require("react");
+const constants_1 = require("../../constants");
+const utils_1 = require("../../utils");
 function isBaseItem(item) {
   return item && !('items' in item);
 }
@@ -56,10 +58,10 @@ function kindFlattenItems(_ref) {
       item,
       idx,
       prefix,
-      parentId = '~main'
+      parentId = constants_1.ITEM_PREFIXES.default
     } = _ref2;
     var _a, _b;
-    const autoId = prefix !== undefined ? [prefix, idx].join('-') : String(idx);
+    const autoId = prefix !== undefined ? (0, utils_1.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), {
@@ -92,7 +94,7 @@ function kindFlattenItems(_ref) {
         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 : constants_1.ITEM_PREFIXES.default : autoId;
     const filteredItems = items.filter(item => !item.hidden);
     for (let idx = 0; idx < filteredItems.length; idx++) {
       const {

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

@@ -23,6 +23,7 @@ const merge_refs_1 = __importDefault(require("merge-refs"));
 const react_1 = require("react");
 const dropdown_1 = require("@snack-uikit/dropdown");
 const utils_1 = require("@snack-uikit/utils");
+const constants_1 = require("../../../constants");
 const Items_1 = require("../../Items");
 const contexts_1 = require("../contexts");
 const hooks_1 = require("../hooks");
@@ -75,18 +76,18 @@ function Droplist(_a) {
   const _b = (0, react_1.useMemo)(() => {
       const pinTop = (0, Items_1.kindFlattenItems)({
         items: pinTopProp,
-        prefix: '~pinTop',
-        parentId: '~main'
+        prefix: constants_1.ITEM_PREFIXES.pinTop,
+        parentId: constants_1.ITEM_PREFIXES.default
       });
       const items = (0, Items_1.kindFlattenItems)({
         items: itemsProp,
-        prefix: '~main',
-        parentId: '~main'
+        prefix: constants_1.ITEM_PREFIXES.default,
+        parentId: constants_1.ITEM_PREFIXES.default
       });
       const pinBottom = (0, Items_1.kindFlattenItems)({
         items: pinBottomProp,
-        prefix: '~pinBottom',
-        parentId: '~main'
+        prefix: constants_1.ITEM_PREFIXES.pinBottom,
+        parentId: constants_1.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);
@@ -150,6 +151,7 @@ function Droplist(_a) {
   }, [footerItems, hasSearch, memorizedItems, openCollapseItems, searchItem.id, selection === null || selection === void 0 ? void 0 : selection.mode]);
   const triggerElemRef = (0, react_1.useRef)(null);
   const listRef = (0, react_1.useRef)(null);
+  const firstItemId = ids[0];
   const {
     handleListKeyDownFactory,
     resetActiveItemId,
@@ -157,7 +159,9 @@ function Droplist(_a) {
     forceUpdateActiveItemId
   } = (0, hooks_1.useNewKeyboardNavigation)({
     mainRef: triggerElemRefProp !== null && triggerElemRefProp !== void 0 ? triggerElemRefProp : triggerElemRef,
-    focusFlattenItems
+    focusFlattenItems,
+    hasListInFocusChain: true,
+    firstItemId
   });
   const handleListKeyDown = (0, react_1.useCallback)(e => handleListKeyDownFactory(ids, expandedIds)(e), [handleListKeyDownFactory, ids, expandedIds]);
   const handleOpenChange = (0, react_1.useCallback)(open => {
@@ -203,6 +207,7 @@ function Droplist(_a) {
     contentRender: contentRender,
     size: size,
     marker: marker,
+    firstItemId: firstItemId,
     children: (0, jsx_runtime_1.jsx)(contexts_1.SelectionProvider, Object.assign({}, selection, {
       children: (0, jsx_runtime_1.jsx)(contexts_1.CollapseContext.Provider, {
         value: {

package/dist/cjs/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/cjs/components/Lists/List/List.js

@@ -22,6 +22,7 @@ const classnames_1 = __importDefault(require("classnames"));
 const merge_refs_1 = __importDefault(require("merge-refs"));
 const react_1 = require("react");
 const utils_1 = require("@snack-uikit/utils");
+const constants_1 = require("../../../constants");
 const helperComponents_1 = require("../../../helperComponents");
 const Items_1 = require("../../Items");
 const contexts_1 = require("../contexts");
@@ -42,9 +43,11 @@ exports.List = (0, react_1.forwardRef)((_a, ref) => {
       selection,
       contentRender,
       size = 's',
-      marker = true
+      marker = true,
+      keyboardNavigationRef,
+      hasListInFocusChain = true
     } = _a,
-    props = __rest(_a, ["items", "search", "pinBottom", "pinTop", "footerActiveElementsRefs", "onKeyDown", "tabIndex", "className", "collapse", "selection", "contentRender", "size", "marker"]);
+    props = __rest(_a, ["items", "search", "pinBottom", "pinTop", "footerActiveElementsRefs", "onKeyDown", "tabIndex", "className", "collapse", "selection", "contentRender", "size", "marker", "keyboardNavigationRef", "hasListInFocusChain"]);
   const hasSearch = (0, react_1.useMemo)(() => Boolean(search), [search]);
   const [openCollapseItems = [], setOpenCollapsedItems] = (0, utils_1.useValueControl)(collapse);
   const toggleOpenCollapseItem = (0, react_1.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]);
@@ -60,18 +63,18 @@ exports.List = (0, react_1.forwardRef)((_a, ref) => {
   const _b = (0, react_1.useMemo)(() => {
       const pinTop = (0, Items_1.kindFlattenItems)({
         items: pinTopProp,
-        prefix: '~pinTop',
-        parentId: '~main'
+        prefix: constants_1.ITEM_PREFIXES.pinTop,
+        parentId: constants_1.ITEM_PREFIXES.default
       });
       const items = (0, Items_1.kindFlattenItems)({
         items: itemsProp,
-        prefix: '~main',
-        parentId: '~main'
+        prefix: constants_1.ITEM_PREFIXES.default,
+        parentId: constants_1.ITEM_PREFIXES.default
       });
       const pinBottom = (0, Items_1.kindFlattenItems)({
         items: pinBottomProp,
-        prefix: '~pinBottom',
-        parentId: '~main'
+        prefix: constants_1.ITEM_PREFIXES.pinBottom,
+        parentId: constants_1.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);
@@ -135,6 +138,7 @@ exports.List = (0, react_1.forwardRef)((_a, ref) => {
   }, [footerItems, hasSearch, memorizedItems, openCollapseItems, searchItem.id, selection === null || selection === void 0 ? void 0 : selection.mode]);
   const listRef = (0, react_1.useRef)(null);
   const btnRef = (0, react_1.useRef)(null);
+  const firstItemId = ids[0];
   const {
     handleListKeyDownFactory,
     activeItemId,
@@ -143,7 +147,10 @@ exports.List = (0, react_1.forwardRef)((_a, ref) => {
   } = (0, hooks_1.useNewKeyboardNavigation)({
     mainRef: listRef,
     btnRef,
-    focusFlattenItems
+    focusFlattenItems,
+    keyboardNavigationRef,
+    hasListInFocusChain,
+    firstItemId
   });
   const handleListKeyDown = (0, react_1.useCallback)(e => handleListKeyDownFactory(ids, expandedIds)(e), [handleListKeyDownFactory, ids, expandedIds]);
   const isActive = (0, utils_1.isBrowser)() && listRef.current === document.activeElement && activeItemId === undefined;
@@ -160,6 +167,7 @@ exports.List = (0, react_1.forwardRef)((_a, ref) => {
     contentRender: contentRender,
     size: size,
     marker: marker,
+    firstItemId: firstItemId,
     children: (0, jsx_runtime_1.jsx)(contexts_1.SelectionProvider, Object.assign({}, selection, {
       children: (0, jsx_runtime_1.jsx)(contexts_1.CollapseContext.Provider, {
         value: {
@@ -183,10 +191,10 @@ exports.List = (0, react_1.forwardRef)((_a, ref) => {
               ref: (0, merge_refs_1.default)(ref, listRef),
               onFocus: handleOnFocus,
               onKeyDown: mergedHandlerKeyDown,
-              tabIndex: tabIndex,
+              tabIndex: hasListInFocusChain ? tabIndex : undefined,
               search: search,
               nested: false
-            })), (0, jsx_runtime_1.jsx)(helperComponents_1.HiddenTabButton, {
+            })), hasListInFocusChain && (0, jsx_runtime_1.jsx)(helperComponents_1.HiddenTabButton, {
               ref: btnRef,
               listRef: listRef,
               tabIndex: tabIndex

package/dist/cjs/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/cjs/components/Lists/ListPrivate/ListPrivate.js

@@ -54,12 +54,19 @@ exports.ListPrivate = (0, react_1.forwardRef)((_a, ref) => {
       noResultsState,
       errorDataState,
       dataError,
-      dataFiltered
+      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"]);
+    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'
+    size = 's',
+    flattenItems
   } = (0, contexts_1.useNewListContext)();
+  const {
+    value,
+    isSelectionSingle
+  } = (0, contexts_1.useSelectionContext)();
+  const selectedItem = isSelectionSingle && value ? flattenItems[value] : undefined;
   const itemsJSX = (0, Items_1.useRenderItems)(items);
   const itemsPinTopJSX = (0, Items_1.useRenderItems)(pinTop);
   const itemsPinBottomJSX = (0, Items_1.useRenderItems)(pinBottom);
@@ -90,6 +97,12 @@ exports.ListPrivate = (0, react_1.forwardRef)((_a, ref) => {
       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 = (0, jsx_runtime_1.jsxs)("ul", Object.assign({
     className: (0, classnames_1.default)(styles_module_scss_1.default.listContainer, className),
     ref: ref,
@@ -115,6 +128,7 @@ exports.ListPrivate = (0, react_1.forwardRef)((_a, ref) => {
       ref: scrollContainerRef,
       untouchableScrollbars: untouchableScrollbars,
       onScroll: onScroll,
+      onInitialized: onScrollInitialized,
       children: [content, (0, jsx_runtime_1.jsx)("div", {
         className: styles_module_scss_2.default.scrollStub,
         ref: scrollRef

package/dist/cjs/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/cjs/components/Lists/contexts/NewListProvider.js

@@ -16,9 +16,11 @@ exports.useNewListContext = useNewListContext;
 exports.NewListContextProvider = NewListContextProvider;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const constants_1 = require("../../../constants");
 exports.ListContext = (0, react_1.createContext)({
   flattenItems: {},
-  focusFlattenItems: {}
+  focusFlattenItems: {},
+  firstItemId: constants_1.ITEM_PREFIXES.default
 });
 function useNewListContext() {
   return (0, react_1.useContext)(exports.ListContext);
@@ -29,14 +31,16 @@ function extractListProps(_ref) {
     marker,
     flattenItems,
     focusFlattenItems,
-    contentRender
+    contentRender,
+    firstItemId
   } = _ref;
   return {
     size,
     marker,
     contentRender,
     flattenItems,
-    focusFlattenItems
+    focusFlattenItems,
+    firstItemId
   };
 }
 function NewListContextProvider(_a) {

package/dist/cjs/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/cjs/components/Lists/hooks.js

@@ -5,14 +5,23 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useNewKeyboardNavigation = useNewKeyboardNavigation;
 const react_1 = require("react");
+const constants_1 = require("../../constants");
 function useNewKeyboardNavigation(_ref) {
   let {
     mainRef,
     btnRef,
-    focusFlattenItems
+    focusFlattenItems,
+    keyboardNavigationRef,
+    hasListInFocusChain,
+    firstItemId
   } = _ref;
-  const [activeItemId, setActiveItemId] = (0, react_1.useState)();
-  const activeItemIdRef = (0, react_1.useRef)();
+  const defaultActiveItemId = hasListInFocusChain ? undefined : firstItemId;
+  const [activeItemId, setActiveItemId] = (0, react_1.useState)(() => defaultActiveItemId);
+  const activeItemIdRef = (0, react_1.useRef)(defaultActiveItemId);
+  const resetActiveItemId = (0, react_1.useCallback)(() => {
+    setActiveItemId(defaultActiveItemId);
+    activeItemIdRef.current = defaultActiveItemId;
+  }, [defaultActiveItemId]);
   const handleListKeyDownFactory = (0, react_1.useCallback)((ids, expandedIds) => e => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     switch (e.key) {
@@ -44,11 +53,13 @@ function useNewKeyboardNavigation(_ref) {
       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 === constants_1.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) {
             const activeIndex = ids.findIndex(id => id === activeItemIdRef.current);
@@ -85,11 +96,15 @@ function useNewKeyboardNavigation(_ref) {
       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();
           }
@@ -100,11 +115,7 @@ function useNewKeyboardNavigation(_ref) {
           return;
         }
     }
-  }, [focusFlattenItems, mainRef, btnRef]);
-  const resetActiveItemId = (0, react_1.useCallback)(() => {
-    setActiveItemId(undefined);
-    activeItemIdRef.current = undefined;
-  }, []);
+  }, [focusFlattenItems, hasListInFocusChain, mainRef, resetActiveItemId, btnRef]);
   const forceUpdateActiveItemId = (0, react_1.useCallback)(itemId => {
     var _a, _b;
     setActiveItemId(itemId);
@@ -112,6 +123,9 @@ function useNewKeyboardNavigation(_ref) {
     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]);
+  (0, react_1.useImperativeHandle)(keyboardNavigationRef, () => ({
+    focusItem: forceUpdateActiveItemId
+  }), [forceUpdateActiveItemId]);
   return {
     resetActiveItemId,
     activeItemId,