@alfalab/core-components 45.9.0-beta.0 → 45.9.0-beta.2

package/skeleton/cssm/Component.js

@@ -1,12 +1,22 @@
-import React from 'react';
-import cn from 'classnames';
-import styles from './index.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const Skeleton = ({ visible, animate = true, className, dataTestId, children, style, }) => {
+var React = require('react');
+var cn = require('classnames');
+var styles = require('./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 Skeleton = function (_a) {
+    var _b;
+    var visible = _a.visible, _c = _a.animate, animate = _c === void 0 ? true : _c, className = _a.className, dataTestId = _a.dataTestId, children = _a.children, style = _a.style;
     if (visible) {
-        return (React.createElement("div", { className: cn(styles.component, { [styles.animate]: animate }, className), style: style, "data-test-id": dataTestId }, children));
+        return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.component, (_b = {}, _b[styles__default.default.animate] = animate, _b), className), style: style, "data-test-id": dataTestId }, children));
     }
-    return (React.createElement("div", { "data-test-id": dataTestId, className: className, style: style }, children));
+    return (React__default.default.createElement("div", { "data-test-id": dataTestId, className: className, style: style }, children));
 };
 
-export { Skeleton };
+exports.Skeleton = Skeleton;

package/skeleton/cssm/index.js

@@ -1,4 +1,7 @@
-export { Skeleton } from './Component.js';
-import 'react';
-import 'classnames';
-import './index.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Component = require('./Component.js');
+
+
+
+exports.Skeleton = Component.Skeleton;

package/slider/cssm/Component.js

