@gravity-ui/date-components 1.6.0 → 2.1.0

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;
     /**

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

@@ -1,15 +1,15 @@
 import React from 'react';
-import { useDateFieldState } from '../../DateField';
+import { useControlledState } from '@gravity-ui/uikit';
 import { useDatePickerState } from '../../DatePicker';
 import { useRelativeDateFieldState } from '../../RelativeDateField';
-import { useControlledState } from '../../hooks/useControlledState';
 export function useRelativeDatePickerState(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 [mode, setMode] = React.useState((value === null || value === void 0 ? void 0 : value.type) === 'relative' ? 'relative' : 'absolute');
     const [prevValue, setPrevValue] = React.useState(value);
     if (value !== prevValue) {
         setPrevValue(value);
-        if (value) {
+        if (value && value.type !== mode) {
             setMode(value.type);
         }
     }
@@ -31,15 +31,8 @@ export function useRelativeDatePickerState(props) {
         timeZone: props.timeZone,
         disabled: props.disabled,
         readOnly: props.readOnly,
-    });
-    const dateFieldState = useDateFieldState({
-        value: valueDate,
-        onUpdate: datePickerState.setValue,
-        format: props.format,
-        placeholderValue: props.placeholderValue,
-        timeZone: props.timeZone,
-        disabled: props.disabled,
-        readOnly: props.readOnly,
+        minValue: props.minValue,
+        maxValue: props.maxValue,
     });
     const [valueRelative, setValueRelative] = React.useState((value === null || value === void 0 ? void 0 : value.type) === 'relative' ? value.value : null);
     if ((value === null || value === void 0 ? void 0 : value.type) === 'relative' && value.value !== valueRelative) {
@@ -56,6 +49,8 @@ export function useRelativeDatePickerState(props) {
         },
         disabled: props.disabled,
         readOnly: props.readOnly,
+        timeZone: datePickerState.timeZone,
+        roundUp: props.roundUp,
     });
     if (!value) {
         if (mode === 'absolute' && valueDate) {
@@ -65,10 +60,12 @@ export function useRelativeDatePickerState(props) {
             setValueRelative(null);
         }
     }
-    const selectedDate = mode === 'relative' ? relativeDateState.parsedDate : datePickerState.dateValue;
+    const selectedDate = mode === 'relative'
+        ? relativeDateState.parsedDate
+        : datePickerState.dateFieldState.displayValue;
     const [isActive, setActive] = React.useState(false);
     return {
-        value: value !== null && value !== void 0 ? value : null,
+        value,
         setValue(v) {
             if (props.readOnly || props.disabled) {
                 return;
@@ -93,7 +90,6 @@ export function useRelativeDatePickerState(props) {
             }
         },
         datePickerState,
-        dateFieldState,
         relativeDateState,
         selectedDate,
         isActive,

package/dist/esm/components/RelativeRangeDatePicker/RelativeRangeDatePicker.css

@@ -0,0 +1,56 @@
+.g-date-relative-range-date-picker {
+  position: relative;
+  display: inline-flex;
+}
+.g-date-relative-range-date-picker__input_mobile {
+  pointer-events: none;
+}
+.g-date-relative-range-date-picker__mobile-trigger {
+  --_--g-date-mobile-trigger-clear-width: 0px;
+  --_--g-date-mobile-trigger-errors-width: 0px;
+  --_--g-date-mobile-trigger-button-width: 24px;
+  position: absolute;
+  inset: 0;
+  inset-inline-end: calc(var(--g-spacing-2) + var(--_--g-date-mobile-trigger-button-width) + var(--_--g-date-mobile-trigger-clear-width) + var(--_--g-date-mobile-trigger-errors-width));
+  opacity: 0;
+}
+.g-date-relative-range-date-picker__mobile-trigger_size_s {
+  --_--g-date-mobile-trigger-button-width: 20px;
+}
+.g-date-relative-range-date-picker__mobile-trigger_size_l {
+  --_--g-date-mobile-trigger-button-width: 28px;
+}
+.g-date-relative-range-date-picker__mobile-trigger_size_xl {
+  --_--g-date-mobile-trigger-button-width: 36px;
+}
+.g-date-relative-range-date-picker__mobile-trigger_has-clear {
+  --_--g-date-mobile-trigger-clear-width: calc(
+      var(--_--g-date-mobile-trigger-button-width) + 2px
+  );
+}
+.g-date-relative-range-date-picker__mobile-trigger_has-errors {
+  --_--g-date-mobile-trigger-errors-width: calc(
+      var(--_--g-date-mobile-trigger-button-width) + 2px
+  );
+}
+.g-date-relative-range-date-picker__value-label {
+  display: flex;
+  width: 100%;
+}
+.g-date-relative-range-date-picker__value-label > div {
+  flex: 1 0 0;
+}
+.g-date-relative-range-date-picker__value-label-content {
+  display: flex;
+  flex-direction: column;
+}
+.g-date-relative-range-date-picker__value-label-tooltip {
+  --g-popover-max-width: "none";
+}
+.g-date-relative-range-date-picker__value-label-item, .g-date-relative-range-date-picker__value-label-to, .g-date-relative-range-date-picker__value-label-tz {
+  text-align: center;
+}
+.g-date-relative-range-date-picker__value-label-tz {
+  margin-block-start: 5px;
+  color: var(--g-color-text-hint);
+}

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

@@ -0,0 +1,27 @@
+import type { DateTime } from '@gravity-ui/date-utils';
+import type { Value } from '../RelativeDatePicker';
+import type { DomProps, InputBase, RangeValue, StyleProps, TextInputProps, Validation } from '../types';
+import type { PresetTab } from './components/Presets/utils';
+import type { RelativeRangeDatePickerStateOptions } from './hooks/useRelativeRangeDatePickerState';
+import './RelativeRangeDatePicker.css';
+export interface RelativeRangeDatePickerProps extends RelativeRangeDatePickerStateOptions, DomProps, InputBase, TextInputProps, Validation, StyleProps {
+    /** Format of the date when rendered in the input. [Available formats](https://day.js.org/docs/en/display/format) */
+    format?: string;
+    /** A placeholder date that controls the default values of each segment when the user first interacts with them. Defaults to today's date at midnight. */
+    placeholderValue?: DateTime;
+    /** Apply changes with button */
+    withApplyButton?: boolean;
+    /** Show time zone selector */
+    withZonesList?: boolean;
+    /** Show relative range presets */
+    withPresets?: boolean;
+    /** Custom preset tabs */
+    presetTabs?: PresetTab[];
+    /** Show selected relative values as absolute dates */
+    alwaysShowAsAbsolute?: boolean;
+    /** */
+    getRangeTitle?: (value: RangeValue<Value | null> | null, timeZone: string) => string;
+    /** Sets the CSS className for the popup element. */
+    popupClassName?: string;
+}
+export declare function RelativeRangeDatePicker(props: RelativeRangeDatePickerProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,85 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { dateTimeParse } from '@gravity-ui/date-utils';
+import { Calendar as CalendarIcon } from '@gravity-ui/icons';
+import { Button, Icon, Popover, TextInput, useFocusWithin, useMobile } from '@gravity-ui/uikit';
+import { block } from '../../utils/cn';
+import { getButtonSizeForInput } from '../utils/getButtonSizeForInput';
+import { PickerDialog } from './components/PickerDialog/PickerDialog';
+import { useRelativeRangeDatePickerState } from './hooks/useRelativeRangeDatePickerState';
+import { i18n } from './i18n';
+import { getDefaultTitle } from './utils';
+import './RelativeRangeDatePicker.css';
+const b = block('relative-range-date-picker');
+export function RelativeRangeDatePicker(props) {
+    var _a, _b;
+    const state = useRelativeRangeDatePickerState(props);
+    const isMobile = useMobile();
+    const anchorRef = React.useRef(null);
+    const inputRef = React.useRef(null);
+    const [isActive, setIsActive] = React.useState(false);
+    const [open, setOpen] = React.useState(false);
+    const { focusWithinProps } = useFocusWithin({
+        isDisabled: props.disabled || isMobile,
+        onFocusWithinChange: (isFocusedWithin) => {
+            if (!isFocusedWithin) {
+                setIsActive(false);
+            }
+        },
+    });
+    const { alwaysShowAsAbsolute, presetTabs, getRangeTitle } = props;
+    const format = (_a = props.format) !== null && _a !== void 0 ? _a : 'L';
+    const text = React.useMemo(() => typeof getRangeTitle === 'function'
+        ? getRangeTitle(state.value, state.timeZone)
+        : getDefaultTitle({
+            value: state.value,
+            timeZone: state.timeZone,
+            alwaysShowAsAbsolute: alwaysShowAsAbsolute,
+            format,
+            presets: presetTabs === null || presetTabs === void 0 ? void 0 : presetTabs.flatMap(({ presets }) => presets),
+        }), [alwaysShowAsAbsolute, format, getRangeTitle, presetTabs, state.timeZone, state.value]);
+    const validationState = props.validationState || (state.isInvalid ? 'invalid' : undefined);
+    const errorMessage = (_b = props.errorMessage) !== null && _b !== void 0 ? _b : state.errors.join('\n');
+    return (_jsxs("div", Object.assign({ ref: anchorRef }, focusWithinProps, { className: b(null, props.className), style: props.style, children: [_jsx(Popover, { className: b('value-label'), tooltipContentClassName: b('value-label-tooltip'), disabled: isMobile || open || !state.value, delayOpening: 500, placement: ['right', 'right-start', 'right-end', 'auto'], hasArrow: false, content: _jsx(ValueLabel, { value: state.value, format: format, timeZone: state.timeZone }), children: _jsx(TextInput, { controlRef: inputRef, value: text, placeholder: props.placeholder, onUpdate: (v) => {
+                        if (!props.readOnly && !v) {
+                            state.setValue(null, 'default');
+                        }
+                    }, controlProps: {
+                        'aria-haspopup': 'dialog',
+                        'aria-expanded': open,
+                        disabled: isMobile,
+                        className: b('input', { mobile: isMobile }),
+                    }, onKeyDown: (e) => {
+                        if (props.disabled) {
+                            return;
+                        }
+                        if (e.altKey && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
+                            e.preventDefault();
+                            setOpen(true);
+                        }
+                    }, onFocus: () => {
+                        if (!isActive) {
+                            setIsActive(true);
+                            setOpen(true);
+                        }
+                    }, validationState: validationState, errorMessage: errorMessage, errorPlacement: props.errorPlacement, pin: props.pin, size: props.size, label: props.label, hasClear: props.hasClear, disabled: props.disabled, endContent: _jsx(Button, { view: "flat-secondary", size: getButtonSizeForInput(props.size), disabled: props.disabled, extraProps: {
+                            'aria-haspopup': 'dialog',
+                            'aria-expanded': open,
+                        }, onClick: () => {
+                            setIsActive(true);
+                            setOpen(!open);
+                        }, children: _jsx(Icon, { data: CalendarIcon }) }) }) }), isMobile ? (_jsx("button", { className: b('mobile-trigger', {
+                    'has-clear': Boolean(props.hasClear && state.value),
+                    'has-errors': state.isInvalid && props.errorPlacement === 'inside',
+                    size: props.size,
+                }), onClick: () => {
+                    setIsActive(true);
+                    setOpen(true);
+                } })) : null, _jsx(PickerDialog, { state: state, props: props, open: open, onClose: () => {
+                    setOpen(false);
+                }, anchorRef: anchorRef, isMobile: isMobile, className: props.className })] })));
+}
+function ValueLabel({ value, format, timeZone }) {
+    var _a, _b, _c, _d;
+    return (_jsxs("div", { className: b('value-label-content'), children: [_jsx("span", { className: b('value-label-item'), children: (_b = dateTimeParse((_a = value === null || value === void 0 ? void 0 : value.start) === null || _a === void 0 ? void 0 : _a.value, { timeZone })) === null || _b === void 0 ? void 0 : _b.format(format) }), _jsx("span", { className: b('value-label-to'), children: i18n('to') }), _jsx("span", { className: b('value-label-item'), children: (_d = dateTimeParse((_c = value === null || value === void 0 ? void 0 : value.end) === null || _c === void 0 ? void 0 : _c.value, { timeZone, roundUp: true })) === null || _d === void 0 ? void 0 : _d.format(format) }), timeZone && _jsx("span", { className: b('value-label-tz'), children: timeZone })] }));
+}

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

@@ -0,0 +1,32 @@
+.g-date-relative-range-date-picker-dialog__content {
+  --_--popup-content-padding: var(--g-spacing-2);
+  padding: var(--_--popup-content-padding);
+}
+.g-date-relative-range-date-picker-dialog__content_mobile {
+  --_--popup-content-padding: var(--g-spacing-5);
+}
+.g-date-relative-range-date-picker-dialog__content:not(.g-date-relative-range-date-picker-dialog__content_mobile) {
+  width: 310px;
+}
+.g-date-relative-range-date-picker-dialog__content_size_xl:not(.g-date-relative-range-date-picker-dialog__content_mobile) {
+  width: 380px;
+}
+.g-date-relative-range-date-picker-dialog__pickers {
+  display: flex;
+  flex-direction: column;
+  gap: var(--g-spacing-2);
+}
+.g-date-relative-range-date-picker-dialog__pickers .g-text-input__label {
+  width: 40px;
+}
+.g-date-relative-range-date-picker-dialog__content_size_xl .g-date-relative-range-date-picker-dialog__pickers .g-text-input__label {
+  width: 50px;
+}
+.g-date-relative-range-date-picker-dialog__apply {
+  margin-block-start: var(--g-spacing-2);
+}
+.g-date-relative-range-date-picker-dialog__zone {
+  margin-block: var(--g-spacing-2) calc(-1 * var(--_--popup-content-padding));
+  margin-inline: calc(-1 * var(--_--popup-content-padding));
+  border-block-start: 1px solid var(--g-color-line-generic);
+}

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import type { RelativeRangeDatePickerProps } from '../../RelativeRangeDatePicker';
+import type { RelativeRangeDatePickerState } from '../../hooks/useRelativeRangeDatePickerState';
+import './PickerDialog.css';
+export interface PickerDialogProps {
+    className?: string;
+    state: RelativeRangeDatePickerState;
+    props: RelativeRangeDatePickerProps;
+    open: boolean;
+    isMobile?: boolean;
+    anchorRef?: React.RefObject<HTMLElement>;
+    onClose: () => void;
+}
+export declare function PickerDialog({ props, state, open, onClose, isMobile, anchorRef, className, }: PickerDialogProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { dateTime } from '@gravity-ui/date-utils';
+import { Button, Popup, Sheet } from '@gravity-ui/uikit';
+import { block } from '../../../../utils/cn';
+import { RelativeDatePicker } from '../../../RelativeDatePicker';
+import { Presets } from '../Presets/Presets';
+import { Zones } from '../Zones/Zones';
+import { i18n } from './i18n';
+import { useRelativeRangeDatePickerDialogState } from './useRelativeRangeDatePickerDialogState';
+import './PickerDialog.css';
+const b = block('relative-range-date-picker-dialog');
+export function PickerDialog({ props, state, open, onClose, isMobile, anchorRef, className, }) {
+    if (isMobile) {
+        return (_jsx(Sheet, { visible: open, onClose: onClose, contentClassName: b('content', { mobile: true, size: 'xl' }, className), children: _jsx(DialogContent, Object.assign({}, props, { size: "xl", state: state, onApply: onClose })) }));
+    }
+    return (_jsx(Popup, { open: open, onClose: onClose, role: "dialog", anchorRef: anchorRef, contentClassName: b('content', { size: props.size }, className), focusTrap: true, restoreFocus: true, children: _jsx(DialogContent, Object.assign({}, props, { state: state, onApply: onClose })) }));
+}
+function DialogContent(props) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const state = useRelativeRangeDatePickerDialogState(props.state, props);
+    const placeholderValue = ((_a = props.placeholderValue) === null || _a === void 0 ? void 0 : _a.timeZone(props.state.timeZone)) ||
+        dateTime({ timeZone: props.state.timeZone });
+    const fieldProps = {
+        timeZone: props.state.timeZone,
+        format: props.format,
+        minValue: props.minValue,
+        maxValue: props.maxValue,
+        hasClear: props.allowNullableValues,
+        readOnly: props.readOnly,
+        size: props.size,
+        errorPlacement: 'inside',
+    };
+    return (_jsxs("div", { children: [_jsxs("div", { className: b('pickers'), children: [_jsx(RelativeDatePicker, Object.assign({}, fieldProps, { validationState: ((_b = state.startValidation) === null || _b === void 0 ? void 0 : _b.isInvalid) ? 'invalid' : undefined, errorMessage: ((_d = (_c = state.startValidation) === null || _c === void 0 ? void 0 : _c.errors) === null || _d === void 0 ? void 0 : _d.join('\n')) || i18n('Value is incorrect.'), placeholderValue: placeholderValue.startOf('day'), label: i18n('From'), value: state.start, onUpdate: state.setStart })), _jsx(RelativeDatePicker, Object.assign({}, fieldProps, { validationState: ((_e = state.endValidation) === null || _e === void 0 ? void 0 : _e.isInvalid) ? 'invalid' : undefined, errorMessage: ((_g = (_f = state.endValidation) === null || _f === void 0 ? void 0 : _f.errors) === null || _g === void 0 ? void 0 : _g.join('\n')) || i18n('Value is incorrect.'), placeholderValue: placeholderValue.endOf('day'), label: i18n('To'), value: state.end, onUpdate: state.setEnd, roundUp: true }))] }), props.withApplyButton && !props.readOnly ? (_jsx(Button, { disabled: state.isInvalid, size: props.size, onClick: () => {
+                    state.applyValue();
+                    props.onApply();
+                }, className: b('apply'), width: "max", children: i18n('Apply') })) : null, props.withPresets && !props.readOnly ? (_jsx(Presets, { size: props.size, presetTabs: props.presetTabs, onChoosePreset: (start, end) => {
+                    state.setRange({ type: 'relative', value: start }, { type: 'relative', value: end });
+                }, minValue: props.minValue })) : null, props.withZonesList ? (_jsx("div", { className: b('zone'), children: _jsx(Zones, { value: state.timeZone, onUpdate: state.setTimeZone, disabled: props.readOnly, size: props.size }) })) : null] }));
+}

package/dist/esm/components/RelativeRangeDatePicker/components/PickerDialog/i18n/en.json

@@ -0,0 +1,8 @@
+{
+  "Value is incorrect.": "Value is incorrect.",
+  "Value is required.": "Value is required.",
+  "\"From\" can't be after \"To\".": "\"From\" can't be after \"To\".",
+  "From": "From",
+  "To": "To",
+  "Apply": "Apply"
+}

package/dist/esm/components/RelativeRangeDatePicker/components/PickerDialog/i18n/index.d.ts

@@ -0,0 +1 @@
+export declare const i18n: (key: "Value is required." | "\"From\" can't be after \"To\"." | "From" | "To" | "Value is incorrect." | "Apply", params?: import("@gravity-ui/i18n").Params | undefined) => string;

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

@@ -0,0 +1,5 @@
+import { addComponentKeysets } from '@gravity-ui/uikit/i18n';
+import { NAMESPACE } from '../../../../../utils/cn';
+import en from './en.json';
+import ru from './ru.json';
+export const i18n = addComponentKeysets({ en, ru }, `${NAMESPACE}relative-range-date-picker-dialog`);

package/dist/esm/components/RelativeRangeDatePicker/components/PickerDialog/i18n/ru.json

@@ -0,0 +1,8 @@
+{
+  "Value is incorrect.": "Значение некорректно.",
+  "Value is required.": "Value is required.",
+  "\"From\" can't be after \"To\".": "Значение «От» не может быть позже чем «До».",
+  "From": "От",
+  "To": "Дo",
+  "Apply": "Применить"
+}

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

@@ -0,0 +1,16 @@
+import type { Value } from '../../../RelativeDatePicker';
+import type { RelativeRangeDatePickerProps } from '../../RelativeRangeDatePicker';
+import type { RelativeRangeDatePickerState } from '../../hooks/useRelativeRangeDatePickerState';
+export declare function useRelativeRangeDatePickerDialogState(state: RelativeRangeDatePickerState, props: RelativeRangeDatePickerProps): {
+    start: Value | null;
+    end: Value | null;
+    timeZone: string;
+    setStart: (newValue: Value | null) => void;
+    setEnd: (newValue: Value | null) => void;
+    setRange: (newStart: Value, newEnd: Value) => void;
+    setTimeZone: (newTimeZone: string) => void;
+    applyValue: () => void;
+    isInvalid: boolean;
+    startValidation: import("../../../utils/validation/datePicker").ValidationResult | undefined;
+    endValidation: import("../../../utils/validation/datePicker").ValidationResult | undefined;
+};

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

@@ -0,0 +1,99 @@
+import React from 'react';
+import { dateTimeParse } from '@gravity-ui/date-utils';
+import { getValidationResult } from '../../../utils/validation/datePicker';
+import { i18n } from './i18n';
+export function useRelativeRangeDatePickerDialogState(state, props) {
+    var _a, _b, _c, _d;
+    const { withApplyButton, allowNullableValues } = props;
+    const [start, setStart] = React.useState((_b = (_a = state.value) === null || _a === void 0 ? void 0 : _a.start) !== null && _b !== void 0 ? _b : null);
+    const [end, setEnd] = React.useState((_d = (_c = state.value) === null || _c === void 0 ? void 0 : _c.end) !== null && _d !== void 0 ? _d : null);
+    const [innerTimeZone, setTimeZone] = React.useState(state.timeZone);
+    const timeZone = withApplyButton ? innerTimeZone : state.timeZone;
+    function setStartValue(newValue) {
+        setStart(newValue);
+        if (!withApplyButton) {
+            state.setValue(getRangeValue(newValue, end, Object.assign(Object.assign({}, props), { timeZone })), timeZone);
+        }
+    }
+    function setEndValue(newValue) {
+        setEnd(newValue);
+        if (!withApplyButton) {
+            state.setValue(getRangeValue(start, newValue, Object.assign(Object.assign({}, props), { timeZone })), timeZone);
+        }
+    }
+    function setTimeZoneValue(newTimeZone) {
+        setTimeZone(newTimeZone);
+        if (!withApplyButton) {
+            state.setValue(getRangeValue(start, end, Object.assign(Object.assign({}, props), { timeZone: newTimeZone })), newTimeZone);
+        }
+    }
+    function setRange(newStart, newEnd) {
+        setStart(newStart);
+        setEnd(newEnd);
+        if (!withApplyButton) {
+            state.setValue(getRangeValue(newStart, newEnd, Object.assign(Object.assign({}, props), { timeZone })), timeZone);
+        }
+    }
+    function applyValue() {
+        state.setValue(getRangeValue(start, end, Object.assign(Object.assign({}, props), { timeZone })), timeZone);
+    }
+    const validation = React.useMemo(() => getRangeValidationResult(start, end, allowNullableValues, props.minValue, props.maxValue, props.isDateUnavailable, timeZone), [
+        allowNullableValues,
+        end,
+        props.isDateUnavailable,
+        props.maxValue,
+        props.minValue,
+        start,
+        timeZone,
+    ]);
+    return {
+        start,
+        end,
+        timeZone,
+        setStart: setStartValue,
+        setEnd: setEndValue,
+        setRange,
+        setTimeZone: setTimeZoneValue,
+        applyValue,
+        isInvalid: validation.isInvalid,
+        startValidation: validation.startValidationResult,
+        endValidation: validation.endValidationResult,
+    };
+}
+function getRangeValue(start, end, options = {}) {
+    var _a;
+    if (!start && !end) {
+        return null;
+    }
+    const { isInvalid } = getRangeValidationResult(start, end, options.allowNullableValues, options.minValue, options.maxValue, options.isDateUnavailable, (_a = options.timeZone) !== null && _a !== void 0 ? _a : 'default');
+    if (isInvalid) {
+        return null;
+    }
+    return { start, end };
+}
+function getRangeValidationResult(start, end, allowNullableValues, minValue, maxValue, isDateUnavailable, timeZone) {
+    if (!start && !end) {
+        return { isInvalid: false };
+    }
+    const startDate = start ? dateTimeParse(start.value, { timeZone }) : null;
+    const endDate = end ? dateTimeParse(end.value, { timeZone, roundUp: true }) : null;
+    const startValidationResult = getValidationResult(startDate, minValue, maxValue, isDateUnavailable, timeZone);
+    if (!startDate && !allowNullableValues) {
+        startValidationResult.isInvalid = true;
+        startValidationResult.errors.push(i18n('Value is required.'));
+    }
+    const endValidationResult = getValidationResult(endDate, minValue, maxValue, isDateUnavailable, timeZone);
+    if (!endDate && !allowNullableValues) {
+        endValidationResult.isInvalid = true;
+        endValidationResult.errors.push(i18n('Value is required.'));
+    }
+    if (startDate && endDate && endDate.isBefore(startDate)) {
+        startValidationResult.isInvalid = true;
+        startValidationResult.errors.push(i18n(`"From" can't be after "To".`));
+    }
+    return {
+        isInvalid: startValidationResult.isInvalid || endValidationResult.isInvalid,
+        startValidationResult,
+        endValidationResult,
+    };
+}

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

@@ -0,0 +1,26 @@
+.g-date-relative-range-date-picker-presets__tabs {
+  --g-tabs-border-width: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--g-spacing-2);
+  box-shadow: inset 0 -1px var(--g-color-line-generic);
+}
+.g-date-relative-range-date-picker-presets__list-container {
+  outline: none;
+}
+.g-date-relative-range-date-picker-presets__doc {
+  margin-inline-start: auto;
+}
+.g-date-relative-range-date-picker-presets__content {
+  overflow: auto;
+  height: 128px;
+}
+.g-date-relative-range-date-picker-presets_size_l .g-date-relative-range-date-picker-presets__content {
+  height: 144px;
+}
+.g-date-relative-range-date-picker-presets_size_xl .g-date-relative-range-date-picker-presets__content {
+  height: 162px;
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
+  font-weight: var(--g-text-body-font-weight);
+}