@budibase/bbui 1.1.32-alpha.2 → 1.1.32-alpha.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "1.1.32-alpha.2",
+  "version": "1.1.32-alpha.3",
   "license": "MPL-2.0",
   "svelte": "src/index.js",
   "module": "dist/bbui.es.js",
@@ -38,7 +38,7 @@
   ],
   "dependencies": {
     "@adobe/spectrum-css-workflow-icons": "^1.2.1",
-    "@budibase/string-templates": "1.1.32-alpha.2",
+    "@budibase/string-templates": "1.1.32-alpha.3",
     "@spectrum-css/actionbutton": "^1.0.1",
     "@spectrum-css/actiongroup": "^1.0.1",
     "@spectrum-css/avatar": "^3.0.2",
@@ -85,5 +85,5 @@
     "svelte-flatpickr": "^3.2.3",
     "svelte-portal": "^1.0.0"
   },
-  "gitHead": "ec8c17db7d93b365efa683cc511c15648e9d5928"
+  "gitHead": "1b7322e51adc38e71f59caa2daf057304df07771"
 }

package/src/Form/Core/InputDropdown.svelte

@@ -115,6 +115,16 @@
     class:is-disabled={disabled}
     class:is-focused={focus}
   >
+    {#if error}
+      <svg
+        class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon"
+        focusable="false"
+        aria-hidden="true"
+      >
+        <use xlink:href="#spectrum-icon-18-Alert" />
+      </svg>
+    {/if}
+
     <input
       {id}
       on:click

package/src/Form/Core/PickerDropdown.svelte

@@ -8,6 +8,7 @@
   import Icon from "../../Icon/Icon.svelte"
   import StatusLight from "../../StatusLight/StatusLight.svelte"
   import Detail from "../../Typography/Detail.svelte"
+  import Search from "./Search.svelte"
 
   export let primaryLabel = ""
   export let primaryValue = null
@@ -22,7 +23,6 @@
   export let secondaryFieldText = ""
   export let secondaryFieldIcon = ""
   export let secondaryFieldColour = ""
-  export let getPrimaryOptionLabel = option => option
   export let getPrimaryOptionValue = option => option
   export let getPrimaryOptionColour = () => null
   export let getPrimaryOptionIcon = () => null
@@ -43,17 +43,12 @@
   let searchTerm = null
 
   $: groupTitles = Object.keys(primaryOptions)
-  $: filteredOptions = getFilteredOptions(
-    primaryOptions,
-    searchTerm,
-    getPrimaryOptionLabel
-  )
   let iconData
-  /*
-  $: iconData = primaryOptions?.find(x => {
-    return x.name === primaryFieldText
-  })
-  */
+
+  const updateSearch = e => {
+    dispatch("search", e.detail)
+  }
+
   const updateValue = newValue => {
     if (readonly) {
       return
@@ -107,16 +102,6 @@
       updateValue(event.target.value)
     }
   }
-
-  const getFilteredOptions = (options, term, getLabel) => {
-    if (autocomplete && term) {
-      const lowerCaseTerm = term.toLowerCase()
-      return options.filter(option => {
-        return `${getLabel(option)}`.toLowerCase().includes(lowerCaseTerm)
-      })
-    }
-    return options
-  }
 </script>
 
 <div
@@ -183,6 +168,15 @@
       class:auto-width={autoWidth}
       class:is-full-width={!secondaryOptions.length}
     >
+      {#if autocomplete}
+        <Search
+          value={searchTerm}
+          on:change={event => updateSearch(event)}
+          {disabled}
+          placeholder="Search"
+        />
+      {/if}
+
       <ul class="spectrum-Menu" role="listbox">
         {#if placeholderOption}
           <li

package/src/Form/PickerDropdown.svelte

@@ -26,6 +26,7 @@
   export let autofocus
   export let primaryOptions = []
   export let secondaryOptions = []
+  export let searchTerm
 
   let primaryLabel
   let secondaryLabel
@@ -87,10 +88,15 @@
     }
     return value
   }
+
+  const updateSearchTerm = e => {
+    searchTerm = e.detail
+  }
 </script>
 
 <Field {label} {labelPosition} {error}>
   <PickerDropdown
+    {searchTerm}
     {autocomplete}
     {dataCy}
     {updateOnChange}
@@ -116,6 +122,7 @@
     {secondaryLabel}
     on:pickprimary={onPickPrimary}
     on:picksecondary={onPickSecondary}
+    on:search={updateSearchTerm}
     on:click
     on:input
     on:blur