@budibase/bbui 3.13.12 → 3.13.13

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "3.13.12",
+  "version": "3.13.13",
   "license": "MPL-2.0",
   "svelte": "src/index.ts",
   "module": "dist/bbui.mjs",
@@ -106,5 +106,5 @@
       }
     }
   },
-  "gitHead": "fc4f6a024f4bd3a9cb8af3f292ce0c783a4331a3"
+  "gitHead": "12d0bfb1846c841fb2043159bfadc99b4424ae09"
 }

package/src/Form/Core/Multiselect.svelte

@@ -4,9 +4,10 @@
 
 <script lang="ts">
   import Picker from "./Picker.svelte"
+  import type { Primitive } from "@budibase/types"
   import { createEventDispatcher } from "svelte"
 
-  export let value: string[] = []
+  export let value: Primitive[] = []
   export let id: string | undefined = undefined
   export let placeholder: string | null = null
   export let disabled: boolean = false
@@ -36,7 +37,7 @@
   $: toggleOption = makeToggleOption(selectedLookupMap, arrayValue)
 
   const getFieldText = (
-    value: string[],
+    value: Primitive[],
     map: Record<string, any> | null,
     placeholder: string | null
   ) => {
@@ -44,19 +45,25 @@
       if (!map) {
         return ""
       }
-      const vals = value.map(option => map[option] || option).join(", ")
+      const vals = value
+        .map(v => {
+          const str = typeof v === "string" ? v : v.toString()
+          return map[str] || v
+        })
+        .join(", ")
       return `(${value.length}) ${vals}`
     } else {
       return placeholder || "Choose some options"
     }
   }
 
-  const getSelectedLookupMap = (value: string[]) => {
+  const getSelectedLookupMap = (value: Primitive[]) => {
     const map: Record<string, boolean> = {}
     if (Array.isArray(value) && value.length > 0) {
-      value.forEach(option => {
-        if (option) {
-          map[option] = true
+      value.forEach(v => {
+        if (v) {
+          const str = typeof v === "string" ? v : v.toString()
+          map[str] = true
         }
       })
     }
@@ -78,10 +85,16 @@
     return map
   }
 
-  const makeToggleOption = (map: Record<string, boolean>, value: string[]) => {
+  const makeToggleOption = (
+    map: Record<string, boolean>,
+    value: Primitive[]
+  ) => {
     return (optionValue: string) => {
       if (map[optionValue]) {
-        const filtered = value.filter(option => option !== optionValue)
+        // comparison needs to take into account different types, always compare them as strings
+        const filtered = value.filter(
+          option => option.toString() !== optionValue.toString()
+        )
         dispatch("change", filtered)
       } else {
         dispatch("change", [...value, optionValue])

package/src/Form/Core/Picker.svelte

@@ -316,7 +316,6 @@
   /* Icon and colour alignment */
   .check {
     display: none;
-    margin-right: -8px;
     padding-left: 8px;
   }
   li.is-selected .check {
@@ -335,7 +334,7 @@
   }
   .popover-content.auto-width .spectrum-Menu-itemLabel {
     white-space: nowrap;
-    overflow: none;
+    overflow: hidden;
     text-overflow: ellipsis;
   }
   .popover-content:not(.auto-width) .spectrum-Menu-itemLabel {