@gravity-ui/date-components 1.5.0 → 2.0.1

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

@@ -0,0 +1,222 @@
+/* eslint-disable complexity */
+import React from 'react';
+import { isValid } from '@gravity-ui/date-utils';
+import { useControlledState } from '@gravity-ui/uikit';
+import { useBaseDateFieldState } from '../../DateField';
+import { EDITABLE_SEGMENTS, addSegment, isAllSegmentsValid, parseDateFromString, setSegment, useFormatSections, } from '../../DateField/utils';
+import { isInvalid } from '../../utils/dates';
+import { useDefaultTimeZone } from '../../utils/useDefaultTimeZone';
+import { createPlaceholderRangeValue, getRangeEditableSections, isValidRange } from '../utils';
+const RANGE_FORMAT_DELIMITER = ' — ';
+export function useRangeDateFieldState(props) {
+    var _a, _b, _c, _d, _e;
+    const [value, setRange] = useControlledState(props.value, props.defaultValue || null, props.onUpdate);
+    const inputTimeZone = useDefaultTimeZone(((_a = props.value) === null || _a === void 0 ? void 0 : _a.start) || ((_b = props.defaultValue) === null || _b === void 0 ? void 0 : _b.start) || props.placeholderValue);
+    const timeZone = props.timeZone || inputTimeZone;
+    const handleUpdateRange = (v) => {
+        setRange(v ? { start: v.start.timeZone(inputTimeZone), end: v.end.timeZone(inputTimeZone) } : v);
+    };
+    const [placeholderDate, setPlaceholderDate] = React.useState(() => {
+        return createPlaceholderRangeValue({
+            placeholderValue: props.placeholderValue,
+            timeZone,
+        });
+    });
+    const format = props.format || 'L';
+    const delimiter = (_c = props.delimiter) !== null && _c !== void 0 ? _c : RANGE_FORMAT_DELIMITER;
+    const sections = useFormatSections(format);
+    const allSegments = React.useMemo(() => {
+        return sections
+            .filter((seg) => EDITABLE_SEGMENTS[seg.type])
+            .reduce((p, seg) => (Object.assign(Object.assign({}, p), { [seg.type]: true })), {});
+    }, [sections]);
+    // eslint-disable-next-line prefer-const
+    let [validSegments, setValidSegments] = React.useState(() => (value ? { start: Object.assign({}, allSegments), end: Object.assign({}, allSegments) } : { start: {}, end: {} }));
+    if (value &&
+        (!isAllSegmentsValid(allSegments, validSegments.start) ||
+            !isAllSegmentsValid(allSegments, validSegments.end))) {
+        setValidSegments({ start: Object.assign({}, allSegments), end: Object.assign({}, allSegments) });
+    }
+    if (!value &&
+        isAllSegmentsValid(allSegments, validSegments.start) &&
+        Object.keys(validSegments.start).length === Object.keys(allSegments).length &&
+        isAllSegmentsValid(allSegments, validSegments.end) &&
+        Object.keys(validSegments.end).length === Object.keys(allSegments).length) {
+        validSegments = { start: {}, end: {} };
+        setValidSegments(validSegments);
+        setPlaceholderDate(createPlaceholderRangeValue({
+            placeholderValue: props.placeholderValue,
+            timeZone,
+        }));
+    }
+    const displayValue = value &&
+        isValid(value.start) &&
+        isValid(value.end) &&
+        Object.keys(validSegments.start).length >= Object.keys(allSegments).length &&
+        Object.keys(validSegments.end).length >= Object.keys(allSegments).length
+        ? { start: value.start.timeZone(timeZone), end: value.end.timeZone(timeZone) }
+        : {
+            start: placeholderDate.start.timeZone(timeZone),
+            end: placeholderDate.end.timeZone(timeZone),
+        };
+    const sectionsState = useSectionsState(sections, displayValue, validSegments, delimiter);
+    const [selectedSections, setSelectedSections] = React.useState(-1);
+    const selectedSectionIndexes = React.useMemo(() => {
+        if (selectedSections === -1) {
+            return null;
+        }
+        if (selectedSections === 'all') {
+            return {
+                startIndex: 0,
+                endIndex: sectionsState.editableSections.length - 1,
+            };
+        }
+        if (typeof selectedSections === 'number') {
+            return { startIndex: selectedSections, endIndex: selectedSections };
+        }
+        if (typeof selectedSections === 'string') {
+            const selectedSectionIndex = sectionsState.editableSections.findIndex((section) => section.type === selectedSections);
+            return { startIndex: selectedSectionIndex, endIndex: selectedSectionIndex };
+        }
+        return selectedSections;
+    }, [selectedSections, sectionsState.editableSections]);
+    function setValue(newValue) {
+        if (props.disabled || props.readOnly) {
+            return;
+        }
+        if (isAllSegmentsValid(allSegments, validSegments.start) &&
+            isAllSegmentsValid(allSegments, validSegments.end)) {
+            if (!value || !(newValue.start.isSame(value.start) && newValue.end.isSame(value.end))) {
+                handleUpdateRange(newValue);
+            }
+        }
+        else {
+            if (value) {
+                handleUpdateRange(null);
+            }
+            setPlaceholderDate(newValue);
+        }
+    }
+    function markValid(portion, part) {
+        validSegments[portion][part] = true;
+        if (validSegments[portion].day &&
+            validSegments[portion].month &&
+            validSegments[portion].year &&
+            allSegments.weekday) {
+            validSegments[portion].weekday = true;
+        }
+        if (validSegments[portion].hour && allSegments.dayPeriod) {
+            validSegments[portion].dayPeriod = true;
+        }
+        setValidSegments(Object.assign(Object.assign({}, validSegments), { [portion]: Object.assign({}, validSegments[portion]) }));
+    }
+    function setSection(sectionIndex, amount) {
+        const portion = sectionIndex <= sections.length ? 'start' : 'end';
+        const section = sectionsState.editableSections[sectionIndex];
+        markValid(portion, section.type);
+        setValue(Object.assign(Object.assign({}, displayValue), { [portion]: setSegment(section, displayValue[portion], amount) }));
+    }
+    function adjustSection(sectionIndex, amount) {
+        const section = sectionsState.editableSections[sectionIndex];
+        const portion = sectionIndex <= sections.length ? 'start' : 'end';
+        if (validSegments[portion][section.type]) {
+            setValue(Object.assign(Object.assign({}, displayValue), { [portion]: addSegment(section, displayValue[portion], amount) }));
+        }
+        else {
+            markValid(portion, section.type);
+            if (Object.keys(validSegments[portion]).length >= Object.keys(allSegments).length) {
+                setValue(displayValue);
+            }
+        }
+    }
+    function flushValidSection(sectionIndex) {
+        const portion = sectionIndex <= sections.length ? 'start' : 'end';
+        delete validSegments[portion][sectionsState.editableSections[sectionIndex].type];
+        setValidSegments(Object.assign(Object.assign({}, validSegments), { [portion]: Object.assign({}, validSegments[portion]) }));
+    }
+    function flushAllValidSections() {
+        validSegments = { start: {}, end: {} };
+        setValidSegments({ start: {}, end: {} });
+    }
+    function getSectionValue(sectionIndex) {
+        const portion = sectionIndex <= sections.length ? 'start' : 'end';
+        return displayValue[portion];
+    }
+    function setSectionValue(sectionIndex, currentValue) {
+        const portion = sectionIndex <= sections.length ? 'start' : 'end';
+        setValue(Object.assign(Object.assign({}, displayValue), { [portion]: currentValue }));
+    }
+    function createPlaceholder() {
+        return createPlaceholderRangeValue({
+            placeholderValue: props.placeholderValue,
+            timeZone,
+        });
+    }
+    function setValueFromString(str) {
+        var _a, _b;
+        const list = str.split(delimiter);
+        const start = parseDateFromString((_a = list === null || list === void 0 ? void 0 : list[0]) === null || _a === void 0 ? void 0 : _a.trim(), format, timeZone);
+        const end = parseDateFromString((_b = list === null || list === void 0 ? void 0 : list[1]) === null || _b === void 0 ? void 0 : _b.trim(), format, timeZone);
+        const range = { start, end };
+        if (isValid(range.start) && isValid(range.end)) {
+            handleUpdateRange(range);
+            return true;
+        }
+        return false;
+    }
+    const validationState = props.validationState ||
+        (isInvalid(value === null || value === void 0 ? void 0 : value.start, props.minValue, props.maxValue) ? 'invalid' : undefined) ||
+        (isInvalid(value === null || value === void 0 ? void 0 : value.end, props.minValue, props.maxValue) ? 'invalid' : undefined) ||
+        (value && !isValidRange(value) ? 'invalid' : undefined) ||
+        (value && ((_d = props.isDateUnavailable) === null || _d === void 0 ? void 0 : _d.call(props, value.start)) ? 'invalid' : undefined) ||
+        (value && ((_e = props.isDateUnavailable) === null || _e === void 0 ? void 0 : _e.call(props, value.end)) ? 'invalid' : undefined);
+    return useBaseDateFieldState({
+        value,
+        displayValue,
+        placeholderValue: props.placeholderValue,
+        timeZone,
+        validationState,
+        editableSections: sectionsState.editableSections,
+        readOnly: props.readOnly,
+        disabled: props.disabled,
+        selectedSectionIndexes,
+        selectedSections,
+        isEmpty: Object.keys(validSegments.start).length === 0 &&
+            Object.keys(validSegments.end).length === 0,
+        flushAllValidSections,
+        flushValidSection,
+        setSelectedSections,
+        setValue,
+        setDate: handleUpdateRange,
+        adjustSection,
+        setSection,
+        getSectionValue,
+        setSectionValue,
+        createPlaceholder,
+        setValueFromString,
+    });
+}
+function useSectionsState(sections, value, validSegments, delimiter) {
+    const [state, setState] = React.useState(() => {
+        return {
+            value,
+            sections,
+            validSegments,
+            delimiter,
+            editableSections: getRangeEditableSections(sections, value, validSegments, delimiter),
+        };
+    });
+    if (sections !== state.sections ||
+        validSegments !== state.validSegments ||
+        !(value.start.isSame(state.value.start) && value.end.isSame(state.value.end)) ||
+        delimiter !== state.delimiter) {
+        setState({
+            value,
+            sections,
+            validSegments,
+            delimiter,
+            editableSections: getRangeEditableSections(sections, value, validSegments, delimiter),
+        });
+    }
+    return state;
+}

