@cloud-ru/ds-list 1.0.0

package/dist/esm/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/esm/components/Items/SimpleItem/types.d.ts

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

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

@@ -0,0 +1 @@
+export {};

package/dist/esm/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/esm/components/Items/SimpleItem/utils.js

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

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

@@ -0,0 +1,23 @@
+import { RefObject } from 'react';
+import { Flatten, FlattenBaseItem, ItemId } from './types.js';
+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/esm/components/Items/hooks.js

@@ -0,0 +1,125 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useHierarchicalSelection } from '@cloud-ru/ds-utils';
+import { createRef, useMemo } from 'react';
+import { ITEM_PREFIXES } from '../../constants.js';
+import { Separator } from '../../helperComponents/index.js';
+import { getFooterItemId } from '../../utils.js';
+import { useNewListContext, useSelectionContext } from '../Lists/contexts/index.js';
+import { AccordionItem } from './AccordionItem/index.js';
+import { BaseItem } from './BaseItem/index.js';
+import { GroupSelectItem } from './GroupSelectItem/index.js';
+import { NextListItem } from './NextListItem/index.js';
+import { SimpleGroupBlock, SimpleItem } from './SimpleItem/index.js';
+import { isAccordionItem, isGroupItem, isGroupSelectItem, isNextListItem, isSimpleItem } from './utils.js';
+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 (isGroupItem(flattenItem) ||
+            (!isSelectionMultiple && 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 && isSimpleItem(child));
+            });
+            const isSortableGroup = isGroupItem(flattenItem) && sortableChildIds.length > 0;
+            const innerItemsJSX = getRenderItems({
+                focusCloseChildIds: items,
+                focusFlattenItems,
+                flattenItems,
+                isSelectionMultiple,
+                groupId: isSortableGroup ? originalId : groupId,
+            });
+            if (isSortableGroup) {
+                return (_jsx(SimpleGroupBlock, { id: originalId, label: flattenItem.label, beforeContent: flattenItem.beforeContent, truncate: flattenItem.truncate, divider: flattenItem.divider, groupVariant: flattenItem.groupVariant, rowIds: sortableChildIds, children: innerItemsJSX }, key));
+            }
+            return [
+                _jsx(Separator, { label: flattenItem.label, beforeContent: flattenItem.beforeContent, truncate: flattenItem.truncate, divider: flattenItem.divider, groupVariant: flattenItem.groupVariant }, key + '_separator'),
+                ...innerItemsJSX,
+            ];
+        }
+        if (isGroupSelectItem(flattenItem)) {
+            return _createElement(GroupSelectItem, { ...flattenItem, items: items, itemRef: itemRef, key: key });
+        }
+        if (isAccordionItem(flattenItem)) {
+            return _createElement(AccordionItem, { ...flattenItem, items: items, itemRef: itemRef, key: key });
+        }
+        if (isNextListItem(flattenItem)) {
+            return _createElement(NextListItem, { ...flattenItem, focusId: id, items: items, itemRef: itemRef, key: key });
+        }
+        if (isSimpleItem(flattenItem)) {
+            return _createElement(SimpleItem, { ...flattenItem, items: items, itemRef: itemRef, groupId: groupId, key: key });
+        }
+        return _createElement(BaseItem, { ...flattenItem, itemRef: itemRef, key: key });
+    });
+}
+export function useRenderItems(focusCloseChildIds) {
+    const { focusFlattenItems, flattenItems } = useNewListContext();
+    const { isSelectionMultiple } = useSelectionContext();
+    return useMemo(() => getRenderItems({ flattenItems, focusFlattenItems, focusCloseChildIds, isSelectionMultiple }), [flattenItems, focusCloseChildIds, focusFlattenItems, isSelectionMultiple]);
+}
+export function useCreateBaseItems({ footerActiveElementsRefs }) {
+    return useMemo(() => ({
+        searchItem: {
+            itemRef: createRef(),
+            id: ITEM_PREFIXES.search,
+            parentId: ITEM_PREFIXES.default,
+            items: [],
+            allChildIds: [],
+        },
+        footerItems: footerActiveElementsRefs?.map((itemRef, idx) => ({
+            id: getFooterItemId(idx),
+            itemRef,
+            parentId: ITEM_PREFIXES.default,
+            items: [],
+            allChildIds: [],
+        })) ?? [],
+    }), [footerActiveElementsRefs]);
+}
+export function useGroupItemSelection({ id, allChildIds }) {
+    const selection = useSelectionContext();
+    const { value, isSelectionMultiple } = selection;
+    const { getSelectionState, toggleSelection } = useHierarchicalSelection({ includeParentsInValue: false });
+    // group-select работает только в multiple-режиме — там setValue оперирует ItemId[].
+    const setMultipleValue = selection.isSelectionMultiple ? selection.setValue : undefined;
+    const { flattenItems } = useNewListContext();
+    const baseChildIds = useMemo(() => allChildIds.filter(itemId => {
+        const item = flattenItems[itemId];
+        return item && !('type' in item);
+    }), [allChildIds, flattenItems]);
+    const enableChildIds = useMemo(() => baseChildIds.filter(itemId => {
+        const item = flattenItems[itemId];
+        return item && !('type' in item) && !item.disabled;
+    }), [baseChildIds, flattenItems]);
+    const selectionState = 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/esm/components/Items/index.d.ts

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

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

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

package/dist/esm/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));
+}

