@budibase/bbui 3.36.5 → 3.37.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "3.36.5",
+  "version": "3.37.1",
   "license": "MPL-2.0",
   "module": "dist/bbui.mjs",
   "exports": {
@@ -103,5 +103,5 @@
       }
     }
   },
-  "gitHead": "767fa11d498558b2893bd1c22de62afe9b564c8e"
+  "gitHead": "1c3b07b7a9ae16b50ef1020d55156f9ced85a5cb"
 }

package/src/ActionMenu/ActionMenu.svelte

@@ -2,7 +2,7 @@
   import { setContext, getContext } from "svelte"
   import Popover from "../Popover/Popover.svelte"
   import Menu from "../Menu/Menu.svelte"
-  import type { PopoverAlignment } from "../constants"
+  import type { PopoverAlignment, PopoverWidthMode } from "../constants"
 
   export let disabled: boolean = false
   export let align: `${PopoverAlignment}` = "left"
@@ -10,7 +10,7 @@
   export let openOnHover: boolean = false
   export let animate: boolean | undefined = true
   export let offset: number | undefined = undefined
-  export let useAnchorWidth = false
+  export let widthMode: PopoverWidthMode = "no-anchor"
   export let roundedPopover: boolean = false
 
   const actionMenuContext = getContext("actionMenu")
@@ -76,7 +76,7 @@
   {portalTarget}
   {animate}
   {offset}
-  {useAnchorWidth}
+  {widthMode}
   resizable={false}
   borderRadius={roundedPopover ? "12px" : undefined}
   on:open

package/src/Actions/positionDropdown.ts

@@ -1,6 +1,6 @@
 // Strategies are defined as [Popover]To[Anchor].
 // They can apply for both horizontal and vertical alignment.
-import { PopoverAlignment } from "../constants"
+import { PopoverAlignment, type PopoverWidthMode } from "../constants"
 
 type Strategy =
   | "StartToStart"
