@budibase/bbui 3.41.3 → 3.43.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.43.0",
   "license": "MPL-2.0",
   "module": "dist/bbui.mjs",
   "exports": {
@@ -75,9 +75,9 @@
     "@spectrum-css/underlay": "2.0.9",
     "@spectrum-css/vars": "3.0.1",
     "atrament": "^4.3.0",
-    "date-fns": "^4.1.0",
     "dayjs": "^1.10.8",
     "easymde": "^2.16.1",
+    "nanoid": "6.0.1",
     "sanitize-html": "^2.13.0",
     "svelte-portal": "^2.2.1"
   },
@@ -108,5 +108,5 @@
       }
     }
   },
-  "gitHead": "dd1b8d888c49ad09b82b00fc5b93ceff707bbd6a"
+  "gitHead": "221c199a898fffd9c8803d5327cc3089cc02b7f3"
 }

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/Drawer/Drawer.svelte

@@ -66,7 +66,6 @@
 </script>
 
 <script lang="ts">
-  import { generate } from "shortid"
   import { createEventDispatcher, onDestroy, setContext } from "svelte"
   import type { TransitionConfig } from "svelte/transition"
   import Portal from "svelte-portal"
@@ -79,6 +78,7 @@
     overlayStack,
     BASE_Z_INDEX,
   } from "../Modal/overlayStack"
