@consta/uikit 3.9.1 → 3.11.0

package/__internal__/cjs-src/components/DatePickerCanary/DatePickerFieldTypeDateRange/DatePickerFieldTypeDateRange.d.ts

@@ -13,7 +13,7 @@ export declare const DatePickerFieldTypeDateRange: React.ForwardRefExoticCompone
     disabled?: boolean | undefined;
     size?: "xs" | "s" | "m" | "l" | undefined;
     view?: "default" | "clear" | undefined;
-    form?: "default" | "round" | "brick" | "clearRound" | "roundClear" | "clearDefault" | "defaultClear" | "defaultBrick" | "brickDefault" | "brickClear" | "clearBrick" | "clearClear" | "brickRound" | "roundBrick" | undefined;
+    form?: "default" | "round" | "brick" | "brickRound" | "roundBrick" | "brickDefault" | "defaultBrick" | "clearRound" | "roundClear" | "clearDefault" | "defaultClear" | "brickClear" | "clearBrick" | "clearClear" | undefined;
     status?: "alert" | "success" | "warning" | undefined;
     width?: "default" | "full" | undefined;
     onFocus?: ((event: React.FocusEvent<HTMLElement>) => void) | undefined;

package/__internal__/cjs-src/components/DatePickerCanary/DatePickerFieldTypeDateRange/DatePickerFieldTypeDateRange.js

@@ -7,7 +7,7 @@ var react_1 = tslib_1.__importStar(require("react"));
 var isBefore_1 = tslib_1.__importDefault(require("date-fns/isBefore"));
 var isEqual_1 = tslib_1.__importDefault(require("date-fns/isEqual"));
 var bem_1 = require("../../../utils/bem");
-var getSizeByMap_1 = require("../../../utils/getSizeByMap");
+var getByMap_1 = require("../../../utils/getByMap");
 var DatePickerFieldTypeDate_1 = require("../DatePickerFieldTypeDate/DatePickerFieldTypeDate");
 var helpers_1 = require("../helpers");
 var helpers_2 = require("./helpers");
@@ -91,6 +91,6 @@ exports.DatePickerFieldTypeDateRange = react_1.forwardRef(function (props, ref)
         setEndDate(value === null || value === void 0 ? void 0 : value[1]);
     }, [(_b = value === null || value === void 0 ? void 0 : value[1]) === null || _b === void 0 ? void 0 : _b.getTime()]);
     return (react_1["default"].createElement("div", tslib_1.__assign({}, otherProps, { className: cnDatePickerFieldTypeDateRange(null, [className]), ref: ref }),
-        react_1["default"].createElement(DatePickerFieldTypeDate_1.DatePickerFieldTypeDate, tslib_1.__assign({}, commonProps, { inputRef: startFieldInputRef, ref: startFieldRef, leftSide: startFieldLeftSide, rightSide: startFieldRightSide, form: getSizeByMap_1.getSizeByMap(helpers_2.mapFormForStart, form), value: startDate, onChange: handleStartDateChange, onFocus: startFieldOnFocus, onBlur: startFieldOnBlur, focused: startFocused })),
-        react_1["default"].createElement(DatePickerFieldTypeDate_1.DatePickerFieldTypeDate, tslib_1.__assign({}, commonProps, { inputRef: endFieldInputRef, ref: endFieldRef, leftSide: endFieldLeftSide, rightSide: endFieldRightSide, form: getSizeByMap_1.getSizeByMap(helpers_2.mapFormForEnd, form), value: endDate, onChange: handleEndDateChange, onFocus: endFieldOnFocus, onBlur: endFieldOnBlur, focused: endFocused }))));
+        react_1["default"].createElement(DatePickerFieldTypeDate_1.DatePickerFieldTypeDate, tslib_1.__assign({}, commonProps, { inputRef: startFieldInputRef, ref: startFieldRef, leftSide: startFieldLeftSide, rightSide: startFieldRightSide, form: getByMap_1.getByMap(helpers_2.mapFormForStart, form), value: startDate, onChange: handleStartDateChange, onFocus: startFieldOnFocus, onBlur: startFieldOnBlur, focused: startFocused })),
+        react_1["default"].createElement(DatePickerFieldTypeDate_1.DatePickerFieldTypeDate, tslib_1.__assign({}, commonProps, { inputRef: endFieldInputRef, ref: endFieldRef, leftSide: endFieldLeftSide, rightSide: endFieldRightSide, form: getByMap_1.getByMap(helpers_2.mapFormForEnd, form), value: endDate, onChange: handleEndDateChange, onFocus: endFieldOnFocus, onBlur: endFieldOnBlur, focused: endFocused }))));
 });

