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

package/select/modern/presets/useSelectWithApply/hook.js

@@ -1,12 +1,12 @@
 import 'react';
-export { S as SELECT_ALL_KEY, u as useSelectWithApply } from '../../hook-3e36491b.js';
+import '../../../../shared/modern';
+export { S as SELECT_ALL_KEY, u as useSelectWithApply } from '../../hook-328d58fb.js';
 import '../../utils.js';
 import '../../components/options-list/Component.js';
 import 'react-merge-refs';
 import 'classnames';
 import '../../../../mq/modern';
 import '../../../../scrollbar/modern';
-import '../../../../shared/modern';
 import '../../consts.js';
 import '../../components/optgroup/Component.js';
 import './options-list-with-apply/footer/Component.js';

package/select/modern/presets/useSelectWithApply/options-list-with-apply/Component.js

@@ -1,6 +1,6 @@
 import 'react';
 import '../../../components/options-list/Component.js';
-export { O as OptionsListWithApply } from '../../../hook-3e36491b.js';
+export { O as OptionsListWithApply } from '../../../hook-328d58fb.js';
 import './footer/Component.js';
 import './header/Component.js';
 import 'react-merge-refs';

package/select/modern/presets/useSelectWithApply/options-list-with-apply/footer/Component.d.ts

@@ -6,6 +6,7 @@ type FooterProps = {
     handleApply?: () => void;
     showClear?: boolean;
     selectedDraft?: OptionShape[];
+    dataTestId?: string;
 };
-declare const Footer: ({ handleApply, handleClear, showClear, selectedDraft, }: FooterProps) => React.JSX.Element;
+declare const Footer: ({ handleApply, handleClear, showClear, selectedDraft, dataTestId, }: FooterProps) => React.JSX.Element;
 export { FooterProps, Footer };

package/select/modern/presets/useSelectWithApply/options-list-with-apply/footer/Component.js

@@ -1,13 +1,14 @@
 import React from 'react';
 import { ButtonDesktop } from '../../../../../../button/modern/desktop';
+import { getDataTestId } from '../../../../../../shared/modern';
 
 const styles = {"footer":"select__footer_1lhq3"};
 require('./index.css');
 
