@ionic/react 8.8.8-nightly.20260519 → 8.8.8

package/dist/index.js

@@ -839,6 +839,14 @@ const detachEvent = (node, eventName) => {
     }
 };
 
+/**
+ * Set to `true` when rendering inside another inline overlay. Nested
+ * overlays render at their JSX position (no portal) so that core's
+ * `el.closest('ion-popover')`-style nesting detection keeps working,
+ * and the outer overlay's portal already gives the subtree the correct
+ * React event-delegation root.
+ */
+const NestedOverlayContext = React.createContext(false);
 const createInlineOverlayComponent = (tagName, defineCustomElement, hasDelegateHost) => {
     if (defineCustomElement) {
         defineCustomElement();
@@ -847,6 +855,7 @@ const createInlineOverlayComponent = (tagName, defineCustomElement, hasDelegateH
     const ReactComponent = class extends React.Component {
         constructor(props) {
             super(props);
+            this.isUnmounted = false;
             this.handleIonMount = () => {
                 /**
                  * Mount the inner component when the
@@ -890,12 +899,45 @@ const createInlineOverlayComponent = (tagName, defineCustomElement, hasDelegateH
             this.state = { isOpen: false };
             // Create a local ref to the inner child element.
             this.wrapperRef = React.createRef();
+            // Marker stays at the JSX location so we can recover the immediate
+            // JSX parent after the overlay has been portaled to ion-app.
+            this.markerRef = React.createRef();
+            /**
+             * Resolve the portal target to the same container CoreDelegate
+             * teleports overlays into. Portaling here keeps the overlay inside
+             * React's tree so React's synthetic events still dispatch to its
+             * children, even after CoreDelegate moves the DOM node out of the
+             * declared JSX parent.
+             */
+            this.portalTarget = typeof document !== 'undefined' ? document.querySelector('ion-app') || document.body : null;
         }
         componentDidMount() {
+            // Reset for React 18 StrictMode: the dev-mode unmount/remount cycle
+            // re-uses this instance and leaves the flag set from the prior
+            // componentWillUnmount.
+            this.isUnmounted = false;
             this.componentDidUpdate(this.props);
             this.ref.current?.addEventListener('ionMount', this.handleIonMount);
             this.ref.current?.addEventListener('willPresent', this.handleWillPresent);
             this.ref.current?.addEventListener('didDismiss', this.handleDidDismiss);
+            /**
+             * The overlay is portaled to `portalTarget`, so Stencil caches that
+             * container as `cachedOriginalParent`. Modal features (sheet
+             * child-route passthrough, parent-removal auto-dismiss) walk up
+             * from `cachedOriginalParent` to find the enclosing `.ion-page`,
+             * so we redirect it at the marker's JSX parent.
+             */
+            const overlay = this.ref.current;
+            if (overlay) {
+                componentOnReady(overlay, () => {
+                    if (this.isUnmounted)
+                        return;
+                    const markerParent = this.markerRef.current?.parentElement ?? null;
+                    if (markerParent && markerParent !== this.portalTarget) {
+                        overlay.cachedOriginalParent = markerParent;
+                    }
+                });
+            }
         }
         componentDidUpdate(prevProps) {
             const node = this.ref.current;
@@ -905,10 +947,11 @@ const createInlineOverlayComponent = (tagName, defineCustomElement, hasDelegateH
              * so they don't get attached twice and called twice.
              */
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const { onDidDismiss, onWillPresent, ...cProps } = this.props;
+            const { onDidDismiss, onWillPresent, isNested, ...cProps } = this.props;
             attachProps(node, cProps, prevProps);
         }
         componentWillUnmount() {
+            this.isUnmounted = true;
             const node = this.ref.current;
             /**
              * If the overlay is being unmounted, but is still
@@ -932,13 +975,28 @@ const createInlineOverlayComponent = (tagName, defineCustomElement, hasDelegateH
                  * avoid memory leaks.
                  */
                 node.removeEventListener('didDismiss', this.handleDidDismiss);
-                node.remove();
+                if (this.props.isNested) {
+                    /**
+                     * Nested overlays render inline (no portal). CoreDelegate may
+                     * have moved the node out of its React parent, so React's
+                     * unmount won't reach it. Remove it directly.
+                     */
+                    node.remove();
+                }
+                else if (node.isConnected && this.portalTarget && node.parentNode !== this.portalTarget) {
+                    /**
+                     * Portaled path: move the overlay back into `portalTarget` so
+                     * React's portal removeChild can find it. CoreDelegate (or user
+                     * code in onWillPresent) may have moved it elsewhere while open.
+                     */
+                    this.portalTarget.appendChild(node);
+                }
                 detachProps(node, this.props);
             }
         }
         render() {
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const { children, forwardedRef, style, className, ref, ...cProps } = this.props;
+            const { children, forwardedRef, style, className, ref, isNested, ...cProps } = this.props;
             const propsToPass = Object.keys(cProps).reduce((acc, name) => {
                 if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
                     const eventName = name.substring(2).toLowerCase();
@@ -966,12 +1024,12 @@ const createInlineOverlayComponent = (tagName, defineCustomElement, hasDelegateH
                 }
                 return DELEGATE_HOST;
             };
-            return createElement('template', {}, createElement(tagName, newProps, 
+            const overlayElement = createElement(tagName, newProps, 
+            // Children, not the overlay host, observe `isNested = true`.
+            createElement(NestedOverlayContext.Provider, { value: true }, 
             /**
-             * We only want the inner component
-             * to be mounted if the overlay is open,
-             * so conditionally render the component
-             * based on the isOpen state.
+             * We only want the inner component to be mounted if the overlay
+             * is open, so conditionally render based on `isOpen` state.
              */
             this.state.isOpen || this.props.keepContentsMounted
                 ? createElement('div', {
@@ -979,12 +1037,23 @@ const createInlineOverlayComponent = (tagName, defineCustomElement, hasDelegateH
                     className: getWrapperClasses(),
                 }, children)
                 : null));
+            // Top-level overlays portal into `portalTarget` with a marker
+            // `<template>` at the JSX location to recover the immediate JSX
+            // parent after CoreDelegate teleports. Nested overlays and SSR
+            // fall back to a `<template>` wrapper.
+            if (!isNested && this.portalTarget) {
+                return createElement(React.Fragment, null, createElement('template', { ref: this.markerRef }), createPortal(overlayElement, this.portalTarget));
+            }
+            return createElement('template', {}, overlayElement);
         }
         static get displayName() {
             return displayName;
         }
     };
-    return createForwardRef(ReactComponent, displayName);
+    // Forward the nesting context as a prop to avoid contextType on the class.
+    const ReactComponentWithNesting = (props) => createElement(NestedOverlayContext.Consumer, null, (isNested) => createElement(ReactComponent, { ...props, isNested }));
+    ReactComponentWithNesting.displayName = displayName;
+    return createForwardRef(ReactComponentWithNesting, displayName);
 };
 const DELEGATE_HOST = 'ion-delegate-host';