@idds/react 1.4.12 → 1.4.14

package/dist/index.es.js

@@ -2273,7 +2273,12 @@ function Dropdown({
   const [open, setOpen] = useState(false);
   const [dropdownPosition, setDropdownPosition] = useState({ vertical: "bottom", horizontal: "right" });
   const containerRef = useRef(null);
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
   useEffect(() => {
+    if (!mounted) return;
     const handleClickOutside = (e) => {
       if (containerRef.current && !containerRef.current.contains(e.target)) {
         setOpen(false);
@@ -2283,7 +2288,7 @@ function Dropdown({
     return () => {
       document.removeEventListener("mousedown", handleClickOutside);
     };
-  }, []);
+  }, [mounted]);
   const handleTriggerClick = (e) => {
     e.stopPropagation();
     if (disabled) return;
@@ -2294,7 +2299,21 @@ function Dropdown({
       const vertical = fitsBelow ? "bottom" : "top";
       const fitsRight = rect.right + dropdownWidth <= window.innerWidth;
       const horizontal = fitsRight ? "right" : "left";
-      setDropdownPosition({ vertical, horizontal });
+      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+      const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
+      let top = 0;
+      let left = 0;
+      if (vertical === "bottom") {
+        top = rect.bottom + scrollTop + 8;
+      } else {
+        top = rect.top + scrollTop - dropdownHeight - 8;
+      }
+      if (horizontal === "right") {
+        left = rect.left + scrollLeft;
+      } else {
+        left = rect.right + scrollLeft - dropdownWidth;
+      }
+      setDropdownPosition({ vertical, horizontal, top, left });
     }
     setOpen((o) => !o);
   };
@@ -2310,36 +2329,40 @@ function Dropdown({
     `ina-dropdown__menu--align-${dropdownPosition.horizontal}`,
     dropdownClassName
   );
-  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: dropdownContainerClasses, children: [
-    /* @__PURE__ */ jsx("div", { onClick: handleTriggerClick, className: triggerClasses, children: trigger }),
-    open && /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: menuClasses,
-        style: {
-          width: dropdownWidth,
-          ...dropdownStyle
-        },
-        role: "menu",
-        onMouseDown: (e) => e.stopPropagation(),
-        children: /* @__PURE__ */ jsx("ul", { className: "ina-dropdown__list", children: items.map((item, idx) => {
-          if (item && typeof item === "object" && "props" in item && item.props.className) {
-            return /* @__PURE__ */ jsx("li", {
-              role: "none",
-              // Clone element dengan className hasil clsx
-              // @ts-ignore
-              children: React.cloneElement(item, {
-                className: clsx(
-                  "ina-dropdown__item",
-                  item.props.className
-                )
-              })
-            }, idx);
-          }
-          return /* @__PURE__ */ jsx("li", { role: "none", children: /* @__PURE__ */ jsx("div", { className: "ina-dropdown__item", children: item }) }, idx);
-        }) })
-      }
-    )
+  const menuContent = open && mounted ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: menuClasses,
+      style: {
+        width: dropdownWidth,
+        position: "absolute",
+        top: dropdownPosition.top,
+        left: dropdownPosition.left,
+        ...dropdownStyle
+      },
+      role: "menu",
+      onMouseDown: (e) => e.stopPropagation(),
+      children: /* @__PURE__ */ jsx("ul", { className: "ina-dropdown__list", children: items.map((item, idx) => {
+        if (item && typeof item === "object" && "props" in item && item.props.className) {
+          return /* @__PURE__ */ jsx("li", {
+            role: "none",
+            // Clone element dengan className hasil clsx
+            // @ts-ignore
+            children: React.cloneElement(item, {
+              className: clsx(
+                "ina-dropdown__item",
+                item.props.className
+              )
+            })
+          }, idx);
+        }
+        return /* @__PURE__ */ jsx("li", { role: "none", children: /* @__PURE__ */ jsx("div", { className: "ina-dropdown__item", children: item }) }, idx);
+      }) })
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { ref: containerRef, className: dropdownContainerClasses, children: /* @__PURE__ */ jsx("div", { onClick: handleTriggerClick, className: triggerClasses, children: trigger }) }),
+    mounted && createPortal(menuContent, document.body)
   ] });
 }
 const ALLOWED_MIME_TYPES = {