@bubo-squared/ui-framework 0.2.35 → 0.2.36

package/dist/index.cjs

@@ -1730,6 +1730,7 @@ Checkbox.displayName = "Checkbox";
 
 // src/components/Inputs/Autocomplete.tsx
 var React24 = __toESM(require("react"), 1);
+var ReactDOM = __toESM(require("react-dom"), 1);
 var import_class_variance_authority15 = require("class-variance-authority");
 
 // src/components/Inputs/InputShell.tsx
@@ -1816,9 +1817,7 @@ var inputTextVariants = (0, import_class_variance_authority15.cva)("truncate", {
       xl: "h6-title"
     }
   },
-  defaultVariants: {
-    size: "lg"
-  }
+  defaultVariants: { size: "lg" }
 });
 var optionVariants = (0, import_class_variance_authority15.cva)(
   "w-full text-left hover:bg-(--background-secondary)",
@@ -1830,14 +1829,9 @@ var optionVariants = (0, import_class_variance_authority15.cva)(
         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 = (0, import_class_variance_authority15.cva)(
@@ -1850,13 +1844,9 @@ var iconWrapperVariants = (0, import_class_variance_authority15.cva)(
         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) => {
@@ -1891,84 +1881,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);
   };
@@ -1980,64 +1954,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__ */ (0, import_jsx_runtime26.jsx)(Field, { label, hint, hideHint, status, disabled, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("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__ */ (0, import_jsx_runtime26.jsx)(Field, { label, hint, hideHint, status, disabled, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { ref: anchorRef, className: "relative w-full", children: [
     /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
       InputShell,
       {
@@ -2047,7 +2021,7 @@ var Autocomplete = React24.forwardRef((props, forwardedRef) => {
         className,
         onClick: handleContainerClick,
         children: [
-          showLeadingIcon && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: cn(iconWrapperVariants({ size, disabled: !!disabled })), children: leadingIcon }),
+          leadingIcon && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: cn(iconWrapperVariants({ size, disabled: !!disabled })), children: leadingIcon }),
           /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
             Input,
             {
@@ -2058,72 +2032,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__ */ (0, import_jsx_runtime26.jsx)("span", { className: cn(iconWrapperVariants({ size, disabled: !!disabled })), children: trailingIcon })
+          trailingIcon && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: cn(iconWrapperVariants({ size, disabled: !!disabled })), children: trailingIcon })
         ]
       }
     ),
-    showDropdown && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-      "div",
-      {
-        className: cn(
-          "absolute left-0 right-0 mt-1",
-          dropdownSurfaceClass,
-          dropdownScrollClass,
-          dropdownClassName
-        ),
-        children: loading ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-          "div",
-          {
-            className: cn(optionVariants({ size }), "px-(--space-8) pr-(--space-16) text-secondary"),
-            "aria-live": "polite",
-            children: loadingText
-          }
-        ) : options.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-          "div",
-          {
-            className: cn(optionVariants({ size }), "px-(--space-8) pr-(--space-16) text-secondary"),
-            "aria-live": "polite",
-            children: noOptionsText
-          }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-          "ul",
-          {
-            id: listboxId,
-            role: "listbox",
-            className: cn("flex flex-col", listboxClassName),
-            children: options.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-              "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__ */ (0, import_jsx_runtime26.jsx)(
+        "div",
+        {
+          style: dropdownStyle,
+          className: cn(dropdownSurfaceClass, dropdownScrollClass, dropdownClassName),
+          children: loading ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: cn(optionVariants({ size }), "px-(--space-8) pr-(--space-16) text-secondary"), "aria-live": "polite", children: loadingText }) : options.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: cn(optionVariants({ size }), "px-(--space-8) pr-(--space-16) text-secondary"), "aria-live": "polite", children: noOptionsText }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("ul", { id: listboxId, role: "listbox", className: cn("flex flex-col", listboxClassName), children: options.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+            "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
     )
   ] }) });
 });