@adobe-commerce/elsie 1.5.0-beta4 → 1.5.0

package/src/components/MultiSelect/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/MultiSelect/MultiSelect';
+export { MultiSelect as default } from '@adobe-commerce/elsie/components/MultiSelect/MultiSelect';

package/src/components/Table/Table.stories.tsx

@@ -670,4 +670,92 @@ export const LoadingState: Story = {
   },
 };
 
+/**
+ * Table with VNode labels in column headers.
+ * Demonstrates how column labels can be VNode elements instead of simple strings.
+ * This allows for rich header content like icons, formatted text, or custom components.
+ *
+ * **Features**:
+ * - Column labels can be VNode elements (JSX components)
+ * - Supports any valid Preact VNode content in headers
+ * - Maintains all table functionality with custom header content
+ * - Useful for adding icons, tooltips, or formatted text to headers
+ *
+ * ```tsx
+ * <Table
+ *   columns={[
+ *     { key: 'name', label: <span><strong>👤 User Name</strong></span> },
+ *     { key: 'email', label: <span style={{ color: '#0066cc' }}>📧 Email</span> },
+ *     { key: 'status', label: <em>Status Info</em> }
+ *   ]}
+ *   rowData={[
+ *     { name: 'John', email: 'john@example.com', status: 'Active' }
+ *   ]}
+ * />
+ * ```
+ */
+export const VNodeLabels: Story = {
+  args: {
+    columns: [
+      {
+        key: 'name',
+        label: (
+          <span>
+            <strong>👤 User Name</strong>
+          </span>
+        ),
+      },
+      {
+        key: 'email',
+        label: <span style={{ color: '#0066cc' }}>📧 Email Address</span>,
+      },
+      {
+        key: 'role',
+        label: <em style={{ color: '#666' }}>Role & Department</em>,
+      },
+      {
+        key: 'status',
+        label: (
+          <span
+            style={{
+              padding: '4px 8px',
+              backgroundColor: '#f0f9ff',
+              borderRadius: '4px',
+              fontSize: '12px',
+            }}
+          >
+            📊 Status
+          </span>
+        ),
+      },
+      {
+        key: 'actions',
+        label: <span>⚙️ Actions</span>,
+      },
+    ],
+    rowData: [
+      {
+        name: 'John Doe',
+        email: 'john.doe@company.com',
+        role: 'Senior Developer',
+        status: 'Active',
+        actions: <button>Edit</button>,
+      },
+      {
+        name: 'Jane Smith',
+        email: 'jane.smith@company.com',
+        role: 'Product Manager',
+        status: 'Active',
+        actions: <button>Edit</button>,
+      },
+      {
+        name: 'Bob Johnson',
+        email: 'bob.johnson@company.com',
+        role: 'UX Designer',
+        status: 'Inactive',
+        actions: <button>Edit</button>,
+      },
+    ],
+  },
+};
 

package/src/components/Table/Table.tsx

@@ -2,33 +2,42 @@
  *  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. 
