@gravity-ui/date-components 2.2.1 → 2.3.0

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,6 +1,7 @@
 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 { Preset } from './components/Presets/defaultPresets';
 import type { PresetTab } from './components/Presets/utils';
 import type { RelativeRangeDatePickerStateOptions } from './hooks/useRelativeRangeDatePickerState';
 import './RelativeRangeDatePicker.css';
@@ -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/components/PickerDialog/PickerDialog.js

@@ -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,6 +1,7 @@
 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 { Preset } from './components/Presets/defaultPresets';
 import type { PresetTab } from './components/Presets/utils';
 import type { RelativeRangeDatePickerStateOptions } from './hooks/useRelativeRangeDatePickerState';
 import './RelativeRangeDatePicker.css';
@@ -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/components/PickerDialog/PickerDialog.js

@@ -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.0",
   "description": "",
   "license": "MIT",
   "main": "dist/cjs/index.js",