@cloud-ru/ds-list 1.0.0

package/dist/cjs/components/Items/SimpleItem/components/SimpleItemOverlay/SimpleItemOverlay.d.ts

@@ -0,0 +1,15 @@
+import { FlattenSimpleItem } from '../../../types';
+export type SimpleItemOverlayProps = FlattenSimpleItem & {
+    /**
+     * Строка внутри копии блока группы (`SimpleGroupBlockOverlay`): поверхность и тень несёт сам
+     * блок, поэтому у строки их не дублируем.
+     */
+    bare?: boolean;
+};
+/**
+ * Презентационная копия строки для `DragOverlay` (`@dnd-kit`). Рендерится в портале над всей
+ * страницей и едет за курсором, поэтому строку не режет `overflow: hidden` контейнера `List`
+ * (см. [visual-regression] клиппинг). В отличие от `SimpleItem`, не вызывает `useSortable` —
+ * это неинтерактивный снимок: ручка и содержимое статичны, перетаскивание ведёт исходная строка.
+ */
+export declare function SimpleItemOverlay({ bare, ...item }: SimpleItemOverlayProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/Items/SimpleItem/components/SimpleItemOverlay/SimpleItemOverlay.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SimpleItemOverlay = SimpleItemOverlay;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const BaseItem_1 = require("../../../BaseItem");
+const styles_module_scss_1 = __importDefault(require('../../styles.module.css'));
+const OverlayDragHandle_1 = require("../OverlayDragHandle");
+/**
+ * Презентационная копия строки для `DragOverlay` (`@dnd-kit`). Рендерится в портале над всей
+ * страницей и едет за курсором, поэтому строку не режет `overflow: hidden` контейнера `List`
+ * (см. [visual-regression] клиппинг). В отличие от `SimpleItem`, не вызывает `useSortable` —
+ * это неинтерактивный снимок: ручка и содержимое статичны, перетаскивание ведёт исходная строка.
+ */
+function SimpleItemOverlay({ bare, ...item }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.item, "data-overlay": bare ? undefined : true, children: (0, jsx_runtime_1.jsx)(BaseItem_1.BaseItem, { ...item, dragHandle: (0, jsx_runtime_1.jsx)(OverlayDragHandle_1.OverlayDragHandle, {}) }) }));
+}

package/dist/cjs/components/Items/SimpleItem/components/SimpleItemOverlay/index.d.ts

@@ -0,0 +1 @@
+export * from './SimpleItemOverlay';

package/dist/cjs/components/Items/SimpleItem/components/SimpleItemOverlay/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./SimpleItemOverlay"), exports);

package/dist/cjs/components/Items/SimpleItem/components/index.d.ts

@@ -0,0 +1,4 @@
+export * from './SimpleGroupBlock';
+export * from './SimpleGroupBlockOverlay';
+export * from './SimpleItem';
+export * from './SimpleItemOverlay';

package/dist/cjs/components/Items/SimpleItem/components/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./SimpleGroupBlock"), exports);
+__exportStar(require("./SimpleGroupBlockOverlay"), exports);
+__exportStar(require("./SimpleItem"), exports);
+__exportStar(require("./SimpleItemOverlay"), exports);

package/dist/cjs/components/Items/SimpleItem/constants.d.ts

@@ -0,0 +1,7 @@
+import { ItemId } from '../types';
+/**
+ * Sortable-контейнер верхнего уровня reorder-режима. Строки без группы и сами группы лежат в одном
+ * контейнере (переставляются как «братья»), строки внутри группы — в контейнере со `id` группы.
+ * Кастомный `collisionDetection` в `ListPrivate` пускает drop только в пределах одного контейнера.
+ */
+export declare const REORDER_TOP_LEVEL: ItemId;

package/dist/cjs/components/Items/SimpleItem/constants.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.REORDER_TOP_LEVEL = void 0;
+/**
+ * Sortable-контейнер верхнего уровня reorder-режима. Строки без группы и сами группы лежат в одном
+ * контейнере (переставляются как «братья»), строки внутри группы — в контейнере со `id` группы.
+ * Кастомный `collisionDetection` в `ListPrivate` пускает drop только в пределах одного контейнера.
+ */
+exports.REORDER_TOP_LEVEL = '__reorder-top-level__';

