@snack-uikit/list 0.1.1 → 0.1.3-preview-3a43a07a.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.1.2 (2024-01-31)
+
+
+### Bug Fixes
+
+* **FF-4198:** reset active focus index when clicking the item with mouse ([638e6f0](https://github.com/cloud-ru-tech/snack-uikit/commit/638e6f0069ec7f444b39d62d91d6e845e13aee9f))
+
+
+
+
+
 ## 0.1.1 (2024-01-30)
 
 

package/README.md

@@ -20,52 +20,55 @@
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
-| items* | `ItemProps[]` | - |  |
-| triggerElemRef | `RefObject<HTMLElement>` | - |  |
-| open | `boolean` | - |  |
-| onOpenChange | `(open: boolean) => void` | - |  |
-| trigger | enum Trigger: `"click"`, `"hover"`, `"focusVisible"`, `"focus"`, `"hoverAndFocusVisible"`, `"hoverAndFocus"`, `"clickAndFocusVisible"` | - |  |
-| placement | enum Placement: `"left"`, `"left-start"`, `"left-end"`, `"right"`, `"right-start"`, `"right-end"`, `"top"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-start"`, `"bottom-end"` | - |  |
-| widthStrategy | enum PopoverWidthStrategy: `"auto"`, `"gte"`, `"eq"` | - |  |
-| pinTop | `ItemProps[]` | - |  |
-| pinBottom | `ItemProps[]` | - |  |
-| footer | `ReactNode` | - |  |
-| search | `SearchState` | - |  |
-| loading | `boolean` | - |  |
-| noData | `string` | - |  |
-| noResults | `string` | - |  |
-| footerActiveElementsRefs | `RefObject<HTMLElement>[]` | - |  |
+| items* | `ItemProps[]` | - | Основные элементы списка |
+| triggerElemRef | `RefObject<HTMLElement>` | - | Ссылка на элемент-триггер для дроплиста |
+| children | `ReactNode` | - | Триггер для дроплиста |
+| open | `boolean` | - | Управляет состоянием показан/не показан. |
+| onOpenChange | `(isOpen: boolean) => void` | - | Колбек отображения компонента. Срабатывает при изменении состояния open. |
+| widthStrategy | enum PopoverWidthStrategy: `"auto"`, `"gte"`, `"eq"` | auto | Стратегия управления шириной контейнера поповера <br> - `auto` - соответствует ширине контента, <br> - `gte` - Great Than or Equal, равен ширине таргета или больше ее, если контент в поповере шире, <br> - `eq` - Equal, строго равен ширине таргета. |
+| trigger | enum Trigger: `"click"`, `"hover"`, `"focusVisible"`, `"focus"`, `"hoverAndFocusVisible"`, `"hoverAndFocus"`, `"clickAndFocusVisible"` | - | Условие отображения поповера: <br> - `click` - открывать по клику <br> - `hover` - открывать по ховеру <br> - `focusVisible` - открывать по focus-visible <br> - `focus` - открывать по фокусу <br> - `hoverAndFocusVisible` - открывать по ховеру и focus-visible <br> - `hoverAndFocus` - открывать по ховеру и фокусу <br> - `clickAndFocusVisible` - открывать по клику и focus-visible |
+| placement | enum Placement: `"left"`, `"left-start"`, `"left-end"`, `"right"`, `"right-start"`, `"right-end"`, `"top"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-start"`, `"bottom-end"` | top | Положение поповера относительно своего триггера (children). |
 | value | `SelectionSingleValueType \| SelectionSingleValueType[]` | - | Controlled состояние |
 | defaultValue | `SelectionSingleValueType \| SelectionSingleValueType[]` | - | Начальное состояние |
 | onChange | `((value: any) => void) \| ((value: any) => void)` | - | Controlled обработчик измения состояния |
 | selection | "single" \| "multiple" | - | Режим выбора |
-| size | "s" \| "m" \| "l" | - |  |
-| marker | `boolean` | - |  |
-| scroll | `boolean` | - |  |
-| scrollRef | `RefObject<HTMLElement>` | - |  |
-| scrollContainerRef | `RefObject<HTMLElement>` | - |  |
+| pinTop | `ItemProps[]` | - | Элементы списка, закрепленные сверху |
+| pinBottom | `ItemProps[]` | - | Элементы списка, закрепленные снизу |
+| footer | `ReactNode` | - | Кастомизируемый элемент, помещаемый внизу списка |
+| footerActiveElementsRefs | `RefObject<HTMLElement>[]` | - | Список ссылок на костомные элементы, помещенные в специальную секцию внизу списка |
+| search | `SearchState` | - | Настройки поисковой строки |
+| loading | `boolean` | - | Флаг, отвещающий за состояние загрузки списка |
+| noData | `string` | - | Текст для состояния "Отсутсвие данных" |
+| noResults | `string` | - | Текст для состояния "Отсутсвие результата" при поиске |
+| size | "s" \| "m" \| "l" | - | Размер списка |
+| marker | `boolean` | - | Отображать ли маркер у выбранного жлемента списка |
+| scroll | `boolean` | - | Включить ли скролл для основной части списка |
+| scrollRef | `RefObject<HTMLElement>` | - | Ссылка на элемент, обозначающий самый конец прокручиваемого списка |
+| scrollContainerRef | `RefObject<HTMLElement>` | - | Ссылка на контейнер, который скроллится |
 ## List
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
-| items* | `ItemProps[]` | - |  |
-| pinTop | `ItemProps[]` | - |  |
-| pinBottom | `ItemProps[]` | - |  |
-| footer | `ReactNode` | - |  |
-| search | `SearchState` | - |  |
-| loading | `boolean` | - |  |
-| noData | `string` | - |  |
-| noResults | `string` | - |  |
-| footerActiveElementsRefs | `RefObject<HTMLElement>[]` | - |  |
+| items* | `ItemProps[]` | - | Основные элементы списка |
+| pinTop | `ItemProps[]` | - | Элементы списка, закрепленные сверху |
+| pinBottom | `ItemProps[]` | - | Элементы списка, закрепленные снизу |
+| footer | `ReactNode` | - | Кастомизируемый элемент, помещаемый внизу списка |
+| footerActiveElementsRefs | `RefObject<HTMLElement>[]` | - | Список ссылок на костомные элементы, помещенные в специальную секцию внизу списка |
+| search | `SearchState` | - | Настройки поисковой строки |
+| loading | `boolean` | - | Флаг, отвещающий за состояние загрузки списка |
+| noData | `string` | - | Текст для состояния "Отсутсвие данных" |
+| noResults | `string` | - | Текст для состояния "Отсутсвие результата" при поиске |
+| tabIndex | `number` | - |  |
+| onKeyDown | `(e: KeyboardEvent<HTMLElement>) => void` | - |  |
 | value | `SelectionSingleValueType \| SelectionSingleValueType[]` | - | Controlled состояние |
 | defaultValue | `SelectionSingleValueType \| SelectionSingleValueType[]` | - | Начальное состояние |
 | onChange | `((value: any) => void) \| ((value: any) => void)` | - | Controlled обработчик измения состояния |
 | selection | "single" \| "multiple" | - | Режим выбора |
-| size | "s" \| "m" \| "l" | - |  |
-| marker | `boolean` | - |  |
-| scroll | `boolean` | - |  |
-| scrollRef | `RefObject<HTMLElement>` | - |  |
-| scrollContainerRef | `RefObject<HTMLElement>` | - |  |
+| size | "s" \| "m" \| "l" | - | Размер списка |
+| marker | `boolean` | - | Отображать ли маркер у выбранного жлемента списка |
+| scroll | `boolean` | - | Включить ли скролл для основной части списка |
+| scrollRef | `RefObject<HTMLElement>` | - | Ссылка на элемент, обозначающий самый конец прокручиваемого списка |
+| scrollContainerRef | `RefObject<HTMLElement>` | - | Ссылка на контейнер, который скроллится |
 | ref | `Ref<HTMLElement>` | - | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom |
 | key | `Key` | - |  |
 

package/dist/components/Items/BaseItem/BaseItem.d.ts

@@ -1,8 +1,8 @@
-import { BaseItemPrivateProps, BaseItemProps, SwitchProps } from '../types';
-type AllBaseItemProps = BaseItemProps & BaseItemPrivateProps & SwitchProps & {
+import { BaseItemPrivateProps, BaseItemProps } from '../types';
+type AllBaseItemProps = BaseItemProps & BaseItemPrivateProps & {
     indeterminate?: boolean;
     onSelect?(): void;
     isParentNode?: boolean;
 };
-export declare function BaseItem({ beforeContent, afterContent, content, onClick, id, expandIcon, disabled, open, itemRef, switch: switchProp, onKeyDown, onFocus, indeterminate, onSelect, isParentNode, ...rest }: AllBaseItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function BaseItem({ beforeContent, afterContent, content, onClick, id, expandIcon, disabled, open, itemRef, switch: switchProp, onKeyDown, onFocus, indeterminate, onSelect, isParentNode, className, inactive, ...rest }: AllBaseItemProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -14,13 +14,14 @@ import cn from 'classnames';
 import { Checkbox, Switch } from '@snack-uikit/toggles';
 import { TruncateString } from '@snack-uikit/truncate-string';
 import { extractSupportProps } from '@snack-uikit/utils';
-import { useCollapseContext, useListContext, useSelectionContext } from '../../Lists/contexts';
+import { useCollapseContext, useListContext, useParentListContext, useSelectionContext } from '../../Lists/contexts';
 import commonStyles from '../styles.module.css';
 import { CHECKBOX_SIZE_MAP } from './constants';
 import styles from './styles.module.css';
 export function BaseItem(_a) {
-    var { beforeContent, afterContent, content, onClick, id, expandIcon, disabled, open, itemRef, switch: switchProp, onKeyDown, onFocus, indeterminate, onSelect, isParentNode } = _a, rest = __rest(_a, ["beforeContent", "afterContent", "content", "onClick", "id", "expandIcon", "disabled", "open", "itemRef", "switch", "onKeyDown", "onFocus", "indeterminate", "onSelect", "isParentNode"]);
+    var { beforeContent, afterContent, content, onClick, id, expandIcon, disabled, open, itemRef, switch: switchProp, onKeyDown, onFocus, indeterminate, onSelect, isParentNode, className, inactive } = _a, rest = __rest(_a, ["beforeContent", "afterContent", "content", "onClick", "id", "expandIcon", "disabled", "open", "itemRef", "switch", "onKeyDown", "onFocus", "indeterminate", "onSelect", "isParentNode", "className", "inactive"]);
     const { option, caption, description } = content || {};
+    const { parentResetActiveFocusIndex } = useParentListContext();
     const { size, marker } = useListContext();
     const { level = 0 } = useCollapseContext();
     const { value, onChange, selection, isSelectionSingle, isSelectionMultiple } = useSelectionContext();
@@ -29,8 +30,11 @@ export function BaseItem(_a) {
         onChange === null || onChange === void 0 ? void 0 : onChange(id !== null && id !== void 0 ? id : '');
     };
     const handleItemClick = (e) => {
-        if (!isParentNode) {
-            handleChange();
+        if (!inactive) {
+            parentResetActiveFocusIndex === null || parentResetActiveFocusIndex === void 0 ? void 0 : parentResetActiveFocusIndex();
+            if (!isParentNode) {
+                handleChange();
+            }
         }
         onClick === null || onClick === void 0 ? void 0 : onClick(e);
     };
@@ -63,5 +67,5 @@ export function BaseItem(_a) {
         e.stopPropagation();
     };
     const props = extractSupportProps(rest);
-    return (_jsx("li", { role: 'menuitem', "data-test-id": props['data-test-id'] || 'list__base-item_' + id, children: _jsxs("button", { ref: itemRef, className: cn(commonStyles.listItem, styles.droplistItem), "data-size": size, onClick: handleItemClick, tabIndex: -1, "data-checked": (isParentNode && (indeterminate || isChecked)) || (isChecked && !switchProp) || undefined, "data-variant": selection || undefined, "data-open": open || undefined, disabled: disabled, onKeyDown: handleItemKeyDown, onFocus: handleItemFocus, style: { '--level': level }, children: [!switchProp && isSelectionSingle && marker && !isParentNode && (_jsx("div", { className: styles.markerContainer, "data-test-id": 'list__base-item-marker' })), !switchProp && isSelectionMultiple && (_jsx("div", { className: styles.checkbox, children: _jsx(Checkbox, { size: CHECKBOX_SIZE_MAP[size !== null && size !== void 0 ? size : 's'], disabled: disabled, tabIndex: -1, onChange: handleCheckboxChange, checked: isChecked, "data-test-id": 'list__base-item-checkbox', onClick: handleCheckboxClick, indeterminate: indeterminate }) })), beforeContent && _jsx("div", { className: styles.beforeContent, children: beforeContent }), _jsxs("div", { className: styles.content, children: [_jsxs("div", { className: styles.headline, children: [_jsx("span", { className: styles.option, children: _jsx(TruncateString, { text: option, maxLines: 1 }) }), caption && _jsx("span", { className: styles.caption, children: caption })] }), description && (_jsx("div", { className: styles.description, children: _jsx(TruncateString, { text: description, maxLines: 2 }) }))] }), afterContent, switchProp && _jsx(Switch, { disabled: disabled, checked: isChecked, "data-test-id": 'list__base-item-switch' }), !switchProp && expandIcon && _jsx("span", { className: styles.expandableIcon, children: expandIcon })] }) }));
+    return (_jsx("li", { role: 'menuitem', "data-test-id": props['data-test-id'] || 'list__base-item_' + id, children: _jsxs("button", { ref: itemRef, className: cn(commonStyles.listItem, styles.droplistItem, className), "data-size": size, onClick: handleItemClick, tabIndex: -1, "data-non-pointer": inactive && !onClick, "data-inactive": inactive || undefined, "data-checked": (isParentNode && (indeterminate || isChecked)) || (isChecked && !switchProp) || undefined, "data-variant": selection || undefined, "data-open": open || undefined, disabled: disabled, onKeyDown: handleItemKeyDown, onFocus: handleItemFocus, style: { '--level': level }, children: [!switchProp && isSelectionSingle && marker && !isParentNode && !inactive && (_jsx("div", { className: styles.markerContainer, "data-test-id": 'list__base-item-marker' })), !switchProp && isSelectionMultiple && !inactive && (_jsx("div", { className: styles.checkbox, children: _jsx(Checkbox, { size: CHECKBOX_SIZE_MAP[size !== null && size !== void 0 ? size : 's'], disabled: disabled, tabIndex: -1, onChange: handleCheckboxChange, checked: isChecked, "data-test-id": 'list__base-item-checkbox', onClick: handleCheckboxClick, indeterminate: indeterminate }) })), beforeContent && _jsx("div", { className: styles.beforeContent, children: beforeContent }), _jsxs("div", { className: styles.content, children: [_jsxs("div", { className: styles.headline, children: [_jsx("span", { className: styles.option, children: _jsx(TruncateString, { text: option, maxLines: 1 }) }), caption && _jsx("span", { className: styles.caption, children: caption })] }), description && (_jsx("div", { className: styles.description, children: _jsx(TruncateString, { text: description, maxLines: 2 }) }))] }), afterContent, switchProp && !inactive && (_jsx(Switch, { disabled: disabled, checked: isChecked, "data-test-id": 'list__base-item-switch' })), !switchProp && expandIcon && _jsx("span", { className: styles.expandableIcon, children: expandIcon })] }) }));
 }

package/dist/components/Items/BaseItem/styles.module.css

@@ -170,6 +170,9 @@
   letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
   paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
 }
+.droplistItem[data-non-pointer]{
+  cursor:inherit;
+}
 .droplistItem:disabled .option,
 .droplistItem:disabled .description,
 .droplistItem:disabled .caption,

package/dist/components/Items/styles.module.css

@@ -50,16 +50,6 @@
   height:100%;
   background-color:transparent;
 }
-.listItem[data-open]::after, .listItem[data-focused]::after, .listItem:hover::after, .listItem:focus-visible::after{
-  opacity:var(--opacity-a008, 0.08);
-  background-color:var(--sys-neutral-accent-default, #757575);
-}
-.listItem[data-focused], .listItem:focus-visible{
-  outline-width:var(--border-state-focus-s-border-width, 2px);
-  outline-style:var(--border-state-focus-s-border-style, solid);
-  outline-color:var(--border-state-focus-s-border-color, );
-  outline-offset:calc(var(--border-state-focus-s-border-width, 2px) * -1);
-}
 .listItem:disabled{
   cursor:not-allowed;
   background-color:transparent;
@@ -71,4 +61,14 @@
 .listItem:disabled::after{
   cursor:not-allowed;
   background-color:transparent;
+}
+.listItem:not([data-inactive])[data-open]::after, .listItem:not([data-inactive])[data-focused]::after, .listItem:not([data-inactive]):hover::after, .listItem:not([data-inactive]):focus-visible::after{
+  opacity:var(--opacity-a008, 0.08);
+  background-color:var(--sys-neutral-accent-default, #757575);
+}
+.listItem:not([data-inactive])[data-focused], .listItem:not([data-inactive]):focus-visible{
+  outline-width:var(--border-state-focus-s-border-width, 2px);
+  outline-style:var(--border-state-focus-s-border-style, solid);
+  outline-color:var(--border-state-focus-s-border-color, );
+  outline-offset:calc(var(--border-state-focus-s-border-width, 2px) * -1);
 }

package/dist/components/Items/types.d.ts

@@ -22,22 +22,24 @@ export type BaseItemProps = WithSupportProps<{
     id?: string | number;
     disabled?: boolean;
     itemRef?: RefObject<HTMLButtonElement>;
-}>;
-export type SwitchProps = {
+    className?: string;
+    inactive?: boolean;
     switch?: boolean;
-};
-export type ItemProps = (BaseItemProps & SwitchProps) | AccordionItemProps | NextListItemProps | GroupItemProps;
-export type AccordionItemProps = BaseItemProps & {
+}>;
+type BaseItemsWithoutNonGroupProps = Omit<BaseItemProps, 'switch' | 'inactive'>;
+export type ItemProps = BaseItemProps | AccordionItemProps | NextListItemProps | GroupItemProps;
+export type AccordionItemProps = BaseItemsWithoutNonGroupProps & {
     items: ItemProps[];
     type: 'collapse';
 };
-export type NextListItemProps = BaseItemProps & {
+export type NextListItemProps = BaseItemsWithoutNonGroupProps & {
     items: ItemProps[];
     type: 'next-list';
     placement?: 'right-start' | 'left-start' | 'left' | 'right' | 'left-end' | 'right-end';
     search?: SearchState;
 } & ScrollProps;
-export type GroupItemProps = SeparatorProps & {
+export type GroupItemProps = Omit<SeparatorProps, 'size'> & {
     items: ItemProps[];
     id?: string | number;
 };
+export {};

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

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

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

@@ -10,6 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import mergeRefs from 'merge-refs';
 import { forwardRef, useMemo, useRef, useState } from 'react';
 import { HiddenTabButton } from '../../../helperComponents';
 import { extractItemIds, extractItemRefs, withCollapsedItems } from '../../../utils';
@@ -18,8 +19,8 @@ import { extractSelectionProps, ParentListContext, SelectionProvider, useParentL
 import { useKeyboardNavigation } from '../hooks';
 import { ListPrivate } from '../ListPrivate';
 import styles from '../styles.module.css';
-export const List = forwardRef((_a) => {
-    var { items: itemsProp, search, pinBottom, pinTop, footerActiveElementsRefs } = _a, props = __rest(_a, ["items", "search", "pinBottom", "pinTop", "footerActiveElementsRefs"]);
+export const List = forwardRef((_a, ref) => {
+    var { items: itemsProp, search, pinBottom, pinTop, footerActiveElementsRefs, onKeyDown, tabIndex = 0 } = _a, props = __rest(_a, ["items", "search", "pinBottom", "pinTop", "footerActiveElementsRefs", "onKeyDown", "tabIndex"]);
     const hasSearch = useMemo(() => Boolean(search), [search]);
     const memorizedItems = useMemo(() => addItemsIds((pinTop !== null && pinTop !== void 0 ? pinTop : []).concat(itemsProp).concat(pinBottom !== null && pinBottom !== void 0 ? pinBottom : [])), [itemsProp, pinBottom, pinTop]);
     const [openCollapsedItems, setOpenCollapsedItems] = useState([]);
@@ -52,6 +53,16 @@ export const List = forwardRef((_a) => {
         itemRefs,
     });
     const isActive = listRef.current === document.activeElement && activeFocusIndex === -1 && openNestedIndex === -1;
+    const mergedHandlerKeyDown = (e) => {
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
+        handleListKeyDown === null || handleListKeyDown === void 0 ? void 0 : handleListKeyDown(e);
+    };
+    const handleOnFocus = (e) => {
+        if (e.relatedTarget === null ||
+            (e.relatedTarget && itemRefs.every(({ current }) => current !== e.relatedTarget))) {
+            resetActiveFocusIndex();
+        }
+    };
     return (
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
@@ -68,10 +79,5 @@ export const List = forwardRef((_a) => {
                 parentResetActiveFocusIndex: resetActiveFocusIndex,
                 openCollapsedItems,
                 toggleOpenCollapsedItems: id => setOpenCollapsedItems(items => items.includes(id) ? items.filter(item => item !== id) : items.concat([id])),
-            }, children: _jsxs("div", { className: styles.wrapper, "data-active": isActive || undefined, children: [_jsx(ListPrivate, Object.assign({}, props, slicedItems, { ref: listRef, onFocus: e => {
-                            if (e.relatedTarget === null ||
-                                (e.relatedTarget && itemRefs.every(({ current }) => current !== e.relatedTarget))) {
-                                resetActiveFocusIndex();
-                            }
-                        }, onKeyDown: handleListKeyDown, tabIndex: 0, search: search, nested: false })), _jsx(HiddenTabButton, { ref: btnRef, listRef: listRef })] }) }) })));
+            }, children: _jsxs("div", { className: styles.wrapper, "data-active": isActive || undefined, children: [_jsx(ListPrivate, Object.assign({}, props, slicedItems, { ref: mergeRefs(ref, listRef), onFocus: handleOnFocus, onKeyDown: mergedHandlerKeyDown, tabIndex: tabIndex, search: search, nested: false })), _jsx(HiddenTabButton, { ref: btnRef, listRef: listRef, tabIndex: tabIndex })] }) }) })));
 });

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

@@ -6,11 +6,13 @@ export declare const ListPrivate: import("react").ForwardRefExoticComponent<{
     pinTop?: import("../../Items").ItemProps[] | undefined;
     pinBottom?: import("../../Items").ItemProps[] | undefined;
     footer?: import("react").ReactNode;
+    footerActiveElementsRefs?: RefObject<HTMLElement>[] | undefined;
     search?: import("../../../types").SearchState | undefined;
     loading?: boolean | undefined;
     noData?: string | undefined;
     noResults?: string | undefined;
-    footerActiveElementsRefs?: RefObject<HTMLElement>[] | undefined;
+    tabIndex?: number | undefined;
+    onKeyDown?(e: import("react").KeyboardEvent<HTMLElement>): void;
 } & Pick<import("../contexts").SelectionProviderProps, "value" | "defaultValue" | "selection" | "onChange"> & import("../contexts").ListContextType & import("../../../types").ScrollProps & {
     nested?: boolean | undefined;
     active?: boolean | undefined;

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

@@ -1,6 +1,8 @@
 import { ReactNode } from 'react';
 export type ListContextType = {
+    /** Размер списка */
     size?: 's' | 'm' | 'l';
+    /** Отображать ли маркер у выбранного жлемента списка */
     marker?: boolean;
 };
 type Child = {

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

@@ -5,25 +5,33 @@ import { ScrollProps, SearchState } from '../../types';
 import { ItemProps } from '../Items';
 import { ListContextType, SelectionProviderProps } from './contexts';
 export type ListProps = WithSupportProps<{
+    /** Основные элементы списка */
     items: ItemProps[];
+    /** Элементы списка, закрепленные сверху */
     pinTop?: ItemProps[];
+    /** Элементы списка, закрепленные снизу */
     pinBottom?: ItemProps[];
+    /** Кастомизируемый элемент, помещаемый внизу списка */
     footer?: ReactNode;
+    /** Список ссылок на костомные элементы, помещенные в специальную секцию внизу списка  */
+    footerActiveElementsRefs?: RefObject<HTMLElement>[];
+    /** Настройки поисковой строки */
     search?: SearchState;
+    /** Флаг, отвещающий за состояние загрузки списка */
     loading?: boolean;
+    /** Текст для состояния "Отсутсвие данных" */
     noData?: string;
+    /** Текст для состояния "Отсутсвие результата" при поиске */
     noResults?: string;
-    footerActiveElementsRefs?: RefObject<HTMLElement>[];
+    tabIndex?: number;
+    onKeyDown?(e: KeyboardEvent<HTMLElement>): void;
 } & Pick<SelectionProviderProps, 'value' | 'defaultValue' | 'onChange' | 'selection'> & ListContextType & ScrollProps>;
 export type DroplistProps = {
+    /** Ссылка на элемент-триггер для дроплиста */
     triggerElemRef?: RefObject<HTMLElement>;
+    /** Триггер для дроплиста */
     children?: ReactNode;
-    open?: boolean;
-    onOpenChange?(open: boolean): void;
-    trigger?: DropdownProps['trigger'];
-    placement?: DropdownProps['placement'];
-    widthStrategy?: DropdownProps['widthStrategy'];
-} & ListProps;
+} & Pick<DropdownProps, 'trigger' | 'placement' | 'widthStrategy' | 'open' | 'onOpenChange'> & Omit<ListProps, 'tabIndex' | 'onKeyDown'>;
 export type ListPrivateProps = ListProps & {
     nested?: boolean;
     active?: boolean;

package/dist/helperComponents/HiddenTabButton/HiddenTabButton.d.ts

@@ -1,6 +1,7 @@
 import { RefObject } from 'react';
 type HiddenTabButtonProps = {
     listRef: RefObject<HTMLElement>;
+    tabIndex?: number;
 };
 export declare const HiddenTabButton: import("react").ForwardRefExoticComponent<HiddenTabButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 export {};

package/dist/helperComponents/HiddenTabButton/HiddenTabButton.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useCallback } from 'react';
 import styles from './styles.module.css';
-export const HiddenTabButton = forwardRef(({ listRef }, ref) => {
+export const HiddenTabButton = forwardRef(({ listRef, tabIndex }, ref) => {
     const handleFocus = useCallback((e) => {
         var _a;
         if (e.relatedTarget !== listRef.current) {
@@ -13,5 +13,5 @@ export const HiddenTabButton = forwardRef(({ listRef }, ref) => {
     const handleKeyDown = useCallback((e) => {
         e.stopPropagation();
     }, []);
-    return _jsx("button", { "aria-hidden": true, ref: ref, onKeyDown: handleKeyDown, onFocus: handleFocus, className: styles.hiddenBtn });
+    return (_jsx("button", { "aria-hidden": true, ref: ref, onKeyDown: handleKeyDown, onFocus: handleFocus, className: styles.hiddenBtn, tabIndex: tabIndex }));
 });

package/dist/types.d.ts

@@ -6,7 +6,10 @@ export type SearchState = {
     loading?: boolean;
 };
 export type ScrollProps = {
+    /** Включить ли скролл для основной части списка */
     scroll?: boolean;
+    /** Ссылка на элемент, обозначающий самый конец прокручиваемого списка */
     scrollRef?: RefObject<HTMLElement>;
+    /** Ссылка на контейнер, который скроллится */
     scrollContainerRef?: RefObject<HTMLElement>;
 };

package/dist/utils.js

@@ -6,7 +6,8 @@ export function withCollapsedItems({ items, openCollapsedItems }) {
     let expandedIds = [];
     items.forEach(item => {
         var _a;
-        if ((isBaseItemProps(item) || isNextListItemProps(item) || isAccordionItemProps(item)) && !item.disabled) {
+        if (((isBaseItemProps(item) && !item.inactive) || isNextListItemProps(item) || isAccordionItemProps(item)) &&
+            !item.disabled) {
             newItems = newItems.concat([item]);
             ids = ids.concat([(_a = item.id) !== null && _a !== void 0 ? _a : '']);
             if (item.itemRef) {
@@ -55,7 +56,10 @@ export function extractItemIds(items) {
 }
 export function extractChildIds({ items }) {
     return items
-        .filter(item => isAccordionItemProps(item) || isNextListItemProps(item) || isGroupItemProps(item) || !item.disabled)
+        .filter(item => isAccordionItemProps(item) ||
+        isNextListItemProps(item) ||
+        isGroupItemProps(item) ||
+        (isBaseItemProps(item) && !item.disabled && !item.inactive))
         .reduce((prev, item) => {
         var _a;
         if (isAccordionItemProps(item) || isNextListItemProps(item)) {

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "List",
-  "version": "0.1.1",
+  "version": "0.1.3-preview-3a43a07a.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -42,7 +42,8 @@
     "@snack-uikit/truncate-string": "0.4.5",
     "@snack-uikit/utils": "3.2.0",
     "classnames": "2.5.1",
+    "merge-refs": "1.2.2",
     "uncontrollable": "8.0.4"
   },
-  "gitHead": "54873fdb2f34f26a771f62568d3d6fcd62ea1694"
+  "gitHead": "cd354254d1d434829a3d3235ac4b46723a853636"
 }

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

@@ -5,15 +5,14 @@ import { Checkbox, Switch } from '@snack-uikit/toggles';
 import { TruncateString } from '@snack-uikit/truncate-string';
 import { extractSupportProps } from '@snack-uikit/utils';
 
-import { useCollapseContext, useListContext, useSelectionContext } from '../../Lists/contexts';
+import { useCollapseContext, useListContext, useParentListContext, useSelectionContext } from '../../Lists/contexts';
 import commonStyles from '../styles.module.scss';
-import { BaseItemPrivateProps, BaseItemProps, SwitchProps } from '../types';
+import { BaseItemPrivateProps, BaseItemProps } from '../types';
 import { CHECKBOX_SIZE_MAP } from './constants';
 import styles from './styles.module.scss';
 
 type AllBaseItemProps = BaseItemProps &
-  BaseItemPrivateProps &
-  SwitchProps & { indeterminate?: boolean; onSelect?(): void; isParentNode?: boolean };
+  BaseItemPrivateProps & { indeterminate?: boolean; onSelect?(): void; isParentNode?: boolean };
 
 export function BaseItem({
   beforeContent,
@@ -31,10 +30,13 @@ export function BaseItem({
   indeterminate,
   onSelect,
   isParentNode,
+  className,
+  inactive,
   ...rest
 }: AllBaseItemProps) {
   const { option, caption, description } = content || {};
 
+  const { parentResetActiveFocusIndex } = useParentListContext();
   const { size, marker } = useListContext();
   const { level = 0 } = useCollapseContext();
   const { value, onChange, selection, isSelectionSingle, isSelectionMultiple } = useSelectionContext();
@@ -46,8 +48,12 @@ export function BaseItem({
   };
 
   const handleItemClick = (e: MouseEvent<HTMLButtonElement>) => {
-    if (!isParentNode) {
-      handleChange();
+    if (!inactive) {
+      parentResetActiveFocusIndex?.();
+
+      if (!isParentNode) {
+        handleChange();
+      }
     }
 
     onClick?.(e);
@@ -93,10 +99,12 @@ export function BaseItem({
     <li role={'menuitem'} data-test-id={props['data-test-id'] || 'list__base-item_' + id}>
       <button
         ref={itemRef}
-        className={cn(commonStyles.listItem, styles.droplistItem)}
+        className={cn(commonStyles.listItem, styles.droplistItem, className)}
         data-size={size}
         onClick={handleItemClick}
         tabIndex={-1}
+        data-non-pointer={inactive && !onClick}
+        data-inactive={inactive || undefined}
         data-checked={(isParentNode && (indeterminate || isChecked)) || (isChecked && !switchProp) || undefined}
         data-variant={selection || undefined}
         data-open={open || undefined}
@@ -105,10 +113,10 @@ export function BaseItem({
         onFocus={handleItemFocus}
         style={{ '--level': level }}
       >
-        {!switchProp && isSelectionSingle && marker && !isParentNode && (
+        {!switchProp && isSelectionSingle && marker && !isParentNode && !inactive && (
           <div className={styles.markerContainer} data-test-id='list__base-item-marker' />
         )}
-        {!switchProp && isSelectionMultiple && (
+        {!switchProp && isSelectionMultiple && !inactive && (
           <div className={styles.checkbox}>
             <Checkbox
               size={CHECKBOX_SIZE_MAP[size ?? 's']}
@@ -142,7 +150,9 @@ export function BaseItem({
 
         {afterContent}
 
-        {switchProp && <Switch disabled={disabled} checked={isChecked} data-test-id='list__base-item-switch' />}
+        {switchProp && !inactive && (
+          <Switch disabled={disabled} checked={isChecked} data-test-id='list__base-item-switch' />
+        )}
         {!switchProp && expandIcon && <span className={styles.expandableIcon}>{expandIcon}</span>}
       </button>
     </li>

package/src/components/Items/BaseItem/styles.module.scss

@@ -134,6 +134,10 @@ $typography: (
     }
   }
 
+  &[data-non-pointer] {
+    cursor: inherit;
+  }
+
   &:disabled {
     .option,
     .description,

package/src/components/Items/styles.module.scss

@@ -46,21 +46,6 @@ $sizes: 's', 'm', 'l';
     background-color: transparent;
   }
 
-  &[data-open],
-  &[data-focused],
-  &:hover,
-  &:focus-visible {
-    &::after {
-      opacity: $opacity-a008;
-      background-color: $sys-neutral-accent-default;
-    }
-  }
-
-  &[data-focused],
-  &:focus-visible {
-    @include outline-inside-var($container-focused-s);
-  }
-
   &:disabled {
     cursor: not-allowed;
     background-color: transparent;
@@ -75,4 +60,21 @@ $sizes: 's', 'm', 'l';
       background-color: transparent;
     }
   }
+
+  &:not([data-inactive]) {
+    &[data-open],
+    &[data-focused],
+    &:hover,
+    &:focus-visible {
+      &::after {
+        opacity: $opacity-a008;
+        background-color: $sys-neutral-accent-default;
+      }
+    }
+
+    &[data-focused],
+    &:focus-visible {
+      @include outline-inside-var($container-focused-s);
+    }
+  }
 }

package/src/components/Items/types.ts

@@ -32,30 +32,32 @@ export type BaseItemProps = WithSupportProps<{
   disabled?: boolean;
 
   itemRef?: RefObject<HTMLButtonElement>;
-}>;
+  className?: string;
 
-export type SwitchProps = {
+  inactive?: boolean;
   switch?: boolean;
-};
+}>;
+
+type BaseItemsWithoutNonGroupProps = Omit<BaseItemProps, 'switch' | 'inactive'>;
 
 // eslint-disable-next-line no-use-before-define
-export type ItemProps = (BaseItemProps & SwitchProps) | AccordionItemProps | NextListItemProps | GroupItemProps;
+export type ItemProps = BaseItemProps | AccordionItemProps | NextListItemProps | GroupItemProps;
 
-export type AccordionItemProps = BaseItemProps & {
+export type AccordionItemProps = BaseItemsWithoutNonGroupProps & {
   items: ItemProps[];
   // TODO: add later
   // mode?: 'single' | 'multiple';
   type: 'collapse';
 };
 
-export type NextListItemProps = BaseItemProps & {
+export type NextListItemProps = BaseItemsWithoutNonGroupProps & {
   items: ItemProps[];
   type: 'next-list';
   placement?: 'right-start' | 'left-start' | 'left' | 'right' | 'left-end' | 'right-end';
   search?: SearchState;
 } & ScrollProps;
 
-export type GroupItemProps = SeparatorProps & {
+export type GroupItemProps = Omit<SeparatorProps, 'size'> & {
   items: ItemProps[];
   id?: string | number;
 };

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

@@ -1,4 +1,5 @@
-import { forwardRef, useMemo, useRef, useState } from 'react';
+import mergeRefs from 'merge-refs';
+import { FocusEvent, forwardRef, KeyboardEvent, useMemo, useRef, useState } from 'react';
 
 import { HiddenTabButton } from '../../../helperComponents';
 import { extractItemIds, extractItemRefs, withCollapsedItems } from '../../../utils';
@@ -10,7 +11,10 @@ import styles from '../styles.module.scss';
 import { ListProps } from '../types';
 
 export const List = forwardRef<HTMLElement, ListProps>(
-  ({ items: itemsProp, search, pinBottom, pinTop, footerActiveElementsRefs, ...props }) => {
+  (
+    { items: itemsProp, search, pinBottom, pinTop, footerActiveElementsRefs, onKeyDown, tabIndex = 0, ...props },
+    ref,
+  ) => {
     const hasSearch = useMemo(() => Boolean(search), [search]);
 
     const memorizedItems = useMemo(
@@ -68,6 +72,20 @@ export const List = forwardRef<HTMLElement, ListProps>(
 
     const isActive = listRef.current === document.activeElement && activeFocusIndex === -1 && openNestedIndex === -1;
 
+    const mergedHandlerKeyDown = (e: KeyboardEvent<HTMLUListElement>) => {
+      onKeyDown?.(e);
+      handleListKeyDown?.(e);
+    };
+
+    const handleOnFocus = (e: FocusEvent<HTMLElement>) => {
+      if (
+        e.relatedTarget === null ||
+        (e.relatedTarget && itemRefs.every(({ current }) => current !== e.relatedTarget))
+      ) {
+        resetActiveFocusIndex();
+      }
+    };
+
     return (
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
@@ -96,22 +114,15 @@ export const List = forwardRef<HTMLElement, ListProps>(
             <ListPrivate
               {...props}
               {...slicedItems}
-              ref={listRef}
-              onFocus={e => {
-                if (
-                  e.relatedTarget === null ||
-                  (e.relatedTarget && itemRefs.every(({ current }) => current !== e.relatedTarget))
-                ) {
-                  resetActiveFocusIndex();
-                }
-              }}
-              onKeyDown={handleListKeyDown}
-              tabIndex={0}
+              ref={mergeRefs(ref, listRef)}
+              onFocus={handleOnFocus}
+              onKeyDown={mergedHandlerKeyDown}
+              tabIndex={tabIndex}
               search={search}
               nested={false}
             />
 
-            <HiddenTabButton ref={btnRef} listRef={listRef} />
+            <HiddenTabButton ref={btnRef} listRef={listRef} tabIndex={tabIndex} />
           </div>
         </ParentListContext.Provider>
       </SelectionProvider>

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

@@ -1,9 +1,11 @@
 import { createContext, ReactNode, useContext } from 'react';
 
 export type ListContextType = {
+  /** Размер списка */
   size?: 's' | 'm' | 'l';
   // TODO
   // collapse?: 'single' | 'multiple';
+  /** Отображать ли маркер у выбранного жлемента списка */
   marker?: boolean;
 };
 

package/src/components/Lists/types.ts

@@ -9,31 +9,40 @@ import { ListContextType, SelectionProviderProps } from './contexts';
 
 export type ListProps = WithSupportProps<
   {
+    /** Основные элементы списка */
     items: ItemProps[];
+    /** Элементы списка, закрепленные сверху */
     pinTop?: ItemProps[];
+    /** Элементы списка, закрепленные снизу */
     pinBottom?: ItemProps[];
+    /** Кастомизируемый элемент, помещаемый внизу списка */
     footer?: ReactNode;
+    /** Список ссылок на костомные элементы, помещенные в специальную секцию внизу списка  */
+    footerActiveElementsRefs?: RefObject<HTMLElement>[];
     // TODO: add later
     // collapse?: 'single' | 'multiple';
+    /** Настройки поисковой строки */
     search?: SearchState;
+    /** Флаг, отвещающий за состояние загрузки списка */
     loading?: boolean;
+    /** Текст для состояния "Отсутсвие данных" */
     noData?: string;
+    /** Текст для состояния "Отсутсвие результата" при поиске */
     noResults?: string;
-    footerActiveElementsRefs?: RefObject<HTMLElement>[];
+    tabIndex?: number;
+    onKeyDown?(e: KeyboardEvent<HTMLElement>): void;
   } & Pick<SelectionProviderProps, 'value' | 'defaultValue' | 'onChange' | 'selection'> &
     ListContextType &
     ScrollProps
 >;
 
 export type DroplistProps = {
+  /** Ссылка на элемент-триггер для дроплиста */
   triggerElemRef?: RefObject<HTMLElement>;
+  /** Триггер для дроплиста */
   children?: ReactNode;
-  open?: boolean;
-  onOpenChange?(open: boolean): void;
-  trigger?: DropdownProps['trigger'];
-  placement?: DropdownProps['placement'];
-  widthStrategy?: DropdownProps['widthStrategy'];
-} & ListProps;
+} & Pick<DropdownProps, 'trigger' | 'placement' | 'widthStrategy' | 'open' | 'onOpenChange'> &
+  Omit<ListProps, 'tabIndex' | 'onKeyDown'>;
 
 export type ListPrivateProps = ListProps & {
   nested?: boolean;

package/src/helperComponents/HiddenTabButton/HiddenTabButton.tsx

@@ -4,9 +4,10 @@ import styles from './styles.module.scss';
 
 type HiddenTabButtonProps = {
   listRef: RefObject<HTMLElement>;
+  tabIndex?: number;
 };
 
-export const HiddenTabButton = forwardRef<HTMLButtonElement, HiddenTabButtonProps>(({ listRef }, ref) => {
+export const HiddenTabButton = forwardRef<HTMLButtonElement, HiddenTabButtonProps>(({ listRef, tabIndex }, ref) => {
   const handleFocus = useCallback(
     (e: FocusEvent<HTMLButtonElement>) => {
       if (e.relatedTarget !== listRef.current) {
@@ -23,5 +24,14 @@ export const HiddenTabButton = forwardRef<HTMLButtonElement, HiddenTabButtonProp
     e.stopPropagation();
   }, []);
 
-  return <button aria-hidden ref={ref} onKeyDown={handleKeyDown} onFocus={handleFocus} className={styles.hiddenBtn} />;
+  return (
+    <button
+      aria-hidden
+      ref={ref}
+      onKeyDown={handleKeyDown}
+      onFocus={handleFocus}
+      className={styles.hiddenBtn}
+      tabIndex={tabIndex}
+    />
+  );
 });

package/src/types.ts

@@ -8,7 +8,10 @@ export type SearchState = {
 };
 
 export type ScrollProps = {
+  /** Включить ли скролл для основной части списка */
   scroll?: boolean;
+  /** Ссылка на элемент, обозначающий самый конец прокручиваемого списка */
   scrollRef?: RefObject<HTMLElement>;
+  /** Ссылка на контейнер, который скроллится */
   scrollContainerRef?: RefObject<HTMLElement>;
 };

package/src/utils.ts

@@ -20,7 +20,10 @@ export function withCollapsedItems({ items, openCollapsedItems }: WithCollapsedI
   let expandedIds: Array<string | number> = [];
 
   items.forEach(item => {
-    if ((isBaseItemProps(item) || isNextListItemProps(item) || isAccordionItemProps(item)) && !item.disabled) {
+    if (
+      ((isBaseItemProps(item) && !item.inactive) || isNextListItemProps(item) || isAccordionItemProps(item)) &&
+      !item.disabled
+    ) {
       newItems = newItems.concat([item]);
       ids = ids.concat([item.id ?? '']);
 
@@ -88,7 +91,13 @@ export function extractItemIds(items: ItemProps[]): Array<string | number> {
 
 export function extractChildIds({ items }: { items: ItemProps[] }): Array<string | number> {
   return items
-    .filter(item => isAccordionItemProps(item) || isNextListItemProps(item) || isGroupItemProps(item) || !item.disabled)
+    .filter(
+      item =>
+        isAccordionItemProps(item) ||
+        isNextListItemProps(item) ||
+        isGroupItemProps(item) ||
+        (isBaseItemProps(item) && !item.disabled && !item.inactive),
+    )
     .reduce(
       (prev: Array<string | number>, item: ItemProps) => {
         if (isAccordionItemProps(item) || isNextListItemProps(item)) {