@react-spectrum/autocomplete 3.0.0-alpha.4 → 3.0.0-alpha.40

package/src/MobileSearchAutocomplete.tsx

@@ -13,24 +13,32 @@
 import AlertMedium from '@spectrum-icons/ui/AlertMedium';
 import {AriaButtonProps} from '@react-types/button';
 import CheckmarkMedium from '@spectrum-icons/ui/CheckmarkMedium';
-import {classNames} from '@react-spectrum/utils';
+import {classNames, useFocusableRef} from '@react-spectrum/utils';
 import {ClearButton} from '@react-spectrum/button';
 import {ComboBoxState, useComboBoxState} from '@react-stately/combobox';
-import {DismissButton} from '@react-aria/overlays';
+import {DismissButton, useOverlayTrigger} from '@react-aria/overlays';
 import {Field} from '@react-spectrum/label';
 import {FocusableRef, ValidationState} from '@react-types/shared';
-import {FocusRing, FocusScope} from '@react-aria/focus';
-import {focusSafely} from '@react-aria/focus';
+import {focusSafely, setInteractionModality, useHover} from '@react-aria/interactions';
+import {FocusScope, useFocusRing} from '@react-aria/focus';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {ListBoxBase, useListBoxLayout} from '@react-spectrum/listbox';
 import Magnifier from '@spectrum-icons/ui/Magnifier';
-import {mergeProps, useId} from '@react-aria/utils';
+import {mergeProps, useFormReset, useId} from '@react-aria/utils';
 import {ProgressCircle} from '@react-spectrum/progress';
-import React, {HTMLAttributes, ReactElement, ReactNode, RefObject, useCallback, useEffect, useRef, useState} from 'react';
+import React, {
+  HTMLAttributes,
+  InputHTMLAttributes,
+  ReactElement,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useRef,
+  useState
+} from 'react';
 import searchAutocompleteStyles from './searchautocomplete.css';
 import searchStyles from '@adobe/spectrum-css-temp/components/search/vars.css';
-import {setInteractionModality, useHover} from '@react-aria/interactions';
 import {SpectrumSearchAutocompleteProps} from '@react-types/autocomplete';
 import styles from '@adobe/spectrum-css-temp/components/inputgroup/vars.css';
 import {TextFieldBase} from '@react-spectrum/textfield';
@@ -38,20 +46,22 @@ import textfieldStyles from '@adobe/spectrum-css-temp/components/textfield/vars.
 import {Tray} from '@react-spectrum/overlays';
 import {useButton} from '@react-aria/button';
 import {useDialog} from '@react-aria/dialog';
-import {useFilter, useMessageFormatter} from '@react-aria/i18n';
-import {useFocusableRef} from '@react-spectrum/utils';
-import {useLabel} from '@react-aria/label';
-import {useOverlayTrigger} from '@react-aria/overlays';
+import {useField} from '@react-aria/label';
+import {useFilter, useLocalizedStringFormatter} from '@react-aria/i18n';
+import {useFormValidation} from '@react-aria/form';
 import {useProviderProps} from '@react-spectrum/provider';
 import {useSearchAutocomplete} from '@react-aria/autocomplete';
 
