@budibase/bbui 3.42.0 → 3.43.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "v3.42.0",
+  "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": "180c04c6852aa7acf0402d53dc909eab764d0251"
+  "gitHead": "221c199a898fffd9c8803d5327cc3089cc02b7f3"
 }

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/Form/Core/DatePicker/DatePickerPopoverContents.svelte

@@ -6,7 +6,7 @@
   import { stringifyDate } from "../../../helpers"
   import Calendar from "./Calendar.svelte"
   import TimePicker from "./TimePicker.svelte"
-  import type { Weekday } from "./utils"
+  import { getLocaleStartDayOfWeek, type Weekday } from "./utils"
 
   export let useKeyboardShortcuts = true
   export let ignoreTimezones = false
@@ -14,7 +14,8 @@
   export let timeOnly = false
   export let setTimeTo: string | undefined = undefined
   export let value: Dayjs | null | undefined = null
-  export let startDayOfWeek: Weekday = "Monday"
+  const browserStartDayOfWeek = getLocaleStartDayOfWeek()
+  export let startDayOfWeek: Weekday | undefined = undefined
   export let calendarLabels = resolveTranslationGroup("calendar")
 
   const dispatch = createEventDispatcher<{ change: string | null }>()
@@ -22,6 +23,7 @@
 
   $: showCalendar = !timeOnly
   $: showTime = enableTime || timeOnly
+  $: resolvedStartDayOfWeek = startDayOfWeek ?? browserStartDayOfWeek
 
   const setToNow = () => {
     const now = dayjs().second(0).millisecond(0)
@@ -65,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/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/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/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}`)
 

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/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/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)