@svgrid/grid 3.0.3 → 4.0.0

package/src/virtualization/virtualizer.ts

@@ -33,29 +33,46 @@ function sameState(a: VirtualizerState, b: VirtualizerState) {
   for (let i = 0; i < a.items.length; i += 1) {
     const ai = a.items[i]!
     const bi = b.items[i]!
-    if (ai.index !== bi.index || ai.start !== bi.start || ai.size !== bi.size) return false
+    if (ai.index !== bi.index || ai.start !== bi.start || ai.size !== bi.size || ai.key !== bi.key) return false
   }
   return true
 }
 
-// Slot-based keying: the key is the POSITION of the item inside the
-// visible window (slot 0 = topmost rendered row, slot 1 = next, etc.)
-// - NOT the data index. As the user scrolls, the window's startIndex
-// changes but the slot keys stay the same (0..N-1), so Svelte recycles
-// the existing <tr> DOM nodes and only updates their data + position.
+// Slot-based keying: the key is a SLOT number, not the data index, so the
+// same N <tr> nodes stay alive for the lifetime of the grid and scrolling
+// never mounts or unmounts a row. With data-index keys, scrolling down one
+// row meant the old topmost key disappeared and a new bottommost key
+// appeared, so Svelte unmounted the top <tr> and mounted a fresh one at the
+// bottom on every scroll tick.
 //
