@budibase/bbui 3.5.3 → 3.7.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "3.5.3",
+  "version": "3.7.0",
   "license": "MPL-2.0",
   "svelte": "src/index.ts",
   "module": "dist/bbui.mjs",
@@ -99,5 +99,5 @@
       }
     }
   },
-  "gitHead": "0f586f33c25c04b35a7dc72b7217fdbaa3e843c0"
+  "gitHead": "701aef170adfb9552bb88b97a0231e31e6054f64"
 }

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/EnvDropdown.svelte

@@ -1,36 +1,36 @@
-<script>
+<script lang="ts">
   import "@spectrum-css/textfield/dist/index-vars.css"
   import { createEventDispatcher, onMount } from "svelte"
   import clickOutside from "../../Actions/click_outside"
   import Divider from "../../Divider/Divider.svelte"
+  import type { EnvDropdownType } from "../../types"
 
-  export let value = null
-  export let placeholder = null
-  export let type = "text"
-  export let disabled = false
-  export let id = null
-  export let readonly = false
-  export let updateOnChange = true
-  export let align
-  export let autofocus = false
+  export let value: string | number | undefined = undefined
+  export let placeholder: string | undefined = undefined
+  export let type: EnvDropdownType = "text"
+  export let disabled: boolean = false
+  export let id: string | undefined = undefined
+  export let readonly: boolean = false
+  export let updateOnChange: boolean = true
+  export let align: string | undefined = undefined
+  export let autofocus: boolean = false
   export let variables
-  export let showModal
+  export let showModal: () => void
   export let environmentVariablesEnabled
-  export let handleUpgradePanel
+  export let handleUpgradePanel: () => void
   const dispatch = createEventDispatcher()
 
-  let field
+  let field: HTMLInputElement
   let focus = false
   let iconFocused = false
   let open = false
 
-  //eslint-disable-next-line
-  const STRIP_NAME_REGEX = /(\w+?)(?=\ })/g
+  const STRIP_NAME_REGEX = /{{\s*env\.([^\s]+)\s*}}/g
 
   // Strips the name out of the value which is {{ env.Variable }} resulting in an array like ["Variable"]
-  $: hbsValue = String(value)?.match(STRIP_NAME_REGEX) || []
+  $: hbsValue = (String(value) && STRIP_NAME_REGEX.exec(String(value))) || []
 