package/__internal__/cjs-src/components/DatePickerCanary/helpers.d.ts

@@ -104,7 +104,7 @@ export declare const isDateRangeParams: (params: DatePickerProps<DatePickerPropT
     disabled?: boolean | undefined;
     size?: "xs" | "s" | "m" | "l" | undefined;
     view?: "default" | "clear" | undefined;
-    form?: "default" | "round" | "brick" | "clearRound" | "roundClear" | "clearDefault" | "defaultClear" | "defaultBrick" | "brickDefault" | "brickClear" | "clearBrick" | "clearClear" | "brickRound" | "roundBrick" | undefined;
+    form?: "default" | "round" | "brick" | "brickRound" | "roundBrick" | "brickDefault" | "defaultBrick" | "clearRound" | "roundClear" | "clearDefault" | "defaultClear" | "brickClear" | "clearBrick" | "clearClear" | undefined;
     status?: "alert" | "success" | "warning" | undefined;
     onFocus?: ((event: import("react").FocusEvent<HTMLElement>) => void) | undefined;
     onBlur?: ((event: import("react").FocusEvent<HTMLElement>) => void) | undefined;
@@ -149,7 +149,7 @@ export declare const isNotDateRangeParams: (params: DatePickerProps<DatePickerPr
     disabled?: boolean | undefined;
     size?: "xs" | "s" | "m" | "l" | undefined;
     view?: "default" | "clear" | undefined;
-    form?: "default" | "round" | "brick" | "clearRound" | "roundClear" | "clearDefault" | "defaultClear" | "defaultBrick" | "brickDefault" | "brickClear" | "clearBrick" | "clearClear" | "brickRound" | "roundBrick" | undefined;
+    form?: "default" | "round" | "brick" | "brickRound" | "roundBrick" | "brickDefault" | "defaultBrick" | "clearRound" | "roundClear" | "clearDefault" | "defaultClear" | "brickClear" | "clearBrick" | "clearClear" | undefined;
     status?: "alert" | "success" | "warning" | undefined;
     onFocus?: ((event: import("react").FocusEvent<HTMLElement>) => void) | undefined;
     onBlur?: ((event: import("react").FocusEvent<HTMLElement>) => void) | undefined;

package/__internal__/cjs-src/components/DateTimeCanary/DateTimeCanary.js

@@ -3,7 +3,7 @@ exports.__esModule = true;
 exports.DateTime = void 0;
 var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importStar(require("react"));
-var getSizeByMap_1 = require("../../utils/getSizeByMap");
+var getByMap_1 = require("../../utils/getByMap");
 var DateTimeTypeDate_1 = require("./DateTimeTypeDate/DateTimeTypeDate");
 var DateTimeTypeDateTime_1 = require("./DateTimeTypeDateTime/DateTimeTypeDateTime");
 var DateTimeTypeMonth_1 = require("./DateTimeTypeMonth/DateTimeTypeMonth");
@@ -19,7 +19,7 @@ var typeMap = {
 };
 exports.DateTime = react_1.forwardRef(function (props, ref) {
     var _a = props.type, type = _a === void 0 ? types_1.dateTimePropTypeDefault : _a, otherProps = tslib_1.__rest(props, ["type"]);
-    var Component = getSizeByMap_1.getSizeByMap(typeMap, type);
+    var Component = getByMap_1.getByMap(typeMap, type);
     return react_1["default"].createElement(Component, tslib_1.__assign({}, otherProps, { ref: ref }));
 });
 tslib_1.__exportStar(require("./helpers/types"), exports);

package/__internal__/cjs-src/components/EventInterceptor/eventInterceptorMap.d.ts

@@ -1,9 +1,4 @@
 /// <reference types="react" />
-import { COMPONENT_NAME as BUTTON_NAME } from '../Button/Button';
-import { COMPONENT_NAME as CHECKBOX_NAME } from '../Checkbox/Checkbox';
-import { COMPONENT_NAME as SELECT_NAME } from '../SelectComponents/cnSelect';
-import { COMPONENT_NAME as SNACKBAR_NAME } from '../SnackBar/SnackBar';
-import { COMPONENT_NAME as TEXTFIELD_NAME } from '../TextField/TextField';
 export declare const eventInterceptorMap: {
     readonly Button: <T extends import("../Button/Button").Props>(props: T, handler: import("./EventInterceptor").EventInterceptorHandler, ref: import("react").RefObject<HTMLElement>) => T;
     readonly Checkbox: <P extends {
@@ -25,8 +20,8 @@ export declare const eventInterceptorMap: {
         tabIndex?: number | undefined;
         inputRef?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
         children?: undefined;
-    } & Pick<import("react").HTMLAttributes<HTMLLabelElement>, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & import("react").RefAttributes<HTMLLabelElement>>(props: P, handler: import("./EventInterceptor").EventInterceptorHandler, checkboxRef: import("react").RefObject<HTMLLabelElement>) => P;
-    readonly Select: <PROPS extends import("../Select/helpers").SelectProps<import("../Select/helpers").DefaultItem, import("../Select/helpers").DefaultGroup>>(props: PROPS, handler: import("./EventInterceptor").EventInterceptorHandler, controlRef: import("react").RefObject<HTMLDivElement | null>) => PROPS;
+    } & Pick<import("react").HTMLAttributes<HTMLLabelElement>, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & import("react").RefAttributes<HTMLLabelElement>>(props: P, handler: import("./EventInterceptor").EventInterceptorHandler, ref: import("react").RefObject<HTMLLabelElement>) => P;
+    readonly Select: <PROPS extends import("../Select/helpers").SelectProps<import("../Select/helpers").DefaultItem, import("../Select/helpers").DefaultGroup>>(props: PROPS, handler: import("./EventInterceptor").EventInterceptorHandler, ref: import("react").RefObject<HTMLDivElement | null>) => PROPS;
     readonly SnackBar: <P_1 extends import("react").PropsWithChildren<import("../../utils/types/PropsWithHTMLAttributes").PropsWithHTMLAttributes<{
         items: import("../SnackBar/SnackBar").Item[];
         children?: undefined;
@@ -43,7 +38,7 @@ export declare const eventInterceptorMap: {
         maxLength?: number | undefined;
         size?: "xs" | "s" | "m" | "l" | undefined;
         view?: "default" | "clear" | undefined;
-        form?: "default" | "round" | "brick" | "clearRound" | "roundClear" | "clearDefault" | "defaultClear" | "defaultBrick" | "brickDefault" | "brickClear" | "clearBrick" | "clearClear" | "brickRound" | "roundBrick" | undefined;
+        form?: "default" | "round" | "brick" | "brickRound" | "roundBrick" | "brickDefault" | "defaultBrick" | "clearRound" | "roundClear" | "clearDefault" | "defaultClear" | "brickClear" | "clearBrick" | "clearClear" | undefined;
         state?: "alert" | "success" | "warning" | undefined;
         status?: "alert" | "success" | "warning" | undefined;
         width?: "default" | "full" | undefined;
@@ -69,11 +64,11 @@ export declare const eventInterceptorMap: {
         caption?: string | undefined;
         labelPosition?: "left" | "top" | undefined;
         focused?: boolean | undefined;
-    } & {
+    } & Pick<import("react").HTMLAttributes<HTMLDivElement>, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "slot" | "spellCheck" | "style" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & {
         rows?: undefined;
         minRows?: undefined;
         maxRows?: undefined;
     } & {
         rightSide?: string | import("react").FC<import("../../utils/types/PropsWithHTMLAttributes").PropsWithHTMLAttributes<import("../../icons/Icon/Icon").Props, HTMLSpanElement>> | undefined;
-    } & Pick<import("react").HTMLAttributes<HTMLDivElement>, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "slot" | "spellCheck" | "style" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & import("react").RefAttributes<HTMLElement>>(props: P_2, handler: import("./EventInterceptor").EventInterceptorHandler, textFieldRef: import("react").RefObject<HTMLDivElement>) => P_2;
+    } & import("react").RefAttributes<HTMLElement>>(props: P_2, handler: import("./EventInterceptor").EventInterceptorHandler, ref: import("react").RefObject<HTMLDivElement>) => P_2;
 };

package/__internal__/cjs-src/components/EventInterceptor/eventInterceptorMap.js

@@ -1,21 +1,15 @@
 "use strict";
-var _a;
 exports.__esModule = true;
 exports.eventInterceptorMap = void 0;
-var Button_1 = require("../Button/Button");
-var Checkbox_1 = require("../Checkbox/Checkbox");
-var cnSelect_1 = require("../SelectComponents/cnSelect");
-var SnackBar_1 = require("../SnackBar/SnackBar");
-var TextField_1 = require("../TextField/TextField");
 var useButtonEventHandler_1 = require("./propsHandlers/useButtonEventHandler");
 var useCheckboxEventsHandler_1 = require("./propsHandlers/useCheckboxEventsHandler");
 var useSelectEventsHandler_1 = require("./propsHandlers/useSelectEventsHandler");
 var useSnackBarEventsHandler_1 = require("./propsHandlers/useSnackBarEventsHandler");
 var useTextFieldEventsHandler_1 = require("./propsHandlers/useTextFieldEventsHandler");
-exports.eventInterceptorMap = (_a = {},
-    _a[Button_1.COMPONENT_NAME] = useButtonEventHandler_1.useButtonEventHandler,
-    _a[Checkbox_1.COMPONENT_NAME] = useCheckboxEventsHandler_1.useCheckboxEventsHandler,
-    _a[cnSelect_1.COMPONENT_NAME] = useSelectEventsHandler_1.useSelectEventsHandler,
-    _a[SnackBar_1.COMPONENT_NAME] = useSnackBarEventsHandler_1.useSnackBarEventsHandler,
-    _a[TextField_1.COMPONENT_NAME] = useTextFieldEventsHandler_1.useTextFieldEventsHandler,
-    _a);
+exports.eventInterceptorMap = {
+    Button: useButtonEventHandler_1.useButtonEventHandler,
+    Checkbox: useCheckboxEventsHandler_1.useCheckboxEventsHandler,
+    Select: useSelectEventsHandler_1.useSelectEventsHandler,
+    SnackBar: useSnackBarEventsHandler_1.useSnackBarEventsHandler,
+    TextField: useTextFieldEventsHandler_1.useTextFieldEventsHandler
+};

package/__internal__/cjs-src/components/EventInterceptor/propsHandlers/useButtonEventHandler.js

@@ -2,7 +2,6 @@
 exports.__esModule = true;
 exports.useButtonEventHandler = void 0;
 var tslib_1 = require("tslib");
-var Button_1 = require("../../Button/Button");
 exports.useButtonEventHandler = function (props, handler, ref) {
     var newProps = tslib_1.__assign({}, props);
     newProps.onClick = function () {
@@ -13,12 +12,13 @@ exports.useButtonEventHandler = function (props, handler, ref) {
         }
         var _b = tslib_1.__read(onClickArgs, 1), e = _b[0];
         var value = {
-            component: Button_1.COMPONENT_NAME,
+            component: 'Button',
             event: e.type,
             options: {
                 text: e.currentTarget.innerText,
                 pageURL: e.currentTarget.baseURI,
-                DOMRef: ref.current
+                DOMRef: ref.current,
+                props: newProps
             }
         };
         handler(value);

package/__internal__/cjs-src/components/EventInterceptor/propsHandlers/useCheckboxEventsHandler.d.ts

@@ -19,4 +19,4 @@ export declare const useCheckboxEventsHandler: <P extends {
     tabIndex?: number | undefined;
     inputRef?: ((instance: HTMLInputElement | null) => void) | React.RefObject<HTMLInputElement> | null | undefined;
     children?: undefined;
-} & Pick<React.HTMLAttributes<HTMLLabelElement>, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & React.RefAttributes<HTMLLabelElement>>(props: P, handler: EventInterceptorHandler, checkboxRef: React.RefObject<HTMLLabelElement>) => P;
+} & Pick<React.HTMLAttributes<HTMLLabelElement>, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & React.RefAttributes<HTMLLabelElement>>(props: P, handler: EventInterceptorHandler, ref: React.RefObject<HTMLLabelElement>) => P;

package/__internal__/cjs-src/components/EventInterceptor/propsHandlers/useCheckboxEventsHandler.js

@@ -2,8 +2,7 @@
 exports.__esModule = true;
 exports.useCheckboxEventsHandler = void 0;
 var tslib_1 = require("tslib");
-var Checkbox_1 = require("../../Checkbox/Checkbox");
-exports.useCheckboxEventsHandler = function (props, handler, checkboxRef) {
+exports.useCheckboxEventsHandler = function (props, handler, ref) {
     var newProps = tslib_1.__assign({}, props);
     newProps.onChange = function () {
         var _a;
@@ -13,13 +12,14 @@ exports.useCheckboxEventsHandler = function (props, handler, checkboxRef) {
         }
         var _b = tslib_1.__read(onChangeArgs, 1), checked = _b[0].checked;
         var value = {
-            component: Checkbox_1.COMPONENT_NAME,
+            component: 'Checkbox',
             event: 'change',
             options: {
                 label: newProps.label,
                 checked: checked,
                 pageURL: window.location.href,
-                DOMRef: checkboxRef.current
+                DOMRef: ref.current,
+                props: newProps
             }
         };
         handler(value);

package/__internal__/cjs-src/components/EventInterceptor/propsHandlers/useSelectEventsHandler.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { SelectProps } from '../../Select/helpers';
 import { EventInterceptorHandler } from '../EventInterceptor';
-export declare const useSelectEventsHandler: <PROPS extends SelectProps<import("../../Select/helpers").DefaultItem, import("../../Select/helpers").DefaultGroup>>(props: PROPS, handler: EventInterceptorHandler, controlRef: React.RefObject<HTMLDivElement | null>) => PROPS;
+export declare const useSelectEventsHandler: <PROPS extends SelectProps<import("../../Select/helpers").DefaultItem, import("../../Select/helpers").DefaultGroup>>(props: PROPS, handler: EventInterceptorHandler, ref: React.RefObject<HTMLDivElement | null>) => PROPS;

package/__internal__/cjs-src/components/EventInterceptor/propsHandlers/useSelectEventsHandler.js

@@ -4,13 +4,12 @@ exports.useSelectEventsHandler = void 0;
 var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importDefault(require("react"));
 var helpers_1 = require("../../Select/helpers");
-var cnSelect_1 = require("../../SelectComponents/cnSelect");
-exports.useSelectEventsHandler = function (props, handler, controlRef) {
+exports.useSelectEventsHandler = function (props, handler, ref) {
     var newProps = tslib_1.__assign({}, props);
     react_1["default"].useEffect(function () {
         if (newProps.value) {
             var value = {
-                component: cnSelect_1.COMPONENT_NAME,
+                component: 'Select',
                 event: 'change',
                 options: {
                     placeholder: newProps.placeholder,
@@ -19,7 +18,8 @@ exports.useSelectEventsHandler = function (props, handler, controlRef) {
                         : helpers_1.defaultGetItemLabel(newProps.value),
                     value: newProps.value,
                     pageURL: window.location.href,
-                    DOMRef: controlRef.current
+                    DOMRef: ref.current,
+                    props: newProps
                 }
             };
             handler(value);

package/__internal__/cjs-src/components/EventInterceptor/propsHandlers/useSnackBarEventsHandler.js

@@ -3,18 +3,18 @@ exports.__esModule = true;
 exports.useSnackBarEventsHandler = void 0;
 var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importDefault(require("react"));
-var SnackBar_1 = require("../../SnackBar/SnackBar");
 exports.useSnackBarEventsHandler = function (props, handler) {
     var newProps = tslib_1.__assign({}, props);
     react_1["default"].useEffect(function () {
         if (newProps.items.length) {
             var value = {
-                component: SnackBar_1.COMPONENT_NAME,
+                component: 'SnackBar',
                 event: 'change',
                 options: {
                     pageURL: window.location.href,
-                    DOMRef: document.getElementsByClassName(SnackBar_1.COMPONENT_NAME)[0],
-                    items: newProps.items
+                    DOMRef: document.getElementsByClassName('SnackBar')[0],
+                    items: newProps.items,
+                    props: newProps
                 }
             };
             handler(value);

package/__internal__/cjs-src/components/EventInterceptor/propsHandlers/useTextFieldEventsHandler.d.ts

@@ -47,7 +47,7 @@ export declare const useTextFieldEventsHandler: <P extends {
     maxLength?: number | undefined;
     size?: "xs" | "s" | "m" | "l" | undefined;
     view?: "default" | "clear" | undefined;
-    form?: "default" | "round" | "brick" | "clearRound" | "roundClear" | "clearDefault" | "defaultClear" | "defaultBrick" | "brickDefault" | "brickClear" | "clearBrick" | "clearClear" | "brickRound" | "roundBrick" | undefined;
+    form?: "default" | "round" | "brick" | "brickRound" | "roundBrick" | "brickDefault" | "defaultBrick" | "clearRound" | "roundClear" | "clearDefault" | "defaultClear" | "brickClear" | "clearBrick" | "clearClear" | undefined;
     state?: "alert" | "success" | "warning" | undefined;
     status?: "alert" | "success" | "warning" | undefined;
     width?: "default" | "full" | undefined;
@@ -73,10 +73,10 @@ export declare const useTextFieldEventsHandler: <P extends {
     caption?: string | undefined;
     labelPosition?: "left" | "top" | undefined;
     focused?: boolean | undefined;
-} & {
+} & Pick<React.HTMLAttributes<HTMLDivElement>, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "slot" | "spellCheck" | "style" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & {
     rows?: undefined;
     minRows?: undefined;
     maxRows?: undefined;
 } & {
     rightSide?: string | React.FC<import("../../../utils/types/PropsWithHTMLAttributes").PropsWithHTMLAttributes<import("../../../icons/Icon/Icon").Props, HTMLSpanElement>> | undefined;
-} & Pick<React.HTMLAttributes<HTMLDivElement>, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "slot" | "spellCheck" | "style" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & React.RefAttributes<HTMLElement>>(props: P, handler: EventInterceptorHandler, textFieldRef: React.RefObject<HTMLDivElement>) => P;
+} & React.RefAttributes<HTMLElement>>(props: P, handler: EventInterceptorHandler, ref: React.RefObject<HTMLDivElement>) => P;

package/__internal__/cjs-src/components/EventInterceptor/propsHandlers/useTextFieldEventsHandler.js

@@ -3,8 +3,7 @@ exports.__esModule = true;
 exports.useTextFieldEventsHandler = void 0;
 var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importDefault(require("react"));
-var TextField_1 = require("../../TextField/TextField");
-exports.useTextFieldEventsHandler = function (props, handler, textFieldRef) {
+exports.useTextFieldEventsHandler = function (props, handler, ref) {
     var _a = tslib_1.__read(react_1["default"].useState(false), 2), inputChanged = _a[0], setInputChanged = _a[1];
     var newProps = tslib_1.__assign({}, props);
     react_1["default"].useEffect(function () {
@@ -26,13 +25,14 @@ exports.useTextFieldEventsHandler = function (props, handler, textFieldRef) {
             onBlurArgs[_i] = arguments[_i];
         }
         var value = {
-            component: TextField_1.COMPONENT_NAME,
+            component: 'TextField',
             event: 'change',
             options: {
                 placeholder: newProps.placeholder,
                 pageURL: window.location.href,
-                DOMRef: textFieldRef.current,
-                value: newProps.value
+                DOMRef: ref.current,
+                value: newProps.value,
+                props: newProps
             }
         };
         if (inputChanged) {

package/__internal__/cjs-src/components/ProgressSpin/ProgressSpin.js

@@ -5,7 +5,7 @@ var tslib_1 = require("tslib");
 require("./ProgressSpin.css");
 var react_1 = tslib_1.__importStar(require("react"));
 var bem_1 = require("../../utils/bem");
-var getSizeByMap_1 = require("../../utils/getSizeByMap");
+var getByMap_1 = require("../../utils/getByMap");
 var type_guards_1 = require("../../utils/type-guards");
 exports.progressSpinPropSize = ['m', 's', 'l', 'xl', '2xl'];
 exports.progressSpinPropSizeDefault = exports.progressSpinPropSize[0];
@@ -25,8 +25,8 @@ var strokeWidthMap = {
     '2xl': 3.5
 };
 function getSvgParamsBySize(size) {
-    var sizeOfPixels = getSizeByMap_1.getSizeByMap(sizeMap, size);
-    var strokeWidth = getSizeByMap_1.getSizeByMap(strokeWidthMap, size);
+    var sizeOfPixels = getByMap_1.getByMap(sizeMap, size);
+    var strokeWidth = getByMap_1.getByMap(strokeWidthMap, size);
     var radius = (sizeOfPixels - strokeWidth) / 2;
     var strokeDasharray = radius * 2 * Math.PI;
     return [sizeOfPixels, strokeWidth, radius, strokeDasharray];

package/__internal__/cjs-src/components/ProgressStepBarCanary/ProgressStepBar.css

@@ -1,25 +1,55 @@
 .ProgressStepBar {
-  position: relative;
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
+  width: 100%;
+  max-width: 100%;
 }
 
-  .ProgressStepBar_direction_horizontal {
-      -webkit-box-orient: horizontal;
-      -webkit-box-direction: normal;
-          -ms-flex-direction: row;
-              flex-direction: row;
-      width: 100%;
-    }
+  .ProgressStepBar-List {
+    position: relative;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: justify;
+        -ms-flex-pack: justify;
+            justify-content: space-between;
+  }
 
-  .ProgressStepBar_direction_vertical {
-      -webkit-box-orient: vertical;
-      -webkit-box-direction: normal;
-          -ms-flex-direction: column;
-              flex-direction: column;
-      height: 100%;
+  .ProgressStepBar-List::-webkit-scrollbar {
+      display: none;
     }
+
+  .ProgressStepBar-List_direction_horizontal {
+        overflow-x: scroll;
+        overflow-y: visible;
+        -webkit-box-orient: horizontal;
+        -webkit-box-direction: normal;
+            -ms-flex-direction: row;
+                flex-direction: row;
+      }
+
+  .ProgressStepBar-List_direction_horizontal:not(.ProgressStepBar-List_overflow) {
+          min-width: 100%;
+        }
+
+  .ProgressStepBar-List_direction_vertical {
+        overflow-x: visible;
+        overflow-y: scroll;
+        -webkit-box-orient: vertical;
+        -webkit-box-direction: normal;
+            -ms-flex-direction: column;
+                flex-direction: column;
+      }
+
+  .ProgressStepBar-List_direction_vertical:not(.ProgressStepBar-List_overflow) {
+          min-height: 100%;
+        }
+
+  .ProgressStepBar-Button_side_left {
+        margin-right: var(--space-xs);
+      }
+
+  .ProgressStepBar-Button_side_right {
+        margin-left: var(--space-xs);
+      }

package/__internal__/cjs-src/components/ProgressStepBarCanary/ProgressStepBarCanary.js

@@ -6,14 +6,23 @@ require("./ProgressStepBar.css");
 var react_1 = tslib_1.__importStar(require("react"));
 var useComponentSize_1 = require("../../hooks/useComponentSize/useComponentSize");
 var useForkRef_1 = require("../../hooks/useForkRef/useForkRef");
+var useOverflow_1 = require("../../hooks/useOverflow/useOverflow");
+var useScrollElements_1 = require("../../hooks/useScrollElements/useScrollElements");
+var IconArrowLeft_1 = require("../../icons/IconArrowLeft/IconArrowLeft");
+var IconArrowRight_1 = require("../../icons/IconArrowRight/IconArrowRight");
+var Button_1 = require("../Button/Button");
 var ProgressStepBarItem_1 = require("./ProgressStepBarItem/ProgressStepBarItem");
 var ProgressStepBarLine_1 = require("./ProgressStepBarLine/ProgressStepBarLine");
 var helpers_1 = require("./helpers");
 function ProgressStepBarRender(props, ref) {
     var _a = helpers_1.withDefaultGetters(props), _b = _a.steps, steps = _b === void 0 ? [] : _b, _c = _a.direction, direction = _c === void 0 ? helpers_1.propDirectionDefault : _c, _d = _a.size, size = _d === void 0 ? helpers_1.propSizeDefault : _d, className = _a.className, activeStepIndex = _a.activeStepIndex, onItemClick = _a.onItemClick, getItemContent = _a.getItemContent, getItemLabel = _a.getItemLabel, getItemPoint = _a.getItemPoint, getItemProgress = _a.getItemProgress, getItemStatus = _a.getItemStatus, getItemTooltipContent = _a.getItemTooltipContent, getItemLineStatus = _a.getItemLineStatus, getItemOnClick = _a.getItemOnClick, otherProps = tslib_1.__rest(_a, ["steps", "direction", "size", "className", "activeStepIndex", "onItemClick", "getItemContent", "getItemLabel", "getItemPoint", "getItemProgress", "getItemStatus", "getItemTooltipContent", "getItemLineStatus", "getItemOnClick"]);
     var _e = tslib_1.__read(react_1.useState([]), 2), lines = _e[0], setLines = _e[1];
+    var _f = tslib_1.__read(react_1.useState(activeStepIndex || 0), 2), visibleIndex = _f[0], setVisibleIndex = _f[1];
     var containerRef = react_1.useRef(null);
-    var _f = useComponentSize_1.useComponentSize(containerRef), width = _f.width, height = _f.height;
+    var listRef = react_1.useRef(null);
+    var _g = useComponentSize_1.useComponentSize(containerRef), width = _g.width, height = _g.height;
+    var _h = useScrollElements_1.useScrollElements(steps), refs = _h.refs, scrollTo = _h.scrollTo;
+    var stepsRef = react_1.useMemo(function () { return new Array(steps.length).fill(null).map(function () { return react_1.createRef(); }); }, [steps.length]);
     react_1.useEffect(function () {
         if (steps.length > 0) {
             var linesArray_1 = [];
@@ -27,7 +36,20 @@ function ProgressStepBarRender(props, ref) {
             setLines(linesArray_1);
         }
     }, [activeStepIndex, steps, direction, size, width, height]);
-    var stepsRef = react_1.useMemo(function () { return new Array(steps.length).fill(null).map(function () { return react_1.createRef(); }); }, [steps.length]);
+    react_1.useEffect(function () {
+        setVisibleIndex(activeStepIndex || 0);
+    }, [activeStepIndex]);
+    react_1.useEffect(function () {
+        scrollTo(visibleIndex);
+    }, [visibleIndex]);
+    var changePosition = function (prev) {
+        if (prev && visibleIndex !== 0) {
+            setVisibleIndex(visibleIndex - 1);
+        }
+        if (!prev && visibleIndex !== steps.length - 1) {
+            setVisibleIndex(visibleIndex + 1);
+        }
+    };
     var getStepItem = function (item, index) {
         var onClick = getItemOnClick(item);
         var onItemClickHandler = onItemClick
@@ -52,8 +74,12 @@ function ProgressStepBarRender(props, ref) {
             onClick: onClick || onItemClickHandler
         };
     };
-    return (react_1["default"].createElement("div", tslib_1.__assign({}, otherProps, { className: helpers_1.cnProgressStepBar({ direction: direction }, [className]), ref: useForkRef_1.useForkRef([ref, containerRef]) }),
-        react_1["default"].createElement(ProgressStepBarLine_1.ProgressStepBarLine, { lines: lines, size: size, direction: direction, activeStepIndex: activeStepIndex }),
-        steps.map(function (step, index) { return (react_1["default"].createElement(ProgressStepBarItem_1.ProgressStepBarItem, tslib_1.__assign({}, getStepItem(step, index)))); })));
+    var isOverflow = useOverflow_1.useOverflow({ currentRef: listRef });
+    return (react_1["default"].createElement("div", tslib_1.__assign({}, otherProps, { className: helpers_1.cnProgressStepBar(null, [className]), ref: useForkRef_1.useForkRef([ref, containerRef]) }),
+        isOverflow && direction !== 'vertical' && (react_1["default"].createElement(Button_1.Button, { iconLeft: function () { return react_1["default"].createElement(IconArrowLeft_1.IconArrowLeft, { size: "xs" }); }, view: "clear", onlyIcon: true, size: "xs", className: helpers_1.cnProgressStepBar('Button', { side: 'left' }), onClick: function () { return changePosition(true); } })),
+        react_1["default"].createElement("div", { ref: listRef, className: helpers_1.cnProgressStepBar('List', { direction: direction, overflow: isOverflow }) },
+            react_1["default"].createElement(ProgressStepBarLine_1.ProgressStepBarLine, { lines: lines, size: size, direction: direction, activeStepIndex: activeStepIndex }),
+            steps.map(function (step, index) { return (react_1["default"].createElement(ProgressStepBarItem_1.ProgressStepBarItem, tslib_1.__assign({ ref: refs[index] }, getStepItem(step, index)))); })),
+        isOverflow && direction !== 'vertical' && (react_1["default"].createElement(Button_1.Button, { iconLeft: function () { return react_1["default"].createElement(IconArrowRight_1.IconArrowRight, { size: "xs" }); }, view: "clear", onlyIcon: true, size: "xs", className: helpers_1.cnProgressStepBar('Button', { side: 'right' }), onClick: function () { return changePosition(false); } }))));
 }
 exports.ProgressStepBar = react_1.forwardRef(ProgressStepBarRender);