@ozen-ui/kit 0.33.0 → 0.34.1

package/__inner__/cjs/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 { DataListProps } 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<DataListProps, '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__/cjs/components/Autocomplete/types.js

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

package/__inner__/cjs/components/DataList/DataList.js

@@ -5,7 +5,6 @@ var tslib_1 = require("tslib");
 require("./DataList.css");
 var react_1 = tslib_1.__importStar(require("react"));
 var react_is_1 = require("react-is");
-var useBoolean_1 = require("../../hooks/useBoolean");
 var useControlled_1 = require("../../hooks/useControlled");
 var useEventListener_1 = require("../../hooks/useEventListener");
 var useMultiRef_1 = require("../../hooks/useMultiRef");
@@ -13,6 +12,7 @@ var useThemeProps_1 = require("../../hooks/useThemeProps");
 var classname_1 = require("../../utils/classname");
 var isKey_1 = require("../../utils/isKey");
 var polymorphicComponentWithRef_1 = require("../../utils/polymorphicComponentWithRef");
+var scrollContainerToElement_1 = require("../../utils/scrollContainerToElement");
 var List_1 = require("../List");
 var Popover_1 = require("../Popover");
 var constants_1 = require("./constants");
@@ -20,17 +20,15 @@ var helpers_1 = require("./helpers");
 var index_1 = require("./index");
 exports.cnDataList = (0, classname_1.cn)('DataList');
 var DataListRender = function (inProps, ref) {
-    var _a = (0, useThemeProps_1.useThemeProps)({ props: inProps, name: 'DataList' }), _b = _a.open, open = _b === void 0 ? constants_1.DATA_LIST_DEFAULT_OPEN : _b, _c = _a.size, size = _c === void 0 ? constants_1.DATA_LIST_DEFAULT_SIZE : _c, _d = _a.as, as = _d === void 0 ? constants_1.DATA_LIST_DEFAULT_TAG : _d, name = _a.name, children = _a.children, anchorRef = _a.anchorRef, selectedProp = _a.selected, defaultSelected = _a.defaultSelected, onClose = _a.onClose, onEnteredProp = _a.onEntered, onExitedProp = _a.onExited, listProps = _a.listProps, className = _a.className, other = tslib_1.__rest(_a, ["open", "size", "as", "name", "children", "anchorRef", "selected", "defaultSelected", "onClose", "onEntered", "onExited", "listProps", "className"]);
+    var _a = (0, useThemeProps_1.useThemeProps)({ props: inProps, name: 'DataList' }), _b = _a.open, open = _b === void 0 ? constants_1.DATA_LIST_DEFAULT_OPEN : _b, _c = _a.size, size = _c === void 0 ? constants_1.DATA_LIST_DEFAULT_SIZE : _c, _d = _a.as, as = _d === void 0 ? constants_1.DATA_LIST_DEFAULT_TAG : _d, name = _a.name, children = _a.children, anchorRef = _a.anchorRef, selectedProp = _a.selected, defaultSelected = _a.defaultSelected, onClose = _a.onClose, listProps = _a.listProps, className = _a.className, other = tslib_1.__rest(_a, ["open", "size", "as", "name", "children", "anchorRef", "selected", "defaultSelected", "onClose", "listProps", "className"]);
     var dataListRef = (0, react_1.useRef)(null);
     var listRef = (0, react_1.useRef)(null);
-    // Состояние представленного компонента с завершенной анимацией
-    var _e = tslib_1.__read((0, useBoolean_1.useBoolean)(false), 2), opened = _e[0], _f = _e[1], onEntered = _f.on, onExited = _f.off;
-    var _g = tslib_1.__read((0, useControlled_1.useControlled)({
+    var _e = tslib_1.__read((0, useControlled_1.useControlled)({
         name: 'DataList',
         defaultValue: defaultSelected,
         value: selectedProp,
         state: 'selected',
-    }), 2), selectedState = _g[0], setSelected = _g[1];
+    }), 2), selectedState = _e[0], setSelected = _e[1];
     var nodes = (0, react_1.useMemo)(function () { return new Map(); }, [children]);
     var items = (0, react_1.useMemo)(function () { return new Array(); }, [children]);
     var resolvedChildren = (0, react_is_1.isFragment)(children)
@@ -70,29 +68,34 @@ var DataListRender = function (inProps, ref) {
             setSelected_2(value);
         }
     };
