@svgrid/grid 3.0.5 → 3.0.6

package/src/editing.ts

@@ -158,6 +158,24 @@ export function createEditing<
     runHistoryGroup(ctx, () => commitEditingCell());
   }
 
+  /**
+   * True when a column with `rejectInvalid` refuses `value`: its `validate`
+   * hook returns `false` or a message. Without the flag nothing is refused.
+   */
+  function editRejected(column: any, value: unknown, rowData: unknown): boolean {
+    const def = column?.columnDef as
+      | { rejectInvalid?: boolean; validate?: (p: unknown) => string | boolean | null | undefined }
+      | undefined;
+    if (!def?.rejectInvalid || typeof def.validate !== "function") return false;
+    const verdict = def.validate({
+      value,
+      row: rowData,
+      rowIndex: ctx.internalData.indexOf(rowData as TData),
+      column,
+    });
+    return verdict === false || (typeof verdict === "string" && verdict.length > 0);
+  }
+
   function commitEditingCell() {
     if (!ctx.editingCell) return;
     const editing = ctx.editingCell;
@@ -200,6 +218,12 @@ export function createEditing<
           columnId: ctx.editingCell.columnId,
         });
       }
+      // A refused edit closes the editor and leaves the row, the overlay,
+      // the history and the consumer untouched.
+      if (editRejected(column, finalValue, rowData)) {
+        ctx.editingCell = null;
+        return;
+      }
       rowData[column.columnDef.field] = finalValue;
     }
     const key = getCellKey(ctx.editingCell.rowId, ctx.editingCell.columnId);
@@ -778,6 +802,7 @@ export function createEditing<
             columnId: column.id,
           })
         : parsed;
