@ceriousdevtech/react-cerious-scroll 1.0.6 → 1.0.7

package/CHANGELOG.md

@@ -5,11 +5,20 @@ All notable changes to react-cerious-scroll will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.0.7] - 2026-06-24
+
+### Changed
+- **A change in the item count now grows/shrinks the dataset in place instead of recreating the engine.** The hook calls `updateTotalElements()` (propagating the new count to navigation bounds, the scrollbar track, the renderer, and the height cache) rather than tearing down and rebuilding the scroller. A live append/prepend therefore keeps the scroll position and any in-progress scrollbar drag alive, and an appended dataset keeps a stable bottom index instead of a bouncing tail. A shrink that leaves the position past the new end is clamped, and the scrollbar thumb is re-synced after the lengthened track re-renders. No public API change.
+- Updated the core engine dependency to `@ceriousdevtech/cerious-scroll@^1.0.8` (native-scrollbar drag rendering is now coalesced to one render per frame, with no per-row layout thrash on fast drags).
+
 ## [1.0.6] - 2026-06-11
 
 ### Fixed
 - **`recalculate()` now refreshes row content, not just heights.** It re-runs `renderItem` for every currently-rendered row (busting the per-index portal cache), so rows whose content depends on state outside `(item, index)` — e.g. a sliding/windowed data source where index → content shifts — update on an in-place refresh. Previously `recalculate()` only cleared the engine's height caches and re-measured, leaving such rows showing stale content; this now matches the Vue/Angular wrappers, whose `recalculate()` re-runs the row template/slot. A plain scroll still reuses cached portals for unchanged rows, so heavy rows stay cheap to scroll.
 
