@svgrid/grid 2.1.22 → 2.2.0

package/dist/GridFooter.svelte

@@ -1,178 +1,178 @@
-<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 {
-    ctrl,
-    pager = true,
-    showStatus = true,
-    top = false,
-    pageSizeOptions,
-  }: {
-    ctrl: SvGridController<TFeatures, TData>;
-    /** Render the pagination controls in this instance. */
-    pager?: boolean;
-    /** Render the status bar in this instance. */
-    showStatus?: boolean;
-    /** This is a top-positioned footer (styling only). */
-    top?: boolean;
-    /** Page-size choices for the selector. Defaults to `[10, 25, 50, 100]`. */
-    pageSizeOptions?: number[];
-  } = $props();
-
-  // 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);
-  const changePage = $derived(ctrl.changePage);
-  const goToPage = $derived(ctrl.goToPage);
-  const setPageSize = $derived(ctrl.setPageSize);
-</script>
-
-    {#if showStatus && statusBarEnabled && statusBarStats}
-      {@const s = statusBarStats}
-      <div class="sv-grid-status-bar" role="status" aria-live="polite">
-        {#each statusBarAggregates as agg (agg)}
-          {#if agg === "count"}
-            <span class="sv-grid-status-item"
-              ><span class="sv-grid-status-label">Count</span>{fmtStat(s.count)}</span
-            >
-          {:else if agg === "numericCount"}
-            <span class="sv-grid-status-item"
-              ><span class="sv-grid-status-label">Numeric</span>{fmtStat(s.numericCount)}</span
-            >
-          {:else if s.numericCount > 0 && agg === "sum"}
-            <span class="sv-grid-status-item"
-              ><span class="sv-grid-status-label">Sum</span>{fmtStat(s.sum)}</span
-            >
-          {:else if s.numericCount > 0 && agg === "avg"}
-            <span class="sv-grid-status-item"
-              ><span class="sv-grid-status-label">Avg</span>{fmtStat(s.avg)}</span
-            >
-          {:else if s.numericCount > 0 && agg === "min"}
-            <span class="sv-grid-status-item"
-              ><span class="sv-grid-status-label">Min</span>{fmtStat(s.min)}</span
-            >
-          {:else if s.numericCount > 0 && agg === "max"}
-            <span class="sv-grid-status-item"
-              ><span class="sv-grid-status-label">Max</span>{fmtStat(s.max)}</span
-            >
-          {/if}
-        {/each}
-      </div>
-    {/if}
-
-    {#if pager && paginationEnabled}
-      {@const totalRows = ctrl.paginationTotalRows}
-      {@const pageSize = ctrl.paginationPageSize}
-      {@const pageCount = Math.max(1, Math.ceil(totalRows / pageSize))}
-      {@const currentPage = Math.min(ctrl.paginationPageIndex + 1, pageCount)}
-      {@const rangeStart =
-        totalRows === 0 ? 0 : (currentPage - 1) * pageSize + 1}
-      {@const rangeEnd = Math.min(totalRows, currentPage * pageSize)}
-      {@const onFirst = currentPage <= 1}
-      {@const onLast = currentPage >= pageCount}
-      {@const sizes = pageSizeOptions && pageSizeOptions.length ? pageSizeOptions : [10, 25, 50, 100]}
-      <div class="sv-grid-pagination" class:sv-grid-pagination-top={top} role="navigation" aria-label="Pagination">
-        <div class="sv-grid-pagination-pagesize">
-          <span>Page Size:</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))}
-            />
-          </div>
-        </div>
-        <span class="sv-grid-pagination-range">
-          <strong>{rangeStart.toLocaleString()}</strong> to
-          <strong>{rangeEnd.toLocaleString()}</strong> of
-          <strong>{totalRows.toLocaleString()}</strong>
-        </span>
-        <div class="sv-grid-pagination-nav">
-          <button
-            type="button"
-            class="sv-grid-pagination-btn"
-            disabled={onFirst}
-            onclick={() => goToPage(0)}
-            aria-label="First page">⇤</button
-          >
-          <button
-            type="button"
-            class="sv-grid-pagination-btn"
-            disabled={onFirst}
-            onclick={() => changePage(-1)}
-            aria-label="Previous page">‹</button
-          >
-          <span class="sv-grid-pagination-label">
-            Page <strong>{currentPage.toLocaleString()}</strong> of
-            <strong>{pageCount.toLocaleString()}</strong>
-          </span>
-          <button
-            type="button"
-            class="sv-grid-pagination-btn"
-            disabled={onLast}
-            onclick={() => changePage(1)}
-            aria-label="Next page">›</button
-          >
-          <button
-            type="button"
-            class="sv-grid-pagination-btn"
-            disabled={onLast}
-            onclick={() => goToPage(pageCount - 1)}
-            aria-label="Last page">⇥</button
-          >
-        </div>
-      </div>
-    {/if}
+<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 {
+    ctrl,
+    pager = true,
+    showStatus = true,
+    top = false,
+    pageSizeOptions,
+  }: {
+    ctrl: SvGridController<TFeatures, TData>;
+    /** Render the pagination controls in this instance. */
+    pager?: boolean;
+    /** Render the status bar in this instance. */
+    showStatus?: boolean;
+    /** This is a top-positioned footer (styling only). */
+    top?: boolean;
+    /** Page-size choices for the selector. Defaults to `[10, 25, 50, 100]`. */
+    pageSizeOptions?: number[];
+  } = $props();
+
+  // 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);
+  const changePage = $derived(ctrl.changePage);
+  const goToPage = $derived(ctrl.goToPage);
+  const setPageSize = $derived(ctrl.setPageSize);
+</script>
+
+    {#if showStatus && statusBarEnabled && statusBarStats}
+      {@const s = statusBarStats}
+      <div class="sv-grid-status-bar" role="status" aria-live="polite">
+        {#each statusBarAggregates as agg (agg)}
+          {#if agg === "count"}
+            <span class="sv-grid-status-item"
+              ><span class="sv-grid-status-label">Count</span>{fmtStat(s.count)}</span
+            >
+          {:else if agg === "numericCount"}
+            <span class="sv-grid-status-item"
+              ><span class="sv-grid-status-label">Numeric</span>{fmtStat(s.numericCount)}</span
+            >
+          {:else if s.numericCount > 0 && agg === "sum"}
+            <span class="sv-grid-status-item"
+              ><span class="sv-grid-status-label">Sum</span>{fmtStat(s.sum)}</span
+            >
+          {:else if s.numericCount > 0 && agg === "avg"}
+            <span class="sv-grid-status-item"
+              ><span class="sv-grid-status-label">Avg</span>{fmtStat(s.avg)}</span
+            >
+          {:else if s.numericCount > 0 && agg === "min"}
+            <span class="sv-grid-status-item"
+              ><span class="sv-grid-status-label">Min</span>{fmtStat(s.min)}</span
+            >
+          {:else if s.numericCount > 0 && agg === "max"}
+            <span class="sv-grid-status-item"
+              ><span class="sv-grid-status-label">Max</span>{fmtStat(s.max)}</span
+            >
+          {/if}
+        {/each}
+      </div>
+    {/if}
+
+    {#if pager && paginationEnabled}
+      {@const totalRows = ctrl.paginationTotalRows}
+      {@const pageSize = ctrl.paginationPageSize}
+      {@const pageCount = Math.max(1, Math.ceil(totalRows / pageSize))}
+      {@const currentPage = Math.min(ctrl.paginationPageIndex + 1, pageCount)}
+      {@const rangeStart =
+        totalRows === 0 ? 0 : (currentPage - 1) * pageSize + 1}
+      {@const rangeEnd = Math.min(totalRows, currentPage * pageSize)}
+      {@const onFirst = currentPage <= 1}
+      {@const onLast = currentPage >= pageCount}
+      {@const sizes = pageSizeOptions && pageSizeOptions.length ? pageSizeOptions : [10, 25, 50, 100]}
+      <div class="sv-grid-pagination" class:sv-grid-pagination-top={top} role="navigation" aria-label="Pagination">
+        <div class="sv-grid-pagination-pagesize">
+          <span>Page Size:</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))}
+            />
+          </div>
+        </div>
+        <span class="sv-grid-pagination-range">
+          <strong>{rangeStart.toLocaleString()}</strong> to
+          <strong>{rangeEnd.toLocaleString()}</strong> of
+          <strong>{totalRows.toLocaleString()}</strong>
+        </span>
+        <div class="sv-grid-pagination-nav">
+          <button
+            type="button"
+            class="sv-grid-pagination-btn"
+            disabled={onFirst}
+            onclick={() => goToPage(0)}
+            aria-label="First page">⇤</button
+          >
+          <button
+            type="button"
+            class="sv-grid-pagination-btn"
+            disabled={onFirst}
+            onclick={() => changePage(-1)}
+            aria-label="Previous page">‹</button
+          >
+          <span class="sv-grid-pagination-label">
+            Page <strong>{currentPage.toLocaleString()}</strong> of
+            <strong>{pageCount.toLocaleString()}</strong>
+          </span>
+          <button
+            type="button"
+            class="sv-grid-pagination-btn"
+            disabled={onLast}
+            onclick={() => changePage(1)}
+            aria-label="Next page">›</button
+          >
+          <button
+            type="button"
+            class="sv-grid-pagination-btn"
+            disabled={onLast}
+            onclick={() => goToPage(pageCount - 1)}
+            aria-label="Last page">⇥</button
+          >
+        </div>
+      </div>
+    {/if}

package/dist/GridMenus.svelte

@@ -2,6 +2,7 @@
   import {
     applyExcelFilter,
     normalizeForFilter,
+    splitInTokens,
     createColumnVirtualizer,
     createCoreRowModel,
     createExpandedRowModel,
@@ -124,6 +125,12 @@
   const operatorsForColumn = $derived(ctrl.operatorsForColumn);
   const defaultOperatorFor = $derived(ctrl.defaultOperatorFor);
   const operatorLabelFor = $derived(ctrl.operatorLabelFor);
+  const filterRowValues = $derived(ctrl.filterRowValues);
+  const inSuggestFor = $derived(ctrl.inSuggestFor);
+  const inSuggestPos = $derived(ctrl.inSuggestPos);
+  const inSuggestValues = $derived(ctrl.inSuggestValues);
+  const toggleFilterToken = $derived(ctrl.toggleFilterToken);
+  const facetValuesForColumn = $derived(ctrl.facetValuesForColumn);
 
   // Patch a column's menu filter (used for the optional 2nd condition + join
   // of multi-condition filtering). Merges into the existing entry, creating a
@@ -135,6 +142,22 @@
   }
   const isColumnFiltered = $derived(ctrl.isColumnFiltered);
   const closeMenus = $derived(ctrl.closeMenus);
+
+  // Column/filter/operator menus are position:fixed and anchored to their
+  // trigger by a one-time measurement taken when they open. On scroll they'd
+  // otherwise detach and float over the wrong place (#88), so close them on any
+  // scroll (capture phase, to catch inner scroll containers) or resize.
+  $effect(() => {
+    if (!(columnMenuFor || filterMenuFor || operatorMenuFor || chooseColumnsPos)) return;
+    const close = () => closeMenus();
+    window.addEventListener('scroll', close, true);
+    window.addEventListener('resize', close);
+    return () => {
+      window.removeEventListener('scroll', close, true);
+      window.removeEventListener('resize', close);
+    };
+  });
+
   const autosizeColumn = $derived(ctrl.autosizeColumn);
   const autosizeAllColumns = $derived(ctrl.autosizeAllColumns);
   const resetColumns = $derived(ctrl.resetColumns);
@@ -202,14 +225,30 @@
           <option value={option.value}>{operatorLabelFor(option, menuColumn)}</option>
         {/each}
       </select>
-      {#if menuActiveOperator !== "isBlank"}
+      {#if menuActiveOperator !== "isBlank" && menuActiveOperator !== "isNotBlank"}
+        {@const isSetOp =
+          menuActiveOperator === "in" || menuActiveOperator === "notIn"}
         <input
           class="sv-grid-menu-condition-value"
-          type={menuInputType}
+          type={menuActiveOperator === "regex" ? "text" : menuInputType}
+          list={isSetOp ? `sv-in-list-${colId}` : undefined}
           value={filterMenuValues[colId]?.value ?? ""}
-          placeholder={menuActiveOperator === "between" ? "From" : "Filter value..."}
+          placeholder={menuActiveOperator === "between"
+            ? "From"
+            : isSetOp
+              ? "value, value..."
+              : menuActiveOperator === "regex"
+                ? "Pattern..."
+                : "Filter value..."}
           oninput={(event) => updateFilterMenuValue(colId, (event.currentTarget as HTMLInputElement).value)}
         />
+        {#if isSetOp}
+          <datalist id={`sv-in-list-${colId}`}>
+            {#each facetValuesForColumn(colId).slice(0, 200) as v (v)}
+              <option value={v}></option>
+            {/each}
+          </datalist>
+        {/if}
         {#if menuActiveOperator === "between"}
           <input
             class="sv-grid-menu-condition-value"
@@ -585,6 +624,47 @@
     </div>
   {/if}
 
+  {#if inSuggestFor}
+    {@const suggestColId = inSuggestFor}
+    {@const selectedTokens = new Set(
+      splitInTokens(filterRowValues[suggestColId] ?? ""),
+    )}
+    <!-- Value suggestions for an `in` / `notIn` chip input. Items use
+         `onmousedown` (preventDefault) so clicking one keeps focus in the
+         chip input and the dropdown stays open for multi-select; the input's
+         own blur handler closes it when focus truly leaves. -->
+    <div
+      class="sv-grid-menu sv-grid-in-suggest"
+      role="listbox"
+      aria-multiselectable="true"
+      aria-label="Filter values"
+      style={`left: ${inSuggestPos.x}px; top: ${inSuggestPos.y}px;`}
+    >
+      {#each inSuggestValues as value (value)}
+        {@const checked = selectedTokens.has(value)}
+        <button
+          type="button"
+          class="sv-grid-menu-item sv-grid-in-suggest-item"
+          role="option"
+          aria-selected={checked}
+          onmousedown={(event) => {
+            event.preventDefault();
+            toggleFilterToken(suggestColId, value);
+          }}
+        >
+          <span class="sv-grid-in-suggest-check" aria-hidden="true"
+            >{checked ? "✓" : ""}</span
+          >
+          <span class="sv-grid-in-suggest-label"
+            >{value === "" ? "(Blanks)" : value}</span
+          >
+        </button>
+      {:else}
+        <div class="sv-grid-facet-empty">No values</div>
+      {/each}
+    </div>
+  {/if}
+
   {#if contextMenuFor}
     <div
       class="sv-grid-menu-backdrop"

package/dist/SvAutoComplete.svelte

@@ -47,7 +47,7 @@
 
   let fieldEl = $state<HTMLInputElement | null>(null)
   let panelEl = $state<HTMLDivElement | null>(null)
-  let rect = $state<AnchoredRect>({ top: 0, left: 0, width: 0, openUpward: false })
+  let rect = $state<AnchoredRect>({ top: 0, left: 0, width: 0, openUpward: false, maxHeight: 0, availHeight: 0 })
 
   const ac = createAutocomplete({
     value: () => value,
@@ -66,7 +66,9 @@
 
   function updatePos() {
     if (!fieldEl) return
-    rect = anchoredRect(fieldEl.getBoundingClientRect(), { estimatedHeight: Math.min(ac.filtered.length, 8) * 34 + 8 })
+    // estimatedHeight only picks the flip direction; real max-height is availHeight
+    // below, so the panel takes its natural content height. See SvComboBox.
+    rect = anchoredRect(fieldEl.getBoundingClientRect(), { estimatedHeight: Math.min(ac.filtered.length, 8) * 34 + 12 })
   }
 
   $effect(() => {
@@ -92,7 +94,7 @@
 </SvField>
 
 {#if ac.open}
-  <div bind:this={panelEl} class="sv-ddl__panel" use:portalToBody use:popIn={{ up: rect.openUpward }} style:position="fixed" style:top={`${rect.top}px`} style:left={`${rect.left}px`} style:min-width={`${rect.width}px`} {...ac.listboxProps()}>
+  <div bind:this={panelEl} class="sv-ddl__panel" use:portalToBody use:popIn={{ up: rect.openUpward }} style:position="fixed" style:top={rect.openUpward ? undefined : `${rect.top}px`} style:bottom={rect.openUpward ? `${rect.bottom}px` : undefined} style:left={`${rect.left}px`} style:min-width={`${rect.width}px`} style:max-height={`${Math.min(rect.availHeight, 288)}px`} {...ac.listboxProps()}>
     {#each ac.filtered as opt, i (opt.value)}
       <!-- svelte-ignore a11y_click_events_have_key_events a11y_interactive_supports_focus -->
       <div class="sv-ddl__opt" class:is-active={ac.isActive(i)} {...ac.optionProps(i)}>{opt.label}</div>