@kanunilabs/datagrid-react 1.8.2 → 1.8.4

package/dist/styles.css

@@ -679,6 +679,48 @@
   font-size: 11px;
 }
 
+/* The search box's own refusal (`toolbar.search.validate`), right after it. */
+.kanuni-datagrid-toolbar-search-error {
+  color: var(--dg-danger-text);
+  font-size: 11px;
+}
+
+.kanuni-datagrid-toolbar-search[aria-invalid='true'] {
+  border-color: var(--dg-danger);
+}
+
+/* An app's own button (GridToolbarButton / toolbarButton()), drawn like the
+   grid's commands wherever it sits: the toolbar's rule above reaches only its
+   DIRECT children, and the status bar has none. */
+.kanuni-datagrid-app-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  padding: 3px 10px;
+  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-control-font-size);
+  cursor: pointer;
+}
+
+.kanuni-datagrid-app-button.kanuni-datagrid-toolbar-icon-button {
+  padding: 0;
+}
+
+.kanuni-datagrid-app-button:hover:not([aria-disabled='true']) {
+  background: var(--dg-surface-hover);
+}
+
+/* Unavailable but still focusable, so its reason can be read. */
+.kanuni-datagrid-app-button[aria-disabled='true'] {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
 /*
  * The same message, but floating where a context menu just was — the cell
  * menu's Export entries have nowhere else to report a missing optional peer.
@@ -1827,6 +1869,7 @@
   gap: 6px;
 }
 
+.kanuni-datagrid-filter-custom,
 .kanuni-datagrid-filter-actions button,
 .kanuni-datagrid-filter-footer button {
   padding: 3px 8px;
@@ -1839,6 +1882,11 @@
   cursor: pointer;
 }
 
+.kanuni-datagrid-filter-custom {
+  align-self: flex-start;
+}
+
+.kanuni-datagrid-filter-custom:hover,
 .kanuni-datagrid-filter-actions button:hover,
 .kanuni-datagrid-filter-footer button:hover {
   background: var(--dg-surface-hover);
@@ -1886,6 +1934,23 @@
   flex: none;
 }
 
+/* The popup takes focus itself when its padding is clicked (tabIndex -1), so
+   typing there reaches its search box; it is not a control, so no ring. */
+.kanuni-datagrid-filter-popup:focus {
+  outline: none;
+}
+
+/* A row of a server's list whose piece has not arrived: the slot is held (the
+   scroll bar describes the whole list), the value is not known yet. */
+.kanuni-datagrid-filter-item--pending {
+  color: var(--dg-text-muted);
+  cursor: default;
+}
+
+.kanuni-datagrid-filter-item--pending:hover {
+  background: transparent;
+}
+
 .kanuni-datagrid-filter-item:hover,
 .kanuni-datagrid-filter-item--active {
   background: var(--dg-surface-hover);
@@ -2846,6 +2911,19 @@
   margin: 0 calc(var(--dg-cell-padding-x) * -1);
 }
 
+/* ...but the TEXT stays where the cell drew it. Widened to the cell's edges
+   with only 4px of padding, the value jumped left by the cell padding as the
+   editor opened; in row mode, with every cell open, no value lined up with the
+   column above it (2026-10-19, content session). The date editor's own input
+   keeps its 4px, so its wrapper makes up the rest. */
+.kanuni-datagrid-root .kanuni-datagrid-cell > .kanuni-datagrid-editor:not([type='checkbox']) {
+  padding-inline: var(--dg-cell-padding-x);
+}
+
+.kanuni-datagrid-root .kanuni-datagrid-cell > .kanuni-datagrid-date-editor {
+  padding-inline: max(0px, calc(var(--dg-cell-padding-x) - 4px)) 0;
+}
+
 /* In a WRAPPED cell the editor takes the LINE BOX, not the row height.
    A wrapping cell is as tall as its own text: one line of it is
    `padding-block x2 + --dg-wrap-line-height`, which is shorter than a standard
@@ -2883,6 +2961,38 @@
   background: var(--dg-surface);
 }
 
+/* Row mode opens every cell of the row at once and marks none of them
+   `--editing`, so the focused one kept its ring around the underlined editor —
+   the double rectangle above, on one cell of the row (2026-10-19, content
+   session). Any cell that holds an editor drops the ring. */
+.kanuni-datagrid-root .kanuni-datagrid-cell--focused:has(> .kanuni-datagrid-editor),
+.kanuni-datagrid-root .kanuni-datagrid-cell--focused:has(> .kanuni-datagrid-date-editor) {
+  outline: none;
+}
+
+/* A number is typed where it is read: right-aligned, as the cell shows it.
+   Left-aligned editors made the value jump across the column the moment the
+   cell opened, and in row mode two number editors side by side read as one
+   field. */
+.kanuni-datagrid-root .kanuni-datagrid-cell--number > .kanuni-datagrid-editor {
+  text-align: right;
+}
+
+/* Chrome keeps ~15px at the end of a number input for its spin buttons, shown
+   or not, so a right-aligned value still stopped short of the column's
+   numbers. In a row-high cell the arrows are too small to use anyway; the
+   keyboard's arrow keys move between cells here. */
+.kanuni-datagrid-root input.kanuni-datagrid-editor[type='number'] {
+  appearance: textfield;
+  -moz-appearance: textfield;
+}
+
+.kanuni-datagrid-root input.kanuni-datagrid-editor[type='number']::-webkit-inner-spin-button,
+.kanuni-datagrid-root input.kanuni-datagrid-editor[type='number']::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
 .kanuni-datagrid-root input.kanuni-datagrid-editor[type='checkbox'] {
   width: auto;
   height: auto;
@@ -3366,6 +3476,51 @@ input[type='checkbox'].kanuni-datagrid-edit-form-input {
   outline-offset: -1px;
 }
 
+/* The date and lookup editors in a form are the CELL editors (one control per
+   column), whose look is an underline sized to a row. In a form that read as a
+   different kind of field from its boxed neighbours (2026-10-19, content
+   session), so here they take the form's box: on the date editor's wrapper,
+   which holds the calendar button too, and on a lookup's input directly. */
+.kanuni-datagrid-root .kanuni-datagrid-edit-form-lookup > .kanuni-datagrid-editor,
+.kanuni-datagrid-edit-form-lookup > .kanuni-datagrid-date-editor {
+  height: auto;
+  padding: 4px 6px;
+  border: 1px solid var(--dg-border-strong);
+  border-radius: var(--dg-radius-control);
+  background: var(--dg-surface);
+}
+
+.kanuni-datagrid-root .kanuni-datagrid-edit-form-lookup > .kanuni-datagrid-date-editor > .kanuni-datagrid-editor {
+  height: auto;
+  padding: 0;
+  border: none;
+}
+
+.kanuni-datagrid-root .kanuni-datagrid-edit-form-lookup > .kanuni-datagrid-editor:focus,
+.kanuni-datagrid-edit-form-lookup > .kanuni-datagrid-date-editor:focus-within {
+  outline: 2px solid var(--dg-primary);
+  outline-offset: -1px;
+}
+
+/* A field the user cannot change must not look like one they can.
+   `editable: false` columns were drawn as disabled inputs with the same
+   surface, border and text as the open ones: readers clicked them and nothing
+   happened (2026-10-19, content session). Recessed surface, muted text, a
+   lighter border and the not-allowed cursor — the value stays readable. */
+.kanuni-datagrid-edit-form-input:disabled,
+.kanuni-datagrid-root .kanuni-datagrid-edit-form-lookup > .kanuni-datagrid-editor:disabled,
+.kanuni-datagrid-edit-form-lookup > .kanuni-datagrid-date-editor:has(.kanuni-datagrid-editor:disabled) {
+  border-color: var(--dg-border);
+  background: var(--dg-surface-header);
+  color: var(--dg-text-muted);
+  cursor: not-allowed;
+}
+
+.kanuni-datagrid-root .kanuni-datagrid-edit-form-lookup .kanuni-datagrid-date-editor .kanuni-datagrid-editor:disabled {
+  color: var(--dg-text-muted);
+  cursor: not-allowed;
+}
+
 .kanuni-datagrid-edit-form-field[data-invalid] .kanuni-datagrid-edit-form-input {
   border-color: var(--dg-danger);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanunilabs/datagrid-react",
-  "version": "1.8.2",
+  "version": "1.8.4",
   "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.10.2"
+    "@kanunilabs/datagrid-core": "1.10.4"
   },
   "peerDependencies": {
     "react": ">=18.0.0",