@react-spectrum/autocomplete 3.0.0-alpha.11 → 3.0.0-alpha.13

package/src/MobileSearchAutocomplete.tsx

@@ -27,7 +27,15 @@ import {ListBoxBase, useListBoxLayout} from '@react-spectrum/listbox';
 import Magnifier from '@spectrum-icons/ui/Magnifier';
 import {mergeProps, 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,
+  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';
@@ -45,7 +53,7 @@ import {useOverlayTrigger} from '@react-aria/overlays';
 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 _MobileSearchAutocomplete<T extends object>(props: SpectrumSearchAutocompleteProps<T>, ref: FocusableRef<HTMLElement>) {
   props = useProviderProps(props);
 
   let {
@@ -71,7 +79,7 @@ export const MobileSearchAutocomplete = React.forwardRef(function MobileSearchAu
     defaultSelectedKey: undefined
   });
 
-  let buttonRef = useRef<HTMLElement>();
+  let buttonRef = useRef<HTMLDivElement>(null);
   let domRef = useFocusableRef(ref, buttonRef);
   let {triggerProps, overlayProps} = useOverlayTrigger({type: 'listbox'}, state, buttonRef);
 
@@ -82,14 +90,12 @@ export const MobileSearchAutocomplete = React.forwardRef(function MobileSearchAu
 
   // 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();
-
   return (
     <>
       <Field
@@ -112,19 +118,22 @@ export const MobileSearchAutocomplete = React.forwardRef(function MobileSearchAu
           {state.inputValue || props.placeholder || ''}
         </SearchAutocompleteButton>
       </Field>
-      <Tray isOpen={state.isOpen} onClose={onClose} isFixedHeight isNonModal {...overlayProps}>
+      <Tray state={state} isFixedHeight {...overlayProps}>
         <SearchAutocompleteTray
           {...props}
-          onClose={onClose}
+          onClose={state.close}
           overlayProps={overlayProps}
           state={state} />
       </Tray>
     </>
   );
-});
+}
+
+export let MobileSearchAutocomplete = React.forwardRef(_MobileSearchAutocomplete) as <T>(props: SpectrumSearchAutocompleteProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;
+
 
 interface SearchAutocompleteButtonProps extends AriaButtonProps {
-  icon?: ReactElement,
+  icon?: ReactElement | null,
   isQuiet?: boolean,
   isDisabled?: boolean,
   isReadOnly?: boolean,
@@ -137,7 +146,9 @@ 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" />
   );
@@ -175,8 +186,8 @@ const SearchAutocompleteButton = React.forwardRef(function SearchAutocompleteBut
   let clearButton = (
     <ClearButton
       onPress={(e) => {
-        clearInput();
-        props.onPress(e);
+        clearInput?.();
+        props?.onPress?.(e);
       }}
       preventFocus
       aria-label={stringFormatter.format('clear')}
@@ -190,7 +201,6 @@ const SearchAutocompleteButton = React.forwardRef(function SearchAutocompleteBut
       isDisabled={isDisabled} />
   );
 
-
   let validation = React.cloneElement(validationIcon, {
     UNSAFE_className: classNames(
       textfieldStyles,
@@ -219,7 +229,7 @@ const SearchAutocompleteButton = React.forwardRef(function SearchAutocompleteBut
     <div
       {...mergeProps(hoverProps, focusProps, buttonProps)}
       aria-haspopup="dialog"
-      ref={ref as RefObject<HTMLDivElement>}
+      ref={ref}
       style={{...style, outline: 'none'}}
       className={
         classNames(
@@ -228,13 +238,14 @@ const SearchAutocompleteButton = React.forwardRef(function SearchAutocompleteBut
           {
             'spectrum-InputGroup--quiet': isQuiet,
             'is-disabled': isDisabled,
-            'spectrum-InputGroup--invalid': validationState === 'invalid',
+            'spectrum-InputGroup--invalid': validationState === 'invalid' && !isDisabled,
             'is-hovered': isHovered,
             'is-focused': isFocused,
             'focus-ring': isFocusVisible
           },
           classNames(
             searchAutocompleteStyles,
+            'searchautocomplete',
             'mobile-searchautocomplete'
           ),
           className
@@ -246,8 +257,8 @@ const SearchAutocompleteButton = React.forwardRef(function SearchAutocompleteBut
             textfieldStyles,
             'spectrum-Textfield',
             {
-              'spectrum-Textfield--invalid': validationState === 'invalid',
-              'spectrum-Textfield--valid': validationState === 'valid',
+              'spectrum-Textfield--invalid': validationState === 'invalid' && !isDisabled,
+              'spectrum-Textfield--valid': validationState === 'valid' && !isDisabled,
               'spectrum-Textfield--quiet': isQuiet
             },
             classNames(
@@ -256,8 +267,8 @@ const SearchAutocompleteButton = React.forwardRef(function SearchAutocompleteBut
               {
                 'is-disabled': isDisabled,
                 'is-quiet': isQuiet,
-                'spectrum-Search--invalid': validationState === 'invalid',
-                'spectrum-Search--valid': validationState === 'valid'
+                'spectrum-Search--invalid': validationState === 'invalid' && !isDisabled,
+                'spectrum-Search--valid': validationState === 'valid' && !isDisabled
               }
             )
           )
@@ -273,8 +284,7 @@ const SearchAutocompleteButton = React.forwardRef(function SearchAutocompleteBut
                 'is-placeholder': isPlaceholder,
                 'is-disabled': isDisabled,
                 'is-quiet': isQuiet,
-                'is-focused': isFocused,
-                'focus-ring': isFocusVisible
+                'is-focused': isFocused
               },
               classNames(
                 searchStyles,
@@ -298,21 +308,21 @@ const SearchAutocompleteButton = React.forwardRef(function SearchAutocompleteBut
             {children}
           </span>
         </div>
-        {validationState ? validation : null}
+        {validationState && !isDisabled ? validation : null}
         {(inputValue !== '' || validationState != null) && !isReadOnly && clearButton}
       </div>
     </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" />
   );
@@ -331,15 +341,15 @@ 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 inputRef = useRef<HTMLInputElement>(null);
+  let popoverRef = useRef<HTMLDivElement>(null);
+  let listBoxRef = useRef<HTMLDivElement>(null);
   let layout = useListBoxLayout(state);
   let stringFormatter = useLocalizedStringFormatter(intlMessages);
 
-  let {inputProps, listBoxProps, labelProps, clearButtonProps} = useSearchAutocomplete(
+  let {inputProps, listBoxProps, labelProps, clearButtonProps} = useSearchAutocomplete<T>(
     {
       ...props,
       keyboardDelegate: layout,
@@ -351,7 +361,9 @@ function SearchAutocompleteTray(props: SearchAutocompleteTrayProps) {
   );
 
   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.
     // This is to prevent state.isFocused from being set to true when the tray closes via tapping on the underlay
@@ -423,7 +435,9 @@ function SearchAutocompleteTray(props: SearchAutocompleteTrayProps) {
       return;
     }
 
-    popoverRef.current.focus();
+    if (popoverRef.current) {
+      popoverRef.current.focus();
+    }
   }, [inputRef, popoverRef, isTouchDown]);
 
   let inputValue = inputProps.value;
@@ -446,8 +460,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;
@@ -456,11 +472,17 @@ 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);
+      }
     }
   };
 
@@ -493,9 +515,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(
@@ -504,8 +526,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,

package/src/SearchAutocomplete.tsx

@@ -12,7 +12,6 @@
 import {AriaButtonProps} from '@react-types/button';
 import {classNames, useFocusableRef, useIsMobileDevice, useResizeObserver, useUnwrapDOMRef} from '@react-spectrum/utils';
 import {ClearButton} from '@react-spectrum/button';
-import {DismissButton, useOverlayPosition} from '@react-aria/overlays';
 import {DOMRefValue, FocusableRef} from '@react-types/shared';
 import {Field} from '@react-spectrum/label';
 import {FocusRing} from '@react-aria/focus';
@@ -21,10 +20,19 @@ import intlMessages from '../intl/*.json';
 import {ListBoxBase, useListBoxLayout} from '@react-spectrum/listbox';
 import Magnifier from '@spectrum-icons/ui/Magnifier';
 import {MobileSearchAutocomplete} from './MobileSearchAutocomplete';
-import {Placement} from '@react-types/overlays';
 import {Popover} from '@react-spectrum/overlays';
 import {ProgressCircle} from '@react-spectrum/progress';
-import React, {forwardRef, InputHTMLAttributes, RefObject, useCallback, useEffect, useRef, useState} from 'react';
+import React, {
+  forwardRef,
+  InputHTMLAttributes,
+  ReactElement,
+  RefObject,
+  useCallback,
+  useEffect,
+  useRef,
+  useState
+} from 'react';
+import searchAutocompleteStyles from './searchautocomplete.css';
 import searchStyles from '@adobe/spectrum-css-temp/components/search/vars.css';
 import {SpectrumSearchAutocompleteProps} from '@react-types/autocomplete';
 import styles from '@adobe/spectrum-css-temp/components/inputgroup/vars.css';
@@ -53,7 +61,7 @@ function SearchAutocomplete<T extends object>(props: SpectrumSearchAutocompleteP
   }
 }
 
-const SearchAutocompleteBase = React.forwardRef(function SearchAutocompleteBase<T extends object>(props: SpectrumSearchAutocompleteProps<T>, ref: FocusableRef<HTMLElement>) {
+function _SearchAutocompleteBase<T extends object>(props: SpectrumSearchAutocompleteProps<T>, ref: FocusableRef<HTMLElement>) {
   props = useProviderProps(props);
 
   let {
@@ -68,10 +76,10 @@ const SearchAutocompleteBase = React.forwardRef(function SearchAutocompleteBase<
 
   let stringFormatter = useLocalizedStringFormatter(intlMessages);
   let isAsync = loadingState != null;
-  let popoverRef = useRef<DOMRefValue<HTMLDivElement>>();
+  let popoverRef = useRef<DOMRefValue<HTMLDivElement>>(null);
   let unwrappedPopoverRef = useUnwrapDOMRef(popoverRef);
-  let listBoxRef = useRef();
-  let inputRef = useRef<HTMLInputElement>();
+  let listBoxRef = useRef(null);
+  let inputRef = useRef<HTMLInputElement>(null);
   let domRef = useFocusableRef(ref, inputRef);
 
   let {contains} = useFilter({sensitivity: 'base'});
@@ -100,18 +108,8 @@ const SearchAutocompleteBase = React.forwardRef(function SearchAutocompleteBase<
     state
   );
 
-  let {overlayProps, placement, updatePosition} = useOverlayPosition({
-    targetRef: inputRef,
-    overlayRef: unwrappedPopoverRef,
-    scrollRef: listBoxRef,
-    placement: `${direction} end` as Placement,
-    shouldFlip: shouldFlip,
-    isOpen: state.isOpen,
-    onClose: state.close
-  });
-
   // Measure the width of the inputfield to inform the width of the menu (below).
-  let [menuWidth, setMenuWidth] = useState(null);
+  let [menuWidth, setMenuWidth] = useState<number>(0);
   let {scale} = useProvider();
 
   let onResize = useCallback(() => {
@@ -128,20 +126,8 @@ const SearchAutocompleteBase = React.forwardRef(function SearchAutocompleteBase<
 
   useLayoutEffect(onResize, [scale, onResize]);
 
-  // Update position once the ListBox has rendered. This ensures that
-  // it flips properly when it doesn't fit in the available space.
-  // TODO: add ResizeObserver to useOverlayPosition so we don't need this.
-  useLayoutEffect(() => {
-    if (state.isOpen) {
-      requestAnimationFrame(() => {
-        updatePosition();
-      });
-    }
-  }, [state.isOpen, updatePosition]);
-
   let style = {
-    ...overlayProps.style,
-    width: isQuiet ? null : menuWidth,
+    width: isQuiet ? undefined : menuWidth,
     minWidth: isQuiet ? `calc(${menuWidth}px + calc(2 * var(--spectrum-dropdown-quiet-offset)))` : menuWidth
   };
 
@@ -157,14 +143,15 @@ const SearchAutocompleteBase = React.forwardRef(function SearchAutocompleteBase<
           clearButtonProps={clearButtonProps} />
       </Field>
       <Popover
-        isOpen={state.isOpen}
+        state={state}
         UNSAFE_style={style}
         UNSAFE_className={classNames(styles, 'spectrum-InputGroup-popover', {'spectrum-InputGroup-popover--quiet': isQuiet})}
         ref={popoverRef}
-        placement={placement}
+        triggerRef={inputRef}
+        placement={`${direction} end`}
         hideArrow
         isNonModal
-        isDismissable={false}>
+        shouldFlip={shouldFlip}>
         <ListBoxBase
           {...listBoxProps}
           ref={listBoxRef}
@@ -182,13 +169,15 @@ const SearchAutocompleteBase = React.forwardRef(function SearchAutocompleteBase<
               {stringFormatter.format('noResults')}
             </span>
           )} />
-        <DismissButton onDismiss={() => state.close()} />
       </Popover>
     </>
   );
-});
+}
+
+let SearchAutocompleteBase = React.forwardRef(_SearchAutocompleteBase) as <T>(props: SpectrumSearchAutocompleteProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;
 
-interface SearchAutocompleteInputProps extends SpectrumSearchAutocompleteProps<unknown> {
+
+interface SearchAutocompleteInputProps<T> extends SpectrumSearchAutocompleteProps<T> {
   inputProps: InputHTMLAttributes<HTMLInputElement>,
   inputRef: RefObject<HTMLInputElement | HTMLTextAreaElement>,
   style?: React.CSSProperties,
@@ -197,7 +186,9 @@ interface SearchAutocompleteInputProps extends SpectrumSearchAutocompleteProps<u
   clearButtonProps: AriaButtonProps
 }
 
-const SearchAutocompleteInput = React.forwardRef(function SearchAutocompleteInput(props: SearchAutocompleteInputProps, 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
+function _SearchAutocompleteInput<T>(props: SearchAutocompleteInputProps<T>, ref: any) {
   let searchIcon = (
     <Magnifier data-testid="searchicon" />
   );
@@ -220,7 +211,7 @@ const SearchAutocompleteInput = React.forwardRef(function SearchAutocompleteInpu
   } = props;
   let {hoverProps, isHovered} = useHover({});
   let stringFormatter = useLocalizedStringFormatter(intlMessages);
-  let timeout = useRef(null);
+  let timeout = useRef<ReturnType<typeof setTimeout> | null>(null);
   let [showLoading, setShowLoading] = useState(false);
 
   let loadingCircle = (
@@ -272,8 +263,10 @@ const SearchAutocompleteInput = React.forwardRef(function SearchAutocompleteInpu
     } else if (!isLoading) {
       // 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;
@@ -297,9 +290,13 @@ const SearchAutocompleteInput = React.forwardRef(function SearchAutocompleteInpu
             {
               'spectrum-InputGroup--quiet': isQuiet,
               'is-disabled': isDisabled,
-              'spectrum-InputGroup--invalid': validationState === 'invalid',
+              'spectrum-InputGroup--invalid': validationState === 'invalid' && !isDisabled,
               'is-hovered': isHovered
             },
+            classNames(
+              searchAutocompleteStyles,
+              'searchautocomplete'
+            ),
             className
           )
         }>
@@ -314,9 +311,13 @@ const SearchAutocompleteInput = React.forwardRef(function SearchAutocompleteInpu
               {
                 'is-disabled': isDisabled,
                 'is-quiet': isQuiet,
-                'spectrum-Search--invalid': validationState === 'invalid',
-                'spectrum-Search--valid': validationState === 'valid'
-              }
+                'spectrum-Search--invalid': validationState === 'invalid' && !isDisabled,
+                'spectrum-Search--valid': validationState === 'valid' && !isDisabled
+              },
+              classNames(
+                styles,
+                'spectrum-InputGroup-field'
+              )
             )
           }
           inputClassName={classNames(searchStyles, 'spectrum-Search-input')}
@@ -324,13 +325,16 @@ const SearchAutocompleteInput = React.forwardRef(function SearchAutocompleteInpu
           isQuiet={isQuiet}
           validationState={validationState}
           isLoading={showLoading && (isOpen || menuTrigger === 'manual' || loadingState === 'loading')}
-          loadingIndicator={loadingState != null && loadingCircle}
+          loadingIndicator={loadingState != null ? loadingCircle : undefined}
           icon={icon}
-          wrapperChildren={(inputValue !== '' && !isReadOnly) && clearButton} />
+          wrapperChildren={(inputValue !== '' && !isReadOnly) ? clearButton : undefined}
+          disableFocusRing />
       </div>
     </FocusRing>
   );
-});
+}
+
+let SearchAutocompleteInput = React.forwardRef(_SearchAutocompleteInput) as <T>(props: SearchAutocompleteInputProps<T> & {ref?: any}) => ReactElement;
 
 
 /**

package/src/searchautocomplete.css

@@ -23,6 +23,12 @@
   font-style: italic;
 }
 
+/* override .spectrum-InputGroup */
+.searchautocomplete.searchautocomplete {
+  border-radius: var(--spectrum-search-border-radius);
+  --spectrum-focus-ring-border-radius: var(--spectrum-search-border-radius);
+}
+
 .mobile-searchautocomplete {
   outline: none;
 }