@gravity-ui/date-components 1.5.0 → 2.0.1

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

@@ -0,0 +1,227 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRangeDateFieldState = void 0;
+const tslib_1 = require("tslib");
+/* eslint-disable complexity */
+const react_1 = tslib_1.__importDefault(require("react"));
+const date_utils_1 = require("@gravity-ui/date-utils");
+const uikit_1 = require("@gravity-ui/uikit");
+const DateField_1 = require("../../DateField");
+const utils_1 = require("../../DateField/utils");
+const dates_1 = require("../../utils/dates");
+const useDefaultTimeZone_1 = require("../../utils/useDefaultTimeZone");
+const utils_2 = require("../utils");
+const RANGE_FORMAT_DELIMITER = ' — ';
+function useRangeDateFieldState(props) {
+    var _a, _b, _c, _d, _e;
+    const [value, setRange] = (0, uikit_1.useControlledState)(props.value, props.defaultValue || null, props.onUpdate);
+    const inputTimeZone = (0, useDefaultTimeZone_1.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_1.default.useState(() => {
+        return (0, utils_2.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 = (0, utils_1.useFormatSections)(format);
+    const allSegments = react_1.default.useMemo(() => {
+        return sections
+            .filter((seg) => utils_1.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_1.default.useState(() => (value ? { start: Object.assign({}, allSegments), end: Object.assign({}, allSegments) } : { start: {}, end: {} }));
+    if (value &&
+        (!(0, utils_1.isAllSegmentsValid)(allSegments, validSegments.start) ||
+            !(0, utils_1.isAllSegmentsValid)(allSegments, validSegments.end))) {
+        setValidSegments({ start: Object.assign({}, allSegments), end: Object.assign({}, allSegments) });
+    }
+    if (!value &&
+        (0, utils_1.isAllSegmentsValid)(allSegments, validSegments.start) &&
+        Object.keys(validSegments.start).length === Object.keys(allSegments).length &&
+        (0, utils_1.isAllSegmentsValid)(allSegments, validSegments.end) &&
+        Object.keys(validSegments.end).length === Object.keys(allSegments).length) {
+        validSegments = { start: {}, end: {} };
+        setValidSegments(validSegments);
+        setPlaceholderDate((0, utils_2.createPlaceholderRangeValue)({
+            placeholderValue: props.placeholderValue,
+            timeZone,
+        }));
+    }
+    const displayValue = value &&
+        (0, date_utils_1.isValid)(value.start) &&
+        (0, date_utils_1.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_1.default.useState(-1);
+    const selectedSectionIndexes = react_1.default.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 ((0, utils_1.isAllSegmentsValid)(allSegments, validSegments.start) &&
+            (0, utils_1.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]: (0, utils_1.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]: (0, utils_1.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 (0, utils_2.createPlaceholderRangeValue)({
+            placeholderValue: props.placeholderValue,
+            timeZone,
+        });
+    }
+    function setValueFromString(str) {
+        var _a, _b;
+        const list = str.split(delimiter);
+        const start = (0, utils_1.parseDateFromString)((_a = list === null || list === void 0 ? void 0 : list[0]) === null || _a === void 0 ? void 0 : _a.trim(), format, timeZone);
+        const end = (0, utils_1.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 ((0, date_utils_1.isValid)(range.start) && (0, date_utils_1.isValid)(range.end)) {
+            handleUpdateRange(range);
+            return true;
+        }
+        return false;
+    }
+    const validationState = props.validationState ||
+        ((0, dates_1.isInvalid)(value === null || value === void 0 ? void 0 : value.start, props.minValue, props.maxValue) ? 'invalid' : undefined) ||
+        ((0, dates_1.isInvalid)(value === null || value === void 0 ? void 0 : value.end, props.minValue, props.maxValue) ? 'invalid' : undefined) ||
+        (value && !(0, utils_2.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 (0, DateField_1.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,
+    });
+}
+exports.useRangeDateFieldState = useRangeDateFieldState;
+function useSectionsState(sections, value, validSegments, delimiter) {
+    const [state, setState] = react_1.default.useState(() => {
+        return {
+            value,
+            sections,
+            validSegments,
+            delimiter,
+            editableSections: (0, utils_2.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: (0, utils_2.getRangeEditableSections)(sections, value, validSegments, delimiter),
+        });
+    }
+    return state;
+}

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

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

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

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

package/dist/cjs/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/cjs/components/RangeDateField/utils/createPlaceholderRangeValue.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createPlaceholderRangeValue = void 0;
+const dates_1 = require("../../utils/dates");
+function createPlaceholderRangeValue({ placeholderValue, timeZone }) {
+    const date = (0, dates_1.createPlaceholderValue)({ placeholderValue, timeZone });
+    return { start: date, end: date };
+}
+exports.createPlaceholderRangeValue = createPlaceholderRangeValue;

package/dist/cjs/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/cjs/components/RangeDateField/utils/getRangeEditableSections.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getRangeEditableSections = void 0;
+const utils_1 = require("../../DateField/utils");
+function getRangeEditableSections(sections, value, validSegments, delimiter) {
+    const start = (0, utils_1.getEditableSections)(sections, value.start, validSegments.start);
+    const end = (0, utils_1.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 = (0, utils_1.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 ((0, utils_1.isEditableSection)(section) && nextEditableSection === undefined) {
+            nextEditableSection = index + sectionsCount;
+        }
+    }
+    if (nextEditableSection !== undefined) {
+        delimiterSection.nextEditableSection = nextEditableSection;
+        start[previousEditableSection].nextEditableSection = nextEditableSection;
+    }
+    return [...start, delimiterSection, ...end];
+}
+exports.getRangeEditableSections = getRangeEditableSections;

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

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

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

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./getRangeEditableSections"), exports);
+tslib_1.__exportStar(require("./isValidRange"), exports);
+tslib_1.__exportStar(require("./createPlaceholderRangeValue"), exports);

package/dist/cjs/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/cjs/components/RangeDateField/utils/isValidRange.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isValidRange = void 0;
+const date_utils_1 = require("@gravity-ui/date-utils");
+function isValidRange({ start, end }) {
+    return (0, date_utils_1.isValid)(start) && (0, date_utils_1.isValid)(end) && (start.isSame(end) || start.isBefore(end));
+}
+exports.isValidRange = isValidRange;

package/dist/cjs/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/cjs/components/RelativeDateField/RelativeDateField.js

@@ -13,9 +13,10 @@ 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)();
+    const isMobile = (0, uikit_1.useMobile)();
     const anchorRef = react_1.default.useRef(null);
     const [isOpen, setOpen] = react_1.default.useState(false);
     const { focusWithinProps } = (0, uikit_1.useFocusWithin)({
@@ -30,6 +31,8 @@ function RelativeDateField(props) {
                         setOpen(true);
                     }
                     (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
-                }, onBlur: props.onBlur })), !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)("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] }) }))] })));
 }
 exports.RelativeDateField = RelativeDateField;

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

@@ -10,13 +10,6 @@ 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,
@@ -25,12 +18,13 @@ 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/cjs/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/cjs/components/RelativeDateField/hooks/useRelativeDateFieldState.js

@@ -4,9 +4,10 @@ exports.useRelativeDateFieldState = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const date_utils_1 = require("@gravity-ui/date-utils");
-const useControlledState_1 = require("../../hooks/useControlledState");
+const uikit_1 = require("@gravity-ui/uikit");
 function useRelativeDateFieldState(props) {
-    const [value, setValue] = (0, useControlledState_1.useControlledState)(props.value, props.defaultValue, props.onUpdate);
+    var _a;
+    const [value, setValue] = (0, uikit_1.useControlledState)(props.value, (_a = props.defaultValue) !== null && _a !== void 0 ? _a : null, props.onUpdate);
     const [text, setText] = react_1.default.useState(value !== null && value !== void 0 ? value : '');
     if (value && value !== text) {
         setText(value);
@@ -34,7 +35,7 @@ function useRelativeDateFieldState(props) {
         if (!value) {
             return null;
         }
-        return (_a = (0, date_utils_1.dateTimeParse)(value, { timeZone: props.timeZone })) !== null && _a !== void 0 ? _a : null;
+        return (_a = (0, date_utils_1.dateTimeParse)(value, { timeZone: props.timeZone, roundUp: props.roundUp })) !== null && _a !== void 0 ? _a : null;
     }, [value, props.timeZone]);
     const [lastCorrectDate, setLastCorrectDate] = react_1.default.useState(parsedDate);
     if (parsedDate && parsedDate !== lastCorrectDate) {
@@ -42,7 +43,7 @@ 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/cjs/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/cjs/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/cjs/components/RelativeDatePicker/RelativeDatePicker.js

@@ -18,13 +18,24 @@ function RelativeDatePicker(props) {
     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);
-    const [isMobile] = (0, uikit_1.useMobile)();
+    const isMobile = (0, uikit_1.useMobile)();
     return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: anchorRef, className: b(null, props.className) }, groupProps, { children: [isMobile && state.mode === 'absolute' && ((0, jsx_runtime_1.jsx)(MobileCalendar_1.MobileCalendar, { state: state.datePickerState, props: {
                     id: props.id,
                     disabled: props.disabled,
                     readOnly: props.readOnly,
                     placeholderValue: props.placeholderValue,
                     timeZone: props.timeZone,
-                } })), (0, jsx_runtime_1.jsx)(uikit_1.TextInput, Object.assign({}, fieldProps, { leftContent: (0, jsx_runtime_1.jsx)(uikit_1.Button, Object.assign({}, modeSwitcherProps, { children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Function }) })), rightContent: (0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [!isMobile && ((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 && state.mode === 'absolute' && ((0, jsx_runtime_1.jsx)(MobileCalendar_1.MobileCalendarIcon, { state: state.datePickerState, props: { size: props.size } }))] }) })), !isMobile && ((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 && ((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 && state.mode === 'absolute' && ((0, jsx_runtime_1.jsx)(MobileCalendar_1.MobileCalendarIcon, { state: state.datePickerState, props: { size: props.size } }))] }) })), (0, jsx_runtime_1.jsx)("input", { type: "text", hidden: true, name: props.name, value: getNativeValue(state.value), 
+                // Ignore React warning
+                onChange: () => { } }), !isMobile && ((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) {
+    if (!value) {
+        return '';
+    }
+    if (value.type === 'relative') {
+        return value.value;
+    }
+    return value.value.toISOString();
+}

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

@@ -5,24 +5,25 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
 const DateField_1 = require("../../DateField");
+const RelativeDateField_1 = require("../../RelativeDateField");
 const getButtonSizeForInput_1 = require("../../utils/getButtonSizeForInput");
 const mergeProps_1 = require("../../utils/mergeProps");
 const i18n_1 = require("../i18n");
 function useRelativeDatePickerProps(state, _a) {
     var { onFocus, onBlur } = _a, props = tslib_1.__rest(_a, ["onFocus", "onBlur"]);
-    const { mode, setMode, datePickerState, dateFieldState, relativeDateState } = state;
-    const [focusedDate, setFocusedDate] = react_1.default.useState(relativeDateState.lastCorrectDate);
+    const { mode, setMode, datePickerState, relativeDateState } = state;
+    const [focusedDate, setFocusedDate] = react_1.default.useState(mode === 'relative'
+        ? relativeDateState.lastCorrectDate
+        : datePickerState.dateFieldState.displayValue);
     const [prevCorrectDate, setPrevCorrectDate] = react_1.default.useState(relativeDateState.lastCorrectDate);
     if (prevCorrectDate !== relativeDateState.lastCorrectDate) {
         setPrevCorrectDate(relativeDateState.lastCorrectDate);
         setFocusedDate(relativeDateState.lastCorrectDate);
     }
-    const [prevDateValue, setPrevDateValue] = react_1.default.useState(datePickerState.dateValue);
-    if (datePickerState.dateValue !== prevDateValue) {
-        setPrevDateValue(datePickerState.dateValue);
-        if (datePickerState.dateValue) {
-            setFocusedDate(datePickerState.dateValue);
-        }
+    const [prevDateValue, setPrevDateValue] = react_1.default.useState(datePickerState.dateFieldState.displayValue);
+    if (!datePickerState.dateFieldState.displayValue.isSame(prevDateValue, 'day')) {
+        setPrevDateValue(datePickerState.dateFieldState.displayValue);
+        setFocusedDate(datePickerState.dateFieldState.displayValue);
     }
     const { focusWithinProps } = (0, uikit_1.useFocusWithin)({
         onFocusWithin: onFocus,
@@ -37,6 +38,18 @@ function useRelativeDatePickerProps(state, _a) {
     if (!state.isActive && isOpen) {
         setOpen(false);
     }
+    const [prevOpen, setPrevOpen] = react_1.default.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) {
@@ -44,27 +57,17 @@ function useRelativeDatePickerProps(state, _a) {
                 setOpen(true);
             }
         },
+        errorMessage: props.errorMessage,
+        errorPlacement: props.errorPlacement,
     };
-    const { inputProps } = (0, DateField_1.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 } = (0, DateField_1.useDateFieldProps)(datePickerState.dateFieldState, Object.assign(Object.assign({}, props), { value: undefined, defaultValue: undefined, onUpdate: undefined }));
+    const { inputProps: relativeDateProps } = (0, RelativeDateField_1.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_1.default.useRef(null);
     const handleRef = (0, uikit_1.useForkRef)(inputRef, mode === 'relative' ? relativeDateProps.controlRef : inputProps.controlRef);
@@ -90,14 +93,17 @@ function useRelativeDatePickerProps(state, _a) {
                     focusCalendar();
                 }
             } }),
-        fieldProps: (0, mergeProps_1.mergeProps)(commonInputProps, mode === 'relative' ? relativeDateProps : inputProps, mode === 'absolute' && dateFieldState.isEmpty && !state.isActive && props.placeholder
+        fieldProps: (0, mergeProps_1.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: (0, getButtonSizeForInput_1.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': (0, i18n_1.i18n)('Formula input mode'),
@@ -154,6 +160,8 @@ function useRelativeDatePickerProps(state, _a) {
             },
             focusedValue: focusedDate,
             onFocusUpdate: setFocusedDate,
+            minValue: props.minValue,
+            maxValue: props.maxValue,
         },
         timeInputProps: {
             value: datePickerState.timeValue,

package/dist/cjs/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;
     /**