+    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 _h = (0, helpers_1.useDataListNavigation)({
-        active: opened,
+    var _f = (0, helpers_1.useDataListNavigation)({
+        active: open,
         items: items,
         selected: (0, helpers_1.lastSelectedValue)(selectedState),
         onSelect: function (event, item) {
             handleSelect(event, item || '');
         },
-    }), current = _h.current, focused = _h.focused, onKeyDown = _h.onKeyDown, onClick = _h.onClick;
-    var _j = tslib_1.__read((0, react_1.useState)({ current: null }), 2), selectedElRef = _j[0], setSelectedElRef = _j[1];
+    }), current = _f.current, focused = _f.focused, onKeyDown = _f.onKeyDown, onClick = _f.onClick;
     (0, react_1.useEffect)(function () {
         var _a, _b;
         var selected = focused || current || '';
         // Находит элемент по ключу
         var idx = nodes.get(selected);
         if (idx !== undefined) {
-            setSelectedElRef({
-                current: (_b = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b[idx],
+            // Прокрутка списка
+            (0, scrollContainerToElement_1.scrollContainerToElement)({
+                container: dataListRef.current,
+                element: (_b = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b[idx],
+                behavior: focused ? 'smooth' : 'instant',
             });
         }
     }, [focused, current]);
-    // Прокрутка списка
-    (0, helpers_1.useScrollContainerToElement)(dataListRef, selectedElRef, focused ? 'smooth' : 'instant');
     // Назначает элементу контроля событие управления списком с клавиатуры
     (0, useEventListener_1.useEventListener)({
         eventName: 'keydown',
@@ -136,17 +139,7 @@ var DataListRender = function (inProps, ref) {
     }, [resolvedChildren, selectedState, focused, onClick]);
     return (react_1.default.createElement(Popover_1.Popover, tslib_1.__assign({ as: as, open: open, placement: "bottom-start", strategy: "absolute", disableReturnFocus: true, disableEnforceFocus: true, offset: [0, 4], onClose: onClose, anchorRef: anchorRef, className: (0, exports.cnDataList)('', [className]), transitionProps: {
             classNames: 'DataList-animation',
-        } }, other, { onEntered: function () {
-            onEntered();
-            onEnteredProp === null || onEnteredProp === void 0 ? void 0 : onEnteredProp();
-        }, onExited: function () {
-            onExited();
-            onExitedProp === null || onExitedProp === void 0 ? void 0 : onExitedProp();
-        }, ref: (0, useMultiRef_1.useMultiRef)([ref, dataListRef]) }),
-        react_1.default.createElement(List_1.List, tslib_1.__assign({ as: "ul", size: size }, listProps, { onMouseDown: 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);
-            }, ref: (0, useMultiRef_1.useMultiRef)([listRef, listProps === null || listProps === void 0 ? void 0 : listProps.ref]) }), renderChildren)));
+        } }, other, { ref: (0, useMultiRef_1.useMultiRef)([ref, dataListRef]) }),
+        react_1.default.createElement(List_1.List, tslib_1.__assign({ as: "ul", size: size }, listProps, { onMouseDown: handleOnMouseDownList, ref: (0, useMultiRef_1.useMultiRef)([listRef, listProps === null || listProps === void 0 ? void 0 : listProps.ref]) }), renderChildren)));
 };
 exports.DataList = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(DataListRender);

package/__inner__/cjs/components/DataList/helpers/useDataListNavigation.js

@@ -3,6 +3,7 @@ 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");
@@ -10,19 +11,10 @@ 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, react_1.useRef)(itemsProps);
-    var savedSelected = (0, react_1.useRef)();
-    var savedOnSelect = (0, react_1.useRef)();
+    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];
-    (0, react_1.useEffect)(function () {
-        savedItems.current = itemsProps;
-    }, [itemsProps]);
-    (0, react_1.useEffect)(function () {
-        savedOnSelect.current = onSelect;
-    }, [onSelect]);
-    (0, react_1.useEffect)(function () {
-        savedSelected.current = selected;
-    }, [selected]);
     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) {

package/__inner__/cjs/components/List/List.css

@@ -82,3 +82,8 @@
       --list-pipka-height: 48px;
       --list-pipka-width: 4px;
     }
+
+  .List_disablePadding,
+  .List:empty {
+    --list-gutter: 0;
+  }

package/__inner__/cjs/components/List/List.js

