@rovula/ui 0.1.41 → 0.1.43

package/src/components/AutoComplete/AutoComplete.tsx

@@ -0,0 +1,379 @@
+"use client";
+
+import React, {
+  KeyboardEvent,
+  ReactNode,
+  forwardRef,
+  useCallback,
+  useRef,
+  useState,
+} from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import TextInput, { type InputProps } from "../TextInput/TextInput";
+import Loading from "../Loading/Loading";
+import Text from "../Text/Text";
+import Icon from "../Icon/Icon";
+import { cn } from "@/utils/cn";
+import { menuItemBaseStyles } from "../Dropdown/Dropdown";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export type AutoCompleteOption = {
+  value: string;
+  label: string;
+};
+
+/**
+ * InputProps that AutoComplete manages internally.
+ * These are excluded from the public API so callers cannot accidentally
+ * override internal event wiring or ARIA attributes.
+ */
+type OmittedInputProps =
+  | "value"
+  | "onChange"
+  // | "onBlur"
+  // | "onFocus"
+  | "onKeyDown"
+  | "onSelect"
+  | "role"
+  | "aria-expanded"
+  | "aria-haspopup"
+  | "aria-autocomplete"
+  | "aria-activedescendant"
+  | "aria-controls"
+  | "autoComplete"
+  | "hasClearIcon";
+
+export type AutoCompleteProps<
+  T extends AutoCompleteOption = AutoCompleteOption,
+> = {
+  // ── AutoComplete-specific ─────────────────────────────────────────────────
+
+  /** Options provided by caller (already filtered/fetched externally) */
+  options: T[];
+
+  /** Controlled value — the current input text */
+  value?: string;
+
+  /**
+   * Called on every change: typing or clearing.
+   * Parent should update `value` from this.
+   */
+  onChange?: (value: string) => void;
+
+  /**
+   * Called only when user explicitly selects an option from the list.
+   * Receives the full option object (including any domain-specific fields).
+   */
+  onSelect?: (option: T) => void;
+
+  onBlur?: () => void;
+
+  /** Called with the current query when the user types */
+  onSearch?: (query: string) => void;
+
+  /** Show a loading spinner inside the dropdown */
+  loading?: boolean;
+
+  /** Text shown when options is empty and not loading */
+  noOptionsText?: string;
+
+  /**
+   * When true, show the noOptionsText message when options is empty.
+   * Defaults to false (popover stays closed when no options).
+   */
+  showNoOptions?: boolean;
+
+  /**
+   * Custom render for each option item.
+   * Receives the option and whether it is currently selected.
+   * The wrapper button (styles + click handler) is provided by AutoComplete.
+   */
+  renderOption?: (option: T, isSelected: boolean) => ReactNode;
+
+  /**
+   * Override client-side filtering.
+   * Pass `(x) => x` to disable filtering entirely (when results come from an API).
+   * Defaults to identity (no filtering).
+   */
+  filterOptions?: (options: T[]) => T[];
+
+  /**
+   * Render the options list via a React portal so it escapes containers
+   * with `overflow: hidden/auto`.
+   * Set to false when inside a Dialog — portal content is blocked by
+   * Radix Dialog's focus trap and aria-modal, making items unclickable.
+   * Defaults to true.
+   */
+  portal?: boolean;
+
+  /** Extra className applied to the options list container */
+  listboxClassName?: string;
+
+  /** Extra inline styles applied to the options list container */
+  listboxStyle?: React.CSSProperties;
+
+  /** Extra inline styles applied to the Popover content wrapper (portal mode only) */
+  popoverStyle?: React.CSSProperties;
+
+  /** Extra className applied to each option item */
+  optionClassName?: string;
+
+  /** Extra inline styles applied to each option item */
+  optionStyle?: React.CSSProperties;
+
+  "data-testid"?: string;
+
+  // ── TextInput passthrough ─────────────────────────────────────────────────
+  // All InputProps are supported except the ones AutoComplete manages itself.
+  // This includes: className, style, label, placeholder, error, errorMessage,
+  // helperText, warningMessage, required, disabled, fullwidth, size, rounded,
+  // variant, startIcon, endIcon, labelClassName, classes, etc.
+} & Omit<InputProps, OmittedInputProps>;
+
+// ---------------------------------------------------------------------------
+// AutoComplete
+// ---------------------------------------------------------------------------
+
+function AutoCompleteInner<T extends AutoCompleteOption = AutoCompleteOption>(
+  {
+    // AutoComplete-specific props
+    options,
+    value = "",
+    onChange,
+    onSelect,
+    onBlur,
+    onSearch,
+    loading = false,
+    noOptionsText = "No results",
+    showNoOptions = false,
+    renderOption,
+    filterOptions = (x) => x,
+    portal = true,
+    listboxClassName,
+    listboxStyle,
+    popoverStyle,
+    optionClassName,
+    optionStyle,
+    "data-testid": testId,
+    // InputProps with explicit defaults (rest passes everything else through)
+    id,
+    label,
+    fullwidth = true,
+    size = "md",
+    rounded = "normal",
+    variant = "outline",
+    disabled,
+    ...rest
+  }: AutoCompleteProps<T>,
+  ref: React.ForwardedRef<HTMLInputElement>,
+) {
+  const [open, setOpen] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const filteredOptions = filterOptions(options);
+  const showPopover =
+    open && (loading || filteredOptions.length > 0 || showNoOptions);
+
+  const commitSelection = useCallback(
+    (option: T) => {
+      onChange?.(option.value);
+      onSelect?.(option);
+      setOpen(false);
+      setActiveIndex(-1);
+    },
+    [onChange, onSelect],
+  );
+
+  const handleInputChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const query = e.target.value;
+      onChange?.(query);
+      onSearch?.(query);
+      setOpen(true);
+      setActiveIndex(-1);
+    },
+    [onChange, onSearch],
+  );
+
+  const handleFocus = useCallback(
+    (e: React.FocusEvent<HTMLInputElement>) => {
+      setOpen(true);
+      rest?.onFocus?.(e);
+    },
+    [rest?.onFocus],
+  );
+
+  const handleBlur = useCallback(() => {
+    // Delay so option button onClick fires before popover closes
+    setTimeout(() => {
+      setOpen(false);
+      setActiveIndex(-1);
+      onBlur?.();
+    }, 150);
+  }, [onBlur]);
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLInputElement>) => {
+      if (!open) {
+        if (e.key === "ArrowDown" || e.key === "ArrowUp") setOpen(true);
+        return;
+      }
+
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setActiveIndex((i) => Math.min(i + 1, filteredOptions.length - 1));
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setActiveIndex((i) => Math.max(i - 1, 0));
+      } else if (e.key === "Enter") {
+        e.preventDefault();
+        if (activeIndex >= 0 && filteredOptions[activeIndex]) {
+          commitSelection(filteredOptions[activeIndex]);
+        }
+      } else if (e.key === "Escape") {
+        setOpen(false);
+        setActiveIndex(-1);
+      }
+    },
+    [open, activeIndex, filteredOptions, commitSelection],
+  );
+
+  const listContent = (
+    <div
+      role="listbox"
+      style={{ boxShadow: "var(--dropdown-menu-shadow)", ...listboxStyle }}
+      className={cn(
+        "max-h-60 overflow-y-auto",
+        "rounded-md border border-bg-stroke3",
+        "bg-modal-dropdown-surface text-text-g-contrast-high",
+        !portal && "absolute top-full left-0 w-full -mt-3 z-[51]",
+        portal && "z-[51]",
+        listboxClassName,
+      )}
+      data-testid={testId ? `${testId}-listbox` : undefined}
+    >
+      {loading ? (
+        <div className="flex items-center justify-center py-6">
+          <Loading size={20} />
+        </div>
+      ) : filteredOptions.length === 0 ? (
+        <div className="px-4 py-6 text-center">
+          <Text
+            variant="small1"
+            className="text-[var(--dropdown-menu-default-text)]"
+          >
+            {noOptionsText}
+          </Text>
+        </div>
+      ) : (
+        filteredOptions.map((option, index) => {
+          const isSelected = option.value === value;
+          const isActive = index === activeIndex;
+
+          return (
+            <button
+              key={option.value}
+              id={`autocomplete-option-${option.value}`}
+              type="button"
+              role="option"
+              aria-selected={isSelected}
+              style={optionStyle}
+              className={cn(
+                menuItemBaseStyles,
+                "w-full",
+                isSelected &&
+                  "bg-[var(--dropdown-menu-selected-bg)] text-[var(--dropdown-menu-selected-text)]",
+                isActive &&
+                  !isSelected &&
+                  "bg-[var(--dropdown-menu-hover-bg)] text-[var(--dropdown-menu-hover-text)]",
+                optionClassName,
+              )}
+              onMouseDown={(e) => e.preventDefault()}
+              onClick={() => commitSelection(option)}
+              data-testid={`autocomplete-option-${option.value}`}
+            >
+              <span className="shrink-0 size-4 flex items-center justify-center">
+                {isSelected && (
+                  <Icon
+                    type="heroicons"
+                    name="check"
+                    className="size-4 text-[var(--dropdown-menu-selected-text)]"
+                  />
+                )}
+              </span>
+              {renderOption ? renderOption(option, isSelected) : option.label}
+            </button>
+          );
+        })
+      )}
+    </div>
+  );
+
+  return (
+    <PopoverPrimitive.Root open={showPopover}>
+      <PopoverPrimitive.Anchor asChild>
+        <div className={cn("relative", fullwidth && "w-full")}>
+          <TextInput
+            {...rest}
+            ref={ref ?? inputRef}
+            id={id}
+            label={label}
+            value={value}
+            size={size}
+            rounded={rounded}
+            variant={variant}
+            disabled={disabled}
+            fullwidth={fullwidth}
+            autoComplete="off"
+            role="combobox"
+            aria-expanded={showPopover}
+            aria-autocomplete="list"
+            aria-activedescendant={
+              activeIndex >= 0
+                ? `autocomplete-option-${filteredOptions[activeIndex]?.value}`
+                : undefined
+            }
+            hasClearIcon
+            onChange={handleInputChange}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            onKeyDown={handleKeyDown}
+            data-testid={testId}
+          />
+          {showPopover && !portal && listContent}
+        </div>
+      </PopoverPrimitive.Anchor>
+
+      {portal && (
+        <PopoverPrimitive.Portal>
+          <PopoverPrimitive.Content
+            onOpenAutoFocus={(e) => e.preventDefault()}
+            onInteractOutside={(e) => e.preventDefault()}
+            onFocusOutside={(e) => e.preventDefault()}
+            side="bottom"
+            align="start"
+            sideOffset={-12}
+            style={{ width: "var(--radix-popover-trigger-width)", zIndex: 51, ...popoverStyle }}
+          >
+            {listContent}
+          </PopoverPrimitive.Content>
+        </PopoverPrimitive.Portal>
+      )}
+    </PopoverPrimitive.Root>
+  );
+}
+
+// forwardRef with generics requires a manual cast
+const AutoComplete = forwardRef(AutoCompleteInner) as <
+  T extends AutoCompleteOption = AutoCompleteOption,
+>(
+  props: AutoCompleteProps<T> & { ref?: React.ForwardedRef<HTMLInputElement> },
+) => ReturnType<typeof AutoCompleteInner>;
+
+(AutoComplete as { displayName?: string }).displayName = "AutoComplete";
+
+export default AutoComplete;

