@snack-uikit/list 0.9.2-preview-0f7b85a9.0 → 0.9.2-preview-0a44b2fc.0

package/README.md

@@ -8,20 +8,13 @@
 
 [//]: DOCUMENTATION_SECTION_START
 [//]: THIS_SECTION_IS_AUTOGENERATED_PLEASE_DONT_EDIT_IT
-## useFuzzySearch
-Нечеткий поиск среди айтемов по полям 'content.option', 'content.caption', 'content.description', 'label'
-### Props
-| name | type | default value | description |
-|------|------|---------------|-------------|
-## extractChildIds
+## kindFlattenItems
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
-| items* | `ItemProps[]` | - |  |
-## flattenItems
-`flattenItems` 
-
-Функция разворачивает массив айтемов в плоский список
+| items* | `ItemProps<Meta>[]` | - |  |
+| prefix | `string \| number` | - |  |
+| parentId | `ItemId` | - |  |
 ## isAccordionItemProps
 ### Props
 | name | type | default value | description |
@@ -42,8 +35,9 @@
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
-| items* | `ItemProps[]` | - |  |
-| id | `string \| number` | - |  |
+| id* | `ItemId` | - |  |
+| items* | `ItemId[]` | - |  |
+| allChildIds* | `ItemId[]` | - |  |
 | disabled | `boolean` | - |  |
 ## isSelectionSingleProps
 ### Props
@@ -57,25 +51,27 @@
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
-| items* | `ItemProps[]` | - | Основные элементы списка |
+| items* | `ItemProps<Meta>[]` | - | Основные элементы списка |
 | children* | `ReactNode \| ({onKeyDown}) => ReactNode * Рендер функция принимает аргументы `onKeyDown` - хендлер ввода, для поддержки управления с клавиатуры` | - | Триггер для дроплиста |
 | triggerElemRef | `RefObject<HTMLElement>` | - | Ссылка на элемент-триггер для дроплиста |
+| triggerClassName | `string` | - | CSS-класс триггера |
 | 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[]` | - | Элементы списка, закрепленные снизу |
+| size | "s" \| "m" \| "l" | s | Размер списка |
+| pinTop | `ItemProps<Meta>[]` | - | Элементы списка, закрепленные сверху |
+| pinBottom | `ItemProps<Meta>[]` | - | Элементы списка, закрепленные снизу |
 | footer | `ReactNode ;` | - | Кастомизируемый элемент в конце списка |
 | footerActiveElementsRefs | `RefObject<HTMLElement>[]` | - | Список ссылок на кастомные элементы, помещенные в специальную секцию внизу списка |
 | search | `SearchState` | - | Настройки поисковой строки |
 | collapse | `CollapseState` | {} | Настройки раскрытия элементов |
 | loading | `boolean` | - | Флаг, отвещающий за состояние загрузки списка |
 | selection | `SelectionSingleState \| SelectionMultipleState` | - |  |
-| marker | `boolean` | - | Отображать ли маркер у выбранного жлемента списка |
+| marker | `boolean` | true | Отображать ли маркер у выбранного жлемента списка |
+| contentRender | `(props: ContentRenderProps<Meta>) => ReactNode` | - | Рендер функция основного контента айтема |
 | scroll | `boolean` | - | Включить ли скролл для основной части списка |
 | scrollRef | `RefObject<HTMLElement>` | - | Ссылка на элемент, обозначающий самый конец прокручиваемого списка |
 | scrollContainerRef | `RefObject<HTMLElement>` | - | Ссылка на контейнер, который скроллится |
@@ -88,9 +84,9 @@
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
-| items* | `ItemProps[]` | - | Основные элементы списка |
-| pinTop | `ItemProps[]` | - | Элементы списка, закрепленные сверху |
-| pinBottom | `ItemProps[]` | - | Элементы списка, закрепленные снизу |
+| items* | `ItemProps<unknown>[]` | - | Основные элементы списка |
+| pinTop | `ItemProps<unknown>[]` | - | Элементы списка, закрепленные сверху |
+| pinBottom | `ItemProps<unknown>[]` | - | Элементы списка, закрепленные снизу |
 | footer | `ReactNode ;` | - | Кастомизируемый элемент в конце списка |
 | footerActiveElementsRefs | `RefObject<HTMLElement>[]` | - | Список ссылок на кастомные элементы, помещенные в специальную секцию внизу списка |
 | search | `SearchState` | - | Настройки поисковой строки |
@@ -100,8 +96,9 @@
 | onKeyDown | `(e: KeyboardEvent<HTMLElement>) => void` | - |  |
 | loading | `boolean` | - | Флаг, отвещающий за состояние загрузки списка |
 | selection | `SelectionSingleState \| SelectionMultipleState` | - |  |
-| size | "s" \| "m" \| "l" | - | Размер списка |
-| marker | `boolean` | - | Отображать ли маркер у выбранного жлемента списка |
+| size | "s" \| "m" \| "l" | s | Размер списка |
+| marker | `boolean` | true | Отображать ли маркер у выбранного жлемента списка |
+| contentRender | `(props: ContentRenderProps<unknown>) => ReactNode` | - | Рендер функция основного контента айтема |
 | scroll | `boolean` | - | Включить ли скролл для основной части списка |
 | scrollRef | `RefObject<HTMLElement>` | - | Ссылка на элемент, обозначающий самый конец прокручиваемого списка |
 | scrollContainerRef | `RefObject<HTMLElement>` | - | Ссылка на контейнер, который скроллится |
@@ -112,6 +109,37 @@
 | 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` | - |  |
+## ItemContent
+### Props
+| name | type | default value | description |
+|------|------|---------------|-------------|
+| option* | `string \| number` | - |  |
+| caption | `string` | - |  |
+| description | `string` | - |  |
+| truncate | `{ option?: number; description?: number; variant?: "end" \| "middle"; }` | - |  |
+| disabled | `boolean` | - |  |
+| className | `string` | - | CSS-класс |
+## useFuzzySearch
+Нечеткий поиск среди айтемов по полям 'content.option', 'content.caption', 'content.description', 'label'
+### Props
+| name | type | default value | description |
+|------|------|---------------|-------------|
+## extractChildIds
+### Props
+| name | type | default value | description |
+|------|------|---------------|-------------|
+| items* | `ItemProps[]` | - |  |
+## flattenItems
+`flattenItems` 
+
+Функция разворачивает массив айтемов в плоский список
+## useLegacyGroupItemSelection
+### Props
+| name | type | default value | description |
+|------|------|---------------|-------------|
+| items* | `ItemProps[]` | - |  |
+| id | `string \| number` | - |  |
+| disabled | `boolean` | - |  |
 
 
 [//]: DOCUMENTATION_SECTION_END

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

@@ -1,2 +1,2 @@
-import { AccordionItemProps } from '../types';
-export declare function AccordionItem({ items: itemsProp, id, disabled, ...option }: AccordionItemProps): import("react/jsx-runtime").JSX.Element;
+import { FlattenAccordionItem } from '../types';
+export declare function AccordionItem<Meta>({ items, id, disabled, allChildIds, ...option }: FlattenAccordionItem<Meta>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Items/AccordionItem/AccordionItem.js

@@ -10,29 +10,32 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from 'react';
 import { ChevronDownSVG, ChevronUpSVG } from '@snack-uikit/icons';
 import { CollapseBlockPrivate } from '../../../helperComponents';
-import { CollapseContext, useCollapseContext, useParentListContext } from '../../Lists/contexts';
+import { CollapseLevelContext, useCollapseContext, useCollapseLevelContext, useNewListContext, } from '../../Lists/contexts';
 import { BaseItem } from '../BaseItem';
 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, openCollapsedItems } = useParentListContext();
-    const { isIndeterminate, checked, handleOnSelect } = useGroupItemSelection({ items: itemsProp, id, disabled });
-    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') {
-            toggleOpenCollapsedItems === null || toggleOpenCollapsedItems === void 0 ? void 0 : toggleOpenCollapsedItems(id !== null && id !== void 0 ? id : '');
-            e.preventDefault();
-            e.stopPropagation();
-        }
-    };
-    const itemsJSX = useRenderItems(itemsProp);
+    var { items, id, disabled, allChildIds } = _a, option = __rest(_a, ["items", "id", "disabled", "allChildIds"]);
+    const { level = 1 } = useCollapseLevelContext();
+    const { openCollapseItems = [], toggleOpenCollapseItem } = useCollapseContext();
+    const { flattenedItems } = useNewListContext();
+    const { isIndeterminate, checked, handleOnSelect } = useGroupItemSelection({
+        items,
+        id,
+        disabled,
+        allChildIds,
+    });
+    const isOpen = Boolean(openCollapseItems.includes(id !== null && id !== void 0 ? id : ''));
+    const handleKeyDown = useCallback(() => {
+        toggleOpenCollapseItem === null || toggleOpenCollapseItem === void 0 ? void 0 : toggleOpenCollapseItem(id !== null && id !== void 0 ? id : '');
+    }, [id, toggleOpenCollapseItem]);
+    const itemsJSX = useRenderItems({ items, flattenedItems });
     const handleItemClick = (e) => {
         var _a;
-        toggleOpenCollapsedItems === null || toggleOpenCollapsedItems === void 0 ? void 0 : toggleOpenCollapsedItems(id !== null && id !== void 0 ? id : '');
+        toggleOpenCollapseItem === null || toggleOpenCollapseItem === void 0 ? void 0 : toggleOpenCollapseItem(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: 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 }) }));
+    return (_jsx(CollapseBlockPrivate, { header: _jsx(BaseItem, Object.assign({}, option, { id: id, disabled: disabled, expandIcon: isOpen ? _jsx(ChevronUpSVG, {}) : _jsx(ChevronDownSVG, {}), onClick: handleItemClick, isParentNode: true, onOpenNestedList: handleKeyDown, indeterminate: isIndeterminate && !checked, onSelect: !disabled ? handleOnSelect : undefined })), expanded: isOpen, "data-test-id": `list__accordion-item-${id}`, children: _jsx(CollapseLevelContext.Provider, { value: { level: level + 1 }, children: itemsJSX }) }));
 }

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

