@budibase/bbui 3.23.48 → 3.24.0

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "3.23.48",
+  "version": "3.24.0",
   "license": "MPL-2.0",
-  "svelte": "src/index.ts",
   "module": "dist/bbui.mjs",
   "exports": {
     ".": {
-      "import": "./dist/bbui.mjs"
+      "import": "./dist/bbui.mjs",
+      "svelte": "./src/index.ts"
     },
     "./package.json": "./package.json"
   },
@@ -16,7 +16,7 @@
     "dev": "vite build --watch --mode=dev"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "1.4.0",
+    "@sveltejs/vite-plugin-svelte": "^6.1.3",
     "vite-plugin-css-injected-by-js": "3.5.2"
   },
   "keywords": [
@@ -107,5 +107,5 @@
       }
     }
   },
-  "gitHead": "0a78faa2adbb8fb3b81de2b9b00352e60178f12f"
+  "gitHead": "7cfa950d39730aa88a1c26c60f8094d6f0b0606d"
 }

package/src/ActionMenu/ActionMenu.svelte

@@ -23,7 +23,7 @@
   // This is needed because display: contents is considered "invisible".
   // It should only ever be an action button, so should be fine.
   function getAnchor(node: HTMLDivElement) {
-    anchor = (node.firstChild as HTMLElement) ?? undefined
+    anchor = (node.firstElementChild as HTMLElement) ?? undefined
   }
 
   export const show = () => {
@@ -81,8 +81,16 @@
   borderRadius={roundedPopover ? "12px" : undefined}
   on:open
   on:close
-  on:mouseenter={openOnHover ? cancelHide : null}
-  on:mouseleave={openOnHover ? queueHide : null}
+  on:mouseenter={() => {
+    if (openOnHover) {
+      cancelHide()
+    }
+  }}
+  on:mouseleave={() => {
+    if (openOnHover) {
+      queueHide()
+    }
+  }}
   bind:open
 >
   <Menu>

package/src/ColorPicker/ColorPicker.svelte

@@ -196,7 +196,7 @@
     class="fill {themeClasses}"
     style={value ? `background: ${value};` : ""}
     class:placeholder={!value}
-  />
+  ></div>
 </div>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->

package/src/Drawer/Drawer.svelte

@@ -178,7 +178,7 @@
         class="underlay"
         class:hidden={!$modal}
         transition:drawerFade|local
-      />
+      ></div>
       <div
         class="drawer"
         class:stacked={depth > 0}
@@ -211,7 +211,7 @@
           </div>
         </header>
         <slot name="body" />
-        <div class="overlay" class:hidden={$modal || depth === 0} />
+        <div class="overlay" class:hidden={$modal || depth === 0}></div>
       </div>
     </div>
   </Portal>

package/src/Form/Core/Checkbox.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-  import { Icon } from "@budibase/bbui"
   import "@spectrum-css/checkbox/dist/index-vars.css"
   import "@spectrum-css/fieldgroup/dist/index-vars.css"
   import { createEventDispatcher } from "svelte"
   import type { ChangeEventHandler } from "svelte/elements"
+  import Icon from "../../Icon/Icon.svelte"
 
   export let value = false
   export let id: string | undefined = undefined

package/src/Form/Core/CheckboxGroup.svelte

@@ -7,7 +7,7 @@
   import "@spectrum-css/fieldgroup/dist/index-vars.css"
   import "@spectrum-css/radio/dist/index-vars.css"
   import { createEventDispatcher } from "svelte"
-  import { Icon } from "@budibase/bbui"
+  import Icon from "../../Icon/Icon.svelte"
 
   export let direction: "horizontal" | "vertical" = "vertical"
   export let value: V[] = []

package/src/Form/Core/EnvDropdown.svelte

@@ -154,7 +154,7 @@
                 <div class="spectrum-Menu-itemLabel">
                   <div class="primary-text">
                     {variable.name}
-                    <span />
+                    <span></span>
                   </div>
                 </div>
               </li>

package/src/Form/Core/Picker.svelte

@@ -83,7 +83,6 @@
 
   let button: HTMLButtonElement | null = null
   let component: HTMLUListElement | null = null
-  let optionIconDescriptor: ResolvedIcon | null = null
   let virtualizedOptions: Array<{ option: O; idx: number }> = []
   let virtualPaddingTop = 0
   let virtualPaddingBottom = 0
@@ -337,9 +336,10 @@
             class="virtual-spacer"
             aria-hidden="true"
             style={`height:${virtualPaddingTop}px`}
-          />
+          ></li>
         {/if}
         {#each virtualizedOptions as { option, idx } (getOptionValue(option, idx) ?? idx)}
+          {@const optionIcon = resolveIcon(getOptionIcon(option, idx))}
           <li
             class="spectrum-Menu-item"
             class:is-selected={isOptionSelected(getOptionValue(option, idx))}
@@ -351,9 +351,9 @@
             on:mouseleave={e => onOptionMouseleave(e, option)}
             class:is-disabled={!isOptionEnabled(option)}
           >
-            {#if (optionIconDescriptor = resolveIcon(getOptionIcon(option, idx)))}
+            {#if optionIcon}
               <span class="option-extra icon">
-                <PickerIcon icon={optionIconDescriptor} {useOptionIconImage} />
+                <PickerIcon icon={optionIcon} {useOptionIconImage} />
               </span>
             {/if}
             {#if getOptionColour(option, idx)}
@@ -396,7 +396,7 @@
             class="virtual-spacer"
             aria-hidden="true"
             style={`height:${virtualPaddingBottom}px`}
-          />
+          ></li>
         {/if}
       {/if}
     </ul>

package/src/Form/Core/RadioGroup.svelte

@@ -49,7 +49,7 @@
           class="spectrum-Radio-input"
           {disabled}
         />
-        <span class="spectrum-Radio-button" />
+        <span class="spectrum-Radio-button"></span>
         <label for="" class="spectrum-Radio-label">
           {getOptionLabel(option)}
         </label>

package/src/Form/Core/Signature.svelte

@@ -188,7 +188,7 @@
         id="signature-canvas"
         bind:this={canvasRef}
         style="--max-sig-width: {width}px; --max-sig-height: {height}px"
-      />
+      ></canvas>
       {#if editable}
         <div class="indicator-overlay">
           <div class="sign-here">

package/src/Form/Core/Switch.svelte

@@ -26,7 +26,7 @@
     type="checkbox"
     class="spectrum-Switch-input"
   />
-  <span class="spectrum-Switch-switch" />
+  <span class="spectrum-Switch-switch"></span>
   {#if text}
     <label class="spectrum-Switch-label" for={id}>{text}</label>
   {/if}

package/src/Form/Core/TextField.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import "@spectrum-css/textfield/dist/index-vars.css"
   import { createEventDispatcher, onMount, tick } from "svelte"
+  import type { FullAutoFill } from "svelte/elements"
   import type { UIEvent } from "@budibase/types"
 
   export let value: string | null = null
@@ -13,7 +14,7 @@
   export let quiet = false
   export let align: "left" | "right" | "center" | undefined = undefined
   export let autofocus: boolean | null = false
-  export let autocomplete: boolean | string | undefined
+  export let autocomplete: FullAutoFill | boolean | null | undefined = undefined
 
   const dispatch = createEventDispatcher()
 
@@ -69,12 +70,16 @@
     return type === "number" ? "decimal" : "text"
   }
 
+  let autocompleteValue: FullAutoFill | null | undefined
+
   $: autocompleteValue =
     typeof autocomplete === "boolean"
       ? autocomplete
         ? "on"
         : "off"
-      : undefined
+      : autocomplete === null
+        ? null
+        : autocomplete
 
   onMount(async () => {
     if (disabled) return

package/src/Form/Input.svelte

@@ -2,6 +2,7 @@
   import Field from "./Field.svelte"
   import TextField from "./Core/TextField.svelte"
   import { createEventDispatcher } from "svelte"
+  import type { FullAutoFill } from "svelte/elements"
 
   export let value: any = undefined
   export let label: string | undefined = undefined
@@ -14,7 +15,7 @@
   export let updateOnChange = true
   export let quiet = false
   export let autofocus: boolean | undefined = undefined
-  export let autocomplete: boolean | string | undefined = undefined
+  export let autocomplete: FullAutoFill | boolean | null | undefined = undefined
   export let helpText: string | undefined = undefined
 
   const dispatch = createEventDispatcher<{

package/src/Icon/InnerIcon.svelte

@@ -55,7 +55,7 @@
   aria-hidden={hidden ? "true" : "false"}
   aria-label={tooltip || name}
   title={tooltip}
-/>
+></i>
 
 <style>
   i {

package/src/Layout/Page.svelte

@@ -19,7 +19,7 @@
   <div class="main">
     <div class="content" class:wide class:noPadding class:narrow class:narrower>
       <slot />
-      <div class="fix-scroll-padding" />
+      <div class="fix-scroll-padding"></div>
     </div>
   </div>
   <div

package/src/Markdown/MarkdownViewer.svelte

@@ -23,7 +23,7 @@
   }
 </script>
 
-<div class="markdown-viewer" style="height:{height};" bind:this={ref} />
+<div class="markdown-viewer" style="height:{height};" bind:this={ref}></div>
 
 <style>
   .markdown-viewer {

package/src/Markdown/SpectrumMDE.svelte

@@ -42,7 +42,7 @@
 </script>
 
 <div class:disabled style={styleString}>
-  <textarea disabled {id} bind:this={element} />
+  <textarea disabled {id} bind:this={element}></textarea>
 </div>
 
 <style>

package/src/Menu/Separator.svelte

@@ -1 +1 @@
-<li class="spectrum-Menu-divider" role="separator" />
+<li class="spectrum-Menu-divider" role="separator"></li>

package/src/Modal/Modal.svelte

@@ -147,7 +147,7 @@
             class="background"
             in:fade={{ duration: 200 }}
             out:fade|local={{ duration: 200 }}
-          />
+          ></div>
           <div class="modal-wrapper" on:mousedown|self={handleOutsideClick}>
             <div
               class="modal-inner-wrapper"

package/src/PhosphorIconPicker/PhosphorIconPicker.svelte

@@ -4,8 +4,10 @@
   import { createEventDispatcher } from "svelte"
   import { PhosphorIcons } from "./icons"
   import TextField from "../Form/Core/TextField.svelte"
-  import { ActionButton, Body, PopoverAlignment } from "@budibase/bbui"
+  import ActionButton from "../ActionButton/ActionButton.svelte"
+  import Body from "../Typography/Body.svelte"
   import Popover from "../Popover/Popover.svelte"
+  import { PopoverAlignment } from "../constants"
 
   export let value: string | undefined
 

package/src/ProgressBar/ProgressBar.svelte

@@ -42,9 +42,9 @@
       style="width: {typeof value === 'number'
         ? value
         : 0}%; --duration: {duration}ms;"
-    />
+    ></div>
   </div>
-  <div class="spectrum-ProgressBar-label" hidden={false} />
+  <div class="spectrum-ProgressBar-label" hidden={false}></div>
 </div>
 
 <style>

package/src/ProgressCircle/ProgressCircle.svelte

@@ -48,16 +48,16 @@
   class:spectrum-ProgressCircle--overBackground={overBackground}
   class="spectrum-ProgressCircle spectrum-ProgressCircle--{convertSize(size)}"
 >
-  <div class="spectrum-ProgressCircle-track" />
+  <div class="spectrum-ProgressCircle-track"></div>
   <div class="spectrum-ProgressCircle-fills">
     <div class="spectrum-ProgressCircle-fillMask1">
       <div class="spectrum-ProgressCircle-fillSubMask1" style={subMask1Style}>
-        <div class="spectrum-ProgressCircle-fill" />
+        <div class="spectrum-ProgressCircle-fill"></div>
       </div>
     </div>
     <div class="spectrum-ProgressCircle-fillMask2">
       <div class="spectrum-ProgressCircle-fillSubMask2" style={subMask2Style}>
-        <div class="spectrum-ProgressCircle-fill" />
+        <div class="spectrum-ProgressCircle-fill"></div>
       </div>
     </div>
   </div>

package/src/Switcher/Switcher.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { createEventDispatcher } from "svelte"
-  import { AbsTooltip, ActionButton } from "@budibase/bbui"
+  import AbsTooltip from "../Tooltip/AbsTooltip.svelte"
+  import ActionButton from "../ActionButton/ActionButton.svelte"
 
   export let leftIcon: string
   export let leftNotificationTooltip: string | undefined = undefined

package/src/Tabs/Tabs.svelte

@@ -123,14 +123,14 @@
       class="spectrum-Tabs-selectionIndicator"
       class:emphasized
       style="width: {width}; height: {height}; left: {left}; top: {top};"
-    />
+    ></div>
   {/if}
 </div>
 
 <div
   class="spectrum-Tabs-content spectrum-Tabs-content-{_id}"
   class:noPadding
-/>
+></div>
 
 <style>
   .spectrum-Tabs--quiet {

package/src/Tooltip/AbsTooltip.svelte

@@ -97,7 +97,7 @@
       transition:fade|local={{ duration: 130 }}
     >
       <span class="spectrum-Tooltip-label">{text}</span>
-      <span class="spectrum-Tooltip-tip" style={tipStyle} />
+      <span class="spectrum-Tooltip-tip" style={tipStyle}></span>
     </span>
   </Portal>
 {/if}

package/src/Tooltip/Tooltip.svelte

@@ -10,7 +10,7 @@
 {#if textWrapping}
   <span class="spectrum-Tooltip spectrum-Tooltip--{direction} is-open tooltip">
     <span class="spectrum-Tooltip-label">{text}</span>
-    <span class="spectrum-Tooltip-tip" />
+    <span class="spectrum-Tooltip-tip"></span>
   </span>
 {:else}
   <!-- The default show on hover tooltip does not support text wrapping -->
@@ -18,7 +18,7 @@
     <slot />
     <div class={`spectrum-Tooltip spectrum-Tooltip--${direction}`}>
       <span class="spectrum-Tooltip-label">{text}</span>
-      <span class="spectrum-Tooltip-tip" />
+      <span class="spectrum-Tooltip-tip"></span>
     </div>
   </span>
 {/if}