@ozen-ui/kit 0.56.0 → 0.58.0

package/__inner__/esm/components/Autocomplete/Autocomplete.js

@@ -1,6 +1,7 @@
 import { __assign, __read, __rest, __spreadArray } from "tslib";
 import './Autocomplete.css';
 import React, { forwardRef, useEffect, useRef, useState } from 'react';
+import { deprecate } from '@ozen-ui/logger';
 import { useControlled } from '../../hooks/useControlled';
 import { useMultiRef } from '../../hooks/useMultiRef';
 import { useMutableRef } from '../../hooks/useMutableRef';
@@ -19,6 +20,9 @@ function AutocompleteRender(inProps, ref) {
         name: 'Autocomplete',
     });
     var _a = withDefaultGetters(props), _b = _a.disabled, disabled = _b === void 0 ? AUTOCOMPLETE_DEFAULT_DISABLED : _b, _c = _a.required, required = _c === void 0 ? AUTOCOMPLETE_DEFAULT_REQUIRED : _c, _d = _a.autoFocus, autoFocus = _d === void 0 ? AUTOCOMPLETE_DEFAULT_AUTOFOCUS : _d, _e = _a.fullWidth, fullWidth = _e === void 0 ? AUTOCOMPLETE_DEFAULT_FULLWIDTH : _e, _f = _a.size, size = _f === void 0 ? AUTOCOMPLETE_DEFAULT_SIZE : _f, _g = _a.allowCustomValue, allowCustomValue = _g === void 0 ? AUTOCOMPLETE_DEFAULT_ALLOW_CUSTOM_VALUE : _g, _h = _a.disableShowChevron, disableShowChevron = _h === void 0 ? AUTOCOMPLETE_DEFAULT_DISABLE_SHOW_CHEVRON : _h, _j = _a.disableClearButton, disableClearButton = _j === void 0 ? AUTOCOMPLETE_DEFAULT_DISABLE_CLEAR_BUTTON : _j, _k = _a.disableShowEmptyOptionsList, disableShowEmptyOptionsList = _k === void 0 ? AUTOCOMPLETE_DEFAULT_DISABLE_SHOW_EMPTY_OPTIONS_LIST : _k, _l = _a.disableCloseOnSelect, disableCloseOnSelect = _l === void 0 ? AUTOCOMPLETE_DEFAULT_DISABLE_CLOSE_ON_SELECT : _l, _m = _a.renderInput, renderInput = _m === void 0 ? function (props) { return React.createElement(Input, __assign({}, props, { ref: ref })); } : _m, searchFunctionProp = _a.searchFunction, renderOptionProp = _a.renderOption, inputValueProp = _a.inputValue, className = _a.className, valueProp = _a.value, options = _a.options, defaultValue = _a.defaultValue, error = _a.error, onChange = _a.onChange, onInputChange = _a.onInputChange, label = _a.label, placeholder = _a.placeholder, renderLeft = _a.renderLeft, renderRight = _a.renderRight, hint = _a.hint, getOptionKey = _a.getOptionKey, getOptionLabel = _a.getOptionLabel, getOptionDisabled = _a.getOptionDisabled, dataListProps = _a.dataListProps, onCloseProp = _a.onClose, onOpenProp = _a.onOpen, openProp = _a.open, defaultOpen = _a.defaultOpen, loading = _a.loading, inputProps = _a.inputProps, bodyProps = _a.bodyProps, onKeyDown = _a.onKeyDown, noOptionsText = _a.noOptionsText, clearText = _a.clearText, openText = _a.openText, loadingText = _a.loadingText, closeText = _a.closeText, other = __rest(_a, ["disabled", "required", "autoFocus", "fullWidth", "size", "allowCustomValue", "disableShowChevron", "disableClearButton", "disableShowEmptyOptionsList", "disableCloseOnSelect", "renderInput", "searchFunction", "renderOption", "inputValue", "className", "value", "options", "defaultValue", "error", "onChange", "onInputChange", "label", "placeholder", "renderLeft", "renderRight", "hint", "getOptionKey", "getOptionLabel", "getOptionDisabled", "dataListProps", "onClose", "onOpen", "open", "defaultOpen", "loading", "inputProps", "bodyProps", "onKeyDown", "noOptionsText", "clearText", "openText", "loadingText", "closeText"]);
+    if (process.env.NODE_ENV !== 'production') {
+        deprecate('Компонент «Autocomplete» устарел. Для замены используйте компонент «AutocompleteNext».');
+    }
     var anchorRef = useRef(null);
     var lastInputValue = useRef('');
     var inputBodyRef = useMultiRef([anchorRef, bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.ref]);
@@ -190,4 +194,7 @@ function AutocompleteRender(inProps, ref) {
             !disableShowEmptyOptionsList && (React.createElement(AutocompleteNoOptions, { showNoOptions: showNoOptions, noOptionsText: noOptionsText })),
             React.createElement(AutocompleteLoading, { showLoading: showLoading, loadingText: loadingText, size: size }))));
 }
