@budibase/bbui 3.36.1 → 3.36.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "3.36.1",
+  "version": "3.36.3",
   "license": "MPL-2.0",
   "module": "dist/bbui.mjs",
   "exports": {
@@ -103,5 +103,5 @@
       }
     }
   },
-  "gitHead": "7a83e0e9dc810a0a6e41b006b8a6f26c749c75c0"
+  "gitHead": "6a1af9e82701e0341177e290c6bc695663e2d8e4"
 }

package/src/TreeView/Item.svelte

@@ -1,28 +1,94 @@
 <script lang="ts">
+  import { createEventDispatcher, getContext } from "svelte"
+  import { writable } from "svelte/store"
   import Icon from "../Icon/Icon.svelte"
+  import type { TreeViewContext } from "./context"
 
   export let selected: boolean = false
+  export let disabled: boolean = false
   export let open: boolean = false
   export let href: string | null = null
   export let title: string
-  export let icon: string | undefined
+  export let icon: string | undefined = undefined
+  export let hasChildren: boolean = false
+
+  const treeViewContext = getContext<TreeViewContext | undefined>(
+    "bbui-treeview"
+  ) || {
+    selectable: writable(false),
+    quiet: writable(false),
+  }
+
+  const quietStore = treeViewContext.quiet
+  const dispatch = createEventDispatcher<{ toggle: boolean; select: boolean }>()
+
+  $: isQuiet = !!$quietStore
+  $: if (!hasChildren) {
+    open = false
+  }
+
+  const toggleOpen = (event: MouseEvent) => {
+    event.preventDefault()
+    event.stopPropagation()
+    if (!hasChildren) {
+      return
+    }
+    open = !open
+    dispatch("toggle", open)
+  }
+
+  const handleIndicatorKeydown = (event: KeyboardEvent) => {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault()
+      if (!hasChildren) {
+        return
+      }
+      open = !open
+      dispatch("toggle", open)
+    }
+  }
 </script>
 
 <li
-  class:is-selected={selected}
-  class:is-open={open}
+  class:is-selected={selected && !isQuiet}
+  class:is-open={hasChildren && open}
   class="spectrum-TreeView-item"
+  class:is-disabled={disabled}
 >
-  <a on:click class="spectrum-TreeView-itemLink" {href}>
-    {#if $$slots.default}
-      <Icon name="caret-right" size="M" />
+  <a
+    on:click
+    class:spectrum-TreeView-itemLink--selectable={!disabled}
+    class="spectrum-TreeView-itemLink"
+    {href}
+  >
+    {#if hasChildren}
+      <span
+        class="spectrum-TreeView-itemIndicator"
+        role="button"
+        tabindex="0"
+        on:click={toggleOpen}
+        on:keydown={handleIndicatorKeydown}
+      >
+        <Icon name="caret-right" size="M" />
+      </span>
     {/if}
+
     {#if icon}
-      <Icon name={icon} size="M" />
+      <span class="spectrum-TreeView-itemIcon">
+        <Icon name={icon} size="M" />
+      </span>
     {/if}
+
     <span class="spectrum-TreeView-itemLabel">{title}</span>
+
+    {#if $$slots.post}
+      <span class="item-post">
+        <slot name="post" />
+      </span>
+    {/if}
   </a>
-  {#if $$slots.default}
+
+  {#if hasChildren && $$slots.default}
     <ul class="spectrum-TreeView">
       <slot />
     </ul>
@@ -30,4 +96,28 @@
 </li>
 
 <style>
+  .item-post {
+    margin-inline-start: auto;
+    padding-inline-end: 8px;
+    white-space: nowrap;
+  }
+
+  .item-post :global(.spectrum-StatusLight) {
+    margin: 0;
+  }
+
+  .spectrum-TreeView-itemIndicator :global(i) {
+    font-size: 12px;
+  }
+
+  .spectrum-TreeView-itemLink--selectable .spectrum-TreeView-itemIndicator {
+    inset-inline-start: 0;
+    inset-block-start: 0;
+    margin-inline-start: 0;
+    margin-inline-end: var(--spacing-xs);
+    margin-block-end: 0;
+    padding-inline: 0;
+    padding-block: 0;
+    flex-shrink: 0;
+  }
 </style>

package/src/TreeView/Tree.svelte

@@ -1,9 +1,19 @@
 <script lang="ts">
+  import { setContext } from "svelte"
+  import { writable } from "svelte/store"
   import "@spectrum-css/treeview/dist/index-vars.css"
+  import type { TreeViewContext } from "./context"
 
   export let quiet: boolean = false
   export let standalone: boolean = true
   export let width: string = "250px"
+
+  const treeViewContext: TreeViewContext = {
+    quiet: writable(quiet),
+  }
+  setContext("bbui-treeview", treeViewContext)
+
+  $: treeViewContext.quiet.set(quiet)
 </script>
 
 <ul

package/src/TreeView/context.ts

@@ -0,0 +1,5 @@
+import type { Writable } from "svelte/store"
+
+export interface TreeViewContext {
+  quiet: Writable<boolean>
+}