@kanunilabs/datagrid-react 1.8.11 → 1.8.12

package/dist/styles.css

@@ -3018,6 +3018,101 @@
   padding-inline: max(0px, calc(var(--dg-cell-padding-x) - 4px)) 0;
 }
 
+/* `lookup.onPickerOpen` (Tekax B.4.1): the box and its "…" button share the
+   cell, edge to edge — the box no longer takes the full width, the button
+   takes the cell's end padding. */
+.kanuni-datagrid-root .kanuni-datagrid-cell > .kanuni-datagrid-editor--with-picker {
+  flex: 1 1 auto;
+  width: auto;
+  min-width: 0;
+  margin-inline-end: 0;
+}
+.kanuni-datagrid-root .kanuni-datagrid-lookup-picker {
+  flex: none;
+  align-self: stretch;
+  width: 24px;
+  margin-inline-end: calc(var(--dg-cell-padding-x) * -1);
+  padding: 0;
+  border: 0;
+  border-inline-start: 1px solid var(--dg-border);
+  background: var(--dg-surface-header);
+  color: var(--dg-text);
+  font: inherit;
+  cursor: pointer;
+}
+.kanuni-datagrid-root .kanuni-datagrid-lookup-picker:hover {
+  background: var(--dg-surface-hover);
+}
+/* `lookup.dropButton` (B.4.2): the ▾ that opens the list, beside "…" when both. */
+.kanuni-datagrid-root .kanuni-datagrid-lookup-drop,
+.kanuni-lookup-box .kanuni-datagrid-lookup-drop,
+.kanuni-lookup-box .kanuni-datagrid-lookup-picker {
+  flex: none;
+  align-self: stretch;
+  width: 24px;
+  padding: 0;
+  border: 0;
+  border-inline-start: 1px solid var(--dg-border);
+  background: var(--dg-surface-header);
+  color: var(--dg-text);
+  font: inherit;
+  cursor: pointer;
+}
+.kanuni-datagrid-root .kanuni-datagrid-cell > .kanuni-datagrid-lookup-drop:last-of-type,
+.kanuni-datagrid-root .kanuni-datagrid-cell > .kanuni-datagrid-lookup-picker {
+  margin-inline-end: calc(var(--dg-cell-padding-x) * -1);
+}
+.kanuni-datagrid-root .kanuni-datagrid-lookup-drop:hover,
+.kanuni-lookup-box .kanuni-datagrid-lookup-drop:hover,
+.kanuni-lookup-box .kanuni-datagrid-lookup-picker:hover {
+  background: var(--dg-surface-hover);
+}
+
+/* `LookupBox` (Tekax B.4.2): the grid's lookup as a FORM field — the same box,
+   list and keys, drawn like the row form's inputs. */
+.kanuni-lookup-box {
+  display: inline-flex;
+  align-items: stretch;
+  min-width: 0;
+  height: 32px;
+  border: 1px solid var(--dg-border-strong);
+  border-radius: var(--dg-radius-control);
+  background: var(--dg-surface);
+  color: var(--dg-text);
+  font-size: var(--dg-font-size);
+  overflow: hidden;
+}
+.kanuni-lookup-box:focus-within {
+  outline: 2px solid var(--dg-focus-ring);
+  outline-offset: -1px;
+}
+.kanuni-lookup-box--invalid {
+  border-color: var(--dg-danger);
+}
+.kanuni-lookup-box .kanuni-datagrid-editor {
+  flex: 1 1 auto;
+  min-width: 0;
+  height: 100%;
+  margin: 0;
+  padding: 0 8px;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  outline: none;
+}
+.kanuni-lookup-box .kanuni-datagrid-editor:disabled {
+  color: var(--dg-text-muted);
+}
+@media (pointer: coarse) {
+  .kanuni-lookup-box {
+    height: 44px;
+  }
+  .kanuni-lookup-box .kanuni-datagrid-editor {
+    font-size: max(16px, var(--dg-font-size));
+  }
+}
+
 /* 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
@@ -3287,6 +3382,93 @@
   font-size: var(--dg-font-size);
 }
 
+/* `lookup.listResizable` (Tekax B.4.3): the corner grip, a sibling of the list
+   so it does not scroll away with the items. Drawn as two short diagonals. */
+.kanuni-datagrid-lookup-grip {
+  position: fixed;
+  z-index: 1201;
+  width: 14px;
+  height: 14px;
+  cursor: nwse-resize;
+  touch-action: none;
+  background: linear-gradient(
+    135deg,
+    transparent 55%,
+    var(--dg-border-strong) 55%,
+    var(--dg-border-strong) 62%,
+    transparent 62%,
+    transparent 75%,
+    var(--dg-border-strong) 75%,
+    var(--dg-border-strong) 82%,
+    transparent 82%
+  );
+}
+.kanuni-datagrid-lookup-grip--top {
+  cursor: nesw-resize;
+  transform: scaleY(-1);
+}
+
+/* `lookup.listColumns` (Tekax B.4.2): the list as a table. The header row is
+   sticky inside the scrolling list; items and header share one column grid. */
+.kanuni-datagrid-lookup-head {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  display: grid;
+  align-items: center;
+  padding: 0 8px;
+  column-gap: 12px;
+  background: var(--dg-surface-header);
+  border-bottom: 1px solid var(--dg-border);
+  color: var(--dg-text-muted);
+  font-weight: 600;
+}
+.kanuni-datagrid-lookup-item--table {
+  display: grid;
+  align-items: center;
+  column-gap: 12px;
+}
+.kanuni-datagrid-lookup-col {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.kanuni-datagrid-lookup-col--end {
+  text-align: end;
+  font-variant-numeric: tabular-nums;
+}
+
+/* `lookup.multiple` (Tekax B.6): a column of check boxes. */
+.kanuni-datagrid-multi-popup {
+  overflow-y: auto;
+}
+.kanuni-datagrid-multi-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+}
+.kanuni-datagrid-multi-item input {
+  margin: 0;
+  pointer-events: none;
+}
+.kanuni-datagrid-multi-label {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.kanuni-datagrid-multi-item--disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+.kanuni-datagrid-multi-reason {
+  flex: none;
+  font-size: 0.85em;
+}
+
 .kanuni-datagrid-lookup-item {
   /* The editor windows the list by the item height it sets inline; the
      padding has to sit INSIDE it, or each item overlaps the next (and a
@@ -4004,6 +4186,44 @@ input[type='checkbox'].kanuni-datagrid-edit-form-input {
   }
 }
 
+/* ── Totals row pinned to the bottom edge (`pinFooterToBottom`, Tekax B.3) ──
+   The totals row is sticky INSIDE the canvas, and the canvas is only as tall
+   as its rows: with a few rows the row sat right under them. The scroller and
+   the canvas become column flex boxes and the first bottom-edge part (rows
+   pinned to the bottom, else the totals row) takes the free space above it.
+   Tekax ran this as page CSS against these class names, checked by their e2e,
+   before it moved here. */
+.kanuni-datagrid--footer-pinned .kanuni-datagrid-scroller {
+  display: flex;
+  flex-direction: column;
+}
+.kanuni-datagrid--footer-pinned .kanuni-datagrid-canvas {
+  flex: 1 0 auto;
+  display: flex;
+  flex-direction: column;
+}
+.kanuni-datagrid--footer-pinned .kanuni-datagrid-canvas > * {
+  flex-shrink: 0;
+}
+.kanuni-datagrid--footer-pinned .kanuni-datagrid-pinned-rows--bottom,
+.kanuni-datagrid--footer-pinned .kanuni-datagrid-footer-row--bottom {
+  margin-top: auto;
+}
+.kanuni-datagrid--footer-pinned .kanuni-datagrid-pinned-rows--bottom ~ .kanuni-datagrid-footer-row--bottom {
+  margin-top: 0;
+}
+/* An empty grid: the "no rows" text is the scroller's SIBLING and would shorten
+   it, lifting the totals row to the middle of a fixed-height grid. It is laid
+   over the body instead, between the header and the totals row. */
+.kanuni-datagrid--footer-pinned .kanuni-datagrid-empty {
+  position: absolute;
+  top: calc(var(--dg-header-actual, var(--dg-header-height)) + 1px);
+  bottom: calc(var(--dg-header-height) + 1px);
+  inset-inline: 0;
+  padding: 0 16px;
+  pointer-events: none;
+}
+
 /* ─────────────────────────────────────────────────────────────
    KANUNILABS DataGrid — packaged themes
    ─────────────────────────────────────────────────────────────

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanunilabs/datagrid-react",
-  "version": "1.8.11",
+  "version": "1.8.12",
   "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.11"
+    "@kanunilabs/datagrid-core": "1.10.12"
   },
   "peerDependencies": {
     "react": ">=18.0.0",