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

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

@@ -21,7 +21,7 @@ export function AccordionItem(_a) {
     const { level = 1 } = useCollapseLevelContext();
     const { openCollapseItems = [], toggleOpenCollapseItem } = useCollapseContext();
     const { flattenedItems } = useNewListContext();
-    const { isIndeterminate, checked, handleOnSelect } = useGroupItemSelection({
+    const { indeterminate, checked, handleOnSelect } = useGroupItemSelection({
         items,
         id,
         disabled,
@@ -37,5 +37,5 @@ export function AccordionItem(_a) {
         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, 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 }) }));
+    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, checked: checked, indeterminate: indeterminate, 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

@@ -2,9 +2,10 @@ import { KeyboardEvent } from 'react';
 import { AnyType, BaseItemPrivateProps, BaseItemProps } from '../types';
 type AllBaseItemProps<Meta = AnyType> = BaseItemProps<Meta> & BaseItemPrivateProps & {
     indeterminate?: boolean;
+    checked?: 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, onOpenNestedList, isParentNode, className, inactive, itemWrapRender, meta, ...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, checked: checkedProp, 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

@@ -21,13 +21,13 @@ import { CHECKBOX_SIZE_MAP } from './constants';
 import styles from './styles.module.css';
 export function BaseItem(_a) {
     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"]);
+    var { beforeContent, afterContent, content, onClick, onMouseDown, id, expandIcon, disabled, open, itemRef, switch: switchProp, onKeyDown, onFocus, indeterminate, checked: checkedProp, 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", "checked", "onSelect", "onOpenNestedList", "isParentNode", "className", "inactive", "itemWrapRender", "meta"]);
     const interactive = !inactive;
     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 !== null && id !== void 0 ? id : '');
+    const isChecked = isSelectionSingle ? value === id : checkedProp !== null && checkedProp !== void 0 ? checkedProp : 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 : '', meta);
     };

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

@@ -47,7 +47,7 @@ export function NextListItem(_a) {
             return;
         }
     }, [handleListKeyDownFactory, ids, expandedIds, id, forceUpdateActiveItemId]);
