@budibase/bbui 1.0.192-alpha.6 → 1.0.192-alpha.7

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "1.0.192-alpha.6",
+  "version": "1.0.192-alpha.7",
   "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.0.192-alpha.6",
+    "@budibase/string-templates": "^1.0.192-alpha.7",
     "@spectrum-css/actionbutton": "^1.0.1",
     "@spectrum-css/actiongroup": "^1.0.1",
     "@spectrum-css/avatar": "^3.0.2",
@@ -84,5 +84,5 @@
     "svelte-flatpickr": "^3.2.3",
     "svelte-portal": "^1.0.0"
   },
-  "gitHead": "cbf0adc98c834749e94c900b284c37e44ca80e9f"
+  "gitHead": "83638579205c42dcfd6a5465f57263736eb24a69"
 }

package/src/ActionButton/ActionButton.svelte

@@ -1,7 +1,8 @@
 <script>
   import "@spectrum-css/actionbutton/dist/index-vars.css"
-  import { createEventDispatcher } from "svelte"
+  import { createEventDispatcher, getContext } from "svelte"
   const dispatch = createEventDispatcher()
+  const context = getContext("builderFocus")
 
   export let quiet = false
   export let emphasized = false
@@ -13,6 +14,14 @@
   export let size = "M"
   export let active = false
   export let fullWidth = false
