@budibase/bbui 3.22.2 → 3.22.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "3.22.2",
+  "version": "3.22.4",
   "license": "MPL-2.0",
   "svelte": "src/index.ts",
   "module": "dist/bbui.mjs",
@@ -106,5 +106,5 @@
       }
     }
   },
-  "gitHead": "2ce2457c2573caf5ff70c8e782e9961a4b48feee"
+  "gitHead": "cfc4bc92d83006b473fc2777f9be8b58e0406363"
 }

package/src/Banner/Banner.svelte

@@ -88,13 +88,4 @@
   u {
     font-weight: 600;
   }
-
-  .spectrum-Toast {
-    border-radius: 0px;
-  }
-  .spectrum-Toast-body {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
 </style>

package/src/Form/Core/Picker.svelte

@@ -18,11 +18,13 @@
   import AbsTooltip from "../../Tooltip/AbsTooltip.svelte"
   import { PopoverAlignment } from "../../constants"
   import Search from "./Search.svelte"
+  import PickerIcon from "./PickerIcon.svelte"
+  import type { PickerIconInput, ResolvedIcon } from "../../types/Picker"
 
   export let id: string | undefined = undefined
   export let disabled: boolean = false
   export let fieldText: string = ""
-  export let fieldIcon: string = ""
+  export let fieldIcon: PickerIconInput = undefined
   export let fieldColour: string = ""
   export let isPlaceholder: boolean = false
   export let placeholderOption: string | undefined | boolean = undefined
@@ -72,8 +74,28 @@
 
   const dispatch = createEventDispatcher()
 
-  let button: any
-  let component: any
+  let button: HTMLButtonElement | null = null
+  let component: HTMLUListElement | null = null
+  let optionIconDescriptor: ResolvedIcon | null = null
+
+  const resolveIcon = (icon: PickerIconInput): ResolvedIcon | null => {
+    if (!icon) {
+      return null
+    }
+    if (typeof icon === "object" && icon.component) {
+      return {
+        type: "component",
+        component: icon.component,
+        props: icon.props || {},
+      }
+    }
+    if (typeof icon === "string") {
+      return { type: "string", value: icon }
+    }
+    return null
+  }
+
+  $: resolvedFieldIcon = resolveIcon(fieldIcon)
 
   $: sortedOptions = getSortedOptions(options, getOptionLabel, sort)
   $: filteredOptions = getFilteredOptions(
@@ -136,7 +158,7 @@
 
   $: component?.addEventListener("scroll", onScroll)
   onDestroy(() => {
-    component?.removeEventListener("scroll", null)
+    component?.removeEventListener("scroll", onScroll)
   })
 </script>
 
@@ -150,16 +172,14 @@
   on:click={onClick}
   bind:this={button}
 >
-  {#if fieldIcon}
-    {#if !useOptionIconImage}
-      <span class="option-extra icon">
-        <Icon size="M" name={fieldIcon} />
-      </span>
-    {:else}
-      <span class="option-extra icon field-icon">
-        <img class="icon-dims" src={fieldIcon} alt="icon" />
-      </span>
-    {/if}
+  {#if resolvedFieldIcon}
+    <span
+      class="option-extra icon"
+      class:field-icon={useOptionIconImage &&
+        resolvedFieldIcon.type !== "component"}
+    >
+      <PickerIcon icon={resolvedFieldIcon} {useOptionIconImage} />
+    </span>
   {/if}
   {#if fieldColour}
     <span class="option-extra">
@@ -274,6 +294,11 @@
                 {/if}
               </span>
             {/if}
+            {#if (optionIconDescriptor = resolveIcon(getOptionIcon(option, idx)))}
+              <span class="option-extra icon">
+                <PickerIcon icon={optionIconDescriptor} {useOptionIconImage} />
+              </span>
+            {/if}
             {#if getOptionColour(option, idx)}
               <span class="option-extra">
                 <StatusLight square color={getOptionColour(option, idx)} />
@@ -378,6 +403,9 @@
   .popover-content:not(.auto-width) .spectrum-Menu-itemLabel {
     width: 0;
     flex: 1 1 auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
   .popover-content.auto-width .spectrum-Menu-item {
     padding-right: var(--spacing-xl);

package/src/Form/Core/PickerIcon.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import Icon from "../../Icon/Icon.svelte"
+  import type { ResolvedIcon } from "../../types/Picker"
+
+  export let icon: ResolvedIcon | null = null
+  export let useOptionIconImage: boolean = false
+  export let defaultColour: string = "var(--spectrum-global-color-gray-600)"
+</script>
+
+{#if icon}
+  {#if icon.type === "component"}
+    <svelte:component this={icon.component} {...icon.props} />
+  {:else if useOptionIconImage}
+    <img class="icon-dims" src={icon.value} alt="icon" />
+  {:else}
+    <Icon size="M" color={defaultColour} name={icon.value} />
+  {/if}
+{/if}
+
+<style>
+  .icon-dims {
+    height: 15px;
+    width: auto;
+  }
+</style>

package/src/Menu/Item.svelte

@@ -40,7 +40,6 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <li
   on:click={disabled ? null : onClick}
-  on:auxclick
   class="spectrum-Menu-item"
   class:is-disabled={disabled}
   role="menuitem"

package/src/types/Picker.ts

@@ -0,0 +1,23 @@
+import type { ComponentType } from "svelte"
+
+type ComponentIcon = {
+  type: "component"
+  component: ComponentType
+  props?: Record<string, unknown>
+}
+
+type StringIcon = {
+  type: "string"
+  value: string
+}
+
+export type ResolvedIcon = ComponentIcon | StringIcon
+
+export type PickerIconInput =
+  | string
+  | {
+      component: ComponentType
+      props?: Record<string, unknown>
+    }
+  | null
+  | undefined