@@ -1,64 +1,75 @@
-import React, { useRef, useEffect } from 'react';
-import cn from 'classnames';
-import noUiSlider from 'nouislider';
-import styles from './index.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const SIZE_TO_CLASSNAME_MAP = {
+var tslib = require('tslib');
+var React = require('react');
+var cn = require('classnames');
+var noUiSlider = require('nouislider');
+var styles = require('./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 noUiSlider__default = /*#__PURE__*/_interopDefaultCompat(noUiSlider);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
+var SIZE_TO_CLASSNAME_MAP = {
     s: 'size-2',
     m: 'size-4',
     2: 'size-2',
     4: 'size-4',
 };
-const Slider = ({ min = 0, max = 100, step = 1, value = 0, valueTo, disabled, pips, behaviour = 'tap', range = { min, max }, size = 2, className, onChange, onStart, onEnd, dataTestId, }) => {
-    const sliderRef = useRef(null);
-    const busyRef = useRef(false);
-    const hasValueTo = valueTo !== undefined;
-    const getSlider = () => sliderRef.current?.noUiSlider;
-    useEffect(() => {
+var Slider = function (_a) {
+    var _b = _a.min, min = _b === void 0 ? 0 : _b, _c = _a.max, max = _c === void 0 ? 100 : _c, _d = _a.step, step = _d === void 0 ? 1 : _d, _e = _a.value, value = _e === void 0 ? 0 : _e, valueTo = _a.valueTo, disabled = _a.disabled, pips = _a.pips, _f = _a.behaviour, behaviour = _f === void 0 ? 'tap' : _f, _g = _a.range, range = _g === void 0 ? { min: min, max: max } : _g, _h = _a.size, size = _h === void 0 ? 2 : _h, className = _a.className, onChange = _a.onChange, onStart = _a.onStart, onEnd = _a.onEnd, dataTestId = _a.dataTestId;
+    var sliderRef = React.useRef(null);
+    var busyRef = React.useRef(false);
+    var hasValueTo = valueTo !== undefined;
+    var getSlider = function () { var _a; return (_a = sliderRef.current) === null || _a === void 0 ? void 0 : _a.noUiSlider; };
+    React.useEffect(function () {
         if (!sliderRef.current)
             return;
-        const slider = noUiSlider.create(sliderRef.current, {
+        var slider = noUiSlider__default.default.create(sliderRef.current, {
             start: valueTo ? [value, valueTo] : value,
             connect: valueTo ? true : [true, false],
-            behaviour,
-            step,
+            behaviour: behaviour,
+            step: step,
             pips: pips,
-            range,
+            range: range,
         });
         // eslint-disable-next-line consistent-return
-        return () => slider.destroy();
+        return function () { return slider.destroy(); };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    useEffect(() => {
-        const slider = getSlider();
+    React.useEffect(function () {
+        var slider = getSlider();
         if (!slider)
             return;
-        slider.on('start', () => {
+        slider.on('start', function () {
             busyRef.current = true;
-            onStart?.();
+            onStart === null || onStart === void 0 ? void 0 : onStart();
         });
-        slider.on('change', () => {
+        slider.on('change', function () {
             busyRef.current = false;
-            onEnd?.();
+            onEnd === null || onEnd === void 0 ? void 0 : onEnd();
         });
         // eslint-disable-next-line consistent-return
-        return () => {
+        return function () {
             slider.off('start');
             slider.off('change');
         };
     }, [onStart, onEnd]);
-    useEffect(() => {
-        const slider = getSlider();
+    React.useEffect(function () {
+        var slider = getSlider();
         if (!slider)
             return;
         slider.updateOptions({
-            step,
-            range,
+            step: step,
+            range: range,
             pips: pips,
         }, true);
     }, [pips, range, step]);
-    useEffect(() => {
-        const slider = getSlider();
+    React.useEffect(function () {
+        var slider = getSlider();
         // Пропускаем обновление, если происходит взаимодействие со слайдером
         if (slider && busyRef.current === false) {
             if (valueTo) {
@@ -69,16 +80,16 @@ const Slider = ({ min = 0, max = 100, step = 1, value = 0, valueTo, disabled, pi
             }
         }
     }, [value, valueTo]);
-    useEffect(() => {
-        const slider = getSlider();
+    React.useEffect(function () {
+        var slider = getSlider();
         if (!slider)
             return;
-        const handler = () => {
+        var handler = function () {
             if (onChange) {
                 if (hasValueTo) {
-                    const sliderValues = slider.get();
-                    const from = Number(sliderValues[0]);
-                    const to = Number(sliderValues[1]);
+                    var sliderValues = slider.get();
+                    var from = Number(sliderValues[0]);
+                    var to = Number(sliderValues[1]);
                     if (from <= to) {
                         onChange({ value: from, valueTo: to });
                     }
@@ -94,7 +105,8 @@ const Slider = ({ min = 0, max = 100, step = 1, value = 0, valueTo, disabled, pi
         slider.off('slide');
         slider.on('slide', handler);
     }, [onChange, hasValueTo]);
-    return (React.createElement("div", { className: cn(styles.component, className, styles[SIZE_TO_CLASSNAME_MAP[size]]), ref: sliderRef, "data-test-id": dataTestId, ...{ disabled } }));
+    return (React__default.default.createElement("div", tslib.__assign({ className: cn__default.default(styles__default.default.component, className, styles__default.default[SIZE_TO_CLASSNAME_MAP[size]]), ref: sliderRef, "data-test-id": dataTestId }, { disabled: disabled })));
 };
 
-export { SIZE_TO_CLASSNAME_MAP, Slider };
+exports.SIZE_TO_CLASSNAME_MAP = SIZE_TO_CLASSNAME_MAP;
+exports.Slider = Slider;

package/slider/cssm/index.js

@@ -1,5 +1,8 @@
-export { SIZE_TO_CLASSNAME_MAP, Slider } from './Component.js';
-import 'react';
-import 'classnames';
-import 'nouislider';
-import './index.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Component = require('./Component.js');
+
+
+
+exports.SIZE_TO_CLASSNAME_MAP = Component.SIZE_TO_CLASSNAME_MAP;
+exports.Slider = Component.Slider;

package/slider-input/cssm/Component.js

@@ -1,10 +1,19 @@
-import React, { forwardRef, useCallback, Fragment, isValidElement, cloneElement } from 'react';
-import cn from 'classnames';
-import { Input } from '../../input/cssm';
-import { Slider } from '../../slider/cssm';
-import styles from './index.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const SIZE_TO_CLASSNAME_MAP = {
+var tslib = require('tslib');
+var React = require('react');
+var cn = require('classnames');
+var coreComponentsInput = require('../../input/cssm');
+var coreComponentsSlider = require('../../slider/cssm');
+var styles = require('./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 SIZE_TO_CLASSNAME_MAP = {
     s: 'size-48',
     m: 'size-56',
     l: 'size-64',
@@ -14,33 +23,37 @@ const SIZE_TO_CLASSNAME_MAP = {
     64: 'size-64',
     72: 'size-72',
 };
-const SliderInput = forwardRef(({ className, inputClassName, sliderClassName, stepsClassName, focusedClassName, fieldClassName, value = '', min = 0, max = 100, step = 1, block, steps = [], sliderValue = +value, size = 48, label, info, disabled, readOnly, onChange, onInputChange, onSliderChange, onSliderStart, onSliderEnd, rightAddons, Input: Input$1 = Input, customInputProps = {}, error, hint, pips, range, dataTestId, ...restProps }, ref) => {
-    const getValidInputValue = useCallback((inputValue) => {
-        const number = parseInt(inputValue?.toString().replace(/\s/g, ''), 10);
+var SliderInput = React.forwardRef(function (_a, ref) {
+    var _b, _c, _d;
+    var className = _a.className, inputClassName = _a.inputClassName, sliderClassName = _a.sliderClassName, stepsClassName = _a.stepsClassName, focusedClassName = _a.focusedClassName, fieldClassName = _a.fieldClassName, _e = _a.value, value = _e === void 0 ? '' : _e, _f = _a.min, min = _f === void 0 ? 0 : _f, _g = _a.max, max = _g === void 0 ? 100 : _g, _h = _a.step, step = _h === void 0 ? 1 : _h, block = _a.block, _j = _a.steps, steps = _j === void 0 ? [] : _j, _k = _a.sliderValue, sliderValue = _k === void 0 ? +value : _k, _l = _a.size, size = _l === void 0 ? 48 : _l, label = _a.label, info = _a.info, disabled = _a.disabled, readOnly = _a.readOnly, onChange = _a.onChange, onInputChange = _a.onInputChange, onSliderChange = _a.onSliderChange, onSliderStart = _a.onSliderStart, onSliderEnd = _a.onSliderEnd, rightAddons = _a.rightAddons, _m = _a.Input, Input = _m === void 0 ? coreComponentsInput.Input : _m, _o = _a.customInputProps, customInputProps = _o === void 0 ? {} : _o, error = _a.error, hint = _a.hint, pips = _a.pips, range = _a.range, dataTestId = _a.dataTestId, restProps = tslib.__rest(_a, ["className", "inputClassName", "sliderClassName", "stepsClassName", "focusedClassName", "fieldClassName", "value", "min", "max", "step", "block", "steps", "sliderValue", "size", "label", "info", "disabled", "readOnly", "onChange", "onInputChange", "onSliderChange", "onSliderStart", "onSliderEnd", "rightAddons", "Input", "customInputProps", "error", "hint", "pips", "range", "dataTestId"]);
+    var getValidInputValue = React.useCallback(function (inputValue) {
+        var number = parseInt(inputValue === null || inputValue === void 0 ? void 0 : inputValue.toString().replace(/\s/g, ''), 10);
         return inputValue === '' || Number.isNaN(number) ? '' : Math.abs(number);
     }, []);
-    const handleSliderChange = useCallback((payload) => {
+    var handleSliderChange = React.useCallback(function (payload) {
         if (onChange)
             onChange(null, payload);
         if (onSliderChange)
             onSliderChange(payload);
     }, [onChange, onSliderChange]);
-    const handleInputChange = useCallback((event, payload) => {
+    var handleInputChange = React.useCallback(function (event, payload) {
         if (onChange)
             onChange(event, { value: getValidInputValue(payload.value) });
         if (onInputChange)
             onInputChange(event, { value: getValidInputValue(payload.value) });
     }, [getValidInputValue, onChange, onInputChange]);
-    return (React.createElement("div", { className: cn(styles.component, {
-            [styles.block]: block,
-            [styles.filled]: Boolean(value),
-            [styles.hasLabel]: label,
-            [styles.hasError]: Boolean(error),
-        }, styles[SIZE_TO_CLASSNAME_MAP[size]], className), "data-test-id": dataTestId },
-        React.createElement(Input$1, { ...restProps, ...customInputProps, ref: ref, value: value.toString(), onChange: handleInputChange, block: true, size: size, label: label, disabled: disabled, readOnly: readOnly, className: cn(inputClassName, styles.input), focusedClassName: cn(focusedClassName, styles.focused), fieldClassName: cn(fieldClassName, styles.field, { [styles.disabled]: disabled }, styles[SIZE_TO_CLASSNAME_MAP[size]]), inputMode: 'numeric', pattern: '[0-9]*', error: error, hint: hint, bottomAddons: !disabled && (React.createElement(Slider, { min: min, max: max, step: step, onStart: onSliderStart, onEnd: onSliderEnd, onChange: handleSliderChange, value: Number.isNaN(sliderValue) || !sliderValue ? min : sliderValue, disabled: disabled || readOnly, className: cn(styles.slider, styles[SIZE_TO_CLASSNAME_MAP[size]], { [styles.hidePips]: error || hint }, sliderClassName), pips: pips, range: range })), rightAddons: (info || rightAddons) && (React.createElement(Fragment, null,
-                info && React.createElement("span", { className: styles.info }, info),
-                rightAddons)) }),
-        steps.length > 0 && !error && (React.createElement("div", { className: cn(styles.steps, stepsClassName) }, steps.map((stepLabel, i) => isValidElement(stepLabel) ? (cloneElement(stepLabel, { key: i })) : (React.createElement("span", { key: i.toString() }, stepLabel)))))));
+    return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.component, (_b = {},
+            _b[styles__default.default.block] = block,
+            _b[styles__default.default.filled] = Boolean(value),
+            _b[styles__default.default.hasLabel] = label,
+            _b[styles__default.default.hasError] = Boolean(error),
+            _b), styles__default.default[SIZE_TO_CLASSNAME_MAP[size]], className), "data-test-id": dataTestId },
+        React__default.default.createElement(Input, tslib.__assign({}, restProps, customInputProps, { ref: ref, value: value.toString(), onChange: handleInputChange, block: true, size: size, label: label, disabled: disabled, readOnly: readOnly, className: cn__default.default(inputClassName, styles__default.default.input), focusedClassName: cn__default.default(focusedClassName, styles__default.default.focused), fieldClassName: cn__default.default(fieldClassName, styles__default.default.field, (_c = {}, _c[styles__default.default.disabled] = disabled, _c), styles__default.default[SIZE_TO_CLASSNAME_MAP[size]]), inputMode: 'numeric', pattern: '[0-9]*', error: error, hint: hint, bottomAddons: !disabled && (React__default.default.createElement(coreComponentsSlider.Slider, { min: min, max: max, step: step, onStart: onSliderStart, onEnd: onSliderEnd, onChange: handleSliderChange, value: Number.isNaN(sliderValue) || !sliderValue ? min : sliderValue, disabled: disabled || readOnly, className: cn__default.default(styles__default.default.slider, styles__default.default[SIZE_TO_CLASSNAME_MAP[size]], (_d = {}, _d[styles__default.default.hidePips] = error || hint, _d), sliderClassName), pips: pips, range: range })), rightAddons: (info || rightAddons) && (React__default.default.createElement(React.Fragment, null,
+                info && React__default.default.createElement("span", { className: styles__default.default.info }, info),
+                rightAddons)) })),
+        steps.length > 0 && !error && (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.steps, stepsClassName) }, steps.map(function (stepLabel, i) {
+            return React.isValidElement(stepLabel) ? (React.cloneElement(stepLabel, { key: i })) : (React__default.default.createElement("span", { key: i.toString() }, stepLabel));
+        })))));
 });
 
-export { SliderInput };
+exports.SliderInput = SliderInput;

package/slider-input/cssm/index.js

@@ -1,6 +1,7 @@
-export { SliderInput } from './Component.js';
-import 'react';
-import 'classnames';
-import '../../input/cssm';
-import '../../slider/cssm';
-import './index.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Component = require('./Component.js');
+
+
+
+exports.SliderInput = Component.SliderInput;

package/sortable-list/cssm/Component.js

@@ -1,92 +1,107 @@
-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 { Portal } from '../../portal/cssm';
-import { getDataTestId } from '../../shared/cssm';
-import { SortableItem } from './components/item/Components.js';
-import { restrictToParentElement, restrictToVerticalAxis } from './utils.js';
-import styles from './index.module.css';
-import '@dnd-kit/utilities';
-import '@alfalab/icons-glyph/DragMIcon';
-import './components/item/index.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const DEFAULT_INSTRUCTION = 'Чтобы выбрать перетаскиваемый элемент, нажмите пробел.\n' +
+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 coreComponentsPortal = require('../../portal/cssm');
+var coreComponentsShared = require('../../shared/cssm');
+var components_item_Components = require('./components/item/Components.js');
+var utils = require('./utils.js');
+var styles = require('./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 для отмены.';
-const DEFAULT_ANNOUNCEMENTS = {
-    onDragStart({ active }) {
-        return `Выбран элемент ${active.id}.`;
+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({ active, over }) {
+    onDragOver: function (_a) {
+        var active = _a.active, over = _a.over;
         if (over) {
-            return `Выбранный элемент ${active.id} находится над элементом ${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 \u043D\u0430\u0434 \u044D\u043B\u0435\u043C\u0435\u043D\u0442\u043E\u043C ").concat(over.id, ".");
         }
-        return `Выбранный элемент ${active.id} находится за пределами droppable зоны.`;
+        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({ active, over }) {
+    onDragEnd: function (_a) {
+        var active = _a.active, over = _a.over;
         if (over) {
-            return `Выбранный элемент ${active.id} был перемещен на место ${over.id}`;
+            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 `Выбранный элемент ${active.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() {
+    onDragCancel: function () {
         return 'Перемещение было отменено';
     },
 };
-const SortableList = forwardRef(({ className, itemClassName, itemContentClassName, controlPosition = 'right', controlPadding, items, renderItem, borderRadius, activatorNode = 'cell', view = 'primary', padding, dataTestId, announcements = DEFAULT_ANNOUNCEMENTS, screenReaderInstructions = DEFAULT_INSTRUCTION, onDragStart, onDragEnd, portalProps, dragOverlayProps, }, ref) => {
-    const [activeId, setActiveId] = React.useState(null);
-    const sensors = useSensors(useSensor(KeyboardSensor), useSensor(TouchSensor), useSensor(MouseSensor));
-    const getPaddingClassName = () => {
+var SortableList = React.forwardRef(function (_a, ref) {
+    var _b;
+    var className = _a.className, itemClassName = _a.itemClassName, itemContentClassName = _a.itemContentClassName, _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, portalProps = _a.portalProps, dragOverlayProps = _a.dragOverlayProps;
+    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({
-                [styles[`padding-top-${padding.top}`]]: padding.top,
-                [styles[`padding-right-${padding.right}`]]: padding.right,
-                [styles[`padding-bottom-${padding.bottom}`]]: padding.bottom,
-                [styles[`padding-left-${padding.left}`]]: padding.left,
-            });
+            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(styles[`padding-top-${padding}`], styles[`padding-right-${padding}`], styles[`padding-bottom-${padding}`], styles[`padding-left-${padding}`]);
+            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;
     };
-    const commonClassName = cn(styles[view], {
-        [styles[`border-radius-${borderRadius}`]]: borderRadius,
-    });
-    const sortableItemClassName = cn(commonClassName, itemClassName);
-    const handleDragStart = (event) => {
-        const { active } = event;
+    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?.(event);
+        onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(event);
     };
-    const handleDragEnd = (event) => {
-        const { active, over } = event;
-        if (over?.id && active.id !== over.id) {
-            const oldIndex = items.findIndex((item) => item.id === active.id);
-            const newIndex = items.findIndex((item) => item.id === over.id);
-            onDragEnd?.(event, arrayMove(items, oldIndex, newIndex));
+    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?.(event, items);
+        onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(event, items);
         setActiveId(null);
     };
-    const renderSortableItem = (item, { children, ...restProps }) => (React.createElement(SortableItem, { controlPadding: controlPadding, controlPosition: controlPosition, key: item.id, id: item.id, className: sortableItemClassName, contentClassName: itemContentClassName, activatorNode: activatorNode, disabled: item.disabled, ...restProps }, renderItem(item)));
-    const renderDragOverlay = () => {
-        const activeItem = items.find((item) => item.id === activeId);
+    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, contentClassName: itemContentClassName, 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,
+    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.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((item) => renderSortableItem(item, { dataTestId })))),
-        React.createElement(Portal, { immediateMount: true, ...portalProps },
-            React.createElement(DragOverlay, { ...dragOverlayProps }, activeId ? renderDragOverlay() : null))));
+        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": coreComponentsShared.getDataTestId(dataTestId, 'container') }, items.map(function (item) { return renderSortableItem(item, { dataTestId: dataTestId }); }))),
+        React__default.default.createElement(coreComponentsPortal.Portal, tslib.__assign({ immediateMount: true }, portalProps),
+            React__default.default.createElement(core.DragOverlay, tslib.__assign({}, dragOverlayProps), activeId ? renderDragOverlay() : null))));
 });
 
-export { SortableList };
+exports.SortableList = SortableList;

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

@@ -1,38 +1,50 @@
-import React from 'react';
-import { useSortable } from '@dnd-kit/sortable';
-import { CSS } from '@dnd-kit/utilities';
-import cn from 'classnames';
-import { getDataTestId } from '../../../../shared/cssm';
-import { DragMIcon } from '@alfalab/icons-glyph/DragMIcon';
-import styles from './index.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const SortableItem = ({ activatorNode, controlPosition, controlPadding, children, className, contentClassName, id, isDragOverlay, disabled, dataTestId, }) => {
-    const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition, isDragging, } = useSortable({
-        id,
-        disabled,
-    });
-    const isCellActivator = !isDragOverlay && activatorNode === 'cell';
-    const isControlActivator = !isDragOverlay && activatorNode === 'control';
-    const renderControl = () => {
-        const hasRightPadding = controlPadding && controlPosition === 'right';
-        const hasLeftPadding = controlPadding && controlPosition === 'left';
-        return (React.createElement("div", { className: cn(styles.icon, {
-                [styles[`control-right-padding-${controlPadding}`]]: hasRightPadding,
-                [styles[`control-left-padding-${controlPadding}`]]: hasLeftPadding,
-            }), ref: isControlActivator ? setActivatorNodeRef : undefined, ...(isControlActivator ? listeners : null), ...(isControlActivator ? attributes : null) },
-            React.createElement(DragMIcon, { "aria-label": 'drag control' })));
+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 coreComponentsShared = require('../../../../shared/cssm');
+var DragMIcon = require('@alfalab/icons-glyph/DragMIcon');
+var styles = require('./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 SortableItem = function (_a) {
+    var _b;
+    var activatorNode = _a.activatorNode, controlPosition = _a.controlPosition, controlPadding = _a.controlPadding, children = _a.children, className = _a.className, contentClassName = _a.contentClassName, 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.createElement("div", { ...(isCellActivator ? listeners : null), ...(isCellActivator ? attributes : null), style: {
-            transform: CSS.Transform.toString(transform),
-            transition,
-        }, className: cn(styles.component, styles[`activator-${activatorNode}`], className, {
-            [styles.disabled]: disabled,
-            [styles.dragging]: isDragging,
-            [styles.dragOverlay]: isDragOverlay,
-        }), ref: setNodeRef, "data-test-id": getDataTestId(dataTestId, `item_${id}`) },
+    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": coreComponentsShared.getDataTestId(dataTestId, "item_".concat(id)) }),
         controlPosition === 'left' && renderControl(),
-        React.createElement("div", { className: cn(styles.content, contentClassName) }, children),
+        React__default.default.createElement("div", { className: cn__default.default(styles__default.default.content, contentClassName) }, children),
         controlPosition === 'right' && renderControl()));
 };
 
-export { SortableItem };
+exports.SortableItem = SortableItem;

package/sortable-list/cssm/index.js

@@ -1,13 +1,7 @@
-export { SortableList } from './Component.js';
-import 'react';
-import '@dnd-kit/core';
-import '@dnd-kit/sortable';
-import 'classnames';
-import '../../portal/cssm';
-import '../../shared/cssm';
-import './components/item/Components.js';
-import '@dnd-kit/utilities';
-import '@alfalab/icons-glyph/DragMIcon';
-import './components/item/index.module.css';
-import './utils.js';
-import './index.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Component = require('./Component.js');
+
+
+
+exports.SortableList = Component.SortableList;

package/sortable-list/cssm/shared/index.js

@@ -1,2 +1,7 @@
-export { getSortableListTestIds } from '../utils.js';
-import '../../../shared/cssm';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var utils = require('../utils.js');
+
+
+
+exports.getSortableListTestIds = utils.getSortableListTestIds;