@budibase/bbui 3.30.0 → 3.30.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "3.30.0",
+  "version": "3.30.2",
   "license": "MPL-2.0",
   "module": "dist/bbui.mjs",
   "exports": {
@@ -107,5 +107,5 @@
       }
     }
   },
-  "gitHead": "58456cc695d2c71a354bcf5c064943b247ad4969"
+  "gitHead": "13dbc5b25ef09b4c6ae6ef16c6e16d7ef37f5589"
 }

package/src/Form/Core/Multiselect.svelte

@@ -27,6 +27,7 @@
   export let searchPlaceholder: string = "Search"
   export let showSelectAll = false
   export let selectAllText = "Select all"
+  export let wrapText: boolean = false
 
   const dispatch = createEventDispatcher()
 
@@ -149,4 +150,5 @@
   {indeterminate}
   {allSelected}
   {toggleSelectAll}
+  {wrapText}
 />

package/src/Form/Core/Picker.svelte

@@ -76,6 +76,7 @@
   export let allSelected: boolean = false
   export let toggleSelectAll: () => void = () => {}
   export let hideChevron: boolean = false
+  export let wrapText: boolean = false
 
   const maxHeight = 360
   const VIRTUALIZATION_THRESHOLD = 200
@@ -115,7 +116,8 @@
     searchTerm,
     getOptionLabel
   )