package/dist/cjs/components/Items/SimpleItem/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components';
+export * from './types';

package/dist/cjs/components/Items/SimpleItem/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./components"), exports);
+__exportStar(require("./types"), exports);

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

@@ -0,0 +1,96 @@
+.item[data-dragging]{
+  position:relative;
+  z-index:1;
+  opacity:0.5;
+}
+.item[data-overlay]{
+  cursor:grabbing;
+  opacity:0.5;
+  background:var(--sn-theme-color-neutral-background2Level, var(--sn-brand-color-neutral-99, var(--sn-primitive-color-gray-99, #ffffff)));
+  box-shadow:var(--sn-boxShadow-elevation-level2, var(--sn-theme-effect-shadow-level2-layer1-positionX, 0) var(--sn-theme-effect-shadow-level2-layer1-positionY, 0) var(--sn-theme-effect-shadow-level2-layer1-blur, 4px) var(--sn-theme-effect-shadow-level2-layer1-speed, 0) var(--sn-theme-effect-shadow-layer1Color, rgba(0, 0, 0, 0.0784313725)), var(--sn-theme-effect-shadow-level2-layer2-positionX, 0) var(--sn-theme-effect-shadow-level2-layer2-positionY, 4px) var(--sn-theme-effect-shadow-level2-layer2-blur, 8px) var(--sn-theme-effect-shadow-level2-layer2-speed, 2px) var(--sn-theme-effect-shadow-layer2Color, rgba(0, 0, 0, 0.0784313725)));
+}
+
+.groupBlock[data-dragging]{
+  position:relative;
+  z-index:1;
+  opacity:0.5;
+}
+.groupBlock[data-overlay]{
+  cursor:grabbing;
+  opacity:0.5;
+  background:var(--sn-theme-color-neutral-background2Level, var(--sn-brand-color-neutral-99, var(--sn-primitive-color-gray-99, #ffffff)));
+  box-shadow:var(--sn-boxShadow-elevation-level2, var(--sn-theme-effect-shadow-level2-layer1-positionX, 0) var(--sn-theme-effect-shadow-level2-layer1-positionY, 0) var(--sn-theme-effect-shadow-level2-layer1-blur, 4px) var(--sn-theme-effect-shadow-level2-layer1-speed, 0) var(--sn-theme-effect-shadow-layer1Color, rgba(0, 0, 0, 0.0784313725)), var(--sn-theme-effect-shadow-level2-layer2-positionX, 0) var(--sn-theme-effect-shadow-level2-layer2-positionY, 4px) var(--sn-theme-effect-shadow-level2-layer2-blur, 8px) var(--sn-theme-effect-shadow-level2-layer2-speed, 2px) var(--sn-theme-effect-shadow-layer2Color, rgba(0, 0, 0, 0.0784313725)));
+}
+.groupBlock[data-reorder-boundary]{
+  background:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
+  box-shadow:inset 0 6px 12px -12px var(--sn-theme-color-blackout, var(--sn-brand-color-overlay-forLightMode-blackout, rgba(0, 0, 0, 0.3215686275))), inset 0 -6px 12px -12px var(--sn-theme-color-blackout, var(--sn-brand-color-overlay-forLightMode-blackout, rgba(0, 0, 0, 0.3215686275)));
+}
+
+.groupHeader{
+  display:flex;
+  align-items:center;
+}
+.groupHeader > :last-child{
+  flex:1 1 auto;
+  min-width:0;
+}
+.groupHeader[data-size=s]{
+  gap:var(--sn-list-anatomy-size-s-listItem-gap, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)));
+  padding-left:var(--sn-list-anatomy-size-s-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
+}
+.groupHeader[data-size=s] > :last-child{
+  margin-left:calc(-1 * var(--sn-list-anatomy-size-s-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px))));
+}
+.groupHeader[data-size=s] .dragHandle{
+  width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
+  height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
+  margin-top:calc(var(--sn-list-anatomy-size-s-subtitle-paddingTop, var(--sn-primitive-dimension-8, 8px)) - var(--sn-list-anatomy-size-s-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px))));
+}
+.groupHeader[data-size=m]{
+  gap:var(--sn-list-anatomy-size-m-listItem-gap, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px)));
+  padding-left:var(--sn-list-anatomy-size-m-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
+}
+.groupHeader[data-size=m] > :last-child{
+  margin-left:calc(-1 * var(--sn-list-anatomy-size-m-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px))));
+}
+.groupHeader[data-size=m] .dragHandle{
+  width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+  height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+  margin-top:calc(var(--sn-list-anatomy-size-m-subtitle-paddingTop, var(--sn-primitive-dimension-10, 10px)) - var(--sn-list-anatomy-size-m-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px))));
+}
+.groupHeader[data-size=l]{
+  gap:var(--sn-list-anatomy-size-l-listItem-gap, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px)));
+  padding-left:var(--sn-list-anatomy-size-l-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
+}
+.groupHeader[data-size=l] > :last-child{
+  margin-left:calc(-1 * var(--sn-list-anatomy-size-l-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px))));
+}
+.groupHeader[data-size=l] .dragHandle{
+  width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+  height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+  margin-top:calc(var(--sn-list-anatomy-size-l-subtitle-paddingTop, var(--sn-primitive-dimension-12, 12px)) - var(--sn-list-anatomy-size-l-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px))));
+}
+
+.dragHandle{
+  cursor:grab;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  padding:0;
+  border:none;
+  color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
+  -webkit-appearance:none;
+     -moz-appearance:none;
+          appearance:none;
+  background:transparent;
+}
+.dragHandle svg{
+  width:100%;
+  height:100%;
+}
+.dragHandle:active{
+  cursor:grabbing;
+}
+.dragHandle:disabled{
+  cursor:not-allowed;
+}

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