-const Footer = ({ handleApply, handleClear, showClear, selectedDraft = [], }) => (React.createElement("div", { 
+const Footer = ({ handleApply, handleClear, showClear, selectedDraft = [], dataTestId, }) => (React.createElement("div", { 
     // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
     tabIndex: 0, className: styles.footer },
-    React.createElement(ButtonDesktop, { size: 'xxs', view: 'primary', onClick: handleApply }, "\u041F\u0440\u0438\u043C\u0435\u043D\u0438\u0442\u044C"),
-    showClear && selectedDraft.length > 0 && (React.createElement(ButtonDesktop, { size: 'xxs', view: 'secondary', onClick: handleClear }, "\u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C"))));
+    React.createElement(ButtonDesktop, { size: 'xxs', view: 'primary', onClick: handleApply, dataTestId: getDataTestId(dataTestId, 'apply') }, "\u041F\u0440\u0438\u043C\u0435\u043D\u0438\u0442\u044C"),
+    showClear && selectedDraft.length > 0 && (React.createElement(ButtonDesktop, { size: 'xxs', view: 'secondary', onClick: handleClear, dataTestId: getDataTestId(dataTestId, 'clear') }, "\u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C"))));
 
 export { Footer };

package/select/modern/presets/useSelectWithApply/options-list-with-apply/index.d.ts

@@ -1 +1 @@
-export * from "../../../hook-3e36491b";
+export * from "../../../hook-328d58fb";

package/select/modern/presets/useSelectWithApply/options-list-with-apply/index.js

@@ -1,12 +1,12 @@
-export { O as OptionsListWithApply } from '../../../hook-3e36491b.js';
+export { O as OptionsListWithApply } from '../../../hook-328d58fb.js';
 import 'react';
 import '../../../utils.js';
+import '../../../../../shared/modern';
 import '../../../components/options-list/Component.js';
 import 'react-merge-refs';
 import 'classnames';
 import '../../../../../mq/modern';
 import '../../../../../scrollbar/modern';
-import '../../../../../shared/modern';
 import '../../../consts.js';
 import '../../../components/optgroup/Component.js';
 import './footer/Component.js';

package/select/modern/shared/index.js

@@ -1,7 +1,7 @@
 export { useSelectWithLoading } from '../presets/useSelectWithLoading/hook.js';
 export { useLazyLoading } from '../presets/useLazyLoading/hook.js';
-export { S as SELECT_ALL_KEY, u as useSelectWithApply } from '../hook-3e36491b.js';
-export { defaultAccessor, defaultFilterFn, isGroup, isOptionShape, joinOptions, lastIndexOf, processOptions, usePrevious, useVisibleOptions } from '../utils.js';
+export { S as SELECT_ALL_KEY, u as useSelectWithApply } from '../hook-328d58fb.js';
+export { defaultAccessor, defaultFilterFn, getSelectTestIds, isGroup, isOptionShape, joinOptions, lastIndexOf, processOptions, usePrevious, useVisibleOptions } from '../utils.js';
 export { Option } from '../components/option/Component.js';
 export { BaseOption } from '../components/base-option/Component.js';
 export { OptionsList } from '../components/options-list/Component.js';
@@ -25,11 +25,11 @@ import 'intersection-observer';
 import '../consts.js';
 import '../presets/useSelectWithApply/options-list-with-apply/footer/Component.js';
 import '../../../button/modern/desktop';
+import '../../../shared/modern';
 import '../presets/useSelectWithApply/options-list-with-apply/header/Component.js';
 import 'react-merge-refs';
 import '../../../mq/modern';
 import '../../../scrollbar/modern';
-import '../../../shared/modern';
 import '../components/base-checkmark/Component.js';
 import 'react-virtual';
 import '@alfalab/hooks';

package/select/modern/utils.d.ts

@@ -38,4 +38,30 @@ declare function defaultFilterFn(optionText: string, search: string): boolean;
 declare function defaultAccessor(option: OptionShape): string;
 declare function usePrevious<T>(value: T): T | undefined;
 declare const lastIndexOf: <T>(array: T[], predicate: (item: T) => boolean) => number;
-export { isGroup, isOptionShape, joinOptions, processOptions, useVisibleOptions, defaultFilterFn, defaultAccessor, usePrevious, lastIndexOf };
+declare function getSelectTestIds(dataTestId: string): {
+    select: string;
+    option: string;
+    optionsList: string;
+    clearButton: string;
+    applyButton: string;
+    field: string;
+    fieldFormControl: string;
+    fieldLeftAddons: string;
+    fieldRightAddons: string;
+    fieldError: string;
+    fieldHint: string;
+    searchInput: string;
+    searchFormControl: string;
+    searchInner: string;
+    searchLeftAddons: string;
+    searchRightAddons: string;
+    searchError: string;
+    searchHint: string;
+    bottomSheet: string;
+    bottomSheetHeader: string;
+    bottomSheetContent: string;
+    modal: string;
+    modalHeader: string;
+    modalContent: string;
+};
+export { isGroup, isOptionShape, joinOptions, processOptions, useVisibleOptions, defaultFilterFn, defaultAccessor, usePrevious, lastIndexOf, getSelectTestIds };

package/select/modern/utils.js

@@ -1,4 +1,5 @@
 import { isValidElement, cloneElement, useEffect, useRef } from 'react';
+import { getDataTestId } from '../../shared/modern';
 
 const isGroup = (item) => Object.prototype.hasOwnProperty.call(item, 'options');
 const isOptionShape = (item) => !!item && Object.prototype.hasOwnProperty.call(item, 'key');
@@ -106,5 +107,33 @@ const lastIndexOf = (array, predicate) => {
     }
     return -1;
 };
