@gravity-ui/date-components 2.6.0 → 2.7.0

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

@@ -39,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) {

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);
             }
@@ -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/esm/components/DatePicker/hooks/datePickerStateFactory.js

@@ -35,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) {

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);
             }
@@ -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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/date-components",
-  "version": "2.6.0",
+  "version": "2.7.0",
   "description": "",
   "license": "MIT",
   "main": "dist/cjs/index.js",
@@ -62,8 +62,9 @@
     "@gravity-ui/tsconfig": "^1.0.0",
     "@gravity-ui/uikit": "^6.15.0",
     "@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-storysource": "^8.1.10",
     "@storybook/addon-viewport": "^8.1.10",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
     "@storybook/blocks": "^8.1.10",