virtual-scroller 1.9.0 → 1.10.0

package/react/index.d.ts

@@ -4,25 +4,63 @@ export { State, ItemState } from '../index.d.ts';
 
 import * as React from 'react';
 
-interface Props<Item> extends VirtualScrollerCommonOptions<HTMLElement, Item>, React.HTMLAttributes<HTMLElement> {
-	as?: React.ElementType;
+// Taken from https://www.benmvp.com/blog/polymorphic-react-components-typescript/
+
+// 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>>
+
+type AsProp<C extends React.ElementType> = {
+	/**
+	 * An override of the default HTML tag.
+	 * Can also be another React component.
+	 */
+	as?: C
+}
+
+/**
+ * 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>>
+
+interface Props<Item, ItemComponentProps extends object>
+	extends VirtualScrollerCommonOptions<Item>{
 	items: Item[];
-	itemComponent: React.ElementType;
-	itemComponentProps?: object;
+	itemComponent: React.ElementType<ItemComponentProps & { item: Item, itemIndex: number }>;
+	itemComponentProps?: ItemComponentProps;
 	initialState?: State<Item>;
 	preserveScrollPositionOnPrependItems?: boolean;
+
 	getScrollableContainer?(): HTMLElement;
 }
 
-type ReactVirtualScroller<Item> = (props: Props<Item>) => JSX.Element;
-
-// TypeScript doesn't know how to receive `<Item>` "generic":
-// declare const VirtualScroller<Item>: ReactVirtualScroller<Item>;
-//
-// Uses `<any>` instead.
-//
-// If someone finds a fix for this, create an issue.
-//
-declare const VirtualScroller: ReactVirtualScroller<any>;
+declare function VirtualScroller<Item = any, ItemComponentProps extends object={}, AsElement extends React.ElementType = 'div'>(
+	props: PolymorphicComponentProps<AsElement, Props<Item, ItemComponentProps>>
+): JSX.Element;
 
-export default VirtualScroller;
+export default VirtualScroller;

package/source/VirtualScroller.js

@@ -35,7 +35,7 @@ export default class VirtualScroller {
 		const isRestart = this._isActive === false
 
 		if (!isRestart) {
-			// If no custom one has been configured, uses the default one.
+			// If no custom state storage has been configured, use the default one.
 			// Also sets the initial state.
 			if (!this._usesCustomStateStorage) {
 				this.useDefaultStateStorage()

package/source/react/VirtualScroller.js

@@ -1,4 +1,4 @@
-import { useRef, useMemo, useLayoutEffect } from 'react'
+import React, { useRef, useMemo, useLayoutEffect } from 'react'
 import PropTypes from 'prop-types'
 
 import useState from './useState.js'
@@ -184,8 +184,14 @@ function VirtualScroller({
 			style={style}>
 			{renderedItems.map((item, i) => {
 				if (i >= firstShownItemIndex && i <= lastShownItemIndex) {
+					// Passing `item` as `children` property is legacy and is deprecated.
+					// If version `2.x` is published in some hypothetical future,
+					// the `item` and `itemIndex` properties should be moved below
+					// `{...itemComponentProps}`.
 					return (
 						<Component
+							item={item}
+							itemIndex={i}
 							{...itemComponentProps}
 							key={getItemKey(item, i)}
 							state={itemStates && itemStates[i]}

package/source/react/useHandleItemsChange.js

@@ -1,4 +1,4 @@
-import { useRef, useLayoutEffect } from 'react'
+import { useRef } from 'react'
 
 // If new `items` are passed:
 //

package/website/index-bypass.html

@@ -135,7 +135,7 @@
 			}
 
 			function Message(props) {
-				const { children: message } = props
+				const { item: message } = props
 				const {
 					username,
 					date,
@@ -157,7 +157,7 @@
 			}
 
 			Message.propTypes = {
-				children: message.isRequired
+				item: message.isRequired
 			}
 
 			class Feed extends React.Component {

package/website/index-grid.html

@@ -156,7 +156,7 @@
 			}
 
 			function Message(props) {
-				const { children: message } = props
+				const { item: message } = props
 				const {
 					username,
 					date,
@@ -178,7 +178,7 @@
 			}
 
 			Message.propTypes = {
-				children: message.isRequired
+				item: message.isRequired
 			}
 
 			class Feed extends React.Component {

package/website/index-scrollableContainer.html

@@ -148,7 +148,7 @@
 			}
 
 			function Message(props) {
-				const { children: message } = props
+				const { item: message } = props
 				const {
 					username,
 					date,
@@ -170,7 +170,7 @@
 			}
 
 			Message.propTypes = {
-				children: message.isRequired
+				item: message.isRequired
 			}
 
 			class Feed extends React.Component {

package/website/index.html

@@ -124,7 +124,7 @@
 			}
 
 			function Message(props) {
-				const { children: message } = props
+				const { item: message } = props
 				const {
 					username,
 					date,
@@ -146,7 +146,7 @@
 			}
 
 			Message.propTypes = {
-				children: message.isRequired
+				item: message.isRequired
 			}
 
 			class Feed extends React.Component {