@ozen-ui/kit 0.47.2 → 0.48.0

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

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

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

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

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

@@ -0,0 +1,52 @@
+import type { ComponentPropsWithRef, ChangeEvent } from 'react';
+import type { CalendarBaseProps, CalendarOnChange } from '../Calendar';
+import type { InputProps } from '../Input';
+import type { PopoverBaseProps } from '../Popover';
+export type DatePickerOnChange = CalendarOnChange;
+export type DatePickerOnInputChange = (e: ChangeEvent<HTMLInputElement> | null, value: string) => void;
+export type DatePickerPropOnError = (props: {
+    type: 'outOfRange';
+    inputValue?: string;
+    value?: Date | null;
+} | {
+    type: 'inExclude';
+    inputValue?: string;
+    value?: Date | null;
+}) => void;
+type DatePickerOpenControlledProps = {
+    /** Текущее состояние списка. Если `true`, список отображается. */
+    open?: boolean;
+    /** Состояние открытие по умолчанию (неконтролируемый компонент) */
+    defaultOpen?: never;
+};
+type DatePickerOpenUncontrolledProps = {
+    /** Текущее состояние списка. Если `true`, список отображается. */
+    open?: never;
+    /** Состояние открытие по умолчанию (неконтролируемый компонент) */
+    defaultOpen?: boolean;
+};
+export type DatePickerProps = {
+    /** Выбранная дата */
+    value?: Date | null;
+    /** Выбранная дата по умолчанию (неконтролируемое состояние) */
+    defaultValue?: Date | null;
+    /** Функция обратного вызова, которая будет вызвана при выборе значения */
+    onChange?: DatePickerOnChange;
+    /** Введённое значение в текстовом поле */
+    onInputChange?: DatePickerOnInputChange;
+    /** Функция обратного вызова, которая будет вызвана когда компонент запрашивает закрытие */
+    onClose?: () => void;
+    /** Функция обратного вызова, которая будет вызвана когда компонент запрашивает открытие */
+    onOpen?: () => void;
+    /** Свойства компонента Calendar */
+    calendarProps?: CalendarBaseProps;
+    /** Свойства компонента Popover */
+    popoverProps?: PopoverBaseProps;
+    /** Текст для кнопки очистки поля */
+    clearText?: string;
+    /** Если {true}, то не отображает кнопку закрытия */
+    disableClearButton?: boolean;
+    /** Функция обратно вызова, которая сработает если пользователь ввёл дату с ошибкой */
+    onError?: DatePickerPropOnError;
+} & Omit<ComponentPropsWithRef<'div'>, 'onChange' | 'defaultValue' | 'onError'> & Pick<CalendarBaseProps, 'minDate' | 'maxDate' | 'exclude' | 'offsetDate'> & Pick<InputProps, 'label' | 'hint' | 'onKeyDown' | 'size' | 'error' | 'required' | 'fullWidth' | 'disabled' | 'renderLeft' | 'renderRight' | 'placeholder' | 'inputProps'> & (DatePickerOpenControlledProps | DatePickerOpenUncontrolledProps);
+export {};

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

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

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

@@ -0,0 +1 @@
+export declare const formatDateToString: (date: Date | undefined | null) => string;

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

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatDateToString = void 0;
+var formatDateToString = function (date) {
+    if (!date) {
+        return '';
+    }
+    var year = new Intl.DateTimeFormat('en', { year: 'numeric' }).format(date);
+    var month = new Intl.DateTimeFormat('en', { month: '2-digit' }).format(date);
+    var day = new Intl.DateTimeFormat('en', { day: '2-digit' }).format(date);
+    return "".concat(day, ".").concat(month, ".").concat(year);
+};
+exports.formatDateToString = formatDateToString;

package/__inner__/cjs/components/DatePicker/utils/formatDateToString/index.d.ts

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

package/__inner__/cjs/components/DatePicker/utils/formatDateToString/index.js

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

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

@@ -0,0 +1 @@
+export declare const formatStringToDate: (value: string) => Date | null;

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

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatStringToDate = void 0;
+var tslib_1 = require("tslib");
+var utils_1 = require("../../components/DateInput/utils");
+var formatStringToDate = function (value) {
+    var _a = tslib_1.__read(value.split('.'), 3), date = _a[0], month = _a[1], year = _a[2];
+    if (!(date && month && year) || !(0, utils_1.isCompleted)(value)) {
+        return null;
+    }
+    return new Date(+year, +month - 1, +date);
+};
+exports.formatStringToDate = formatStringToDate;