package/dist/esm/components/RangeDateField/index.d.ts

@@ -0,0 +1,2 @@
+export * from './RangeDateField';
+export * from './hooks/useRangeDateFieldState';

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

@@ -0,0 +1,2 @@
+export * from './RangeDateField';
+export * from './hooks/useRangeDateFieldState';

package/dist/esm/components/RangeDateField/utils/createPlaceholderRangeValue.d.ts

@@ -0,0 +1,5 @@
+import type { PlaceholderValueOptions } from '../../utils/dates';
+export declare function createPlaceholderRangeValue({ placeholderValue, timeZone }: PlaceholderValueOptions): {
+    start: import("@gravity-ui/date-utils").DateTime;
+    end: import("@gravity-ui/date-utils").DateTime;
+};

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

@@ -0,0 +1,5 @@
+import { createPlaceholderValue } from '../../utils/dates';
+export function createPlaceholderRangeValue({ placeholderValue, timeZone }) {
+    const date = createPlaceholderValue({ placeholderValue, timeZone });
+    return { start: date, end: date };
+}

package/dist/esm/components/RangeDateField/utils/getRangeEditableSections.d.ts

@@ -0,0 +1,5 @@
+import type { DateTime } from '@gravity-ui/date-utils';
+import type { DateFieldSectionWithoutPosition } from '../../DateField/types';
+import type { EDITABLE_SEGMENTS } from '../../DateField/utils';
+import type { RangeValue } from '../../types';
+export declare function getRangeEditableSections(sections: DateFieldSectionWithoutPosition[], value: RangeValue<DateTime>, validSegments: RangeValue<typeof EDITABLE_SEGMENTS>, delimiter: string): import("../../DateField/types").DateFieldSection[];

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

