@alfalab/core-components 45.6.0-beta.1 → 45.6.0-beta.2

package/side-panel/modern/Component.responsive.js

@@ -7,7 +7,7 @@ import { SidePanelDesktop } from './desktop/Component.desktop.js';
 import { SidePanelMobile } from './mobile/Component.mobile.js';
 import { ResponsiveContext } from './ResponsiveContext.js';
 import 'classnames';
-import './layout.module-6d7e6df8.js';
+import './layout.module-f0d01a2c.js';
 import '../../navigation-bar/modern';
 import './consts.js';
 import './Context.js';

package/side-panel/modern/components/controls/Component.js

@@ -2,7 +2,7 @@ import React, { useContext } from 'react';
 import cn from 'classnames';
 import { getDataTestId } from '../../../../shared/modern';
 import { ResponsiveContext } from '../../ResponsiveContext.js';
-import { l as layoutStyles } from '../../layout.module-6d7e6df8.js';
+import { l as layoutStyles } from '../../layout.module-f0d01a2c.js';
 
 const styles = {"component":"side-panel__component_10s36"};
 require('./index.css');

package/side-panel/modern/components/controls/index.js

@@ -3,4 +3,4 @@ import 'react';
 import 'classnames';
 import '../../../../shared/modern';
 import '../../ResponsiveContext.js';
-import '../../layout.module-6d7e6df8.js';
+import '../../layout.module-f0d01a2c.js';

package/side-panel/modern/components/footer/Component.desktop.js

@@ -6,7 +6,7 @@ import '../../../../shared/modern';
 import '../../Context.js';
 import '../../../../base-modal/modern';
 import '../../ResponsiveContext.js';
-import '../../layout.module-6d7e6df8.js';
+import '../../layout.module-f0d01a2c.js';
 
 const styles = {"sticky":"side-panel__sticky_1y7ff","size-500":"side-panel__size-500_1y7ff"};
 require('./desktop.css');

package/side-panel/modern/components/footer/Component.js

@@ -3,7 +3,7 @@ import cn from 'classnames';
 import { getDataTestId } from '../../../../shared/modern';
 import { ModalContext } from '../../Context.js';
 import { ResponsiveContext } from '../../ResponsiveContext.js';
-import { l as layoutStyles } from '../../layout.module-6d7e6df8.js';
+import { l as layoutStyles } from '../../layout.module-f0d01a2c.js';
 import '../../../../base-modal/modern';
 
 const styles = {"footer":"side-panel__footer_tyr27","sticky":"side-panel__sticky_tyr27","highlighted":"side-panel__highlighted_tyr27"};

package/side-panel/modern/components/footer/Component.mobile.js

@@ -5,7 +5,7 @@ import '../../../../shared/modern';
 import '../../Context.js';
 import '../../../../base-modal/modern';
 import '../../ResponsiveContext.js';
-import '../../layout.module-6d7e6df8.js';
+import '../../layout.module-f0d01a2c.js';
 
 const styles = {"footer":"side-panel__footer_15pp7","sticky":"side-panel__sticky_15pp7"};
 require('./mobile.css');

package/side-panel/modern/desktop/Component.desktop.js

@@ -12,7 +12,7 @@ import '../components/content/Component.js';
 import '../../../shared/modern';
 import '../Context.js';
 import '../../../base-modal/modern';
-import '../layout.module-6d7e6df8.js';
+import '../layout.module-f0d01a2c.js';
 import '../components/footer/Component.js';
 import '../../../navigation-bar/modern';
 

package/side-panel/modern/desktop/index.js

@@ -11,7 +11,7 @@ import '../Context.js';
 import '../../../base-modal/modern';
 import '../ResponsiveContext.js';
 import '../components/controls/Component.js';
-import '../layout.module-6d7e6df8.js';
+import '../layout.module-f0d01a2c.js';
 import '../components/footer/Component.desktop.js';
 import '../components/footer/Component.js';
 import '../components/header/Component.js';

package/side-panel/modern/index.js

@@ -5,7 +5,7 @@ import '../../shared/modern';
 import './components/controls/Component.js';
 import 'classnames';
 import './ResponsiveContext.js';
-import './layout.module-6d7e6df8.js';
+import './layout.module-f0d01a2c.js';
 import './components/header/Component.js';
 import '../../navigation-bar/modern';
 import './consts.js';

package/side-panel/modern/mobile/Component.mobile.js

@@ -9,7 +9,7 @@ import { ResponsiveContext } from '../ResponsiveContext.js';
 import '../components/content/Component.js';
 import '../../../shared/modern';
 import '../Context.js';
-import '../layout.module-6d7e6df8.js';
+import '../layout.module-f0d01a2c.js';
 import '../components/footer/Component.js';
 import '../../../navigation-bar/modern';
 import '../consts.js';

package/side-panel/modern/mobile/index.js

@@ -8,7 +8,7 @@ import '../../../shared/modern';
 import '../Context.js';
 import '../ResponsiveContext.js';
 import '../components/controls/Component.js';
-import '../layout.module-6d7e6df8.js';
+import '../layout.module-f0d01a2c.js';
 import '../components/footer/Component.mobile.js';
 import '../components/footer/Component.js';
 import '../components/header/Component.js';

package/skeleton/cssm/Component.js

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

package/skeleton/cssm/index.js

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

package/slider/cssm/Component.js

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

package/slider/cssm/index.js

@@ -1,8 +1,4 @@
-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;
+export { SIZE_TO_CLASSNAME_MAP, Slider } from './Component.js';
+import 'react';
+import 'classnames';
+import 'nouislider';

package/slider-input/cssm/Component.js

