@react-spectrum/datepicker 3.0.0-alpha.4 → 3.0.0-alpha.5

package/src/DateRangePicker.tsx

@@ -35,7 +35,8 @@ import {useLocale} from '@react-aria/i18n';
 import {useProviderProps} from '@react-spectrum/provider';
 
 /**
- * DatePickers combine two DateFields and a Calendar popover to allow users to enter or select a range of dates and times.
+ * DateRangePickers combine two DateFields and a RangeCalendar popover to allow users
+ * to enter or select a date and time range.
  */
 export function DateRangePicker<T extends DateValue>(props: SpectrumDateRangePickerProps<T>) {
   props = useProviderProps(props);
@@ -43,7 +44,6 @@ export function DateRangePicker<T extends DateValue>(props: SpectrumDateRangePic
     isQuiet,
     isDisabled,
     isReadOnly,
-    isRequired,
     autoFocus,
     placeholderValue,
     maxVisibleMonths = 1,
@@ -52,9 +52,12 @@ export function DateRangePicker<T extends DateValue>(props: SpectrumDateRangePic
   let {styleProps} = useStyleProps(otherProps);
   let {hoverProps, isHovered} = useHover({isDisabled});
   let targetRef = useRef<HTMLDivElement>();
-  let state = useDateRangePickerState(props);
-  let {labelProps, groupProps, buttonProps, dialogProps, startFieldProps, endFieldProps, descriptionProps, errorMessageProps} = useDateRangePicker(props, state, targetRef);
-  let {value, isOpen, setOpen} = state;
+  let state = useDateRangePickerState({
+    ...props,
+    shouldCloseOnSelect: () => !state.hasTime
+  });
+  let {labelProps, groupProps, buttonProps, dialogProps, startFieldProps, endFieldProps, descriptionProps, errorMessageProps, calendarProps} = useDateRangePicker(props, state, targetRef);
+  let {isOpen, setOpen} = state;
   let {direction} = useLocale();
 
   let {isFocused, isFocusVisible, focusProps} = useFocusRing({
@@ -105,6 +108,7 @@ export function DateRangePicker<T extends DateValue>(props: SpectrumDateRangePic
   return (
     <Field
       {...props}
+      elementType="span"
       ref={targetRef}
       description={description}
       labelProps={labelProps}
@@ -120,39 +124,18 @@ export function DateRangePicker<T extends DateValue>(props: SpectrumDateRangePic
           isDisabled={isDisabled}
           isQuiet={isQuiet}
           validationState={state.validationState}
-          autoFocus={autoFocus}
           className={classNames(styles, 'spectrum-InputGroup-field')}
           inputClassName={fieldClassName}>
           <DatePickerField
             {...startFieldProps}
+            data-testid="start-date"
             isQuiet={props.isQuiet}
-            isDisabled={isDisabled}
-            isReadOnly={isReadOnly}
-            isRequired={isRequired}
-            validationState={state.validationState}
-            placeholderValue={placeholderValue}
-            value={value?.start || null}
-            defaultValue={null}
-            onChange={start => state.setDateTime('start', start)}
-            granularity={props.granularity}
-            hourCycle={props.hourCycle}
-            hideTimeZone={props.hideTimeZone}
             inputClassName={classNames(datepickerStyles, 'react-spectrum-Datepicker-startField')} />
           <DateRangeDash />
           <DatePickerField
             {...endFieldProps}
+            data-testid="end-date"
             isQuiet={props.isQuiet}
-            isDisabled={isDisabled}
-            isReadOnly={isReadOnly}
-            isRequired={isRequired}
-            validationState={state.validationState}
-            placeholderValue={placeholderValue}
-            value={value?.end || null}
-            defaultValue={null}
-            onChange={end => state.setDateTime('end', end)}
-            granularity={props.granularity}
-            hourCycle={props.hourCycle}
-            hideTimeZone={props.hideTimeZone}
             inputClassName={classNames(
               styles,
               'spectrum-Datepicker-endField',
@@ -181,12 +164,8 @@ export function DateRangePicker<T extends DateValue>(props: SpectrumDateRangePic
           <Dialog UNSAFE_className={classNames(datepickerStyles, 'react-spectrum-Datepicker-dialog')} {...dialogProps}>
             <Content UNSAFE_className={classNames(datepickerStyles, 'react-spectrum-Datepicker-dialogContent')}>
               <RangeCalendar
-                autoFocus
-                value={state.dateRange}
-                onChange={state.setDateRange}
-                visibleMonths={visibleMonths}
-                minValue={props.minValue}
-                maxValue={props.maxValue} />
+                {...calendarProps}
+                visibleMonths={visibleMonths} />
               {showTimeField &&
                 <Flex gap="size-100" marginTop="size-100" UNSAFE_className={classNames(datepickerStyles, 'react-spectrum-Datepicker-timeFields')}>
                   <TimeField

package/src/Input.tsx

@@ -14,10 +14,10 @@ import Alert from '@spectrum-icons/ui/AlertMedium';
 import Checkmark from '@spectrum-icons/ui/CheckmarkMedium';
 import {classNames, useValueEffect} from '@react-spectrum/utils';
 import datepickerStyles from './index.css';
-import {FocusRing, FocusScope} from '@react-aria/focus';
-import {mergeProps, useEvent, useLayoutEffect, useResizeObserver} from '@react-aria/utils';
+import {FocusRing} from '@react-aria/focus';
 import React, {useCallback, useRef} from 'react';
 import textfieldStyles from '@adobe/spectrum-css-temp/components/textfield/vars.css';
+import {useEvent, useLayoutEffect, useResizeObserver} from '@react-aria/utils';
 
 export function Input(props) {
   let defaultRef = useRef();
@@ -30,7 +30,6 @@ export function Input(props) {
     fieldProps,
     inputRef = defaultRef,
     className,
-    autoFocus,
     style
   } = props;
 
@@ -113,13 +112,11 @@ export function Input(props) {
   }
 
   return (
-    <div {...mergeProps(fieldProps)} className={textfieldClass} style={style}>
+    <div role="presentation" {...fieldProps} className={textfieldClass} style={style}>
       <FocusRing focusClass={classNames(textfieldStyles, 'is-focused')} focusRingClass={classNames(textfieldStyles, 'focus-ring')} isTextInput within>
         <div role="presentation" className={inputClass}>
           <div role="presentation" className={classNames(datepickerStyles, 'react-spectrum-Datepicker-inputContents')} ref={inputRef}>
-            <FocusScope autoFocus={autoFocus}>
-              {children}
-            </FocusScope>
+            {children}
           </div>
         </div>
       </FocusRing>

package/src/TimeField.tsx

@@ -11,16 +11,15 @@
  */
 
 import {classNames} from '@react-spectrum/utils';
-import {createCalendar} from '@internationalized/date';
 import {DatePickerSegment} from './DatePickerSegment';
 import datepickerStyles from './index.css';
 import {Field} from '@react-spectrum/label';
 import {Input} from './Input';
 import React, {useRef} from 'react';
 import {SpectrumTimePickerProps, TimeValue} from '@react-types/datepicker';
-import {useDateField} from '@react-aria/datepicker';
 import {useLocale} from '@react-aria/i18n';
 import {useProviderProps} from '@react-spectrum/provider';
+import {useTimeField} from '@react-aria/datepicker';
 import {useTimeFieldState} from '@react-stately/datepicker';
 
 /**
@@ -41,15 +40,15 @@ export function TimeField<T extends TimeValue>(props: SpectrumTimePickerProps<T>
   let {locale} = useLocale();
   let state = useTimeFieldState({
     ...props,
-    locale,
-    createCalendar
+    locale
   });
 
-  let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useDateField(props, state, ref);
+  let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useTimeField(props, state, ref);
 
   return (
     <Field
       {...props}
+      elementType="span"
       labelProps={labelProps}
       descriptionProps={descriptionProps}
       errorMessageProps={errorMessageProps}

package/src/index.css

@@ -54,6 +54,7 @@
 .react-spectrum-Datepicker-input.react-spectrum-Datepicker-input {
   /* always reserve space for the validation icon */
   padding-inline-end: calc(var(--spectrum-textfield-padding-x) + var(--spectrum-icon-alert-medium-width) + var(--spectrum-textfield-icon-margin-left));
+  cursor: text;
 }
 
 .react-spectrum-Datepicker-inputContents {
@@ -106,15 +107,8 @@
   }
 }
 
-.react-spectrum-DatePicker-cell:focus {
-  background-color: var(--spectrum-global-color-static-blue);
-  color: white;
-  caret-color: transparent;
-  outline: none;
-}
-
 .react-spectrum-DatePicker-cell.is-placeholder {
-  color: var(--spectrum-textfield-placeholder-text-color, var(--spectrum-global-color-gray-600));
+  color: var(--react-spectrum-datepicker-placeholder-color);
 
   &:before {
     content: attr(aria-placeholder);
@@ -125,15 +119,15 @@
   color: var(--spectrum-textfield-placeholder-text-color, var(--spectrum-global-color-gray-600));
 }
 
-.react-spectrum-DatePicker-cell.is-placeholder:focus {
-  color: var(--spectrum-global-color-static-gray-400);
-}
-
 .react-spectrum-DatePicker-cell.is-read-only {
   color: var(--spectrum-global-color-gray-700);
-  &:focus {
-    color: var(--spectrum-global-color-static-gray-300);
-  }
+}
+
+.react-spectrum-DatePicker-cell:focus {
+  background-color: var(--spectrum-global-color-static-blue);
+  color: white;
+  caret-color: transparent;
+  outline: none;
 }
 
 .react-spectrum-Datepicker-dialog.react-spectrum-Datepicker-dialog {