@adobe-commerce/elsie 1.5.1-alpha003 → 1.5.1-beta1

package/src/components/Table/Table.tsx

@@ -0,0 +1,249 @@
+/********************************************************************
+ *  Copyright 2025 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 { FunctionComponent, VNode, Fragment } from 'preact';
+import { HTMLAttributes } from 'preact/compat';
+import { classes, VComponent } from '@adobe-commerce/elsie/lib';
+import {
+  Icon,
+  Button,
+  Skeleton,
+  SkeletonRow,
+} from '@adobe-commerce/elsie/components';
+import { useText } from '@adobe-commerce/elsie/i18n';
+
+import '@adobe-commerce/elsie/components/Table/Table.css';
+
+type Sortable = 'asc' | 'desc' | true;
+
+type Column =
+  | { label: string; key: string; ariaLabel?: string; sortBy?: Sortable }
+  | {
+      label: VNode<HTMLAttributes<HTMLElement>>;
+      key: string;
+      ariaLabel: string;
+      sortBy?: Sortable;
+    };
+
+type RowData = {
+  [key: string]: VNode | string | number | undefined;
+  _rowDetails?: VNode | string; // Special property for expandable row content
+};
+
+export interface TableProps
+  extends Omit<HTMLAttributes<HTMLTableElement>, 'loading'> {
+  columns: Column[];
+  rowData: RowData[];
+  mobileLayout?: 'stacked' | 'none';
+  caption?: string;
+  expandedRows?: Set<number>;
+  loading?: boolean;
+  skeletonRowCount?: number;
+  onSortChange?: (columnKey: string, direction: Sortable) => void;
+}
+
+export const Table: FunctionComponent<TableProps> = ({
+  className,
+  children,
+  columns = [],
+  rowData = [],
+  mobileLayout = 'none',
+  caption,
+  expandedRows = new Set(),
+  loading = false,
+  skeletonRowCount = 10,
+  onSortChange,
+  ...props
+}) => {
+  const translations = useText({
+    sortedAscending: 'Dropin.Table.sortedAscending',
+    sortedDescending: 'Dropin.Table.sortedDescending',
+    sortBy: 'Dropin.Table.sortBy',
+  });
+
+  const handleSort = (column: Column) => {
+    if (!onSortChange) return;
+
+    // Determine next sort direction
+    let nextDirection: Sortable;
+    if (column.sortBy === true) {
+      nextDirection = 'asc';
+    } else if (column.sortBy === 'asc') {
+      nextDirection = 'desc';
+    } else {
+      nextDirection = true;
+    }
+
+    onSortChange(column.key, nextDirection);
+  };
+
+  const renderSortButton = (column: Column) => {
+    if (column.sortBy === undefined) return null;
+    const label = column.ariaLabel ?? (column.label as string);
+
+    let iconSource: string;
+    let ariaLabel: string;
+
+    if (column.sortBy === 'asc') {
+      iconSource = 'ChevronUp';
+      ariaLabel = translations.sortedAscending.replace('{label}', label);
+    } else if (column.sortBy === 'desc') {
+      iconSource = 'ChevronDown';
+      ariaLabel = translations.sortedDescending.replace('{label}', label);
+    } else {
+      iconSource = 'Sort';
+      ariaLabel = translations.sortBy.replace('{label}', label);
+    }
+
+    return (
+      <Button
+        variant="tertiary"
+        size="medium"
+        className="dropin-table__header__sort-button"
+        icon={<Icon source={iconSource} />}
+        aria-label={ariaLabel}
+        onClick={() => handleSort(column)}
+      />
+    );
+  };
+
+  const renderSkeletonRows = () => {
+    return Array.from({ length: skeletonRowCount }, (_, rowIndex) => (
+      <tr key={`skeleton-${rowIndex}`} className="dropin-table__body__row">
+        {columns.map((column) => (
+          <td
+            key={column.key}
+            className="dropin-table__body__cell"
+            data-label={column.ariaLabel ?? column.label}
+          >
+            <Skeleton>
+              <SkeletonRow variant="row" size="small" fullWidth />
+            </Skeleton>
+          </td>
+        ))}
+      </tr>
+    ));
+  };
+
+  const renderDataRows = () => {
+    return rowData.map((row, rowIndex) => {
+      const hasDetails = row._rowDetails !== undefined;
+      const isExpanded = expandedRows.has(rowIndex);
+
+      return (
+        <Fragment key={rowIndex}>
+          <tr className="dropin-table__body__row">
+            {columns.map((column) => {
+              const cell = row[column.key];
+              const label = column.ariaLabel ?? column.label;
+
+              if (typeof cell === 'string' || typeof cell === 'number') {
+                return (
+                  <td
+                    key={column.key}
+                    className="dropin-table__body__cell"
+                    data-label={label}
+                  >
+                    {cell}
+                  </td>
+                );
+              }
+
+              return (
+                <td
+                  key={column.key}
+                  className="dropin-table__body__cell"
+                  data-label={label}
+                >
+                  <VComponent node={cell!} />
+                </td>
+              );
+            })}
+          </tr>
+          {hasDetails && isExpanded && (
+            <tr
+              key={`${rowIndex}-details`}
+              className="dropin-table__row-details dropin-table__row-details--expanded"
+              id={`row-${rowIndex}-details`}
+            >
+              <td
+                className="dropin-table__row-details__cell"
+                colSpan={columns.length}
+                role="region"
+                aria-labelledby={`row-${rowIndex}-details`}
+              >
+                {typeof row._rowDetails === 'string' ? (
+                  row._rowDetails
+                ) : (
+                  <VComponent node={row._rowDetails!} />
+                )}
+              </td>
+            </tr>
+          )}
+        </Fragment>
+      );
+    });
+  };
+
+  const getAriaSort = (
+    column: Column
+  ): 'none' | 'ascending' | 'descending' | 'other' | undefined => {
+    if (column.sortBy === true) return 'none';
+    if (column.sortBy === 'asc') return 'ascending';
+    if (column.sortBy === 'desc') return 'descending';
+    return undefined;
+  };
+
+  return (
+    <div
+      className={classes([
+        'dropin-table',
+        `dropin-table--mobile-layout-${mobileLayout}`,
+        className,
+      ])}
+    >
+      <table {...props} className="dropin-table__table">
+        {caption && (
+          <caption className="dropin-table__caption">{caption}</caption>
+        )}
+        <thead className="dropin-table__header">
+          <tr className="dropin-table__header__row">
+            {columns.map((column) => (
+              <th
+                key={column.key}
+                className={classes([
+                  'dropin-table__header__cell',
+                  [
+                    'dropin-table__header__cell--sorted',
+                    column.sortBy === 'asc' || column.sortBy === 'desc',
+                  ],
+                  [
+                    'dropin-table__header__cell--sortable',
+                    column.sortBy !== undefined,
+                  ],
+                ])}
+                aria-sort={getAriaSort(column)}
+              >
+                {column.label}
+                {renderSortButton(column)}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody className="dropin-table__body">
+          {loading
+            ? // Render skeleton rows when loading
+              renderSkeletonRows()
+            : // Render actual data when not loading
+              renderDataRows()}
+        </tbody>
+      </table>
+    </div>
+  );
+};

package/src/components/Table/index.ts

@@ -0,0 +1,11 @@
+/********************************************************************
+ *  Copyright 2025 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. 
+ *******************************************************************/
+  
+export * from '@adobe-commerce/elsie/components/Table/Table';
+export { Table as default } from '@adobe-commerce/elsie/components/Table/Table';

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/components/ToggleButton/ToggleButton.css

