virtual-scroller 1.13.1 → 1.15.0

package/commonjs/react/useForwardedRef.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = useForwardedRef;
+
+var _react = require("react");
+
+// import type { MutableRefObject } from 'react'
+// When a React component receives a `ref` which it is supposed to "forward"
+// and when it would like to also read that `ref` in its internal implementation,
+// this `useForwardedRef()` hook could be used to get read access to such "forwarded" ref
+// inside the component's internal implementation.
+//
+// ```js
+// const FormWithAutoFocus = forwardRef((props, ref) => {
+//   const { setRef, internalRef } = useForwardedRef<RefValueType>(ref)
+//
+//   useEffect(() => {
+//     internalRef.current.focus()
+//   }, [])
+//
+//   return (
+//     <Form ref={setRef} {...props}/>
+//   )
+// })
+// ```
+//
+// export default function useForwardedRef<T extends MutableRefObject<any>>(ref) {
+function useForwardedRef(ref) {
+  var internalRef = (0, _react.useRef)(); // as T
+
+  var setRef = (0, _react.useCallback)(function (instance) {
+    internalRef.current = instance;
+
+    if (ref) {
+      if (typeof ref === 'function') {
+        ref(instance);
+      } else {
+        ref.current = instance;
+      }
+    }
+  }, [ref]);
+  return {
+    setRef: setRef,
+    internalRef: internalRef
+  };
+}
+//# sourceMappingURL=useForwardedRef.js.map

package/commonjs/react/useForwardedRef.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useForwardedRef.js","names":["useForwardedRef","ref","internalRef","useRef","setRef","useCallback","instance","current"],"sources":["../../source/react/useForwardedRef.js"],"sourcesContent":["// import type { MutableRefObject } from 'react'\r\nimport { useCallback, useRef } from 'react'\r\n\r\n// When a React component receives a `ref` which it is supposed to \"forward\"\r\n// and when it would like to also read that `ref` in its internal implementation,\r\n// this `useForwardedRef()` hook could be used to get read access to such \"forwarded\" ref\r\n// inside the component's internal implementation.\r\n//\r\n// ```js\r\n// const FormWithAutoFocus = forwardRef((props, ref) => {\r\n//   const { setRef, internalRef } = useForwardedRef<RefValueType>(ref)\r\n//\r\n//   useEffect(() => {\r\n//     internalRef.current.focus()\r\n//   }, [])\r\n//\r\n//   return (\r\n//     <Form ref={setRef} {...props}/>\r\n//   )\r\n// })\r\n// ```\r\n//\r\n// export default function useForwardedRef<T extends MutableRefObject<any>>(ref) {\r\nexport default function useForwardedRef(ref) {\r\n\tconst internalRef = useRef() // as T\r\n\r\n\tconst setRef = useCallback((instance) => {\r\n\t\tinternalRef.current = instance\r\n\t\tif (ref) {\r\n\t\t\tif (typeof ref === 'function') {\r\n\t\t\t\tref(instance)\r\n\t\t\t} else {\r\n\t\t\t\tref.current = instance\r\n\t\t\t}\r\n\t\t}\r\n\t}, [ref])\r\n\r\n\treturn { setRef, internalRef }\r\n}\r\n"],"mappings":";;;;;;;AACA;;AADA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe,SAASA,eAAT,CAAyBC,GAAzB,EAA8B;EAC5C,IAAMC,WAAW,GAAG,IAAAC,aAAA,GAApB,CAD4C,CACf;;EAE7B,IAAMC,MAAM,GAAG,IAAAC,kBAAA,EAAY,UAACC,QAAD,EAAc;IACxCJ,WAAW,CAACK,OAAZ,GAAsBD,QAAtB;;IACA,IAAIL,GAAJ,EAAS;MACR,IAAI,OAAOA,GAAP,KAAe,UAAnB,EAA+B;QAC9BA,GAAG,CAACK,QAAD,CAAH;MACA,CAFD,MAEO;QACNL,GAAG,CAACM,OAAJ,GAAcD,QAAd;MACA;IACD;EACD,CATc,EASZ,CAACL,GAAD,CATY,CAAf;EAWA,OAAO;IAAEG,MAAM,EAANA,MAAF;IAAUF,WAAW,EAAXA;EAAV,CAAP;AACA"}

package/commonjs/react/useInstanceMethods.js

@@ -16,20 +16,20 @@ function useInstanceMethods(ref, _ref) {
     return {
       // This is a proxy for `VirtualScroller`'s `.updateLayout` instance method.
       updateLayout: function updateLayout() {
-        return virtualScroller.updateLayout();
+        virtualScroller.updateLayout();
       },
       // (deprecated)
       // `.layout()` method name is deprecated, use `.updateLayout()` instead.
       layout: function layout() {
-        return virtualScroller.updateLayout();
+        virtualScroller.updateLayout();
       },
       // (deprecated)
       updateItem: function updateItem(i) {
-        return (0, _debug.reportError)("[virtual-scroller] \".updateItem(i)\" method of React <VirtualScroller/> has been removed");
+        (0, _debug.reportError)("[virtual-scroller] \".updateItem(i)\" method of React <VirtualScroller/> has been removed");
       },
       // (deprecated)
       renderItem: function renderItem(i) {
-        return (0, _debug.reportError)("[virtual-scroller] \".renderItem(i)\" method of React <VirtualScroller/> has been removed");
+        (0, _debug.reportError)("[virtual-scroller] \".renderItem(i)\" method of React <VirtualScroller/> has been removed");
       }
     };
   }, [virtualScroller]);

package/commonjs/react/useInstanceMethods.js.map

@@ -1 +1 @@
-{"version":3,"file":"useInstanceMethods.js","names":["useInstanceMethods","ref","virtualScroller","useImperativeHandle","updateLayout","layout","updateItem","i","reportError","renderItem"],"sources":["../../source/react/useInstanceMethods.js"],"sourcesContent":["import { useImperativeHandle } from 'react'\r\n\r\nimport { reportError } from '../utility/debug.js'\r\n\r\n// Adds instance methods to the React component.\r\nexport default function useInstanceMethods(ref, {\r\n\tvirtualScroller\r\n}) {\r\n\tuseImperativeHandle(ref, () => ({\r\n\t\t// This is a proxy for `VirtualScroller`'s `.updateLayout` instance method.\r\n\t\tupdateLayout: () => virtualScroller.updateLayout(),\r\n\r\n\t\t// (deprecated)\r\n\t\t// `.layout()` method name is deprecated, use `.updateLayout()` instead.\r\n    layout: () => virtualScroller.updateLayout(),\r\n\r\n\t\t// (deprecated)\r\n\t\tupdateItem: (i) => reportError(`[virtual-scroller] \".updateItem(i)\" method of React <VirtualScroller/> has been removed`),\r\n\r\n\t\t// (deprecated)\r\n\t\trenderItem: (i) => reportError(`[virtual-scroller] \".renderItem(i)\" method of React <VirtualScroller/> has been removed`)\r\n\t}), [\r\n\t\tvirtualScroller\r\n\t])\r\n}"],"mappings":";;;;;;;AAAA;;AAEA;;AAEA;AACe,SAASA,kBAAT,CAA4BC,GAA5B,QAEZ;EAAA,IADFC,eACE,QADFA,eACE;EACF,IAAAC,0BAAA,EAAoBF,GAApB,EAAyB;IAAA,OAAO;MAC/B;MACAG,YAAY,EAAE;QAAA,OAAMF,eAAe,CAACE,YAAhB,EAAN;MAAA,CAFiB;MAI/B;MACA;MACEC,MAAM,EAAE;QAAA,OAAMH,eAAe,CAACE,YAAhB,EAAN;MAAA,CANqB;MAQ/B;MACAE,UAAU,EAAE,oBAACC,CAAD;QAAA,OAAO,IAAAC,kBAAA,8FAAP;MAAA,CATmB;MAW/B;MACAC,UAAU,EAAE,oBAACF,CAAD;QAAA,OAAO,IAAAC,kBAAA,8FAAP;MAAA;IAZmB,CAAP;EAAA,CAAzB,EAaI,CACHN,eADG,CAbJ;AAgBA"}
+{"version":3,"file":"useInstanceMethods.js","names":["useInstanceMethods","ref","virtualScroller","useImperativeHandle","updateLayout","layout","updateItem","i","reportError","renderItem"],"sources":["../../source/react/useInstanceMethods.js"],"sourcesContent":["import { useImperativeHandle } from 'react'\r\n\r\nimport { reportError } from '../utility/debug.js'\r\n\r\n// Adds instance methods to the React component.\r\nexport default function useInstanceMethods(ref, {\r\n\tvirtualScroller\r\n}) {\r\n\tuseImperativeHandle(ref, () => ({\r\n\t\t// This is a proxy for `VirtualScroller`'s `.updateLayout` instance method.\r\n\t\tupdateLayout: () => {\r\n\t\t\tvirtualScroller.updateLayout()\r\n\t\t},\r\n\r\n\t\t// (deprecated)\r\n\t\t// `.layout()` method name is deprecated, use `.updateLayout()` instead.\r\n    layout: () => {\r\n\t\t\tvirtualScroller.updateLayout()\r\n\t\t},\r\n\r\n\t\t// (deprecated)\r\n\t\tupdateItem: (i) => {\r\n\t\t\treportError(`[virtual-scroller] \".updateItem(i)\" method of React <VirtualScroller/> has been removed`)\r\n\t\t},\r\n\r\n\t\t// (deprecated)\r\n\t\trenderItem: (i) => {\r\n\t\t\treportError(`[virtual-scroller] \".renderItem(i)\" method of React <VirtualScroller/> has been removed`)\r\n\t\t}\r\n\t}), [\r\n\t\tvirtualScroller\r\n\t])\r\n}"],"mappings":";;;;;;;AAAA;;AAEA;;AAEA;AACe,SAASA,kBAAT,CAA4BC,GAA5B,QAEZ;EAAA,IADFC,eACE,QADFA,eACE;EACF,IAAAC,0BAAA,EAAoBF,GAApB,EAAyB;IAAA,OAAO;MAC/B;MACAG,YAAY,EAAE,wBAAM;QACnBF,eAAe,CAACE,YAAhB;MACA,CAJ8B;MAM/B;MACA;MACEC,MAAM,EAAE,kBAAM;QACfH,eAAe,CAACE,YAAhB;MACA,CAV8B;MAY/B;MACAE,UAAU,EAAE,oBAACC,CAAD,EAAO;QAClB,IAAAC,kBAAA;MACA,CAf8B;MAiB/B;MACAC,UAAU,EAAE,oBAACF,CAAD,EAAO;QAClB,IAAAC,kBAAA;MACA;IApB8B,CAAP;EAAA,CAAzB,EAqBI,CACHN,eADG,CArBJ;AAwBA"}

package/commonjs/react/useItemKeys.js