-// This avoids the mount/unmount churn that previously fired on every
-// scroll tick: with data-index keys, scrolling down 1 row meant the old
-// topmost key disappeared and a new bottommost key appeared, forcing
-// Svelte to unmount the top <tr> and mount a fresh one at the bottom.
-// Slot-based keys keep the same N <tr> nodes alive for the lifetime of
-// the grid; scroll just translates them via the top spacer.
+// The slot for data index i is `i mod N`, N being the window length. That
+// matters for what a one-row scroll costs: while N holds, a row that stays
+// inside the window keeps its slot, so Svelte keeps its <tr> and touches
+// nothing in it, and only the row that entered gets new content - the keyed
+// each moves that one <tr> to the other end with a single `insertBefore`.
+// The earlier `i - startIndex` slot scheme handed EVERY rendered row a new
+// index on every one-row scroll, so an arrow key re-rendered all ~30 rows x
+// every rendered column to shift the data up by one.
+//
+// The modulus has to be EXACTLY N, not merely >= N: under a larger modulus
+// the window's residues are a proper subset, so each one-row scroll drops
+// one residue and picks up another, and Svelte unmounts a <tr> and mounts a
+// fresh one instead of moving it (measured: mount + unmount per arrow key,
+// zero moves). When N changes - the top and bottom overscan clamping on the
+// first and last rows, a resize, variable row heights - every slot remaps
+// and the whole window re-renders once, which is what the old scheme did on
+// every tick.
+function slotKey(index: number, windowLength: number): string {
+  return `virtual_slot_${index % windowLength}`
+}
+
 function buildUniformItems(
   startIndex: number,
   endIndex: number,
   estimateSize: number,
 ): Array<VirtualItem> {
   const items: Array<VirtualItem> = []
+  const windowLength = endIndex - startIndex + 1
   for (let index = startIndex; index <= endIndex; index += 1) {
     const start = index * estimateSize
     items.push({
@@ -63,7 +80,7 @@ function buildUniformItems(
       start,
       size: estimateSize,
       end: start + estimateSize,
-      key: `virtual_slot_${index - startIndex}`,
+      key: slotKey(index, windowLength),
     })
   }
   return items
@@ -91,8 +108,8 @@ export function buildPreMeasureItems(
   if (count <= 0) return []
   const size = Math.max(estimateSize, 1)
   const visible = Math.ceil(Math.max(viewportHeight, 0) / size)
-  const endIndex = Math.min(visible + Math.max(overscan, 0), count - 1)
-  return buildUniformItems(0, Math.max(endIndex, 0), size)
+  const endIndex = Math.max(Math.min(visible + Math.max(overscan, 0), count - 1), 0)
+  return buildUniformItems(0, endIndex, size)
 }
 
 function buildVariableItems(
@@ -101,6 +118,7 @@ function buildVariableItems(
   offsets: Array<number>,
 ): Array<VirtualItem> {
   const items: Array<VirtualItem> = []
+  const windowLength = endIndex - startIndex + 1
   for (let index = startIndex; index <= endIndex; index += 1) {
     const start = offsets[index] ?? 0
     const end = offsets[index + 1] ?? start
@@ -109,7 +127,7 @@ function buildVariableItems(
       start,
       size: end - start,
       end,
-      key: `virtual_slot_${index - startIndex}`,
+      key: slotKey(index, windowLength),
     })
   }
   return items
@@ -215,8 +233,12 @@ export function createVirtualizer(initial: VirtualizerOptions) {
     const sizeFn = options.estimateSize
     const offsets = new Array<number>(count + 1)
     offsets[0] = 0
+    // A size of 0 is a real size: a collapsed row or column takes no room
+    // and both searches below stay monotonic over equal offsets. Only a
+    // negative size is nonsense. The floor used to be 1, which left every
+    // hidden column a one-pixel sliver.
     for (let i = 0; i < count; i += 1) {
-      offsets[i + 1] = offsets[i]! + Math.max(sizeFn(i), 1)
+      offsets[i + 1] = offsets[i]! + Math.max(sizeFn(i), 0)
     }
     offsetCache = { fn: sizeFn, count, offsets }
     return offsets

package/dist/SvGroupCell.svelte

@@ -1,141 +0,0 @@
-<!--
-  Built-in group cell for the server-side group/tree model. Drop it into the
-  grouping column and it draws the expander + indentation for group rows (and an
-  indented leaf value) - no hand-written cell recipe. Pair with `serverGroupRows`
-  to feed `<SvGrid data>`, and wire `onToggle` to the controller's `toggleGroup`.
-
-      cell: (ctx) => renderComponent(SvGroupCell, {
-        row: ctx.row.original, onToggle: ctl.toggleGroup, leafField: 'name',
-      })
--->
-<script lang="ts" generics="TData">
-  import type { ServerDisplayRow } from './server-data-source'
-  import type { GridIcons } from './grid-icons'
-
-  type GroupGridRow = { __group?: ServerDisplayRow<TData> } & Record<string, unknown>
-  type Props = {
-    /** The grid row from `serverGroupRows` (carries the `__group` marker). */
-    row: GroupGridRow
-    /**
-     * Expand / collapse a group, or load more children. Receives the grid row;
-     * wire to `serverGroupNav(ctl).onToggle` (which drives clicks and keyboard).
-     */
-    onToggle: (row: GroupGridRow) => void
-    /** Field to show for leaf rows in the group column (blank if omitted). */
-    leafField?: string
-    /** Pixels of indentation per level. Default 18. */
-    indent?: number
-    /**
-     * Icon overrides, the same map `<SvGrid icons>` takes. Only
-     * `chevron-right` is drawn here. You mount this component yourself, so it
-     * cannot inherit the grid's icons - pass the same object to both to keep
-     * the expander consistent with the rest of the chrome.
-     */
-    icons?: GridIcons
-  }
-
-  let { row, onToggle, leafField, indent = 18, icons }: Props = $props()
-  const chevron = $derived(icons?.['chevron-right'])
-  const meta = $derived(row.__group)
-</script>
-
-{#if meta && meta.kind === 'group'}
-  <button
-    type="button"
-    class="sv-group-cell"
-    style={`padding-inline-start: ${meta.level * indent}px`}
-    aria-expanded={meta.expanded}
-    aria-label={meta.expanded ? 'Collapse group' : 'Expand group'}
-    onclick={() => onToggle(row)}
-  >
-    <!-- Same chevron the grid's own expanders and SvTree draw, so every
-         expander in the library looks identical. -->
-    <span class="sv-group-chev" class:open={meta.expanded} aria-hidden="true">
-      {#if chevron}
-        {@render chevron()}
-      {:else}
-        <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor"
-          stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6" /></svg>
-      {/if}
-    </span>
-    <span class="sv-group-key">{meta.key}</span>
-    {#if meta.loading}<span class="sv-group-load" aria-hidden="true">…</span>{/if}
-  </button>
-{:else if meta && meta.kind === 'more'}
-  <button
-    type="button"
-    class="sv-group-more"
-    style={`padding-inline-start: ${meta.level * indent}px`}
-    disabled={meta.loading}
-    onclick={() => onToggle(row)}
-  >
-    {meta.loading ? 'Loading...' : `Load ${meta.remaining} more`}
-  </button>
-{:else if meta && meta.kind === 'footer'}
-  <span class="sv-group-footer" style={`padding-inline-start: ${meta.level * indent}px`}>Total</span>
-{:else if meta && meta.kind === 'skeleton'}
-  <span class="sv-group-skeleton" style={`margin-inline-start: ${meta.level * indent}px`} aria-hidden="true"></span>
-{:else if meta}
-  <span class="sv-group-leaf" style={`padding-inline-start: ${(meta.level + 1) * indent}px`}>
-    {leafField ? (row[leafField] ?? '') : ''}
-  </span>
-{/if}
-
-<style>
-  .sv-group-cell {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    background: none;
-    border: 0;
-    padding: 0;
-    font: inherit;
-    color: inherit;
-    cursor: pointer;
-  }
-  .sv-group-chev {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 12px;
-    height: 12px;
-    transition: transform 0.15s;
-    color: var(--sg-muted, #64748b);
-  }
-  /* An `icons` override renders inside this wrapper, and this style block is
-     scoped, so its markup needs :global() to be reached. Sizing it here means
-     a custom chevron lands in the same box as the built-in and rotates with
-     the wrapper rather than needing to know the rule exists. */
-  .sv-group-chev :global(svg),
-  .sv-group-chev :global(img) {
-    width: 100%;
-    height: 100%;
-    display: block;
-  }
-  .sv-group-chev.open { transform: rotate(90deg); }
-  .sv-group-key { font-weight: 600; }
-  .sv-group-load { color: var(--sg-muted, #64748b); font-size: 12px; }
-  .sv-group-leaf { color: var(--sg-muted, #475569); }
-  .sv-group-more {
-    background: none;
-    border: 0;
-    padding: 0;
-    font: inherit;
-    font-size: 13px;
-    color: var(--sg-accent, #2563eb);
-    cursor: pointer;
-  }
-  .sv-group-more:disabled { color: var(--sg-muted, #64748b); cursor: default; }
-  .sv-group-footer { font-weight: 600; color: var(--sg-muted, #64748b); font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; }
-  .sv-group-skeleton {
-    display: inline-block;
-    width: 60%;
-    height: 10px;
-    border-radius: 5px;
-    background: linear-gradient(90deg, var(--sg-border, #e2e8f0) 25%, var(--sg-header-bg, #f1f5f9) 50%, var(--sg-border, #e2e8f0) 75%);
-    background-size: 200% 100%;
-    animation: sv-group-shimmer 1.2s infinite;
-  }
-  @keyframes sv-group-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
-  @media (prefers-reduced-motion: reduce) { .sv-group-skeleton { animation: none; } }
-</style>

package/dist/SvGroupCell.svelte.d.ts

@@ -1,49 +0,0 @@
-import type { ServerDisplayRow } from './server-data-source.js';
-import type { GridIcons } from './grid-icons.js';
-declare function $$render<TData>(): {
-    props: {
-        /** The grid row from `serverGroupRows` (carries the `__group` marker). */
-        row: {
-            __group?: ServerDisplayRow<TData>;
-        } & Record<string, unknown>;
-        /**
-         * Expand / collapse a group, or load more children. Receives the grid row;
-         * wire to `serverGroupNav(ctl).onToggle` (which drives clicks and keyboard).
-         */
-        onToggle: (row: {
-            __group?: ServerDisplayRow<TData>;
-        } & Record<string, unknown>) => void;
-        /** Field to show for leaf rows in the group column (blank if omitted). */
-        leafField?: string;
-        /** Pixels of indentation per level. Default 18. */
-        indent?: number;
-        /**
-         * Icon overrides, the same map `<SvGrid icons>` takes. Only
-         * `chevron-right` is drawn here. You mount this component yourself, so it
-         * cannot inherit the grid's icons - pass the same object to both to keep
-         * the expander consistent with the rest of the chrome.
-         */
-        icons?: GridIcons;
-    };
-    exports: {};
-    bindings: "";
-    slots: {};
-    events: {};
-};
-declare class __sveltets_Render<TData> {
-    props(): ReturnType<typeof $$render<TData>>['props'];
-    events(): ReturnType<typeof $$render<TData>>['events'];
-    slots(): ReturnType<typeof $$render<TData>>['slots'];
-    bindings(): "";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <TData>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData>['props']>, ReturnType<__sveltets_Render<TData>['events']>, ReturnType<__sveltets_Render<TData>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<TData>['bindings']>;
-    } & ReturnType<__sveltets_Render<TData>['exports']>;
-    <TData>(internal: unknown, props: ReturnType<__sveltets_Render<TData>['props']> & {}): ReturnType<__sveltets_Render<TData>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const SvGroupCell: $$IsomorphicComponent;
-type SvGroupCell<TData> = InstanceType<typeof SvGroupCell<TData>>;
-export default SvGroupCell;

package/dist/SvRowGroupPanel.svelte

@@ -1,186 +0,0 @@
-<!--
-  A row-group panel (like the "drag columns to group" bar in enterprise grids).
-  Shows the current group-by columns as chips you can remove or drag to reorder,
-  plus a "+ Group by" menu to add one. It is also a drop target: a column drag
-  that carries `text/sv-column` (its column id) adds that column. Wire `onChange`
-  to a server group model's `setGroupBy`, or to client grouping.
-
-      <SvRowGroupPanel
-        columns={[{ id: 'region', label: 'Region' }, { id: 'country', label: 'Country' }]}
-        groupBy={view.groupBy}
-        onChange={(g) => ctl.setGroupBy(g)}
-      />
--->
-<script lang="ts">
-  import { GRID_ICON_GLYPHS, type GridIconName, type GridIcons } from './grid-icons'
-
-  type Col = { id: string; label: string }
-  type Props = {
-    /** Columns that can be grouped on. */
-    columns: Col[]
-    /** Current group-by column ids, outer to inner. */
-    groupBy: string[]
-    /** Called with the new group-by order. */
-    onChange: (groupBy: string[]) => void
-    /** Text shown when nothing is grouped. */
-    placeholder?: string
-    /**
-     * Icon overrides, the same map `<SvGrid icons>` takes. This panel draws
-     * `drag-handle`, `remove` and `breadcrumb-separator`. You mount it
-     * yourself, so pass the same object you gave the grid to keep them
-     * consistent.
-     */
-    icons?: GridIcons
-  }
-  let { columns, groupBy, onChange, placeholder = 'Drag a column here to group by it', icons }: Props = $props()
-
-  const labelOf = (id: string) => columns.find((c) => c.id === id)?.label ?? id
-  const available = $derived(columns.filter((c) => !groupBy.includes(c.id)))
-
-  let dragIndex = $state<number | null>(null)
-
-  function remove(id: string) {
-    onChange(groupBy.filter((g) => g !== id))
-  }
-  function add(id: string) {
-    if (id && !groupBy.includes(id)) onChange([...groupBy, id])
-  }
-  function reorder(to: number) {
-    if (dragIndex === null || dragIndex === to) return
-    const next = [...groupBy]
-    const [moved] = next.splice(dragIndex, 1)
-    next.splice(to, 0, moved!)
-    dragIndex = null
-    onChange(next)
-  }
-  function onPanelDrop(e: DragEvent) {
-    const id = e.dataTransfer?.getData('text/sv-column')
-    if (id) add(id)
-  }
-  /** Keyboard equivalent of dragging a chip: moves the chip at `i` one slot earlier/later,
-   *  reusing `reorder()` (via `dragIndex`) so there is a single source of truth for the move. */
-  function moveByKeyboard(i: number, delta: number) {
-    const to = i + delta
-    if (to < 0 || to >= groupBy.length) return
-    dragIndex = i
-    reorder(to)
-  }
-  function onChipKeydown(e: KeyboardEvent, i: number) {
-    if (!e.altKey) return
-    if (e.key === 'ArrowLeft') {
-      e.preventDefault()
-      moveByKeyboard(i, -1)
-    } else if (e.key === 'ArrowRight') {
-      e.preventDefault()
-      moveByKeyboard(i, 1)
-    }
-  }
-</script>
-
-<!-- Same override-or-default resolution SvGrid uses, kept local because this
-     component is mounted by the consumer and never sees the grid's snippet. -->
-{#snippet ic(name: GridIconName)}
-  {@const override = icons?.[name]}
-  {#if override}{@render override()}{:else}{GRID_ICON_GLYPHS[name]}{/if}
-{/snippet}
-
-<div
-  class="sv-rowgroup-panel"
-  role="group"
-  aria-label="Row groups"
-  ondragover={(e) => e.preventDefault()}
-  ondrop={onPanelDrop}
->
-  <span class="sv-rgp-label" aria-hidden="true">Group by:</span>
-  {#if groupBy.length === 0}
-    <span class="sv-rgp-empty">{placeholder}</span>
-  {:else}
-    {#each groupBy as id, i (id)}
-      {#if i > 0}<span class="sv-rgp-sep" aria-hidden="true">{@render ic('breadcrumb-separator')}</span>{/if}
-      <!-- svelte-ignore a11y_no_noninteractive_tabindex, a11y_no_noninteractive_element_interactions -->
-      <span
-        class="sv-rgp-chip"
-        class:sv-rgp-chip-drag={dragIndex === i}
-        role="group"
-        tabindex="0"
-        aria-label={`Grouped by ${labelOf(id)}, position ${i + 1} of ${groupBy.length}. Press Alt+Arrow keys to reorder.`}
-        draggable="true"
-        ondragstart={() => (dragIndex = i)}
-        ondragend={() => (dragIndex = null)}
-        ondragover={(e) => e.preventDefault()}
-        ondrop={() => reorder(i)}
-        onkeydown={(e) => onChipKeydown(e, i)}
-      >
-        <span class="sv-rgp-grip" aria-hidden="true">{@render ic('drag-handle')}</span>
-        {labelOf(id)}
-        <button type="button" class="sv-rgp-x" onclick={() => remove(id)} aria-label={`Stop grouping by ${labelOf(id)}`}>{@render ic('remove')}</button>
-      </span>
-    {/each}
-  {/if}
-  {#if available.length}
-    <select
-      class="sv-rgp-add"
-      aria-label="Add a group column"
-      onchange={(e) => { add(e.currentTarget.value); e.currentTarget.value = '' }}
-    >
-      <option value="">+ Group by</option>
-      {#each available as c (c.id)}<option value={c.id}>{c.label}</option>{/each}
-    </select>
-  {/if}
-</div>
-
-<style>
-  .sv-rowgroup-panel {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    gap: 6px;
-    padding: 8px 10px;
-    border: 1px dashed var(--sg-border, #cbd5e1);
-    border-radius: 10px;
-    background: var(--sg-header-bg, #f8fafc);
-    font-size: 13px;
-  }
-  .sv-rgp-label { color: var(--sg-muted, #64748b); font-weight: 600; }
-  .sv-rgp-empty { color: var(--sg-muted, #94a3b8); font-style: italic; }
-  .sv-rgp-sep { color: var(--sg-muted, #94a3b8); }
-  .sv-rgp-chip {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    padding: 3px 6px 3px 8px;
-    border-radius: 999px;
-    background: var(--sg-bg, #fff);
-    border: 1px solid var(--sg-border, #e2e8f0);
-    cursor: grab;
-    user-select: none;
-    font-weight: 600;
-  }
-  .sv-rgp-chip-drag { opacity: 0.5; }
-  .sv-rgp-grip { color: var(--sg-muted, #94a3b8); cursor: grab; }
-  .sv-rgp-x {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 16px;
-    height: 16px;
-    border: 0;
-    border-radius: 50%;
-    background: none;
-    color: var(--sg-muted, #64748b);
-    cursor: pointer;
-    font-size: 14px;
-    line-height: 1;
-  }
-  .sv-rgp-x:hover { background: var(--sg-header-bg, #f1f5f9); color: var(--sg-fg, #0f172a); }
-  .sv-rgp-add {
-    font: inherit;
-    font-size: 13px;
-    padding: 4px 8px;
-    border-radius: 8px;
-    border: 1px solid var(--sg-border, #e2e8f0);
-    background: var(--sg-bg, #fff);
-    color: var(--sg-accent, #2563eb);
-    cursor: pointer;
-  }
-</style>

package/dist/SvRowGroupPanel.svelte.d.ts

@@ -1,25 +0,0 @@
-import { type GridIcons } from './grid-icons.js';
-type Col = {
-    id: string;
-    label: string;
-};
-type Props = {
-    /** Columns that can be grouped on. */
-    columns: Col[];
-    /** Current group-by column ids, outer to inner. */
-    groupBy: string[];
-    /** Called with the new group-by order. */
-    onChange: (groupBy: string[]) => void;
-    /** Text shown when nothing is grouped. */
-    placeholder?: string;
-    /**
-     * Icon overrides, the same map `<SvGrid icons>` takes. This panel draws
-     * `drag-handle`, `remove` and `breadcrumb-separator`. You mount it
-     * yourself, so pass the same object you gave the grid to keep them
-     * consistent.
-     */
-    icons?: GridIcons;
-};
-declare const SvRowGroupPanel: import("svelte").Component<Props, {}, "">;
-type SvRowGroupPanel = ReturnType<typeof SvRowGroupPanel>;
-export default SvRowGroupPanel;