@budibase/bbui 3.41.3 → 3.42.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "3.41.3",
+  "version": "v3.42.0",
   "license": "MPL-2.0",
   "module": "dist/bbui.mjs",
   "exports": {
@@ -108,5 +108,5 @@
       }
     }
   },
-  "gitHead": "dd1b8d888c49ad09b82b00fc5b93ceff707bbd6a"
+  "gitHead": "180c04c6852aa7acf0402d53dc909eab764d0251"
 }

package/src/Button/Button.svelte

@@ -23,6 +23,9 @@
   export let active = false
   export let tooltip: string | null = ""
   export let tooltipPosition: TooltipPosition = TooltipPosition.Top
+  export let calculateTooltipWidth:
+    | ((target: Element) => number | undefined)
+    | undefined = undefined
   export let newStyles = true
   export let id: string | undefined = undefined
   export let ref: HTMLButtonElement | undefined = undefined
@@ -32,10 +35,16 @@
   $: tooltipText = tooltip ?? ""
 </script>
 
-<AbsTooltip text={tooltipText} position={tooltipPosition}>
+<AbsTooltip
+  text={tooltipText}
+  position={tooltipPosition}
+  disabledTarget={disabled && !!tooltipText}
+  calculateWidth={calculateTooltipWidth}
+>
   <button
     {id}
     {type}
+    {disabled}
     bind:this={ref}
     class:spectrum-Button--cta={cta}
     class:spectrum-Button--primary={primary}

package/src/FancyForm/FancyInput.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { UIEvent } from "@budibase/types"
+  import type { UIEvent } from "../types"
   import { createEventDispatcher, onMount } from "svelte"
   import { fade } from "svelte/transition"
   import FancyField from "./FancyField.svelte"

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

@@ -1,3 +1,10 @@
+<script lang="ts" module>
+  export interface DatePickerApi {
+    open: () => void
+    close: () => void
+  }
+</script>
+
 <script lang="ts" generics="V">
   import "@spectrum-css/calendar/dist/index-vars.css"
   import "@spectrum-css/inputgroup/dist/index-vars.css"
@@ -12,18 +19,19 @@
   import { getLocaleStartDayOfWeek, type Weekday } from "./utils"
   import { resolveTranslationGroup } from "@budibase/shared-core"
 
-  export let id = null
+  export let id: string | null = null
   export let disabled = false
   export let readonly = false
-  export let error = null
+  export let error: string | false | null | undefined = null
   export let enableTime = true
   export let value: V | null = null
   export let placeholder: string | null = null
   export let timeOnly = false
+  export let setTimeTo: string | undefined = undefined
   export let ignoreTimezones = false
   export let useKeyboardShortcuts = true
-  export let appendTo = undefined
-  export let api = null
+  export let appendTo: string | undefined = undefined
+  export let api: DatePickerApi | null = null
   export let align: PopoverAlignment = PopoverAlignment.Left
   const browserStartDayOfWeek = getLocaleStartDayOfWeek()
   export let startDayOfWeek: Weekday | undefined = undefined
