@gravity-ui/date-components 2.4.0 → 2.5.0

package/dist/cjs/components/Calendar/Calendar.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Calendar = void 0;
 const tslib_1 = require("tslib");

package/dist/cjs/components/CalendarView/CalendarView.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CalendarView = void 0;
 const tslib_1 = require("tslib");

package/dist/cjs/components/DateField/DateField.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DateField = void 0;
 const tslib_1 = require("tslib");
@@ -6,6 +7,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importDefault(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
 const cn_1 = require("../../utils/cn");
+const HiddenInput_1 = require("../HiddenInput/HiddenInput");
 const useDateFieldProps_1 = require("./hooks/useDateFieldProps");
 const useDateFieldState_1 = require("./hooks/useDateFieldState");
 require("./DateField.css");
@@ -20,8 +22,8 @@ function DateField(_a) {
             setActive(isFocusWithin);
         },
     });
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: b(null, className), style: props.style }, focusWithinProps, { children: [(0, jsx_runtime_1.jsx)(uikit_1.TextInput, Object.assign({}, inputProps, { value: state.isEmpty && !isActive && props.placeholder ? '' : inputProps.value })), (0, jsx_runtime_1.jsx)("input", { type: "text", hidden: true, name: props.name, value: state.value ? state.value.toISOString() : '', 
-                // Ignore React warning
-                onChange: () => { } })] })));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: b(null, className), style: props.style }, focusWithinProps, { children: [(0, jsx_runtime_1.jsx)(uikit_1.TextInput, Object.assign({}, inputProps, { value: state.isEmpty && !isActive && props.placeholder ? '' : inputProps.value })), (0, jsx_runtime_1.jsx)(HiddenInput_1.HiddenInput, { name: props.name, value: state.value, toStringValue: (value) => { var _a; return (_a = value === null || value === void 0 ? void 0 : value.toISOString()) !== null && _a !== void 0 ? _a : ''; }, onReset: (value) => {
+                    state.setDate(value);
+                }, disabled: state.disabled, form: props.form })] })));
 }
 exports.DateField = DateField;

package/dist/cjs/components/DateField/hooks/useBaseDateFieldState.d.ts

@@ -37,6 +37,8 @@ export type DateFieldState<T = DateTime> = {
     displayValue: T;
     /** Sets the field's value. */
     setValue: (value: T) => void;
+    /** Sets the date value. */
+    setDate: (value: T | null) => void;
     /** Formatted value */
     text: string;
     /** Whether the field is read only. */

package/dist/cjs/components/DateField/hooks/useBaseDateFieldState.js

@@ -34,6 +34,7 @@ function useBaseDateFieldState(props) {
         isEmpty,
         displayValue,
         setValue,
+        setDate,
         text: (0, utils_1.formatSections)(editableSections),
         readOnly: props.readOnly,
         disabled: props.disabled,

package/dist/cjs/components/DateField/hooks/useDateFieldState.js

@@ -139,7 +139,7 @@ function useDateFieldState(props) {
         }).timeZone(timeZone);
     }
     function setValueFromString(str) {
-        const date = (0, utils_1.parseDateFromString)(str, props.format || 'L', timeZone);
+        const date = (0, utils_1.parseDateFromString)(str, format, timeZone);
         if ((0, date_utils_1.isValid)(date)) {
             handleUpdateDate(date);
             return true;

package/dist/cjs/components/DateField/utils.d.ts

@@ -1,7 +1,6 @@
 import type { DateTime } from '@gravity-ui/date-utils';
 import type { DateFieldSection, DateFieldSectionType, DateFieldSectionWithoutPosition } from './types';
 export declare const EDITABLE_SEGMENTS: Partial<Record<DateFieldSectionType, boolean>>;
-export declare function expandFormat(format: string): string;
 export declare function getSectionLimits(section: DateFieldSectionWithoutPosition, date: DateTime): {
     minValue: number;
     maxValue: number;
@@ -9,7 +8,7 @@ export declare function getSectionLimits(section: DateFieldSectionWithoutPositio
     minValue?: undefined;
     maxValue?: undefined;
 };
-export declare function getSectionValue(sections: DateFieldSectionWithoutPosition, date: DateTime): number | undefined;
+export declare function getSectionValue(section: DateFieldSectionWithoutPosition, date: DateTime): number | undefined;
 export declare function getDurationUnitFromSectionType(type: DateFieldSectionType): "year" | "month" | "day" | "hour" | "minute" | "second" | "date";
 export declare function addSegment(section: DateFieldSection, date: DateTime, amount: number): DateTime;
 export declare function setSegment(section: DateFieldSection, date: DateTime, amount: number): DateTime;

package/dist/cjs/components/DateField/utils.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useFormatSections = exports.isAllSegmentsValid = exports.parseDateFromString = exports.formatSections = exports.getCurrentEditableSectionIndex = exports.toEditableSection = exports.isEditableSection = exports.getEditableSections = exports.cleanString = exports.splitFormatIntoSections = exports.setSegment = exports.addSegment = exports.getDurationUnitFromSectionType = exports.getSectionValue = exports.getSectionLimits = exports.expandFormat = exports.EDITABLE_SEGMENTS = void 0;
+exports.useFormatSections = exports.isAllSegmentsValid = exports.parseDateFromString = exports.formatSections = exports.getCurrentEditableSectionIndex = exports.toEditableSection = exports.isEditableSection = exports.getEditableSections = exports.cleanString = exports.splitFormatIntoSections = exports.setSegment = exports.addSegment = exports.getDurationUnitFromSectionType = exports.getSectionValue = exports.getSectionLimits = exports.EDITABLE_SEGMENTS = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const date_utils_1 = require("@gravity-ui/date-utils");
@@ -16,17 +16,6 @@ exports.EDITABLE_SEGMENTS = {
     dayPeriod: true,
     weekday: true,
 };
-function expandFormat(format) {
-    const localeFormats = date_utils_1.settings.getLocaleData().formats;
-    const getShortLocalizedFormatFromLongLocalizedFormat = (formatBis) => formatBis.replace(/(\[[^\]]+])|(MMMM|MM|DD|dddd)/g, (_, escapeSequence, localizedFormat) => escapeSequence || localizedFormat.slice(1));
-    return format.replace(/(\[[^\]]+])|(LTS?|l{1,4}|L{1,4})/g, (_, escapeSequence, localizedFormat) => {
-        const LongLocalizedFormat = localizedFormat && localizedFormat.toUpperCase();
-        return (escapeSequence ||
-            localeFormats[localizedFormat] ||
-            getShortLocalizedFormatFromLongLocalizedFormat(localeFormats[LongLocalizedFormat]));
-    });
-}
-exports.expandFormat = expandFormat;
 const escapedCharacters = { start: '[', end: ']' };
 const formatTokenMap = {
     // Year
@@ -148,13 +137,13 @@ function getSectionLimits(section, date) {
     return {};
 }
 exports.getSectionLimits = getSectionLimits;
-function getSectionValue(sections, date) {
-    const type = sections.type;
+function getSectionValue(section, date) {
+    const type = section.type;
     switch (type) {
         case 'year': {
-            return isFourDigitYearFormat(sections.format)
+            return isFourDigitYearFormat(section.format)
                 ? date.year()
-                : Number(date.format(sections.format));
+                : Number(date.format(section.format));
         }
         case 'month':
         case 'hour':
@@ -329,7 +318,7 @@ function getSectionPlaceholder(sectionConfig, currentTokenValue) {
 }
 function splitFormatIntoSections(format) {
     const sections = [];
-    const expandedFormat = expandFormat(format);
+    const expandedFormat = (0, date_utils_1.expandFormat)(format);
     let currentTokenValue = '';
     let isSeparator = false;
     let isInEscapeBoundary = false;

package/dist/cjs/components/DatePicker/DatePicker.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DatePicker = void 0;
 const tslib_1 = require("tslib");
@@ -8,6 +9,7 @@ const icons_1 = require("@gravity-ui/icons");
 const uikit_1 = require("@gravity-ui/uikit");
 const Calendar_1 = require("../Calendar");
 const DateField_1 = require("../DateField");
+const HiddenInput_1 = require("../HiddenInput/HiddenInput");
 const MobileCalendar_1 = require("./MobileCalendar");
 const StubButton_1 = require("./StubButton");
 const useDatePickerProps_1 = require("./hooks/useDatePickerProps");
@@ -21,8 +23,8 @@ function DatePicker(_a) {
     const { groupProps, fieldProps, calendarButtonProps, popupProps, calendarProps, timeInputProps } = (0, useDatePickerProps_1.useDatePickerProps)(state, props);
     const isMobile = (0, uikit_1.useMobile)();
     const isOnlyTime = state.hasTime && !state.hasDate;
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, utils_1.b)(null, className) }, groupProps, { children: [isMobile ? ((0, jsx_runtime_1.jsx)(MobileCalendar_1.MobileCalendar, { props: props, state: state })) : (!isOnlyTime && ((0, jsx_runtime_1.jsx)("div", { ref: anchorRef, className: (0, utils_1.b)('popup-anchor'), children: (0, jsx_runtime_1.jsx)(uikit_1.Popup, Object.assign({ anchorRef: anchorRef }, popupProps, { children: (0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.b)('popup-content'), children: [typeof props.children === 'function' ? (props.children(calendarProps)) : ((0, jsx_runtime_1.jsx)(Calendar_1.Calendar, Object.assign({}, calendarProps))), state.hasTime && ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.b)('time-field-wrapper'), children: (0, jsx_runtime_1.jsx)(DateField_1.DateField, Object.assign({}, timeInputProps)) }))] }) })) }))), (0, jsx_runtime_1.jsx)(uikit_1.TextInput, Object.assign({}, fieldProps, { className: (0, utils_1.b)('field', { mobile: isMobile }), hasClear: !isMobile && fieldProps.hasClear, endContent: (0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [!isMobile && !isOnlyTime && ((0, jsx_runtime_1.jsx)(uikit_1.Button, Object.assign({}, calendarButtonProps, { children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Calendar }) }))), !isMobile && isOnlyTime && ((0, jsx_runtime_1.jsx)(StubButton_1.StubButton, { size: calendarButtonProps.size, icon: icons_1.Clock })), isMobile && ((0, jsx_runtime_1.jsx)(StubButton_1.StubButton, { size: calendarButtonProps.size, icon: isOnlyTime ? icons_1.Clock : icons_1.Calendar }))] }) })), (0, jsx_runtime_1.jsx)("input", { type: "text", hidden: true, name: props.name, value: state.value ? state.value.toISOString() : '', 
-                // Ignore React warning
-                onChange: () => { } })] })));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, utils_1.b)(null, className) }, groupProps, { children: [isMobile ? ((0, jsx_runtime_1.jsx)(MobileCalendar_1.MobileCalendar, { props: props, state: state })) : (!isOnlyTime && ((0, jsx_runtime_1.jsx)("div", { ref: anchorRef, className: (0, utils_1.b)('popup-anchor'), children: (0, jsx_runtime_1.jsx)(uikit_1.Popup, Object.assign({ anchorRef: anchorRef }, popupProps, { children: (0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.b)('popup-content'), children: [typeof props.children === 'function' ? (props.children(calendarProps)) : ((0, jsx_runtime_1.jsx)(Calendar_1.Calendar, Object.assign({}, calendarProps))), state.hasTime && ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.b)('time-field-wrapper'), children: (0, jsx_runtime_1.jsx)(DateField_1.DateField, Object.assign({}, timeInputProps)) }))] }) })) }))), (0, jsx_runtime_1.jsx)(uikit_1.TextInput, Object.assign({}, fieldProps, { className: (0, utils_1.b)('field', { mobile: isMobile }), hasClear: !isMobile && fieldProps.hasClear, endContent: (0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [!isMobile && !isOnlyTime && ((0, jsx_runtime_1.jsx)(uikit_1.Button, Object.assign({}, calendarButtonProps, { children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Calendar }) }))), !isMobile && isOnlyTime && ((0, jsx_runtime_1.jsx)(StubButton_1.StubButton, { size: calendarButtonProps.size, icon: icons_1.Clock })), isMobile && ((0, jsx_runtime_1.jsx)(StubButton_1.StubButton, { size: calendarButtonProps.size, icon: isOnlyTime ? icons_1.Clock : icons_1.Calendar }))] }) })), (0, jsx_runtime_1.jsx)(HiddenInput_1.HiddenInput, { name: props.name, value: state.value, toStringValue: (value) => { var _a; return (_a = value === null || value === void 0 ? void 0 : value.toISOString()) !== null && _a !== void 0 ? _a : ''; }, onReset: (value) => {
+                    state.setValue(value);
+                }, disabled: state.disabled, form: props.form })] })));
 }
 exports.DatePicker = DatePicker;