-    const { isIndeterminate, checked, handleOnSelect } = useGroupItemSelection({ items, id, disabled, allChildIds });
+    const { indeterminate, checked, handleOnSelect } = useGroupItemSelection({ items, id, disabled, allChildIds });
     const handleOutsideClick = useCallback(() => {
         forceUpdateActiveItemId === null || forceUpdateActiveItemId === void 0 ? void 0 : forceUpdateActiveItemId('~drop-focus');
         setOpen(false);
@@ -58,7 +58,7 @@ export function NextListItem(_a) {
     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: () => {
+            }, 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: indeterminate, checked: checked, onOpenNestedList: () => {
                 setOpen(true);
                 setTimeout(() => {
                     var _a;

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

@@ -19,9 +19,9 @@ type UseGroupItemSelectionProps = {
     id: ItemId;
     disabled?: boolean;
 };
-export declare function useGroupItemSelection({ id, disabled, allChildIds }: UseGroupItemSelectionProps): {
+export declare function useGroupItemSelection({ id, allChildIds }: UseGroupItemSelectionProps): {
     checked: boolean | undefined;
-    isIndeterminate: boolean;
+    indeterminate: boolean;
     handleOnSelect: () => void;
 };
 export {};

package/dist/components/Items/hooks.js

@@ -1,5 +1,5 @@
 import { createElement as _createElement } from "react";
-import { createRef, useEffect, useMemo } from 'react';
+import { createRef, useMemo } from 'react';
 import { useNewListContext, useSelectionContext } from '../Lists/contexts';
 import { AccordionItem } from './AccordionItem';
 import { BaseItem } from './BaseItem';
@@ -44,34 +44,20 @@ export function useCreateBaseItems({ footerActiveElementsRefs }) {
         });
     }, [footerActiveElementsRefs]);
 }
-export function useGroupItemSelection({ id, disabled, allChildIds }) {
+export function useGroupItemSelection({ id, allChildIds }) {
     const { value, setValue, isSelectionMultiple } = useSelectionContext();
     const { flattenedItems } = useNewListContext();
     const baseChildIds = useMemo(() => allChildIds.filter(itemId => isBaseItemProps(flattenedItems[itemId])), [allChildIds, flattenedItems]);
-    const isIndeterminate = isSelectionMultiple
-        ? baseChildIds.some(childId => value === null || value === void 0 ? void 0 : value.includes(childId))
-        : baseChildIds.includes(value !== null && value !== void 0 ? value : '');
     const checked = isSelectionMultiple ? baseChildIds.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 indeterminate = isSelectionMultiple
+        ? !checked && baseChildIds.some(childId => value === null || value === void 0 ? void 0 : value.includes(childId))
+        : baseChildIds.includes(value !== null && value !== void 0 ? value : '');
     const handleOnSelect = () => {
         if (checked) {
             setValue === null || setValue === void 0 ? void 0 : setValue((value) => (value !== null && value !== void 0 ? value : []).filter(itemId => itemId !== id && !baseChildIds.includes(itemId)));
             return;
         }
-        if (isIndeterminate) {
-            setValue === null || setValue === void 0 ? void 0 : setValue((value) => Array.from(new Set([...(value !== null && value !== void 0 ? value : []), ...baseChildIds, id])));
-            return;
-        }
-        setValue === null || setValue === void 0 ? void 0 : setValue((value) => (value !== null && value !== void 0 ? value : []).concat([...baseChildIds, id !== null && id !== void 0 ? id : '']));
+        setValue === null || setValue === void 0 ? void 0 : setValue((value) => Array.from(new Set([...(value !== null && value !== void 0 ? value : []), ...baseChildIds])));
     };
-    return { checked, isIndeterminate, handleOnSelect };
+    return { checked, indeterminate, handleOnSelect };
 }

package/dist/helperComponents/ItemContent/ItemContent.js

@@ -19,5 +19,5 @@ export function ItemContent(_a) {
     var _b, _c;
     var { truncate, caption, description, option, className, disabled } = _a, rest = __rest(_a, ["truncate", "caption", "description", "option", "className", "disabled"]);
     const { size = 's' } = useNewListContext();
-    return (_jsxs("div", Object.assign({ className: cn(styles.content, className) }, extractSupportProps(rest), { "data-size": size !== null && size !== void 0 ? size : 's', "data-disabled": disabled !== null && disabled !== void 0 ? disabled : undefined, children: [_jsxs("div", { className: styles.headline, children: [_jsx("span", { className: styles.label, children: _jsx(TruncateString, { variant: truncate === null || truncate === void 0 ? void 0 : truncate.variant, text: String(option), maxLines: (_b = truncate === null || truncate === void 0 ? void 0 : truncate.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 = truncate === null || truncate === void 0 ? void 0 : truncate.description) !== null && _c !== void 0 ? _c : 2, "data-test-id": 'list__base-item-description' }) }))] })));
+    return (_jsxs("div", Object.assign({ className: cn(styles.content, className) }, extractSupportProps(rest), { "data-size": size !== null && size !== void 0 ? size : 's', "data-disabled": disabled || undefined, children: [_jsxs("div", { className: styles.headline, children: [_jsx("span", { className: styles.label, children: _jsx(TruncateString, { variant: truncate === null || truncate === void 0 ? void 0 : truncate.variant, text: String(option), maxLines: (_b = truncate === null || truncate === void 0 ? void 0 : truncate.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 = truncate === null || truncate === void 0 ? void 0 : truncate.description) !== null && _c !== void 0 ? _c : 2, "data-test-id": 'list__base-item-description' }) }))] })));
 }

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

@@ -110,7 +110,7 @@
   letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
   paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
 }
-.content[data-disabled] .option,
+.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

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

package/dist/helperComponents/ListEmptyState/ListEmptyState.js

@@ -6,13 +6,13 @@ export function ListEmptyState({ dataError, dataFiltered, hasNoItems, emptyState
         return null;
     }
     if (dataError) {
-        _jsx("div", { className: styles.listEmptyStateWrapper, children: _jsx(InfoBlock, Object.assign({}, emptyStates.errorDataState, { size: 's', align: 'vertical' })) });
+        return (_jsx("div", { className: styles.listEmptyStateWrapper, children: _jsx(InfoBlock, Object.assign({}, emptyStates.errorDataState, { size: 's', align: 'vertical' })) }));
     }
     if (dataFiltered && hasNoItems) {
-        _jsx("div", { className: styles.listEmptyStateWrapper, children: _jsx(InfoBlock, Object.assign({}, emptyStates.noResultsState, { size: 's', align: 'vertical', "data-test-id": 'list__no-results' })) });
+        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) {
-        _jsx("div", { className: styles.listEmptyStateWrapper, children: _jsx(InfoBlock, Object.assign({}, emptyStates.noDataState, { size: 's', align: 'vertical', "data-test-id": 'list__no-data' })) });
+        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/utils.js

@@ -13,8 +13,9 @@ export function kindFlattenItems({ items, prefix, parentId }) {
         let allChildIds = [];
         const closeChildIds = [];
         const { items } = item;
+        const childActiveParent = isGroupItemProps(item) ? parentId !== null && parentId !== void 0 ? parentId : '~main' : itemId;
         for (let idx = 0; idx < items.length; idx++) {
-            const { id, children } = flatten({ item: items[idx], idx, prefix: itemId, parentId: itemId });
+            const { id, children } = flatten({ item: items[idx], idx, prefix: itemId, parentId: childActiveParent });
             closeChildIds.push(id);
             allChildIds = allChildIds.concat(children);
         }

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "List",
-  "version": "0.9.2-preview-0a44b2fc.0",
+  "version": "0.9.2-preview-2855fb42.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -32,17 +32,17 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/divider": "3.0.3-preview-0a44b2fc.0",
-    "@snack-uikit/dropdown": "0.2.2-preview-0a44b2fc.0",
+    "@snack-uikit/divider": "3.0.3-preview-2855fb42.0",
+    "@snack-uikit/dropdown": "0.2.2-preview-2855fb42.0",
     "@snack-uikit/icons": "0.20.1",
-    "@snack-uikit/info-block": "0.3.4-preview-0a44b2fc.0",
-    "@snack-uikit/loaders": "0.5.2-preview-0a44b2fc.0",
-    "@snack-uikit/locale": "0.6.1-preview-0a44b2fc.0",
-    "@snack-uikit/scroll": "0.5.3-preview-0a44b2fc.0",
-    "@snack-uikit/search-private": "0.1.6-preview-0a44b2fc.0",
-    "@snack-uikit/toggles": "0.9.8-preview-0a44b2fc.0",
-    "@snack-uikit/truncate-string": "0.4.13-preview-0a44b2fc.0",
-    "@snack-uikit/utils": "3.2.1-preview-0a44b2fc.0",
+    "@snack-uikit/info-block": "0.3.4-preview-2855fb42.0",
+    "@snack-uikit/loaders": "0.5.2-preview-2855fb42.0",
+    "@snack-uikit/locale": "0.6.1-preview-2855fb42.0",
+    "@snack-uikit/scroll": "0.5.3-preview-2855fb42.0",
+    "@snack-uikit/search-private": "0.1.6-preview-2855fb42.0",
+    "@snack-uikit/toggles": "0.9.8-preview-2855fb42.0",
+    "@snack-uikit/truncate-string": "0.4.13-preview-2855fb42.0",
+    "@snack-uikit/utils": "3.2.1-preview-2855fb42.0",
     "classnames": "2.5.1",
     "fuzzy-search": "3.2.1",
     "merge-refs": "1.2.2",
@@ -54,5 +54,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "318167bcb09619d0d40263ec844b38b1014838f4"
+  "gitHead": "0fd00988eca0e7cc798a3b7a11fe1b306ebbc4e2"
 }

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

@@ -18,7 +18,7 @@ export function AccordionItem<Meta>({ items, id, disabled, allChildIds, ...optio
   const { openCollapseItems = [], toggleOpenCollapseItem } = useCollapseContext();
 
   const { flattenedItems } = useNewListContext<Meta>();
-  const { isIndeterminate, checked, handleOnSelect } = useGroupItemSelection({
+  const { indeterminate, checked, handleOnSelect } = useGroupItemSelection({
     items,
     id,
     disabled,
@@ -49,7 +49,8 @@ export function AccordionItem<Meta>({ items, id, disabled, allChildIds, ...optio
           onClick={handleItemClick}
           isParentNode
           onOpenNestedList={handleKeyDown}
-          indeterminate={isIndeterminate && !checked}
+          checked={checked}
+          indeterminate={indeterminate}
           onSelect={!disabled ? handleOnSelect : undefined}
         />
       }

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

@@ -20,6 +20,7 @@ import styles from './styles.module.scss';
 type AllBaseItemProps<Meta = AnyType> = BaseItemProps<Meta> &
   BaseItemPrivateProps & {
     indeterminate?: boolean;
+    checked?: boolean;
     onSelect?(): void;
     isParentNode?: boolean;
     onOpenNestedList?(e?: KeyboardEvent<HTMLElement>): void;
@@ -40,6 +41,7 @@ export function BaseItem({
   onKeyDown,
   onFocus,
   indeterminate,
+  checked: checkedProp,
   onSelect,
   onOpenNestedList,
   isParentNode,
@@ -56,7 +58,7 @@ export function BaseItem({
   const { forceUpdateActiveItemId } = useFocusListContext();
   const { value, onChange, mode, isSelectionSingle, isSelectionMultiple } = useSelectionContext();
 
-  const isChecked = isSelectionSingle ? value === id : value?.includes(id ?? '');
+  const isChecked = isSelectionSingle ? value === id : checkedProp ?? value?.includes(id ?? '');
 
   const handleChange = () => {
     onChange?.(id ?? '', meta);

package/src/components/Items/NextListItem/NextListItem.tsx

@@ -60,7 +60,7 @@ export function NextListItem<Meta = AnyType>({
     [handleListKeyDownFactory, ids, expandedIds, id, forceUpdateActiveItemId],
   );
 
-  const { isIndeterminate, checked, handleOnSelect } = useGroupItemSelection({ items, id, disabled, allChildIds });
+  const { indeterminate, checked, handleOnSelect } = useGroupItemSelection({ items, id, disabled, allChildIds });
 
   const handleOutsideClick = useCallback(() => {
     forceUpdateActiveItemId?.('~drop-focus');
@@ -108,7 +108,8 @@ export function NextListItem<Meta = AnyType>({
         expandIcon={<ChevronRightSVG />}
         id={id}
         isParentNode
-        indeterminate={isIndeterminate && !checked}
+        indeterminate={indeterminate}
+        checked={checked}
         onOpenNestedList={() => {
           setOpen(true);
           setTimeout(() => {

package/src/components/Items/hooks.tsx

@@ -1,4 +1,4 @@
-import { createRef, RefObject, useEffect, useMemo } from 'react';
+import { createRef, RefObject, useMemo } from 'react';
 
 import { useNewListContext, useSelectionContext } from '../Lists/contexts';
 import { AccordionItem } from './AccordionItem';
@@ -83,7 +83,7 @@ type UseGroupItemSelectionProps = {
   disabled?: boolean;
 };
 
-export function useGroupItemSelection({ id, disabled, allChildIds }: UseGroupItemSelectionProps) {
+export function useGroupItemSelection({ id, allChildIds }: UseGroupItemSelectionProps) {
   const { value, setValue, isSelectionMultiple } = useSelectionContext();
   const { flattenedItems } = useNewListContext();
 
@@ -92,21 +92,11 @@ export function useGroupItemSelection({ id, disabled, allChildIds }: UseGroupIte
     [allChildIds, flattenedItems],
   );
 
-  const isIndeterminate = isSelectionMultiple
-    ? baseChildIds.some(childId => value?.includes(childId))
-    : baseChildIds.includes(value ?? '');
   const checked = isSelectionMultiple ? baseChildIds.every(childId => value?.includes(childId)) : undefined;
 
-  useEffect(() => {
-    if (isSelectionMultiple) {
-      if (checked && !value?.includes(id)) {
-        setValue?.((value: ItemId[]) => (value ?? []).concat([id ?? '']));
-      }
-      if (!checked && value?.includes(id)) {
-        setValue?.((value: ItemId[]) => (value ?? []).filter(itemId => itemId !== id));
-      }
-    }
-  }, [checked, disabled, id, isSelectionMultiple, setValue, value]);
+  const indeterminate = isSelectionMultiple
+    ? !checked && baseChildIds.some(childId => value?.includes(childId))
+    : baseChildIds.includes(value ?? '');
 
   const handleOnSelect = () => {
     if (checked) {
@@ -114,13 +104,8 @@ export function useGroupItemSelection({ id, disabled, allChildIds }: UseGroupIte
       return;
     }
 
-    if (isIndeterminate) {
-      setValue?.((value: ItemId[]) => Array.from(new Set([...(value ?? []), ...baseChildIds, id])));
-      return;
-    }
-
-    setValue?.((value: ItemId[]) => (value ?? []).concat([...baseChildIds, id ?? '']));
+    setValue?.((value: ItemId[]) => Array.from(new Set([...(value ?? []), ...baseChildIds])));
   };
 
-  return { checked, isIndeterminate, handleOnSelect };
+  return { checked, indeterminate, handleOnSelect };
 }

package/src/helperComponents/ItemContent/ItemContent.tsx

@@ -35,7 +35,7 @@ export function ItemContent({
       className={cn(styles.content, className)}
       {...extractSupportProps(rest)}
       data-size={size ?? 's'}
-      data-disabled={disabled ?? undefined}
+      data-disabled={disabled || undefined}
     >
       <div className={styles.headline}>
         <span className={styles.label}>

package/src/helperComponents/ItemContent/styles.module.scss

@@ -69,7 +69,7 @@ $typography: (
   }
 
   &[data-disabled] {
-    .option,
+    .label,
     .description,
     .caption {
       color: $sys-neutral-text-disabled;

package/src/helperComponents/ListEmptyState/ListEmptyState.tsx

@@ -22,21 +22,27 @@ export function ListEmptyState({ dataError, dataFiltered, hasNoItems, emptyState
   }
 
   if (dataError) {
-    <div className={styles.listEmptyStateWrapper}>
-      <InfoBlock {...emptyStates.errorDataState} size='s' align='vertical' />
-    </div>;
+    return (
+      <div className={styles.listEmptyStateWrapper}>
+        <InfoBlock {...emptyStates.errorDataState} size='s' align='vertical' />
+      </div>
+    );
   }
 
   if (dataFiltered && hasNoItems) {
-    <div className={styles.listEmptyStateWrapper}>
-      <InfoBlock {...emptyStates.noResultsState} size='s' align='vertical' data-test-id='list__no-results' />
-    </div>;
+    return (
+      <div className={styles.listEmptyStateWrapper}>
+        <InfoBlock {...emptyStates.noResultsState} size='s' align='vertical' data-test-id='list__no-results' />
+      </div>
+    );
   }
 
   if (!dataFiltered && hasNoItems) {
-    <div className={styles.listEmptyStateWrapper}>
-      <InfoBlock {...emptyStates.noDataState} size='s' align='vertical' data-test-id='list__no-data' />
-    </div>;
+    return (
+      <div className={styles.listEmptyStateWrapper}>
+        <InfoBlock {...emptyStates.noDataState} size='s' align='vertical' data-test-id='list__no-data' />
+      </div>
+    );
   }
 
   return null;

package/src/utils.ts

@@ -52,9 +52,10 @@ export function kindFlattenItems<Meta = AnyType>({ items, prefix, parentId }: Ki
     const closeChildIds: Array<number | string> = [];
 
     const { items } = item;
+    const childActiveParent = isGroupItemProps<Meta>(item) ? parentId ?? '~main' : itemId;
 
     for (let idx = 0; idx < items.length; idx++) {
-      const { id, children } = flatten({ item: items[idx], idx, prefix: itemId, parentId: itemId });
+      const { id, children } = flatten({ item: items[idx], idx, prefix: itemId, parentId: childActiveParent });
 
       closeChildIds.push(id);
       allChildIds = allChildIds.concat(children);