@noya-app/noya-designsystem 0.1.41 → 0.1.42

package/src/components/Combobox.tsx

@@ -1,5 +1,4 @@
-import { Size } from "@noya-app/noya-geometry";
-import { chunkBy, partition } from "@noya-app/noya-utils";
+import { DropdownChevronIcon } from "@noya-app/noya-icons";
 import React, {
   FocusEventHandler,
   ForwardedRef,
@@ -8,146 +7,33 @@ import React, {
   useCallback,
   useEffect,
   useImperativeHandle,
-  useLayoutEffect,
   useMemo,
   useRef,
   useState,
 } from "react";
+import { cx } from "../utils/classNames";
 import {
-  CompletionItem,
-  CompletionListItem,
-  CompletionSectionHeader,
-} from "../utils/completions";
-import { fuzzyFilter, fuzzyTokenize } from "../utils/fuzzyScorer";
+  ComboboxItem,
+  ComboboxOption,
+  ComboboxState,
+  InternalComboboxItem,
+  useComboboxState,
+} from "../utils/combobox";
 import { ActivityIndicator } from "./ActivityIndicator";
+import { ComboboxMenu } from "./ComboboxMenu";
 import { InputField, InputFieldSize } from "./InputField";
-import { IVirtualizedList, ListView } from "./ListView";
-import { Spacer } from "./Spacer";
+import { ListView } from "./ListView";
 import { Small } from "./Text";
 
