Add missing DatePicker states (#5158)

* Add data-open state to DatePicker and DateRangePicker

* Support hover and focus states in DateSegment

---------

Co-authored-by: Daniel Lu <dl1644@gmail.com>

Author: devongovett

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

@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-import {AriaDateFieldProps, AriaTimeFieldProps, DateValue, mergeProps, TimeValue, useDateField, useDateSegment, useLocale, useTimeField} from 'react-aria';
+import {AriaDateFieldProps, AriaTimeFieldProps, DateValue, mergeProps, TimeValue, useDateField, useDateSegment, useFocusRing, useHover, useLocale, useTimeField} from 'react-aria';
 import {ContextValue, forwardRefType, Provider, removeDataAttributes, RenderProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps, useSlot} from './utils';
 import {createCalendar} from '@internationalized/date';
 import {DateFieldState, DateSegmentType, DateSegment as IDateSegment, TimeFieldState, useDateFieldState, useTimeFieldState} from 'react-stately';
@@ -248,6 +248,21 @@ const _DateInput = /*#__PURE__*/ (forwardRef as forwardRefType)(DateInput);
 export {_DateInput as DateInput};
 
 export interface DateSegmentRenderProps extends Omit<IDateSegment, 'isEditable'> {
+  /**
+   * Whether the segment is currently hovered with a mouse.
+   * @selector [data-hovered]
+   */
+  isHovered: boolean,
+  /**
+   * Whether the segment is focused, either via a mouse or keyboard.
+   * @selector [data-focused]
+   */
+  isFocused: boolean,
+  /**
+   * Whether the segment is keyboard focused.
+   * @selector [data-focus-visible]
+   */
+  isFocusVisible: boolean,
   /**
    * Whether the value is a placeholder.
    * @selector [data-placeholder]
@@ -280,26 +295,35 @@ function DateSegment({segment, ...otherProps}: DateSegmentProps, ref: ForwardedR
   let state = dateFieldState ?? timeFieldState!;
   let domRef = useObjectRef(ref);
   let {segmentProps} = useDateSegment(segment, state, domRef);
+  let {focusProps, isFocused, isFocusVisible} = useFocusRing();
+  let {hoverProps, isHovered} = useHover({isDisabled: state.isDisabled || segment.type === 'literal'});
   let renderProps = useRenderProps({
     ...otherProps,
     values: {
       ...segment,
       isReadOnly: !segment.isEditable,
-      isInvalid: state.isInvalid
+      isInvalid: state.isInvalid,
+      isHovered,
+      isFocused,
+      isFocusVisible
     },
     defaultChildren: segment.text,
     defaultClassName: 'react-aria-DateSegment'
   });
 
+
   return (
     <div
-      {...mergeProps(filterDOMProps(otherProps as any), segmentProps)}
+      {...mergeProps(filterDOMProps(otherProps as any), segmentProps, focusProps, hoverProps)}
       {...renderProps}
       ref={domRef}
       data-placeholder={segment.isPlaceholder || undefined}
       data-invalid={state.isInvalid || undefined}
       data-readonly={!segment.isEditable || undefined}
-      data-type={segment.type} />
+      data-type={segment.type}
+      data-hovered={isHovered || undefined}
+      data-focused={isFocused || undefined}
+      data-focus-visible={isFocusVisible || undefined} />
   );
 }
 

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

@@ -44,6 +44,11 @@ export interface DatePickerRenderProps {
    * @selector [data-disabled]
    */
   isInvalid: boolean,
+  /**
+   * Whether the date picker's popover is currently open.
+   * @selector [data-open]
+   */
+  isOpen: boolean,
   /**
    * State of the date picker.
    */
@@ -88,7 +93,8 @@ function DatePicker<T extends DateValue>(props: DatePickerProps<T>, ref: Forward
       isFocusWithin: isFocused,
       isFocusVisible,
       isDisabled: props.isDisabled || false,
-      isInvalid: state.isInvalid
+      isInvalid: state.isInvalid,
+      isOpen: state.isOpen
     },
     defaultClassName: 'react-aria-DatePicker'
   });
@@ -124,7 +130,8 @@ function DatePicker<T extends DateValue>(props: DatePickerProps<T>, ref: Forward
         data-focus-within={isFocused || undefined}
         data-invalid={state.isInvalid || undefined}
         data-focus-visible={isFocusVisible || undefined}
-        data-disabled={props.isDisabled || undefined} />
+        data-disabled={props.isDisabled || undefined}
+        data-open={state.isOpen || undefined} />
     </Provider>
   );
 }
@@ -160,7 +167,8 @@ function DateRangePicker<T extends DateValue>(props: DateRangePickerProps<T>, re
       isFocusWithin: isFocused,
       isFocusVisible,
       isDisabled: props.isDisabled || false,
-      isInvalid: state.isInvalid
+      isInvalid: state.isInvalid,
+      isOpen: state.isOpen
     },
     defaultClassName: 'react-aria-DateRangePicker'
   });