+function getSelectTestIds(dataTestId) {
+    return {
+        select: dataTestId,
+        option: getDataTestId(dataTestId, 'option'),
+        optionsList: getDataTestId(dataTestId, 'options-list'),
+        clearButton: getDataTestId(dataTestId, 'options-list-clear'),
+        applyButton: getDataTestId(dataTestId, 'options-list-apply'),
+        field: getDataTestId(dataTestId, 'field'),
+        fieldFormControl: getDataTestId(dataTestId, 'field-form-control'),
+        fieldLeftAddons: getDataTestId(dataTestId, 'field-form-control-left-addons'),
+        fieldRightAddons: getDataTestId(dataTestId, 'field-form-control-right-addons'),
+        fieldError: getDataTestId(dataTestId, 'field-form-control-error-message'),
+        fieldHint: getDataTestId(dataTestId, 'field-form-control-hint'),
+        searchInput: getDataTestId(dataTestId, 'search'),
+        searchFormControl: getDataTestId(dataTestId, 'search-form-control'),
+        searchInner: getDataTestId(dataTestId, 'search-form-control-inner'),
+        searchLeftAddons: getDataTestId(dataTestId, 'search-form-control-left-addons'),
+        searchRightAddons: getDataTestId(dataTestId, 'search-form-control-right-addons'),
+        searchError: getDataTestId(dataTestId, 'search-form-control-error-message'),
+        searchHint: getDataTestId(dataTestId, 'search-form-control-hint'),
+        bottomSheet: getDataTestId(dataTestId, 'bottom-sheet'),
+        bottomSheetHeader: getDataTestId(dataTestId, 'bottom-sheet-header'),
+        bottomSheetContent: getDataTestId(dataTestId, 'bottom-sheet-content'),
+        modal: getDataTestId(dataTestId, 'modal'),
+        modalHeader: getDataTestId(dataTestId, 'modal-header'),
+        modalContent: getDataTestId(dataTestId, 'modal-content'),
+    };
+}
 
-export { defaultAccessor, defaultFilterFn, isGroup, isOptionShape, joinOptions, lastIndexOf, processOptions, usePrevious, useVisibleOptions };
+export { defaultAccessor, defaultFilterFn, getSelectTestIds, isGroup, isOptionShape, joinOptions, lastIndexOf, processOptions, usePrevious, useVisibleOptions };

package/select/presets/index.js

@@ -2,7 +2,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var presets_useSelectWithLoading_hook = require('./useSelectWithLoading/hook.js');
 var presets_useLazyLoading_hook = require('./useLazyLoading/hook.js');
-var presets_useSelectWithApply_optionsListWithApply_Component = require('../hook-3f57caa8.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../hook-5269e0eb.js');
 
 
 

package/select/presets/useSelectWithApply/hook.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 require('tslib');
 require('react');
 require('../../utils.js');
-var presets_useSelectWithApply_optionsListWithApply_Component = require('../../hook-3f57caa8.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../../hook-5269e0eb.js');
 
 
 

package/select/presets/useSelectWithApply/options-list-with-apply/Component.js

@@ -4,7 +4,7 @@ require('tslib');
 require('react');
 require('../../../components/options-list/Component.js');
 require('../../../consts.js');
-var presets_useSelectWithApply_optionsListWithApply_Component = require('../../../hook-3f57caa8.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../../../hook-5269e0eb.js');
 require('./footer/Component.js');
 require('./header/Component.js');
 

package/select/presets/useSelectWithApply/options-list-with-apply/footer/Component.d.ts

@@ -6,6 +6,7 @@ type FooterProps = {
     handleApply?: () => void;
     showClear?: boolean;
     selectedDraft?: OptionShape[];
+    dataTestId?: string;
 };
-declare const Footer: ({ handleApply, handleClear, showClear, selectedDraft, }: FooterProps) => React.JSX.Element;
+declare const Footer: ({ handleApply, handleClear, showClear, selectedDraft, dataTestId, }: FooterProps) => React.JSX.Element;
 export { FooterProps, Footer };