@@ -0,0 +1,38 @@
+import { getEditableSections, isEditableSection, toEditableSection } from '../../DateField/utils';
+export function getRangeEditableSections(sections, value, validSegments, delimiter) {
+    const start = getEditableSections(sections, value.start, validSegments.start);
+    const end = getEditableSections(sections, value.end, validSegments.end);
+    const last = start[start.length - 1];
+    let position = last.end;
+    const previousEditableSection = last.nextEditableSection;
+    const sectionsCount = start.length + 1;
+    const delimiterSection = toEditableSection({
+        type: 'literal',
+        contentType: 'letter',
+        format: delimiter,
+        placeholder: delimiter,
+        hasLeadingZeros: false,
+    }, value.start, validSegments.start, position, previousEditableSection);
+    position += delimiterSection.textValue.length - 1;
+    let nextEditableSection;
+    for (let index = 0; index < end.length; index++) {
+        const section = end[index];
+        section.start += position;
+        section.end += position;
+        if (section.previousEditableSection === 0 && nextEditableSection === undefined) {
+            section.previousEditableSection = previousEditableSection;
+        }
+        else {
+            section.previousEditableSection += sectionsCount;
+        }
+        section.nextEditableSection += sectionsCount;
+        if (isEditableSection(section) && nextEditableSection === undefined) {
+            nextEditableSection = index + sectionsCount;
+        }
+    }
+    if (nextEditableSection !== undefined) {
+        delimiterSection.nextEditableSection = nextEditableSection;
+        start[previousEditableSection].nextEditableSection = nextEditableSection;
+    }
+    return [...start, delimiterSection, ...end];
+}

