@sima-land/ui-nucleons 41.3.0 → 42.2.0

package/alert/index.d.ts

@@ -8,8 +8,6 @@ export interface AlertProps extends WithBodyScrollLock {
     className?: string;
     /** Содержимое "подвала". */
     footer?: React.ReactNode;
-    /** Нужно ли выводить в Layer. */
-    inPortal?: boolean;
     /** Свойства компонента NavBar. */
     navBarProps?: NavBarProps;
     /** Заголовок. */
@@ -26,4 +24,4 @@ export interface AlertProps extends WithBodyScrollLock {
  * @param props Свойства.
  * @return Элемент.
  */
-export declare const Alert: ({ inPortal, ...restProps }: AlertProps) => JSX.Element;
+export declare const Alert: ({ children, className, footer, navBarProps, title, withDivideNavBar, withNavBar, withScrollDisable, scrollDisableOptions, onClose, }: AlertProps) => JSX.Element;

package/alert/index.js

@@ -18,24 +18,12 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Alert = void 0;
 const react_1 = __importStar(require("react"));
-const portal_1 = require("../portal");
 const nav_bar_1 = require("../nav-bar");
 const bind_1 = __importDefault(require("classnames/bind"));
 const alert_module_scss_1 = __importDefault(require("./alert.module.scss"));
@@ -48,27 +36,15 @@ const cx = bind_1.default.bind(alert_module_scss_1.default);
  * @param props Свойства.
  * @return Элемент.
  */
-const Alert = (_a) => {
-    var { inPortal = true } = _a, restProps = __rest(_a, ["inPortal"]);
+const Alert = ({ children, className, footer, navBarProps, title, withDivideNavBar, withNavBar = Boolean(title), withScrollDisable = false, scrollDisableOptions, onClose, }) => {
     const layer = (0, layer_1.useLayer)() + 100;
-    const Wrapper = inPortal ? portal_1.Portal : react_1.Fragment;
-    return (react_1.default.createElement(layer_1.LayerProvider, { value: layer },
-        react_1.default.createElement(Wrapper, null,
-            react_1.default.createElement(AlertInner, Object.assign({}, restProps)))));
-};
-exports.Alert = Alert;
-/**
- * Промежуточный компонент, необходимый для того чтобы не передавать реф для блокировки прокрутки через портал.
- * @param props Свойства.
- * @return Элемент.
- */
-const AlertInner = ({ children, className, footer, navBarProps, title, withDivideNavBar, withNavBar = Boolean(title), withScrollDisable = false, scrollDisableOptions, onClose, }) => {
     const rootRef = (0, react_1.useRef)(null);
-    const layer = (0, layer_1.useLayer)();
     (0, body_scroll_1.useBodyScrollLock)(rootRef, withScrollDisable, Object.assign({ allowTouchMove: body_scroll_1.allowTouchMove }, scrollDisableOptions));
-    return (react_1.default.createElement("div", { ref: rootRef, className: cx('overlay'), style: { zIndex: layer }, onClick: e => e.target === e.currentTarget && (onClose === null || onClose === void 0 ? void 0 : onClose()), "data-testid": 'alert:overlay' },
-        react_1.default.createElement("div", { className: cx('alert', className), "data-testid": 'alert' },
-            withNavBar && (react_1.default.createElement(nav_bar_1.NavBar, Object.assign({}, navBarProps, { title: title, bottomBordered: withDivideNavBar, className: cx('header') }))),
-            react_1.default.createElement("div", { className: cx('main') }, children),
-            Boolean(footer) && react_1.default.createElement("div", { className: borders_1.InnerBorder.top }, footer))));
+    return (react_1.default.createElement(layer_1.LayerProvider, { value: layer },
+        react_1.default.createElement("div", { ref: rootRef, className: cx('overlay'), style: { zIndex: layer }, onClick: e => e.target === e.currentTarget && (onClose === null || onClose === void 0 ? void 0 : onClose()), "data-testid": 'alert:overlay' },
+            react_1.default.createElement("div", { className: cx('alert', className), "data-testid": 'alert' },
+                withNavBar && (react_1.default.createElement(nav_bar_1.NavBar, Object.assign({}, navBarProps, { title: title, bottomBordered: withDivideNavBar, className: cx('header') }))),
+                react_1.default.createElement("div", { className: cx('main') }, children),
+                Boolean(footer) && react_1.default.createElement("div", { className: borders_1.InnerBorder.top }, footer)))));
 };
+exports.Alert = Alert;

package/autocomplete/index.js

@@ -66,15 +66,13 @@ const Autocomplete = (_a) => {
     const rootRef = (0, react_1.useRef)(null);
     const fieldRef = (0, react_1.useRef)();
     const menuRef = (0, react_1.useRef)();
-    const [needDropdown, toggleDropdown] = (0, react_1.useState)(false);
+    const [withMenu, toggleMenu] = (0, react_1.useState)(false);
     const [realValue, setRealValue] = (0, react_1.useState)(value || defaultValue);
     const [activeIndex, setActiveIndex] = (0, react_1.useState)(null);
-    const canShowDropdown = preset === 'filled-only-list'
-        ? needDropdown && realValue && realValue.length > 0
-        : needDropdown;
+    const canShowDropdown = preset === 'filled-only-list' ? withMenu && realValue && realValue.length > 0 : withMenu;
     const endAdornment = preset === 'default' ? react_1.default.createElement(down_1.default, { fill: colors_1.COLORS.get('gray38') }) : undefined;
     (0, hooks_1.useOutsideClick)(rootRef, () => {
-        toggleDropdown(false);
+        toggleMenu(false);
     });
     (0, react_1.useEffect)(() => {
         setRealValue(value);
@@ -88,7 +86,7 @@ const Autocomplete = (_a) => {
         const osInstance = (_a = osComponentRef.current) === null || _a === void 0 ? void 0 : _a.osInstance();
         if (menu && osInstance && activeIndex !== null) {
             const child = menu.querySelectorAll('[role="menuitem"]')[activeIndex];
-            child &&
+            child instanceof HTMLElement &&
                 osInstance.scroll({
                     el: child,
                     scroll: { y: 'ifneeded' },
@@ -96,11 +94,11 @@ const Autocomplete = (_a) => {
         }
     }, [activeIndex]);
     return (react_1.default.createElement("div", { ref: rootRef, style: style, className: cx('root', className), "data-testid": dataTestId },
-        react_1.default.createElement(text_field_1.TextField, Object.assign({}, restProps, { ref: fieldRef, focused: needDropdown, endAdornment: endAdornment, "data-testid": 'autocomplete:field', variant: 'desktop', value: value, multiline: false, onClick: e => {
-                toggleDropdown(true);
+        react_1.default.createElement(text_field_1.TextField, Object.assign({}, restProps, { ref: fieldRef, focused: withMenu, endAdornment: endAdornment, "data-testid": 'autocomplete:field', variant: 'desktop', value: value, multiline: false, onClick: e => {
+                toggleMenu(true);
                 onClick && onClick(e);
             }, onChange: (e) => {
-                toggleDropdown(true);
+                toggleMenu(true);
                 setRealValue(e.target.value);
                 setActiveIndex(0);
                 onChange && onChange(e);
@@ -117,7 +115,7 @@ const Autocomplete = (_a) => {
                     case 'Enter':
                         if (items && !(0, lodash_1.isNull)(activeIndex) && items.length > activeIndex) {
                             onSelect && onSelect(items[activeIndex]);
-                            toggleDropdown(false);
+                            toggleMenu(false);
                         }
                         break;
                 }
@@ -127,7 +125,7 @@ const Autocomplete = (_a) => {
         canShowDropdown && (react_1.default.createElement(dropdown_1.Dropdown, Object.assign({}, (0, dropdown_2.placeDropdown)(restProps.size), { ref: menuRef, "data-testid": 'autocomplete:menu', className: cx('menu'), role: 'menu', customScrollbarProps: { osComponentRef } }), loading ? (react_1.default.createElement(dropdown_loading_1.DropdownLoading, { "data-testid": 'autocomplete:loading-area' })) : (react_1.default.createElement(react_1.default.Fragment, null, items && items.length > 0 ? (items.map((item, index) => (react_1.default.createElement(dropdown_item_1.DropdownItem, { size: itemSize, key: index, role: 'menuitem', checked: index === activeIndex, onClick: () => {
                 onSelect && onSelect(item);
                 setActiveIndex(null);
-                toggleDropdown(false);
+                toggleMenu(false);
                 fieldRef.current && fieldRef.current.focus();
             } }, renderItem(item))))) : (react_1.default.createElement(dropdown_item_1.DropdownItem, { size: 'm', noHover: true }, "\u041D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E"))))))));
 };

package/carousel/index.d.ts

@@ -49,6 +49,9 @@ interface ControlData {
     type: 'forward' | 'backward';
     vertical?: boolean;
 }
+interface ElementPredicate {
+    (sibling: Element): boolean;
+}
 /**
  * Карусель.
  */
@@ -96,8 +99,8 @@ export declare class Carousel extends Component<CarouselProps, State> {
      */
     static makeFurthestSiblingChecker({ vertical, viewport, }: {
         vertical: boolean;
-        viewport: DOMRect;
-    }): (sibling: Element) => boolean;
+        viewport?: DOMRect | null;
+    }): ElementPredicate;
     /**
      * Возвращает функцию для поиска наиболее близкого элемента карусели к viewport'у.
      * @param data Данные.
@@ -109,8 +112,8 @@ export declare class Carousel extends Component<CarouselProps, State> {
     static makeNearestSiblingChecker({ viewport, vertical, backward, }: {
         backward: boolean;
         vertical: boolean;
-        viewport: DOMRect;
-    }): (sibling: Element) => boolean;
+        viewport?: DOMRect | null;
+    }): ElementPredicate;
     /**
      * Геттер элемента списка.
      * @return Элемент списка или null.
@@ -272,10 +275,7 @@ export declare class Carousel extends Component<CarouselProps, State> {
      * @param dragEvent.offset Смещение.
      * @param dragEvent.client Позиция.
      */
-    saveDragStartData({ offset, client }: {
-        offset: IPoint;
-        client: IPoint;
-    }): void;
+    saveDragStartData({ offset, client }: DraggableEvent): void;
     /**
      * Сохраняет в состоянии смещение карусели.
      * @param newOffset Смещение.
@@ -289,10 +289,7 @@ export declare class Carousel extends Component<CarouselProps, State> {
      * @param draggableControls Функции управления Draggable.
      */
     takeDragControl({ isGrabbed, setOffset, toggleTransition }: Control): void;
-    /**
-     * Рендер.
-     * @inheritDoc
-     */
+    /** @inheritdoc */
     render(): JSX.Element;
     /**
      * Формирует список элементов карусели с учетом необходимости клонирования.

package/carousel/index.js

@@ -106,9 +106,14 @@ class Carousel extends react_1.Component {
      * @return Функция для поиска наиболее отдаленного элемента.
      */
     static makeFurthestSiblingChecker({ vertical, viewport, }) {
-        return vertical
-            ? (sibling) => (0, bounds_of_1.default)(sibling).top >= viewport.top
-            : (sibling) => (0, bounds_of_1.default)(sibling).left >= viewport.left;
+        // eslint-disable-next-line require-jsdoc
+        let checker = () => false;
+        if (viewport) {
+            checker = vertical
+                ? (sibling) => (0, bounds_of_1.default)(sibling).top >= viewport.top
+                : (sibling) => (0, bounds_of_1.default)(sibling).left >= viewport.left;
+        }
+        return checker;
     }
     /**
      * Возвращает функцию для поиска наиболее близкого элемента карусели к viewport'у.
@@ -121,9 +126,14 @@ class Carousel extends react_1.Component {
     static makeNearestSiblingChecker({ viewport, vertical, backward, }) {
         const verticalBoundKey = backward ? 'bottom' : 'top';
         const horizontalBoundKey = backward ? 'right' : 'left';
-        return vertical
-            ? (sibling) => viewport.top < (0, bounds_of_1.default)(sibling)[verticalBoundKey]
-            : (sibling) => viewport.left < (0, bounds_of_1.default)(sibling)[horizontalBoundKey];
+        // eslint-disable-next-line require-jsdoc
+        let checker = () => false;
+        if (viewport) {
+            checker = vertical
+                ? (sibling) => viewport.top < (0, bounds_of_1.default)(sibling)[verticalBoundKey]
+                : (sibling) => viewport.left < (0, bounds_of_1.default)(sibling)[horizontalBoundKey];
+        }
+        return checker;
     }
     /**
      * Геттер элемента списка.
@@ -240,12 +250,13 @@ class Carousel extends react_1.Component {
      * @param step На сколько элементов надо прокрутить карусель.
      */
     moveForwardFinite(step) {
+        var _a, _b;
         const { currentIndex } = this;
         const newIndex = currentIndex + step;
         this.toggleDragTransition(true);
-        this.setCurrentIndex(newIndex < (0, lodash_1.size)(this.listElement.children)
+        this.setCurrentIndex(newIndex < (0, lodash_1.size)((_a = this.listElement) === null || _a === void 0 ? void 0 : _a.children)
             ? newIndex
-            : (0, max_index_of_1.default)(this.listElement.children));
+            : (0, max_index_of_1.default)((_b = this.listElement) === null || _b === void 0 ? void 0 : _b.children));
     }
     /**
      * По возможности выполняет прокрутку карусели назад.
@@ -285,9 +296,11 @@ class Carousel extends react_1.Component {
         const { currentOffset } = this.state;
         const { items, vertical } = this.props;
         const realItemsCount = (0, lodash_1.size)(items);
-        if ((forward && currentIndex >= realItemsCount) ||
-            (!forward && currentIndex < realItemsCount)) {
-            const itemsSize = this.listElement[vertical ? 'scrollHeight' : 'scrollWidth'] / CLONE_FACTOR;
+        const listEl = this.listElement;
+        const needMoveForward = forward && currentIndex >= realItemsCount;
+        const needMoveBackward = !forward && currentIndex < realItemsCount;
+        if (listEl && (needMoveForward || needMoveBackward)) {
+            const itemsSize = listEl[vertical ? 'scrollHeight' : 'scrollWidth'] / CLONE_FACTOR;
             const newOffset = currentOffset + (forward ? itemsSize : -itemsSize);
             const newIndex = currentIndex + (forward ? -realItemsCount : realItemsCount);
             this.setCurrentOffset(newOffset, { withStateUpdate: false });
@@ -324,28 +337,32 @@ class Carousel extends react_1.Component {
      * @param dragEvent Событие.
      */
     correctInfiniteOffset(dragEvent) {
+        var _a, _b;
         const { vertical } = this.props;
         const { offset, client } = dragEvent;
         const { dragStartClient } = this;
         const { forward, backward } = this.defineDirection(dragStartClient, client);
         const viewport = this.getViewport();
-        const offsetValue = offset[vertical ? 'y' : 'x'];
-        const lastItem = this.listElement.lastElementChild;
-        const lastItemStartBound = (0, bounds_of_1.default)(lastItem)[vertical ? 'top' : 'left'];
-        const viewportStartBound = viewport[vertical ? 'top' : 'left'];
-        const viewportEndBound = viewport[vertical ? 'bottom' : 'right'];
-        const itemsSize = this.listElement[vertical ? 'scrollHeight' : 'scrollWidth'] / CLONE_FACTOR;
-        if (forward && lastItemStartBound < viewportEndBound) {
-            const newOffset = offsetValue + itemsSize;
-            dragEvent.preventDefault();
-            this.setCurrentOffset(newOffset, { withStateUpdate: false });
-            this.saveDragStartData(dragEvent);
-        }
-        else if (backward && viewportStartBound < this.findRealItemsStartBound()) {
-            const newOffset = offsetValue - itemsSize;
-            dragEvent.preventDefault();
-            this.setCurrentOffset(newOffset, { withStateUpdate: false });
-            this.saveDragStartData(dragEvent);
+        const listEl = this.listElement;
+        const lastItem = (_a = this.listElement) === null || _a === void 0 ? void 0 : _a.lastElementChild;
+        if (viewport && listEl && lastItem) {
+            const offsetValue = offset[vertical ? 'y' : 'x'];
+            const lastItemStartBound = (_b = (0, bounds_of_1.default)(lastItem)) === null || _b === void 0 ? void 0 : _b[vertical ? 'top' : 'left'];
+            const viewportStartBound = viewport[vertical ? 'top' : 'left'];
+            const viewportEndBound = viewport[vertical ? 'bottom' : 'right'];
+            const itemsSize = listEl[vertical ? 'scrollHeight' : 'scrollWidth'] / CLONE_FACTOR;
+            if (forward && lastItemStartBound < viewportEndBound) {
+                const newOffset = offsetValue + itemsSize;
+                dragEvent.preventDefault();
+                this.setCurrentOffset(newOffset, { withStateUpdate: false });
+                this.saveDragStartData(dragEvent);
+            }
+            else if (backward && viewportStartBound < this.findRealItemsStartBound()) {
+                const newOffset = offsetValue - itemsSize;
+                dragEvent.preventDefault();
+                this.setCurrentOffset(newOffset, { withStateUpdate: false });
+                this.saveDragStartData(dragEvent);
+            }
         }
     }
     /**
@@ -425,28 +442,30 @@ class Carousel extends react_1.Component {
      * @param options.needTransition Нужна ли плавная анимация прокрутки.
      */
     scrollToItem({ targetIndex = this.currentIndex, needTransition = true } = {}) {
-        const targetItemEl = this.listElement.children[targetIndex];
-        if (targetItemEl) {
+        var _a;
+        const listEl = this.listElement;
+        const viewport = this.getViewport();
+        const targetItemEl = (_a = this.listElement) === null || _a === void 0 ? void 0 : _a.children[targetIndex];
+        if (viewport && listEl && targetItemEl) {
             this.toggleDragTransition(needTransition);
             if (this.isAllItemsVisible()) {
                 this.setCurrentOffset(0);
             }
             else {
                 const { vertical } = this.props;
-                const viewport = this.getViewport();
                 const targetItemPos = (0, get_relative_pos_1.default)(targetItemEl);
                 const viewportEndBound = vertical ? viewport.bottom : viewport.right;
                 const nextItemsEndBound = vertical
-                    ? viewport.top + this.listElement.scrollHeight - targetItemPos.y
-                    : viewport.left + this.listElement.scrollWidth - targetItemPos.x;
+                    ? viewport.top + listEl.scrollHeight - targetItemPos.y
+                    : viewport.left + listEl.scrollWidth - targetItemPos.x;
                 if (nextItemsEndBound >= viewportEndBound) {
                     const itemBound = vertical ? targetItemPos.y : targetItemPos.x;
                     this.setCurrentOffset(-itemBound);
                 }
                 else {
                     const maxItemsEndBound = vertical
-                        ? viewport.top + this.listElement.scrollHeight
-                        : viewport.left + this.listElement.scrollWidth;
+                        ? viewport.top + listEl.scrollHeight
+                        : viewport.left + listEl.scrollWidth;
                     this.setCurrentOffset(viewportEndBound - maxItemsEndBound);
                 }
             }
@@ -467,13 +486,14 @@ class Carousel extends react_1.Component {
      */
     defineMinOffset() {
         const { vertical } = this.props;
+        const viewport = this.getViewport();
+        const listEl = this.listElement;
         let minOffset = NaN;
-        if (this.listElement) {
-            const viewport = this.getViewport();
+        if (viewport && listEl) {
             const viewportEndBound = vertical ? viewport.bottom : viewport.right;
             const maxItemsEndBound = vertical
-                ? viewport.top + this.listElement.scrollHeight
-                : viewport.left + this.listElement.scrollWidth;
+                ? viewport.top + listEl.scrollHeight
+                : viewport.left + listEl.scrollWidth;
             minOffset = viewportEndBound - maxItemsEndBound;
         }
         return minOffset;
@@ -483,11 +503,12 @@ class Carousel extends react_1.Component {
      * @return Длина/ширина списка элементов.
      */
     getRealItemsSize() {
+        const listEl = this.listElement;
         let result = 0;
-        if (this.listElement) {
+        if (listEl) {
             const { items, vertical } = this.props;
-            const firstChild = this.listElement.children[0];
-            const lastChild = this.listElement.children[(0, lodash_1.size)(items) - 1];
+            const firstChild = listEl.children[0];
+            const lastChild = listEl.children[(0, lodash_1.size)(items) - 1];
             if (firstChild && lastChild) {
                 const startBound = (0, bounds_of_1.default)(firstChild)[vertical ? 'top' : 'left'];
                 const endBound = (0, bounds_of_1.default)(lastChild)[vertical ? 'bottom' : 'right'];
@@ -502,7 +523,8 @@ class Carousel extends react_1.Component {
      */
     getViewportSize() {
         const { vertical } = this.props;
-        return this.getViewport()[vertical ? 'height' : 'width'];
+        const viewport = this.getViewport();
+        return viewport ? viewport[vertical ? 'height' : 'width'] : 0;
     }
     /**
      * Возвращает данные прямоугольной области видимости карусели.
@@ -540,10 +562,7 @@ class Carousel extends react_1.Component {
         this.setDragOffset = setOffset;
         this.isGrabbed = isGrabbed;
     }
-    /**
-     * Рендер.
-     * @inheritDoc
-     */
+    /** @inheritdoc */
     render() {
         const { currentOffset, isAllItemsVisible } = this.state;
         const { autoplay, autoplayHoverPause, vertical, containerProps = {}, viewportElementProps = {}, withControls = 'auto', renderControl = Carousel.defaultRenderControl, controlProps, } = this.props;

package/helpers/find-child-element.d.ts

@@ -10,7 +10,7 @@
  * @return Родственный элемент.
  */
 declare const findChildElement: ({ target, startIndex, increment, defaultResult, isSuitable, needBreakLoop, }: {
-    target: HTMLElement;
+    target?: HTMLElement | null | undefined;
     startIndex?: number | undefined;
     increment?: number | undefined;
     defaultResult?: number | undefined;

package/hooks/index.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useIsomorphicLayoutEffect = exports.useOutsideClick = exports.useInfiniteScroll = exports.useIsTouchDevice = void 0;
 const react_1 = require("react");
 const is_touch_device_1 = require("../helpers/is-touch-device");
-const lodash_1 = require("lodash");
 const on_1 = __importDefault(require("../helpers/on"));
 const identity_1 = require("./identity");
 /**
@@ -51,16 +50,14 @@ exports.useInfiniteScroll = useInfiniteScroll;
  * @param callback Сработает при клике вне элемента.
  */
 const useOutsideClick = (elementRef, callback) => {
-    const callbackRef = (0, react_1.useRef)(callback);
-    callbackRef.current = callback;
-    (0, react_1.useEffect)(() => (0, on_1.default)(document.documentElement, 'click', (event) => {
+    const callbackRef = (0, identity_1.useIdentityRef)(callback);
+    (0, react_1.useEffect)(() => (0, on_1.default)(document.documentElement, 'click', event => {
         const { current: element } = elementRef;
         const { current: handleClick } = callbackRef;
         element &&
             element !== event.target &&
             !element.contains(event.target) &&
-            (0, lodash_1.isFunction)(handleClick) &&
-            handleClick(event);
+            (handleClick === null || handleClick === void 0 ? void 0 : handleClick(event));
     }), []);
 };
 exports.useOutsideClick = useOutsideClick;

package/modal/index.d.ts

@@ -13,8 +13,6 @@ export interface ModalProps extends WithBodyScrollLock {
     onClose?: () => void;
     /** Размер окна. */
     size?: ModalSize;
-    /** Нужно ли выводить элемент в портале (для SSR следует указывать false). */
-    inPortal?: boolean;
     /** Идентификатор для систем автоматизированного тестирования. */
     'data-testid'?: string;
 }

package/modal/index.js

@@ -18,17 +18,6 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -39,7 +28,6 @@ const top_bar_1 = require("../top-bar");
 const bottom_bar_1 = require("../bottom-bar");
 const utils_1 = require("./utils");
 const shadows_1 = require("../styling/shadows");
-const portal_1 = require("../portal");
 const lodash_1 = require("lodash");
 const slots_1 = require("./slots");
 const layer_1 = require("../helpers/layer");
@@ -53,19 +41,7 @@ const cx = bind_1.default.bind(modal_module_scss_1.default);
  * @param props Свойства.
  * @return Элемент.
  */
-const Modal = (_a) => {
-    var { inPortal } = _a, restProps = __rest(_a, ["inPortal"]);
-    const Wrapper = inPortal ? portal_1.Portal : react_1.Fragment;
-    return (react_1.default.createElement(Wrapper, null,
-        react_1.default.createElement(ModalInner, Object.assign({}, restProps))));
-};
-exports.Modal = Modal;
-/**
- * Внутренний компонент для того чтобы не прокидывать реф через портал.
- * @param props Свойства.
- * @return Элемент.
- */
-const ModalInner = ({ children, height, onClose, scrollDisableOptions = { reserveScrollBarGap: true }, size = 'm', withScrollDisable = false, 'data-testid': testId = 'modal', }) => {
+const Modal = ({ children, height, onClose, scrollDisableOptions = { reserveScrollBarGap: true }, size = 'm', withScrollDisable = false, 'data-testid': testId = 'modal', }) => {
     const layer = (0, layer_1.useLayer)() + 100;
     const rootRef = (0, react_1.useRef)(null);
     const bind = (0, utils_1.useCloseHandler)(onClose);
@@ -102,6 +78,7 @@ const ModalInner = ({ children, height, onClose, scrollDisableOptions = { reserv
             !footer && !fullscreen && react_1.default.createElement("div", { className: cx('footer-stub') }),
             !fullscreen && overlap && react_1.default.createElement("div", { className: cx('overlap') }, overlap))));
 };
+exports.Modal = Modal;
 exports.Modal.Header = slots_1.ModalHeader;
 exports.Modal.Body = slots_1.ModalBody;
 exports.Modal.Footer = slots_1.ModalFooter;

package/modal/utils.d.ts

@@ -1,9 +1,10 @@
+import React from 'react';
 /**
  * Вызывает callback только если клик был начат и закончен по одному и тому же элементу.
  * @param callback Сработает при клике.
  * @return Свойства для целевого элемента.
  */
 export declare const useCloseHandler: (callback?: (() => void) | undefined) => {
-    onMouseUp: ({ target, currentTarget, button }: any) => void;
-    onMouseDown: ({ button, target }: any) => void;
+    onMouseUp: ({ target, currentTarget, button }: React.MouseEvent) => void;
+    onMouseDown: ({ button, target }: React.MouseEvent) => void;
 };

package/modal/utils.js

@@ -2,12 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCloseHandler = void 0;
 const react_1 = require("react");
+const identity_1 = require("../hooks/identity");
 /**
  * Вызывает callback только если клик был начат и закончен по одному и тому же элементу.
  * @param callback Сработает при клике.
  * @return Свойства для целевого элемента.
  */
 const useCloseHandler = (callback) => {
+    const callbackRef = (0, identity_1.useIdentityRef)(callback);
     const mouseDownTarget = (0, react_1.useRef)();
     const onMouseDown = (0, react_1.useCallback)(({ button, target }) => {
         if (button === 0) {
@@ -15,12 +17,13 @@ const useCloseHandler = (callback) => {
         }
     }, []);
     const onMouseUp = (0, react_1.useCallback)(({ target, currentTarget, button }) => {
-        callback &&
+        const fn = callbackRef.current;
+        fn &&
             button === 0 &&
             target === currentTarget &&
             currentTarget === mouseDownTarget.current &&
-            callback();
-    }, [callback]);
+            fn();
+    }, []);
     return { onMouseUp, onMouseDown };
 };
 exports.useCloseHandler = useCloseHandler;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sima-land/ui-nucleons",
-  "version": "41.3.0",
+  "version": "42.2.0",
   "repository": "ssh://git@github.com:sima-land/ui-nucleons.git",
   "author": "www.sima-land.ru team",
   "license": "Apache-2.0",

package/phone-input/index.d.ts

@@ -5,7 +5,7 @@ import { Country } from './presets';
 interface PhoneInputStyle extends React.CSSProperties {
     '--phone-input-width'?: number | string;
 }
-export interface PhoneInputProps extends Omit<TextFieldProps, 'onChange' | 'onBlur' | 'value' | 'ref' | 'style'> {
+export interface PhoneInputProps extends Omit<TextFieldProps, 'onChange' | 'onBlur' | 'value' | 'ref' | 'style' | 'multiline'> {
     /** Сработает при "blur". */
     onBlur?: (e: React.FocusEvent<HTMLInputElement>, s: MaskState & {
         ready?: boolean;

package/phone-input/index.js

@@ -35,7 +35,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PhoneInput = void 0;
 const react_1 = __importStar(require("react"));
-const bind_1 = __importDefault(require("classnames/bind"));
 const down_1 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/Arrows/down"));
 const up_1 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/Arrows/up"));
 const dropdown_1 = require("../dropdown");
@@ -44,10 +43,9 @@ const text_field_1 = require("../text-field");
 const masked_field_1 = require("../masked-field");
 const hooks_1 = require("../hooks");
 const presets_1 = require("./presets");
-const sizes_1 = require("../styling/sizes");
-const colors_1 = require("../colors");
-const phone_input_module_scss_1 = __importDefault(require("./phone-input.module.scss"));
 const utils_1 = require("./utils");
+const bind_1 = __importDefault(require("classnames/bind"));
+const phone_input_module_scss_1 = __importDefault(require("./phone-input.module.scss"));
 const cx = bind_1.default.bind(phone_input_module_scss_1.default);
 /**
  * Удаляет из значения код переданной страны.
@@ -66,23 +64,32 @@ const PhoneInput = (_a) => {
     // маску определяем автоматически только при старте
     const [country, setCountry] = (0, react_1.useState)((0, utils_1.defineCountry)(value));
     const [cleanValue, setCleanValue] = (0, react_1.useState)(formatValue(value, country));
-    const [isPopupOpen, togglePopup] = (0, react_1.useState)(false);
-    const dropdownRef = (0, react_1.useRef)(null);
+    const [withMenu, toggleMenu] = (0, react_1.useState)(false);
+    const rootRef = (0, react_1.useRef)(null);
+    const openerRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         setCleanValue(formatValue(value, country));
     }, [value]);
-    (0, hooks_1.useOutsideClick)(dropdownRef, event => {
-        event.stopPropagation();
-        togglePopup(false);
+    (0, hooks_1.useOutsideClick)(rootRef, () => {
+        toggleMenu(false);
     });
-    const AdornmentSVG = isPopupOpen ? up_1.default : down_1.default;
-    const commonFieldProps = Object.assign(Object.assign({}, restProps), { label, multiline: false, className: cx('field'), endAdornment: (react_1.default.createElement("div", { className: cx('adornment'), "data-testid": 'phone-input:dropdown-opener', onClick: event => {
-                event.stopPropagation();
-                togglePopup(true);
+    const AdornmentSVG = withMenu ? up_1.default : down_1.default;
+    const commonFieldProps = Object.assign(Object.assign({}, restProps), { label, multiline: false, className: cx('field'), endAdornment: (react_1.default.createElement("div", { ref: openerRef, className: cx('adornment'), "data-testid": 'phone-input:dropdown-opener', onClick: () => {
+                toggleMenu(true);
             } },
             react_1.default.createElement("img", { alt: '', width: 24, height: 24, src: country.imageSrc }),
-            react_1.default.createElement(AdornmentSVG, { fill: colors_1.COLORS.get('gray38'), className: (0, sizes_1.marginLeft)(1) }))) });
-    return (react_1.default.createElement("div", { "data-testid": testId, style: style, className: cx('root', className) },
+            react_1.default.createElement(AdornmentSVG, { className: cx('arrow') }))), onClick: event => {
+            const opener = openerRef.current;
+            if (opener instanceof Node &&
+                event.target instanceof Node &&
+                (opener === event.target || opener.contains(event.target))) {
+                event.preventDefault(); // чтобы не фокусировалось на поле
+            }
+            else {
+                toggleMenu(false);
+            }
+        } });
+    return (react_1.default.createElement("div", { ref: rootRef, "data-testid": testId, style: style, className: cx('root', className) },
         country.id === presets_1.IDS.other ? (react_1.default.createElement(text_field_1.TextField, Object.assign({}, commonFieldProps, { onChange: (e) => {
                 e.target.value = e.target.value.replace(/\D/g, '').slice(0, 20);
                 onChange && onChange(e);
@@ -101,8 +108,8 @@ const PhoneInput = (_a) => {
                         // вставляем код страны обратно в чистое значение
                         cleanValue: `${country.codeChars}${state.cleanValue}` }));
             } }))),
-        isPopupOpen && (react_1.default.createElement(dropdown_1.Dropdown, { ref: dropdownRef, role: 'menu', className: cx('popup'), "data-testid": 'phone-input:dropdown' }, presets_1.countriesList.map((item, index) => item.id === country.id ? null : (react_1.default.createElement(dropdown_item_1.DropdownItem, { key: index, size: 'l', role: 'menuitem', className: cx('popup-item'), onClick: () => {
-                togglePopup(false);
+        withMenu && (react_1.default.createElement(dropdown_1.Dropdown, { role: 'menu', className: cx('menu'), "data-testid": 'phone-input:dropdown' }, presets_1.countriesList.map((item, index) => item.id === country.id ? null : (react_1.default.createElement(dropdown_item_1.DropdownItem, { key: index, size: 'l', role: 'menuitem', className: cx('menu-item'), onClick: () => {
+                toggleMenu(false);
                 setCountry(item);
                 onCountrySelect && onCountrySelect(item);
             } },

package/phone-input/phone-input.module.scss

@@ -17,7 +17,14 @@
   cursor: pointer;
 }
 
-.popup {
+.arrow {
+  display: block;
+  fill: colors.$gray38;
+  margin-left: 4px;
+  pointer-events: none; // игнорируем клики т.к. после них элемент стрелки подменяется и считается что он сработал вне элемента родителя
+}
+
+.menu {
   position: absolute;
   width: 100%;
   top: 56px;
@@ -25,7 +32,7 @@
   z-index: 2;
 }
 
-.popup-item {
+.menu-item {
   font-size: 16px;
   line-height: 24px;
   .item-name {

package/select/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TextFieldProps } from '../text-field';
 declare type Size = 's' | 'm' | 'l' | 'xl';
-export interface SelectProps extends Omit<TextFieldProps, 'style'> {
+export interface SelectProps extends Omit<TextFieldProps, 'style' | 'endAdornment'> {
     /** Нужно ли выводить состояние загрузки списка. */
     loading?: boolean;
     /** Сработает при открытии/закрытии меню. */
@@ -16,11 +16,18 @@ export interface SelectProps extends Omit<TextFieldProps, 'style'> {
     renderOption?: (option: any) => React.ReactNode;
     /** Стили. */
     style?: React.CSSProperties;
+    endAdornment?: TextFieldProps['endAdornment'] | ((opened: boolean) => React.ReactNode);
 }
+/**
+ * Выводит иконку стрелки для поля Select по умолчанию.
+ * @param opened Открыт ли список опций.
+ * @return Элемент.
+ */
+export declare const renderDefaultArrow: (opened: boolean) => JSX.Element;
 /**
  * Поле выбора из списка.
  * @param props Свойства.
  * @return Элемент.
  */
-export declare const Select: ({ options, optionSize, onSelect, style, className, label, onClick, value, loading, onMenuToggle, renderOption, "data-testid": dataTestId, ...restProps }: SelectProps) => JSX.Element;
+export declare const Select: ({ options, optionSize, onSelect, style, className, label, onClick, value, loading, onMenuToggle, renderOption, "data-testid": dataTestId, size, endAdornment, ...restProps }: SelectProps) => JSX.Element;
 export {};

package/select/index.js

@@ -33,7 +33,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Select = void 0;
+exports.Select = exports.renderDefaultArrow = void 0;
 const react_1 = __importStar(require("react"));
 const dropdown_1 = require("../dropdown");
 const dropdown_item_1 = require("../dropdown-item");
@@ -47,25 +47,34 @@ const colors_1 = require("../colors");
 const dropdown_loading_1 = require("../_internal/dropdown-loading");
 const hooks_1 = require("../hooks");
 const cx = bind_1.default.bind(select_module_scss_1.default);
+/**
+ * Выводит иконку стрелки для поля Select по умолчанию.
+ * @param opened Открыт ли список опций.
+ * @return Элемент.
+ */
+const renderDefaultArrow = (opened) => {
+    const ArrowSVG = opened ? up_1.default : down_1.default;
+    return react_1.default.createElement(ArrowSVG, { fill: colors_1.COLORS.get('gray38') });
+};
+exports.renderDefaultArrow = renderDefaultArrow;
 /**
  * Поле выбора из списка.
  * @param props Свойства.
  * @return Элемент.
  */
 const Select = (_a) => {
-    var { options, optionSize, onSelect, style, className, label, onClick, value, loading, onMenuToggle, renderOption = String, 'data-testid': dataTestId } = _a, restProps = __rest(_a, ["options", "optionSize", "onSelect", "style", "className", "label", "onClick", "value", "loading", "onMenuToggle", "renderOption", 'data-testid']);
+    var { options, optionSize, onSelect, style, className, label, onClick, value, loading, onMenuToggle, renderOption = String, 'data-testid': dataTestId, size, endAdornment = exports.renderDefaultArrow } = _a, restProps = __rest(_a, ["options", "optionSize", "onSelect", "style", "className", "label", "onClick", "value", "loading", "onMenuToggle", "renderOption", 'data-testid', "size", "endAdornment"]);
     const rootRef = (0, react_1.useRef)(null);
     const fieldRef = (0, react_1.useRef)(null);
     const menuRef = (0, react_1.useRef)(null);
     const [opened, toggleMenu] = (0, react_1.useState)(false);
-    const ArrowSVG = opened ? up_1.default : down_1.default;
     (0, react_1.useEffect)(() => {
         opened && menuRef.current && menuRef.current.focus();
         onMenuToggle && onMenuToggle(opened);
     }, [opened]);
     (0, hooks_1.useOutsideClick)(rootRef, toggleMenu.bind(null, false));
     return (react_1.default.createElement("div", { ref: rootRef, style: style, className: cx('root', className), "data-testid": dataTestId },
-        react_1.default.createElement(text_field_1.TextField, { blockProps: {
+        react_1.default.createElement(text_field_1.TextField, Object.assign({}, restProps, { size: size, blockProps: {
                 ref: fieldRef,
                 tabIndex: 0,
                 onMouseDown: () => {
@@ -74,16 +83,15 @@ const Select = (_a) => {
                 onKeyDown: e => {
                     e.key === 'Enter' && toggleMenu(true);
                 },
-                onClick: e => {
-                    e.preventDefault();
-                    onClick && onClick(e);
-                },
+            }, onClick: e => {
+                e.preventDefault();
+                onClick && onClick(e);
             }, className: select_module_scss_1.default.field, "data-testid": 'select:field', label: label, focused: opened, baseInputProps: {
                 // чтобы не ловить фокус на поле
                 style: { pointerEvents: 'none' },
                 tabIndex: -1,
-            }, value: value, multiline: false, variant: 'desktop', readOnly: true, endAdornment: react_1.default.createElement(ArrowSVG, { fill: colors_1.COLORS.get('gray38') }) }),
-        opened && (loading || options.length > 0) && (react_1.default.createElement(dropdown_1.Dropdown, Object.assign({}, (0, dropdown_2.placeDropdown)(restProps.size), { ref: menuRef, "data-testid": 'select:menu', role: 'menu', tabIndex: -1, className: cx('menu'), onKeyDown: event => {
+            }, value: value, multiline: false, variant: 'desktop', readOnly: true, endAdornment: typeof endAdornment === 'function' ? endAdornment(opened) : endAdornment })),
+        opened && (loading || options.length > 0) && (react_1.default.createElement(dropdown_1.Dropdown, Object.assign({}, (0, dropdown_2.placeDropdown)(size), { ref: menuRef, "data-testid": 'select:menu', role: 'menu', tabIndex: -1, className: cx('menu'), onKeyDown: event => {
                 if (event.key === 'Enter') {
                     toggleMenu(false);
                     fieldRef.current && fieldRef.current.focus();

package/text-field/index.d.ts

@@ -47,7 +47,7 @@ export interface TextFieldProps extends Omit<React.InputHTMLAttributes<HTMLInput
     /** Вариант отображения. */
     variant?: Variant;
     /** Свойства элемента-блока. */
-    blockProps?: React.HTMLProps<HTMLDivElement>;
+    blockProps?: Omit<React.HTMLProps<HTMLDivElement>, 'onClick'>;
     /** Идентификатор для систем автоматизированного тестирования. */
     'data-testid'?: string;
 }

package/text-field/index.js

@@ -51,7 +51,7 @@ const modifiersToClasses = ({ disabled, failed, focused, variant, }) => cx(disab
  * @param props Свойства.
  * @return Элемент.
  */
-exports.TextField = (0, react_1.forwardRef)(function TextField({ autoFocus, caption, classes = {}, defaultValue, disabled, endAdornment, failed, focused: asFocused, label, onClick, onBlur, onChange, onFocus, onInput, onKeyDown, onKeyUp, placeholder, readOnly, rounds = 'all', size = exports.DEFAULTS.size, startAdornment, value, variant = 'desktop', multiline, baseInputProps = {}, className, restPlaceholder, style, blockProps, 'data-testid': dataTestId, }, ref) {
+exports.TextField = (0, react_1.forwardRef)(function TextField({ autoFocus, caption, classes = {}, defaultValue, disabled, endAdornment, failed, focused: asFocused, label, onClick, onBlur, onChange, onFocus, onInput, onKeyDown, onKeyUp, placeholder, readOnly, rounds = 'all', size = exports.DEFAULTS.size, startAdornment, value, variant = 'desktop', multiline, baseInputProps = {}, className, restPlaceholder, style, blockProps, 'data-testid': dataTestId, type, name, autoComplete, id, }, ref) {
     const [hasValue, toggleHasValue] = (0, react_1.useState)(isVisible(value) || isVisible(defaultValue));
     const [reallyFocused, toggleFocused] = (0, react_1.useState)(autoFocus);
     const focused = reallyFocused || Boolean(asFocused);
@@ -68,9 +68,9 @@ exports.TextField = (0, react_1.forwardRef)(function TextField({ autoFocus, capt
         variant,
     });
     (0, react_1.useImperativeHandle)(ref, () => baseInputRef.current);
-    (0, react_1.useEffect)(() => toggleHasValue(Boolean(baseInputRef.current.value)));
+    (0, react_1.useEffect)(() => { var _a; return toggleHasValue(Boolean((_a = baseInputRef.current) === null || _a === void 0 ? void 0 : _a.value)); });
     return (react_1.default.createElement("div", { "data-testid": dataTestId, className: cx('root', className, classes.root), style: style },
-        react_1.default.createElement("div", Object.assign({ "data-testid": 'text-field:block', className: cx('reset', 'input-block', commonModifyClasses, size && `size-${size}`, focused && classes.blockFocused, multiline && 'multiline', withLabel && 'with-label', variant === 'desktop' && rounds !== 'none' && shapes_1.SmallRounds[rounds], blockProps === null || blockProps === void 0 ? void 0 : blockProps.className), onClick: event => {
+        react_1.default.createElement("div", Object.assign({}, blockProps, { "data-testid": 'text-field:block', className: cx('reset', 'input-block', commonModifyClasses, size && `size-${size}`, focused && classes.blockFocused, multiline && 'multiline', withLabel && 'with-label', variant === 'desktop' && rounds !== 'none' && shapes_1.SmallRounds[rounds], blockProps === null || blockProps === void 0 ? void 0 : blockProps.className), onClick: event => {
                 const input = baseInputRef.current;
                 onClick === null || onClick === void 0 ? void 0 : onClick(event);
                 input &&
@@ -78,12 +78,12 @@ exports.TextField = (0, react_1.forwardRef)(function TextField({ autoFocus, capt
                     !event.defaultPrevented &&
                     input !== document.activeElement &&
                     input.focus();
-            } }, blockProps),
+            } }),
             !multiline && Boolean(startAdornment) && (react_1.default.createElement(box_1.Box, { display: 'flex', alignItems: 'center', marginRight: 4 }, startAdornment)),
             react_1.default.createElement("div", { className: cx('main-column') },
-                withLabel && (react_1.default.createElement("label", { className: cx('label', commonModifyClasses, hasValue && 'filled', labelAsPlaceholder && 'as-placeholder'), children: label, "data-testid": 'text-field:label' })),
+                withLabel && (react_1.default.createElement("label", { className: cx('label', commonModifyClasses, hasValue && 'filled', labelAsPlaceholder && 'as-placeholder'), htmlFor: id, children: label, "data-testid": 'text-field:label' })),
                 react_1.default.createElement("div", { className: cx('input-wrapper') },
-                    react_1.default.createElement(base_input_1.BaseInput, Object.assign({}, baseInputProps, { "data-testid": 'text-field:field', multiline: multiline, ref: baseInputRef, placeholder: withLabel && labelAsPlaceholder ? undefined : placeholder, restPlaceholder: withLabel && labelAsPlaceholder ? undefined : restPlaceholder, autoFocus: autoFocus, className: cx('base-input', commonModifyClasses, classes.baseInput, size && `size-${size}`), defaultValue: defaultValue, value: value, readOnly: readOnly, disabled: disabled, onFocus: (event) => {
+                    react_1.default.createElement(base_input_1.BaseInput, Object.assign({}, baseInputProps, { type: type, id: id, name: name, autoComplete: autoComplete, "data-testid": 'text-field:field', multiline: multiline, ref: baseInputRef, placeholder: withLabel && labelAsPlaceholder ? undefined : placeholder, restPlaceholder: withLabel && labelAsPlaceholder ? undefined : restPlaceholder, autoFocus: autoFocus, className: cx('base-input', commonModifyClasses, classes.baseInput, size && `size-${size}`), defaultValue: defaultValue, value: value, readOnly: readOnly, disabled: disabled, onFocus: (event) => {
                             onFocus && onFocus(event);
                             toggleHasValue(Boolean(event.target.value));
                             toggleFocused(true);
@@ -91,7 +91,13 @@ exports.TextField = (0, react_1.forwardRef)(function TextField({ autoFocus, capt
                             onBlur && onBlur(event);
                             toggleHasValue(Boolean(event.target.value));
                             toggleFocused(false);
-                        }, onInput: onInput, onChange: onChange, onKeyDown: onKeyDown, onKeyUp: onKeyUp })))),
+                        }, onInput: (event) => {
+                            onInput === null || onInput === void 0 ? void 0 : onInput(event);
+                            toggleHasValue(Boolean(event.target.value));
+                        }, onChange: (event) => {
+                            onChange === null || onChange === void 0 ? void 0 : onChange(event);
+                            toggleHasValue(Boolean(event.target.value));
+                        }, onKeyDown: onKeyDown, onKeyUp: onKeyUp })))),
             !multiline && Boolean(endAdornment) && (react_1.default.createElement(box_1.Box, { display: 'flex', alignItems: 'center', marginLeft: 4 }, endAdornment))),
         Boolean(caption) && (react_1.default.createElement("div", { className: cx('caption', (0, sizes_1.marginTop)(isMobile ? 1 : 2), failed && 'failed'), children: caption }))));
 });