-  $: virtualizationEnabled = filteredOptions.length > VIRTUALIZATION_THRESHOLD
+  $: virtualizationEnabled =
+    !wrapText && filteredOptions.length > VIRTUALIZATION_THRESHOLD
   $: {
     if (!virtualizationEnabled) {
       virtualizedOptions = filteredOptions.map((option, idx) => ({
@@ -254,6 +256,7 @@
     class:is-placeholder={isPlaceholder}
     class:auto-width={autoWidth}
     class:has-subtitle={!!fieldSubtitle}
+    class:wrap-text={wrapText}
   >
     <span class="picker-label-text">{fieldText}</span>
     {#if fieldSubtitle}
@@ -279,6 +282,7 @@
   <div
     class="popover-content"
     class:auto-width={autoWidth}
+    class:wrap-text={wrapText}
     use:clickOutside={() => {
       open = false
     }}
@@ -486,6 +490,30 @@
     pointer-events: none;
   }
 
+  .spectrum-Picker-label.wrap-text {
+    white-space: normal;
+    overflow: visible;
+    text-overflow: unset;
+    width: auto;
+  }
+  .spectrum-Picker-label.wrap-text .picker-label-text {
+    white-space: normal;
+    overflow-wrap: anywhere;
+  }
+  .popover-content.wrap-text .spectrum-Menu-item {
+    height: auto;
+    min-height: var(--spectrum-menu-item-height);
+    align-items: flex-start;
+  }
+  .popover-content.wrap-text .spectrum-Menu-itemLabel {
+    white-space: normal;
+    overflow: visible;
+    text-overflow: unset;
+    overflow-wrap: anywhere;
+    width: auto;
+    flex: 1 1 auto;
+  }
+
   /* Search styles inside popover */
   .popover-content :global(.spectrum-Search) {
     margin-top: -1px;

package/src/Form/Core/Select.svelte

@@ -47,6 +47,7 @@
   export let customPopoverHeight: string | undefined = undefined
   export let searchPlaceholder: string = "Search"
   export let hideChevron: boolean = false
+  export let wrapText: boolean = false
 
   const dispatch = createEventDispatcher()
 
@@ -140,4 +141,5 @@
   {customPopoverHeight}
   {searchPlaceholder}
   {hideChevron}
+  {wrapText}
 />

package/src/Form/Field.svelte

@@ -3,18 +3,32 @@
   import FieldLabel from "./FieldLabel.svelte"
   import Icon from "../Icon/Icon.svelte"
   import type { LabelPosition } from "../types"
+  import Label from "../Label/Label.svelte"
 
   export let id: string | undefined = undefined
   export let label: string | undefined = undefined
   export let labelPosition: LabelPosition = "above"
   export let error: string | undefined | false = undefined
+  export let description: string | undefined = undefined
   export let helpText: string | undefined = undefined
   export let tooltip: string | undefined = undefined
+  export let required: boolean = false
 </script>
 
 <div class="spectrum-Form-item" class:above={labelPosition === "above"}>
   {#if label}
-    <FieldLabel forId={id} {label} position={labelPosition} {tooltip} />
+    <FieldLabel
+      forId={id}
+      {label}
+      position={labelPosition}
+      {tooltip}
+      {required}
+    />
+  {/if}
+  {#if description}
+    <div class="description">
+      <Label muted>{description}</Label>
+    </div>
   {/if}
   <div class="spectrum-Form-itemField">
     <slot />
@@ -61,4 +75,7 @@
     color: var(--spectrum-global-color-gray-800);
     font-size: var(--spectrum-global-dimension-font-size-75);
   }
+  .description {
+    margin-bottom: var(--spacing-xs);
+  }
 </style>

package/src/Form/FieldLabel.svelte

@@ -1,12 +1,14 @@
-<script>
+<script lang="ts">
   import TooltipWrapper from "../Tooltip/TooltipWrapper.svelte"
+  import type { LabelPosition } from "../types"
 
   import "@spectrum-css/fieldlabel/dist/index-vars.css"
 
-  export let forId
-  export let label
-  export let position = "above"
-  export let tooltip = ""
+  export let forId: string | undefined = undefined
+  export let label: string
+  export let position: LabelPosition = "above"
+  export let tooltip: string = ""
+  export let required: boolean = false
 
   $: className = position === "above" ? "" : `spectrum-FieldLabel--${position}`
 </script>
@@ -17,6 +19,9 @@
     class={`spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel ${className}`}
   >
     {label || ""}
+    {#if required}
+      <sup class="required-asterisk">*</sup>
+    {/if}
   </label>
 </TooltipWrapper>
 
@@ -29,4 +34,8 @@
   .spectrum-FieldLabel--left {
     padding-right: var(--spectrum-global-dimension-size-200);
   }
+  .required-asterisk {
+    color: var(--spectrum-global-color-red-500);
+    margin-left: -2px;
+  }
 </style>

package/src/Form/Input.svelte

@@ -17,6 +17,8 @@
   export let autofocus: boolean | undefined = undefined
   export let autocomplete: FullAutoFill | boolean | null | undefined = undefined
   export let helpText: string | undefined = undefined
+  export let required: boolean | undefined = false
+  export let description: string | undefined = undefined
 
   const dispatch = createEventDispatcher<{
     change: any
@@ -42,7 +44,7 @@
   }
 </script>
 
-<Field {helpText} {label} {labelPosition} {error}>
+<Field {helpText} {label} {labelPosition} {error} {required} {description}>
   <TextField
     {updateOnChange}
     {disabled}

package/src/Form/Select.svelte

@@ -48,6 +48,8 @@
   export let loading: boolean | undefined = false
   export let searchPlaceholder: string | undefined = undefined
   export let hideChevron: boolean = false
+  export let required: boolean = false
+  export let description: string | undefined = undefined
 
   const dispatch = createEventDispatcher()
   const onChange = (e: CustomEvent<any>) => {
@@ -63,7 +65,15 @@
   }
 </script>
 
-<Field {helpText} {label} {labelPosition} {error} {tooltip}>
+<Field
+  {helpText}
+  {label}
+  {labelPosition}
+  {error}
+  {tooltip}
+  {required}
+  {description}
+>
   <Select
     {size}
     {bordered}

package/src/Table/Table.svelte

@@ -36,6 +36,7 @@
   export let allowEditRows: boolean = true
   export let allowEditColumns: boolean = true
   export let allowClickRows: boolean = true
+  export let selectOnRowClick: boolean = true
   export let selectedRows: any[] = []
   export let customRenderers: any[] = []
   export let disableSorting: boolean = false
@@ -488,7 +489,9 @@
                   on:click={() => {
                     if (!schema[field]?.preventSelectRow) {
                       dispatch("click", row)
-                      toggleSelectRow(row)
+                      if (selectOnRowClick) {
+                        toggleSelectRow(row)
+                      }
                     }
                   }}
                 >