@adobe-commerce/elsie 1.5.0-beta1 → 1.5.0-beta2

package/package.json

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

package/src/components/Picker/Picker.tsx

@@ -8,12 +8,13 @@
  *******************************************************************/
 
 import { Icon } from '@adobe-commerce/elsie/components';
-import '@adobe-commerce/elsie/components/Picker/Picker.css';
 import { ChevronDown } from '@adobe-commerce/elsie/icons';
 import { classes } from '@adobe-commerce/elsie/lib';
 import { FunctionComponent, VNode } from 'preact';
 import { HTMLAttributes, useEffect, useState } from 'preact/compat';
 
+import '@adobe-commerce/elsie/components/Picker/Picker.css';
+
 type PickerValue = string | null;
 
 export interface PickerOption {
@@ -68,9 +69,10 @@ export const Picker: FunctionComponent<PickerProps> = ({
   defaultOption,
   icon,
   className,
+  id,
   ...props
 }) => {
-  const id = props?.id || name || `dropin-picker-${Math.random().toString(36)}`;
+  const uniqueId = id ?? name ?? `dropin-picker-${Math.random().toString(36)}`;
   const isRequired = !!props?.required;
 
   // find the first option that is not disabled
@@ -154,7 +156,7 @@ export const Picker: FunctionComponent<PickerProps> = ({
       )}
 
       <select
-        id={id}
+        id={uniqueId}
         className={classes([
           'dropin-picker__select',
           `dropin-picker__select--${variant}`,

package/src/components/TextSwatch/TextSwatch.tsx

@@ -14,6 +14,7 @@ import {
   useEffect,
   useRef,
   useCallback,
+  useMemo,
 } from 'preact/compat';
 import { classes } from '@adobe-commerce/elsie/lib';
 import '@adobe-commerce/elsie/components/TextSwatch/TextSwatch.css';
@@ -93,6 +94,8 @@ export const TextSwatch: FunctionComponent<TextSwatchProps> = ({
     }
   }, [label]);
 
+  const uniqueId = useMemo(() => id ?? `${name}_${id}_${Math.random().toString(36)}`, [name, id]);
+
   return (
     <div
       className="dropin-text-swatch__container"
@@ -101,7 +104,7 @@ export const TextSwatch: FunctionComponent<TextSwatchProps> = ({
       <input
         type={multi ? 'checkbox' : 'radio'}
         name={name}
-        id={id}
+        id={uniqueId}
         value={value}
         aria-label={handleAriaLabel()}
         checked={selected}
@@ -116,7 +119,7 @@ export const TextSwatch: FunctionComponent<TextSwatchProps> = ({
         ])}
       />
       <label
-        htmlFor={id}
+        htmlFor={uniqueId}
         ref={spanRef}
         className={classes([
           'dropin-text-swatch__label',

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 }
     );
   }
-}
+}