package/dist/esm/components/Items/types.d.ts

@@ -0,0 +1,168 @@
+import { TruncateStringProps } from '@cloud-ru/ds-truncate-string';
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+import { FocusEvent, KeyboardEvent, MouseEvent, ReactNode, RefObject } from 'react';
+import { ITEM_TYPE } from '../../constants.js';
+import { ItemContentProps } from '../../helperComponents/index.js';
+import { ItemType, ScrollProps } from '../../types.js';
+/** Идентификатор элемента списка */
+export type ItemId = string | number;
+type ItemContent = ItemContentProps;
+export type BaseItem = WithSupportProps<{
+    /**
+     * Слот до основного контента
+     * @type ReactElement
+     */
+    beforeContent?: ReactNode;
+    /**
+     * Слот после основного контента
+     * @type ReactElement
+     */
+    afterContent?: ReactNode;
+    /**
+     * Основной контент айтема
+     */
+    content?: ItemContent | ReactNode;
+    /** Колбек обработки клика */
+    onClick?(e: MouseEvent<HTMLElement>): void;
+    /** Колбек обработки нажатия кнопки мыши */
+    onMouseDown?(e: MouseEvent<HTMLElement>): void;
+    /** Колбек обработки нажатия клавиши */
+    onKeyDown?(e: KeyboardEvent<HTMLElement>): void;
+    /** Колбек обработки фокуса */
+    onFocus?(e: FocusEvent<HTMLElement>): void;
+    /** Колбек обработки блюра */
+    onBlur?(e: FocusEvent<HTMLElement>): void;
+    /** Уникальный идентификатор */
+    id?: ItemId;
+    /** Флаг неактивности элемента */
+    disabled?: boolean;
+    /** Скрыть элемент из списка (не рендерится и выпадает из навигации) */
+    hidden?: boolean;
+    /** Ссылка на DOM-элемент айтема */
+    itemRef?: RefObject<HTMLElement>;
+    /** CSS-класс */
+    className?: string;
+    /**
+     * Флаг отображения отключения реакции на любое css состояние (hover/focus и тд)
+     * <br>
+     * Так же элемент пропадает из навигации с клавиатуры, и не может быть выбран (selection)
+     */
+    inactive?: boolean;
+    /**
+     * Флаг отображения состояния выбранного элемента через switch
+     */
+    switch?: boolean;
+    /**
+     * Флаг отображения иконки у чекбоксов
+     */
+    showSwitchIcon?: boolean;
+    /** Рендер-обёртка вокруг айтема (например, для проксирования в `Tooltip`/`Link`) */
+    itemWrapRender?(item: ReactNode): ReactNode;
+    /** Управляемое состояние выбранности айтема */
+    checked?: boolean;
+}>;
+type BaseItemWithoutNonGroup = Omit<BaseItem, 'switch' | 'inactive'>;
+export type Item = BaseItem | AccordionItem | NextListItem | GroupItem | GroupSelectItem;
+export type AccordionItem = BaseItemWithoutNonGroup & {
+    items: Item[];
+    type: typeof ITEM_TYPE.Collapse;
+};
+export type NextListItem = BaseItemWithoutNonGroup & ScrollProps & {
+    items: Item[];
+    type: typeof ITEM_TYPE.NextList;
+    /** Колбек смены состояния вложенного списка (открыт/закрыт) */
+    onSublistOpenChanged?(open: boolean, id?: ItemId): void;
+    /** Состояние загрузки вложенного списка — показывается спиннер вместо элементов */
+    loading?: boolean;
+    /** Загрузка вложенного списка завершилась ошибкой — показывается `errorDataState` */
+    dataError?: boolean;
+    /** Вложенный список отфильтрован — пустой результат показывает `noResultsState`, а не `noDataState` */
+    dataFiltered?: boolean;
+    /** Сторона, с которой раскрывается вложенный список относительно элемента */
+    placement?: 'right-start' | 'left-start' | 'left' | 'right' | 'left-end' | 'right-end';
+};
+type CommonGroupItem = {
+    /** Заголовок группы */
+    label?: string;
+    /** Слот иконки слева от label. */
+    beforeContent?: ReactNode;
+    /** Настройки усечения длинного заголовка группы */
+    truncate?: {
+        variant?: TruncateStringProps['variant'];
+    };
+    /** Визуальный стиль заголовка группы */
+    groupVariant?: 'subtitle' | 'subtitleTertiary';
+    /** Скрыть группу из списка */
+    hidden?: boolean;
+    /** Показать разделитель над группой */
+    divider?: boolean;
+};
+export type GroupItem = CommonGroupItem & {
+    items: Item[];
+    type: typeof ITEM_TYPE.Group;
+};
+export type GroupSelectItem = CommonGroupItem & {
+    items: Item[];
+    type: typeof ITEM_TYPE.GroupSelect;
+    selectButtonLabel?: string;
+    id?: ItemId;
+    itemRef?: RefObject<HTMLElement>;
+};
+type RequiredFields<T, K extends keyof T> = Required<Pick<T, K>> & Omit<T, K>;
+export type Flatten<T, K extends keyof T> = RequiredFields<T, K>;
+export type CommonFlattenProps = {
+    items: ItemId[];
+    allChildIds: ItemId[];
+};
+export type FlattenBaseItem = Flatten<BaseItem, 'id'>;
+export type FlattenNextListItem = Flatten<Omit<NextListItem, 'items'>, 'id'>;
+export type FlattenGroupListItem = Omit<GroupItem, 'items'> & {
+    id: ItemId;
+};
+export type FlattenGroupSelectListItem = Flatten<Omit<GroupSelectItem, 'items'>, 'id'>;
+export type FlattenAccordionItem = Flatten<Omit<AccordionItem, 'items'>, 'id'>;
+/**
+ * Строка `List`/`Droplist` в режиме drag&drop-переупорядочивания (проп `onItemsReorder`) —
+ * облегчённый аналог `BaseItem` без `type`-дискриминатора и без вложенности: не поддерживает
+ * `collapse`/`group-select`/`next-list`. `id` обязателен (нужен `@dnd-kit` как identity
+ * сортируемого элемента). Верхний уровень reorder-дерева описывает `ReorderItem` (строка или
+ * группа с заголовком); переупорядочивание идёт только среди «братьев» — строк одного уровня
+ * (внутри одной группы либо между строками без группы), перенос между группами не поддерживается,
+ * см. `reorderReorderItems`.
+ *
+ * `disabled` блокирует выбор, `Switch` и клик, но **не** ручку перетаскивания — порядок можно менять и у
+ * задизейбленных строк.
+ */
+export type SimpleItem = Flatten<BaseItem, 'id'>;
+/**
+ * Группа reorder-режима: заголовок (`label` и остальные поля `GroupItem`) + сортируемые строки
+ * `items`. Строки переставляются **внутри** группы, а сама группа переставляется среди других
+ * групп верхнего уровня (за ручку на заголовке) — поэтому у группы обязателен `id` (identity для
+ * `@dnd-kit`). Вложенность ограничена одним уровнем: в `items` только листовые `SimpleItem`.
+ */
+export type SimpleGroupItem = CommonGroupItem & {
+    /** Идентификатор группы — нужен `@dnd-kit` для переупорядочивания групп между собой. */
+    id: ItemId;
+    items: SimpleItem[];
+    type: typeof ITEM_TYPE.Group;
+};
+/** Верхнеуровневый элемент reorder-дерева (`onItemsReorder`): строка или группа с заголовком. */
+export type ReorderItem = SimpleItem | SimpleGroupItem;
+export type FlattenSimpleItem = FlattenBaseItem & CommonFlattenProps;
+export type FlattenItem = FlattenBaseItem | ((FlattenNextListItem | FlattenGroupListItem | FlattenAccordionItem | FlattenGroupSelectListItem | FlattenSimpleItem) & CommonFlattenProps);
+export type FocusFlattenItem = {
+    key: ItemId;
+    id: ItemId;
+    originalId: ItemId;
+    parentId?: ItemId;
+    itemRef?: RefObject<HTMLElement>;
+    type?: ItemType;
+    disabled?: boolean;
+} & CommonFlattenProps;
+export type ItemProps = Item;
+export type BaseItemProps = BaseItem;
+export type GroupItemProps = GroupItem;
+export type NextListItemProps = NextListItem;
+export type AccordionItemProps = AccordionItem;
+export type GroupSelectItemProps = GroupSelectItem;
+export {};

package/dist/esm/components/Items/types.js

@@ -0,0 +1 @@
+export {};