@open-mercato/ui 0.8.1-develop.7452.1.5e211edd51 → 0.8.1-develop.7455.1.8f7e53badb

package/src/backend/__tests__/CrudForm.fieldChangeRenders.test.tsx

@@ -0,0 +1,127 @@
+/** @jest-environment jsdom */
+const triggerEventMock = jest.fn()
+
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({ push: jest.fn() }),
+  usePathname: () => '/',
+  useSearchParams: () => new URLSearchParams(),
+}))
+jest.mock('remark-gfm', () => ({ __esModule: true, default: {} }))
+jest.mock('../confirm-dialog', () => ({
+  useConfirmDialog: () => ({ confirm: jest.fn(), ConfirmDialogElement: null }),
+}))
+jest.mock('../injection/InjectionSpot', () => ({
+  __esModule: true,
+  InjectionSpot: () => null,
+  useInjectionWidgets: () => ({ widgets: [], loading: false, error: null }),
+  useInjectionSpotEvents: () => ({ triggerEvent: triggerEventMock }),
+}))
+jest.mock('../injection/useInjectionDataWidgets', () => ({
+  __esModule: true,
+  useInjectionDataWidgets: () => ({ widgets: [], isLoading: false, error: null }),
+}))
+
+const mockControlRender = jest.fn()
+jest.mock('../../primitives/textarea', () => {
+  const actual = jest.requireActual('../../primitives/textarea')
+  const ReactActual = jest.requireActual('react')
+  return {
+    ...actual,
+    Textarea: ReactActual.forwardRef((props: Record<string, unknown>, ref: unknown) => {
+      mockControlRender('textarea')
+      return ReactActual.createElement(actual.Textarea, { ...props, ref })
+    }),
+  }
+})
+jest.mock('../../primitives/checkbox', () => {
+  const actual = jest.requireActual('../../primitives/checkbox')
+  const ReactActual = jest.requireActual('react')
+  return {
+    ...actual,
+    Checkbox: ReactActual.forwardRef((props: Record<string, unknown>, ref: unknown) => {
+      mockControlRender('checkbox')
+      return ReactActual.createElement(actual.Checkbox, { ...props, ref })
+    }),
+  }
+})
+
+import * as React from 'react'
+import { act, fireEvent, screen } from '@testing-library/react'
+import { renderWithProviders } from '@open-mercato/shared/lib/testing/renderWithProviders'
+import { CrudForm, type CrudField, type CrudFormGroup } from '../CrudForm'
+
+describe('CrudForm field-change render cost', () => {
+  beforeEach(() => {
+    triggerEventMock.mockReset()
+    triggerEventMock.mockImplementation(async (_event: string, data: Record<string, unknown>) => ({ ok: true, data }))
+  })
+
+  it('renders the form once per steady-state edit when no widget answers the field-change event', async () => {
+    const groupRender = jest.fn()
+    const groups: CrudFormGroup[] = [{
+      id: 'details',
+      bare: true,
+      component: ({ values, setValue }) => {
+        groupRender()
+        return <input aria-label="Draft title" value={String(values.title ?? '')} onChange={(event) => setValue('title', event.target.value)} />
+      },
+    }]
+    renderWithProviders(
+      <CrudForm embedded fields={[]} groups={groups} initialValues={{ title: '' }} injectionSpotId="example:field-change" onSubmit={() => {}} />,
+    )
+    await act(async () => { await Promise.resolve() })
+    const rendersPerEdit: number[] = []
+    for (const value of ['a', 'ab', 'abc', 'abcd']) {
+      groupRender.mockClear()
+      triggerEventMock.mockClear()
+      await act(async () => {
+        fireEvent.change(screen.getByLabelText('Draft title'), { target: { value } })
+        await Promise.resolve()
+        await Promise.resolve()
+      })
+      await act(async () => { await new Promise((resolve) => setTimeout(resolve, 20)) })
+      expect(screen.getByLabelText('Draft title')).toHaveValue(value)
+      expect(triggerEventMock.mock.calls.filter(([event]) => event === 'onFieldChange')).toHaveLength(1)
+      rendersPerEdit.push(groupRender.mock.calls.length)
+    }
+    expect(rendersPerEdit.slice(1)).toEqual([1, 1, 1])
+  })
+
+  it('leaves the other fields alone while one field is being typed in', async () => {
+    const fields: CrudField[] = [
+      { id: 'title', label: 'Title', type: 'text', required: true },
+      { id: 'notes', label: 'Notes', type: 'textarea' },
+      { id: 'flag', label: 'Flag', type: 'checkbox' },
+    ]
+    const rendered = renderWithProviders(
+      <CrudForm title="Form" fields={fields} initialValues={{ title: '', notes: 'keep', flag: false }} injectionSpotId="example:field-change" onSubmit={() => {}} />,
+      { dict: { 'ui.forms.actions.save': 'Save', 'ui.forms.errors.required': 'Required' } },
+    )
+    const input = rendered.container.querySelector('[data-crud-field-id="title"] input') as HTMLInputElement
+    const edit = async (value: string) => {
+      await act(async () => {
+        fireEvent.change(input, { target: { value } })
+        await Promise.resolve()
+      })
+      await act(async () => { await new Promise((resolve) => setTimeout(resolve, 20)) })
+    }
+    await act(async () => { await new Promise((resolve) => setTimeout(resolve, 20)) })
+    expect(mockControlRender).toHaveBeenCalledWith('textarea')
+    expect(mockControlRender).toHaveBeenCalledWith('checkbox')
+    await edit('a')
+    mockControlRender.mockClear()
+    await edit('ab')
+    await edit('abc')
+    expect(input).toHaveValue('abc')
+    expect(mockControlRender).not.toHaveBeenCalled()
+
+    // The stable blur callback must still validate against the latest values.
+    await act(async () => { fireEvent.blur(input) })
+    await act(async () => { await new Promise((resolve) => setTimeout(resolve, 20)) })
+    expect(screen.queryByText('Required')).not.toBeInTheDocument()
+    await edit('')
+    await act(async () => { fireEvent.blur(input) })
+    await act(async () => { await new Promise((resolve) => setTimeout(resolve, 20)) })
+    expect(await screen.findByText('Required')).toBeInTheDocument()
+  })
+})

