@alfalab/core-components 38.3.0 → 39.0.0

package/sortable-list/cssm/components/item/index.module.css

@@ -0,0 +1,83 @@
+:root {
+} /* deprecated */ :root {
+    --color-light-graphic-primary: #0b1f35;
+    --color-light-graphic-secondary: #6d7986;
+} :root {
+} :root {
+} :root {
+    --shadow-s: 0 0 8px rgba(11, 31, 53, 0.04), 0 4px 8px rgba(11, 31, 53, 0.08);
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+    --gap-3xs: 2px;
+    --gap-2xs: 4px;
+    --gap-xs: 8px;
+    --gap-s: 12px;
+    --gap-m: 16px;
+    --gap-l: 20px;
+} :root {
+} :root {
+} .component {
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    min-height: 48px
+} .component:hover .icon {
+            color: var(--color-light-graphic-primary);
+        } .activator-cell:not(.disabled) {
+    cursor: grab
+} .activator-cell:not(.disabled).dragOverlay {
+        cursor: grabbing;
+    } .activator-control:not(.disabled) .icon {
+        cursor: grab;
+    } .activator-control:not(.disabled).dragOverlay .icon {
+        cursor: grabbing;
+    } .content {
+    flex: 1;
+} .icon {
+    flex-shrink: 0;
+    color: var(--color-light-graphic-secondary);
+} .dragging {
+    opacity: 0;
+} .dragOverlay {
+    box-shadow: var(--shadow-s);
+    animation: pop 200ms ease
+} .dragOverlay .icon {
+        color: var(--color-light-graphic-primary);
+    } .control-left-padding-3xs {
+        padding-left: var(--gap-3xs);
+    } .control-right-padding-3xs {
+        padding-right: var(--gap-3xs);
+    } .control-left-padding-2xs {
+        padding-left: var(--gap-2xs);
+    } .control-right-padding-2xs {
+        padding-right: var(--gap-2xs);
+    } .control-left-padding-xs {
+        padding-left: var(--gap-xs);
+    } .control-right-padding-xs {
+        padding-right: var(--gap-xs);
+    } .control-left-padding-s {
+        padding-left: var(--gap-s);
+    } .control-right-padding-s {
+        padding-right: var(--gap-s);
+    } .control-left-padding-m {
+        padding-left: var(--gap-m);
+    } .control-right-padding-m {
+        padding-right: var(--gap-m);
+    } .control-left-padding-l {
+        padding-left: var(--gap-l);
+    } .control-right-padding-l {
+        padding-right: var(--gap-l);
+    } @keyframes pop {
+    from {
+        box-shadow: none;
+    }
+    to {
+        box-shadow: var(--shadow-s);
+    }
+}

package/sortable-list/cssm/index-3885b0d7.d.ts

@@ -0,0 +1,3 @@
+declare const isClient: () => boolean;
+export { isClient };
+export * from "./Components-2c44a427";

package/sortable-list/cssm/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Component";
+export type { SortableListProps } from "./types";

package/sortable-list/cssm/index.js

@@ -0,0 +1,16 @@
+var Component = require('./Component.js');
+require('tslib');
+require('react');
+require('@dnd-kit/core');
+require('@dnd-kit/sortable');
+require('classnames');
+require('./Components-2c44a427.js');
+require('@dnd-kit/utilities');
+require('@alfalab/icons-glyph/DragMIcon');
+require('./components/item/index.module.css');
+require('./utils.js');
+require('./index.module.css');
+
+
+
+exports.SortableList = Component.SortableList;

package/sortable-list/cssm/index.module.css