package/select/presets/useSelectWithApply/options-list-with-apply/footer/Component.js

@@ -2,6 +2,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var desktop = require('../../../../../button/desktop');
+var coreComponentsShared = require('../../../../../shared');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -11,12 +12,12 @@ var styles = {"footer":"select__footer_1lhq3"};
 require('./index.css');
 
 var Footer = function (_a) {
-    var handleApply = _a.handleApply, handleClear = _a.handleClear, showClear = _a.showClear, _b = _a.selectedDraft, selectedDraft = _b === void 0 ? [] : _b;
+    var handleApply = _a.handleApply, handleClear = _a.handleClear, showClear = _a.showClear, _b = _a.selectedDraft, selectedDraft = _b === void 0 ? [] : _b, dataTestId = _a.dataTestId;
     return (React__default.default.createElement("div", { 
         // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
         tabIndex: 0, className: styles.footer },
-        React__default.default.createElement(desktop.ButtonDesktop, { size: 'xxs', view: 'primary', onClick: handleApply }, "\u041F\u0440\u0438\u043C\u0435\u043D\u0438\u0442\u044C"),
-        showClear && selectedDraft.length > 0 && (React__default.default.createElement(desktop.ButtonDesktop, { size: 'xxs', view: 'secondary', onClick: handleClear }, "\u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C"))));
+        React__default.default.createElement(desktop.ButtonDesktop, { size: 'xxs', view: 'primary', onClick: handleApply, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'apply') }, "\u041F\u0440\u0438\u043C\u0435\u043D\u0438\u0442\u044C"),
+        showClear && selectedDraft.length > 0 && (React__default.default.createElement(desktop.ButtonDesktop, { size: 'xxs', view: 'secondary', onClick: handleClear, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'clear') }, "\u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C"))));
 };
 
 exports.Footer = Footer;

package/select/presets/useSelectWithApply/options-list-with-apply/index.d.ts

@@ -1 +1 @@
-export * from "../../../hook-3f57caa8";
+export * from "../../../hook-5269e0eb";

package/select/presets/useSelectWithApply/options-list-with-apply/index.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var presets_useSelectWithApply_optionsListWithApply_Component = require('../../../hook-3f57caa8.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../../../hook-5269e0eb.js');
 
 
 

package/select/shared/index.js

@@ -2,7 +2,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var presets_useSelectWithLoading_hook = require('../presets/useSelectWithLoading/hook.js');
 var presets_useLazyLoading_hook = require('../presets/useLazyLoading/hook.js');
-var presets_useSelectWithApply_optionsListWithApply_Component = require('../hook-3f57caa8.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../hook-5269e0eb.js');
 var utils = require('../utils.js');
 var components_option_Component = require('../components/option/Component.js');
 var components_baseOption_Component = require('../components/base-option/Component.js');
@@ -23,6 +23,7 @@ exports.SELECT_ALL_KEY = presets_useSelectWithApply_optionsListWithApply_Compone
 exports.useSelectWithApply = presets_useSelectWithApply_optionsListWithApply_Component.useSelectWithApply;
 exports.defaultAccessor = utils.defaultAccessor;
 exports.defaultFilterFn = utils.defaultFilterFn;
+exports.getSelectTestIds = utils.getSelectTestIds;
 exports.isGroup = utils.isGroup;
 exports.isOptionShape = utils.isOptionShape;
 exports.joinOptions = utils.joinOptions;

package/select/utils.d.ts

@@ -38,4 +38,30 @@ declare function defaultFilterFn(optionText: string, search: string): boolean;
 declare function defaultAccessor(option: OptionShape): string;
 declare function usePrevious<T>(value: T): T | undefined;
 declare const lastIndexOf: <T>(array: T[], predicate: (item: T) => boolean) => number;
