@svgrid/grid 1.1.0 → 1.1.2

package/src/keyboard.ts

@@ -1,97 +1,97 @@
-import type { ActiveCellState } from './core'
-
-export type GridKeyboardIntent =
-  | 'moveLeft'
-  | 'moveRight'
-  | 'moveUp'
-  | 'moveDown'
-  | 'tabNext'
-  | 'tabPrev'
-  | 'rowStart'
-  | 'rowEnd'
-  | 'gridStart'
-  | 'gridEnd'
-  | 'pageUp'
-  | 'pageDown'
-  | 'activate'
-  | 'clearCells'
-  | 'noop'
-
-export function getKeyboardIntent(event: KeyboardEvent): GridKeyboardIntent {
-  // Ctrl+Home / Ctrl+End come before plain Home / End so the modifier wins.
-  if (event.ctrlKey && event.key === 'Home') return 'gridStart'
-  if (event.ctrlKey && event.key === 'End') return 'gridEnd'
-
-  if (event.key === 'ArrowLeft') return 'moveLeft'
-  if (event.key === 'ArrowRight') return 'moveRight'
-  if (event.key === 'ArrowUp') return 'moveUp'
-  if (event.key === 'ArrowDown') return 'moveDown'
-  if (event.key === 'Home') return 'rowStart'
-  if (event.key === 'End') return 'rowEnd'
-  if (event.key === 'PageUp') return 'pageUp'
-  if (event.key === 'PageDown') return 'pageDown'
-
-  // Excel-style data-entry navigation:
-  //   Enter      → move down (Shift+Enter → up)
-  //   Tab        → move right (Shift+Tab → left), wraps at row boundaries
-  //   Delete     → clear contents of the selected cells
-  //   F2 / Space → start editing the active cell
-  if (event.key === 'Enter') return event.shiftKey ? 'moveUp' : 'moveDown'
-  if (event.key === 'Tab') return event.shiftKey ? 'tabPrev' : 'tabNext'
-  if (event.key === 'F2') return 'activate'
-  if (event.key === ' ') return 'activate'
-  if (event.key === 'Delete') return 'clearCells'
-
-  return 'noop'
-}
-
-export function getNextActiveCell(
-  current: ActiveCellState,
-  intent: GridKeyboardIntent,
-  bounds: { maxRow: number; maxCol: number; pageSize?: number },
-): ActiveCellState {
-  const pageSize = bounds.pageSize ?? 10
-  let rowIndex = current.rowIndex
-  let colIndex = current.colIndex
-
-  if (intent === 'moveLeft') colIndex -= 1
-  if (intent === 'moveRight') colIndex += 1
-  if (intent === 'moveUp') rowIndex -= 1
-  if (intent === 'moveDown') rowIndex += 1
-  if (intent === 'tabNext') {
-    // Right one column; if we fall off the right edge, wrap to the
-    // first column of the next row - Excel's "data entry" behavior.
-    colIndex += 1
-    if (colIndex > bounds.maxCol) {
-      colIndex = 0
-      rowIndex += 1
-    }
-  }
-  if (intent === 'tabPrev') {
-    colIndex -= 1
-    if (colIndex < 0) {
-      colIndex = bounds.maxCol
-      rowIndex -= 1
-    }
-  }
-  if (intent === 'rowStart') colIndex = 0
-  if (intent === 'rowEnd') colIndex = bounds.maxCol
-  if (intent === 'gridStart') {
-    rowIndex = 0
-    colIndex = 0
-  }
-  if (intent === 'gridEnd') {
-    rowIndex = bounds.maxRow
-    colIndex = bounds.maxCol
-  }
-  if (intent === 'pageUp') rowIndex -= pageSize
-  if (intent === 'pageDown') rowIndex += pageSize
-
-  rowIndex = Math.min(Math.max(rowIndex, 0), Math.max(bounds.maxRow, 0))
-  colIndex = Math.min(Math.max(colIndex, 0), Math.max(bounds.maxCol, 0))
-  return {
-    rowIndex,
-    colIndex,
-    cellId: current.cellId,
-  }
-}
+import type { ActiveCellState } from './core'
+
+export type GridKeyboardIntent =
+  | 'moveLeft'
+  | 'moveRight'
+  | 'moveUp'
+  | 'moveDown'
+  | 'tabNext'
+  | 'tabPrev'
+  | 'rowStart'
+  | 'rowEnd'
+  | 'gridStart'
+  | 'gridEnd'
+  | 'pageUp'
+  | 'pageDown'
+  | 'activate'
+  | 'clearCells'
+  | 'noop'
+
+export function getKeyboardIntent(event: KeyboardEvent): GridKeyboardIntent {
+  // Ctrl+Home / Ctrl+End come before plain Home / End so the modifier wins.
+  if (event.ctrlKey && event.key === 'Home') return 'gridStart'
+  if (event.ctrlKey && event.key === 'End') return 'gridEnd'
+
+  if (event.key === 'ArrowLeft') return 'moveLeft'
+  if (event.key === 'ArrowRight') return 'moveRight'
+  if (event.key === 'ArrowUp') return 'moveUp'
+  if (event.key === 'ArrowDown') return 'moveDown'
+  if (event.key === 'Home') return 'rowStart'
+  if (event.key === 'End') return 'rowEnd'
+  if (event.key === 'PageUp') return 'pageUp'
+  if (event.key === 'PageDown') return 'pageDown'
+
+  // Excel-style data-entry navigation:
+  //   Enter      → move down (Shift+Enter → up)
+  //   Tab        → move right (Shift+Tab → left), wraps at row boundaries
+  //   Delete     → clear contents of the selected cells
+  //   F2 / Space → start editing the active cell
+  if (event.key === 'Enter') return event.shiftKey ? 'moveUp' : 'moveDown'
+  if (event.key === 'Tab') return event.shiftKey ? 'tabPrev' : 'tabNext'
+  if (event.key === 'F2') return 'activate'
+  if (event.key === ' ') return 'activate'
+  if (event.key === 'Delete') return 'clearCells'
+
+  return 'noop'
+}
+
+export function getNextActiveCell(
+  current: ActiveCellState,
+  intent: GridKeyboardIntent,
+  bounds: { maxRow: number; maxCol: number; pageSize?: number },
+): ActiveCellState {
+  const pageSize = bounds.pageSize ?? 10
+  let rowIndex = current.rowIndex
+  let colIndex = current.colIndex
+
+  if (intent === 'moveLeft') colIndex -= 1
+  if (intent === 'moveRight') colIndex += 1
+  if (intent === 'moveUp') rowIndex -= 1
+  if (intent === 'moveDown') rowIndex += 1
+  if (intent === 'tabNext') {
+    // Right one column; if we fall off the right edge, wrap to the
+    // first column of the next row - Excel's "data entry" behavior.
+    colIndex += 1
+    if (colIndex > bounds.maxCol) {
+      colIndex = 0
+      rowIndex += 1
+    }
+  }
+  if (intent === 'tabPrev') {
+    colIndex -= 1
+    if (colIndex < 0) {
+      colIndex = bounds.maxCol
+      rowIndex -= 1
+    }
+  }
+  if (intent === 'rowStart') colIndex = 0
+  if (intent === 'rowEnd') colIndex = bounds.maxCol
+  if (intent === 'gridStart') {
+    rowIndex = 0
+    colIndex = 0
+  }
+  if (intent === 'gridEnd') {
+    rowIndex = bounds.maxRow
+    colIndex = bounds.maxCol
+  }
+  if (intent === 'pageUp') rowIndex -= pageSize
+  if (intent === 'pageDown') rowIndex += pageSize
+
+  rowIndex = Math.min(Math.max(rowIndex, 0), Math.max(bounds.maxRow, 0))
+  colIndex = Math.min(Math.max(colIndex, 0), Math.max(bounds.maxCol, 0))
+  return {
+    rowIndex,
+    colIndex,
+    cellId: current.cellId,
+  }
+}

