@adobe-commerce/elsie 1.3.0-beta5 → 1.3.0-beta6

package/package.json

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

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

@@ -12,6 +12,7 @@ import { Modal as component, ModalProps } from './Modal';
 import { useState } from 'preact/hooks';
 import { Button } from '../Button';
 import { expect, userEvent, within, waitFor } from '@storybook/test';
+import { useText } from '@adobe-commerce/elsie/i18n';
 
 const meta: Meta<ModalProps> = {
   title: 'Components/Modal',
@@ -269,4 +270,65 @@ export const OverflowingTitle: Story = {
   },
 };
 
+const LocalizedContent = () => {
+  const translations = useText({
+    label: 'Dropin.ExampleComponentName.item.label',
+  });
+
+  console.log(translations.label);
+  return <div>{translations.label}</div>;
+};
+
+/**
+ * ```ts
+ * import { Modal } from '@/elsie/components/Modal';
+ * import { useText } from '@adobe-commerce/elsie/i18n';
+ *
+ * const label = useText(`Dropin.ExampleComponentName.item.label`).label;
+ *
+ * <Modal size="medium" title={<h3>Localized Modal</h3>}>
+ *      <div>{label}</div>
+ * </Modal>
+ * ```
+ */
+
+export const LocalizedModal: Story = {
+  args: {
+    size: 'medium',
+    children: <LocalizedContent />,
+    title: <h3>Localized Modal</h3>,
+  },
+  play: async ({ canvasElement }) => {
+    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();
+
+    expect(portalRoot.querySelector('h3')?.innerText).toBe('Localized Modal');
+    expect((portalRoot.querySelector('.dropin-modal__body') as HTMLElement)?.innerText).toContain('string');
+
+    const closeButton = document.querySelector(
+      '.dropin-modal__header-close-button'
+    ) as HTMLButtonElement;
+
+    await userEvent.click(closeButton);
+
+    await expect(modal).not.toBeVisible();
+
+    await expect(canvas.getByText('Open Modal')).toBeVisible();
+  },
+};
+
 export default meta;

package/src/components/Portal/Portal.tsx

@@ -7,8 +7,8 @@
  * accompanying it. 
  *******************************************************************/
 
-import { ComponentChildren, render } from 'preact';
-import { FunctionComponent, useEffect, useRef } from 'preact/compat';
+import { ComponentChildren } from 'preact';
+import { FunctionComponent, useLayoutEffect, useRef } from 'preact/compat';
 
 interface PortalProps {
   children: ComponentChildren;
@@ -16,28 +16,34 @@ interface PortalProps {
 
 export const Portal: FunctionComponent<PortalProps> = ({ children }) => {
   const portalRoot = useRef<HTMLDivElement | null>(null);
+  const contentRef = useRef<HTMLDivElement | null>(null);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     // 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);
+    // Move content to portal root
+    if (contentRef.current && portalRoot.current) {
+      portalRoot.current.appendChild(contentRef.current);
+    }
 
     // Cleanup
     return () => {
       if (portalRoot.current) {
-        render(null, portalRoot.current);
         portalRoot.current.remove();
         portalRoot.current = null;
       }
     };
-  }, [children]);
+  }, []);
 
-  return null;
+  // Return a div that contains the children
+  return (
+    <div ref={contentRef} className="dropin-design">
+      {children}
+    </div>
+  );
 };