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

package/dist/index.js

@@ -4260,6 +4260,30 @@ 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" || 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']"
+      );
+      setIsInsideDialog(!!dialog);
+    }
+    return () => {
+      window.removeEventListener("resize", checkMobile);
+    };
+  }, []);
   const getPhoneInputValue = (val) => {
     let cleaned = val.startsWith("+") ? stripNonDigits(val.substring(1)) : stripNonDigits(val);
     if (onlyCountries && onlyCountries.length > 0 && cleaned) {
@@ -4345,7 +4369,12 @@ var InputDynamic = ({
       menuPortal: (base) => ({
         ...base,
         zIndex: 9999999,
-        borderRadius: reactComponents.tokens.borderRadiusMedium
+        borderRadius: reactComponents.tokens.borderRadiusMedium,
+        // Explicitly set typography so portal children inherit correct values
+        // regardless of where in the DOM tree the portal is mounted
+        fontSize: reactComponents.tokens.fontSizeBase400,
+        fontFamily: reactComponents.tokens.fontFamilyBase,
+        lineHeight: reactComponents.tokens.lineHeightBase400
       }),
       control: getControlStyles,
       menu: (provided) => ({
@@ -4357,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",
@@ -4848,7 +4879,10 @@ var InputDynamic = ({
             getOptionLabel: (option) => option.label,
             getOptionValue: (option) => option.value,
             isOptionDisabled: (option) => option.disabled || false,
-            menuPlacement
+            menuPlacement: menuPlacement || "auto",
+            menuShouldScrollIntoView: false,
+            menuPortalTarget: selectPortalTarget,
+            menuPosition: "fixed"
           }
         );
       case "country":
@@ -4908,7 +4942,10 @@ var InputDynamic = ({
                 ]
               }
             ),
-            menuPlacement
+            menuPlacement: menuPlacement || "auto",
+            menuShouldScrollIntoView: false,
+            menuPortalTarget: selectPortalTarget,
+            menuPosition: "fixed"
           }
         );
       case "phone": {
@@ -5371,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,
@@ -5431,7 +5468,7 @@ var InputDynamic = ({
         }
       )
     }
-  );
+  ) });
 };
 var InputDynamic_default = InputDynamic;