@inshorts/glint-ui 0.3.0

package/src/autocomplete.tsx

@@ -0,0 +1,666 @@
+"use client";
+
+import * as React from "react";
+import { createPortal } from "react-dom";
+import { Check, ChevronDown, Search, X } from "lucide-react";
+
+import { useHasMounted } from "./modal";
+import { cn } from "./utils";
+
+/** Room the list wants below the control before it gives up and flips. */
+const PREFERRED_LIST_HEIGHT = 224;
+/** Below this there is no point opening downward at all. */
+const MIN_LIST_HEIGHT = 120;
+const VIEWPORT_MARGIN = 8;
+const ANCHOR_GAP = 4;
+
+type DropdownPosition = {
+  left: number;
+  width: number;
+  maxHeight: number;
+  /** One of the two is set: `top` opens downward, `bottom` opens upward. */
+  top?: number;
+  bottom?: number;
+};
+
+export type AutocompleteOption = {
+  value: string;
+  label: string;
+  disabled?: boolean;
+};
+
+type BaseAutocompleteProps = {
+  options: AutocompleteOption[];
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+  emptyMessage?: string;
+  id?: string;
+  /**
+   * Accessible name for the combobox.
+   *
+   * `Field` renders its label as a `<span>`, so without this the control is
+   * announced as an unnamed combobox and cannot be queried by name — the
+   * filter toolbars work around it by counting comboboxes on the page.
+   */
+  ariaLabel?: string;
+  /**
+   * `compact` is the spreadsheet cell: no search icon, no min height, and a
+   * list wide enough to read a name. The closed control still shows the
+   * chosen label, and typing filters the list.
+   */
+  size?: "default" | "compact";
+  /**
+   * Type a value and press Enter (or paste a list) to add it, like antd
+   * `Select mode="tags"`. With `multiple` a pasted list is split into several
+   * values; on a single-value control it accepts one typed value the options
+   * do not offer — an id for a record the list has not loaded, say.
+   */
+  creatable?: boolean;
+  /**
+   * Shows the clear button once a value is chosen. Off for dropdowns that
+   * always keep one of their options, where clearing would blank a required
+   * field.
+   */
+  clearable?: boolean;
+};
+
+type SingleAutocompleteProps = BaseAutocompleteProps & {
+  multiple?: false;
+  value: string;
+  onChange: (value: string) => void;
+};
+
+type MultipleAutocompleteProps = BaseAutocompleteProps & {
+  multiple: true;
+  value: string[];
+  onChange: (value: string[]) => void;
+};
+
+export type AutocompleteProps =
+  SingleAutocompleteProps | MultipleAutocompleteProps;
+
+function normalizeQuery(query: string) {
+  return query.trim().toLowerCase();
+}
+
+function filterOptions(options: AutocompleteOption[], query: string) {
+  const normalized = normalizeQuery(query);
+  if (!normalized) return options;
+
+  return options.filter(
+    (option) =>
+      option.label.toLowerCase().includes(normalized) ||
+      option.value.toLowerCase().includes(normalized),
+  );
+}
+
+function getOptionLabel(options: AutocompleteOption[], value: string) {
+  return options.find((option) => option.value === value)?.label ?? value;
+}
+
+function parseTagTokens(raw: string): string[] {
+  const seen = new Set<string>();
+  const tokens: string[] = [];
+  for (const part of raw.split(/[\s,]+/)) {
+    const token = part.trim();
+    if (!token || seen.has(token)) continue;
+    seen.add(token);
+    tokens.push(token);
+  }
+  return tokens;
+}
+
+export function Autocomplete(props: AutocompleteProps) {
+  const {
+    options,
+    placeholder = "Search…",
+    disabled = false,
+    className,
+    emptyMessage = "No results found",
+    id,
+    ariaLabel,
+    size = "default",
+    creatable = false,
+    clearable = true,
+  } = props;
+
+  const multiple = props.multiple ?? false;
+  const singleValue = multiple
+    ? undefined
+    : (props as SingleAutocompleteProps).value;
+  const multipleValue = multiple
+    ? (props as MultipleAutocompleteProps).value
+    : undefined;
+
+  // Memoized so dependent callbacks below keep stable identities across renders.
+  const selectedValues = React.useMemo<string[]>(() => {
+    if (multiple) return multipleValue ?? [];
+    return singleValue ? [singleValue] : [];
+  }, [multiple, multipleValue, singleValue]);
+
+  const onSingleChange = !multiple
+    ? (props as SingleAutocompleteProps).onChange
+    : undefined;
+  const onMultipleChange = multiple
+    ? (props as MultipleAutocompleteProps).onChange
+    : undefined;
+
+  const containerRef = React.useRef<HTMLDivElement>(null);
+  const dropdownRef = React.useRef<HTMLDivElement>(null);
+  const inputRef = React.useRef<HTMLInputElement>(null);
+  const listRef = React.useRef<HTMLUListElement>(null);
+  const ignoreBlurRef = React.useRef(false);
+
+  const mounted = useHasMounted();
+  const [open, setOpen] = React.useState(false);
+  const [position, setPosition] = React.useState<DropdownPosition | null>(null);
+  const [query, setQuery] = React.useState("");
+  const [highlightedIndex, setHighlightedIndex] = React.useState(0);
+
+  const filteredOptions = React.useMemo(
+    () => filterOptions(options, query),
+    [options, query],
+  );
+
+  // Clamp during render instead of via a setState-in-effect: if the option list
+  // shrinks below the stored index, fall back to the last valid row.
+  const safeHighlightedIndex =
+    highlightedIndex >= filteredOptions.length
+      ? Math.max(filteredOptions.length - 1, 0)
+      : highlightedIndex;
+
+  const close = React.useCallback(() => {
+    setOpen(false);
+    setQuery("");
+    setHighlightedIndex(0);
+  }, []);
+
+  const openDropdown = React.useCallback(() => {
+    if (disabled) return;
+    setOpen(true);
+    setHighlightedIndex(0);
+  }, [disabled]);
+
+  const commitSingleValue = React.useCallback(
+    (value: string) => {
+      if (!multiple) {
+        onSingleChange?.(value);
+        close();
+      }
+    },
+    [close, multiple, onSingleChange],
+  );
+
+  const toggleMultipleValue = React.useCallback(
+    (value: string) => {
+      if (!multiple || !onMultipleChange) return;
+
+      onMultipleChange(
+        selectedValues.includes(value)
+          ? selectedValues.filter((item) => item !== value)
+          : [...selectedValues, value],
+      );
+      setQuery("");
+      setHighlightedIndex(0);
+    },
+    [multiple, onMultipleChange, selectedValues],
+  );
+
+  const commitCustomValues = React.useCallback(
+    (raw: string) => {
+      if (!creatable) return;
+
+      if (!multiple) {
+        const value = raw.trim();
+        if (!value) return;
+        commitSingleValue(value);
+        return;
+      }
+
+      if (!onMultipleChange) return;
+      const tokens = parseTagTokens(raw);
+      if (!tokens.length) return;
+      const next = [...selectedValues];
+      for (const token of tokens) {
+        if (!next.includes(token)) next.push(token);
+      }
+      onMultipleChange(next);
+      setQuery("");
+      setHighlightedIndex(0);
+    },
+    [commitSingleValue, creatable, multiple, onMultipleChange, selectedValues],
+  );
+
+  const removeValue = React.useCallback(
+    (value: string) => {
+      if (!multiple || !onMultipleChange) return;
+      onMultipleChange(selectedValues.filter((item) => item !== value));
+      window.requestAnimationFrame(() => inputRef.current?.focus());
+    },
+    [multiple, onMultipleChange, selectedValues],
+  );
+
+  const selectOption = React.useCallback(
+    (option: AutocompleteOption) => {
+      if (option.disabled) return;
+
+      ignoreBlurRef.current = true;
+      window.setTimeout(() => {
+        ignoreBlurRef.current = false;
+      }, 0);
+
+      if (multiple) {
+        toggleMultipleValue(option.value);
+        window.requestAnimationFrame(() => inputRef.current?.focus());
+        return;
+      }
+
+      commitSingleValue(option.value);
+    },
+    [commitSingleValue, multiple, toggleMultipleValue],
+  );
+
+  const selectHighlighted = React.useCallback(() => {
+    const option = filteredOptions[safeHighlightedIndex];
+    if (!option) return;
+    selectOption(option);
+  }, [filteredOptions, safeHighlightedIndex, selectOption]);
+
+  React.useEffect(() => {
+    if (!open) return;
+
+    function handlePointerDown(event: PointerEvent) {
+      const target = event.target as Node;
+      // The list is portalled to the body, so containment has to be checked
+      // against both halves or picking an option would close the control
+      // before the choice registered.
+      if (
+        containerRef.current?.contains(target) ||
+        dropdownRef.current?.contains(target)
+      ) {
+        return;
+      }
+      close();
+    }
+
+    document.addEventListener("pointerdown", handlePointerDown);
+    return () => document.removeEventListener("pointerdown", handlePointerDown);
+  }, [close, open]);
+
+  /*
+    The list is measured against the viewport and rendered in a portal.
+
+    Anchored inside the control it was clipped by whatever `overflow` ancestor
+    happened to be above it — inside a dialog body that is the scroll region,
+    so the last field on a form showed one row of a six-hundred-row list. It
+    opens downward when there is room, upward when there is not, and shrinks to
+    what is left when neither side can take the whole list.
+  */
+  React.useLayoutEffect(() => {
+    // Not cleared on close: the render is gated on `open`, and the layout
+    // effect recomputes before the next paint, so a stale value is never seen.
+    if (!open) return;
+
+    const update = () => {
+      const anchor = containerRef.current;
+      if (!anchor) return;
+      const rect = anchor.getBoundingClientRect();
+      const below =
+        window.innerHeight - rect.bottom - ANCHOR_GAP - VIEWPORT_MARGIN;
+      const above = rect.top - ANCHOR_GAP - VIEWPORT_MARGIN;
+      const flip =
+        below < Math.min(PREFERRED_LIST_HEIGHT, MIN_LIST_HEIGHT) &&
+        above > below;
+      const room = flip ? above : below;
+      const width = Math.max(rect.width, size === "compact" ? 220 : 0);
+      const left = Math.max(
+        VIEWPORT_MARGIN,
+        Math.min(rect.left, window.innerWidth - width - VIEWPORT_MARGIN),
+      );
+      setPosition({
+        left,
+        width,
+        maxHeight: Math.max(
+          MIN_LIST_HEIGHT,
+          Math.min(PREFERRED_LIST_HEIGHT, room),
+        ),
+        ...(flip
+          ? { bottom: window.innerHeight - rect.top + ANCHOR_GAP }
+          : { top: rect.bottom + ANCHOR_GAP }),
+      });
+    };
+
+    update();
+    // Capture, so a scroll in any ancestor — the dialog body included — moves
+    // the list with its control instead of leaving it behind.
+    window.addEventListener("scroll", update, true);
+    window.addEventListener("resize", update);
+    return () => {
+      window.removeEventListener("scroll", update, true);
+      window.removeEventListener("resize", update);
+    };
+  }, [open, size]);
+
+  React.useEffect(() => {
+    if (!open || !listRef.current) return;
+
+    const highlighted = listRef.current.children[safeHighlightedIndex] as
+      HTMLElement | undefined;
+
+    highlighted?.scrollIntoView({ block: "nearest" });
+  }, [safeHighlightedIndex, open]);
+
+  function handleInputKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {
+    if (disabled) return;
+
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        if (!open) {
+          openDropdown();
+          return;
+        }
+        setHighlightedIndex(
+          Math.min(safeHighlightedIndex + 1, filteredOptions.length - 1),
+        );
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        if (!open) {
+          openDropdown();
+          return;
+        }
+        setHighlightedIndex(Math.max(safeHighlightedIndex - 1, 0));
+        break;
+      case "Enter":
+        event.preventDefault();
+        if (creatable && query.trim()) {
+          // A single-value control filters its list as you type, so a match
+          // is what Enter means there; only an unmatched query is taken as a
+          // new value. Tags have no such list to defer to.
+          if (multiple || filteredOptions.length === 0) {
+            commitCustomValues(query);
+            return;
+          }
+        }
+        if (!open) {
+          openDropdown();
+          return;
+        }
+        selectHighlighted();
+        break;
+      case ",":
+        if (creatable && multiple && query.trim()) {
+          event.preventDefault();
+          commitCustomValues(query);
+        }
+        break;
+      case "Escape":
+        event.preventDefault();
+        close();
+        break;
+      case "Backspace":
+        if (multiple && query.length === 0 && selectedValues.length > 0) {
+          event.preventDefault();
+          removeValue(selectedValues[selectedValues.length - 1]);
+        }
+        break;
+      case "Tab":
+        close();
+        break;
+      default:
+        break;
+    }
+  }
+
+  const displayValue =
+    !multiple && !open && !query && selectedValues[0]
+      ? getOptionLabel(options, selectedValues[0])
+      : query;
+
+  const inputPlaceholder =
+    multiple && selectedValues.length > 0 ? "" : placeholder;
+
+  const createLabel = query.trim();
+  const canCreate =
+    creatable && Boolean(createLabel) && !selectedValues.includes(createLabel);
+
+  const listboxId = id ? `${id}-listbox` : undefined;
+
+  return (
+    <div
+      ref={containerRef}
+      className={cn(
+        "relative",
+        size === "compact" ? "w-auto min-w-24" : "w-full",
+        className,
+      )}
+    >
+      <div
+        className={cn(
+          "border-border bg-background flex w-full cursor-pointer items-center rounded-md border transition-colors",
+          "focus-within:border-ring focus-within:ring-ring/30 focus-within:ring-2",
+          size === "compact"
+            ? "min-h-0 gap-0.5 border-transparent bg-transparent px-1 py-0.5 text-xs shadow-none"
+            : "min-h-9 gap-1.5 px-2 py-1.5 text-sm shadow-sm",
+          disabled && "cursor-not-allowed opacity-50",
+          open && "border-ring ring-ring/30 ring-2",
+        )}
+        onPointerDown={(event) => {
+          if (disabled) return;
+          if ((event.target as HTMLElement).closest("[data-option]")) return;
+          if ((event.target as HTMLElement).closest("[data-chip-remove]"))
+            return;
+
+          if (!(event.target as HTMLElement).closest("input")) {
+            event.preventDefault();
+            inputRef.current?.focus();
+          }
+
+          openDropdown();
+        }}
+      >
+        {size === "compact" ? null : (
+          <Search className="text-muted-foreground size-4 shrink-0" />
+        )}
+
+        <div className="flex min-w-0 flex-1 flex-wrap items-center gap-1">
+          {multiple &&
+            selectedValues.map((value) => (
+              <span
+                key={value}
+                className="bg-primary/10 text-primary inline-flex max-w-full items-center gap-1 rounded-md px-2 py-0.5 text-xs font-medium"
+              >
+                <span className="truncate">
+                  {getOptionLabel(options, value)}
+                </span>
+                <button
+                  type="button"
+                  data-chip-remove
+                  className="text-primary/70 hover:bg-primary/15 hover:text-primary rounded-sm transition"
+                  onPointerDown={(event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    removeValue(value);
+                  }}
+                  aria-label={`Remove ${getOptionLabel(options, value)}`}
+                >
+                  <X className="size-3" />
+                </button>
+              </span>
+            ))}
+
+          <input
+            ref={inputRef}
+            id={id}
+            type="text"
+            role="combobox"
+            aria-label={ariaLabel}
+            aria-expanded={open}
+            aria-controls={listboxId}
+            aria-autocomplete="list"
+            disabled={disabled}
+            value={displayValue}
+            placeholder={inputPlaceholder}
+            className={cn(
+              "placeholder:text-muted-foreground flex-1 bg-transparent outline-none",
+              size === "compact" ? "min-w-0" : "min-w-[6rem]",
+            )}
+            onFocus={openDropdown}
+            onBlur={() => {
+              if (ignoreBlurRef.current) return;
+              close();
+            }}
+            onChange={(event) => {
+              setQuery(event.target.value);
+              setHighlightedIndex(0);
+              if (!open) setOpen(true);
+            }}
+            onKeyDown={handleInputKeyDown}
+            onPaste={(event) => {
+              if (!creatable || !multiple) return;
+              const text = event.clipboardData.getData("text");
+              if (!/[\s,]/.test(text)) return;
+              event.preventDefault();
+              commitCustomValues(text);
+            }}
+          />
+        </div>
+
+        {clearable && !multiple && selectedValues[0] && !disabled && (
+          <button
+            type="button"
+            className="text-muted-foreground hover:bg-muted hover:text-foreground rounded-sm p-0.5 transition"
+            onPointerDown={(event) => {
+              event.preventDefault();
+              event.stopPropagation();
+              onSingleChange?.("");
+              setQuery("");
+              inputRef.current?.focus();
+            }}
+            aria-label="Clear selection"
+          >
+            <X className="size-3.5" />
+          </button>
+        )}
+
+        <ChevronDown
+          className={cn(
+            "text-muted-foreground shrink-0 transition-transform",
+            size === "compact" ? "size-3" : "size-4",
+            open && "rotate-180",
+          )}
+        />
+      </div>
+
+      {open && mounted && position
+        ? createPortal(
+            <div
+              ref={dropdownRef}
+              data-autocomplete-dropdown
+              style={{
+                position: "fixed",
+                left: position.left,
+                width: position.width,
+                top: position.top,
+                bottom: position.bottom,
+                // Above the modal shell (z-100) it is usually opened inside.
+                zIndex: 200,
+              }}
+              className="border-border bg-background overflow-hidden rounded-md border shadow-lg"
+            >
+              <ul
+                ref={listRef}
+                id={listboxId}
+                role="listbox"
+                aria-multiselectable={multiple || undefined}
+                className="overflow-y-auto p-1"
+                style={{ maxHeight: position.maxHeight }}
+              >
+                {filteredOptions.length === 0 && !canCreate ? (
+                  <li className="text-muted-foreground px-3 py-6 text-center text-sm">
+                    {emptyMessage}
+                  </li>
+                ) : (
+                  <>
+                    {filteredOptions.map((option, index) => {
+                      const isSelected = selectedValues.includes(option.value);
+                      const isHighlighted = index === safeHighlightedIndex;
+
+                      return (
+                        <li
+                          key={option.value}
+                          data-option
+                          role="option"
+                          aria-selected={isSelected}
+                          aria-disabled={option.disabled || undefined}
+                          className={cn(
+                            "flex cursor-pointer items-center gap-2 rounded-sm transition-colors",
+                            size === "compact"
+                              ? "px-2 py-1 text-xs"
+                              : "px-2.5 py-2 text-sm",
+                            isHighlighted && "bg-muted",
+                            option.disabled && "cursor-not-allowed opacity-50",
+                          )}
+                          onMouseEnter={() => setHighlightedIndex(index)}
+                          onPointerDown={(event) => {
+                            event.preventDefault();
+                            event.stopPropagation();
+                            selectOption(option);
+                          }}
+                        >
+                          {multiple ? (
+                            <span
+                              className={cn(
+                                "border-border flex size-4 shrink-0 items-center justify-center rounded border",
+                                isSelected &&
+                                  "border-primary bg-primary text-primary-foreground",
+                              )}
+                            >
+                              {isSelected ? <Check className="size-3" /> : null}
+                            </span>
+                          ) : (
+                            <Check
+                              className={cn(
+                                "text-primary size-4 shrink-0",
+                                isSelected ? "opacity-100" : "opacity-0",
+                              )}
+                            />
+                          )}
+                          <span className="truncate">{option.label}</span>
+                        </li>
+                      );
+                    })}
+                    {canCreate ? (
+                      <li
+                        data-option
+                        role="option"
+                        aria-selected={false}
+                        className="hover:bg-muted flex cursor-pointer items-center gap-2 rounded-sm px-2.5 py-2 text-sm transition-colors"
+                        onPointerDown={(event) => {
+                          event.preventDefault();
+                          event.stopPropagation();
+                          ignoreBlurRef.current = true;
+                          window.setTimeout(() => {
+                            ignoreBlurRef.current = false;
+                          }, 0);
+                          commitCustomValues(query);
+                          window.requestAnimationFrame(() =>
+                            inputRef.current?.focus(),
+                          );
+                        }}
+                      >
+                        Add “{createLabel}”
+                      </li>
+                    ) : null}
+                  </>
+                )}
+              </ul>
+            </div>,
+            document.body,
+          )
+        : null}
+    </div>
+  );
+}