@sima-land/ui-nucleons 44.2.10 → 45.0.0-alpha.1

package/alert/index.js

@@ -26,29 +26,46 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Alert = void 0;
+exports.AlertBody = exports.Alert = void 0;
 const react_1 = __importStar(require("react"));
-const nav_bar_1 = require("../nav-bar");
+const page_scroll_lock_1 = require("../_internal/page-scroll-lock");
+const modal_overlay_1 = require("../modal-overlay");
+const card_1 = require("../card");
+const top_bar_1 = require("../top-bar");
+const bottom_bar_1 = require("../bottom-bar");
+const define_slots_1 = require("../helpers/define-slots");
+const utils_1 = require("../modal-overlay/utils");
 const bind_1 = __importDefault(require("classnames/bind"));
 const alert_module_scss_1 = __importDefault(require("./alert.module.scss"));
-const borders_1 = require("../styling/borders");
-const layer_1 = require("../helpers/layer");
-const body_scroll_1 = require("../_internal/body-scroll");
 const cx = bind_1.default.bind(alert_module_scss_1.default);
 /**
  * Компонент модального диалога.
  * @param props Свойства.
  * @return Элемент.
  */
-const Alert = ({ children, className, footer, navBarProps, title, withDivideNavBar, withNavBar = Boolean(title), withScrollDisable = false, scrollDisableOptions, onClose, }) => {
-    const layer = (0, layer_1.useLayer)() + 100;
-    const rootRef = (0, react_1.useRef)(null);
-    (0, body_scroll_1.useBodyScrollLock)(rootRef, withScrollDisable, Object.assign({ allowTouchMove: body_scroll_1.allowTouchMove }, scrollDisableOptions));
-    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)))));
-};
+function Alert({ children, withScrollDisable = false, scrollDisableOptions, onClose, }) {
+    const scrollableRef = (0, react_1.useRef)(null);
+    (0, page_scroll_lock_1.usePageScrollLock)(scrollableRef, Object.assign({ lockEnabled: withScrollDisable }, scrollDisableOptions));
+    const { topBar, body, bottomBar } = (0, define_slots_1.defineSlots)(children, {
+        topBar: top_bar_1.TopBar,
+        body: AlertBody,
+        bottomBar: bottom_bar_1.BottomBar,
+    });
+    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' })))));
+}
 exports.Alert = Alert;
+/**
+ * Основной контент Alert.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function AlertBody({ children }) {
+    return react_1.default.createElement(react_1.default.Fragment, null, children);
+}
+exports.AlertBody = AlertBody;

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

@@ -1,7 +1,9 @@
 @use '../colors';
+@use '../utils';
 @import '../styling/shadows.module';
 
 .arrow-button {
+  @include utils.focus-visible;
   display: inline-flex;
   align-items: center;
   justify-content: center;

package/arrow-button/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-export declare type ArrowButtonSize = 's' | 'l';
-export declare type ArrowDirection = 'up' | 'right' | 'down' | 'left';
+export type ArrowButtonSize = 's' | 'l';
+export type ArrowDirection = 'up' | 'right' | 'down' | 'left';
 export interface ArrowButtonProps extends Omit<JSX.IntrinsicElements['button'], 'size' | 'children'> {
     /** Размер. */
     size?: ArrowButtonSize;

