@snack-uikit/list 0.20.0 → 0.21.0

package/dist/esm/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/esm/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/esm/constants.js

@@ -0,0 +1,8 @@
+export const ITEM_PREFIXES = {
+    default: '~main',
+    pinTop: '~pinTop',
+    pinBottom: '~pinBottom',
+    footer: '~footer',
+    search: '~search',
+    dropFocus: '~dropFocus',
+};

package/dist/esm/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/esm/index.js

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

package/dist/esm/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/esm/utils.js

@@ -0,0 +1,16 @@
+import { ITEM_PREFIXES } from './constants';
+/**
+ * Возвращает id для элемента футера
+ * @function  helper
+ */
+export const getFooterItemId = (id) => `${ITEM_PREFIXES.footer}__${id}`;
+/**
+ * Возвращает id для элемента, подставляя перфикс
+ * @function  helper
+ */
+export const getItemAutoId = (prefix, id) => [prefix, id].join('-');
+/**
+ * Возвращает id для дефолтного элемента
+ * @function  helper
+ */
+export const getDefaultItemId = (id) => getItemAutoId(ITEM_PREFIXES.default, id);

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "List",
-  "version": "0.20.0",
+  "version": "0.21.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -36,14 +36,14 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/button": "0.19.0",
+    "@snack-uikit/button": "0.19.1",
     "@snack-uikit/divider": "3.2.0",
     "@snack-uikit/dropdown": "0.4.0",
     "@snack-uikit/icons": "0.24.0",
-    "@snack-uikit/info-block": "0.6.0",
-    "@snack-uikit/loaders": "0.7.0",
-    "@snack-uikit/scroll": "0.8.0",
-    "@snack-uikit/search-private": "0.4.0",
+    "@snack-uikit/info-block": "0.6.1",
+    "@snack-uikit/loaders": "0.7.1",
+    "@snack-uikit/scroll": "0.9.0",
+    "@snack-uikit/search-private": "0.4.1",
     "@snack-uikit/toggles": "0.12.0",
     "@snack-uikit/truncate-string": "0.6.0",
     "@snack-uikit/utils": "3.5.0",
@@ -53,5 +53,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "8499829efa0c118b704de17411ae2328a024adb5"
+  "gitHead": "b7163c6f939105eb34cabec64c9e983ac7958c26"
 }

package/src/components/Items/BaseItem/BaseItem.tsx

