@react-fabric/form 1.0.0-beta.8 → 1.0.1

package/src/select/AutoComplete.tsx

@@ -34,56 +34,59 @@ import {
   useListNavigation,
   useTypeahead,
 } from "@floating-ui/react";
-import { Chip, CoreIcons, Icon } from "@react-fabric/core";
-import { isArray, isEmpty } from "@react-fabric/utilities";
-import classNames from "classnames";
+import { Chip, Icon } from "@react-fabric/core";
+import type { RefProp } from "@react-fabric/core/dist/types/types";
+import { cn, EMPTY_ARRAY, isArray, isEmpty } from "@react-fabric/utilities";
 import { useCallback, useId, useLayoutEffect, useMemo, useRef } from "react";
 import { InputWrapper } from "../internal/InputWrapper";
 import { type SelectProps } from "../types";
+import { getWrapperProps } from "../utils";
 import { Options } from "./Options";
 import { useSelect } from "./useSelect";
 
-type AutoCompleteProps = Omit<
-  SelectProps<string>,
-  "options" | "allowCreate" | "createOption"
-> & {
-  /**
-   * auto-complete history
-   */
-  history?: string[];
-  /**
-   * expand input on edit
-   */
-  expandOnEdit?: boolean;
-  /**
-   * input change handler
-   */
-  onInput?: (query: string) => void;
-};
+type AutoCompleteProps = Omit<SelectProps<string>, "ref" | "options" | "allowCreate" | "createOption"> &
+  RefProp<HTMLTextAreaElement> & {
+    /**
+     * auto-complete history
+     */
+    history?: string[];
+    /**
+     * expand input on edit
+     */
+    expandOnEdit?: boolean;
+    /**
+     * input change handler
+     */
+    onInput?: (query: string) => void;
+  };
 
