@snack-uikit/list 0.3.5 → 0.4.1-preview-2484f987.0

package/CHANGELOG.md

@@ -3,6 +3,29 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.4.0 (2024-02-23)
+
+
+### Bug Fixes
+
+* **FF-4221:** fix keygen for items ([1d542c0](https://github.com/cloud-ru-tech/snack-uikit/commit/1d542c055c3a8a89b875bdb1e3cb4c1fcacd0a5a))
+* **FF-4221:** fix selection/clean with disabled items; remove useless toggle-group ([d630d3c](https://github.com/cloud-ru-tech/snack-uikit/commit/d630d3c01c818c74eb30d6ec92c577476e847cb2))
+* **FF-4221:** fix some select bugs; add some type exports ([e5435f1](https://github.com/cloud-ru-tech/snack-uikit/commit/e5435f18fb766456ae74452d529e797e9df36f20))
+
+
+### Features
+
+* **FF-4221:** add ListEmptyState with translations ([83b3758](https://github.com/cloud-ru-tech/snack-uikit/commit/83b375876ff9a9b0ac294a67199a8b4d4ccbe799))
+
+
+### BREAKING CHANGES
+
+
+* **FF-4221:** remove noData/noResults props; instead added: noDataState,noResultsState,errorDataState, dataError, dataFiltered; replace local "info-block" ([5b18ea2](https://github.com/cloud-ru-tech/snack-uikit/commit/5b18ea209ca33b7773f356e52c3ab3d95da1cfe1))
+
+
+
+
 ## 0.3.5 (2024-02-22)
 
 ### Only dependencies have been changed

package/README.md

@@ -8,6 +8,18 @@
 
 [//]: DOCUMENTATION_SECTION_START
 [//]: THIS_SECTION_IS_AUTOGENERATED_PLEASE_DONT_EDIT_IT
+## extractChildIds
+### Props
+| name | type | default value | description |
+|------|------|---------------|-------------|
+| items* | `ItemProps[]` | - |  |
+## useGroupItemSelection
+### Props
+| name | type | default value | description |
+|------|------|---------------|-------------|
+| items* | `ItemProps[]` | - |  |
+| id | `string \| number` | - |  |
+| disabled | `boolean` | - |  |
 ## isSelectionSingleProps
 ### Props
 | name | type | default value | description |
@@ -21,29 +33,32 @@
 | name | type | default value | description |
 |------|------|---------------|-------------|
 | items* | `ItemProps[]` | - | Основные элементы списка |
+| children* | `ReactNode \| ({onKeyDown}) => ReactNode * Рендер функция принимает аргументы `onKeyDown` - хендлер ввода, для поддержки управления с клавиатуры` | - | Триггер для дроплиста |
 | 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). |
 | className | `string` | - | CSS-класс |
+| size | "s" \| "m" \| "l" | - | Размер списка |
 | pinTop | `ItemProps[]` | - | Элементы списка, закрепленные сверху |
 | pinBottom | `ItemProps[]` | - | Элементы списка, закрепленные снизу |
-| footer | `ReactElement` | - | Кастомизируемый элемент в конце списка |
+| footer | `ReactNode ;` | - | Кастомизируемый элемент в конце списка |
 | footerActiveElementsRefs | `RefObject<HTMLElement>[]` | - | Список ссылок на кастомные элементы, помещенные в специальную секцию внизу списка |
 | search | `SearchState` | - | Настройки поисковой строки |
-| loading | `boolean` | - | Флаг, отвещающий за состояние загрузки списка |
-| noData | `string` | - | Текст для состояния "Отсутсвие данных" |
-| noResults | `string` | - | Текст для состояния "Отсутсвие результата" при поиске |
 | collapse | `CollapseState` | {} | Настройки раскрытия элементов |
+| loading | `boolean` | - | Флаг, отвещающий за состояние загрузки списка |
 | selection | `SelectionSingleState \| SelectionMultipleState` | - |  |
-| size | "s" \| "m" \| "l" | - | Размер списка |
 | marker | `boolean` | - | Отображать ли маркер у выбранного жлемента списка |
 | scroll | `boolean` | - | Включить ли скролл для основной части списка |
 | scrollRef | `RefObject<HTMLElement>` | - | Ссылка на элемент, обозначающий самый конец прокручиваемого списка |
 | scrollContainerRef | `RefObject<HTMLElement>` | - | Ссылка на контейнер, который скроллится |
+| dataFiltered | `boolean` | - |  |
+| dataError | `boolean` | - |  |
+| noDataState | `EmptyStateProps` | - | Экран при отстутствии данных |
+| noResultsState | `EmptyStateProps` | - | Экран при отстутствии результатов поиска или фильтров |
+| errorDataState | `EmptyStateProps` | - | Экран при ошибке запроса |
 ## List
 ### Props
 | name | type | default value | description |
@@ -51,22 +66,25 @@
 | items* | `ItemProps[]` | - | Основные элементы списка |
 | pinTop | `ItemProps[]` | - | Элементы списка, закрепленные сверху |
 | pinBottom | `ItemProps[]` | - | Элементы списка, закрепленные снизу |
-| footer | `ReactElement` | - | Кастомизируемый элемент в конце списка |
+| footer | `ReactNode ;` | - | Кастомизируемый элемент в конце списка |
 | footerActiveElementsRefs | `RefObject<HTMLElement>[]` | - | Список ссылок на кастомные элементы, помещенные в специальную секцию внизу списка |
 | search | `SearchState` | - | Настройки поисковой строки |
-| loading | `boolean` | - | Флаг, отвещающий за состояние загрузки списка |
-| noData | `string` | - | Текст для состояния "Отсутсвие данных" |
-| noResults | `string` | - | Текст для состояния "Отсутсвие результата" при поиске |
 | tabIndex | `number` | - | Tab Index |
 | collapse | `CollapseState` | {} | Настройки раскрытия элементов |
 | className | `string` | - | CSS-класс |
 | onKeyDown | `(e: KeyboardEvent<HTMLElement>) => void` | - |  |
+| loading | `boolean` | - | Флаг, отвещающий за состояние загрузки списка |
 | selection | `SelectionSingleState \| SelectionMultipleState` | - |  |
 | size | "s" \| "m" \| "l" | - | Размер списка |
 | marker | `boolean` | - | Отображать ли маркер у выбранного жлемента списка |
 | scroll | `boolean` | - | Включить ли скролл для основной части списка |
 | scrollRef | `RefObject<HTMLElement>` | - | Ссылка на элемент, обозначающий самый конец прокручиваемого списка |
 | scrollContainerRef | `RefObject<HTMLElement>` | - | Ссылка на контейнер, который скроллится |
+| dataFiltered | `boolean` | - |  |
+| dataError | `boolean` | - |  |
+| noDataState | `EmptyStateProps` | - | Экран при отстутствии данных |
+| noResultsState | `EmptyStateProps` | - | Экран при отстутствии результатов поиска или фильтров |
+| errorDataState | `EmptyStateProps` | - | Экран при ошибке запроса |
 | 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/AccordionItem/AccordionItem.js

@@ -11,7 +11,6 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ChevronDownSVG, ChevronUpSVG } from '@snack-uikit/icons';
-import { useToggleGroup } from '@snack-uikit/toggles';
 import { CollapseBlockPrivate } from '../../../helperComponents';
 import { CollapseContext, useCollapseContext, useParentListContext } from '../../Lists/contexts';
 import { BaseItem } from '../BaseItem';
@@ -19,12 +18,11 @@ import { useGroupItemSelection, useRenderItems } from '../hooks';
 export function AccordionItem(_a) {
     var { items: itemsProp, id, disabled } = _a, option = __rest(_a, ["items", "id", "disabled"]);
     const { level = 1 } = useCollapseContext();
-    const { toggleOpenCollapsedItems } = useParentListContext();
+    const { toggleOpenCollapsedItems, openCollapsedItems } = useParentListContext();
     const { isIndeterminate, checked, handleOnSelect } = useGroupItemSelection({ items: itemsProp, id, disabled });
-    const { isChecked: open, handleClick: handleChange } = useToggleGroup({ value: String(id) });
+    const isOpen = Boolean(openCollapsedItems === null || openCollapsedItems === void 0 ? void 0 : openCollapsedItems.includes(id !== null && id !== void 0 ? id : ''));
     const handleKeyDown = (e) => {
         if (e.key === 'ArrowRight') {
-            handleChange();
             toggleOpenCollapsedItems === null || toggleOpenCollapsedItems === void 0 ? void 0 : toggleOpenCollapsedItems(id !== null && id !== void 0 ? id : '');
             e.preventDefault();
             e.stopPropagation();
@@ -33,9 +31,8 @@ export function AccordionItem(_a) {
     const itemsJSX = useRenderItems(itemsProp);
     const handleItemClick = (e) => {
         var _a;
-        handleChange();
         toggleOpenCollapsedItems === null || toggleOpenCollapsedItems === void 0 ? void 0 : toggleOpenCollapsedItems(id !== null && id !== void 0 ? id : '');
         (_a = option.onClick) === null || _a === void 0 ? void 0 : _a.call(option, e);
     };
-    return (_jsx(CollapseBlockPrivate, { header: _jsx(BaseItem, Object.assign({}, option, { id: id, disabled: disabled, expandIcon: open ? _jsx(ChevronUpSVG, {}) : _jsx(ChevronDownSVG, {}), onClick: handleItemClick, isParentNode: true, onKeyDown: handleKeyDown, indeterminate: isIndeterminate && !checked, onSelect: !disabled ? handleOnSelect : undefined })), expanded: open, "data-test-id": `list__accordion-item-${id}`, children: _jsx(CollapseContext.Provider, { value: { level: level + 1 }, children: itemsJSX }) }));
+    return (_jsx(CollapseBlockPrivate, { header: _jsx(BaseItem, Object.assign({}, option, { id: id, disabled: disabled, expandIcon: isOpen ? _jsx(ChevronUpSVG, {}) : _jsx(ChevronDownSVG, {}), onClick: handleItemClick, isParentNode: true, onKeyDown: handleKeyDown, indeterminate: isIndeterminate && !checked, onSelect: !disabled ? handleOnSelect : undefined })), expanded: isOpen, "data-test-id": `list__accordion-item-${id}`, children: _jsx(CollapseContext.Provider, { value: { level: level + 1 }, children: itemsJSX }) }));
 }

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

@@ -70,7 +70,7 @@ export function BaseItem(_a) {
         e.stopPropagation();
     };
     const props = extractSupportProps(rest);
-    const item = (_jsxs("li", { role: 'menuitem', "data-test-id": props['data-test-id'] || 'list__base-item_' + id, 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": mode || undefined, "data-open": open || undefined, "aria-disabled": disabled || undefined, "data-parent": parent || 'list', onKeyDown: handleItemKeyDown, onFocus: handleItemFocus, style: { '--level': level }, children: [!switchProp && isSelectionSingle && marker && !isParentNode && interactive && (_jsx("div", { className: styles.markerContainer, "data-test-id": 'list__base-item-marker' })), !switchProp && isSelectionMultiple && interactive && (_jsx("div", { className: styles.checkbox, children: _jsx(Checkbox, { size: CHECKBOX_SIZE_MAP[size !== null && size !== void 0 ? size : 's'], disabled: disabled, tabIndex: -1, onChange: 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 && interactive && (_jsx(Switch, { disabled: disabled, checked: isChecked, "data-test-id": 'list__base-item-switch' })), !switchProp && expandIcon && _jsx("span", { className: styles.expandableIcon, children: expandIcon })] }));
+    const item = (_jsxs("li", { role: 'menuitem', "data-test-id": props['data-test-id'] || 'list__base-item_' + id, 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": mode || undefined, "data-open": open || undefined, "data-disabled": disabled || undefined, "aria-disabled": disabled || undefined, "data-parent": parent || 'list', onKeyDown: handleItemKeyDown, onFocus: handleItemFocus, style: { '--level': level }, children: [!switchProp && isSelectionSingle && marker && !isParentNode && interactive && (_jsx("div", { className: styles.markerContainer, "data-test-id": 'list__base-item-marker' })), !switchProp && isSelectionMultiple && interactive && (_jsx("div", { className: styles.checkbox, children: _jsx(Checkbox, { size: CHECKBOX_SIZE_MAP[size !== null && size !== void 0 ? size : 's'], disabled: disabled, tabIndex: -1, onChange: 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 && interactive && (_jsx(Switch, { disabled: disabled, checked: isChecked, "data-test-id": 'list__base-item-switch' })), !switchProp && expandIcon && _jsx("span", { className: styles.expandableIcon, children: expandIcon })] }));
     if (!itemWrapRender) {
         return item;
     }

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

@@ -184,13 +184,13 @@
 .droplistItem[aria-disabled] .option,
 .droplistItem[aria-disabled] .description,
 .droplistItem[aria-disabled] .caption,
-.droplistItem[aria-disabled] .expandableIcon, .droplistItem:disabled .option,
-.droplistItem:disabled .description,
-.droplistItem:disabled .caption,
-.droplistItem:disabled .expandableIcon{
+.droplistItem[aria-disabled] .expandableIcon, .droplistItem[data-disabled] .option,
+.droplistItem[data-disabled] .description,
+.droplistItem[data-disabled] .caption,
+.droplistItem[data-disabled] .expandableIcon{
   color:var(--sys-neutral-text-disabled, #b3b6bf);
 }
-.droplistItem[aria-disabled] .beforeContent, .droplistItem:disabled .beforeContent{
+.droplistItem[aria-disabled] .beforeContent, .droplistItem[data-disabled] .beforeContent{
   opacity:var(--opacity-a064, 0.64);
 }
 .droplistItem[data-has-checked][data-variant=single]::after, .droplistItem[data-checked][data-variant=single]::after{
@@ -205,15 +205,11 @@
   background-color:var(--sys-primary-accent-default, #794ed3);
 }
 .droplistItem[data-has-checked]:focus-visible[data-variant=single], .droplistItem[data-checked]:focus-visible[data-variant=single]{
-  background-color:var(--sys-primary-background, #f6effe);
   outline-color:var(--sys-primary-accent-default, #794ed3);
 }
-.droplistItem[data-has-checked]:disabled[data-variant=single], .droplistItem[data-checked]:disabled[data-variant=single]{
-  background-color:var(--sys-neutral-background1-level, #fafafc);
-}
-.droplistItem[data-has-checked]:disabled[data-variant=single]::before, .droplistItem[data-checked]:disabled[data-variant=single]::before{
+.droplistItem[data-has-checked][data-disabled][data-variant=single]::before, .droplistItem[data-checked][data-disabled][data-variant=single]::before{
   display:none;
 }
-.droplistItem[data-has-checked]:disabled .markerContainer:before, .droplistItem[data-checked]:disabled .markerContainer:before{
+.droplistItem[data-has-checked][data-disabled] .markerContainer:before, .droplistItem[data-checked][data-disabled] .markerContainer:before{
   background-color:var(--sys-neutral-text-disabled, #b3b6bf);
 }

package/dist/components/Items/hooks.js

@@ -1,6 +1,6 @@
 import { createElement as _createElement } from "react";
 import { createRef, useEffect, useMemo } from 'react';
-import { extractChildIds } from '../../utils';
+import { extractAllChildIds, extractChildIds } from '../../utils';
 import { useSelectionContext } from '../Lists/contexts';
 import { AccordionItem } from './AccordionItem';
 import { BaseItem } from './BaseItem';
@@ -8,17 +8,17 @@ import { GroupItem } from './GroupItem';
 import { NextListItem } from './NextListItem';
 import { addItemsIds, isAccordionItemProps, isGroupItemProps, isNextListItemProps } from './utils';
 export function useRenderItems(items) {
-    return useMemo(() => items.map((item, idx) => {
+    return useMemo(() => items.map(item => {
         if (isGroupItemProps(item)) {
-            return _createElement(GroupItem, Object.assign({}, item, { key: item.id }));
+            return _createElement(GroupItem, Object.assign({}, item, { key: item.label }));
         }
         if (isAccordionItemProps(item)) {
-            return _createElement(AccordionItem, Object.assign({}, item, { key: idx }));
+            return _createElement(AccordionItem, Object.assign({}, item, { key: item.key }));
         }
         if (isNextListItemProps(item)) {
-            return _createElement(NextListItem, Object.assign({}, item, { key: item.id }));
+            return _createElement(NextListItem, Object.assign({}, item, { key: item.key }));
         }
-        return _createElement(BaseItem, Object.assign({}, item, { key: item.id }));
+        return _createElement(BaseItem, Object.assign({}, item, { key: item.key }));
     }), [items]);
 }
 export function useItemsWithIds({ search, footerActiveElementsRefs }) {
@@ -31,11 +31,11 @@ export function useItemsWithIds({ search, footerActiveElementsRefs }) {
 }
 export function useGroupItemSelection({ id, items, disabled }) {
     const { value, setValue, isSelectionMultiple } = useSelectionContext();
-    const childIds = useMemo(() => extractChildIds({ items }), [items]);
+    const { childIds, allChildIds } = useMemo(() => ({ childIds: extractChildIds({ items }), allChildIds: extractAllChildIds({ items }) }), [items]);
     const isIndeterminate = isSelectionMultiple
-        ? childIds.some(childId => value === null || value === void 0 ? void 0 : value.includes(childId))
-        : childIds.includes(value !== null && value !== void 0 ? value : '');
-    const checked = isSelectionMultiple ? childIds.every(childId => value === null || value === void 0 ? void 0 : value.includes(childId)) : undefined;
+        ? allChildIds.some(childId => value === null || value === void 0 ? void 0 : value.includes(childId))
+        : allChildIds.includes(value !== null && value !== void 0 ? value : '');
+    const checked = isSelectionMultiple ? allChildIds.every(childId => value === null || value === void 0 ? void 0 : value.includes(childId)) : undefined;
     useEffect(() => {
         if (isSelectionMultiple) {
             if (checked && !(value === null || value === void 0 ? void 0 : value.includes(id))) {

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

@@ -50,23 +50,23 @@
   height:100%;
   background-color:transparent;
 }
-.listItem:disabled{
+.listItem[data-disabled], .listItem:disabled{
   cursor:not-allowed;
   background-color:transparent;
   outline:none;
 }
-.listItem:disabled::before{
+.listItem[data-disabled]::before, .listItem:disabled::before{
   display:none;
 }
-.listItem:disabled::after{
+.listItem[data-disabled]::after, .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{
+.listItem:not([data-inactive], [data-disabled])[data-open]::after, .listItem:not([data-inactive], [data-disabled])[data-focused]::after, .listItem:not([data-inactive], [data-disabled]):hover::after, .listItem:not([data-inactive], [data-disabled]):focus-visible::after{
   opacity:var(--opacity-a008, 0.08);
   background-color:var(--sys-neutral-accent-default, #6f717c);
 }
-.listItem:not([data-inactive])[data-focused], .listItem:not([data-inactive]):focus-visible{
+.listItem:not([data-inactive], [data-disabled])[data-focused], .listItem:not([data-inactive], [data-disabled]):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, );

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

@@ -48,6 +48,7 @@ export type BaseItemProps = WithSupportProps<{
      * Флаг отображения состояния выбранного элемента через switch
      */
     switch?: boolean;
+    key?: string | number;
     itemWrapRender?(item: ReactNode): ReactNode;
 }>;
 type BaseItemsWithoutNonGroupProps = Omit<BaseItemProps, 'switch' | 'inactive'>;

package/dist/components/Items/utils.js

@@ -30,13 +30,14 @@ export function getSlicedItems({ items, hasSearch, pinTop, pinBottom, footerRefs
 export function addItemsIds(itemsProp, prefix) {
     return itemsProp.map((item, idx) => {
         var _a;
-        const itemId = (_a = item.id) !== null && _a !== void 0 ? _a : (prefix !== undefined ? [prefix, idx].join('-') : String(idx));
+        const autoId = prefix !== undefined ? [prefix, idx].join('-') : String(idx);
+        const itemId = (_a = item.id) !== null && _a !== void 0 ? _a : autoId;
         if (isGroupItemProps(item)) {
-            return Object.assign(Object.assign({}, item), { id: itemId, items: addItemsIds(item.items, itemId) });
+            return Object.assign(Object.assign({ key: autoId }, item), { id: itemId, items: addItemsIds(item.items, itemId) });
         }
         if (isAccordionItemProps(item) || isNextListItemProps(item)) {
-            return Object.assign(Object.assign({}, item), { id: itemId, items: addItemsIds(item.items, itemId), itemRef: item.itemRef || createRef() });
+            return Object.assign(Object.assign({ key: autoId }, item), { id: itemId, items: addItemsIds(item.items, itemId), itemRef: item.itemRef || createRef() });
         }
-        return Object.assign(Object.assign({}, item), { id: itemId, itemRef: item.itemRef || createRef() });
+        return Object.assign(Object.assign({ key: autoId }, item), { id: itemId, itemRef: item.itemRef || createRef() });
     });
 }

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

@@ -23,12 +23,7 @@ export function Droplist(_a) {
     var { items: itemsProp, search, pinBottom, pinTop, footerActiveElementsRefs, children, trigger, placement, widthStrategy, triggerElemRef: triggerElemRefProp, open: openProp, onOpenChange, collapse = {} } = _a, props = __rest(_a, ["items", "search", "pinBottom", "pinTop", "footerActiveElementsRefs", "children", "trigger", "placement", "widthStrategy", "triggerElemRef", "open", "onOpenChange", "collapse"]);
     const hasSearch = useMemo(() => Boolean(search), [search]);
     const memorizedItems = useMemo(() => addItemsIds((pinBottom !== null && pinBottom !== void 0 ? pinBottom : []).concat(itemsProp).concat(pinTop !== null && pinTop !== void 0 ? pinTop : [])), [itemsProp, pinBottom, pinTop]);
-    const [openCollapsedItems, setOpenCollapsedItems] = useUncontrolledProp(collapse.value, (_b = collapse.defaultValue) !== null && _b !== void 0 ? _b : [], collapse.onChange
-        ? cb => {
-            var _a;
-            (_a = collapse.onChange) === null || _a === void 0 ? void 0 : _a.call(collapse, cb(collapse.value));
-        }
-        : undefined);
+    const [openCollapsedItems, setOpenCollapsedItems] = useUncontrolledProp(collapse.value, (_b = collapse.defaultValue) !== null && _b !== void 0 ? _b : [], collapse.onChange);
     const { search: searchItem, footerRefs } = useItemsWithIds({
         search: hasSearch,
         footerActiveElementsRefs,
@@ -52,11 +47,9 @@ export function Droplist(_a) {
     const { activeFocusIndex, setActiveFocusIndex, openNestedIndex, handleListKeyDown, resetNestedIndex, resetActiveFocusIndex, } = useKeyboardNavigation({ ids, expandedIds, parentRef: triggerElemRefProp !== null && triggerElemRefProp !== void 0 ? triggerElemRefProp : triggerElemRef, itemRefs });
     const [open, setOpen] = useUncontrolledProp(openProp, false, onOpenChange);
     const handleOpenChange = (open) => {
-        if (!open) {
-            resetNestedIndex();
-            resetActiveFocusIndex();
-            setOpenCollapsedItems([]);
-        }
+        resetNestedIndex();
+        resetActiveFocusIndex();
+        setOpenCollapsedItems([]);
         setOpen(open);
     };
     const onKeyDown = useCallback((e, cb) => {
@@ -79,6 +72,9 @@ export function Droplist(_a) {
                     onKeyDown(e, (_a = children.props) === null || _a === void 0 ? void 0 : _a.onKeyDown);
                 } }));
         }
+        if (typeof children === 'function') {
+            return children({ onKeyDown });
+        }
         return children;
     }, [onKeyDown, children]);
     return (
@@ -94,6 +90,7 @@ export function Droplist(_a) {
                 parentRef: listRef,
                 parentResetNestedIndex: resetNestedIndex,
                 parentResetActiveFocusIndex: resetActiveFocusIndex,
+                openCollapsedItems,
                 toggleOpenCollapsedItems: id => setOpenCollapsedItems((items = []) => items.includes(id) ? items.filter(item => item !== id) : items === null || items === void 0 ? void 0 : items.concat([id])),
             }, children: _jsx(Dropdown, Object.assign({ content: _jsx(ListPrivate, Object.assign({}, slicedItems, props, { onKeyDown: handleListKeyDown, tabIndex: 0, ref: listRef, search: search, limitedScrollHeight: true, parent: 'droplist' })), trigger: trigger, placement: placement, widthStrategy: widthStrategy }, (triggerElemRefProp
                 ? {}

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

@@ -7,10 +7,7 @@ export declare const List: import("react").ForwardRefExoticComponent<{
     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;
+    search?: import("../../..").SearchState | undefined;
     tabIndex?: number | undefined;
     collapse?: {
         value?: (string | number)[] | undefined;
@@ -19,4 +16,5 @@ export declare const List: import("react").ForwardRefExoticComponent<{
     } | undefined;
     className?: string | undefined;
     onKeyDown?(e: KeyboardEvent<HTMLElement>): void;
-} & import("../contexts").SelectionState & import("../contexts").ListContextType & import("../../../types").ScrollProps & import("react").RefAttributes<HTMLElement>>;
+    loading?: boolean | undefined;
+} & import("../contexts").SelectionState & import("../contexts").ListContextType & import("../../../types").ScrollProps & import("../types").EmptyState & import("react").RefAttributes<HTMLElement>>;

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

@@ -26,12 +26,7 @@ export const List = forwardRef((_a, ref) => {
     var { items: itemsProp, search, pinBottom, pinTop, footerActiveElementsRefs, onKeyDown, tabIndex = 0, className, collapse = {} } = _a, props = __rest(_a, ["items", "search", "pinBottom", "pinTop", "footerActiveElementsRefs", "onKeyDown", "tabIndex", "className", "collapse"]);
     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] = useUncontrolledProp(collapse.value, (_b = collapse.defaultValue) !== null && _b !== void 0 ? _b : [], collapse.onChange
-        ? cb => {
-            var _a;
-            (_a = collapse.onChange) === null || _a === void 0 ? void 0 : _a.call(collapse, cb(collapse.value));
-        }
-        : undefined);
+    const [openCollapsedItems, setOpenCollapsedItems] = useUncontrolledProp(collapse.value, (_b = collapse.defaultValue) !== null && _b !== void 0 ? _b : [], collapse.onChange);
     const { search: searchItem, footerRefs } = useItemsWithIds({
         search: hasSearch,
         footerActiveElementsRefs,

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

@@ -7,10 +7,7 @@ export declare const ListPrivate: import("react").ForwardRefExoticComponent<{
     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;
+    search?: import("../../..").SearchState | undefined;
     tabIndex?: number | undefined;
     collapse?: {
         value?: (string | number)[] | undefined;
@@ -19,7 +16,8 @@ export declare const ListPrivate: import("react").ForwardRefExoticComponent<{
     } | undefined;
     className?: string | undefined;
     onKeyDown?(e: import("react").KeyboardEvent<HTMLElement>): void;
-} & import("../contexts").SelectionState & import("../contexts").ListContextType & import("../../../types").ScrollProps & import("../contexts").ListContextPrivateType & {
+    loading?: boolean | undefined;
+} & import("../contexts").SelectionState & import("../contexts").ListContextType & import("../../../types").ScrollProps & import("../types").EmptyState & import("../contexts").ListContextPrivateType & {
     nested?: boolean | undefined;
     active?: boolean | undefined;
     tabIndex?: number | undefined;

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

@@ -14,26 +14,26 @@ import cn from 'classnames';
 import { forwardRef, useMemo } from 'react';
 import { Spinner } from '@snack-uikit/loaders';
 import { Scroll } from '@snack-uikit/scroll';
-import { ToggleGroup } from '@snack-uikit/toggles';
 import { extractSupportProps } from '@snack-uikit/utils';
+import { ListEmptyState, useEmptyState } from '../../../helperComponents';
 import { PinBottomGroupItem, PinTopGroupItem, SearchItem, useRenderItems } from '../../Items';
 import { ListContextProvider } from '../contexts';
 import commonStyles from '../styles.module.css';
 import styles from './styles.module.css';
 export const ListPrivate = forwardRef((_a, ref) => {
-    var _b, _c;
-    var { items, pinTop, pinBottom, onKeyDown, onBlur, onFocus, tabIndex, active, scroll, nested, search, scrollRef, scrollContainerRef, footer, loading, noData = 'No data', noResults = 'No results', size = 's', marker, limitedScrollHeight, className, parent = 'list' } = _a, props = __rest(_a, ["items", "pinTop", "pinBottom", "onKeyDown", "onBlur", "onFocus", "tabIndex", "active", "scroll", "nested", "search", "scrollRef", "scrollContainerRef", "footer", "loading", "noData", "noResults", "size", "marker", "limitedScrollHeight", "className", "parent"]);
+    var { items, pinTop, pinBottom, onKeyDown, onBlur, onFocus, tabIndex, active, scroll, nested, search, scrollRef, scrollContainerRef, footer, loading, size = 's', marker = true, limitedScrollHeight, className, parent = 'list', noDataState, noResultsState, errorDataState, dataError, dataFiltered } = _a, props = __rest(_a, ["items", "pinTop", "pinBottom", "onKeyDown", "onBlur", "onFocus", "tabIndex", "active", "scroll", "nested", "search", "scrollRef", "scrollContainerRef", "footer", "loading", "size", "marker", "limitedScrollHeight", "className", "parent", "noDataState", "noResultsState", "errorDataState", "dataError", "dataFiltered"]);
     const itemsJSX = useRenderItems(items);
     const itemsPinTopJSX = useRenderItems(pinTop !== null && pinTop !== void 0 ? pinTop : []);
     const itemsPinBottomJSX = useRenderItems(pinBottom !== null && pinBottom !== void 0 ? pinBottom : []);
-    const hasNoItems = items.length + ((_b = pinTop === null || pinTop === void 0 ? void 0 : pinTop.length) !== null && _b !== void 0 ? _b : 0) + ((_c = pinBottom === null || pinBottom === void 0 ? void 0 : pinBottom.length) !== null && _c !== void 0 ? _c : 0) === 0;
+    const emptyStates = useEmptyState({ noDataState, noResultsState, errorDataState });
+    const hasNoItems = items.length === 0;
     const loadingJSX = useMemo(() => loading && (_jsx("div", { role: 'spinbutton', tabIndex: -1, className: styles.loader, "data-size": size, "data-no-items": hasNoItems || undefined, "data-test-id": 'list__loader', children: _jsx(Spinner, { size: size === 'l' ? 's' : 'xs' }) })), [hasNoItems, loading, size]);
-    const content = useMemo(() => (_jsxs("div", { className: styles.content, children: [itemsJSX, loadingJSX, hasNoItems && !(search === null || search === void 0 ? void 0 : search.value) && !loading && (_jsx("div", { className: commonStyles.infoBlock, "data-test-id": 'list__no-data', children: noData })), hasNoItems && (search === null || search === void 0 ? void 0 : search.value) && !loading && (_jsx("div", { className: commonStyles.infoBlock, "data-test-id": 'list__no-results', children: noResults }))] })), [hasNoItems, itemsJSX, loading, loadingJSX, noData, noResults, search === null || search === void 0 ? void 0 : search.value]);
-    const listJSX = (_jsx("ul", Object.assign({ className: cn(commonStyles.listContainer, className), ref: ref, onKeyDown: onKeyDown, tabIndex: tabIndex, onFocus: !nested ? onFocus : undefined, onBlur: onBlur, "data-active": active || undefined, role: 'menu' }, extractSupportProps(props), { children: _jsxs(ToggleGroup, { selectionMode: 'multiple', children: [(Number(pinTop === null || pinTop === void 0 ? void 0 : pinTop.length) > 0 || search) && (_jsxs(PinTopGroupItem, { children: [search && _jsx(SearchItem, { search: search }), Number(pinTop === null || pinTop === void 0 ? void 0 : pinTop.length) > 0 && itemsPinTopJSX] })), scroll ? (_jsxs(Scroll, { className: cn({
-                        [commonStyles.scrollContainerS]: scroll && limitedScrollHeight && size === 's',
-                        [commonStyles.scrollContainerM]: scroll && limitedScrollHeight && size === 'm',
-                        [commonStyles.scrollContainerL]: scroll && limitedScrollHeight && size === 'l',
-                    }), barHideStrategy: 'leave', size: size === 's' ? 's' : 'm', ref: scrollContainerRef, children: [content, _jsx("div", { className: styles.scrollStub, ref: scrollRef })] })) : (_jsx(_Fragment, { children: content })), Number(pinBottom === null || pinBottom === void 0 ? void 0 : pinBottom.length) > 0 && _jsx(PinBottomGroupItem, { children: itemsPinBottomJSX }), footer && _jsx("div", { className: styles.footer, children: footer })] }) })));
+    const content = useMemo(() => (_jsxs("div", { className: styles.content, children: [itemsJSX, loadingJSX, _jsx(ListEmptyState, { loading: loading, dataError: dataError, emptyStates: emptyStates, itemsLength: items.length, dataFiltered: dataFiltered !== null && dataFiltered !== void 0 ? dataFiltered : Boolean(search === null || search === void 0 ? void 0 : search.value) })] })), [dataError, dataFiltered, emptyStates, items.length, itemsJSX, loading, loadingJSX, search === null || search === void 0 ? void 0 : search.value]);
+    const listJSX = (_jsxs("ul", Object.assign({ className: cn(commonStyles.listContainer, className), ref: ref, onKeyDown: onKeyDown, tabIndex: tabIndex, onFocus: !nested ? onFocus : undefined, onBlur: onBlur, "data-active": active || undefined, role: 'menu' }, extractSupportProps(props), { children: [(Number(pinTop === null || pinTop === void 0 ? void 0 : pinTop.length) > 0 || search) && (_jsxs(PinTopGroupItem, { children: [search && _jsx(SearchItem, { search: search }), Number(pinTop === null || pinTop === void 0 ? void 0 : pinTop.length) > 0 && itemsPinTopJSX] })), scroll ? (_jsxs(Scroll, { className: cn({
+                    [commonStyles.scrollContainerS]: scroll && limitedScrollHeight && size === 's',
+                    [commonStyles.scrollContainerM]: scroll && limitedScrollHeight && size === 'm',
+                    [commonStyles.scrollContainerL]: scroll && limitedScrollHeight && size === 'l',
+                }), barHideStrategy: 'never', size: size === 's' ? 's' : 'm', ref: scrollContainerRef, children: [content, _jsx("div", { className: styles.scrollStub, ref: scrollRef })] })) : (_jsx(_Fragment, { children: content })), Number(pinBottom === null || pinBottom === void 0 ? void 0 : pinBottom.length) > 0 && _jsx(PinBottomGroupItem, { children: itemsPinBottomJSX }), footer && _jsx("div", { className: styles.footer, children: footer })] })));
     if (!nested) {
         return (_jsx(ListContextProvider, { size: size, marker: marker, parent: parent, children: listJSX }));
     }

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

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
-type SelectionSingleValueType = string | number | undefined;
-type SelectionSingleState = {
+export type SelectionSingleValueType = string | number | undefined;
+export type SelectionSingleState = {
     /** Начальное состояние */
     defaultValue?: SelectionSingleValueType;
     /** Controlled состояние */
@@ -17,7 +17,7 @@ export type SelectionSingleProps = {
     /** Режим выбора multi */
     isSelectionMultiple: false;
 } & SelectionSingleState;
-type SelectionMultipleState = {
+export type SelectionMultipleState = {
     /** Начальное состояние */
     defaultValue?: SelectionSingleValueType[];
     /** Controlled состояние */

package/dist/components/Lists/contexts/SelectionProvider.js

@@ -45,18 +45,21 @@ function SelectionSingleProvider({ value: valueProp, defaultValue, onChange: onC
         }, children: children }));
 }
 function SelectionMultipleProvider({ value: valueProp, defaultValue, onChange: onChangeProp, children, }) {
-    const [value, setValue] = useUncontrolledProp(valueProp, defaultValue, cb => {
-        onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(cb(value));
-    });
-    const onChange = useCallback((newValue) => setValue((oldValues) => {
-        if (Array.isArray(oldValues)) {
-            if (oldValues.includes(newValue)) {
-                return oldValues.filter(oldValue => oldValue !== newValue);
+    const [value, setValue] = useUncontrolledProp(valueProp, defaultValue, onChangeProp);
+    const onChange = useCallback((newValue) => {
+        setValue((oldValues) => {
+            if (Array.isArray(oldValues)) {
+                if (oldValues.includes(newValue)) {
+                    return oldValues.filter(oldValue => oldValue !== newValue);
+                }
+                return oldValues.concat(newValue);
             }
-            return oldValues.concat(newValue);
-        }
-        return undefined;
-    }), [setValue]);
+            if (oldValues === undefined) {
+                return Array.isArray(newValue) ? newValue : [newValue];
+            }
+            return undefined;
+        });
+    }, [setValue]);
     return (_jsx(SelectionContext.Provider, { value: {
             value,
             onChange,

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

@@ -1,4 +1,4 @@
 export * from './Droplist';
 export * from './List';
 export type { ListProps, DroplistProps } from './types';
-export type { SelectionSingleProps, SelectionMultipleProps, isSelectionSingleProps, isSelectionMultipleProps, } from './contexts';
+export type { SelectionSingleState, SelectionMultipleState, SelectionSingleProps, SelectionMultipleProps, isSelectionSingleProps, isSelectionMultipleProps, SelectionSingleValueType, } from './contexts';

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

@@ -57,18 +57,4 @@
 .scrollContainerL{
   height:auto;
   max-height:calc(var(--dimension-1m, 8px) * 48);
-}
-
-.infoBlock{
-  font-family:var(--sans-body-s-font-family, SB Sans Interface);
-  font-weight:var(--sans-body-s-font-weight, Regular);
-  line-height:var(--sans-body-s-line-height, 16px);
-  font-size:var(--sans-body-s-font-size, 12px);
-  letter-spacing:var(--sans-body-s-letter-spacing, 0.1px);
-  paragraph-spacing:var(--sans-body-s-paragraph-spacing, 6.6px);
-  display:flex;
-  align-items:center;
-  justify-content:center;
-  padding:var(--dimension-1m, 8px);
-  color:var(--sys-neutral-text-support, #656771);
 }