@jielga/tmdatagrid 2.0.0-beta.2 → 2.0.0-beta.21

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,25 @@
 /* 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
+   stays one tab stop. Out of flow so neither claims a row track in the grid,
+   and zero-sized so neither can be seen or clicked; the outline is dropped
+   because focus only ever rests here for the instant of a Tab. */
+.tabGuard {
+  position: absolute;
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  outline: none;
 }
 
 /* Rows are real layout boxes (not display: contents) so position: sticky works,
@@ -33,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;
@@ -90,6 +77,13 @@
   --row-bg: var(--dg-row-striped-bg);
 }
 
+/* An entered row committed into the draft store, sorted in with the body.
+   The same tint the entry block gives it; declared before the hover and
+   selection rules, which win at equal specificity. */
+.bodyRow[data-new="true"] {
+  --row-bg: var(--dg-row-new-bg, var(--mantine-color-body));
+}
+
 .bodyRow:hover {
   --row-bg: var(--mantine-color-default-hover);
 }
@@ -145,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);
 }
 
@@ -170,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
@@ -248,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;
@@ -256,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;
@@ -276,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);
 }
@@ -303,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. */
@@ -365,22 +381,13 @@
   grid-template-columns: subgrid;
 }
 
-/* Confirmed entry rows in the scrolling flow (the default; `newRowsSticky`
-   keeps them in the sticky block instead). Same tracks, no stickiness - they
-   sit above the body rows and scroll with them. */
-.entryFlowBlock {
-  display: grid;
-  grid-column: 1 / -1;
-  grid-template-columns: subgrid;
-}
-
 /* The pinned edge blocks - user-pinned rows held at the top or bottom of the
    body, on the entry block's sticky mechanics: the block is the sticky
    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;
@@ -422,16 +429,22 @@
   justify-content: center;
 }
 
-/* A confirmed entry row - entered, awaiting Save all. It reads as a value
+/* A committed entry row - entered, awaiting Save all. It reads as a value
    row: text padding, the body's border weight, and the "new" tint instead of
    the editing underline. */
-.entryRow[data-confirmed="true"] .entryCell {
+.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-confirmed="true"] .entryCell[data-control-column="true"] {
+.entryRow[data-committed="true"] .entryCell[data-control-column="true"] {
   padding: 0;
 }
 
@@ -474,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);
 }