@adobe-commerce/elsie 1.5.1-alpha003 → 1.6.0-alpha999

package/bin/builders/serve/index.js

@@ -4,7 +4,9 @@ const path = require('path');
 module.exports = async function generateResourceBuilder({ argv }) {
   const { build, preview } = await import('vite');
 
-  const configFile = argv?.config ?? path.resolve(__dirname, '../../../config/vite.mjs');
+  const configFile =
+    argv?.config ??
+    path.resolve(...[__dirname, '..', '..', '..', 'config', 'vite.mjs']);
 
   let built = false;
 

package/config/vite.mjs

@@ -2,9 +2,9 @@
  *  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. 
+ * NOTICE:  Adobe permits you to use, modify, and distribute this
+ * file in accordance with the terms of the Adobe license agreement
+ * accompanying it.
  *******************************************************************/
 
 import { glob } from 'glob';
@@ -25,7 +25,12 @@ import banner from 'vite-plugin-banner';
 const env = loadEnv('', process.cwd());
 
 // Load Elsie Config
-const elsieConfig = await import(path.resolve(process.cwd(), './.elsie.js')).then((m) => m.default);
+const elsieConfigPath = path.resolve(process.cwd(), './.elsie.js');
+// Convert Windows paths to file:// URLs for ES module imports
+const elsieConfigUrl = elsieConfigPath.startsWith('file://')
+  ? elsieConfigPath
+  : `file://${elsieConfigPath.replace(/\\/g, '/')}`;
+const elsieConfig = await import(elsieConfigUrl).then((m) => m.default);
 
 // Read package.json using createRequire (compatible with Node 20 and 22)
 const require = createRequire(import.meta.url);
@@ -293,19 +298,19 @@ export default {
       generateBundle(options, bundle) {
         for (const fileName in bundle) {
           const chunk = bundle[fileName];
-          
+
           // Process both .map files and JS/TS files with sourcemaps
-          if ((chunk.type === 'asset' && fileName.endsWith('.map')) || 
+          if ((chunk.type === 'asset' && fileName.endsWith('.map')) ||
               (chunk.type === 'chunk' && chunk.map)) {
             try {
               // Get the sourcemap object - either from the asset source or the chunk's map
               const map = chunk.type === 'asset' ? JSON.parse(chunk.source) : chunk.map;
-              
+
               if (map.sources) {
                 map.sources = map.sources.map((input) => {
                   return input.replace(/(?:\.\.?\/)+src\//, `/${packageJSON.name}/src/`);
                 });
-                
+
                 // Update the sourcemap in the appropriate place
                 if (chunk.type === 'asset') {
                   chunk.source = JSON.stringify(map);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adobe-commerce/elsie",
-  "version": "1.5.1-alpha003",
+  "version": "1.6.0-alpha999",
   "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/ProductItemCard/ProductItemCard.css

@@ -23,16 +23,14 @@
 }
 
 .dropin-product-item-card__image-container {
-  overflow: visible;
+  overflow: hidden;
   width: 100%;
   height: auto;
 }
 
 .dropin-product-item-card__image img {
-  display: block;
   width: 100%;
   max-height: 375px;
-  border-radius: var(--border-radius-xsmall, 4px);
 }
 
 .dropin-product-item-card__content {
@@ -76,42 +74,6 @@
   width: 100%;
 }
 
-.dropin-product-item-card__image a:focus {
-  outline: 1px solid var(--color-neutral-400);
-  outline-offset: 1px;
-}
-
-.dropin-product-item-card__image {
-  display: inline-block;
-  border-radius: var(--border-radius-xsmall, 4px);
-  outline: none;
-}
-
-.dropin-product-item-card__image:focus-visible {
-  outline: 2px solid var(--color-interactive-focus, #005fcc);
-  outline-offset: 2px;
-  z-index: 2;
-}
-
-.dropin-product-item-card__image-container {
-  overflow: visible;
-  width: 100%;
-  height: auto;
-}
-
-.dropin-product-item-card__image-link {
-  display: block;
-  border-radius: var(--border-radius-xsmall, 4px);
-  outline: none;
-}
-
-.dropin-product-item-card__image-link:focus-visible {
-  outline: 3px solid var(--color-interactive-focus, #333333);
-  outline-offset: 3px;
-  position: relative;
-  z-index: 1;
-}
-
 /* Medium (portrait tablets and large phones, 768px and up) */
 /* @media only screen and (min-width: 768px) { } */
 

package/src/components/ProductItemCard/ProductItemCard.stories.tsx

@@ -47,15 +47,13 @@ const meta: Meta<ProductItemCardProps> = {
       options: ['DefaultImage', 'Empty'],
       mapping: {
         DefaultImage: (
-          <a href="#" className="dropin-product-item-card__image-link">
-            <Image
-              src="https://picsum.photos/300/375"
-              width="300"
-              height="375"
-              alt="Product Image"
-              loading="lazy"
-            />
-          </a>
+          <Image
+            src="https://picsum.photos/300/375"
+            width="300"
+            height="375"
+            alt="Product Image"
+            loading="lazy"
+          />
         ),
         Empty: null,
       },
@@ -255,7 +253,6 @@ export const Default: Story = {
     sku: 'DefaultSku' as any,
     swatches: 'DefaultSwatches' as any,
     actionButton: 'DefaultButton' as any,
-    imageHref: '#',
   },
 };
 

package/src/components/ProductItemCard/ProductItemCard.tsx

@@ -22,8 +22,6 @@ export interface ProductItemCardProps
   actionButton?: VNode;
   swatches?: VNode;
   initialized?: boolean;
-  imageHref?: string;
-  imageLinkLabel?: string;
 }
 
 export const ProductItemCard: FunctionComponent<ProductItemCardProps> = ({
@@ -35,8 +33,6 @@ export const ProductItemCard: FunctionComponent<ProductItemCardProps> = ({
   actionButton,
   swatches,
   initialized = false,
-  imageHref,
-  imageLinkLabel,
   ...props
 }) => {
   if (!initialized) {
@@ -49,23 +45,10 @@ export const ProductItemCard: FunctionComponent<ProductItemCardProps> = ({
     >
       <div className="dropin-product-item-card__image-container">
         {image && (
-          imageHref ? (
-            <a
-              href={imageHref}
-              className="dropin-product-item-card__image-link"
-              aria-label={imageLinkLabel}
-            >
-              <VComponent
-                node={image}
-                className={classes(['dropin-product-item-card__image'])}
-              />
-            </a>
-          ) : (
-            <VComponent
-              node={image}
-              className={classes(['dropin-product-item-card__image'])}
-            />
-          )
+          <VComponent
+            node={image}
+            className={classes(['dropin-product-item-card__image'])}
+          />
         )}
       </div>
       <div className="dropin-product-item-card__content">

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/docs/slots.mdx

@@ -32,6 +32,12 @@ The `<Slot />` component is used to define a slot in a container. It receives a
 
 The name of the slot in _PascalCase_. `string` (required).
 
+### lazy
+
+Controls whether the slot should be loaded immediately or deferred for later initialization. `boolean` (optional).
+
+When `lazy={false}`, the slot is initialized as soon as the container mounts. When `lazy={true}`, the slot can be initialized later on when it is needed. This is useful for performance optimization, especially when the slot's content is not immediately required.
+
 ### slotTag
 
 The HTML tag to use for the slot's wrapper element. This allows you to change the wrapper element from the default `div` to any valid HTML tag (e.g., 'span', 'p', 'a', etc.). When using specific tags like 'a', you can also provide their respective HTML attributes (e.g., 'href', 'target', etc.).
@@ -71,7 +77,7 @@ Example:
 
 - `ctx`: An object representing the context of the slot, including methods for manipulating the slot's content.
 
-The slot property, which is implemented as a promise function, provides developers with the flexibility to dynamically generate and manipulate content within slots. 
+The slot property, which is implemented as a promise function, provides developers with the flexibility to dynamically generate and manipulate content within slots.
 However, it's important to note that this promise is render-blocking, meaning that the component will not render until the promise is resolved.
 
 ### context

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

package/src/lib/slot.tsx

@@ -2,30 +2,35 @@
  *  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. 
+ * NOTICE:  Adobe permits you to use, modify, and distribute this
+ * file in accordance with the terms of the Adobe license agreement
+ * accompanying it.
  *******************************************************************/
 
-import { cloneElement, ComponentChildren, RefObject, VNode, createElement } from 'preact';
+import { IntlContext, Lang } from '@adobe-commerce/elsie/i18n';
+import {
+  cloneElement,
+  ComponentChildren,
+  createElement,
+  RefObject,
+  VNode,
+} from 'preact';
+import { HTMLAttributes } from 'preact/compat';
 import {
   StateUpdater,
+  useCallback,
   useContext,
-  useState,
-  useRef,
   useEffect,
   useMemo,
-  useCallback,
+  useRef,
+  useState,
 } from 'preact/hooks';
-import { IntlContext, Lang } from '@adobe-commerce/elsie/i18n';
-import { HTMLAttributes } from 'preact/compat';
 import { SlotQueueContext } from './render';
 
 import '@adobe-commerce/elsie/components/UIProvider/debugger.css';
 
 type MutateElement = (elem: HTMLElement) => void;
 
-
 interface State {
   get: (key: string) => void;
   set: (key: string, value: any) => void;
@@ -149,18 +154,21 @@ export function useSlot<K, V extends HTMLElement>(
   // @ts-ignore
   context._registerMethod = _registerMethod;
 
-  const _htmlElementToVNode = useCallback((elem: HTMLElement) => {
-    return createElement(
-      contentTag,
-      {
-        'data-slot-html-element': elem.tagName.toLowerCase(),
-        ref: (refElem: HTMLElement | null): void => {
-          refElem?.appendChild(elem);
-        }
-      },
-      null
-    );
-  }, [contentTag]);
+  const _htmlElementToVNode = useCallback(
+    (elem: HTMLElement) => {
+      return createElement(
+        contentTag,
+        {
+          'data-slot-html-element': elem.tagName.toLowerCase(),
+          ref: (refElem: HTMLElement | null): void => {
+            refElem?.appendChild(elem);
+          },
+        },
+        null
+      );
+    },
+    [contentTag]
+  );
 
   // @ts-ignore
   context._htmlElementToVNode = _htmlElementToVNode;
@@ -322,7 +330,10 @@ export function useSlot<K, V extends HTMLElement>(
       status.current = 'loading';
 
       log(`🟩 "${name}" Slot Initialized`);
-      await callback(context as K & DefaultSlotContext<K>, elementRef.current as HTMLDivElement | null);
+      await callback(
+        context as K & DefaultSlotContext<K>,
+        elementRef.current as HTMLDivElement | null
+      );
     } catch (error) {
       console.error(`Error in "${callback.name}" Slot callback`, error);
     } finally {
@@ -336,7 +347,7 @@ export function useSlot<K, V extends HTMLElement>(
   // Initialization
   useEffect(() => {
     handleLifeCycleInit().finally(() => {
-      if (slotsQueue) {
+      if (slotsQueue && slotsQueue.value.has(name)) {
         slotsQueue.value.delete(name);
         slotsQueue.value = new Set(slotsQueue.value);
       }
@@ -359,6 +370,7 @@ export function useSlot<K, V extends HTMLElement>(
 interface SlotPropsComponent<T>
   extends Omit<HTMLAttributes<HTMLElement>, 'slot'> {
   name: string;
+  lazy?: boolean;
   slot?: SlotProps<T>;
   context?: Context<T>;
   render?: (props: Record<string, any>) => VNode | VNode[];
@@ -371,6 +383,7 @@ interface SlotPropsComponent<T>
 
 export function Slot<T>({
   name,
+  lazy = false,
   context,
   slot,
   children,
@@ -400,11 +413,11 @@ export function Slot<T>({
     }
 
     // add slot to queue
-    if (slotsQueue) {
+    if (slotsQueue && lazy === false) {
       slotsQueue.value.add(name);
       slotsQueue.value = new Set(slotsQueue.value);
     }
-  }, [name, slotsQueue]);
+  }, [name, lazy, slotsQueue]);
 
   return createElement(
     slotTag,