[@mantine/dates] DatePicker: Fix date range being stuck in incorrect …

…state when controlled state changes to an empty value (#6092)

packages/@mantine/dates/src/components/DatePicker/DatePicker.story.tsx

@@ -1,6 +1,7 @@
 import 'dayjs/locale/ru';
 
 import React, { useState } from 'react';
+import { Button, Stack } from '@mantine/core';
 import { DatesRangeValue } from '../../types';
 import { DatePicker } from './DatePicker';
 
@@ -22,6 +23,25 @@ export function HideOutsideDates() {
   );
 }
 
+export function RangeCancelled() {
+  const [value, setValue] = useState<[Date | null, Date | null]>([null, null]);
+
+  const handleChange = (val: [Date | null, Date | null]) => {
+    setValue(val);
+  };
+
+  const clearRange = () => {
+    setValue([null, null]);
+  };
+
+  return (
+    <Stack>
+      <DatePicker type="range" value={value} onChange={handleChange} allowSingleDateInRange />
+      <Button onClick={clearRange}>CLEAR</Button>
+    </Stack>
+  );
+}
+
 export function Unstyled() {
   return (
     <div style={{ padding: 40 }}>

packages/@mantine/dates/src/hooks/use-dates-state/use-dates-state.ts

@@ -1,5 +1,5 @@
 import dayjs from 'dayjs';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { DatePickerType, PickerBaseProps } from '../../types';
 import { useUncontrolledDates } from '../use-uncontrolled-dates/use-uncontrolled-dates';
 import { isInRange } from './is-in-range/is-in-range';
@@ -161,6 +161,12 @@ export function useDatesState<Type extends DatePickerType = 'default'>({
 
   const onHoveredDateChange = type === 'range' && pickedDate ? setHoveredDate : () => {};
 
+  useEffect(() => {
+    if (type === 'range' && !_value[0] && !_value[1]) {
+      setPickedDate(null);
+    }
+  }, [value]);
+
   return {
     onDateChange,
     onRootMouseLeave,