@sima-land/ui-nucleons 45.0.0-alpha.3 → 45.0.0-alpha.5

package/_internal/custom-scrollbar/index.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, ReactNode, Ref } from 'react';
+import { CSSProperties, ReactNode, Ref, UIEvent as ReactUIEvent } from 'react';
 import { OverlayScrollbarsComponent, OverlayScrollbarsComponentProps } from 'overlayscrollbars-react';
 import 'overlayscrollbars/css/OverlayScrollbars.css';
 type Options = NonNullable<OverlayScrollbarsComponentProps['options']>;
@@ -32,7 +32,7 @@ export declare function CustomScrollbar({ osComponentRef, style, className, chil
  * @param threshold Запас.
  * @return Обработчик.
  */
-export declare function HandleFullScroll(callback: () => void, threshold?: number): (event: UIEvent | undefined) => void;
+export declare function useFullScroll(callback: VoidFunction | undefined, threshold?: number): (event: UIEvent | ReactUIEvent | undefined) => void;
 /**
  * Получив OverlayScrollbarsComponent вернет элемент-viewport или null.
  * @param component Экземпляр OverlayScrollbarsComponent.

package/_internal/custom-scrollbar/index.js

@@ -3,11 +3,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getViewport = exports.HandleFullScroll = exports.CustomScrollbar = void 0;
-const react_1 = __importDefault(require("react"));
+exports.getViewport = exports.useFullScroll = exports.CustomScrollbar = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const overlayscrollbars_react_1 = require("overlayscrollbars-react");
 const bind_1 = __importDefault(require("classnames/bind"));
 const custom_scrollbar_module_scss_1 = __importDefault(require("./custom-scrollbar.module.scss"));
+const identity_1 = require("../../hooks/identity");
 require("overlayscrollbars/css/OverlayScrollbars.css");
 const cx = bind_1.default.bind(custom_scrollbar_module_scss_1.default);
 /**
@@ -16,14 +18,11 @@ const cx = bind_1.default.bind(custom_scrollbar_module_scss_1.default);
  * @return Элемент.
  */
 function CustomScrollbar({ osComponentRef, style, className, children, overflow, inFlexBox = false, onFullScroll, fullScrollThreshold, }) {
-    return (react_1.default.createElement(overlayscrollbars_react_1.OverlayScrollbarsComponent, { ref: osComponentRef, style: style, className: cx('custom-scrollbar', className, { 'os-host-flexbox': inFlexBox }), options: {
+    const onScrollStop = useFullScroll(onFullScroll, fullScrollThreshold);
+    return ((0, jsx_runtime_1.jsx)(overlayscrollbars_react_1.OverlayScrollbarsComponent, Object.assign({ ref: osComponentRef, style: style, className: cx('custom-scrollbar', className, { 'os-host-flexbox': inFlexBox }), options: {
             overflowBehavior: overflow,
-            callbacks: onFullScroll
-                ? {
-                    onScrollStop: HandleFullScroll(onFullScroll, fullScrollThreshold),
-                }
-                : undefined,
-        } }, children));
+            callbacks: { onScrollStop },
+        } }, { children: children })));
 }
 exports.CustomScrollbar = CustomScrollbar;
 /**
@@ -32,15 +31,19 @@ exports.CustomScrollbar = CustomScrollbar;
  * @param threshold Запас.
  * @return Обработчик.
  */
-function HandleFullScroll(callback, threshold = 16) {
-    return (event) => {
+function useFullScroll(callback, threshold = 16) {
+    const callbackRef = (0, identity_1.useIdentityRef)(callback);
+    // ВАЖНО: overlayscrollbars не реагирует на замену callback'а onScrollStop на undefined поэтому проверяем сами
+    const handleScrollStop = (0, react_1.useMemo)(() => (event) => {
+        var _a;
         const el = event === null || event === void 0 ? void 0 : event.target;
         el instanceof Element &&
             el.scrollTop >= el.scrollHeight - el.clientHeight - threshold &&
-            callback();
-    };
+            ((_a = callbackRef.current) === null || _a === void 0 ? void 0 : _a.call(callbackRef));
+    }, []);
+    return handleScrollStop;
 }
-exports.HandleFullScroll = HandleFullScroll;
+exports.useFullScroll = useFullScroll;
 /**
  * Получив OverlayScrollbarsComponent вернет элемент-viewport или null.
  * @param component Экземпляр OverlayScrollbarsComponent.

package/_internal/dropdown-loading/index.js

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DropdownLoading = void 0;
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const spinner_1 = require("../../spinner");
 const index_module_scss_1 = __importDefault(require("./index.module.scss"));
 /**
@@ -13,7 +13,6 @@ const index_module_scss_1 = __importDefault(require("./index.module.scss"));
  * @return Элемент.
  */
 function DropdownLoading(props) {
-    return (react_1.default.createElement("div", Object.assign({}, props, { className: index_module_scss_1.default.root }),
-        react_1.default.createElement(spinner_1.SpinnerSVG, { size: 's' })));
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, props, { className: index_module_scss_1.default.root }, { children: (0, jsx_runtime_1.jsx)(spinner_1.SpinnerSVG, { size: 's' }) })));
 }
 exports.DropdownLoading = DropdownLoading;