@@ -1,9 +1,10 @@
-/// <reference types="react" />
-import { BaseItemPrivateProps, BaseItemProps } from '../types';
-type AllBaseItemProps = BaseItemProps & BaseItemPrivateProps & {
+import { KeyboardEvent } from 'react';
+import { AnyType, BaseItemPrivateProps, BaseItemProps } from '../types';
+type AllBaseItemProps<Meta = AnyType> = BaseItemProps<Meta> & BaseItemPrivateProps & {
     indeterminate?: boolean;
     onSelect?(): void;
     isParentNode?: boolean;
+    onOpenNestedList?(e?: KeyboardEvent<HTMLElement>): void;
 };
-export declare function BaseItem({ beforeContent, afterContent, content, onClick, onMouseDown, id, expandIcon, disabled, open, itemRef, switch: switchProp, onKeyDown, onFocus, indeterminate, onSelect, isParentNode, className, inactive, itemWrapRender, ...rest }: AllBaseItemProps): string | number | boolean | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export declare function BaseItem({ beforeContent, afterContent, content, onClick, onMouseDown, id, expandIcon, disabled, open, itemRef, switch: switchProp, onKeyDown, onFocus, indeterminate, onSelect, onOpenNestedList, isParentNode, className, inactive, itemWrapRender, meta, ...rest }: AllBaseItemProps): string | number | boolean | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
 export {};

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

@@ -12,38 +12,44 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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, useParentListContext, useSelectionContext } from '../../Lists/contexts';
+import { ItemContent } from '../../../helperComponents';
+import { useCollapseLevelContext, useFocusListContext, useNewListContext, useSelectionContext, } from '../../Lists/contexts';
 import commonStyles from '../styles.module.css';
