@svgrid/grid 2.1.21 → 2.1.23

package/src/SvTooltip.test.ts

@@ -0,0 +1,73 @@
+/**
+ * Component tests for SvTooltip, exercising the shared createTooltip core: it
+ * opens after the show delay on hover, hides on Escape, respects `disabled`, and
+ * wires aria-describedby onto the focusable child while open.
+ */
+import { describe, expect, it, beforeEach, afterEach, vi } from 'vitest'
+import { mount, unmount, flushSync, createRawSnippet } from 'svelte'
+import SvTooltip from './SvTooltip.svelte'
+
+const child = createRawSnippet(() => ({ render: () => `<button class="btn">Del</button>` }))
+
+function mountTip(props: Record<string, unknown>) {
+  const target = document.createElement('div')
+  document.body.appendChild(target)
+  const app = mount(SvTooltip, { target, props: { children: child, ...props } as any })
+  flushSync()
+  return { target, destroy: () => { unmount(app); target.remove() } }
+}
+const tip = () => document.body.querySelector<HTMLElement>('.sv-tip')
+
+describe('SvTooltip', () => {
+  beforeEach(() => vi.useFakeTimers())
+  afterEach(() => {
+    vi.useRealTimers()
+    document.querySelectorAll('.sv-tip').forEach((n) => n.remove())
+  })
+
+  it('shows after the delay on pointerenter and hides on Escape', () => {
+    const { target, destroy } = mountTip({ text: 'Delete row', delay: 300 })
+    try {
+      const anchor = target.querySelector<HTMLElement>('.sv-tip__anchor')!
+      expect(tip()).toBeNull()
+      anchor.dispatchEvent(new PointerEvent('pointerenter', { bubbles: true }))
+      // Nothing yet - still within the delay window.
+      flushSync()
+      expect(tip()).toBeNull()
+      vi.advanceTimersByTime(300)
+      flushSync()
+      const el = tip()!
+      expect(el).not.toBeNull()
+      expect(el.getAttribute('role')).toBe('tooltip')
+      expect(el.textContent).toContain('Delete row')
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }))
+      flushSync()
+      expect(tip()).toBeNull()
+    } finally { destroy() }
+  })
+
+  it('does not show while disabled', () => {
+    const { target, destroy } = mountTip({ text: 'x', disabled: true })
+    try {
+      target.querySelector<HTMLElement>('.sv-tip__anchor')!
+        .dispatchEvent(new PointerEvent('pointerenter', { bubbles: true }))
+      vi.advanceTimersByTime(500)
+      flushSync()
+      expect(tip()).toBeNull()
+    } finally { destroy() }
+  })
+
+  it('wires aria-describedby onto the focusable child while open', () => {
+    const { target, destroy } = mountTip({ text: 'Delete row', delay: 100 })
+    try {
+      target.querySelector<HTMLElement>('.sv-tip__anchor')!
+        .dispatchEvent(new PointerEvent('pointerenter', { bubbles: true }))
+      vi.advanceTimersByTime(100)
+      flushSync()
+      const btn = target.querySelector<HTMLElement>('.btn')!
+      const describedby = btn.getAttribute('aria-describedby')
+      expect(describedby).toBeTruthy()
+      expect(document.getElementById(describedby!)?.getAttribute('role')).toBe('tooltip')
+    } finally { destroy() }
+  })
+})

package/src/SvTour.svelte

@@ -98,14 +98,34 @@
   })
 
   const POP_W = 300
