@cloud-ru/ds-list 1.0.0

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

@@ -0,0 +1,4 @@
+import { CommonFlattenProps, FlattenAccordionItem } from '../types';
+type AccordionItemProps = Omit<FlattenAccordionItem, 'type'> & CommonFlattenProps;
+export declare function AccordionItem({ id, disabled, allChildIds, items, ...option }: AccordionItemProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccordionItem = AccordionItem;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const system_1 = require("@cloud-ru/ds-icons/interface/system");
+const react_1 = require("react");
+const constants_1 = require("../../../constants");
+const helperComponents_1 = require("../../../helperComponents");
+const contexts_1 = require("../../Lists/contexts");
+const BaseItem_1 = require("../BaseItem");
+const hooks_1 = require("../hooks");
+function AccordionItem({ id, disabled, allChildIds, items, ...option }) {
+    const { level = 0 } = (0, contexts_1.useCollapseLevelContext)();
+    const { openCollapseItems = [], toggleOpenCollapseItem } = (0, contexts_1.useCollapseContext)();
+    const { value, isSelectionSingle, isSelectionMultiple } = (0, contexts_1.useSelectionContext)();
+    const { indeterminate, handleOnSelect, checked: checkedProp, } = (0, hooks_1.useGroupItemSelection)({
+        items,
+        id,
+        disabled,
+        allChildIds,
+    });
+    const isOpen = Boolean(openCollapseItems.includes(id ?? ''));
+    const checked = Boolean((indeterminate && !isOpen && isSelectionSingle && value && allChildIds.includes(value)) ||
+        (isSelectionMultiple && checkedProp));
+    const handleKeyDown = (0, react_1.useCallback)(() => {
+        toggleOpenCollapseItem?.(id ?? '');
+    }, [id, toggleOpenCollapseItem]);
+    const itemsJSX = (0, hooks_1.useRenderItems)(items);
+    // Раскрытие привязано к явной кнопке-триггеру `groupIndicator` (шеврон справа) и
+    // ТОЛЬКО переключает collapse — `option.onClick` сюда не зовём, иначе у потребителя,
+    // который вешает на onClick собственный toggle, выходит двойное переключение.
+    // Клик по телу строки (выбор/навигация) идёт через `option.onClick` в BaseItem.
+    const handleExpandIconClick = () => {
+        toggleOpenCollapseItem?.(id ?? '');
+    };
+    return ((0, jsx_runtime_1.jsx)(helperComponents_1.CollapseBlockPrivate, { header: (0, jsx_runtime_1.jsx)(BaseItem_1.BaseItem, { ...option, id: id, disabled: disabled, open: isOpen, expandIcon: isOpen ? (0, jsx_runtime_1.jsx)(system_1.ChevronUpSVG, {}) : (0, jsx_runtime_1.jsx)(system_1.ChevronDownSVG, {}), onExpandIconClick: handleExpandIconClick, isParentNode: true, onOpenNestedList: handleKeyDown, checked: checked, indeterminate: indeterminate, onSelect: !disabled ? handleOnSelect : undefined }), expanded: isOpen, "data-test-id": `${constants_1.TEST_IDS.accordionItem}-${id}`, children: (0, jsx_runtime_1.jsx)(contexts_1.CollapseLevelContext.Provider, { value: { level: level + 1 }, children: itemsJSX }) }));
+}

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

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

package/dist/cjs/components/Items/AccordionItem/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("./AccordionItem"), exports);

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

