From 810b59089b07ebb077c53756205a92c399caf755 Mon Sep 17 00:00:00 2001
From: Vlad Moroz <vlad@workos.com>
Date: Tue, 4 Jun 2024 18:27:24 +0200
Subject: [PATCH] Another attempt at Chromatic/Storybook portals

---
 packages/react/select/src/Select.stories.tsx | 72 +++++++++++---------
 1 file changed, 38 insertions(+), 34 deletions(-)

diff --git a/packages/react/select/src/Select.stories.tsx b/packages/react/select/src/Select.stories.tsx
index a80aeeac03..3575b01b04 100644
--- a/packages/react/select/src/Select.stories.tsx
+++ b/packages/react/select/src/Select.stories.tsx
@@ -9,6 +9,10 @@ export default { title: 'Components/Select' };
 
 const POSITIONS = ['item-aligned', 'popper'] as const;
 
+const SelectPortal = (props: React.ComponentPropsWithoutRef<typeof Select.Portal>) => (
+  <Select.Portal container={window.document.body} {...props} />
+);
+
 export const Styled = () => (
   <div style={{ display: 'flex', gap: 20, padding: 50 }}>
     {POSITIONS.map((position) => (
@@ -19,7 +23,7 @@ export const Styled = () => (
             <Select.Value />
             <Select.Icon />
           </Select.Trigger>
-          <Select.Portal>
+          <SelectPortal>
             <Select.Content className={contentClass()} position={position} sideOffset={5}>
               <Select.Viewport className={viewportClass()}>
                 <Select.Item className={itemClass()} value="one">
@@ -49,7 +53,7 @@ export const Styled = () => (
               </Select.Viewport>
               <Select.Arrow />
             </Select.Content>
-          </Select.Portal>
+          </SelectPortal>
         </Select.Root>
       </Label>
     ))}
@@ -80,7 +84,7 @@ export const Controlled = () => {
               </Select.Value>
               <Select.Icon />
             </Select.Trigger>
-            <Select.Portal>
+            <SelectPortal>
               <Select.Content className={contentClass()} position={position} sideOffset={5}>
                 <Select.Viewport className={viewportClass()}>
                   <Select.Item className={itemClass()} value="fr">
@@ -110,7 +114,7 @@ export const Controlled = () => {
                 </Select.Viewport>
                 <Select.Arrow />
               </Select.Content>
-            </Select.Portal>
+            </SelectPortal>
           </Select.Root>
         </Label>
       ))}
@@ -137,7 +141,7 @@ export const Position = () => (
             <Select.Value />
             <Select.Icon />
           </Select.Trigger>
-          <Select.Portal>
+          <SelectPortal>
             <Select.Content className={contentClass()} position={position} sideOffset={5}>
               <Select.ScrollUpButton className={scrollUpButtonClass()}>▲</Select.ScrollUpButton>
               <Select.Viewport className={viewportClass()}>
@@ -163,7 +167,7 @@ export const Position = () => (
               </Select.ScrollDownButton>
               <Select.Arrow />
             </Select.Content>
-          </Select.Portal>
+          </SelectPortal>
         </Select.Root>
       </Label>
     ))}
@@ -188,7 +192,7 @@ export const NoDefaultValue = () => (
             <Select.Value placeholder="Pick an option" />
             <Select.Icon />
           </Select.Trigger>
-          <Select.Portal>
+          <SelectPortal>
             <Select.Content className={contentClass()} position={position} sideOffset={5}>
               <Select.Viewport className={viewportClass()}>
                 <Select.Item className={itemClass()} value="one" disabled>
@@ -212,7 +216,7 @@ export const NoDefaultValue = () => (
               </Select.Viewport>
               <Select.Arrow />
             </Select.Content>
-          </Select.Portal>
+          </SelectPortal>
         </Select.Root>
       </Label>
     ))}
@@ -237,7 +241,7 @@ export const Typeahead = () => (
             <Select.Value />
             <Select.Icon />
           </Select.Trigger>
-          <Select.Portal>
+          <SelectPortal>
             <Select.Content className={contentClass()} position={position} sideOffset={5}>
               <Select.ScrollUpButton className={scrollUpButtonClass()}>▲</Select.ScrollUpButton>
               <Select.Viewport className={viewportClass()}>
@@ -257,7 +261,7 @@ export const Typeahead = () => (
               </Select.ScrollDownButton>
               <Select.Arrow />
             </Select.Content>
-          </Select.Portal>
+          </SelectPortal>
         </Select.Root>
       </Label>
     ))}
