@alfalab/core-components 38.4.0 → 39.0.0-beta.2

package/slider-input/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: 1b4s7 */
+/* hash: onzm4 */
 :root {
 } /* deprecated */ :root {
     --color-light-graphic-secondary: #6d7986;
@@ -64,58 +64,58 @@
     --slider-input-progress-hover-bg-color: var(--color-light-graphic-secondary);
     --slider-input-origin-width: calc(100% - 16px);
     --slider-input-origin-right: 8px;
-} .slider-input__component_rn0rh {
+} .slider-input__component_nme9h {
     position: relative;
     display: inline-block;
-} .slider-input__block_rn0rh {
+} .slider-input__block_nme9h {
     display: block;
-} .slider-input__slider_rn0rh {
+} .slider-input__slider_nme9h {
     width: calc(100% - var(--slider-input-progress-margin-horizontal) * 2);
     margin-left: var(--slider-input-progress-margin-horizontal);
     margin-right: var(--slider-input-progress-margin-horizontal);
     margin-top: calc(var(--slider-progress-s-height) / -2);
     transform: translateY(-1px)
-} .slider-input__slider_rn0rh.slider-input__xl_rn0rh {
+} .slider-input__slider_nme9h.slider-input__xl_nme9h {
         width: calc(100% - var(--slider-input-xl-progress-margin-horizontal) * 2);
         margin-left: var(--slider-input-xl-progress-margin-horizontal);
         margin-right: var(--slider-input-xl-progress-margin-horizontal);
-    } .slider-input__slider_rn0rh .noUi-base {
+    } .slider-input__slider_nme9h .noUi-base {
         border-radius: var(--slider-input-progress-border-radius);
-    } .slider-input__slider_rn0rh .noUi-base:hover > .noUi-connects {
+    } .slider-input__slider_nme9h .noUi-base:hover > .noUi-connects {
             background-color: var(--slider-input-progress-hover-bg-color);
-        } .slider-input__slider_rn0rh .noUi-connects {
+        } .slider-input__slider_nme9h .noUi-connects {
         border-radius: var(--slider-input-progress-border-radius);
         background-color: var(--slider-input-progress-bg-color);
-    } .slider-input__slider_rn0rh .noUi-origin {
+    } .slider-input__slider_nme9h .noUi-origin {
         width: var(--slider-input-origin-width);
         right: var(--slider-input-origin-right);
-    } .slider-input__slider_rn0rh {
+    } .slider-input__slider_nme9h {
 
     /* TODO исправить на 6px когда слайдеру добавят position: absolute */
-} .slider-input__slider_rn0rh + * {
+} .slider-input__slider_nme9h + * {
         margin-top: 5px;
-    } .slider-input__hidePips_rn0rh .noUi-pips {
+    } .slider-input__hidePips_nme9h .noUi-pips {
         display: none;
-    } .slider-input__component_rn0rh .slider-input__field_rn0rh.slider-input__s_rn0rh {
+    } .slider-input__component_nme9h .slider-input__field_nme9h.slider-input__s_nme9h {
         border-bottom-left-radius: var(--slider-input-s-border-bottom-radius);
         border-bottom-right-radius: var(--slider-input-s-border-bottom-radius);
-    } .slider-input__component_rn0rh .slider-input__field_rn0rh.slider-input__m_rn0rh {
+    } .slider-input__component_nme9h .slider-input__field_nme9h.slider-input__m_nme9h {
         border-bottom-left-radius: var(--slider-input-m-border-bottom-radius);
         border-bottom-right-radius: var(--slider-input-m-border-bottom-radius);
-    } .slider-input__component_rn0rh .slider-input__field_rn0rh.slider-input__l_rn0rh {
+    } .slider-input__component_nme9h .slider-input__field_nme9h.slider-input__l_nme9h {
         border-bottom-left-radius: var(--slider-input-l-border-bottom-radius);
         border-bottom-right-radius: var(--slider-input-l-border-bottom-radius);
-    } .slider-input__component_rn0rh .slider-input__field_rn0rh.slider-input__xl_rn0rh {
+    } .slider-input__component_nme9h .slider-input__field_nme9h.slider-input__xl_nme9h {
         border-bottom-left-radius: var(--slider-input-xl-border-bottom-radius);
         border-bottom-right-radius: var(--slider-input-xl-border-bottom-radius);
-    } .slider-input__input_rn0rh input,
-    .slider-input__input_rn0rh input + div {
+    } .slider-input__input_nme9h input,
+    .slider-input__input_nme9h input + div {
         font-weight: var(--slider-input-font-weight);
         font-feature-settings: "tnum";
         font-variant-numeric: tabular-nums;
-    } .slider-input__input_rn0rh input::placeholder {
+    } .slider-input__input_nme9h input::placeholder {
         font-weight: 400;
-    } .slider-input__steps_rn0rh {
+    } .slider-input__steps_nme9h {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
@@ -124,7 +124,7 @@
     justify-content: space-between;
     margin-top: var(--gap-xs);
     color: var(--slider-input-steps-color);
-} .slider-input__info_rn0rh {
+} .slider-input__info_nme9h {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
@@ -134,24 +134,24 @@
     opacity: 0;
     transition: 0.2s ease;
     visibility: hidden;
-} .slider-input__s_rn0rh.slider-input__hasLabel_rn0rh .slider-input__info_rn0rh:first-child {
+} .slider-input__s_nme9h.slider-input__hasLabel_nme9h .slider-input__info_nme9h:first-child {
     padding: var(--form-control-labeled-s-paddings);
     padding-left: 0;
     padding-right: 0;
-} .slider-input__m_rn0rh.slider-input__hasLabel_rn0rh .slider-input__info_rn0rh:first-child {
+} .slider-input__m_nme9h.slider-input__hasLabel_nme9h .slider-input__info_nme9h:first-child {
     padding: var(--form-control-labeled-m-paddings);
     padding-left: 0;
     padding-right: 0;
-} .slider-input__l_rn0rh.slider-input__hasLabel_rn0rh .slider-input__info_rn0rh:first-child {
+} .slider-input__l_nme9h.slider-input__hasLabel_nme9h .slider-input__info_nme9h:first-child {
     padding: var(--form-control-labeled-l-paddings);
     padding-left: 0;
     padding-right: 0;
-} .slider-input__xl_rn0rh.slider-input__hasLabel_rn0rh .slider-input__info_rn0rh:first-child {
+} .slider-input__xl_nme9h.slider-input__hasLabel_nme9h .slider-input__info_nme9h:first-child {
     padding: var(--form-control-labeled-xl-paddings);
     padding-left: 0;
     padding-right: 0;
-} .slider-input__focused_rn0rh .slider-input__info_rn0rh,
-.slider-input__filled_rn0rh .slider-input__info_rn0rh {
+} .slider-input__focused_nme9h .slider-input__info_nme9h,
+.slider-input__filled_nme9h .slider-input__info_nme9h {
     visibility: visible;
     opacity: 1;
 }