package/__inner__/cjs/components/DatePicker/utils/formatStringToDate/index.d.ts

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

package/__inner__/cjs/components/DatePicker/utils/formatStringToDate/index.js

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

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

@@ -0,0 +1,5 @@
+export * from './matchCalendarSizeToFormElement';
+export * from './formatDateToString';
+export * from './formatStringToDate';
+export * from './isOutOfRange';
+export * from './isInExclude';

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./matchCalendarSizeToFormElement"), exports);
+tslib_1.__exportStar(require("./formatDateToString"), exports);
+tslib_1.__exportStar(require("./formatStringToDate"), exports);
+tslib_1.__exportStar(require("./isOutOfRange"), exports);
+tslib_1.__exportStar(require("./isInExclude"), exports);

package/__inner__/cjs/components/DatePicker/utils/isInExclude/index.d.ts

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

package/__inner__/cjs/components/DatePicker/utils/isInExclude/index.js

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

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

@@ -0,0 +1,2 @@
+import type { DatePickerProps } from '../../index';
+export declare const isInExclude: ({ exclude, value, }: Pick<DatePickerProps, 'exclude' | 'value'>) => boolean;

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isInExclude = void 0;
+var isInExclude = function (_a) {
+    var _b, _c;
+    var exclude = _a.exclude, value = _a.value;
+    if (!exclude || !value) {
+        return false;
+    }
+    return (!!(exclude.date &&
+        !((_b = exclude.date) === null || _b === void 0 ? void 0 : _b.every(function (date) { return date.getTime() !== value.getTime(); }))) ||
+        !!(exclude.day && !((_c = exclude.day) === null || _c === void 0 ? void 0 : _c.every(function (date) { return date !== value.getDay(); }))));
+};
+exports.isInExclude = isInExclude;

package/__inner__/cjs/components/DatePicker/utils/isOutOfRange/index.d.ts

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

package/__inner__/cjs/components/DatePicker/utils/isOutOfRange/index.js

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

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

@@ -0,0 +1,2 @@
+import type { DatePickerProps } from '../../index';
+export declare const isOutOfRange: ({ minDate, maxDate, value, }: Pick<DatePickerProps, 'minDate' | 'maxDate' | 'value'>) => boolean;

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

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isOutOfRange = void 0;
+var isOutOfRange = function (_a) {
+    var minDate = _a.minDate, maxDate = _a.maxDate, value = _a.value;
+    if (!minDate || !maxDate || !value) {
+        return false;
+    }
+    return (minDate.getTime() > (value === null || value === void 0 ? void 0 : value.getTime()) || maxDate.getTime() < (value === null || value === void 0 ? void 0 : value.getTime()));
+};
+exports.isOutOfRange = isOutOfRange;

package/__inner__/cjs/components/DatePicker/utils/matchCalendarSizeToFormElement/index.d.ts

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

package/__inner__/cjs/components/DatePicker/utils/matchCalendarSizeToFormElement/index.js

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

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

@@ -0,0 +1,5 @@
+import type { FormElementSizeVariant } from '../../../../types/FormElementSizeVariant';
+import type { CalendarSizeVariant } from '../../../Calendar';
+export declare const matchCalendarSizeToFormElement: {
+    [key in FormElementSizeVariant]: CalendarSizeVariant;
+};

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.matchCalendarSizeToFormElement = void 0;
+exports.matchCalendarSizeToFormElement = {
+    '2xs': 's',
+    xs: 's',
+    s: 's',
+    m: 'm',
+    l: 'l',
+};

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

@@ -25,7 +25,6 @@
     color: var(--textfield-color);
     box-sizing: border-box;
     block-size: var(--textfield-input-height);
