@asdp/ferryui 0.1.22-dev.9767 → 0.1.22-dev.9771

package/dist/index.js

@@ -4260,14 +4260,29 @@ var InputDynamic = ({
   const shouldFocusRef = React.useRef(false);
   const isBackspaceNavigationRef = React.useRef(false);
   const rawEmailOrPhoneInputRef = React.useRef("");
+  const wrapperRef = React.useRef(null);
   const [selectPortalTarget, setSelectPortalTarget] = React.useState(null);
+  const [isMobile, setIsMobile] = React.useState(false);
+  const [isInsideDialog, setIsInsideDialog] = React.useState(false);
   React.useEffect(() => {
-    if (typeof document !== "undefined") {
-      const provider = document.querySelector(
-        ".fui-FluentProvider"
+    if (typeof document === "undefined" || typeof window === "undefined") return;
+    const provider = document.querySelector(
+      ".fui-FluentProvider"
+    );
+    setSelectPortalTarget(provider ?? document.body);
+    const MOBILE_BREAKPOINT = 768;
+    const checkMobile = () => setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+    if (wrapperRef.current) {
+      const dialog = wrapperRef.current.closest(
+        ".fui-DialogBody, [role='dialog']"
       );
-      setSelectPortalTarget(provider ?? document.body);
+      setIsInsideDialog(!!dialog);
     }
+    return () => {
+      window.removeEventListener("resize", checkMobile);
+    };
   }, []);
   const getPhoneInputValue = (val) => {
     let cleaned = val.startsWith("+") ? stripNonDigits(val.substring(1)) : stripNonDigits(val);
@@ -4371,7 +4386,9 @@ var InputDynamic = ({
       menuList: (provided) => ({
         ...provided,
         padding: 0,
-        maxHeight: "300px",
+        // On mobile inside a Dialog: limit height to 200px to prevent viewport overflow.
+        // Otherwise keep 300px. Breakpoint: designTokens.breakpoints.md = 768px.
+        maxHeight: isMobile && isInsideDialog ? "180px" : "300px",
         /* Targetkan Webkit Scrollbar di menuList */
         "&::-webkit-scrollbar": {
           width: "8px",
@@ -5391,7 +5408,7 @@ var InputDynamic = ({
     }
     return rules;
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: wrapperRef, style: { display: "contents" }, children: /* @__PURE__ */ jsxRuntime.jsx(
     reactHookForm.Controller,
     {
       name,
@@ -5451,7 +5468,7 @@ var InputDynamic = ({
         }
       )
     }
-  );
+  ) });
 };
 var InputDynamic_default = InputDynamic;