package/_internal/page-scroll-lock/context.js

@@ -1,30 +1,8 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.usePageScrollContext = exports.PageScrollProvider = void 0;
-const react_1 = __importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const body_scroll_lock_1 = require("./adapters/body-scroll-lock");
 const PageScrollContext = (0, react_1.createContext)(null);
 const DEFAULTS = {
@@ -40,7 +18,7 @@ function PageScrollProvider({ children, adapter }) {
     if (contextValue !== null) {
         throw Error('PageScrollContext: only one provider allowed in jsx tree');
     }
-    return react_1.default.createElement(PageScrollContext.Provider, { value: { adapter } }, children);
+    return (0, jsx_runtime_1.jsx)(PageScrollContext.Provider, Object.assign({ value: { adapter } }, { children: children }));
 }
 exports.PageScrollProvider = PageScrollProvider;
 /**

package/alert/index.d.ts

@@ -1,9 +1,9 @@
-import React from 'react';
+import { ReactNode } from 'react';
 import { WithPageScrollLock } from '../_internal/page-scroll-lock';
 import { CardContentProps } from '../card/slots';
 export interface AlertProps extends WithPageScrollLock {
     /** Основное содержимое. */
-    children?: React.ReactNode;
+    children?: ReactNode;
     /** Будет вызвана при закрытии окна нажатием на затемнение. */
     onClose?: VoidFunction;
 }

package/alert/index.js

@@ -1,33 +1,11 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AlertBody = exports.Alert = void 0;
-const react_1 = __importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const page_scroll_lock_1 = require("../_internal/page-scroll-lock");
 const modal_overlay_1 = require("../modal-overlay");
 const card_1 = require("../card");
@@ -53,11 +31,7 @@ function Alert({ children, withScrollDisable = false, scrollDisableOptions, onCl
     });
     const overlayClickBind = (0, utils_1.useExactClick)(onClose);
     (0, react_1.useImperativeHandle)(body === null || body === void 0 ? void 0 : body.props.scrollableRef, () => scrollableRef.current);