@@ -37,6 +45,7 @@
 
   $: parsedValue = parseDate(value as string | dayjs.Dayjs | null, {
     enableTime,
+    setTimeTo,
   })
 
   const onOpen = () => {
@@ -88,6 +97,7 @@
       {ignoreTimezones}
       {enableTime}
       {timeOnly}
+      {setTimeTo}
       startDayOfWeek={resolvedStartDayOfWeek}
       {calendarLabels}
       value={parsedValue}

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

@@ -1,22 +1,24 @@
-<script>
-  import dayjs from "dayjs"
-  import TimePicker from "./TimePicker.svelte"
-  import Calendar from "./Calendar.svelte"
-  import ActionButton from "../../../ActionButton/ActionButton.svelte"
+<script lang="ts">
+  import dayjs, { type Dayjs } from "dayjs"
   import { createEventDispatcher, onMount } from "svelte"
-  import { stringifyDate } from "../../../helpers"
   import { resolveTranslationGroup } from "@budibase/shared-core"
+  import ActionButton from "../../../ActionButton/ActionButton.svelte"
+  import { stringifyDate } from "../../../helpers"
+  import Calendar from "./Calendar.svelte"
+  import TimePicker from "./TimePicker.svelte"
+  import type { Weekday } from "./utils"
 
   export let useKeyboardShortcuts = true
-  export let ignoreTimezones
-  export let enableTime
-  export let timeOnly
-  export let value
-  export let startDayOfWeek = "Monday"
+  export let ignoreTimezones = false
+  export let enableTime = true
+  export let timeOnly = false
+  export let setTimeTo: string | undefined = undefined
+  export let value: Dayjs | null | undefined = null
+  export let startDayOfWeek: Weekday = "Monday"
   export let calendarLabels = resolveTranslationGroup("calendar")
 
-  const dispatch = createEventDispatcher()
-  let calendar
+  const dispatch = createEventDispatcher<{ change: string | null }>()
+  let calendar: { setDate: (date: Dayjs) => void } | undefined
 
   $: showCalendar = !timeOnly
   $: showTime = enableTime || timeOnly
@@ -27,14 +29,19 @@
     handleChange(now)
   }
 
