@react-spectrum/autocomplete 3.0.0-nightly.3390 → 3.0.0-nightly.3398

package/src/MobileSearchAutocomplete.tsx

@@ -19,8 +19,8 @@ import {ComboBoxState, useComboBoxState} from '@react-stately/combobox';
 import {DismissButton} 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 {FocusScope, useFocusRing} from '@react-aria/focus';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {ListBoxBase, useListBoxLayout} from '@react-spectrum/listbox';
@@ -99,7 +99,7 @@ export const MobileSearchAutocomplete = React.forwardRef(function MobileSearchAu
         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}
@@ -124,6 +124,7 @@ export const MobileSearchAutocomplete = React.forwardRef(function MobileSearchAu
 });
 
 interface SearchAutocompleteButtonProps extends AriaButtonProps {
+  icon?: ReactElement,
   isQuiet?: boolean,
   isDisabled?: boolean,
   isReadOnly?: boolean,
@@ -137,7 +138,12 @@ interface SearchAutocompleteButtonProps extends AriaButtonProps {
 }
 
 const SearchAutocompleteButton = React.forwardRef(function SearchAutocompleteButton(props: SearchAutocompleteButtonProps, ref: RefObject<HTMLElement>) {
+  let searchIcon = (
+    <Magnifier data-testid="searchicon" />
+  );
+
   let {
+    icon = searchIcon,
     isQuiet,
     isDisabled,
     isReadOnly,
@@ -156,17 +162,15 @@ const SearchAutocompleteButton = React.forwardRef(function SearchAutocompleteBut
     ? <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
@@ -199,6 +203,7 @@ const SearchAutocompleteButton = React.forwardRef(function SearchAutocompleteBut
   });
 
   let {hoverProps, isHovered} = useHover({});
+  let {isFocused, isFocusVisible, focusProps} = useFocusRing();
   let {buttonProps} = useButton({
     ...props,
     'aria-labelledby': [
@@ -211,88 +216,88 @@ 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 as RefObject<HTMLDivElement>}
+      style={{...style, outline: 'none'}}
+      className={
+        classNames(
+          styles,
+          'spectrum-InputGroup',
+          {
+            'spectrum-InputGroup--quiet': isQuiet,
+            'is-disabled': isDisabled,
+            'spectrum-InputGroup--invalid': validationState === 'invalid',
+            'is-hovered': isHovered,
+            'is-focused': isFocused,
+            'focus-ring': isFocusVisible
+          },
+          classNames(
+            searchAutocompleteStyles,
+            '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',
+              'spectrum-Textfield--valid': validationState === 'valid',
+              'spectrum-Textfield--quiet': isQuiet
             },
             classNames(
-              searchAutocompleteStyles,
-              'mobile-searchautocomplete'
-            ),
-            className
+              searchStyles,
+              'spectrum-Search',
+              {
+                'is-disabled': isDisabled,
+                'is-quiet': isQuiet,
+                'spectrum-Search--invalid': validationState === 'invalid',
+                'spectrum-Search--valid': validationState === 'valid'
+              }
+            )
           )
         }>
         <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,
+                'focus-ring': isFocusVisible
               },
               classNames(
                 searchStyles,
-                'spectrum-Search',
-                {
-                  'is-disabled': isDisabled,
-                  'is-quiet': isQuiet,
-                  'spectrum-Search--invalid': validationState === 'invalid',
-                  'spectrum-Search--valid': validationState === 'valid'
-                }
+                'spectrum-Search-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 ? validation : null}
+        {(inputValue !== '' || validationState != null) && !isReadOnly && clearButton}
       </div>
-    </FocusRing>
+    </div>
   );
 });
 
@@ -304,9 +309,14 @@ interface SearchAutocompleteTrayProps extends SpectrumSearchAutocompleteProps<un
 }
 
 function SearchAutocompleteTray(props: SearchAutocompleteTrayProps) {
+  let searchIcon = (
+    <Magnifier data-testid="searchicon" />
+  );
+
   let {
     // completionMode = 'suggest',
     state,
+    icon = searchIcon,
     isDisabled,
     validationState,
     label,
@@ -450,17 +460,15 @@ function SearchAutocompleteTray(props: SearchAutocompleteTrayProps) {
     }
   };
 
-  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>

package/src/SearchAutocomplete.tsx

@@ -198,7 +198,12 @@ interface SearchAutocompleteInputProps extends SpectrumSearchAutocompleteProps<u
 }
 
 const SearchAutocompleteInput = React.forwardRef(function SearchAutocompleteInput(props: SearchAutocompleteInputProps, ref: RefObject<HTMLElement>) {
+  let searchIcon = (
+    <Magnifier data-testid="searchicon" />
+  );
+
   let {
+    icon = searchIcon,
     isQuiet,
     isDisabled,
     isReadOnly,
@@ -233,10 +238,6 @@ const SearchAutocompleteInput = React.forwardRef(function SearchAutocompleteInpu
       )} />
   );
 
-  let searchIcon = (
-    <Magnifier data-testid="searchicon" />
-  );
-
   let clearButton = (
     <ClearButton
       {...clearButtonProps}
@@ -324,7 +325,7 @@ const SearchAutocompleteInput = React.forwardRef(function SearchAutocompleteInpu
           validationState={validationState}
           isLoading={showLoading && (isOpen || menuTrigger === 'manual' || loadingState === 'loading')}
           loadingIndicator={loadingState != null && loadingCircle}
-          icon={searchIcon}
+          icon={icon}
           wrapperChildren={(inputValue !== '' && !isReadOnly) && clearButton} />
       </div>
     </FocusRing>