@budibase/bbui 3.5.2 → 3.6.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "3.5.2",
+  "version": "3.6.0",
   "license": "MPL-2.0",
   "svelte": "src/index.ts",
   "module": "dist/bbui.mjs",
@@ -99,5 +99,5 @@
       }
     }
   },
-  "gitHead": "2d3a130fceeb689d3013606dde57bab8db41c586"
+  "gitHead": "fcc8291c1f2968ee7fd17bd47ee6ca19181a14a7"
 }

package/src/ActionMenu/ActionMenu.svelte

@@ -1,25 +1,26 @@
-<script>
+<script lang="ts">
   import { setContext, getContext } from "svelte"
   import Popover from "../Popover/Popover.svelte"
   import Menu from "../Menu/Menu.svelte"
+  import type { PopoverAlignment } from "../constants"
 
-  export let disabled = false
-  export let align = "left"
-  export let portalTarget
-  export let openOnHover = false
-  export let animate
-  export let offset
+  export let disabled: boolean = false
+  export let align: `${PopoverAlignment}` = "left"
+  export let portalTarget: string | undefined = undefined
+  export let openOnHover: boolean = false
+  export let animate: boolean | undefined = true
+  export let offset: number | undefined = undefined
 
   const actionMenuContext = getContext("actionMenu")
 
-  let anchor
-  let dropdown
-  let timeout
+  let anchor: HTMLElement | undefined
+  let dropdown: Popover
+  let timeout: ReturnType<typeof setTimeout>
 
   // This is needed because display: contents is considered "invisible".
   // It should only ever be an action button, so should be fine.
