feat(tree-view): add TreeView

COMPONENT_INDEX.md

@@ -171,6 +171,7 @@
 - [`TooltipDefinition`](#tooltipdefinition)
 - [`TooltipFooter`](#tooltipfooter)
 - [`TooltipIcon`](#tooltipicon)
+- [`TreeView`](#treeview)
 - [`Truncate`](#truncate)
 - [`UnorderedList`](#unorderedlist)
 
@@ -4649,6 +4650,47 @@ None.
 | mouseleave | forwarded | --     |
 | focus      | forwarded | --     |
 
+## `TreeView`
+
+### Types
+
+```ts
+export type TreeNodeId = string | number;
+
+export interface TreeNode {
+  id: TreeNodeId;
+  text: string;
+  disabled?: boolean;
+}
+```
+
+### Props
+
+| Prop name   | Kind             | Reactive | Type                                              | Default value          | Description                                                     |
+| :---------- | :--------------- | :------- | :------------------------------------------------ | ---------------------- | --------------------------------------------------------------- |
+| selectedIds | <code>let</code> | Yes      | <code>TreeNodeIds</code>                          | <code>[]</code>        | Set the node ids to be selected                                 |
+| activeId    | <code>let</code> | Yes      | <code>TreeNodeId</code>                           | <code>""</code>        | Set the current active node id<br />Only one node can be active |
+| children    | <code>let</code> | No       | <code>TreeNode & { children?: TreeNode[] }</code> | <code>[]</code>        | Provide an array of children nodes to render                    |
+| multiselect | <code>let</code> | No       | <code>boolean</code>                              | <code>false</code>     | Set to `true` to allow multiple selected nodes                  |
+| size        | <code>let</code> | No       | <code>"default" &#124; "compact"</code>           | <code>"default"</code> | Specify the TreeView size                                       |
+| labelText   | <code>let</code> | No       | <code>string</code>                               | <code>""</code>        | Specify the label text                                          |
+| hideLabel   | <code>let</code> | No       | <code>boolean</code>                              | <code>false</code>     | Set to `true` to visually hide the label text                   |
+
+### Slots
+
+| Slot name | Default | Props | Fallback                 |
+| :-------- | :------ | :---- | :----------------------- |
+| labelText | No      | --    | <code>{labelText}</code> |
+
+### Events
+
+| Event name | Type       | Detail                                                        |
+| :--------- | :--------- | :------------------------------------------------------------ |
+| select     | dispatched | <code>TreeNode & { expanded: boolean; leaf: boolean; }</code> |
+| toggle     | dispatched | <code>TreeNode & { expanded: boolean; leaf: boolean; }</code> |
+| focus      | dispatched | <code>TreeNode & { expanded: boolean; leaf: boolean; }</code> |
+| keydown    | forwarded  | --                                                            |
+
 ## `Truncate`
 
 ### Props

css/all.scss

@@ -76,5 +76,8 @@ $css--plex: true;
 @import "carbon-components/scss/globals/scss/_css--body";
 @import "carbon-components/scss/globals/grid/grid";
 
+// Import experimental TreeView styles not included in global styles
+@import "carbon-components/src/components/treeview/treeview";
+
 // Import all component styles
 @import "carbon-components/scss/globals/scss/styles";

css/g10.scss

@@ -27,6 +27,9 @@ $carbon--theme: $carbon--theme--g10;
 @import "carbon-components/scss/globals/scss/_css--body";
 @import "carbon-components/scss/globals/grid/grid";
 
+// Import experimental TreeView styles not included in global styles
+@import "carbon-components/src/components/treeview/treeview";
+
 // Import all component styles
 @import "carbon-components/scss/globals/scss/styles";
 

css/g100.scss

@@ -27,5 +27,8 @@ $carbon--theme: $carbon--theme--g100;
 @import "carbon-components/scss/globals/scss/_css--body";
 @import "carbon-components/scss/globals/grid/grid";
 
+// Import experimental TreeView styles not included in global styles
+@import "carbon-components/src/components/treeview/treeview";
+
 // Import all component styles
 @import "carbon-components/scss/globals/scss/styles";

css/g80.scss

@@ -27,6 +27,9 @@ $carbon--theme: $carbon--theme--g80;
 @import "carbon-components/scss/globals/scss/_css--body";
 @import "carbon-components/scss/globals/grid/grid";
 
+// Import experimental TreeView styles not included in global styles
+@import "carbon-components/src/components/treeview/treeview";
+
 // Import all component styles
 @import "carbon-components/scss/globals/scss/styles";
 

css/g90.scss

@@ -27,5 +27,8 @@ $carbon--theme: $carbon--theme--g90;
 @import "carbon-components/scss/globals/scss/_css--body";
 @import "carbon-components/scss/globals/grid/grid";
 
+// Import experimental TreeView styles not included in global styles
+@import "carbon-components/src/components/treeview/treeview";
+
 // Import all component styles
 @import "carbon-components/scss/globals/scss/styles";

css/white.scss

@@ -27,5 +27,8 @@ $carbon--theme: $carbon--theme--white;
 @import "carbon-components/scss/globals/scss/_css--body";
 @import "carbon-components/scss/globals/grid/grid";
 
+// Import experimental TreeView styles not included in global styles
+@import "carbon-components/src/components/treeview/treeview";
+
 // Import all component styles
 @import "carbon-components/scss/globals/scss/styles";

docs/src/App.svelte

@@ -84,6 +84,8 @@
   @import "carbon-components/scss/globals/scss/_css--body";
   @import "carbon-components/scss/globals/grid/grid";
 
+  @import "carbon-components/src/components/treeview/treeview";
+
   // Import all component styles
   @import "carbon-components/scss/globals/scss/styles";
 </style>

docs/src/COMPONENT_API.json

@@ -11834,6 +11834,121 @@
       "typedefs": [],
       "rest_props": { "type": "Element", "name": "button" }
     },
+    {
+      "moduleName": "TreeView",
+      "filePath": "src/TreeView/TreeView.svelte",
+      "props": [
+        {
+          "name": "children",
+          "kind": "let",
+          "description": "Provide an array of children nodes to render",
+          "type": "TreeNode & { children?: TreeNode[] }",
+          "value": "[]",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "activeId",
+          "kind": "let",
+          "description": "Set the current active node id\nOnly one node can be active",
+          "type": "TreeNodeId",
+          "value": "\"\"",
+          "isFunction": false,
+          "constant": false,
+          "reactive": true
+        },
+        {
+          "name": "multiselect",
+          "kind": "let",
+          "description": "Set to `true` to allow multiple selected nodes",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "selectedIds",
+          "kind": "let",
+          "description": "Set the node ids to be selected",
+          "type": "TreeNodeIds",
+          "value": "[]",
+          "isFunction": false,
+          "constant": false,
+          "reactive": true
+        },
+        {
+          "name": "size",
+          "kind": "let",
+          "description": "Specify the TreeView size",
+          "type": "\"default\" | \"compact\"",
+          "value": "\"default\"",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "labelText",
+          "kind": "let",
+          "description": "Specify the label text",
+          "type": "string",
+          "value": "\"\"",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "hideLabel",
+          "kind": "let",
+          "description": "Set to `true` to visually hide the label text",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        }
+      ],
+      "slots": [
+        {
+          "name": "labelText",
+          "default": false,
+          "fallback": "{labelText}",
+          "slot_props": "{}"
+        }
+      ],
+      "events": [
+        {
+          "type": "dispatched",
+          "name": "select",
+          "detail": "TreeNode & { expanded: boolean; leaf: boolean; }"
+        },
+        {
+          "type": "dispatched",
+          "name": "toggle",
+          "detail": "TreeNode & { expanded: boolean; leaf: boolean; }"
+        },
+        {
+          "type": "dispatched",
+          "name": "focus",
+          "detail": "TreeNode & { expanded: boolean; leaf: boolean; }"
+        },
+        { "type": "forwarded", "name": "keydown", "element": "ul" }
+      ],
+      "typedefs": [
+        {
+          "type": "string | number",
+          "name": "TreeNodeId",
+          "ts": "type TreeNodeId = string | number"
+        },
+        {
+          "type": "{ id: TreeNodeId; text: string; disabled?: boolean; }",
+          "name": "TreeNode",
+          "ts": "interface TreeNode { id: TreeNodeId; text: string; disabled?: boolean; }"
+        }
+      ],
+      "rest_props": { "type": "Element", "name": "ul" }
+    },
     {
       "moduleName": "Truncate",
       "filePath": "src/Truncate/Truncate.svelte",

docs/src/pages/_layout.svelte

@@ -20,7 +20,7 @@
   import Footer from "../components/Footer.svelte";
 
   const deprecated = ["ToggleSmall", "Icon"];
-  const new_components = ["ProgressBar", "RecursiveList"];
+  const new_components = ["ProgressBar", "RecursiveList", "TreeView"]];
 
   let isOpen = false;
   let isSideNavOpen = true;

docs/src/pages/components/TreeView.svx

@@ -0,0 +1,18 @@
+<script>
+  import { TreeView } from "carbon-components-svelte";
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+Note: every node MUST have an id.
+
+### Default
+
+<FileSource src="/framed/TreeView/TreeView" />
+
+### Compact size
+
+<FileSource src="/framed/TreeView/TreeViewCompact" />
+
+### With icons
+
+<FileSource src="/framed/TreeView/TreeViewIcons" />

src/TreeView/TreeView.svelte

@@ -0,0 +1,120 @@
+<script>
+  // TODO: add utility to expand/collapse all
+
+  /**
+   * @typedef {string | number} TreeNodeId
+   * @typedef {{ id: TreeNodeId; text: string; disabled?: boolean; }} TreeNode
+   * @event {TreeNode & { expanded: boolean; leaf: boolean; }} select
+   * @event {TreeNode & { expanded: boolean; leaf: boolean; }} toggle
+   * @event {TreeNode & { expanded: boolean; leaf: boolean; }} focus
+   */
+
+  /**
+   * Provide an array of children nodes to render
+   * @type {TreeNode & { children?: TreeNode[] }}
+   */
+  export let children = [];
+
+  /**
+   * Set the current active node id
+   * Only one node can be active
+   * @type {TreeNodeId}
+   */
+  export let activeId = "";
+
+  /** Set to `true` to allow multiple selected nodes */
+  export let multiselect = false;
+
+  /**
+   * Set the node ids to be selected
+   * @type {TreeNodeIds}
+   */
+  export let selectedIds = [];
+
+  /**
+   * Specify the TreeView size
+   * @type {"default" | "compact"}
+   */
+  export let size = "default";
+
+  /** Specify the label text */
+  export let labelText = "";
+
+  /** Set to `true` to visually hide the label text */
+  export let hideLabel = false;
+
+  import { createEventDispatcher, setContext } from "svelte";
+  import { writable } from "svelte/store";
+  import TreeViewNodeList from "./TreeViewNodeList.svelte";
+
+  const dispatch = createEventDispatcher();
+  const labelId = `label-${Math.random().toString(36)}`;
+  const activeNodeId = writable(activeId);
+  const selectedNodeIds = writable(selectedIds);
+
+  let ref = null;
+  let treeWalker = null;
+
+  setContext("TreeView", {
+    activeNodeId,
+    selectedNodeIds,
+    clickNode: (node) => {
+      activeId = node.id;
+      selectedIds = [node.id];
+      dispatch("select", node);
+    },
+    focusNode: (node) => dispatch("focus", node),
+    toggleNode: (node) => dispatch("toggle", node),
+  });
+
+  function handleKeyDown(e) {
+    if (e.key === "ArrowUp" || e.key === "ArrowDown") e.preventDefault();
+
+    treeWalker.currentNode = e.target;
+
+    let node = null;
+
+    if (e.key === "ArrowUp") node = treeWalker.previousNode();
+    if (e.key === "ArrowDown") node = treeWalker.nextNode();
+    if (node && node !== e.target) {
+      node.tabindex = "0";
+      node.focus();
+    }
+  }
+
+  $: activeNodeId.set(activeId);
+  $: selectedNodeIds.set(selectedIds);
+  $: if (ref) {
+    treeWalker = document.createTreeWalker(ref, NodeFilter.SHOW_ELEMENT, {
+      acceptNode: (node) => {
+        if (node.classList.contains("bx--tree-node--disabled"))
+          return NodeFilter.FILTER_REJECT;
+        if (node.matches("li.bx--tree-node")) return NodeFilter.FILTER_ACCEPT;
+        return NodeFilter.FILTER_SKIP;
+      },
+    });
+  }
+</script>
+
+{#if !hideLabel}
+  <!-- svelte-ignore a11y-label-has-associated-control -->
+  <label id="{labelId}" class:bx--label="{true}">
+    <slot name="labelText">{labelText}</slot>
+  </label>
+{/if}
+
+<ul
+  {...$$restProps}
+  role="tree"
+  bind:this="{ref}"
+  class:bx--tree="{true}"
+  class:bx--tree--default="{size === 'default'}"
+  class:bx--tree--compact="{size === 'compact'}"
+  aria-label="{hideLabel ? labelText : undefined}"
+  aria-labelledby="{!hideLabel ? labelId : undefined}"
+  aria-multiselectable="{multiselect || undefined}"
+  on:keydown
+  on:keydown|stopPropagation="{handleKeyDown}"
+>
+  <TreeViewNodeList root children="{children}" />
+</ul>

src/TreeView/TreeViewNode.svelte

@@ -0,0 +1,112 @@
+<script context="module">
+  /**
+   * Computes the depth of a tree leaf node relative to <ul role="tree" />
+   * @param {HTMLLIElement} node
+   * @returns {number} depth
+   */
+  export function computeTreeLeafDepth(node) {
+    let depth = 0;
+
+    if (node == null) return depth;
+
+    let parentNode = node.parentNode;
+
+    while (parentNode != null && parentNode.getAttribute("role") !== "tree") {
+      parentNode = parentNode.parentNode;
+      if (parentNode.tagName === "LI") depth++;
+    }
+
+    return depth;
+  }
+
+  /**
+   * Finds the nearest parent tree node
+   * @param {HTMLElement} node
+   * @returns {null | HTMLElement}
+   */
+  function findParentTreeNode(node) {
+    if (node.classList.contains("bx--tree-parent-node")) return node;
+    if (node.classList.contains("bx--tree")) return null;
+    return findParentTreeNode(node.parentNode);
+  }
+</script>
+
+<script>
+  /**
+   * @typedef {string | number} TreeNodeId
+   */
+
+  export let leaf = false;
+
+  /** @type {TreeNodeId} */
+  export let id = "";
+  export let text = "";
+  export let disabled = false;
+
+  /**
+   * Specify the icon from `carbon-icons-svelte` to render
+   * @type {typeof import("carbon-icons-svelte").CarbonIcon}
+   */
+  export let icon = undefined;
+
+  import { getContext } from "svelte";
+
+  let ref = null;
+  let refLabel = null;
+
+  const { clickNode, focusNode, activeNodeId, selectedNodeIds } = getContext(
+    "TreeView"
+  );
+  const offset = () =>
+    computeTreeLeafDepth(refLabel) + (leaf && icon ? 2 : 2.5);
+
+  $: node = { id, text, expanded: false, leaf };
+  $: if (refLabel) {
+    refLabel.style.marginLeft = `-${offset()}rem`;
+    refLabel.style.paddingLeft = `${offset()}rem`;
+  }
+</script>
+
+<li
+  bind:this="{ref}"
+  role="treeitem"
+  id="{id}"
+  tabindex="{disabled ? undefined : -1}"
+  aria-current="{id === $activeNodeId || undefined}"
+  aria-selected="{disabled ? undefined : $selectedNodeIds.includes(id)}"
+  aria-disabled="{disabled}"
+  class:bx--tree-node="{true}"
+  class:bx--tree-leaf-node="{true}"
+  class:bx--tree-node--active="{id === $activeNodeId}"
+  class:bx--tree-node--selected="{$selectedNodeIds.includes(id)}"
+  class:bx--tree-node--disabled="{disabled}"
+  class:bx--tree-node--with-icon="{icon}"
+  on:click|stopPropagation="{() => {
+    if (disabled) return;
+    clickNode(node);
+  }}"
+  on:keydown="{(e) => {
+    if (e.key === 'ArrowLeft' || e.key === 'ArrowRight' || e.key === 'Enter') {
+      e.stopPropagation();
+    }
+
+    if (e.key === 'ArrowLeft') {
+      const parentNode = findParentTreeNode(ref.parentNode);
+      if (parentNode) parentNode.focus();
+    }
+
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      if (disabled) return;
+      clickNode(node);
+    }
+  }}"
+  on:focus="{() => {
+    focusNode(node);
+  }}"
+>
+  <div bind:this="{refLabel}" class:bx--tree-node__label="{true}">
+    <svelte:component this="{icon}" class="bx--tree-node__icon" />
+    {text}
+  </div>
+</li>

