@toolbox-web/grid 1.6.0 → 1.6.2

package/lib/plugins/row-reorder/RowReorderPlugin.d.ts

@@ -79,6 +79,11 @@ export declare class RowReorderPlugin extends BaseGridPlugin<RowReorderConfig> {
     readonly styles: string;
     /** @internal */
     protected get defaultConfig(): Partial<RowReorderConfig>;
+    /**
+     * Resolve animation type from plugin config.
+     * Uses base class isAnimationEnabled to respect grid-level settings.
+     */
+    private get animationType();
     private isDragging;
     private draggedRowIndex;
     private dropRowIndex;
@@ -138,6 +143,19 @@ export declare class RowReorderPlugin extends BaseGridPlugin<RowReorderConfig> {
      * Execute a row move and emit the event.
      */
     private executeMove;
+    /**
+     * Capture row positions before reorder.
+     * Maps visual row index to its top position.
+     */
+    private captureRowPositions;
+    /**
+     * Apply FLIP animation for row reorder.
+     * Uses CSS transitions - JS sets initial transform and toggles class.
+     * @param oldPositions - Row positions captured before DOM change
+     * @param fromIndex - Original index of moved row
+     * @param toIndex - New index of moved row
+     */
+    private animateFLIP;
     /**
      * Get the row index from a row element by checking data-row attribute on cells.
      * This is consistent with how other plugins retrieve row indices.

package/lib/plugins/row-reorder/RowReorderPlugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RowReorderPlugin.d.ts","sourceRoot":"","sources":["../../../../../../libs/grid/src/lib/plugins/row-reorder/RowReorderPlugin.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC/D,OAAO,KAAK,EAAE,YAAY,EAAgB,MAAM,kBAAkB,CAAC;AAEnE,OAAO,KAAK,EAA8B,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE5E,4CAA4C;AAC5C,eAAO,MAAM,qBAAqB,mBAAmB,CAAC;AAEtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoEG;AACH,qBAAa,gBAAiB,SAAQ,cAAc,CAAC,gBAAgB,CAAC;IACpE,gBAAgB;IAChB,QAAQ,CAAC,IAAI,gBAAgB;IAC7B,gBAAgB;IAChB,SAAkB,MAAM,SAAU;IAElC,gBAAgB;IAChB,cAAuB,aAAa,IAAI,OAAO,CAAC,gBAAgB,CAAC,CAShE;IAGD,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,eAAe,CAAuB;IAC9C,OAAO,CAAC,YAAY,CAAuB;IAC3C,OAAO,CAAC,WAAW,CAA4B;IAC/C,OAAO,CAAC,aAAa,CAA8C;IACnE,qDAAqD;IACrD,OAAO,CAAC,YAAY,CAAK;IAKzB,gBAAgB;IACP,MAAM,IAAI,IAAI;IAWvB,gBAAgB;IACP,cAAc,CAAC,OAAO,EAAE,SAAS,YAAY,EAAE,GAAG,YAAY,EAAE;IAwCzE,gBAAgB;IACP,WAAW,IAAI,IAAI;IA+B5B;;;OAGG;IACM,SAAS,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO,GAAG,IAAI;IAoCxD;;;;OAIG;IACM,WAAW,IAAI,IAAI;IAS5B;;;;OAIG;IACH,OAAO,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,IAAI;IAiBjD;;;;OAIG;IACH,UAAU,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,OAAO;IAevD;;OAEG;IACH,OAAO,CAAC,wBAAwB;IAwBhC;;;OAGG;IACH,OAAO,CAAC,qBAAqB;IAkD7B;;;OAGG;IACH,OAAO,CAAC,kBAAkB;IAmD1B;;;OAGG;IACH,OAAO,CAAC,gBAAgB;IAmCxB;;OAEG;IACH,OAAO,CAAC,WAAW;IAqBnB;;;OAGG;IACH,OAAO,CAAC,WAAW;IAKnB;;OAEG;IACH,OAAO,CAAC,gBAAgB;IAMxB;;OAEG;IACH,OAAO,CAAC,kBAAkB;CAO3B"}
+{"version":3,"file":"RowReorderPlugin.d.ts","sourceRoot":"","sources":["../../../../../../libs/grid/src/lib/plugins/row-reorder/RowReorderPlugin.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC/D,OAAO,KAAK,EAAE,YAAY,EAAgB,MAAM,kBAAkB,CAAC;AAEnE,OAAO,KAAK,EAA8B,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE5E,4CAA4C;AAC5C,eAAO,MAAM,qBAAqB,mBAAmB,CAAC;AAEtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoEG;AACH,qBAAa,gBAAiB,SAAQ,cAAc,CAAC,gBAAgB,CAAC;IACpE,gBAAgB;IAChB,QAAQ,CAAC,IAAI,gBAAgB;IAC7B,gBAAgB;IAChB,SAAkB,MAAM,SAAU;IAElC,gBAAgB;IAChB,cAAuB,aAAa,IAAI,OAAO,CAAC,gBAAgB,CAAC,CAShE;IAED;;;OAGG;IACH,OAAO,KAAK,aAAa,GAQxB;IAGD,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,eAAe,CAAuB;IAC9C,OAAO,CAAC,YAAY,CAAuB;IAC3C,OAAO,CAAC,WAAW,CAA4B;IAC/C,OAAO,CAAC,aAAa,CAA8C;IACnE,qDAAqD;IACrD,OAAO,CAAC,YAAY,CAAK;IAKzB,gBAAgB;IACP,MAAM,IAAI,IAAI;IAWvB,gBAAgB;IACP,cAAc,CAAC,OAAO,EAAE,SAAS,YAAY,EAAE,GAAG,YAAY,EAAE;IAwCzE,gBAAgB;IACP,WAAW,IAAI,IAAI;IA+B5B;;;OAGG;IACM,SAAS,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO,GAAG,IAAI;IAoCxD;;;;OAIG;IACM,WAAW,IAAI,IAAI;IAS5B;;;;OAIG;IACH,OAAO,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,IAAI;IAiBjD;;;;OAIG;IACH,UAAU,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,OAAO;IAevD;;OAEG;IACH,OAAO,CAAC,wBAAwB;IAwBhC;;;OAGG;IACH,OAAO,CAAC,qBAAqB;IAkD7B;;;OAGG;IACH,OAAO,CAAC,kBAAkB;IAmD1B;;;OAGG;IACH,OAAO,CAAC,gBAAgB;IAmCxB;;OAEG;IACH,OAAO,CAAC,WAAW;IAiCnB;;;OAGG;IACH,OAAO,CAAC,mBAAmB;IAW3B;;;;;;OAMG;IACH,OAAO,CAAC,WAAW;IAoEnB;;;OAGG;IACH,OAAO,CAAC,WAAW;IAKnB;;OAEG;IACH,OAAO,CAAC,gBAAgB;IAMxB;;OAEG;IACH,OAAO,CAAC,kBAAkB;CAO3B"}

package/lib/plugins/row-reorder/index.js

@@ -1,54 +1,54 @@
-function v(a) {
-  a && a.querySelectorAll(".cell-focus").forEach((e) => e.classList.remove("cell-focus"));
+function v(l) {
+  l && l.querySelectorAll(".cell-focus").forEach((e) => e.classList.remove("cell-focus"));
 }
-const R = 'input,select,textarea,[contenteditable="true"],[contenteditable=""],[tabindex]:not([tabindex="-1"])', m = document.createElement("template");
-m.innerHTML = '<div class="cell" role="gridcell" part="cell"></div>';
-const _ = document.createElement("template");
-_.innerHTML = '<div class="data-grid-row" role="row" part="row"></div>';
-function h(a, e) {
-  if (a._virtualization?.enabled) {
-    const { rowHeight: o, container: s, viewportEl: l } = a._virtualization, c = s, d = l?.clientHeight ?? c?.clientHeight ?? 0;
-    if (c && d > 0) {
-      const u = a._focusRow * o;
-      u < c.scrollTop ? c.scrollTop = u : u + o > c.scrollTop + d && (c.scrollTop = u - d + o);
+const m = 'input,select,textarea,[contenteditable="true"],[contenteditable=""],[tabindex]:not([tabindex="-1"])', R = document.createElement("template");
+R.innerHTML = '<div class="cell" role="gridcell" part="cell"></div>';
+const E = document.createElement("template");
+E.innerHTML = '<div class="data-grid-row" role="row" part="row"></div>';
+function p(l, e) {
+  if (l._virtualization?.enabled) {
+    const { rowHeight: o, container: n, viewportEl: c } = l._virtualization, a = n, u = c?.clientHeight ?? a?.clientHeight ?? 0;
+    if (a && u > 0) {
+      const d = l._focusRow * o;
+      d < a.scrollTop ? a.scrollTop = d : d + o > a.scrollTop + u && (a.scrollTop = d - u + o);
     }
   }
-  const r = a._activeEditRows !== void 0 && a._activeEditRows !== -1;
-  r || a.refreshVirtualWindow(!1), v(a._bodyEl), Array.from(a._bodyEl.querySelectorAll('[aria-selected="true"]')).forEach((o) => {
+  const r = l._activeEditRows !== void 0 && l._activeEditRows !== -1;
+  r || l.refreshVirtualWindow(!1), v(l._bodyEl), Array.from(l._bodyEl.querySelectorAll('[aria-selected="true"]')).forEach((o) => {
     o.setAttribute("aria-selected", "false");
   });
-  const t = a._focusRow, i = a._virtualization.start ?? 0, n = a._virtualization.end ?? a._rows.length;
-  if (t >= i && t < n) {
-    const o = a._bodyEl.querySelectorAll(".data-grid-row")[t - i];
-    let s = o?.children[a._focusCol];
-    if ((!s || !s.classList?.contains("cell")) && (s = o?.querySelector(`.cell[data-col="${a._focusCol}"]`) ?? o?.querySelector(".cell[data-col]")), s) {
-      s.classList.add("cell-focus"), s.setAttribute("aria-selected", "true");
-      const l = a.querySelector(".tbw-scroll-area");
-      if (l && s && !r) {
-        const c = a._getHorizontalScrollOffsets?.(o ?? void 0, s) ?? { left: 0, right: 0 };
-        if (!c.skipScroll) {
-          const d = s.getBoundingClientRect(), u = l.getBoundingClientRect(), g = d.left - u.left + l.scrollLeft, f = g + d.width, b = l.scrollLeft + c.left, p = l.scrollLeft + l.clientWidth - c.right;
-          g < b ? l.scrollLeft = g - c.left : f > p && (l.scrollLeft = f - l.clientWidth + c.right);
+  const t = l._focusRow, i = l._virtualization.start ?? 0, s = l._virtualization.end ?? l._rows.length;
+  if (t >= i && t < s) {
+    const o = l._bodyEl.querySelectorAll(".data-grid-row")[t - i];
+    let n = o?.children[l._focusCol];
+    if ((!n || !n.classList?.contains("cell")) && (n = o?.querySelector(`.cell[data-col="${l._focusCol}"]`) ?? o?.querySelector(".cell[data-col]")), n) {
+      n.classList.add("cell-focus"), n.setAttribute("aria-selected", "true");
+      const c = l.querySelector(".tbw-scroll-area");
+      if (c && n && !r) {
+        const a = l._getHorizontalScrollOffsets?.(o ?? void 0, n) ?? { left: 0, right: 0 };
+        if (!a.skipScroll) {
+          const u = n.getBoundingClientRect(), d = c.getBoundingClientRect(), g = u.left - d.left + c.scrollLeft, h = g + u.width, w = c.scrollLeft + a.left, f = c.scrollLeft + c.clientWidth - a.right;
+          g < w ? c.scrollLeft = g - a.left : h > f && (c.scrollLeft = h - c.clientWidth + a.right);
         }
       }
-      if (a._activeEditRows !== void 0 && a._activeEditRows !== -1 && s.classList.contains("editing")) {
-        const c = s.querySelector(R);
-        if (c && document.activeElement !== c)
+      if (l._activeEditRows !== void 0 && l._activeEditRows !== -1 && n.classList.contains("editing")) {
+        const a = n.querySelector(m);
+        if (a && document.activeElement !== a)
           try {
-            c.focus({ preventScroll: !0 });
+            a.focus({ preventScroll: !0 });
           } catch {
           }
-      } else if (!s.contains(document.activeElement)) {
-        s.hasAttribute("tabindex") || s.setAttribute("tabindex", "-1");
+      } else if (!n.contains(document.activeElement)) {
+        n.hasAttribute("tabindex") || n.setAttribute("tabindex", "-1");
         try {
-          s.focus({ preventScroll: !0 });
+          n.focus({ preventScroll: !0 });
         } catch {
         }
       }
     }
   }
 }
-const w = '<svg viewBox="0 0 16 16" width="12" height="12"><path fill="currentColor" d="M6 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/></svg>', E = {
+const b = '<svg viewBox="0 0 16 16" width="12" height="12"><path fill="currentColor" d="M6 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/></svg>', y = {
   expand: "▶",
   collapse: "▼",
   sortAsc: "▲",
@@ -57,11 +57,11 @@ const w = '<svg viewBox="0 0 16 16" width="12" height="12"><path fill="currentCo
   submenuArrow: "▶",
   dragHandle: "⋮⋮",
   toolPanel: "☰",
-  filter: w,
-  filterActive: w,
+  filter: b,
+  filterActive: b,
   print: "🖨️"
 };
-class y {
+class _ {
   /**
    * Plugin dependencies - declare other plugins this one requires.
    *
@@ -285,7 +285,7 @@ class y {
    */
   get gridIcons() {
     const e = this.grid?.gridConfig?.icons ?? {};
-    return { ...E, ...e };
+    return { ...y, ...e };
   }
   // #region Animation Helpers
   /**
@@ -361,8 +361,8 @@ class y {
   }
   // #endregion
 }
-const C = '.dg-row-drag-handle{display:flex;align-items:center;justify-content:center;cursor:grab;-webkit-user-select:none;user-select:none;color:var(--tbw-color-fg-muted, #999);transition:color .15s ease;font-size:14px;letter-spacing:-2px}.dg-row-drag-handle:hover{color:var(--tbw-color-fg, #333)}.dg-row-drag-handle:active{cursor:grabbing}.data-grid-row.dragging{opacity:.6}.data-grid-row.drop-target{position:relative}.data-grid-row.drop-target.drop-before:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background-color:var(--tbw-color-accent, #1976d2);z-index:10}.data-grid-row.drop-target.drop-after:after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background-color:var(--tbw-color-accent, #1976d2);z-index:10}.data-grid-row.keyboard-moving{background-color:var(--tbw-color-bg-selected, #e3f2fd);box-shadow:0 0 0 1px var(--tbw-color-accent, #1976d2) inset}.data-grid-row.animate-flip{transition:transform var(--tbw-animation-duration, .2s) ease-out}', L = "__tbw_row_drag";
-class A extends y {
+const C = '@layer tbw-plugins{.dg-row-drag-handle{display:flex;align-items:center;justify-content:center;cursor:grab;-webkit-user-select:none;user-select:none;color:var(--tbw-row-reorder-handle-color, var(--tbw-color-fg-muted));transition:color var(--tbw-transition-duration, .12s) var(--tbw-transition-ease, ease);font-size:var(--tbw-font-size, 1em);letter-spacing:-2px}.dg-row-drag-handle:hover{color:var(--tbw-row-reorder-handle-hover, var(--tbw-color-fg))}.dg-row-drag-handle:active{cursor:grabbing}.data-grid-row.dragging{opacity:.6}.data-grid-row.drop-target{position:relative}.data-grid-row.drop-target.drop-before:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background-color:var(--tbw-row-reorder-indicator, var(--tbw-color-accent));z-index:10}.data-grid-row.drop-target.drop-after:after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background-color:var(--tbw-row-reorder-indicator, var(--tbw-color-accent));z-index:10}.data-grid-row.keyboard-moving{background-color:var(--tbw-row-reorder-moving-bg, var(--tbw-focus-background));box-shadow:0 0 0 1px var(--tbw-row-reorder-moving-border, var(--tbw-color-accent)) inset}.data-grid-row.flip-animating{transition:transform var(--tbw-animation-duration, .2s) ease-out;will-change:transform;z-index:1}}', A = "__tbw_row_drag";
+class L extends _ {
   /** @internal */
   name = "rowReorder";
   /** @internal */
@@ -378,6 +378,13 @@ class A extends y {
       animation: "flip"
     };
   }
+  /**
+   * Resolve animation type from plugin config.
+   * Uses base class isAnimationEnabled to respect grid-level settings.
+   */
+  get animationType() {
+    return this.isAnimationEnabled ? this.config.animation !== void 0 ? this.config.animation : "flip" : !1;
+  }
   // #region Internal State
   isDragging = !1;
   draggedRowIndex = null;
@@ -399,7 +406,7 @@ class A extends y {
     if (!this.config.showDragHandle)
       return [...e];
     const r = {
-      field: L,
+      field: A,
       header: "",
       width: this.config.dragHandleWidth ?? 40,
       resizable: !1,
@@ -423,14 +430,14 @@ class A extends y {
     const e = this.gridElement;
     if (!e) return;
     e.querySelectorAll(".dg-row-drag-handle").forEach((i) => {
-      const n = i;
-      if (n.getAttribute("data-drag-bound")) return;
-      n.setAttribute("data-drag-bound", "true");
-      const o = n.closest(".data-grid-row");
-      o && this.setupHandleDragListeners(n, o);
+      const s = i;
+      if (s.getAttribute("data-drag-bound")) return;
+      s.setAttribute("data-drag-bound", "true");
+      const o = s.closest(".data-grid-row");
+      o && this.setupHandleDragListeners(s, o);
     }), e.querySelectorAll(".data-grid-row").forEach((i) => {
-      const n = i;
-      n.getAttribute("data-drop-bound") || (n.setAttribute("data-drop-bound", "true"), this.setupRowDropListeners(n));
+      const s = i;
+      s.getAttribute("data-drop-bound") || (s.setAttribute("data-drop-bound", "true"), this.setupRowDropListeners(s));
     });
   }
   /**
@@ -442,11 +449,11 @@ class A extends y {
       return;
     const r = this.grid, t = r._focusRow, i = r._rows ?? this.sourceRows;
     if (t < 0 || t >= i.length) return;
-    const n = e.key === "ArrowUp" ? "up" : "down", o = n === "up" ? t - 1 : t + 1;
+    const s = e.key === "ArrowUp" ? "up" : "down", o = s === "up" ? t - 1 : t + 1;
     if (o < 0 || o >= i.length) return;
-    const s = i[t];
-    if (!(this.config.canMove && !this.config.canMove(s, t, o, n)))
-      return this.handleKeyboardMove(s, t, o, n, r._focusCol), e.preventDefault(), e.stopPropagation(), !0;
+    const n = i[t];
+    if (!(this.config.canMove && !this.config.canMove(n, t, o, s)))
+      return this.handleKeyboardMove(n, t, o, s, r._focusCol), e.preventDefault(), e.stopPropagation(), !0;
   }
   /**
    * Flush pending keyboard moves when user clicks a cell.
@@ -466,8 +473,8 @@ class A extends y {
   moveRow(e, r) {
     const t = [...this.sourceRows];
     if (e < 0 || e >= t.length || r < 0 || r >= t.length || e === r) return;
-    const i = r < e ? "up" : "down", n = t[e];
-    this.config.canMove && !this.config.canMove(n, e, r, i) || this.executeMove(n, e, r, "keyboard");
+    const i = r < e ? "up" : "down", s = t[e];
+    this.config.canMove && !this.config.canMove(s, e, r, i) || this.executeMove(s, e, r, "keyboard");
   }
   /**
    * Check if a row can be moved to a position.
@@ -503,7 +510,7 @@ class A extends y {
       if (r.preventDefault(), !this.isDragging || this.draggedRowIndex === null) return;
       const t = this.getRowIndex(e);
       if (t < 0 || t === this.draggedRowIndex) return;
-      const i = e.getBoundingClientRect(), n = i.top + i.height / 2, o = r.clientY < n;
+      const i = e.getBoundingClientRect(), s = i.top + i.height / 2, o = r.clientY < s;
       this.dropRowIndex = o ? t : t + 1, e.classList.add("drop-target"), e.classList.toggle("drop-before", o), e.classList.toggle("drop-after", !o);
     }), e.addEventListener("dragleave", () => {
       e.classList.remove("drop-target", "drop-before", "drop-after");
@@ -512,8 +519,8 @@ class A extends y {
       const t = this.draggedRowIndex;
       let i = this.dropRowIndex;
       if (!(!this.isDragging || t === null || i === null) && (i > t && i--, t !== i)) {
-        const o = this.sourceRows[t], s = i < t ? "up" : "down";
-        (!this.config.canMove || this.config.canMove(o, t, i, s)) && this.executeMove(o, t, i, "drag");
+        const o = this.sourceRows[t], n = i < t ? "up" : "down";
+        (!this.config.canMove || this.config.canMove(o, t, i, n)) && this.executeMove(o, t, i, "drag");
       }
     });
   }
@@ -521,14 +528,14 @@ class A extends y {
    * Handle debounced keyboard moves.
    * Rows move immediately for visual feedback, but the event emission is debounced.
    */
-  handleKeyboardMove(e, r, t, i, n) {
+  handleKeyboardMove(e, r, t, i, s) {
     this.pendingMove ? this.pendingMove.currentIndex = t : this.pendingMove = {
       originalIndex: r,
       currentIndex: t,
       row: e
-    }, this.lastFocusCol = n;
-    const o = this.grid, s = [...o._rows ?? this.sourceRows], [l] = s.splice(r, 1);
-    s.splice(t, 0, l), o._rows = s, o._focusRow = t, o._focusCol = n, o.refreshVirtualWindow(!0), h(o), this.clearDebounceTimer(), this.debounceTimer = setTimeout(() => {
+    }, this.lastFocusCol = s;
+    const o = this.grid, n = [...o._rows ?? this.sourceRows], [c] = n.splice(r, 1);
+    n.splice(t, 0, c), o._rows = n, o._focusRow = t, o._focusCol = s, o.refreshVirtualWindow(!0), p(o), this.clearDebounceTimer(), this.debounceTimer = setTimeout(() => {
       this.flushPendingMove();
     }, this.config.debounceMs ?? 300);
   }
@@ -548,26 +555,79 @@ class A extends y {
       source: "keyboard"
     };
     if (this.emitCancelable("row-move", i)) {
-      const o = [...this.sourceRows], [s] = o.splice(r, 1);
-      o.splice(e, 0, s);
-      const l = this.grid;
-      l._rows = o, l._focusRow = e, l._focusCol = this.lastFocusCol, l.refreshVirtualWindow(!0), h(l);
+      const o = [...this.sourceRows], [n] = o.splice(r, 1);
+      o.splice(e, 0, n);
+      const c = this.grid;
+      c._rows = o, c._focusRow = e, c._focusCol = this.lastFocusCol, c.refreshVirtualWindow(!0), p(c);
     }
   }
   /**
    * Execute a row move and emit the event.
    */
   executeMove(e, r, t, i) {
-    const n = [...this.sourceRows], [o] = n.splice(r, 1);
-    n.splice(t, 0, o);
-    const s = {
+    const s = [...this.sourceRows], [o] = s.splice(r, 1);
+    s.splice(t, 0, o);
+    const n = {
       row: e,
       fromIndex: r,
       toIndex: t,
-      rows: n,
+      rows: s,
       source: i
     };
-    this.emitCancelable("row-move", s) || (this.grid.rows = n);
+    if (!this.emitCancelable("row-move", n))
+      if (this.animationType === "flip" && this.gridElement) {
+        const a = this.captureRowPositions();
+        this.grid.rows = s, requestAnimationFrame(() => {
+          this.gridElement.offsetHeight, this.animateFLIP(a, r, t);
+        });
+      } else
+        this.grid.rows = s;
+  }
+  /**
+   * Capture row positions before reorder.
+   * Maps visual row index to its top position.
+   */
+  captureRowPositions() {
+    const e = /* @__PURE__ */ new Map();
+    return this.gridElement?.querySelectorAll(".data-grid-row").forEach((r) => {
+      const t = this.getRowIndex(r);
+      t >= 0 && e.set(t, r.getBoundingClientRect().top);
+    }), e;
+  }
+  /**
+   * Apply FLIP animation for row reorder.
+   * Uses CSS transitions - JS sets initial transform and toggles class.
+   * @param oldPositions - Row positions captured before DOM change
+   * @param fromIndex - Original index of moved row
+   * @param toIndex - New index of moved row
+   */
+  animateFLIP(e, r, t) {
+    const i = this.gridElement;
+    if (!i || e.size === 0) return;
+    const s = Math.min(r, t), o = Math.max(r, t), n = [];
+    if (i.querySelectorAll(".data-grid-row").forEach((a) => {
+      const u = a, d = this.getRowIndex(u);
+      if (d < 0 || d < s || d > o) return;
+      let g;
+      d === t ? g = r : r < t ? g = d + 1 : g = d - 1;
+      const h = e.get(g);
+      if (h === void 0) return;
+      const w = u.getBoundingClientRect().top, f = h - w;
+      Math.abs(f) > 1 && n.push({ el: u, deltaY: f });
+    }), n.length === 0) return;
+    n.forEach(({ el: a, deltaY: u }) => {
+      a.style.transform = `translateY(${u}px)`;
+    }), i.offsetHeight;
+    const c = this.animationDuration;
+    requestAnimationFrame(() => {
+      n.forEach(({ el: a }) => {
+        a.classList.add("flip-animating"), a.style.transform = "";
+      }), setTimeout(() => {
+        n.forEach(({ el: a }) => {
+          a.style.transform = "", a.classList.remove("flip-animating");
+        });
+      }, c + 50);
+    });
   }
   /**
    * Get the row index from a row element by checking data-row attribute on cells.
@@ -594,7 +654,7 @@ class A extends y {
   // #endregion
 }
 export {
-  L as ROW_DRAG_HANDLE_FIELD,
-  A as RowReorderPlugin
+  A as ROW_DRAG_HANDLE_FIELD,
+  L as RowReorderPlugin
 };
 //# sourceMappingURL=index.js.map