@open-mercato/ui 0.8.1-develop.7296.1.2111d779db → 0.9.0

package/src/backend/messages/useMessageCompose.ts

@@ -8,6 +8,7 @@ import { surfaceRecordConflict } from '../conflicts'
 import type {
   AttachmentListResponse,
   MessageComposerProps,
+  MessageSenderOption,
   MessageTypeItem,
   UserListItem,
 } from './message-composer.types'
@@ -45,6 +46,20 @@ function toErrorMessage(payload: unknown): string | null {
   return null
 }
 
+/**
+ * Field-level errors a route returns alongside `error`, e.g. the send-as-user
+ * facade's 422 for a mailbox that needs reconnecting. Read defensively: the
+ * key is optional and any non-string value is dropped rather than rendered.
+ */
+function readFieldErrors(payload: unknown): Record<string, string> | null {
+  if (!payload || typeof payload !== 'object') return null
+  const raw = (payload as Record<string, unknown>).fieldErrors
+  if (!raw || typeof raw !== 'object' || Array.isArray(raw)) return null
+  const entries = Object.entries(raw as Record<string, unknown>)
+    .filter((entry): entry is [string, string] => typeof entry[1] === 'string')
+  return entries.length ? Object.fromEntries(entries) : null
+}
+
 function createTemporaryAttachmentRecordId(): string {
   const randomPart =
     typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function'
@@ -87,6 +102,9 @@ export type UseMessageComposeResult = {
   setVisibility: React.Dispatch<React.SetStateAction<'public' | 'internal'>>
   externalEmail: string
   setExternalEmail: React.Dispatch<React.SetStateAction<string>>
+  senderOptions: MessageSenderOption[]
+  senderChannelId: string
+  setSenderChannelId: React.Dispatch<React.SetStateAction<string>>
   sendViaEmail: boolean
   setSendViaEmail: React.Dispatch<React.SetStateAction<boolean>>
   contextActionRequired: boolean
@@ -100,6 +118,7 @@ export type UseMessageComposeResult = {
   submitting: boolean
   submitMode: 'send' | 'draft'
   submitError: string | null
+  submitFieldErrors: Record<string, string> | null
   composerTitle: string
   submitLabel: string
   selectedRecipientOptions: TagsInputOption[]
@@ -128,6 +147,7 @@ export function useMessageCompose({
   contextObject = null,
   requiredActionConfig = null,
   contextPreview = null,
+  senderOptions,
   defaultValues,
   expectedUpdatedAt = null,
   onSuccess,
@@ -159,6 +179,9 @@ export function useMessageCompose({
   const [submitting, setSubmitting] = React.useState(false)
   const [submitMode, setSubmitMode] = React.useState<'send' | 'draft'>('send')
   const [submitError, setSubmitError] = React.useState<string | null>(null)
+  const [submitFieldErrors, setSubmitFieldErrors] = React.useState<Record<string, string> | null>(null)
+  // Empty means the platform sender: the default the composer has always used.
+  const [senderChannelId, setSenderChannelId] = React.useState('')
   // Tracks whether the composer is currently in the "open" lifecycle so the init
   // effect below only runs on the closed → open transition, not on every parent
   // re-render that produces a new `defaultValues` / `contextObject` reference
@@ -473,7 +496,19 @@ export function useMessageCompose({
     onCancel?.()
   }, [inline, onCancel, onOpenChange, submitting])
 
+  // The "Send from" control only exists for a compose addressing an external
+  // recipient, so a selection made before the mode changed must not survive into
+  // a payload the control is no longer shown for.
+  const resolvedSenderOptions = React.useMemo(
+    () => (isComposePublicVisibility ? senderOptions ?? [] : []),
+    [isComposePublicVisibility, senderOptions],
+  )
+  const effectiveSenderChannelId = resolvedSenderOptions.some((option) => option.id === senderChannelId)
+    ? senderChannelId
+    : ''
+
   const composeSendOperation = useComposeSendOperation({
+    senderChannelId: effectiveSenderChannelId,
     t,
     messageType,
     createableMessageTypes,
@@ -496,6 +531,7 @@ export function useMessageCompose({
 
   const composeDraftOperation = useComposeDraftOperation({
     t,
+    senderChannelId: effectiveSenderChannelId,
     messageId,
     messageType,
     priority,
@@ -536,6 +572,7 @@ export function useMessageCompose({
 
   const sendDraftOperation = useSendDraftOperation({
     t,
+    senderChannelId: effectiveSenderChannelId,
     messageId: messageId ?? '',
     messageType,
     priority,
@@ -557,6 +594,7 @@ export function useMessageCompose({
 
   const updateDraftOperation = useUpdateDraftOperation({
     t,
+    senderChannelId: effectiveSenderChannelId,
     messageId: messageId ?? '',
     messageType,
     priority,
@@ -580,6 +618,7 @@ export function useMessageCompose({
     if (submitting) return false
 
     setSubmitError(null)
+    setSubmitFieldErrors(null)
 
     const isEditingExistingDraft = variant === 'compose' && Boolean(messageId)
     const isComposeDraftSubmit = saveAsDraft && variant === 'compose'
@@ -650,6 +689,7 @@ export function useMessageCompose({
           } else {
             const message = toErrorMessage(call.result) ?? t('messages.errors.sendFailed', 'Failed to send message.')
             setSubmitError(message)
+            setSubmitFieldErrors(readFieldErrors(call.result))
             flash(message, 'error')
           }
           shouldReturnFalse = true
@@ -734,6 +774,8 @@ export function useMessageCompose({
     }
 
     if (event.key === 'Escape') {
+      if (event.defaultPrevented) return
+      if (event.target instanceof Node && !event.currentTarget.contains(event.target)) return
       event.preventDefault()
       handleCancel()
     }
@@ -787,6 +829,9 @@ export function useMessageCompose({
     setVisibility,
     externalEmail,
     setExternalEmail,
+    senderOptions: resolvedSenderOptions,
+    senderChannelId: effectiveSenderChannelId,
+    setSenderChannelId,
     sendViaEmail,
     setSendViaEmail,
     contextActionRequired,
@@ -800,6 +845,7 @@ export function useMessageCompose({
     submitting,
     submitMode,
     submitError,
+    submitFieldErrors,
     composerTitle,
     submitLabel,
     selectedRecipientOptions,

package/src/backend/messages/useMessageComposeOperations.ts

@@ -39,6 +39,11 @@ type ComposeOperationParams = {
   body: string
   bodyFormat: 'text' | 'markdown'
   sendViaEmail: boolean
+  /**
+   * Chosen alternative sender, or empty for the platform sender. Sent only on a
+   * real send: a draft is not delivered, so routing it is meaningless.
+   */
+  senderChannelId: string
   contextObject: MessageComposerContextObject | null
   defaultValues: MessageComposerProps['defaultValues']
   contextActionOptions: Array<{ id: string; label: string }>
@@ -143,6 +148,9 @@ function buildComposePayload(
     objects: contextObjects,
     attachmentIds: input.attachmentIds.length > 0 ? input.attachmentIds : undefined,
     sendViaEmail: params.sendViaEmail,
+    senderChannelId: !input.isDraft && publicMessage && params.senderChannelId
+      ? params.senderChannelId
+      : undefined,
     isDraft: input.isDraft,
   }
 }

package/src/backend/notifications/NotificationItem.tsx

@@ -108,6 +108,12 @@ export function NotificationItem({
 
   const handleAction = async (actionId: string, event?: React.MouseEvent) => {
     event?.stopPropagation()
+    if (notification.status === 'actioned') {
+      const actionHref = notification.actions.find((action) => action.id === actionId)?.href
+      const fallbackHref = actionHref ?? notification.linkHref
+      if (fallbackHref) router.push(fallbackHref)
+      return
+    }
     setExecuting(actionId)
     try {
       const result = await onExecuteAction(actionId)
@@ -127,6 +133,7 @@ export function NotificationItem({
     labelKey: action.labelKey ?? action.label,
     variant: action.variant as NotificationTypeAction['variant'],
     icon: action.icon,
+    href: action.href,
   }))
 
   if (CustomRenderer) {

package/src/backend/notifications/__tests__/NotificationItem.customRenderer.test.tsx

@@ -0,0 +1,139 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import * as React from 'react'
+import { render, screen, fireEvent, waitFor } from '@testing-library/react'
+import { NotificationItem } from '../NotificationItem'
+import type {
+  NotificationDto,
+  NotificationRendererProps,
+} from '@open-mercato/shared/modules/notifications/types'
+import type { TranslateFn } from '@open-mercato/shared/lib/i18n/context'
+
+const push = jest.fn()
+
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({
+    push,
+    replace: jest.fn(),
+    prefetch: jest.fn(),
+    refresh: jest.fn(),
+    back: jest.fn(),
+    forward: jest.fn(),
+  }),
+}))
+
+const t = ((key: string, fallback?: unknown) =>
+  typeof fallback === 'string' ? fallback : key) as TranslateFn
+
+function ViewRenderer({ onAction, actions = [] }: NotificationRendererProps) {
+  return (
+    <button type="button" onClick={() => void onAction(actions[0]?.id ?? 'view')}>
+      View Quote
+    </button>
+  )
+}
+
+function TwoActionRenderer({ onAction }: NotificationRendererProps) {
+  return (
+    <>
+      <button type="button" onClick={() => void onAction('view-order')}>
+        View order
+      </button>
+      <button type="button" onClick={() => void onAction('view-inventory')}>
+        View inventory
+      </button>
+    </>
+  )
+}
+
+function buildNotification(overrides: Partial<NotificationDto>): NotificationDto {
+  return {
+    id: 'n-1',
+    type: 'sales.quote.created',
+    title: 'Quote created',
+    severity: 'info',
+    status: 'read',
+    actions: [{ id: 'view', label: 'View' }],
+    linkHref: '/backend/sales/quotes/q-1',
+    createdAt: '2026-09-25T00:00:00.000Z',
+    ...overrides,
+  }
+}
+
+function renderItem(
+  notification: NotificationDto,
+  onExecuteAction: jest.Mock,
+  customRenderer: React.ComponentType<NotificationRendererProps> = ViewRenderer,
+) {
+  render(
+    <NotificationItem
+      notification={notification}
+      onMarkAsRead={jest.fn().mockResolvedValue(undefined)}
+      onExecuteAction={onExecuteAction}
+      onDismiss={jest.fn().mockResolvedValue(undefined)}
+      t={t}
+      customRenderer={customRenderer}
+    />,
+  )
+}
+
+describe('NotificationItem custom renderer actions', () => {
+  beforeEach(() => {
+    push.mockReset()
+  })
+
+  it('executes the action and follows the returned href for a pending notification', async () => {
+    const onExecuteAction = jest.fn().mockResolvedValue({ href: '/backend/sales/quotes/q-1' })
+    renderItem(buildNotification({ status: 'read' }), onExecuteAction)
+
+    fireEvent.click(screen.getByRole('button', { name: 'View Quote' }))
+
+    await waitFor(() => expect(push).toHaveBeenCalledWith('/backend/sales/quotes/q-1'))
+    expect(onExecuteAction).toHaveBeenCalledWith('view')
+  })
+
+  it('navigates to linkHref without re-executing an already actioned notification', async () => {
+    const onExecuteAction = jest.fn().mockResolvedValue({})
+    renderItem(buildNotification({ status: 'actioned', actionTaken: 'view' }), onExecuteAction)
+
+    fireEvent.click(screen.getByRole('button', { name: 'View Quote' }))
+
+    await waitFor(() => expect(push).toHaveBeenCalledWith('/backend/sales/quotes/q-1'))
+    expect(onExecuteAction).not.toHaveBeenCalled()
+  })
+
+  it('does nothing for an actioned notification without a link', async () => {
+    const onExecuteAction = jest.fn().mockResolvedValue({})
+    renderItem(buildNotification({ status: 'actioned', linkHref: null }), onExecuteAction)
+
+    fireEvent.click(screen.getByRole('button', { name: 'View Quote' }))
+
+    await waitFor(() => expect(onExecuteAction).not.toHaveBeenCalled())
+    expect(push).not.toHaveBeenCalled()
+  })
+
+  it('navigates to the clicked action href, not linkHref, on a multi-action actioned notification', async () => {
+    const onExecuteAction = jest.fn().mockResolvedValue({})
+    renderItem(
+      buildNotification({
+        status: 'actioned',
+        actionTaken: 'view-order',
+        actions: [
+          { id: 'view-order', label: 'View order', href: '/backend/sales/orders/o-1' },
+          { id: 'view-inventory', label: 'View inventory', href: '/backend/wms/inventory' },
+        ],
+        linkHref: '/backend/sales/orders/o-1',
+      }),
+      onExecuteAction,
+      TwoActionRenderer,
+    )
+
+    fireEvent.click(screen.getByRole('button', { name: 'View inventory' }))
+
+    await waitFor(() => expect(push).toHaveBeenCalledWith('/backend/wms/inventory'))
+    expect(push).not.toHaveBeenCalledWith('/backend/sales/orders/o-1')
+    expect(onExecuteAction).not.toHaveBeenCalled()
+  })
+})

package/src/portal/PortalShell.tsx

@@ -270,10 +270,13 @@ export function PortalShell({
       <div className="flex min-h-svh flex-col bg-background" data-portal-handle={PORTAL_SHELL_HANDLE}>
         <header className="sticky top-0 z-sticky border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80" data-portal-handle={PORTAL_HEADER_HANDLE}>
           <div className="mx-auto flex h-16 w-full max-w-screen-lg items-center justify-between px-6">
-            <Link href={portalHome} className="flex items-center gap-2.5 text-foreground transition hover:opacity-80" aria-label={headerTitle}>
+            {/* A plain anchor, not a client-side Link: for a signed-in customer on a public
+                auth route the root is across the public/authenticated boundary, and only a
+                full page load re-runs the layout that hands the session back (#6362). */}
+            <a href={portalHome} className="flex items-center gap-2.5 text-foreground transition hover:opacity-80" aria-label={headerTitle}>
               <Image src={logo?.src ?? "/open-mercato.svg"} alt={logo?.alt ?? ""} width={28} height={28} className="" priority />
               <span className="text-base font-semibold tracking-tight">{headerTitle}</span>
-            </Link>
+            </a>
             <nav aria-label="Primary" className="flex items-center gap-1">
               <Button asChild variant="ghost" size="sm" className="text-sm">
                 <Link href={loginHref}>{t('portal.nav.login', 'Log In')}</Link>
@@ -293,10 +296,10 @@ export function PortalShell({
 
         <footer className="border-t" data-portal-handle={PORTAL_FOOTER_HANDLE}>
           <div className="mx-auto flex w-full max-w-screen-lg items-center justify-between px-6 py-6">
-            <Link href={portalHome} className="flex items-center gap-2 text-muted-foreground transition hover:text-foreground">
+            <a href={portalHome} className="flex items-center gap-2 text-muted-foreground transition hover:text-foreground">
               <Image src={logo?.src ?? "/open-mercato.svg"} alt={logo?.alt ?? ""} width={20} height={20} className="" />
               <span className="text-sm font-medium text-foreground">{headerTitle}</span>
-            </Link>
+            </a>
             <p className="text-xs text-muted-foreground/60">
               {t('portal.footer.copyright', '\u00A9 {year} All rights reserved.', { year: new Date().getFullYear() })}
             </p>

package/src/portal/__tests__/PortalShell.test.tsx

@@ -31,7 +31,7 @@ jest.mock('@open-mercato/shared/lib/i18n/context', () => ({
 jest.mock('next/link', () => {
   const React = require('react')
   return React.forwardRef(({ children, href, ...rest }: any, ref: React.ForwardedRef<HTMLAnchorElement>) => (
-    <a href={typeof href === 'string' ? href : href?.toString?.()} ref={ref} {...rest}>
+    <a href={typeof href === 'string' ? href : href?.toString?.()} ref={ref} data-client-link="true" {...rest}>
       {children}
     </a>
   ))
@@ -264,6 +264,34 @@ describe('PortalShell', () => {
     })
   })
 
+  // The (frontend) layout sits above [...slug] and does not re-run on a client-side
+  // navigation, so a signed-in customer hopping from a public auth route (session
+  // withheld) to the portal root would keep an empty context and see the logged-out
+  // landing page. The public chrome's home links must be full page loads (#6362).
+  it('links the public chrome back to the portal root with a full page load', () => {
+    render(
+      <PortalLayoutShell
+        orgSlug="acme"
+        organizationName="Acme"
+        tenantId="tenant-1"
+        organizationId="org-1"
+        authenticated={false}
+        userName={null}
+        userEmail={null}
+        customerAuth={null}
+      >
+        <div>Login form</div>
+      </PortalLayoutShell>,
+    )
+
+    const homeLinks = screen.getAllByRole('link').filter((link) => link.getAttribute('href') === '/acme/portal')
+    expect(homeLinks).toHaveLength(2)
+    for (const link of homeLinks) {
+      expect(link).not.toHaveAttribute('data-client-link')
+    }
+    expect(screen.getByRole('link', { name: 'Log In' })).toHaveAttribute('data-client-link', 'true')
+  })
+
   it('renders the authenticated chrome for the props the layout passes on a signed-in route', async () => {
     apiCallMock.mockResolvedValue({ ok: true, status: 200, result: { ok: true, groups: [] } })
 

package/src/primitives/__tests__/calendar.test.tsx

@@ -1,7 +1,9 @@
 import * as React from 'react'
-import { fireEvent, render, screen } from '@testing-library/react'
+import { fireEvent, render, screen, within } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 import { I18nProvider } from '@open-mercato/shared/lib/i18n/context'
 import { Calendar, CalendarMonthSelector } from '../calendar'
+import { DatePicker } from '../date-picker'
 
 describe('Calendar source sizes and month selector', () => {
   it('preserves 36px days by default and supports optional 40px days', () => {
@@ -31,4 +33,175 @@ describe('Calendar source sizes and month selector', () => {
     fireEvent.click(previous)
     expect(onPreviousMonth).not.toHaveBeenCalled()
   })
+
+  it('translates the caption and month grid accessible names from the app locale', () => {
+    const dict = {
+      'ui.calendar.goToPreviousMonth': 'Poprzedni: {month}',
+      'ui.calendar.goToNextMonth': 'Następny: {month}',
+      'ui.calendar.openMonthYearNavigation': '{month} – otwórz nawigację',
+      'ui.calendar.selectMonthAndYear': 'Wybierz miesiąc i rok',
+      'ui.calendar.goToPreviousYear': 'Poprzedni rok: {year}',
+      'ui.calendar.goToNextYear': 'Następny rok: {year}',
+      'ui.calendar.backToDaySelection': '{year} – powrót do dni',
+    }
+    render(<I18nProvider locale="pl" dict={dict}><Calendar mode="single" defaultMonth={new Date(2026, 5, 1)} /></I18nProvider>)
+    expect(screen.getByRole('button', { name: 'Poprzedni: May 2026' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Następny: July 2026' })).toBeInTheDocument()
+    fireEvent.click(screen.getByRole('button', { name: 'June 2026 – otwórz nawigację' }))
+    expect(screen.getByRole('dialog', { name: 'Wybierz miesiąc i rok' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Poprzedni rok: 2025' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Następny rok: 2027' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: '2026 – powrót do dni' })).toBeInTheDocument()
+  })
+
+  it('keeps the English accessible names without an I18nProvider', () => {
+    render(<Calendar mode="single" defaultMonth={new Date(2026, 5, 1)} />)
+    expect(screen.getByRole('button', { name: 'Go to previous month: May 2026' })).toBeInTheDocument()
+    fireEvent.click(screen.getByRole('button', { name: 'June 2026 – open month and year navigation' }))
+    expect(screen.getByRole('dialog', { name: 'Select month and year' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Go to previous year: 2025' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Go to next year: 2027' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: '2026 – back to day selection' })).toBeInTheDocument()
+  })
+
+  it('honors caller-supplied labels for the visible month arrows', () => {
+    const labelPrevious = jest.fn((month?: Date) => `Back to ${month?.getMonth()}`)
+    const labelNext = jest.fn((month?: Date) => `Forward to ${month?.getMonth()}`)
+    render(<I18nProvider locale="en" dict={{}}><Calendar mode="single" defaultMonth={new Date(2026, 5, 1)} labels={{ labelPrevious, labelNext }} /></I18nProvider>)
+    fireEvent.click(screen.getByRole('button', { name: 'Forward to 6' }))
+    expect(screen.getByRole('button', { name: 'Back to 5' })).toBeInTheDocument()
+  })
+
+  it('does not render the hidden built-in navigation with its untranslated names', () => {
+    render(<I18nProvider locale="pl" dict={{}}><Calendar mode="single" defaultMonth={new Date(2026, 5, 1)} /></I18nProvider>)
+    expect(screen.queryByRole('navigation')).not.toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: /Go to the (Previous|Next) Month/ })).not.toBeInTheDocument()
+  })
+})
+
+describe('Calendar month grid keyboard navigation', () => {
+  it('focuses the displayed month and makes the covered day view inactive', async () => {
+    const user = userEvent.setup()
+    render(<Calendar mode="single" defaultMonth={new Date(2026, 5, 1)} />)
+    const day = screen.getByRole('button', { name: /Friday, June 12/ })
+    const caption = screen.getByRole('button', { name: /June 2026 – open/ })
+    caption.focus()
+
+    await user.keyboard('{Enter}')
+
+    const grid = screen.getByRole('dialog', { name: 'Select month and year' })
+    expect(within(grid).getByRole('button', { name: 'Jun' })).toHaveFocus()
+    expect(day.closest('[aria-hidden="true"]')).toHaveAttribute('inert')
+    expect(day.closest('[aria-hidden="true"]')).toHaveClass('invisible')
+    await user.tab()
+    await user.tab()
+    expect(within(grid).getByRole('button', { name: 'Aug' })).toHaveFocus()
+  })
+
+  it('cycles Tab and Shift+Tab through every grid control', async () => {
+    const user = userEvent.setup()
+    render(<Calendar mode="single" defaultMonth={new Date(2026, 5, 1)} />)
+    await user.click(screen.getByRole('button', { name: /June 2026 – open/ }))
+    const grid = screen.getByRole('dialog')
+    const previousYear = within(grid).getByRole('button', { name: 'Go to previous year: 2025' })
+    const december = within(grid).getByRole('button', { name: 'Dec' })
+    december.focus()
+
+    await user.tab()
+    expect(previousYear).toHaveFocus()
+    await user.tab({ shift: true })
+    expect(december).toHaveFocus()
+
+    for (const shift of [false, true]) {
+      for (let tabIndex = 0; tabIndex < within(grid).getAllByRole('button').length; tabIndex++) {
+        await user.tab({ shift })
+        expect(grid).toContainElement(document.activeElement as HTMLElement)
+      }
+    }
+  })
+
+  it('restores caption focus after Escape without changing the date or month', async () => {
+    const user = userEvent.setup()
+    const onSelect = jest.fn()
+    const onMonthChange = jest.fn()
+    render(<Calendar mode="single" selected={new Date(2026, 5, 12)} defaultMonth={new Date(2026, 5, 1)} onSelect={onSelect} onMonthChange={onMonthChange} />)
+    await user.click(screen.getByRole('button', { name: /June 2026 – open/ }))
+    await user.click(screen.getByRole('button', { name: 'Go to next year: 2027' }))
+    expect(screen.getByRole('button', { name: 'Go to next year: 2028' })).toHaveFocus()
+
+    await user.keyboard('{Escape}')
+
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /June 2026 – open/ })).toHaveFocus()
+    expect(screen.getByRole('button', { name: /Friday, June 12/ })).toBeVisible()
+    expect(onSelect).not.toHaveBeenCalled()
+    expect(onMonthChange).not.toHaveBeenCalled()
+  })
+
+  it('returns to the day view when the year button is activated', async () => {
+    const user = userEvent.setup()
+    render(<Calendar mode="single" defaultMonth={new Date(2026, 5, 1)} />)
+    await user.click(screen.getByRole('button', { name: /June 2026 – open/ }))
+    await user.click(screen.getByRole('button', { name: '2026 – back to day selection' }))
+
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+    const caption = screen.getByRole('button', { name: /June 2026 – open/ })
+    expect(caption).toHaveFocus()
+    expect(caption.closest('[inert]')).toBeNull()
+  })
+
+  it('restores focus to the new caption after selecting a different month and year', async () => {
+    const user = userEvent.setup()
+    const onMonthChange = jest.fn()
+    const onSelect = jest.fn()
+    render(<React.StrictMode><Calendar mode="single" defaultMonth={new Date(2026, 5, 1)} onMonthChange={onMonthChange} onSelect={onSelect} /></React.StrictMode>)
+    await user.click(screen.getByRole('button', { name: /June 2026 – open/ }))
+    await user.click(screen.getByRole('button', { name: 'Go to next year: 2027' }))
+    expect(screen.getByRole('button', { name: 'Go to next year: 2028' })).toHaveFocus()
+    await user.click(screen.getByRole('button', { name: 'Jul' }))
+
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /July 2027 – open/ })).toHaveFocus()
+    expect(onMonthChange).toHaveBeenCalledWith(new Date(2027, 6, 1))
+    expect(onSelect).not.toHaveBeenCalled()
+  })
+
+  it('keeps the date picker open when Escape dismisses the nested month grid', async () => {
+    const user = userEvent.setup()
+    render(<I18nProvider locale="en" dict={{}}><DatePicker value={new Date(2026, 5, 12)} onChange={jest.fn()} aria-label="Closing date" /></I18nProvider>)
+    await user.click(screen.getByRole('button', { name: 'Closing date' }))
+    await user.click(screen.getByRole('button', { name: /June 2026 – open/ }))
+    await user.keyboard('{Escape}')
+
+    expect(screen.queryByRole('dialog', { name: 'Select month and year' })).not.toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /June 2026 – open/ })).toHaveFocus()
+    expect(screen.getByRole('button', { name: 'Apply' })).toBeVisible()
+
+    await user.keyboard('{Escape}')
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Closing date' })).toHaveFocus()
+  })
+
+  it('removes the Escape listener when the calendar unmounts with its grid open', async () => {
+    const user = userEvent.setup()
+    const { unmount } = render(<Calendar mode="single" defaultMonth={new Date(2026, 5, 1)} />)
+    await user.click(screen.getByRole('button', { name: /June 2026 – open/ }))
+    unmount()
+    render(<button type="button">Outside calendar</button>)
+    const outsideButton = screen.getByRole('button', { name: 'Outside calendar' })
+    outsideButton.focus()
+    const escape = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true })
+
+    expect(outsideButton.dispatchEvent(escape)).toBe(true)
+    expect(outsideButton).toHaveFocus()
+  })
+
+  it('keeps multi-month calendars in the day view', () => {
+    render(<Calendar mode="range" defaultMonth={new Date(2026, 5, 1)} numberOfMonths={2} />)
+
+    expect(screen.queryByRole('button', { name: /open month and year/ })).not.toBeInTheDocument()
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /Friday, June 12/ })).toBeVisible()
+    expect(screen.getByRole('button', { name: /Friday, June 12/ }).closest('[inert]')).toBeNull()
+  })
 })