@consta/uikit 3.18.0 → 3.18.1

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

@@ -1,6 +1,6 @@
 "use strict";
 exports.__esModule = true;
-exports.ContextMenu = void 0;
+exports.ContextMenu = exports.COMPONENT_NAME = void 0;
 var tslib_1 = require("tslib");
 require("./ContextMenu.css");
 var react_1 = tslib_1.__importStar(require("react"));
@@ -9,14 +9,16 @@ var useFlag_1 = require("../../hooks/useFlag/useFlag");
 var useForkRef_1 = require("../../hooks/useForkRef/useForkRef");
 var MixPopoverAnimate_1 = require("../../mixs/MixPopoverAnimate/MixPopoverAnimate");
 var bem_1 = require("../../utils/bem");
+var usePropsHandler_1 = require("../EventInterceptor/usePropsHandler");
 var ContextMenuLevels_1 = require("./ContextMenuLevels/ContextMenuLevels");
 var cnContextMenu = bem_1.cn('ContextMenuCanary');
+exports.COMPONENT_NAME = 'ContextMenu';
 function ContextMenuRender(props, ref) {
-    var isOpen = props.isOpen, className = props.className, onSetDirection = props.onSetDirection, otherProps = tslib_1.__rest(props, ["isOpen", "className", "onSetDirection"]);
-    var _a = tslib_1.__read(useFlag_1.useFlag(), 2), playAnimation = _a[0], setPlayAnimation = _a[1];
-    var _b = tslib_1.__read(react_1.useState(props.direction), 2), direction = _b[0], setDirection = _b[1];
     var nodeRef = react_1.useRef(null);
     var levelRef = useForkRef_1.useForkRef([ref, nodeRef]);
+    var _a = usePropsHandler_1.usePropsHandler(exports.COMPONENT_NAME, props, levelRef), isOpen = _a.isOpen, className = _a.className, onSetDirection = _a.onSetDirection, otherProps = tslib_1.__rest(_a, ["isOpen", "className", "onSetDirection"]);
+    var _b = tslib_1.__read(useFlag_1.useFlag(), 2), playAnimation = _b[0], setPlayAnimation = _b[1];
+    var _c = tslib_1.__read(react_1.useState(props.direction), 2), direction = _c[0], setDirection = _c[1];
     var handleSetDirection = function (d) {
         setDirection(d);
         onSetDirection === null || onSetDirection === void 0 ? void 0 : onSetDirection(d);

package/__internal__/cjs-src/components/ContextMenuCanary/ContextMenuLevels/ContextMenuLevels.js

@@ -66,9 +66,8 @@ function ContextMenuLevelsRender(propsComponent, ref) {
         }));
     }, [items]);
     var firstLevelRef = useForkRef_1.useForkRef([levelsRefs[0], ref]);
-    return (react_1["default"].createElement(react_1["default"].Fragment, null, levels.map(function (level, index) {
-        var _a;
-        return (react_1["default"].createElement(ContextMenuLevel_1.ContextMenuLevel, tslib_1.__assign({}, otherProps, level, { key: "ContextMenu-" + index, style: tslib_1.__assign(tslib_1.__assign({}, style), { zIndex: Number((_a = style === null || style === void 0 ? void 0 : style.zIndex) !== null && _a !== void 0 ? _a : 0) + index }), levelDepth: index, getItemLabel: getItemLabel, addLevel: addLevel, deleteLevel: deleteLevel, onSetDirection: index > 0 ? setSubMenuDirection : props.onSetDirection, hoveredParenLevel: hoveredParenLevel, setHoveredParenLevel: setHoveredParenLevel, getItemSubMenu: getItemSubMenu, getItemKey: getItemKey, ref: index === 0 ? firstLevelRef : levelsRefs[index], spareDirection: index === 0 ? spareDirection : 'rightStartUp' })));
-    })));
+    return (react_1["default"].createElement(react_1["default"].Fragment, null, levels.map(function (level, index) { return (react_1["default"].createElement(ContextMenuLevel_1.ContextMenuLevel, tslib_1.__assign({}, otherProps, level, { key: "ContextMenu-" + index, style: tslib_1.__assign(tslib_1.__assign({}, style), {
+            zIndex: typeof (style === null || style === void 0 ? void 0 : style.zIndex) === 'number' ? style.zIndex + 1 : undefined
+        }), levelDepth: index, getItemLabel: getItemLabel, addLevel: addLevel, deleteLevel: deleteLevel, onSetDirection: index > 0 ? setSubMenuDirection : props.onSetDirection, hoveredParenLevel: hoveredParenLevel, setHoveredParenLevel: setHoveredParenLevel, getItemSubMenu: getItemSubMenu, getItemKey: getItemKey, ref: index === 0 ? firstLevelRef : levelsRefs[index], spareDirection: index === 0 ? spareDirection : 'rightStartUp' }))); })));
 }
 exports.ContextMenuLevels = react_1["default"].forwardRef(ContextMenuLevelsRender);

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

@@ -1,3 +1,4 @@
 import { DatePickerComponent } from './helpers';
+export declare const COMPONENT_NAME: "DatePicker";
 export declare const DatePicker: DatePickerComponent;
 export * from './helpers';

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

@@ -1,10 +1,12 @@
 "use strict";
 exports.__esModule = true;
-exports.DatePicker = void 0;
+exports.DatePicker = exports.COMPONENT_NAME = void 0;
 var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importStar(require("react"));
+var useForkRef_1 = require("../../hooks/useForkRef/useForkRef");
 var date_1 = require("../../utils/date");
 var getByMap_1 = require("../../utils/getByMap");
