@ozen-ui/kit 0.32.2 → 0.34.0

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

@@ -0,0 +1,199 @@
+import { __assign, __read, __rest, __spreadArray } from "tslib";
+import './Autocomplete.css';
+import React, { useEffect, useRef, forwardRef, useState } from 'react';
+import { useControlled } from '../../hooks/useControlled';
+import { useMutableRef } from '../../hooks/useMutableRef';
+import { useThemeProps } from '../../hooks/useThemeProps';
+import { cn } from '../../utils/classname';
+import { isKeys } from '../../utils/isKeys';
+import { DataList, DataListOption } from '../DataList';
+import { Input } from '../Input';
+import { AutocompleteLoading, AutocompleteNoOptions, AutocompleteRenderRight, } from './components';
+import { AUTOCOMPLETE_DEFAULT_SIZE, AUTOCOMPLETE_DEFAULT_DISABLED, AUTOCOMPLETE_DEFAULT_REQUIRED, AUTOCOMPLETE_DEFAULT_FULLWIDTH, AUTOCOMPLETE_DEFAULT_AUTOFOCUS, AUTOCOMPLETE_DEFAULT_ALLOW_CUSTOM_VALUE, AUTOCOMPLETE_DEFAULT_DISABLE_SHOW_CHEVRON, AUTOCOMPLETE_DEFAULT_DISABLE_CLEAR_BUTTON, AUTOCOMPLETE_DEFAULT_DISABLE_SHOW_EMPTY_OPTIONS_LIST, AUTOCOMPLETE_DEFAULT_DISABLE_CLOSE_ON_SELECT, } from './constants';
+import { withDefaultGetters } from './helper';
+export var cnAutocomplete = cn('Autocomplete');
+function AutocompleteRender(inProps, ref) {
+    var props = useThemeProps({
+        props: inProps,
+        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, 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, 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", "hint", "getOptionKey", "getOptionLabel", "getOptionDisabled", "dataListProps", "onClose", "onOpen", "open", "defaultOpen", "loading", "inputProps", "onKeyDown", "noOptionsText", "clearText", "openText", "loadingText", "closeText"]);
+    var anchorRef = useRef(null);
+    var _o = __read(useControlled({
+        value: inputValueProp,
+        defaultValue: '',
+        name: 'Autocomplete',
+        state: 'inputValue',
+    }), 2), inputValue = _o[0], setInputValue = _o[1];
+    var _p = __read(useControlled({
+        value: valueProp,
+        defaultValue: defaultValue,
+        name: 'Autocomplete',
+        state: 'value',
+    }), 2), valueState = _p[0], setValueState = _p[1];
+    var _q = __read(useControlled({
+        value: openProp,
+        defaultValue: defaultOpen,
+        name: 'Autocomplete',
+        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 dataListValue = valueState ? getOptionLabel(valueState) : '';
+    var hasOptions = !!(filteredOptions === null || filteredOptions === void 0 ? void 0 : filteredOptions.length);
+    var showNoOptions = !hasOptions && !loading;
+    var showLoading = !hasOptions && !!loading;
+    var _s = __read(useState(undefined), 2), search = _s[0], setSearch = _s[1];
+    /** Эффект – фильтрация списка */
+    useEffect(function () {
+        if (!open) {
+            return;
+        }
+        setFilteredOptions(search ? search(options) : __spreadArray([], __read(options), false));
+    }, [search, options, open, searchFunctionProp]);
+    /** Эффект – синхронизируем значение текстового поля со значением в списке */
+    useEffect(function () {
+        var _a, _b;
+        var value = valueState ? (_a = savedGetOptionLabel.current) === null || _a === void 0 ? void 0 : _a.call(savedGetOptionLabel, valueState) : '';
+        if (allowCustomValue) {
+            value = inputValue || '';
+        }
+        if (value !== inputValue) {
+            setInputValue(value);
+            (_b = savedOnInputChange.current) === null || _b === void 0 ? void 0 : _b.call(savedOnInputChange, null, value);
+        }
+    }, [valueState]);
+    /** Эффект – автофокусировка в текстовом поле */
+    useEffect(function () {
+        var _a;
+        if (autoFocus) {
+            (_a = anchorRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, [autoFocus]);
+    /** Актуализация значения текстового поля после его покидания */
+    var onBlur = function (e) {
+        var _a;
+        if (allowCustomValue) {
+            return;
+        }
+        var value = valueState ? getOptionLabel(valueState) : '';
+        if (inputValue !== value) {
+            setInputValue(value);
+            onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(null, value);
+        }
+        (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
+    };
+    /** Ждем выполнения анимации на закрытие и делаем сброс */
+    var onExited = function () {
+        var _a;
+        setSearch(undefined);
+        (_a = dataListProps === null || dataListProps === void 0 ? void 0 : dataListProps.onExited) === null || _a === void 0 ? void 0 : _a.call(dataListProps);
+    };
+    /** Закрытие */
+    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 onClear = function (e) {
+        setValueState(null);
+        setInputValue('');
+        onChange === null || onChange === void 0 ? void 0 : onChange(e, null);
+        onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(null, '');
+        setSearch(undefined);
+    };
+    /** Открытие списка по клику на текстовом поле */
+    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 (event) {
+        if (isKeys(event, ['ArrowDown', 'ArrowUp']) && !open) {
+            event.preventDefault();
+            handleToggle();
+        }
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+    };
+    /** Событие ввода значения в текстовом поле */
+    var handleChangeInput = function (e) {
+        var value = e.target.value;
+        // Открываем список при вводе первого символа (при условии, что список еще не открыт)
+        if (value.length && !open) {
+            handleOpen();
+        }
+        // Делаем сброс при пустом значении в текстовом поле
+        if (!value) {
+            setValueState(null);
+            onChange === null || onChange === void 0 ? void 0 : onChange(e, null);
+        }
+        // Назначаем значение
+        setInputValue(value);
+        onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(e, value);
+        // Задаем функцию фильтрации
+        setSearch(function () { return function (options) { return searchFunction(__spreadArray([], __read(options), false), value); }; });
+    };
+    /** Событие выбора значения из раскрывающегося списка */
+    var handleChangeDataList = function (event, _a) {
+        var value = _a.value;
+        var selectedOption = filteredOptions === null || filteredOptions === void 0 ? void 0 : filteredOptions.find(function (option) { return (getOptionLabel === null || getOptionLabel === void 0 ? void 0 : getOptionLabel(option)) === value; });
+        if (selectedOption) {
+            var newInputValue = getOptionLabel(selectedOption);
+            setValueState(selectedOption);
+            onChange === null || onChange === void 0 ? void 0 : onChange(event, selectedOption);
+            setInputValue(newInputValue);
+            onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(null, newInputValue);
+        }
+        // Закрываем список после выбора
+        if (!disableCloseOnSelect) {
+            handleClose();
+        }
+    };
+    /** Отображение текстового поля */
+    var input = renderInput(__assign(__assign({ size: size, hint: hint, disabled: disabled, label: label, required: required, error: error, fullWidth: fullWidth, placeholder: placeholder, renderLeft: renderLeft }, other), { renderRight: (React.createElement(AutocompleteRenderRight, { open: open, size: size, disabled: disabled, clearText: clearText, closeText: closeText, openText: openText, hasValue: !!inputValue, onClear: onClear, onOpen: handleToggle, disableShowChevron: disableShowChevron, disableClearButton: disableClearButton })), onChange: handleChangeInput, onKeyDown: handleKeyDown, value: inputValue || '', inputProps: __assign(__assign({}, inputProps), { onBlur: onBlur, onClick: handleClickOnInput }), bodyProps: { ref: anchorRef, 'aria-expanded': open }, className: cnAutocomplete({ size: size, hasChevron: !disableShowChevron }, [
+            className,
+        ]), ref: ref }));
+    /** Отображение опций */
+    var renderOptions = filteredOptions === null || filteredOptions === void 0 ? void 0 : filteredOptions.map(function (option) {
+        var selected = valueState
+            ? getOptionLabel(valueState) === getOptionLabel(option)
+            : false;
+        var renderOptionDefault = function (_a) {
+            var option = _a.option, selected = _a.selected;
+            return (React.createElement(DataListOption, { key: getOptionKey === null || getOptionKey === void 0 ? void 0 : getOptionKey(option), label: getOptionLabel === null || getOptionLabel === void 0 ? void 0 : getOptionLabel(option), value: getOptionLabel === null || getOptionLabel === void 0 ? void 0 : getOptionLabel(option), disabled: getOptionDisabled === null || getOptionDisabled === void 0 ? void 0 : getOptionDisabled(option), selected: selected }));
+        };
+        var renderOption = renderOptionProp || renderOptionDefault;
+        return renderOption({ option: option, selected: selected });
+    });
+    return (React.createElement(React.Fragment, null,
+        input,
+        React.createElement(DataList, __assign({ size: size, equalAnchorWidth: true, offset: [0, 4], placement: "bottom-start" }, dataListProps, { open: open, onExited: onExited, onClose: handleClose, anchorRef: anchorRef, selected: dataListValue, onSelect: handleChangeDataList, listProps: __assign({ role: 'listbox' }, dataListProps === null || dataListProps === void 0 ? void 0 : dataListProps.listProps) }),
+            renderOptions,
+            !disableShowEmptyOptionsList && (React.createElement(AutocompleteNoOptions, { showNoOptions: showNoOptions, noOptionsText: noOptionsText })),
+            React.createElement(AutocompleteLoading, { showLoading: showLoading, loadingText: loadingText, size: size }))));
+}
+export var Autocomplete = forwardRef(AutocompleteRender);

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

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

package/__inner__/esm/components/Autocomplete/components/AutocompleteLoading/AutocompleteLoading.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 AutocompleteLoading = 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/Autocomplete/components/AutocompleteLoading/index.d.ts

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

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

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

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

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

package/__inner__/esm/components/Autocomplete/components/AutocompleteNoOptions/AutocompleteNoOptions.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 AutocompleteNoOptions = 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/Autocomplete/components/AutocompleteNoOptions/index.d.ts

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

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

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

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

@@ -0,0 +1,10 @@
+import type { FC } from 'react';
+import React from 'react';
+import type { AutocompleteProps } from '../../index';
+type AutocompleteRenderRightProps = {
+    onOpen: () => void;
+    onClear: (e: React.MouseEvent<HTMLElement>) => void;
+    hasValue: boolean;
+} & Pick<AutocompleteProps, 'clearText' | 'closeText' | 'openText' | 'size' | 'disabled' | 'open' | 'disableClearButton' | 'disableShowChevron'>;
+export declare const AutocompleteRenderRight: FC<AutocompleteRenderRightProps>;
+export {};

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

@@ -0,0 +1,22 @@
+import { __read } from "tslib";
+import React from 'react';
+import { ChevronDownIcon, ChevronUpIcon, CloseIcon } from '@ozen-ui/icons';
+import { useFieldControl } from '../../../FieldControl';
+import { IconButton } from '../../../IconButton';
+import { cnAutocomplete } from '../../index';
+export var AutocompleteRenderRight = function (_a) {
+    var disableClearButton = _a.disableClearButton, disableShowChevron = _a.disableShowChevron, clearText = _a.clearText, closeText = _a.closeText, openText = _a.openText, disabled = _a.disabled, hasValue = _a.hasValue, onClear = _a.onClear, onOpen = _a.onOpen, open = _a.open, size = _a.size;
+    var _b = __read(useFieldControl(), 1), _c = _b[0], focused = _c.focused, hovered = _c.hovered;
+    var isVisibleClearButton = !!(hovered || open || focused) && hasValue;
+    return (React.createElement("div", { className: cnAutocomplete('RenderRight') },
+        !disableClearButton && (React.createElement(IconButton, { type: "button", variant: "function", tabIndex: -1, onClick: function (e) {
+                e.preventDefault();
+                onClear === null || onClear === void 0 ? void 0 : onClear(e);
+            }, className: cnAutocomplete('ClearButton', {
+                visibility: isVisibleClearButton,
+            }), title: clearText, "aria-label": clearText, size: size, icon: CloseIcon, compressed: true })),
+        !disableShowChevron && (React.createElement(IconButton, { type: "button", variant: "ghost", tabIndex: -1, onClick: function (e) {
+                e.preventDefault();
+                onOpen();
+            }, disabled: disabled, title: open ? closeText : openText, "aria-label": open ? closeText : openText, size: size, icon: open ? ChevronUpIcon : ChevronDownIcon, compressed: true }))));
+};

package/__inner__/esm/components/Autocomplete/components/AutocompleteRenderRight/index.d.ts

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

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

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

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

@@ -0,0 +1,3 @@
+export * from './AutocompleteRenderRight';
+export * from './AutocompleteNoOptions';
+export * from './AutocompleteLoading';

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

@@ -0,0 +1,3 @@
+export * from './AutocompleteRenderRight';
+export * from './AutocompleteNoOptions';
+export * from './AutocompleteLoading';

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

@@ -0,0 +1,10 @@
+export declare const AUTOCOMPLETE_DEFAULT_DISABLED = false;
+export declare const AUTOCOMPLETE_DEFAULT_REQUIRED = false;
+export declare const AUTOCOMPLETE_DEFAULT_AUTOFOCUS = false;
+export declare const AUTOCOMPLETE_DEFAULT_FULLWIDTH = false;
+export declare const AUTOCOMPLETE_DEFAULT_ALLOW_CUSTOM_VALUE = false;
+export declare const AUTOCOMPLETE_DEFAULT_DISABLE_SHOW_CHEVRON = false;
+export declare const AUTOCOMPLETE_DEFAULT_DISABLE_SHOW_EMPTY_OPTIONS_LIST = false;
+export declare const AUTOCOMPLETE_DEFAULT_DISABLE_CLOSE_ON_SELECT = false;
+export declare const AUTOCOMPLETE_DEFAULT_DISABLE_CLEAR_BUTTON = false;
+export declare const AUTOCOMPLETE_DEFAULT_SIZE = "m";

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

@@ -0,0 +1,10 @@
+export var AUTOCOMPLETE_DEFAULT_DISABLED = false;
+export var AUTOCOMPLETE_DEFAULT_REQUIRED = false;
+export var AUTOCOMPLETE_DEFAULT_AUTOFOCUS = false;
+export var AUTOCOMPLETE_DEFAULT_FULLWIDTH = false;
+export var AUTOCOMPLETE_DEFAULT_ALLOW_CUSTOM_VALUE = false;
+export var AUTOCOMPLETE_DEFAULT_DISABLE_SHOW_CHEVRON = false;
+export var AUTOCOMPLETE_DEFAULT_DISABLE_SHOW_EMPTY_OPTIONS_LIST = false;
+export var AUTOCOMPLETE_DEFAULT_DISABLE_CLOSE_ON_SELECT = false;
+export var AUTOCOMPLETE_DEFAULT_DISABLE_CLEAR_BUTTON = false;
+export var AUTOCOMPLETE_DEFAULT_SIZE = 'm';

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

@@ -0,0 +1,166 @@
+/// <reference types="react" />
+import type { AutocompleteDefaultOption, AutocompletePropGetOptionDisabled, AutocompletePropGetOptionKey, AutocompletePropGetOptionLabel, AutocompleteProps } from './types';
+export declare const defaultGetOptionKey: AutocompletePropGetOptionKey<AutocompleteDefaultOption>;
+export declare const defaultGetOptionLabel: AutocompletePropGetOptionLabel<AutocompleteDefaultOption>;
+export declare const defaultGetOptionDisabled: AutocompletePropGetOptionDisabled<AutocompleteDefaultOption>;
+export declare function withDefaultGetters<OPTION>(props: AutocompleteProps<OPTION>): ({
+    options: OPTION[];
+    size?: "s" | "m" | "l" | "2xs" | "xs" | undefined;
+    value?: import("./types").AutocompletePropValue<OPTION>;
+    defaultValue?: import("./types").AutocompletePropValue<OPTION>;
+    onChange?: ((e: KeyboardEvent | import("react").SyntheticEvent<Element, Event>, value: OPTION | null) => void) | undefined;
+    inputValue?: string | undefined;
+    onInputChange?: ((e: import("react").ChangeEvent<HTMLInputElement> | null, value: string) => void) | undefined;
+    renderInput?: import("./types").AutocompleteRenderInput | undefined;
+    renderOption?: import("./types").AutocompletePropRenderOption<OPTION> | undefined;
+    getOptionLabel?: AutocompletePropGetOptionLabel<OPTION> | undefined;
+    getOptionKey?: AutocompletePropGetOptionKey<OPTION> | undefined;
+    getOptionDisabled?: AutocompletePropGetOptionDisabled<OPTION> | undefined;
+    disableCloseOnSelect?: boolean | undefined;
+    allowCustomValue?: boolean | undefined;
+    loading?: boolean | undefined;
+    noOptionsText?: import("react").ReactNode;
+    clearText?: string | undefined;
+    openText?: string | undefined;
+    closeText?: string | undefined;
+    loadingText?: import("react").ReactNode;
+    onClose?: (() => void) | undefined;
+    onOpen?: (() => void) | undefined;
+    disableClearButton?: boolean | undefined;
+    searchFunction?: import("./types").AutocompleteSearchFunction<OPTION> | undefined;
+    disableShowEmptyOptionsList?: boolean | undefined;
+    disableShowChevron?: boolean | undefined;
+    dataListProps?: Partial<Omit<import("../DataList").DataListBaseProps, "onSelect" | "open" | "onClose" | "multiple" | "selected" | "anchorRef">> | undefined;
+} & {
+    label?: string | undefined;
+    style?: import("react").CSSProperties | undefined;
+    className?: string | undefined;
+    onKeyDown?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    autoFocus?: boolean | undefined;
+    placeholder?: string | undefined;
+    disabled?: boolean | undefined;
+    required?: boolean | undefined;
+    error?: boolean | undefined;
+    fullWidth?: boolean | undefined;
+    hint?: string | null | undefined;
+    renderLeft?: string | number | import("react").FC<import("react").SVGProps<SVGSVGElement> & {
+        color?: string | undefined;
+        ref?: import("react").Ref<SVGSVGElement> | undefined;
+    } & {
+        size?: import("@ozen-ui/icons").IconSize | undefined;
+    }> | import("react").ReactElement<import("react").SVGProps<SVGSVGElement> & {
+        color?: string | undefined;
+        ref?: import("react").Ref<SVGSVGElement> | undefined;
+    } & {
+        size?: import("@ozen-ui/icons").IconSize | undefined;
+    }, string | import("react").JSXElementConstructor<any>> | (() => import("react").ReactElement<import("react").SVGProps<SVGSVGElement> & {
+        color?: string | undefined;
+        ref?: import("react").Ref<SVGSVGElement> | undefined;
+    } & {
+        size?: import("@ozen-ui/icons").IconSize | undefined;
+    }, 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;
+} & {
+    open?: boolean | undefined;
+    defaultOpen?: undefined;
+} & (OPTION extends {
+    label: string;
+} ? Record<string, unknown> : {
+    getOptionLabel?: AutocompletePropGetOptionLabel<OPTION> | undefined;
+}) & (OPTION extends {
+    id: string | number;
+} ? Record<string, unknown> : {
+    getOptionKey?: AutocompletePropGetOptionKey<OPTION> | undefined;
+}) & (OPTION extends {
+    id: boolean | undefined;
+} ? Record<string, unknown> : {
+    getOptionDisabled?: AutocompletePropGetOptionKey<OPTION> | undefined;
+}) & {
+    getOptionLabel: AutocompletePropGetOptionLabel<AutocompleteDefaultOption> | AutocompletePropGetOptionLabel<OPTION>;
+    getOptionKey: AutocompletePropGetOptionKey<AutocompleteDefaultOption> | AutocompletePropGetOptionKey<OPTION>;
+    getOptionDisabled: AutocompletePropGetOptionDisabled<AutocompleteDefaultOption> | AutocompletePropGetOptionDisabled<OPTION>;
+}) | ({
+    options: OPTION[];
+    size?: "s" | "m" | "l" | "2xs" | "xs" | undefined;
+    value?: import("./types").AutocompletePropValue<OPTION>;
+    defaultValue?: import("./types").AutocompletePropValue<OPTION>;
+    onChange?: ((e: KeyboardEvent | import("react").SyntheticEvent<Element, Event>, value: OPTION | null) => void) | undefined;
+    inputValue?: string | undefined;
+    onInputChange?: ((e: import("react").ChangeEvent<HTMLInputElement> | null, value: string) => void) | undefined;
+    renderInput?: import("./types").AutocompleteRenderInput | undefined;
+    renderOption?: import("./types").AutocompletePropRenderOption<OPTION> | undefined;
+    getOptionLabel?: AutocompletePropGetOptionLabel<OPTION> | undefined;
+    getOptionKey?: AutocompletePropGetOptionKey<OPTION> | undefined;
+    getOptionDisabled?: AutocompletePropGetOptionDisabled<OPTION> | undefined;
+    disableCloseOnSelect?: boolean | undefined;
+    allowCustomValue?: boolean | undefined;
+    loading?: boolean | undefined;
+    noOptionsText?: import("react").ReactNode;
+    clearText?: string | undefined;
+    openText?: string | undefined;
+    closeText?: string | undefined;
+    loadingText?: import("react").ReactNode;
+    onClose?: (() => void) | undefined;
+    onOpen?: (() => void) | undefined;
+    disableClearButton?: boolean | undefined;
+    searchFunction?: import("./types").AutocompleteSearchFunction<OPTION> | undefined;
+    disableShowEmptyOptionsList?: boolean | undefined;
+    disableShowChevron?: boolean | undefined;
+    dataListProps?: Partial<Omit<import("../DataList").DataListBaseProps, "onSelect" | "open" | "onClose" | "multiple" | "selected" | "anchorRef">> | undefined;
+} & {
+    label?: string | undefined;
+    style?: import("react").CSSProperties | undefined;
+    className?: string | undefined;
+    onKeyDown?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    autoFocus?: boolean | undefined;
+    placeholder?: string | undefined;
+    disabled?: boolean | undefined;
+    required?: boolean | undefined;
+    error?: boolean | undefined;
+    fullWidth?: boolean | undefined;
+    hint?: string | null | undefined;
+    renderLeft?: string | number | import("react").FC<import("react").SVGProps<SVGSVGElement> & {
+        color?: string | undefined;
+        ref?: import("react").Ref<SVGSVGElement> | undefined;
+    } & {
+        size?: import("@ozen-ui/icons").IconSize | undefined;
+    }> | import("react").ReactElement<import("react").SVGProps<SVGSVGElement> & {
+        color?: string | undefined;
+        ref?: import("react").Ref<SVGSVGElement> | undefined;
+    } & {
+        size?: import("@ozen-ui/icons").IconSize | undefined;
+    }, string | import("react").JSXElementConstructor<any>> | (() => import("react").ReactElement<import("react").SVGProps<SVGSVGElement> & {
+        color?: string | undefined;
+        ref?: import("react").Ref<SVGSVGElement> | undefined;
+    } & {
+        size?: import("@ozen-ui/icons").IconSize | undefined;
+    }, 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;
+} & {
+    open?: undefined;
+    defaultOpen?: boolean | undefined;
+} & (OPTION extends {
+    label: string;
+} ? Record<string, unknown> : {
+    getOptionLabel?: AutocompletePropGetOptionLabel<OPTION> | undefined;
+}) & (OPTION extends {
+    id: string | number;
+} ? Record<string, unknown> : {
+    getOptionKey?: AutocompletePropGetOptionKey<OPTION> | undefined;
+}) & (OPTION extends {
+    id: boolean | undefined;
+} ? Record<string, unknown> : {
+    getOptionDisabled?: AutocompletePropGetOptionKey<OPTION> | undefined;
+}) & {
+    getOptionLabel: AutocompletePropGetOptionLabel<AutocompleteDefaultOption> | AutocompletePropGetOptionLabel<OPTION>;
+    getOptionKey: AutocompletePropGetOptionKey<AutocompleteDefaultOption> | AutocompletePropGetOptionKey<OPTION>;
+    getOptionDisabled: AutocompletePropGetOptionDisabled<AutocompleteDefaultOption> | AutocompletePropGetOptionDisabled<OPTION>;
+});

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

@@ -0,0 +1,7 @@
+import { __assign } from "tslib";
+export var defaultGetOptionKey = function (option) { var _a; return (_a = option.id) !== null && _a !== void 0 ? _a : option; };
+export var defaultGetOptionLabel = function (option) { var _a; return (_a = option.label) !== null && _a !== void 0 ? _a : option; };
+export var defaultGetOptionDisabled = function (option) { var _a; return (_a = option.disabled) !== null && _a !== void 0 ? _a : false; };
+export function withDefaultGetters(props) {
+    return __assign(__assign({}, props), { getOptionLabel: props.getOptionLabel || defaultGetOptionLabel, getOptionKey: props.getOptionKey || defaultGetOptionKey, getOptionDisabled: props.getOptionDisabled || defaultGetOptionDisabled });
+}

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

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

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

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

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

@@ -0,0 +1,105 @@
+import type { SyntheticEvent, ChangeEvent, ReactElement, ReactNode } from 'react';
+import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
+import type { DataListBaseProps } from '../DataList';
+import type { InputProps } from '../Input';
+export type AutocompleteRenderOptionProps<OPTION> = {
+    option: OPTION;
+    selected: boolean;
+};
+export type AutocompletePropValue<OPTION> = OPTION | null | undefined;
+export type AutocompletePropGetOptionLabel<OPTION> = (option: OPTION) => string;
+export type AutocompletePropGetOptionKey<OPTION> = (option: OPTION) => string | number;
+export type AutocompletePropRenderValue<OPTION> = (value: OPTION) => ReactNode | null;
+export type AutocompletePropGetOptionDisabled<OPTION> = (option: OPTION) => boolean | undefined;
+export type AutocompletePropRenderOption<OPTION> = (props: AutocompleteRenderOptionProps<OPTION>) => ReactElement | null;
+export type AutocompleteDefaultOption = {
+    id: string | number;
+    label: string;
+    disabled?: boolean;
+};
+export type AutocompleteSearchFunction<OPTION> = (options: OPTION[], searchValue: string) => OPTION[];
+export type AutocompleteRenderInput = (props: InputProps) => ReactNode;
+type AutocompleteOpenControlledProps = {
+    /** Текущее состояние списка. Если `true`, список отображается. */
+    open?: boolean;
+    /** Состояние открытие по умолчанию (неконтролируемый компонент) */
+    defaultOpen?: never;
+};
+type AutocompleteOpenUncontrolledProps = {
+    /** Текущее состояние списка. Если `true`, список отображается. */
+    open?: never;
+    /** Состояние открытие по умолчанию (неконтролируемый компонент) */
+    defaultOpen?: boolean;
+};
+type AutocompleteInputProps = Pick<InputProps, 'placeholder' | 'autoFocus' | 'fullWidth' | 'disabled' | 'label' | 'required' | 'style' | 'error' | 'hint' | 'renderLeft' | 'className' | 'inputProps' | 'onKeyDown'>;
+type AutocompleteDataListProps = Partial<Omit<DataListBaseProps, 'onClose' | 'open' | 'anchorRef' | 'multiple' | 'selected' | 'onSelect'>>;
+export type AutocompleteProps<OPTION = AutocompleteDefaultOption> = {
+    /** Список вариантов выбора (опции) */
+    options: OPTION[];
+    /** Размер */
+    size?: FormElementSizeVariant;
+    /** Выбранное значение опции */
+    value?: AutocompletePropValue<OPTION>;
+    /** Выбранное значение опции по умолчанию */
+    defaultValue?: AutocompletePropValue<OPTION>;
+    /** Функция обратного вызова, которая будет вызвана при выборе значения */
+    onChange?: (e: SyntheticEvent | KeyboardEvent, value: OPTION | null) => void;
+    /** Введённое значение в текстовом поле */
+    inputValue?: string;
+    /** Функция обратного вызова, которая будет вызвана при вводе значения с клавиатуры */
+    onInputChange?: (e: ChangeEvent<HTMLInputElement> | null, value: string) => void;
+    /** Функция для кастомизации текстового поля */
+    renderInput?: AutocompleteRenderInput;
+    /** Функция для кастомизации отображения опции */
+    renderOption?: AutocompletePropRenderOption<OPTION>;
+    /** Функция для определения названия элемента */
+    getOptionLabel?: AutocompletePropGetOptionLabel<OPTION>;
+    /** Функция для определения уникального ключа элемента */
+    getOptionKey?: AutocompletePropGetOptionKey<OPTION>;
+    /** Функция для определения заблокированного элемента */
+    getOptionDisabled?: AutocompletePropGetOptionDisabled<OPTION>;
+    /** Если {true} не закрывает выпадающий список при выборе опции */
+    disableCloseOnSelect?: boolean;
+    /** Если {true} позволяет вводить кастомное значение в текстовом поле */
+    allowCustomValue?: boolean;
+    /** Если {true} отображает статус загрузки (при условии отсутствующих опций) */
+    loading?: boolean;
+    /** Текст компонента при отсутствующих опций */
+    noOptionsText?: ReactNode;
+    /** Текст для кнопки очистки поля */
+    clearText?: string;
+    /** Текст для кнопки открытия выпадающего списка */
+    openText?: string;
+    /** Текст для кнопки закрытия выпадающего списка */
+    closeText?: string;
+    /** Текст компонента в состоянии загрузки */
+    loadingText?: ReactNode;
+    /** Функция обратного вызова, которая будет вызвана когда компонент запрашивает закрытие */
+    onClose?: () => void;
+    /** Функция обратного вызова, которая будет вызвана когда компонент запрашивает открытие */
+    onOpen?: () => void;
+    /** Если {true}, то не отображает кнопку закрытия */
+    disableClearButton?: boolean;
+    /** Функция поиска */
+    searchFunction?: AutocompleteSearchFunction<OPTION>;
+    /** Если {true} не показывает список с отсутствующими опциями */
+    disableShowEmptyOptionsList?: boolean;
+    /** Если {true} скрывает кнопку раскрытия/скрытия списка */
+    disableShowChevron?: boolean;
+    /** Свойства компонента DataList */
+    dataListProps?: AutocompleteDataListProps;
+} & AutocompleteInputProps & (AutocompleteOpenControlledProps | AutocompleteOpenUncontrolledProps) & (OPTION extends {
+    label: AutocompleteDefaultOption['label'];
+} ? Record<string, unknown> : {
+    getOptionLabel?: AutocompletePropGetOptionLabel<OPTION>;
+}) & (OPTION extends {
+    id: AutocompleteDefaultOption['id'];
+} ? Record<string, unknown> : {
+    getOptionKey?: AutocompletePropGetOptionKey<OPTION>;
+}) & (OPTION extends {
+    id: AutocompleteDefaultOption['disabled'];
+} ? Record<string, unknown> : {
+    getOptionDisabled?: AutocompletePropGetOptionKey<OPTION>;
+});
+export type AutocompleteComponent = <OPTION = AutocompleteDefaultOption>(props: AutocompleteProps<OPTION>) => ReactElement | null;
+export {};

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

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