+      if (editRejected(column, finalValue, row.original)) continue;
       if (oldValue !== finalValue) {
         (row.original as Record<string, unknown>)[field] = finalValue;
         const key = getCellKey(fr.rowId, column.id);

package/src/grid-messages.test.ts

@@ -8,6 +8,13 @@ describe('resolveGridMessages', () => {
     expect(resolveGridMessages({})).toEqual(defaultGridMessages)
   })
 
+  it('names the client group expander, so a localized grid has no English left in it', () => {
+    const m = resolveGridMessages({ expandGroup: 'Gruppe aufklappen', rowsSuffix: 'Zeilen' })
+    expect(m.expandGroup).toBe('Gruppe aufklappen')
+    expect(m.collapseGroup).toBe('Collapse group')
+    expect(m.rowsSuffix).toBe('Zeilen')
+  })
+
   it('replaces only the provided keys, keeping English for the rest', () => {
     const m = resolveGridMessages({ noRows: 'Aucune ligne', pageSize: 'Taille :' })
     expect(m.noRows).toBe('Aucune ligne')

package/src/grid-messages.ts

@@ -109,6 +109,12 @@ export type GridChromeMessages = {
   // Rows whose data has not arrived (server-side / infinite loading)
   rowLoadFailed: string
   rowLoadRetry: string
+  // The expander on a client-side group row
+  expandGroup: string
+  collapseGroup: string
+  // The chevron of the detail-toggle column (`showDetailToggle`)
+  openDetail: string
+  closeDetail: string
   // Upsell notes (enterprise views not installed)
   pivotUpsellTitle: string
   pivotUpsellBody: string
@@ -194,6 +200,10 @@ export const defaultGridMessages: GridChromeMessages = {
   chartRange: 'Chart selected range',
   rowLoadFailed: 'Could not load these rows.',
   rowLoadRetry: 'Retry',
+  expandGroup: 'Expand group',
+  collapseGroup: 'Collapse group',
+  openDetail: 'Open details',
+  closeDetail: 'Close details',
   pivotUpsellTitle: 'Pivot mode',
   pivotUpsellBody: 'Pivot mode is an Enterprise feature. Install @svgrid/enterprise and call enablePivot() to use it.',
   ganttUpsellTitle: 'Gantt view',

package/src/headless.ts

@@ -85,3 +85,27 @@ export {
 export { createGrid, createSvGrid, type SvelteGrid } from './createGrid.svelte'
 export { createGridState, createSvGridState } from './createGridState.svelte'
 export { subscribeGrid, subscribeSvGrid } from './subscribe'
+
+// The virtualizers are pure window arithmetic (scroll offset in, visible
+// range out) with no DOM of their own, and a custom renderer over 50k rows
+// needs one. They were only on the barrel, so the Headless demos imported
+// the barrel to reach them and paid for the whole thing.
+export { createVirtualizer } from './virtualization/virtualizer'
+export { createSvelteVirtualizer } from './virtualization/svelte-virtualizer.svelte'
+export { createColumnVirtualizer } from './virtualization/column-virtualizer'
+export type { VirtualItem, VirtualizerOptions, VirtualizerState } from './virtualization/types'
+
+// The WAI-ARIA attribute factories: plain objects to spread onto your own
+// markup (`role`, `aria-sort`, `aria-rowindex`, ...). No DOM is touched here
+// either; a custom renderer that wants keyboard navigation reads
+// `activeCell` from the store and spreads these.
+export {
+  getGridCellDomId,
+  getGridCellA11yProps,
+  getGridHeaderA11yProps,
+  getGridRootA11yProps,
+  getGridRowA11yProps,
+  type GridCellA11yInput,
+  type GridColumnA11yInput,
+  type GridSortDirection,
+} from './a11y'

package/src/history.test.ts

@@ -5,6 +5,8 @@ import {
   pushHistory,
   runHistoryGroup,
   nextGroupId,
+  peekUndoHistory,
+  peekRedoHistory,
   type HistoryStep,
 } from './history'
 
@@ -162,7 +164,7 @@ describe('runHistoryGroup', () => {
     // This is why the group id is ambient rather than stamped afterwards: the
     // cap drops entries from the front, so any index captured before the call
     // would point at the wrong steps by the end of it.
-    const { ctx } = makeCtx([step(0)], 3)
+    const { ctx } = makeCtx([step(0)], 1)
     runHistoryGroup(ctx, () => {
       pushHistory(ctx, [step(1)])
       pushHistory(ctx, [step(2)])
@@ -172,6 +174,21 @@ describe('runHistoryGroup', () => {
     expect(new Set(ctx.history.map((s) => s.groupId)).size).toBe(1)
   })
 
+  it('caps by actions, so a group larger than the buffer stays whole', () => {
+    // A sort of 5,000 rows is one Ctrl+Z of 20,000 steps; a cap that
+    // counted steps cut it to its tail and undid a fifth of it.
+    const { ctx } = makeCtx([step(0)], 2)
+    runHistoryGroup(ctx, () => { for (let i = 1; i <= 5; i += 1) pushHistory(ctx, [step(i)]) })
+    expect(ctx.history.map((s) => s.rowId)).toEqual(['r0', 'r1', 'r2', 'r3', 'r4', 'r5'])
+    pushHistory(ctx, [step(9)])
+    // Three actions now; the oldest one goes and the group survives whole.
+    expect(ctx.history.map((s) => s.rowId)).toEqual(['r1', 'r2', 'r3', 'r4', 'r5', 'r9'])
+    expect(ctx.historyPtr).toBe(5)
+    undoHistory(ctx)
+    undoHistory(ctx)
+    expect(ctx.historyPtr).toBe(-1)
+  })
+
   it('nests into the outer group so one action is one undo', () => {
     const { ctx } = makeCtx()
     runHistoryGroup(ctx, () => {
@@ -194,3 +211,34 @@ describe('runHistoryGroup', () => {
     expect(runHistoryGroup(ctx, () => 42)).toBe(42)
   })
 })
+
+describe('tags', () => {
+  it('stamps the ambient tag on every step recorded while it is set, grouped or not', () => {
+    const { ctx } = makeCtx()
+    const sheet = { name: 'Orders' }
+    pushHistory(ctx, [step(1)])
+    ;(ctx as { historyTag?: unknown }).historyTag = sheet
+    pushHistory(ctx, [step(2)])
+    runHistoryGroup(ctx, () => { pushHistory(ctx, [step(3)]); pushHistory(ctx, [step(4)]) })
+    ;(ctx as { historyTag?: unknown }).historyTag = undefined
+    pushHistory(ctx, [step(5)])
+    expect(ctx.history.map((s) => s.tag)).toEqual([undefined, sheet, sheet, sheet, undefined])
+    expect(ctx.history[2]!.groupId).toBe(ctx.history[3]!.groupId)
+  })
+
+  it('peeks at the step the next undo or redo would take', () => {
+    const { ctx } = makeCtx()
+    ;(ctx as { historyTag?: unknown }).historyTag = 'Summary'
+    pushHistory(ctx, [step(1)])
+    ;(ctx as { historyTag?: unknown }).historyTag = 'Orders'
+    runHistoryGroup(ctx, () => { pushHistory(ctx, [step(2)]); pushHistory(ctx, [step(3)]) })
+    expect(peekUndoHistory(ctx)).toEqual({ tag: 'Orders' })
+    expect(peekRedoHistory(ctx)).toBeNull()
+    undoHistory(ctx)
+    expect(peekUndoHistory(ctx)).toEqual({ tag: 'Summary' })
+    expect(peekRedoHistory(ctx)).toEqual({ tag: 'Orders' })
+    undoHistory(ctx)
+    expect(peekUndoHistory(ctx)).toBeNull()
+    expect(peekRedoHistory(ctx)).toEqual({ tag: 'Summary' })
+  })
+})

package/src/history.ts

@@ -36,6 +36,15 @@ export type HistoryStep = {
    * functions do the work. Never serialised, since a closure cannot be.
    */
   custom?: { undo: () => void; redo: () => void }
+  /**
+   * The consumer's own mark on the step, copied from `api.setHistoryTag` at
+   * the moment it is recorded. The grid never reads it: it is there for a
+   * consumer that shows one of several data sets through the grid and has
+   * to know which one a step belongs to before it lets Ctrl+Z apply it (a
+   * workbook with several sheets, say). Kept as given, so an object tag
+   * compares by identity. Not serialised.
+   */
+  tag?: unknown
 }
 
 /** Ctx surface these helpers touch. The controller satisfies it structurally. */
@@ -48,6 +57,8 @@ type HistoryCtx = {
    *  inside it joins that group, so a command does not have to thread a group
    *  id down through the writers it calls. */
   historyGroupId: string | undefined
+  /** Stamped on every step recorded while it is set; see `HistoryStep.tag`. */
+  historyTag?: unknown
   applyHistoryStep(step: HistoryStep, direction: 'undo' | 'redo'): void
 }
 
@@ -71,6 +82,37 @@ function groupEnd(history: ReadonlyArray<HistoryStep>, start: number): number {
   return i
 }
 
+/**
+ * The last `limit` ACTIONS of a history, whole groups kept. The cap used
+ * to count steps, and a sort of 5,000 rows is 20,000 steps in one group:
+ * it cut the group to its last 200 cells, so Ctrl+Z put a fifth of a
+ * column back and left the rest sorted. An action is one press of Ctrl+Z,
+ * so that is what the buffer counts; the steps inside are the cost of it.
+ */
+function lastActions(history: HistoryStep[], limit: number): HistoryStep[] {
+  let i = history.length
+  let actions = 0
+  while (i > 0 && actions < limit) {
+    i = groupStart(history, i - 1)
+    actions += 1
+  }
+  return i === 0 ? history : history.slice(i)
+}
+
+/** What the next undo would apply: the tag of the step Ctrl+Z takes next
+ *  (a group carries one tag, so its last step's is the group's). Null when
+ *  there is nothing to undo. */
+export function peekUndoHistory(ctx: HistoryCtx): { tag: unknown } | null {
+  const step = ctx.historyPtr >= 0 ? ctx.history[ctx.historyPtr] : undefined
+  return step ? { tag: step.tag } : null
+}
+
+/** The redo counterpart of `peekUndoHistory`. */
+export function peekRedoHistory(ctx: HistoryCtx): { tag: unknown } | null {
+  const step = ctx.historyPtr < ctx.history.length - 1 ? ctx.history[ctx.historyPtr + 1] : undefined
+  return step ? { tag: step.tag } : null
+}
+
 /** Undo one action. Returns false when there is nothing left to undo. */
 export function undoHistory(ctx: HistoryCtx): boolean {
   if (ctx.historyPtr < 0) return false
@@ -123,9 +165,13 @@ export function pushHistory(
   // Outside one, a group of one is just a step. Tagging it would make undo do
   // the same work through a slower path and would show up in serialized state.
   const id = ctx.historyGroupId ?? (groupId && steps.length > 1 ? groupId : undefined)
+  const tag = ctx.historyTag
   let next = ctx.history.slice(0, ctx.historyPtr + 1)
-  for (const step of steps) next.push(id ? { ...step, groupId: id } : step)
-  if (next.length > ctx.UNDO_LIMIT) next = next.slice(next.length - ctx.UNDO_LIMIT)
+  for (const step of steps) {
+    const stamped = tag === undefined ? step : { ...step, tag }
+    next.push(id ? { ...stamped, groupId: id } : stamped)
+  }
+  next = lastActions(next, ctx.UNDO_LIMIT)
   ctx.history = next
   ctx.historyPtr = ctx.history.length - 1
   ctx.historyVersion += 1

package/src/index.ts

@@ -779,6 +779,7 @@ export {
   type ServerState,
   type ServerSortModel,
   type ServerFilterModel,
+  type ServerAggFn,
   type ServerAggregation,
   type ServerGroupRow,
   type ServerLeafRow,
@@ -788,6 +789,7 @@ export {
   type ServerGrandTotalRow,
   type ServerPlaceholderRow,
   type ServerDisplayRow,
+  type ServerDetailRow,
 } from './server-data-source'
 export {
   createBlockCache,

package/src/keyboard-handlers.coverage.test.ts

@@ -576,6 +576,17 @@ describe('onWindowKeydown', () => {
     expect(ctx.closeMenus).toHaveBeenCalled()
   })
 
+  it('Escape closes the funnel filter popover, the value suggestions and the column chooser too', () => {
+    // The filter popover focuses its condition input, so Escape from there
+    // used to go unanswered while the column menu closed as expected.
+    for (const open of [{ filterMenuFor: 'col1' }, { inSuggestFor: 'col1' }, { chooseColumnsPos: { x: 1, y: 1 } }]) {
+      const ctx = makeCtx(open)
+      const { onWindowKeydown } = createKeyboard(ctx)
+      onWindowKeydown(new KeyboardEvent('keydown', { key: 'Escape' }))
+      expect(ctx.closeMenus).toHaveBeenCalled()
+    }
+  })
+
   it('does nothing when no menu is open', () => {
     const ctx = makeCtx()
     const { onWindowKeydown } = createKeyboard(ctx)
@@ -678,3 +689,57 @@ describe('onHeaderSortClick', () => {
     expect(ctx._state.sorting).toEqual([{ id: 'name', desc: false }])
   })
 })
+
+describe('onGridKeyDown / Ctrl+Enter on a server-side tree', () => {
+  const tree = () => {
+    const toggle = vi.fn()
+    const toggleDetail = vi.fn()
+    const rows = [
+      { original: { id: 'g', kind: 'group' } },
+      { original: { id: 'a', kind: 'leaf' } },
+    ]
+    const serverGroup = {
+      isGroup: (r: { kind: string }) => r.kind === 'group',
+      level: () => 0,
+      onToggle: toggle,
+      toggleDetail,
+    }
+    return { toggle, toggleDetail, rows, serverGroup }
+  }
+
+  it('opens or closes the group under the active cell', () => {
+    const t = tree()
+    const ctx = makeCtx({ allRows: t.rows, props: { rowHeight: 30, serverGroup: t.serverGroup, renderDetailRow: () => {} }, state: { activeCell: { rowIndex: 0, colIndex: 0, cellId: null } } })
+    createKeyboard(ctx).onGridKeyDown(rootKeyEvent({ key: 'Enter', ctrlKey: true }))
+    expect(t.toggle).toHaveBeenCalledWith(t.rows[0]!.original)
+    expect(t.toggleDetail).not.toHaveBeenCalled()
+    expect(ctx.onCellDoubleClick).not.toHaveBeenCalled()
+  })
+
+  it('opens or closes the detail panel under a leaf, when the grid draws one', () => {
+    const t = tree()
+    const ctx = makeCtx({ allRows: t.rows, props: { rowHeight: 30, serverGroup: t.serverGroup, renderDetailRow: () => {} }, state: { activeCell: { rowIndex: 1, colIndex: 0, cellId: null } } })
+    createKeyboard(ctx).onGridKeyDown(rootKeyEvent({ key: 'Enter', ctrlKey: true }))
+    expect(t.toggleDetail).toHaveBeenCalledWith(t.rows[1]!.original)
+    expect(t.toggle).not.toHaveBeenCalled()
+    // Without a renderer there is no panel to open: Enter falls through to editing.
+    const plain = makeCtx({ allRows: t.rows, props: { rowHeight: 30, serverGroup: t.serverGroup }, state: { activeCell: { rowIndex: 1, colIndex: 0, cellId: null } } })
+    createKeyboard(plain).onGridKeyDown(rootKeyEvent({ key: 'Enter', ctrlKey: true }))
+    expect(t.toggleDetail).toHaveBeenCalledTimes(1)
+    expect(plain.onCellDoubleClick).toHaveBeenCalled()
+  })
+
+  it('on a client master-detail calls onDetailToggle with the row, never on the detail row itself', () => {
+    const onDetailToggle = vi.fn()
+    const rows = [{ original: { id: 'a', kind: 'data' } }, { original: { id: 'a-detail', kind: 'detail' } }]
+    const props = { rowHeight: 30, renderDetailRow: () => {}, onDetailToggle, isDetailRow: (r: { kind: string }) => r.kind === 'detail' }
+    const ctx = makeCtx({ allRows: rows, props, state: { activeCell: { rowIndex: 0, colIndex: 0, cellId: null } } })
+    createKeyboard(ctx).onGridKeyDown(rootKeyEvent({ key: 'Enter', ctrlKey: true }))
+    expect(onDetailToggle).toHaveBeenCalledWith(rows[0]!.original, 0)
+    expect(ctx.onCellDoubleClick).not.toHaveBeenCalled()
+    const onDetail = makeCtx({ allRows: rows, props, state: { activeCell: { rowIndex: 1, colIndex: 0, cellId: null } } })
+    createKeyboard(onDetail).onGridKeyDown(rootKeyEvent({ key: 'Enter', ctrlKey: true }))
+    expect(onDetailToggle).toHaveBeenCalledTimes(1)
+    expect(onDetail.onCellDoubleClick).toHaveBeenCalled()
+  })
+})

package/src/keyboard-handlers.ts

@@ -193,6 +193,28 @@ export function createKeyboard<
         row.toggleExpanded?.();
         return;
       }
+      // The same key on a server-side tree: a group opens or closes, a leaf
+      // opens or closes its detail panel when the grid draws one.
+      const sg = ctx.props.serverGroup;
+      if (event.ctrlKey && sg && row) {
+        const data = row.original;
+        if (sg.isGroup(data)) {
+          sg.onToggle(data);
+          return;
+        }
+        if (sg.toggleDetail && ctx.props.renderDetailRow && (sg.hasDetail?.(data) ?? true)) {
+          sg.toggleDetail(data);
+          return;
+        }
+      }
+      // ...and on a client-side master-detail: the app's own toggle.
+      if (event.ctrlKey && row && ctx.props.onDetailToggle && ctx.props.renderDetailRow) {
+        const data = row.original;
+        if (!ctx.props.isDetailRow?.(data, current.rowIndex) && (ctx.props.hasDetail?.(data) ?? true)) {
+          ctx.props.onDetailToggle(data, current.rowIndex);
+          return;
+        }
+      }
       if (column?.columnDef.editorType === "checkbox") {
         ctx.toggleBooleanCell(current.rowIndex, current.colIndex);
         return;
@@ -287,7 +309,10 @@ export function createKeyboard<
   }
 
   function onWindowKeydown(event: KeyboardEvent) {
-    if (event.key === "Escape" && (ctx.columnMenuFor || ctx.operatorMenuFor)) {
+    if (
+      event.key === "Escape" &&
+      (ctx.columnMenuFor || ctx.operatorMenuFor || ctx.filterMenuFor || ctx.inSuggestFor || ctx.chooseColumnsPos)
+    ) {
       ctx.closeMenus();
     }
   }

package/src/keyboard.ts

@@ -50,6 +50,9 @@ export function getKeyboardIntent(event: KeyboardEvent): GridKeyboardIntent {
   //   Tab        → move right (Shift+Tab → left), wraps at row boundaries
   //   Delete     → clear contents of the selected cells
   //   F2 / Space → start editing the active cell
+  // Ctrl+Enter acts on the row rather than moving: a group opens or closes,
+  // a row with a detail panel shows or hides it (see the activate branch).
+  if (event.key === 'Enter' && (event.ctrlKey || event.metaKey)) return 'activate'
   if (event.key === 'Enter') return event.shiftKey ? 'moveUp' : 'moveDown'
   if (event.key === 'Tab') return event.shiftKey ? 'tabPrev' : 'tabNext'
   if (event.key === 'F2') return 'activate'

package/src/row-drag-touch.ts

@@ -23,7 +23,7 @@ export type TouchDragDeps = {
   ctx: any;
   managed: () => boolean;
   originalAt: (rowIndex: number) => unknown;
-  commitDropOnRow: (rowIndex: number, side: "before" | "after") => void;
+  commitDropOnRow: (rowIndex: number, side: "before" | "after" | "into") => void;
   clearIndicators: () => void;
   cancelPendingLeave: () => void;
   /** Publish the dragged row on the shared cross-grid bus. */
@@ -135,7 +135,7 @@ export function createTouchDrag(deps: TouchDragDeps): TouchDragHandle {
     if (commit && ctx.rowDropIndex != null) {
       deps.commitDropOnRow(
         ctx.rowDropIndex as number,
-        (ctx.rowDropSide ?? "before") as "before" | "after",
+        (ctx.rowDropSide ?? "before") as "before" | "after" | "into",
       );
     } else {
       deps.clearIndicators();

package/src/row-drag.test.ts

@@ -73,6 +73,57 @@ describe('createRowDrag - same-grid reorder', () => {
   })
 })
 
+describe('createRowDrag - a custom drop (onRowDrop)', () => {
+  it('reports the drop with its side and leaves the data alone', () => {
+    const rows: Task[] = [
+      { id: 1, title: 'a' },
+      { id: 2, title: 'b' },
+      { id: 3, title: 'c' },
+    ]
+    const onRowDrop = vi.fn()
+    const ctx = makeCtx(rows, { ...P, onRowDrop })
+    const h = createRowDrag(ctx)
+    h.onRowDragStart(fakeEvent(), 0) // drag 'a'
+    h.onRowDragOver(fakeEvent(35, 0, 40), 2) // low on c: after
+    expect(ctx.rowDropSide).toBe('after')
+    h.onRowDrop(fakeEvent(), 2)
+    expect(onRowDrop).toHaveBeenCalledWith({ row: rows[0], target: rows[2], targetIndex: 2, side: 'after' })
+    expect((ctx.internalData as Task[]).map((r) => r.title)).toEqual(['a', 'b', 'c'])
+    // The empty space below the rows reports no target.
+    h.onRowDragStart(fakeEvent(), 1)
+    h.onRowsContainerDrop(fakeEvent())
+    expect(onRowDrop).toHaveBeenLastCalledWith({ row: rows[1], target: null, targetIndex: null, side: 'after' })
+  })
+
+  it('offers "into" over the middle of a group row, and only then', () => {
+    const rows: Task[] = [
+      { id: 1, title: 'folder' },
+      { id: 2, title: 'file' },
+    ]
+    const ctx = makeCtx(rows, {
+      ...P,
+      onRowDrop: vi.fn(),
+      serverGroup: { isGroup: (r: Task) => r.title === 'folder', level: () => 0, onToggle: () => {} },
+    })
+    const h = createRowDrag(ctx)
+    h.onRowDragStart(fakeEvent(), 1)
+    h.onRowDragOver(fakeEvent(20, 0, 40), 0) // the middle of the folder
+    expect(ctx.rowDropSide).toBe('into')
+    h.onRowDragOver(fakeEvent(3, 0, 40), 0) // its top edge
+    expect(ctx.rowDropSide).toBe('before')
+    h.onRowDragOver(fakeEvent(19, 0, 40), 1) // the middle of a file: no nesting, just the halves
+    expect(ctx.rowDropSide).toBe('before')
+    h.onRowDragOver(fakeEvent(21, 0, 40), 1)
+    expect(ctx.rowDropSide).toBe('after')
+    // Without a custom handler the middle band does not exist.
+    const managed = makeCtx(rows, { ...P, serverGroup: ctx.props.serverGroup })
+    const hm = createRowDrag(managed)
+    hm.onRowDragStart(fakeEvent(), 1)
+    hm.onRowDragOver(fakeEvent(20, 0, 40), 0)
+    expect(managed.rowDropSide).toBe('after')
+  })
+})
+
 describe('createRowDrag - grid-to-grid', () => {
   it('moves a row from source into target when groups match', () => {
     const a = makeCtx([{ id: 1, title: 'a1' }, { id: 2, title: 'a2' }], { ...P, rowDragGroup: 'g' })

package/src/row-drag.ts

@@ -116,7 +116,25 @@ export function createRowDrag<TFeatures, TData>(ctx: any) {
     if (e.dataTransfer) e.dataTransfer.dropEffect = "move";
     const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
     ctx.rowDropIndex = rowIndex;
-    ctx.rowDropSide = e.clientY < rect.top + rect.height / 2 ? "before" : "after";
+    ctx.rowDropSide = sideAt(rowIndex, rect, e.clientY);
+  }
+
+  /**
+   * Which edge the pointer is on. A custom drop handler also gets the middle
+   * of a group or tree row as "into" (the row becomes its child); the
+   * managed reorder only knows before and after.
+   */
+  function sideAt(rowIndex: number, rect: DOMRect, y: number): "before" | "after" | "into" {
+    const rel = (y - rect.top) / Math.max(rect.height, 1);
+    if (ctx.props.onRowDrop && rel >= 0.25 && rel <= 0.75 && canNest(rowIndex)) return "into";
+    return rel < 0.5 ? "before" : "after";
+  }
+  function canNest(rowIndex: number): boolean {
+    const row = ctx.allRows[rowIndex];
+    if (!row) return false;
+    const sg = ctx.props.serverGroup;
+    if (sg) return !!sg.isGroup(row.original);
+    return typeof row.getCanExpand === "function" && row.getCanExpand();
   }
 
   function onRowDragLeave(rowIndex: number) {
@@ -147,7 +165,7 @@ export function createRowDrag<TFeatures, TData>(ctx: any) {
    * both land here, so the reorder, the cross-grid hand-off and the
    * `onRowDragEnd` payload have exactly one implementation.
    */
-  function commitDropOnRow(rowIndex: number, side: "before" | "after") {
+  function commitDropOnRow(rowIndex: number, side: "before" | "after" | "into") {
     if (!canAccept() || !bus) return;
     const dragged = bus.row;
     const target = originalAt(rowIndex);
@@ -155,6 +173,15 @@ export function createRowDrag<TFeatures, TData>(ctx: any) {
     const sameGrid = sourceGridId === gridId;
     clearIndicators();
 
+    // A custom handler owns the drop: the grid reports it and leaves its
+    // data alone (a row model's rows are not the grid's to splice).
+    if (sameGrid && ctx.props.onRowDrop) {
+      bus = null;
+      ctx.props.onRowDrop({ row: dragged, target, targetIndex: rowIndex, side });
+      return;
+    }
+    if (side === "into") side = "after";
+
     const data = (ctx.internalData as unknown[]).slice();
     if (sameGrid) {
       const from = data.indexOf(dragged);
@@ -198,6 +225,12 @@ export function createRowDrag<TFeatures, TData>(ctx: any) {
     const sameGrid = sourceGridId === gridId;
     clearIndicators();
 
+    if (sameGrid && ctx.props.onRowDrop) {
+      bus = null;
+      ctx.props.onRowDrop({ row: dragged, target: null, targetIndex: null, side: "after" });
+      return;
+    }
+
     const data = (ctx.internalData as unknown[]).slice();
     if (sameGrid) {
       const from = data.indexOf(dragged);

package/src/row-model.ts

@@ -84,6 +84,12 @@ export type GridRowModel<TData> = {
     level: (row: TData) => number
     expanded?: (row: TData) => boolean
     onToggle: (row: TData) => void
+    /** Open or close the detail panel under a leaf. Ctrl+Enter on a row calls it when `renderDetailRow` is set, and so does the `showDetailToggle` chevron. */
+    toggleDetail?: (row: TData) => void
+    /** Whether the detail under a leaf is open: the chevron's direction. */
+    detailOpen?: (row: TData) => boolean
+    /** Whether a row can open a detail; the chevron is left out where this is false. */
+    hasDetail?: (row: TData) => boolean
   }
   /** Selection the grid does not own - see the `rowSelectionModel` prop. */
   selection?: {

package/src/row-resize.ts

@@ -69,6 +69,20 @@ export function rowResize(node: HTMLElement, opts: RowResizeOptions) {
   /** The last press on a strip, for telling a double-click from two drags. */
   let lastPress: { rowIndex: number; at: number } | null = null
 
+  /**
+   * A focusable `role="separator"` is a splitter, and a splitter carries its
+   * position: axe's `aria-required-attr` fails one without `aria-valuenow`,
+   * and a screen reader reading the strip says nothing useful without it. The
+   * value is the row's height in pixels, between the action's min and max.
+   */
+  function setStripValue(strip: HTMLElement, height: number): void {
+    const min = current.min ?? 20
+    const max = current.max ?? 320
+    strip.setAttribute('aria-valuemin', String(min))
+    strip.setAttribute('aria-valuemax', String(max))
+    strip.setAttribute('aria-valuenow', String(Math.round(Math.max(min, Math.min(max, height || min)))))
+  }
+
   function rowIndexOf(tr: HTMLTableRowElement): number {
     const dataRow = tr.querySelector<HTMLElement>('[data-svgrid-row]')
     const val = dataRow?.dataset.svgridRow
@@ -81,6 +95,7 @@ export function rowResize(node: HTMLElement, opts: RowResizeOptions) {
     const max = current.max ?? 320
     const next = Math.max(min, Math.min(max, drag.startHeight + (e.clientY - drag.startY)))
     drag.trEl.style.height = `${Math.round(next)}px`
+    setStripValue(drag.strip, next)
     current.onResizeMove?.(drag.rowIndex, Math.round(next))
   }
   function onPointerUp(e: PointerEvent) {
@@ -124,6 +139,7 @@ export function rowResize(node: HTMLElement, opts: RowResizeOptions) {
       Math.max(min, Math.min(max, tr.getBoundingClientRect().height + delta)),
     )
     tr.style.height = `${next}px`
+    setStripValue(t, next)
     current.onResizeMove?.(rowIndex, next)
     current.onResize(rowIndex, next)
   }
@@ -189,7 +205,13 @@ export function rowResize(node: HTMLElement, opts: RowResizeOptions) {
           ? tr.querySelector<HTMLTableCellElement>('.sv-grid-cell')
           : null)
       if (!gutter) continue
-      if (gutter.querySelector(`:scope > .${STRIP_CLASS}`)) continue
+      const already = gutter.querySelector<HTMLElement>(`:scope > .${STRIP_CLASS}`)
+      if (already) {
+        // The row may have been resized from outside the action (a saved
+        // height, a double-click autofit); keep the separator's value honest.
+        setStripValue(already, tr.getBoundingClientRect().height)
+        continue
+      }
       // Anchor the strip to the gutter cell + allow it to overflow
       // downward into the row gap so the hit-area straddles the
       // row boundary the way Excel does.
@@ -203,6 +225,7 @@ export function rowResize(node: HTMLElement, opts: RowResizeOptions) {
       // A separator used as an interactive splitter has to be focusable so
       // keyboard-only users can reach it and drive `onKeyDown` (#79).
       strip.tabIndex = 0
+      setStripValue(strip, tr.getBoundingClientRect().height)
       // Inline the geometry + pointer-events so the strip works even
       // before SvGrid.css is parsed; the hover tint still comes from
       // the stylesheet. We keep the strip fully inside the gutter

package/src/selection.ts

@@ -548,7 +548,7 @@ export function createSelection<
     ctx.stopEdgeScroll();
     // Also commit a fill-handle drag if one was in progress - the user
     // released the mouse, time to apply the pattern.
-    if (ctx.fillDrag) ctx.onFillPointerUp();
+    if (ctx.fillDrag) ctx.onFillPointerUp(event);
     if (ctx.moveDrag) ctx.onMovePointerUp(event);
   }