@@ -282,7 +286,7 @@ export const WithGroups = () => (
             <Select.Value />
             <Select.Icon />
           </Select.Trigger>
-          <Select.Portal>
+          <SelectPortal>
             <Select.Content className={contentClass()} position={position} sideOffset={5}>
               <Select.ScrollUpButton className={scrollUpButtonClass()}>▲</Select.ScrollUpButton>
               <Select.Viewport className={viewportClass()}>
@@ -321,7 +325,7 @@ export const WithGroups = () => (
               </Select.ScrollDownButton>
               <Select.Arrow />
             </Select.Content>
-          </Select.Portal>
+          </SelectPortal>
         </Select.Root>
       </Label>
     ))}
@@ -330,7 +334,7 @@ export const WithGroups = () => (
 
 export const Labelling = () => {
   const content = (
-    <Select.Portal>
+    <SelectPortal>
       <Select.Content className={contentClass()}>
         <Select.Viewport className={viewportClass()}>
           <Select.Item className={itemClass()} value="0-18">
@@ -353,7 +357,7 @@ export const Labelling = () => {
           </Select.Item>
         </Select.Viewport>
       </Select.Content>
-    </Select.Portal>
+    </SelectPortal>
   );
   return (
     <div style={{ padding: 50 }}>
@@ -411,7 +415,7 @@ export const RightToLeft = () => (
             <Select.Value />
             <Select.Icon />
           </Select.Trigger>
-          <Select.Portal>
+          <SelectPortal>
             <Select.Content className={contentClass()} position={position} sideOffset={5}>
               <Select.Viewport className={viewportClass()}>
                 <Select.Item className={itemClass()} value="one">
@@ -441,7 +445,7 @@ export const RightToLeft = () => (
               </Select.Viewport>
               <Select.Arrow />
             </Select.Content>
-          </Select.Portal>
+          </SelectPortal>
         </Select.Root>
       </Label>
     ))}
@@ -477,7 +481,7 @@ export const WithinForm = () => {
             <Select.Value />
             <Select.Icon />
           </Select.Trigger>
-          <Select.Portal>
+          <SelectPortal>
             <Select.Content className={contentClass()}>
               <Select.Viewport className={viewportClass()}>
                 <Select.Item className={itemClass()} value="fr">
@@ -500,7 +504,7 @@ export const WithinForm = () => {
                 </Select.Item>
               </Select.Viewport>
             </Select.Content>
-          </Select.Portal>
+          </SelectPortal>
         </Select.Root>
       </Label>
       <br />
@@ -540,7 +544,7 @@ export const DisabledWithinForm = () => {
             <Select.Value />
             <Select.Icon />
           </Select.Trigger>
-          <Select.Portal>
+          <SelectPortal>
             <Select.Content className={contentClass()}>
               <Select.Viewport className={viewportClass()}>
                 <Select.Item className={itemClass()} value="fr">
@@ -563,7 +567,7 @@ export const DisabledWithinForm = () => {
                 </Select.Item>
               </Select.Viewport>
             </Select.Content>
-          </Select.Portal>
+          </SelectPortal>
         </Select.Root>
       </Label>
       <br />
@@ -603,7 +607,7 @@ export const RequiredWithinForm = () => {
             <Select.Value placeholder="Pick an option" />
             <Select.Icon />
           </Select.Trigger>
-          <Select.Portal>
+          <SelectPortal>
             <Select.Content className={contentClass()}>
               <Select.Viewport className={viewportClass()}>
                 <Select.Item className={itemClass()} value="fr">
@@ -626,7 +630,7 @@ export const RequiredWithinForm = () => {
                 </Select.Item>
               </Select.Viewport>
             </Select.Content>
-          </Select.Portal>
+          </SelectPortal>
         </Select.Root>
       </Label>
       <br />
@@ -652,7 +656,7 @@ export const WithinDialog = () => (
                 <Select.Value />
                 <Select.Icon />
               </Select.Trigger>
-              <Select.Portal>
+              <SelectPortal>
                 <Select.Content className={contentClass()}>
                   <Select.ScrollUpButton className={scrollUpButtonClass()}>▲</Select.ScrollUpButton>
                   <Select.Viewport className={viewportClass()}>
@@ -669,7 +673,7 @@ export const WithinDialog = () => (
                     ▼
                   </Select.ScrollDownButton>
                 </Select.Content>
-              </Select.Portal>
+              </SelectPortal>
             </Select.Root>
           </Label>
           <Dialog.Close>Close Dialog</Dialog.Close>
@@ -733,7 +737,7 @@ export const ChromaticNoDefaultValue = () => (
         <Select.Value />
         <Select.Icon />
       </Select.Trigger>
-      <Select.Portal>
+      <SelectPortal>
         <Select.Content className={contentClass()} style={{ opacity: 0.7 }}>
           <Select.ScrollUpButton className={scrollUpButtonClass()}>▲</Select.ScrollUpButton>
           <Select.Viewport className={viewportClass()}>
@@ -748,7 +752,7 @@ export const ChromaticNoDefaultValue = () => (
           </Select.Viewport>
           <Select.ScrollDownButton className={scrollDownButtonClass()}>▼</Select.ScrollDownButton>
         </Select.Content>
-      </Select.Portal>
+      </SelectPortal>
     </Select.Root>
 
     <Select.Root open>
@@ -756,7 +760,7 @@ export const ChromaticNoDefaultValue = () => (
         <Select.Value placeholder="Pick an option" />
         <Select.Icon />
       </Select.Trigger>
-      <Select.Portal>
+      <SelectPortal>
         <Select.Content className={contentClass()} style={{ opacity: 0.7 }}>
           <Select.ScrollUpButton className={scrollUpButtonClass()}>▲</Select.ScrollUpButton>
           <Select.Viewport className={viewportClass()}>
@@ -771,7 +775,7 @@ export const ChromaticNoDefaultValue = () => (
           </Select.Viewport>
           <Select.ScrollDownButton className={scrollDownButtonClass()}>▼</Select.ScrollDownButton>
         </Select.Content>
-      </Select.Portal>
+      </SelectPortal>
     </Select.Root>
   </div>
 );
@@ -803,7 +807,7 @@ export const Cypress = () => {
               <Select.Value />
               <Select.Icon />
             </Select.Trigger>
-            <Select.Portal>
+            <SelectPortal>
               <Select.Content className={contentClass()}>
                 <Select.Viewport className={viewportClass()}>
                   <Select.Item className={itemClass()} value="S">
@@ -826,7 +830,7 @@ export const Cypress = () => {
                   </Select.Item>
                 </Select.Viewport>
               </Select.Content>
-            </Select.Portal>
+            </SelectPortal>
           </Select.Root>
         </Label>
         <button type="submit">buy</button>
@@ -843,7 +847,7 @@ export const Cypress = () => {
               <Select.Value placeholder="…" />
               <Select.Icon />
             </Select.Trigger>
-            <Select.Portal>
+            <SelectPortal>
               <Select.Content className={contentClass()}>
                 <Select.Viewport className={viewportClass()}>
                   <Select.Item className={itemClass()} value="S">
@@ -872,7 +876,7 @@ export const Cypress = () => {
                   </Select.Item>
                 </Select.Viewport>
               </Select.Content>
-            </Select.Portal>
+            </SelectPortal>
           </Select.Root>
         </Label>
 
@@ -901,7 +905,7 @@ const ChromaticSelect = React.forwardRef<
       <Select.Value />
       <Select.Icon />
     </Select.Trigger>
-    <Select.Portal>
+    <SelectPortal>
       <Select.Content
         className={paddedElement === 'content' ? contentClassWithPadding() : contentClass()}
         style={{ opacity: 0.7 }}
@@ -929,7 +933,7 @@ const ChromaticSelect = React.forwardRef<
           ▼
         </Select.ScrollDownButton>
       </Select.Content>
-    </Select.Portal>
+    </SelectPortal>
   </Select.Root>
 ));