-
     font: inherit;
   }
   .Input-Field::placeholder {

package/__inner__/cjs/components/Input/Input.js

@@ -41,7 +41,7 @@ exports.Input = (0, react_1.forwardRef)(function (inProps, ref) {
         },
     });
     return (react_1.default.createElement(FieldControl_1.FieldControl, tslib_1.__assign({ size: size, error: error, disabled: disabled, required: required, fullWidth: fullWidth }, other, { ref: ref, className: (0, exports.cnInput)({}, [className]) }),
-        react_1.default.createElement("label", tslib_1.__assign({}, bodyProps, { className: (0, exports.cnInput)('Body'), ref: (0, useMultiRef_1.useMultiRef)([bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.ref, bodyInnerRef]) }),
+        react_1.default.createElement("label", tslib_1.__assign({}, bodyProps, { className: (0, exports.cnInput)('Body', [bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.className]), ref: (0, useMultiRef_1.useMultiRef)([bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.ref, bodyInnerRef]) }),
             react_1.default.createElement(FieldIcon_1.FieldIcon, { icon: renderLeft }),
             react_1.default.createElement("div", { className: (0, exports.cnInput)('FieldContainer') },
                 react_1.default.createElement(FieldLabel_1.FieldLabel, tslib_1.__assign({}, labelProps, { ref: labelRef || (labelProps === null || labelProps === void 0 ? void 0 : labelProps.ref), className: labelProps === null || labelProps === void 0 ? void 0 : labelProps.className }), label),

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

@@ -15,6 +15,7 @@ import type { ChipProps as ChiPropsNext } from '../ChipNext';
 import type { CollapseProps } from '../Collapse';
 import type { ContainerProps } from '../Container';
 import type { DataListProps } from '../DataList';
+import type { DatePickerProps } from '../DatePicker';
 import type { DialogProps } from '../Dialog';
 import type { DividerProps } from '../Divider';
 import type { DrawerProps } from '../Drawer';
@@ -86,6 +87,7 @@ export type Theme = {
         Container?: Partial<ContainerProps>;
         DataList?: Partial<DataListProps>;
         Dialog?: Partial<DialogProps>;
+        DatePicker?: Partial<DatePickerProps>;
         Divider?: Partial<DividerProps>;
         Drawer?: Partial<DrawerProps>;
         FieldControl?: Partial<FieldControlProps>;

package/__inner__/cjs/locale/locale.js

@@ -68,6 +68,10 @@ exports.ruRU = {
                 },
             },
         },
+        DatePicker: {
+            clearText: 'Очистить',
+            placeholder: 'ДД.ММ.ГГГГ',
+        },
     },
 };
 exports.kkKZ = {
@@ -136,6 +140,10 @@ exports.kkKZ = {
                 },
             },
         },
+        DatePicker: {
+            clearText: 'Тазалау',
+            placeholder: 'КК.АА.ЖЖЖЖ',
+        },
     },
 };
 exports.enUS = {
@@ -205,5 +213,9 @@ exports.enUS = {
                 },
             },
         },
+        DatePicker: {
+            clearText: 'Clear',
+            placeholder: 'DD.MM.YYYY',
+        },
     },
 };

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

@@ -2,6 +2,7 @@ import { __assign, __read, __rest, __spreadArray } from "tslib";
 import './Autocomplete.css';
 import React, { forwardRef, useEffect, useRef, useState } from 'react';
 import { useControlled } from '../../hooks/useControlled';
+import { useMultiRef } from '../../hooks/useMultiRef';
 import { useMutableRef } from '../../hooks/useMutableRef';
 import { useThemeProps } from '../../hooks/useThemeProps';
 import { cn } from '../../utils/classname';
@@ -17,8 +18,10 @@ function AutocompleteRender(inProps, ref) {
         props: inProps,
         name: 'Autocomplete',
     });
