@ozen-ui/kit 0.57.0 → 0.58.0

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

@@ -0,0 +1,133 @@
+import type { ChangeEvent, HTMLAttributes, ReactElement, ReactNode, Ref, SyntheticEvent } from 'react';
+import type { TagProps, TagRef } from '../../components/TagNext';
+import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
+import type { InputProps, InputRef } from '../Input';
+import type { AutocompleteDropdownProps } from './components';
+export type AutocompleteRenderOptionProps<OPTION> = {
+    option: OPTION;
+    state: {
+        key?: string | number;
+        selected?: boolean;
+        disabled?: boolean;
+        focused?: boolean;
+    };
+    props: HTMLAttributes<HTMLElement> & {
+        key?: string | number;
+    };
+};
+export type AutocompletePropValue<OPTION, MULTIPLE extends boolean> = (MULTIPLE extends true ? 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 AutocompletePropSearchFunction<OPTION> = (options: OPTION[], searchValue: string) => OPTION[];
+export type AutocompletePropRenderInput = (props: InputProps, ref?: Ref<InputRef>) => ReactNode;
+export type AutocompletePropRenderTag = (props: TagProps, ref?: Ref<TagRef>) => ReactNode;
+export type AutocompleteRenderMoreTagProps<OPTION> = {
+    props: TagProps;
+    omittedValues?: AutocompletePropValue<OPTION, true>;
+};
+export type AutocompletePropRenderMoreTag<OPTION> = (props: AutocompleteRenderMoreTagProps<OPTION>, ref?: Ref<TagRef>) => ReactNode;
+type AutocompleteOpenControlledProps = {
+    /** Текущее состояние списка. Если `true`, список отображается. */
+    open?: boolean;
+    /** Состояние открытие по умолчанию (неконтролируемый компонент) */
+    defaultOpen?: never;
+};
+type AutocompleteOpenUncontrolledProps = {
+    /** Текущее состояние списка. Если `true`, список отображается. */
+    open?: never;
+    /** Состояние открытие по умолчанию (неконтролируемый компонент) */
+    defaultOpen?: boolean;
+};
+type AutocompleteInputProps = Pick<InputProps, 'hint' | 'style' | 'error' | 'label' | 'disabled' | 'required' | 'autoFocus' | 'fullWidth' | 'className' | 'hintProps' | 'bodyProps' | 'onKeyDown' | 'inputProps' | 'renderLeft' | 'renderRight' | 'placeholder' | 'disableStroke'>;
+export type AutocompleteOnChange<OPTION, MULTIPLE extends boolean> = (e: SyntheticEvent | KeyboardEvent, value: (MULTIPLE extends true ? OPTION[] : OPTION) | null) => void;
+export type AutocompleteOnInputChange = (e: ChangeEvent<HTMLInputElement> | null, value: string) => void;
+export type AutocompleteRef = InputRef;
+export type AutocompletePropSize = FormElementSizeVariant;
+export type AutocompleteProps<OPTION = AutocompleteDefaultOption, MULTIPLE extends boolean = false> = {
+    /** Если {true} из списка можно выбрать несколько вариантов */
+    multiple?: MULTIPLE;
+    /** Задает максимальное количество отображаемых тегов в компоненте с множественным выбором */
+    limitTags?: number | 'responsive';
+    /** Функция для кастомизации тега выбранного значения в компоненте с множественным выбором */
+    renderTag?: AutocompletePropRenderTag;
+    /** Функция для кастомизации тега «more», который отображается в случае скрытия элементов в компоненте с множественным выбором */
+    renderMoreTag?: AutocompletePropRenderMoreTag<OPTION>;
+    /** Список вариантов выбора (опции) */
+    options: OPTION[];
+    /** Размер */
+    size?: AutocompletePropSize;
+    /** Выбранное значение опции */
+    value?: AutocompletePropValue<OPTION, MULTIPLE>;
+    /** Выбранное значение опции по умолчанию */
+    defaultValue?: AutocompletePropValue<OPTION, MULTIPLE>;
+    /** Функция обратного вызова, которая будет вызвана при выборе значения */
+    onChange?: AutocompleteOnChange<OPTION, MULTIPLE>;
+    /** Введённое значение в текстовом поле */
+    inputValue?: string;
+    /** Функция обратного вызова, которая будет вызвана при вводе значения с клавиатуры */
+    onInputChange?: AutocompleteOnInputChange;
+    /** Функция для кастомизации текстового поля */
+    renderInput?: AutocompletePropRenderInput;
+    /** Функция для кастомизации отображения опции */
+    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?: AutocompletePropSearchFunction<OPTION>;
+    /** Если {true} не показывает список с отсутствующими опциями */
+    disableShowEmptyOptionsList?: boolean;
+    /** Если {true} скрывает кнопку раскрытия/скрытия списка */
+    disableShowChevron?: boolean;
+    /** Свойства компонента Popover */
+    popoverProps?: AutocompleteDropdownProps['popoverProps'];
+    /** Свойства компонента List */
+    listProps?: AutocompleteDropdownProps['listProps'];
+} & 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 {
+    disabled: AutocompleteDefaultOption['disabled'];
+} ? Record<string, unknown> : {
+    getOptionDisabled?: AutocompletePropGetOptionDisabled<OPTION>;
+});
+export type AutocompleteComponent = <OPTION = AutocompleteDefaultOption, MULTIPLE extends boolean = false>(props: AutocompleteProps<OPTION, MULTIPLE>) => ReactElement | null;
+export {};

