carbon-components-svelte 0.98.0 → 0.98.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-components-svelte",
-  "version": "0.98.0",
+  "version": "0.98.2",
   "license": "Apache-2.0",
   "description": "Svelte implementation of the Carbon Design System",
   "type": "module",

package/src/Checkbox/Checkbox.svelte

@@ -53,7 +53,7 @@
   export let title = undefined;
 
   /** Set an id for the input label */
-  export let id = "ccs-" + Math.random().toString(36);
+  export let id = `ccs-${Math.random().toString(36)}`;
 
   /** Obtain a reference to the input HTML element */
   export let ref = null;
@@ -65,7 +65,17 @@
 
   $: useGroup = Array.isArray(group);
   $: if (useGroup) checked = group.includes(value);
-  $: dispatch("check", checked);
+
+  // Track previous checked value to avoid duplicate dispatches in Svelte 5
+  // The reactive statement will only dispatch when checked changes externally (e.g., via bind:checked)
+  let previousChecked = checked;
+  $: {
+    const hasChanged = previousChecked !== checked;
+    if (hasChanged) {
+      previousChecked = checked;
+      dispatch("check", checked);
+    }
+  }
 
   let refLabel = null;
 
@@ -121,7 +131,11 @@
             ? group.filter((_value) => _value !== value)
             : [...group, value];
         } else {
-          checked = !checked;
+          const newChecked = !checked;
+          previousChecked = newChecked;
+          checked = newChecked;
+          // Dispatch directly for user-initiated changes to avoid duplicate events in Svelte 5
+          dispatch("check", newChecked);
         }
       }}
       on:change

package/src/Checkbox/InlineCheckbox.svelte

@@ -12,7 +12,7 @@
   export let title = undefined;
 
   /** Set an id for the input label */
-  export let id = "ccs-" + Math.random().toString(36);
+  export let id = `ccs-${Math.random().toString(36)}`;
 
   /** Obtain a reference to the input HTML element */
   export let ref = null;

package/src/CodeSnippet/CodeSnippet.svelte

@@ -103,7 +103,7 @@
   export let showMoreLess = true;
 
   /** Set an id for the code element */
-  export let id = "ccs-" + Math.random().toString(36);
+  export let id = `ccs-${Math.random().toString(36)}`;
 
   /** Obtain a reference to the pre HTML element */
   export let ref = null;
@@ -127,7 +127,7 @@
 
   $: expandText = expanded ? showLessText : showMoreText;
   $: minHeight = expanded ? 16 * 15 : 48;
-  $: maxHeight = expanded ? "none" : 16 * 15 + "px";
+  $: maxHeight = expanded ? "none" : `${16 * 15}px`;
 
   // Show more/less only applies to multi-line code snippets
   $: if (type !== "multi") showMoreLess = false;

package/src/ComboBox/ComboBox.svelte

@@ -120,7 +120,7 @@
   export let translateWithIdSelection = undefined;
 
   /** Set an id for the list box component */
-  export let id = "ccs-" + Math.random().toString(36);
+  export let id = `ccs-${Math.random().toString(36)}`;
 
   /**
    * Specify a name attribute for the input.
@@ -200,10 +200,9 @@
   }
 
   /**
-   * Clear the combo box programmatically
-   * @type {(options?: { focus?: boolean; }) => void}
-   * @param {object} [options] - Configuration options for clearing
-   * @param {boolean} [options.focus=true] - Whether to focus the combo box after clearing
+   * Clear the combo box programmatically.
+   * By default, focuses the combo box after clearing. Set `options.focus` to `false` to prevent focusing.
+   * @type {(options?: { focus?: boolean; }) => Promise<void>}
    * @example
    * ```svelte
    * <ComboBox bind:this={comboBox} items={items} />
@@ -211,7 +210,7 @@
    * <button on:click={() => comboBox.clear({ focus: false })}>Clear (No Focus)</button>
    * ```
    */
