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

package/dist/index.js

@@ -4260,6 +4260,15 @@ var InputDynamic = ({
   const shouldFocusRef = React.useRef(false);
   const isBackspaceNavigationRef = React.useRef(false);
   const rawEmailOrPhoneInputRef = React.useRef("");
+  const [selectPortalTarget, setSelectPortalTarget] = React.useState(null);
+  React.useEffect(() => {
+    if (typeof document !== "undefined") {
+      const provider = document.querySelector(
+        ".fui-FluentProvider"
+      );
+      setSelectPortalTarget(provider ?? document.body);
+    }
+  }, []);
   const getPhoneInputValue = (val) => {
     let cleaned = val.startsWith("+") ? stripNonDigits(val.substring(1)) : stripNonDigits(val);
     if (onlyCountries && onlyCountries.length > 0 && cleaned) {
@@ -4345,7 +4354,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) => ({
@@ -4848,7 +4862,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 +4925,10 @@ var InputDynamic = ({
                 ]
               }
             ),
-            menuPlacement
+            menuPlacement: menuPlacement || "auto",
+            menuShouldScrollIntoView: false,
+            menuPortalTarget: selectPortalTarget,
+            menuPosition: "fixed"
           }
         );
       case "phone": {