@prioticket/design-system-web 1.6.3 → 1.7.0-beta.2

package/dist/components/pd-table.es.js

@@ -1,24 +1,25 @@
-import { css as b, LitElement as y, nothing as g, html as d } from "lit";
-import { property as c, state as u, customElement as _ } from "lit/decorators.js";
-import { repeat as f } from "lit/directives/repeat.js";
+import { css as y, LitElement as w, nothing as p, html as h } from "lit";
+import { property as g, state as u, customElement as v } from "lit/decorators.js";
+import { repeat as x } from "lit/directives/repeat.js";
 import { classMap as m } from "lit/directives/class-map.js";
+import { ref as C } from "lit/directives/ref.js";
 import "./pd-icon.es.js";
 import "./pd-checkbox.es.js";
 import "./pd-text-field.es.js";
 import "./pd-icon-button.es.js";
 import "./pd-select.es.js";
 import "./pd-menu-item.es.js";
-var v = Object.defineProperty, w = Object.getOwnPropertyDescriptor, l = (e, t, a, r) => {
-  for (var o = r > 1 ? void 0 : r ? w(t, a) : t, n = e.length - 1, s; n >= 0; n--)
-    (s = e[n]) && (o = (r ? s(t, a, o) : s(o)) || o);
-  return r && o && v(t, a, o), o;
+var S = Object.defineProperty, D = Object.getOwnPropertyDescriptor, d = (e, t, a, r) => {
+  for (var s = r > 1 ? void 0 : r ? D(t, a) : t, o = e.length - 1, n; o >= 0; o--)
+    (n = e[o]) && (s = (r ? n(t, a, s) : n(s)) || s);
+  return r && s && S(t, a, s), s;
 };
-let i = class extends y {
+let l = class extends w {
   constructor() {
     super(...arguments), this.columns = [], this.data = [], this.rowKey = (e, t) => {
       const a = e.id;
       return a != null ? String(a) : `__idx_${t}`;
-    }, this.selectable = !1, this.sortable = !1, this.pagination = !1, this.pageSize = 10, this.pageIndex = 0, this.totalItems = 0, this.draggableRows = !1, this.draggableColumns = !1, this.loading = !1, this.clearSelectionOnDataChange = !1, this.currencyCode = "EUR", this.pageSizeOptions = [5, 10, 25, 50, 100], this._sortColumn = null, this._sortDirection = "asc", this._selectedRowKeys = /* @__PURE__ */ new Set(), this._draggedRowIndex = null, this._dragOverRowIndex = null, this._isDragHandleGrabbed = !1, this._draggedColumnIndex = null, this._dragOverColumnIndex = null, this._displayDataCache = [], this._displayDataCacheKey = "", this._uniqueId = Math.random().toString(36).substring(2, 9);
+    }, this.selectable = !1, this.sortable = !1, this.pagination = !1, this.pageSize = 10, this.pageIndex = 0, this.totalItems = 0, this.draggableRows = !1, this.draggableColumns = !1, this.loading = !1, this.clearSelectionOnDataChange = !1, this.currencyCode = "EUR", this.pageSizeOptions = [5, 10, 25, 50, 100], this._sortColumn = null, this._sortDirection = "asc", this._selectedRowKeys = /* @__PURE__ */ new Set(), this._draggedRowIndex = null, this._dragOverRowIndex = null, this._isDragHandleGrabbed = !1, this._draggedColumnIndex = null, this._dragOverColumnIndex = null, this._flipPositions = /* @__PURE__ */ new Map(), this._flipPending = !1, this._displayDataCache = [], this._displayDataCacheKey = "", this._displayToDataIndexMap = /* @__PURE__ */ new Map(), this._reactRoots = /* @__PURE__ */ new Map(), this._dataRevision = 0, this._uniqueId = Math.random().toString(36).substring(2, 9);
   }
   // ---------------------------------------------------------------------------
   // Getters
@@ -48,50 +49,86 @@ let i = class extends y {
       const a = this.pageIndex * this.pageSize, r = a + this.pageSize;
       t = t.slice(a, r);
     }
-    return this._displayDataCacheKey = e, this._displayDataCache = t, t;
+    this._displayDataCacheKey = e, this._displayDataCache = t, this._displayToDataIndexMap = /* @__PURE__ */ new Map();
+    for (let a = 0; a < t.length; a++)
+      this._displayToDataIndexMap.set(t[a], this.data.indexOf(t[a]));
+    return t;
   }
   // ---------------------------------------------------------------------------
   // Lifecycle
   // ---------------------------------------------------------------------------
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._reactRoots.forEach(({ unmount: e }) => e()), this._reactRoots.clear();
+  }
   willUpdate(e) {
-    super.willUpdate(e), e.has("data") && this.clearSelectionOnDataChange && (this._selectedRowKeys = /* @__PURE__ */ new Set()), (e.has("data") || e.has("pageSize")) && this.pageIndex >= this._totalPages && this._totalPages > 0 && (this.pageIndex = this._totalPages - 1);
+    super.willUpdate(e), e.has("data") && this._dataRevision++, e.has("data") && this.clearSelectionOnDataChange && (this._selectedRowKeys = /* @__PURE__ */ new Set()), (e.has("data") || e.has("pageSize")) && this.pageIndex >= this._totalPages && this._totalPages > 0 && (this.pageIndex = this._totalPages - 1);
+  }
+  updated(e) {
+    super.updated(e), this._flipPending && (this._flipPending = !1, this._playFlipAnimation());
   }
   // ---------------------------------------------------------------------------