@@ -0,0 +1,87 @@
+:root {
+} /* deprecated */ :root {
+    --color-light-bg-primary: #fff;
+    --color-light-bg-secondary: #f3f4f5;
+} :root {
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+    --border-radius-m: 8px;
+    --border-radius-l: 12px;
+    --border-radius-xl: 16px;
+} :root {
+    --gap-3xs: 2px;
+    --gap-2xs: 4px;
+    --gap-xs: 8px;
+    --gap-s: 12px;
+    --gap-m: 16px;
+    --gap-l: 20px;
+} :root {
+} :root {
+} .component {
+    box-sizing: border-box;
+} .primary {
+    background: var(--color-light-bg-primary);
+} .secondary {
+    background: var(--color-light-bg-secondary);
+} .padding-top-3xs {
+        padding-top: var(--gap-3xs);
+    } .padding-bottom-3xs {
+        padding-bottom: var(--gap-3xs);
+    } .padding-left-3xs {
+        padding-left: var(--gap-3xs);
+    } .padding-right-3xs {
+        padding-right: var(--gap-3xs);
+    } .padding-top-2xs {
+        padding-top: var(--gap-2xs);
+    } .padding-bottom-2xs {
+        padding-bottom: var(--gap-2xs);
+    } .padding-left-2xs {
+        padding-left: var(--gap-2xs);
+    } .padding-right-2xs {
+        padding-right: var(--gap-2xs);
+    } .padding-top-xs {
+        padding-top: var(--gap-xs);
+    } .padding-bottom-xs {
+        padding-bottom: var(--gap-xs);
+    } .padding-left-xs {
+        padding-left: var(--gap-xs);
+    } .padding-right-xs {
+        padding-right: var(--gap-xs);
+    } .padding-top-s {
+        padding-top: var(--gap-s);
+    } .padding-bottom-s {
+        padding-bottom: var(--gap-s);
+    } .padding-left-s {
+        padding-left: var(--gap-s);
+    } .padding-right-s {
+        padding-right: var(--gap-s);
+    } .padding-top-m {
+        padding-top: var(--gap-m);
+    } .padding-bottom-m {
+        padding-bottom: var(--gap-m);
+    } .padding-left-m {
+        padding-left: var(--gap-m);
+    } .padding-right-m {
+        padding-right: var(--gap-m);
+    } .padding-top-l {
+        padding-top: var(--gap-l);
+    } .padding-bottom-l {
+        padding-bottom: var(--gap-l);
+    } .padding-left-l {
+        padding-left: var(--gap-l);
+    } .padding-right-l {
+        padding-right: var(--gap-l);
+    } .border-radius-m {
+        border-radius: var(--border-radius-m);
+    } .border-radius-l {
+        border-radius: var(--border-radius-l);
+    } .border-radius-xl {
+        border-radius: var(--border-radius-xl);
+    }

package/sortable-list/cssm/types.d.ts

@@ -0,0 +1,92 @@
+/// <reference types="react" />
+import React from 'react';
+import { Announcements, DragEndEvent, DragStartEvent, UniqueIdentifier } from '@dnd-kit/core';
+type View = 'primary' | 'secondary';
+type ActivatorNode = 'cell' | 'control';
+type Items = Array<{
+    id: UniqueIdentifier;
+    disabled?: boolean;
+}>;
+type BorderRadius = 'm' | 'l' | 'xl';
+type PaddingSize = '3xs' | '2xs' | 'xs' | 's' | 'm' | 'l';
+type PaddingObj = {
+    top?: PaddingSize;
+    right?: PaddingSize;
+    bottom?: PaddingSize;
+    left?: PaddingSize;
+};
+type ControlPosition = 'left' | 'right';
+type SortableItemProps = {
+    activatorNode: ActivatorNode;
+    controlPadding?: PaddingSize;
+    controlPosition: ControlPosition;
+    children: React.ReactNode;
+    className: string;
+    id: UniqueIdentifier;
+    isDragOverlay?: boolean;
+    disabled?: boolean;
+    dataTestId?: string;
+};
+type SortableListProps = {
+    /**
+     * Дополнительный класс на контейнер
+     */
+    className?: string;
+    /**
+     * Дополнительный класс на элемент списка
+     */
+    itemClassName?: string;
+    /**
+     * Отступ контрола от края
+     */
+    controlPadding?: PaddingSize;
+    /**
+     * Позиция контрола
+     */
+    controlPosition?: ControlPosition;
+    /**
+     * Рендер-функция элемента
+     */
+    renderItem: (item: Items[number]) => JSX.Element;
+    /**
+     * Список сортируемых идентификаторов
+     */
+    items: Items;
+    /**
+     * Отступы.
+     */
+    padding?: PaddingObj | PaddingSize;
+    /**
+     * BorderRadius элементов списка
+     */
+    borderRadius?: BorderRadius;
+    /**
+     * Вид
+     */
+    view?: View;
+    /**
+     * Активатор события перетаскивания. Либо элемент целиком, либо только контрол
+     */
+    activatorNode?: ActivatorNode;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Тексты объявления для screen reader
+     */
+    announcements?: Announcements;
+    /**
+     * Инструкция для screen reader
+     */
+    screenReaderInstructions?: string;
+    /**
+     * Коллбэк, вызываемый при начале процесса перетаскивания
+     */
+    onDragStart?: (event: DragStartEvent) => void;
+    /**
+     * Коллбэк, вызываемый по окончании перетаскивания
+     */
+    onDragEnd?: (event: DragEndEvent, items: Items) => void;
+};
+export { Items, SortableItemProps, SortableListProps };