package/src/backend/confirm-dialog/ConfirmDialog.tsx

@@ -54,6 +54,7 @@ export function ConfirmDialog({
   const [internalOpen, setInternalOpen] = React.useState(false);
   const cancelButtonRef = React.useRef<HTMLButtonElement>(null);
   const confirmButtonRef = React.useRef<HTMLButtonElement>(null);
+  const restoreAriaHiddenRef = React.useRef(false);
   const [portalTarget, setPortalTarget] = React.useState<HTMLElement | null>(null);
   // Unique IDs so multiple ConfirmDialog instances on the same page don't
   // collide and make `aria-labelledby` resolve to the wrong dialog's title.
@@ -111,10 +112,25 @@ export function ConfirmDialog({
           }
         }, 0);
       }
+      // A modal opened underneath (e.g. a Radix Dialog) marks every sibling in
+      // <body> `aria-hidden`, including this portalled element. Shown on top
+      // of that modal it must stay reachable for assistive technology.
+      if (dialog.getAttribute("aria-hidden") === "true") {
+        dialog.removeAttribute("aria-hidden");
+        restoreAriaHiddenRef.current = true;
+      }
     } else {
       if (dialog.open) {
         dialog.close();
       }
+      if (restoreAriaHiddenRef.current) {
+        restoreAriaHiddenRef.current = false;
+        // Hand the attribute back only while the modal that hid us is still
+        // open; its own cleanup has otherwise already removed the marker.
+        if (dialog.hasAttribute("data-aria-hidden")) {
+          dialog.setAttribute("aria-hidden", "true");
+        }
+      }
     }
   }, [open, resolvedCancelText, portalTarget]);
 

package/src/backend/confirm-dialog/__tests__/ConfirmDialog.test.tsx

@@ -61,6 +61,35 @@ describe('ConfirmDialog', () => {
     expect(dialog.parentElement).toBe(document.body)
   })
 