+/**
+ * @deprecated Компонент устарел. Для замены используйте компонент AutocompleteNext
+ */
 export var Autocomplete = forwardRef(AutocompleteRender);

package/__inner__/esm/components/Autocomplete/helper.d.ts

@@ -46,11 +46,7 @@ export declare function withDefaultGetters<OPTION>(props: AutocompleteProps<OPTI
     hint?: string | null | undefined;
     renderLeft?: string | number | import("react").FC<import("@ozen-ui/icons").IconProps> | import("react").ReactElement<import("@ozen-ui/icons").IconProps, string | import("react").JSXElementConstructor<any>> | (() => import("react").ReactElement<import("@ozen-ui/icons").IconProps, string | import("react").JSXElementConstructor<any>>) | undefined;
     renderRight?: string | number | import("react").FC<import("@ozen-ui/icons").IconProps> | import("react").ReactElement<import("@ozen-ui/icons").IconProps, string | import("react").JSXElementConstructor<any>> | (() => import("react").ReactElement<import("@ozen-ui/icons").IconProps, string | import("react").JSXElementConstructor<any>>) | undefined;
-    inputProps?: (Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
-        ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
-    } & {
-        'data-testid'?: string | undefined;
-    }) | undefined;
+    inputProps?: import("../FieldInput").FieldInputProps | undefined;
     bodyProps?: (Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
         ref?: ((instance: HTMLLabelElement | null) => void) | import("react").RefObject<HTMLLabelElement> | null | undefined;
     }) | undefined;
@@ -117,11 +113,7 @@ export declare function withDefaultGetters<OPTION>(props: AutocompleteProps<OPTI
     hint?: string | null | undefined;
     renderLeft?: string | number | import("react").FC<import("@ozen-ui/icons").IconProps> | import("react").ReactElement<import("@ozen-ui/icons").IconProps, string | import("react").JSXElementConstructor<any>> | (() => import("react").ReactElement<import("@ozen-ui/icons").IconProps, string | import("react").JSXElementConstructor<any>>) | undefined;
     renderRight?: string | number | import("react").FC<import("@ozen-ui/icons").IconProps> | import("react").ReactElement<import("@ozen-ui/icons").IconProps, string | import("react").JSXElementConstructor<any>> | (() => import("react").ReactElement<import("@ozen-ui/icons").IconProps, string | import("react").JSXElementConstructor<any>>) | undefined;
-    inputProps?: (Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
-        ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
-    } & {
-        'data-testid'?: string | undefined;
-    }) | undefined;
+    inputProps?: import("../FieldInput").FieldInputProps | undefined;
     bodyProps?: (Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
         ref?: ((instance: HTMLLabelElement | null) => void) | import("react").RefObject<HTMLLabelElement> | null | undefined;
     }) | undefined;

package/__inner__/esm/components/AutocompleteNext/Autocomplete.css