-    return (react_1.default.createElement(modal_overlay_1.ModalOverlay, Object.assign({ className: alert_module_scss_1.default.overlay }, overlayClickBind),
-        react_1.default.createElement(card_1.Card, { shadow: 'z4', rounds: 'm', className: cx('alert'), "data-testid": 'alert' },
-            topBar && react_1.default.createElement(top_bar_1.TopBar, Object.assign({}, topBar.props, { size: 's' })),
-            body && (react_1.default.createElement(card_1.CardContent, Object.assign({}, body.props, { scrollableRef: scrollableRef }), body)),
-            bottomBar && react_1.default.createElement(bottom_bar_1.BottomBar, Object.assign({}, bottomBar.props, { size: 's' })))));
+    return ((0, jsx_runtime_1.jsx)(modal_overlay_1.ModalOverlay, Object.assign({ className: alert_module_scss_1.default.overlay }, overlayClickBind, { children: (0, jsx_runtime_1.jsxs)(card_1.Card, Object.assign({ shadow: 'z4', rounds: 'm', className: cx('alert'), "data-testid": 'alert' }, { children: [topBar && (0, jsx_runtime_1.jsx)(top_bar_1.TopBar, Object.assign({ size: 's' }, topBar.props)), body && ((0, jsx_runtime_1.jsx)(card_1.CardContent, Object.assign({}, body.props, { scrollableRef: scrollableRef }, { children: body }))), bottomBar && (0, jsx_runtime_1.jsx)(bottom_bar_1.BottomBar, Object.assign({ size: 's' }, bottomBar.props))] })) })));
 }
 exports.Alert = Alert;
 /**
@@ -66,6 +40,6 @@ exports.Alert = Alert;
  * @return Элемент.
  */
 function AlertBody({ children }) {
-    return react_1.default.createElement(react_1.default.Fragment, null, children);
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
 }
 exports.AlertBody = AlertBody;

package/arrow-button/arrow-button.module.scss

@@ -1,6 +1,6 @@
 @use '../colors';
 @use '../utils';
-@import '../styling/shadows.module';
+@use '../shadows';
 
 .arrow-button {
   @include utils.focus-visible;
@@ -25,17 +25,17 @@
   &.size-s {
     width: 32px;
     height: 32px;
-    @extend .shadow-z2;
+    @include shadows.box-shadow('z2');
     &:not(:disabled):hover {
-      @extend .shadow-z3;
+      @include shadows.box-shadow('z3');
     }
   }
   &.size-l {
     width: 56px;
     height: 56px;
-    @extend .shadow-z3;
+    @include shadows.box-shadow('z3');
     &:not(:disabled):hover {
-      @extend .shadow-z4;
+      @include shadows.box-shadow('z4');
     }
   }
 }

package/arrow-button/index.js

@@ -15,30 +15,30 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ArrowButton = void 0;
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const bind_1 = __importDefault(require("classnames/bind"));
 const arrow_button_module_scss_1 = __importDefault(require("./arrow-button.module.scss"));
