@design.estate/dees-catalog 3.78.2 → 3.78.3

package/dist_bundle/bundle.js

@@ -165126,7 +165126,7 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
     __publicField(this, "__prevSnapshot");
     /** Single shared timer that clears __flashingCells after highlightDuration ms. */
     __publicField(this, "__flashClearTimer");
-    /** Monotonic counter bumped each flash batch so directives.keyed recreates the cell node and restarts the animation. */
+    /** Monotonic counter bumped per flash batch so only changed cells restart their animation. */
     __publicField(this, "__flashTick", 0);
     /** One-shot console.warn gate for missing rowKey in flash mode. */
     __publicField(this, "__flashWarnedNoRowKey", false);
@@ -165136,7 +165136,7 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
     // must never trigger a re-render.
     __publicField(this, "__memoEffectiveCols");
     __publicField(this, "__memoViewData");
-    /** Tracks the (data, columns) pair that `determineColumnWidths()` last sized for. */
+    /** Tracks the layout inputs that `determineColumnWidths()` last sized for. */
     __publicField(this, "__columnsSizedFor");
     // ─── Virtualization state ────────────────────────────────────────────
     /** Estimated row height (px). Measured once from the first rendered row. */
@@ -165198,12 +165198,7 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
           const view = this._lastViewData ?? [];
           const item = view.find((r11) => this.getRowId(r11) === this.__focusedCell.rowId);
           if (!item) return;
-          const allCols = Array.isArray(this.columns) && this.columns.length > 0 ? computeEffectiveColumns(
-            this.columns,
-            this.augmentFromDisplayFunction,
-            this.displayFunction,
-            this.data
-          ) : computeColumnsFromDisplayFunction(this.displayFunction, this.data);
+          const allCols = this.__getEffectiveColumns();
           const col = allCols.find((c11) => String(c11.key) === this.__focusedCell.colKey);
           if (!col || !this.__isColumnEditable(col)) return;
           eventArg.preventDefault();
@@ -165364,10 +165359,16 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
    * that affect it. Avoids re-running `computeEffectiveColumnsFn` /
    * `computeColumnsFromDisplayFunctionFn` on every Lit update.
    */