-function filterWithGroupedSections(
-  items: (CompletionItem | CompletionSectionHeader)[],
-  query: string
-): CompletionListItem[] {
-  const sections = chunkBy(items, (a, b) => b.type !== "sectionHeader");
-
-  return sections.flatMap((section) => {
-    const [headers, regular] = partition(
-      section,
-      (item): item is CompletionSectionHeader => item.type === "sectionHeader"
-    );
-    const maxVisibleItems =
-      headers.length > 0 ? headers[0].maxVisibleItems : undefined;
-
-    const scoredItems = fuzzyFilter({
-      items: regular.map((item) => item.name),
-      query,
-    });
-
-    const usedIndexes = new Set(scoredItems.map((item) => item.index));
-    const extraItems = regular.flatMap((item, index): CompletionListItem[] =>
-      item.alwaysInclude && !usedIndexes.has(index)
-        ? [{ ...item, index, score: 0 }]
-        : []
-    );
-    let newItems = scoredItems
-      .map((item): CompletionListItem => ({ ...item, ...regular[item.index] }))
-      .concat(extraItems);
-
-    if (maxVisibleItems !== undefined) {
-      newItems = newItems.slice(0, maxVisibleItems);
-    }
-
-    if (newItems.length === 0) return [];
-
-    return [...headers, ...newItems];
-  });
-}
-
-interface CompletionMenuProps {
-  items: CompletionListItem[];
-  selectedIndex: number;
-  onSelectItem: (item: CompletionListItem) => void;
-  onHoverIndex: (index: number) => void;
-  listSize: Size;
-}
-
-export const CompletionMenu = memo(
-  forwardRef(function CompletionMenu(
-    {
-      items,
-      selectedIndex,
-      onSelectItem,
-      onHoverIndex,
-      listSize,
-    }: CompletionMenuProps,
-    forwardedRef: ForwardedRef<IVirtualizedList>
-  ) {
-    return (
-      <ListView.Root
-        ref={forwardedRef}
-        scrollable
-        keyExtractor={(item) => item.id}
-        data={items}
-        virtualized={listSize}
-        pressEventName="onPointerDown"
-        sectionHeaderVariant="label"
-        renderItem={(item, i) => {
-          if (item.type === "sectionHeader") {
-            return (
-              <ListView.Row key={item.id} isSectionHeader>
-                {item.name}
-              </ListView.Row>
-            );
-          }
-
-          const tokens = fuzzyTokenize({
-            item: item.name,
-            itemScore: item,
-          });
-
-          return (
-            <ListView.Row
-              key={item.id}
-              selected={i === selectedIndex}
-              onPress={() => onSelectItem(item)}
-              onHoverChange={(hovered) => {
-                if (hovered) {
-                  onHoverIndex(i);
-                }
-              }}
-            >
-              {tokens.map((token, j) => (
-                <span
-                  key={j}
-                  className={`${token.type === "match" ? "font-bold" : "font-normal"} whitespace-pre`}
-                >
-                  {token.text}
-                </span>
-              ))}
-              {item.icon && (
-                <>
-                  <Spacer.Horizontal />
-                  {item.icon}
-                </>
-              )}
-            </ListView.Row>
-          );
-        }}
-      />
-    );
-  })
-);
-
-export type InputFieldWithCompletionsProps = {
+export type ComboboxProps = {
   id?: string;
   loading?: boolean;
   initialValue?: string;
   placeholder?: string;
-  items: (CompletionItem | CompletionSectionHeader)[];
+  items: ComboboxItem[];
   onChange?: (value: string) => void;
-  onHoverItem?: (item: CompletionItem | undefined) => void;
-  onSelectItem?: (item: CompletionItem) => void;
+  onHoverItem?: (item: ComboboxOption | undefined) => void;
+  onSelectItem?: (item: ComboboxOption) => void;
   onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
   onBlur?: (didSubmit: boolean, value: string) => void;
   onDeleteWhenEmpty?: () => void;
@@ -156,11 +42,14 @@ export type InputFieldWithCompletionsProps = {
   className?: string;
   label?: React.ReactNode;
   children?: React.ReactNode;
-  hideChildrenWhenFocused?: boolean;
   hideMenuWhenEmptyValue?: boolean;
+  allowArbitraryValues?: boolean;
+  readOnly?: boolean;
+  tabBehavior?: "autocomplete" | "select";
+  openMenuBehavior?: "showAllItems" | "showFilteredItems";
 };
 
-export interface InputFieldWithCompletionsRef {
+export interface ComboboxRef {
   focus(): void;
   setValue(value: string): void;
   selectAllInputText(): void;
@@ -185,87 +74,35 @@ export const Combobox = memo(
       className,
       label,
       children,
-      hideChildrenWhenFocused = false,
       hideMenuWhenEmptyValue = false,
-    }: InputFieldWithCompletionsProps,
-    forwardedRef: ForwardedRef<InputFieldWithCompletionsRef>
+      allowArbitraryValues = false,
+      readOnly = false,
+      tabBehavior = "select",
+      openMenuBehavior = "showFilteredItems",
+    }: ComboboxProps,
+    forwardedRef: ForwardedRef<ComboboxRef>
   ) {
     const ref = useRef<HTMLInputElement>(null);
-
-    const [isFocused, setIsFocused] = useState(false);
-    const [state, _setState] = useState({
-      filter: initialValue,
-      selectedIndex: 0,
-    });
-
-    const updateState = useCallback(
-      (
-        newState: { filter?: string; selectedIndex?: number },
-        hoverItem?: "resetHover"
-      ) => {
-        const nextState = { ...state, ...newState };
-        const nextItems = filterWithGroupedSections(items, nextState.filter);
-
-        // If we would be selecting a header, find the next valid index
-        if (nextItems[nextState.selectedIndex]?.type === "sectionHeader") {
-          nextState.selectedIndex = getNextIndex(
-            nextItems,
-            nextState.selectedIndex,
-            "next",
-            (item) => item.type === "sectionHeader"
-          );
-        }
-
-        if (hoverItem === "resetHover") {
-          onHoverItem?.(undefined);
-        } else {
-          const nextItem = nextItems[nextState.selectedIndex];
-
-          if (nextItem && nextItem.type !== "sectionHeader") {
-            onHoverItem?.(nextItem);
-          } else {
-            onHoverItem?.(undefined);
-          }
-        }
-
-        _setState(nextState);
-        if (newState.filter !== undefined) {
-          onChange?.(newState.filter);
-        }
-      },
-      [items, onChange, onHoverItem, state]
+    const [comboboxState] = useState(
+      () => new ComboboxState(items, initialValue, allowArbitraryValues)
     );
+    const state = useComboboxState(comboboxState);
+    const [isFocused, setIsFocused] = useState(false);
+    const listRef = useRef<ListView.VirtualizedList>(null);
+    const [shouldBlur, setShouldBlur] = useState(false);
 
-    const initialValueRef = useRef(initialValue);
-
-    useLayoutEffect(() => {
-      if (initialValueRef.current === initialValue) return;
-      initialValueRef.current = initialValue;
-      updateState({ filter: initialValue });
-    }, [initialValue, updateState]);
-
-    const { filter, selectedIndex } = state;
-
-    const listRef = React.useRef<ListView.VirtualizedList>(null);
-
-    const filteredItems = useMemo(
-      () => filterWithGroupedSections(items, filter),
-      [items, filter]
-    );
+    // Keep state in sync with items prop
+    useEffect(() => {
+      comboboxState.setItems(items);
+    }, [items, comboboxState]);
 
-    const [normalItems, sectionHeaderItems] = partition(
-      filteredItems,
-      (item) => item.type !== "sectionHeader"
-    );
+    const { filter, selectedIndex, filteredItems } = state;
 
-    const height = Math.min(
-      ListView.calculateHeight(
-        normalItems.length,
-        sectionHeaderItems.length,
-        "label"
-      ),
-      ListView.rowHeight * 10.5
-    );
+    const shouldShowMenu = useMemo(() => {
+      if (!isFocused) return false;
+      if (hideMenuWhenEmptyValue && filter === "") return false;
+      return true;
+    }, [hideMenuWhenEmptyValue, filter, isFocused]);
 
     useEffect(() => {
       if (listRef.current) {
@@ -273,99 +110,122 @@ export const Combobox = memo(
       }
     }, [selectedIndex]);
 
-    // Keep track of the last submitted value so we can detect whether a blur
-    // event was caused by selecting an item or not
-    const lastSubmittedValueRef = useRef<
-      { filter: string; itemName: string } | undefined
-    >(undefined);
-
-    const selectItem = useCallback(
-      (item: CompletionListItem) => {
-        if (item.type === "sectionHeader") return;
-
-        lastSubmittedValueRef.current = {
-          filter,
-          itemName: item.name,
-        };
-
-        onSelectItem?.(item);
-        onHoverItem?.(undefined);
-
-        if (ref && typeof ref === "object") {
-          ref.current?.blur();
-        }
-      },
-      [filter, onSelectItem, onHoverItem, ref]
-    );
-
-    const handleChange = useCallback(
-      (value: string) => updateState({ selectedIndex: 0, filter: value }),
-      [updateState]
-    );
-
     const handleBlur = useCallback(() => {
+      ref.current?.blur();
+      comboboxState.reset(initialValue);
+      onBlur?.(state.filter === state.lastSubmittedValue.filter, filter);
       setIsFocused(false);
-      const didSubmit = lastSubmittedValueRef.current?.filter === filter;
-      updateState({ selectedIndex: 0, filter: initialValue }, "resetHover");
-      onBlur?.(didSubmit, filter);
-    }, [filter, initialValue, onBlur, updateState]);
+    }, [filter, initialValue, onBlur, state, comboboxState]);
 
     const handleFocus: FocusEventHandler<HTMLInputElement> = useCallback(
       (event) => {
         setIsFocused(true);
-        updateState({ selectedIndex: 0, filter: initialValue });
+        comboboxState.reset(
+          openMenuBehavior === "showAllItems" ? "" : initialValue
+        );
+        if (ref.current) {
+          const length = ref.current.value.length;
+          ref.current.setSelectionRange(length, length);
+        }
         onFocus?.(event);
       },
-      [initialValue, onFocus, updateState]
+      [initialValue, onFocus, openMenuBehavior, comboboxState]
+    );
+
+    const handleUpdateSelection = useCallback(
+      (item: InternalComboboxItem) => {
+        if (item.type === "sectionHeader") return;
+
+        const selectedItem = comboboxState.selectCurrentItem(item);
+        if (!selectedItem || selectedItem.type === "sectionHeader") return;
+
+        onSelectItem?.(selectedItem);
+        onHoverItem?.(undefined);
+        setShouldBlur(true);
+      },
+      [onSelectItem, onHoverItem, comboboxState]
     );
 
     const handleIndexChange = useCallback(
-      (index: number) => updateState({ selectedIndex: index }),
-      [updateState]
+      (index: number) => {
+        comboboxState.setSelectedIndex(index);
+        const item = comboboxState.getSelectedItem();
+        if (item && item.type !== "sectionHeader") {
+          onHoverItem?.(item);
+        } else {
+          onHoverItem?.(undefined);
+        }
+      },
+      [onHoverItem, comboboxState]
     );
 
     const handleKeyDown = useCallback(
       (event: React.KeyboardEvent<HTMLInputElement>) => {
         let handled = false;
+        const item = comboboxState.getSelectedItem();
 
         switch (event.key) {
           case "ArrowDown":
           case "ArrowUp":
-            handleIndexChange(
-              getNextIndex(
-                filteredItems,
-                selectedIndex,
-                event.key === "ArrowDown" ? "next" : "previous",
-                (item) => item.type === "sectionHeader"
-              )
+            comboboxState.moveSelection(
+              event.key === "ArrowDown" ? "down" : "up"
             );
-
             handled = true;
             break;
-          case "Enter": {
-            const item = filteredItems[selectedIndex];
-            if (item) {
-              selectItem(item);
+          case "Enter":
+          case "Return": {
+            if (shouldShowMenu) {
+              if (item) {
+                handleUpdateSelection(item);
+              } else if (allowArbitraryValues) {
+                // If no item is selected but arbitrary filters are allowed,
+                // submit the current filter value
+                comboboxState.submitArbitraryFilter(filter);
+                handleBlur();
+              } else {
+                comboboxState.restoreLastSubmittedValue();
+              }
+            } else {
+              ref.current?.focus();
             }
-
-            handled = true;
             break;
           }
           case "Tab": {
-            // Update the filter to the selected item
-            const item = filteredItems[selectedIndex];
             if (item) {
-              handleChange(item.name);
+              if (event.shiftKey) {
+                break;
+              }
+
+              if (tabBehavior === "select") {
+                handleUpdateSelection(item);
+                handled = true;
+              } else {
+                // In autocomplete mode:
+                // 1. Always set the filter to the selected item
+                // 2. If the filter matches the item name, submit it
+                event.preventDefault();
+                event.stopPropagation();
+                if (item.name === filter) {
+                  handleUpdateSelection(item);
+                } else {
+                  comboboxState.setFilter(item.name);
+                  ref.current?.focus();
+                }
+                handled = true;
+              }
+            } else if (allowArbitraryValues && filter !== "") {
+              // Allow submitting arbitrary filter on Tab
+              comboboxState.submitArbitraryFilter(filter);
+              handleBlur();
+              handled = true;
             }
-
-            handled = true;
             break;
           }
           case "Escape":
-            if (ref && typeof ref === "object") {
-              ref.current?.blur();
+            if (ref.current) {
+              ref.current.blur();
+              comboboxState.restoreLastSubmittedValue();
             }
-
             handled = true;
             break;
           case "Backspace":
@@ -373,7 +233,6 @@ export const Combobox = memo(
             if (filter === "") {
               onDeleteWhenEmpty?.();
             }
-
             break;
           }
         }
@@ -384,61 +243,117 @@ export const Combobox = memo(
         }
       },
       [
-        handleIndexChange,
-        filteredItems,
-        selectedIndex,
-        ref,
-        selectItem,
-        handleChange,
         filter,
+        handleUpdateSelection,
+        handleBlur,
         onDeleteWhenEmpty,
+        shouldShowMenu,
+        comboboxState,
+        tabBehavior,
+        allowArbitraryValues,
       ]
     );
 
-    const display = !filter && hideMenuWhenEmptyValue ? "none" : "flex";
+    const handleChange = useCallback(
+      (value: string) => {
+        if (readOnly) return;
+        comboboxState.setFilter(value);
+        onChange?.(value);
+      },
+      [onChange, readOnly, comboboxState]
+    );
 
-    const typeaheadValue = filteredItems[selectedIndex]?.name;
+    const typeaheadValue = comboboxState.getTypeaheadValue();
 
     useImperativeHandle(forwardedRef, () => ({
       focus: () => {
         ref.current?.focus();
+        if (ref.current) {
+          const length = ref.current.value.length;
+          ref.current.setSelectionRange(length, length);
+        }
       },
       setValue: (value: string) => {
-        handleChange(value);
+        comboboxState.setFilter(value);
       },
       selectAllInputText: () => {
         ref.current?.setSelectionRange(0, ref.current.value.length);
       },
     }));
 
+    const handleChevronClick = useCallback(
+      (event: React.MouseEvent) => {
+        event.stopPropagation();
+
+        if (shouldShowMenu) {
+          handleBlur();
+          return;
+        }
+
+        // Use openMenuBehavior consistently for both focus and chevron click
+        comboboxState.reset(
+          openMenuBehavior === "showAllItems" ? "" : initialValue
+        );
+        ref.current?.focus();
+      },
+      [
+        shouldShowMenu,
+        openMenuBehavior,
+        initialValue,
+        handleBlur,
+        comboboxState,
+      ]
+    );
+
+    useEffect(() => {
+      if (!shouldBlur) return;
+      ref.current?.focus();
+      handleBlur();
+      setShouldBlur(false);
+    }, [shouldBlur, handleBlur]);
+
     return (
       <InputField.Root
         id={id}
         size={size}
-        labelPosition="end"
+        sideOffset={6}
         renderPopoverContent={({ width }) => {
+          const height = Math.min(
+            ListView.calculateHeight(
+              filteredItems.filter((item) => item.type !== "sectionHeader")
+                .length,
+              filteredItems.filter((item) => item.type === "sectionHeader")
+                .length,
+              "label"
+            ),
+            ListView.rowHeight * 10.5
+          );
+
           const listSize = { width, height };
 
           return (
             <div
-              className={`flex flex-col ${!filter && hideMenuWhenEmptyValue ? "none" : "flex"}`}
-              style={{
-                flex: `0 0 ${height}px`,
-              }}
+              className={cx(
+                "flex-col",
+                shouldShowMenu && !readOnly ? "flex" : "hidden"
+              )}
             >
-              {filteredItems.length > 0 ? (
-                <CompletionMenu
+              {filteredItems.length > 0 && !loading ? (
+                <ComboboxMenu
                   ref={listRef}
                   items={filteredItems}
                   selectedIndex={selectedIndex}
-                  onSelectItem={selectItem}
+                  onSelectItem={handleUpdateSelection}
                   onHoverIndex={handleIndexChange}
                   listSize={listSize}
+                  style={{
+                    flex: `0 0 ${height}px`,
+                  }}
                 />
               ) : (
-                <div className="flex flex-col h-[100px] p-5 items-center justify-center">
+                <div className="flex flex-col h-[50px] p-5 items-center justify-center">
                   <Small className="text-text-disabled">
-                    {loading ? "Loading" : "No results"}
+                    {loading ? "Loading..." : "No results"}
                   </Small>
                 </div>
               )}
@@ -454,7 +369,7 @@ export const Combobox = memo(
           onChange={handleChange}
           onBlur={handleBlur}
           onFocusCapture={handleFocus}
-          onKeyDown={handleKeyDown}
+          onKeyDown={!readOnly ? handleKeyDown : undefined}
           style={style}
           className={className}
           autoCapitalize="off"
@@ -464,56 +379,37 @@ export const Combobox = memo(
           aria-autocomplete="list"
           aria-haspopup="listbox"
           aria-owns="component-listbox"
-          aria-expanded={isFocused && display !== "none"}
+          aria-expanded={shouldShowMenu}
           aria-controls="component-listbox"
+          {...(readOnly ? { readOnly: true } : {})}
         />
         {filter &&
           typeaheadValue &&
           typeaheadValue.toLowerCase().startsWith(filter.toLowerCase()) && (
-            <InputField.Typeahead value={typeaheadValue} prefix={filter} />
+            <InputField.Typeahead
+              value={typeaheadValue}
+              prefix={filter}
+              isFocused={isFocused}
+            />
           )}
-        {(!isFocused || !hideChildrenWhenFocused) && children}
-        {loading && isFocused && (
+        {children}
+        {loading && (
           <InputField.Label>
             <ActivityIndicator />
           </InputField.Label>
         )}
-        {label && <InputField.Label>{label}</InputField.Label>}
+        <InputField.Label>{label}</InputField.Label>
+        {!readOnly && (
+          <InputField.Button variant="floating" onClick={handleChevronClick}>
+            <DropdownChevronIcon
+              className={cx(
+                "transition-transform duration-100",
+                shouldShowMenu ? "rotate-180" : "rotate-0"
+              )}
+            />
+          </InputField.Button>
+        )}
       </InputField.Root>
     );
   })
 );
-
-function getNextIndex<T>(
-  items: T[],
-  currentIndex: number,
-  direction: "next" | "previous",
-  isDisabled: (item: T) => boolean
-): number {
-  // Make sure the current index is within bounds
-  currentIndex =
-    currentIndex < 0
-      ? 0
-      : currentIndex >= items.length
-        ? items.length - 1
-        : currentIndex;
-
-  // If there are no valid items in the array, return -1
-  if (items.every(isDisabled)) return -1;
-
-  let nextIndex = currentIndex;
-
-  do {
-    // Move to the next or previous index, wrapping around if necessary
-    if (direction === "next") {
-      nextIndex = (nextIndex + 1) % items.length;
-    } else {
-      nextIndex = (nextIndex - 1 + items.length) % items.length;
-    }
-
-    // If we've looped all the way around without finding a valid item, return the current index
-    if (nextIndex === currentIndex) return currentIndex;
-  } while (isDisabled(items[nextIndex]));
-
-  return nextIndex;
-}