-    var _a = withDefaultGetters(props), _b = _a.disabled, disabled = _b === void 0 ? AUTOCOMPLETE_DEFAULT_DISABLED : _b, _c = _a.required, required = _c === void 0 ? AUTOCOMPLETE_DEFAULT_REQUIRED : _c, _d = _a.autoFocus, autoFocus = _d === void 0 ? AUTOCOMPLETE_DEFAULT_AUTOFOCUS : _d, _e = _a.fullWidth, fullWidth = _e === void 0 ? AUTOCOMPLETE_DEFAULT_FULLWIDTH : _e, _f = _a.size, size = _f === void 0 ? AUTOCOMPLETE_DEFAULT_SIZE : _f, _g = _a.allowCustomValue, allowCustomValue = _g === void 0 ? AUTOCOMPLETE_DEFAULT_ALLOW_CUSTOM_VALUE : _g, _h = _a.disableShowChevron, disableShowChevron = _h === void 0 ? AUTOCOMPLETE_DEFAULT_DISABLE_SHOW_CHEVRON : _h, _j = _a.disableClearButton, disableClearButton = _j === void 0 ? AUTOCOMPLETE_DEFAULT_DISABLE_CLEAR_BUTTON : _j, _k = _a.disableShowEmptyOptionsList, disableShowEmptyOptionsList = _k === void 0 ? AUTOCOMPLETE_DEFAULT_DISABLE_SHOW_EMPTY_OPTIONS_LIST : _k, _l = _a.disableCloseOnSelect, disableCloseOnSelect = _l === void 0 ? AUTOCOMPLETE_DEFAULT_DISABLE_CLOSE_ON_SELECT : _l, _m = _a.renderInput, renderInput = _m === void 0 ? function (props) { return React.createElement(Input, __assign({}, props, { ref: ref })); } : _m, searchFunctionProp = _a.searchFunction, renderOptionProp = _a.renderOption, inputValueProp = _a.inputValue, className = _a.className, valueProp = _a.value, options = _a.options, defaultValue = _a.defaultValue, error = _a.error, onChange = _a.onChange, onInputChange = _a.onInputChange, label = _a.label, placeholder = _a.placeholder, renderLeft = _a.renderLeft, renderRight = _a.renderRight, hint = _a.hint, getOptionKey = _a.getOptionKey, getOptionLabel = _a.getOptionLabel, getOptionDisabled = _a.getOptionDisabled, dataListProps = _a.dataListProps, onCloseProp = _a.onClose, onOpenProp = _a.onOpen, openProp = _a.open, defaultOpen = _a.defaultOpen, loading = _a.loading, inputProps = _a.inputProps, onKeyDown = _a.onKeyDown, noOptionsText = _a.noOptionsText, clearText = _a.clearText, openText = _a.openText, loadingText = _a.loadingText, closeText = _a.closeText, other = __rest(_a, ["disabled", "required", "autoFocus", "fullWidth", "size", "allowCustomValue", "disableShowChevron", "disableClearButton", "disableShowEmptyOptionsList", "disableCloseOnSelect", "renderInput", "searchFunction", "renderOption", "inputValue", "className", "value", "options", "defaultValue", "error", "onChange", "onInputChange", "label", "placeholder", "renderLeft", "renderRight", "hint", "getOptionKey", "getOptionLabel", "getOptionDisabled", "dataListProps", "onClose", "onOpen", "open", "defaultOpen", "loading", "inputProps", "onKeyDown", "noOptionsText", "clearText", "openText", "loadingText", "closeText"]);
+    var _a = withDefaultGetters(props), _b = _a.disabled, disabled = _b === void 0 ? AUTOCOMPLETE_DEFAULT_DISABLED : _b, _c = _a.required, required = _c === void 0 ? AUTOCOMPLETE_DEFAULT_REQUIRED : _c, _d = _a.autoFocus, autoFocus = _d === void 0 ? AUTOCOMPLETE_DEFAULT_AUTOFOCUS : _d, _e = _a.fullWidth, fullWidth = _e === void 0 ? AUTOCOMPLETE_DEFAULT_FULLWIDTH : _e, _f = _a.size, size = _f === void 0 ? AUTOCOMPLETE_DEFAULT_SIZE : _f, _g = _a.allowCustomValue, allowCustomValue = _g === void 0 ? AUTOCOMPLETE_DEFAULT_ALLOW_CUSTOM_VALUE : _g, _h = _a.disableShowChevron, disableShowChevron = _h === void 0 ? AUTOCOMPLETE_DEFAULT_DISABLE_SHOW_CHEVRON : _h, _j = _a.disableClearButton, disableClearButton = _j === void 0 ? AUTOCOMPLETE_DEFAULT_DISABLE_CLEAR_BUTTON : _j, _k = _a.disableShowEmptyOptionsList, disableShowEmptyOptionsList = _k === void 0 ? AUTOCOMPLETE_DEFAULT_DISABLE_SHOW_EMPTY_OPTIONS_LIST : _k, _l = _a.disableCloseOnSelect, disableCloseOnSelect = _l === void 0 ? AUTOCOMPLETE_DEFAULT_DISABLE_CLOSE_ON_SELECT : _l, _m = _a.renderInput, renderInput = _m === void 0 ? function (props) { return React.createElement(Input, __assign({}, props, { ref: ref })); } : _m, searchFunctionProp = _a.searchFunction, renderOptionProp = _a.renderOption, inputValueProp = _a.inputValue, className = _a.className, valueProp = _a.value, options = _a.options, defaultValue = _a.defaultValue, error = _a.error, onChange = _a.onChange, onInputChange = _a.onInputChange, label = _a.label, placeholder = _a.placeholder, renderLeft = _a.renderLeft, renderRight = _a.renderRight, hint = _a.hint, getOptionKey = _a.getOptionKey, getOptionLabel = _a.getOptionLabel, getOptionDisabled = _a.getOptionDisabled, dataListProps = _a.dataListProps, onCloseProp = _a.onClose, onOpenProp = _a.onOpen, openProp = _a.open, defaultOpen = _a.defaultOpen, loading = _a.loading, inputProps = _a.inputProps, bodyProps = _a.bodyProps, onKeyDown = _a.onKeyDown, noOptionsText = _a.noOptionsText, clearText = _a.clearText, openText = _a.openText, loadingText = _a.loadingText, closeText = _a.closeText, other = __rest(_a, ["disabled", "required", "autoFocus", "fullWidth", "size", "allowCustomValue", "disableShowChevron", "disableClearButton", "disableShowEmptyOptionsList", "disableCloseOnSelect", "renderInput", "searchFunction", "renderOption", "inputValue", "className", "value", "options", "defaultValue", "error", "onChange", "onInputChange", "label", "placeholder", "renderLeft", "renderRight", "hint", "getOptionKey", "getOptionLabel", "getOptionDisabled", "dataListProps", "onClose", "onOpen", "open", "defaultOpen", "loading", "inputProps", "bodyProps", "onKeyDown", "noOptionsText", "clearText", "openText", "loadingText", "closeText"]);
     var anchorRef = useRef(null);
