@open-mercato/ui 0.6.4-develop.4382.1.6b4f656b77 → 0.6.4

package/src/backend/DataTable.tsx

@@ -3,7 +3,7 @@ import * as React from 'react'
 import { useRouter } from 'next/navigation'
 import { useReactTable, getCoreRowModel, getSortedRowModel, flexRender, type ColumnDef, type SortingState, type Column as TableColumn, type VisibilityState, type RowSelectionState } from '@tanstack/react-table'
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
-import { RefreshCw, Loader2, SlidersHorizontal, MoreHorizontal, Circle, Filter, Columns3, ChevronUp, ChevronDown, ChevronsUpDown, Check } from 'lucide-react'
+import { RefreshCw, Loader2, SlidersHorizontal, MoreHorizontal, Circle, Filter, Columns3, ChevronUp, ChevronDown, ChevronsUpDown, Check, Inbox } from 'lucide-react'
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../primitives/table'
 import { Button } from '../primitives/button'
 import { Checkbox } from '../primitives/checkbox'
@@ -22,6 +22,7 @@ import { TooltipProvider } from '../primitives/tooltip'
 import { TruncatedCell } from './TruncatedCell'
 import { FilterBar, type FilterDef, type FilterValues } from './FilterBar'
 import { FilteredEmptyResults } from './filters/FilteredEmptyResults'
+import { SearchEmptyResults } from './filters/SearchEmptyResults'
 import { useCustomFieldFilterDefs } from './utils/customFieldFilters'
 import { fetchCustomFieldDefinitionsPayload, type CustomFieldsetDto } from './utils/customFieldDefs'
 import { RowActions, type RowActionItem } from './RowActions'
@@ -31,7 +32,9 @@ import { useAppEvent } from './injection/useAppEvent'
 import { useInjectionDataWidgets } from './injection/useInjectionDataWidgets'
 import { resolveInjectedIcon } from './injection/resolveInjectedIcon'
 import { serializeExport, defaultExportFilename, type PreparedExport } from '@open-mercato/shared/lib/crud/exporters'
-import { apiCall } from './utils/apiCall'
+import { apiCall, withScopedApiRequestHeaders } from './utils/apiCall'
+import { buildOptimisticLockHeader } from './utils/optimisticLock'
+import { surfaceRecordConflict } from './conflicts'
 import { raiseCrudError } from './utils/serverErrors'
 import { PerspectiveSidebar } from './PerspectiveSidebar'
 import { Popover, PopoverTrigger, PopoverContent } from '../primitives/popover'
