@svgrid/grid 2.6.22 → 2.6.23

package/src/editing.ts

@@ -17,6 +17,7 @@ import {
   toValueArray,
 } from "./SvGrid.helpers";
 import {
+  createDataIndexLookup,
   getColumnBaseValue,
   isGroupRow,
 } from "./cell-values";
@@ -156,6 +157,8 @@ export function createEditing<
       ctx.editingCell.value,
       {
         multiple: column?.columnDef.editorMultiple === true,
+        // A dateString column holds 'YYYY-MM-DD', not a timestamp.
+        dateOnly: column?.columnDef.cellDataType === "dateString",
       },
     );
     let oldValue: unknown = undefined;
@@ -416,18 +419,15 @@ export function createEditing<
       : Math.max(...lines.map((l) => l.split("\t").length));
 
     const next = ctx.internalData.slice() as Array<TData>;
+    const dataIndexOf = createDataIndexLookup(next);
     for (let i = 0; i < rowSpan; i += 1) {
       const targetRowIndex = startRow + i;
       const row = ctx.allRows[targetRowIndex];
       if (!row || isGroupRow(row)) continue;
-      // Map the visible row back to its index in the data array via row.id (default = String(index)).
-      const dataIndex = Number(row.id);
-      if (
-        !Number.isInteger(dataIndex) ||
-        dataIndex < 0 ||
-        dataIndex >= next.length
-      )
-        continue;
+      // Map the visible row back to its slot in the data array by identity -
+      // `row.id` is only the index under the default getRowId.
+      const dataIndex = dataIndexOf(row);
+      if (dataIndex < 0) continue;
       const originalRow = next[dataIndex];
       if (!originalRow) continue;
       const sourceCells = fillRange
@@ -443,7 +443,9 @@ export function createEditing<
         const editorType = (column.columnDef.editorType ??
           "text") as CellEditorType;
         const raw = fillRange ? lines[0]! : sourceCells?.[j] ?? "";
-        updated[column.columnDef.field] = parseEditorValue(editorType, raw);
+        updated[column.columnDef.field] = parseEditorValue(editorType, raw, {
+          dateOnly: column.columnDef.cellDataType === "dateString",
+        });
       }
       next[dataIndex] = updated as TData;
     }
@@ -530,6 +532,7 @@ export function createEditing<
       const editorType = (column.columnDef.editorType ?? "text") as CellEditorType;
       const parsed = parseEditorValue(editorType, fr.draft[column.id], {
         multiple: column.columnDef.editorMultiple === true,
+        dateOnly: column.columnDef.cellDataType === "dateString",
       });
       const oldValue = (row.original as Record<string, unknown>)[field];
       const parser = (column.columnDef as { valueParser?: (p: unknown) => unknown }).valueParser;

package/src/editor-block-prop.test.ts