@@ -0,0 +1,24 @@
+import { KeyboardEvent, MouseEvent, ReactNode } from 'react';
+import { FlattenBaseItem } from '../types';
+type AllBaseItemProps = FlattenBaseItem & {
+    expandIcon?: ReactNode;
+    open?: boolean;
+    indeterminate?: boolean;
+    onSelect?(): void;
+    isParentNode?: boolean;
+    onOpenNestedList?(e?: KeyboardEvent<HTMLElement>): void;
+    /**
+     * Клик по явной кнопке-триггеру `groupIndicator` (шеврон справа), открывающей/закрывающей
+     * вложенный список. Если передан — шеврон рендерится как отдельная интерактивная кнопка
+     * со своим state-layer'ом, а клик по телу строки больше не переключает раскрытие.
+     */
+    onExpandIconClick?(e: MouseEvent<HTMLElement>): void;
+    /**
+     * Слот ручки drag&drop (Figma `centeredWrapper`) — рендерится первым в строке, перед
+     * маркером/чекбоксом. Интерактивность (обработчики `@dnd-kit`) и содержимое (иконка)
+     * приходят снаружи — `BaseItem` только позиционирует слот, ничего не знает про DnD.
+     */
+    dragHandle?: ReactNode;
+};
+export declare function BaseItem({ beforeContent, afterContent, content, onClick, onMouseDown, id, expandIcon, disabled, open, itemRef, switch: switchProp, onKeyDown, onFocus, indeterminate, checked: checkedProp, onSelect, onOpenNestedList, onExpandIconClick, isParentNode, className, inactive, itemWrapRender, dragHandle, ...rest }: AllBaseItemProps): string | number | boolean | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export {};

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

