feat(RelativeRangeDatePicker): allow null values in relative range presets

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) => {

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) {

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>

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);
             }}
         />
     );

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;
         }
 

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 = ' — ';