@budibase/bbui 3.23.48 → 3.24.1

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.1",
   "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": "6838c955ce1adef31581d699de2c9a6c81d37de5"
 }

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/CollapsibleSearch.svelte

@@ -0,0 +1,128 @@
+<script lang="ts">
+  import { createEventDispatcher, tick } from "svelte"
+  import Icon from "../Icon/Icon.svelte"
+  import Search from "./Search.svelte"
+
+  export let value: string | undefined = undefined
+  export let placeholder: string | undefined = undefined
+  export let disabled = false
+  export let quiet = false
+  export let updateOnChange = true
+  export let width: string = "220px"
+  export let open = false
+  export let collapseOnBlur = true
+  export let inputRef: HTMLInputElement | undefined = undefined
+
+  const dispatch = createEventDispatcher()
+
+  const handleChange = (event: CustomEvent<string>) => {
+    value = event.detail
+    dispatch("change", event.detail)
+  }
+
+  const handleClear = () => {
+    open = false
+    dispatch("clear")
+  }
+
+  const openSearch = async () => {
+    if (disabled) {
+      return
+    }
+    open = true
+    await tick()
+    inputRef?.focus()
+  }
+
+  const handleBlur = (event: FocusEvent) => {
+    if (collapseOnBlur) {
+      const inputValue = (event.target as HTMLInputElement | null)?.value || ""
+      if (!inputValue.trim()) {
+        open = false
+      }
+    }
+    dispatch("blur", event)
+  }
+
+  const forwardEvent = (event: Event) => {
+    dispatch(event.type, event)
+  }
+</script>
+
+<div class="collapsible-search" style={`--collapsible-search-width: ${width}`}>
+  {#if !open}
+    <button
+      class="search-toggle"
+      type="button"
+      on:click={openSearch}
+      aria-label="Open search"
+    >
+      <Icon name="magnifying-glass" size="S" />
+    </button>
+  {/if}
+  <div class="collapsible-search-input" class:open>
+    <Search
+      {updateOnChange}
+      {disabled}
+      {placeholder}
+      {quiet}
+      {value}
+      bind:inputRef
+      on:change={handleChange}
+      on:clear={handleClear}
+      on:blur={handleBlur}
+      on:focus={forwardEvent}
+      on:input={forwardEvent}
+      on:click={forwardEvent}
+    />
+  </div>
+</div>
+
+<style>
+  .collapsible-search {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-xs);
+  }
+
+  .collapsible-search-input {
+    width: 0;
+    opacity: 0;
+    overflow: hidden;
+    pointer-events: none;
+    visibility: hidden;
+    transition:
+      width 200ms ease,
+      opacity 200ms ease;
+  }
+
+  .collapsible-search-input.open {
+    width: var(--collapsible-search-width);
+    opacity: 1;
+    overflow: visible;
+    pointer-events: auto;
+    visibility: visible;
+  }
+
+  .search-toggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    border-radius: 6px;
+    border: 1px solid var(--spectrum-global-color-gray-200);
+    background-color: var(--spectrum-global-color-gray-100);
+    color: var(--spectrum-global-color-gray-800);
+    cursor: pointer;
+  }
+
+  .search-toggle:hover {
+    background-color: var(--spectrum-global-color-gray-300);
+  }
+
+  .search-toggle:focus {
+    outline: 2px solid var(--spectrum-global-color-blue-400);
+    outline-offset: 2px;
+  }
+</style>

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

@@ -22,6 +22,7 @@
   import type { PickerIconInput, ResolvedIcon } from "../../types/Picker"
 
   export let id: string | undefined = undefined
+  export let size: "S" | "M" | "L" = "M"
   export let disabled: boolean = false
   export let fieldText: string = ""
   export let fieldIcon: PickerIconInput = undefined
@@ -83,7 +84,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
@@ -224,7 +224,7 @@
 
 <button
   {id}
-  class="spectrum-Picker spectrum-Picker--sizeM"
+  class="spectrum-Picker spectrum-Picker--size{size}"
   class:spectrum-Picker--quiet={quiet}
   {disabled}
   class:is-open={open}
@@ -337,9 +337,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 +352,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 +397,7 @@
             class="virtual-spacer"
             aria-hidden="true"
             style={`height:${virtualPaddingBottom}px`}
-          />
+          ></li>
         {/if}
       {/if}
     </ul>
@@ -419,6 +420,8 @@
   .spectrum-Picker {
     width: 100%;
     box-shadow: none;
+    border: 1px solid var(--spectrum-global-color-gray-200);
+    border-radius: 6px;
   }
   .spectrum-Picker-label.auto-width {
     margin-right: var(--spacing-xs);

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/Search.svelte

@@ -11,13 +11,23 @@
   export let quiet = false
   export let inputRef: HTMLElement | undefined = undefined
 
-  const dispatch = createEventDispatcher()
+  interface SearchEvents {
+    change: any
+    clear: void
+  }
+
+  const dispatch = createEventDispatcher<SearchEvents>()
   let focus = false
 
   const updateValue = (value: any) => {
     dispatch("change", value)
   }
 
+  const clearValue = () => {
+    updateValue("")
+    dispatch("clear")
+  }
+
   const onFocus = () => {
     focus = true
   }
@@ -71,7 +81,7 @@
     />
   </div>
   <button
-    on:click={() => updateValue("")}
+    on:click={clearValue}
     type="reset"
     class="spectrum-ClearButton spectrum-Search-clearButton"
   >

package/src/Form/Core/Select.svelte

@@ -30,6 +30,7 @@
     | ((_option: O, _index?: number) => string)
     | undefined = undefined
   export let readonly: boolean = false
+  export let size: "S" | "M" | "L" = "M"
   export let quiet: boolean = false
   export let autoWidth: boolean = false
   export let autocomplete: boolean = false
@@ -98,6 +99,7 @@
   bind:open
   bind:searchTerm
   on:loadMore
+  {size}
   {quiet}
   {id}
   {disabled}

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/Form/Search.svelte

@@ -30,6 +30,7 @@
     {quiet}
     bind:inputRef
     on:change={onChange}
+    on:clear
     on:click
     on:input
     on:focus

package/src/Form/Select.svelte

@@ -28,6 +28,7 @@
     | ((_option: O, _index?: number) => boolean)
     | undefined = undefined
   export let quiet: boolean = false
+  export let size: "S" | "M" | "L" = "M"
   export let autoWidth: boolean = false
   export let sort: boolean = false
   export let tooltip: string | undefined = undefined
@@ -62,6 +63,7 @@
 
 <Field {helpText} {label} {labelPosition} {error} {tooltip}>
   <Select
+    {size}
     {quiet}
     {loading}
     {disabled}

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}

package/src/Typography/Body.svelte

@@ -24,7 +24,6 @@
 <style>
   p {
     text-wrap: pretty;
-    letter-spacing: -0.01em !important;
     text-rendering: optimizelegibility;
   }
 </style>

package/src/index.ts

@@ -12,6 +12,7 @@ export { default as Dropzone } from "./Form/Dropzone.svelte"
 export { default as EnvDropdown } from "./Form/EnvDropdown.svelte"
 export { default as FieldLabel } from "./Form/FieldLabel.svelte"
 export { default as File } from "./Form/File.svelte"
+export { default as CollapsibleSearch } from "./Form/CollapsibleSearch.svelte"
 export { default as Input } from "./Form/Input.svelte"
 export { default as InputDropdown } from "./Form/InputDropdown.svelte"
 export { default as Multiselect } from "./Form/Multiselect.svelte"