package/autocomplete/autocomplete.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { AutocompleteProps } from './types';
+/**
+ * Поле ввода с подсказками.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function Autocomplete({ children, loading, filterOption, dropdownProps, autoComplete, autoFocus, defaultValue, disabled, id, name, onBlur, onChange, onFocus, onInput, placeholder, readOnly, required, type, value, adornmentEnd, baseInputProps, ...restProps }: AutocompleteProps): JSX.Element;

package/autocomplete/autocomplete.js

@@ -0,0 +1,190 @@
+"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)
+        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.Autocomplete = void 0;
+const react_1 = __importStar(require("react"));
+const dropdown_1 = require("../dropdown");
+const dropdown_item_1 = require("../dropdown-item");
+const utils_1 = require("../dropdown-item/utils");
+const dropdown_loading_1 = require("../_internal/dropdown-loading");
+const react_2 = require("@floating-ui/react");
+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 autocomplete_module_scss_1 = __importDefault(require("./autocomplete.module.scss"));
+/**
+ * Поле ввода с подсказками.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function Autocomplete(_a) {
+    var { 
+    // specific Autocomplete props:
+    children, loading, filterOption = defaultFilterOption, dropdownProps, 
+    // rest props:
+    autoComplete, autoFocus, defaultValue, disabled, id, name, onBlur, onChange, onFocus, onInput, placeholder, readOnly, required, type, value, adornmentEnd = getDefaultAdornmentEnd, baseInputProps } = _a, restProps = __rest(_a, ["children", "loading", "filterOption", "dropdownProps", "autoComplete", "autoFocus", "defaultValue", "disabled", "id", "name", "onBlur", "onChange", "onFocus", "onInput", "placeholder", "readOnly", "required", "type", "value", "adornmentEnd", "baseInputProps"]);
+    const inputRef = (0, react_1.useRef)(null);
+    const [needMenu, setNeedMenu] = (0, react_1.useState)(false);
+    const _b = (0, react_2.useFloating)(Object.assign({ open: needMenu }, (0, utils_2.dropdownFloatingConfig)())), { refs } = _b, floating = __rest(_b, ["refs"]);
+    const floatingStyle = (0, utils_2.useDropdownFloatingStyle)(Object.assign({ refs }, floating));
+    const [activeIndex, setActiveIndex] = (0, react_1.useState)(-1);
+    const [currentValue, setCurrentValue] = (0, react_1.useState)(() => { var _a; return `${(_a = value !== null && value !== void 0 ? value : defaultValue) !== null && _a !== void 0 ? _a : ''}`; });
+    const items = react_1.Children.toArray(children).filter((item) => utils_1.DropdownItemUtils.is(item) && filterOption(item, currentValue));
+    const canShowMenu = !disabled && (currentValue.length > 0 || items.length > 0);
+    const menuShown = needMenu && canShowMenu;
+    const selectItem = (0, react_1.useCallback)((item) => {
+        inputRef.current && (0, events_1.triggerInput)(inputRef.current, utils_1.DropdownItemUtils.getValue(item));
+        setNeedMenu(false);
+        setActiveIndex(-1);
+    }, [inputRef]);
+    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
+        inputRef.current && setCurrentValue(inputRef.current.value);
+    }, [value]);
+    const onKeyDown = baseInputProps === null || baseInputProps === void 0 ? void 0 : baseInputProps.onKeyDown;
+    const handleKeyDown = (0, react_1.useCallback)(event => {
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+        switch (event.code) {
+            case 'Escape': {
+                setNeedMenu(false);
+                break;
+            }
+            case 'Enter': {
+                if (menuShown) {
+                    const item = items[activeIndex];
+                    item && selectItem(item);
+                    setNeedMenu(false);
+                }
+                else {
+                    setNeedMenu(true);
+                }
+                break;
+            }
+            case 'ArrowUp': {
+                if (menuShown) {
+                    event.preventDefault();
+                    setActiveIndex(n => { var _a; return (_a = utils_1.DropdownItemUtils.asLoopedIterator(items, n).prev()) !== null && _a !== void 0 ? _a : -1; });
+                }
+                else {
+                    setNeedMenu(true);
+                }
+                break;
+            }
+            case 'ArrowDown': {
+                if (menuShown) {
+                    event.preventDefault();
+                    setActiveIndex(n => { var _a; return (_a = utils_1.DropdownItemUtils.asLoopedIterator(items, n).next()) !== null && _a !== void 0 ? _a : -1; });
+                }
+                else {
+                    setNeedMenu(true);
+                }
+                break;
+            }
+        }
+    }, [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))))));
+}
+exports.Autocomplete = Autocomplete;
+/**
+ * Фильтр вариантов выбора по умолчанию.
+ * @param item Вариант из меню.
+ * @param inputValue Текущее значение в поле.
+ * @return Нужно ли выводить опцию.
+ */
+function defaultFilterOption(item, inputValue) {
+    return utils_1.DropdownItemUtils.getValue(item).toLowerCase().includes(inputValue.toLowerCase());
+}
+/**
+ * Возвращает стандартную стрелку для поля ввода с подсказками.
+ * @param data Данные о состоянии поля.
+ * @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' });
+}

package/autocomplete/autocomplete.module.scss

@@ -1,20 +1,7 @@
 @use '../colors';
 
-.root {
-  position: relative;
-  width: var(--width, 320px);
-}
-
 .arrow {
+  display: block;
+  flex-shrink: 0;
   fill: colors.$basic-gray38;
 }
-
-.field {
-  width: 100%;
-}
-
-.menu {
-  position: absolute;
-  width: 100%;
-  z-index: 2;
-}

package/autocomplete/index.d.ts

@@ -1,27 +1,2 @@
-import React from 'react';
-import { DropdownItemProps } from '../dropdown-item';
-import { TextFieldProps } from '../text-field';
-export interface AutocompleteProps extends Omit<TextFieldProps, 'ref' | 'value' | 'defaultValue'> {
-    /** Значение по умолчанию. */
-    defaultValue?: string;
-    /** Элементы меню. */
-    items?: any[];
-    /** Размер элемента меню. */
-    itemSize?: DropdownItemProps['size'];
-    /** Нужно ли выводить состояние загрузки списка. */
-    loading?: boolean;
-    /** Сработает при выборе. */
-    onSelect?: (item: any) => void;
-    /** Пресет (со стрелкой или без). */
-    preset?: 'default' | 'filled-only-list';
-    /** Выведет содержимое элемента. */
-    renderItem?: (item: any) => React.ReactNode;
-    /** Значение. */
-    value?: string;
-}
-/**
- * Поле ввода с подсказками.
- * @param props Свойства.
- * @return Элемент.
- */
-export declare const Autocomplete: ({ items, itemSize, onSelect, onChange, onKeyDown, style, className, value, defaultValue, loading, renderItem, preset, "data-testid": dataTestId, ...restProps }: AutocompleteProps) => JSX.Element;
+export type { AutocompleteProps } from './types';
+export { Autocomplete } from './autocomplete';