package/__inner__/cjs/components/AutocompleteNext/types.js

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

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

@@ -20,9 +20,10 @@ var Popover_1 = require("../Popover");
 var constants_1 = require("./constants");
 var helpers_1 = require("./helpers");
 var index_1 = require("./index");
+var utils_1 = require("./utils");
 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, listProps = _a.listProps, className = _a.className, other = tslib_1.__rest(_a, ["open", "size", "as", "name", "children", "anchorRef", "selected", "defaultSelected", "onClose", "listProps", "className"]);
+    var _a = (0, useThemeProps_1.useThemeProps)({ props: inProps, name: 'DataList' }), _b = _a.as, as = _b === void 0 ? constants_1.DATA_LIST_DEFAULT_TAG : _b, _c = _a.open, open = _c === void 0 ? constants_1.DATA_LIST_DEFAULT_OPEN : _c, _d = _a.size, size = _d === void 0 ? constants_1.DATA_LIST_DEFAULT_SIZE : _d, name = _a.name, onClose = _a.onClose, children = _a.children, listProps = _a.listProps, anchorRef = _a.anchorRef, className = _a.className, defaultSelected = _a.defaultSelected, onSelectProp = _a.onSelect, selectedProp = _a.selected, other = tslib_1.__rest(_a, ["as", "open", "size", "name", "onClose", "children", "listProps", "anchorRef", "className", "defaultSelected", "onSelect", "selected"]);
     var dataListRef = (0, react_1.useRef)(null);
     var listRef = (0, react_1.useRef)(null);
     var radius = (0, getPaperSizeToFormElement_1.getPaperSizeToFormElement)(size);