@@ -250,6 +253,15 @@ export type DataTableProps<T> = {
   injectionSpotId?: string
   injectionContext?: Record<string, unknown>
   replacementHandle?: string
+  /**
+   * Stable id used to derive the `data-table:<id>:*` widget injection spots
+   * (`:columns`, `:row-actions`, `:bulk-actions`, `:filters`, `:toolbar`,
+   * `:search-trailing`, `:header`, `:footer`) when the host does not need a
+   * full perspective config. Cheaper than wiring a perspective just to enable
+   * widget injection. Falls back to `perspective?.tableId` and `injectionSpotId`
+   * if not provided.
+   */
+  extensionTableId?: string
   stickyFirstColumn?: boolean
   stickyActionsColumn?: boolean
   virtualized?: boolean
@@ -985,6 +997,7 @@ export function DataTable<T>({
   injectionSpotId,
   injectionContext,
   replacementHandle,
+  extensionTableId: extensionTableIdProp,
   stickyFirstColumn = false,
   stickyActionsColumn = false,
   virtualized = false,
@@ -1181,14 +1194,34 @@ export function DataTable<T>({
 
   const extensionTableId = React.useMemo(() => {
     if (perspective?.tableId) return perspective.tableId
+    if (extensionTableIdProp) return extensionTableIdProp
     if (injectionSpotId?.startsWith('data-table:')) return injectionSpotId.slice('data-table:'.length)
     return null
-  }, [injectionSpotId, perspective?.tableId])
-  const resolvedInjectionSpotId = injectionSpotId ?? (perspective?.tableId ? `data-table:${perspective.tableId}` : null)
+  }, [injectionSpotId, perspective?.tableId, extensionTableIdProp])
+  const resolvedInjectionSpotId =
+    injectionSpotId
+    ?? (perspective?.tableId ? `data-table:${perspective.tableId}` : null)
+    ?? (extensionTableIdProp ? `data-table:${extensionTableIdProp}` : null)
   const resolvedReplacementHandle = replacementHandle ?? ComponentReplacementHandles.dataTable(extensionTableId ?? 'unknown')
   const baseInjectionContext = React.useMemo(
-    () => injectionContext ?? { tableId: perspective?.tableId ?? null, title: typeof title === 'string' ? title : undefined },
-    [injectionContext, perspective?.tableId, title]
+    () => {
+      // R2-M2 / F9 (2026-05-26): the default injection context now derives
+      // `tableId` from `extensionTableId ?? perspective?.tableId` (was
+      // `perspective?.tableId` only). Note `extensionTableId` itself now falls
+      // back to the `data-table:` suffix of `injectionSpotId` (see the memo
+      // above), so a caller passing only `injectionSpotId="data-table:foo"`
+      // (no `injectionContext`/`perspective`) now receives
+      // `context.tableId = "foo"` instead of the previous `null`. This only
+      // populates a field that was null before, so toolbar/header/footer/
+      // search-trailing widgets that read `tableId` get a value while widgets
+      // that ignore it are unaffected. Explicit `injectionContext` from the
+      // caller still wins as-is — preserves the existing public contract.
+      if (injectionContext) return injectionContext
+      const resolvedTableId = extensionTableId ?? perspective?.tableId ?? null
+      const baseTitle = typeof title === 'string' ? title : undefined
+      return { tableId: resolvedTableId, title: baseTitle }
+    },
+    [injectionContext, perspective?.tableId, extensionTableId, title]
   )
   const headerInjectionSpotId = React.useMemo(
     () => (resolvedInjectionSpotId ? `${resolvedInjectionSpotId}:header` : null),
@@ -1686,13 +1719,19 @@ export function DataTable<T>({
         // eslint-disable-next-line no-console
         console.debug('[DataTable] perspective payload', payload)
       }
-      const call = await apiCall<PerspectiveSaveResponse>(
-        `/api/perspectives/${encodeURIComponent(perspectiveTableId)}`,
-        {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify(payload),
-        },
+      const existing = input.perspectiveId
+        ? perspectiveData?.perspectives.find((p) => p.id === input.perspectiveId) ?? null
+        : null
+      const call = await withScopedApiRequestHeaders(
+        buildOptimisticLockHeader(existing?.updatedAt ?? null),
+        () => apiCall<PerspectiveSaveResponse>(
+          `/api/perspectives/${encodeURIComponent(perspectiveTableId)}`,
+          {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(payload),
+          },
+        ),
       )
       if (call.status === 404) {
         throw new Error(t('ui.dataTable.perspectives.error.apiUnavailable', 'Perspectives API is not available. Run `yarn generate` to regenerate module routes and restart the dev server.'))
@@ -1712,6 +1751,12 @@ export function DataTable<T>({
         applyPerspectiveSettings(data.perspective.settings, data.perspective.id)
       }
     },
+    onError: (error) => {
+      if (perspectiveTableId) {
+        void queryClient.invalidateQueries({ queryKey: perspectiveQueryKey })
+      }
+      surfaceRecordConflict(error, t)
+    },
   })
 
   const resolveColumnLabel = React.useCallback((column: TableColumn<T, unknown>): string => {
@@ -2508,6 +2553,22 @@ export function DataTable<T>({
   const tableScrollWrapperClassName = embedded ? '' : 'overflow-auto'
 
   const virtualScrollRef = React.useRef<HTMLDivElement>(null)
+  // Measure the horizontal scroll viewport so the empty state can center within
+  // the visible area instead of within the (often wider, overflowing) table.
+  const [tableScrollEl, setTableScrollEl] = React.useState<HTMLDivElement | null>(null)
+  const [emptyStateViewportWidth, setEmptyStateViewportWidth] = React.useState<number | null>(null)
+  const setTableScrollWrapperRef = React.useCallback((node: HTMLDivElement | null) => {
+    setTableScrollEl(node)
+    virtualScrollRef.current = node
+  }, [])
+  React.useEffect(() => {
+    if (!tableScrollEl || typeof ResizeObserver === 'undefined') return
+    const update = () => setEmptyStateViewportWidth(tableScrollEl.clientWidth)
+    update()
+    const observer = new ResizeObserver(update)
+    observer.observe(tableScrollEl)
+    return () => observer.disconnect()
+  }, [tableScrollEl])
   const allRows = table.getRowModel().rows
   const rowVirtualizer = virtualized
     ? useVirtualizer({
@@ -2624,7 +2685,7 @@ export function DataTable<T>({
         columnIds={headerColumnIds}
         onDragEnd={handleHeaderDragEnd}
       >
-      <div ref={virtualized ? virtualScrollRef : undefined} className={tableScrollWrapperClassName} style={virtualMaxHeightStyle}>
+      <div ref={setTableScrollWrapperRef} className={tableScrollWrapperClassName} style={virtualMaxHeightStyle}>
         <Table className="min-w-[640px] md:min-w-0">
           <TableHeader>
             {table.getHeaderGroups().map((hg) => (
@@ -2827,26 +2888,44 @@ export function DataTable<T>({
               </>
             ) : (
               <TableRow>
-                <TableCell colSpan={mergedColumns.length + (rowActions || injectedRowActions.length > 0 ? 1 : 0) + (hasInjectedBulkActions ? 1 : 0)} className="py-6">
-                  {filterAwareEmptyState?.active ? (
-                    <FilteredEmptyResults
-                      entityNamePlural={filterAwareEmptyState.entityNamePlural}
-                      canRemoveLast={filterAwareEmptyState.canRemoveLast}
-                      onClearAll={filterAwareEmptyState.onClearAll}
-                      onRemoveLast={filterAwareEmptyState.onRemoveLast}
-                    />
-                  ) : emptyState && typeof emptyState !== 'string' ? (
-                    emptyState
-                  ) : (
-                    <EmptyState
-                      size="sm"
-                      title={
-                        typeof emptyState === 'string'
-                          ? emptyState
-                          : t('ui.dataTable.emptyState.default', 'No results.')
-                      }
-                    />
-                  )}
+                <TableCell colSpan={mergedColumns.length + (rowActions || injectedRowActions.length > 0 ? 1 : 0) + (hasInjectedBulkActions ? 1 : 0)} className="p-0">
+                  <div
+                    className={cn('sticky left-0 flex justify-center py-6', emptyStateViewportWidth ? '' : 'w-fit')}
+                    style={emptyStateViewportWidth ? { width: emptyStateViewportWidth } : undefined}
+                  >
+                    {filterAwareEmptyState?.active ? (
+                      <FilteredEmptyResults
+                        entityNamePlural={filterAwareEmptyState.entityNamePlural}
+                        canRemoveLast={filterAwareEmptyState.canRemoveLast}
+                        onClearAll={filterAwareEmptyState.onClearAll}
+                        onRemoveLast={filterAwareEmptyState.onRemoveLast}
+                        onClearSearch={searchValue && searchValue.trim().length > 0 && onSearchChange ? () => onSearchChange('') : undefined}
+                      />
+                    ) : searchValue && searchValue.trim().length > 0 && onSearchChange ? (
+                      <SearchEmptyResults
+                        query={searchValue.trim()}
+                        entityNamePlural={filterAwareEmptyState?.entityNamePlural}
+                        onClearSearch={() => onSearchChange('')}
+                      />
+                    ) : emptyState && typeof emptyState !== 'string' ? (
+                      emptyState
+                    ) : (
+                      <EmptyState
+                        variant="subtle"
+                        icon={<Inbox className="size-6" aria-hidden />}
+                        title={
+                          typeof emptyState === 'string'
+                            ? emptyState
+                            : t('ui.dataTable.emptyState.default', 'No results.')
+                        }
+                        description={
+                          typeof emptyState === 'string'
+                            ? undefined
+                            : t('ui.dataTable.emptyState.defaultDescription', 'Items will appear here once added.')
+                        }
+                      />
+                    )}
+                  </div>
                 </TableCell>
               </TableRow>
             )}

package/src/backend/FlashMessages.tsx

@@ -11,6 +11,30 @@ const flashKindToAlertStatus: Record<FlashKind, AlertStatus> = {
   info: 'information',
 }
 
+function normalizeFlashKind(value: string | null | undefined): FlashKind {
+  if (value && Object.prototype.hasOwnProperty.call(flashKindToAlertStatus, value)) {
+    return value as FlashKind
+  }
+  return 'success'
+}
+
+// A URL-supplied flash is only trustworthy when the navigation that carried it
+// originated from the same origin (an in-app POST->GET redirect or client-side
+// navigation). Cross-origin links — the phishing/content-spoofing vector — must
+// not be allowed to render attacker-controlled copy inside an authoritative banner.
+function isSameOriginFlashNavigation(): boolean {
+  if (typeof window === 'undefined') return false
+  const referrer = document.referrer
+  // No referrer (direct load, bookmark, or referrer stripped) is ambiguous, not a
+  // cross-origin redirect we can attribute to an attacker page; allow it.
+  if (!referrer) return true
+  try {
+    return new URL(referrer).origin === window.location.origin
+  } catch {
+    return false
+  }
+}
+
 // Programmatic API to show a flash message without navigation.
 // Consumers can import { flash } and call flash('text', 'error').
 export function flash(message: string, type: FlashKind = 'info') {
@@ -125,12 +149,17 @@ function FlashMessagesInner() {
     if (typeof window === 'undefined') return
     const url = new URL(window.location.href)
     const message = url.searchParams.get('flash')
-    const type = (url.searchParams.get('type') as FlashKind | null) || 'success'
+    const type = normalizeFlashKind(url.searchParams.get('type'))
     if (message) {
-      showFlash(message, type)
+      // Always strip the params so a spoofed link does not linger in history,
+      // but only render the banner for same-origin navigations.
+      const trusted = isSameOriginFlashNavigation()
       url.searchParams.delete('flash')
       url.searchParams.delete('type')
       window.history.replaceState({}, '', url.toString())
+      if (trusted) {
+        showFlash(message, type)
+      }
     }
   }, [locationKey, showFlash])
 

package/src/backend/JsonBuilder.tsx

@@ -13,6 +13,8 @@ import {
   SelectValue,
 } from '../primitives/select'
 import { Plus, Trash2, ChevronRight, ChevronDown, Code, LayoutList } from 'lucide-react'
+import { useConfirmDialog } from './confirm-dialog'
+import type { ConfirmDialogOptions } from './confirm-dialog'
 
 function cn(...classes: (string | undefined | null | false)[]) {
     return classes.filter(Boolean).join(' ')
@@ -27,12 +29,31 @@ export type JsonBuilderProps = {
 
 type JsonNodeType = 'string' | 'number' | 'boolean' | 'object' | 'array' | 'null'
 
+type ConfirmFn = (options?: ConfirmDialogOptions) => Promise<boolean>
+
 function getJsonType(value: any): JsonNodeType {
     if (value === null) return 'null'
     if (Array.isArray(value)) return 'array'
     return typeof value as JsonNodeType
 }
 
+function defaultValueForType(type: JsonNodeType): any {
+    switch (type) {
+        case 'string': return ""
+        case 'number': return 0
+        case 'boolean': return false
+        case 'object': return {}
+        case 'array': return []
+        case 'null': return null
+    }
+}
+
+function toRawString(value: any): string {
+    if (value === null || value === undefined) return '{}'
+    if (typeof value === 'object') return JSON.stringify(value, null, 2)
+    return String(value)
+}
+
 export function JsonBuilder({
     value,
     onChange,
@@ -40,28 +61,32 @@ export function JsonBuilder({
     error
 }: JsonBuilderProps) {
     const [mode, setMode] = React.useState<'raw' | 'builder'>('raw')
-    const [rawString, setRawString] = React.useState(() => {
-        if (value === null) return '{}'
-        return typeof value === 'object' ? JSON.stringify(value, null, 2) : String(value || '{}')
-    })
+    const [rawString, setRawString] = React.useState(() => toRawString(value))
+    const [rawDirty, setRawDirty] = React.useState(false)
     const [parseError, setParseError] = React.useState<string | null>(null)
+    const { confirm, ConfirmDialogElement } = useConfirmDialog()
 
     React.useEffect(() => {
-        if (value === null) {
-            if (!disabled) {
-                onChange({})
-            }
-            setRawString('{}')
-            setParseError(null)
-            return
+        if (value === null && !disabled) {
+            onChange({})
         }
-        if (typeof value === 'object') {
+    }, [value, disabled, onChange])
+
+    // Mirror external value changes (e.g. async record load, builder edits) into
+    // the raw textarea only while the user has NOT started typing in it. Once the
+    // textarea is dirty it becomes the source of truth, so re-deriving it from
+    // `value` on every keystroke — the parent's onChange identity changes each
+    // render — would clobber typing and make Raw JSON uneditable (issue #2817).
+    React.useEffect(() => {
+        if (rawDirty) return
+        if (value !== null && typeof value === 'object') {
             setRawString(JSON.stringify(value, null, 2))
             setParseError(null)
         }
-    }, [value, disabled, onChange])
+    }, [value, rawDirty])
 
     const handleRawChange = (str: string) => {
+        setRawDirty(true)
         setRawString(str)
         try {
             if (str.trim() === '') {
@@ -78,6 +103,15 @@ export function JsonBuilder({
         }
     }
 
+    const switchToRaw = () => {
+        // Re-sync the textarea from the current value and let it mirror external
+        // changes again until the user edits it.
+        setRawDirty(false)
+        setRawString(toRawString(value))
+        setParseError(null)
+        setMode('raw')
+    }
+
     const switchToBuilder = () => {
         try {
             if (typeof value === 'string') {
@@ -97,7 +131,7 @@ export function JsonBuilder({
                     variant="ghost"
                     size="sm"
                     className={cn(mode === 'raw' && "bg-muted text-foreground")}
-                    onClick={() => setMode('raw')}
+                    onClick={switchToRaw}
                 >
                     <Code className="w-4 h-4" />
                     Raw JSON
@@ -140,6 +174,7 @@ export function JsonBuilder({
                             data={value}
                             onChange={onChange}
                             readOnly={disabled}
+                            confirm={confirm}
                             isRoot
                         />
                     ) : (
@@ -151,6 +186,7 @@ export function JsonBuilder({
             )}
 
             {error && <div className="text-xs text-red-600">{error}</div>}
+            {ConfirmDialogElement}
         </div>
     )
 }
@@ -162,24 +198,39 @@ interface JsonNodeProps {
     readOnly?: boolean
     label?: string
     isRoot?: boolean
+    confirm?: ConfirmFn
 }
 
-function JsonNode({ data, onChange, onDelete, readOnly, label, isRoot }: JsonNodeProps) {
+function JsonNode({ data, onChange, onDelete, readOnly, label, isRoot, confirm }: JsonNodeProps) {
     const type = getJsonType(data)
     const isContainer = type === 'object' || type === 'array'
     const [collapsed, setCollapsed] = React.useState(false)
 
-    const handleTypeChange = (newType: JsonNodeType) => {
-        let newVal: any = ''
-        switch (newType) {
-            case 'string': newVal = ""; break;
-            case 'number': newVal = 0; break;
-            case 'boolean': newVal = false; break;
-            case 'object': newVal = {}; break;
-            case 'array': newVal = []; break;
-            case 'null': newVal = null; break;
+    const handleTypeChange = async (newType: JsonNodeType) => {
+        if (newType === type) return
+        // Switching away from a non-empty container discards its contents. Ask
+        // for confirmation first so configured properties aren't lost silently
+        // (issue #2817). The Select is controlled by the derived type, so when
+        // the user cancels we simply leave the data untouched and the control
+        // snaps back to its previous value.
+        const itemCount = type === 'object'
+            ? Object.keys(data).length
+            : type === 'array'
+                ? (data as any[]).length
+                : 0
+        if (itemCount > 0 && confirm) {
+            const noun = type === 'object'
+                ? `${itemCount} ${itemCount === 1 ? 'property' : 'properties'}`
+                : `${itemCount} ${itemCount === 1 ? 'item' : 'items'}`
+            const confirmed = await confirm({
+                title: 'Change value type?',
+                text: `Changing the type from ${type} to ${newType} will discard the ${noun} currently configured. This cannot be undone.`,
+                confirmText: 'Discard and change',
+                variant: 'destructive',
+            })
+            if (!confirmed) return
         }
-        onChange(newVal)
+        onChange(defaultValueForType(newType))
     }
 
     const handleAddKey = () => {
@@ -250,7 +301,7 @@ function JsonNode({ data, onChange, onDelete, readOnly, label, isRoot }: JsonNod
                     {!readOnly && (
                         <Select
                             value={type}
-                            onValueChange={(next) => handleTypeChange(next as JsonNodeType)}
+                            onValueChange={(next) => { void handleTypeChange(next as JsonNodeType) }}
                         >
                             <SelectTrigger size="sm" className="w-auto min-w-[6rem]">
                                 <SelectValue />
@@ -342,6 +393,7 @@ function JsonNode({ data, onChange, onDelete, readOnly, label, isRoot }: JsonNod
                                     onChange={(v) => handleChildChange(key, v)}
                                     onDelete={() => handleChildDelete(key)}
                                     readOnly={readOnly}
+                                    confirm={confirm}
                                 />
                             </div>
                         </div>
@@ -355,6 +407,7 @@ function JsonNode({ data, onChange, onDelete, readOnly, label, isRoot }: JsonNod
                             onChange={(v) => handleChildChange(idx, v)}
                             onDelete={() => handleChildDelete(idx)}
                             readOnly={readOnly}
+                            confirm={confirm}
                         />
                     ))}
 

package/src/backend/PerspectiveSidebar.tsx

@@ -7,6 +7,7 @@ import { Checkbox } from '../primitives/checkbox'
 import { Spinner } from '../primitives/spinner'
 import { useConfirmDialog } from './confirm-dialog'
 import { flash } from './FlashMessages'
+import { surfaceRecordConflict } from './conflicts'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import type {
   PerspectiveDto,
@@ -133,7 +134,8 @@ export function PerspectiveSidebar({
           perspectiveId: targetId,
         })
         flash(t('ui.perspectives.autosave.success', 'View saved'), 'success')
-      } catch {
+      } catch (err: unknown) {
+        if (surfaceRecordConflict(err, t)) return
         flash(t('ui.perspectives.autosave.error', 'Failed to save view'), 'error')
       }
     }, 400)
@@ -199,6 +201,7 @@ export function PerspectiveSidebar({
       await onSave({ name: name.trim(), isDefault, applyToRoles: [], setRoleDefault: false, perspectiveId: null })
       resetMode()
     } catch (err: unknown) {
+      if (surfaceRecordConflict(err, t)) return
       setError(err instanceof Error ? err.message : 'Failed to save view')
     }
   }
@@ -237,6 +240,7 @@ export function PerspectiveSidebar({
       })
       setRenamingId(null)
     } catch (err: unknown) {
+      if (surfaceRecordConflict(err, t)) return
       setError(err instanceof Error ? err.message : 'Failed to rename view')
     }
   }
@@ -282,6 +286,7 @@ export function PerspectiveSidebar({
         const msg = errMessage.toLowerCase()
         const isDuplicate = msg.includes('duplicate key') || msg.includes('unique constraint')
         if (!isDuplicate) {
+          if (surfaceRecordConflict(err, t)) return
           setError(errMessage || 'Failed to clone view')
           return
         }
@@ -289,6 +294,7 @@ export function PerspectiveSidebar({
         counter += 1
       }
     }
+    if (surfaceRecordConflict(lastErr, t)) return
     setError(lastErr instanceof Error ? lastErr.message : 'Failed to clone view')
   }
 
@@ -333,6 +339,7 @@ export function PerspectiveSidebar({
       setSharedIds((prev) => new Set([...prev, mode.perspectiveId]))
       resetMode()
     } catch (err: unknown) {
+      if (surfaceRecordConflict(err, t)) return
       setError(err instanceof Error ? err.message : 'Failed to share view')
     }
   }

package/src/backend/RowActions.tsx

@@ -100,7 +100,7 @@ export function RowActions({ items = [] }: { items?: RowActionItem[] }) {
         variant="ghost"
         aria-haspopup="menu"
         aria-expanded={open}
-        onClick={(e) => { e.stopPropagation(); setOpen((v) => !v); requestAnimationFrame(updatePosition) }}
+        onClick={(e) => { e.stopPropagation(); setOpen(true); requestAnimationFrame(updatePosition) }}
       >
         <span aria-hidden="true">⋯</span>
         <span className="sr-only">{t('ui.rowActions.openActions', 'Open actions')}</span>

package/src/backend/__tests__/CrudForm.custom-fields.test.tsx

@@ -14,7 +14,6 @@ jest.mock('next/navigation', () => ({
   useSearchParams: () => new URLSearchParams(),
 }))
 jest.mock('remark-gfm', () => ({ __esModule: true, default: {} }))
-jest.mock('@uiw/react-md-editor', () => ({ __esModule: true, default: () => null }))
 jest.mock('../confirm-dialog', () => ({
   useConfirmDialog: () => ({
     confirm: jest.fn().mockResolvedValue(true),

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

@@ -4,7 +4,6 @@ jest.mock('next/navigation', () => ({
   useSearchParams: () => new URLSearchParams(),
 }))
 jest.mock('remark-gfm', () => ({ __esModule: true, default: {} }))
-jest.mock('@uiw/react-md-editor', () => ({ __esModule: true, default: () => null }))
 
 import * as React from 'react'
 import { renderToString } from 'react-dom/server'

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

@@ -9,7 +9,6 @@ jest.mock('next/navigation', () => ({
   useSearchParams: () => new URLSearchParams(),
 }))
 jest.mock('remark-gfm', () => ({ __esModule: true, default: {} }))
-jest.mock('@uiw/react-md-editor', () => ({ __esModule: true, default: () => null }))
 jest.mock('../confirm-dialog', () => ({
   useConfirmDialog: () => ({
     confirm: jest.fn().mockResolvedValue(true),