package/sortable-list/cssm/types.js

@@ -0,0 +1 @@
+

package/sortable-list/cssm/utils.d.ts

@@ -0,0 +1,6 @@
+import { ClientRect, Modifier } from '@dnd-kit/core';
+import { Transform } from '@dnd-kit/utilities';
+declare const restrictToParentElement: Modifier;
+declare function restrictToBoundingRect(transform: Transform, rect: ClientRect, boundingRect: ClientRect): Transform;
+declare const restrictToVerticalAxis: Modifier;
+export { restrictToParentElement, restrictToBoundingRect, restrictToVerticalAxis };

package/sortable-list/cssm/utils.js

@@ -0,0 +1,33 @@
+var tslib = require('tslib');
+
+var restrictToParentElement = function (_a) {
+    var containerNodeRect = _a.containerNodeRect, draggingNodeRect = _a.draggingNodeRect, transform = _a.transform;
+    if (!draggingNodeRect || !containerNodeRect) {
+        return transform;
+    }
+    return restrictToBoundingRect(transform, draggingNodeRect, containerNodeRect);
+};
+function restrictToBoundingRect(transform, rect, boundingRect) {
+    var value = tslib.__assign({}, transform);
+    if (rect.top + transform.y <= boundingRect.top) {
+        value.y = boundingRect.top - rect.top;
+    }
+    else if (rect.bottom + transform.y >= boundingRect.top + boundingRect.height) {
+        value.y = boundingRect.top + boundingRect.height - rect.bottom;
+    }
+    if (rect.left + transform.x <= boundingRect.left) {
+        value.x = boundingRect.left - rect.left;
+    }
+    else if (rect.right + transform.x >= boundingRect.left + boundingRect.width) {
+        value.x = boundingRect.left + boundingRect.width - rect.right;
+    }
+    return value;
+}
+var restrictToVerticalAxis = function (_a) {
+    var transform = _a.transform;
+    return (tslib.__assign(tslib.__assign({}, transform), { x: 0 }));
+};
+
+exports.restrictToBoundingRect = restrictToBoundingRect;
+exports.restrictToParentElement = restrictToParentElement;
+exports.restrictToVerticalAxis = restrictToVerticalAxis;

package/sortable-list/esm/Component.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import React from 'react';
+import { SortableListProps } from "./types";
+declare const SortableList: React.ForwardRefExoticComponent<SortableListProps & React.RefAttributes<HTMLDivElement>>;
+export { SortableList };

package/sortable-list/esm/Component.js