+  export let autofocus = false
+
+  let focus = false
+  let actionButton
+  $: focus = autofocus && actionButton !== undefined
+  $: if (focus) {
+    actionButton.focus()
+  }
 
   function longPress(element) {
     if (!longPressable) return
@@ -37,6 +46,7 @@
 
 <button
   data-cy={dataCy}
+  bind:this={actionButton}
   use:longPress
   class:spectrum-ActionButton--quiet={quiet}
   class:spectrum-ActionButton--emphasized={emphasized}
@@ -44,9 +54,17 @@
   class:fullWidth
   class="spectrum-ActionButton spectrum-ActionButton--size{size}"
   class:active
+  class:is-focused={focus}
   {disabled}
   on:longPress
   on:click|preventDefault
+  on:focus={() => {
+    focus = true
+  }}
+  on:blur={() => {
+    focus = false
+    if (context) context.clear()
+  }}
 >
   {#if longPressable}
     <svg
@@ -80,4 +98,10 @@
   .active svg {
     color: var(--spectrum-global-color-blue-600);
   }
+  button.is-focused {
+    border-color: var(
+      --spectrum-textfield-m-border-color-down,
+      var(--spectrum-alias-border-color-mouse-focus)
+    );
+  }
 </style>

package/src/Form/Combobox.svelte

@@ -13,6 +13,7 @@
   export let options = []
   export let getOptionLabel = option => extractProperty(option, "label")
   export let getOptionValue = option => extractProperty(option, "value")
+  export let autofocus = false
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -35,6 +36,7 @@
     {options}
     {placeholder}
     {readonly}
+    {autofocus}
     {getOptionLabel}
     {getOptionValue}
     on:change={onChange}

package/src/Form/Core/Combobox.svelte

@@ -3,37 +3,28 @@
   import "@spectrum-css/popover/dist/index-vars.css"
   import "@spectrum-css/menu/dist/index-vars.css"
   import { fly } from "svelte/transition"
-  import { createEventDispatcher } from "svelte"
+  import { createEventDispatcher, getContext } from "svelte"
 
   export let value = null
   export let id = null
   export let placeholder = "Choose an option or type"
   export let disabled = false
   export let readonly = false
+  export let autofocus = false
   export let error = null
   export let options = []
   export let getOptionLabel = option => option
   export let getOptionValue = option => option
 
+  const context = getContext("builderFocus")
   const dispatch = createEventDispatcher()
   let open = false
   let focus = false
-  $: fieldText = getFieldText(value, options, placeholder)
+  let comboInput
 
-  const getFieldText = (value, options, placeholder) => {
-    // Always use placeholder if no value
-    if (value == null || value === "") {
-      return placeholder || "Choose an option or type"
-    }
-
-    // Wait for options to load if there is a value but no options
-    if (!options?.length) {
-      return ""
-    }
-
-    // Render the label if the selected option is found, otherwise raw value
-    const selected = options.find(option => getOptionValue(option) === value)
-    return selected ? getOptionLabel(selected) : value
+  $: focus = autofocus && comboInput !== undefined
+  $: if (focus) {
+    comboInput.focus()
   }
 
   const selectOption = value => {
@@ -66,10 +57,16 @@
     class:is-focused={open || focus}
   >
     <input
+      bind:this={comboInput}
       {id}
       type="text"
-      on:focus={() => (focus = true)}
-      on:blur={() => (focus = false)}
+      on:focus={() => {
+        focus = true
+      }}
+      on:blur={() => {
+        focus = false
+        context.clear()
+      }}
       on:change={onType}
       value={value || ""}
       placeholder={placeholder || ""}

package/src/Form/Core/Multiselect.svelte

@@ -13,6 +13,7 @@
   export let readonly = false
   export let autocomplete = false
   export let sort = false
+  export let autofocus = false
 
   const dispatch = createEventDispatcher()
   $: selectedLookupMap = getSelectedLookupMap(value)
@@ -85,4 +86,5 @@
   {getOptionValue}
   onSelectOption={toggleOption}
   {sort}
+  {autofocus}
 />

package/src/Form/Core/Picker.svelte

@@ -3,7 +3,7 @@
   import "@spectrum-css/popover/dist/index-vars.css"
   import "@spectrum-css/menu/dist/index-vars.css"
   import { fly } from "svelte/transition"
-  import { createEventDispatcher } from "svelte"
+  import { createEventDispatcher, getContext } from "svelte"
   import clickOutside from "../../Actions/click_outside"
   import Search from "./Search.svelte"
 
@@ -26,9 +26,18 @@
   export let autoWidth = false
   export let autocomplete = false
   export let sort = false
+  export let autofocus = false
 
+  const context = getContext("builderFocus")
   const dispatch = createEventDispatcher()
   let searchTerm = null
+  let focus = false
+  let pickerButton
+
+  $: focus = autofocus && pickerButton !== undefined
+  $: if (focus) {
+    pickerButton.focus()
+  }
 
   $: sortedOptions = getSortedOptions(options, getOptionLabel, sort)
   $: filteredOptions = getFilteredOptions(
@@ -80,7 +89,24 @@
     class:is-invalid={!!error}
     class:is-open={open}
     aria-haspopup="listbox"
+    class:is-focused={focus}
+    bind:this={pickerButton}
     on:mousedown={onClick}
+    on:keydown={e => {
+      var keycode = e.key
+      if (focus) {
+        if (keycode === "Enter") {
+          onClick(e)
+        }
+      }
+    }}
+    on:focus={() => {
+      focus = true
+    }}
+    on:blur={() => {
+      focus = false
+      if (context) context.clear()
+    }}
   >
     {#if fieldIcon}
       <span class="icon-Placeholder-Padding">
@@ -199,6 +225,7 @@
   }
   .spectrum-Picker {
     width: 100%;
+    box-shadow: none;
   }
   .spectrum-Picker-label:not(.auto-width) {
     overflow: hidden;

package/src/Form/Core/Select.svelte

@@ -16,6 +16,7 @@
   export let autoWidth = false
   export let autocomplete = false
   export let sort = false
+  export let autofocus = false
 
   const dispatch = createEventDispatcher()
   let open = false
@@ -74,6 +75,7 @@
   {fieldIcon}
   {autocomplete}
   {sort}
+  {autofocus}
   isPlaceholder={value == null || value === ""}
   placeholderOption={placeholder}
   isOptionSelected={option => option === value}

package/src/Form/Multiselect.svelte

@@ -14,6 +14,7 @@
   export let getOptionLabel = option => option
   export let getOptionValue = option => option
   export let sort = false
+  export let autofocus = false
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -35,5 +36,6 @@
     {getOptionValue}
     on:change={onChange}
     on:click
+    {autofocus}
   />
 </Field>

package/src/Form/Select.svelte

@@ -18,6 +18,7 @@
   export let autoWidth = false
   export let sort = false
   export let tooltip = ""
+  export let autofocus = false
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -44,6 +45,7 @@
     {placeholder}
     {autoWidth}
     {sort}
+    {autofocus}
     {getOptionLabel}
     {getOptionValue}
     {getOptionIcon}