@budibase/bbui 1.0.164-alpha.3 → 1.0.166

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "1.0.164-alpha.3",
+  "version": "1.0.166",
   "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.164-alpha.3",
+    "@budibase/string-templates": "^1.0.166",
     "@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": "4f770d911cfe73a5b32f42d389b86c9baf58c848"
+  "gitHead": "a77f1e1a377a8c040528eb35cb1cd5673b07ead2"
 }

package/src/Form/Core/DatePicker.svelte

@@ -161,8 +161,8 @@
         <input
           data-input
           type="text"
+          {disabled}
           class="spectrum-Textfield-input spectrum-InputGroup-input"
-          class:is-disabled={disabled}
           {placeholder}
           {id}
           {value}
@@ -172,7 +172,7 @@
         type="button"
         class="spectrum-Picker spectrum-Picker--sizeM spectrum-InputGroup-button"
         tabindex="-1"
-        class:is-disabled={disabled}
+        {disabled}
         class:is-invalid={!!error}
         on:click={flatpickr?.open}
       >
@@ -217,7 +217,4 @@
   :global(.flatpickr-calendar) {
     font-family: "Source Sans Pro", sans-serif;
   }
-  .is-disabled {
-    pointer-events: none !important;
-  }
 </style>

package/src/Form/Core/Picker.svelte

@@ -43,7 +43,7 @@
       return
     }
     searchTerm = null
-    open = !open
+    open = true
   }
 
   const getSortedOptions = (options, getLabel, sort) => {
@@ -71,73 +71,105 @@
   }
 </script>
 
