@allxsmith/bestax-bulma 5.28.0 → 5.29.0

package/dist/esm/helpers/portal.js.map

@@ -1 +1 @@
-{"version":3,"file":"portal.js","sources":["../../../src/helpers/portal.tsx"],"sourcesContent":["import React from 'react';\nimport { createPortal } from 'react-dom';\nimport { useIsHydrated } from './useIsHydrated';\n\n/**\n * Resolves a portal target: an `HTMLElement` is used directly, a non-empty\n * `string` is treated as a `document.querySelector` selector (falling back to\n * `document.body` when it matches nothing), and any falsy value — `undefined`\n * or the empty string — resolves to `document.body`.\n *\n * The empty string is deliberately treated as \"no target\" rather than passed\n * through: `document.querySelector('')` throws a `SyntaxError`, and callers\n * building a selector from state can easily hand us `''`.\n *\n * @function resolvePortalContainer\n * @param container - The requested portal target, if any.\n * @returns The resolved DOM node to portal into.\n */\nexport function resolvePortalContainer(\n  container?: string | HTMLElement\n): HTMLElement {\n  if (!container) {\n    return document.body;\n  }\n  if (typeof container === 'string') {\n    return (\n      (document.querySelector(container) as HTMLElement | null) ?? document.body\n    );\n  }\n  return container;\n}\n\n/**\n * Props for the Portal component.\n */\nexport interface PortalProps {\n  /** Content to render into the container. */\n  children?: React.ReactNode;\n  /**\n   * Where the content goes: an element, or a `document.querySelector`\n   * selector. Omitted, empty, or a selector that matches nothing, it goes to\n   * `document.body`. A selector is looked up again on each render, so the\n   * content follows the target when it changes. Moving to another target\n   * remounts the children and resets their state, which includes a selector\n   * that only starts matching after the content has shown in `document.body`.\n   * Render the target first, or pass the element once you have it.\n   */\n  container?: string | HTMLElement;\n  /**\n   * Render the children in place instead, on the server as well as the\n   * client. Lets a component that portals only sometimes keep a single code\n   * path.\n   * @defaultValue false\n   */\n  disabled?: boolean;\n}\n\n/**\n * Renders its children into another part of the page, `document.body` unless `container` says otherwise, so floating content escapes an ancestor's `overflow`, `transform` or stacking context.\n *\n * React's server renderer can't render a portal, so `Portal` renders nothing\n * on the server and during hydration, and mounts its children in the commit\n * that follows. The first client render then matches the server markup. In an app\n * without server rendering it portals on the first render.\n *\n * React context, such as `ConfigProvider`'s class prefix, reaches the\n * portaled children, and their React events bubble through the React tree.\n * CSS inheritance follows the DOM instead: a scoped (non-`isRoot`) `Theme`\n * sets its variables on a wrapper element the portaled content has left, so\n * that content sees the page-level theme. Point `container` at an element\n * inside the themed area to keep it.\n *\n * Tab order and focus follow the DOM too. Content portaled from inside a\n * focus trap is no longer inside the trapped element, so the trap neither\n * reaches it nor holds focus there: render nested overlays inside the\n * trapped element, or give them a trap of their own. To trap portaled\n * content, put `useFocusTrap`'s ref on the element inside the `Portal`.\n *\n * @function\n * @param {PortalProps} props - Props for the Portal component.\n * @returns The portal, the children in place when `disabled`, or nothing\n * before hydration.\n *\n * @example\n * <Portal>\n *   <div className=\"box\">Rendered at the end of document.body</div>\n * </Portal>\n *\n * @example\n * // Into a dedicated overlay root\n * <Portal container=\"#overlays\">\n *   <CommandPalette />\n * </Portal>\n */\nexport function Portal({ children, container, disabled = false }: PortalProps) {\n  const hydrated = useIsHydrated();\n  if (disabled) return <>{children}</>;\n  if (!hydrated) return null;\n  return createPortal(children, resolvePortalContainer(container));\n}\n"],"names":["_jsx","_Fragment"],"mappings":";;;;;AAIA;;;;;;;;;;;;;AAaG;AACG,SAAU,sBAAsB,CACpC,SAAgC,EAAA;IAEhC,IAAI,CAAC,SAAS,EAAE;QACd,OAAO,QAAQ,CAAC,IAAI;IACtB;AACA,IAAA,IAAI,OAAO,SAAS,KAAK,QAAQ,EAAE;AACjC,QAAA,QACG,QAAQ,CAAC,aAAa,CAAC,SAAS,CAAwB,IAAI,QAAQ,CAAC,IAAI;IAE9E;AACA,IAAA,OAAO,SAAS;AAClB;AA2BA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCG;AACG,SAAU,MAAM,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,GAAG,KAAK,EAAe,EAAA;AAC3E,IAAA,MAAM,QAAQ,GAAG,aAAa,EAAE;AAChC,IAAA,IAAI,QAAQ;QAAE,OAAOA,GAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAI;AACpC,IAAA,IAAI,CAAC,QAAQ;AAAE,QAAA,OAAO,IAAI;IAC1B,OAAO,YAAY,CAAC,QAAQ,EAAE,sBAAsB,CAAC,SAAS,CAAC,CAAC;AAClE;;"}
+{"version":3,"file":"portal.js","sources":["../../../src/helpers/portal.tsx"],"sourcesContent":["import React from 'react';\nimport { createPortal } from 'react-dom';\nimport { useIsHydrated } from './useIsHydrated';\nimport { useConfig } from './Config';\n\n/**\n * Resolves a portal target: an `HTMLElement` is used directly, a non-empty\n * `string` is treated as a `document.querySelector` selector (falling back to\n * `document.body` when it matches nothing), and any falsy value — `undefined`\n * or the empty string — resolves to `document.body`.\n *\n * The empty string is deliberately treated as \"no target\" rather than passed\n * through: `document.querySelector('')` throws a `SyntaxError`, and callers\n * building a selector from state can easily hand us `''`.\n *\n * @function resolvePortalContainer\n * @param container - The requested portal target, if any.\n * @returns The resolved DOM node to portal into.\n */\nexport function resolvePortalContainer(\n  container?: string | HTMLElement\n): HTMLElement {\n  if (!container) {\n    return document.body;\n  }\n  if (typeof container === 'string') {\n    return (\n      (document.querySelector(container) as HTMLElement | null) ?? document.body\n    );\n  }\n  return container;\n}\n\n/**\n * Where a component's portal goes, as a function to call when the portal is\n * created: the target the component was given, else the `portalContainer` a\n * `ConfigProvider` sets, else `document.body`, each read as\n * `resolvePortalContainer` reads it. A component that portals resolves its\n * target through this, so the provider's default reaches it.\n *\n * The hook only reads context, so it is safe to call on the server, ahead of\n * any early return. The function it returns reads the DOM, so call it only\n * where the portal is created, which the server never reaches.\n *\n * @function usePortalContainer\n * @returns A function that takes the component's own target, if any, and\n * returns the DOM node to portal into.\n */\nexport function usePortalContainer(): (\n  container?: string | HTMLElement\n) => HTMLElement {\n  const { portalContainer } = useConfig();\n  return container => resolvePortalContainer(container || portalContainer);\n}\n\n/**\n * Props for the Portal component.\n */\nexport interface PortalProps {\n  /** Content to render into the container. */\n  children?: React.ReactNode;\n  /**\n   * Where the content goes: an element, or a `document.querySelector`\n   * selector. Omitted or empty, it goes to the `portalContainer` a\n   * `ConfigProvider` sets, and to `document.body` when none is set. A\n   * selector that matches nothing means `document.body` too. A selector is\n   * looked up again on each render, so the\n   * content follows the target when it changes. Moving to another target\n   * remounts the children and resets their state, which includes a selector\n   * that only starts matching after the content has shown in `document.body`.\n   * Render the target first, or pass the element once you have it.\n   */\n  container?: string | HTMLElement;\n  /**\n   * Render the children in place instead, on the server as well as the\n   * client. Lets a component that portals only sometimes keep a single code\n   * path.\n   * @defaultValue false\n   */\n  disabled?: boolean;\n}\n\n/**\n * Renders its children into another part of the page, `document.body` unless `container` or a `ConfigProvider` says otherwise, so floating content escapes an ancestor's `overflow`, `transform` or stacking context.\n *\n * React's server renderer can't render a portal, so `Portal` renders nothing\n * on the server and during hydration, and mounts its children in the commit\n * that follows. The first client render then matches the server markup. In an app\n * without server rendering it portals on the first render.\n *\n * React context, such as `ConfigProvider`'s class prefix, reaches the\n * portaled children, and their React events bubble through the React tree.\n * CSS inheritance follows the DOM instead: a scoped (non-`isRoot`) `Theme`\n * sets its variables on a wrapper element the portaled content has left, so\n * that content sees the page-level theme, and styles scoped to a shadow root\n * don't reach `document.body` at all. To keep them, portal into an element\n * inside the themed area or the shadow root: pass it as `container`, or as\n * the `portalContainer` of a `ConfigProvider` around that area. The second\n * also reaches what the library's components portal, such as Popover's\n * `appendToBody` panel or a `Modal` with `portal`.\n *\n * Tab order and focus follow the DOM too. Content portaled from inside a\n * focus trap is no longer inside the trapped element, so the trap neither\n * reaches it nor holds focus there: render nested overlays inside the\n * trapped element, or give them a trap of their own. To trap portaled\n * content, put `useFocusTrap`'s ref on the element inside the `Portal`.\n *\n * @function\n * @param {PortalProps} props - Props for the Portal component.\n * @returns The portal, the children in place when `disabled`, or nothing\n * before hydration.\n *\n * @example\n * <Portal>\n *   <div className=\"box\">Rendered at the end of document.body</div>\n * </Portal>\n *\n * @example\n * // Into a dedicated overlay root\n * <Portal container=\"#overlays\">\n *   <CommandPalette />\n * </Portal>\n */\nexport function Portal({ children, container, disabled = false }: PortalProps) {\n  const hydrated = useIsHydrated();\n  const resolveContainer = usePortalContainer();\n  if (disabled) return <>{children}</>;\n  if (!hydrated) return null;\n  return createPortal(children, resolveContainer(container));\n}\n"],"names":["_jsx","_Fragment"],"mappings":";;;;;;AAKA;;;;;;;;;;;;;AAaG;AACG,SAAU,sBAAsB,CACpC,SAAgC,EAAA;IAEhC,IAAI,CAAC,SAAS,EAAE;QACd,OAAO,QAAQ,CAAC,IAAI;IACtB;AACA,IAAA,IAAI,OAAO,SAAS,KAAK,QAAQ,EAAE;AACjC,QAAA,QACG,QAAQ,CAAC,aAAa,CAAC,SAAS,CAAwB,IAAI,QAAQ,CAAC,IAAI;IAE9E;AACA,IAAA,OAAO,SAAS;AAClB;AAEA;;;;;;;;;;;;;;AAcG;SACa,kBAAkB,GAAA;AAGhC,IAAA,MAAM,EAAE,eAAe,EAAE,GAAG,SAAS,EAAE;IACvC,OAAO,SAAS,IAAI,sBAAsB,CAAC,SAAS,IAAI,eAAe,CAAC;AAC1E;AA6BA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCG;AACG,SAAU,MAAM,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,GAAG,KAAK,EAAe,EAAA;AAC3E,IAAA,MAAM,QAAQ,GAAG,aAAa,EAAE;AAChC,IAAA,MAAM,gBAAgB,GAAG,kBAAkB,EAAE;AAC7C,IAAA,IAAI,QAAQ;QAAE,OAAOA,GAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAI;AACpC,IAAA,IAAI,CAAC,QAAQ;AAAE,QAAA,OAAO,IAAI;IAC1B,OAAO,YAAY,CAAC,QAAQ,EAAE,gBAAgB,CAAC,SAAS,CAAC,CAAC;AAC5D;;"}