package/dist/cjs/components/DatePicker/MobileCalendar.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MobileCalendar = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");

package/dist/cjs/components/HiddenInput/HiddenInput.d.ts

@@ -0,0 +1,14 @@
+interface HiddenInputProps<T> {
+    value: T;
+    onReset?: (value: T) => void;
+    toStringValue?: (value: T) => string;
+    name?: string;
+    disabled?: boolean;
+    form?: string;
+}
+export declare function HiddenInput<T>({ name, value, onReset, form, disabled, toStringValue, }: HiddenInputProps<T>): import("react/jsx-runtime").JSX.Element | null;
+export declare function useFormResetHandler<T>({ initialValue, onReset, }: {
+    initialValue: T;
+    onReset?: (value: T) => void;
+}): (node: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | null) => void;
+export {};

package/dist/cjs/components/HiddenInput/HiddenInput.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFormResetHandler = exports.HiddenInput = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importDefault(require("react"));
+function HiddenInput({ name, value, onReset, form, disabled, toStringValue, }) {
+    const ref = useFormResetHandler({ initialValue: value, onReset });
+    if (!name) {
+        return null;
+    }
+    const v = toStringValue ? toStringValue(value) : `${value !== null && value !== void 0 ? value : ''}`;
+    return (0, jsx_runtime_1.jsx)("input", { ref: ref, type: "hidden", name: name, value: v, disabled: disabled, form: form });
+}
+exports.HiddenInput = HiddenInput;
+function useFormResetHandler({ initialValue, onReset, }) {
+    const [formElement, setFormElement] = react_1.default.useState(null);
+    const resetValue = react_1.default.useRef(initialValue);
+    react_1.default.useEffect(() => {
+        if (!formElement || !onReset) {
+            return undefined;
+        }
+        const handleReset = () => {
+            onReset(resetValue.current);
+        };
+        formElement.addEventListener('reset', handleReset);
+        return () => {
+            formElement.removeEventListener('reset', handleReset);
+        };
+    }, [formElement, onReset]);
+    const ref = react_1.default.useCallback((node) => {
+        var _a;
+        setFormElement((_a = node === null || node === void 0 ? void 0 : node.form) !== null && _a !== void 0 ? _a : null);
+    }, []);
+    return ref;
+}
+exports.useFormResetHandler = useFormResetHandler;

package/dist/cjs/components/RangeCalendar/RangeCalendar.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RangeCalendar = void 0;
 const tslib_1 = require("tslib");

package/dist/cjs/components/RangeDateField/RangeDateField.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RangeDateField = void 0;
 const tslib_1 = require("tslib");
@@ -7,10 +8,12 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
 const cn_1 = require("../../utils/cn");
 const useDateFieldProps_1 = require("../DateField/hooks/useDateFieldProps");
+const HiddenInput_1 = require("../HiddenInput/HiddenInput");
 const useRangeDateFieldState_1 = require("./hooks/useRangeDateFieldState");
 require("./RangeDateField.css");
 const b = (0, cn_1.block)('range-date-field');
 function RangeDateField(_a) {
+    var _b, _c;
     var { className } = _a, props = tslib_1.__rest(_a, ["className"]);
     const state = (0, useRangeDateFieldState_1.useRangeDateFieldState)(props);
     const { inputProps } = (0, useDateFieldProps_1.useDateFieldProps)(state, props);
@@ -20,6 +23,8 @@ function RangeDateField(_a) {
             setActive(isFocusWithin);
         },
     });
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: b(null, className), style: props.style }, focusWithinProps, { children: (0, jsx_runtime_1.jsx)(uikit_1.TextInput, Object.assign({}, inputProps, { value: state.isEmpty && !isActive && props.placeholder ? '' : inputProps.value })) })));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: b(null, className), style: props.style }, focusWithinProps, { children: [(0, jsx_runtime_1.jsx)(uikit_1.TextInput, Object.assign({}, inputProps, { value: state.isEmpty && !isActive && props.placeholder ? '' : inputProps.value })), (0, jsx_runtime_1.jsx)(HiddenInput_1.HiddenInput, { name: props.name, form: props.form, onReset: (v) => {
+                    state.setDate(v);
+                }, value: (_b = state.value) !== null && _b !== void 0 ? _b : null, toStringValue: (v) => (v ? v.start.toISOString() : ''), disabled: state.disabled }), (0, jsx_runtime_1.jsx)(HiddenInput_1.HiddenInput, { name: props.name, form: props.form, value: (_c = state.value) !== null && _c !== void 0 ? _c : null, toStringValue: (v) => (v ? v.end.toISOString() : ''), disabled: state.disabled })] })));
 }
 exports.RangeDateField = RangeDateField;

package/dist/cjs/components/RangeDatePicker/RangeDatePicker.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RangeDatePicker = void 0;
 const tslib_1 = require("tslib");
@@ -10,6 +11,7 @@ const cn_1 = require("../../utils/cn");
 const Calendar_1 = require("../Calendar");
 const DatePicker_1 = require("../DatePicker");
 const StubButton_1 = require("../DatePicker/StubButton");
+const HiddenInput_1 = require("../HiddenInput/HiddenInput");
 const RangeDateField_1 = require("../RangeDateField");
 const useRangeDatePickerState_1 = require("./hooks/useRangeDatePickerState");
 require("./RangeDatePicker.css");
