@budibase/bbui 2.15.3 → 2.15.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "2.15.3",
+  "version": "2.15.6",
   "license": "MPL-2.0",
   "svelte": "src/index.js",
   "module": "dist/bbui.es.js",
@@ -36,8 +36,8 @@
   ],
   "dependencies": {
     "@adobe/spectrum-css-workflow-icons": "1.2.1",
-    "@budibase/shared-core": "2.15.3",
-    "@budibase/string-templates": "2.15.3",
+    "@budibase/shared-core": "2.15.6",
+    "@budibase/string-templates": "2.15.6",
     "@spectrum-css/accordion": "3.0.24",
     "@spectrum-css/actionbutton": "1.0.1",
     "@spectrum-css/actiongroup": "1.0.1",
@@ -104,5 +104,5 @@
       }
     }
   },
-  "gitHead": "e52a4ce7fe4dbe0f7bbd5df7eaeef059fbc62111"
+  "gitHead": "307969d67826806a587a318f36266c9f3a33391e"
 }

package/src/Actions/position_dropdown.js

@@ -18,7 +18,6 @@ export default function positionDropdown(element, opts) {
       useAnchorWidth,
       offset = 5,
       customUpdate,
-      offsetBelow,
     } = opts
     if (!anchor) {
       return
@@ -48,7 +47,7 @@ export default function positionDropdown(element, opts) {
         styles.top = anchorBounds.top - elementBounds.height - offset
         styles.maxHeight = maxHeight || 240
       } else {
-        styles.top = anchorBounds.bottom + (offsetBelow || offset)
+        styles.top = anchorBounds.bottom + offset
         styles.maxHeight =
           maxHeight || window.innerHeight - anchorBounds.bottom - 20
       }

package/src/Form/Core/Multiselect.svelte

@@ -15,8 +15,6 @@
   export let autoWidth = false
   export let searchTerm = null
   export let customPopoverHeight
-  export let customPopoverOffsetBelow
-  export let customPopoverMaxHeight
   export let open = false
   export let loading
 
@@ -98,7 +96,5 @@
   {sort}
   {autoWidth}
   {customPopoverHeight}
-  {customPopoverOffsetBelow}
-  {customPopoverMaxHeight}
   {loading}
 />

package/src/Form/Core/Picker.svelte

@@ -37,8 +37,6 @@
   export let sort = false
   export let searchTerm = null
   export let customPopoverHeight
-  export let customPopoverOffsetBelow
-  export let customPopoverMaxHeight
   export let align = "left"
   export let footer = null
   export let customAnchor = null
@@ -156,9 +154,7 @@
   on:close={() => (open = false)}
   useAnchorWidth={!autoWidth}
   maxWidth={autoWidth ? 400 : null}
-  maxHeight={customPopoverMaxHeight}
   customHeight={customPopoverHeight}
-  offsetBelow={customPopoverOffsetBelow}
 >
   <div
     class="popover-content"

package/src/Form/Core/Select.svelte

@@ -12,6 +12,7 @@
   export let getOptionIcon = () => null
   export let getOptionColour = () => null
   export let getOptionSubtitle = () => null
+  export let compare = null
   export let useOptionIconImage = false
   export let isOptionEnabled
   export let readonly = false
@@ -23,8 +24,6 @@
   export let footer = null
   export let open = false
   export let tag = null
-  export let customPopoverOffsetBelow
-  export let customPopoverMaxHeight
   export let searchTerm = null
   export let loading
 
@@ -34,13 +33,19 @@
   $: fieldIcon = getFieldAttribute(getOptionIcon, value, options)
   $: fieldColour = getFieldAttribute(getOptionColour, value, options)
 
+  function compareOptionAndValue(option, value) {
+    return typeof compare === "function"
+      ? compare(option, value)
+      : option === value
+  }
+
   const getFieldAttribute = (getAttribute, value, options) => {
     // Wait for options to load if there is a value but no options
     if (!options?.length) {
       return ""
     }
-    const index = options.findIndex(
-      (option, idx) => getOptionValue(option, idx) === value
+    const index = options.findIndex((option, idx) =>
+      compareOptionAndValue(getOptionValue(option, idx), value)
     )
     return index !== -1 ? getAttribute(options[index], index) : null
   }
@@ -90,11 +95,9 @@
   {autocomplete}
   {sort}
   {tag}
-  {customPopoverOffsetBelow}
-  {customPopoverMaxHeight}
   isPlaceholder={value == null || value === ""}
   placeholderOption={placeholder === false ? null : placeholder}
-  isOptionSelected={option => option === value}
+  isOptionSelected={option => compareOptionAndValue(option, value)}
   onSelectOption={selectOption}
   {loading}
 />

package/src/Form/Select.svelte

@@ -28,6 +28,7 @@
   export let footer = null
   export let tag = null
   export let helpText = null
+  export let compare
   const dispatch = createEventDispatcher()
   const onChange = e => {
     value = e.detail
@@ -65,6 +66,7 @@
     {autocomplete}
     {customPopoverHeight}
     {tag}
+    {compare}
     on:change={onChange}
     on:click
   />

package/src/Popover/Popover.svelte

@@ -18,7 +18,6 @@
   export let useAnchorWidth = false
   export let dismissible = true
   export let offset = 5
-  export let offsetBelow
   export let customHeight
   export let animate = true
   export let customZindex
@@ -89,7 +88,6 @@
         maxWidth,
         useAnchorWidth,
         offset,
-        offsetBelow,
         customUpdate: handlePostionUpdate,
       }}
       use:clickOutside={{