@arcadeai/design-system 3.39.1 → 3.39.2

package/dist/components/ui/atoms/virtualized-grid.js

@@ -1,85 +1,85 @@
-import { jsx as x } from "react/jsx-runtime";
+import { jsx as M } from "react/jsx-runtime";
 import * as w from "react";
-import { useRef as F, useState as k, useEffect as T, useMemo as D } from "react";
-import { flushSync as N } from "react-dom";
-function y(r, l, e) {
-  let s = e.initialDeps ?? [], t, n = !0;
+import { useRef as _, useState as F, useEffect as T, useMemo as k } from "react";
+import { flushSync as D } from "react-dom";
+function x(r, l, e) {
+  let t = e.initialDeps ?? [], s, n = !0;
   function o() {
-    var i, h, u;
+    var i, a, u;
     let c;
     e.key && ((i = e.debug) != null && i.call(e)) && (c = Date.now());
-    const v = r();
-    if (!(v.length !== s.length || v.some((b, f) => s[f] !== b)))
-      return t;
-    s = v;
-    let g;
-    if (e.key && ((h = e.debug) != null && h.call(e)) && (g = Date.now()), t = l(...v), e.key && ((u = e.debug) != null && u.call(e))) {
-      const b = Math.round((Date.now() - c) * 100) / 100, f = Math.round((Date.now() - g) * 100) / 100, m = f / 16, p = (d, E) => {
-        for (d = String(d); d.length < E; )
+    const p = r();
+    if (!(p.length !== t.length || p.some((E, m) => t[m] !== E)))
+      return s;
+    t = p;
+    let v;
+    if (e.key && ((a = e.debug) != null && a.call(e)) && (v = Date.now()), s = l(...p), e.key && ((u = e.debug) != null && u.call(e))) {
+      const E = Math.round((Date.now() - c) * 100) / 100, m = Math.round((Date.now() - v) * 100) / 100, f = m / 16, g = (d, b) => {
+        for (d = String(d); d.length < b; )
           d = " " + d;
         return d;
       };
       console.info(
-        `%c⏱ ${p(f, 5)} /${p(b, 5)} ms`,
+        `%c⏱ ${g(m, 5)} /${g(E, 5)} ms`,
         `
             font-size: .6rem;
             font-weight: bold;
             color: hsl(${Math.max(
           0,
-          Math.min(120 - 120 * m, 120)
+          Math.min(120 - 120 * f, 120)
         )}deg 100% 31%);`,
         e?.key
       );
     }
-    return e?.onChange && !(n && e.skipInitialOnChange) && e.onChange(t), n = !1, t;
+    return e?.onChange && !(n && e.skipInitialOnChange) && e.onChange(s), n = !1, s;
   }
   return o.updateDeps = (i) => {
-    s = i;
+    t = i;
   }, o;
 }
-function O(r, l) {
+function I(r, l) {
   if (r === void 0)
     throw new Error("Unexpected undefined");
   return r;
 }
-const W = (r, l) => Math.abs(r - l) < 1.01, V = (r, l, e) => {
-  let s;
-  return function(...t) {
-    r.clearTimeout(s), s = r.setTimeout(() => l.apply(this, t), e);
+const N = (r, l) => Math.abs(r - l) < 1.01, W = (r, l, e) => {
+  let t;
+  return function(...s) {
+    r.clearTimeout(t), t = r.setTimeout(() => l.apply(this, s), e);
   };
 }, z = (r) => {
   const { offsetWidth: l, offsetHeight: e } = r;
   return { width: l, height: e };
-}, L = (r) => r, j = (r) => {
-  const l = Math.max(r.startIndex - r.overscan, 0), e = Math.min(r.endIndex + r.overscan, r.count - 1), s = [];
-  for (let t = l; t <= e; t++)
-    s.push(t);
-  return s;
-}, B = (r, l) => {
+}, L = (r) => r, V = (r) => {
+  const l = Math.max(r.startIndex - r.overscan, 0), e = Math.min(r.endIndex + r.overscan, r.count - 1), t = [];
+  for (let s = l; s <= e; s++)
+    t.push(s);
+  return t;
+}, j = (r, l) => {
   const e = r.scrollElement;
   if (!e)
     return;
-  const s = r.targetWindow;
-  if (!s)
+  const t = r.targetWindow;
+  if (!t)
     return;
-  const t = (o) => {
-    const { width: i, height: h } = o;
-    l({ width: Math.round(i), height: Math.round(h) });
+  const s = (o) => {
+    const { width: i, height: a } = o;
+    l({ width: Math.round(i), height: Math.round(a) });
   };
-  if (t(z(e)), !s.ResizeObserver)
+  if (s(z(e)), !t.ResizeObserver)
     return () => {
     };
-  const n = new s.ResizeObserver((o) => {
+  const n = new t.ResizeObserver((o) => {
     const i = () => {
-      const h = o[0];
-      if (h?.borderBoxSize) {
-        const u = h.borderBoxSize[0];
+      const a = o[0];
+      if (a?.borderBoxSize) {
+        const u = a.borderBoxSize[0];
         if (u) {
-          t({ width: u.inlineSize, height: u.blockSize });
+          s({ width: u.inlineSize, height: u.blockSize });
           return;
         }
       }
-      t(z(e));
+      s(z(e));
     };
     r.options.useAnimationFrameWithResizeObserver ? requestAnimationFrame(i) : i();
   });
@@ -88,79 +88,90 @@ const W = (r, l) => Math.abs(r - l) < 1.01, V = (r, l, e) => {
   };
 }, C = {
   passive: !0
-}, I = typeof window > "u" ? !0 : "onscrollend" in window, P = (r, l) => {
+}, y = typeof window > "u" ? !0 : "onscrollend" in window, B = (r, l) => {
   const e = r.scrollElement;
   if (!e)
     return;
-  const s = r.targetWindow;
-  if (!s)
+  const t = r.targetWindow;
+  if (!t)
     return;
-  let t = 0;
-  const n = r.options.useScrollendEvent && I ? () => {
-  } : V(
-    s,
+  let s = 0;
+  const n = r.options.useScrollendEvent && y ? () => {
+  } : W(
+    t,
     () => {
-      l(t, !1);
+      l(s, !1);
     },
     r.options.isScrollingResetDelay
   ), o = (c) => () => {
-    const { horizontal: v, isRtl: a } = r.options;
-    t = v ? e.scrollLeft * (a && -1 || 1) : e.scrollTop, n(), l(t, c);
-  }, i = o(!0), h = o(!1);
+    const { horizontal: p, isRtl: h } = r.options;
+    s = p ? e.scrollLeft * (h && -1 || 1) : e.scrollTop, n(), l(s, c);
+  }, i = o(!0), a = o(!1);
   e.addEventListener("scroll", i, C);
-  const u = r.options.useScrollendEvent && I;
-  return u && e.addEventListener("scrollend", h, C), () => {
-    e.removeEventListener("scroll", i), u && e.removeEventListener("scrollend", h);
+  const u = r.options.useScrollendEvent && y;
+  return u && e.addEventListener("scrollend", a, C), () => {
+    e.removeEventListener("scroll", i), u && e.removeEventListener("scrollend", a);
   };
-}, $ = (r, l, e) => {
+}, P = (r, l, e) => {
   if (l?.borderBoxSize) {
-    const s = l.borderBoxSize[0];
-    if (s)
+    const t = l.borderBoxSize[0];
+    if (t)
       return Math.round(
-        s[e.options.horizontal ? "inlineSize" : "blockSize"]
+        t[e.options.horizontal ? "inlineSize" : "blockSize"]
       );
   }
   return r[e.options.horizontal ? "offsetWidth" : "offsetHeight"];
 }, H = (r, {
   adjustments: l = 0,
   behavior: e
-}, s) => {
-  var t, n;
+}, t) => {
+  var s, n;
   const o = r + l;
-  (n = (t = s.scrollElement) == null ? void 0 : t.scrollTo) == null || n.call(t, {
-    [s.options.horizontal ? "left" : "top"]: o,
+  (n = (s = t.scrollElement) == null ? void 0 : s.scrollTo) == null || n.call(s, {
+    [t.options.horizontal ? "left" : "top"]: o,
     behavior: e
   });
 };
-class q {
+class $ {
   constructor(l) {
-    this.unsubs = [], this.scrollElement = null, this.targetWindow = null, this.isScrolling = !1, this.currentScrollToIndex = null, this.measurementsCache = [], this.itemSizeCache = /* @__PURE__ */ new Map(), this.laneAssignments = /* @__PURE__ */ new Map(), this.pendingMeasuredCacheIndexes = [], this.prevLanes = void 0, this.lanesChangedFlag = !1, this.lanesSettling = !1, this.scrollRect = null, this.scrollOffset = null, this.scrollDirection = null, this.scrollAdjustments = 0, this.elementsCache = /* @__PURE__ */ new Map(), this.observer = /* @__PURE__ */ (() => {
+    this.unsubs = [], this.scrollElement = null, this.targetWindow = null, this.isScrolling = !1, this.scrollState = null, this.measurementsCache = [], this.itemSizeCache = /* @__PURE__ */ new Map(), this.laneAssignments = /* @__PURE__ */ new Map(), this.pendingMeasuredCacheIndexes = [], this.prevLanes = void 0, this.lanesChangedFlag = !1, this.lanesSettling = !1, this.scrollRect = null, this.scrollOffset = null, this.scrollDirection = null, this.scrollAdjustments = 0, this.elementsCache = /* @__PURE__ */ new Map(), this.now = () => {
+      var e, t, s;
+      return ((s = (t = (e = this.targetWindow) == null ? void 0 : e.performance) == null ? void 0 : t.now) == null ? void 0 : s.call(t)) ?? Date.now();
+    }, this.observer = /* @__PURE__ */ (() => {
       let e = null;
-      const s = () => e || (!this.targetWindow || !this.targetWindow.ResizeObserver ? null : e = new this.targetWindow.ResizeObserver((t) => {
-        t.forEach((n) => {
+      const t = () => e || (!this.targetWindow || !this.targetWindow.ResizeObserver ? null : e = new this.targetWindow.ResizeObserver((s) => {
+        s.forEach((n) => {
           const o = () => {
-            this._measureElement(n.target, n);
+            const i = n.target, a = this.indexFromElement(i);
+            if (!i.isConnected) {
+              this.observer.unobserve(i);
+              return;
+            }
+            this.shouldMeasureDuringScroll(a) && this.resizeItem(
+              a,
+              this.options.measureElement(i, n, this)
+            );
           };
           this.options.useAnimationFrameWithResizeObserver ? requestAnimationFrame(o) : o();
         });
       }));
       return {
         disconnect: () => {
-          var t;
-          (t = s()) == null || t.disconnect(), e = null;
+          var s;
+          (s = t()) == null || s.disconnect(), e = null;
         },
-        observe: (t) => {
+        observe: (s) => {
           var n;
-          return (n = s()) == null ? void 0 : n.observe(t, { box: "border-box" });
+          return (n = t()) == null ? void 0 : n.observe(s, { box: "border-box" });
         },
-        unobserve: (t) => {
+        unobserve: (s) => {
           var n;
-          return (n = s()) == null ? void 0 : n.unobserve(t);
+          return (n = t()) == null ? void 0 : n.unobserve(s);
         }
       };
     })(), this.range = null, this.setOptions = (e) => {
-      Object.entries(e).forEach(([s, t]) => {
-        typeof t > "u" && delete e[s];
+      Object.entries(e).forEach(([t, s]) => {
+        typeof s > "u" && delete e[t];
       }), this.options = {
         debug: !1,
         initialOffset: 0,
@@ -171,10 +182,10 @@ class q {
         scrollPaddingEnd: 0,
         horizontal: !1,
         getItemKey: L,
-        rangeExtractor: j,
+        rangeExtractor: V,
         onChange: () => {
         },
-        measureElement: $,
+        measureElement: P,
         initialRect: { width: 0, height: 0 },
         scrollMargin: 0,
         gap: 0,
@@ -189,9 +200,9 @@ class q {
         ...e
       };
     }, this.notify = (e) => {
-      var s, t;
-      (t = (s = this.options).onChange) == null || t.call(s, this, e);
-    }, this.maybeNotify = y(
+      var t, s;
+      (s = (t = this.options).onChange) == null || s.call(t, this, e);
+    }, this.maybeNotify = x(
       () => (this.calculateRange(), [
         this.isScrolling,
         this.range ? this.range.startIndex : null,
@@ -210,46 +221,46 @@ class q {
         ]
       }
     ), this.cleanup = () => {
-      this.unsubs.filter(Boolean).forEach((e) => e()), this.unsubs = [], this.observer.disconnect(), this.scrollElement = null, this.targetWindow = null;
+      this.unsubs.filter(Boolean).forEach((e) => e()), this.unsubs = [], this.observer.disconnect(), this.rafId != null && this.targetWindow && (this.targetWindow.cancelAnimationFrame(this.rafId), this.rafId = null), this.scrollState = null, this.scrollElement = null, this.targetWindow = null;
     }, this._didMount = () => () => {
       this.cleanup();
     }, this._willUpdate = () => {
       var e;
-      const s = this.options.enabled ? this.options.getScrollElement() : null;
-      if (this.scrollElement !== s) {
-        if (this.cleanup(), !s) {
+      const t = this.options.enabled ? this.options.getScrollElement() : null;
+      if (this.scrollElement !== t) {
+        if (this.cleanup(), !t) {
           this.maybeNotify();
           return;
         }
-        this.scrollElement = s, this.scrollElement && "ownerDocument" in this.scrollElement ? this.targetWindow = this.scrollElement.ownerDocument.defaultView : this.targetWindow = ((e = this.scrollElement) == null ? void 0 : e.window) ?? null, this.elementsCache.forEach((t) => {
-          this.observer.observe(t);
+        this.scrollElement = t, this.scrollElement && "ownerDocument" in this.scrollElement ? this.targetWindow = this.scrollElement.ownerDocument.defaultView : this.targetWindow = ((e = this.scrollElement) == null ? void 0 : e.window) ?? null, this.elementsCache.forEach((s) => {
+          this.observer.observe(s);
         }), this.unsubs.push(
-          this.options.observeElementRect(this, (t) => {
-            this.scrollRect = t, this.maybeNotify();
+          this.options.observeElementRect(this, (s) => {
+            this.scrollRect = s, this.maybeNotify();
           })
         ), this.unsubs.push(
-          this.options.observeElementOffset(this, (t, n) => {
-            this.scrollAdjustments = 0, this.scrollDirection = n ? this.getScrollOffset() < t ? "forward" : "backward" : null, this.scrollOffset = t, this.isScrolling = n, this.maybeNotify();
+          this.options.observeElementOffset(this, (s, n) => {
+            this.scrollAdjustments = 0, this.scrollDirection = n ? this.getScrollOffset() < s ? "forward" : "backward" : null, this.scrollOffset = s, this.isScrolling = n, this.scrollState && this.scheduleScrollReconcile(), this.maybeNotify();
           })
         ), this._scrollToOffset(this.getScrollOffset(), {
           adjustments: void 0,
           behavior: void 0
         });
       }
-    }, this.getSize = () => this.options.enabled ? (this.scrollRect = this.scrollRect ?? this.options.initialRect, this.scrollRect[this.options.horizontal ? "width" : "height"]) : (this.scrollRect = null, 0), this.getScrollOffset = () => this.options.enabled ? (this.scrollOffset = this.scrollOffset ?? (typeof this.options.initialOffset == "function" ? this.options.initialOffset() : this.options.initialOffset), this.scrollOffset) : (this.scrollOffset = null, 0), this.getFurthestMeasurement = (e, s) => {
-      const t = /* @__PURE__ */ new Map(), n = /* @__PURE__ */ new Map();
-      for (let o = s - 1; o >= 0; o--) {
+    }, this.rafId = null, this.getSize = () => this.options.enabled ? (this.scrollRect = this.scrollRect ?? this.options.initialRect, this.scrollRect[this.options.horizontal ? "width" : "height"]) : (this.scrollRect = null, 0), this.getScrollOffset = () => this.options.enabled ? (this.scrollOffset = this.scrollOffset ?? (typeof this.options.initialOffset == "function" ? this.options.initialOffset() : this.options.initialOffset), this.scrollOffset) : (this.scrollOffset = null, 0), this.getFurthestMeasurement = (e, t) => {
+      const s = /* @__PURE__ */ new Map(), n = /* @__PURE__ */ new Map();
+      for (let o = t - 1; o >= 0; o--) {
         const i = e[o];
-        if (t.has(i.lane))
+        if (s.has(i.lane))
           continue;
-        const h = n.get(
+        const a = n.get(
           i.lane
         );
-        if (h == null || i.end > h.end ? n.set(i.lane, i) : i.end < h.end && t.set(i.lane, !0), t.size === this.options.lanes)
+        if (a == null || i.end > a.end ? n.set(i.lane, i) : i.end < a.end && s.set(i.lane, !0), s.size === this.options.lanes)
           break;
       }
       return n.size === this.options.lanes ? Array.from(n.values()).sort((o, i) => o.end === i.end ? o.index - i.index : o.end - i.end)[0] : void 0;
-    }, this.getMeasurementOptions = y(
+    }, this.getMeasurementOptions = x(
       () => [
         this.options.count,
         this.options.paddingStart,
@@ -258,10 +269,10 @@ class q {
         this.options.enabled,
         this.options.lanes
       ],
-      (e, s, t, n, o, i) => (this.prevLanes !== void 0 && this.prevLanes !== i && (this.lanesChangedFlag = !0), this.prevLanes = i, this.pendingMeasuredCacheIndexes = [], {
+      (e, t, s, n, o, i) => (this.prevLanes !== void 0 && this.prevLanes !== i && (this.lanesChangedFlag = !0), this.prevLanes = i, this.pendingMeasuredCacheIndexes = [], {
         count: e,
-        paddingStart: s,
-        scrollMargin: t,
+        paddingStart: t,
+        scrollMargin: s,
         getItemKey: n,
         enabled: o,
         lanes: i
@@ -269,46 +280,46 @@ class q {
       {
         key: !1
       }
-    ), this.getMeasurements = y(
+    ), this.getMeasurements = x(
       () => [this.getMeasurementOptions(), this.itemSizeCache],
-      ({ count: e, paddingStart: s, scrollMargin: t, getItemKey: n, enabled: o, lanes: i }, h) => {
+      ({ count: e, paddingStart: t, scrollMargin: s, getItemKey: n, enabled: o, lanes: i }, a) => {
         if (!o)
           return this.measurementsCache = [], this.itemSizeCache.clear(), this.laneAssignments.clear(), [];
         if (this.laneAssignments.size > e)
-          for (const a of this.laneAssignments.keys())
-            a >= e && this.laneAssignments.delete(a);
-        this.lanesChangedFlag && (this.lanesChangedFlag = !1, this.lanesSettling = !0, this.measurementsCache = [], this.itemSizeCache.clear(), this.laneAssignments.clear(), this.pendingMeasuredCacheIndexes = []), this.measurementsCache.length === 0 && !this.lanesSettling && (this.measurementsCache = this.options.initialMeasurementsCache, this.measurementsCache.forEach((a) => {
-          this.itemSizeCache.set(a.key, a.size);
+          for (const h of this.laneAssignments.keys())
+            h >= e && this.laneAssignments.delete(h);
+        this.lanesChangedFlag && (this.lanesChangedFlag = !1, this.lanesSettling = !0, this.measurementsCache = [], this.itemSizeCache.clear(), this.laneAssignments.clear(), this.pendingMeasuredCacheIndexes = []), this.measurementsCache.length === 0 && !this.lanesSettling && (this.measurementsCache = this.options.initialMeasurementsCache, this.measurementsCache.forEach((h) => {
+          this.itemSizeCache.set(h.key, h.size);
         }));
         const u = this.lanesSettling ? 0 : this.pendingMeasuredCacheIndexes.length > 0 ? Math.min(...this.pendingMeasuredCacheIndexes) : 0;
         this.pendingMeasuredCacheIndexes = [], this.lanesSettling && this.measurementsCache.length === e && (this.lanesSettling = !1);
-        const c = this.measurementsCache.slice(0, u), v = new Array(i).fill(
+        const c = this.measurementsCache.slice(0, u), p = new Array(i).fill(
           void 0
         );
-        for (let a = 0; a < u; a++) {
-          const g = c[a];
-          g && (v[g.lane] = a);
+        for (let h = 0; h < u; h++) {
+          const v = c[h];
+          v && (p[v.lane] = h);
         }
-        for (let a = u; a < e; a++) {
-          const g = n(a), b = this.laneAssignments.get(a);
-          let f, m;
-          if (b !== void 0 && this.options.lanes > 1) {
-            f = b;
-            const S = v[f], M = S !== void 0 ? c[S] : void 0;
-            m = M ? M.end + this.options.gap : s + t;
+        for (let h = u; h < e; h++) {
+          const v = n(h), E = this.laneAssignments.get(h);
+          let m, f;
+          if (E !== void 0 && this.options.lanes > 1) {
+            m = E;
+            const S = p[m], O = S !== void 0 ? c[S] : void 0;
+            f = O ? O.end + this.options.gap : t + s;
           } else {
-            const S = this.options.lanes === 1 ? c[a - 1] : this.getFurthestMeasurement(c, a);
-            m = S ? S.end + this.options.gap : s + t, f = S ? S.lane : a % this.options.lanes, this.options.lanes > 1 && this.laneAssignments.set(a, f);
+            const S = this.options.lanes === 1 ? c[h - 1] : this.getFurthestMeasurement(c, h);
+            f = S ? S.end + this.options.gap : t + s, m = S ? S.lane : h % this.options.lanes, this.options.lanes > 1 && this.laneAssignments.set(h, m);
           }
-          const p = h.get(g), d = typeof p == "number" ? p : this.options.estimateSize(a), E = m + d;
-          c[a] = {
-            index: a,
-            start: m,
+          const g = a.get(v), d = typeof g == "number" ? g : this.options.estimateSize(h), b = f + d;
+          c[h] = {
+            index: h,
+            start: f,
             size: d,
-            end: E,
-            key: g,
-            lane: f
-          }, v[f] = a;
+            end: b,
+            key: v,
+            lane: m
+          }, p[m] = h;
         }
         return this.measurementsCache = c, c;
       },
@@ -316,95 +327,106 @@ class q {
         key: process.env.NODE_ENV !== "production" && "getMeasurements",
         debug: () => this.options.debug
       }
-    ), this.calculateRange = y(
+    ), this.calculateRange = x(
       () => [
         this.getMeasurements(),
         this.getSize(),
         this.getScrollOffset(),
         this.options.lanes
       ],
-      (e, s, t, n) => this.range = e.length > 0 && s > 0 ? U({
+      (e, t, s, n) => this.range = e.length > 0 && t > 0 ? U({
         measurements: e,
-        outerSize: s,
-        scrollOffset: t,
+        outerSize: t,
+        scrollOffset: s,
         lanes: n
       }) : null,
       {
         key: process.env.NODE_ENV !== "production" && "calculateRange",
         debug: () => this.options.debug
       }
-    ), this.getVirtualIndexes = y(
+    ), this.getVirtualIndexes = x(
       () => {
-        let e = null, s = null;
-        const t = this.calculateRange();
-        return t && (e = t.startIndex, s = t.endIndex), this.maybeNotify.updateDeps([this.isScrolling, e, s]), [
+        let e = null, t = null;
+        const s = this.calculateRange();
+        return s && (e = s.startIndex, t = s.endIndex), this.maybeNotify.updateDeps([this.isScrolling, e, t]), [
           this.options.rangeExtractor,
           this.options.overscan,
           this.options.count,
           e,
-          s
+          t
         ];
       },
-      (e, s, t, n, o) => n === null || o === null ? [] : e({
+      (e, t, s, n, o) => n === null || o === null ? [] : e({
         startIndex: n,
         endIndex: o,
-        overscan: s,
-        count: t
+        overscan: t,
+        count: s
       }),
       {
         key: process.env.NODE_ENV !== "production" && "getVirtualIndexes",
         debug: () => this.options.debug
       }
     ), this.indexFromElement = (e) => {
-      const s = this.options.indexAttribute, t = e.getAttribute(s);
-      return t ? parseInt(t, 10) : (console.warn(
-        `Missing attribute name '${s}={index}' on measured element.`
+      const t = this.options.indexAttribute, s = e.getAttribute(t);
+      return s ? parseInt(s, 10) : (console.warn(
+        `Missing attribute name '${t}={index}' on measured element.`
       ), -1);
-    }, this._measureElement = (e, s) => {
-      const t = this.indexFromElement(e), n = this.measurementsCache[t];
-      if (!n)
-        return;
-      const o = n.key, i = this.elementsCache.get(o);
-      i !== e && (i && this.observer.unobserve(i), this.observer.observe(e), this.elementsCache.set(o, e)), e.isConnected && this.resizeItem(t, this.options.measureElement(e, s, this));
-    }, this.resizeItem = (e, s) => {
-      const t = this.measurementsCache[e];
-      if (!t)
-        return;
-      const n = this.itemSizeCache.get(t.key) ?? t.size, o = s - n;
-      o !== 0 && ((this.shouldAdjustScrollPositionOnItemSizeChange !== void 0 ? this.shouldAdjustScrollPositionOnItemSizeChange(t, o, this) : t.start < this.getScrollOffset() + this.scrollAdjustments) && (process.env.NODE_ENV !== "production" && this.options.debug && console.info("correction", o), this._scrollToOffset(this.getScrollOffset(), {
-        adjustments: this.scrollAdjustments += o,
-        behavior: void 0
-      })), this.pendingMeasuredCacheIndexes.push(t.index), this.itemSizeCache = new Map(this.itemSizeCache.set(t.key, s)), this.notify(!1));
+    }, this.shouldMeasureDuringScroll = (e) => {
+      var t;
+      if (!this.scrollState || this.scrollState.behavior !== "smooth")
+        return !0;
+      const s = this.scrollState.index ?? ((t = this.getVirtualItemForOffset(this.scrollState.lastTargetOffset)) == null ? void 0 : t.index);
+      if (s !== void 0 && this.range) {
+        const n = Math.max(
+          this.options.overscan,
+          Math.ceil((this.range.endIndex - this.range.startIndex) / 2)
+        ), o = Math.max(0, s - n), i = Math.min(
+          this.options.count - 1,
+          s + n
+        );
+        return e >= o && e <= i;
+      }
+      return !0;
     }, this.measureElement = (e) => {
       if (!e) {
-        this.elementsCache.forEach((s, t) => {
-          s.isConnected || (this.observer.unobserve(s), this.elementsCache.delete(t));
+        this.elementsCache.forEach((o, i) => {
+          o.isConnected || (this.observer.unobserve(o), this.elementsCache.delete(i));
         });
         return;
       }
-      this._measureElement(e, void 0);
-    }, this.getVirtualItems = y(
+      const t = this.indexFromElement(e), s = this.options.getItemKey(t), n = this.elementsCache.get(s);
+      n !== e && (n && this.observer.unobserve(n), this.observer.observe(e), this.elementsCache.set(s, e)), (!this.isScrolling || this.scrollState) && this.shouldMeasureDuringScroll(t) && this.resizeItem(t, this.options.measureElement(e, void 0, this));
+    }, this.resizeItem = (e, t) => {
+      var s;
+      const n = this.measurementsCache[e];
+      if (!n) return;
+      const o = this.itemSizeCache.get(n.key) ?? n.size, i = t - o;
+      i !== 0 && (((s = this.scrollState) == null ? void 0 : s.behavior) !== "smooth" && (this.shouldAdjustScrollPositionOnItemSizeChange !== void 0 ? this.shouldAdjustScrollPositionOnItemSizeChange(n, i, this) : n.start < this.getScrollOffset() + this.scrollAdjustments) && (process.env.NODE_ENV !== "production" && this.options.debug && console.info("correction", i), this._scrollToOffset(this.getScrollOffset(), {
+        adjustments: this.scrollAdjustments += i,
+        behavior: void 0
+      })), this.pendingMeasuredCacheIndexes.push(n.index), this.itemSizeCache = new Map(this.itemSizeCache.set(n.key, t)), this.notify(!1));
+    }, this.getVirtualItems = x(
       () => [this.getVirtualIndexes(), this.getMeasurements()],
-      (e, s) => {
-        const t = [];
+      (e, t) => {
+        const s = [];
         for (let n = 0, o = e.length; n < o; n++) {
-          const i = e[n], h = s[i];
-          t.push(h);
+          const i = e[n], a = t[i];
+          s.push(a);
         }
-        return t;
+        return s;
       },
       {
         key: process.env.NODE_ENV !== "production" && "getVirtualItems",
         debug: () => this.options.debug
       }
     ), this.getVirtualItemForOffset = (e) => {
-      const s = this.getMeasurements();
-      if (s.length !== 0)
-        return O(
-          s[_(
+      const t = this.getMeasurements();
+      if (t.length !== 0)
+        return I(
+          t[R(
             0,
-            s.length - 1,
-            (t) => O(s[t]).start,
+            t.length - 1,
+            (s) => I(t[s]).start,
             e
           )]
         );
@@ -416,118 +438,135 @@ class q {
         const e = this.scrollElement.document.documentElement;
         return this.options.horizontal ? e.scrollWidth - this.scrollElement.innerWidth : e.scrollHeight - this.scrollElement.innerHeight;
       }
-    }, this.getOffsetForAlignment = (e, s, t = 0) => {
+    }, this.getOffsetForAlignment = (e, t, s = 0) => {
       if (!this.scrollElement) return 0;
       const n = this.getSize(), o = this.getScrollOffset();
-      s === "auto" && (s = e >= o + n ? "end" : "start"), s === "center" ? e += (t - n) / 2 : s === "end" && (e -= n);
+      t === "auto" && (t = e >= o + n ? "end" : "start"), t === "center" ? e += (s - n) / 2 : t === "end" && (e -= n);
       const i = this.getMaxScrollOffset();
       return Math.max(Math.min(i, e), 0);
-    }, this.getOffsetForIndex = (e, s = "auto") => {
+    }, this.getOffsetForIndex = (e, t = "auto") => {
       e = Math.max(0, Math.min(e, this.options.count - 1));
-      const t = this.measurementsCache[e];
-      if (!t)
-        return;
-      const n = this.getSize(), o = this.getScrollOffset();
-      if (s === "auto")
-        if (t.end >= o + n - this.options.scrollPaddingEnd)
-          s = "end";
-        else if (t.start <= o + this.options.scrollPaddingStart)
-          s = "start";
+      const s = this.getSize(), n = this.getScrollOffset(), o = this.measurementsCache[e];
+      if (!o) return;
+      if (t === "auto")
+        if (o.end >= n + s - this.options.scrollPaddingEnd)
+          t = "end";
+        else if (o.start <= n + this.options.scrollPaddingStart)
+          t = "start";
         else
-          return [o, s];
-      if (s === "end" && e === this.options.count - 1)
-        return [this.getMaxScrollOffset(), s];
-      const i = s === "end" ? t.end + this.options.scrollPaddingEnd : t.start - this.options.scrollPaddingStart;
+          return [n, t];
+      if (t === "end" && e === this.options.count - 1)
+        return [this.getMaxScrollOffset(), t];
+      const i = t === "end" ? o.end + this.options.scrollPaddingEnd : o.start - this.options.scrollPaddingStart;
       return [
-        this.getOffsetForAlignment(i, s, t.size),
-        s
+        this.getOffsetForAlignment(i, t, o.size),
+        t
       ];
-    }, this.isDynamicMode = () => this.elementsCache.size > 0, this.scrollToOffset = (e, { align: s = "start", behavior: t } = {}) => {
-      t === "smooth" && this.isDynamicMode() && console.warn(
-        "The `smooth` scroll behavior is not fully supported with dynamic size."
-      ), this._scrollToOffset(this.getOffsetForAlignment(e, s), {
-        adjustments: void 0,
-        behavior: t
-      });
-    }, this.scrollToIndex = (e, { align: s = "auto", behavior: t } = {}) => {
-      t === "smooth" && this.isDynamicMode() && console.warn(
-        "The `smooth` scroll behavior is not fully supported with dynamic size."
-      ), e = Math.max(0, Math.min(e, this.options.count - 1)), this.currentScrollToIndex = e;
-      let n = 0;
-      const o = 10, i = (u) => {
-        if (!this.targetWindow) return;
-        const c = this.getOffsetForIndex(e, u);
-        if (!c) {
-          console.warn("Failed to get offset for index:", e);
-          return;
-        }
-        const [v, a] = c;
-        this._scrollToOffset(v, { adjustments: void 0, behavior: t }), this.targetWindow.requestAnimationFrame(() => {
-          if (!this.targetWindow) return;
-          const g = () => {
-            if (this.currentScrollToIndex !== e) return;
-            const b = this.getScrollOffset(), f = this.getOffsetForIndex(e, a);
-            if (!f) {
-              console.warn("Failed to get offset for index:", e);
-              return;
-            }
-            W(f[0], b) || h(a);
-          };
-          this.isDynamicMode() ? this.targetWindow.requestAnimationFrame(g) : g();
-        });
-      }, h = (u) => {
-        this.targetWindow && this.currentScrollToIndex === e && (n++, n < o ? (process.env.NODE_ENV !== "production" && this.options.debug && console.info("Schedule retry", n, o), this.targetWindow.requestAnimationFrame(() => i(u))) : console.warn(
-          `Failed to scroll to index ${e} after ${o} attempts.`
-        ));
-      };
-      i(s);
-    }, this.scrollBy = (e, { behavior: s } = {}) => {
-      s === "smooth" && this.isDynamicMode() && console.warn(
-        "The `smooth` scroll behavior is not fully supported with dynamic size."
-      ), this._scrollToOffset(this.getScrollOffset() + e, {
-        adjustments: void 0,
-        behavior: s
-      });
+    }, this.scrollToOffset = (e, { align: t = "start", behavior: s = "auto" } = {}) => {
+      const n = this.getOffsetForAlignment(e, t), o = this.now();
+      this.scrollState = {
+        index: null,
+        align: t,
+        behavior: s,
+        startedAt: o,
+        lastTargetOffset: n,
+        stableFrames: 0
+      }, this._scrollToOffset(n, { adjustments: void 0, behavior: s }), this.scheduleScrollReconcile();
+    }, this.scrollToIndex = (e, {
+      align: t = "auto",
+      behavior: s = "auto"
+    } = {}) => {
+      e = Math.max(0, Math.min(e, this.options.count - 1));
+      const n = this.getOffsetForIndex(e, t);
+      if (!n)
+        return;
+      const [o, i] = n, a = this.now();
+      this.scrollState = {
+        index: e,
+        align: i,
+        behavior: s,
+        startedAt: a,
+        lastTargetOffset: o,
+        stableFrames: 0
+      }, this._scrollToOffset(o, { adjustments: void 0, behavior: s }), this.scheduleScrollReconcile();
+    }, this.scrollBy = (e, { behavior: t = "auto" } = {}) => {
+      const s = this.getScrollOffset() + e, n = this.now();
+      this.scrollState = {
+        index: null,
+        align: "start",
+        behavior: t,
+        startedAt: n,
+        lastTargetOffset: s,
+        stableFrames: 0
+      }, this._scrollToOffset(s, { adjustments: void 0, behavior: t }), this.scheduleScrollReconcile();
     }, this.getTotalSize = () => {
       var e;
-      const s = this.getMeasurements();
-      let t;
-      if (s.length === 0)
-        t = this.options.paddingStart;
+      const t = this.getMeasurements();
+      let s;
+      if (t.length === 0)
+        s = this.options.paddingStart;
       else if (this.options.lanes === 1)
-        t = ((e = s[s.length - 1]) == null ? void 0 : e.end) ?? 0;
+        s = ((e = t[t.length - 1]) == null ? void 0 : e.end) ?? 0;
       else {
         const n = Array(this.options.lanes).fill(null);
-        let o = s.length - 1;
+        let o = t.length - 1;
         for (; o >= 0 && n.some((i) => i === null); ) {
-          const i = s[o];
+          const i = t[o];
           n[i.lane] === null && (n[i.lane] = i.end), o--;
         }
-        t = Math.max(...n.filter((i) => i !== null));
+        s = Math.max(...n.filter((i) => i !== null));
       }
       return Math.max(
-        t - this.options.scrollMargin + this.options.paddingEnd,
+        s - this.options.scrollMargin + this.options.paddingEnd,
         0
       );
     }, this._scrollToOffset = (e, {
-      adjustments: s,
-      behavior: t
+      adjustments: t,
+      behavior: s
     }) => {
-      this.options.scrollToFn(e, { behavior: t, adjustments: s }, this);
+      this.options.scrollToFn(e, { behavior: s, adjustments: t }, this);
     }, this.measure = () => {
       this.itemSizeCache = /* @__PURE__ */ new Map(), this.laneAssignments = /* @__PURE__ */ new Map(), this.notify(!1);
     }, this.setOptions(l);
   }
+  scheduleScrollReconcile() {
+    if (!this.targetWindow) {
+      this.scrollState = null;
+      return;
+    }
+    this.rafId == null && (this.rafId = this.targetWindow.requestAnimationFrame(() => {
+      this.rafId = null, this.reconcileScroll();
+    }));
+  }
+  reconcileScroll() {
+    if (!this.scrollState || !this.scrollElement) return;
+    if (this.now() - this.scrollState.startedAt > 5e3) {
+      this.scrollState = null;
+      return;
+    }
+    const t = this.scrollState.index != null ? this.getOffsetForIndex(this.scrollState.index, this.scrollState.align) : void 0, s = t ? t[0] : this.scrollState.lastTargetOffset, n = 1, o = s !== this.scrollState.lastTargetOffset;
+    if (!o && N(s, this.getScrollOffset())) {
+      if (this.scrollState.stableFrames++, this.scrollState.stableFrames >= n) {
+        this.scrollState = null;
+        return;
+      }
+    } else
+      this.scrollState.stableFrames = 0, o && (this.scrollState.lastTargetOffset = s, this.scrollState.behavior = "auto", this._scrollToOffset(s, {
+        adjustments: void 0,
+        behavior: "auto"
+      }));
+    this.scheduleScrollReconcile();
+  }
 }
-const _ = (r, l, e, s) => {
+const R = (r, l, e, t) => {
   for (; r <= l; ) {
-    const t = (r + l) / 2 | 0, n = e(t);
-    if (n < s)
-      r = t + 1;
-    else if (n > s)
-      l = t - 1;
+    const s = (r + l) / 2 | 0, n = e(s);
+    if (n < t)
+      r = s + 1;
+    else if (n > t)
+      l = s - 1;
     else
-      return t;
+      return s;
   }
   return r > 0 ? r - 1 : 0;
 };
@@ -535,149 +574,142 @@ function U({
   measurements: r,
   outerSize: l,
   scrollOffset: e,
-  lanes: s
+  lanes: t
 }) {
-  const t = r.length - 1, n = (h) => r[h].start;
-  if (r.length <= s)
+  const s = r.length - 1, n = (a) => r[a].start;
+  if (r.length <= t)
     return {
       startIndex: 0,
-      endIndex: t
+      endIndex: s
     };
-  let o = _(
+  let o = R(
     0,
-    t,
+    s,
     n,
     e
   ), i = o;
-  if (s === 1)
-    for (; i < t && r[i].end < e + l; )
+  if (t === 1)
+    for (; i < s && r[i].end < e + l; )
       i++;
-  else if (s > 1) {
-    const h = Array(s).fill(0);
-    for (; i < t && h.some((c) => c < e + l); ) {
+  else if (t > 1) {
+    const a = Array(t).fill(0);
+    for (; i < s && a.some((c) => c < e + l); ) {
       const c = r[i];
-      h[c.lane] = c.end, i++;
+      a[c.lane] = c.end, i++;
     }
-    const u = Array(s).fill(e + l);
+    const u = Array(t).fill(e + l);
     for (; o >= 0 && u.some((c) => c >= e); ) {
       const c = r[o];
       u[c.lane] = c.start, o--;
     }
-    o = Math.max(0, o - o % s), i = Math.min(t, i + (s - 1 - i % s));
+    o = Math.max(0, o - o % t), i = Math.min(s, i + (t - 1 - i % t));
   }
   return { startIndex: o, endIndex: i };
 }
 const A = typeof document < "u" ? w.useLayoutEffect : w.useEffect;
-function K({
+function q({
   useFlushSync: r = !0,
   ...l
 }) {
-  const e = w.useReducer(() => ({}), {})[1], s = {
+  const e = w.useReducer(() => ({}), {})[1], t = {
     ...l,
     onChange: (n, o) => {
       var i;
-      r && o ? N(e) : e(), (i = l.onChange) == null || i.call(l, n, o);
+      r && o ? D(e) : e(), (i = l.onChange) == null || i.call(l, n, o);
     }
-  }, [t] = w.useState(
-    () => new q(s)
+  }, [s] = w.useState(
+    () => new $(t)
   );
-  return t.setOptions(s), A(() => t._didMount(), []), A(() => t._willUpdate()), t;
+  return s.setOptions(t), A(() => s._didMount(), []), A(() => s._willUpdate()), s;
 }
-function G(r) {
-  return K({
-    observeElementRect: B,
-    observeElementOffset: P,
+function K(r) {
+  return q({
+    observeElementRect: j,
+    observeElementOffset: B,
     scrollToFn: H,
     ...r
   });
 }
-const X = 5, Y = 0;
-function J(r, l) {
+const G = 5, X = 0;
+function Y(r, l) {
   if (l <= 0)
     throw new Error(`chunkArray: size must be positive, received ${l}`);
   const e = [];
-  for (let s = 0; s < r.length; s += l)
-    e.push(r.slice(s, s + l));
+  for (let t = 0; t < r.length; t += l)
+    e.push(r.slice(t, t + l));
   return e;
 }
-function te({
+function J({
   items: r,
   columns: l,
-  parentRef: e,
-  renderItem: s,
-  estimateRowSize: t,
+  scrollElement: e,
+  renderItem: t,
+  estimateRowSize: s,
   getItemKey: n,
-  overscan: o = X,
-  rowGapPx: i = Y,
-  gridClassName: h = "grid grid-cols-1 gap-4"
+  overscan: o = G,
+  rowGapPx: i = X,
+  gridClassName: a = "grid grid-cols-1 gap-4"
 }) {
-  if (l <= 0)
-    throw new Error(
-      `VirtualizedGrid: columns must be positive, received ${l}`
-    );
-  const u = F(null), [c, v] = k(0);
+  const u = _(null), [c, p] = F(0);
   T(() => {
-    const m = u.current, p = e.current;
-    if (!(m && p))
+    const f = u.current;
+    if (!f)
       return;
-    const d = () => {
-      const S = p.getBoundingClientRect(), R = m.getBoundingClientRect().top - S.top + p.scrollTop;
-      v(Math.max(0, Math.round(R)));
+    const g = () => {
+      const b = e.getBoundingClientRect(), O = f.getBoundingClientRect().top - b.top + e.scrollTop;
+      p(Math.max(0, Math.round(O)));
     };
-    d();
-    const E = new ResizeObserver(d);
-    return E.observe(m), E.observe(p), () => E.disconnect();
+    g();
+    const d = new ResizeObserver(g);
+    return d.observe(f), d.observe(e), () => d.disconnect();
   }, [e]);
-  const a = D(() => J(r, l).map(
-    (p, d) => p.map((E, S) => ({
-      item: E,
+  const h = k(() => Y(r, l).map(
+    (g, d) => g.map((b, S) => ({
+      item: b,
       index: d * l + S
     }))
-  ), [r, l]), g = G({
-    count: a.length,
-    getScrollElement: () => e.current,
-    estimateSize: () => t + i,
+  ), [r, l]), v = K({
+    count: h.length,
+    getScrollElement: () => e,
+    estimateSize: () => s + i,
     overscan: o,
     scrollMargin: c
-  });
-  if (r.length === 0)
-    return null;
-  const b = g.getVirtualItems(), f = g.getTotalSize();
-  return b.length === 0 ? /* @__PURE__ */ x(
-    "div",
-    {
-      className: "relative w-full",
-      "data-testid": "virtualized-grid",
-      ref: u,
-      style: { height: a.length * (t + i) }
-    }
-  ) : /* @__PURE__ */ x(
+  }), E = v.getVirtualItems(), m = v.getTotalSize();
+  return /* @__PURE__ */ M(
     "div",
     {
       className: "relative w-full",
       "data-testid": "virtualized-grid",
       ref: u,
-      style: { height: f },
-      children: b.map((m) => {
-        const p = a[m.index];
-        return p ? /* @__PURE__ */ x(
+      style: { height: m },
+      children: E.map((f) => {
+        const g = h[f.index];
+        return g ? /* @__PURE__ */ M(
           "div",
           {
             className: "absolute top-0 left-0 w-full",
-            "data-index": m.index,
-            ref: g.measureElement,
+            "data-index": f.index,
+            ref: v.measureElement,
             style: {
-              transform: `translateY(${m.start - c}px)`,
+              transform: `translateY(${f.start - c}px)`,
               paddingBottom: i
             },
-            children: /* @__PURE__ */ x("div", { className: h, children: p.map(({ item: d, index: E }) => /* @__PURE__ */ x("div", { children: s(d, E) }, n(d))) })
+            children: /* @__PURE__ */ M("div", { className: a, children: g.map(({ item: d, index: b }) => /* @__PURE__ */ M("div", { children: t(d, b) }, n(d))) })
           },
-          m.key
+          f.key
         ) : null;
       })
     }
   );
 }
+function te(r) {
+  const { items: l, columns: e, scrollElement: t } = r;
+  if (e <= 0)
+    throw new Error(
+      `VirtualizedGrid: columns must be positive, received ${e}`
+    );
+  return l.length === 0 || !t ? null : /* @__PURE__ */ M(J, { ...r, scrollElement: t });
+}
 export {
   te as VirtualizedGrid
 };