package/src/menus.ts

@@ -231,6 +231,7 @@ export function createMenus<
       x: clampMenuX(rect.right - 240, 240),
       y: rect.bottom + 4,
     };
+    ctx.columnMenuTab = "general";
     ctx.columnMenuFor = columnId;
   }
 

package/src/merge-objects.ts

@@ -1,48 +1,48 @@
-/**
- * Merges objects together while keeping their getters alive.
- * Taken from SolidJS:
- * https://github.com/solidjs/solid/blob/24abc825c0996fd2bc8c1de1491efe9a7e743aff/packages/solid/src/server/rendering.ts#L82-L115
- */
-export function mergeObjects<T>(source: T): T
-export function mergeObjects<T, U>(source: T, source1: U): T & U
-export function mergeObjects<T, U, V>(
-  source: T,
-  source1: U,
-  source2: V,
-): T & U & V
-export function mergeObjects<T, U, V, W>(
-  source: T,
-  source1: U,
-  source2: V,
-  source3: W,
-): T & U & V & W
-export function mergeObjects(...sources: any): any {
-  const target = {}
-
-  for (let source of sources) {
-    if (typeof source === 'function') source = source()
-
-    if (source) {
-      const descriptors = Object.getOwnPropertyDescriptors(source)
-
-      for (const key in descriptors) {
-        if (key in target) continue
-
-        Object.defineProperty(target, key, {
-          enumerable: true,
-          get() {
-            for (let i = sources.length - 1; i >= 0; i--) {
-              let scopedSource = sources[i]
-              if (typeof scopedSource === 'function') scopedSource = scopedSource()
-
-              const value = (scopedSource || {})[key]
-              if (value !== undefined) return value
-            }
-          },
-        })
-      }
-    }
-  }
-
-  return target
-}
+/**
+ * Merges objects together while keeping their getters alive.
+ * Taken from SolidJS:
+ * https://github.com/solidjs/solid/blob/24abc825c0996fd2bc8c1de1491efe9a7e743aff/packages/solid/src/server/rendering.ts#L82-L115
+ */
+export function mergeObjects<T>(source: T): T
+export function mergeObjects<T, U>(source: T, source1: U): T & U
+export function mergeObjects<T, U, V>(
+  source: T,
+  source1: U,
+  source2: V,
+): T & U & V
+export function mergeObjects<T, U, V, W>(
+  source: T,
+  source1: U,
+  source2: V,
+  source3: W,
+): T & U & V & W
+export function mergeObjects(...sources: any): any {
+  const target = {}
+
+  for (let source of sources) {
+    if (typeof source === 'function') source = source()
+
+    if (source) {
+      const descriptors = Object.getOwnPropertyDescriptors(source)
+
+      for (const key in descriptors) {
+        if (key in target) continue
+
+        Object.defineProperty(target, key, {
+          enumerable: true,
+          get() {
+            for (let i = sources.length - 1; i >= 0; i--) {
+              let scopedSource = sources[i]
+              if (typeof scopedSource === 'function') scopedSource = scopedSource()
+
+              const value = (scopedSource || {})[key]
+              if (value !== undefined) return value
+            }
+          },
+        })
+      }
+    }
+  }
+
+  return target
+}