@@ -1,19 +1,12 @@
-Object.defineProperty(exports, '__esModule', { value: true });
+import React, { forwardRef, useCallback, Fragment, isValidElement, cloneElement } from 'react';
+import cn from 'classnames';
+import { Input } from '../../input/cssm';
+import { Slider } from '../../slider/cssm';
 
-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');
+const styles = {"component":"component","block":"block","slider":"slider","size-72":"size-72","hidePips":"hidePips","field":"field","size-48":"size-48","size-56":"size-56","size-64":"size-64","input":"input","steps":"steps","info":"info","hasLabel":"hasLabel","focused":"focused","filled":"filled"};
+require('./index.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 = {
+const SIZE_TO_CLASSNAME_MAP = {
     s: 'size-48',
     m: 'size-56',
     l: 'size-64',
@@ -23,37 +16,33 @@ var SIZE_TO_CLASSNAME_MAP = {
     64: 'size-64',
     72: 'size-72',
 };
-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);
+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);
         return inputValue === '' || Number.isNaN(number) ? '' : Math.abs(number);
     }, []);
-    var handleSliderChange = React.useCallback(function (payload) {
+    const handleSliderChange = useCallback((payload) => {
         if (onChange)
             onChange(null, payload);
         if (onSliderChange)
             onSliderChange(payload);
     }, [onChange, onSliderChange]);
-    var handleInputChange = React.useCallback(function (event, payload) {
+    const handleInputChange = useCallback((event, payload) => {
         if (onChange)
             onChange(event, { value: getValidInputValue(payload.value) });
         if (onInputChange)
             onInputChange(event, { value: getValidInputValue(payload.value) });
     }, [getValidInputValue, onChange, onInputChange]);
-    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));
-        })))));
+    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)))))));
 });
 
-exports.SliderInput = SliderInput;
+export { SliderInput };

package/slider-input/cssm/index.js

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

package/sortable-list/cssm/Component.js

@@ -1,107 +1,93 @@
-Object.defineProperty(exports, '__esModule', { value: true });
+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 '@dnd-kit/utilities';
+import '@alfalab/icons-glyph/DragMIcon';
 
-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');
+const styles = {"component":"component","primary":"primary","secondary":"secondary","padding-top-3xs":"padding-top-3xs","padding-bottom-3xs":"padding-bottom-3xs","padding-left-3xs":"padding-left-3xs","padding-right-3xs":"padding-right-3xs","padding-top-2xs":"padding-top-2xs","padding-bottom-2xs":"padding-bottom-2xs","padding-left-2xs":"padding-left-2xs","padding-right-2xs":"padding-right-2xs","padding-top-xs":"padding-top-xs","padding-bottom-xs":"padding-bottom-xs","padding-left-xs":"padding-left-xs","padding-right-xs":"padding-right-xs","padding-top-s":"padding-top-s","padding-bottom-s":"padding-bottom-s","padding-left-s":"padding-left-s","padding-right-s":"padding-right-s","padding-top-m":"padding-top-m","padding-bottom-m":"padding-bottom-m","padding-left-m":"padding-left-m","padding-right-m":"padding-right-m","padding-top-l":"padding-top-l","padding-bottom-l":"padding-bottom-l","padding-left-l":"padding-left-l","padding-right-l":"padding-right-l","border-radius-m":"border-radius-m","border-radius-l":"border-radius-l","border-radius-xl":"border-radius-xl"};
+require('./index.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' +
+const 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, ".");
+const DEFAULT_ANNOUNCEMENTS = {
+    onDragStart({ active }) {
+        return `Выбран элемент ${active.id}.`;
     },
-    onDragOver: function (_a) {
-        var active = _a.active, over = _a.over;
+    onDragOver({ active, 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 `Выбранный элемент ${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 \u0437\u0430 \u043F\u0440\u0435\u0434\u0435\u043B\u0430\u043C\u0438 droppable \u0437\u043E\u043D\u044B.");
+        return `Выбранный элемент ${active.id} находится за пределами droppable зоны.`;
     },
-    onDragEnd: function (_a) {
-        var active = _a.active, over = _a.over;
+    onDragEnd({ active, 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 `Выбранный элемент ${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\u0435 \u0431\u044B\u043B \u043F\u0435\u0440\u0435\u043C\u0435\u0449\u0435\u043D.");
+        return `Выбранный элемент ${active.id} не был перемещен.`;
     },
-    onDragCancel: function () {
+    onDragCancel() {
         return 'Перемещение было отменено';
     },
 };
-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;
+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 = () => {
         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));
+            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,
+            });
         }
         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 cn(styles[`padding-top-${padding}`], styles[`padding-right-${padding}`], styles[`padding-bottom-${padding}`], styles[`padding-left-${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;
+    const commonClassName = cn(styles[view], {
+        [styles[`border-radius-${borderRadius}`]]: borderRadius,
+    });
+    const sortableItemClassName = cn(commonClassName, itemClassName);
+    const handleDragStart = (event) => {
+        const { active } = event;
         setActiveId(active.id);
-        onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(event);
+        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));
+    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));
             return;
         }
-        onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(event, items);
+        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, contentClassName: itemContentClassName, activatorNode: activatorNode, disabled: item.disabled }, restProps), renderItem(item)));
-    };
-    var renderDragOverlay = function () {
-        var activeItem = items.find(function (item) { return item.id === activeId; });
+    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);
         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,
+    return (React.createElement(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragStart: handleDragStart, onDragEnd: handleDragEnd, modifiers: [restrictToParentElement, restrictToVerticalAxis], accessibility: {
+            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": 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))));
+        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))));
 });
 
-exports.SortableList = SortableList;
+export { SortableList };