package/dist/esm/components/RangeDateField/utils/index.d.ts

@@ -0,0 +1,3 @@
+export * from './getRangeEditableSections';
+export * from './isValidRange';
+export * from './createPlaceholderRangeValue';

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

@@ -0,0 +1,3 @@
+export * from './getRangeEditableSections';
+export * from './isValidRange';
+export * from './createPlaceholderRangeValue';

package/dist/esm/components/RangeDateField/utils/isValidRange.d.ts

@@ -0,0 +1,3 @@
+import type { DateTime } from '@gravity-ui/date-utils';
+import type { RangeValue } from '../../types';
+export declare function isValidRange({ start, end }: RangeValue<DateTime>): boolean;

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

@@ -0,0 +1,4 @@
+import { isValid } from '@gravity-ui/date-utils';
+export function isValidRange({ start, end }) {
+    return isValid(start) && isValid(end) && (start.isSame(end) || start.isBefore(end));
+}

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

@@ -1,7 +1,7 @@
-import type { AccessibilityProps, DomProps, FocusableProps, KeyboardEvents, StyleProps, TextInputExtendProps, TextInputProps } from '../types';
+import type { AccessibilityProps, DomProps, FocusableProps, InputDOMProps, KeyboardEvents, StyleProps, TextInputExtendProps, TextInputProps } from '../types';
 import type { RelativeDateFieldOptions } from './hooks/useRelativeDateFieldState';
 import './RelativeDateField.css';
