@jielga/tmdatagrid 0.2.0 → 0.5.0

package/src/tmdatagrid/components/TMDataGridSelectColumn.tsx

@@ -1,6 +1,15 @@
 import { Checkbox } from "@mantine/core";
 import { useSelector } from "@tanstack/react-store";
 import type { ColumnDef, Row, RowData } from "@tanstack/react-table";
+import {
+  useCellControlTabIndex,
+  useTMDataGridContext,
+} from "../TMDataGridContext";
+import {
+  getDisplayedRows,
+  getSelectableRowIds,
+  resolveRowSelectionClick,
+} from "../core/rowSelection";
 import type { TMDataGridFeatures, TMDataGridTable } from "../useTMDataGrid";
 
 export const SELECT_COLUMN_ID = "__select__";
@@ -25,6 +34,7 @@ function SelectAllCheckbox<TData extends RowData>({
 }: {
   table: TMDataGridTable<TData>;
 }) {
+  const { labels } = useTMDataGridContext();
   const allSelected = useSelector(table.store, () =>
     table.getIsAllRowsSelected(),
   );
@@ -35,7 +45,7 @@ function SelectAllCheckbox<TData extends RowData>({
   return (
     <Checkbox
       size="xs"
-      aria-label="Select all rows"
+      aria-label={labels.selectAllRows}
       checked={allSelected}
       indeterminate={someSelected && !allSelected}
       onChange={table.getToggleAllRowsSelectedHandler()}
@@ -43,24 +53,95 @@ function SelectAllCheckbox<TData extends RowData>({
   );
 }
 
+/**
+ * Drops the select-all box when only one row may be selected. Read from the
+ * feature flags rather than `table.options.enableMultiRowSelection` directly:
+ * the flags are re-derived from a fresh object every render, so the switch
+ * cannot be cached along with a `table` identity that survives an options
+ * change — the same reason the rest of the chrome reads them. See
+ * readFeatureFlags.
+ */
+function SelectAllHeader<TData extends RowData>({
+  table,
+}: {
+  table: TMDataGridTable<TData>;
+}) {
+  const { features } = useTMDataGridContext();
+  if (!features.multiRowSelection) return null;
+  return <SelectAllCheckbox table={table} />;
+}
+
 function SelectRowCheckbox<TData extends RowData>({
   row,
 }: {
   row: Row<TMDataGridFeatures, TData>;
 }) {
-  const selected = useSelector(row.table.store, () => row.getIsSelected());
+  // Cells render inside the grid's provider, so the checkbox can reach the
+  // chrome store — it needs the shift-click pivot, and the feature flags to know
+  // which row model a range is measured over.
+  const { ui, features, labels } = useTMDataGridContext();
+  // Out of the tab order once the grid has a cell cursor — see
+  // useCellControlTabIndex. Enter on the lane still steps in, and Space on any
+  // cell of the row ticks it.
+  const tabIndex = useCellControlTabIndex();
+  const isGroupRow = row.subRows.length > 0;
+
+  // A group row is never selected by id: `rowSelection` only ever holds the
+  // leaves, and TanStack's `getIsSelected()` is a plain lookup in that map. So
+  // a group asks about its descendants instead, which is also the honest
+  // reading — the box means "all of these", and it goes indeterminate as soon
+  // as that stops being true.
+  const selected = useSelector(row.table.store, () =>
+    isGroupRow ? row.getIsAllSubRowsSelected() : row.getIsSelected(),
+  );
   const someSelected = useSelector(row.table.store, () =>
     row.getIsSomeSelected(),
   );
 
+  // The resolver expands a tick back out to the descendant ids; all the group
+  // case needs here is to know whether any of them may be selected at all.
+  const selectableIds = getSelectableRowIds(row);
+
+  // Single-select has no way to express "this group": one box for several rows
+  // would either overrun the limit or lie about what it did.
+  if (isGroupRow && !row.getCanMultiSelect()) return null;
+
   return (
     <Checkbox
       size="xs"
-      aria-label="Select row"
+      tabIndex={tabIndex}
+      aria-label={isGroupRow ? labels.selectGroup : labels.selectRow}
       checked={selected}
-      disabled={!row.getCanSelect()}
+      disabled={selectableIds.length === 0}
       indeterminate={someSelected && !selected}
-      onChange={row.getToggleSelectedHandler()}
+      // Every tick goes through the resolver, shift held or not — plain becomes
+      // a toggle that moves the pivot, so a later shift-click extends from the
+      // box the user last touched.
+      //
+      // All of it in `onChange`, not split with an `onClick`: React derives a
+      // checkbox's change event from the click, so the modifier keys ride along
+      // on the native event, and a `preventDefault()` in a click handler cannot
+      // stop the change from firing anyway. Trying to do the range in `onClick`
+      // silently loses the clicked row, which `onChange` then toggles back off.
+      onChange={(event) => {
+        const native = event.nativeEvent;
+        const isMouse = native instanceof MouseEvent;
+        const resolved = resolveRowSelectionClick({
+          rows: getDisplayedRows(row.table, features),
+          rowId: row.id,
+          anchorRowId: ui.state.selectionAnchorRowId,
+          modifiers: {
+            toggle: isMouse && (native.ctrlKey || native.metaKey),
+            extend: isMouse && native.shiftKey,
+          },
+          selection: row.table.store.state.rowSelection,
+          // A checkbox is only ever additive — ticking one has never cleared
+          // the others, so `canReplaceSelection` stays false whatever is held.
+          canReplaceSelection: false,
+        });
+        row.table.setRowSelection(resolved.selection);
+        ui.actions.setSelectionAnchor(resolved.anchorRowId);
+      }}
       // A row can select on click too; the checkbox must not toggle twice.
       onClick={(event) => event.stopPropagation()}
     />
@@ -69,32 +150,38 @@ function SelectRowCheckbox<TData extends RowData>({
 
 /**
  * The generated checkbox column, prepended under
- * `rowSelectionMode: "checkbox"` — the default whenever row selection is on.
+ * `selectionMode: "checkbox"` (the default) or `"checkboxAndHighlight"`.
  */
-export function createSelectColumn<TData extends RowData>(): ColumnDef<
-  TMDataGridFeatures,
-  TData,
-  unknown
-> {
+export function createSelectColumn<TData extends RowData>(
+  label = "Checkbox selection",
+): ColumnDef<TMDataGridFeatures, TData, unknown> {
   return {
     id: SELECT_COLUMN_ID,
     meta: {
-      label: "Checkbox selection",
+      label,
       align: "center",
       // Structurally the first column; it also anchors the left pinned lane, so
       // no other column can be moved in front of it.
       enableOrdering: false,
     },
-    size: 48,
-    minSize: 48,
-    maxSize: 48,
+    // A system lane: as wide as the control it holds and no wider. Fixed at
+    // every scale — the control does not grow with the font size, so neither
+    // should its track.
+    size: 36,
+    minSize: 36,
+    maxSize: 36,
     enableResizing: false,
     enableSorting: false,
     enableColumnFilter: false,
     enableGlobalFilter: false,
     // Structurally pinned to the left; users shouldn't be able to move it.
     enablePinning: false,
-    header: ({ table }) => <SelectAllCheckbox table={table} />,
+    header: ({ table }) => <SelectAllHeader table={table} />,
     cell: ({ row }) => <SelectRowCheckbox row={row} />,
+    // Every cell on a group row that is not the grouped column counts as
+    // aggregated, this lane included, and an aggregated cell with nothing
+    // declared renders blank. Without this the checkbox would disappear from
+    // exactly the rows that select a whole group. See renderCellContent.
+    aggregatedCell: ({ row }) => <SelectRowCheckbox row={row} />,
   };
 }

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

@@ -27,7 +27,7 @@
   grid-template-columns: subgrid;
   position: sticky;
   top: 0;
-  z-index: 3;
+  z-index: var(--dg-z-header, 6);
 }
 
 .bodyRow {
@@ -42,13 +42,39 @@
   --row-bg: var(--mantine-color-default-hover);
 }
 
-/* Selection and highlight are separate: a row is always `data-selected`, but it
-   only takes the highlight colour when `highlightSelectedRows` is on — the
-   default in row selection mode, off with checkboxes. */
-.bodyRow[data-highlighted="true"] {
+/* A group row takes no background of its own. Collapsed, every row on screen is
+   a group row, so a tint would grey out the whole grid and read as if
+   everything were selected. The bold label and the chevron carry the
+   distinction instead — and `--dg-row-group-bg` is there for a consumer who
+   wants the tint back. Declared before the selection rules, so a selected or
+   highlighted group still reads as one. */
+.bodyRow[data-grouped="true"] {
+  --row-bg: var(--dg-row-group-bg);
+}
+
+/* The row an open context menu is about. The pointer has usually left it by
+   then, so without this the menu would be the only thing saying which row it
+   acts on. Declared before the selection rules, which are the stronger
+   statement and win at equal specificity. */
+.bodyRow[data-context-menu="true"] {
+  --row-bg: var(--mantine-color-default-hover);
+}
+
+/* Being selected and being painted for it are separate: a row is always
+   `data-selected`, but only takes the background when `showSelectedBackground`
+   is on — the default under `"row"`, off with checkboxes. */
+.bodyRow[data-selected-bg="true"] {
   --row-bg: var(--dg-row-selected-bg);
 }
 
+/* The highlighted row wins over the selected background: under
+   `"checkboxAndHighlight"` the two coexist, and the highlighted row is the one
+   the detail panel is about, so it must stay distinguishable inside a
+   selection. Declared after, so the later rule takes it at equal specificity. */
+.bodyRow[data-highlighted="true"] {
+  --row-bg: var(--dg-row-highlight-bg);
+}
+
 /* Row selection mode: the row is the control, so it takes focus and must not
    start a text selection on the click that toggles it. */
 .bodyRow[data-selects-on-click="true"] {
@@ -72,6 +98,83 @@
   font-size: var(--dg-font-size);
 }
 
+/* A control lane — the checkbox, the details chevron — is a fixed 36px track
+   holding a control of a known width, not text that can ellipsize. Cell padding
+   is sized for text and grows with the scale, so at `xl` its 18px a side left
+   12px for a 16px box and the checkbox was clipped. The lane centres its
+   control instead. */
+.bodyCell[data-control-column="true"] {
+  padding: 0;
+}
+
+/* A drag is laying down a range. Text selection would otherwise follow the
+   pointer across every cell it passes. */
+.grid[data-range-dragging] {
+  user-select: none;
+}
+
+/* The selected block, under `cellSelection: "range"`.
+
+   A tint over the row's own background rather than instead of it, so a
+   selected cell on a highlighted row still reads as both. `color-mix` keeps
+   one declaration for light and dark: it thins the theme's primary colour into
+   whatever `--row-bg` the row resolved to. */
+.bodyCell[data-selected="true"] {
+  background-color: color-mix(
+    in srgb,
+    var(--mantine-primary-color-filled) 14%,
+    var(--row-bg)
+  );
+}
+
+/* The outline around the block, drawn edge by edge: only the cells on a side
+   of the rectangle draw that side, so they add up to one border around the
+   whole thing however it is shaped. A single overlay box would have to be
+   positioned against a scrolling grid with sticky lanes in it.
+
+   Four shadows are always laid down and each is transparent until its edge
+   says otherwise. `box-shadow` does not accumulate across rules — a second
+   declaration replaces the first — so the alternative is one rule per corner
+   combination, and a cell can be on any of fifteen of them. */
+.bodyCell[data-selected="true"] {
+  --dg-edge-top: transparent;
+  --dg-edge-bottom: transparent;
+  --dg-edge-left: transparent;
+  --dg-edge-right: transparent;
+  box-shadow:
+    inset 0 1px 0 0 var(--dg-edge-top),
+    inset 0 -1px 0 0 var(--dg-edge-bottom),
+    inset 1px 0 0 0 var(--dg-edge-left),
+    inset -1px 0 0 0 var(--dg-edge-right);
+}
+
+.bodyCell[data-edge-top="true"] {
+  --dg-edge-top: var(--mantine-primary-color-filled);
+}
+
+.bodyCell[data-edge-bottom="true"] {
+  --dg-edge-bottom: var(--mantine-primary-color-filled);
+}
+
+.bodyCell[data-edge-left="true"] {
+  --dg-edge-left: var(--mantine-primary-color-filled);
+}
+
+.bodyCell[data-edge-right="true"] {
+  --dg-edge-right: var(--mantine-primary-color-filled);
+}
+
+/* The cell the keyboard is on, under `cellSelection`.
+
+   Painted from `data-focused` rather than `:focus-visible`, because the ring
+   has to stay while the focus steps into a control inside the cell — that is
+   still where the arrow keys resume from. The offset keeps it inside the
+   cell's own box, so a pinned neighbour cannot clip it. */
+.bodyCell[data-focused="true"] {
+  outline: 2px solid var(--mantine-primary-color-filled);
+  outline-offset: -2px;
+}
+
 .cellContent {
   min-width: 0;
   overflow: hidden;
@@ -92,6 +195,23 @@
   flex: 1 1 auto;
 }
 
+/* The panel an expanded row opens. Its own grid row inside .bodyRow, spanning
+   every column track — so it is measured together with the row above it.
+
+   It takes `--row-bg` rather than a colour of its own: the panel belongs to its
+   row, and a selected or highlighted row whose panel stayed white would read as
+   two separate things. */
+.detailsCell {
+  grid-column: 1 / -1;
+  border-bottom: 1px solid var(--mantine-color-default-border);
+  background-color: var(--row-bg);
+  padding: var(--dg-padding);
+  /* The row above may be the selection control, which turns text selection off
+     for everything inside it. A panel is content, so it takes both back. */
+  user-select: text;
+  cursor: auto;
+}
+
 .messageRow {
   grid-column: 1 / -1;
   display: flex;
@@ -101,3 +221,38 @@
   gap: var(--mantine-spacing-xs);
   padding: var(--mantine-spacing-xl);
 }
+
+/* The summary row — one sticky row of column footers along the bottom edge,
+   rendered only while at least one column defines `footer`. Same subgrid
+   placement as the header, so its cells sit exactly on the body's tracks. */
+.summaryRow {
+  display: grid;
+  grid-column: 1 / -1;
+  grid-template-columns: subgrid;
+  position: sticky;
+  bottom: 0;
+  z-index: var(--dg-z-summary-row, 4);
+}
+
+.summaryCell {
+  display: flex;
+  align-items: center;
+  padding: 0 var(--dg-padding);
+  border-top: 1px solid var(--mantine-color-default-border);
+  /* Opaque: the body scrolls underneath it. */
+  background-color: var(--mantine-color-body);
+  font-size: var(--dg-font-size);
+  font-weight: 600;
+}
+
+.summaryCell[data-control-column="true"] {
+  padding: 0;
+}
+
+.summaryCell[data-align="right"] {
+  justify-content: flex-end;
+}
+
+.summaryCell[data-align="center"] {
+  justify-content: center;
+}