package/src/render-component.ts

@@ -1,28 +1,28 @@
-import type { Component, ComponentProps, Snippet } from 'svelte'
-
-export class RenderComponentConfig<TComponent extends Component> {
-  constructor(
-    public component: TComponent,
-    public props?: ComponentProps<TComponent> | Record<string, never>,
-  ) {}
-}
-
-export class RenderSnippetConfig<TProps> {
-  constructor(
-    public snippet: Snippet<[TProps]>,
-    public params?: TProps,
-  ) {}
-}
-
-export const renderComponent = <
-  TComponent extends Component<any>,
-  TProps extends ComponentProps<TComponent>,
->(
-  component: TComponent,
-  props?: TProps,
-) => new RenderComponentConfig(component, props)
-
-export const renderSnippet = <TProps>(
-  snippet: Snippet<[TProps]>,
-  params?: TProps,
-) => new RenderSnippetConfig(snippet, params)
+import type { Component, ComponentProps, Snippet } from 'svelte'
+
+export class RenderComponentConfig<TComponent extends Component> {
+  constructor(
+    public component: TComponent,
+    public props?: ComponentProps<TComponent> | Record<string, never>,
+  ) {}
+}
+
+export class RenderSnippetConfig<TProps> {
+  constructor(
+    public snippet: Snippet<[TProps]>,
+    public params?: TProps,
+  ) {}
+}
+
+export const renderComponent = <
+  TComponent extends Component<any>,
+  TProps extends ComponentProps<TComponent>,
+>(
+  component: TComponent,
+  props?: TProps,
+) => new RenderComponentConfig(component, props)
+
+export const renderSnippet = <TProps>(
+  snippet: Snippet<[TProps]>,
+  params?: TProps,
+) => new RenderSnippetConfig(snippet, params)