-export { isGroup, isOptionShape, joinOptions, processOptions, useVisibleOptions, defaultFilterFn, defaultAccessor, usePrevious, lastIndexOf };
+declare function getSelectTestIds(dataTestId: string): {
+    select: string;
+    option: string;
+    optionsList: string;
+    clearButton: string;
+    applyButton: string;
+    field: string;
+    fieldFormControl: string;
+    fieldLeftAddons: string;
+    fieldRightAddons: string;
+    fieldError: string;
+    fieldHint: string;
+    searchInput: string;
+    searchFormControl: string;
+    searchInner: string;
+    searchLeftAddons: string;
+    searchRightAddons: string;
+    searchError: string;
+    searchHint: string;
+    bottomSheet: string;
+    bottomSheetHeader: string;
+    bottomSheetContent: string;
+    modal: string;
+    modalHeader: string;
+    modalContent: string;
+};
+export { isGroup, isOptionShape, joinOptions, processOptions, useVisibleOptions, defaultFilterFn, defaultAccessor, usePrevious, lastIndexOf, getSelectTestIds };

package/select/utils.js

@@ -2,6 +2,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
 var React = require('react');
+var coreComponentsShared = require('../shared');
 
 var isGroup = function (item) {
     return Object.prototype.hasOwnProperty.call(item, 'options');
@@ -114,9 +115,38 @@ var lastIndexOf = function (array, predicate) {
     }
     return -1;
 };
+function getSelectTestIds(dataTestId) {
+    return {
+        select: dataTestId,
+        option: coreComponentsShared.getDataTestId(dataTestId, 'option'),
+        optionsList: coreComponentsShared.getDataTestId(dataTestId, 'options-list'),
+        clearButton: coreComponentsShared.getDataTestId(dataTestId, 'options-list-clear'),
+        applyButton: coreComponentsShared.getDataTestId(dataTestId, 'options-list-apply'),
+        field: coreComponentsShared.getDataTestId(dataTestId, 'field'),
+        fieldFormControl: coreComponentsShared.getDataTestId(dataTestId, 'field-form-control'),
+        fieldLeftAddons: coreComponentsShared.getDataTestId(dataTestId, 'field-form-control-left-addons'),
+        fieldRightAddons: coreComponentsShared.getDataTestId(dataTestId, 'field-form-control-right-addons'),
+        fieldError: coreComponentsShared.getDataTestId(dataTestId, 'field-form-control-error-message'),
+        fieldHint: coreComponentsShared.getDataTestId(dataTestId, 'field-form-control-hint'),
+        searchInput: coreComponentsShared.getDataTestId(dataTestId, 'search'),
+        searchFormControl: coreComponentsShared.getDataTestId(dataTestId, 'search-form-control'),
+        searchInner: coreComponentsShared.getDataTestId(dataTestId, 'search-form-control-inner'),
+        searchLeftAddons: coreComponentsShared.getDataTestId(dataTestId, 'search-form-control-left-addons'),
+        searchRightAddons: coreComponentsShared.getDataTestId(dataTestId, 'search-form-control-right-addons'),
+        searchError: coreComponentsShared.getDataTestId(dataTestId, 'search-form-control-error-message'),
+        searchHint: coreComponentsShared.getDataTestId(dataTestId, 'search-form-control-hint'),
+        bottomSheet: coreComponentsShared.getDataTestId(dataTestId, 'bottom-sheet'),
+        bottomSheetHeader: coreComponentsShared.getDataTestId(dataTestId, 'bottom-sheet-header'),
+        bottomSheetContent: coreComponentsShared.getDataTestId(dataTestId, 'bottom-sheet-content'),
+        modal: coreComponentsShared.getDataTestId(dataTestId, 'modal'),
+        modalHeader: coreComponentsShared.getDataTestId(dataTestId, 'modal-header'),
+        modalContent: coreComponentsShared.getDataTestId(dataTestId, 'modal-content'),
+    };
+}
 
 exports.defaultAccessor = defaultAccessor;
 exports.defaultFilterFn = defaultFilterFn;
