@budibase/bbui 3.31.9 → 3.32.1

package/package.json

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

package/src/Form/Core/Combobox.svelte

@@ -7,7 +7,7 @@
   import "@spectrum-css/menu/dist/index-vars.css"
   import "@spectrum-css/popover/dist/index-vars.css"
   import { createEventDispatcher } from "svelte"
-  import type { ChangeEventHandler } from "svelte/elements"
+  import type { FormEventHandler } from "svelte/elements"
   import clickOutside from "../../Actions/clickOutside"
   import { PopoverAlignment } from "../../constants"
   import Icon from "../../Icon/Icon.svelte"
@@ -32,16 +32,34 @@
   let open = false
   let focus = false
   let anchor
+  let query = ""
+  const normalizeForSearch = (value: unknown): string => {
+    if (value === null || value === undefined) {
+      return ""
+    }
+    return String(value).toLowerCase()
+  }
+
+  $: query = value || ""
+  $: filteredOptions =
+    !query.trim() || !options?.length
+      ? options
+      : options.filter(option => {
+          const optionLabel = normalizeForSearch(getOptionLabel(option))
+          const optionValue = normalizeForSearch(getOptionValue(option))
+          const search = normalizeForSearch(query)
+          return optionLabel.includes(search) || optionValue.includes(search)
+        })
 
-  const selectOption = (value: string) => {
+  const selectOption = (value: string, shouldClose = true) => {
     dispatch("change", value)
-    open = false
+    open = !shouldClose
   }
 
-  const onType: ChangeEventHandler<HTMLInputElement> = e => {
+  const onType: FormEventHandler<HTMLInputElement> = e => {
     const value = e.currentTarget.value
     dispatch("type", value)
-    selectOption(value)
+    selectOption(value, false)
   }
 
   const onPick = (value: string) => {
@@ -69,7 +87,7 @@
         focus = false
         dispatch("blur")
       }}
-      on:change={onType}
+      on:input={onType}
       value={value || ""}
       placeholder={placeholder || ""}
       {disabled}
@@ -103,8 +121,8 @@
     }}
   >
     <ul class="spectrum-Menu" role="listbox">
-      {#if options && Array.isArray(options)}
-        {#each options as option}
+      {#if filteredOptions && Array.isArray(filteredOptions) && filteredOptions.length}
+        {#each filteredOptions as option}
           <li
             class="spectrum-Menu-item"
             class:is-selected={getOptionValue(option) === value}
@@ -120,6 +138,8 @@
             </div>
           </li>
         {/each}
+      {:else}
+        <li class="spectrum-Menu-item empty">No results</li>
       {/if}
     </ul>
   </div>
@@ -139,6 +159,11 @@
   .check {
     display: none;
   }
+
+  .empty {
+    opacity: 0.7;
+    cursor: default;
+  }
   li.is-selected .check {
     display: block;
   }

package/src/Form/Core/Picker.svelte

@@ -287,6 +287,9 @@
     class="popover-content"
     class:auto-width={autoWidth}
     class:wrap-text={wrapText}
+    class:size-s={size === "S"}
+    class:size-m={size === "M"}
+    class:size-l={size === "L"}
     use:clickOutside={() => {
       open = false
     }}
@@ -597,6 +600,18 @@
     color: var(--spectrum-global-color-gray-600);
     font-weight: 500;
   }
+  .spectrum-Picker--sizeL
+    .spectrum-Picker-label.has-subtitle
+    .picker-label-text,
+  .spectrum-Picker--sizeL .picker-label-subtitle {
+    font-size: 14px;
+    line-height: 18px;
+  }
+  .popover-content.size-l .spectrum-Menu-itemLabel,
+  .popover-content.size-l .subtitle-text {
+    font-size: 14px;
+    line-height: 18px;
+  }
 
   .select-all-item {
     border-bottom: 1px solid var(--spectrum-global-color-gray-200);

package/src/Form/Select.svelte

@@ -50,6 +50,7 @@
   export let loading: boolean | undefined = false
   export let searchPlaceholder: string | undefined = undefined
   export let hideChevron: boolean = false
+  export let wrapText: boolean = false
   export let required: boolean = false
   export let description: string | undefined = undefined
 
@@ -107,6 +108,7 @@
     {onOptionMouseleave}
     {tooltipMessage}
     {searchPlaceholder}
+    {wrapText}
     on:change={onChange}
     on:click
   />