@svgrid/grid 3.0.0 → 3.0.2

package/dist/editing.js

@@ -248,23 +248,32 @@ export function createEditing(ctx) {
             ctx.gridRootEl?.focus({ preventScroll: true });
         }
     }
+    /**
+     * Focus the editor synchronously, as soon as the action runs.
+     *
+     * This used to be deferred by a `requestAnimationFrame`, which left a window
+     * where the cell already carried `sv-grid-cell-editing` but nothing inside it
+     * held focus. `onGridKeyDown` returns early while `editingCell` is set, so a
+     * keystroke landing in that window reached neither the grid nor the editor
+     * and was simply dropped: double-click, type immediately, lose the first
+     * characters. The action only runs once the node is in the document, so there
+     * is nothing to wait a frame for.
+     */
     function focusOnMount(node) {
         const selectAll = ctx.editorSelectAll;
-        requestAnimationFrame(() => {
-            node.focus({ preventScroll: true });
-            try {
-                if (selectAll) {
-                    node.select();
-                }
-                else {
-                    const end = node.value.length;
-                    node.setSelectionRange(end, end);
-                }
+        node.focus({ preventScroll: true });
+        try {
+            if (selectAll) {
+                node.select();
             }
-            catch {
-                /* date/number inputs may not support text selection */
+            else {
+                const end = node.value.length;
+                node.setSelectionRange(end, end);
             }
-        });
+        }
+        catch {
+            /* date/number inputs may not support text selection */
+        }
     }
     function onCellDoubleClick(rowIndex, colIndex) {
         if (!ctx.editingEnabled)

package/dist/grid-icons.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Grid chrome icons. Every glyph `<SvGrid>` draws for its own UI - sort
+ * indicators, the filter funnel, expanders, the pager arrows, tool-panel
+ * buttons - has a name here, and the `icons` prop replaces any subset of them.
+ *
+ * This mirrors `grid-messages.ts`: a name-keyed map with built-in defaults,
+ * where an unset name keeps the default. A partial map is all a consumer ever
+ * needs, so `icons` is safe to pass without knowing the full catalogue. That
+ * matters more than it looks - a single catch-all snippet would make the
+ * consumer responsible for every name the grid can ask for, and missing one
+ * renders an empty box. The `op-between` comment in SvGrid.svelte records what
+ * that looks like when it ships.
+ *
+ * Deliberately NOT in here:
+ *   - the scrollbar stepper arrows. `sv-grid-scrollbar.ts` is a custom element
+ *     that builds its SVG with `createElementNS` inside a shadow root, on
+ *     purpose, so it stays compatible with strict CSP / Trusted Types. A Svelte
+ *     snippet cannot render there. Theme it with the `--sg-scrollbar-*` tokens.
+ *   - the checkbox tick and its indeterminate dash. Both are `::after`
+ *     pseudo-elements drawn from borders (SvGrid.css), a form-control
+ *     affordance rather than an icon, and they render once per visible row.
+ *   - conditional formatting's `iconSet`. Those are value-driven data glyphs a
+ *     consumer already chooses; a different concept that shares the word.
+ */
+import type { Snippet } from 'svelte';
+/**
+ * Every icon `<SvGrid>` draws for its own chrome. Pass any subset of these to
+ * the `icons` prop to swap the built-in glyph for your own markup.
+ */
+export type GridIconName = 'sort' | 'sort-asc' | 'sort-desc' | 'filter' | 'menu' | 'group' | 'x' | 'chevron-down' | 'chevron-right' | 'autosize' | 'columns' | 'reset' | 'op-contains' | 'op-notContains' | 'op-equals' | 'op-notEquals' | 'op-startsWith' | 'op-endsWith' | 'op-regex' | 'op-in' | 'op-notIn' | 'op-greaterThan' | 'op-lessThan' | 'op-between' | 'op-isBlank' | 'op-isNotBlank' | 'pin-left' | 'pin-right' | 'unpin' | 'search' | 'tool-panel' | 'chart' | 'advanced-filter' | 'column-group-caret' | 'close' | 'clear' | 'remove' | 'row-number' | 'pinned-row-top' | 'pinned-row-bottom' | 'find-prev' | 'find-next' | 'move-up' | 'move-down' | 'group-add' | 'page-first' | 'page-prev' | 'page-next' | 'page-last' | 'page-size-caret' | 'drag-handle' | 'breadcrumb-separator';
+/**
+ * Consumer icon overrides, keyed by name. Any subset; names you leave out keep
+ * their built-in glyph, so `icons` never has to be exhaustive.
+ */
+export type GridIcons = Partial<Record<GridIconName, Snippet>>;
+/**
+ * Icons whose built-in form is a character rather than an SVG path. Kept as
+ * data so `<SvGrid>`, its footer and the standalone `SvRowGroupPanel` render
+ * the same defaults instead of three copies drifting apart.
+ *
+ * Each is the exact character that shipped inline before, so a grid that sets
+ * no `icons` renders byte-for-byte what it always did.
+ */
+export declare const GRID_ICON_GLYPHS: Partial<Record<GridIconName, string>>;
+/**
+ * Every icon name, in catalogue order. Exported for tests and docs generation;
+ * the grid itself never reads it, so it costs a consumer's bundle nothing.
+ */
+export declare const GRID_ICON_NAMES: ReadonlyArray<GridIconName>;

package/dist/grid-icons.js

@@ -0,0 +1,86 @@
+/**
+ * Icons whose built-in form is a character rather than an SVG path. Kept as
+ * data so `<SvGrid>`, its footer and the standalone `SvRowGroupPanel` render
+ * the same defaults instead of three copies drifting apart.
+ *
+ * Each is the exact character that shipped inline before, so a grid that sets
+ * no `icons` renders byte-for-byte what it always did.
+ */
+export const GRID_ICON_GLYPHS = {
+    close: '✕', // multiplication X
+    clear: '✕',
+    remove: '×', // multiplication sign
+    'row-number': '#',
+    'pinned-row-top': '↑', // upwards arrow
+    'pinned-row-bottom': '↓', // downwards arrow
+    'find-prev': '↑',
+    'find-next': '↓',
+    'move-up': '↑',
+    'move-down': '↓',
+    'group-add': '⊞', // squared plus
+    'page-first': '⇤', // leftwards arrow to bar
+    'page-prev': '‹', // single left-pointing angle quote
+    'page-next': '›', // single right-pointing angle quote
+    'page-last': '⇥', // rightwards arrow to bar
+    'page-size-caret': '▾', // black down-pointing small triangle
+    'drag-handle': '⠿', // braille pattern dots-123456, the grip
+    'breadcrumb-separator': '›',
+};
+/**
+ * Every icon name, in catalogue order. Exported for tests and docs generation;
+ * the grid itself never reads it, so it costs a consumer's bundle nothing.
+ */
+export const GRID_ICON_NAMES = [
+    'sort',
+    'sort-asc',
+    'sort-desc',
+    'filter',
+    'menu',
+    'group',
+    'x',
+    'chevron-down',
+    'chevron-right',
+    'autosize',
+    'columns',
+    'reset',
+    'op-contains',
+    'op-notContains',
+    'op-equals',
+    'op-notEquals',
+    'op-startsWith',
+    'op-endsWith',
+    'op-regex',
+    'op-in',
+    'op-notIn',
+    'op-greaterThan',
+    'op-lessThan',
+    'op-between',
+    'op-isBlank',
+    'op-isNotBlank',
+    'pin-left',
+    'pin-right',
+    'unpin',
+    'search',
+    'tool-panel',
+    'chart',
+    'advanced-filter',
+    'column-group-caret',
+    'close',
+    'clear',
+    'remove',
+    'row-number',
+    'pinned-row-top',
+    'pinned-row-bottom',
+    'find-prev',
+    'find-next',
+    'move-up',
+    'move-down',
+    'group-add',
+    'page-first',
+    'page-prev',
+    'page-next',
+    'page-last',
+    'page-size-caret',
+    'drag-handle',
+    'breadcrumb-separator',
+];

package/dist/index.d.ts

@@ -193,8 +193,8 @@ export { default as SvChart } from './SvGridChart.svelte';
 export { default as SvChartPanel } from './SvGridChartPanel.svelte';
 export type { ChartingConfig, ChartAggregateRequest, ChartAggregateBucket } from './SvGrid.types.js';
 export type { GridLocalization } from './SvGrid.types.js';
-export { buildChart, formatChartValue, rowsToChartSpec, niceScale, niceLogScale, linearTrend, simpleMovingAverage, exponentialMovingAverage, computeOverlay, buildLinePath, sampleGradient, pickContrastText, DEFAULT_PALETTE, type ChartType, type ChartSpec, type ChartSeries, type ChartGeometry, type ChartBar, type ChartLine, type ChartLinePoint, type ChartPieSlice, type ChartSelection, type ChartReferenceLine, type ChartRefLineGeo, type ChartRefLineGeoV, type ChartScatterDot, type ScatterPoint, type NiceScale, type SeriesOverlay, type SeriesPattern, type ChartAnnotation, type ChartHeatmapCell, type ChartFunnelSegment, type ChartRadarSeries, type ChartRadarAxis, type ChartTreemapCell, type ChartCalendarCell, type ChartGaugeLayout, type ChartSankeyNode, type ChartSankeyLink, type ChartValueFormat, type TreeNode, } from './chart.js';
-export { chartToSvgString, downloadChartSvg, chartToPngBlob, downloadChartPng, chartSpecToCsv, downloadChartCsv, type ChartExportOptions, } from './chart-export.js';
+export { buildChart, formatChartValue, rowsToChartSpec, rowsToBoxSpec, rowsToDirectSpec, boxStats, sliceChartWindow, chartScales, ordinalDateTicks, niceScale, niceLogScale, linearTrend, simpleMovingAverage, exponentialMovingAverage, computeOverlay, buildLinePath, sampleGradient, pickContrastText, DEFAULT_PALETTE, type ChartType, type ChartSpec, type ChartSeries, type ChartGeometry, type ChartScales, type ChartBar, type ChartCandle, type ChartBox, type ChartErrorBar, type BoxStats, type OhlcBar, type ChartLine, type ChartLinePoint, type ChartPieSlice, type ChartSelection, type ChartReferenceLine, type ChartRefLineGeo, type ChartRefLineGeoV, type ChartScatterDot, type ScatterPoint, type NiceScale, type SeriesOverlay, type SeriesPattern, type ChartAnnotation, type ChartHeatmapCell, type ChartFunnelSegment, type ChartRadarSeries, type ChartRadarAxis, type ChartTreemapCell, type ChartCalendarCell, type ChartGaugeLayout, type ChartSankeyNode, type ChartSankeyLink, type ChartValueFormat, type TreeNode, } from './chart.js';
+export { chartToSvgString, downloadChartSvg, chartToPngBlob, downloadChartPng, chartCsvExportable, chartSpecToCsv, downloadChartCsv, type ChartExportOptions, } from './chart-export.js';
 export { buildSparkline, toSparklineValues, type SparklineConfig, type SparklineType, type SparklineGeometry, } from './sparkline.js';
 export { spreadsheetLayout, spansToMerges, type SpanColumn, type SpreadsheetActionOptions, type MergeSpec, type CellBorderSpec, type BorderSpec, } from './spreadsheet.js';
 export { rowResize, type RowResizeOptions } from './row-resize.js';
@@ -211,6 +211,7 @@ export { default as SvRowGroupPanel } from './SvRowGroupPanel.svelte';
 export { createNamedViews, memoryViews, localStorageViews, attachAutoSavedView, type SavedView, type ViewStorage, type NamedViews, type AutoSavedViewOptions, } from './named-views.js';
 export { resolveCellFormat, computeColumnStat, lerpColor, rgba, contrastText, formatNeedsStats, formatsNeedingStats, type ConditionalFormat, type ConditionalFormatSpec, type ColorScaleFormat, type ColorScaleStop, type ScaleBounds, type DataBarFormat, type IconSetFormat, type RuleFormat, type ResolvedCellFormat, } from './conditional-formatting.js';
 export { defaultGridMessages, resolveGridMessages, type GridMessages, } from './grid-messages.js';
+export { GRID_ICON_GLYPHS, GRID_ICON_NAMES, type GridIconName, type GridIcons, } from './grid-icons.js';
 export { insertGroupFooters, buildAutoGroupColumns, paginateGroupedRows, type GroupDisplayType, type GroupFooterOptions, type AutoGroupColumnSpec, type AutoGroupResult, type GroupPaginationOptions, type GroupPaginationResult, } from './group-display.js';
 export { getKeyboardIntent, getNextActiveCell, type GridKeyboardIntent } from './keyboard.js';
 export { createVirtualizer } from './virtualization/virtualizer.js';

package/dist/index.js

@@ -230,8 +230,8 @@ export { default as SvGridChartPanel } from './SvGridChartPanel.svelte';
 // as aliases so existing imports keep working.
 export { default as SvChart } from './SvGridChart.svelte';
 export { default as SvChartPanel } from './SvGridChartPanel.svelte';
-export { buildChart, formatChartValue, rowsToChartSpec, niceScale, niceLogScale, linearTrend, simpleMovingAverage, exponentialMovingAverage, computeOverlay, buildLinePath, sampleGradient, pickContrastText, DEFAULT_PALETTE, } from './chart.js';
-export { chartToSvgString, downloadChartSvg, chartToPngBlob, downloadChartPng, chartSpecToCsv, downloadChartCsv, } from './chart-export.js';
+export { buildChart, formatChartValue, rowsToChartSpec, rowsToBoxSpec, rowsToDirectSpec, boxStats, sliceChartWindow, chartScales, ordinalDateTicks, niceScale, niceLogScale, linearTrend, simpleMovingAverage, exponentialMovingAverage, computeOverlay, buildLinePath, sampleGradient, pickContrastText, DEFAULT_PALETTE, } from './chart.js';
+export { chartToSvgString, downloadChartSvg, chartToPngBlob, downloadChartPng, chartCsvExportable, chartSpecToCsv, downloadChartCsv, } from './chart-export.js';
 export { buildSparkline, toSparklineValues, } from './sparkline.js';
 export { spreadsheetLayout, spansToMerges, } from './spreadsheet.js';
 // The two resize actions, exported as a matched pair. `<SvGrid>` drives both
@@ -253,6 +253,7 @@ export { default as SvRowGroupPanel } from './SvRowGroupPanel.svelte';
 export { createNamedViews, memoryViews, localStorageViews, attachAutoSavedView, } from './named-views.js';
 export { resolveCellFormat, computeColumnStat, lerpColor, rgba, contrastText, formatNeedsStats, formatsNeedingStats, } from './conditional-formatting.js';
 export { defaultGridMessages, resolveGridMessages, } from './grid-messages.js';
+export { GRID_ICON_GLYPHS, GRID_ICON_NAMES, } from './grid-icons.js';
 export { insertGroupFooters, buildAutoGroupColumns, paginateGroupedRows, } from './group-display.js';
 export { getKeyboardIntent, getNextActiveCell } from './keyboard.js';
 export { createVirtualizer } from './virtualization/virtualizer.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svgrid/grid",
-  "version": "3.0.0",
+  "version": "3.0.2",
   "description": "Svelte 5-native data grid and data table. Headless-first engine with virtual scrolling for 100k+ rows, Excel-style filtering, inline editing, grouping, tree data, pivot, and server-side data. Drop-in <SvGrid> component. TypeScript, SSR-ready.",
   "author": "jQWidgets <boikom@jqwidgets.com>",
   "license": "MIT",

package/src/FlexRender.svelte

@@ -1,96 +1,96 @@
-<script
-  lang="ts"
-  generics="TData extends RowData"
->
-  import { isFunction } from './core'
-  import {
-    RenderComponentConfig,
-    RenderSnippetConfig,
-  } from './render-component'
-  import type {
-    Cell,
-    CellContext,
-    ColumnDefTemplate,
-    Header,
-    HeaderContext,
-    RowData,
-  } from './core'
-
-  type Props =
-    | {
-        content?: ColumnDefTemplate<
-          | HeaderContext<TData>
-          | CellContext<TData>
-        >
-        context:
-          | HeaderContext<TData>
-          | CellContext<TData>
-        cell?: never
-        header?: never
-        footer?: never
-      }
-    | {
-        cell: Cell<TData>
-        content?: never
-        context?: never
-        header?: never
-        footer?: never
-      }
-    | {
-        header: Header<TData>
-        content?: never
-        context?: never
-        cell?: never
-        footer?: never
-      }
-    | {
-        footer: Header<TData>
-        content?: never
-        context?: never
-        cell?: never
-        header?: never
-      }
-
-  let props: Props = $props()
-
-  const resolved = $derived.by(() => {
-    if ('cell' in props && props.cell) {
-      return {
-        content: props.cell.column.columnDef.cell,
-        context: props.cell.getContext(),
-      }
-    }
-    if ('header' in props && props.header) {
-      return {
-        content: props.header.column.columnDef.header,
-        context: props.header.getContext(),
-      }
-    }
-    if ('footer' in props && props.footer) {
-      return {
-        content: props.footer.column.columnDef.footer,
-        context: props.footer.getContext(),
-      }
-    }
-    return {
-      content: props.content,
-      context: props.context,
-    }
-  })
-
-  const result = $derived(
-    isFunction(resolved.content)
-      ? resolved.content(resolved.context as any)
-      : undefined,
-  )
-</script>
-
-{#if typeof resolved.content === 'string'}
-  {resolved.content}
-{:else if result instanceof RenderComponentConfig}
-  <result.component {...result.props} />
-{:else if result instanceof RenderSnippetConfig}
-  {@render result.snippet(result.params)}
-{:else if result !== undefined}
-  {result}
-{/if}
+<script
+  lang="ts"
+  generics="TData extends RowData"
+>
+  import { isFunction } from './core'
+  import {
+    RenderComponentConfig,
+    RenderSnippetConfig,
+  } from './render-component'
+  import type {
+    Cell,
+    CellContext,
+    ColumnDefTemplate,
+    Header,
+    HeaderContext,
+    RowData,
+  } from './core'
+
+  type Props =
+    | {
+        content?: ColumnDefTemplate<
+          | HeaderContext<TData>
+          | CellContext<TData>
+        >
+        context:
+          | HeaderContext<TData>
+          | CellContext<TData>
+        cell?: never
+        header?: never
+        footer?: never
+      }
+    | {
+        cell: Cell<TData>
+        content?: never
+        context?: never
+        header?: never
+        footer?: never
+      }
+    | {
+        header: Header<TData>
+        content?: never
+        context?: never
+        cell?: never
+        footer?: never
+      }
+    | {
+        footer: Header<TData>
+        content?: never
+        context?: never
+        cell?: never
+        header?: never
+      }
+
+  let props: Props = $props()
+
+  const resolved = $derived.by(() => {
+    if ('cell' in props && props.cell) {
+      return {
+        content: props.cell.column.columnDef.cell,
+        context: props.cell.getContext(),
+      }
+    }
+    if ('header' in props && props.header) {
+      return {
+        content: props.header.column.columnDef.header,
+        context: props.header.getContext(),
+      }
+    }
+    if ('footer' in props && props.footer) {
+      return {
+        content: props.footer.column.columnDef.footer,
+        context: props.footer.getContext(),
+      }
+    }
+    return {
+      content: props.content,
+      context: props.context,
+    }
+  })
+
+  const result = $derived(
+    isFunction(resolved.content)
+      ? resolved.content(resolved.context as any)
+      : undefined,
+  )
+</script>
+
+{#if typeof resolved.content === 'string'}
+  {resolved.content}
+{:else if result instanceof RenderComponentConfig}
+  <result.component {...result.props} />
+{:else if result instanceof RenderSnippetConfig}
+  {@render result.snippet(result.params)}
+{:else if result !== undefined}
+  {result}
+{/if}