+  import { generateId } from "../utils/ids"
 
   interface DrawerEvents {
     drawerShow: string
@@ -93,7 +93,7 @@
   const spacing = 11
 
   let visible: boolean = false
-  let drawerId: string = generate()
+  let drawerId: string = generateId()
   let depth: number = 0
   let stackIndex: number = -1
   let computedZIndex: number = BASE_Z_INDEX

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,25 +1,29 @@
-<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 { getLocaleStartDayOfWeek, 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
+  const browserStartDayOfWeek = getLocaleStartDayOfWeek()
+  export let startDayOfWeek: Weekday | undefined = undefined
   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
+  $: resolvedStartDayOfWeek = startDayOfWeek ?? browserStartDayOfWeek
 
   const setToNow = () => {
     const now = dayjs().second(0).millisecond(0)
@@ -27,14 +31,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
@@ -58,7 +67,7 @@
   {#if showCalendar}
     <Calendar
       {value}
-      {startDayOfWeek}
+      startDayOfWeek={resolvedStartDayOfWeek}
       {calendarLabels}
       on:change={e => handleChange(e.detail)}
       bind:this={calendar}

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/DatePicker/utils.spec.ts

@@ -0,0 +1,53 @@
+import { afterEach, describe, expect, it, vi } from "vitest"
+import { getLocaleStartDayOfWeek } from "./utils"
+
+interface LocaleWithWeekInfo {
+  readonly weekInfo?: { firstDay?: number }
+}
+
+describe("getLocaleStartDayOfWeek", () => {
+  afterEach(() => {
+    vi.restoreAllMocks()
+    vi.unstubAllGlobals()
+  })
+
+  it("uses the locale's first day of the week", () => {
+    expect(getLocaleStartDayOfWeek(["en-US"])).toBe("Sunday")
+    expect(getLocaleStartDayOfWeek(["en-GB"])).toBe("Monday")
+    expect(getLocaleStartDayOfWeek(["ar-AF"])).toBe("Saturday")
+    expect(getLocaleStartDayOfWeek(["dv-MV"])).toBe("Friday")
+  })
+
+  it("normalizes locale separators", () => {
+    expect(getLocaleStartDayOfWeek(["en_US"])).toBe("Sunday")
+  })
+
+  it("uses the browser's preferred locales by default", () => {
+    vi.stubGlobal("navigator", {
+      language: "en-US",
+      languages: ["en-US"],
+    })
+
+    expect(getLocaleStartDayOfWeek()).toBe("Sunday")
+  })
+
+  it("uses the next valid locale", () => {
+    expect(getLocaleStartDayOfWeek(["invalid--locale", "en-US"])).toBe("Sunday")
+  })
+
+  it("uses region data when locale week information is unavailable", () => {
+    const localePrototype: Intl.Locale & LocaleWithWeekInfo =
+      Intl.Locale.prototype
+    vi.spyOn(localePrototype, "weekInfo", "get").mockReturnValue(undefined)
+
+    expect(getLocaleStartDayOfWeek(["en-US"])).toBe("Sunday")
+    expect(getLocaleStartDayOfWeek(["ar-AF"])).toBe("Saturday")
+    expect(getLocaleStartDayOfWeek(["dv-MV"])).toBe("Friday")
+    expect(getLocaleStartDayOfWeek(["en-GB"])).toBe("Monday")
+  })
+
+  it("falls back to Monday without supported locale metadata", () => {
+    expect(getLocaleStartDayOfWeek([])).toBe("Monday")
+    expect(getLocaleStartDayOfWeek(["invalid--locale"])).toBe("Monday")
+  })
+})

package/src/Form/Core/DatePicker/utils.ts

@@ -1,12 +1,18 @@
-import type { Locale } from "date-fns"
-import * as dateFnsLocales from "date-fns/locale"
-
 interface Input {
   max: number
   pad: number
   fallback: string
 }
 
+interface LocaleWeekInfo {
+  firstDay?: number
+}
+
+interface LocaleWithWeekInfo {
+  readonly weekInfo?: LocaleWeekInfo
+  getWeekInfo?: () => LocaleWeekInfo
+}
+
 export type Weekday =
   | "Sunday"
   | "Monday"
@@ -27,6 +33,19 @@ const WEEKDAY_BY_INDEX: Weekday[] = [
   "Saturday",
 ]
 
+// Fallback data for browsers without Intl.Locale week information support.
+// Regions not listed use CLDR's global Monday default.
+// Source: unicode-org/cldr-json/cldr-json/cldr-core/supplemental/weekData.json
+const SUNDAY_START_REGIONS = new Set(
+  "AG AS BD BR BS BT BW BZ CA CO DM DO ET GT GU HK HN ID IL IN IS JM JP KE KH KR LA MH MM MO MT MX MZ NI NP PA PE PH PK PR PT SA SG SV TH TT TW UM US VE VI WS YE ZA ZW".split(
+    " "
+  )
+)
+const SATURDAY_START_REGIONS = new Set(
+  "AF BH DJ DZ EG IQ IR JO KW LY OM QA SD SY".split(" ")
+)
+const FRIDAY_START_REGIONS = new Set(["MV"])
+
 const normalizeLocaleCode = (code?: string | null) => {
   if (!code) {
     return null
@@ -34,52 +53,6 @@ const normalizeLocaleCode = (code?: string | null) => {
   return code.toLowerCase().replace(/_/g, "-")
 }
 
-const normalizeLocaleKey = (key?: string) => {
-  if (!key) {
-    return null
-  }
-  return key
-    .replace(/_/g, "-")
-    .replace(/([a-z])([A-Z])/g, "$1-$2")
-    .toLowerCase()
-}
-
-const localeLookup = (() => {
-  const lookup = new Map<string, Locale>()
-
-  const register = (key: string, locale: Locale | undefined) => {
-    if (!locale) {
-      return
-    }
-    const codeCandidates = new Set<string>()
-    const normalizedKey = normalizeLocaleKey(key)
-    if (normalizedKey) {
-      codeCandidates.add(normalizedKey)
-    }
-    const normalizedLocaleCode = normalizeLocaleCode(locale.code)
-    if (normalizedLocaleCode) {
-      codeCandidates.add(normalizedLocaleCode)
-    }
-    for (const candidate of codeCandidates) {
-      if (!lookup.has(candidate)) {
-        lookup.set(candidate, locale)
-      }
-      const base = candidate.split("-")[0]
-      if (base && !lookup.has(base)) {
-        lookup.set(base, locale)
-      }
-    }
-  }
-
-  for (const [key, locale] of Object.entries(dateFnsLocales)) {
-    if (typeof locale === "object" && locale) {
-      register(key, locale as Locale)
-    }
-  }
-
-  return lookup
-})()
-
 const getNavigatorLocales = (): readonly string[] => {
   if (typeof navigator === "undefined") {
     return []
@@ -90,6 +63,34 @@ const getNavigatorLocales = (): readonly string[] => {
   return navigator.language ? [navigator.language] : []
 }
 
+const getFallbackFirstDay = (locale: Intl.Locale): number => {
+  const region = locale.region ?? locale.maximize().region
+  if (region && SUNDAY_START_REGIONS.has(region)) {
+    return 7
+  }
+  if (region && SATURDAY_START_REGIONS.has(region)) {
+    return 6
+  }
+  if (region && FRIDAY_START_REGIONS.has(region)) {
+    return 5
+  }
+  return 1
+}
+
+const getLocaleFirstDay = (code: string): number | undefined => {
+  if (typeof Intl.Locale !== "function") {
+    return undefined
+  }
+
+  try {
+    const locale = new Intl.Locale(code) as Intl.Locale & LocaleWithWeekInfo
+    const weekInfo = locale.weekInfo ?? locale.getWeekInfo?.()
+    return weekInfo?.firstDay ?? getFallbackFirstDay(locale)
+  } catch {
+    return undefined
+  }
+}
+
 export const getLocaleStartDayOfWeek = (
   locales: readonly string[] = getNavigatorLocales()
 ): Weekday => {
@@ -98,12 +99,9 @@ export const getLocaleStartDayOfWeek = (
     if (!normalized) {
       continue
     }
-    const match =
-      localeLookup.get(normalized) || localeLookup.get(normalized.split("-")[0])
-    const weekStartsOn = match?.options?.weekStartsOn
-    if (typeof weekStartsOn === "number") {
-      const index = ((weekStartsOn % 7) + 7) % 7
-      return WEEKDAY_BY_INDEX[index]
+    const firstDay = getLocaleFirstDay(normalized)
+    if (typeof firstDay === "number" && firstDay >= 1 && firstDay <= 7) {
+      return WEEKDAY_BY_INDEX[firstDay % 7]
     }
   }
   return DEFAULT_WEEKDAY

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/Dropzone.svelte

@@ -22,6 +22,7 @@
     undefined
   export let gallery: boolean = true
   export let fileTags: string[] = []
+  export let extensions: string = "*"
   export let maximum: number | undefined = undefined
   export let compact: boolean = false
   export let helpText: string | undefined = undefined
@@ -44,6 +45,7 @@
     {handleTooManyFiles}
     {gallery}
     {fileTags}
+    {extensions}
     {maximum}
     {compact}
     on:change={onChange}

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/Modal/Modal.svelte

@@ -21,7 +21,6 @@
   import Portal from "svelte-portal"
   import Context from "../context"
   import { ModalCancelFrom } from "../constants"
-  import { generate } from "shortid"
   import {
     BASE_Z_INDEX,
     overlayStack,
@@ -29,6 +28,7 @@
     removeOverlay,
     isActiveOverlay,
   } from "./overlayStack"
+  import { generateId } from "../utils/ids"
 
   export let fixed: boolean = false
   export let inline: boolean = false
@@ -44,7 +44,7 @@
 
   // Ensure any popovers inside this modal are rendered inside this modal
   // Unique ids are required to ensure nested modals are parented correctly
-  const uniqueId = generate()
+  const uniqueId = generateId()
   const modalId = uniqueId
   setContext(Context.PopoverRoot, `.spectrum-Modal-${uniqueId}`)