@svgrid/grid 2.6.21 → 2.7.0

package/src/editor-registry.grid.test.ts

@@ -1,144 +1,144 @@
-/**
- * Integration test for the cell-editor registry wiring in SvGrid.svelte: a
- * component registered via `registerCellEditor` is actually mounted when a cell
- * of that custom `editorType` starts editing.
- */
-import { afterEach, describe, expect, it, vi } from 'vitest'
-import { mount, unmount } from 'svelte'
-import SvGrid from './SvGrid.svelte'
-import SvRating from './SvRating.svelte'
-import {
-  registerCellEditor,
-  unregisterCellEditor,
-  createCoreRowModel,
-  createFilteredRowModel,
-  createPaginatedRowModel,
-  createSortedRowModel,
-  sortFns,
-  tableFeatures,
-  columnFilteringFeature,
-  rowSortingFeature,
-} from './index'
-import type { ColumnDef, SvGridApi } from './index'
-
-type Row = { id: number; name: string; score: number }
-
-const features = tableFeatures({ columnFilteringFeature, rowSortingFeature })
-const rows: Row[] = [
-  { id: 1, name: 'Ada', score: 3 },
-  { id: 2, name: 'Alan', score: 5 },
-]
-const cols: ColumnDef<typeof features, Row>[] = [
-  { field: 'name', header: 'Name', width: 200, editorType: 'text' },
-  // Custom editor type resolved through the registry:
-  { field: 'score', header: 'Score', width: 160, editorType: 'stars' },
-]
-
-
-function mountGrid() {
-  return new Promise<{ api: SvGridApi<typeof features, Row>; target: HTMLElement; destroy: () => void }>(
-    (res, rej) => {
-      const target = document.createElement('div')
-      document.body.appendChild(target)
-      const app = mount(SvGrid, {
-        target,
-        props: {
-          data: rows,
-          columns: cols,
-          features,
-          _rowModels: {
-            coreRowModel: createCoreRowModel(),
-            filteredRowModel: createFilteredRowModel(),
-            sortedRowModel: createSortedRowModel(sortFns),
-            paginatedRowModel: createPaginatedRowModel(),
-          },
-          rowHeight: 36,
-          containerHeight: 300,
-          virtualization: false,
-          enableInlineEditing: true,
-          onApiReady(api: SvGridApi<typeof features, Row>) {
-            res({ api, target, destroy: () => { unmount(app); target.remove() } })
-          },
-        } as any,
-      })
-      queueMicrotask(() => rej.length && undefined)
-    },
-  )
-}
-
-afterEach(() => {
-  unregisterCellEditor('stars')
-})
-
-describe('registry wiring in SvGrid', () => {
-  it('mounts a registered component when a custom-editorType cell edits', async () => {
-    registerCellEditor('stars', {
-      component: SvRating,
-      props: (ctx) => ({
-        value: ctx.value,
-        onChange: (v: number) => ctx.onCommit(v),
-      }),
-    })
-
-    const { api, target, destroy } = await mountGrid()
-    try {
-      api.startEditing(0, 'score')
-      // The editor UI is a lazy chunk (SvGridCellEditor), so a fixed number of
-      // ticks is a race - poll the same assertion until the import lands.
-      await vi.waitFor(() => {
-        // The registered SvRating editor is mounted in the editing overlay.
-        expect(target.querySelector('.sv-rating')).not.toBeNull()
-      })
-    } finally {
-      destroy()
-    }
-  })
-
-  it('hands the editor the full EditorInteraction contract, not a subset', async () => {
-    // The contract type used to be documented but never supplied: the registry
-    // passed only value/onChange/onCommit/onCancel, so an editor written against
-    // `EditorInteraction` (Tab-to-move, dismiss-without-commit, in-cell tuning)
-    // silently got undefined for half of it.
-    let seen: Record<string, unknown> = {}
-    registerCellEditor('stars', {
-      component: SvRating,
-      props: (ctx) => {
-        seen = ctx as unknown as Record<string, unknown>
-        return { value: ctx.value }
-      },
-    })
-
-    const { api, target, destroy } = await mountGrid()
-    try {
-      api.startEditing(0, 'score')
-      // SvGridCellEditor is a lazy chunk; poll until it has mounted and run the
-      // registration's props mapping.
-      await vi.waitFor(() => expect(typeof seen.onCommit).toBe('function'))
-      expect(typeof seen.onCommit).toBe('function')
-      expect(typeof seen.onCancel).toBe('function')
-      expect(typeof seen.onChange).toBe('function')
-      expect(typeof seen.onCommitAndMove).toBe('function')
-      expect(typeof seen.onRequestClose).toBe('function')
-      expect(seen.inCell).toBe(true)
-      expect(seen.rowId).toBeTruthy()
-      expect(seen.columnId).toBe('score')
-      void target
-    } finally {
-      destroy()
-    }
-  })
-
-  it('defaults to passing the whole contract when a registration has no props mapping', async () => {
-    // A registration with no `props` should still work for a contract-aware
-    // editor - that is the point of the default mapping.
-    registerCellEditor('stars', SvRating)
-    const { api, target, destroy } = await mountGrid()
-    try {
-      api.startEditing(0, 'score')
-      // SvGridCellEditor is a lazy chunk; poll rather than fixing a tick count.
-      await vi.waitFor(() => expect(target.querySelector('.sv-rating')).not.toBeNull())
-    } finally {
-      destroy()
-    }
-  })
-})
+/**
+ * Integration test for the cell-editor registry wiring in SvGrid.svelte: a
+ * component registered via `registerCellEditor` is actually mounted when a cell
+ * of that custom `editorType` starts editing.
+ */
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { mount, unmount } from 'svelte'
+import SvGrid from './SvGrid.svelte'
+import SvRating from './SvRating.svelte'
+import {
+  registerCellEditor,
+  unregisterCellEditor,
+  createCoreRowModel,
+  createFilteredRowModel,
+  createPaginatedRowModel,
+  createSortedRowModel,
+  sortFns,
+  tableFeatures,
+  columnFilteringFeature,
+  rowSortingFeature,
+} from './index'
+import type { ColumnDef, SvGridApi } from './index'
+
+type Row = { id: number; name: string; score: number }
+
+const features = tableFeatures({ columnFilteringFeature, rowSortingFeature })
+const rows: Row[] = [
+  { id: 1, name: 'Ada', score: 3 },
+  { id: 2, name: 'Alan', score: 5 },
+]
+const cols: ColumnDef<typeof features, Row>[] = [
+  { field: 'name', header: 'Name', width: 200, editorType: 'text' },
+  // Custom editor type resolved through the registry:
+  { field: 'score', header: 'Score', width: 160, editorType: 'stars' },
+]
+
+
+function mountGrid() {
+  return new Promise<{ api: SvGridApi<typeof features, Row>; target: HTMLElement; destroy: () => void }>(
+    (res, rej) => {
+      const target = document.createElement('div')
+      document.body.appendChild(target)
+      const app = mount(SvGrid, {
+        target,
+        props: {
+          data: rows,
+          columns: cols,
+          features,
+          _rowModels: {
+            coreRowModel: createCoreRowModel(),
+            filteredRowModel: createFilteredRowModel(),
+            sortedRowModel: createSortedRowModel(sortFns),
+            paginatedRowModel: createPaginatedRowModel(),
+          },
+          rowHeight: 36,
+          containerHeight: 300,
+          virtualization: false,
+          enableInlineEditing: true,
+          onApiReady(api: SvGridApi<typeof features, Row>) {
+            res({ api, target, destroy: () => { unmount(app); target.remove() } })
+          },
+        } as any,
+      })
+      queueMicrotask(() => rej.length && undefined)
+    },
+  )
+}
+
+afterEach(() => {
+  unregisterCellEditor('stars')
+})
+
+describe('registry wiring in SvGrid', () => {
+  it('mounts a registered component when a custom-editorType cell edits', async () => {
+    registerCellEditor('stars', {
+      component: SvRating,
+      props: (ctx) => ({
+        value: ctx.value,
+        onChange: (v: number) => ctx.onCommit(v),
+      }),
+    })
+
+    const { api, target, destroy } = await mountGrid()
+    try {
+      api.startEditing(0, 'score')
+      // The editor UI is a lazy chunk (SvGridCellEditor), so a fixed number of
+      // ticks is a race - poll the same assertion until the import lands.
+      await vi.waitFor(() => {
+        // The registered SvRating editor is mounted in the editing overlay.
+        expect(target.querySelector('.sv-rating')).not.toBeNull()
+      })
+    } finally {
+      destroy()
+    }
+  })
+
+  it('hands the editor the full EditorInteraction contract, not a subset', async () => {
+    // The contract type used to be documented but never supplied: the registry
+    // passed only value/onChange/onCommit/onCancel, so an editor written against
+    // `EditorInteraction` (Tab-to-move, dismiss-without-commit, in-cell tuning)
+    // silently got undefined for half of it.
+    let seen: Record<string, unknown> = {}
+    registerCellEditor('stars', {
+      component: SvRating,
+      props: (ctx) => {
+        seen = ctx as unknown as Record<string, unknown>
+        return { value: ctx.value }
+      },
+    })
+
+    const { api, target, destroy } = await mountGrid()
+    try {
+      api.startEditing(0, 'score')
+      // SvGridCellEditor is a lazy chunk; poll until it has mounted and run the
+      // registration's props mapping.
+      await vi.waitFor(() => expect(typeof seen.onCommit).toBe('function'))
+      expect(typeof seen.onCommit).toBe('function')
+      expect(typeof seen.onCancel).toBe('function')
+      expect(typeof seen.onChange).toBe('function')
+      expect(typeof seen.onCommitAndMove).toBe('function')
+      expect(typeof seen.onRequestClose).toBe('function')
+      expect(seen.inCell).toBe(true)
+      expect(seen.rowId).toBeTruthy()
+      expect(seen.columnId).toBe('score')
+      void target
+    } finally {
+      destroy()
+    }
+  })
+
+  it('defaults to passing the whole contract when a registration has no props mapping', async () => {
+    // A registration with no `props` should still work for a contract-aware
+    // editor - that is the point of the default mapping.
+    registerCellEditor('stars', SvRating)
+    const { api, target, destroy } = await mountGrid()
+    try {
+      api.startEditing(0, 'score')
+      // SvGridCellEditor is a lazy chunk; poll rather than fixing a tick count.
+      await vi.waitFor(() => expect(target.querySelector('.sv-rating')).not.toBeNull())
+    } finally {
+      destroy()
+    }
+  })
+})

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/editors/cell-editors.ts