@@ -52,12 +52,12 @@ export function BaseItem({
 }: AllBaseItemProps) {
   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 ?? value === id : checkedProp ?? value?.includes(id ?? '');
+  const isChecked = isSelectionSingle ? (checkedProp ?? value === id) : (checkedProp ?? value?.includes(id ?? ''));
 
   const handleChange = () => {
     onChange?.(id);
@@ -150,7 +150,7 @@ export function BaseItem({
         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}
@@ -179,7 +179,7 @@ export function BaseItem({
 
         {beforeContent && <div className={styles.beforeContent}>{beforeContent}</div>}
         {content && isContentItem(content) ? (
-          contentRender?.({ id, content, disabled }) ?? <ItemContent disabled={disabled} {...content} />
+          (contentRender?.({ id, content, disabled }) ?? <ItemContent disabled={disabled} {...content} />)
         ) : (
           <div className={styles.content}> {content} </div>
         )}

package/src/components/Items/NextListItem/NextListItem.tsx

@@ -3,6 +3,7 @@ import { KeyboardEvent, useCallback, useEffect, useMemo, useRef, useState } from
 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';
@@ -71,7 +72,7 @@ export function NextListItem({
   });
 
   const handleOutsideClick = useCallback(() => {
-    forceUpdateActiveItemId?.('~drop-focus');
+    forceUpdateActiveItemId?.(ITEM_PREFIXES.dropFocus);
     setOpen(false);
     return true;
   }, [forceUpdateActiveItemId]);

package/src/components/Items/SearchItem/SearchItem.tsx

@@ -3,6 +3,7 @@ import { FocusEvent, KeyboardEvent, RefObject } from 'react';
 
 import { SearchPrivate } from '@snack-uikit/search-private';
 
+import { ITEM_PREFIXES } from '../../../constants';
 import { SearchState } from '../../../types';
 import { useNewListContext } from '../../Lists/contexts';
 import commonStyles from '../styles.module.scss';
@@ -14,7 +15,7 @@ export type SearchItemProps = {
 };
 
 export function SearchItem({ search, itemRef }: SearchItemProps) {
-  const { size = 's' } = useNewListContext();
+  const { size = 's', firstItemId } = useNewListContext();
 
   const handleKeyDown = (e: KeyboardEvent) => {
     if (['ArrowDown', 'ArrowUp'].includes(e.key)) {
@@ -34,7 +35,7 @@ export function SearchItem({ search, itemRef }: SearchItemProps) {
     <div className={cn(commonStyles.listItem, styles.searchItem)} data-size={size} data-test-id='list__search-item'>
       <SearchPrivate
         size={size}
-        tabIndex={-1}
+        tabIndex={ITEM_PREFIXES.search === firstItemId ? 0 : -1}
         onKeyDown={handleKeyDown}
         onFocus={handleFocus}
         {...search}

package/src/components/Items/hooks.tsx

@@ -1,5 +1,7 @@
 import { createRef, RefObject, 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';
@@ -64,16 +66,16 @@ export function useCreateBaseItems({ footerActiveElementsRefs }: UseCreateBaseIt
     () => ({
       searchItem: {
         itemRef: createRef<HTMLInputElement>(),
-        id: '~search',
-        parentId: '~main',
+        id: ITEM_PREFIXES.search,
+        parentId: ITEM_PREFIXES.default,
         items: [],
         allChildIds: [],
       },
       footerItems:
         footerActiveElementsRefs?.map((itemRef, idx) => ({
-          id: `~footer__${idx}`,
+          id: getFooterItemId(idx),
           itemRef,
-          parentId: '~main',
+          parentId: ITEM_PREFIXES.default,
           items: [],
           allChildIds: [],
         })) ?? [],

package/src/components/Items/utils.ts

@@ -1,6 +1,8 @@
 import { createRef } from 'react';
 
+import { ITEM_PREFIXES } from '../../constants';
 import { ItemContentProps } from '../../helperComponents';
+import { getItemAutoId } from '../../utils';
 import {
   AccordionItem,
   AnyType,
@@ -55,13 +57,13 @@ export function kindFlattenItems({ items, prefix, parentId }: KindFlattenItemsPr
   const flattenItems: Record<string, FlattenItem> = {};
   const focusFlattenItems: Record<string, FocusFlattenItem> = {};
 
-  function flatten({ item, idx, prefix, parentId = '~main' }: FlattenProps): {
+  function flatten({ item, idx, prefix, parentId = ITEM_PREFIXES.default }: FlattenProps): {
     id: ItemId;
     children: ItemId[];
     focusChildren: ItemId[];
     autoId: ItemId;
   } {
-    const autoId = prefix !== undefined ? [prefix, idx].join('-') : String(idx);
+    const autoId = prefix !== undefined ? getItemAutoId(prefix, idx) : String(idx);
     const itemId = (!isGroupItem(item) ? item.id : undefined) ?? autoId;
 
     if (isBaseItem(item)) {
@@ -92,7 +94,7 @@ export function kindFlattenItems({ items, prefix, parentId }: KindFlattenItemsPr
     const autoChildIds: ItemId[] = [];
 
     const { items, ...rest } = item;
-    const childActiveParent = isGroupItem(item) ? parentId ?? '~main' : autoId;
+    const childActiveParent = isGroupItem(item) ? parentId ?? ITEM_PREFIXES.default : autoId;
 
     const filteredItems = items.filter(item => !item.hidden);
 

package/src/components/Lists/Droplist/DropList.tsx

@@ -5,6 +5,7 @@ import { cloneElement, isValidElement, KeyboardEvent, ReactNode, useCallback, us
 import { Dropdown, DropdownProps } from '@snack-uikit/dropdown';
 import { useValueControl } from '@snack-uikit/utils';
 
+import { ITEM_PREFIXES } from '../../../constants';
 import { extractActiveItems, ItemId, kindFlattenItems, useCreateBaseItems } from '../../Items';
 import {
   CollapseContext,
@@ -67,9 +68,21 @@ export function Droplist({
    * Объект с пропсами всех вложенных айтемов; ключ id
    */
   const { flattenItems, focusFlattenItems, ...memorizedItems } = 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 = { ...pinTop.flattenItems, ...pinBottom.flattenItems, ...items.flattenItems };
     const focusFlattenItems = {
@@ -120,11 +133,14 @@ export function Droplist({
 
   const triggerElemRef = useRef<HTMLElement>(null);
   const listRef = useRef<HTMLElement>(null);
+  const firstItemId = ids[0];
 
   const { handleListKeyDownFactory, resetActiveItemId, activeItemId, forceUpdateActiveItemId } =
     useNewKeyboardNavigation({
       mainRef: triggerElemRefProp ?? triggerElemRef,
       focusFlattenItems,
+      hasListInFocusChain: true,
+      firstItemId,
     });
 
   const handleListKeyDown = useCallback(
@@ -190,6 +206,7 @@ export function Droplist({
       contentRender={contentRender}
       size={size}
       marker={marker}
+      firstItemId={firstItemId}
     >
       <SelectionProvider {...selection}>
         <CollapseContext.Provider

package/src/components/Lists/List/List.tsx

@@ -4,6 +4,7 @@ import { ForwardedRef, forwardRef, KeyboardEvent, useCallback, useMemo, useRef }
 
 import { isBrowser, useValueControl } from '@snack-uikit/utils';
 
+import { ITEM_PREFIXES } from '../../../constants';
 import { HiddenTabButton } from '../../../helperComponents';
 import { extractActiveItems, ItemId, kindFlattenItems, useCreateBaseItems } from '../../Items';
 import { CollapseContext, FocusListContext, NewListContextProvider, SelectionProvider } from '../contexts';
@@ -28,6 +29,8 @@ export const List = forwardRef(
       contentRender,
       size = 's',
       marker = true,
+      keyboardNavigationRef,
+      hasListInFocusChain = true,
       ...props
     }: ListProps,
     ref: ForwardedRef<HTMLElement>,
@@ -49,9 +52,21 @@ export const List = forwardRef(
      * Объект с пропсами всех вложенных айтемов; ключ id
      */
     const { flattenItems, focusFlattenItems, ...memorizedItems } = 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 = { ...pinTop.flattenItems, ...pinBottom.flattenItems, ...items.flattenItems };
       const focusFlattenItems = {
@@ -102,12 +117,16 @@ export const List = forwardRef(
 
     const listRef = useRef<HTMLElement>(null);
     const btnRef = useRef<HTMLButtonElement>(null);
+    const firstItemId = ids[0];
 
     const { handleListKeyDownFactory, activeItemId, resetActiveItemId, forceUpdateActiveItemId } =
       useNewKeyboardNavigation({
         mainRef: listRef,
         btnRef,
         focusFlattenItems,
+        keyboardNavigationRef,
+        hasListInFocusChain,
+        firstItemId,
       });
 
     const handleListKeyDown = useCallback(
@@ -133,6 +152,7 @@ export const List = forwardRef(
         contentRender={contentRender}
         size={size}
         marker={marker}
+        firstItemId={firstItemId}
       >
         <SelectionProvider {...selection}>
           <CollapseContext.Provider
@@ -158,12 +178,12 @@ export const List = forwardRef(
                   ref={mergeRefs(ref, listRef)}
                   onFocus={handleOnFocus}
                   onKeyDown={mergedHandlerKeyDown}
-                  tabIndex={tabIndex}
+                  tabIndex={hasListInFocusChain ? tabIndex : undefined}
                   search={search}
                   nested={false}
                 />
 
-                <HiddenTabButton ref={btnRef} listRef={listRef} tabIndex={tabIndex} />
+                {hasListInFocusChain && <HiddenTabButton ref={btnRef} listRef={listRef} tabIndex={tabIndex} />}
               </div>
             </FocusListContext.Provider>
           </CollapseContext.Provider>

package/src/components/Lists/ListPrivate/ListPrivate.tsx

@@ -6,8 +6,8 @@ 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 { FlattenBaseItem, PinBottomGroupItem, PinTopGroupItem, SearchItem, useRenderItems } from '../../Items';
+import { useNewListContext, useSelectionContext } from '../contexts';
 import commonStyles from '../styles.module.scss';
 import { ListPrivateProps } from '../types';
 import styles from './styles.module.scss';
@@ -40,11 +40,14 @@ export const ListPrivate = forwardRef(
       errorDataState,
       dataError,
       dataFiltered,
+      scrollToSelectedItem,
       ...props
     }: ListPrivateProps,
     ref: ForwardedRef<HTMLElement>,
   ) => {
-    const { size = 's' } = useNewListContext();
+    const { size = 's', flattenItems } = useNewListContext();
+    const { value, isSelectionSingle } = useSelectionContext();
+    const selectedItem = isSelectionSingle && value ? flattenItems[value] : undefined;
 
     const itemsJSX = useRenderItems(items);
     const itemsPinTopJSX = useRenderItems(pinTop);
@@ -88,6 +91,12 @@ export const ListPrivate = forwardRef(
       [dataError, dataFiltered, emptyStates, hasNoItems, itemsJSX, loading, loadingJSX, search?.value],
     );
 
+    const onScrollInitialized = () => {
+      if (scrollToSelectedItem) {
+        (selectedItem as FlattenBaseItem)?.itemRef?.current?.scrollIntoView();
+      }
+    };
+
     const listJSX = (
       <ul
         className={cn(commonStyles.listContainer, className)}
@@ -120,6 +129,7 @@ export const ListPrivate = forwardRef(
             ref={scrollContainerRef}
             untouchableScrollbars={untouchableScrollbars}
             onScroll={onScroll}
+            onInitialized={onScrollInitialized}
           >
             {content}
 

package/src/components/Lists/contexts/NewListProvider.tsx

@@ -1,5 +1,6 @@
 import { createContext, ReactNode, useContext } from 'react';
 
+import { ITEM_PREFIXES } from '../../../constants';
 import { ItemContentProps } from '../../../helperComponents';
 import { FlattenItem, FocusFlattenItem, ItemId } from '../../Items';
 
@@ -23,6 +24,7 @@ export type PublicListContextType = {
 export type PrivateListContextType = {
   flattenItems: Record<string, FlattenItem>;
   focusFlattenItems: Record<string, FocusFlattenItem>;
+  firstItemId: ItemId;
 };
 
 type Child = {
@@ -31,9 +33,10 @@ type Child = {
 
 type ListContextType = PublicListContextType & PrivateListContextType;
 
-export const ListContext = createContext({
+export const ListContext = createContext<ListContextType>({
   flattenItems: {},
   focusFlattenItems: {},
+  firstItemId: ITEM_PREFIXES.default,
 });
 
 export function useNewListContext() {
@@ -46,8 +49,9 @@ function extractListProps<T extends ListContextType>({
   flattenItems,
   focusFlattenItems,
   contentRender,
+  firstItemId,
 }: T) {
-  return { size, marker, contentRender, flattenItems, focusFlattenItems };
+  return { size, marker, contentRender, flattenItems, focusFlattenItems, firstItemId };
 }
 
 export function NewListContextProvider({ children, ...props }: ListContextType & Child) {

package/src/components/Lists/hooks.ts

@@ -1,21 +1,33 @@
-import { KeyboardEvent, RefObject, useCallback, useRef, useState } from 'react';
+import { KeyboardEvent, RefObject, useCallback, useImperativeHandle, useRef, useState } from 'react';
 
+import { ITEM_PREFIXES } from '../../constants';
 import { FocusFlattenItem, ItemId } from '../Items';
 
 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 function useNewKeyboardNavigation<T extends HTMLElement>({
   mainRef,
   btnRef,
   focusFlattenItems,
+  keyboardNavigationRef,
+  hasListInFocusChain,
+  firstItemId,
 }: UseNewKeyboardNavigationProps<T>) {
-  const [activeItemId, setActiveItemId] = useState<ItemId | undefined>();
+  const defaultActiveItemId = hasListInFocusChain ? undefined : firstItemId;
+  const [activeItemId, setActiveItemId] = useState<ItemId | undefined>(() => defaultActiveItemId);
+  const activeItemIdRef = useRef<ItemId | undefined>(defaultActiveItemId);
 
-  const activeItemIdRef = useRef<ItemId | undefined>();
+  const resetActiveItemId = useCallback(() => {
+    setActiveItemId(defaultActiveItemId);
+    activeItemIdRef.current = defaultActiveItemId;
+  }, [defaultActiveItemId]);
 
   const handleListKeyDownFactory = useCallback(
     (ids: ItemId[], expandedIds: ItemId[]) => (e: KeyboardEvent<T>) => {
@@ -52,12 +64,14 @@ export function useNewKeyboardNavigation<T extends HTMLElement>({
         }
         case 'ArrowUp': {
           if (ids[0] === activeItemIdRef.current) {
-            const item = focusFlattenItems[ids[0]];
-
-            if (item.parentId === '~main') {
-              activeItemIdRef.current = undefined;
-              setActiveItemId(undefined);
-              mainRef?.current?.focus();
+            if (hasListInFocusChain) {
+              const item = focusFlattenItems[ids[0]];
+
+              if (item.parentId === ITEM_PREFIXES.default) {
+                activeItemIdRef.current = undefined;
+                setActiveItemId(undefined);
+                mainRef?.current?.focus();
+              }
             }
           } else if (activeItemIdRef.current !== undefined) {
             const activeIndex = ids.findIndex(id => id === activeItemIdRef.current);
@@ -99,12 +113,16 @@ export function useNewKeyboardNavigation<T extends HTMLElement>({
 
         case 'Tab': {
           if (activeItemIdRef.current !== undefined) {
-            e.preventDefault();
-            e.stopPropagation();
+            if (hasListInFocusChain) {
+              e.preventDefault();
+              e.stopPropagation();
 
-            activeItemIdRef.current = undefined;
-            setActiveItemId(undefined);
-            mainRef?.current?.focus();
+              activeItemIdRef.current = undefined;
+              setActiveItemId(undefined);
+              mainRef?.current?.focus();
+            } else {
+              resetActiveItemId();
+            }
           } else {
             btnRef && !e.shiftKey ? btnRef?.current?.focus() : mainRef?.current?.focus();
           }
@@ -116,14 +134,9 @@ export function useNewKeyboardNavigation<T extends HTMLElement>({
         }
       }
     },
-    [focusFlattenItems, mainRef, btnRef],
+    [focusFlattenItems, hasListInFocusChain, mainRef, resetActiveItemId, btnRef],
   );
 
-  const resetActiveItemId = useCallback(() => {
-    setActiveItemId(undefined);
-    activeItemIdRef.current = undefined;
-  }, []);
-
   const forceUpdateActiveItemId = useCallback(
     (itemId: ItemId) => {
       setActiveItemId(itemId);
@@ -136,6 +149,8 @@ export function useNewKeyboardNavigation<T extends HTMLElement>({
     [focusFlattenItems],
   );
 
+  useImperativeHandle(keyboardNavigationRef, () => ({ focusItem: forceUpdateActiveItemId }), [forceUpdateActiveItemId]);
+
   return {
     resetActiveItemId,
     activeItemId,

package/src/components/Lists/types.ts

@@ -34,6 +34,8 @@ export type ListProps = WithSupportProps<
     footer?: ReactNode;
     /** Список ссылок на кастомные элементы, помещенные в специальную секцию внизу списка  */
     footerActiveElementsRefs?: RefObject<HTMLElement>[];
+    /** Ссылка на управление навигацией листа с клавиатуры  */
+    keyboardNavigationRef?: RefObject<{ focusItem(id: ItemId): void }>;
     /** Настройки поисковой строки */
     search?: SearchState;
 
@@ -43,10 +45,16 @@ 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 &
@@ -74,9 +82,9 @@ export type DroplistProps = {
    */
   children: ReactNode | ((params: { onKeyDown?: (e: KeyboardEvent<HTMLElement>) => void }) => ReactNode);
 } & Pick<DropdownProps, 'trigger' | 'placement' | 'widthStrategy' | 'open' | 'onOpenChange' | 'triggerClassName'> &
-  Omit<ListProps, 'tabIndex' | 'onKeyDown'>;
+  Omit<ListProps, 'tabIndex' | 'onKeyDown' | 'hasListInFocusChain' | 'keyboardNavigationRef'>;
 
-export type ListPrivateProps = Omit<ListProps, 'pinTop' | 'pinBottom' | 'items'> & {
+export type ListPrivateProps = Omit<ListProps, 'pinTop' | 'pinBottom' | 'items' | 'hasListInFocusChain'> & {
   nested?: boolean;
   active?: boolean;
   tabIndex?: number;

package/src/constants.ts

@@ -0,0 +1,8 @@
+export const ITEM_PREFIXES = {
+  default: '~main',
+  pinTop: '~pinTop',
+  pinBottom: '~pinBottom',
+  footer: '~footer',
+  search: '~search',
+  dropFocus: '~dropFocus',
+};