+import { isContentItemProps } from '../utils';
 import { CHECKBOX_SIZE_MAP } from './constants';
 import styles from './styles.module.css';
 export function BaseItem(_a) {
-    var _b, _c;
-    var { beforeContent, afterContent, content, onClick, onMouseDown, id, expandIcon, disabled, open, itemRef, switch: switchProp, onKeyDown, onFocus, indeterminate, onSelect, isParentNode, className, inactive, itemWrapRender } = _a, rest = __rest(_a, ["beforeContent", "afterContent", "content", "onClick", "onMouseDown", "id", "expandIcon", "disabled", "open", "itemRef", "switch", "onKeyDown", "onFocus", "indeterminate", "onSelect", "isParentNode", "className", "inactive", "itemWrapRender"]);
-    const { option, caption, description, truncate: contentTruncate } = content || {};
+    var _b;
+    var { beforeContent, afterContent, content, onClick, onMouseDown, id, expandIcon, disabled, open, itemRef, switch: switchProp, onKeyDown, onFocus, indeterminate, onSelect, onOpenNestedList, isParentNode, className, inactive, itemWrapRender, meta } = _a, rest = __rest(_a, ["beforeContent", "afterContent", "content", "onClick", "onMouseDown", "id", "expandIcon", "disabled", "open", "itemRef", "switch", "onKeyDown", "onFocus", "indeterminate", "onSelect", "onOpenNestedList", "isParentNode", "className", "inactive", "itemWrapRender", "meta"]);
     const interactive = !inactive;
-    const { parentResetActiveFocusIndex } = useParentListContext();
-    const { size, marker, parent } = useListContext();
-    const { level = 0 } = useCollapseContext();
+    const { size = 's', marker, contentRender } = useNewListContext();
+    const { level = 0 } = useCollapseLevelContext();
+    const { forceUpdateActiveItemId } = useFocusListContext();
     const { value, onChange, mode, isSelectionSingle, isSelectionMultiple } = useSelectionContext();
-    const isChecked = isSelectionSingle ? value === id : value === null || value === void 0 ? void 0 : value.includes(id);
+    const isChecked = isSelectionSingle ? value === id : value === null || value === void 0 ? void 0 : value.includes(id !== null && id !== void 0 ? id : '');
     const handleChange = () => {
-        onChange === null || onChange === void 0 ? void 0 : onChange(id !== null && id !== void 0 ? id : '');
+        onChange === null || onChange === void 0 ? void 0 : onChange(id !== null && id !== void 0 ? id : '', meta);
     };
-    const handleItemMouseDown = (e) => {
+    const handleItemClick = (e) => {
         if (disabled)
             return;
         if (interactive) {
-            parentResetActiveFocusIndex === null || parentResetActiveFocusIndex === void 0 ? void 0 : parentResetActiveFocusIndex();
             if (!isParentNode) {
                 handleChange();
             }
         }
-        onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(e);
+        onClick === null || onClick === void 0 ? void 0 : onClick(e);
+        forceUpdateActiveItemId === null || forceUpdateActiveItemId === void 0 ? void 0 : forceUpdateActiveItemId('~drop-focus');
     };
     const handleItemKeyDown = (e) => {
         onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
+        if (e.code === 'ArrowRight') {
+            onOpenNestedList === null || onOpenNestedList === void 0 ? void 0 : onOpenNestedList(e);
+            e.preventDefault();
+            e.stopPropagation();
+            return;
+        }
         if (e.code === 'Space' || e.key === 'Enter') {
             if (isSelectionMultiple && isParentNode && onSelect) {
                 onSelect();
@@ -71,9 +77,9 @@ export function BaseItem(_a) {
         e.stopPropagation();
     };
     const props = extractSupportProps(rest);
-    const item = (_jsxs("li", { "data-type": 'outside', 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: onClick, onMouseDown: handleItemMouseDown, 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, { variant: contentTruncate === null || contentTruncate === void 0 ? void 0 : contentTruncate.variant, text: option, maxLines: (_b = contentTruncate === null || contentTruncate === void 0 ? void 0 : contentTruncate.option) !== null && _b !== void 0 ? _b : 1, "data-test-id": 'list__base-item-option' }) }), caption && _jsx("span", { className: styles.caption, children: caption })] }), description && (_jsx("div", { className: styles.description, children: _jsx(TruncateString, { text: description, maxLines: (_c = contentTruncate === null || contentTruncate === void 0 ? void 0 : contentTruncate.description) !== null && _c !== void 0 ? _c : 2, "data-test-id": 'list__base-item-description' }) }))] }), 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 itemJSX = (_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, onMouseDown: onMouseDown, 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 }), content && isContentItemProps(content) ? ((_b = contentRender === null || contentRender === void 0 ? void 0 : contentRender({ id, meta })) !== null && _b !== void 0 ? _b : _jsx(ItemContent, Object.assign({ disabled: disabled }, content))) : (_jsxs("div", { className: styles.content, children: [" ", content, " "] })), 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;
+        return itemJSX;
     }
