@budibase/bbui 2.3.18-alpha.13 → 2.3.18-alpha.15

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "2.3.18-alpha.13",
+  "version": "2.3.18-alpha.15",
   "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": "2.3.18-alpha.13",
+    "@budibase/string-templates": "2.3.18-alpha.15",
     "@spectrum-css/accordion": "3.0.24",
     "@spectrum-css/actionbutton": "1.0.1",
     "@spectrum-css/actiongroup": "1.0.1",
@@ -89,5 +89,5 @@
   "resolutions": {
     "loader-utils": "1.4.1"
   },
-  "gitHead": "95ce3bb56c8db6b69b3b9081c0eeb0fff5180518"
+  "gitHead": "78287e11da6973374962afac59b35c598a54efc3"
 }

package/src/Form/Core/Multiselect.svelte

@@ -14,6 +14,8 @@
   export let autocomplete = false
   export let sort = false
   export let autoWidth = false
+  export let fetchTerm = null
+  export let customPopoverHeight
 
   const dispatch = createEventDispatcher()
 
@@ -83,10 +85,12 @@
   {options}
   isPlaceholder={!value?.length}
   {autocomplete}
+  bind:fetchTerm
   {isOptionSelected}
   {getOptionLabel}
   {getOptionValue}
   onSelectOption={toggleOption}
   {sort}
   {autoWidth}
+  {customPopoverHeight}
 />

package/src/Form/Core/Picker.svelte

@@ -31,7 +31,8 @@
   export let autoWidth = false
   export let autocomplete = false
   export let sort = false
-
+  export let fetchTerm = null
+  export let customPopoverHeight
   const dispatch = createEventDispatcher()
 
   let searchTerm = null
@@ -71,7 +72,7 @@
   }
 
   const getFilteredOptions = (options, term, getLabel) => {
-    if (autocomplete && term) {
+    if (autocomplete && term && !fetchTerm) {
       const lowerCaseTerm = term.toLowerCase()
       return options.filter(option => {
         return `${getLabel(option)}`.toLowerCase().includes(lowerCaseTerm)
@@ -136,6 +137,7 @@
   on:close={() => (open = false)}
   useAnchorWidth={!autoWidth}
   maxWidth={autoWidth ? 400 : null}
+  customHeight={customPopoverHeight}
 >
   <div
     class="popover-content"
@@ -144,8 +146,9 @@
   >
     {#if autocomplete}
       <Search
-        value={searchTerm}
-        on:change={event => (searchTerm = event.detail)}
+        value={fetchTerm ? fetchTerm : searchTerm}
+        on:change={event =>
+          fetchTerm ? (fetchTerm = event.detail) : (searchTerm = event.detail)}
         {disabled}
         placeholder="Search"
       />
@@ -247,7 +250,7 @@
   }
   .popover-content.auto-width .spectrum-Menu-itemLabel {
     white-space: nowrap;
-    overflow: hidden;
+    overflow: none;
     text-overflow: ellipsis;
   }
   .popover-content:not(.auto-width) .spectrum-Menu-itemLabel {

package/src/Form/Multiselect.svelte

@@ -15,6 +15,10 @@
   export let getOptionValue = option => option
   export let sort = false
   export let autoWidth = false
+  export let autocomplete = false
+  export let fetchTerm = null
+  export let customPopoverHeight
+
   const dispatch = createEventDispatcher()
   const onChange = e => {
     value = e.detail
@@ -34,6 +38,9 @@
     {getOptionLabel}
     {getOptionValue}
     {autoWidth}
+    {autocomplete}
+    {customPopoverHeight}
+    bind:fetchTerm
     on:change={onChange}
     on:click
   />

package/src/Form/Select.svelte

@@ -20,6 +20,8 @@
   export let autoWidth = false
   export let sort = false
   export let tooltip = ""
+  export let autocomplete = false
+  export let customPopoverHeight
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -51,6 +53,8 @@
     {getOptionIcon}
     {getOptionColour}
     {isOptionEnabled}
+    {autocomplete}
+    {customPopoverHeight}
     on:change={onChange}
     on:click
   />

package/src/Popover/Popover.svelte

@@ -18,6 +18,7 @@
   export let useAnchorWidth = false
   export let dismissible = true
   export let offset = 5
+  export let customHeight
 
   $: target = portalTarget || getContext(Context.PopoverRoot) || ".spectrum"
 
@@ -74,6 +75,7 @@
       on:keydown={handleEscape}
       class="spectrum-Popover is-open"
       role="presentation"
+      style="height: {customHeight}"
       transition:fly|local={{ y: -20, duration: 200 }}
     >
       <slot />