@@ -51,24 +52,21 @@ var DataListRender = function (inProps, ref) {
         });
     }, [children]);
     var handleSelect = function (event, value) {
-        var params = {
-            multiple: inProps.multiple,
-            onSelect: inProps.onSelect,
-            selected: selectedState,
-            setSelected: setSelected,
+        var onSelect = function (e, payload) {
+            setSelected(payload.value);
+            onSelectProp === null || onSelectProp === void 0 ? void 0 : onSelectProp(e, payload);
         };
+        var params = tslib_1.__assign(tslib_1.__assign({}, inProps), { onSelect: onSelect, selected: selectedState });
+        if ((0, helpers_1.isNotMultipleParams)(params)) {
+            var onSelect_1 = params.onSelect;
+            onSelect_1 === null || onSelect_1 === void 0 ? void 0 : onSelect_1(event, { name: name, value: value });
+        }
         if ((0, helpers_1.isMultipleParams)(params)) {
-            var selected = params.selected, onSelect = params.onSelect, setSelected_1 = params.setSelected;
+            var selected = params.selected, onSelect_2 = params.onSelect;
             var res = (selected === null || selected === void 0 ? void 0 : selected.includes(value || ''))
                 ? selected.filter(function (item) { return item !== value; })
                 : tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read((selected || [])), false), [value], false);
-            onSelect === null || onSelect === void 0 ? void 0 : onSelect(event, { name: name, value: res });
-            setSelected_1(res);
-        }
-        if ((0, helpers_1.isNotMultipleParams)(params)) {
-            var onSelect = params.onSelect, setSelected_2 = params.setSelected;
-            onSelect === null || onSelect === void 0 ? void 0 : onSelect(event, { name: name, value: value });
-            setSelected_2(value);
+            onSelect_2 === null || onSelect_2 === void 0 ? void 0 : onSelect_2(event, { name: name, value: res });
         }
     };
     var handleOnMouseDownList = function (e) {
@@ -77,10 +75,10 @@ var DataListRender = function (inProps, ref) {
         (_a = listProps === null || listProps === void 0 ? void 0 : listProps.onMouseDown) === null || _a === void 0 ? void 0 : _a.call(listProps, e);
     };
     // Навигация по списку
-    var _f = (0, helpers_1.useDataListNavigation)({
-        active: open,
+    var _f = (0, utils_1.useDataListNavigation)({
         items: items,
-        selected: (0, helpers_1.lastSelectedValue)(selectedState),
+        active: open,
+        selected: (0, utils_1.lastSelectedValue)(selectedState),
         onSelect: function (event, item) {
             handleSelect(event, item !== null && item !== void 0 ? item : '');
         },
@@ -111,9 +109,7 @@ var DataListRender = function (inProps, ref) {
     (0, useEventListener_1.useEventListener)({
         eventName: 'keydown',
         element: anchorRef,
-        handler: function (event) {
-            onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
-        },
+        handler: function (event) { return onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event); },
     });
     // Закрывает список по нажатию на клавишу {Tab}
     (0, useEventListener_1.useEventListener)({
@@ -121,9 +117,8 @@ var DataListRender = function (inProps, ref) {
         eventName: 'keydown',
         element: anchorRef,
         handler: function (event) {
-            if ((0, isKey_1.isKey)(event, 'Tab')) {
+            if ((0, isKey_1.isKey)(event, 'Tab'))
                 onClose === null || onClose === void 0 ? void 0 : onClose();
-            }
         },
     });
     // Представление раскрывающегося списка
@@ -148,9 +143,7 @@ var DataListRender = function (inProps, ref) {
             return (0, react_1.cloneElement)(elementChild, props);
         });
     }, [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, radius: radius, className: (0, exports.cnDataList)('', [className]), transitionProps: {
-            classNames: 'DataList-animation',
-        } }, other, { ref: (0, useMultiRef_1.useMultiRef)([ref, dataListRef]) }),
+    return (react_1.default.createElement(Popover_1.Popover, tslib_1.__assign({ open: open, offset: [0, 4], radius: radius, onClose: onClose, strategy: "absolute", anchorRef: anchorRef, as: as, placement: "bottom-start", transitionProps: { classNames: 'DataList-animation' }, className: (0, exports.cnDataList)('', [className]), disableReturnFocus: true, disableEnforceFocus: true }, 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.d.ts

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

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isNotMultipleParams = exports.isMultipleParams = void 0;
+var isMultipleParams = function (params) { return !!params.multiple; };
+exports.isMultipleParams = isMultipleParams;
+var isNotMultipleParams = function (params) { return !params.multiple; };
+exports.isNotMultipleParams = isNotMultipleParams;

package/__inner__/cjs/components/DataList/{helpers → utils}/index.d.ts

@@ -1,4 +1,3 @@
 export * from './lastSelectedValue';
-export * from './types';
 export * from './useDataListNavigation';
 export * from './useScrollContainerToElement';

package/__inner__/cjs/components/DataList/{helpers → utils}/index.js

@@ -2,6 +2,5 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./lastSelectedValue"), exports);
-tslib_1.__exportStar(require("./types"), exports);
 tslib_1.__exportStar(require("./useDataListNavigation"), exports);
 tslib_1.__exportStar(require("./useScrollContainerToElement"), exports);

package/__inner__/cjs/components/DatePicker/DatePicker.d.ts

@@ -19,7 +19,7 @@ export declare const DatePicker: React.ForwardRefExoticComponent<(Omit<{
     defaultOpen?: undefined;
 } & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-}, "value" | "defaultValue" | "error" | "label" | "onChange" | "onError" | "onKeyDown" | "disabled" | "open" | "onClose" | "placeholder" | "required" | "size" | "exclude" | "fullWidth" | "disableStroke" | "hint" | "renderLeft" | "renderRight" | "inputProps" | "hintProps" | "clearText" | "disableClearButton" | "onInputChange" | "onOpen" | "defaultOpen" | "offsetDate" | "minDate" | "maxDate" | "calendarProps" | "popoverProps">, "ref"> | Omit<{
+}, "value" | "defaultValue" | "error" | "label" | "onChange" | "onError" | "onKeyDown" | "disabled" | "open" | "onClose" | "placeholder" | "required" | "size" | "exclude" | "fullWidth" | "disableStroke" | "hint" | "renderLeft" | "renderRight" | "inputProps" | "hintProps" | "clearText" | "disableClearButton" | "onInputChange" | "onOpen" | "defaultOpen" | "popoverProps" | "offsetDate" | "minDate" | "maxDate" | "calendarProps">, "ref"> | Omit<{
     value?: Date | null | undefined;
     defaultValue?: Date | null | undefined;
     onChange?: DatePickerOnChange | undefined;
@@ -36,4 +36,4 @@ export declare const DatePicker: React.ForwardRefExoticComponent<(Omit<{
     defaultOpen?: boolean | undefined;
 } & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-}, "value" | "defaultValue" | "error" | "label" | "onChange" | "onError" | "onKeyDown" | "disabled" | "open" | "onClose" | "placeholder" | "required" | "size" | "exclude" | "fullWidth" | "disableStroke" | "hint" | "renderLeft" | "renderRight" | "inputProps" | "hintProps" | "clearText" | "disableClearButton" | "onInputChange" | "onOpen" | "defaultOpen" | "offsetDate" | "minDate" | "maxDate" | "calendarProps" | "popoverProps">, "ref">) & React.RefAttributes<HTMLDivElement>>;
+}, "value" | "defaultValue" | "error" | "label" | "onChange" | "onError" | "onKeyDown" | "disabled" | "open" | "onClose" | "placeholder" | "required" | "size" | "exclude" | "fullWidth" | "disableStroke" | "hint" | "renderLeft" | "renderRight" | "inputProps" | "hintProps" | "clearText" | "disableClearButton" | "onInputChange" | "onOpen" | "defaultOpen" | "popoverProps" | "offsetDate" | "minDate" | "maxDate" | "calendarProps">, "ref">) & React.RefAttributes<HTMLDivElement>>;

package/__inner__/cjs/components/DatePicker/DatePicker.js

@@ -153,7 +153,7 @@ exports.DatePicker = (0, react_1.forwardRef)(function (inProps, ref) {
         e.preventDefault();
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(components_1.DateInput, tslib_1.__assign({ size: size, hint: hint, error: error, label: label, required: required, disabled: disabled, fullWidth: fullWidth, placeholder: placeholder }, other, { renderRight: react_1.default.createElement(components_1.DatePickerRenderRight, { size: size, open: open, onClear: handleClear, clearText: clearText, hasValue: !!inputValue, renderRight: renderRight, disableClearButton: disableClearButton }), value: inputValue, inputProps: tslib_1.__assign(tslib_1.__assign({ autoComplete: 'off' }, inputProps), { onBlur: handleBlur, onClick: handleClickOnInput, onInput: handleChangeInput }), bodyProps: { ref: anchorRef, 'aria-expanded': open }, className: (0, exports.cnDatePicker)('', [className]), onKeyDown: handleKeyDown, ref: ref })),
+        react_1.default.createElement(components_1.DateInput, tslib_1.__assign({ size: size, hint: hint, error: error, label: label, required: required, disabled: disabled, fullWidth: fullWidth, placeholder: placeholder }, other, { renderRight: react_1.default.createElement(components_1.DatePickerRenderRight, { size: size, open: open, onClear: handleClear, clearText: clearText, hasValue: !!value, renderRight: renderRight, disableClearButton: disableClearButton }), value: inputValue, inputProps: tslib_1.__assign(tslib_1.__assign({ autoComplete: 'off' }, inputProps), { onBlur: handleBlur, onClick: handleClickOnInput, onInput: handleChangeInput }), bodyProps: { ref: anchorRef, 'aria-expanded': open }, className: (0, exports.cnDatePicker)({ size: size }, [className]), onKeyDown: handleKeyDown, ref: ref })),
         react_1.default.createElement(Popover_1.Popover, tslib_1.__assign({ as: Paper_1.Paper, open: open, offset: [0, 4], radius: radius, anchorRef: anchorRef, onClose: handleClose, placement: "bottom-start", disableReturnFocus: true, disableEnforceFocus: true }, popoverProps),
             react_1.default.createElement(Calendar_1.Calendar, tslib_1.__assign({ minDate: minDate, maxDate: maxDate, exclude: exclude, size: calendarSize, offsetDate: offsetDate, onMouseDown: handleMouseDownCalendar }, calendarProps, { value: value || null, onChange: handleChangeCalendar })))));
 });

package/__inner__/cjs/components/FieldControl/FieldControl.css

@@ -95,10 +95,14 @@
       }
 .FieldControl_hasLabel .FieldInput::placeholder {
         opacity: 0;
+        color: var(--textfield-placeholder-color);
       }
 .FieldControl_hasLabel .FieldInput:focus::placeholder {
         opacity: 1;
       }
+.FieldControl .FieldLabel_shrink + .FieldInput::placeholder {
+          opacity: 1;
+        }
 .FieldControl_fullWidth {
     inline-size: 100%;
   }

package/__inner__/cjs/components/FieldInput/FieldInput.d.ts

@@ -1,11 +1,3 @@
-import type { ComponentRef, ElementType } from 'react';
-import type { PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
-export declare const FIELD_INPUT_DEFAULT_TAG = "input";
-export type FieldInputRef = ComponentRef<typeof FIELD_INPUT_DEFAULT_TAG>;
-type FieldInputBaseProps = {
-    'data-testid'?: string;
-};
-export type FieldInputProps<As extends ElementType = typeof FIELD_INPUT_DEFAULT_TAG> = PolymorphicComponentPropsWithoutRef<FieldInputBaseProps, As>;
+import type { FieldInputBaseProps } from './types';
 export declare const cnFieldInput: import("@bem-react/classname").ClassNameFormatter;
 export declare const FieldInput: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<FieldInputBaseProps, "div">;
-export {};

package/__inner__/cjs/components/FieldInput/FieldInput.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FieldInput = exports.cnFieldInput = exports.FIELD_INPUT_DEFAULT_TAG = void 0;
+exports.FieldInput = exports.cnFieldInput = void 0;
 var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importStar(require("react"));
 var useControlled_1 = require("../../hooks/useControlled");
@@ -8,10 +8,10 @@ var useIsomorphicEffect_1 = require("../../hooks/useIsomorphicEffect");
 var classname_1 = require("../../utils/classname");
 var polymorphicComponentWithRef_1 = require("../../utils/polymorphicComponentWithRef");
 var FieldControl_1 = require("../FieldControl");
-exports.FIELD_INPUT_DEFAULT_TAG = 'input';
+var constants_1 = require("./constants");
 exports.cnFieldInput = (0, classname_1.cn)('FieldInput');
 exports.FieldInput = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (_a, ref) {
-    var _b = _a.as, Tag = _b === void 0 ? exports.FIELD_INPUT_DEFAULT_TAG : _b, className = _a.className, requiredProp = _a.required, disabledProp = _a.disabled, valueProp = _a.value, onChange = _a.onChange, defaultValue = _a.defaultValue, children = _a.children, onFocus = _a.onFocus, onBlur = _a.onBlur, other = tslib_1.__rest(_a, ["as", "className", "required", "disabled", "value", "onChange", "defaultValue", "children", "onFocus", "onBlur"]);
+    var _b = _a.as, Tag = _b === void 0 ? constants_1.FIELD_INPUT_DEFAULT_TAG : _b, className = _a.className, requiredProp = _a.required, disabledProp = _a.disabled, valueProp = _a.value, renderComponentProp = _a.renderComponent, onChange = _a.onChange, defaultValue = _a.defaultValue, children = _a.children, onFocus = _a.onFocus, onBlur = _a.onBlur, other = tslib_1.__rest(_a, ["as", "className", "required", "disabled", "value", "renderComponent", "onChange", "defaultValue", "children", "onFocus", "onBlur"]);
     var _c = tslib_1.__read((0, react_1.useState)(), 2), focused = _c[0], setFocused = _c[1];
     var context = (0, FieldControl_1.useFieldControl)();
     var _d = tslib_1.__read(context, 2), fieldControl = _d[0], setFieldControl = _d[1];
@@ -50,6 +50,11 @@ exports.FieldInput = (0, polymorphicComponentWithRef_1.polymorphicComponentWithR
         setFocused(false);
         onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
     }, [onBlur]);
-    return (react_1.default.createElement(Tag, tslib_1.__assign({ className: (0, exports.cnFieldInput)({}, [className]), required: required, disabled: disabled, onFocus: handleFocus, onBlur: handleBlur, onChange: handleChange }, (isControlled ? { value: valueState } : { defaultValue: defaultValue }), other, { ref: ref }), children));
+    var renderComponentDefault = function (props, ref) { return (react_1.default.createElement(Tag, tslib_1.__assign({}, props, { ref: ref }), children)); };
+    var renderComponent = renderComponentProp || renderComponentDefault;
+    var render = function () {
+        return renderComponent(tslib_1.__assign(tslib_1.__assign({ className: (0, exports.cnFieldInput)({}, [className]), required: required, disabled: disabled, onBlur: handleBlur, onFocus: handleFocus, onChange: handleChange }, (isControlled ? { value: valueState } : { defaultValue: defaultValue })), other), ref);
+    };
+    return render();
 });
 exports.FieldInput.displayName = 'FieldInput';

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

