@snack-uikit/list 0.10.0 → 0.10.1-preview-69abc1d3.0

package/dist/helperComponents/ItemContent/styles.module.css

@@ -0,0 +1,117 @@
+.headline{
+  display:flex;
+  align-items:center;
+}
+
+.label{
+  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);
+}
+
+.content{
+  overflow:hidden;
+  flex-grow:1;
+  flex-shrink:1;
+  box-sizing:border-box;
+}
+.content[data-size=s] .headline{
+  gap:var(--space-drop-list-item-s-container-headline-gap, 8px);
+  height:var(--size-drop-list-item-headline, 24px);
+}
+.content[data-size=s] .label{
+  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);
+}
+.content[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);
+}
+.content[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);
+}
+.content[data-size=m] .headline{
+  gap:var(--space-drop-list-item-m-container-headline-gap, 8px);
+  height:var(--size-drop-list-item-headline, 24px);
+}
+.content[data-size=m] .label{
+  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);
+}
+.content[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);
+}
+.content[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);
+}
+.content[data-size=l] .headline{
+  gap:var(--space-drop-list-item-l-container-headline-gap, 8px);
+  height:var(--size-drop-list-item-headline, 24px);
+}
+.content[data-size=l] .label{
+  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);
+}
+.content[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);
+}
+.content[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);
+}
+.content[data-disabled] .label,
+.content[data-disabled] .description,
+.content[data-disabled] .caption{
+  color:var(--sys-neutral-text-disabled, #b3b6bf);
+}

package/dist/helperComponents/ListEmptyState/ListEmptyState.d.ts

@@ -9,6 +9,6 @@ export type ListEmptyState = {
     loading?: boolean;
     dataError?: boolean;
     dataFiltered?: boolean;
-    itemsLength: number;
+    hasNoItems: boolean;
 };
-export declare function ListEmptyState({ dataError, dataFiltered, itemsLength, emptyStates, loading }: ListEmptyState): import("react/jsx-runtime").JSX.Element | null;
+export declare function ListEmptyState({ dataError, dataFiltered, hasNoItems, emptyStates, loading }: ListEmptyState): import("react/jsx-runtime").JSX.Element | null;

package/dist/helperComponents/ListEmptyState/ListEmptyState.js

@@ -1,9 +1,18 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { InfoBlock } from '@snack-uikit/info-block';
 import styles from './styles.module.css';
-export function ListEmptyState({ dataError, dataFiltered, itemsLength, emptyStates, loading }) {
-    if (itemsLength || loading) {
+export function ListEmptyState({ dataError, dataFiltered, hasNoItems, emptyStates, loading }) {
+    if (loading) {
         return null;
     }
-    return (_jsxs("div", { className: styles.listEmptyStateWrapper, children: [dataError && _jsx(InfoBlock, Object.assign({}, emptyStates.errorDataState, { size: 's', align: 'vertical' })), !dataError && dataFiltered && (_jsx(InfoBlock, Object.assign({}, emptyStates.noResultsState, { size: 's', align: 'vertical', "data-test-id": 'list__no-results' }))), !dataError && !dataFiltered && (_jsx(InfoBlock, Object.assign({}, emptyStates.noDataState, { size: 's', align: 'vertical', "data-test-id": 'list__no-data' })))] }));
+    if (dataError) {
+        return (_jsx("div", { className: styles.listEmptyStateWrapper, children: _jsx(InfoBlock, Object.assign({}, emptyStates.errorDataState, { size: 's', align: 'vertical' })) }));
+    }
+    if (dataFiltered && hasNoItems) {
+        return (_jsx("div", { className: styles.listEmptyStateWrapper, children: _jsx(InfoBlock, Object.assign({}, emptyStates.noResultsState, { size: 's', align: 'vertical', "data-test-id": 'list__no-results' })) }));
+    }
+    if (!dataFiltered && hasNoItems) {
+        return (_jsx("div", { className: styles.listEmptyStateWrapper, children: _jsx(InfoBlock, Object.assign({}, emptyStates.noDataState, { size: 's', align: 'vertical', "data-test-id": 'list__no-data' })) }));
+    }
+    return null;
 }

package/dist/helperComponents/Separator/Separator.d.ts

@@ -1,3 +1,4 @@
+import { ForwardedRef, MouseEvent } from 'react';
 import { TruncateStringProps } from '@snack-uikit/truncate-string';
 export type SeparatorProps = {
     label?: string;
@@ -6,6 +7,11 @@ export type SeparatorProps = {
     };
     mode?: 'primary' | 'secondary';
     divider?: boolean;
-    size?: 's' | 'm' | 'l';
+    selectButton?: {
+        onClick?(e: MouseEvent<HTMLElement>): void;
+        indeterminate?: boolean;
+        checked?: boolean;
+        itemRef?: ForwardedRef<HTMLElement>;
+    };
 };
-export declare function Separator({ label, truncate, divider, mode, size }: SeparatorProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function Separator({ label, truncate, divider, mode, selectButton }: SeparatorProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/helperComponents/Separator/Separator.js

@@ -1,10 +1,30 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { ButtonFunction } from '@snack-uikit/button';
 import { Divider } from '@snack-uikit/divider';
+import { useLocale } from '@snack-uikit/locale';
 import { TruncateString } from '@snack-uikit/truncate-string';
+import { useNewListContext } from '../../components/Lists/contexts';
+import { SELECT_BUTTON_SIZE_MAP } from './constants';
 import styles from './styles.module.css';
-export function Separator({ label, truncate, divider, mode = 'secondary', size = 's' }) {
+export function Separator({ label, truncate, divider, mode = 'secondary', selectButton }) {
+    const { size = 's' } = useNewListContext();
+    const { t } = useLocale('List');
+    const selectButtonJSX = useMemo(() => {
+        if (!selectButton) {
+            return null;
+        }
+        const { onClick, checked, itemRef } = selectButton;
+        return (_jsx("span", { className: styles.selectButton, "data-size": size, "data-weight": (divider && mode) || undefined, children: _jsx(ButtonFunction, { size: SELECT_BUTTON_SIZE_MAP[size], tabIndex: 0, onClick: e => {
+                    onClick === null || onClick === void 0 ? void 0 : onClick(e);
+                    e.preventDefault();
+                    e.stopPropagation();
+                }, onFocus: e => {
+                    e.stopPropagation();
+                }, ref: itemRef, label: checked ? t('groupSelectButton.reset') : t('groupSelectButton.select') }) }));
+    }, [divider, mode, selectButton, size, t]);
     if (label) {
-        return (_jsxs("div", { className: styles.separatorWithLabel, "data-size": size, children: [_jsx("span", { className: styles.label, "data-mode": mode, children: _jsx(TruncateString, { variant: truncate === null || truncate === void 0 ? void 0 : truncate.variant, text: label, maxLines: 1 }) }), divider && _jsx(Divider, { weight: mode === 'primary' ? 'regular' : 'light', className: styles.divider })] }));
+        return (_jsxs("div", { className: styles.separatorWithLabel, "data-size": size, children: [_jsx("span", { className: styles.label, "data-mode": mode, children: _jsx(TruncateString, { variant: truncate === null || truncate === void 0 ? void 0 : truncate.variant, text: label, maxLines: 1 }) }), _jsxs("div", { style: { flex: 1 }, children: [selectButtonJSX, divider && _jsx(Divider, { weight: mode === 'primary' ? 'regular' : 'light', className: styles.divider })] })] }));
     }
     if (divider) {
         return (_jsx("div", { className: styles.separatorWithoutLabel, "data-size": size, children: _jsx(Divider, { weight: 'regular' }) }));

package/dist/helperComponents/Separator/constants.d.ts

@@ -0,0 +1,2 @@
+import { ButtonFunctionProps } from '@snack-uikit/button';
+export declare const SELECT_BUTTON_SIZE_MAP: Record<string, ButtonFunctionProps['size']>;

package/dist/helperComponents/Separator/constants.js

@@ -0,0 +1,5 @@
+export const SELECT_BUTTON_SIZE_MAP = {
+    s: 'xs',
+    m: 's',
+    l: 'm',
+};

package/dist/helperComponents/Separator/styles.module.css

@@ -1,5 +1,4 @@
 .separatorWithLabel{
-  overflow:hidden;
   display:flex;
   gap:var(--dimension-1m, 8px);
   align-items:flex-end;
@@ -119,4 +118,24 @@ hr.divider{
   flex:1;
   width:auto;
   min-width:0;
+}
+
+.selectButton{
+  display:flex;
+  justify-content:flex-end;
+}
+.selectButton[data-weight=primary]{
+  --divider-height:1px;
+}
+.selectButton[data-weight=secondary]{
+  --divider-height:0.5px;
+}
+.selectButton[data-size=s]{
+  transform:translateY(calc((var(--size-button-xs, 24px) - var(--sans-label-s-line-height, 14px)) / 2 - var(--divider-height, 0)));
+}
+.selectButton[data-size=m]{
+  transform:translateY(calc((var(--size-button-s, 32px) - var(--sans-label-m-line-height, 16px)) / 2 - var(--divider-height, 0)));
+}
+.selectButton[data-size=l]{
+  transform:translateY(calc((var(--size-button-m, 40px) - var(--sans-label-l-line-height, 20px)) / 2 - var(--divider-height, 0)));
 }

package/dist/helperComponents/index.d.ts

@@ -2,3 +2,4 @@ export * from './CollapseBlockPrivate';
 export * from './Separator';
 export * from './HiddenTabButton';
 export * from './ListEmptyState';
+export * from './ItemContent';

package/dist/helperComponents/index.js

@@ -2,3 +2,4 @@ export * from './CollapseBlockPrivate';
 export * from './Separator';
 export * from './HiddenTabButton';
 export * from './ListEmptyState';
+export * from './ItemContent';

package/dist/hooks.d.ts

@@ -2,4 +2,4 @@ import { ItemProps } from './components/Items';
 /**
  * Нечеткий поиск среди айтемов по полям 'content.option', 'content.caption', 'content.description', 'label'
  */
-export declare function useFuzzySearch(items: ItemProps[], minSearchInputLength?: number): (search: string) => ItemProps[];
+export declare function useFuzzySearch(items: ItemProps[]): () => import("./components/Items").Item[];

package/dist/hooks.js

@@ -1,15 +1,20 @@
-import FuzzySearch from 'fuzzy-search';
+// import FuzzySearch from 'fuzzy-search';
 import { useCallback } from 'react';
-import { flattenItems } from './utils';
-const DEFAULT_MIN_SEARCH_INPUT_LENGTH = 2;
+// import { flattenItems } from './utils';
+// const DEFAULT_MIN_SEARCH_INPUT_LENGTH = 2;
 /**
  * Нечеткий поиск среди айтемов по полям 'content.option', 'content.caption', 'content.description', 'label'
  */
-export function useFuzzySearch(items, minSearchInputLength) {
-    return useCallback((search) => {
-        const searcher = new FuzzySearch(flattenItems(items), ['content.option', 'content.caption', 'content.description', 'label'], {});
-        return search.length > (minSearchInputLength !== null && minSearchInputLength !== void 0 ? minSearchInputLength : DEFAULT_MIN_SEARCH_INPUT_LENGTH)
-            ? searcher.search(search)
-            : items;
-    }, [items, minSearchInputLength]);
+export function useFuzzySearch(items) {
+    return useCallback(() => 
+    // (search: string) =>
+    // const searcher = new FuzzySearch(
+    //   // flattenItems(items),
+    //   ['content.option', 'content.caption', 'content.description', 'label'],
+    //   {},
+    // );
+    // return search.length > (minSearchInputLength ?? DEFAULT_MIN_SEARCH_INPUT_LENGTH)
+    //   ? searcher.search(search)
+    //   : items;
+    items, [items]);
 }

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export * from './components';
-export { useFuzzySearch } from './hooks';
 export type { SearchState } from './types';
-export { extractChildIds, flattenItems } from './utils';
+export { kindFlattenItems } from './components/Items';
+export * from './helperComponents/ItemContent';
+export * from './legacy';

package/dist/index.js

@@ -1,3 +1,4 @@
 export * from './components';
-export { useFuzzySearch } from './hooks';
-export { extractChildIds, flattenItems } from './utils';
+export { kindFlattenItems } from './components/Items';
+export * from './helperComponents/ItemContent';
+export * from './legacy';

package/dist/legacy/components/Items/hooks.d.ts

@@ -0,0 +1,12 @@
+import { ItemProps } from '../../../components';
+type UseGroupItemSelectionProps = {
+    items: ItemProps[];
+    id?: string | number;
+    disabled?: boolean;
+};
+export declare function useLegacyGroupItemSelection({ id, items, disabled }: UseGroupItemSelectionProps): {
+    checked: boolean | undefined;
+    isIndeterminate: boolean;
+    handleOnSelect: () => void;
+};
+export {};

package/dist/legacy/components/Items/hooks.js

@@ -0,0 +1,33 @@
+import { useEffect, useMemo } from 'react';
+import { useSelectionContext } from '../../../components/Lists/contexts';
+import { extractAllChildIds, extractChildIds } from '../../utils';
+export function useLegacyGroupItemSelection({ id = '', items, disabled }) {
+    const { value, setValue, isSelectionMultiple } = useSelectionContext();
+    const { childIds, allChildIds } = useMemo(() => ({ childIds: extractChildIds({ items }), allChildIds: extractAllChildIds({ items }) }), [items]);
+    const isIndeterminate = isSelectionMultiple
+        ? 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))) {
+                setValue === null || setValue === void 0 ? void 0 : setValue((value) => (value !== null && value !== void 0 ? value : []).concat([id !== null && id !== void 0 ? id : '']));
+            }
+            if (!checked && (value === null || value === void 0 ? void 0 : value.includes(id))) {
+                setValue === null || setValue === void 0 ? void 0 : setValue((value) => (value !== null && value !== void 0 ? value : []).filter(itemId => itemId !== id));
+            }
+        }
+    }, [checked, disabled, id, isSelectionMultiple, setValue, value]);
+    const handleOnSelect = () => {
+        if (checked) {
+            setValue === null || setValue === void 0 ? void 0 : setValue((value) => (value !== null && value !== void 0 ? value : []).filter(itemId => itemId !== id && !childIds.includes(itemId)));
+            return;
+        }
+        if (isIndeterminate) {
+            setValue === null || setValue === void 0 ? void 0 : setValue((value) => Array.from(new Set([...(value !== null && value !== void 0 ? value : []), ...childIds, id])));
+            return;
+        }
+        setValue === null || setValue === void 0 ? void 0 : setValue((value) => (value !== null && value !== void 0 ? value : []).concat([...childIds, id !== null && id !== void 0 ? id : '']));
+    };
+    return { checked, isIndeterminate, handleOnSelect };
+}

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

@@ -0,0 +1 @@
+export { useLegacyGroupItemSelection } from './Items/hooks';

package/dist/legacy/components/index.js

@@ -0,0 +1 @@
+export { useLegacyGroupItemSelection } from './Items/hooks';

package/dist/legacy/hooks.d.ts

@@ -0,0 +1,5 @@
+import { ItemProps } from '../components';
+/**
+ * Нечеткий поиск среди айтемов по полям 'content.option', 'content.caption', 'content.description', 'label'
+ */
+export declare function useFuzzySearch(items: ItemProps[], minSearchInputLength?: number): (search: string) => import("../components/Items").Item[];

package/dist/legacy/hooks.js

@@ -0,0 +1,15 @@
+import FuzzySearch from 'fuzzy-search';
+import { useCallback } from 'react';
+import { flattenItems } from './utils';
+const DEFAULT_MIN_SEARCH_INPUT_LENGTH = 2;
+/**
+ * Нечеткий поиск среди айтемов по полям 'content.option', 'content.caption', 'content.description', 'label'
+ */
+export function useFuzzySearch(items, minSearchInputLength) {
+    return useCallback((search) => {
+        const searcher = new FuzzySearch(flattenItems(items), ['content.option', 'content.caption', 'content.description', 'label'], {});
+        return search.length > (minSearchInputLength !== null && minSearchInputLength !== void 0 ? minSearchInputLength : DEFAULT_MIN_SEARCH_INPUT_LENGTH)
+            ? searcher.search(search)
+            : items;
+    }, [items, minSearchInputLength]);
+}

package/dist/legacy/index.d.ts

@@ -0,0 +1,3 @@
+export * from './components';
+export { useFuzzySearch } from './hooks';
+export { extractChildIds, flattenItems } from './utils';

package/dist/legacy/index.js

@@ -0,0 +1,3 @@
+export * from './components';
+export { useFuzzySearch } from './hooks';
+export { extractChildIds, flattenItems } from './utils';

package/dist/{utils.d.ts → legacy/utils.d.ts}

@@ -1,16 +1,15 @@
 import { RefObject } from 'react';
-import { AccordionItemProps, BaseItemProps, ItemProps, NextListItemProps } from './components/Items';
+import { AccordionItemProps, BaseItemProps, ItemProps, NextListItemProps } from '../components/Items';
 type WithCollapsedItemsProps = {
     items: ItemProps[];
     openCollapsedItems: Array<number | string>;
 };
 export declare function withCollapsedItems({ items, openCollapsedItems }: WithCollapsedItemsProps): {
-    items: ItemProps[];
+    items: import("../components/Items").Item[];
     itemRefs: RefObject<HTMLElement>[];
     ids: (string | number)[];
     expandedIds: (string | number)[];
 };
-export declare function extractItemRefs(items: ItemProps[]): RefObject<HTMLElement>[];
 /**
  * Функция возвращает массив id дочерних items
  * @function  extractItemIds

package/dist/{utils.js → legacy/utils.js}

@@ -1,4 +1,4 @@
-import { isAccordionItemProps, isBaseItemProps, isGroupItemProps, isNextListItemProps, } from './components/Items';
+import { isAccordionItemProps, isBaseItemProps, isGroupItemProps, isNextListItemProps, } from '../components/Items';
 export function withCollapsedItems({ items, openCollapsedItems }) {
     let itemRefs = [];
     let newItems = [];
@@ -38,14 +38,6 @@ export function withCollapsedItems({ items, openCollapsedItems }) {
     });
     return { items, itemRefs, ids, expandedIds };
 }
-export function extractItemRefs(items) {
-    return items.reduce((prev, item) => {
-        if (isGroupItemProps(item)) {
-            return prev.concat(extractItemRefs(item.items));
-        }
-        return item.itemRef ? prev.concat([item.itemRef]) : prev;
-    }, []);
-}
 /**
  * Функция возвращает массив id дочерних items
  * @function  extractItemIds
@@ -97,10 +89,10 @@ export function extractAllChildIds({ items }) {
  *  @function  flattenItems
  */
 export function flattenItems(items) {
-    const flattenedItems = [];
+    const flattenItems = [];
     function flatten(item) {
         if (!isGroupItemProps(item)) {
-            flattenedItems.push(item);
+            flattenItems.push(item);
         }
         if ('items' in item) {
             for (const nestedItem of item.items) {
@@ -111,5 +103,5 @@ export function flattenItems(items) {
     for (const item of items) {
         flatten(item);
     }
-    return flattenedItems;
+    return flattenItems;
 }

package/dist/types.d.ts

@@ -1,9 +1,9 @@
 import { RefObject } from 'react';
 export type SearchState = {
     placeholder?: string;
+    loading?: boolean;
     value?: string;
     onChange(value: string): void;
-    loading?: boolean;
 };
 export type ScrollProps = {
     /** Включить ли скролл для основной части списка */

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "List",
-  "version": "0.10.0",
+  "version": "0.10.1-preview-69abc1d3.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -32,21 +32,21 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/divider": "3.0.2",
-    "@snack-uikit/dropdown": "0.2.1",
+    "@snack-uikit/button": "0.17.1-preview-69abc1d3.0",
+    "@snack-uikit/divider": "3.0.3-preview-69abc1d3.0",
+    "@snack-uikit/dropdown": "0.2.2-preview-69abc1d3.0",
     "@snack-uikit/icons": "0.20.1",
-    "@snack-uikit/info-block": "0.3.3",
-    "@snack-uikit/loaders": "0.5.1",
-    "@snack-uikit/locale": "0.6.0",
-    "@snack-uikit/scroll": "0.5.2",
-    "@snack-uikit/search-private": "0.1.5",
-    "@snack-uikit/toggles": "0.9.7",
-    "@snack-uikit/truncate-string": "0.4.12",
-    "@snack-uikit/utils": "3.2.0",
+    "@snack-uikit/info-block": "0.3.4-preview-69abc1d3.0",
+    "@snack-uikit/loaders": "0.5.2-preview-69abc1d3.0",
+    "@snack-uikit/locale": "0.6.1-preview-69abc1d3.0",
+    "@snack-uikit/scroll": "0.5.3-preview-69abc1d3.0",
+    "@snack-uikit/search-private": "0.1.6-preview-69abc1d3.0",
+    "@snack-uikit/toggles": "0.9.8-preview-69abc1d3.0",
+    "@snack-uikit/truncate-string": "0.4.13-preview-69abc1d3.0",
+    "@snack-uikit/utils": "3.2.1-preview-69abc1d3.0",
     "classnames": "2.5.1",
     "fuzzy-search": "3.2.1",
-    "merge-refs": "1.2.2",
-    "uncontrollable": "8.0.4"
+    "merge-refs": "1.2.2"
   },
   "devDependencies": {
     "@types/fuzzy-search": "2.1.5"
@@ -54,5 +54,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "381565b14f3e08082b29add05be8f982fa8f4c2f"
+  "gitHead": "f1afde301bcd6ae86662d45c89041e7a14cc7b98"
 }

package/src/components/Items/AccordionItem/AccordionItem.tsx

@@ -1,33 +1,36 @@
-import { KeyboardEvent, MouseEvent } from 'react';
+import { MouseEvent, 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 } from '../../Lists/contexts';
 import { BaseItem } from '../BaseItem';
 import { useGroupItemSelection, useRenderItems } from '../hooks';
-import { AccordionItemProps } from '../types';
+import { CommonFlattenProps, FlattenAccordionItem } from '../types';
 
-export function AccordionItem({ items: itemsProp, id, disabled, ...option }: AccordionItemProps) {
-  const { level = 1 } = useCollapseContext();
-  const { toggleOpenCollapsedItems, openCollapsedItems } = useParentListContext();
-  const { isIndeterminate, checked, handleOnSelect } = useGroupItemSelection({ items: itemsProp, id, disabled });
+type AccordionItemProps = Omit<FlattenAccordionItem, 'type>'> & CommonFlattenProps;
 
-  const isOpen = Boolean(openCollapsedItems?.includes(id ?? ''));
+export function AccordionItem({ id, disabled, allChildIds, items, ...option }: AccordionItemProps) {
+  const { level = 1 } = useCollapseLevelContext();
+  const { openCollapseItems = [], toggleOpenCollapseItem } = useCollapseContext();
 
-  const handleKeyDown = (e: KeyboardEvent<HTMLElement>) => {
-    if (e.key === 'ArrowRight') {
-      toggleOpenCollapsedItems?.(id ?? '');
+  const { indeterminate, checked, handleOnSelect } = useGroupItemSelection({
+    items,
+    id,
+    disabled,
+    allChildIds,
+  });
 
-      e.preventDefault();
-      e.stopPropagation();
-    }
-  };
+  const isOpen = Boolean(openCollapseItems.includes(id ?? ''));
+
+  const handleKeyDown = useCallback(() => {
+    toggleOpenCollapseItem?.(id ?? '');
+  }, [id, toggleOpenCollapseItem]);
 
-  const itemsJSX = useRenderItems(itemsProp);
+  const itemsJSX = useRenderItems(items);
 
   const handleItemClick = (e: MouseEvent<HTMLElement>) => {
-    toggleOpenCollapsedItems?.(id ?? '');
+    toggleOpenCollapseItem?.(id ?? '');
     option.onClick?.(e);
   };
 
@@ -41,15 +44,16 @@ export function AccordionItem({ items: itemsProp, id, disabled, ...option }: Acc
           expandIcon={isOpen ? <ChevronUpSVG /> : <ChevronDownSVG />}
           onClick={handleItemClick}
           isParentNode
-          onKeyDown={handleKeyDown}
-          indeterminate={isIndeterminate && !checked}
+          onOpenNestedList={handleKeyDown}
+          checked={checked}
+          indeterminate={indeterminate}
           onSelect={!disabled ? handleOnSelect : undefined}
         />
       }
       expanded={isOpen}
       data-test-id={`list__accordion-item-${id}`}
     >
-      <CollapseContext.Provider value={{ level: level + 1 }}>{itemsJSX}</CollapseContext.Provider>
+      <CollapseLevelContext.Provider value={{ level: level + 1 }}>{itemsJSX}</CollapseLevelContext.Provider>
     </CollapseBlockPrivate>
   );
 }