@@ -20,6 +22,8 @@ function RangeDatePicker(_a) {
     const state = (0, useRangeDatePickerState_1.useRangeDatePickerState)(props);
     const { groupProps, fieldProps, calendarButtonProps, popupProps, calendarProps, timeInputProps } = (0, DatePicker_1.useDatePickerProps)(state, props);
     const isOnlyTime = state.hasTime && !state.hasDate;
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: b(null, className) }, groupProps, { children: [!isOnlyTime && ((0, jsx_runtime_1.jsx)("div", { ref: anchorRef, className: b('popup-anchor'), children: (0, jsx_runtime_1.jsx)(uikit_1.Popup, Object.assign({ anchorRef: anchorRef }, popupProps, { children: (0, jsx_runtime_1.jsxs)("div", { className: b('popup-content'), children: [typeof props.children === 'function' ? (props.children(Object.assign(Object.assign({}, calendarProps), { value: state.value }))) : ((0, jsx_runtime_1.jsx)(Calendar_1.RangeCalendar, Object.assign({}, calendarProps, { value: state.value }))), state.hasTime && ((0, jsx_runtime_1.jsx)("div", { className: b('time-field-wrapper'), children: (0, jsx_runtime_1.jsx)(RangeDateField_1.RangeDateField, Object.assign({}, timeInputProps)) }))] }) })) })), (0, jsx_runtime_1.jsx)(uikit_1.TextInput, Object.assign({}, fieldProps, { className: b('field'), hasClear: fieldProps.hasClear, endContent: (0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [!isOnlyTime && ((0, jsx_runtime_1.jsx)(uikit_1.Button, Object.assign({}, calendarButtonProps, { children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Calendar }) }))), isOnlyTime && ((0, jsx_runtime_1.jsx)(StubButton_1.StubButton, { size: calendarButtonProps.size, icon: icons_1.Clock }))] }) }))] })));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: b(null, className) }, groupProps, { children: [!isOnlyTime && ((0, jsx_runtime_1.jsx)("div", { ref: anchorRef, className: b('popup-anchor'), children: (0, jsx_runtime_1.jsx)(uikit_1.Popup, Object.assign({ anchorRef: anchorRef }, popupProps, { children: (0, jsx_runtime_1.jsxs)("div", { className: b('popup-content'), children: [typeof props.children === 'function' ? (props.children(Object.assign(Object.assign({}, calendarProps), { value: state.value }))) : ((0, jsx_runtime_1.jsx)(Calendar_1.RangeCalendar, Object.assign({}, calendarProps, { value: state.value }))), state.hasTime && ((0, jsx_runtime_1.jsx)("div", { className: b('time-field-wrapper'), children: (0, jsx_runtime_1.jsx)(RangeDateField_1.RangeDateField, Object.assign({}, timeInputProps)) }))] }) })) })), (0, jsx_runtime_1.jsx)(uikit_1.TextInput, Object.assign({}, fieldProps, { className: b('field'), hasClear: fieldProps.hasClear, endContent: (0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [!isOnlyTime && ((0, jsx_runtime_1.jsx)(uikit_1.Button, Object.assign({}, calendarButtonProps, { children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Calendar }) }))), isOnlyTime && ((0, jsx_runtime_1.jsx)(StubButton_1.StubButton, { size: calendarButtonProps.size, icon: icons_1.Clock }))] }) })), (0, jsx_runtime_1.jsx)(HiddenInput_1.HiddenInput, { name: props.name, form: props.form, onReset: (v) => {
+                    state.dateFieldState.setDate(v);
+                }, value: state.value, toStringValue: (v) => (v ? v.start.toISOString() : ''), disabled: state.disabled }), (0, jsx_runtime_1.jsx)(HiddenInput_1.HiddenInput, { name: props.name, form: props.form, value: state.value, toStringValue: (v) => (v ? v.end.toISOString() : ''), disabled: state.disabled })] })));
 }
 exports.RangeDatePicker = RangeDatePicker;

package/dist/cjs/components/RelativeDateField/RelativeDateField.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RelativeDateField = void 0;
 const tslib_1 = require("tslib");
@@ -8,12 +9,12 @@ const uikit_1 = require("@gravity-ui/uikit");
 const cn_1 = require("../../utils/cn");
 const Calendar_1 = require("../Calendar");
 const DateField_1 = require("../DateField");
+const HiddenInput_1 = require("../HiddenInput/HiddenInput");
 const useRelativeDateFieldProps_1 = require("./hooks/useRelativeDateFieldProps");
 const useRelativeDateFieldState_1 = require("./hooks/useRelativeDateFieldState");
 require("./RelativeDateField.css");
 const b = (0, cn_1.block)('relative-date-field');
 function RelativeDateField(props) {
-    var _a;
     const state = (0, useRelativeDateFieldState_1.useRelativeDateFieldState)(props);
     const { inputProps, calendarProps, timeInputProps } = (0, useRelativeDateFieldProps_1.useRelativeDateFieldProps)(state, props);
     const isMobile = (0, uikit_1.useMobile)();
@@ -31,8 +32,8 @@ function RelativeDateField(props) {
                         setOpen(true);
                     }
                     (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
-                }, onBlur: props.onBlur })), (0, jsx_runtime_1.jsx)("input", { type: "text", hidden: true, name: props.name, value: (_a = state.value) !== null && _a !== void 0 ? _a : '', 
-                // Ignore React warning
-                onChange: () => { } }), !isMobile && ((0, jsx_runtime_1.jsx)(uikit_1.Popup, { anchorRef: anchorRef, open: isOpen, children: (0, jsx_runtime_1.jsxs)("div", { className: b('popup-content'), children: [(0, jsx_runtime_1.jsx)(Calendar_1.Calendar, Object.assign({}, calendarProps)), props.hasTime ? ((0, jsx_runtime_1.jsx)("div", { className: b('time-field-wrapper'), children: (0, jsx_runtime_1.jsx)(DateField_1.DateField, Object.assign({ className: b('time-field') }, timeInputProps)) })) : null] }) }))] })));
+                }, onBlur: props.onBlur })), (0, jsx_runtime_1.jsx)(HiddenInput_1.HiddenInput, { name: props.name, value: state.value, onReset: (value) => {
+                    state.setValue(value);
+                }, disabled: state.disabled, form: props.form }), !isMobile && ((0, jsx_runtime_1.jsx)(uikit_1.Popup, { anchorRef: anchorRef, open: isOpen, children: (0, jsx_runtime_1.jsxs)("div", { className: b('popup-content'), children: [(0, jsx_runtime_1.jsx)(Calendar_1.Calendar, Object.assign({}, calendarProps)), props.hasTime ? ((0, jsx_runtime_1.jsx)("div", { className: b('time-field-wrapper'), children: (0, jsx_runtime_1.jsx)(DateField_1.DateField, Object.assign({ className: b('time-field') }, timeInputProps)) })) : null] }) }))] })));
 }
 exports.RelativeDateField = RelativeDateField;

package/dist/cjs/components/RelativeDateField/hooks/useRelativeDateFieldState.js

@@ -17,7 +17,7 @@ function useRelativeDateFieldState(props) {
             return;
         }
         setText(t);
-        if (isLikeRelativeDate(t)) {
+        if ((0, date_utils_1.isLikeRelative)(t)) {
             const date = (0, date_utils_1.dateTimeParse)(t);
             if (date && (0, date_utils_1.isValid)(date)) {
                 setValue(t);
@@ -36,7 +36,7 @@ function useRelativeDateFieldState(props) {
             return null;
         }
         return (_a = (0, date_utils_1.dateTimeParse)(value, { timeZone: props.timeZone, roundUp: props.roundUp })) !== null && _a !== void 0 ? _a : null;
-    }, [value, props.timeZone]);
+    }, [value, props.timeZone, props.roundUp]);
     const [lastCorrectDate, setLastCorrectDate] = react_1.default.useState(parsedDate);
     if (parsedDate && parsedDate !== lastCorrectDate) {
         setLastCorrectDate(parsedDate);
@@ -60,9 +60,3 @@ function useRelativeDateFieldState(props) {
     };
 }
 exports.useRelativeDateFieldState = useRelativeDateFieldState;
-function isLikeRelativeDate(text) {
-    if (typeof date_utils_1.isLikeRelative === 'function') {
-        return (0, date_utils_1.isLikeRelative)(text);
-    }
-    return /^now/i.test(text);
-}

package/dist/cjs/components/RelativeDatePicker/RelativeDatePicker.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RelativeDatePicker = void 0;
 const tslib_1 = require("tslib");
@@ -11,11 +12,13 @@ const Calendar_1 = require("../Calendar");
 const DateField_1 = require("../DateField");
 const MobileCalendar_1 = require("../DatePicker/MobileCalendar");
 const StubButton_1 = require("../DatePicker/StubButton");
