@tanstack/react-virtual - npm Package Compare versions

Comparing version 3.0.0-beta.14 to 3.0.0-beta.15

build/cjs/virtual-core/build/esm/index.js

@@ -25,72 +25,2 @@ /**
  */
-var props = ["bottom", "height", "left", "right", "top", "width"];
-
-var rectChanged = function rectChanged(a, b) {
-  if (a === void 0) {
-    a = {};
-  }
-
-  if (b === void 0) {
-    b = {};
-  }
-
-  return props.some(function (prop) {
-    return a[prop] !== b[prop];
-  });
-};
-
-var observedNodes = /*#__PURE__*/new Map();
-var rafId;
-
-var run = function run() {
-  var changedStates = [];
-  observedNodes.forEach(function (state, node) {
-    var newRect = node.getBoundingClientRect();
-
-    if (rectChanged(newRect, state.rect)) {
-      state.rect = newRect;
-      changedStates.push(state);
-    }
-  });
-  changedStates.forEach(function (state) {
-    state.callbacks.forEach(function (cb) {
-      return cb(state.rect);
-    });
-  });
-  rafId = window.requestAnimationFrame(run);
-};
-
-function observeRect(node, cb) {
-  return {
-    observe: function observe() {
-      var wasEmpty = observedNodes.size === 0;
-
-      if (observedNodes.has(node)) {
-        observedNodes.get(node).callbacks.push(cb);
-      } else {
-        observedNodes.set(node, {
-          rect: undefined,
-          hasRectChanged: false,
-          callbacks: [cb]
-        });
-      }
-
-      if (wasEmpty) run();
-    },
-    unobserve: function unobserve() {
-      var state = observedNodes.get(node);
-
-      if (state) {
-        // Remove the callback
-        var index = state.callbacks.indexOf(cb);
-        if (index >= 0) state.callbacks.splice(index, 1); // Remove the node reference
-
-        if (!state.callbacks.length) observedNodes["delete"](node); // Stop the loop
-
-        if (!observedNodes.size) cancelAnimationFrame(rafId);
-      }
-    }
-  };
-}
-
 function memo(getDeps, fn, opts) {
@@ -166,5 +96,9 @@ let deps = [];
 const observeElementRect = (instance, cb) => {
-  const onResize = memoRectCallback(instance, cb);
-  const observer = observeRect(instance.scrollElement, rect => {
-    onResize(rect);
+  const observer = new ResizeObserver(entries => {
+    var _entries$, _entries$2;
+
+    cb({
+      width: (_entries$ = entries[0]) == null ? void 0 : _entries$.contentRect.width,
+      height: (_entries$2 = entries[0]) == null ? void 0 : _entries$2.contentRect.height
+    });
   });
@@ -176,6 +110,6 @@
 
-  onResize(instance.scrollElement.getBoundingClientRect());
-  observer.observe();
+  cb(instance.scrollElement.getBoundingClientRect());
+  observer.observe(instance.scrollElement);
   return () => {
-    observer.unobserve();
+    observer.unobserve(instance.scrollElement);
   };
@@ -182,0 +116,0 @@ };

build/esm/index.js

@@ -23,72 +23,2 @@ /**
  */
-var props = ["bottom", "height", "left", "right", "top", "width"];
-
-var rectChanged = function rectChanged(a, b) {
-  if (a === void 0) {
-    a = {};
-  }
-
-  if (b === void 0) {
-    b = {};
-  }
-
-  return props.some(function (prop) {
-    return a[prop] !== b[prop];
-  });
-};
-
-var observedNodes = /*#__PURE__*/new Map();
-var rafId;
-
-var run = function run() {
-  var changedStates = [];
-  observedNodes.forEach(function (state, node) {
-    var newRect = node.getBoundingClientRect();
-
-    if (rectChanged(newRect, state.rect)) {
-      state.rect = newRect;
-      changedStates.push(state);
-    }
-  });
-  changedStates.forEach(function (state) {
-    state.callbacks.forEach(function (cb) {
-      return cb(state.rect);
-    });
-  });
-  rafId = window.requestAnimationFrame(run);
-};
-
-function observeRect(node, cb) {
-  return {
-    observe: function observe() {
-      var wasEmpty = observedNodes.size === 0;
-
-      if (observedNodes.has(node)) {
-        observedNodes.get(node).callbacks.push(cb);
-      } else {
-        observedNodes.set(node, {
-          rect: undefined,
-          hasRectChanged: false,
-          callbacks: [cb]
-        });
-      }
-
-      if (wasEmpty) run();
-    },
-    unobserve: function unobserve() {
-      var state = observedNodes.get(node);
-
-      if (state) {
-        // Remove the callback
-        var index = state.callbacks.indexOf(cb);
-        if (index >= 0) state.callbacks.splice(index, 1); // Remove the node reference
-
-        if (!state.callbacks.length) observedNodes["delete"](node); // Stop the loop
-
-        if (!observedNodes.size) cancelAnimationFrame(rafId);
-      }
-    }
-  };
-}
-
 function memo(getDeps, fn, opts) {
@@ -164,5 +94,9 @@ let deps = [];
 const observeElementRect = (instance, cb) => {
-  const onResize = memoRectCallback(instance, cb);
-  const observer = observeRect(instance.scrollElement, rect => {
-    onResize(rect);
+  const observer = new ResizeObserver(entries => {
+    var _entries$, _entries$2;
+
+    cb({
+      width: (_entries$ = entries[0]) == null ? void 0 : _entries$.contentRect.width,
+      height: (_entries$2 = entries[0]) == null ? void 0 : _entries$2.contentRect.height
+    });
   });
@@ -174,6 +108,6 @@
 
-  onResize(instance.scrollElement.getBoundingClientRect());
-  observer.observe();
+  cb(instance.scrollElement.getBoundingClientRect());
+  observer.observe(instance.scrollElement);
   return () => {
-    observer.unobserve();
+    observer.unobserve(instance.scrollElement);
   };
@@ -180,0 +114,0 @@ };

build/stats.json

@@ -14,7 +14,7 @@ {
                 "name": "virtual-core/build/esm/index.js",
-                "uid": "1fe9-18"
+                "uid": "7b43-14"
               },
               {
                 "name": "react-virtual/src/index.tsx",
-                "uid": "1fe9-20"
+                "uid": "7b43-16"
               }
@@ -29,20 +29,20 @@ ]
   "nodeParts": {
-    "1fe9-18": {
-      "renderedLength": 17391,
-      "gzipLength": 4232,
+    "7b43-14": {
+      "renderedLength": 15840,
+      "gzipLength": 3783,
       "brotliLength": 0,
-      "mainUid": "1fe9-17"
+      "mainUid": "7b43-13"
     },
-    "1fe9-20": {
+    "7b43-16": {
       "renderedLength": 1281,
       "gzipLength": 441,
       "brotliLength": 0,
-      "mainUid": "1fe9-19"
+      "mainUid": "7b43-15"
     }
   },
   "nodeMetas": {
-    "1fe9-17": {
+    "7b43-13": {
       "id": "/packages/virtual-core/build/esm/index.js",
       "moduleParts": {
-        "index.production.js": "1fe9-18"
+        "index.production.js": "7b43-14"
       },
@@ -52,17 +52,17 @@ "imported": [],
         {
-          "uid": "1fe9-19"
+          "uid": "7b43-15"
         }
       ]
     },
-    "1fe9-19": {
+    "7b43-15": {
       "id": "/packages/react-virtual/src/index.tsx",
       "moduleParts": {
-        "index.production.js": "1fe9-20"
+        "index.production.js": "7b43-16"
       },
       "imported": [
         {
-          "uid": "1fe9-21"
+          "uid": "7b43-17"
         },
         {
-          "uid": "1fe9-17"
+          "uid": "7b43-13"
         }
@@ -73,3 +73,3 @@ ],
     },
-    "1fe9-21": {
+    "7b43-17": {
       "id": "react",
@@ -80,3 +80,3 @@ "moduleParts": {},
         {
-          "uid": "1fe9-19"
+          "uid": "7b43-15"
         }
@@ -83,0 +83,0 @@ ],

build/umd/index.development.js

@@ -47,72 +47,2 @@ /**
    */
-  var props = ["bottom", "height", "left", "right", "top", "width"];
-
-  var rectChanged = function rectChanged(a, b) {
-    if (a === void 0) {
-      a = {};
-    }
-
-    if (b === void 0) {
-      b = {};
-    }
-
-    return props.some(function (prop) {
-      return a[prop] !== b[prop];
-    });
-  };
-
-  var observedNodes = /*#__PURE__*/new Map();
-  var rafId;
-
-  var run = function run() {
-    var changedStates = [];
-    observedNodes.forEach(function (state, node) {
-      var newRect = node.getBoundingClientRect();
-
-      if (rectChanged(newRect, state.rect)) {
-        state.rect = newRect;
-        changedStates.push(state);
-      }
-    });
-    changedStates.forEach(function (state) {
-      state.callbacks.forEach(function (cb) {
-        return cb(state.rect);
-      });
-    });
-    rafId = window.requestAnimationFrame(run);
-  };
-
-  function observeRect(node, cb) {
-    return {
-      observe: function observe() {
-        var wasEmpty = observedNodes.size === 0;
-
-        if (observedNodes.has(node)) {
-          observedNodes.get(node).callbacks.push(cb);
-        } else {
-          observedNodes.set(node, {
-            rect: undefined,
-            hasRectChanged: false,
-            callbacks: [cb]
-          });
-        }
-
-        if (wasEmpty) run();
-      },
-      unobserve: function unobserve() {
-        var state = observedNodes.get(node);
-
-        if (state) {
-          // Remove the callback
-          var index = state.callbacks.indexOf(cb);
-          if (index >= 0) state.callbacks.splice(index, 1); // Remove the node reference
-
-          if (!state.callbacks.length) observedNodes["delete"](node); // Stop the loop
-
-          if (!observedNodes.size) cancelAnimationFrame(rafId);
-        }
-      }
-    };
-  }
-
   function memo(getDeps, fn, opts) {
@@ -188,5 +118,9 @@ let deps = [];
   const observeElementRect = (instance, cb) => {
-    const onResize = memoRectCallback(instance, cb);
-    const observer = observeRect(instance.scrollElement, rect => {
-      onResize(rect);
+    const observer = new ResizeObserver(entries => {
+      var _entries$, _entries$2;
+
+      cb({
+        width: (_entries$ = entries[0]) == null ? void 0 : _entries$.contentRect.width,
+        height: (_entries$2 = entries[0]) == null ? void 0 : _entries$2.contentRect.height
+      });
     });
@@ -198,6 +132,6 @@
 
-    onResize(instance.scrollElement.getBoundingClientRect());
-    observer.observe();
+    cb(instance.scrollElement.getBoundingClientRect());
+    observer.observe(instance.scrollElement);
     return () => {
-      observer.unobserve();
+      observer.unobserve(instance.scrollElement);
     };
@@ -204,0 +138,0 @@ };

build/umd/index.production.js

@@ -11,3 +11,3 @@ /**
  */
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).ReactVirtual={},e.React)}(this,(function(e,t){"use strict";function s(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(s){if("default"!==s){var n=Object.getOwnPropertyDescriptor(e,s);Object.defineProperty(t,s,n.get?n:{enumerable:!0,get:function(){return e[s]}})}})),t.default=e,Object.freeze(t)}var n,o=s(t),i=["bottom","height","left","right","top","width"],l=new Map,r=function e(){var t=[];l.forEach((function(e,s){var n,o,l=s.getBoundingClientRect();n=l,o=e.rect,void 0===n&&(n={}),void 0===o&&(o={}),i.some((function(e){return n[e]!==o[e]}))&&(e.rect=l,t.push(e))})),t.forEach((function(e){e.callbacks.forEach((function(t){return t(e.rect)}))})),n=window.requestAnimationFrame(e)};
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).ReactVirtual={},e.React)}(this,(function(e,t){"use strict";function s(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(s){if("default"!==s){var n=Object.getOwnPropertyDescriptor(e,s);Object.defineProperty(t,s,n.get?n:{enumerable:!0,get:function(){return e[s]}})}})),t.default=e,Object.freeze(t)}var n=s(t);
 /**
@@ -22,3 +22,3 @@ * virtual-core
    * @license MIT
-   */function a(e,t,s){let n,o=[];return()=>{let i;s.key&&null!=s.debug&&s.debug()&&(i=Date.now());const l=e();if(!(l.length!==o.length||l.some(((e,t)=>o[t]!==e))))return n;let r;if(o=l,s.key&&null!=s.debug&&s.debug()&&(r=Date.now()),n=t(...l),null==s||null==s.onChange||s.onChange(n),s.key&&null!=s.debug&&s.debug()){const e=Math.round(100*(Date.now()-i))/100,t=Math.round(100*(Date.now()-r))/100,n=t/16,o=(e,t)=>{for(e=String(e);e.length<t;)e=" "+e;return e};console.info("%c⏱ "+o(t,5)+" /"+o(e,5)+" ms","\n            font-size: .6rem;\n            font-weight: bold;\n            color: hsl("+Math.max(0,Math.min(120-120*n,120))+"deg 100% 31%);",null==s?void 0:s.key)}return n}}const c=e=>e,h=e=>{const t=Math.max(e.startIndex-e.overscan,0),s=Math.min(e.endIndex+e.overscan,e.count-1),n=[];for(let e=t;e<=s;e++)n.push(e);return n},u=(e,t)=>{let s={height:-1,width:-1};return n=>{(e.options.horizontal?n.width!==s.width:n.height!==s.height)&&t(n),s=n}},d=(e,t)=>{const s=u(e,t),o=function(e,t){return{observe:function(){var s=0===l.size;l.has(e)?l.get(e).callbacks.push(t):l.set(e,{rect:void 0,hasRectChanged:!1,callbacks:[t]}),s&&r()},unobserve:function(){var s=l.get(e);if(s){var o=s.callbacks.indexOf(t);o>=0&&s.callbacks.splice(o,1),s.callbacks.length||l.delete(e),l.size||cancelAnimationFrame(n)}}}}(e.scrollElement,(e=>{s(e)}));if(e.scrollElement)return s(e.scrollElement.getBoundingClientRect()),o.observe(),()=>{o.unobserve()}},f=(e,t)=>{const s=u(e,t),n=()=>s({width:e.scrollElement.innerWidth,height:e.scrollElement.innerHeight});if(e.scrollElement)return n(),e.scrollElement.addEventListener("resize",n,{capture:!1,passive:!0}),()=>{e.scrollElement.removeEventListener("resize",n)}},m={element:["scrollLeft","scrollTop"],window:["scrollX","scrollY"]},g=e=>(t,s)=>{if(!t.scrollElement)return;const n=m[e][0],o=m[e][1];let i=t.scrollElement[n],l=t.scrollElement[o];const r=()=>{s(t.scrollElement[t.options.horizontal?n:o])};r();const a=e=>{const s=e.currentTarget,a=s[n],c=s[o];(t.options.horizontal?i-a:l-c)&&r(),i=a,l=c};return t.scrollElement.addEventListener("scroll",a,{capture:!1,passive:!0}),()=>{t.scrollElement.removeEventListener("scroll",a)}},p=g("element"),E=g("window"),b=(e,t)=>e.getBoundingClientRect()[t.options.horizontal?"width":"height"],v=(e,t,s)=>{var n;null==(n=s.scrollElement)||null==n.scrollTo||n.scrollTo({[s.options.horizontal?"left":"top"]:e,behavior:t?"smooth":void 0})},O=(e,t,s)=>{var n;null==(n=s.scrollElement)||null==n.scrollTo||n.scrollTo({[s.options.horizontal?"left":"top"]:e,behavior:t?"smooth":void 0})};class w{constructor(e){var t=this;this.unsubs=[],this.scrollElement=null,this.measurementsCache=[],this.itemMeasurementsCache={},this.pendingMeasuredCacheIndexes=[],this.measureElementCache={},this.range={startIndex:0,endIndex:0},this.setOptions=e=>{Object.entries(e).forEach((t=>{let[s,n]=t;void 0===n&&delete e[s]})),this.options={debug:!1,initialOffset:0,overscan:1,paddingStart:0,paddingEnd:0,scrollPaddingStart:0,scrollPaddingEnd:0,horizontal:!1,getItemKey:c,rangeExtractor:h,enableSmoothScroll:!0,onChange:()=>{},measureElement:b,initialRect:{width:0,height:0},...e}},this.notify=()=>{var e,t;null==(e=(t=this.options).onChange)||e.call(t,this)},this.cleanup=()=>{this.unsubs.filter(Boolean).forEach((e=>e())),this.unsubs=[],this.scrollElement=null},this._didMount=()=>()=>{this.cleanup()},this._willUpdate=()=>{const e=this.options.getScrollElement();this.scrollElement!==e&&(this.cleanup(),this.scrollElement=e,this.unsubs.push(this.options.observeElementRect(this,(e=>{this.scrollRect=e,this.calculateRange()}))),this.unsubs.push(this.options.observeElementOffset(this,(e=>{this.scrollOffset=e,this.calculateRange()}))))},this.getSize=()=>this.scrollRect[this.options.horizontal?"width":"height"],this.getMeasurements=a((()=>[this.options.count,this.options.paddingStart,this.options.getItemKey,this.itemMeasurementsCache]),((e,t,s,n)=>{const o=this.pendingMeasuredCacheIndexes.length>0?Math.min(...this.pendingMeasuredCacheIndexes):0;this.pendingMeasuredCacheIndexes=[];const i=this.measurementsCache.slice(0,o);for(let l=o;l<e;l++){const e=s(l),o=n[e],r=i[l-1]?i[l-1].end:t,a="number"==typeof o?o:this.options.estimateSize(l),c=r+a;i[l]={index:l,start:r,size:a,end:c,key:e}}return this.measurementsCache=i,i}),{key:!1,debug:()=>this.options.debug}),this.calculateRange=a((()=>[this.getMeasurements(),this.getSize(),this.scrollOffset]),((e,t,s)=>{const n=function(e){let{measurements:t,outerSize:s,scrollOffset:n}=e;const o=t.length-1,i=((e,t,s,n)=>{for(;e<=t;){const o=(e+t)/2|0,i=s(o);if(i<n)e=o+1;else{if(!(i>n))return o;t=o-1}}return e>0?e-1:0})(0,o,(e=>t[e].start),n);let l=i;for(;l<o&&t[l].end<n+s;)l++;return{startIndex:i,endIndex:l}}({measurements:e,outerSize:t,scrollOffset:s});return n.startIndex===this.range.startIndex&&n.endIndex===this.range.endIndex||(this.range=n,this.notify()),this.range}),{key:!1,debug:()=>this.options.debug}),this.getIndexes=a((()=>[this.options.rangeExtractor,this.range,this.options.overscan,this.options.count]),((e,t,s,n)=>e({...t,overscan:s,count:n})),{key:!1,debug:()=>this.options.debug}),this.getVirtualItems=a((()=>[this.getIndexes(),this.getMeasurements(),this.options.measureElement]),((e,t,s)=>{const n=e=>t=>{var n;const o=this.measurementsCache[e];if(!t)return;const i=s(t,this),l=null!=(n=this.itemMeasurementsCache[o.key])?n:o.size;i!==l&&(o.start<this.scrollOffset&&(this.destinationOffset||this._scrollToOffset(this.scrollOffset+(i-l),!1)),this.pendingMeasuredCacheIndexes.push(e),this.itemMeasurementsCache={...this.itemMeasurementsCache,[o.key]:i},this.notify())},o=[],i={};for(let s=0,r=e.length;s<r;s++){var l;const r=e[s],a={...t[r],measureElement:i[r]=null!=(l=this.measureElementCache[r])?l:n(r)};o.push(a)}return this.measureElementCache=i,o}),{key:!1,debug:()=>this.options.debug}),this.scrollToOffset=function(e,s){let{align:n}=void 0===s?{align:"start"}:s;const o=t.scrollOffset,i=t.getSize();"auto"===n&&(n=e<=o?"start":e>=o+i?"end":"start"),"start"===n?t._scrollToOffset(e,!0):"end"===n?t._scrollToOffset(e-i,!0):"center"===n&&t._scrollToOffset(e-i/2,!0)},this.scrollToIndex=function(e,s){let{align:n,...o}=void 0===s?{align:"auto"}:s;const i=t.getMeasurements(),l=t.scrollOffset,r=t.getSize(),{count:a}=t.options,c=i[Math.max(0,Math.min(e,a-1))];if(!c)return;if("auto"===n)if(c.end>=l+r-t.options.scrollPaddingEnd)n="end";else{if(!(c.start<=l+t.options.scrollPaddingStart))return;n="start"}const h="end"===n?c.end+t.options.scrollPaddingEnd:c.start-t.options.scrollPaddingStart;t.scrollToOffset(h,{align:n,...o})},this.getTotalSize=()=>{var e;return((null==(e=this.getMeasurements()[this.options.count-1])?void 0:e.end)||this.options.paddingStart)+this.options.paddingEnd},this._scrollToOffset=(e,t)=>{let s;clearTimeout(this.scrollCheckFrame),this.destinationOffset=e,this.options.scrollToFn(e,this.options.enableSmoothScroll&&t,this);const n=()=>{let e=this.scrollOffset;this.scrollCheckFrame=s=setTimeout((()=>{this.scrollCheckFrame===s&&(this.scrollOffset!==e?(e=this.scrollOffset,n()):this.destinationOffset=void 0)}),100)};n()},this.measure=()=>{this.itemMeasurementsCache={},this.notify()},this.setOptions(e),this.scrollRect=this.options.initialRect,this.scrollOffset=this.options.initialOffset}}const C="undefined"!=typeof window?o.useLayoutEffect:o.useEffect;function x(e){const t=o.useReducer((()=>({})),{})[1],s={...e,onChange:s=>{t(),null==e.onChange||e.onChange(s)}},[n]=o.useState((()=>new w(s)));return n.setOptions(s),o.useEffect((()=>n._didMount()),[]),C((()=>n._willUpdate())),n}e.Virtualizer=w,e.defaultKeyExtractor=c,e.defaultRangeExtractor=h,e.elementScroll=O,e.measureElement=b,e.memo=a,e.observeElementOffset=p,e.observeElementRect=d,e.observeWindowOffset=E,e.observeWindowRect=f,e.useVirtualizer=function(e){return x({observeElementRect:d,observeElementOffset:p,scrollToFn:O,...e})},e.useWindowVirtualizer=function(e){return x({getScrollElement:()=>"undefined"!=typeof window?window:null,observeElementRect:f,observeElementOffset:E,scrollToFn:v,...e})},e.windowScroll=v,Object.defineProperty(e,"__esModule",{value:!0})}));
+   */function o(e,t,s){let n,o=[];return()=>{let i;s.key&&null!=s.debug&&s.debug()&&(i=Date.now());const l=e();if(!(l.length!==o.length||l.some(((e,t)=>o[t]!==e))))return n;let r;if(o=l,s.key&&null!=s.debug&&s.debug()&&(r=Date.now()),n=t(...l),null==s||null==s.onChange||s.onChange(n),s.key&&null!=s.debug&&s.debug()){const e=Math.round(100*(Date.now()-i))/100,t=Math.round(100*(Date.now()-r))/100,n=t/16,o=(e,t)=>{for(e=String(e);e.length<t;)e=" "+e;return e};console.info("%c⏱ "+o(t,5)+" /"+o(e,5)+" ms","\n            font-size: .6rem;\n            font-weight: bold;\n            color: hsl("+Math.max(0,Math.min(120-120*n,120))+"deg 100% 31%);",null==s?void 0:s.key)}return n}}const i=e=>e,l=e=>{const t=Math.max(e.startIndex-e.overscan,0),s=Math.min(e.endIndex+e.overscan,e.count-1),n=[];for(let e=t;e<=s;e++)n.push(e);return n},r=(e,t)=>{const s=new ResizeObserver((e=>{var s,n;t({width:null==(s=e[0])?void 0:s.contentRect.width,height:null==(n=e[0])?void 0:n.contentRect.height})}));if(e.scrollElement)return t(e.scrollElement.getBoundingClientRect()),s.observe(e.scrollElement),()=>{s.unobserve(e.scrollElement)}},a=(e,t)=>{const s=((e,t)=>{let s={height:-1,width:-1};return n=>{(e.options.horizontal?n.width!==s.width:n.height!==s.height)&&t(n),s=n}})(e,t),n=()=>s({width:e.scrollElement.innerWidth,height:e.scrollElement.innerHeight});if(e.scrollElement)return n(),e.scrollElement.addEventListener("resize",n,{capture:!1,passive:!0}),()=>{e.scrollElement.removeEventListener("resize",n)}},h={element:["scrollLeft","scrollTop"],window:["scrollX","scrollY"]},c=e=>(t,s)=>{if(!t.scrollElement)return;const n=h[e][0],o=h[e][1];let i=t.scrollElement[n],l=t.scrollElement[o];const r=()=>{s(t.scrollElement[t.options.horizontal?n:o])};r();const a=e=>{const s=e.currentTarget,a=s[n],h=s[o];(t.options.horizontal?i-a:l-h)&&r(),i=a,l=h};return t.scrollElement.addEventListener("scroll",a,{capture:!1,passive:!0}),()=>{t.scrollElement.removeEventListener("scroll",a)}},u=c("element"),d=c("window"),f=(e,t)=>e.getBoundingClientRect()[t.options.horizontal?"width":"height"],m=(e,t,s)=>{var n;null==(n=s.scrollElement)||null==n.scrollTo||n.scrollTo({[s.options.horizontal?"left":"top"]:e,behavior:t?"smooth":void 0})},g=(e,t,s)=>{var n;null==(n=s.scrollElement)||null==n.scrollTo||n.scrollTo({[s.options.horizontal?"left":"top"]:e,behavior:t?"smooth":void 0})};class p{constructor(e){var t=this;this.unsubs=[],this.scrollElement=null,this.measurementsCache=[],this.itemMeasurementsCache={},this.pendingMeasuredCacheIndexes=[],this.measureElementCache={},this.range={startIndex:0,endIndex:0},this.setOptions=e=>{Object.entries(e).forEach((t=>{let[s,n]=t;void 0===n&&delete e[s]})),this.options={debug:!1,initialOffset:0,overscan:1,paddingStart:0,paddingEnd:0,scrollPaddingStart:0,scrollPaddingEnd:0,horizontal:!1,getItemKey:i,rangeExtractor:l,enableSmoothScroll:!0,onChange:()=>{},measureElement:f,initialRect:{width:0,height:0},...e}},this.notify=()=>{var e,t;null==(e=(t=this.options).onChange)||e.call(t,this)},this.cleanup=()=>{this.unsubs.filter(Boolean).forEach((e=>e())),this.unsubs=[],this.scrollElement=null},this._didMount=()=>()=>{this.cleanup()},this._willUpdate=()=>{const e=this.options.getScrollElement();this.scrollElement!==e&&(this.cleanup(),this.scrollElement=e,this.unsubs.push(this.options.observeElementRect(this,(e=>{this.scrollRect=e,this.calculateRange()}))),this.unsubs.push(this.options.observeElementOffset(this,(e=>{this.scrollOffset=e,this.calculateRange()}))))},this.getSize=()=>this.scrollRect[this.options.horizontal?"width":"height"],this.getMeasurements=o((()=>[this.options.count,this.options.paddingStart,this.options.getItemKey,this.itemMeasurementsCache]),((e,t,s,n)=>{const o=this.pendingMeasuredCacheIndexes.length>0?Math.min(...this.pendingMeasuredCacheIndexes):0;this.pendingMeasuredCacheIndexes=[];const i=this.measurementsCache.slice(0,o);for(let l=o;l<e;l++){const e=s(l),o=n[e],r=i[l-1]?i[l-1].end:t,a="number"==typeof o?o:this.options.estimateSize(l),h=r+a;i[l]={index:l,start:r,size:a,end:h,key:e}}return this.measurementsCache=i,i}),{key:!1,debug:()=>this.options.debug}),this.calculateRange=o((()=>[this.getMeasurements(),this.getSize(),this.scrollOffset]),((e,t,s)=>{const n=function(e){let{measurements:t,outerSize:s,scrollOffset:n}=e;const o=t.length-1,i=((e,t,s,n)=>{for(;e<=t;){const o=(e+t)/2|0,i=s(o);if(i<n)e=o+1;else{if(!(i>n))return o;t=o-1}}return e>0?e-1:0})(0,o,(e=>t[e].start),n);let l=i;for(;l<o&&t[l].end<n+s;)l++;return{startIndex:i,endIndex:l}}({measurements:e,outerSize:t,scrollOffset:s});return n.startIndex===this.range.startIndex&&n.endIndex===this.range.endIndex||(this.range=n,this.notify()),this.range}),{key:!1,debug:()=>this.options.debug}),this.getIndexes=o((()=>[this.options.rangeExtractor,this.range,this.options.overscan,this.options.count]),((e,t,s,n)=>e({...t,overscan:s,count:n})),{key:!1,debug:()=>this.options.debug}),this.getVirtualItems=o((()=>[this.getIndexes(),this.getMeasurements(),this.options.measureElement]),((e,t,s)=>{const n=e=>t=>{var n;const o=this.measurementsCache[e];if(!t)return;const i=s(t,this),l=null!=(n=this.itemMeasurementsCache[o.key])?n:o.size;i!==l&&(o.start<this.scrollOffset&&(this.destinationOffset||this._scrollToOffset(this.scrollOffset+(i-l),!1)),this.pendingMeasuredCacheIndexes.push(e),this.itemMeasurementsCache={...this.itemMeasurementsCache,[o.key]:i},this.notify())},o=[],i={};for(let s=0,r=e.length;s<r;s++){var l;const r=e[s],a={...t[r],measureElement:i[r]=null!=(l=this.measureElementCache[r])?l:n(r)};o.push(a)}return this.measureElementCache=i,o}),{key:!1,debug:()=>this.options.debug}),this.scrollToOffset=function(e,s){let{align:n}=void 0===s?{align:"start"}:s;const o=t.scrollOffset,i=t.getSize();"auto"===n&&(n=e<=o?"start":e>=o+i?"end":"start"),"start"===n?t._scrollToOffset(e,!0):"end"===n?t._scrollToOffset(e-i,!0):"center"===n&&t._scrollToOffset(e-i/2,!0)},this.scrollToIndex=function(e,s){let{align:n,...o}=void 0===s?{align:"auto"}:s;const i=t.getMeasurements(),l=t.scrollOffset,r=t.getSize(),{count:a}=t.options,h=i[Math.max(0,Math.min(e,a-1))];if(!h)return;if("auto"===n)if(h.end>=l+r-t.options.scrollPaddingEnd)n="end";else{if(!(h.start<=l+t.options.scrollPaddingStart))return;n="start"}const c="end"===n?h.end+t.options.scrollPaddingEnd:h.start-t.options.scrollPaddingStart;t.scrollToOffset(c,{align:n,...o})},this.getTotalSize=()=>{var e;return((null==(e=this.getMeasurements()[this.options.count-1])?void 0:e.end)||this.options.paddingStart)+this.options.paddingEnd},this._scrollToOffset=(e,t)=>{let s;clearTimeout(this.scrollCheckFrame),this.destinationOffset=e,this.options.scrollToFn(e,this.options.enableSmoothScroll&&t,this);const n=()=>{let e=this.scrollOffset;this.scrollCheckFrame=s=setTimeout((()=>{this.scrollCheckFrame===s&&(this.scrollOffset!==e?(e=this.scrollOffset,n()):this.destinationOffset=void 0)}),100)};n()},this.measure=()=>{this.itemMeasurementsCache={},this.notify()},this.setOptions(e),this.scrollRect=this.options.initialRect,this.scrollOffset=this.options.initialOffset}}const E="undefined"!=typeof window?n.useLayoutEffect:n.useEffect;function b(e){const t=n.useReducer((()=>({})),{})[1],s={...e,onChange:s=>{t(),null==e.onChange||e.onChange(s)}},[o]=n.useState((()=>new p(s)));return o.setOptions(s),n.useEffect((()=>o._didMount()),[]),E((()=>o._willUpdate())),o}e.Virtualizer=p,e.defaultKeyExtractor=i,e.defaultRangeExtractor=l,e.elementScroll=g,e.measureElement=f,e.memo=o,e.observeElementOffset=u,e.observeElementRect=r,e.observeWindowOffset=d,e.observeWindowRect=a,e.useVirtualizer=function(e){return b({observeElementRect:r,observeElementOffset:u,scrollToFn:g,...e})},e.useWindowVirtualizer=function(e){return b({getScrollElement:()=>"undefined"!=typeof window?window:null,observeElementRect:a,observeElementOffset:d,scrollToFn:m,...e})},e.windowScroll=m,Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=index.production.js.map

package.json

 {
   "name": "@tanstack/react-virtual",
   "author": "Tanner Linsley",
-  "version": "3.0.0-beta.14",
+  "version": "3.0.0-beta.15",
   "description": "Headless UI for virtualizing scrollable elements in React",
@@ -40,4 +40,3 @@ "license": "MIT",
   "dependencies": {
-    "@reach/observe-rect": "^1.1.0",
-    "@tanstack/virtual-core": "3.0.0-beta.14"
+    "@tanstack/virtual-core": "3.0.0-beta.15"
   },
@@ -44,0 +43,0 @@ "peerDependencies": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Dependency count

2

decreased by-33.33%

Worsened metrics

Total package byte prevSize

311408

decreased by-5.44%

Lines of code

1796

decreased by-8.37%

Dependency changes

• + Added@tanstack/virtual-core@3.0.0-beta.15(transitive)

• - Removed@reach/observe-rect@^1.1.0

• - Removed@reach/observe-rect@1.2.0(transitive)

• - Removed@tanstack/virtual-core@3.0.0-beta.14(transitive)

• Updated@tanstack/virtual-core@3.0.0-beta.15