@open-mercato/ui 0.8.1-develop.7215.1.60786cf836 → 0.8.1-develop.7219.1.f96cb57e70

package/src/primitives/__tests__/date-picker.test.tsx

@@ -1,12 +1,13 @@
 import * as React from 'react'
 import { act, fireEvent, render, screen } from '@testing-library/react'
+import { pl } from 'date-fns/locale/pl'
 import { I18nProvider } from '@open-mercato/shared/lib/i18n/context'
 import { DatePicker } from '../date-picker'
 import { DatePicker as LegacyDatePicker } from '../../backend/inputs/DatePicker'
 import { DateTimePicker as LegacyDateTimePicker } from '../../backend/inputs/DateTimePicker'
 
-function renderWithI18n(ui: React.ReactElement) {
-  return render(<I18nProvider locale="en" dict={{}}>{ui}</I18nProvider>)
+function renderWithI18n(ui: React.ReactElement, locale = 'en') {
+  return render(<I18nProvider locale={locale} dict={{}}>{ui}</I18nProvider>)
 }
 
 function getTrigger(): HTMLElement {
@@ -244,6 +245,57 @@ describe('DatePicker primitive', () => {
   })
 })
 
+describe('DatePicker calendar under a non-English locale', () => {
+  async function openPolishCalendar() {
+    renderWithI18n(
+      <DatePicker value={new Date(2026, 0, 15)} onChange={() => {}} locale={pl} />,
+    )
+    await openPopover()
+  }
+
+  it('names the month in the standalone form, not the genitive one used inside a date', async () => {
+    await openPolishCalendar()
+    expect(screen.getByText(/styczeń 2026/)).toBeInTheDocument()
+    expect(screen.queryByText(/stycznia 2026/)).not.toBeInTheDocument()
+  })
+
+  it('labels the month navigation buttons with the standalone month form', async () => {
+    await openPolishCalendar()
+    const navLabels = screen
+      .getAllByRole('button')
+      .map((button) => button.getAttribute('aria-label') ?? '')
+      .filter((label) => /^Go to (previous|next) month: /.test(label))
+    expect(navLabels).toEqual([
+      'Go to previous month: grudzień 2025',
+      'Go to next month: luty 2026',
+    ])
+  })
+
+  // 2025-12-29 is a Monday and 2025-12-28 the Sunday before it, so the first cell of the
+  // January 2026 grid says which day the calendar treats as the start of the week.
+  it('starts the week on the day the locale starts it on', async () => {
+    await openPolishCalendar()
+    expect(screen.getAllByRole('gridcell')[0]).toHaveAttribute('data-day', '2025-12-29')
+  })
+
+  it('keeps the picker default week start when no locale is passed', async () => {
+    renderWithI18n(<DatePicker value={new Date(2026, 0, 15)} onChange={() => {}} />)
+    await openPopover()
+    expect(screen.getAllByRole('gridcell')[0]).toHaveAttribute('data-day', '2025-12-28')
+  })
+
+  // A call site that forgets to thread a `locale` prop is exactly the #5942 bug: without
+  // this fallback the picker silently renders English/Sunday-first for every tenant that
+  // does not explicitly pass one. `date-picker.tsx` must default to the active app locale
+  // so future call sites cannot regress the same way.
+  it('falls back to the app locale when no explicit locale prop is passed', async () => {
+    renderWithI18n(<DatePicker value={new Date(2026, 0, 15)} onChange={() => {}} />, 'pl')
+    await openPopover()
+    expect(screen.getByText(/styczeń 2026/)).toBeInTheDocument()
+    expect(screen.getAllByRole('gridcell')[0]).toHaveAttribute('data-day', '2025-12-29')
+  })
+})
+
 describe('DatePicker backwards-compat shims', () => {
   it('backend/inputs/DatePicker defaults to the Figma-aligned Apply/Cancel footer', async () => {
     renderWithI18n(<LegacyDatePicker value={null} onChange={() => {}} />)

package/src/primitives/calendar.tsx

@@ -38,6 +38,14 @@ export function CalendarMonthSelector({
   )
 }
 
+// `LLLL`/`LLL`, not `MMMM`/`MMM`: these labels name a month on its own, and languages that
+// inflect month names — Polish among the five this repo ships — spell that differently from a
+// month inside a full date. `MMMM` is the inflected (genitive) form, so a Polish header read
+// "stycznia" ("of January") where it should read "styczeń". The two tokens are identical in
+// English, which is why the bug was invisible until a non-English tenant opened a picker.
+const STANDALONE_MONTH_YEAR = 'LLLL yyyy'
+const STANDALONE_MONTH_SHORT = 'LLL'
+
 const navButtonClassName = cn(
   'h-9 w-9 inline-flex items-center justify-center rounded-md shrink-0',
   'border border-border bg-background text-muted-foreground transition-colors',
@@ -60,7 +68,7 @@ function MonthNavButton({
   }
   const target = direction === 'prev' ? dayPicker.previousMonth : dayPicker.nextMonth
   const Icon = direction === 'prev' ? ChevronLeft : ChevronRight
-  const targetLabel = format(target ?? new Date(), 'MMMM yyyy', locale ? { locale } : undefined)
+  const targetLabel = format(target ?? new Date(), STANDALONE_MONTH_YEAR, locale ? { locale } : undefined)
   const ariaLabel = `Go to ${direction === 'prev' ? 'previous' : 'next'} month: ${targetLabel}`
   return (
     <button
@@ -89,7 +97,7 @@ function buildMonthCaption(
     calendarMonth: CalendarMonth
     displayIndex?: number
   }) {
-    const label = format(calendarMonth.date, 'MMMM yyyy', locale ? { locale } : undefined)
+    const label = format(calendarMonth.date, STANDALONE_MONTH_YEAR, locale ? { locale } : undefined)
     const index = typeof displayIndex === 'number' ? displayIndex : 0
     // For multi-month layouts (e.g. range pickers) only the leftmost month
     // exposes the previous-month chevron and only the rightmost exposes the
@@ -156,7 +164,7 @@ function MonthGrid({
   const monthLabels = React.useMemo(
     () =>
       Array.from({ length: 12 }, (_, monthIndex) =>
-        format(new Date(year, monthIndex, 1), 'MMM', locale ? { locale } : undefined),
+        format(new Date(year, monthIndex, 1), STANDALONE_MONTH_SHORT, locale ? { locale } : undefined),
       ),
     [year, locale],
   )

package/src/primitives/date-locale.ts

@@ -0,0 +1,80 @@
+"use client"
+
+import type { Locale as DateFnsLocale } from 'date-fns/locale'
+import { de } from 'date-fns/locale/de'
+import { enUS } from 'date-fns/locale/en-US'
+import { es } from 'date-fns/locale/es'
+import { ko } from 'date-fns/locale/ko'
+import { pl } from 'date-fns/locale/pl'
+import { useOptionalLocale } from '@open-mercato/shared/lib/i18n/context'
+
+export type TimeDisplayFormat = '12h' | '24h'
+
+/**
+ * The app locale is a bare language code (`'pl'`), but `react-day-picker` and every
+ * date-fns formatter want a `Locale` object — the thing that knows month names and,
+ * critically, `weekStartsOn`. Without one the picker falls back to the bundled `enUS`:
+ * English month/weekday names and a Sunday-first week for every tenant.
+ *
+ * The five entries mirror `locales` in `@open-mercato/shared/lib/i18n/config`. They are
+ * imported statically rather than loaded on demand because a picker renders its calendar
+ * synchronously — an async locale would flash an English month header first.
+ */
+const DATE_FNS_LOCALES: Record<string, DateFnsLocale> = {
+  de,
+  en: enUS,
+  es,
+  ko,
+  pl,
+}
+
+/**
+ * The date-fns locale for an app locale code, or `undefined` when there is none to apply.
+ *
+ * `undefined` rather than `enUS` for an unknown code: the consumers pass this straight into
+ * a `locale?: Locale` prop, and leaving it unset keeps their own documented default instead
+ * of pinning English on a deployment that added a locale this map has not caught up with.
+ */
+export function resolveDateFnsLocale(locale?: string | null): DateFnsLocale | undefined {
+  const code = locale?.split('-')[0]?.toLowerCase()
+  return code ? DATE_FNS_LOCALES[code] : undefined
+}
+
+/** The date-fns locale for the active `I18nProvider` locale, or `undefined` outside a provider. */
+export function useDateFnsLocale(): DateFnsLocale | undefined {
+  return resolveDateFnsLocale(useOptionalLocale())
+}
+
+/**
+ * Whether a locale writes the time of day on a 12- or 24-hour clock.
+ *
+ * Asked of `Intl` rather than a "not English means 24h" heuristic, because that heuristic is
+ * wrong for two of the five locales this repo ships: Korean is a 12-hour locale (오전/오후), as
+ * is English, while Polish, German and Spanish are not. `12h` is the fallback when `Intl` cannot
+ * answer, matching the `TimePicker` primitive's own default.
+ */
+// Constructing an `Intl.DateTimeFormat` costs ~40x using one, and this runs on every render of
+// every time picker — so the answer is kept per locale, exactly as `date-format.ts` caches its
+// formatters. The key space is the locales a deployment ships and the answer never changes.
+const timeFormatCache = new Map<string, TimeDisplayFormat>()
+
+export function deriveTimeDisplayFormat(locale?: string | null): TimeDisplayFormat {
+  if (!locale) return '12h'
+  const cached = timeFormatCache.get(locale)
+  if (cached) return cached
+  let resolved: TimeDisplayFormat = '12h'
+  try {
+    if (new Intl.DateTimeFormat(locale, { hour: 'numeric' }).resolvedOptions().hour12 === false) {
+      resolved = '24h'
+    }
+  } catch {
+    resolved = '12h'
+  }
+  timeFormatCache.set(locale, resolved)
+  return resolved
+}
+
+/** The clock convention of the active `I18nProvider` locale; `12h` outside a provider. */
+export function useTimeDisplayFormat(): TimeDisplayFormat {
+  return deriveTimeDisplayFormat(useOptionalLocale())
+}

package/src/primitives/date-picker.tsx

@@ -11,6 +11,7 @@ import { Button } from './button'
 import { LinkButton } from './link-button'
 import { TimeInput } from '../backend/inputs/TimeInput'
 import { formatWithPublicDateFormat, resolvePublicDateFormat, resolvePublicDateTimeFormat } from './date-format'
+import { useDateFnsLocale } from './date-locale'
 
 export type DatePickerFooter = 'apply-cancel' | 'today-clear' | 'none'
 
@@ -56,6 +57,12 @@ export type DatePickerProps = {
   align?: 'start' | 'center' | 'end'
   minDate?: Date
   maxDate?: Date
+  /**
+   * date-fns locale for month/weekday names and the first day of the week.
+   * Defaults to the active `I18nProvider` locale (`undefined` outside a
+   * provider, matching pre-existing behavior); pass one explicitly to pin it
+   * regardless of the app locale.
+   */
   locale?: Locale
   displayFormat?: string
   className?: string
@@ -104,7 +111,7 @@ export function DatePicker({
   align = 'start',
   minDate,
   maxDate,
-  locale,
+  locale: localeProp,
   displayFormat,
   className,
   popoverClassName,
@@ -116,6 +123,14 @@ export function DatePicker({
 }: DatePickerProps) {
   const resolvedCloseOnSelect = closeOnSelect ?? footer === 'today-clear'
   const t = useT()
+  // Callers may pin a locale explicitly (e.g. a field-level override); absent
+  // that, fall back to the active app locale so every consumer of this
+  // primitive — not just the ones that remember to thread a `locale` prop —
+  // renders a localized month/weekday grid instead of silently defaulting to
+  // English. Outside an `I18nProvider` this resolves to `undefined`, same as
+  // not passing a locale at all today.
+  const appLocale = useDateFnsLocale()
+  const locale = localeProp ?? appLocale
   const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false)
   const open = controlledOpen ?? uncontrolledOpen
   const setOpen = React.useCallback((next: boolean) => {

package/src/primitives/time-picker.tsx

@@ -16,7 +16,7 @@ type SlotInteractiveState = 'default' | 'hover' | 'active' | 'disabled'
 type DurationInteractiveState = SlotInteractiveState
 type StatusInteractiveState = 'default' | 'hover' | 'selected' | 'disabled'
 
-type TimeFormat = '12h' | '24h'
+export type TimeFormat = '12h' | '24h'
 
 type LegacyFooterAction = {
   label: string