@genspectrum/dashboard-components 0.13.7 → 0.14.2

package/src/preact/dateRangeSelector/computeInitialValues.spec.ts

@@ -18,8 +18,8 @@ const dateRangeOptions = [
 ];
 
 describe('computeInitialValues', () => {
-    it('should compute for initial value if initial "from" and "to" are unset', () => {
-        const result = computeInitialValues(fromToOption, undefined, undefined, earliestDate, dateRangeOptions);
+    it('should compute initial value if value is dateRangeOption label', () => {
+        const result = computeInitialValues(fromToOption, earliestDate, dateRangeOptions);
 
         expect(result.initialSelectedDateRange).toEqual(fromToOption);
         expectDateMatches(result.initialSelectedDateFrom, new Date(dateFromOptionValue));
@@ -27,7 +27,7 @@ describe('computeInitialValues', () => {
     });
 
     it('should use today as "dateTo" if it is unset in selected option', () => {
-        const result = computeInitialValues(fromOption, undefined, undefined, earliestDate, dateRangeOptions);
+        const result = computeInitialValues(fromOption, earliestDate, dateRangeOptions);
 
         expect(result.initialSelectedDateRange).toEqual(fromOption);
         expectDateMatches(result.initialSelectedDateFrom, new Date(dateFromOptionValue));
@@ -35,7 +35,7 @@ describe('computeInitialValues', () => {
     });
 
     it('should use earliest date as "dateFrom" if it is unset in selected option', () => {
-        const result = computeInitialValues(toOption, undefined, undefined, earliestDate, dateRangeOptions);
+        const result = computeInitialValues(toOption, earliestDate, dateRangeOptions);
 
         expect(result.initialSelectedDateRange).toEqual(toOption);
         expectDateMatches(result.initialSelectedDateFrom, new Date(earliestDate));
@@ -43,7 +43,7 @@ describe('computeInitialValues', () => {
     });
 
     it('should fall back to full range if initial value is not set', () => {
-        const result = computeInitialValues(undefined, undefined, undefined, earliestDate, dateRangeOptions);
+        const result = computeInitialValues(undefined, earliestDate, dateRangeOptions);
 
         expect(result.initialSelectedDateRange).toBeUndefined();
         expectDateMatches(result.initialSelectedDateFrom, new Date(earliestDate));
@@ -51,39 +51,46 @@ describe('computeInitialValues', () => {
     });
 
     it('should throw when initial value is unknown', () => {
-        expect(() =>
-            computeInitialValues('not a known value', undefined, undefined, earliestDate, dateRangeOptions),
-        ).toThrowError(/Invalid initialValue "not a known value", It must be one of/);
+        expect(() => computeInitialValues('not a known value', earliestDate, dateRangeOptions)).toThrowError(
+            /Invalid value "not a known value", It must be one of/,
+        );
     });
 
     it('should throw when initial value is set but no options are provided', () => {
-        expect(() => computeInitialValues('not a known value', undefined, undefined, earliestDate, [])).toThrowError(
+        expect(() => computeInitialValues('not a known value', earliestDate, [])).toThrowError(
             /There are no selectable options/,
         );
     });
 
-    it('should overwrite initial value if initial "from" is set', () => {
+    it('should select from date until today if only dateFrom is given', () => {
         const initialDateFrom = '2020-01-01';
-        const result = computeInitialValues(fromOption, initialDateFrom, undefined, earliestDate, dateRangeOptions);
+        const result = computeInitialValues({ dateFrom: initialDateFrom }, earliestDate, dateRangeOptions);
 
         expect(result.initialSelectedDateRange).toBeUndefined();
         expectDateMatches(result.initialSelectedDateFrom, new Date(initialDateFrom));
         expectDateMatches(result.initialSelectedDateTo, today);
     });
 
-    it('should overwrite initial value if initial "to" is set', () => {
+    it('should select from earliest date until date if only dateTo is given', () => {
         const initialDateTo = '2020-01-01';
-        const result = computeInitialValues(fromOption, undefined, initialDateTo, earliestDate, dateRangeOptions);
+        const result = computeInitialValues({ dateTo: initialDateTo }, earliestDate, dateRangeOptions);
 
         expect(result.initialSelectedDateRange).toBeUndefined();
         expectDateMatches(result.initialSelectedDateFrom, new Date(earliestDate));
         expectDateMatches(result.initialSelectedDateTo, new Date(initialDateTo));
     });
 
-    it('should overwrite initial value if initial "to" and "from" are set', () => {
+    it('should select date range is dateFrom and dateTo are given', () => {
         const initialDateFrom = '2020-01-01';
         const initialDateTo = '2022-01-01';
-        const result = computeInitialValues(fromOption, initialDateFrom, initialDateTo, earliestDate, dateRangeOptions);
+        const result = computeInitialValues(
+            {
+                dateFrom: initialDateFrom,
+                dateTo: initialDateTo,
+            },
+            earliestDate,
+            dateRangeOptions,
+        );
 
         expect(result.initialSelectedDateRange).toBeUndefined();
         expectDateMatches(result.initialSelectedDateFrom, new Date(initialDateFrom));
@@ -93,7 +100,14 @@ describe('computeInitialValues', () => {
     it('should set initial "to" to "from" if "from" is after "to"', () => {
         const initialDateFrom = '2020-01-01';
         const initialDateTo = '1900-01-01';
-        const result = computeInitialValues(undefined, initialDateFrom, initialDateTo, earliestDate, dateRangeOptions);
+        const result = computeInitialValues(
+            {
+                dateFrom: initialDateFrom,
+                dateTo: initialDateTo,
+            },
+            earliestDate,
+            dateRangeOptions,
+        );
 
         expect(result.initialSelectedDateRange).toBeUndefined();
         expectDateMatches(result.initialSelectedDateFrom, new Date(initialDateFrom));
@@ -101,14 +115,14 @@ describe('computeInitialValues', () => {
     });
 
     it('should throw if initial "from" is not a valid date', () => {
-        expect(() => computeInitialValues(undefined, 'not a date', undefined, earliestDate, [])).toThrowError(
-            'Invalid initialDateFrom',
+        expect(() => computeInitialValues({ dateFrom: 'not a date' }, earliestDate, [])).toThrowError(
+            'Invalid value.dateFrom',
         );
     });
 
     it('should throw if initial "to" is not a valid date', () => {
-        expect(() => computeInitialValues(undefined, undefined, 'not a date', earliestDate, [])).toThrowError(
-            'Invalid initialDateTo',
+        expect(() => computeInitialValues({ dateTo: 'not a date' }, earliestDate, [])).toThrowError(
+            'Invalid value.dateTo',
         );
     });
 

package/src/preact/dateRangeSelector/computeInitialValues.ts

@@ -1,11 +1,9 @@
-import { type DateRangeOption } from './dateRangeOption';
+import { type DateRangeOption, type DateRangeValue } from './dateRangeOption';
 import { getDatesForSelectorValue, getSelectableOptions } from './selectableOptions';
 import { UserFacingError } from '../components/error-display';
 
 export function computeInitialValues(
-    initialValue: string | undefined,
-    initialDateFrom: string | undefined,
-    initialDateTo: string | undefined,
+    value: DateRangeValue | undefined,
     earliestDate: string,
     dateRangeOptions: DateRangeOption[],
 ): {
@@ -13,20 +11,26 @@ export function computeInitialValues(
     initialSelectedDateFrom: Date;
     initialSelectedDateTo: Date;
 } {
-    if (isUndefinedOrEmpty(initialDateFrom) && isUndefinedOrEmpty(initialDateTo)) {
+    if (value === undefined) {
+        const { dateFrom, dateTo } = getDatesForSelectorValue(undefined, dateRangeOptions, earliestDate);
+        return {
+            initialSelectedDateRange: undefined,
+            initialSelectedDateFrom: dateFrom,
+            initialSelectedDateTo: dateTo,
+        };
+    }
+
+    if (typeof value === 'string') {
         const selectableOptions = getSelectableOptions(dateRangeOptions);
-        const initialSelectedDateRange = selectableOptions.find((option) => option.value === initialValue)?.value;
+        const initialSelectedDateRange = selectableOptions.find((option) => option.value === value)?.value;
 
-        if (initialValue !== undefined && initialSelectedDateRange === undefined) {
+        if (initialSelectedDateRange === undefined) {
             if (selectableOptions.length === 0) {
-                throw new UserFacingError(
-                    'Invalid initialValue',
-                    'There are no selectable options, but initialValue is set.',
-                );
+                throw new UserFacingError('Invalid value', 'There are no selectable options, but value is set.');
             }
             throw new UserFacingError(
-                'Invalid initialValue',
-                `Invalid initialValue "${initialValue}", It must be one of ${selectableOptions.map((option) => `'${option.value}'`).join(', ')}`,
+                'Invalid value',
+                `Invalid value "${value}", It must be one of ${selectableOptions.map((option) => `'${option.value}'`).join(', ')}`,
             );
         }
 
@@ -39,21 +43,21 @@ export function computeInitialValues(
         };
     }
 
-    const initialSelectedDateFrom = isUndefinedOrEmpty(initialDateFrom)
-        ? new Date(earliestDate)
-        : new Date(initialDateFrom);
-    let initialSelectedDateTo = isUndefinedOrEmpty(initialDateTo) ? new Date() : new Date(initialDateTo);
+    const { dateFrom, dateTo } = value;
+
+    const initialSelectedDateFrom = isUndefinedOrEmpty(dateFrom) ? new Date(earliestDate) : new Date(dateFrom);
+    let initialSelectedDateTo = isUndefinedOrEmpty(dateTo) ? new Date() : new Date(dateTo);
 
     if (isNaN(initialSelectedDateFrom.getTime())) {
         throw new UserFacingError(
-            'Invalid initialDateFrom',
-            `Invalid initialDateFrom "${initialDateFrom}", It must be of the format YYYY-MM-DD`,
+            'Invalid value.dateFrom',
+            `Invalid value.dateFrom "${dateFrom}", It must be of the format YYYY-MM-DD`,
         );
     }
     if (isNaN(initialSelectedDateTo.getTime())) {
         throw new UserFacingError(
-            'Invalid initialDateTo',
-            `Invalid initialDateTo "${initialDateTo}", It must be of the format YYYY-MM-DD`,
+            'Invalid value.dateTo',
+            `Invalid value.dateTo "${dateTo}", It must be of the format YYYY-MM-DD`,
         );
     }
 

package/src/preact/dateRangeSelector/date-range-selector.stories.tsx

@@ -2,11 +2,12 @@ import { type Meta, type PreactRenderer, type StoryObj } from '@storybook/preact
 import { expect, fn, userEvent, waitFor, within } from '@storybook/test';
 import type { StepFunction } from '@storybook/types';
 import dayjs from 'dayjs/esm';
+import { useEffect, useRef, useState } from 'preact/hooks';
 
 import { DateRangeSelector, type DateRangeSelectorProps } from './date-range-selector';
 import { previewHandles } from '../../../.storybook/preview';
 import { LAPIS_URL } from '../../constants';
-import { LapisUrlContext } from '../LapisUrlContext';
+import { LapisUrlContextProvider } from '../LapisUrlContext';
 import { dateRangeOptionPresets } from './dateRangeOption';
 import { expectInvalidAttributesErrorMessage } from '../shared/stories/expectErrorMessage';
 
@@ -28,11 +29,10 @@ const meta: Meta<DateRangeSelectorProps> = {
         fetchMock: {},
     },
     argTypes: {
-        initialValue: {
+        value: {
             control: {
-                type: 'select',
+                type: 'object',
             },
-            options: [dateRangeOptionPresets.lastMonth.label, dateRangeOptionPresets.allTimes.label, 'CustomDateRange'],
         },
         dateRangeOptions: {
             control: {
@@ -53,21 +53,19 @@ const meta: Meta<DateRangeSelectorProps> = {
     args: {
         dateRangeOptions: [dateRangeOptionPresets.lastMonth, dateRangeOptionPresets.allTimes, customDateRange],
         earliestDate,
-        initialValue: dateRangeOptionPresets.lastMonth.label,
+        value: undefined,
         lapisDateField: 'aDateColumn',
         width: '100%',
-        initialDateFrom: undefined,
-        initialDateTo: undefined,
     },
 };
 
 export default meta;
 
-export const Primary: StoryObj<DateRangeSelectorProps> = {
+const Primary: StoryObj<DateRangeSelectorProps> = {
     render: (args) => (
-        <LapisUrlContext.Provider value={LAPIS_URL}>
+        <LapisUrlContextProvider value={LAPIS_URL}>
             <DateRangeSelector {...args} />
-        </LapisUrlContext.Provider>
+        </LapisUrlContextProvider>
     ),
 };
 
@@ -75,15 +73,15 @@ export const SetCorrectInitialValues: StoryObj<DateRangeSelectorProps> = {
     ...Primary,
     args: {
         ...Primary.args,
-        initialValue: 'CustomDateRange',
+        value: 'CustomDateRange',
     },
     play: async ({ canvasElement }) => {
         const canvas = within(canvasElement);
 
-        await waitFor(() => {
-            expect(selectField(canvas)).toHaveValue('CustomDateRange');
-            expect(dateFromPicker(canvas)).toHaveValue('2021-01-01');
-            expect(dateToPicker(canvas)).toHaveValue('2021-12-31');
+        await waitFor(async () => {
+            await expect(selectField(canvas)).toHaveValue('CustomDateRange');
+            await expect(dateFromPicker(canvas)).toHaveValue('2021-01-01');
+            await expect(dateToPicker(canvas)).toHaveValue('2021-12-31');
         });
     },
 };
@@ -94,15 +92,15 @@ export const SetCorrectInitialDateFrom: StoryObj<DateRangeSelectorProps> = {
     ...Primary,
     args: {
         ...Primary.args,
-        initialDateFrom,
+        value: { dateFrom: initialDateFrom },
     },
     play: async ({ canvasElement }) => {
         const canvas = within(canvasElement);
 
-        await waitFor(() => {
-            expect(selectField(canvas)).toHaveValue('Custom');
-            expect(dateFromPicker(canvas)).toHaveValue(initialDateFrom);
-            expect(dateToPicker(canvas)).toHaveValue(dayjs().format('YYYY-MM-DD'));
+        await waitFor(async () => {
+            await expect(selectField(canvas)).toHaveValue('Custom');
+            await expect(dateFromPicker(canvas)).toHaveValue(initialDateFrom);
+            await expect(dateToPicker(canvas)).toHaveValue(dayjs().format('YYYY-MM-DD'));
         });
     },
 };
@@ -113,35 +111,39 @@ export const SetCorrectInitialDateTo: StoryObj<DateRangeSelectorProps> = {
     ...Primary,
     args: {
         ...Primary.args,
-        initialDateTo,
+        value: { dateTo: initialDateTo },
     },
     play: async ({ canvasElement }) => {
         const canvas = within(canvasElement);
 
-        await waitFor(() => {
-            expect(selectField(canvas)).toHaveValue('Custom');
-            expect(dateFromPicker(canvas)).toHaveValue(earliestDate);
-            expect(dateToPicker(canvas)).toHaveValue(initialDateTo);
+        await waitFor(async () => {
+            await expect(selectField(canvas)).toHaveValue('Custom');
+            await expect(dateFromPicker(canvas)).toHaveValue(earliestDate);
+            await expect(dateToPicker(canvas)).toHaveValue(initialDateTo);
         });
     },
 };
 
 export const ChangingDateSetsOptionToCustom: StoryObj<DateRangeSelectorProps> = {
     ...Primary,
+    args: {
+        ...Primary.args,
+        value: dateRangeOptionPresets.lastMonth.label,
+    },
     play: async ({ canvasElement, step }) => {
         const { canvas, filterChangedListenerMock, optionChangedListenerMock } = await prepare(canvasElement, step);
 
-        await waitFor(() => {
-            expect(selectField(canvas)).toHaveValue('Last month');
+        await waitFor(async () => {
+            await expect(selectField(canvas)).toHaveValue('Last month');
         });
 
-        step('Change date to custom value', async () => {
+        await step('Change date to custom value', async () => {
             await userEvent.type(dateFromPicker(canvas), '{backspace>12}');
             await userEvent.type(dateFromPicker(canvas), '2000-01-01');
             await userEvent.click(dateToPicker(canvas));
 
-            await waitFor(() => {
-                expect(selectField(canvas)).toHaveValue('Custom');
+            await waitFor(async () => {
+                await expect(selectField(canvas)).toHaveValue('Custom');
             });
 
             await expect(filterChangedListenerMock).toHaveBeenCalledWith(
@@ -165,20 +167,82 @@ export const ChangingDateSetsOptionToCustom: StoryObj<DateRangeSelectorProps> =
     },
 };
 
-export const ChangingDateOption: StoryObj<DateRangeSelectorProps> = {
+export const ChangingTheValueProgrammatically: StoryObj<DateRangeSelectorProps> = {
     ...Primary,
+    render: (args) => {
+        const StatefulWrapper = () => {
+            const [value, setValue] = useState('Last month');
+            const ref = useRef<HTMLDivElement>(null);
+
+            useEffect(() => {
+                ref.current?.addEventListener('gs-date-range-option-changed', (event) => {
+                    setValue((event as CustomEvent).detail);
+                });
+            }, []);
+
+            return (
+                <div ref={ref}>
+                    <LapisUrlContextProvider value={LAPIS_URL}>
+                        <DateRangeSelector {...args} value={value} />
+                    </LapisUrlContextProvider>
+                    <button className='btn' onClick={() => setValue(customDateRange.label)}>
+                        Set to Custom
+                    </button>
+                    <button className='btn' onClick={() => setValue(dateRangeOptionPresets.lastMonth.label)}>
+                        Set to Last month
+                    </button>
+                </div>
+            );
+        };
+
+        return <StatefulWrapper />;
+    },
     play: async ({ canvasElement, step }) => {
         const { canvas, filterChangedListenerMock, optionChangedListenerMock } = await prepare(canvasElement, step);
 
-        await waitFor(() => {
-            expect(selectField(canvas)).toHaveValue('Last month');
+        await waitFor(async () => {
+            await expect(selectField(canvas)).toHaveValue('Last month');
         });
 
-        step('Change date to custom', async () => {
-            await userEvent.selectOptions(selectField(canvas), 'CustomDateRange');
+        await step('Change the value of the component programmatically', async () => {
+            await userEvent.click(canvas.getByRole('button', { name: 'Set to Custom' }));
+            await waitFor(async () => {
+                await expect(selectField(canvas)).toHaveValue(customDateRange.label);
+            });
 
-            await waitFor(() => {
-                expect(selectField(canvas)).toHaveValue('CustomDateRange');
+            await userEvent.click(canvas.getByRole('button', { name: 'Set to Last month' }));
+            await waitFor(async () => {
+                await expect(selectField(canvas)).toHaveValue('Last month');
+            });
+
+            await expect(filterChangedListenerMock).toHaveBeenCalledTimes(0);
+            await expect(optionChangedListenerMock).toHaveBeenCalledTimes(0);
+        });
+
+        await step('Changing the value from within the component is still possible', async () => {
+            await userEvent.selectOptions(selectField(canvas), 'All times');
+            await waitFor(async () => {
+                await expect(selectField(canvas)).toHaveValue('All times');
+            });
+            await expect(filterChangedListenerMock).toHaveBeenCalledTimes(1);
+            await expect(optionChangedListenerMock).toHaveBeenCalledTimes(1);
+        });
+    },
+};
+
+export const ChangingDateOption: StoryObj<DateRangeSelectorProps> = {
+    ...Primary,
+    play: async ({ canvasElement, step }) => {
+        const { canvas, filterChangedListenerMock, optionChangedListenerMock } = await prepare(canvasElement, step);
+
+        await waitFor(async () => {
+            await expect(selectField(canvas)).toHaveValue('Custom');
+        });
+
+        await step('Change date to custom', async () => {
+            await waitFor(async () => {
+                await userEvent.selectOptions(selectField(canvas), 'CustomDateRange');
+                await expect(selectField(canvas)).toHaveValue('CustomDateRange');
             });
 
             await expect(filterChangedListenerMock).toHaveBeenCalledWith(
@@ -203,13 +267,13 @@ export const HandlesInvalidInitialDateFrom: StoryObj<DateRangeSelectorProps> = {
     ...Primary,
     args: {
         ...Primary.args,
-        initialDateFrom: 'not a date',
+        value: { dateFrom: 'not a date' },
     },
     play: async ({ canvasElement }) => {
         const canvas = within(canvasElement);
 
-        await waitFor(() => {
-            expect(canvas.getByText('Oops! Something went wrong.')).toBeVisible();
+        await waitFor(async () => {
+            await expect(canvas.getByText('Oops! Something went wrong.')).toBeVisible();
         });
     },
 };
@@ -221,7 +285,7 @@ export const WithNoDateColumn: StoryObj<DateRangeSelectorProps> = {
         lapisDateField: '',
     },
     play: async ({ canvasElement, step }) => {
-        step('expect error message', async () => {
+        await step('expect error message', async () => {
             await expectInvalidAttributesErrorMessage(canvasElement, 'String must contain at least 1 character(s)');
         });
     },
@@ -231,12 +295,9 @@ async function prepare(canvasElement: HTMLElement, step: StepFunction<PreactRend
     const canvas = within(canvasElement);
 
     const filterChangedListenerMock = fn();
-    await step('Setup event listener mock', async () => {
-        canvasElement.addEventListener('gs-date-range-filter-changed', filterChangedListenerMock);
-    });
-
     const optionChangedListenerMock = fn();
-    await step('Setup event listener mock', async () => {
+    await step('Setup event listener mock', () => {
+        canvasElement.addEventListener('gs-date-range-filter-changed', filterChangedListenerMock);
         canvasElement.addEventListener('gs-date-range-option-changed', optionChangedListenerMock);
     });
 

package/src/preact/dateRangeSelector/date-range-selector.tsx

@@ -1,11 +1,16 @@
 import flatpickr from 'flatpickr';
 import 'flatpickr/dist/flatpickr.min.css';
-import { useEffect, useRef, useState } from 'preact/hooks';
+import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
 import z from 'zod';
 
 import { computeInitialValues } from './computeInitialValues';
 import { toYYYYMMDD } from './dateConversion';
-import { DateRangeOptionChangedEvent, dateRangeOptionSchema, type DateRangeSelectOption } from './dateRangeOption';
+import {
+    DateRangeOptionChangedEvent,
+    dateRangeOptionSchema,
+    type DateRangeSelectOption,
+    dateRangeValueSchema,
+} from './dateRangeOption';
 import { getDatesForSelectorValue, getSelectableOptions } from './selectableOptions';
 import { ErrorBoundary } from '../components/error-boundary';
 import { Select } from '../components/select';
@@ -16,9 +21,7 @@ const customOption = 'Custom';
 const dateRangeSelectorInnerPropsSchema = z.object({
     dateRangeOptions: z.array(dateRangeOptionSchema),
     earliestDate: z.string().date(),
-    initialValue: z.string().optional(),
-    initialDateFrom: z.string().date().optional(),
-    initialDateTo: z.string().date().optional(),
+    value: dateRangeValueSchema.optional(),
     lapisDateField: z.string().min(1),
 });
 
@@ -45,17 +48,12 @@ export const DateRangeSelector = (props: DateRangeSelectorProps) => {
 export const DateRangeSelectorInner = ({
     dateRangeOptions,
     earliestDate = '1900-01-01',
-    initialValue,
+    value,
     lapisDateField,
-    initialDateFrom,
-    initialDateTo,
 }: DateRangeSelectorInnerProps) => {
-    const initialValues = computeInitialValues(
-        initialValue,
-        initialDateFrom,
-        initialDateTo,
-        earliestDate,
-        dateRangeOptions,
+    const initialValues = useMemo(
+        () => computeInitialValues(value, earliestDate, dateRangeOptions),
+        [value, earliestDate, dateRangeOptions],
     );
 
     const fromDatePickerRef = useRef<HTMLInputElement>(null);
@@ -74,6 +72,12 @@ export const DateRangeSelectorInner = ({
     });
 
     useEffect(() => {
+        setSelectedDateRange(initialValues.initialSelectedDateRange);
+        setSelectedDates({
+            dateFrom: initialValues.initialSelectedDateFrom,
+            dateTo: initialValues.initialSelectedDateTo,
+        });
+
         const commonConfig = {
             allowInput: true,
             dateFormat: 'Y-m-d',
@@ -83,7 +87,7 @@ export const DateRangeSelectorInner = ({
             setDateFromPicker(
                 flatpickr(fromDatePickerRef.current, {
                     ...commonConfig,
-                    defaultDate: selectedDates.dateFrom,
+                    defaultDate: initialValues.initialSelectedDateFrom,
                 }),
             );
         }
@@ -92,17 +96,22 @@ export const DateRangeSelectorInner = ({
             setDateToPicker(
                 flatpickr(toDatePickerRef.current, {
                     ...commonConfig,
-                    defaultDate: selectedDates.dateTo,
+                    defaultDate: initialValues.initialSelectedDateTo,
                 }),
             );
         }
 
         return () => {
-            dateFromPicker?.destroy();
-            dateToPicker?.destroy();
+            setDateFromPicker((prev) => {
+                prev?.destroy();
+                return null;
+            });
+            setDateToPicker((prev) => {
+                prev?.destroy();
+                return null;
+            });
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [fromDatePickerRef, toDatePickerRef]);
+    }, [fromDatePickerRef, toDatePickerRef, initialValues]);
 
     const onSelectChange = (value: string) => {
         setSelectedDateRange(value);
@@ -139,7 +148,7 @@ export const DateRangeSelectorInner = ({
         fireFilterChangedEvent();
         fireOptionChangedEvent({
             dateFrom: dateFrom !== undefined ? toYYYYMMDD(dateFrom) : earliestDate,
-            dateTo: toYYYYMMDD(dateTo || new Date())!,
+            dateTo: toYYYYMMDD(dateTo || new Date()),
         });
     };
 
@@ -158,7 +167,7 @@ export const DateRangeSelectorInner = ({
         fireFilterChangedEvent();
         fireOptionChangedEvent({
             dateFrom: dateFrom !== undefined ? toYYYYMMDD(dateFrom) : earliestDate,
-            dateTo: toYYYYMMDD(dateTo || new Date())!,
+            dateTo: toYYYYMMDD(dateTo || new Date()),
         });
     };
 

package/src/preact/dateRangeSelector/dateRangeOption.ts

@@ -22,7 +22,17 @@ export const dateRangeOptionSchema = z.object({
 
 export type DateRangeOption = z.infer<typeof dateRangeOptionSchema>;
 
-export type DateRangeSelectOption = string | { dateFrom: string; dateTo: string };
+export const dateRangeValueSchema = z.union([
+    z.string(),
+    z.object({
+        dateFrom: z.string().date().optional(),
+        dateTo: z.string().date().optional(),
+    }),
+]);
+
+export type DateRangeValue = z.infer<typeof dateRangeValueSchema>;
+
+export type DateRangeSelectOption = Required<DateRangeValue>;
 
 export class DateRangeOptionChangedEvent extends CustomEvent<DateRangeSelectOption> {
     constructor(detail: DateRangeSelectOption) {