@adobe-commerce/elsie 1.5.0-beta3 → 1.5.0-beta5

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/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/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

@@ -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

@@ -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')
   );
 }