@bubo-squared/ui-framework 0.2.35 → 0.2.36

package/dist/index.d.cts

@@ -365,34 +365,24 @@ declare const TextInput: React$1.ForwardRefExoticComponent<TextInputProps & Reac
 interface AutocompleteProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size" | "disabled" | "value" | "defaultValue" | "onChange"> {
     label?: React$1.ReactNode;
     hint?: React$1.ReactNode;
-    /** If true, the hint will not be rendered even if provided. */
     hideHint?: boolean;
     status?: TextInputStatus;
     size?: TextInputSize;
     disabled?: boolean;
     leadingIcon?: React$1.ReactNode | null;
     trailingIcon?: React$1.ReactNode | null;
-    /** Options to render (assumed already server-filtered). */
     options: string[];
     loading?: boolean;
     loadingText?: React$1.ReactNode;
     noOptionsText?: React$1.ReactNode;
-    /** Committed value (e.g. selected option). */
     value?: string;
     defaultValue?: string;
     onChange?: (value: string) => void;
-    /** Current input text (used as query). */
     inputValue?: string;
     defaultInputValue?: string;
     onInputChange?: (value: string) => void;
-    /**
-     * If true, free-typed input is also treated as the committed value.
-     * Selecting an option from the dropdown still overrides the value.
-     */
     freeSolo?: boolean;
-    /** Optional className for the dropdown (options container). */
     dropdownClassName?: string;
-    /** Optional className for the listbox (<ul>). */
     listboxClassName?: string;
 }
 declare const Autocomplete: React$1.ForwardRefExoticComponent<AutocompleteProps & React$1.RefAttributes<HTMLInputElement>>;

package/dist/index.d.ts

@@ -365,34 +365,24 @@ declare const TextInput: React$1.ForwardRefExoticComponent<TextInputProps & Reac
 interface AutocompleteProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size" | "disabled" | "value" | "defaultValue" | "onChange"> {
     label?: React$1.ReactNode;
     hint?: React$1.ReactNode;
-    /** If true, the hint will not be rendered even if provided. */
     hideHint?: boolean;
     status?: TextInputStatus;
     size?: TextInputSize;
     disabled?: boolean;
     leadingIcon?: React$1.ReactNode | null;
     trailingIcon?: React$1.ReactNode | null;
-    /** Options to render (assumed already server-filtered). */
     options: string[];
     loading?: boolean;
     loadingText?: React$1.ReactNode;
     noOptionsText?: React$1.ReactNode;
-    /** Committed value (e.g. selected option). */
     value?: string;
     defaultValue?: string;
     onChange?: (value: string) => void;
-    /** Current input text (used as query). */
     inputValue?: string;
     defaultInputValue?: string;
     onInputChange?: (value: string) => void;
-    /**
-     * If true, free-typed input is also treated as the committed value.
-     * Selecting an option from the dropdown still overrides the value.
-     */
     freeSolo?: boolean;
-    /** Optional className for the dropdown (options container). */
     dropdownClassName?: string;
-    /** Optional className for the listbox (<ul>). */
     listboxClassName?: string;
 }
 declare const Autocomplete: React$1.ForwardRefExoticComponent<AutocompleteProps & React$1.RefAttributes<HTMLInputElement>>;

package/dist/index.js

@@ -1653,6 +1653,7 @@ Checkbox.displayName = "Checkbox";
 
 // src/components/Inputs/Autocomplete.tsx
 import * as React24 from "react";
+import * as ReactDOM from "react-dom";
 import { cva as cva15 } from "class-variance-authority";
 
 // src/components/Inputs/InputShell.tsx
@@ -1739,9 +1740,7 @@ var inputTextVariants = cva15("truncate", {
       xl: "h6-title"
     }
   },
-  defaultVariants: {
-    size: "lg"
-  }
+  defaultVariants: { size: "lg" }
 });
 var optionVariants = cva15(
   "w-full text-left hover:bg-(--background-secondary)",
@@ -1753,14 +1752,9 @@ var optionVariants = cva15(
         lg: "paragraph-lg py-(--space-8) ",
         xl: "subtitle py-(--space-10) "
       },
-      active: {
-        true: "bg-(--background-secondary)"
-      }
+      active: { true: "bg-(--background-secondary)" }
     },
-    defaultVariants: {
-      size: "lg",
-      active: false
-    }
+    defaultVariants: { size: "lg", active: false }
   }
 );
 var iconWrapperVariants = cva15(
@@ -1773,13 +1767,9 @@ var iconWrapperVariants = cva15(
         lg: "size-5 [&>svg]:size-5",
         xl: "size-6 [&>svg]:size-6"
       },
-      disabled: {
-        true: "text-(--icon-primary-disabled)"
-      }
+      disabled: { true: "text-(--icon-primary-disabled)" }
     },
