@consta/uikit 3.18.0 → 3.18.3

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/EventInterceptor/types.d.ts

@@ -1 +1 @@
-export declare type EventInterceptorComponentName = 'Attachment' | 'Avatar' | 'Badge' | 'Breadcrumbs' | 'Button' | 'Calendar' | 'Card' | 'Checkbox' | 'CheckboxGroup' | 'ChoiceGroup' | 'Collapse' | 'CollapseGroup' | 'Combobox' | 'ContextMenu' | 'DatePicker' | 'DateTime' | 'DragNDropField' | 'File' | 'FileField' | 'Grid' | 'Header' | 'Informer' | 'Layout' | 'Loader' | 'Modal' | 'Pagination' | 'Popover' | 'ProgressSpin' | 'ProgressStepBar' | 'Radio' | 'RadioGroup' | 'Select' | 'Sidebar' | 'Skeleton' | 'Slider' | 'SnackBar' | 'Steps' | 'Switch' | 'SwitchGroup' | 'Table' | 'Tabs' | 'Tag' | 'TagBase' | 'Text' | 'TextField' | 'ThemeToggler' | 'Timer' | 'Tooltip' | 'User' | 'UserSelect';
+export declare type EventInterceptorComponentName = 'Attachment' | 'Avatar' | 'Badge' | 'Breadcrumbs' | 'Button' | 'Calendar' | 'Card' | 'Checkbox' | 'CheckboxGroup' | 'ChoiceGroup' | 'Collapse' | 'CollapseGroup' | 'Combobox' | 'ContextMenu' | 'DatePicker' | 'DateTime' | 'DragNDropField' | 'File' | 'FileField' | 'Grid' | 'Header' | 'Informer' | 'Layout' | 'Loader' | 'Modal' | 'Popover' | 'ProgressSpin' | 'ProgressStepBar' | 'Radio' | 'RadioGroup' | 'Select' | 'Sidebar' | 'Skeleton' | 'Slider' | 'SnackBar' | 'Steps' | 'Switch' | 'SwitchGroup' | 'Table' | 'Tabs' | 'Tag' | 'TagBase' | 'Text' | 'TextField' | 'ThemeToggler' | 'Timer' | 'Tooltip' | 'User' | 'UserSelect';

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/Modal/Modal.css

@@ -1,4 +1,5 @@
 .Modal {
+  --modal-window-animate-space: var(--space-xl);
   position: fixed;
   top: 0;
   right: 0;
@@ -18,7 +19,7 @@
   }
 
   .Modal-Window {
-    z-index: 100;
+    position: absolute;
     overflow: auto;
     min-width: 400px;
     max-width: 90%;
@@ -42,7 +43,7 @@
       }
 
   .Modal-Overlay {
-    position: fixed;
+    position: absolute;
     top: 0;
     left: 0;
     width: 100%;
@@ -52,30 +53,54 @@
     border: none;
   }
 
-  .Modal_animate_appear,
-    .Modal_animate_enter,
-    .Modal_animate_exit,
-    .Modal_animate_appearActive,
-    .Modal_animate_enterActive,
-    .Modal_animate_exitActive {
-      -webkit-transition: opacity 0.2s ease;
-      transition: opacity 0.2s ease;
-    }
+  .Modal_animate_appear .Modal-Overlay, .Modal_animate_enter .Modal-Overlay, .Modal_animate_exit .Modal-Overlay, .Modal_animate_appearActive .Modal-Overlay, .Modal_animate_enterActive .Modal-Overlay, .Modal_animate_exitActive .Modal-Overlay {
+        -webkit-transition: opacity 0.24s ease;
+        transition: opacity 0.24s ease;
+      }
+
+  .Modal_animate_appear .Modal-Window, .Modal_animate_enter .Modal-Window, .Modal_animate_exit .Modal-Window, .Modal_animate_appearActive .Modal-Window, .Modal_animate_enterActive .Modal-Window, .Modal_animate_exitActive .Modal-Window {
+        -webkit-transition: opacity 0.24s, -webkit-transform 0.24s;
+        transition: opacity 0.24s, -webkit-transform 0.24s;
+        transition: opacity 0.24s, transform 0.24s;
+        transition: opacity 0.24s, transform 0.24s, -webkit-transform 0.24s;
+      }
+
+  .Modal_animate_appear .Modal-Overlay, .Modal_animate_enter .Modal-Overlay {
+        opacity: 0;
+      }
 
