Fixed edge-case bug with Grid imperative API scrollToCell method and "smooth" scrolling behavior.

• Remove ARIA role attribute from List and Grid. This resulted in potentially invalid configurations (e.g. a ARIA list should contain at least one listitem but that was not enforced by this library). Users of this library should specify the role attribute that makes the most sense to them based on mdn guidelines. For example:

<List
  role="list"
  rowComponent={RowComponent}
  rowCount={names.length}
  rowHeight={25}
  rowProps={{ names }}
/>;

function RowComponent({ index, style, ...rest }: RowComponentProps<object>) {
  return (
    <div role="listitem" style={style}>
      ...
    </div>
  );
}

Version 2 is a major rewrite that offers the following benefits:

• More ergonomic props API
• Automatic memoization of row/cell renderers and props/context
• Automatically sizing for List and Grid (no more need for AutoSizer)
• Native TypeScript support (no more need for @types/react-window)
• Smaller bundle size

Upgrade path

See the documentation for more details, but here is an example of what the v1 to v2 upgrade might look like:

Before

import { FixedSizeList, type ListChildComponentProps } from "react-window";

function Example({ names }: { names: string[] }) {
  const itemData = useMemo<ItemData>(() => ({ names }), [names]);

  return (
    <FixedSizeList
      children={Row}
      height={150}
      itemCount={1000}
      itemData={itemData}
      itemSize={25}
      width={300}
    />
  );
}

function Row({
  data,
  index,
  style
}: ListChildComponentProps<{
  names: string[];
}>) {
  const { names } = data;
  const name = names[index];
  return <div style={style}>{name}</div>;
}

After

import { List, type RowComponentProps } from "react-window";

function Example({ names }: { names: string[] }) {
  return (
    <List
      rowComponent={RowComponent}
      rowCount={names.length}
      rowHeight={25}
      rowProps={{ names }}
    />
  );
}

function RowComponent({
  index,
  names,
  style
}: RowComponentProps<{
  names: string[];
}>) {
  const name = names[index];
  return <div style={style}>{name}</div>;
}

⚠️ Version 2 requirements

The following requirements are new in version 2 and may be reasons to consider not upgrading:

• Peer dependencies now require React version 18 or newer
• ResizeObserver primitive (or polyfill) is required unless explicit pixel dimensions are provided via style prop; (see documentation for more)

• 🎉 Improved Flow types to include optional itemData parameter. (TrySound - #66)
• 🐛 VariableSizeList and VariableSizeGrid no longer call size getter functions with invalid index when item count is zero.

• Remove overflow:hidden from inner container (souporserious - #56)
• 🎉 Flow types added to NPM package. (TrySound - #40)
• 🎉 Relaxed grid scrollTo method to make scrollLeft and scrollTop params optional (so you can only update one axis if desired). - #63)
• 🐛 Fixed invalid this pointer in VariableSizeGrid that broke the resetAfter* methods - #58)