+exports.getSelectTestIds = getSelectTestIds;
 exports.isGroup = isGroup;
 exports.isOptionShape = isOptionShape;
 exports.joinOptions = joinOptions;

package/slider/Component.d.ts

@@ -71,6 +71,14 @@ type SliderProps = {
         value: number;
         valueTo?: number;
     }) => void;
+    /**
+     * Обработчик начала перетаскивания ползунка
+     */
+    onStart?: () => void;
+    /**
+     * Обработчик окончания перетаскивания ползунка
+     */
+    onEnd?: () => void;
     /**
      * Идентификатор для систем автоматизированного тестирования
      */

package/slider/Component.js

@@ -15,7 +15,7 @@ var styles = {"component":"slider__component_1qn63","s":"slider__s_1qn63","m":"s
 require('./index.css');
 
 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 ? 's' : _h, className = _a.className, onChange = _a.onChange, dataTestId = _a.dataTestId;
+    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 ? 's' : _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;
@@ -31,14 +31,30 @@ var Slider = function (_a) {
             pips: pips,
             range: range,
         });
-        slider.on('start', function () {
-            busyRef.current = true;
-        });
         slider.on('change', function () {
             busyRef.current = false;
         });
+        // eslint-disable-next-line consistent-return
+        return function () { return slider.destroy(); };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
+    React.useEffect(function () {
+        var slider = getSlider();
+        if (!slider)
+            return;
+        slider.on('start', function () {
+            busyRef.current = true;
+            onStart === null || onStart === void 0 ? void 0 : onStart();
+        });
+        slider.on('end', function () {
+            onEnd === null || onEnd === void 0 ? void 0 : onEnd();
+        });
+        // eslint-disable-next-line consistent-return
+        return function () {
+            slider.off('start');
+            slider.off('end');
+        };
+    }, [onStart, onEnd]);
     React.useEffect(function () {
         var slider = getSlider();
         if (!slider)

package/slider/cssm/Component.d.ts

@@ -71,6 +71,14 @@ type SliderProps = {
         value: number;
         valueTo?: number;
     }) => void;
+    /**
+     * Обработчик начала перетаскивания ползунка
+     */
+    onStart?: () => void;
+    /**
+     * Обработчик окончания перетаскивания ползунка
+     */
+    onEnd?: () => void;
     /**
      * Идентификатор для систем автоматизированного тестирования
      */

package/slider/cssm/Component.js

@@ -14,7 +14,7 @@ var noUiSlider__default = /*#__PURE__*/_interopDefaultCompat(noUiSlider);
 var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 
 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 ? 's' : _h, className = _a.className, onChange = _a.onChange, dataTestId = _a.dataTestId;
+    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 ? 's' : _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;
@@ -30,14 +30,30 @@ var Slider = function (_a) {
             pips: pips,
             range: range,
         });
-        slider.on('start', function () {
-            busyRef.current = true;
-        });
         slider.on('change', function () {
             busyRef.current = false;
         });