-const arrow_up_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/arrow-up"));
-const arrow_right_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/arrow-right"));
-const arrow_down_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/arrow-down"));
-const arrow_left_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/arrow-left"));
-const arrow_up_2 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/arrow-up"));
-const arrow_right_2 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/arrow-right"));
-const arrow_down_2 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/arrow-down"));
-const arrow_left_2 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/arrow-left"));
+const ArrowUp_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/ArrowUp"));
+const ArrowRight_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/ArrowRight"));
+const ArrowDown_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/ArrowDown"));
+const ArrowLeft_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/ArrowLeft"));
+const ArrowUp_2 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/ArrowUp"));
+const ArrowRight_2 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/ArrowRight"));
+const ArrowDown_2 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/ArrowDown"));
+const ArrowLeft_2 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/ArrowLeft"));
 const cx = bind_1.default.bind(arrow_button_module_scss_1.default);
 const ICONS = {
     s: {
-        up: arrow_up_2.default,
-        right: arrow_right_2.default,
-        down: arrow_down_2.default,
-        left: arrow_left_2.default,
+        up: ArrowUp_2.default,
+        right: ArrowRight_2.default,
+        down: ArrowDown_2.default,
+        left: ArrowLeft_2.default,
     },
     l: {
-        up: arrow_up_1.default,
-        right: arrow_right_1.default,
-        down: arrow_down_1.default,
-        left: arrow_left_1.default,
+        up: ArrowUp_1.default,
+        right: ArrowRight_1.default,
+        down: ArrowDown_1.default,
+        left: ArrowLeft_1.default,
     },
 };
 /**
@@ -49,7 +49,6 @@ const ICONS = {
 const ArrowButton = (_a) => {
     var { size = 'l', direction = 'right', className, 'data-testid': testId = 'arrow-button' } = _a, buttonProps = __rest(_a, ["size", "direction", "className", 'data-testid']);
     const Icon = ICONS[size][direction];
-    return (react_1.default.createElement("button", Object.assign({ type: 'button' }, buttonProps, { className: cx('arrow-button', `size-${size}`, className), "data-testid": testId }),
-        react_1.default.createElement(Icon, { "aria-hidden": true, fill: 'currentColor' })));
+    return ((0, jsx_runtime_1.jsx)("button", Object.assign({ type: 'button' }, buttonProps, { className: cx('arrow-button', `size-${size}`, className), "data-testid": testId }, { children: (0, jsx_runtime_1.jsx)(Icon, { "aria-hidden": true, fill: 'currentColor' }) })));
 };
 exports.ArrowButton = ArrowButton;

package/autocomplete/autocomplete.js

@@ -1,27 +1,4 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __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)
@@ -38,7 +15,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Autocomplete = void 0;
-const react_1 = __importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const dropdown_1 = require("../dropdown");
 const dropdown_item_1 = require("../dropdown-item");
 const utils_1 = require("../dropdown-item/utils");
@@ -48,8 +26,8 @@ const input_1 = require("../input");
 const hooks_1 = require("../hooks");
 const utils_2 = require("../dropdown/utils");
 const events_1 = require("../helpers/events");
-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 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 autocomplete_module_scss_1 = __importDefault(require("./autocomplete.module.scss"));
 /**
  * Поле ввода с подсказками.
@@ -120,54 +98,49 @@ function Autocomplete(_a) {
             }
         }
     }, [menuShown, activeIndex, items, selectItem, onKeyDown]);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(input_1.Input, Object.assign({}, restProps, {
-            autoComplete,
-            autoFocus,
-            defaultValue,
-            disabled,
-            id,
-            name,
-            onInput,
-            placeholder,
-            readOnly,
-            required,
-            type,
-            value,
-        }, { inputRef: inputRef, blockRef: refs.setReference, onFocus: e => {
-                onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
-                setNeedMenu(true);
-            }, onBlur: e => {
-                onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
-                setNeedMenu(false);
-                setActiveIndex(-1);
-            }, onChange: e => {
-                onChange === null || onChange === void 0 ? void 0 : onChange(e);
-                setNeedMenu(true);
-                setActiveIndex(-1);
-                setCurrentValue(e.target.value);
-            }, 
-            // @todo выяснить надо ли переключать меню при клике и раскомментировать/убрать
-            // blockProps={{
-            //   onMouseDown: () => {
-            //     !disabled && setNeedMenu(a => !a);
-            //   },
-            // }}
-            baseInputProps: Object.assign(Object.assign({}, baseInputProps), { onKeyDown: handleKeyDown }), adornmentEnd: typeof adornmentEnd === 'function' ? adornmentEnd({ menuShown }) : adornmentEnd })),
-        react_1.default.createElement(react_2.FloatingPortal, { id: '' }, menuShown && (react_1.default.createElement(dropdown_1.Dropdown, Object.assign({ ref: refs.setFloating }, dropdownProps, { style: Object.assign(Object.assign({}, dropdownProps === null || dropdownProps === void 0 ? void 0 : dropdownProps.style), floatingStyle) }),
-            !loading &&
-                items.length > 0 &&
-                items.map((item, index) => (react_1.default.createElement(dropdown_item_1.DropdownItem, Object.assign({ key: index, checked: index === activeIndex }, item.props, { onMouseDown: e => {
-                        var _a, _b;
-                        e.preventDefault();
-                        (_b = (_a = item.props).onMouseDown) === null || _b === void 0 ? void 0 : _b.call(_a, e);
-                    }, onClick: e => {
-                        var _a, _b;
-                        (_b = (_a = item.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
-                        !e.defaultPrevented && selectItem(item);
-                    } })))),
-            !loading && items.length === 0 && (react_1.default.createElement(dropdown_item_1.DropdownItem, { size: 's', noHover: true }, "\u041D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E")),
-            loading && react_1.default.createElement(dropdown_loading_1.DropdownLoading, null))))));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(input_1.Input, Object.assign({}, restProps, {
+                autoComplete,
+                autoFocus,
+                defaultValue,
+                disabled,
+                id,
+                name,
+                onInput,
+                placeholder,
+                readOnly,
+                required,
+                type,
+                value,
+            }, { inputRef: inputRef, blockRef: refs.setReference, onFocus: e => {
+                    onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
+                    setNeedMenu(true);
+                }, onBlur: e => {
+                    onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+                    setNeedMenu(false);
+                    setActiveIndex(-1);
+                }, onChange: e => {
+                    onChange === null || onChange === void 0 ? void 0 : onChange(e);
+                    setNeedMenu(true);
+                    setActiveIndex(-1);
+                    setCurrentValue(e.target.value);
+                }, 
+                // @todo выяснить надо ли переключать меню при клике и раскомментировать/убрать
+                // blockProps={{
+                //   onMouseDown: () => {
+                //     !disabled && setNeedMenu(a => !a);
+                //   },
+                // }}
+                baseInputProps: Object.assign(Object.assign({}, baseInputProps), { onKeyDown: handleKeyDown }), adornmentEnd: typeof adornmentEnd === 'function' ? adornmentEnd({ menuShown }) : adornmentEnd })), (0, jsx_runtime_1.jsx)(react_2.FloatingPortal, Object.assign({ id: '' }, { children: menuShown && ((0, jsx_runtime_1.jsxs)(dropdown_1.Dropdown, Object.assign({ ref: refs.setFloating }, dropdownProps, { style: Object.assign(Object.assign({}, dropdownProps === null || dropdownProps === void 0 ? void 0 : dropdownProps.style), floatingStyle) }, { children: [!loading &&
+                            items.length > 0 &&
+                            items.map((item, index) => ((0, jsx_runtime_1.jsx)(dropdown_item_1.DropdownItem, Object.assign({ checked: index === activeIndex }, item.props, { onMouseDown: e => {
+                                    var _a, _b;
+                                    e.preventDefault();
+                                    (_b = (_a = item.props).onMouseDown) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+                                }, onClick: e => {
+                                    var _a, _b;
+                                    (_b = (_a = item.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+                                    !e.defaultPrevented && selectItem(item);
+                                } }), index))), !loading && items.length === 0 && ((0, jsx_runtime_1.jsx)(dropdown_item_1.DropdownItem, Object.assign({ size: 's', noHover: true }, { children: "\u041D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E" }))), loading && (0, jsx_runtime_1.jsx)(dropdown_loading_1.DropdownLoading, {})] }))) }))] }));
 }
 exports.Autocomplete = Autocomplete;
 /**
@@ -185,6 +158,6 @@ function defaultFilterOption(item, inputValue) {
  * @return Элемент.
  */
 function getDefaultAdornmentEnd(data) {
-    const ArrowSVG = data.menuShown ? up_1.default : down_1.default;
-    return react_1.default.createElement(ArrowSVG, { className: autocomplete_module_scss_1.default.arrow, "data-testid": 'autocomplete:arrow-up' });
+    const ArrowSVG = data.menuShown ? Up_1.default : Down_1.default;
+    return (0, jsx_runtime_1.jsx)(ArrowSVG, { className: autocomplete_module_scss_1.default.arrow, "data-testid": 'autocomplete:arrow-up' });
 }