-  const updateValue = newValue => {
+  const updateValue = (newValue: any) => {
     if (readonly) {
       return
     }
@@ -48,7 +48,7 @@
     focus = true
   }
 
-  const onBlur = event => {
+  const onBlur = (event: any) => {
     if (readonly) {
       return
     }
@@ -56,14 +56,14 @@
     updateValue(event.target.value)
   }
 
-  const onInput = event => {
+  const onInput = (event: any) => {
     if (readonly || !updateOnChange) {
       return
     }
     updateValue(event.target.value)
   }
 
-  const handleOutsideClick = event => {
+  const handleOutsideClick = (event: Event) => {
     if (open) {
       event.stopPropagation()
       open = false
@@ -73,7 +73,7 @@
     }
   }
 
-  const handleVarSelect = variable => {
+  const handleVarSelect = (variable: string) => {
     open = false
     focus = false
     iconFocused = false
@@ -121,10 +121,10 @@
 
     <input
       bind:this={field}
-      disabled={hbsValue.length || disabled}
+      disabled={!!hbsValue.length || disabled}
       {readonly}
       {id}
-      value={hbsValue.length ? `{{ ${hbsValue[0]} }}` : value}
+      value={(hbsValue.length ? `{{ ${hbsValue[1]} }}` : value) ?? ""}
       placeholder={placeholder || ""}
       on:click
       on:blur

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

@@ -1,24 +1,31 @@
 <script lang="ts">
   import "@spectrum-css/textfield/dist/index-vars.css"
   import { createEventDispatcher } from "svelte"
-  import type { FocusEventHandler } from "svelte/elements"
 
-  export let value: string | null = null
-  export let placeholder: string | null = null
-  export let disabled = false
-  export let readonly = false
-  export let id: string | null = null
-  export let height: number | null = null
-  export let minHeight: number | null = null
+  export let value: string | undefined = ""
+  export let placeholder: string | undefined = undefined
+  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,
+  })
+
+  const dispatch = createEventDispatcher()
 
   let isFocused = false
   let textarea: HTMLTextAreaElement
-  const dispatch = createEventDispatcher<{ change: string }>()
-  const onChange: FocusEventHandler<HTMLTextAreaElement> = event => {
-    dispatch("change", event.currentTarget.value)
-    isFocused = false
-  }
+  let scrollable = false
+
+  $: heightString = getStyleString("height", height)
+  $: minHeightString = getStyleString("min-height", minHeight)
+  $: dispatch("scrollable", scrollable)
 
   export function focus() {
     textarea.focus()
@@ -28,18 +35,38 @@
     return textarea.value
   }
 
-  const getStyleString = (attribute: string, value: number | null) => {
-    if (!attribute || value == null) {
+  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 (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
@@ -57,8 +84,10 @@
     {disabled}
     {readonly}
     {id}
+    on:input={onChange}
     on:focus={() => (isFocused = true)}
-    on:blur={onChange}
+    on:blur={onBlur}
+    on:blur
     on:keypress
   >{value || ""}</textarea>
 </div>

package/src/Form/Core/TextField.svelte

@@ -13,7 +13,7 @@
   export let quiet = false
   export let align: "left" | "right" | "center" | undefined = undefined
   export let autofocus: boolean | null = false
-  export let autocomplete: boolean | undefined
+  export let autocomplete: boolean | string | undefined
 
   const dispatch = createEventDispatcher()
 

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/EnvDropdown.svelte

@@ -1,26 +1,26 @@
-<script>
+<script lang="ts">
   import Field from "./Field.svelte"
   import EnvDropdown from "./Core/EnvDropdown.svelte"
   import { createEventDispatcher } from "svelte"
+  import type { EnvDropdownType } from "../types"
 
-  export let value = null
-  export let label = null
-  export let labelPosition = "above"
-  export let placeholder = null
-  export let type = "text"
+  export let value: string | undefined = undefined
+  export let label: string | undefined = undefined
+  export let labelPosition: string = "above"
+  export let placeholder: string | undefined = undefined
+  export let type: EnvDropdownType = "text"
   export let disabled = false
   export let readonly = false
-  export let error = null
+  export let error: string | undefined = undefined
   export let updateOnChange = true
-  export let quiet = false
-  export let autofocus
-  export let variables
-  export let showModal
-  export let helpText = null
-  export let environmentVariablesEnabled
-  export let handleUpgradePanel
+  export let autofocus: boolean = false
+  export let variables: { name: string }[] = []
+  export let showModal: () => void
+  export let helpText: string | undefined = undefined
+  export let environmentVariablesEnabled: boolean = false
+  export let handleUpgradePanel: () => void = () => {}
   const dispatch = createEventDispatcher()
-  const onChange = e => {
+  const onChange = (e: any) => {
     value = e.detail
     dispatch("change", e.detail)
   }
@@ -29,13 +29,11 @@
 <Field {helpText} {label} {labelPosition} {error}>
   <EnvDropdown
     {updateOnChange}
-    {error}
     {disabled}
     {readonly}
     {value}
     {placeholder}
     {type}
-    {quiet}
     {autofocus}
     {variables}
     {showModal}

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/Input.svelte

@@ -14,7 +14,7 @@
   export let updateOnChange = true
   export let quiet = false
   export let autofocus: boolean | undefined = undefined
-  export let autocomplete: boolean | undefined = undefined
+  export let autocomplete: boolean | string | undefined = undefined
   export let helpText: string | undefined = undefined
 
   const dispatch = createEventDispatcher()