@svgrid/grid 3.0.4 → 3.0.6

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

@@ -0,0 +1,152 @@
+/**
+ * `GridRowModel` - one prop instead of eleven.
+ *
+ * A grid backed by a server needs the same wiring every time: hand it the
+ * rows, tell it not to sort or filter locally, forward the sort and the filter
+ * to the backend, report which rows are on screen, say which rows have not
+ * loaded, and delegate selection. Written out by hand that is a dozen props
+ * and a filter-shape conversion that every app gets slightly differently:
+ *
+ * ```svelte
+ * <SvGrid data={s.rows} externalSort externalFilter loading={s.loading}
+ *   onSortingChange={(x) => ctl.setSort(x)}
+ *   onFiltersChange={(f) => ctl.setFilter({ global: f.global,
+ *     columns: Object.fromEntries(f.columns.map((c) => [c.id, { ... }])) })}
+ *   onVisibleRangeChange={(r) => ctl.setViewport(r.startIndex, r.endIndex)}
+ *   ... />
+ * ```
+ *
+ * An object that implements this interface carries all of it, so the same grid
+ * becomes:
+ *
+ * ```svelte
+ * <SvGrid rowModel={ctl} {columns} />
+ * ```
+ *
+ * `createServerDataSource` returns one, and so does the Enterprise server row
+ * model - which is the point of the interface rather than a concrete type: the
+ * grid depends on the SHAPE, never on either implementation, and an app with
+ * its own fetching can satisfy it too.
+ *
+ * Every member except `subscribe` / `getRows` / `isLoading` is optional, and a
+ * prop written explicitly on `<SvGrid>` always wins over the model's answer -
+ * so adopting this is never all-or-nothing.
+ */
+import type { FilterOperator } from './SvGrid.types'
+
+/** The filter state as the grid reports it, straight from `onFiltersChange`. */
+export type GridFilterState = {
+  global: string
+  columns: Array<{
+    id: string
+    operator: FilterOperator
+    value: string
+    valueTo?: string
+    selectedValues?: Array<string>
+  }>
+}
+
+/** The sort the grid hands a row model: column id and direction, in priority order. */
+export type GridRowModelSort = Array<{ id: string; desc: boolean }>
+
+/**
+ * What `<SvGrid rowModel>` consumes: rows, a loading flag, a change
+ * subscription, and whichever optional parts the model implements - sort,
+ * filter, viewport, placeholders, group accessors, selection, filter
+ * values, paging, pinned rows and pivot columns. `createServerDataSource`
+ * and the Enterprise `createServerRowModel` both satisfy it.
+ */
+export type GridRowModel<TData> = {
+  /**
+   * Register a callback for "something changed, re-read me". Returns an
+   * unsubscribe function, which the grid calls on unmount.
+   */
+  subscribe(onChange: () => void): () => void
+  /** The rows to render, including any placeholders for unloaded ones. */
+  getRows(): ReadonlyArray<TData>
+  /** True while a fetch is in flight, for the loading overlay. */
+  isLoading(): boolean
+  /** Stable row id. Required once selection or editing is involved. */
+  getRowId?(row: TData, index: number): string
+  /** Sort on the server. Present means "do not sort locally". */
+  setSort?(sort: GridRowModelSort): void
+  /** Filter on the server. Present means "do not filter locally". */
+  setFilter?(filters: GridFilterState): void
+  /** Which rows are on screen, so a block-loading model knows what to fetch. */
+  setViewport?(startIndex: number, endIndex: number): void
+  /** Why a row has no data yet, or null when it does. */
+  rowPlaceholder?(row: TData, rowIndex: number): 'loading' | 'failed' | null
+  /** Retry the failed block a placeholder row belongs to. */
+  retryRow?(row: TData, rowIndex: number): void
+  /** Group / tree accessors, for the grid's treegrid keyboard and ARIA. */
+  group?: {
+    isGroup: (row: TData) => boolean
+    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?: {
+    isSelected: (rowId: string, row: TData) => boolean
+    headerState: () => 'none' | 'some' | 'all'
+    toggle: (rowId: string, row: TData, next: boolean) => void
+    toggleAll: (next: boolean) => void
+    selectedCount?: () => number | null
+    bulkUpdate?: (patch: Record<string, unknown>) => Promise<number>
+  }
+  /** Distinct values for a column's set filter, fetched from the server. */
+  filterValues?(columnId: string): Promise<Array<string>>
+  /** Server-side paging. Omit it for infinite scrolling. */
+  pagination?: {
+    pageIndex: number
+    pageSize: number
+    rowCount: number
+    setPage(pageIndex: number): void
+    setPageSize(pageSize: number): void
+    /** Choices for the footer's page-size selector. */
+    pageSizes?: number[]
+    /**
+     * Ask the grid for as many rows as its body fits: it measures and calls
+     * `setPageSize` whenever the fit changes.
+     */
+    autoPageSize?: boolean
+  }
+  /** Rows to pin above / below the scrolling body - a grand total, say. */
+  readonly pinnedTopRows?: ReadonlyArray<TData>
+  readonly pinnedBottomRows?: ReadonlyArray<TData>
+  /**
+   * Columns that replace the grid's `columns` while the model is in pivot
+   * mode, or null. Read after every change notification.
+   */
+  readonly pivotResultColumns?: ReadonlyArray<unknown> | null
+}
+
+/**
+ * Turn the grid's filter payload into the column-keyed map a `ServerRequest`
+ * carries. Exported because a hand-written `GridRowModel` needs exactly this
+ * conversion, and copying it is how the two shapes drift apart.
+ */
+export function toServerFilterColumns(
+  filters: GridFilterState,
+): Record<
+  string,
+  { operator: string; value: string; valueTo?: string; selectedValues?: Array<string> }
+> {
+  return Object.fromEntries(
+    filters.columns.map((c) => [
+      c.id,
+      {
+        operator: c.operator,
+        value: c.value,
+        ...(c.valueTo !== undefined ? { valueTo: c.valueTo } : {}),
+        ...(c.selectedValues !== undefined ? { selectedValues: c.selectedValues } : {}),
+      },
+    ]),
+  )
+}

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.test.ts

@@ -39,6 +39,9 @@ function makeCtx(overrides: any = {}) {
     allRows: [],
     allColumns: [],
     headerSelectionState: 'none',
+    // The real controller always supplies this; a fake that omits it would
+    // make every select-all path throw rather than assert.
+    placeholderStateOf: () => null,
     userHasActivatedCell: false,
     enableCellSelectionEffective: true,
     selectionRange: { anchor: null, focus: null },

package/src/selection.ts

@@ -21,16 +21,45 @@ export function createSelection<
   TData extends RowData = RowData,
 >(ctx: any) {
   function isRowSelected(rowId: string) {
+    const model = ctx.props.rowSelectionModel;
+    if (model) {
+      const row = ctx.allRows.find((r: any) => r.id === rowId);
+      return row ? model.isSelected(rowId, row.original) : false;
+    }
     return Boolean(ctx.rowSelectionState[rowId]);
   }
 
   function toggleRowSelectionById(rowId: string) {
+    const model = ctx.props.rowSelectionModel;
+    if (model) {
+      const row = ctx.allRows.find((r: any) => r.id === rowId);
+      if (!row) return;
+      model.toggle(rowId, row.original, !model.isSelected(rowId, row.original));
+      return;
+    }
     ctx.grid.setRowSelection((prev: any) => ({ ...prev, [rowId]: !prev[rowId] }));
   }
 
   function toggleSelectAllRows() {
-    const selectable = ctx.allRows.filter((row: any) => !isGroupRow(row));
-    const select = ctx.headerSelectionState !== "all";
+    setSelectAllRows(ctx.headerSelectionState !== "all");
+  }
+
+  /**
+   * Select or clear every row, for the header checkbox and for
+   * `api.selectAllRows()`.
+   */
+  function setSelectAllRows(select: boolean) {
+    // An external model decides what "all" means - possibly a million rows
+    // the grid has never seen - so it gets the intent, not a row list.
+    if (ctx.props.rowSelectionModel) {
+      ctx.props.rowSelectionModel.toggleAll(select);
+      return;
+    }
+    // Placeholder rows are excluded: there is no row there to select yet,
+    // and ticking one would leave a selected id that never resolves.
+    const selectable = ctx.allRows.filter(
+      (row: any) => !isGroupRow(row) && !ctx.placeholderStateOf(row),
+    );
     ctx.grid.setRowSelection((prev: any) => {
       const next = { ...prev };
       for (const row of selectable) {
@@ -519,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);
   }
 
@@ -687,6 +716,7 @@ export function createSelection<
     isRowSelected,
     toggleRowSelectionById,
     toggleSelectAllRows,
+    setSelectAllRows,
     setActiveCell,
     scrollActiveCellIntoView,
     setSelection,