@svgrid/grid 2.6.21 → 2.7.0

package/dist/column-resize.js

@@ -0,0 +1,205 @@
+/**
+ * Column-resize Svelte action - drag a header's right edge to widen / narrow
+ * the column. Counterpart of `rowResize`, and built the same way for the same
+ * reason: `<SvGrid columnResize>` is opt-in, so the code behind it must not sit
+ * in the base bundle of every grid that leaves it off. The grid pulls this
+ * module through `import()` the first time a consumer turns the prop on.
+ *
+ * Handles are injected rather than rendered, so nothing about them compiles
+ * into `SvGrid.svelte`. A header cell is keyed by `data-svgrid-header-col` -
+ * body cells use `data-col-id`, which is a different attribute on purpose, and
+ * matching the wrong one finds nothing. One handle goes into every such `th`
+ * under `node`, and a MutationObserver keeps up with virtualized columns
+ * scrolling in and out.
+ *
+ *   <div use:columnResize={{ getWidth, onResize }}>
+ *     <SvGrid ... />
+ *   </div>
+ *
+ * Visual: a 5px strip on the header's right edge with an accent centre pill,
+ * from SvGrid.css. Cursor is `col-resize`.
+ */
+const HANDLE_CLASS = 'sv-grid-resize-handle';
+export function columnResize(node, opts) {
+    let current = opts;
+    let drag = null;
+    // Coalesce onto the animation frame: pointermove fires many times per frame
+    // and each width write triggers a full recompute of the column-layout
+    // pipeline. Without this the grid stutters for the whole drag.
+    let raf = null;
+    let pendingWidth = 0;
+    const minWidth = () => current.min ?? 40;
+    function columnIdOf(el) {
+        return el.closest('[data-svgrid-header-col]')?.dataset.svgridHeaderCol ?? null;
+    }
+    function commit() {
+        if (!drag)
+            return;
+        current.onResize(drag.columnId, pendingWidth);
+    }
+    function onPointerMove(e) {
+        if (!drag)
+            return;
+        pendingWidth = Math.max(minWidth(), drag.startWidth + (e.clientX - drag.startX));
+        if (raf !== null)
+            return;
+        raf = requestAnimationFrame(() => {
+            raf = null;
+            commit();
+        });
+    }
+    function onPointerUp(e) {
+        if (!drag)
+            return;
+        if (raf !== null) {
+            cancelAnimationFrame(raf);
+            raf = null;
+        }
+        // Commit the final width even if the last frame was cancelled mid-flight.
+        pendingWidth = Math.max(minWidth(), drag.startWidth + (e.clientX - drag.startX));
+        commit();
+        drag.handle.classList.remove('is-resizing');
+        syncAria(drag.handle, drag.columnId);
+        try {
+            drag.handle.releasePointerCapture(e.pointerId);
+        }
+        catch {
+            /* release is best-effort */
+        }
+        drag = null;
+        window.removeEventListener('pointermove', onPointerMove);
+        window.removeEventListener('pointerup', onPointerUp);
+        window.removeEventListener('pointercancel', onPointerUp);
+        document.body.style.cursor = '';
+    }
+    function onPointerDown(e) {
+        if (current.disabled)
+            return;
+        const t = e.target;
+        if (!t?.classList.contains(HANDLE_CLASS))
+            return;
+        const columnId = columnIdOf(t);
+        if (!columnId || current.canResize?.(columnId) === false)
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        t.classList.add('is-resizing');
+        pendingWidth = current.getWidth(columnId);
+        drag = { columnId, startX: e.clientX, startWidth: pendingWidth, handle: t };
+        try {
+            t.setPointerCapture(e.pointerId);
+        }
+        catch {
+            /* capture is best-effort */
+        }
+        document.body.style.cursor = 'col-resize';
+        window.addEventListener('pointermove', onPointerMove);
+        window.addEventListener('pointerup', onPointerUp);
+        window.addEventListener('pointercancel', onPointerUp);
+    }
+    /**
+     * Keyboard resize (#79). The handle is a focusable `role="separator"` acting
+     * as a splitter, so it has to answer the arrow keys. Left/Right shrink/grow,
+     * Shift gives a 1px step - the same contract `rowResize` uses vertically.
+     */
+    function onKeyDown(e) {
+        if (current.disabled)
+            return;
+        const t = e.target;
+        if (!t?.classList.contains(HANDLE_CLASS))
+            return;
+        const step = e.shiftKey ? 1 : 10;
+        let delta = 0;
+        if (e.key === 'ArrowLeft')
+            delta = -step;
+        else if (e.key === 'ArrowRight')
+            delta = step;
+        else
+            return;
+        const columnId = columnIdOf(t);
+        if (!columnId || current.canResize?.(columnId) === false)
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        const next = Math.max(minWidth(), Math.round(current.getWidth(columnId) + delta));
+        current.onResize(columnId, next);
+        syncAria(t, columnId);
+    }
+    /** A focusable separator is a widget, so ARIA wants a current value. */
+    function syncAria(handle, columnId) {
+        const w = Math.round(current.getWidth(columnId));
+        handle.setAttribute('aria-valuenow', String(w));
+        handle.setAttribute('aria-valuemin', String(minWidth()));
+        handle.setAttribute('aria-valuetext', `${w} pixels`);
+    }
+    /** One handle per header cell. Skips group headers and spacer columns,
+     *  which have no id to resize. */
+    function decorate() {
+        if (current.disabled) {
+            removeAll();
+            return;
+        }
+        const heads = node.querySelectorAll('th.sv-grid-column[data-svgrid-header-col]');
+        for (const th of heads) {
+            if (th.classList.contains('sv-grid-column-spacer'))
+                continue;
+            const columnId = th.dataset.svgridHeaderCol;
+            if (!columnId)
+                continue;
+            if (current.canResize?.(columnId) === false) {
+                // The column may have been resizable a moment ago - a re-decorate has
+                // to take the handle away, not just stop adding one.
+                th.querySelector(`:scope > .${HANDLE_CLASS}`)?.remove();
+                continue;
+            }
+            if (th.querySelector(`:scope > .${HANDLE_CLASS}`))
+                continue;
+            const handle = document.createElement('div');
+            handle.className = HANDLE_CLASS;
+            handle.setAttribute('role', 'separator');
+            handle.setAttribute('aria-orientation', 'vertical');
+            handle.setAttribute('aria-label', `Resize ${current.label?.(columnId) ?? columnId}`);
+            handle.tabIndex = 0;
+            syncAria(handle, columnId);
+            // Double-click the handle to size the column to its content - the
+            // spreadsheet gesture. Stop it there so it does not also reach the
+            // header, where a double-click would toggle the sort twice.
+            handle.addEventListener('dblclick', (ev) => {
+                ev.stopPropagation();
+                ev.preventDefault();
+                if (current.disabled)
+                    return;
+                current.onAutosize?.(columnId);
+                syncAria(handle, columnId);
+            });
+            th.appendChild(handle);
+        }
+    }
+    function removeAll() {
+        node.querySelectorAll(`.${HANDLE_CLASS}`).forEach((el) => el.remove());
+    }
+    node.addEventListener('pointerdown', onPointerDown, { capture: true });
+    node.addEventListener('keydown', onKeyDown, { capture: true });
+    const observer = new MutationObserver(() => decorate());
+    observer.observe(node, { childList: true, subtree: true });
+    decorate();
+    return {
+        update(next) {
+            const wasDisabled = current.disabled;
+            current = next;
+            if (wasDisabled !== current.disabled)
+                decorate();
+        },
+        destroy() {
+            node.removeEventListener('pointerdown', onPointerDown, { capture: true });
+            node.removeEventListener('keydown', onKeyDown, { capture: true });
+            window.removeEventListener('pointermove', onPointerMove);
+            window.removeEventListener('pointerup', onPointerUp);
+            window.removeEventListener('pointercancel', onPointerUp);
+            if (raf !== null)
+                cancelAnimationFrame(raf);
+            observer.disconnect();
+            removeAll();
+        },
+    };
+}

