carbon-components-svelte 0.89.0 → 0.89.2

package/README.md

@@ -14,7 +14,7 @@ Design systems facilitate design and development through reuse, consistency, and
 The Carbon Svelte portfolio also includes:
 
 - **[Carbon Icons Svelte](https://github.com/carbon-design-system/carbon-icons-svelte)**: 2,400+ Carbon icons as Svelte components
-- **[Carbon Pictograms Svelte](https://github.com/carbon-design-system/carbon-pictograms-svelte)**: 1,200+ Carbon pictograms as Svelte components
+- **[Carbon Pictograms Svelte](https://github.com/carbon-design-system/carbon-pictograms-svelte)**: 1,300+ Carbon pictograms as Svelte components
 - **[Carbon Charts Svelte](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte)**: 25+ charts, powered by d3
 - **[Carbon Preprocess Svelte](https://github.com/carbon-design-system/carbon-preprocess-svelte)**: Collection of Svelte preprocessors for Carbon
 

package/package.json

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

package/src/ComposedModal/ComposedModal.svelte

@@ -152,6 +152,7 @@
 >
   <!-- svelte-ignore a11y-click-events-have-key-events -->
   <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+  <!-- svelte-ignore a11y_interactive_supports_focus -->
   <div
     bind:this={innerModal}
     role="dialog"

package/src/DataTable/ToolbarSearch.svelte

@@ -46,15 +46,39 @@
    */
   export let ref = null;
 
-  import { tick, getContext } from "svelte";
+  import { tick, getContext, afterUpdate, onMount } from "svelte";
   import Search from "../Search/Search.svelte";
 
   const ctx = getContext("DataTable") ?? {};
 
+  let rows = null;
+  let unsubscribe = null;
+
   $: if (shouldFilterRows) {
-    filteredRowIds = ctx?.filterRows(value, shouldFilterRows);
+    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)) {
+        rows = tableRows;
+      }
+    });
+  } else {
+    rows = null;
   }
 