package/src/components/AutoComplete/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./AutoComplete";
+export type { AutoCompleteProps, AutoCompleteOption } from "./AutoComplete";

package/src/components/Dialog/Dialog.tsx

@@ -55,6 +55,10 @@ const DialogContent = React.forwardRef<
           className,
         )}
         {...props}
+        onOpenAutoFocus={(event) => {
+          event.preventDefault();
+          props?.onOpenAutoFocus?.(event);
+        }}
         onCloseAutoFocus={(event) => {
           event.preventDefault();
           document.body.style.pointerEvents = "auto";

package/src/components/TextInput/TextInput.tsx

@@ -7,6 +7,7 @@ import React, {
   FocusEvent,
   KeyboardEvent,
   ChangeEvent,
+  MouseEvent,
 } from "react";
 import { useStableMergedRef } from "@/utils/mergeRefs";
 import {
@@ -231,16 +232,20 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
         ? format(props.value)
         : props.value;
 
-    const handleClearInput = useCallback(() => {
-      if (inputRef.current) {
-        inputRef.current.value = "";
+    const handleClearInput = useCallback(
+      (e: MouseEvent<SVGSVGElement>) => {
+        e.preventDefault();
+        if (inputRef.current) {
+          inputRef.current.value = "";
 
-        if (props.onChange) {
-          const event = new Event("input", { bubbles: true });
-          props.onChange({ target: { value: "" } } as any);
+          if (props.onChange) {
+            const event = new Event("input", { bubbles: true });
+            props.onChange({ target: { value: "" } } as any);
+          }
         }
-      }
-    }, [props.onChange]);
+      },
+      [props.onChange],
+    );
 
     const handleOnClickLeftSectionIcon = useCallback(() => {
       if (disabled) return;

package/src/index.ts

@@ -12,6 +12,9 @@ export { default as TextArea } from "./components/TextArea/TextArea";
 export { default as Text } from "./components/Text/Text";
 export { default as Tabs } from "./components/Tabs/Tabs";
 export { default as Dropdown } from "./components/Dropdown/Dropdown";
+export { menuItemBaseStyles } from "./components/Dropdown/Dropdown";
+export { default as AutoComplete } from "./components/AutoComplete/AutoComplete";
+export type { AutoCompleteProps, AutoCompleteOption } from "./components/AutoComplete/AutoComplete";
 export { Checkbox } from "./components/Checkbox/Checkbox";
 export { Label } from "./components/Label/Label";
 export { Input } from "./components/Input/Input";