@jielga/tmdatagrid 2.0.0-beta.8 → 2.0.0

package/src/{tmdatagrid/components → components}/TMDataGridHeaderCell.tsx

@@ -12,12 +12,14 @@ import {
 import type { TMDataGridColumnLayout } from "./TMDataGridTable";
 import { getColumnCapabilities, getGridCapabilities } from "../core/capabilities";
 import { autosizeColumn } from "../core/autosize";
+import { isNode } from "../core/dom";
 import {
   getColumnRegion,
   getStepTargetColumn,
   keepGeneratedColumnsOutermost,
   moveColumn,
   moveColumnByStep,
+  pinningPositionOfSide,
   type TMDataGridDropSide,
 } from "../core/columnOrdering";
 import {
@@ -46,6 +48,7 @@ import {
   UngroupIcon,
 } from "./icons";
 import { GROUP_COLUMN_ID } from "./TMDataGridGroupColumn";
+import { TMDataGridMenuColumns } from "./TMDataGridMenu";
 import { type TMDataGridFeatures, openColumnFilter } from "../useTMDataGrid";
 
 /** The table as the header cell sees it, after the context type erasure. */
@@ -89,7 +92,7 @@ export function TMDataGridHeaderCell({
   renderColumnMenuItems?: TMDataGridColumnMenuItemsRenderer;
 }) {
   const api = useTMDataGridContext();
-  const { table, features, labels } = api;
+  const { table, features, filters, labels } = api;
   const column = header.column;
   const [menuOpened, setMenuOpened] = useState(false);
   const [contextMenuOpened, setContextMenuOpened] = useState(false);
@@ -191,7 +194,7 @@ export function TMDataGridHeaderCell({
   function handleDragLeave(event: DragEvent<HTMLDivElement>) {
     // dragleave also fires when the pointer crosses into a child element.
     const next = event.relatedTarget;
-    if (next instanceof Node && event.currentTarget.contains(next)) return;
+    if (isNode(next) && event.currentTarget.contains(next)) return;
     setDropSide(null);
   }
 
@@ -270,8 +273,8 @@ export function TMDataGridHeaderCell({
    */
   function setPinned(position: "left" | "right" | false) {
     if (position) freezeRenderedWidths();
-    column.pin(position);
-    // `pin("right")` appends, which would leave the column outside the edit
+    column.pin(pinningPositionOfSide(position));
+    // `pin("end")` appends, which would leave the column outside the edit
     // lane. Normalising after the pin rather than writing the lane by hand
     // keeps TanStack's own handling of a header group's leaves.
     table.setColumnPinning(keepGeneratedColumnsOutermost);
@@ -297,7 +300,9 @@ export function TMDataGridHeaderCell({
       <Menu.Divider key="sort-divider" />,
     );
   }
-  if (canFilter) {
+  // Not under header filters: the item's only job is to reveal a control that
+  // is already on screen, one row below this menu.
+  if (canFilter && !filters.inHeader) {
     menuItems.push(
       <Menu.Item
         key="filter"
@@ -476,13 +481,19 @@ export function TMDataGridHeaderCell({
   }
   if (canManageColumns) {
     menuItems.push(
-      <Menu.Item
-        key="manage"
-        leftSection={<ColumnsIcon size={16} stroke={1.6} />}
-        onClick={() => api.ui.actions.setColumnsPanelOpen(true)}
-      >
-        {labels.manageColumns}
-      </Menu.Item>,
+      <Menu.Sub key="manage">
+        <Menu.Sub.Target>
+          <Menu.Sub.Item leftSection={<ColumnsIcon size={16} stroke={1.6} />}>
+            {labels.manageColumns}
+          </Menu.Sub.Item>
+        </Menu.Sub.Target>
+        <Menu.Sub.Dropdown>
+          {/* No search box: `Menu.Search` registers on the root menu context,
+              which switches off type-ahead and the arrow-key handling of every
+              dropdown of this menu - the column menu's included. */}
+          <TMDataGridMenuColumns searchable={false} />
+        </Menu.Sub.Dropdown>
+      </Menu.Sub>,
     );
   }
   // A trailing divider reads as a dropped item - drop the divider instead.
@@ -529,11 +540,11 @@ export function TMDataGridHeaderCell({
       // The same coordinate the body, summary and entry cells carry, so one
       // selector reaches a column's header and its cells alike.
       data-column-id={column.id}
-      data-active={isSorted || isFiltered}
+      data-active={isSorted || isFiltered || undefined}
       data-align={align}
       // A control lane is a fixed track, so it cannot take the cell padding the
       // scale grows for text. See isControlColumn.
-      data-control-column={isControlColumn(column.id)}
+      data-control-column={isControlColumn(column.id) || undefined}
       // Only meaningful on a sortable column: "none" announces that this
       // header sorts, which is wrong on one that does not.
       aria-sort={
@@ -558,6 +569,11 @@ export function TMDataGridHeaderCell({
       onDragLeave={isDropTarget ? handleDragLeave : undefined}
       onDrop={isDropTarget ? handleDrop : undefined}
       style={{
+        // A group header covers the tracks of the leaves under it. Without the
+        // span it would sit in one track and leave the rest of its width with
+        // no cell at all - a gap the body rows scroll up through, since the
+        // header rows above the body are what hides them.
+        gridColumn: header.colSpan > 1 ? `span ${header.colSpan}` : undefined,
         left: pinnedAt === "left" ? layout.offset : undefined,
         right: pinnedAt === "right" ? layout.offset : undefined,
         position: pinnedAt ? "sticky" : undefined,
@@ -599,7 +615,9 @@ export function TMDataGridHeaderCell({
 
       {isLeaf && (
         <div className={classes.headerActions}>
-          {isFiltered && (
+          {/* Dropped under header filters, where the filled-in control below
+              is both the indicator and the way in. */}
+          {isFiltered && !filters.inHeader && (
             <ActionIcon
               className={classes.headerAction}
               data-pinned-visible="true"
@@ -621,19 +639,24 @@ export function TMDataGridHeaderCell({
           {canSort && (
             <ActionIcon
               className={`${classes.headerAction} ${classes.sortAction}`}
-              data-pinned-visible={isSorted}
+              data-pinned-visible={isSorted || undefined}
               // The arrow is the only sort indicator now that the title no
               // longer tints, so it takes the colour while the sort holds. On
               // an unsorted column it is only the hover affordance, and stays a
               // faded grey so the two are not confused.
-              data-sorted={isSorted}
+              data-sorted={isSorted || undefined}
               variant="subtle"
               color={isSorted ? undefined : "gray"}
               size="xs"
               aria-label={labels.sortColumn(label)}
               data-dg-part="header-sort"
               data-column-id={column.id}
-              onClick={column.getToggleSortingHandler()}
+              // Stopped here: the header cell around it sorts on click too, and
+              // letting the click reach it would advance the sort twice.
+              onClick={(event) => {
+                event.stopPropagation();
+                column.getToggleSortingHandler()?.(event);
+              }}
             >
               {sortDirection ? (
                 <ArrowDownIcon size={14} stroke={1.6} />
@@ -667,7 +690,7 @@ export function TMDataGridHeaderCell({
                   // Held visible for the right-click menu too: that one opens at
                   // the pointer and is portaled, so the hover that revealed the
                   // actions is lost the moment the pointer enters the dropdown.
-                  data-pinned-visible={menuOpened || contextMenuOpened}
+                  data-pinned-visible={menuOpened || contextMenuOpened || undefined}
                   variant="subtle"
                   color="gray"
                   size="xs"
@@ -702,18 +725,30 @@ export function TMDataGridHeaderCell({
           ]
             .filter(Boolean)
             .join(" ")}
+          // A part only where it is a handle: on a fixed-width column the
+          // separator is a plain divider, and a test that finds it would be
+          // dragging something that does nothing.
+          data-dg-part={canResize ? "header-resize" : undefined}
+          data-column-id={canResize ? column.id : undefined}
           // Keeps a drag that starts on the separator from being picked up by
           // the draggable header around it.
           draggable={false}
           // The drag starts from `column.getSize()`, so the rendered width has
           // to be in `columnSizing` before the handler reads it - otherwise
           // the first pointer move snaps a fluid column to its declared size.
+          //
+          // The handler listens for the moves and the release on the document
+          // it is given - the separator's own, not the global one, which is
+          // the opener's when the grid is rendered through a portal into a
+          // window opened with `window.open`.
           onMouseDown={
             canResize
               ? (event) => {
                   suppressSortRef.current = true;
                   freezeRenderedWidths();
-                  header.getResizeHandler()(event);
+                  header.getResizeHandler(event.currentTarget.ownerDocument)(
+                    event,
+                  );
                 }
               : undefined
           }
@@ -721,7 +756,9 @@ export function TMDataGridHeaderCell({
             canResize
               ? (event) => {
                   freezeRenderedWidths();
-                  header.getResizeHandler()(event);
+                  header.getResizeHandler(event.currentTarget.ownerDocument)(
+                    event,
+                  );
                 }
               : undefined
           }

package/src/components/TMDataGridHeaderFilterRow.module.css

@@ -0,0 +1,51 @@
+/* The second header row, under the group rows and above the body. Same column
+   tracks as every other row, through subgrid, so it follows resizing,
+   reordering and pinning without knowing about any of them.
+
+   Sticky like the header rows above it, and stacked under them by the same
+   measurement: the table writes every header row's `top` inline once it knows
+   how tall the rows before it are. This is the pre-measurement fallback, and
+   it is right for the common case of one header row. */
+.headerFilterRow {
+  display: grid;
+  grid-column: 1 / -1;
+  grid-template-columns: subgrid;
+  position: sticky;
+  top: var(--dg-header-height);
+  z-index: var(--dg-z-header, 6);
+}
+
+.headerFilterCell {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  min-width: 0;
+  /* A 60px column has room for the input and nothing beside it. Clipping is
+     what keeps the control from spilling over its neighbour; the operator
+     button is the first thing to go. */
+  overflow: hidden;
+  padding: calc(var(--dg-padding) / 2);
+  /* Opaque: the body scrolls underneath it. */
+  background-color: var(--mantine-color-body);
+  border-bottom: 1px solid var(--mantine-color-default-border);
+}
+
+/* The generated lanes - checkbox, details, row number - hold no filter, so
+   they keep the header's own padding rather than a control's. */
+.headerFilterCell[data-control-column="true"] {
+  padding: 0;
+}
+
+.headerFilterValue {
+  flex: 1;
+  min-width: 0;
+}
+
+.headerFilterOperator {
+  flex: none;
+}
+
+.operatorItemActive {
+  font-weight: 600;
+  color: var(--mantine-primary-color-filled);
+}

package/src/components/TMDataGridHeaderFilterRow.tsx

@@ -0,0 +1,301 @@
+import { ActionIcon, Menu, Tooltip } from "@mantine/core";
+import { useSelector } from "@tanstack/react-store";
+import { useEffect, useMemo, useRef, useState } from "react";
+import classes from "./TMDataGridHeaderFilterRow.module.css";
+import sticky from "./sticky.module.css";
+import { useTMDataGridContext } from "../TMDataGridContext";
+import {
+  getColumnDefaultOperator,
+  getColumnLabel,
+  getColumnOperators,
+  isControlColumn,
+} from "../core/columnUtils";
+import {
+  type TMDataGridFilterOperator,
+  type TMDataGridFilterValue,
+  emptyValueForOperator,
+  filterValueShape,
+  isTMDataGridFilterValue,
+} from "../core/filterOperators";
+import { FilterIcon } from "./icons";
+import {
+  filterControlFor,
+  filterOptionsUseFacets,
+} from "./filters/filterControlFor";
+import type { TMDataGridColumnLayout } from "./TMDataGridTable";
+import type { TMDataGridHeader } from "./TMDataGridHeaderCell";
+
+/**
+ * Whether a value says nothing at all - untrimmed, unlike `isFilterActive`,
+ * which is about whether a filter *narrows* anything. A lone space narrows
+ * nothing but is very much something the user typed.
+ */
+function isEmptyValue(value: string | ReadonlyArray<string>): boolean {
+  return Array.isArray(value)
+    ? value.every((entry) => entry === "")
+    : value === "";
+}
+
+/**
+ * One column's filter control, as it appears in the header row: the value
+ * control the column would get in the panel, plus a button for the operator
+ * when the column's type offers more than one.
+ *
+ * The column and operator dropdowns of a panel row have no place here - the
+ * column is the one the cell sits over, and a header cell has room for a value
+ * and not much else. Everything else is the same filter: the same operators,
+ * the same `meta.filter.control`, the same `columnFilters` state.
+ */
+function HeaderFilterControl({ column }: { column: TMDataGridHeader["column"] }) {
+  const { table, labels, controlSize } = useTMDataGridContext();
+  const filterValue = useSelector(
+    table.store,
+    (state) => state.columnFilters.find((filter) => filter.id === column.id)?.value,
+  );
+
+  const defaultOperator = getColumnDefaultOperator(column);
+  const current = isTMDataGridFilterValue(filterValue) ? filterValue : undefined;
+  const operator = current?.operator ?? defaultOperator;
+  const value = current?.value ?? emptyValueForOperator(operator);
+  const label = getColumnLabel(column);
+
+  /**
+   * Writes the filter, or drops it entirely once nothing is left to say. A
+   * header control is always on screen, so an empty one has no row to keep
+   * alive the way a panel row does, and leaving the entry behind would put a
+   * filter in `columnFilters` that says nothing.
+   *
+   * Emptiness here is the literal one, not `isFilterActive`'s: that one trims,
+   * and dropping the filter on a value of `" "` would take the space back out
+   * of the input the moment it was typed. An operator the user picked is worth
+   * keeping even with an empty value; the type's own default is not.
+   */
+  function write(next: TMDataGridFilterValue) {
+    const worthKeeping =
+      !isEmptyValue(next.value) || next.operator !== defaultOperator;
+    column.setFilterValue(worthKeeping ? next : undefined);
+  }
+
+  function changeOperator(next: TMDataGridFilterOperator) {
+    // Same arity rule as the panel: keep the value across operators of the
+    // same shape, reset it across any shape boundary.
+    write({
+      operator: next,
+      value:
+        filterValueShape(next) === filterValueShape(operator)
+          ? value
+          : emptyValueForOperator(next),
+    });
+  }
+
+  // Memoized because this row re-renders with the table - on every scroll
+  // frame, for every column - while resolving faceted options walks the
+  // faceted map into a sorted set. TanStack swaps that map's identity whenever
+  // the values behind it change, so it is exactly the right key.
+  const facetKey = filterOptionsUseFacets(column)
+    ? column.getFacetedUniqueValues()
+    : undefined;
+  const { options, ValueControl } = useMemo(
+    () => filterControlFor(table, column),
+    // `facetKey` is a cache key, not something the body reads: the resolution
+    // reaches the faceted map through the column, so nothing here names it.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [table, column, facetKey],
+  );
+  const operators = getColumnOperators(column);
+
+  return (
+    <>
+      <div className={classes.headerFilterValue} data-dg-filter-value-slot>
+        <ValueControl
+          column={column}
+          table={table}
+          operator={operator}
+          value={value}
+          onChange={(next) => write({ operator, value: next })}
+          options={options}
+          size={controlSize}
+          labels={labels}
+          layout="header"
+        />
+      </div>
+
+      <OperatorMenu
+        columnId={column.id}
+        columnLabel={label}
+        operator={operator}
+        isDefault={operator === defaultOperator}
+        operators={operators}
+        onChange={changeOperator}
+      />
+    </>
+  );
+}
+
+/**
+ * The operator picker beside a header filter's value: which comparison the
+ * column is on, and the list to change it to.
+ *
+ * The tooltip is the only thing saying what the current operator is while the
+ * menu is shut, and the only thing in the way once it is open - so it is held
+ * back while the dropdown shows.
+ */
+function OperatorMenu({
+  columnId,
+  columnLabel,
+  operator,
+  isDefault,
+  operators,
+  onChange,
+}: {
+  columnId: string;
+  columnLabel: string;
+  operator: TMDataGridFilterOperator;
+  isDefault: boolean;
+  operators: ReadonlyArray<TMDataGridFilterOperator>;
+  onChange: (next: TMDataGridFilterOperator) => void;
+}) {
+  const { labels } = useTMDataGridContext();
+  const [opened, setOpened] = useState(false);
+
+  return (
+    <Menu
+      opened={opened}
+      onChange={setOpened}
+      position="bottom-end"
+      shadow="md"
+      width={220}
+      withinPortal
+    >
+      <Menu.Target>
+        <Tooltip
+          label={labels.operators[operator]}
+          openDelay={400}
+          disabled={opened}
+        >
+          <ActionIcon
+            className={classes.headerFilterOperator}
+            variant="subtle"
+            // Tinted while the column is on anything but its default operator -
+            // the one part of the filter the value cannot show.
+            color={isDefault ? "gray" : undefined}
+            size="sm"
+            aria-label={labels.filterOperatorFor(columnLabel)}
+            data-dg-part="header-filter-operator"
+            data-column-id={columnId}
+          >
+            <FilterIcon size={14} stroke={1.6} />
+          </ActionIcon>
+        </Tooltip>
+      </Menu.Target>
+      <Menu.Dropdown>
+        {operators.map((candidate) => (
+          <Menu.Item
+            key={candidate}
+            className={
+              candidate === operator ? classes.operatorItemActive : undefined
+            }
+            onClick={() => onChange(candidate)}
+          >
+            {labels.operators[candidate]}
+          </Menu.Item>
+        ))}
+      </Menu.Dropdown>
+    </Menu>
+  );
+}
+
+/**
+ * `filters.inHeader` - a second header row holding one value control per
+ * filterable column, always visible.
+ *
+ * A header row like the group rows above it, on the same column tracks and
+ * with the same pinned lanes, so resizing, reordering and pinning move the
+ * controls with their columns. It sticks below the group rows rather than at
+ * the top, and carries `data-dg-header-row` so the body's scroll offset counts
+ * it in.
+ *
+ * @internal Rendered by `TMDataGrid.Table`.
+ */
+export function TMDataGridHeaderFilterRow({
+  leafHeaders,
+  layoutFor,
+  ariaRowIndex,
+}: {
+  leafHeaders: ReadonlyArray<TMDataGridHeader>;
+  layoutFor: (columnId: string) => TMDataGridColumnLayout;
+  ariaRowIndex: number;
+}) {
+  const { ui, labels } = useTMDataGridContext();
+  const focusColumnId = useSelector(ui, (state) => state.headerFilterColumnId);
+  const rowRef = useRef<HTMLDivElement>(null);
+
+  // `openColumnFilter` under header filters means "put me in that column's
+  // control" - there is no panel to open. The column may be scrolled out
+  // sideways, so it is brought into view first.
+  useEffect(() => {
+    if (focusColumnId === null) return;
+    const cell = rowRef.current?.querySelector<HTMLElement>(
+      `[data-dg-part="header-filter-cell"][data-column-id="${CSS.escape(focusColumnId)}"]`,
+    );
+    cell?.scrollIntoView({ block: "nearest", inline: "nearest" });
+    cell
+      ?.querySelector<HTMLElement>(
+        "input:not([type='hidden']), textarea, select, [tabindex]:not([tabindex='-1'])",
+      )
+      ?.focus();
+    ui.actions.focusHeaderFilter(null);
+  }, [focusColumnId, ui]);
+
+  return (
+    <div
+      ref={rowRef}
+      role="row"
+      aria-rowindex={ariaRowIndex}
+      // Counted by the same measurement the group rows are: it is part of what
+      // the body scrolls under.
+      data-dg-header-row
+      data-dg-header-filter-row
+      data-dg-part="header-filter-row"
+      // The header/body boundary is this row once it exists, so it wears the
+      // scrolled-under shadow the last group row wears otherwise.
+      className={`${classes.headerFilterRow} ${sticky.headerBoundary}`}
+    >
+      {leafHeaders.map((header) => {
+        const column = header.column;
+        const layout = layoutFor(column.id);
+        return (
+          <div
+            key={header.id}
+            role="columnheader"
+            aria-label={labels.filterOn(getColumnLabel(column))}
+            data-dg-part="header-filter-cell"
+            data-column-id={column.id}
+            data-control-column={isControlColumn(column.id) || undefined}
+            className={[
+              classes.headerFilterCell,
+              layout.isBoundary && layout.pinnedAt === "left"
+                ? sticky.stickyLeft
+                : "",
+              layout.isBoundary && layout.pinnedAt === "right"
+                ? sticky.stickyRight
+                : "",
+            ]
+              .filter(Boolean)
+              .join(" ")}
+            style={{
+              left: layout.pinnedAt === "left" ? layout.offset : undefined,
+              right: layout.pinnedAt === "right" ? layout.offset : undefined,
+              position: layout.pinnedAt ? "sticky" : undefined,
+              zIndex: layout.pinnedAt
+                ? "var(--dg-z-header-pinned-cell, 7)"
+                : undefined,
+            }}
+          >
+            {column.getCanFilter() && <HeaderFilterControl column={column} />}
+          </div>
+        );
+      })}
+    </div>
+  );
+}