+        // eslint-disable-next-line consistent-return
+        return function () { return slider.destroy(); };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
+    React.useEffect(function () {
+        var slider = getSlider();
+        if (!slider)
+            return;
+        slider.on('start', function () {
+            busyRef.current = true;
+            onStart === null || onStart === void 0 ? void 0 : onStart();
+        });
+        slider.on('end', function () {
+            onEnd === null || onEnd === void 0 ? void 0 : onEnd();
+        });
+        // eslint-disable-next-line consistent-return
+        return function () {
+            slider.off('start');
+            slider.off('end');
+        };
+    }, [onStart, onEnd]);
     React.useEffect(function () {
         var slider = getSlider();
         if (!slider)

package/slider/esm/Component.d.ts

@@ -71,6 +71,14 @@ type SliderProps = {
         value: number;
         valueTo?: number;
     }) => void;
+    /**
+     * Обработчик начала перетаскивания ползунка
+     */
+    onStart?: () => void;
+    /**
+     * Обработчик окончания перетаскивания ползунка
+     */
+    onEnd?: () => void;
     /**
      * Идентификатор для систем автоматизированного тестирования
      */

package/slider/esm/Component.js

@@ -7,7 +7,7 @@ var styles = {"component":"slider__component_1qn63","s":"slider__s_1qn63","m":"s
 require('./index.css');
 
 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 ? 's' : _h, className = _a.className, onChange = _a.onChange, dataTestId = _a.dataTestId;
+    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 ? 's' : _h, className = _a.className, onChange = _a.onChange, onStart = _a.onStart, onEnd = _a.onEnd, dataTestId = _a.dataTestId;
     var sliderRef = useRef(null);
     var busyRef = useRef(false);
     var hasValueTo = valueTo !== undefined;
@@ -23,14 +23,30 @@ var Slider = function (_a) {
             pips: pips,
             range: range,
         });
-        slider.on('start', function () {
-            busyRef.current = true;
-        });
         slider.on('change', function () {
             busyRef.current = false;
         });
+        // eslint-disable-next-line consistent-return
+        return function () { return slider.destroy(); };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
+    useEffect(function () {
+        var slider = getSlider();
+        if (!slider)
+            return;
+        slider.on('start', function () {
+            busyRef.current = true;
+            onStart === null || onStart === void 0 ? void 0 : onStart();
+        });
+        slider.on('end', function () {
+            onEnd === null || onEnd === void 0 ? void 0 : onEnd();
+        });
+        // eslint-disable-next-line consistent-return
+        return function () {
+            slider.off('start');
+            slider.off('end');
+        };
+    }, [onStart, onEnd]);
     useEffect(function () {
         var slider = getSlider();
         if (!slider)

package/slider/modern/Component.d.ts

@@ -71,6 +71,14 @@ type SliderProps = {
         value: number;
         valueTo?: number;
     }) => void;
+    /**
+     * Обработчик начала перетаскивания ползунка
+     */
+    onStart?: () => void;
+    /**
+     * Обработчик окончания перетаскивания ползунка
+     */
+    onEnd?: () => void;
     /**
      * Идентификатор для систем автоматизированного тестирования
      */

package/slider/modern/Component.js

@@ -5,7 +5,7 @@ import noUiSlider from 'nouislider';
 const styles = {"component":"slider__component_1qn63","s":"slider__s_1qn63","m":"slider__m_1qn63"};
 require('./index.css');
 
-const Slider = ({ min = 0, max = 100, step = 1, value = 0, valueTo, disabled, pips, behaviour = 'tap', range = { min, max }, size = 's', className, onChange, dataTestId, }) => {
+const Slider = ({ min = 0, max = 100, step = 1, value = 0, valueTo, disabled, pips, behaviour = 'tap', range = { min, max }, size = 's', className, onChange, onStart, onEnd, dataTestId, }) => {
     const sliderRef = useRef(null);
     const busyRef = useRef(false);
     const hasValueTo = valueTo !== undefined;
@@ -21,14 +21,30 @@ const Slider = ({ min = 0, max = 100, step = 1, value = 0, valueTo, disabled, pi
             pips: pips,
             range,
         });
-        slider.on('start', () => {
-            busyRef.current = true;
-        });
         slider.on('change', () => {
             busyRef.current = false;
         });
+        // eslint-disable-next-line consistent-return
+        return () => slider.destroy();
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
+    useEffect(() => {
+        const slider = getSlider();
+        if (!slider)
+            return;
+        slider.on('start', () => {
+            busyRef.current = true;
+            onStart?.();
+        });
+        slider.on('end', () => {
+            onEnd?.();
+        });
+        // eslint-disable-next-line consistent-return
+        return () => {
+            slider.off('start');
+            slider.off('end');
+        };
+    }, [onStart, onEnd]);
     useEffect(() => {
         const slider = getSlider();
         if (!slider)

package/slider-input/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'];
     /**
      * Идентификатор для систем автоматизированного тестирования
      */