carbon-components-svelte 0.86.1 → 0.87.0

package/README.md

@@ -15,7 +15,7 @@ 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,100+ Carbon pictograms as Svelte components
-- **[Carbon Charts Svelte](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte)**: 20+ charts, powered by d3
+- **[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
 
 ## [Documentation](https://svelte.carbondesignsystem.com)

package/package.json

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

package/src/MultiSelect/MultiSelect.svelte

@@ -243,11 +243,11 @@
     }
   });
 
-  $: menuId = `menu-${id}`;
-  $: inline = type === "inline";
-  $: ariaLabel = $$props["aria-label"] || "Choose an item";
-  $: sortedItems = (() => {
-    if (selectionFeedback === "top" && selectedIds.length > 0) {
+  function sort() {
+    if (
+      selectionFeedback === "top" ||
+      selectionFeedback === "top-after-reopen"
+    ) {
       const checkedItems = items
         .filter((item) => selectedIds.includes(item.id))
         .map((item) => ({ ...item, checked: true }));
@@ -269,7 +269,20 @@
         checked: selectedIds.includes(item.id),
       }))
       .sort(sortItem);
-  })();
+  }
+
+  let sortedItems = sort();
+
+  $: menuId = `menu-${id}`;
+  $: inline = type === "inline";
+  $: ariaLabel = $$props["aria-label"] || "Choose an item";
+  $: if (
+    selectedIds &&
+    (selectionFeedback === "top" ||
+      (selectionFeedback === "top-after-reopen" && open === false))
+  ) {
+    sortedItems = sort();
+  }
   $: checked = sortedItems.filter(({ checked }) => checked);
   $: unchecked = sortedItems.filter(({ checked }) => !checked);
   $: filteredItems = sortedItems.filter((item) => filterItem(item, value));

package/src/TooltipIcon/TooltipIcon.svelte

@@ -46,6 +46,7 @@
 <button
   bind:this={ref}
   {disabled}
+  type="button"
   aria-describedby={id}
   class:bx--tooltip__trigger={true}
   class:bx--tooltip--a11y={true}

package/src/TreeView/TreeView.svelte

@@ -139,7 +139,6 @@
           ref?.querySelector(`[id="${lastId}"]`)?.focus();
         });
 
-        // Break out of the loop if the node is found.
         break;
       }
     }

package/src/TreeView/index.d.ts

@@ -0,0 +1 @@
+export { default as TreeView } from "./TreeView.svelte";

package/src/index.js

@@ -152,3 +152,4 @@ export {
   HeaderSearch,
 } from "./UIShell";
 export { UnorderedList } from "./UnorderedList";
+export { toHierarchy } from "./utils/toHierarchy";

package/src/utils/toHierarchy.d.ts

@@ -0,0 +1,21 @@
+type NodeLike = {
+  id: string | number;
+  nodes?: NodeLike[];
+  [key: string]: any;
+};
+
+/** Create a hierarchical tree from a flat array. */
+export function toHierarchy<
+  T extends NodeLike,
+  K extends keyof Omit<T, "id" | "nodes">,
+>(
+  flatArray: T[] | readonly T[],
+  /**
+   * Function that returns the parent ID for a given node.
+   * @example
+   * toHierarchy(flatArray, (node) => node.parentId);
+   */
+  getParentId: (node: T) => T[K] | null,
+): (T & { nodes?: (T & { nodes?: T[] })[] })[];
+
+export default toHierarchy;

package/src/utils/toHierarchy.js

@@ -0,0 +1,49 @@
+// @ts-check
+/**
+ * Create a nested array from a flat array.
+ * @typedef {Object} NodeLike
+ * @property {string | number} id - Unique identifier for the node
+ * @property {NodeLike[]} [nodes] - Optional array of child nodes
+ * @property {Record<string, any>} [additionalProperties] - Any additional properties
+ *
+ * @param {NodeLike[]} flatArray - Array of flat nodes to convert
+ * @param {function(NodeLike): (string|number|null)} getParentId - Function to get parent ID for a node
+ * @returns {NodeLike[]} Hierarchical tree structure
+ */
+export function toHierarchy(flatArray, getParentId) {
+  /** @type {NodeLike[]} */
+  const tree = [];
+  const childrenOf = new Map();
+  const itemsMap = new Map(flatArray.map((item) => [item.id, item]));
+
+  flatArray.forEach((item) => {
+    const parentId = getParentId(item);
+
+    // 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, []);
+      }
+      childrenOf.get(parentId).push(item);
+
+      const parent = itemsMap.get(parentId);
+      if (parent) {
+        parent.nodes = childrenOf.get(parentId);
+      }
+    } else {
+      tree.push(item);
+    }
+  });
+
+  return tree;
+}
+
+export default toHierarchy;

package/types/TreeView/index.d.ts

@@ -0,0 +1 @@
+export { default as TreeView } from "./TreeView.svelte";

package/types/index.d.ts

@@ -166,3 +166,4 @@ export { default as SkipToContent } from "./UIShell/SkipToContent.svelte";
 export { default as HeaderGlobalAction } from "./UIShell/HeaderGlobalAction.svelte";
 export { default as HeaderSearch } from "./UIShell/HeaderSearch.svelte";
 export { default as UnorderedList } from "./UnorderedList/UnorderedList.svelte";
+export { default as toHierarchy } from "./utils/toHierarchy";

package/types/utils/toHierarchy.d.ts

@@ -0,0 +1,21 @@
+type NodeLike = {
+  id: string | number;
+  nodes?: NodeLike[];
+  [key: string]: any;
+};
+
+/** Create a hierarchical tree from a flat array. */
+export function toHierarchy<
+  T extends NodeLike,
+  K extends keyof Omit<T, "id" | "nodes">,
+>(
+  flatArray: T[] | readonly T[],
+  /**
+   * Function that returns the parent ID for a given node.
+   * @example
+   * toHierarchy(flatArray, (node) => node.parentId);
+   */
+  getParentId: (node: T) => T[K] | null,
+): (T & { nodes?: (T & { nodes?: T[] })[] })[];
+
+export default toHierarchy;