@budibase/bbui 3.25.4 → 3.26.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "3.25.4",
+  "version": "3.26.1",
   "license": "MPL-2.0",
   "module": "dist/bbui.mjs",
   "exports": {
@@ -107,5 +107,5 @@
       }
     }
   },
-  "gitHead": "4a51aa9f4675ffa6555788aeaf6c31b522a952b3"
+  "gitHead": "3ee1bf769467a216a2e44443e01810cb1b076dfc"
 }

package/src/Form/Core/Picker.svelte

@@ -27,6 +27,7 @@
   export let fieldText: string = ""
   export let fieldIcon: PickerIconInput = undefined
   export let fieldColour: string = ""
+  export let fieldSubtitle: string | null = null
   export let isPlaceholder: boolean = false
   export let placeholderOption: string | undefined | boolean = undefined
   export let options: O[] = []
@@ -250,8 +251,12 @@
     class="spectrum-Picker-label"
     class:is-placeholder={isPlaceholder}
     class:auto-width={autoWidth}
+    class:has-subtitle={!!fieldSubtitle}
   >
-    {fieldText}
+    <span class="picker-label-text">{fieldText}</span>
+    {#if fieldSubtitle}
+      <span class="picker-label-subtitle">{fieldSubtitle}</span>
+    {/if}
   </span>
   {#if !hideChevron}
     <Icon name="caret-down" size="S" />
@@ -534,6 +539,26 @@
     display: block;
     margin-top: var(--spacing-s);
   }
+  .spectrum-Picker-label.has-subtitle {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--spacing-xs);
+    white-space: normal;
+    overflow: visible;
+    height: auto;
+    line-height: normal;
+  }
+  .spectrum-Picker-label.has-subtitle .picker-label-text {
+    font-size: 12px;
+    line-height: 15px;
+  }
+  .picker-label-subtitle {
+    font-size: 12px;
+    line-height: 15px;
+    color: var(--spectrum-global-color-gray-600);
+    font-weight: 500;
+  }
 
   .select-all-item {
     border-bottom: 1px solid var(--spectrum-global-color-gray-200);

package/src/Form/Core/RadioGroup.svelte

@@ -11,6 +11,8 @@
   export let getOptionLabel = option => option
   export let getOptionValue = option => option
   export let getOptionTitle = option => option
+  export let getOptionSubtitle = option => option?.subtitle ?? undefined
+  export let getOptionDisabled = option => option?.disabled ?? false
   export let sort = false
 
   const dispatch = createEventDispatcher()
@@ -36,6 +38,7 @@
 <div class={`spectrum-FieldGroup spectrum-FieldGroup--${direction}`}>
   {#if parsedOptions && Array.isArray(parsedOptions)}
     {#each parsedOptions as option}
+      {@const isOptionDisabled = disabled || getOptionDisabled(option)}
       <div
         title={getOptionTitle(option)}
         class="spectrum-Radio spectrum-FieldGroup-item spectrum-Radio--emphasized"
@@ -47,11 +50,16 @@
           value={getOptionValue(option)}
           type="radio"
           class="spectrum-Radio-input"
-          {disabled}
+          disabled={isOptionDisabled}
         />
         <span class="spectrum-Radio-button"></span>
-        <label for="" class="spectrum-Radio-label">
-          {getOptionLabel(option)}
+        <label for="" class="spectrum-Radio-label radio-label">
+          <span class="radio-label-text">{getOptionLabel(option)}</span>
+          {#if getOptionSubtitle(option)}
+            <span class="radio-label-subtitle">
+              {getOptionSubtitle(option)}
+            </span>
+          {/if}
         </label>
       </div>
     {/each}
@@ -65,4 +73,8 @@
   .readonly {
     pointer-events: none;
   }
+  .radio-label-subtitle {
+    font-size: 12px;
+    color: var(--spectrum-global-color-gray-600);
+  }
 </style>

package/src/Form/Core/Select.svelte

@@ -22,6 +22,7 @@
     option?.colour ?? undefined
   export let getOptionSubtitle = (option: O, _index?: number) =>
     option?.subtitle ?? undefined
+  export let showSelectedSubtitle: boolean = false
   export let compare = (option: O, value: V) => option === value
   export let useOptionIconImage = false
   export let isOptionEnabled = (option: O, _index?: number) =>
@@ -49,6 +50,9 @@
   const dispatch = createEventDispatcher()
 
   $: fieldText = getFieldText(value, options, placeholder)
+  $: fieldSubtitle = showSelectedSubtitle
+    ? getFieldAttribute(getOptionSubtitle, value, options)
+    : null
   $: fieldIcon = getFieldAttribute(getOptionIcon, value, options)
   $: fieldColour = getFieldAttribute(getOptionColour, value, options)
 
@@ -105,6 +109,7 @@
   {disabled}
   {readonly}
   {fieldText}
+  {fieldSubtitle}
   {fieldIcon}
   {fieldColour}
   {options}

package/src/Form/PillInput.svelte

@@ -0,0 +1,251 @@
+<script lang="ts">
+  import "@spectrum-css/textfield/dist/index-vars.css"
+  import Field from "./Field.svelte"
+  import Tag from "../Tags/Tag.svelte"
+  import type { LabelPosition } from "../types"
+  import { createEventDispatcher } from "svelte"
+
+  export let value: string[] = []
+  export let label: string | undefined = undefined
+  export let labelPosition: LabelPosition = "above"
+  export let error: string | undefined = undefined
+  export let helpText: string | undefined = undefined
+  export let placeholder: string | undefined = undefined
+  export let disabled: boolean = false
+  export let readonly: boolean = false
+  export let id: string | undefined = undefined
+  export let delimiter = ","
+  export let splitOnSpace = false
+  export let allowDuplicates = false
+  export let maxItems: number | undefined = undefined
+
+  let inputValue = ""
+  let focused = false
+  let inputEl: HTMLInputElement | null = null
+
+  const dispatch = createEventDispatcher()
+
+  const updateValue = (next: string[]) => {
+    value = next
+    dispatch("change", next)
+  }
+
+  const notifyMax = () => {
+    if (maxItems != null) {
+      dispatch("max", maxItems)
+    }
+  }
+
+  const addTokens = (tokens: string[]) => {
+    const cleaned = tokens.map(token => token.trim()).filter(Boolean)
+    if (!cleaned.length) {
+      return
+    }
+
+    if (maxItems != null && value.length >= maxItems) {
+      notifyMax()
+      return
+    }
+
+    const available =
+      maxItems != null ? Math.max(maxItems - value.length, 0) : cleaned.length
+    if (available === 0) {
+      notifyMax()
+      return
+    }
+
+    const next = cleaned.slice(0, available).reduce(
+      (acc, token) => {
+        if (allowDuplicates || !acc.includes(token)) {
+          acc.push(token)
+        }
+        return acc
+      },
+      [...value]
+    )
+
+    updateValue(next)
+
+    if (maxItems != null && cleaned.length > available) {
+      notifyMax()
+    }
+  }
+
+  const removeToken = (index: number) => {
+    updateValue(value.filter((_, idx) => idx !== index))
+  }
+
+  const escapeRegExp = (value: string) =>
+    value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")
+
+  const getSplitPattern = () => {
+    const parts = [escapeRegExp(delimiter)]
+    if (splitOnSpace) {
+      parts.push("\\s")
+    }
+    return new RegExp(`(?:${parts.join("|")})+`)
+  }
+
+  const shouldSplit = (value: string) => {
+    const pattern = getSplitPattern()
+    return pattern.test(value)
+  }
+
+  const handleInput = (event: Event) => {
+    if (readonly || disabled) {
+      return
+    }
+    const target = event.target as HTMLInputElement
+    inputValue = target.value
+    if (shouldSplit(inputValue)) {
+      const pattern = getSplitPattern()
+      const endsWithSeparator = new RegExp(`${pattern.source}$`).test(
+        inputValue
+      )
+      const hasDelimiterSpace = new RegExp(
+        `${escapeRegExp(delimiter)}\\s+`
+      ).test(inputValue)
+      const parts = inputValue.split(pattern).filter(Boolean)
+      const shouldCommitAll =
+        hasDelimiterSpace && parts.length > 1 && !endsWithSeparator
+      const trailing =
+        endsWithSeparator || shouldCommitAll ? "" : (parts.pop() ?? "")
+      addTokens(parts)
+      inputValue = trailing
+    }
+  }
+
+  const handleBlur = () => {
+    if (inputValue.trim()) {
+      addTokens([inputValue])
+      inputValue = ""
+    }
+    dispatch("blur", value)
+  }
+
+  const handleKeydown = (event: KeyboardEvent) => {
+    if (readonly || disabled) {
+      return
+    }
+    if (
+      event.key === delimiter ||
+      (splitOnSpace && event.key === " " && !event.shiftKey)
+    ) {
+      event.preventDefault()
+      addTokens([inputValue])
+      inputValue = ""
+    }
+    if (event.key === "Backspace" && !inputValue && value.length) {
+      removeToken(value.length - 1)
+    }
+  }
+</script>
+
+<Field {helpText} {label} {labelPosition} {error}>
+  <div
+    class="pill-input spectrum-Textfield"
+    class:is-disabled={disabled}
+    class:is-focused={focused}
+    class:is-invalid={!!error}
+    on:click={() => {
+      if (!disabled && !readonly) {
+        inputEl?.focus()
+      }
+    }}
+  >
+    <div class="pill-list">
+      {#each value as pill, index (pill + index)}
+        <Tag closable emphasized on:remove={() => removeToken(index)}>
+          {pill}
+        </Tag>
+      {/each}
+    </div>
+    <input
+      class="spectrum-Textfield-input pill-input-field"
+      bind:value={inputValue}
+      bind:this={inputEl}
+      {id}
+      {disabled}
+      {readonly}
+      placeholder={placeholder ?? ""}
+      on:input={handleInput}
+      on:keydown={handleKeydown}
+      on:focus={() => (focused = true)}
+      on:blur={() => {
+        focused = false
+        handleBlur()
+      }}
+    />
+  </div>
+</Field>
+
+<style>
+  .pill-input {
+    width: 100%;
+    min-width: 0;
+    min-height: var(--spectrum-textfield-height);
+    padding: var(--spectrum-textfield-padding-top)
+      var(--spectrum-textfield-padding-right)
+      var(--spectrum-textfield-padding-bottom)
+      calc(var(--spectrum-textfield-padding-left) - 1px);
+    border: var(--spectrum-textfield-border-size) solid
+      var(
+        --spectrum-textfield-m-border-color,
+        var(--spectrum-alias-border-color)
+      );
+    border-radius: var(--spectrum-textfield-border-radius);
+    background-color: var(
+      --spectrum-textfield-m-background-color,
+      var(--spectrum-global-color-gray-50)
+    );
+    display: flex;
+    box-sizing: border-box;
+    align-items: center;
+    gap: var(--spacing-xs);
+    flex-wrap: wrap;
+  }
+  .pill-input.is-focused {
+    border-color: var(
+      --spectrum-textfield-m-border-color-down,
+      var(--spectrum-alias-border-color-mouse-focus)
+    );
+  }
+  .pill-input.is-invalid {
+    border-color: var(
+      --spectrum-textfield-m-border-color-error,
+      var(--spectrum-semantic-negative-color-default)
+    );
+  }
+  .pill-input.is-disabled {
+    background-color: var(
+      --spectrum-textfield-m-background-color-disabled,
+      var(--spectrum-global-color-gray-200)
+    );
+    border-color: var(
+      --spectrum-textfield-m-border-color-disabled,
+      var(--spectrum-global-color-gray-400)
+    );
+  }
+  .pill-input-field {
+    min-width: 120px;
+    flex: 1 1 120px;
+    padding: 0;
+    height: auto;
+    line-height: 20px;
+    border: none;
+    background: transparent;
+    outline: none;
+  }
+  .pill-input :global(.spectrum-Tags-item) {
+    margin: 0;
+    --spectrum-tag-height: var(--spectrum-global-dimension-size-300);
+  }
+  .pill-input :global(.spectrum-Tags-itemLabel) {
+    line-height: 1;
+    display: inline-flex;
+    align-items: center;
+  }
+  .pill-list {
+    display: contents;
+  }
+</style>

package/src/Form/RadioGroup.svelte

@@ -13,6 +13,8 @@
   export let getOptionLabel = option => extractProperty(option, "label")
   export let getOptionValue = option => extractProperty(option, "value")
   export let getOptionTitle = option => extractProperty(option, "label")
+  export let getOptionSubtitle = option => extractProperty(option, "subtitle")
+  export let getOptionDisabled = option => extractProperty(option, "disabled")
   export let helpText = undefined
 
   const dispatch = createEventDispatcher()
@@ -38,6 +40,8 @@
     {getOptionLabel}
     {getOptionValue}
     {getOptionTitle}
+    {getOptionSubtitle}
+    {getOptionDisabled}
     on:change={onChange}
   />
 </Field>

package/src/Form/Select.svelte

@@ -19,6 +19,7 @@
     extractProperty(option, "value")
   export let getOptionSubtitle = (option: O, _index?: number) =>
     (option as any)?.subtitle
+  export let showSelectedSubtitle = false
   export let getOptionIcon = (option: O, _index?: number) =>
     (option as any)?.icon
   export let getOptionColour = (option: O, _index?: number) =>
@@ -81,6 +82,7 @@
     {getOptionIcon}
     {getOptionColour}
     {getOptionSubtitle}
+    {showSelectedSubtitle}
     {useOptionIconImage}
     {isOptionEnabled}
     {autocomplete}

package/src/Modal/ModalContent.svelte

@@ -30,6 +30,7 @@
     undefined
   export let secondaryButtonWarning: boolean = false
   export let custom: boolean = false
+  export let disableCancelOnConfirm: boolean = false
 
   const { hide, cancel } = getContext(Context.Modal)
 
@@ -120,7 +121,11 @@
         {/if}
 
         {#if showCancelButton}
-          <Button secondary on:click={close}>
+          <Button
+            secondary
+            on:click={close}
+            disabled={loading && disableCancelOnConfirm}
+          >
             {cancelText}
           </Button>
         {/if}

package/src/Table/Table.svelte

@@ -47,6 +47,7 @@
   export let snippets: any[] = []
   export let defaultSortColumn: string | undefined = undefined
   export let defaultSortOrder: "Ascending" | "Descending" = "Ascending"
+  export let stickyHeader: boolean = true
 
   const dispatch = createEventDispatcher()
 
@@ -286,15 +287,17 @@
   const toggleSelectAll = (e: CustomEvent): void => {
     const select = !!e.detail
     if (select) {
+      const next = [...selectedRows]
       // Add any rows which are not already in selected rows
       rows.forEach(row => {
         if (
           row.__selectable !== false &&
-          selectedRows.findIndex(x => x._id === row._id) === -1
+          next.findIndex(x => x._id === row._id) === -1
         ) {
-          selectedRows.push(row)
+          next.push(row)
         }
       })
+      selectedRows = next
     } else {
       // Remove any rows from selected rows that are in the current data set
       selectedRows = selectedRows.filter(el =>
@@ -366,6 +369,7 @@
     class="wrapper"
     class:wrapper--quiet={quiet}
     class:wrapper--compact={compact}
+    class:wrapper--sticky-header={stickyHeader}
     style={`--row-height: ${rowHeight}px; --header-height: ${headerHeight}px;`}
   >
     {#if loading}
@@ -577,8 +581,7 @@
   }
   .spectrum-Table-headCell {
     height: var(--header-height);
-    position: sticky;
-    top: 0;
+    position: relative;
     text-overflow: ellipsis;
     white-space: nowrap;
     background-color: var(--spectrum-alias-background-color-secondary);
@@ -617,13 +620,20 @@
     justify-content: flex-end;
   }
   .spectrum-Table-headCell--edit {
-    position: sticky;
-    left: 0;
+    position: relative;
     z-index: 3;
     justify-content: center;
     padding-left: calc(var(--cell-padding) / 1.33);
     padding-right: calc(var(--cell-padding) / 1.33);
   }
+  .wrapper--sticky-header .spectrum-Table-headCell {
+    position: sticky;
+    top: 0;
+  }
+  .wrapper--sticky-header .spectrum-Table-headCell--edit {
+    position: sticky;
+    left: 0;
+  }
   .spectrum-Table-headCell .title {
     overflow: visible;
     text-overflow: ellipsis;

package/src/Tags/Tag.svelte

@@ -3,6 +3,7 @@
   import Avatar from "../Avatar/Avatar.svelte"
   import ClearButton from "../ClearButton/ClearButton.svelte"
   import Icon from "../Icon/Icon.svelte"
+  import { createEventDispatcher } from "svelte"
 
   export let icon: string = ""
   export let avatar: string = ""
@@ -10,6 +11,13 @@
   export let disabled: boolean = false
   export let closable: boolean = false
   export let emphasized: boolean = false
+
+  const dispatch = createEventDispatcher()
+
+  const onRemove = (event: MouseEvent) => {
+    event.stopPropagation()
+    dispatch("remove")
+  }
 </script>
 
 <div
@@ -27,7 +35,7 @@
   {/if}
   <span class="spectrum-Tags-itemLabel"><slot /></span>
   {#if closable}
-    <ClearButton on:click />
+    <ClearButton on:click={onRemove} />
   {/if}
 </div>
 

package/src/index.ts

@@ -16,6 +16,7 @@ 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"
+export { default as PillInput } from "./Form/PillInput.svelte"
 export { default as RadioGroup } from "./Form/RadioGroup.svelte"
 export { default as RichTextField } from "./Form/RichTextField.svelte"
 export { default as Search } from "./Form/Search.svelte"