-export const AutoComplete = ({
-  ref,
-  name,
-  value,
-  invalid,
-  readOnly,
-  disabled,
-  required,
-  placeholder,
-  autoFocus,
-  expandOnEdit,
-  error,
-  history,
-  multiple,
-  onChange,
-  onSelect,
-  onInput,
-  onFocus,
-  onBlur,
-  onEnterPressed,
-  ...rest
-}: AutoCompleteProps) => {
-  const options = useRef(history);
+/**
+ * AutoComplete component for selecting or entering values with history suggestions.
+ * It supports multiple selections, history suggestions, and custom styling.
+ */
+export function AutoComplete(props: AutoCompleteProps) {
+  const {
+    ref,
+    name,
+    value,
+    invalid,
+    readOnly,
+    disabled,
+    placeholder,
+    autoFocus,
+    expandOnEdit,
+    history = EMPTY_ARRAY,
+    multiple,
+    allowClear,
+    onChange,
+    onSelect,
+    onInput,
+    onFocus,
+    onBlur,
+    onQuery,
+    onEnterPressed,
+  } = props;
+  const optionsRef = useRef(history);
   const submitRef = useRef<HTMLButtonElement>(null);
 
   const {
@@ -100,18 +103,19 @@ export const AutoComplete = ({
   } = useSelect({
     value,
     autoComplete: true,
-    options: options.current,
+    options: optionsRef.current,
     multiple,
     onChange,
     onSelect,
+    onQuery,
   });
 
-  const dropdownKey = useId();
+  const dropdownKeyId = useId();
 
   const { context, floatingStyles, refs } = useFloating({
     open: state.open,
-    onOpenChange: (open, evt, reason) => {
-      !open && (listRef.current = []);
+    onOpenChange: (open) => {
+      if (!open) listRef.current = [];
       setOpen(open);
     },
     strategy: "fixed",
@@ -143,28 +147,24 @@ export const AutoComplete = ({
       return list.find((item) => macthOption(item, typedString));
     },
     onMatch(index) {
-      state.open && setActiveIndex(index);
+      if (state.open) setActiveIndex(index);
     },
   });
 
-  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions(
-    [dismiss, navigation, typeahead],
-  );
+  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([dismiss, navigation, typeahead]);
 
   const referenceProps = useMemo(() => {
-    const props: AnyObject = getReferenceProps();
+    const props = getReferenceProps();
 
     return {
       ...props,
       onFocus,
       onBlur(evt: React.FocusEvent) {
-        if (
-          evt.relatedTarget?.closest(`[data-select-dropdown="${dropdownKey}"]`)
-        ) {
+        if (evt.relatedTarget?.closest(`[data-select-dropdown="${dropdownKeyId}"]`)) {
           refs.domReference.current?.querySelector("input")?.focus();
           return;
         }
-        state.open && handleChange(state.query);
+        if (state.open) handleChange(state.query);
         handleQuery("");
         setOpen(false);
         onBlur?.(evt);
@@ -180,19 +180,17 @@ export const AutoComplete = ({
             handleChange("");
             return false;
           } else {
-            onEnterPressed?.(evt);
-            submitRef.current?.click();
+            onEnterPressed?.(evt as React.KeyboardEvent<HTMLInputElement>);
+            setOpen(false);
           }
         } else if (evt.key === "Backspace") {
-          !state.query && multiple && handleRemove();
+          if (!state.query && multiple) handleRemove();
         } else if (["ArrowUp", "ArrowDown"].includes(evt.key)) {
-          if (
-            ["ArrowUp", "ArrowDown"].includes(evt.key) &&
-            state.activeIndex === null
-          ) {
+          if (["ArrowUp", "ArrowDown"].includes(evt.key) && state.activeIndex === null) {
             setActiveIndex(state.selectedIndex);
           }
           setTimeout(() => {
+            // @ts-expect-error ignore
             props.onKeyDown?.(evt);
           }, 50);
         }
@@ -200,33 +198,39 @@ export const AutoComplete = ({
     };
   }, [
     getReferenceProps,
-    onEnterPressed,
-    handleQuery,
     onFocus,
-    onBlur,
-    multiple,
-    refs,
+    dropdownKeyId,
+    state.open,
     state.query,
     state.activeIndex,
+    state.selectedIndex,
+    handleChange,
+    handleQuery,
+    setOpen,
+    onBlur,
+    refs.domReference,
+    listContentRef,
+    onEnterPressed,
+    multiple,
+    handleRemove,
+    setActiveIndex,
   ]);
 
   const floatingProps = useMemo(() => {
     return getFloatingProps({
-      "data-select-dropdown": dropdownKey,
-    } as AnyObject);
-  }, [getFloatingProps]);
+      "data-select-dropdown": dropdownKeyId,
+    } as KeyValue);
+  }, [dropdownKeyId, getFloatingProps]);
 
   const makeItemProps = useCallback(
     (item: AnyObject) => {
-      const selected = isArray(state.value)
-        ? state.value?.includes?.(item)
-        : state.value === item;
+      const selected = isArray(state.value) ? state.value?.includes?.(item) : state.value === item;
       return getItemProps({
         "data-selected": selected ? true : undefined,
         onClick() {
           handleChange(item);
         },
-      } as AnyObject);
+      } as KeyValue);
     },
     [getItemProps, handleChange, state.value],
   );
@@ -234,53 +238,53 @@ export const AutoComplete = ({
   const displayValue = useMemo(() => {
     if (isArray(state.value)) {
       return state.value.map((item: AnyObject, index) => (
+        // eslint-disable-next-line @eslint-react/no-array-index-key
         <Chip key={index} onRemove={() => handleRemove(index)}>
           {item}
         </Chip>
       ));
     }
-  }, [state.value, state.query, placeholder]);
+  }, [state.value, handleRemove]);
 
   useLayoutEffect(() => {
-    state.open &&
-      setTimeout(() => {
-        state.selectedIndex &&
+    if (state.open) {
+      const tmr = setTimeout(() => {
+        if (state.selectedIndex)
           listRef.current[state.selectedIndex]?.scrollIntoView({
             block: "center",
           });
       }, 100);
-  }, [state.open]);
+
+      return () => {
+        clearTimeout(tmr);
+      };
+    }
+  }, [listRef, state.open, state.selectedIndex]);
 
   const inputValue = useMemo(() => {
     if (multiple) return state.query ?? "";
 
-    return state.query ?? state.value ?? "";
+    return state.query ?? (state.value as string) ?? "";
   }, [multiple, state.query, state.value]);
 
   return (
     <InputWrapper
-      showClear={!isEmpty(state.value)}
+      isOpen={state.open}
+      showClear={allowClear && !isEmpty(state.value)}
       onClear={handleChange}
-      invalid={invalid}
-      readOnly={readOnly}
-      disabled={disabled}
-      required={required}
-      error={error}
-      wrapperRef={refs.setReference}
-      className={!multiple && expandOnEdit && state.open ? "!z-[99]" : ""}
+      ref={(el) => refs.setReference(el)}
+      className={!multiple && expandOnEdit && state.open ? "z-99!" : ""}
       floatingExpand={!multiple && expandOnEdit && state.open}
-      {...rest}
+      {...getWrapperProps(props)}
     >
       <div
         role="none"
         data-select-display="true"
-        className={classNames(
+        className={cn(
           "group flex-1 py-1 px-2 truncate text-start flex gap-1 relative min-h-5 justify-start",
           multiple ? "flex-wrap" : "flex-nowrap overflow-hidden",
         )}
-        onMouseUp={(e) =>
-          e.currentTarget.querySelector<HTMLElement>("input")?.focus()
-        }
+        onMouseUp={(e) => e.currentTarget.querySelector<HTMLElement>("input")?.focus()}
       >
         {displayValue}
         <textarea
@@ -290,10 +294,12 @@ export const AutoComplete = ({
           aria-invalid={invalid}
           data-testid={name}
           name={name}
-          size={1}
-          onInput={onInput}
+          ref={ref}
+          autoComplete="off"
+          onInput={(e) => onInput?.(e.currentTarget.value)}
+          {...{ autoFocus }}
           rows={!multiple && expandOnEdit && state.open ? 5 : 1}
-          className={classNames(
+          className={cn(
             "appearance-none bg-transparent outline-none border-none ring-0 flex-1 resize-none",
             disabled && "cursor-not-allowed pointer-events-none",
             multiple && "min-w-24 overflow-hidden",
@@ -303,32 +309,20 @@ export const AutoComplete = ({
           {...referenceProps}
           onChange={(evt) => handleQuery(evt.target.value)}
         />
-        <button
-          type="submit"
-          ref={submitRef}
-          tabIndex={-1}
-          className="opacity-0 absolute"
-        />
+        <button type="submit" ref={submitRef} tabIndex={-1} className="opacity-0 absolute" />
       </div>
       {state.loading && (
         <Icon
-          animate="spin"
-          className={classNames(
-            "flex-content p-2 z-0 order-9 text-muted pointer-events-none",
-          )}
-          icon={CoreIcons.spinner}
+          className={cn("flex-content p-2 z-0 order-9 text-muted pointer-events-none")}
+          icon="icon-[svg-spinners--eclipse]"
         />
       )}
       {state.open && !state.loading && (
-        <FloatingPortal>
-          <FloatingFocusManager
-            context={context}
-            initialFocus={-1}
-            visuallyHiddenDismiss
-          >
+        <FloatingPortal root={refs.domReference.current?.closest<HTMLElement>(".theme-base") ?? undefined}>
+          <FloatingFocusManager context={context} initialFocus={-1} visuallyHiddenDismiss closeOnFocusOut>
             <Options
-              ref={refs.setFloating}
-              className="outline shadow-lg max-h-[40vh] z-[var(--z-popover)]"
+              ref={(el) => refs.setFloating(el)}
+              className="outline shadow-lg max-h-[40vh] z-(--z-popover)"
               style={{
                 width: refs.reference.current?.getBoundingClientRect().width,
                 ...floatingStyles,
@@ -338,17 +332,13 @@ export const AutoComplete = ({
               active={state.activeIndex}
               itemRef={setItemRef}
               itemProps={makeItemProps}
-              empty={
-                <div className="text-muted text-sm px-2 py-1">
-                  No history available
-                </div>
-              }
+              empty={<div className="text-muted text-sm px-2 py-1">No history available</div>}
             >
-              {(item) => item}
+              {(item) => item as undefined}
             </Options>
           </FloatingFocusManager>
         </FloatingPortal>
       )}
     </InputWrapper>
   );
-};
+}