@svgrid/grid 2.6.21 → 2.7.0

package/src/SvGrid.svelte

@@ -15,6 +15,8 @@
   } from "./index";
   import "./sv-grid-scrollbar";
   import "./SvGrid.css";
+  import type { RowResizeOptions } from "./row-resize";
+  import type { ColumnResizeOptions } from "./column-resize";
   import {
     RenderSnippetConfig,
     RenderComponentConfig,
@@ -31,6 +33,9 @@
   import {
     cfTextStyle,
     getEditorInputType,
+    usesRichDateFilter,
+    toIsoDateLocal,
+    fromIsoDateLocal,
     getOptionLabel,
     getOptionColor,
     colorfulChipStyle,
@@ -46,6 +51,7 @@
   // SvGridChartPanel (charting) and SvGridBoard (Kanban) are heavy, prop-gated
   // views - lazy-loaded below so they stay out of the base <SvGrid> bundle.
   import { getSchedulerView } from "./scheduler-view.svelte";
+  import { getSelectionBarView } from "./selection-bar-view.svelte";
   import { getBoardView } from "./board-view.svelte";
   import { getChartView } from "./chart-view.svelte";
   let props: Props<TFeatures, TData> = $props();
@@ -97,6 +103,37 @@
       import("./SvGridChartView.svelte").then((m) => (ChartView = m.default));
   });
   let MenusOverlay = $state<typeof import("./GridMenus.svelte").default | null>(null);
