From b2d25ef23b827ec2427bf47b343e6dbd66326ed3 Mon Sep 17 00:00:00 2001
From: Maxim Usachev <psywalker09@gmail.com>
Date: Mon, 8 Apr 2024 20:11:30 +0300
Subject: [PATCH] Calendar calendar state context set value can not set null
 value (#6030)

* Fixed the inability to set the null for setValue from CalendarStateContext

* added example in docs of calendar

* added example in storybook

* added test for setting "null" for method setValue

* fixed eslint bug

* fixed eslint bug

* fixed ts error

* review comments

---------

Co-authored-by: Daniel Lu <dl1644@gmail.com>
Co-authored-by: Robert Snow <rsnow@adobe.com>
---
 packages/@react-stately/calendar/src/types.ts |  4 +-
 .../calendar/src/useCalendarState.ts          |  6 +-
 .../react-aria-components/docs/Calendar.mdx   | 49 +++++++++++++++
 .../stories/Calendar.stories.tsx              | 37 ++++++++++-
 .../test/Calendar.test.js                     | 62 ++++++++++++++++++-
 5 files changed, 151 insertions(+), 7 deletions(-)

diff --git a/packages/@react-stately/calendar/src/types.ts b/packages/@react-stately/calendar/src/types.ts
index d115bbfde34..1202ff47b71 100644
--- a/packages/@react-stately/calendar/src/types.ts
+++ b/packages/@react-stately/calendar/src/types.ts
@@ -101,9 +101,9 @@ interface CalendarStateBase {
 
 export interface CalendarState extends CalendarStateBase {
   /** The currently selected date. */
-  readonly value: CalendarDate,
+  readonly value: CalendarDate | null,
   /** Sets the currently selected date. */
-  setValue(value: CalendarDate): void
+  setValue(value: CalendarDate | null): void
 }
 
 export interface RangeCalendarState extends CalendarStateBase {
diff --git a/packages/@react-stately/calendar/src/useCalendarState.ts b/packages/@react-stately/calendar/src/useCalendarState.ts
index f8be57d53e1..a489d99aa76 100644
--- a/packages/@react-stately/calendar/src/useCalendarState.ts
+++ b/packages/@react-stately/calendar/src/useCalendarState.ts
@@ -136,8 +136,12 @@ export function useCalendarState<T extends DateValue = DateValue>(props: Calenda
     setFocusedDate(date);
   }
 
-  function setValue(newValue: CalendarDate) {
+  function setValue(newValue: CalendarDate | null) {
     if (!props.isDisabled && !props.isReadOnly) {
+      if (newValue === null) {
+        setControlledValue(null);
+        return;
+      }
       newValue = constrainValue(newValue, minValue, maxValue);
       newValue = previousAvailableDate(newValue, startDate, isDateUnavailable);
       if (!newValue) {
diff --git a/packages/react-aria-components/docs/Calendar.mdx b/packages/react-aria-components/docs/Calendar.mdx
index 35e4ea59e94..6c507fce615 100644
--- a/packages/react-aria-components/docs/Calendar.mdx
+++ b/packages/react-aria-components/docs/Calendar.mdx
@@ -859,6 +859,55 @@ function CalendarValue() {
 </Calendar>
 ```
 
+#### Reset value
+
+This example shows a custom `Footer` component that can be placed inside the `Calendar.` In this component, we use `CalendarStateContext` to get the `setValue` method from the `CalendarState` object. Next, by clicking on the button, we set the `setValue` to `null` to reset the `Calendar` `value`.
+
+```tsx example
+import {useContext} from 'react';
+import {CalendarStateContext, Button} from 'react-aria-components';
+
+function Footer() {
+  const state = useContext(CalendarStateContext);
+  {/*- begin highlight -*/}
+  const { setValue } = state;
+  {/*- end highlight -*/}
+
+  return (
+    <div>
+      <Button
+        slot={null}
+        className="reset-button"
+        onPress={() => {
+          // reset value
+          {/*- begin highlight -*/}
+          setValue(null)
+          {/*- end highlight -*/}
+        }}
+      >
+        Reset value
+      </Button>
+    </div>
+  );
+}
+
+<Calendar>
+  <header>
+    <Button slot="previous">◀</Button>
+    <Heading />
+    <Button slot="next">▶</Button>
+  </header>
+  <CalendarGrid>
+    {date => <CalendarCell date={date} />}
+  </CalendarGrid>
+  {/*- begin highlight -*/}
+  <Footer />
+  {/*- end highlight -*/}
+</Calendar>
+```
+
+
+
 ### Hooks
 
 If you need to customize things even further, such as accessing internal state or customizing DOM structure, you can drop down to the lower level Hook-based API. See [useCalendar](useCalendar.html) for more details.
diff --git a/packages/react-aria-components/stories/Calendar.stories.tsx b/packages/react-aria-components/stories/Calendar.stories.tsx
index ce8246a510e..e8f0b2158f1 100644
--- a/packages/react-aria-components/stories/Calendar.stories.tsx
+++ b/packages/react-aria-components/stories/Calendar.stories.tsx
@@ -10,13 +10,32 @@
  * governing permissions and limitations under the License.
  */
 
-import {Button, Calendar, CalendarCell, CalendarGrid, Heading, RangeCalendar} from 'react-aria-components';
-import React from 'react';
+import {Button, Calendar, CalendarCell, CalendarGrid, CalendarStateContext, Heading, RangeCalendar} from 'react-aria-components';
+import React, {useContext} from 'react';
 
 export default {
   title: 'React Aria Components'
 };
 
+function Footer() {
+  const state = useContext(CalendarStateContext);
+  const setValue = state?.setValue;
+  
+  return (
+    <div>
+      <Button 
+        slot={null} 
+        className="reset-button"
+        onPress={() => {
+          // reset value 
+          setValue?.(null);
+        }}>
+        Reset value
+      </Button>
+    </div>
+  );
+}
+
 export const CalendarExample = () => (
   <Calendar style={{width: 220}}>
     <div style={{display: 'flex', alignItems: 'center'}}>
@@ -30,6 +49,20 @@ export const CalendarExample = () => (
   </Calendar>
 );
 
+export const CalendarResetValue = () => (
+  <Calendar style={{width: 220}}>
+    <div style={{display: 'flex', alignItems: 'center'}}>
+      <Button slot="previous">&lt;</Button>
+      <Heading style={{flex: 1, textAlign: 'center'}} />
+      <Button slot="next">&gt;</Button>
+    </div>
+    <CalendarGrid style={{width: '100%'}}>
+      {date => <CalendarCell date={date} style={({isSelected, isOutsideMonth}) => ({display: isOutsideMonth ? 'none' : '', textAlign: 'center', cursor: 'default', background: isSelected ? 'blue' : ''})} />}
+    </CalendarGrid>
+    <Footer />
+  </Calendar>
+);
+
 export const CalendarMultiMonth = () => (
   <Calendar style={{width: 500}} visibleDuration={{months: 2}}>
     <div style={{display: 'flex', alignItems: 'center'}}>
diff --git a/packages/react-aria-components/test/Calendar.test.js b/packages/react-aria-components/test/Calendar.test.js
index 6e82165b168..0798dc363a8 100644
--- a/packages/react-aria-components/test/Calendar.test.js
+++ b/packages/react-aria-components/test/Calendar.test.js
@@ -11,9 +11,9 @@
  */
 
 import {act, fireEvent, pointerMap, render, within} from '@react-spectrum/test-utils';
-import {Button, Calendar, CalendarCell, CalendarContext, CalendarGrid, CalendarGridBody, CalendarGridHeader, CalendarHeaderCell, Heading} from 'react-aria-components';
+import {Button, Calendar, CalendarCell, CalendarContext, CalendarGrid, CalendarGridBody, CalendarGridHeader, CalendarHeaderCell, CalendarStateContext, Heading} from 'react-aria-components';
 import {CalendarDate, getLocalTimeZone, startOfMonth, startOfWeek, today} from '@internationalized/date';
-import React from 'react';
+import React, {useContext} from 'react';
 import userEvent from '@testing-library/user-event';
 
 let TestCalendar = ({calendarProps, gridProps, cellProps}) => (
@@ -284,4 +284,62 @@ describe('Calendar', () => {
     let headers = getAllByRole('columnheader', {hidden: true});
     expect(headers.map(h => h.textContent)).toEqual(['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']);
   });
+
+  it('should support setting "null" for method setValue', async () => {
+
+    const Footer = () => {
+      const state = useContext(CalendarStateContext);
+      const {setValue} = state;
+
+      return (
+        <div>
+          <Button
+            slot={null}
+            className="reset-button"
+            onPress={() => setValue(null)}>
+            Reset value
+          </Button>
+        </div>
+      );
+    };
+
+    let {getByRole} = render(
+      <Calendar aria-label="Appointment date" className="grid">
+        <header>
+          <Button slot="previous">◀</Button>
+          <Heading />
+          <Button slot="next">▶</Button>
+        </header>
+        <CalendarGrid>
+          <CalendarGridHeader className="grid-header">
+            {(day) => (
+              <CalendarHeaderCell className="header-cell">
+                {day}
+              </CalendarHeaderCell>
+            )}
+          </CalendarGridHeader>
+          <CalendarGridBody className="grid-body">
+            {(date) => <CalendarCell date={date} className={({isSelected}) => isSelected ? 'selected' : ''} />}
+          </CalendarGridBody>
+        </CalendarGrid>
+        <Footer />
+      </Calendar>
+    );
+    let grid = getByRole('application');
+    expect(grid).toHaveAttribute('class', 'grid');
+
+    let cell = within(grid).getAllByRole('button')[7];
+    expect(cell).toBeInTheDocument();
+
+    await user.click(cell);
+    expect(cell).toHaveAttribute('data-selected', 'true');
+    expect(cell).toHaveClass('selected');
+
+    const resetButton = grid.querySelector('.reset-button');
+    expect(resetButton).toBeInTheDocument();
+
+    await user.click(resetButton);
+    expect(cell).not.toHaveAttribute('data-selected');
+    expect(cell).not.toHaveClass('selected');
+  });
 });