@rozie-ui/data-table-lit 0.7.1 → 0.7.3

package/dist/index.cjs

@@ -421,6 +421,7 @@ let DataTable = class DataTable extends (0, _lit_labs_preact_signals.SignalWatch
 		this.__rozieWatchInitial_0 = true;
 		this.__rozieWatchInitial_1 = true;
 		this.__rozieWatchInitial_2 = true;
+		this.__rozieFirstUpdateDone = false;
 		this.__rozieCtxProvider_data_table_columns = new _lit_context.ContextProvider(this, {
 			context: __rozieCtx_data_table_columns$1,
 			initialValue: ((__rozieCtxHost) => ({
@@ -4664,8 +4665,31 @@ let DataTable = class DataTable extends (0, _lit_labs_preact_signals.SignalWatch
 			});
 		}));
 		this._disconnectCleanups.push((0, _lit_labs_preact_signals.effect)(() => {
-			this.sorting, this.globalFilter, this.columnFilters, this.pagination, this.rowCount, this.pageCount, this.rowSelection, this.expanded, this.expandable, this.grouping, this.groupable, this.columnVisibility, this.columnSizing, this.columnOrder, this.columnPinning, this.selectionMode, (this.data || []).length, this.data, this._dataDefault.value, this.columns, this._colReg.value;
+			const __watchVal = [
+				this.sorting,
+				this.globalFilter,
+				this.columnFilters,
+				this.pagination,
+				this.rowCount,
+				this.pageCount,
+				this.rowSelection,
+				this.expanded,
+				this.expandable,
+				this.grouping,
+				this.groupable,
+				this.columnVisibility,
+				this.columnSizing,
+				this.columnOrder,
+				this.columnPinning,
+				this.selectionMode,
+				(this.data || []).length,
+				this.data,
+				this._dataDefault.value,
+				this.columns,
+				this._colReg.value
+			];
 			(0, _lit_labs_preact_signals.untracked)(() => {
+				this.__rozieWatchPrev_1 = __watchVal;
 				if (this.__rozieWatchInitial_1) {
 					this.__rozieWatchInitial_1 = false;
 					return;
@@ -4833,15 +4857,51 @@ let DataTable = class DataTable extends (0, _lit_labs_preact_signals.SignalWatch
 		this.announceState.globalFilter = this.effectiveGlobalFilter();
 	}
 	updated(changedProperties) {
-		this.maybeClearHistoryOnExternalSwap();
-		this.emitVisibleRangeIfChanged();
-		this.remeasureColumnSizes();
-		if (!this.table) return;
-		const d = this.currentData() || [];
-		if (d === this.lastData && d.length === this.lastDataLen) return;
-		this.lastData = d;
-		this.lastDataLen = d.length;
-		this.reFeed();
+		if (this.__rozieFirstUpdateDone && (changedProperties.has("rowCount") || changedProperties.has("pageCount") || changedProperties.has("expandable") || changedProperties.has("groupable") || changedProperties.has("selectionMode") || changedProperties.has("columns"))) {
+			const __watchVal = (0, _lit_labs_preact_signals.untracked)(() => [
+				this.sorting,
+				this.globalFilter,
+				this.columnFilters,
+				this.pagination,
+				this.rowCount,
+				this.pageCount,
+				this.rowSelection,
+				this.expanded,
+				this.expandable,
+				this.grouping,
+				this.groupable,
+				this.columnVisibility,
+				this.columnSizing,
+				this.columnOrder,
+				this.columnPinning,
+				this.selectionMode,
+				(this.data || []).length,
+				this.data,
+				this._dataDefault.value,
+				this.columns,
+				this._colReg.value
+			]);
+			if (!Object.is(__watchVal, this.__rozieWatchPrev_1)) {
+				this.__rozieWatchPrev_1 = __watchVal;
+				(0, _lit_labs_preact_signals.untracked)(() => (() => {
+					this.seedColumnPinning();
+					this.reFeed();
+					this.maybeClearHistoryOnExternalSwap();
+				})());
+			}
+		}
+		this.__rozieFirstUpdateDone = true;
+		(() => {
+			this.maybeClearHistoryOnExternalSwap();
+			this.emitVisibleRangeIfChanged();
+			this.remeasureColumnSizes();
+			if (!this.table) return;
+			const d = this.currentData() || [];
+			if (d === this.lastData && d.length === this.lastDataLen) return;
+			this.lastData = d;
+			this.lastDataLen = d.length;
+			this.reFeed();
+		})();
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
@@ -5894,6 +5954,12 @@ ${this.groupable ? lit.html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4
 	set columnPinning(v) {
 		this._columnPinningControllable.notifyPropertyWrite(v);
 	}
+	addEventListener(type, listener, options) {
+		super.addEventListener(type, listener, options);
+	}
+	removeEventListener(type, listener, options) {
+		super.removeEventListener(type, listener, options);
+	}
 };
 __decorate([(0, lit_decorators_js.property)({
 	type: Array,
@@ -6160,12 +6226,14 @@ let Column = class Column extends (0, _lit_labs_preact_signals.SignalWatcher)(li
 			})();
 		}
 		this.__rozieFirstUpdateDone = true;
-		if (this.registered) return;
-		const live = this.registry;
-		if (live == null) return;
-		this.reg = live;
-		this.registered = true;
-		this.reg.registerColumn(this.colId(), this.buildSpec());
+		(() => {
+			if (this.registered) return;
+			const live = this.registry;
+			if (live == null) return;
+			this.reg = live;
+			this.registered = true;
+			this.reg.registerColumn(this.colId(), this.buildSpec());
+		})();
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
@@ -6893,6 +6961,7 @@ let FilterNumberRange = class FilterNumberRange extends (0, _lit_labs_preact_sig
 		this._maxDraft = (0, _lit_labs_preact_signals.signal)("");
 		this._touched = (0, _lit_labs_preact_signals.signal)(false);
 		this.__rozieWatchInitial_0 = true;
+		this.__rozieFirstUpdateDone = false;
 		this._disconnectCleanups = [];
 		this._rozieTornDown = false;
 		this.minDraftValue = () => this._touched.value ? this._minDraft.value : Array.isArray(this.value) && this.value[0] != null ? String(this.value[0]) : "";
@@ -6931,8 +7000,9 @@ let FilterNumberRange = class FilterNumberRange extends (0, _lit_labs_preact_sig
 	}
 	firstUpdated() {
 		this._disconnectCleanups.push((0, _lit_labs_preact_signals.effect)(() => {
-			Array.isArray(this.value) && String(this.value[0]) + "" + String(this.value[1]);
+			const __watchVal = Array.isArray(this.value) ? String(this.value[0]) + "\0" + String(this.value[1]) : "";
 			(0, _lit_labs_preact_signals.untracked)(() => {
+				this.__rozieWatchPrev_0 = __watchVal;
 				if (this.__rozieWatchInitial_0) {
 					this.__rozieWatchInitial_0 = false;
 					return;
@@ -6941,6 +7011,16 @@ let FilterNumberRange = class FilterNumberRange extends (0, _lit_labs_preact_sig
 			});
 		}));
 	}
+	updated(changedProperties) {
+		if (this.__rozieFirstUpdateDone && changedProperties.has("value")) {
+			const __watchVal = (0, _lit_labs_preact_signals.untracked)(() => Array.isArray(this.value) ? String(this.value[0]) + "\0" + String(this.value[1]) : "");
+			if (!Object.is(__watchVal, this.__rozieWatchPrev_0)) {
+				this.__rozieWatchPrev_0 = __watchVal;
+				(0, _lit_labs_preact_signals.untracked)(() => (this._touched.value = false, void 0));
+			}
+		}
+		this.__rozieFirstUpdateDone = true;
+	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		queueMicrotask(() => {

package/dist/index.d.cts

@@ -1,6 +1,107 @@
 import * as _$lit from "lit";
 import { LitElement } from "lit";
+import { Column as Column$1, ColumnDef, ColumnFiltersState, ColumnOrderState, ColumnPinningState, ColumnSizingState, ExpandedState, GroupingState, PaginationState, RowSelectionState, SortingState, VisibilityState } from "@tanstack/table-core";
+
 //#region src/DataTable.d.ts
+/** A cell position as integers over the visible (display-order) model. */
+interface DataTableCellPosition {
+  rowIndex: number;
+  colIndex: number;
+}
+/** The active (roving-focus) cell. A header cell reports `rowIndex: null` and `isHeader: true`. */
+interface DataTableActiveCell {
+  rowIndex: number | null;
+  colIndex: number;
+  isHeader: boolean;
+}
+/** The rectangular cell-range selection. Both corners are `null` when there is no range. */
+interface DataTableRange {
+  anchor: DataTableCellPosition | null;
+  focus: DataTableCellPosition | null;
+}
+/** One data column offered to the `#groupBar` slot. */
+interface DataTableGroupableColumn {
+  id: string;
+  label: string;
+}
+/** One changed cell inside a row edit commit. */
+interface DataTableCellChange {
+  columnId: string;
+  oldValue: any;
+  newValue: any;
+}
+/** The `activecell-change` payload. `isHeader` is set when the move landed on or left a header cell. */
+interface DataTableActiveCellChangePayload {
+  rowIndex: number | null;
+  colIndex: number;
+  isHeader?: boolean;
+}
+/** The `cell-edit-commit` payload: one committed cell. */
+interface DataTableCellEditCommitPayload {
+  rowId: string;
+  columnId: string;
+  oldValue: any;
+  newValue: any;
+}
+/** The `row-edit-commit` payload: the row and every cell the save changed. */
+interface DataTableRowEditCommitPayload {
+  rowId: string;
+  changes: DataTableCellChange[];
+}
+/** The `filter-change` payload: `globalFilter` for the search box, `columnFilters` for a per-column filter. Exactly one key is set. */
+interface DataTableFilterChangePayload {
+  globalFilter?: string;
+  columnFilters?: ColumnFiltersState;
+}
+/** The `history-change` payload: undo/redo availability. */
+interface DataTableHistoryChangePayload {
+  canUndo: boolean;
+  canRedo: boolean;
+}
+/** The `range-change` payload: the new range corners (both `null` when the range cleared). */
+type DataTableRangeChangePayload = DataTableRange;
+/** The `row-activate` payload. `row` is the original data object and `index` its position in the rendered model. */
+interface DataTableRowActivatePayload {
+  row: any;
+  index: number;
+  trigger: 'keyboard' | 'click';
+}
+/** The `visible-range-change` payload: the rendered row window, `end` exclusive. */
+interface DataTableVisibleRangeChangePayload {
+  start: number;
+  end: number;
+}
+interface RozieDataTableEventMap extends Omit<HTMLElementEventMap, 'activecell-change' | 'cell-edit-commit' | 'expand-change' | 'filter-change' | 'group-change' | 'history-change' | 'page-change' | 'pin-change' | 'range-change' | 'reorder-change' | 'resize-change' | 'row-activate' | 'row-edit-commit' | 'selection-change' | 'sort-change' | 'visibility-change' | 'visible-range-change' | 'data-change' | 'sorting-change' | 'global-filter-change' | 'column-filters-change' | 'pagination-change' | 'expanded-change' | 'grouping-change' | 'row-selection-change' | 'column-visibility-change' | 'column-sizing-change' | 'column-order-change' | 'column-pinning-change'> {
+  'activecell-change': CustomEvent<DataTableActiveCellChangePayload>;
+  'cell-edit-commit': CustomEvent<DataTableCellEditCommitPayload>;
+  'expand-change': CustomEvent<ExpandedState>;
+  'filter-change': CustomEvent<DataTableFilterChangePayload>;
+  'group-change': CustomEvent<GroupingState>;
+  'history-change': CustomEvent<DataTableHistoryChangePayload>;
+  'page-change': CustomEvent<PaginationState>;
+  'pin-change': CustomEvent<ColumnPinningState>;
+  'range-change': CustomEvent<DataTableRangeChangePayload>;
+  'reorder-change': CustomEvent<ColumnOrderState>;
+  'resize-change': CustomEvent<ColumnSizingState>;
+  'row-activate': CustomEvent<DataTableRowActivatePayload>;
+  'row-edit-commit': CustomEvent<DataTableRowEditCommitPayload>;
+  'selection-change': CustomEvent<RowSelectionState>;
+  'sort-change': CustomEvent<SortingState>;
+  'visibility-change': CustomEvent<VisibilityState>;
+  'visible-range-change': CustomEvent<DataTableVisibleRangeChangePayload>;
+  'data-change': CustomEvent<any[]>;
+  'sorting-change': CustomEvent<any[]>;
+  'global-filter-change': CustomEvent<string>;
+  'column-filters-change': CustomEvent<any[]>;
+  'pagination-change': CustomEvent<any>;
+  'expanded-change': CustomEvent<any | boolean>;
+  'grouping-change': CustomEvent<any[]>;
+  'row-selection-change': CustomEvent<any>;
+  'column-visibility-change': CustomEvent<any>;
+  'column-sizing-change': CustomEvent<any>;
+  'column-order-change': CustomEvent<any[]>;
+  'column-pinning-change': CustomEvent<any>;
+}
 declare const DataTable_base: typeof LitElement;
 declare class DataTable extends DataTable_base {
   static shadowRootOptions: ShadowRootInit;
@@ -177,8 +278,10 @@ declare class DataTable extends DataTable_base {
   private _liveAnnounce;
   private _ref__rozieRoot;
   private __rozieWatchInitial_0;
+  private __rozieWatchPrev_1;
   private __rozieWatchInitial_1;
   private __rozieWatchInitial_2;
+  private __rozieFirstUpdateDone;
   private __rozieCtxProvider_data_table_columns;
   private _rozieSlotDistributor;
   private _hasSlotDefault;
@@ -186,17 +289,17 @@ declare class DataTable extends DataTable_base {
   private _hasSlotGroupBar;
   private _slotGroupBarElements;
   groupBar?: (scope: {
-    grouping: any;
-    groupableColumns: any;
-    applyGrouping: any;
-    clearGrouping: any;
+    grouping: string[];
+    groupableColumns: DataTableGroupableColumn[];
+    applyGrouping: (cols: string[]) => void;
+    clearGrouping: () => void;
   }) => unknown;
   private _hasSlotSelectAll;
   private _slotSelectAllElements;
   selectAll?: (scope: {
-    checked: any;
-    indeterminate: any;
-    toggle: any;
+    checked: boolean;
+    indeterminate: boolean;
+    toggle: (event: any) => void;
   }) => unknown;
   private _hasSlotDynamicColHeader;
   private _slotDynamicColHeaderElements;
@@ -205,15 +308,15 @@ declare class DataTable extends DataTable_base {
   private _hasSlotPlaceholder;
   private _slotPlaceholderElements;
   placeholder?: (scope: {
-    index: any;
-    columnId: any;
+    index: number;
+    columnId: string;
   }) => unknown;
   private _hasSlotSelectCell;
   private _slotSelectCellElements;
   selectCell?: (scope: {
     row: any;
-    checked: any;
-    toggle: any;
+    checked: boolean;
+    toggle: (event: any) => void;
   }) => unknown;
   private _hasSlotDynamicCell;
   private _slotDynamicCellElements;
@@ -227,69 +330,69 @@ declare class DataTable extends DataTable_base {
   private _hasSlotColHeader;
   private _slotColHeaderElements;
   colHeader?: (scope: {
-    columnId: any;
-    column: any;
-    label: any;
+    columnId: string;
+    column: Column$1<any, unknown>;
+    label: string;
   }) => unknown;
   private _hasSlotFilter;
   private _slotFilterElements;
   filter?: (scope: {
-    columnId: any;
+    columnId: string;
     value: any;
-    uniqueValues: any;
-    minMax: any;
-    columnLabel: any;
-    setFilter: any;
+    uniqueValues: any[];
+    minMax: [number, number] | null;
+    columnLabel: string;
+    setFilter: (columnId: string, value: any) => void;
   }) => unknown;
   private _hasSlotCell;
   private _slotCellElements;
   cell?: (scope: {
-    columnId: any;
-    column: any;
+    columnId: string;
+    column: Column$1<any, unknown>;
     row: any;
     value: any;
   }) => unknown;
   private _hasSlotEditor;
   private _slotEditorElements;
   editor?: (scope: {
-    columnId: any;
-    column: any;
+    columnId: string;
+    column: Column$1<any, unknown>;
     row: any;
     value: any;
-    commit: any;
-    cancel: any;
-    columnLabel: any;
-    autofocus: any;
+    commit: (value: any) => void;
+    cancel: () => void;
+    columnLabel: string;
+    autofocus: boolean;
   }) => unknown;
   rozieSlots?: {
     [key: `colHeader-${string}`]: (scope: {
-      columnId: any;
-      column: any;
-      label: any;
+      columnId: string;
+      column: Column$1<any, unknown>;
+      label: string;
     }) => unknown;
     [key: `filter-${string}`]: (scope: {
-      columnId: any;
+      columnId: string;
       value: any;
-      uniqueValues: any;
-      minMax: any;
-      columnLabel: any;
-      setFilter: any;
+      uniqueValues: any[];
+      minMax: [number, number] | null;
+      columnLabel: string;
+      setFilter: (columnId: string, value: any) => void;
     }) => unknown;
     [key: `cell-${string}`]: (scope: {
-      columnId: any;
-      column: any;
+      columnId: string;
+      column: Column$1<any, unknown>;
       row: any;
       value: any;
     }) => unknown;
     [key: `editor-${string}`]: (scope: {
-      columnId: any;
-      column: any;
+      columnId: string;
+      column: Column$1<any, unknown>;
       row: any;
       value: any;
-      commit: any;
-      cancel: any;
-      columnLabel: any;
-      autofocus: any;
+      commit: (value: any) => void;
+      cancel: () => void;
+      columnLabel: string;
+      autofocus: boolean;
     }) => unknown;
   } & Record<string, (scope: any) => unknown>;
   private _disconnectCleanups;
@@ -451,7 +554,7 @@ declare class DataTable extends DataTable_base {
     align?: "start" | "center" | "end" | "auto";
     behavior?: "auto" | "smooth" | "instant";
   }) => void;
-  getScrollElement: () => any;
+  getScrollElement: () => HTMLElement | null;
   virtualItemKey: (i: any) => any;
   COL_OVERSCAN: number;
   colRtlObserver: any;
@@ -567,19 +670,19 @@ declare class DataTable extends DataTable_base {
   hasAnyFilterableColumn: () => boolean;
   selectAllBox: any;
   syncIndeterminate: () => void;
-  sortColumn: (colId: any, desc: any) => void;
+  sortColumn: (colId: string, desc?: boolean) => void;
   clearSorting: () => void;
-  getColumnDefs: () => any[];
-  toggleAllRows: (value: any) => void;
+  getColumnDefs: () => ColumnDef<any, any>[];
+  toggleAllRows: (value?: boolean) => void;
   clearSelection: () => void;
-  getSelectedRows: () => any;
-  setPage: (idx: any) => void;
-  setRowsPerPage: (size: any) => void;
-  toggleColumnVisibility: (colId: any) => void;
-  applyColumnOrder: (order: any) => void;
+  getSelectedRows: () => any[];
+  setPage: (idx: number) => void;
+  setRowsPerPage: (size: number) => void;
+  toggleColumnVisibility: (colId: string) => void;
+  applyColumnOrder: (order: string[]) => void;
   resetColumnSizing: () => void;
-  pinColumn: (colId: any, side: any) => void;
-  getRowIndexRelativeToPage: (absRow: any) => any;
+  pinColumn: (colId: string, side: 'left' | 'right' | false) => void;
+  getRowIndexRelativeToPage: (absRow?: number) => number;
   cut: () => void;
   isGrid: () => boolean;
   tableRole: () => "grid" | "table";
@@ -650,16 +753,7 @@ declare class DataTable extends DataTable_base {
   rangeClickPending: any;
   rangeActive: boolean;
   inRange: (rIdx: any, cIdx: any) => boolean;
-  getSelectedRange: () => {
-    anchor: {
-      rowIndex: any;
-      colIndex: any;
-    };
-    focus: {
-      rowIndex: any;
-      colIndex: any;
-    };
-  };
+  getSelectedRange: () => DataTableRange;
   isFillHandleCell: (rIdx: any, cIdx: any) => boolean;
   rangeSummary: (anchor: any, focus: any) => string;
   emitRangeChange: (anchor: any, focus: any) => void;
@@ -781,25 +875,21 @@ declare class DataTable extends DataTable_base {
   onEditorKeyDown: (e: any) => void;
   onEditorDropinKeyDown: (e: any) => void;
   onEditorBlur: (e: any) => void;
-  editCell: (rowIndex: any, colIndex: any) => void;
+  editCell: (rowIndex: number, colIndex: number) => void;
   commitEditing: () => void;
-  editRow: (rowIndex: any) => void;
+  editRow: (rowIndex: number) => void;
   focusAbsCellWhenReady: (absRow: any, localRow: any, col: any) => void;
-  focusCell: (rowIndex: any, colIndex: any) => void;
-  getActiveCell: () => {
-    rowIndex: any;
-    colIndex: number;
-    isHeader: boolean;
-  };
+  focusCell: (rowIndex: number, colIndex: number) => void;
+  getActiveCell: () => DataTableActiveCell;
   clearActiveCell: () => void;
-  toggleRowExpanded: (rowId: any) => void;
+  toggleRowExpanded: (rowId: string | number) => void;
   expandAll: () => void;
   collapseAll: () => void;
   getExpandedRows: () => any[];
-  applyGrouping: (cols: any) => void;
+  applyGrouping: (cols: string[]) => void;
   clearGrouping: () => void;
-  getFacetedUniqueValues: (colId: any) => unknown[];
-  getFacetedMinMaxValues: (colId: any) => any;
+  getFacetedUniqueValues: (colId: string) => any[];
+  getFacetedMinMaxValues: (colId: string) => [number, number] | null;
   get data(): any[];
   set data(v: any[]);
   get sorting(): any[];
@@ -824,6 +914,10 @@ declare class DataTable extends DataTable_base {
   set columnOrder(v: any[]);
   get columnPinning(): any;
   set columnPinning(v: any);
+  addEventListener<K extends keyof RozieDataTableEventMap>(type: K, listener: (this: DataTable, ev: RozieDataTableEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof RozieDataTableEventMap>(type: K, listener: (this: DataTable, ev: RozieDataTableEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
 }
 //#endregion
 //#region src/Column.d.ts
@@ -1264,10 +1358,13 @@ declare class FilterNumberRange extends FilterNumberRange_base {
   private _minDraft;
   private _maxDraft;
   private _touched;
+  private __rozieWatchPrev_0;
   private __rozieWatchInitial_0;
+  private __rozieFirstUpdateDone;
   private _disconnectCleanups;
   private _rozieTornDown;
   firstUpdated(): void;
+  updated(changedProperties: Map<string, unknown>): void;
   disconnectedCallback(): void;
   render(): _$lit.TemplateResult<1>;
   minDraftValue: () => string;
@@ -1381,4 +1478,4 @@ declare class DetailPanel extends DetailPanel_base {
   }[];
 }
 //#endregion
-export { Column, DataTable, DataTable as default, DetailPanel, EditorCheckbox, EditorDate, EditorNumber, EditorSelect, EditorText, FilterNumberRange, FilterSelect, FilterText, GroupBar };
+export { Column, DataTable, DataTable as default, DataTableActiveCell, DataTableActiveCellChangePayload, DataTableCellChange, DataTableCellEditCommitPayload, DataTableCellPosition, DataTableFilterChangePayload, DataTableGroupableColumn, DataTableHistoryChangePayload, DataTableRange, DataTableRangeChangePayload, DataTableRowActivatePayload, DataTableRowEditCommitPayload, DataTableVisibleRangeChangePayload, DetailPanel, EditorCheckbox, EditorDate, EditorNumber, EditorSelect, EditorText, FilterNumberRange, FilterSelect, FilterText, GroupBar, type RozieDataTableEventMap };