@jielga/tmdatagrid 0.1.0 → 0.3.0

package/src/tmdatagrid/components/TMDataGrid.module.css

@@ -0,0 +1,73 @@
+/* The grid root: the size scale every other module reads, and the frame.
+   Each component owns its own module; these variables cascade into all of
+   them, and the pinned-column boundary shared by header and body cells lives
+   in sticky.module.css. */
+
+/* Size scale. Row heights mirror SIZE_ROW_HEIGHT in core/sizes.ts — the
+   virtualizer needs the number in JS, so the two have to agree. */
+.root[data-size="xs"] {
+  --dg-row-height: 34px;
+  --dg-header-height: 32px;
+  --dg-font-size: var(--mantine-font-size-xs);
+  --dg-padding: 6px;
+}
+
+.root[data-size="sm"] {
+  --dg-row-height: 42px;
+  --dg-header-height: 38px;
+  --dg-font-size: var(--mantine-font-size-sm);
+  --dg-padding: 8px;
+}
+
+.root[data-size="md"] {
+  --dg-row-height: 52px;
+  --dg-header-height: 44px;
+  --dg-font-size: var(--mantine-font-size-sm);
+  --dg-padding: 10px;
+}
+
+.root[data-size="lg"] {
+  --dg-row-height: 62px;
+  --dg-header-height: 52px;
+  --dg-font-size: var(--mantine-font-size-md);
+  --dg-padding: 14px;
+}
+
+.root[data-size="xl"] {
+  --dg-row-height: 72px;
+  --dg-header-height: 60px;
+  --dg-font-size: var(--mantine-font-size-lg);
+  --dg-padding: 18px;
+}
+
+.root {
+  /* Fallbacks, so the parts still work if rendered outside a sized root. */
+  --dg-row-height: 52px;
+  --dg-header-height: 44px;
+  --dg-font-size: var(--mantine-font-size-sm);
+  --dg-padding: 10px;
+  /* Background of a selected row, when `showSelectedBackground` is on. Override
+     it on the grid:
+     <TMDataGrid style={{ "--dg-row-selected-bg": "var(--mantine-color-blue-0)" }} /> */
+  --dg-row-selected-bg: var(--mantine-primary-color-light);
+  /* Background of the highlighted row, under a selectionMode that has one.
+     Stronger than the selected background by default, since under
+     "checkboxAndHighlight" the two show up together. */
+  --dg-row-highlight-bg: var(--mantine-primary-color-light-hover);
+  /* Background of a group row. Transparent by default — the bold label and the
+     chevron are enough, and with the tree collapsed every row on screen is a
+     group row, so a tint would grey out the whole grid. Set it to give groups a
+     band of their own. */
+  --dg-row-group-bg: var(--mantine-color-body);
+
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+  /* Header text is a stretched flex item, so an inherited `text-align: center`
+     from the host page would centre headers away from their cell content. */
+  text-align: left;
+  border: 1px solid var(--mantine-color-default-border);
+  border-radius: var(--mantine-radius-md);
+  background-color: var(--mantine-color-body);
+}

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

@@ -2,8 +2,9 @@ import type { RowData } from "@tanstack/react-table";
 import { type CSSProperties, type ReactNode, useMemo } from "react";
 import classes from "./TMDataGrid.module.css";
 import { TMDataGridColumnsPanel } from "./TMDataGridColumnsPanel";
-import { TMDataGridContextProvider } from "./TMDataGridContext";
+import { TMDataGridContextProvider } from "../TMDataGridContext";
 import { TMDataGridFilterPanel } from "./TMDataGridFilterPanel";