package/autocomplete-deprecated/index.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 import { DropdownItemProps } from '../dropdown-item';
 import { TextFieldProps } from '../text-field';
 export interface AutocompleteProps extends Omit<TextFieldProps, 'ref' | 'value' | 'defaultValue'> {

package/autocomplete-deprecated/index.js

@@ -1,27 +1,4 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __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)
@@ -38,13 +15,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Autocomplete = void 0;
-const react_1 = __importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const dropdown_1 = require("../dropdown");
 const dropdown_item_1 = require("../dropdown-item");
 const text_field_1 = require("../text-field");
 const dropdown_2 = require("../_internal/utils/dropdown");
-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 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_loading_1 = require("../_internal/dropdown-loading");
 const bind_1 = __importDefault(require("classnames/bind"));
 const autocomplete_module_scss_1 = __importDefault(require("./autocomplete.module.scss"));
@@ -64,7 +42,7 @@ const Autocomplete = (_a) => {
     const [realValue, setRealValue] = (0, react_1.useState)(value || defaultValue);
     const [activeIndex, setActiveIndex] = (0, react_1.useState)(null);
     const needMenu = preset === 'filled-only-list' ? withMenu && realValue && realValue.length > 0 : withMenu;
-    const arrowIcon = needMenu ? (react_1.default.createElement(up_1.default, { className: cx('arrow'), "data-testid": 'autocomplete:arrow-up' })) : (react_1.default.createElement(down_1.default, { className: cx('arrow'), "data-testid": 'autocomplete:arrow-down' }));
+    const arrowIcon = needMenu ? ((0, jsx_runtime_1.jsx)(Up_1.default, { className: cx('arrow'), "data-testid": 'autocomplete:arrow-up' })) : ((0, jsx_runtime_1.jsx)(Down_1.default, { className: cx('arrow'), "data-testid": 'autocomplete:arrow-down' }));
     const endAdornment = preset === 'default' ? arrowIcon : undefined;
     (0, react_1.useEffect)(() => {
         setRealValue(value);
@@ -85,46 +63,44 @@ const Autocomplete = (_a) => {
                 });
         }
     }, [activeIndex]);
