@ozen-ui/kit 0.16.1 → 0.17.0-canary.0

package/__inner__/esm/components/Select/components/SelectInput/SelectInput.js

@@ -1,39 +1,40 @@
-import { __assign, __rest } from "tslib";
+import { __assign, __read, __rest } from "tslib";
 import '../../Select.css';
-import React, { forwardRef, useRef } from 'react';
+import React, { forwardRef, useCallback } from 'react';
 import { classnames } from '@bem-react/classnames';
 import { ChevronDownIcon } from '@ozen-ui/icons';
-import { useMultiRef } from '../../../../hooks/useMultiRef';
+import { useBoolean } from '../../../../hooks/useBoolean';
+import { FieldControl } from '../../../FieldControl';
 import { FieldHint } from '../../../FieldHint';
 import { FieldIcon } from '../../../FieldIcon';
 import { FieldLabel } from '../../../FieldLabel';
 import { Fieldset } from '../../../Fieldset';
+import { SELECT_DEFAULT_MULTILINE, SELECT_DEFAULT_SIZE } from '../../constants';
 import { cnSelect } from '../../index';
+import { SelectInputConsumer } from '../SelectConsumer';
 export var SelectInput = forwardRef(function (_a, ref) {
-    var _b = _a.size, size = _b === void 0 ? 'm' : _b, _c = _a.multiline, multiline = _c === void 0 ? false : _c, label = _a.label, error = _a.error, id = _a.id, name = _a.name, renderLeft = _a.renderLeft, renderRight = _a.renderRight, inputRef = _a.inputRef, fieldRef = _a.fieldRef, fullWidth = _a.fullWidth, disabled = _a.disabled, hint = _a.hint, required = _a.required, className = _a.className, inputProps = _a.inputProps, valueProp = _a.value, defaultValue = _a.defaultValue, onFocus = _a.onFocus, onBlur = _a.onBlur, onKeyDown = _a.onKeyDown, labelRef = _a.labelRef, labelProps = _a.labelProps, fieldProps = _a.fieldProps, onClick = _a.onClick, focused = _a.focused, placeholderProp = _a.placeholder, renderedValue = _a.renderedValue, bodyProps = _a.bodyProps, bodyRefProp = _a.bodyRef, open = _a.open, other = __rest(_a, ["size", "multiline", "label", "error", "id", "name", "renderLeft", "renderRight", "inputRef", "fieldRef", "fullWidth", "disabled", "hint", "required", "className", "inputProps", "value", "defaultValue", "onFocus", "onBlur", "onKeyDown", "labelRef", "labelProps", "fieldProps", "onClick", "focused", "placeholder", "renderedValue", "bodyProps", "bodyRef", "open"]);
-    var bodyRef = useRef(null);
-    var filled = focused || !!valueProp;
-    var hasLabel = !!label;
-    var placeholder = (focused || !hasLabel) && !valueProp && placeholderProp;
-    return (React.createElement("div", __assign({}, other, { className: cnSelect({
-            fullWidth: fullWidth,
-            size: size,
-            error: error,
-            disabled: disabled,
-            required: required,
-            hasLabel: hasLabel,
+    var _b = _a.size, size = _b === void 0 ? SELECT_DEFAULT_SIZE : _b, _c = _a.multiline, multiline = _c === void 0 ? SELECT_DEFAULT_MULTILINE : _c, open = _a.open, label = _a.label, error = _a.error, id = _a.id, name = _a.name, renderLeft = _a.renderLeft, renderRight = _a.renderRight, renderedValue = _a.renderedValue, fullWidth = _a.fullWidth, disabled = _a.disabled, hint = _a.hint, required = _a.required, className = _a.className, inputProps = _a.inputProps, valueProp = _a.value, placeholderProp = _a.placeholder, defaultValue = _a.defaultValue, onFocus = _a.onFocus, onBlur = _a.onBlur, onClick = _a.onClick, onKeyDown = _a.onKeyDown, labelProps = _a.labelProps, fieldProps = _a.fieldProps, labelRef = _a.labelRef, inputRef = _a.inputRef, fieldRef = _a.fieldRef, bodyProps = _a.bodyProps, other = __rest(_a, ["size", "multiline", "open", "label", "error", "id", "name", "renderLeft", "renderRight", "renderedValue", "fullWidth", "disabled", "hint", "required", "className", "inputProps", "value", "placeholder", "defaultValue", "onFocus", "onBlur", "onClick", "onKeyDown", "labelProps", "fieldProps", "labelRef", "inputRef", "fieldRef", "bodyProps"]);
+    var _d = __read(useBoolean(), 2), focused = _d[0], _e = _d[1], on = _e.on, off = _e.off;
+    var filled = !!valueProp || valueProp === 0;
+    var handleFocus = useCallback(function (e) {
+        on();
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
+    }, [onFocus]);
+    var handleBlur = useCallback(function (e) {
+        off();
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+    }, [onBlur]);
+    return (React.createElement(FieldControl, __assign({ error: error, size: size, filled: filled, focused: focused, disabled: disabled, fullWidth: fullWidth, required: required }, other, { className: cnSelect({
             multiline: multiline,
-            focused: focused,
         }, [className]), ref: ref }),
-        React.createElement("div", __assign({ tabIndex: disabled ? -1 : 0, role: "button", onClick: onClick, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, "aria-haspopup": "listbox", "aria-expanded": open }, bodyProps, { className: cnSelect('Body', [bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.className]), ref: useMultiRef([bodyRef, bodyRefProp]) }),
-            React.createElement(FieldIcon, { className: cnSelect('RenderLeft'), icon: renderLeft, size: size }),
+        React.createElement("div", __assign({ role: "button", "aria-haspopup": "listbox", "aria-expanded": open }, bodyProps, { onClick: onClick, onKeyDown: onKeyDown, tabIndex: disabled ? -1 : 0, onFocus: handleFocus, onBlur: handleBlur, className: cnSelect('Body', [bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.className]) }),
+            React.createElement(FieldIcon, { icon: renderLeft, className: cnSelect('RenderLeft') }),
             React.createElement("div", { className: cnSelect('FieldContainer') },
-                label && (React.createElement(FieldLabel, __assign({ filled: filled, focused: focused, required: required, disabled: disabled, size: size }, labelProps, { className: cnSelect('Label', [labelProps === null || labelProps === void 0 ? void 0 : labelProps.className]), ref: labelRef }), label)),
-                React.createElement("div", __assign({}, fieldProps, { className: cnSelect('Field', { filled: filled, asPlaceholder: !!placeholder }, [fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.className]), ref: fieldRef }), placeholder || renderedValue),
-                React.createElement("input", __assign({ id: id, name: name, defaultValue: defaultValue, value: valueProp, disabled: disabled, required: required, tabIndex: -1, "aria-hidden": true, readOnly: true }, inputProps, { className: cnSelect('Input', [inputProps === null || inputProps === void 0 ? void 0 : inputProps.className]), ref: inputRef }))),
-            React.createElement(FieldIcon, { className: cnSelect('RenderRight'), icon: renderRight, size: size }),
-            React.createElement(FieldIcon, { className: classnames(cnSelect('RenderRight'), cnSelect('DropDownIcon', { open: open })), icon: ChevronDownIcon, size: size }),
+                React.createElement(FieldLabel, __assign({}, labelProps, { className: cnSelect('Label', [labelProps === null || labelProps === void 0 ? void 0 : labelProps.className]), ref: (labelProps === null || labelProps === void 0 ? void 0 : labelProps.ref) || labelRef }), label),
+                React.createElement(SelectInputConsumer, { id: id, name: name, value: valueProp, defaultValue: defaultValue, placeholder: placeholderProp, fieldProps: fieldProps, inputProps: inputProps, fieldRef: (fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.ref) || fieldRef, inputRef: (inputProps === null || inputProps === void 0 ? void 0 : inputProps.ref) || inputRef, renderedValue: renderedValue })),
+            React.createElement(FieldIcon, { icon: renderRight, className: cnSelect('RenderRight') }),
+            React.createElement(FieldIcon, { icon: ChevronDownIcon, className: classnames(cnSelect('RenderRight'), cnSelect('DropDownIcon', { open: open })) }),
             React.createElement(Fieldset, { className: cnSelect('Fieldset') })),
-        React.createElement(FieldHint, { size: size, error: error, disabled: disabled }, hint)));
+        React.createElement(FieldHint, null, hint)));
 });
 SelectInput.displayName = 'SelectInput';

package/__inner__/esm/components/Select/components/SelectInput/index.d.ts

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

package/__inner__/esm/components/Select/components/SelectInput/index.js

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

package/__inner__/esm/components/Select/components/SelectInput/types.d.ts

@@ -0,0 +1,89 @@
+import type { Ref, ReactNode, ComponentPropsWithRef } from 'react';
+import type { FormElementSizeVariant } from '../../../../types/FormElementSizeVariant';
+import type { FieldIconProps } from '../../../FieldIcon';
+import type { FieldLabelProps } from '../../../FieldLabel';
+export type SelectInputSizeVariant = FormElementSizeVariant;
+type LabelProps = FieldLabelProps;
+type InputProps = ComponentPropsWithRef<'input'> & {
+    'data-testid'?: string;
+};
+type BodyProps = ComponentPropsWithRef<'div'> & {
+    'data-testid'?: string;
+};
+type FieldProps = ComponentPropsWithRef<'div'> & {
+    'data-testid'?: string;
+};
+type SelectInputPropsDeprecated = {
+    /**
+     * Ссылка на Field
+     * @deprecated Используйте fieldProps.ref
+     * */
+    fieldRef?: Ref<HTMLDivElement>;
+    /**
+     * Ссылка на элемент input
+     * @deprecated Используйте inputProps.ref
+     * */
+    inputRef?: Ref<HTMLInputElement>;
+    /**
+     * Ссылка на FieldLabel
+     * @deprecated Используйте labelProps.ref
+     * */
+    labelRef?: FieldLabelProps['ref'];
+    /**
+     * Ссылка на Body
+     * @deprecated Используйте bodyProps.ref
+     * */
+    bodyRef?: Ref<HTMLDivElement>;
+};
+export type SelectInputProps = Omit<ComponentPropsWithRef<'div'>, 'value' | 'defaultValue' | 'onChange'> & {
+    /** Атрибут id для элемента input */
+    id?: string;
+    /** Атрибут name для элемента input */
+    name?: string;
+    /** Лейбл */
+    label?: string;
+    /** Размер компонента */
+    size?: SelectInputSizeVariant;
+    /** Подсказка. Отображается, когда вариант не выбран */
+    placeholder?: string;
+    /** Если {true} устанавливает автофокус */
+    autoFocus?: boolean;
+    /** Если {true} переводит поле в состояние ошибки */
+    error?: boolean;
+    /** Если {true} растягивает поле на всю ширину */
+    fullWidth?: boolean;
+    /** Дополнительное описание к полю */
+    hint?: string | null | undefined;
+    /** Если {true} делает элемент неактивным */
+    disabled?: boolean;
+    /** Если {true} делает элемент обязательным к заполнению */
+    required?: boolean;
+    /** Если {true} предотвращает сокращение текста в значении и
+     * задает гибкую высоту контейнера компонента */
+    multiline?: boolean;
+    /** Текст или иконка слева */
+    renderLeft?: FieldIconProps['icon'];
+    /** Текст или иконка справа */
+    renderRight?: FieldIconProps['icon'];
+    /** Значение для отображения */
+    renderedValue?: ReactNode;
+    /** Выбранное значение */
+    value?: InputProps['value'];
+    /** Значение умолчанию (неконтролируемый компонент) */
+    defaultValue?: InputProps['defaultValue'];
+    /** Свойства Field */
+    fieldProps?: FieldProps;
+    /** Свойства элемента input */
+    inputProps?: InputProps;
+    /** Свойства FieldLabel */
+    labelProps?: LabelProps;
+    /** Свойства Body */
+    bodyProps?: BodyProps;
+    /** Признак раскрытого списка */
+    open?: boolean;
+    /** Идентификатор компонента для тестов */
+    'data-testid'?: string;
+    /** Содержимое компонента */
+    children?: never;
+} & SelectInputPropsDeprecated;
+export {};

package/__inner__/esm/components/Select/components/SelectInput/types.js

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

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

@@ -1,2 +1 @@
 export * from './SelectInput';
-export * from './SelectCheckIcon';

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

@@ -1,2 +1 @@
 export * from './SelectInput';
-export * from './SelectCheckIcon';

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

@@ -4,4 +4,4 @@ export declare const SELECT_DEFAULT_DISABLED = false;
 export declare const SELECT_DEFAULT_REQUIRED = false;
 export declare const SELECT_DEFAULT_MULTILINE = false;
 export declare const SELECT_DEFAULT_DEFAULT_OPEN = false;
-export declare const SELECT_DEFAULT_AUTO_SIZE = "m";
+export declare const SELECT_DEFAULT_SIZE = "m";

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

@@ -4,4 +4,4 @@ export var SELECT_DEFAULT_DISABLED = false;
 export var SELECT_DEFAULT_REQUIRED = false;
 export var SELECT_DEFAULT_MULTILINE = false;
 export var SELECT_DEFAULT_DEFAULT_OPEN = false;
-export var SELECT_DEFAULT_AUTO_SIZE = 'm';
+export var SELECT_DEFAULT_SIZE = 'm';

package/__inner__/esm/components/Select/helpers/index.d.ts

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

package/__inner__/esm/components/Select/helpers/index.js

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

package/__inner__/esm/components/Select/helpers/types.d.ts

@@ -0,0 +1,8 @@
+import type { SelectPropLabel, SelectProps, SelectPropValue } from '../types';
+export type SelectedParams<MULTIPLE extends boolean = false> = {
+    multiple: SelectProps<MULTIPLE>['multiple'];
+    value?: SelectPropValue<MULTIPLE>;
+    label?: SelectPropLabel<MULTIPLE>;
+};
+export declare const isMultipleParams: (params: SelectedParams<boolean>) => params is SelectedParams<true>;
+export declare const isNotMultipleParams: (params: SelectedParams<boolean>) => params is SelectedParams<false>;

package/__inner__/esm/components/Select/helpers/types.js

@@ -0,0 +1,2 @@
+export var isMultipleParams = function (params) { return !!params.multiple; };
+export var isNotMultipleParams = function (params) { return !params.multiple; };

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

@@ -1,3 +1,4 @@
-export { MenuItem as Option, MenuItemText as OptionItemText, MenuItemIcon as OptionItemIcon, } from '../Menu';
+export { DataListOption as Option } from '../DataList';
+export { ListItemText as OptionItemText, ListItemIcon as OptionItemIcon, } from '../List';
 export * from './Select';
 export * from './types';

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

@@ -1,3 +1,4 @@
-export { MenuItem as Option, MenuItemText as OptionItemText, MenuItemIcon as OptionItemIcon, } from '../Menu';
+export { DataListOption as Option } from '../DataList';
+export { ListItemText as OptionItemText, ListItemIcon as OptionItemIcon, } from '../List';
 export * from './Select';
 export * from './types';

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

@@ -1,15 +1,17 @@
-import type { HTMLAttributes, SyntheticEvent, ReactNode } from 'react';
+import type { SyntheticEvent, ReactNode, ReactElement, ComponentPropsWithRef } from 'react';
 import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
-import type { MenuProps } from '../Menu';
+import type { DataListBaseProps, DataListSelected } from '../DataList';
 import type { SelectInputProps } from './components';
 export type SelectSizeVariant = FormElementSizeVariant;
-export type SelectPropLabel = string;
-export type SelectPropValue = string | number | undefined;
-export type SelectedOptionProp = {
-    label?: SelectPropLabel;
-    value?: SelectPropValue;
+export type SelectLabel = string | number | undefined;
+export type SelectPropLabel<MULTIPLE extends boolean> = (MULTIPLE extends true ? SelectLabel[] : SelectLabel) | undefined;
+export type SelectValue = string | number | undefined;
+export type SelectPropValue<MULTIPLE extends boolean> = DataListSelected<MULTIPLE>;
+export type SelectedOptionProp<MULTIPLE extends boolean> = {
+    label?: SelectPropLabel<MULTIPLE>;
+    value?: SelectPropValue<MULTIPLE>;
 };
-export type SelectRenderValue = (option: SelectedOptionProp) => ReactNode | null;
+export type SelectRenderValue<MULTIPLE extends boolean> = (option: SelectedOptionProp<MULTIPLE>) => ReactNode | null;
 type SelectOpenControlledProps = {
     /** Текущее состояние списка. Если `true`, список отображается. */
     open?: boolean;
@@ -22,37 +24,48 @@ type SelectOpenUncontrolledProps = {
     /** Состояние открытие по умолчанию (неконтролируемый компонент) */
     defaultOpen: boolean;
 };
-type SelectControlledProps = {
+type SelectControlledProps<MULTIPLE extends boolean = false> = {
     /** Выбранное значение */
-    value?: SelectPropValue;
+    value?: SelectPropValue<MULTIPLE>;
     /** Обработчик события на изменение выбранного значения */
-    onChange?: (value: SelectPropValue, e: SyntheticEvent) => void;
+    onChange?: (value: SelectPropValue<MULTIPLE>, e: SyntheticEvent | KeyboardEvent) => void;
     /** Значение поля по умолчанию (неконтролируемый компонент) */
     defaultValue?: never;
 };
-type SelectUncontrolledProps = {
+type SelectUncontrolledProps<MULTIPLE extends boolean = false> = {
     /** Значение поля по умолчанию (неконтролируемый компонент) */
-    defaultValue: SelectPropValue;
+    defaultValue: SelectPropValue<MULTIPLE>;
     /** Выбранное значение */
     value?: never;
     /** Обработчик события на изменение выбранного значения */
     onChange?: never;
 };
-export type SelectProps = {
+type SelectPropsDeprecated<MULTIPLE extends boolean = false> = {
+    /**
+     * Свойства компонента Menu
+     * @deprecated Используйте dataListProps
+     * */
+    menuProps?: Partial<Omit<DataListBaseProps<MULTIPLE>, 'onClose' | 'open' | 'anchorRef' | 'multiple' | 'selected' | 'onSelect'>>;
+};
+export type SelectProps<MULTIPLE extends boolean = false> = {
     /** Если {true} устанавливает автофокус */
     autoFocus?: boolean;
     /** Размер компонента */
     size?: SelectSizeVariant;
     /** Рендер-функция для выбранного значения */
-    renderValue?: SelectRenderValue;
+    renderValue?: SelectRenderValue<MULTIPLE>;
     /** Содержимое компонента */
     children?: ReactNode;
-    /** Свойства компонента Menu */
-    menuProps?: Omit<MenuProps, 'onClose' | 'open' | 'anchorRef'>;
+    /** Свойства компонента DataList */
+    dataListProps?: Partial<Omit<DataListBaseProps<MULTIPLE>, 'onClose' | 'open' | 'anchorRef' | 'multiple' | 'selected' | 'onSelect'>>;
     /** Функция обратного вызова, которая будет вызвана когда компонент запрашивает закрытие */
     onClose?: () => void;
     /** Функция обратного вызова, которая будет вызвана когда компонент запрашивает открытие */
     onOpen?: () => void;
+    /** Если {true} из списка можно выбрать несколько вариантов */
+    multiple?: MULTIPLE;
+    /** Идентификатор компонента для тестов */
     'data-testid'?: string;
-} & Pick<SelectInputProps, 'id' | 'name' | 'inputProps' | 'inputRef' | 'label' | 'placeholder' | 'disabled' | 'required' | 'error' | 'hint' | 'fullWidth' | 'renderLeft' | 'renderRight' | 'multiline' | 'labelProps' | 'labelRef'> & Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> & (SelectControlledProps | SelectUncontrolledProps) & (SelectOpenControlledProps | SelectOpenUncontrolledProps);
+} & Pick<SelectInputProps, 'id' | 'name' | 'label' | 'placeholder' | 'disabled' | 'required' | 'error' | 'hint' | 'fullWidth' | 'renderLeft' | 'renderRight' | 'multiline' | 'inputProps' | 'labelProps' | 'bodyProps' | 'inputRef' | 'labelRef' | 'bodyRef'> & Omit<ComponentPropsWithRef<'div'>, 'onChange' | 'defaultValue'> & SelectPropsDeprecated<MULTIPLE> & (SelectControlledProps<MULTIPLE> | SelectUncontrolledProps<MULTIPLE>) & (SelectOpenControlledProps | SelectOpenUncontrolledProps);
+export type SelectComponent = <MULTIPLE extends boolean = false>(props: SelectProps<MULTIPLE>) => ReactElement | null;
 export {};

package/__inner__/esm/components/Textarea/Textarea.js

@@ -12,7 +12,7 @@ export var Textarea = forwardRef(function (inProps, ref) {
         props: inProps,
         name: 'Textarea',
     });
-    var _a = props.size, size = _a === void 0 ? TEXTAREA_DEFAULT_SIZE : _a, autoFocus = props.autoFocus, maxLength = props.maxLength, expand = props.expand, placeholder = props.placeholder, id = props.id, name = props.name, error = props.error, fullWidth = props.fullWidth, cols = props.cols, rows = props.rows, className = props.className, label = props.label, hint = props.hint, value = props.value, defaultValue = props.defaultValue, onChange = props.onChange, required = props.required, textareaRef = props.textareaRef, disabled = props.disabled, textareaProps = props.textareaProps, labelRef = props.labelRef, labelProps = props.labelProps, other = __rest(props, ["size", "autoFocus", "maxLength", "expand", "placeholder", "id", "name", "error", "fullWidth", "cols", "rows", "className", "label", "hint", "value", "defaultValue", "onChange", "required", "textareaRef", "disabled", "textareaProps", "labelRef", "labelProps"]);
+    var _a = props.size, size = _a === void 0 ? TEXTAREA_DEFAULT_SIZE : _a, autoFocus = props.autoFocus, maxLength = props.maxLength, expand = props.expand, placeholder = props.placeholder, id = props.id, name = props.name, error = props.error, fullWidth = props.fullWidth, cols = props.cols, rows = props.rows, className = props.className, label = props.label, hint = props.hint, value = props.value, defaultValue = props.defaultValue, onChange = props.onChange, required = props.required, disabled = props.disabled, textareaProps = props.textareaProps, labelProps = props.labelProps, labelRef = props.labelRef, textareaRef = props.textareaRef, other = __rest(props, ["size", "autoFocus", "maxLength", "expand", "placeholder", "id", "name", "error", "fullWidth", "cols", "rows", "className", "label", "hint", "value", "defaultValue", "onChange", "required", "disabled", "textareaProps", "labelProps", "labelRef", "textareaRef"]);
     return (React.createElement(FieldControl, __assign({ size: size, error: error, disabled: disabled, required: required, fullWidth: fullWidth }, other, { className: cnTextarea({
             expand: expand,
         }, [className]), ref: ref }),

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

@@ -7,13 +7,13 @@ export declare const textareaExpandVariant: readonly ["autoSize", "verticalResiz
 export type TextareaExpandVariant = (typeof textareaExpandVariant)[number];
 type TextareaPropsDeprecated = {
     /**
-     * deprecated
      * Ссылка на FieldLabel
+     * @deprecated Используйте labelProps.ref
      * */
     labelRef?: FieldLabelProps['ref'];
     /**
-     * deprecated
      * Ссылка на элемент textarea
+     * @deprecated Используйте textareaProps.ref
      * */
     textareaRef?: Ref<HTMLTextAreaElement>;
 };

package/__inner__/esm/utils/scrollContainerToElement.d.ts

@@ -1,7 +1,6 @@
-type ScrollContainerToElement = {
-    container?: HTMLElement;
-    element?: HTMLElement;
+export type ScrollContainerToElement = {
+    container?: HTMLElement | null;
+    element?: HTMLElement | null;
     behavior?: ScrollBehavior;
 };
 export declare function scrollContainerToElement({ container, element, behavior, }: ScrollContainerToElement): void;
-export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ozen-ui/kit",
-  "version": "0.16.1",
+  "version": "0.17.0-canary.0",
   "description": "React component library",
   "files": [
     "*"

package/__inner__/cjs/components/DataList/DataListProvider.d.ts

@@ -1,16 +0,0 @@
-import type { SyntheticEvent, MouseEvent } from 'react';
-import type React from 'react';
-import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
-export type DataListContextState = {
-    'data-list': string;
-    selected?: string | string[];
-    focused?: string | null;
-    highlighted?: string | null;
-    size: FormElementSizeVariant;
-    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
-    onSelect?: (event: SyntheticEvent, option: string) => void;
-    onMouseMove?: (event: MouseEvent<HTMLElement>) => void;
-    onMouseLeave?: (event: MouseEvent<HTMLElement>) => void;
-};
-export declare const DataListContext: React.Context<DataListContextState>;
-export declare const useDataListContext: () => DataListContextState;

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

@@ -1,11 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useDataListContext = exports.DataListContext = void 0;
-var react_1 = require("react");
-var constants_1 = require("./constants");
-exports.DataListContext = (0, react_1.createContext)({
-    'data-list': '',
-    size: constants_1.DATA_LIST_DEFAULT_SIZE,
-});
-var useDataListContext = function () { return (0, react_1.useContext)(exports.DataListContext); };
-exports.useDataListContext = useDataListContext;

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

@@ -1,40 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DataListOption = void 0;
-var tslib_1 = require("tslib");
-var react_1 = tslib_1.__importStar(require("react"));
-var icons_1 = require("@ozen-ui/icons");
-var getIconSizeToFormElement_1 = require("../../../utils/getIconSizeToFormElement");
-var List_1 = require("../../List");
-var constants_1 = require("../constants");
-var DataList_1 = require("../DataList");
-var DataListProvider_1 = require("../DataListProvider");
-exports.DataListOption = (0, react_1.forwardRef)(function (_a, ref) {
-    var value = _a.value, onMouseMoveProp = _a.onMouseMove, onMouseLeaveProp = _a.onMouseLeave, onClickProp = _a.onClick, _b = _a.disabled, disabled = _b === void 0 ? constants_1.DATA_LIST_OPTION_DEFAULT_DISABLED : _b, label = _a.children, className = _a.className, other = tslib_1.__rest(_a, ["value", "onMouseMove", "onMouseLeave", "onClick", "disabled", "children", "className"]);
-    var _c = (0, DataListProvider_1.useDataListContext)(), size = _c.size, _d = _c.selected, selected = _d === void 0 ? [] : _d, focused = _c.focused, highlighted = _c.highlighted, onClick = _c.onClick, onMouseMove = _c.onMouseMove, onMouseLeave = _c.onMouseLeave, dataListName = _c["data-list"];
-    var iconSize = (0, getIconSizeToFormElement_1.getIconSizeToFormElement)(size);
-    var isSelected = Array.isArray(selected)
-        ? selected.includes(value)
-        : selected === value;
-    var handleClick = function (event) {
-        onClickProp === null || onClickProp === void 0 ? void 0 : onClickProp(event);
-        onClick === null || onClick === void 0 ? void 0 : onClick(event);
-    };
-    var handleMouseMove = function (event) {
-        onMouseMoveProp === null || onMouseMoveProp === void 0 ? void 0 : onMouseMoveProp(event);
-        onMouseMove === null || onMouseMove === void 0 ? void 0 : onMouseMove(event);
-    };
-    var handleMouseLeave = function (event) {
-        onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(event);
-        onMouseLeaveProp === null || onMouseLeaveProp === void 0 ? void 0 : onMouseLeaveProp(event);
-    };
-    return (react_1.default.createElement(List_1.ListItem, tslib_1.__assign({ role: "option", "data-list": dataListName, "data-list-value": value, "data-list-disabled": disabled, "aria-selected": isSelected, "aria-disabled": disabled, onClick: handleClick, onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, className: (0, DataList_1.cnDataList)('Option', {
-            disabled: disabled,
-            highlighted: !disabled && highlighted === value,
-            focused: !disabled && focused === value,
-        }, [className]) }, other, { ref: ref }), typeof label === 'string' ? (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(List_1.ListItemText, { className: (0, DataList_1.cnDataList)('Text'), primary: label }),
-        react_1.default.createElement("div", { className: (0, DataList_1.cnDataList)('IconWrapper', { size: iconSize }) }, isSelected && (react_1.default.createElement(List_1.ListItemIcon, null,
-            react_1.default.createElement(icons_1.TickIcon, { size: iconSize })))))) : (label)));
-});
-exports.DataListOption.displayName = 'DataListOption';

package/__inner__/cjs/components/DataList/useDataListNavigation.d.ts

@@ -1,23 +0,0 @@
-import type React from 'react';
-import type { MouseEvent, RefObject } from 'react';
-type UserListItemValue = string | null;
-export type UseListNavigationProps = {
-    name?: string;
-    ref?: RefObject<HTMLElement>;
-    selected?: UserListItemValue;
-    active?: boolean;
-    onSelect?: (e: React.SyntheticEvent | KeyboardEvent, selectedItem: string) => void;
-};
-export type UseListNavigationValue = {
-    'data-list': string;
-    focused?: UserListItemValue;
-    highlighted?: UserListItemValue;
-    ref?: RefObject<HTMLElement>;
-    onKeyDown: (event: KeyboardEvent) => void;
-    onMouseMove: (event: MouseEvent<HTMLElement>) => void;
-    onMouseLeave: (event: MouseEvent<HTMLElement>) => void;
-    onClick: (event: React.MouseEvent<HTMLElement>) => void;
-};
-/** Навигация по элементам списка без перехвата фокуса с элемента контроля */
-export declare function useDataListNavigation({ name: nameProp, selected, active, onSelect, }?: UseListNavigationProps): UseListNavigationValue;
-export {};

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

@@ -1,109 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useDataListNavigation = void 0;
-var tslib_1 = require("tslib");
-var react_1 = require("react");
-var useUniqueId_1 = require("../../hooks/useUniqueId");
-var getNextIndex_1 = require("../../utils/getNextIndex");
-var getPrevIndex_1 = require("../../utils/getPrevIndex");
-var isKey_1 = require("../../utils/isKey");
-var scrollContainerToElement_1 = require("../../utils/scrollContainerToElement");
-var getData = function (el, attr) {
-    if (!el) {
-        return null;
-    }
-    if ('currentTarget' in el)
-        return el.currentTarget.getAttribute("data-list-".concat(attr));
-    return el.getAttribute("data-list-".concat(attr));
-};
-/** Навигация по элементам списка без перехвата фокуса с элемента контроля */
-function useDataListNavigation(_a) {
-    var _b = _a === void 0 ? {} : _a, nameProp = _b.name, selected = _b.selected, _c = _b.active, active = _c === void 0 ? false : _c, onSelect = _b.onSelect;
-    var name = (0, useUniqueId_1.useUniqueId)(nameProp);
-    var ref = (0, react_1.useRef)(null);
-    var _d = tslib_1.__read((0, react_1.useState)(null), 2), current = _d[0], setCurrent = _d[1];
-    var _e = tslib_1.__read((0, react_1.useState)(), 2), focused = _e[0], serFocused = _e[1];
-    var _f = tslib_1.__read((0, react_1.useState)(), 2), highlighted = _f[0], setHighlighted = _f[1];
-    var getItems = (0, react_1.useCallback)(function () {
-        var _a;
-        return Array.from(((_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll("[data-list=\"".concat(name, "\"]"))) ||
-            []).filter(function (item) { return getData(item, 'disabled') !== 'true'; });
-    }, [name]);
-    var getCurrentItem = (0, react_1.useCallback)(function (value) {
-        return getItems().find(function (item) { return getData(item, 'value') === value; });
-    }, []);
-    var getItemsValues = (0, react_1.useCallback)(function () { return getItems().map(function (item) { return getData(item, 'value'); }); }, []);
-    var currentValue = current || selected;
-    (0, react_1.useEffect)(function () {
-        if (!active) {
-            return undefined;
-        }
-        var selectedItem = getCurrentItem(currentValue || '');
-        if (ref === null || ref === void 0 ? void 0 : ref.current) {
-            (0, scrollContainerToElement_1.scrollContainerToElement)({
-                container: ref.current,
-                element: selectedItem,
-            });
-            setCurrent(getData(selectedItem, 'value') || '');
-        }
-        return function () {
-            setCurrent(null);
-            serFocused(null);
-            setHighlighted(null);
-        };
-    }, [active]);
-    var onClick = function (event) {
-        if (getData(event, 'disabled') === 'true') {
-            return;
-        }
-        var value = getData(event, 'value');
-        serFocused(null);
-        setCurrent(value);
-        onSelect === null || onSelect === void 0 ? void 0 : onSelect(event, value || '');
-    };
-    var onKeyDown = function (event) {
-        if ((0, isKey_1.isKey)(event, 'Enter')) {
-            event.preventDefault();
-            var test_1 = currentValue || getItemsValues()[0] || '';
-            serFocused(test_1);
-            onSelect === null || onSelect === void 0 ? void 0 : onSelect(event, test_1);
-        }
-        if (!(0, isKey_1.isKey)(event, 'ArrowUp') && !(0, isKey_1.isKey)(event, 'ArrowDown')) {
-            return;
-        }
-        event.preventDefault();
-        var values = getItemsValues();
-        var currentIndex = currentValue ? values.indexOf(currentValue) : null;
-        var isArrowUp = (0, isKey_1.isKey)(event, 'ArrowUp');
-        var newIndex = isArrowUp
-            ? (0, getPrevIndex_1.getPrevIndex)(currentIndex !== null && currentIndex !== void 0 ? currentIndex : 0, values.length)
-            : (0, getNextIndex_1.getNextIndex)(currentIndex !== null && currentIndex !== void 0 ? currentIndex : -1, values.length);
-        var newValue = values[newIndex] || '';
-        setCurrent(newValue);
-        serFocused(newValue);
-        if (ref === null || ref === void 0 ? void 0 : ref.current) {
-            (0, scrollContainerToElement_1.scrollContainerToElement)({
-                container: ref.current,
-                element: getCurrentItem(newValue || ''),
-            });
-        }
-    };
-    var onMouseMove = function (event) {
-        if (getData(event, 'disabled') !== 'true')
-            setHighlighted(getData(event, 'value'));
-    };
-    var onMouseLeave = function () {
-        setHighlighted(null);
-    };
-    return {
-        'data-list': name,
-        ref: ref,
-        focused: focused,
-        highlighted: highlighted,
-        onClick: onClick,
-        onKeyDown: onKeyDown,
-        onMouseMove: onMouseMove,
-        onMouseLeave: onMouseLeave,
-    };
-}
-exports.useDataListNavigation = useDataListNavigation;

package/__inner__/cjs/components/Select/components/SelectCheckIcon/SelectCheckIcon.css

@@ -1,13 +0,0 @@
-.SelectCheckIcon {
-  inline-size: var(--select-check-icon-size);
-  block-size: var(--select-check-icon-size);
-  display: flex;
-}
-
-  .SelectCheckIcon_size_s {
-      --select-check-icon-size: 16px;
-    }
-
-  .SelectCheckIcon_size_m {
-      --select-check-icon-size: 24px;
-    }

package/__inner__/cjs/components/Select/components/SelectCheckIcon/SelectCheckIcon.js

@@ -1,14 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectCheckIcon = void 0;
-var tslib_1 = require("tslib");
-require("./SelectCheckIcon.css");
-var react_1 = tslib_1.__importDefault(require("react"));
-var icons_1 = require("@ozen-ui/icons");
-var classname_1 = require("../../../../utils/classname");
-var cnSelectCheckIcon = (0, classname_1.cn)('SelectCheckIcon');
-var SelectCheckIcon = function (_a) {
-    var size = _a.size, selected = _a.selected;
-    return (react_1.default.createElement("div", { className: cnSelectCheckIcon({ size: size }) }, selected && react_1.default.createElement(icons_1.TickIcon, { size: size })));
-};
-exports.SelectCheckIcon = SelectCheckIcon;

package/__inner__/cjs/components/Select/components/SelectCheckIcon/index.d.ts

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