src/TreeView/TreeViewNodeList.svelte

@@ -0,0 +1,150 @@
+<script>
+  /**
+   * @typedef {string | number} TreeNodeId
+   * @typedef {{ id: TreeNodeId; text: string; disabled?: boolean; }} TreeNode
+   */
+
+  /** @type {TreeNode & { children?: TreeNode[] }} */
+  export let children = [];
+  export let expanded = false;
+  export let root = false;
+
+  /** @type {string | number} */
+  export let id = "";
+  export let text = "";
+  export let disabled = false;
+
+  /**
+   * Specify the icon from `carbon-icons-svelte` to render
+   * @type {typeof import("carbon-icons-svelte").CarbonIcon}
+   */
+  export let icon = undefined;
+
+  import { getContext } from "svelte";
+  import CaretDown16 from "carbon-icons-svelte/lib/CaretDown16/CaretDown16.svelte";
+  import TreeViewNode, { computeTreeLeafDepth } from "./TreeViewNode.svelte";
+
+  let ref = null;
+  let refLabel = null;
+
+  const {
+    clickNode,
+    focusNode,
+    toggleNode,
+    activeNodeId,
+    selectedNodeIds,
+  } = getContext("TreeView");
+
+  const offset = () => {
+    const depth = computeTreeLeafDepth(refLabel);
+
+    if (parent) return depth + 1;
+    if (icon) return depth + 2;
+    return depth + 2.5;
+  };
+
+  $: parent = Array.isArray(children);
+  $: node = { id, text, expanded, leaf: !parent };
+  $: if (refLabel) {
+    refLabel.style.marginLeft = `-${offset()}rem`;
+    refLabel.style.paddingLeft = `${offset()}rem`;
+  }
+</script>
+
+{#if root}
+  {#each children as child (child.id)}
+    {#if Array.isArray(child.children)}
+      <svelte:self {...child} />
+    {:else}
+      <TreeViewNode leaf {...child} />
+    {/if}
+  {/each}
+{:else}
+  <li
+    bind:this="{ref}"
+    role="treeitem"
+    id="{id}"
+    tabindex="{disabled ? undefined : -1}"
+    aria-current="{id === $activeNodeId || undefined}"
+    aria-selected="{disabled ? undefined : $selectedNodeIds.includes(id)}"
+    aria-disabled="{disabled}"
+    class:bx--tree-node="{true}"
+    class:bx--tree-parent-node="{true}"
+    class:bx--tree-node--active="{id === $activeNodeId}"
+    class:bx--tree-node--selected="{$selectedNodeIds.includes(id)}"
+    class:bx--tree-node--disabled="{disabled}"
+    class:bx--tree-node--with-icon="{icon}"
+    aria-expanded="{expanded}"
+    on:click|stopPropagation="{() => {
+      if (disabled) return;
+      clickNode(node);
+    }}"
+    on:keydown="{(e) => {
+      if (
+        e.key === 'ArrowLeft' ||
+        e.key === 'ArrowRight' ||
+        e.key === 'Enter'
+      ) {
+        e.stopPropagation();
+      }
+
+      if (parent && e.key === 'ArrowLeft') {
+        expanded = false;
+        toggleNode(node);
+      }
+
+      if (parent && e.key === 'ArrowRight') {
+        if (expanded) {
+          ref.lastChild.firstChild.focus();
+        } else {
+          expanded = true;
+          toggleNode(node);
+        }
+      }
+
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        if (disabled) return;
+        expanded = !expanded;
+        toggleNode(node);
+        clickNode(node);
+        ref.focus();
+      }
+    }}"
+    on:focus="{() => {
+      focusNode(node);
+    }}"
+  >
+    <div class:bx--tree-node__label="{true}" bind:this="{refLabel}">
+      <span
+        class:bx--tree-parent-node__toggle="{true}"
+        disabled="{disabled}"
+        on:click="{() => {
+          if (disabled) return;
+          expanded = !expanded;
+          toggleNode(node);
+        }}"
+      >
+        <CaretDown16
+          class="bx--tree-parent-node__toggle-icon {expanded &&
+            'bx--tree-parent-node__toggle-icon--expanded'}"
+        />
+      </span>
+      <span class:bx--tree-node__label__details="{true}">
+        <svelte:component this="{icon}" class="bx--tree-node__icon" />
+        {text}
+      </span>
+    </div>
+    {#if expanded}
+      <ul role="group" class:bx--tree-node__children="{true}">
+        {#each children as child (child.id)}
+          {#if Array.isArray(child.children)}
+            <svelte:self {...child} />
+          {:else}
+            <TreeViewNode leaf {...child} />
+          {/if}
+        {/each}
+      </ul>
+    {/if}
+  </li>
+{/if}

src/TreeView/index.js

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

src/index.js

@@ -126,6 +126,7 @@ export { ToggleSmall, ToggleSmallSkeleton } from "./ToggleSmall";
 export { Tooltip, TooltipFooter } from "./Tooltip";
 export { TooltipDefinition } from "./TooltipDefinition";
 export { TooltipIcon } from "./TooltipIcon";
+export { TreeView } from "./TreeView";
 export { Truncate } from "./Truncate";
 export {
   Header,

types/TreeView/TreeView.d.ts

@@ -0,0 +1,67 @@
+/// <reference types="svelte" />
+import { SvelteComponentTyped } from "svelte";
+
+export type TreeNodeId = string | number;
+
+export interface TreeNode {
+  id: TreeNodeId;
+  text: string;
+  disabled?: boolean;
+}
+
+export interface TreeViewProps
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["ul"]> {
+  /**
+   * Provide an array of children nodes to render
+   * @default []
+   */
+  children?: TreeNode & { children?: TreeNode[] };
+
+  /**
+   * Set the current active node id
+   * Only one node can be active
+   * @default ""
+   */
+  activeId?: TreeNodeId;
+
+  /**
+   * Set to `true` to allow multiple selected nodes
+   * @default false
+   */
+  multiselect?: boolean;
+
+  /**
+   * Set the node ids to be selected
+   * @default []
+   */
+  selectedIds?: TreeNodeIds;
+
+  /**
+   * Specify the TreeView size
+   * @default "default"
+   */
+  size?: "default" | "compact";
+
+  /**
+   * Specify the label text
+   * @default ""
+   */
+  labelText?: string;
+
+  /**
+   * Set to `true` to visually hide the label text
+   * @default false
+   */
+  hideLabel?: boolean;
+}
+
+export default class TreeView extends SvelteComponentTyped<
+  TreeViewProps,
+  {
+    select: CustomEvent<TreeNode & { expanded: boolean; leaf: boolean }>;
+    toggle: CustomEvent<TreeNode & { expanded: boolean; leaf: boolean }>;
+    focus: CustomEvent<TreeNode & { expanded: boolean; leaf: boolean }>;
+    keydown: WindowEventMap["keydown"];
+  },
+  { labelText: {} }
+> {}

types/index.d.ts

@@ -144,6 +144,7 @@ export { default as Tooltip } from "./Tooltip/Tooltip";
 export { default as TooltipFooter } from "./Tooltip/TooltipFooter";
 export { default as TooltipDefinition } from "./TooltipDefinition/TooltipDefinition";
 export { default as TooltipIcon } from "./TooltipIcon/TooltipIcon";
+export { default as TreeView } from "./TreeView/TreeView";
 export { default as Truncate } from "./Truncate/Truncate";
 export { default as Header } from "./UIShell/GlobalHeader/Header";
 export { default as HeaderAction } from "./UIShell/GlobalHeader/HeaderAction";