+ * 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 {
+  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 = {
-  key: string;
-  label: string;
-  sortBy?: Sortable;
-};
+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'> {
+export interface TableProps
+  extends Omit<HTMLAttributes<HTMLTableElement>, 'loading'> {
   columns: Column[];
   rowData: RowData[];
   mobileLayout?: 'stacked' | 'none';
@@ -76,19 +85,20 @@ export const Table: FunctionComponent<TableProps> = ({
 
   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}', column.label);
+      ariaLabel = translations.sortedAscending.replace('{label}', label);
     } else if (column.sortBy === 'desc') {
       iconSource = 'ChevronDown';
-      ariaLabel = translations.sortedDescending.replace('{label}', column.label);
+      ariaLabel = translations.sortedDescending.replace('{label}', label);
     } else {
       iconSource = 'Sort';
-      ariaLabel = translations.sortBy.replace('{label}', column.label);
+      ariaLabel = translations.sortBy.replace('{label}', label);
     }
 
     return (
@@ -107,7 +117,11 @@ export const Table: FunctionComponent<TableProps> = ({
     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.label}>
+          <td
+            key={column.key}
+            className="dropin-table__body__cell"
+            data-label={column.ariaLabel ?? column.label}
+          >
             <Skeleton>
               <SkeletonRow variant="row" size="small" fullWidth />
             </Skeleton>
@@ -127,17 +141,26 @@ export const Table: FunctionComponent<TableProps> = ({
           <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={column.label}>
+                  <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={column.label}>
+                <td
+                  key={column.key}
+                  className="dropin-table__body__cell"
+                  data-label={label}
+                >
                   <VComponent node={cell!} />
                 </td>
               );
@@ -155,7 +178,11 @@ export const Table: FunctionComponent<TableProps> = ({
                 role="region"
                 aria-labelledby={`row-${rowIndex}-details`}
               >
-                {typeof row._rowDetails === 'string' ? row._rowDetails : <VComponent node={row._rowDetails!} />}
+                {typeof row._rowDetails === 'string' ? (
+                  row._rowDetails
+                ) : (
+                  <VComponent node={row._rowDetails!} />
+                )}
               </td>
             </tr>
           )}
@@ -164,7 +191,9 @@ export const Table: FunctionComponent<TableProps> = ({
     });
   };
 
-  const getAriaSort = (column: Column): 'none' | 'ascending' | 'descending' | 'other' | undefined => {
+  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';
@@ -172,9 +201,17 @@ export const Table: FunctionComponent<TableProps> = ({
   };
 
   return (
-    <div className={classes(['dropin-table', `dropin-table--mobile-layout-${mobileLayout}`, className])}>
+    <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>}
+        {caption && (
+          <caption className="dropin-table__caption">{caption}</caption>
+        )}
         <thead className="dropin-table__header">
           <tr className="dropin-table__header__row">
             {columns.map((column) => (
@@ -182,8 +219,14 @@ export const Table: FunctionComponent<TableProps> = ({
                 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]
+                  [
+                    'dropin-table__header__cell--sorted',
+                    column.sortBy === 'asc' || column.sortBy === 'desc',
+                  ],
+                  [
+                    'dropin-table__header__cell--sortable',
+                    column.sortBy !== undefined,
+                  ],
                 ])}
                 aria-sort={getAriaSort(column)}
               >
@@ -194,13 +237,11 @@ export const Table: FunctionComponent<TableProps> = ({
           </tr>
         </thead>
         <tbody className="dropin-table__body">
-          {loading ? (
-            // Render skeleton rows when loading
-            renderSkeletonRows()
-          ) : (
-            // Render actual data when not loading
-            renderDataRows()
-          )}
+          {loading
+            ? // Render skeleton rows when loading
+              renderSkeletonRows()
+            : // Render actual data when not loading
+              renderDataRows()}
         </tbody>
       </table>
     </div>

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';
@@ -50,3 +50,4 @@ 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/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.
 
@@ -150,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

@@ -146,6 +146,39 @@
       "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

@@ -40,7 +40,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, options?: { match?: (key: string) => boolean }): string {
   if (!configObj) {
     console.warn('No config found. Please call initializeConfig() first.');
     return '/';
@@ -56,7 +56,7 @@ function getRootPath(configObj: Config | null = config): string {
     .find(
       (key) =>
         window.location.pathname === key ||
-        window.location.pathname.startsWith(key)
+        (options?.match?.(key) ?? window.location.pathname.startsWith(key))
     );
 
   return value ?? '/';
@@ -126,11 +126,14 @@ 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, options?: { match?: (key: string) => boolean }): ConfigRoot {
   config = configObj;
-  rootPath = getRootPath(config);
+  rootPath = getRootPath(config, { match: options?.match });
   rootConfig = applyConfigOverrides(config, rootPath);
   return rootConfig;
 }

package/src/lib/slot.tsx

@@ -15,7 +15,7 @@ import {
   RefObject,
   VNode,
 } from 'preact';
-import { HTMLAttributes } from 'preact/compat';
+import { Children, HTMLAttributes, isValidElement } from 'preact/compat';
 import {
   StateUpdater,
   useCallback,
@@ -41,6 +41,7 @@ interface SlotElement {
   prependChild: MutateElement;
   appendSibling: MutateElement;
   prependSibling: MutateElement;
+  remove: () => void;
 }
 
 interface PrivateContext<T> {
@@ -60,6 +61,7 @@ interface DefaultSlotContext<T> extends PrivateContext<T> {
   prependChild: MutateElement;
   appendSibling: MutateElement;
   prependSibling: MutateElement;
+  remove: () => void;
   onRender: (cb: (next: T & DefaultSlotContext<T>) => void) => void;
   onChange: (cb: (next: T & DefaultSlotContext<T>) => void) => void;
 }
@@ -85,7 +87,7 @@ export function useSlot<K, V extends HTMLElement>(
   render?: Function,
   // eslint-disable-next-line no-undef
   contentTag: keyof HTMLElementTagNameMap = 'div'
-): [RefObject<V>, Record<string, any>] {
+): [RefObject<V>, Record<string, any>, 'loading' | 'pending' | 'ready'] {
   const slotsQueue = useContext(SlotQueueContext);
 
   // HTML Element
@@ -207,6 +209,10 @@ export function useSlot<K, V extends HTMLElement>(
           const parent = element.parentNode;
           parent?.insertBefore(elem, element);
         },
+
+        remove: () => {
+          element.remove();
+        },
       };
     },
     [name]
@@ -301,6 +307,14 @@ export function useSlot<K, V extends HTMLElement>(
     [_registerMethod]
   );
 
+  // @ts-ignore
+  context.remove = useCallback(() => {
+    // @ts-ignore
+    _registerMethod(() => {
+      elementRef.current?.remove();
+    });
+  }, [_registerMethod]);
+
   const handleLifeCycleRender = useCallback(async () => {
     if (status.current === 'loading') return;
 
@@ -363,9 +377,51 @@ export function useSlot<K, V extends HTMLElement>(
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [JSON.stringify(context), JSON.stringify(_state)]);
 
-  return [elementRef, props];
+  return [elementRef, props, status.current];
 }
 
+/**
+ * Recursively processes children elements to conditionally prevent image loading.
+ * 
+ * This function traverses the children tree and modifies img elements to prevent
+ * premature loading during slot initialization. When isReady is false, img src
+ * attributes are set to empty string to prevent network requests, while preserving
+ * the original src in a data attribute for debugging purposes.
+ * 
+ * @param children - The children elements to process (can be any React/Preact children)
+ * @param isReady - Whether the slot is ready to load images (true) or should prevent loading (false)
+ * @returns Processed children with conditional image src attributes
+ */
+const processChildren = (children: any, isReady: boolean): any => {
+  return Children.map(children, child => {
+    // Handle text nodes, numbers, etc.
+    if (!isValidElement(child)) {
+      return child;
+    }
+
+    // Handle img elements - conditionally set src
+    if (child.props.src) {
+      return cloneElement(child, {
+        ...child.props,
+        src: isReady ? child.props.src : "",
+        // Optionally preserve original src in data attribute for debugging
+        'data-original-src': child.props.src,
+      });
+    }
+
+    // Handle elements with children - recursively process them
+    if (child.props && child.props.children) {
+      return cloneElement(child, {
+        ...child.props,
+        children: processChildren(child.props.children, isReady),
+      });
+    }
+
+    // Return other elements as-is
+    return child;
+  });
+};
+
 // Slot Component
 interface SlotPropsComponent<T>
   extends Omit<HTMLAttributes<HTMLElement>, 'slot'> {
@@ -398,7 +454,7 @@ export function Slot<T>({
 }> {
   const slotsQueue = useContext(SlotQueueContext);
 
-  const [elementRef, slotProps] = useSlot<T, HTMLElement>(
+  const [elementRef, slotProps, status] = useSlot<T, HTMLElement>(
     name,
     context,
     slot,
@@ -426,7 +482,7 @@ export function Slot<T>({
       ref: elementRef,
       'data-slot': name,
     },
-    slotProps.children
+    processChildren(slotProps.children, status === 'ready')
   );
 }