@ozen-ui/kit 0.56.0 → 0.58.0

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

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

package/__inner__/esm/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__/esm/components/AutocompleteNext/components/AutocompleteDropdown/components/AutocompleteDropdownCheckIcon/AutocompleteDropdownCheckIcon.js

@@ -0,0 +1,13 @@
+import './AutocompleteDropdownCheckIcon.css';
+import React from 'react';
+import { CheckIcon } from '@ozen-ui/icons';
+import { cn } from '../../../../../../utils/classname';
+import { getIconSizeToFormElement } from '../../../../../../utils/getIconSizeToFormElement';
+import { ListItemIcon, useListContext } from '../../../../../List';
+var cnAutocompleteDropdownCheckIcon = cn('AutocompleteDropdownCheckIcon');
+export var AutocompleteDropdownCheckIcon = function (_a) {
+    var selected = _a.selected;
+    var size = useListContext().size;
+    return (React.createElement(ListItemIcon, { className: cnAutocompleteDropdownCheckIcon({ selected: selected }) },
+        React.createElement(CheckIcon, { size: getIconSizeToFormElement(size) })));
+};

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

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

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

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

package/__inner__/esm/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__/esm/components/AutocompleteNext/components/AutocompleteDropdown/components/AutocompleteDropdownLoading/AutocompleteDropdownLoading.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { getIconSizeToFormElement } from '../../../../../../utils/getIconSizeToFormElement';
+import { isNumber } from '../../../../../../utils/isNumber';
+import { isString } from '../../../../../../utils/isString';
+import { ListItem, ListItemIcon, ListItemText } from '../../../../../List';
+import { Loader } from '../../../../../Loader';
+import { AUTOCOMPLETE_DEFAULT_SIZE } from '../../../../constants';
+export var AutocompleteDropdownLoading = function (_a) {
+    var _b = _a.size, sizeProp = _b === void 0 ? AUTOCOMPLETE_DEFAULT_SIZE : _b, showLoading = _a.showLoading, loadingText = _a.loadingText;
+    if (!showLoading) {
+        return null;
+    }
+    var size = getIconSizeToFormElement(sizeProp);
+    return isString(loadingText) || isNumber(loadingText) ? (React.createElement(ListItem, null,
+        React.createElement(ListItemIcon, null,
+            React.createElement(Loader, { size: size })),
+        React.createElement(ListItemText, { primary: loadingText }))) : (loadingText);
+};

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

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

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

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

package/__inner__/esm/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__/esm/components/AutocompleteNext/components/AutocompleteDropdown/components/AutocompleteDropdownNoOptions/AutocompleteDropdownNoOptions.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { isNumber } from '../../../../../../utils/isNumber';
+import { isString } from '../../../../../../utils/isString';
+import { ListItem, ListItemText } from '../../../../../List';
+export var AutocompleteDropdownNoOptions = function (_a) {
+    var showNoOptions = _a.showNoOptions, noOptionsText = _a.noOptionsText;
+    if (!showNoOptions) {
+        return null;
+    }
+    return isString(noOptionsText) || isNumber(noOptionsText) ? (React.createElement(ListItem, null,
+        React.createElement(ListItemText, { primary: noOptionsText }))) : (noOptionsText);
+};

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

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

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

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

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

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

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

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

package/__inner__/esm/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__/esm/components/AutocompleteNext/components/AutocompleteDropdown/constants.js

@@ -0,0 +1,3 @@
+export var AUTOCOMPLETE_DROPDOWN_DEFAULT_SIZE = 'm';
+export var AUTOCOMPLETE_DROPDOWN_DEFAULT_OPEN = false;
+export var AUTOCOMPLETE_DROPDOWN_OPTION_DEFAULT_DISABLED = false;

package/__inner__/esm/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__/esm/components/AutocompleteNext/components/AutocompleteDropdown/helpers.js