-  // Private Methods - Data Processing
+  // FLIP Animation
   // ---------------------------------------------------------------------------
+  /**
+   * Captures the current Y position of every visible row.
+   * Must be called BEFORE data changes trigger a re-render.
+   */
+  _captureRowPositions() {
+    this._flipPositions.clear();
+    const e = this.shadowRoot?.querySelector("tbody");
+    if (!e) return;
+    const t = e.querySelectorAll('tr[role="row"]'), a = this._displayData;
+    t.forEach((r, s) => {
+      const o = a[s];
+      if (!o) return;
+      const n = this._displayToDataIndexMap.get(o) ?? this.data.indexOf(o), i = this._getRowKey(o, n);
+      this._flipPositions.set(i, r.getBoundingClientRect().top);
+    });
+  }
+  /**
+   * After re-render, computes the delta between old and new positions
+   * and animates rows from their old position to the new one.
+   */
+  _playFlipAnimation() {
+    const e = this.shadowRoot?.querySelector("tbody");
+    if (!e || this._flipPositions.size === 0) return;
+    const t = e.querySelectorAll('tr[role="row"]'), a = this._displayData;
+    t.forEach((r, s) => {
+      const o = a[s];
+      if (!o) return;
+      const n = this._displayToDataIndexMap.get(o) ?? this.data.indexOf(o), i = this._getRowKey(o, n), c = this._flipPositions.get(i);
+      if (c === void 0) return;
+      const f = r.getBoundingClientRect().top, b = c - f;
+      Math.abs(b) < 1 || (r.style.transform = `translateY(${b}px)`, r.style.transition = "none", requestAnimationFrame(() => {
+        r.style.transition = "transform 200ms cubic-bezier(0.2, 0, 0, 1)", r.style.transform = "";
+        const _ = () => {
+          r.style.transition = "", r.removeEventListener("transitionend", _);
+        };
+        r.addEventListener("transitionend", _, { once: !0 });
+      }));
+    }), this._flipPositions.clear();
+  }
   _computeCacheKey() {
-    let e = "empty";
-    if (this.data.length > 0) {
-      const t = this.rowKey(this.data[0], 0), a = this.rowKey(this.data[this.data.length - 1], this.data.length - 1), r = this.data.length > 2 ? this.rowKey(this.data[Math.floor(this.data.length / 2)], Math.floor(this.data.length / 2)) : "";
-      e = `${this.data.length}-${t}-${r}-${a}`;
-    }
-    return `${e}|${this._sortColumn}|${this._sortDirection}|${this.pageIndex}|${this.pageSize}|${this.totalItems}`;
+    return `${this._dataRevision}|${this._sortColumn}|${this._sortDirection}|${this.pageIndex}|${this.pageSize}|${this.totalItems}`;
   }
   _sortData(e) {
     const t = this._sortColumn, a = this._sortDirection;
-    return [...e].sort((r, o) => {
-      const n = r[t], s = o[t];
-      if (n == null && s == null) return 0;
-      if (n == null) return a === "asc" ? 1 : -1;
-      if (s == null) return a === "asc" ? -1 : 1;
-      if (typeof n == "number" && typeof s == "number")
-        return a === "asc" ? n - s : s - n;
-      if (n instanceof Date && s instanceof Date)
-        return a === "asc" ? n.getTime() - s.getTime() : s.getTime() - n.getTime();
-      const p = String(n).toLowerCase(), h = String(s).toLowerCase();
-      return p < h ? a === "asc" ? -1 : 1 : p > h ? a === "asc" ? 1 : -1 : 0;
+    return [...e].sort((r, s) => {
+      const o = r[t], n = s[t];
+      if (o == null && n == null) return 0;
+      if (o == null) return a === "asc" ? 1 : -1;
+      if (n == null) return a === "asc" ? -1 : 1;
+      if (typeof o == "number" && typeof n == "number")
+        return a === "asc" ? o - n : n - o;
+      if (o instanceof Date && n instanceof Date)
+        return a === "asc" ? o.getTime() - n.getTime() : n.getTime() - o.getTime();
+      const i = String(o).toLowerCase(), c = String(n).toLowerCase();
+      return i < c ? a === "asc" ? -1 : 1 : i > c ? a === "asc" ? 1 : -1 : 0;
     });
   }
   _getRowKey(e, t) {
     return this.rowKey(e, t);
   }
-  /**
-   * Finds the actual index of a row in the full data array.
-   * This is critical for stable row keys when pagination is active.
-   */
-  _getActualDataIndex(e) {
-    return this.data.indexOf(e);
-  }
   _isColumnSortable(e) {
     return e.sortable !== void 0 ? e.sortable : this.sortable;
   }
@@ -121,13 +158,13 @@ let i = class extends y {
   // ---------------------------------------------------------------------------
   _handleSelectAll(e) {
     const t = e.target, a = /* @__PURE__ */ new Set();
-    t.checked && this.data.forEach((r, o) => {
-      a.add(this._getRowKey(r, o));
+    t.checked && this.data.forEach((r, s) => {
+      a.add(this._getRowKey(r, s));
     }), this._selectedRowKeys = a, this._emitSelectionChange();
   }
   _handleSelectRow(e, t, a) {
-    const r = this._getRowKey(e, t), o = new Set(this._selectedRowKeys);
-    a ? o.add(r) : o.delete(r), this._selectedRowKeys = o, this._emitSelectionChange();
+    const r = this._getRowKey(e, t), s = new Set(this._selectedRowKeys);
+    a ? s.add(r) : s.delete(r), this._selectedRowKeys = s, this._emitSelectionChange();
   }
   _emitSelectionChange() {
     const e = this.data.filter(
@@ -153,19 +190,19 @@ let i = class extends y {
     }));
   }
   _handleCellChange(e, t, a, r) {
-    const o = r.target, n = e[a.id];
-    let s = o.value;
+    const s = r.target, o = e[a.id];
+    let n = s.value;
     if (a.type === "number" || a.type === "currency") {
-      const p = parseFloat(o.value);
-      s = isNaN(p) ? null : p;
+      const i = parseFloat(s.value);
+      n = isNaN(i) ? null : i;
     }
     this.dispatchEvent(new CustomEvent("pd-table-cell-change", {
       detail: {
         row: e,
         rowIndex: t,
         columnId: a.id,
-        value: s,
-        previousValue: n
+        value: n,
+        previousValue: o
       },
       bubbles: !0,
       composed: !0
@@ -173,6 +210,11 @@ let i = class extends y {
   }
   // ---------------------------------------------------------------------------
   // Event Handlers - Drag and Drop
+  //
+  // All drag handlers work with DISPLAY indices (0-based position in the
+  // visible rows after sorting/pagination). When emitting the reorder event
+  // we map display indices back to this.data indices so the consumer can
+  // splice the original array correctly.
   // ---------------------------------------------------------------------------
   _onDragStart(e, t) {
     if (!this.draggableRows || !this._isDragHandleGrabbed) {
@@ -180,27 +222,19 @@ let i = class extends y {
       return;
     }
     this._draggedRowIndex = t, e.dataTransfer && (e.dataTransfer.effectAllowed = "move", e.dataTransfer.setData("text/plain", String(t))), requestAnimationFrame(() => {
-      e.target.classList.add("dragging");
+      (e.target.closest?.("tr") ?? e.target).classList.add("dragging");
     });
   }
   _onDragOver(e, t) {
     !this.draggableRows || this._draggedRowIndex === null || (e.preventDefault(), e.dataTransfer && (e.dataTransfer.dropEffect = "move"), this._dragOverRowIndex !== t && (this._dragOverRowIndex = t));
   }
   _onDragEnd(e) {
-    this._resetDragState(), e.target.classList.remove("dragging");
+    this._resetDragState(), (e.target.closest?.("tr") ?? e.target).classList.remove("dragging");
   }
   _onDrop(e, t) {
     if (e.preventDefault(), !this.draggableRows || this._draggedRowIndex === null) return;
     const a = this._draggedRowIndex;
-    a !== t && (this._sortColumn = null, this._sortDirection = "asc", this.dispatchEvent(new CustomEvent("pd-table-row-reorder", {
-      detail: {
-        fromIndex: a,
-        toIndex: t,
-        item: this.data[a]
-      },
-      bubbles: !0,
-      composed: !0
-    }))), this._resetDragState();
+    a !== t && this._emitReorder(a, t), this._resetDragState();
   }
   _resetDragState() {
     this._draggedRowIndex = null, this._dragOverRowIndex = null, this._isDragHandleGrabbed = !1;
@@ -212,14 +246,31 @@ let i = class extends y {
     this._isDragHandleGrabbed = !1;
   }
   _handleDragHandleKeyDown(e, t) {
-    e.key === "ArrowUp" && t > 0 ? (e.preventDefault(), this._emitReorder(t, t - 1)) : e.key === "ArrowDown" && t < this.data.length - 1 && (e.preventDefault(), this._emitReorder(t, t + 1));
+    const a = this._displayData;
+    e.key === "ArrowUp" && t > 0 ? (e.preventDefault(), this._emitReorder(t, t - 1)) : e.key === "ArrowDown" && t < a.length - 1 && (e.preventDefault(), this._emitReorder(t, t + 1));
   }
+  /**
+   * Maps display indices to this.data indices, performs the reorder
+   * internally, and emits the event with the complete reordered array.
+   *
+   * When sorting is active the user sees a sorted view; dragging within it
+   * means "I accept this sorted order AND want to adjust it."  We therefore
+   * **materialize** the sort into the data array before applying the drag,
+   * so the result matches what the user visually intended.
+   */
   _emitReorder(e, t) {
-    this._sortColumn = null, this._sortDirection = "asc", this.dispatchEvent(new CustomEvent("pd-table-row-reorder", {
+    const a = this._displayData, r = a[e], s = a[t];
+    if (!r || !s) return;
+    this._captureRowPositions(), this._flipPending = !0, this._sortColumn && (this.data = this._sortData([...this.data])), this._sortColumn = null, this._sortDirection = "asc";
+    const o = this.data.indexOf(r), n = this.data.indexOf(s);
+    if (o === -1 || n === -1) return;
+    const i = [...this.data], [c] = i.splice(o, 1);
+    i.splice(n, 0, c), this.data = i, this.dispatchEvent(new CustomEvent("pd-table-row-reorder", {
       detail: {
-        fromIndex: e,
-        toIndex: t,
-        item: this.data[e]
+        fromIndex: o,
+        toIndex: n,
+        item: r,
+        data: i
       },
       bubbles: !0,
       composed: !0
@@ -296,16 +347,16 @@ let i = class extends y {
   // ---------------------------------------------------------------------------
   _renderHeader() {
     const e = this.data.length > 0 && this._selectedRowKeys.size === this.data.length, t = this._selectedRowKeys.size > 0 && this._selectedRowKeys.size < this.data.length;
-    return d`
+    return h`
       <thead>
         <tr role="row">
-          ${this.draggableRows ? d`
+          ${this.draggableRows ? h`
             <th class="drag-handle-header" role="columnheader" aria-label="Reorder">
               <span class="visually-hidden">Reorder</span>
             </th>
-          ` : g}
+          ` : p}
 
-          ${this.selectable ? d`
+          ${this.selectable ? h`
             <th class="checkbox-cell" role="columnheader">
               <pd-checkbox
                 aria-label="Select all rows"
@@ -314,7 +365,7 @@ let i = class extends y {
                 @change=${this._handleSelectAll}
               ></pd-checkbox>
             </th>
-          ` : g}
+          ` : p}
 
           ${this.columns.map((a, r) => this._renderHeaderCell(a, r))}
         </tr>
@@ -322,56 +373,56 @@ let i = class extends y {
     `;
   }
   _renderHeaderCell(e, t) {
-    const a = this._isColumnSortable(e), r = this._getColumnAlignment(e), o = this._sortColumn === e.id, n = this._draggedColumnIndex === t, s = this._dragOverColumnIndex === t && !n, p = o ? this._sortDirection === "asc" ? "ascending" : "descending" : "none";
-    return d`
+    const a = this._isColumnSortable(e), r = this._getColumnAlignment(e), s = this._sortColumn === e.id, o = this._draggedColumnIndex === t, n = this._dragOverColumnIndex === t && !o, i = s ? this._sortDirection === "asc" ? "ascending" : "descending" : "none";
+    return h`
       <th
         role="columnheader"
         class=${m({
       sortable: a,
-      sorted: o,
+      sorted: s,
       [`align-${r}`]: !0,
       "column-draggable": this.draggableColumns,
-      "column-dragging": n,
-      "column-drag-over": s
+      "column-dragging": o,
+      "column-drag-over": n
     })}
         style=${e.width ? `width: ${e.width};` : ""}${e.minWidth ? ` min-width: ${e.minWidth};` : ""}
-        aria-sort=${a ? p : g}
-        tabindex=${a || this.draggableColumns ? "0" : g}
+        aria-sort=${a ? i : p}
+        tabindex=${a || this.draggableColumns ? "0" : p}
         draggable=${this.draggableColumns ? "true" : "false"}
         @click=${() => this._handleSort(e)}
-        @keydown=${(h) => {
-      this._handleHeaderKeyDown(h, e), this._handleColumnHeaderKeyDown(h, t);
+        @keydown=${(c) => {
+      this._handleHeaderKeyDown(c, e), this._handleColumnHeaderKeyDown(c, t);
     }}
-        @dragstart=${(h) => this._onColumnDragStart(h, t)}
-        @dragover=${(h) => this._onColumnDragOver(h, t)}
-        @drop=${(h) => this._onColumnDrop(h, t)}
-        @dragend=${(h) => this._onColumnDragEnd(h)}
+        @dragstart=${(c) => this._onColumnDragStart(c, t)}
+        @dragover=${(c) => this._onColumnDragOver(c, t)}
+        @drop=${(c) => this._onColumnDrop(c, t)}
+        @dragend=${(c) => this._onColumnDragEnd(c)}
       >
         <div class=${m({
       "header-content": !0,
       [`align-${r}`]: !0
     })}>
-          ${this.draggableColumns ? d`
+          ${this.draggableColumns ? h`
             <pd-icon
               class="column-drag-handle"
               name="drag_indicator"
               size="small"
               aria-hidden="true"
             ></pd-icon>
-          ` : g}
+          ` : p}
           <span class="header-text">${e.header}</span>
-          ${a ? d`
+          ${a ? h`
             <pd-icon
               class=${m({
       "sort-icon": !0,
-      "sort-icon-visible": o,
-      "sort-icon-desc": o && this._sortDirection === "desc"
+      "sort-icon-visible": s,
+      "sort-icon-desc": s && this._sortDirection === "desc"
     })}
               name="arrow_upward"
               size="small"
               aria-hidden="true"
             ></pd-icon>
-          ` : g}
+          ` : p}
         </div>
       </th>
     `;
@@ -380,8 +431,14 @@ let i = class extends y {
   // Rendering - Cells
   // ---------------------------------------------------------------------------
   _renderCell(e, t, a) {
-    if (a.cellTemplate)
-      return a.cellTemplate(e, t);
+    if (a.cellTemplate) {
+      const s = a.cellTemplate(e, t);
+      if (this._isReactElement(s)) {
+        const o = `${this.rowKey(e, t)}-${a.id}`;
+        return this._renderReactCellContent(s, o);
+      }
+      return s;
+    }
     const r = e[a.id];
     if (a.editable)
       return this._renderEditableCell(e, t, a, r);
@@ -399,14 +456,14 @@ let i = class extends y {
     }
   }
   _renderEditableCell(e, t, a, r) {
-    const o = a.type === "number" || a.type === "currency" ? "number" : "text";
-    return d`
+    const s = a.type === "number" || a.type === "currency" ? "number" : "text";
+    return h`
       <pd-text-field
-        type=${o}
+        type=${s}
         .value=${r != null ? String(r) : ""}
         aria-label="${a.header}"
-        @change=${(n) => this._handleCellChange(e, t, a, n)}
-        @click=${(n) => n.stopPropagation()}
+        @change=${(o) => this._handleCellChange(e, t, a, o)}
+        @click=${(o) => o.stopPropagation()}
         style="width: 100%;"
       ></pd-text-field>
     `;
@@ -435,7 +492,7 @@ let i = class extends y {
   }
   _renderBoolean(e) {
     const t = !!e;
-    return d`
+    return h`
       <pd-icon
         name=${t ? "check" : "close"}
         size="small"
@@ -444,29 +501,62 @@ let i = class extends y {
       ></pd-icon>
     `;
   }
+  _isReactElement(e) {
+    return typeof e == "object" && e !== null && "$$typeof" in e;
+  }
+  _renderReactCellContent(e, t) {
+    return h`<span style="display:contents" ${C((a) => {
+      if (!a) {
+        this._reactRoots.get(t)?.unmount(), this._reactRoots.delete(t);
+        return;
+      }
+      const r = this._reactRoots.get(t);
+      if (r) {
+        r.render(e);
+        return;
+      }
+      import("../client-C4NwtAXt.js").then((s) => s.c).then(({ createRoot: s }) => {
+        if (this._reactRoots.has(t))
+          this._reactRoots.get(t).render(e);
+        else {
+          const o = s(a);
+          o.render(e), this._reactRoots.set(t, {
+            render: (n) => o.render(n),
+            unmount: () => o.unmount()
+          });
+        }
+      });
+    })}></span>`;
+  }
   // ---------------------------------------------------------------------------
   // Rendering - Rows
   // ---------------------------------------------------------------------------
-  _renderRow(e, t) {
-    const a = this._getRowKey(e, t), r = this._selectedRowKeys.has(a), o = this._draggedRowIndex === t, n = this._dragOverRowIndex === t && !o;
-    return d`
+  /**
+   * Renders a single table row.
+   * @param row        The data item
+   * @param displayIndex  0-based position in the visible (sorted/paginated) list — used for drag-and-drop
+   * @param dataIndex  Position in the original this.data array — used for row keys, selection, and events
+   */
+  _renderRow(e, t, a) {
+    const r = this._getRowKey(e, a), s = this._selectedRowKeys.has(r), o = this._draggedRowIndex === t, n = this._dragOverRowIndex === t && !o;
+    return h`
       <tr
         role="row"
         class=${m({
-      selected: r,
+      selected: s,
       draggable: this.draggableRows,
       dragging: o,
       "drag-over": n
     })}
-        aria-selected=${this.selectable ? String(r) : g}
+        aria-selected=${this.selectable ? String(s) : p}
         draggable=${this.draggableRows ? "true" : "false"}
-        @dragstart=${(s) => this._onDragStart(s, t)}
-        @dragover=${(s) => this._onDragOver(s, t)}
-        @drop=${(s) => this._onDrop(s, t)}
-        @dragend=${(s) => this._onDragEnd(s)}
-        @click=${() => this._handleRowClick(e, t)}
+        @dragstart=${(i) => this._onDragStart(i, t)}
+        @dragover=${(i) => this._onDragOver(i, t)}
+        @drop=${(i) => this._onDrop(i, t)}
+        @dragend=${(i) => this._onDragEnd(i)}
+        @click=${() => this._handleRowClick(e, a)}
       >
-        ${this.draggableRows ? d`
+        ${this.draggableRows ? h`
           <td class="drag-handle-cell" role="cell">
             <pd-icon
               name="drag_indicator"
@@ -477,34 +567,34 @@ let i = class extends y {
               aria-label="Drag to reorder row. Use arrow keys to move up or down."
               @mousedown=${this._handleDragHandleMouseDown}
               @mouseup=${this._handleDragHandleMouseUp}
-              @keydown=${(s) => this._handleDragHandleKeyDown(s, t)}
+              @keydown=${(i) => this._handleDragHandleKeyDown(i, t)}
             ></pd-icon>
           </td>
-        ` : g}
+        ` : p}
 
-        ${this.selectable ? d`
+        ${this.selectable ? h`
           <td class="checkbox-cell" role="cell">
             <pd-checkbox
               aria-label="Select row"
-              ?checked=${r}
-              @change=${(s) => {
-      const p = s.target;
-      this._handleSelectRow(e, t, p.checked);
+              ?checked=${s}
+              @change=${(i) => {
+      const c = i.target;
+      this._handleSelectRow(e, a, c.checked);
     }}
-              @click=${(s) => s.stopPropagation()}
+              @click=${(i) => i.stopPropagation()}
             ></pd-checkbox>
           </td>
-        ` : g}
+        ` : p}
 
-        ${this.columns.map((s) => d`
+        ${this.columns.map((i) => h`
           <td
             role="cell"
             class=${m({
-      [`align-${this._getColumnAlignment(s)}`]: !0,
-      editable: !!s.editable
+      [`align-${this._getColumnAlignment(i)}`]: !0,
+      editable: !!i.editable
     })}
           >
-            ${this._renderCell(e, t, s)}
+            ${this._renderCell(e, a, i)}
           </td>
         `)}
       </tr>
@@ -514,7 +604,7 @@ let i = class extends y {
   // Rendering - States
   // ---------------------------------------------------------------------------
   _renderEmptyState() {
-    return d`
+    return h`
       <tr class="state-row">
         <td colspan=${this._getColspan()} class="no-data">
           <slot name="no-data">
@@ -528,7 +618,7 @@ let i = class extends y {
     `;
   }
   _renderLoadingState() {
-    return d`
+    return h`
       <tr class="state-row">
         <td colspan=${this._getColspan()} class="loading-cell">
           <slot name="loading">
@@ -544,9 +634,9 @@ let i = class extends y {
   // Rendering - Pagination
   // ---------------------------------------------------------------------------
   _renderPagination() {
-    if (!this.pagination) return g;
-    const e = this._totalCount, t = e === 0 ? 0 : this.pageIndex * this.pageSize + 1, a = Math.min((this.pageIndex + 1) * this.pageSize, e), r = this.pageIndex === 0, o = this.pageIndex >= this._totalPages - 1 || e === 0;
-    return d`
+    if (!this.pagination) return p;
+    const e = this._totalCount, t = e === 0 ? 0 : this.pageIndex * this.pageSize + 1, a = Math.min((this.pageIndex + 1) * this.pageSize, e), r = this.pageIndex === 0, s = this.pageIndex >= this._totalPages - 1 || e === 0;
+    return h`
       <nav class="pagination">
         <div class="items-per-page">
           <label id="page-size-label-${this._uniqueId}">Items per page:</label>
@@ -555,9 +645,9 @@ let i = class extends y {
               variant="filled"
               aria-labelledby="page-size-label-${this._uniqueId}"
               .value=${this.pageSize.toString()}
-              .options=${this.pageSizeOptions.map((n) => ({
-      value: String(n),
-      label: String(n)
+              .options=${this.pageSizeOptions.map((o) => ({
+      value: String(o),
+      label: String(o)
     }))}
               @change=${this._handlePageSizeChange}
             ></pd-select>
@@ -585,13 +675,13 @@ let i = class extends y {
           <pd-icon-button
             icon="chevron_right"
             aria-label="Next page"
-            ?disabled=${o}
+            ?disabled=${s}
             @click=${() => this._handlePageChange(this.pageIndex + 1)}
           ></pd-icon-button>
           <pd-icon-button
             icon="last_page"
             aria-label="Last page"
-            ?disabled=${o}
+            ?disabled=${s}
             @click=${() => this._handlePageChange(this._totalPages - 1)}
           ></pd-icon-button>
         </div>
@@ -604,7 +694,7 @@ let i = class extends y {
   // ---------------------------------------------------------------------------
   render() {
     const e = this._displayData, t = e.length === 0 && !this.loading;
-    return d`
+    return h`
       <div class="table-wrapper">
         <div class="table-container">
           <table
@@ -614,17 +704,17 @@ let i = class extends y {
           >
             ${this._renderHeader()}
             <tbody>
-              ${this.loading ? this._renderLoadingState() : g}
-              ${t ? this._renderEmptyState() : g}
-              ${this.loading ? g : f(
+              ${this.loading ? this._renderLoadingState() : p}
+              ${t ? this._renderEmptyState() : p}
+              ${this.loading ? p : x(
       e,
       (a) => {
-        const r = this._getActualDataIndex(a);
+        const r = this._displayToDataIndexMap.get(a) ?? this.data.indexOf(a);
         return this._getRowKey(a, r);
       },
-      (a) => {
-        const r = this._getActualDataIndex(a);
-        return this._renderRow(a, r);
+      (a, r) => {
+        const s = this._displayToDataIndexMap.get(a) ?? this.data.indexOf(a);
+        return this._renderRow(a, r, s);
       }
     )}
             </tbody>
@@ -677,7 +767,7 @@ let i = class extends y {
     this._displayDataCacheKey = "";
   }
 };
-i.styles = b`
+l.styles = y`
     :host {
       display: block;
 
@@ -837,7 +927,8 @@ i.styles = b`
     }
 
     tr.dragging {
-      opacity: 0.5;
+      opacity: 0.4;
+      z-index: 1;
     }
 
     tr.dragging td {
@@ -848,6 +939,11 @@ i.styles = b`
       box-shadow: inset 0 2px 0 0 var(--md-sys-color-primary);
     }
 
+    /* Rows use will-change during FLIP animation for GPU acceleration */
+    tr[role="row"] {
+      will-change: auto;
+    }
+
     /* Column Drag States */
     th.column-draggable {
       cursor: grab;
@@ -1025,81 +1121,81 @@ i.styles = b`
       }
     }
   `;
-l([
-  c({ type: Array })
-], i.prototype, "columns", 2);
-l([
-  c({ type: Array })
-], i.prototype, "data", 2);
-l([
-  c({ attribute: !1 })
-], i.prototype, "rowKey", 2);
-l([
-  c({ type: Boolean })
-], i.prototype, "selectable", 2);
-l([
-  c({ type: Boolean })
-], i.prototype, "sortable", 2);
-l([
-  c({ type: Boolean })
-], i.prototype, "pagination", 2);
-l([
-  c({ type: Number })
-], i.prototype, "pageSize", 2);
-l([
-  c({ type: Number })
-], i.prototype, "pageIndex", 2);
-l([
-  c({ type: Number })
-], i.prototype, "totalItems", 2);
-l([
-  c({ type: Boolean, attribute: "draggable-rows" })
-], i.prototype, "draggableRows", 2);
-l([
-  c({ type: Boolean, attribute: "draggable-columns" })
-], i.prototype, "draggableColumns", 2);
-l([
-  c({ type: Boolean })
-], i.prototype, "loading", 2);
-l([
-  c({ type: Boolean, attribute: "clear-selection-on-data-change" })
-], i.prototype, "clearSelectionOnDataChange", 2);
-l([
-  c({ type: String, attribute: "currency-code" })
-], i.prototype, "currencyCode", 2);
-l([
-  c({ type: String })
-], i.prototype, "locale", 2);
-l([
-  c({ type: Array, attribute: "page-size-options" })
-], i.prototype, "pageSizeOptions", 2);
-l([
+d([
+  g({ type: Array })
+], l.prototype, "columns", 2);
+d([
+  g({ type: Array })
+], l.prototype, "data", 2);
+d([
+  g({ attribute: !1 })
+], l.prototype, "rowKey", 2);
+d([
+  g({ type: Boolean })
+], l.prototype, "selectable", 2);
+d([
+  g({ type: Boolean })
+], l.prototype, "sortable", 2);
+d([
+  g({ type: Boolean })
+], l.prototype, "pagination", 2);
+d([
+  g({ type: Number })
+], l.prototype, "pageSize", 2);
+d([
+  g({ type: Number })
+], l.prototype, "pageIndex", 2);
+d([
+  g({ type: Number })
+], l.prototype, "totalItems", 2);
+d([
+  g({ type: Boolean, attribute: "draggable-rows" })
+], l.prototype, "draggableRows", 2);
+d([
+  g({ type: Boolean, attribute: "draggable-columns" })
+], l.prototype, "draggableColumns", 2);
+d([
+  g({ type: Boolean })
+], l.prototype, "loading", 2);
+d([
+  g({ type: Boolean, attribute: "clear-selection-on-data-change" })
+], l.prototype, "clearSelectionOnDataChange", 2);
+d([
+  g({ type: String, attribute: "currency-code" })
+], l.prototype, "currencyCode", 2);
+d([
+  g({ type: String })
+], l.prototype, "locale", 2);
+d([
+  g({ type: Array, attribute: "page-size-options" })
+], l.prototype, "pageSizeOptions", 2);
+d([
   u()
-], i.prototype, "_sortColumn", 2);
-l([
+], l.prototype, "_sortColumn", 2);
+d([
   u()
-], i.prototype, "_sortDirection", 2);
-l([
+], l.prototype, "_sortDirection", 2);
+d([
   u()
-], i.prototype, "_selectedRowKeys", 2);
-l([
+], l.prototype, "_selectedRowKeys", 2);
+d([
   u()
-], i.prototype, "_draggedRowIndex", 2);
-l([
+], l.prototype, "_draggedRowIndex", 2);
+d([
   u()
-], i.prototype, "_dragOverRowIndex", 2);
-l([
+], l.prototype, "_dragOverRowIndex", 2);
+d([
   u()
-], i.prototype, "_isDragHandleGrabbed", 2);
-l([
+], l.prototype, "_isDragHandleGrabbed", 2);
+d([
   u()
-], i.prototype, "_draggedColumnIndex", 2);
-l([
+], l.prototype, "_draggedColumnIndex", 2);
+d([
   u()
-], i.prototype, "_dragOverColumnIndex", 2);
-i = l([
-  _("pd-table")
-], i);
+], l.prototype, "_dragOverColumnIndex", 2);
+l = d([
+  v("pd-table")
+], l);
 export {
-  i as PdTable
+  l as PdTable
 };