@@ -12,8 +12,8 @@ var ListContext_1 = require("./ListContext");
 exports.cnList = (0, classname_1.cn)('List');
 exports.List = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
     var props = (0, useThemeProps_1.useThemeProps)({ props: inProps, name: 'List' });
-    var _a = props.as, Tag = _a === void 0 ? constants_1.LIST_DEFAULT_TAG : _a, _b = props.size, size = _b === void 0 ? constants_1.LIST_DEFAULT_SIZE : _b, children = props.children, className = props.className, other = tslib_1.__rest(props, ["as", "size", "children", "className"]);
+    var _a = props.as, Tag = _a === void 0 ? constants_1.LIST_DEFAULT_TAG : _a, _b = props.size, size = _b === void 0 ? constants_1.LIST_DEFAULT_SIZE : _b, _c = props.disablePadding, disablePadding = _c === void 0 ? constants_1.LIST_DEFAULT_DISABLE_PADDING : _c, children = props.children, className = props.className, other = tslib_1.__rest(props, ["as", "size", "disablePadding", "children", "className"]);
     return (react_1.default.createElement(ListContext_1.ListContext.Provider, { value: { size: size } },
-        react_1.default.createElement(Tag, tslib_1.__assign({ className: (0, exports.cnList)({ size: size }, [className]) }, other, { ref: ref }), children)));
+        react_1.default.createElement(Tag, tslib_1.__assign({ className: (0, exports.cnList)({ size: size, disablePadding: disablePadding }, [className]) }, other, { ref: ref }), children)));
 });
 exports.List.displayName = 'List';

package/__inner__/cjs/components/List/constants.d.ts

@@ -1,4 +1,5 @@
 export declare const LIST_DEFAULT_SIZE = "m";
+export declare const LIST_DEFAULT_DISABLE_PADDING = false;
 export declare const LIST_DEFAULT_TAG = "ul";
 export declare const LIST_ITEM_DEFAULT_TAG = "li";
 export declare const LIST_ITEM_DEFAULT_ALIGN = "center";

package/__inner__/cjs/components/List/constants.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.LIST_ITEM_BUTTON_DEFAULT_ALIGN = exports.LIST_ITEM_BUTTON_DEFAULT_TAG = exports.LIST_ITEM_DEFAULT_ALIGN = exports.LIST_ITEM_DEFAULT_TAG = exports.LIST_DEFAULT_TAG = exports.LIST_DEFAULT_SIZE = void 0;
+exports.LIST_ITEM_BUTTON_DEFAULT_ALIGN = exports.LIST_ITEM_BUTTON_DEFAULT_TAG = exports.LIST_ITEM_DEFAULT_ALIGN = exports.LIST_ITEM_DEFAULT_TAG = exports.LIST_DEFAULT_TAG = exports.LIST_DEFAULT_DISABLE_PADDING = exports.LIST_DEFAULT_SIZE = void 0;
 exports.LIST_DEFAULT_SIZE = 'm';
+exports.LIST_DEFAULT_DISABLE_PADDING = false;
 exports.LIST_DEFAULT_TAG = 'ul';
 exports.LIST_ITEM_DEFAULT_TAG = 'li';
 exports.LIST_ITEM_DEFAULT_ALIGN = 'center';

package/__inner__/cjs/components/List/types.d.ts

@@ -11,6 +11,8 @@ export type ListBaseProps = {
     children?: ReactNode;
     /** Размер компонента */
     size?: ListSizeVariant;
+    /** Если {true} отключает боковые отступы */
+    disablePadding?: boolean;
     /** Идентификатор компонента для тестов */
     'data-testid'?: string;
 };

package/__inner__/cjs/components/ThemeProvider/types.d.ts

@@ -1,5 +1,6 @@
 import type { AccordionProps, AccordionSummaryProps } from '../Accordion';
 import type { AlertProps } from '../Alert';
+import type { AutocompleteProps } from '../Autocomplete';
 import type { AvatarProps } from '../Avatar';
 import type { BackdropProps } from '../Backdrop';
 import type { BadgeProps } from '../Badge';