+  onMount(() => {
+    return () => {
+      unsubscribe?.();
+    };
+  });
+
+  afterUpdate(() => {
+    // Only filter rows in a callback to avoid an infinite update loop.
+    if (rows !== null) {
+      filteredRowIds = ctx?.filterRows(value, shouldFilterRows);
+    }
+  });
+
   async function expandSearch() {
     await tick();
     if (disabled || persistent || expanded) return;

package/src/Pagination/Pagination.svelte

@@ -12,6 +12,16 @@
   /** Specify the total number of items */
   export let totalItems = 0;
 
+  /**
+   * If `totalItems` is a large number, it can affect the
+   * rendering performance of this component since its value
+   * is used to calculate the number of pages in the native
+   * select dropdown. This value creates a small window of
+   * pages rendered around the current page. By default,
+   * a maximum of 1000 select items are rendered.
+   */
+  export let pageWindow = 1000;
+
   /** Set to `true` to disable the pagination */
   export let disabled = false;
 
@@ -29,14 +39,14 @@
    * @type {(min: number, max: number) => string}
    */
   export let itemText = (min, max) =>
-    `${min}–${max} item${max === 1 ? "" : "s"}`;
+    `${min.toLocaleString()}–${max.toLocaleString()} item${max === 1 ? "" : "s"}`;
 
   /**
    * Override the item range text
    * @type {(min: number, max: number, total: number) => string}
    */
   export let itemRangeText = (min, max, total) =>
-    `${min}–${max} of ${total} item${max === 1 ? "" : "s"}`;
+    `${min.toLocaleString()}–${max.toLocaleString()} of ${total.toLocaleString()} item${max === 1 ? "" : "s"}`;
 
   /** Set to `true` to disable the page input */
   export let pageInputDisabled = false;
@@ -60,14 +70,14 @@
    * Override the page text
    * @type {(page: number) => string}
    */
-  export let pageText = (page) => `page ${page}`;
+  export let pageText = (page) => `page ${page.toLocaleString()}`;
 
   /**
    * Override the page range text
    * @type {(current: number, total: number) => string}
    */
   export let pageRangeText = (current, total) =>
-    `of ${total} page${total === 1 ? "" : "s"}`;
+    `of ${total.toLocaleString()} page${total === 1 ? "" : "s"}`;
 
   /** Set an id for the top-level element */
   export let id = "ccs-" + Math.random().toString(36);
@@ -81,6 +91,21 @@
 
   const dispatch = createEventDispatcher();
 
+  /**
+   * Returns a subset of page numbers centered around the current page to prevent
+   * performance issues with large datasets. Creates a capped window of pages
+   * instead of potentially thousands, improving render speed and memory usage.
+   * @param {number} currentPage - The current page number
+   * @param {number} totalPages - Total number of pages
+   * @param {number} window - How many pages to show before/after current page
+   * @returns {number[]} Array of page numbers to display
+   */
+  function getWindowedPages(currentPage, totalPages, window) {
+    const start = Math.max(1, currentPage - window);
+    const end = Math.min(totalPages, currentPage + window);
+    return Array.from({ length: end - start + 1 }, (_, i) => start + i);
+  }
+
   afterUpdate(() => {
     if (page > totalPages) {
       page = totalPages;
@@ -89,7 +114,7 @@
 
   $: dispatch("update", { pageSize, page });
   $: totalPages = Math.max(Math.ceil(totalItems / pageSize), 1);
-  $: selectItems = Array.from({ length: totalPages }, (_, i) => i);
+  $: selectItems = getWindowedPages(page, totalPages, pageWindow);
   $: backButtonDisabled = disabled || page === 1;
   $: forwardButtonDisabled = disabled || page === totalPages;
 </script>
@@ -146,7 +171,7 @@
         bind:selected={page}
       >
         {#each selectItems as size, i (size)}
-          <SelectItem value={size + 1} text={(size + 1).toString()} />
+          <SelectItem value={size} text={size.toString()} />
         {/each}
       </Select>
       <span class:bx--pagination__text={true}>

package/src/utils/toHierarchy.js

@@ -13,22 +13,35 @@
 export function toHierarchy(flatArray, getParentId) {
   /** @type {NodeLike[]} */
   const tree = [];
-  const nodeMap = new Map();
+  const childrenOf = new Map();
+  const itemsMap = new Map(flatArray.map((item) => [item.id, item]));
 
-  for (const item of flatArray) {
+  flatArray.forEach((item) => {
     const parentId = getParentId(item);
-    nodeMap.set(item.id, item);
 
-    if (!parentId || !nodeMap.has(parentId)) {
-      tree.push(item);
-    } else {
-      const parent = nodeMap.get(parentId);
-      if (!parent.nodes) {
-        parent.nodes = [];
+    // Only create nodes array if we have children.
+    const children = childrenOf.get(item.id);
+    if (children) {
+      item.nodes = children;
+    }
+
+    // Check if parentId exists using Map instead of array lookup.
+    const parentExists = parentId && itemsMap.has(parentId);
+
+    if (parentId && parentExists) {
+      if (!childrenOf.has(parentId)) {
+        childrenOf.set(parentId, []);
       }
-      parent.nodes.push(item);
+      childrenOf.get(parentId).push(item);
+
+      const parent = itemsMap.get(parentId);
+      if (parent) {
+        parent.nodes = childrenOf.get(parentId);
+      }
+    } else {
+      tree.push(item);
     }
-  }
+  });
 
   return tree;
 }

package/types/Pagination/Pagination.svelte.d.ts

@@ -16,6 +16,17 @@ type $Props = {
    */
   totalItems?: number;
 
+  /**
+   * If `totalItems` is a large number, it can affect the
+   * rendering performance of this component since its value
+   * is used to calculate the number of pages in the native
+   * select dropdown. This value creates a small window of
+   * pages rendered around the current page. By default,
+   * a maximum of 1000 select items are rendered.
+   * @default 1000
+   */
+  pageWindow?: number;
+
   /**
    * Set to `true` to disable the pagination
    * @default false
@@ -42,13 +53,13 @@ type $Props = {
 
   /**
    * Override the item text
-   * @default (min, max) => `${min}–${max} item${max === 1 ? "" : "s"}`
+   * @default (min, max) => `${min.toLocaleString()}–${max.toLocaleString()} item${max === 1 ? "" : "s"}`
    */
   itemText?: (min: number, max: number) => string;
 
   /**
    * Override the item range text
-   * @default (min, max, total) => `${min}–${max} of ${total} item${max === 1 ? "" : "s"}`
+   * @default (min, max, total) => `${min.toLocaleString()}–${max.toLocaleString()} of ${total.toLocaleString()} item${max === 1 ? "" : "s"}`
    */
   itemRangeText?: (min: number, max: number, total: number) => string;
 
@@ -84,13 +95,13 @@ type $Props = {
 
   /**
    * Override the page text
-   * @default (page) => `page ${page}`
+   * @default (page) => `page ${page.toLocaleString()}`
    */
   pageText?: (page: number) => string;
 
   /**
    * Override the page range text
-   * @default (current, total) => `of ${total} page${total === 1 ? "" : "s"}`
+   * @default (current, total) => `of ${total.toLocaleString()} page${total === 1 ? "" : "s"}`
    */
   pageRangeText?: (current: number, total: number) => string;