@react-spectrum/datepicker 3.1.2 → 3.3.0

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 './styles.css';
-import {FocusRing} from '@react-aria/focus';
-import {mergeRefs, useEvent, useLayoutEffect, useResizeObserver} from '@react-aria/utils';
+import {mergeProps, mergeRefs, useEvent, useLayoutEffect, useResizeObserver} from '@react-aria/utils';
 import React, {useCallback, useRef} from 'react';
 import textfieldStyles from '@adobe/spectrum-css-temp/components/textfield/vars.css';
+import {useFocusRing} from '@react-aria/focus';
 
 function Input(props, ref) {
   let inputRef = useRef(null);
@@ -29,7 +29,8 @@ function Input(props, ref) {
     children,
     fieldProps,
     className,
-    style
+    style,
+    disableFocusRing
   } = props;
 
   // Reserve padding for the error icon when the width of the input is unconstrained.
@@ -77,14 +78,20 @@ function Input(props, ref) {
   // parent element.
   useEvent(useRef(typeof window !== 'undefined' ? window : null), 'resize', onResize);
 
-  let isInvalid = validationState === 'invalid';
+  let {focusProps, isFocusVisible, isFocused} = useFocusRing({
+    isTextInput: true,
+    within: true
+  });
+
+  let isInvalid = validationState === 'invalid' && !isDisabled;
   let textfieldClass = classNames(
     textfieldStyles,
     'spectrum-Textfield',
     {
       'spectrum-Textfield--invalid': isInvalid,
-      'spectrum-Textfield--valid': validationState === 'valid',
-      'spectrum-Textfield--quiet': isQuiet
+      'spectrum-Textfield--valid': validationState === 'valid' && !isDisabled,
+      'spectrum-Textfield--quiet': isQuiet,
+      'focus-ring': isFocusVisible && !disableFocusRing
     },
     classNames(datepickerStyles, 'react-spectrum-Datepicker-field'),
     className
@@ -95,7 +102,8 @@ function Input(props, ref) {
     'spectrum-Textfield-input',
     {
       'is-disabled': isDisabled,
-      'is-invalid': isInvalid
+      'is-invalid': isInvalid,
+      'is-focused': isFocused
     },
     reservePadding && classNames(datepickerStyles, 'react-spectrum-Datepicker-input'),
     inputClassName
@@ -107,21 +115,19 @@ function Input(props, ref) {
   );
 
   let validationIcon = null;
-  if (validationState === 'invalid') {
+  if (validationState === 'invalid' && !isDisabled) {
     validationIcon = <Alert data-testid="invalid-icon" UNSAFE_className={iconClass} />;
-  } else if (validationState === 'valid') {
+  } else if (validationState === 'valid' && !isDisabled) {
     validationIcon = <Checkmark data-testid="valid-icon" UNSAFE_className={iconClass} />;
   }
 
   return (
-    <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={mergeRefs(ref, inputRef)}>
-            {children}
-          </div>
+    <div role="presentation" {...mergeProps(fieldProps, focusProps)} className={textfieldClass} style={style}>
+      <div role="presentation" className={inputClass}>
+        <div role="presentation" className={classNames(datepickerStyles, 'react-spectrum-Datepicker-inputContents')} ref={mergeRefs(ref, inputRef)}>
+          {children}
         </div>
-      </FocusRing>
+      </div>
       {validationIcon}
     </div>
   );

package/src/TimeField.tsx

@@ -16,7 +16,7 @@ import datepickerStyles from './styles.css';
 import {Field} from '@react-spectrum/label';
 import {FocusableRef} from '@react-types/shared';
 import {Input} from './Input';
-import React, {ReactElement} from 'react';
+import React, {ReactElement, useRef} from 'react';
 import {SpectrumTimeFieldProps, TimeValue} from '@react-types/datepicker';
 import {useFocusManagerRef} from './utils';
 import {useLocale} from '@react-aria/i18n';
@@ -41,7 +41,8 @@ function TimeField<T extends TimeValue>(props: SpectrumTimeFieldProps<T>, ref: F
     locale
   });
 
-  let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useTimeField(props, state, domRef);
+  let inputRef = useRef(null);
+  let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useTimeField(props, state, inputRef);
 
   return (
     <Field
@@ -54,6 +55,7 @@ function TimeField<T extends TimeValue>(props: SpectrumTimeFieldProps<T>, ref: F
       validationState={state.validationState}
       UNSAFE_className={classNames(datepickerStyles, 'react-spectrum-TimeField-fieldWrapper')}>
       <Input
+        ref={inputRef}
         fieldProps={fieldProps}
         isDisabled={isDisabled}
         isQuiet={isQuiet}

package/src/styles.css

@@ -39,7 +39,7 @@
 
 /* specificity war with .spectrum-Field--positionSide etc. */
 .react-spectrum-DateField.react-spectrum-DateField.react-spectrum-DateField.react-spectrum-DateField {
-  min-width: var(--spectrum-global-dimension-size-2000)
+  min-width: var(--spectrum-global-dimension-size-2000);
 }
 
 .react-spectrum-TimeField.react-spectrum-TimeField.react-spectrum-TimeField.react-spectrum-TimeField {
@@ -93,7 +93,7 @@
   border: none;
   background: none;
   padding: 0 2px;
-  border-radius: 2px;
+  border-radius: var(--spectrum-alias-border-radius-small);
   font-variant-numeric: tabular-nums;
   text-align: end;
   box-sizing: content-box;
@@ -135,7 +135,7 @@
 }
 
 .react-spectrum-DatePicker-cell:focus {
-  background-color: var(--spectrum-global-color-static-blue);
+  background-color: var(--spectrum-accent-background-color-default);
   color: white;
   caret-color: transparent;
   outline: none;