-  function getAnchor(node) {
-    anchor = node.firstChild
+  function getAnchor(node: HTMLDivElement) {
+    anchor = (node.firstChild as HTMLElement) ?? undefined
   }
 
   export const show = () => {
@@ -37,7 +38,7 @@
     actionMenuContext?.hide()
   }
 
-  const openMenu = event => {
+  const openMenu = (event: Event) => {
     if (!disabled) {
       event.stopPropagation()
       show()

package/src/Avatar/Avatar.svelte

@@ -14,7 +14,7 @@
   export let url = ""
   export let disabled = false
   export let initials = "JD"
-  export let color = null
+  export let color = ""
 
   const DefaultColor = "#3aab87"
 

package/src/ColorPicker/ColorPicker.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import Popover from "../Popover/Popover.svelte"
   import Layout from "../Layout/Layout.svelte"
   import { createEventDispatcher } from "svelte"
@@ -11,15 +11,17 @@
     getThemeClassNames,
     DefaultAppTheme,
   } from "@budibase/shared-core"
+  import type { Theme } from "@budibase/types"
+  import type { PopoverAlignment } from "../constants"
 
-  export let value
-  export let size = "M"
-  export let spectrumTheme
-  export let offset
-  export let align
+  export let value: string | undefined = undefined
+  export let size: "S" | "M" | "L" = "M"
+  export let spectrumTheme: Theme | undefined = undefined
+  export let offset: number | undefined = undefined
+  export let align: PopoverAlignment | undefined = undefined
 
-  let dropdown
-  let preview
+  let dropdown: Popover | undefined
+  let preview: HTMLElement | undefined
 
   $: customValue = getCustomValue(value)
   $: checkColor = getCheckColor(value)
@@ -28,23 +30,7 @@
   const dispatch = createEventDispatcher()
   const categories = [
     {
-      label: "Theme",
-      colors: [
-        "gray-50",
-        "gray-75",
-        "gray-100",
-        "gray-200",
-        "gray-300",
-        "gray-400",
-        "gray-500",
-        "gray-600",
-        "gray-700",
-        "gray-800",
-        "gray-900",
-      ],
-    },
-    {
-      label: "Colors",
+      label: "Theme colors",
       colors: [
         "red-100",
         "orange-100",
@@ -91,13 +77,56 @@
         "indigo-700",
         "magenta-700",
 
+        "gray-50",
+        "gray-75",
+        "gray-100",
+        "gray-200",
+        "gray-300",
+        "gray-400",
+        "gray-500",
+        "gray-600",
+        "gray-700",
+        "gray-800",
+        "gray-900",
+      ],
+    },
+    {
+      label: "Static colors",
+      colors: [
+        "static-red-400",
+        "static-orange-400",
+        "static-yellow-400",
+        "static-green-400",
+        "static-seafoam-400",
+        "static-blue-400",
+        "static-indigo-400",
+        "static-magenta-400",
+
+        "static-red-800",
+        "static-orange-800",
+        "static-yellow-800",
+        "static-green-800",
+        "static-seafoam-800",
+        "static-blue-800",
+        "static-indigo-800",
+        "static-magenta-800",
+
+        "static-red-1200",
+        "static-orange-1200",
+        "static-yellow-1200",
+        "static-green-1200",
+        "static-seafoam-1200",
+        "static-blue-1200",
+        "static-indigo-1200",
+        "static-magenta-1200",
+
         "static-white",
         "static-black",
       ],
     },
   ]
 
-  const getThemeClasses = theme => {
+  const getThemeClasses = (theme: Theme | undefined) => {
     if (!theme) {
       return ""
     }
@@ -105,12 +134,12 @@
     return getThemeClassNames(theme)
   }
 
-  const onChange = value => {
+  const onChange = (value: string | null) => {
     dispatch("change", value)
-    dropdown.hide()
+    dropdown?.hide()
   }
 
-  const getCustomValue = value => {
+  const getCustomValue = (value: string | undefined) => {
     if (!value) {
       return value
     }
@@ -125,11 +154,11 @@
     return found ? null : value
   }
 
-  const prettyPrint = color => {
+  const prettyPrint = (color: string) => {
     return capitalise(color.split("-").join(" "))
   }
 
-  const getCheckColor = value => {
+  const getCheckColor = (value: string | undefined) => {
     // Use dynamic color for theme grays
     if (value?.includes("-gray-")) {
       return /^.*(gray-(50|75|100|200|300|400|500))\)$/.test(value)
@@ -137,10 +166,13 @@
         : "var(--spectrum-global-color-gray-50)"
     }
 
-    // Use contrasating check for the dim colours
+    // Use contrasting check for the dim colours
     if (value?.includes("-100")) {
       return "var(--spectrum-global-color-gray-900)"
     }
+    if (value?.includes("-1200") || value?.includes("-800")) {
+      return "var(--spectrum-global-color-static-gray-50)"
+    }
 
     // Use black check for static white
     if (value?.includes("static-black")) {
@@ -157,7 +189,7 @@
   bind:this={preview}
   class="preview size--{size || 'M'}"
   on:click={() => {
-    dropdown.toggle()
+    dropdown?.toggle()
   }}
 >
   <div
@@ -169,7 +201,7 @@
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<Popover bind:this={dropdown} anchor={preview} maxHeight={320} {offset} {align}>
+<Popover bind:this={dropdown} anchor={preview} maxHeight={350} {offset} {align}>
   <Layout paddingX="XL" paddingY="L">
     <div class="container">
       {#each categories as category}

package/src/Form/Core/File.svelte

@@ -1,43 +1,47 @@
-<script>
+<script lang="ts">
   import ActionButton from "../../ActionButton/ActionButton.svelte"
   import { uuid } from "../../helpers"
   import Icon from "../../Icon/Icon.svelte"
   import { createEventDispatcher } from "svelte"
 
-  export let value = null
-  export let title = "Upload file"
-  export let disabled = false
-  export let allowClear = null
-  export let extensions = null
-  export let handleFileTooLarge = null
-  export let fileSizeLimit = BYTES_IN_MB * 20
-  export let id = null
-  export let previewUrl = null
+  const BYTES_IN_MB = 1000000
+
+  export let value: File | undefined = undefined
+  export let title: string = "Upload file"
+  export let disabled: boolean = false
+  export let allowClear: boolean | undefined = undefined
+  export let extensions: string[] | undefined = undefined
+  export let handleFileTooLarge: ((_file: File) => void) | undefined = undefined
+  export let fileSizeLimit: number = BYTES_IN_MB * 20
+  export let id: string | undefined = undefined
+  export let previewUrl: string | undefined = undefined
 
   const fieldId = id || uuid()
   const BYTES_IN_KB = 1000
-  const BYTES_IN_MB = 1000000
 
   const dispatch = createEventDispatcher()
 
-  let fileInput
+  let fileInput: HTMLInputElement | undefined
 
   $: inputAccept = Array.isArray(extensions) ? extensions.join(",") : "*"
 
-  async function processFile(targetFile) {
-    if (handleFileTooLarge && targetFile?.size >= fileSizeLimit) {
-      handleFileTooLarge(targetFile)
-      return
+  async function processFile(targetFile: File | undefined) {
+    if (targetFile) {
+      if (handleFileTooLarge && targetFile.size >= fileSizeLimit) {
+        handleFileTooLarge(targetFile)
+        return
+      }
+      dispatch("change", targetFile)
     }
-    dispatch("change", targetFile)
   }
 
-  function handleFile(evt) {
-    processFile(evt.target.files[0])
+  function handleFile(evt: Event) {
+    const target = evt.target as HTMLInputElement
+    processFile(target.files?.[0])
   }
 
   function clearFile() {
-    dispatch("change", null)
+    dispatch("change", undefined)
   }
 </script>
 
@@ -75,7 +79,9 @@
       {/if}
     </div>
   {/if}
-  <ActionButton {disabled} on:click={fileInput.click()}>{title}</ActionButton>
+  <ActionButton {disabled} on:click={() => fileInput?.click()}>
+    {title}
+  </ActionButton>
 </div>
 
 <style>

package/src/Form/Core/Multiselect.svelte

@@ -20,7 +20,7 @@
   export let searchTerm: string | null = null
   export let customPopoverHeight: string | undefined = undefined
   export let open: boolean = false
-  export let loading: boolean
+  export let loading: boolean = false
   export let onOptionMouseenter = () => {}
   export let onOptionMouseleave = () => {}
 

package/src/Form/Core/TextArea.svelte

@@ -2,49 +2,78 @@
   import "@spectrum-css/textfield/dist/index-vars.css"
   import { createEventDispatcher } from "svelte"
 
-  export let value = ""
+  export let value: string | undefined = ""
   export let placeholder: string | undefined = undefined
-  export let disabled = false
-  export let readonly = false
+  export let disabled: boolean = false
+  export let readonly: boolean = false
   export let id: string | undefined = undefined
   export let height: string | number | undefined = undefined
   export let minHeight: string | number | undefined = undefined
+  export let align = null
+  export let updateOnChange: boolean = false
+
   export const getCaretPosition = () => ({
     start: textarea.selectionStart,
     end: textarea.selectionEnd,
   })
-  export let align = null
 
-  let focus = false
-  let textarea: any
   const dispatch = createEventDispatcher()
-  const onChange = (event: any) => {
-    dispatch("change", event.target.value)
-    focus = false
+
+  let isFocused = false
+  let textarea: HTMLTextAreaElement
+  let scrollable = false
+
+  $: heightString = getStyleString("height", height)
+  $: minHeightString = getStyleString("min-height", minHeight)
+  $: dispatch("scrollable", scrollable)
+
+  export function focus() {
+    textarea.focus()
+  }
+
+  export function contents() {
+    return textarea.value
+  }
+
+  const onBlur = () => {
+    isFocused = false
+    updateValue()
+  }
+
+  const onChange = () => {
+    scrollable = textarea.clientHeight < textarea.scrollHeight
+    if (!updateOnChange) {
+      return
+    }
+    updateValue()
+  }
+
+  const updateValue = () => {
+    if (readonly || disabled) {
+      return
+    }
+    dispatch("change", textarea.value)
   }
 
   const getStyleString = (
     attribute: string,
     value: string | number | undefined
   ) => {
-    if (!attribute || value == null) {
+    if (value == null) {
       return ""
     }
-    if (typeof value === "number" && isNaN(value)) {
+    if (typeof value !== "number" || isNaN(value)) {
       return `${attribute}:${value};`
     }
     return `${attribute}:${value}px;`
   }
-
-  $: heightString = getStyleString("height", height)
-  $: minHeightString = getStyleString("min-height", minHeight)
 </script>
 
 <div
   style={`${heightString}${minHeightString}`}
   class="spectrum-Textfield spectrum-Textfield--multiline"
   class:is-disabled={disabled}
-  class:is-focused={focus}
+  class:is-focused={isFocused}
 >
   <!-- prettier-ignore -->
   <textarea
@@ -55,8 +84,11 @@
     {disabled}
     {readonly}
     {id}
-    on:focus={() => (focus = true)}
-    on:blur={onChange}
+    on:input={onChange}
+    on:focus={() => (isFocused = true)}
+    on:blur={onBlur}
+    on:blur
+    on:keypress
   >{value || ""}</textarea>
 </div>
 

package/src/Form/DatePicker.svelte

@@ -3,7 +3,7 @@
   import DatePicker from "./Core/DatePicker/DatePicker.svelte"
   import { createEventDispatcher } from "svelte"
 
-  export let value = null
+  export let value = undefined
   export let label = null
   export let labelPosition = "above"
   export let disabled = false

package/src/Form/File.svelte

@@ -1,23 +1,23 @@
-<script>
+<script lang="ts">
   import Field from "./Field.svelte"
   import { CoreFile } from "./Core"
   import { createEventDispatcher } from "svelte"
 
-  export let label = null
-  export let labelPosition = "above"
-  export let disabled = false
-  export let allowClear = null
-  export let handleFileTooLarge = () => {}
-  export let previewUrl = null
-  export let extensions = null
-  export let error = null
-  export let title = null
-  export let value = null
-  export let tooltip = null
-  export let helpText = null
+  export let label: string | undefined = undefined
+  export let labelPosition: string = "above"
+  export let disabled: boolean = false
+  export let allowClear: boolean | undefined = undefined
+  export let handleFileTooLarge: (_file: File) => void = () => {}
+  export let previewUrl: string | undefined = undefined
+  export let extensions: string[] | undefined = undefined
+  export let error: string | undefined = undefined
+  export let title: string | undefined = undefined
+  export let value: File | undefined = undefined
+  export let tooltip: string | undefined = undefined
+  export let helpText: string | undefined = undefined
 
   const dispatch = createEventDispatcher()
-  const onChange = e => {
+  const onChange = (e: CustomEvent) => {
     value = e.detail
     dispatch("change", e.detail)
   }
@@ -25,7 +25,6 @@
 
 <Field {helpText} {label} {labelPosition} {error} {tooltip}>
   <CoreFile
-    {error}
     {disabled}
     {allowClear}
     {title}

package/src/Form/Multiselect.svelte

@@ -1,29 +1,31 @@
-<script>
+<script lang="ts" generics="Option">
   import { createEventDispatcher } from "svelte"
   import Multiselect from "./Core/Multiselect.svelte"
   import Field from "./Field.svelte"
 
-  export let value = []
-  export let label = null
+  export let value: string[] | string = []
+  export let label: string | undefined = undefined
   export let disabled = false
   export let readonly = false
   export let labelPosition = "above"
-  export let error = null
-  export let placeholder = null
-  export let options = []
-  export let getOptionLabel = option => option
-  export let getOptionValue = option => option
+  export let error: string | undefined = undefined
+  export let placeholder: string | undefined = undefined
+  export let options: Option[] = []
+  export let getOptionLabel = (option: Option) => option
+  export let getOptionValue = (option: Option) => option
   export let sort = false
   export let autoWidth = false
   export let autocomplete = false
-  export let searchTerm = null
-  export let customPopoverHeight
-  export let helpText = null
+  export let searchTerm: string | undefined = undefined
+  export let customPopoverHeight: string | undefined = undefined
+  export let helpText: string | undefined = undefined
   export let onOptionMouseenter = () => {}
   export let onOptionMouseleave = () => {}
 
+  $: arrayValue = value && !Array.isArray(value) ? [value] : (value as string[])
+
   const dispatch = createEventDispatcher()
-  const onChange = e => {
+  const onChange = (e: any) => {
     value = e.detail
     dispatch("change", e.detail)
   }
@@ -31,10 +33,9 @@
 
 <Field {helpText} {label} {labelPosition} {error}>
   <Multiselect
-    {error}
     {disabled}
     {readonly}
-    {value}
+    bind:value={arrayValue}
     {options}
     {placeholder}
     {sort}

package/src/Form/Select.svelte

@@ -1,9 +1,4 @@
-<script lang="ts" context="module">
-  type O = any
-  type V = any
-</script>
-
-<script lang="ts">
+<script lang="ts" generics="O extends any,V">
   import Field from "./Field.svelte"
   import Select from "./Core/Select.svelte"
   import { createEventDispatcher } from "svelte"
@@ -22,9 +17,11 @@
   export let getOptionValue = (option: O, _index?: number) =>
     extractProperty(option, "value")
   export let getOptionSubtitle = (option: O, _index?: number) =>
-    option?.subtitle
-  export let getOptionIcon = (option: O, _index?: number) => option?.icon
-  export let getOptionColour = (option: O, _index?: number) => option?.colour
+    (option as any)?.subtitle
+  export let getOptionIcon = (option: O, _index?: number) =>
+    (option as any)?.icon
+  export let getOptionColour = (option: O, _index?: number) =>
+    (option as any)?.colour
   export let useOptionIconImage = false
   export let isOptionEnabled:
     | ((_option: O, _index?: number) => boolean)

package/src/Form/TextArea.svelte

@@ -5,17 +5,25 @@
 
   export let value: string | undefined = undefined
   export let label: string | undefined = undefined
-  export let labelPosition: string = "above"
+  export let labelPosition = "above"
   export let placeholder: string | undefined = undefined
   export let disabled = false
   export let error: string | undefined = undefined
-  export let getCaretPosition: any = undefined
-  export let height: string | number | undefined = undefined
-  export let minHeight: string | number | undefined = undefined
+  export let height: number | undefined = undefined
+  export let minHeight: number | undefined = undefined
   export let helpText: string | undefined = undefined
 
+  let textarea: TextArea
+  export function focus() {
+    textarea.focus()
+  }
+
+  export function contents() {
+    return textarea.contents()
+  }
+
   const dispatch = createEventDispatcher()
-  const onChange = (e: any) => {
+  const onChange = (e: CustomEvent<string>) => {
     value = e.detail
     dispatch("change", e.detail)
   }
@@ -23,12 +31,13 @@
 
 <Field {helpText} {label} {labelPosition} {error}>
   <TextArea
-    bind:getCaretPosition
+    bind:this={textarea}
     {disabled}
     {value}
     {placeholder}
     {height}
     {minHeight}
     on:change={onChange}
+    on:keypress
   />
 </Field>

package/src/Form/Toggle.svelte

@@ -3,10 +3,10 @@
   import Switch from "./Core/Switch.svelte"
   import { createEventDispatcher } from "svelte"
 
-  export let value = null
+  export let value = undefined
   export let label = null
   export let labelPosition = "above"
-  export let text = null
+  export let text = undefined
   export let disabled = false
   export let error = null
   export let helpText = null

package/src/Icon/Icon.svelte

@@ -25,12 +25,12 @@
   noWrap={tooltipWrap}
 >
   <div class="icon" class:newStyles>
+    <!-- svelte-ignore a11y-mouse-events-have-key-events -->
     <svg
       on:contextmenu
       on:click
       on:mouseover
       on:mouseleave
-      on:focus
       class:hoverable
       class:disabled
       class="spectrum-Icon spectrum-Icon--size{size}"