@@ -11,17 +11,39 @@ var _react = require("react");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function _createForOfIteratorHelperLoose(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (it) return (it = it.call(o)).next.bind(it); if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; return function () { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
 function useItemKeys(_ref) {
   var getItemId = _ref.getItemId;
-  // List items are rendered with `key`s so that React doesn't
+  // These "listeners" will be called in case the auto-generated item keys are reset
+  // due to the prefix counter number reaching its maximum allowed value.
+  var itemKeysResetEventListeners = (0, _react.useMemo)(function () {
+    return [];
+  }, []); // Adds an "on item keys reset" listener.
+
+  var onItemKeysReset = (0, _react.useCallback)(function (listener) {
+    itemKeysResetEventListeners.push(listener);
+  }, []); // List items are rendered with `key`s so that React doesn't
   // "reuse" `itemComponent`s in cases when `items` are changed.
-  var itemKeyPrefix = (0, _react.useRef)(); // Generates a unique `key` prefix for list item components.
+
+  var itemKeyPrefix = (0, _react.useRef)(); // When no `getItemId()` function is specified, it creates an item key
+  // from an auto-generated unique prefix and the item's index in the `items` array.
+  // This way, when the `items` change, their keys are also changed.
 
   var generateItemKeyPrefix = (0, _react.useMemo)(function () {
     var counter = 0;
 
     function getNextCounter() {
       if (counter === Number.MAX_SAFE_INTEGER) {
+        for (var _iterator = _createForOfIteratorHelperLoose(itemKeysResetEventListeners), _step; !(_step = _iterator()).done;) {
+          var listener = _step.value;
+          listener();
+        }
+
         counter = 0;
       }
 
@@ -32,9 +54,9 @@ function useItemKeys(_ref) {
     return function () {
       itemKeyPrefix.current = String(getNextCounter());
     };
-  }, [itemKeyPrefix]);
+  }, [itemKeyPrefix, itemKeysResetEventListeners]);
   (0, _react.useMemo)(function () {
-    // Generate an initial unique `key` prefix for list item components.
+    // Generate an initial unique `key` prefix for list items.
     generateItemKeyPrefix();
   }, []); // If `getItemId()` function is defined, then item `id`s are gonna be the item element `key`s.
 
@@ -54,13 +76,14 @@ function useItemKeys(_ref) {
 
   var getItemKey = (0, _react.useCallback)(function (item, i) {
     if (getItemId) {
-      return getItemId(item);
+      return String(getItemId(item));
     }
 
     return "".concat(itemKeyPrefix.current, ":").concat(i);
   }, [getItemId, itemKeyPrefix]);
   return {
     getItemKey: getItemKey,
+    onItemKeysReset: onItemKeysReset,
     usesAutogeneratedItemKeys: usesAutogeneratedItemKeys,
     updateItemKeysForNewItems: generateItemKeyPrefixIfNotUsingItemIds
   };

package/commonjs/react/useItemKeys.js.map

@@ -1 +1 @@
-{"version":3,"file":"useItemKeys.js","names":["useItemKeys","getItemId","itemKeyPrefix","useRef","generateItemKeyPrefix","useMemo","counter","getNextCounter","Number","MAX_SAFE_INTEGER","current","String","usesAutogeneratedItemKeys","generateItemKeyPrefixIfNotUsingItemIds","useCallback","log","getItemKey","item","i","updateItemKeysForNewItems"],"sources":["../../source/react/useItemKeys.js"],"sourcesContent":["import log from '../utility/debug.js'\r\n\r\nimport { useRef, useMemo, useCallback } from 'react'\r\n\r\nexport default function useItemKeys({ getItemId }) {\r\n\t// List items are rendered with `key`s so that React doesn't\r\n\t// \"reuse\" `itemComponent`s in cases when `items` are changed.\r\n  const itemKeyPrefix = useRef()\r\n\r\n\t// Generates a unique `key` prefix for list item components.\r\n\tconst generateItemKeyPrefix = useMemo(() => {\r\n\t\tlet counter = 0\r\n\t\tfunction getNextCounter() {\r\n\t\t\tif (counter === Number.MAX_SAFE_INTEGER) {\r\n\t\t\t\tcounter = 0\r\n\t\t\t}\r\n\t\t\tcounter++\r\n\t\t\treturn counter\r\n\t\t}\r\n\t\treturn () => {\r\n\t\t\titemKeyPrefix.current = String(getNextCounter())\r\n\t\t}\r\n\t}, [\r\n\t\titemKeyPrefix\r\n\t])\r\n\r\n\tuseMemo(() => {\r\n\t\t// Generate an initial unique `key` prefix for list item components.\r\n\t\tgenerateItemKeyPrefix()\r\n\t}, [])\r\n\r\n\t// If `getItemId()` function is defined, then item `id`s are gonna be the item element `key`s.\r\n\tconst usesAutogeneratedItemKeys = !getItemId\r\n\r\n\tconst generateItemKeyPrefixIfNotUsingItemIds = useCallback(() => {\r\n\t\tif (usesAutogeneratedItemKeys) {\r\n\t\t\tgenerateItemKeyPrefix()\r\n\t\t\tlog('React: ~ Item key prefix:', itemKeyPrefix.current)\r\n\t\t}\r\n\t}, [\r\n\t\tusesAutogeneratedItemKeys,\r\n\t\tgenerateItemKeyPrefix\r\n\t])\r\n\r\n\t/**\r\n\t * Returns a `key` for an `item`'s element.\r\n\t * @param  {object} item — The item.\r\n\t * @param  {number} i — Item's index in `items` list.\r\n\t * @return {any}\r\n\t */\r\n\tconst getItemKey = useCallback((item, i) => {\r\n\t\tif (getItemId) {\r\n\t\t\treturn getItemId(item)\r\n\t\t}\r\n\t\treturn `${itemKeyPrefix.current}:${i}`\r\n\t}, [\r\n\t\tgetItemId,\r\n\t\titemKeyPrefix\r\n\t])\r\n\r\n\treturn {\r\n\t\tgetItemKey,\r\n\t\tusesAutogeneratedItemKeys,\r\n\t\tupdateItemKeysForNewItems: generateItemKeyPrefixIfNotUsingItemIds\r\n\t}\r\n}"],"mappings":";;;;;;;AAAA;;AAEA;;;;AAEe,SAASA,WAAT,OAAoC;EAAA,IAAbC,SAAa,QAAbA,SAAa;EAClD;EACA;EACC,IAAMC,aAAa,GAAG,IAAAC,aAAA,GAAtB,CAHiD,CAKlD;;EACA,IAAMC,qBAAqB,GAAG,IAAAC,cAAA,EAAQ,YAAM;IAC3C,IAAIC,OAAO,GAAG,CAAd;;IACA,SAASC,cAAT,GAA0B;MACzB,IAAID,OAAO,KAAKE,MAAM,CAACC,gBAAvB,EAAyC;QACxCH,OAAO,GAAG,CAAV;MACA;;MACDA,OAAO;MACP,OAAOA,OAAP;IACA;;IACD,OAAO,YAAM;MACZJ,aAAa,CAACQ,OAAd,GAAwBC,MAAM,CAACJ,cAAc,EAAf,CAA9B;IACA,CAFD;EAGA,CAZ6B,EAY3B,CACFL,aADE,CAZ2B,CAA9B;EAgBA,IAAAG,cAAA,EAAQ,YAAM;IACb;IACAD,qBAAqB;EACrB,CAHD,EAGG,EAHH,EAtBkD,CA2BlD;;EACA,IAAMQ,yBAAyB,GAAG,CAACX,SAAnC;EAEA,IAAMY,sCAAsC,GAAG,IAAAC,kBAAA,EAAY,YAAM;IAChE,IAAIF,yBAAJ,EAA+B;MAC9BR,qBAAqB;MACrB,IAAAW,iBAAA,EAAI,2BAAJ,EAAiCb,aAAa,CAACQ,OAA/C;IACA;EACD,CAL8C,EAK5C,CACFE,yBADE,EAEFR,qBAFE,CAL4C,CAA/C;EAUA;AACD;AACA;AACA;AACA;AACA;;EACC,IAAMY,UAAU,GAAG,IAAAF,kBAAA,EAAY,UAACG,IAAD,EAAOC,CAAP,EAAa;IAC3C,IAAIjB,SAAJ,EAAe;MACd,OAAOA,SAAS,CAACgB,IAAD,CAAhB;IACA;;IACD,iBAAUf,aAAa,CAACQ,OAAxB,cAAmCQ,CAAnC;EACA,CALkB,EAKhB,CACFjB,SADE,EAEFC,aAFE,CALgB,CAAnB;EAUA,OAAO;IACNc,UAAU,EAAVA,UADM;IAENJ,yBAAyB,EAAzBA,yBAFM;IAGNO,yBAAyB,EAAEN;EAHrB,CAAP;AAKA"}
+{"version":3,"file":"useItemKeys.js","names":["useItemKeys","getItemId","itemKeysResetEventListeners","useMemo","onItemKeysReset","useCallback","listener","push","itemKeyPrefix","useRef","generateItemKeyPrefix","counter","getNextCounter","Number","MAX_SAFE_INTEGER","current","String","usesAutogeneratedItemKeys","generateItemKeyPrefixIfNotUsingItemIds","log","getItemKey","item","i","updateItemKeysForNewItems"],"sources":["../../source/react/useItemKeys.js"],"sourcesContent":["import log from '../utility/debug.js'\r\n\r\nimport { useRef, useMemo, useCallback } from 'react'\r\n\r\nexport default function useItemKeys({ getItemId }) {\r\n\t// These \"listeners\" will be called in case the auto-generated item keys are reset\r\n\t// due to the prefix counter number reaching its maximum allowed value.\r\n\tconst itemKeysResetEventListeners = useMemo(() => {\r\n\t\treturn []\r\n\t}, [])\r\n\r\n\t// Adds an \"on item keys reset\" listener.\r\n\tconst onItemKeysReset = useCallback((listener) => {\r\n\t\titemKeysResetEventListeners.push(listener)\r\n\t}, [])\r\n\r\n\t// List items are rendered with `key`s so that React doesn't\r\n\t// \"reuse\" `itemComponent`s in cases when `items` are changed.\r\n  const itemKeyPrefix = useRef()\r\n\r\n\t// When no `getItemId()` function is specified, it creates an item key\r\n\t// from an auto-generated unique prefix and the item's index in the `items` array.\r\n\t// This way, when the `items` change, their keys are also changed.\r\n\tconst generateItemKeyPrefix = useMemo(() => {\r\n\t\tlet counter = 0\r\n\t\tfunction getNextCounter() {\r\n\t\t\tif (counter === Number.MAX_SAFE_INTEGER) {\r\n\t\t\t\tfor (const listener of itemKeysResetEventListeners) {\r\n\t\t\t\t\tlistener()\r\n\t\t\t\t}\r\n\t\t\t\tcounter = 0\r\n\t\t\t}\r\n\t\t\tcounter++\r\n\t\t\treturn counter\r\n\t\t}\r\n\t\treturn () => {\r\n\t\t\titemKeyPrefix.current = String(getNextCounter())\r\n\t\t}\r\n\t}, [\r\n\t\titemKeyPrefix,\r\n\t\titemKeysResetEventListeners\r\n\t])\r\n\r\n\tuseMemo(() => {\r\n\t\t// Generate an initial unique `key` prefix for list items.\r\n\t\tgenerateItemKeyPrefix()\r\n\t}, [])\r\n\r\n\t// If `getItemId()` function is defined, then item `id`s are gonna be the item element `key`s.\r\n\tconst usesAutogeneratedItemKeys = !getItemId\r\n\r\n\tconst generateItemKeyPrefixIfNotUsingItemIds = useCallback(() => {\r\n\t\tif (usesAutogeneratedItemKeys) {\r\n\t\t\tgenerateItemKeyPrefix()\r\n\t\t\tlog('React: ~ Item key prefix:', itemKeyPrefix.current)\r\n\t\t}\r\n\t}, [\r\n\t\tusesAutogeneratedItemKeys,\r\n\t\tgenerateItemKeyPrefix\r\n\t])\r\n\r\n\t/**\r\n\t * Returns a `key` for an `item`'s element.\r\n\t * @param  {object} item — The item.\r\n\t * @param  {number} i — Item's index in `items` list.\r\n\t * @return {any}\r\n\t */\r\n\tconst getItemKey = useCallback((item, i) => {\r\n\t\tif (getItemId) {\r\n\t\t\treturn String(getItemId(item))\r\n\t\t}\r\n\t\treturn `${itemKeyPrefix.current}:${i}`\r\n\t}, [\r\n\t\tgetItemId,\r\n\t\titemKeyPrefix\r\n\t])\r\n\r\n\treturn {\r\n\t\tgetItemKey,\r\n\t\tonItemKeysReset,\r\n\t\tusesAutogeneratedItemKeys,\r\n\t\tupdateItemKeysForNewItems: generateItemKeyPrefixIfNotUsingItemIds\r\n\t}\r\n}"],"mappings":";;;;;;;AAAA;;AAEA;;;;;;;;;;AAEe,SAASA,WAAT,OAAoC;EAAA,IAAbC,SAAa,QAAbA,SAAa;EAClD;EACA;EACA,IAAMC,2BAA2B,GAAG,IAAAC,cAAA,EAAQ,YAAM;IACjD,OAAO,EAAP;EACA,CAFmC,EAEjC,EAFiC,CAApC,CAHkD,CAOlD;;EACA,IAAMC,eAAe,GAAG,IAAAC,kBAAA,EAAY,UAACC,QAAD,EAAc;IACjDJ,2BAA2B,CAACK,IAA5B,CAAiCD,QAAjC;EACA,CAFuB,EAErB,EAFqB,CAAxB,CARkD,CAYlD;EACA;;EACC,IAAME,aAAa,GAAG,IAAAC,aAAA,GAAtB,CAdiD,CAgBlD;EACA;EACA;;EACA,IAAMC,qBAAqB,GAAG,IAAAP,cAAA,EAAQ,YAAM;IAC3C,IAAIQ,OAAO,GAAG,CAAd;;IACA,SAASC,cAAT,GAA0B;MACzB,IAAID,OAAO,KAAKE,MAAM,CAACC,gBAAvB,EAAyC;QACxC,qDAAuBZ,2BAAvB,wCAAoD;UAAA,IAAzCI,QAAyC;UACnDA,QAAQ;QACR;;QACDK,OAAO,GAAG,CAAV;MACA;;MACDA,OAAO;MACP,OAAOA,OAAP;IACA;;IACD,OAAO,YAAM;MACZH,aAAa,CAACO,OAAd,GAAwBC,MAAM,CAACJ,cAAc,EAAf,CAA9B;IACA,CAFD;EAGA,CAf6B,EAe3B,CACFJ,aADE,EAEFN,2BAFE,CAf2B,CAA9B;EAoBA,IAAAC,cAAA,EAAQ,YAAM;IACb;IACAO,qBAAqB;EACrB,CAHD,EAGG,EAHH,EAvCkD,CA4ClD;;EACA,IAAMO,yBAAyB,GAAG,CAAChB,SAAnC;EAEA,IAAMiB,sCAAsC,GAAG,IAAAb,kBAAA,EAAY,YAAM;IAChE,IAAIY,yBAAJ,EAA+B;MAC9BP,qBAAqB;MACrB,IAAAS,iBAAA,EAAI,2BAAJ,EAAiCX,aAAa,CAACO,OAA/C;IACA;EACD,CAL8C,EAK5C,CACFE,yBADE,EAEFP,qBAFE,CAL4C,CAA/C;EAUA;AACD;AACA;AACA;AACA;AACA;;EACC,IAAMU,UAAU,GAAG,IAAAf,kBAAA,EAAY,UAACgB,IAAD,EAAOC,CAAP,EAAa;IAC3C,IAAIrB,SAAJ,EAAe;MACd,OAAOe,MAAM,CAACf,SAAS,CAACoB,IAAD,CAAV,CAAb;IACA;;IACD,iBAAUb,aAAa,CAACO,OAAxB,cAAmCO,CAAnC;EACA,CALkB,EAKhB,CACFrB,SADE,EAEFO,aAFE,CALgB,CAAnB;EAUA,OAAO;IACNY,UAAU,EAAVA,UADM;IAENhB,eAAe,EAAfA,eAFM;IAGNa,yBAAyB,EAAzBA,yBAHM;IAINM,yBAAyB,EAAEL;EAJrB,CAAP;AAMA"}

package/commonjs/react/useOnItemHeightDidChange.js

@@ -8,25 +8,41 @@ exports["default"] = useOnItemHeightDidChange;
 var _react = require("react");
 
 function useOnItemHeightDidChange(_ref) {
-  var initialItemsCount = _ref.initialItemsCount,
+  var getItemKey = _ref.getItemKey,
+      onItemKeysReset = _ref.onItemKeysReset,
       virtualScroller = _ref.virtualScroller;
-  // Only compute the initial cache value once.
-  var initialCacheValue = (0, _react.useMemo)(function () {
-    return new Array(initialItemsCount);
-  }, []); // Handler functions cache.
+  // Only create the initial cache once.
+  var initialCache = (0, _react.useMemo)(function () {
+    return createCache();
+  }, []); // A cache of `onItemHeightDidChange()` functions.
 
-  var cache = (0, _react.useRef)(initialCacheValue); // Caches per-item `onItemHeightDidChange` functions' "references"
+  var cache = (0, _react.useRef)(initialCache); // Adds an "on item keys reset" listener that clears the cache when item keys are reset.
+
+  (0, _react.useMemo)(function () {
+    onItemKeysReset(function () {
+      cache.current = createCache();
+    });
+  }, []); // Caches per-item `onItemHeightDidChange` functions' "references"
   // so that item components don't get re-rendered needlessly.
 
-  var getOnItemHeightDidChange = (0, _react.useCallback)(function (i) {
-    if (!cache.current[i]) {
-      cache.current[i] = function () {
-        return virtualScroller.onItemHeightDidChange(i);
+  var getOnItemHeightDidChange = (0, _react.useCallback)(function (item) {
+    var itemKey = getItemKey(item);
+
+    if (!cache.current[itemKey]) {
+      cache.current[itemKey] = function () {
+        virtualScroller.onItemHeightDidChange(item);
       };
     }
 
-    return cache.current[i];
-  }, [virtualScroller, cache]);
+    return cache.current[itemKey];
+  }, [virtualScroller, getItemKey, cache]);
   return getOnItemHeightDidChange;
 }
+
+function createCache() {
+  // It could also use a `new Map()` here and then use `item` as a key.
+  // Although, sometimes an `item` "reference" might change while it still being
+  // the same item, i.e. having the same `getItemId(item)` value.
+  return {};
+}
 //# sourceMappingURL=useOnItemHeightDidChange.js.map

package/commonjs/react/useOnItemHeightDidChange.js.map

@@ -1 +1 @@
-{"version":3,"file":"useOnItemHeightDidChange.js","names":["useOnItemHeightDidChange","initialItemsCount","virtualScroller","initialCacheValue","useMemo","Array","cache","useRef","getOnItemHeightDidChange","useCallback","i","current","onItemHeightDidChange"],"sources":["../../source/react/useOnItemHeightDidChange.js"],"sourcesContent":["import { useMemo, useRef, useCallback } from 'react'\r\n\r\nexport default function useOnItemHeightDidChange({\r\n\tinitialItemsCount,\r\n\tvirtualScroller\r\n}) {\r\n\t// Only compute the initial cache value once.\r\n\tconst initialCacheValue = useMemo(() => {\r\n\t\treturn new Array(initialItemsCount)\r\n\t}, [])\r\n\r\n\t// Handler functions cache.\r\n\tconst cache = useRef(initialCacheValue)\r\n\r\n\t// Caches per-item `onItemHeightDidChange` functions' \"references\"\r\n\t// so that item components don't get re-rendered needlessly.\r\n\tconst getOnItemHeightDidChange = useCallback((i) => {\r\n\t\tif (!cache.current[i]) {\r\n\t\t\tcache.current[i] = () => virtualScroller.onItemHeightDidChange(i)\r\n\t\t}\r\n\t\treturn cache.current[i]\r\n\t}, [\r\n\t\tvirtualScroller,\r\n\t\tcache\r\n\t])\r\n\r\n\treturn getOnItemHeightDidChange\r\n}"],"mappings":";;;;;;;AAAA;;AAEe,SAASA,wBAAT,OAGZ;EAAA,IAFFC,iBAEE,QAFFA,iBAEE;EAAA,IADFC,eACE,QADFA,eACE;EACF;EACA,IAAMC,iBAAiB,GAAG,IAAAC,cAAA,EAAQ,YAAM;IACvC,OAAO,IAAIC,KAAJ,CAAUJ,iBAAV,CAAP;EACA,CAFyB,EAEvB,EAFuB,CAA1B,CAFE,CAMF;;EACA,IAAMK,KAAK,GAAG,IAAAC,aAAA,EAAOJ,iBAAP,CAAd,CAPE,CASF;EACA;;EACA,IAAMK,wBAAwB,GAAG,IAAAC,kBAAA,EAAY,UAACC,CAAD,EAAO;IACnD,IAAI,CAACJ,KAAK,CAACK,OAAN,CAAcD,CAAd,CAAL,EAAuB;MACtBJ,KAAK,CAACK,OAAN,CAAcD,CAAd,IAAmB;QAAA,OAAMR,eAAe,CAACU,qBAAhB,CAAsCF,CAAtC,CAAN;MAAA,CAAnB;IACA;;IACD,OAAOJ,KAAK,CAACK,OAAN,CAAcD,CAAd,CAAP;EACA,CALgC,EAK9B,CACFR,eADE,EAEFI,KAFE,CAL8B,CAAjC;EAUA,OAAOE,wBAAP;AACA"}
+{"version":3,"file":"useOnItemHeightDidChange.js","names":["useOnItemHeightDidChange","getItemKey","onItemKeysReset","virtualScroller","initialCache","useMemo","createCache","cache","useRef","current","getOnItemHeightDidChange","useCallback","item","itemKey","onItemHeightDidChange"],"sources":["../../source/react/useOnItemHeightDidChange.js"],"sourcesContent":["import { useMemo, useRef, useCallback } from 'react'\r\n\r\nexport default function useOnItemHeightDidChange({\r\n\tgetItemKey,\r\n\tonItemKeysReset,\r\n\tvirtualScroller\r\n}) {\r\n\t// Only create the initial cache once.\r\n\tconst initialCache = useMemo(() => {\r\n\t\treturn createCache()\r\n\t}, [])\r\n\r\n\t// A cache of `onItemHeightDidChange()` functions.\r\n\tconst cache = useRef(initialCache)\r\n\r\n\t// Adds an \"on item keys reset\" listener that clears the cache when item keys are reset.\r\n\tuseMemo(() => {\r\n\t\tonItemKeysReset(() => {\r\n\t\t\tcache.current = createCache()\r\n\t\t})\r\n\t}, [])\r\n\r\n\t// Caches per-item `onItemHeightDidChange` functions' \"references\"\r\n\t// so that item components don't get re-rendered needlessly.\r\n\tconst getOnItemHeightDidChange = useCallback((item) => {\r\n\t\tconst itemKey = getItemKey(item)\r\n\t\tif (!cache.current[itemKey]) {\r\n\t\t\tcache.current[itemKey] = () => {\r\n\t\t\t\tvirtualScroller.onItemHeightDidChange(item)\r\n\t\t\t}\r\n\t\t}\r\n\t\treturn cache.current[itemKey]\r\n\t}, [\r\n\t\tvirtualScroller,\r\n\t\tgetItemKey,\r\n\t\tcache\r\n\t])\r\n\r\n\treturn getOnItemHeightDidChange\r\n}\r\n\r\nfunction createCache() {\r\n\t// It could also use a `new Map()` here and then use `item` as a key.\r\n\t// Although, sometimes an `item` \"reference\" might change while it still being\r\n\t// the same item, i.e. having the same `getItemId(item)` value.\r\n\treturn {}\r\n}"],"mappings":";;;;;;;AAAA;;AAEe,SAASA,wBAAT,OAIZ;EAAA,IAHFC,UAGE,QAHFA,UAGE;EAAA,IAFFC,eAEE,QAFFA,eAEE;EAAA,IADFC,eACE,QADFA,eACE;EACF;EACA,IAAMC,YAAY,GAAG,IAAAC,cAAA,EAAQ,YAAM;IAClC,OAAOC,WAAW,EAAlB;EACA,CAFoB,EAElB,EAFkB,CAArB,CAFE,CAMF;;EACA,IAAMC,KAAK,GAAG,IAAAC,aAAA,EAAOJ,YAAP,CAAd,CAPE,CASF;;EACA,IAAAC,cAAA,EAAQ,YAAM;IACbH,eAAe,CAAC,YAAM;MACrBK,KAAK,CAACE,OAAN,GAAgBH,WAAW,EAA3B;IACA,CAFc,CAAf;EAGA,CAJD,EAIG,EAJH,EAVE,CAgBF;EACA;;EACA,IAAMI,wBAAwB,GAAG,IAAAC,kBAAA,EAAY,UAACC,IAAD,EAAU;IACtD,IAAMC,OAAO,GAAGZ,UAAU,CAACW,IAAD,CAA1B;;IACA,IAAI,CAACL,KAAK,CAACE,OAAN,CAAcI,OAAd,CAAL,EAA6B;MAC5BN,KAAK,CAACE,OAAN,CAAcI,OAAd,IAAyB,YAAM;QAC9BV,eAAe,CAACW,qBAAhB,CAAsCF,IAAtC;MACA,CAFD;IAGA;;IACD,OAAOL,KAAK,CAACE,OAAN,CAAcI,OAAd,CAAP;EACA,CARgC,EAQ9B,CACFV,eADE,EAEFF,UAFE,EAGFM,KAHE,CAR8B,CAAjC;EAcA,OAAOG,wBAAP;AACA;;AAED,SAASJ,WAAT,GAAuB;EACtB;EACA;EACA;EACA,OAAO,EAAP;AACA"}

package/commonjs/react/useSetItemState.js

@@ -8,25 +8,44 @@ exports["default"] = useSetItemState;
 var _react = require("react");
 
 function useSetItemState(_ref) {
-  var initialItemsCount = _ref.initialItemsCount,
+  var getItemKey = _ref.getItemKey,
+      onItemKeysReset = _ref.onItemKeysReset,
       virtualScroller = _ref.virtualScroller;
-  // Only compute the initial cache value once.
-  var initialCacheValue = (0, _react.useMemo)(function () {
-    return new Array(initialItemsCount);
-  }, []); // Handler functions cache.
+  // Only create the initial cache once.
+  var initialCache = (0, _react.useMemo)(function () {
+    return createCache();
+  }, []); // A cache of `setItemState()` functions.
 
-  var cache = (0, _react.useRef)(initialCacheValue); // Caches per-item `setItemState` functions' "references"
+  var cache = (0, _react.useRef)(initialCache); // Adds an "on item keys reset" listener that clears the cache when item keys are reset.
+
+  (0, _react.useMemo)(function () {
+    onItemKeysReset(function () {
+      cache.current = createCache();
+    });
+  }, []); // Caches per-item `setItemState` functions' "references"
   // so that item components don't get re-rendered needlessly.
+  // I.e. it could just re-create this function every time
+  // but that would also make React re-render the item component every time
+  // which wouldn't be efficient.
+
+  var getSetItemState = (0, _react.useCallback)(function (item) {
+    var itemKey = getItemKey(item);
 
-  var getSetItemState = (0, _react.useCallback)(function (i) {
-    if (!cache.current[i]) {
-      cache.current[i] = function (itemState) {
-        return virtualScroller.setItemState(i, itemState);
+    if (!cache.current[itemKey]) {
+      cache.current[itemKey] = function (itemState) {
+        virtualScroller.setItemState(item, itemState);
       };
     }
 
-    return cache.current[i];
-  }, [virtualScroller, cache]);
+    return cache.current[itemKey];
+  }, [virtualScroller, getItemKey, cache]);
   return getSetItemState;
 }
+
+function createCache() {
+  // It could also use a `new Map()` here and then use `item` as a key.
+  // Although, sometimes an `item` "reference" might change while it still being
+  // the same item, i.e. having the same `getItemId(item)` value.
+  return {};
+}
 //# sourceMappingURL=useSetItemState.js.map

package/commonjs/react/useSetItemState.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSetItemState.js","names":["useSetItemState","initialItemsCount","virtualScroller","initialCacheValue","useMemo","Array","cache","useRef","getSetItemState","useCallback","i","current","itemState","setItemState"],"sources":["../../source/react/useSetItemState.js"],"sourcesContent":["import { useMemo, useRef, useCallback } from 'react'\r\n\r\nexport default function useSetItemState({\r\n\tinitialItemsCount,\r\n\tvirtualScroller\r\n}) {\r\n\t// Only compute the initial cache value once.\r\n\tconst initialCacheValue = useMemo(() => {\r\n\t\treturn new Array(initialItemsCount)\r\n\t}, [])\r\n\r\n\t// Handler functions cache.\r\n\tconst cache = useRef(initialCacheValue)\r\n\r\n\t// Caches per-item `setItemState` functions' \"references\"\r\n\t// so that item components don't get re-rendered needlessly.\r\n\tconst getSetItemState = useCallback((i) => {\r\n\t\tif (!cache.current[i]) {\r\n\t\t\tcache.current[i] = (itemState) => virtualScroller.setItemState(i, itemState)\r\n\t\t}\r\n\t\treturn cache.current[i]\r\n\t}, [\r\n\t\tvirtualScroller,\r\n\t\tcache\r\n\t])\r\n\r\n\treturn getSetItemState\r\n}"],"mappings":";;;;;;;AAAA;;AAEe,SAASA,eAAT,OAGZ;EAAA,IAFFC,iBAEE,QAFFA,iBAEE;EAAA,IADFC,eACE,QADFA,eACE;EACF;EACA,IAAMC,iBAAiB,GAAG,IAAAC,cAAA,EAAQ,YAAM;IACvC,OAAO,IAAIC,KAAJ,CAAUJ,iBAAV,CAAP;EACA,CAFyB,EAEvB,EAFuB,CAA1B,CAFE,CAMF;;EACA,IAAMK,KAAK,GAAG,IAAAC,aAAA,EAAOJ,iBAAP,CAAd,CAPE,CASF;EACA;;EACA,IAAMK,eAAe,GAAG,IAAAC,kBAAA,EAAY,UAACC,CAAD,EAAO;IAC1C,IAAI,CAACJ,KAAK,CAACK,OAAN,CAAcD,CAAd,CAAL,EAAuB;MACtBJ,KAAK,CAACK,OAAN,CAAcD,CAAd,IAAmB,UAACE,SAAD;QAAA,OAAeV,eAAe,CAACW,YAAhB,CAA6BH,CAA7B,EAAgCE,SAAhC,CAAf;MAAA,CAAnB;IACA;;IACD,OAAON,KAAK,CAACK,OAAN,CAAcD,CAAd,CAAP;EACA,CALuB,EAKrB,CACFR,eADE,EAEFI,KAFE,CALqB,CAAxB;EAUA,OAAOE,eAAP;AACA"}
+{"version":3,"file":"useSetItemState.js","names":["useSetItemState","getItemKey","onItemKeysReset","virtualScroller","initialCache","useMemo","createCache","cache","useRef","current","getSetItemState","useCallback","item","itemKey","itemState","setItemState"],"sources":["../../source/react/useSetItemState.js"],"sourcesContent":["import { useMemo, useRef, useCallback } from 'react'\r\n\r\nexport default function useSetItemState({\r\n\tgetItemKey,\r\n\tonItemKeysReset,\r\n\tvirtualScroller\r\n}) {\r\n\t// Only create the initial cache once.\r\n\tconst initialCache = useMemo(() => {\r\n\t\treturn createCache()\r\n\t}, [])\r\n\r\n\t// A cache of `setItemState()` functions.\r\n\tconst cache = useRef(initialCache)\r\n\r\n\t// Adds an \"on item keys reset\" listener that clears the cache when item keys are reset.\r\n\tuseMemo(() => {\r\n\t\tonItemKeysReset(() => {\r\n\t\t\tcache.current = createCache()\r\n\t\t})\r\n\t}, [])\r\n\r\n\t// Caches per-item `setItemState` functions' \"references\"\r\n\t// so that item components don't get re-rendered needlessly.\r\n\t// I.e. it could just re-create this function every time\r\n\t// but that would also make React re-render the item component every time\r\n\t// which wouldn't be efficient.\r\n\tconst getSetItemState = useCallback((item) => {\r\n\t\tconst itemKey = getItemKey(item)\r\n\t\tif (!cache.current[itemKey]) {\r\n\t\t\tcache.current[itemKey] = (itemState) => {\r\n\t\t\t\tvirtualScroller.setItemState(item, itemState)\r\n\t\t\t}\r\n\t\t}\r\n\t\treturn cache.current[itemKey]\r\n\t}, [\r\n\t\tvirtualScroller,\r\n\t\tgetItemKey,\r\n\t\tcache\r\n\t])\r\n\r\n\treturn getSetItemState\r\n}\r\n\r\nfunction createCache() {\r\n\t// It could also use a `new Map()` here and then use `item` as a key.\r\n\t// Although, sometimes an `item` \"reference\" might change while it still being\r\n\t// the same item, i.e. having the same `getItemId(item)` value.\r\n\treturn {}\r\n}"],"mappings":";;;;;;;AAAA;;AAEe,SAASA,eAAT,OAIZ;EAAA,IAHFC,UAGE,QAHFA,UAGE;EAAA,IAFFC,eAEE,QAFFA,eAEE;EAAA,IADFC,eACE,QADFA,eACE;EACF;EACA,IAAMC,YAAY,GAAG,IAAAC,cAAA,EAAQ,YAAM;IAClC,OAAOC,WAAW,EAAlB;EACA,CAFoB,EAElB,EAFkB,CAArB,CAFE,CAMF;;EACA,IAAMC,KAAK,GAAG,IAAAC,aAAA,EAAOJ,YAAP,CAAd,CAPE,CASF;;EACA,IAAAC,cAAA,EAAQ,YAAM;IACbH,eAAe,CAAC,YAAM;MACrBK,KAAK,CAACE,OAAN,GAAgBH,WAAW,EAA3B;IACA,CAFc,CAAf;EAGA,CAJD,EAIG,EAJH,EAVE,CAgBF;EACA;EACA;EACA;EACA;;EACA,IAAMI,eAAe,GAAG,IAAAC,kBAAA,EAAY,UAACC,IAAD,EAAU;IAC7C,IAAMC,OAAO,GAAGZ,UAAU,CAACW,IAAD,CAA1B;;IACA,IAAI,CAACL,KAAK,CAACE,OAAN,CAAcI,OAAd,CAAL,EAA6B;MAC5BN,KAAK,CAACE,OAAN,CAAcI,OAAd,IAAyB,UAACC,SAAD,EAAe;QACvCX,eAAe,CAACY,YAAhB,CAA6BH,IAA7B,EAAmCE,SAAnC;MACA,CAFD;IAGA;;IACD,OAAOP,KAAK,CAACE,OAAN,CAAcI,OAAd,CAAP;EACA,CARuB,EAQrB,CACFV,eADE,EAEFF,UAFE,EAGFM,KAHE,CARqB,CAAxB;EAcA,OAAOG,eAAP;AACA;;AAED,SAASJ,WAAT,GAAuB;EACtB;EACA;EACA;EACA,OAAO,EAAP;AACA"}

package/commonjs/react/useState.js

@@ -13,7 +13,7 @@ var _getStateSnapshot = _interopRequireDefault(require("../utility/getStateSnaps
 
 var _react = require("react");
 
-var _useStateNoStaleBug3 = _interopRequireDefault(require("./useStateNoStaleBug.js"));
+var _useStateWithRepeatableRead = _interopRequireDefault(require("./useStateWithRepeatableRead.js"));
 
 var _useInsertionEffectDontMountTwiceInStrictMode = _interopRequireDefault(require("./useInsertionEffectDontMountTwiceInStrictMode.js"));
 
@@ -40,18 +40,17 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 // Creates state management functions.
 function _useState(_ref) {
   var initialState = _ref.initialState,
-      onRender = _ref.onRender,
-      itemsProperty = _ref.itemsProperty;
+      onRender = _ref.onRender;
 
   // This is a state variable that is used to re-render the component.
   // Right after the component has finished re-rendering,
   // `VirtualScroller` state gets updated from this variable.
   // The reason for that is that `VirtualScroller` state must always
   // correspond exactly to what's currently rendered on the screen.
-  var _useStateNoStaleBug = (0, _useStateNoStaleBug3["default"])(initialState),
-      _useStateNoStaleBug2 = _slicedToArray(_useStateNoStaleBug, 2),
-      _newState = _useStateNoStaleBug2[0],
-      _setNewState = _useStateNoStaleBug2[1]; // This `state` reference is what `VirtualScroller` uses internally.
+  var _useStateWithRepeatab = (0, _useStateWithRepeatableRead["default"])(initialState),
+      _useStateWithRepeatab2 = _slicedToArray(_useStateWithRepeatab, 2),
+      _newState = _useStateWithRepeatab2[0],
+      _setNewState = _useStateWithRepeatab2[1]; // This `state` reference is what `VirtualScroller` uses internally.
   // It's the "source of truth" on the actual `VirtualScroller` state.
 
 
@@ -69,11 +68,11 @@ function _useState(_ref) {
   // called `onHeightDidChange()` from its own `useLayoutEffect()`.
   // In those cases, the `itemCompoent`'s effect would run before
   // the `<VirtualScroller/>`'s effect, resulting in
-  // `VirtualScroller.onItemHeightDidChange(i)` being run at a moment in time
+  // `VirtualScroller.onItemHeightDidChange(item)` being run at a moment in time
   // when the DOM has already been updated for the next `VirtualScroller` state
   // but the actual `VirtualScroller` state is still a previous ("stale") one
   // containing "stale" first/last shown item indexes, which would result in an
-  // "index out of bounds" error when `onItemHeightDidChange(i)` tries to access
+  // "index out of bounds" error when `onItemHeightDidChange(item)` tries to access
   // and measure the DOM element from item index `i` which doesn't already/yet exist.
   //
   // An example of such situation could be seen from a `VirtualScroller` debug log
@@ -127,11 +126,11 @@ function _useState(_ref) {
   //
   // ~ Rendered ~
   // "~ Rendered ~" is what gets output when `onRender()` function gets called.
-  // It means that `useLayoutEffect()` was triggered after `onItemHeightDidChange(i)`
+  // It means that `useLayoutEffect()` was triggered after `onItemHeightDidChange(item)`
   // was called and after the "ERROR" happened.
   //
   // The "ERROR" happened because new item indexes 4…5 were actually rendered instead of
-  // item indexes 2…5 by the time the application called `onItemHeightDidChange(i)` function
+  // item indexes 2…5 by the time the application called `onItemHeightDidChange(item)` function
   // inside `itemComponent`'s `useLayoutEffect()`.
   // Item indexes 4…5 is what was requested in a `setState()` call, which called `_setNewState()`.
   // This means that `_newState` changes have been applied to the DOM

package/commonjs/react/useState.js.map

@@ -1 +1 @@
-{"version":3,"file":"useState.js","names":["_useState","initialState","onRender","itemsProperty","useStateNoStaleBug","_newState","_setNewState","state","useRef","getState","useCallback","current","setState","newState","useInsertionEffectDontMountTwiceInStrictMode","isDebug","log","getStateSnapshot","useLayoutEffectDontMountTwiceInStrictMode","stateToRender"],"sources":["../../source/react/useState.js"],"sourcesContent":["import log, { isDebug } from '../utility/debug.js'\r\nimport getStateSnapshot from '../utility/getStateSnapshot.js'\r\n\r\nimport { useRef, useCallback } from 'react'\r\nimport useStateNoStaleBug from './useStateNoStaleBug.js'\r\nimport useInsertionEffectDontMountTwiceInStrictMode from './useInsertionEffectDontMountTwiceInStrictMode.js'\r\nimport useLayoutEffectDontMountTwiceInStrictMode from './useLayoutEffectDontMountTwiceInStrictMode.js'\r\n\r\n// Creates state management functions.\r\nexport default function _useState({\r\n\tinitialState,\r\n\tonRender,\r\n\titemsProperty\r\n}) {\r\n\t// This is a state variable that is used to re-render the component.\r\n\t// Right after the component has finished re-rendering,\r\n\t// `VirtualScroller` state gets updated from this variable.\r\n\t// The reason for that is that `VirtualScroller` state must always\r\n\t// correspond exactly to what's currently rendered on the screen.\r\n\tconst [_newState, _setNewState] = useStateNoStaleBug(initialState)\r\n\r\n\t// This `state` reference is what `VirtualScroller` uses internally.\r\n\t// It's the \"source of truth\" on the actual `VirtualScroller` state.\r\n\tconst state = useRef(initialState)\r\n\r\n\tconst getState = useCallback(() => {\r\n\t\treturn state.current\r\n\t}, [])\r\n\r\n\tconst setState = useCallback((newState) => {\r\n\t\tstate.current = newState\r\n\t}, [])\r\n\r\n\t// Updating of the actual `VirtualScroller` state is done in a\r\n\t// `useInsertionEffect()` rather than in a `useLayoutEffect()`.\r\n\t//\r\n\t// The reason is that using `useLayoutEffect()` would result in\r\n\t// \"breaking\" the `<VirtualScroller/>` when an `itemComponent`\r\n\t// called `onHeightDidChange()` from its own `useLayoutEffect()`.\r\n\t// In those cases, the `itemCompoent`'s effect would run before\r\n\t// the `<VirtualScroller/>`'s effect, resulting in\r\n\t// `VirtualScroller.onItemHeightDidChange(i)` being run at a moment in time\r\n\t// when the DOM has already been updated for the next `VirtualScroller` state\r\n\t// but the actual `VirtualScroller` state is still a previous (\"stale\") one\r\n\t// containing \"stale\" first/last shown item indexes, which would result in an\r\n\t// \"index out of bounds\" error when `onItemHeightDidChange(i)` tries to access\r\n\t// and measure the DOM element from item index `i` which doesn't already/yet exist.\r\n\t//\r\n\t// An example of such situation could be seen from a `VirtualScroller` debug log\r\n\t// which was captured for a case when using `useLayoutEffect()` to update the\r\n\t// \"actual\" `VirtualScroller` state after the corresponding DOM changes have been applied:\r\n\r\n\t// The user has scrolled far enough: perform a re-layout\r\n\t// ~ Update Layout (on scroll) ~\r\n\t//\r\n\t// Item index 2 height is required for calculations but hasn't been measured yet. Mark the item as \"shown\", rerender the list, measure the item's height and redo the layout.\r\n\t//\r\n\t// ~ Calculated Layout ~\r\n\t// Columns count 1\r\n\t// First shown item index 2\r\n\t// Last shown item index 5\r\n\t// …\r\n\t// Item heights (231) [1056.578125, 783.125, empty × 229]\r\n\t// Item states (231) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, …]\r\n\t//\r\n\t// ~ Set state ~\r\n\t// {firstShownItemIndex: 2, lastShownItemIndex: 5, …}\r\n\t//\r\n\t// ~ Rendered ~\r\n\t// State {firstShownItemIndex: 2, lastShownItemIndex: 5, …}\r\n\t//\r\n\t// ~ Measure item heights ~\r\n\t// Item index 2 height 719.8828125\r\n\t// Item index 3 height 961.640625\r\n\t// Item index 4 height 677.6640625\r\n\t// Item index 5 height 1510.1953125\r\n\t//\r\n\t// ~ Update Layout (on non-measured item heights have been measured) ~\r\n\t//\r\n\t// ~ Calculated Layout ~\r\n\t// Columns count 1\r\n\t// First shown item index 4\r\n\t// Last shown item index 5\r\n\t// …\r\n\t// Item heights (231) [1056.578125, 783.125, 719.8828125, 961.640625, 677.6640625, 1510.1953125, empty × 225]\r\n\t// Item states (231) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, …]\r\n\t//\r\n\t// ~ Set state ~\r\n\t// {firstShownItemIndex: 4, lastShownItemIndex: 5, beforeItemsHeight: 3521.2265625, afterItemsHeight: 214090.72265624942}\r\n\t//\r\n\t// ~ On Item Height Did Change was called ~\r\n\t// Item index 5\r\n\t// ~ Re-measure item height ~\r\n\t// ERROR \"onItemHeightDidChange()\" has been called for item index 5 but the item is not currently rendered and can't be measured. The exact error was: Element with index 3 was not found in the list of Rendered Item Elements in the Items Container of Virtual Scroller. There're only 2 Elements there.\r\n\t//\r\n\t// React: ~ The requested state is about to be applied in DOM. Set it as the `VirtualScroller` state. ~\r\n\t// {firstShownItemIndex: 4, lastShownItemIndex: 5, …}\r\n\t//\r\n\t// ~ Rendered ~\r\n\r\n\t// \"~ Rendered ~\" is what gets output when `onRender()` function gets called.\r\n\t// It means that `useLayoutEffect()` was triggered after `onItemHeightDidChange(i)`\r\n\t// was called and after the \"ERROR\" happened.\r\n\t//\r\n\t// The \"ERROR\" happened because new item indexes 4…5 were actually rendered instead of\r\n\t// item indexes 2…5 by the time the application called `onItemHeightDidChange(i)` function\r\n\t// inside `itemComponent`'s `useLayoutEffect()`.\r\n\t// Item indexes 4…5 is what was requested in a `setState()` call, which called `_setNewState()`.\r\n\t// This means that `_newState` changes have been applied to the DOM\r\n\t// but `useLayoutEffect()` wasn't triggered immediately after that.\r\n\t// Instead, it was triggered a right after the `itemComponent`'s `useLayoutEffect()`\r\n\t// because child effects run before parent effects.\r\n\t// So, the `itemComponent`'s `onHeightDidChange()` function call caught the\r\n\t// `VirtualScroller` in an inconsistent state.\r\n\t//\r\n\t// To fix that, `useLayoutEffect()` gets replaced with `useInsertionEffect()`:\r\n\t// https://blog.saeloun.com/2022/06/02/react-18-useinsertioneffect\r\n\t// https://beta.reactjs.org/reference/react/useInsertionEffect\r\n\t//\r\n\t// After replacing `useLayoutEffect()` with `useInsertionEffect()`,\r\n\t// the log shows that there's no more error:\r\n\t//\r\n\t// ~ Set state ~\r\n\t// {firstShownItemIndex: 0, lastShownItemIndex: 2, …}\r\n\t//\r\n\t// React: ~ The requested state is about to be applied in DOM. Set it as the `VirtualScroller` state. ~\r\n\t// {firstShownItemIndex: 0, lastShownItemIndex: 2, …}\r\n\t//\r\n\t// ~ On Item Height Did Change was called ~\r\n\t// Item index 0\r\n\t// ~ Re-measure item height ~\r\n\t// Previous height 917\r\n\t// New height 1064.453125\r\n\t// ~ Item height has changed ~\r\n\t//\r\n\t// An alternative solution would be demanding the `itemComponent` to\r\n\t// accept a `ref` and then measuring the corresponding DOM element height\r\n\t// directly using the `ref`-ed DOM element rather than searching for that\r\n\t// DOM element in the `ItemsContainer`.\r\n\t// So if `useInsertionEffect()` gets removed from React in some hypothetical future,\r\n\t// it could be replaced with using `ref`s on `ItemComponent`s to measure the DOM element heights.\r\n\t//\r\n\tuseInsertionEffectDontMountTwiceInStrictMode(() => {\r\n\t\t// Update the actual `VirtualScroller` state right before the DOM changes\r\n\t\t// are going to be applied for the requested state update.\r\n\t\t//\r\n\t\t// This hook will run right before `useLayoutEffect()`.\r\n\t\t//\r\n\t\t// It doesn't make any difference which one of the two hooks to use to update\r\n\t\t// the actual `VirtualScroller` state in this scenario because the two hooks\r\n\t\t// run synchronously one right after another (insertion effect → DOM update → layout effect)\r\n\t\t// without any free space for any `VirtualScroller` code (like the scroll event handler)\r\n\t\t// to squeeze in and run in-between them, so the `VirtualScroller`'s `state`\r\n\t\t// is always gonna stay consistent with what's currently rendered on screen\r\n\t\t// from the `VirtualScroler`'s point of view, and the short transition period\r\n\t\t// it simply doesn't see because it doesn't \"wake up\" during that period.\r\n\t\t//\r\n\t\t// Updating the actual `VirtualScroller` state right before `useLayoutEffect()`\r\n\t\t// fixes the bug when an `itemComponent` calls `onHeightDidChange()` in its own\r\n\t\t// `useLayoutEffect()` which would run before this `useLayoutEffect()`\r\n\t\t// because children's effects run before parent's.\r\n\t\t//\r\n\t\t// This hook doesn't do anything at the initial render.\r\n\t\t//\r\n\t\tif (isDebug()) {\r\n\t\t\tlog('React: ~ The requested state is about to be applied in DOM. Setting it as the `VirtualScroller` state. ~')\r\n\t\t\tlog(getStateSnapshot(_newState))\r\n\t\t}\r\n\t\tsetState(_newState)\r\n\t}, [_newState])\r\n\r\n\tuseLayoutEffectDontMountTwiceInStrictMode(() => {\r\n\t\t// Call `onRender()` right after a requested state update has been applied,\r\n\t\t// and also right after the initial render.\r\n\t\tonRender()\r\n\t}, [_newState])\r\n\r\n\treturn {\r\n\t\t// This is the state the component should render.\r\n\t\tstateToRender: _newState,\r\n\r\n\t\t// Returns the current state of the `VirtualScroller`.\r\n\t\t// This function is used in the `VirtualScroller` itself\r\n\t\t// because the `state` is managed outside of it.\r\n\t\tgetState,\r\n\r\n\t\t// Requests a state update.\r\n\t\tsetState: _setNewState\r\n\t}\r\n}"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AAEA;AACe,SAASA,SAAT,OAIZ;EAAA,IAHFC,YAGE,QAHFA,YAGE;EAAA,IAFFC,QAEE,QAFFA,QAEE;EAAA,IADFC,aACE,QADFA,aACE;;EACF;EACA;EACA;EACA;EACA;EACA,0BAAkC,IAAAC,+BAAA,EAAmBH,YAAnB,CAAlC;EAAA;EAAA,IAAOI,SAAP;EAAA,IAAkBC,YAAlB,2BANE,CAQF;EACA;;;EACA,IAAMC,KAAK,GAAG,IAAAC,aAAA,EAAOP,YAAP,CAAd;EAEA,IAAMQ,QAAQ,GAAG,IAAAC,kBAAA,EAAY,YAAM;IAClC,OAAOH,KAAK,CAACI,OAAb;EACA,CAFgB,EAEd,EAFc,CAAjB;EAIA,IAAMC,QAAQ,GAAG,IAAAF,kBAAA,EAAY,UAACG,QAAD,EAAc;IAC1CN,KAAK,CAACI,OAAN,GAAgBE,QAAhB;EACA,CAFgB,EAEd,EAFc,CAAjB,CAhBE,CAoBF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;EACA,IAAAC,wDAAA,EAA6C,YAAM;IAClD;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA,IAAI,IAAAC,cAAA,GAAJ,EAAe;MACd,IAAAC,iBAAA,EAAI,0GAAJ;MACA,IAAAA,iBAAA,EAAI,IAAAC,4BAAA,EAAiBZ,SAAjB,CAAJ;IACA;;IACDO,QAAQ,CAACP,SAAD,CAAR;EACA,CA3BD,EA2BG,CAACA,SAAD,CA3BH;EA6BA,IAAAa,qDAAA,EAA0C,YAAM;IAC/C;IACA;IACAhB,QAAQ;EACR,CAJD,EAIG,CAACG,SAAD,CAJH;EAMA,OAAO;IACN;IACAc,aAAa,EAAEd,SAFT;IAIN;IACA;IACA;IACAI,QAAQ,EAARA,QAPM;IASN;IACAG,QAAQ,EAAEN;EAVJ,CAAP;AAYA"}
+{"version":3,"file":"useState.js","names":["_useState","initialState","onRender","useStateWithRepeatableRead","_newState","_setNewState","state","useRef","getState","useCallback","current","setState","newState","useInsertionEffectDontMountTwiceInStrictMode","isDebug","log","getStateSnapshot","useLayoutEffectDontMountTwiceInStrictMode","stateToRender"],"sources":["../../source/react/useState.js"],"sourcesContent":["import log, { isDebug } from '../utility/debug.js'\r\nimport getStateSnapshot from '../utility/getStateSnapshot.js'\r\n\r\nimport { useRef, useCallback } from 'react'\r\nimport useStateWithRepeatableRead from './useStateWithRepeatableRead.js'\r\nimport useInsertionEffectDontMountTwiceInStrictMode from './useInsertionEffectDontMountTwiceInStrictMode.js'\r\nimport useLayoutEffectDontMountTwiceInStrictMode from './useLayoutEffectDontMountTwiceInStrictMode.js'\r\n\r\n// Creates state management functions.\r\nexport default function _useState({\r\n\tinitialState,\r\n\tonRender\r\n}) {\r\n\t// This is a state variable that is used to re-render the component.\r\n\t// Right after the component has finished re-rendering,\r\n\t// `VirtualScroller` state gets updated from this variable.\r\n\t// The reason for that is that `VirtualScroller` state must always\r\n\t// correspond exactly to what's currently rendered on the screen.\r\n\tconst [_newState, _setNewState] = useStateWithRepeatableRead(initialState)\r\n\r\n\t// This `state` reference is what `VirtualScroller` uses internally.\r\n\t// It's the \"source of truth\" on the actual `VirtualScroller` state.\r\n\tconst state = useRef(initialState)\r\n\r\n\tconst getState = useCallback(() => {\r\n\t\treturn state.current\r\n\t}, [])\r\n\r\n\tconst setState = useCallback((newState) => {\r\n\t\tstate.current = newState\r\n\t}, [])\r\n\r\n\t// Updating of the actual `VirtualScroller` state is done in a\r\n\t// `useInsertionEffect()` rather than in a `useLayoutEffect()`.\r\n\t//\r\n\t// The reason is that using `useLayoutEffect()` would result in\r\n\t// \"breaking\" the `<VirtualScroller/>` when an `itemComponent`\r\n\t// called `onHeightDidChange()` from its own `useLayoutEffect()`.\r\n\t// In those cases, the `itemCompoent`'s effect would run before\r\n\t// the `<VirtualScroller/>`'s effect, resulting in\r\n\t// `VirtualScroller.onItemHeightDidChange(item)` being run at a moment in time\r\n\t// when the DOM has already been updated for the next `VirtualScroller` state\r\n\t// but the actual `VirtualScroller` state is still a previous (\"stale\") one\r\n\t// containing \"stale\" first/last shown item indexes, which would result in an\r\n\t// \"index out of bounds\" error when `onItemHeightDidChange(item)` tries to access\r\n\t// and measure the DOM element from item index `i` which doesn't already/yet exist.\r\n\t//\r\n\t// An example of such situation could be seen from a `VirtualScroller` debug log\r\n\t// which was captured for a case when using `useLayoutEffect()` to update the\r\n\t// \"actual\" `VirtualScroller` state after the corresponding DOM changes have been applied:\r\n\r\n\t// The user has scrolled far enough: perform a re-layout\r\n\t// ~ Update Layout (on scroll) ~\r\n\t//\r\n\t// Item index 2 height is required for calculations but hasn't been measured yet. Mark the item as \"shown\", rerender the list, measure the item's height and redo the layout.\r\n\t//\r\n\t// ~ Calculated Layout ~\r\n\t// Columns count 1\r\n\t// First shown item index 2\r\n\t// Last shown item index 5\r\n\t// …\r\n\t// Item heights (231) [1056.578125, 783.125, empty × 229]\r\n\t// Item states (231) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, …]\r\n\t//\r\n\t// ~ Set state ~\r\n\t// {firstShownItemIndex: 2, lastShownItemIndex: 5, …}\r\n\t//\r\n\t// ~ Rendered ~\r\n\t// State {firstShownItemIndex: 2, lastShownItemIndex: 5, …}\r\n\t//\r\n\t// ~ Measure item heights ~\r\n\t// Item index 2 height 719.8828125\r\n\t// Item index 3 height 961.640625\r\n\t// Item index 4 height 677.6640625\r\n\t// Item index 5 height 1510.1953125\r\n\t//\r\n\t// ~ Update Layout (on non-measured item heights have been measured) ~\r\n\t//\r\n\t// ~ Calculated Layout ~\r\n\t// Columns count 1\r\n\t// First shown item index 4\r\n\t// Last shown item index 5\r\n\t// …\r\n\t// Item heights (231) [1056.578125, 783.125, 719.8828125, 961.640625, 677.6640625, 1510.1953125, empty × 225]\r\n\t// Item states (231) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, …]\r\n\t//\r\n\t// ~ Set state ~\r\n\t// {firstShownItemIndex: 4, lastShownItemIndex: 5, beforeItemsHeight: 3521.2265625, afterItemsHeight: 214090.72265624942}\r\n\t//\r\n\t// ~ On Item Height Did Change was called ~\r\n\t// Item index 5\r\n\t// ~ Re-measure item height ~\r\n\t// ERROR \"onItemHeightDidChange()\" has been called for item index 5 but the item is not currently rendered and can't be measured. The exact error was: Element with index 3 was not found in the list of Rendered Item Elements in the Items Container of Virtual Scroller. There're only 2 Elements there.\r\n\t//\r\n\t// React: ~ The requested state is about to be applied in DOM. Set it as the `VirtualScroller` state. ~\r\n\t// {firstShownItemIndex: 4, lastShownItemIndex: 5, …}\r\n\t//\r\n\t// ~ Rendered ~\r\n\r\n\t// \"~ Rendered ~\" is what gets output when `onRender()` function gets called.\r\n\t// It means that `useLayoutEffect()` was triggered after `onItemHeightDidChange(item)`\r\n\t// was called and after the \"ERROR\" happened.\r\n\t//\r\n\t// The \"ERROR\" happened because new item indexes 4…5 were actually rendered instead of\r\n\t// item indexes 2…5 by the time the application called `onItemHeightDidChange(item)` function\r\n\t// inside `itemComponent`'s `useLayoutEffect()`.\r\n\t// Item indexes 4…5 is what was requested in a `setState()` call, which called `_setNewState()`.\r\n\t// This means that `_newState` changes have been applied to the DOM\r\n\t// but `useLayoutEffect()` wasn't triggered immediately after that.\r\n\t// Instead, it was triggered a right after the `itemComponent`'s `useLayoutEffect()`\r\n\t// because child effects run before parent effects.\r\n\t// So, the `itemComponent`'s `onHeightDidChange()` function call caught the\r\n\t// `VirtualScroller` in an inconsistent state.\r\n\t//\r\n\t// To fix that, `useLayoutEffect()` gets replaced with `useInsertionEffect()`:\r\n\t// https://blog.saeloun.com/2022/06/02/react-18-useinsertioneffect\r\n\t// https://beta.reactjs.org/reference/react/useInsertionEffect\r\n\t//\r\n\t// After replacing `useLayoutEffect()` with `useInsertionEffect()`,\r\n\t// the log shows that there's no more error:\r\n\t//\r\n\t// ~ Set state ~\r\n\t// {firstShownItemIndex: 0, lastShownItemIndex: 2, …}\r\n\t//\r\n\t// React: ~ The requested state is about to be applied in DOM. Set it as the `VirtualScroller` state. ~\r\n\t// {firstShownItemIndex: 0, lastShownItemIndex: 2, …}\r\n\t//\r\n\t// ~ On Item Height Did Change was called ~\r\n\t// Item index 0\r\n\t// ~ Re-measure item height ~\r\n\t// Previous height 917\r\n\t// New height 1064.453125\r\n\t// ~ Item height has changed ~\r\n\t//\r\n\t// An alternative solution would be demanding the `itemComponent` to\r\n\t// accept a `ref` and then measuring the corresponding DOM element height\r\n\t// directly using the `ref`-ed DOM element rather than searching for that\r\n\t// DOM element in the `ItemsContainer`.\r\n\t// So if `useInsertionEffect()` gets removed from React in some hypothetical future,\r\n\t// it could be replaced with using `ref`s on `ItemComponent`s to measure the DOM element heights.\r\n\t//\r\n\tuseInsertionEffectDontMountTwiceInStrictMode(() => {\r\n\t\t// Update the actual `VirtualScroller` state right before the DOM changes\r\n\t\t// are going to be applied for the requested state update.\r\n\t\t//\r\n\t\t// This hook will run right before `useLayoutEffect()`.\r\n\t\t//\r\n\t\t// It doesn't make any difference which one of the two hooks to use to update\r\n\t\t// the actual `VirtualScroller` state in this scenario because the two hooks\r\n\t\t// run synchronously one right after another (insertion effect → DOM update → layout effect)\r\n\t\t// without any free space for any `VirtualScroller` code (like the scroll event handler)\r\n\t\t// to squeeze in and run in-between them, so the `VirtualScroller`'s `state`\r\n\t\t// is always gonna stay consistent with what's currently rendered on screen\r\n\t\t// from the `VirtualScroler`'s point of view, and the short transition period\r\n\t\t// it simply doesn't see because it doesn't \"wake up\" during that period.\r\n\t\t//\r\n\t\t// Updating the actual `VirtualScroller` state right before `useLayoutEffect()`\r\n\t\t// fixes the bug when an `itemComponent` calls `onHeightDidChange()` in its own\r\n\t\t// `useLayoutEffect()` which would run before this `useLayoutEffect()`\r\n\t\t// because children's effects run before parent's.\r\n\t\t//\r\n\t\t// This hook doesn't do anything at the initial render.\r\n\t\t//\r\n\t\tif (isDebug()) {\r\n\t\t\tlog('React: ~ The requested state is about to be applied in DOM. Setting it as the `VirtualScroller` state. ~')\r\n\t\t\tlog(getStateSnapshot(_newState))\r\n\t\t}\r\n\t\tsetState(_newState)\r\n\t}, [_newState])\r\n\r\n\tuseLayoutEffectDontMountTwiceInStrictMode(() => {\r\n\t\t// Call `onRender()` right after a requested state update has been applied,\r\n\t\t// and also right after the initial render.\r\n\t\tonRender()\r\n\t}, [_newState])\r\n\r\n\treturn {\r\n\t\t// This is the state the component should render.\r\n\t\tstateToRender: _newState,\r\n\r\n\t\t// Returns the current state of the `VirtualScroller`.\r\n\t\t// This function is used in the `VirtualScroller` itself\r\n\t\t// because the `state` is managed outside of it.\r\n\t\tgetState,\r\n\r\n\t\t// Requests a state update.\r\n\t\tsetState: _setNewState\r\n\t}\r\n}"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AAEA;AACe,SAASA,SAAT,OAGZ;EAAA,IAFFC,YAEE,QAFFA,YAEE;EAAA,IADFC,QACE,QADFA,QACE;;EACF;EACA;EACA;EACA;EACA;EACA,4BAAkC,IAAAC,sCAAA,EAA2BF,YAA3B,CAAlC;EAAA;EAAA,IAAOG,SAAP;EAAA,IAAkBC,YAAlB,6BANE,CAQF;EACA;;;EACA,IAAMC,KAAK,GAAG,IAAAC,aAAA,EAAON,YAAP,CAAd;EAEA,IAAMO,QAAQ,GAAG,IAAAC,kBAAA,EAAY,YAAM;IAClC,OAAOH,KAAK,CAACI,OAAb;EACA,CAFgB,EAEd,EAFc,CAAjB;EAIA,IAAMC,QAAQ,GAAG,IAAAF,kBAAA,EAAY,UAACG,QAAD,EAAc;IAC1CN,KAAK,CAACI,OAAN,GAAgBE,QAAhB;EACA,CAFgB,EAEd,EAFc,CAAjB,CAhBE,CAoBF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;EACA,IAAAC,wDAAA,EAA6C,YAAM;IAClD;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA,IAAI,IAAAC,cAAA,GAAJ,EAAe;MACd,IAAAC,iBAAA,EAAI,0GAAJ;MACA,IAAAA,iBAAA,EAAI,IAAAC,4BAAA,EAAiBZ,SAAjB,CAAJ;IACA;;IACDO,QAAQ,CAACP,SAAD,CAAR;EACA,CA3BD,EA2BG,CAACA,SAAD,CA3BH;EA6BA,IAAAa,qDAAA,EAA0C,YAAM;IAC/C;IACA;IACAf,QAAQ;EACR,CAJD,EAIG,CAACE,SAAD,CAJH;EAMA,OAAO;IACN;IACAc,aAAa,EAAEd,SAFT;IAIN;IACA;IACA;IACAI,QAAQ,EAARA,QAPM;IASN;IACAG,QAAQ,EAAEN;EAVJ,CAAP;AAYA"}

package/commonjs/react/{useStateNoStaleBug.js → useStateWithRepeatableRead.js}

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = useStateNoStaleBug;
+exports["default"] = useStateWithRepeatableRead;
 
 var _react = require("react");
 
@@ -21,7 +21,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 // This hook fixes any weird intermediate inconsistent/invalid/stale state values.
 // https://github.com/facebook/react/issues/25023#issuecomment-1480463544
-function useStateNoStaleBug(initialState) {
+function useStateWithRepeatableRead(initialState) {
   // const latestValidState = useRef(initialState)
   var latestWrittenState = (0, _react.useRef)(initialState);
 
@@ -56,4 +56,4 @@ function useStateNoStaleBug(initialState) {
   }, []);
   return [state, setState];
 }
-//# sourceMappingURL=useStateNoStaleBug.js.map
+//# sourceMappingURL=useStateWithRepeatableRead.js.map

package/commonjs/react/useStateWithRepeatableRead.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStateWithRepeatableRead.js","names":["useStateWithRepeatableRead","initialState","latestWrittenState","useRef","useState","_state","_setState","state","current","setState","useCallback","newState","Error"],"sources":["../../source/react/useStateWithRepeatableRead.js"],"sourcesContent":["import { useRef, useState, useCallback } from 'react'\r\n\r\n// This hook fixes any weird intermediate inconsistent/invalid/stale state values.\r\n// https://github.com/facebook/react/issues/25023#issuecomment-1480463544\r\nexport default function useStateWithRepeatableRead(initialState) {\r\n  // const latestValidState = useRef(initialState)\r\n  const latestWrittenState = useRef(initialState)\r\n  const [_state, _setState] = useState(initialState)\r\n\r\n  // Instead of dealing with a potentially out-of-sync (stale) state value,\r\n  // simply use the correct latest one.\r\n  const state = latestWrittenState.current\r\n\r\n  /*\r\n  let state\r\n  if (_state === latestWrittenState.current) {\r\n    state = _state\r\n    latestValidState.current = _state\r\n  } else {\r\n    // React bug detected: an out-of-sync (stale) state value received.\r\n    // Ignore the out-of-sync (stale) state value.\r\n    state = latestValidState.current\r\n  }\r\n  */\r\n\r\n  const setState = useCallback((newState) => {\r\n    if (typeof newState === 'function') {\r\n      throw new Error('Function argument of `setState()` function is not supported by this hook')\r\n    }\r\n    latestWrittenState.current = newState\r\n    _setState(newState)\r\n  }, [])\r\n\r\n  return [state, setState]\r\n}"],"mappings":";;;;;;;AAAA;;;;;;;;;;;;;;AAEA;AACA;AACe,SAASA,0BAAT,CAAoCC,YAApC,EAAkD;EAC/D;EACA,IAAMC,kBAAkB,GAAG,IAAAC,aAAA,EAAOF,YAAP,CAA3B;;EACA,gBAA4B,IAAAG,eAAA,EAASH,YAAT,CAA5B;EAAA;EAAA,IAAOI,MAAP;EAAA,IAAeC,SAAf,iBAH+D,CAK/D;EACA;;;EACA,IAAMC,KAAK,GAAGL,kBAAkB,CAACM,OAAjC;EAEA;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;EAEE,IAAMC,QAAQ,GAAG,IAAAC,kBAAA,EAAY,UAACC,QAAD,EAAc;IACzC,IAAI,OAAOA,QAAP,KAAoB,UAAxB,EAAoC;MAClC,MAAM,IAAIC,KAAJ,CAAU,0EAAV,CAAN;IACD;;IACDV,kBAAkB,CAACM,OAAnB,GAA6BG,QAA7B;;IACAL,SAAS,CAACK,QAAD,CAAT;EACD,CANgB,EAMd,EANc,CAAjB;EAQA,OAAO,CAACJ,KAAD,EAAQE,QAAR,CAAP;AACD"}

package/commonjs/react/useStyle.js

@@ -9,19 +9,25 @@ var _px = _interopRequireDefault(require("../utility/px.js"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function useStyle(_ref) {
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function useStyle(style, _ref) {
   var tbody = _ref.tbody,
       state = _ref.state;
 
   if (tbody) {
-    return;
+    return style;
   }
 
   var beforeItemsHeight = state.beforeItemsHeight,
       afterItemsHeight = state.afterItemsHeight;
-  return {
+  return _objectSpread(_objectSpread({}, style), {}, {
     paddingTop: (0, _px["default"])(beforeItemsHeight),
     paddingBottom: (0, _px["default"])(afterItemsHeight)
-  };
+  });
 }
 //# sourceMappingURL=useStyle.js.map

package/commonjs/react/useStyle.js.map

@@ -1 +1 @@
-{"version":3,"file":"useStyle.js","names":["useStyle","tbody","state","beforeItemsHeight","afterItemsHeight","paddingTop","px","paddingBottom"],"sources":["../../source/react/useStyle.js"],"sourcesContent":["import px from '../utility/px.js'\r\n\r\nexport default function useStyle({\r\n\ttbody,\r\n\tstate\r\n}) {\r\n\tif (tbody) {\r\n\t\treturn\r\n\t}\r\n\r\n\tconst {\r\n\t\tbeforeItemsHeight,\r\n\t\tafterItemsHeight\r\n\t} = state\r\n\r\n\treturn {\r\n\t\tpaddingTop: px(beforeItemsHeight),\r\n\t\tpaddingBottom: px(afterItemsHeight)\r\n\t}\r\n}"],"mappings":";;;;;;;AAAA;;;;AAEe,SAASA,QAAT,OAGZ;EAAA,IAFFC,KAEE,QAFFA,KAEE;EAAA,IADFC,KACE,QADFA,KACE;;EACF,IAAID,KAAJ,EAAW;IACV;EACA;;EAED,IACCE,iBADD,GAGID,KAHJ,CACCC,iBADD;EAAA,IAECC,gBAFD,GAGIF,KAHJ,CAECE,gBAFD;EAKA,OAAO;IACNC,UAAU,EAAE,IAAAC,cAAA,EAAGH,iBAAH,CADN;IAENI,aAAa,EAAE,IAAAD,cAAA,EAAGF,gBAAH;EAFT,CAAP;AAIA"}
+{"version":3,"file":"useStyle.js","names":["useStyle","style","tbody","state","beforeItemsHeight","afterItemsHeight","paddingTop","px","paddingBottom"],"sources":["../../source/react/useStyle.js"],"sourcesContent":["import px from '../utility/px.js'\r\n\r\nexport default function useStyle(style, {\r\n\ttbody,\r\n\tstate\r\n}) {\r\n\tif (tbody) {\r\n\t\treturn style\r\n\t}\r\n\r\n\tconst {\r\n\t\tbeforeItemsHeight,\r\n\t\tafterItemsHeight\r\n\t} = state\r\n\r\n\treturn {\r\n\t\t...style,\r\n\t\tpaddingTop: px(beforeItemsHeight),\r\n\t\tpaddingBottom: px(afterItemsHeight)\r\n\t}\r\n}"],"mappings":";;;;;;;AAAA;;;;;;;;;;AAEe,SAASA,QAAT,CAAkBC,KAAlB,QAGZ;EAAA,IAFFC,KAEE,QAFFA,KAEE;EAAA,IADFC,KACE,QADFA,KACE;;EACF,IAAID,KAAJ,EAAW;IACV,OAAOD,KAAP;EACA;;EAED,IACCG,iBADD,GAGID,KAHJ,CACCC,iBADD;EAAA,IAECC,gBAFD,GAGIF,KAHJ,CAECE,gBAFD;EAKA,uCACIJ,KADJ;IAECK,UAAU,EAAE,IAAAC,cAAA,EAAGH,iBAAH,CAFb;IAGCI,aAAa,EAAE,IAAAD,cAAA,EAAGF,gBAAH;EAHhB;AAKA"}

package/commonjs/react/useValidateTableBodyItemsContainer.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = useValidateTableBodyItemsContainer;
+
+var _react = require("react");
+
+// A developer might "forget" to pass `itemsContainerComponent="tbody"` property
+// when using a `<tbody/>` as a container for list items.
+// This hook validates that the developer didn't "forget" to do that in such case.
+function useValidateTableBodyItemsContainer(_ref) {
+  var virtualScroller = _ref.virtualScroller,
+      tbody = _ref.tbody;
+  (0, _react.useEffect)(function () {
+    var isTableBodyItemsContainer = virtualScroller.isItemsContainerElementTableBody();
+
+    if (isTableBodyItemsContainer && !tbody) {
+      console.error('[virtual-scroller] When using `<tbody/>` as a container for list items, `itemsContainerComponent` property must be `"tbody"`');
+    }
+  }, []);
+}
+//# sourceMappingURL=useValidateTableBodyItemsContainer.js.map

package/commonjs/react/useValidateTableBodyItemsContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useValidateTableBodyItemsContainer.js","names":["useValidateTableBodyItemsContainer","virtualScroller","tbody","useEffect","isTableBodyItemsContainer","isItemsContainerElementTableBody","console","error"],"sources":["../../source/react/useValidateTableBodyItemsContainer.js"],"sourcesContent":["import { useEffect } from 'react'\r\n\r\n// A developer might \"forget\" to pass `itemsContainerComponent=\"tbody\"` property\r\n// when using a `<tbody/>` as a container for list items.\r\n// This hook validates that the developer didn't \"forget\" to do that in such case.\r\nexport default function useValidateTableBodyItemsContainer({\r\n\tvirtualScroller,\r\n\ttbody\r\n}) {\r\n\tuseEffect(() => {\r\n\t\tconst isTableBodyItemsContainer = virtualScroller.isItemsContainerElementTableBody()\r\n\t\tif (isTableBodyItemsContainer && !tbody) {\r\n\t\t\tconsole.error('[virtual-scroller] When using `<tbody/>` as a container for list items, `itemsContainerComponent` property must be `\"tbody\"`')\r\n\t\t}\r\n\t}, [])\r\n}"],"mappings":";;;;;;;AAAA;;AAEA;AACA;AACA;AACe,SAASA,kCAAT,OAGZ;EAAA,IAFFC,eAEE,QAFFA,eAEE;EAAA,IADFC,KACE,QADFA,KACE;EACF,IAAAC,gBAAA,EAAU,YAAM;IACf,IAAMC,yBAAyB,GAAGH,eAAe,CAACI,gCAAhB,EAAlC;;IACA,IAAID,yBAAyB,IAAI,CAACF,KAAlC,EAAyC;MACxCI,OAAO,CAACC,KAAR,CAAc,8HAAd;IACA;EACD,CALD,EAKG,EALH;AAMA"}