package/src/row-drag.test.ts

@@ -0,0 +1,168 @@
+/**
+ * Unit tests for the managed row-drag handlers produced by createRowDrag(ctx).
+ *
+ * createRowDrag is a factory closing over a mutable `ctx` handle and a
+ * module-level singleton "bus" that carries the dragged row between grids.
+ * Because the bus is shared, we can create TWO fake ctxs (two grids) and drive
+ * a genuine grid-to-grid move without mounting anything.
+ */
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { createRowDrag, rowDropZone } from './row-drag'
+
+type AnyCtx = Record<string, any>
+type Task = { id: number; title: string }
+
+function makeCtx(rows: Task[], props: AnyCtx = {}): AnyCtx {
+  return {
+    props,
+    internalData: rows,
+    get allRows() {
+      // allRows tracks internalData order; each Row wraps `.original`.
+      return (this.internalData as Task[]).map((r) => ({ original: r }))
+    },
+    rowDragActive: false,
+    rowDropIndex: null,
+    rowDropSide: null,
+  }
+}
+
+function fakeEvent(clientY = 0, rectTop = 0, rectHeight = 40): any {
+  return {
+    clientY,
+    preventDefault: vi.fn(),
+    stopPropagation: vi.fn(),
+    dataTransfer: { setData: vi.fn(), effectAllowed: '', dropEffect: '' },
+    currentTarget: {
+      getBoundingClientRect: () => ({ top: rectTop, height: rectHeight, bottom: rectTop + rectHeight, left: 0 }),
+    },
+  }
+}
+
+const P = { rowDragManaged: true }
+
+describe('createRowDrag - same-grid reorder', () => {
+  it('moves a dragged row after the drop target', () => {
+    const rows: Task[] = [
+      { id: 1, title: 'a' },
+      { id: 2, title: 'b' },
+      { id: 3, title: 'c' },
+      { id: 4, title: 'd' },
+    ]
+    const ctx = makeCtx(rows, { ...P })
+    const h = createRowDrag(ctx)
+
+    h.onRowDragStart(fakeEvent(), 0) // drag "a"
+    ctx.rowDropSide = 'after'
+    h.onRowDrop(fakeEvent(), 2) // drop after "c"
+
+    expect((ctx.internalData as Task[]).map((r) => r.title)).toEqual(['b', 'c', 'a', 'd'])
+  })
+
+  it('drops before the target when the side is "before"', () => {
+    const rows: Task[] = [
+      { id: 1, title: 'a' },
+      { id: 2, title: 'b' },
+      { id: 3, title: 'c' },
+    ]
+    const ctx = makeCtx(rows, { ...P })
+    const h = createRowDrag(ctx)
+    h.onRowDragStart(fakeEvent(), 2) // drag "c"
+    ctx.rowDropSide = 'before'
+    h.onRowDrop(fakeEvent(), 0) // before "a"
+    expect((ctx.internalData as Task[]).map((r) => r.title)).toEqual(['c', 'a', 'b'])
+  })
+})
+
+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' })
+    const b = makeCtx([{ id: 9, title: 'b1' }], { ...P, rowDragGroup: 'g', onRowDragEnd: vi.fn() })
+    const ha = createRowDrag(a)
+    const hb = createRowDrag(b)
+
+    ha.onRowDragStart(fakeEvent(), 1) // drag "a2" out of grid A
+    b.rowDropSide = 'before'
+    hb.onRowDrop(fakeEvent(), 0) // drop onto grid B before "b1"
+
+    expect((a.internalData as Task[]).map((r) => r.title)).toEqual(['a1'])
+    expect((b.internalData as Task[]).map((r) => r.title)).toEqual(['a2', 'b1'])
+    expect(b.props.onRowDragEnd).toHaveBeenCalledWith(
+      expect.objectContaining({ sameGrid: false, toIndex: 0, row: expect.objectContaining({ title: 'a2' }) }),
+    )
+  })
+
+  it('does NOT accept a drop when groups differ', () => {
+    const a = makeCtx([{ id: 1, title: 'a1' }, { id: 2, title: 'a2' }], { ...P, rowDragGroup: 'g' })
+    const b = makeCtx([{ id: 9, title: 'b1' }], { ...P, rowDragGroup: 'other' })
+    const ha = createRowDrag(a)
+    const hb = createRowDrag(b)
+
+    ha.onRowDragStart(fakeEvent(), 0)
+    const ev = fakeEvent()
+    hb.onRowDragOver(ev, 0)
+    expect(ev.preventDefault).not.toHaveBeenCalled() // over rejected
+    hb.onRowDrop(fakeEvent(), 0)
+    expect((b.internalData as Task[]).map((r) => r.title)).toEqual(['b1']) // unchanged
+    expect((a.internalData as Task[]).length).toBe(2) // source untouched
+  })
+
+  it('appends to the target on an empty-space (container) drop', () => {
+    const a = makeCtx([{ id: 1, title: 'a1' }, { id: 2, title: 'a2' }], { ...P, rowDragGroup: 'g' })
+    const b = makeCtx([{ id: 9, title: 'b1' }], { ...P, rowDragGroup: 'g' })
+    const ha = createRowDrag(a)
+    const hb = createRowDrag(b)
+    ha.onRowDragStart(fakeEvent(), 0) // drag "a1"
+    hb.onRowsContainerDrop(fakeEvent())
+    expect((b.internalData as Task[]).map((r) => r.title)).toEqual(['b1', 'a1'])
+    expect((a.internalData as Task[]).map((r) => r.title)).toEqual(['a2'])
+  })
+})
+
+describe('createRowDrag - disabled', () => {
+  it('is inert when rowDragManaged is off', () => {
+    const ctx = makeCtx([{ id: 1, title: 'a' }, { id: 2, title: 'b' }], {})
+    const h = createRowDrag(ctx)
+    h.onRowDragStart(fakeEvent(), 0)
+    ctx.rowDropSide = 'after'
+    h.onRowDrop(fakeEvent(), 1)
+    expect((ctx.internalData as Task[]).map((r) => r.title)).toEqual(['a', 'b'])
+  })
+})
+
+describe('rowDropZone (external drop target)', () => {
+  function dropOn(el: HTMLElement) {
+    const ev = new Event('drop', { bubbles: true, cancelable: true })
+    el.dispatchEvent(ev)
+  }
+
+  it('removes the dragged row from its source grid and calls onDrop', () => {
+    const a = makeCtx([{ id: 1, title: 'a1' }, { id: 2, title: 'a2' }], { ...P, rowDragGroup: 'g' })
+    const ha = createRowDrag(a)
+    ha.onRowDragStart(fakeEvent(), 0) // start dragging "a1"
+
+    const el = document.createElement('div')
+    const dropped: any[] = []
+    const action = rowDropZone(el, { group: 'g', onDrop: (e) => dropped.push(e) })
+    dropOn(el)
+
+    expect(dropped.length).toBe(1)
+    expect(dropped[0].row.title).toBe('a1')
+    expect((a.internalData as Task[]).map((r) => r.title)).toEqual(['a2']) // removed from source
+    action.destroy()
+  })
+
+  it('ignores drops when the group does not match', () => {
+    const a = makeCtx([{ id: 1, title: 'a1' }], { ...P, rowDragGroup: 'g' })
+    const ha = createRowDrag(a)
+    ha.onRowDragStart(fakeEvent(), 0)
+
+    const el = document.createElement('div')
+    const dropped: any[] = []
+    const action = rowDropZone(el, { group: 'other', onDrop: (e) => dropped.push(e) })
+    dropOn(el)
+
+    expect(dropped.length).toBe(0)
+    expect((a.internalData as Task[]).length).toBe(1) // untouched
+    action.destroy()
+  })
+})