@svgrid/grid 2.7.0 → 3.0.1

package/src/editor-registry.ts

@@ -1,122 +1,122 @@
-/**
- * editor-registry - the extension point that opens up the grid's cell editors.
- *
- * Historically SvGrid rendered cell editors through a fixed `{#if editorType ===
- * ...}` chain over a closed `CellEditorType` union. This registry lets any
- * component - a built-in `Sv*` editor or one you author - be mounted for a
- * column by name, wired to one uniform in-cell contract (change / commit /
- * cancel). Register once at module load:
- *
- * ```ts
- * import { registerCellEditor } from '@svgrid/grid'
- * import StarRating from './StarRating.svelte'
- * registerCellEditor('stars', StarRating)
- * // then: columns = [{ field: 'score', editorType: 'stars' }]
- * ```
- *
- * The registered component receives the {@link CellEditorContext} as props
- * (value + onChange/onCommit/onCancel), or a custom mapping via `props`.
- * Framework-light: this file only holds the Map + helpers; the grid does the
- * mounting.
- */
-import type { Component } from 'svelte'
-import type { EditorInteraction } from './editor-contract'
-
-/**
- * Context the grid hands a cell editor when it mounts one for an edit.
- *
- * Extends {@link EditorInteraction} - the shared commit / cancel / move contract
- * the `Sv*` editors are written against - and narrows the parts the grid always
- * supplies, so a registered component and a built-in editor speak the same
- * language. `onCommitAndMove`, `onRequestClose` and `inCell` come from the
- * contract and are always populated by the grid.
- */
-export type CellEditorContext<T = unknown> = Required<
-  Pick<EditorInteraction<T>, 'onCommit' | 'onCancel' | 'onCommitAndMove' | 'onRequestClose' | 'inCell'>
-> & {
-  /** The value currently being edited. */
-  value: T
-  /** Id of the row being edited. */
-  rowId: string
-  /** Id of the column being edited. */
-  columnId: string
-  /** Update the in-progress value WITHOUT ending the edit. */
-  onChange: (value: T) => void
-}
-
-/** How a registered component is mounted and wired for a cell edit. */
-export type CellEditorRegistration = {
-  /** The Svelte component to mount in the editing cell. */
-  component: Component<any>
-  /**
-   * Map the editing context to the component's props. Defaults to
-   * {@link defaultEditorProps} (value + onChange/onCommit/onCancel).
-   */
-  props?: (ctx: CellEditorContext) => Record<string, unknown>
-  /** Hint that the editor should open its popover immediately on mount. */
-  autoOpen?: boolean
-}
-
-const registry = new Map<string, CellEditorRegistration>()
-
-/**
- * Register a cell editor under `type`. Pass a component (uses the default prop
- * mapping) or a full {@link CellEditorRegistration} for custom prop mapping.
- * Re-registering the same type replaces it.
- */
-export function registerCellEditor(
-  type: string,
-  registration: CellEditorRegistration | Component<any>,
-): void {
-  registry.set(
-    type,
-    typeof registration === 'function' ? { component: registration } : registration,
-  )
-}
-
-/** Look up a registered cell editor by type. */
-export function getCellEditor(type: string): CellEditorRegistration | undefined {
-  return registry.get(type)
-}
-
-/** Whether a custom editor is registered for `type`. */
-export function hasCellEditor(type: string): boolean {
-  return registry.has(type)
-}
-
-/** Remove a registered cell editor. */
-export function unregisterCellEditor(type: string): void {
-  registry.delete(type)
-}
-
-/** All registered custom editor type names. */
-export function registeredCellEditorTypes(): string[] {
-  return [...registry.keys()]
-}
-
-/**
- * The default context → props mapping used when a registration has no `props`.
- * Passes the whole {@link EditorInteraction} surface, so an editor written
- * against the shared contract works when registered with no mapping at all.
- * Svelte ignores props a component doesn't declare, so the extra keys are inert
- * for a simple editor that only wants `value` + `onCommit`.
- */
-export function defaultEditorProps(ctx: CellEditorContext): Record<string, unknown> {
-  return {
-    value: ctx.value,
-    onChange: ctx.onChange,
-    onCommit: ctx.onCommit,
-    onCancel: ctx.onCancel,
-    onCommitAndMove: ctx.onCommitAndMove,
-    onRequestClose: ctx.onRequestClose,
-    inCell: ctx.inCell,
-  }
-}
-
-/** Resolve the props to spread onto a registered editor for a given context. */
-export function resolveEditorProps(
-  registration: CellEditorRegistration,
-  ctx: CellEditorContext,
-): Record<string, unknown> {
-  return registration.props ? registration.props(ctx) : defaultEditorProps(ctx)
-}
+/**
+ * editor-registry - the extension point that opens up the grid's cell editors.
+ *
+ * Historically SvGrid rendered cell editors through a fixed `{#if editorType ===
+ * ...}` chain over a closed `CellEditorType` union. This registry lets any
+ * component - a built-in `Sv*` editor or one you author - be mounted for a
+ * column by name, wired to one uniform in-cell contract (change / commit /
+ * cancel). Register once at module load:
+ *
+ * ```ts
+ * import { registerCellEditor } from '@svgrid/grid'
+ * import StarRating from './StarRating.svelte'
+ * registerCellEditor('stars', StarRating)
+ * // then: columns = [{ field: 'score', editorType: 'stars' }]
+ * ```
+ *
+ * The registered component receives the {@link CellEditorContext} as props
+ * (value + onChange/onCommit/onCancel), or a custom mapping via `props`.
+ * Framework-light: this file only holds the Map + helpers; the grid does the
+ * mounting.
+ */
+import type { Component } from 'svelte'
+import type { EditorInteraction } from './editor-contract'
+
+/**
+ * Context the grid hands a cell editor when it mounts one for an edit.
+ *
+ * Extends {@link EditorInteraction} - the shared commit / cancel / move contract
+ * the `Sv*` editors are written against - and narrows the parts the grid always
+ * supplies, so a registered component and a built-in editor speak the same
+ * language. `onCommitAndMove`, `onRequestClose` and `inCell` come from the
+ * contract and are always populated by the grid.
+ */
+export type CellEditorContext<T = unknown> = Required<
+  Pick<EditorInteraction<T>, 'onCommit' | 'onCancel' | 'onCommitAndMove' | 'onRequestClose' | 'inCell'>
+> & {
+  /** The value currently being edited. */
+  value: T
+  /** Id of the row being edited. */
+  rowId: string
+  /** Id of the column being edited. */
+  columnId: string
+  /** Update the in-progress value WITHOUT ending the edit. */
+  onChange: (value: T) => void
+}
+
+/** How a registered component is mounted and wired for a cell edit. */
+export type CellEditorRegistration = {
+  /** The Svelte component to mount in the editing cell. */
+  component: Component<any>
+  /**
+   * Map the editing context to the component's props. Defaults to
+   * {@link defaultEditorProps} (value + onChange/onCommit/onCancel).
+   */
+  props?: (ctx: CellEditorContext) => Record<string, unknown>
+  /** Hint that the editor should open its popover immediately on mount. */
+  autoOpen?: boolean
+}
+
+const registry = new Map<string, CellEditorRegistration>()
+
+/**
+ * Register a cell editor under `type`. Pass a component (uses the default prop
+ * mapping) or a full {@link CellEditorRegistration} for custom prop mapping.
+ * Re-registering the same type replaces it.
+ */
+export function registerCellEditor(
+  type: string,
+  registration: CellEditorRegistration | Component<any>,
+): void {
+  registry.set(
+    type,
+    typeof registration === 'function' ? { component: registration } : registration,
+  )
+}
+
+/** Look up a registered cell editor by type. */
+export function getCellEditor(type: string): CellEditorRegistration | undefined {
+  return registry.get(type)
+}
+
+/** Whether a custom editor is registered for `type`. */
+export function hasCellEditor(type: string): boolean {
+  return registry.has(type)
+}
+
+/** Remove a registered cell editor. */
+export function unregisterCellEditor(type: string): void {
+  registry.delete(type)
+}
+
+/** All registered custom editor type names. */
+export function registeredCellEditorTypes(): string[] {
+  return [...registry.keys()]
+}
+
+/**
+ * The default context → props mapping used when a registration has no `props`.
+ * Passes the whole {@link EditorInteraction} surface, so an editor written
+ * against the shared contract works when registered with no mapping at all.
+ * Svelte ignores props a component doesn't declare, so the extra keys are inert
+ * for a simple editor that only wants `value` + `onCommit`.
+ */
+export function defaultEditorProps(ctx: CellEditorContext): Record<string, unknown> {
+  return {
+    value: ctx.value,
+    onChange: ctx.onChange,
+    onCommit: ctx.onCommit,
+    onCancel: ctx.onCancel,
+    onCommitAndMove: ctx.onCommitAndMove,
+    onRequestClose: ctx.onRequestClose,
+    inCell: ctx.inCell,
+  }
+}
+
+/** Resolve the props to spread onto a registered editor for a given context. */
+export function resolveEditorProps(
+  registration: CellEditorRegistration,
+  ctx: CellEditorContext,
+): Record<string, unknown> {
+  return registration.props ? registration.props(ctx) : defaultEditorProps(ctx)
+}