package/dist/index.cjs

@@ -16,6 +16,9 @@ const useConfig = () => React.useContext(ConfigContext);
 /**
  * ConfigProvider injects configuration into all child components via React context.
  *
+ * A nested provider replaces the outer one's settings rather than adding to
+ * them, so inside it any setting it leaves out is back to its default.
+ *
  * @function
  * @param {ConfigProviderProps} props - Provider props.
  * @returns {JSX.Element} The context provider wrapping children.
@@ -25,8 +28,8 @@ const useConfig = () => React.useContext(ConfigContext);
  *   <App />
  * </ConfigProvider>
  */
-const ConfigProvider = ({ classPrefix, iconLibrary, children, }) => {
-    return (jsxRuntime.jsx(ConfigContext.Provider, { value: { classPrefix, iconLibrary }, children: children }));
+const ConfigProvider = ({ classPrefix, iconLibrary, portalContainer, children, }) => {
+    return (jsxRuntime.jsx(ConfigContext.Provider, { value: { classPrefix, iconLibrary, portalContainer }, children: children }));
 };
 /**
  * Utility hook to get the configured class prefix string.
@@ -2934,7 +2937,26 @@ function resolvePortalContainer(container) {
     return container;
 }
 /**
- * Renders its children into another part of the page, `document.body` unless `container` says otherwise, so floating content escapes an ancestor's `overflow`, `transform` or stacking context.
+ * Where a component's portal goes, as a function to call when the portal is
+ * created: the target the component was given, else the `portalContainer` a
+ * `ConfigProvider` sets, else `document.body`, each read as
+ * `resolvePortalContainer` reads it. A component that portals resolves its
+ * target through this, so the provider's default reaches it.
+ *
+ * The hook only reads context, so it is safe to call on the server, ahead of
+ * any early return. The function it returns reads the DOM, so call it only
+ * where the portal is created, which the server never reaches.
+ *
+ * @function usePortalContainer
+ * @returns A function that takes the component's own target, if any, and
+ * returns the DOM node to portal into.
+ */
+function usePortalContainer() {
+    const { portalContainer } = useConfig();
+    return container => resolvePortalContainer(container || portalContainer);
+}
+/**
+ * Renders its children into another part of the page, `document.body` unless `container` or a `ConfigProvider` says otherwise, so floating content escapes an ancestor's `overflow`, `transform` or stacking context.
  *
  * React's server renderer can't render a portal, so `Portal` renders nothing
  * on the server and during hydration, and mounts its children in the commit
@@ -2945,8 +2967,12 @@ function resolvePortalContainer(container) {
  * portaled children, and their React events bubble through the React tree.
  * CSS inheritance follows the DOM instead: a scoped (non-`isRoot`) `Theme`
  * sets its variables on a wrapper element the portaled content has left, so
- * that content sees the page-level theme. Point `container` at an element
- * inside the themed area to keep it.
+ * that content sees the page-level theme, and styles scoped to a shadow root
+ * don't reach `document.body` at all. To keep them, portal into an element
+ * inside the themed area or the shadow root: pass it as `container`, or as
+ * the `portalContainer` of a `ConfigProvider` around that area. The second
+ * also reaches what the library's components portal, such as Popover's
+ * `appendToBody` panel or a `Modal` with `portal`.
  *
  * Tab order and focus follow the DOM too. Content portaled from inside a
  * focus trap is no longer inside the trapped element, so the trap neither
@@ -2972,11 +2998,12 @@ function resolvePortalContainer(container) {
  */
 function Portal({ children, container, disabled = false }) {
     const hydrated = useIsHydrated();
+    const resolveContainer = usePortalContainer();
     if (disabled)
         return jsxRuntime.jsx(jsxRuntime.Fragment, { children: children });
     if (!hydrated)
         return null;
-    return reactDom.createPortal(children, resolvePortalContainer(container));
+    return reactDom.createPortal(children, resolveContainer(container));
 }
 
 /**
@@ -3131,7 +3158,7 @@ const ModalClose = ({ className, size = 'large', variant = 'delete', ...props })
  * @see {@link https://bulma.io/documentation/components/modal/ | Bulma Modal documentation}
  */
 const ModalRoot = React.forwardRef(function ModalRoot({ active, isActive, onClose, className, textColor, bgColor, modalCardTitle, modalCardFoot, type, children, closeOnEscape = true, lockScroll = true, portal = false, role, 'aria-modal': ariaModalProp, ...props }, ref) {
-    const { classPrefix } = useConfig();
+    const { classPrefix, portalContainer } = useConfig();
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
         backgroundColor: bgColor,
@@ -3181,10 +3208,17 @@ const ModalRoot = React.forwardRef(function ModalRoot({ active, isActive, onClos
     // hydrating render have to stay inline and only move into the portal once
     // we're past hydration.
     const onClient = useIsHydrated();
-    // Moving into the portal remounts the modal's subtree, so any effect holding
-    // a DOM node from before the move is holding a detached one. Effects that
-    // touch the modal's nodes key on this so they re-run against the new tree.
+    const resolveContainer = usePortalContainer();
+    // Moving into the portal, or from one portal target to another, remounts
+    // the modal's subtree, so any effect holding a DOM node from before the move
+    // is holding a detached one. Effects that touch the modal's nodes key on
+    // this, on `portal` and on `defaultTarget`, so they re-run against the new
+    // tree.
     const isPortaled = Boolean(portal) && onClient;
+    // The configured `portalContainer` only places a modal portaled with
+    // `portal` set to `true`. In place, or with a target of its own, a change
+    // to it moves nothing, so it mustn't re-run the effects either.
+    const defaultTarget = isPortaled && portal === true ? portalContainer : undefined;
     useScrollLock(isModalActive && lockScroll);
     // Record open order so keyboard handling only applies to the topmost modal.
     React.useEffect(() => {
@@ -3264,11 +3298,12 @@ const ModalRoot = React.forwardRef(function ModalRoot({ active, isActive, onClos
             previouslyFocusedRef.current?.focus?.();
         };
         // `isPortaled` flips once when a hydrated portal modal moves out of the
-        // inline tree; re-running rebinds focus onto the remounted nodes. The
-        // cleanup above restores focus to the pre-open element first (the detached
-        // subtree has left focus on <body>), so the re-run re-records the same
-        // element and restore-on-close still lands in the right place.
-    }, [isModalActive, isPortaled]);
+        // inline tree, and `portal` or `defaultTarget` changing moves a portaled
+        // one to another target; re-running rebinds focus onto the remounted
+        // nodes. The cleanup above restores focus to the pre-open element first
+        // (the detached subtree has left focus on <body>), so the re-run re-records
+        // the same element and restore-on-close still lands in the right place.
+    }, [isModalActive, isPortaled, portal, defaultTarget]);
     // Check if children contain compound components
     const hasCompoundComponents = React.Children.toArray(children).some(child => React.isValidElement(child) &&
         (child.type === ModalBackground ||
@@ -3305,7 +3340,7 @@ const ModalRoot = React.forwardRef(function ModalRoot({ active, isActive, onClos
         modalElement = (jsxRuntime.jsxs("div", { className: modalClasses, ref: combinedRef, role: resolvedRole, "aria-modal": resolvedAriaModal, "aria-labelledby": titleId, tabIndex: -1, ...rest, "data-testid": "modal", children: [jsxRuntime.jsx("div", { className: prefixedClassNames(classPrefix, 'modal-background'), onClick: onClose, "data-testid": "modal-background" }), isModalCard ? (jsxRuntime.jsxs("div", { className: prefixedClassNames(classPrefix, 'modal-card'), children: [modalCardTitle && (jsxRuntime.jsxs("header", { className: prefixedClassNames(classPrefix, 'modal-card-head'), children: [jsxRuntime.jsx("p", { id: titleId, className: prefixedClassNames(classPrefix, 'modal-card-title'), children: modalCardTitle }), onClose && (jsxRuntime.jsx("button", { className: deleteClass, "aria-label": "close", onClick: onClose, type: "button", "data-testid": "modal-close" }))] })), jsxRuntime.jsx("section", { className: prefixedClassNames(classPrefix, 'modal-card-body'), "data-testid": "modal-body", children: children }), modalCardFoot && (jsxRuntime.jsx("footer", { className: prefixedClassNames(classPrefix, 'modal-card-foot'), children: modalCardFoot }))] })) : (jsxRuntime.jsx("div", { className: prefixedClassNames(classPrefix, 'modal-content'), "data-testid": "modal-content", children: children })), (!isModalCard || (!modalCardTitle && onClose)) && onClose && (jsxRuntime.jsx("button", { className: prefixedClassNames(classPrefix, 'modal-close', 'is-large'), "aria-label": "close", onClick: onClose, type: "button", "data-testid": "modal-close-float" }))] }));
     }
     if (isPortaled) {
-        const target = resolvePortalContainer(typeof portal === 'boolean' ? undefined : portal);
+        const target = resolveContainer(typeof portal === 'boolean' ? undefined : portal);
         return reactDom.createPortal(modalElement, target);
     }
     return modalElement;
@@ -6658,6 +6693,11 @@ const Steps = withSubComponents(StepsComponent, { Step }, 'Steps');
  */
 const SidebarComponent = React.forwardRef(({ isOpen, onClose, position = 'left', width = '260px', isFullwidth, fullWidth, overlay = true, overlayClose = true, escapeClose = true, canCancel = true, children, inline = false, className, style, ...props }, ref) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    const resolveContainer = usePortalContainer();
+    const { portalContainer } = useConfig();
+    // Where the configured default puts the sidebar. An `inline` one doesn't
+    // portal, so a change to the default moves nothing.
+    const defaultTarget = inline ? undefined : portalContainer;
     const sidebarRef = React.useRef(null);
     // Cleanup returned by a consumer's callback ref on attach, held until detach.
     const consumerCleanupRef = React.useRef(null);
@@ -6689,7 +6729,9 @@ const SidebarComponent = React.forwardRef(({ isOpen, onClose, position = 'left',
     // Prevent body scroll when sidebar is open. Ref-counted through the shared
     // helper so an overlapping Modal/Dialog/Loading doesn't unlock underneath.
     useScrollLock(isOpen && overlay);
-    // Focus trap (basic - focus sidebar when opened)
+    // Focus trap (basic - focus sidebar when opened). A different
+    // `defaultTarget` remounts the portaled sidebar, so it focuses the new
+    // nodes then too.
     React.useEffect(() => {
         if (isOpen) {
             const element = sidebarRef.current;
@@ -6704,7 +6746,7 @@ const SidebarComponent = React.forwardRef(({ isOpen, onClose, position = 'left',
                 }
             }
         }
-    }, [isOpen]);
+    }, [isOpen, defaultTarget]);
     // Use combined ref
     const combinedRef = React.useCallback((node) => {
         sidebarRef.current =
@@ -6759,7 +6801,7 @@ const SidebarComponent = React.forwardRef(({ isOpen, onClose, position = 'left',
     }
     // Render to portal for proper stacking
     if (typeof document !== 'undefined') {
-        return reactDom.createPortal(sidebarContent, document.body);
+        return reactDom.createPortal(sidebarContent, resolveContainer());
     }
     return null;
 });
@@ -6887,6 +6929,7 @@ function groupIntoPositionStacks(items, positionOf, containerPosition, order) {
  */
 const Toast = React.forwardRef(({ message, type = 'default', actionType, position = 'top-right', duration = 2000, indefinite = false, dismissible = true, closable = false, rounded = false, pauseOnHover = false, cancelable = true, actionText, cancelText, onAction, onClose, container, inline = false, className, ...props }, ref) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    const resolveContainer = usePortalContainer();
     const [isVisible, setIsVisible] = React.useState(true);
     const [isPaused, setIsPaused] = React.useState(false);
     const toastRef = React.useRef(null);
@@ -7012,7 +7055,7 @@ const Toast = React.forwardRef(({ message, type = 'default', actionType, positio
     }
     const toastContent = jsxRuntime.jsx("div", { className: containerClasses, children: toastElement });
     if (typeof document !== 'undefined') {
-        return reactDom.createPortal(toastContent, resolvePortalContainer(container));
+        return reactDom.createPortal(toastContent, resolveContainer(container));
     }
     return null;
 });
@@ -7169,6 +7212,7 @@ const ToastContainer = ({ position = 'top-right' }) => {
     // Starts from the toasts already showing instead of an empty list, then
     // follows changes.
     const toastList = React.useSyncExternalStore(toast.subscribe, getVisibleToasts, getServerToasts);
+    const resolveContainer = usePortalContainer();
     if (typeof document === 'undefined' || toastList.length === 0) {
         return null;
     }
@@ -7176,7 +7220,7 @@ const ToastContainer = ({ position = 'top-right' }) => {
     return reactDom.createPortal(stacks.map(stack => (jsxRuntime.jsx("div", { className: `toast-container is-${stack.position}`, children: stack.items.map(t => {
             const { queue: _queue, ...toastProps } = t.props;
             return (jsxRuntime.jsx(Toast, { ...toastProps, position: stack.position, onClose: () => toast.close(t.id) }, t.id));
-        }) }, stack.key))), document.body);
+        }) }, stack.key))), resolveContainer());
 };
 
 /**
@@ -7233,11 +7277,14 @@ const Dialog = React.forwardRef(({ isOpen, title, message, type = 'default', con
             handleCancel();
         }
     }, [canCancel, handleCancel]);
-    // Moving into the portal remounts the Modal's subtree — these buttons
-    // included — so the focus effect below has to re-run against the new
-    // nodes, exactly as the Modal's own focus effect does.
+    // Moving into the portal, or from one portal target to another, remounts
+    // the Modal's subtree, these buttons included, so the focus effect below
+    // has to re-run against the new nodes, exactly as the Modal's own focus
+    // effect does, on the same inputs.
     const isHydrated = useIsHydrated();
     const isPortaled = Boolean(portal) && isHydrated;
+    const { portalContainer } = useConfig();
+    const defaultTarget = isPortaled && portal === true ? portalContainer : undefined;
     // Focus management — Dialog picks a specific button rather than the
     // Modal's default (first focusable/root); this effect runs after the
     // inner Modal's own focus-on-open effect, so it wins.
@@ -7246,7 +7293,7 @@ const Dialog = React.forwardRef(({ isOpen, title, message, type = 'default', con
             const buttonToFocus = focusCancel && showCancel ? cancelRef.current : confirmRef.current;
             buttonToFocus?.focus();
         }
-    }, [isOpen, focusCancel, showCancel, isPortaled]);
+    }, [isOpen, focusCancel, showCancel, isPortaled, portal, defaultTarget]);
     // Use combined ref
     const combinedRef = React.useCallback((node) => {
         dialogRef.current =
@@ -8881,6 +8928,7 @@ const NotificationContainer = ({ position = 'top-right' }) => {
     // the server render and the hydrating one render nothing, and the container
     // portals in from the render after hydration.
     const isHydrated = useIsHydrated();
+    const resolveContainer = usePortalContainer();
     // The notifications the status region announces. Danger and warning
     // announce themselves.
     const politeItems = React.useMemo(() => items.filter(item => !isUrgentColor(item.options.color)), [items]);
@@ -8913,7 +8961,7 @@ const NotificationContainer = ({ position = 'top-right' }) => {
         return null;
     }
     const stacks = groupIntoPositionStacks(items, item => item.options.position, position, notificationStackOrder);
-    return reactDom.createPortal(jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [stacks.map(stack => (jsxRuntime.jsx("div", { style: notificationStackStyle(stack.position), children: stack.items.map(item => (jsxRuntime.jsx(NotificationItem, { instance: item, onClose: notification.close, registerMessage: registerMessage }, item.id))) }, stack.key))), jsxRuntime.jsx(StatusRegion, { items: politeItems, describe: describe })] }), document.body);
+    return reactDom.createPortal(jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [stacks.map(stack => (jsxRuntime.jsx("div", { style: notificationStackStyle(stack.position), children: stack.items.map(item => (jsxRuntime.jsx(NotificationItem, { instance: item, onClose: notification.close, registerMessage: registerMessage }, item.id))) }, stack.key))), jsxRuntime.jsx(StatusRegion, { items: politeItems, describe: describe })] }), resolveContainer());
 };
 
 /**
@@ -13840,6 +13888,7 @@ Calendar.displayName = 'Calendar';
 const isBrowser = typeof window !== 'undefined';
 const PickerPopover = ({ isOpen, onClose, anchorRef, children, position = 'bottom-left', appendToBody = false, className, trapFocus = true, closeOnClickOutside = true, closeOnEscape = true, ariaLabel, ariaLabelledBy, role = 'dialog', id, restoreFocusRef, initialFocusSelector, }) => {
     const panelRef = React.useRef(null);
+    const resolveContainer = usePortalContainer();
     // Read as the trap turns on, once the panel's content has rendered.
     const initialFocusRef = React.useMemo(() => initialFocusSelector === undefined
         ? undefined
@@ -13916,7 +13965,7 @@ const PickerPopover = ({ isOpen, onClose, anchorRef, children, position = 'botto
         : {};
     const panel = (jsxRuntime.jsx("div", { ref: panelRef, id: id, role: role, "aria-modal": role === 'dialog' ? 'false' : undefined, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, tabIndex: -1, className: classNames(panelClass, className), style: style, children: children }));
     if (appendToBody && isBrowser) {
-        return reactDom.createPortal(panel, document.body);
+        return reactDom.createPortal(panel, resolveContainer());
     }
     return panel;
 };