@spree/dashboard-ui 0.13.0 → 1.0.0-beta.1

package/src/spree/data-grid/cells.tsx

@@ -80,12 +80,20 @@ export function NumberCell({
       commit()
       ctx.setEditing(null)
       // Move down to mirror Excel.
-      const next = { row: coords.row + 1, col: coords.col }
+      // Clamped like arrow navigation: on the last row Enter would otherwise
+      // anchor outside the grid, and every arrow key after it would compute
+      // from a position that does not exist.
+      const next = { row: Math.min(coords.row + 1, ctx.bounds.maxRow), col: coords.col }
       ctx.setAnchor(next)
       ctx.setExtent(next)
-      ctx.cells.get(`${next.row}.${next.col}`)?.focus()
+      ctx.focusCell(next)
     } else if (event.key === 'Escape') {
       event.preventDefault()
+      // Base UI's dialog listens for Escape on the document, so preventing
+      // the default is not enough to keep it from closing the sheet behind
+      // this cell: the key has to stop here (docs/plans/6.0-volume-pricing.md).
+      event.stopPropagation()
+      event.nativeEvent.stopImmediatePropagation()
       setDraft(value.toString())
       ctx.setEditing(null)
     } else if (event.key === 'Tab') {
@@ -96,7 +104,7 @@ export function NumberCell({
       const next = { row: coords.row, col: coords.col + dx }
       ctx.setAnchor(next)
       ctx.setExtent(next)
-      ctx.cells.get(`${next.row}.${next.col}`)?.focus()
+      ctx.focusCell(next)
     }
   }
 
@@ -140,8 +148,9 @@ interface MoneyCellProps extends BaseCellProps {
    *  `"12,50"` are fine, the backend's `Spree::LocalizedNumber` does the
    *  parsing. `null` only when the user explicitly blanks the field. */
   onChange: (next: string | null) => void
-  /** Currency symbol rendered as a non-editable prefix (`$`, `€`, `kr`, …). */
-  symbol: string
+  /** Currency symbol rendered as a non-editable prefix (`$`, `€`, `kr`, …).
+   *  Omit for a plain decimal cell with no prefix. */
+  symbol?: string
   /**
    * Locale decimal separator used only for display (canonical `.` →
    * locale char). Whatever the user types is shipped as-is; the
@@ -222,12 +231,20 @@ export function MoneyCell({
       event.preventDefault()
       commit()
       ctx.setEditing(null)
-      const next = { row: coords.row + 1, col: coords.col }
+      // Clamped like arrow navigation: on the last row Enter would otherwise
+      // anchor outside the grid, and every arrow key after it would compute
+      // from a position that does not exist.
+      const next = { row: Math.min(coords.row + 1, ctx.bounds.maxRow), col: coords.col }
       ctx.setAnchor(next)
       ctx.setExtent(next)
-      ctx.cells.get(`${next.row}.${next.col}`)?.focus()
+      ctx.focusCell(next)
     } else if (event.key === 'Escape') {
       event.preventDefault()
+      // Base UI's dialog listens for Escape on the document, so preventing
+      // the default is not enough to keep it from closing the sheet behind
+      // this cell: the key has to stop here (docs/plans/6.0-volume-pricing.md).
+      event.stopPropagation()
+      event.nativeEvent.stopImmediatePropagation()
       setDraft(formatDisplay(value))
       ctx.setEditing(null)
     } else if (event.key === 'Tab') {
@@ -238,7 +255,7 @@ export function MoneyCell({
       const next = { row: coords.row, col: coords.col + dx }
       ctx.setAnchor(next)
       ctx.setExtent(next)
-      ctx.cells.get(`${next.row}.${next.col}`)?.focus()
+      ctx.focusCell(next)
     }
   }
 
@@ -252,12 +269,14 @@ export function MoneyCell({
         isEditing && 'bg-card ring-2 ring-blue-500 ring-inset',
       )}
     >
-      <span
-        className="pl-3 text-muted-foreground pointer-events-none select-none tabular-nums"
-        aria-hidden
-      >
-        {symbol}
-      </span>
+      {symbol != null && (
+        <span
+          className="pl-3 text-muted-foreground pointer-events-none select-none tabular-nums"
+          aria-hidden
+        >
+          {symbol}
+        </span>
+      )}
       <input
         ref={inputRef}
         type="text"
@@ -279,7 +298,133 @@ export function MoneyCell({
         }}
         aria-label={ariaLabel}
         className={cn(
-          'block h-9 w-full cursor-cell border-0 bg-transparent pl-1 pr-3 text-right tabular-nums outline-none',
+          'block h-9 w-full cursor-cell border-0 bg-transparent pr-3 text-right tabular-nums outline-none',
+          symbol != null ? 'pl-1' : 'pl-3',
+          isEditing && 'cursor-text',
+        )}
+      />
+    </div>
+  )
+}
+
+/** Editable decimal cell — `MoneyCell` without the currency prefix. Keeps
+ *  decimals (unlike `NumberCell`, which truncates to integers); for
+ *  measurements like weight and dimensions. */
+export function DecimalCell(props: Omit<MoneyCellProps, 'symbol'>) {
+  return <MoneyCell {...props} />
+}
+
+interface TextCellProps extends BaseCellProps {
+  value: string | null
+  /** Receives the user's raw input; `null` when the field is blanked. */
+  onChange: (next: string | null) => void
+}
+
+/** Editable free-text cell (SKU, barcode, …). Left-aligned; ships the raw
+ *  input on commit, `null` when blanked. */
+export function TextCell({ coords, value, onChange, ariaLabel }: TextCellProps) {
+  const ctx = useDataGridContext()
+  const inputRef = useRef<HTMLInputElement | null>(null)
+  const [draft, setDraft] = useState(value ?? '')
+  const isSelected = ctx.isSelected(coords)
+  const mode = modeFor(ctx.editing, coords)
+  const isEditing = mode === 'edit'
+  const isFocused = ctx.anchor?.row === coords.row && ctx.anchor?.col === coords.col
+
+  // Resync draft with external value when not editing.
+  useEffect(() => {
+    if (!isEditing) setDraft(value ?? '')
+  }, [value, isEditing])
+
+  // Auto-focus + select when entering edit mode.
+  useEffect(() => {
+    if (isEditing) {
+      const el = inputRef.current
+      if (el) {
+        el.focus()
+        el.select()
+      }
+    }
+  }, [isEditing])
+
+  const wrapRef = useRef<HTMLDivElement | null>(null)
+  useStableCellRegistration(coords, {
+    focus: () => inputRef.current?.focus(),
+    read: () => value ?? '',
+    write: (next) => onChange(next.trim() ? next : null),
+    canWrite: () => true,
+    getElement: () => wrapRef.current,
+  })
+
+  function commit() {
+    onChange(draft.trim() ? draft : null)
+  }
+
+  function onKeyDown(event: KeyboardEvent<HTMLInputElement>) {
+    if (!isEditing) return
+    if (event.key === 'Enter') {
+      event.preventDefault()
+      commit()
+      ctx.setEditing(null)
+      // Clamped like arrow navigation: on the last row Enter would otherwise
+      // anchor outside the grid, and every arrow key after it would compute
+      // from a position that does not exist.
+      const next = { row: Math.min(coords.row + 1, ctx.bounds.maxRow), col: coords.col }
+      ctx.setAnchor(next)
+      ctx.setExtent(next)
+      ctx.focusCell(next)
+    } else if (event.key === 'Escape') {
+      event.preventDefault()
+      // Base UI's dialog listens for Escape on the document, so preventing
+      // the default is not enough to keep it from closing the sheet behind
+      // this cell: the key has to stop here (docs/plans/6.0-volume-pricing.md).
+      event.stopPropagation()
+      event.nativeEvent.stopImmediatePropagation()
+      setDraft(value ?? '')
+      ctx.setEditing(null)
+    } else if (event.key === 'Tab') {
+      event.preventDefault()
+      commit()
+      ctx.setEditing(null)
+      const dx = event.shiftKey ? -1 : 1
+      const next = { row: coords.row, col: coords.col + dx }
+      ctx.setAnchor(next)
+      ctx.setExtent(next)
+      ctx.focusCell(next)
+    }
+  }
+
+  return (
+    <div
+      ref={wrapRef}
+      className={cn(
+        'flex h-9 w-full items-center transition-colors',
+        isSelected && 'bg-blue-500/10',
+        isFocused && !isEditing && 'ring-2 ring-blue-500 ring-inset',
+        isEditing && 'bg-card ring-2 ring-blue-500 ring-inset',
+      )}
+    >
+      <input
+        ref={inputRef}
+        type="text"
+        value={isEditing ? draft : (value ?? '')}
+        readOnly={!isEditing}
+        onChange={(e) => setDraft(e.target.value)}
+        onFocus={() => {
+          ctx.setAnchor(coords)
+          ctx.setExtent(coords)
+        }}
+        onDoubleClick={() => ctx.setEditing(coords)}
+        onKeyDown={onKeyDown}
+        onBlur={() => {
+          if (isEditing) {
+            commit()
+            ctx.setEditing(null)
+          }
+        }}
+        aria-label={ariaLabel}
+        className={cn(
+          'block h-9 w-full cursor-cell border-0 bg-transparent px-3 outline-none',
           isEditing && 'cursor-text',
         )}
       />
@@ -343,18 +488,28 @@ export function SwitchCell({ coords, value, onChange, ariaLabel }: SwitchCellPro
 }
 
 interface SelectCellProps<V extends string> extends BaseCellProps {
-  value: V
-  onChange: (next: V) => void
-  options: ReadonlyArray<{ value: V; label: string }>
+  value: V | null
+  /** `null` when the cell is cleared (Delete key, or pasting a blank). */
+  onChange: (next: V | null) => void
+  /**
+   * `label` is what the cell shows and what a pasted value matches against, so
+   * it stays the plain name. `hint` is extra detail shown only in the open
+   * list — a size, a code — for telling similar options apart.
+   */
+  options: ReadonlyArray<{ value: V; label: string; hint?: string }>
+  /** Shown when value is null — e.g. "—" for "inherit the default". */
+  nullLabel?: string
 }
 
 /** Cell for fixed-option pickers. Enter opens the Select; arrow keys inside
- *  the open Select navigate options (Base UI default). Esc closes. */
+ *  the open Select navigate options (Base UI default). Esc closes. Pasted
+ *  values match by option value or label; blanks clear to null. */
 export function SelectCell<V extends string>({
   coords,
   value,
   onChange,
   options,
+  nullLabel,
   ariaLabel,
 }: SelectCellProps<V>) {
   const ctx = useDataGridContext()
@@ -363,17 +518,27 @@ export function SelectCell<V extends string>({
   const isFocused = ctx.anchor?.row === coords.row && ctx.anchor?.col === coords.col
   const id = useId()
 
+  const matchOption = (raw: string) => {
+    const needle = raw.trim()
+    return options.find((o) => o.value === needle || o.label === needle)
+  }
+
   useStableCellRegistration(coords, {
     focus: () => triggerRef.current?.focus(),
-    read: () => value,
+    read: () => value ?? '',
     write: (next) => {
-      if (options.some((o) => o.value === next)) onChange(next as V)
+      if (next.trim() === '') {
+        onChange(null)
+        return
+      }
+      const match = matchOption(next)
+      if (match) onChange(match.value)
     },
-    canWrite: (next) => options.some((o) => o.value === next) || next === '',
+    canWrite: (next) => next.trim() === '' || matchOption(next) !== undefined,
   })
 
   return (
-    <Select items={options} value={value} onValueChange={(v) => onChange(v as V)}>
+    <Select items={options} value={value ?? ''} onValueChange={(v) => onChange((v || null) as V)}>
       <SelectTrigger
         ref={triggerRef}
         id={id}
@@ -390,12 +555,21 @@ export function SelectCell<V extends string>({
           isFocused && 'ring-2 ring-blue-500',
         )}
       >
-        <SelectValue />
+        <SelectValue>
+          {(v) => options.find((o) => o.value === v)?.label ?? nullLabel ?? ''}
+        </SelectValue>
       </SelectTrigger>
       <SelectContent>
         {options.map((opt) => (
           <SelectItem key={opt.value} value={opt.value}>
-            {opt.label}
+            {opt.hint ? (
+              <span className="flex w-full items-baseline justify-between gap-4">
+                <span>{opt.label}</span>
+                <span className="text-xs text-muted-foreground tabular-nums">{opt.hint}</span>
+              </span>
+            ) : (
+              opt.label
+            )}
           </SelectItem>
         ))}
       </SelectContent>

package/src/spree/data-grid/context.ts

@@ -23,6 +23,12 @@ export interface DataGridContextValue {
 
   /** Dispatchers — components react via subscribed selectors below. */
   setAnchor: (coords: CellCoords | null) => void
+  /**
+   * Moves focus to a cell, waiting for it to register when the commit that
+   * asked for it also added the row. Prefer this over reading `cells`
+   * directly — a lookup that misses silently drops keyboard navigation.
+   */
+  focusCell: (coords: CellCoords) => void
   setExtent: (coords: CellCoords | null) => void
   setEditing: (coords: CellCoords | null) => void
 

package/src/spree/data-grid/data-grid.tsx

@@ -26,6 +26,17 @@ interface DataGridProps<T> {
   className?: string
   /** Optional caption-row aria-label etc. */
   'aria-label'?: string
+  /**
+   * Whether the grid scrolls inside its own box.
+   *
+   * `true` for a grid too wide or tall for where it sits — the bulk variant
+   * editor in its dialog, which has columns well past any viewport. `false`
+   * when the container already handles it, or when the grid is sized to fit:
+   * the fill handle straddles the selection's bottom-right corner and hangs a
+   * few pixels past the table, which a scroll container counts as content, so
+   * selecting an edge cell raises scrollbars on a grid that fits.
+   */
+  scrollable?: boolean
 }
 
 export function DataGrid<T>({
@@ -35,6 +46,7 @@ export function DataGrid<T>({
   renderSectionHeader,
   className,
   'aria-label': ariaLabel,
+  scrollable = false,
 }: DataGridProps<T>) {
   const table = useReactTable<T>({
     data: rows,
@@ -49,6 +61,7 @@ export function DataGrid<T>({
       renderSectionHeader={renderSectionHeader}
       className={className}
       ariaLabel={ariaLabel}
+      scrollable={scrollable}
     />
   )
 }
@@ -58,16 +71,22 @@ function DataGridShell<T>({
   renderSectionHeader,
   className,
   ariaLabel,
+  scrollable,
 }: {
   table: Table<T>
   renderSectionHeader?: RenderSectionHeader<T>
   className?: string
   ariaLabel?: string
+  scrollable?: boolean
 }) {
   const gridRef = useRef<HTMLTableElement | null>(null)
   const cellsRef = useRef<Map<CellKey, CellRegistration>>(new Map())
   const [bounds, setBounds] = useState<{ maxRow: number; maxCol: number }>({ maxRow: 0, maxCol: 0 })
   const [anchor, setAnchor] = useState<CellCoords | null>(null)
+  // Read by the blur handler, which fires from a DOM event and would
+  // otherwise close over a stale anchor.
+  const anchorRef = useRef<CellCoords | null>(null)
+  anchorRef.current = anchor
   const [extent, setExtent] = useState<CellCoords | null>(null)
   const [editing, setEditing] = useState<CellCoords | null>(null)
 
@@ -83,11 +102,53 @@ function DataGridShell<T>({
     )
   }, [])
 
+  // A cell the grid wants focused that has not registered yet. Cells register
+  // in an effect, so a commit that ADDS a row — a spreadsheet whose last line
+  // is a blank waiting to be filled — asks for a cell that does not exist
+  // until the next render. Without this the focus is dropped on the floor and
+  // the arrow keys stop responding, since nothing holds the selection
+  // (docs/plans/6.0-volume-pricing.md).
+  const pendingFocusRef = useRef<CellCoords | null>(null)
+
+  const focusCell = useCallback((coords: CellCoords) => {
+    const target = cellsRef.current.get(cellKey(coords))
+    // Focus now if the cell is already there, but ask again once the render
+    // this commit triggers has settled. Committing an edit re-renders the
+    // row, and React replaces the input we just focused — inside a dialog
+    // the browser then falls back to the dialog itself, which leaves nothing
+    // holding the selection and the arrow keys dead until the merchant
+    // clicks a cell (docs/plans/6.0-volume-pricing.md).
+    target?.focus()
+    pendingFocusRef.current = coords
+    requestAnimationFrame(() => {
+      const pending = pendingFocusRef.current
+      if (!pending || cellKey(pending) !== cellKey(coords)) return
+      pendingFocusRef.current = null
+      const cell = cellsRef.current.get(cellKey(coords))
+      if (cell) {
+        cell.focus()
+        return
+      }
+      // No cell to focus — keep the keyboard in the grid rather than letting
+      // it fall back to whatever contains it.
+      gridRef.current?.focus()
+    })
+  }, [])
+
   const registerCell = useCallback(
     (reg: CellRegistration) => {
       const key = cellKey(reg.coords)
       cellsRef.current.set(key, reg)
       recomputeBounds()
+
+      // The cell someone asked for has arrived — give it the focus it was
+      // promised, after this render commits.
+      const pending = pendingFocusRef.current
+      if (pending && cellKey(pending) === key) {
+        pendingFocusRef.current = null
+        queueMicrotask(() => cellsRef.current.get(key)?.focus())
+      }
+
       return () => {
         cellsRef.current.delete(key)
         recomputeBounds()
@@ -121,38 +182,119 @@ function DataGridShell<T>({
       setExtent,
       setEditing,
       registerCell,
+      focusCell,
       isSelected,
       selectedCells,
     }),
-    [bounds, anchor, extent, editing, registerCell, isSelected, selectedCells],
+    [bounds, anchor, extent, editing, registerCell, focusCell, isSelected, selectedCells],
   )
 
   return (
     <DataGridContext.Provider value={ctx}>
       <DataGridKeyboardMount gridRef={gridRef} />
-      <div className="relative overflow-hidden rounded-md">
+      {/* Scrolls sideways rather than clipping: a grid wide enough to need it
+          (the bulk variant editor sets a min-width well past any viewport) had
+          its right-hand columns cut off with no way to reach them, because the
+          `overflow-hidden` that used to clip this wrapper also beat the
+          caller's own scroll container. Nothing rounds the corners now — the
+          table's own cell borders draw its edges.
+
+          `max-h-full` is what keeps the sticky header working. Declaring one
+          overflow axis makes the other a scroll container too whatever it is
+          declared as, so this div scrolls vertically whether or not we ask it
+          to — and an unbounded one grows to its full content height, which
+          leaves `position: sticky` with nothing to stick within. Bounding it
+          to the caller's height gives the header a viewport again, and a
+          caller that imposes no height (a grid that scrolls with the page)
+          still resolves to no constraint.
+
+          All of it is behind `scrollable`, because a scroll container is not
+          free: `position: absolute` takes the fill handle out of layout flow
+          but NOT out of a scroller's scrollable overflow, and the handle
+          straddles the selection's bottom-right corner. On a cell at the
+          grid's edge it therefore hangs a few pixels past the table and the
+          container grows to contain it — so selecting an edge cell raised
+          scrollbars on a grid that fits its card. A grid that does not need
+          to scroll should not be a scroll container. */}
+      <div className={cn('relative', scrollable && 'themed-scrollbar max-h-full overflow-auto')}>
         <table
           ref={gridRef}
+          // Focusable so the grid itself can hold the keyboard when a cell's
+          // input goes away. Committing an edit re-renders the row and React
+          // replaces that input; inside a dialog the focus trap then pulls
+          // focus to the dialog, which is outside the grid, and every arrow
+          // key after it lands on nothing (docs/plans/6.0-volume-pricing.md).
+          tabIndex={-1}
           className={cn(
-            'w-full border-collapse text-sm [&_td]:border [&_th]:border [&_td]:border-border [&_th]:border-border',
+            'w-full border-collapse text-sm outline-none [&_td]:border [&_th]:border [&_td]:border-border [&_th]:border-border',
+            // Internal rules only. `border` on every cell also draws the grid's
+            // outer edge — `border-collapse` merges neighbours, so the outermost
+            // cells' outer sides become the table's own frame, doubling the
+            // card's border a pixel away from it. These grids are always inside
+            // a container that draws that edge already.
+            '[&_tr>*:first-child]:border-l-0 [&_tr>*:last-child]:border-r-0 [&_thead_tr:first-child>*]:border-t-0 [&_tbody_tr:last-child>*]:border-b-0',
+            // The header draws its bottom rule as an inset shadow (see the
+            // `<th>` below). Both the header's own bottom border and the
+            // first body row's top border would stack beside that shadow, so
+            // the one rule between the header and the body is the shadow.
+            '[&_thead_th]:border-b-0 [&_tbody_tr:first-child>*]:border-t-0',
             className,
           )}
           aria-label={ariaLabel}
           onBlurCapture={(e) => {
-            // If focus leaves the grid entirely, drop the selection so a
-            // fresh focus-in starts clean.
+            // A cell unmounting mid-commit is not the merchant leaving the
+            // grid: `relatedTarget` is null there, and the dialog's focus
+            // trap then claims the focus a frame later. Take it back on the
+            // spot and keep the selection, rather than racing that trap on a
+            // timer (docs/plans/6.0-volume-pricing.md).
             const next = e.relatedTarget as Node | null
             if (next && gridRef.current?.contains(next)) return
+            // Two hops the merchant did not ask for, both caused by a cell
+            // being replaced mid-commit: the browser dropping focus
+            // (`relatedTarget` null), and the surrounding dialog's focus trap
+            // then claiming it. Neither means the grid was left, so keep the
+            // selection and take the keyboard back.
+            const trapped =
+              next === null ||
+              (next instanceof Element &&
+                next.closest('[role="dialog"]')?.contains(gridRef.current ?? null) === true)
+            if (trapped) {
+              // After this event resolves, or the trap that prompted it wins.
+              if (anchorRef.current) {
+                queueMicrotask(() => gridRef.current?.focus({ preventScroll: true }))
+              }
+              return
+            }
+            // Focus moved somewhere real outside the grid — the merchant is
+            // done here, so drop the selection and let a fresh focus-in start
+            // clean.
             setAnchor(null)
             setExtent(null)
             setEditing(null)
           }}
         >
-          <thead className="sticky top-0 z-10 bg-muted/60 text-xs text-muted-foreground">
+          {/* The fill is on the cells, not the row: under `border-collapse` a
+              background on `<thead>` or `<tr>` paints unreliably, and it has to
+              be opaque — this row pins over the grid's own scrolling content,
+              so a translucent one (it was `bg-muted/60`) lets the rows behind
+              it read straight through the column labels. */}
+          <thead className="sticky top-0 z-10 text-xs text-muted-foreground">
             {table.getHeaderGroups().map((group) => (
               <tr key={group.id}>
                 {group.headers.map((header) => (
-                  <th key={header.id} className="h-8 px-3 text-left font-medium">
+                  <th
+                    key={header.id}
+                    // The bottom rule is an inset shadow, not the cell's own
+                    // border: under `border-collapse` the collapsed borders
+                    // belong to the table, so they scroll away with it and a
+                    // pinned header ends up with rows sliding flush against its
+                    // labels. A shadow belongs to the cell and pins with it.
+                    //
+                    // The table-level classes zero this cell's own top and
+                    // bottom borders: a border sits outside the padding box and
+                    // the shadow inside, so leaving both draws two rules at rest.
+                    className="h-8 bg-muted px-3 text-left font-medium shadow-[inset_0_-1px_0_0_var(--border)]"
+                  >
                     {header.isPlaceholder
                       ? null
                       : flexRender(header.column.columnDef.header, header.getContext())}

package/src/spree/data-grid/helpers.ts

@@ -3,14 +3,18 @@
  * the cell at that position has stable grid coords that exclude section
  * headers. Used by every spreadsheet that mixes a `renderSectionHeader`
  * with `<NumberCell>` / `<MoneyCell>` etc.
+ *
+ * Every kind but `header` counts, so a sheet that indents child rows under a
+ * parent — a variant's quantity breaks, say — keeps Tab and the arrow keys
+ * flowing through them in the order they are read.
  */
-export function editableRowIndex<T extends { kind: 'header' | 'item'; id: string }>(
+export function editableRowIndex<T extends { kind: string; id: string }>(
   rows: ReadonlyArray<{ id: string; original: T }>,
   rowId: string,
 ): number {
   let i = 0
   for (const row of rows) {
-    if (row.original.kind !== 'item') continue
+    if (row.original.kind === 'header') continue
     if (row.id === rowId) return i
     i++
   }

package/src/spree/data-grid/index.ts

@@ -1,4 +1,12 @@
-export { MoneyCell, NumberCell, ReadOnlyCell, SelectCell, SwitchCell } from './cells'
+export {
+  DecimalCell,
+  MoneyCell,
+  NumberCell,
+  ReadOnlyCell,
+  SelectCell,
+  SwitchCell,
+  TextCell,
+} from './cells'
 export { useDataGridContext } from './context'
 export { DataGrid } from './data-grid'
 export { editableRowIndex } from './helpers'

package/src/spree/data-grid/use-data-grid-keyboard.ts

@@ -9,8 +9,10 @@ export function useDataGridKeyboard(gridRef: RefObject<HTMLElement | null>) {
   const target = gridRef
 
   function focusCoords(coords: CellCoords) {
-    const cell = ctx.cells.get(`${coords.row}.${coords.col}`)
-    cell?.focus()
+    // Through the grid rather than the registry: a cell added by the same
+    // commit has not registered yet, and a missed lookup silently drops
+    // keyboard navigation.
+    ctx.focusCell(coords)
   }
 
   function navigate(dx: number, dy: number) {