@budibase/bbui 3.19.2 → 3.20.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "3.19.2",
+  "version": "3.20.1",
   "license": "MPL-2.0",
   "svelte": "src/index.ts",
   "module": "dist/bbui.mjs",
@@ -106,5 +106,5 @@
       }
     }
   },
-  "gitHead": "6d89c268f83c9702e183b1372e6db79ed1e48e9d"
+  "gitHead": "3e59ab10d5d14b2a7843a4f637163aba471cfa72"
 }

package/src/ActionButton/ActionButton.svelte

@@ -85,6 +85,15 @@
   }
   .fullWidth {
     width: 100%;
+    min-width: 0;
+    overflow: hidden;
+  }
+  .fullWidth .spectrum-ActionButton-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1;
+    text-align: left;
   }
   .active,
   .active :global(i) {

package/src/Form/Core/Dropzone.svelte

@@ -1,30 +1,30 @@
-<script lang="ts">
+<script lang="ts" generics="Value extends UIFile|File">
+  import type { UIFile } from "@budibase/types"
   import "@spectrum-css/dropzone/dist/index-vars.css"
-  import "@spectrum-css/typography/dist/index-vars.css"
   import "@spectrum-css/illustratedmessage/dist/index-vars.css"
+  import "@spectrum-css/typography/dist/index-vars.css"
   import { createEventDispatcher } from "svelte"
   import { uuid } from "../../helpers"
   import Icon from "../../Icon/Icon.svelte"
   import Link from "../../Link/Link.svelte"
+  import ProgressCircle from "../../ProgressCircle/ProgressCircle.svelte"
   import Tag from "../../Tags/Tag.svelte"
   import Tags from "../../Tags/Tags.svelte"
-  import ProgressCircle from "../../ProgressCircle/ProgressCircle.svelte"
-  import type { UIFile } from "@budibase/types"
 
   const BYTES_IN_KB = 1000
   const BYTES_IN_MB = 1000000
 
-  export let value: UIFile[] | File[] = []
+  export let value: Value[] = []
   export let id: string | null = null
   export let disabled: boolean = false
   export let compact: boolean = false
   export let fileSizeLimit: number = BYTES_IN_MB * 20
-  export let processFiles: ((_files: FileList) => Promise<UIFile[]>) | null =
+  export let processFiles: ((_files: FileList) => Promise<Value[]>) | null =
     null
   export let deleteAttachments: ((_keys: string[]) => Promise<void>) | null =
     null
   export let handleFileTooLarge:
-    | ((_limit: number, _currentFiles: UIFile[] | File[]) => void)
+    | ((_limit: number, _currentFiles: Value[]) => void)
     | null = null
   export let handleTooManyFiles: ((_maximum: number) => void) | null = null
   export let gallery: boolean = true
@@ -35,7 +35,7 @@
   export let clickText: string | null = null
   export let addText: string | null = null
 
-  const dispatch = createEventDispatcher<{ change: UIFile[] | File[] }>()
+  const dispatch = createEventDispatcher<{ change: Value[] }>()
   const imageExtensions = [
     "png",
     "tiff",
@@ -102,21 +102,22 @@
       loading = true
       try {
         const processedFiles = await processFiles(fileList)
-        const newValue = [...(value as UIFile[]), ...processedFiles]
+        const newValue = [...value, ...processedFiles]
         dispatch("change", newValue)
         selectedImageIdx = newValue.length - 1
       } finally {
         loading = false
       }
     } else {
-      dispatch("change", Array.from(fileList))
+      // TODO: this type should be inferred correctly, but it needs a much bigger refactor around all the usages and dynamic types
+      dispatch("change", Array.from(fileList) as Value[])
     }
   }
 
   async function removeFile() {
     dispatch(
       "change",
-      value.filter((_x, idx) => idx !== selectedImageIdx) as UIFile[] | File[]
+      value.filter((_x, idx) => idx !== selectedImageIdx)
     )
     if (deleteAttachments) {
       await deleteAttachments(

package/src/Form/Dropzone.svelte

@@ -1,23 +1,23 @@
-<script lang="ts">
-  import Field from "./Field.svelte"
-  import CoreDropzone from "./Core/Dropzone.svelte"
-  import { createEventDispatcher } from "svelte"
+<script lang="ts" generics="Value extends UIFile|File">
   import type { UIFile } from "@budibase/types"
+  import { createEventDispatcher } from "svelte"
+  import CoreDropzone from "./Core/Dropzone.svelte"
+  import Field from "./Field.svelte"
 
-  export let value: UIFile[] | File[] = []
+  export let value: Value[] = []
   export let label: string | undefined = undefined
   export let labelPosition: "above" = "above"
   export let disabled: boolean = false
   export let error: string | undefined | false = undefined
   export let fileSizeLimit: number | undefined = undefined
   export let processFiles:
-    | ((_files: FileList) => Promise<UIFile[]>)
+    | ((_files: FileList) => Promise<Value[]>)
     | undefined = undefined
   export let deleteAttachments:
     | ((_keys: string[]) => Promise<void>)
     | undefined = undefined
   export let handleFileTooLarge:
-    | ((_limit: number, _currentFiles: UIFile[] | File[]) => void)
+    | ((_limit: number, _currentFiles: Value[]) => void)
     | undefined = undefined
   export let handleTooManyFiles: ((_maximum: number) => void) | undefined =
     undefined
@@ -27,8 +27,8 @@
   export let compact: boolean = false
   export let helpText: string | undefined = undefined
 
-  const dispatch = createEventDispatcher<{ change: UIFile[] | File[] }>()
-  const onChange = (e: CustomEvent<UIFile[] | File[]>) => {
+  const dispatch = createEventDispatcher<{ change: Value[] }>()
+  const onChange = (e: CustomEvent<Value[]>) => {
     value = e.detail
     dispatch("change", e.detail)
   }