@rovula/ui 0.1.21 → 0.1.23

package/src/components/Dropdown/Dropdown.tsx

@@ -1,5 +1,6 @@
+"use client";
+
 import React, {
-  CSSProperties,
   ReactNode,
   forwardRef,
   useCallback,
@@ -10,13 +11,31 @@ import React, {
   useState,
   Fragment,
 } from "react";
-import * as Portal from "@radix-ui/react-portal";
+import {
+  Combobox,
+  ComboboxInput,
+  ComboboxOptions,
+  ComboboxOption,
+} from "@headlessui/react";
 import TextInput, { InputProps } from "../TextInput/TextInput";
 import { customInputVariant, dropdownIconVariant } from "./Dropdown.styles";
-import { Menu, MenuItemType, MenuOption } from "../Menu/Menu";
-
-import { ChevronDownIcon } from "@heroicons/react/16/solid";
 import { cn } from "@/utils/cn";
+import Icon from "../Icon/Icon";
+import { ChevronDownIcon } from "@heroicons/react/16/solid";
+
+// ---------------------------------------------------------------------------
+// Shared menu item styles (used by Dropdown items + renderOptions consumers)
+// ---------------------------------------------------------------------------
+export const menuItemBaseStyles = cn(
+  "relative flex gap-1 cursor-pointer select-none box-border items-center py-4 pl-4 pr-8 typography-subtitle4 outline-none transition-colors",
+  "bg-[var(--dropdown-menu-default-bg)] text-[var(--dropdown-menu-default-text)]",
+  "active:opacity-75",
+  "hover:bg-[var(--dropdown-menu-hover-bg)] hover:text-[var(--dropdown-menu-hover-text)]",
+);
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
 
 type RenderLabelCallbackArg = {
   value: string;
@@ -37,7 +56,6 @@ export type DropdownProps = {
   size?: "sm" | "md" | "lg";
   rounded?: "none" | "normal" | "full";
   variant?: "flat" | "outline" | "underline";
-  defaultMenuItemType?: MenuOption["type"];
   helperText?: string;
   errorMessage?: string;
   filterMode?: boolean;
@@ -45,6 +63,7 @@ export type DropdownProps = {
   disabled?: boolean;
   error?: boolean;
   required?: boolean;
+  /** @deprecated no longer needed */
   modal?: boolean;
   className?: string;
   optionContainerClassName?: string;
@@ -59,11 +78,13 @@ export type DropdownProps = {
     optionsFiltered: Options[];
     selectedOption: Options | null | undefined;
     onClick: (option: Options) => void;
-    style?: CSSProperties;
-    dropdownRef?: React.RefObject<HTMLUListElement>;
   }) => ReactNode;
 } & Omit<InputProps, "value" | "onSelect">;
 
+// ---------------------------------------------------------------------------
+// Dropdown
+// ---------------------------------------------------------------------------
+
 const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
   (
     {
@@ -74,7 +95,6 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
       size = "md",
       rounded = "normal",
       variant = "outline",
-      defaultMenuItemType = "checkbox",
       helperText,
       errorMessage,
       fullwidth = true,
@@ -82,7 +102,7 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
       error = false,
       filterMode = false,
       required = true,
-      modal = false,
+      modal: _modal,
       onChangeText,
       onSelect,
       renderOptions: customRenderOptions,
@@ -96,305 +116,195 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
   ) => {
     const _id = id || `${label}-select`;
 
-    const [isFocused, setIsFocused] = useState(false);
-    const [selectedOption, setSelectedOption] = useState<
-      Options | null | undefined
-    >(null);
-    const [textValue, setTextValue] = useState("");
-    const keyCode = useRef("");
+    const [selectedOption, setSelectedOption] = useState<Options | null>(null);
+    const [query, setQuery] = useState("");
 
-    const dropdownRef = useRef<HTMLUListElement>(null);
     const inputRef = useRef<HTMLInputElement>(null);
-    const [dropdownStyles, setDropdownStyles] = useState<CSSProperties>({});
-    const [isAbove, setIsAbove] = useState(false);
-    const [isInsideDialog, setIsInsideDialog] = useState(false);
 
-    useImperativeHandle(ref, () => inputRef?.current as HTMLInputElement);
+    // Expose the inner <input> element via forwardRef
+    useImperativeHandle(ref, () => inputRef.current as HTMLInputElement, []);
 
+    // Sync external value prop
     useEffect(() => {
-      setSelectedOption(value);
-      setTextValue(value?.label ?? "");
+      setSelectedOption(value ?? null);
     }, [value]);
 
-    /** ✅ Auto-detect if inside a Dialog */
-    useEffect(() => {
-      let node: HTMLElement | null = inputRef.current;
-      while (node) {
-        if (node.getAttribute("role") === "dialog") {
-          setIsInsideDialog(true);
-          return;
-        }
-        node = node.parentElement;
-      }
-      setIsInsideDialog(false);
-    }, []);
-
-    const handleOnChangeText = useCallback(
-      (event: React.ChangeEvent<HTMLInputElement>) => {
-        onChangeText?.(event);
-        setTextValue(event.target.value);
+    const optionsFiltered = useMemo(() => {
+      if (!filterMode || !query) return options;
+      return options.filter((opt) =>
+        opt.label.toLowerCase().includes(query.toLowerCase()),
+      );
+    }, [options, filterMode, query]);
 
-        if (!event.target.value) {
-          clearMismatchValue(event as any);
+    const handleSelect = useCallback(
+      (option: Options | null) => {
+        setSelectedOption(option);
+        setQuery("");
+        if (option) {
+          onSelect?.(option);
+          // After selection Headless UI keeps focus on the input (via rAF refocus).
+          // Blur after that rAF so the next click triggers onFocus → immediate open.
+          setTimeout(() => inputRef.current?.blur(), 0);
         }
       },
-      [onChangeText],
+      [onSelect],
     );
 
-    const handleOptionClick = useCallback(
-      (option: Options) => {
-        setSelectedOption(option);
-        setTextValue(option.label);
-        onSelect?.(option);
-        setIsFocused(false);
+    const handleInputChange = useCallback(
+      (e: React.ChangeEvent<HTMLInputElement>) => {
+        if (filterMode) setQuery(e.target.value);
+        onChangeText?.(e);
       },
-      [onSelect],
+      [filterMode, onChangeText],
     );
 
-    const optionsFiltered = useMemo(() => {
-      return options.filter(
-        (option) =>
-          !filterMode ||
-          option.label?.toLowerCase().includes(textValue?.toLowerCase()),
-      );
-    }, [options, filterMode, textValue]);
-
-    const usePortal = isInsideDialog ? false : modal;
-
-    const updateDropdownPosition = useCallback(() => {
-      if (inputRef.current && dropdownRef.current) {
-        const rect = inputRef.current.getBoundingClientRect();
-        const dropdownHeight = dropdownRef.current.offsetHeight;
-        const spaceBelow = window.innerHeight - rect.bottom;
-        const spaceAbove = rect.top;
-
-        const shouldOpenAbove =
-          spaceBelow < dropdownHeight && spaceAbove > spaceBelow;
-        setIsAbove(shouldOpenAbove);
-
-        if (usePortal) {
-          setDropdownStyles({
-            position: "absolute",
-            top: shouldOpenAbove
-              ? `${rect.top - dropdownHeight}px`
-              : `${rect.bottom}px`,
-            left: `${rect.left}px`,
-            width: `${rect.width}px`,
-            zIndex: 9999,
-          });
-        } else {
-          setDropdownStyles({
-            position: "absolute",
-            top: shouldOpenAbove ? `-${dropdownHeight}px` : "100%",
-            left: "0",
-            width: "100%",
-            zIndex: 9999,
-          });
-        }
-      }
-    }, [modal, isInsideDialog, usePortal]);
-
-    useEffect(() => {
-      if (isFocused) {
-        updateDropdownPosition();
-        window.addEventListener("resize", updateDropdownPosition);
-      }
-
-      return () => {
-        window.removeEventListener("resize", updateDropdownPosition);
-      };
-    }, [isFocused, updateDropdownPosition]);
-
-    const renderOptions = () => {
+    const renderOptionList = () => {
       if (customRenderOptions) {
         return customRenderOptions({
           optionsFiltered,
           selectedOption,
-          onClick: handleOptionClick,
-          style: dropdownStyles,
-          dropdownRef,
+          onClick: handleSelect,
         });
       }
 
-      // Convert options to MenuItemType
-      let finalMenuItems: MenuItemType[];
+      if (optionsFiltered.length === 0) {
+        return (
+          <div
+            className={cn(
+              "px-4 py-14 text-center text-input-text",
+              optionNotFoundItemClassName,
+            )}
+          >
+            Not found
+          </div>
+        );
+      }
 
-      finalMenuItems = optionsFiltered.map((option) => {
+      return optionsFiltered.map((option) => {
         if (option.renderLabel) {
-          return {
-            type: "custom",
-            render: () => (
-              <Fragment key={option.value}>
-                {option.renderLabel!({
-                  value: option.value,
-                  label: option.label,
-                  handleOnClick: () => handleOptionClick(option),
-                  className: cn(
-                    "relative flex gap-3 cursor-pointer select-none box-border items-center py-4 pl-9 pr-4 typography-subtitle4 outline-none transition-colors",
-                    "bg-[var(--dropdown-menu-default-bg)] text-[var(--dropdown-menu-default-text)]",
-                    "active:opacity-75",
-                    "hover:bg-[var(--dropdown-menu-hover-bg)] hover:text-[var(--dropdown-menu-hover-text)]",
-                    {
-                      "bg-[var(--dropdown-menu-selected-bg)] text-[var(--dropdown-menu-selected-text)] typography-subtitle5":
-                        selectedOption?.value === option.value,
-                    },
-                    optionItemClassName,
-                  ),
-                })}
-              </Fragment>
-            ),
-          };
+          return (
+            <Fragment key={option.value}>
+              {option.renderLabel({
+                value: option.value,
+                label: option.label,
+                handleOnClick: () => handleSelect(option),
+                className: cn(
+                  menuItemBaseStyles,
+                  selectedOption?.value === option.value &&
+                    "bg-[var(--dropdown-menu-selected-bg)] text-[var(--dropdown-menu-selected-text)]",
+                  optionItemClassName,
+                ),
+              })}
+            </Fragment>
+          );
         }
 
-        return {
-          type: "item",
-          item: {
-            type: defaultMenuItemType,
-            value: option.value,
-            label: option.label,
-          },
-        };
-      });
-
-      // Add "not found" message if no results
-      if (finalMenuItems.length === 0) {
-        finalMenuItems.push({
-          type: "custom",
-          render: () => (
-            <div
-              key="not-found"
-              className={cn(
-                "px-4 py-14 text-center text-input-text",
-                optionNotFoundItemClassName,
-              )}
-            >
-              Not found
-            </div>
-          ),
-        });
-      }
-
-      return (
-        <Menu
-          ref={dropdownRef as any}
-          items={finalMenuItems}
-          selectedValues={selectedOption?.value ? [selectedOption.value] : []}
-          onSelect={(value) => {
-            const option = optionsFiltered.find((opt) => opt.value === value);
-            if (option) {
-              handleOptionClick(option);
+        return (
+          <ComboboxOption
+            key={option.value}
+            value={option}
+            className={({ focus, selected }) =>
+              cn(
+                menuItemBaseStyles,
+                (selected || selectedOption?.value === option.value) &&
+                  "bg-[var(--dropdown-menu-selected-bg)] text-[var(--dropdown-menu-selected-text)]",
+                focus &&
+                  "bg-[var(--dropdown-menu-hover-bg)] text-[var(--dropdown-menu-hover-text)]",
+                optionItemClassName,
+              )
             }
-          }}
-          className={cn(
-            "absolute mt-1 w-full max-h-60 overflow-y-auto",
-            !usePortal && (isAbove ? "bottom-full mb-1" : "top-full mt-1"),
-            optionContainerClassName,
-          )}
-          style={dropdownStyles}
-        />
-      );
-    };
-
-    const handleOnFocus = useCallback(
-      (e: React.FocusEvent<HTMLInputElement, Element>) => {
-        setIsFocused(true);
-        props?.onFocus?.(e);
-      },
-      [props?.onFocus],
-    );
-
-    const clearMismatchValue = useCallback(
-      (e: React.FocusEvent<HTMLInputElement, Element>) => {
-        const matchSelectedValue = optionsFiltered.find(
-          (opt) =>
-            opt.value === e.target?.value || opt.label === e.target?.value,
+          >
+            {({ selected }) => (
+              <>
+                <span className="shrink-0 size-4 flex items-center justify-center">
+                  {(selected || selectedOption?.value === option.value) && (
+                    <Icon
+                      type="heroicons"
+                      name="check"
+                      className="size-4 text-[var(--dropdown-menu-selected-text)]"
+                    />
+                  )}
+                </span>
+                {option.label}
+              </>
+            )}
+          </ComboboxOption>
         );
-        const isMatchSelectedValue = !!matchSelectedValue;
-
-        let option = matchSelectedValue || {
-          value: "",
-          label: "",
-        };
-
-        if (!isMatchSelectedValue && textValue) {
-          option = {
-            value: "",
-            label: "",
-          };
-        }
-
-        if (keyCode.current === "Enter") {
-          return;
-        }
-
-        setSelectedOption(option);
-        setTextValue(option.label);
-        onSelect?.(option);
-      },
-      [optionsFiltered, textValue],
-    );
-
-    const handleOnBlur = useCallback(
-      (e: React.FocusEvent<HTMLInputElement, Element>) => {
-        setTimeout(() => setIsFocused(false), 200);
-        clearMismatchValue(e);
-        props?.onBlur?.(e);
-      },
-      [props?.onBlur, clearMismatchValue],
-    );
-
-    const handleOnKeyDown = useCallback(
-      (e: React.KeyboardEvent<HTMLInputElement>) => {
-        keyCode.current = e.code;
-        props?.onKeyDown?.(e);
-      },
-      [props?.onKeyDown],
-    );
+      });
+    };
 
     return (
-      <div className={`relative  ${fullwidth ? "w-full" : ""}`}>
-        <TextInput
-          hasClearIcon={false}
-          endIcon={
-            <ChevronDownIcon
-              className={dropdownIconVariant({ isFocus: isFocused })}
+      <Combobox
+        value={selectedOption}
+        onChange={handleSelect}
+        immediate
+        by="value"
+        disabled={disabled}
+      >
+        {({ open }) => (
+          <div className={cn("relative", fullwidth && "w-full")}>
+            {/*
+             * ComboboxInput as={TextInput}:
+             * Now that TextInput uses mergeRefs(externalRef, internalRef) on <input>,
+             * Headless UI receives a direct HTMLInputElement ref — no imperative handle
+             * wrapper — so it can attach its event listeners correctly.
+             */}
+            <ComboboxInput
+              as={TextInput}
+              ref={inputRef}
+              hasClearIcon={false}
+              endIcon={
+                <ChevronDownIcon
+                  className={dropdownIconVariant({ isFocus: open })}
+                />
+              }
+              label={label}
+              placeholder=" "
+              autoComplete="off"
+              rounded={rounded}
+              variant={variant}
+              helperText={helperText}
+              errorMessage={errorMessage}
+              fullwidth={fullwidth}
+              error={error}
+              required={required}
+              id={_id}
+              disabled={disabled}
+              size={size}
+              className={
+                segmentedInput ? customInputVariant({ size }) : undefined
+              }
+              displayValue={(opt: unknown) =>
+                (opt as Options | null)?.label ?? ""
+              }
+              readOnly={!filterMode}
+              onChange={handleInputChange}
+              {...props}
             />
-          }
-          {...props}
-          ref={inputRef}
-          readOnly={!filterMode}
-          value={textValue}
-          onChange={handleOnChangeText}
-          label={label}
-          placeholder=" "
-          type="text"
-          autoComplete="off"
-          rounded={rounded}
-          variant={variant}
-          helperText={helperText}
-          errorMessage={errorMessage}
-          fullwidth={fullwidth}
-          error={error}
-          required={required}
-          id={_id}
-          disabled={disabled}
-          size={size}
-          className={segmentedInput ? customInputVariant({ size }) : undefined}
-          onFocus={handleOnFocus}
-          onBlur={handleOnBlur}
-          onKeyDown={handleOnKeyDown}
-        />
-        {isFocused &&
-          (usePortal ? (
-            <Portal.Root container={document.body}>
-              {renderOptions()}
-            </Portal.Root>
-          ) : (
-            renderOptions()
-          ))}
-      </div>
+
+            {/*
+             * No anchor = no forced portal — content stays inside Dialog DOM.
+             * Radix Dialog won't see option clicks as "outside" → Dialog won't close.
+             * z-[51] beats the Dialog overlay (z-50) for items that visually overflow.
+             */}
+            <ComboboxOptions
+              className={cn(
+                "absolute top-full left-0 w-full -mt-3 z-[51]",
+                "min-w-[154px] max-h-60 overflow-y-auto",
+                "rounded-md bg-modal-dropdown-surface border border-bg-stroke3 text-text-g-contrast-high",
+                optionContainerClassName,
+              )}
+              style={{ boxShadow: "var(--dropdown-menu-shadow)" }}
+            >
+              {renderOptionList()}
+            </ComboboxOptions>
+          </div>
+        )}
+      </Combobox>
     );
   },
 );
 
+Dropdown.displayName = "Dropdown";
+
 export default Dropdown;