@budibase/bbui 2.23.0 → 2.23.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "2.23.0",
+  "version": "2.23.2",
   "license": "MPL-2.0",
   "svelte": "src/index.js",
   "module": "dist/bbui.es.js",
@@ -35,8 +35,8 @@
   ],
   "dependencies": {
     "@adobe/spectrum-css-workflow-icons": "1.2.1",
-    "@budibase/shared-core": "2.23.0",
-    "@budibase/string-templates": "2.23.0",
+    "@budibase/shared-core": "2.23.2",
+    "@budibase/string-templates": "2.23.2",
     "@spectrum-css/accordion": "3.0.24",
     "@spectrum-css/actionbutton": "1.0.1",
     "@spectrum-css/actiongroup": "1.0.1",
@@ -103,5 +103,5 @@
       }
     }
   },
-  "gitHead": "2c4277877da1c0053f7e41ea7156758a1ef844a4"
+  "gitHead": "af9ebd252bc5d907ea71d45f696e0eb05a803dbe"
 }

package/src/Form/Core/Combobox.svelte

@@ -4,6 +4,7 @@
   import "@spectrum-css/menu/dist/index-vars.css"
   import { createEventDispatcher } from "svelte"
   import clickOutside from "../../Actions/click_outside"
+  import Popover from "../../Popover/Popover.svelte"
 
   export let value = null
   export let id = null
@@ -15,8 +16,10 @@
   export let getOptionValue = option => option
 
   const dispatch = createEventDispatcher()
+
   let open = false
   let focus = false
+  let anchor
 
   const selectOption = value => {
     dispatch("change", value)
@@ -35,11 +38,11 @@
   }
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
   class="spectrum-InputGroup"
   class:is-focused={open || focus}
   class:is-disabled={disabled}
+  bind:this={anchor}
 >
   <div
     class="spectrum-Textfield spectrum-InputGroup-textfield"
@@ -67,7 +70,7 @@
     tabindex="-1"
     aria-haspopup="true"
     {disabled}
-    on:click={() => (open = true)}
+    on:click={() => (open = !open)}
   >
     <svg
       class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon spectrum-InputGroup-icon"
@@ -77,42 +80,44 @@
       <use xlink:href="#spectrum-css-icon-Chevron100" />
     </svg>
   </button>
-  {#if open}
-    <div
-      class="spectrum-Popover spectrum-Popover--bottom is-open"
-      use:clickOutside={() => {
-        open = false
-      }}
-    >
-      <ul class="spectrum-Menu" role="listbox">
-        {#if options && Array.isArray(options)}
-          {#each options as option}
-            <li
-              class="spectrum-Menu-item"
-              class:is-selected={getOptionValue(option) === value}
-              role="option"
-              aria-selected="true"
-              tabindex="0"
-              on:click={() => onPick(getOptionValue(option))}
-            >
-              <span class="spectrum-Menu-itemLabel"
-                >{getOptionLabel(option)}</span
-              >
-              <svg
-                class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
-                focusable="false"
-                aria-hidden="true"
-              >
-                <use xlink:href="#spectrum-css-icon-Checkmark100" />
-              </svg>
-            </li>
-          {/each}
-        {/if}
-      </ul>
-    </div>
-  {/if}
 </div>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<Popover
+  {anchor}
+  {open}
+  align="left"
+  on:close={() => (open = false)}
+  useAnchorWidth
+>
+  <div class="popover-content" use:clickOutside={() => (open = false)}>
+    <ul class="spectrum-Menu" role="listbox">
+      {#if options && Array.isArray(options)}
+        {#each options as option}
+          <li
+            class="spectrum-Menu-item"
+            class:is-selected={getOptionValue(option) === value}
+            role="option"
+            aria-selected="true"
+            tabindex="0"
+            on:click={() => onPick(getOptionValue(option))}
+          >
+            <span class="spectrum-Menu-itemLabel">{getOptionLabel(option)}</span
+            >
+            <svg
+              class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
+              focusable="false"
+              aria-hidden="true"
+            >
+              <use xlink:href="#spectrum-css-icon-Checkmark100" />
+            </svg>
+          </li>
+        {/each}
+      {/if}
+    </ul>
+  </div>
+</Popover>
+
 <style>
   .spectrum-InputGroup {
     min-width: 0;
@@ -124,10 +129,13 @@
   .spectrum-Textfield-input {
     width: 0;
   }
-  .spectrum-Popover {
-    max-height: 240px;
-    width: 100%;
-    z-index: 999;
-    top: 100%;
+
+  /* Popover */
+  .popover-content {
+    display: contents;
+  }
+  .popover-content:not(.auto-width) .spectrum-Menu-itemLabel {
+    width: 0;
+    flex: 1 1 auto;
   }
 </style>

package/src/Form/Core/Picker.svelte

@@ -45,7 +45,6 @@
   const dispatch = createEventDispatcher()
 
   let button
-  let popover
   let component
 
   $: sortedOptions = getSortedOptions(options, getOptionLabel, sort)
@@ -146,11 +145,11 @@
     <use xlink:href="#spectrum-css-icon-Chevron100" />
   </svg>
 </button>
+
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <Popover
   anchor={customAnchor ? customAnchor : button}
   align={align || "left"}
-  bind:this={popover}
   {open}
   on:close={() => (open = false)}
   useAnchorWidth={!autoWidth}
@@ -266,16 +265,6 @@
     width: 100%;
     box-shadow: none;
   }
-
-  .subtitle-text {
-    font-size: 12px;
-    line-height: 15px;
-    font-weight: 500;
-    color: var(--spectrum-global-color-gray-600);
-    display: block;
-    margin-top: var(--spacing-s);
-  }
-
   .spectrum-Picker-label.auto-width {
     margin-right: var(--spacing-xs);
   }
@@ -356,11 +345,9 @@
   .option-extra.icon.field-icon {
     display: flex;
   }
-
   .option-tag {
     margin: 0 var(--spacing-m) 0 var(--spacing-m);
   }
-
   .option-tag :global(.spectrum-Tags-item > .spectrum-Icon) {
     margin-top: 2px;
   }
@@ -374,4 +361,13 @@
   .loading--withAutocomplete {
     top: calc(34px + var(--spacing-m));
   }
+
+  .subtitle-text {
+    font-size: 12px;
+    line-height: 15px;
+    font-weight: 500;
+    color: var(--spectrum-global-color-gray-600);
+    display: block;
+    margin-top: var(--spacing-s);
+  }
 </style>

package/src/Popover/Popover.svelte

@@ -99,10 +99,10 @@
       on:keydown={handleEscape}
       class="spectrum-Popover is-open"
       class:customZindex
-      class:hide-popover={open && !showPopover}
+      class:hidden={!showPopover}
       role="presentation"
       style="height: {customHeight}; --customZindex: {customZindex};"
-      transition:fly|local={{ y: -20, duration: animate ? 200 : 0 }}
+      transition:fly|local={{ y: -20, duration: animate ? 260 : 0 }}
       on:mouseenter
       on:mouseleave
     >
@@ -112,16 +112,17 @@
 {/if}
 
 <style>
-  .hide-popover {
-    display: contents;
-  }
-
   .spectrum-Popover {
     min-width: var(--spectrum-global-dimension-size-2000);
     border-color: var(--spectrum-global-color-gray-300);
     overflow: auto;
+    transition: opacity 260ms ease-out, transform 260ms ease-out;
+  }
+  .hidden {
+    opacity: 0;
+    pointer-events: none;
+    transform: translateY(-20px);
   }
-
   .customZindex {
     z-index: var(--customZindex) !important;
   }