@@ -0,0 +1,132 @@
+/**
+ * `block` is declared once, in `SvEditorProps`, and its doc comment states the
+ * contract: "in a form grid a row of inputs each stopping at a different width
+ * reads as broken."
+ *
+ * Nine editors accepted the prop by type and did nothing with it. `<SvForm>`
+ * mounts five of them, so the Edit-fields drawer came out with a full-width
+ * text box above a 200px select above a 240px date picker - the exact thing the
+ * doc comment warns about, shipped.
+ *
+ * A type that promises something no code honours is worse than no type: it
+ * reads as done. This walks the source instead of trusting the declaration, so
+ * the next editor added to the kit either honours `block` or is listed here as
+ * a deliberate exemption.
+ */
+import { describe, expect, it } from 'vitest'
+import { readFileSync, readdirSync } from 'node:fs'
+import { join } from 'node:path'
+
+const SRC = join(import.meta.dirname, '.')
+
+/**
+ * Controls whose width is their content, where stretching to 100% would be
+ * wrong rather than merely unusual: a checkbox is a 16px box with a label
+ * beside it, a rating is five stars, a switch is a switch. Widening them puts
+ * the control at one end of an empty row.
+ */
+const INTRINSIC = new Set([
+  'SvCheckBox',
+  'SvSwitchButton',
+  'SvToggleButton',
+  'SvButtonGroup',
+  'SvRadioGroup',
+  'SvRating',
+  'SvOtpInput',
+  'SvFileUpload',
+  'SvSlider',
+  'SvColorInput',
+])
+
+function editorsDeclaringBlock(): string[] {
+  return readdirSync(SRC)
+    .filter((f) => f.startsWith('Sv') && f.endsWith('.svelte'))
+    .filter((f) => {
+      const src = readFileSync(join(SRC, f), 'utf8')
+      if (!src.includes('SvEditorProps')) return false
+      // A `Pick<SvEditorProps, ...>` that leaves 'block' out has opted out at
+      // the type level, which is a legitimate (and checkable) choice.
+      const pick = /Pick<\s*SvEditorProps,\s*([^>]+)>/.exec(src)
+      if (pick) return (pick[1] ?? '').includes("'block'")
+      return true
+    })
+    .map((f) => f.replace('.svelte', ''))
+}
+
+describe('the block prop is honoured wherever it is declared', () => {
+  const declaring = editorsDeclaringBlock().filter((n) => !INTRINSIC.has(n))
+
+  it('finds the editor kit (guards against the walker silently matching nothing)', () => {
+    expect(declaring.length).toBeGreaterThan(10)
+    expect(declaring).toContain('SvDropDownList')
+    expect(declaring).toContain('SvDateTimePicker')
+  })
+
+  it.each(declaring)('%s reads the prop and applies it to a width', (name) => {
+    const src = readFileSync(join(SRC, `${name}.svelte`), 'utf8')
+
+    // Declared but never destructured is the failure mode that shipped: the
+    // component compiles, the consumer passes `block`, nothing happens.
+    expect(src, `${name} never destructures block`).toMatch(/\bblock = false\b|\bblock,/)
+
+    // And destructured but never used is the same bug one step later.
+    const applied =
+      /class:is-block=\{block\}/.test(src) ||
+      /class:sv-[a-z]+--block=\{block\}/.test(src) ||
+      /\{block\}/.test(src)
+    expect(applied, `${name} destructures block but never applies it`).toBe(true)
+  })
+})
+
+/**
+ * Every `<SvXxx ... />` in a Svelte source, with its props.
+ *
+ * Not a regex: props routinely contain `>`, in arrow functions like
+ * `onChange={(m) => o.onChange(m)}`. A `[^>]*?` walker stops at the first one
+ * and silently skips the tag - which here quietly excused SvComboBox,
+ * SvMaskedInput and SvPhoneInput from the check, three of the controls this
+ * test exists to cover. So brace depth is tracked instead.
+ */
+function selfClosingTags(src: string): Array<{ name: string; props: string }> {
+  const out: Array<{ name: string; props: string }> = []
+  const open = /<(Sv[A-Za-z]+)(?=[\s/>])/g
+  let m: RegExpExecArray | null
+  while ((m = open.exec(src))) {
+    let i = m.index + m[0].length
+    let depth = 0
+    for (; i < src.length; i++) {
+      const c = src[i]
+      if (c === '{') depth++
+      else if (c === '}') depth--
+      else if (depth === 0 && c === '/' && src[i + 1] === '>') {
+        out.push({ name: m[1]!, props: src.slice(m.index + m[0].length, i) })
+        break
+      } else if (depth === 0 && c === '>') break // an open tag, not self-closing
+    }
+  }
+  return out
+}
+
+describe('<SvForm> passes block to every control it mounts', () => {
+  // The components above can honour block perfectly and the form still look
+  // ragged, because the form is what decides to pass it. That is precisely how
+  // this bug survived: SvNumberInput, SvPasswordInput, SvMaskedInput and
+  // SvPhoneInput were passed `block` and the rest were not.
+  const form = readFileSync(join(SRC, 'SvForm.svelte'), 'utf8')
+  const honours = new Set(editorsDeclaringBlock())
+  const controls = selfClosingTags(form).filter(
+    (c) => honours.has(c.name) && !INTRINSIC.has(c.name),
+  )
+
+  it('finds the control snippet', () => {
+    // Every control that CAN fill its row must be seen by this walker. The
+    // three `=>`-carrying tags above are the reason this number is asserted.
+    expect(controls.length).toBeGreaterThanOrEqual(11)
+    for (const expected of ['SvDropDownList', 'SvComboBox', 'SvMaskedInput', 'SvPhoneInput'])
+      expect(controls.map((c) => c.name)).toContain(expected)
+  })
+
+  it.each(controls.map((c) => [c.name, c.props]))('%s is mounted block', (name, props) => {
+    expect(props, `<${name}> in SvForm is missing block`).toMatch(/(^|\s)block(\s|$|=)/)
+  })
+})

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') {