-export const MobileSearchAutocomplete = React.forwardRef(function MobileSearchAutocomplete<T extends object>(props: SpectrumSearchAutocompleteProps<T>, ref: FocusableRef<HTMLElement>) {
+function ForwardMobileSearchAutocomplete<T extends object>(props: SpectrumSearchAutocompleteProps<T>, ref: FocusableRef<HTMLElement>) {
   props = useProviderProps(props);
 
   let {
     isQuiet,
     isDisabled,
-    validationState,
+    isRequired,
+    validationBehavior,
+    validate,
+    name,
     isReadOnly,
     onSubmit = () => {}
   } = props;
@@ -68,38 +78,71 @@ export const MobileSearchAutocomplete = React.forwardRef(function MobileSearchAu
     allowsCustomValue: true,
     onSelectionChange: (key) => key !== null && onSubmit(null, key),
     selectedKey: undefined,
-    defaultSelectedKey: undefined
+    defaultSelectedKey: undefined,
+    validate: useCallback(v => validate?.(v.inputValue), [validate])
   });
-  
-  let buttonRef = useRef<HTMLElement>();
+
+  let buttonRef = useRef<HTMLDivElement>(null);
   let domRef = useFocusableRef(ref, buttonRef);
   let {triggerProps, overlayProps} = useOverlayTrigger({type: 'listbox'}, state, buttonRef);
 
-  let {labelProps, fieldProps} = useLabel({
+  let inputRef = useRef<HTMLInputElement>(null);
+  useFormValidation({
     ...props,
-    labelElementType: 'span'
+    focus: () => buttonRef.current?.focus()
+  }, state, inputRef);
+  let {isInvalid, validationErrors, validationDetails} = state.displayValidation;
+  let validationState = props.validationState || (isInvalid ? 'invalid' : undefined);
+  let errorMessage = props.errorMessage ?? validationErrors.join(' ');
+
+  let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({
+    ...props,
+    labelElementType: 'span',
+    isInvalid,
+    errorMessage
   });
 
   // Focus the button and show focus ring when clicking on the label
   labelProps.onClick = () => {
-    if (!props.isDisabled) {
+    if (!props.isDisabled && buttonRef.current) {
       buttonRef.current.focus();
       setInteractionModality('keyboard');
     }
   };
 
-  let onClose = () => state.commit();
+  let inputProps: InputHTMLAttributes<HTMLInputElement> = {
+    type: 'hidden',
+    name,
+    value: state.inputValue
+  };
+
+  if (validationBehavior === 'native') {
+    // Use a hidden <input type="text"> rather than <input type="hidden">
+    // so that an empty value blocks HTML form submission when the field is required.
+    inputProps.type = 'text';
+    inputProps.hidden = true;
+    inputProps.required = isRequired;
+    // Ignore react warning.
+    inputProps.onChange = () => {};
+  }
+
+  useFormReset(inputRef, state.inputValue, state.setInputValue);
 
   return (
     <>
       <Field
         {...props}
         labelProps={labelProps}
+        descriptionProps={descriptionProps}
+        errorMessageProps={errorMessageProps}
+        isInvalid={isInvalid}
+        validationErrors={validationErrors}
+        validationDetails={validationDetails}
         elementType="span"
         ref={domRef}
         includeNecessityIndicatorInAccessibilityName>
         <SearchAutocompleteButton
-          {...mergeProps(triggerProps, fieldProps, {autoFocus: props.autoFocus})}
+          {...mergeProps(triggerProps, fieldProps, {autoFocus: props.autoFocus, icon: props.icon})}
           ref={buttonRef}
           isQuiet={isQuiet}
           isDisabled={isDisabled}
@@ -112,18 +155,23 @@ export const MobileSearchAutocomplete = React.forwardRef(function MobileSearchAu
           {state.inputValue || props.placeholder || ''}
         </SearchAutocompleteButton>
       </Field>
-      <Tray isOpen={state.isOpen} onClose={onClose} isFixedHeight isNonModal {...overlayProps}>
+      <input {...inputProps} ref={inputRef} />
+      <Tray state={state} isFixedHeight {...overlayProps}>
         <SearchAutocompleteTray
           {...props}
-          onClose={onClose}
+          onClose={state.close}
           overlayProps={overlayProps}
           state={state} />
       </Tray>
     </>
   );
-});
+}
+
+export let MobileSearchAutocomplete = React.forwardRef(ForwardMobileSearchAutocomplete) as <T>(props: SpectrumSearchAutocompleteProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;
+
 
 interface SearchAutocompleteButtonProps extends AriaButtonProps {
+  icon?: ReactElement | null,
   isQuiet?: boolean,
   isDisabled?: boolean,
   isReadOnly?: boolean,
@@ -136,8 +184,15 @@ interface SearchAutocompleteButtonProps extends AriaButtonProps {
   className?: string
 }
 
-const SearchAutocompleteButton = React.forwardRef(function SearchAutocompleteButton(props: SearchAutocompleteButtonProps, ref: RefObject<HTMLElement>) {
+// any type is because we don't want to call useObjectRef because this is an internal component and we know
+// we are always passing an object ref
+const SearchAutocompleteButton = React.forwardRef(function SearchAutocompleteButton(props: SearchAutocompleteButtonProps, ref: any) {
+  let searchIcon = (
+    <Magnifier data-testid="searchicon" />
+  );
+
   let {
+    icon = searchIcon,
     isQuiet,
     isDisabled,
     isReadOnly,
@@ -149,33 +204,31 @@ const SearchAutocompleteButton = React.forwardRef(function SearchAutocompleteBut
     style,
     className
 } = props;
-  let formatMessage = useMessageFormatter(intlMessages);
+  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/autocomplete');
   let valueId = useId();
   let invalidId = useId();
   let validationIcon = validationState === 'invalid'
-    ? <AlertMedium id={invalidId} aria-label={formatMessage('invalid')} />
+    ? <AlertMedium id={invalidId} aria-label={stringFormatter.format('invalid')} />
     : <CheckmarkMedium />;
 
-  let searchIcon = (
-    <Magnifier data-testid="searchicon" />
-  );
-
-  let icon = React.cloneElement(searchIcon, {
-    UNSAFE_className: classNames(
-      textfieldStyles,
-      'spectrum-Textfield-icon'
-    ),
-    size: 'S'
-  });
+  if (icon) {
+    icon = React.cloneElement(icon, {
+      UNSAFE_className: classNames(
+        textfieldStyles,
+        'spectrum-Textfield-icon'
+      ),
+      size: 'S'
+    });
+  }
 
   let clearButton = (
     <ClearButton
       onPress={(e) => {
-        clearInput();
-        props.onPress(e);
+        clearInput?.();
+        props?.onPress?.(e);
       }}
       preventFocus
-      aria-label={formatMessage('clear')}
+      aria-label={stringFormatter.format('clear')}
       excludeFromTabOrder
       UNSAFE_className={
         classNames(
@@ -186,7 +239,6 @@ const SearchAutocompleteButton = React.forwardRef(function SearchAutocompleteBut
       isDisabled={isDisabled} />
   );
 
-
   let validation = React.cloneElement(validationIcon, {
     UNSAFE_className: classNames(
       textfieldStyles,
@@ -194,11 +246,16 @@ const SearchAutocompleteButton = React.forwardRef(function SearchAutocompleteBut
       classNames(
         styles,
         'spectrum-InputGroup-input-validationIcon'
+      ),
+      classNames(
+        searchStyles,
+        'spectrum-Search-validationIcon'
       )
     )
   });
 
   let {hoverProps, isHovered} = useHover({});
+  let {isFocused, isFocusVisible, focusProps} = useFocusRing();
   let {buttonProps} = useButton({
     ...props,
     'aria-labelledby': [
@@ -211,102 +268,116 @@ const SearchAutocompleteButton = React.forwardRef(function SearchAutocompleteBut
   }, ref);
 
   return (
-    <FocusRing
-      focusClass={classNames(styles, 'is-focused')}
-      focusRingClass={classNames(styles, 'focus-ring')}>
+    <div
+      {...mergeProps(hoverProps, focusProps, buttonProps)}
+      aria-haspopup="dialog"
+      ref={ref}
+      style={{...style, outline: 'none'}}
+      className={
+        classNames(
+          styles,
+          'spectrum-InputGroup',
+          {
+            'spectrum-InputGroup--quiet': isQuiet,
+            'is-disabled': isDisabled,
+            'spectrum-InputGroup--invalid': validationState === 'invalid' && !isDisabled,
+            'is-hovered': isHovered,
+            'is-focused': isFocused,
+            'focus-ring': isFocusVisible
+          },
+          classNames(
+            searchAutocompleteStyles,
+            'searchautocomplete',
+            'mobile-searchautocomplete'
+          ),
+          className
+        )
+      }>
       <div
-        {...mergeProps(hoverProps, buttonProps)}
-        aria-haspopup="dialog"
-        ref={ref as RefObject<HTMLDivElement>}
-        style={{...style, outline: 'none'}}
         className={
           classNames(
-            styles,
-            'spectrum-InputGroup',
+            textfieldStyles,
+            'spectrum-Textfield',
             {
-              'spectrum-InputGroup--quiet': isQuiet,
-              'is-disabled': isDisabled,
-              'spectrum-InputGroup--invalid': validationState === 'invalid',
-              'is-hovered': isHovered
+              'spectrum-Textfield--invalid': validationState === 'invalid' && !isDisabled,
+              'spectrum-Textfield--valid': validationState === 'valid' && !isDisabled,
+              'spectrum-Textfield--quiet': isQuiet
             },
             classNames(
-              searchAutocompleteStyles,
-              'mobile-searchautocomplete'
+              searchStyles,
+              'spectrum-Search',
+              'spectrum-Search--loadable',
+              {
+                'is-disabled': isDisabled,
+                'is-quiet': isQuiet,
+                'spectrum-Search--invalid': validationState === 'invalid' && !isDisabled,
+                'spectrum-Search--valid': validationState === 'valid' && !isDisabled
+              }
             ),
-            className
+            classNames(
+              styles,
+              'spectrum-InputGroup-field'
+            )
           )
         }>
         <div
           className={
             classNames(
               textfieldStyles,
-              'spectrum-Textfield',
+              'spectrum-Textfield-input',
               {
-                'spectrum-Textfield--invalid': validationState === 'invalid',
-                'spectrum-Textfield--valid': validationState === 'valid',
-                'spectrum-Textfield--quiet': isQuiet
+                'spectrum-Textfield-inputIcon': !!icon,
+                'is-hovered': isHovered,
+                'is-placeholder': isPlaceholder,
+                'is-disabled': isDisabled,
+                'is-quiet': isQuiet,
+                'is-focused': isFocused
               },
               classNames(
                 searchStyles,
-                'spectrum-Search',
-                {
-                  'is-disabled': isDisabled,
-                  'is-quiet': isQuiet,
-                  'spectrum-Search--invalid': validationState === 'invalid',
-                  'spectrum-Search--valid': validationState === 'valid'
-                }
+                'spectrum-Search-input'
+              ),
+              classNames(
+                searchAutocompleteStyles,
+                'mobile-input'
               )
             )
           }>
-          <div
+          {icon}
+          <span
+            id={valueId}
             className={
               classNames(
-                textfieldStyles,
-                'spectrum-Textfield-input',
-                'spectrum-Textfield-inputIcon',
-                {
-                  'is-hovered': isHovered,
-                  'is-placeholder': isPlaceholder,
-                  'is-disabled': isDisabled,
-                  'is-quiet': isQuiet
-                },
-                classNames(
-                  searchStyles,
-                  'spectrum-Search-input'
-                )
+                searchAutocompleteStyles,
+                'mobile-value'
               )
             }>
-            {icon}
-            <span
-              id={valueId}
-              className={
-                classNames(
-                  searchAutocompleteStyles,
-                  'mobile-value'
-                )
-              }>
-              {children}
-            </span>
-          </div>
-          {validationState ? validation : null}
-          {(inputValue !== '' || validationState != null) && !isReadOnly && clearButton}
+            {children}
+          </span>
         </div>
+        {validationState && !isDisabled ? validation : null}
+        {(inputValue !== '' || validationState != null) && !isReadOnly && clearButton}
       </div>
-    </FocusRing>
+    </div>
   );
 });
 
-interface SearchAutocompleteTrayProps extends SpectrumSearchAutocompleteProps<unknown> {
-  state: ComboBoxState<unknown>,
+interface SearchAutocompleteTrayProps<T> extends SpectrumSearchAutocompleteProps<T> {
+  state: ComboBoxState<T>,
   overlayProps: HTMLAttributes<HTMLElement>,
   loadingIndicator?: ReactElement,
   onClose: () => void
 }
 
-function SearchAutocompleteTray(props: SearchAutocompleteTrayProps) {
+function SearchAutocompleteTray<T>(props: SearchAutocompleteTrayProps<T>) {
+  let searchIcon = (
+    <Magnifier data-testid="searchicon" />
+  );
+
   let {
     // completionMode = 'suggest',
     state,
+    icon = searchIcon,
     isDisabled,
     validationState,
     label,
@@ -317,37 +388,43 @@ function SearchAutocompleteTray(props: SearchAutocompleteTrayProps) {
     onSubmit
   } = props;
 
-  let timeout = useRef(null);
+  let timeout = useRef<ReturnType<typeof setTimeout> | null>(null);
   let [showLoading, setShowLoading] = useState(false);
-  let inputRef = useRef<HTMLInputElement>();
-  let popoverRef = useRef<HTMLDivElement>();
-  let listBoxRef = useRef<HTMLDivElement>();
-  let layout = useListBoxLayout(state);
-  let formatMessage = useMessageFormatter(intlMessages);
-
-  let {inputProps, listBoxProps, labelProps, clearButtonProps} = useSearchAutocomplete(
+  let inputRef = useRef<HTMLInputElement>(null);
+  let popoverRef = useRef<HTMLDivElement>(null);
+  let listBoxRef = useRef<HTMLDivElement>(null);
+  let isLoading = loadingState === 'loading' || loadingState === 'loadingMore';
+  let layout = useListBoxLayout();
+  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/autocomplete');
+
+  let {inputProps, listBoxProps, labelProps, clearButtonProps} = useSearchAutocomplete<T>(
     {
       ...props,
-      keyboardDelegate: layout,
+      layoutDelegate: layout,
       popoverRef: popoverRef,
       listBoxRef,
-      inputRef
+      inputRef,
+      // Handled outside the tray.
+      name: undefined
     },
     state
   );
 
   React.useEffect(() => {
-    focusSafely(inputRef.current);
+    if (inputRef.current) {
+      focusSafely(inputRef.current);
+    }
+  }, []);
 
-    // When the tray unmounts, set state.isFocused (i.e. the tray input's focus tracker) to false.
+  React.useEffect(() => {
+    // When the tray closes, set state.isFocused (i.e. the tray input's focus tracker) to false.
     // This is to prevent state.isFocused from being set to true when the tray closes via tapping on the underlay
     // (FocusScope attempts to restore focus to the tray input when tapping outside the tray due to "contain")
     // Have to do this manually since React doesn't call onBlur when a component is unmounted: https://github.com/facebook/react/issues/12363
-    return () => {
+    if (!state.isOpen && state.isFocused) {
       state.setFocused(false);
-    };
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+    }
+  });
 
   let {dialogProps} = useDialog({
     'aria-labelledby': useId(labelProps.id)
@@ -366,7 +443,7 @@ function SearchAutocompleteTray(props: SearchAutocompleteTrayProps) {
     <ClearButton
       {...clearButtonProps}
       preventFocus
-      aria-label={formatMessage('clear')}
+      aria-label={stringFormatter.format('clear')}
       excludeFromTabOrder
       UNSAFE_className={
         classNames(
@@ -379,7 +456,7 @@ function SearchAutocompleteTray(props: SearchAutocompleteTrayProps) {
 
   let loadingCircle = (
     <ProgressCircle
-      aria-label={formatMessage('loading')}
+      aria-label={stringFormatter.format('loading')}
       size="S"
       isIndeterminate
       UNSAFE_className={classNames(
@@ -409,7 +486,9 @@ function SearchAutocompleteTray(props: SearchAutocompleteTrayProps) {
       return;
     }
 
-    popoverRef.current.focus();
+    if (popoverRef.current) {
+      popoverRef.current.focus();
+    }
   }, [inputRef, popoverRef, isTouchDown]);
 
   let inputValue = inputProps.value;
@@ -432,8 +511,10 @@ function SearchAutocompleteTray(props: SearchAutocompleteTrayProps) {
     } else if (loadingState !== 'filtering') {
       // If loading is no longer happening, clear any timers and hide the loading circle
       setShowLoading(false);
-      clearTimeout(timeout.current);
-      timeout.current = null;
+      if (timeout.current !== null) {
+        clearTimeout(timeout.current);
+        timeout.current = null;
+      }
     }
 
     lastInputValue.current = inputValue;
@@ -442,25 +523,29 @@ function SearchAutocompleteTray(props: SearchAutocompleteTrayProps) {
   let onKeyDown = (e) => {
     // Close virtual keyboard, close tray, and fire onSubmit if user hits Enter w/o any focused options
     if (e.key === 'Enter' && state.selectionManager.focusedKey == null) {
-      popoverRef.current.focus();
-      onClose();
-      onSubmit(inputValue.toString(), null);
+      popoverRef.current?.focus();
+      if (onClose) {
+        onClose();
+      }
+      if (onSubmit) {
+        onSubmit(inputValue == null ? null : inputValue.toString(), null);
+      }
     } else {
-      inputProps.onKeyDown(e);
+      if (inputProps.onKeyDown) {
+        inputProps.onKeyDown(e);
+      }
     }
   };
 
-  let searchIcon = (
-    <Magnifier data-testid="searchicon" />
-  );
-
-  let icon = React.cloneElement(searchIcon, {
-    UNSAFE_className: classNames(
-        textfieldStyles,
-        'spectrum-Textfield-icon'
-        ),
-    size: 'S'
-  });
+  if (icon) {
+    icon = React.cloneElement(icon, {
+      UNSAFE_className: classNames(
+          textfieldStyles,
+          'spectrum-Textfield-icon'
+          ),
+      size: 'S'
+    });
+  }
 
   return (
     <FocusScope restoreFocus contain>
@@ -481,9 +566,9 @@ function SearchAutocompleteTray(props: SearchAutocompleteTrayProps) {
           inputRef={inputRef}
           isDisabled={isDisabled}
           isLoading={showLoading && loadingState === 'filtering'}
-          loadingIndicator={loadingState != null && loadingCircle}
+          loadingIndicator={loadingState != null ? loadingCircle : undefined}
           validationState={validationState}
-          wrapperChildren={(state.inputValue !== '' || loadingState === 'filtering' || validationState != null) && !props.isReadOnly && clearButton}
+          wrapperChildren={((state.inputValue !== '' || loadingState === 'filtering' || validationState != null) && !props.isReadOnly) ? clearButton : undefined}
           icon={icon}
           UNSAFE_className={
             classNames(
@@ -492,8 +577,8 @@ function SearchAutocompleteTray(props: SearchAutocompleteTrayProps) {
               'spectrum-Textfield',
               'spectrum-Search--loadable',
               {
-                'spectrum-Search--invalid': validationState === 'invalid',
-                'spectrum-Search--valid': validationState === 'valid'
+                'spectrum-Search--invalid': validationState === 'invalid' && !isDisabled,
+                'spectrum-Search--valid': validationState === 'valid' && !isDisabled
               },
               classNames(
                 searchAutocompleteStyles,
@@ -527,7 +612,7 @@ function SearchAutocompleteTray(props: SearchAutocompleteTrayProps) {
           shouldUseVirtualFocus
           renderEmptyState={() => loadingState !== 'loading' && (
             <span className={classNames(searchAutocompleteStyles, 'no-results')}>
-              {formatMessage('noResults')}
+              {stringFormatter.format('noResults')}
             </span>
           )}
           UNSAFE_className={
@@ -539,7 +624,7 @@ function SearchAutocompleteTray(props: SearchAutocompleteTrayProps) {
           ref={listBoxRef}
           onScroll={onScroll}
           onLoadMore={onLoadMore}
-          isLoading={loadingState === 'loading' || loadingState === 'loadingMore'} />
+          isLoading={isLoading} />
         <DismissButton onDismiss={onClose} />
       </div>
     </FocusScope>