@budibase/bbui 3.5.2 → 3.5.3

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}

package/src/Notification/Notification.svelte

@@ -1,17 +1,17 @@
-<script>
+<script lang="ts">
   import { ActionButton } from "../"
 
   import { createEventDispatcher } from "svelte"
 
-  export let type = "info"
-  export let icon = "Info"
-  export let message = ""
-  export let dismissable = false
-  export let actionMessage = null
-  export let action = null
-  export let wide = false
+  export let type: string = "info"
+  export let icon: string = "Info"
+  export let message: string = ""
+  export let dismissable: boolean = false
+  export let actionMessage: string | null = null
+  export let action: ((_dismiss: () => void) => void) | null = null
+  export let wide: boolean = false
 
-  const dispatch = createEventDispatcher()
+  const dispatch = createEventDispatcher<{ dismiss: void }>()
 </script>
 
 <div class="spectrum-Toast spectrum-Toast--{type}" class:wide>

package/src/Notification/NotificationDisplay.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import "@spectrum-css/toast/dist/index-vars.css"
   import Portal from "svelte-portal"
   import { notifications } from "../Stores/notifications"

package/src/Pagination/Pagination.svelte

@@ -1,20 +1,19 @@
-<script>
+<script lang="ts">
   import "@spectrum-css/pagination/dist/index-vars.css"
   import "@spectrum-css/actionbutton/dist/index-vars.css"
   import "@spectrum-css/typography/dist/index-vars.css"
 
-  export let page
-  export let goToPrevPage
-  export let goToNextPage
-  export let hasPrevPage = true
-  export let hasNextPage = true
+  export let page: number
+  export let goToPrevPage: () => void
+  export let goToNextPage: () => void
+  export let hasPrevPage: boolean = true
+  export let hasNextPage: boolean = true
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <nav class="spectrum-Pagination spectrum-Pagination--explicit">
   <div
-    href="#"
     class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-Pagination-prevButton"
     on:click={hasPrevPage ? goToPrevPage : null}
     class:is-disabled={!hasPrevPage}
@@ -32,7 +31,6 @@
     Page {page}
   </span>
   <div
-    href="#"
     class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-Pagination-nextButton"
     on:click={hasNextPage ? goToNextPage : null}
     class:is-disabled={!hasNextPage}

package/src/ProgressBar/ProgressBar.svelte

@@ -1,25 +1,24 @@
-<script>
+<script lang="ts">
   import "@spectrum-css/progressbar/dist/index-vars.css"
 
-  export let value = false
-  export let duration = 1000
-  export let width = false
-  export let sideLabel = false
-  export let hidePercentage = true
-  export let color // red, green, default = blue
-  export let size = "M"
+  export let value: number | boolean = false
+  export let duration: number = 1000
+  export let width: string | boolean = false
+  export let sideLabel: boolean = false
+  export let hidePercentage: boolean = true
+  export let color: "red" | "green" | undefined = undefined // red, green, default = blue
+  export let size: string = "M"
 </script>
 
 <div
   class:spectrum-ProgressBar--indeterminate={!value && value !== 0}
   class:spectrum-ProgressBar--sideLabel={sideLabel}
   class="spectrum-ProgressBar spectrum-ProgressBar--size{size}"
-  {value}
   role="progressbar"
-  aria-valuenow={value}
+  aria-valuenow={typeof value === "number" ? value : undefined}
   aria-valuemin="0"
   aria-valuemax="100"
-  style={width ? `width: ${width};` : ""}
+  style={width ? `width: ${typeof width === "string" ? width : ""};` : ""}
 >
   {#if $$slots}
     <div
@@ -32,7 +31,7 @@
     <div
       class="spectrum-FieldLabel spectrum-ProgressBar-percentage spectrum-FieldLabel--size{size}"
     >
-      {Math.round(value)}%
+      {Math.round(Number(value))}%
     </div>
   {/if}
   <div class="spectrum-ProgressBar-track">
@@ -40,10 +39,12 @@
       class="spectrum-ProgressBar-fill"
       class:color-green={color === "green"}
       class:color-red={color === "red"}
-      style="width: {value}%; --duration: {duration}ms;"
+      style="width: {typeof value === 'number'
+        ? value
+        : 0}%; --duration: {duration}ms;"
     />
   </div>
-  <div class="spectrum-ProgressBar-label" hidden="" />
+  <div class="spectrum-ProgressBar-label" hidden={false} />
 </div>
 
 <style>

package/src/ProgressCircle/ProgressCircle.svelte

@@ -1,8 +1,8 @@
-<script>
+<script lang="ts">
   import "@spectrum-css/progresscircle/dist/index-vars.css"
 