@@ -201,7 +209,8 @@ function DateRangePicker<T extends DateValue>(props: DateRangePickerProps<T>, re
         data-focus-within={isFocused || undefined}
         data-invalid={state.isInvalid || undefined}
         data-focus-visible={isFocusVisible || undefined}
-        data-disabled={props.isDisabled || undefined} />
+        data-disabled={props.isDisabled || undefined}
+        data-open={state.isOpen || undefined} />
     </Provider>
   );
 }

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

@@ -12,11 +12,13 @@
 
 import {CalendarDate} from '@internationalized/date';
 import {DateField, DateFieldContext, DateInput, DateSegment, Label, Text} from '../';
-import {pointerMap, render, within} from '@react-spectrum/test-utils';
+import {installPointerEvent, pointerMap, render, within} from '@react-spectrum/test-utils';
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 
 describe('DateField', () => {
+  installPointerEvent();
+
   let user;
   beforeAll(() => {
     user = userEvent.setup({delay: null, pointerMap});
@@ -96,7 +98,7 @@ describe('DateField', () => {
       <DateField>
         <Label>Birth date</Label>
         <DateInput className={({isHovered}) => isHovered ? 'hover' : ''}>
-          {segment => <DateSegment segment={segment} />}
+          {segment => <DateSegment segment={segment} className={({isHovered}) => isHovered ? 'hover' : ''} />}
         </DateInput>
       </DateField>
     );
@@ -112,14 +114,23 @@ describe('DateField', () => {
     await user.unhover(group);
     expect(group).not.toHaveAttribute('data-hovered');
     expect(group).not.toHaveClass('hover');
+
+    let segments = within(group).getAllByRole('spinbutton');
+    await user.hover(segments[0]);
+    expect(segments[0]).toHaveAttribute('data-hovered', 'true');
+    expect(segments[0]).toHaveClass('hover');
+
+    await user.unhover(segments[0]);
+    expect(segments[0]).not.toHaveAttribute('data-hovered', 'true');
+    expect(segments[0]).not.toHaveClass('hover');
   });
 
   it('should support focus visible state', async () => {
     let {getByRole} = render(
       <DateField>
         <Label>Birth date</Label>
         <DateInput className={({isFocusVisible}) => isFocusVisible ? 'focus' : ''}>
-          {segment => <DateSegment segment={segment} />}
+          {segment => <DateSegment segment={segment} className={({isFocusVisible}) => isFocusVisible ? 'focus' : ''} />}
         </DateInput>
       </DateField>
     );
@@ -133,9 +144,15 @@ describe('DateField', () => {
     expect(group).toHaveAttribute('data-focus-visible', 'true');
     expect(group).toHaveClass('focus');
 
+    let segments = within(group).getAllByRole('spinbutton');
+    expect(segments[0]).toHaveAttribute('data-focus-visible', 'true');
+    expect(segments[0]).toHaveClass('focus');
+
     await user.tab({shift: true});
     expect(group).not.toHaveAttribute('data-focus-visible');
     expect(group).not.toHaveClass('focus');
+    expect(segments[0]).not.toHaveAttribute('data-focus-visible', 'true');
+    expect(segments[0]).not.toHaveClass('focus');
   });
 
   it('should support disabled state', () => {

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

@@ -106,6 +106,16 @@ describe('DatePicker', () => {
     expect(button).toHaveAttribute('data-pressed');
   });
 
+  it('should support data-open state', async () => {
+    let {getByRole} = render(<TestDatePicker />);
+    let datePicker = document.querySelector('.react-aria-DatePicker');
+    let button = getByRole('button');
+
+    expect(datePicker).not.toHaveAttribute('data-open');
+    await user.click(button);
+    expect(datePicker).toHaveAttribute('data-open');
+  });
+
   it('should support render props', () => {
     let {getByRole} = render(
       <DatePicker minValue={new CalendarDate(2023, 1, 1)} defaultValue={new CalendarDate(2020, 2, 3)}>

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

@@ -112,6 +112,16 @@ describe('DateRangePicker', () => {
     expect(button).toHaveAttribute('data-pressed');
   });
 
+  it('should support data-open state', async () => {
+    let {getByRole} = render(<TestDateRangePicker />);
+    let datePicker = document.querySelector('.react-aria-DateRangePicker');
+    let button = getByRole('button');
+
+    expect(datePicker).not.toHaveAttribute('data-open');
+    await user.click(button);
+    expect(datePicker).toHaveAttribute('data-open');
+  });
+
   it('should support render props', () => {
     let {getByRole} = render(
       <DateRangePicker defaultValue={{start: new CalendarDate(2023, 1, 10), end: new CalendarDate(2023, 1, 1)}}>