@@ -0,0 +1 @@
+export declare const FIELD_INPUT_DEFAULT_TAG = "input";

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

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FIELD_INPUT_DEFAULT_TAG = void 0;
+exports.FIELD_INPUT_DEFAULT_TAG = 'input';

package/__inner__/cjs/components/FieldInput/index.d.ts

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

package/__inner__/cjs/components/FieldInput/index.js

@@ -2,3 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./FieldInput"), exports);
+tslib_1.__exportStar(require("./types"), exports);

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

@@ -0,0 +1,11 @@
+import type { ElementType, HTMLAttributes, ReactElement, Ref } from 'react';
+import type { PolymorphicComponentPropsWithRef } from '../../utils/polymorphicComponentWithRef';
+import type { FIELD_INPUT_DEFAULT_TAG } from './constants';
+export type FieldInputPropRenderComponent<T extends HTMLElement = any> = (props: HTMLAttributes<T> & {
+    'data-testid'?: string;
+}, ref?: Ref<T>) => ReactElement | null;
+export type FieldInputBaseProps = {
+    'data-testid'?: string;
+    renderComponent?: FieldInputPropRenderComponent;
+};
+export type FieldInputProps<As extends ElementType = typeof FIELD_INPUT_DEFAULT_TAG> = PolymorphicComponentPropsWithRef<FieldInputBaseProps, As>;