+  __getDisplayFunctionShapeKey() {
+    if (!this.data || this.data.length === 0) return "";
+    const firstTransformedItem = this.displayFunction(this.data[0]) ?? {};
+    return Object.keys(firstTransformedItem).join("\0");
+  }
   __getEffectiveColumns() {
     const usingColumns = Array.isArray(this.columns) && this.columns.length > 0;
+    const displayShapeKey = !usingColumns || this.augmentFromDisplayFunction ? this.__getDisplayFunctionShapeKey() : "";
     const cache = this.__memoEffectiveCols;
-    if (cache && cache.columns === this.columns && cache.augment === this.augmentFromDisplayFunction && cache.displayFunction === this.displayFunction && cache.data === this.data) {
+    if (cache && cache.columns === this.columns && cache.augment === this.augmentFromDisplayFunction && cache.displayFunction === this.displayFunction && cache.displayShapeKey === displayShapeKey) {
       return cache.out;
     }
     const out = usingColumns ? computeEffectiveColumns(
@@ -165380,7 +165381,7 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
       columns: this.columns,
       augment: this.augmentFromDisplayFunction,
       displayFunction: this.displayFunction,
-      data: this.data,
+      displayShapeKey,
       out
     };
     return out;
@@ -165420,6 +165421,9 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
   render() {
     const effectiveColumns = this.__getEffectiveColumns();
     const viewData = this.__getViewData(effectiveColumns);
+    const headerActions = this.getActionsForType("header");
+    const footerActions = this.getActionsForType("footer");
+    const inRowActions = this.getActionsForType("inRow");
     this._lastViewData = viewData;
     const useVirtual = this.virtualized && viewData.length > 0;
     let renderRows = viewData;
@@ -165444,27 +165448,20 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
             <div class="heading heading2">${this.heading2}</div>
           </div>
           <div class="headerActions">
-            ${directives_exports.resolveExec(async () => {
-      const resultArray = [];
-      for (const action of this.dataActions) {
-        if (!action.type?.includes("header")) continue;
-        resultArray.push(
-          b2`<div
-                    class="headerAction"
-                    @click=${() => {
-            action.actionFunc({
-              item: this.selectedDataRow,
-              table: this
-            });
-          }}
-                  >
-                    ${action.iconName ? b2`<dees-icon .iconSize=${14} .icon=${action.iconName}></dees-icon>
-                          ${action.name}` : action.name}
-                  </div>`
-        );
-      }
-      return resultArray;
-    })}
+            ${headerActions.map(
+      (action) => b2`<div
+                class="headerAction"
+                @click=${() => {
+        action.actionFunc({
+          item: this.selectedDataRow,
+          table: this
+        });
+      }}
+              >
+                ${action.iconName ? b2`<dees-icon .iconSize=${14} .icon=${action.iconName}></dees-icon>
+                      ${action.name}` : action.name}
+              </div>`
+    )}
           </div>
         </div>
         <div class="headingSeparation"></div>
@@ -165523,11 +165520,11 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
                   ${useVirtual && topSpacerHeight > 0 ? b2`<tr aria-hidden="true" style="height:${topSpacerHeight}px"><td></td></tr>` : b2``}
                   ${directives_exports.repeat(
       renderRows,
-      (itemArg, sliceIdx) => `${this.getRowId(itemArg)}::${renderStart + sliceIdx}`,
+      (itemArg) => this.getRowId(itemArg),
       (itemArg, sliceIdx) => {
         const rowIndex = renderStart + sliceIdx;
         const rowId = this.getRowId(itemArg);
-        const flashSet = this.__flashingCells.get(rowId);
+        const flashTokens = this.__flashingCells.get(rowId);
         return b2`
                       <tr
                         data-row-idx=${rowIndex}
@@ -165549,7 +165546,8 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
           const isEditable = !!(col.editable || col.editor);
           const isFocused = this.__focusedCell?.rowId === rowId && this.__focusedCell?.colKey === editKey;
           const isEditing = this.__editingCell?.rowId === rowId && this.__editingCell?.colKey === editKey;
-          const isFlashing = !!flashSet?.has(editKey);
+          const flashToken = flashTokens?.get(editKey);
+          const isFlashing = flashToken !== void 0;
           const useFlashBorder = isFlashing && !!col.flashBorder;
           const cellClasses = [
             isEditable ? "editable" : "",
@@ -165568,18 +165566,18 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
                                 data-col-key=${editKey}
                               >
                                 ${isFlashing ? directives_exports.keyed(
-            `${rowId}:${editKey}:${this.__flashTick}`,
+            `${rowId}:${editKey}:${flashToken}`,
             innerHtml
           ) : innerHtml}
                               </td>
                             `;
         })}
                         ${(() => {
-          if (this.dataActions && this.dataActions.length > 0) {
+          if (inRowActions.length > 0) {
             return b2`
                               <td class="actionsCol">
                                 <div class="actionsContainer">
-                                  ${this.getActionsForType("inRow").map(
+                                  ${inRowActions.map(
               (actionArg) => b2`
                                       <div
                                         class="action"
@@ -165619,27 +165617,20 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
             selected
           </div>
           <div class="footerActions">
-            ${directives_exports.resolveExec(async () => {
-      const resultArray = [];
-      for (const action of this.dataActions) {
-        if (!action.type?.includes("footer")) continue;
-        resultArray.push(
-          b2`<div
-                    class="footerAction"
-                    @click=${() => {
-            action.actionFunc({
-              item: this.selectedDataRow,
-              table: this
-            });
-          }}
-                  >
-                    ${action.iconName ? b2`<dees-icon .iconSize=${14} .icon=${action.iconName}></dees-icon>
-                          ${action.name}` : action.name}
-                  </div>`
-        );
-      }
-      return resultArray;
-    })}
+            ${footerActions.map(
+      (action) => b2`<div
+                class="footerAction"
+                @click=${() => {
+        action.actionFunc({
+          item: this.selectedDataRow,
+          table: this
+        });
+      }}
+              >
+                ${action.iconName ? b2`<dees-icon .iconSize=${14} .icon=${action.iconName}></dees-icon>
+                      ${action.name}` : action.name}
+              </div>`
+    )}
           </div>
         </div>
       </dees-tile>
@@ -165931,7 +165922,7 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
   /**
    * Measures the height of the first rendered body row and stores it for
    * subsequent virtualization math. Idempotent — only measures once per
-   * `data`/`columns` pair (cleared in `updated()` when those change).
+   * rendered table layout (cleared in `updated()` when that layout changes).
    */
   __measureRowHeight() {
     if (!this.virtualized || this.__rowHeightMeasured) return;
@@ -166128,16 +166119,14 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
     this.__prevSnapshot = nextSnapshot;
     if (!hadPrev) return;
     if (newlyFlashing.size === 0) return;
+    const flashToken = ++this.__flashTick;
+    const nextFlashingCells = new Map(this.__flashingCells);
     for (const [rowId, cols] of newlyFlashing) {
-      const existing = this.__flashingCells.get(rowId);
-      if (existing) {
-        for (const c11 of cols) existing.add(c11);
-      } else {
-        this.__flashingCells.set(rowId, cols);
-      }
+      const existing = new Map(nextFlashingCells.get(rowId) ?? []);
+      for (const colKey of cols) existing.set(colKey, flashToken);
+      nextFlashingCells.set(rowId, existing);
     }
-    this.__flashTick++;
-    this.__flashingCells = new Map(this.__flashingCells);
+    this.__flashingCells = nextFlashingCells;
     if (this.__flashClearTimer) clearTimeout(this.__flashClearTimer);
     this.__flashClearTimer = setTimeout(() => {
       this.__flashingCells = /* @__PURE__ */ new Map();
@@ -166146,12 +166135,20 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
   }
   async updated(changedProperties) {
     super.updated(changedProperties);
+    const effectiveColumns = this.__getEffectiveColumns();
+    const currentTable = this.shadowRoot?.querySelector("table") ?? null;
+    const inRowActionCount = this.getActionsForType("inRow").length;
     if (changedProperties.has("highlightDuration")) {
       this.style.setProperty("--dees-table-flash-duration", `${this.highlightDuration}ms`);
     }
-    const dataOrColsChanged = !this.__columnsSizedFor || this.__columnsSizedFor.data !== this.data || this.__columnsSizedFor.columns !== this.columns;
-    if (dataOrColsChanged) {
-      this.__columnsSizedFor = { data: this.data, columns: this.columns };
+    const columnLayoutChanged = !!currentTable && (!this.__columnsSizedFor || this.__columnsSizedFor.effectiveColumns !== effectiveColumns || this.__columnsSizedFor.showSelectionCheckbox !== this.showSelectionCheckbox || this.__columnsSizedFor.inRowActionCount !== inRowActionCount || this.__columnsSizedFor.table !== currentTable);
+    if (currentTable && columnLayoutChanged) {
+      this.__columnsSizedFor = {
+        effectiveColumns,
+        showSelectionCheckbox: this.showSelectionCheckbox,
+        inRowActionCount,
+        table: currentTable
+      };
       this.determineColumnWidths();
       this.__rowHeightMeasured = false;
     }
@@ -166167,7 +166164,7 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
         this.teardownFloatingHeader();
       }
     }
-    if (!this.fixedHeight && this.data.length > 0 && (this.__floatingActive || dataOrColsChanged)) {
+    if (!this.fixedHeight && this.data.length > 0 && (this.__floatingActive || columnLayoutChanged)) {
       this.__syncFloatingHeader();
     }
     if (this.searchable) {
@@ -166433,8 +166430,7 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
    * Used by the modal helper to render human-friendly labels.
    */
   _lookupColumnByKey(key2) {
-    const usingColumns = Array.isArray(this.columns) && this.columns.length > 0;
-    const effective = usingColumns ? computeEffectiveColumns(this.columns, this.augmentFromDisplayFunction, this.displayFunction, this.data) : computeColumnsFromDisplayFunction(this.displayFunction, this.data);
+    const effective = this.__getEffectiveColumns();
     return effective.find((c11) => String(c11.key) === key2);
   }
   /**
@@ -166977,7 +166973,7 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
   moveFocusedCell(dx, dy, andStartEditing) {
     const view = this._lastViewData ?? [];
     if (view.length === 0) return;
-    const allCols = Array.isArray(this.columns) && this.columns.length > 0 ? computeEffectiveColumns(this.columns, this.augmentFromDisplayFunction, this.displayFunction, this.data) : computeColumnsFromDisplayFunction(this.displayFunction, this.data);
+    const allCols = this.__getEffectiveColumns();
     const editableCols = this.__editableColumns(allCols);
     if (editableCols.length === 0) return;
     let rowIdx = 0;
@@ -201677,7 +201673,7 @@ init_group_runtime();
 // ts_web/00_commitinfo_data.ts
 var commitinfo = {
   name: "@design.estate/dees-catalog",
-  version: "3.78.2",
+  version: "3.78.3",
   description: "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript."
 };
 export {
@@ -203643,4 +203639,4 @@ ibantools/jsnext/ibantools.js:
    * @preferred
    *)
 */
-//# sourceMappingURL=bundle-1776036911195.js.map
+//# sourceMappingURL=bundle-1776175095370.js.map

package/dist_ts_web/00_commitinfo_data.js

@@ -3,7 +3,7 @@
  */
 export const commitinfo = {
     name: '@design.estate/dees-catalog',
-    version: '3.78.2',
+    version: '3.78.3',
     description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 };
 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMDBfY29tbWl0aW5mb19kYXRhLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vdHNfd2ViLzAwX2NvbW1pdGluZm9fZGF0YS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUNILE1BQU0sQ0FBQyxNQUFNLFVBQVUsR0FBRztJQUN4QixJQUFJLEVBQUUsNkJBQTZCO0lBQ25DLE9BQU8sRUFBRSxRQUFRO0lBQ2pCLFdBQVcsRUFBRSxzSkFBc0o7Q0FDcEssQ0FBQSJ9

package/dist_ts_web/elements/00group-dataview/dees-table/dees-table.d.ts

@@ -136,19 +136,19 @@ export declare class DeesTable<T> extends DeesElement {
      * needed (saves a full thead worth of cells per render when inactive).
      */
     private accessor __floatingActive;
-    /** rowId → set of colKey strings currently flashing. */
+    /** rowId → (colKey → flash token) for cells currently flashing. */
     private accessor __flashingCells;
     /** rowId → (colKey → last-seen resolved cell value). Populated per diff pass. */
     private __prevSnapshot?;
     /** Single shared timer that clears __flashingCells after highlightDuration ms. */
     private __flashClearTimer?;
-    /** Monotonic counter bumped each flash batch so directives.keyed recreates the cell node and restarts the animation. */
+    /** Monotonic counter bumped per flash batch so only changed cells restart their animation. */
     private __flashTick;
     /** One-shot console.warn gate for missing rowKey in flash mode. */
     private __flashWarnedNoRowKey;
     private __memoEffectiveCols?;
     private __memoViewData?;
-    /** Tracks the (data, columns) pair that `determineColumnWidths()` last sized for. */
+    /** Tracks the layout inputs that `determineColumnWidths()` last sized for. */
     private __columnsSizedFor?;
     /** Estimated row height (px). Measured once from the first rendered row. */
     private __rowHeight;
@@ -177,6 +177,7 @@ export declare class DeesTable<T> extends DeesElement {
      * that affect it. Avoids re-running `computeEffectiveColumnsFn` /
      * `computeColumnsFromDisplayFunctionFn` on every Lit update.
      */
+    private __getDisplayFunctionShapeKey;
     private __getEffectiveColumns;
     /**
      * Returns the sorted/filtered view of the data, memoized by reference of
@@ -248,7 +249,7 @@ export declare class DeesTable<T> extends DeesElement {
     /**
      * Measures the height of the first rendered body row and stores it for
      * subsequent virtualization math. Idempotent — only measures once per
-     * `data`/`columns` pair (cleared in `updated()` when those change).
+     * rendered table layout (cleared in `updated()` when that layout changes).
      */
     private __measureRowHeight;
     /**