@@ -0,0 +1,226 @@
+.AutocompleteNext {
+  --autocomplete-gutter-x: 0 var(--textfield-gutter-x);
+}
+
+  .AutocompleteNext_hasChevron.AutocompleteNext_size_2xs {
+      --autocomplete-gutter-x: 0 var(--control-padding-2xs) 0
+        var(--control-padding-xs);
+    }
+
+  .AutocompleteNext_hasChevron.AutocompleteNext_size_xs {
+      --autocomplete-gutter-x: 0 var(--control-padding-2xs) 0
+        var(--control-padding-xs);
+    }
+
+  .AutocompleteNext_hasChevron.AutocompleteNext_size_s {
+      --autocomplete-gutter-x: 0 var(--control-padding-2xs) 0
+        var(--control-padding-s);
+    }
+
+  .AutocompleteNext_hasChevron.AutocompleteNext_size_m {
+      --autocomplete-gutter-x: 0 var(--control-padding-2xs) 0
+        var(--control-padding-m);
+    }
+
+  .AutocompleteNext_hasChevron.AutocompleteNext_size_l {
+      --autocomplete-gutter-x: 0 var(--control-padding-2xs) 0
+        var(--control-padding-l);
+    }
+
+  .AutocompleteNext-RenderRight {
+    display: flex;
+    gap: var(--spacing-2xs);
+  }
+
+  .AutocompleteNext-ClearButton {
+    visibility: hidden;
+    transition: visibility var(--transition-default);
+  }
+
+  .AutocompleteNext-ClearButton_visibility {
+      visibility: visible;
+    }
+
+  .AutocompleteNext .Input-Body {
+    padding: var(--autocomplete-gutter-x);
+    align-items: flex-start;
+  }
+
+  .AutocompleteNext .FieldIcon {
+    block-size: var(--textfield-input-height);
+  }
+
+  .AutocompleteNext-Option {
+    cursor: pointer;
+    transition: background-color var(--transition-default);
+  }
+
+  .AutocompleteNext-Option:hover {
+      background-color: var(--color-background-main-hover);
+    }
+
+  .AutocompleteNext-Option:active {
+      background-color: var(--color-background-main-pressed);
+    }
+
+  .AutocompleteNext-Option_focused {
+      box-shadow: inset var(--shadow-outline-focused);
+    }
+
+  .AutocompleteNext-Option_disabled,
+    .AutocompleteNext-Option_disabled:hover,
+    .AutocompleteNext-Option_disabled:active {
+      cursor: not-allowed;
+      background-color: unset;
+    }
+
+  .AutocompleteNext-Option_disabled .ListItemText-TextPrimary,
+      .AutocompleteNext-Option_disabled .ListItemText-TextSecondary,
+      .AutocompleteNext-Option_disabled:hover .ListItemText-TextPrimary,
+      .AutocompleteNext-Option_disabled:hover .ListItemText-TextSecondary,
+      .AutocompleteNext-Option_disabled:active .ListItemText-TextPrimary,
+      .AutocompleteNext-Option_disabled:active .ListItemText-TextSecondary {
+        color: var(--color-content-tertiary);
+      }
+
+  .AutocompleteNext-Input_multiple {
+      display: flex;
+      flex-wrap: wrap;
+      overflow: hidden;
+      inline-size: 100%;
+      align-items: center;
+      box-sizing: border-box;
+      padding: var(--textfield-input-padding);
+      min-block-size: var(--textfield-input-height);
+      gap: var(--spacing-3xs);
+    }
+
+  .AutocompleteNext-Input_multiple input {
+        padding: 0;
+        border: none;
+        outline: none;
+        font: inherit;
+        background: none;
+        box-sizing: border-box;
+        color: var(--textfield-color);
+      }
+
+  .AutocompleteNext-Input_multiple input::placeholder {
+          opacity: 0;
+        }
+
+  .AutocompleteNext-Input_multiple * + input::placeholder, .AutocompleteNext-Input_multiple input:focus::placeholder {
+          opacity: 1;
+        }
+
+  .AutocompleteNext-Input_responsive {
+      flex-wrap: nowrap;
+      gap: unset;
+    }
+
+  .AutocompleteNext-Input_responsive .AutocompleteNext-Tag {
+        margin-inline-end: var(--spacing-3xs);
+      }
+
+  .AutocompleteNext-HelperInput {
+    inset-block-start: 0;
+    block-size: 0;
+    overflow: hidden;
+    position: absolute;
+    visibility: hidden;
+    white-space: nowrap;
+  }
+
+  .AutocompleteNext-Tag_hidden {
+      inset-block-start: 0;
+      block-size: 0;
+      visibility: hidden;
+      position: absolute;
+    }
+
+  .AutocompleteNext-Tag_disabled {
+      pointer-events: none;
+      opacity: 0.6;
+    }
+
+  .AutocompleteNext-ClearTag {
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    block-size: inherit;
+  }
+
+  .AutocompleteNext-Dropdown {
+    --scroll-bar-size: 12px;
+  }
+
+  .AutocompleteNext-Dropdown::-webkit-scrollbar {
+    inline-size: var(--scroll-bar-size);
+  }
+
+  .AutocompleteNext-Dropdown::-webkit-scrollbar-thumb {
+    background-color: var(--color-background-secondary);
+    border-radius: calc(var(--scroll-bar-size) / 2);
+    border: calc(var(--scroll-bar-size) / 4) solid transparent;
+    background-clip: padding-box;
+    border-image: initial;
+    min-block-size: 24px;
+  }
+
+  .AutocompleteNext-Dropdown::-webkit-scrollbar-thumb:hover,
+    .AutocompleteNext-Dropdown::-webkit-scrollbar-thumb:active {
+      border: calc(var(--scroll-bar-size) / 4) solid transparent;
+      background-clip: padding-box;
+    }
+
+  .AutocompleteNext-Dropdown::-webkit-scrollbar-thumb:hover {
+      background-color: var(--color-background-secondary-hover);
+    }
+
+  .AutocompleteNext-Dropdown::-webkit-scrollbar-thumb:active {
+      background-color: var(--color-background-secondary-pressed);
+    }
+
+  .AutocompleteNext-Dropdown::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+
+  .AutocompleteNext-Dropdown {
+    overflow: hidden auto;
+    max-block-size: 40vb;
+}
+.AutocompleteNext-Dropdown-animation-enter {
+    opacity: 0;
+    transform: translate(0, calc(var(--spacing-2xs) * -1));
+    pointer-events: none;
+  }
+.AutocompleteNext-Dropdown-animation-enter-active {
+    opacity: 1;
+    transition:
+      opacity var(--transition-default),
+      transform var(--transition-default);
+    transform: translate(0);
+    pointer-events: none;
+  }
+.AutocompleteNext-Dropdown-animation-enter-done {
+    opacity: 1;
+    transform: translate(0);
+  }
+.AutocompleteNext-Dropdown-animation-exit {
+    opacity: 1;
+    transform: translate(0);
+    pointer-events: none;
+  }
+.AutocompleteNext-Dropdown-animation-exit-active {
+    opacity: 0;
+    transition:
+      opacity var(--transition-default),
+      transform var(--transition-default);
+    transform: translate(0, calc(var(--spacing-2xs) * -1));
+    pointer-events: none;
+  }
+.AutocompleteNext-Dropdown-animation-exit-done {
+    opacity: 0;
+    transform: translate(0, calc(var(--spacing-2xs) * -1));
+    pointer-events: none;
+  }