package/dist/columns.d.ts

@@ -20,9 +20,6 @@ export declare function createColumns<TFeatures extends TableFeatures = TableFea
     toggleGroupInPanel: (columnId: string) => void;
     getColumnBaseWidth: (columnId: string) => any;
     getColumnWidth: (columnId: string) => any;
-    startColumnResize: (event: PointerEvent, columnId: string) => void;
-    onColumnResizeMove: (event: PointerEvent) => void;
-    endColumnResize: () => void;
     measureText: (text: string, font: string) => number;
     autosizeColumn: (columnId: string) => void;
     autosizeAllColumns: () => void;

package/dist/columns.js

@@ -156,60 +156,6 @@ export function createColumns(ctx) {
             return fitted;
         return getColumnBaseWidth(columnId);
     }
-    function startColumnResize(event, columnId) {
-        event.stopPropagation();
-        event.preventDefault();
-        ctx.resizingColumnId = columnId;
-        ctx.resizeStartX = event.clientX;
-        ctx.resizeStartWidth = getColumnWidth(columnId);
-        // Capture the pointer so the drag keeps tracking when it leaves the 4px
-        // handle - without this, touch (and fast mouse) drags drop mid-resize (#59).
-        try {
-            event.currentTarget?.setPointerCapture?.(event.pointerId);
-        }
-        catch { /* capture is best-effort */ }
-        document.addEventListener("pointermove", onColumnResizeMove);
-        document.addEventListener("pointerup", endColumnResize);
-        document.addEventListener("pointercancel", endColumnResize);
-    }
-    function onColumnResizeMove(event) {
-        if (!ctx.resizingColumnId)
-            return;
-        // Coalesce updates onto the animation frame: pointermove can fire many
-        // times per frame, and each $state mutation triggers a full reactive
-        // recompute of the column-layout pipeline. Without rAF coalescing the
-        // grid stutters during the drag.
-        ctx.resizePendingWidth = Math.max(ctx.MIN_COLUMN_WIDTH, ctx.resizeStartWidth + (event.clientX - ctx.resizeStartX));
-        if (ctx.resizeRaf !== null)
-            return;
-        ctx.resizeRaf = requestAnimationFrame(() => {
-            ctx.resizeRaf = null;
-            if (!ctx.resizingColumnId)
-                return;
-            ctx.columnWidths = {
-                ...ctx.columnWidths,
-                [ctx.resizingColumnId]: ctx.resizePendingWidth,
-            };
-        });
-    }
-    function endColumnResize() {
-        if (ctx.resizeRaf !== null) {
-            cancelAnimationFrame(ctx.resizeRaf);
-            ctx.resizeRaf = null;
-        }
-        if (ctx.resizingColumnId && ctx.resizePendingWidth) {
-            // Make sure the final width is committed even if the last rAF was
-            // canceled mid-flight.
-            ctx.columnWidths = {
-                ...ctx.columnWidths,
-                [ctx.resizingColumnId]: ctx.resizePendingWidth,
-            };
-        }
-        ctx.resizingColumnId = null;
-        document.removeEventListener("pointermove", onColumnResizeMove);
-        document.removeEventListener("pointerup", endColumnResize);
-        document.removeEventListener("pointercancel", endColumnResize);
-    }
     function measureText(text, font) {
         if (!text)
             return 0;
@@ -280,9 +226,6 @@ export function createColumns(ctx) {
         toggleGroupInPanel,
         getColumnBaseWidth,
         getColumnWidth,
-        startColumnResize,
-        onColumnResizeMove,
-        endColumnResize,
         measureText,
         autosizeColumn,
         autosizeAllColumns,

package/dist/core.d.ts

@@ -201,7 +201,7 @@ export type ColumnDef<TFeatures extends TableFeatures, TData extends RowData> =
     columns?: Array<ColumnDef<TFeatures, TData>>;
     /**
      * Declarative cell spanning (merged cells). Return how many COLUMNS this
-     * cell spans to the right (1 = no span). Value-driven, AG-Grid-style. Feed
+     * cell spans to the right (1 = no span). Value-driven. Feed
      * `spansToMerges(rows, columns)` into `spreadsheetLayout` to apply - it uses
      * the same real `colspan`/`rowspan` merge engine (no separate code path).
      */
@@ -240,7 +240,7 @@ export type ColumnDef<TFeatures extends TableFeatures, TData extends RowData> =
     columnGroupShow?: 'open' | 'closed';
     /**
      * For a GROUP column (one with `columns: [...]`): start the group expanded.
-     * Defaults to `false` (collapsed), matching AG Grid - so only the always-on
+     * Defaults to `false` (collapsed), the conventional default - so only the always-on
      * and `columnGroupShow: 'closed'` children show until the user expands it.
      */
     openByDefault?: boolean;
@@ -263,7 +263,7 @@ export type ColumnDef<TFeatures extends TableFeatures, TData extends RowData> =
      */
     tooltip?: string | ((ctx: CellContext<TData>) => string | null | undefined);
     /**
-     * Declarative per-cell validation (Handsontable-style). Runs for EVERY
+     * Declarative per-cell validation. Runs for EVERY
      * rendered cell - including values already present in `data` on load, not
      * just on edit - so bad data is flagged immediately. Invalid cells get the
      * `sv-grid-cell-invalid` class (red highlight) and the returned message as
@@ -302,7 +302,7 @@ export type ColumnDef<TFeatures extends TableFeatures, TData extends RowData> =
      * Transform the committed edit value before it is written to the row.
      * Runs after the built-in per-`editorType` coercion, so `newValue` is
      * already type-parsed; return the final value to store (e.g. round a
-     * number, uppercase a code, look up an id). AG-Grid-style `valueParser`.
+     * number, uppercase a code, look up an id). A `valueParser` hook.
      */
     valueParser?: (params: ValueParserParams<TData>) => unknown;
     /**
@@ -388,6 +388,21 @@ export type ColumnDef<TFeatures extends TableFeatures, TData extends RowData> =
     sparkline?: SparklineConfig;
     /** Initial column width in pixels. Falls back to the grid's `columnWidth` prop. */
     width?: number;
+    /**
+     * Whether the user may resize this column. Only consulted when the grid has
+     * `columnResize` on - it narrows that, it does not enable anything.
+     *
+     * `false` removes the column's drag handle entirely, so pointer drag, the
+     * keyboard arrows and double-click-to-autosize are all gone with it, and the
+     * column menu drops its Autosize item. Use it for the columns whose width is
+     * part of the layout rather than a preference: a row-number gutter, a
+     * checkbox column, a fixed icon column.
+     *
+     * Programmatic sizing is unaffected - `api.autosizeColumn()`,
+     * `api.setColumnWidth()` and `fitColumns` all still apply, the same way they
+     * do when `columnResize` is off. This governs the user affordance only.
+     */
+    resizable?: boolean;
     /**
      * Initial visibility. Set `false` to start the column hidden while still
      * listing it in the Choose Columns UI for the user to re-enable. Applied