+  // The grid's own date picker, for date FILTER inputs. Lazy for the same
+  // reason the cell editor's copy is: most grids never show a filter row, and
+  // most that do have no date column.
+  let FilterDatePicker = $state<typeof import("./SvDateTimePicker.svelte").default | null>(null);
+  $effect(() => {
+    if (!showFilterRowEffective && !ctrl.filterMenuFor) return;
+    if (FilterDatePicker) return;
+    const wantsPicker = ctrl.allColumns.some((c: any) =>
+      usesRichDateFilter(c.columnDef?.editorType),
+    );
+    if (wantsPicker)
+      import("./SvDateTimePicker.svelte").then((m) => (FilterDatePicker = m.default));
+  });
+  // `between` on a date column filters with a RANGE control rather than two
+  // single-date fields: one field, one popover, both ends picked in a single
+  // gesture - and it fits a narrow date column, which two pickers plus their
+  // buttons do not. Loaded only once a date column is actually set to Between,
+  // so a grid that never uses the operator never pays for the chunk.
+  let FilterRangePicker = $state<typeof import("./SvDateRangeInput.svelte").default | null>(null);
+  $effect(() => {
+    if (!showFilterRowEffective) return;
+    if (FilterRangePicker) return;
+    const wantsRange = ctrl.allColumns.some(
+      (c: any) =>
+        usesRichDateFilter(c.columnDef?.editorType) &&
+        (ctrl.filterMenuValues[c.id]?.operator ??
+          ctrl.defaultOperatorFor(c)) === "between",
+    );
+    if (wantsRange)
+      import("./SvDateRangeInput.svelte").then((m) => (FilterRangePicker = m.default));
+  });
   $effect(() => {
     if (ctrl.chartingEnabled && ctrl.chartPanelOpen && !ChartPanelView)
       import("./SvGridChartPanel.svelte").then((m) => (ChartPanelView = m.default));
@@ -167,7 +204,9 @@
   const hideTooltip = $derived(ctrl.hideTooltip);
   const findHits = $derived(ctrl.findHits);
   const headerHeight = $derived(ctrl.headerHeight);
-  const resizingColumnId = $derived(ctrl.resizingColumnId);
+  // Column resizing has always been unconditional; `columnResize={false}` is
+  // the opt-out, so the default has to stay on when the prop is absent.
+  const columnResizeEnabled = $derived(opt.columnResize === true);
   const selectionColumnWidth = $derived(ctrl.selectionColumnWidth);
   const rowNumberColumnWidth = $derived(ctrl.rowNumberColumnWidth);
   const showRowNumbersEffective = $derived(ctrl.showRowNumbersEffective);
@@ -264,6 +303,23 @@
   // Row-grouping display modes: group state lives in synthetic columns instead
   // of a full-width banner row.
   const groupColumnMode = $derived(ctrl.groupColumnMode);
+  /**
+   * True when a cell's content needs none of the wrapper snippets.
+   *
+   * A cell body normally renders through `cellBodyWithFormat` ->
+   * `cellBodyFormatted` -> `cellBody`, and with no grouping, no tree data and
+   * no conditional formats the first two are pure pass-throughs: three snippet
+   * renders and two `{#if}` blocks per cell to reach content that one render
+   * produces. Measured by ablation, that chain is 4.2 ms of a 17.4 ms mount at
+   * 28 rows x 9 columns - about a quarter of the whole mount, and the largest
+   * single per-cell cost.
+   *
+   * Computed once per render rather than per cell, so the fast path costs one
+   * boolean read at each of the ~250 cells instead of two snippet frames.
+   */
+  const plainCellBody = $derived(
+    !groupColumnMode && !treeData && !hasConditionalFormats,
+  );
   const autoGroupCell = $derived(ctrl.autoGroupCell);
   const isAutoGroupColumn = (id: string): boolean =>
     id === "__autoGroup" || id.startsWith("__group_");
@@ -280,7 +336,60 @@
   // 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
   // fall back to content height and look shorter than a virtualized grid's.
+  /**
+   * `rowResize` and `columnResize` are both opt-in and both default to OFF, so
+   * neither module is imported statically - a grid that leaves them alone must
+   * not carry their bytes. This wraps an action so its module is fetched on
+   * first enable and never otherwise. The handles appear a microtask after the
+   * first paint, which is invisible for a drag affordance.
+   *
+   * One helper for both: two hand-rolled copies of this bookkeeping would cost
+   * more base bundle than the deferral saves.
+   */
+  type LazyHandle<O> = { update(o: O): void; destroy(): void };
+  function lazyAction<O extends { disabled?: boolean }>(
+    load: () => Promise<(node: HTMLElement, opts: O) => LazyHandle<O>>,
+  ) {
+    return (node: HTMLElement, opts: O): LazyHandle<O> => {
+      let handle: LazyHandle<O> | null = null;
+      let current = opts;
+      let destroyed = false;
+      const ensure = () => {
+        if (handle || destroyed || current.disabled) return;
+        void load().then((make) => {
+          // The prop can be switched back off, or the grid unmounted, while
+          // the chunk is still in flight.
+          if (destroyed || current.disabled || handle) return;
+          handle = make(node, current);
+        });
+      };
+      ensure();
+      return {
+        update(next: O) {
+          current = next;
+          if (handle) handle.update(next);
+          else ensure();
+        },
+        destroy() {
+          destroyed = true;
+          handle?.destroy();
+        },
+      };
+    };
+  }
+
+  const lazyRowResize = lazyAction<RowResizeOptions>(() =>
+    import("./row-resize").then((m) => m.rowResize),
+  );
+  const lazyColumnResize = lazyAction<ColumnResizeOptions>(() =>
+    import("./column-resize").then((m) => m.columnResize),
+  );
+
   const rowSizePx = (i: number): number => {
+    // A height the user dragged wins over the declared one, so the row stays
+    // where they put it across re-renders and virtualization recycling.
+    const dragged = ctrl.rowResizeHeightPx(i);
+    if (dragged != null) return dragged;
     const rh = opt.rowHeight;
     return typeof rh === "function" ? rh(i) : (rh ?? 30);
   };
@@ -358,26 +467,10 @@
     return "sv-grid-cell-flash";
   }
 
-  // Keyboard-accessible column resize (#79): focus a resize handle and use the
-  // arrow keys (Shift = fine 1px step). Complements the pointer-drag resize.
-  function resizeColumnByKeyboard(e: KeyboardEvent, columnId: string) {
-    let delta = 0;
-    const step = e.shiftKey ? 1 : 10;
-    if (e.key === "ArrowLeft") delta = -step;
-    else if (e.key === "ArrowRight") delta = step;
-    else return;
-    e.preventDefault();
-    const current = ctrl.getColumnWidth(columnId);
-    ctrl.columnWidths = {
-      ...ctrl.columnWidths,
-      [columnId]: Math.max(40, current + delta),
-    };
-  }
-
   // ---- Full-row editing -------------------------------------------------
   const fullRowEdit = $derived(ctrl.fullRowEdit);
   // Commit the whole row when the user clicks away from its editors (Excel /
-  // AG-Grid feel). Clicking within any full-row editor keeps editing.
+  // spreadsheet feel). Clicking within any full-row editor keeps editing.
   // Stays here rather than in SvGridCellEditor: that component is instantiated
   // once PER editable cell during a full-row edit, so a document listener there
   // would be attached N times and commit N times.
@@ -429,7 +522,6 @@
   const setActiveCell = $derived(ctrl.setActiveCell);
   const scrollActiveCellIntoView = $derived(ctrl.scrollActiveCellIntoView);
   const getColumnWidth = $derived(ctrl.getColumnWidth);
-  const startColumnResize = $derived(ctrl.startColumnResize);
   const getCellRangeEdges = $derived(ctrl.getCellRangeEdges);
   const fillHandleCell = $derived(ctrl.fillHandleCell);
   const isInFillPreview = $derived(ctrl.isInFillPreview);
@@ -624,6 +716,24 @@
   onpointermove={onWindowPointerMove}
 />
 
+<!--
+  The licensing line every Enterprise upsell note carries. One snippet rather
+  than four copies: four gates worded four ways is how a product ends up
+  explaining its own licensing inconsistently.
+
+  Enterprise is SOFT-gated - the feature runs without a key and the grid shows
+  an unlicensed watermark - so this says exactly that rather than implying the
+  feature is inert without one.
+-->
+{#snippet enterpriseLicenseNote()}
+  <p class="sv-grid-upsell-license">
+    {messages.upsellLicense}
+    <a href="https://svgrid.com/pricing/" target="_blank" rel="noopener noreferrer">
+      {messages.upsellLicenseLink}
+    </a>
+  </p>
+{/snippet}
+
 {#if opt.loading && !opt.loadingOverlay && !hasMeasured}
   <!-- Full-screen loading state only on the *initial* load, before the grid
        has ever rendered. Once measured, a `loading` flip (from a server-mode
@@ -680,6 +790,7 @@
             <code>@svgrid/enterprise</code> and call <code>enableBoardView()</code>
             to render it.
           </p>
+          {@render enterpriseLicenseNote()}
         </div>
       {/if}
     </div>
@@ -727,6 +838,7 @@
             <code>@svgrid/enterprise</code> and call <code>enableSchedulerView()</code>
             to render it.
           </p>
+          {@render enterpriseLicenseNote()}
         </div>
       {/if}
     </div>
@@ -809,6 +921,7 @@
         <div class="sv-grid-scheduler-upsell sv-grid-pivot-upsell" role="note">
           <strong>{messages.pivotUpsellTitle}</strong>
           <p>{messages.pivotUpsellBody}</p>
+          {@render enterpriseLicenseNote()}
         </div>
       {/if}
     </div>
@@ -866,6 +979,13 @@
         <path d="M8 5l9 7-9 7" />
       {:else if name === "op-lessThan"}
         <path d="M16 5l-9 7 9 7" />
+      {:else if name === "op-between"}
+        <!-- Two bounds with the span between them. The catalogue has always
+             named this icon; the snippet had no case for it, so the Between
+             row in the operator menu drew an empty <svg>. -->
+        <path d="M5 5v14" />
+        <path d="M19 5v14" />
+        <path d="M9 12h6" />
       {:else if name === "op-isBlank"}
         <circle cx="12" cy="12" r="8" />
         <path d="M6.5 6.5l11 11" />
@@ -1294,6 +1414,32 @@
     class="sv-grid-root"
     class:sv-grid-root-fill={opt.containerHeight === "100%"}
     style={chartDockReserveStyle}
+    data-move-grab={ctrl.moveGrabHover || ctrl.moveDrag ? "true" : undefined}
+    data-selbar={
+      ctrl.selectionBarOn && ctrl.selectionBarTarget.ids.length > 0
+        ? (getSelectionBarView() ? ctrl.selectionBarPosition : `upsell-${ctrl.selectionBarPosition}`)
+        : undefined
+    }
+    use:lazyRowResize={{
+      disabled: !ctrl.rowResizeOn,
+      // No gutter column on most grids, so fall back to the first body cell -
+      // otherwise `rowResize` would be a prop that silently does nothing.
+      anchor: "row",
+      onResize: (index, height) => ctrl.setRowResizeHeight(index, height),
+    }}
+    use:lazyColumnResize={{
+      disabled: !columnResizeEnabled,
+      getWidth: (columnId) => ctrl.getColumnWidth(columnId),
+      onResize: (columnId, width) => {
+        ctrl.columnWidths = { ...ctrl.columnWidths, [columnId]: width };
+      },
+      label: (columnId) => {
+        const col = ctrl.findColumnById(columnId);
+        return col ? toolPanelHeaderLabel(col) : columnId;
+      },
+      canResize: (columnId) => ctrl.columnResizable(columnId),
+      onAutosize: (columnId) => ctrl.autosizeColumn(columnId),
+    }}
   >
     {#if showGlobalFilterEffective}
       <label class="sv-grid-global-filter">
@@ -1747,32 +1893,6 @@
                             }}
                           />
                         {/if}
-                        <div
-                          class="sv-grid-resize-handle"
-                          class:is-resizing={resizingColumnId ===
-                            header.column.id}
-                          role="separator"
-                          aria-orientation="vertical"
-                          aria-label={`Resize ${toolPanelHeaderLabel(header.column)}`}
-                          tabindex="0"
-                          {...(() => {
-                            // A focusable separator is a widget, so ARIA requires
-                            // aria-valuenow. The value it exposes is the column
-                            // width the arrow keys change; 40 is the floor
-                            // enforced in resizeColumnByKeyboard.
-                            const w = Math.round(ctrl.getColumnWidth(header.column.id));
-                            return {
-                              "aria-valuenow": w,
-                              "aria-valuemin": 40,
-                              "aria-valuetext": `${w} pixels`,
-                            };
-                          })()}
-                          onpointerdown={(event) =>
-                            startColumnResize(event, header.column.id)}
-                          onkeydown={(event) =>
-                            resizeColumnByKeyboard(event, header.column.id)}
-                          ondblclick={(event) => event.stopPropagation()}
-                        ></div>
                       {/if}
                     </th>
                   {/if}
@@ -1900,6 +2020,57 @@
                               }}
                             />
                           </div>
+                        {:else if activeOperator !== "isBlank" && activeOperator !== "isNotBlank" && activeOperator !== "regex" && FilterDatePicker && usesRichDateFilter(rendered.column.columnDef.editorType)}
+                          <!-- Same picker the cell editor uses, so a date
+                               column looks the same wherever you touch it.
+                               `regex` keeps the text box - a pattern is not
+                               a date. -->
+                          {#if activeOperator === "between"}
+                            <!-- `between` needs BOTH bounds - `condActive`
+                                 ignores the filter until `valueTo` is set too -
+                                 so this is one range field rather than two
+                                 single-date pickers: both ends come from a
+                                 single gesture in one popover, and it still
+                                 fits a narrow date column. It writes the same
+                                 pair of stores the plain text inputs use. -->
+                            {#if FilterRangePicker}
+                              {@const RangePicker = FilterRangePicker}
+                              {@const from = fromIsoDateLocal(
+                                filterRowValues[rendered.column.id],
+                              )}
+                              {@const to = fromIsoDateLocal(
+                                filterMenuValues[rendered.column.id]?.valueTo,
+                              )}
+                              <RangePicker
+                                value={from && to ? [from, to] : null}
+                                formatString="yyyy-MM-dd"
+                                block
+                                placeholder="Range…"
+                                onChange={(range) => {
+                                  updateFilterRow(
+                                    rendered.column.id,
+                                    range ? toIsoDateLocal(range[0]) : "",
+                                  );
+                                  updateFilterMenuValueTo(
+                                    rendered.column.id,
+                                    range ? toIsoDateLocal(range[1]) : "",
+                                  );
+                                }}
+                              />
+                            {/if}
+                          {:else}
+                            {@const FilterPicker = FilterDatePicker}
+                            <FilterPicker
+                              value={(filterRowValues[rendered.column.id] ?? "") || null}
+                              formatString="yyyy-MM-dd"
+                              dropDownDisplayMode="calendar"
+                              block
+                              nullable
+                              placeholder="Filter…"
+                              onChange={(d) =>
+                                updateFilterRow(rendered.column.id, toIsoDateLocal(d))}
+                            />
+                          {/if}
                         {:else if activeOperator !== "isBlank" && activeOperator !== "isNotBlank"}
                           {@const frType = getEditorInputType(
                             rendered.column.columnDef.editorType ?? "text",
@@ -2177,12 +2348,11 @@
                               rendered.column.columnDef.cellFlash,
                             ),
                           }}
-                          {...getGridCellA11yProps({
-                            id: getGridCellDomId(ctrl.gridDomId, rowIndex, colIndex),
-                            rowIndex: rowIndex + 1,
-                            colIndex: colIndex + 1,
-                            selected: isRowSelected(row.id),
-                          })}
+                          role="gridcell"
+                          id={getGridCellDomId(ctrl.gridDomId, rowIndex, colIndex)}
+                          aria-colindex={colIndex + 1}
+                          aria-rowindex={rowIndex + 1}
+                          aria-selected={isRowSelected(row.id)}
                         >
                           {#if inRowEdit || isEditing}
                             <!-- The editing cell stays empty until the lazy
@@ -2194,11 +2364,15 @@
                               <CellEditor {ctrl} column={rendered.column} {row} fullRow={inRowEdit} />
                             {/if}
                           {:else}
-                            {@render cellBodyWithFormat(
-                              row,
-                              rendered.column,
-                              cellValue,
-                            )}
+                            {#if plainCellBody}
+                              {@render cellBody(row, rendered.column, cellValue)}
+                            {:else}
+                              {@render cellBodyWithFormat(
+                                row,
+                                rendered.column,
+                                cellValue,
+                              )}
+                            {/if}
                           {/if}
                           {#if !isEditing && fillHandleCell && fillHandleCell.rowIndex === rowIndex && fillHandleCell.colIndex === colIndex}
                             <!-- Excel-style fill handle: drag down/right to
@@ -2948,6 +3122,31 @@
     {#if ctrl.chartingEnabled && ctrl.chartPanelOpen && ChartPanelView}
       <ChartPanelView {ctrl} />
     {/if}
+
+    <!-- Bulk-action bar. INSIDE the root, unlike GridMenus: it is positioned
+         `absolute` against it, so moving it outside would anchor it to the
+         page. The renderer is Enterprise and arrives through the
+         selection-bar-view seam; without it, a short note in its place. -->
+    {#if ctrl.selectionBarOn && ctrl.selectionBarTarget.ids.length > 0}
+      {#if getSelectionBarView()}
+        {@const SelectionBarView = getSelectionBarView()}
+        <SelectionBarView {ctrl} />
+      {:else}
+        <div
+          class="sv-grid-scheduler-upsell sv-grid-selection-bar-upsell"
+          data-position={ctrl.selectionBarPosition}
+          role="note"
+        >
+          <strong>Bulk-action bar</strong>
+          <p>
+            The selection bar is an Enterprise feature. Install
+            <code>@svgrid/enterprise</code> and call <code>enableSelectionBar()</code>
+            to render it.
+          </p>
+          {@render enterpriseLicenseNote()}
+        </div>
+      {/if}
+    {/if}
   </div>
   <!-- /.sv-grid-root -->