-<div use:clickOutside={() => (open = false)}>
-  <button
-    {id}
-    class="spectrum-Picker spectrum-Picker--sizeM"
-    class:spectrum-Picker--quiet={quiet}
-    {disabled}
-    class:is-invalid={!!error}
-    class:is-open={open}
-    aria-haspopup="listbox"
-    on:mousedown={onClick}
-  >
-    {#if fieldIcon}
-      <span class="icon-Placeholder-Padding">
-        <img src={fieldIcon} alt="icon" width="20" height="15" />
-      </span>
-    {/if}
-
-    <span
-      class="spectrum-Picker-label"
-      class:is-placeholder={isPlaceholder}
-      class:auto-width={autoWidth}
-    >
-      {fieldText}
+<button
+  {id}
+  class="spectrum-Picker spectrum-Picker--sizeM"
+  class:spectrum-Picker--quiet={quiet}
+  {disabled}
+  class:is-invalid={!!error}
+  class:is-open={open}
+  aria-haspopup="listbox"
+  on:mousedown={onClick}
+>
+  {#if fieldIcon}
+    <span class="icon-Placeholder-Padding">
+      <img src={fieldIcon} alt="icon" width="20" height="15" />
     </span>
-    {#if error}
-      <svg
-        class="spectrum-Icon spectrum-Icon--sizeM spectrum-Picker-validationIcon"
-        focusable="false"
-        aria-hidden="true"
-        aria-label="Folder"
-      >
-        <use xlink:href="#spectrum-icon-18-Alert" />
-      </svg>
-    {/if}
+  {/if}
+
+  <span
+    class="spectrum-Picker-label"
+    class:is-placeholder={isPlaceholder}
+    class:auto-width={autoWidth}
+  >
+    {fieldText}
+  </span>
+  {#if error}
     <svg
-      class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon"
+      class="spectrum-Icon spectrum-Icon--sizeM spectrum-Picker-validationIcon"
       focusable="false"
       aria-hidden="true"
+      aria-label="Folder"
     >
-      <use xlink:href="#spectrum-css-icon-Chevron100" />
+      <use xlink:href="#spectrum-icon-18-Alert" />
     </svg>
-  </button>
-  {#if open}
-    <div
-      transition:fly|local={{ y: -20, duration: 200 }}
-      class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open"
-      class:auto-width={autoWidth}
-    >
-      {#if autocomplete}
-        <Search
-          value={searchTerm}
-          on:change={event => (searchTerm = event.detail)}
-          {disabled}
-          placeholder="Search"
-        />
+  {/if}
+  <svg
+    class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon"
+    focusable="false"
+    aria-hidden="true"
+  >
+    <use xlink:href="#spectrum-css-icon-Chevron100" />
+  </svg>
+</button>
+{#if open}
+  <div
+    use:clickOutside={() => (open = false)}
+    transition:fly|local={{ y: -20, duration: 200 }}
+    class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open"
+    class:auto-width={autoWidth}
+  >
+    {#if autocomplete}
+      <Search
+        value={searchTerm}
+        on:change={event => (searchTerm = event.detail)}
+        {disabled}
+        placeholder="Search"
+      />
+    {/if}
+    <ul class="spectrum-Menu" role="listbox">
+      {#if placeholderOption}
+        <li
+          class="spectrum-Menu-item placeholder"
+          class:is-selected={isPlaceholder}
+          role="option"
+          aria-selected="true"
+          tabindex="0"
+          on:click={() => onSelectOption(null)}
+        >
+          <span class="spectrum-Menu-itemLabel">{placeholderOption}</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>
       {/if}
-      <ul class="spectrum-Menu" role="listbox">
-        {#if placeholderOption}
+      {#if filteredOptions.length}
+        {#each filteredOptions as option, idx}
           <li
-            class="spectrum-Menu-item placeholder"
-            class:is-selected={isPlaceholder}
+            class="spectrum-Menu-item"
+            class:is-selected={isOptionSelected(getOptionValue(option, idx))}
             role="option"
             aria-selected="true"
             tabindex="0"
-            on:click={() => onSelectOption(null)}
+            on:click={() => onSelectOption(getOptionValue(option, idx))}
           >
-            <span class="spectrum-Menu-itemLabel">{placeholderOption}</span>
+            {#if getOptionIcon(option, idx)}
+              <span class="icon-Padding">
+                <img
+                  src={getOptionIcon(option, idx)}
+                  alt="icon"
+                  width="20"
+                  height="15"
+                />
+              </span>
+            {/if}
+            <span class="spectrum-Menu-itemLabel">
+              {getOptionLabel(option, idx)}
+            </span>
             <svg
               class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
               focusable="false"
@@ -146,44 +178,11 @@
               <use xlink:href="#spectrum-css-icon-Checkmark100" />
             </svg>
           </li>
-        {/if}
-        {#if filteredOptions.length}
-          {#each filteredOptions as option, idx}
-            <li
-              class="spectrum-Menu-item"
-              class:is-selected={isOptionSelected(getOptionValue(option, idx))}
-              role="option"
-              aria-selected="true"
-              tabindex="0"
-              on:click={() => onSelectOption(getOptionValue(option, idx))}
-            >
-              {#if getOptionIcon(option, idx)}
-                <span class="icon-Padding">
-                  <img
-                    src={getOptionIcon(option, idx)}
-                    alt="icon"
-                    width="20"
-                    height="15"
-                  />
-                </span>
-              {/if}
-              <span class="spectrum-Menu-itemLabel">
-                {getOptionLabel(option, idx)}
-              </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>
+        {/each}
+      {/if}
+    </ul>
+  </div>
+{/if}
 
 <style>
   .spectrum-Popover {

package/src/Form/Core/TextField.svelte

@@ -1,6 +1,6 @@
 <script>
   import "@spectrum-css/textfield/dist/index-vars.css"
-  import { createEventDispatcher, onMount } from "svelte"
+  import { createEventDispatcher } from "svelte"
 
   export let value = null
   export let placeholder = null
@@ -13,11 +13,8 @@
   export let quiet = false
   export let dataCy
   export let align
-  export let autofocus = false
 
   const dispatch = createEventDispatcher()
-
-  let field
   let focus = false
 
   const updateValue = newValue => {
@@ -61,11 +58,6 @@
       updateValue(event.target.value)
     }
   }
-
-  onMount(() => {
-    focus = autofocus
-    if (focus) field.focus()
-  })
 </script>
 
 <div
@@ -85,7 +77,6 @@
     </svg>
   {/if}
   <input
-    bind:this={field}
     {disabled}
     {readonly}
     {id}

package/src/Form/Core/index.js

@@ -3,7 +3,6 @@ export { default as CoreSelect } from "./Select.svelte"
 export { default as CoreMultiselect } from "./Multiselect.svelte"
 export { default as CoreCheckbox } from "./Checkbox.svelte"
 export { default as CoreRadioGroup } from "./RadioGroup.svelte"
-export { default as CoreCheckboxGroup } from "./CheckboxGroup.svelte"
 export { default as CoreTextArea } from "./TextArea.svelte"
 export { default as CoreCombobox } from "./Combobox.svelte"
 export { default as CoreSwitch } from "./Switch.svelte"

package/src/Form/Input.svelte

@@ -14,7 +14,6 @@
   export let updateOnChange = true
   export let quiet = false
   export let dataCy
-  export let autofocus
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -34,7 +33,6 @@
     {placeholder}
     {type}
     {quiet}
-    {autofocus}
     on:change={onChange}
     on:click
     on:input

package/src/Form/Core/CheckboxGroup.svelte

@@ -1,68 +0,0 @@
-<script>
-  import "@spectrum-css/fieldgroup/dist/index-vars.css"
-  import "@spectrum-css/radio/dist/index-vars.css"
-  import { createEventDispatcher } from "svelte"
-
-  export let direction = "vertical"
-  export let value = []
-  export let options = []
-  export let error = null
-  export let disabled = false
-  export let getOptionLabel = option => option
-  export let getOptionValue = option => option
-
-  const dispatch = createEventDispatcher()
-  const onChange = e => {
-    let tempValue = value
-    let isChecked = e.target.checked
-    if (!tempValue.includes(e.target.value) && isChecked) {
-      tempValue.push(e.target.value)
-    }
-    value = tempValue
-    dispatch(
-      "change",
-      tempValue.filter(val => val !== e.target.value || isChecked)
-    )
-  }
-</script>
-
-<div class={`spectrum-FieldGroup spectrum-FieldGroup--${direction}`}>
-  {#if options && Array.isArray(options)}
-    {#each options as option}
-      <div
-        title={getOptionLabel(option)}
-        class="spectrum-Checkbox spectrum-FieldGroup-item"
-        class:is-invalid={!!error}
-      >
-        <label
-          class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-FieldGroup-item"
-        >
-          <input
-            on:change={onChange}
-            value={getOptionValue(option)}
-            type="checkbox"
-            class="spectrum-Checkbox-input"
-            {disabled}
-            checked={value.includes(getOptionValue(option))}
-          />
-          <span class="spectrum-Checkbox-box">
-            <svg
-              class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark"
-              focusable="false"
-              aria-hidden="true"
-            >
-              <use xlink:href="#spectrum-css-icon-Checkmark100" />
-            </svg>
-          </span>
-          <span class="spectrum-Checkbox-label">{getOptionLabel(option)}</span>
-        </label>
-      </div>
-    {/each}
-  {/if}
-</div>
-
-<style>
-  .spectrum-Checkbox-input {
-    opacity: 0;
-  }
-</style>