[RAC] Add shouldCloseOnSelect prop to DatePicker (type & docs only) (#5316)

* add shouldCloseOnSelect prop to DatePicker (type & docs only)

* add tests for prop we support

* add to DateRangePickerProps

* add test for DateRangePicker

* fix test

---------

Co-authored-by: Robert Snow <rsnow@adobe.com>
Co-authored-by: Reid Barber <reid@reidbarber.com>

Author: 3 people

packages/dev/parcel-packager-docs/DocsPackager.js

@@ -139,6 +139,16 @@ module.exports = new Packager({
           return omit(application[0], application[1], nodes);
         }
 
+        if (t && t.type === 'identifier' && t.name === 'Pick' && application) {
+          if (application[0]?.type === 'application') {
+            // this condition was necessary to prevent an unwanted side-effect for other types.
+            // For example, if you go to http://localhost:1234/react-aria/useTextField.html#anatomy
+            // and click the link 'TextFieldIntrinsicElements', the popover won't show 'Pick' anymore if it is processed by `pick()` function here.
+            // i.e., `keyof Pick<IntrinsicHTMLElements, 'input' | 'textarea'>` becomes `keyof <IntrinsicHTMLElements, 'input' | 'textarea'>`
+            return pick(application[0], application[1], nodes);
+          }
+        }
+
         if (t && t.type === 'identifier' && params && params[t.name]) {
           return params[t.name];
         }
@@ -522,6 +532,42 @@ function omit(obj, toOmit, nodes) {
   return obj;
 }
 
+// Exactly the same as `omit()` above except for `keys.has(key)` instead of `!keys.has(key)`.
+function pick(obj, toPick, nodes) {
+  obj = resolveValue(obj, nodes);
+  
+  if (obj.type === 'interface' || obj.type === 'object') {
+    let keys = new Set();
+    if (toPick.type === 'string' && toPick.value) {
+      keys.add(toPick.value);
+    } else if (toPick.type === 'union') {
+      for (let e of toPick.elements) {
+        if (e.type === 'string' && e.value) {
+          keys.add(e.value);
+        }
+      }
+    }
+
+    if (keys.size === 0) {
+      return obj;
+    }
+
+    let properties = {};
+    for (let key in obj.properties) {
+      if (keys.has(key)) {
+        properties[key] = obj.properties[key];
+      }
+    }
+
+    return {
+      ...obj,
+      properties
+    };
+  }
+
+  return obj;
+}
+
 function resolveValue(obj, nodes) {
   if (obj.type === 'link') {
     return resolveValue(nodes[obj.id], nodes);

packages/react-aria-components/src/DatePicker.tsx

@@ -14,7 +14,7 @@ import {ButtonContext} from './Button';
 import {CalendarContext, RangeCalendarContext} from './Calendar';
 import {ContextValue, forwardRefType, Provider, RACValidation, removeDataAttributes, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';
 import {DateFieldContext} from './DateField';
-import {DatePickerState, DateRangePickerState, useDatePickerState, useDateRangePickerState} from 'react-stately';
+import {DatePickerState, DatePickerStateOptions, DateRangePickerState, DateRangePickerStateOptions, useDatePickerState, useDateRangePickerState} from 'react-stately';
 import {DialogContext, OverlayTriggerStateContext} from './Dialog';
 import {FieldErrorContext} from './FieldError';
 import {filterDOMProps} from '@react-aria/utils';
@@ -62,8 +62,8 @@ export interface DateRangePickerRenderProps extends Omit<DatePickerRenderProps,
   state: DateRangePickerState
 }
 
-export interface DatePickerProps<T extends DateValue> extends Omit<AriaDatePickerProps<T>, 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, RenderProps<DatePickerRenderProps>, SlotProps {}
-export interface DateRangePickerProps<T extends DateValue> extends Omit<AriaDateRangePickerProps<T>, 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, RenderProps<DateRangePickerRenderProps>, SlotProps {}
+export interface DatePickerProps<T extends DateValue> extends Omit<AriaDatePickerProps<T>, 'label' | 'description' | 'errorMessage' | 'validationState'>, Pick<DatePickerStateOptions<T>, 'shouldCloseOnSelect'>, RACValidation, RenderProps<DatePickerRenderProps>, SlotProps {}
+export interface DateRangePickerProps<T extends DateValue> extends Omit<AriaDateRangePickerProps<T>, 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, Pick<DateRangePickerStateOptions<T>, 'shouldCloseOnSelect'>, RACValidation, RenderProps<DateRangePickerRenderProps>, SlotProps {}
 
 export const DatePickerContext = createContext<ContextValue<DatePickerProps<any>, HTMLDivElement>>(null);
 export const DateRangePickerContext = createContext<ContextValue<DateRangePickerProps<any>, HTMLDivElement>>(null);

packages/react-aria-components/test/DatePicker.test.js

@@ -221,4 +221,38 @@ describe('DatePicker', () => {
     expect(getDescription()).not.toContain('Constraints not satisfied');
     expect(datepicker).not.toHaveAttribute('data-invalid');
   });
+
+  it('should support close on select = true', async () => {
+    let {getByRole, getAllByRole} = render(<TestDatePicker value={new CalendarDate(2019, 2, 3)} />);
+
+    let button = getByRole('button');
+
+    await user.click(button);
+
+    let dialog = getByRole('dialog');
+
+    let cells = getAllByRole('gridcell');
+    let selected = cells.find(cell => cell.getAttribute('aria-selected') === 'true');
+    expect(selected.children[0]).toHaveAttribute('aria-label', 'Sunday, February 3, 2019 selected');
+
+    await user.click(selected.nextSibling.children[0]);
+    expect(dialog).not.toBeInTheDocument();
+  });
+
+  it('should support close on select = false', async () => {
+    let {getByRole, getAllByRole} = render(<TestDatePicker value={new CalendarDate(2019, 2, 3)} shouldCloseOnSelect={false} />);
+
+    let button = getByRole('button');
+
+    await user.click(button);
+
+    let dialog = getByRole('dialog');
+
+    let cells = getAllByRole('gridcell');
+    let selected = cells.find(cell => cell.getAttribute('aria-selected') === 'true');
+    expect(selected.children[0]).toHaveAttribute('aria-label', 'Sunday, February 3, 2019 selected');
+
+    await user.click(selected.nextSibling.children[0]);
+    expect(dialog).toBeInTheDocument();
+  });
 });

packages/react-aria-components/test/DateRangePicker.test.js

@@ -242,4 +242,40 @@ describe('DateRangePicker', () => {
     expect(getDescription()).not.toContain('Constraints not satisfied');
     expect(datepicker).not.toHaveAttribute('data-invalid');
   });
+
+  it('should support close on select = true', async () => {
+    let {getByRole, getAllByRole} = render(<TestDateRangePicker value={{start: new CalendarDate(2023, 1, 10), end: new CalendarDate(2023, 1, 20)}} />);
+
+    let button = getByRole('button');
+
+    await user.click(button);
+
+    let dialog = getByRole('dialog');
+
+    let cells = getAllByRole('gridcell');
+    let selected = cells.find(cell => cell.getAttribute('aria-selected') === 'true');
+    expect(selected.children[0]).toHaveAttribute('aria-label', 'Selected Range: Tuesday, January 10 to Friday, January 20, 2023, Tuesday, January 10, 2023 selected');
+
+    await user.click(selected.nextSibling.children[0]);
+    await user.click(selected.nextSibling.children[1]);
+    expect(dialog).not.toBeInTheDocument();
+  });
+
+  it('should support close on select = false', async () => {
+    let {getByRole, getAllByRole} = render(<TestDateRangePicker value={{start: new CalendarDate(2023, 1, 10), end: new CalendarDate(2023, 1, 20)}} shouldCloseOnSelect={false} />);
+
+    let button = getByRole('button');
+
+    await user.click(button);
+
+    let dialog = getByRole('dialog');
+
+    let cells = getAllByRole('gridcell');
+    let selected = cells.find(cell => cell.getAttribute('aria-selected') === 'true');
+    expect(selected.children[0]).toHaveAttribute('aria-label', 'Selected Range: Tuesday, January 10 to Friday, January 20, 2023, Tuesday, January 10, 2023 selected');
+
+    await user.click(selected.nextSibling.children[0]);
+    await user.click(selected.nextSibling.children[1]);
+    expect(dialog).toBeInTheDocument();
+  });
 });