@@ -0,0 +1,3 @@
+import { SeparatorProps } from '../../../helperComponents';
+/** Поля заголовка группы, общие для сортируемого блока и его копии в `DragOverlay`. */
+export type GroupHeaderContent = Pick<SeparatorProps, 'label' | 'beforeContent' | 'truncate' | 'divider' | 'groupVariant'>;

package/dist/cjs/components/Items/SimpleItem/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/components/Items/SimpleItem/utils.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Отключает FLIP-анимацию перестановки после отпускания (общий контракт `SimpleItem` и `SimpleGroupBlock`).
+ * Порядок применяется синхронно через `onItemsReorder`; без флага `@dnd-kit` доигрывает `transform 200ms`
+ * из старого слота в новый — отпущенная строка дёргается обратно и уезжает на место.
+ */
+export declare function animateLayoutChanges(): boolean;

package/dist/cjs/components/Items/SimpleItem/utils.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.animateLayoutChanges = animateLayoutChanges;
+/**
+ * Отключает FLIP-анимацию перестановки после отпускания (общий контракт `SimpleItem` и `SimpleGroupBlock`).
+ * Порядок применяется синхронно через `onItemsReorder`; без флага `@dnd-kit` доигрывает `transform 200ms`
+ * из старого слота в новый — отпущенная строка дёргается обратно и уезжает на место.
+ */
+function animateLayoutChanges() {
+    return false;
+}

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

@@ -0,0 +1,23 @@
+import { RefObject } from 'react';
+import { Flatten, FlattenBaseItem, ItemId } from './types';
+export declare function useRenderItems(focusCloseChildIds?: ItemId[]): (JSX.Element | null)[];
+type UseCreateBaseItemsProps = {
+    search?: boolean;
+    footerActiveElementsRefs?: RefObject<HTMLElement>[];
+};
+export declare function useCreateBaseItems({ footerActiveElementsRefs }: UseCreateBaseItemsProps): {
+    searchItem: Flatten<FlattenBaseItem, 'itemRef'>;
+    footerItems: Flatten<FlattenBaseItem, 'itemRef'>[];
+};
+type UseGroupItemSelectionProps = {
+    allChildIds: ItemId[];
+    items: ItemId[];
+    id: ItemId;
+    disabled?: boolean;
+};
+export declare function useGroupItemSelection({ id, allChildIds }: UseGroupItemSelectionProps): {
+    checked: boolean | undefined;
+    indeterminate: boolean | undefined;
+    handleOnSelect: () => void;
+};
+export {};

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