package/__inner__/cjs/components/FieldInput/types.js

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

package/__inner__/cjs/components/FieldLabel/FieldLabel.css

@@ -26,6 +26,7 @@
     transform: translateY(var(--field-label-translate_y)) scale(1);
   }
 
+  .FieldLabel_shrink.FieldLabel_size_2xs,
   .FieldLabel_filled.FieldLabel_size_2xs,
   .FieldLabel_focused.FieldLabel_size_2xs {
     opacity: 0;

package/__inner__/cjs/components/Grid/Grid.css

@@ -4,6 +4,8 @@
 /* l >= 1280px */
 .Grid {
   display: grid;
+  min-block-size: 0;
+  min-inline-size: 0;
 }
 .Grid_cols_1 {
     grid-template-columns: repeat(1, 1fr);
@@ -801,6 +803,8 @@
   --grid-col-end: auto;
   --grid-row-start: auto;
   --grid-row-end: auto;
+  min-inline-size: 0;
+  overflow: hidden;
   grid-column: var(--grid-col-start) / var(--grid-col-end);
   grid-row: var(--grid-row-start) / var(--grid-row-end);
 }

package/__inner__/cjs/components/Input/Input.css

@@ -14,23 +14,20 @@
   .Input-FieldContainer {
     inline-size: 100%;
     position: relative;
+    overflow: hidden;
   }
   .Input-Field {
     border: none;
     outline: none;
-    display: flex;
-    inline-size: 100%;
-    padding: var(--textfield-input-padding);
+    font: inherit;
+    display: block;
     background: none;
-    color: var(--textfield-color);
+    inline-size: 100%;
     box-sizing: border-box;
+    color: var(--textfield-color);
+    padding: var(--textfield-input-padding);
     block-size: var(--textfield-input-height);
-    font: inherit;
   }
-  .Input-Field::placeholder {
-      opacity: 1;
-      color: var(--textfield-placeholder-color);
-    }
   .Input-Field:-webkit-autofill,
     .Input-Field:-webkit-autofill:hover,
     .Input-Field:-webkit-autofill:focus {

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

@@ -4,6 +4,7 @@ import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant'
 import type { FIELD_CONTROL_DEFAULT_TAG } from '../FieldControl';
 import type { FieldHintProps } from '../FieldHint';
 import type { FieldIconProps } from '../FieldIcon';
+import type { FieldInputProps } from '../FieldInput';
 import type { FieldLabelProps } from '../FieldLabel';
 export declare const inputTypeVariant: readonly ["number", "date", "datetime-local", "time", "text", "tel", "password", "email"];
 export type InputTypeVariant = (typeof inputTypeVariant)[number];
@@ -65,9 +66,7 @@ export type InputProps = ExtendableComponentPropsWithRef<{
     /** Обработчик события на изменение значения поля */
     onChange?: InputOnChange;
     /** Свойства элемента input */
-    inputProps?: InputElement & {
-        'data-testid'?: string;
-    };
+    inputProps?: FieldInputProps;
     /** Свойства FieldLabel */
     labelProps?: FieldLabelProps;
     /** Cвойства Body */

package/__inner__/cjs/components/InputNumber/InputNumber.css

@@ -68,11 +68,6 @@
     block-size: var(--textfield-input-height);
   }
 
-  .InputNumber-Field::placeholder {
-      opacity: 1;
-      color: var(--textfield-placeholder-color);
-    }
-
   .InputNumber-Field:-webkit-autofill,
     .InputNumber-Field:-webkit-autofill:hover,
     .InputNumber-Field:-webkit-autofill:focus {

package/__inner__/cjs/components/Tag/Tag.css

@@ -7,6 +7,7 @@
   text-decoration: none;
   white-space: nowrap;
   max-inline-size: 100%;
+  box-sizing: border-box;
   gap: var(--spacing-3xs);
   padding: var(--tag-padding);
   border-radius: var(--tag-border-radius);

package/__inner__/cjs/components/TagNext/Tag.css

@@ -7,7 +7,9 @@
   text-decoration: none;
   white-space: nowrap;
   max-inline-size: 100%;
+  box-sizing: border-box;
   gap: var(--tag-gap);
+  block-size: var(--tag-height);
   padding: var(--tag-padding);
   border-radius: var(--tag-border-radius);
   transition:
@@ -24,6 +26,7 @@
       text-transform: var(--typography-text-3xs-text_transform, none);
 
       --tag-padding: 0 4px;
+      --tag-height: 16px;
       --tag-gap: var(--spacing-3xs);
       --tag-border-radius: var(--border-radius-s);
     }
@@ -32,7 +35,8 @@
       letter-spacing: var(--typography-text-xs-letter_spacing, 0);
       text-transform: var(--typography-text-xs-text_transform, none);
 
-      --tag-padding: 4px 8px;
+      --tag-padding: 0 8px;
+      --tag-height: 24px;
       --tag-gap: var(--spacing-3xs);
       --tag-border-radius: var(--border-radius-s);
     }
@@ -41,7 +45,8 @@
       letter-spacing: var(--typography-text-s-letter_spacing, 0);
       text-transform: var(--typography-text-s-text_transform, none);
 
-      --tag-padding: 6px 12px;
+      --tag-padding: 0 12px;
+      --tag-height: 32px;
       --tag-gap: var(--spacing-3xs);
       --tag-border-radius: var(--border-radius-m);
     }