+const HiddenInput_1 = require("../HiddenInput/HiddenInput");
 const useRelativeDatePickerProps_1 = require("./hooks/useRelativeDatePickerProps");
 const useRelativeDatePickerState_1 = require("./hooks/useRelativeDatePickerState");
 require("./RelativeDatePicker.css");
 const b = (0, cn_1.block)('relative-date-picker');
 function RelativeDatePicker(props) {
+    var _a;
     const state = (0, useRelativeDatePickerState_1.useRelativeDatePickerState)(props);
     const { groupProps, fieldProps, modeSwitcherProps, calendarButtonProps, popupProps, calendarProps, timeInputProps, } = (0, useRelativeDatePickerProps_1.useRelativeDatePickerProps)(state, props);
     const anchorRef = react_1.default.useRef(null);
@@ -27,9 +30,9 @@ function RelativeDatePicker(props) {
                     readOnly: props.readOnly,
                     placeholderValue: props.placeholderValue,
                     timeZone: props.timeZone,
-                } })), (0, jsx_runtime_1.jsx)(uikit_1.TextInput, Object.assign({}, fieldProps, { controlProps: Object.assign(Object.assign({}, fieldProps.controlProps), { disabled: isMobile && state.mode === 'absolute', className: b('input', { mobile: isMobile && state.mode === 'absolute' }) }), hasClear: props.hasClear && !(isMobile && state.mode === 'absolute'), startContent: (0, jsx_runtime_1.jsx)(uikit_1.Button, Object.assign({}, modeSwitcherProps, { children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Function }) })), endContent: (0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [!isMobile && !isOnlyTime && ((0, jsx_runtime_1.jsx)(uikit_1.Button, Object.assign({}, calendarButtonProps, { children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Calendar }) }))), !isMobile && isOnlyTime && ((0, jsx_runtime_1.jsx)(StubButton_1.StubButton, { size: calendarButtonProps.size, icon: icons_1.Clock })), isMobile && state.mode === 'absolute' && ((0, jsx_runtime_1.jsx)(StubButton_1.StubButton, { size: calendarButtonProps.size, icon: isOnlyTime ? icons_1.Clock : icons_1.Calendar }))] }) })), (0, jsx_runtime_1.jsx)("input", { type: "text", hidden: true, name: props.name, value: getNativeValue(state.value), 
-                // Ignore React warning
-                onChange: () => { } }), !isMobile && !isOnlyTime && ((0, jsx_runtime_1.jsx)(uikit_1.Popup, Object.assign({}, popupProps, { anchorRef: anchorRef, children: (0, jsx_runtime_1.jsxs)("div", { className: b('popup-content'), children: [typeof props.children === 'function' ? (props.children(calendarProps)) : ((0, jsx_runtime_1.jsx)(Calendar_1.Calendar, Object.assign({}, calendarProps))), state.datePickerState.hasTime && ((0, jsx_runtime_1.jsx)("div", { className: b('time-field-wrapper'), children: (0, jsx_runtime_1.jsx)(DateField_1.DateField, Object.assign({}, timeInputProps)) }))] }) })))] })));
+                } })), (0, jsx_runtime_1.jsx)(uikit_1.TextInput, Object.assign({}, fieldProps, { controlProps: Object.assign(Object.assign({}, fieldProps.controlProps), { disabled: isMobile && state.mode === 'absolute', className: b('input', { mobile: isMobile && state.mode === 'absolute' }) }), hasClear: props.hasClear && !(isMobile && state.mode === 'absolute'), startContent: (0, jsx_runtime_1.jsx)(uikit_1.Button, Object.assign({}, modeSwitcherProps, { children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Function }) })), endContent: (0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [!isMobile && !isOnlyTime && ((0, jsx_runtime_1.jsx)(uikit_1.Button, Object.assign({}, calendarButtonProps, { children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Calendar }) }))), !isMobile && isOnlyTime && ((0, jsx_runtime_1.jsx)(StubButton_1.StubButton, { size: calendarButtonProps.size, icon: icons_1.Clock })), isMobile && state.mode === 'absolute' && ((0, jsx_runtime_1.jsx)(StubButton_1.StubButton, { size: calendarButtonProps.size, icon: isOnlyTime ? icons_1.Clock : icons_1.Calendar }))] }) })), (0, jsx_runtime_1.jsx)(HiddenInput_1.HiddenInput, { name: props.name, value: (_a = state.value) === null || _a === void 0 ? void 0 : _a.type, disabled: state.disabled, form: props.form }), (0, jsx_runtime_1.jsx)(HiddenInput_1.HiddenInput, { name: props.name, value: state.value, toStringValue: (value) => getNativeValue(value), onReset: (value) => {
+                    state.setValue(value);
+                }, disabled: state.disabled, form: props.form }), !isMobile && !isOnlyTime && ((0, jsx_runtime_1.jsx)(uikit_1.Popup, Object.assign({}, popupProps, { anchorRef: anchorRef, children: (0, jsx_runtime_1.jsxs)("div", { className: b('popup-content'), children: [typeof props.children === 'function' ? (props.children(calendarProps)) : ((0, jsx_runtime_1.jsx)(Calendar_1.Calendar, Object.assign({}, calendarProps))), state.datePickerState.hasTime && ((0, jsx_runtime_1.jsx)("div", { className: b('time-field-wrapper'), children: (0, jsx_runtime_1.jsx)(DateField_1.DateField, Object.assign({}, timeInputProps)) }))] }) })))] })));
 }
 exports.RelativeDatePicker = RelativeDatePicker;
 function getNativeValue(value) {

package/dist/cjs/components/RelativeRangeDatePicker/RelativeRangeDatePicker.d.ts

@@ -1,11 +1,11 @@
 import type { DateTime } from '@gravity-ui/date-utils';
 import type { Value } from '../RelativeDatePicker';
-import type { DomProps, FocusableProps, InputBase, RangeValue, StyleProps, TextInputProps, Validation } from '../types';
+import type { DomProps, FocusableProps, InputBase, InputDOMProps, RangeValue, StyleProps, TextInputProps, Validation } from '../types';
 import type { Preset } from './components/Presets/defaultPresets';
 import type { PresetTab } from './components/Presets/utils';
 import type { RelativeRangeDatePickerStateOptions } from './hooks/useRelativeRangeDatePickerState';
 import './RelativeRangeDatePicker.css';
-export interface RelativeRangeDatePickerProps extends RelativeRangeDatePickerStateOptions, DomProps, InputBase, TextInputProps, Validation, FocusableProps, StyleProps {
+export interface RelativeRangeDatePickerProps extends RelativeRangeDatePickerStateOptions, DomProps, InputBase, InputDOMProps, TextInputProps, Validation, FocusableProps, StyleProps {
     /** Format of the date when rendered in the input. [Available formats](https://day.js.org/docs/en/display/format) */
     format?: string;
     /** A placeholder date that controls the default values of each segment when the user first interacts with them. Defaults to today's date at midnight. */

package/dist/cjs/components/RelativeRangeDatePicker/RelativeRangeDatePicker.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RelativeRangeDatePicker = void 0;
 const tslib_1 = require("tslib");
@@ -7,6 +8,7 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const icons_1 = require("@gravity-ui/icons");
 const uikit_1 = require("@gravity-ui/uikit");
 const cn_1 = require("../../utils/cn");
+const HiddenInput_1 = require("../HiddenInput/HiddenInput");
 const getButtonSizeForInput_1 = require("../utils/getButtonSizeForInput");
 const PickerDialog_1 = require("./components/PickerDialog/PickerDialog");
 const useRelativeRangeDatePickerState_1 = require("./hooks/useRelativeRangeDatePickerState");
@@ -88,8 +90,19 @@ function RelativeRangeDatePicker(props) {
                 }), onClick: () => {
                     setIsActive(true);
                     setOpen(true);
-                } })) : null, (0, jsx_runtime_1.jsx)(PickerDialog_1.PickerDialog, { state: state, props: props, open: open, onClose: () => {
+                } })) : null, (0, jsx_runtime_1.jsx)(HiddenInput_1.HiddenInput, { name: props.name, form: props.form, value: state.value, toStringValue: (v) => { var _a, _b; return (_b = (_a = v === null || v === void 0 ? void 0 : v.start) === null || _a === void 0 ? void 0 : _a.type) !== null && _b !== void 0 ? _b : ''; }, disabled: props.disabled }), (0, jsx_runtime_1.jsx)(HiddenInput_1.HiddenInput, { name: props.name, form: props.form, value: state.value, toStringValue: (v) => { var _a; return getNativeValue((_a = v === null || v === void 0 ? void 0 : v.start) !== null && _a !== void 0 ? _a : null); }, disabled: props.disabled }), (0, jsx_runtime_1.jsx)(HiddenInput_1.HiddenInput, { name: props.name, form: props.form, value: state.value, toStringValue: (v) => { var _a, _b; return (_b = (_a = v === null || v === void 0 ? void 0 : v.end) === null || _a === void 0 ? void 0 : _a.type) !== null && _b !== void 0 ? _b : ''; }, disabled: props.disabled }), (0, jsx_runtime_1.jsx)(HiddenInput_1.HiddenInput, { name: props.name, form: props.form, value: state.value, toStringValue: (v) => { var _a; return getNativeValue((_a = v === null || v === void 0 ? void 0 : v.end) !== null && _a !== void 0 ? _a : null); }, disabled: props.disabled }), (0, jsx_runtime_1.jsx)(HiddenInput_1.HiddenInput, { name: props.name, form: props.form, onReset: (v) => {
+                    state.setValue(v.value, v.timeZone);
+                }, value: { value: state.value, timeZone: state.timeZone }, toStringValue: (v) => v.timeZone, disabled: props.disabled }), (0, jsx_runtime_1.jsx)(PickerDialog_1.PickerDialog, { state: state, props: props, open: open, onClose: () => {
                     setOpen(false);
                 }, anchorRef: anchorRef, isMobile: isMobile, className: props.className })] })));
 }
 exports.RelativeRangeDatePicker = RelativeRangeDatePicker;
+function getNativeValue(value) {
+    if (!value) {
+        return '';
+    }
+    if (value.type === 'relative') {
+        return value.value;
+    }
+    return value.value.toISOString();
+}

package/dist/cjs/components/RelativeRangeDatePicker/components/PickerDialog/PickerDialog.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PickerDialog = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");

package/dist/cjs/components/RelativeRangeDatePicker/components/Presets/Presets.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SIZE_TO_ITEM_HEIGHT = exports.Presets = void 0;
 const tslib_1 = require("tslib");

package/dist/cjs/components/RelativeRangeDatePicker/components/Presets/PresetsDoc.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PresetsDoc = void 0;
 const tslib_1 = require("tslib");

package/dist/cjs/components/RelativeRangeDatePicker/components/Zones/Zones.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Zones = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");

package/dist/cjs/components/types/inputs.d.ts

