@consta/uikit 3.18.0 → 3.18.3

package/__internal__/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__/src/components/Modal/Modal.js

@@ -24,7 +24,7 @@ var ContextConsumer = function (_a) {
     useClickOutside({
         isActive: !!onClickOutside,
         ignoreClicksInsideRefs: __spread((ignoreClicksInsideRefs || []), (refs || [])),
-        handler: function (event) { return onClickOutside === null || onClickOutside === void 0 ? void 0 : onClickOutside(event); }
+        handler: onClickOutside
     });
     return React.createElement(React.Fragment, null, children);
 };
@@ -44,9 +44,9 @@ export var Modal = function (props) {
     useGlobalKeys({
         Escape: function (e) { return isOpen && onEsc && onEsc(e); }
     });
-    return (React.createElement(CSSTransition, { "in": isOpen, unmountOnExit: true, appear: true, classNames: cnForCssTransition(cnModal), timeout: 200, nodeRef: portalRef },
+    return (React.createElement(CSSTransition, { "in": isOpen, unmountOnExit: true, appear: true, classNames: cnForCssTransition(cnModal), timeout: 240, nodeRef: portalRef },
         React.createElement(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.createElement("div", { className: cnModal('Overlay'), "aria-label": "Overlay" }),
-            React.createElement("div", __assign({}, otherProps, { style: __assign(__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.createElement("div", __assign({}, otherProps, { style: __assign(__assign({}, style), { zIndex: undefined }), className: cnModal('Window', { width: width, position: position }, [className]), ref: ref }),
                 React.createElement(ContextConsumer, { onClickOutside: onClickOutside || onOverlayClick, ignoreClicksInsideRefs: __spread((refsForExcludeClickOutside || []), [ref]) }, children)))));
 };

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

@@ -29,8 +29,6 @@ export var Pagination = React.forwardRef(function (props, ref) {
             values: ['Alt', 'ArrowLeft']
         }
     } : _j, _k = props.containerEventListener, containerEventListener = _k === void 0 ? window : _k, className = props.className, otherProps = __rest(props, ["currentPage", "totalPages", "onChange", "getLabel", "form", "size", "type", "position", "minified", "hotkeys", "containerEventListener", "className"]);
-    if (!totalPages)
-        return null;
     var currPage = currentPage + 1;
     var _l = getPaginationInfo(currPage, totalPages), prevPage = _l.prevPage, nextPage = _l.nextPage, isStartDots = _l.isStartDots, isEndDots = _l.isEndDots, pages = _l.pages, isEmpty = _l.isEmpty;
     var _m = __read(React.useState([]), 2), keys = _m[0], setKeys = _m[1];
@@ -78,6 +76,8 @@ export var Pagination = React.forwardRef(function (props, ref) {
         };
     });
     var itemWidth = "var(--control-height-" + size + ")";
+    if (!totalPages)
+        return null;
     return ((!isEmpty && (React.createElement("nav", __assign({ className: cnPagination({ form: form, size: size, position: minified ? paginationDefaultPosition : position }, [className]), ref: ref }, otherProps),
         (currPage > 1 || minified) && (React.createElement("div", { className: cnPagination('PrevPage') },
             React.createElement(Button, { className: cnPagination('ItemLeft', {

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

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

package/__internal__/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__/src/components/PortalWithTheme/PortalWithThemeContext/PortalWithThemeContext.js

@@ -1,7 +1,8 @@
 import { __read, __spread } from "tslib";
 import React, { createContext, useContext, useEffect, useState } from 'react';
 var Context = createContext({
-    refs: []
+    refs: [],
+    zIndex: undefined
 });
 export function usePortalContext() {
     return useContext(Context);
@@ -40,5 +41,5 @@ export var PortalWithThemeProvider = function (props) {
         contextAddRefs && contextAddRefs(refs);
     }, [refs]);
     useEffect(function () { return function () { return setRefs([]); }; }, []);
-    return React.createElement(Context.Provider, { value: { refs: refs, addRefs: addRefs } }, props.children);
+    return (React.createElement(Context.Provider, { value: { refs: refs, addRefs: addRefs, zIndex: props.zIndex } }, props.children));
 };

package/__internal__/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__/src/components/ProgressStepBarCanary/ProgressStepBarCanary.js

@@ -8,14 +8,16 @@ import { useScrollElements } from '../../hooks/useScrollElements/useScrollElemen
 import { IconArrowLeft } from '../../icons/IconArrowLeft/IconArrowLeft';
 import { IconArrowRight } from '../../icons/IconArrowRight/IconArrowRight';
 import { Button } from '../Button/Button';
+import { usePropsHandler } from '../EventInterceptor/usePropsHandler';
 import { ProgressStepBarItem } from './ProgressStepBarItem/ProgressStepBarItem';
 import { ProgressStepBarLine } from './ProgressStepBarLine/ProgressStepBarLine';
 import { cnProgressStepBar, getItemPosition, getLineSize, propDirectionDefault, propSizeDefault, withDefaultGetters, } from './helpers';
+export var COMPONENT_NAME = 'ProgressStepBar';
 function ProgressStepBarRender(props, ref) {
-    var _a = withDefaultGetters(props), _b = _a.steps, steps = _b === void 0 ? [] : _b, _c = _a.direction, direction = _c === void 0 ? propDirectionDefault : _c, _d = _a.size, size = _d === void 0 ? 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 = __rest(_a, ["steps", "direction", "size", "className", "activeStepIndex", "onItemClick", "getItemContent", "getItemLabel", "getItemPoint", "getItemProgress", "getItemStatus", "getItemTooltipContent", "getItemLineStatus", "getItemOnClick", "style"]);
+    var containerRef = useRef(null);
+    var _a = usePropsHandler(COMPONENT_NAME, withDefaultGetters(props), containerRef), _b = _a.steps, steps = _b === void 0 ? [] : _b, _c = _a.direction, direction = _c === void 0 ? propDirectionDefault : _c, _d = _a.size, size = _d === void 0 ? 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 = __rest(_a, ["steps", "direction", "size", "className", "activeStepIndex", "onItemClick", "getItemContent", "getItemLabel", "getItemPoint", "getItemProgress", "getItemStatus", "getItemTooltipContent", "getItemLineStatus", "getItemOnClick", "style"]);
     var _e = __read(useState([]), 2), lines = _e[0], setLines = _e[1];
     var _f = __read(useState(activeStepIndex || 0), 2), visibleIndex = _f[0], setVisibleIndex = _f[1];
-    var containerRef = useRef(null);
     var listRef = useRef(null);
     var _g = useComponentSize(containerRef), width = _g.width, height = _g.height;
     var _h = useScrollElements(steps), refs = _h.refs, scrollTo = _h.scrollTo;

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

@@ -33,7 +33,7 @@ var renderPointContent = function (point, size, progress) {
     return React.createElement(Icon, { size: "xs" });
 };
 export var ProgressStepBarItem = React.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 ? propPositionDefault : _a, otherProps = __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 ? propPositionDefault : _a, tooltipZIndex = props.tooltipZIndex, otherProps = __rest(props, ["content", "tooltipContent", "label", "point", "status", "progress", "direction", "size", "pointRef", "onClick", "position", "tooltipZIndex"]);
     var _b = __read(useFlag(), 2), isTooltipVisible = _b[0], _c = _b[1], setTooltipVisible = _c.on, setTooltipUnVisible = _c.off;
     var anchorRef = useRef(null);
     var pointProps = {
@@ -62,5 +62,5 @@ export var ProgressStepBarItem = React.forwardRef(function (props, ref) {
             (label || content) && (React.createElement("div", { className: cnProgressStepBarItem('Content', { bottomOffset: !!content }) },
                 label && (React.createElement(Text, { className: cnProgressStepBarItem('Label'), ref: anchorRef, size: size, onMouseEnter: setTooltipVisible, onMouseLeave: setTooltipUnVisible, lineHeight: size === 's' ? 'xs' : size, view: "primary" }, label)),
                 content))),
-        tooltipContent && isTooltipVisible && (React.createElement(Tooltip, { anchorRef: label || content ? anchorRef : pointRef, className: cnProgressStepBarItem('Tooltip'), direction: direction === 'horizontal' ? 'downCenter' : 'leftUp', possibleDirections: direction === 'horizontal' ? possibleHorizontalDirections : possibleVerticalDirections }, tooltipContent))));
+        tooltipContent && isTooltipVisible && (React.createElement(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__/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__/src/components/Radio/Radio.js

@@ -1,8 +1,10 @@
 import { __assign, __rest } from "tslib";
 import './Radio.css';
-import React from 'react';
+import React, { useRef } from 'react';
+import { useForkRef } from '../../hooks/useForkRef/useForkRef';
 import { cnMixFocus } from '../../mixs/MixFocus/MixFocus';
 import { cn } from '../../utils/bem';
+import { usePropsHandler } from '../EventInterceptor/usePropsHandler';
 export var radioPropSize = ['m', 'l'];
 export var radioPropSizeDefault = radioPropSize[0];
 export var radioPropView = ['primary', 'ghost'];
@@ -10,14 +12,16 @@ export var radioPropViewDefault = radioPropView[0];
 export var radioPropAlign = ['center', 'top'];
 export var radioPropAlignDefault = radioPropAlign[0];
 export var cnRadio = cn('Radio');
+export var COMPONENT_NAME = 'Radio';
 export var Radio = React.forwardRef(function (props, ref) {
-    var _a = props.checked, checked = _a === void 0 ? false : _a, name = props.name, _b = props.size, size = _b === void 0 ? radioPropSizeDefault : _b, _c = props.view, view = _c === void 0 ? radioPropViewDefault : _c, _d = props.align, align = _d === void 0 ? 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 = __rest(props, ["checked", "name", "size", "view", "align", "disabled", "className", "label", "onChange", "onFocus", "onBlur", "readOnly", "required", "step", "tabIndex", "inputRef"]);
+    var radioRef = useRef(null);
+    var _a = usePropsHandler(COMPONENT_NAME, props, radioRef), _b = _a.checked, checked = _b === void 0 ? false : _b, name = _a.name, _c = _a.size, size = _c === void 0 ? radioPropSizeDefault : _c, _d = _a.view, view = _d === void 0 ? radioPropViewDefault : _d, _e = _a.align, align = _e === void 0 ? 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 = __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.createElement("label", __assign({}, otherProps, { className: cnRadio({ size: size, view: view, disabled: disabled, align: align }, [className]), ref: ref }),
-        React.createElement("input", { type: "radio", name: name, className: cnRadio('Input', [cnMixFocus()]), checked: checked, disabled: disabled, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, readOnly: readOnly, required: required, step: step, tabIndex: tabIndex, ref: inputRef }),
+    return (React.createElement("label", __assign({}, otherProps, { className: cnRadio({ size: size, view: view, disabled: disabled, align: align }, [className]), ref: useForkRef([ref, radioRef]) }),
+        React.createElement("input", { type: "radio", name: name, className: cnRadio('Input', [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.createElement("span", { className: cnRadio('Label') }, label)));
 });

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

@@ -15,7 +15,7 @@ import { withDefaultGetters, } from './helpers';
 function SelectRender(props, ref) {
     var defaultDropdownRef = useRef(null);
     var controlRef = useRef(null);
-    var _a = usePropsHandler(COMPONENT_NAME, 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 ? defaultPropForm : _c, _d = _a.view, view = _d === void 0 ? defaultPropView : _d, _e = _a.size, size = _e === void 0 ? 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 ? 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 = __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(COMPONENT_NAME, 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 ? defaultPropForm : _c, _d = _a.view, view = _d === void 0 ? defaultPropView : _d, _e = _a.size, size = _e === void 0 ? 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 ? 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 = __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({
         items: items,
         groups: groups,
@@ -53,7 +53,7 @@ function SelectRender(props, ref) {
             React.createElement("span", { className: cnSelect('Indicators') },
                 React.createElement("button", { type: "button", className: cnSelect('IndicatorsDropdown'), tabIndex: -1, onClick: handleToggleDropdown },
                     React.createElement(IconSelect, { size: "xs", className: cnSelect('DropdownIndicatorIcon') })))),
-        React.createElement(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.createElement(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 })));
 }
 export var Select = forwardRef(SelectRender);
 export * from './helpers';

package/__internal__/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__/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__/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__/src/components/SelectComponents/SelectDropdown/SelectDropdown.js

@@ -1,37 +1,46 @@
-import { __assign, __rest } from "tslib";
+import { __assign, __read, __rest } from "tslib";
 import './SelectDropdown.css';
-import React, { Fragment, useRef } from 'react';
-import { CSSTransition } from 'react-transition-group';
+import React, { Fragment, useMemo, useRef, useState } from 'react';
+import { Transition } from 'react-transition-group';
 import { isOptionForCreate, } from '../../../hooks/useSelect/useSelect';
+import { animateTimeout, cnMixPopoverAnimate, } from '../../../mixs/MixPopoverAnimate/MixPopoverAnimate';
 import { cn } from '../../../utils/bem';
-import { cnForCssTransition } from '../../../utils/cnForCssTransition';
 import { fabricIndex } from '../../../utils/fabricIndex';
 import { Popover } from '../../Popover/Popover';
 import { Text } from '../../Text/Text';
 import { SelectCreateButton } from '../SelectCreateButton/SelectCreateButton';
 import { SelectGroupLabel } from '../SelectGroupLabel/SelectGroupLabel';
+import { SelectLoader } from '../SelectLoader/SelectLoader';
 export var selectDropdownform = ['default', 'brick', 'round'];
 export var defaultSelectDropdownPropForm = selectDropdownform[0];
 var cnSelectDropdown = cn('SelectDropdown');
-var cnSelectDropdownCssTransition = cnForCssTransition(cnSelectDropdown);
 export var 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 = __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 = __rest(props, ["controlRef", "size", "getOptionProps", "dropdownRef", "labelForCreate", "className", "labelForNotFound", "labelForEmptyItems", "hasItems", "form", "isOpen", "renderItem", "visibleItems", "isLoading", "getGroupLabel", "notFound"]);
     var getIndex = fabricIndex(-1);
+    var _b = __read(useState('downStartLeft'), 2), direction = _b[0], setDirection = _b[1];
     var indent = form === 'round' ? 'increased' : 'normal';
     var popoverRef = useRef(null);
-    return (React.createElement(CSSTransition, { "in": isOpen, unmountOnExit: true, appear: true, nodeRef: popoverRef, classNames: cnSelectDropdownCssTransition, timeout: 200 },
-        React.createElement(Popover, __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.createElement("div", { className: cnSelectDropdown('List', { size: size, form: form }), ref: dropdownRef },
-                visibleItems.map(function (group) {
-                    if (isOptionForCreate(group)) {
-                        return (React.createElement(SelectCreateButton, __assign({ size: size, labelForCreate: labelForCreate, inputValue: group.label, indent: indent }, getOptionProps({ index: getIndex(), item: group }))));
-                    }
-                    return (React.createElement(Fragment, { key: group.key },
-                        group.group && getGroupLabel && (React.createElement(SelectGroupLabel, { label: getGroupLabel(group.group), size: size, indent: indent })),
-                        group.items.map(function (item, i) {
-                            return (React.createElement(Fragment, { key: group.key + "-" + i }, renderItem(__assign({ item: item }, getOptionProps({ index: getIndex(), item: item })))));
-                        })));
-                }),
-                notFound && labelForNotFound && (React.createElement(Text, { className: cnSelectDropdown('LabelForNotFound') }, labelForNotFound)),
-                !hasItems && labelForEmptyItems && (React.createElement(Text, { className: cnSelectDropdown('LabelForEmptyItems') }, labelForEmptyItems))))));
+    var isListShowed = useMemo(function () {
+        return (visibleItems.filter(function (group) {
+            return isOptionForCreate(group) || (Array.isArray(group.items) && group.items.length > 0);
+        }).length > 0);
+    }, [visibleItems]);
+    return (React.createElement(Transition, { "in": isOpen, unmountOnExit: true, nodeRef: popoverRef, timeout: animateTimeout }, function (animate) { return (React.createElement(Popover, __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,
+            cnMixPopoverAnimate({ direction: direction, animate: animate }),
+        ]), equalAnchorWidth: true }),
+        React.createElement("div", { className: cnSelectDropdown('List', { size: size, form: form }), ref: dropdownRef },
+            isLoading && React.createElement(SelectLoader, { mode: isListShowed ? 'blur' : 'empty' }),
+            visibleItems.map(function (group) {
+                if (isOptionForCreate(group)) {
+                    return (React.createElement(SelectCreateButton, __assign({ size: size, labelForCreate: labelForCreate, inputValue: group.label, indent: indent }, getOptionProps({ index: getIndex(), item: group }))));
+                }
+                return (React.createElement(Fragment, { key: group.key },
+                    group.group && getGroupLabel && (React.createElement(SelectGroupLabel, { label: getGroupLabel(group.group), size: size, indent: indent })),
+                    group.items.map(function (item, i) {
+                        return (React.createElement(Fragment, { key: group.key + "-" + i }, renderItem(__assign({ item: item }, getOptionProps({ index: getIndex(), item: item })))));
+                    })));
+            }),
+            !isLoading && hasItems && notFound && labelForNotFound && (React.createElement(Text, { className: cnSelectDropdown('LabelForNotFound') }, labelForNotFound)),
+            !isLoading && !hasItems && labelForEmptyItems && (React.createElement(Text, { className: cnSelectDropdown('LabelForEmptyItems') }, labelForEmptyItems))))); }));
 };

package/__internal__/src/components/SelectComponents/SelectLoader/SelectLoader.css

@@ -0,0 +1,53 @@
+.SelectLoader {
+  --loader-height: 0;
+  width: 100%;
+  height: 100%;
+  cursor: wait;
+}
+
+  .SelectLoader_size_xs {
+      --loader-height: calc(var(--control-space-xs) + var(--control-text-size-xs));
+    }
+
+  .SelectLoader_size_s {
+      --loader-height: calc(var(--control-space-s) + var(--control-text-size-s));
+    }
+
+  .SelectLoader_size_m {
+      --loader-height: calc(var(--control-space-m) + var(--control-text-size-m));
+    }
+
+  .SelectLoader_size_l {
+      --loader-height: calc(var(--control-space-l) + var(--control-text-size-l));
+    }
+
+  .SelectLoader-Loader {
+    --backgroundColor: var(--color-control-typo-disable);
+    z-index: 1;
+  }
+
+  .SelectLoader_mode_empty {
+      height: var(--loader-height);
+    }
+
+  .SelectLoader_mode_empty .SelectLoader-Loader {
+        left: calc(var(--space-s) + 10px);
+      }
+
+  .SelectLoader_mode_blur {
+      position: absolute;
+      z-index: 1;
+      top: 0;
+      left: 0;
+    }
+
+  .SelectLoader_mode_blur::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: var(--color-bg-default);
+        opacity: 0.7;
+      }

package/__internal__/src/components/SelectComponents/SelectLoader/SelectLoader.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import './SelectLoader.css';
+import { PropSize } from '../types';
+declare type Props = {
+    mode?: 'empty' | 'blur';
+    size?: PropSize;
+};
+export declare const SelectLoader: (props: Props) => JSX.Element;
+export {};

package/__internal__/src/components/SelectComponents/SelectLoader/SelectLoader.js

@@ -0,0 +1,11 @@
+import './SelectLoader.css';
+import React from 'react';
+import { cn } from '../../../utils/bem';
+import { Loader } from '../../Loader/Loader';
+import { defaultPropSize } from '../types';
+var cnSelectLoader = cn('SelectLoader');
+export var SelectLoader = function (props) {
+    var _a = props.mode, mode = _a === void 0 ? 'empty' : _a, _b = props.size, size = _b === void 0 ? defaultPropSize : _b;
+    return (React.createElement("div", { className: cnSelectLoader({ mode: mode, size: size }) },
+        React.createElement(Loader, { className: cnSelectLoader('Loader'), size: "s" })));
+};