-export interface RelativeDateFieldProps extends RelativeDateFieldOptions, TextInputProps, TextInputExtendProps, DomProps, StyleProps, AccessibilityProps, FocusableProps, KeyboardEvents {
+export interface RelativeDateFieldProps extends RelativeDateFieldOptions, TextInputProps, TextInputExtendProps, DomProps, InputDOMProps, StyleProps, AccessibilityProps, FocusableProps, KeyboardEvents {
     /**
      * Show time field in popup
      * @default false

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

@@ -9,9 +9,10 @@ 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();
+    const isMobile = useMobile();
     const anchorRef = React.useRef(null);
     const [isOpen, setOpen] = React.useState(false);
     const { focusWithinProps } = useFocusWithin({
@@ -26,5 +27,7 @@ export function RelativeDateField(props) {
                         setOpen(true);
                     }
                     (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
-                }, onBlur: props.onBlur })), !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("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] }) }))] })));
 }

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

@@ -6,13 +6,6 @@ export function useRelativeDateFieldProps(state, props) {
         setPrevCorrectDate(state.lastCorrectDate);
         setFocusedDate(state.lastCorrectDate);
     }
-    let error;
-    if (props.validationState === 'invalid') {
-        error = props.errorMessage || true;
-    }
-    else {
-        error = state.validationState === 'invalid';
-    }
     return {
         inputProps: {
             size: props.size,
@@ -21,12 +14,13 @@ export function useRelativeDateFieldProps(state, props) {
             onUpdate: state.setText,
             disabled: state.disabled,
             hasClear: props.hasClear,
-            //@ts-expect-error TODO: use new TextInput API
-            error,
+            validationState: state.validationState,
+            errorMessage: props.errorMessage,
+            errorPlacement: props.errorPlacement,
             label: props.label,
             id: props.id,
-            leftContent: props.leftContent,
-            rightContent: props.rightContent,
+            startContent: props.startContent,
+            endContent: props.endContent,
             pin: props.pin,
             view: props.view,
             placeholder: props.placeholder,

package/dist/esm/components/RelativeDateField/hooks/useRelativeDateFieldState.d.ts

@@ -24,7 +24,9 @@ export interface RelativeDateFieldState {
      */
     readOnly?: boolean;
 }
-export interface RelativeDateFieldOptions extends ValueBase<string, string | null>, InputBase, Validation {
+export interface RelativeDateFieldOptions extends ValueBase<string | null>, InputBase, Validation {
     timeZone?: string;
+    /** Round up parsed date to the nearest granularity. */
+    roundUp?: boolean;
 }
 export declare function useRelativeDateFieldState(props: RelativeDateFieldOptions): RelativeDateFieldState;

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

@@ -1,8 +1,9 @@
 import React from 'react';
 import { dateTimeParse, isValid } from '@gravity-ui/date-utils';
-import { useControlledState } from '../../hooks/useControlledState';
+import { useControlledState } from '@gravity-ui/uikit';
 export function useRelativeDateFieldState(props) {
-    const [value, setValue] = useControlledState(props.value, props.defaultValue, props.onUpdate);
+    var _a;
+    const [value, setValue] = useControlledState(props.value, (_a = props.defaultValue) !== null && _a !== void 0 ? _a : null, props.onUpdate);
     const [text, setText] = React.useState(value !== null && value !== void 0 ? value : '');
     if (value && value !== text) {
         setText(value);
@@ -30,7 +31,7 @@ export function useRelativeDateFieldState(props) {
         if (!value) {
             return null;
         }
-        return (_a = dateTimeParse(value, { timeZone: props.timeZone })) !== null && _a !== void 0 ? _a : null;
+        return (_a = dateTimeParse(value, { timeZone: props.timeZone, roundUp: props.roundUp })) !== null && _a !== void 0 ? _a : null;
     }, [value, props.timeZone]);
     const [lastCorrectDate, setLastCorrectDate] = React.useState(parsedDate);
     if (parsedDate && parsedDate !== lastCorrectDate) {
@@ -38,7 +39,7 @@ export function useRelativeDateFieldState(props) {
     }
     const validationState = props.validationState || (text && !parsedDate) ? 'invalid' : undefined;
     return {
-        value: value !== null && value !== void 0 ? value : null,
+        value,
         setValue(v) {
             if (props.disabled || props.readOnly) {
                 return;

package/dist/esm/components/RelativeDatePicker/RelativeDatePicker.css

@@ -3,6 +3,9 @@
   display: inline-flex;
   outline: none;
 }
+.g-date-relative-date-picker__input_mobile {
+  pointer-events: none;
+}
 .g-date-relative-date-picker__field {
   width: 100%;
 }

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

@@ -1,9 +1,9 @@
 import React from 'react';
 import type { CalendarProps } from '../Calendar';
-import type { AccessibilityProps, DomProps, FocusableProps, KeyboardEvents, StyleProps, TextInputProps } from '../types';
+import type { AccessibilityProps, DomProps, FocusableProps, InputDOMProps, KeyboardEvents, StyleProps, TextInputProps } from '../types';
 import type { RelativeDatePickerStateOptions } from './hooks/useRelativeDatePickerState';
 import './RelativeDatePicker.css';
-export interface RelativeDatePickerProps extends RelativeDatePickerStateOptions, TextInputProps, FocusableProps, KeyboardEvents, DomProps, StyleProps, AccessibilityProps {
+export interface RelativeDatePickerProps extends RelativeDatePickerStateOptions, TextInputProps, FocusableProps, KeyboardEvents, DomProps, InputDOMProps, StyleProps, AccessibilityProps {
     children?: (props: CalendarProps) => React.ReactNode;
 }
 export declare function RelativeDatePicker(props: RelativeDatePickerProps): import("react/jsx-runtime").JSX.Element;

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

@@ -14,12 +14,23 @@ export function RelativeDatePicker(props) {
     const state = useRelativeDatePickerState(props);
     const { groupProps, fieldProps, modeSwitcherProps, calendarButtonProps, popupProps, calendarProps, timeInputProps, } = useRelativeDatePickerProps(state, props);
     const anchorRef = React.useRef(null);
-    const [isMobile] = useMobile();
+    const isMobile = useMobile();
     return (_jsxs("div", Object.assign({ ref: anchorRef, className: b(null, props.className) }, groupProps, { children: [isMobile && state.mode === 'absolute' && (_jsx(MobileCalendar, { state: state.datePickerState, props: {
                     id: props.id,
                     disabled: props.disabled,
                     readOnly: props.readOnly,
                     placeholderValue: props.placeholderValue,
                     timeZone: props.timeZone,
-                } })), _jsx(TextInput, Object.assign({}, fieldProps, { leftContent: _jsx(Button, Object.assign({}, modeSwitcherProps, { children: _jsx(Icon, { data: FunctionIcon }) })), rightContent: _jsxs(React.Fragment, { children: [!isMobile && (_jsx(Button, Object.assign({}, calendarButtonProps, { children: _jsx(Icon, { data: CalendarIcon }) }))), isMobile && state.mode === 'absolute' && (_jsx(MobileCalendarIcon, { state: state.datePickerState, props: { size: props.size } }))] }) })), !isMobile && (_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 && (_jsx(Button, Object.assign({}, calendarButtonProps, { children: _jsx(Icon, { data: CalendarIcon }) }))), isMobile && state.mode === 'absolute' && (_jsx(MobileCalendarIcon, { state: state.datePickerState, props: { size: props.size } }))] }) })), _jsx("input", { type: "text", hidden: true, name: props.name, value: getNativeValue(state.value), 
+                // Ignore React warning
+                onChange: () => { } }), !isMobile && (_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) {
+        return '';
+    }
+    if (value.type === 'relative') {
+        return value.value;
+    }
+    return value.value.toISOString();
 }

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

@@ -2,24 +2,25 @@ import { __rest } from "tslib";
 import React from 'react';
 import { useFocusWithin, useForkRef } from '@gravity-ui/uikit';
 import { useDateFieldProps } from '../../DateField';
+import { useRelativeDateFieldProps } from '../../RelativeDateField';
 import { getButtonSizeForInput } from '../../utils/getButtonSizeForInput';
 import { mergeProps } from '../../utils/mergeProps';
 import { i18n } from '../i18n';
 export function useRelativeDatePickerProps(state, _a) {
     var { onFocus, onBlur } = _a, props = __rest(_a, ["onFocus", "onBlur"]);
-    const { mode, setMode, datePickerState, dateFieldState, relativeDateState } = state;
-    const [focusedDate, setFocusedDate] = React.useState(relativeDateState.lastCorrectDate);
+    const { mode, setMode, datePickerState, relativeDateState } = state;
+    const [focusedDate, setFocusedDate] = React.useState(mode === 'relative'
+        ? relativeDateState.lastCorrectDate
+        : datePickerState.dateFieldState.displayValue);
     const [prevCorrectDate, setPrevCorrectDate] = React.useState(relativeDateState.lastCorrectDate);
     if (prevCorrectDate !== relativeDateState.lastCorrectDate) {
         setPrevCorrectDate(relativeDateState.lastCorrectDate);
         setFocusedDate(relativeDateState.lastCorrectDate);
     }
-    const [prevDateValue, setPrevDateValue] = React.useState(datePickerState.dateValue);
-    if (datePickerState.dateValue !== prevDateValue) {
-        setPrevDateValue(datePickerState.dateValue);
-        if (datePickerState.dateValue) {
-            setFocusedDate(datePickerState.dateValue);
-        }
+    const [prevDateValue, setPrevDateValue] = React.useState(datePickerState.dateFieldState.displayValue);
+    if (!datePickerState.dateFieldState.displayValue.isSame(prevDateValue, 'day')) {
+        setPrevDateValue(datePickerState.dateFieldState.displayValue);
+        setFocusedDate(datePickerState.dateFieldState.displayValue);
     }
     const { focusWithinProps } = useFocusWithin({
         onFocusWithin: onFocus,
@@ -34,6 +35,18 @@ export function useRelativeDatePickerProps(state, _a) {
     if (!state.isActive && isOpen) {
         setOpen(false);
     }
+    const [prevOpen, setPrevOpen] = React.useState(isOpen);
+    if (isOpen !== prevOpen) {
+        setPrevOpen(isOpen);
+        if (!isOpen) {
+            // FIXME: use popup afterOpenChange instead.
+            setTimeout(() => {
+                setFocusedDate(mode === 'relative'
+                    ? relativeDateState.lastCorrectDate
+                    : datePickerState.dateFieldState.displayValue);
+            }, 200);
+        }
+    }
     const commonInputProps = {
         onFocus: () => {
             if (!state.isActive) {
@@ -41,27 +54,17 @@ export function useRelativeDatePickerProps(state, _a) {
                 setOpen(true);
             }
         },
+        errorMessage: props.errorMessage,
+        errorPlacement: props.errorPlacement,
     };
-    const { inputProps } = useDateFieldProps(dateFieldState, Object.assign(Object.assign({}, props), { value: undefined, defaultValue: undefined, onUpdate: undefined }));
-    const relativeDateProps = {
-        disabled: relativeDateState.disabled,
-        value: relativeDateState.text,
-        onUpdate: relativeDateState.setText,
-        hasClear: props.hasClear && !relativeDateState.readOnly,
-        placeholder: props.placeholder,
-        size: props.size,
-    };
-    let error;
+    const { inputProps } = useDateFieldProps(datePickerState.dateFieldState, Object.assign(Object.assign({}, props), { value: undefined, defaultValue: undefined, onUpdate: undefined }));
+    const { inputProps: relativeDateProps } = useRelativeDateFieldProps(relativeDateState, Object.assign(Object.assign({}, props), { value: undefined, defaultValue: undefined, onUpdate: undefined }));
     let validationState = props.validationState;
-    if (validationState) {
-        error = validationState === 'invalid' ? props.errorMessage || true : undefined;
-    }
-    else {
+    if (!validationState) {
         validationState =
             mode === 'relative'
                 ? relativeDateState.validationState
-                : dateFieldState.validationState;
-        error = validationState === 'invalid';
+                : datePickerState.dateFieldState.validationState;
     }
     const inputRef = React.useRef(null);
     const handleRef = useForkRef(inputRef, mode === 'relative' ? relativeDateProps.controlRef : inputProps.controlRef);
@@ -87,14 +90,17 @@ export function useRelativeDatePickerProps(state, _a) {
                     focusCalendar();
                 }
             } }),
-        fieldProps: mergeProps(commonInputProps, mode === 'relative' ? relativeDateProps : inputProps, mode === 'absolute' && dateFieldState.isEmpty && !state.isActive && props.placeholder
+        fieldProps: mergeProps(commonInputProps, mode === 'relative' ? relativeDateProps : inputProps, mode === 'absolute' &&
+            datePickerState.dateFieldState.isEmpty &&
+            !state.isActive &&
+            props.placeholder
             ? { value: '' }
-            : undefined, { controlRef: handleRef, error }),
+            : undefined, { controlRef: handleRef, validationState }),
         modeSwitcherProps: {
             size: getButtonSizeForInput(props.size),
             disabled: state.readOnly || state.disabled,
             view: 'flat-secondary',
-            style: { zIndex: 2 },
+            style: { zIndex: 2, marginInlineEnd: 2 },
             selected: mode === 'relative',
             extraProps: {
                 'aria-label': i18n('Formula input mode'),
@@ -151,6 +157,8 @@ export function useRelativeDatePickerProps(state, _a) {
             },
             focusedValue: focusedDate,
             onFocusUpdate: setFocusedDate,
+            minValue: props.minValue,
+            maxValue: props.maxValue,
         },
         timeInputProps: {
             value: datePickerState.timeValue,

package/dist/esm/components/RelativeDatePicker/hooks/useRelativeDatePickerState.d.ts

@@ -1,5 +1,4 @@
 import type { DateTime } from '@gravity-ui/date-utils';
-import type { DateFieldState } from '../../DateField';
 import type { DatePickerState } from '../../DatePicker';
 import type { RelativeDateFieldState } from '../../RelativeDateField';
 import type { DateFieldBase } from '../../types';
@@ -12,6 +11,8 @@ export type Value = {
 };
 export type RelativeDatePickerMode = Value['type'];
 export interface RelativeDatePickerStateOptions extends DateFieldBase<Value> {
+    /** Round up parsed date to the nearest granularity. */
+    roundUp?: boolean;
 }
 export interface RelativeDatePickerState {
     value: Value | null;
@@ -19,7 +20,6 @@ export interface RelativeDatePickerState {
     mode: RelativeDatePickerMode;
     setMode: (mode: RelativeDatePickerMode) => void;
     datePickerState: DatePickerState;
-    dateFieldState: DateFieldState;
     relativeDateState: RelativeDateFieldState;
     selectedDate: DateTime | null;
     /**