@@ -29,6 +29,11 @@ export interface InputDOMProps {
      * The name of the input element, used when submitting an HTML form.
      */
     name?: string;
+    /**
+     * The id of a <form> in the same document. If this attribute is not set,
+     * the <input> is associated with its ancestor <form> element, if any.
+     */
+    form?: string;
 }
 export interface InputBase {
     /**

package/dist/cjs/components/utils/mergeProps.js

@@ -38,9 +38,9 @@ function mergeProps(...args) {
 exports.mergeProps = mergeProps;
 function chain(...fns) {
     return (...args) => {
-        for (const callback of fns) {
-            if (typeof callback === 'function') {
-                callback(...args);
+        for (const fn of fns) {
+            if (typeof fn === 'function') {
+                fn(...args);
             }
         }
     };

package/dist/cjs/components/utils/validation/datePicker.js

@@ -9,13 +9,13 @@ function getValidationResult(value, minValue, maxValue, isDateUnavailable, timeZ
     const isInvalid = rangeOverflow || rangeUnderflow || isUnavailable;
     const errors = [];
     if (isInvalid) {
-        if (rangeUnderflow) {
+        if (rangeUnderflow && minValue) {
             errors.push((0, i18n_1.i18n)('Value must be {minValue} or later.', {
                 minValue: minValue.timeZone(timeZone).format(),
                 value: valueTitle,
             }));
         }
-        if (rangeOverflow) {
+        if (rangeOverflow && maxValue) {
             errors.push((0, i18n_1.i18n)('Value must be {maxValue} or earlier.', {
                 maxValue: maxValue.timeZone(timeZone).format(),
                 value: valueTitle,

package/dist/esm/components/Calendar/Calendar.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { CalendarView } from '../CalendarView/CalendarView';

package/dist/esm/components/CalendarView/CalendarView.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { ChevronLeft, ChevronRight } from '@gravity-ui/icons';

package/dist/esm/components/DateField/DateField.js

@@ -1,8 +1,10 @@
+'use client';
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { TextInput, useFocusWithin } from '@gravity-ui/uikit';
 import { block } from '../../utils/cn';
+import { HiddenInput } from '../HiddenInput/HiddenInput';
 import { useDateFieldProps } from './hooks/useDateFieldProps';
 import { useDateFieldState } from './hooks/useDateFieldState';
 import './DateField.css';
@@ -17,7 +19,7 @@ export function DateField(_a) {
             setActive(isFocusWithin);
         },
     });
-    return (_jsxs("div", Object.assign({ className: b(null, className), style: props.style }, focusWithinProps, { children: [_jsx(TextInput, Object.assign({}, inputProps, { value: state.isEmpty && !isActive && props.placeholder ? '' : inputProps.value })), _jsx("input", { type: "text", hidden: true, name: props.name, value: state.value ? state.value.toISOString() : '', 
-                // Ignore React warning
-                onChange: () => { } })] })));
+    return (_jsxs("div", Object.assign({ className: b(null, className), style: props.style }, focusWithinProps, { children: [_jsx(TextInput, Object.assign({}, inputProps, { value: state.isEmpty && !isActive && props.placeholder ? '' : inputProps.value })), _jsx(HiddenInput, { name: props.name, value: state.value, toStringValue: (value) => { var _a; return (_a = value === null || value === void 0 ? void 0 : value.toISOString()) !== null && _a !== void 0 ? _a : ''; }, onReset: (value) => {
+                    state.setDate(value);
+                }, disabled: state.disabled, form: props.form })] })));
 }

package/dist/esm/components/DateField/hooks/useBaseDateFieldState.d.ts

@@ -37,6 +37,8 @@ export type DateFieldState<T = DateTime> = {
     displayValue: T;
     /** Sets the field's value. */
     setValue: (value: T) => void;
+    /** Sets the date value. */
+    setDate: (value: T | null) => void;
     /** Formatted value */
     text: string;
     /** Whether the field is read only. */

package/dist/esm/components/DateField/hooks/useBaseDateFieldState.js

@@ -30,6 +30,7 @@ export function useBaseDateFieldState(props) {
         isEmpty,
         displayValue,
         setValue,
+        setDate,
         text: formatSections(editableSections),
         readOnly: props.readOnly,
         disabled: props.disabled,

package/dist/esm/components/DateField/hooks/useDateFieldState.js

@@ -135,7 +135,7 @@ export function useDateFieldState(props) {
         }).timeZone(timeZone);
     }
     function setValueFromString(str) {
-        const date = parseDateFromString(str, props.format || 'L', timeZone);
+        const date = parseDateFromString(str, format, timeZone);
         if (isValid(date)) {
             handleUpdateDate(date);
             return true;

package/dist/esm/components/DateField/utils.d.ts

@@ -1,7 +1,6 @@
 import type { DateTime } from '@gravity-ui/date-utils';
 import type { DateFieldSection, DateFieldSectionType, DateFieldSectionWithoutPosition } from './types';
 export declare const EDITABLE_SEGMENTS: Partial<Record<DateFieldSectionType, boolean>>;
-export declare function expandFormat(format: string): string;
 export declare function getSectionLimits(section: DateFieldSectionWithoutPosition, date: DateTime): {
     minValue: number;
     maxValue: number;
@@ -9,7 +8,7 @@ export declare function getSectionLimits(section: DateFieldSectionWithoutPositio
     minValue?: undefined;
     maxValue?: undefined;
 };
-export declare function getSectionValue(sections: DateFieldSectionWithoutPosition, date: DateTime): number | undefined;
+export declare function getSectionValue(section: DateFieldSectionWithoutPosition, date: DateTime): number | undefined;
 export declare function getDurationUnitFromSectionType(type: DateFieldSectionType): "year" | "month" | "day" | "hour" | "minute" | "second" | "date";
 export declare function addSegment(section: DateFieldSection, date: DateTime, amount: number): DateTime;
 export declare function setSegment(section: DateFieldSection, date: DateTime, amount: number): DateTime;

package/dist/esm/components/DateField/utils.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { dateTime, isValid, settings } from '@gravity-ui/date-utils';
+import { dateTime, expandFormat, isValid } from '@gravity-ui/date-utils';
 import { mergeDateTime } from '../utils/dates';
 import { i18n } from './i18n';
 export const EDITABLE_SEGMENTS = {
@@ -12,16 +12,6 @@ export const EDITABLE_SEGMENTS = {
     dayPeriod: true,
     weekday: true,
 };
-export function expandFormat(format) {
-    const localeFormats = settings.getLocaleData().formats;
-    const getShortLocalizedFormatFromLongLocalizedFormat = (formatBis) => formatBis.replace(/(\[[^\]]+])|(MMMM|MM|DD|dddd)/g, (_, escapeSequence, localizedFormat) => escapeSequence || localizedFormat.slice(1));
-    return format.replace(/(\[[^\]]+])|(LTS?|l{1,4}|L{1,4})/g, (_, escapeSequence, localizedFormat) => {
-        const LongLocalizedFormat = localizedFormat && localizedFormat.toUpperCase();
-        return (escapeSequence ||
-            localeFormats[localizedFormat] ||
-            getShortLocalizedFormatFromLongLocalizedFormat(localeFormats[LongLocalizedFormat]));
-    });
-}
 const escapedCharacters = { start: '[', end: ']' };
 const formatTokenMap = {
     // Year
@@ -142,13 +132,13 @@ export function getSectionLimits(section, date) {
     }
     return {};
 }
-export function getSectionValue(sections, date) {
-    const type = sections.type;
+export function getSectionValue(section, date) {
+    const type = section.type;
     switch (type) {
         case 'year': {
-            return isFourDigitYearFormat(sections.format)
+            return isFourDigitYearFormat(section.format)
                 ? date.year()
-                : Number(date.format(sections.format));
+                : Number(date.format(section.format));
         }
         case 'month':
         case 'hour':

package/dist/esm/components/DatePicker/DatePicker.js

@@ -1,3 +1,4 @@
+'use client';
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
@@ -5,6 +6,7 @@ import { Calendar as CalendarIcon, Clock as ClockIcon } from '@gravity-ui/icons'
 import { Button, Icon, Popup, TextInput, useMobile } from '@gravity-ui/uikit';
 import { Calendar } from '../Calendar';
 import { DateField } from '../DateField';
+import { HiddenInput } from '../HiddenInput/HiddenInput';
 import { MobileCalendar } from './MobileCalendar';
 import { StubButton } from './StubButton';
 import { useDatePickerProps } from './hooks/useDatePickerProps';
@@ -18,7 +20,7 @@ export function DatePicker(_a) {
     const { groupProps, fieldProps, calendarButtonProps, popupProps, calendarProps, timeInputProps } = useDatePickerProps(state, props);
     const isMobile = useMobile();
     const isOnlyTime = state.hasTime && !state.hasDate;
-    return (_jsxs("div", Object.assign({ className: b(null, className) }, groupProps, { children: [isMobile ? (_jsx(MobileCalendar, { props: props, state: state })) : (!isOnlyTime && (_jsx("div", { ref: anchorRef, className: b('popup-anchor'), children: _jsx(Popup, Object.assign({ anchorRef: anchorRef }, popupProps, { children: _jsxs("div", { className: b('popup-content'), children: [typeof props.children === 'function' ? (props.children(calendarProps)) : (_jsx(Calendar, Object.assign({}, calendarProps))), state.hasTime && (_jsx("div", { className: b('time-field-wrapper'), children: _jsx(DateField, Object.assign({}, timeInputProps)) }))] }) })) }))), _jsx(TextInput, Object.assign({}, fieldProps, { className: b('field', { mobile: isMobile }), hasClear: !isMobile && fieldProps.hasClear, endContent: _jsxs(React.Fragment, { children: [!isMobile && !isOnlyTime && (_jsx(Button, Object.assign({}, calendarButtonProps, { children: _jsx(Icon, { data: CalendarIcon }) }))), !isMobile && isOnlyTime && (_jsx(StubButton, { size: calendarButtonProps.size, icon: ClockIcon })), isMobile && (_jsx(StubButton, { size: calendarButtonProps.size, icon: isOnlyTime ? ClockIcon : CalendarIcon }))] }) })), _jsx("input", { type: "text", hidden: true, name: props.name, value: state.value ? state.value.toISOString() : '', 
-                // Ignore React warning
-                onChange: () => { } })] })));
+    return (_jsxs("div", Object.assign({ className: b(null, className) }, groupProps, { children: [isMobile ? (_jsx(MobileCalendar, { props: props, state: state })) : (!isOnlyTime && (_jsx("div", { ref: anchorRef, className: b('popup-anchor'), children: _jsx(Popup, Object.assign({ anchorRef: anchorRef }, popupProps, { children: _jsxs("div", { className: b('popup-content'), children: [typeof props.children === 'function' ? (props.children(calendarProps)) : (_jsx(Calendar, Object.assign({}, calendarProps))), state.hasTime && (_jsx("div", { className: b('time-field-wrapper'), children: _jsx(DateField, Object.assign({}, timeInputProps)) }))] }) })) }))), _jsx(TextInput, Object.assign({}, fieldProps, { className: b('field', { mobile: isMobile }), hasClear: !isMobile && fieldProps.hasClear, endContent: _jsxs(React.Fragment, { children: [!isMobile && !isOnlyTime && (_jsx(Button, Object.assign({}, calendarButtonProps, { children: _jsx(Icon, { data: CalendarIcon }) }))), !isMobile && isOnlyTime && (_jsx(StubButton, { size: calendarButtonProps.size, icon: ClockIcon })), isMobile && (_jsx(StubButton, { size: calendarButtonProps.size, icon: isOnlyTime ? ClockIcon : CalendarIcon }))] }) })), _jsx(HiddenInput, { name: props.name, value: state.value, toStringValue: (value) => { var _a; return (_a = value === null || value === void 0 ? void 0 : value.toISOString()) !== null && _a !== void 0 ? _a : ''; }, onReset: (value) => {
+                    state.setValue(value);
+                }, disabled: state.disabled, form: props.form })] })));
 }

package/dist/esm/components/DatePicker/MobileCalendar.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { dateTime } from '@gravity-ui/date-utils';
 import { block } from '../../utils/cn';

package/dist/esm/components/HiddenInput/HiddenInput.d.ts

@@ -0,0 +1,14 @@
+interface HiddenInputProps<T> {
+    value: T;
+    onReset?: (value: T) => void;
+    toStringValue?: (value: T) => string;
+    name?: string;
+    disabled?: boolean;
+    form?: string;
+}
+export declare function HiddenInput<T>({ name, value, onReset, form, disabled, toStringValue, }: HiddenInputProps<T>): import("react/jsx-runtime").JSX.Element | null;
+export declare function useFormResetHandler<T>({ initialValue, onReset, }: {
+    initialValue: T;
+    onReset?: (value: T) => void;
+}): (node: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | null) => void;
+export {};

package/dist/esm/components/HiddenInput/HiddenInput.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+export function HiddenInput({ name, value, onReset, form, disabled, toStringValue, }) {
+    const ref = useFormResetHandler({ initialValue: value, onReset });
+    if (!name) {
+        return null;
+    }
+    const v = toStringValue ? toStringValue(value) : `${value !== null && value !== void 0 ? value : ''}`;
+    return _jsx("input", { ref: ref, type: "hidden", name: name, value: v, disabled: disabled, form: form });
+}
+export function useFormResetHandler({ initialValue, onReset, }) {
+    const [formElement, setFormElement] = React.useState(null);
+    const resetValue = React.useRef(initialValue);
+    React.useEffect(() => {
+        if (!formElement || !onReset) {
+            return undefined;
+        }
+        const handleReset = () => {
+            onReset(resetValue.current);
+        };
+        formElement.addEventListener('reset', handleReset);
+        return () => {
+            formElement.removeEventListener('reset', handleReset);
+        };
+    }, [formElement, onReset]);
+    const ref = React.useCallback((node) => {
+        var _a;
+        setFormElement((_a = node === null || node === void 0 ? void 0 : node.form) !== null && _a !== void 0 ? _a : null);
+    }, []);
+    return ref;
+}

package/dist/esm/components/RangeCalendar/RangeCalendar.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { CalendarView } from '../CalendarView/CalendarView';

package/dist/esm/components/RangeDateField/RangeDateField.js

@@ -1,13 +1,16 @@
+'use client';
 import { __rest } from "tslib";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { TextInput, useFocusWithin } from '@gravity-ui/uikit';
 import { block } from '../../utils/cn';
 import { useDateFieldProps } from '../DateField/hooks/useDateFieldProps';
+import { HiddenInput } from '../HiddenInput/HiddenInput';
 import { useRangeDateFieldState } from './hooks/useRangeDateFieldState';
 import './RangeDateField.css';
 const b = block('range-date-field');
 export function RangeDateField(_a) {
+    var _b, _c;
     var { className } = _a, props = __rest(_a, ["className"]);
     const state = useRangeDateFieldState(props);
     const { inputProps } = useDateFieldProps(state, props);
@@ -17,5 +20,7 @@ export function RangeDateField(_a) {
             setActive(isFocusWithin);
         },
     });
-    return (_jsx("div", Object.assign({ className: b(null, className), style: props.style }, focusWithinProps, { children: _jsx(TextInput, Object.assign({}, inputProps, { value: state.isEmpty && !isActive && props.placeholder ? '' : inputProps.value })) })));
+    return (_jsxs("div", Object.assign({ className: b(null, className), style: props.style }, focusWithinProps, { children: [_jsx(TextInput, Object.assign({}, inputProps, { value: state.isEmpty && !isActive && props.placeholder ? '' : inputProps.value })), _jsx(HiddenInput, { name: props.name, form: props.form, onReset: (v) => {
+                    state.setDate(v);
+                }, value: (_b = state.value) !== null && _b !== void 0 ? _b : null, toStringValue: (v) => (v ? v.start.toISOString() : ''), disabled: state.disabled }), _jsx(HiddenInput, { name: props.name, form: props.form, value: (_c = state.value) !== null && _c !== void 0 ? _c : null, toStringValue: (v) => (v ? v.end.toISOString() : ''), disabled: state.disabled })] })));
 }

package/dist/esm/components/RangeDatePicker/RangeDatePicker.js

@@ -1,3 +1,4 @@
+'use client';
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
@@ -7,6 +8,7 @@ import { block } from '../../utils/cn';
 import { RangeCalendar } from '../Calendar';
 import { useDatePickerProps } from '../DatePicker';
 import { StubButton } from '../DatePicker/StubButton';
+import { HiddenInput } from '../HiddenInput/HiddenInput';
 import { RangeDateField } from '../RangeDateField';
 import { useRangeDatePickerState } from './hooks/useRangeDatePickerState';
 import './RangeDatePicker.css';
@@ -17,5 +19,7 @@ export function RangeDatePicker(_a) {
     const state = useRangeDatePickerState(props);
     const { groupProps, fieldProps, calendarButtonProps, popupProps, calendarProps, timeInputProps } = useDatePickerProps(state, props);
     const isOnlyTime = state.hasTime && !state.hasDate;
-    return (_jsxs("div", Object.assign({ className: b(null, className) }, groupProps, { children: [!isOnlyTime && (_jsx("div", { ref: anchorRef, className: b('popup-anchor'), children: _jsx(Popup, Object.assign({ anchorRef: anchorRef }, popupProps, { children: _jsxs("div", { className: b('popup-content'), children: [typeof props.children === 'function' ? (props.children(Object.assign(Object.assign({}, calendarProps), { value: state.value }))) : (_jsx(RangeCalendar, Object.assign({}, calendarProps, { value: state.value }))), state.hasTime && (_jsx("div", { className: b('time-field-wrapper'), children: _jsx(RangeDateField, Object.assign({}, timeInputProps)) }))] }) })) })), _jsx(TextInput, Object.assign({}, fieldProps, { className: b('field'), hasClear: fieldProps.hasClear, endContent: _jsxs(React.Fragment, { children: [!isOnlyTime && (_jsx(Button, Object.assign({}, calendarButtonProps, { children: _jsx(Icon, { data: CalendarIcon }) }))), isOnlyTime && (_jsx(StubButton, { size: calendarButtonProps.size, icon: ClockIcon }))] }) }))] })));
+    return (_jsxs("div", Object.assign({ className: b(null, className) }, groupProps, { children: [!isOnlyTime && (_jsx("div", { ref: anchorRef, className: b('popup-anchor'), children: _jsx(Popup, Object.assign({ anchorRef: anchorRef }, popupProps, { children: _jsxs("div", { className: b('popup-content'), children: [typeof props.children === 'function' ? (props.children(Object.assign(Object.assign({}, calendarProps), { value: state.value }))) : (_jsx(RangeCalendar, Object.assign({}, calendarProps, { value: state.value }))), state.hasTime && (_jsx("div", { className: b('time-field-wrapper'), children: _jsx(RangeDateField, Object.assign({}, timeInputProps)) }))] }) })) })), _jsx(TextInput, Object.assign({}, fieldProps, { className: b('field'), hasClear: fieldProps.hasClear, endContent: _jsxs(React.Fragment, { children: [!isOnlyTime && (_jsx(Button, Object.assign({}, calendarButtonProps, { children: _jsx(Icon, { data: CalendarIcon }) }))), isOnlyTime && (_jsx(StubButton, { size: calendarButtonProps.size, icon: ClockIcon }))] }) })), _jsx(HiddenInput, { name: props.name, form: props.form, onReset: (v) => {
+                    state.dateFieldState.setDate(v);
+                }, value: state.value, toStringValue: (v) => (v ? v.start.toISOString() : ''), disabled: state.disabled }), _jsx(HiddenInput, { name: props.name, form: props.form, value: state.value, toStringValue: (v) => (v ? v.end.toISOString() : ''), disabled: state.disabled })] })));
 }

package/dist/esm/components/RelativeDateField/RelativeDateField.js

@@ -1,15 +1,16 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { Popup, TextInput, useFocusWithin, useMobile } from '@gravity-ui/uikit';
 import { block } from '../../utils/cn';
 import { Calendar } from '../Calendar';
 import { DateField } from '../DateField';
+import { HiddenInput } from '../HiddenInput/HiddenInput';
 import { useRelativeDateFieldProps } from './hooks/useRelativeDateFieldProps';
 import { useRelativeDateFieldState } from './hooks/useRelativeDateFieldState';
 import './RelativeDateField.css';
 const b = block('relative-date-field');
 export function RelativeDateField(props) {
-    var _a;
     const state = useRelativeDateFieldState(props);
     const { inputProps, calendarProps, timeInputProps } = useRelativeDateFieldProps(state, props);
     const isMobile = useMobile();
@@ -27,7 +28,7 @@ export function RelativeDateField(props) {
                         setOpen(true);
                     }
                     (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
-                }, onBlur: props.onBlur })), _jsx("input", { type: "text", hidden: true, name: props.name, value: (_a = state.value) !== null && _a !== void 0 ? _a : '', 
-                // Ignore React warning
-                onChange: () => { } }), !isMobile && (_jsx(Popup, { anchorRef: anchorRef, open: isOpen, children: _jsxs("div", { className: b('popup-content'), children: [_jsx(Calendar, Object.assign({}, calendarProps)), props.hasTime ? (_jsx("div", { className: b('time-field-wrapper'), children: _jsx(DateField, Object.assign({ className: b('time-field') }, timeInputProps)) })) : null] }) }))] })));
+                }, onBlur: props.onBlur })), _jsx(HiddenInput, { name: props.name, value: state.value, onReset: (value) => {
+                    state.setValue(value);
+                }, disabled: state.disabled, form: props.form }), !isMobile && (_jsx(Popup, { anchorRef: anchorRef, open: isOpen, children: _jsxs("div", { className: b('popup-content'), children: [_jsx(Calendar, Object.assign({}, calendarProps)), props.hasTime ? (_jsx("div", { className: b('time-field-wrapper'), children: _jsx(DateField, Object.assign({ className: b('time-field') }, timeInputProps)) })) : null] }) }))] })));
 }

