@alfalab/core-components 44.5.1 → 44.6.0-beta.0

package/slider-input/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: 1ug7i */
+/* hash: yk5qd */
 :root {
 } /* deprecated */ :root {
     --color-light-neutral-700: #898991;
@@ -72,57 +72,57 @@
     --slider-input-progress-hover-bg-color: var(--color-light-neutral-700);
     --slider-input-origin-width: calc(100% - 16px);
     --slider-input-origin-right: 8px;
-} .slider-input__component_vh2hx {
+} .slider-input__component_1jr2t {
     position: relative;
     display: inline-block;
-} .slider-input__block_vh2hx {
+} .slider-input__block_1jr2t {
     display: block;
-} .slider-input__slider_vh2hx {
+} .slider-input__slider_1jr2t {
     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_vh2hx.slider-input__xl_vh2hx {
+} .slider-input__slider_1jr2t.slider-input__xl_1jr2t {
         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_vh2hx .noUi-base {
+    } .slider-input__slider_1jr2t .noUi-base {
         border-radius: var(--slider-input-progress-border-radius);
-    } .slider-input__slider_vh2hx .noUi-base:hover > .noUi-connects {
+    } .slider-input__slider_1jr2t .noUi-base:hover > .noUi-connects {
             background-color: var(--slider-input-progress-hover-bg-color);
-        } .slider-input__slider_vh2hx .noUi-connects {
+        } .slider-input__slider_1jr2t .noUi-connects {
         border-radius: var(--slider-input-progress-border-radius);
         background-color: var(--slider-input-progress-bg-color);
-    } .slider-input__slider_vh2hx .noUi-origin {
+    } .slider-input__slider_1jr2t .noUi-origin {
         width: var(--slider-input-origin-width);
         right: var(--slider-input-origin-right);
-    } .slider-input__slider_vh2hx {
+    } .slider-input__slider_1jr2t {
 
     /* TODO исправить на 6px когда слайдеру добавят position: absolute */
-} .slider-input__slider_vh2hx + * {
+} .slider-input__slider_1jr2t + * {
         margin-top: 5px;
-    } .slider-input__hidePips_vh2hx .noUi-pips {
+    } .slider-input__hidePips_1jr2t .noUi-pips {
         display: none;
-    } .slider-input__component_vh2hx .slider-input__field_vh2hx.slider-input__s_vh2hx {
+    } .slider-input__component_1jr2t .slider-input__field_1jr2t.slider-input__s_1jr2t {
         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_vh2hx .slider-input__field_vh2hx.slider-input__m_vh2hx {
+    } .slider-input__component_1jr2t .slider-input__field_1jr2t.slider-input__m_1jr2t {
         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_vh2hx .slider-input__field_vh2hx.slider-input__l_vh2hx {
+    } .slider-input__component_1jr2t .slider-input__field_1jr2t.slider-input__l_1jr2t {
         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_vh2hx .slider-input__field_vh2hx.slider-input__xl_vh2hx {
+    } .slider-input__component_1jr2t .slider-input__field_1jr2t.slider-input__xl_1jr2t {
         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_vh2hx input,
-    .slider-input__input_vh2hx input + div {
+    } .slider-input__input_1jr2t input,
+    .slider-input__input_1jr2t input + div {
         font-weight: var(--slider-input-font-weight);
         font-variant-numeric: tabular-nums;
-    } .slider-input__input_vh2hx input::placeholder {
+    } .slider-input__input_1jr2t input::placeholder {
         font-weight: 400;
-    } .slider-input__steps_vh2hx {
+    } .slider-input__steps_1jr2t {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
@@ -131,7 +131,7 @@
     justify-content: space-between;
     margin-top: var(--gap-xs);
     color: var(--slider-input-steps-color);
-} .slider-input__info_vh2hx {
+} .slider-input__info_1jr2t {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
@@ -141,24 +141,24 @@
     opacity: 0;
     transition: 0.2s ease;
     visibility: hidden;
-} .slider-input__s_vh2hx.slider-input__hasLabel_vh2hx .slider-input__info_vh2hx:first-child {
+} .slider-input__s_1jr2t.slider-input__hasLabel_1jr2t .slider-input__info_1jr2t:first-child {
     padding: var(--form-control-labeled-s-paddings);
     padding-left: 0;
     padding-right: 0;
-} .slider-input__m_vh2hx.slider-input__hasLabel_vh2hx .slider-input__info_vh2hx:first-child {
+} .slider-input__m_1jr2t.slider-input__hasLabel_1jr2t .slider-input__info_1jr2t:first-child {
     padding: var(--form-control-labeled-m-paddings);
     padding-left: 0;
     padding-right: 0;
-} .slider-input__l_vh2hx.slider-input__hasLabel_vh2hx .slider-input__info_vh2hx:first-child {
+} .slider-input__l_1jr2t.slider-input__hasLabel_1jr2t .slider-input__info_1jr2t:first-child {
     padding: var(--form-control-labeled-l-paddings);
     padding-left: 0;
     padding-right: 0;
-} .slider-input__xl_vh2hx.slider-input__hasLabel_vh2hx .slider-input__info_vh2hx:first-child {
+} .slider-input__xl_1jr2t.slider-input__hasLabel_1jr2t .slider-input__info_1jr2t:first-child {
     padding: var(--form-control-labeled-xl-paddings);
     padding-left: 0;
     padding-right: 0;
-} .slider-input__focused_vh2hx .slider-input__info_vh2hx,
-.slider-input__filled_vh2hx .slider-input__info_vh2hx {
+} .slider-input__focused_1jr2t .slider-input__info_1jr2t,
+.slider-input__filled_1jr2t .slider-input__info_1jr2t {
     visibility: visible;
     opacity: 1;
 }

package/slider-input/index.css

@@ -1,4 +1,4 @@
-/* hash: 1ug7i */
+/* hash: yk5qd */
 :root {
 } /* deprecated */ :root {
     --color-light-neutral-700: #898991;
@@ -72,57 +72,57 @@
     --slider-input-progress-hover-bg-color: var(--color-light-neutral-700);
     --slider-input-origin-width: calc(100% - 16px);
     --slider-input-origin-right: 8px;
-} .slider-input__component_vh2hx {
+} .slider-input__component_1jr2t {
     position: relative;
     display: inline-block;
-} .slider-input__block_vh2hx {
+} .slider-input__block_1jr2t {
     display: block;
-} .slider-input__slider_vh2hx {
+} .slider-input__slider_1jr2t {
     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_vh2hx.slider-input__xl_vh2hx {
+} .slider-input__slider_1jr2t.slider-input__xl_1jr2t {
         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_vh2hx .noUi-base {
+    } .slider-input__slider_1jr2t .noUi-base {
         border-radius: var(--slider-input-progress-border-radius);
-    } .slider-input__slider_vh2hx .noUi-base:hover > .noUi-connects {
+    } .slider-input__slider_1jr2t .noUi-base:hover > .noUi-connects {
             background-color: var(--slider-input-progress-hover-bg-color);
-        } .slider-input__slider_vh2hx .noUi-connects {
+        } .slider-input__slider_1jr2t .noUi-connects {
         border-radius: var(--slider-input-progress-border-radius);
         background-color: var(--slider-input-progress-bg-color);
-    } .slider-input__slider_vh2hx .noUi-origin {
+    } .slider-input__slider_1jr2t .noUi-origin {
         width: var(--slider-input-origin-width);
         right: var(--slider-input-origin-right);
-    } .slider-input__slider_vh2hx {
+    } .slider-input__slider_1jr2t {
 
     /* TODO исправить на 6px когда слайдеру добавят position: absolute */
-} .slider-input__slider_vh2hx + * {
+} .slider-input__slider_1jr2t + * {
         margin-top: 5px;
-    } .slider-input__hidePips_vh2hx .noUi-pips {
+    } .slider-input__hidePips_1jr2t .noUi-pips {
         display: none;
-    } .slider-input__component_vh2hx .slider-input__field_vh2hx.slider-input__s_vh2hx {
+    } .slider-input__component_1jr2t .slider-input__field_1jr2t.slider-input__s_1jr2t {
         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_vh2hx .slider-input__field_vh2hx.slider-input__m_vh2hx {
+    } .slider-input__component_1jr2t .slider-input__field_1jr2t.slider-input__m_1jr2t {
         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_vh2hx .slider-input__field_vh2hx.slider-input__l_vh2hx {
+    } .slider-input__component_1jr2t .slider-input__field_1jr2t.slider-input__l_1jr2t {
         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_vh2hx .slider-input__field_vh2hx.slider-input__xl_vh2hx {
+    } .slider-input__component_1jr2t .slider-input__field_1jr2t.slider-input__xl_1jr2t {
         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_vh2hx input,
-    .slider-input__input_vh2hx input + div {
+    } .slider-input__input_1jr2t input,
+    .slider-input__input_1jr2t input + div {
         font-weight: var(--slider-input-font-weight);
         font-variant-numeric: tabular-nums;
-    } .slider-input__input_vh2hx input::placeholder {
+    } .slider-input__input_1jr2t input::placeholder {
         font-weight: 400;
-    } .slider-input__steps_vh2hx {
+    } .slider-input__steps_1jr2t {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
@@ -131,7 +131,7 @@
     justify-content: space-between;
     margin-top: var(--gap-xs);
     color: var(--slider-input-steps-color);
-} .slider-input__info_vh2hx {
+} .slider-input__info_1jr2t {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
@@ -141,24 +141,24 @@
     opacity: 0;
     transition: 0.2s ease;
     visibility: hidden;
-} .slider-input__s_vh2hx.slider-input__hasLabel_vh2hx .slider-input__info_vh2hx:first-child {
+} .slider-input__s_1jr2t.slider-input__hasLabel_1jr2t .slider-input__info_1jr2t:first-child {
     padding: var(--form-control-labeled-s-paddings);
     padding-left: 0;
     padding-right: 0;
-} .slider-input__m_vh2hx.slider-input__hasLabel_vh2hx .slider-input__info_vh2hx:first-child {
+} .slider-input__m_1jr2t.slider-input__hasLabel_1jr2t .slider-input__info_1jr2t:first-child {
     padding: var(--form-control-labeled-m-paddings);
     padding-left: 0;
     padding-right: 0;
-} .slider-input__l_vh2hx.slider-input__hasLabel_vh2hx .slider-input__info_vh2hx:first-child {
+} .slider-input__l_1jr2t.slider-input__hasLabel_1jr2t .slider-input__info_1jr2t:first-child {
     padding: var(--form-control-labeled-l-paddings);
     padding-left: 0;
     padding-right: 0;
-} .slider-input__xl_vh2hx.slider-input__hasLabel_vh2hx .slider-input__info_vh2hx:first-child {
+} .slider-input__xl_1jr2t.slider-input__hasLabel_1jr2t .slider-input__info_1jr2t:first-child {
     padding: var(--form-control-labeled-xl-paddings);
     padding-left: 0;
     padding-right: 0;
-} .slider-input__focused_vh2hx .slider-input__info_vh2hx,
-.slider-input__filled_vh2hx .slider-input__info_vh2hx {
+} .slider-input__focused_1jr2t .slider-input__info_1jr2t,
+.slider-input__filled_1jr2t .slider-input__info_1jr2t {
     visibility: visible;
     opacity: 1;
 }

package/slider-input/index.js

@@ -1,11 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var Component = require('./Component.js');
-require('tslib');
-require('react');
-require('classnames');
-require('../input');
-require('../slider');
 
 
 

package/slider-input/modern/Component.d.ts

@@ -80,6 +80,14 @@ type SliderInputProps = Omit<InputProps, 'min' | 'max' | 'step' | 'value' | 'typ
     onSliderChange?: (payload: {
         value: number;
     }) => void;
+    /**
+     * Обработчик начала перетаскивания ползунка
+     */
+    onSliderStart?: SliderProps['onStart'];
+    /**
+     * Обработчик окончания перетаскивания ползунка
+     */
+    onSliderEnd?: SliderProps['onEnd'];
     /**
      * Идентификатор для систем автоматизированного тестирования
      */
@@ -162,6 +170,14 @@ declare const SliderInput: React.ForwardRefExoticComponent<Omit<InputProps, "val
     onSliderChange?: ((payload: {
         value: number;
     }) => void) | undefined;
+    /**
+     * Обработчик начала перетаскивания ползунка
+     */
+    onSliderStart?: SliderProps['onStart'];
+    /**
+     * Обработчик окончания перетаскивания ползунка
+     */
+    onSliderEnd?: SliderProps['onEnd'];
     /**
      * Идентификатор для систем автоматизированного тестирования
      */

package/slider-input/modern/Component.js

@@ -3,10 +3,10 @@ import cn from 'classnames';
 import { Input } from '../../input/modern';
 import { Slider } from '../../slider/modern';
 
-const styles = {"component":"slider-input__component_vh2hx","block":"slider-input__block_vh2hx","slider":"slider-input__slider_vh2hx","xl":"slider-input__xl_vh2hx","hidePips":"slider-input__hidePips_vh2hx","field":"slider-input__field_vh2hx","s":"slider-input__s_vh2hx","m":"slider-input__m_vh2hx","l":"slider-input__l_vh2hx","input":"slider-input__input_vh2hx","steps":"slider-input__steps_vh2hx","info":"slider-input__info_vh2hx","hasLabel":"slider-input__hasLabel_vh2hx","focused":"slider-input__focused_vh2hx","filled":"slider-input__filled_vh2hx"};
+const styles = {"component":"slider-input__component_1jr2t","block":"slider-input__block_1jr2t","slider":"slider-input__slider_1jr2t","xl":"slider-input__xl_1jr2t","hidePips":"slider-input__hidePips_1jr2t","field":"slider-input__field_1jr2t","s":"slider-input__s_1jr2t","m":"slider-input__m_1jr2t","l":"slider-input__l_1jr2t","input":"slider-input__input_1jr2t","steps":"slider-input__steps_1jr2t","info":"slider-input__info_1jr2t","hasLabel":"slider-input__hasLabel_1jr2t","focused":"slider-input__focused_1jr2t","filled":"slider-input__filled_1jr2t"};
 require('./index.css');
 
-const SliderInput = forwardRef(({ className, inputClassName, sliderClassName, stepsClassName, focusedClassName, fieldClassName, value = '', min = 0, max = 100, step = 1, block, steps = [], sliderValue = +value, size = 's', label, info, disabled, readOnly, onChange, onInputChange, onSliderChange, rightAddons, Input: Input$1 = Input, customInputProps = {}, error, hint, pips, range, dataTestId, ...restProps }, ref) => {
+const SliderInput = forwardRef(({ className, inputClassName, sliderClassName, stepsClassName, focusedClassName, fieldClassName, value = '', min = 0, max = 100, step = 1, block, steps = [], sliderValue = +value, size = 's', 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);
@@ -29,7 +29,7 @@ const SliderInput = forwardRef(({ className, inputClassName, sliderClassName, st
             [styles.hasLabel]: label,
             [styles.hasError]: Boolean(error),
         }, styles[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]), inputMode: 'numeric', pattern: '[0-9]*', error: error, hint: hint, bottomAddons: !disabled && (React.createElement(Slider, { min: min, max: max, step: step, onChange: handleSliderChange, value: Number.isNaN(sliderValue) || !sliderValue ? min : sliderValue, disabled: disabled || readOnly, className: cn(styles.slider, styles[size], { [styles.hidePips]: error || hint }, sliderClassName), pips: pips, range: range })), rightAddons: (info || rightAddons) && (React.createElement(Fragment, null,
+        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]), 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], { [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)))))));

package/slider-input/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: 1ug7i */
+/* hash: yk5qd */
 :root {
 } /* deprecated */ :root {
     --color-light-neutral-700: #898991;
@@ -72,57 +72,57 @@
     --slider-input-progress-hover-bg-color: var(--color-light-neutral-700);
     --slider-input-origin-width: calc(100% - 16px);
     --slider-input-origin-right: 8px;
-} .slider-input__component_vh2hx {
+} .slider-input__component_1jr2t {
     position: relative;
     display: inline-block;
-} .slider-input__block_vh2hx {
+} .slider-input__block_1jr2t {
     display: block;
-} .slider-input__slider_vh2hx {
+} .slider-input__slider_1jr2t {
     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_vh2hx.slider-input__xl_vh2hx {
+} .slider-input__slider_1jr2t.slider-input__xl_1jr2t {
         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_vh2hx .noUi-base {
+    } .slider-input__slider_1jr2t .noUi-base {
         border-radius: var(--slider-input-progress-border-radius);
-    } .slider-input__slider_vh2hx .noUi-base:hover > .noUi-connects {
+    } .slider-input__slider_1jr2t .noUi-base:hover > .noUi-connects {
             background-color: var(--slider-input-progress-hover-bg-color);
-        } .slider-input__slider_vh2hx .noUi-connects {
+        } .slider-input__slider_1jr2t .noUi-connects {
         border-radius: var(--slider-input-progress-border-radius);
         background-color: var(--slider-input-progress-bg-color);
-    } .slider-input__slider_vh2hx .noUi-origin {
+    } .slider-input__slider_1jr2t .noUi-origin {
         width: var(--slider-input-origin-width);
         right: var(--slider-input-origin-right);
-    } .slider-input__slider_vh2hx {
+    } .slider-input__slider_1jr2t {
 
     /* TODO исправить на 6px когда слайдеру добавят position: absolute */
-} .slider-input__slider_vh2hx + * {
+} .slider-input__slider_1jr2t + * {
         margin-top: 5px;
-    } .slider-input__hidePips_vh2hx .noUi-pips {
+    } .slider-input__hidePips_1jr2t .noUi-pips {
         display: none;
-    } .slider-input__component_vh2hx .slider-input__field_vh2hx.slider-input__s_vh2hx {
+    } .slider-input__component_1jr2t .slider-input__field_1jr2t.slider-input__s_1jr2t {
         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_vh2hx .slider-input__field_vh2hx.slider-input__m_vh2hx {
+    } .slider-input__component_1jr2t .slider-input__field_1jr2t.slider-input__m_1jr2t {
         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_vh2hx .slider-input__field_vh2hx.slider-input__l_vh2hx {
+    } .slider-input__component_1jr2t .slider-input__field_1jr2t.slider-input__l_1jr2t {
         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_vh2hx .slider-input__field_vh2hx.slider-input__xl_vh2hx {
+    } .slider-input__component_1jr2t .slider-input__field_1jr2t.slider-input__xl_1jr2t {
         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_vh2hx input,
-    .slider-input__input_vh2hx input + div {
+    } .slider-input__input_1jr2t input,
+    .slider-input__input_1jr2t input + div {
         font-weight: var(--slider-input-font-weight);
         font-variant-numeric: tabular-nums;
-    } .slider-input__input_vh2hx input::placeholder {
+    } .slider-input__input_1jr2t input::placeholder {
         font-weight: 400;
-    } .slider-input__steps_vh2hx {
+    } .slider-input__steps_1jr2t {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
@@ -131,7 +131,7 @@
     justify-content: space-between;
     margin-top: var(--gap-xs);
     color: var(--slider-input-steps-color);
-} .slider-input__info_vh2hx {
+} .slider-input__info_1jr2t {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
@@ -141,24 +141,24 @@
     opacity: 0;
     transition: 0.2s ease;
     visibility: hidden;
-} .slider-input__s_vh2hx.slider-input__hasLabel_vh2hx .slider-input__info_vh2hx:first-child {
+} .slider-input__s_1jr2t.slider-input__hasLabel_1jr2t .slider-input__info_1jr2t:first-child {
     padding: var(--form-control-labeled-s-paddings);
     padding-left: 0;
     padding-right: 0;
-} .slider-input__m_vh2hx.slider-input__hasLabel_vh2hx .slider-input__info_vh2hx:first-child {
+} .slider-input__m_1jr2t.slider-input__hasLabel_1jr2t .slider-input__info_1jr2t:first-child {
     padding: var(--form-control-labeled-m-paddings);
     padding-left: 0;
     padding-right: 0;
-} .slider-input__l_vh2hx.slider-input__hasLabel_vh2hx .slider-input__info_vh2hx:first-child {
+} .slider-input__l_1jr2t.slider-input__hasLabel_1jr2t .slider-input__info_1jr2t:first-child {
     padding: var(--form-control-labeled-l-paddings);
     padding-left: 0;
     padding-right: 0;
-} .slider-input__xl_vh2hx.slider-input__hasLabel_vh2hx .slider-input__info_vh2hx:first-child {
+} .slider-input__xl_1jr2t.slider-input__hasLabel_1jr2t .slider-input__info_1jr2t:first-child {
     padding: var(--form-control-labeled-xl-paddings);
     padding-left: 0;
     padding-right: 0;
-} .slider-input__focused_vh2hx .slider-input__info_vh2hx,
-.slider-input__filled_vh2hx .slider-input__info_vh2hx {
+} .slider-input__focused_1jr2t .slider-input__info_1jr2t,
+.slider-input__filled_1jr2t .slider-input__info_1jr2t {
     visibility: visible;
     opacity: 1;
 }

package/sortable-list/Component.js

@@ -9,15 +9,13 @@ var coreComponentsPortal = require('../portal');
 var coreComponentsShared = require('../shared');
 var components_item_Components = require('./components/item/Components.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_dugc5","primary":"sortable-list__primary_dugc5","secondary":"sortable-list__secondary_dugc5","padding-top-3xs":"sortable-list__padding-top-3xs_dugc5","padding-bottom-3xs":"sortable-list__padding-bottom-3xs_dugc5","padding-left-3xs":"sortable-list__padding-left-3xs_dugc5","padding-right-3xs":"sortable-list__padding-right-3xs_dugc5","padding-top-2xs":"sortable-list__padding-top-2xs_dugc5","padding-bottom-2xs":"sortable-list__padding-bottom-2xs_dugc5","padding-left-2xs":"sortable-list__padding-left-2xs_dugc5","padding-right-2xs":"sortable-list__padding-right-2xs_dugc5","padding-top-xs":"sortable-list__padding-top-xs_dugc5","padding-bottom-xs":"sortable-list__padding-bottom-xs_dugc5","padding-left-xs":"sortable-list__padding-left-xs_dugc5","padding-right-xs":"sortable-list__padding-right-xs_dugc5","padding-top-s":"sortable-list__padding-top-s_dugc5","padding-bottom-s":"sortable-list__padding-bottom-s_dugc5","padding-left-s":"sortable-list__padding-left-s_dugc5","padding-right-s":"sortable-list__padding-right-s_dugc5","padding-top-m":"sortable-list__padding-top-m_dugc5","padding-bottom-m":"sortable-list__padding-bottom-m_dugc5","padding-left-m":"sortable-list__padding-left-m_dugc5","padding-right-m":"sortable-list__padding-right-m_dugc5","padding-top-l":"sortable-list__padding-top-l_dugc5","padding-bottom-l":"sortable-list__padding-bottom-l_dugc5","padding-left-l":"sortable-list__padding-left-l_dugc5","padding-right-l":"sortable-list__padding-right-l_dugc5","border-radius-m":"sortable-list__border-radius-m_dugc5","border-radius-l":"sortable-list__border-radius-l_dugc5","border-radius-xl":"sortable-list__border-radius-xl_dugc5"};
+var styles = {"component":"sortable-list__component_iii94","primary":"sortable-list__primary_iii94","secondary":"sortable-list__secondary_iii94","padding-top-3xs":"sortable-list__padding-top-3xs_iii94","padding-bottom-3xs":"sortable-list__padding-bottom-3xs_iii94","padding-left-3xs":"sortable-list__padding-left-3xs_iii94","padding-right-3xs":"sortable-list__padding-right-3xs_iii94","padding-top-2xs":"sortable-list__padding-top-2xs_iii94","padding-bottom-2xs":"sortable-list__padding-bottom-2xs_iii94","padding-left-2xs":"sortable-list__padding-left-2xs_iii94","padding-right-2xs":"sortable-list__padding-right-2xs_iii94","padding-top-xs":"sortable-list__padding-top-xs_iii94","padding-bottom-xs":"sortable-list__padding-bottom-xs_iii94","padding-left-xs":"sortable-list__padding-left-xs_iii94","padding-right-xs":"sortable-list__padding-right-xs_iii94","padding-top-s":"sortable-list__padding-top-s_iii94","padding-bottom-s":"sortable-list__padding-bottom-s_iii94","padding-left-s":"sortable-list__padding-left-s_iii94","padding-right-s":"sortable-list__padding-right-s_iii94","padding-top-m":"sortable-list__padding-top-m_iii94","padding-bottom-m":"sortable-list__padding-bottom-m_iii94","padding-left-m":"sortable-list__padding-left-m_iii94","padding-right-m":"sortable-list__padding-right-m_iii94","padding-top-l":"sortable-list__padding-top-l_iii94","padding-bottom-l":"sortable-list__padding-bottom-l_iii94","padding-left-l":"sortable-list__padding-left-l_iii94","padding-right-l":"sortable-list__padding-right-l_iii94","border-radius-m":"sortable-list__border-radius-m_iii94","border-radius-l":"sortable-list__border-radius-l_iii94","border-radius-xl":"sortable-list__border-radius-xl_iii94"};
 require('./index.css');
 
 var DEFAULT_INSTRUCTION = 'Чтобы выбрать перетаскиваемый элемент, нажмите пробел.\n' +
@@ -48,7 +46,7 @@ var DEFAULT_ANNOUNCEMENTS = {
 };
 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, portalProps = _a.portalProps, dragOverlayProps = _a.dragOverlayProps;
+    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 () {
@@ -88,7 +86,7 @@ var SortableList = React.forwardRef(function (_a, ref) {
     };
     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)));
+        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; });

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

@@ -13,12 +13,12 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"component":"sortable-list__component_96gnd","icon":"sortable-list__icon_96gnd","activator-cell":"sortable-list__activator-cell_96gnd","disabled":"sortable-list__disabled_96gnd","dragOverlay":"sortable-list__dragOverlay_96gnd","activator-control":"sortable-list__activator-control_96gnd","content":"sortable-list__content_96gnd","dragging":"sortable-list__dragging_96gnd","pop":"sortable-list__pop_96gnd","control-left-padding-3xs":"sortable-list__control-left-padding-3xs_96gnd","control-right-padding-3xs":"sortable-list__control-right-padding-3xs_96gnd","control-left-padding-2xs":"sortable-list__control-left-padding-2xs_96gnd","control-right-padding-2xs":"sortable-list__control-right-padding-2xs_96gnd","control-left-padding-xs":"sortable-list__control-left-padding-xs_96gnd","control-right-padding-xs":"sortable-list__control-right-padding-xs_96gnd","control-left-padding-s":"sortable-list__control-left-padding-s_96gnd","control-right-padding-s":"sortable-list__control-right-padding-s_96gnd","control-left-padding-m":"sortable-list__control-left-padding-m_96gnd","control-right-padding-m":"sortable-list__control-right-padding-m_96gnd","control-left-padding-l":"sortable-list__control-left-padding-l_96gnd","control-right-padding-l":"sortable-list__control-right-padding-l_96gnd"};
+var styles = {"component":"sortable-list__component_obst1","icon":"sortable-list__icon_obst1","activator-cell":"sortable-list__activator-cell_obst1","disabled":"sortable-list__disabled_obst1","dragOverlay":"sortable-list__dragOverlay_obst1","activator-control":"sortable-list__activator-control_obst1","content":"sortable-list__content_obst1","dragging":"sortable-list__dragging_obst1","pop":"sortable-list__pop_obst1","control-left-padding-3xs":"sortable-list__control-left-padding-3xs_obst1","control-right-padding-3xs":"sortable-list__control-right-padding-3xs_obst1","control-left-padding-2xs":"sortable-list__control-left-padding-2xs_obst1","control-right-padding-2xs":"sortable-list__control-right-padding-2xs_obst1","control-left-padding-xs":"sortable-list__control-left-padding-xs_obst1","control-right-padding-xs":"sortable-list__control-right-padding-xs_obst1","control-left-padding-s":"sortable-list__control-left-padding-s_obst1","control-right-padding-s":"sortable-list__control-right-padding-s_obst1","control-left-padding-m":"sortable-list__control-left-padding-m_obst1","control-right-padding-m":"sortable-list__control-right-padding-m_obst1","control-left-padding-l":"sortable-list__control-left-padding-l_obst1","control-right-padding-l":"sortable-list__control-right-padding-l_obst1"};
 require('./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 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,
@@ -44,7 +44,7 @@ var SortableItem = function (_a) {
             _b[styles.dragOverlay] = isDragOverlay,
             _b)), ref: setNodeRef, "data-test-id": coreComponentsShared.getDataTestId(dataTestId, "item_".concat(id)) }),
         controlPosition === 'left' && renderControl(),
-        React__default.default.createElement("div", { className: cn__default.default(styles.content) }, children),
+        React__default.default.createElement("div", { className: cn__default.default(styles.content, contentClassName) }, children),
         controlPosition === 'right' && renderControl()));
 };
 

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

@@ -1,4 +1,4 @@
-/* hash: mqxo9 */
+/* hash: hx2c2 */
 :root {
 } /* deprecated */ :root {
     --color-light-neutral-1500: #0e0e0e;
@@ -24,58 +24,58 @@
     --gap-l: 20px;
 } :root {
 } :root {
-} .sortable-list__component_96gnd {
+} .sortable-list__component_obst1 {
     display: flex;
     align-items: center;
     box-sizing: border-box;
     min-height: 48px
-} .sortable-list__component_96gnd:hover .sortable-list__icon_96gnd {
+} .sortable-list__component_obst1:hover .sortable-list__icon_obst1 {
             color: var(--color-light-neutral-1500);
-        } .sortable-list__activator-cell_96gnd:not(.sortable-list__disabled_96gnd) {
+        } .sortable-list__activator-cell_obst1:not(.sortable-list__disabled_obst1) {
     cursor: grab
-} .sortable-list__activator-cell_96gnd:not(.sortable-list__disabled_96gnd).sortable-list__dragOverlay_96gnd {
+} .sortable-list__activator-cell_obst1:not(.sortable-list__disabled_obst1).sortable-list__dragOverlay_obst1 {
         cursor: grabbing;
-    } .sortable-list__activator-control_96gnd:not(.sortable-list__disabled_96gnd) .sortable-list__icon_96gnd {
+    } .sortable-list__activator-control_obst1:not(.sortable-list__disabled_obst1) .sortable-list__icon_obst1 {
         cursor: grab;
-    } .sortable-list__activator-control_96gnd:not(.sortable-list__disabled_96gnd).sortable-list__dragOverlay_96gnd .sortable-list__icon_96gnd {
+    } .sortable-list__activator-control_obst1:not(.sortable-list__disabled_obst1).sortable-list__dragOverlay_obst1 .sortable-list__icon_obst1 {
         cursor: grabbing;
-    } .sortable-list__content_96gnd {
+    } .sortable-list__content_obst1 {
     flex: 1;
-} .sortable-list__icon_96gnd {
+} .sortable-list__icon_obst1 {
     flex-shrink: 0;
     color: var(--color-light-neutral-translucent-700);
-} .sortable-list__dragging_96gnd {
+} .sortable-list__dragging_obst1 {
     opacity: 0;
-} .sortable-list__dragOverlay_96gnd {
+} .sortable-list__dragOverlay_obst1 {
     box-shadow: var(--shadow-s);
-    animation: sortable-list__pop_96gnd 200ms ease
-} .sortable-list__dragOverlay_96gnd .sortable-list__icon_96gnd {
+    animation: sortable-list__pop_obst1 200ms ease
+} .sortable-list__dragOverlay_obst1 .sortable-list__icon_obst1 {
         color: var(--color-light-neutral-1500);
-    } .sortable-list__control-left-padding-3xs_96gnd {
+    } .sortable-list__control-left-padding-3xs_obst1 {
         padding-left: var(--gap-3xs);
-    } .sortable-list__control-right-padding-3xs_96gnd {
+    } .sortable-list__control-right-padding-3xs_obst1 {
         padding-right: var(--gap-3xs);
-    } .sortable-list__control-left-padding-2xs_96gnd {
+    } .sortable-list__control-left-padding-2xs_obst1 {
         padding-left: var(--gap-2xs);
-    } .sortable-list__control-right-padding-2xs_96gnd {
+    } .sortable-list__control-right-padding-2xs_obst1 {
         padding-right: var(--gap-2xs);
-    } .sortable-list__control-left-padding-xs_96gnd {
+    } .sortable-list__control-left-padding-xs_obst1 {
         padding-left: var(--gap-xs);
-    } .sortable-list__control-right-padding-xs_96gnd {
+    } .sortable-list__control-right-padding-xs_obst1 {
         padding-right: var(--gap-xs);
-    } .sortable-list__control-left-padding-s_96gnd {
+    } .sortable-list__control-left-padding-s_obst1 {
         padding-left: var(--gap-s);
-    } .sortable-list__control-right-padding-s_96gnd {
+    } .sortable-list__control-right-padding-s_obst1 {
         padding-right: var(--gap-s);
-    } .sortable-list__control-left-padding-m_96gnd {
+    } .sortable-list__control-left-padding-m_obst1 {
         padding-left: var(--gap-m);
-    } .sortable-list__control-right-padding-m_96gnd {
+    } .sortable-list__control-right-padding-m_obst1 {
         padding-right: var(--gap-m);
-    } .sortable-list__control-left-padding-l_96gnd {
+    } .sortable-list__control-left-padding-l_obst1 {
         padding-left: var(--gap-l);
-    } .sortable-list__control-right-padding-l_96gnd {
+    } .sortable-list__control-right-padding-l_obst1 {
         padding-right: var(--gap-l);
-    } @keyframes sortable-list__pop_96gnd {
+    } @keyframes sortable-list__pop_obst1 {
     from {
         box-shadow: none;
     }