@jielga/tmdatagrid 0.5.0 → 1.0.0

package/src/tmdatagrid/components/TMDataGridSearch.tsx

@@ -99,6 +99,7 @@ export function TMDataGridSearch({
       onChange={(event) => handleChange(event.currentTarget.value)}
       placeholder={placeholder ?? labels.searchPlaceholder}
       aria-label={labels.searchLabel}
+      data-dg-part="search"
       leftSection={<SearchIcon size={16} stroke={1.6} />}
       rightSection={
         draft !== "" ? (
@@ -107,6 +108,7 @@ export function TMDataGridSearch({
             color="gray"
             size="sm"
             aria-label={labels.clearSearch}
+            data-dg-part="search-clear"
             onClick={() => {
               clearTimeout(timeoutRef.current);
               setDraft("");

package/src/tmdatagrid/components/TMDataGridSelectColumn.tsx

@@ -46,6 +46,7 @@ function SelectAllCheckbox<TData extends RowData>({
     <Checkbox
       size="xs"
       aria-label={labels.selectAllRows}
+      data-dg-part="select-all"
       checked={allSelected}
       indeterminate={someSelected && !allSelected}
       onChange={table.getToggleAllRowsSelectedHandler()}
@@ -111,6 +112,8 @@ function SelectRowCheckbox<TData extends RowData>({
       size="xs"
       tabIndex={tabIndex}
       aria-label={isGroupRow ? labels.selectGroup : labels.selectRow}
+      data-dg-part="select-row"
+      data-row-id={row.id}
       checked={selected}
       disabled={selectableIds.length === 0}
       indeterminate={someSelected && !selected}

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

@@ -12,6 +12,9 @@
   flex: 1;
   min-height: 0;
   overflow: auto;
+  /* Lets .messageRow size itself to the scrollport (100cqi) instead of the
+     full column-track width, so its content centres in the visible window. */
+  container-type: inline-size;
 }
 
 /* Column tracks are set inline via gridTemplateColumns. */
@@ -30,6 +33,46 @@
   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;
@@ -38,6 +81,15 @@
   align-items: stretch;
 }
 
+/* Every second row, under the Table's `striped` prop. Painted from the row's
+   own position (`data-striped`), never `:nth-child`: virtualization mounts a
+   moving window of rows, so document position says nothing about data
+   position. Declared before the hover rule, which is the stronger statement
+   and wins at equal specificity. */
+.bodyRow[data-striped="true"] {
+  --row-bg: var(--dg-row-striped-bg);
+}
+
 .bodyRow:hover {
   --row-bg: var(--mantine-color-default-hover);
 }
@@ -182,6 +234,53 @@
   text-overflow: ellipsis;
 }
 
+/* The editing cell hands its box to the editor: the text padding comes off so
+   the input can fill the track, and the input's own chrome takes over. */
+.bodyCell[data-editing] {
+  padding: 0 calc(var(--dg-padding) / 2);
+}
+
+.cellEditor {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+  gap: 2px;
+}
+
+/* cellConfirm's ✓ / ✕ pair, beside the input. */
+.cellEditorActions {
+  display: flex;
+  align-items: center;
+  flex: 0 0 auto;
+}
+
+/* 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
+   `position`, which wins over this. */
+.bodyCell[data-dirty],
+.bodyCell[data-invalid] {
+  position: relative;
+}
+
+.bodyCell[data-dirty]::after,
+.bodyCell[data-invalid]::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  border: 5px solid transparent;
+  border-top-color: var(--mantine-primary-color-filled);
+  border-right-color: var(--mantine-primary-color-filled);
+}
+
+/* Invalid wins over dirty — a cell is usually both. */
+.bodyCell[data-invalid]::after {
+  border-top-color: var(--mantine-color-error);
+  border-right-color: var(--mantine-color-error);
+}
+
 .bodyCell[data-align="right"] {
   justify-content: flex-end;
 }
@@ -212,8 +311,16 @@
   cursor: auto;
 }
 
+/* Spans every column track, but the rendered box is pinned to the scrollport:
+   sticky at the left edge and exactly one container-width wide, so the
+   centred content stays in the middle of the window however far the grid is
+   scrolled horizontally. */
 .messageRow {
   grid-column: 1 / -1;
+  position: sticky;
+  left: 0;
+  width: 100cqi;
+  justify-self: start;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -222,6 +329,105 @@
   padding: var(--mantine-spacing-xl);
 }
 
+/* Marked deleted under batch: struck through and inert until submitAll
+   reports it. Interaction off wholesale — a row about to go away must not
+   keep taking edits. */
+.bodyRow[data-deleted="true"] {
+  text-decoration: line-through;
+  opacity: 0.55;
+  pointer-events: none;
+}
+
+/* The entry block — one row per edit.addRow(), under the header on the same
+   subgrid tracks as everything else. The *block* is the sticky element, not
+   the rows: sticky siblings would all compete for the same `top` and stack
+   onto one spot, while a single sticky wrapper lets its rows flow normally
+   inside it. Subgrid twice over keeps the cells on the outer tracks.
+   `--dg-header-height` is measured only while the block exists. */
+.entryBlock {
+  display: grid;
+  grid-column: 1 / -1;
+  grid-template-columns: subgrid;
+  position: sticky;
+  top: var(--dg-header-height, 0px);
+  z-index: var(--dg-z-pinned-row, 4);
+}
+
+.entryRow {
+  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. */
+.pinnedTopBlock {
+  display: grid;
+  grid-column: 1 / -1;
+  grid-template-columns: subgrid;
+  position: sticky;
+  top: calc(var(--dg-header-height, 0px) + var(--dg-entry-height, 0px));
+  z-index: var(--dg-z-pinned-row, 4);
+}
+
+.pinnedTopBlock > :last-child > [role="cell"] {
+  border-bottom: 2px solid var(--mantine-color-default-border);
+}
+
+.pinnedBottomBlock {
+  display: grid;
+  grid-column: 1 / -1;
+  grid-template-columns: subgrid;
+  position: sticky;
+  bottom: var(--dg-summary-height, 0px);
+  z-index: var(--dg-z-pinned-row, 4);
+}
+
+.pinnedBottomBlock > :first-child > [role="cell"] {
+  border-top: 2px solid var(--mantine-color-default-border);
+}
+
+.entryCell {
+  display: flex;
+  align-items: center;
+  padding: 0 calc(var(--dg-padding) / 2);
+  border-bottom: 2px solid var(--mantine-primary-color-filled);
+  /* Opaque: the body scrolls underneath it. */
+  background-color: var(--mantine-color-body);
+  font-size: var(--dg-font-size);
+}
+
+.entryCell[data-control-column="true"] {
+  padding: 0;
+  justify-content: center;
+}
+
+.entryCell[data-align="right"] {
+  justify-content: flex-end;
+}
+
+.entryCell[data-align="center"] {
+  justify-content: center;
+}
+
+/* The matched slice of a cell's text, while `enableMatchHighlighting` is on
+   and a contains-family filter or the quick search is active. `mark` resets
+   the browser's default so the colour is the grid's to state — override with
+   `--dg-match-highlight-bg` on the grid. */
+.matchHighlight {
+  background-color: var(
+    --dg-match-highlight-bg,
+    light-dark(var(--mantine-color-yellow-2), rgba(250, 176, 5, 0.35))
+  );
+  color: inherit;
+  border-radius: 2px;
+}
+
 /* 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. */