@gravity-ui/date-components 1.6.0 → 2.1.0

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

@@ -1,8 +1,8 @@
 import React from 'react';
-import type { CalendarInstance, CalendarSize } from '../CalendarBase/CalendarBase';
-import type { RangeCalendarStateOptions } from '../CalendarBase/hooks/useRangeCalendarState';
+import type { CalendarInstance, CalendarSize } from '../CalendarView/CalendarView';
+import type { RangeCalendarStateOptions } from '../CalendarView/hooks/useRangeCalendarState';
 import type { AccessibilityProps, DomProps, FocusEvents, StyleProps } from '../types';
-import '../CalendarBase/Calendar.css';
+import '../CalendarView/Calendar.css';
 export interface RangeCalendarProps extends RangeCalendarStateOptions, DomProps, StyleProps, FocusEvents, AccessibilityProps {
     /**
      * The size of the element.

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

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import { CalendarBase } from '../CalendarBase/CalendarBase';
-import { useRangeCalendarState } from '../CalendarBase/hooks/useRangeCalendarState';
-import '../CalendarBase/Calendar.css';
+import { CalendarView } from '../CalendarView/CalendarView';
+import { useRangeCalendarState } from '../CalendarView/hooks/useRangeCalendarState';
+import '../CalendarView/Calendar.css';
 export const RangeCalendar = React.forwardRef(function Calendar(props, ref) {
     const state = useRangeCalendarState(props);
     const handleBlur = (e) => {
@@ -12,5 +12,5 @@ export const RangeCalendar = React.forwardRef(function Calendar(props, ref) {
         }
         (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
     };
-    return _jsx(CalendarBase, Object.assign({ ref: ref }, props, { state: state, onBlur: handleBlur }));
+    return _jsx(CalendarView, Object.assign({ ref: ref }, props, { state: state, onBlur: handleBlur }));
 });

package/dist/esm/components/RangeDateField/RangeDateField.css

@@ -0,0 +1,4 @@
+.g-date-range-date-field {
+  display: inline-block;
+  width: auto;
+}

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

@@ -0,0 +1,12 @@
+import type { DateTime } from '@gravity-ui/date-utils';
+import type { DateFieldProps } from '../DateField/hooks/useDateFieldProps';
+import type { RangeValue } from '../types';
+import './RangeDateField.css';
+export type RangeDateFieldProps = DateFieldProps<RangeValue<DateTime>> & {
+    /**
+     * Delimiter separating the start and end parts of the range.
+     * @default ' — '
+     * */
+    delimiter?: string;
+};
+export declare function RangeDateField({ className, ...props }: RangeDateFieldProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,21 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } 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 { useRangeDateFieldState } from './hooks/useRangeDateFieldState';
+import './RangeDateField.css';
+const b = block('range-date-field');
+export function RangeDateField(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    const state = useRangeDateFieldState(props);
+    const { inputProps } = useDateFieldProps(state, props);
+    const [isActive, setActive] = React.useState(false);
+    const { focusWithinProps } = useFocusWithin({
+        onFocusWithinChange(isFocusWithin) {
+            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 })) })));
+}

package/dist/esm/components/RangeDateField/hooks/useRangeDateFieldState.d.ts

@@ -0,0 +1,9 @@
+import type { DateTime } from '@gravity-ui/date-utils';
+import type { BaseDateFieldState } from '../../DateField';
+import type { DateFieldBase } from '../../types/datePicker';
+import type { RangeValue } from '../../types/inputs';
+export interface RangeDateFieldStateOptions extends DateFieldBase<RangeValue<DateTime>> {
+    delimiter?: string;
+}
+export type RangeDateFieldState = BaseDateFieldState<RangeValue<DateTime>>;
+export declare function useRangeDateFieldState(props: RangeDateFieldStateOptions): RangeDateFieldState;

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

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { Calendar as CalendarIcon, Function as FunctionIcon } from '@gravity-ui/icons';
+import { Calendar as CalendarIcon, Clock as ClockIcon, Function as FunctionIcon, } from '@gravity-ui/icons';
 import { Button, Icon, Popup, TextInput, useMobile } from '@gravity-ui/uikit';
 import { block } from '../../utils/cn';
 import { Calendar } from '../Calendar';
 import { DateField } from '../DateField';
-import { MobileCalendar, MobileCalendarIcon } from '../DatePicker/MobileCalendar';
+import { MobileCalendar } from '../DatePicker/MobileCalendar';
+import { StubButton } from '../DatePicker/StubButton';
 import { useRelativeDatePickerProps } from './hooks/useRelativeDatePickerProps';
 import { useRelativeDatePickerState } from './hooks/useRelativeDatePickerState';
 import './RelativeDatePicker.css';
@@ -14,12 +15,24 @@ 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();
+    const isOnlyTime = state.datePickerState.hasTime && !state.datePickerState.hasDate;
     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 && !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)) }))] }) })))] })));
+}
+function getNativeValue(value) {
+    if (!value) {
+        return '';
+    }
+    if (value.type === 'relative') {
+        return value.value;
+    }
+    return value.value.toISOString();
 }