@budibase/bbui 3.23.17 → 3.23.19

package/package.json

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

package/src/Form/Combobox.svelte

@@ -1,36 +1,59 @@
-<script>
-  import Field from "./Field.svelte"
-  import Combobox from "./Core/Combobox.svelte"
+<script lang="ts" generics="O">
   import { createEventDispatcher } from "svelte"
 
-  export let value = null
-  export let label = undefined
+  import Combobox from "./Core/Combobox.svelte"
+  import Field from "./Field.svelte"
+  import type { LabelPosition } from "../types"
+
+  export let value: string | undefined = undefined
+  export let label: string | undefined = undefined
   export let disabled = false
   export let readonly = false
-  export let labelPosition = "above"
-  export let error = null
+  export let labelPosition: LabelPosition = "above"
+  export let error: string | undefined | false = undefined
   export let placeholder = "Choose an option or type"
-  export let options = []
-  export let helpText = null
-  export let getOptionLabel = option => extractProperty(option, "label")
-  export let getOptionValue = option => extractProperty(option, "value")
-
-  const dispatch = createEventDispatcher()
-  const onChange = e => {
-    value = e.detail
-    dispatch("change", e.detail)
-  }
-  const extractProperty = (value, property) => {
-    if (value && typeof value === "object") {
-      return value[property]
+  export let options: O[] = []
+  export let helpText: string | undefined = undefined
+  const extractProperty = (item: O, property: string): string => {
+    if (item && typeof item === "object" && property in item) {
+      const record = item as Record<string, unknown>
+      const extracted = record[property]
+      if (typeof extracted === "string") {
+        return extracted
+      }
+      if (typeof extracted === "number" || typeof extracted === "boolean") {
+        return String(extracted)
+      }
+      return ""
+    }
+
+    if (item === null || item === undefined) {
+      return ""
     }
-    return value
+
+    return String(item)
+  }
+
+  const defaultGetOptionLabel = (item: O) => extractProperty(item, "label")
+  const defaultGetOptionValue = (item: O) => extractProperty(item, "value")
+
+  type OptionFormatter = (_option: O) => string
+
+  export let getOptionLabel: OptionFormatter = defaultGetOptionLabel
+  export let getOptionValue: OptionFormatter = defaultGetOptionValue
+
+  const dispatch = createEventDispatcher<{
+    change: string | undefined
+  }>()
+
+  const onChange = (event: CustomEvent<string | undefined>) => {
+    value = event.detail
+    dispatch("change", event.detail)
   }
 </script>
 
 <Field {helpText} {label} {labelPosition} {error}>
   <Combobox
-    {error}
     {disabled}
     {value}
     {options}

package/src/Form/Core/Picker.svelte

@@ -71,6 +71,7 @@
   export let indeterminate: boolean = false
   export let allSelected: boolean = false
   export let toggleSelectAll: () => void = () => {}
+  export let hideChevron: boolean = false
 
   const dispatch = createEventDispatcher()
 
@@ -193,7 +194,9 @@
   >
     {fieldText}
   </span>
-  <Icon name="caret-down" size="S" />
+  {#if !hideChevron}
+    <Icon name="caret-down" size="S" />
+  {/if}
 </button>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -265,7 +268,7 @@
         </li>
       {/if}
       {#if filteredOptions.length}
-        {#each filteredOptions as option, idx}
+        {#each filteredOptions as option, idx (getOptionValue(option, idx) ?? idx)}
           <li
             class="spectrum-Menu-item"
             class:is-selected={isOptionSelected(getOptionValue(option, idx))}

package/src/Form/Core/Select.svelte

@@ -42,6 +42,7 @@
   export let onOptionMouseenter = () => {}
   export let onOptionMouseleave = () => {}
   export let customPopoverHeight: string | undefined = undefined
+  export let hideChevron: boolean = false
 
   const dispatch = createEventDispatcher()
 
@@ -127,4 +128,5 @@
   onSelectOption={selectOption}
   {loading}
   {customPopoverHeight}
+  {hideChevron}
 />

package/src/Form/Select.svelte

@@ -43,6 +43,7 @@
   export let onOptionMouseenter = () => {}
   export let onOptionMouseleave = () => {}
   export let loading: boolean | undefined = false
+  export let hideChevron: boolean = false
 
   const dispatch = createEventDispatcher()
   const onChange = (e: CustomEvent<any>) => {
@@ -71,6 +72,7 @@
     {sort}
     {align}
     {footer}
+    {hideChevron}
     {getOptionLabel}
     {getOptionValue}
     {getOptionIcon}