@budibase/bbui 3.5.2 → 3.6.0

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/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/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 | undefined = undefined
+  export let height: string | undefined = undefined
 
-  let mde
+  let mde: any
 
   // Keep the value up to date
   $: mde && mde.value(value || "")
@@ -40,6 +40,7 @@
     border: none;
     background: transparent;
     padding: 0;
+    color: inherit;
   }
   .markdown-viewer :global(.EasyMDEContainer) {
     background: transparent;

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
 

package/src/Modal/Modal.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import "@spectrum-css/modal/dist/index-vars.css"
   import "@spectrum-css/underlay/dist/index-vars.css"
   import { createEventDispatcher, setContext, tick, onMount } from "svelte"
@@ -6,33 +6,37 @@
   import Portal from "svelte-portal"
   import Context from "../context"
 
-  export let fixed = false
-  export let inline = false
-  export let disableCancel = false
-  export let autoFocus = true
-  export let zIndex = 1001
+  export let fixed: boolean = false
+  export let inline: boolean = false
+  export let disableCancel: boolean = false
+  export let autoFocus: boolean = true
+  export let zIndex: number = 1001
 
-  const dispatch = createEventDispatcher()
-  let visible = fixed || inline
-  let modal
+  const dispatch = createEventDispatcher<{
+    show: void
+    hide: void
+    cancel: void
+  }>()
+  let visible: boolean = fixed || inline
+  let modal: HTMLElement | undefined
 
   $: dispatch(visible ? "show" : "hide")
 
-  export function show() {
+  export function show(): void {
     if (visible) {
       return
     }
     visible = true
   }
 
-  export function hide() {
+  export function hide(): void {
     if (!visible || fixed || inline) {
       return
     }
     visible = false
   }
 
-  export function toggle() {
+  export function toggle(): void {
     if (visible) {
       hide()
     } else {
@@ -40,7 +44,7 @@
     }
   }
 
-  export function cancel() {
+  export function cancel(): void {
     if (!visible || disableCancel) {
       return
     }
@@ -48,34 +52,33 @@
     hide()
   }
 
-  function handleKey(e) {
+  function handleKey(e: KeyboardEvent): void {
     if (visible && e.key === "Escape") {
       cancel()
     }
   }
 
-  async function focusModal(node) {
-    if (!autoFocus) {
-      return
-    }
-    await tick()
-
-    // Try to focus first input
-    const inputs = node.querySelectorAll("input")
-    if (inputs?.length) {
-      inputs[0].focus()
-    }
-
-    // Otherwise try to focus confirmation button
-    else if (modal) {
-      const confirm = modal.querySelector(".confirm-wrap .spectrum-Button")
-      if (confirm) {
-        confirm.focus()
+  function focusModal(node: HTMLElement): void {
+    if (!autoFocus) return
+    tick().then(() => {
+      const inputs = node.querySelectorAll("input")
+      if (inputs?.length) {
+        inputs[0].focus()
+      } else if (modal) {
+        const confirm = modal.querySelector(".confirm-wrap .spectrum-Button")
+        if (confirm) {
+          ;(confirm as HTMLElement).focus()
+        }
       }
-    }
+    })
   }
 
-  setContext(Context.Modal, { show, hide, toggle, cancel })
+  setContext(Context.Modal, {
+    show,
+    hide,
+    toggle,
+    cancel,
+  } as { show: () => void; hide: () => void; toggle: () => void; cancel: () => void })
 
   onMount(() => {
     document.addEventListener("keydown", handleKey)

package/src/Modal/ModalContent.svelte

@@ -1,8 +1,8 @@
-<script context="module">
+<script context="module" lang="ts">
   export const keepOpen = Symbol("keepOpen")
 </script>
 
-<script>
+<script lang="ts">
   import "@spectrum-css/dialog/dist/index-vars.css"
   import { getContext } from "svelte"
   import Button from "../Button/Button.svelte"
@@ -11,31 +11,36 @@
   import Context from "../context"
   import ProgressCircle from "../ProgressCircle/ProgressCircle.svelte"
 
-  export let title = undefined
-  export let size = "S"
-  export let cancelText = "Cancel"
-  export let confirmText = "Confirm"
-  export let showCancelButton = true
-  export let showConfirmButton = true
-  export let showCloseIcon = true
-  export let onConfirm = undefined
-  export let onCancel = undefined
-  export let disabled = false
-  export let showDivider = true
-
-  export let showSecondaryButton = false
-  export let secondaryButtonText = undefined
-  export let secondaryAction = undefined
-  export let secondaryButtonWarning = false
-  export let custom = false
-
-  const { hide, cancel } = getContext(Context.Modal)
-
-  let loading = false
-
+  export let title: string | undefined = undefined
+  export let size: "S" | "M" | "L" | "XL" = "S"
+  export let cancelText: string = "Cancel"
+  export let confirmText: string = "Confirm"
+  export let showCancelButton: boolean = true
+  export let showConfirmButton: boolean = true
+  export let showCloseIcon: boolean = true
+  export let onConfirm: (() => Promise<any> | any) | undefined = undefined
+  export let onCancel: (() => Promise<any> | any) | undefined = undefined
+  export let disabled: boolean = false
+  export let showDivider: boolean = true
+
+  export let showSecondaryButton: boolean = false
+  export let secondaryButtonText: string | undefined = undefined
+  export let secondaryAction: ((_e: Event) => Promise<any> | any) | undefined =
+    undefined
+  export let secondaryButtonWarning: boolean = false
+  export let custom: boolean = false
+
+  const { hide, cancel } = getContext(Context.Modal) as {
+    hide: () => void
+    cancel: () => void
+  }
+
+  let loading: boolean = false
+
+  let confirmDisabled: boolean
   $: confirmDisabled = disabled || loading
 
-  async function secondary(e) {
+  async function secondary(e: Event): Promise<void> {
     loading = true
     if (!secondaryAction || (await secondaryAction(e)) !== keepOpen) {
       hide()
@@ -43,7 +48,7 @@
     loading = false
   }
 
-  export async function confirm() {
+  export async function confirm(): Promise<void> {
     loading = true
     if (!onConfirm || (await onConfirm()) !== keepOpen) {
       hide()
@@ -51,7 +56,7 @@
     loading = false
   }
 
-  async function close() {
+  async function close(): Promise<void> {
     loading = true
     if (!onCancel || (await onCancel()) !== keepOpen) {
       cancel()
@@ -90,7 +95,6 @@
       {/if}
     {/if}
 
-    <!-- TODO: Remove content-grid class once Layout components are in bbui -->
     <section class="spectrum-Dialog-content content-grid">
       <slot {loading} />
     </section>
@@ -102,7 +106,6 @@
         {#if showSecondaryButton && secondaryButtonText && secondaryAction}
           <div class="secondary-action">
             <Button
-              group
               secondary
               warning={secondaryButtonWarning}
               on:click={secondary}>{secondaryButtonText}</Button
@@ -111,14 +114,13 @@
         {/if}
 
         {#if showCancelButton}
-          <Button group secondary on:click={close}>
+          <Button secondary on:click={close}>
             {cancelText}
           </Button>
         {/if}
         {#if showConfirmButton}
           <span class="confirm-wrap">
             <Button
-              group
               cta
               {...$$restProps}
               disabled={confirmDisabled}