diff --git a/src/components/RelativeDateField/hooks/useRelativeDateFieldState.ts b/src/components/RelativeDateField/hooks/useRelativeDateFieldState.ts
index b6a98d8..c07c014 100644
--- a/src/components/RelativeDateField/hooks/useRelativeDateFieldState.ts
+++ b/src/components/RelativeDateField/hooks/useRelativeDateFieldState.ts
@@ -1,6 +1,11 @@
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 type {DateTime} from '@gravity-ui/date-utils';
import {useControlledState} from '@gravity-ui/uikit';
@@ -99,5 +104,8 @@ export function useRelativeDateFieldState(props: RelativeDateFieldOptions): Rela
}
function isLikeRelativeDate(text: string) {
+ if (typeof isLikeRelative === 'function') {
+ return isLikeRelative(text);
+ }
return /^now/i.test(text);
}
diff --git a/src/components/RelativeRangeDatePicker/RelativeRangeDatePicker.tsx b/src/components/RelativeRangeDatePicker/RelativeRangeDatePicker.tsx
index 373ae9a..e21b2e1 100644
--- a/src/components/RelativeRangeDatePicker/RelativeRangeDatePicker.tsx
+++ b/src/components/RelativeRangeDatePicker/RelativeRangeDatePicker.tsx
@@ -18,6 +18,7 @@ import type {
import {getButtonSizeForInput} from '../utils/getButtonSizeForInput';
import {PickerDialog} from './components/PickerDialog/PickerDialog';
+import type {Preset} from './components/Presets/defaultPresets';
import type {PresetTab} from './components/Presets/utils';
import {useRelativeRangeDatePickerState} from './hooks/useRelativeRangeDatePickerState';
import type {RelativeRangeDatePickerStateOptions} from './hooks/useRelativeRangeDatePickerState';
@@ -47,6 +48,8 @@ export interface RelativeRangeDatePickerProps
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;
/** */
diff --git a/src/components/RelativeRangeDatePicker/components/PickerDialog/PickerDialog.tsx b/src/components/RelativeRangeDatePicker/components/PickerDialog/PickerDialog.tsx
index 546bc08..dab0642 100644
--- a/src/components/RelativeRangeDatePicker/components/PickerDialog/PickerDialog.tsx
+++ b/src/components/RelativeRangeDatePicker/components/PickerDialog/PickerDialog.tsx
@@ -135,6 +135,7 @@ function DialogContent(
);
}}
minValue={props.minValue}
+ docs={props.docs}
/>
) : null}
{props.withZonesList ? (
diff --git a/src/components/RelativeRangeDatePicker/components/Presets/Presets.tsx b/src/components/RelativeRangeDatePicker/components/Presets/Presets.tsx
index b42b7e4..0b87936 100644
--- a/src/components/RelativeRangeDatePicker/components/Presets/Presets.tsx
+++ b/src/components/RelativeRangeDatePicker/components/Presets/Presets.tsx
@@ -21,6 +21,7 @@ export interface PresetProps {
minValue?: DateTime;
size?: 's' | 'm' | 'l' | 'xl';
presetTabs?: PresetTab[];
+ docs?: Preset[];
}
export function Presets({
className,
@@ -29,6 +30,7 @@ export function Presets({
withTime,
onChoosePreset,
presetTabs,
+ docs,
}: PresetProps) {
const tabs = React.useMemo(() => {
return filterPresetTabs(presetTabs ?? getDefaultPresetTabs({withTime}), {minValue});
@@ -58,7 +60,7 @@ export function Presets({
items={tabs}
size={size === 's' ? 'm' : size}
/>
-