@svgrid/grid 1.1.1 → 1.2.1

package/src/svgrid.features.test.ts

@@ -1,157 +1,157 @@
-import { describe, expect, it } from 'vitest'
-import {
-  columnFilteringFeature,
-  columnGroupingFeature,
-  createCoreRowModel,
-  createExpandedRowModel,
-  createFilteredRowModel,
-  createGroupedRowModel,
-  createPaginatedRowModel,
-  createSortedRowModel,
-  createSvGrid,
-  rowExpandingFeature,
-  rowSelectionFeature,
-  rowSortingFeature,
-  sortFns,
-  subscribeSvGrid,
-  tableFeatures,
-} from './index'
-import type { ColumnDef } from './index'
-
-type Person = { firstName: string; age: number; status?: string }
-
-describe('SvGrid features', () => {
-  it('supports sorting and pagination row model pipeline', () => {
-    const _features = tableFeatures({
-      columnFilteringFeature,
-      columnGroupingFeature,
-      rowExpandingFeature,
-      rowSelectionFeature,
-      rowSortingFeature,
-    })
-    const columns: Array<ColumnDef<typeof _features, Person>> = [
-      { field: 'firstName' },
-      { field: 'age' },
-    ]
-    const data: Array<Person> = [
-      { firstName: 'John', age: 40, status: 'pending' },
-      { firstName: 'Amy', age: 22, status: 'active' },
-      { firstName: 'Kate', age: 31, status: 'active' },
-    ]
-
-    const grid = createSvGrid({
-      _features,
-      _rowModels: {
-        coreRowModel: createCoreRowModel(),
-        filteredRowModel: createFilteredRowModel(),
-        sortedRowModel: createSortedRowModel(sortFns),
-        groupedRowModel: createGroupedRowModel(),
-        expandedRowModel: createExpandedRowModel(),
-        paginatedRowModel: createPaginatedRowModel(),
-      },
-      columns,
-      data,
-      state: {
-        columnFilters: [{ id: 'firstName', value: 'a', fn: 'includesString' }],
-        grouping: ['status'],
-        expanded: { group_status_active: true },
-        sorting: [{ id: 'age', desc: false }],
-        pagination: { pageIndex: 0, pageSize: 2 },
-      },
-    })
-
-    const rows = grid.getRowModel().rows
-    expect(rows).toHaveLength(1)
-    expect(rows[0]?.id).toContain('group_status_')
-  })
-
-  it('supports row selection and expansion toggles', () => {
-    const _features = tableFeatures({
-      rowExpandingFeature,
-      rowSelectionFeature,
-    })
-    const columns: Array<ColumnDef<typeof _features, Person>> = [
-      { field: 'firstName' },
-    ]
-    const data: Array<Person> = [
-      { firstName: 'Amy', age: 22 },
-    ]
-    const grid = createSvGrid({
-      _features,
-      _rowModels: {
-        coreRowModel: createCoreRowModel(),
-      },
-      columns,
-      data,
-    })
-    const row = grid.getRowModel().rows[0]
-    expect(row).toBeDefined()
-    row?.toggleSelected()
-    row?.toggleExpanded()
-    expect(row?.getIsSelected()).toBe(true)
-    expect(row?.getIsExpanded()).toBe(true)
-  })
-
-  it('supports selector subscriptions with stable shape', () => {
-    const _features = tableFeatures({ rowSortingFeature })
-    const grid = createSvGrid({
-      _features,
-      _rowModels: {
-        coreRowModel: createCoreRowModel(),
-      },
-      columns: [{ field: 'firstName' }],
-      data: [{ firstName: 'Amy', age: 22 }],
-    })
-    const selected = subscribeSvGrid(grid, (state) => ({
-      sorting: state.sorting,
-      pageIndex: state.pagination?.pageIndex ?? 0,
-    }))
-    expect(selected.current.pageIndex).toBe(0)
-  })
-
-  it('supports active cell movement primitives', () => {
-    const _features = tableFeatures({ rowSortingFeature })
-    const grid = createSvGrid({
-      _features,
-      _rowModels: { coreRowModel: createCoreRowModel() },
-      columns: [
-        { field: 'firstName' },
-        { field: 'age' },
-      ],
-      data: [
-        { firstName: 'Amy', age: 22 },
-        { firstName: 'John', age: 40 },
-      ],
-    })
-
-    grid.moveActiveCell({ rowDelta: 1, colDelta: 1 })
-    expect(grid.getState().activeCell.rowIndex).toBe(1)
-    expect(grid.getState().activeCell.colIndex).toBe(1)
-  })
-
-  it('supports multi-column sorting clauses', () => {
-    const _features = tableFeatures({ rowSortingFeature })
-    const grid = createSvGrid({
-      _features,
-      _rowModels: {
-        coreRowModel: createCoreRowModel(),
-        sortedRowModel: createSortedRowModel(sortFns),
-      },
-      columns: [
-        { field: 'firstName' },
-        { field: 'age', editorType: 'number' },
-      ],
-      data: [
-        { firstName: 'Amy', age: 20 },
-        { firstName: 'Amy', age: 30 },
-        { firstName: 'Bob', age: 10 },
-      ],
-      state: { sorting: [{ id: 'firstName', desc: false }, { id: 'age', desc: true }] },
-    })
-
-    const rows = grid.getRowModel().rows
-    expect(rows[0]?.original.firstName).toBe('Amy')
-    expect(rows[0]?.original.age).toBe(30)
-    expect(rows[1]?.original.age).toBe(20)
-  })
-})
+import { describe, expect, it } from 'vitest'
+import {
+  columnFilteringFeature,
+  columnGroupingFeature,
+  createCoreRowModel,
+  createExpandedRowModel,
+  createFilteredRowModel,
+  createGroupedRowModel,
+  createPaginatedRowModel,
+  createSortedRowModel,
+  createSvGrid,
+  rowExpandingFeature,
+  rowSelectionFeature,
+  rowSortingFeature,
+  sortFns,
+  subscribeSvGrid,
+  tableFeatures,
+} from './index'
+import type { ColumnDef } from './index'
+
+type Person = { firstName: string; age: number; status?: string }
+
+describe('SvGrid features', () => {
+  it('supports sorting and pagination row model pipeline', () => {
+    const _features = tableFeatures({
+      columnFilteringFeature,
+      columnGroupingFeature,
+      rowExpandingFeature,
+      rowSelectionFeature,
+      rowSortingFeature,
+    })
+    const columns: Array<ColumnDef<typeof _features, Person>> = [
+      { field: 'firstName' },
+      { field: 'age' },
+    ]
+    const data: Array<Person> = [
+      { firstName: 'John', age: 40, status: 'pending' },
+      { firstName: 'Amy', age: 22, status: 'active' },
+      { firstName: 'Kate', age: 31, status: 'active' },
+    ]
+
+    const grid = createSvGrid({
+      _features,
+      _rowModels: {
+        coreRowModel: createCoreRowModel(),
+        filteredRowModel: createFilteredRowModel(),
+        sortedRowModel: createSortedRowModel(sortFns),
+        groupedRowModel: createGroupedRowModel(),
+        expandedRowModel: createExpandedRowModel(),
+        paginatedRowModel: createPaginatedRowModel(),
+      },
+      columns,
+      data,
+      state: {
+        columnFilters: [{ id: 'firstName', value: 'a', fn: 'includesString' }],
+        grouping: ['status'],
+        expanded: { group_status_active: true },
+        sorting: [{ id: 'age', desc: false }],
+        pagination: { pageIndex: 0, pageSize: 2 },
+      },
+    })
+
+    const rows = grid.getRowModel().rows
+    expect(rows).toHaveLength(1)
+    expect(rows[0]?.id).toContain('group_status_')
+  })
+
+  it('supports row selection and expansion toggles', () => {
+    const _features = tableFeatures({
+      rowExpandingFeature,
+      rowSelectionFeature,
+    })
+    const columns: Array<ColumnDef<typeof _features, Person>> = [
+      { field: 'firstName' },
+    ]
+    const data: Array<Person> = [
+      { firstName: 'Amy', age: 22 },
+    ]
+    const grid = createSvGrid({
+      _features,
+      _rowModels: {
+        coreRowModel: createCoreRowModel(),
+      },
+      columns,
+      data,
+    })
+    const row = grid.getRowModel().rows[0]
+    expect(row).toBeDefined()
+    row?.toggleSelected()
+    row?.toggleExpanded()
+    expect(row?.getIsSelected()).toBe(true)
+    expect(row?.getIsExpanded()).toBe(true)
+  })
+
+  it('supports selector subscriptions with stable shape', () => {
+    const _features = tableFeatures({ rowSortingFeature })
+    const grid = createSvGrid({
+      _features,
+      _rowModels: {
+        coreRowModel: createCoreRowModel(),
+      },
+      columns: [{ field: 'firstName' }],
+      data: [{ firstName: 'Amy', age: 22 }],
+    })
+    const selected = subscribeSvGrid(grid, (state) => ({
+      sorting: state.sorting,
+      pageIndex: state.pagination?.pageIndex ?? 0,
+    }))
+    expect(selected.current.pageIndex).toBe(0)
+  })
+
+  it('supports active cell movement primitives', () => {
+    const _features = tableFeatures({ rowSortingFeature })
+    const grid = createSvGrid({
+      _features,
+      _rowModels: { coreRowModel: createCoreRowModel() },
+      columns: [
+        { field: 'firstName' },
+        { field: 'age' },
+      ],
+      data: [
+        { firstName: 'Amy', age: 22 },
+        { firstName: 'John', age: 40 },
+      ],
+    })
+
+    grid.moveActiveCell({ rowDelta: 1, colDelta: 1 })
+    expect(grid.getState().activeCell.rowIndex).toBe(1)
+    expect(grid.getState().activeCell.colIndex).toBe(1)
+  })
+
+  it('supports multi-column sorting clauses', () => {
+    const _features = tableFeatures({ rowSortingFeature })
+    const grid = createSvGrid({
+      _features,
+      _rowModels: {
+        coreRowModel: createCoreRowModel(),
+        sortedRowModel: createSortedRowModel(sortFns),
+      },
+      columns: [
+        { field: 'firstName' },
+        { field: 'age', editorType: 'number' },
+      ],
+      data: [
+        { firstName: 'Amy', age: 20 },
+        { firstName: 'Amy', age: 30 },
+        { firstName: 'Bob', age: 10 },
+      ],
+      state: { sorting: [{ id: 'firstName', desc: false }, { id: 'age', desc: true }] },
+    })
+
+    const rows = grid.getRowModel().rows
+    expect(rows[0]?.original.firstName).toBe('Amy')
+    expect(rows[0]?.original.age).toBe(30)
+    expect(rows[1]?.original.age).toBe(20)
+  })
+})