+import { TMDataGridFilterPills } from "./TMDataGridFilterPills";
 import { TMDataGridFooter } from "./TMDataGridFooter";
 import { TMDataGridTable } from "./TMDataGridTable";
 import {
@@ -18,8 +19,8 @@ import {
   SIZE_CONTROL_SIZE,
   SIZE_ROW_HEIGHT,
   type TMDataGridSize,
-} from "./sizes";
-import type { TMDataGridApi } from "./useTMDataGrid";
+} from "../core/sizes";
+import type { TMDataGridApi } from "../useTMDataGrid";
 
 export type TMDataGridProps<TData extends RowData> = TMDataGridApi<TData> & {
   children: ReactNode;
@@ -29,7 +30,12 @@ export type TMDataGridProps<TData extends RowData> = TMDataGridApi<TData> & {
    */
   size?: TMDataGridSize;
   className?: string;
-  style?: CSSProperties;
+  /**
+   * Inline styles. Widened to accept CSS variables, which is how the grid's
+   * colours are themed — `--dg-row-selected-bg` for the selected row
+   * background. Plain `CSSProperties` rejects `--*` keys.
+   */
+  style?: CSSProperties & Record<`--${string}`, string | number>;
 };
 
 /**
@@ -96,6 +102,11 @@ export const TMDataGrid = Object.assign(TMDataGridRoot, {
   Footer: TMDataGridFooter,
   /** Rendered by `TMDataGrid.Table`; exported for custom layouts. */
   FilterPanel: TMDataGridFilterPanel,
+  /**
+   * Takes the grid as an `api` prop rather than from context, so it can be
+   * rendered outside `<TMDataGrid>` — a page header, for instance.
+   */
+  FilterPills: TMDataGridFilterPills,
   /** Rendered by `TMDataGrid.ColumnsButton`; exported for custom layouts. */
   ColumnsPanel: TMDataGridColumnsPanel,
 });

package/src/tmdatagrid/components/TMDataGridColumnsPanel.module.css

@@ -0,0 +1,25 @@
+.columnsPanel {
+  width: 280px;
+  display: flex;
+  flex-direction: column;
+}
+
+.columnsPanelSearch {
+  padding: var(--mantine-spacing-sm);
+}
+
+.columnsPanelList {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mantine-spacing-sm);
+  padding: 0 var(--mantine-spacing-sm) var(--mantine-spacing-sm);
+}
+
+.columnsPanelFooter {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--mantine-spacing-sm);
+  padding: var(--mantine-spacing-sm);
+  border-top: 1px solid var(--mantine-color-default-border);
+}

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

@@ -1,9 +1,10 @@
 import { Button, Checkbox, ScrollArea, Text, TextInput } from "@mantine/core";
 import { useSelector } from "@tanstack/react-store";
 import { useState } from "react";
-import classes from "./TMDataGrid.module.css";
-import { useTMDataGridContext } from "./TMDataGridContext";
-import { getColumnLabel } from "./columnUtils";
+import classes from "./TMDataGridColumnsPanel.module.css";
+import { useTMDataGridContext } from "../TMDataGridContext";
+import { getColumnLabel } from "../core/columnUtils";
+import { GROUP_COLUMN_ID } from "./TMDataGridGroupColumn";
 import { SearchIcon } from "./icons";
 
 /**
@@ -20,7 +21,12 @@ export function TMDataGridColumnsPanel() {
     (state) => state.columnVisibility,
   );
 
-  const columns = table.getAllLeafColumns();
+  // The tree column is left out rather than listed and disabled: its visibility
+  // is not a setting at all, it follows the grouping state, so an unchecked box
+  // that cannot be ticked would only invite the question.
+  const columns = table
+    .getAllLeafColumns()
+    .filter((column) => column.id !== GROUP_COLUMN_ID);
   const needle = search.trim().toLowerCase();
   const visibleInPanel = needle
     ? columns.filter((column) =>

package/src/tmdatagrid/components/TMDataGridFilterPanel.module.css

@@ -0,0 +1,35 @@
+/* Floats over the first body rows, anchored to `.tableWrapper`. Sits just
+   below the header row, so its offset follows the size scale rather than a
+   fixed pixel count. */
+.filterPanel {
+  position: absolute;
+  top: calc(var(--dg-header-height) + 2px);
+  left: var(--mantine-spacing-md);
+  z-index: 5;
+  padding: var(--mantine-spacing-sm);
+  border-radius: var(--mantine-radius-md);
+  border: 1px solid var(--mantine-color-default-border);
+  background-color: var(--mantine-color-body);
+  box-shadow: var(--mantine-shadow-md);
+}
+
+.filterRow {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--mantine-spacing-xs);
+}
+
+.filterPanelHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--mantine-spacing-md);
+  padding-bottom: var(--mantine-spacing-xs);
+}
+
+.filterPanelFooter {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--mantine-spacing-md);
+}

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