package/sortable-list/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/Component.js

@@ -0,0 +1,105 @@
+var tslib = require('tslib');
+var React = require('react');
+var core = require('@dnd-kit/core');
+var sortable = require('@dnd-kit/sortable');
+var cn = require('classnames');
+var components_item_Components = require('./Components-b2c90027.js');
+var utils = require('./utils.js');
+require('@dnd-kit/utilities');
+require('@alfalab/icons-glyph/DragMIcon');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+
+var styles = {"component":"sortable-list__component_43cq8","primary":"sortable-list__primary_43cq8","secondary":"sortable-list__secondary_43cq8","padding-top-3xs":"sortable-list__padding-top-3xs_43cq8","padding-bottom-3xs":"sortable-list__padding-bottom-3xs_43cq8","padding-left-3xs":"sortable-list__padding-left-3xs_43cq8","padding-right-3xs":"sortable-list__padding-right-3xs_43cq8","padding-top-2xs":"sortable-list__padding-top-2xs_43cq8","padding-bottom-2xs":"sortable-list__padding-bottom-2xs_43cq8","padding-left-2xs":"sortable-list__padding-left-2xs_43cq8","padding-right-2xs":"sortable-list__padding-right-2xs_43cq8","padding-top-xs":"sortable-list__padding-top-xs_43cq8","padding-bottom-xs":"sortable-list__padding-bottom-xs_43cq8","padding-left-xs":"sortable-list__padding-left-xs_43cq8","padding-right-xs":"sortable-list__padding-right-xs_43cq8","padding-top-s":"sortable-list__padding-top-s_43cq8","padding-bottom-s":"sortable-list__padding-bottom-s_43cq8","padding-left-s":"sortable-list__padding-left-s_43cq8","padding-right-s":"sortable-list__padding-right-s_43cq8","padding-top-m":"sortable-list__padding-top-m_43cq8","padding-bottom-m":"sortable-list__padding-bottom-m_43cq8","padding-left-m":"sortable-list__padding-left-m_43cq8","padding-right-m":"sortable-list__padding-right-m_43cq8","padding-top-l":"sortable-list__padding-top-l_43cq8","padding-bottom-l":"sortable-list__padding-bottom-l_43cq8","padding-left-l":"sortable-list__padding-left-l_43cq8","padding-right-l":"sortable-list__padding-right-l_43cq8","border-radius-m":"sortable-list__border-radius-m_43cq8","border-radius-l":"sortable-list__border-radius-l_43cq8","border-radius-xl":"sortable-list__border-radius-xl_43cq8"};
+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 = React.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__default.default.useState(null), activeId = _h[0], setActiveId = _h[1];
+    var sensors = core.useSensors(core.useSensor(core.KeyboardSensor), core.useSensor(core.TouchSensor), core.useSensor(core.MouseSensor));
+    var getPaddingClassName = function () {
+        var _a;
+        if (typeof padding === 'object') {
+            return cn__default.default((_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__default.default(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__default.default(styles[view], (_b = {},
+        _b[styles["border-radius-".concat(borderRadius)]] = borderRadius,
+        _b));
+    var sortableItemClassName = cn__default.default(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, sortable.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 = tslib.__rest(_a, ["children"]);
+        return (React__default.default.createElement(components_item_Components.SortableItem, tslib.__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__default.default.createElement(core.DndContext, { sensors: sensors, collisionDetection: core.closestCenter, onDragStart: handleDragStart, onDragEnd: handleDragEnd, modifiers: [utils.restrictToParentElement, utils.restrictToVerticalAxis], accessibility: {
+            announcements: announcements,
+            screenReaderInstructions: { draggable: screenReaderInstructions },
+        } },
+        React__default.default.createElement(sortable.SortableContext, { items: items, strategy: sortable.verticalListSortingStrategy },
+            React__default.default.createElement("div", { ref: ref, className: cn__default.default(styles.component, getPaddingClassName(), commonClassName, className), "data-test-id": components_item_Components.getDataTestId(dataTestId, 'container') }, items.map(function (item) { return renderSortableItem(item, { dataTestId: dataTestId }); }))),
+        React__default.default.createElement(core.DragOverlay, null, activeId ? renderDragOverlay() : null)));
+});
+
+exports.SortableList = SortableList;

package/sortable-list/Components-b2c90027.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/Components-b2c90027.js

@@ -0,0 +1,54 @@
+var tslib = require('tslib');
+var React = require('react');
+var sortable = require('@dnd-kit/sortable');
+var utilities = require('@dnd-kit/utilities');
+var cn = require('classnames');
+var DragMIcon = require('@alfalab/icons-glyph/DragMIcon');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+
+var getDataTestId = function (dataTestId, element) {
+    var elementPart = element ? "-".concat(element.toLowerCase()) : '';
+    return dataTestId ? "".concat(dataTestId).concat(elementPart) : undefined;
+};
+
+var styles = {"component":"sortable-list__component_1osxx","icon":"sortable-list__icon_1osxx","activator-cell":"sortable-list__activator-cell_1osxx","disabled":"sortable-list__disabled_1osxx","dragOverlay":"sortable-list__dragOverlay_1osxx","activator-control":"sortable-list__activator-control_1osxx","content":"sortable-list__content_1osxx","dragging":"sortable-list__dragging_1osxx","pop":"sortable-list__pop_1osxx","control-left-padding-3xs":"sortable-list__control-left-padding-3xs_1osxx","control-right-padding-3xs":"sortable-list__control-right-padding-3xs_1osxx","control-left-padding-2xs":"sortable-list__control-left-padding-2xs_1osxx","control-right-padding-2xs":"sortable-list__control-right-padding-2xs_1osxx","control-left-padding-xs":"sortable-list__control-left-padding-xs_1osxx","control-right-padding-xs":"sortable-list__control-right-padding-xs_1osxx","control-left-padding-s":"sortable-list__control-left-padding-s_1osxx","control-right-padding-s":"sortable-list__control-right-padding-s_1osxx","control-left-padding-m":"sortable-list__control-left-padding-m_1osxx","control-right-padding-m":"sortable-list__control-right-padding-m_1osxx","control-left-padding-l":"sortable-list__control-left-padding-l_1osxx","control-right-padding-l":"sortable-list__control-right-padding-l_1osxx"};
+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 = sortable.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__default.default.createElement("div", tslib.__assign({ className: cn__default.default(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__default.default.createElement(DragMIcon.DragMIcon, { "aria-label": 'drag control' })));
+    };
+    return (React__default.default.createElement("div", tslib.__assign({}, (isCellActivator ? listeners : null), (isCellActivator ? attributes : null), { style: {
+            transform: utilities.CSS.Transform.toString(transform),
+            transition: transition,
+        }, className: cn__default.default(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__default.default.createElement("div", { className: cn__default.default(styles.content) }, children),
+        controlPosition === 'right' && renderControl()));
+};
+
+exports.SortableItem = SortableItem;
+exports.getDataTestId = getDataTestId;

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

@@ -0,0 +1,11 @@
+require('tslib');
+require('react');
+require('@dnd-kit/sortable');
+require('@dnd-kit/utilities');
+require('classnames');
+require('@alfalab/icons-glyph/DragMIcon');
+var components_item_Components = require('../../Components-b2c90027.js');
+
+
+
+exports.SortableItem = components_item_Components.SortableItem;

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

@@ -0,0 +1,84 @@
+/* hash: 1le5g */
+: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_1osxx {
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    min-height: 48px
+} .sortable-list__component_1osxx:hover .sortable-list__icon_1osxx {
+            color: var(--color-light-graphic-primary);
+        } .sortable-list__activator-cell_1osxx:not(.sortable-list__disabled_1osxx) {
+    cursor: grab
+} .sortable-list__activator-cell_1osxx:not(.sortable-list__disabled_1osxx).sortable-list__dragOverlay_1osxx {
+        cursor: grabbing;
+    } .sortable-list__activator-control_1osxx:not(.sortable-list__disabled_1osxx) .sortable-list__icon_1osxx {
+        cursor: grab;
+    } .sortable-list__activator-control_1osxx:not(.sortable-list__disabled_1osxx).sortable-list__dragOverlay_1osxx .sortable-list__icon_1osxx {
+        cursor: grabbing;
+    } .sortable-list__content_1osxx {
+    flex: 1;
+} .sortable-list__icon_1osxx {
+    flex-shrink: 0;
+    color: var(--color-light-graphic-secondary);
+} .sortable-list__dragging_1osxx {
+    opacity: 0;
+} .sortable-list__dragOverlay_1osxx {
+    box-shadow: var(--shadow-s);
+    animation: sortable-list__pop_1osxx 200ms ease
+} .sortable-list__dragOverlay_1osxx .sortable-list__icon_1osxx {
+        color: var(--color-light-graphic-primary);
+    } .sortable-list__control-left-padding-3xs_1osxx {
+        padding-left: var(--gap-3xs);
+    } .sortable-list__control-right-padding-3xs_1osxx {
+        padding-right: var(--gap-3xs);
+    } .sortable-list__control-left-padding-2xs_1osxx {
+        padding-left: var(--gap-2xs);
+    } .sortable-list__control-right-padding-2xs_1osxx {
+        padding-right: var(--gap-2xs);
+    } .sortable-list__control-left-padding-xs_1osxx {
+        padding-left: var(--gap-xs);
+    } .sortable-list__control-right-padding-xs_1osxx {
+        padding-right: var(--gap-xs);
+    } .sortable-list__control-left-padding-s_1osxx {
+        padding-left: var(--gap-s);
+    } .sortable-list__control-right-padding-s_1osxx {
+        padding-right: var(--gap-s);
+    } .sortable-list__control-left-padding-m_1osxx {
+        padding-left: var(--gap-m);
+    } .sortable-list__control-right-padding-m_1osxx {
+        padding-right: var(--gap-m);
+    } .sortable-list__control-left-padding-l_1osxx {
+        padding-left: var(--gap-l);
+    } .sortable-list__control-right-padding-l_1osxx {
+        padding-right: var(--gap-l);
+    } @keyframes sortable-list__pop_1osxx {
+    from {
+        box-shadow: none;
+    }
+    to {
+        box-shadow: var(--shadow-s);
+    }
+}

package/sortable-list/cssm/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/cssm/Component.js

@@ -0,0 +1,105 @@
+var tslib = require('tslib');
+var React = require('react');
+var core = require('@dnd-kit/core');
+var sortable = require('@dnd-kit/sortable');
+var cn = require('classnames');
+var components_item_Components = require('./Components-2c44a427.js');
+var utils = require('./utils.js');
+var styles = require('./index.module.css');
+require('@dnd-kit/utilities');
+require('@alfalab/icons-glyph/DragMIcon');
+require('./components/item/index.module.css');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
+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 = React.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__default.default.useState(null), activeId = _h[0], setActiveId = _h[1];
+    var sensors = core.useSensors(core.useSensor(core.KeyboardSensor), core.useSensor(core.TouchSensor), core.useSensor(core.MouseSensor));
+    var getPaddingClassName = function () {
+        var _a;
+        if (typeof padding === 'object') {
+            return cn__default.default((_a = {},
+                _a[styles__default.default["padding-top-".concat(padding.top)]] = padding.top,
+                _a[styles__default.default["padding-right-".concat(padding.right)]] = padding.right,
+                _a[styles__default.default["padding-bottom-".concat(padding.bottom)]] = padding.bottom,
+                _a[styles__default.default["padding-left-".concat(padding.left)]] = padding.left,
+                _a));
+        }
+        if (typeof padding === 'string') {
+            return cn__default.default(styles__default.default["padding-top-".concat(padding)], styles__default.default["padding-right-".concat(padding)], styles__default.default["padding-bottom-".concat(padding)], styles__default.default["padding-left-".concat(padding)]);
+        }
+        return undefined;
+    };
+    var commonClassName = cn__default.default(styles__default.default[view], (_b = {},
+        _b[styles__default.default["border-radius-".concat(borderRadius)]] = borderRadius,
+        _b));
+    var sortableItemClassName = cn__default.default(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, sortable.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 = tslib.__rest(_a, ["children"]);
+        return (React__default.default.createElement(components_item_Components.SortableItem, tslib.__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__default.default.createElement(core.DndContext, { sensors: sensors, collisionDetection: core.closestCenter, onDragStart: handleDragStart, onDragEnd: handleDragEnd, modifiers: [utils.restrictToParentElement, utils.restrictToVerticalAxis], accessibility: {
+            announcements: announcements,
+            screenReaderInstructions: { draggable: screenReaderInstructions },
+        } },
+        React__default.default.createElement(sortable.SortableContext, { items: items, strategy: sortable.verticalListSortingStrategy },
+            React__default.default.createElement("div", { ref: ref, className: cn__default.default(styles__default.default.component, getPaddingClassName(), commonClassName, className), "data-test-id": components_item_Components.getDataTestId(dataTestId, 'container') }, items.map(function (item) { return renderSortableItem(item, { dataTestId: dataTestId }); }))),
+        React__default.default.createElement(core.DragOverlay, null, activeId ? renderDragOverlay() : null)));
+});
+
+exports.SortableList = SortableList;

package/sortable-list/cssm/Components-2c44a427.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/cssm/Components-2c44a427.js

@@ -0,0 +1,53 @@
+var tslib = require('tslib');
+var React = require('react');
+var sortable = require('@dnd-kit/sortable');
+var utilities = require('@dnd-kit/utilities');
+var cn = require('classnames');
+var DragMIcon = require('@alfalab/icons-glyph/DragMIcon');
+var styles = require('./components/item/index.module.css');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
+var getDataTestId = function (dataTestId, element) {
+    var elementPart = element ? "-".concat(element.toLowerCase()) : '';
+    return dataTestId ? "".concat(dataTestId).concat(elementPart) : undefined;
+};
+
+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 = sortable.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__default.default.createElement("div", tslib.__assign({ className: cn__default.default(styles__default.default.icon, (_a = {},
+                _a[styles__default.default["control-right-padding-".concat(controlPadding)]] = hasRightPadding,
+                _a[styles__default.default["control-left-padding-".concat(controlPadding)]] = hasLeftPadding,
+                _a)), ref: isControlActivator ? setActivatorNodeRef : undefined }, (isControlActivator ? listeners : null), (isControlActivator ? attributes : null)),
+            React__default.default.createElement(DragMIcon.DragMIcon, { "aria-label": 'drag control' })));
+    };
+    return (React__default.default.createElement("div", tslib.__assign({}, (isCellActivator ? listeners : null), (isCellActivator ? attributes : null), { style: {
+            transform: utilities.CSS.Transform.toString(transform),
+            transition: transition,
+        }, className: cn__default.default(styles__default.default.component, styles__default.default["activator-".concat(activatorNode)], className, (_b = {},
+            _b[styles__default.default.disabled] = disabled,
+            _b[styles__default.default.dragging] = isDragging,
+            _b[styles__default.default.dragOverlay] = isDragOverlay,
+            _b)), ref: setNodeRef, "data-test-id": getDataTestId(dataTestId, "item_".concat(id)) }),
+        controlPosition === 'left' && renderControl(),
+        React__default.default.createElement("div", { className: cn__default.default(styles__default.default.content) }, children),
+        controlPosition === 'right' && renderControl()));
+};
+
+exports.SortableItem = SortableItem;
+exports.getDataTestId = getDataTestId;

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

@@ -0,0 +1,12 @@
+require('tslib');
+require('react');
+require('@dnd-kit/sortable');
+require('@dnd-kit/utilities');
+require('classnames');
+require('@alfalab/icons-glyph/DragMIcon');
+var components_item_Components = require('../../Components-2c44a427.js');
+require('./index.module.css');
+
+
+
+exports.SortableItem = components_item_Components.SortableItem;