@kanunilabs/datagrid-react 1.7.0 → 1.8.1

package/dist/styles.css

@@ -630,7 +630,11 @@
   border-color: var(--dg-primary);
 }
 
+/* Commands: an icon and a label side by side (toolbarIcons.ts). */
 .kanuni-datagrid-toolbar > button {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
   padding: 3px 10px;
   border: 1px solid var(--dg-border-strong);
   border-radius: var(--dg-radius-control);
@@ -641,6 +645,10 @@
   cursor: pointer;
 }
 
+.kanuni-datagrid-icon {
+  flex: none;
+}
+
 .kanuni-datagrid-toolbar > button:hover:not(:disabled) {
   background: var(--dg-surface-hover);
 }
@@ -1038,9 +1046,8 @@
   color: var(--dg-text);
 }
 
-/* The panel is sized in whole rows by the component (span x rowHeight); this
-   rule only styles it. Overriding the height here would desync it from the
-   filler slots the virtualizer reserved. */
+/* The panel's height is the component's (the height index reserves it);
+   overriding it here would desync the rows below from their offsets. */
 .kanuni-datagrid-detail-row {
   background: var(--dg-surface);
   border-bottom: 1px solid var(--dg-border);
@@ -1050,7 +1057,9 @@
   position: sticky;
   inset-inline-start: 0;
   box-sizing: border-box;
-  width: 100%;
+  /* The VIEWPORT's width, like the edit form below: the row is as wide as
+     every column, and at 100% a panel under a wide grid ran off screen. */
+  width: var(--dg-viewport-width, 100%);
   height: 100%;
   padding: 8px 12px;
   overflow: auto;
@@ -1695,6 +1704,17 @@
 }
 
 /* ── Search highlight (P2.4) ──────────────────────────────── */
+/* A highlighted cell's text and marks sit in ONE span: side by side in the
+   flex cell, each part was a flex item and lost the spaces at its edges. The
+   span carries the cell's single-line ellipsis itself, since a flex item does
+   not inherit it. */
+.kanuni-datagrid-cell-text {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: inherit;
+}
+
 /* A <mark>, so the match is in the accessibility tree as emphasis rather than
    as a colour only. The browser default is a hard yellow that fights every
    theme; these follow the accent instead. */
@@ -2151,6 +2171,14 @@
   padding: 4px;
 }
 
+/* The chooser says what it is: an untitled box of checkboxes read as nothing
+   having opened (2026-10-14). */
+.kanuni-datagrid-chooser-title {
+  padding: 2px 4px 0;
+  font-weight: 600;
+  color: var(--dg-text);
+}
+
 .kanuni-datagrid-chooser-empty {
   padding: 8px 4px;
   color: var(--dg-text-muted);
@@ -3153,6 +3181,279 @@
   }
 }
 