-    return itemWrapRender(item);
+    return itemWrapRender(itemJSX);
 }

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

@@ -1,25 +1,3 @@
-.headline{
-  display:flex;
-  align-items:center;
-}
-
-.option{
-  overflow:hidden;
-  flex:1;
-  color:var(--sys-neutral-text-main, #33333b);
-}
-
-.caption{
-  overflow:hidden;
-  color:var(--sys-neutral-text-light, #868892);
-  text-overflow:ellipsis;
-  white-space:nowrap;
-}
-
-.description{
-  color:var(--sys-neutral-text-support, #656771);
-}
-
 .checkbox{
   display:inline-flex;
   flex-grow:0;
@@ -41,8 +19,8 @@
   color:var(--sys-neutral-text-light, #868892);
 }
 .beforeContent svg{
-  width:100% !important;
-  height:100% !important;
+  max-width:100%;
+  max-height:100%;
 }
 
 .expandableIcon{
@@ -71,119 +49,22 @@
   height:100%;
 }
 
-.content{
-  overflow:hidden;
-  flex-grow:1;
-  flex-shrink:1;
-  box-sizing:border-box;
-}
-
 .droplistItem{
   width:100%;
 }
 .droplistItem[data-size=s]{
   padding-left:calc(var(--level, 0) * var(--dimension-050m, 4px) + var(--space-drop-list-item-s-container-horizontal-padding, 8px));
 }
-.droplistItem[data-size=s] .headline{
-  gap:var(--space-drop-list-item-s-container-headline-gap, 8px);
-  height:var(--size-drop-list-item-headline, 24px);
-}
-.droplistItem[data-size=s] .option{
-  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);
-}
-.droplistItem[data-size=s] .caption{
-  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);
-}
-.droplistItem[data-size=s] .description{
-  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);
-}
 .droplistItem[data-size=m]{
   padding-left:calc(var(--level, 0) * var(--dimension-050m, 4px) + var(--space-drop-list-item-m-container-horizontal-padding, 10px));
 }
-.droplistItem[data-size=m] .headline{
-  gap:var(--space-drop-list-item-m-container-headline-gap, 8px);
-  height:var(--size-drop-list-item-headline, 24px);
-}
-.droplistItem[data-size=m] .option{
-  font-family:var(--sans-body-m-font-family, SB Sans Interface);
-  font-weight:var(--sans-body-m-font-weight, Regular);
-  line-height:var(--sans-body-m-line-height, 20px);
-  font-size:var(--sans-body-m-font-size, 14px);
-  letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
-  paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
-}
-.droplistItem[data-size=m] .caption{
-  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);
-}
-.droplistItem[data-size=m] .description{
-  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);
-}
 .droplistItem[data-size=l]{
   padding-left:calc(var(--level, 0) * var(--dimension-050m, 4px) + var(--space-drop-list-item-l-container-horizontal-padding, 12px));
 }
