@svgrid/grid 2.2.33 → 2.4.0

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/list-nav.test.ts

@@ -1,49 +1,49 @@
-import { describe, expect, it } from 'vitest'
-import { enabledIndices, wrapMove } from './list-nav'
-
-describe('enabledIndices', () => {
-  it('lists every index when nothing is disabled', () => {
-    expect(enabledIndices(3)).toEqual([0, 1, 2])
-  })
-
-  it('skips indices the predicate marks disabled', () => {
-    expect(enabledIndices(5, (i) => i === 1 || i === 3)).toEqual([0, 2, 4])
-  })
-
-  it('returns an empty array for a zero count', () => {
-    expect(enabledIndices(0)).toEqual([])
-  })
-})
-
-describe('wrapMove', () => {
-  const list = [0, 2, 4] // e.g. indices 1 and 3 are disabled
-
-  it('moves forward to the next enabled index', () => {
-    expect(wrapMove(list, 2, 1)).toBe(4)
-  })
-
-  it('wraps past the end back to the head', () => {
-    expect(wrapMove(list, 4, 1)).toBe(0)
-  })
-
-  it('wraps before the head to the tail', () => {
-    expect(wrapMove(list, 0, -1)).toBe(4)
-  })
-
-  it('from an absent current, delta 1 lands on the first entry', () => {
-    expect(wrapMove(list, -1, 1)).toBe(0)
-  })
-
-  it('from an absent current, delta -1 lands on the last-but-one', () => {
-    expect(wrapMove(list, -1, -1)).toBe(2)
-  })
-
-  it('stays put for a single-entry list', () => {
-    expect(wrapMove([5], 5, 1)).toBe(5)
-    expect(wrapMove([5], 5, -1)).toBe(5)
-  })
-
-  it('returns -1 for an empty list', () => {
-    expect(wrapMove([], 0, 1)).toBe(-1)
-  })
-})
+import { describe, expect, it } from 'vitest'
+import { enabledIndices, wrapMove } from './list-nav'
+
+describe('enabledIndices', () => {
+  it('lists every index when nothing is disabled', () => {
+    expect(enabledIndices(3)).toEqual([0, 1, 2])
+  })
+
+  it('skips indices the predicate marks disabled', () => {
+    expect(enabledIndices(5, (i) => i === 1 || i === 3)).toEqual([0, 2, 4])
+  })
+
+  it('returns an empty array for a zero count', () => {
+    expect(enabledIndices(0)).toEqual([])
+  })
+})
+
+describe('wrapMove', () => {
+  const list = [0, 2, 4] // e.g. indices 1 and 3 are disabled
+
+  it('moves forward to the next enabled index', () => {
+    expect(wrapMove(list, 2, 1)).toBe(4)
+  })
+
+  it('wraps past the end back to the head', () => {
+    expect(wrapMove(list, 4, 1)).toBe(0)
+  })
+
+  it('wraps before the head to the tail', () => {
+    expect(wrapMove(list, 0, -1)).toBe(4)
+  })
+
+  it('from an absent current, delta 1 lands on the first entry', () => {
+    expect(wrapMove(list, -1, 1)).toBe(0)
+  })
+
+  it('from an absent current, delta -1 lands on the last-but-one', () => {
+    expect(wrapMove(list, -1, -1)).toBe(2)
+  })
+
+  it('stays put for a single-entry list', () => {
+    expect(wrapMove([5], 5, 1)).toBe(5)
+    expect(wrapMove([5], 5, -1)).toBe(5)
+  })
+
+  it('returns -1 for an empty list', () => {
+    expect(wrapMove([], 0, 1)).toBe(-1)
+  })
+})

package/src/list-nav.ts