+  it('stays exposed to assistive technology when a modal underneath hid its siblings', () => {
+    const renderDialog = (open: boolean) => (
+      <ConfirmDialog
+        open={open}
+        onOpenChange={() => undefined}
+        onConfirm={() => undefined}
+        title="Discard unsaved changes?"
+        confirmText="Discard"
+        cancelText="Cancel"
+      />
+    )
+    const { rerender } = renderWithProviders(renderDialog(false))
+    const dialog = document.body.querySelector('dialog')!
+    dialog.setAttribute('aria-hidden', 'true')
+    dialog.setAttribute('data-aria-hidden', 'true')
+
+    rerender(renderDialog(true))
+    expect(dialog).not.toHaveAttribute('aria-hidden')
+    expect(screen.getByRole('alertdialog')).toBe(dialog)
+
+    rerender(renderDialog(false))
+    expect(dialog).toHaveAttribute('aria-hidden', 'true')
+
+    rerender(renderDialog(true))
+    dialog.removeAttribute('data-aria-hidden')
+    rerender(renderDialog(false))
+    expect(dialog).not.toHaveAttribute('aria-hidden')
+  })
+
   it('renders the destructive confirmation as the solid variant', () => {
     renderWithProviders(
       <ConfirmDialog

package/src/backend/inputs/PhoneNumberField.tsx

@@ -551,6 +551,22 @@ export function PhoneNumberField({
     () => buildPhoneCountryOptions(countriesProp, t, locale),
     [countriesProp, t, locale],
   )
+  const countryItems = React.useMemo(
+    () => countryOptions.map(({ country: optionCountry, label }) => (
+      <SelectItem
+        key={`${optionCountry.iso2}-${optionCountry.dialCode}`}
+        value={optionCountry.iso2}
+        textValue={label}
+      >
+        <SelectItemLeading>
+          <span className="text-base leading-none">{optionCountry.flag}</span>
+        </SelectItemLeading>
+        <span className="flex-1 truncate">{label}</span>
+        <span className="ml-2 text-xs text-muted-foreground tabular-nums">{optionCountry.dialCode}</span>
+      </SelectItem>
+    )),
+    [countryOptions],
+  )
   const fallbackCountry = React.useMemo(
     () => (defaultCountryIso2 && findCountryByIso(defaultCountryIso2)) || DEFAULT_COUNTRY,
     [defaultCountryIso2],
@@ -723,17 +739,7 @@ export function PhoneNumberField({
             <span className={cn('text-base leading-none', size && 'inline-flex size-5 shrink-0 items-center justify-center text-xl [&_img]:size-full')} aria-hidden="true">{renderCountryIcon ? renderCountryIcon(country) : country.flag}</span>
             <span className={cn("text-sm text-foreground tabular-nums", disabled && "text-text-disabled")}>{country.dialCode}</span>
           </SelectTrigger>
-          <SelectContent align="start">
-            {countryOptions.map(({ country: c, label }) => (
-              <SelectItem key={`${c.iso2}-${c.dialCode}`} value={c.iso2} textValue={label}>
-                <SelectItemLeading>
-                  <span className="text-base leading-none">{c.flag}</span>
-                </SelectItemLeading>
-                <span className="flex-1 truncate">{label}</span>
-                <span className="ml-2 text-xs text-muted-foreground tabular-nums">{c.dialCode}</span>
-              </SelectItem>
-            ))}
-          </SelectContent>
+          <SelectContent align="start">{countryItems}</SelectContent>
         </Select>
         <div aria-hidden="true" className="w-px self-stretch bg-input" />
         <input

package/src/backend/inputs/__tests__/PhoneNumberField.renders.test.tsx

@@ -0,0 +1,35 @@
+/** @jest-environment jsdom */
+
+const mockTranslate = (_key: string, fallback: string) => fallback
+jest.mock('@open-mercato/shared/lib/i18n/context', () => ({
+  useT: () => mockTranslate,
+  useOptionalLocale: () => undefined,
+}))
+
+const mockItemRender = jest.fn()
+jest.mock('../../../primitives/select', () => {
+  const actual = jest.requireActual('../../../primitives/select')
+  const ReactActual = jest.requireActual('react')
+  return {
+    ...actual,
+    SelectItem: ReactActual.forwardRef((props: Record<string, unknown>, ref: unknown) => {
+      mockItemRender()
+      return ReactActual.createElement(actual.SelectItem, { ...props, ref })
+    }),
+  }
+})
+
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import { PHONE_COUNTRIES, PhoneNumberField } from '../PhoneNumberField'
+
+describe('PhoneNumberField render cost', () => {
+  it('does not re-render its country options when the host form re-renders it', () => {
+    const view = render(<PhoneNumberField value="+48 600 100 200" onValueChange={() => {}} />)
+    expect(mockItemRender.mock.calls.length).toBeGreaterThanOrEqual(PHONE_COUNTRIES.length)
+    mockItemRender.mockClear()
+    view.rerender(<PhoneNumberField value="+48 600 100 200" onValueChange={() => {}} />)
+    view.rerender(<PhoneNumberField value="+48 600 100 201" onValueChange={() => {}} />)
+    expect(mockItemRender).not.toHaveBeenCalled()
+  })
+})