@ozen-ui/kit 0.33.0 → 0.34.0

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 {};

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

@@ -1,5 +1,6 @@
 import { __assign, __read } from "tslib";
-import { useEffect, useState, useRef, useCallback } from 'react';
+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';
@@ -7,19 +8,10 @@ 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 = useRef(itemsProps);
-    var savedSelected = useRef();
-    var savedOnSelect = useRef();
+    var savedItems = useMutableRef(itemsProps);
+    var savedSelected = useMutableRef(selected);
+    var savedOnSelect = useMutableRef(onSelect);
     var _c = __read(useState({}), 2), state = _c[0], setState = _c[1];
-    useEffect(function () {
-        savedItems.current = itemsProps;
-    }, [itemsProps]);
-    useEffect(function () {
-        savedOnSelect.current = onSelect;
-    }, [onSelect]);
-    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; }); };
     useEffect(function () {
         if (!active) {

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

@@ -4,13 +4,13 @@ import React from 'react';
 import { useThemeProps } from '../../hooks/useThemeProps';
 import { cn } from '../../utils/classname';
 import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWithRef';
-import { LIST_DEFAULT_SIZE, LIST_DEFAULT_TAG } from './constants';
+import { LIST_DEFAULT_SIZE, LIST_DEFAULT_TAG, LIST_DEFAULT_DISABLE_PADDING, } from './constants';
 import { ListContext } from './ListContext';
 export var cnList = cn('List');
 export var List = polymorphicComponentWithRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'List' });
-    var _a = props.as, Tag = _a === void 0 ? LIST_DEFAULT_TAG : _a, _b = props.size, size = _b === void 0 ? LIST_DEFAULT_SIZE : _b, children = props.children, className = props.className, other = __rest(props, ["as", "size", "children", "className"]);
+    var _a = props.as, Tag = _a === void 0 ? LIST_DEFAULT_TAG : _a, _b = props.size, size = _b === void 0 ? LIST_DEFAULT_SIZE : _b, _c = props.disablePadding, disablePadding = _c === void 0 ? LIST_DEFAULT_DISABLE_PADDING : _c, children = props.children, className = props.className, other = __rest(props, ["as", "size", "disablePadding", "children", "className"]);
     return (React.createElement(ListContext.Provider, { value: { size: size } },
-        React.createElement(Tag, __assign({ className: cnList({ size: size }, [className]) }, other, { ref: ref }), children)));
+        React.createElement(Tag, __assign({ className: cnList({ size: size, disablePadding: disablePadding }, [className]) }, other, { ref: ref }), children)));
 });
 List.displayName = 'List';

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

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

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

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

package/__inner__/esm/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__/esm/hooks/useEventListener/useEventListener.js

@@ -1,11 +1,9 @@
-import { useRef, useEffect, useCallback } from 'react';
+import { useEffect, useCallback } from 'react';
+import { useMutableRef } from '../../hooks/useMutableRef';
 /** Хук добавляющий обработчики событий и удаляющий их на выходе */
 export 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 = useRef();
-    useEffect(function () {
-        savedListener.current = handler;
-    }, [handler]);
+    var savedListener = useMutableRef(handler);
     var handleEventListener = useCallback(function (event) {
         var _a;
         (_a = savedListener.current) === null || _a === void 0 ? void 0 : _a.call(savedListener, event);

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

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

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

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

package/__inner__/esm/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__/esm/hooks/useMutableRef/useMutableRef.js

@@ -0,0 +1,6 @@
+import { useRef } from 'react';
+export function useMutableRef(value) {
+    var ref = useRef(value);
+    ref.current = value;
+    return ref;
+}

package/__inner__/esm/locale/locale.js

@@ -1,5 +1,12 @@
 export var ruRU = {
     defaultProps: {
+        Autocomplete: {
+            noOptionsText: 'Ничего не найдено',
+            closeText: 'Закрыть',
+            openText: 'Открыть',
+            clearText: 'Очистить',
+            loadingText: 'Загрузка…',
+        },
         Loader: {
             'aria-label': 'Загрузка',
         },
@@ -15,6 +22,13 @@ export var ruRU = {
 };
 export var kkKZ = {
     defaultProps: {
+        Autocomplete: {
+            noOptionsText: 'Ештеңе табылған жоқ',
+            closeText: 'Жабу',
+            openText: 'Ашу',
+            clearText: 'Тазалау',
+            loadingText: 'Жүктеу…',
+        },
         Loader: {
             'aria-label': 'Жүктеу',
         },
@@ -30,6 +44,13 @@ export var kkKZ = {
 };
 export var enUS = {
     defaultProps: {
+        Autocomplete: {
+            noOptionsText: 'No options',
+            closeText: 'Close',
+            openText: 'Open',
+            clearText: 'Clear',
+            loadingText: 'Loading…',
+        },
         Loader: {
             'aria-label': 'Loading',
         },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ozen-ui/kit",
-  "version": "0.33.0",
+  "version": "0.34.0",
   "description": "React component library",
   "files": [
     "*"

package/useMutableRef/package.json

@@ -0,0 +1,5 @@
+{
+	"main": "../__inner__/cjs/hooks/useMutableRef/index.js",
+	"module": "../__inner__/esm/hooks/useMutableRef/index.js",
+	"types": "../__inner__/esm/hooks/useMutableRef/index.d.ts"
+}