+### Changed
+- Updated the core engine dependency to `@ceriousdevtech/cerious-scroll@^1.0.7` (scrollbar drag-to-top fix).
+
 ## [1.0.5] - 2026-06-08
 
 ### Added

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const ee=require("react/jsx-runtime"),r=require("react"),z=require("react-dom"),te=require("react-dom/server"),G=require("@ceriousdevtech/cerious-scroll"),$="data-cerious-scroll-content",re="data-cerious-scroll-row";function ne(e){const u=e.querySelector(`[${$}]`);if(u)return u;const n=document.createElement("div");return n.setAttribute($,""),n.style.position="relative",n.style.width="100%",n.style.height="100%",n.style.overflowY="clip",n.style.overflowX="auto",e.appendChild(n),n}function ce(e,u){const n=h=>{const l=h.detail;l&&u({percentage:l.percentage,currentElement:l.currentElement,scrollOffset:l.scrollOffset,result:{element:l.result.element,offset:l.result.offset}})},f=h=>{const l=h.detail;l&&u({percentage:l.percentage,currentElement:l.element,scrollOffset:l.scrollOffset,result:{element:l.element,offset:l.scrollOffset}})};return e.addEventListener("cerious-viewport-change",n),e.addEventListener("viewport-change",f),()=>{e.removeEventListener("cerious-viewport-change",n),e.removeEventListener("viewport-change",f)}}function le(e,u){const n=typeof e=="number"?e:typeof u=="number"?u:void 0;if(n===void 0||Number.isNaN(n))throw new Error("useCeriousScroll: provide `totalElements` or `items`.");return Math.max(1,Math.floor(n))}function J(e){var Y;const u=r.useRef(null),n=r.useRef(null),f=r.useRef(new Map),h=r.useRef(new Map),l=r.useRef(null),R=r.useRef(null),S=r.useRef(null),T=r.useRef(e.tableHeader),[,M]=r.useReducer(t=>t+1,0),[A,p]=r.useState(null),b=r.useRef(e.renderItem),g=r.useRef(e.items??null),v=r.useRef(e.getItem),L=r.useRef(e.options),q=r.useRef(e.autoRender??!0),D=r.useRef(e.totalElements??null),H=r.useRef(e.onViewportChange),P=r.useRef(e.onMeasuredViewport),j=r.useRef(e.onReady);b.current=e.renderItem,g.current=e.items??null,v.current=e.getItem,T.current=e.tableHeader,L.current=e.options,q.current=e.autoRender??!0,D.current=e.totalElements??null,H.current=e.onViewportChange,P.current=e.onMeasuredViewport,j.current=e.onReady;const B=r.useCallback(t=>{const c=v.current;if(c)return c(t);const o=g.current;return o?o[t]:void 0},[]),s=r.useCallback(()=>{var I,O;const t=n.current;if(!t)return null;const{scroller:c,contentEl:o,container:a}=t,k=a.clientHeight||a.offsetHeight||0,w=[],m=((I=L.current)==null?void 0:I.layout)==="table",_=(i,d)=>{const C=document.createElement("div");m&&(C.style.display="contents"),C.setAttribute(re,String(i)),C.innerHTML=te.renderToStaticMarkup(r.createElement(r.Fragment,null,b.current(B(i),i))),d.appendChild(C),f.current.set(i,{el:d,mount:C}),w.push(C)},y=c.renderViewport(k,o,_),F=new Set(c.getRenderedIndices());return f.current.forEach((i,d)=>{F.has(d)||f.current.delete(d)}),w.forEach(i=>{i.textContent=""}),z.flushSync(M),(O=P.current)==null||O.call(P,y),y},[]),K=e.totalElements??((Y=e.items)==null?void 0:Y.length)??null;r.useEffect(()=>{var F,I,O;const t=u.current;if(!t)return;const c=ne(t),o=L.current??{},a=o.onScroll,k={...o,onScroll:()=>{a==null||a(),q.current&&s()}};if(o.layout==="table"&&T.current!=null){const i=(F=o.table)==null?void 0:F.header;k.table={...o.table,header:d=>{S.current=d,i==null||i(d)}}}const w=le(D.current,((I=g.current)==null?void 0:I.length)??null),m=new G.CeriousScroll(t,w,k);R.current&&(m.currentElement=Math.min(R.current.currentElement,w-1),m.scrollOffset=R.current.scrollOffset,R.current=null),n.current={scroller:m,contentEl:c,container:t},p(m);const _=ce(t,i=>{var d;(d=H.current)==null||d.call(H,i)});(O=j.current)==null||O.call(j,m);let y=0;return q.current&&(y=requestAnimationFrame(()=>s())),()=>{cancelAnimationFrame(y),_(),R.current={currentElement:m.currentElement,scrollOffset:m.scrollOffset},f.current.clear(),h.current.clear(),l.current=null,c.textContent="",m.detachScrollbar(t),m.dispose(),n.current=null,p(null)}},[K,s]),r.useEffect(()=>{if(!n.current||!q.current)return;const t=requestAnimationFrame(()=>s());return()=>cancelAnimationFrame(t)},[e.items,e.getItem]);const Q=r.useCallback(t=>{const c=n.current;return c?(c.scroller.jumpToElement(t),s()):null},[s]),U=r.useCallback(t=>{const c=n.current;return c?(c.scroller.handleScrollPercentage(t),s()):null},[s]),Z=r.useCallback(()=>{const t=n.current;return t?(t.scroller.reset(),s()):null},[s]),x=r.useCallback(()=>{const t=n.current;return t?(t.scroller.clearAllCaches(),h.current.clear(),s()):null},[s]),W=g.current,X=!v.current&&W!=null?W.length:null,N=b.current,E=h.current;l.current!==N&&(E.clear(),l.current=N);const V=[];return f.current.forEach((t,c)=>{if(X!==null&&c>=X){E.delete(c);return}const o=B(c);let a=E.get(c);(!a||a.item!==o||a.mount!==t.mount)&&(a={item:o,mount:t.mount,node:z.createPortal(N(o,c),t.mount,String(c))},E.set(c,a)),V.push(a.node)}),E.size>f.current.size&&E.forEach((t,c)=>{f.current.has(c)||E.delete(c)}),e.tableHeader!=null&&S.current&&V.push(z.createPortal(e.tableHeader,S.current,"cerious-thead")),{containerRef:u,portals:V,scroller:A,render:s,jumpToElement:Q,scrollToPercentage:U,reset:Z,recalculate:x}}function oe(e,u){const{className:n,style:f,"data-testid":h,children:l,...R}=e,{containerRef:S,portals:T,scroller:M,render:A,jumpToElement:p,scrollToPercentage:b,reset:g,recalculate:v}=J(R);return r.useImperativeHandle(u,()=>({scroller:M,render:A,jumpToElement:p,scrollToPercentage:b,reset:g,recalculate:v}),[M,A,p,b,g,v]),ee.jsxs("div",{ref:S,className:n,"data-testid":h,style:{position:"relative",overflow:"hidden",...f},children:[l,T]})}const ue=r.forwardRef(oe);Object.defineProperty(exports,"CeriousScrollEngine",{enumerable:!0,get:()=>G.CeriousScroll});exports.CeriousScroll=ue;exports.useCeriousScroll=J;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const te=require("react/jsx-runtime"),r=require("react"),D=require("react-dom"),re=require("react-dom/server"),K=require("@ceriousdevtech/cerious-scroll"),G="data-cerious-scroll-content",ne="data-cerious-scroll-row";function ce(e){const a=e.querySelector(`[${G}]`);if(a)return a;const c=document.createElement("div");return c.setAttribute(G,""),c.style.position="relative",c.style.width="100%",c.style.height="100%",c.style.overflowY="clip",c.style.overflowX="auto",e.appendChild(c),c}function le(e,a){const c=h=>{const l=h.detail;l&&a({percentage:l.percentage,currentElement:l.currentElement,scrollOffset:l.scrollOffset,result:{element:l.result.element,offset:l.result.offset}})},f=h=>{const l=h.detail;l&&a({percentage:l.percentage,currentElement:l.element,scrollOffset:l.scrollOffset,result:{element:l.element,offset:l.scrollOffset}})};return e.addEventListener("cerious-viewport-change",c),e.addEventListener("viewport-change",f),()=>{e.removeEventListener("cerious-viewport-change",c),e.removeEventListener("viewport-change",f)}}function J(e,a){const c=typeof e=="number"?e:typeof a=="number"?a:void 0;if(c===void 0||Number.isNaN(c))throw new Error("useCeriousScroll: provide `totalElements` or `items`.");return Math.max(1,Math.floor(c))}function Q(e){var $;const a=r.useRef(null),c=r.useRef(null),f=r.useRef(new Map),h=r.useRef(new Map),l=r.useRef(null),g=r.useRef(null),S=r.useRef(null),M=r.useRef(e.tableHeader),[,A]=r.useReducer(t=>t+1,0),[q,p]=r.useState(null),b=r.useRef(e.renderItem),R=r.useRef(e.items??null),v=r.useRef(e.getItem),L=r.useRef(e.options),w=r.useRef(e.autoRender??!0),N=r.useRef(e.totalElements??null),j=r.useRef(e.onViewportChange),H=r.useRef(e.onMeasuredViewport),P=r.useRef(e.onReady);b.current=e.renderItem,R.current=e.items??null,v.current=e.getItem,M.current=e.tableHeader,L.current=e.options,w.current=e.autoRender??!0,N.current=e.totalElements??null,j.current=e.onViewportChange,H.current=e.onMeasuredViewport,P.current=e.onReady;const B=r.useCallback(t=>{const n=v.current;if(n)return n(t);const o=R.current;return o?o[t]:void 0},[]),s=r.useCallback(()=>{var I,O;const t=c.current;if(!t)return null;const{scroller:n,contentEl:o,container:u}=t,k=u.clientHeight||u.offsetHeight||0,y=[],m=((I=L.current)==null?void 0:I.layout)==="table",z=(i,d)=>{const C=document.createElement("div");m&&(C.style.display="contents"),C.setAttribute(ne,String(i)),C.innerHTML=re.renderToStaticMarkup(r.createElement(r.Fragment,null,b.current(B(i),i))),d.appendChild(C),f.current.set(i,{el:d,mount:C}),y.push(C)},T=n.renderViewport(k,o,z),F=new Set(n.getRenderedIndices());return f.current.forEach((i,d)=>{F.has(d)||f.current.delete(d)}),y.forEach(i=>{i.textContent=""}),D.flushSync(A),(O=H.current)==null||O.call(H,T),T},[]),W=e.totalElements??(($=e.items)==null?void 0:$.length)??null;r.useEffect(()=>{var F,I,O;const t=a.current;if(!t)return;const n=ce(t),o=L.current??{},u=o.onScroll,k={...o,onScroll:()=>{u==null||u(),w.current&&s()}};if(o.layout==="table"&&M.current!=null){const i=(F=o.table)==null?void 0:F.header;k.table={...o.table,header:d=>{S.current=d,i==null||i(d)}}}const y=J(N.current,((I=R.current)==null?void 0:I.length)??null),m=new K.CeriousScroll(t,y,k);g.current&&(m.currentElement=Math.min(g.current.currentElement,y-1),m.scrollOffset=g.current.scrollOffset,g.current=null),c.current={scroller:m,contentEl:n,container:t},p(m);const z=le(t,i=>{var d;(d=j.current)==null||d.call(j,i)});(O=P.current)==null||O.call(P,m);let T=0;return w.current&&(T=requestAnimationFrame(()=>s())),()=>{cancelAnimationFrame(T),z(),g.current={currentElement:m.currentElement,scrollOffset:m.scrollOffset},f.current.clear(),h.current.clear(),l.current=null,n.textContent="",m.detachScrollbar(t),m.dispose(),c.current=null,p(null)}},[s]),r.useEffect(()=>{var o;const t=c.current;if(!t||W==null)return;const n=J(N.current,((o=R.current)==null?void 0:o.length)??null);if(n!==t.scroller.totalElements)if(t.scroller.updateTotalElements(n),t.scroller.currentElement>n-1&&t.scroller.jumpToElement(n-1),w.current){const u=t.scroller;requestAnimationFrame(()=>{s(),u.syncScrollbar()})}else t.scroller.syncScrollbar()},[W,s]),r.useEffect(()=>{if(!c.current||!w.current)return;const t=requestAnimationFrame(()=>s());return()=>cancelAnimationFrame(t)},[e.items,e.getItem]);const U=r.useCallback(t=>{const n=c.current;return n?(n.scroller.jumpToElement(t),s()):null},[s]),Z=r.useCallback(t=>{const n=c.current;return n?(n.scroller.handleScrollPercentage(t),s()):null},[s]),x=r.useCallback(()=>{const t=c.current;return t?(t.scroller.reset(),s()):null},[s]),ee=r.useCallback(()=>{const t=c.current;return t?(t.scroller.clearAllCaches(),h.current.clear(),s()):null},[s]),X=R.current,Y=!v.current&&X!=null?X.length:null,V=b.current,E=h.current;l.current!==V&&(E.clear(),l.current=V);const _=[];return f.current.forEach((t,n)=>{if(Y!==null&&n>=Y){E.delete(n);return}const o=B(n);let u=E.get(n);(!u||u.item!==o||u.mount!==t.mount)&&(u={item:o,mount:t.mount,node:D.createPortal(V(o,n),t.mount,String(n))},E.set(n,u)),_.push(u.node)}),E.size>f.current.size&&E.forEach((t,n)=>{f.current.has(n)||E.delete(n)}),e.tableHeader!=null&&S.current&&_.push(D.createPortal(e.tableHeader,S.current,"cerious-thead")),{containerRef:a,portals:_,scroller:q,render:s,jumpToElement:U,scrollToPercentage:Z,reset:x,recalculate:ee}}function oe(e,a){const{className:c,style:f,"data-testid":h,children:l,...g}=e,{containerRef:S,portals:M,scroller:A,render:q,jumpToElement:p,scrollToPercentage:b,reset:R,recalculate:v}=Q(g);return r.useImperativeHandle(a,()=>({scroller:A,render:q,jumpToElement:p,scrollToPercentage:b,reset:R,recalculate:v}),[A,q,p,b,R,v]),te.jsxs("div",{ref:S,className:c,"data-testid":h,style:{position:"relative",overflow:"hidden",...f},children:[l,M]})}const se=r.forwardRef(oe);Object.defineProperty(exports,"CeriousScrollEngine",{enumerable:!0,get:()=>K.CeriousScroll});exports.CeriousScroll=se;exports.useCeriousScroll=Q;

