@gravity-ui/date-components 2.5.0 → 2.7.0

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

@@ -1,9 +1,12 @@
 import React from 'react';
 import type { DateTime } from '@gravity-ui/date-utils';
 import type { CalendarProps } from '../Calendar';
-import type { AccessibilityProps, DateFieldBase, DomProps, FocusableProps, InputDOMProps, KeyboardEvents, StyleProps, TextInputProps } from '../types';
+import type { AccessibilityProps, DomProps, FocusableProps, InputDOMProps, KeyboardEvents, StyleProps, TextInputProps } from '../types';
+import type { DatePickerStateOptions } from './hooks/datePickerStateFactory';
 import './DatePicker.css';
-export interface DatePickerProps<T = DateTime> extends DateFieldBase<T>, TextInputProps, FocusableProps, KeyboardEvents, DomProps, InputDOMProps, StyleProps, AccessibilityProps {
+export interface DatePickerProps<T = DateTime> extends DatePickerStateOptions<T>, TextInputProps, FocusableProps, KeyboardEvents, DomProps, InputDOMProps, StyleProps, AccessibilityProps {
     children?: (props: CalendarProps<T>) => React.ReactNode;
+    disablePortal?: boolean;
+    disableFocusTrap?: boolean;
 }
 export declare function DatePicker({ className, ...props }: DatePickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/DatePicker/hooks/datePickerStateFactory.d.ts

@@ -1,6 +1,7 @@
 import type { DateTime } from '@gravity-ui/date-utils';
 import type { DateFieldState } from '../../DateField';
-import type { DateFieldBase } from '../../types';
+import type { DateFieldBase, PopupTriggerProps } from '../../types';
+type OpenChangeReason = 'EscapeKeyDown' | 'FocusOut' | 'ClickOutside' | 'ValueSelected' | 'TriggerButtonClick' | 'ShortcutKeyDown';
 export interface DatePickerState<T = DateTime> {
     /** The currently selected date. */
     value: T | null;
@@ -36,7 +37,7 @@ export interface DatePickerState<T = DateTime> {
     /** Whether the calendar popover is currently open. */
     isOpen: boolean;
     /** Sets whether the calendar popover is open. */
-    setOpen: (isOpen: boolean) => void;
+    setOpen: (isOpen: boolean, reason: OpenChangeReason) => void;
     dateFieldState: DateFieldState<T>;
 }
 export interface DatePickerStateFactoryOptions<T, O extends DateFieldBase<T>> {
@@ -46,4 +47,7 @@ export interface DatePickerStateFactoryOptions<T, O extends DateFieldBase<T>> {
     getDateTime: (date: T | null | undefined) => DateTime | undefined;
     useDateFieldState: (props: O) => DateFieldState<T>;
 }
-export declare function datePickerStateFactory<T, O extends DateFieldBase<T>>({ getPlaceholderTime, mergeDateTime, setTimezone, getDateTime, useDateFieldState, }: DatePickerStateFactoryOptions<T, O>): (props: O) => DatePickerState<T>;
+export interface DatePickerStateOptions<T> extends DateFieldBase<T>, PopupTriggerProps<[OpenChangeReason]> {
+}
+export declare function datePickerStateFactory<T, O extends DatePickerStateOptions<T>>({ getPlaceholderTime, mergeDateTime, setTimezone, getDateTime, useDateFieldState, }: DatePickerStateFactoryOptions<T, O>): (props: O) => DatePickerState<T>;
+export {};

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

@@ -7,10 +7,11 @@ const uikit_1 = require("@gravity-ui/uikit");
 const useDefaultTimeZone_1 = require("../../utils/useDefaultTimeZone");
 function datePickerStateFactory({ getPlaceholderTime, mergeDateTime, setTimezone, getDateTime, useDateFieldState, }) {
     return function useDatePickerState(props) {
-        var _a;
+        var _a, _b;
         const { disabled, readOnly } = props;
-        const [isOpen, setOpen] = react_1.default.useState(false);
-        const [value, setValue] = (0, uikit_1.useControlledState)(props.value, (_a = props.defaultValue) !== null && _a !== void 0 ? _a : null, props.onUpdate);
+        const [isOpen, _setOpen] = (0, uikit_1.useControlledState)(props.open, (_a = props.defaultOpen) !== null && _a !== void 0 ? _a : false, props.onOpenChange);
+        const setOpen = _setOpen;
+        const [value, setValue] = (0, uikit_1.useControlledState)(props.value, (_b = props.defaultValue) !== null && _b !== void 0 ? _b : null, props.onUpdate);
         const [selectedDateInner, setSelectedDate] = react_1.default.useState(null);
         const [selectedTimeInner, setSelectedTime] = react_1.default.useState(null);
         const inputTimeZone = (0, useDefaultTimeZone_1.useDefaultTimeZone)(getDateTime(props.value) || getDateTime(props.defaultValue) || props.placeholderValue);
@@ -38,9 +39,25 @@ function datePickerStateFactory({ getPlaceholderTime, mergeDateTime, setTimezone
             disabled,
             readOnly, validationState: props.validationState, minValue: props.minValue, maxValue: props.maxValue, isDateUnavailable: props.isDateUnavailable, format, placeholderValue: props.placeholderValue, timeZone }));
         const timeFormat = react_1.default.useMemo(() => {
-            const hasSeconds = dateFieldState.sections.some((s) => s.type === 'second');
-            return hasSeconds ? 'LTS' : 'LT';
-        }, [dateFieldState.sections]);
+            if (!dateFieldState.hasTime) {
+                return undefined;
+            }
+            const timeFormatParts = [];
+            const hours = dateFieldState.sections.find((s) => s.type === 'hour');
+            if (hours) {
+                timeFormatParts.push(hours.format);
+            }
+            const minutes = dateFieldState.sections.find((s) => s.type === 'minute');
+            if (minutes) {
+                timeFormatParts.push(minutes.format);
+            }
+            const seconds = dateFieldState.sections.find((s) => s.type === 'second');
+            if (seconds) {
+                timeFormatParts.push(seconds.format);
+            }
+            const dayPeriod = dateFieldState.sections.find((s) => s.type === 'dayPeriod');
+            return timeFormatParts.join(':') + (dayPeriod ? ` ${dayPeriod.format}` : '');
+        }, [dateFieldState.hasTime, dateFieldState.sections]);
         if (value) {
             selectedDate = setTimezone(value, timeZone);
             if (dateFieldState.hasTime) {
@@ -65,7 +82,7 @@ function datePickerStateFactory({ getPlaceholderTime, mergeDateTime, setTimezone
                 commitValue(newValue, newValue);
             }
             if (shouldClose) {
-                setOpen(false);
+                setOpen(false, 'ValueSelected');
             }
         };
         const selectTime = (newValue) => {
@@ -108,11 +125,11 @@ function datePickerStateFactory({ getPlaceholderTime, mergeDateTime, setTimezone
             timeFormat,
             timeZone,
             isOpen,
-            setOpen(newIsOpen) {
+            setOpen(newIsOpen, reason) {
                 if (!newIsOpen && !value && selectedDate && dateFieldState.hasTime) {
                     commitValue(selectedDate, selectedTime || getPlaceholderTime(props.placeholderValue, props.timeZone));
                 }
-                setOpen(newIsOpen);
+                setOpen(newIsOpen, reason);
             },
             dateFieldState,
         };

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useDatePickerProps = 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 uikit_1 = require("@gravity-ui/uikit");
 const DateField_1 = require("../../DateField");
 const getButtonSizeForInput_1 = require("../../utils/getButtonSizeForInput");
@@ -12,13 +13,31 @@ const utils_1 = require("../utils");
 function useDatePickerProps(state, _a) {
     var { onFocus, onBlur } = _a, props = tslib_1.__rest(_a, ["onFocus", "onBlur"]);
     const [isActive, setActive] = react_1.default.useState(false);
+    const [focusedDate, setFocusedDate] = react_1.default.useState((0, date_utils_1.isDateTime)(state.dateFieldState.displayValue)
+        ? state.dateFieldState.displayValue
+        : state.dateFieldState.displayValue.start);
+    const [prevDateValue, setPrevDateValue] = react_1.default.useState(state.dateFieldState.displayValue);
+    if ((0, date_utils_1.isDateTime)(state.dateFieldState.displayValue)) {
+        if (!state.dateFieldState.displayValue.isSame(prevDateValue, 'day')) {
+            setPrevDateValue(state.dateFieldState.displayValue);
+            setFocusedDate(state.dateFieldState.displayValue);
+        }
+    }
+    else if (!state.dateFieldState.displayValue.start.isSame(prevDateValue.start, 'day')) {
+        setPrevDateValue(state.dateFieldState.displayValue);
+        setFocusedDate(state.dateFieldState.displayValue.start);
+    }
+    else if (!state.dateFieldState.displayValue.end.isSame(prevDateValue.end, 'day')) {
+        setPrevDateValue(state.dateFieldState.displayValue);
+        setFocusedDate(state.dateFieldState.displayValue.end);
+    }
     const { focusWithinProps } = (0, uikit_1.useFocusWithin)({
         onFocusWithin: onFocus,
         onBlurWithin: onBlur,
         onFocusWithinChange(isFocusWithin) {
             setActive(isFocusWithin);
             if (!isFocusWithin) {
-                state.setOpen(false);
+                state.setOpen(false, 'FocusOut');
             }
         },
     });
@@ -40,7 +59,7 @@ function useDatePickerProps(state, _a) {
                 if (!onlyTime && e.altKey && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
                     e.preventDefault();
                     e.stopPropagation();
-                    state.setOpen(true);
+                    state.setOpen(true, 'ShortcutKeyDown');
                 }
             } }),
         fieldProps: (0, mergeProps_1.mergeProps)(inputProps, state.dateFieldState.isEmpty && !isActive && props.placeholder
@@ -58,25 +77,31 @@ function useDatePickerProps(state, _a) {
             view: 'flat-secondary',
             onClick: () => {
                 setActive(true);
-                state.setOpen(!state.isOpen);
+                state.setOpen(!state.isOpen, 'TriggerButtonClick');
             },
         },
         popupProps: {
             open: state.isOpen,
             onEscapeKeyDown: () => {
-                state.setOpen(false);
+                state.setOpen(false, 'EscapeKeyDown');
                 focusInput();
             },
             onOutsideClick: (e) => {
                 var _a;
                 if (e.target !== calendarButtonRef.current) {
-                    state.setOpen(false);
+                    state.setOpen(false, 'ClickOutside');
                 }
                 if (e.target && ((_a = groupRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
                     focusInput();
                 }
             },
-            focusTrap: true,
+            onTransitionExited: () => {
+                setFocusedDate((0, date_utils_1.isDateTime)(state.dateFieldState.displayValue)
+                    ? state.dateFieldState.displayValue
+                    : state.dateFieldState.displayValue.start);
+            },
+            focusTrap: !props.disableFocusTrap,
+            disablePortal: props.disablePortal,
         },
         calendarProps: {
             ref: calendarRef,
@@ -95,6 +120,8 @@ function useDatePickerProps(state, _a) {
             maxValue: props.maxValue,
             isDateUnavailable: props.isDateUnavailable,
             timeZone: state.timeZone,
+            focusedValue: focusedDate,
+            onFocusUpdate: setFocusedDate,
         },
         timeInputProps: {
             value: state.timeValue,

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

@@ -38,18 +38,6 @@ 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) {
@@ -59,6 +47,17 @@ function useRelativeDatePickerProps(state, _a) {
         },
         errorMessage: props.errorMessage,
         errorPlacement: props.errorPlacement,
+        controlProps: {
+            onClick: () => {
+                if (state.disabled) {
+                    return;
+                }
+                if (!isOpen) {
+                    state.setActive(true);
+                    setOpen(true);
+                }
+            },
+        },
     };
     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 }));
@@ -145,6 +144,11 @@ function useRelativeDatePickerProps(state, _a) {
                 setOpen(false);
                 focusInput();
             },
+            onTransitionExited: () => {
+                setFocusedDate(mode === 'relative'
+                    ? relativeDateState.lastCorrectDate
+                    : datePickerState.dateFieldState.displayValue);
+            },
         },
         calendarProps: {
             ref: calendarRef,

package/dist/cjs/components/RelativeRangeDatePicker/RelativeRangeDatePicker.css

@@ -2,6 +2,9 @@
   position: relative;
   display: inline-flex;
 }
+.g-date-relative-range-date-picker__input {
+  caret-color: transparent;
+}
 .g-date-relative-range-date-picker__input_mobile {
   pointer-events: none;
 }

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

@@ -33,10 +33,7 @@ function RelativeRangeDatePicker(props) {
         },
         onBlurWithin: (e) => {
             var _a;
-            // when the popup is open and an user clicks outside, focus will be returned to the input
-            const seemsIsClickOutsideInEmptySpace = open &&
-                (document.activeElement === null || document.activeElement === document.body);
-            if (!seemsIsClickOutsideInEmptySpace) {
+            if (!open) {
                 setIsActive(false);
                 (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
             }
@@ -55,7 +52,7 @@ function RelativeRangeDatePicker(props) {
         }), [alwaysShowAsAbsolute, format, getRangeTitle, presetTabs, state.timeZone, state.value]);
     const validationState = props.validationState || (state.isInvalid ? 'invalid' : undefined);
     const errorMessage = (_a = props.errorMessage) !== null && _a !== void 0 ? _a : state.errors.join('\n');
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: anchorRef }, focusWithinProps, { className: b(null, props.className), style: props.style, children: [(0, jsx_runtime_1.jsx)(uikit_1.TextInput, { autoFocus: props.autoFocus, controlRef: inputRef, value: text, placeholder: props.placeholder, onUpdate: (v) => {
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: anchorRef }, focusWithinProps, { className: b(null, props.className), style: props.style, children: [(0, jsx_runtime_1.jsx)(uikit_1.TextInput, { id: props.id, autoFocus: props.autoFocus, controlRef: inputRef, value: text, placeholder: props.placeholder, onUpdate: (v) => {
                     if (!props.readOnly && !v) {
                         state.setValue(null, 'default');
                     }
@@ -64,6 +61,15 @@ function RelativeRangeDatePicker(props) {
                     'aria-expanded': open,
                     disabled: isMobile,
                     className: b('input', { mobile: isMobile }),
+                    onClick: () => {
+                        if (props.disabled) {
+                            return;
+                        }
+                        if (!open) {
+                            setIsActive(true);
+                            setOpen(true);
+                        }
+                    },
                 }, onKeyDown: (e) => {
                     if (props.disabled) {
                         return;

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

@@ -1,5 +1,6 @@
 .g-date-relative-range-date-picker-dialog__content {
   --_--popup-content-padding: var(--g-spacing-2);
+  --_--g-date-picker-presets-padding: var(--_--popup-content-padding);
   padding: var(--_--popup-content-padding);
 }
 .g-date-relative-range-date-picker-dialog__content_mobile {
@@ -29,4 +30,7 @@
   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);
+}
+.g-date-relative-range-date-picker-dialog__presets {
+  margin-inline: calc(-1 * var(--_--popup-content-padding));
 }

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

@@ -40,5 +40,8 @@ function DialogContent(props) {
                     props.onApply();
                 }, className: b('apply'), width: "max", children: (0, i18n_1.i18n)('Apply') })) : null, props.withPresets && !props.readOnly ? ((0, jsx_runtime_1.jsx)(Presets_1.Presets, { size: props.size, presetTabs: props.presetTabs, onChoosePreset: (start, end) => {
                     state.setRange({ type: 'relative', value: start }, { type: 'relative', value: end });
-                }, minValue: props.minValue, docs: props.docs })) : null, props.withZonesList ? ((0, jsx_runtime_1.jsx)("div", { className: b('zone'), children: (0, jsx_runtime_1.jsx)(Zones_1.Zones, { value: state.timeZone, onUpdate: state.setTimeZone, disabled: props.readOnly, size: props.size }) })) : null] }));
+                    if (!props.withApplyButton) {
+                        props.onApply();
+                    }
+                }, minValue: props.minValue, docs: props.docs, className: b('presets') })) : null, props.withZonesList ? ((0, jsx_runtime_1.jsx)("div", { className: b('zone'), children: (0, jsx_runtime_1.jsx)(Zones_1.Zones, { value: state.timeZone, onUpdate: state.setTimeZone, disabled: props.readOnly, size: props.size }) })) : null] }));
 }

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

@@ -1,8 +1,12 @@
+.g-date-relative-range-date-picker-presets {
+  --g-list-item-padding: 0 var(--_--g-date-picker-presets-padding, 0);
+}
 .g-date-relative-range-date-picker-presets__tabs {
   --g-tabs-border-width: 0;
   display: flex;
   align-items: center;
   gap: var(--g-spacing-2);
+  padding-inline: var(--_--g-date-picker-presets-padding, 0);
   box-shadow: inset 0 -1px var(--g-color-line-generic);
 }
 .g-date-relative-range-date-picker-presets__list-container {

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

@@ -1,17 +1,18 @@
 import type { DateTime } from '@gravity-ui/date-utils';
 import type { Value } from '../../RelativeDatePicker';
 import type { RangeValue } from '../../types';
+export type RelativeRangeDatePickerValue = RangeValue<Value | null>;
 export interface RelativeRangeDatePickerState {
-    value: RangeValue<Value | null> | null;
+    value: RelativeRangeDatePickerValue | null;
     timeZone: string;
-    setValue: (value: RangeValue<Value | null> | null, timeZone: string) => void;
+    setValue: (value: RelativeRangeDatePickerValue | null, timeZone: string) => void;
     isInvalid: boolean;
     errors: string[];
 }
 export interface RelativeRangeDatePickerStateOptions {
-    value?: RangeValue<Value | null> | null;
-    defaultValue?: RangeValue<Value | null>;
-    onUpdate?: (value: RangeValue<Value | null> | null, timeZone: string) => void;
+    value?: RelativeRangeDatePickerValue | null;
+    defaultValue?: RelativeRangeDatePickerValue;
+    onUpdate?: (value: RelativeRangeDatePickerValue | null, timeZone: string) => void;
     timeZone?: string;
     defaultTimeZone?: string;
     onUpdateTimeZone?: (timeZone: string) => void;

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

@@ -2,3 +2,7 @@ export * from './RelativeRangeDatePicker';
 export { PickerDialog as RelativeRangeDatePickerDialog } from './components/PickerDialog/PickerDialog';
 export type { PickerDialogProps as RelativeRangeDatePickerDialogProps } from './components/PickerDialog/PickerDialog';
 export * from './hooks/useRelativeRangeDatePickerState';
+export { DEFAULT_DATE_PRESETS, DEFAULT_TIME_PRESETS, DEFAULT_OTHERS_PRESETS, } from './components/Presets/defaultPresets';
+export { getDefaultPresetTabs } from './components/Presets/utils';
+export type { Preset as RelativeRangeDatePickerPreset } from './components/Presets/defaultPresets';
+export type { PresetTab as RelativeRangeDatePickerPresetTab } from './components/Presets/utils';

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

@@ -1,8 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RelativeRangeDatePickerDialog = void 0;
+exports.getDefaultPresetTabs = exports.DEFAULT_OTHERS_PRESETS = exports.DEFAULT_TIME_PRESETS = exports.DEFAULT_DATE_PRESETS = exports.RelativeRangeDatePickerDialog = void 0;
 const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./RelativeRangeDatePicker"), exports);
 var PickerDialog_1 = require("./components/PickerDialog/PickerDialog");
 Object.defineProperty(exports, "RelativeRangeDatePickerDialog", { enumerable: true, get: function () { return PickerDialog_1.PickerDialog; } });
 tslib_1.__exportStar(require("./hooks/useRelativeRangeDatePickerState"), exports);
+var defaultPresets_1 = require("./components/Presets/defaultPresets");
+Object.defineProperty(exports, "DEFAULT_DATE_PRESETS", { enumerable: true, get: function () { return defaultPresets_1.DEFAULT_DATE_PRESETS; } });
+Object.defineProperty(exports, "DEFAULT_TIME_PRESETS", { enumerable: true, get: function () { return defaultPresets_1.DEFAULT_TIME_PRESETS; } });
+Object.defineProperty(exports, "DEFAULT_OTHERS_PRESETS", { enumerable: true, get: function () { return defaultPresets_1.DEFAULT_OTHERS_PRESETS; } });
+var utils_1 = require("./components/Presets/utils");
+Object.defineProperty(exports, "getDefaultPresetTabs", { enumerable: true, get: function () { return utils_1.getDefaultPresetTabs; } });

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

@@ -27,7 +27,7 @@ function getDefaultTitle({ value, timeZone, alwaysShowAsAbsolute, format = 'L',
     if (!value) {
         return '';
     }
-    const tz = timeZone === 'system' ? '' : ` (${getTimeZoneOffset(timeZone)})`;
+    const tz = timeZone === 'default' ? '' : ` (${getTimeZoneOffset(timeZone)})`;
     let from = '';
     if (value.start) {
         from =

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

@@ -17,3 +17,11 @@ export interface DateFieldBase<T = DateTime> extends ValueBase<T | null>, InputB
      */
     timeZone?: string;
 }
+export interface PopupTriggerProps<Args extends unknown[] = []> {
+    /** Whether the popup is open (controlled). */
+    open?: boolean;
+    /** Whether the popup is open by default (uncontrolled). */
+    defaultOpen?: boolean;
+    /** Handler that is called when the popup's open state changes. */
+    onOpenChange?: (open: boolean, ...args: Args) => void;
+}

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

@@ -1,9 +1,12 @@
 import React from 'react';
 import type { DateTime } from '@gravity-ui/date-utils';
 import type { CalendarProps } from '../Calendar';
-import type { AccessibilityProps, DateFieldBase, DomProps, FocusableProps, InputDOMProps, KeyboardEvents, StyleProps, TextInputProps } from '../types';
+import type { AccessibilityProps, DomProps, FocusableProps, InputDOMProps, KeyboardEvents, StyleProps, TextInputProps } from '../types';
+import type { DatePickerStateOptions } from './hooks/datePickerStateFactory';
 import './DatePicker.css';
-export interface DatePickerProps<T = DateTime> extends DateFieldBase<T>, TextInputProps, FocusableProps, KeyboardEvents, DomProps, InputDOMProps, StyleProps, AccessibilityProps {
+export interface DatePickerProps<T = DateTime> extends DatePickerStateOptions<T>, TextInputProps, FocusableProps, KeyboardEvents, DomProps, InputDOMProps, StyleProps, AccessibilityProps {
     children?: (props: CalendarProps<T>) => React.ReactNode;
+    disablePortal?: boolean;
+    disableFocusTrap?: boolean;
 }
 export declare function DatePicker({ className, ...props }: DatePickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/DatePicker/hooks/datePickerStateFactory.d.ts

@@ -1,6 +1,7 @@
 import type { DateTime } from '@gravity-ui/date-utils';
 import type { DateFieldState } from '../../DateField';
-import type { DateFieldBase } from '../../types';
+import type { DateFieldBase, PopupTriggerProps } from '../../types';
+type OpenChangeReason = 'EscapeKeyDown' | 'FocusOut' | 'ClickOutside' | 'ValueSelected' | 'TriggerButtonClick' | 'ShortcutKeyDown';
 export interface DatePickerState<T = DateTime> {
     /** The currently selected date. */
     value: T | null;
@@ -36,7 +37,7 @@ export interface DatePickerState<T = DateTime> {
     /** Whether the calendar popover is currently open. */
     isOpen: boolean;
     /** Sets whether the calendar popover is open. */
-    setOpen: (isOpen: boolean) => void;
+    setOpen: (isOpen: boolean, reason: OpenChangeReason) => void;
     dateFieldState: DateFieldState<T>;
 }
 export interface DatePickerStateFactoryOptions<T, O extends DateFieldBase<T>> {
@@ -46,4 +47,7 @@ export interface DatePickerStateFactoryOptions<T, O extends DateFieldBase<T>> {
     getDateTime: (date: T | null | undefined) => DateTime | undefined;
     useDateFieldState: (props: O) => DateFieldState<T>;
 }
-export declare function datePickerStateFactory<T, O extends DateFieldBase<T>>({ getPlaceholderTime, mergeDateTime, setTimezone, getDateTime, useDateFieldState, }: DatePickerStateFactoryOptions<T, O>): (props: O) => DatePickerState<T>;
+export interface DatePickerStateOptions<T> extends DateFieldBase<T>, PopupTriggerProps<[OpenChangeReason]> {
+}
+export declare function datePickerStateFactory<T, O extends DatePickerStateOptions<T>>({ getPlaceholderTime, mergeDateTime, setTimezone, getDateTime, useDateFieldState, }: DatePickerStateFactoryOptions<T, O>): (props: O) => DatePickerState<T>;
+export {};

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

@@ -3,10 +3,11 @@ import { useControlledState } from '@gravity-ui/uikit';
 import { useDefaultTimeZone } from '../../utils/useDefaultTimeZone';
 export function datePickerStateFactory({ getPlaceholderTime, mergeDateTime, setTimezone, getDateTime, useDateFieldState, }) {
     return function useDatePickerState(props) {
-        var _a;
+        var _a, _b;
         const { disabled, readOnly } = props;
-        const [isOpen, setOpen] = React.useState(false);
-        const [value, setValue] = useControlledState(props.value, (_a = props.defaultValue) !== null && _a !== void 0 ? _a : null, props.onUpdate);
+        const [isOpen, _setOpen] = useControlledState(props.open, (_a = props.defaultOpen) !== null && _a !== void 0 ? _a : false, props.onOpenChange);
+        const setOpen = _setOpen;
+        const [value, setValue] = useControlledState(props.value, (_b = props.defaultValue) !== null && _b !== void 0 ? _b : null, props.onUpdate);
         const [selectedDateInner, setSelectedDate] = React.useState(null);
         const [selectedTimeInner, setSelectedTime] = React.useState(null);
         const inputTimeZone = useDefaultTimeZone(getDateTime(props.value) || getDateTime(props.defaultValue) || props.placeholderValue);
@@ -34,9 +35,25 @@ export function datePickerStateFactory({ getPlaceholderTime, mergeDateTime, setT
             disabled,
             readOnly, validationState: props.validationState, minValue: props.minValue, maxValue: props.maxValue, isDateUnavailable: props.isDateUnavailable, format, placeholderValue: props.placeholderValue, timeZone }));
         const timeFormat = React.useMemo(() => {
-            const hasSeconds = dateFieldState.sections.some((s) => s.type === 'second');
-            return hasSeconds ? 'LTS' : 'LT';
-        }, [dateFieldState.sections]);
+            if (!dateFieldState.hasTime) {
+                return undefined;
+            }
+            const timeFormatParts = [];
+            const hours = dateFieldState.sections.find((s) => s.type === 'hour');
+            if (hours) {
+                timeFormatParts.push(hours.format);
+            }
+            const minutes = dateFieldState.sections.find((s) => s.type === 'minute');
+            if (minutes) {
+                timeFormatParts.push(minutes.format);
+            }
+            const seconds = dateFieldState.sections.find((s) => s.type === 'second');
+            if (seconds) {
+                timeFormatParts.push(seconds.format);
+            }
+            const dayPeriod = dateFieldState.sections.find((s) => s.type === 'dayPeriod');
+            return timeFormatParts.join(':') + (dayPeriod ? ` ${dayPeriod.format}` : '');
+        }, [dateFieldState.hasTime, dateFieldState.sections]);
         if (value) {
             selectedDate = setTimezone(value, timeZone);
             if (dateFieldState.hasTime) {
@@ -61,7 +78,7 @@ export function datePickerStateFactory({ getPlaceholderTime, mergeDateTime, setT
                 commitValue(newValue, newValue);
             }
             if (shouldClose) {
-                setOpen(false);
+                setOpen(false, 'ValueSelected');
             }
         };
         const selectTime = (newValue) => {
@@ -104,11 +121,11 @@ export function datePickerStateFactory({ getPlaceholderTime, mergeDateTime, setT
             timeFormat,
             timeZone,
             isOpen,
-            setOpen(newIsOpen) {
+            setOpen(newIsOpen, reason) {
                 if (!newIsOpen && !value && selectedDate && dateFieldState.hasTime) {
                     commitValue(selectedDate, selectedTime || getPlaceholderTime(props.placeholderValue, props.timeZone));
                 }
-                setOpen(newIsOpen);
+                setOpen(newIsOpen, reason);
             },
             dateFieldState,
         };

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

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
 import React from 'react';
+import { isDateTime } from '@gravity-ui/date-utils';
 import { useFocusWithin, useForkRef } from '@gravity-ui/uikit';
 import { useDateFieldProps } from '../../DateField';
 import { getButtonSizeForInput } from '../../utils/getButtonSizeForInput';
@@ -9,13 +10,31 @@ import { getDateTimeValue } from '../utils';
 export function useDatePickerProps(state, _a) {
     var { onFocus, onBlur } = _a, props = __rest(_a, ["onFocus", "onBlur"]);
     const [isActive, setActive] = React.useState(false);
+    const [focusedDate, setFocusedDate] = React.useState(isDateTime(state.dateFieldState.displayValue)
+        ? state.dateFieldState.displayValue
+        : state.dateFieldState.displayValue.start);
+    const [prevDateValue, setPrevDateValue] = React.useState(state.dateFieldState.displayValue);
+    if (isDateTime(state.dateFieldState.displayValue)) {
+        if (!state.dateFieldState.displayValue.isSame(prevDateValue, 'day')) {
+            setPrevDateValue(state.dateFieldState.displayValue);
+            setFocusedDate(state.dateFieldState.displayValue);
+        }
+    }
+    else if (!state.dateFieldState.displayValue.start.isSame(prevDateValue.start, 'day')) {
+        setPrevDateValue(state.dateFieldState.displayValue);
+        setFocusedDate(state.dateFieldState.displayValue.start);
+    }
+    else if (!state.dateFieldState.displayValue.end.isSame(prevDateValue.end, 'day')) {
+        setPrevDateValue(state.dateFieldState.displayValue);
+        setFocusedDate(state.dateFieldState.displayValue.end);
+    }
     const { focusWithinProps } = useFocusWithin({
         onFocusWithin: onFocus,
         onBlurWithin: onBlur,
         onFocusWithinChange(isFocusWithin) {
             setActive(isFocusWithin);
             if (!isFocusWithin) {
-                state.setOpen(false);
+                state.setOpen(false, 'FocusOut');
             }
         },
     });
@@ -37,7 +56,7 @@ export function useDatePickerProps(state, _a) {
                 if (!onlyTime && e.altKey && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
                     e.preventDefault();
                     e.stopPropagation();
-                    state.setOpen(true);
+                    state.setOpen(true, 'ShortcutKeyDown');
                 }
             } }),
         fieldProps: mergeProps(inputProps, state.dateFieldState.isEmpty && !isActive && props.placeholder
@@ -55,25 +74,31 @@ export function useDatePickerProps(state, _a) {
             view: 'flat-secondary',
             onClick: () => {
                 setActive(true);
-                state.setOpen(!state.isOpen);
+                state.setOpen(!state.isOpen, 'TriggerButtonClick');
             },
         },
         popupProps: {
             open: state.isOpen,
             onEscapeKeyDown: () => {
-                state.setOpen(false);
+                state.setOpen(false, 'EscapeKeyDown');
                 focusInput();
             },
             onOutsideClick: (e) => {
                 var _a;
                 if (e.target !== calendarButtonRef.current) {
-                    state.setOpen(false);
+                    state.setOpen(false, 'ClickOutside');
                 }
                 if (e.target && ((_a = groupRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
                     focusInput();
                 }
             },
-            focusTrap: true,
+            onTransitionExited: () => {
+                setFocusedDate(isDateTime(state.dateFieldState.displayValue)
+                    ? state.dateFieldState.displayValue
+                    : state.dateFieldState.displayValue.start);
+            },
+            focusTrap: !props.disableFocusTrap,
+            disablePortal: props.disablePortal,
         },
         calendarProps: {
             ref: calendarRef,
@@ -92,6 +117,8 @@ export function useDatePickerProps(state, _a) {
             maxValue: props.maxValue,
             isDateUnavailable: props.isDateUnavailable,
             timeZone: state.timeZone,
+            focusedValue: focusedDate,
+            onFocusUpdate: setFocusedDate,
         },
         timeInputProps: {
             value: state.timeValue,

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

@@ -35,18 +35,6 @@ 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) {
@@ -56,6 +44,17 @@ export function useRelativeDatePickerProps(state, _a) {
         },
         errorMessage: props.errorMessage,
         errorPlacement: props.errorPlacement,
+        controlProps: {
+            onClick: () => {
+                if (state.disabled) {
+                    return;
+                }
+                if (!isOpen) {
+                    state.setActive(true);
+                    setOpen(true);
+                }
+            },
+        },
     };
     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 }));
@@ -142,6 +141,11 @@ export function useRelativeDatePickerProps(state, _a) {
                 setOpen(false);
                 focusInput();
             },
+            onTransitionExited: () => {
+                setFocusedDate(mode === 'relative'
+                    ? relativeDateState.lastCorrectDate
+                    : datePickerState.dateFieldState.displayValue);
+            },
         },
         calendarProps: {
             ref: calendarRef,

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

@@ -2,6 +2,9 @@
   position: relative;
   display: inline-flex;
 }
+.g-date-relative-range-date-picker__input {
+  caret-color: transparent;
+}
 .g-date-relative-range-date-picker__input_mobile {
   pointer-events: none;
 }

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

@@ -29,10 +29,7 @@ export function RelativeRangeDatePicker(props) {
         },
         onBlurWithin: (e) => {
             var _a;
-            // when the popup is open and an user clicks outside, focus will be returned to the input
-            const seemsIsClickOutsideInEmptySpace = open &&
-                (document.activeElement === null || document.activeElement === document.body);
-            if (!seemsIsClickOutsideInEmptySpace) {
+            if (!open) {
                 setIsActive(false);
                 (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
             }
@@ -51,7 +48,7 @@ export function RelativeRangeDatePicker(props) {
         }), [alwaysShowAsAbsolute, format, getRangeTitle, presetTabs, state.timeZone, state.value]);
     const validationState = props.validationState || (state.isInvalid ? 'invalid' : undefined);
     const errorMessage = (_a = props.errorMessage) !== null && _a !== void 0 ? _a : state.errors.join('\n');
-    return (_jsxs("div", Object.assign({ ref: anchorRef }, focusWithinProps, { className: b(null, props.className), style: props.style, children: [_jsx(TextInput, { autoFocus: props.autoFocus, controlRef: inputRef, value: text, placeholder: props.placeholder, onUpdate: (v) => {
+    return (_jsxs("div", Object.assign({ ref: anchorRef }, focusWithinProps, { className: b(null, props.className), style: props.style, children: [_jsx(TextInput, { id: props.id, autoFocus: props.autoFocus, controlRef: inputRef, value: text, placeholder: props.placeholder, onUpdate: (v) => {
                     if (!props.readOnly && !v) {
                         state.setValue(null, 'default');
                     }
@@ -60,6 +57,15 @@ export function RelativeRangeDatePicker(props) {
                     'aria-expanded': open,
                     disabled: isMobile,
                     className: b('input', { mobile: isMobile }),
+                    onClick: () => {
+                        if (props.disabled) {
+                            return;
+                        }
+                        if (!open) {
+                            setIsActive(true);
+                            setOpen(true);
+                        }
+                    },
                 }, onKeyDown: (e) => {
                     if (props.disabled) {
                         return;

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

@@ -1,5 +1,6 @@
 .g-date-relative-range-date-picker-dialog__content {
   --_--popup-content-padding: var(--g-spacing-2);
+  --_--g-date-picker-presets-padding: var(--_--popup-content-padding);
   padding: var(--_--popup-content-padding);
 }
 .g-date-relative-range-date-picker-dialog__content_mobile {
@@ -29,4 +30,7 @@
   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);
+}
+.g-date-relative-range-date-picker-dialog__presets {
+  margin-inline: calc(-1 * var(--_--popup-content-padding));
 }

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

@@ -36,5 +36,8 @@ function DialogContent(props) {
                     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, docs: props.docs })) : null, props.withZonesList ? (_jsx("div", { className: b('zone'), children: _jsx(Zones, { value: state.timeZone, onUpdate: state.setTimeZone, disabled: props.readOnly, size: props.size }) })) : null] }));
+                    if (!props.withApplyButton) {
+                        props.onApply();
+                    }
+                }, minValue: props.minValue, docs: props.docs, className: b('presets') })) : 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/Presets/Presets.css

@@ -1,8 +1,12 @@
+.g-date-relative-range-date-picker-presets {
+  --g-list-item-padding: 0 var(--_--g-date-picker-presets-padding, 0);
+}
 .g-date-relative-range-date-picker-presets__tabs {
   --g-tabs-border-width: 0;
   display: flex;
   align-items: center;
   gap: var(--g-spacing-2);
+  padding-inline: var(--_--g-date-picker-presets-padding, 0);
   box-shadow: inset 0 -1px var(--g-color-line-generic);
 }
 .g-date-relative-range-date-picker-presets__list-container {

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

@@ -1,17 +1,18 @@
 import type { DateTime } from '@gravity-ui/date-utils';
 import type { Value } from '../../RelativeDatePicker';
 import type { RangeValue } from '../../types';
+export type RelativeRangeDatePickerValue = RangeValue<Value | null>;
 export interface RelativeRangeDatePickerState {
-    value: RangeValue<Value | null> | null;
+    value: RelativeRangeDatePickerValue | null;
     timeZone: string;
-    setValue: (value: RangeValue<Value | null> | null, timeZone: string) => void;
+    setValue: (value: RelativeRangeDatePickerValue | null, timeZone: string) => void;
     isInvalid: boolean;
     errors: string[];
 }
 export interface RelativeRangeDatePickerStateOptions {
-    value?: RangeValue<Value | null> | null;
-    defaultValue?: RangeValue<Value | null>;
-    onUpdate?: (value: RangeValue<Value | null> | null, timeZone: string) => void;
+    value?: RelativeRangeDatePickerValue | null;
+    defaultValue?: RelativeRangeDatePickerValue;
+    onUpdate?: (value: RelativeRangeDatePickerValue | null, timeZone: string) => void;
     timeZone?: string;
     defaultTimeZone?: string;
     onUpdateTimeZone?: (timeZone: string) => void;

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

@@ -2,3 +2,7 @@ export * from './RelativeRangeDatePicker';
 export { PickerDialog as RelativeRangeDatePickerDialog } from './components/PickerDialog/PickerDialog';
 export type { PickerDialogProps as RelativeRangeDatePickerDialogProps } from './components/PickerDialog/PickerDialog';
 export * from './hooks/useRelativeRangeDatePickerState';
+export { DEFAULT_DATE_PRESETS, DEFAULT_TIME_PRESETS, DEFAULT_OTHERS_PRESETS, } from './components/Presets/defaultPresets';
+export { getDefaultPresetTabs } from './components/Presets/utils';
+export type { Preset as RelativeRangeDatePickerPreset } from './components/Presets/defaultPresets';
+export type { PresetTab as RelativeRangeDatePickerPresetTab } from './components/Presets/utils';

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

@@ -1,3 +1,5 @@
 export * from './RelativeRangeDatePicker';
 export { PickerDialog as RelativeRangeDatePickerDialog } from './components/PickerDialog/PickerDialog';
 export * from './hooks/useRelativeRangeDatePickerState';
+export { DEFAULT_DATE_PRESETS, DEFAULT_TIME_PRESETS, DEFAULT_OTHERS_PRESETS, } from './components/Presets/defaultPresets';
+export { getDefaultPresetTabs } from './components/Presets/utils';

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

@@ -21,7 +21,7 @@ export function getDefaultTitle({ value, timeZone, alwaysShowAsAbsolute, format
     if (!value) {
         return '';
     }
-    const tz = timeZone === 'system' ? '' : ` (${getTimeZoneOffset(timeZone)})`;
+    const tz = timeZone === 'default' ? '' : ` (${getTimeZoneOffset(timeZone)})`;
     let from = '';
     if (value.start) {
         from =

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

@@ -17,3 +17,11 @@ export interface DateFieldBase<T = DateTime> extends ValueBase<T | null>, InputB
      */
     timeZone?: string;
 }
+export interface PopupTriggerProps<Args extends unknown[] = []> {
+    /** Whether the popup is open (controlled). */
+    open?: boolean;
+    /** Whether the popup is open by default (uncontrolled). */
+    defaultOpen?: boolean;
+    /** Handler that is called when the popup's open state changes. */
+    onOpenChange?: (open: boolean, ...args: Args) => void;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/date-components",
-  "version": "2.5.0",
+  "version": "2.7.0",
   "description": "",
   "license": "MIT",
   "main": "dist/cjs/index.js",
@@ -61,17 +61,19 @@
     "@gravity-ui/stylelint-config": "^4.0.1",
     "@gravity-ui/tsconfig": "^1.0.0",
     "@gravity-ui/uikit": "^6.15.0",
-    "@storybook/addon-a11y": "^8.1.3",
-    "@storybook/addon-essentials": "^8.1.3",
-    "@storybook/addon-viewport": "^8.1.3",
+    "@storybook/addon-a11y": "^8.1.10",
+    "@storybook/addon-actions": "^8.1.10",
+    "@storybook/addon-essentials": "^8.1.10",
+    "@storybook/addon-storysource": "^8.1.10",
+    "@storybook/addon-viewport": "^8.1.10",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
-    "@storybook/blocks": "^8.1.3",
-    "@storybook/manager-api": "^8.1.3",
+    "@storybook/blocks": "^8.1.10",
+    "@storybook/manager-api": "^8.1.10",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "^8.1.3",
-    "@storybook/react-webpack5": "^8.1.3",
-    "@storybook/theming": "^8.1.3",
-    "@storybook/types": "^8.1.3",
+    "@storybook/react": "^8.1.10",
+    "@storybook/react-webpack5": "^8.1.10",
+    "@storybook/theming": "^8.1.10",
+    "@storybook/types": "^8.1.10",
     "@testing-library/dom": "^10.1.0",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.0",
@@ -98,7 +100,7 @@
     "react-dom": "^18.3.1",
     "rimraf": "^5.0.7",
     "sass": "^1.77.1",
-    "storybook": "^8.1.3",
+    "storybook": "^8.1.10",
     "stylelint": "^15.11.0",
     "stylelint-use-logical": "^2.1.2",
     "ts-jest": "^29.1.5",