@svgrid/grid 1.1.0 → 1.1.1

package/dist/virtualization/scroll-scaling.d.ts

@@ -8,6 +8,23 @@ export type RowScrollScaling = {
     /** Map a virtualizer logical offset back into a DOM scrollTop. */
     logicalToDom(logical: number): number;
 };
+/**
+ * Resolve the usable max element height from the two raw DOM signals.
+ *
+ * `layoutCap` is a tall probe's clamped `offsetHeight` - the height layout
+ * assigns the element. `scrollCap` is the `scrollHeight` a real `overflow:auto`
+ * container exposes for that same probe - the height the user can actually
+ * scroll through. They differ on mobile / high-DPR engines, which report a
+ * generous `offsetHeight` but then expose a SMALLER scrollable range (the
+ * physical limit is in device px, so a 3x-DPR phone has ~1/3 the CSS-px scroll
+ * cap). Trusting `offsetHeight` alone is exactly what strands the last rows of
+ * a huge grid on a phone, so we take the smaller of the two.
+ *
+ * A junk reading (<= the sanity floor, or so large the browser clearly didn't
+ * clamp) is dropped; if neither signal survives, the caller's conservative
+ * `fallback` is returned unchanged.
+ */
+export declare function resolveMaxDomHeight(layoutCap: number, scrollCap: number, fallback: number): number;
 /**
  * Build the scaling mapping for one axis.
  *

package/dist/virtualization/scroll-scaling.js

@@ -21,6 +21,41 @@ function clamp01(value) {
         return 1;
     return value;
 }
+/** Below this a reading is junk (0 from jsdom, a sub-cap layout quirk, etc). */
+const MAX_DOM_HEIGHT_SANITY_FLOOR = 100000;
+/** At/above this the browser didn't clamp (returned ~the 1e9 we asked for). */
+const MAX_DOM_HEIGHT_SANITY_CEIL = 900000000;
+/**
+ * Shave a hair off the detected cap so the spacer never sits at the exact
+ * physical edge, where sub-pixel rounding could leave the final row a touch
+ * out of reach. 0.5% is invisible at desktop caps (~33.5M -> ~33.3M) yet
+ * keeps a safety gap proportional to the cap.
+ */
+const MAX_DOM_HEIGHT_SAFETY = 0.995;
+/**
+ * Resolve the usable max element height from the two raw DOM signals.
+ *
+ * `layoutCap` is a tall probe's clamped `offsetHeight` - the height layout
+ * assigns the element. `scrollCap` is the `scrollHeight` a real `overflow:auto`
+ * container exposes for that same probe - the height the user can actually
+ * scroll through. They differ on mobile / high-DPR engines, which report a
+ * generous `offsetHeight` but then expose a SMALLER scrollable range (the
+ * physical limit is in device px, so a 3x-DPR phone has ~1/3 the CSS-px scroll
+ * cap). Trusting `offsetHeight` alone is exactly what strands the last rows of
+ * a huge grid on a phone, so we take the smaller of the two.
+ *
+ * A junk reading (<= the sanity floor, or so large the browser clearly didn't
+ * clamp) is dropped; if neither signal survives, the caller's conservative
+ * `fallback` is returned unchanged.
+ */
+export function resolveMaxDomHeight(layoutCap, scrollCap, fallback) {
+    const usable = [layoutCap, scrollCap].filter((v) => Number.isFinite(v) &&
+        v > MAX_DOM_HEIGHT_SANITY_FLOOR &&
+        v < MAX_DOM_HEIGHT_SANITY_CEIL);
+    if (usable.length === 0)
+        return fallback;
+    return Math.floor(Math.min(...usable) * MAX_DOM_HEIGHT_SAFETY);
+}
 /**
  * Build the scaling mapping for one axis.
  *

package/dist/virtualization/scroll-scaling.test.js

@@ -1,6 +1,7 @@
 import { describe, it, expect } from 'vitest';
-import { createRowScrollScaling } from './scroll-scaling';
+import { createRowScrollScaling, resolveMaxDomHeight } from './scroll-scaling';
 const VIEWPORT = 600;
+const FALLBACK = 8000000;
 describe('createRowScrollScaling - inert (content fits under the cap)', () => {
     // 1M rows * 18px = 18M, under a 33.5M (Chrome) cap -> no scaling.
     const s = createRowScrollScaling(18000000, 33554400, VIEWPORT);
@@ -62,6 +63,46 @@ describe('createRowScrollScaling - active (content exceeds the cap)', () => {
         }
     });
 });
+describe('resolveMaxDomHeight - picks the smaller, real scrollable cap', () => {
+    it('keeps the desktop cap when both signals agree', () => {
+        // Chrome ~33.5M; offsetHeight and scrollHeight match. 0.5% safety shave.
+        const cap = resolveMaxDomHeight(33554400, 33554400, FALLBACK);
+        expect(cap).toBeLessThan(33554400);
+        expect(cap).toBeGreaterThan(33000000);
+    });
+    it('uses the SCROLL cap when a phone over-reports offsetHeight', () => {
+        // High-DPR mobile: layout says 24M, but the container only scrolls ~6M.
+        // Trusting offsetHeight is exactly what stranded the last rows.
+        const cap = resolveMaxDomHeight(24000000, 6000000, FALLBACK);
+        expect(cap).toBeLessThanOrEqual(6000000);
+        expect(cap).toBeGreaterThan(5900000);
+    });
+    it('shaves a safety margin so the spacer never sits at the exact edge', () => {
+        const cap = resolveMaxDomHeight(10000000, 10000000, FALLBACK);
+        expect(cap).toBeLessThan(10000000);
+    });
+    it('falls back when both readings are junk (jsdom returns 0)', () => {
+        expect(resolveMaxDomHeight(0, 0, FALLBACK)).toBe(FALLBACK);
+    });
+    it('falls back when the browser did not clamp (returned ~1e9)', () => {
+        expect(resolveMaxDomHeight(1000000000, 1000000000, FALLBACK)).toBe(FALLBACK);
+    });
+    it('ignores a junk signal but trusts the valid one', () => {
+        // offsetHeight unclamped/garbage, scrollHeight is the real cap.
+        const cap = resolveMaxDomHeight(1000000000, 5000000, FALLBACK);
+        expect(cap).toBeLessThanOrEqual(5000000);
+        expect(cap).toBeGreaterThan(4900000);
+    });
+    it('feeds straight into the scaler so the last row stays reachable', () => {
+        const maxDom = resolveMaxDomHeight(24000000, 6000000, FALLBACK);
+        const trueTotal = 500000 * 32; // 16M px of rows, over the phone cap
+        const s = createRowScrollScaling(trueTotal, maxDom, VIEWPORT);
+        expect(s.active).toBe(true);
+        expect(s.domTotal).toBeLessThanOrEqual(maxDom);
+        const domMax = s.domTotal - VIEWPORT;
+        expect(s.domToLogical(domMax)).toBeCloseTo(trueTotal - VIEWPORT, 0);
+    });
+});
 describe('createRowScrollScaling - edge cases', () => {
     it('handles an empty grid without dividing by zero', () => {
         const s = createRowScrollScaling(0, 17895697, VIEWPORT);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svgrid/grid",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "SvGrid - a headless-first, Svelte 5-native data grid engine and render component.",
   "author": "jQWidgets <boikom@jqwidgets.com>",
   "license": "MIT",
@@ -60,6 +60,7 @@
     "@vitest/coverage-v8": "^4.1.5",
     "eslint-plugin-svelte": "^3.17.1",
     "jsdom": "^29.1.1",
+    "publint": "^0.3.21",
     "svelte": "^5.55.5",
     "svelte-check": "^4.4.6"
   },

package/src/GridMenus.svelte

@@ -108,6 +108,7 @@
   const operatorMenuPos = $derived(ctrl.operatorMenuPos);
   const chooseColumnsPos = $derived(ctrl.chooseColumnsPos);
   const showColumnFiltersEffective = $derived(ctrl.showColumnFiltersEffective);
+  const columnMenuTabsEnabled = $derived(ctrl.props.columnMenuTabs === true);
   const grid = $derived(ctrl.grid);
   const allColumns = $derived(ctrl.allColumns);
   const isColumnPinned = $derived(ctrl.isColumnPinned);
@@ -123,6 +124,15 @@
   const operatorsForColumn = $derived(ctrl.operatorsForColumn);
   const defaultOperatorFor = $derived(ctrl.defaultOperatorFor);
   const operatorLabelFor = $derived(ctrl.operatorLabelFor);
+
+  // Patch a column's menu filter (used for the optional 2nd condition + join
+  // of multi-condition filtering). Merges into the existing entry, creating a
+  // base entry from the column's default operator when none exists yet.
+  function patchFilter(columnId: string, patch: Record<string, unknown>) {
+    const col = allColumns.find((c) => c.id === columnId);
+    const cur = ctrl.filterMenuValues[columnId] ?? { operator: defaultOperatorFor(col), value: "" };
+    ctrl.filterMenuValues = { ...ctrl.filterMenuValues, [columnId]: { ...cur, ...patch } };
+  }
   const isColumnFiltered = $derived(ctrl.isColumnFiltered);
   const closeMenus = $derived(ctrl.closeMenus);
   const autosizeColumn = $derived(ctrl.autosizeColumn);
@@ -169,15 +179,190 @@
     ></div>
   {/if}
 
+  <!-- Shared filter UI: rendered both in the funnel popover and in the column
+       menu's Filter tab, so the two never diverge. -->
+  {#snippet filterPanelBody(colId: string)}
+    {@const menuColumn = allColumns.find((c) => c.id === colId)}
+    {@const menuOperatorOptions = operatorsForColumn(menuColumn)}
+    {@const menuActiveOperator = filterMenuValues[colId]?.operator ?? defaultOperatorFor(menuColumn)}
+    {@const menuInputType = getEditorInputType((menuColumn?.columnDef.editorType ?? "text") as CellEditorType)}
+    <div class="sv-grid-menu-filter">
+      <div class="sv-grid-menu-filter-head">
+        <span class="sv-grid-header-icon">{@render icon("filter")}</span> Filter
+        condition
+      </div>
+      <select
+        class="sv-grid-menu-operator-select"
+        aria-label="Filter condition"
+        value={menuActiveOperator}
+        onchange={(event) =>
+          updateFilterOperator(colId, (event.currentTarget as HTMLSelectElement).value as FilterOperator)}
+      >
+        {#each menuOperatorOptions as option (option.value)}
+          <option value={option.value}>{operatorLabelFor(option, menuColumn)}</option>
+        {/each}
+      </select>
+      {#if menuActiveOperator !== "isBlank"}
+        <input
+          class="sv-grid-menu-condition-value"
+          type={menuInputType}
+          value={filterMenuValues[colId]?.value ?? ""}
+          placeholder={menuActiveOperator === "between" ? "From" : "Filter value..."}
+          oninput={(event) => updateFilterMenuValue(colId, (event.currentTarget as HTMLInputElement).value)}
+        />
+        {#if menuActiveOperator === "between"}
+          <input
+            class="sv-grid-menu-condition-value"
+            type={menuInputType}
+            value={filterMenuValues[colId]?.valueTo ?? ""}
+            placeholder="To"
+            oninput={(event) => updateFilterMenuValueTo(colId, (event.currentTarget as HTMLInputElement).value)}
+          />
+        {/if}
+        {@const mf = filterMenuValues[colId]}
+        {#if mf?.operator2}
+          {@const op2 = mf.operator2 ?? defaultOperatorFor(menuColumn)}
+          <div class="sv-grid-menu-join" role="radiogroup" aria-label="Combine conditions">
+            <button type="button" class:is-on={(mf.join ?? "AND") === "AND"}
+              onclick={() => patchFilter(colId, { join: "AND" })}>AND</button>
+            <button type="button" class:is-on={mf.join === "OR"}
+              onclick={() => patchFilter(colId, { join: "OR" })}>OR</button>
+            <button type="button" class="sv-grid-menu-join-x" title="Remove second condition"
+              aria-label="Remove second condition"
+              onclick={() => patchFilter(colId, { operator2: undefined, value2: undefined, valueTo2: undefined, join: undefined })}>×</button>
+          </div>
+          <select
+            class="sv-grid-menu-operator-select"
+            aria-label="Second filter condition"
+            value={op2}
+            onchange={(event) =>
+              patchFilter(colId, { operator2: (event.currentTarget as HTMLSelectElement).value as FilterOperator })}
+          >
+            {#each menuOperatorOptions as option (option.value)}
+              <option value={option.value}>{operatorLabelFor(option, menuColumn)}</option>
+            {/each}
+          </select>
+          {#if op2 !== "isBlank"}
+            <input
+              class="sv-grid-menu-condition-value"
+              type={menuInputType}
+              value={mf.value2 ?? ""}
+              placeholder={op2 === "between" ? "From" : "Filter value..."}
+              oninput={(event) => patchFilter(colId, { value2: (event.currentTarget as HTMLInputElement).value })}
+            />
+            {#if op2 === "between"}
+              <input
+                class="sv-grid-menu-condition-value"
+                type={menuInputType}
+                value={mf.valueTo2 ?? ""}
+                placeholder="To"
+                oninput={(event) => patchFilter(colId, { valueTo2: (event.currentTarget as HTMLInputElement).value })}
+              />
+            {/if}
+          {/if}
+        {:else}
+          <button type="button" class="sv-grid-menu-add-cond"
+            onclick={() => patchFilter(colId, { operator2: defaultOperatorFor(menuColumn), value2: "", join: "AND" })}>
+            + Add condition
+          </button>
+        {/if}
+      {/if}
+      <div class="sv-grid-menu-sep"></div>
+      <div class="sv-grid-menu-filter-head">Values</div>
+      <input
+        class="sv-grid-menu-search"
+        placeholder="Search values..."
+        bind:value={ctrl.columnMenuSearch}
+      />
+      <label class="sv-grid-facet sv-grid-facet-all">
+        <input type="checkbox" checked={isAllFacetsChecked(colId)} onchange={() => toggleAllFacets(colId)} />
+        <span class="sv-grid-facet-label">(Select all)</span>
+      </label>
+      <div class="sv-grid-facet-list">
+        {#each columnMenuVisibleFacets as value (value)}
+          <label class="sv-grid-facet">
+            <input type="checkbox" checked={isFacetChecked(colId, value)} onchange={() => toggleFacetValue(colId, value)} />
+            <span class="sv-grid-facet-label">{value === "" ? "(Blanks)" : value}</span>
+          </label>
+        {:else}
+          <div class="sv-grid-facet-empty">No values</div>
+        {/each}
+      </div>
+      {#if columnMenuFacetValues.length > columnMenuVisibleFacets.length}
+        <div class="sv-grid-facet-note">
+          Showing {columnMenuVisibleFacets.length} of {columnMenuFacetValues.length}
+        </div>
+      {/if}
+      <div class="sv-grid-menu-actions">
+        <button
+          type="button"
+          class="sv-grid-menu-btn"
+          disabled={!isColumnFiltered(colId)}
+          onclick={() => clearColumnFilter(colId)}
+        >
+          Clear filter
+        </button>
+        <button type="button" class="sv-grid-menu-btn sv-grid-menu-btn-primary" onclick={closeMenus}>
+          Done
+        </button>
+      </div>
+    </div>
+  {/snippet}
+
   {#if columnMenuFor}
     {@const menuColumnId = columnMenuFor}
     {@const menuCol = allColumns.find((c) => c.id === menuColumnId)}
     {@const menuCanSort = menuCol?.getCanSort?.() ?? false}
+    {@const menuCanFilter = (menuCol?.columnDef.field != null) && (menuCol?.columnDef.filterable !== false)}
+    {@const menuTab = ctrl.columnMenuTab}
     <div
       class="sv-grid-menu sv-grid-column-menu"
       role="menu"
-      style={`left: ${columnMenuPos.x}px; top: ${columnMenuPos.y}px;`}
+      style={`left: ${columnMenuPos.x}px; top: ${columnMenuPos.y}px; max-height: calc(100vh - ${columnMenuPos.y}px - 12px);`}
     >
+      {#if columnMenuTabsEnabled}
+        <div class="sv-grid-menu-tabs" role="tablist">
+          <button type="button" class="sv-grid-menu-tab" class:is-active={menuTab === "general"}
+            role="tab" aria-selected={menuTab === "general"}
+            onclick={() => (ctrl.columnMenuTab = "general")}>General</button>
+          {#if menuCanFilter && showColumnFiltersEffective}
+            <button type="button" class="sv-grid-menu-tab" class:is-active={menuTab === "filter"}
+              role="tab" aria-selected={menuTab === "filter"}
+              onclick={() => (ctrl.columnMenuTab = "filter")}>Filter</button>
+          {/if}
+          <button type="button" class="sv-grid-menu-tab" class:is-active={menuTab === "columns"}
+            role="tab" aria-selected={menuTab === "columns"}
+            onclick={() => (ctrl.columnMenuTab = "columns")}>Columns</button>
+        </div>
+      {/if}
+      {#if columnMenuTabsEnabled && menuTab === "filter" && menuCanFilter && showColumnFiltersEffective}
+        {@render filterPanelBody(menuColumnId)}
+      {:else if columnMenuTabsEnabled && menuTab === "columns"}
+        <div class="sv-grid-menu-filter-head">Visible columns</div>
+        <div class="sv-grid-facet-list">
+          {#each grid.getAllColumns() as column (column.id)}
+            <label class="sv-grid-facet">
+              <input
+                type="checkbox"
+                checked={!ctrl.hiddenColumns[column.id]}
+                onchange={(event) => {
+                  const visible = (event.currentTarget as HTMLInputElement).checked;
+                  if (visible) {
+                    const next = { ...ctrl.hiddenColumns };
+                    delete next[column.id];
+                    ctrl.hiddenColumns = next;
+                  } else {
+                    ctrl.hiddenColumns = { ...ctrl.hiddenColumns, [column.id]: true };
+                  }
+                }}
+              />
+              <span class="sv-grid-facet-label"
+                >{typeof column.columnDef.header === "string" ? column.columnDef.header : column.id}</span
+              >
+            </label>
+          {/each}
+        </div>
+      {:else}
       {#if menuCanSort}
         <button
           type="button"
@@ -290,21 +475,23 @@
         </button>
       {/if}
       <div class="sv-grid-menu-sep"></div>
-      <button
-        type="button"
-        class="sv-grid-menu-item"
-        class:is-open={chooseColumnsPos !== null}
-        role="menuitem"
-        aria-haspopup="menu"
-        aria-expanded={chooseColumnsPos !== null}
-        onclick={(event) => openChooseColumns(event)}
-      >
-        <span class="sv-grid-header-icon">{@render icon("columns")}</span>
-        Choose columns
-        <span class="sv-grid-header-icon sv-grid-menu-item-chevron"
-          >{@render icon("chevron-down")}</span
+      {#if !columnMenuTabsEnabled}
+        <!-- Flat menu: reach the column chooser via a submenu (tabbed mode has
+             a Columns tab instead). -->
+        <button
+          type="button"
+          class="sv-grid-menu-item"
+          class:is-open={chooseColumnsPos !== null}
+          role="menuitem"
+          aria-haspopup="menu"
+          aria-expanded={chooseColumnsPos !== null}
+          onclick={(event) => openChooseColumns(event)}
         >
-      </button>
+          <span class="sv-grid-header-icon">{@render icon("columns")}</span>
+          Choose columns
+          <span class="sv-grid-header-icon sv-grid-menu-item-chevron">{@render icon("chevron-down")}</span>
+        </button>
+      {/if}
       <button
         type="button"
         class="sv-grid-menu-item"
@@ -316,126 +503,17 @@
       >
         <span class="sv-grid-header-icon">{@render icon("reset")}</span> Reset columns
       </button>
+      {/if}
     </div>
   {/if}
 
   {#if filterMenuFor && showColumnFiltersEffective}
-    {@const menuColumnId = filterMenuFor}
-    {@const menuColumn = allColumns.find((c) => c.id === menuColumnId)}
-    {@const menuOperatorOptions = operatorsForColumn(menuColumn)}
-    {@const menuActiveOperator =
-      filterMenuValues[menuColumnId]?.operator ??
-      defaultOperatorFor(menuColumn)}
-    {@const menuInputType = getEditorInputType(
-      (menuColumn?.columnDef.editorType ?? "text") as CellEditorType,
-    )}
     <div
       class="sv-grid-menu sv-grid-filter-menu"
       role="menu"
-      style={`left: ${filterMenuPos.x}px; top: ${filterMenuPos.y}px;`}
+      style={`left: ${filterMenuPos.x}px; top: ${filterMenuPos.y}px; max-height: calc(100vh - ${filterMenuPos.y}px - 12px);`}
     >
-      <div class="sv-grid-menu-filter">
-        <div class="sv-grid-menu-filter-head">
-          <span class="sv-grid-header-icon">{@render icon("filter")}</span> Filter
-          condition
-        </div>
-        <select
-          class="sv-grid-menu-operator-select"
-          aria-label="Filter condition"
-          value={menuActiveOperator}
-          onchange={(event) =>
-            updateFilterOperator(
-              menuColumnId,
-              (event.currentTarget as HTMLSelectElement)
-                .value as FilterOperator,
-            )}
-        >
-          {#each menuOperatorOptions as option (option.value)}
-            <option value={option.value}
-              >{operatorLabelFor(option, menuColumn)}</option
-            >
-          {/each}
-        </select>
-        {#if menuActiveOperator !== "isBlank"}
-          <input
-            class="sv-grid-menu-condition-value"
-            type={menuInputType}
-            value={filterMenuValues[menuColumnId]?.value ?? ""}
-            placeholder={menuActiveOperator === "between" ? "From" : "Filter value..."}
-            oninput={(event) =>
-              updateFilterMenuValue(
-                menuColumnId,
-                (event.currentTarget as HTMLInputElement).value,
-              )}
-          />
-          {#if menuActiveOperator === "between"}
-            <input
-              class="sv-grid-menu-condition-value"
-              type={menuInputType}
-              value={filterMenuValues[menuColumnId]?.valueTo ?? ""}
-              placeholder="To"
-              oninput={(event) =>
-                updateFilterMenuValueTo(
-                  menuColumnId,
-                  (event.currentTarget as HTMLInputElement).value,
-                )}
-            />
-          {/if}
-        {/if}
-        <div class="sv-grid-menu-sep"></div>
-        <div class="sv-grid-menu-filter-head">Values</div>
-        <input
-          class="sv-grid-menu-search"
-          placeholder="Search values..."
-          bind:value={ctrl.columnMenuSearch}
-        />
-        <label class="sv-grid-facet sv-grid-facet-all">
-          <input
-            type="checkbox"
-            checked={isAllFacetsChecked(menuColumnId)}
-            onchange={() => toggleAllFacets(menuColumnId)}
-          />
-          <span class="sv-grid-facet-label">(Select all)</span>
-        </label>
-        <div class="sv-grid-facet-list">
-          {#each columnMenuVisibleFacets as value (value)}
-            <label class="sv-grid-facet">
-              <input
-                type="checkbox"
-                checked={isFacetChecked(menuColumnId, value)}
-                onchange={() => toggleFacetValue(menuColumnId, value)}
-              />
-              <span class="sv-grid-facet-label"
-                >{value === "" ? "(Blanks)" : value}</span
-              >
-            </label>
-          {:else}
-            <div class="sv-grid-facet-empty">No values</div>
-          {/each}
-        </div>
-        {#if columnMenuFacetValues.length > columnMenuVisibleFacets.length}
-          <div class="sv-grid-facet-note">
-            Showing {columnMenuVisibleFacets.length} of {columnMenuFacetValues.length}
-          </div>
-        {/if}
-        <div class="sv-grid-menu-actions">
-          <button
-            type="button"
-            class="sv-grid-menu-btn"
-            disabled={!isColumnFiltered(menuColumnId)}
-            onclick={() => clearColumnFilter(menuColumnId)}
-          >
-            Clear filter
-          </button>
-          <button
-            type="button"
-            class="sv-grid-menu-btn sv-grid-menu-btn-primary"
-            onclick={closeMenus}
-          >
-            Done
-          </button>
-        </div>
-      </div>
+      {@render filterPanelBody(filterMenuFor)}
     </div>
   {/if}