+/* ─────────────────────────────────────────────────────────────
+   Editing modes: batch, row, form, popup.
+   ─────────────────────────────────────────────────────────────
+   Moved here from the Enterprise sheet when these modes became Community
+   (owner decision, 2026-10-16). The Enterprise sheet loads after this one,
+   so the Enterprise grid looks exactly as before; the plain-JS grid reads
+   this file too. The command column's rules stay in the Enterprise sheet. */
+
+/* ── Pending (unsaved) edits ──────────────────────────────── */
+/* A corner triangle rather than a background tint: the row may already be
+   striped, selected or in-range, and those must stay distinguishable. */
+.kanuni-datagrid-root .kanuni-datagrid-cell--dirty {
+  position: relative;
+}
+
+.kanuni-datagrid-root .kanuni-datagrid-cell--dirty::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  border-width: 5px 5px 0 0;
+  border-style: solid;
+  border-color: var(--dg-primary) transparent transparent transparent;
+  pointer-events: none;
+}
+
+/* Marked for deletion, not yet saved (batch mode). Still readable, clearly on
+   its way out, and still right-clickable so the delete can be undone. */
+.kanuni-datagrid-root .kanuni-datagrid-cell--removed {
+  text-decoration: line-through;
+  opacity: 0.55;
+  background: color-mix(in srgb, var(--dg-danger) 10%, transparent);
+}
+
+/* ── The Save / Cancel strip (and the Enterprise filter strip) ── */
+.kanuni-datagrid-filter-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px;
+  border: 1px solid var(--dg-border);
+  border-bottom: none;
+  border-radius: var(--dg-radius) var(--dg-radius) 0 0;
+  background: var(--dg-surface-header);
+  font-size: var(--dg-chrome-font-size);
+}
+
+.kanuni-datagrid-filter-bar button {
+  padding: 2px 8px;
+  border: 1px solid var(--dg-border-strong);
+  border-radius: var(--dg-radius-control);
+  background: var(--dg-surface);
+  color: inherit;
+  font: inherit;
+  font-size: var(--dg-chrome-font-size);
+  cursor: pointer;
+}
+
+.kanuni-datagrid-filter-active {
+  color: var(--dg-primary);
+  font-weight: 600;
+}
+
+/* Inside the free grid's root, whose own border is the frame: the strip is
+   a band across the top rather than a tab sitting on the grid. */
+.kanuni-datagrid-root > .kanuni-datagrid-edit-bar {
+  flex: none;
+  border: 0;
+  border-bottom: 1px solid var(--dg-border);
+  border-radius: 0;
+}
+
+/* The filter, in words. Truncated rather than wrapped: the strip is one line
+   tall, and a growing bar would push the grid around as conditions are added.
+   The full sentence is on the element's title. */
+.kanuni-datagrid-filter-active {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: min(60ch, 50%);
+}
+
+/* ── Row / form / popup editing (G2) ──────────────────────── */
+/*
+ * One panel, two placements: in the row flow (`form`, the `--inline` variant
+ * below, inside a row slot the virtualizer sized) and in a dialog over the
+ * grid (`popup`).
+ */
+.kanuni-datagrid-edit-form {
+  flex: none;
+  display: flex;
+  flex-direction: column;
+  max-height: 60vh;
+  margin-bottom: 8px;
+  border: 1px solid var(--dg-border-strong);
+  border-radius: var(--dg-radius);
+  background: var(--dg-surface);
+  color: var(--dg-text);
+  box-shadow: var(--dg-shadow-panel);
+  font-size: var(--dg-font-size);
+}
+
+/* Drawn inside a row slot: the row is already the card, so the panel drops the
+   chrome that exists to lift a FLOATING panel off the page. `max-height: 100%`
+   rather than 60vh — the slot's height is the budget here, and overflowing it
+   would spill over the rows below, which the virtualizer has already placed. */
+.kanuni-datagrid-edit-form--inline {
+  height: 100%;
+  max-height: 100%;
+  margin-bottom: 0;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  background: var(--dg-surface-header);
+}
+
+.kanuni-datagrid-edit-form-header {
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--dg-border);
+  background: var(--dg-surface-header);
+  border-radius: var(--dg-radius) var(--dg-radius) 0 0;
+}
+
+.kanuni-datagrid-edit-form-fields {
+  flex: 1;
+  overflow: auto;
+  display: grid;
+  /* Two columns on a wide grid, one on a narrow one — without a media query,
+     which would key off the VIEWPORT when what matters is the grid's width. */
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 10px 16px;
+  padding: 14px;
+}
+
+.kanuni-datagrid-edit-form-field {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  min-width: 0;
+}
+
+.kanuni-datagrid-edit-form-label {
+  font-size: 11px;
+  font-weight: 600;
+  opacity: 0.75;
+}
+
+.kanuni-datagrid-edit-form-input {
+  width: 100%;
+  min-width: 0;
+  padding: 4px 6px;
+  border: 1px solid var(--dg-border-strong);
+  border-radius: var(--dg-radius-control);
+  background: var(--dg-surface);
+  color: inherit;
+  font: inherit;
+  font-size: var(--dg-font-size);
+}
+
+input[type='checkbox'].kanuni-datagrid-edit-form-input {
+  width: auto;
+  accent-color: var(--dg-primary);
+}
+
+.kanuni-datagrid-edit-form-input:focus {
+  outline: 2px solid var(--dg-primary);
+  outline-offset: -1px;
+}
+
+.kanuni-datagrid-edit-form-field[data-invalid] .kanuni-datagrid-edit-form-input {
+  border-color: var(--dg-danger);
+}
+
+.kanuni-datagrid-edit-form-message {
+  color: var(--dg-danger-text);
+  font-size: 11px;
+}
+
+/* A rejected save, above the fields — where the eye already is after pressing
+   Save, rather than beside the button that is about to be pressed again. */
+.kanuni-datagrid-edit-form-error {
+  margin: 10px 14px 0;
+  padding: 6px 10px;
+  border-radius: var(--dg-radius-control);
+  background: color-mix(in srgb, var(--dg-danger) 12%, transparent);
+  color: var(--dg-danger-text);
+  font-size: var(--dg-chrome-font-size);
+}
+
+.kanuni-datagrid-edit-form-footer {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+  border-top: 1px solid var(--dg-border);
+  background: var(--dg-surface-header);
+  border-radius: 0 0 var(--dg-radius) var(--dg-radius);
+}
+
+.kanuni-datagrid-edit-form-hint {
+  margin-inline-end: auto;
+  font-size: 11px;
+  opacity: 0.65;
+}
+
+.kanuni-datagrid-edit-form-footer button {
+  padding: 4px 12px;
+  border: 1px solid var(--dg-border-strong);
+  border-radius: var(--dg-radius-control);
+  background: var(--dg-surface);
+  color: inherit;
+  font: inherit;
+  font-size: var(--dg-chrome-font-size);
+  cursor: pointer;
+}
+
+.kanuni-datagrid-edit-form-footer button:disabled {
+  opacity: 0.55;
+  cursor: default;
+}
+
+.kanuni-datagrid-edit-form-save {
+  border-color: var(--dg-primary) !important;
+  background: var(--dg-primary) !important;
+  color: var(--dg-on-primary) !important;
+}
+
+/* ── Popup mode ───────────────────────────────────────────── */
+.kanuni-datagrid-edit-popup {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.kanuni-datagrid-edit-popup-overlay {
+  position: absolute;
+  inset: 0;
+  /* Opaque enough to read the form against a dense grid — the see-through
+     overlay was a real bug in PivotGrid's drill-down modal. */
+  background: var(--dg-overlay);
+}
+
+.kanuni-datagrid-edit-popup > .kanuni-datagrid-edit-form {
+  position: relative;
+  width: min(720px, 94vw);
+  max-height: 86vh;
+  margin-bottom: 0;
+  box-shadow: var(--dg-shadow-dialog);
+}
+
+/* While a row/form/popup session owns the record, the grid behind it must not
+   accept edits: a click that lands on a cell would change a value the user
+   cannot see is changing, in a record they believe is open in the dialog. */
+/* A modal covers the grid, so nothing under it should react at all. */
+.kanuni-datagrid-enterprise[data-row-session='popup'] .kanuni-datagrid-scroller,
+.kanuni-datagrid-root[data-row-session='popup'] .kanuni-datagrid-scroller {
+  pointer-events: none;
+}
+
+/* The in-grid form is INSIDE the scroller, so the lock is per row rather than
+   over the whole scroll area. Locking the scroller would take the form's own
+   fields and buttons with it — and the wheel, leaving a form taller than the
+   viewport with a Save nobody could scroll to. */
+.kanuni-datagrid-enterprise[data-row-session='form']
+  .kanuni-datagrid-row:not(.kanuni-datagrid-editform-row),
+.kanuni-datagrid-root[data-row-session='form']
+  .kanuni-datagrid-row:not(.kanuni-datagrid-editform-row) {
+  pointer-events: none;
+}
+
 /* ─────────────────────────────────────────────────────────────
    KANUNILABS DataGrid — packaged themes
    ─────────────────────────────────────────────────────────────

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanunilabs/datagrid-react",
-  "version": "1.7.0",
+  "version": "1.8.1",
   "description": "High-performance React data grid — virtualized rows and columns, sticky pinned columns, sorting, filtering and theming",
   "keywords": [
     "react",
@@ -57,7 +57,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@kanunilabs/datagrid-core": "1.9.0"
+    "@kanunilabs/datagrid-core": "1.10.1"
   },
   "peerDependencies": {
     "react": ">=18.0.0",