Make toHierarchy even more generic (reusable with RecursiveList

docs/src/pages/components/RecursiveList.svx

@@ -37,4 +37,11 @@ Set `type` to `"ordered"` to use the ordered list variant.
 
 Set `type` to `"ordered-native"` to use the native styles for an ordered list.
 
-<FileSource src="/framed/RecursiveList/RecursiveListOrderedNative" />
+<FileSource src="/framed/RecursiveList/RecursiveListOrderedNative" />
+
+## Flat data structure
+
+If working with a flat data structure, use the `toHierarchy` utility
+to convert a flat data structure into a hierarchical array accepted by the `nodes` prop.
+
+<FileSource src="/framed/RecursiveList/RecursiveListFlatArray" />

docs/src/pages/framed/RecursiveList/RecursiveListFlatArray.svelte

@@ -0,0 +1,20 @@
+<script>
+  import { RecursiveList, toHierarchy } from "carbon-components-svelte";
+
+  const nodesFlat = [
+    { id: 1, text: "Item 1" },
+    { id: 2, text: "Item 1a", pid: 1 },
+    { id: 3, html: "<h5>HTML content</h5>", pid: 2 },
+    { id: 4, text: "Item 2" },
+    { id: 5, href: "https://svelte.dev/", pid: 4 },
+    {
+      id: 6,
+      href: "https://svelte.dev/",
+      text: "Link with custom text",
+      pid: 4,
+    },
+    { id: 7, text: "Item 3" },
+  ];
+</script>
+
+<RecursiveList nodes={toHierarchy(nodesFlat, (node) => node.pid)} />

src/TreeView/index.d.ts

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

src/TreeView/index.js

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

src/index.js

@@ -127,7 +127,6 @@ export { Tooltip, TooltipFooter } from "./Tooltip";
 export { TooltipDefinition } from "./TooltipDefinition";
 export { TooltipIcon } from "./TooltipIcon";
 export { TreeView } from "./TreeView";
-export { toHierarchy } from "./TreeView/treeview";
 export { Truncate } from "./Truncate";
 export { default as truncate } from "./Truncate/truncate";
 export {
@@ -153,3 +152,4 @@ export {
   HeaderSearch,
 } from "./UIShell";
 export { UnorderedList } from "./UnorderedList";
+export { toHierarchy } from "./utils/toHierarchy";

tests/TreeView/TreeView.hierarchy.test.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { Button, TreeView } from "carbon-components-svelte";
-  import { toHierarchy } from "../../src/TreeView/treeview";
+  import { toHierarchy } from "../../src/utils/toHierarchy";
   import type { TreeNodeId } from "carbon-components-svelte/TreeView/TreeView.svelte";
   import Analytics from "carbon-icons-svelte/lib/Analytics.svelte";
 

tests/TreeView/to-hierarchy.test.ts

@@ -1,4 +1,4 @@
-import { toHierarchy } from "../../src/TreeView/treeview";
+import { toHierarchy } from "../../src/utils/toHierarchy";
 
 describe("toHierarchy", () => {
   test("should create a flat hierarchy when no items have parents", () => {

types/TreeView/index.d.ts

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

types/index.d.ts

@@ -143,7 +143,6 @@ export { default as TooltipFooter } from "./Tooltip/TooltipFooter.svelte";
 export { default as TooltipDefinition } from "./TooltipDefinition/TooltipDefinition.svelte";
 export { default as TooltipIcon } from "./TooltipIcon/TooltipIcon.svelte";
 export { default as TreeView } from "./TreeView/TreeView.svelte";
-export { default as toHierarchy } from "./TreeView/treeview";
 export { default as Truncate } from "./Truncate/Truncate.svelte";
 export { default as truncate } from "./Truncate/truncate";
 export { default as Header } from "./UIShell/Header.svelte";
@@ -167,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";