-  .Modal_animate_appear,
-    .Modal_animate_enter {
-      opacity: 0;
-    }
+  .Modal_animate_appear .Modal-Window, .Modal_animate_enter .Modal-Window {
+        opacity: 0;
+        -webkit-transform: translate(0, calc(-1 * var(--modal-window-animate-space)));
+                transform: translate(0, calc(-1 * var(--modal-window-animate-space)));
+      }
 
-  .Modal_animate_appearActive,
-    .Modal_animate_enterActive {
-      opacity: 1;
-    }
+  .Modal_animate_appearActive .Modal-Overlay, .Modal_animate_enterActive .Modal-Overlay {
+        opacity: 1;
+      }
 
-  .Modal_animate_exit {
-      opacity: 1;
-    }
+  .Modal_animate_appearActive .Modal-Window, .Modal_animate_enterActive .Modal-Window {
+        opacity: 1;
+        -webkit-transform: translate(0, 0);
+                transform: translate(0, 0);
+      }
 
-  .Modal_animate_exitActive {
-      opacity: 0;
-    }
+  .Modal_animate_exit .Modal-Overlay {
+        opacity: 1;
+      }
+
+  .Modal_animate_exit .Modal-Window {
+        opacity: 1;
+        -webkit-transform: translate(0, 0);
+                transform: translate(0, 0);
+      }
+
+  .Modal_animate_exitActive .Modal-Overlay {
+        opacity: 0;
+      }
+
+  .Modal_animate_exitActive .Modal-Window {
+        opacity: 0;
+        -webkit-transform: translate(0, var(--modal-window-animate-space));
+                transform: translate(0, var(--modal-window-animate-space));
+      }

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

@@ -27,7 +27,7 @@ var ContextConsumer = function (_a) {
     useClickOutside_1.useClickOutside({
         isActive: !!onClickOutside,
         ignoreClicksInsideRefs: tslib_1.__spread((ignoreClicksInsideRefs || []), (refs || [])),
-        handler: function (event) { return onClickOutside === null || onClickOutside === void 0 ? void 0 : onClickOutside(event); }
+        handler: onClickOutside
     });
     return react_1["default"].createElement(react_1["default"].Fragment, null, children);
 };