package/dist/esm/components/RelativeDateField/hooks/useRelativeDateFieldState.js

@@ -1,7 +1,5 @@
 import React from 'react';
-import { dateTimeParse, 
-// @ts-expect-error added in new version of date-utils
-isLikeRelative, isValid, } from '@gravity-ui/date-utils';
+import { dateTimeParse, isLikeRelative, isValid } from '@gravity-ui/date-utils';
 import { useControlledState } from '@gravity-ui/uikit';
 export function useRelativeDateFieldState(props) {
     var _a;
@@ -15,7 +13,7 @@ export function useRelativeDateFieldState(props) {
             return;
         }
         setText(t);
-        if (isLikeRelativeDate(t)) {
+        if (isLikeRelative(t)) {
             const date = dateTimeParse(t);
             if (date && isValid(date)) {
                 setValue(t);
@@ -34,7 +32,7 @@ export function useRelativeDateFieldState(props) {
             return null;
         }
         return (_a = dateTimeParse(value, { timeZone: props.timeZone, roundUp: props.roundUp })) !== null && _a !== void 0 ? _a : null;
-    }, [value, props.timeZone]);
+    }, [value, props.timeZone, props.roundUp]);
     const [lastCorrectDate, setLastCorrectDate] = React.useState(parsedDate);
     if (parsedDate && parsedDate !== lastCorrectDate) {
         setLastCorrectDate(parsedDate);
@@ -57,9 +55,3 @@ export function useRelativeDateFieldState(props) {
         readOnly: props.readOnly,
     };
 }