-    defaultVariants: {
-      size: "lg"
-    }
+    defaultVariants: { size: "lg" }
   }
 );
 var Autocomplete = React24.forwardRef((props, forwardedRef) => {
@@ -1814,84 +1804,68 @@ var Autocomplete = React24.forwardRef((props, forwardedRef) => {
     ...inputProps
   } = props;
   const isValueControlled = value !== void 0;
-  const [internalValue, setInternalValue] = React24.useState(
-    defaultValue ?? ""
-  );
+  const [internalValue, setInternalValue] = React24.useState(defaultValue ?? "");
   const isInputControlled = inputValue !== void 0;
-  const [internalInputValue, setInternalInputValue] = React24.useState(
-    defaultInputValue ?? ""
-  );
+  const [internalInputValue, setInternalInputValue] = React24.useState(defaultInputValue ?? "");
   const [isFocused, setIsFocused] = React24.useState(false);
   const [activeIndex, setActiveIndex] = React24.useState(-1);
+  const [dropdownStyle, setDropdownStyle] = React24.useState({});
   const inputRef = React24.useRef(null);
-  const setInputRef = React24.useCallback(
-    (node) => {
-      inputRef.current = node;
-      if (!forwardedRef) return;
-      if (typeof forwardedRef === "function") {
-        forwardedRef(node);
-      } else {
-        forwardedRef.current = node;
-      }
-    },
-    [forwardedRef]
-  );
+  const anchorRef = React24.useRef(null);
+  const rafIdRef = React24.useRef(null);
   const baseId = React24.useId();
   const inputId = id ?? baseId;
   const listboxId = `${inputId}-listbox`;
   const currentValue = (isValueControlled ? value : internalValue) ?? "";
   const currentInput = (isInputControlled ? inputValue : internalInputValue) ?? "";
-  React24.useEffect(() => {
-    if (isFocused) return;
-    if (isInputControlled) return;
-    if (!isValueControlled) return;
-    setInternalInputValue(currentValue);
-  }, [currentValue, isFocused, isInputControlled, isValueControlled]);
-  const showDropdown = isFocused && (loading || options.length > 0 || currentInput.trim().length > 0);
+  const trimmedInput = currentInput.trim();
+  const showDropdown = isFocused && (loading || options.length > 0 || trimmedInput.length > 0);
   const setInputText = (next) => {
-    if (!isInputControlled) {
-      setInternalInputValue(next);
-    }
+    if (!isInputControlled) setInternalInputValue(next);
     onInputChange?.(next);
   };
   const commitTypedValue = (next) => {
-    if (!isValueControlled) {
-      setInternalValue(next);
-    }
+    if (!isValueControlled) setInternalValue(next);
     onChange?.(next);
   };
   const commitValue = (next) => {
-    if (!isValueControlled) {
-      setInternalValue(next);
-    }
+    if (!isValueControlled) setInternalValue(next);
     onChange?.(next);
     setInputText(next);
     setActiveIndex(-1);
   };
-  const handleContainerClick = () => {
-    if (disabled) return;
-    inputRef.current?.focus();
-  };
+  const setInputRef = React24.useCallback((node) => {
+    inputRef.current = node;
+    if (!forwardedRef) return;
+    if (typeof forwardedRef === "function") forwardedRef(node);
+    else forwardedRef.current = node;
+  }, [forwardedRef]);
+  const updateDropdownPosition = React24.useCallback(() => {
+    if (rafIdRef.current !== null) return;
+    rafIdRef.current = requestAnimationFrame(() => {
+      rafIdRef.current = null;
+      if (!anchorRef.current) return;
+      const rect = anchorRef.current.getBoundingClientRect();
+      setDropdownStyle({
+        position: "fixed",
+        top: rect.bottom,
+        left: rect.left,
+        width: rect.width,
+        zIndex: 9999
+      });
+    });
+  }, []);
   const handleInputChange = (event) => {
     const next = event.target.value;
     setInputText(next);
     setActiveIndex(-1);
-    if (freeSolo) {
-      commitTypedValue(next);
-    }
-  };
-  const handleFocus = (event) => {
-    setIsFocused(true);
-    onFocus?.(event);
+    if (freeSolo) commitTypedValue(next);
   };
   const handleBlur = (event) => {
     setIsFocused(false);
     setActiveIndex(-1);
-    if (freeSolo) {
-      const trimmed = currentInput.trim();
-      if (trimmed.length > 0 && currentInput !== currentValue) {
-        commitTypedValue(currentInput);
-      }
+    if (freeSolo && trimmedInput.length > 0 && currentInput !== currentValue) {
+      commitTypedValue(currentInput);
     }
     onBlur?.(event);
   };
@@ -1903,64 +1877,64 @@ var Autocomplete = React24.forwardRef((props, forwardedRef) => {
       return;
     }
     switch (event.key) {
-      case "ArrowDown": {
+      case "ArrowDown":
         event.preventDefault();
-        setActiveIndex((prev) => {
-          if (options.length === 0) return -1;
-          const next = prev < 0 ? 0 : Math.min(prev + 1, options.length - 1);
-          return next;
-        });
+        setActiveIndex((prev) => options.length === 0 ? -1 : prev < 0 ? 0 : Math.min(prev + 1, options.length - 1));
         break;
-      }
-      case "ArrowUp": {
+      case "ArrowUp":
         event.preventDefault();
-        setActiveIndex((prev) => {
-          if (options.length === 0) return -1;
-          const next = prev <= 0 ? 0 : prev - 1;
-          return next;
-        });
+        setActiveIndex((prev) => options.length === 0 ? -1 : prev <= 0 ? 0 : prev - 1);
         break;
-      }
-      case "Enter": {
+      case "Enter":
         if (activeIndex >= 0 && activeIndex < options.length) {
           event.preventDefault();
           commitValue(options[activeIndex]);
           setIsFocused(false);
-          break;
-        }
-        if (freeSolo) {
-          const trimmed = currentInput.trim();
-          if (trimmed.length > 0) {
-            event.preventDefault();
-            if (currentInput !== currentValue) {
-              commitTypedValue(currentInput);
-            }
-            setIsFocused(false);
-          }
+        } else if (freeSolo && trimmedInput.length > 0) {
+          event.preventDefault();
+          if (currentInput !== currentValue) commitTypedValue(currentInput);
+          setIsFocused(false);
         }
         break;
-      }
-      case "Escape": {
+      case "Escape":
         event.preventDefault();
         setIsFocused(false);
         setActiveIndex(-1);
         break;
-      }
-      default:
-        break;
     }
   };
-  const handleOptionMouseDown = (event) => {
-    event.preventDefault();
+  const handleOptionMouseEnter = (event) => {
+    const index = Number(event.currentTarget.dataset.index);
+    if (!isNaN(index)) setActiveIndex(index);
   };
-  const handleOptionClick = (option) => {
-    commitValue(option);
-    setIsFocused(false);
+  const handleOptionClick = (event) => {
+    const index = Number(event.currentTarget.dataset.index);
+    if (index >= 0 && index < options.length) {
+      commitValue(options[index]);
+      setIsFocused(false);
+    }
   };
-  const activeDescendantId = activeIndex >= 0 ? `${inputId}-option-${activeIndex}` : void 0;
-  const showLeadingIcon = !!leadingIcon;
-  const showTrailingIcon = !!trailingIcon;
-  return /* @__PURE__ */ jsx26(Field, { label, hint, hideHint, status, disabled, children: /* @__PURE__ */ jsxs14("div", { className: "relative w-full", children: [
+  const handleContainerClick = () => {
+    if (disabled) return;
+    inputRef.current?.focus();
+  };
+  React24.useLayoutEffect(() => {
+    if (!showDropdown) return;
+    updateDropdownPosition();
+    window.addEventListener("scroll", updateDropdownPosition, { capture: true, passive: true });
+    window.addEventListener("resize", updateDropdownPosition);
+    return () => {
+      window.removeEventListener("scroll", updateDropdownPosition, { capture: true });
+      window.removeEventListener("resize", updateDropdownPosition);
+      if (rafIdRef.current !== null) cancelAnimationFrame(rafIdRef.current);
+    };
+  }, [showDropdown, updateDropdownPosition]);
+  React24.useEffect(() => {
+    if (!isFocused && !isInputControlled && isValueControlled) {
+      setInternalInputValue(currentValue);
+    }
+  }, [currentValue, isFocused, isInputControlled, isValueControlled]);
+  return /* @__PURE__ */ jsx26(Field, { label, hint, hideHint, status, disabled, children: /* @__PURE__ */ jsxs14("div", { ref: anchorRef, className: "relative w-full", children: [
     /* @__PURE__ */ jsxs14(
       InputShell,
       {
@@ -1970,7 +1944,7 @@ var Autocomplete = React24.forwardRef((props, forwardedRef) => {
         className,
         onClick: handleContainerClick,
         children: [
-          showLeadingIcon && /* @__PURE__ */ jsx26("span", { className: cn(iconWrapperVariants({ size, disabled: !!disabled })), children: leadingIcon }),
+          leadingIcon && /* @__PURE__ */ jsx26("span", { className: cn(iconWrapperVariants({ size, disabled: !!disabled })), children: leadingIcon }),
           /* @__PURE__ */ jsx26(
             Input,
             {
@@ -1981,72 +1955,53 @@ var Autocomplete = React24.forwardRef((props, forwardedRef) => {
               placeholder,
               value: currentInput,
               onChange: handleInputChange,
-              onFocus: handleFocus,
+              onFocus: (e) => {
+                setIsFocused(true);
+                onFocus?.(e);
+              },
               onBlur: handleBlur,
               onKeyDown: handleKeyDown,
               role: "combobox",
               "aria-autocomplete": "list",
               "aria-controls": listboxId,
               "aria-expanded": showDropdown,
-              "aria-activedescendant": activeDescendantId,
+              "aria-activedescendant": activeIndex >= 0 ? `${inputId}-option-${activeIndex}` : void 0,
               variant: "bare",
               className: cn(inputTextVariants({ size }), "bg-transparent outline-none w-full"),
               ...inputProps
             }
           ),
-          showTrailingIcon && /* @__PURE__ */ jsx26("span", { className: cn(iconWrapperVariants({ size, disabled: !!disabled })), children: trailingIcon })
+          trailingIcon && /* @__PURE__ */ jsx26("span", { className: cn(iconWrapperVariants({ size, disabled: !!disabled })), children: trailingIcon })
         ]
       }
     ),
-    showDropdown && /* @__PURE__ */ jsx26(
-      "div",
-      {
-        className: cn(
-          "absolute left-0 right-0 mt-1",
-          dropdownSurfaceClass,
-          dropdownScrollClass,
-          dropdownClassName
-        ),
-        children: loading ? /* @__PURE__ */ jsx26(
-          "div",
-          {
-            className: cn(optionVariants({ size }), "px-(--space-8) pr-(--space-16) text-secondary"),
-            "aria-live": "polite",
-            children: loadingText
-          }
-        ) : options.length === 0 ? /* @__PURE__ */ jsx26(
-          "div",
-          {
-            className: cn(optionVariants({ size }), "px-(--space-8) pr-(--space-16) text-secondary"),
-            "aria-live": "polite",
-            children: noOptionsText
-          }
-        ) : /* @__PURE__ */ jsx26(
-          "ul",
-          {
-            id: listboxId,
-            role: "listbox",
-            className: cn("flex flex-col", listboxClassName),
-            children: options.map((option, index) => /* @__PURE__ */ jsx26(
-              "li",
-              {
-                id: `${inputId}-option-${index}`,
-                role: "option",
-                "aria-selected": index === activeIndex,
-                className: cn(
-                  optionVariants({ size, active: index === activeIndex }),
-                  "px-(--space-8) pr-(--space-16) text-primary cursor-pointer"
-                ),
-                onMouseDown: handleOptionMouseDown,
-                onMouseEnter: () => setActiveIndex(index),
-                onClick: () => handleOptionClick(option),
-                children: option
-              },
-              `${option}-${index}`
-            ))
-          }
-        )
-      }
+    showDropdown && ReactDOM.createPortal(
+      /* @__PURE__ */ jsx26(
+        "div",
+        {
+          style: dropdownStyle,
+          className: cn(dropdownSurfaceClass, dropdownScrollClass, dropdownClassName),
+          children: loading ? /* @__PURE__ */ jsx26("div", { className: cn(optionVariants({ size }), "px-(--space-8) pr-(--space-16) text-secondary"), "aria-live": "polite", children: loadingText }) : options.length === 0 ? /* @__PURE__ */ jsx26("div", { className: cn(optionVariants({ size }), "px-(--space-8) pr-(--space-16) text-secondary"), "aria-live": "polite", children: noOptionsText }) : /* @__PURE__ */ jsx26("ul", { id: listboxId, role: "listbox", className: cn("flex flex-col", listboxClassName), children: options.map((option, index) => /* @__PURE__ */ jsx26(
+            "li",
+            {
+              id: `${inputId}-option-${index}`,
+              role: "option",
+              "aria-selected": index === activeIndex,
+              "data-index": index,
+              className: cn(
+                optionVariants({ size, active: index === activeIndex }),
+                "px-(--space-8) pr-(--space-16) text-primary cursor-pointer"
+              ),
+              onMouseDown: (e) => e.preventDefault(),
+              onMouseEnter: handleOptionMouseEnter,
+              onClick: handleOptionClick,
+              children: option
+            },
+            `${option}-${index}`
+          )) })
+        }
+      ),
+      document.body
     )
   ] }) });
 });