@@ -0,0 +1,30 @@
+import { __values } from "tslib";
+export var isMultipleParams = function (params) { return !!params.multiple; };
+export var isNotMultipleParams = function (params) { return !params.multiple; };
+export function normalizeOptions(options, getOptionKey, getOptionDisabled) {
+    var e_1, _a;
+    var idx = 0;
+    var res = {
+        idxs: [],
+        entities: { byIdx: {}, byKey: {} },
+    };
+    try {
+        for (var options_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;
+}

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

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

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

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

package/__inner__/esm/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__/esm/components/AutocompleteNext/components/AutocompleteDropdown/types.js

@@ -0,0 +1 @@
+export {};

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

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

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

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

package/__inner__/esm/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__/esm/components/AutocompleteNext/components/AutocompleteDropdown/utils/useDataListNavigation.js

@@ -0,0 +1,67 @@
+import { __assign, __read } from "tslib";
+import { useEffect, useState, useCallback } from 'react';
+import { useMutableRef } from '../../../../../hooks/useMutableRef';
+import { getNextIndex } from '../../../../../utils/getNextIndex';
+import { getPrevIndex } from '../../../../../utils/getPrevIndex';
+import { isKey } from '../../../../../utils/isKey';
+import { isKeys } from '../../../../../utils/isKeys';
+/** Навигация по элементам списка без перехвата фокуса с элемента контроля */
+export function useDataListNavigation(_a) {
+    var selected = _a.selected, onSelect = _a.onSelect, _b = _a.active, active = _b === void 0 ? false : _b, itemsProps = _a.items;
+    var savedItems = useMutableRef(itemsProps);
+    var savedSelected = useMutableRef(selected);
+    var savedOnSelect = useMutableRef(onSelect);
+    var _c = __read(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; }); };
+    useEffect(function () {
+        if (!active)
+            return;
+        setState(function (prevState) {
+            var _a, _b, _c;
+            return (__assign(__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]);
+    // Сброс
+    useEffect(function () {
+        if (!active)
+            return undefined;
+        return function () {
+            setState({});
+        };
+    }, [active]);
+    var onClick = useCallback(function (event, item) {
+        var _a;
+        if (!active)
+            return;
+        var focused = item === state.focused ? item : null;
+        setState(__assign(__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 = useCallback(function (event) {
+        var _a, _b, _c, _d, _e, _f, _g;
+        if (!active || !isKeys(event, ['Enter', 'ArrowUp', 'ArrowDown']))
+            return;
+        var current = (_a = state.focused) !== null && _a !== void 0 ? _a : state.current;
+        if (isKey(event, 'Enter')) {
+            // Не обрабатываем ввод в пустом списке
+            if (!((_b = savedItems.current) === null || _b === void 0 ? void 0 : _b.length))
+                return;
+            event.preventDefault();
+            setState(__assign(__assign({}, state), { current: current, focused: current }));
+            (_c = savedOnSelect.current) === null || _c === void 0 ? void 0 : _c.call(savedOnSelect, event, current);
+        }
+        if (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 = isKey(event, 'ArrowUp');
+            var newIndex = isArrowUp
+                ? getPrevIndex(currentIndex !== null && currentIndex !== void 0 ? currentIndex : 0, ((_e = savedItems.current) === null || _e === void 0 ? void 0 : _e.length) || 0)
+                : 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(__assign(__assign({}, state), { focused: newItem }));
+        }
+    }, [state.focused, state.current, active]);
+    return __assign(__assign({}, state), { onClick: onClick, onKeyDown: onKeyDown });
+}

package/__inner__/esm/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__/esm/components/AutocompleteNext/components/AutocompleteDropdown/utils/useScrollContainerToElement.js

@@ -0,0 +1,11 @@
+import { useEffect } from 'react';
+import { scrollContainerToElement } from '../../../../../utils/scrollContainerToElement';
+export function useScrollContainerToElement(container, element, behavior) {
+    useEffect(function () {
+        scrollContainerToElement({
+            container: container.current,
+            element: element.current,
+            behavior: behavior,
+        });
+    }, [container, element]);
+}

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

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

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

@@ -0,0 +1,35 @@
+import { __assign, __rest } from "tslib";
+import React, { forwardRef } from 'react';
+import { isNotNil } from '../../../../utils/isNotNil';
+import { Input } from '../../../Input';
+import { cnAutocomplete } from '../../index';
+import { AutocompleteRenderRight } from '../AutocompleteRenderRight';
+import { AutocompleteInputMultiple } from './components';
+import { isNotMultipleParams, isMultipleParams } from './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 = __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 = isMultipleParams(inProps)
+        ? !!((_a = inProps.selectedOptions) === null || _a === void 0 ? void 0 : _a.length)
+        : isNotNil(selectedOptions);
+    var selectedOptionsLength = isMultipleParams(inProps)
+        ? ((_b = inProps.selectedOptions) === null || _b === void 0 ? void 0 : _b.length) || 0
+        : 0;
+    var renderInputDefault = function (props, ref) { return (React.createElement(Input, __assign({}, props, { ref: ref }))); };
+    var renderInput = renderInputProp || renderInputDefault;
+    var renderComponent = function (_a, ref) {
+        var className = _a.className, other = __rest(_a, ["className"]);
+        if (isNotMultipleParams(inProps)) {
+            return (React.createElement("input", __assign({}, other, { ref: ref, className: cnAutocomplete('Input', { multiple: multiple }, [className]) })));
+        }
+        if (isMultipleParams(inProps)) {
+            var selectedOptions_1 = inProps.selectedOptions;
+            return (React.createElement(AutocompleteInputMultiple, __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(__assign({ size: size, disabled: disabled, value: value || '', placeholder: placeholder, renderRight: (React.createElement(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: __assign(__assign({ autoComplete: 'off' }, inputProps), { renderComponent: renderComponent }), bodyProps: __assign({ 'aria-expanded': open }, bodyProps), className: cnAutocomplete({ size: size, multiple: multiple, hasChevron: !disableShowChevron }, [className]) }, other), ref);
+};
+export var AutocompleteInput = forwardRef(AutocompleteInputRender);

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

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

package/__inner__/esm/components/AutocompleteNext/components/AutocompleteInput/components/AutocompleteInputMultiple.js

@@ -0,0 +1,109 @@
+import { __assign, __read, __rest } from "tslib";
+import React, { forwardRef, useState } from 'react';
+import { CrossSmallIcon } from '@ozen-ui/icons';
+import { useElementSize } from '../../../../../hooks/useElementSize';
+import { useIsomorphicEffect } from '../../../../../hooks/useIsomorphicEffect';
+import { isNumber } from '../../../../../utils/isNumber';
+import { Tag } from '../../../../TagNext';
+import { cnAutocomplete, } from '../../../index';
+import { calcElementSize, calcElementsSize, createMap, getAutocompleteSizeToTag, } from './helpers';
+var AutocompleteInputMultipleRender = function (inProps, ref) {
+    var _a = inProps.size, size = _a === void 0 ? 'm' : _a, value = inProps.value, placeholder = inProps.placeholder, selectedOptions = inProps.selectedOptions, onRemoveTag = inProps.onRemoveTag, renderTagProp = inProps.renderTag, renderMoreTagProp = inProps.renderMoreTag, getOptionKey = inProps.getOptionKey, getOptionLabel = inProps.getOptionLabel, getOptionDisabled = inProps.getOptionDisabled, limitTags = inProps.limitTags, other = __rest(inProps, ["size", "value", "placeholder", "selectedOptions", "onRemoveTag", "renderTag", "renderMoreTag", "getOptionKey", "getOptionLabel", "getOptionDisabled", "limitTags"]);
+    var selectedOptionsLength = (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) || 0;
+    var responsive = limitTags === 'responsive';
+    var hasLimitTags = isNumber(limitTags) && limitTags > 0;
+    var showMoreTag = !!selectedOptionsLength && (responsive || hasLimitTags);
+    var _b = __read(useState(), 2), visibleMap = _b[0], setVisibleMap = _b[1];
+    var omittedValues = selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.filter(function (_, i) { return !(visibleMap === null || visibleMap === void 0 ? void 0 : visibleMap[i]); });
+    var renderMoreTagDefault = function (_a, ref) {
+        var props = _a.props;
+        return React.createElement(Tag, __assign({ color: "neutral" }, props, { ref: ref }));
+    };
+    var renderMoreTag = renderMoreTagProp || renderMoreTagDefault;
+    var renderTagDefault = function (props, ref) { return (React.createElement(Tag, __assign({ color: "neutral" }, props, { ref: ref }))); };
+    var renderTag = renderTagProp || renderTagDefault;
+    var _c = useElementSize(), parentRef = _c.ref, parentSize = _c.width;
+    var moreTagSize = (parentRef === null || parentRef === void 0 ? void 0 : parentRef.current)
+        ? calcElementSize(parentRef === null || parentRef === void 0 ? void 0 : parentRef.current.children[selectedOptionsLength])
+        : 0;
+    var _d = useElementSize(), helperInputRef = _d.ref, _e = _d.width, helperInputSize = _e === void 0 ? 20 : _e;
+    var getInputSize = function () {
+        var inputSize = helperInputSize + 20;
+        if (responsive &&
+            (visibleMap === null || visibleMap === void 0 ? void 0 : visibleMap.filter(function (item) { return !item; }).length) === selectedOptionsLength) {
+            return inputSize > parentSize - moreTagSize
+                ? parentSize - moreTagSize
+                : inputSize;
+        }
+        return inputSize > parentSize ? parentSize : inputSize;
+    };
+    var inputSize = getInputSize();
+    useIsomorphicEffect(function () {
+        if ((!responsive && !isNumber(limitTags)) || !parentSize)
+            return;
+        var optionsLength = selectedOptionsLength;
+        var parentSizeWithoutInput = parentSize - inputSize;
+        var moreIndex = optionsLength;
+        var map = createMap(optionsLength + 1, moreIndex);
+        for (var i = 0; i < optionsLength + 1; i += 1) {
+            var index = moreIndex - i;
+            if (index !== moreIndex) {
+                var elementsSize = calcElementsSize(parentRef.current.children, map);
+                var condition = responsive
+                    ? elementsSize > parentSizeWithoutInput
+                    : isNumber(limitTags) && limitTags <= index;
+                if (condition) {
+                    map[index] = false;
+                    map[moreIndex] = true;
+                }
+            }
+        }
+        setVisibleMap(map);
+    }, [
+        limitTags,
+        inputSize,
+        parentSize,
+        selectedOptions,
+        selectedOptionsLength,
+    ]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { ref: parentRef, className: cnAutocomplete('Input', { responsive: responsive, multiple: true }) }, selectedOptions === null || selectedOptions === void 0 ? void 0 :
+            selectedOptions.map(function (option, index) {
+                var label = (getOptionLabel === null || getOptionLabel === void 0 ? void 0 : getOptionLabel(option)) || '';
+                var key = getOptionKey === null || getOptionKey === void 0 ? void 0 : getOptionKey(option);
+                var disabled = getOptionDisabled === null || getOptionDisabled === void 0 ? void 0 : getOptionDisabled(option);
+                return renderTag({
+                    key: key,
+                    label: label,
+                    size: getAutocompleteSizeToTag(size),
+                    className: cnAutocomplete('Tag', {
+                        hidden: (responsive || hasLimitTags) && !(visibleMap === null || visibleMap === void 0 ? void 0 : visibleMap[index]),
+                        disabled: disabled,
+                    }),
+                    iconRight: function (_a) {
+                        var size = _a.size;
+                        return (React.createElement("span", { "aria-hidden": "true", "data-testid": "clear-tag", className: cnAutocomplete('ClearTag'), onClick: function (e) {
+                                if (disabled)
+                                    return;
+                                e.preventDefault();
+                                onRemoveTag === null || onRemoveTag === void 0 ? void 0 : onRemoveTag(e, option);
+                            } },
+                            React.createElement(CrossSmallIcon, { size: size })));
+                    },
+                });
+            }),
+            showMoreTag &&
+                renderMoreTag({
+                    omittedValues: omittedValues,
+                    props: {
+                        label: "+".concat(visibleMap === null || visibleMap === void 0 ? void 0 : visibleMap.filter(function (item) { return !item; }).length),
+                        size: getAutocompleteSizeToTag(size),
+                        className: cnAutocomplete('Tag', {
+                            hidden: !(visibleMap === null || visibleMap === void 0 ? void 0 : visibleMap[selectedOptionsLength]),
+                        }),
+                    },
+                }),
+            React.createElement("input", __assign({}, other, { value: value, ref: ref, style: { width: inputSize }, placeholder: placeholder }))),
+        React.createElement("div", { className: cnAutocomplete('HelperInput'), ref: helperInputRef }, value || placeholder)));
+};
+export var AutocompleteInputMultiple = forwardRef(AutocompleteInputMultipleRender);

package/__inner__/esm/components/AutocompleteNext/components/AutocompleteInput/components/helpers.d.ts

@@ -0,0 +1,5 @@
+import type { AutocompletePropSize } from '../../../index';
+export declare const getAutocompleteSizeToTag: (size: AutocompletePropSize) => "s" | "m" | "l" | "2xs" | "xs";
+export declare function calcElementSize(el?: Element): number;
+export declare const calcElementsSize: (elements: Element[], map: boolean[]) => number;
+export declare const createMap: (length: number, moreIndex: number) => boolean[];

package/__inner__/esm/components/AutocompleteNext/components/AutocompleteInput/components/helpers.js

@@ -0,0 +1,29 @@
+import { getByMap } from '../../../../../utils/getByMap';
+var typeMap = {
+    '2xs': '2xs',
+    xs: '2xs',
+    s: '2xs',
+    m: 'xs',
+    l: 'xs',
+};
+export var getAutocompleteSizeToTag = function (size) {
+    return getByMap(typeMap, size);
+};
+export function calcElementSize(el) {
+    if (!el)
+        return 0;
+    var _a = getComputedStyle(el), marginRight = _a.marginRight, marginLeft = _a.marginLeft;
+    return (el.getBoundingClientRect().width +
+        parseInt(marginRight, 10) +
+        parseInt(marginLeft, 10));
+}
+export var calcElementsSize = function (elements, map) {
+    var sum = 0;
+    for (var index = 0; index < elements.length; index++) {
+        sum += map[index] ? calcElementSize(elements === null || elements === void 0 ? void 0 : elements[index]) : 0;
+    }
+    return sum;
+};
+export var createMap = function (length, moreIndex) {
+    return new Array(length).fill(0).map(function (_, index) { return index !== moreIndex; });
+};

package/__inner__/esm/components/AutocompleteNext/components/AutocompleteInput/components/index.d.ts

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

package/__inner__/esm/components/AutocompleteNext/components/AutocompleteInput/components/index.js

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

package/__inner__/esm/components/AutocompleteNext/components/AutocompleteInput/components/types.d.ts

@@ -0,0 +1,17 @@
+import type { ReactElement, Ref } from 'react';
+import type { InputProps } from '../../../../Input';
+import type { AutocompleteDefaultOption, AutocompletePropGetOptionDisabled, AutocompletePropGetOptionKey, AutocompletePropGetOptionLabel, AutocompletePropRenderMoreTag, AutocompletePropRenderTag, AutocompletePropValue } from '../../../index';
+import type { AutocompleteDropdownOnChange } from '../../index';
+export type AutocompleteInputMultipleRef = HTMLInputElement;
+export type AutocompleteInputMultipleProps<OPTION = AutocompleteDefaultOption> = Pick<InputProps, 'size' | 'value' | 'placeholder'> & {
+    getOptionLabel?: AutocompletePropGetOptionLabel<OPTION>;
+    getOptionKey?: AutocompletePropGetOptionKey<OPTION>;
+    getOptionDisabled?: AutocompletePropGetOptionDisabled<OPTION>;
+    onRemoveTag?: AutocompleteDropdownOnChange<OPTION>;
+    selectedOptions?: AutocompletePropValue<OPTION, true>;
+    renderTag?: AutocompletePropRenderTag;
+    renderMoreTag?: AutocompletePropRenderMoreTag<OPTION>;
+    limitTags?: 'responsive' | number;
+    ref?: Ref<AutocompleteInputMultipleRef>;
+};
+export type AutocompleteInputMultipleComponent = <OPTION = AutocompleteDefaultOption>(props: AutocompleteInputMultipleProps<OPTION>) => ReactElement | null;

package/__inner__/esm/components/AutocompleteNext/components/AutocompleteInput/components/types.js

@@ -0,0 +1 @@
+export {};

package/__inner__/esm/components/AutocompleteNext/components/AutocompleteInput/helpers.d.ts

@@ -0,0 +1,3 @@
+import type { AutocompleteInputProps } from './types';
+export declare const isMultipleParams: <OPTION>(params: AutocompleteInputProps<OPTION, boolean>) => params is AutocompleteInputProps<OPTION, true>;
+export declare const isNotMultipleParams: <OPTION>(params: AutocompleteInputProps<OPTION, boolean>) => params is AutocompleteInputProps<OPTION, false>;

package/__inner__/esm/components/AutocompleteNext/components/AutocompleteInput/index.d.ts

@@ -0,0 +1,2 @@
+export * from './AutocompleteInput';
+export * from './types';

package/__inner__/esm/components/AutocompleteNext/components/AutocompleteInput/index.js

@@ -0,0 +1,2 @@
+export * from './AutocompleteInput';
+export * from './types';

package/__inner__/esm/components/AutocompleteNext/components/AutocompleteInput/types.d.ts

@@ -0,0 +1,26 @@
+import type { ReactElement, Ref } from 'react';
+import type { InputProps, InputRef } from '../../../Input';
+import type { AutocompleteDefaultOption, AutocompletePropGetOptionKey, AutocompletePropGetOptionLabel, AutocompletePropValue, AutocompletePropRenderInput, AutocompletePropRenderTag, AutocompletePropRenderMoreTag, AutocompletePropGetOptionDisabled } from '../../index';
+import type { AutocompleteDropdownOnChange } from '../AutocompleteDropdown';
+import type { AutocompleteRenderRightProps } from '../AutocompleteRenderRight';
+export type AutocompleteInputRef = InputRef;
+export type AutocompleteInputProps<OPTION = AutocompleteDefaultOption, MULTIPLE extends boolean = false> = Pick<InputProps, 'size' | 'value' | 'disabled' | 'required' | 'onChange' | 'fullWidth' | 'onKeyDown' | 'className' | 'bodyProps' | 'inputProps' | 'renderRight' | 'placeholder'> & Pick<AutocompleteRenderRightProps, 'onOpen' | 'onClear'> & {
+    open?: boolean;
+    openText?: string;
+    closeText?: string;
+    clearText?: string;
+    multiple?: MULTIPLE;
+    disableShowChevron?: boolean;
+    disableClearButton?: boolean;
+    ref?: Ref<AutocompleteInputRef>;
+    limitTags?: 'responsive' | number;
+    renderTag?: AutocompletePropRenderTag;
+    renderInput?: AutocompletePropRenderInput;
+    onRemoveTag?: AutocompleteDropdownOnChange<OPTION>;
+    getOptionKey?: AutocompletePropGetOptionKey<OPTION>;
+    renderMoreTag?: AutocompletePropRenderMoreTag<OPTION>;
+    getOptionLabel?: AutocompletePropGetOptionLabel<OPTION>;
+    getOptionDisabled?: AutocompletePropGetOptionDisabled<OPTION>;
+    selectedOptions?: AutocompletePropValue<OPTION, MULTIPLE>;
+};
+export type AutocompleteInputComponent = <OPTION = AutocompleteDefaultOption, MULTIPLE extends boolean = false>(props: AutocompleteInputProps<OPTION, MULTIPLE>) => ReactElement | null;

package/__inner__/esm/components/AutocompleteNext/components/AutocompleteInput/types.js

@@ -0,0 +1 @@
+export {};