@toolbox-web/grid 1.6.2 → 1.8.0

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

@@ -5,27 +5,27 @@ const m = 'input,select,textarea,[contenteditable="true"],[contenteditable=""],[
 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) {
+function b(l, e) {
   if (l._virtualization?.enabled) {
-    const { rowHeight: o, container: n, viewportEl: c } = l._virtualization, a = n, u = c?.clientHeight ?? a?.clientHeight ?? 0;
+    const { rowHeight: i, 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 d = l._focusRow * i;
+      d < a.scrollTop ? a.scrollTop = d : d + i > a.scrollTop + u && (a.scrollTop = d - u + i);
     }
   }
-  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 = l._activeEditRows !== void 0 && l._activeEditRows !== -1;
+  t || l.refreshVirtualWindow(!1), v(l._bodyEl), Array.from(l._bodyEl.querySelectorAll('[aria-selected="true"]')).forEach((i) => {
+    i.setAttribute("aria-selected", "false");
   });
-  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) {
+  const r = l._focusRow, o = l._virtualization.start ?? 0, s = l._virtualization.end ?? l._rows.length;
+  if (r >= o && r < s) {
+    const i = l._bodyEl.querySelectorAll(".data-grid-row")[r - o];
+    let n = i?.children[l._focusCol];
+    if ((!n || !n.classList?.contains("cell")) && (n = i?.querySelector(`.cell[data-col="${l._focusCol}"]`) ?? i?.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 (c && n && !t) {
+        const a = l._getHorizontalScrollOffsets?.(i ?? 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);
@@ -48,7 +48,7 @@ function p(l, 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 = {
+const p = '<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>', _ = {
   expand: "▶",
   collapse: "▼",
   sortAsc: "▲",
@@ -57,11 +57,11 @@ const b = '<svg viewBox="0 0 16 16" width="12" height="12"><path fill="currentCo
   submenuArrow: "▶",
   dragHandle: "⋮⋮",
   toolPanel: "☰",
-  filter: b,
-  filterActive: b,
+  filter: p,
+  filterActive: p,
   print: "🖨️"
 };
-class _ {
+class y {
   /**
    * Plugin dependencies - declare other plugins this one requires.
    *
@@ -188,16 +188,73 @@ class _ {
   /**
    * Emit a custom event from the grid.
    */
-  emit(e, r) {
-    this.grid?.dispatchEvent?.(new CustomEvent(e, { detail: r, bubbles: !0 }));
+  emit(e, t) {
+    this.grid?.dispatchEvent?.(new CustomEvent(e, { detail: t, bubbles: !0 }));
   }
   /**
    * Emit a cancelable custom event from the grid.
    * @returns `true` if the event was cancelled (preventDefault called), `false` otherwise
    */
-  emitCancelable(e, r) {
-    const t = new CustomEvent(e, { detail: r, bubbles: !0, cancelable: !0 });
-    return this.grid?.dispatchEvent?.(t), t.defaultPrevented;
+  emitCancelable(e, t) {
+    const r = new CustomEvent(e, { detail: t, bubbles: !0, cancelable: !0 });
+    return this.grid?.dispatchEvent?.(r), r.defaultPrevented;
+  }
+  // =========================================================================
+  // Event Bus - Plugin-to-Plugin Communication
+  // =========================================================================
+  /**
+   * Subscribe to an event from another plugin.
+   * The subscription is automatically cleaned up when this plugin is detached.
+   *
+   * @category Plugin Development
+   * @param eventType - The event type to listen for (e.g., 'filter-change')
+   * @param callback - The callback to invoke when the event is emitted
+   *
+   * @example
+   * ```typescript
+   * // In attach() or other initialization
+   * this.on('filter-change', (detail) => {
+   *   console.log('Filter changed:', detail);
+   * });
+   * ```
+   */
+  on(e, t) {
+    this.grid?._pluginManager?.subscribe(this, e, t);
+  }
+  /**
+   * Unsubscribe from a plugin event.
+   *
+   * @category Plugin Development
+   * @param eventType - The event type to stop listening for
+   *
+   * @example
+   * ```typescript
+   * this.off('filter-change');
+   * ```
+   */
+  off(e) {
+    this.grid?._pluginManager?.unsubscribe(this, e);
+  }
+  /**
+   * Emit an event to other plugins via the Event Bus.
+   * This is for inter-plugin communication only; it does NOT dispatch DOM events.
+   * Use `emit()` to dispatch DOM events that external consumers can listen to.
+   *
+   * @category Plugin Development
+   * @param eventType - The event type to emit (should be declared in manifest.events)
+   * @param detail - The event payload
+   *
+   * @example
+   * ```typescript
+   * // Emit to other plugins (not DOM)
+   * this.emitPluginEvent('filter-change', { field: 'name', value: 'Alice' });
+   *
+   * // For DOM events that consumers can addEventListener to:
+   * this.emit('filter-change', { field: 'name', value: 'Alice' });
+   * ```
+   */
+  emitPluginEvent(e, t) {
+    this.grid?._pluginManager?.emitPluginEvent(e, t);
   }
   /**
    * Request a re-render of the grid.
@@ -285,7 +342,7 @@ class _ {
    */
   get gridIcons() {
     const e = this.grid?.gridConfig?.icons ?? {};
-    return { ...y, ...e };
+    return { ..._, ...e };
   }
   // #region Animation Helpers
   /**
@@ -308,8 +365,8 @@ class _ {
     const e = this.grid?.effectiveConfig?.animation?.mode ?? "reduced-motion";
     if (e === !1 || e === "off") return !1;
     if (e === !0 || e === "on") return !0;
-    const r = this.gridElement;
-    return r ? getComputedStyle(r).getPropertyValue("--tbw-animation-enabled").trim() !== "0" : !0;
+    const t = this.gridElement;
+    return t ? getComputedStyle(t).getPropertyValue("--tbw-animation-enabled").trim() !== "0" : !0;
   }
   /**
    * Get the animation duration in milliseconds from CSS variable.
@@ -326,8 +383,8 @@ class _ {
   get animationDuration() {
     const e = this.gridElement;
     if (e) {
-      const r = getComputedStyle(e).getPropertyValue("--tbw-animation-duration").trim(), t = parseInt(r, 10);
-      if (!isNaN(t)) return t;
+      const t = getComputedStyle(e).getPropertyValue("--tbw-animation-duration").trim(), r = parseInt(t, 10);
+      if (!isNaN(r)) return r;
     }
     return 200;
   }
@@ -340,8 +397,8 @@ class _ {
    * @param pluginOverride - Optional plugin-level override
    * @returns The resolved icon value
    */
-  resolveIcon(e, r) {
-    return r !== void 0 ? r : this.gridIcons[e];
+  resolveIcon(e, t) {
+    return t !== void 0 ? t : this.gridIcons[e];
   }
   /**
    * Set an icon value on an element.
@@ -350,8 +407,8 @@ class _ {
    * @param element - The element to set the icon on
    * @param icon - The icon value (string or HTMLElement)
    */
-  setIcon(e, r) {
-    typeof r == "string" ? e.innerHTML = r : r instanceof HTMLElement && (e.innerHTML = "", e.appendChild(r.cloneNode(!0)));
+  setIcon(e, t) {
+    typeof t == "string" ? e.innerHTML = t : t instanceof HTMLElement && (e.innerHTML = "", e.appendChild(t.cloneNode(!0)));
   }
   /**
    * Log a warning message.
@@ -362,7 +419,7 @@ class _ {
   // #endregion
 }
 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 _ {
+class L extends y {
   /** @internal */
   name = "rowReorder";
   /** @internal */
@@ -405,7 +462,7 @@ class L extends _ {
   processColumns(e) {
     if (!this.config.showDragHandle)
       return [...e];
-    const r = {
+    const t = {
       field: A,
       header: "",
       width: this.config.dragHandleWidth ?? 40,
@@ -418,25 +475,25 @@ class L extends _ {
         utility: !0
       },
       viewRenderer: () => {
-        const t = document.createElement("div");
-        return t.className = "dg-row-drag-handle", t.setAttribute("aria-label", "Drag to reorder"), t.setAttribute("role", "button"), t.setAttribute("tabindex", "-1"), t.draggable = !0, this.setIcon(t, this.resolveIcon("dragHandle")), t;
+        const r = document.createElement("div");
+        return r.className = "dg-row-drag-handle", r.setAttribute("aria-label", "Drag to reorder"), r.setAttribute("role", "button"), r.setAttribute("tabindex", "-1"), r.draggable = !0, this.setIcon(r, this.resolveIcon("dragHandle")), r;
       }
     };
-    return this.config.dragHandlePosition === "right" ? [...e, r] : [r, ...e];
+    return this.config.dragHandlePosition === "right" ? [...e, t] : [t, ...e];
   }
   /** @internal */
   afterRender() {
     if (!this.config.showDragHandle) return;
     const e = this.gridElement;
     if (!e) return;
-    e.querySelectorAll(".dg-row-drag-handle").forEach((i) => {
-      const s = i;
+    e.querySelectorAll(".dg-row-drag-handle").forEach((o) => {
+      const s = o;
       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 s = i;
+      const i = s.closest(".data-grid-row");
+      i && this.setupHandleDragListeners(s, i);
+    }), e.querySelectorAll(".data-grid-row").forEach((o) => {
+      const s = o;
       s.getAttribute("data-drop-bound") || (s.setAttribute("data-drop-bound", "true"), this.setupRowDropListeners(s));
     });
   }
@@ -447,13 +504,13 @@ class L extends _ {
   onKeyDown(e) {
     if (!this.config.enableKeyboard || !e.ctrlKey || e.key !== "ArrowUp" && e.key !== "ArrowDown")
       return;
-    const r = this.grid, t = r._focusRow, i = r._rows ?? this.sourceRows;
-    if (t < 0 || t >= i.length) return;
-    const s = e.key === "ArrowUp" ? "up" : "down", o = s === "up" ? t - 1 : t + 1;
-    if (o < 0 || o >= i.length) return;
-    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;
+    const t = this.grid, r = t._focusRow, o = t._rows ?? this.sourceRows;
+    if (r < 0 || r >= o.length) return;
+    const s = e.key === "ArrowUp" ? "up" : "down", i = s === "up" ? r - 1 : r + 1;
+    if (i < 0 || i >= o.length) return;
+    const n = o[r];
+    if (!(this.config.canMove && !this.config.canMove(n, r, i, s)))
+      return this.handleKeyboardMove(n, r, i, s, t._focusCol), e.preventDefault(), e.stopPropagation(), !0;
   }
   /**
    * Flush pending keyboard moves when user clicks a cell.
@@ -470,33 +527,33 @@ class L extends _ {
    * @param fromIndex - Current index of the row
    * @param toIndex - Target index
    */
-  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", s = t[e];
-    this.config.canMove && !this.config.canMove(s, e, r, i) || this.executeMove(s, e, r, "keyboard");
+  moveRow(e, t) {
+    const r = [...this.sourceRows];
+    if (e < 0 || e >= r.length || t < 0 || t >= r.length || e === t) return;
+    const o = t < e ? "up" : "down", s = r[e];
+    this.config.canMove && !this.config.canMove(s, e, t, o) || this.executeMove(s, e, t, "keyboard");
   }
   /**
    * Check if a row can be moved to a position.
    * @param fromIndex - Current index of the row
    * @param toIndex - Target index
    */
-  canMoveRow(e, r) {
-    const t = this.sourceRows;
-    if (e < 0 || e >= t.length || r < 0 || r >= t.length || e === r) return !1;
+  canMoveRow(e, t) {
+    const r = this.sourceRows;
+    if (e < 0 || e >= r.length || t < 0 || t >= r.length || e === t) return !1;
     if (!this.config.canMove) return !0;
-    const i = r < e ? "up" : "down";
-    return this.config.canMove(t[e], e, r, i);
+    const o = t < e ? "up" : "down";
+    return this.config.canMove(r[e], e, t, o);
   }
   // #endregion
   // #region Private Methods
   /**
    * Set up drag start/end listeners on the drag handle element.
    */
-  setupHandleDragListeners(e, r) {
-    e.addEventListener("dragstart", (t) => {
-      const i = this.getRowIndex(r);
-      i < 0 || (this.isDragging = !0, this.draggedRowIndex = i, t.dataTransfer && (t.dataTransfer.effectAllowed = "move", t.dataTransfer.setData("text/plain", String(i))), r.classList.add("dragging"));
+  setupHandleDragListeners(e, t) {
+    e.addEventListener("dragstart", (r) => {
+      const o = this.getRowIndex(t);
+      o < 0 || (this.isDragging = !0, this.draggedRowIndex = o, r.dataTransfer && (r.dataTransfer.effectAllowed = "move", r.dataTransfer.setData("text/plain", String(o))), t.classList.add("dragging"));
     }), e.addEventListener("dragend", () => {
       this.isDragging = !1, this.draggedRowIndex = null, this.dropRowIndex = null, this.clearDragClasses();
     });
@@ -506,21 +563,21 @@ class L extends _ {
    * All rows are valid drop targets during drag operations.
    */
   setupRowDropListeners(e) {
-    e.addEventListener("dragover", (r) => {
-      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(), 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("dragover", (t) => {
+      if (t.preventDefault(), !this.isDragging || this.draggedRowIndex === null) return;
+      const r = this.getRowIndex(e);
+      if (r < 0 || r === this.draggedRowIndex) return;
+      const o = e.getBoundingClientRect(), s = o.top + o.height / 2, i = t.clientY < s;
+      this.dropRowIndex = i ? r : r + 1, e.classList.add("drop-target"), e.classList.toggle("drop-before", i), e.classList.toggle("drop-after", !i);
     }), e.addEventListener("dragleave", () => {
       e.classList.remove("drop-target", "drop-before", "drop-after");
-    }), e.addEventListener("drop", (r) => {
-      r.preventDefault();
-      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], n = i < t ? "up" : "down";
-        (!this.config.canMove || this.config.canMove(o, t, i, n)) && this.executeMove(o, t, i, "drag");
+    }), e.addEventListener("drop", (t) => {
+      t.preventDefault();
+      const r = this.draggedRowIndex;
+      let o = this.dropRowIndex;
+      if (!(!this.isDragging || r === null || o === null) && (o > r && o--, r !== o)) {
+        const i = this.sourceRows[r], n = o < r ? "up" : "down";
+        (!this.config.canMove || this.config.canMove(i, r, o, n)) && this.executeMove(i, r, o, "drag");
       }
     });
   }
@@ -528,14 +585,14 @@ class L extends _ {
    * Handle debounced keyboard moves.
    * Rows move immediately for visual feedback, but the event emission is debounced.
    */
-  handleKeyboardMove(e, r, t, i, s) {
-    this.pendingMove ? this.pendingMove.currentIndex = t : this.pendingMove = {
-      originalIndex: r,
-      currentIndex: t,
+  handleKeyboardMove(e, t, r, o, s) {
+    this.pendingMove ? this.pendingMove.currentIndex = r : this.pendingMove = {
+      originalIndex: t,
+      currentIndex: r,
       row: e
     }, 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(() => {
+    const i = this.grid, n = [...i._rows ?? this.sourceRows], [c] = n.splice(t, 1);
+    n.splice(r, 0, c), i._rows = n, i._focusRow = r, i._focusCol = s, i.refreshVirtualWindow(!0), b(i), this.clearDebounceTimer(), this.debounceTimer = setTimeout(() => {
       this.flushPendingMove();
     }, this.config.debounceMs ?? 300);
   }
@@ -545,40 +602,40 @@ class L extends _ {
    */
   flushPendingMove() {
     if (this.clearDebounceTimer(), !this.pendingMove) return;
-    const { originalIndex: e, currentIndex: r, row: t } = this.pendingMove;
-    if (this.pendingMove = null, e === r) return;
-    const i = {
-      row: t,
+    const { originalIndex: e, currentIndex: t, row: r } = this.pendingMove;
+    if (this.pendingMove = null, e === t) return;
+    const o = {
+      row: r,
       fromIndex: e,
-      toIndex: r,
+      toIndex: t,
       rows: [...this.sourceRows],
       source: "keyboard"
     };
-    if (this.emitCancelable("row-move", i)) {
-      const o = [...this.sourceRows], [n] = o.splice(r, 1);
-      o.splice(e, 0, n);
+    if (this.emitCancelable("row-move", o)) {
+      const i = [...this.sourceRows], [n] = i.splice(t, 1);
+      i.splice(e, 0, n);
       const c = this.grid;
-      c._rows = o, c._focusRow = e, c._focusCol = this.lastFocusCol, c.refreshVirtualWindow(!0), p(c);
+      c._rows = i, c._focusRow = e, c._focusCol = this.lastFocusCol, c.refreshVirtualWindow(!0), b(c);
     }
   }
   /**
    * Execute a row move and emit the event.
    */
-  executeMove(e, r, t, i) {
-    const s = [...this.sourceRows], [o] = s.splice(r, 1);
-    s.splice(t, 0, o);
+  executeMove(e, t, r, o) {
+    const s = [...this.sourceRows], [i] = s.splice(t, 1);
+    s.splice(r, 0, i);
     const n = {
       row: e,
-      fromIndex: r,
-      toIndex: t,
+      fromIndex: t,
+      toIndex: r,
       rows: s,
-      source: i
+      source: o
     };
     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);
+          this.gridElement.offsetHeight, this.animateFLIP(a, t, r);
         });
       } else
         this.grid.rows = s;
@@ -589,9 +646,9 @@ class L extends _ {
    */
   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);
+    return this.gridElement?.querySelectorAll(".data-grid-row").forEach((t) => {
+      const r = this.getRowIndex(t);
+      r >= 0 && e.set(r, t.getBoundingClientRect().top);
     }), e;
   }
   /**
@@ -601,15 +658,15 @@ class L extends _ {
    * @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) => {
+  animateFLIP(e, t, r) {
+    const o = this.gridElement;
+    if (!o || e.size === 0) return;
+    const s = Math.min(t, r), i = Math.max(t, r), n = [];
+    if (o.querySelectorAll(".data-grid-row").forEach((a) => {
       const u = a, d = this.getRowIndex(u);
-      if (d < 0 || d < s || d > o) return;
+      if (d < 0 || d < s || d > i) return;
       let g;
-      d === t ? g = r : r < t ? g = d + 1 : g = d - 1;
+      d === r ? g = t : t < r ? g = d + 1 : g = d - 1;
       const h = e.get(g);
       if (h === void 0) return;
       const w = u.getBoundingClientRect().top, f = h - w;
@@ -617,7 +674,7 @@ class L extends _ {
     }), n.length === 0) return;
     n.forEach(({ el: a, deltaY: u }) => {
       a.style.transform = `translateY(${u}px)`;
-    }), i.offsetHeight;
+    }), o.offsetHeight;
     const c = this.animationDuration;
     requestAnimationFrame(() => {
       n.forEach(({ el: a }) => {
@@ -634,8 +691,8 @@ class L extends _ {
    * This is consistent with how other plugins retrieve row indices.
    */
   getRowIndex(e) {
-    const r = e.querySelector(".cell[data-row]");
-    return r ? parseInt(r.getAttribute("data-row") ?? "-1", 10) : -1;
+    const t = e.querySelector(".cell[data-row]");
+    return t ? parseInt(t.getAttribute("data-row") ?? "-1", 10) : -1;
   }
   /**
    * Clear all drag-related classes from rows.