@rozie-ui/data-table-lit 0.2.4 → 0.2.6

package/src/DetailPanel.ts

@@ -42,6 +42,9 @@ export default class DetailPanel extends SignalWatcher(LitElement) {
 `;
   }
 
+  // Plain setup-once helper (NOT $computed — a $computed can't be aliased; the
+  // EditorSelect plain-function lesson). Build `[{ key, value }]` from the row's own
+  // enumerable keys, String-coercing each value. A null row yields an empty list.
   entries = () => {
   const r = this.row;
   if (!r) return [];

package/src/EditorCheckbox.ts

@@ -54,6 +54,8 @@ export default class EditorCheckbox extends SignalWatcher(LitElement) {
 `;
   }
 
+  // Immediate-commit-on-change: read .checked the global-filter way, coerce to a
+  // real boolean, and commit it directly.
   onChange = (e: any) => {
   this.commit && this.commit(!!(e && e.target ? e.target.checked : false));
 };

package/src/EditorNumber.ts

@@ -64,6 +64,9 @@ export default class EditorNumber extends SignalWatcher(LitElement) {
   this._draft.value = e && e.target ? e.target.value : '';
 };
 
+  // Coerce to a Number at commit time. Defensive guard: an empty/whitespace draft
+  // commits null rather than NaN (Number('') === 0 is a silent footgun); a
+  // non-numeric draft also commits null. Otherwise commit the coerced number.
   doCommit = () => {
   if (!this.commit) return;
   const raw = this._draft.value;

package/src/EditorSelect.ts

@@ -49,8 +49,6 @@ export default class EditorSelect extends SignalWatcher(LitElement) {
     // Seed the draft once from the incoming value (setup-once). Normalize null/undefined
     // to '' so the <select> binds to a string.
     this._draft.value = this.value != null ? String(this.value) : '';
-
-    // Picking/arrow-cycling an option updates the draft only — no commit.
   }
 
   disconnectedCallback(): void {
@@ -71,10 +69,12 @@ export default class EditorSelect extends SignalWatcher(LitElement) {
 `;
   }
 
+  // Picking/arrow-cycling an option updates the draft only — no commit.
   onChange = (e: any) => {
   this._draft.value = e && e.target ? e.target.value : '';
 };
 
+  // commit/cancel are Function props (default null) — guard before calling.
   doCommit = () => {
   this.commit && this.commit(this._draft.value);
 };

package/src/EditorText.ts

@@ -50,9 +50,6 @@ private __rozieFirstUpdateDone = false;
     // template). Normalize null/undefined to '' so the input value binds to a string.
     this._draft.value = this.value != null ? String(this.value) : '';
 
-    // Untyped handler param neutralizes to `any`, so reading e.target.value typechecks
-    // ×6 (the global-filter idiom). Never inline `$data.x = $event.target.value`.
-
     if (this.autofocus) this._refInputEl?.focus();
   }
 
@@ -79,10 +76,13 @@ private __rozieFirstUpdateDone = false;
 `;
   }
 
+  // Untyped handler param neutralizes to `any`, so reading e.target.value typechecks
+  // ×6 (the global-filter idiom). Never inline `$data.x = $event.target.value`.
   onInput = (e: any) => {
   this._draft.value = e && e.target ? e.target.value : '';
 };
 
+  // commit/cancel are Function props (default null) — guard before calling.
   doCommit = () => {
   this.commit && this.commit(this._draft.value);
 };

package/src/FilterNumberRange.ts

@@ -41,8 +41,6 @@ export default class FilterNumberRange extends SignalWatcher(LitElement) {
     // Seed both drafts once at setup from the incoming [min,max] tuple (setup-once).
     this._minDraft.value = Array.isArray(this.value) && this.value[0] != null ? String(this.value[0]) : '';
     this._maxDraft.value = Array.isArray(this.value) && this.value[1] != null ? String(this.value[1]) : '';
-
-    // Untyped handler params neutralize to `any` (the global-filter idiom).
   }
 
   disconnectedCallback(): void {
@@ -65,6 +63,7 @@ export default class FilterNumberRange extends SignalWatcher(LitElement) {
 `;
   }
 
+  // Untyped handler params neutralize to `any` (the global-filter idiom).
   onMinInput = (e: any) => {
   this._minDraft.value = e && e.target ? e.target.value : '';
 };
@@ -73,10 +72,14 @@ export default class FilterNumberRange extends SignalWatcher(LitElement) {
   this._maxDraft.value = e && e.target ? e.target.value : '';
 };
 
+  // Plain string-coercion functions for the placeholders (NOT $computed — the
+  // EditorSelect/listbox lesson; opaque slot-scope props rejected by strict leaf tsc).
   minPlaceholder = () => Array.isArray(this.minMax) && this.minMax[0] != null ? String(this.minMax[0]) : '';
 
   maxPlaceholder = () => Array.isArray(this.minMax) && this.minMax[1] != null ? String(this.minMax[1]) : '';
 
+  // Convert a draft to a Number or undefined (empty string → undefined so a
+  // one-sided range works). Both undefined → clear the filter.
   applyRange = () => {
   const minNum = this._minDraft.value === '' ? undefined : Number(this._minDraft.value);
   const maxNum = this._maxDraft.value === '' ? undefined : Number(this._maxDraft.value);

package/src/FilterSelect.ts

@@ -55,8 +55,14 @@ export default class FilterSelect extends SignalWatcher(LitElement) {
 `;
   }
 
+  // The <select> value binding coerced to a string. $props.value is typed `unknown`
+  // (opaque slot-scope), which the strict bundled-leaf tsc rejects against the native
+  // select `value` type on React/Solid — the fix is a plain function returning a
+  // string (uniform ×6, NOT a $computed; the EditorSelect/listbox value lesson).
   selectValue = () => this.value != null ? String(this.value) : '';
 
+  // Immediate-apply-on-change: read the selected value the global-filter way. An
+  // empty value (the leading "All" option) clears the column filter.
   onChange = (e: any) => {
   const v = e && e.target ? e.target.value : '';
   if (v === '') {

package/src/FilterText.ts

@@ -35,9 +35,6 @@ export default class FilterText extends SignalWatcher(LitElement) {
     // Seed the draft once at setup from the incoming value (setup-once, NOT in the
     // template). Normalize null/undefined to '' so the input value binds to a string.
     this._draft.value = this.value != null ? String(this.value) : '';
-
-    // Untyped handler param neutralizes to `any`, so reading e.target.value typechecks
-    // ×6 (the global-filter idiom). Never inline `$data.x = $event.target.value`.
   }
 
   disconnectedCallback(): void {
@@ -56,10 +53,13 @@ export default class FilterText extends SignalWatcher(LitElement) {
 `;
   }
 
+  // Untyped handler param neutralizes to `any`, so reading e.target.value typechecks
+  // ×6 (the global-filter idiom). Never inline `$data.x = $event.target.value`.
   onInput = (e: any) => {
   this._draft.value = e && e.target ? e.target.value : '';
 };
 
+  // setFilter is a Function prop (default null) — guard before calling.
   applyFilter = () => {
   this.setFilter && this.setFilter(this.columnId, this._draft.value);
 };

package/src/GroupBar.ts

@@ -123,34 +123,49 @@ export default class GroupBar extends SignalWatcher(LitElement) {
 `;
   }
 
+  // Untyped handler params neutralize to `any` so the native drag-event shapes
+  // (dataTransfer / preventDefault) typecheck across all six strict leaves — the
+  // global-filter idiom (see FilterText.rozie). NEVER annotate these params.
+  // A palette CHIP started dragging → this is an ADD-a-new-column drag.
   onChipDragStart = (e: any, id: any) => {
   this._draggingId.value = id;
   this._dragKind.value = 'chip';
   if (e && e.dataTransfer) e.dataTransfer.setData('text/plain', id);
 };
 
+  // An active TOKEN started dragging → this is a REORDER drag.
   onTokenDragStart = (e: any, gk: any) => {
   this._draggingId.value = gk;
   this._dragKind.value = 'token';
   if (e && e.dataTransfer) e.dataTransfer.setData('text/plain', gk);
 };
 
+  // MUST preventDefault — native HTML5 DnD never fires @drop on a zone that does not
+  // cancel the dragover default. Also raises the drop-target highlight.
   onDragOver = (e: any) => {
   if (e) e.preventDefault();
   this._isOver.value = true;
 };
 
+  // While reordering, record the token under the pointer as the insertion anchor
+  // (we drop BEFORE it). preventDefault so the zone still accepts the drop. Ignored
+  // for chip drags — those just append at the end.
   onTokenDragOver = (e: any, gk: any) => {
   if (e) e.preventDefault();
   if (this._dragKind.value === 'token') this._dropKey.value = gk;
 };
 
+  // Clear the highlight only on a REAL leave: dragleave ALSO fires when the pointer
+  // crosses onto a child token, so ignore leaves whose relatedTarget is still inside
+  // the zone (prevents flicker as you hover over existing grouping tokens).
   onDragLeave = (e: any) => {
   if (e && e.currentTarget && e.relatedTarget && e.currentTarget.contains(e.relatedTarget)) return;
   this._isOver.value = false;
   this._dropKey.value = '';
 };
 
+  // Single reset for all ephemeral drag bookkeeping — called on drop AND on dragend
+  // (so an aborted drag, dropped outside the zone, still clears the marker/highlight).
   resetDrag = () => {
   this._draggingId.value = '';
   this._dragKind.value = '';
@@ -199,6 +214,9 @@ export default class GroupBar extends SignalWatcher(LitElement) {
   this.clearGrouping && this.clearGrouping();
 };
 
+  // Resolve a grouping key to its column's friendly label (falls back to the raw
+  // key). Used for both the token text and the remove button's aria-label so the
+  // bar reads in human terms, not internal column ids. Untyped like the handlers.
   labelFor = (key: any) => {
   const col = this.groupableColumns.find((c: any) => c.id === key);
   return col && col.label || key;

package/src/themes/base.css

@@ -24,6 +24,13 @@
  */
 .rozie-data-table-wrap,
 .rozie-data-table {
+  /* NOTE (see file-head comment): most of the tokens below are declared but
+     never read via a CSS var() inside THIS component's own scoped <style> —
+     that is by design. This is the public surface; the "Wire the PUBLIC
+     tokens..." block further down assigns each one onto the short internal
+     --rdt-* custom property the component actually reads. A future audit
+     must not delete these as dead — they are the intended public API. */
+
   /* ── palette (the few values most consumers will set) ───────────────────── */
   --rozie-data-table-fg: inherit;
   --rozie-data-table-accent: #0066cc;
@@ -62,6 +69,14 @@
   /* ── disabled pagination controls ──────────────────────────────────────── */
   --rozie-data-table-disabled-opacity: 0.4;
 
+  /* ── virtual scroll (row windowing, req-3/D-06) ─────────────────────────── */
+  /* Read with NO fallback at its one use site (`max-height: var(--rozie-data-table-max-height);`
+     on `.rdt-scroll`) — when unset the property is invalid at computed-value
+     time and the rule behaves as if `max-height` were never declared there,
+     i.e. `none` (unbounded). Declaring `none` here is the render-neutral
+     equivalent of that unset behavior, made explicit and overridable. */
+  --rozie-data-table-max-height: none;
+
   /* ─────────────────────────────────────────────────────────────────────────
    * Wire the PUBLIC tokens onto the INTERNAL `--rdt-*` the component reads. A
    * bridge only needs to remap the public tokens above; these passthroughs do