From 73b26517a7a1da95dad9f77644b337bbf5c53d9b Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 9 Sep 2025 23:27:20 +0000
Subject: [PATCH 1/3] Initial plan


From e888e4f04e9cd2cdd3140a77108a22b1b2d63fbe Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 9 Sep 2025 23:47:04 +0000
Subject: [PATCH 2/3] chore: add portal context with comprehensive tests and
 storybook demo

Co-authored-by: francinelucca <40550942+francinelucca@users.noreply.github.com>
---
 packages/react/src/Portal/Portal.stories.tsx | 122 ++++++++++++++++++-
 packages/react/src/Portal/Portal.tsx         |   1 -
 2 files changed, 121 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/Portal/Portal.stories.tsx b/packages/react/src/Portal/Portal.stories.tsx
index 09c9b6cf9dd..f58167ca788 100644
--- a/packages/react/src/Portal/Portal.stories.tsx
+++ b/packages/react/src/Portal/Portal.stories.tsx
@@ -1,7 +1,8 @@
 import type {Meta} from '@storybook/react-vite'
-import {Portal} from './Portal'
+import {Portal, PortalContext, registerPortalRoot} from './Portal'
 import classes from './Portal.stories.module.css'
 import {clsx} from 'clsx'
+import {useEffect} from 'react'
 
 export default {
   title: 'Behaviors/Portal',
@@ -22,3 +23,122 @@ export const Default = () => (
     </div>
   </>
 )
+
+export const WithPortalContext = () => {
+  useEffect(() => {
+    // Create and register custom portal containers for the story
+    let customContainer = document.getElementById('storybook-custom-portal')
+    let overrideContainer = document.getElementById('storybook-override-portal')
+
+    if (!customContainer) {
+      // If containers don't exist yet, create them manually
+      customContainer = document.createElement('div')
+      customContainer.id = 'storybook-custom-portal'
+      document.body.appendChild(customContainer)
+    }
+
+    if (!overrideContainer) {
+      overrideContainer = document.createElement('div')
+      overrideContainer.id = 'storybook-override-portal'
+      document.body.appendChild(overrideContainer)
+    }
+
+    registerPortalRoot(customContainer, 'storybook-custom')
+    registerPortalRoot(overrideContainer, 'storybook-override')
+
+    return () => {
+      // Clean up on unmount
+      if (document.body.contains(customContainer)) {
+        document.body.removeChild(customContainer)
+      }
+      if (document.body.contains(overrideContainer)) {
+        document.body.removeChild(overrideContainer)
+      }
+    }
+  }, [])
+
+  return (
+    <>
+      <div className={clsx(classes.PortalContainer, classes.OuterContainer)}>
+        <h3>Using PortalContext</h3>
+        <p>This story demonstrates how to use PortalContext to control where Portal content is rendered.</p>
+
+        {/* Default Portal */}
+        <div
+          className={clsx(classes.PortalContainer, classes.InnerContainer)}
+          style={{backgroundColor: '#f0f8ff', margin: '10px', padding: '10px'}}
+        >
+          <strong>Default Portal (no context):</strong>
+          <Portal>
+            <div style={{backgroundColor: '#e6f3ff', padding: '8px', border: '1px solid #0366d6'}}>
+              Content in default portal
+            </div>
+          </Portal>
+        </div>
+
+        {/* Portal with Context */}
+        <div
+          className={clsx(classes.PortalContainer, classes.InnerContainer)}
+          style={{backgroundColor: '#fff5f5', margin: '10px', padding: '10px'}}
+        >
+          <strong>Portal with PortalContext:</strong>
+          <PortalContext.Provider value={{portalContainerName: 'storybook-custom'}}>
+            <Portal>
+              <div style={{backgroundColor: '#ffe6e6', padding: '8px', border: '1px solid #d73a49'}}>
+                Content in custom portal (via PortalContext)
+              </div>
+            </Portal>
+          </PortalContext.Provider>
+        </div>
+
+        {/* Override context with containerName prop */}
+        <div
+          className={clsx(classes.PortalContainer, classes.InnerContainer)}
+          style={{backgroundColor: '#f0fff4', margin: '10px', padding: '10px'}}
+        >
+          <strong>Context + containerName prop override:</strong>
+          <PortalContext.Provider value={{portalContainerName: 'storybook-custom'}}>
+            <Portal containerName="storybook-override">
+              <div style={{backgroundColor: '#e6ffe6', padding: '8px', border: '1px solid #28a745'}}>
+                Content overriding context with containerName prop
+              </div>
+            </Portal>
+          </PortalContext.Provider>
+        </div>
+      </div>
+
+      {/* Custom portal containers */}
+      <div
+        style={{
+          position: 'fixed',
+          top: '10px',
+          right: '10px',
+          backgroundColor: '#fffbf0',
+          padding: '10px',
+          border: '2px solid #f66a0a',
+          borderRadius: '4px',
+          maxWidth: '200px',
+        }}
+      >
+        <strong>Custom Portal Container:</strong>
+        <div id="storybook-custom-portal" />
+      </div>
+
+      <div
+        style={{
+          position: 'fixed',
+          bottom: '10px',
+          right: '10px',
+          backgroundColor: '#f0fff0',
+          padding: '10px',
+          border: '2px solid #28a745',
+          borderRadius: '4px',
+          maxWidth: '200px',
+        }}
+      >
+        <strong>Override Portal Container:</strong>
+        <div id="storybook-override-portal" />
+      </div>
+    </>
+  )
+}
diff --git a/packages/react/src/Portal/Portal.tsx b/packages/react/src/Portal/Portal.tsx
index 2e262db7aa0..490b901c62a 100644
--- a/packages/react/src/Portal/Portal.tsx
+++ b/packages/react/src/Portal/Portal.tsx
@@ -72,7 +72,6 @@ export const Portal: React.FC<React.PropsWithChildren<PortalProps>> = ({
 }) => {
   const {portalContainerName} = useContext(PortalContext)
   const elementRef = React.useRef<HTMLDivElement | null>(null)
-  const {portalContainerName} = useContext(PortalContext)
   if (!elementRef.current) {
     const div = document.createElement('div')
     // Portaled content should get their own stacking context so they don't interfere

From f3ed64eb325ae9ac07600983fd6cbbd599957206 Mon Sep 17 00:00:00 2001
From: Marie Lucca <francinelucca@github.com>
Date: Wed, 10 Sep 2025 10:13:40 -0400
Subject: [PATCH 3/3] story fix

---
 .../src/Portal/Portal.features.stories.tsx    | 108 +++++++++++++++-
 packages/react/src/Portal/Portal.stories.tsx  | 122 +-----------------
 2 files changed, 107 insertions(+), 123 deletions(-)

diff --git a/packages/react/src/Portal/Portal.features.stories.tsx b/packages/react/src/Portal/Portal.features.stories.tsx
index 0dfb807cc7a..46321c7e96e 100644
--- a/packages/react/src/Portal/Portal.features.stories.tsx
+++ b/packages/react/src/Portal/Portal.features.stories.tsx
@@ -1,6 +1,6 @@
-import React from 'react'
+import React, {useEffect} from 'react'
 import type {Meta} from '@storybook/react-vite'
-import {Portal, registerPortalRoot} from './Portal'
+import {Portal, PortalContext, registerPortalRoot} from './Portal'
 import classes from './Portal.stories.module.css'
 import {clsx} from 'clsx'
 
@@ -81,3 +81,107 @@ export const MultiplePortalRoots: React.FC<React.PropsWithChildren<Record<string
     </>
   )
 }
+
+export const WithPortalContext = () => {
+  const customContainerRef = React.useRef<HTMLDivElement>(null)
+  const overrideContainerRef = React.useRef<HTMLDivElement>(null)
+  const [mounted, setMounted] = React.useState(false)
+  useEffect(() => {
+    if (customContainerRef.current instanceof HTMLElement && overrideContainerRef.current instanceof HTMLElement) {
+      registerPortalRoot(customContainerRef.current, 'custom-portal')
+      registerPortalRoot(overrideContainerRef.current, 'override-portal')
+      setMounted(true)
+    }
+  }, [])
+
+  return (
+    <>
+      <div className={clsx(classes.PortalContainer, classes.OuterContainer)}>
+        <h3>Using PortalContext</h3>
+        <p>This story demonstrates how to use PortalContext to control where Portal content is rendered.</p>
+
+        {/* Default Portal */}
+        <div
+          className={clsx(classes.PortalContainer, classes.InnerContainer)}
+          style={{backgroundColor: '#f0f8ff', margin: '10px', padding: '10px'}}
+        >
+          <strong>Default Portal (no context):</strong>
+          {mounted ? (
+            <Portal>
+              <div style={{backgroundColor: '#e6f3ff', padding: '8px', border: '1px solid #0366d6'}}>
+                Content in default portal
+              </div>
+            </Portal>
+          ) : null}
+        </div>
+
+        {/* Portal with Context */}
+        <div
+          className={clsx(classes.PortalContainer, classes.InnerContainer)}
+          style={{backgroundColor: '#fff5f5', margin: '10px', padding: '10px'}}
+        >
+          <strong>Portal with PortalContext:</strong>
+          <PortalContext.Provider value={{portalContainerName: 'custom-portal'}}>
+            {mounted ? (
+              <Portal>
+                <div style={{backgroundColor: '#ffe6e6', padding: '8px', border: '1px solid #d73a49'}}>
+                  Content in custom portal (via PortalContext)
+                </div>
+              </Portal>
+            ) : null}
+          </PortalContext.Provider>
+        </div>
+
+        {/* Override context with containerName prop */}
+        <div
+          className={clsx(classes.PortalContainer, classes.InnerContainer)}
+          style={{backgroundColor: '#f0fff4', margin: '10px', padding: '10px'}}
+        >
+          <strong>Context + containerName prop override:</strong>
+          <PortalContext.Provider value={{portalContainerName: 'custom-portal'}}>
+            {mounted ? (
+              <Portal containerName="override-portal">
+                <div style={{backgroundColor: '#e6ffe6', padding: '8px', border: '1px solid #28a745'}}>
+                  Content overriding context with containerName prop
+                </div>
+              </Portal>
+            ) : null}
+          </PortalContext.Provider>
+        </div>
+      </div>
+
+      {/* Custom portal containers */}
+      <div
+        style={{
+          position: 'fixed',
+          top: '100px',
+          right: '10px',
+          backgroundColor: '#fffbf0',
+          padding: '10px',
+          border: '2px solid #f66a0a',
+          borderRadius: '4px',
+          maxWidth: '200px',
+        }}
+      >
+        <strong>Custom Portal Container:</strong>
+        <div ref={customContainerRef} />
+      </div>
+
+      <div
+        style={{
+          position: 'fixed',
+          bottom: '10px',
+          right: '10px',
+          backgroundColor: '#f0fff0',
+          padding: '10px',
+          border: '2px solid #28a745',
+          borderRadius: '4px',
+          maxWidth: '200px',
+        }}
+      >
+        <strong>Override Portal Container:</strong>
+        <div ref={overrideContainerRef} />
+      </div>
+    </>
+  )
+}
diff --git a/packages/react/src/Portal/Portal.stories.tsx b/packages/react/src/Portal/Portal.stories.tsx
index f58167ca788..09c9b6cf9dd 100644
--- a/packages/react/src/Portal/Portal.stories.tsx
+++ b/packages/react/src/Portal/Portal.stories.tsx
@@ -1,8 +1,7 @@
 import type {Meta} from '@storybook/react-vite'
-import {Portal, PortalContext, registerPortalRoot} from './Portal'
+import {Portal} from './Portal'
 import classes from './Portal.stories.module.css'
 import {clsx} from 'clsx'
-import {useEffect} from 'react'
 
 export default {
   title: 'Behaviors/Portal',
@@ -23,122 +22,3 @@ export const Default = () => (
     </div>
   </>
 )
-
-export const WithPortalContext = () => {
-  useEffect(() => {
-    // Create and register custom portal containers for the story
-    let customContainer = document.getElementById('storybook-custom-portal')
-    let overrideContainer = document.getElementById('storybook-override-portal')
-
-    if (!customContainer) {
-      // If containers don't exist yet, create them manually
-      customContainer = document.createElement('div')
-      customContainer.id = 'storybook-custom-portal'
-      document.body.appendChild(customContainer)
-    }
-
-    if (!overrideContainer) {
-      overrideContainer = document.createElement('div')
-      overrideContainer.id = 'storybook-override-portal'
-      document.body.appendChild(overrideContainer)
-    }
-
-    registerPortalRoot(customContainer, 'storybook-custom')
-    registerPortalRoot(overrideContainer, 'storybook-override')
-
-    return () => {
-      // Clean up on unmount
-      if (document.body.contains(customContainer)) {
-        document.body.removeChild(customContainer)
-      }
-      if (document.body.contains(overrideContainer)) {
-        document.body.removeChild(overrideContainer)
-      }
-    }
-  }, [])
-
-  return (
-    <>
-      <div className={clsx(classes.PortalContainer, classes.OuterContainer)}>
-        <h3>Using PortalContext</h3>
-        <p>This story demonstrates how to use PortalContext to control where Portal content is rendered.</p>
-
-        {/* Default Portal */}
-        <div
-          className={clsx(classes.PortalContainer, classes.InnerContainer)}
-          style={{backgroundColor: '#f0f8ff', margin: '10px', padding: '10px'}}
-        >
-          <strong>Default Portal (no context):</strong>
-          <Portal>
-            <div style={{backgroundColor: '#e6f3ff', padding: '8px', border: '1px solid #0366d6'}}>
-              Content in default portal
-            </div>
-          </Portal>
-        </div>
-
-        {/* Portal with Context */}
-        <div
-          className={clsx(classes.PortalContainer, classes.InnerContainer)}
-          style={{backgroundColor: '#fff5f5', margin: '10px', padding: '10px'}}
-        >
-          <strong>Portal with PortalContext:</strong>
-          <PortalContext.Provider value={{portalContainerName: 'storybook-custom'}}>
-            <Portal>
-              <div style={{backgroundColor: '#ffe6e6', padding: '8px', border: '1px solid #d73a49'}}>
-                Content in custom portal (via PortalContext)
-              </div>
-            </Portal>
-          </PortalContext.Provider>
-        </div>
-
-        {/* Override context with containerName prop */}
-        <div
-          className={clsx(classes.PortalContainer, classes.InnerContainer)}
-          style={{backgroundColor: '#f0fff4', margin: '10px', padding: '10px'}}
-        >
-          <strong>Context + containerName prop override:</strong>
-          <PortalContext.Provider value={{portalContainerName: 'storybook-custom'}}>
-            <Portal containerName="storybook-override">
-              <div style={{backgroundColor: '#e6ffe6', padding: '8px', border: '1px solid #28a745'}}>
-                Content overriding context with containerName prop
-              </div>
-            </Portal>
-          </PortalContext.Provider>
-        </div>
-      </div>
-
-      {/* Custom portal containers */}
-      <div
-        style={{
-          position: 'fixed',
-          top: '10px',
-          right: '10px',
-          backgroundColor: '#fffbf0',
-          padding: '10px',
-          border: '2px solid #f66a0a',
-          borderRadius: '4px',
-          maxWidth: '200px',
-        }}
-      >
-        <strong>Custom Portal Container:</strong>
-        <div id="storybook-custom-portal" />
-      </div>
-
-      <div
-        style={{
-          position: 'fixed',
-          bottom: '10px',
-          right: '10px',
-          backgroundColor: '#f0fff0',
-          padding: '10px',
-          border: '2px solid #28a745',
-          borderRadius: '4px',
-          maxWidth: '200px',
-        }}
-      >
-        <strong>Override Portal Container:</strong>
-        <div id="storybook-override-portal" />
-      </div>
-    </>
-  )
-}