@budibase/bbui 3.30.6 → 3.31.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "3.30.6",
+  "version": "3.31.1",
   "license": "MPL-2.0",
   "module": "dist/bbui.mjs",
   "exports": {
@@ -107,5 +107,5 @@
       }
     }
   },
-  "gitHead": "6d2d5bab2cce9bedc76be7481e8222311967f107"
+  "gitHead": "9de72ce9dd1c290eb3d16fd22693192923f46f06"
 }

package/src/Form/Core/Picker.svelte

@@ -48,6 +48,8 @@
     option?.colour ?? undefined
   export let getOptionSubtitle = (option: O, _index?: number) =>
     option?.subtitle ?? undefined
+  export let getOptionTooltip = (option: O, _index?: number) =>
+    option?.tooltip ?? undefined
   export let useOptionIconImage = false
   export let open: boolean = false
   export let readonly: boolean = false
@@ -77,6 +79,7 @@
   export let toggleSelectAll: () => void = () => {}
   export let hideChevron: boolean = false
   export let wrapText: boolean = false
+  export let fieldTooltip: string | null = null
 
   const maxHeight = 360
   const VIRTUALIZATION_THRESHOLD = 200
@@ -257,6 +260,7 @@
     class:auto-width={autoWidth}
     class:has-subtitle={!!fieldSubtitle}
     class:wrap-text={wrapText}
+    title={fieldTooltip}
   >
     <span class="picker-label-text">{fieldText}</span>
     {#if fieldSubtitle}
@@ -351,6 +355,7 @@
           ></li>
         {/if}
         {#each virtualizedOptions as { option, idx } (getOptionValue(option, idx) ?? idx)}
+          {@const optionTooltip = getOptionTooltip(option, idx)}
           {@const optionIcon = resolveIcon(getOptionIcon(option, idx))}
           <li
             class="spectrum-Menu-item"
@@ -362,6 +367,7 @@
             on:mouseenter={e => onOptionMouseenter(e, option)}
             on:mouseleave={e => onOptionMouseleave(e, option)}
             class:is-disabled={!isOptionEnabled(option)}
+            title={optionTooltip ?? undefined}
           >
             {#if optionIcon}
               <span class="option-extra icon">

package/src/Form/Core/Select.svelte

@@ -22,6 +22,8 @@
     option?.colour ?? undefined
   export let getOptionSubtitle = (option: O, _index?: number) =>
     option?.subtitle ?? undefined
+  export let getOptionTooltip = (option: O, _index?: number) =>
+    option?.tooltip ?? undefined
   export let showSelectedSubtitle: boolean = false
   export let compare = (option: O, value: V) => option === value
   export let useOptionIconImage = false
@@ -55,6 +57,10 @@
   $: fieldSubtitle = showSelectedSubtitle
     ? getFieldAttribute(getOptionSubtitle, value, options)
     : null
+  $: fieldTooltip =
+    value == null || value === ""
+      ? null
+      : getFieldAttribute(getOptionTooltip, value, options)
   $: fieldIcon = getFieldAttribute(getOptionIcon, value, options)
   $: fieldColour = getFieldAttribute(getOptionColour, value, options)
 
@@ -124,6 +130,7 @@
   {getOptionIcon}
   {getOptionColour}
   {getOptionSubtitle}
+  {getOptionTooltip}
   {useOptionIconImage}
   {isOptionEnabled}
   {tooltipMessage}
@@ -141,5 +148,6 @@
   {customPopoverHeight}
   {searchPlaceholder}
   {hideChevron}
+  {fieldTooltip}
   {wrapText}
 />

package/src/Form/Select.svelte

@@ -19,6 +19,8 @@
     extractProperty(option, "value")
   export let getOptionSubtitle = (option: O, _index?: number) =>
     (option as any)?.subtitle
+  export let getOptionTooltip = (option: O, _index?: number) =>
+    (option as any)?.tooltip
   export let showSelectedSubtitle = false
   export let getOptionIcon = (option: O, _index?: number) =>
     (option as any)?.icon
@@ -94,6 +96,7 @@
     {getOptionIcon}
     {getOptionColour}
     {getOptionSubtitle}
+    {getOptionTooltip}
     {showSelectedSubtitle}
     {useOptionIconImage}
     {isOptionEnabled}