-  export let size = "M"
-  function convertSize(size) {
+  export let size: "S" | "M" | "L" = "M"
+  function convertSize(size: "S" | "M" | "L"): string | undefined {
     switch (size) {
       case "S":
         return "small"
@@ -13,18 +13,18 @@
     }
   }
 
-  export let value = null
-  export let minValue = 0
-  export let maxValue = 100
+  export let value: number | null = null
+  export let minValue: number = 0
+  export let maxValue: number = 100
 
-  let subMask1Style
-  let subMask2Style
+  let subMask1Style: string | undefined
+  let subMask2Style: string | undefined
   $: calculateSubMasks(value)
 
-  function calculateSubMasks(value) {
+  function calculateSubMasks(value: number | null): void {
     if (value) {
       let percentage = ((value - minValue) / (maxValue - minValue)) * 100
-      let angle
+      let angle: number
       if (percentage > 0 && percentage <= 50) {
         angle = -180 + (percentage / 50) * 180
         subMask1Style = `transform: rotate(${angle}deg);`
@@ -37,7 +37,7 @@
     }
   }
 
-  export let overBackground = false
+  export let overBackground: boolean = false
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->

package/src/Tooltip/TooltipWrapper.svelte

@@ -3,7 +3,7 @@
   import AbsTooltip from "./AbsTooltip.svelte"
 
   export let tooltip: string = ""
-  export let size: "S" | "M" = "M"
+  export let size: "S" | "M" | "L" = "M"
   export let disabled: boolean = true
 </script>
 

package/src/index.ts

@@ -17,7 +17,6 @@ export { default as Toggle } from "./Form/Toggle.svelte"
 export { default as RadioGroup } from "./Form/RadioGroup.svelte"
 export { default as Checkbox } from "./Form/Checkbox.svelte"
 export { default as InputDropdown } from "./Form/InputDropdown.svelte"
-export { default as PickerDropdown } from "./Form/PickerDropdown.svelte"
 export { default as EnvDropdown } from "./Form/EnvDropdown.svelte"
 export { default as Multiselect } from "./Form/Multiselect.svelte"
 export { default as Search } from "./Form/Search.svelte"
@@ -87,8 +86,6 @@ export { default as MarkdownEditor } from "./Markdown/MarkdownEditor.svelte"
 export { default as MarkdownViewer } from "./Markdown/MarkdownViewer.svelte"
 export { default as List } from "./List/List.svelte"
 export { default as ListItem } from "./List/ListItem.svelte"
-export { default as IconSideNav } from "./IconSideNav/IconSideNav.svelte"
-export { default as IconSideNavItem } from "./IconSideNav/IconSideNavItem.svelte"
 export { default as Accordion } from "./Accordion/Accordion.svelte"
 export { default as AbsTooltip } from "./Tooltip/AbsTooltip.svelte"
 

package/src/Form/PickerDropdown.svelte

@@ -1,132 +0,0 @@
-<script>
-  import Field from "./Field.svelte"
-  import PickerDropdown from "./Core/PickerDropdown.svelte"
-  import { createEventDispatcher } from "svelte"
-
-  export let primaryValue = null
-  export let secondaryValue = null
-  export let inputType = "text"
-  export let label = null
-  export let labelPosition = "above"
-  export let secondaryPlaceholder = null
-  export let autocomplete
-  export let placeholder = null
-  export let disabled = false
-  export let readonly = false
-  export let error = null
-  export let getSecondaryOptionLabel = option =>
-    extractProperty(option, "label")
-  export let getSecondaryOptionValue = option =>
-    extractProperty(option, "value")
-  export let getSecondaryOptionColour = () => {}
-  export let getSecondaryOptionIcon = () => {}
-  export let quiet = false
-  export let autofocus
-  export let primaryOptions = []
-  export let secondaryOptions = []
-  export let searchTerm
-  export let showClearIcon = true
-  export let helpText = null
-
-  let primaryLabel
-  let secondaryLabel
-  const dispatch = createEventDispatcher()
-
-  $: secondaryFieldText = getSecondaryFieldText(
-    secondaryValue,
-    secondaryOptions,
-    secondaryPlaceholder
-  )
-  $: secondaryFieldIcon = getSecondaryFieldAttribute(
-    getSecondaryOptionIcon,
-    secondaryValue,
-    secondaryOptions
-  )
-  $: secondaryFieldColour = getSecondaryFieldAttribute(
-    getSecondaryOptionColour,
-    secondaryValue,
-    secondaryOptions
-  )
-
-  const getSecondaryFieldAttribute = (getAttribute, value, options) => {
-    // Wait for options to load if there is a value but no options
-
-    if (!options?.length) {
-      return ""
-    }
-
-    const index = options.findIndex(
-      (option, idx) => getSecondaryOptionValue(option, idx) === value
-    )
-
-    return index !== -1 ? getAttribute(options[index], index) : null
-  }
-
-  const getSecondaryFieldText = (value, options, placeholder) => {
-    // Always use placeholder if no value
-    if (value == null || value === "") {
-      return placeholder || "Choose an option"
-    }
-
-    return getSecondaryFieldAttribute(getSecondaryOptionLabel, value, options)
-  }
-
-  const onPickPrimary = e => {
-    primaryLabel = e?.detail?.label || null
-    primaryValue = e?.detail?.value || null
-    dispatch("pickprimary", e?.detail?.value || {})
-  }
-
-  const onPickSecondary = e => {
-    secondaryValue = e.detail
-    dispatch("picksecondary", e.detail)
-  }
-
-  const extractProperty = (value, property) => {
-    if (value && typeof value === "object") {
-      return value[property]
-    }
-    return value
-  }
-
-  const updateSearchTerm = e => {
-    searchTerm = e.detail
-  }
-</script>
-
-<Field {helpText} {label} {labelPosition} {error}>
-  <PickerDropdown
-    {searchTerm}
-    {autocomplete}
-    {error}
-    {disabled}
-    {readonly}
-    {placeholder}
-    {inputType}
-    {quiet}
-    {autofocus}
-    {primaryOptions}
-    {secondaryOptions}
-    {getSecondaryOptionLabel}
-    {getSecondaryOptionValue}
-    {getSecondaryOptionIcon}
-    {getSecondaryOptionColour}
-    {secondaryFieldText}
-    {secondaryFieldIcon}
-    {secondaryFieldColour}
-    {primaryValue}
-    {secondaryValue}
-    {primaryLabel}
-    {secondaryLabel}
-    {showClearIcon}
-    on:pickprimary={onPickPrimary}
-    on:picksecondary={onPickSecondary}
-    on:search={updateSearchTerm}
-    on:click
-    on:input
-    on:blur
-    on:focus
-    on:keyup
-    on:closed
-  />
-</Field>

package/src/IconSideNav/IconSideNav.svelte

@@ -1,14 +0,0 @@
-<div class="icon-side-nav">
-  <slot />
-</div>
-
-<style>
-  .icon-side-nav {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: center;
-    padding: var(--spacing-s);
-    gap: var(--spacing-xs);
-  }
-</style>

package/src/IconSideNav/IconSideNavItem.svelte

@@ -1,58 +0,0 @@
-<script>
-  import Icon from "../Icon/Icon.svelte"
-  import Tooltip from "../Tooltip/Tooltip.svelte"
-  import { fade } from "svelte/transition"
-
-  export let icon
-  export let active = false
-  export let tooltip
-
-  let showTooltip = false
-</script>
-
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<div
-  class="icon-side-nav-item"
-  class:active
-  on:mouseover={() => (showTooltip = true)}
-  on:focus={() => (showTooltip = true)}
-  on:mouseleave={() => (showTooltip = false)}
-  on:click
->
-  <Icon name={icon} hoverable />
-  {#if tooltip && showTooltip}
-    <div class="tooltip" in:fade={{ duration: 130, delay: 250 }}>
-      <Tooltip textWrapping direction="right" text={tooltip} />
-    </div>
-  {/if}
-</div>
-
-<style>
-  .icon-side-nav-item {
-    width: 36px;
-    height: 36px;
-    display: grid;
-    place-items: center;
-    border-radius: 4px;
-    position: relative;
-    cursor: pointer;
-    transition: background 130ms ease-out;
-  }
-  .icon-side-nav-item:hover :global(svg),
-  .active :global(svg) {
-    color: var(--spectrum-global-color-gray-900);
-  }
-  .active {
-    background: var(--spectrum-global-color-gray-300);
-  }
-  .tooltip {
-    position: absolute;
-    pointer-events: none;
-    left: calc(100% - 4px);
-    top: 50%;
-    white-space: nowrap;
-    transform: translateY(-50%);
-    z-index: 1;
-  }
-</style>

package/src/Menu/Menu.svench

@@ -1,19 +0,0 @@
-<script>
-    import Menu from './Menu.svelte'
-    import Separator from './Separator.svelte'
-    import Section from './Section.svelte'
-    import Item from './Item.svelte'
-</script>
-
-<Menu>
-    <Section heading="Section heading">
-        <Item>Some Item 1</Item>
-        <Item>Some Item 2</Item>
-        <Item>Some Item 3</Item>
-    </Section>
-    <Separator />
-    <Section heading="Section heading">
-        <Item icon="SaveFloppy">Save</Item>
-        <Item disabled icon="DataDownload">Download</Item>
-    </Section>
-</Menu>