@budibase/bbui 1.2.44-alpha.0 → 1.2.46

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "1.2.44-alpha.0",
+  "version": "1.2.46",
   "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.2.44-alpha.0",
+    "@budibase/string-templates": "^1.2.46",
     "@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": "a9aebf552f8f7e69aa0afa1d88c6f090a609f470"
+  "gitHead": "9c20cb857b8fd3caa99fab0c926c32bc2189deaa"
 }

package/src/Form/Core/DatePicker.svelte

@@ -16,7 +16,6 @@
   export let appendTo = undefined
   export let timeOnly = false
   export let ignoreTimezones = false
-  export let time24hr = false
 
   const dispatch = createEventDispatcher()
   const flatpickrId = `${uuid()}-wrapper`
@@ -38,7 +37,6 @@
     enableTime: timeOnly || enableTime || false,
     noCalendar: timeOnly || false,
     altInput: true,
-    time_24hr: time24hr || false,
     altFormat: timeOnly ? "H:i" : enableTime ? "F j Y, H:i" : "F j, Y",
     wrap: true,
     appendTo,
@@ -51,12 +49,6 @@
     },
   }
 
-  $: redrawOptions = {
-    timeOnly,
-    enableTime,
-    time24hr,
-  }
-
   const handleChange = event => {
     const [dates] = event.detail
     const noTimezone = enableTime && !timeOnly && ignoreTimezones
@@ -67,6 +59,13 @@
 
     // If time only set date component to 2000-01-01
     if (timeOnly) {
+      // Classic flackpickr causing issues.
+      // When selecting a value for the first time for a "time only" field,
+      // the time is always offset by 1 hour for some reason (regardless of time
+      // zone) so we need to correct it.
+      if (!value && newValue) {
+        newValue = new Date(dates[0].getTime() + 60 * 60 * 1000).toISOString()
+      }
       newValue = `2000-01-01T${newValue.split("T")[1]}`
     }
 
@@ -150,7 +149,7 @@
   }
 </script>
 
-{#key redrawOptions}
+{#key timeOnly}
   <Flatpickr
     bind:flatpickr
     value={parseDate(value)}

package/src/Form/Core/Dropzone.svelte

@@ -17,7 +17,6 @@
   export let disabled = false
   export let fileSizeLimit = BYTES_IN_MB * 20
   export let processFiles = null
-  export let deleteAttachments = null
   export let handleFileTooLarge = null
   export let handleTooManyFiles = null
   export let gallery = true
@@ -95,11 +94,6 @@
       "change",
       value.filter((x, idx) => idx !== selectedImageIdx)
     )
-    if (deleteAttachments) {
-      await deleteAttachments(
-        value.filter((x, idx) => idx === selectedImageIdx).map(item => item.key)
-      )
-    }
     selectedImageIdx = 0
   }
 