+  // Measured popover height, so placement can keep the WHOLE popover on-screen
+  // (long content + tall targets used to push it off the top).
+  let popH = $state(200)
   const pop = $derived.by(() => {
     if (typeof window === 'undefined' || !rect) {
       return { top: '50%', left: '50%', transform: 'translate(-50%, -50%)', place: 'center' as const }
     }
-    const left = Math.max(12, Math.min(rect.left, window.innerWidth - POP_W - 12))
-    const below = window.innerHeight - rect.bottom
-    if (below > 190) return { top: `${rect.bottom + 10}px`, left: `${left}px`, transform: 'none', place: 'bottom' as const }
-    return { top: `${rect.top - 10}px`, left: `${left}px`, transform: 'translateY(-100%)', place: 'top' as const }
+    const vw = window.innerWidth
+    const vh = window.innerHeight
+    const gap = 12
+    const h = popH || 200
+    const clampTop = (t: number) => Math.max(gap, Math.min(t, vh - h - gap))
+    const clampLeft = (l: number) => Math.max(gap, Math.min(l, vw - POP_W - gap))
+    // Prefer directly below the target, then directly above - but only when the
+    // target is short enough to leave room for the whole popover.
+    if (vh - rect.bottom >= h + gap) {
+      return { top: `${rect.bottom + 10}px`, left: `${clampLeft(rect.left)}px`, transform: 'none', place: 'bottom' as const }
+    }
+    if (rect.top >= h + gap) {
+      return { top: `${clampTop(rect.top - 10 - h)}px`, left: `${clampLeft(rect.left)}px`, transform: 'none', place: 'top' as const }
+    }
+    // Tall target (a full-height rail / canvas / inspector): sit BESIDE it,
+    // vertically centred on the target, on whichever side has room.
+    const top = clampTop(rect.top + rect.height / 2 - h / 2)
+    if (vw - rect.right >= POP_W + gap) return { top: `${top}px`, left: `${rect.right + 10}px`, transform: 'none', place: 'center' as const }
+    if (rect.left >= POP_W + gap) return { top: `${top}px`, left: `${rect.left - POP_W - 10}px`, transform: 'none', place: 'center' as const }
+    // No side room either - centre horizontally (still fully visible).
+    return { top: `${top}px`, left: `${clampLeft((vw - POP_W) / 2)}px`, transform: 'none', place: 'center' as const }
   })
 </script>
 
@@ -125,6 +145,7 @@
 
     <div
       bind:this={popEl}
+      bind:clientHeight={popH}
       class="sv-tour__pop sv-tour__pop--{pop.place}"
       style:top={pop.top}
       style:left={pop.left}
@@ -133,6 +154,11 @@
       aria-modal="true"
       aria-label={step.title ?? 'Tour step'}
     >