@@ -1,29 +1,29 @@
-/**
- * list-nav - the pure, framework-free navigation math shared by the roving-focus
- * cores (createListbox, createPopoverSelect, createMenu). No runes, no DOM - just
- * index arithmetic, so it is unit-testable on its own and behaves identically
- * everywhere. The cores wrap these in `$state`.
- */
-
-/** Indices of items that can take roving focus / selection - i.e. the ones the
- *  caller does not mark disabled. `count` is the total item count; `isDisabled`
- *  is consulted per index (a separator counts as disabled to the caller). */
-export function enabledIndices(count: number, isDisabled?: (index: number) => boolean): number[] {
-  const out: number[] = []
-  for (let i = 0; i < count; i++) if (!isDisabled?.(i)) out.push(i)
-  return out
-}
-
-/**
- * The next index when moving `delta` steps through `list`, wrapping around the
- * ends. `current` need not be in `list` (it may sit on a disabled item): when it
- * is absent we start just before the head so `delta: 1` lands on the first entry
- * and `delta: -1` on the last-but-one - the same behaviour every existing core
- * already had. Returns `-1` for an empty list.
- */
-export function wrapMove(list: readonly number[], current: number, delta: number): number {
-  const len = list.length
-  if (len === 0) return -1
-  const pos = list.indexOf(current)
-  return list[(pos + delta + len) % len]!
-}
+/**
+ * list-nav - the pure, framework-free navigation math shared by the roving-focus
+ * cores (createListbox, createPopoverSelect, createMenu). No runes, no DOM - just
+ * index arithmetic, so it is unit-testable on its own and behaves identically
+ * everywhere. The cores wrap these in `$state`.
+ */
+
+/** Indices of items that can take roving focus / selection - i.e. the ones the
+ *  caller does not mark disabled. `count` is the total item count; `isDisabled`
+ *  is consulted per index (a separator counts as disabled to the caller). */
+export function enabledIndices(count: number, isDisabled?: (index: number) => boolean): number[] {
+  const out: number[] = []
+  for (let i = 0; i < count; i++) if (!isDisabled?.(i)) out.push(i)
+  return out
+}
+
+/**
+ * The next index when moving `delta` steps through `list`, wrapping around the
+ * ends. `current` need not be in `list` (it may sit on a disabled item): when it
+ * is absent we start just before the head so `delta: 1` lands on the first entry
+ * and `delta: -1` on the last-but-one - the same behaviour every existing core
+ * already had. Returns `-1` for an empty list.
+ */
+export function wrapMove(list: readonly number[], current: number, delta: number): number {
+  const len = list.length
+  if (len === 0) return -1
+  const pos = list.indexOf(current)
+  return list[(pos + delta + len) % len]!
+}

package/src/list-option.test.ts