@@ -0,0 +1,118 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BaseItem = BaseItem;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const toggles_1 = require("@cloud-ru/ds-toggles");
+const utils_1 = require("@cloud-ru/ds-utils");
+const classnames_1 = __importDefault(require("classnames"));
+const constants_1 = require("../../../constants");
+const helperComponents_1 = require("../../../helperComponents");
+const contexts_1 = require("../../Lists/contexts");
+const styles_module_scss_1 = __importDefault(require('../styles.module.css'));
+const utils_2 = require("../utils");
+const constants_2 = require("./constants");
+const styles_module_scss_2 = __importDefault(require('./styles.module.css'));
+function BaseItem({ beforeContent, afterContent, content, onClick, onMouseDown, id, expandIcon, disabled, open, itemRef, switch: switchProp, onKeyDown, onFocus, indeterminate, checked: checkedProp, onSelect, onOpenNestedList, onExpandIconClick, isParentNode, className, inactive, itemWrapRender, dragHandle, ...rest }) {
+    const interactive = !inactive;
+    const { size = constants_1.DEFAULT_SIZE, marker, contentRender, firstItemId, focusFlattenItems } = (0, contexts_1.useNewListContext)();
+    const { level = 0 } = (0, contexts_1.useCollapseLevelContext)();
+    const { closeDroplist, closeDroplistOnItemClick } = (0, contexts_1.useOpenListContext)();
+    const { value, onChange, mode, isSelectionSingle, isSelectionMultiple } = (0, contexts_1.useSelectionContext)();
+    const isChecked = isSelectionSingle ? (checkedProp ?? value === id) : (checkedProp ?? value?.includes(id ?? ''));
+    const handleChange = () => {
+        onChange?.(id);
+    };
+    const handleItemMouseDown = (e) => {
+        if (disabled)
+            return;
+        onMouseDown?.(e);
+    };
+    const handleItemFocus = (e) => {
+        onFocus?.(e);
+        e.stopPropagation();
+    };
+    const handleCheckboxChange = () => {
+        if (isParentNode && onSelect) {
+            onSelect();
+        }
+        else {
+            handleChange();
+        }
+    };
+    const handleItemClick = (e) => {
+        if (disabled) {
+            return;
+        }
+        // Активация элемента: клик мышью и Enter/Space с клавиатуры дают одинаковый эффект.
+        // `onClick` в публичном API типизирован под `MouseEvent` (это семантически клик по
+        // пункту меню), поэтому keyboard-событие пробрасывается под тем же типом.
+        onClick?.(e);
+        if (interactive && !isParentNode) {
+            handleChange();
+        }
+        if (!isSelectionMultiple && closeDroplistOnItemClick) {
+            closeDroplist();
+        }
+    };
+    const handleItemKeyDown = (e) => {
+        onKeyDown?.(e);
+        if (e.key === 'ArrowRight' && onOpenNestedList) {
+            onOpenNestedList(e);
+            e.preventDefault();
+            e.stopPropagation();
+            return;
+        }
+        if (e.key === 'Enter' || e.key === ' ') {
+            if (isSelectionMultiple && isParentNode && onSelect) {
+                onSelect();
+            }
+            // Повторяем клик по элементу: `handleItemClick` сам вызывает `handleChange` /
+            // `closeDroplist`. Отдельный `handleChange` здесь не нужен — иначе в multiple-режиме
+            // выбор переключался бы дважды (toggle + откат) и Enter не менял бы состояние.
+            !isParentNode && handleItemClick(e);
+            e.stopPropagation();
+            e.preventDefault();
+        }
+    };
+    const handleCheckboxClick = (e) => {
+        if (isParentNode) {
+            e.stopPropagation();
+        }
+    };
+    const handleExpandIconClick = (e) => {
+        if (disabled) {
+            return;
+        }
+        // Триггер раскрытия изолирован от клика по строке: всплытие останавливаем,
+        // чтобы клик по шеврону не активировал выбор/навигацию пункта.
+        e.stopPropagation();
+        e.preventDefault();
+        onExpandIconClick?.(e);
+    };
+    const props = (0, utils_1.extractSupportProps)(rest);
+    let contentNode;
+    if (content && (0, utils_2.isContentItem)(content)) {
+        contentNode = contentRender?.({ id, content, disabled }) ?? (0, jsx_runtime_1.jsx)(helperComponents_1.ItemContent, { disabled: disabled, ...content });
+    }
+    else if ((0, utils_2.isPrimitiveContent)(content)) {
+        // Примитивный content — шорткат `{ label: content }`: рендерим через ItemContent,
+        // чтобы строка получила размерную высоту, а не схлопывалась до высоты текста.
+        contentNode = (0, jsx_runtime_1.jsx)(helperComponents_1.ItemContent, { disabled: disabled, label: content });
+    }
+    else {
+        contentNode = (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_2.default.content, children: [" ", content, " "] });
+    }
+    const stateLayerState = isSelectionSingle && isChecked && !switchProp && !isParentNode
+        ? 'activatedOnBackground'
+        : 'emptyNeutralOnBackground';
+    const itemJSX = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.itemWrapper, styles_module_scss_2.default.innerWrapper, className), "data-inactive": inactive || undefined, "data-disabled": disabled || undefined, "data-variant": mode || undefined, "data-checked": (isParentNode && isChecked) || (!isParentNode && isChecked && !switchProp) || undefined, children: [(0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.stateLayer, "aria-hidden": true, "data-state": stateLayerState }), (0, jsx_runtime_1.jsxs)("li", { "data-type": 'outside', role: 'menuitem', "data-test-id": props['data-test-id'] || `${constants_1.TEST_IDS.baseItem}_${id}`, ref: itemRef, className: (0, classnames_1.default)(styles_module_scss_1.default.listItem, styles_module_scss_2.default.droplistItem), "data-size": size, onClick: handleItemClick, onMouseDown: handleItemMouseDown, tabIndex: firstItemId && id === focusFlattenItems[firstItemId]?.originalId ? 0 : -1, "data-non-pointer": (inactive && !onClick) || undefined, "data-variant": mode || undefined, "data-open": open || undefined, onKeyDown: handleItemKeyDown, onFocus: handleItemFocus, style: { '--level': level }, "data-level-one": level === 1 || undefined, "data-level-more-one": level > 1 || undefined, "data-checked": (isParentNode && (indeterminate || isChecked)) || (isChecked && !switchProp) || undefined, children: [dragHandle && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_2.default.dragHandle, children: dragHandle }), !switchProp && isSelectionSingle && marker && !isParentNode && interactive && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_2.default.markerContainer, "data-test-id": constants_1.TEST_IDS.baseItemMarker })), !switchProp && isSelectionMultiple && interactive && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_2.default.checkbox, children: (0, jsx_runtime_1.jsx)(toggles_1.Checkbox, { size: constants_2.TOGGLE_SIZE_MAP[size], disabled: disabled, tabIndex: -1, onChange: isParentNode ? handleCheckboxChange : undefined, checked: isChecked, "data-test-id": constants_1.TEST_IDS.baseItemCheckbox, onClick: handleCheckboxClick, indeterminate: indeterminate }) })), beforeContent && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_2.default.beforeContent, children: beforeContent }), contentNode, afterContent && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_2.default.afterContent, children: afterContent }), switchProp && interactive && ((0, jsx_runtime_1.jsx)(toggles_1.Switch, { size: constants_2.TOGGLE_SIZE_MAP[size], disabled: disabled, checked: isChecked, "data-test-id": constants_1.TEST_IDS.baseItemSwitch })), !switchProp &&
+                        expandIcon &&
+                        (onExpandIconClick ? ((0, jsx_runtime_1.jsxs)("button", { type: 'button', className: styles_module_scss_2.default.groupIndicator, "data-size": size, "data-open": open || undefined, "data-test-id": constants_1.TEST_IDS.groupIndicator, tabIndex: -1, disabled: disabled, onClick: handleExpandIconClick, onMouseDown: e => e.stopPropagation(), children: [(0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_2.default.groupIndicatorState, "aria-hidden": true }), expandIcon] })) : ((0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_2.default.expandableIcon, children: expandIcon })))] })] }));
+    if (!itemWrapRender) {
+        return itemJSX;
+    }
+    return itemWrapRender(itemJSX);
+}

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