@@ -0,0 +1,100 @@
+import { __rest, __assign } from 'tslib';
+import React, { forwardRef } from 'react';
+import { useSensors, useSensor, KeyboardSensor, TouchSensor, MouseSensor, DndContext, closestCenter, DragOverlay } from '@dnd-kit/core';
+import { SortableContext, verticalListSortingStrategy, arrayMove } from '@dnd-kit/sortable';
+import cn from 'classnames';
+import { g as getDataTestId, S as SortableItem } from './Components-8dcedeed.js';
+import { restrictToParentElement, restrictToVerticalAxis } from './utils.js';
+import '@dnd-kit/utilities';
+import '@alfalab/icons-glyph/DragMIcon';
+
+var styles = {"component":"sortable-list__component_1fybo","primary":"sortable-list__primary_1fybo","secondary":"sortable-list__secondary_1fybo","padding-top-3xs":"sortable-list__padding-top-3xs_1fybo","padding-bottom-3xs":"sortable-list__padding-bottom-3xs_1fybo","padding-left-3xs":"sortable-list__padding-left-3xs_1fybo","padding-right-3xs":"sortable-list__padding-right-3xs_1fybo","padding-top-2xs":"sortable-list__padding-top-2xs_1fybo","padding-bottom-2xs":"sortable-list__padding-bottom-2xs_1fybo","padding-left-2xs":"sortable-list__padding-left-2xs_1fybo","padding-right-2xs":"sortable-list__padding-right-2xs_1fybo","padding-top-xs":"sortable-list__padding-top-xs_1fybo","padding-bottom-xs":"sortable-list__padding-bottom-xs_1fybo","padding-left-xs":"sortable-list__padding-left-xs_1fybo","padding-right-xs":"sortable-list__padding-right-xs_1fybo","padding-top-s":"sortable-list__padding-top-s_1fybo","padding-bottom-s":"sortable-list__padding-bottom-s_1fybo","padding-left-s":"sortable-list__padding-left-s_1fybo","padding-right-s":"sortable-list__padding-right-s_1fybo","padding-top-m":"sortable-list__padding-top-m_1fybo","padding-bottom-m":"sortable-list__padding-bottom-m_1fybo","padding-left-m":"sortable-list__padding-left-m_1fybo","padding-right-m":"sortable-list__padding-right-m_1fybo","padding-top-l":"sortable-list__padding-top-l_1fybo","padding-bottom-l":"sortable-list__padding-bottom-l_1fybo","padding-left-l":"sortable-list__padding-left-l_1fybo","padding-right-l":"sortable-list__padding-right-l_1fybo","border-radius-m":"sortable-list__border-radius-m_1fybo","border-radius-l":"sortable-list__border-radius-l_1fybo","border-radius-xl":"sortable-list__border-radius-xl_1fybo"};
+require('./index.css');
+
+var DEFAULT_INSTRUCTION = 'Чтобы выбрать перетаскиваемый элемент, нажмите пробел.\n' +
+    'При перетаскивании используйте клавиши со стрелками для перемещения элемента.\n' +
+    'Снова нажмите пробел, чтобы переместить элемент в его новое положение или нажмите escape для отмены.';
+var DEFAULT_ANNOUNCEMENTS = {
+    onDragStart: function (_a) {
+        var active = _a.active;
+        return "\u0412\u044B\u0431\u0440\u0430\u043D \u044D\u043B\u0435\u043C\u0435\u043D\u0442 ".concat(active.id, ".");
+    },
+    onDragOver: function (_a) {
+        var active = _a.active, over = _a.over;
+        if (over) {
+            return "\u0412\u044B\u0431\u0440\u0430\u043D\u043D\u044B\u0439 \u044D\u043B\u0435\u043C\u0435\u043D\u0442 ".concat(active.id, " \u043D\u0430\u0445\u043E\u0434\u0438\u0442\u0441\u044F \u043D\u0430\u0434 \u044D\u043B\u0435\u043C\u0435\u043D\u0442\u043E\u043C ").concat(over.id, ".");
+        }
+        return "\u0412\u044B\u0431\u0440\u0430\u043D\u043D\u044B\u0439 \u044D\u043B\u0435\u043C\u0435\u043D\u0442 ".concat(active.id, " \u043D\u0430\u0445\u043E\u0434\u0438\u0442\u0441\u044F \u0437\u0430 \u043F\u0440\u0435\u0434\u0435\u043B\u0430\u043C\u0438 droppable \u0437\u043E\u043D\u044B.");
+    },
+    onDragEnd: function (_a) {
+        var active = _a.active, over = _a.over;
+        if (over) {
+            return "\u0412\u044B\u0431\u0440\u0430\u043D\u043D\u044B\u0439 \u044D\u043B\u0435\u043C\u0435\u043D\u0442 ".concat(active.id, " \u0431\u044B\u043B \u043F\u0435\u0440\u0435\u043C\u0435\u0449\u0435\u043D \u043D\u0430 \u043C\u0435\u0441\u0442\u043E ").concat(over.id);
+        }
+        return "\u0412\u044B\u0431\u0440\u0430\u043D\u043D\u044B\u0439 \u044D\u043B\u0435\u043C\u0435\u043D\u0442 ".concat(active.id, " \u043D\u0435 \u0431\u044B\u043B \u043F\u0435\u0440\u0435\u043C\u0435\u0449\u0435\u043D.");
+    },
+    onDragCancel: function () {
+        return 'Перемещение было отменено';
+    },
+};
+var SortableList = forwardRef(function (_a, ref) {
+    var _b;
+    var className = _a.className, itemClassName = _a.itemClassName, _c = _a.controlPosition, controlPosition = _c === void 0 ? 'right' : _c, controlPadding = _a.controlPadding, items = _a.items, renderItem = _a.renderItem, borderRadius = _a.borderRadius, _d = _a.activatorNode, activatorNode = _d === void 0 ? 'cell' : _d, _e = _a.view, view = _e === void 0 ? 'primary' : _e, padding = _a.padding, dataTestId = _a.dataTestId, _f = _a.announcements, announcements = _f === void 0 ? DEFAULT_ANNOUNCEMENTS : _f, _g = _a.screenReaderInstructions, screenReaderInstructions = _g === void 0 ? DEFAULT_INSTRUCTION : _g, onDragStart = _a.onDragStart, onDragEnd = _a.onDragEnd;
+    var _h = React.useState(null), activeId = _h[0], setActiveId = _h[1];
+    var sensors = useSensors(useSensor(KeyboardSensor), useSensor(TouchSensor), useSensor(MouseSensor));
+    var getPaddingClassName = function () {
+        var _a;
+        if (typeof padding === 'object') {
+            return cn((_a = {},
+                _a[styles["padding-top-".concat(padding.top)]] = padding.top,
+                _a[styles["padding-right-".concat(padding.right)]] = padding.right,
+                _a[styles["padding-bottom-".concat(padding.bottom)]] = padding.bottom,
+                _a[styles["padding-left-".concat(padding.left)]] = padding.left,
+                _a));
+        }
+        if (typeof padding === 'string') {
+            return cn(styles["padding-top-".concat(padding)], styles["padding-right-".concat(padding)], styles["padding-bottom-".concat(padding)], styles["padding-left-".concat(padding)]);
+        }
+        return undefined;
+    };
+    var commonClassName = cn(styles[view], (_b = {},
+        _b[styles["border-radius-".concat(borderRadius)]] = borderRadius,
+        _b));
+    var sortableItemClassName = cn(commonClassName, itemClassName);
+    var handleDragStart = function (event) {
+        var active = event.active;
+        setActiveId(active.id);
+        onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(event);
+    };
+    var handleDragEnd = function (event) {
+        var active = event.active, over = event.over;
+        if ((over === null || over === void 0 ? void 0 : over.id) && active.id !== over.id) {
+            var oldIndex = items.findIndex(function (item) { return item.id === active.id; });
+            var newIndex = items.findIndex(function (item) { return item.id === over.id; });
+            onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(event, arrayMove(items, oldIndex, newIndex));
+            return;
+        }
+        onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(event, items);
+        setActiveId(null);
+    };
+    var renderSortableItem = function (item, _a) {
+        _a.children; var restProps = __rest(_a, ["children"]);
+        return (React.createElement(SortableItem, __assign({ controlPadding: controlPadding, controlPosition: controlPosition, key: item.id, id: item.id, className: sortableItemClassName, activatorNode: activatorNode, disabled: item.disabled }, restProps), renderItem(item)));
+    };
+    var renderDragOverlay = function () {
+        var activeItem = items.find(function (item) { return item.id === activeId; });
+        if (activeItem) {
+            return renderSortableItem(activeItem, { isDragOverlay: true });
+        }
+        return null;
+    };
+    return (React.createElement(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragStart: handleDragStart, onDragEnd: handleDragEnd, modifiers: [restrictToParentElement, restrictToVerticalAxis], accessibility: {
+            announcements: announcements,
+            screenReaderInstructions: { draggable: screenReaderInstructions },
+        } },
+        React.createElement(SortableContext, { items: items, strategy: verticalListSortingStrategy },
+            React.createElement("div", { ref: ref, className: cn(styles.component, getPaddingClassName(), commonClassName, className), "data-test-id": getDataTestId(dataTestId, 'container') }, items.map(function (item) { return renderSortableItem(item, { dataTestId: dataTestId }); }))),
+        React.createElement(DragOverlay, null, activeId ? renderDragOverlay() : null)));
+});
+
+export { SortableList };