package/src/export-data-api.test.ts

@@ -1,126 +1,126 @@
-/**
- * The free CSV / TSV / JSON export + copy-to-clipboard now on the grid API.
- * Mounts a real <SvGrid /> and drives api.exportCsv/exportTsv/exportJson/
- * copyToClipboard with download:false so nothing hits the DOM download path.
- */
-import { afterEach, describe, expect, it, vi } from 'vitest'
-import { mount, unmount } from 'svelte'
-import SvGrid from './SvGrid.svelte'
-import {
-  columnFilteringFeature,
-  rowSelectionFeature,
-  rowSortingFeature,
-  tableFeatures,
-} from './index'
-import type { ColumnDef, SvGridApi } from './index'
-
-type Row = { id: number; name: string; price: number; when: string }
-const rows: Row[] = [
-  { id: 1, name: 'ACME, Inc', price: 1234.5, when: '2026-03-04' },
-  { id: 2, name: 'Globex', price: 20, when: '2026-06-01' },
-]
-const columns: ColumnDef<any, Row>[] = [
-  { field: 'name', header: 'Company', width: 180 },
-  { field: 'price', header: 'Price', width: 120, align: 'right', format: { type: 'currency', currency: 'USD' } },
-  { field: 'when', header: 'Date', width: 120 }, // plain string, no format (deterministic)
-]
-
-const features = tableFeatures({ columnFilteringFeature, rowSortingFeature, rowSelectionFeature })
-
-function mountGrid(): Promise<{ api: SvGridApi<any, Row>; destroy: () => void }> {
-  return new Promise((resolve, reject) => {
-    const target = document.createElement('div')
-    document.body.appendChild(target)
-    let done = false
-    const app = mount(SvGrid, {
-      target,
-      props: {
-        data: rows.map((r) => ({ ...r })),
-        columns: columns.map((c) => ({ ...c })),
-        features,
-        getRowId: (r: Row) => String(r.id),
-        rowHeight: 34,
-        containerHeight: 400,
-        virtualization: false,
-        onApiReady(api: SvGridApi<any, Row>) {
-          done = true
-          resolve({ api, destroy: () => { unmount(app); target.remove() } })
-        },
-      } as any,
-    })
-    queueMicrotask(() => { if (!done) reject(new Error('onApiReady never fired')) })
-  })
-}
-
-let cleanup: (() => void) | null = null
-afterEach(() => { cleanup?.(); cleanup = null; vi.restoreAllMocks() })
-
-describe('free grid export: exportCsv', () => {
-  it('serializes visible rows with faithful formatted values + a BOM header', async () => {
-    const { api, destroy } = await mountGrid()
-    cleanup = destroy
-    const csv = await api.exportCsv({ download: false })
-    const lines = csv.replace(/^/, '').split('\r\n')
-    expect(lines[0]).toBe('Company,Price,Date')
-    // Formatted as on screen; the comma in "ACME, Inc" AND in "$1,234.50" both
-    // force RFC-4180 quoting.
-    expect(lines[1]).toBe('"ACME, Inc","$1,234.50",2026-03-04')
-    expect(csv.startsWith('')).toBe(true)
-  })
-
-  it('rawValues:true writes the underlying numbers/strings', async () => {
-    const { api, destroy } = await mountGrid()
-    cleanup = destroy
-    const csv = await api.exportCsv({ download: false, rawValues: true, bom: false })
-    const lines = csv.split('\r\n')
-    expect(lines[1]).toBe('"ACME, Inc",1234.5,2026-03-04')
-  })
-
-  it('honors a column subset in the given order', async () => {
-    const { api, destroy } = await mountGrid()
-    cleanup = destroy
-    const csv = await api.exportCsv({ download: false, bom: false, columns: ['when', 'name'] })
-    expect(csv.split('\r\n')[0]).toBe('Date,Company')
-  })
-})
-
-describe('free grid export: exportTsv / exportJson', () => {
-  it('exportTsv is tab-delimited', async () => {
-    const { api, destroy } = await mountGrid()
-    cleanup = destroy
-    const tsv = await api.exportTsv({ download: false, bom: false })
-    expect(tsv.split('\r\n')[0]).toBe('Company\tPrice\tDate')
-  })
-
-  it('exportJson emits an array of formatted records', async () => {
-    const { api, destroy } = await mountGrid()
-    cleanup = destroy
-    const json = JSON.parse(await api.exportJson({ download: false }))
-    expect(json).toHaveLength(2)
-    expect(json[0]).toEqual({ name: 'ACME, Inc', price: '$1,234.50', when: '2026-03-04' })
-  })
-})
-
-describe('free grid export: copyToClipboard', () => {
-  it('writes TSV to the clipboard by default', async () => {
-    const writeText = vi.fn().mockResolvedValue(undefined)
-    vi.stubGlobal('navigator', { clipboard: { writeText } })
-    const { api, destroy } = await mountGrid()
-    cleanup = destroy
-    const text = await api.copyToClipboard()
-    expect(writeText).toHaveBeenCalledOnce()
-    expect(text.split('\r\n')[0]).toBe('Company\tPrice\tDate')
-    expect(text.startsWith('')).toBe(false) // no BOM on clipboard
-  })
-
-  it('can copy a Markdown table', async () => {
-    const writeText = vi.fn().mockResolvedValue(undefined)
-    vi.stubGlobal('navigator', { clipboard: { writeText } })
-    const { api, destroy } = await mountGrid()
-    cleanup = destroy
-    const md = await api.copyToClipboard({ format: 'markdown' })
-    const lines = md.split('\n')
-    expect(lines[0]).toBe('| Company | Price | Date |')
-    expect(lines[1]).toBe('| --- | ---: | --- |') // Price is right-aligned
-  })
-})
+/**
+ * The free CSV / TSV / JSON export + copy-to-clipboard now on the grid API.
+ * Mounts a real <SvGrid /> and drives api.exportCsv/exportTsv/exportJson/
+ * copyToClipboard with download:false so nothing hits the DOM download path.
+ */
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { mount, unmount } from 'svelte'
+import SvGrid from './SvGrid.svelte'
+import {
+  columnFilteringFeature,
+  rowSelectionFeature,
+  rowSortingFeature,
+  tableFeatures,
+} from './index'
+import type { ColumnDef, SvGridApi } from './index'
+
+type Row = { id: number; name: string; price: number; when: string }
+const rows: Row[] = [
+  { id: 1, name: 'ACME, Inc', price: 1234.5, when: '2026-03-04' },
+  { id: 2, name: 'Globex', price: 20, when: '2026-06-01' },
+]
+const columns: ColumnDef<any, Row>[] = [
+  { field: 'name', header: 'Company', width: 180 },
+  { field: 'price', header: 'Price', width: 120, align: 'right', format: { type: 'currency', currency: 'USD' } },
+  { field: 'when', header: 'Date', width: 120 }, // plain string, no format (deterministic)
+]
+
+const features = tableFeatures({ columnFilteringFeature, rowSortingFeature, rowSelectionFeature })
+
+function mountGrid(): Promise<{ api: SvGridApi<any, Row>; destroy: () => void }> {
+  return new Promise((resolve, reject) => {
+    const target = document.createElement('div')
+    document.body.appendChild(target)
+    let done = false
+    const app = mount(SvGrid, {
+      target,
+      props: {
+        data: rows.map((r) => ({ ...r })),
+        columns: columns.map((c) => ({ ...c })),
+        features,
+        getRowId: (r: Row) => String(r.id),
+        rowHeight: 34,
+        containerHeight: 400,
+        virtualization: false,
+        onApiReady(api: SvGridApi<any, Row>) {
+          done = true
+          resolve({ api, destroy: () => { unmount(app); target.remove() } })
+        },
+      } as any,
+    })
+    queueMicrotask(() => { if (!done) reject(new Error('onApiReady never fired')) })
+  })
+}
+
+let cleanup: (() => void) | null = null
+afterEach(() => { cleanup?.(); cleanup = null; vi.restoreAllMocks() })
+
+describe('free grid export: exportCsv', () => {
+  it('serializes visible rows with faithful formatted values + a BOM header', async () => {
+    const { api, destroy } = await mountGrid()
+    cleanup = destroy
+    const csv = await api.exportCsv({ download: false })
+    const lines = csv.replace(/^/, '').split('\r\n')
+    expect(lines[0]).toBe('Company,Price,Date')
+    // Formatted as on screen; the comma in "ACME, Inc" AND in "$1,234.50" both
+    // force RFC-4180 quoting.
+    expect(lines[1]).toBe('"ACME, Inc","$1,234.50",2026-03-04')
+    expect(csv.startsWith('')).toBe(true)
+  })
+
+  it('rawValues:true writes the underlying numbers/strings', async () => {
+    const { api, destroy } = await mountGrid()
+    cleanup = destroy
+    const csv = await api.exportCsv({ download: false, rawValues: true, bom: false })
+    const lines = csv.split('\r\n')
+    expect(lines[1]).toBe('"ACME, Inc",1234.5,2026-03-04')
+  })
+
+  it('honors a column subset in the given order', async () => {
+    const { api, destroy } = await mountGrid()
+    cleanup = destroy
+    const csv = await api.exportCsv({ download: false, bom: false, columns: ['when', 'name'] })
+    expect(csv.split('\r\n')[0]).toBe('Date,Company')
+  })
+})
+
+describe('free grid export: exportTsv / exportJson', () => {
+  it('exportTsv is tab-delimited', async () => {
+    const { api, destroy } = await mountGrid()
+    cleanup = destroy
+    const tsv = await api.exportTsv({ download: false, bom: false })
+    expect(tsv.split('\r\n')[0]).toBe('Company\tPrice\tDate')
+  })
+
+  it('exportJson emits an array of formatted records', async () => {
+    const { api, destroy } = await mountGrid()
+    cleanup = destroy
+    const json = JSON.parse(await api.exportJson({ download: false }))
+    expect(json).toHaveLength(2)
+    expect(json[0]).toEqual({ name: 'ACME, Inc', price: '$1,234.50', when: '2026-03-04' })
+  })
+})
+
+describe('free grid export: copyToClipboard', () => {
+  it('writes TSV to the clipboard by default', async () => {
+    const writeText = vi.fn().mockResolvedValue(undefined)
+    vi.stubGlobal('navigator', { clipboard: { writeText } })
+    const { api, destroy } = await mountGrid()
+    cleanup = destroy
+    const text = await api.copyToClipboard()
+    expect(writeText).toHaveBeenCalledOnce()
+    expect(text.split('\r\n')[0]).toBe('Company\tPrice\tDate')
+    expect(text.startsWith('')).toBe(false) // no BOM on clipboard
+  })
+
+  it('can copy a Markdown table', async () => {
+    const writeText = vi.fn().mockResolvedValue(undefined)
+    vi.stubGlobal('navigator', { clipboard: { writeText } })
+    const { api, destroy } = await mountGrid()
+    cleanup = destroy
+    const md = await api.copyToClipboard({ format: 'markdown' })
+    const lines = md.split('\n')
+    expect(lines[0]).toBe('| Company | Price | Date |')
+    expect(lines[1]).toBe('| --- | ---: | --- |') // Price is right-aligned
+  })
+})