+var usePropsHandler_1 = require("../EventInterceptor/usePropsHandler");
 var DatePickerTypeDate_1 = require("./DatePickerTypeDate/DatePickerTypeDate");
 var DatePickerTypeDateRange_1 = require("./DatePickerTypeDateRange/DatePickerTypeDateRange");
 var DatePickerTypeDateTime_1 = require("./DatePickerTypeDateTime/DatePickerTypeDateTime");
@@ -16,8 +18,10 @@ var typeMap = {
     'date-time': DatePickerTypeDateTime_1.DatePickerTypeDateTime,
     'date-time-range': DatePickerTypeDateTimeRange_1.DatePickerTypeDateTimeRange
 };
+exports.COMPONENT_NAME = 'DatePicker';
 exports.DatePicker = react_1.forwardRef(function (props, ref) {
-    var _a = props.type, type = _a === void 0 ? helpers_1.datePickerPropTypeDefault : _a, _b = props.minDate, minDate = _b === void 0 ? date_1.minDateDefault : _b, _c = props.maxDate, maxDate = _c === void 0 ? date_1.maxDateDefault : _c, multiplicityMinutes = props.multiplicityMinutes, multiplicitySeconds = props.multiplicitySeconds, multiplicityHours = props.multiplicityHours, otherProps = tslib_1.__rest(props, ["type", "minDate", "maxDate", "multiplicityMinutes", "multiplicitySeconds", "multiplicityHours"]);
+    var datePickerRef = react_1.useRef(null);
+    var _a = usePropsHandler_1.usePropsHandler(exports.COMPONENT_NAME, props, datePickerRef), _b = _a.type, type = _b === void 0 ? helpers_1.datePickerPropTypeDefault : _b, _c = _a.minDate, minDate = _c === void 0 ? date_1.minDateDefault : _c, _d = _a.maxDate, maxDate = _d === void 0 ? date_1.maxDateDefault : _d, multiplicityMinutes = _a.multiplicityMinutes, multiplicitySeconds = _a.multiplicitySeconds, multiplicityHours = _a.multiplicityHours, otherProps = tslib_1.__rest(_a, ["type", "minDate", "maxDate", "multiplicityMinutes", "multiplicitySeconds", "multiplicityHours"]);
     var timeProps = type === 'date-time'
         ? {
             multiplicityMinutes: multiplicityMinutes,
@@ -26,6 +30,6 @@ exports.DatePicker = react_1.forwardRef(function (props, ref) {
         }
         : undefined;
     var Component = getByMap_1.getByMap(typeMap, type);
-    return react_1["default"].createElement(Component, tslib_1.__assign({}, otherProps, timeProps, { minDate: minDate, maxDate: maxDate, ref: ref }));
+    return (react_1["default"].createElement(Component, tslib_1.__assign({}, otherProps, timeProps, { minDate: minDate, maxDate: maxDate, ref: useForkRef_1.useForkRef([ref, datePickerRef]) })));
 });
 tslib_1.__exportStar(require("./helpers"), exports);

package/__internal__/cjs-src/components/DateTimeCanary/DateTimeCanary.d.ts

@@ -1,3 +1,4 @@
 import { DateTimeComponent } from './helpers/types';
+export declare const COMPONENT_NAME: "DateTime";
 export declare const DateTime: DateTimeComponent;
 export * from './helpers/types';

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

@@ -1,9 +1,11 @@
 "use strict";
 exports.__esModule = true;
-exports.DateTime = void 0;
+exports.DateTime = exports.COMPONENT_NAME = void 0;
 var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importStar(require("react"));
+var useForkRef_1 = require("../../hooks/useForkRef/useForkRef");
 var getByMap_1 = require("../../utils/getByMap");
+var usePropsHandler_1 = require("../EventInterceptor/usePropsHandler");
 var DateTimeTypeDate_1 = require("./DateTimeTypeDate/DateTimeTypeDate");
 var DateTimeTypeDateTime_1 = require("./DateTimeTypeDateTime/DateTimeTypeDateTime");
 var DateTimeTypeMonth_1 = require("./DateTimeTypeMonth/DateTimeTypeMonth");
@@ -17,9 +19,11 @@ var typeMap = {
     'time': DateTimeTypeTime_1.DateTimeTypeTime,
     'date-time': DateTimeTypeDateTime_1.DateTimeTypeDateTime
 };
+exports.COMPONENT_NAME = 'DateTime';
 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 dateTimeRef = react_1.useRef(null);
+    var _a = usePropsHandler_1.usePropsHandler(exports.COMPONENT_NAME, props, dateTimeRef), _b = _a.type, type = _b === void 0 ? types_1.dateTimePropTypeDefault : _b, otherProps = tslib_1.__rest(_a, ["type"]);
     var Component = getByMap_1.getByMap(typeMap, type);
-    return react_1["default"].createElement(Component, tslib_1.__assign({}, otherProps, { ref: ref }));
+    return react_1["default"].createElement(Component, tslib_1.__assign({}, otherProps, { ref: useForkRef_1.useForkRef([ref, dateTimeRef]) }));
 });
 tslib_1.__exportStar(require("./helpers/types"), exports);

package/__internal__/cjs-src/components/DragNDropField/DragNDropField.d.ts