@@ -1,8 +1,9 @@
-import { ActionIcon, Button, Select, Stack, TextInput } from "@mantine/core";
+import { ActionIcon, Button, Select, Stack, Text, TextInput } from "@mantine/core";
 import { useSelector } from "@tanstack/react-store";
-import classes from "./TMDataGrid.module.css";
-import { useTMDataGridContext } from "./TMDataGridContext";
-import { getColumnLabel, getColumnType } from "./columnUtils";
+import { useEffect, useRef } from "react";
+import classes from "./TMDataGridFilterPanel.module.css";
+import { useTMDataGridContext } from "../TMDataGridContext";
+import { getColumnLabel, getColumnType } from "../core/columnUtils";
 import {
   type TMDataGridFilterOperator,
   type TMDataGridFilterValue,
@@ -11,7 +12,7 @@ import {
   getOperatorsForType,
   isTMDataGridFilterValue,
   operatorNeedsValue,
-} from "./filterOperators";
+} from "../core/filterOperators";
 import { CloseIcon } from "./icons";
 
 const FALLBACK_FILTER: TMDataGridFilterValue = { operator: "contains", value: "" };
@@ -33,6 +34,27 @@ export function TMDataGridFilterPanel() {
     table.store,
     (state) => state.columnFilters,
   );
+  const panelRef = useRef<HTMLDivElement>(null);
+
+  // Clicking away hides the panel, the way any floating surface behaves. On
+  // pointerdown rather than click, so a press that starts outside dismisses it
+  // even when the pointer is released somewhere else.
+  useEffect(() => {
+    if (!opened) return;
+
+    const handlePointerDown = (event: PointerEvent) => {
+      const target = event.target;
+      if (!(target instanceof Element)) return;
+      if (panelRef.current?.contains(target)) return;
+      // The toolbar button toggles the panel itself. Closing from here first
+      // would leave its click reopening what the user meant to close.
+      if (target.closest("[data-dg-filter-toggle]")) return;
+      ui.actions.closeFilterPanel();
+    };
+
+    document.addEventListener("pointerdown", handlePointerDown);
+    return () => document.removeEventListener("pointerdown", handlePointerDown);
+  }, [opened, ui]);
 
   if (!opened) return null;
 
@@ -86,6 +108,14 @@ export function TMDataGridFilterPanel() {
     );
   }
 
+  /** Clears every filter, including half-typed ones the pills never showed. */
+  function clearAllFilters() {
+    table.setColumnFilters([]);
+    // Same exit as removing the last filter row by hand: an empty panel has
+    // nothing to show but its own buttons.
+    ui.actions.closeFilterPanel();
+  }
+
   function addFilter() {
     const nextColumn = filterableColumns.find(
       (column) => !columnFilters.some((filter) => filter.id === column.id),
@@ -103,8 +133,39 @@ export function TMDataGridFilterPanel() {
     ]);
   }
 
