@budibase/bbui 3.5.2 → 3.5.3

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.5.3",
   "license": "MPL-2.0",
   "svelte": "src/index.ts",
   "module": "dist/bbui.mjs",
@@ -99,5 +99,5 @@
       }
     }
   },
-  "gitHead": "2d3a130fceeb689d3013606dde57bab8db41c586"
+  "gitHead": "0f586f33c25c04b35a7dc72b7217fdbaa3e843c0"
 }

package/src/Form/Core/TextArea.svelte

@@ -1,32 +1,34 @@
 <script lang="ts">
   import "@spectrum-css/textfield/dist/index-vars.css"
   import { createEventDispatcher } from "svelte"
+  import type { FocusEventHandler } from "svelte/elements"
 
-  export let value = ""
-  export let placeholder: string | undefined = undefined
+  export let value: string | null = null
+  export let placeholder: string | null = null
   export let disabled = false
   export let readonly = false
-  export let id: string | undefined = undefined
-  export let height: string | number | undefined = undefined
-  export let minHeight: string | number | undefined = undefined
-  export const getCaretPosition = () => ({
-    start: textarea.selectionStart,
-    end: textarea.selectionEnd,
-  })
+  export let id: string | null = null
+  export let height: number | null = null
+  export let minHeight: number | null = null
   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
+  const dispatch = createEventDispatcher<{ change: string }>()
+  const onChange: FocusEventHandler<HTMLTextAreaElement> = event => {
+    dispatch("change", event.currentTarget.value)
+    isFocused = false
   }
 