package/src/grid-messages.ts

@@ -78,10 +78,27 @@ export type GridMessages = {
   menuRemoveRow: string
   menuRemoveColumn: string
   menuEditComment: string
+  // Selection bar
+  selectionBarLabel: string
+  selectionBarCount: string
+  selectionBarClear: string
+  selectionBarMore: string
+  selectionBarSelectAll: string
+  selectionBarEditFields: string
+  // Bulk edit dialog
+  bulkEditTitle: string
+  bulkEditLead: string
+  bulkEditMixed: string
+  bulkEditApply: string
+  bulkEditCancel: string
+  bulkEditNoFields: string
   chartRange: string
   // Upsell notes (enterprise views not installed)
   pivotUpsellTitle: string
   pivotUpsellBody: string
+  /** Shared licensing line under every Enterprise upsell note. */
+  upsellLicense: string
+  upsellLicenseLink: string
 }
 
 /** English defaults - the literal strings the grid shipped before localization. */
@@ -124,6 +141,20 @@ export const defaultGridMessages: GridMessages = {
   menuRemoveRow: 'Remove row',
   menuRemoveColumn: 'Remove column',
   menuEditComment: 'Edit comment',
+  selectionBarLabel: 'Selection actions',
+  /** Label beside the count CHIP, which carries the number itself. */
+  selectionBarCount: 'selected',
+  selectionBarClear: 'Clear selection',
+  selectionBarMore: 'More actions',
+  selectionBarSelectAll: 'Select all',
+  selectionBarEditFields: 'Edit fields',
+  bulkEditTitle: 'Edit fields',
+  bulkEditLead:
+    'Changes apply to all {count} selected items. Fields you leave alone keep their existing values.',
+  bulkEditMixed: 'Multiple values',
+  bulkEditApply: 'Apply to {count} items',
+  bulkEditCancel: 'Cancel',
+  bulkEditNoFields: 'No editable fields on this grid.',
   opContains: 'Contains',
   opNotContains: 'Not contains',
   opEquals: 'Equals',
@@ -143,6 +174,9 @@ export const defaultGridMessages: GridMessages = {
   chartRange: 'Chart selected range',
   pivotUpsellTitle: 'Pivot mode',
   pivotUpsellBody: 'Pivot mode is an Enterprise feature. Install @svgrid/enterprise and call enablePivot() to use it.',
+  upsellLicense:
+    'A license key is required for production use. Without one the feature still works, but the grid renders an unlicensed watermark.',
+  upsellLicenseLink: 'View licensing',
 }
 
 /**

package/src/index.ts

@@ -80,6 +80,15 @@ export { default as SvGrid } from './SvGrid.svelte'
 // through this seam (see board-view.svelte.ts). Mirrors the scheduler-view seam.
 export type { BoardConfig, BoardLane, BoardCardMoveEvent, BoardCardCommitEvent, BoardLayout, BoardSubtask, BoardComment, BoardMenuContext, BoardLaneMenuContext, BoardDrawerConfig } from './SvGrid.types'
 export { registerBoardView, getBoardView, hasBoardView } from './board-view.svelte'
+// Bulk-action bar over the row selection (`selectionBar`), and the right-click
+// menu items - both are prop-shaped config a consumer has to be able to name
+// when they lift the array into its own module.
+export type {
+  SelectionBarAction,
+  SelectionBarTarget,
+  ContextMenuItem,
+  ContextMenuTarget,
+} from './SvGrid.types'
 // Built-in AI helpers (free): natural-language filter, smart-fill, summarize,
 // classify, anomaly detection, chart-this and export planning. They ship no
 // model client and no-op until you register one with `setAIProvider(...)`, so
@@ -111,6 +120,8 @@ export type {
   SchedulerOccurrenceChangeEvent,
 } from './SvGrid.types'
 export { registerSchedulerView, getSchedulerView, hasSchedulerView } from './scheduler-view.svelte'
+// Bulk-action bar over the row selection. Prop + types free, renderer Pro.
+export { registerSelectionBarView, getSelectionBarView, hasSelectionBarView } from './selection-bar-view.svelte'
 // Chart view. The `chart` prop + its config live in the free grid AND so does the
 // renderer (SvGridChartView wraps the free SvChart) - so unlike board/scheduler
 // it works out of the box. This seam only lets a host OVERRIDE the built-in view.
@@ -254,6 +265,7 @@ export {
   type CellEditorRegistration,
 } from './editor-registry'
 export { registerBuiltinEditors } from './builtin-editors'
+export { sanitizeHtml, renderMarkdown, htmlToText } from './sanitize-html'
 // UI kit - shared field chrome (label + hint + error + direction wrapper)
 export { default as SvField } from './SvField.svelte'
 // UI kit - headless cores (state + prop-getters you render yourself, like createSvGrid)
@@ -441,6 +453,7 @@ export { default as SvAvatarGroup } from './SvAvatarGroup.svelte'
 export { default as SvCommand, type CommandItem } from './SvCommand.svelte'
 export { fuzzyScore, fuzzyMatch } from './fuzzy'
 export { default as SvRichText, type RichTextTool } from './SvRichText.svelte'
+export { default as SvRichCell } from './SvRichCell.svelte'
 export { default as SvCarousel } from './SvCarousel.svelte'
 export { default as SvTour, type TourStep } from './SvTour.svelte'
 export { default as SvPagination } from './SvPagination.svelte'

package/src/list-option.ts

@@ -7,6 +7,12 @@ export type ListOption = {
   group?: string
   /** Optional color swatch (any CSS color) shown before the label. */
   color?: string
+  /**
+   * Optional muted text pinned to the trailing edge of the row - a count, a
+   * shortcut, a unit. Not part of the label, so it does not affect matching
+   * or the accessible name.
+   */
+  hint?: string
 }
 
 /**

package/src/menus.test.ts

@@ -30,6 +30,11 @@ function makeCtx(overrides: any = {}) {
     commentDraft: '',
     noteOverrides: {},
     columnMenuFacetValues: [],
+    // The values currently SHOWN, i.e. after the search box narrows the list.
+    // Equal to `columnMenuFacetValues` when nothing is typed; the facet
+    // select-all reads both to tell "all" from "all results" apart.
+    columnMenuVisibleFacets: overrides.columnMenuVisibleFacets ??
+      overrides.columnMenuFacetValues ?? [],
     showColumnFiltersEffective: true,
     showFilterRowEffective: false,
     scrollContainer: null,
@@ -429,6 +434,44 @@ describe('createMenus - facet checkboxes', () => {
     m.toggleAllFacets('team') // was subset -> remove filter (all)
     expect(ctx.valueFilters.team).toBeUndefined()
   })
+
+  describe('with a search query narrowing the list', () => {
+    // "Select all" means the RESULTS while a query is typed, the way it does
+    // in a spreadsheet. It used to mean the whole column regardless: with
+    // everything ticked (the default) it read as "on" and the click cleared
+    // the entire selection instead of keeping the matches.
+    const searched = (extra: any = {}) =>
+      makeCtx({
+        columnMenuFacetValues: ['Ada', 'Alan', 'Bram'],
+        columnMenuVisibleFacets: ['Ada', 'Alan'],
+        ...extra,
+      })
+
+    it('selects only the matches instead of clearing everything', () => {
+      const ctx = searched()
+      const m = createMenus(ctx)
+      // Default state is "all ticked", so the box shows checked for the
+      // matches; clicking it unticks THEM and leaves the rest alone.
+      expect(m.isAllFacetsChecked('team')).toBe(true)
+      m.toggleAllFacets('team')
+      expect([...ctx.valueFilters.team].sort()).toEqual(['Bram'])
+    })
+
+    it('ticking it back adds the matches to the existing selection', () => {
+      const ctx = searched({ valueFilters: { team: new Set(['Bram']) } })
+      const m = createMenus(ctx)
+      expect(m.isAllFacetsChecked('team')).toBe(false)
+      m.toggleAllFacets('team')
+      expect([...ctx.valueFilters.team].sort()).toEqual(['Ada', 'Alan', 'Bram'])
+    })
+
+    it('reports checked only when every match is selected', () => {
+      const partial = searched({ valueFilters: { team: new Set(['Ada']) } })
+      expect(createMenus(partial).isAllFacetsChecked('team')).toBe(false)
+      const both = searched({ valueFilters: { team: new Set(['Ada', 'Alan']) } })
+      expect(createMenus(both).isAllFacetsChecked('team')).toBe(true)
+    })
+  })
 })
 
 describe('createMenus - clearColumnFilter', () => {

package/src/menus.ts

@@ -294,19 +294,49 @@ export function createMenus<
     ctx.valueFilters = { ...ctx.valueFilters, [columnId]: new Set(next) };
   }
 
+  /**
+   * With a search query typed, "select all" means the RESULTS - the same thing
+   * it means in a spreadsheet. It used to mean the whole column regardless, so
+   * the standard flow (type a query, tick select-all, get just the matches)
+   * cleared the entire selection instead: `isAllFacetsChecked` saw every value
+   * ticked, read that as "on", and turned everything off.
+   */
   function isAllFacetsChecked(columnId: string) {
     const selected = ctx.valueFilters[columnId];
-    return !selected || selected.size >= ctx.columnMenuFacetValues.length;
+    const visible = ctx.columnMenuVisibleFacets as Array<string>;
+    const searching = visible.length !== ctx.columnMenuFacetValues.length;
+    if (!selected) return true;
+    if (searching) return visible.every((value) => selected.has(value));
+    return selected.size >= ctx.columnMenuFacetValues.length;
   }
 
   function toggleAllFacets(columnId: string) {
-    if (isAllFacetsChecked(columnId)) {
-      ctx.valueFilters = { ...ctx.valueFilters, [columnId]: new Set<string>() };
-    } else {
-      const copy = { ...ctx.valueFilters };
-      delete copy[columnId];
-      ctx.valueFilters = copy;
+    const visible = ctx.columnMenuVisibleFacets as Array<string>;
+    const all = ctx.columnMenuFacetValues as Array<string>;
+    const searching = visible.length !== all.length;
+    const on = isAllFacetsChecked(columnId);
+
+    if (!searching) {
+      if (on) {
+        ctx.valueFilters = { ...ctx.valueFilters, [columnId]: new Set<string>() };
+      } else {
+        const copy = { ...ctx.valueFilters };
+        delete copy[columnId];
+        ctx.valueFilters = copy;
+      }
+      return;
+    }
+    // Searching: add or remove just the matches, leaving the rest of the
+    // selection alone. An absent entry means "everything", so it has to be
+    // materialized before a subtraction can mean anything.
+    const current = ctx.valueFilters[columnId]
+      ? new Set<string>(ctx.valueFilters[columnId])
+      : new Set<string>(all);
+    for (const value of visible) {
+      if (on) current.delete(value);
+      else current.add(value);
     }
+    ctx.valueFilters = { ...ctx.valueFilters, [columnId]: current };
   }
 
   function clearColumnFilter(columnId: string) {