+      {#if step.image}
+        <div class="sv-tour__media">
+          {#if /^(https?:|data:|\/)/.test(step.image)}<img class="sv-tour__img" src={step.image} alt="" />{:else}{@html step.image}{/if}
+        </div>
+      {/if}
       {#if step.title}<div class="sv-tour__title">{step.title}</div>{/if}
       <div class="sv-tour__body">{step.content}</div>
       <div class="sv-tour__foot">
@@ -163,6 +189,8 @@
   }
   @keyframes sv-tour-in { from { opacity: 0; transform: translateY(4px) } }
   :global(.sv-tour__pop--top) { animation: none; }
+  :global(.sv-tour__media) { margin: -2px -4px 12px; border-radius: 9px; overflow: hidden; line-height: 0; }
+  :global(.sv-tour__media svg), :global(.sv-tour__img) { display: block; width: 100%; height: auto; }
   :global(.sv-tour__title) { font-size: 14.5px; font-weight: 650; margin-bottom: 4px; }
   :global(.sv-tour__body) { font-size: 13px; line-height: 1.55; color: var(--sg-fg, #334155); }
   :global(.sv-tour__foot) { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }

package/src/SvTreeSelect.svelte

@@ -166,6 +166,7 @@
       aria-label={label ?? ariaLabel ?? 'Tree'}
       aria-activedescendant={ts.activeDescendant()}
       tabindex="0"
+      style:max-height={`${ts.rect.maxHeight}px`}
       onkeydown={ts.onPanelKeydown}
     >
       {#each rows as row, i (row.node.value)}

package/src/build-api.ts

@@ -40,6 +40,7 @@ import {
   type TableFeatures,
 } from "./index";
 import "./sv-grid-scrollbar";
+import { untrack } from "svelte";
 import type { Snippet } from "svelte";
 import { getKeyboardIntent, getNextActiveCell } from "./keyboard";
 import {
@@ -372,63 +373,77 @@ export function createGridApi<
         ctx.grid.setGrouping([...columnIds]);
       },
       setFilter(columnId, filter) {
-        // Honour the column's `filterable` opt-out. Same approach as
-        // `setSort` - `getCanFilter()` already combines the feature flag
-        // and the per-column field.
-        const col = ctx.allColumns.find((c: any) => c.id === columnId);
-        if (col && !col.getCanFilter?.()) return;
-        if (!filter) {
-          this.clearFilter(columnId);
-          return;
-        }
-        ctx.filterMenuValues = {
-          ...ctx.filterMenuValues,
-          [columnId]: {
-            operator: filter.operator,
-            value: filter.value ?? "",
-            ...(filter.operator === "between"
-              ? { valueTo: filter.valueTo ?? "" }
-              : {}),
-            // Optional second condition + join (multi-condition filtering).
-            ...(filter.operator2
-              ? {
-                  operator2: filter.operator2,
-                  value2: filter.value2 ?? "",
-                  join: filter.join ?? "AND",
-                  ...(filter.operator2 === "between"
-                    ? { valueTo2: filter.valueTo2 ?? "" }
-                    : {}),
-                }
-              : {}),
-          },
-        };
+        // `untrack`: these imperative mutators read the same filter state they
+        // write (read-modify-write on `filterMenuValues`). When a consumer
+        // calls them from inside a reactive `$effect`, that internal read would
+        // otherwise be captured as a dependency of the caller's effect, and the
+        // write would re-dirty it - an infinite update loop. Untracking the
+        // body keeps the API safe to drive from an effect.
+        untrack(() => {
+          // Honour the column's `filterable` opt-out. Same approach as
+          // `setSort` - `getCanFilter()` already combines the feature flag
+          // and the per-column field.
+          const col = ctx.allColumns.find((c: any) => c.id === columnId);
+          if (col && !col.getCanFilter?.()) return;
+          if (!filter) {
+            this.clearFilter(columnId);
+            return;
+          }
+          ctx.filterMenuValues = {
+            ...ctx.filterMenuValues,
+            [columnId]: {
+              operator: filter.operator,
+              value: filter.value ?? "",
+              ...(filter.operator === "between"
+                ? { valueTo: filter.valueTo ?? "" }
+                : {}),
+              // Optional second condition + join (multi-condition filtering).
+              ...(filter.operator2
+                ? {
+                    operator2: filter.operator2,
+                    value2: filter.value2 ?? "",
+                    join: filter.join ?? "AND",
+                    ...(filter.operator2 === "between"
+                      ? { valueTo2: filter.valueTo2 ?? "" }
+                      : {}),
+                  }
+                : {}),
+            },
+          };
+        });
       },
       setFacetFilter(columnId, values) {
-        // Empty array OR null both mean "clear this column's facet" -
-        // mirrors how the column menu treats unchecking the last value.
-        if (!values || values.length === 0) {
-          if (ctx.valueFilters[columnId]) {
-            const next = { ...ctx.valueFilters };
-            delete next[columnId];
-            ctx.valueFilters = next;
+        // See `setFilter` for why the read-modify-write is untracked.
+        untrack(() => {
+          // Empty array OR null both mean "clear this column's facet" -
+          // mirrors how the column menu treats unchecking the last value.
+          if (!values || values.length === 0) {
+            if (ctx.valueFilters[columnId]) {
+              const next = { ...ctx.valueFilters };
+              delete next[columnId];
+              ctx.valueFilters = next;
+            }
+            return;
           }
-          return;
-        }
-        ctx.valueFilters = {
-          ...ctx.valueFilters,
-          [columnId]: new Set(values),
-        };
+          ctx.valueFilters = {
+            ...ctx.valueFilters,
+            [columnId]: new Set(values),
+          };
+        });
       },
       clearFilter(columnId) {
         ctx.clearColumnFilter(columnId);
       },
       clearAllFilters() {
-        // Wipe every filter surface in one go: column-menu, filter-row, set
-        // filters, and the global search box.
-        ctx.filterMenuValues = {};
-        ctx.filterRowValues = {};
-        ctx.valueFilters = {};
-        if (ctx.globalFilter !== "") ctx.globalFilter = "";
+        // See `setFilter` for why the read-modify-write is untracked.
+        untrack(() => {
+          // Wipe every filter surface in one go: column-menu, filter-row, set
+          // filters, and the global search box.
+          ctx.filterMenuValues = {};
+          ctx.filterRowValues = {};
+          ctx.valueFilters = {};
+          if (ctx.globalFilter !== "") ctx.globalFilter = "";
+        });
       },
       getFilters() {
         // Return a defensive copy so callers can't mutate internal state.
@@ -793,7 +808,12 @@ export function createGridApi<
           const sorting = state.sorting.map((s) => ({ id: s.id, desc: s.desc }));
           ctx.grid.store.setState((prev: any) => ({ ...prev, sorting }));
         }
-        if (state.grouping) ctx.grid.setGrouping([...state.grouping]);
+        if (state.grouping) {
+          // Drop grouping by columns that no longer exist (#53) - otherwise a
+          // saved view collapses every row into a group named 'undefined'.
+          const existing = new Set((ctx.grid.getAllColumns() as any[]).map((c) => c.id));
+          ctx.grid.setGrouping(state.grouping.filter((id: string) => existing.has(id)));
+        }
         if (state.pagination) {
           const p = state.pagination;
           ctx.grid.setPagination((prev: any) => ({ ...prev, ...p }));
@@ -806,7 +826,10 @@ export function createGridApi<
           };
         if (state.columnOrder) ctx.setColumnOrderInternal(state.columnOrder);
         if (state.hiddenColumns) {
-          const next: Record<string, boolean> = {};
+          // Seed from columns declared `visible: false` so a partial/empty saved
+          // state never un-hides an app-declared-hidden column (#54); then layer
+          // the saved user-driven hides on top.
+          const next: Record<string, boolean> = { ...ctx.declaredHiddenColumns };
           for (const id of state.hiddenColumns) next[id] = true;
           ctx.hiddenColumns = next;
         }

package/src/columns.ts

@@ -283,6 +283,11 @@ export function createColumns<
     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 as HTMLElement | null)?.setPointerCapture?.(event.pointerId);
+    } catch { /* capture is best-effort */ }
     document.addEventListener("pointermove", onColumnResizeMove);
     document.addEventListener("pointerup", endColumnResize);
     document.addEventListener("pointercancel", endColumnResize);

package/src/conditional-formatting.test.ts

@@ -104,4 +104,108 @@ describe('resolveCellFormat', () => {
       formatsNeedingStats([{ type: 'dataBar', color: '#000' }]),
     ).toBe(true)
   })
+
+  it('compareColumn formats do not need column stats', () => {
+    expect(
+      formatsNeedingStats([
+        { type: 'colorScale', min: '#000', max: '#fff', compareColumn: 'target' },
+      ]),
+    ).toBe(false)
+  })
+})
+
+describe('resolveCellFormat - gradient extensions', () => {
+  const stat = { min: 0, max: 100 }
+
+  it('alpha mode interpolates opacity over a single base color', () => {
+    const fmts: ConditionalFormat[] = [
+      { type: 'colorScale', mode: 'alpha', base: '#2563eb', alphaBounds: [0, 1] },
+    ]
+    expect(resolveCellFormat(0, {}, 'c', fmts, stat).background).toBe('rgba(37, 99, 235, 0.000)')
+    expect(resolveCellFormat(100, {}, 'c', fmts, stat).background).toBe('rgba(37, 99, 235, 1.000)')
+    expect(resolveCellFormat(50, {}, 'c', fmts, stat).background).toBe('rgba(37, 99, 235, 0.500)')
+  })
+
+  it('alpha mode leaves the text color untouched (translucent tint)', () => {
+    const fmts: ConditionalFormat[] = [{ type: 'colorScale', mode: 'alpha' }]
+    expect(resolveCellFormat(80, {}, 'c', fmts, stat).color).toBeUndefined()
+  })
+
+  it('reverse flips the ramp position', () => {
+    const fmts: ConditionalFormat[] = [
+      { type: 'colorScale', min: '#ff0000', max: '#00ff00', reverse: true },
+    ]
+    expect(resolveCellFormat(0, {}, 'c', fmts, stat).background).toBe('#00ff00')
+    expect(resolveCellFormat(100, {}, 'c', fmts, stat).background).toBe('#ff0000')
+  })
+
+  it('zeroCentred maps 0 to the midpoint symmetrically', () => {
+    const fmts: ConditionalFormat[] = [
+      { type: 'colorScale', min: '#ff0000', mid: '#ffffff', max: '#00ff00', zeroCentred: true },
+    ]
+    const s = { min: -80, max: 100 } // bound = max(|-80|,|100|) = 100
+    expect(resolveCellFormat(0, {}, 'c', fmts, s).background).toBe('#ffffff')
+    expect(resolveCellFormat(100, {}, 'c', fmts, s).background).toBe('#00ff00')
+    expect(resolveCellFormat(-100, {}, 'c', fmts, s).background).toBe('#ff0000')
+  })
+
+  it('percent bounds map 0..100 onto the column span', () => {
+    const fmts: ConditionalFormat[] = [
+      { type: 'colorScale', min: '#000000', max: '#ffffff', bounds: 'percent', minValue: 50, maxValue: 100 },
+    ]
+    // span 0..100, so minValue 50 -> data 50, below it clamps to min color
+    expect(resolveCellFormat(50, {}, 'c', fmts, stat).background).toBe('#000000')
+    expect(resolveCellFormat(100, {}, 'c', fmts, stat).background).toBe('#ffffff')
+    expect(resolveCellFormat(25, {}, 'c', fmts, stat).background).toBe('#000000')
+  })
+
+  it('N-stop scale interpolates within a band', () => {
+    const fmts: ConditionalFormat[] = [
+      {
+        type: 'colorScale',
+        stops: [
+          { offset: 0, color: '#ff0000' },
+          { offset: 0.5, color: '#ffffff' },
+          { offset: 1, color: '#00ff00' },
+        ],
+      },
+    ]
+    expect(resolveCellFormat(50, {}, 'c', fmts, stat).background).toBe('#ffffff')
+    expect(resolveCellFormat(0, {}, 'c', fmts, stat).background).toBe('#ff0000')
+  })
+
+  it('compareColumn tints by proportion of another field, no column stats', () => {
+    const fmts: ConditionalFormat[] = [
+      { type: 'colorScale', min: '#000000', max: '#ffffff', compareColumn: 'target' },
+    ]
+    expect(resolveCellFormat(50, { target: 100 }, 'c', fmts, null).background).toBe('#808080')
+    expect(resolveCellFormat(100, { target: 100 }, 'c', fmts, null).background).toBe('#ffffff')
+    // zero / missing target -> skip
+    expect(resolveCellFormat(50, { target: 0 }, 'c', fmts, null).background).toBeUndefined()
+  })
+
+  it('dataBar compareColumn sizes the bar against another field', () => {
+    const fmts: ConditionalFormat[] = [
+      { type: 'dataBar', color: '#2563eb', compareColumn: 'target' },
+    ]
+    expect(resolveCellFormat(30, { target: 120 }, 'c', fmts, null).dataBar?.percent).toBeCloseTo(25)
+  })
+
+  it('tooltip surfaces value or percent position', () => {
+    const valFmt: ConditionalFormat[] = [
+      { type: 'colorScale', min: '#000', max: '#fff', tooltip: 'value' },
+    ]
+    expect(resolveCellFormat(42, {}, 'c', valFmt, stat).title).toBe('42')
+    const pctFmt: ConditionalFormat[] = [
+      { type: 'colorScale', min: '#000', max: '#fff', tooltip: 'percent' },
+    ]
+    expect(resolveCellFormat(25, {}, 'c', pctFmt, stat).title).toBe('25%')
+  })
+
+  it('data bar gradient flag flows through to the resolved bar', () => {
+    const fmts: ConditionalFormat[] = [
+      { type: 'dataBar', color: '#2563eb', gradient: true },
+    ]
+    expect(resolveCellFormat(50, {}, 'c', fmts, stat).dataBar?.gradient).toBe(true)
+  })
 })