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

package/src/backend/RowActions.tsx

@@ -19,9 +19,26 @@ export function RowActions({ items = [] }: { items?: RowActionItem[] }) {
   const btnRef = React.useRef<HTMLButtonElement>(null)
   const menuRef = React.useRef<HTMLDivElement>(null)
   const hoverTimeoutRef = React.useRef<NodeJS.Timeout | null>(null)
+  /**
+   * Whether this open should pull focus into the menu.
+   *
+   * Only a deliberate open does — a click, or Enter/Space on the trigger, which
+   * the browser also reports as a click. The menu opens on hover too, and taking
+   * focus on a hover open meant brushing the pointer over ⋯ while typing in a
+   * list's search field pulled the caret out of the field (#6771).
+   *
+   * Consumed on use, so repositioning the panel mid-scroll cannot re-trigger it.
+   */
+  const focusOnOpenRef = React.useRef(false)
   const [anchorRect, setAnchorRect] = React.useState<DOMRect | null>(null)
   const [direction, setDirection] = React.useState<'down' | 'up'>('down')
 
+  /** The menu's items in DOM order, as focusable elements. */
+  const getFocusableItems = React.useCallback((): HTMLElement[] => {
+    if (!menuRef.current) return []
+    return Array.from(menuRef.current.querySelectorAll<HTMLElement>('[role="menuitem"]'))
+  }, [])
+
   const updatePosition = React.useCallback(() => {
     if (!btnRef.current) return
     const rect = btnRef.current.getBoundingClientRect()
@@ -42,10 +59,60 @@ export function RowActions({ items = [] }: { items?: RowActionItem[] }) {
       }
     }
     function onKey(e: KeyboardEvent) {
+      // This listener is on `document`, and the menu can be open while the user
+      // is working somewhere else entirely — it opens on hover. So every key
+      // below is scoped to "focus is actually in this menu", otherwise a
+      // hover-opened menu would swallow the arrows and Home/End of someone
+      // typing in the list's search field (#6771). The trigger counts, so
+      // ArrowDown from it still walks into the menu.
+      const active = document.activeElement
+      const focusWithin = Boolean(
+        (menuRef.current && active && menuRef.current.contains(active)) || (active && active === btnRef.current),
+      )
       if (e.key === 'Escape') {
         setOpen(false)
-        btnRef.current?.focus()
+        // Only pull focus back if it was ours to begin with.
+        if (focusWithin) btnRef.current?.focus()
+        return
+      }
+      if (!focusWithin) return
+      // Arrow keys move between items instead of doing nothing (#6718). Without
+      // this the only way to reach an item was to Tab through it — and since
+      // every row's trigger sits in the tab order, reaching the first item of a
+      // six-row table took eleven Tab presses.
+      const focusables = getFocusableItems()
+      if (!focusables.length) return
+      const activeIndex = focusables.indexOf(document.activeElement as HTMLElement)
+      let nextIndex: number | null = null
+      switch (e.key) {
+        case 'ArrowDown':
+          nextIndex = activeIndex < 0 ? 0 : (activeIndex + 1) % focusables.length
+          break
+        case 'ArrowUp':
+          nextIndex = activeIndex < 0
+            ? focusables.length - 1
+            : (activeIndex - 1 + focusables.length) % focusables.length
+          break
+        case 'Home':
+          nextIndex = 0
+          break
+        case 'End':
+          nextIndex = focusables.length - 1
+          break
+        case 'Tab':
+          // A menu is modal for the keyboard: Tab must not escape it into the
+          // next row's trigger, which is what made the menu feel unreachable.
+          e.preventDefault()
+          nextIndex = e.shiftKey
+            ? (activeIndex <= 0 ? focusables.length - 1 : activeIndex - 1)
+            : (activeIndex < 0 || activeIndex === focusables.length - 1 ? 0 : activeIndex + 1)
+          break
+        default:
+          return
       }
+      if (nextIndex === null) return
+      e.preventDefault()
+      focusables[nextIndex]?.focus()
     }
     function onScrollOrResize() {
       updatePosition()
@@ -60,7 +127,28 @@ export function RowActions({ items = [] }: { items?: RowActionItem[] }) {
       window.removeEventListener('scroll', onScrollOrResize, true)
       window.removeEventListener('resize', onScrollOrResize)
     }
-  }, [open, updatePosition])
+  }, [open, updatePosition, getFocusableItems])
+
+  // Move focus into the menu so the arrow keys have somewhere to start, and so a
+  // screen reader announces the item rather than the still-focused trigger.
+  //
+  // Keyed on `anchorRect` rather than deferred with a timer: the panel only
+  // renders once `updatePosition` has measured the trigger, which is a second
+  // render, so on the first pass there is nothing to focus yet. This effect
+  // re-runs when that measurement lands, by which point the portal has
+  // committed. A `requestAnimationFrame` would also have waited for it, but
+  // browsers throttle rAF in a background tab, so the focus could silently never
+  // happen — a timer-free dependency cannot be throttled.
+  React.useEffect(() => {
+    if (!open) {
+      focusOnOpenRef.current = false
+      return
+    }
+    if (!anchorRect || !focusOnOpenRef.current) return
+    focusOnOpenRef.current = false
+    const [first] = getFocusableItems()
+    first?.focus()
+  }, [open, anchorRect, getFocusableItems])
 
   // Cleanup timeout on unmount
   React.useEffect(() => {
@@ -100,7 +188,9 @@ export function RowActions({ items = [] }: { items?: RowActionItem[] }) {
         variant="ghost"
         aria-haspopup="menu"
         aria-expanded={open}
-        onClick={(e) => { e.stopPropagation(); setOpen(true); requestAnimationFrame(updatePosition) }}
+        // A click — and Enter/Space on the trigger, which the browser reports as
+        // one — is a deliberate open, so it takes focus. Hover does not (#6771).
+        onClick={(e) => { e.stopPropagation(); focusOnOpenRef.current = true; setOpen(true); requestAnimationFrame(updatePosition) }}
       >
         <span aria-hidden="true">⋯</span>
         <span className="sr-only">{t('ui.rowActions.openActions', 'Open actions')}</span>
@@ -109,7 +199,22 @@ export function RowActions({ items = [] }: { items?: RowActionItem[] }) {
         <div
           ref={menuRef}
           role="menu"
-          className="fixed w-44 max-w-[calc(100vw-1rem)] rounded-md border bg-background p-1 shadow focus-visible:outline-none z-dropdown"
+          // Sized to its longest item instead of a fixed 11rem: the items are
+          // Buttons, which are `whitespace-nowrap`, so a label wider than the box
+          // overflowed its right border — "Zarejestruj push ponownie" in Polish
+          // overhung by ~10px (#6719). `min-w-44` keeps the old width as a floor;
+          // past `max-w-xs` the items wrap instead of growing further.
+          //
+          // `flex flex-col` is load-bearing for that, not cosmetic. Button is
+          // `inline-flex`, so under a block panel the items are inline-level and
+          // `max-content` is the width of them all laid end to end — 523px here,
+          // past the cap, so the panel was pinned at `max-w-xs` whatever the
+          // labels said. They only looked stacked because `w-full` forced each
+          // onto its own line. Blockifying them as flex items makes `max-content`
+          // the widest item, which is what `w-max` was meant to measure.
+          //
+          // Same fix, same shape as ActionsDropdown (#3580).
+          className="fixed flex flex-col w-max min-w-44 max-w-xs rounded-md border bg-background p-1 shadow focus-visible:outline-none z-dropdown"
           style={{
             top: direction === 'down' ? anchorRect.bottom + 8 : anchorRect.top - 8,
             left: Math.min(anchorRect.right, window.innerWidth - 8),
@@ -123,7 +228,7 @@ export function RowActions({ items = [] }: { items?: RowActionItem[] }) {
               <a
                 key={idx}
                 href={it.href}
-                className={`block w-full text-left px-2 py-1 text-sm rounded hover:bg-accent ${it.destructive ? 'text-destructive' : ''}`}
+                className={`block w-full text-left px-2 py-1 text-sm rounded hover:bg-accent whitespace-normal ${it.destructive ? 'text-destructive' : ''}`}
                 role="menuitem"
                 onClick={(event) => {
                   event.stopPropagation()
@@ -138,7 +243,10 @@ export function RowActions({ items = [] }: { items?: RowActionItem[] }) {
                 type="button"
                 variant="ghost"
                 size="sm"
-                className={`w-full justify-start rounded-none font-normal ${it.destructive ? 'text-destructive' : ''}`}
+                // `whitespace-normal h-auto` so a label that reaches the panel's
+                // max width wraps to a second line rather than overflowing: the
+                // Button primitive is `whitespace-nowrap` by default (#6719).
+                className={`w-full justify-start rounded-none font-normal whitespace-normal h-auto py-1.5 text-left ${it.destructive ? 'text-destructive' : ''}`}
                 role="menuitem"
                 onClick={(event) => {
                   event.stopPropagation()

package/src/backend/__tests__/AttachmentsSection.upload.test.tsx

@@ -0,0 +1,183 @@
+/** @jest-environment jsdom */
+
+import * as React from 'react'
+import { act, fireEvent, screen, waitFor } from '@testing-library/react'
+import { renderWithProviders } from '@open-mercato/shared/lib/testing/renderWithProviders'
+import { AttachmentsSection } from '../detail/AttachmentsSection'
+import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
+
+jest.mock('@open-mercato/ui/backend/utils/apiCall', () => ({
+  apiCall: jest.fn(),
+}))
+
+jest.mock('../injection/useRegisteredComponent', () => ({
+  useRegisteredComponent: <T,>(_handle: string, fallback?: React.ComponentType<T>) =>
+    fallback ?? ((() => null) as React.ComponentType<T>),
+}))
+
+jest.mock('../detail/AttachmentMetadataDialog', () => ({
+  AttachmentMetadataDialog: () => null,
+}))
+
+jest.mock('../detail/AttachmentDeleteDialog', () => ({
+  AttachmentDeleteDialog: () => null,
+}))
+
+const REJECTION = 'Executable file types are not allowed as attachments.'
+
+type StoredItem = { id: string; fileName: string; fileSize: number; mimeType: string }
+
+/**
+ * Emulates `/api/attachments` for one record: POST persists the file unless its
+ * name ends in `.exe` (the route's dangerous-executable 400), GET lists what was
+ * persisted. `holdUploads` parks each POST until `releaseUpload` is called so a
+ * test can interact with the section while an upload is in flight.
+ */
+function createServer({ holdUploads = false } = {}) {
+  const stored: StoredItem[] = []
+  const posted: string[] = []
+  const pending: Array<() => void> = []
+  let holding = holdUploads
+  let listCalls = 0
+  ;(apiCall as jest.Mock).mockImplementation(async (url: string, init?: { method?: string; body?: FormData }) => {
+    if (init?.method === 'POST') {
+      const file = init.body?.get('file') as File
+      posted.push(file.name)
+      if (holding) await new Promise<void>((resolve) => pending.push(resolve))
+      if (file.name.endsWith('.exe')) {
+        return { ok: false, status: 400, result: { error: REJECTION }, response: { status: 400 } }
+      }
+      const item = { id: `att-${stored.length + 1}`, fileName: file.name, fileSize: file.size, mimeType: 'text/plain' }
+      stored.push(item)
+      return { ok: true, status: 200, result: { ok: true, item }, response: { status: 200 } }
+    }
+    if (url.startsWith('/api/attachments?')) {
+      listCalls += 1
+      return { ok: true, status: 200, result: { items: [...stored], page: 1, pageSize: 24 }, response: { status: 200 } }
+    }
+    return { ok: true, status: 200, result: {}, response: { status: 200 } }
+  })
+  return {
+    stored,
+    posted,
+    listCalls: () => listCalls,
+    pendingUploads: () => pending.length,
+    releaseAll: () => {
+      holding = false
+      pending.splice(0).forEach((resolve) => resolve())
+    },
+  }
+}
+
+function textFile(name: string): File {
+  return new File([`harmless text for ${name}`], name, { type: 'text/plain' })
+}
+
+function fileInput(container: HTMLElement): HTMLInputElement {
+  const input = container.querySelector('input[type="file"]')
+  if (!input) throw new Error('file input not rendered')
+  return input as HTMLInputElement
+}
+
+function selectFiles(container: HTMLElement, names: string[]) {
+  fireEvent.change(fileInput(container), { target: { files: names.map(textFile) } })
+}
+
+async function renderSection(onChanged = jest.fn()) {
+  const view = renderWithProviders(
+    <AttachmentsSection entityId="customers:customer_entity" recordId="record-1" onChanged={onChanged} />,
+    { dict: {} },
+  )
+  await screen.findByText('No attachments found.')
+  return { ...view, onChanged }
+}
+
+async function waitForIdle() {
+  await waitFor(() => expect(screen.getByRole('button', { name: 'Choose files' })).toBeEnabled())
+}
+
+describe('AttachmentsSection multi-file upload (#6397)', () => {
+  beforeEach(() => {
+    jest.resetAllMocks()
+  })
+
+  it('uploads every file and refreshes the list when all succeed', async () => {
+    const server = createServer()
+    const { container, onChanged } = await renderSection()
+
+    selectFiles(container, ['ok-a.txt', 'ok-b.txt', 'ok-c.txt'])
+
+    expect(await screen.findByText('ok-c.txt')).toBeInTheDocument()
+    await waitForIdle()
+    expect(server.posted).toEqual(['ok-a.txt', 'ok-b.txt', 'ok-c.txt'])
+    expect(screen.getByText('ok-a.txt')).toBeInTheDocument()
+    expect(screen.getByText('ok-b.txt')).toBeInTheDocument()
+    expect(screen.queryByRole('alert')).toBeNull()
+    expect(onChanged).toHaveBeenCalledTimes(1)
+  })
+
+  it('stops at a rejected first file, announces the error and changes nothing', async () => {
+    const server = createServer()
+    const { container, onChanged } = await renderSection()
+
+    selectFiles(container, ['blocked.exe', 'ok-b.txt', 'ok-c.txt'])
+
+    expect(await screen.findByRole('alert')).toHaveTextContent(REJECTION)
+    await waitForIdle()
+    expect(server.posted).toEqual(['blocked.exe'])
+    expect(server.stored).toHaveLength(0)
+    expect(screen.getByText('No attachments found.')).toBeInTheDocument()
+    expect(onChanged).not.toHaveBeenCalled()
+  })
+
+  it('shows the files saved before a rejected middle file without a reload', async () => {
+    const server = createServer()
+    const { container, onChanged } = await renderSection()
+    const listCallsBefore = server.listCalls()
+
+    selectFiles(container, ['scout-first.txt', 'scout-blocked.exe', 'scout-last.txt'])
+
+    expect(await screen.findByText('scout-first.txt')).toBeInTheDocument()
+    await waitForIdle()
+    expect(server.posted).toEqual(['scout-first.txt', 'scout-blocked.exe'])
+    expect(server.listCalls()).toBeGreaterThan(listCallsBefore)
+    expect(screen.getByRole('alert')).toHaveTextContent(REJECTION)
+    expect(screen.queryByText('No attachments found.')).toBeNull()
+    expect(screen.queryByText('scout-last.txt')).toBeNull()
+    expect(onChanged).toHaveBeenCalledTimes(1)
+  })
+
+  it('shows every file saved before a rejected last file', async () => {
+    const server = createServer()
+    const { container } = await renderSection()
+
+    selectFiles(container, ['last-a.txt', 'last-b.txt', 'last-blocked.exe'])
+
+    expect(await screen.findByText('last-b.txt')).toBeInTheDocument()
+    await waitForIdle()
+    expect(server.posted).toEqual(['last-a.txt', 'last-b.txt', 'last-blocked.exe'])
+    expect(screen.getByText('last-a.txt')).toBeInTheDocument()
+    expect(screen.getByRole('alert')).toHaveTextContent(REJECTION)
+  })
+
+  it('ignores a second selection or drop while a batch is uploading', async () => {
+    const server = createServer({ holdUploads: true })
+    const { container } = await renderSection()
+
+    selectFiles(container, ['drop-a.txt', 'drop-b.txt'])
+    await waitFor(() => expect(server.pendingUploads()).toBe(1))
+
+    selectFiles(container, ['late-select.txt'])
+    const dropZone = container.querySelector('[role="presentation"]') as HTMLElement
+    fireEvent.drop(dropZone, { dataTransfer: { files: [textFile('late-drop.txt')] } })
+
+    await act(async () => {
+      server.releaseAll()
+    })
+    await waitForIdle()
+    await waitFor(() => expect(screen.getByText('drop-b.txt')).toBeInTheDocument())
+
+    expect(server.posted).toEqual(['drop-a.txt', 'drop-b.txt'])
+    expect(server.stored.map((item) => item.fileName)).toEqual(['drop-a.txt', 'drop-b.txt'])
+  })
+})

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

@@ -16,7 +16,11 @@ jest.mock('../injection/InjectionSpot', () => ({
   __esModule: true,
   InjectionSpot: () => null,
   useInjectionWidgets: () => ({ widgets: [], loading: false, error: null }),
-  useInjectionSpotEvents: () => ({ triggerEvent: jest.fn(async () => ({ ok: true, data: {} })) }),
+  // Echo the payload so `transformFormData` is a no-op and submit assertions see
+  // exactly what CrudForm forwards to the host `onSubmit`.
+  useInjectionSpotEvents: () => ({
+    triggerEvent: jest.fn(async (_event: string, data: unknown) => ({ ok: true, data })),
+  }),
 }))
 jest.mock('../injection/useInjectionDataWidgets', () => ({
   __esModule: true,
@@ -31,7 +35,8 @@ jest.mock('../injection/useInjectionDataWidgets', () => ({
 }))
 
 import * as React from 'react'
-import { waitFor } from '@testing-library/react'
+import { fireEvent, waitFor } from '@testing-library/react'
+import { z } from 'zod'
 import { renderWithProviders } from '@open-mercato/shared/lib/testing/renderWithProviders'
 import { CrudForm, type CrudField, type CrudFormGroup } from '../CrudForm'
 import { InjectionPosition } from '@open-mercato/shared/modules/widgets/injection-position'
@@ -139,3 +144,135 @@ describe('CrudForm group field injection (#3047)', () => {
     expect(labelMatches).toHaveLength(1)
   })
 })
+
+describe('CrudForm injected field id collisions', () => {
+  afterEach(() => {
+    injectedFieldWidgets = []
+  })
+
+  function renderCollisionForm(options: {
+    fields: CrudField[]
+    initialValues: Record<string, unknown>
+    onSubmit: (values: unknown) => void
+    schema?: z.ZodTypeAny
+  }) {
+    return renderWithProviders(
+      React.createElement(CrudForm as any, {
+        title: 'Form',
+        entityId: 'catalog:catalog_product_price',
+        fields: options.fields,
+        groups: [{ id: 'scope', title: 'Scope', fields: options.fields.map((field) => field.id) }],
+        initialValues: options.initialValues,
+        schema: options.schema,
+        onSubmit: options.onSubmit,
+      }),
+    )
+  }
+
+  it('submits the value of an injected field that reuses a host field id', async () => {
+    injectedFieldWidgets = [
+      { fields: [{ id: 'customerGroupId', label: 'Customer group', type: 'text', group: 'scope' }] },
+    ]
+    const onSubmit = jest.fn()
+    const { container } = renderCollisionForm({
+      fields: [
+        { id: 'name', label: 'Name', type: 'text' },
+        { id: 'customerGroupId', label: 'Customer group id', type: 'text' },
+      ],
+      initialValues: { name: 'Retail', customerGroupId: 'group-1' },
+      onSubmit,
+    })
+
+    fireEvent.submit(container.querySelector('form') as HTMLFormElement)
+
+    await waitFor(() => expect(onSubmit).toHaveBeenCalled())
+    expect(onSubmit.mock.calls[0][0]).toEqual(
+      expect.objectContaining({ name: 'Retail', customerGroupId: 'group-1' }),
+    )
+  })
+
+  it('submits the value of an injected field that reuses a group-inline host field id', async () => {
+    injectedFieldWidgets = [
+      { fields: [{ id: 'customerGroupId', label: 'Customer group', type: 'text', group: 'scope' }] },
+    ]
+    const onSubmit = jest.fn()
+    const { container } = renderWithProviders(
+      React.createElement(CrudForm as any, {
+        title: 'Form',
+        entityId: 'catalog:catalog_product_price',
+        fields: [{ id: 'name', label: 'Name', type: 'text' }],
+        groups: [
+          {
+            id: 'scope',
+            title: 'Scope',
+            fields: ['name', { id: 'customerGroupId', label: 'Customer group id', type: 'text' }],
+          },
+        ],
+        initialValues: { name: 'Retail', customerGroupId: 'group-1' },
+        onSubmit,
+      }),
+    )
+
+    await waitFor(() => {
+      expect(container.querySelector('[data-crud-field-id="customerGroupId"]')).toBeTruthy()
+    })
+    fireEvent.submit(container.querySelector('form') as HTMLFormElement)
+
+    await waitFor(() => expect(onSubmit).toHaveBeenCalled())
+    expect(onSubmit.mock.calls[0][0]).toEqual(
+      expect.objectContaining({ name: 'Retail', customerGroupId: 'group-1' }),
+    )
+  })
+
+  it('still strips an injected-only field from the host payload', async () => {
+    injectedFieldWidgets = [
+      { fields: [{ id: 'widgetOnlyNote', label: 'Widget note', type: 'text', group: 'scope' }] },
+    ]
+    const onSubmit = jest.fn()
+    const { container } = renderCollisionForm({
+      fields: [{ id: 'name', label: 'Name', type: 'text' }],
+      initialValues: { name: 'Retail', widgetOnlyNote: 'extra' },
+      onSubmit,
+    })
+
+    await waitFor(() => {
+      expect(container.querySelector('[data-crud-field-id="widgetOnlyNote"]')).toBeTruthy()
+    })
+    fireEvent.submit(container.querySelector('form') as HTMLFormElement)
+
+    await waitFor(() => expect(onSubmit).toHaveBeenCalled())
+    const submitted = onSubmit.mock.calls[0][0] as Record<string, unknown>
+    expect(submitted.name).toBe('Retail')
+    expect(submitted).not.toHaveProperty('widgetOnlyNote')
+  })
+
+  it('collapses a dot-path host field that an injected field reuses into its nested shape', async () => {
+    injectedFieldWidgets = [
+      { fields: [{ id: 'metadata.channel', label: 'Channel', type: 'text', group: 'scope' }] },
+    ]
+    const onSubmit = jest.fn()
+    const { container } = renderCollisionForm({
+      fields: [
+        { id: 'name', label: 'Name', type: 'text' },
+        { id: 'metadata.channel', label: 'Channel', type: 'text' },
+      ],
+      initialValues: { name: 'Retail', metadata: { channel: 'web' } },
+      schema: z.object({
+        name: z.string(),
+        metadata: z.object({ channel: z.string() }).optional(),
+      }),
+      onSubmit,
+    })
+
+    await waitFor(() => {
+      expect(container.querySelector('[data-crud-field-id="metadata.channel"] input')).toBeTruthy()
+    })
+    const channelInput = container.querySelector('[data-crud-field-id="metadata.channel"] input') as HTMLInputElement
+    await waitFor(() => expect(channelInput.value).toBe('web'))
+    fireEvent.change(channelInput, { target: { value: 'store' } })
+    fireEvent.submit(container.querySelector('form') as HTMLFormElement)
+
+    await waitFor(() => expect(onSubmit).toHaveBeenCalled())
+    expect(onSubmit.mock.calls[0][0]).toEqual({ name: 'Retail', metadata: { channel: 'store' } })
+  })
+})

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

@@ -5,7 +5,7 @@ jest.setTimeout(15000)
 // stable id. Hiding is presentation-only — the fields of a hidden group keep their
 // values and are still submitted, so a smaller form can never silently clear data.
 let injectedGroupWidgets: unknown[] = []
-let injectedFieldWidgets: Array<{ fields: unknown[] }> = []
+let injectedFieldWidgets: Array<{ metadata: { id: string }; fields: unknown[] }> = []
 const fetchCustomFieldFormStructureMock = jest.fn()
 const buildFormFieldFromCustomFieldDefMock = jest.fn()
 

package/src/backend/__tests__/DataTable.extensions.test.tsx

@@ -9,6 +9,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { I18nProvider } from '@open-mercato/shared/lib/i18n/context'
 import { DataTable } from '../DataTable'
 import { APP_EVENT_DOM_NAME } from '../injection/useAppEvent'
+import { registerComponentOverrides } from '@open-mercato/shared/modules/widgets/component-registry'
 
 const mockRouterRefresh = jest.fn()
 
@@ -72,12 +73,41 @@ function renderTable(elementProps: Record<string, unknown>) {
 
 describe('DataTable extensions', () => {
   beforeEach(() => {
+    registerComponentOverrides([])
     ;(globalThis as typeof globalThis & { ResizeObserver?: typeof ResizeObserverMock }).ResizeObserver = ResizeObserverMock
     useInjectionDataWidgetsMock.mockImplementation(() => ({ widgets: [], isLoading: false, error: null }))
     flashMock.mockReset()
     mockRouterRefresh.mockReset()
   })
 
+  afterEach(() => {
+    registerComponentOverrides([])
+  })
+
+  it('executes transforms and wrappers at the derived DataTable handle', () => {
+    registerComponentOverrides([
+      {
+        target: { componentId: 'data-table:catalog.products.list' },
+        priority: 10,
+        propsTransform: (props: Record<string, unknown>) => ({ ...props, title: 'Transformed title' }),
+      },
+      {
+        target: { componentId: 'data-table:catalog.products.list' },
+        priority: 20,
+        wrapper: (Original: React.ComponentType<Record<string, unknown>>) => function Wrapped(props) {
+          return <section data-testid="registered-table-wrapper"><Original {...props} /></section>
+        },
+      },
+    ])
+    renderTable({
+      columns: [{ accessorKey: 'name', header: 'Name' }],
+      data: [{ id: 'r1', name: 'Product' }],
+      extensionTableId: 'catalog.products.list',
+    })
+    expect(screen.getByTestId('registered-table-wrapper')).toBeInTheDocument()
+    expect(screen.getByText('Transformed title')).toBeInTheDocument()
+  })
+
   it('renders injected columns from data-table extension surface', () => {
     useInjectionDataWidgetsMock.mockImplementation((spotId: string) => {
       if (spotId === 'data-table:customers.people:columns') {