-  export function clear(options = {}) {
+  export async function clear(options = {}) {
     prevSelectedId = null;
     highlightedIndex = -1;
     highlightedId = undefined;
@@ -219,6 +218,8 @@
     selectedItem = undefined;
     open = false;
     value = "";
+    // Ensure binding updates are complete before focusing.
+    await tick();
     if (options?.focus !== false) ref?.focus();
   }
 
@@ -262,6 +263,8 @@
 
   $: if (selectedId !== undefined) {
     if (prevSelectedId !== selectedId) {
+      // Only dispatch select event if not initial render (prevSelectedId was not null)
+      const isInitialRender = prevSelectedId === null;
       prevSelectedId = selectedId;
       if (filteredItems?.length === 1 && open) {
         selectedId = filteredItems[0].id;
@@ -271,7 +274,9 @@
       } else {
         selectedItem = items.find((item) => item.id === selectedId);
       }
-      dispatch("select", { selectedId, selectedItem });
+      if (!isInitialRender) {
+        dispatch("select", { selectedId, selectedItem });
+      }
     }
   } else {
     prevSelectedId = selectedId;

package/src/ContainedList/ContainedList.svelte

@@ -21,7 +21,7 @@
   export let inset = false;
 
   /** Set an id for the list element */
-  export let id = "ccs-" + Math.random().toString(36);
+  export let id = `ccs-${Math.random().toString(36)}`;
 
   $: labelId = `label-${id}`;
 </script>

package/src/ContentSwitcher/ContentSwitcher.svelte

@@ -12,7 +12,7 @@
    */
   export let size = undefined;
 
-  import { afterUpdate, createEventDispatcher, setContext } from "svelte";
+  import { afterUpdate, createEventDispatcher, setContext, tick } from "svelte";
   import { writable } from "svelte/store";
 
   const dispatch = createEventDispatcher();
@@ -21,6 +21,9 @@
    */
   const currentId = writable(null);
 
+  /** @type {HTMLDivElement | null} */
+  let refContainer = null;
+
   $: currentIndex = -1;
   $: switches = [];
   $: if (switches[currentIndex]) {
@@ -47,9 +50,9 @@
   };
 
   /**
-   * @type {(direction: number) => void}
+   * @type {(direction: number) => Promise<void>}
    */
-  const change = (direction) => {
+  const change = async (direction) => {
     let index = currentIndex + direction;
 
     if (index < 0) {
@@ -59,6 +62,14 @@
     }
 
     selectedIndex = index;
+
+    await tick();
+    const tabs = refContainer?.querySelectorAll("[role='tab']");
+    const tab = tabs?.[index];
+
+    if (tab instanceof HTMLElement) {
+      tab.focus();
+    }
   };
 
   setContext("ContentSwitcher", {
@@ -78,6 +89,7 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <!-- svelte-ignore a11y-interactive-supports-focus -->
 <div
+  bind:this={refContainer}
   role="tablist"
   class:bx--content-switcher={true}
   class:bx--content-switcher--sm={size === "sm"}

package/src/ContentSwitcher/Switch.svelte

@@ -18,12 +18,12 @@
   export let disabled = false;
 
   /** Set an id for the button element */
-  export let id = "ccs-" + Math.random().toString(36);
+  export let id = `ccs-${Math.random().toString(36)}`;
 
   /** Obtain a reference to the button HTML element */
   export let ref = null;
 
-  import { afterUpdate, getContext, onMount } from "svelte";
+  import { getContext, onMount } from "svelte";
 
   const ctx = getContext("ContentSwitcher");
 
@@ -33,12 +33,6 @@
     selected = currentId === id;
   });
 
-  afterUpdate(() => {
-    if (selected) {
-      ref.focus();
-    }
-  });
-
   onMount(() => {
     return () => unsubscribe();
   });

package/src/ContextMenu/ContextMenuOption.svelte

@@ -55,7 +55,7 @@
    * Specify the id.
    * It's recommended to provide an id as a value to bind to within a selectable/radio menu group.
    */
-  export let id = "ccs-" + Math.random().toString(36);
+  export let id = `ccs-${Math.random().toString(36)}`;
 
   /** Obtain a reference to the list item HTML element */
   export let ref = null;

package/src/DataTable/DataTable.svelte

@@ -102,7 +102,7 @@
    * When the table is inside a form, this name will
    * be included in the form data on submit.
    */
-  export let inputName = "ccs-" + Math.random().toString(36);
+  export let inputName = `ccs-${Math.random().toString(36)}`;
 
   /** Set to `true` to use zebra styles */
   export let zebra = false;
@@ -192,6 +192,12 @@
   import InlineCheckbox from "../Checkbox/InlineCheckbox.svelte";
   import ChevronRight from "../icons/ChevronRight.svelte";
   import RadioButton from "../RadioButton/RadioButton.svelte";
+  import {
+    compareValues,
+    formatHeaderWidth,
+    getDisplayedRows,
+    resolvePath,
+  } from "./data-table-utils.js";
   import Table from "./Table.svelte";
   import TableBody from "./TableBody.svelte";
   import TableCell from "./TableCell.svelte";
@@ -200,8 +206,6 @@
   import TableHeader from "./TableHeader.svelte";
   import TableRow from "./TableRow.svelte";
 
-  const PATH_SPLIT_REGEX = /[.[\]'"]/;
-
   const sortDirectionMap = {
     none: "ascending",
     ascending: "descending",
@@ -219,7 +223,7 @@
 
   // Internal ID prefix for radio buttons, checkboxes, etc.
   // since there may be multiple `DataTable` instances that have overlapping row ids.
-  const id = "ccs-" + Math.random().toString(36);
+  const id = `ccs-${Math.random().toString(36)}`;
 
   // Store a copy of the original rows for filter restoration.
   $: originalRows = [...rows];
@@ -228,13 +232,6 @@
     a[c.key] = c.key;
     return a;
   }, {});
-  const resolvePath = (object, path) => {
-    if (path in object) return object[path];
-    return path
-      .split(PATH_SPLIT_REGEX)
-      .filter((p) => p)
-      .reduce((o, p) => (o && typeof o === "object" ? o[p] : o), object);
-  };
 
   /**
    * @type {() => void}
@@ -275,7 +272,7 @@
         return searchableKeys.some((key) => {
           const _value = resolvePath(row, key);
           if (typeof _value === "string" || typeof _value === "number") {
-            return (_value + "")?.toLowerCase().includes(value);
+            return `${_value}`?.toLowerCase().includes(value);
           }
           return false;
         });
@@ -342,48 +339,18 @@
       sortedRows = $tableRows;
     } else {
       sortedRows = [...$tableRows].sort((a, b) => {
-        const itemA = ascending
-          ? resolvePath(a, sortKey)
-          : resolvePath(b, sortKey);
-        const itemB = ascending
-          ? resolvePath(b, sortKey)
-          : resolvePath(a, sortKey);
-
-        if (sortingHeader?.sort) return sortingHeader.sort(itemA, itemB);
-
-        if (typeof itemA === "number" && typeof itemB === "number")
-          return itemA - itemB;
-
-        if ([itemA, itemB].every((item) => !item && item !== 0)) return 0;
-        if (!itemA && itemA !== 0) return ascending ? 1 : -1;
-        if (!itemB && itemB !== 0) return ascending ? -1 : 1;
-
-        return itemA
-          .toString()
-          .localeCompare(itemB.toString(), "en", { numeric: true });
+        const itemA = resolvePath(a, sortKey);
+        const itemB = resolvePath(b, sortKey);
+        return compareValues(itemA, itemB, ascending, sortingHeader?.sort);
       });
     }
   }
-  const getDisplayedRows = (rows, page, pageSize) =>
-    page && pageSize
-      ? rows.slice((page - 1) * pageSize, page * pageSize)
-      : rows;
   $: displayedRows = getDisplayedRows($tableRows, page, pageSize);
   $: displayedSortedRows = getDisplayedRows(sortedRows, page, pageSize);
 
   $: hasCustomHeaderWidth = headers.some(
     (header) => header.width || header.minWidth,
   );
-
-  /** @type {(header: DataTableHeader) => undefined | string} */
-  const formatHeaderWidth = (header) => {
-    const styles = [
-      header.width && `width: ${header.width}`,
-      header.minWidth && `min-width: ${header.minWidth}`,
-    ].filter(Boolean);
-    if (styles.length === 0) return undefined;
-    return styles.join(";");
-  };
 </script>
 
 <TableContainer {useStaticWidth} {...$$restProps}>

package/src/DataTable/DataTableTypes.d.ts

@@ -6,8 +6,8 @@ type Join<K, P> = K extends string | number
     : never
   : never;
 
-// For performance, the maximum traversal depth is 10.
-export type PropertyPath<T, D extends number = 10> = [D] extends [never]
+// For performance, the maximum traversal depth is 3.
+export type PropertyPath<T, D extends number = 3> = [D] extends [never]
   ? never
   : T extends object
     ? {

package/src/DataTable/TableHeader.svelte

@@ -31,7 +31,7 @@
   export let translateWithId = (id) => defaultTranslations[id];
 
   /** Set an id for the top-level element */
-  export let id = "ccs-" + Math.random().toString(36);
+  export let id = `ccs-${Math.random().toString(36)}`;
 
   import ArrowsVertical from "../icons/ArrowsVertical.svelte";
   import ArrowUp from "../icons/ArrowUp.svelte";

package/src/DataTable/ToolbarSearch.svelte

@@ -48,6 +48,7 @@
 
   import { afterUpdate, getContext, onMount, tick } from "svelte";
   import Search from "../Search/Search.svelte";
+  import { rowsEqual } from "./data-table-utils.js";
 
   const ctx = getContext("DataTable") ?? {};
 
@@ -58,7 +59,7 @@
     unsubscribe = ctx?.tableRows.subscribe((tableRows) => {
       // Only update if the rows have actually changed.
       // This approach works in both Svelte 4 and Svelte 5.
-      if (JSON.stringify(tableRows) !== JSON.stringify(rows)) {
+      if (!rowsEqual(tableRows, rows)) {
         rows = tableRows;
       }
     });

package/src/DataTable/data-table-utils.d.ts

@@ -0,0 +1,54 @@
+/**
+ * Lightweight deep equality check optimized for DataTable rows.
+ * Compares arrays of row objects by first checking IDs (fast path),
+ * then falling back to deep object comparison to handle nested structures.
+ */
+export function rowsEqual<Row extends Record<string, any>>(
+  a: ReadonlyArray<Row> | null,
+  b: ReadonlyArray<Row> | null,
+): boolean;
+
+/**
+ * Resolves a nested property path in an object.
+ * Supports both direct property access and nested paths like "contact.company".
+ */
+export function resolvePath<T extends Record<string, unknown>>(
+  object: T,
+  path: string,
+): unknown;
+
+/**
+ * Paginates an array of rows based on page number and page size.
+ */
+export function getDisplayedRows<Row extends Record<string, unknown>>(
+  rows: ReadonlyArray<Row>,
+  page: number,
+  pageSize: number,
+): ReadonlyArray<Row>;
+
+/**
+ * Formats header width styles for table headers.
+ * Combines width and minWidth into a CSS style string.
+ */
+export function formatHeaderWidth<
+  Header extends {
+    width?: string | null | number;
+    minWidth?: string | null | number;
+    [key: string]: unknown;
+  } = {
+    width?: string | null | number;
+    minWidth?: string | null | number;
+    [key: string]: unknown;
+  },
+>(header: Header): string | undefined;
+
+/**
+ * Compares two values for sorting in a data table.
+ * Handles numbers, strings, null/undefined values, and custom sort functions.
+ */
+export function compareValues<T = unknown>(
+  itemA: T,
+  itemB: T,
+  ascending: boolean,
+  customSort?: ((a: T, b: T) => number) | false | undefined,
+): number;

package/src/DataTable/data-table-utils.js

@@ -0,0 +1,239 @@
+// @ts-check
+/**
+ * Deep equality check for values (nested objects and arrays).
+ * @param {*} a - First value to compare
+ * @param {*} b - Second value to compare
+ * @param {WeakMap<*, Set<*>>} [stack] - WeakMap used to track circular references
+ * @returns {boolean} True if values are deeply equal, false otherwise
+ */
+function deepEqual(a, b, stack = new WeakMap()) {
+  // Fast path: reference equality.
+  if (a === b) return true;
+
+  // Handle null/undefined.
+  if (a == null || b == null) return a === b;
+
+  // Handle NaN: NaN is the only value where NaN !== NaN is true in JavaScript
+  // Without this check, two NaN values would incorrectly be considered unequal.
+  if (Number.isNaN(a) && Number.isNaN(b)) return true;
+  if (Number.isNaN(a) || Number.isNaN(b)) return false;
+
+  if (typeof a !== typeof b) return false;
+
+  if (a instanceof Date && b instanceof Date) {
+    return a.getTime() === b.getTime();
+  }
+
+  if (a instanceof RegExp && b instanceof RegExp) {
+    return a.source === b.source && a.flags === b.flags;
+  }
+
+  if (typeof a === "function" && typeof b === "function") {
+    return a === b;
+  }
+
+  if (Array.isArray(a) && Array.isArray(b)) {
+    if (a.length !== b.length) return false;
+    for (let i = 0; i < a.length; i++) {
+      // Pass the stack to handle nested arrays and prevent infinite recursion.
+      if (!deepEqual(a[i], b[i], stack)) return false;
+    }
+    return true;
+  }
+
+  if (typeof a === "object" && typeof b === "object") {
+    const aVisited = stack.get(a);
+
+    if (aVisited?.has(b)) {
+      // Circular reference: if we've already seen this (a, b) pair, they're equal.
+      return true;
+    }
+
+    // WeakMap entries are auto-removed when keys are garbage collected.
+    if (aVisited) {
+      aVisited.add(b);
+    } else {
+      stack.set(a, new Set([b]));
+    }
+
+    // Compare string keys: objects must have the same enumerable properties.
+    const keysA = Object.keys(a);
+    const keysB = Object.keys(b);
+    if (keysA.length !== keysB.length) {
+      stack.get(a)?.delete(b);
+      return false;
+    }
+
+    for (const key of keysA) {
+      // Pass the stack to handle nested objects and prevent infinite recursion.
+      if (!(key in b) || !deepEqual(a[key], b[key], stack)) {
+        stack.get(a)?.delete(b);
+        return false;
+      }
+    }
+
+    const symKeysA = Object.getOwnPropertySymbols(a);
+    const symKeysB = Object.getOwnPropertySymbols(b);
+    if (symKeysA.length !== symKeysB.length) {
+      stack.get(a)?.delete(b);
+      return false;
+    }
+
+    // Recursively compare Symbol property values.
+    for (const key of symKeysA) {
+      if (!symKeysB.includes(key) || !deepEqual(a[key], b[key], stack)) {
+        stack.get(a)?.delete(b);
+        return false;
+      }
+    }
+
+    // All checks passed: remove (a, b) from tracking before returning
+    // Cleanup is for correctness (not GC): allows same objects to be
+    // compared again without false circular reference detection.
+    stack.get(a)?.delete(b);
+    return true;
+  }
+
+  // Finally, use strict equality for primitives.
+  return a === b;
+}
+
+/**
+ * Lightweight deep equality check optimized for DataTable rows.
+ * Compares arrays of row objects by first checking IDs (fast path),
+ * then falling back to deep object comparison to handle nested structures.
+ * @template {Record<string, any>} Row - Row type with at least an optional `id` property
+ * @param {ReadonlyArray<Row> | null} a - First array of rows to compare
+ * @param {ReadonlyArray<Row> | null} b - Second array of rows to compare
+ * @returns {boolean} True if row arrays are deeply equal, false otherwise
+ */
+export function rowsEqual(a, b) {
+  if (a === b) return true;
+  if (a === null || b === null) return false;
+  if (!Array.isArray(a) || !Array.isArray(b)) return false;
+
+  if (a.length !== b.length) return false;
+
+  // Fast path: compare by row IDs first, assuming rows have stable IDs.
+  for (let i = 0; i < a.length; i++) {
+    if (a[i]?.id !== b[i]?.id) return false;
+  }
+
+  // If IDs match, do deep comparison of row objects
+  // This catches cases where row data changed but ID stayed the same,
+  // including changes in nested objects (e.g., "contact.company")
+  for (let i = 0; i < a.length; i++) {
+    const rowA = a[i];
+    const rowB = b[i];
+
+    // Fast path: same reference
+    if (rowA === rowB) continue;
+
+    // Deep comparison to handle nested objects and arrays
+    if (!deepEqual(rowA, rowB)) return false;
+  }
+
+  return true;
+}
+
+const PATH_SPLIT_REGEX = /[.[\]'"]/;
+const MAX_PATH_CACHE_SIZE = 1000;
+const pathCache = new Map();
+
+/**
+ * Resolves a nested property path in an object.
+ * Supports both direct property access and nested paths like "contact.company".
+ * @template {Record<string, unknown>} T
+ * @param {T} object - The object to resolve the path from
+ * @param {string} path - The property path (e.g., "name" or "contact.company")
+ * @returns {unknown} The resolved value, or undefined if the path doesn't exist
+ */
+export function resolvePath(object, path) {
+  if (path in object) return object[path];
+
+  let segments = pathCache.get(path);
+  if (!segments) {
+    segments = path.split(PATH_SPLIT_REGEX).filter((p) => p);
+    if (segments.length > 1) {
+      if (pathCache.size >= MAX_PATH_CACHE_SIZE) {
+        const firstKey = pathCache.keys().next().value;
+        pathCache.delete(firstKey);
+      }
+      pathCache.set(path, segments);
+    }
+  }
+
+  return segments.reduce(
+    (o, p) => (o && typeof o === "object" ? o[p] : o),
+    object,
+  );
+}
+
+/**
+ * Paginates an array of rows based on page number and page size.
+ * @template {Record<string, unknown>} Row
+ * @param {ReadonlyArray<Row>} rows - The rows to paginate
+ * @param {number} page - The current page number (1-indexed)
+ * @param {number} pageSize - The number of items per page
+ * @returns {ReadonlyArray<Row>} The paginated rows, or all rows if pagination is disabled
+ */
+export function getDisplayedRows(rows, page, pageSize) {
+  if (page && pageSize) {
+    return rows.slice((page - 1) * pageSize, page * pageSize);
+  }
+  return rows;
+}
+
+/**
+ * Formats header width styles for table headers.
+ * Combines width and minWidth into a CSS style string.
+ * @template {object} Header
+ * @param {Header & { width?: string | null | number; minWidth?: string | null | number; [key: string]: unknown }} header - The header object
+ * @returns {string | undefined} The formatted style string, or undefined if no width styles
+ */
+export function formatHeaderWidth(header) {
+  const styles = [
+    header.width && `width: ${header.width}`,
+    header.minWidth && `min-width: ${header.minWidth}`,
+  ].filter(Boolean);
+  if (styles.length === 0) return undefined;
+  return styles.join(";");
+}
+
+/**
+ * Compares two values for sorting in a data table.
+ * Handles numbers, strings, null/undefined values, and custom sort functions.
+ * @template T
+ * @param {T} itemA - First value to compare
+ * @param {T} itemB - Second value to compare
+ * @param {boolean} ascending - Whether to sort in ascending order
+ * @param {((a: T, b: T) => number) | false | undefined} customSort - Optional custom sort function
+ * @returns {number} Negative if a < b (ascending) or a > b (descending), positive if a > b (ascending) or a < b (descending), 0 if equal
+ */
+export function compareValues(itemA, itemB, ascending, customSort) {
+  if (customSort) return customSort(itemA, itemB);
+
+  let result;
+
+  // Fast path: numeric comparison
+  if (typeof itemA === "number" && typeof itemB === "number") {
+    result = itemA - itemB;
+  } else {
+    // Handle null/undefined values
+    if ([itemA, itemB].every((item) => !item && item !== 0)) {
+      result = 0;
+    } else if (!itemA && itemA !== 0) {
+      result = 1;
+    } else if (!itemB && itemB !== 0) {
+      result = -1;
+    } else {
+      // String comparison with locale-aware numeric sorting
+      result = String(itemA).localeCompare(String(itemB), "en", {
+        numeric: true,
+      });
+    }
+  }
+
+  // Reverse result for descending order
+  return ascending ? result : -result;
+}