-    return (react_1.default.createElement("div", { style: style, className: cx('root', className), "data-testid": dataTestId },
-        react_1.default.createElement(text_field_1.TextField, Object.assign({}, restProps, { ref: fieldRef, focused: withMenu, endAdornment: endAdornment, "data-testid": 'autocomplete:field', variant: 'desktop', value: realValue, multiline: false, className: cx('field'), onFocus: () => {
-                toggleMenu(true);
-                setActiveIndex(null);
-            }, onBlur: () => {
-                toggleMenu(false);
-            }, onChange: (event) => {
-                setRealValue(event.target.value);
-                setActiveIndex(0);
-                onChange === null || onChange === void 0 ? void 0 : onChange(event);
-            }, onKeyDown: (event) => {
-                const size = (items === null || items === void 0 ? void 0 : items.length) || 0;
-                let nextIndex;
-                switch (event.key) {
-                    case 'ArrowDown':
-                        nextIndex = (activeIndex !== null ? size + activeIndex + 1 : 0) % size;
-                        break;
-                    case 'ArrowUp':
-                        nextIndex = (size + Number(activeIndex) - 1) % size;
-                        break;
-                    case 'Enter':
-                        if (items && activeIndex !== null && items.length > activeIndex) {
-                            onSelect && onSelect(items[activeIndex]);
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ style: style, className: cx('root', className), "data-testid": dataTestId }, { children: [(0, jsx_runtime_1.jsx)(text_field_1.TextField, Object.assign({}, restProps, { ref: fieldRef, focused: withMenu, endAdornment: endAdornment, "data-testid": 'autocomplete:field', variant: 'desktop', value: realValue, multiline: false, className: cx('field'), onFocus: () => {
+                    toggleMenu(true);
+                    setActiveIndex(null);
+                }, onBlur: () => {
+                    toggleMenu(false);
+                }, onChange: (event) => {
+                    setRealValue(event.target.value);
+                    setActiveIndex(0);
+                    onChange === null || onChange === void 0 ? void 0 : onChange(event);
+                }, onKeyDown: (event) => {
+                    const size = (items === null || items === void 0 ? void 0 : items.length) || 0;
+                    let nextIndex;
+                    switch (event.key) {
+                        case 'ArrowDown':
+                            nextIndex = (activeIndex !== null ? size + activeIndex + 1 : 0) % size;
+                            break;
+                        case 'ArrowUp':
+                            nextIndex = (size + Number(activeIndex) - 1) % size;
+                            break;
+                        case 'Enter':
+                            if (items && activeIndex !== null && items.length > activeIndex) {
+                                onSelect && onSelect(items[activeIndex]);
+                                toggleMenu(false);
+                            }
+                            break;
+                    }
+                    if (typeof nextIndex === 'number') {
+                        event.preventDefault(); // не даём каретке в поле перемещаться
+                        setActiveIndex(nextIndex);
+                    }
+                    onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+                } })), needMenu && ((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, Object.assign({}, (0, dropdown_2.placeDropdown)(restProps.size), { ref: menuRef, "data-testid": 'autocomplete:menu', className: cx('menu'), role: 'menu', customScrollbarProps: { osComponentRef } }, { children: loading ? ((0, jsx_runtime_1.jsx)(dropdown_loading_1.DropdownLoading, { "data-testid": 'autocomplete:loading-area' })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: items && items.length > 0 ? (items.map((item, index) => ((0, jsx_runtime_1.jsx)(dropdown_item_1.DropdownItem, Object.assign({ size: itemSize, role: 'menuitem', checked: index === activeIndex, onMouseDown: event => {
+                            // чтобы при нажатии на опцию предотвратить blur на поле
+                            event.preventDefault();
+                        }, onClick: () => {
+                            onSelect === null || onSelect === void 0 ? void 0 : onSelect(item);
+                            setActiveIndex(null);
                             toggleMenu(false);
-                        }
-                        break;
-                }
-                if (typeof nextIndex === 'number') {
-                    event.preventDefault(); // не даём каретке в поле перемещаться
-                    setActiveIndex(nextIndex);
-                }
-                onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
-            } })),
-        needMenu && (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, onMouseDown: event => {
-                // чтобы при нажатии на опцию предотвратить blur на поле
-                event.preventDefault();
-            }, onClick: () => {
-                onSelect === null || onSelect === void 0 ? void 0 : onSelect(item);
-                setActiveIndex(null);
-                toggleMenu(false);
-            } }, renderItem(item))))) : (react_1.default.createElement(dropdown_item_1.DropdownItem, { size: 'm', noHover: true }, "\u041D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E"))))))));
+                        } }, { children: renderItem(item) }), index)))) : ((0, jsx_runtime_1.jsx)(dropdown_item_1.DropdownItem, Object.assign({ size: 'm', noHover: true }, { children: "\u041D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E" }))) })) })))] })));
 };
 exports.Autocomplete = Autocomplete;

package/avatar/avatar.module.scss

@@ -1,3 +1,5 @@
+@use 'sass:map';
+
 $sizes: 40, 48, 56, 64, 72, 80, 104;
 
 $textSizes: (
@@ -41,7 +43,7 @@ $textSizes: (
     width: #{$size}px;
     height: #{$size}px;
     .monogram {
-      font-size: #{map-get($textSizes, $size)}px;
+      font-size: #{map.get($textSizes, $size)}px;
     }
   }
 }

package/avatar/index.d.ts

@@ -27,4 +27,4 @@ export interface AvatarProps {
  * @param props Свойства компонента.
  * @return Элемент.
  */
-export declare const Avatar: ({ size: sizeProp, imageUrl, bgColor, bgOpacity, textColor, title, monogram, className, style, "data-testid": testId, }: AvatarProps) => JSX.Element;
+export declare function Avatar({ size: sizeProp, imageUrl, bgColor, bgOpacity, textColor, title, monogram, className, style, 'data-testid': testId, }: AvatarProps): JSX.Element;