@@ -34,7 +34,19 @@
   border: var(--shape-border-width-1) solid var(--color-neutral-800);
 }
 
-.dropin-toggle-button:has(input:focus-visible) {
+/* Disabled */
+.dropin-toggle-button__disabled .dropin-toggle-button__actionButton {
+  cursor: default;
+  background-color: var(--color-neutral-300);
+  border: var(--shape-border-width-1) solid var(--color-neutral-500);
+}
+
+.dropin-toggle-button__disabled .dropin-toggle-button__content {
+  color: var(--color-neutral-500);
+  cursor: default;
+}
+
+.dropin-toggle-button:not(.dropin-toggle-button__disabled):has(input:focus-visible) {
   outline: 0 none;
   box-shadow: 0 0 0 var(--shape-icon-stroke-4) var(--color-neutral-400);
   -webkit-box-shadow: 0 0 0 var(--shape-icon-stroke-4) var(--color-neutral-400);

package/src/components/ToggleButton/ToggleButton.stories.tsx

@@ -79,6 +79,15 @@ const meta: Meta<ToggleButtonProps> = {
         type: 'boolean',
       },
     },
+    disabled: {
+      description: 'Whether or not the Toggle button is disabled',
+      type: {
+        name: 'boolean',
+      },
+      control: {
+        type: 'boolean',
+      },
+    },
     onChange: {
       description: 'Function to be called when the Toggle button is clicked',
       type: {
@@ -103,11 +112,9 @@ export const ToggleButtonStory: Story = {
   },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    const toggleButton = document.querySelector('.dropin-toggle-button');
     const toggleButtonInput = await canvas.findByRole('radio');
-    const toggleButtonText = document.querySelector(
-      '.dropin-toggle-button__content'
-    );
+    const toggleButton = toggleButtonInput.closest('.dropin-toggle-button');
+    const toggleButtonText = toggleButton?.querySelector('.dropin-toggle-button__content');
     await expect(toggleButton).toHaveClass('dropin-toggle-button__selected');
     await expect(toggleButtonText).toHaveTextContent('Toggle Button label');
     await expect(toggleButtonInput).toBeChecked();
@@ -124,9 +131,9 @@ export const ToggleButtonNotSelected: Story = {
   },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    const toggleButton = document.querySelector('.dropin-toggle-button');
     const toggleButtonInput = await canvas.findByRole('radio');
-    const toggleButtonText = await canvas.findByText('Toggle Button label');
+    const toggleButton = toggleButtonInput.closest('.dropin-toggle-button');
+    const toggleButtonText = toggleButton?.querySelector('.dropin-toggle-button__content');
     await expect(toggleButton).not.toHaveClass(
       'dropin-toggle-button__selected'
     );

package/src/components/ToggleButton/ToggleButton.tsx

@@ -19,6 +19,7 @@ export interface ToggleButtonProps
   name: string;
   value: string;
   busy?: boolean;
+  disabled?: boolean;
   icon?:
     | VNode<HTMLAttributes<SVGSVGElement>>
     | VNode<HTMLAttributes<HTMLImageElement>>;
@@ -31,6 +32,7 @@ export const ToggleButton: FunctionComponent<ToggleButtonProps> = ({
   name,
   value,
   busy = false,
+  disabled = false,
   children,
   className,
   icon,
@@ -45,6 +47,7 @@ export const ToggleButton: FunctionComponent<ToggleButtonProps> = ({
         'dropin-toggle-button',
         className,
         ['dropin-toggle-button__selected', selected],
+        ['dropin-toggle-button__disabled', disabled],
       ])}
     >
       <label className="dropin-toggle-button__actionButton">
@@ -53,6 +56,7 @@ export const ToggleButton: FunctionComponent<ToggleButtonProps> = ({
           name={name}
           value={value}
           checked={selected}
+          disabled={disabled}
           onChange={() => onChange && onChange(value)}
           aria-label={name}
           busy={busy}

package/src/components/index.ts

@@ -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.
  *******************************************************************/
 
 export * from '@adobe-commerce/elsie/components/Skeleton';
@@ -49,3 +49,5 @@ export * from '@adobe-commerce/elsie/components/ContentGrid';
 export * from '@adobe-commerce/elsie/components/Pagination';
 export * from '@adobe-commerce/elsie/components/ProductItemCard';
 export * from '@adobe-commerce/elsie/components/InputFile';
+export * from '@adobe-commerce/elsie/components/Table';
+export * from '@adobe-commerce/elsie/components/MultiSelect';

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

@@ -19,6 +19,7 @@ The context is defined during implementation of a drop-in and can be used to pas
 - **prependChild**: A function to prepend a new HTML element to the slot's content.
 - **appendSibling**: A function to append a new HTML element after the slot's content.
 - **prependSibling**: A function to prepend a new HTML element **before** the slot's content.
+- **remove**: A function to remove the slot element from the DOM.
 - **getSlotElement**: A function to get a slot element.
 - **onChange**: A function to listen to changes in the slot's context.
 
@@ -32,6 +33,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 +78,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
@@ -144,6 +151,7 @@ provider.render(MyContainer, {
       // ctx.prependChild(element);
       // ctx.appendSibling(element);
       // ctx.prependSibling(element);
+      // ctx.remove();
 
       // to listen and react to changes in the slot's context (lifecycle)
       ctx.onChange((next) => {

package/src/i18n/en_US.json

@@ -141,6 +141,44 @@
     },
     "InputDate": {
       "picker": "Select a date"
+    },
+    "Table": {
+      "sortedAscending": "Sort {label} ascending",
+      "sortedDescending": "Sort {label} descending",
+      "sortBy": "Sort by {label}"
+    },
+    "MultiSelect": {
+      "selectAll": "Select All",
+      "deselectAll": "Deselect All",
+      "placeholder": "Select options",
+      "noResultsText": "No options available",
+      "ariaLabel":{
+        "removed": "removed",
+        "added": "added",
+        "itemsSelected": "items selected",
+        "itemsAdded": "items added",
+        "itemsRemoved": "items removed",
+        "selectedTotal": "selected total",
+        "noResultsFor": "No results found for",
+        "optionsAvailable": "options available",
+        "dropdownExpanded": "Dropdown expanded",
+        "useArrowKeys": "Use arrow keys to navigate",
+        "removeFromSelection": "Remove",
+        "fromSelection": "from selection",
+        "selectedItem": "Selected item:",
+        "inField": " in {floatingLabel}",
+        "selectedItems": "Selected items",
+        "scrollableOptionsList": "Scrollable options list",
+        "selectOptions": "Select options",
+        "itemAction": "{label} {action}. {count} items selected.",
+        "bulkAdded": "{count} items added. {total} items selected total.",
+        "bulkRemoved": "{count} items removed. {total} items selected total.",
+        "dropdownExpandedWithOptions": "Dropdown expanded. {count} option{s} available. Use arrow keys to navigate.",
+        "selectedItemInField": "Selected item: {label} in {field}",
+        "removeFromSelectionWithText": "Remove {label} from selection. {text}",
+        "itemsSelectedDescription": "{count} item{s} selected: {labels}",
+        "noItemsSelected": "No items selected"
+      }
     }
   }
 }

package/src/lib/aem/configs.ts

@@ -23,6 +23,7 @@ interface Config {
 
 // Private state
 let config: Config | null = null;
+let options: { match?: (key: string) => boolean } | null = null;
 let rootPath: string | null = null;
 let rootConfig: ConfigRoot | null = null;
 
@@ -31,6 +32,7 @@ let rootConfig: ConfigRoot | null = null;
  */
 function resetConfig() {
   config = null;
+  options = null;
   rootPath = null;
   rootConfig = null;
 }
@@ -40,7 +42,7 @@ function resetConfig() {
  * @param {Object} [configObj=config] - The config object.
  * @returns {string} - The root path.
  */
-function getRootPath(configObj: Config | null = config): string {
+function getRootPath(configObj: Config | null = config, optionsObj: { match?: (key: string) => boolean } | null = options): string {
   if (!configObj) {
     console.warn('No config found. Please call initializeConfig() first.');
     return '/';
@@ -56,7 +58,7 @@ function getRootPath(configObj: Config | null = config): string {
     .find(
       (key) =>
         window.location.pathname === key ||
-        window.location.pathname.startsWith(key)
+        (optionsObj?.match?.(key) ?? window.location.pathname.startsWith(key))
     );
 
   return value ?? '/';
@@ -126,11 +128,15 @@ function applyConfigOverrides(
 
 /**
  * Initializes the configuration system.
+ * @param {Object} configObj - The config object.
+ * @param {Object} [options] - The options object.
+ * @param {Function} [options.match] - The function to match the path to the config.
  * @returns {Object} The initialized root configuration
  */
-function initializeConfig(configObj: Config): ConfigRoot {
+function initializeConfig(configObj: Config, optionsObj?: { match?: (key: string) => boolean }): ConfigRoot {
   config = configObj;
-  rootPath = getRootPath(config);
+  options = optionsObj ?? null;
+  rootPath = getRootPath(config, { match: optionsObj?.match });
   rootConfig = applyConfigOverrides(config, rootPath);
   return rootConfig;
 }

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