@@ -64,6 +65,7 @@ export type Theme = {
         Accordion?: Partial<AccordionProps>;
         AccordionSummary?: Partial<AccordionSummaryProps>;
         Alert?: Partial<AlertProps>;
+        Autocomplete?: Partial<AutocompleteProps>;
         Avatar?: Partial<AvatarProps>;
         Backdrop?: Partial<BackdropProps>;
         Badge?: Partial<BadgeProps>;

package/__inner__/cjs/hooks/useEventListener/useEventListener.js

@@ -2,13 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useEventListener = void 0;
 var react_1 = require("react");
+var useMutableRef_1 = require("../../hooks/useMutableRef");
 /** Хук добавляющий обработчики событий и удаляющий их на выходе */
 function useEventListener(_a) {
     var eventName = _a.eventName, handler = _a.handler, element = _a.element, options = _a.options, _b = _a.active, active = _b === void 0 ? true : _b;
-    var savedListener = (0, react_1.useRef)();
-    (0, react_1.useEffect)(function () {
-        savedListener.current = handler;
-    }, [handler]);
+    var savedListener = (0, useMutableRef_1.useMutableRef)(handler);
     var handleEventListener = (0, react_1.useCallback)(function (event) {
         var _a;
         (_a = savedListener.current) === null || _a === void 0 ? void 0 : _a.call(savedListener, event);

package/__inner__/cjs/hooks/useMutableRef/index.d.ts

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

package/__inner__/cjs/hooks/useMutableRef/index.js

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

package/__inner__/cjs/hooks/useMutableRef/useMutableRef.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function useMutableRef<T>(value: T): import("react").MutableRefObject<T>;

package/__inner__/cjs/hooks/useMutableRef/useMutableRef.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMutableRef = void 0;
+var react_1 = require("react");
+function useMutableRef(value) {
+    var ref = (0, react_1.useRef)(value);
+    ref.current = value;
+    return ref;
+}
+exports.useMutableRef = useMutableRef;

package/__inner__/cjs/locale/locale.js

@@ -3,6 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.enUS = exports.kkKZ = exports.ruRU = void 0;
 exports.ruRU = {
     defaultProps: {
+        Autocomplete: {
+            noOptionsText: 'Ничего не найдено',
+            closeText: 'Закрыть',
+            openText: 'Открыть',
+            clearText: 'Очистить',
+            loadingText: 'Загрузка…',
+        },
         Loader: {
             'aria-label': 'Загрузка',
         },
@@ -18,6 +25,13 @@ exports.ruRU = {
 };
 exports.kkKZ = {
     defaultProps: {
+        Autocomplete: {
+            noOptionsText: 'Ештеңе табылған жоқ',
+            closeText: 'Жабу',
+            openText: 'Ашу',
+            clearText: 'Тазалау',
+            loadingText: 'Жүктеу…',
+        },
         Loader: {
             'aria-label': 'Жүктеу',
         },
@@ -33,6 +47,13 @@ exports.kkKZ = {
 };
 exports.enUS = {
     defaultProps: {
+        Autocomplete: {
+            noOptionsText: 'No options',
+            closeText: 'Close',
+            openText: 'Open',
+            clearText: 'Clear',
+            loadingText: 'Loading…',
+        },
         Loader: {
             'aria-label': 'Loading',
         },

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

@@ -0,0 +1,46 @@
+.Autocomplete {
+  --autocomplete-gutter-x: 0 var(--textfield-gutter-x);
+}
+
+  .Autocomplete_hasChevron.Autocomplete_size_2xs {
+      --autocomplete-gutter-x: 0 var(--control-padding-2xs) 0
+        var(--control-padding-xs);
+    }
+
+  .Autocomplete_hasChevron.Autocomplete_size_xs {
+      --autocomplete-gutter-x: 0 var(--control-padding-2xs) 0
+        var(--control-padding-xs);
+    }
+
+  .Autocomplete_hasChevron.Autocomplete_size_s {
+      --autocomplete-gutter-x: 0 var(--control-padding-2xs) 0
+        var(--control-padding-s);
+    }
+
+  .Autocomplete_hasChevron.Autocomplete_size_m {
+      --autocomplete-gutter-x: 0 var(--control-padding-2xs) 0
+        var(--control-padding-m);
+    }
+
+  .Autocomplete_hasChevron.Autocomplete_size_l {
+      --autocomplete-gutter-x: 0 var(--control-padding-2xs) 0
+        var(--control-padding-l);
+    }
+
+  .Autocomplete-RenderRight {
+    display: flex;
+    gap: var(--spacing-2xs);
+  }
+
+  .Autocomplete-ClearButton {
+    visibility: hidden;
+    transition: visibility var(--transition-default);
+  }
+
+  .Autocomplete-ClearButton_visibility {
+      visibility: visible;
+    }
+
+  .Autocomplete .Input-Body {
+    padding: var(--autocomplete-gutter-x);
+  }

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

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