From ec143590da1f5a12cde369ec8dd40fe4ca9eba8a Mon Sep 17 00:00:00 2001
From: skiffcmc <skiffcmc@yandex-team.ru>
Date: Mon, 12 May 2025 14:18:08 +0300
Subject: [PATCH 1/5] feat(RelativeRangeDatePicker): allow null values in
 relative range presets

---
 .../components/PickerDialog/PickerForm.tsx                    | 4 ++--
 .../PickerDialog/useRelativeRangeDatePickerDialogState.tsx    | 2 +-
 .../RelativeRangeDatePicker/components/Presets/Presets.tsx    | 2 +-
 .../components/Presets/defaultPresets.ts                      | 4 ++--
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/RelativeRangeDatePicker/components/PickerDialog/PickerForm.tsx b/src/components/RelativeRangeDatePicker/components/PickerDialog/PickerForm.tsx
index 1e504304..a3b94150 100644
--- a/src/components/RelativeRangeDatePicker/components/PickerDialog/PickerForm.tsx
+++ b/src/components/RelativeRangeDatePicker/components/PickerDialog/PickerForm.tsx
@@ -137,8 +137,8 @@ export function PickerForm(
                     presetTabs={props.presetTabs}
                     onChoosePreset={(start, end) => {
                         state.setRange(
-                            {type: 'relative', value: start},
-                            {type: 'relative', value: end},
+                            start === null ? null : {type: 'relative', value: start},
+                            end === null ? null : {type: 'relative', value: end},
                         );
                         if (!props.withApplyButton) {
                             props.onApply();
diff --git a/src/components/RelativeRangeDatePicker/components/PickerDialog/useRelativeRangeDatePickerDialogState.tsx b/src/components/RelativeRangeDatePicker/components/PickerDialog/useRelativeRangeDatePickerDialogState.tsx
index 8481e9d3..794af3e8 100644
--- a/src/components/RelativeRangeDatePicker/components/PickerDialog/useRelativeRangeDatePickerDialogState.tsx
+++ b/src/components/RelativeRangeDatePicker/components/PickerDialog/useRelativeRangeDatePickerDialogState.tsx
@@ -89,7 +89,7 @@ export function useRelativeRangeDatePickerDialogState(props: PickerFormProps) {
         }
     }
 
-    function setRange(newStart: Value, newEnd: Value) {
+    function setRange(newStart: Value | null, newEnd: Value | null) {
         if (props.readOnly) {
             return;
         }
diff --git a/src/components/RelativeRangeDatePicker/components/Presets/Presets.tsx b/src/components/RelativeRangeDatePicker/components/Presets/Presets.tsx
index a7aaf987..db9bec49 100644
--- a/src/components/RelativeRangeDatePicker/components/Presets/Presets.tsx
+++ b/src/components/RelativeRangeDatePicker/components/Presets/Presets.tsx
@@ -17,7 +17,7 @@ const b = block('relative-range-date-picker-presets');
 
 export interface PresetProps {
     className?: string;
-    onChoosePreset: (start: string, end: string) => void;
+    onChoosePreset: (start: string | null, end: string | null) => void;
     withTime?: boolean;
     minValue?: DateTime;
     size?: 's' | 'm' | 'l' | 'xl';
diff --git a/src/components/RelativeRangeDatePicker/components/Presets/defaultPresets.ts b/src/components/RelativeRangeDatePicker/components/Presets/defaultPresets.ts
index 3e718003..3d100786 100644
--- a/src/components/RelativeRangeDatePicker/components/Presets/defaultPresets.ts
+++ b/src/components/RelativeRangeDatePicker/components/Presets/defaultPresets.ts
@@ -1,8 +1,8 @@
 import {i18n} from './i18n';
 
 export interface Preset {
-    from: string;
-    to: string;
+    from: string | null;
+    to: string | null;
     title: string;
 }
 

From 64ce7f9a0272571b140ec74a260f372f9384951d Mon Sep 17 00:00:00 2001
From: skiffcmc <skiffcmc@yandex-team.ru>
Date: Fri, 16 May 2025 22:00:31 +0300
Subject: [PATCH 2/5] feat(RelativeRangeDatePicker): [ISSUE-186]fix preset
 title

---
 .../RelativeRangeDatePiker.stories.tsx        | 30 ++++++++++++++++++-
 .../components/PickerDialog/PickerDoc.tsx     |  8 ++---
 .../components/PickerDialog/PickerForm.tsx    |  6 ++--
 .../components/Presets/Presets.tsx            |  4 +--
 .../components/Presets/utils.ts               | 20 ++++++-------
 .../RelativeRangeDatePicker/utils.ts          | 29 ++++++++++++++----
 6 files changed, 72 insertions(+), 25 deletions(-)

diff --git a/src/components/RelativeRangeDatePicker/__stories__/RelativeRangeDatePiker.stories.tsx b/src/components/RelativeRangeDatePicker/__stories__/RelativeRangeDatePiker.stories.tsx
index 261200c5..0d35c45d 100644
--- a/src/components/RelativeRangeDatePicker/__stories__/RelativeRangeDatePiker.stories.tsx
+++ b/src/components/RelativeRangeDatePicker/__stories__/RelativeRangeDatePiker.stories.tsx
@@ -11,6 +11,25 @@ import type {Value} from '../../RelativeDatePicker';
 import {RelativeRangeDatePicker} from '../RelativeRangeDatePicker';
 import type {RelativeRangeDatePickerProps} from '../types';
 
+const DEFAULT_RANGE_DATE_PICKER_PRESET: RelativeRangeDatePickerProps['presetTabs'] = [
+    {
+        id: 'main',
+        title: 'Presets',
+        presets: [
+            {
+                from: 'now',
+                to: 'now+30d',
+                title: '30 days',
+            },
+            {
+                from: 'now',
+                to: null,
+                title: 'Unlimited',
+            },
+        ],
+    },
+];
+
 const meta: Meta<typeof RelativeRangeDatePicker> = {
     title: 'Components/RelativeRangeDatePicker',
     component: RelativeRangeDatePicker,
@@ -44,7 +63,16 @@ export const Default = {
         const minValue = props.minValue ? dateTimeParse(props.minValue, {timeZone}) : undefined;
         const maxValue = props.maxValue ? dateTimeParse(props.maxValue, {timeZone}) : undefined;
 
-        return <RelativeRangeDatePicker {...props} minValue={minValue} maxValue={maxValue} />;
+        return (
+            <RelativeRangeDatePicker
+                {...props}
+                minValue={minValue}
+                maxValue={maxValue}
+                allowNullableValues
+                withPresets
+                presetTabs={DEFAULT_RANGE_DATE_PICKER_PRESET}
+            />
+        );
     },
     args: {
         onUpdate: (res, timeZone) => {
diff --git a/src/components/RelativeRangeDatePicker/components/PickerDialog/PickerDoc.tsx b/src/components/RelativeRangeDatePicker/components/PickerDialog/PickerDoc.tsx
index 168b43d3..4d0f6765 100644
--- a/src/components/RelativeRangeDatePicker/components/PickerDialog/PickerDoc.tsx
+++ b/src/components/RelativeRangeDatePicker/components/PickerDialog/PickerDoc.tsx
@@ -78,7 +78,7 @@ function DocContent({size, docs, onStartUpdate, onEndUpdate}: DocContentProps) {
                         size={isMobile ? 'l' : getButtonSizeForInput(size)}
                         onClick={() => onStartUpdate(item.from)}
                     >
-                        {item.from}
+                        {item?.from}
                     </Button>
                 ),
             },
@@ -90,7 +90,7 @@ function DocContent({size, docs, onStartUpdate, onEndUpdate}: DocContentProps) {
                 template: (item) => (
                     <Button
                         size={isMobile ? 'l' : getButtonSizeForInput(size)}
-                        onClick={() => onEndUpdate(item.to)}
+                        onClick={() => onEndUpdate(item?.to)}
                     >
                         {item.to}
                     </Button>
@@ -155,8 +155,8 @@ interface PresetsDocProps {
     className?: string;
     size?: 's' | 'm' | 'l' | 'xl';
     docs?: Preset[];
-    onStartUpdate: (start: string) => void;
-    onEndUpdate: (end: string) => void;
+    onStartUpdate: (start: string | null) => void;
+    onEndUpdate: (end: string | null) => void;
 }
 
 export function PickerDoc({docs = data, ...props}: PresetsDocProps) {
diff --git a/src/components/RelativeRangeDatePicker/components/PickerDialog/PickerForm.tsx b/src/components/RelativeRangeDatePicker/components/PickerDialog/PickerForm.tsx
index a3b94150..ee19b27b 100644
--- a/src/components/RelativeRangeDatePicker/components/PickerDialog/PickerForm.tsx
+++ b/src/components/RelativeRangeDatePicker/components/PickerDialog/PickerForm.tsx
@@ -77,10 +77,12 @@ export function PickerForm(
                         size={props.size}
                         docs={props.docs}
                         onStartUpdate={(start) => {
-                            state.setStart({type: 'relative', value: start});
+                            state.setStart(
+                                start === null ? null : {type: 'relative', value: start},
+                            );
                         }}
                         onEndUpdate={(end) => {
-                            state.setEnd({type: 'relative', value: end});
+                            state.setEnd(end === null ? null : {type: 'relative', value: end});
                         }}
                     />
                 </div>
diff --git a/src/components/RelativeRangeDatePicker/components/Presets/Presets.tsx b/src/components/RelativeRangeDatePicker/components/Presets/Presets.tsx
index db9bec49..dd89da31 100644
--- a/src/components/RelativeRangeDatePicker/components/Presets/Presets.tsx
+++ b/src/components/RelativeRangeDatePicker/components/Presets/Presets.tsx
@@ -83,7 +83,7 @@ export const SIZE_TO_ITEM_HEIGHT = {
 interface PresetsListProps {
     size?: 's' | 'm' | 'l' | 'xl';
     presets: Preset[];
-    onChoosePreset: (start: string, end: string) => void;
+    onChoosePreset: (start: string | null, end: string | null) => void;
 }
 function PresetsList({presets, onChoosePreset, size = 'm'}: PresetsListProps) {
     const ref = React.useRef<List<Preset>>(null);
@@ -122,7 +122,7 @@ function PresetsList({presets, onChoosePreset, size = 'm'}: PresetsListProps) {
             renderItem={(item) => item.title}
             itemHeight={SIZE_TO_ITEM_HEIGHT[size]}
             onItemClick={(item) => {
-                onChoosePreset(item.from, item.to);
+                onChoosePreset(item?.from, item?.to);
             }}
         />
     );
diff --git a/src/components/RelativeRangeDatePicker/components/Presets/utils.ts b/src/components/RelativeRangeDatePicker/components/Presets/utils.ts
index 7fa45408..823a5456 100644
--- a/src/components/RelativeRangeDatePicker/components/Presets/utils.ts
+++ b/src/components/RelativeRangeDatePicker/components/Presets/utils.ts
@@ -32,9 +32,13 @@ const countUnit = {
     y: 'Last {count} year',
 } as const;
 
-export function getPresetTitle(start: string, end: string, presets: Preset[] = allPresets) {
-    const startText = start.replace(/\s+/g, '');
-    const endText = end.replace(/\s+/g, '');
+export function getPresetTitle(
+    start?: string | null,
+    end?: string | null,
+    presets: Preset[] = allPresets,
+) {
+    const startText = start?.replace(/\s+/g, '') ?? start;
+    const endText = end?.replace(/\s+/g, '') ?? end;
 
     for (const preset of presets) {
         if (preset.from === startText && preset.to === endText) {
@@ -43,7 +47,7 @@ export function getPresetTitle(start: string, end: string, presets: Preset[] = a
     }
 
     if (end === 'now') {
-        const match = lastRe.exec(startText);
+        const match = lastRe.exec(startText || '');
         if (match) {
             const [, count, unit] = match;
             if (isDateUnit(unit)) {
@@ -65,15 +69,11 @@ export function filterPresets(presets: Preset[], minValue?: DateTime) {
         const from = dateTimeParse(preset.from);
         const to = dateTimeParse(preset.to, {roundUp: true});
 
-        if (!from || !to) {
+        if (to?.isBefore(from)) {
             return false;
         }
 
-        if (to.isBefore(from)) {
-            return false;
-        }
-
-        if (minValue && from.isBefore(minValue)) {
+        if (minValue && from?.isBefore(minValue)) {
             return false;
         }
 
diff --git a/src/components/RelativeRangeDatePicker/utils.ts b/src/components/RelativeRangeDatePicker/utils.ts
index 791f115d..ec9fcd4b 100644
--- a/src/components/RelativeRangeDatePicker/utils.ts
+++ b/src/components/RelativeRangeDatePicker/utils.ts
@@ -34,6 +34,26 @@ interface GetDefaultTitleArgs {
     format?: string;
     presets?: Preset[];
 }
+
+const isPresetValue = (value: RangeValue<Value | null> | null) => {
+    if (!value) {
+        return null;
+    }
+    let start, end;
+    if (value.start === null) {
+        start = null;
+    }
+    if (value.start?.type === 'relative') {
+        start = value.start?.value || '';
+    }
+    if (value.end === null) {
+        end = null;
+    }
+    if (value.end?.type === 'relative') {
+        end = value.end?.value || '';
+    }
+    return {start, end};
+};
 export function getDefaultTitle({
     value,
     timeZone,
@@ -62,12 +82,9 @@ export function getDefaultTitle({
                 : dateTimeParse(value.end.value, {timeZone, roundUp: true})?.format(format) ?? '';
     }
 
-    if (
-        !alwaysShowAsAbsolute &&
-        value.start?.type === 'relative' &&
-        value.end?.type === 'relative'
-    ) {
-        return `${getPresetTitle(value.start.value, value.end.value, presets)}`;
+    const presetSearch = isPresetValue(value);
+    if (!alwaysShowAsAbsolute && presetSearch) {
+        return `${getPresetTitle(presetSearch.start, presetSearch.end, presets)}`;
     }
 
     const delimiter = ' — ';

From 48e74cc8bb506e05d7e91c62f5d37cfb69009172 Mon Sep 17 00:00:00 2001
From: skiffcmc <skiffcmc@yandex-team.ru>
Date: Mon, 26 May 2025 09:30:13 +0300
Subject: [PATCH 3/5] feat(RelativeRangeDatePicker): [ISSUE-186]fix absolute
 values handling

---
 .../RelativeRangeDatePiker.stories.tsx        | 14 +++-------
 .../components/Control/Control.tsx            |  3 ++-
 .../components/PickerDialog/PickerDoc.tsx     |  4 +--
 .../components/PickerDialog/PickerForm.tsx    |  1 +
 .../components/Presets/Presets.tsx            |  7 ++++-
 .../components/Presets/utils.ts               | 27 ++++++++++++++++---
 .../RelativeRangeDatePicker/utils.ts          | 12 ++++++---
 7 files changed, 47 insertions(+), 21 deletions(-)

diff --git a/src/components/RelativeRangeDatePicker/__stories__/RelativeRangeDatePiker.stories.tsx b/src/components/RelativeRangeDatePicker/__stories__/RelativeRangeDatePiker.stories.tsx
index 0d35c45d..6f27b08e 100644
--- a/src/components/RelativeRangeDatePicker/__stories__/RelativeRangeDatePiker.stories.tsx
+++ b/src/components/RelativeRangeDatePicker/__stories__/RelativeRangeDatePiker.stories.tsx
@@ -63,16 +63,7 @@ export const Default = {
         const minValue = props.minValue ? dateTimeParse(props.minValue, {timeZone}) : undefined;
         const maxValue = props.maxValue ? dateTimeParse(props.maxValue, {timeZone}) : undefined;
 
-        return (
-            <RelativeRangeDatePicker
-                {...props}
-                minValue={minValue}
-                maxValue={maxValue}
-                allowNullableValues
-                withPresets
-                presetTabs={DEFAULT_RANGE_DATE_PICKER_PRESET}
-            />
-        );
+        return <RelativeRangeDatePicker {...props} minValue={minValue} maxValue={maxValue} />;
     },
     args: {
         onUpdate: (res, timeZone) => {
@@ -97,6 +88,9 @@ export const Default = {
             });
         },
         style: {width: 326},
+        allowNullableValues: true,
+        withPresets: true,
+        presetTabs: DEFAULT_RANGE_DATE_PICKER_PRESET,
     },
     argTypes: {
         minValue: {
diff --git a/src/components/RelativeRangeDatePicker/components/Control/Control.tsx b/src/components/RelativeRangeDatePicker/components/Control/Control.tsx
index bbd16770..a1b4df14 100644
--- a/src/components/RelativeRangeDatePicker/components/Control/Control.tsx
+++ b/src/components/RelativeRangeDatePicker/components/Control/Control.tsx
@@ -44,7 +44,7 @@ export const Control = React.forwardRef<HTMLInputElement, ControlProps>(
         },
         ref,
     ) => {
-        const {alwaysShowAsAbsolute, presetTabs, getRangeTitle} = props;
+        const {alwaysShowAsAbsolute, presetTabs, getRangeTitle, allowNullableValues} = props;
         const format = props.format || 'L';
 
         const text = React.useMemo(
@@ -55,6 +55,7 @@ export const Control = React.forwardRef<HTMLInputElement, ControlProps>(
                           value: state.value,
                           timeZone: state.timeZone,
                           alwaysShowAsAbsolute,
+                          allowNullableValues,
                           format,
                           presets: presetTabs?.flatMap(({presets}) => presets),
                       }),
diff --git a/src/components/RelativeRangeDatePicker/components/PickerDialog/PickerDoc.tsx b/src/components/RelativeRangeDatePicker/components/PickerDialog/PickerDoc.tsx
index 4d0f6765..31d81995 100644
--- a/src/components/RelativeRangeDatePicker/components/PickerDialog/PickerDoc.tsx
+++ b/src/components/RelativeRangeDatePicker/components/PickerDialog/PickerDoc.tsx
@@ -78,7 +78,7 @@ function DocContent({size, docs, onStartUpdate, onEndUpdate}: DocContentProps) {
                         size={isMobile ? 'l' : getButtonSizeForInput(size)}
                         onClick={() => onStartUpdate(item.from)}
                     >
-                        {item?.from}
+                        {item.from}
                     </Button>
                 ),
             },
@@ -90,7 +90,7 @@ function DocContent({size, docs, onStartUpdate, onEndUpdate}: DocContentProps) {
                 template: (item) => (
                     <Button
                         size={isMobile ? 'l' : getButtonSizeForInput(size)}
-                        onClick={() => onEndUpdate(item?.to)}
+                        onClick={() => onEndUpdate(item.to)}
                     >
                         {item.to}
                     </Button>
diff --git a/src/components/RelativeRangeDatePicker/components/PickerDialog/PickerForm.tsx b/src/components/RelativeRangeDatePicker/components/PickerDialog/PickerForm.tsx
index ee19b27b..a88fdf20 100644
--- a/src/components/RelativeRangeDatePicker/components/PickerDialog/PickerForm.tsx
+++ b/src/components/RelativeRangeDatePicker/components/PickerDialog/PickerForm.tsx
@@ -147,6 +147,7 @@ export function PickerForm(
                         }
                     }}
                     minValue={props.minValue}
+                    allowNullableValues={props.allowNullableValues}
                     className={b('presets')}
                 />
             ) : null}
diff --git a/src/components/RelativeRangeDatePicker/components/Presets/Presets.tsx b/src/components/RelativeRangeDatePicker/components/Presets/Presets.tsx
index dd89da31..d7d5fe00 100644
--- a/src/components/RelativeRangeDatePicker/components/Presets/Presets.tsx
+++ b/src/components/RelativeRangeDatePicker/components/Presets/Presets.tsx
@@ -22,6 +22,7 @@ export interface PresetProps {
     minValue?: DateTime;
     size?: 's' | 'm' | 'l' | 'xl';
     presetTabs?: PresetTab[];
+    allowNullableValues?: boolean;
 }
 export function Presets({
     className,
@@ -30,9 +31,13 @@ export function Presets({
     withTime,
     onChoosePreset,
     presetTabs,
+    allowNullableValues,
 }: PresetProps) {
     const tabs = React.useMemo(() => {
-        return filterPresetTabs(presetTabs ?? getDefaultPresetTabs({withTime}), {minValue});
+        return filterPresetTabs(
+            presetTabs ?? getDefaultPresetTabs({withTime, allowNullableValues}),
+            {minValue, allowNullableValues},
+        );
     }, [withTime, minValue, presetTabs]);
 
     const [activeTabId, setActiveTab] = React.useState(tabs[0]?.id);
diff --git a/src/components/RelativeRangeDatePicker/components/Presets/utils.ts b/src/components/RelativeRangeDatePicker/components/Presets/utils.ts
index 823a5456..1c9a3825 100644
--- a/src/components/RelativeRangeDatePicker/components/Presets/utils.ts
+++ b/src/components/RelativeRangeDatePicker/components/Presets/utils.ts
@@ -45,6 +45,12 @@ export function getPresetTitle(
             return preset.title;
         }
     }
+    if (!start) {
+        return `${i18n('To')}: ${endText}`;
+    }
+    if (!end) {
+        return `${i18n('From')}: ${startText}`;
+    }
 
     if (end === 'now') {
         const match = lastRe.exec(startText || '');
@@ -64,11 +70,19 @@ function isDateUnit(value: string): value is 's' | 'm' | 'h' | 'd' | 'w' | 'M' |
     return ['s', 'm', 'h', 'd', 'w', 'M', 'y'].includes(value);
 }
 
-export function filterPresets(presets: Preset[], minValue?: DateTime) {
+export function filterPresets(
+    presets: Preset[],
+    minValue?: DateTime,
+    allowNullableValues?: boolean,
+) {
     return presets.filter((preset) => {
         const from = dateTimeParse(preset.from);
         const to = dateTimeParse(preset.to, {roundUp: true});
 
+        if (!allowNullableValues && (!from || !to)) {
+            return false;
+        }
+
         if (to?.isBefore(from)) {
             return false;
         }
@@ -90,9 +104,11 @@ export interface PresetTab {
 export function getDefaultPresetTabs({
     withTime,
     minValue,
+    allowNullableValues,
 }: {
     minValue?: DateTime;
     withTime?: boolean;
+    allowNullableValues?: boolean;
 }) {
     const tabs: PresetTab[] = [];
 
@@ -105,7 +121,7 @@ export function getDefaultPresetTabs({
     if (withTime) {
         mainPresets.unshift(...DEFAULT_TIME_PRESETS);
     }
-    mainTab.presets = filterPresets(mainPresets, minValue);
+    mainTab.presets = filterPresets(mainPresets, minValue, allowNullableValues);
 
     if (mainTab.presets.length > 0) {
         tabs.push(mainTab);
@@ -124,9 +140,12 @@ export function getDefaultPresetTabs({
     return tabs;
 }
 
-export function filterPresetTabs(tabs: PresetTab[], {minValue}: {minValue?: DateTime} = {}) {
+export function filterPresetTabs(
+    tabs: PresetTab[],
+    {minValue, allowNullableValues}: {minValue?: DateTime; allowNullableValues?: boolean} = {},
+) {
     return tabs.reduce<PresetTab[]>((acc, tab) => {
-        const presets = filterPresets(tab.presets, minValue);
+        const presets = filterPresets(tab.presets, minValue, allowNullableValues);
         if (presets.length) {
             acc.push({
                 ...tab,
diff --git a/src/components/RelativeRangeDatePicker/utils.ts b/src/components/RelativeRangeDatePicker/utils.ts
index ec9fcd4b..0d762120 100644
--- a/src/components/RelativeRangeDatePicker/utils.ts
+++ b/src/components/RelativeRangeDatePicker/utils.ts
@@ -31,12 +31,17 @@ interface GetDefaultTitleArgs {
     value: RangeValue<Value | null> | null;
     timeZone: string;
     alwaysShowAsAbsolute?: boolean;
+    allowNullableValues?: boolean;
     format?: string;
     presets?: Preset[];
 }
 
-const isPresetValue = (value: RangeValue<Value | null> | null) => {
-    if (!value) {
+const isPresetValue = (value: RangeValue<Value | null> | null, allowNullableValues?: boolean) => {
+    if (!value || value.start?.type === 'absolute' || value.end?.type === 'absolute') {
+        return null;
+    }
+    if (!allowNullableValues && (value.start === null || value.end === null)) {
+        // we can't get here with no nullable values allowed but just in case...
         return null;
     }
     let start, end;
@@ -58,6 +63,7 @@ export function getDefaultTitle({
     value,
     timeZone,
     alwaysShowAsAbsolute,
+    allowNullableValues,
     format = 'L',
     presets,
 }: GetDefaultTitleArgs) {
@@ -82,7 +88,7 @@ export function getDefaultTitle({
                 : dateTimeParse(value.end.value, {timeZone, roundUp: true})?.format(format) ?? '';
     }
 
-    const presetSearch = isPresetValue(value);
+    const presetSearch = isPresetValue(value, allowNullableValues);
     if (!alwaysShowAsAbsolute && presetSearch) {
         return `${getPresetTitle(presetSearch.start, presetSearch.end, presets)}`;
     }

From 502ee3acb332256613bda94a90051ff7cdfd1e06 Mon Sep 17 00:00:00 2001
From: skiffcmc <skiffcmc@yandex-team.ru>
Date: Tue, 1 Jul 2025 10:43:54 +0300
Subject: [PATCH 4/5] feat(RelativeRangeDatePicker): [ISSUE-186]fix absolute
 values handling

---
 .../RelativeRangeDatePiker.stories.tsx        | 26 ++++++++++++++++---
 .../components/Presets/Presets.tsx            |  2 +-
 .../components/Presets/utils.ts               | 14 +++++-----
 3 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/src/components/RelativeRangeDatePicker/__stories__/RelativeRangeDatePiker.stories.tsx b/src/components/RelativeRangeDatePicker/__stories__/RelativeRangeDatePiker.stories.tsx
index 6f27b08e..71d7136a 100644
--- a/src/components/RelativeRangeDatePicker/__stories__/RelativeRangeDatePiker.stories.tsx
+++ b/src/components/RelativeRangeDatePicker/__stories__/RelativeRangeDatePiker.stories.tsx
@@ -62,8 +62,19 @@ export const Default = {
         const timeZone = props.timeZone;
         const minValue = props.minValue ? dateTimeParse(props.minValue, {timeZone}) : undefined;
         const maxValue = props.maxValue ? dateTimeParse(props.maxValue, {timeZone}) : undefined;
+        let presetTabs;
+        if (props.withPresets) {
+            presetTabs = DEFAULT_RANGE_DATE_PICKER_PRESET;
+        }
 
-        return <RelativeRangeDatePicker {...props} minValue={minValue} maxValue={maxValue} />;
+        return (
+            <RelativeRangeDatePicker
+                {...props}
+                minValue={minValue}
+                maxValue={maxValue}
+                presetTabs={presetTabs}
+            />
+        );
     },
     args: {
         onUpdate: (res, timeZone) => {
@@ -88,9 +99,6 @@ export const Default = {
             });
         },
         style: {width: 326},
-        allowNullableValues: true,
-        withPresets: true,
-        presetTabs: DEFAULT_RANGE_DATE_PICKER_PRESET,
     },
     argTypes: {
         minValue: {
@@ -110,6 +118,16 @@ export const Default = {
             },
         },
         timeZone: timeZoneControl,
+        allowNullableValues: {
+            control: {
+                type: 'boolean',
+            },
+        },
+        withPresets: {
+            control: {
+                type: 'boolean',
+            },
+        },
     },
 } satisfies Story;
 
diff --git a/src/components/RelativeRangeDatePicker/components/Presets/Presets.tsx b/src/components/RelativeRangeDatePicker/components/Presets/Presets.tsx
index d7d5fe00..f3d7d5f8 100644
--- a/src/components/RelativeRangeDatePicker/components/Presets/Presets.tsx
+++ b/src/components/RelativeRangeDatePicker/components/Presets/Presets.tsx
@@ -127,7 +127,7 @@ function PresetsList({presets, onChoosePreset, size = 'm'}: PresetsListProps) {
             renderItem={(item) => item.title}
             itemHeight={SIZE_TO_ITEM_HEIGHT[size]}
             onItemClick={(item) => {
-                onChoosePreset(item?.from, item?.to);
+                onChoosePreset(item.from, item.to);
             }}
         />
     );
diff --git a/src/components/RelativeRangeDatePicker/components/Presets/utils.ts b/src/components/RelativeRangeDatePicker/components/Presets/utils.ts
index 1c9a3825..176acdd9 100644
--- a/src/components/RelativeRangeDatePicker/components/Presets/utils.ts
+++ b/src/components/RelativeRangeDatePicker/components/Presets/utils.ts
@@ -33,8 +33,8 @@ const countUnit = {
 } as const;
 
 export function getPresetTitle(
-    start?: string | null,
-    end?: string | null,
+    start: string | null,
+    end: string | null,
     presets: Preset[] = allPresets,
 ) {
     const startText = start?.replace(/\s+/g, '') ?? start;
@@ -45,15 +45,15 @@ export function getPresetTitle(
             return preset.title;
         }
     }
-    if (!start) {
+    if (!startText) {
         return `${i18n('To')}: ${endText}`;
     }
-    if (!end) {
+    if (!endText) {
         return `${i18n('From')}: ${startText}`;
     }
 
-    if (end === 'now') {
-        const match = lastRe.exec(startText || '');
+    if (endText === 'now') {
+        const match = lastRe.exec(startText);
         if (match) {
             const [, count, unit] = match;
             if (isDateUnit(unit)) {
@@ -130,7 +130,7 @@ export function getDefaultPresetTabs({
     const otherTab: PresetTab = {
         id: 'other',
         title: i18n('Other'),
-        presets: filterPresets(DEFAULT_OTHERS_PRESETS, minValue),
+        presets: filterPresets(DEFAULT_OTHERS_PRESETS, minValue, allowNullableValues),
     };
 
     if (otherTab.presets.length > 0) {

From 0807e6afe4b264a891ff960f23598aeda6676f5e Mon Sep 17 00:00:00 2001
From: skiffcmc <skiffcmc@yandex-team.ru>
Date: Tue, 1 Jul 2025 12:00:50 +0300
Subject: [PATCH 5/5] feat(RelativeRangeDatePicker): [ISSUE-186]utils changes

---
 src/components/RelativeRangeDatePicker/utils.ts | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/src/components/RelativeRangeDatePicker/utils.ts b/src/components/RelativeRangeDatePicker/utils.ts
index 0d762120..5a00afad 100644
--- a/src/components/RelativeRangeDatePicker/utils.ts
+++ b/src/components/RelativeRangeDatePicker/utils.ts
@@ -44,18 +44,13 @@ const isPresetValue = (value: RangeValue<Value | null> | null, allowNullableValu
         // we can't get here with no nullable values allowed but just in case...
         return null;
     }
-    let start, end;
-    if (value.start === null) {
-        start = null;
-    }
+    let start = null;
+    let end = null;
     if (value.start?.type === 'relative') {
-        start = value.start?.value || '';
-    }
-    if (value.end === null) {
-        end = null;
+        start = value.start.value;
     }
     if (value.end?.type === 'relative') {
-        end = value.end?.value || '';
+        end = value.end.value;
     }
     return {start, end};
 };