+    var lastInputValue = useRef('');
+    var inputBodyRef = useMultiRef([anchorRef, bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.ref]);
     var _o = __read(useControlled({
         value: inputValueProp,
         defaultValue: '',
@@ -51,47 +54,43 @@ function AutocompleteRender(inProps, ref) {
     var showNoOptions = !hasOptions && !loading;
     var showLoading = !hasOptions && !!loading;
     var _s = __read(useState(undefined), 2), search = _s[0], setSearch = _s[1];
-    /** Эффект – фильтрация списка */
+    var changeInputValue = function (e, value) {
+        var _a;
+        setInputValue(value);
+        (_a = savedOnInputChange.current) === null || _a === void 0 ? void 0 : _a.call(savedOnInputChange, e, value);
+    };
+    var callOnChange = function (e, value) {
+        var inputValue = value ? getOptionLabel(value) : '';
+        setValueState(value);
+        onChange === null || onChange === void 0 ? void 0 : onChange(e, value);
+        changeInputValue(null, inputValue);
+    };
+    /** Эффект – фильтрация списка при изменении опций */
     useEffect(function () {
-        if (!open) {
+        if (!open)
             return;
-        }
         setFilteredOptions(search ? search(options) : __spreadArray([], __read(options), false));
     }, [search, options, open, searchFunctionProp]);
     /** Эффект – синхронизируем значение текстового поля со значением в списке */
     useEffect(function () {
-        var _a, _b;
-        var value = valueState ? (_a = savedGetOptionLabel.current) === null || _a === void 0 ? void 0 : _a.call(savedGetOptionLabel, valueState) : '';
-        if (allowCustomValue) {
-            value = inputValue || '';
-        }
-        if (value !== inputValue) {
-            setInputValue(value);
-            (_b = savedOnInputChange.current) === null || _b === void 0 ? void 0 : _b.call(savedOnInputChange, null, value);
+        var _a;
+        if (allowCustomValue)
+            return;
+        lastInputValue.current = valueState
+            ? (_a = savedGetOptionLabel.current) === null || _a === void 0 ? void 0 : _a.call(savedGetOptionLabel, valueState)
+            : '';
+        if (lastInputValue.current !== inputValue) {
+            changeInputValue(null, lastInputValue.current);
         }
-    }, [valueState]);
+    }, [valueState, allowCustomValue]);
     /** Эффект – автофокусировка в текстовом поле */
     useEffect(function () {
         var _a;
-        if (autoFocus) {
+        if (autoFocus)
             (_a = anchorRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-        }
     }, [autoFocus]);
-    /** Актуализация значения текстового поля после его покидания */
-    var onBlur = function (e) {
-        var _a;
-        (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
-        if (allowCustomValue) {
-            return;
-        }
-        var value = valueState ? getOptionLabel(valueState) : '';
-        if (inputValue !== value) {
-            setInputValue(value);
-            onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(null, value);
-        }
-    };
-    /** Ждем выполнения анимации на закрытие и делаем сброс */
-    var onExited = function () {
+    /** Ждём выполнения анимации на закрытие и делаем сброс функции фильтрации */
+    var handleExited = function () {
         var _a;
         setSearch(undefined);
         (_a = dataListProps === null || dataListProps === void 0 ? void 0 : dataListProps.onExited) === null || _a === void 0 ? void 0 : _a.call(dataListProps);
@@ -110,21 +109,26 @@ function AutocompleteRender(inProps, ref) {
     var handleToggle = function () {
         if (disabled)
             return;
-        if (open) {
+        if (open)
             handleClose();
-        }
-        else {
+        else
             handleOpen();
-        }
     };
     /** Очистка поля */
-    var onClear = function (e) {
-        setValueState(null);
-        setInputValue('');
-        onChange === null || onChange === void 0 ? void 0 : onChange(e, null);
-        onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(null, '');
+    var handleClear = function (e) {
+        callOnChange(e, null);
         setSearch(undefined);
     };
+    /** Актуализация значения текстового поля после его покидания */
+    var handleBlur = function (e) {
+        var _a;
+        (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
+        if (allowCustomValue)
+            return;
+        if (inputValue !== lastInputValue.current) {
+            changeInputValue(null, lastInputValue.current);
+        }
+    };
     /** Открытие списка по клику на текстовом поле */
     var handleClickOnInput = function (e) {
         var _a;
@@ -132,49 +136,39 @@ function AutocompleteRender(inProps, ref) {
         (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onClick) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
     };
     /** Управление элементом контроля через клавиатуру */
-    var handleKeyDown = function (event) {
-        if (isKeys(event, ['ArrowDown', 'ArrowUp']) && !open) {
-            event.preventDefault();
+    var handleKeyDown = function (e) {
+        if (isKeys(e, ['ArrowDown', 'ArrowUp']) && !open) {
+            e.preventDefault();
             handleToggle();
         }
-        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
     };
     /** Событие ввода значения в текстовом поле */
     var handleChangeInput = function (e) {
         var value = e.target.value;
         // Открываем список при вводе первого символа (при условии, что список еще не открыт)
-        if (value.length && !open) {
+        if (value.length && !open)
             handleOpen();
+        if (value) {
+            changeInputValue(e, value);
         }
-        // Делаем сброс при пустом значении в текстовом поле
-        if (!value) {
-            setValueState(null);
-            onChange === null || onChange === void 0 ? void 0 : onChange(e, null);
+        else {
+            callOnChange(e, null);
         }
-        // Назначаем значение
-        setInputValue(value);
-        onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(e, value);
         // Задаем функцию фильтрации
         setSearch(function () { return function (options) { return searchFunction(__spreadArray([], __read(options), false), value); }; });
     };
     /** Событие выбора значения из раскрывающегося списка */
-    var handleChangeDataList = function (event, _a) {
+    var handleChangeDataList = function (e, _a) {
         var value = _a.value;
         var selectedOption = filteredOptions === null || filteredOptions === void 0 ? void 0 : filteredOptions.find(function (option) { return (getOptionKey === null || getOptionKey === void 0 ? void 0 : getOptionKey(option)) === value; });
-        if (selectedOption) {
-            var newInputValue = getOptionLabel(selectedOption);
-            setValueState(selectedOption);
-            onChange === null || onChange === void 0 ? void 0 : onChange(event, selectedOption);
-            setInputValue(newInputValue);
-            onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(null, newInputValue);
-        }
+        callOnChange(e, selectedOption || null);
         // Закрываем список после выбора
-        if (!disableCloseOnSelect) {
+        if (!disableCloseOnSelect)
             handleClose();
-        }
     };
     /** Отображение текстового поля */
-    var input = renderInput(__assign(__assign({ size: size, hint: hint, disabled: disabled, label: label, required: required, error: error, fullWidth: fullWidth, placeholder: placeholder, renderLeft: renderLeft }, other), { renderRight: (React.createElement(AutocompleteRenderRight, { open: open, size: size, disabled: disabled, clearText: clearText, closeText: closeText, openText: openText, hasValue: !!inputValue, onClear: onClear, onOpen: handleToggle, renderRight: renderRight, disableShowChevron: disableShowChevron, disableClearButton: disableClearButton })), onChange: handleChangeInput, onKeyDown: handleKeyDown, value: inputValue || '', inputProps: __assign(__assign({}, inputProps), { onBlur: onBlur, onClick: handleClickOnInput }), bodyProps: { ref: anchorRef, 'aria-expanded': open }, className: cnAutocomplete({ size: size, hasChevron: !disableShowChevron }, [
+    var input = renderInput(__assign(__assign({ size: size, hint: hint, disabled: disabled, label: label, required: required, error: error, fullWidth: fullWidth, placeholder: placeholder, renderLeft: renderLeft }, other), { renderRight: (React.createElement(AutocompleteRenderRight, { open: open, size: size, disabled: disabled, clearText: clearText, closeText: closeText, openText: openText, hasValue: !!inputValue, onClear: handleClear, onOpen: handleToggle, renderRight: renderRight, disableShowChevron: disableShowChevron, disableClearButton: disableClearButton })), onChange: handleChangeInput, onKeyDown: handleKeyDown, value: inputValue || '', inputProps: __assign(__assign({}, inputProps), { onBlur: handleBlur, onClick: handleClickOnInput }), bodyProps: __assign(__assign({ 'aria-expanded': open }, bodyProps), { ref: inputBodyRef }), className: cnAutocomplete({ size: size, hasChevron: !disableShowChevron }, [
             className,
         ]), ref: ref }));
     /** Отображение опций */
@@ -191,7 +185,7 @@ function AutocompleteRender(inProps, ref) {
     });
     return (React.createElement(React.Fragment, null,
         input,
-        React.createElement(DataList, __assign({ size: size, equalAnchorWidth: true, offset: [0, 4], placement: "bottom-start" }, dataListProps, { open: open, onExited: onExited, onClose: handleClose, anchorRef: anchorRef, selected: dataListValue, onSelect: handleChangeDataList, listProps: __assign({ role: 'listbox' }, dataListProps === null || dataListProps === void 0 ? void 0 : dataListProps.listProps) }),
+        React.createElement(DataList, __assign({ size: size, equalAnchorWidth: true, offset: [0, 4], placement: "bottom-start" }, dataListProps, { open: open, onClose: handleClose, anchorRef: anchorRef, onExited: handleExited, selected: dataListValue, onSelect: handleChangeDataList, listProps: __assign({ role: 'listbox' }, dataListProps === null || dataListProps === void 0 ? void 0 : dataListProps.listProps) }),
             renderOptions,
             !disableShowEmptyOptionsList && (React.createElement(AutocompleteNoOptions, { showNoOptions: showNoOptions, noOptionsText: noOptionsText })),
             React.createElement(AutocompleteLoading, { showLoading: showLoading, loadingText: loadingText, size: size }))));

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

@@ -80,6 +80,9 @@ export declare function withDefaultGetters<OPTION>(props: AutocompleteProps<OPTI
     } & {
         'data-testid'?: string | undefined;
     }) | undefined;
+    bodyProps?: (Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
+        ref?: ((instance: HTMLLabelElement | null) => void) | import("react").RefObject<HTMLLabelElement> | null | undefined;
+    }) | undefined;
     hintProps?: Omit<import("../FieldHint").FieldHintProps, "children"> | undefined;
 } & {
     open?: boolean | undefined;
@@ -177,6 +180,9 @@ export declare function withDefaultGetters<OPTION>(props: AutocompleteProps<OPTI
     } & {
         'data-testid'?: string | undefined;
     }) | undefined;
+    bodyProps?: (Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
+        ref?: ((instance: HTMLLabelElement | null) => void) | import("react").RefObject<HTMLLabelElement> | null | undefined;
+    }) | undefined;
     hintProps?: Omit<import("../FieldHint").FieldHintProps, "children"> | undefined;
 } & {
     open?: undefined;

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

@@ -31,7 +31,7 @@ type AutocompleteOpenUncontrolledProps = {
     /** Состояние открытие по умолчанию (неконтролируемый компонент) */
     defaultOpen?: boolean;
 };
-type AutocompleteInputProps = Pick<InputProps, 'placeholder' | 'autoFocus' | 'fullWidth' | 'disabled' | 'label' | 'required' | 'style' | 'error' | 'hint' | 'renderLeft' | 'renderRight' | 'className' | 'inputProps' | 'hintProps' | 'onKeyDown'>;
+type AutocompleteInputProps = Pick<InputProps, 'placeholder' | 'autoFocus' | 'fullWidth' | 'disabled' | 'label' | 'required' | 'style' | 'error' | 'hint' | 'renderLeft' | 'renderRight' | 'className' | 'inputProps' | 'hintProps' | 'bodyProps' | 'onKeyDown'>;
 type AutocompleteDataListProps = Partial<Omit<DataListProps, 'onClose' | 'open' | 'anchorRef' | 'multiple' | 'selected' | 'onSelect'>>;
 export type AutocompleteProps<OPTION = AutocompleteDefaultOption> = {
     /** Список вариантов выбора (опции) */

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

@@ -6,7 +6,7 @@ import type { CALENDAR_DEFAULT_AS } from './constants';
 export declare const calendarStepVariant: readonly ["days", "months", "years"];
 export declare const calendarSizeVariant: readonly ["s", "m", "l"];
 export type CalendarStepVariant = (typeof calendarStepVariant)[number];
-export type CalendarOnChange = (date: Date) => void;
+export type CalendarOnChange = (date: Date | null) => void;
 export type CalendarOnOffsetDateChange = (date: Date) => void;
 export type CalendarSizeVariant = (typeof calendarSizeVariant)[number];
 export type CalendarExclude = DPExcludeConfig;

package/__inner__/esm/components/DatePicker/DatePicker.css

@@ -0,0 +1,11 @@
+.DatePicker-RenderRight {
+    display: flex;
+    gap: var(--spacing-2xs);
+  }
+  .DatePicker-ClearButton {
+    visibility: hidden;
+    transition: visibility var(--transition-default);
+  }
+  .DatePicker-ClearButton_visibility {
+      visibility: visible;
+    }

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

@@ -0,0 +1,39 @@
+import './DatePicker.css';
+import React from 'react';
+import type { CalendarOnChange } from '../Calendar';
+export declare const cnDatePicker: import("@bem-react/classname").ClassNameFormatter;
+export declare const DatePicker: React.ForwardRefExoticComponent<(Omit<{
+    value?: Date | null | undefined;
+    defaultValue?: Date | null | undefined;
+    onChange?: CalendarOnChange | undefined;
+    onInputChange?: import("./types").DatePickerOnInputChange | undefined;
+    onClose?: (() => void) | undefined;
+    onOpen?: (() => void) | undefined;
+    calendarProps?: import("../Calendar").CalendarBaseProps | undefined;
+    popoverProps?: import("../Popover").PopoverBaseProps | undefined;
+    clearText?: string | undefined;
+    disableClearButton?: boolean | undefined;
+    onError?: import("./types").DatePickerPropOnError | undefined;
+} & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+}, "defaultValue" | "onChange" | "onError"> & Pick<import("../Calendar").CalendarBaseProps, "exclude" | "offsetDate" | "minDate" | "maxDate"> & Pick<import("../Input").InputProps, "label" | "onKeyDown" | "disabled" | "placeholder" | "required" | "size" | "error" | "fullWidth" | "hint" | "renderLeft" | "renderRight" | "inputProps"> & {
+    open?: boolean | undefined;
+    defaultOpen?: undefined;
+}, "ref"> | Omit<{
+    value?: Date | null | undefined;
+    defaultValue?: Date | null | undefined;
+    onChange?: CalendarOnChange | undefined;
+    onInputChange?: import("./types").DatePickerOnInputChange | undefined;
+    onClose?: (() => void) | undefined;
+    onOpen?: (() => void) | undefined;
+    calendarProps?: import("../Calendar").CalendarBaseProps | undefined;
+    popoverProps?: import("../Popover").PopoverBaseProps | undefined;
+    clearText?: string | undefined;
+    disableClearButton?: boolean | undefined;
+    onError?: import("./types").DatePickerPropOnError | undefined;
+} & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+}, "defaultValue" | "onChange" | "onError"> & Pick<import("../Calendar").CalendarBaseProps, "exclude" | "offsetDate" | "minDate" | "maxDate"> & Pick<import("../Input").InputProps, "label" | "onKeyDown" | "disabled" | "placeholder" | "required" | "size" | "error" | "fullWidth" | "hint" | "renderLeft" | "renderRight" | "inputProps"> & {
+    open?: undefined;
+    defaultOpen?: boolean | undefined;
+}, "ref">) & React.RefAttributes<HTMLDivElement>>;