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

package/dist/index.mjs

@@ -4251,6 +4251,30 @@ var InputDynamic = ({
   const shouldFocusRef = useRef(false);
   const isBackspaceNavigationRef = useRef(false);
   const rawEmailOrPhoneInputRef = useRef("");
+  const wrapperRef = useRef(null);
+  const [selectPortalTarget, setSelectPortalTarget] = useState(null);
+  const [isMobile, setIsMobile] = useState(false);
+  const [isInsideDialog, setIsInsideDialog] = useState(false);
+  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) {
@@ -4336,7 +4360,12 @@ var InputDynamic = ({
       menuPortal: (base) => ({
         ...base,
         zIndex: 9999999,
-        borderRadius: tokens.borderRadiusMedium
+        borderRadius: tokens.borderRadiusMedium,
+        // Explicitly set typography so portal children inherit correct values
+        // regardless of where in the DOM tree the portal is mounted
+        fontSize: tokens.fontSizeBase400,
+        fontFamily: tokens.fontFamilyBase,
+        lineHeight: tokens.lineHeightBase400
       }),
       control: getControlStyles,
       menu: (provided) => ({
@@ -4348,7 +4377,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",
@@ -4839,7 +4870,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":
@@ -4899,7 +4933,10 @@ var InputDynamic = ({
                 ]
               }
             ),
-            menuPlacement
+            menuPlacement: menuPlacement || "auto",
+            menuShouldScrollIntoView: false,
+            menuPortalTarget: selectPortalTarget,
+            menuPosition: "fixed"
           }
         );
       case "phone": {
@@ -5362,7 +5399,7 @@ var InputDynamic = ({
     }
     return rules;
   };
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { ref: wrapperRef, style: { display: "contents" }, children: /* @__PURE__ */ jsx(
     Controller,
     {
       name,
@@ -5422,7 +5459,7 @@ var InputDynamic = ({
         }
       )
     }
-  );
+  ) });
 };
 var InputDynamic_default = InputDynamic;