@@ -0,0 +1,130 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRenderItems = useRenderItems;
+exports.useCreateBaseItems = useCreateBaseItems;
+exports.useGroupItemSelection = useGroupItemSelection;
+const react_1 = require("react");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("@cloud-ru/ds-utils");
+const react_2 = require("react");
+const constants_1 = require("../../constants");
+const helperComponents_1 = require("../../helperComponents");
+const utils_2 = require("../../utils");
+const contexts_1 = require("../Lists/contexts");
+const AccordionItem_1 = require("./AccordionItem");
+const BaseItem_1 = require("./BaseItem");
+const GroupSelectItem_1 = require("./GroupSelectItem");
+const NextListItem_1 = require("./NextListItem");
+const SimpleItem_1 = require("./SimpleItem");
+const utils_3 = require("./utils");
+function getRenderItems({ focusCloseChildIds, focusFlattenItems, flattenItems, isSelectionMultiple, groupId, }) {
+    if (!focusCloseChildIds) {
+        return [null];
+    }
+    return focusCloseChildIds.flatMap(id => {
+        const { itemRef, key, originalId, items } = focusFlattenItems[id];
+        const flattenItem = flattenItems[originalId];
+        if ((0, utils_3.isGroupItem)(flattenItem) ||
+            (!isSelectionMultiple && (0, utils_3.isGroupSelectItem)(flattenItem))) {
+            // Группа в reorder-режиме: её строки размечены `type: Simple`. Заголовок + строки оборачиваются
+            // в единый сортируемый блок `SimpleGroupBlock` — за ручку заголовка группа перетаскивается
+            // целиком (строки едут вместе), а строки внутри блока переставляются собственным
+            // `SortableContext`. Переупорядочивание строго по уровням, см. `reorderReorderItems`.
+            const sortableChildIds = items
+                .map(focusId => focusFlattenItems[focusId]?.originalId)
+                .filter((childId) => {
+                const child = childId != null ? flattenItems[childId] : undefined;
+                return Boolean(child && (0, utils_3.isSimpleItem)(child));
+            });
+            const isSortableGroup = (0, utils_3.isGroupItem)(flattenItem) && sortableChildIds.length > 0;
+            const innerItemsJSX = getRenderItems({
+                focusCloseChildIds: items,
+                focusFlattenItems,
+                flattenItems,
+                isSelectionMultiple,
+                groupId: isSortableGroup ? originalId : groupId,
+            });
+            if (isSortableGroup) {
+                return ((0, jsx_runtime_1.jsx)(SimpleItem_1.SimpleGroupBlock, { id: originalId, label: flattenItem.label, beforeContent: flattenItem.beforeContent, truncate: flattenItem.truncate, divider: flattenItem.divider, groupVariant: flattenItem.groupVariant, rowIds: sortableChildIds, children: innerItemsJSX }, key));
+            }
+            return [
+                (0, jsx_runtime_1.jsx)(helperComponents_1.Separator, { label: flattenItem.label, beforeContent: flattenItem.beforeContent, truncate: flattenItem.truncate, divider: flattenItem.divider, groupVariant: flattenItem.groupVariant }, key + '_separator'),
+                ...innerItemsJSX,
+            ];
+        }
+        if ((0, utils_3.isGroupSelectItem)(flattenItem)) {
+            return (0, react_1.createElement)(GroupSelectItem_1.GroupSelectItem, { ...flattenItem, items: items, itemRef: itemRef, key: key });
+        }
+        if ((0, utils_3.isAccordionItem)(flattenItem)) {
+            return (0, react_1.createElement)(AccordionItem_1.AccordionItem, { ...flattenItem, items: items, itemRef: itemRef, key: key });
+        }
+        if ((0, utils_3.isNextListItem)(flattenItem)) {
+            return (0, react_1.createElement)(NextListItem_1.NextListItem, { ...flattenItem, focusId: id, items: items, itemRef: itemRef, key: key });
+        }
+        if ((0, utils_3.isSimpleItem)(flattenItem)) {
+            return (0, react_1.createElement)(SimpleItem_1.SimpleItem, { ...flattenItem, items: items, itemRef: itemRef, groupId: groupId, key: key });
+        }
+        return (0, react_1.createElement)(BaseItem_1.BaseItem, { ...flattenItem, itemRef: itemRef, key: key });
+    });
+}
+function useRenderItems(focusCloseChildIds) {
+    const { focusFlattenItems, flattenItems } = (0, contexts_1.useNewListContext)();
+    const { isSelectionMultiple } = (0, contexts_1.useSelectionContext)();
+    return (0, react_2.useMemo)(() => getRenderItems({ flattenItems, focusFlattenItems, focusCloseChildIds, isSelectionMultiple }), [flattenItems, focusCloseChildIds, focusFlattenItems, isSelectionMultiple]);
+}
+function useCreateBaseItems({ footerActiveElementsRefs }) {
+    return (0, react_2.useMemo)(() => ({
+        searchItem: {
+            itemRef: (0, react_2.createRef)(),
+            id: constants_1.ITEM_PREFIXES.search,
+            parentId: constants_1.ITEM_PREFIXES.default,
+            items: [],
+            allChildIds: [],
+        },
+        footerItems: footerActiveElementsRefs?.map((itemRef, idx) => ({
+            id: (0, utils_2.getFooterItemId)(idx),
+            itemRef,
+            parentId: constants_1.ITEM_PREFIXES.default,
+            items: [],
+            allChildIds: [],
+        })) ?? [],
+    }), [footerActiveElementsRefs]);
+}
+function useGroupItemSelection({ id, allChildIds }) {
+    const selection = (0, contexts_1.useSelectionContext)();
+    const { value, isSelectionMultiple } = selection;
+    const { getSelectionState, toggleSelection } = (0, utils_1.useHierarchicalSelection)({ includeParentsInValue: false });
+    // group-select работает только в multiple-режиме — там setValue оперирует ItemId[].
+    const setMultipleValue = selection.isSelectionMultiple ? selection.setValue : undefined;
+    const { flattenItems } = (0, contexts_1.useNewListContext)();
+    const baseChildIds = (0, react_2.useMemo)(() => allChildIds.filter(itemId => {
+        const item = flattenItems[itemId];
+        return item && !('type' in item);
+    }), [allChildIds, flattenItems]);
+    const enableChildIds = (0, react_2.useMemo)(() => baseChildIds.filter(itemId => {
+        const item = flattenItems[itemId];
+        return item && !('type' in item) && !item.disabled;
+    }), [baseChildIds, flattenItems]);
+    const selectionState = (0, react_2.useMemo)(() => isSelectionMultiple
+        ? getSelectionState({
+            nodeId: id,
+            childIds: baseChildIds,
+            selectedIds: value ?? [],
+        })
+        : undefined, [baseChildIds, getSelectionState, id, isSelectionMultiple, value]);
+    const checked = selectionState?.checked;
+    const indeterminate = isSelectionMultiple ? selectionState?.indeterminate : baseChildIds.includes(value ?? '');
+    const handleOnSelect = () => {
+        if (!isSelectionMultiple) {
+            return;
+        }
+        setMultipleValue?.(prev => toggleSelection({
+            nodeId: id,
+            descendantIds: baseChildIds,
+            selectableDescendantIds: enableChildIds,
+            childIds: baseChildIds,
+            selectedIds: prev ?? [],
+        }));
+    };
+    return { checked, indeterminate, handleOnSelect };
+}