package/autocomplete/index.js

@@ -1,129 +1,5 @@
 "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)
-        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.Autocomplete = void 0;
-const react_1 = __importStar(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 dropdown_loading_1 = require("../_internal/dropdown-loading");
-const bind_1 = __importDefault(require("classnames/bind"));
-const autocomplete_module_scss_1 = __importDefault(require("./autocomplete.module.scss"));
-const cx = bind_1.default.bind(autocomplete_module_scss_1.default);
-/**
- * Поле ввода с подсказками.
- * @param props Свойства.
- * @return Элемент.
- */
-const Autocomplete = (_a) => {
-    var { items, itemSize, onSelect, onChange, onKeyDown, style, className, value, defaultValue, loading, renderItem = String, preset = 'default', 'data-testid': dataTestId } = _a, restProps = __rest(_a, ["items", "itemSize", "onSelect", "onChange", "onKeyDown", "style", "className", "value", "defaultValue", "loading", "renderItem", "preset", 'data-testid']);
-    const osComponentRef = (0, react_1.useRef)(null);
-    const fieldRef = (0, react_1.useRef)(null);
-    const menuRef = (0, react_1.useRef)(null);
-    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 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 endAdornment = preset === 'default' ? arrowIcon : undefined;
-    (0, react_1.useEffect)(() => {
-        setRealValue(value);
-    }, [value]);
-    (0, react_1.useEffect)(() => {
-        setActiveIndex(null);
-    }, [items]);
-    (0, react_1.useEffect)(() => {
-        var _a;
-        const menu = menuRef.current;
-        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 instanceof HTMLElement &&
-                osInstance.scroll({
-                    el: child,
-                    scroll: { y: 'ifneeded' },
-                });
-        }
-    }, [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]);
-                            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"))))))));
-};
-exports.Autocomplete = Autocomplete;
+var autocomplete_1 = require("./autocomplete");
+Object.defineProperty(exports, "Autocomplete", { enumerable: true, get: function () { return autocomplete_1.Autocomplete; } });

package/autocomplete/types.d.ts

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+import type { DropdownProps } from '../dropdown';
+import type { DropdownItemElement } from '../dropdown-item/types';
+import type { FieldBlockProps } from '../field-block';
+import type { InputProps } from '../input';
+export interface AutocompleteProps extends InputProps {
+    /** Содержимое. */
+    children?: ReactNode;
+    /** Выводить вместо списка спиннер. */
+    loading?: boolean;
+    /** Получив опцию должен определить, нужно ли выводить ее в списке. */
+    filterOption?: (option: DropdownItemElement, inputValue: string) => boolean;
+    /** Украшение после основного содержимого. */
+    adornmentEnd?: FieldBlockProps['adornmentEnd'] | ((data: {
+        menuShown: boolean;
+    }) => ReactNode);
+    /** Свойства выпадающего списка. */
+    dropdownProps?: Pick<DropdownProps, 'className' | 'style'>;
+}

package/autocomplete/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/autocomplete-deprecated/autocomplete.module.scss

@@ -0,0 +1,20 @@
+@use '../colors';
+
+.root {
+  position: relative;
+  width: var(--width, 320px);
+}
+
+.arrow {
+  fill: colors.$basic-gray38;
+}
+
+.field {
+  width: 100%;
+}
+
+.menu {
+  position: absolute;
+  width: 100%;
+  z-index: 2;
+}

package/autocomplete-deprecated/index.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { DropdownItemProps } from '../dropdown-item';
+import { TextFieldProps } from '../text-field';
+export interface AutocompleteProps extends Omit<TextFieldProps, 'ref' | 'value' | 'defaultValue'> {
+    /** Значение по умолчанию. */
+    defaultValue?: string;
+    /** Элементы меню. */
+    items?: any[];
+    /** Размер элемента меню. */
+    itemSize?: DropdownItemProps['size'];
+    /** Нужно ли выводить состояние загрузки списка. */
+    loading?: boolean;
+    /** Сработает при выборе. */
+    onSelect?: (item: any) => void;
+    /** Пресет (со стрелкой или без). */
+    preset?: 'default' | 'filled-only-list';
+    /** Выведет содержимое элемента. */
+    renderItem?: (item: any) => React.ReactNode;
+    /** Значение. */
+    value?: string;
+}
+/**
+ * Поле ввода с подсказками.
+ * @deprecated Нужно использовать новую реализацию "@sima-land/ui-nucleons/autocomplete".
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare const Autocomplete: ({ items, itemSize, onSelect, onChange, onKeyDown, style, className, value, defaultValue, loading, renderItem, preset, "data-testid": dataTestId, ...restProps }: AutocompleteProps) => JSX.Element;