package/dist/index.js

@@ -1,20 +1,20 @@
-import { jsxs as ee } from "react/jsx-runtime";
-import { useRef as o, useReducer as te, useState as re, useCallback as w, useEffect as Y, createElement as ne, Fragment as ce, forwardRef as oe, useImperativeHandle as le } from "react";
-import { flushSync as se, createPortal as G } from "react-dom";
-import { renderToStaticMarkup as ue } from "react-dom/server";
-import { CeriousScroll as ae } from "@ceriousdevtech/cerious-scroll";
+import { jsxs as te } from "react/jsx-runtime";
+import { useRef as o, useReducer as re, useState as ne, useCallback as S, useEffect as B, createElement as ce, Fragment as le, forwardRef as oe, useImperativeHandle as se } from "react";
+import { flushSync as ue, createPortal as J } from "react-dom";
+import { renderToStaticMarkup as ae } from "react-dom/server";
+import { CeriousScroll as ie } from "@ceriousdevtech/cerious-scroll";
 import { CeriousScroll as ye } from "@ceriousdevtech/cerious-scroll";
-const J = "data-cerious-scroll-content", ie = "data-cerious-scroll-row";
-function fe(e) {
-  const s = e.querySelector(`[${J}]`);
-  if (s) return s;
-  const r = document.createElement("div");
-  return r.setAttribute(J, ""), r.style.position = "relative", r.style.width = "100%", r.style.height = "100%", r.style.overflowY = "clip", r.style.overflowX = "auto", e.appendChild(r), r;
+const K = "data-cerious-scroll-content", fe = "data-cerious-scroll-row";
+function me(e) {
+  const a = e.querySelector(`[${K}]`);
+  if (a) return a;
+  const n = document.createElement("div");
+  return n.setAttribute(K, ""), n.style.position = "relative", n.style.width = "100%", n.style.height = "100%", n.style.overflowY = "clip", n.style.overflowX = "auto", e.appendChild(n), n;
 }
-function me(e, s) {
-  const r = (h) => {
+function de(e, a) {
+  const n = (h) => {
     const c = h.detail;
-    c && s({
+    c && a({
       percentage: c.percentage,
       currentElement: c.currentElement,
       scrollOffset: c.scrollOffset,
@@ -22,152 +22,165 @@ function me(e, s) {
     });
   }, f = (h) => {
     const c = h.detail;
-    c && s({
+    c && a({
       percentage: c.percentage,
       currentElement: c.element,
       scrollOffset: c.scrollOffset,
       result: { element: c.element, offset: c.scrollOffset }
     });
   };
-  return e.addEventListener("cerious-viewport-change", r), e.addEventListener("viewport-change", f), () => {
-    e.removeEventListener("cerious-viewport-change", r), e.removeEventListener("viewport-change", f);
+  return e.addEventListener("cerious-viewport-change", n), e.addEventListener("viewport-change", f), () => {
+    e.removeEventListener("cerious-viewport-change", n), e.removeEventListener("viewport-change", f);
   };
 }
-function de(e, s) {
-  const r = typeof e == "number" ? e : typeof s == "number" ? s : void 0;
-  if (r === void 0 || Number.isNaN(r))
+function Q(e, a) {
+  const n = typeof e == "number" ? e : typeof a == "number" ? a : void 0;
+  if (n === void 0 || Number.isNaN(n))
     throw new Error("useCeriousScroll: provide `totalElements` or `items`.");
-  return Math.max(1, Math.floor(r));
+  return Math.max(1, Math.floor(n));
 }
 function he(e) {
-  var X;
-  const s = o(null), r = o(null), f = o(/* @__PURE__ */ new Map()), h = o(/* @__PURE__ */ new Map()), c = o(null), g = o(null), C = o(null), M = o(e.tableHeader), [, A] = te((t) => t + 1, 0), [H, S] = re(null), v = o(e.renderItem), E = o(e.items ?? null), R = o(e.getItem), _ = o(e.options), F = o(e.autoRender ?? !0), $ = o(e.totalElements ?? null), L = o(e.onViewportChange), N = o(e.onMeasuredViewport), P = o(e.onReady);
-  v.current = e.renderItem, E.current = e.items ?? null, R.current = e.getItem, M.current = e.tableHeader, _.current = e.options, F.current = e.autoRender ?? !0, $.current = e.totalElements ?? null, L.current = e.onViewportChange, N.current = e.onMeasuredViewport, P.current = e.onReady;
-  const B = w((t) => {
-    const n = R.current;
-    if (n) return n(t);
-    const l = E.current;
+  var G;
+  const a = o(null), n = o(null), f = o(/* @__PURE__ */ new Map()), h = o(/* @__PURE__ */ new Map()), c = o(null), E = o(null), w = o(null), M = o(e.tableHeader), [, H] = re((t) => t + 1, 0), [F, C] = ne(null), b = o(e.renderItem), g = o(e.items ?? null), v = o(e.getItem), V = o(e.options), y = o(e.autoRender ?? !0), _ = o(e.totalElements ?? null), L = o(e.onViewportChange), N = o(e.onMeasuredViewport), j = o(e.onReady);
+  b.current = e.renderItem, g.current = e.items ?? null, v.current = e.getItem, M.current = e.tableHeader, V.current = e.options, y.current = e.autoRender ?? !0, _.current = e.totalElements ?? null, L.current = e.onViewportChange, N.current = e.onMeasuredViewport, j.current = e.onReady;
+  const D = S((t) => {
+    const r = v.current;
+    if (r) return r(t);
+    const l = g.current;
     return l ? l[t] : void 0;
-  }, []), u = w(() => {
-    var T, O;
-    const t = r.current;
+  }, []), s = S(() => {
+    var O, A;
+    const t = n.current;
     if (!t) return null;
-    const { scroller: n, contentEl: l, container: a } = t, j = a.clientHeight || a.offsetHeight || 0, y = [], m = ((T = _.current) == null ? void 0 : T.layout) === "table", z = (i, d) => {
-      const b = document.createElement("div");
-      m && (b.style.display = "contents"), b.setAttribute(ie, String(i)), b.innerHTML = ue(
-        ne(ce, null, v.current(B(i), i))
-      ), d.appendChild(b), f.current.set(i, { el: d, mount: b }), y.push(b);
-    }, I = n.renderViewport(j, l, z), V = new Set(n.getRenderedIndices());
+    const { scroller: r, contentEl: l, container: u } = t, P = u.clientHeight || u.offsetHeight || 0, T = [], m = ((O = V.current) == null ? void 0 : O.layout) === "table", $ = (i, d) => {
+      const R = document.createElement("div");
+      m && (R.style.display = "contents"), R.setAttribute(fe, String(i)), R.innerHTML = ae(
+        ce(le, null, b.current(D(i), i))
+      ), d.appendChild(R), f.current.set(i, { el: d, mount: R }), T.push(R);
+    }, I = r.renderViewport(P, l, $), q = new Set(r.getRenderedIndices());
     return f.current.forEach((i, d) => {
-      V.has(d) || f.current.delete(d);
-    }), y.forEach((i) => {
+      q.has(d) || f.current.delete(d);
+    }), T.forEach((i) => {
       i.textContent = "";
-    }), se(A), (O = N.current) == null || O.call(N, I), I;
-  }, []), K = e.totalElements ?? ((X = e.items) == null ? void 0 : X.length) ?? null;
-  Y(() => {
-    var V, T, O;
-    const t = s.current;
+    }), ue(H), (A = N.current) == null || A.call(N, I), I;
+  }, []), W = e.totalElements ?? ((G = e.items) == null ? void 0 : G.length) ?? null;
+  B(() => {
+    var q, O, A;
+    const t = a.current;
     if (!t) return;
-    const n = fe(t), l = _.current ?? {}, a = l.onScroll, j = {
+    const r = me(t), l = V.current ?? {}, u = l.onScroll, P = {
       ...l,
       onScroll: () => {
-        a == null || a(), F.current && u();
+        u == null || u(), y.current && s();
       }
     };
     if (l.layout === "table" && M.current != null) {
-      const i = (V = l.table) == null ? void 0 : V.header;
-      j.table = {
+      const i = (q = l.table) == null ? void 0 : q.header;
+      P.table = {
         ...l.table,
         header: (d) => {
-          C.current = d, i == null || i(d);
+          w.current = d, i == null || i(d);
         }
       };
     }
-    const y = de($.current, ((T = E.current) == null ? void 0 : T.length) ?? null), m = new ae(t, y, j);
-    g.current && (m.currentElement = Math.min(g.current.currentElement, y - 1), m.scrollOffset = g.current.scrollOffset, g.current = null), r.current = { scroller: m, contentEl: n, container: t }, S(m);
-    const z = me(t, (i) => {
+    const T = Q(_.current, ((O = g.current) == null ? void 0 : O.length) ?? null), m = new ie(t, T, P);
+    E.current && (m.currentElement = Math.min(E.current.currentElement, T - 1), m.scrollOffset = E.current.scrollOffset, E.current = null), n.current = { scroller: m, contentEl: r, container: t }, C(m);
+    const $ = de(t, (i) => {
       var d;
       (d = L.current) == null || d.call(L, i);
     });
-    (O = P.current) == null || O.call(P, m);
+    (A = j.current) == null || A.call(j, m);
     let I = 0;
-    return F.current && (I = requestAnimationFrame(() => u())), () => {
-      cancelAnimationFrame(I), z(), g.current = {
+    return y.current && (I = requestAnimationFrame(() => s())), () => {
+      cancelAnimationFrame(I), $(), E.current = {
         currentElement: m.currentElement,
         scrollOffset: m.scrollOffset
-      }, f.current.clear(), h.current.clear(), c.current = null, n.textContent = "", m.detachScrollbar(t), m.dispose(), r.current = null, S(null);
+      }, f.current.clear(), h.current.clear(), c.current = null, r.textContent = "", m.detachScrollbar(t), m.dispose(), n.current = null, C(null);
     };
-  }, [K, u]), Y(() => {
-    if (!r.current || !F.current) return;
-    const t = requestAnimationFrame(() => u());
+  }, [s]), B(() => {
+    var l;
+    const t = n.current;
+    if (!t || W == null) return;
+    const r = Q(_.current, ((l = g.current) == null ? void 0 : l.length) ?? null);
+    if (r !== t.scroller.totalElements)
+      if (t.scroller.updateTotalElements(r), t.scroller.currentElement > r - 1 && t.scroller.jumpToElement(r - 1), y.current) {
+        const u = t.scroller;
+        requestAnimationFrame(() => {
+          s(), u.syncScrollbar();
+        });
+      } else
+        t.scroller.syncScrollbar();
+  }, [W, s]), B(() => {
+    if (!n.current || !y.current) return;
+    const t = requestAnimationFrame(() => s());
     return () => cancelAnimationFrame(t);
   }, [e.items, e.getItem]);
-  const Q = w(
+  const U = S(
     (t) => {
-      const n = r.current;
-      return n ? (n.scroller.jumpToElement(t), u()) : null;
+      const r = n.current;
+      return r ? (r.scroller.jumpToElement(t), s()) : null;
     },
-    [u]
-  ), U = w(
+    [s]
+  ), Z = S(
     (t) => {
-      const n = r.current;
-      return n ? (n.scroller.handleScrollPercentage(t), u()) : null;
+      const r = n.current;
+      return r ? (r.scroller.handleScrollPercentage(t), s()) : null;
     },
-    [u]
-  ), Z = w(() => {
-    const t = r.current;
-    return t ? (t.scroller.reset(), u()) : null;
-  }, [u]), x = w(() => {
-    const t = r.current;
-    return t ? (t.scroller.clearAllCaches(), h.current.clear(), u()) : null;
-  }, [u]), D = E.current, W = !R.current && D != null ? D.length : null, q = v.current, p = h.current;
-  c.current !== q && (p.clear(), c.current = q);
-  const k = [];
-  return f.current.forEach((t, n) => {
-    if (W !== null && n >= W) {
-      p.delete(n);
+    [s]
+  ), x = S(() => {
+    const t = n.current;
+    return t ? (t.scroller.reset(), s()) : null;
+  }, [s]), ee = S(() => {
+    const t = n.current;
+    return t ? (t.scroller.clearAllCaches(), h.current.clear(), s()) : null;
+  }, [s]), X = g.current, Y = !v.current && X != null ? X.length : null, k = b.current, p = h.current;
+  c.current !== k && (p.clear(), c.current = k);
+  const z = [];
+  return f.current.forEach((t, r) => {
+    if (Y !== null && r >= Y) {
+      p.delete(r);
       return;
     }
-    const l = B(n);
-    let a = p.get(n);
-    (!a || a.item !== l || a.mount !== t.mount) && (a = {
+    const l = D(r);
+    let u = p.get(r);
+    (!u || u.item !== l || u.mount !== t.mount) && (u = {
       item: l,
       mount: t.mount,
-      node: G(q(l, n), t.mount, String(n))
-    }, p.set(n, a)), k.push(a.node);
-  }), p.size > f.current.size && p.forEach((t, n) => {
-    f.current.has(n) || p.delete(n);
-  }), e.tableHeader != null && C.current && k.push(G(e.tableHeader, C.current, "cerious-thead")), {
-    containerRef: s,
-    portals: k,
-    scroller: H,
-    render: u,
-    jumpToElement: Q,
-    scrollToPercentage: U,
-    reset: Z,
-    recalculate: x
+      node: J(k(l, r), t.mount, String(r))
+    }, p.set(r, u)), z.push(u.node);
+  }), p.size > f.current.size && p.forEach((t, r) => {
+    f.current.has(r) || p.delete(r);
+  }), e.tableHeader != null && w.current && z.push(J(e.tableHeader, w.current, "cerious-thead")), {
+    containerRef: a,
+    portals: z,
+    scroller: F,
+    render: s,
+    jumpToElement: U,
+    scrollToPercentage: Z,
+    reset: x,
+    recalculate: ee
   };
 }
-function ge(e, s) {
-  const { className: r, style: f, "data-testid": h, children: c, ...g } = e, {
-    containerRef: C,
+function ge(e, a) {
+  const { className: n, style: f, "data-testid": h, children: c, ...E } = e, {
+    containerRef: w,
     portals: M,
-    scroller: A,
-    render: H,
-    jumpToElement: S,
-    scrollToPercentage: v,
-    reset: E,
-    recalculate: R
-  } = he(g);
-  return le(
-    s,
-    () => ({ scroller: A, render: H, jumpToElement: S, scrollToPercentage: v, reset: E, recalculate: R }),
-    [A, H, S, v, E, R]
-  ), /* @__PURE__ */ ee(
+    scroller: H,
+    render: F,
+    jumpToElement: C,
+    scrollToPercentage: b,
+    reset: g,
+    recalculate: v
+  } = he(E);
+  return se(
+    a,
+    () => ({ scroller: H, render: F, jumpToElement: C, scrollToPercentage: b, reset: g, recalculate: v }),
+    [H, F, C, b, g, v]
+  ), /* @__PURE__ */ te(
     "div",
     {
-      ref: C,
-      className: r,
+      ref: w,
+      className: n,
       "data-testid": h,
       style: { position: "relative", overflow: "hidden", ...f },
       children: [
@@ -177,9 +190,9 @@ function ge(e, s) {
     }
   );
 }
-const we = oe(ge);
+const Se = oe(ge);
 export {
-  we as CeriousScroll,
+  Se as CeriousScroll,
   ye as CeriousScrollEngine,
   he as useCeriousScroll
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ceriousdevtech/react-cerious-scroll",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "React bindings for CeriousScroll — high-performance virtual scrolling with O(1) memory and no height estimation",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -56,7 +56,7 @@
     "demo:build": "vite build --config demo/vite.config.ts"
   },
   "dependencies": {
-    "@ceriousdevtech/cerious-scroll": "^1.0.7"
+    "@ceriousdevtech/cerious-scroll": "^1.0.8"
   },
   "peerDependencies": {
     "react": ">=18 <20",