@ozen-ui/kit 0.57.0 → 0.58.1

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

@@ -0,0 +1,156 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AutocompleteDropdown = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var useEventListener_1 = require("../../../../hooks/useEventListener");
+var useMultiRef_1 = require("../../../../hooks/useMultiRef");
+var usePrevious_1 = require("../../../../hooks/usePrevious");
+var getPaperSizeToFormElement_1 = require("../../../../utils/getPaperSizeToFormElement");
+var isKey_1 = require("../../../../utils/isKey");
+var isNotNil_1 = require("../../../../utils/isNotNil");
+var scrollContainerToElement_1 = require("../../../../utils/scrollContainerToElement");
+var List_1 = require("../../../List");
+var Paper_1 = require("../../../Paper");
+var Popover_1 = require("../../../Popover");
+var index_1 = require("../../index");
+var components_1 = require("./components");
+var constants_1 = require("./constants");
+var helpers_1 = require("./helpers");
+var utils_1 = require("./utils");
+var AutocompleteDropdownRender = function (inProps, ref) {
+    var _a = inProps.size, size = _a === void 0 ? constants_1.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 = (0, getPaperSizeToFormElement_1.getPaperSizeToFormElement)(size);
+    var showNoOptions = !hasOptions && !loading && !disableShowEmptyOptionsList;
+    var showLoading = !hasOptions && !!loading;
+    var rootRef = (0, react_1.useRef)(null);
+    var listRef = (0, react_1.useRef)(null);
+    var _b = (0, react_1.useMemo)(function () { return (0, helpers_1.normalizeOptions)(options, getOptionKey, getOptionDisabled); }, [options, getOptionKey, getOptionDisabled]), entities = _b.entities, items = _b.idxs;
+    // Определяет последнюю выбранную опцию
+    var lastSelected = (0, react_1.useMemo)(function () {
+        var _a, _b;
+        if ((0, helpers_1.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 ((0, helpers_1.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 = (0, utils_1.useDataListNavigation)({
+        items: items,
+        active: open,
+        selected: lastSelected,
+        onSelect: function (event, idx) {
+            var _a;
+            var option = (0, isNotNil_1.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 = (0, usePrevious_1.usePrevious)(current);
+    (0, react_1.useEffect)(function () {
+        var _a, _b;
+        var firstCurrent = !(0, isNotNil_1.isNotNil)(previousCurrent) && (0, isNotNil_1.isNotNil)(current) ? current : undefined;
+        var selected = focused !== null && focused !== void 0 ? focused : firstCurrent;
+        if (selected !== undefined) {
+            // Прокрутка списка
+            (0, scrollContainerToElement_1.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: (0, isNotNil_1.isNotNil)(focused) ? 'smooth' : 'instant',
+            });
+        }
+    }, [focused, current]);
+    // Назначает элементу контроля событие управления списком с клавиатуры
+    (0, useEventListener_1.useEventListener)({
+        eventName: 'keydown',
+        element: anchorRef,
+        handler: function (event) { return onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event); },
+    });
+    // Закрывает список по нажатию на клавишу {Tab}
+    (0, useEventListener_1.useEventListener)({
+        active: open,
+        eventName: 'keydown',
+        element: anchorRef,
+        handler: function (event) {
+            if ((0, isKey_1.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_1.default.createElement(List_1.ListItem, tslib_1.__assign({}, props),
+            react_1.default.createElement(List_1.ListItemText, { primary: getOptionLabel(option) }),
+            react_1.default.createElement(components_1.AutocompleteDropdownCheckIcon, { selected: selected })));
+    };
+    var renderOption = renderOptionProp || renderOptionDefault;
+    // Представление раскрывающегося списка
+    var renderChildren = (0, react_1.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 ((0, helpers_1.isNotMultipleParams)(inProps)) {
+                var value = inProps.value;
+                if (value)
+                    isSelected = getOptionKey(value) === key;
+            }
+            if ((0, helpers_1.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: (0, index_1.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_1.default.createElement(Popover_1.Popover, tslib_1.__assign({ offset: [0, 4], strategy: "absolute", placement: "bottom-start", setUpdate: setUpdate, as: Paper_1.Paper, transitionProps: { classNames: 'AutocompleteNext-Dropdown-animation' }, className: (0, index_1.cnAutocomplete)('Dropdown', [className]), equalAnchorWidth: true, disableReturnFocus: true, disableEnforceFocus: true }, popoverProps, { open: open, radius: radius, onClose: onClose, anchorRef: anchorRef, ref: (0, useMultiRef_1.useMultiRef)([ref, popoverProps === null || popoverProps === void 0 ? void 0 : popoverProps.ref, rootRef]) }),
+        react_1.default.createElement(List_1.List, tslib_1.__assign({ size: size, role: "listbox" }, listProps, { onMouseDown: handleOnMouseDownList, ref: (0, useMultiRef_1.useMultiRef)([listRef, listProps === null || listProps === void 0 ? void 0 : listProps.ref]) }),
+            renderChildren,
+            react_1.default.createElement(components_1.AutocompleteDropdownNoOptions, { showNoOptions: showNoOptions, noOptionsText: noOptionsText }),
+            react_1.default.createElement(components_1.AutocompleteDropdownLoading, { showLoading: showLoading, loadingText: loadingText, size: size }))));
+};
+exports.AutocompleteDropdown = (0, react_1.forwardRef)(AutocompleteDropdownRender);

package/__inner__/cjs/components/AutocompleteNext/components/AutocompleteDropdown/components/AutocompleteDropdownCheckIcon/AutocompleteDropdownCheckIcon.css

@@ -0,0 +1,7 @@
+.AutocompleteDropdownCheckIcon {
+  visibility: hidden;
+}
+
+  .AutocompleteDropdownCheckIcon_selected {
+    visibility: visible;
+  }

package/__inner__/cjs/components/AutocompleteNext/components/AutocompleteDropdown/components/AutocompleteDropdownCheckIcon/AutocompleteDropdownCheckIcon.d.ts

@@ -0,0 +1,6 @@
+import './AutocompleteDropdownCheckIcon.css';
+import type { FC } from 'react';
+export type AutocompleteDropdownCheckIconProps = {
+    selected?: boolean;
+};
+export declare const AutocompleteDropdownCheckIcon: FC<AutocompleteDropdownCheckIconProps>;

package/__inner__/cjs/components/AutocompleteNext/components/AutocompleteDropdown/components/AutocompleteDropdownCheckIcon/AutocompleteDropdownCheckIcon.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AutocompleteDropdownCheckIcon = void 0;
+var tslib_1 = require("tslib");
+require("./AutocompleteDropdownCheckIcon.css");
+var react_1 = tslib_1.__importDefault(require("react"));
+var icons_1 = require("@ozen-ui/icons");
+var classname_1 = require("../../../../../../utils/classname");
+var getIconSizeToFormElement_1 = require("../../../../../../utils/getIconSizeToFormElement");
+var List_1 = require("../../../../../List");
+var cnAutocompleteDropdownCheckIcon = (0, classname_1.cn)('AutocompleteDropdownCheckIcon');
+var AutocompleteDropdownCheckIcon = function (_a) {
+    var selected = _a.selected;
+    var size = (0, List_1.useListContext)().size;
+    return (react_1.default.createElement(List_1.ListItemIcon, { className: cnAutocompleteDropdownCheckIcon({ selected: selected }) },
+        react_1.default.createElement(icons_1.CheckIcon, { size: (0, getIconSizeToFormElement_1.getIconSizeToFormElement)(size) })));
+};
+exports.AutocompleteDropdownCheckIcon = AutocompleteDropdownCheckIcon;

package/__inner__/cjs/components/AutocompleteNext/components/AutocompleteDropdown/components/AutocompleteDropdownCheckIcon/index.d.ts

@@ -0,0 +1 @@
+export * from './AutocompleteDropdownCheckIcon';

package/__inner__/cjs/components/AutocompleteNext/components/AutocompleteDropdown/components/AutocompleteDropdownCheckIcon/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./AutocompleteDropdownCheckIcon"), exports);

package/__inner__/cjs/components/AutocompleteNext/components/AutocompleteDropdown/components/AutocompleteDropdownLoading/AutocompleteDropdownLoading.d.ts

@@ -0,0 +1,6 @@
+import type { FC } from 'react';
+import type { AutocompleteProps } from '../../../../index';
+export type AutocompleteDropdownLoadingProps = Pick<AutocompleteProps, 'loadingText' | 'size'> & {
+    showLoading: boolean;
+};
+export declare const AutocompleteDropdownLoading: FC<AutocompleteDropdownLoadingProps>;

package/__inner__/cjs/components/AutocompleteNext/components/AutocompleteDropdown/components/AutocompleteDropdownLoading/AutocompleteDropdownLoading.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AutocompleteDropdownLoading = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var getIconSizeToFormElement_1 = require("../../../../../../utils/getIconSizeToFormElement");
+var isNumber_1 = require("../../../../../../utils/isNumber");
+var isString_1 = require("../../../../../../utils/isString");
+var List_1 = require("../../../../../List");
+var Loader_1 = require("../../../../../Loader");
+var constants_1 = require("../../../../constants");
+var AutocompleteDropdownLoading = function (_a) {
+    var _b = _a.size, sizeProp = _b === void 0 ? constants_1.AUTOCOMPLETE_DEFAULT_SIZE : _b, showLoading = _a.showLoading, loadingText = _a.loadingText;
+    if (!showLoading) {
+        return null;
+    }
+    var size = (0, getIconSizeToFormElement_1.getIconSizeToFormElement)(sizeProp);
+    return (0, isString_1.isString)(loadingText) || (0, isNumber_1.isNumber)(loadingText) ? (react_1.default.createElement(List_1.ListItem, null,
+        react_1.default.createElement(List_1.ListItemIcon, null,
+            react_1.default.createElement(Loader_1.Loader, { size: size })),
+        react_1.default.createElement(List_1.ListItemText, { primary: loadingText }))) : (loadingText);
+};
+exports.AutocompleteDropdownLoading = AutocompleteDropdownLoading;

package/__inner__/cjs/components/AutocompleteNext/components/AutocompleteDropdown/components/AutocompleteDropdownLoading/index.d.ts

@@ -0,0 +1 @@
+export * from './AutocompleteDropdownLoading';

package/__inner__/cjs/components/AutocompleteNext/components/AutocompleteDropdown/components/AutocompleteDropdownLoading/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./AutocompleteDropdownLoading"), exports);

package/__inner__/cjs/components/AutocompleteNext/components/AutocompleteDropdown/components/AutocompleteDropdownNoOptions/AutocompleteDropdownNoOptions.d.ts

@@ -0,0 +1,6 @@
+import type { FC } from 'react';
+import type { AutocompleteProps } from '../../../../index';
+export type AutocompleteDropdownNoOptionsProps = Pick<AutocompleteProps, 'noOptionsText'> & {
+    showNoOptions: boolean;
+};
+export declare const AutocompleteDropdownNoOptions: FC<AutocompleteDropdownNoOptionsProps>;

package/__inner__/cjs/components/AutocompleteNext/components/AutocompleteDropdown/components/AutocompleteDropdownNoOptions/AutocompleteDropdownNoOptions.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AutocompleteDropdownNoOptions = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var isNumber_1 = require("../../../../../../utils/isNumber");
+var isString_1 = require("../../../../../../utils/isString");
+var List_1 = require("../../../../../List");
+var AutocompleteDropdownNoOptions = function (_a) {
+    var showNoOptions = _a.showNoOptions, noOptionsText = _a.noOptionsText;
+    if (!showNoOptions) {
+        return null;
+    }
+    return (0, isString_1.isString)(noOptionsText) || (0, isNumber_1.isNumber)(noOptionsText) ? (react_1.default.createElement(List_1.ListItem, null,
+        react_1.default.createElement(List_1.ListItemText, { primary: noOptionsText }))) : (noOptionsText);
+};
+exports.AutocompleteDropdownNoOptions = AutocompleteDropdownNoOptions;

package/__inner__/cjs/components/AutocompleteNext/components/AutocompleteDropdown/components/AutocompleteDropdownNoOptions/index.d.ts

@@ -0,0 +1 @@
+export * from './AutocompleteDropdownNoOptions';

package/__inner__/cjs/components/AutocompleteNext/components/AutocompleteDropdown/components/AutocompleteDropdownNoOptions/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./AutocompleteDropdownNoOptions"), exports);

package/__inner__/cjs/components/AutocompleteNext/components/AutocompleteDropdown/components/index.d.ts

@@ -0,0 +1,3 @@
+export * from './AutocompleteDropdownLoading';
+export * from './AutocompleteDropdownNoOptions';
+export * from './AutocompleteDropdownCheckIcon';

package/__inner__/cjs/components/AutocompleteNext/components/AutocompleteDropdown/components/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./AutocompleteDropdownLoading"), exports);
+tslib_1.__exportStar(require("./AutocompleteDropdownNoOptions"), exports);
+tslib_1.__exportStar(require("./AutocompleteDropdownCheckIcon"), exports);

package/__inner__/cjs/components/AutocompleteNext/components/AutocompleteDropdown/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const AUTOCOMPLETE_DROPDOWN_DEFAULT_SIZE = "m";
+export declare const AUTOCOMPLETE_DROPDOWN_DEFAULT_OPEN = false;
+export declare const AUTOCOMPLETE_DROPDOWN_OPTION_DEFAULT_DISABLED = false;

package/__inner__/cjs/components/AutocompleteNext/components/AutocompleteDropdown/constants.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AUTOCOMPLETE_DROPDOWN_OPTION_DEFAULT_DISABLED = exports.AUTOCOMPLETE_DROPDOWN_DEFAULT_OPEN = exports.AUTOCOMPLETE_DROPDOWN_DEFAULT_SIZE = void 0;
+exports.AUTOCOMPLETE_DROPDOWN_DEFAULT_SIZE = 'm';
+exports.AUTOCOMPLETE_DROPDOWN_DEFAULT_OPEN = false;
+exports.AUTOCOMPLETE_DROPDOWN_OPTION_DEFAULT_DISABLED = false;

package/__inner__/cjs/components/AutocompleteNext/components/AutocompleteDropdown/helpers.d.ts

@@ -0,0 +1,17 @@
+import type { AutocompleteDropdownProps } from './types';
+export declare const isMultipleParams: <OPTION>(params: AutocompleteDropdownProps<OPTION, boolean>) => params is AutocompleteDropdownProps<OPTION, true>;
+export declare const isNotMultipleParams: <OPTION>(params: AutocompleteDropdownProps<OPTION, boolean>) => params is AutocompleteDropdownProps<OPTION, false>;
+export type NormalizedOptions<OPTION> = {
+    entities: {
+        byIdx: Record<string | number, {
+            option: OPTION;
+            key: string | number;
+        }>;
+        byKey: Record<string | number, {
+            option: OPTION;
+            idx: string | number;
+        }>;
+    };
+    idxs: (string | number)[];
+};
+export declare function normalizeOptions<OPTION>(options: OPTION[], getOptionKey: (option: OPTION) => string | number, getOptionDisabled: (option: OPTION) => boolean | undefined): NormalizedOptions<OPTION>;

package/__inner__/cjs/components/AutocompleteNext/components/AutocompleteDropdown/helpers.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.normalizeOptions = exports.isNotMultipleParams = exports.isMultipleParams = void 0;
+var tslib_1 = require("tslib");
+var isMultipleParams = function (params) { return !!params.multiple; };
+exports.isMultipleParams = isMultipleParams;
+var isNotMultipleParams = function (params) { return !params.multiple; };
+exports.isNotMultipleParams = isNotMultipleParams;
+function normalizeOptions(options, getOptionKey, getOptionDisabled) {
+    var e_1, _a;
+    var idx = 0;
+    var res = {
+        idxs: [],
+        entities: { byIdx: {}, byKey: {} },
+    };
+    try {
+        for (var options_1 = tslib_1.__values(options), options_1_1 = options_1.next(); !options_1_1.done; options_1_1 = options_1.next()) {
+            var option = options_1_1.value;
+            var key = getOptionKey(option);
+            res.entities.byIdx[idx] = { option: option, key: key };
+            res.entities.byKey[key] = { option: option, idx: idx };
+            if (!getOptionDisabled(option))
+                res.idxs.push(idx);
+            idx += 1;
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (options_1_1 && !options_1_1.done && (_a = options_1.return)) _a.call(options_1);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
+    return res;
+}
+exports.normalizeOptions = normalizeOptions;

package/__inner__/cjs/components/AutocompleteNext/components/AutocompleteDropdown/index.d.ts

@@ -0,0 +1,3 @@
+export * from './AutocompleteDropdown';
+export * from './components';
+export * from './types';

package/__inner__/cjs/components/AutocompleteNext/components/AutocompleteDropdown/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./AutocompleteDropdown"), exports);
+tslib_1.__exportStar(require("./components"), exports);
+tslib_1.__exportStar(require("./types"), exports);

package/__inner__/cjs/components/AutocompleteNext/components/AutocompleteDropdown/types.d.ts

@@ -0,0 +1,45 @@
+import type { ReactNode, ReactElement, SyntheticEvent } from 'react';
+import type { FormElementSizeVariant } from '../../../../types/FormElementSizeVariant';
+import type { ListProps } from '../../../List';
+import type { PopoverProps, PopoverRef } from '../../../Popover';
+import type { AutocompletePropValue, AutocompletePropRenderOption, AutocompletePropGetOptionKey, AutocompleteDefaultOption, AutocompletePropGetOptionDisabled, AutocompletePropGetOptionLabel } from '../../index';
+export type AutocompleteDropdownRef = PopoverRef;
+export type AutocompleteDropdownOnChange<OPTION> = (e: SyntheticEvent | KeyboardEvent, value: OPTION | null) => void;
+export type AutocompleteDropdownProps<OPTION = AutocompleteDefaultOption, MULTIPLE extends boolean = false> = {
+    /** Имя списка */
+    name?: string;
+    /** Содержимое компонента */
+    children?: never;
+    /** Если {true} из списка можно выбрать несколько вариантов */
+    multiple?: MULTIPLE;
+    /** Список вариантов выбора (опции) */
+    options: OPTION[];
+    /** Размер */
+    size?: FormElementSizeVariant;
+    /** Выбранное значение опции */
+    value?: AutocompletePropValue<OPTION, MULTIPLE>;
+    /** Функция обратного вызова, которая будет вызвана при выборе значения */
+    onChange?: AutocompleteDropdownOnChange<OPTION>;
+    /** Функция для кастомизации отображения опции */
+    renderOption?: AutocompletePropRenderOption<OPTION>;
+    /** Функция для определения уникального ключа элемента */
+    getOptionKey: AutocompletePropGetOptionKey<OPTION>;
+    /** Функция для определения названия элемента */
+    getOptionLabel: AutocompletePropGetOptionLabel<OPTION>;
+    /** Функция для определения заблокированного элемента */
+    getOptionDisabled: AutocompletePropGetOptionDisabled<OPTION>;
+    /** Если {true} не показывает список с отсутствующими опциями */
+    disableShowEmptyOptionsList?: boolean;
+    /** Текст компонента в состоянии загрузки */
+    loadingText?: ReactNode;
+    /** Текст компонента при отсутствующих опций */
+    noOptionsText?: ReactNode;
+    /** Свойства компонента Popover */
+    popoverProps?: Partial<Omit<PopoverProps, 'children' | 'open' | 'anchorRef' | 'onClose' | 'className'>>;
+    /** Свойства компонента List */
+    listProps?: Partial<Omit<ListProps, 'children'>>;
+    loading?: boolean;
+    hasOptions?: boolean;
+    'data-testid'?: string;
+} & Pick<PopoverProps, 'open' | 'anchorRef' | 'onClose' | 'className' | 'setUpdate'>;
+export type AutocompleteDropdownComponent = <OPTION = AutocompleteDefaultOption, MULTIPLE extends boolean = false>(props: AutocompleteDropdownProps<OPTION, MULTIPLE>) => ReactElement | null;

package/__inner__/cjs/components/AutocompleteNext/components/AutocompleteDropdown/types.js

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

package/__inner__/cjs/components/AutocompleteNext/components/AutocompleteDropdown/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useDataListNavigation';
+export * from './useScrollContainerToElement';

package/__inner__/cjs/components/AutocompleteNext/components/AutocompleteDropdown/utils/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./useDataListNavigation"), exports);
+tslib_1.__exportStar(require("./useScrollContainerToElement"), exports);

package/__inner__/cjs/components/AutocompleteNext/components/AutocompleteDropdown/utils/useDataListNavigation.d.ts

@@ -0,0 +1,20 @@
+import type { MouseEvent } from 'react';
+export type UseListNavigationItem = string | number | null;
+export type UseListNavigationItems = UseListNavigationItem[];
+export type UseListNavigationProps = {
+    active?: boolean;
+    items?: UseListNavigationItems;
+    selected?: UseListNavigationItem;
+    onSelect?(event: KeyboardEvent | MouseEvent<HTMLElement>, item?: UseListNavigationItem): void;
+};
+export type UseListNavigationState = {
+    focused?: UseListNavigationItem;
+    current?: UseListNavigationItem;
+};
+export type UseListNavigationEvents = {
+    onKeyDown?(event: KeyboardEvent): void;
+    onClick?(event: MouseEvent<HTMLElement>, item: UseListNavigationItem): void;
+};
+export type UseListNavigationReturn = UseListNavigationState & UseListNavigationEvents;
+/** Навигация по элементам списка без перехвата фокуса с элемента контроля */
+export declare function useDataListNavigation({ selected, onSelect, active, items: itemsProps, }: UseListNavigationProps): UseListNavigationReturn;

package/__inner__/cjs/components/AutocompleteNext/components/AutocompleteDropdown/utils/useDataListNavigation.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDataListNavigation = void 0;
+var tslib_1 = require("tslib");
+var react_1 = require("react");
+var useMutableRef_1 = require("../../../../../hooks/useMutableRef");
+var getNextIndex_1 = require("../../../../../utils/getNextIndex");
+var getPrevIndex_1 = require("../../../../../utils/getPrevIndex");
+var isKey_1 = require("../../../../../utils/isKey");
+var isKeys_1 = require("../../../../../utils/isKeys");
+/** Навигация по элементам списка без перехвата фокуса с элемента контроля */
+function useDataListNavigation(_a) {
+    var selected = _a.selected, onSelect = _a.onSelect, _b = _a.active, active = _b === void 0 ? false : _b, itemsProps = _a.items;
+    var savedItems = (0, useMutableRef_1.useMutableRef)(itemsProps);
+    var savedSelected = (0, useMutableRef_1.useMutableRef)(selected);
+    var savedOnSelect = (0, useMutableRef_1.useMutableRef)(onSelect);
+    var _c = tslib_1.__read((0, react_1.useState)({}), 2), state = _c[0], setState = _c[1];
+    var findInItems = function (value) { var _a; return (_a = savedItems.current) === null || _a === void 0 ? void 0 : _a.find(function (item) { return item === value; }); };
+    (0, react_1.useEffect)(function () {
+        if (!active)
+            return;
+        setState(function (prevState) {
+            var _a, _b, _c;
+            return (tslib_1.__assign(tslib_1.__assign({}, prevState), { focused: (_a = findInItems(prevState.focused)) !== null && _a !== void 0 ? _a : null, current: (_b = findInItems(savedSelected.current)) !== null && _b !== void 0 ? _b : (_c = savedItems.current) === null || _c === void 0 ? void 0 : _c[0] }));
+        });
+    }, [itemsProps, active]);
+    // Сброс
+    (0, react_1.useEffect)(function () {
+        if (!active)
+            return undefined;
+        return function () {
+            setState({});
+        };
+    }, [active]);
+    var onClick = (0, react_1.useCallback)(function (event, item) {
+        var _a;
+        if (!active)
+            return;
+        var focused = item === state.focused ? item : null;
+        setState(tslib_1.__assign(tslib_1.__assign({}, state), { focused: focused, current: item }));
+        (_a = savedOnSelect.current) === null || _a === void 0 ? void 0 : _a.call(savedOnSelect, event, item);
+    }, [state.focused, active]);
+    var onKeyDown = (0, react_1.useCallback)(function (event) {
+        var _a, _b, _c, _d, _e, _f, _g;
+        if (!active || !(0, isKeys_1.isKeys)(event, ['Enter', 'ArrowUp', 'ArrowDown']))
+            return;
+        var current = (_a = state.focused) !== null && _a !== void 0 ? _a : state.current;
+        if ((0, isKey_1.isKey)(event, 'Enter')) {
+            // Не обрабатываем ввод в пустом списке
+            if (!((_b = savedItems.current) === null || _b === void 0 ? void 0 : _b.length))
+                return;
+            event.preventDefault();
+            setState(tslib_1.__assign(tslib_1.__assign({}, state), { current: current, focused: current }));
+            (_c = savedOnSelect.current) === null || _c === void 0 ? void 0 : _c.call(savedOnSelect, event, current);
+        }
+        if ((0, isKeys_1.isKeys)(event, ['ArrowUp', 'ArrowDown'])) {
+            event.preventDefault();
+            var currentIndex = typeof current !== 'undefined'
+                ? (_d = savedItems.current) === null || _d === void 0 ? void 0 : _d.indexOf(current)
+                : null;
+            var isArrowUp = (0, isKey_1.isKey)(event, 'ArrowUp');
+            var newIndex = isArrowUp
+                ? (0, getPrevIndex_1.getPrevIndex)(currentIndex !== null && currentIndex !== void 0 ? currentIndex : 0, ((_e = savedItems.current) === null || _e === void 0 ? void 0 : _e.length) || 0)
+                : (0, getNextIndex_1.getNextIndex)(currentIndex !== null && currentIndex !== void 0 ? currentIndex : -1, ((_f = savedItems.current) === null || _f === void 0 ? void 0 : _f.length) || 0);
+            var newItem = (_g = savedItems.current) === null || _g === void 0 ? void 0 : _g[newIndex];
+            setState(tslib_1.__assign(tslib_1.__assign({}, state), { focused: newItem }));
+        }
+    }, [state.focused, state.current, active]);
+    return tslib_1.__assign(tslib_1.__assign({}, state), { onClick: onClick, onKeyDown: onKeyDown });
+}
+exports.useDataListNavigation = useDataListNavigation;

package/__inner__/cjs/components/AutocompleteNext/components/AutocompleteDropdown/utils/useScrollContainerToElement.d.ts

@@ -0,0 +1,3 @@
+import type { RefObject } from 'react';
+import type { ScrollContainerToElement } from '../../../../../utils/scrollContainerToElement';
+export declare function useScrollContainerToElement(container: RefObject<HTMLElement>, element: RefObject<HTMLElement>, behavior?: ScrollContainerToElement['behavior']): void;

package/__inner__/cjs/components/AutocompleteNext/components/AutocompleteDropdown/utils/useScrollContainerToElement.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useScrollContainerToElement = void 0;
+var react_1 = require("react");
+var scrollContainerToElement_1 = require("../../../../../utils/scrollContainerToElement");
+function useScrollContainerToElement(container, element, behavior) {
+    (0, react_1.useEffect)(function () {
+        (0, scrollContainerToElement_1.scrollContainerToElement)({
+            container: container.current,
+            element: element.current,
+            behavior: behavior,
+        });
+    }, [container, element]);
+}
+exports.useScrollContainerToElement = useScrollContainerToElement;

package/__inner__/cjs/components/AutocompleteNext/components/AutocompleteInput/AutocompleteInput.d.ts

@@ -0,0 +1,2 @@
+import type { AutocompleteInputComponent } from './types';
+export declare const AutocompleteInput: AutocompleteInputComponent;

package/__inner__/cjs/components/AutocompleteNext/components/AutocompleteInput/AutocompleteInput.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AutocompleteInput = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var isNotNil_1 = require("../../../../utils/isNotNil");
+var Input_1 = require("../../../Input");
+var index_1 = require("../../index");
+var AutocompleteRenderRight_1 = require("../AutocompleteRenderRight");
+var components_1 = require("./components");
+var helpers_1 = require("./helpers");
+var AutocompleteInputRender = function (inProps, ref) {
+    var _a, _b;
+    var _c = inProps.size, size = _c === void 0 ? 'm' : _c, open = inProps.open, value = inProps.value, onOpen = inProps.onOpen, onClear = inProps.onClear, multiple = inProps.multiple, disabled = inProps.disabled, openText = inProps.openText, onRemoveTag = inProps.onRemoveTag, clearText = inProps.clearText, closeText = inProps.closeText, className = inProps.className, bodyProps = inProps.bodyProps, inputProps = inProps.inputProps, renderRight = inProps.renderRight, placeholder = inProps.placeholder, selectedOptions = inProps.selectedOptions, getOptionKey = inProps.getOptionKey, getOptionLabel = inProps.getOptionLabel, getOptionDisabled = inProps.getOptionDisabled, limitTags = inProps.limitTags, disableClearButton = inProps.disableClearButton, disableShowChevron = inProps.disableShowChevron, renderTag = inProps.renderTag, renderInputProp = inProps.renderInput, renderMoreTag = inProps.renderMoreTag, other = tslib_1.__rest(inProps, ["size", "open", "value", "onOpen", "onClear", "multiple", "disabled", "openText", "onRemoveTag", "clearText", "closeText", "className", "bodyProps", "inputProps", "renderRight", "placeholder", "selectedOptions", "getOptionKey", "getOptionLabel", "getOptionDisabled", "limitTags", "disableClearButton", "disableShowChevron", "renderTag", "renderInput", "renderMoreTag"]);
+    var hasValue = (0, helpers_1.isMultipleParams)(inProps)
+        ? !!((_a = inProps.selectedOptions) === null || _a === void 0 ? void 0 : _a.length)
+        : (0, isNotNil_1.isNotNil)(selectedOptions);
+    var selectedOptionsLength = (0, helpers_1.isMultipleParams)(inProps)
+        ? ((_b = inProps.selectedOptions) === null || _b === void 0 ? void 0 : _b.length) || 0
+        : 0;
+    var renderInputDefault = function (props, ref) { return (react_1.default.createElement(Input_1.Input, tslib_1.__assign({}, props, { ref: ref }))); };
+    var renderInput = renderInputProp || renderInputDefault;
+    var renderComponent = function (_a, ref) {
+        var className = _a.className, other = tslib_1.__rest(_a, ["className"]);
+        if ((0, helpers_1.isNotMultipleParams)(inProps)) {
+            return (react_1.default.createElement("input", tslib_1.__assign({}, other, { ref: ref, className: (0, index_1.cnAutocomplete)('Input', { multiple: multiple }, [className]) })));
+        }
+        if ((0, helpers_1.isMultipleParams)(inProps)) {
+            var selectedOptions_1 = inProps.selectedOptions;
+            return (react_1.default.createElement(components_1.AutocompleteInputMultiple, tslib_1.__assign({ renderTag: renderTag, limitTags: limitTags, onRemoveTag: onRemoveTag, getOptionKey: getOptionKey, renderMoreTag: renderMoreTag, getOptionLabel: getOptionLabel, getOptionDisabled: getOptionDisabled, selectedOptions: selectedOptions_1, ref: ref }, other)));
+        }
+        return null;
+    };
+    return renderInput(tslib_1.__assign({ size: size, disabled: disabled, value: value || '', placeholder: placeholder, renderRight: (react_1.default.createElement(AutocompleteRenderRight_1.AutocompleteRenderRight, { open: open, size: size, onOpen: onOpen, onClear: onClear, hasValue: hasValue, openText: openText, disabled: disabled, clearText: clearText, closeText: closeText, renderRight: renderRight, disableShowChevron: disableShowChevron, disableClearButton: disableClearButton })), labelProps: {
+            shrink: !!selectedOptionsLength,
+        }, inputProps: tslib_1.__assign(tslib_1.__assign({ autoComplete: 'off' }, inputProps), { renderComponent: renderComponent }), bodyProps: tslib_1.__assign({ 'aria-expanded': open }, bodyProps), className: (0, index_1.cnAutocomplete)({ size: size, multiple: multiple, hasChevron: !disableShowChevron }, [className]) }, other), ref);
+};
+exports.AutocompleteInput = (0, react_1.forwardRef)(AutocompleteInputRender);

package/__inner__/cjs/components/AutocompleteNext/components/AutocompleteInput/components/AutocompleteInputMultiple.d.ts

@@ -0,0 +1,2 @@
+import type { AutocompleteInputMultipleComponent } from './types';
+export declare const AutocompleteInputMultiple: AutocompleteInputMultipleComponent;