@budibase/bbui 3.41.3 → 3.43.0

package/src/Switcher/Switcher.svelte

@@ -3,16 +3,19 @@
   import AbsTooltip from "../Tooltip/AbsTooltip.svelte"
   import ActionButton from "../ActionButton/ActionButton.svelte"
 
-  export let leftIcon: string
+  export let leftIcon: string | undefined = undefined
   export let leftNotificationTooltip: string | undefined = undefined
   export let leftNotificationCount: number | undefined = undefined
   export let leftText: string
-  export let rightIcon: string
+  export let rightIcon: string | undefined = undefined
   export let rightNotificationTooltip: string | undefined = undefined
   export let rightNotificationCount: number | undefined = undefined
   export let rightText: string
   export let selected: "left" | "right" = "left"
   export let disabled = false
+  export let leftDisabled = false
+  export let rightDisabled = false
+  export let size: "S" | "M" | "L" = "M"
 
   const dispatch = createEventDispatcher<{
     left: void
@@ -21,7 +24,7 @@
 </script>
 
 <div class="view-mode-toggle" class:disabled>
-  <div class="group">
+  <div class="group size-{size}">
     <div class="wrapper">
       {#if leftNotificationTooltip && leftNotificationCount}
         <AbsTooltip text={leftNotificationTooltip}>
@@ -39,7 +42,8 @@
         <ActionButton
           icon={leftIcon}
           quiet
-          {disabled}
+          disabled={disabled || leftDisabled}
+          {size}
           selected={selected === "left"}
           on:click={() => {
             selected = "left"
@@ -67,7 +71,8 @@
         <ActionButton
           icon={rightIcon}
           quiet
-          {disabled}
+          disabled={disabled || rightDisabled}
+          {size}
           selected={selected === "right"}
           on:click={() => {
             selected = "right"
@@ -101,6 +106,16 @@
   .left :global(*) {
     border-radius: 10px 0 0 10px;
   }
+  /* A radius sized for M crops the label on a shorter button */
+  .group.size-S {
+    border-radius: 8px;
+  }
+  .size-S .right :global(*) {
+    border-radius: 0 6px 6px 0;
+  }
+  .size-S .left :global(*) {
+    border-radius: 6px 0 0 6px;
+  }
   .wrapper {
     position: relative;
   }

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/index.ts

@@ -2,6 +2,7 @@ import "./bbui.css"
 
 // Constants
 export * from "./constants"
+export { generateId } from "./utils/ids"
 
 // Form components
 export { default as Checkbox } from "./Form/Checkbox.svelte"
@@ -122,5 +123,4 @@ export { createNotificationStore, notifications } from "./Stores/notifications"
 
 // Helpers
 export * as Helpers from "./helpers"
-
 export type * from "./types"

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"

package/src/utils/ids.test.ts

@@ -0,0 +1,13 @@
+import { describe, expect, it } from "vitest"
+import { generateId } from "./ids"
+
+const ID_PATTERN = /^[0-9a-zA-Z_-]+$/
+
+describe("generateId", () => {
+  it("uses the configured length and character set", () => {
+    const ids = Array.from({ length: 100 }, generateId)
+
+    expect(ids.every(id => id.length === 9)).toBe(true)
+    expect(ids.every(id => ID_PATTERN.test(id))).toBe(true)
+  })
+})

package/src/utils/ids.ts

@@ -0,0 +1,5 @@
+import { nanoid } from "nanoid"
+
+const ID_LENGTH = 9
+
+export const generateId = (): string => nanoid(ID_LENGTH)