@@ -139,7 +133,13 @@
         <div class="title">
           <div class="filename">
             {#if selectedUrl}
-              <Link href={selectedUrl}>{selectedImage.name}</Link>
+              <Link
+                target="_blank"
+                download={selectedImage.name}
+                href={selectedUrl}
+              >
+                {selectedImage.name}
+              </Link>
             {:else}
               {selectedImage.name}
             {/if}

package/src/Form/Core/Multiselect.svelte

@@ -23,7 +23,7 @@
   $: toggleOption = makeToggleOption(selectedLookupMap, value)
 
   const getFieldText = (value, map, placeholder) => {
-    if (Array.isArray(value) && value.length > 0) {
+    if (value?.length) {
       if (!map) {
         return ""
       }
@@ -36,7 +36,7 @@
 
   const getSelectedLookupMap = value => {
     let map = {}
-    if (Array.isArray(value) && value.length > 0) {
+    if (value?.length) {
       value.forEach(option => {
         if (option) {
           map[option] = true

package/src/Form/DatePicker.svelte

@@ -10,7 +10,6 @@
   export let error = null
   export let enableTime = true
   export let timeOnly = false
-  export let time24hr = false
   export let placeholder = null
   export let appendTo = undefined
   export let ignoreTimezones = false
@@ -31,7 +30,6 @@
     {placeholder}
     {enableTime}
     {timeOnly}
-    {time24hr}
     {appendTo}
     {ignoreTimezones}
     on:change={onChange}

package/src/Form/Dropzone.svelte

@@ -10,7 +10,6 @@
   export let error = null
   export let fileSizeLimit = undefined
   export let processFiles = undefined
-  export let deleteAttachments = undefined
   export let handleFileTooLarge = undefined
   export let handleTooManyFiles = undefined
   export let gallery = true
@@ -31,7 +30,6 @@
     {value}
     {fileSizeLimit}
     {processFiles}
-    {deleteAttachments}
     {handleFileTooLarge}
     {handleTooManyFiles}
     {gallery}

package/src/Icon/Icon.svelte

@@ -83,9 +83,4 @@
     transform: translateX(-50%);
     text-align: center;
   }
-
-  .spectrum-Icon--sizeXS {
-    width: 10px;
-    height: 10px;
-  }
 </style>

package/src/Link/Link.svelte

@@ -8,12 +8,14 @@
   export let secondary = false
   export let overBackground = false
   export let target
+  export let download
 </script>
 
 <a
   on:click
   {href}
   {target}
+  {download}
   class:spectrum-Link--primary={primary}
   class:spectrum-Link--secondary={secondary}
   class:spectrum-Link--overBackground={overBackground}

package/src/Menu/Item.svelte

@@ -1,6 +1,5 @@
 <script>
   import { createEventDispatcher, getContext } from "svelte"
-  import Icon from "../Icon/Icon.svelte"
 
   const dispatch = createEventDispatcher()
   const actionMenu = getContext("actionMenu")
@@ -9,22 +8,6 @@
   export let icon = undefined
   export let disabled = undefined
   export let noClose = false
-  export let keyBind = undefined
-
-  $: keys = getKeys(keyBind)
-
-  const getKeys = keyBind => {
-    let keys = keyBind?.split("+") || []
-    for (let i = 0; i < keys.length; i++) {
-      if (
-        keys[i].toLowerCase() === "ctrl" &&
-        navigator.platform.startsWith("Mac")
-      ) {
-        keys[i] = "⌘"
-      }
-    }
-    return keys
-  }
 
   const onClick = () => {
     if (actionMenu && !noClose) {
@@ -43,54 +26,20 @@
   tabindex="0"
 >
   {#if icon}
-    <div class="icon">
-      <Icon name={icon} size="S" />
-    </div>
+    <svg
+      class="spectrum-Icon spectrum-Icon--sizeS spectrum-Menu-itemIcon"
+      focusable="false"
+      aria-hidden="true"
+      aria-label={icon}
+    >
+      <use xlink:href="#spectrum-icon-18-{icon}" />
+    </svg>
   {/if}
   <span class="spectrum-Menu-itemLabel"><slot /></span>
-  {#if keys?.length}
-    <div class="keys">
-      {#each keys as key}
-        <div class="key">
-          {#if key.startsWith("!")}
-            <Icon size="XS" name={key.split("!")[1]} />
-          {:else}
-            {key}
-          {/if}
-        </div>
-      {/each}
-    </div>
-  {/if}
 </li>
 
 <style>
-  .icon {
+  .spectrum-Menu-itemIcon {
     align-self: center;
-    margin-right: var(--spacing-s);
-  }
-  .keys {
-    margin-left: 30px;
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-    align-items: center;
-    gap: 4px;
-  }
-  .key {
-    color: var(--spectrum-global-color-gray-900);
-    padding: 2px 4px;
-    font-size: 12px;
-    font-weight: 600;
-    background-color: var(--spectrum-global-color-gray-300);
-    border-radius: 4px;
-    min-width: 12px;
-    height: 16px;
-    text-align: center;
-    margin: -1px 0;
-    display: grid;
-    place-items: center;
-  }
-  .is-disabled .key {
-    color: var(--spectrum-global-color-gray-600);
   }
 </style>

package/src/Modal/Modal.svelte

@@ -11,8 +11,6 @@
 
   const dispatch = createEventDispatcher()
   let visible = fixed || inline
-  let modal
-
   $: dispatch(visible ? "show" : "hide")
 
   export function show() {
@@ -43,22 +41,12 @@
     }
   }
 
-  async function focusModal(node) {
-    await tick()
-
-    // Try to focus first input
+  async function focusFirstInput(node) {
     const inputs = node.querySelectorAll("input")
     if (inputs?.length) {
+      await tick()
       inputs[0].focus()
     }
-
-    // Otherwise try to focus confirmation button
-    else if (modal) {
-      const confirm = modal.querySelector(".confirm-wrap .spectrum-Button")
-      if (confirm) {
-        confirm.focus()
-      }
-    }
   }
 
   setContext(Context.Modal, { show, hide, cancel })
@@ -68,7 +56,7 @@
 
 {#if inline}
   {#if visible}
-    <div use:focusModal bind:this={modal} class="spectrum-Modal inline is-open">
+    <div use:focusFirstInput class="spectrum-Modal inline is-open">
       <slot />
     </div>
   {/if}
@@ -82,18 +70,17 @@
   -->
   <Portal target=".modal-container">
     {#if visible}
-      <div class="spectrum-Underlay is-open" on:mousedown|self={cancel}>
-        <div
-          class="background"
-          in:fade={{ duration: 200 }}
-          out:fade|local={{ duration: 200 }}
-        />
+      <div
+        class="spectrum-Underlay is-open"
+        in:fade={{ duration: 200 }}
+        out:fade|local={{ duration: 200 }}
+        on:mousedown|self={cancel}
+      >
         <div class="modal-wrapper" on:mousedown|self={cancel}>
           <div class="modal-inner-wrapper" on:mousedown|self={cancel}>
             <slot name="outside" />
             <div
-              use:focusModal
-              bind:this={modal}
+              use:focusFirstInput
               class="spectrum-Modal is-open"
               in:fly={{ y: 30, duration: 200 }}
               out:fly|local={{ y: 30, duration: 200 }}
@@ -116,17 +103,7 @@
     z-index: 999;
     overflow: auto;
     overflow-x: hidden;
-    background: transparent;
-  }
-  .background {
-    background: var(--modal-background, rgba(0, 0, 0, 0.75));
-    position: fixed;
-    top: 0;
-    left: 0;
-    height: 100vh;
-    width: 100vw;
-    opacity: 0.65;
-    pointer-events: none;
+    background: rgba(0, 0, 0, 0.75);
   }
 
   .modal-wrapper {

package/src/Popover/Popover.svelte

@@ -63,7 +63,7 @@
 
 <style>
   .spectrum-Popover {
-    min-width: var(--spectrum-global-dimension-size-2000);
+    min-width: var(--spectrum-global-dimension-size-2000) !important;
   }
   .spectrum-Popover.is-open.spectrum-Popover--withTip {
     margin-top: var(--spacing-xs);

package/src/Table/AttachmentRenderer.svelte

@@ -15,14 +15,24 @@
 
 {#each attachments as attachment}
   {#if isImage(attachment.extension)}
-    <Link quiet target="_blank" href={attachment.url}>
+    <Link
+      quiet
+      target="_blank"
+      download={attachment.name}
+      href={attachment.url}
+    >
       <div class="center" title={attachment.name}>
         <img src={attachment.url} alt={attachment.extension} />
       </div>
     </Link>
   {:else}
     <div class="file" title={attachment.name}>
-      <Link quiet target="_blank" href={attachment.url}>
+      <Link
+        quiet
+        target="_blank"
+        download={attachment.name}
+        href={attachment.url}
+      >
         {attachment.extension}
       </Link>
     </div>