@@ -1,56 +1,56 @@
-/**
- * Tests for the option-list helpers, focused on `flattenForVirtual` - the pure
- * model that lets the selection controls window a GROUPED list and mix row
- * heights, reusing the shared virtualizer.
- */
-import { describe, expect, it } from 'vitest'
-import { flattenForVirtual, normalizeOptions, type ListOption } from './list-option'
-
-describe('flattenForVirtual', () => {
-  it('passes an ungrouped list through as option rows (uniform height)', () => {
-    const options = normalizeOptions([1, 2, 3])
-    const m = flattenForVirtual(options, { rowHeight: 32 })
-    expect(m.hasGroups).toBe(false)
-    expect(m.entries).toHaveLength(3)
-    expect(m.entries.every((e) => e.type === 'option')).toBe(true)
-    expect(m.entries.map((e) => e.size)).toEqual([32, 32, 32])
-    // Ungrouped: option index === flat index.
-    expect(m.optionFlatIndex).toEqual([0, 1, 2])
-    expect(m.sizeAt(1)).toBe(32)
-  })
-
-  it('interleaves group heading rows and keeps option->flat mapping', () => {
-    const options: ListOption[] = [
-      { value: 'a', label: 'A', group: 'G1' },
-      { value: 'b', label: 'B', group: 'G1' },
-      { value: 'c', label: 'C', group: 'G2' },
-    ]
-    const m = flattenForVirtual(options, { rowHeight: 30, groupHeaderHeight: 20 })
-    expect(m.hasGroups).toBe(true)
-    // [G1 header, a, b, G2 header, c]
-    expect(m.entries.map((e) => e.type)).toEqual(['group', 'option', 'option', 'group', 'option'])
-    expect(m.entries.map((e) => e.size)).toEqual([20, 30, 30, 20, 30])
-    // Option indices 0,1,2 land at flat rows 1,2,4.
-    expect(m.optionFlatIndex).toEqual([1, 2, 4])
-    expect(m.entries[0]).toMatchObject({ type: 'group', label: 'G1' })
-  })
-
-  it('supports a per-option variable height function', () => {
-    const options = normalizeOptions(['x', 'y', 'z'])
-    const m = flattenForVirtual(options, { rowHeight: (_opt, i) => 20 + i * 10 })
-    expect(m.entries.map((e) => e.size)).toEqual([20, 30, 40])
-    expect(m.sizeAt(2)).toBe(40)
-  })
-
-  it('clamps non-positive heights to at least 1px', () => {
-    const options = normalizeOptions(['x'])
-    const m = flattenForVirtual(options, { rowHeight: 0, groupHeaderHeight: 0 })
-    expect(m.sizeAt(0)).toBe(1)
-  })
-
-  it('is empty for no options', () => {
-    const m = flattenForVirtual([], { rowHeight: 32 })
-    expect(m.entries).toEqual([])
-    expect(m.optionFlatIndex).toEqual([])
-  })
-})
+/**
+ * Tests for the option-list helpers, focused on `flattenForVirtual` - the pure
+ * model that lets the selection controls window a GROUPED list and mix row
+ * heights, reusing the shared virtualizer.
+ */
+import { describe, expect, it } from 'vitest'
+import { flattenForVirtual, normalizeOptions, type ListOption } from './list-option'
+
+describe('flattenForVirtual', () => {
+  it('passes an ungrouped list through as option rows (uniform height)', () => {
+    const options = normalizeOptions([1, 2, 3])
+    const m = flattenForVirtual(options, { rowHeight: 32 })
+    expect(m.hasGroups).toBe(false)
+    expect(m.entries).toHaveLength(3)
+    expect(m.entries.every((e) => e.type === 'option')).toBe(true)
+    expect(m.entries.map((e) => e.size)).toEqual([32, 32, 32])
+    // Ungrouped: option index === flat index.
+    expect(m.optionFlatIndex).toEqual([0, 1, 2])
+    expect(m.sizeAt(1)).toBe(32)
+  })
+
+  it('interleaves group heading rows and keeps option->flat mapping', () => {
+    const options: ListOption[] = [
+      { value: 'a', label: 'A', group: 'G1' },
+      { value: 'b', label: 'B', group: 'G1' },
+      { value: 'c', label: 'C', group: 'G2' },
+    ]
+    const m = flattenForVirtual(options, { rowHeight: 30, groupHeaderHeight: 20 })
+    expect(m.hasGroups).toBe(true)
+    // [G1 header, a, b, G2 header, c]
+    expect(m.entries.map((e) => e.type)).toEqual(['group', 'option', 'option', 'group', 'option'])
+    expect(m.entries.map((e) => e.size)).toEqual([20, 30, 30, 20, 30])
+    // Option indices 0,1,2 land at flat rows 1,2,4.
+    expect(m.optionFlatIndex).toEqual([1, 2, 4])
+    expect(m.entries[0]).toMatchObject({ type: 'group', label: 'G1' })
+  })
+
+  it('supports a per-option variable height function', () => {
+    const options = normalizeOptions(['x', 'y', 'z'])
+    const m = flattenForVirtual(options, { rowHeight: (_opt, i) => 20 + i * 10 })
+    expect(m.entries.map((e) => e.size)).toEqual([20, 30, 40])
+    expect(m.sizeAt(2)).toBe(40)
+  })
+
+  it('clamps non-positive heights to at least 1px', () => {
+    const options = normalizeOptions(['x'])
+    const m = flattenForVirtual(options, { rowHeight: 0, groupHeaderHeight: 0 })
+    expect(m.sizeAt(0)).toBe(1)
+  })
+
+  it('is empty for no options', () => {
+    const m = flattenForVirtual([], { rowHeight: 32 })
+    expect(m.entries).toEqual([])
+    expect(m.optionFlatIndex).toEqual([])
+  })
+})