-function isLikeRelativeDate(text) {
-    if (typeof isLikeRelative === 'function') {
-        return isLikeRelative(text);
-    }
-    return /^now/i.test(text);
-}

package/dist/esm/components/RelativeDatePicker/RelativeDatePicker.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { Calendar as CalendarIcon, Clock as ClockIcon, Function as FunctionIcon, } from '@gravity-ui/icons';
@@ -7,11 +8,13 @@ import { Calendar } from '../Calendar';
 import { DateField } from '../DateField';
 import { MobileCalendar } from '../DatePicker/MobileCalendar';
 import { StubButton } from '../DatePicker/StubButton';
+import { HiddenInput } from '../HiddenInput/HiddenInput';
 import { useRelativeDatePickerProps } from './hooks/useRelativeDatePickerProps';
 import { useRelativeDatePickerState } from './hooks/useRelativeDatePickerState';
 import './RelativeDatePicker.css';
 const b = block('relative-date-picker');
 export function RelativeDatePicker(props) {
+    var _a;
     const state = useRelativeDatePickerState(props);
     const { groupProps, fieldProps, modeSwitcherProps, calendarButtonProps, popupProps, calendarProps, timeInputProps, } = useRelativeDatePickerProps(state, props);
     const anchorRef = React.useRef(null);
@@ -23,9 +26,9 @@ export function RelativeDatePicker(props) {
                     readOnly: props.readOnly,
                     placeholderValue: props.placeholderValue,
                     timeZone: props.timeZone,
-                } })), _jsx(TextInput, Object.assign({}, fieldProps, { controlProps: Object.assign(Object.assign({}, fieldProps.controlProps), { disabled: isMobile && state.mode === 'absolute', className: b('input', { mobile: isMobile && state.mode === 'absolute' }) }), hasClear: props.hasClear && !(isMobile && state.mode === 'absolute'), startContent: _jsx(Button, Object.assign({}, modeSwitcherProps, { children: _jsx(Icon, { data: FunctionIcon }) })), endContent: _jsxs(React.Fragment, { children: [!isMobile && !isOnlyTime && (_jsx(Button, Object.assign({}, calendarButtonProps, { children: _jsx(Icon, { data: CalendarIcon }) }))), !isMobile && isOnlyTime && (_jsx(StubButton, { size: calendarButtonProps.size, icon: ClockIcon })), isMobile && state.mode === 'absolute' && (_jsx(StubButton, { size: calendarButtonProps.size, icon: isOnlyTime ? ClockIcon : CalendarIcon }))] }) })), _jsx("input", { type: "text", hidden: true, name: props.name, value: getNativeValue(state.value), 
-                // Ignore React warning
-                onChange: () => { } }), !isMobile && !isOnlyTime && (_jsx(Popup, Object.assign({}, popupProps, { anchorRef: anchorRef, children: _jsxs("div", { className: b('popup-content'), children: [typeof props.children === 'function' ? (props.children(calendarProps)) : (_jsx(Calendar, Object.assign({}, calendarProps))), state.datePickerState.hasTime && (_jsx("div", { className: b('time-field-wrapper'), children: _jsx(DateField, Object.assign({}, timeInputProps)) }))] }) })))] })));
+                } })), _jsx(TextInput, Object.assign({}, fieldProps, { controlProps: Object.assign(Object.assign({}, fieldProps.controlProps), { disabled: isMobile && state.mode === 'absolute', className: b('input', { mobile: isMobile && state.mode === 'absolute' }) }), hasClear: props.hasClear && !(isMobile && state.mode === 'absolute'), startContent: _jsx(Button, Object.assign({}, modeSwitcherProps, { children: _jsx(Icon, { data: FunctionIcon }) })), endContent: _jsxs(React.Fragment, { children: [!isMobile && !isOnlyTime && (_jsx(Button, Object.assign({}, calendarButtonProps, { children: _jsx(Icon, { data: CalendarIcon }) }))), !isMobile && isOnlyTime && (_jsx(StubButton, { size: calendarButtonProps.size, icon: ClockIcon })), isMobile && state.mode === 'absolute' && (_jsx(StubButton, { size: calendarButtonProps.size, icon: isOnlyTime ? ClockIcon : CalendarIcon }))] }) })), _jsx(HiddenInput, { name: props.name, value: (_a = state.value) === null || _a === void 0 ? void 0 : _a.type, disabled: state.disabled, form: props.form }), _jsx(HiddenInput, { name: props.name, value: state.value, toStringValue: (value) => getNativeValue(value), onReset: (value) => {
+                    state.setValue(value);
+                }, disabled: state.disabled, form: props.form }), !isMobile && !isOnlyTime && (_jsx(Popup, Object.assign({}, popupProps, { anchorRef: anchorRef, children: _jsxs("div", { className: b('popup-content'), children: [typeof props.children === 'function' ? (props.children(calendarProps)) : (_jsx(Calendar, Object.assign({}, calendarProps))), state.datePickerState.hasTime && (_jsx("div", { className: b('time-field-wrapper'), children: _jsx(DateField, Object.assign({}, timeInputProps)) }))] }) })))] })));
 }
 function getNativeValue(value) {
     if (!value) {

package/dist/esm/components/RelativeRangeDatePicker/RelativeRangeDatePicker.d.ts

@@ -1,11 +1,11 @@
 import type { DateTime } from '@gravity-ui/date-utils';
 import type { Value } from '../RelativeDatePicker';
-import type { DomProps, FocusableProps, InputBase, RangeValue, StyleProps, TextInputProps, Validation } from '../types';
+import type { DomProps, FocusableProps, InputBase, InputDOMProps, RangeValue, StyleProps, TextInputProps, Validation } from '../types';
 import type { Preset } from './components/Presets/defaultPresets';
 import type { PresetTab } from './components/Presets/utils';
 import type { RelativeRangeDatePickerStateOptions } from './hooks/useRelativeRangeDatePickerState';
 import './RelativeRangeDatePicker.css';
-export interface RelativeRangeDatePickerProps extends RelativeRangeDatePickerStateOptions, DomProps, InputBase, TextInputProps, Validation, FocusableProps, StyleProps {
+export interface RelativeRangeDatePickerProps extends RelativeRangeDatePickerStateOptions, DomProps, InputBase, InputDOMProps, TextInputProps, Validation, FocusableProps, StyleProps {
     /** Format of the date when rendered in the input. [Available formats](https://day.js.org/docs/en/display/format) */
     format?: string;
     /** A placeholder date that controls the default values of each segment when the user first interacts with them. Defaults to today's date at midnight. */

package/dist/esm/components/RelativeRangeDatePicker/RelativeRangeDatePicker.js

@@ -1,8 +1,10 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { Calendar as CalendarIcon } from '@gravity-ui/icons';
 import { Button, Icon, TextInput, useFocusWithin, useMobile } from '@gravity-ui/uikit';
 import { block } from '../../utils/cn';
+import { HiddenInput } from '../HiddenInput/HiddenInput';
 import { getButtonSizeForInput } from '../utils/getButtonSizeForInput';
 import { PickerDialog } from './components/PickerDialog/PickerDialog';
 import { useRelativeRangeDatePickerState } from './hooks/useRelativeRangeDatePickerState';
@@ -84,7 +86,18 @@ export function RelativeRangeDatePicker(props) {
                 }), onClick: () => {
                     setIsActive(true);
                     setOpen(true);
-                } })) : null, _jsx(PickerDialog, { state: state, props: props, open: open, onClose: () => {
+                } })) : null, _jsx(HiddenInput, { name: props.name, form: props.form, value: state.value, toStringValue: (v) => { var _a, _b; return (_b = (_a = v === null || v === void 0 ? void 0 : v.start) === null || _a === void 0 ? void 0 : _a.type) !== null && _b !== void 0 ? _b : ''; }, disabled: props.disabled }), _jsx(HiddenInput, { name: props.name, form: props.form, value: state.value, toStringValue: (v) => { var _a; return getNativeValue((_a = v === null || v === void 0 ? void 0 : v.start) !== null && _a !== void 0 ? _a : null); }, disabled: props.disabled }), _jsx(HiddenInput, { name: props.name, form: props.form, value: state.value, toStringValue: (v) => { var _a, _b; return (_b = (_a = v === null || v === void 0 ? void 0 : v.end) === null || _a === void 0 ? void 0 : _a.type) !== null && _b !== void 0 ? _b : ''; }, disabled: props.disabled }), _jsx(HiddenInput, { name: props.name, form: props.form, value: state.value, toStringValue: (v) => { var _a; return getNativeValue((_a = v === null || v === void 0 ? void 0 : v.end) !== null && _a !== void 0 ? _a : null); }, disabled: props.disabled }), _jsx(HiddenInput, { name: props.name, form: props.form, onReset: (v) => {
+                    state.setValue(v.value, v.timeZone);
+                }, value: { value: state.value, timeZone: state.timeZone }, toStringValue: (v) => v.timeZone, disabled: props.disabled }), _jsx(PickerDialog, { state: state, props: props, open: open, onClose: () => {
                     setOpen(false);
                 }, anchorRef: anchorRef, isMobile: isMobile, className: props.className })] })));
 }