@@ -47,9 +47,9 @@ exports.Modal = function (props) {
     useGlobalKeys_1.useGlobalKeys({
         Escape: function (e) { return isOpen && onEsc && onEsc(e); }
     });
-    return (react_1["default"].createElement(react_transition_group_1.CSSTransition, { "in": isOpen, unmountOnExit: true, appear: true, classNames: cnForCssTransition_1.cnForCssTransition(cnModal), timeout: 200, nodeRef: portalRef },
+    return (react_1["default"].createElement(react_transition_group_1.CSSTransition, { "in": isOpen, unmountOnExit: true, appear: true, classNames: cnForCssTransition_1.cnForCssTransition(cnModal), timeout: 240, nodeRef: portalRef },
         react_1["default"].createElement(PortalWithTheme_1.PortalWithTheme, { preset: theme, container: container, className: cnModal({ hasOverlay: hasOverlay }, [rootClassName]), ref: portalRef, style: typeof (style === null || style === void 0 ? void 0 : style.zIndex) === 'number' ? { zIndex: style.zIndex } : undefined },
             hasOverlay && react_1["default"].createElement("div", { className: cnModal('Overlay'), "aria-label": "Overlay" }),
-            react_1["default"].createElement("div", tslib_1.__assign({}, otherProps, { style: tslib_1.__assign(tslib_1.__assign({}, style), (typeof (style === null || style === void 0 ? void 0 : style.zIndex) === 'number' && { zIndex: (style === null || style === void 0 ? void 0 : style.zIndex) + 1 })), className: cnModal('Window', { width: width, position: position }, [className]), ref: ref }),
+            react_1["default"].createElement("div", tslib_1.__assign({}, otherProps, { style: tslib_1.__assign(tslib_1.__assign({}, style), { zIndex: undefined }), className: cnModal('Window', { width: width, position: position }, [className]), ref: ref }),
                 react_1["default"].createElement(ContextConsumer, { onClickOutside: onClickOutside || onOverlayClick, ignoreClicksInsideRefs: tslib_1.__spread((refsForExcludeClickOutside || []), [ref]) }, children)))));
 };

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

@@ -32,8 +32,6 @@ exports.Pagination = react_1["default"].forwardRef(function (props, ref) {
             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"]);
-    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];
@@ -81,6 +79,8 @@ exports.Pagination = react_1["default"].forwardRef(function (props, ref) {
         };
     });
     var itemWidth = "var(--control-height-" + size + ")";
+    if (!totalPages)
+        return null;
     return ((!isEmpty && (react_1["default"].createElement("nav", tslib_1.__assign({ className: exports.cnPagination({ form: form, size: size, position: minified ? exports.paginationDefaultPosition : position }, [className]), ref: ref }, otherProps),
         (currPage > 1 || minified) && (react_1["default"].createElement("div", { className: exports.cnPagination('PrevPage') },
             react_1["default"].createElement(Button_1.Button, { className: exports.cnPagination('ItemLeft', {

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

@@ -8,13 +8,24 @@ var useForkRef_1 = require("../../hooks/useForkRef/useForkRef");
 var Theme_1 = require("../Theme/Theme");
 var PortalWithThemeContext_1 = require("./PortalWithThemeContext/PortalWithThemeContext");
 exports.usePortalContext = PortalWithThemeContext_1.usePortalContext;
+var getZIndex = function (contextZindex, propZindex) {
+    if (typeof propZindex === 'number') {
+        return propZindex;
+    }
+    if (contextZindex) {
+        return contextZindex + 1;
+    }
+    return undefined;
+};
 exports.PortalWithTheme = react_1["default"].forwardRef(function (_a, ref) {
-    var children = _a.children, _b = _a.container, container = _b === void 0 ? window.document.body : _b, rest = tslib_1.__rest(_a, ["children", "container"]);
-    var addRefs = PortalWithThemeContext_1.usePortalContext().addRefs;
+    var children = _a.children, _b = _a.container, container = _b === void 0 ? window.document.body : _b, styleProp = _a.style, rest = tslib_1.__rest(_a, ["children", "container", "style"]);
+    var _c = PortalWithThemeContext_1.usePortalContext(), addRefs = _c.addRefs, zIndexContext = _c.zIndex;
     var themeRef = react_1.useRef(null);
+    var zIndex = getZIndex(zIndexContext, styleProp === null || styleProp === void 0 ? void 0 : styleProp.zIndex);
+    var style = tslib_1.__assign(tslib_1.__assign({}, styleProp), { zIndex: zIndex });
     react_1.useEffect(function () {
         addRefs && addRefs([themeRef]);
     }, [themeRef]);
-    return react_dom_1["default"].createPortal(react_1["default"].createElement(PortalWithThemeContext_1.PortalWithThemeProvider, null,
-        react_1["default"].createElement(Theme_1.Theme, tslib_1.__assign({ ref: useForkRef_1.useForkRef([themeRef, ref]) }, rest), children)), container);
+    return react_dom_1["default"].createPortal(react_1["default"].createElement(PortalWithThemeContext_1.PortalWithThemeProvider, { zIndex: zIndex },
+        react_1["default"].createElement(Theme_1.Theme, tslib_1.__assign({ ref: useForkRef_1.useForkRef([themeRef, ref]), style: style }, rest), children)), container);
 });

package/__internal__/cjs-src/components/PortalWithTheme/PortalWithThemeContext/PortalWithThemeContext.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 export declare function usePortalContext(): {
     refs: React.RefObject<HTMLElement>[];
     addRefs?: ((ref: React.RefObject<HTMLElement>[]) => void) | undefined;
+    zIndex?: number | undefined;
 };
 /**
  * PortalWithThemeProvider
@@ -12,4 +13,6 @@ export declare function usePortalContext(): {
  * компонент думал ччто клик произашел вне компонента и срабатывал onOutsideClick.
  * Сечас когда мы знаем рефы всех вложенных порталов мы можем игнорировать события кликов на вложенных порталах
  */
-export declare const PortalWithThemeProvider: React.FC;
+export declare const PortalWithThemeProvider: React.FC<{
+    zIndex?: number;
+}>;

package/__internal__/cjs-src/components/PortalWithTheme/PortalWithThemeContext/PortalWithThemeContext.js

@@ -4,7 +4,8 @@ exports.PortalWithThemeProvider = exports.usePortalContext = void 0;
 var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importStar(require("react"));
 var Context = react_1.createContext({
-    refs: []
+    refs: [],
+    zIndex: undefined
 });
 function usePortalContext() {
     return react_1.useContext(Context);
@@ -44,5 +45,5 @@ exports.PortalWithThemeProvider = function (props) {
         contextAddRefs && contextAddRefs(refs);
     }, [refs]);
     react_1.useEffect(function () { return function () { return setRefs([]); }; }, []);
-    return react_1["default"].createElement(Context.Provider, { value: { refs: refs, addRefs: addRefs } }, props.children);
+    return (react_1["default"].createElement(Context.Provider, { value: { refs: refs, addRefs: addRefs, zIndex: props.zIndex } }, props.children));
 };

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[];

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

@@ -6,35 +6,44 @@ require("./SelectDropdown.css");
 var react_1 = tslib_1.__importStar(require("react"));
 var react_transition_group_1 = require("react-transition-group");
 var useSelect_1 = require("../../../hooks/useSelect/useSelect");
+var MixPopoverAnimate_1 = require("../../../mixs/MixPopoverAnimate/MixPopoverAnimate");
 var bem_1 = require("../../../utils/bem");
-var cnForCssTransition_1 = require("../../../utils/cnForCssTransition");
 var fabricIndex_1 = require("../../../utils/fabricIndex");
 var Popover_1 = require("../../Popover/Popover");
 var Text_1 = require("../../Text/Text");
 var SelectCreateButton_1 = require("../SelectCreateButton/SelectCreateButton");
 var SelectGroupLabel_1 = require("../SelectGroupLabel/SelectGroupLabel");
+var SelectLoader_1 = require("../SelectLoader/SelectLoader");
 exports.selectDropdownform = ['default', 'brick', 'round'];
 exports.defaultSelectDropdownPropForm = exports.selectDropdownform[0];
 var cnSelectDropdown = bem_1.cn('SelectDropdown');
-var cnSelectDropdownCssTransition = cnForCssTransition_1.cnForCssTransition(cnSelectDropdown);
 exports.SelectDropdown = function (props) {
-    var controlRef = props.controlRef, size = props.size, getOptionProps = props.getOptionProps, dropdownRef = props.dropdownRef, labelForCreate = props.labelForCreate, className = props.className, labelForNotFound = props.labelForNotFound, labelForEmptyItems = props.labelForEmptyItems, _a = props.hasItems, hasItems = _a === void 0 ? true : _a, form = props.form, isOpen = props.isOpen, renderItem = props.renderItem, visibleItems = props.visibleItems, getGroupLabel = props.getGroupLabel, notFound = props.notFound, otherProps = tslib_1.__rest(props, ["controlRef", "size", "getOptionProps", "dropdownRef", "labelForCreate", "className", "labelForNotFound", "labelForEmptyItems", "hasItems", "form", "isOpen", "renderItem", "visibleItems", "getGroupLabel", "notFound"]);
+    var controlRef = props.controlRef, size = props.size, getOptionProps = props.getOptionProps, dropdownRef = props.dropdownRef, labelForCreate = props.labelForCreate, className = props.className, labelForNotFound = props.labelForNotFound, labelForEmptyItems = props.labelForEmptyItems, _a = props.hasItems, hasItems = _a === void 0 ? true : _a, form = props.form, isOpen = props.isOpen, renderItem = props.renderItem, visibleItems = props.visibleItems, isLoading = props.isLoading, getGroupLabel = props.getGroupLabel, notFound = props.notFound, otherProps = tslib_1.__rest(props, ["controlRef", "size", "getOptionProps", "dropdownRef", "labelForCreate", "className", "labelForNotFound", "labelForEmptyItems", "hasItems", "form", "isOpen", "renderItem", "visibleItems", "isLoading", "getGroupLabel", "notFound"]);
     var getIndex = fabricIndex_1.fabricIndex(-1);
+    var _b = tslib_1.__read(react_1.useState('downStartLeft'), 2), direction = _b[0], setDirection = _b[1];
     var indent = form === 'round' ? 'increased' : 'normal';
     var popoverRef = react_1.useRef(null);
-    return (react_1["default"].createElement(react_transition_group_1.CSSTransition, { "in": isOpen, unmountOnExit: true, appear: true, nodeRef: popoverRef, classNames: cnSelectDropdownCssTransition, timeout: 200 },
-        react_1["default"].createElement(Popover_1.Popover, tslib_1.__assign({}, otherProps, { anchorRef: controlRef, direction: "downStartLeft", possibleDirections: ['downStartLeft', 'upStartLeft', 'downStartRight', 'upStartRight'], offset: 1, ref: popoverRef, role: "listbox", className: cnSelectDropdown({ form: form, size: size }, [className]), equalAnchorWidth: true }),
-            react_1["default"].createElement("div", { className: cnSelectDropdown('List', { size: size, form: form }), ref: dropdownRef },
-                visibleItems.map(function (group) {
-                    if (useSelect_1.isOptionForCreate(group)) {
-                        return (react_1["default"].createElement(SelectCreateButton_1.SelectCreateButton, tslib_1.__assign({ size: size, labelForCreate: labelForCreate, inputValue: group.label, indent: indent }, getOptionProps({ index: getIndex(), item: group }))));
-                    }
-                    return (react_1["default"].createElement(react_1.Fragment, { key: group.key },
-                        group.group && getGroupLabel && (react_1["default"].createElement(SelectGroupLabel_1.SelectGroupLabel, { label: getGroupLabel(group.group), size: size, indent: indent })),
-                        group.items.map(function (item, i) {
-                            return (react_1["default"].createElement(react_1.Fragment, { key: group.key + "-" + i }, renderItem(tslib_1.__assign({ item: item }, getOptionProps({ index: getIndex(), item: item })))));
-                        })));
-                }),
-                notFound && labelForNotFound && (react_1["default"].createElement(Text_1.Text, { className: cnSelectDropdown('LabelForNotFound') }, labelForNotFound)),
-                !hasItems && labelForEmptyItems && (react_1["default"].createElement(Text_1.Text, { className: cnSelectDropdown('LabelForEmptyItems') }, labelForEmptyItems))))));
+    var isListShowed = react_1.useMemo(function () {
+        return (visibleItems.filter(function (group) {
+            return useSelect_1.isOptionForCreate(group) || (Array.isArray(group.items) && group.items.length > 0);
+        }).length > 0);
+    }, [visibleItems]);
+    return (react_1["default"].createElement(react_transition_group_1.Transition, { "in": isOpen, unmountOnExit: true, nodeRef: popoverRef, timeout: MixPopoverAnimate_1.animateTimeout }, function (animate) { return (react_1["default"].createElement(Popover_1.Popover, tslib_1.__assign({}, otherProps, { anchorRef: controlRef, direction: "downStartLeft", possibleDirections: ['downStartLeft', 'upStartLeft', 'downStartRight', 'upStartRight'], offset: "2xs", ref: popoverRef, role: "listbox", onSetDirection: setDirection, className: cnSelectDropdown({ form: form, size: size }, [
+            className,
+            MixPopoverAnimate_1.cnMixPopoverAnimate({ direction: direction, animate: animate }),
+        ]), equalAnchorWidth: true }),
+        react_1["default"].createElement("div", { className: cnSelectDropdown('List', { size: size, form: form }), ref: dropdownRef },
+            isLoading && react_1["default"].createElement(SelectLoader_1.SelectLoader, { mode: isListShowed ? 'blur' : 'empty' }),
+            visibleItems.map(function (group) {
+                if (useSelect_1.isOptionForCreate(group)) {
+                    return (react_1["default"].createElement(SelectCreateButton_1.SelectCreateButton, tslib_1.__assign({ size: size, labelForCreate: labelForCreate, inputValue: group.label, indent: indent }, getOptionProps({ index: getIndex(), item: group }))));
+                }
+                return (react_1["default"].createElement(react_1.Fragment, { key: group.key },
+                    group.group && getGroupLabel && (react_1["default"].createElement(SelectGroupLabel_1.SelectGroupLabel, { label: getGroupLabel(group.group), size: size, indent: indent })),
+                    group.items.map(function (item, i) {
+                        return (react_1["default"].createElement(react_1.Fragment, { key: group.key + "-" + i }, renderItem(tslib_1.__assign({ item: item }, getOptionProps({ index: getIndex(), item: item })))));
+                    })));
+            }),
+            !isLoading && hasItems && notFound && labelForNotFound && (react_1["default"].createElement(Text_1.Text, { className: cnSelectDropdown('LabelForNotFound') }, labelForNotFound)),
+            !isLoading && !hasItems && labelForEmptyItems && (react_1["default"].createElement(Text_1.Text, { className: cnSelectDropdown('LabelForEmptyItems') }, labelForEmptyItems))))); }));
 };