+  const canAddFilter = filterableColumns.some(
+    (column) => !columnFilters.some((filter) => filter.id === column.id),
+  );
+
   return (
-    <div className={classes.filterPanel}>
+    <div
+      ref={panelRef}
+      role="group"
+      aria-label="Filters"
+      className={classes.filterPanel}
+      // Escape is what closes a floating surface, and every control that can
+      // hold focus in here sits inside this element.
+      onKeyDown={(event) => {
+        if (event.key !== "Escape") return;
+        event.stopPropagation();
+        ui.actions.closeFilterPanel();
+      }}
+    >
+      <div className={classes.filterPanelHeader}>
+        <Text size={controlSize} fw={600}>
+          Filters
+        </Text>
+        <ActionIcon
+          variant="subtle"
+          color="gray"
+          size="sm"
+          aria-label="Close filters"
+          onClick={ui.actions.closeFilterPanel}
+        >
+          <CloseIcon size={16} stroke={1.6} />
+        </ActionIcon>
+      </div>
+
       <Stack gap="xs">
         {columnFilters.map((filter) => {
           const column = table.getColumn(filter.id);
@@ -129,6 +190,10 @@ export function TMDataGridFilterPanel() {
                 size={controlSize}
                 w={160}
                 allowDeselect={false}
+                // Both dropdowns render inside the panel: a portalled one is
+                // outside it in the DOM, and picking an option would read as a
+                // click away and close the panel under the user.
+                comboboxProps={{ withinPortal: false }}
                 data={columnOptions}
                 value={filter.id}
                 onChange={(next) => next && changeFilterColumn(filter.id, next)}
@@ -139,6 +204,7 @@ export function TMDataGridFilterPanel() {
                 size={controlSize}
                 w={170}
                 allowDeselect={false}
+                comboboxProps={{ withinPortal: false }}
                 data={getOperatorsForType(type).map((operator) => ({
                   value: operator,
                   label: FILTER_OPERATOR_LABELS[operator],
@@ -168,14 +234,25 @@ export function TMDataGridFilterPanel() {
           );
         })}
 
-        <Button
-          variant="subtle"
-          size="compact-sm"
-          style={{ alignSelf: "flex-start" }}
-          onClick={addFilter}
-        >
-          Add filter
-        </Button>
+        <div className={classes.filterPanelFooter}>
+          <Button
+            variant="subtle"
+            size="compact-sm"
+            disabled={!canAddFilter}
+            onClick={addFilter}
+          >
+            Add filter
+          </Button>
+          <Button
+            variant="subtle"
+            color="gray"
+            size="compact-sm"
+            disabled={columnFilters.length === 0}
+            onClick={clearAllFilters}
+          >
+            Clear all
+          </Button>
+        </div>
       </Stack>
     </div>
   );

package/src/tmdatagrid/components/TMDataGridFilterPills.module.css

@@ -0,0 +1,35 @@
+/* Wraps rather than scrolls: the pills are a summary, and a summary that goes
+   off-screen is not one. */
+.filterPills {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--mantine-spacing-xs);
+}
+
+/* Mantine's dark-scheme pill is `dark-7` — the same colour as the body — so a
+   pill sitting on the page rather than inside a `PillsInput` disappears. Both
+   schemes are restated here so the two stay a pair, with a border to keep the
+   shape readable against any surface. Scoped through `.filterPills` for the
+   specificity to beat Mantine's own rule whichever stylesheet loads last. */
+.filterPills .pill {
+  background-color: light-dark(
+    var(--mantine-color-gray-1),
+    var(--mantine-color-dark-5)
+  );
+  color: light-dark(var(--mantine-color-black), var(--mantine-color-dark-0));
+  border: 1px solid
+    light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-3));
+}
+
+/* The label is a button so a pill can be clicked back open, but it must read as
+   part of the pill — Mantine's own label styles carry the font. */
+.pillLabel {
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+}
+
+.pillLabel:hover {
+  text-decoration: underline;
+}

package/src/tmdatagrid/components/TMDataGridFilterPills.tsx

@@ -0,0 +1,135 @@
+import { Button, Pill, UnstyledButton } from "@mantine/core";
+import type { RowData } from "@tanstack/react-table";
+import { useSelector } from "@tanstack/react-store";
+import classes from "./TMDataGridFilterPills.module.css";
+import { getColumnLabel, getColumnType } from "../core/columnUtils";
+import {
+  formatFilterLabel,
+  isFilterActive,
+  isTMDataGridFilterValue,
+} from "../core/filterOperators";
+import type { TMDataGridSize } from "../core/sizes";
+import { openColumnFilter, type TMDataGridApi } from "../useTMDataGrid";
+
+export type TMDataGridFilterPillsProps<TData extends RowData> = {
+  /** The object returned by `useTMDataGrid`. */
+  api: TMDataGridApi<TData>;
+  /** Mantine size of the pills. Defaults to `"sm"`. */
+  size?: TMDataGridSize;
+  /** "Clear all" button, shown once two filters are active. Defaults to `true`. */
+  showClearAll?: boolean;
+  /**
+   * Replaces what a click on a pill's label does. The default opens the grid's
+   * filter panel on that column.
+   */
+  onPillClick?: (columnId: string) => void;
+  className?: string;
+};
+
+/**
+ * One pill per active filter — `First name: Sofia ✕` — with the ✕ clearing that
+ * filter and a click on the label opening the filter panel on its column.
+ *
+ * The one grid component that takes the api as a prop instead of reading
+ * context, so it can live anywhere: a page header, a card title, a breadcrumb
+ * row. Renders nothing while no filter is active.
+ *
+ * ```tsx
+ * const grid = useTMDataGrid({ data, columns });
+ *
+ * <Group>
+ *   <Title order={3}>Employees</Title>
+ *   <TMDataGridFilterPills api={grid} />
+ * </Group>
+ * ```
+ *
+ * Half-typed filters are left out: a filter that is not narrowing the rows yet
+ * has nothing to report, which is the same rule the funnel indicator uses.
+ */
+export function TMDataGridFilterPills<TData extends RowData>({
+  api,
+  size = "sm",
+  showClearAll = true,
+  onPillClick,
+  className,
+}: TMDataGridFilterPillsProps<TData>) {
+  const { table } = api;
+  const columnFilters = useSelector(
+    table.store,
+    (state) => state.columnFilters,
+  );
+
+  const activeFilters = columnFilters.filter((filter) =>
+    isFilterActive(filter.value),
+  );
+  if (activeFilters.length === 0) return null;
+
+  return (
+    <div
+      role="group"
+      aria-label="Active filters"
+      className={[classes.filterPills, className].filter(Boolean).join(" ")}
+    >
+      <Pill.Group size={size}>
+        {activeFilters.map((filter) => {
+          const column = table.getColumn(filter.id);
+          const label = column ? getColumnLabel(column) : filter.id;
+          const value = filter.value;
+          // isFilterActive already vouched for the shape; this narrows it.
+          if (!isTMDataGridFilterValue(value)) return null;
+
+          return (
+            <Pill
+              key={filter.id}
+              size={size}
+              className={classes.pill}
+              withRemoveButton
+              onRemove={() =>
+                table.setColumnFilters(
+                  columnFilters.filter((other) => other.id !== filter.id),
+                )
+              }
+              // Mantine hides its remove button from assistive tech and from
+              // the tab order, because inside a `PillsInput` Backspace is the
+              // way out. These pills stand on their own, so the ✕ has to be a
+              // real button.
+              removeButtonProps={{
+                "aria-label": `Clear ${label} filter`,
+                "aria-hidden": false,
+                tabIndex: 0,
+              }}
+            >
+              <UnstyledButton
+                className={classes.pillLabel}
+                onClick={() =>
+                  onPillClick
+                    ? onPillClick(filter.id)
+                    : openColumnFilter(api, filter.id)
+                }
+              >
+                {formatFilterLabel({
+                  label,
+                  type: column ? getColumnType(column) : "string",
+                  filter: value,
+                })}
+              </UnstyledButton>
+            </Pill>
+          );
+        })}
+      </Pill.Group>
+
+      {showClearAll && activeFilters.length > 1 && (
+        // Below two pills their own ✕ is the shorter path, so the button would
+        // only be a second way to do the same thing.
+        <Button
+          variant="subtle"
+          color="gray"
+          size="compact-xs"
+          onClick={() => table.setColumnFilters([])}
+        >
+          Clear all
+        </Button>
+      )}
+    </div>
+  );
+}

package/src/tmdatagrid/components/TMDataGridFooter.module.css

@@ -0,0 +1,18 @@
+.footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--mantine-spacing-lg);
+  padding: 4px var(--mantine-spacing-sm);
+  min-height: 48px;
+  flex-shrink: 0;
+  border-top: 1px solid var(--mantine-color-default-border);
+}
+
+/* Grouping suspends paging. The pager stays put and fades rather than
+   disappearing, so the footer reads as switched off rather than as having
+   vanished — and the row it holds does not change height under the grid. Its
+   controls carry their own `disabled`; this is the label half. */
+.footer[data-paging-suspended="true"] {
+  opacity: 0.55;
+}