package/dist/cjs/components/Items/index.d.ts

@@ -0,0 +1,5 @@
+export * from './hooks';
+export * from './types';
+export * from './utils';
+export * from './SearchItem';
+export * from './PinGroupItem';

package/dist/cjs/components/Items/index.js

@@ -0,0 +1,21 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./hooks"), exports);
+__exportStar(require("./types"), exports);
+__exportStar(require("./utils"), exports);
+__exportStar(require("./SearchItem"), exports);
+__exportStar(require("./PinGroupItem"), exports);

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

@@ -0,0 +1,168 @@
+@charset "UTF-8";
+.stateLayer{
+  visibility:initial;
+}
+
+.itemWrapper{
+  position:relative;
+  z-index:0;
+  min-width:100%;
+  margin:0;
+  padding:0;
+}
+.itemWrapper .stateLayer{
+  position:absolute;
+  inset:0;
+  border-radius:inherit;
+}
+.itemWrapper .stateLayer[data-state=borderOnBackground]{
+  border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
+  border-style:solid;
+  border-width:var(--sn-primitive-strokeWeight-strokeRegular, 1px);
+}
+.itemWrapper .stateLayer[data-state=emptyNeutralOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(120, 123, 138, 0)));
+}
+.itemWrapper .stateLayer[data-state=activatedOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, var(--sn-brandRole-color-brandA-backgroundActivatedDefault, rgba(56, 159, 116, 0.1490196078))));
+}
+.itemWrapper .stateLayer[data-state=versionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
+}
+.itemWrapper .stateLayer[data-state=emptyVersionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-defaultEmpty-filled, rgba(0, 0, 0, 0));
+}
+.itemWrapper .stateLayer[data-state=inversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-default-filled, rgba(255, 255, 255, 0.1019607843));
+}
+.itemWrapper .stateLayer[data-state=emptyInversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-defaultEmpty-filled, rgba(255, 255, 255, 0));
+}
+.itemWrapper .stateLayer[data-state=emptyDarkOnAccent]{
+  background:var(--sn-theme-color-material-stateLayer-darkOnAccent-defaultEmpty-filled, rgba(0, 0, 0, 0));
+}
+@media (hover: hover){
+  .itemWrapper:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground]{
+    border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(159, 166, 198, 0.6509803922)));
+  }
+  .itemWrapper:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground]{
+    background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(188, 195, 220, 0.1490196078)));
+  }
+  .itemWrapper:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
+    background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
+  }
+  .itemWrapper:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
+  }
+  .itemWrapper:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
+  }
+  .itemWrapper:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
+  }
+  .itemWrapper:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
+  }
+  .itemWrapper:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent]{
+    background:var(--sn-theme-color-material-stateLayer-darkOnAccent-hovered-filled, rgba(0, 0, 0, 0.0588235294));
+  }
+}
+.itemWrapper{
+}
+.itemWrapper[data-loading] .stateLayer[data-state=borderOnBackground], .itemWrapper:active:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground], .itemWrapper[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground]{
+  border-color:var(--sn-theme-color-material-stateLayer-neutral-border-pressed-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-pressed-borderColor, rgba(159, 166, 198, 0.8)));
+}
+.itemWrapper[data-loading] .stateLayer[data-state=emptyNeutralOnBackground], .itemWrapper:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground], .itemWrapper[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(188, 195, 220, 0.3019607843)));
+}
+.itemWrapper[data-loading] .stateLayer[data-state=activatedOnBackground], .itemWrapper:active:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], .itemWrapper[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, var(--sn-brandRole-color-brandA-backgroundActivatedPressed, rgba(56, 159, 116, 0.4509803922))));
+}
+.itemWrapper[data-loading] .stateLayer[data-state=versionOnColor], .itemWrapper:active:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], .itemWrapper[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
+}
+.itemWrapper[data-loading] .stateLayer[data-state=emptyVersionOnColor], .itemWrapper:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor], .itemWrapper[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
+}
+.itemWrapper[data-loading] .stateLayer[data-state=inversionOnColor], .itemWrapper:active:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor], .itemWrapper[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
+}
+.itemWrapper[data-loading] .stateLayer[data-state=emptyInversionOnColor], .itemWrapper:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor], .itemWrapper[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
+}
+.itemWrapper[data-loading] .stateLayer[data-state=emptyDarkOnAccent], .itemWrapper:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent], .itemWrapper[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent]{
+  background:var(--sn-theme-color-material-stateLayer-darkOnAccent-pressed-filled, rgba(0, 0, 0, 0.1215686275));
+}
+.itemWrapper[data-disabled], .itemWrapper:disabled{
+  cursor:not-allowed;
+  background-color:transparent;
+  outline:none;
+}
+.itemWrapper:not([data-inactive], [data-disabled])[data-open] .stateLayer[data-state=emptyNeutralOnBackground], .itemWrapper:not([data-inactive], [data-disabled])[data-focused] .stateLayer[data-state=emptyNeutralOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(188, 195, 220, 0.1490196078)));
+}
+.itemWrapper:not([data-inactive], [data-disabled])[data-open] .stateLayer[data-state=activatedOnBackground], .itemWrapper:not([data-inactive], [data-disabled])[data-focused] .stateLayer[data-state=activatedOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
+}
+.itemWrapper:not([data-inactive], [data-disabled]):active .stateLayer[data-state=emptyNeutralOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(188, 195, 220, 0.3019607843)));
+}
+.itemWrapper:not([data-inactive], [data-disabled]):active .stateLayer[data-state=activatedOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, var(--sn-brandRole-color-brandA-backgroundActivatedPressed, rgba(56, 159, 116, 0.4509803922))));
+}
+.itemWrapper[data-inactive]:hover .stateLayer[data-state=emptyNeutralOnBackground],
+.itemWrapper[data-inactive]:hover .stateLayer[data-state=activatedOnBackground],
+.itemWrapper[data-inactive]:active .stateLayer[data-state=emptyNeutralOnBackground],
+.itemWrapper[data-inactive]:active .stateLayer[data-state=activatedOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(120, 123, 138, 0)));
+}
+
+.listItem{
+  cursor:pointer;
+  position:relative;
+  display:flex;
+  flex-direction:row;
+  align-items:flex-start;
+  box-sizing:border-box;
+  width:-moz-max-content;
+  width:max-content;
+  min-width:100%;
+  margin:0;
+  padding:0;
+  border:none;
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+  text-align:start;
+  -webkit-appearance:unset;
+     -moz-appearance:unset;
+          appearance:unset;
+  background-color:transparent;
+  outline:none;
+}
+.listItem[data-size=s]{
+  padding-left:var(--sn-list-anatomy-size-s-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
+  padding-right:var(--sn-list-anatomy-size-s-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
+  gap:var(--sn-list-anatomy-size-s-listItem-gap, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)));
+  padding-top:var(--sn-list-anatomy-size-s-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px)));
+  padding-bottom:var(--sn-list-anatomy-size-s-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px)));
+  border-radius:var(--sn-list-anatomy-size-s-listItem-borderRadius, var(--sn-brand-anatomy-radius-listItem-s, var(--sn-primitive-dimension-0, 0px)));
+}
+.listItem[data-size=m]{
+  padding-left:var(--sn-list-anatomy-size-m-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
+  padding-right:var(--sn-list-anatomy-size-m-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
+  gap:var(--sn-list-anatomy-size-m-listItem-gap, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px)));
+  padding-top:var(--sn-list-anatomy-size-m-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px)));
+  padding-bottom:var(--sn-list-anatomy-size-m-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px)));
+  border-radius:var(--sn-list-anatomy-size-m-listItem-borderRadius, var(--sn-brand-anatomy-radius-listItem-s, var(--sn-primitive-dimension-0, 0px)));
+}
+.listItem[data-size=l]{
+  padding-left:var(--sn-list-anatomy-size-l-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
+  padding-right:var(--sn-list-anatomy-size-l-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
+  gap:var(--sn-list-anatomy-size-l-listItem-gap, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px)));
+  padding-top:var(--sn-list-anatomy-size-l-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px)));
+  padding-bottom:var(--sn-list-anatomy-size-l-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px)));
+  border-radius:var(--sn-list-anatomy-size-l-listItem-borderRadius, var(--sn-brand-anatomy-radius-listItem-l, var(--sn-primitive-dimension-0, 0px)));
+}
+.listItem:not([data-inactive], [data-disabled])[data-focused], .listItem:not([data-inactive], [data-disabled]):focus-visible{
+  outline:var(--sn-theme-color-available-complementary, #000000) solid var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
+  outline-offset:calc(0px - var(--sn-primitive-strokeWeight-strokeSemiBold, 2px));
+}