package/sortable-list/esm/Components-8dcedeed.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import React from 'react';
+import { SortableItemProps } from "./types";
+declare const getDataTestId: (dataTestId?: string, element?: string) => string | undefined;
+declare const SortableItem: React.FC<SortableItemProps>;
+export { getDataTestId, SortableItem };

package/sortable-list/esm/Components-8dcedeed.js

@@ -0,0 +1,48 @@
+import { __assign } from 'tslib';
+import React from 'react';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import cn from 'classnames';
+import { DragMIcon } from '@alfalab/icons-glyph/DragMIcon';
+
+var getDataTestId = function (dataTestId, element) {
+    var elementPart = element ? "-".concat(element.toLowerCase()) : '';
+    return dataTestId ? "".concat(dataTestId).concat(elementPart) : undefined;
+};
+
+var styles = {"component":"sortable-list__component_uiu7l","icon":"sortable-list__icon_uiu7l","activator-cell":"sortable-list__activator-cell_uiu7l","disabled":"sortable-list__disabled_uiu7l","dragOverlay":"sortable-list__dragOverlay_uiu7l","activator-control":"sortable-list__activator-control_uiu7l","content":"sortable-list__content_uiu7l","dragging":"sortable-list__dragging_uiu7l","pop":"sortable-list__pop_uiu7l","control-left-padding-3xs":"sortable-list__control-left-padding-3xs_uiu7l","control-right-padding-3xs":"sortable-list__control-right-padding-3xs_uiu7l","control-left-padding-2xs":"sortable-list__control-left-padding-2xs_uiu7l","control-right-padding-2xs":"sortable-list__control-right-padding-2xs_uiu7l","control-left-padding-xs":"sortable-list__control-left-padding-xs_uiu7l","control-right-padding-xs":"sortable-list__control-right-padding-xs_uiu7l","control-left-padding-s":"sortable-list__control-left-padding-s_uiu7l","control-right-padding-s":"sortable-list__control-right-padding-s_uiu7l","control-left-padding-m":"sortable-list__control-left-padding-m_uiu7l","control-right-padding-m":"sortable-list__control-right-padding-m_uiu7l","control-left-padding-l":"sortable-list__control-left-padding-l_uiu7l","control-right-padding-l":"sortable-list__control-right-padding-l_uiu7l"};
+require('./components/item/index.css');
+
+var SortableItem = function (_a) {
+    var _b;
+    var activatorNode = _a.activatorNode, controlPosition = _a.controlPosition, controlPadding = _a.controlPadding, children = _a.children, className = _a.className, id = _a.id, isDragOverlay = _a.isDragOverlay, disabled = _a.disabled, dataTestId = _a.dataTestId;
+    var _c = useSortable({
+        id: id,
+        disabled: disabled,
+    }), attributes = _c.attributes, listeners = _c.listeners, setNodeRef = _c.setNodeRef, setActivatorNodeRef = _c.setActivatorNodeRef, transform = _c.transform, transition = _c.transition, isDragging = _c.isDragging;
+    var isCellActivator = !isDragOverlay && activatorNode === 'cell';
+    var isControlActivator = !isDragOverlay && activatorNode === 'control';
+    var renderControl = function () {
+        var _a;
+        var hasRightPadding = controlPadding && controlPosition === 'right';
+        var hasLeftPadding = controlPadding && controlPosition === 'left';
+        return (React.createElement("div", __assign({ className: cn(styles.icon, (_a = {},
+                _a[styles["control-right-padding-".concat(controlPadding)]] = hasRightPadding,
+                _a[styles["control-left-padding-".concat(controlPadding)]] = hasLeftPadding,
+                _a)), ref: isControlActivator ? setActivatorNodeRef : undefined }, (isControlActivator ? listeners : null), (isControlActivator ? attributes : null)),
+            React.createElement(DragMIcon, { "aria-label": 'drag control' })));
+    };
+    return (React.createElement("div", __assign({}, (isCellActivator ? listeners : null), (isCellActivator ? attributes : null), { style: {
+            transform: CSS.Transform.toString(transform),
+            transition: transition,
+        }, className: cn(styles.component, styles["activator-".concat(activatorNode)], className, (_b = {},
+            _b[styles.disabled] = disabled,
+            _b[styles.dragging] = isDragging,
+            _b[styles.dragOverlay] = isDragOverlay,
+            _b)), ref: setNodeRef, "data-test-id": getDataTestId(dataTestId, "item_".concat(id)) }),
+        controlPosition === 'left' && renderControl(),
+        React.createElement("div", { className: cn(styles.content) }, children),
+        controlPosition === 'right' && renderControl()));
+};
+
+export { SortableItem as S, getDataTestId as g };