@@ -35,6 +35,17 @@ export type CellEditorOption = { value: string | number; label: string; color?:
 export type ParseEditorValueOptions = {
   /** When true, list/chips return an array; otherwise a scalar. */
   multiple?: boolean
+  /**
+   * Keep a date as the plain `YYYY-MM-DD` string the user picked, instead of a
+   * full ISO timestamp. Set for `cellDataType: 'dateString'` columns, which
+   * exist precisely to hold ISO date strings.
+   *
+   * It is not only about shape. `new Date('2026-12-25').toISOString()` sends
+   * the value through UTC, so a local midnight becomes the previous or next
+   * day either side of the meridian - the stored DATE changes depending on
+   * where the user is sitting. Slicing the picked date avoids that entirely.
+   */
+  dateOnly?: boolean
 }
 
 /** Normalize the loose `editorOptions` ColumnDef prop into a uniform shape.
@@ -83,7 +94,22 @@ export function parseEditorValue(
     return s || '#000000'
   }
   if (type === 'date') {
-    const date = new Date(String(value))
+    const raw = String(value ?? '')
+    if (opts?.dateOnly) {
+      // Take the calendar date the editor produced as-is. It already arrives
+      // as `YYYY-MM-DD` (or that prefix on a datetime), so there is nothing to
+      // convert - and converting is exactly what shifts the day across a
+      // timezone boundary.
+      const match = /^(\d{4}-\d{2}-\d{2})/.exec(raw.trim())
+      if (match) return match[1]
+      const parsed = new Date(raw)
+      if (Number.isNaN(parsed.getTime())) return null
+      // A non-ISO input (a locale string) still has to become a date string.
+      // Use the LOCAL parts, so the day is the one the user saw.
+      const pad = (n: number) => String(n).padStart(2, '0')
+      return `${parsed.getFullYear()}-${pad(parsed.getMonth() + 1)}-${pad(parsed.getDate())}`
+    }
+    const date = new Date(raw)
     return Number.isNaN(date.getTime()) ? null : date.toISOString()
   }
   if (type === 'datetime') {