-  const handleChange = date => {
+  const handleChange = (date: Dayjs | null | undefined) => {
     dispatch(
       "change",
-      stringifyDate(date, { enableTime, timeOnly, ignoreTimezones })
+      stringifyDate(date ?? null, {
+        enableTime,
+        timeOnly,
+        ignoreTimezones,
+        setTimeTo,
+      })
     )
   }
 
-  const clearDateOnBackspace = event => {
+  const clearDateOnBackspace = (event: KeyboardEvent) => {
     // Ignore if we're typing a value
     if (document.activeElement?.tagName.toLowerCase() === "input") {
       return

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

@@ -1,16 +1,20 @@
-<script>
-  export let value
-  export let min = undefined
-  export let max = undefined
+<script lang="ts">
+  export let value: string | number | undefined = undefined
+  export let min: string | number | undefined = undefined
+  export let max: string | number | undefined = undefined
   export let hideArrows = false
-  export let width = undefined
+  export let width: number | undefined = undefined
   export let type = "number"
   export let disabled = false
   export let readonly = false
+  export let step: string | number | undefined = undefined
 
   $: style = width ? `width:${width}px;` : ""
 
-  const selectAll = event => event.target.select()
+  const selectAll = (event: MouseEvent) => {
+    const input = event.currentTarget as HTMLInputElement
+    input.select()
+  }
 </script>
 
 <input
@@ -22,6 +26,7 @@
   {max}
   {disabled}
   {readonly}
+  {step}
   on:click={selectAll}
   on:change
   on:input

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

@@ -4,14 +4,15 @@
   import NumberInput from "./NumberInput.svelte"
   import { createEventDispatcher } from "svelte"
 
-  export let value: Dayjs | undefined
+  export let value: Dayjs | null | undefined
   export let disableClearing = false
   export let disabled = false
   export let readonly = false
+  export let showSeconds = false
 
   const dispatch = createEventDispatcher<{ change: Dayjs | undefined }>()
 
-  $: displayValue = value?.format("HH:mm")
+  $: displayValue = value?.format(showSeconds ? "HH:mm:ss" : "HH:mm")
 
   const handleChange = async (e: Event) => {
     if (disabled || readonly) {
@@ -28,10 +29,12 @@
       return
     }
 
-    const [hour, minute] = target.value.split(":").map(x => parseInt(x))
+    const [hour, minute, second = 0] = target.value
+      .split(":")
+      .map(x => parseInt(x))
     dispatch(
       "change",
-      (value || dayjs()).hour(hour).minute(minute).second(0).millisecond(0)
+      (value || dayjs()).hour(hour).minute(minute).second(second).millisecond(0)
     )
   }
 </script>
@@ -43,6 +46,7 @@
     value={displayValue}
     {disabled}
     {readonly}
+    step={showSeconds ? 1 : undefined}
     on:input={handleChange}
     on:change={handleChange}
   />

package/src/Form/Core/DateRangePicker.svelte

@@ -39,7 +39,7 @@
     }
   }
 
-  const onChangeFrom = (utc: string) => {
+  const onChangeFrom = (utc: string | null) => {
     // Preserve the time if its editable
     const fromDate = utc
       ? enableTime
@@ -55,7 +55,7 @@
     dispatch("change", [fromDate, toDate])
   }
 
-  const onChangeTo = (utc: string) => {
+  const onChangeTo = (utc: string | null) => {
     // Preserve the time if its editable
     const toDate = utc
       ? enableTime

package/src/Form/Core/TextField.svelte

@@ -2,7 +2,7 @@
   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"
+  import type { UIEvent } from "../../types"
 
   export let value: V | null = null
   export let placeholder: string | undefined = undefined

package/src/Form/DatePicker.svelte

@@ -13,6 +13,7 @@
   export let error = undefined
   export let enableTime = true
   export let timeOnly = false
+  export let setTimeTo: string | undefined = undefined
   export let placeholder: string | null = null
   export let appendTo = undefined
   export let ignoreTimezones = false
@@ -36,6 +37,7 @@
     {placeholder}
     {enableTime}
     {timeOnly}
+    {setTimeTo}
     {appendTo}
     {ignoreTimezones}
     {calendarLabels}

package/src/Form/TimeField.svelte

@@ -16,6 +16,7 @@
     id?: string
     name?: string
     disableClearing?: boolean
+    showSeconds?: boolean
     onchange?: (value: string | undefined) => void
   }
 </script>
@@ -39,33 +40,41 @@
     id = undefined,
     name = undefined,
     disableClearing = false,
+    showSeconds = false,
     onchange,
   }: Props = $props()
 
-  const FALLBACK_TIME = "00:00"
+  const FALLBACK_TIME = $derived(showSeconds ? "00:00:00" : "00:00")
 
   const parseValue = (time: TimeFieldValue) => {
     if (!time) {
       return undefined
     }
 
-    const [hour, minute] = time.split(":").map(part => Number(part))
+    const parts = time.split(":")
+    if (parts.length !== (showSeconds ? 3 : 2)) {
+      return undefined
+    }
+    const [hour, minute, second = 0] = parts.map(part => Number(part))
     if (
       !Number.isInteger(hour) ||
       !Number.isInteger(minute) ||
+      !Number.isInteger(second) ||
       hour < 0 ||
       hour > 23 ||
       minute < 0 ||
-      minute > 59
+      minute > 59 ||
+      second < 0 ||
+      second > 59
     ) {
       return undefined
     }
 
-    return dayjs().hour(hour).minute(minute).second(0).millisecond(0)
+    return dayjs().hour(hour).minute(minute).second(second).millisecond(0)
   }
 
   const handleChange = (event: CustomEvent<Dayjs | undefined>) => {
-    const nextValue = event.detail?.format("HH:mm")
+    const nextValue = event.detail?.format(showSeconds ? "HH:mm:ss" : "HH:mm")
     if (!nextValue && disableClearing) {
       return
     }
@@ -104,6 +113,7 @@
       {disableClearing}
       {disabled}
       {readonly}
+      {showSeconds}
       on:change={handleChange}
     />
     {#if name}

package/src/Tooltip/AbsTooltip.svelte

@@ -11,12 +11,17 @@
   export let fixed: boolean = false
   export let color: string | undefined = undefined
   export let noWrap: boolean = false
+  export let disabledTarget: boolean = false
+  export let calculateWidth:
+    | ((target: Element) => number | undefined)
+    | undefined = undefined
   export let offset: number = 0
 
   let wrapper: HTMLElement | undefined
   let hovered = false
   let left: number | undefined
   let top: number | undefined
+  let tooltipWidth: number | undefined
   let visible = false
   let timeout: ReturnType<typeof setTimeout> | undefined
   let interval: ReturnType<typeof setInterval> | undefined
@@ -38,9 +43,11 @@
     if (!node) {
       left = undefined
       top = undefined
+      tooltipWidth = undefined
       return
     }
     const bounds = node.getBoundingClientRect()
+    tooltipWidth = calculateWidth?.(node)
 
     // Determine where to render tooltip based on position prop
     if (position === TooltipPosition.Top) {
@@ -82,6 +89,7 @@
 <div
   bind:this={wrapper}
   class="abs-tooltip"
+  class:disabled-target={disabledTarget}
   on:focus={null}
   on:mouseover={() => (hovered = true)}
   on:mouseleave={() => (hovered = false)}
@@ -94,7 +102,13 @@
     <span
       class="spectrum-Tooltip spectrum-Tooltip--{type} spectrum-Tooltip--{position} is-open"
       class:noWrap
-      style={`left:${left}px;top:${top}px;${tooltipStyle}`}
+      class:calculated-width={tooltipWidth != null}
+      style:left={`${left}px`}
+      style:top={`${top}px`}
+      style:--tooltip-width={tooltipWidth != null
+        ? `${tooltipWidth}px`
+        : undefined}
+      style={tooltipStyle}
       transition:fade|local={{ duration: 130 }}
     >
       <span class="spectrum-Tooltip-label">{text}</span>
@@ -108,6 +122,12 @@
     display: contents;
     pointer-events: all;
   }
+  .abs-tooltip.disabled-target {
+    display: inline-block;
+  }
+  .abs-tooltip.disabled-target :global(:disabled) {
+    pointer-events: none;
+  }
   .spectrum-Tooltip.noWrap .spectrum-Tooltip-label {
     width: max-content;
   }
@@ -121,6 +141,11 @@
       top 130ms ease-out,
       left 130ms ease-out;
   }
+  .spectrum-Tooltip.calculated-width {
+    width: var(--tooltip-width);
+    max-width: none;
+    max-inline-size: none;
+  }
   .spectrum-Tooltip-label {
     display: -webkit-box;
     -webkit-line-clamp: 3;

package/src/helpers.test.ts

@@ -1,5 +1,6 @@
 import { afterEach, describe, expect, it, vi } from "vitest"
-import { uuid } from "./helpers"
+import dayjs from "dayjs"
+import { parseDate, parseTime, stringifyDate, uuid } from "./helpers"
 
 describe("uuid", () => {
   afterEach(() => {
@@ -27,3 +28,58 @@ describe("uuid", () => {
     expect(Math.random).toHaveBeenCalled()
   })
 })
+
+describe("date helpers", () => {
+  const selectedDate = dayjs("2026-08-05T10:15:30.456")
+
+  it("keeps date-only values unchanged when no time is configured", () => {
+    expect(
+      stringifyDate(selectedDate, { enableTime: false, setTimeTo: "" })
+    ).toBe("2026-08-05")
+    expect(stringifyDate(null, { setTimeTo: "23:59:59" })).toBeNull()
+  })
+
+  it("applies a configured time to timezone-aware date selections", () => {
+    const expected = selectedDate
+      .hour(23)
+      .minute(59)
+      .second(59)
+      .millisecond(0)
+      .toISOString()
+
+    expect(
+      stringifyDate(selectedDate, {
+        enableTime: false,
+        setTimeTo: "23:59:59",
+      })
+    ).toBe(expected)
+  })
+
+  it("applies a configured time without an offset when ignoring timezones", () => {
+    expect(
+      stringifyDate(selectedDate, {
+        enableTime: false,
+        ignoreTimezones: true,
+        setTimeTo: "23:59:59",
+      })
+    ).toBe("2026-08-05T23:59:59.000")
+  })
+
+  it("treats malformed configured times as unset", () => {
+    expect(
+      stringifyDate(selectedDate, {
+        enableTime: false,
+        setTimeTo: "24:00:00",
+      })
+    ).toBe("2026-08-05")
+    expect(parseTime("12:30")).toBeNull()
+  })
+
+  it("parses stored datetime values without discarding their time", () => {
+    const value = "2026-08-05T23:59:59.000Z"
+
+    expect(
+      parseDate(value, { enableTime: false, setTimeTo: "23:59:59" })?.valueOf()
+    ).toBe(dayjs(value).valueOf())
+  })
+})

package/src/helpers.ts

@@ -119,11 +119,28 @@ export const copyToClipboard = (value: any): Promise<void> => {
   })
 }
 
+export const parseTime = (
+  value: string | undefined
+): { hour: number; minute: number; second: number } | null => {
+  const match = /^(\d{2}):(\d{2}):(\d{2})$/.exec(value || "")
+  if (!match) {
+    return null
+  }
+  const [, hourValue, minuteValue, secondValue] = match
+  const hour = Number(hourValue)
+  const minute = Number(minuteValue)
+  const second = Number(secondValue)
+  if (hour > 23 || minute > 59 || second > 59) {
+    return null
+  }
+  return { hour, minute, second }
+}
+
 // Parse a date value. This is usually an ISO string, but can be a
 // bunch of different formats and shapes depending on schema flags.
 export const parseDate = (
   value: string | dayjs.Dayjs | null,
-  { enableTime = true }
+  { enableTime = true, setTimeTo }: { enableTime?: boolean; setTimeTo?: string }
 ): dayjs.Dayjs | null => {
   // If empty then invalid
   if (!value) {
@@ -138,7 +155,7 @@ export const parseDate = (
     }
 
     // If date only, check for cases where we received a UTC string
-    else if (!enableTime && value.endsWith("Z")) {
+    else if (!enableTime && !parseTime(setTimeTo) && value.endsWith("Z")) {
       value = value.split("Z")[0]
     }
   }
@@ -159,16 +176,36 @@ export const parseDate = (
 // schema flags
 export const stringifyDate = (
   value: null | dayjs.Dayjs,
-  { enableTime = true, timeOnly = false, ignoreTimezones = false } = {}
+  {
+    enableTime = true,
+    timeOnly = false,
+    ignoreTimezones = false,
+    setTimeTo,
+  }: {
+    enableTime?: boolean
+    timeOnly?: boolean
+    ignoreTimezones?: boolean
+    setTimeTo?: string
+  } = {}
 ): string | null => {
   if (!value) {
     return null
   }
 
+  const configuredTime = !enableTime && !timeOnly ? parseTime(setTimeTo) : null
+  if (configuredTime) {
+    value = value
+      .hour(configuredTime.hour)
+      .minute(configuredTime.minute)
+      .second(configuredTime.second)
+      .millisecond(0)
+  }
+  const serializeTime = enableTime || !!configuredTime
+
   // Time only fields always ignore timezones, otherwise they make no sense.
   // For non-timezone-aware fields, create an ISO 8601 timestamp of the exact
   // time picked, without timezone
-  const offsetForTimezone = (enableTime && ignoreTimezones) || timeOnly
+  const offsetForTimezone = (serializeTime && ignoreTimezones) || timeOnly
   if (offsetForTimezone) {
     // Ensure we use the correct offset for the date
     const referenceDate = value.toDate()
@@ -183,7 +220,7 @@ export const stringifyDate = (
 
   // For date-only fields, construct a manual timestamp string without a time
   // or time zone
-  else if (!enableTime) {
+  else if (!serializeTime) {
     const year = value.year()
     const month = `${value.month() + 1}`.padStart(2, "0")
     const day = `${value.date()}`.padStart(2, "0")

package/src/styles.d.ts

@@ -0,0 +1,2 @@
+declare module "*.css"
+declare module "@spectrum-css/*"

package/src/types/events.ts

@@ -0,0 +1,5 @@
+export interface UIEvent extends Omit<Event, "target"> {
+  currentTarget: EventTarget & HTMLInputElement
+  key?: string
+  target?: any
+}

package/src/types/index.ts

@@ -2,5 +2,6 @@ export * from "./actionMenu"
 export * from "./envDropdown"
 export * from "./modalContext"
 export * from "./scrollContext"
+export * from "./events"
 
 export type LabelPosition = "above" | "left"