virtual-scroller 1.14.0 → 1.15.1

package/modules/test/VirtualScroller.js.map

@@ -1 +1 @@
-{"version":3,"file":"VirtualScroller.js","names":["VirtualScroller","Engine","DEBUG","TestVirtualScroller","scrollableContainerWidth","screenWidth","scrollableContainerHeight","screenHeight","columnsCount","verticalSpacing","items","initialState","state","expectedStateUpdates","scrollableContainerElement","width","height","containerElement","paddingTop","paddingBottom","children","setScrollableContainerWidth","setScrollableContainerHeight","getItemsContainerElement","__columnsCount","getColumnsCount","getItemWidth","hasPausedStateUpdates","undefined","pausedStateUpdate","pausedStateUpdateAction","onBeforeUpdateState","stateUpdate","length","expectedStateUpdate","shift","expect","to","deep","equal","callback","render","virtualScroller","getState","beforeItemsHeight","afterItemsHeight","firstShownItemIndex","lastShownItemIndex","console","log","slice","map","item","area","marginTop","scrollableContainer","engine","_waitForScrollingToStop","onStateChange","getInitialState","useState","updateState","stateUpdateAction","onRender","Error","expectedState","should","include","push","firstNonMeasuredItemIndex","getScrollY","scrollPosition","scrollToY","resize","_triggerResizeListener","JSON","stringify","stop","start","updateLayout","i","getItemScrollPosition","itemHeights","getAverage","newItems","options","setItems"],"sources":["../../source/test/VirtualScroller.js"],"sourcesContent":["import VirtualScroller from '../VirtualScroller.js'\r\nimport Engine from './Engine.js'\r\n\r\nconst DEBUG = false\r\n\r\nexport default class TestVirtualScroller {\r\n\tconstructor({\r\n\t\tscreenWidth: scrollableContainerWidth,\r\n\t\tscreenHeight: scrollableContainerHeight,\r\n\t\tcolumnsCount,\r\n\t\tverticalSpacing,\r\n\t\titems,\r\n\t\tstate: initialState\r\n\t}) {\r\n\t\tthis.expectedStateUpdates = []\r\n\r\n\t\tconst scrollableContainerElement = {\r\n\t\t\twidth: scrollableContainerWidth,\r\n\t\t\theight: scrollableContainerHeight\r\n\t\t}\r\n\r\n\t\tconst containerElement = {\r\n\t\t\tpaddingTop: 0,\r\n\t\t\tpaddingBottom: 0,\r\n\t\t\twidth: scrollableContainerElement.width,\r\n\t\t\tchildren: []\r\n\t\t}\r\n\r\n\t\tthis.setScrollableContainerWidth = (width) => {\r\n\t\t\tscrollableContainerElement.width = width\r\n\t\t\tcontainerElement.width = width\r\n\t\t}\r\n\r\n\t\tthis.setScrollableContainerHeight = (height) => {\r\n\t\t\tscrollableContainerElement.height = height\r\n\t\t}\r\n\r\n\t\tconst getItemsContainerElement = () => containerElement\r\n\r\n\t\tthis.__columnsCount = columnsCount\r\n\r\n\t\tconst getColumnsCount = () => this.__columnsCount\r\n\t\tconst getItemWidth = () => scrollableContainerElement.width / getColumnsCount()\r\n\r\n\t\tthis.hasPausedStateUpdates = undefined\r\n\t\tthis.pausedStateUpdate = undefined\r\n\t\tthis.pausedStateUpdateAction = undefined\r\n\r\n\t\tconst onBeforeUpdateState = (stateUpdate) => {\r\n\t\t\tif (this.expectedStateUpdates.length > 0) {\r\n\t\t\t\tconst expectedStateUpdate = this.expectedStateUpdates.shift()\r\n\t\t\t\texpect(stateUpdate).to.deep.equal(expectedStateUpdate.stateUpdate)\r\n\t\t\t\tif (expectedStateUpdate.callback) {\r\n\t\t\t\t\texpectedStateUpdate.callback()\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\tconst render = () => {\r\n\t\t\tconst {\r\n\t\t\t\titems,\r\n\t\t\t\tbeforeItemsHeight,\r\n\t\t\t\tafterItemsHeight,\r\n\t\t\t\tfirstShownItemIndex,\r\n\t\t\t\tlastShownItemIndex\r\n\t\t\t} = this.virtualScroller.getState()\r\n\r\n\t\t\tconsole.log('~ Render List ~')\r\n\r\n\t\t\tcontainerElement.paddingTop = beforeItemsHeight\r\n\t\t\tcontainerElement.paddingBottom = afterItemsHeight\r\n\r\n\t\t\tcontainerElement.children = items\r\n\t\t\t\t.slice(firstShownItemIndex, lastShownItemIndex + 1)\r\n\t\t\t\t.map((item) => ({\r\n\t\t\t\t\twidth: getItemWidth(),\r\n\t\t\t\t\theight: item.area / getItemWidth(),\r\n\t\t\t\t\tmarginTop: verticalSpacing\r\n\t\t\t\t}))\r\n\t\t}\r\n\r\n\t\tthis.virtualScroller = new VirtualScroller(getItemsContainerElement, items, {\r\n\t\t\tscrollableContainer: scrollableContainerElement,\r\n\t\t\tengine: Engine,\r\n\t\t\t_waitForScrollingToStop: false,\r\n\t\t\tgetColumnsCount,\r\n\t\t\tstate: initialState,\r\n\t\t\tonStateChange(state) {\r\n\t\t\t\tif (DEBUG) {\r\n\t\t\t\t\tconsole.log('~ Updated State ~')\r\n\t\t\t\t\tconsole.log(state)\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t})\r\n\r\n\t\tlet state = this.virtualScroller.getInitialState()\r\n\r\n\t\tthis.virtualScroller.useState({\r\n\t\t\tgetState: () => state,\r\n\t\t\tupdateState: (stateUpdate) => {\r\n\t\t\t\tconst stateUpdateAction = (stateUpdate) => {\r\n\t\t\t\t\t// Is only used in tests.\r\n\t\t\t\t\tif (onBeforeUpdateState) {\r\n\t\t\t\t\t\tonBeforeUpdateState(stateUpdate)\r\n\t\t\t\t\t}\r\n\t\t\t\t\tstate = {\r\n\t\t\t\t\t\t...state,\r\n\t\t\t\t\t\t...stateUpdate\r\n\t\t\t\t\t}\r\n\t\t\t\t\trender()\r\n\t\t\t\t\tthis.virtualScroller.onRender()\r\n\t\t\t\t}\r\n\t\t\t\tif (this.hasPausedStateUpdates) {\r\n\t\t\t\t\tthis.pausedStateUpdate = {\r\n\t\t\t\t\t\t...this.pausedStateUpdate,\r\n\t\t\t\t\t\t...stateUpdate\r\n\t\t\t\t\t}\r\n\t\t\t\t\tthis.pausedStateUpdateAction = stateUpdateAction\r\n\t\t\t\t} else {\r\n\t\t\t\t\tstateUpdateAction(stateUpdate)\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t})\r\n\r\n\t\trender()\r\n\t}\r\n\r\n\tpauseStateUpdates() {\r\n\t\tif (this.hasPausedStateUpdates) {\r\n\t\t\tthrow new Error('[virtual-scroller] State updates have already been paused')\r\n\t\t}\r\n\t\tthis.hasPausedStateUpdates = true\r\n\t}\r\n\r\n\tresumeStateUpdates() {\r\n\t\tif (this.pausedStateUpdate) {\r\n\t\t\tthis.pausedStateUpdateAction(this.pausedStateUpdate)\r\n\t\t\tthis.pausedStateUpdate = undefined\r\n\t\t\tthis.pausedStateUpdateAction = undefined\r\n\t\t}\r\n\t\tthis.hasPausedStateUpdates = false\r\n\t}\r\n\r\n\tverifyState(expectedState) {\r\n\t\t// `mocha`/`chai`.\r\n\t\tthis.virtualScroller.getState().should.deep.include(expectedState)\r\n\t}\r\n\r\n\texpectStateUpdate(stateUpdate, callback) {\r\n\t\tthis.expectedStateUpdates.push({\r\n\t\t\tstateUpdate,\r\n\t\t\tcallback\r\n\t\t})\r\n\t}\r\n\r\n\tgetFirstNonMeasuredItemIndex() {\r\n\t\treturn this.virtualScroller.firstNonMeasuredItemIndex\r\n\t}\r\n\r\n\tgetScrollY() {\r\n\t\treturn this.virtualScroller.scrollableContainer.getScrollY()\r\n\t}\r\n\r\n\tscrollTo(scrollPosition) {\r\n\t\tthis.virtualScroller.scrollableContainer.scrollToY(scrollPosition)\r\n\t}\r\n\r\n\tresize({\r\n\t\tscreenWidth: scrollableContainerWidth,\r\n\t\tscreenHeight: scrollableContainerHeight,\r\n\t\tcolumnsCount\r\n\t}) {\r\n\t\t// Resize scrollable container.\r\n\t\tthis.setScrollableContainerWidth(scrollableContainerWidth)\r\n\t\tthis.setScrollableContainerHeight(scrollableContainerHeight)\r\n\r\n\t\t// Update columns count.\r\n\t\tthis.__columnsCount = columnsCount\r\n\t}\r\n\r\n\t// Returns a `Promise`.\r\n\ttriggerResize({\r\n\t\tscreenWidth,\r\n\t\tscreenHeight,\r\n\t\tcolumnsCount,\r\n\t\tverticalSpacing\r\n\t}) {\r\n\t\tthis.resize({\r\n\t\t\tscreenWidth,\r\n\t\t\tscreenHeight,\r\n\t\t\tcolumnsCount,\r\n\t\t\tverticalSpacing\r\n\t\t})\r\n\r\n\t\t// Call \"on resize\" listener.\r\n\t\treturn this.virtualScroller.scrollableContainer._triggerResizeListener()\r\n\t}\r\n\r\n\tstop() {\r\n\t\tif (this.expectedStateUpdates.length > 0) {\r\n\t\t\tthrow new Error(`[virtual-scroller] Expected ${this.expectedStateUpdates.length} state updates which didn't happen:\\n${JSON.stringify(this.expectedStateUpdates, null, 2)}`)\r\n\t\t}\r\n\t\tif (this.pausedStateUpdate) {\r\n\t\t\tthrow new Error('[virtual-scroller] State updates were paused and haven\\'t been resumed afterwards')\r\n\t\t}\r\n\t\tthis.virtualScroller.stop()\r\n\t}\r\n\r\n\tstart() {\r\n\t\tthis.virtualScroller.start()\r\n\t}\r\n\r\n\tgetState() {\r\n\t\treturn this.virtualScroller.getState()\r\n\t}\r\n\r\n\tupdateLayout() {\r\n\t\tthis.virtualScroller.updateLayout()\r\n\t}\r\n\r\n\tgetItemScrollPosition(i) {\r\n\t\treturn this.virtualScroller.getItemScrollPosition(i)\r\n\t}\r\n\r\n\tgetAverageItemHeight() {\r\n\t\treturn this.virtualScroller.itemHeights.getAverage()\r\n\t}\r\n\r\n\tsetItems(newItems, options) {\r\n\t\tthis.virtualScroller.setItems(newItems, options)\r\n\t}\r\n}\r\n"],"mappings":"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"}
+{"version":3,"file":"VirtualScroller.js","names":["VirtualScroller","Engine","DEBUG","TestVirtualScroller","scrollableContainerWidth","screenWidth","scrollableContainerHeight","screenHeight","columnsCount","verticalSpacing","items","initialState","state","expectedStateUpdates","scrollableContainerElement","width","height","containerElement","paddingTop","paddingBottom","children","setScrollableContainerWidth","setScrollableContainerHeight","getItemsContainerElement","__columnsCount","getColumnsCount","getItemWidth","hasPausedStateUpdates","undefined","pausedStateUpdate","pausedStateUpdateAction","onBeforeUpdateState","stateUpdate","length","expectedStateUpdate","shift","expect","to","deep","equal","callback","render","virtualScroller","getState","beforeItemsHeight","afterItemsHeight","firstShownItemIndex","lastShownItemIndex","slice","map","item","getWidth","getHeight","getArea","area","getMarginTop","scrollableContainer","engine","_waitForScrollingToStop","onStateChange","console","log","getInitialState","useState","updateState","stateUpdateAction","onRender","Error","expectedState","should","include","push","firstNonMeasuredItemIndex","getScrollY","scrollPosition","scrollToY","updateScreenDimensions","_triggerResizeListener","JSON","stringify","stop","start","updateLayout","itemOrIndex","getItemScrollPosition","onItemHeightDidChange","newState","setItemState","getAverageItemHeight","newItems","options","setItems"],"sources":["../../source/test/VirtualScroller.js"],"sourcesContent":["import VirtualScroller from '../VirtualScroller.js'\r\nimport Engine from './Engine.js'\r\n\r\nconst DEBUG = false\r\n\r\nexport default class TestVirtualScroller {\r\n\tconstructor({\r\n\t\tscreenWidth: scrollableContainerWidth,\r\n\t\tscreenHeight: scrollableContainerHeight,\r\n\t\tcolumnsCount,\r\n\t\tverticalSpacing,\r\n\t\titems,\r\n\t\tstate: initialState\r\n\t}) {\r\n\t\tthis.expectedStateUpdates = []\r\n\r\n\t\tconst scrollableContainerElement = {\r\n\t\t\twidth: scrollableContainerWidth,\r\n\t\t\theight: scrollableContainerHeight\r\n\t\t}\r\n\r\n\t\tconst containerElement = {\r\n\t\t\tpaddingTop: 0,\r\n\t\t\tpaddingBottom: 0,\r\n\t\t\twidth: scrollableContainerElement.width,\r\n\t\t\tchildren: []\r\n\t\t}\r\n\r\n\t\tthis.setScrollableContainerWidth = (width) => {\r\n\t\t\tscrollableContainerElement.width = width\r\n\t\t\tcontainerElement.width = width\r\n\t\t}\r\n\r\n\t\tthis.setScrollableContainerHeight = (height) => {\r\n\t\t\tscrollableContainerElement.height = height\r\n\t\t}\r\n\r\n\t\tconst getItemsContainerElement = () => containerElement\r\n\r\n\t\tthis.__columnsCount = columnsCount\r\n\r\n\t\tconst getColumnsCount = () => this.__columnsCount\r\n\t\tconst getItemWidth = () => scrollableContainerElement.width / getColumnsCount()\r\n\r\n\t\tthis.hasPausedStateUpdates = undefined\r\n\t\tthis.pausedStateUpdate = undefined\r\n\t\tthis.pausedStateUpdateAction = undefined\r\n\r\n\t\tconst onBeforeUpdateState = (stateUpdate) => {\r\n\t\t\tif (this.expectedStateUpdates.length > 0) {\r\n\t\t\t\tconst expectedStateUpdate = this.expectedStateUpdates.shift()\r\n\t\t\t\texpect(stateUpdate).to.deep.equal(expectedStateUpdate.stateUpdate)\r\n\t\t\t\tif (expectedStateUpdate.callback) {\r\n\t\t\t\t\texpectedStateUpdate.callback()\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\tconst render = () => {\r\n\t\t\tconst {\r\n\t\t\t\titems,\r\n\t\t\t\tbeforeItemsHeight,\r\n\t\t\t\tafterItemsHeight,\r\n\t\t\t\tfirstShownItemIndex,\r\n\t\t\t\tlastShownItemIndex\r\n\t\t\t} = this.virtualScroller.getState()\r\n\r\n\t\t\tcontainerElement.paddingTop = beforeItemsHeight\r\n\t\t\tcontainerElement.paddingBottom = afterItemsHeight\r\n\r\n\t\t\tcontainerElement.children = items\r\n\t\t\t\t.slice(firstShownItemIndex, lastShownItemIndex + 1)\r\n\t\t\t\t.map((item) => ({\r\n\t\t\t\t\tgetWidth: () => getItemWidth(),\r\n\t\t\t\t\tgetHeight: () => (item.getArea ? item.getArea() : item.area) / getItemWidth(),\r\n\t\t\t\t\tgetMarginTop: () => verticalSpacing\r\n\t\t\t\t}))\r\n\t\t}\r\n\r\n\t\tthis.virtualScroller = new VirtualScroller(getItemsContainerElement, items, {\r\n\t\t\tscrollableContainer: scrollableContainerElement,\r\n\t\t\tengine: Engine,\r\n\t\t\t_waitForScrollingToStop: false,\r\n\t\t\tgetColumnsCount,\r\n\t\t\tstate: initialState,\r\n\t\t\tonStateChange(state) {\r\n\t\t\t\tif (DEBUG) {\r\n\t\t\t\t\tconsole.log('~ Updated State ~')\r\n\t\t\t\t\tconsole.log(state)\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t})\r\n\r\n\t\tlet state = this.virtualScroller.getInitialState()\r\n\r\n\t\tthis.virtualScroller.useState({\r\n\t\t\tgetState: () => state,\r\n\t\t\tupdateState: (stateUpdate) => {\r\n\t\t\t\tconst stateUpdateAction = (stateUpdate) => {\r\n\t\t\t\t\t// Is only used in tests.\r\n\t\t\t\t\tif (onBeforeUpdateState) {\r\n\t\t\t\t\t\tonBeforeUpdateState(stateUpdate)\r\n\t\t\t\t\t}\r\n\t\t\t\t\tstate = {\r\n\t\t\t\t\t\t...state,\r\n\t\t\t\t\t\t...stateUpdate\r\n\t\t\t\t\t}\r\n\t\t\t\t\trender()\r\n\t\t\t\t\tthis.virtualScroller.onRender()\r\n\t\t\t\t}\r\n\t\t\t\tif (this.hasPausedStateUpdates) {\r\n\t\t\t\t\tthis.pausedStateUpdate = {\r\n\t\t\t\t\t\t...this.pausedStateUpdate,\r\n\t\t\t\t\t\t...stateUpdate\r\n\t\t\t\t\t}\r\n\t\t\t\t\tthis.pausedStateUpdateAction = stateUpdateAction\r\n\t\t\t\t} else {\r\n\t\t\t\t\tstateUpdateAction(stateUpdate)\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t})\r\n\r\n\t\trender()\r\n\t}\r\n\r\n\tpauseStateUpdates() {\r\n\t\tif (this.hasPausedStateUpdates) {\r\n\t\t\tthrow new Error('[virtual-scroller] State updates have already been paused')\r\n\t\t}\r\n\t\tthis.hasPausedStateUpdates = true\r\n\t}\r\n\r\n\tresumeStateUpdates() {\r\n\t\tif (this.pausedStateUpdate) {\r\n\t\t\tthis.pausedStateUpdateAction(this.pausedStateUpdate)\r\n\t\t\tthis.pausedStateUpdate = undefined\r\n\t\t\tthis.pausedStateUpdateAction = undefined\r\n\t\t}\r\n\t\tthis.hasPausedStateUpdates = false\r\n\t}\r\n\r\n\tverifyState(expectedState) {\r\n\t\t// `mocha`/`chai`.\r\n\t\tthis.virtualScroller.getState().should.deep.include(expectedState)\r\n\t}\r\n\r\n\texpectStateUpdate(stateUpdate, callback) {\r\n\t\tthis.expectedStateUpdates.push({\r\n\t\t\tstateUpdate,\r\n\t\t\tcallback\r\n\t\t})\r\n\t}\r\n\r\n\tgetFirstNonMeasuredItemIndex() {\r\n\t\treturn this.virtualScroller.firstNonMeasuredItemIndex\r\n\t}\r\n\r\n\tgetScrollY() {\r\n\t\treturn this.virtualScroller.scrollableContainer.getScrollY()\r\n\t}\r\n\r\n\tscrollTo(scrollPosition) {\r\n\t\tthis.virtualScroller.scrollableContainer.scrollToY(scrollPosition)\r\n\t}\r\n\r\n\tupdateScreenDimensions({\r\n\t\tscreenWidth: scrollableContainerWidth,\r\n\t\tscreenHeight: scrollableContainerHeight,\r\n\t\tcolumnsCount\r\n\t}) {\r\n\t\t// Resize scrollable container.\r\n\t\tthis.setScrollableContainerWidth(scrollableContainerWidth)\r\n\t\tthis.setScrollableContainerHeight(scrollableContainerHeight)\r\n\r\n\t\t// Update columns count.\r\n\t\tthis.__columnsCount = columnsCount\r\n\t}\r\n\r\n\t// Returns a `Promise`.\r\n\ttriggerResize({\r\n\t\tscreenWidth,\r\n\t\tscreenHeight,\r\n\t\tcolumnsCount,\r\n\t\tverticalSpacing\r\n\t}) {\r\n\t\tthis.updateScreenDimensions({\r\n\t\t\tscreenWidth,\r\n\t\t\tscreenHeight,\r\n\t\t\tcolumnsCount,\r\n\t\t\tverticalSpacing\r\n\t\t})\r\n\r\n\t\t// Call \"on resize\" listener.\r\n\t\treturn this.virtualScroller.scrollableContainer._triggerResizeListener()\r\n\t}\r\n\r\n\tstop() {\r\n\t\tif (this.expectedStateUpdates.length > 0) {\r\n\t\t\tthrow new Error(`[virtual-scroller] Expected ${this.expectedStateUpdates.length} state updates which didn't happen:\\n${JSON.stringify(this.expectedStateUpdates, null, 2)}`)\r\n\t\t}\r\n\t\tif (this.pausedStateUpdate) {\r\n\t\t\tthrow new Error('[virtual-scroller] State updates were paused and haven\\'t been resumed afterwards')\r\n\t\t}\r\n\t\tthis.virtualScroller.stop()\r\n\t}\r\n\r\n\tstart() {\r\n\t\tthis.virtualScroller.start()\r\n\t}\r\n\r\n\tgetState() {\r\n\t\treturn this.virtualScroller.getState()\r\n\t}\r\n\r\n\tupdateLayout() {\r\n\t\tthis.virtualScroller.updateLayout()\r\n\t}\r\n\r\n\tgetItemScrollPosition(itemOrIndex) {\r\n\t\treturn this.virtualScroller.getItemScrollPosition(itemOrIndex)\r\n\t}\r\n\r\n\tonItemHeightDidChange(itemOrIndex) {\r\n\t\tthis.virtualScroller.onItemHeightDidChange(itemOrIndex)\r\n\t}\r\n\r\n\tsetItemState(itemOrIndex, newState) {\r\n\t\tthis.virtualScroller.setItemState(itemOrIndex, newState)\r\n\t}\r\n\r\n\tgetAverageItemHeight() {\r\n\t\treturn this.virtualScroller.getAverageItemHeight()\r\n\t}\r\n\r\n\tsetItems(newItems, options) {\r\n\t\tthis.virtualScroller.setItems(newItems, options)\r\n\t}\r\n}\r\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "virtual-scroller",
-  "version": "1.14.0",
+  "version": "1.15.1",
   "description": "A component for efficiently rendering large lists of variable height items",
   "main": "index.cjs",
   "module": "index.js",
@@ -46,6 +46,9 @@
     "mocha": "^10.0.0",
     "npm-run-all": "^4.1.5",
     "nyc": "^15.1.0",
+    "prop-types": "^15.8.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
     "regenerator-runtime": "^0.13.9",
     "rimraf": "^3.0.2",
     "rollup": "^2.73.0",

package/react/as.d.ts

@@ -0,0 +1,42 @@
+// The following is an `as` property implementation
+// that was copy-pasted from https://www.benmvp.com/blog/polymorphic-react-components-typescript/
+//
+// P.S. `as` property is now deprecated, so this file is a legacy one.
+// Use `itemsContainerComponent` property instead.
+//
+// "A more precise version of `React.ComponentPropsWithoutRef`".
+// It's not clear what exactly they meant by that.
+type PropsOf<
+	Component extends keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>
+> = JSX.LibraryManagedAttributes<Component, React.ComponentPropsWithoutRef<Component>>
+//
+// Combines props with any additional props.
+type CombineProps<
+	BaseProps = {},
+	AdditionalProps = {}
+> = Omit<BaseProps, keyof AdditionalProps> & AdditionalProps
+//
+// Combines component props with any additional props.
+type CombineComponentPropsWith<
+	Component extends React.ElementType,
+	Props = {}
+> = CombineProps<PropsOf<Component>, Props>
+//
+// Adds an `as: AsComponent` property.
+export type WithAsProperty<
+	AsComponent extends React.ElementType,
+	Props = {}
+> = CombineComponentPropsWith<AsComponent, Props & { as?: AsComponent }>
+// //
+// // This is a type of a `ref` that will be passed to a given `Component`.
+// export type ComponentRef<
+//   Component extends React.ElementType
+// > = React.ComponentPropsWithRef<Component>['ref']
+// //
+// // Adds an `as: AsComponent` property along with a `ref` property.
+// export type WithAsPropertyAndRef<
+//   AsComponent extends React.ElementType,
+//   Props = {}
+// > = WithAsProperty<AsComponent, Props> & {
+// 	ref?: ComponentRef<AsComponent>
+// }

package/react/index.cjs

@@ -1,4 +1,5 @@
 'use strict'
 
 exports = module.exports = require('../commonjs/react/VirtualScroller.js').default
-exports['default'] = require('../commonjs/react/VirtualScroller.js').default
+exports['default'] = require('../commonjs/react/VirtualScroller.js').default
+exports.useVirtualScroller = require('../commonjs/react/useVirtualScroller.js').default

package/react/index.d.ts

@@ -1,85 +1,270 @@
-import { State, NoItemState, VirtualScrollerCommonOptions } from '../index.d.js';
+import { default as VirtualScrollerCore, State, VirtualScrollerCommonOptions } from '../index.d.js';
 
-export { State } from '../index.d.js';
+// `as` property is now deprecated, so `WithAsProperty` type is a legacy one.
+// Use `itemsContainerComponent` property instead.
+import { WithAsProperty } from './as.d.js';
 
 import * as React from 'react';
 
-// Taken from https://www.benmvp.com/blog/polymorphic-react-components-typescript/
+export { State, NoItemState } from '../index.d.js';
 
-// A more precise version of just React.ComponentPropsWithoutRef on its own
-export type PropsOf<
-	C extends keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>
-	> = JSX.LibraryManagedAttributes<C, React.ComponentPropsWithoutRef<C>>
+// If `<VirtualScroller/>` simply forwarded the `ref` to the `itemsContainerComponent`
+// then the type of the `ref` would be this:
+//
+// export type VirtualScrollerRef<Component> = Ref<Component>
+//
+// But since `<VirtualScroller/>` exposes some instance methods through the `ref`,
+// the type of the `ref` is:
+//
+export interface VirtualScrollerRefValue {
+	// // Returns the items container `Element`.
+	// getElement(): HTMLElement;
+	//
+	// Below is a more sophisticated variant of `getElement()` that returns exactly
+	// the tag specified as the `ItemsContainerComponent`.
+	// There seems to be no requirement for such "more sophisticated" type declaration.
+	// Hence, it is commented out and a simpler type of just `HTMLElement` is used.
+	//
+	// getElement(): ItemsContainerComponent extends keyof JSX.IntrinsicElements
+	// 	? (
+	// 		JSX.IntrinsicElements[ItemsContainerComponent] extends React.DetailedHTMLProps<React.AnchorHTMLAttributes<infer T>, T>
+	// 			? T
+	// 			: HTMLElement
+	// 	) : HTMLElement;
 
-type AsProp<C extends React.ElementType> = {
-	/**
-	 * An override of the default HTML tag.
-	 * Can also be another React component.
-	 */
-	as?: C
+	// Forces a re-calculation and re-render of the list.
+	updateLayout(): void;
 }
 
-/**
- * Allows for extending a set of props (`ExtendedProps`) by an overriding set of props
- * (`OverrideProps`), ensuring that any duplicates are overridden by the overriding
- * set of props.
- */
-export type ExtendableProps<
-	ExtendedProps = {},
-	OverrideProps = {}
-	> = OverrideProps & Omit<ExtendedProps, keyof OverrideProps>
-
-/**
- * Allows for inheriting the props from the specified element type so that
- * props like children, className & style work, as well as element-specific
- * attributes like aria roles. The component (`C`) must be passed in.
- */
-export type InheritableElementProps<
-	C extends React.ElementType,
-	Props = {}
-	> = ExtendableProps<PropsOf<C>, Props>
-
-/**
- * A more sophisticated version of `InheritableElementProps` where
- * the passed in `as` prop will determine which props can be included
- */
-export type PolymorphicComponentProps<
-	C extends React.ElementType,
-	Props = {}
-	> = InheritableElementProps<C, Props & AsProp<C>>
-
-export interface ItemComponentVirtualScrollerProps<Item, ItemState> {
-	item: Item;
-	state: ItemState;
-	setState: (newState: ItemState) => void;
-	onHeightDidChange: () => void;
-}
+// // This is a type of a `ref` that will be passed to a given `Component`.
+// type ComponentRef<Component extends React.ElementType> = React.ComponentPropsWithRef<Component>['ref']
 
-interface PropsBase<ItemComponentProps extends object, Item, ItemState> extends VirtualScrollerCommonOptions<Item, ItemState> {
+// These props are shared between `useVirtualScroller()` hook and `<VirtualScroller/>` component.
+interface PropsBase<
+	// `Item` is the type of an element of the `items` array.
+	Item,
+
+	// `ItemComponentState` is the type of an item component state.
+	// Example: `interface ItemComponentState { expanded?: boolean }`.
+	//
+	// In most cases, a developer won't even have to bother about item component state
+	// because `ItemComponent` won't have any state.
+	// In such cases, type `unknown` is used as a "dummy" placeholder
+	// just so that TypeScript doesn't complain about this "generic" being unspecified.
+	//
+	ItemComponentState = unknown
+> extends VirtualScrollerCommonOptions<Item, ItemComponentState> {
 	items: Item[];
-	itemComponent: React.ElementType<ItemComponentProps & ItemComponentVirtualScrollerProps<Item, ItemState>>;
-	itemComponentProps?: ItemComponentProps;
-	initialState?: State<Item, ItemState>;
+	initialState?: State<Item, ItemComponentState>;
 	preserveScrollPositionOnPrependItems?: boolean;
 	readyToStart?: boolean;
-
+	tbody?: boolean;
 	getScrollableContainer?(): HTMLElement;
 }
 
+// These are `<VirtualScroller/>` props except the deprecated `as` property.
+// When `as` property is removed in some future, `PropsWithoutAs` could be renamed to just `export Props`.
+interface PropsWithoutAs<
+	// `Item` is the type of an element of the `items` array.
+	Item,
+
+	// `ItemComponent` is a React component that renders an `item` element.
+	ItemComponent extends React.ElementType,
+
+	// `ItemComponentState` is the type of an item component state.
+	// Example: `interface ItemComponentState { expanded?: boolean }`.
+	//
+	// In most cases, a developer won't even have to bother about item component state
+	// because `ItemComponent` won't have any state.
+	// In such cases, type `unknown` is used as a "dummy" placeholder
+	// just so that TypeScript doesn't complain about this "generic" being unspecified.
+	//
+	ItemComponentState = unknown,
+
+	// `ItemsContainerComponent` is a React component that renders an element
+	// that will be used as a container for all item elements.
+	//
+	// The default value of `"div"` is legacy behavior.
+	// New applications should always specify `itemsContainerComponent` property value.
+	//
+	ItemsContainerComponent extends React.ElementType = 'div'
+> extends PropsBase<Item, ItemComponentState> {
+	ref: React.Ref<VirtualScrollerRefValue>;
+	// If `ref` was just "forwarded" to the `ItemsContainerComponent`, its type would have been this:
+	// ref: ComponentRef<ItemsContainerComponent>;
+	itemComponent: ItemComponent;
+	itemComponentProps?: Partial<
+		Omit<
+			React.ComponentPropsWithoutRef<ItemComponent>,
+			keyof VirtualScrollerItemComponentProps<Item, ItemComponentState>
+		>
+	>;
+	// `itemsContainerComponent` property is optional just to avoid legacy compatibility issues.
+	// Any new application should explicitly specify it and consider it required.
+	itemsContainerComponent?: ItemsContainerComponent;
+	itemsContainerComponentProps?: Partial<
+		React.ComponentPropsWithoutRef<ItemsContainerComponent>
+	>;
+	itemsContainerRef?: React.ComponentPropsWithRef<ItemsContainerComponent>['ref'];
+}
+
+// These are `<VirtualScroller/>` props including the deprecated `as` property.
+// When `as` property is removed in some future, `PropsWithoutAs` will simply replace this type.
 export type Props<
-	ItemComponentProps extends object = {},
-	Item = any,
-	ItemState = NoItemState,
-	AsElement extends React.ElementType = 'div'
-> = PolymorphicComponentProps<AsElement, PropsBase<ItemComponentProps, Item, ItemState>>
+	// `Item` is the type of an element of the `items` array.
+	Item,
+
+	// `ItemComponent` is a React component that renders an `item` element.
+	ItemComponent extends React.ElementType,
+
+	// `ItemComponentState` is the type of an item component state.
+	// Example: `interface ItemComponentState { expanded?: boolean }`.
+	//
+	// In most cases, a developer won't even have to bother about item component state
+	// because `ItemComponent` won't have any state.
+	// In such cases, type `unknown` is used as a "dummy" placeholder
+	// just so that TypeScript doesn't complain about this "generic" being unspecified.
+	//
+	ItemComponentState = unknown,
+
+	// `ItemsContainerComponent` is a React component that renders an element
+	// that will be used as a container for all item elements.
+	//
+	// The default value of `"div"` is legacy behavior.
+	// New applications should always specify `itemsContainerComponent` property value.
+	//
+	ItemsContainerComponent extends React.ElementType = 'div',
+
+	// `as` property is deprecated; use `itemsContainerComponent` property instead.
+	// In some future, `AsComponent` "generic" will be removed from here
+	// and it won't be considered a "breaking change" because it doesn't affect the javascript code.
+	AsComponent extends React.ElementType = 'div'
+> = WithAsProperty<
+	AsComponent,
+	PropsWithoutAs<
+		Item,
+		ItemComponent,
+		ItemComponentState,
+		ItemsContainerComponent
+	>
+>
 
 declare function VirtualScroller<
-	ItemComponentProps extends object = {},
-	Item = any,
-	ItemState = NoItemState,
-	AsElement extends React.ElementType = 'div'
+	// `Item` is the type of an element of the `items` array.
+	Item,
+
+	// `ItemComponent` is a React component that renders an `item` element.
+	ItemComponent extends React.ElementType,
+
+	// `ItemComponentState` is the type of an item component state.
+	// Example: `interface ItemComponentState { expanded?: boolean }`.
+	//
+	// In most cases, a developer won't even have to bother about item component state
+	// because `ItemComponent` won't have any state.
+	// In such cases, type `unknown` is used as a "dummy" placeholder
+	// just so that TypeScript doesn't complain about this "generic" being unspecified.
+	//
+	ItemComponentState = unknown,
+
+	// `ItemsContainerComponent` is a React component that renders an element
+	// that will be used as a container for all item elements.
+	//
+	// The default value of `"div"` is legacy behavior.
+	// New applications should always specify `itemsContainerComponent` property value.
+	//
+	ItemsContainerComponent extends React.ElementType = 'div',
+
+	// `as` property is deprecated, use `itemsContainerComponent` property instead.
+	// In some future, `AsComponent` "generic" will be removed from here
+	// and it won't be considered a "breaking change" because it doesn't affect the javascript code.
+	AsComponent extends React.ElementType = 'div'
 >(
-	props: Props<ItemComponentProps, Item, ItemState, AsElement>
+	props: Props<
+		Item,
+		ItemComponent,
+		ItemComponentState,
+		ItemsContainerComponent,
+		// `as` property is deprecated, use `itemsContainerComponent` property instead.
+		// In some future, `AsComponent` "generic" will be removed from here
+		// and it won't be considered a "breaking change" because it doesn't affect the javascript code.
+		AsComponent
+	>
 ): JSX.Element;
 
 export default VirtualScroller;
+
+export function useVirtualScroller<
+	// `Item` is the type of an element of the `items` array.
+	Item,
+
+	// `ItemComponentState` is the type of an item component state.
+	// Example: `interface ItemComponentState { expanded?: boolean }`.
+	//
+	// In most cases, a developer won't even have to bother about item component state
+	// because `ItemComponent` won't have any state.
+	// In such cases, type `unknown` is used as a "dummy" placeholder
+	// just so that TypeScript doesn't complain about this "generic" being unspecified.
+	//
+	ItemComponentState = unknown
+>(
+	props: PropsBase<Item, ItemComponentState>
+): UseVirtualScrollerResult<Item, ItemComponentState>;
+
+interface UseVirtualScrollerResult<Item, ItemComponentState> {
+	// Use this `state` instead of `virtualScroller.getState()`.
+	state: State<Item, ItemComponentState>;
+	style?: React.CSSProperties;
+	className?: string;
+	itemsContainerRef: React.Ref<HTMLElement>;
+	virtualScroller: VirtualScrollerCore<HTMLElement, Item, ItemComponentState>;
+}
+
+// The props that're passed by `<VirtualScroller/>` to `ItemComponent`.
+export interface VirtualScrollerItemComponentProps<Item, ItemComponentState> {
+	item: Item;
+	state?: ItemComponentState;
+	setState: (newState: ItemComponentState) => void;
+	onHeightDidChange: () => void;
+}
+
+// This properties are passed by `<VirtualScroller/>` to the `itemsContainerComponent`.
+export interface VirtualScrollerItemsContainerComponentProps<
+	ItemsContainerComponent extends React.ElementType
+> {
+	ref: React.ComponentPropsWithRef<ItemsContainerComponent>['ref'];
+	className?: string;
+	style?: React.CSSProperties;
+}
+
+// // Utility Type: Combines props with any additional props.
+// //
+// // The rationale for using it is that the standard `&` operator
+// // doesn't work in "merge-and-replace" mode but rather in "merge-and-combine" mode.
+// //
+// // "When properties with the same name but different types are intersected,
+// //  TypeScript tries to find a common type. If no common type exists,
+// //  the resulting type for that property becomes `never`."
+// //
+// type CombineProps<
+// 	BaseProps = {},
+// 	AdditionalProps = {}
+// > = Omit<BaseProps, keyof AdditionalProps> & AdditionalProps
+
+// // `ItemComponentProps`.
+// type ItemComponentProps<Item, ItemComponent extends React.ElementType, ItemComponentState> =
+// 	CombineProps<
+// 		React.ComponentPropsWithRef<ItemComponent>,
+// 		VirtualScrollerItemComponentProps<Item, ItemComponentState>
+// 	>
+
+// // `ItemsContainerComponentProps`.
+// type ItemsContainerComponentProps<ItemsContainerComponent extends React.ElementType> =
+// 	CombineProps<
+// 		React.ComponentPropsWithRef<ItemsContainerComponent>,
+// 		VirtualScrollerItemsContainerComponentProps
+// 	>
+
+// // Utility Type: Fits any object.
+// interface AnyObject {
+// 	[key: string]: any;
+// }

package/react/index.js

@@ -1 +1,2 @@
 export { default } from '../modules/react/VirtualScroller.js'
+export { default as useVirtualScroller } from '../modules/react/useVirtualScroller.js'

package/rollup.config.mjs

@@ -37,7 +37,21 @@ export default [
     }
   },
   {
-    input: 'react/index.js',
+    // Legacy compatibility:
+    //
+    // Originally, the default export of the `virtual-scroller/react` subpackage
+    // was only the `VirtualScroller` component, and there were no other exports.
+    //
+    // Later, `useVirtualScroller()` hook export was added.
+    // In order to maintain legacy compatibility, the new exports shouldn't "break"
+    // the existing environments that were using the old versions of the package.
+    // This means that in non-ES6-import environments, any additional exports
+    // should be added directly to the default `VirtualScroller` export.
+    //
+    // That's the reason why it uses "modules/react/VirtualScroller.js" file
+    // as `input` here instead of "react/index.js".
+    //
+    input: 'modules/react/VirtualScroller.js',
     plugins: [
       resolveModules,
       commonjs(),

package/source/BeforeResize.js

@@ -171,8 +171,7 @@ export default class BeforeResize {
 	//
 	snapshotBeforeResizeItemHeights({
 		firstShownItemIndex,
-		newFirstShownItemIndex,
-		newColumnsCount
+		newFirstShownItemIndex
 	}) {
 		const columnsCount = this.getColumnsCount()
 		const verticalSpacing = this.getVerticalSpacing()

package/source/DOM/VirtualScroller.js

@@ -176,17 +176,17 @@ export default class VirtualScroller {
    * @deprecated
    * `.onItemHeightChange()` has been renamed to `.onItemHeightDidChange()`.
    */
-  onItemHeightChange(i) {
-    warn('`.onItemHeightChange(i)` method was renamed to `.onItemHeightDidChange(i)`')
-    this.onItemHeightDidChange(i)
+  onItemHeightChange(itemOrIndex) {
+    warn('`.onItemHeightChange(item)` method was renamed to `.onItemHeightDidChange(item)`')
+    this.onItemHeightDidChange(itemOrIndex)
   }
 
-  onItemHeightDidChange(i) {
-    this.virtualScroller.onItemHeightDidChange(i)
+  onItemHeightDidChange(itemOrIndex) {
+    this.virtualScroller.onItemHeightDidChange(itemOrIndex)
   }
 
-  setItemState(i, newState) {
-    this.virtualScroller.setItemState(i, newState)
+  setItemState(itemOrIndex, newState) {
+    this.virtualScroller.setItemState(itemOrIndex, newState)
   }
 
   /**
@@ -201,10 +201,4 @@ export default class VirtualScroller {
   setItems(newItems, options) {
     this.virtualScroller.setItems(newItems, options)
   }
-
-  /*
-  getItemCoordinates(i) {
-    return this.virtualScroller.getItemCoordinates(i)
-  }
-  */
 }

package/source/DOM/tbody.js

@@ -19,17 +19,17 @@ export function supportsTbody() {
 	return !isInternetExplorer()
 }
 
-export const TBODY_CLASS_NAME = 'VirtualScroller'
+export const CLASS_NAME_FOR_TBODY_WORKAROUND = 'VirtualScroller'
 const STYLE_ELEMENT_ID = 'VirtualScrollerStyle'
 
 export function hasTbodyStyles(tbody) {
-	return tbody.classList.contains(TBODY_CLASS_NAME) &&
+	return tbody.classList.contains(CLASS_NAME_FOR_TBODY_WORKAROUND) &&
 		Boolean(document.getElementById(STYLE_ELEMENT_ID))
 }
 
 export function addTbodyStyles(tbody) {
 	// `classList.add` is supported in Internet Explorer 10+.
-	tbody.classList.add(TBODY_CLASS_NAME)
+	tbody.classList.add(CLASS_NAME_FOR_TBODY_WORKAROUND)
 
 	// Create a `<style/>` element.
 	const style = document.createElement('style')
@@ -37,12 +37,12 @@ export function addTbodyStyles(tbody) {
 
 	// CSS variables aren't supported in Internet Explorer.
 	style.innerText = `
-		tbody.${TBODY_CLASS_NAME}:before {
+		tbody.${CLASS_NAME_FOR_TBODY_WORKAROUND}:before {
 			content: '';
 			display: table-row;
 			height: var(--VirtualScroller-paddingTop);
 		}
-		tbody.${TBODY_CLASS_NAME}:after {
+		tbody.${CLASS_NAME_FOR_TBODY_WORKAROUND}:after {
 			content: '';
 			display: table-row;
 			height: var(--VirtualScroller-paddingBottom);