@snack-uikit/list 0.19.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.19.0",
+  "version": "0.21.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -36,16 +36,16 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/button": "0.18.0",
-    "@snack-uikit/divider": "3.1.0",
-    "@snack-uikit/dropdown": "0.3.0",
-    "@snack-uikit/icons": "0.23.0",
-    "@snack-uikit/info-block": "0.5.0",
-    "@snack-uikit/loaders": "0.6.0",
-    "@snack-uikit/scroll": "0.7.0",
-    "@snack-uikit/search-private": "0.3.0",
-    "@snack-uikit/toggles": "0.11.0",
-    "@snack-uikit/truncate-string": "0.5.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.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",
     "classnames": "2.5.1",
     "merge-refs": "1.2.2"
@@ -53,5 +53,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "62cc21d8606a61a78f80e3a7455b20d6f38474fa"
+  "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/BaseItem/styles.module.scss

@@ -1,5 +1,5 @@
-@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-dropList';
-@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-dropList';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
 
 $sizes: 's', 'm', 'l';
 
@@ -10,8 +10,8 @@ $sizes: 's', 'm', 'l';
   align-items: center;
   justify-content: center;
 
-  width: $dimension-3m;
-  height: $dimension-3m;
+  width: styles-tokens-dropList.$dimension-3m;
+  height: styles-tokens-dropList.$dimension-3m;
 }
 
 .beforeContent {
@@ -21,10 +21,10 @@ $sizes: 's', 'm', 'l';
   align-items: center;
   justify-content: center;
 
-  width: $icon-s;
-  height: $icon-s;
+  width: styles-tokens-element.$icon-s;
+  height: styles-tokens-element.$icon-s;
 
-  color: $sys-neutral-text-light;
+  color: styles-tokens-dropList.$sys-neutral-text-light;
 
   svg {
     max-width: 100%;
@@ -35,12 +35,12 @@ $sizes: 's', 'm', 'l';
 .expandableIcon {
   display: flex;
   align-items: center;
-  color: $sys-neutral-text-light;
+  color: styles-tokens-dropList.$sys-neutral-text-light;
   fill: currentColor;
 }
 
 .markerContainer {
-  @include composite-var($drop-list, 'item', 'marker-container');
+  @include styles-tokens-dropList.composite-var(styles-tokens-dropList.$drop-list, 'item', 'marker-container');
 
   pointer-events: none;
 
@@ -52,7 +52,7 @@ $sizes: 's', 'm', 'l';
   height: 100%;
 
   &:before {
-    @include composite-var($drop-list, 'item', 'marker');
+    @include styles-tokens-dropList.composite-var(styles-tokens-dropList.$drop-list, 'item', 'marker');
 
     content: '';
     display: block;
@@ -65,11 +65,11 @@ $sizes: 's', 'm', 'l';
   @each $size in $sizes {
     &[data-size='#{$size}'] {
       padding-left: calc(
-        var(--level, 0) * $dimension-050m + simple-var($drop-list, 'item', $size, 'container', 'padding-left')
+        var(--level, 0) * styles-tokens-dropList.$dimension-050m + styles-tokens-dropList.simple-var(styles-tokens-dropList.$drop-list, 'item', $size, 'container', 'padding-left')
       );
 
       .headline {
-        @include composite-var($drop-list, 'item', $size, 'headline');
+        @include styles-tokens-dropList.composite-var(styles-tokens-dropList.$drop-list, 'item', $size, 'headline');
       }
     }
   }
@@ -82,11 +82,11 @@ $sizes: 's', 'm', 'l';
 .innerWrapper {
   &[data-disabled] {
     .expandableIcon {
-      color: $sys-neutral-text-disabled;
+      color: styles-tokens-dropList.$sys-neutral-text-disabled;
     }
 
     .beforeContent {
-      opacity: $opacity-a064;
+      opacity: styles-tokens-dropList.$opacity-a064;
     }
 
     .droplistItem {
@@ -98,31 +98,31 @@ $sizes: 's', 'm', 'l';
   &[data-checked] {
     &[data-variant='single'] {
       &::before {
-        opacity: $opacity-a008;
-        background-color: $sys-primary-accent-default;
+        opacity: styles-tokens-dropList.$opacity-a008;
+        background-color: styles-tokens-dropList.$sys-primary-accent-default;
       }
 
       &:hover {
         &::before {
-          opacity: $opacity-a016;
-          background-color: $sys-primary-accent-default;
+          opacity: styles-tokens-dropList.$opacity-a016;
+          background-color: styles-tokens-dropList.$sys-primary-accent-default;
         }
       }
     }
 
     .markerContainer:before {
-      background-color: $sys-primary-accent-default;
+      background-color: styles-tokens-dropList.$sys-primary-accent-default;
     }
 
     .droplistItem:focus-visible {
       &[data-variant='single'] {
-        outline-color: $sys-primary-accent-default;
+        outline-color: styles-tokens-dropList.$sys-primary-accent-default;
       }
     }
 
     &[data-disabled] {
       .markerContainer:before {
-        background-color: $sys-neutral-text-disabled;
+        background-color: styles-tokens-dropList.$sys-neutral-text-disabled;
       }
     }
   }

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/PinGroupItem/styles.module.scss

@@ -1,12 +1,11 @@
-@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-dropList';
-@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-dropList';
 
 $sizes: 's', 'm', 'l';
 
 .pinTopItem {
   @each $size in $sizes {
     &[data-size='#{$size}'] {
-      @include composite-var($drop-list, 'item', $size, 'content-pin-top');
+      @include styles-tokens-dropList.composite-var(styles-tokens-dropList.$drop-list, 'item', $size, 'content-pin-top');
     }
   }
 
@@ -23,7 +22,7 @@ $sizes: 's', 'm', 'l';
 .pinBottomItem {
   @each $size in $sizes {
     &[data-size='#{$size}'] {
-      @include composite-var($drop-list, 'item', $size, 'content-pin-bottom');
+      @include styles-tokens-dropList.composite-var(styles-tokens-dropList.$drop-list, 'item', $size, 'content-pin-bottom');
     }
   }
 

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/SearchItem/styles.module.scss

@@ -1,13 +1,13 @@
-@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
 
 .searchItem {
   width: 100%;
 
   &:focus-within,
   &:focus-visible {
-    @include outline-inside-var($container-focused-s);
+    @include styles-tokens-element.outline-inside-var(styles-tokens-element.$container-focused-s);
 
     max-width: 100%;
-    outline-color: $sys-primary-decor-activated;
+    outline-color: styles-tokens-element.$sys-primary-decor-activated;
   }
 }

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/styles.module.scss

@@ -1,5 +1,5 @@
-@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-dropList';
-@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-dropList';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
 
 $sizes: 's', 'm', 'l';
 
@@ -45,16 +45,16 @@ $sizes: 's', 'm', 'l';
     &[data-focused],
     &:focus-visible {
       &::before {
-        opacity: $opacity-a008;
-        background-color: $sys-neutral-accent-default;
+        opacity: styles-tokens-dropList.$opacity-a008;
+        background-color: styles-tokens-dropList.$sys-neutral-accent-default;
       }
     }
 
     @media (hover: hover) {
       &:hover {
         &::before {
-          opacity: $opacity-a008;
-          background-color: $sys-neutral-accent-default;
+          opacity: styles-tokens-dropList.$opacity-a008;
+          background-color: styles-tokens-dropList.$sys-neutral-accent-default;
         }
       }
     }
@@ -76,7 +76,7 @@ $sizes: 's', 'm', 'l';
   margin: 0;
   padding: 0;
 
-  color: $sys-neutral-text-main;
+  color: styles-tokens-dropList.$sys-neutral-text-main;
   text-align: start;
 
   appearance: unset;
@@ -86,14 +86,14 @@ $sizes: 's', 'm', 'l';
 
   @each $size in $sizes {
     &[data-size='#{$size}'] {
-      @include composite-var($drop-list, 'item', $size, 'container');
+      @include styles-tokens-dropList.composite-var(styles-tokens-dropList.$drop-list, 'item', $size, 'container');
     }
   }
 
   &:not([data-inactive], [data-disabled]) {
     &[data-focused],
     &:focus-visible {
-      @include outline-inside-var($container-focused-s);
+      @include styles-tokens-dropList.outline-inside-var(styles-tokens-element.$container-focused-s);
     }
   }
 }

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>