package/__inner__/esm/components/AutocompleteNext/Autocomplete.d.ts

@@ -0,0 +1,4 @@
+import './Autocomplete.css';
+import type { AutocompleteComponent } from './types';
+export declare const cnAutocomplete: import("@bem-react/classname").ClassNameFormatter;
+export declare const Autocomplete: AutocompleteComponent;

package/__inner__/esm/components/AutocompleteNext/Autocomplete.js

@@ -0,0 +1,213 @@
+import { __assign, __read, __rest, __spreadArray } from "tslib";
+import './Autocomplete.css';
+import React, { useEffect, forwardRef, useRef, useState } from 'react';
+import { useControlled } from '../../hooks/useControlled';
+import { useElementSize } from '../../hooks/useElementSize';
+import { useMultiRef } from '../../hooks/useMultiRef';
+import { useMutableRef } from '../../hooks/useMutableRef';
+import { useThemeProps } from '../../hooks/useThemeProps';
+import { cn } from '../../utils/classname';
+import { isKeys } from '../../utils/isKeys';
+import { AutocompleteDropdown, AutocompleteInput } from './components';
+import { AUTOCOMPLETE_DEFAULT_SIZE, AUTOCOMPLETE_DEFAULT_DISABLED, AUTOCOMPLETE_DEFAULT_REQUIRED, AUTOCOMPLETE_DEFAULT_AUTOFOCUS, AUTOCOMPLETE_DEFAULT_FULLWIDTH, AUTOCOMPLETE_DEFAULT_ALLOW_CUSTOM_VALUE, AUTOCOMPLETE_DEFAULT_DISABLE_CLEAR_BUTTON, AUTOCOMPLETE_DEFAULT_DISABLE_SHOW_CHEVRON, AUTOCOMPLETE_DEFAULT_DISABLE_CLOSE_ON_SELECT, AUTOCOMPLETE_DEFAULT_DISABLE_SHOW_EMPTY_OPTIONS_LIST, } from './constants';
+import { withDefaultGetters, isMultipleParams, isNotMultipleParams, } from './helpers';
+export var cnAutocomplete = cn('AutocompleteNext');
+function AutocompleteRender(inProps, ref) {
+    var props = useThemeProps({
+        props: inProps,
+        name: 'AutocompleteNext',
+    });
+    var _a = withDefaultGetters(props), _b = _a.disabled, disabled = _b === void 0 ? AUTOCOMPLETE_DEFAULT_DISABLED : _b, _c = _a.required, required = _c === void 0 ? AUTOCOMPLETE_DEFAULT_REQUIRED : _c, _d = _a.autoFocus, autoFocus = _d === void 0 ? AUTOCOMPLETE_DEFAULT_AUTOFOCUS : _d, _e = _a.fullWidth, fullWidth = _e === void 0 ? AUTOCOMPLETE_DEFAULT_FULLWIDTH : _e, _f = _a.size, size = _f === void 0 ? AUTOCOMPLETE_DEFAULT_SIZE : _f, _g = _a.allowCustomValue, allowCustomValue = _g === void 0 ? AUTOCOMPLETE_DEFAULT_ALLOW_CUSTOM_VALUE : _g, _h = _a.disableShowChevron, disableShowChevron = _h === void 0 ? AUTOCOMPLETE_DEFAULT_DISABLE_SHOW_CHEVRON : _h, _j = _a.disableClearButton, disableClearButton = _j === void 0 ? AUTOCOMPLETE_DEFAULT_DISABLE_CLEAR_BUTTON : _j, _k = _a.disableCloseOnSelect, disableCloseOnSelect = _k === void 0 ? AUTOCOMPLETE_DEFAULT_DISABLE_CLOSE_ON_SELECT : _k, _l = _a.disableShowEmptyOptionsList, disableShowEmptyOptionsList = _l === void 0 ? AUTOCOMPLETE_DEFAULT_DISABLE_SHOW_EMPTY_OPTIONS_LIST : _l, limitTags = _a.limitTags, renderInput = _a.renderInput, multiple = _a.multiple, searchFunctionProp = _a.searchFunction, inputValueProp = _a.inputValue, valueProp = _a.value, options = _a.options, defaultValue = _a.defaultValue, onInputChange = _a.onInputChange, getOptionKey = _a.getOptionKey, getOptionLabel = _a.getOptionLabel, getOptionDisabled = _a.getOptionDisabled, onCloseProp = _a.onClose, onOpenProp = _a.onOpen, openProp = _a.open, defaultOpen = _a.defaultOpen, loading = _a.loading, inputProps = _a.inputProps, bodyProps = _a.bodyProps, onKeyDown = _a.onKeyDown, noOptionsText = _a.noOptionsText, clearText = _a.clearText, openText = _a.openText, renderOption = _a.renderOption, loadingText = _a.loadingText, closeText = _a.closeText, listProps = _a.listProps, popoverProps = _a.popoverProps, onChangeProp = _a.onChange, other = __rest(_a, ["disabled", "required", "autoFocus", "fullWidth", "size", "allowCustomValue", "disableShowChevron", "disableClearButton", "disableCloseOnSelect", "disableShowEmptyOptionsList", "limitTags", "renderInput", "multiple", "searchFunction", "inputValue", "value", "options", "defaultValue", "onInputChange", "getOptionKey", "getOptionLabel", "getOptionDisabled", "onClose", "onOpen", "open", "defaultOpen", "loading", "inputProps", "bodyProps", "onKeyDown", "noOptionsText", "clearText", "openText", "renderOption", "loadingText", "closeText", "listProps", "popoverProps", "onChange"]);
+    var _m = useElementSize(), inputRef = _m.ref, height = _m.height;
+    var lastInputValue = useRef('');
+    var anchorRef = useRef(null);
+    var inputBodyRef = useMultiRef([anchorRef, bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.ref]);
+    var rootRef = useMultiRef([ref, inputRef]);
+    var _o = __read(useControlled({
+        value: inputValueProp,
+        defaultValue: '',
+        name: 'AutocompleteNext',
+        state: 'inputValue',
+    }), 2), inputValue = _o[0], setInputValue = _o[1];
+    var _p = __read(useControlled({
+        value: valueProp,
+        defaultValue: defaultValue,
+        name: 'AutocompleteNext',
+        state: 'value',
+    }), 2), valueState = _p[0], setValueState = _p[1];
+    var _q = __read(useControlled({
+        value: openProp,
+        defaultValue: defaultOpen,
+        name: 'AutocompleteNext',
+        state: 'open',
+    }), 2), open = _q[0], setOpen = _q[1];
+    var searchFunctionDefault = function (options, searchValue) {
+        return options === null || options === void 0 ? void 0 : options.filter(function (option) {
+            return getOptionLabel(option).toLowerCase().includes(searchValue.toLowerCase());
+        });
+    };
+    var savedOnInputChange = useMutableRef(onInputChange);
+    var savedGetOptionLabel = useMutableRef(getOptionLabel);
+    var _r = __read(useState(__spreadArray([], __read(options), false)), 2), filteredOptions = _r[0], setFilteredOptions = _r[1];
+    var searchFunction = searchFunctionProp || searchFunctionDefault;
+    var hasOptions = !!(filteredOptions === null || filteredOptions === void 0 ? void 0 : filteredOptions.length);
+    var _s = __read(useState(undefined), 2), search = _s[0], setSearch = _s[1];
+    var changeInputValue = function (e, value) {
+        var _a;
+        setInputValue(value);
+        (_a = savedOnInputChange.current) === null || _a === void 0 ? void 0 : _a.call(savedOnInputChange, e, value);
+    };
+    var callOnChange = function (e, option) {
+        var _a, _b, _c;
+        var inputValue = '';
+        var onChange = function (e, option) {
+            setValueState(option);
+            onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(e, option);
+        };
+        var params = __assign(__assign({}, inProps), { onChange: onChange, value: valueState });
+        if (isNotMultipleParams(params)) {
+            inputValue = option ? getOptionLabel(option) : '';
+            (_a = params.onChange) === null || _a === void 0 ? void 0 : _a.call(params, e, option);
+        }
+        if (isMultipleParams(params)) {
+            if (option === null) {
+                (_b = params.onChange) === null || _b === void 0 ? void 0 : _b.call(params, e, null);
+            }
+            else {
+                var value = params.value || [];
+                var optionKey_1 = option && getOptionKey(option);
+                var optionIsSelected = value.find(function (item) { return getOptionKey(item) === optionKey_1; });
+                // eslint-disable-next-line no-nested-ternary
+                var res = optionIsSelected
+                    ? value.filter(function (option) { return getOptionKey(option) !== optionKey_1; })
+                    : option
+                        ? __spreadArray(__spreadArray([], __read(value), false), [option], false) : value;
+                (_c = params.onChange) === null || _c === void 0 ? void 0 : _c.call(params, e, res);
+            }
+            setSearch(undefined);
+        }
+        changeInputValue(null, inputValue);
+    };
+    /** Эффект — фильтрация списка при изменении опций */
+    useEffect(function () {
+        if (!open)
+            return;
+        setFilteredOptions(search ? search(options) : __spreadArray([], __read(options), false));
+    }, [search, options, open, searchFunctionProp]);
+    /** Эффект — синхронизируем значение текстового поля со значением в списке */
+    useEffect(function () {
+        var _a;
+        if (allowCustomValue || multiple)
+            return;
+        var value = valueState || '';
+        var params = __assign(__assign({}, inProps), { value: value });
+        if (isNotMultipleParams(params)) {
+            lastInputValue.current = (_a = savedGetOptionLabel.current) === null || _a === void 0 ? void 0 : _a.call(savedGetOptionLabel, params.value);
+            if (lastInputValue.current !== inputValue)
+                changeInputValue(null, lastInputValue.current);
+        }
+    }, [valueState, allowCustomValue]);
+    /** Эффект — автофокусировка в текстовом поле */
+    useEffect(function () {
+        var _a;
+        if (autoFocus)
+            (_a = anchorRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [autoFocus]);
+    /** Ждём выполнения анимации на закрытие и делаем сброс функции фильтрации */
+    var handleExited = function () {
+        var _a;
+        setSearch(undefined);
+        (_a = popoverProps === null || popoverProps === void 0 ? void 0 : popoverProps.onExited) === null || _a === void 0 ? void 0 : _a.call(popoverProps);
+    };
+    /** Закрытие */
+    var handleClose = function () {
+        setOpen(false);
+        onCloseProp === null || onCloseProp === void 0 ? void 0 : onCloseProp();
+    };
+    /** Открытие */
+    var handleOpen = function () {
+        setOpen(true);
+        onOpenProp === null || onOpenProp === void 0 ? void 0 : onOpenProp();
+    };
+    /** Переключатель открытия и закрытия */
+    var handleToggle = function () {
+        if (disabled)
+            return;
+        if (open)
+            handleClose();
+        else
+            handleOpen();
+    };
+    /** Очистка поля */
+    var handleClear = function (e) {
+        callOnChange(e, null);
+        setSearch(undefined);
+    };
+    /** Актуализация значения текстового поля после его покидания */
+    var handleBlur = function (e) {
+        var _a;
+        (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
+        if (allowCustomValue)
+            return;
+        if (inputValue !== lastInputValue.current) {
+            changeInputValue(null, lastInputValue.current);
+        }
+    };
+    /** Открытие списка по клику на текстовом поле */
+    var handleClickOnInput = function (e) {
+        var _a;
+        handleToggle();
+        (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onClick) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
+    };
+    /** Управление элементом контроля через клавиатуру */
+    var handleKeyDown = function (e) {
+        if (isKeys(e, ['ArrowDown', 'ArrowUp']) && !open) {
+            e.preventDefault();
+            handleToggle();
+        }
+        var params = __assign(__assign({}, inProps), { value: valueState });
+        if (isMultipleParams(params) && isKeys(e, ['Backspace']) && !inputValue) {
+            var value = params.value;
+            if (value)
+                callOnChange(e, value[value.length - 1] || null);
+        }
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
+    };
+    /** Событие ввода значения в текстовом поле */
+    var handleChangeInput = function (e) {
+        var value = e.target.value;
+        // Открываем список при вводе первого символа (при условии, что список еще не открыт)
+        if (value.length && !open)
+            handleOpen();
+        if (multiple)
+            changeInputValue(e, value);
+        if (value && !multiple)
+            changeInputValue(e, value);
+        if (!value && !multiple)
+            callOnChange(e, null);
+        // Задаем функцию фильтрации
+        setSearch(function () { return function (options) { return searchFunction(__spreadArray([], __read(options), false), value); }; });
+    };
+    /** Событие выбора значения из раскрывающегося списка */
+    var handleChangeDropdown = function (e, option) {
+        callOnChange(e, option);
+        // Закрываем список после выбора
+        if (!disableCloseOnSelect)
+            handleClose();
+    };
+    var autocompleteInputProps = __assign({ open: open, size: size, limitTags: limitTags, disabled: disabled, multiple: multiple, required: required, fullWidth: fullWidth, clearText: clearText, closeText: closeText, openText: openText, inputProps: __assign(__assign({}, inputProps), { onBlur: handleBlur, onClick: handleClickOnInput }), bodyProps: __assign(__assign({}, bodyProps), { ref: inputBodyRef }), renderInput: renderInput, getOptionKey: getOptionKey, getOptionLabel: getOptionLabel, getOptionDisabled: getOptionDisabled, value: inputValue, disableShowChevron: disableShowChevron, disableClearButton: disableClearButton, onClear: handleClear, onOpen: handleToggle, onRemoveTag: callOnChange, onKeyDown: handleKeyDown, onChange: handleChangeInput, selectedOptions: valueState }, other);
+    var update = useRef();
+    var setUpdate = function (func) {
+        if (func) {
+            update.current = func;
+        }
+    };
+    useEffect(function () {
+        var _a;
+        (_a = update.current) === null || _a === void 0 ? void 0 : _a.call(update);
+    }, [height]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(AutocompleteInput, __assign({}, autocompleteInputProps, { ref: rootRef })),
+        React.createElement(AutocompleteDropdown, { open: open, size: size, loading: loading, setUpdate: setUpdate, value: valueState, multiple: multiple, onClose: handleClose, listProps: listProps, anchorRef: anchorRef, hasOptions: hasOptions, options: filteredOptions, loadingText: loadingText, renderOption: renderOption, getOptionKey: getOptionKey, noOptionsText: noOptionsText, onChange: handleChangeDropdown, getOptionLabel: getOptionLabel, getOptionDisabled: getOptionDisabled, disableShowEmptyOptionsList: disableShowEmptyOptionsList, popoverProps: __assign(__assign({}, popoverProps), { onExited: handleExited }) })));
+}
+export var Autocomplete = forwardRef(AutocompleteRender);

package/__inner__/esm/components/AutocompleteNext/components/AutocompleteDropdown/AutocompleteDropdown.d.ts

@@ -0,0 +1,2 @@
+import type { AutocompleteDropdownComponent } from './index';
+export declare const AutocompleteDropdown: AutocompleteDropdownComponent;

package/__inner__/esm/components/AutocompleteNext/components/AutocompleteDropdown/AutocompleteDropdown.js

@@ -0,0 +1,153 @@
+import { __assign } from "tslib";
+import React, { useEffect, useRef, useMemo, forwardRef } from 'react';
+import { useEventListener } from '../../../../hooks/useEventListener';
+import { useMultiRef } from '../../../../hooks/useMultiRef';
+import { usePrevious } from '../../../../hooks/usePrevious';
+import { getPaperSizeToFormElement } from '../../../../utils/getPaperSizeToFormElement';
+import { isKey } from '../../../../utils/isKey';
+import { isNotNil } from '../../../../utils/isNotNil';
+import { scrollContainerToElement } from '../../../../utils/scrollContainerToElement';
+import { List, ListItem, ListItemText } from '../../../List';
+import { Paper } from '../../../Paper';
+import { Popover } from '../../../Popover';
+import { cnAutocomplete } from '../../index';
+import { AutocompleteDropdownCheckIcon, AutocompleteDropdownLoading, AutocompleteDropdownNoOptions, } from './components';
+import { AUTOCOMPLETE_DROPDOWN_DEFAULT_SIZE } from './constants';
+import { isMultipleParams, isNotMultipleParams, normalizeOptions, } from './helpers';
+import { useDataListNavigation } from './utils';
+var AutocompleteDropdownRender = function (inProps, ref) {
+    var _a = inProps.size, size = _a === void 0 ? AUTOCOMPLETE_DROPDOWN_DEFAULT_SIZE : _a, open = inProps.open, loading = inProps.loading, onClose = inProps.onClose, options = inProps.options, onChange = inProps.onChange, anchorRef = inProps.anchorRef, className = inProps.className, listProps = inProps.listProps, hasOptions = inProps.hasOptions, loadingText = inProps.loadingText, popoverProps = inProps.popoverProps, getOptionKey = inProps.getOptionKey, noOptionsText = inProps.noOptionsText, getOptionLabel = inProps.getOptionLabel, getOptionDisabled = inProps.getOptionDisabled, disableShowEmptyOptionsList = inProps.disableShowEmptyOptionsList, setUpdate = inProps.setUpdate, renderOptionProp = inProps.renderOption;
+    var radius = getPaperSizeToFormElement(size);
+    var showNoOptions = !hasOptions && !loading && !disableShowEmptyOptionsList;
+    var showLoading = !hasOptions && !!loading;
+    var rootRef = useRef(null);
+    var listRef = useRef(null);
+    var _b = useMemo(function () { return normalizeOptions(options, getOptionKey, getOptionDisabled); }, [options, getOptionKey, getOptionDisabled]), entities = _b.entities, items = _b.idxs;
+    // Определяет последнюю выбранную опцию
+    var lastSelected = useMemo(function () {
+        var _a, _b;
+        if (isNotMultipleParams(inProps)) {
+            var value = inProps.value;
+            var key = value && getOptionKey(value);
+            return key && ((_a = entities.byKey[key]) === null || _a === void 0 ? void 0 : _a.idx);
+        }
+        if (isMultipleParams(inProps)) {
+            var value = inProps.value;
+            var lastValue = value === null || value === void 0 ? void 0 : value[value.length - 1];
+            var lastKey = lastValue && getOptionKey(lastValue);
+            return lastKey && ((_b = entities.byKey[lastKey]) === null || _b === void 0 ? void 0 : _b.idx);
+        }
+        return undefined;
+    }, [inProps, entities]);
+    // Навигация по списку
+    var _c = useDataListNavigation({
+        items: items,
+        active: open,
+        selected: lastSelected,
+        onSelect: function (event, idx) {
+            var _a;
+            var option = isNotNil(idx) ? (_a = entities.byIdx[idx]) === null || _a === void 0 ? void 0 : _a.option : undefined;
+            if (option)
+                onChange === null || onChange === void 0 ? void 0 : onChange(event, option);
+        },
+    }), current = _c.current, focused = _c.focused, onKeyDown = _c.onKeyDown, onClick = _c.onClick;
+    var previousCurrent = usePrevious(current);
+    useEffect(function () {
+        var _a, _b;
+        var firstCurrent = !isNotNil(previousCurrent) && isNotNil(current) ? current : undefined;
+        var selected = focused !== null && focused !== void 0 ? focused : firstCurrent;
+        if (selected !== undefined) {
+            // Прокрутка списка
+            scrollContainerToElement({
+                container: rootRef.current,
+                element: (_b = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b[+selected],
+                behavior: isNotNil(focused) ? 'smooth' : 'instant',
+            });
+        }
+    }, [focused, current]);
+    // Назначает элементу контроля событие управления списком с клавиатуры
+    useEventListener({
+        eventName: 'keydown',
+        element: anchorRef,
+        handler: function (event) { return onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event); },
+    });
+    // Закрывает список по нажатию на клавишу {Tab}
+    useEventListener({
+        active: open,
+        eventName: 'keydown',
+        element: anchorRef,
+        handler: function (event) {
+            if (isKey(event, 'Tab'))
+                onClose === null || onClose === void 0 ? void 0 : onClose();
+        },
+    });
+    var handleOnMouseDownList = function (e) {
+        var _a;
+        e.preventDefault();
+        (_a = listProps === null || listProps === void 0 ? void 0 : listProps.onMouseDown) === null || _a === void 0 ? void 0 : _a.call(listProps, e);
+    };
+    /** Отображение опций */
+    var renderOptionDefault = function (_a) {
+        var props = _a.props, option = _a.option, selected = _a.state.selected;
+        return (React.createElement(ListItem, __assign({}, props),
+            React.createElement(ListItemText, { primary: getOptionLabel(option) }),
+            React.createElement(AutocompleteDropdownCheckIcon, { selected: selected })));
+    };
+    var renderOption = renderOptionProp || renderOptionDefault;
+    // Представление раскрывающегося списка
+    var renderChildren = useMemo(function () {
+        return options.map(function (option, idx) {
+            var isSelected;
+            var key = getOptionKey === null || getOptionKey === void 0 ? void 0 : getOptionKey(option);
+            var isFocused = idx === focused;
+            var isDisabled = getOptionDisabled(option);
+            if (isNotMultipleParams(inProps)) {
+                var value = inProps.value;
+                if (value)
+                    isSelected = getOptionKey(value) === key;
+            }
+            if (isMultipleParams(inProps) && Array.isArray(inProps.value)) {
+                var value = inProps.value;
+                isSelected = !!value.find(function (option) { return getOptionKey(option) === key; });
+            }
+            return renderOption({
+                option: option,
+                state: {
+                    key: key,
+                    focused: isFocused,
+                    selected: isSelected,
+                    disabled: isDisabled,
+                },
+                props: {
+                    key: "".concat(idx, "_").concat(key),
+                    role: 'option',
+                    'aria-selected': isSelected,
+                    'aria-disabled': isDisabled,
+                    className: cnAutocomplete('Option', {
+                        disabled: isDisabled,
+                        selected: isSelected,
+                        focused: isFocused,
+                    }),
+                    onClick: function (e) {
+                        if (isDisabled)
+                            return;
+                        onClick === null || onClick === void 0 ? void 0 : onClick(e, idx);
+                    },
+                },
+            });
+        });
+    }, [
+        options,
+        focused,
+        renderOption,
+        getOptionKey,
+        lastSelected,
+        getOptionDisabled,
+    ]);
+    return (React.createElement(Popover, __assign({ offset: [0, 4], strategy: "absolute", placement: "bottom-start", setUpdate: setUpdate, as: Paper, transitionProps: { classNames: 'AutocompleteNext-Dropdown-animation' }, className: cnAutocomplete('Dropdown', [className]), equalAnchorWidth: true, disableReturnFocus: true, disableEnforceFocus: true }, popoverProps, { open: open, radius: radius, onClose: onClose, anchorRef: anchorRef, ref: useMultiRef([ref, popoverProps === null || popoverProps === void 0 ? void 0 : popoverProps.ref, rootRef]) }),
+        React.createElement(List, __assign({ size: size, role: "listbox" }, listProps, { onMouseDown: handleOnMouseDownList, ref: useMultiRef([listRef, listProps === null || listProps === void 0 ? void 0 : listProps.ref]) }),
+            renderChildren,
+            React.createElement(AutocompleteDropdownNoOptions, { showNoOptions: showNoOptions, noOptionsText: noOptionsText }),
+            React.createElement(AutocompleteDropdownLoading, { showLoading: showLoading, loadingText: loadingText, size: size }))));
+};
+export var AutocompleteDropdown = forwardRef(AutocompleteDropdownRender);