@@ -14,6 +14,7 @@ export interface Styles {
   maxHeight?: number
   minWidth?: number
   maxWidth?: number
+  widthMode: PopoverWidthMode
   offset?: number
   left: number
   top: number
@@ -31,11 +32,12 @@ interface Opts {
   maxHeight?: number
   maxWidth?: number
   minWidth?: number
-  useAnchorWidth: boolean
+  widthMode: PopoverWidthMode
   offset: number
   customUpdate?: UpdateHandler
   resizable: boolean
   wrap: boolean
+  onScroll?: () => void
 }
 
 export default function positionDropdown(element: HTMLElement, opts: Opts) {
@@ -44,7 +46,16 @@ export default function positionDropdown(element: HTMLElement, opts: Opts) {
 
   // We need a static reference to this function so that we can properly
   // clean up the scroll listener.
-  const scrollUpdate = () => updatePosition(latestOpts)
+  const scrollUpdate = (event: Event) => {
+    if (event.target instanceof Node && element.contains(event.target)) {
+      return
+    }
+    if (latestOpts.onScroll) {
+      latestOpts.onScroll()
+      return
+    }
+    updatePosition(latestOpts)
+  }
 
   // Updates the position of the dropdown
   const updatePosition = (opts: Opts) => {
@@ -54,7 +65,7 @@ export default function positionDropdown(element: HTMLElement, opts: Opts) {
       maxHeight,
       maxWidth,
       minWidth,
-      useAnchorWidth,
+      widthMode,
       offset = 5,
       customUpdate,
       resizable,
@@ -70,10 +81,13 @@ export default function positionDropdown(element: HTMLElement, opts: Opts) {
     const winWidth = window.innerWidth
     const winHeight = window.innerHeight
     const screenOffset = 8
+    const fixedToAnchor = widthMode === "fixed-to-anchor"
+    const minAnchor = widthMode === "min-to-anchor"
     let styles: Styles = {
       maxHeight,
-      minWidth: useAnchorWidth ? anchorBounds.width : minWidth,
-      maxWidth: useAnchorWidth ? anchorBounds.width : maxWidth,
+      minWidth: fixedToAnchor || minAnchor ? anchorBounds.width : minWidth,
+      maxWidth: fixedToAnchor ? anchorBounds.width : maxWidth,
+      widthMode,
       left: 0,
       top: 0,
     }
@@ -266,6 +280,9 @@ export default function positionDropdown(element: HTMLElement, opts: Opts) {
 
     for (const [key, value] of Object.entries(styles)) {
       const name = key as keyof Styles
+      if (name === "widthMode") {
+        continue
+      }
       if (value != null) {
         element.style[name] = `${value}px`
       } else {

package/src/Form/Combobox.svelte

@@ -15,6 +15,8 @@
   export let options: O[] = []
   export let helpText: string | undefined = undefined
   export let required: boolean | undefined = false
+  export let popoverAutoWidth = false
+  export let wrapText = false
 
   const extractProperty = (item: O, property: string): string => {
     if (item && typeof item === "object" && property in item) {
@@ -63,6 +65,8 @@
     {readonly}
     {getOptionLabel}
     {getOptionValue}
+    {popoverAutoWidth}
+    {wrapText}
     on:change={onChange}
     on:pick
     on:type

package/src/Form/Core/CheckboxGroup.svelte

@@ -14,6 +14,7 @@
   export let options: O[] = []
   export let disabled = false
   export let readonly = false
+  export let columns = 1
   export let getOptionLabel = (option: O) => `${option}`
   export let getOptionValue = (option: O) => option as unknown as V
   export let showSelectAll = false
@@ -48,9 +49,19 @@
       dispatch("change", allValues)
     }
   }
+
+  $: horizontalColumns =
+    direction === "horizontal" && columns > 1
+      ? `repeat(${columns}, minmax(0, 1fr))`
+      : undefined
+  $: useGridLayout = Boolean(horizontalColumns)
 </script>
 
-<div class={`spectrum-FieldGroup spectrum-FieldGroup--${direction}`}>
+<div
+  class={`spectrum-FieldGroup spectrum-FieldGroup--${direction}`}
+  class:horizontal={useGridLayout}
+  style:grid-template-columns={horizontalColumns}
+>
   {#if showSelectAll && options?.length > 0}
     <div
       title={selectAllText}
@@ -122,6 +133,13 @@
   .readonly {
     pointer-events: none;
   }
+  .horizontal {
+    display: grid;
+    align-items: start;
+    column-gap: var(--spectrum-global-dimension-size-200);
+    row-gap: var(--spectrum-global-dimension-size-100);
+    width: 100%;
+  }
   .icon {
     display: none;
     left: 50%;
@@ -139,6 +157,10 @@
     margin-bottom: 8px;
     padding: 0;
   }
+  .horizontal .select-all-checkbox {
+    grid-column: 1 / -1;
+    margin-bottom: 0;
+  }
   .select-all-checkbox .spectrum-Checkbox {
     padding: 0;
   }

package/src/Form/Core/Combobox.svelte

@@ -21,6 +21,8 @@
   export let options: O[] = []
   export let getOptionLabel = (option: O) => `${option}`
   export let getOptionValue = (option: O) => `${option}`
+  export let popoverAutoWidth = false
+  export let wrapText = false
 
   const dispatch = createEventDispatcher<{
     change: string
@@ -112,10 +114,14 @@
   {open}
   align={PopoverAlignment.Left}
   on:close={() => (open = false)}
-  useAnchorWidth
+  widthMode={popoverAutoWidth ? "min-to-anchor" : "fixed-to-anchor"}
+  maxWidth={popoverAutoWidth ? 400 : undefined}
+  closeOnScroll
 >
   <div
     class="popover-content"
+    class:auto-width={popoverAutoWidth}
+    class:wrap-text={wrapText}
     use:clickOutside={() => {
       open = false
     }}
@@ -175,5 +181,24 @@
   .popover-content:not(.auto-width) .spectrum-Menu-itemLabel {
     width: 0;
     flex: 1 1 auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .popover-content.auto-width .spectrum-Menu-item {
+    padding-right: var(--spacing-xl);
+  }
+  .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;
   }
 </style>

package/src/Form/Core/DatePicker/DatePicker.svelte

@@ -77,7 +77,7 @@
   portalTarget={appendTo}
   {anchor}
   {align}
-  useAnchorWidth={timeOnly}
+  widthMode={timeOnly ? "fixed-to-anchor" : "no-anchor"}
   resizable={false}
 >
   {#if isOpen}

package/src/Form/Core/Multiselect.svelte

@@ -18,6 +18,7 @@
   export let autocomplete: boolean = false
   export let sort: boolean = false
   export let autoWidth: boolean = false
+  export let popoverAutoWidth: boolean = false
   export let searchTerm: string | null = null
   export let customPopoverHeight: string | undefined = undefined
   export let open: boolean = false
@@ -140,6 +141,7 @@
   onSelectOption={toggleOption}
   {sort}
   {autoWidth}
+  {popoverAutoWidth}
   {customPopoverHeight}
   {loading}
   {onOptionMouseenter}

package/src/Form/Core/Picker.svelte

@@ -55,6 +55,7 @@
   export let readonly: boolean = false
   export let quiet: boolean = false
   export let autoWidth: boolean | undefined = false
+  export let popoverAutoWidth: boolean | undefined = false
   export let autocomplete: boolean = false
   export let sort: boolean = false
   export let searchTerm: string | null = null
@@ -93,6 +94,7 @@
   let virtualPaddingTop = 0
   let virtualPaddingBottom = 0
 
+  $: effectivePopoverAutoWidth = autoWidth || popoverAutoWidth
   const resolveIcon = (icon: PickerIconInput): ResolvedIcon | null => {
     if (!icon) {
       return null
@@ -278,14 +280,15 @@
   align={align || PopoverAlignment.Left}
   {open}
   on:close={() => (open = false)}
-  useAnchorWidth={!autoWidth}
-  maxWidth={autoWidth ? 400 : undefined}
+  widthMode={effectivePopoverAutoWidth ? "min-to-anchor" : "fixed-to-anchor"}
+  maxWidth={effectivePopoverAutoWidth ? 400 : undefined}
   customHeight={customPopoverHeight}
   {maxHeight}
+  closeOnScroll
 >
   <div
     class="popover-content"
-    class:auto-width={autoWidth}
+    class:auto-width={effectivePopoverAutoWidth}
     class:wrap-text={wrapText}
     class:size-s={size === "S"}
     class:size-m={size === "M"}

package/src/Form/Core/Select.svelte

@@ -37,6 +37,7 @@
   export let quiet: boolean = false
   export let bordered: boolean = true
   export let autoWidth: boolean = false
+  export let popoverAutoWidth: boolean = false
   export let autocomplete: boolean = false
   export let sort: boolean = false
   export let align: PopoverAlignment | undefined = PopoverAlignment.Left
@@ -122,6 +123,7 @@
   {fieldColour}
   {options}
   {autoWidth}
+  {popoverAutoWidth}
   {align}
   {footer}
   {getOptionLabel}

package/src/Form/Field.svelte

@@ -78,4 +78,7 @@
   .description {
     margin-bottom: var(--spacing-xs);
   }
+  .description :global(label) {
+    white-space: normal;
+  }
 </style>

package/src/Form/Multiselect.svelte

@@ -20,6 +20,7 @@
   ) => option
   export let sort = false
   export let autoWidth = false
+  export let popoverAutoWidth = false
   export let autocomplete = false
   export let searchTerm: string | undefined = undefined
   export let customPopoverHeight: string | undefined = undefined
@@ -48,6 +49,7 @@
     {getOptionLabel}
     {getOptionValue}
     {autoWidth}
+    {popoverAutoWidth}
     {autocomplete}
     {customPopoverHeight}
     {onOptionMouseenter}

package/src/Form/Select.svelte

@@ -37,6 +37,7 @@
   export let size: "S" | "M" | "L" = "M"
   export let bordered: boolean = true
   export let autoWidth: boolean = false
+  export let popoverAutoWidth: boolean = false
   export let sort: boolean = false
   export let tooltip: string | undefined = undefined
   export let tooltipMessage:
@@ -92,6 +93,7 @@
     {options}
     {placeholder}
     {autoWidth}
+    {popoverAutoWidth}
     {sort}
     {align}
     {footer}

package/src/Popover/Popover.svelte

@@ -15,7 +15,7 @@
   import positionDropdown, {
     type UpdateHandler,
   } from "../Actions/positionDropdown"
-  import { PopoverAlignment } from "../constants"
+  import { PopoverAlignment, type PopoverWidthMode } from "../constants"
   import Context from "../context"
 
   export let anchor: HTMLElement | undefined
@@ -27,7 +27,7 @@
   export let maxHeight: number | undefined = undefined
   export let borderRadius: string | undefined = undefined
   export let open = false
-  export let useAnchorWidth = false
+  export let widthMode: PopoverWidthMode = "no-anchor"
   export let dismissible = true
   export let offset = 4
   export let customHeight: string | undefined = undefined
@@ -38,6 +38,7 @@
   export let clickOutsideOverride = false
   export let resizable = true
   export let wrap = false
+  export let closeOnScroll = false
 
   const dispatch = createEventDispatcher<{ open: void; close: void }>()
   const animationDuration = 260
@@ -127,11 +128,12 @@
         maxHeight,
         maxWidth,
         minWidth,
-        useAnchorWidth,
+        widthMode,
         offset,
         customUpdate: handlePositionUpdate,
         resizable,
         wrap,
+        onScroll: closeOnScroll ? hide : undefined,
       }}
       use:clickOutside={{
         callback: dismissible ? handleOutsideClick : () => {},

package/src/constants.ts

@@ -8,6 +8,8 @@ export enum PopoverAlignment {
   LeftContextMenu = "left-context-menu",
 }
 
+export type PopoverWidthMode = "no-anchor" | "min-to-anchor" | "fixed-to-anchor"
+
 export enum TooltipPosition {
   Top = "top",
   Right = "right",