@budibase/bbui 3.5.3 → 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.3",
+  "version": "3.6.0",
   "license": "MPL-2.0",
   "svelte": "src/index.ts",
   "module": "dist/bbui.mjs",
@@ -99,5 +99,5 @@
       }
     }
   },
-  "gitHead": "0f586f33c25c04b35a7dc72b7217fdbaa3e843c0"
+  "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

@@ -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/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/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/List/ListItem.svelte

@@ -89,7 +89,7 @@
   /* Selection is only meant for standalone list items (non stacked) so we just set a fixed border radius */
   .list-item.selected {
     background-color: var(--spectrum-global-color-blue-100);
-    border-color: var(--spectrum-global-color-blue-100);
+    border: none;
   }
   .list-item.selected:after {
     content: "";
@@ -100,7 +100,7 @@
     pointer-events: none;
     top: 0;
     left: 0;
-    border-radius: 4px;
+    border-radius: inherit;
     box-sizing: border-box;
     z-index: 1;
     opacity: 0.5;

package/src/Markdown/MarkdownViewer.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import SpectrumMDE from "./SpectrumMDE.svelte"
 
-  export let value: string | null = null
-  export let height: string | null = null
+  export let value: string | undefined = undefined
+  export let height: string | undefined = undefined
 
   let mde: any
 
@@ -40,6 +40,7 @@
     border: none;
     background: transparent;
     padding: 0;
+    color: inherit;
   }
   .markdown-viewer :global(.EasyMDEContainer) {
     background: transparent;

package/src/bbui.css

@@ -11,6 +11,16 @@
   --bb-forest-green: #053835;
   --bb-beige: #f6efea;
 
+  /* Custom spectrum additions */
+  --spectrum-global-color-static-red-1200: #740000;
+  --spectrum-global-color-static-orange-1200: #612300;
+  --spectrum-global-color-static-yellow-1200: #483300;
+  --spectrum-global-color-static-green-1200: #053f27;
+  --spectrum-global-color-static-seafoam-1200: #123c3a;
+  --spectrum-global-color-static-blue-1200: #003571;
+  --spectrum-global-color-static-indigo-1200: #262986;
+  --spectrum-global-color-static-magenta-1200: #700037;
+
   --grey-1: #fafafa;
   --grey-2: #f5f5f5;
   --grey-3: #eeeeee;

package/src/context.d.ts

@@ -0,0 +1,8 @@
+import { ActionMenu } from "./types"
+
+declare module "svelte" {
+  export function getContext(key: "actionMenu"): ActionMenu | undefined
+}
+
+export const Modal = "bbui-modal"
+export const PopoverRoot = "bbui-popover-root"

package/src/types/actionMenu.ts

@@ -0,0 +1,3 @@
+export interface ActionMenu {
+  hide: () => void
+}