-.droplistItem[data-size=l] .headline{
-  gap:var(--space-drop-list-item-l-container-headline-gap, 8px);
-  height:var(--size-drop-list-item-headline, 24px);
-}
-.droplistItem[data-size=l] .option{
-  font-family:var(--sans-body-l-font-family, SB Sans Interface);
-  font-weight:var(--sans-body-l-font-weight, Regular);
-  line-height:var(--sans-body-l-line-height, 24px);
-  font-size:var(--sans-body-l-font-size, 16px);
-  letter-spacing:var(--sans-body-l-letter-spacing, 0.1px);
-  paragraph-spacing:var(--sans-body-l-paragraph-spacing, 8.8px);
-}
-.droplistItem[data-size=l] .caption{
-  font-family:var(--sans-body-m-font-family, SB Sans Interface);
-  font-weight:var(--sans-body-m-font-weight, Regular);
-  line-height:var(--sans-body-m-line-height, 20px);
-  font-size:var(--sans-body-m-font-size, 14px);
-  letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
-  paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
-}
-.droplistItem[data-size=l] .description{
-  font-family:var(--sans-body-m-font-family, SB Sans Interface);
-  font-weight:var(--sans-body-m-font-weight, Regular);
-  line-height:var(--sans-body-m-line-height, 20px);
-  font-size:var(--sans-body-m-font-size, 14px);
-  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[aria-disabled] .option,
-.droplistItem[aria-disabled] .description,
-.droplistItem[aria-disabled] .caption,
-.droplistItem[aria-disabled] .expandableIcon, .droplistItem[data-disabled] .option,
-.droplistItem[data-disabled] .description,
-.droplistItem[data-disabled] .caption,
-.droplistItem[data-disabled] .expandableIcon{
+.droplistItem[aria-disabled] .expandableIcon, .droplistItem[data-disabled] .expandableIcon{
   color:var(--sys-neutral-text-disabled, #b3b6bf);
 }
 .droplistItem[aria-disabled] .beforeContent, .droplistItem[data-disabled] .beforeContent{
@@ -208,4 +89,10 @@
 }
 .droplistItem[data-has-checked][data-disabled] .markerContainer:before, .droplistItem[data-checked][data-disabled] .markerContainer:before{
   background-color:var(--sys-neutral-text-disabled, #b3b6bf);
+}
+
+.content{
+  flex-grow:1;
+  flex-shrink:1;
+  box-sizing:border-box;
 }

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

@@ -1,2 +1,2 @@
-import { GroupItemProps } from '../types';
-export declare function GroupItem({ label, truncate, divider, items, mode }: GroupItemProps): import("react/jsx-runtime").JSX.Element;
+import { AnyType, FlattenGroupListItem } from '../types';
+export declare function GroupItem<Meta = AnyType>({ label, truncate, divider, items, mode }: FlattenGroupListItem<Meta>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Items/GroupItem/GroupItem.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Separator } from '../../../helperComponents';
-import { useListContext } from '../../Lists/contexts';
+import { useNewListContext } from '../../Lists/contexts';
 import { useRenderItems } from '../hooks';
 export function GroupItem({ label, truncate, divider, items, mode }) {
-    const { size } = useListContext();
-    const itemsJSX = useRenderItems(items);
+    const { flattenedItems, size = 's' } = useNewListContext();
+    const itemsJSX = useRenderItems({ items, flattenedItems });
     return (_jsxs(_Fragment, { children: [_jsx(Separator, { label: label, truncate: truncate, divider: divider, mode: mode, size: size }), itemsJSX] }));
 }

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

@@ -1,2 +1,2 @@
-import { NextListItemProps } from '../types';
-export declare function NextListItem({ items: itemsProp, placement, id, search, scroll, scrollRef, disabled, onSublistOpenChanged, ...option }: NextListItemProps): import("react/jsx-runtime").JSX.Element;
+import { AnyType, FlattenNextListItem } from '../types';
+export declare function NextListItem<Meta = AnyType>({ items, placement, id, search, scroll, scrollRef, disabled, allChildIds, ...option }: FlattenNextListItem<Meta>): import("react/jsx-runtime").JSX.Element;

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

@@ -13,12 +13,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useMemo, useRef, useState } from 'react';
 import { Dropdown } from '@snack-uikit/dropdown';
 import { ChevronRightSVG } from '@snack-uikit/icons';
-import { withCollapsedItems } from '../../../utils';
-import { ParentListContext, useParentListContext } from '../../Lists/contexts';
+import { extractActiveItems } from '../../../utils';
+import { useCollapseContext, useFocusListContext, useNewListContext } from '../../Lists/contexts';
 import { ListPrivate } from '../../Lists/ListPrivate';
 import { BaseItem } from '../BaseItem';
 import { useGroupItemSelection } from '../hooks';
-import { useKeyboardNavigation } from './hooks';
 const FALLBACK_PLACEMENTS = [
     'right',
     'right-start',
@@ -26,42 +25,44 @@ const FALLBACK_PLACEMENTS = [
     'left',
     'left-start',
     'left-end',
+    'bottom',
+    'top',
 ];
 export function NextListItem(_a) {
-    var { items: itemsProp, placement = 'right-start', id, search, scroll, scrollRef, disabled, onSublistOpenChanged } = _a, option = __rest(_a, ["items", "placement", "id", "search", "scroll", "scrollRef", "disabled", "onSublistOpenChanged"]);
-    const listRef = useRef(null);
-    const [openCollapsedItems, setOpenCollapsedItems] = useState([]);
-    const { items, itemRefs, ids, expandedIds } = useMemo(() => withCollapsedItems({
-        items: itemsProp,
-        openCollapsedItems,
-    }), [itemsProp, openCollapsedItems]);
-    const { parentOpenNestedIndex, parentIds, triggerRef, parentResetNestedIndex, parentResetActiveFocusIndex } = useParentListContext();
-    const { open, setOpen, handleListKeyDown, activeFocusIndex, openNestedIndex, resetNestedIndex, resetActiveFocusIndex, } = useKeyboardNavigation({ ids, expandedIds, itemRefs, id });
-    const { isIndeterminate, checked, handleOnSelect } = useGroupItemSelection({ items: itemsProp, id, disabled });
-    const handleOpenChange = useCallback((open) => {
-        if (!open) {
-            resetActiveFocusIndex();
-            resetNestedIndex();
-            setOpenCollapsedItems([]);
+    var { items, placement = 'right-start', id, search, scroll, scrollRef, disabled, allChildIds } = _a, option = __rest(_a, ["items", "placement", "id", "search", "scroll", "scrollRef", "disabled", "allChildIds"]);
+    const { flattenedItems } = useNewListContext();
+    const { openCollapseItems = [] } = useCollapseContext();
+    const { ids, expandedIds } = useMemo(() => {
+        const { ids, expandedIds } = extractActiveItems({ items, flattenedItems, openCollapseItems });
+        return { ids, expandedIds: expandedIds.concat([id]) };
+    }, [flattenedItems, id, items, openCollapseItems]);
+    const { handleListKeyDownFactory, activeItemId, forceUpdateActiveItemId } = useFocusListContext();
+    const [open, setOpen] = useState();
+    const handleListKeyDown = useCallback((e) => {
+        handleListKeyDownFactory(ids, expandedIds)(e);
+        if (e.code === 'ArrowLeft') {
+            forceUpdateActiveItemId === null || forceUpdateActiveItemId === void 0 ? void 0 : forceUpdateActiveItemId(id);
+            setOpen(false);
+            e.stopPropagation();
+            return;
         }
-        onSublistOpenChanged === null || onSublistOpenChanged === void 0 ? void 0 : onSublistOpenChanged(open, id);
-        setOpen(open);
-    }, [id, onSublistOpenChanged, resetActiveFocusIndex, resetNestedIndex, setOpen]);
+    }, [handleListKeyDownFactory, ids, expandedIds, id, forceUpdateActiveItemId]);
+    const { isIndeterminate, checked, handleOnSelect } = useGroupItemSelection({ items, id, disabled, allChildIds });
     const handleOutsideClick = useCallback(() => {
-        parentResetNestedIndex === null || parentResetNestedIndex === void 0 ? void 0 : parentResetNestedIndex();
-        parentResetActiveFocusIndex === null || parentResetActiveFocusIndex === void 0 ? void 0 : parentResetActiveFocusIndex();
+        forceUpdateActiveItemId === null || forceUpdateActiveItemId === void 0 ? void 0 : forceUpdateActiveItemId('~drop-focus');
+        setOpen(false);
         return true;
-    }, [parentResetActiveFocusIndex, parentResetNestedIndex]);
-    return (_jsx(Dropdown, { outsideClick: handleOutsideClick, fallbackPlacements: FALLBACK_PLACEMENTS, content: _jsx(ParentListContext.Provider, { value: {
-                parentIds: ids,
-                parentActiveFocusIndex: activeFocusIndex,
-                parentExpandedIds: expandedIds,
-                parentItemRefs: itemRefs,
-                parentOpenNestedIndex: openNestedIndex,
-                triggerRef,
-                parentRef: listRef,
-                parentResetNestedIndex: resetNestedIndex,
-                parentResetActiveFocusIndex: resetActiveFocusIndex,
-                toggleOpenCollapsedItems: id => setOpenCollapsedItems(items => items.includes(id) ? items.filter(item => item !== id) : items.concat([id])),
-            }, children: _jsx(ListPrivate, { onKeyDown: handleListKeyDown, items: items, nested: true, search: search, scroll: scroll, scrollRef: scrollRef, limitedScrollHeight: true }) }), trigger: 'hover', open: (open || parentIds[parentOpenNestedIndex] === id) && !disabled, onOpenChange: handleOpenChange, placement: placement, widthStrategy: 'auto', children: _jsx(BaseItem, Object.assign({}, option, { disabled: disabled, open: open, expandIcon: _jsx(ChevronRightSVG, {}), id: id, isParentNode: true, indeterminate: isIndeterminate && !checked, onSelect: handleOnSelect })) }));
+    }, [forceUpdateActiveItemId]);
+    const isOpen = useMemo(() => Boolean(!disabled && activeItemId && allChildIds.includes(activeItemId)), [activeItemId, allChildIds, disabled]);
+    const listRef = useRef(null);
+    return (_jsx(Dropdown, { outsideClick: handleOutsideClick, fallbackPlacements: FALLBACK_PLACEMENTS, content: _jsx(ListPrivate, { onKeyDown: handleListKeyDown, items: { flattenedItems, items }, nested: true, search: search, scroll: scroll, tabIndex: 0, ref: listRef, onFocus: e => {
+                e.stopPropagation();
+                forceUpdateActiveItemId === null || forceUpdateActiveItemId === void 0 ? void 0 : forceUpdateActiveItemId(ids[0]);
+            }, scrollRef: scrollRef, limitedScrollHeight: true }), trigger: 'hover', open: isOpen || open, onOpenChange: setOpen, placement: placement, children: _jsx(BaseItem, Object.assign({}, option, { disabled: disabled, open: open, expandIcon: _jsx(ChevronRightSVG, {}), id: id, isParentNode: true, indeterminate: isIndeterminate && !checked, onOpenNestedList: () => {
+                setOpen(true);
+                setTimeout(() => {
+                    var _a;
+                    (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                }, 0);
+            }, onSelect: handleOnSelect })) }));
 }

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

@@ -1,5 +1,7 @@
+import { RefObject } from 'react';
 import { SearchState } from '../../../types';
 export type SearchItemProps = {
     search?: SearchState;
+    itemRef?: RefObject<HTMLElement>;
 };
-export declare function SearchItem({ search }: SearchItemProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function SearchItem({ search, itemRef }: SearchItemProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -1,12 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import cn from 'classnames';
 import { SearchPrivate } from '@snack-uikit/search-private';
-import { useListContext, useParentListContext } from '../../Lists/contexts';
+import { useNewListContext } from '../../Lists/contexts';
 import commonStyles from '../styles.module.css';
 import styles from './styles.module.css';
-export function SearchItem({ search }) {
-    const { parentItemRefs, parentSetActiveFocusIndex } = useParentListContext();
-    const { size } = useListContext();
+export function SearchItem({ search, itemRef }) {
+    const { size = 's' } = useNewListContext();
     const handleKeyDown = (e) => {
         if (['ArrowDown', 'ArrowUp'].includes(e.key)) {
             e.preventDefault();
@@ -16,13 +15,13 @@ export function SearchItem({ search }) {
         }
     };
     const handleFocus = (e) => {
-        if (e.target === parentItemRefs[0].current) {
-            parentSetActiveFocusIndex === null || parentSetActiveFocusIndex === void 0 ? void 0 : parentSetActiveFocusIndex(0);
-        }
+        // if (e.target === parentItemRefs[0].current) {
+        //   parentSetActiveFocusIndex?.(0);
+        // }
         e.stopPropagation();
     };
     if (!Boolean(search)) {
         return null;
     }
-    return (_jsx("div", { className: cn(commonStyles.listItem, styles.searchItem), "data-size": size, "data-test-id": 'list__search-item', children: _jsx(SearchPrivate, Object.assign({ size: size, tabIndex: -1, onKeyDown: handleKeyDown, onFocus: handleFocus }, search, { ref: parentItemRefs[0] })) }));
+    return (_jsx("div", { className: cn(commonStyles.listItem, styles.searchItem), "data-size": size, "data-test-id": 'list__search-item', children: _jsx(SearchPrivate, Object.assign({ size: size, tabIndex: -1, onKeyDown: handleKeyDown, onFocus: handleFocus }, search, { ref: itemRef })) }));
 }