package/src/svgrid.wrapper.test.ts

@@ -1,17 +1,17 @@
-import { readFileSync } from 'node:fs'
-import { resolve } from 'node:path'
-import { describe, expect, it } from 'vitest'
-import SvGrid from './SvGrid.svelte'
-
-describe('SvGrid wrapper', () => {
-  it('exports a production wrapper component', () => {
-    expect(SvGrid).toBeDefined()
-  })
-
-  it('contains full-wrapper controls and aria-activedescendant wiring', () => {
-    // The wrapper spans SvGrid.svelte plus its extracted sibling modules
-    // (types + pure helpers); read them together so these "contains X"
-    // assertions hold wherever the code physically lives.
+import { readFileSync } from 'node:fs'
+import { resolve } from 'node:path'
+import { describe, expect, it } from 'vitest'
+import SvGrid from './SvGrid.svelte'
+
+describe('SvGrid wrapper', () => {
+  it('exports a production wrapper component', () => {
+    expect(SvGrid).toBeDefined()
+  })
+
+  it('contains full-wrapper controls and aria-activedescendant wiring', () => {
+    // The wrapper spans SvGrid.svelte plus its extracted sibling modules
+    // (types + pure helpers); read them together so these "contains X"
+    // assertions hold wherever the code physically lives.
     const source = [
       './SvGrid.svelte',
       './SvGrid.controller.svelte.ts',
@@ -33,29 +33,29 @@ describe('SvGrid wrapper', () => {
       './keyboard-handlers.ts',
       './scroll-sync.ts',
       './features.ts',
-    ]
-      .map((p) => readFileSync(resolve(__dirname, p), 'utf-8'))
-      .join('\n')
-    expect(source).toContain('Filter all rows')
-    expect(source).toContain('Previous')
-    expect(source).toContain('role="status"')
-    expect(source).toContain('role="alert"')
-    expect(source).toContain('activeDescendantId')
-    expect(source).toContain('getGridRootA11yProps')
-    expect(source).toContain('data-svgrid-header-col')
-    expect(source).toContain('data-svgrid-row')
-    expect(source).toContain('createSvelteVirtualizer')
-    expect(source).toContain('props.virtualization ?? true')
-    expect(source).toContain('virtualizer.getVirtualItems()')
-    expect(source).toContain('createColumnVirtualizer')
-    expect(source).toContain('data-selected-range')
-    expect(source).toContain('enableInlineEditing')
-    expect(source).toContain('showFilterMenu')
-    expect(source).toContain('<tfoot')
-    expect(source).toContain('editorType === "number"')
-    expect(source).toContain('editorType === "date"')
-    expect(source).toContain('editorType === "checkbox"')
-    expect(source).toContain('applyExcelFilter')
-    expect(source).toContain('showFilterRow')
-  })
-})
+    ]
+      .map((p) => readFileSync(resolve(__dirname, p), 'utf-8'))
+      .join('\n')
+    expect(source).toContain('Filter all rows')
+    expect(source).toContain('Previous')
+    expect(source).toContain('role="status"')
+    expect(source).toContain('role="alert"')
+    expect(source).toContain('activeDescendantId')
+    expect(source).toContain('getGridRootA11yProps')
+    expect(source).toContain('data-svgrid-header-col')
+    expect(source).toContain('data-svgrid-row')
+    expect(source).toContain('createSvelteVirtualizer')
+    expect(source).toContain('props.virtualization ?? true')
+    expect(source).toContain('virtualizer.getVirtualItems()')
+    expect(source).toContain('createColumnVirtualizer')
+    expect(source).toContain('data-selected-range')
+    expect(source).toContain('enableInlineEditing')
+    expect(source).toContain('showFilterMenu')
+    expect(source).toContain('<tfoot')
+    expect(source).toContain('editorType === "number"')
+    expect(source).toContain('editorType === "date"')
+    expect(source).toContain('editorType === "checkbox"')
+    expect(source).toContain('applyExcelFilter')
+    expect(source).toContain('showFilterRow')
+  })
+})

package/src/virtualization/column-virtualizer.test.ts

@@ -1,27 +1,27 @@
-import { describe, expect, it } from 'vitest'
-import { createColumnVirtualizer } from './column-virtualizer'
-
-describe('column virtualizer', () => {
-  it('computes horizontal window', () => {
-    const v = createColumnVirtualizer({
-      count: 1000,
-      viewportWidth: 700,
-      overscan: 3,
-      estimateSize: () => 140,
-    })
-    const items = v.getVirtualItems()
-    expect(items[0]?.index).toBe(0)
-    expect(items.length).toBeGreaterThan(0)
-  })
-
-  it('updates indices on horizontal scroll', () => {
-    const v = createColumnVirtualizer({
-      count: 1000,
-      viewportWidth: 700,
-      estimateSize: () => 140,
-    })
-    v.setHorizontalOffset(2800)
-    const state = v.getState()
-    expect(state.startIndex).toBeGreaterThan(0)
-  })
-})
+import { describe, expect, it } from 'vitest'
+import { createColumnVirtualizer } from './column-virtualizer'
+
+describe('column virtualizer', () => {
+  it('computes horizontal window', () => {
+    const v = createColumnVirtualizer({
+      count: 1000,
+      viewportWidth: 700,
+      overscan: 3,
+      estimateSize: () => 140,
+    })
+    const items = v.getVirtualItems()
+    expect(items[0]?.index).toBe(0)
+    expect(items.length).toBeGreaterThan(0)
+  })
+
+  it('updates indices on horizontal scroll', () => {
+    const v = createColumnVirtualizer({
+      count: 1000,
+      viewportWidth: 700,
+      estimateSize: () => 140,
+    })
+    v.setHorizontalOffset(2800)
+    const state = v.getState()
+    expect(state.startIndex).toBeGreaterThan(0)
+  })
+})

package/src/virtualization/column-virtualizer.ts

@@ -1,30 +1,30 @@
-import { createVirtualizer } from './virtualizer'
-
-export type ColumnSizeEstimator = (index: number) => number
-
-export function createColumnVirtualizer(input: {
-  count: number
-  viewportWidth: number
-  scrollOffset?: number
-  overscan?: number
-  /** Either a uniform size (number) or a per-column size function. */
-  estimateSize?: number | ColumnSizeEstimator
-}) {
-  const virtualizer = createVirtualizer({
-    count: input.count,
-    estimateSize: input.estimateSize ?? 140,
-    viewportHeight: input.viewportWidth,
-    scrollOffset: input.scrollOffset ?? 0,
-    overscan: input.overscan ?? 4,
-  })
-
-  return {
-    ...virtualizer,
-    setViewportWidth(viewportWidth: number) {
-      virtualizer.setViewportHeight(viewportWidth)
-    },
-    setHorizontalOffset(scrollOffset: number) {
-      virtualizer.setScrollOffset(scrollOffset)
-    },
-  }
-}
+import { createVirtualizer } from './virtualizer'
+
+export type ColumnSizeEstimator = (index: number) => number
+
+export function createColumnVirtualizer(input: {
+  count: number
+  viewportWidth: number
+  scrollOffset?: number
+  overscan?: number
+  /** Either a uniform size (number) or a per-column size function. */
+  estimateSize?: number | ColumnSizeEstimator
+}) {
+  const virtualizer = createVirtualizer({
+    count: input.count,
+    estimateSize: input.estimateSize ?? 140,
+    viewportHeight: input.viewportWidth,
+    scrollOffset: input.scrollOffset ?? 0,
+    overscan: input.overscan ?? 4,
+  })
+
+  return {
+    ...virtualizer,
+    setViewportWidth(viewportWidth: number) {
+      virtualizer.setViewportHeight(viewportWidth)
+    },
+    setHorizontalOffset(scrollOffset: number) {
+      virtualizer.setScrollOffset(scrollOffset)
+    },
+  }
+}

package/src/virtualization/svelte-virtualizer.svelte.ts

@@ -1,26 +1,26 @@
-import { createVirtualizer } from './virtualizer'
-import type { VirtualizerOptions } from './types'
-
-export function createSvelteVirtualizer(options: VirtualizerOptions) {
-  const virtualizer = createVirtualizer(options)
-  let version = $state(0)
-
-  virtualizer.subscribe(() => {
-    version += 1
-  })
-
-  return {
-    get version() {
-      return version
-    },
-    setOptions: virtualizer.setOptions,
-    setScrollOffset: virtualizer.setScrollOffset,
-    setViewportHeight: virtualizer.setViewportHeight,
-    scrollToIndex: virtualizer.scrollToIndex,
-    getVirtualItems: virtualizer.getVirtualItems,
-    getTotalSize: virtualizer.getTotalSize,
-    getOffsetForIndex: virtualizer.getOffsetForIndex,
-    getSizeForIndex: virtualizer.getSizeForIndex,
-    getState: virtualizer.getState,
-  }
-}
+import { createVirtualizer } from './virtualizer'
+import type { VirtualizerOptions } from './types'
+
+export function createSvelteVirtualizer(options: VirtualizerOptions) {
+  const virtualizer = createVirtualizer(options)
+  let version = $state(0)
+
+  virtualizer.subscribe(() => {
+    version += 1
+  })
+
+  return {
+    get version() {
+      return version
+    },
+    setOptions: virtualizer.setOptions,
+    setScrollOffset: virtualizer.setScrollOffset,
+    setViewportHeight: virtualizer.setViewportHeight,
+    scrollToIndex: virtualizer.scrollToIndex,
+    getVirtualItems: virtualizer.getVirtualItems,
+    getTotalSize: virtualizer.getTotalSize,
+    getOffsetForIndex: virtualizer.getOffsetForIndex,
+    getSizeForIndex: virtualizer.getSizeForIndex,
+    getState: virtualizer.getState,
+  }
+}

package/src/virtualization/types.ts

@@ -1,30 +1,30 @@
-export type VirtualItem = {
-  index: number
-  start: number
-  size: number
-  end: number
-  key: string
-}
-
-export type VirtualizerOptions = {
-  count: number
-  /**
-   * Per-item size. Pass a number for a uniform layout (fast path) or a
-   * function for variable sizing - the virtualizer will build cumulative
-   * offsets and use binary lookup to find the visible window. The function
-   * receives the item index and must return its pixel size.
-   */
-  estimateSize: number | ((index: number) => number)
-  overscan?: number
-  viewportHeight: number
-  scrollOffset?: number
-}
-
-export type VirtualizerState = {
-  items: Array<VirtualItem>
-  totalSize: number
-  startIndex: number
-  endIndex: number
-  scrollOffset: number
-  viewportHeight: number
-}
+export type VirtualItem = {
+  index: number
+  start: number
+  size: number
+  end: number
+  key: string
+}
+
+export type VirtualizerOptions = {
+  count: number
+  /**
+   * Per-item size. Pass a number for a uniform layout (fast path) or a
+   * function for variable sizing - the virtualizer will build cumulative
+   * offsets and use binary lookup to find the visible window. The function
+   * receives the item index and must return its pixel size.
+   */
+  estimateSize: number | ((index: number) => number)
+  overscan?: number
+  viewportHeight: number
+  scrollOffset?: number
+}
+
+export type VirtualizerState = {
+  items: Array<VirtualItem>
+  totalSize: number
+  startIndex: number
+  endIndex: number
+  scrollOffset: number
+  viewportHeight: number
+}