+function getNativeValue(value) {
+    if (!value) {
+        return '';
+    }
+    if (value.type === 'relative') {
+        return value.value;
+    }
+    return value.value.toISOString();
+}

package/dist/esm/components/RelativeRangeDatePicker/components/PickerDialog/PickerDialog.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { dateTime } from '@gravity-ui/date-utils';
 import { Button, Popup, Sheet } from '@gravity-ui/uikit';

package/dist/esm/components/RelativeRangeDatePicker/components/Presets/Presets.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { List, Tabs } from '@gravity-ui/uikit';

package/dist/esm/components/RelativeRangeDatePicker/components/Presets/PresetsDoc.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { CircleQuestion } from '@gravity-ui/icons';

package/dist/esm/components/RelativeRangeDatePicker/components/Zones/Zones.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getTimeZonesList } from '@gravity-ui/date-utils';
 import { ChevronRight } from '@gravity-ui/icons';

package/dist/esm/components/types/inputs.d.ts

@@ -29,6 +29,11 @@ export interface InputDOMProps {
      * The name of the input element, used when submitting an HTML form.
      */
     name?: string;
+    /**
+     * The id of a <form> in the same document. If this attribute is not set,
+     * the <input> is associated with its ancestor <form> element, if any.
+     */
+    form?: string;
 }
 export interface InputBase {
     /**

package/dist/esm/components/utils/mergeProps.js

@@ -34,9 +34,9 @@ export function mergeProps(...args) {
 }
 function chain(...fns) {
     return (...args) => {
-        for (const callback of fns) {
-            if (typeof callback === 'function') {
-                callback(...args);
+        for (const fn of fns) {
+            if (typeof fn === 'function') {
+                fn(...args);
             }
         }
     };

package/dist/esm/components/utils/validation/datePicker.js

@@ -6,13 +6,13 @@ export function getValidationResult(value, minValue, maxValue, isDateUnavailable
     const isInvalid = rangeOverflow || rangeUnderflow || isUnavailable;
     const errors = [];
     if (isInvalid) {
-        if (rangeUnderflow) {
+        if (rangeUnderflow && minValue) {
             errors.push(i18n('Value must be {minValue} or later.', {
                 minValue: minValue.timeZone(timeZone).format(),
                 value: valueTitle,
             }));
         }
-        if (rangeOverflow) {
+        if (rangeOverflow && maxValue) {
             errors.push(i18n('Value must be {maxValue} or earlier.', {
                 maxValue: maxValue.timeZone(timeZone).format(),
                 value: valueTitle,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/date-components",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "description": "",
   "license": "MIT",
   "main": "dist/cjs/index.js",
@@ -46,7 +46,7 @@
   },
   "dependencies": {
     "@bem-react/classname": "^1.6.0",
-    "@gravity-ui/date-utils": "^2.0.1",
+    "@gravity-ui/date-utils": "^2.5.3",
     "@gravity-ui/icons": "^2.2.0",
     "tslib": "^2.6.2"
   },
@@ -60,24 +60,27 @@
     "@gravity-ui/prettier-config": "^1.1.0",
     "@gravity-ui/stylelint-config": "^4.0.1",
     "@gravity-ui/tsconfig": "^1.0.0",
-    "@gravity-ui/uikit": "^6.1.1",
-    "@storybook/addon-a11y": "^8.0.10",
-    "@storybook/addon-essentials": "^8.0.10",
-    "@storybook/addon-viewport": "^8.0.10",
+    "@gravity-ui/uikit": "^6.15.0",
+    "@storybook/addon-a11y": "^8.1.3",
+    "@storybook/addon-essentials": "^8.1.3",
+    "@storybook/addon-viewport": "^8.1.3",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
-    "@storybook/blocks": "^8.0.10",
-    "@storybook/manager-api": "^8.0.10",
+    "@storybook/blocks": "^8.1.3",
+    "@storybook/manager-api": "^8.1.3",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "^8.0.10",
-    "@storybook/react-webpack5": "^8.0.10",
-    "@storybook/theming": "^8.0.10",
-    "@testing-library/jest-dom": "^6.4.5",
-    "@testing-library/react": "^15.0.7",
+    "@storybook/react": "^8.1.3",
+    "@storybook/react-webpack5": "^8.1.3",
+    "@storybook/theming": "^8.1.3",
+    "@storybook/types": "^8.1.3",
+    "@testing-library/dom": "^10.1.0",
+    "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.12",
     "@types/react": "^18.3.2",
     "@types/react-dom": "^18.3.0",
     "eslint": "^8.57.0",
+    "eslint-plugin-react-compiler": "^0.0.0-experimental-c8b3f72-20240517",
     "eslint-plugin-testing-library": "^6.2.2",
     "gulp": "^5.0.0",
     "gulp-cli": "^3.0.0",
@@ -85,8 +88,8 @@
     "gulp-replace": "^1.1.4",
     "gulp-typescript": "^5.0.1",
     "husky": "^9.0.11",
-    "jest": "^29.5.0",
-    "jest-environment-jsdom": "^29.5.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "jest-transform-css": "^6.0.1",
     "nano-staged": "^0.8.0",
     "npm-run-all": "^4.1.5",
@@ -95,17 +98,20 @@
     "react-dom": "^18.3.1",
     "rimraf": "^5.0.7",
     "sass": "^1.77.1",
-    "storybook": "^8.0.10",
+    "storybook": "^8.1.3",
     "stylelint": "^15.11.0",
     "stylelint-use-logical": "^2.1.2",
-    "ts-jest": "^29.1.2",
+    "ts-jest": "^29.1.5",
     "ts-node": "^10.9.2",
     "typescript": "^5.4.5"
   },
   "peerDependencies": {
     "@gravity-ui/uikit": "^6.0.0",
-    "react": "^17.0.0 || ^18.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0"
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
+  },
+  "overrides": {
+    "nwsapi": "2.2.2"
   },
   "nano-staged": {
     "*.{scss}": [