@gravity-ui/date-components 2.2.1 → 2.3.1

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

@@ -61,5 +61,8 @@ function useRelativeDateFieldState(props) {
 }
 exports.useRelativeDateFieldState = useRelativeDateFieldState;
 function isLikeRelativeDate(text) {
+    if (typeof date_utils_1.isLikeRelative === 'function') {
+        return (0, date_utils_1.isLikeRelative)(text);
+    }
     return /^now/i.test(text);
 }

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

@@ -1,10 +1,11 @@
 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 { DomProps, FocusableProps, InputBase, RangeValue, StyleProps, TextInputProps, Validation } from '../types';
+import type { Preset } from './components/Presets/defaultPresets';
 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 {
+export interface RelativeRangeDatePickerProps extends RelativeRangeDatePickerStateOptions, DomProps, InputBase, TextInputProps, Validation, FocusableProps, 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. */
@@ -17,6 +18,8 @@ export interface RelativeRangeDatePickerProps extends RelativeRangeDatePickerSta
     withPresets?: boolean;
     /** Custom preset tabs */
     presetTabs?: PresetTab[];
+    /** Custom docs for presets, if empty array docs will be hidden */
+    docs?: Preset[];
     /** Show selected relative values as absolute dates */
     alwaysShowAsAbsolute?: boolean;
     /** */

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

@@ -16,7 +16,7 @@ const utils_1 = require("./utils");
 require("./RelativeRangeDatePicker.css");
 const b = (0, cn_1.block)('relative-range-date-picker');
 function RelativeRangeDatePicker(props) {
-    var _a, _b;
+    var _a;
     const state = (0, useRelativeRangeDatePickerState_1.useRelativeRangeDatePickerState)(props);
     const isMobile = (0, uikit_1.useMobile)();
     const anchorRef = react_1.default.useRef(null);
@@ -24,15 +24,26 @@ function RelativeRangeDatePicker(props) {
     const [isActive, setIsActive] = react_1.default.useState(false);
     const [open, setOpen] = react_1.default.useState(false);
     const { focusWithinProps } = (0, uikit_1.useFocusWithin)({
-        isDisabled: props.disabled || isMobile,
-        onFocusWithinChange: (isFocusedWithin) => {
-            if (!isFocusedWithin) {
+        isDisabled: props.disabled,
+        onFocusWithin: (e) => {
+            var _a;
+            if (!isActive) {
+                (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
+            }
+        },
+        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) {
                 setIsActive(false);
+                (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
             }
         },
     });
     const { alwaysShowAsAbsolute, presetTabs, getRangeTitle } = props;
-    const format = (_a = props.format) !== null && _a !== void 0 ? _a : 'L';
+    const format = props.format || 'L';
     const text = react_1.default.useMemo(() => typeof getRangeTitle === 'function'
         ? getRangeTitle(state.value, state.timeZone)
         : (0, utils_1.getDefaultTitle)({
@@ -43,8 +54,8 @@ function RelativeRangeDatePicker(props) {
             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 ((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.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: (0, jsx_runtime_1.jsx)(ValueLabel, { value: state.value, format: format, timeZone: state.timeZone }), children: (0, jsx_runtime_1.jsx)(uikit_1.TextInput, { controlRef: inputRef, value: text, placeholder: props.placeholder, onUpdate: (v) => {
+    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.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: (0, jsx_runtime_1.jsx)(ValueLabel, { value: state.value, format: format, timeZone: state.timeZone }), children: (0, jsx_runtime_1.jsx)(uikit_1.TextInput, { autoFocus: props.autoFocus, controlRef: inputRef, value: text, placeholder: props.placeholder, onUpdate: (v) => {
                         if (!props.readOnly && !v) {
                             state.setValue(null, 'default');
                         }

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

@@ -16,7 +16,7 @@ function PickerDialog({ props, state, open, onClose, isMobile, anchorRef, classN
     if (isMobile) {
         return ((0, jsx_runtime_1.jsx)(uikit_1.Sheet, { visible: open, onClose: onClose, contentClassName: b('content', { mobile: true, size: 'xl' }, className), children: (0, jsx_runtime_1.jsx)(DialogContent, Object.assign({}, props, { size: "xl", state: state, onApply: onClose })) }));
     }
-    return ((0, jsx_runtime_1.jsx)(uikit_1.Popup, { open: open, onClose: onClose, role: "dialog", anchorRef: anchorRef, contentClassName: b('content', { size: props.size }, className), focusTrap: true, restoreFocus: true, children: (0, jsx_runtime_1.jsx)(DialogContent, Object.assign({}, props, { state: state, onApply: onClose })) }));
+    return ((0, jsx_runtime_1.jsx)(uikit_1.Popup, { open: open, onClose: onClose, role: "dialog", anchorRef: anchorRef, contentClassName: b('content', { size: props.size }, className), autoFocus: true, focusTrap: true, restoreFocus: true, children: (0, jsx_runtime_1.jsx)(DialogContent, Object.assign({}, props, { state: state, onApply: onClose })) }));
 }
 exports.PickerDialog = PickerDialog;
 function DialogContent(props) {
@@ -39,5 +39,5 @@ 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 })) : 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] }));
+                }, 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] }));
 }

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

@@ -1,4 +1,5 @@
 import type { DateTime } from '@gravity-ui/date-utils';
+import type { Preset } from './defaultPresets';
 import type { PresetTab } from './utils';
 import './Presets.css';
 export interface PresetProps {
@@ -8,8 +9,9 @@ export interface PresetProps {
     minValue?: DateTime;
     size?: 's' | 'm' | 'l' | 'xl';
     presetTabs?: PresetTab[];
+    docs?: Preset[];
 }
-export declare function Presets({ className, size, minValue, withTime, onChoosePreset, presetTabs, }: PresetProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function Presets({ className, size, minValue, withTime, onChoosePreset, presetTabs, docs, }: PresetProps): import("react/jsx-runtime").JSX.Element | null;
 export declare const SIZE_TO_ITEM_HEIGHT: {
     s: number;
     m: number;

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

@@ -10,7 +10,7 @@ const PresetsDoc_1 = require("./PresetsDoc");
 const utils_1 = require("./utils");
 require("./Presets.css");
 const b = (0, cn_1.block)('relative-range-date-picker-presets');
-function Presets({ className, size = 'm', minValue, withTime, onChoosePreset, presetTabs, }) {
+function Presets({ className, size = 'm', minValue, withTime, onChoosePreset, presetTabs, docs, }) {
     var _a, _b;
     const tabs = react_1.default.useMemo(() => {
         return (0, utils_1.filterPresetTabs)(presetTabs !== null && presetTabs !== void 0 ? presetTabs : (0, utils_1.getDefaultPresetTabs)({ withTime }), { minValue });
@@ -26,7 +26,7 @@ function Presets({ className, size = 'm', minValue, withTime, onChoosePreset, pr
     if (activeTab.id !== activeTabId) {
         setActiveTab(activeTab.id);
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { className: b({ size }, className), children: [(0, jsx_runtime_1.jsxs)("div", { className: b('tabs'), children: [(0, jsx_runtime_1.jsx)(uikit_1.Tabs, { activeTab: activeTabId, onSelectTab: setActiveTab, items: tabs, size: size === 's' ? 'm' : size }), (0, jsx_runtime_1.jsx)(PresetsDoc_1.PresetsDoc, { className: b('doc'), size: size })] }), (0, jsx_runtime_1.jsx)("div", { className: b('content'), children: (0, jsx_runtime_1.jsx)(PresetsList, { presets: activeTab.presets, onChoosePreset: onChoosePreset, size: size }) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: b({ size }, className), children: [(0, jsx_runtime_1.jsxs)("div", { className: b('tabs'), children: [(0, jsx_runtime_1.jsx)(uikit_1.Tabs, { activeTab: activeTabId, onSelectTab: setActiveTab, items: tabs, size: size === 's' ? 'm' : size }), (0, jsx_runtime_1.jsx)(PresetsDoc_1.PresetsDoc, { className: b('doc'), size: size, docs: docs })] }), (0, jsx_runtime_1.jsx)("div", { className: b('content'), children: (0, jsx_runtime_1.jsx)(PresetsList, { presets: activeTab.presets, onChoosePreset: onChoosePreset, size: size }) })] }));
 }
 exports.Presets = Presets;
 exports.SIZE_TO_ITEM_HEIGHT = {

package/dist/cjs/components/RelativeRangeDatePicker/components/Presets/PresetsDoc.d.ts

@@ -1,7 +1,9 @@
+import type { Preset } from './defaultPresets';
 import './PresetsDoc.css';
 interface PresetsDocProps {
     className?: string;
     size?: 's' | 'm' | 'l' | 'xl';
+    docs?: Preset[];
 }
-export declare function PresetsDoc({ className, size }: PresetsDocProps): import("react/jsx-runtime").JSX.Element;
+export declare function PresetsDoc({ className, size, docs }: PresetsDocProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

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

@@ -68,23 +68,26 @@ const data = [
         to: 'now - 1M/M',
     },
 ];
-function PresetsExamples({ size }) {
-    return (0, jsx_runtime_1.jsx)(uikit_1.Table, { columns: columns, data: data, className: b('table', { size }) });
+function PresetsExamples({ size, docs }) {
+    return (0, jsx_runtime_1.jsx)(uikit_1.Table, { columns: columns, data: docs, className: b('table', { size }) });
 }
-function DesktopDoc({ className, size }) {
-    return ((0, jsx_runtime_1.jsx)(uikit_1.Popover, { className: b(null, className), tooltipContentClassName: b('content'), hasArrow: false, content: (0, jsx_runtime_1.jsx)(PresetsExamples, { size: size }), children: (0, jsx_runtime_1.jsx)(uikit_1.Button, { className: b('button'), view: "flat-secondary", size: (0, getButtonSizeForInput_1.getButtonSizeForInput)(size), children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.CircleQuestion }) }) }));
+function DesktopDoc({ className, size, docs }) {
+    return ((0, jsx_runtime_1.jsx)(uikit_1.Popover, { className: b(null, className), tooltipContentClassName: b('content'), hasArrow: false, content: (0, jsx_runtime_1.jsx)(PresetsExamples, { size: size, docs: docs }), children: (0, jsx_runtime_1.jsx)(uikit_1.Button, { className: b('button'), view: "flat-secondary", size: (0, getButtonSizeForInput_1.getButtonSizeForInput)(size), children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.CircleQuestion }) }) }));
 }
-function MobileDoc({ className, size }) {
+function MobileDoc({ className, size, docs }) {
     const [open, setOpen] = react_1.default.useState(false);
     return ((0, jsx_runtime_1.jsxs)("div", { className: b(null, className), children: [(0, jsx_runtime_1.jsx)(uikit_1.Button, { className: b('button'), view: "flat-secondary", size: "l", onClick: () => {
                     setOpen(true);
-                }, children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.CircleQuestion }) }), (0, jsx_runtime_1.jsx)(uikit_1.Sheet, { visible: open, onClose: () => setOpen(false), children: (0, jsx_runtime_1.jsx)(PresetsExamples, { size: size }) })] }));
+                }, children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.CircleQuestion }) }), (0, jsx_runtime_1.jsx)(uikit_1.Sheet, { visible: open, onClose: () => setOpen(false), children: (0, jsx_runtime_1.jsx)(PresetsExamples, { size: size, docs: docs }) })] }));
 }
-function PresetsDoc({ className, size }) {
+function PresetsDoc({ className, size, docs = data }) {
     const isMobile = (0, uikit_1.useMobile)();
+    if (!Array.isArray(docs) || docs.length === 0) {
+        return null;
+    }
     if (isMobile) {
-        return (0, jsx_runtime_1.jsx)(MobileDoc, { className: className, size: size });
+        return (0, jsx_runtime_1.jsx)(MobileDoc, { className: className, size: size, docs: docs });
     }
-    return (0, jsx_runtime_1.jsx)(DesktopDoc, { className: className, size: size });
+    return (0, jsx_runtime_1.jsx)(DesktopDoc, { className: className, size: size, docs: docs });
 }
 exports.PresetsDoc = PresetsDoc;

package/dist/esm/components/RelativeDateField/hooks/useRelativeDateFieldState.js

@@ -1,5 +1,7 @@
 import React from 'react';
-import { dateTimeParse, isValid } from '@gravity-ui/date-utils';
+import { dateTimeParse, 
+// @ts-expect-error added in new version of date-utils
+isLikeRelative, isValid, } from '@gravity-ui/date-utils';
 import { useControlledState } from '@gravity-ui/uikit';
 export function useRelativeDateFieldState(props) {
     var _a;
@@ -56,5 +58,8 @@ export function useRelativeDateFieldState(props) {
     };
 }
 function isLikeRelativeDate(text) {
+    if (typeof isLikeRelative === 'function') {
+        return isLikeRelative(text);
+    }
     return /^now/i.test(text);
 }

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

@@ -1,10 +1,11 @@
 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 { DomProps, FocusableProps, InputBase, RangeValue, StyleProps, TextInputProps, Validation } from '../types';
+import type { Preset } from './components/Presets/defaultPresets';
 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 {
+export interface RelativeRangeDatePickerProps extends RelativeRangeDatePickerStateOptions, DomProps, InputBase, TextInputProps, Validation, FocusableProps, 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. */
@@ -17,6 +18,8 @@ export interface RelativeRangeDatePickerProps extends RelativeRangeDatePickerSta
     withPresets?: boolean;
     /** Custom preset tabs */
     presetTabs?: PresetTab[];
+    /** Custom docs for presets, if empty array docs will be hidden */
+    docs?: Preset[];
     /** Show selected relative values as absolute dates */
     alwaysShowAsAbsolute?: boolean;
     /** */

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

@@ -12,7 +12,7 @@ import { getDefaultTitle } from './utils';
 import './RelativeRangeDatePicker.css';
 const b = block('relative-range-date-picker');
 export function RelativeRangeDatePicker(props) {
-    var _a, _b;
+    var _a;
     const state = useRelativeRangeDatePickerState(props);
     const isMobile = useMobile();
     const anchorRef = React.useRef(null);
@@ -20,15 +20,26 @@ export function RelativeRangeDatePicker(props) {
     const [isActive, setIsActive] = React.useState(false);
     const [open, setOpen] = React.useState(false);
     const { focusWithinProps } = useFocusWithin({
-        isDisabled: props.disabled || isMobile,
-        onFocusWithinChange: (isFocusedWithin) => {
-            if (!isFocusedWithin) {
+        isDisabled: props.disabled,
+        onFocusWithin: (e) => {
+            var _a;
+            if (!isActive) {
+                (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
+            }
+        },
+        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) {
                 setIsActive(false);
+                (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
             }
         },
     });
     const { alwaysShowAsAbsolute, presetTabs, getRangeTitle } = props;
-    const format = (_a = props.format) !== null && _a !== void 0 ? _a : 'L';
+    const format = props.format || 'L';
     const text = React.useMemo(() => typeof getRangeTitle === 'function'
         ? getRangeTitle(state.value, state.timeZone)
         : getDefaultTitle({
@@ -39,8 +50,8 @@ export function RelativeRangeDatePicker(props) {
             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) => {
+    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(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, { autoFocus: props.autoFocus, controlRef: inputRef, value: text, placeholder: props.placeholder, onUpdate: (v) => {
                         if (!props.readOnly && !v) {
                             state.setValue(null, 'default');
                         }

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

@@ -13,7 +13,7 @@ export function PickerDialog({ props, state, open, onClose, isMobile, anchorRef,
     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 })) }));
+    return (_jsx(Popup, { open: open, onClose: onClose, role: "dialog", anchorRef: anchorRef, contentClassName: b('content', { size: props.size }, className), autoFocus: true, 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;
@@ -35,5 +35,5 @@ 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 })) : null, props.withZonesList ? (_jsx("div", { className: b('zone'), children: _jsx(Zones, { value: state.timeZone, onUpdate: state.setTimeZone, disabled: props.readOnly, size: props.size }) })) : null] }));
+                }, 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] }));
 }

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

@@ -1,4 +1,5 @@
 import type { DateTime } from '@gravity-ui/date-utils';
+import type { Preset } from './defaultPresets';
 import type { PresetTab } from './utils';
 import './Presets.css';
 export interface PresetProps {
@@ -8,8 +9,9 @@ export interface PresetProps {
     minValue?: DateTime;
     size?: 's' | 'm' | 'l' | 'xl';
     presetTabs?: PresetTab[];
+    docs?: Preset[];
 }
-export declare function Presets({ className, size, minValue, withTime, onChoosePreset, presetTabs, }: PresetProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function Presets({ className, size, minValue, withTime, onChoosePreset, presetTabs, docs, }: PresetProps): import("react/jsx-runtime").JSX.Element | null;
 export declare const SIZE_TO_ITEM_HEIGHT: {
     s: number;
     m: number;

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

@@ -6,7 +6,7 @@ import { PresetsDoc } from './PresetsDoc';
 import { filterPresetTabs, getDefaultPresetTabs } from './utils';
 import './Presets.css';
 const b = block('relative-range-date-picker-presets');
-export function Presets({ className, size = 'm', minValue, withTime, onChoosePreset, presetTabs, }) {
+export function Presets({ className, size = 'm', minValue, withTime, onChoosePreset, presetTabs, docs, }) {
     var _a, _b;
     const tabs = React.useMemo(() => {
         return filterPresetTabs(presetTabs !== null && presetTabs !== void 0 ? presetTabs : getDefaultPresetTabs({ withTime }), { minValue });
@@ -22,7 +22,7 @@ export function Presets({ className, size = 'm', minValue, withTime, onChoosePre
     if (activeTab.id !== activeTabId) {
         setActiveTab(activeTab.id);
     }
-    return (_jsxs("div", { className: b({ size }, className), children: [_jsxs("div", { className: b('tabs'), children: [_jsx(Tabs, { activeTab: activeTabId, onSelectTab: setActiveTab, items: tabs, size: size === 's' ? 'm' : size }), _jsx(PresetsDoc, { className: b('doc'), size: size })] }), _jsx("div", { className: b('content'), children: _jsx(PresetsList, { presets: activeTab.presets, onChoosePreset: onChoosePreset, size: size }) })] }));
+    return (_jsxs("div", { className: b({ size }, className), children: [_jsxs("div", { className: b('tabs'), children: [_jsx(Tabs, { activeTab: activeTabId, onSelectTab: setActiveTab, items: tabs, size: size === 's' ? 'm' : size }), _jsx(PresetsDoc, { className: b('doc'), size: size, docs: docs })] }), _jsx("div", { className: b('content'), children: _jsx(PresetsList, { presets: activeTab.presets, onChoosePreset: onChoosePreset, size: size }) })] }));
 }
 export const SIZE_TO_ITEM_HEIGHT = {
     s: 28,

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

@@ -1,7 +1,9 @@
+import type { Preset } from './defaultPresets';
 import './PresetsDoc.css';
 interface PresetsDocProps {
     className?: string;
     size?: 's' | 'm' | 'l' | 'xl';
+    docs?: Preset[];
 }
-export declare function PresetsDoc({ className, size }: PresetsDocProps): import("react/jsx-runtime").JSX.Element;
+export declare function PresetsDoc({ className, size, docs }: PresetsDocProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

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

@@ -64,22 +64,25 @@ const data = [
         to: 'now - 1M/M',
     },
 ];
-function PresetsExamples({ size }) {
-    return _jsx(Table, { columns: columns, data: data, className: b('table', { size }) });
+function PresetsExamples({ size, docs }) {
+    return _jsx(Table, { columns: columns, data: docs, className: b('table', { size }) });
 }
-function DesktopDoc({ className, size }) {
-    return (_jsx(Popover, { className: b(null, className), tooltipContentClassName: b('content'), hasArrow: false, content: _jsx(PresetsExamples, { size: size }), children: _jsx(Button, { className: b('button'), view: "flat-secondary", size: getButtonSizeForInput(size), children: _jsx(Icon, { data: CircleQuestion }) }) }));
+function DesktopDoc({ className, size, docs }) {
+    return (_jsx(Popover, { className: b(null, className), tooltipContentClassName: b('content'), hasArrow: false, content: _jsx(PresetsExamples, { size: size, docs: docs }), children: _jsx(Button, { className: b('button'), view: "flat-secondary", size: getButtonSizeForInput(size), children: _jsx(Icon, { data: CircleQuestion }) }) }));
 }
-function MobileDoc({ className, size }) {
+function MobileDoc({ className, size, docs }) {
     const [open, setOpen] = React.useState(false);
     return (_jsxs("div", { className: b(null, className), children: [_jsx(Button, { className: b('button'), view: "flat-secondary", size: "l", onClick: () => {
                     setOpen(true);
-                }, children: _jsx(Icon, { data: CircleQuestion }) }), _jsx(Sheet, { visible: open, onClose: () => setOpen(false), children: _jsx(PresetsExamples, { size: size }) })] }));
+                }, children: _jsx(Icon, { data: CircleQuestion }) }), _jsx(Sheet, { visible: open, onClose: () => setOpen(false), children: _jsx(PresetsExamples, { size: size, docs: docs }) })] }));
 }
-export function PresetsDoc({ className, size }) {
+export function PresetsDoc({ className, size, docs = data }) {
     const isMobile = useMobile();
+    if (!Array.isArray(docs) || docs.length === 0) {
+        return null;
+    }
     if (isMobile) {
-        return _jsx(MobileDoc, { className: className, size: size });
+        return _jsx(MobileDoc, { className: className, size: size, docs: docs });
     }
-    return _jsx(DesktopDoc, { className: className, size: size });
+    return _jsx(DesktopDoc, { className: className, size: size, docs: docs });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/date-components",
-  "version": "2.2.1",
+  "version": "2.3.1",
   "description": "",
   "license": "MIT",
   "main": "dist/cjs/index.js",
@@ -51,36 +51,36 @@
     "tslib": "^2.6.2"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.22.9",
-    "@babel/preset-react": "^7.22.5",
-    "@babel/preset-typescript": "^7.22.5",
-    "@commitlint/cli": "^18.4.3",
-    "@commitlint/config-conventional": "^18.4.3",
-    "@gravity-ui/eslint-config": "^3.1.1",
+    "@babel/preset-env": "^7.24.5",
+    "@babel/preset-react": "^7.24.1",
+    "@babel/preset-typescript": "^7.24.1",
+    "@commitlint/cli": "^19.3.0",
+    "@commitlint/config-conventional": "^19.2.2",
+    "@gravity-ui/eslint-config": "^3.2.0",
     "@gravity-ui/prettier-config": "^1.1.0",
     "@gravity-ui/stylelint-config": "^4.0.1",
     "@gravity-ui/tsconfig": "^1.0.0",
     "@gravity-ui/uikit": "^6.1.1",
-    "@storybook/addon-a11y": "^7.6.15",
-    "@storybook/addon-essentials": "^7.6.15",
-    "@storybook/addon-viewport": "^7.6.15",
-    "@storybook/addons": "^7.6.15",
-    "@storybook/api": "^7.6.15",
-    "@storybook/blocks": "^7.6.15",
+    "@storybook/addon-a11y": "^8.0.10",
+    "@storybook/addon-essentials": "^8.0.10",
+    "@storybook/addon-viewport": "^8.0.10",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
+    "@storybook/blocks": "^8.0.10",
+    "@storybook/manager-api": "^8.0.10",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "^7.6.15",
-    "@storybook/react-webpack5": "^7.6.15",
-    "@storybook/theming": "^7.6.15",
-    "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^14.2.1",
+    "@storybook/react": "^8.0.10",
+    "@storybook/react-webpack5": "^8.0.10",
+    "@storybook/theming": "^8.0.10",
+    "@testing-library/jest-dom": "^6.4.5",
+    "@testing-library/react": "^15.0.7",
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.12",
-    "@types/react": "^18.2.55",
-    "@types/react-dom": "^18.2.19",
-    "eslint": "^8.56.0",
-    "eslint-plugin-testing-library": "^6.2.0",
-    "gulp": "^4.0.2",
-    "gulp-cli": "^2.3.0",
+    "@types/react": "^18.3.2",
+    "@types/react-dom": "^18.3.0",
+    "eslint": "^8.57.0",
+    "eslint-plugin-testing-library": "^6.2.2",
+    "gulp": "^5.0.0",
+    "gulp-cli": "^3.0.0",
     "gulp-dart-sass": "^1.1.0",
     "gulp-replace": "^1.1.4",
     "gulp-typescript": "^5.0.1",
@@ -91,18 +91,16 @@
     "nano-staged": "^0.8.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^3.2.5",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "rimraf": "5.0.5",
-    "sass": "^1.70.0",
-    "sass-loader": "^13.3.3",
-    "storybook": "^7.6.15",
-    "style-loader": "^3.3.4",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "rimraf": "^5.0.7",
+    "sass": "^1.77.1",
+    "storybook": "^8.0.10",
     "stylelint": "^15.11.0",
-    "stylelint-use-logical": "^2.1.0",
+    "stylelint-use-logical": "^2.1.2",
     "ts-jest": "^29.1.2",
     "ts-node": "^10.9.2",
-    "typescript": "^5.3.3"
+    "typescript": "^5.4.5"
   },
   "peerDependencies": {
     "@gravity-ui/uikit": "^6.0.0",