@edux-design/forms 0.0.17 → 0.0.19

package/dist/index.d.mts

@@ -246,6 +246,7 @@ declare const Option: react.ForwardRefExoticComponent<react.RefAttributes<any>>;
  * @property {string} [contentClassName] - optional class for the popover content
  * @property {string} [listClassName] - optional class for the list element
  * @property {string} [optionClassName] - optional class for each option
+ * @property {HTMLElement|null} [portalContainer] - explicit portal container for the popover content
  * @property {"default"|"small"} [size="default"] - size variant for the combobox input
  * @property {"full"|"small"|"medium"|"large"} [width="full"] - width size for the combobox container
  */

package/dist/index.d.ts

@@ -246,6 +246,7 @@ declare const Option: react.ForwardRefExoticComponent<react.RefAttributes<any>>;
  * @property {string} [contentClassName] - optional class for the popover content
  * @property {string} [listClassName] - optional class for the list element
  * @property {string} [optionClassName] - optional class for each option
+ * @property {HTMLElement|null} [portalContainer] - explicit portal container for the popover content
  * @property {"default"|"small"} [size="default"] - size variant for the combobox input
  * @property {"full"|"small"|"medium"|"large"} [width="full"] - width size for the combobox container
  */

package/dist/index.js

@@ -884,6 +884,7 @@ var ComboboxRoot = (0, import_react10.forwardRef)(
     contentClassName,
     listClassName,
     optionClassName,
+    portalContainer,
     size = "default",
     width = "full",
     ...inputProps
@@ -999,15 +1000,16 @@ var ComboboxRoot = (0, import_react10.forwardRef)(
       setActiveIndex((prev) => prev >= 0 ? prev : 0);
     }, [open, filteredOptions, singleSelectedValue, isMultiSelectEnabled]);
     const [contentWidth, setContentWidth] = (0, import_react10.useState)(0);
-    const [portalContainer, setPortalContainer] = (0, import_react10.useState)(null);
+    const [inferredPortalContainer, setInferredPortalContainer] = (0, import_react10.useState)(null);
     (0, import_react10.useLayoutEffect)(() => {
       if (anchorRef.current) {
         setContentWidth(anchorRef.current.offsetWidth);
-        setPortalContainer(
+        setInferredPortalContainer(
           anchorRef.current.closest("[role='dialog']") ?? null
         );
       }
     }, [open]);
+    const resolvedPortalContainer = portalContainer ?? inferredPortalContainer;
     const isNarrowPopover = contentWidth > 0 && contentWidth < 100;
     const emitChange = (0, import_react10.useCallback)(
       (nextValue, option) => {
@@ -1295,7 +1297,7 @@ var ComboboxRoot = (0, import_react10.forwardRef)(
       /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         import_popovers.PopoverContent,
         {
-          container: portalContainer,
+          container: resolvedPortalContainer,
           side: "bottom",
           align: "start",
           sideOffset: 4,

package/dist/index.mjs

@@ -855,6 +855,7 @@ var ComboboxRoot = forwardRef6(
     contentClassName,
     listClassName,
     optionClassName,
+    portalContainer,
     size = "default",
     width = "full",
     ...inputProps
@@ -970,15 +971,16 @@ var ComboboxRoot = forwardRef6(
       setActiveIndex((prev) => prev >= 0 ? prev : 0);
     }, [open, filteredOptions, singleSelectedValue, isMultiSelectEnabled]);
     const [contentWidth, setContentWidth] = useState3(0);
-    const [portalContainer, setPortalContainer] = useState3(null);
+    const [inferredPortalContainer, setInferredPortalContainer] = useState3(null);
     useLayoutEffect(() => {
       if (anchorRef.current) {
         setContentWidth(anchorRef.current.offsetWidth);
-        setPortalContainer(
+        setInferredPortalContainer(
           anchorRef.current.closest("[role='dialog']") ?? null
         );
       }
     }, [open]);
+    const resolvedPortalContainer = portalContainer ?? inferredPortalContainer;
     const isNarrowPopover = contentWidth > 0 && contentWidth < 100;
     const emitChange = useCallback4(
       (nextValue, option) => {
@@ -1266,7 +1268,7 @@ var ComboboxRoot = forwardRef6(
       /* @__PURE__ */ jsx9(
         PopoverContent,
         {
-          container: portalContainer,
+          container: resolvedPortalContainer,
           side: "bottom",
           align: "start",
           sideOffset: 4,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edux-design/forms",
-  "version": "0.0.17",
+  "version": "0.0.19",
   "sideEffects": [
     "**/*.css"
   ],