@ceriousdevtech/react-cerious-scroll 1.0.2 → 1.0.4

package/CHANGELOG.md

@@ -5,6 +5,19 @@ 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.4] - 2026-06-04
+
+### Dependencies
+- Bumped `@ceriousdevtech/cerious-scroll` to `^1.0.5`. Consumers get the new wheel input classifier (trackpad / free-scroll mice apply input immediately, ratcheted wheel notches still ease smoothly), the new `wheel.wheelBehavior` option (`'auto' | 'immediate' | 'smooth'`), and a fix for horizontal wheel forwarding in layouts where `overflow-x: auto` lives on an ancestor of `[data-cerious-scroll-content]`.
+
+## [1.0.3] - 2026-06-03
+
+### Dependencies
+- Bumped peer dependency `@ceriousdevtech/cerious-scroll` to `^1.0.4`. Consumers get smooth wheel scrolling (eased over ~150ms, configurable via `wheel: { smooth }`) and the engine now reads viewport height from `[data-cerious-scroll-content]` so wrappers that put a horizontal scrollbar on the inner element get the last row clearance for free.
+
+### Changed
+- The inner content element is now styled `overflow-y: clip; overflow-x: auto` so consumers can opt into a horizontal scrollbar on the rows axis without a stray vertical bar appearing.
+
 ## [1.0.2] - 2026-06-03
 
 ### Added

package/dist/index.cjs

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

package/dist/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ceriousdevtech/react-cerious-scroll",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "React bindings for CeriousScroll — high-performance virtual scrolling with O(1) memory and no height estimation",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -55,8 +55,10 @@
     "demo": "vite --config demo/vite.config.ts",
     "demo:build": "vite build --config demo/vite.config.ts"
   },
+  "dependencies": {
+    "@ceriousdevtech/cerious-scroll": "^1.0.5"
+  },
   "peerDependencies": {
-    "@ceriousdevtech/cerious-scroll": "^1.0.3",
     "react": ">=18 <20",
     "react-dom": ">=18 <20"
   },
@@ -66,11 +68,13 @@
     "@types/node": "^22.10.2",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
+    "@types/react-window": "^1.8.8",
     "@vitejs/plugin-react": "^4.3.4",
     "jsdom": "^25.0.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.30.4",
+    "react-window": "^1.8.10",
     "typescript": "^5.6.3",
     "vite": "^5.4.11",
     "vite-plugin-dts": "^4.3.0",