@ionic/react 8.8.11-nightly.20260616 → 8.8.11

package/dist/index.js

@@ -549,6 +549,10 @@ const createForwardRef$1 = (ReactComponent, displayName) => {
         return jsx(ReactComponent, { ...props, forwardedRef: ref });
     };
     forwardRef.displayName = displayName;
+    // Cast the render function to the type React.forwardRef already infers for it.
+    // React 18's `forwardRef` wraps the props in `PropsWithoutRef`, and since
+    // `PropType` is unconstrained TypeScript can't prove the round-trip is safe.
+    // The cast keeps the inferred component type intact without widening to `any`.
     return React.forwardRef(forwardRef);
 };
 const defineCustomElement = (tagName, customElement) => {
@@ -704,6 +708,10 @@ displayName) => {
         return jsx(ReactComponent, { ...props, forwardedRef: ref });
     };
     forwardRef.displayName = displayName;
+    // Cast the render function to the type React.forwardRef already infers for it.
+    // React 18's `forwardRef` wraps the props in `PropsWithoutRef`, and since
+    // `PropType` is unconstrained TypeScript can't prove the round-trip is safe.
+    // The cast keeps the inferred component type intact without widening to `any`.
     return React.forwardRef(forwardRef);
 };
 const isPlatform = (platform) => {
@@ -953,6 +961,42 @@ const createInlineOverlayComponent = (tagName, defineCustomElement, hasDelegateH
         componentWillUnmount() {
             this.isUnmounted = true;
             const node = this.ref.current;
+            if (!node) {
+                return;
+            }
+            /**
+             * CoreDelegate (or user code in onWillPresent) can move the overlay out
+             * of where React rendered it. React's unmount only removes the node from
+             * its original React location, so we recover a relocated host here,
+             * regardless of open state.
+             *
+             * We can't gate this on `isOpen`: the overlay can be moved before it
+             * finishes presenting (e.g. the React 18 StrictMode mount/unmount cycle,
+             * where the present events that flip `isOpen` haven't fired yet), which
+             * would orphan the relocated host in the DOM. It also has to run
+             * synchronously here, since React's portal `removeChild` runs after
+             * `componentWillUnmount` returns and needs the host where it expects it.
+             */
+            if (node.isConnected) {
+                if (this.props.isNested) {
+                    /**
+                     * Nested overlays render inline inside a `<template>`. If the host
+                     * has been moved out of that template, React's unmount won't reach
+                     * it, so remove it directly. A host still in its template is left
+                     * for React to remove.
+                     */
+                    if (!(node.parentElement instanceof HTMLTemplateElement)) {
+                        node.remove();
+                    }
+                }
+                else if (this.portalTarget && node.parentNode !== this.portalTarget) {
+                    /**
+                     * Portaled overlays: move the host back into `portalTarget` so
+                     * React's portal `removeChild` can find it.
+                     */
+                    this.portalTarget.appendChild(node);
+                }
+            }
             /**
              * If the overlay is being unmounted, but is still
              * open, this means the unmount was triggered outside
@@ -966,31 +1010,13 @@ const createInlineOverlayComponent = (tagName, defineCustomElement, hasDelegateH
              * Unmounting the overlay at this stage should skip
              * the dismiss lifecycle, including skipping the transition.
              *
+             * Detach the local event listener that performs the state updates,
+             * before dismissing the overlay, to prevent the callback handlers
+             * executing after the component has been unmounted. This is to
+             * avoid memory leaks.
              */
-            if (node && this.state.isOpen) {
-                /**
-                 * Detach the local event listener that performs the state updates,
-                 * before dismissing the overlay, to prevent the callback handlers
-                 * executing after the component has been unmounted. This is to
-                 * avoid memory leaks.
-                 */
+            if (this.state.isOpen) {
                 node.removeEventListener('didDismiss', this.handleDidDismiss);
-                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);
             }
         }
@@ -1051,7 +1077,11 @@ const createInlineOverlayComponent = (tagName, defineCustomElement, hasDelegateH
         }
     };
     // 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 }));
+    // The render function is passed via `children` (not as a varargs child) so it
+    // matches `Context.Consumer`'s render-prop signature `(value) => ReactNode`.
+    const ReactComponentWithNesting = (props) => createElement(NestedOverlayContext.Consumer, {
+        children: (isNested) => createElement(ReactComponent, { ...props, isNested }),
+    });
     ReactComponentWithNesting.displayName = displayName;
     return createForwardRef(ReactComponentWithNesting, displayName);
 };