-  const getStyleString = (
-    attribute: string,
-    value: string | number | undefined
-  ) => {
+  export function focus() {
+    textarea.focus()
+  }
+
+  export function contents() {
+    return textarea.value
+  }
+
+  const getStyleString = (attribute: string, value: number | null) => {
     if (!attribute || value == null) {
       return ""
     }
@@ -44,7 +46,7 @@
   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 +57,9 @@
     {disabled}
     {readonly}
     {id}
-    on:focus={() => (focus = true)}
+    on:focus={() => (isFocused = true)}
     on:blur={onChange}
+    on:keypress
   >{value || ""}</textarea>
 </div>
 

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/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}"

package/src/Icon/IconAvatar.svelte

@@ -1,16 +1,15 @@
-<script>
+<script lang="ts">
   import Icon from "./Icon.svelte"
-
   import Tooltip from "../Tooltip/Tooltip.svelte"
   import { fade } from "svelte/transition"
 
-  export let icon
-  export let background
-  export let color
-  export let size = "M"
-  export let tooltip
+  export let icon: string | undefined = undefined
+  export let background: string | undefined = undefined
+  export let color: string | undefined = undefined
+  export let size: "XS" | "S" | "M" | "L" = "M"
+  export let tooltip: string | undefined = undefined
 
-  let showTooltip = false
+  let showTooltip: boolean = false
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->

package/src/IconPicker/IconPicker.svelte

@@ -1,19 +1,24 @@
-<script>
+<script lang="ts">
   import "@spectrum-css/popover/dist/index-vars.css"
   import clickOutside from "../Actions/click_outside"
   import { fly } from "svelte/transition"
   import Icon from "../Icon/Icon.svelte"
   import { createEventDispatcher } from "svelte"
 
-  export let value
-  export let size = "M"
-  export let alignRight = false
+  export let value: string | undefined
+  export let size: "S" | "M" | "L" = "M"
+  export let alignRight: boolean = false
 
-  let open = false
+  let open: boolean = false
 
   const dispatch = createEventDispatcher()
 
-  const iconList = [
+  interface IconCategory {
+    label: string
+    icons: string[]
+  }
+
+  const iconList: IconCategory[] = [
     {
       label: "Icons",
       icons: [
@@ -45,12 +50,12 @@
     },
   ]
 
-  const onChange = value => {
+  const onChange = (value: string) => {
     dispatch("change", value)
     open = false
   }
 
-  const handleOutsideClick = event => {
+  const handleOutsideClick = (event: MouseEvent) => {
     if (open) {
       event.stopPropagation()
       open = false
@@ -77,11 +82,11 @@
       class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open"
       class:spectrum-Popover--align-right={alignRight}
     >
-      {#each iconList as icon}
+      {#each iconList as iconList}
         <div class="category">
-          <div class="heading">{icon.label}</div>
+          <div class="heading">{iconList.label}</div>
           <div class="icons">
-            {#each icon.icons as icon}
+            {#each iconList.icons as icon}
               <div
                 on:click={() => {
                   onChange(icon)

package/src/InlineAlert/InlineAlert.svelte

@@ -1,22 +1,22 @@
-<script>
+<script lang="ts">
   import "@spectrum-css/inlinealert/dist/index-vars.css"
   import Button from "../Button/Button.svelte"
   import Icon from "../Icon/Icon.svelte"
 
-  export let type = "info"
-  export let header = ""
-  export let message = ""
-  export let onConfirm = undefined
-  export let buttonText = ""
-  export let cta = false
-  export let link = ""
-  export let linkText = ""
+  export let type: "info" | "error" | "success" | "help" | "negative" = "info"
+  export let header: string = ""
+  export let message: string = ""
+  export let onConfirm: (() => void) | undefined = undefined
+  export let buttonText: string = ""
+  export let cta: boolean = false
+  export let link: string = ""
+  export let linkText: string = ""
 
   $: icon = selectIcon(type)
   // if newlines used, convert them to different elements
   $: split = message.split("\n")
 
-  function selectIcon(alertType) {
+  function selectIcon(alertType: string): string {
     switch (alertType) {
       case "error":
       case "negative":

package/src/Input/CopyInput.svelte

@@ -1,19 +1,21 @@
-<script>
+<script lang="ts">
   import Input from "../Form/Input.svelte"
   import Icon from "../Icon/Icon.svelte"
   import { notifications } from "../Stores/notifications"
 
-  export let label = null
-  export let value
+  export let label: string | undefined = undefined
+  export let value: string | undefined = undefined
 
-  const copyToClipboard = val => {
-    const dummy = document.createElement("textarea")
-    document.body.appendChild(dummy)
-    dummy.value = val
-    dummy.select()
-    document.execCommand("copy")
-    document.body.removeChild(dummy)
-    notifications.success(`Copied to clipboard`)
+  const copyToClipboard = (val: string | undefined) => {
+    if (val) {
+      const dummy = document.createElement("textarea")
+      document.body.appendChild(dummy)
+      dummy.value = val
+      dummy.select()
+      document.execCommand("copy")
+      document.body.removeChild(dummy)
+      notifications.success(`Copied to clipboard`)
+    }
   }
 </script>
 

package/src/Label/Label.svelte

@@ -1,10 +1,10 @@
-<script>
+<script lang="ts">
   import "@spectrum-css/fieldlabel/dist/index-vars.css"
   import TooltipWrapper from "../Tooltip/TooltipWrapper.svelte"
 
-  export let size = "M"
-  export let tooltip = ""
-  export let muted = undefined
+  export let size: "S" | "M" | "L" = "M"
+  export let tooltip: string = ""
+  export let muted: boolean | undefined = undefined
 </script>
 
 <TooltipWrapper {tooltip} {size}>

package/src/Layout/Layout.svelte

@@ -1,12 +1,17 @@
-<script>
-  export let horizontal = false
-  export let paddingX = "M"
-  export let paddingY = "M"
-  export let noPadding = false
-  export let gap = "M"
-  export let noGap = false
-  export let alignContent = "normal"
-  export let justifyItems = "stretch"
+<script lang="ts">
+  export let horizontal: boolean = false
+  export let paddingX: "S" | "M" | "L" | "XL" | "XXL" = "M"
+  export let paddingY: "S" | "M" | "L" | "XL" | "XXL" = "M"
+  export let noPadding: boolean = false
+  export let gap: "XXS" | "XS" | "S" | "M" | "L" | "XL" = "M"
+  export let noGap: boolean = false
+  export let alignContent:
+    | "start"
+    | "center"
+    | "space-between"
+    | "space-around"
+    | "normal" = "normal"
+  export let justifyItems: "stretch" | "start" | "center" | "end" = "stretch"
 </script>
 
 <div

package/src/Layout/Page.svelte

@@ -1,13 +1,13 @@
-<script>
+<script lang="ts">
   import { setContext } from "svelte"
   import clickOutside from "../Actions/click_outside"
 
-  export let wide = false
-  export let narrow = false
-  export let narrower = false
-  export let noPadding = false
+  export let wide: boolean = false
+  export let narrow: boolean = false
+  export let narrower: boolean = false
+  export let noPadding: boolean = false
 
-  let sidePanelVisible = false
+  let sidePanelVisible: boolean = false
 
   setContext("side-panel", {
     open: () => (sidePanelVisible = true),

package/src/List/List.svelte

@@ -1,7 +1,7 @@
-<script>
+<script lang="ts">
   import Detail from "../Typography/Detail.svelte"
 
-  export let title = null
+  export let title: string | null = null
 </script>
 
 <div>

package/src/Markdown/MarkdownEditor.svelte

@@ -1,20 +1,20 @@
-<script>
+<script lang="ts">
   import SpectrumMDE from "./SpectrumMDE.svelte"
   import { createEventDispatcher } from "svelte"
 
-  export let value = null
-  export let height = null
-  export let placeholder = null
-  export let id = null
-  export let fullScreenOffset = 0
-  export let disabled = false
-  export let readonly = false
-  export let easyMDEOptions
+  export let value: string | null = null
+  export let height: string | null = null
+  export let placeholder: string | null = null
+  export let id: string | null = null
+  export let fullScreenOffset: { x: string; y: string } | null = null
+  export let disabled: boolean = false
+  export let readonly: boolean = false
+  export let easyMDEOptions: Record<string, any> = {}
 
   const dispatch = createEventDispatcher()
 
-  let latestValue
-  let mde
+  let latestValue: string | null
+  let mde: any
 
   // Ensure the value is updated if the value prop changes outside the editor's
   // control
@@ -24,7 +24,7 @@
     mde?.togglePreview()
   }
 
-  const checkValue = val => {
+  const checkValue = (val: string | null) => {
     if (mde && val !== latestValue) {
       mde.value(val)
     }

package/src/Markdown/MarkdownViewer.svelte

@@ -1,10 +1,10 @@
-<script>
+<script lang="ts">
   import SpectrumMDE from "./SpectrumMDE.svelte"
 
-  export let value
-  export let height
+  export let value: string | null = null
+  export let height: string | null = null
 
-  let mde
+  let mde: any
 
   // Keep the value up to date
   $: mde && mde.value(value || "")

package/src/Markdown/SpectrumMDE.svelte

@@ -1,17 +1,17 @@
-<script>
+<script lang="ts">
   import EasyMDE from "easymde"
   import "easymde/dist/easymde.min.css"
   import { onMount } from "svelte"
 
-  export let height = null
-  export let scroll = true
-  export let easyMDEOptions = null
-  export let mde = null
-  export let id = null
-  export let fullScreenOffset = null
-  export let disabled = false
+  export let height: string | null = null
+  export let scroll: boolean = true
+  export let easyMDEOptions: Record<string, any> | null = null
+  export let mde: EasyMDE | null = null
+  export let id: string | null = null
+  export let fullScreenOffset: { x: string; y: string } | null = null
+  export let disabled: boolean = false
 
-  let element
+  let element: HTMLTextAreaElement | undefined = undefined
 
   onMount(() => {
     height = height || "200px"
@@ -27,13 +27,13 @@
 
     // Revert the editor when we unmount
     return () => {
-      mde.toTextArea()
+      mde?.toTextArea()
     }
   })
 
   $: styleString = getStyleString(fullScreenOffset)
 
-  const getStyleString = offset => {
+  const getStyleString = (offset: { x?: string; y?: string } | null) => {
     let string = ""
     string += `--fullscreen-offset-x:${offset?.x || "0px"};`
     string += `--fullscreen-offset-y:${offset?.y || "0px"};`

package/src/Menu/Item.svelte

@@ -1,18 +1,18 @@
-<script>
+<script lang="ts">
   import { createEventDispatcher, getContext } from "svelte"
   import Icon from "../Icon/Icon.svelte"
 
   const dispatch = createEventDispatcher()
-  const actionMenu = getContext("actionMenu")
+  const actionMenu = getContext("actionMenu") as { hideAll: () => void }
 
-  export let icon = undefined
-  export let disabled = undefined
-  export let noClose = false
-  export let keyBind = undefined
+  export let icon: string | undefined = undefined
+  export let disabled: boolean | undefined = undefined
+  export let noClose: boolean = false
+  export let keyBind: string | undefined = undefined
 
   $: keys = getKeys(keyBind)
 
-  const getKeys = keyBind => {
+  const getKeys = (keyBind: string | undefined): string[] => {
     let keys = keyBind?.split("+") || []
     for (let i = 0; i < keys.length; i++) {
       if (

package/src/Menu/Menu.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import "@spectrum-css/menu/dist/index-vars.css"
 </script>
 

package/src/Menu/Section.svelte

@@ -1,5 +1,5 @@
-<script>
-  export let heading
+<script lang="ts">
+  export let heading: string
 </script>
 
 <li role="presentation">

package/src/Modal/Content.svelte

@@ -1,7 +1,7 @@
-<script>
+<script lang="ts">
   import Input from "../Form/Input.svelte"
 
-  let value = ""
+  let value: string = ""
 </script>
 
 <Input label="Your Name" bind:value />

package/src/Modal/CustomContent.svelte

@@ -1,11 +1,11 @@
-<script>
+<script lang="ts">
   import { getContext } from "svelte"
   import Context from "../context"
 
-  const { hide } = getContext(Context.Modal)
+  const { hide } = getContext(Context.Modal) as { hide: () => void }
 
-  let count = 0
-  const clicks = 5
+  let count: number = 0
+  const clicks: number = 5
   $: if (count === clicks) hide()
   $: remaining = clicks - count