@jielga/tmdatagrid 2.0.0-beta.9 → 2.0.0

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

@@ -1,10 +1,11 @@
 import { Checkbox } from "@mantine/core";
 import { useSelector } from "@tanstack/react-store";
-import type { ColumnDef, Row, RowData } from "@tanstack/react-table";
+import type { Row, RowData } from "@tanstack/react-table";
 import {
   useBodyControlTabIndex,
   useTMDataGridContext,
 } from "../TMDataGridContext";
+import { isMouseEvent } from "../core/dom";
 import {
   getDisplayedRows,
   getSelectableRowIds,
@@ -62,7 +63,7 @@ function SelectAllCheckbox<TData extends RowData>({
  * change - the same reason the rest of the chrome reads them. See
  * readFeatureFlags.
  */
-function SelectAllHeader<TData extends RowData>({
+export function SelectAllHeader<TData extends RowData>({
   table,
 }: {
   table: TMDataGridTable<TData>;
@@ -72,7 +73,7 @@ function SelectAllHeader<TData extends RowData>({
   return <SelectAllCheckbox table={table} />;
 }
 
-function SelectRowCheckbox<TData extends RowData>({
+export function SelectRowCheckbox<TData extends RowData>({
   row,
 }: {
   row: Row<TMDataGridFeatures, TData>;
@@ -80,9 +81,14 @@ function SelectRowCheckbox<TData extends RowData>({
   // 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();
+  const { ui, features, labels, edit } = useTMDataGridContext();
   const tabIndex = useBodyControlTabIndex();
   const isGroupRow = row.subRows.length > 0;
+  // A deletion mark makes the row unselectable (see `enableRowSelection` in
+  // the hook), and the box below reads that through `getCanSelect`. The
+  // mark lives in the edit store, so the subscription is what re-renders
+  // the box when it lands - the row and cell identities do not change.
+  useSelector(edit.store, (state) => state.deletedRowIds.includes(row.id));
 
   // A group row is never selected by id: `rowSelection` only holds the leaves,
   // and TanStack's `getIsSelected()` is a plain lookup in that map. A group
@@ -126,7 +132,7 @@ function SelectRowCheckbox<TData extends RowData>({
       // silently loses the clicked row, which `onChange` then toggles back off.
       onChange={(event) => {
         const native = event.nativeEvent;
-        const isMouse = native instanceof MouseEvent;
+        const isMouse = isMouseEvent(native);
         const resolved = resolveRowSelectionClick({
           rows: getDisplayedRows(row.table, features),
           rowId: row.id,
@@ -148,46 +154,3 @@ function SelectRowCheckbox<TData extends RowData>({
     />
   );
 }
-
-/**
- * The generated checkbox column, prepended under
- * `selectionMode: "checkbox"` (the default) or `"checkboxAndHighlight"`.
- */
-export function createSelectColumn<TData extends RowData>(
-  label = "Checkbox selection",
-): ColumnDef<TMDataGridFeatures, TData, unknown> {
-  return {
-    id: SELECT_COLUMN_ID,
-    meta: {
-      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,
-    },
-    // 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,
-    // Not a column the user chose, so not one they can switch off: hiding the
-    // lane would take the grid's only way to select a row with it, with the
-    // row-selection state left behind and no way back to it. Keeping it out of
-    // "Manage columns" follows from this - the panel lists what can be hidden.
-    enableHiding: false,
-    // Structurally pinned to the left; users shouldn't be able to move it.
-    enablePinning: false,
-    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 → components}/TMDataGridTable.module.css

@@ -1,4 +1,4 @@
-/* Anchors the filter panel, which floats over the first body rows. */
+/* Anchors the filter popup, which floats over the first body rows. */
 .tableWrapper {
   position: relative;
   flex: 1;
@@ -7,9 +7,17 @@
   flex-direction: column;
 }
 
+/* The sidebar surface is a second column of the wrapper rather than a layer
+   over the rows, so the wrapper lays its children out side by side. The
+   sidebar's own module decides which side it lands on. */
+.tableWrapper[data-dg-filter-sidebar] {
+  flex-direction: row;
+}
+
 .scrollContainer {
   position: relative;
   flex: 1;
+  min-width: 0;
   min-height: 0;
   overflow: auto;
   /* Lets .messageRow size itself to the scrollport (100cqi) instead of the
@@ -20,6 +28,13 @@
 /* Column tracks are set inline via gridTemplateColumns. */
 .grid {
   display: grid;
+  /* The grid is the containing block every sticky row inside it is held by, so
+     it has to reach the bottom of the scrollport even when the rows do not fill
+     it - that is what puts the summary row on the bottom edge of a short body.
+     `align-content` keeps the free space out of the row tracks; distributed
+     into them it would stretch every row instead. */
+  min-height: 100%;
+  align-content: start;
 }
 
 /* The pair of focusable elements bracketing the body, which is how the body
@@ -45,46 +60,6 @@
   z-index: var(--dg-z-header, 6);
 }
 
-/* The scrolled-under shadow: a soft band under the header, only while body
-   rows are actually beneath it. On the last header row - the header/body
-   boundary - not on every stacked group row. A scroll-driven animation, like
-   the pinned-lane gradients: the shadow tracks the scroll on the compositor
-   with no listener and no render, and an inactive timeline (nothing to
-   scroll) leaves `opacity: 0` standing, so a grid that fits shows nothing.
-   Where unsupported there is simply no shadow - the header's border already
-   draws the boundary. */
-.headerRow[data-dg-header-last]::after {
-  content: "";
-  position: absolute;
-  inset: 100% 0 auto 0;
-  height: 6px;
-  pointer-events: none;
-  background: linear-gradient(
-    to bottom,
-    var(--dg-header-shadow-color, rgba(0, 0, 0, 0.14)),
-    transparent
-  );
-  opacity: 0;
-}
-
-@supports (animation-timeline: scroll()) {
-  .headerRow[data-dg-header-last]::after {
-    animation: dg-header-shadow linear both;
-    animation-timeline: scroll(nearest block);
-    /* Arrives over the first rows leaving, reads as depth not as a fade. */
-    animation-range: 0px 24px;
-  }
-}
-
-@keyframes dg-header-shadow {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
 .bodyRow {
   --row-bg: var(--mantine-color-body);
   display: grid;
@@ -164,8 +139,13 @@
   align-items: center;
   padding: 0 var(--dg-padding);
   border-bottom: 1px solid var(--mantine-color-default-border);
-  /* Inherited from .bodyRow - sticky cells need an opaque background. */
-  background-color: var(--row-bg);
+  /* Two layers, not one. The base is the theme's body colour and `--row-bg`
+     (inherited from .bodyRow) is a tint painted over it, so a consumer whose
+     row token is translucent - a `color-mix(..., transparent)` - is safe under
+     the sticky lanes: a single translucent `background-color` would let the
+     scrolled body read through every pinned cell and pinned row. */
+  background-color: var(--mantine-color-body);
+  background-image: linear-gradient(var(--row-bg), var(--row-bg));
   font-size: var(--dg-font-size);
 }
 
@@ -189,13 +169,15 @@
    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. */
+   whatever `--row-bg` the row resolved to. Painted as the cell's tint layer,
+   over the opaque base above, for the same reason `--row-bg` is. */
 .bodyCell[data-selected="true"] {
-  background-color: color-mix(
+  --dg-range-tint: color-mix(
     in srgb,
     var(--mantine-primary-color-filled) 14%,
     var(--row-bg)
   );
+  background-image: linear-gradient(var(--dg-range-tint), var(--dg-range-tint));
 }
 
 /* The outline around the block, drawn edge by edge: only the cells on a side
@@ -267,6 +249,15 @@
   gap: 2px;
 }
 
+/* The editor's own box: the input fills it, and it is what the validation
+   tooltip is anchored to. */
+.cellEditorField {
+  display: flex;
+  align-items: center;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
 /* cellConfirm's ✓ / ✕ pair, beside the input. */
 .cellEditorActions {
   display: flex;
@@ -275,16 +266,19 @@
 }
 
 /* Corner triangles for a cell's edit state, drawn like a spreadsheet's: a
-   draft not yet saved is blue, a value failing validation is red. The cell
-   needs a positioning context; pinned and focused cells set their own inline
+   draft not yet saved is blue, a value failing validation is red. An entry
+   cell takes the red one only - everything in it is new. The cell needs a
+   positioning context; pinned and focused cells set their own inline
    `position`, which wins over this. */
 .bodyCell[data-dirty],
-.bodyCell[data-invalid] {
+.bodyCell[data-invalid],
+.entryCell[data-invalid] {
   position: relative;
 }
 
 .bodyCell[data-dirty]::after,
-.bodyCell[data-invalid]::after {
+.bodyCell[data-invalid]::after,
+.entryCell[data-invalid]::after {
   content: "";
   position: absolute;
   top: 0;
@@ -295,7 +289,8 @@
 }
 
 /* Invalid wins over dirty - a cell is usually both. */
-.bodyCell[data-invalid]::after {
+.bodyCell[data-invalid]::after,
+.entryCell[data-invalid]::after {
   border-top-color: var(--mantine-color-error);
   border-right-color: var(--mantine-color-error);
 }
@@ -322,7 +317,9 @@
 .detailsCell {
   grid-column: 1 / -1;
   border-bottom: 1px solid var(--mantine-color-default-border);
-  background-color: var(--row-bg);
+  /* Base and tint, exactly as .bodyCell paints them. */
+  background-color: var(--mantine-color-body);
+  background-image: linear-gradient(var(--row-bg), 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. */
@@ -348,7 +345,7 @@
   padding: var(--mantine-spacing-xl);
 }
 
-/* Marked deleted under draft: struck through and inert until submitAll
+/* Marked deleted under draft: struck through and inert until saveDrafts
    reports it - a row about to go away must not keep taking edits. Interaction
    comes off the data cells, not the row: `pointer-events: none` on the row
    would also kill the edit lane's Restore, which is the one control the row
@@ -389,8 +386,8 @@
    element, its rows flow normally inside it. The top block stacks under the
    entry block when both exist; `--dg-entry-height` is measured only then, so
    the offset is otherwise the header alone. The bottom block stacks above the
-   summary row the same way. Rows are opaque already (`--row-bg` paints the
-   body colour), so the blocks only add the edge borders. */
+   summary row the same way. The cells inside paint an opaque base under
+   `--row-bg` already, so the blocks only add the edge borders. */
 .pinnedTopBlock {
   display: grid;
   grid-column: 1 / -1;
@@ -438,7 +435,13 @@
 .entryRow[data-committed="true"] .entryCell {
   padding: 0 var(--dg-padding);
   border-bottom: 1px solid var(--mantine-color-default-border);
-  background-color: var(--dg-row-new-bg, var(--mantine-color-body));
+  /* The tint over .entryCell's opaque base, not instead of it: the block is
+     sticky, so a translucent `--dg-row-new-bg` would otherwise show the body
+     scrolling underneath. */
+  background-image: linear-gradient(
+    var(--dg-row-new-bg, transparent),
+    var(--dg-row-new-bg, transparent)
+  );
 }
 
 .entryRow[data-committed="true"] .entryCell[data-control-column="true"] {
@@ -484,12 +487,22 @@
 
 /* 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. */
+   placement as the header, so its cells sit exactly on the body's tracks.
+
+   Both insets are set, so the row is on the scrollport's bottom edge whether
+   the body overflows or not. A percentage in a sticky inset resolves against
+   the scrollport: with too few rows to fill it, `top` pushes the row down
+   until `.grid` - which reaches the scrollport's bottom - stops it, flush with
+   the edge; with the body overflowing, `top` is already satisfied and
+   `bottom: 0` pins the row as it always did. Where the two conflict the top
+   one wins, which is why it has to be the row's own height short of 100% and
+   not 100%. `--dg-summary-height` is measured whenever this row exists. */
 .summaryRow {
   display: grid;
   grid-column: 1 / -1;
   grid-template-columns: subgrid;
   position: sticky;
+  top: calc(100% - var(--dg-summary-height, 0px));
   bottom: 0;
   z-index: var(--dg-z-summary-row, 4);
 }