@@ -50,7 +55,8 @@
       letter-spacing: var(--typography-text-m-letter_spacing, 0);
       text-transform: var(--typography-text-m-text_transform, none);
 
-      --tag-padding: 6px 12px;
+      --tag-padding: 0 12px;
+      --tag-height: 36px;
       --tag-gap: var(--spacing-2xs);
       --tag-border-radius: var(--border-radius-m);
     }
@@ -59,7 +65,8 @@
       letter-spacing: var(--typography-text-l-letter_spacing, 0);
       text-transform: var(--typography-text-l-text_transform, none);
 
-      --tag-padding: 6px 12px;
+      --tag-padding: 0 12px;
+      --tag-height: 40px;
       --tag-gap: var(--spacing-2xs);
       --tag-border-radius: var(--border-radius-m);
     }

package/__inner__/cjs/components/TagNext/Tag.js

@@ -13,7 +13,7 @@ var constants_1 = require("./constants");
 exports.cnTag = (0, classname_1.cn)('TagNext');
 exports.Tag = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
     var props = (0, useThemeProps_1.useThemeProps)({ props: inProps, name: 'TagNext' });
-    var _a = props.color, color = _a === void 0 ? constants_1.TAG_DEFAULT_COLOR : _a, _b = props.variant, variant = _b === void 0 ? constants_1.TAG_DEFAULT_VARIANT : _b, _c = props.size, size = _c === void 0 ? constants_1.TAG_DEFAULT_SIZE : _c, _d = props.as, Tag = _d === void 0 ? constants_1.TAG_DEFAULT_AS : _d, interactive = props.interactive, iconLeft = props.iconLeft, iconRight = props.iconRight, label = props.label, className = props.className, other = tslib_1.__rest(props, ["color", "variant", "size", "as", "interactive", "iconLeft", "iconRight", "label", "className"]);
+    var _a = props.color, color = _a === void 0 ? constants_1.TAG_DEFAULT_COLOR : _a, _b = props.variant, variant = _b === void 0 ? constants_1.TAG_DEFAULT_VARIANT : _b, _c = props.size, size = _c === void 0 ? constants_1.TAG_DEFAULT_SIZE : _c, _d = props.as, Tag = _d === void 0 ? constants_1.TAG_DEFAULT_TAG : _d, interactive = props.interactive, iconLeft = props.iconLeft, iconRight = props.iconRight, label = props.label, className = props.className, other = tslib_1.__rest(props, ["color", "variant", "size", "as", "interactive", "iconLeft", "iconRight", "label", "className"]);
     var renderIcon = function (content) {
         return (0, renderContent_1.renderContent)({
             content: content,

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

@@ -1,4 +1,4 @@
-export declare const TAG_DEFAULT_AS = "div";
+export declare const TAG_DEFAULT_TAG = "div";
 export declare const TAG_DEFAULT_VARIANT = "secondary";
 export declare const TAG_DEFAULT_COLOR = "action";
 export declare const TAG_DEFAULT_SIZE = "m";

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

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TAG_DEFAULT_SIZE = exports.TAG_DEFAULT_COLOR = exports.TAG_DEFAULT_VARIANT = exports.TAG_DEFAULT_AS = void 0;
-exports.TAG_DEFAULT_AS = 'div';
+exports.TAG_DEFAULT_SIZE = exports.TAG_DEFAULT_COLOR = exports.TAG_DEFAULT_VARIANT = exports.TAG_DEFAULT_TAG = void 0;
+exports.TAG_DEFAULT_TAG = 'div';
 exports.TAG_DEFAULT_VARIANT = 'secondary';
 exports.TAG_DEFAULT_COLOR = 'action';
 exports.TAG_DEFAULT_SIZE = 'm';

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

@@ -1,18 +1,20 @@
-import type { ElementType } from 'react';
+import type { ComponentRef, ElementType } from 'react';
 import type { IconProps } from '@ozen-ui/icons';
 import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
 import type { PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
 import type { RenderContentType } from '../../utils/renderContent';
+import type { TAG_DEFAULT_TAG } from './constants';
 export declare const tagVariant: readonly ["primary", "secondary"];
 export declare const tagColorVariant: readonly ["neutral", "action", "error", "warning", "success", "info"];
 export type TagVariant = (typeof tagVariant)[number];
 export type TagColor = (typeof tagColorVariant)[number];
 export type TagIcon = RenderContentType<IconProps>['content'];
+export type TagSizeVariant = FormElementSizeVariant;
 export type TagBaseProps = {
     /** Текст лейбла внутри тега */
     label: string;
     /** Размер */
-    size?: FormElementSizeVariant;
+    size?: TagSizeVariant;
     /** Вариант компонента */
     variant?: TagVariant;
     /** Цвет компонента */
@@ -24,4 +26,5 @@ export type TagBaseProps = {
     /** Иконка справа */
     iconRight?: TagIcon;
 };
-export type TagProps<As extends ElementType = 'div'> = PolymorphicComponentPropsWithoutRef<TagBaseProps, As>;
+export type TagProps<As extends ElementType = typeof TAG_DEFAULT_TAG> = PolymorphicComponentPropsWithoutRef<TagBaseProps, As>;
+export type TagRef = ComponentRef<typeof TAG_DEFAULT_TAG>;