virtual-scroller 1.14.0 → 1.15.1

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"));
 
@@ -47,10 +47,10 @@ function _useState(_ref) {
   // `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.
 
 
@@ -68,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
@@ -126,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","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}) {\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,OAGZ;EAAA,IAFFC,YAEE,QAFFA,YAEE;EAAA,IADFC,QACE,QADFA,QACE;;EACF;EACA;EACA;EACA;EACA;EACA,0BAAkC,IAAAC,+BAAA,EAAmBF,YAAnB,CAAlC;EAAA;EAAA,IAAOG,SAAP;EAAA,IAAkBC,YAAlB,2BANE,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"}
+{"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

@@ -7,21 +7,45 @@ exports["default"] = useStyle;
 
 var _px = _interopRequireDefault(require("../utility/px.js"));
 
+var _debug = require("../utility/debug.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;
+  } // Validate that the passed `style` property doesn't include
+  // `padding-top` or `padding-bottom` or `padding`.
+
+
+  if (style) {
+    if (typeof style.padding === 'number') {
+      (0, _debug.reportError)('`style` property can\'t include any `padding`');
+    }
+
+    if (typeof style.paddingTop === 'number') {
+      (0, _debug.reportError)('`style` property can\'t include any `paddingTop`');
+    }
+
+    if (typeof style.paddingBottom === 'number') {
+      (0, _debug.reportError)('`style` property can\'t include any `paddingBottom`');
+    }
   }
 
   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","padding","reportError","paddingTop","paddingBottom","beforeItemsHeight","afterItemsHeight","px"],"sources":["../../source/react/useStyle.js"],"sourcesContent":["import px from '../utility/px.js'\r\nimport { reportError } from '../utility/debug.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\t// Validate that the passed `style` property doesn't include\r\n\t// `padding-top` or `padding-bottom` or `padding`.\r\n\tif (style) {\r\n\t\tif (typeof style.padding === 'number') {\r\n\t\t\treportError('`style` property can\\'t include any `padding`')\r\n\t\t}\r\n\t\tif (typeof style.paddingTop === 'number') {\r\n\t\t\treportError('`style` property can\\'t include any `paddingTop`')\r\n\t\t}\r\n\t\tif (typeof style.paddingBottom === 'number') {\r\n\t\t\treportError('`style` property can\\'t include any `paddingBottom`')\r\n\t\t}\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;;AACA;;;;;;;;;;AAEe,SAASA,QAAT,CAAkBC,KAAlB,QAGZ;EAAA,IAFFC,KAEE,QAFFA,KAEE;EAAA,IADFC,KACE,QADFA,KACE;;EACF,IAAID,KAAJ,EAAW;IACV,OAAOD,KAAP;EACA,CAHC,CAKF;EACA;;;EACA,IAAIA,KAAJ,EAAW;IACV,IAAI,OAAOA,KAAK,CAACG,OAAb,KAAyB,QAA7B,EAAuC;MACtC,IAAAC,kBAAA,EAAY,+CAAZ;IACA;;IACD,IAAI,OAAOJ,KAAK,CAACK,UAAb,KAA4B,QAAhC,EAA0C;MACzC,IAAAD,kBAAA,EAAY,kDAAZ;IACA;;IACD,IAAI,OAAOJ,KAAK,CAACM,aAAb,KAA+B,QAAnC,EAA6C;MAC5C,IAAAF,kBAAA,EAAY,qDAAZ;IACA;EACD;;EAED,IACCG,iBADD,GAGIL,KAHJ,CACCK,iBADD;EAAA,IAECC,gBAFD,GAGIN,KAHJ,CAECM,gBAFD;EAKA,uCACIR,KADJ;IAECK,UAAU,EAAE,IAAAI,cAAA,EAAGF,iBAAH,CAFb;IAGCD,aAAa,EAAE,IAAAG,cAAA,EAAGD,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"}

package/commonjs/react/useVirtualScroller.js

@@ -7,59 +7,159 @@ exports["default"] = useVirtualScroller;
 
 var _react = require("react");
 
-var _VirtualScroller = _interopRequireDefault(require("../VirtualScroller.js"));
+var _useState2 = _interopRequireDefault(require("./useState.js"));
+
+var _useCreateVirtualScroller = _interopRequireDefault(require("./useCreateVirtualScroller.js"));
+
+var _useStartStopVirtualScroller = _interopRequireDefault(require("./useStartStopVirtualScroller.js"));
+
+var _useSetNewItemsOnItemsPropertyChange = _interopRequireDefault(require("./useSetNewItemsOnItemsPropertyChange.js"));
+
+var _useValidateTableBodyItemsContainer = _interopRequireDefault(require("./useValidateTableBodyItemsContainer.js"));
+
+var _useClassName = _interopRequireDefault(require("./useClassName.js"));
+
+var _useStyle = _interopRequireDefault(require("./useStyle.js"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-// Creates a `VirtualScroller` instance.
-function useVirtualScroller(_ref, _ref2) {
-  var items = _ref.items,
-      estimatedItemHeight = _ref.estimatedItemHeight,
-      getEstimatedItemHeight = _ref.getEstimatedItemHeight,
-      getEstimatedVisibleItemRowsCount = _ref.getEstimatedVisibleItemRowsCount,
+// When `items` property changes:
+// * A new `items` property is supplied to the React component.
+// * The React component re-renders itself.
+// * `useSetNewItemsOnItemsPropertyChange()` hook is run.
+// * `useSetNewItemsOnItemsPropertyChange()` hook detects that the `items` property
+//   has changed and calls `VirtualScroller.setItems(items)`.
+// * `VirtualScroller.setItems(items)` calls `VirtualScroller.setState()`.
+// * `VirtualScroller.setState()` calls the `setState()` function.
+// * The `setState()` function calls a setter from a `useState()` hook.
+// * The React component re-renders itself the second time.
+function useVirtualScroller(_ref) {
+  var itemsProperty = _ref.items,
+      tbody = _ref.tbody,
+      readyToStart = _ref.readyToStart,
+      styleProperty = _ref.style,
+      classNameProperty = _ref.className,
       bypass = _ref.bypass,
-      onItemInitialRender = _ref.onItemInitialRender,
-      onItemFirstRender = _ref.onItemFirstRender,
-      initialScrollPosition = _ref.initialScrollPosition,
-      onScrollPositionChange = _ref.onScrollPositionChange,
+      preserveScrollPosition = _ref.preserveScrollPosition,
+      preserveScrollPositionOnPrependItems = _ref.preserveScrollPositionOnPrependItems,
       measureItemsBatchSize = _ref.measureItemsBatchSize,
       scrollableContainer = _ref.scrollableContainer,
       getScrollableContainer = _ref.getScrollableContainer,
       getColumnsCount = _ref.getColumnsCount,
       getItemId = _ref.getItemId,
-      AsComponent = _ref.AsComponent,
+      onItemFirstRender = _ref.onItemFirstRender,
+      onItemInitialRender = _ref.onItemInitialRender,
+      initialScrollPosition = _ref.initialScrollPosition,
+      onScrollPositionChange = _ref.onScrollPositionChange,
       initialState = _ref.initialState,
       getInitialItemState = _ref.getInitialItemState,
-      onStateChange = _ref.onStateChange;
-  var container = _ref2.container;
-  return (0, _react.useMemo)(function () {
-    // Create `virtual-scroller` instance.
-    return new _VirtualScroller["default"](function () {
-      return container.current;
-    }, items, {
-      _useTimeoutInRenderLoop: true,
-      // `estimatedItemHeight` is deprecated, use `getEstimatedItemHeight()` instead.
-      estimatedItemHeight: estimatedItemHeight,
-      getEstimatedItemHeight: getEstimatedItemHeight,
-      getEstimatedVisibleItemRowsCount: getEstimatedVisibleItemRowsCount,
-      bypass: bypass,
-      // bypassBatchSize,
-      onItemInitialRender: onItemInitialRender,
-      // `onItemFirstRender(i)` is deprecated, use `onItemInitialRender(item)` instead.
-      onItemFirstRender: onItemFirstRender,
-      initialScrollPosition: initialScrollPosition,
-      onScrollPositionChange: onScrollPositionChange,
-      measureItemsBatchSize: measureItemsBatchSize,
-      // `scrollableContainer` property is deprecated.
-      // Use `getScrollableContainer()` property instead.
-      scrollableContainer: scrollableContainer,
-      getScrollableContainer: getScrollableContainer,
-      getColumnsCount: getColumnsCount,
-      getItemId: getItemId,
-      state: initialState,
-      getInitialItemState: getInitialItemState,
-      onStateChange: onStateChange
+      onStateChange = _ref.onStateChange,
+      getEstimatedItemHeight = _ref.getEstimatedItemHeight,
+      getEstimatedVisibleItemRowsCount = _ref.getEstimatedVisibleItemRowsCount,
+      getEstimatedInterItemVerticalSpacing = _ref.getEstimatedInterItemVerticalSpacing;
+  // A `ref` to the items container element.
+  var itemsContainerRef = (0, _react.useRef)(); // Use `hasMounted` flag to decide if `itemsContainerRef` value should be validated.
+
+  var hasMounted = (0, _react.useRef)(false);
+  (0, _react.useLayoutEffect)(function () {
+    hasMounted.current = true;
+  }, []); // Create a `VirtualScroller` instance.
+
+  var virtualScroller = (0, _useCreateVirtualScroller["default"])({
+    items: itemsProperty,
+    getEstimatedItemHeight: getEstimatedItemHeight,
+    getEstimatedVisibleItemRowsCount: getEstimatedVisibleItemRowsCount,
+    getEstimatedInterItemVerticalSpacing: getEstimatedInterItemVerticalSpacing,
+    bypass: bypass,
+    // bypassBatchSize,
+    onItemInitialRender: onItemInitialRender,
+    // `onItemFirstRender(i)` is deprecated, use `onItemInitialRender(item)` instead.
+    onItemFirstRender: onItemFirstRender,
+    initialScrollPosition: initialScrollPosition,
+    onScrollPositionChange: onScrollPositionChange,
+    measureItemsBatchSize: measureItemsBatchSize,
+    // `scrollableContainer` property is deprecated.
+    // Use `getScrollableContainer()` property instead.
+    scrollableContainer: scrollableContainer,
+    getScrollableContainer: getScrollableContainer,
+    getColumnsCount: getColumnsCount,
+    getItemId: getItemId,
+    initialState: initialState,
+    getInitialItemState: getInitialItemState,
+    onStateChange: onStateChange
+  }, {
+    getItemsContainerElement: function getItemsContainerElement() {
+      // Validate that the developer has correctly passed the returned `itemsContainerRef` property
+      // as the items container component's `ref`.
+      //
+      // `getItemsContainerElement()` function is called both before it has mounted
+      // and after it has mounted. Only validate the ref's value after it has mounted.
+      //
+      if (hasMounted.current) {
+        if (!itemsContainerRef.current) {
+          throw new Error('[virtual-scroller] Did you forget to pass the returned `itemsContainerRef` property as the items container component\'s `ref`?');
+        }
+      } // Return the items container element.
+
+
+      return itemsContainerRef.current;
+    }
+  }); // Only compute the initial state once.
+
+  var _initialState = (0, _react.useMemo)(function () {
+    return virtualScroller.getInitialState();
+  }, []); // Use React's `useState()` hook for managing `VirtualScroller`'s state lifecycle.
+  // This way, React will re-render the component on every state update.
+
+
+  var _useState = (0, _useState2["default"])({
+    initialState: _initialState,
+    onRender: virtualScroller.onRender
+  }),
+      getState = _useState.getState,
+      setState = _useState.setState,
+      stateToRender = _useState.stateToRender; // Use custom (external) state storage in the `VirtualScroller`.
+
+
+  (0, _react.useMemo)(function () {
+    virtualScroller.useState({
+      getState: getState,
+      setState: setState
     });
-  }, []);
+  }, []); // Start `VirtualScroller` on mount.
+  // Stop `VirtualScroller` on unmount.
+
+  (0, _useStartStopVirtualScroller["default"])(virtualScroller, {
+    readyToStart: readyToStart
+  }); // Calls `.setItems()` if `items` property has changed.
+
+  (0, _useSetNewItemsOnItemsPropertyChange["default"])(itemsProperty, {
+    virtualScroller: virtualScroller,
+    // `preserveScrollPosition` property name is deprecated,
+    // use `preserveScrollPositionOnPrependItems` property instead.
+    preserveScrollPosition: preserveScrollPosition,
+    preserveScrollPositionOnPrependItems: preserveScrollPositionOnPrependItems
+  }); // 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.
+
+  (0, _useValidateTableBodyItemsContainer["default"])({
+    virtualScroller: virtualScroller,
+    tbody: tbody
+  });
+  var className = (0, _useClassName["default"])(classNameProperty, {
+    tbody: tbody
+  });
+  var style = (0, _useStyle["default"])(styleProperty, {
+    tbody: tbody,
+    state: stateToRender
+  });
+  return {
+    state: stateToRender,
+    style: style,
+    className: className,
+    itemsContainerRef: itemsContainerRef,
+    virtualScroller: virtualScroller
+  };
 }
 //# sourceMappingURL=useVirtualScroller.js.map

package/commonjs/react/useVirtualScroller.js.map

@@ -1 +1 @@
-{"version":3,"file":"useVirtualScroller.js","names":["useVirtualScroller","items","estimatedItemHeight","getEstimatedItemHeight","getEstimatedVisibleItemRowsCount","bypass","onItemInitialRender","onItemFirstRender","initialScrollPosition","onScrollPositionChange","measureItemsBatchSize","scrollableContainer","getScrollableContainer","getColumnsCount","getItemId","AsComponent","initialState","getInitialItemState","onStateChange","container","useMemo","VirtualScroller","current","_useTimeoutInRenderLoop","state"],"sources":["../../source/react/useVirtualScroller.js"],"sourcesContent":["import { useMemo } from 'react'\r\n\r\nimport VirtualScroller from '../VirtualScroller.js'\r\n\r\n// Creates a `VirtualScroller` instance.\r\nexport default function useVirtualScroller({\r\n\titems,\r\n\t// `estimatedItemHeight` is deprecated, use `getEstimatedItemHeight()` instead.\r\n\testimatedItemHeight,\r\n\tgetEstimatedItemHeight,\r\n\tgetEstimatedVisibleItemRowsCount,\r\n\tbypass,\r\n\t// bypassBatchSize,\r\n\tonItemInitialRender,\r\n\t// `onItemFirstRender(i)` is deprecated, use `onItemInitialRender(item)` instead.\r\n\tonItemFirstRender,\r\n\tinitialScrollPosition,\r\n\tonScrollPositionChange,\r\n\tmeasureItemsBatchSize,\r\n\t// `scrollableContainer` property is deprecated.\r\n\t// Use `getScrollableContainer()` property instead.\r\n\tscrollableContainer,\r\n\tgetScrollableContainer,\r\n\tgetColumnsCount,\r\n\tgetItemId,\r\n\tAsComponent,\r\n\tinitialState,\r\n\tgetInitialItemState,\r\n\tonStateChange\r\n}, {\r\n\tcontainer\r\n}) {\r\n\treturn useMemo(() => {\r\n\t\t// Create `virtual-scroller` instance.\r\n\t\treturn new VirtualScroller(\r\n\t\t\t() => container.current,\r\n\t\t\titems,\r\n\t\t\t{\r\n\t\t\t\t_useTimeoutInRenderLoop: true,\r\n\t\t\t\t// `estimatedItemHeight` is deprecated, use `getEstimatedItemHeight()` instead.\r\n\t\t\t\testimatedItemHeight,\r\n\t\t\t\tgetEstimatedItemHeight,\r\n\t\t\t\tgetEstimatedVisibleItemRowsCount,\r\n\t\t\t\tbypass,\r\n\t\t\t\t// bypassBatchSize,\r\n\t\t\t\tonItemInitialRender,\r\n\t\t\t\t// `onItemFirstRender(i)` is deprecated, use `onItemInitialRender(item)` instead.\r\n\t\t\t\tonItemFirstRender,\r\n\t\t\t\tinitialScrollPosition,\r\n\t\t\t\tonScrollPositionChange,\r\n\t\t\t\tmeasureItemsBatchSize,\r\n\t\t\t\t// `scrollableContainer` property is deprecated.\r\n\t\t\t\t// Use `getScrollableContainer()` property instead.\r\n\t\t\t\tscrollableContainer,\r\n\t\t\t\tgetScrollableContainer,\r\n\t\t\t\tgetColumnsCount,\r\n\t\t\t\tgetItemId,\r\n\t\t\t\tstate: initialState,\r\n\t\t\t\tgetInitialItemState,\r\n\t\t\t\tonStateChange\r\n\t\t\t}\r\n\t\t)\r\n\t}, [])\r\n}"],"mappings":";;;;;;;AAAA;;AAEA;;;;AAEA;AACe,SAASA,kBAAT,cA0BZ;EAAA,IAzBFC,KAyBE,QAzBFA,KAyBE;EAAA,IAvBFC,mBAuBE,QAvBFA,mBAuBE;EAAA,IAtBFC,sBAsBE,QAtBFA,sBAsBE;EAAA,IArBFC,gCAqBE,QArBFA,gCAqBE;EAAA,IApBFC,MAoBE,QApBFA,MAoBE;EAAA,IAlBFC,mBAkBE,QAlBFA,mBAkBE;EAAA,IAhBFC,iBAgBE,QAhBFA,iBAgBE;EAAA,IAfFC,qBAeE,QAfFA,qBAeE;EAAA,IAdFC,sBAcE,QAdFA,sBAcE;EAAA,IAbFC,qBAaE,QAbFA,qBAaE;EAAA,IAVFC,mBAUE,QAVFA,mBAUE;EAAA,IATFC,sBASE,QATFA,sBASE;EAAA,IARFC,eAQE,QARFA,eAQE;EAAA,IAPFC,SAOE,QAPFA,SAOE;EAAA,IANFC,WAME,QANFA,WAME;EAAA,IALFC,YAKE,QALFA,YAKE;EAAA,IAJFC,mBAIE,QAJFA,mBAIE;EAAA,IAHFC,aAGE,QAHFA,aAGE;EAAA,IADFC,SACE,SADFA,SACE;EACF,OAAO,IAAAC,cAAA,EAAQ,YAAM;IACpB;IACA,OAAO,IAAIC,2BAAJ,CACN;MAAA,OAAMF,SAAS,CAACG,OAAhB;IAAA,CADM,EAENrB,KAFM,EAGN;MACCsB,uBAAuB,EAAE,IAD1B;MAEC;MACArB,mBAAmB,EAAnBA,mBAHD;MAICC,sBAAsB,EAAtBA,sBAJD;MAKCC,gCAAgC,EAAhCA,gCALD;MAMCC,MAAM,EAANA,MAND;MAOC;MACAC,mBAAmB,EAAnBA,mBARD;MASC;MACAC,iBAAiB,EAAjBA,iBAVD;MAWCC,qBAAqB,EAArBA,qBAXD;MAYCC,sBAAsB,EAAtBA,sBAZD;MAaCC,qBAAqB,EAArBA,qBAbD;MAcC;MACA;MACAC,mBAAmB,EAAnBA,mBAhBD;MAiBCC,sBAAsB,EAAtBA,sBAjBD;MAkBCC,eAAe,EAAfA,eAlBD;MAmBCC,SAAS,EAATA,SAnBD;MAoBCU,KAAK,EAAER,YApBR;MAqBCC,mBAAmB,EAAnBA,mBArBD;MAsBCC,aAAa,EAAbA;IAtBD,CAHM,CAAP;EA4BA,CA9BM,EA8BJ,EA9BI,CAAP;AA+BA"}
+{"version":3,"file":"useVirtualScroller.js","names":["useVirtualScroller","itemsProperty","items","tbody","readyToStart","styleProperty","style","classNameProperty","className","bypass","preserveScrollPosition","preserveScrollPositionOnPrependItems","measureItemsBatchSize","scrollableContainer","getScrollableContainer","getColumnsCount","getItemId","onItemFirstRender","onItemInitialRender","initialScrollPosition","onScrollPositionChange","initialState","getInitialItemState","onStateChange","getEstimatedItemHeight","getEstimatedVisibleItemRowsCount","getEstimatedInterItemVerticalSpacing","itemsContainerRef","useRef","hasMounted","useLayoutEffect","current","virtualScroller","useCreateVirtualScroller","getItemsContainerElement","Error","_initialState","useMemo","getInitialState","useState","onRender","getState","setState","stateToRender","useStartStopVirtualScroller","useSetNewItemsOnItemsPropertyChange","useValidateTableBodyItemsContainer","useClassName","useStyle","state"],"sources":["../../source/react/useVirtualScroller.js"],"sourcesContent":["import { useLayoutEffect, useMemo, useRef } from 'react'\r\n\r\nimport useState from './useState.js'\r\nimport useCreateVirtualScroller from './useCreateVirtualScroller.js'\r\nimport useStartStopVirtualScroller from './useStartStopVirtualScroller.js'\r\nimport useSetNewItemsOnItemsPropertyChange from './useSetNewItemsOnItemsPropertyChange.js'\r\nimport useValidateTableBodyItemsContainer from './useValidateTableBodyItemsContainer.js'\r\nimport useClassName from './useClassName.js'\r\nimport useStyle from './useStyle.js'\r\n\r\n// When `items` property changes:\r\n// * A new `items` property is supplied to the React component.\r\n// * The React component re-renders itself.\r\n// * `useSetNewItemsOnItemsPropertyChange()` hook is run.\r\n// * `useSetNewItemsOnItemsPropertyChange()` hook detects that the `items` property\r\n//   has changed and calls `VirtualScroller.setItems(items)`.\r\n// * `VirtualScroller.setItems(items)` calls `VirtualScroller.setState()`.\r\n// * `VirtualScroller.setState()` calls the `setState()` function.\r\n// * The `setState()` function calls a setter from a `useState()` hook.\r\n// * The React component re-renders itself the second time.\r\n\r\nexport default function useVirtualScroller({\r\n\t// The following are `<VirtualScroller/>` properties.\r\n\t//\r\n\titems: itemsProperty,\r\n\t// Because the use of a `<tbody/>` tag as an items container component can't always be auto-detected,\r\n\t// a developer could manually pass a `tbody: boolean` property.\r\n\t// Futhermore, when using `useVirtualScroller()` hook instead of `<VirtualScroller/>` component,\r\n\t// `itemsContainerComponent` property is not accessible for tag name detection.\r\n\ttbody,\r\n\treadyToStart,\r\n\tstyle: styleProperty,\r\n\tclassName: classNameProperty,\r\n\r\n\t// The following are the \"core\" component options.\r\n\t//\r\n\tbypass,\r\n\t// `preserveScrollPosition` property name is deprecated,\r\n\t// use `preserveScrollPositionOnPrependItems` property instead.\r\n\tpreserveScrollPosition,\r\n\tpreserveScrollPositionOnPrependItems,\r\n\tmeasureItemsBatchSize,\r\n\t// `scrollableContainer` property is deprecated.\r\n\t// Use `getScrollableContainer()` property instead.\r\n\tscrollableContainer,\r\n\tgetScrollableContainer,\r\n\tgetColumnsCount,\r\n\tgetItemId,\r\n\t// `onItemFirstRender(i)` is deprecated, use `onItemInitialRender(item)` instead.\r\n\tonItemFirstRender,\r\n\tonItemInitialRender,\r\n\tinitialScrollPosition,\r\n\tonScrollPositionChange,\r\n\tinitialState,\r\n\tgetInitialItemState,\r\n\tonStateChange,\r\n\tgetEstimatedItemHeight,\r\n\tgetEstimatedVisibleItemRowsCount,\r\n\tgetEstimatedInterItemVerticalSpacing\r\n}) {\r\n\t// A `ref` to the items container element.\r\n\tconst itemsContainerRef = useRef()\r\n\r\n\t// Use `hasMounted` flag to decide if `itemsContainerRef` value should be validated.\r\n\tconst hasMounted = useRef(false)\r\n\tuseLayoutEffect(() => {\r\n\t\thasMounted.current = true\r\n\t}, [])\r\n\r\n\t// Create a `VirtualScroller` instance.\r\n\tconst virtualScroller = useCreateVirtualScroller({\r\n\t\titems: itemsProperty,\r\n\t\tgetEstimatedItemHeight,\r\n\t\tgetEstimatedVisibleItemRowsCount,\r\n\t\tgetEstimatedInterItemVerticalSpacing,\r\n\t\tbypass,\r\n\t\t// bypassBatchSize,\r\n\t\tonItemInitialRender,\r\n\t\t// `onItemFirstRender(i)` is deprecated, use `onItemInitialRender(item)` instead.\r\n\t\tonItemFirstRender,\r\n\t\tinitialScrollPosition,\r\n\t\tonScrollPositionChange,\r\n\t\tmeasureItemsBatchSize,\r\n\t\t// `scrollableContainer` property is deprecated.\r\n\t\t// Use `getScrollableContainer()` property instead.\r\n\t\tscrollableContainer,\r\n\t\tgetScrollableContainer,\r\n\t\tgetColumnsCount,\r\n\t\tgetItemId,\r\n\t\tinitialState,\r\n\t\tgetInitialItemState,\r\n\t\tonStateChange\r\n\t}, {\r\n\t\tgetItemsContainerElement: () => {\r\n\t\t\t// Validate that the developer has correctly passed the returned `itemsContainerRef` property\r\n\t\t\t// as the items container component's `ref`.\r\n\t\t\t//\r\n\t\t\t// `getItemsContainerElement()` function is called both before it has mounted\r\n\t\t\t// and after it has mounted. Only validate the ref's value after it has mounted.\r\n\t\t\t//\r\n\t\t\tif (hasMounted.current) {\r\n\t\t\t\tif (!itemsContainerRef.current) {\r\n\t\t\t\t\tthrow new Error('[virtual-scroller] Did you forget to pass the returned `itemsContainerRef` property as the items container component\\'s `ref`?')\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t\t// Return the items container element.\r\n\t\t\treturn itemsContainerRef.current\r\n\t\t}\r\n\t})\r\n\r\n\t// Only compute the initial state once.\r\n\tconst _initialState = useMemo(() => {\r\n\t\treturn virtualScroller.getInitialState()\r\n\t}, [])\r\n\r\n\t// Use React's `useState()` hook for managing `VirtualScroller`'s state lifecycle.\r\n\t// This way, React will re-render the component on every state update.\r\n\tconst {\r\n\t\tgetState,\r\n\t\tsetState,\r\n\t\tstateToRender\r\n\t} = useState({\r\n\t\tinitialState: _initialState,\r\n\t\tonRender: virtualScroller.onRender\r\n\t})\r\n\r\n\t// Use custom (external) state storage in the `VirtualScroller`.\r\n\tuseMemo(() => {\r\n\t\tvirtualScroller.useState({\r\n\t\t\tgetState,\r\n\t\t\tsetState\r\n\t\t})\r\n\t}, [])\r\n\r\n\t// Start `VirtualScroller` on mount.\r\n\t// Stop `VirtualScroller` on unmount.\r\n\tuseStartStopVirtualScroller(virtualScroller, { readyToStart })\r\n\r\n\t// Calls `.setItems()` if `items` property has changed.\r\n\tuseSetNewItemsOnItemsPropertyChange(itemsProperty, {\r\n\t\tvirtualScroller,\r\n\t\t// `preserveScrollPosition` property name is deprecated,\r\n\t\t// use `preserveScrollPositionOnPrependItems` property instead.\r\n\t\tpreserveScrollPosition,\r\n\t\tpreserveScrollPositionOnPrependItems\r\n\t})\r\n\r\n\t// A developer might \"forget\" to pass `itemsContainerComponent=\"tbody\"` property\r\n\t// when using a `<tbody/>` as a container for list items.\r\n\t// This hook validates that the developer didn't \"forget\" to do that in such case.\r\n\tuseValidateTableBodyItemsContainer({\r\n\t\tvirtualScroller,\r\n\t\ttbody\r\n\t})\r\n\r\n\tconst className = useClassName(classNameProperty, {\r\n\t\ttbody\r\n\t})\r\n\r\n\tconst style = useStyle(styleProperty, {\r\n\t\ttbody,\r\n\t\tstate: stateToRender\r\n\t})\r\n\r\n\treturn {\r\n\t\tstate: stateToRender,\r\n\t\tstyle,\r\n\t\tclassName,\r\n\t\titemsContainerRef,\r\n\t\tvirtualScroller\r\n\t}\r\n}"],"mappings":"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"}

package/commonjs/test/ItemsContainer.js

@@ -52,14 +52,14 @@ var ItemsContainer = /*#__PURE__*/function () {
       var i = 0;
 
       while (i <= renderedElementIndex) {
-        if (startNewRow || rowWidth + children[i].width > maxWidth) {
+        if (startNewRow || rowWidth + children[i].getWidth() > maxWidth) {
           if (i > 0) {
             topOffset += rowHeight;
-            topOffset += children[i].marginTop;
+            topOffset += children[i].getMarginTop();
           }
 
-          rowWidth = children[i].width;
-          rowHeight = children[i].height;
+          rowWidth = children[i].getWidth();
+          rowHeight = children[i].getHeight();
 
           if (rowWidth > maxWidth) {
             startNewRow = true;
@@ -67,8 +67,8 @@ var ItemsContainer = /*#__PURE__*/function () {
             startNewRow = false;
           }
         } else {
-          rowWidth += children[i].width;
-          rowHeight = Math.max(rowHeight, children[i].height);
+          rowWidth += children[i].getWidth();
+          rowHeight = Math.max(rowHeight, children[i].getHeight());
         }
 
         i++;
@@ -94,7 +94,7 @@ var ItemsContainer = /*#__PURE__*/function () {
         });
       }
 
-      return children[renderedElementIndex].height;
+      return children[renderedElementIndex].getHeight();
     }
     /**
      * Returns items container height.
@@ -115,12 +115,12 @@ var ItemsContainer = /*#__PURE__*/function () {
 
         while (rowWidth <= maxWidth && i < children.length) {
           if (rowWidth === 0 && i > 0) {
-            var verticalSpacing = children[i].marginTop;
+            var verticalSpacing = children[i].getMarginTop();
             contentHeight += verticalSpacing;
           }
 
-          rowWidth += children[i].width;
-          rowHeight = Math.max(rowHeight, children[i].height);
+          rowWidth += children[i].getWidth();
+          rowHeight = Math.max(rowHeight, children[i].getHeight());
           i++;
         }
 

package/commonjs/test/ItemsContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ItemsContainer.js","names":["ItemsContainer","getElement","renderedElementIndex","children","maxWidth","width","topOffset","paddingTop","rowWidth","rowHeight","startNewRow","length","ItemNotRenderedError","renderedElementsCount","i","marginTop","height","Math","max","contentHeight","verticalSpacing","paddingBottom"],"sources":["../../source/test/ItemsContainer.js"],"sourcesContent":["import ItemNotRenderedError from '../ItemNotRenderedError.js'\r\n\r\nexport default class ItemsContainer {\r\n\t/**\r\n\t * Constructs a new \"container\" from an element.\r\n\t * @param {function} getElement\r\n\t */\r\n\tconstructor(getElement) {\r\n\t\tthis.getElement = getElement\r\n\t}\r\n\r\n\t/**\r\n\t * Returns an item element's \"top offset\", relative to the items `container`'s top edge.\r\n\t * @param  {number} renderedElementIndex — An index of an item relative to the \"first shown item index\". For example, if the list is showing items from index 8 to index 12 then `renderedElementIndex = 0` would mean the item at index `8`.\r\n\t * @return {number}\r\n\t */\r\n\tgetNthRenderedItemTopOffset(renderedElementIndex) {\r\n\t\tconst children = this.getElement().children\r\n\t\tconst maxWidth = this.getElement().width\r\n\t\tlet topOffset = this.getElement().paddingTop\r\n\r\n\t\tlet rowWidth\r\n\t\tlet rowHeight\r\n\t\tlet startNewRow = true\r\n\r\n\t\tif (renderedElementIndex > children.length - 1) {\r\n\t\t\tthrow new ItemNotRenderedError({\r\n\t\t\t\trenderedElementIndex,\r\n\t\t\t\trenderedElementsCount: children.length\r\n\t\t\t})\r\n\t\t}\r\n\r\n\t\tlet i = 0\r\n\t\twhile (i <= renderedElementIndex) {\r\n\t\t\tif (startNewRow || rowWidth + children[i].width > maxWidth) {\r\n\t\t\t\tif (i > 0) {\r\n\t\t\t\t\ttopOffset += rowHeight\r\n\t\t\t\t\ttopOffset += children[i].marginTop\r\n\t\t\t\t}\r\n\t\t\t\trowWidth = children[i].width\r\n\t\t\t\trowHeight = children[i].height\r\n\t\t\t\tif (rowWidth > maxWidth) {\r\n\t\t\t\t\tstartNewRow = true\r\n\t\t\t\t} else {\r\n\t\t\t\t\tstartNewRow = false\r\n\t\t\t\t}\r\n\t\t\t} else {\r\n\t\t\t\trowWidth += children[i].width\r\n\t\t\t\trowHeight = Math.max(rowHeight, children[i].height)\r\n\t\t\t}\r\n\t\t\ti++\r\n\t\t}\r\n\r\n\t\treturn topOffset\r\n\t}\r\n\r\n\t/**\r\n\t * Returns an item element's height.\r\n\t * @param  {number} renderedElementIndex — An index of an item relative to the \"first shown item index\". For example, if the list is showing items from index 8 to index 12 then `renderedElementIndex = 0` would mean the item at index `8`.\r\n\t * @return {number}\r\n\t */\r\n\tgetNthRenderedItemHeight(renderedElementIndex) {\r\n\t\tconst children = this.getElement().children\r\n\r\n\t\tif (renderedElementIndex > children.length - 1) {\r\n\t\t\tthrow new ItemNotRenderedError({\r\n\t\t\t\trenderedElementIndex,\r\n\t\t\t\trenderedElementsCount: children.length\r\n\t\t\t})\r\n\t\t}\r\n\r\n\t\treturn children[renderedElementIndex].height\r\n\t}\r\n\r\n\t/**\r\n\t * Returns items container height.\r\n\t * @return {number}\r\n\t */\r\n\tgetHeight() {\r\n\t\tconst children = this.getElement().children\r\n\t\tconst maxWidth = this.getElement().width\r\n\t\tlet contentHeight = this.getElement().paddingTop\r\n\t\tlet i = 0\r\n\t\twhile (i < children.length) {\r\n\t\t\tlet rowWidth = 0\r\n\t\t\tlet rowHeight = 0\r\n\t\t\twhile (rowWidth <= maxWidth && i < children.length) {\r\n\t\t\t\tif (rowWidth === 0 && i > 0) {\r\n\t\t\t\t\tconst verticalSpacing = children[i].marginTop\r\n\t\t\t\t\tcontentHeight += verticalSpacing\r\n\t\t\t\t}\r\n\t\t\t\trowWidth += children[i].width\r\n\t\t\t\trowHeight = Math.max(rowHeight, children[i].height)\r\n\t\t\t\ti++\r\n\t\t\t}\r\n\t\t\tcontentHeight += rowHeight\r\n\t\t}\r\n\t\tcontentHeight += this.getElement().paddingBottom\r\n\t\treturn contentHeight\r\n\t}\r\n\r\n\t/**\r\n\t * Removes all item elements of an items container.\r\n\t */\r\n\tclear() {\r\n\t\tthis.getElement().children = []\r\n\t}\r\n}"],"mappings":";;;;;;;AAAA;;;;;;;;;;IAEqBA,c;EACpB;AACD;AACA;AACA;EACC,wBAAYC,UAAZ,EAAwB;IAAA;;IACvB,KAAKA,UAAL,GAAkBA,UAAlB;EACA;EAED;AACD;AACA;AACA;AACA;;;;;WACC,qCAA4BC,oBAA5B,EAAkD;MACjD,IAAMC,QAAQ,GAAG,KAAKF,UAAL,GAAkBE,QAAnC;MACA,IAAMC,QAAQ,GAAG,KAAKH,UAAL,GAAkBI,KAAnC;MACA,IAAIC,SAAS,GAAG,KAAKL,UAAL,GAAkBM,UAAlC;MAEA,IAAIC,QAAJ;MACA,IAAIC,SAAJ;MACA,IAAIC,WAAW,GAAG,IAAlB;;MAEA,IAAIR,oBAAoB,GAAGC,QAAQ,CAACQ,MAAT,GAAkB,CAA7C,EAAgD;QAC/C,MAAM,IAAIC,gCAAJ,CAAyB;UAC9BV,oBAAoB,EAApBA,oBAD8B;UAE9BW,qBAAqB,EAAEV,QAAQ,CAACQ;QAFF,CAAzB,CAAN;MAIA;;MAED,IAAIG,CAAC,GAAG,CAAR;;MACA,OAAOA,CAAC,IAAIZ,oBAAZ,EAAkC;QACjC,IAAIQ,WAAW,IAAIF,QAAQ,GAAGL,QAAQ,CAACW,CAAD,CAAR,CAAYT,KAAvB,GAA+BD,QAAlD,EAA4D;UAC3D,IAAIU,CAAC,GAAG,CAAR,EAAW;YACVR,SAAS,IAAIG,SAAb;YACAH,SAAS,IAAIH,QAAQ,CAACW,CAAD,CAAR,CAAYC,SAAzB;UACA;;UACDP,QAAQ,GAAGL,QAAQ,CAACW,CAAD,CAAR,CAAYT,KAAvB;UACAI,SAAS,GAAGN,QAAQ,CAACW,CAAD,CAAR,CAAYE,MAAxB;;UACA,IAAIR,QAAQ,GAAGJ,QAAf,EAAyB;YACxBM,WAAW,GAAG,IAAd;UACA,CAFD,MAEO;YACNA,WAAW,GAAG,KAAd;UACA;QACD,CAZD,MAYO;UACNF,QAAQ,IAAIL,QAAQ,CAACW,CAAD,CAAR,CAAYT,KAAxB;UACAI,SAAS,GAAGQ,IAAI,CAACC,GAAL,CAAST,SAAT,EAAoBN,QAAQ,CAACW,CAAD,CAAR,CAAYE,MAAhC,CAAZ;QACA;;QACDF,CAAC;MACD;;MAED,OAAOR,SAAP;IACA;IAED;AACD;AACA;AACA;AACA;;;;WACC,kCAAyBJ,oBAAzB,EAA+C;MAC9C,IAAMC,QAAQ,GAAG,KAAKF,UAAL,GAAkBE,QAAnC;;MAEA,IAAID,oBAAoB,GAAGC,QAAQ,CAACQ,MAAT,GAAkB,CAA7C,EAAgD;QAC/C,MAAM,IAAIC,gCAAJ,CAAyB;UAC9BV,oBAAoB,EAApBA,oBAD8B;UAE9BW,qBAAqB,EAAEV,QAAQ,CAACQ;QAFF,CAAzB,CAAN;MAIA;;MAED,OAAOR,QAAQ,CAACD,oBAAD,CAAR,CAA+Bc,MAAtC;IACA;IAED;AACD;AACA;AACA;;;;WACC,qBAAY;MACX,IAAMb,QAAQ,GAAG,KAAKF,UAAL,GAAkBE,QAAnC;MACA,IAAMC,QAAQ,GAAG,KAAKH,UAAL,GAAkBI,KAAnC;MACA,IAAIc,aAAa,GAAG,KAAKlB,UAAL,GAAkBM,UAAtC;MACA,IAAIO,CAAC,GAAG,CAAR;;MACA,OAAOA,CAAC,GAAGX,QAAQ,CAACQ,MAApB,EAA4B;QAC3B,IAAIH,QAAQ,GAAG,CAAf;QACA,IAAIC,SAAS,GAAG,CAAhB;;QACA,OAAOD,QAAQ,IAAIJ,QAAZ,IAAwBU,CAAC,GAAGX,QAAQ,CAACQ,MAA5C,EAAoD;UACnD,IAAIH,QAAQ,KAAK,CAAb,IAAkBM,CAAC,GAAG,CAA1B,EAA6B;YAC5B,IAAMM,eAAe,GAAGjB,QAAQ,CAACW,CAAD,CAAR,CAAYC,SAApC;YACAI,aAAa,IAAIC,eAAjB;UACA;;UACDZ,QAAQ,IAAIL,QAAQ,CAACW,CAAD,CAAR,CAAYT,KAAxB;UACAI,SAAS,GAAGQ,IAAI,CAACC,GAAL,CAAST,SAAT,EAAoBN,QAAQ,CAACW,CAAD,CAAR,CAAYE,MAAhC,CAAZ;UACAF,CAAC;QACD;;QACDK,aAAa,IAAIV,SAAjB;MACA;;MACDU,aAAa,IAAI,KAAKlB,UAAL,GAAkBoB,aAAnC;MACA,OAAOF,aAAP;IACA;IAED;AACD;AACA;;;;WACC,iBAAQ;MACP,KAAKlB,UAAL,GAAkBE,QAAlB,GAA6B,EAA7B;IACA"}
+{"version":3,"file":"ItemsContainer.js","names":["ItemsContainer","getElement","renderedElementIndex","children","maxWidth","width","topOffset","paddingTop","rowWidth","rowHeight","startNewRow","length","ItemNotRenderedError","renderedElementsCount","i","getWidth","getMarginTop","getHeight","Math","max","contentHeight","verticalSpacing","paddingBottom"],"sources":["../../source/test/ItemsContainer.js"],"sourcesContent":["import ItemNotRenderedError from '../ItemNotRenderedError.js'\r\n\r\nexport default class ItemsContainer {\r\n\t/**\r\n\t * Constructs a new \"container\" from an element.\r\n\t * @param {function} getElement\r\n\t */\r\n\tconstructor(getElement) {\r\n\t\tthis.getElement = getElement\r\n\t}\r\n\r\n\t/**\r\n\t * Returns an item element's \"top offset\", relative to the items `container`'s top edge.\r\n\t * @param  {number} renderedElementIndex — An index of an item relative to the \"first shown item index\". For example, if the list is showing items from index 8 to index 12 then `renderedElementIndex = 0` would mean the item at index `8`.\r\n\t * @return {number}\r\n\t */\r\n\tgetNthRenderedItemTopOffset(renderedElementIndex) {\r\n\t\tconst children = this.getElement().children\r\n\t\tconst maxWidth = this.getElement().width\r\n\t\tlet topOffset = this.getElement().paddingTop\r\n\r\n\t\tlet rowWidth\r\n\t\tlet rowHeight\r\n\t\tlet startNewRow = true\r\n\r\n\t\tif (renderedElementIndex > children.length - 1) {\r\n\t\t\tthrow new ItemNotRenderedError({\r\n\t\t\t\trenderedElementIndex,\r\n\t\t\t\trenderedElementsCount: children.length\r\n\t\t\t})\r\n\t\t}\r\n\r\n\t\tlet i = 0\r\n\t\twhile (i <= renderedElementIndex) {\r\n\t\t\tif (startNewRow || rowWidth + children[i].getWidth() > maxWidth) {\r\n\t\t\t\tif (i > 0) {\r\n\t\t\t\t\ttopOffset += rowHeight\r\n\t\t\t\t\ttopOffset += children[i].getMarginTop()\r\n\t\t\t\t}\r\n\t\t\t\trowWidth = children[i].getWidth()\r\n\t\t\t\trowHeight = children[i].getHeight()\r\n\t\t\t\tif (rowWidth > maxWidth) {\r\n\t\t\t\t\tstartNewRow = true\r\n\t\t\t\t} else {\r\n\t\t\t\t\tstartNewRow = false\r\n\t\t\t\t}\r\n\t\t\t} else {\r\n\t\t\t\trowWidth += children[i].getWidth()\r\n\t\t\t\trowHeight = Math.max(rowHeight, children[i].getHeight())\r\n\t\t\t}\r\n\t\t\ti++\r\n\t\t}\r\n\r\n\t\treturn topOffset\r\n\t}\r\n\r\n\t/**\r\n\t * Returns an item element's height.\r\n\t * @param  {number} renderedElementIndex — An index of an item relative to the \"first shown item index\". For example, if the list is showing items from index 8 to index 12 then `renderedElementIndex = 0` would mean the item at index `8`.\r\n\t * @return {number}\r\n\t */\r\n\tgetNthRenderedItemHeight(renderedElementIndex) {\r\n\t\tconst children = this.getElement().children\r\n\r\n\t\tif (renderedElementIndex > children.length - 1) {\r\n\t\t\tthrow new ItemNotRenderedError({\r\n\t\t\t\trenderedElementIndex,\r\n\t\t\t\trenderedElementsCount: children.length\r\n\t\t\t})\r\n\t\t}\r\n\r\n\t\treturn children[renderedElementIndex].getHeight()\r\n\t}\r\n\r\n\t/**\r\n\t * Returns items container height.\r\n\t * @return {number}\r\n\t */\r\n\tgetHeight() {\r\n\t\tconst children = this.getElement().children\r\n\t\tconst maxWidth = this.getElement().width\r\n\t\tlet contentHeight = this.getElement().paddingTop\r\n\t\tlet i = 0\r\n\t\twhile (i < children.length) {\r\n\t\t\tlet rowWidth = 0\r\n\t\t\tlet rowHeight = 0\r\n\t\t\twhile (rowWidth <= maxWidth && i < children.length) {\r\n\t\t\t\tif (rowWidth === 0 && i > 0) {\r\n\t\t\t\t\tconst verticalSpacing = children[i].getMarginTop()\r\n\t\t\t\t\tcontentHeight += verticalSpacing\r\n\t\t\t\t}\r\n\t\t\t\trowWidth += children[i].getWidth()\r\n\t\t\t\trowHeight = Math.max(rowHeight, children[i].getHeight())\r\n\t\t\t\ti++\r\n\t\t\t}\r\n\t\t\tcontentHeight += rowHeight\r\n\t\t}\r\n\t\tcontentHeight += this.getElement().paddingBottom\r\n\t\treturn contentHeight\r\n\t}\r\n\r\n\t/**\r\n\t * Removes all item elements of an items container.\r\n\t */\r\n\tclear() {\r\n\t\tthis.getElement().children = []\r\n\t}\r\n}"],"mappings":"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"}