@svgrid/grid 2.2.32 → 2.2.34

package/dist/DockNodeView.svelte

@@ -42,7 +42,7 @@
 
     const onMove = (ev: PointerEvent) => {
       const delta = ((vertical ? ev.clientY : ev.clientX) - startPos) / total
-      let fa = Math.min(Math.max(startSizes[a]! + delta, minA), pairTotal - minB)
+      const fa = Math.min(Math.max(startSizes[a]! + delta, minA), pairTotal - minB)
       const next = startSizes.slice()
       next[a] = fa
       next[b] = pairTotal - fa

package/dist/GridFooter.svelte

@@ -1,50 +1,12 @@
 <script lang="ts" generics="TFeatures extends TableFeatures = TableFeatures, TData extends RowData = RowData">
   import {
-      getGridCellA11yProps,
-      getGridCellDomId,
-      getGridHeaderA11yProps,
-      getGridRootA11yProps,
-      getGridRowA11yProps,
-      type EditorContext,
-      type CellEditorOption,
-      type Column,
-      type Row,
       type RowData,
       type TableFeatures,
     } from "./index";
   import "./sv-grid-scrollbar";
-  import type { Snippet } from "svelte";
   import {
-      RenderSnippetConfig,
-      RenderComponentConfig,
-    } from "./render-component";
-  import {
-      buildSparkline,
-      toSparklineValues,
-    } from "./sparkline";
-  import SvGridDropdown from "./SvGridDropdown.svelte";
-  import type {
-      Props,
-      SelectionPoint,
-      SelectionRange,
-      CellEditState,
-      FilterOperator,
-      FilterOption,
-      MenuPosition,
-    } from "./SvGrid.types";
-  import {
-      cfTextStyle,
       fmtStat,
-      getEditableInputValue,
-      getEditorInputType,
-      toValueArray,
-      getOptionLabel,
-      getOptionColor,
-      colorfulChipStyle,
-      getEditorClass,
     } from "./SvGrid.helpers";
-  import {
-    } from "./SvGrid.controller.svelte";
   import type { SvGridController } from "./SvGrid.controller.svelte";
 
   let {
@@ -65,12 +27,29 @@
     pageSizeOptions?: number[];
   } = $props();
 
+  // SvGridDropdown is ~22 KB and exists here only to pick one of four numbers.
+  // Importing it statically also dragged it into the base bundle and silently
+  // defeated the lazy `import()` in SvGrid.svelte, which loads the same
+  // component as a cell editor. So the closed trigger below is plain markup
+  // reusing the dropdown's own classes (identical appearance), and the real
+  // component is fetched on first open. Keep this lazy: a static import here
+  // re-breaks the cell-editor split too, not just the footer.
+  let PageSizeDropdown = $state<typeof import("./SvGridDropdown.svelte").default | null>(null);
+  let loadingPageSize = $state(false);
+
+  async function openPageSize() {
+    if (PageSizeDropdown || loadingPageSize) return;
+    loadingPageSize = true;
+    try {
+      PageSizeDropdown = (await import("./SvGridDropdown.svelte")).default;
+    } finally {
+      loadingPageSize = false;
+    }
+  }
+
   // View facade: re-bind the controller's reactive members so the markup
   // (moved verbatim from SvGrid.svelte) stays identical.
   const paginationEnabled = $derived(ctrl.paginationEnabled);
-  const grid = $derived(ctrl.grid);
-  const paginationState = $derived(ctrl.paginationState);
-  const allRowsBeforePagination = $derived(ctrl.allRowsBeforePagination);
   const statusBarEnabled = $derived(ctrl.statusBarEnabled);
   const statusBarAggregates = $derived(ctrl.statusBarAggregates);
   const statusBarStats = $derived(ctrl.statusBarStats);
@@ -128,12 +107,32 @@
         <div class="sv-grid-pagination-pagesize">
           <span>{messages.pageSize}</span>
           <div class="sv-grid-pagination-pagesize-dd">
-            <SvGridDropdown
-              options={sizes.map((n) => ({ value: n, label: String(n) }))}
-              value={pageSize}
-              autoOpen={false}
-              onChange={(v) => setPageSize(Number(v))}
-            />
+            {#if PageSizeDropdown}
+              <!-- autoOpen so the click that triggered the load also opens the
+                   panel, rather than making the user click a second time. -->
+              <PageSizeDropdown
+                options={sizes.map((n) => ({ value: n, label: String(n) }))}
+                value={pageSize}
+                autoOpen={true}
+                onChange={(v) => setPageSize(Number(v))}
+              />
+            {:else}
+              <!-- Mirrors SvGridDropdown's closed trigger exactly (same classes,
+                   same ARIA) so there is no visual change and no layout shift
+                   when the real component swaps in. -->
+              <div class="sv-grid-dropdown">
+                <button
+                  type="button"
+                  class="sv-grid-dropdown-trigger"
+                  aria-haspopup="listbox"
+                  aria-expanded="false"
+                  onclick={openPageSize}
+                >
+                  <span class="sv-grid-dropdown-label">{pageSize}</span>
+                  <span class="sv-grid-dropdown-caret" aria-hidden="true">▾</span>
+                </button>
+              </div>
+            {/if}
           </div>
         </div>
         <span class="sv-grid-pagination-range">

package/dist/GridMenus.svelte

@@ -1,97 +1,21 @@
 <script lang="ts" generics="TFeatures extends TableFeatures = TableFeatures, TData extends RowData = RowData">
   import {
-    applyExcelFilter,
-    normalizeForFilter,
     splitInTokens,
     trailingInToken,
-    createColumnVirtualizer,
-    createCoreRowModel,
-    createExpandedRowModel,
-    createFilteredRowModel,
-    createGroupedRowModel,
-    createPaginatedRowModel,
-    createSvelteVirtualizer,
-    createSortedRowModel,
-    createSvGrid,
-    filterFns,
-    getGridCellA11yProps,
-    getGridCellDomId,
-    getGridHeaderA11yProps,
-    getGridRootA11yProps,
-    getGridRowA11yProps,
-    parseEditorValue,
-    normalizeEditorOptions,
-    sortFns,
-    tableFeatures,
-    rowSortingFeature,
-    columnFilteringFeature,
-    columnGroupingFeature,
-    type CellContext,
-    type EditorContext,
-    type CellEditorOption,
     type CellEditorType,
-    type CellFormatter,
-    type CellFormatConfig,
     type Column,
-    type ColumnDef,
-    type Row,
     type RowData,
-    type SvGridApi,
     type TableFeatures,
   } from "./index";
   import "./sv-grid-scrollbar";
   import { onScrollOutside } from "./a11y/dismissable";
   import type { Snippet } from "svelte";
-  import { getKeyboardIntent, getNextActiveCell } from "./keyboard";
-  import {
-    formatNumericWithConfig,
-    getDateFormatter,
-    resolveDatePattern,
-  } from "./cell-formatting";
-  import {
-    RenderSnippetConfig,
-    RenderComponentConfig,
-  } from "./render-component";
-  import { buildFillPattern } from "./fill-patterns";
-  import { buildSparkline, toSparklineValues } from "./sparkline";
-  import {
-    resolveCellFormat,
-    computeColumnStat,
-    formatsNeedingStats,
-    type ColumnStat,
-    type ResolvedCellFormat,
-  } from "./conditional-formatting";
-  import SvGridDropdown from "./SvGridDropdown.svelte";
   import SvListBox from "./SvListBox.svelte";
   import type {
-    Props,
-    SelectionPoint,
-    SelectionRange,
-    CellEditState,
     FilterOperator,
-    FilterOption,
-    MenuPosition,
   } from "./SvGrid.types";
   import {
-    cfTextStyle,
-    fmtStat,
-    getCellKey,
-    resolveClassList,
-    toDateInputValue,
-    toDateTimeLocalInputValue,
-    getEditableInputValue,
     getEditorInputType,
-    toValueArray,
-    getOptionLabel,
-    getOptionColor,
-    colorfulChipStyle,
-    getEditorClass,
-    asDate,
-    clampMenuX,
-    cssEscape,
-    rawToNumber,
-    formatFacetNumber,
-    formatFacetDate,
   } from "./SvGrid.helpers";
 
   import type { SvGridController } from "./SvGrid.controller.svelte";
@@ -103,7 +27,6 @@
   const groupingControlsEnabled = $derived(ctrl.groupingControlsEnabled);
   const filterMenuValues = $derived(ctrl.filterMenuValues);
   const tooltip = $derived(ctrl.tooltip);
-  const showTooltipFor = $derived(ctrl.showTooltipFor);
   const columnMenuFor = $derived(ctrl.columnMenuFor);
   const columnMenuPos = $derived(ctrl.columnMenuPos);
   const filterMenuFor = $derived(ctrl.filterMenuFor);

package/dist/SvDateRangeInput.svelte

@@ -20,7 +20,7 @@
   import { anchoredRect, portalToBody, popIn, type AnchoredRect } from './popover'
   import { editorAria, nextEditorId, resolveMessages, type SvEditorProps } from './editor-contract'
   import { formatDate } from './datetime/date-format'
-  import { toDate, startOfDay, type DateLike } from './datetime/date-core'
+  import { startOfDay, type DateLike } from './datetime/date-core'
   import { rangeDays } from './datetime/date-selection'
   import type { CalendarPreset } from './createCalendar.svelte'
 

package/dist/SvGrid.css

@@ -1012,6 +1012,11 @@
   width: 16px;
   height: 16px;
   margin: 0 auto;
+  /* The UA stylesheet gives <button> "padding: 1px 6px" on top of
+     "box-sizing: border-box", which leaves 2px of content width inside the
+     16px box. The glyphs below then shrink to a sliver, and the tick renders
+     as a bare slanted line. Guarded by tests/e2e/selection-checkbox.spec.ts. */
+  padding: 0;
   border: 1px solid var(--sg-input-border, #8794a8);
   border-radius: 4px;
   background: var(--sg-input-bg, #fff);
@@ -1089,6 +1094,7 @@ select.sv-grid-fr-editor {
 
 .sv-grid-checkbox[aria-checked="true"]::after {
   content: "";
+  flex: none;
   width: 5px;
   height: 9px;
   border-right: 2px solid currentColor;
@@ -1098,6 +1104,7 @@ select.sv-grid-fr-editor {
 
 .sv-grid-checkbox[aria-checked="mixed"]::after {
   content: "";
+  flex: none;
   width: 8px;
   height: 2px;
   border-radius: 1px;
@@ -2391,6 +2398,9 @@ select.sv-grid-fr-editor {
 .sv-grid-find-step, .sv-grid-find-close {
   display: inline-flex; align-items: center; justify-content: center;
   width: 22px; height: 22px;
+  /* Same fixed-box + UA <button> padding trap as .sv-grid-checkbox: without
+     this reset the 6px side padding squeezes the icon inside the 22px box. */
+  padding: 0;
   background: transparent;
   border: 0;
   color: var(--sg-muted, #64748b);

package/dist/SvGrid.svelte

@@ -17,7 +17,6 @@
   } from "./index";
   import "./sv-grid-scrollbar";
   import "./SvGrid.css";
-  import type { Snippet } from "svelte";
   import {
     RenderSnippetConfig,
     RenderComponentConfig,
@@ -36,16 +35,10 @@
   import { timeStringToDate, dateToTimeString } from "./SvGrid.helpers";
   import type {
     Props,
-    SelectionPoint,
-    SelectionRange,
-    CellEditState,
     FilterOperator,
-    FilterOption,
-    MenuPosition,
   } from "./SvGrid.types";
   import {
     cfTextStyle,
-    fmtStat,
     getEditableInputValue,
     getEditorInputType,
     toValueArray,
@@ -57,7 +50,6 @@
   import {
     splitInTokens,
     trailingInToken,
-    joinInTokens,
   } from "./filtering/excel-filters";
   import { createSvGridController } from "./SvGrid.controller.svelte";
   // GridMenus hosts tooltips + all column/filter/context menu overlays - none of
@@ -180,10 +172,8 @@
 
   // ---- View facade: re-bind the controller's reactive members as locals so the
   //      markup stays identical. Assignable state + bindings + DOM refs use c.* directly.
-  const paginationEnabled = $derived(ctrl.paginationEnabled);
   const filterRowValues = $derived(ctrl.filterRowValues);
   const filterMenuValues = $derived(ctrl.filterMenuValues);
-  const tooltip = $derived(ctrl.tooltip);
   const showTooltipFor = $derived(ctrl.showTooltipFor);
   const hideTooltip = $derived(ctrl.hideTooltip);
   const findHits = $derived(ctrl.findHits);
@@ -284,19 +274,13 @@
     id === "__autoGroup" || id.startsWith("__group_");
   const sortDirectionByColumn = $derived(ctrl.sortDirectionByColumn);
   const groupingColumns = $derived(ctrl.groupingColumns);
-  const paginationState = $derived(ctrl.paginationState);
-  const allRowsBeforePagination = $derived(ctrl.allRowsBeforePagination);
   const allRows = $derived(ctrl.allRows);
-  const statusBarEnabled = $derived(ctrl.statusBarEnabled);
-  const statusBarAggregates = $derived(ctrl.statusBarAggregates);
-  const statusBarStats = $derived(ctrl.statusBarStats);
   const toolPanelEnabled = $derived(ctrl.toolPanelEnabled);
   const toolPanelColumns = $derived(ctrl.toolPanelColumns);
   const toolPanelHeaderLabel = $derived(ctrl.toolPanelHeaderLabel);
   const toggleColumnVisibleInPanel = $derived(ctrl.toggleColumnVisibleInPanel);
   const moveColumnInPanel = $derived(ctrl.moveColumnInPanel);
   const toggleGroupInPanel = $derived(ctrl.toggleGroupInPanel);
-  const virtualizer = $derived(ctrl.virtualizer);
   const rowVirtualizationEnabled = $derived(ctrl.rowVirtualizationEnabled);
   // The fixed row height, matching what the virtualized path takes from the virtualizer.
   // The non-virtualized (`virtualization={false}`) body must apply this too, else its rows
@@ -525,9 +509,6 @@
   const onHeaderSortClick = $derived(ctrl.onHeaderSortClick);
   const onGridKeyDown = $derived(ctrl.onGridKeyDown);
   const onGridPaste = $derived(ctrl.onGridPaste);
-  const changePage = $derived(ctrl.changePage);
-  const goToPage = $derived(ctrl.goToPage);
-  const setPageSize = $derived(ctrl.setPageSize);
   const updateFilterRow = $derived(ctrl.updateFilterRow);
   const updateFilterMenuValue = $derived(ctrl.updateFilterMenuValue);
   const updateFilterMenuValueTo = $derived(ctrl.updateFilterMenuValueTo);
@@ -1291,7 +1272,7 @@
         aria-label="Edit checkbox value"
         onclick={(event) => {
           event.stopPropagation();
-          const nextValue = !Boolean(ctrl.editingCell?.value);
+          const nextValue = !ctrl.editingCell?.value;
           ctrl.editingCell = ctrl.editingCell
             ? { ...ctrl.editingCell, value: nextValue }
             : ctrl.editingCell;
@@ -1300,7 +1281,7 @@
         onkeydown={(event) =>
           toggleCheckboxWithKeyboard(event, () => {
             event.stopPropagation();
-            const nextValue = !Boolean(ctrl.editingCell?.value);
+            const nextValue = !ctrl.editingCell?.value;
             ctrl.editingCell = ctrl.editingCell
               ? { ...ctrl.editingCell, value: nextValue }
               : ctrl.editingCell;
@@ -2690,10 +2671,6 @@
                           row,
                           rendered.column,
                         )}
-                        {@const cellTooltip = computeCellTooltip(
-                          row,
-                          rendered.column,
-                        )}
                         {@const cellValidity = computeCellValidity(
                           row,
                           rendered.column,

package/dist/SvGridChart.svelte

@@ -213,15 +213,7 @@
     return { t0: zoom.i0 / n, t1: (zoom.i1 + 1) / n }
   })
 
-  /** Map a brush-svg-local x to a category index in the FULL data range. */
-  function brushXToIndex(localX: number): number {
-    if (!brushGeo) return 0
-    const w = brushGeo.plot.w
-    const x = Math.max(0, Math.min(w, localX - brushGeo.plot.x))
-    const n = spec.categories.length
-    return Math.max(0, Math.min(n - 1, Math.floor((x / w) * n)))
-  }
-  type BrushDrag = { mode: 'move' | 'left' | 'right'; startX: number; startT0: number; startT1: number }
+  type BrushDrag ={ mode: 'move' | 'left' | 'right'; startX: number; startT0: number; startT1: number }
   let brushDrag = $state<BrushDrag | null>(null)
   function brushSvgX(e: PointerEvent, svg: SVGSVGElement): number {
     const r = svg.getBoundingClientRect()
@@ -919,7 +911,7 @@
     {#if isRadar && geo.radarCenter}
       {@const c = geo.radarCenter}
       <!-- Concentric grid rings -->
-      {#each geo.radarRings as v, ri (ri)}
+      {#each geo.radarRings as _v, ri (ri)}
         {@const ringR = c.r * ((ri + 1) / geo.radarRings.length)}
         <circle class="sv-grid-chart-radar-ring" cx={c.cx} cy={c.cy} r={ringR} />
       {/each}

package/dist/SvGridSelect.svelte

@@ -53,8 +53,6 @@
     labelField,
     value = $bindable<string | number | null>(null),
     onChange,
-    onCommit,
-    onCancel,
     placeholder = 'Select…',
     searchable = true,
     loadOptions,

package/dist/SvKbd.svelte

@@ -21,7 +21,7 @@
 
 {#if keys}
   <span class="sv-kbd-group sv-kbd--{size}">
-    {#each keys as k, i}
+    {#each keys as k, i (i)}
       {#if i > 0}<span class="sv-kbd__sep" aria-hidden="true">{separator}</span>{/if}
       <kbd class="sv-kbd">{k}</kbd>
     {/each}

package/dist/SvList.svelte

@@ -37,7 +37,7 @@
   {#if children}
     {@render children()}
   {:else if items}
-    {#each items as item}<li>{item}</li>{/each}
+    {#each items as item, i (i)}<li>{item}</li>{/each}
   {/if}
 </svelte:element>
 

package/dist/SvMenubar.svelte

@@ -41,7 +41,7 @@
   const resolvedDir = $derived(dir === 'ltr' || dir === 'rtl' ? dir : undefined)
   const rtl = $derived(resolvedDir === 'rtl')
 
-  let triggerEls = $state<(HTMLButtonElement | null)[]>([])
+  const triggerEls = $state<(HTMLButtonElement | null)[]>([])
   let panelEl = $state<HTMLDivElement | null>(null)
   let openIndex = $state(-1)
   let activeIndex = $state(0)

package/dist/SvMultiSelect.svelte

@@ -50,7 +50,6 @@
     value = $bindable<ReadonlyArray<string | number>>([]),
     onChange,
     onCommit,
-    onCancel,
     placeholder = 'Select…',
     searchable = true,
     maxTagCount = 3,

package/dist/SvOtpInput.svelte

@@ -52,7 +52,7 @@
   const autoId = nextEditorId('sv-otp')
   const uid = $derived(id ?? autoId)
   const cells = $derived(otpCells(sanitizeOtp(value, length, numeric), length))
-  let inputs = $state<HTMLInputElement[]>([])
+  const inputs = $state<HTMLInputElement[]>([])
 
   function commit(next: string) {
     const clean = sanitizeOtp(next, length, numeric)

package/dist/SvRichText.svelte

@@ -90,6 +90,10 @@
   // (writing innerHTML while focused would collapse the caret).
   $effect(() => {
     const v = value ?? ''
+    // A contenteditable owns its own DOM: letting Svelte re-render the body
+    // would wipe the caret mid-typing, so the value is pushed in by hand and
+    // only while the editor is unfocused.
+    // eslint-disable-next-line svelte/no-dom-manipulating
     if (editorEl && !focused && editorEl.innerHTML !== v) editorEl.innerHTML = v
     if (editorEl) empty = editorEl.textContent!.trim().length === 0
   })

package/dist/SvTour.svelte

@@ -156,6 +156,10 @@
     >
       {#if step.image}
         <div class="sv-tour__media">
+          <!-- A step's `image` is either a URL (rendered as an img above) or
+               inline SVG markup the app author wrote for its own tour - never
+               user input, so rendering it as markup is the intent. -->
+          <!-- eslint-disable-next-line svelte/no-at-html-tags -->
           {#if /^(https?:|data:|\/)/.test(step.image)}<img class="sv-tour__img" src={step.image} alt="" />{:else}{@html step.image}{/if}
         </div>
       {/if}

package/dist/SvTreeSelect.svelte

@@ -36,8 +36,6 @@
     nodes,
     value = $bindable<string | number | null>(null),
     onChange,
-    onCommit,
-    onCancel,
     placeholder = 'Select…',
     showPath = false,
     expandedIds = [],