@kanunilabs/datagrid-react 1.7.0 → 1.8.0

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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanunilabs/datagrid-react",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "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.0"
   },
   "peerDependencies": {
     "react": ">=18.0.0",