@adobe-commerce/elsie 1.4.1-alpha101 → 1.4.1

package/package.json

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

package/src/docs/API/render.mdx

@@ -121,5 +121,21 @@ button.addEventListener('click', () => {
 });
 ```
 
+### Unmounting components without instance access
+
+The `Render.unmount` static method provides a way to unmount components from the DOM when you don't have direct access to the component instance. 
+This is particularly useful in scenarios where components are rendered inside modals, dialogs, or other temporary containers that need to be cleaned up.
+
+#### Example
+
+```js
+// Close the dialog
+dialog.close();
+
+// Unmount any dropin containers rendered in the modal
+dialog.querySelectorAll('[data-dropin-container]').forEach(Render.unmount);
+```
+
+This approach ensures that all dropin components are properly cleaned up when their container elements are removed from the DOM, preventing memory leaks and maintaining application performance.
 </Unstyled>
 

package/src/lib/render.tsx

@@ -71,17 +71,21 @@ export class Render {
       rootElement.innerHTML = '';
 
       // clone the root element to initialize rendering on the background
-      const tmp = document.createElement('div');
+      const root = document.createElement('div');
 
       // apply base design tokens and global styles to the root element
       rootElement.classList.add('dropin-design');
+      rootElement.setAttribute('data-dropin-container', Component.name);
 
-      render(<Root next={state} />, tmp);
+      // store the virtual root element
+      (rootElement as any).__rootElement = root;
+
+      render(<Root next={state} />, root);
 
       // API object to control the rendered component
       const API: RenderAPI = {
         remove: () => {
-          render(null, tmp);
+          render(null, root);
         },
         setProps: (cb: (prev: T) => T) => {
           const next = cb(state.peek());
@@ -97,7 +101,7 @@ export class Render {
             rootElement.classList.add('dropin-design');
 
             // append the rendered component to the DOM only when all slots are resolved
-            rootElement.appendChild(tmp.firstChild ?? tmp);
+            rootElement.appendChild(root.firstChild ?? root);
 
             return resolve(API);
           }
@@ -106,14 +110,24 @@ export class Render {
     };
   }
 
+  /**
+   * Unmounts a container from a root element.
+   * @param rootElement - The root element to unmount the container from.
+   */
+  static unmount(rootElement: HTMLElement) {
+    const root = (rootElement as any)?.__rootElement;
+    if (!root) throw new Error('Root element is not defined');
+    render(null, root);
+  }
+
   /**
    * UnRenders a component from a root element.
    * @param rootElement - The root element to unmount the component from.
-   * @deprecated Use `remove` method from the returned object of the `mount` method instead.
+   * @deprecated Use `remove` method from the returned object of the `mount` method instead or `unmount` method from the `Render` class.
    */
   unmount(rootElement: HTMLElement) {
     if (!rootElement) throw new Error('Root element is not defined');
-    rootElement.firstChild?.remove();
+    rootElement.firstChild?.remove();  
   }
 
   /**
@@ -135,4 +149,4 @@ export class Render {
       { ...options }
     );
   }
-}
+}