package/sortable-list/esm/components/item/Components.js

@@ -0,0 +1,7 @@
+import 'tslib';
+import 'react';
+import '@dnd-kit/sortable';
+import '@dnd-kit/utilities';
+import 'classnames';
+import '@alfalab/icons-glyph/DragMIcon';
+export { S as SortableItem } from '../../Components-8dcedeed.js';

package/sortable-list/esm/components/item/index.css

@@ -0,0 +1,84 @@
+/* hash: xt20m */
+:root {
+} /* deprecated */ :root {
+    --color-light-graphic-primary: #0b1f35;
+    --color-light-graphic-secondary: #6d7986;
+} :root {
+} :root {
+} :root {
+    --shadow-s: 0 0 8px rgba(11, 31, 53, 0.04), 0 4px 8px rgba(11, 31, 53, 0.08);
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+    --gap-3xs: 2px;
+    --gap-2xs: 4px;
+    --gap-xs: 8px;
+    --gap-s: 12px;
+    --gap-m: 16px;
+    --gap-l: 20px;
+} :root {
+} :root {
+} .sortable-list__component_uiu7l {
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    min-height: 48px
+} .sortable-list__component_uiu7l:hover .sortable-list__icon_uiu7l {
+            color: var(--color-light-graphic-primary);
+        } .sortable-list__activator-cell_uiu7l:not(.sortable-list__disabled_uiu7l) {
+    cursor: grab
+} .sortable-list__activator-cell_uiu7l:not(.sortable-list__disabled_uiu7l).sortable-list__dragOverlay_uiu7l {
+        cursor: grabbing;
+    } .sortable-list__activator-control_uiu7l:not(.sortable-list__disabled_uiu7l) .sortable-list__icon_uiu7l {
+        cursor: grab;
+    } .sortable-list__activator-control_uiu7l:not(.sortable-list__disabled_uiu7l).sortable-list__dragOverlay_uiu7l .sortable-list__icon_uiu7l {
+        cursor: grabbing;
+    } .sortable-list__content_uiu7l {
+    flex: 1;
+} .sortable-list__icon_uiu7l {
+    flex-shrink: 0;
+    color: var(--color-light-graphic-secondary);
+} .sortable-list__dragging_uiu7l {
+    opacity: 0;
+} .sortable-list__dragOverlay_uiu7l {
+    box-shadow: var(--shadow-s);
+    animation: sortable-list__pop_uiu7l 200ms ease
+} .sortable-list__dragOverlay_uiu7l .sortable-list__icon_uiu7l {
+        color: var(--color-light-graphic-primary);
+    } .sortable-list__control-left-padding-3xs_uiu7l {
+        padding-left: var(--gap-3xs);
+    } .sortable-list__control-right-padding-3xs_uiu7l {
+        padding-right: var(--gap-3xs);
+    } .sortable-list__control-left-padding-2xs_uiu7l {
+        padding-left: var(--gap-2xs);
+    } .sortable-list__control-right-padding-2xs_uiu7l {
+        padding-right: var(--gap-2xs);
+    } .sortable-list__control-left-padding-xs_uiu7l {
+        padding-left: var(--gap-xs);
+    } .sortable-list__control-right-padding-xs_uiu7l {
+        padding-right: var(--gap-xs);
+    } .sortable-list__control-left-padding-s_uiu7l {
+        padding-left: var(--gap-s);
+    } .sortable-list__control-right-padding-s_uiu7l {
+        padding-right: var(--gap-s);
+    } .sortable-list__control-left-padding-m_uiu7l {
+        padding-left: var(--gap-m);
+    } .sortable-list__control-right-padding-m_uiu7l {
+        padding-right: var(--gap-m);
+    } .sortable-list__control-left-padding-l_uiu7l {
+        padding-left: var(--gap-l);
+    } .sortable-list__control-right-padding-l_uiu7l {
+        padding-right: var(--gap-l);
+    } @keyframes sortable-list__pop_uiu7l {
+    from {
+        box-shadow: none;
+    }
+    to {
+        box-shadow: var(--shadow-s);
+    }
+}

package/sortable-list/esm/index-3885b0d7.d.ts

@@ -0,0 +1,3 @@
+declare const isClient: () => boolean;
+export { isClient };
+export * from "./Components-8dcedeed";