@adobe-commerce/elsie 1.3.1-alpha007 → 1.3.1-alpha008

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adobe-commerce/elsie",
-  "version": "1.3.1-alpha007",
+  "version": "1.3.1-alpha008",
   "license": "SEE LICENSE IN LICENSE.md",
   "description": "Domain Package SDK",
   "engines": {

package/src/components/Modal/Modal.css

@@ -10,10 +10,10 @@
 /* https://cssguidelin.es/#bem-like-naming */
 
 .dropin-modal {
-  height: 100vh;
-  width: 100vw;
   position: fixed;
   top: 0;
+  right: 0;
+  bottom: 0;
   left: 0;
   z-index: 99999;
   overflow: auto;

package/src/components/Modal/Modal.stories.tsx

@@ -11,7 +11,7 @@ import { Meta, StoryObj } from '@storybook/preact';
 import { Modal as component, ModalProps } from './Modal';
 import { useState } from 'preact/hooks';
 import { Button } from '../Button';
-import { expect, userEvent, within } from '@storybook/test';
+import { expect, userEvent, within, waitFor } from '@storybook/test';
 
 const meta: Meta<ModalProps> = {
   title: 'Components/Modal',
@@ -107,13 +107,21 @@ export const SmallModal: Story = {
     const canvas = within(canvasElement);
     await userEvent.click(canvas.getByRole('button'));
 
+    const portalRoot = await waitFor(() => {
+      const root = document.querySelector('[data-portal-root]') as HTMLDivElement;
+      expect(root).toBeTruthy();
+      return root;
+    });
+
+    await expect(portalRoot).toBeVisible();
+
     const modal = document.querySelector(
       '.dropin-modal__body'
     ) as HTMLDivElement;
 
     await expect(modal).toBeVisible();
 
-    await expect(await canvas.findByText('Small modal')).toBeVisible();
+    expect(portalRoot.querySelector('h4')?.innerText).toBe('Small modal');
 
     const closeButton = document.querySelector(
       '.dropin-modal__header-close-button'
@@ -148,13 +156,21 @@ export const MediumModal: Story = {
     const canvas = within(canvasElement);
     await userEvent.click(canvas.getByRole('button'));
 
+    const portalRoot = await waitFor(() => {
+      const root = document.querySelector('[data-portal-root]') as HTMLDivElement;
+      expect(root).toBeTruthy();
+      return root;
+    });
+
+    await expect(portalRoot).toBeVisible();
+
     const modal = document.querySelector(
       '.dropin-modal__body'
     ) as HTMLDivElement;
 
     await expect(modal).toBeVisible();
 
-    await expect(await canvas.findByText('Medium modal')).toBeVisible();
+    expect(portalRoot.querySelector('h3')?.innerText).toBe('Medium modal');
 
     const closeButton = document.querySelector(
       '.dropin-modal__header-close-button'
@@ -187,11 +203,17 @@ export const FullModal: Story = {
     const canvas = within(canvasElement);
     await userEvent.click(canvas.getByRole('button'));
 
+    const portalRoot = await waitFor(() => {
+      const root = document.querySelector('[data-portal-root]') as HTMLDivElement;
+      expect(root).toBeTruthy();
+      return root;
+    });
+
     const modal = document.querySelector(
       '.dropin-modal__body'
     ) as HTMLDivElement;
 
-    await expect(modal).toBeVisible();
+    await expect(portalRoot).toBeVisible();
 
     const closeButton = document.querySelector(
       '.dropin-modal__header-close-button'

package/src/components/Modal/Modal.tsx

@@ -18,6 +18,7 @@ import {
 import { Button } from '../Button';
 import { Close as CloseSVG } from '@adobe-commerce/elsie/icons';
 import { VNode } from 'preact';
+import { Portal } from '../Portal/Portal';
 
 import '@adobe-commerce/elsie/components/Modal/Modal.css';
 
@@ -106,52 +107,54 @@ export const Modal: FunctionComponent<ModalProps> = ({
   }, []);
 
   return (
-    <div
-      className={classes([
-        'dropin-modal',
-        ['dropin-modal--dim', backgroundDim],
-      ])}
-    >
+    <Portal>
       <div
-        {...props}
         className={classes([
-          'dropin-modal__body',
-          [`dropin-modal__body--${size}`, size],
-          className,
+          'dropin-modal',
+          ['dropin-modal--dim', backgroundDim],
         ])}
       >
         <div
+          {...props}
           className={classes([
-            'dropin-modal__header',
-            ['dropin-modal__header-title', !!title],
+            'dropin-modal__body',
+            [`dropin-modal__body--${size}`, size],
+            className,
           ])}
         >
-          {title && (
-            <div className={classes(['dropin-modal__header-title-content'])}>
-              {title}
-            </div>
-          )}
-
-          {showCloseButton && (
-            <Button
-              aria-label={translations.modalCloseLabel}
-              variant="tertiary"
-              className="dropin-modal__header-close-button"
-              onClick={handleOnClose}
-              icon={<CloseSVG />}
-            />
-          )}
-        </div>
-
-        <div
-          className={classes([
-            'dropin-modal__content',
-            ['dropin-modal__body--centered', centered],
-          ])}
-        >
-          {children}
+          <div
+            className={classes([
+              'dropin-modal__header',
+              ['dropin-modal__header-title', !!title],
+            ])}
+          >
+            {title && (
+              <div className={classes(['dropin-modal__header-title-content'])}>
+                {title}
+              </div>
+            )}
+
+            {showCloseButton && (
+              <Button
+                aria-label={translations.modalCloseLabel}
+                variant="tertiary"
+                className="dropin-modal__header-close-button"
+                onClick={handleOnClose}
+                icon={<CloseSVG />}
+              />
+            )}
+          </div>
+
+          <div
+            className={classes([
+              'dropin-modal__content',
+              ['dropin-modal__body--centered', centered],
+            ])}
+          >
+            {children}
+          </div>
         </div>
       </div>
-    </div>
+    </Portal>
   );
 };

package/src/components/Portal/Portal.stories.tsx

@@ -0,0 +1,145 @@
+/********************************************************************
+ *  Copyright 2024 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+
+import { Meta, StoryObj } from '@storybook/preact';
+import { Portal } from './Portal';
+import { Button } from '../Button';
+import { useState } from 'preact/compat';
+
+const meta: Meta<typeof Portal> = {
+  title: 'Components/Portal',
+  component: Portal,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof Portal>;
+
+/**
+ * ```ts
+ * import { Portal } from '@/elsie/components/Portal';
+ *
+ * <Portal>
+ *      <div>👋 Howdy, I'm Howdy!</div>
+ * </Portal>
+ * ```
+ */
+
+// Portal with dynamic content
+export const DynamicContent: Story = {
+  render: () => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [count, setCount] = useState(0);
+
+    return (
+      <div style={{ border: '2px dashed #ccc', padding: '20px' }}>
+        <Button onClick={() => setIsOpen(!isOpen)}>
+          {isOpen ? 'Close Portal' : 'Open Portal'}
+        </Button>
+        
+        {isOpen && (
+          <Portal>
+            <div style={{ 
+              position: 'fixed', 
+              top: '50%', 
+              left: '50%', 
+              transform: 'translate(-50%, -50%)',
+              background: 'white',
+              padding: '20px',
+              border: '1px solid #ccc',
+              boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
+            }}>
+              <p>Portal content with counter: {count}</p>
+              <Button onClick={() => setCount(c => c + 1)}>
+                Increment Counter
+              </Button>
+              <Button 
+                variant="tertiary" 
+                onClick={() => setIsOpen(false)}
+                style={{ marginLeft: '8px' }}
+              >
+                Close
+              </Button>
+            </div>
+          </Portal>
+        )}
+      </div>
+    );
+  },
+};
+
+// Portal with nested portals
+export const NestedPortals: Story = {
+  render: () => {
+    const [isOuterOpen, setOuterOpen] = useState(false);
+    const [isInnerOpen, setInnerOpen] = useState(false);
+
+    return (
+      <div style={{ border: '2px dashed #ccc', padding: '20px' }}>
+        <Button onClick={() => setOuterOpen(!isOuterOpen)}>
+          {isOuterOpen ? 'Close Outer Portal' : 'Open Outer Portal'}
+        </Button>
+        
+        {isOuterOpen && (
+          <Portal>
+            <div style={{ 
+              position: 'fixed', 
+              top: '50%', 
+              left: '50%', 
+              transform: 'translate(-50%, -50%)',
+              background: 'white',
+              padding: '20px',
+              border: '1px solid #ccc',
+              boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
+            }}>
+              <p>Outer Portal Content</p>
+              <Button onClick={() => setInnerOpen(!isInnerOpen)}>
+                {isInnerOpen ? 'Close Inner Portal' : 'Open Inner Portal'}
+              </Button>
+              
+              {isInnerOpen && (
+                <Portal>
+                  <div style={{ 
+                    position: 'fixed', 
+                    top: '60%', 
+                    left: '50%', 
+                    transform: 'translate(-50%, -50%)',
+                    background: 'white',
+                    padding: '20px',
+                    border: '1px solid #ccc',
+                    boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
+                  }}>
+                    <p>Inner Portal Content</p>
+                    <Button 
+                      variant="tertiary" 
+                      onClick={() => setInnerOpen(false)}
+                    >
+                      Close Inner Portal
+                    </Button>
+                  </div>
+                </Portal>
+              )}
+              
+              <Button 
+                variant="tertiary" 
+                onClick={() => setOuterOpen(false)}
+                style={{ marginLeft: '8px' }}
+              >
+                Close Outer Portal
+              </Button>
+            </div>
+          </Portal>
+        )}
+      </div>
+    );
+  },
+};

package/src/components/Portal/Portal.tsx

@@ -0,0 +1,43 @@
+/********************************************************************
+ *  Copyright 2024 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+
+import { ComponentChildren, render } from 'preact';
+import { FunctionComponent, useEffect, useRef } from 'preact/compat';
+
+interface PortalProps {
+  children: ComponentChildren;
+}
+
+export const Portal: FunctionComponent<PortalProps> = ({ children }) => {
+  const portalRoot = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    // Create portal root if it doesn't exist
+    if (!portalRoot.current) {
+      portalRoot.current = document.createElement('div');
+      portalRoot.current.setAttribute('data-portal-root', '');
+      portalRoot.current.classList.add('dropin-design');
+      document.body.appendChild(portalRoot.current);
+    }
+
+    // Render children into portal root
+    render(children, portalRoot.current);
+
+    // Cleanup
+    return () => {
+      if (portalRoot.current) {
+        render(null, portalRoot.current);
+        portalRoot.current.remove();
+        portalRoot.current = null;
+      }
+    };
+  }, [children]);
+
+  return null;
+};