@@ -0,0 +1,3 @@
+import { CheckboxProps } from '@cloud-ru/ds-toggles';
+import { Size } from '../../../types';
+export declare const TOGGLE_SIZE_MAP: Record<Size, NonNullable<CheckboxProps['size']>>;

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TOGGLE_SIZE_MAP = void 0;
+exports.TOGGLE_SIZE_MAP = {
+    s: 'xs',
+    m: 's',
+    l: 's',
+};

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

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

package/dist/cjs/components/Items/BaseItem/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("./BaseItem"), exports);

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

@@ -0,0 +1,312 @@
+@charset "UTF-8";
+.checkbox{
+  display:inline-flex;
+  flex-grow:0;
+  flex-shrink:0;
+  align-items:center;
+  justify-content:center;
+  box-sizing:content-box;
+}
+
+.beforeContent,
+.afterContent,
+.dragHandle{
+  display:inline-flex;
+  flex-grow:0;
+  flex-shrink:0;
+  align-items:center;
+  justify-content:center;
+  box-sizing:content-box;
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+}
+.beforeContent svg,
+.afterContent svg,
+.dragHandle svg{
+  width:100%;
+  max-width:100%;
+  height:100%;
+  max-height:100%;
+}
+
+.dragHandle{
+  cursor:grab;
+}
+.dragHandle:active{
+  cursor:grabbing;
+}
+.dragHandle button{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  width:100%;
+  height:100%;
+  padding:0;
+  border:none;
+  color:inherit;
+  -webkit-appearance:none;
+     -moz-appearance:none;
+          appearance:none;
+  background:transparent;
+}
+.dragHandle button:disabled{
+  cursor:not-allowed;
+}
+
+.afterContent{
+  color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
+}
+
+.expandableIcon{
+  display:flex;
+  align-items:center;
+  color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
+  fill:currentcolor;
+}
+
+.groupIndicator{
+  cursor:pointer;
+  position:relative;
+  display:flex;
+  flex-shrink:0;
+  align-items:center;
+  justify-content:center;
+  padding:0;
+  border:none;
+  border-radius:var(--sn-primitive-dimension-8, 8px);
+  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;
+  outline:none;
+}
+.groupIndicator svg{
+  position:relative;
+  z-index:1;
+  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));
+}
+.groupIndicator: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));
+}
+.groupIndicator[data-open]{
+  border-radius:var(--sn-primitive-dimension-2, 2px);
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+}
+
+.groupIndicatorState{
+  pointer-events:none;
+  position:absolute;
+  inset:0;
+  border-radius:inherit;
+  background:transparent;
+}
+
+.groupIndicator:hover > .groupIndicatorState{
+  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)));
+}
+
+.groupIndicator:active > .groupIndicatorState{
+  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)));
+}
+
+.groupIndicator[data-open] > .groupIndicatorState{
+  background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
+}
+
+.markerContainer{
+  pointer-events:none;
+  position:absolute;
+  top:0;
+  left:0;
+  box-sizing:border-box;
+  height:100%;
+}
+.markerContainer::before{
+  content:"";
+  display:block;
+  width:100%;
+  height:100%;
+}
+
+.droplistItem{
+  position:relative;
+  z-index:1;
+  width:100%;
+}
+.droplistItem[data-size=s][data-level-one], .droplistItem[data-size=s][data-level-more-one]{
+  padding-left:calc(var(--sn-list-anatomy-size-s-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px))) + var(--level, 0) * calc(var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px)) + var(--sn-list-anatomy-size-s-listItem-gap, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)))));
+}
+.droplistItem[data-size=s] .checkbox{
+  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));
+  padding-top:var(--sn-list-anatomy-size-s-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px)));
+  padding-bottom:var(--sn-list-anatomy-size-s-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px)));
+}
+.droplistItem[data-size=s] .beforeContent,
+.droplistItem[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));
+  padding-top:var(--sn-list-anatomy-size-s-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px)));
+  padding-bottom:var(--sn-list-anatomy-size-s-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px)));
+}
+.droplistItem[data-size=s] .afterContent{
+  min-width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
+  min-height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
+  padding-top:var(--sn-list-anatomy-size-s-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px)));
+  padding-bottom:var(--sn-list-anatomy-size-s-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px)));
+}
+.droplistItem[data-size=s] .expandableIcon{
+  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));
+}
+.droplistItem[data-size=s] .groupIndicator{
+  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:var(--sn-list-anatomy-size-s-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px)));
+}
+.droplistItem[data-size=s] .markerContainer{
+  padding-top:var(--sn-list-anatomy-size-s-listItem-markerWrapper-marker-paddingVertical, var(--sn-primitive-dimension-2, 2px));
+  padding-bottom:var(--sn-list-anatomy-size-s-listItem-markerWrapper-marker-paddingVertical, var(--sn-primitive-dimension-2, 2px));
+  width:var(--sn-list-anatomy-size-s-listItem-markerWrapper-width, var(--sn-primitive-dimension-2, 2px));
+}
+.droplistItem[data-size=s] .markerContainer::before{
+  border-radius:var(--sn-list-anatomy-size-s-listItem-markerWrapper-borderTopLeftRadius, var(--sn-primitive-dimension-0, 0)) var(--sn-list-anatomy-size-s-listItem-markerWrapper-borderTopRightRadius, var(--sn-primitive-dimension-2, 2px)) var(--sn-list-anatomy-size-s-listItem-markerWrapper-borderBottomRightRadius, var(--sn-primitive-dimension-2, 2px)) var(--sn-list-anatomy-size-s-listItem-markerWrapper-borderBottomLeftRadius, var(--sn-primitive-dimension-0, 0));
+}
+.droplistItem[data-size=s] .content{
+  font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-s, var(--sn-brand-font-fontWeight-light-regular-body-s, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
+  font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
+  letter-spacing:var(--sn-regular-body-s-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
+}
+.droplistItem[data-size=m][data-level-one], .droplistItem[data-size=m][data-level-more-one]{
+  padding-left:calc(var(--sn-list-anatomy-size-m-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px))) + var(--level, 0) * calc(var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)) + var(--sn-list-anatomy-size-m-listItem-gap, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px)))));
+}
+.droplistItem[data-size=m] .checkbox{
+  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));
+  padding-top:var(--sn-list-anatomy-size-m-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px)));
+  padding-bottom:var(--sn-list-anatomy-size-m-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px)));
+}
+.droplistItem[data-size=m] .beforeContent,
+.droplistItem[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));
+  padding-top:var(--sn-list-anatomy-size-m-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px)));
+  padding-bottom:var(--sn-list-anatomy-size-m-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px)));
+}
+.droplistItem[data-size=m] .afterContent{
+  min-width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+  min-height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+  padding-top:var(--sn-list-anatomy-size-m-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px)));
+  padding-bottom:var(--sn-list-anatomy-size-m-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px)));
+}
+.droplistItem[data-size=m] .expandableIcon{
+  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));
+}
+.droplistItem[data-size=m] .groupIndicator{
+  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:var(--sn-list-anatomy-size-m-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px)));
+}
+.droplistItem[data-size=m] .markerContainer{
+  padding-top:var(--sn-list-anatomy-size-m-listItem-markerWrapper-marker-paddingVertical, var(--sn-primitive-dimension-4, 4px));
+  padding-bottom:var(--sn-list-anatomy-size-m-listItem-markerWrapper-marker-paddingVertical, var(--sn-primitive-dimension-4, 4px));
+  width:var(--sn-list-anatomy-size-m-listItem-markerWrapper-width, var(--sn-primitive-dimension-2, 2px));
+}
+.droplistItem[data-size=m] .markerContainer::before{
+  border-radius:var(--sn-list-anatomy-size-m-listItem-markerWrapper-borderTopLeftRadius, var(--sn-primitive-dimension-0, 0)) var(--sn-list-anatomy-size-m-listItem-markerWrapper-borderTopRightRadius, var(--sn-primitive-dimension-2, 2px)) var(--sn-list-anatomy-size-m-listItem-markerWrapper-borderBottomRightRadius, var(--sn-primitive-dimension-2, 2px)) var(--sn-list-anatomy-size-m-listItem-markerWrapper-borderBottomLeftRadius, var(--sn-primitive-dimension-0, 0));
+}
+.droplistItem[data-size=m] .content{
+  font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+  font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
+  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
+}
+.droplistItem[data-size=l][data-level-one], .droplistItem[data-size=l][data-level-more-one]{
+  padding-left:calc(var(--sn-list-anatomy-size-l-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px))) + var(--level, 0) * calc(var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)) + var(--sn-list-anatomy-size-l-listItem-gap, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px)))));
+}
+.droplistItem[data-size=l] .checkbox{
+  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));
+  padding-top:var(--sn-list-anatomy-size-l-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px)));
+  padding-bottom:var(--sn-list-anatomy-size-l-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px)));
+}
+.droplistItem[data-size=l] .beforeContent,
+.droplistItem[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));
+  padding-top:var(--sn-list-anatomy-size-l-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px)));
+  padding-bottom:var(--sn-list-anatomy-size-l-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px)));
+}
+.droplistItem[data-size=l] .afterContent{
+  min-width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+  min-height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+  padding-top:var(--sn-list-anatomy-size-l-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px)));
+  padding-bottom:var(--sn-list-anatomy-size-l-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px)));
+}
+.droplistItem[data-size=l] .expandableIcon{
+  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));
+}
+.droplistItem[data-size=l] .groupIndicator{
+  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:var(--sn-list-anatomy-size-l-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px)));
+}
+.droplistItem[data-size=l] .markerContainer{
+  padding-top:var(--sn-list-anatomy-size-l-listItem-markerWrapper-marker-paddingVertical, var(--sn-primitive-dimension-6, 6px));
+  padding-bottom:var(--sn-list-anatomy-size-l-listItem-markerWrapper-marker-paddingVertical, var(--sn-primitive-dimension-6, 6px));
+  width:var(--sn-list-anatomy-size-l-listItem-markerWrapper-width, var(--sn-primitive-dimension-4, 4px));
+}
+.droplistItem[data-size=l] .markerContainer::before{
+  border-radius:var(--sn-list-anatomy-size-l-listItem-markerWrapper-borderTopLeftRadius, var(--sn-primitive-dimension-0, 0)) var(--sn-list-anatomy-size-l-listItem-markerWrapper-borderTopRightRadius, var(--sn-primitive-dimension-2, 2px)) var(--sn-list-anatomy-size-l-listItem-markerWrapper-borderBottomRightRadius, var(--sn-primitive-dimension-2, 2px)) var(--sn-list-anatomy-size-l-listItem-markerWrapper-borderBottomLeftRadius, var(--sn-primitive-dimension-0, 0));
+}
+.droplistItem[data-size=l] .content{
+  font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-l, var(--sn-brand-font-fontWeight-light-regular-body-l, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
+  font-size:var(--sn-regular-body-l-fontSize, var(--sn-density-typography-roleBody-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
+  letter-spacing:var(--sn-regular-body-l-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
+}
+.droplistItem[data-non-pointer]{
+  cursor:inherit;
+}
+
+.innerWrapper[data-disabled] .expandableIcon{
+  color:var(--sn-theme-color-available-version-textDisabled, var(--sn-brand-color-text-version-disabled, rgba(65, 66, 78, 0.3490196078)));
+}
+.innerWrapper[data-disabled] .groupIndicator{
+  cursor:not-allowed;
+  color:var(--sn-theme-color-available-version-textDisabled, var(--sn-brand-color-text-version-disabled, rgba(65, 66, 78, 0.3490196078)));
+}
+.innerWrapper[data-disabled] .beforeContent,
+.innerWrapper[data-disabled] .dragHandle{
+  opacity:var(--sn-theme-effect-opacity-disabled, 0.4);
+}
+.innerWrapper[data-disabled] .droplistItem{
+  cursor:not-allowed;
+}
+.innerWrapper[data-has-checked] .markerContainer::before, .innerWrapper[data-checked] .markerContainer::before{
+  background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
+}
+.innerWrapper[data-has-checked] .droplistItem:focus-visible, .innerWrapper[data-checked] .droplistItem:focus-visible{
+  outline-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
+}
+.innerWrapper[data-has-checked][data-disabled] .markerContainer::before, .innerWrapper[data-checked][data-disabled] .markerContainer::before{
+  background-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
+}
+
+.content{
+  overflow:hidden;
+  flex-grow:1;
+  flex-shrink:1;
+  box-sizing:border-box;
+}

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

@@ -0,0 +1,4 @@
+import { CommonFlattenProps, FlattenGroupSelectListItem } from '../types';
+type GroupSelectItemProps = Omit<FlattenGroupSelectListItem, 'type'> & CommonFlattenProps;
+export declare function GroupSelectItem({ label, beforeContent, truncate, divider, items, groupVariant, id, itemRef, allChildIds, selectButtonLabel, }: GroupSelectItemProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GroupSelectItem = GroupSelectItem;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const helperComponents_1 = require("../../../helperComponents");
+const hooks_1 = require("../hooks");
+function GroupSelectItem({ label, beforeContent, truncate, divider, items, groupVariant, id, itemRef, allChildIds, selectButtonLabel, }) {
+    const { indeterminate, checked, handleOnSelect } = (0, hooks_1.useGroupItemSelection)({
+        items,
+        id,
+        disabled: false,
+        allChildIds,
+    });
+    const itemsJSX = (0, hooks_1.useRenderItems)(items);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(helperComponents_1.Separator, { label: label, beforeContent: beforeContent, truncate: truncate, divider: divider, groupVariant: groupVariant, selectButton: {
+                    indeterminate,
+                    checked,
+                    itemRef,
+                    onClick: handleOnSelect,
+                    label: selectButtonLabel,
+                } }), itemsJSX] }));
+}

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

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

package/dist/cjs/components/Items/GroupSelectItem/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("./GroupSelectItem"), exports);

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

@@ -0,0 +1,2 @@
+import { NextListItemProps } from './types';
+export declare function NextListItem({ items, placement, id, scroll, scrollRef, disabled, onSublistOpenChanged, allChildIds, loading, dataError, dataFiltered, focusId, untouchableScrollbars, ...option }: NextListItemProps): import("react/jsx-runtime").JSX.Element;