@@ -10,4 +10,5 @@ export declare type DragNDropFieldProps = {
 export declare type DragNDropFieldChildrenRenderProp = (props: {
     openFileDialog: () => void;
 } & Pick<DragNDropFieldProps, 'accept' | 'maxSize' | 'multiple'>) => React.ReactNode;
+export declare const COMPONENT_NAME: "DragNDropField";
 export declare const DragNDropField: React.ForwardRefExoticComponent<DragNDropFieldProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,19 +1,22 @@
 "use strict";
 exports.__esModule = true;
-exports.DragNDropField = void 0;
+exports.DragNDropField = exports.COMPONENT_NAME = void 0;
 var tslib_1 = require("tslib");
 require("./DragNDropField.css");
-var react_1 = tslib_1.__importDefault(require("react"));
+var react_1 = tslib_1.__importStar(require("react"));
 var react_dropzone_1 = require("react-dropzone");
 var useForkRef_1 = require("../../hooks/useForkRef/useForkRef");
 var bem_1 = require("../../utils/bem");
+var usePropsHandler_1 = require("../EventInterceptor/usePropsHandler");
 var Text_1 = require("../Text/Text");
 var DragNDropFieldContent_1 = require("./DragNDropFieldContent/DragNDropFieldContent");
 var DragNDropFieldTooltip_1 = require("./DragNDropFieldTooltip/DragNDropFieldTooltip");
 var getErrorsList_1 = require("./getErrorsList");
 var cnDragNDropField = bem_1.cn('DragNDropField');
-exports.DragNDropField = react_1["default"].forwardRef(function (_a, ref) {
-    var accept = _a.accept, maxSize = _a.maxSize, _b = _a.multiple, multiple = _b === void 0 ? false : _b, onDropFiles = _a.onDropFiles, _c = _a.children, children = _c === void 0 ? DragNDropFieldContent_1.DragNDropFieldContent : _c;
+exports.COMPONENT_NAME = 'DragNDropField';
+exports.DragNDropField = react_1["default"].forwardRef(function (props, ref) {
+    var dragNDropFieldRef = react_1.useRef(null);
+    var _a = usePropsHandler_1.usePropsHandler(exports.COMPONENT_NAME, props, dragNDropFieldRef), accept = _a.accept, maxSize = _a.maxSize, _b = _a.multiple, multiple = _b === void 0 ? false : _b, onDropFiles = _a.onDropFiles, _c = _a.children, children = _c === void 0 ? DragNDropFieldContent_1.DragNDropFieldContent : _c;
     var handleDrop = react_1["default"].useCallback(function (acceptedFiles) { return acceptedFiles.length > 0 && onDropFiles(acceptedFiles); }, [onDropFiles]);
     var _d = react_dropzone_1.useDropzone({
         accept: (accept === null || accept === void 0 ? void 0 : accept.length) ? accept : undefined,
@@ -36,7 +39,7 @@ exports.DragNDropField = react_1["default"].forwardRef(function (_a, ref) {
         : children;
     var errors = react_1["default"].useMemo(function () { return getErrorsList_1.getErrorsList(fileRejections); }, [fileRejections]);
     return (react_1["default"].createElement(react_1["default"].Fragment, null,
-        react_1["default"].createElement("div", tslib_1.__assign({}, rootProps, { ref: useForkRef_1.useForkRef([ref, rootRef]) }),
+        react_1["default"].createElement("div", tslib_1.__assign({}, rootProps, { ref: useForkRef_1.useForkRef([ref, rootRef, dragNDropFieldRef]) }),
             react_1["default"].createElement("input", tslib_1.__assign({}, getInputProps())),
             isDragActive ? (react_1["default"].createElement(Text_1.Text, { view: "secondary", size: "s", align: "center" }, "\u041F\u0435\u0440\u0435\u0442\u0430\u0449\u0438\u0442\u0435 \u0444\u0430\u0439\u043B\u044B \u0441\u044E\u0434\u0430")) : (content)),
         react_1["default"].createElement(DragNDropFieldTooltip_1.DragNDropFieldTooltip, { anchorRef: rootRef, errors: errors })));

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

@@ -19,4 +19,6 @@ export declare const useCheckboxEventsHandler: <P extends {
     tabIndex?: number | undefined;
     inputRef?: ((instance: HTMLInputElement | null) => void) | React.RefObject<HTMLInputElement> | null | undefined;
     children?: undefined;
+    for?: string | undefined;
+    inputId?: string | 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, ref: React.RefObject<HTMLLabelElement>) => P;

package/__internal__/cjs-src/components/FileField/FileField.d.ts

@@ -12,6 +12,7 @@ export declare type FileFieldProps = PropsWithJsxAttributes<{
     children?: RenderFn | React.ReactNode;
     inputRef?: React.Ref<HTMLInputElement>;
 }, 'input'>;
+export declare const COMPONENT_NAME: "FileField";
 export declare const cnFileField: import("@bem-react/classname").ClassNameFormatter;
 export declare const FileField: React.FC<FileFieldProps>;
 export {};

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

@@ -1,19 +1,23 @@
 "use strict";
 exports.__esModule = true;
-exports.FileField = exports.cnFileField = void 0;
+exports.FileField = exports.cnFileField = exports.COMPONENT_NAME = void 0;
 var tslib_1 = require("tslib");
 require("./FileField.css");
-var react_1 = tslib_1.__importDefault(require("react"));
+var react_1 = tslib_1.__importStar(require("react"));
+var useForkRef_1 = require("../../hooks/useForkRef/useForkRef");
 var MixVisuallyHidden_1 = require("../../mixs/MixVisuallyHidden/MixVisuallyHidden");
 var bem_1 = require("../../utils/bem");
+var usePropsHandler_1 = require("../EventInterceptor/usePropsHandler");
+exports.COMPONENT_NAME = 'FileField';
 function isRenderFn(fn) {
     return fn.call !== undefined;
 }
 exports.cnFileField = bem_1.cn('FileField');
 exports.FileField = function (props) {
-    var className = props.className, children = props.children, id = props.id, inputRef = props.inputRef, _a = props["aria-label"], ariaLabel = _a === void 0 ? 'File input' : _a, inputProps = tslib_1.__rest(props, ["className", "children", "id", "inputRef", 'aria-label']);
+    var fileFieldRef = react_1.useRef(null);
+    var _a = usePropsHandler_1.usePropsHandler(exports.COMPONENT_NAME, props, fileFieldRef), className = _a.className, children = _a.children, id = _a.id, inputRef = _a.inputRef, _b = _a["aria-label"], ariaLabel = _b === void 0 ? 'File input' : _b, inputProps = tslib_1.__rest(_a, ["className", "children", "id", "inputRef", 'aria-label']);
     var content = isRenderFn(children) ? children({ role: 'button', as: 'span' }) : children;
     return (react_1["default"].createElement("label", { htmlFor: id, className: exports.cnFileField(null, [className]) },
-        react_1["default"].createElement("input", tslib_1.__assign({}, inputProps, { className: exports.cnFileField('Input', [MixVisuallyHidden_1.cnMixVisuallyHidden()]), id: id, type: "file", "aria-label": ariaLabel, ref: inputRef })),
+        react_1["default"].createElement("input", tslib_1.__assign({}, inputProps, { className: exports.cnFileField('Input', [MixVisuallyHidden_1.cnMixVisuallyHidden()]), id: id, type: "file", "aria-label": ariaLabel, ref: useForkRef_1.useForkRef([inputRef, fileFieldRef]) })),
         content));
 };

package/__internal__/cjs-src/components/Pagination/Pagination.d.ts

@@ -41,5 +41,6 @@ declare type Props = {
     position?: PaginationPropPosition;
 });
 declare type Pagination = (props: PropsWithHTMLAttributesAndRef<Props, HTMLDivElement>) => React.ReactElement | null;
+export declare const COMPONENT_NAME: "Pagination";
 export declare const Pagination: Pagination;
 export {};

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

@@ -1,13 +1,14 @@
 "use strict";
 exports.__esModule = true;
-exports.Pagination = exports.cnPagination = exports.paginationDefaultPosition = exports.paginationPositions = exports.paginationDefaultType = exports.paginationTypes = exports.paginationDefaultSize = exports.paginationSizes = exports.paginationDefaultForm = exports.paginationForms = void 0;
+exports.Pagination = exports.COMPONENT_NAME = exports.cnPagination = exports.paginationDefaultPosition = exports.paginationPositions = exports.paginationDefaultType = exports.paginationTypes = exports.paginationDefaultSize = exports.paginationSizes = exports.paginationDefaultForm = exports.paginationForms = void 0;
 var tslib_1 = require("tslib");
 require("./Pagination.css");
-var react_1 = tslib_1.__importDefault(require("react"));
+var react_1 = tslib_1.__importStar(require("react"));
 var IconBackward_1 = require("../../icons/IconBackward/IconBackward");
 var IconForward_1 = require("../../icons/IconForward/IconForward");
 var bem_1 = require("../../utils/bem");
 var Button_1 = require("../Button/Button");
+var usePropsHandler_1 = require("../EventInterceptor/usePropsHandler");
 var Text_1 = require("../Text/Text");
 var TextField_1 = require("../TextField/TextField");
 var helpers_1 = require("./helpers");
@@ -21,8 +22,10 @@ exports.paginationPositions = ['left', 'center', 'right'];
 exports.paginationDefaultPosition = 'center';
 var getDefaultLabel = function (totalPages) { return "\u0438\u0437 " + totalPages; };
 exports.cnPagination = bem_1.cn('Pagination');
+exports.COMPONENT_NAME = 'Pagination';
 exports.Pagination = react_1["default"].forwardRef(function (props, ref) {
-    var _a = props.currentPage, currentPage = _a === void 0 ? 0 : _a, _b = props.totalPages, totalPages = _b === void 0 ? 0 : _b, onChange = props.onChange, _c = props.getLabel, getLabel = _c === void 0 ? getDefaultLabel(totalPages) : _c, _d = props.form, form = _d === void 0 ? exports.paginationDefaultForm : _d, _e = props.size, size = _e === void 0 ? exports.paginationDefaultSize : _e, _f = props.type, type = _f === void 0 ? exports.paginationDefaultType : _f, _g = props.position, position = _g === void 0 ? exports.paginationDefaultPosition : _g, _h = props.minified, minified = _h === void 0 ? false : _h, _j = props.hotkeys, hotkeys = _j === void 0 ? {
+    var paginationRef = react_1.useRef(null);
+    var _a = usePropsHandler_1.usePropsHandler(exports.COMPONENT_NAME, props, paginationRef), _b = _a.currentPage, currentPage = _b === void 0 ? 0 : _b, _c = _a.totalPages, totalPages = _c === void 0 ? 0 : _c, onChange = _a.onChange, _d = _a.getLabel, getLabel = _d === void 0 ? getDefaultLabel(totalPages) : _d, _e = _a.form, form = _e === void 0 ? exports.paginationDefaultForm : _e, _f = _a.size, size = _f === void 0 ? exports.paginationDefaultSize : _f, _g = _a.type, type = _g === void 0 ? exports.paginationDefaultType : _g, _h = _a.position, position = _h === void 0 ? exports.paginationDefaultPosition : _h, _j = _a.minified, minified = _j === void 0 ? false : _j, _k = _a.hotkeys, hotkeys = _k === void 0 ? {
         nextPage: {
             label: 'Alt →',
             values: ['Alt', 'ArrowRight']
@@ -31,12 +34,12 @@ exports.Pagination = react_1["default"].forwardRef(function (props, ref) {
             label: '← Alt',
             values: ['Alt', 'ArrowLeft']
         }
-    } : _j, _k = props.containerEventListener, containerEventListener = _k === void 0 ? window : _k, className = props.className, otherProps = tslib_1.__rest(props, ["currentPage", "totalPages", "onChange", "getLabel", "form", "size", "type", "position", "minified", "hotkeys", "containerEventListener", "className"]);
+    } : _k, _l = _a.containerEventListener, containerEventListener = _l === void 0 ? window : _l, className = _a.className, otherProps = tslib_1.__rest(_a, ["currentPage", "totalPages", "onChange", "getLabel", "form", "size", "type", "position", "minified", "hotkeys", "containerEventListener", "className"]);
     if (!totalPages)
         return null;
     var currPage = currentPage + 1;
-    var _l = helpers_1.getPaginationInfo(currPage, totalPages), prevPage = _l.prevPage, nextPage = _l.nextPage, isStartDots = _l.isStartDots, isEndDots = _l.isEndDots, pages = _l.pages, isEmpty = _l.isEmpty;
-    var _m = tslib_1.__read(react_1["default"].useState([]), 2), keys = _m[0], setKeys = _m[1];
+    var _m = helpers_1.getPaginationInfo(currPage, totalPages), prevPage = _m.prevPage, nextPage = _m.nextPage, isStartDots = _m.isStartDots, isEndDots = _m.isEndDots, pages = _m.pages, isEmpty = _m.isEmpty;
+    var _o = tslib_1.__read(react_1["default"].useState([]), 2), keys = _o[0], setKeys = _o[1];
     var changePage = function (page) {
         if (page && page !== currPage && onChange) {
             onChange(page - 1);

package/__internal__/cjs-src/components/ProgressStepBarCanary/ProgressStepBarCanary.d.ts

@@ -1,3 +1,4 @@
 import './ProgressStepBar.css';
 import { ProgressStepBarComponent } from './helpers';
+export declare const COMPONENT_NAME: "ProgressStepBar";
 export declare const ProgressStepBar: ProgressStepBarComponent;

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

@@ -1,6 +1,6 @@
 "use strict";
 exports.__esModule = true;
-exports.ProgressStepBar = void 0;
+exports.ProgressStepBar = exports.COMPONENT_NAME = void 0;
 var tslib_1 = require("tslib");
 require("./ProgressStepBar.css");
 var react_1 = tslib_1.__importStar(require("react"));
@@ -11,14 +11,16 @@ var useScrollElements_1 = require("../../hooks/useScrollElements/useScrollElemen
 var IconArrowLeft_1 = require("../../icons/IconArrowLeft/IconArrowLeft");
 var IconArrowRight_1 = require("../../icons/IconArrowRight/IconArrowRight");
 var Button_1 = require("../Button/Button");
+var usePropsHandler_1 = require("../EventInterceptor/usePropsHandler");
 var ProgressStepBarItem_1 = require("./ProgressStepBarItem/ProgressStepBarItem");
 var ProgressStepBarLine_1 = require("./ProgressStepBarLine/ProgressStepBarLine");
 var helpers_1 = require("./helpers");
+exports.COMPONENT_NAME = 'ProgressStepBar';
 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, style = _a.style, otherProps = tslib_1.__rest(_a, ["steps", "direction", "size", "className", "activeStepIndex", "onItemClick", "getItemContent", "getItemLabel", "getItemPoint", "getItemProgress", "getItemStatus", "getItemTooltipContent", "getItemLineStatus", "getItemOnClick", "style"]);
+    var containerRef = react_1.useRef(null);
+    var _a = usePropsHandler_1.usePropsHandler(exports.COMPONENT_NAME, helpers_1.withDefaultGetters(props), containerRef), _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, style = _a.style, otherProps = tslib_1.__rest(_a, ["steps", "direction", "size", "className", "activeStepIndex", "onItemClick", "getItemContent", "getItemLabel", "getItemPoint", "getItemProgress", "getItemStatus", "getItemTooltipContent", "getItemLineStatus", "getItemOnClick", "style"]);
     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 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;

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

@@ -36,7 +36,7 @@ var renderPointContent = function (point, size, progress) {
     return react_1["default"].createElement(Icon, { size: "xs" });
 };
 exports.ProgressStepBarItem = react_1["default"].forwardRef(function (props, ref) {
-    var content = props.content, tooltipContent = props.tooltipContent, label = props.label, point = props.point, status = props.status, progress = props.progress, direction = props.direction, size = props.size, pointRef = props.pointRef, onClick = props.onClick, _a = props.position, position = _a === void 0 ? helpers_1.propPositionDefault : _a, otherProps = tslib_1.__rest(props, ["content", "tooltipContent", "label", "point", "status", "progress", "direction", "size", "pointRef", "onClick", "position"]);
+    var content = props.content, tooltipContent = props.tooltipContent, label = props.label, point = props.point, status = props.status, progress = props.progress, direction = props.direction, size = props.size, pointRef = props.pointRef, onClick = props.onClick, _a = props.position, position = _a === void 0 ? helpers_1.propPositionDefault : _a, tooltipZIndex = props.tooltipZIndex, otherProps = tslib_1.__rest(props, ["content", "tooltipContent", "label", "point", "status", "progress", "direction", "size", "pointRef", "onClick", "position", "tooltipZIndex"]);
     var _b = tslib_1.__read(useFlag_1.useFlag(), 2), isTooltipVisible = _b[0], _c = _b[1], setTooltipVisible = _c.on, setTooltipUnVisible = _c.off;
     var anchorRef = react_1.useRef(null);
     var pointProps = {
@@ -65,5 +65,5 @@ exports.ProgressStepBarItem = react_1["default"].forwardRef(function (props, ref
             (label || content) && (react_1["default"].createElement("div", { className: cnProgressStepBarItem('Content', { bottomOffset: !!content }) },
                 label && (react_1["default"].createElement(Text_1.Text, { className: cnProgressStepBarItem('Label'), ref: anchorRef, size: size, onMouseEnter: setTooltipVisible, onMouseLeave: setTooltipUnVisible, lineHeight: size === 's' ? 'xs' : size, view: "primary" }, label)),
                 content))),
-        tooltipContent && isTooltipVisible && (react_1["default"].createElement(Tooltip_1.Tooltip, { anchorRef: label || content ? anchorRef : pointRef, className: cnProgressStepBarItem('Tooltip'), direction: direction === 'horizontal' ? 'downCenter' : 'leftUp', possibleDirections: direction === 'horizontal' ? possibleHorizontalDirections : possibleVerticalDirections }, tooltipContent))));
+        tooltipContent && isTooltipVisible && (react_1["default"].createElement(Tooltip_1.Tooltip, { anchorRef: label || content ? anchorRef : pointRef, className: cnProgressStepBarItem('Tooltip'), direction: direction === 'horizontal' ? 'downCenter' : 'leftUp', style: { zIndex: tooltipZIndex }, possibleDirections: direction === 'horizontal' ? possibleHorizontalDirections : possibleVerticalDirections }, tooltipContent))));
 });

package/__internal__/cjs-src/components/Radio/Radio.d.ts

@@ -33,7 +33,10 @@ export declare type Props = {
     tabIndex?: number;
     inputRef?: React.Ref<HTMLInputElement>;
     children?: never;
+    for?: string;
+    inputId?: string;
 };
 export declare type RadioProps = PropsWithHTMLAttributes<Props, HTMLLabelElement>;
 export declare const cnRadio: import("@bem-react/classname").ClassNameFormatter;
+export declare const COMPONENT_NAME: "Radio";
 export declare const Radio: React.ForwardRefExoticComponent<Props & Pick<React.HTMLAttributes<HTMLLabelElement>, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "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>>;

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

@@ -1,11 +1,13 @@
 "use strict";
 exports.__esModule = true;
-exports.Radio = exports.cnRadio = exports.radioPropAlignDefault = exports.radioPropAlign = exports.radioPropViewDefault = exports.radioPropView = exports.radioPropSizeDefault = exports.radioPropSize = void 0;
+exports.Radio = exports.COMPONENT_NAME = exports.cnRadio = exports.radioPropAlignDefault = exports.radioPropAlign = exports.radioPropViewDefault = exports.radioPropView = exports.radioPropSizeDefault = exports.radioPropSize = void 0;
 var tslib_1 = require("tslib");
 require("./Radio.css");
-var react_1 = tslib_1.__importDefault(require("react"));
+var react_1 = tslib_1.__importStar(require("react"));
+var useForkRef_1 = require("../../hooks/useForkRef/useForkRef");
 var MixFocus_1 = require("../../mixs/MixFocus/MixFocus");
 var bem_1 = require("../../utils/bem");
+var usePropsHandler_1 = require("../EventInterceptor/usePropsHandler");
 exports.radioPropSize = ['m', 'l'];
 exports.radioPropSizeDefault = exports.radioPropSize[0];
 exports.radioPropView = ['primary', 'ghost'];
@@ -13,14 +15,16 @@ exports.radioPropViewDefault = exports.radioPropView[0];
 exports.radioPropAlign = ['center', 'top'];
 exports.radioPropAlignDefault = exports.radioPropAlign[0];
 exports.cnRadio = bem_1.cn('Radio');
+exports.COMPONENT_NAME = 'Radio';
 exports.Radio = react_1["default"].forwardRef(function (props, ref) {
-    var _a = props.checked, checked = _a === void 0 ? false : _a, name = props.name, _b = props.size, size = _b === void 0 ? exports.radioPropSizeDefault : _b, _c = props.view, view = _c === void 0 ? exports.radioPropViewDefault : _c, _d = props.align, align = _d === void 0 ? exports.radioPropAlignDefault : _d, disabled = props.disabled, className = props.className, label = props.label, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur, readOnly = props.readOnly, required = props.required, step = props.step, tabIndex = props.tabIndex, inputRef = props.inputRef, otherProps = tslib_1.__rest(props, ["checked", "name", "size", "view", "align", "disabled", "className", "label", "onChange", "onFocus", "onBlur", "readOnly", "required", "step", "tabIndex", "inputRef"]);
+    var radioRef = react_1.useRef(null);
+    var _a = usePropsHandler_1.usePropsHandler(exports.COMPONENT_NAME, props, radioRef), _b = _a.checked, checked = _b === void 0 ? false : _b, name = _a.name, _c = _a.size, size = _c === void 0 ? exports.radioPropSizeDefault : _c, _d = _a.view, view = _d === void 0 ? exports.radioPropViewDefault : _d, _e = _a.align, align = _e === void 0 ? exports.radioPropAlignDefault : _e, disabled = _a.disabled, className = _a.className, label = _a.label, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur, readOnly = _a.readOnly, required = _a.required, step = _a.step, tabIndex = _a.tabIndex, inputId = _a.inputId, inputRef = _a.inputRef, otherProps = tslib_1.__rest(_a, ["checked", "name", "size", "view", "align", "disabled", "className", "label", "onChange", "onFocus", "onBlur", "readOnly", "required", "step", "tabIndex", "inputId", "inputRef"]);
     var handleChange = function (e) {
         if (onChange) {
             onChange({ e: e, checked: !checked });
         }
     };
-    return (react_1["default"].createElement("label", tslib_1.__assign({}, otherProps, { className: exports.cnRadio({ size: size, view: view, disabled: disabled, align: align }, [className]), ref: ref }),
-        react_1["default"].createElement("input", { type: "radio", name: name, className: exports.cnRadio('Input', [MixFocus_1.cnMixFocus()]), checked: checked, disabled: disabled, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, readOnly: readOnly, required: required, step: step, tabIndex: tabIndex, ref: inputRef }),
+    return (react_1["default"].createElement("label", tslib_1.__assign({}, otherProps, { className: exports.cnRadio({ size: size, view: view, disabled: disabled, align: align }, [className]), ref: useForkRef_1.useForkRef([ref, radioRef]) }),
+        react_1["default"].createElement("input", { type: "radio", name: name, className: exports.cnRadio('Input', [MixFocus_1.cnMixFocus()]), checked: checked, disabled: disabled, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, readOnly: readOnly, required: required, step: step, id: inputId, tabIndex: tabIndex, ref: inputRef }),
         label && react_1["default"].createElement("span", { className: exports.cnRadio('Label') }, label)));
 });

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

@@ -18,7 +18,7 @@ var helpers_2 = require("./helpers");
 function SelectRender(props, ref) {
     var defaultDropdownRef = react_1.useRef(null);
     var controlRef = react_1.useRef(null);
-    var _a = usePropsHandler_1.usePropsHandler(cnSelect_1.COMPONENT_NAME, helpers_2.withDefaultGetters(props), controlRef), placeholder = _a.placeholder, onBlur = _a.onBlur, onFocus = _a.onFocus, items = _a.items, onChange = _a.onChange, value = _a.value, required = _a.required, disabled = _a.disabled, ariaLabel = _a.ariaLabel, id = _a.id, _b = _a.dropdownRef, dropdownRef = _b === void 0 ? defaultDropdownRef : _b, _c = _a.form, form = _c === void 0 ? types_1.defaultPropForm : _c, _d = _a.view, view = _d === void 0 ? types_1.defaultPropView : _d, _e = _a.size, size = _e === void 0 ? types_1.defaultPropSize : _e, dropdownClassName = _a.dropdownClassName, name = _a.name, _f = _a.groups, groups = _f === void 0 ? [] : _f, getItemLabel = _a.getItemLabel, _g = _a.labelForEmptyItems, labelForEmptyItems = _g === void 0 ? helpers_1.defaultLabelForEmptyItems : _g, getItemKey = _a.getItemKey, getItemGroupKey = _a.getItemGroupKey, getItemDisabled = _a.getItemDisabled, getGroupKey = _a.getGroupKey, getGroupLabel = _a.getGroupLabel, renderItem = _a.renderItem, renderValueProp = _a.renderValue, inputRefProp = _a.inputRef, style = _a.style, restProps = tslib_1.__rest(_a, ["placeholder", "onBlur", "onFocus", "items", "onChange", "value", "required", "disabled", "ariaLabel", "id", "dropdownRef", "form", "view", "size", "dropdownClassName", "name", "groups", "getItemLabel", "labelForEmptyItems", "getItemKey", "getItemGroupKey", "getItemDisabled", "getGroupKey", "getGroupLabel", "renderItem", "renderValue", "inputRef", "style"]);
+    var _a = usePropsHandler_1.usePropsHandler(cnSelect_1.COMPONENT_NAME, helpers_2.withDefaultGetters(props), controlRef), placeholder = _a.placeholder, onBlur = _a.onBlur, onFocus = _a.onFocus, items = _a.items, onChange = _a.onChange, value = _a.value, required = _a.required, disabled = _a.disabled, ariaLabel = _a.ariaLabel, id = _a.id, _b = _a.dropdownRef, dropdownRef = _b === void 0 ? defaultDropdownRef : _b, _c = _a.form, form = _c === void 0 ? types_1.defaultPropForm : _c, _d = _a.view, view = _d === void 0 ? types_1.defaultPropView : _d, _e = _a.size, size = _e === void 0 ? types_1.defaultPropSize : _e, dropdownClassName = _a.dropdownClassName, name = _a.name, _f = _a.groups, groups = _f === void 0 ? [] : _f, getItemLabel = _a.getItemLabel, _g = _a.labelForEmptyItems, labelForEmptyItems = _g === void 0 ? helpers_1.defaultLabelForEmptyItems : _g, getItemKey = _a.getItemKey, getItemGroupKey = _a.getItemGroupKey, getItemDisabled = _a.getItemDisabled, getGroupKey = _a.getGroupKey, getGroupLabel = _a.getGroupLabel, renderItem = _a.renderItem, isLoading = _a.isLoading, renderValueProp = _a.renderValue, inputRefProp = _a.inputRef, style = _a.style, restProps = tslib_1.__rest(_a, ["placeholder", "onBlur", "onFocus", "items", "onChange", "value", "required", "disabled", "ariaLabel", "id", "dropdownRef", "form", "view", "size", "dropdownClassName", "name", "groups", "getItemLabel", "labelForEmptyItems", "getItemKey", "getItemGroupKey", "getItemDisabled", "getGroupKey", "getGroupLabel", "renderItem", "isLoading", "renderValue", "inputRef", "style"]);
     var _h = useSelect_1.useSelect({
         items: items,
         groups: groups,
@@ -56,7 +56,7 @@ function SelectRender(props, ref) {
             react_1["default"].createElement("span", { className: cnSelect_1.cnSelect('Indicators') },
                 react_1["default"].createElement("button", { type: "button", className: cnSelect_1.cnSelect('IndicatorsDropdown'), tabIndex: -1, onClick: handleToggleDropdown },
                     react_1["default"].createElement(IconSelect_1.IconSelect, { size: "xs", className: cnSelect_1.cnSelect('DropdownIndicatorIcon') })))),
-        react_1["default"].createElement(SelectDropdown_1.SelectDropdown, { isOpen: isOpen, size: size, controlRef: controlRef, getOptionProps: getOptionProps, dropdownRef: dropdownRef, form: dropdownForm, className: dropdownClassName, renderItem: renderItem || renderItemDefault, getGroupLabel: getGroupLabel, visibleItems: visibleItems, notFound: notFound, labelForEmptyItems: labelForEmptyItems, hasItems: hasItems, style: typeof (style === null || style === void 0 ? void 0 : style.zIndex) === 'number' ? { zIndex: style.zIndex + 1 } : undefined })));
+        react_1["default"].createElement(SelectDropdown_1.SelectDropdown, { isOpen: isOpen, size: size, controlRef: controlRef, getOptionProps: getOptionProps, dropdownRef: dropdownRef, form: dropdownForm, className: dropdownClassName, renderItem: renderItem || renderItemDefault, getGroupLabel: getGroupLabel, visibleItems: visibleItems, notFound: notFound, isLoading: isLoading, labelForEmptyItems: labelForEmptyItems, hasItems: hasItems, style: typeof (style === null || style === void 0 ? void 0 : style.zIndex) === 'number' ? { zIndex: style.zIndex + 1 } : undefined })));
 }
 exports.Select = react_1.forwardRef(SelectRender);
 tslib_1.__exportStar(require("./helpers"), exports);

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

@@ -42,6 +42,7 @@ export declare type SelectProps<ITEM = DefaultItem, GROUP = DefaultGroup> = Prop
     dropdownRef?: React.RefObject<HTMLDivElement>;
     required?: boolean;
     name?: string;
+    isLoading?: boolean;
     labelForEmptyItems?: string;
     value?: PropValue<ITEM>;
     renderItem?: PropRenderItem<ITEM>;
@@ -102,6 +103,7 @@ export declare function withDefaultGetters<ITEM, GROUP>(props: SelectProps<ITEM,
     dropdownRef?: React.RefObject<HTMLDivElement> | undefined;
     required?: boolean | undefined;
     name?: string | undefined;
+    isLoading?: boolean | undefined;
     labelForEmptyItems?: string | undefined;
     value?: PropValue<ITEM>;
     renderItem?: PropRenderItem<ITEM> | undefined;

package/__internal__/cjs-src/components/SelectComponents/SelectDropdown/SelectDropdown.css

@@ -1,6 +1,4 @@
 .SelectDropdown {
-  --transition-spase: var(--space-2xs);
-  z-index: 9999;
   overflow: hidden;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
@@ -9,12 +7,9 @@
   background: var(--color-bg-default);
   border: var(--control-border-width) solid var(--color-control-bg-border-default);
   outline: none;
-  opacity: 0;
   -webkit-box-shadow: var(--shadow-layer);
           box-shadow: var(--shadow-layer);
   font-size: var(--font-size);
-  -webkit-transform: translateY(var(--transition-spase));
-          transform: translateY(var(--transition-spase));
 }
 
   .SelectDropdown_size_xs {
@@ -57,52 +52,6 @@
       border-radius: calc(var(--input-height) * 0.5);
     }
 
-  .SelectDropdown_animate_appear,
-    .SelectDropdown_animate_appearActive,
-    .SelectDropdown_animate_appearDone,
-    .SelectDropdown_animate_enter,
-    .SelectDropdown_animate_enterActive,
-    .SelectDropdown_animate_enterDone,
-    .SelectDropdown_animate_exit,
-    .SelectDropdown_animate_exitActive,
-    .SelectDropdown_animate_exitDone {
-      -webkit-transition: 0.2s ease;
-      transition: 0.2s ease;
-      -webkit-transition-property: opacity, -webkit-transform;
-      transition-property: opacity, -webkit-transform;
-      transition-property: opacity, transform;
-      transition-property: opacity, transform, -webkit-transform;
-    }
-
-  .SelectDropdown_animate_appear,
-    .SelectDropdown_animate_enter {
-      opacity: 0;
-      -webkit-transform: translateY(var(--transition-spase));
-              transform: translateY(var(--transition-spase));
-    }
-
-  .SelectDropdown_animate_enterActive,
-    .SelectDropdown_animate_appearActive,
-    .SelectDropdown_animate_appearDone,
-    .SelectDropdown_animate_enterDone {
-      opacity: 1;
-      -webkit-transform: translateY(0);
-              transform: translateY(0);
-    }
-
-  .SelectDropdown_animate_exit {
-      opacity: 1;
-      -webkit-transform: translateY(0);
-              transform: translateY(0);
-    }
-
-  .SelectDropdown_animate_exitActive,
-    .SelectDropdown_animate_exitDone {
-      opacity: 0;
-      -webkit-transform: translateY(var(--transition-spase));
-              transform: translateY(var(--transition-spase));
-    }
-
   .SelectDropdown-LabelForNotFound,
   .SelectDropdown-LabelForEmptyItems {
     padding: 0 var(--space-xs);

package/__internal__/cjs-src/components/SelectComponents/SelectDropdown/SelectDropdown.d.ts

@@ -13,6 +13,7 @@ declare type Props<ITEM, GROUP> = PropsWithJsxAttributes<{
     getOptionProps(props: OptionProps<ITEM>): GetOptionPropsResult;
     form: SelectDropdownPropForm;
     isOpen: boolean;
+    isLoading?: boolean;
     renderItem: (props: RenderItemProps<ITEM>) => JSX.Element | null;
     visibleItems: (OptionForCreate | {
         items: ITEM[];