@adobe-commerce/elsie 1.6.0-alpha999 → 1.6.0-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/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

@@ -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/get-price-formatter.ts

@@ -0,0 +1,69 @@
+/********************************************************************
+ *  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 { getGlobalLocale } from '@adobe-commerce/elsie/lib';
+
+export interface PriceFormatterOptions {
+  currency?: string | null;
+  locale?: string;
+  formatOptions?: Intl.NumberFormatOptions;
+}
+
+/**
+ * Determines the effective locale to use for price formatting
+ * Priority: prop locale > global locale > browser locale > default 'en-US'
+ */
+export function getEffectiveLocale(locale?: string): string {
+  if (locale) {
+    return locale;
+  }
+  const globalLocale = getGlobalLocale();
+  if (globalLocale) {
+    return globalLocale;
+  }
+  // Fallback to browser locale or default
+  return process.env.LOCALE && process.env.LOCALE !== 'undefined' ? process.env.LOCALE : 'en-US';
+}
+
+/**
+ * Gets an Intl.NumberFormat instance for price formatting
+ * Uses getEffectiveLocale internally to determine the best locale
+ *
+ * @example
+ * // Single price formatting
+ * const formatter = getPriceFormatter({ currency: 'USD', locale: 'en-US' });
+ * const price = formatter.format(10.99); // "$10.99"
+ *
+ * @example
+ * // Bulk price formatting (more efficient)
+ * const formatter = getPriceFormatter({ currency: 'EUR', locale: 'fr-FR' });
+ * const prices = [10.99, 25.50, 99.99].map(amount => formatter.format(amount));
+ */
+export function getPriceFormatter(
+  options: PriceFormatterOptions = {}
+): Intl.NumberFormat {
+  const { currency, locale, formatOptions = {} } = options;
+  const effectiveLocale = getEffectiveLocale(locale);
+
+  const params: Intl.NumberFormatOptions = {
+    style: 'currency',
+    currency: currency || 'USD',
+    // These options are needed to round to whole numbers if that's what you want.
+    minimumFractionDigits: 2, // (this suffices for whole numbers, but will print 2500.10 as $2,500.1)
+    maximumFractionDigits: 2, // (causes 2500.99 to be printed as $2,501)
+    ...formatOptions,
+  };
+
+  try {
+    return new Intl.NumberFormat(effectiveLocale, params);
+  } catch (error) {
+    console.error(`Error creating Intl.NumberFormat instance for locale ${effectiveLocale}. Falling back to en-US.`, error);
+    return new Intl.NumberFormat('en-US', params);
+  }
+}

package/src/lib/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/lib/form-values';
@@ -25,3 +25,4 @@ export * from '@adobe-commerce/elsie/lib/is-number';
 export * from '@adobe-commerce/elsie/lib/deviceUtils';
 export * from '@adobe-commerce/elsie/lib/get-path-value';
 export * from '@adobe-commerce/elsie/lib/get-cookie';
+export * from '@adobe-commerce/elsie/lib/get-price-formatter';