feat: rebase + measure via getBoundingClientRect + add roundingMode prop for sub-pixel rounding control

.babelrc.js

@@ -14,6 +14,7 @@ if (env === 'commonjs' || env === 'es') {
     plugins: [
       '@babel/plugin-transform-runtime',
       '@babel/plugin-proposal-class-properties',
+      '@babel/plugin-transform-flow-comments',
       ['flow-react-proptypes', {deadCode: true, useESModules: true}],
       ['transform-react-remove-prop-types', {mode: 'wrap'}],
     ],

.github/workflows/stale.yml

@@ -0,0 +1,15 @@
+name: Close stale issues and PRs
+on:
+  schedule:
+    - cron: '0 8 * * *'
+
+jobs:
+  stale:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/stale@v9.0.0
+        with:
+          days-before-stale: 28
+          days-before-close: 0
+          exempt-issue-labels: do-not-close
+          exempt-pr-labels: do-not-close

.gitignore

@@ -1,9 +1,7 @@
 .DS_Store
 build
 coverage
-dist
 node_modules
 npm-debug.log
-styles.css
 .vscode
 .idea

CHANGELOG.md

@@ -1,5 +1,22 @@
 ## Changelog
 
+##### NEXT
+
+- Update peer dependencies to allow React 17 ([levenleven](https://github.com/levenleven) - [#1625](https://github.com/bvaughn/react-virtualized/pull/1625))
+- Use DOM API instead of creating Trusted Types policy to append a markup ([shhnjk](https://github.com/shhnjk) - [#1627](https://github.com/bvaughn/react-virtualized/pull/1627))
+- Fix bug in WindowScroller::updatePosition ([yamadapc](https://github.com/yamadapc) - [#1642](https://github.com/bvaughn/react-virtualized/pull/1642), [#1648](https://github.com/bvaughn/react-virtualized/pull/1648))
+- Fix babel tranform es error ([fupengl](https://github.com/fupengl) - [#1651](https://github.com/bvaughn/react-virtualized/pull/1651))
+- Fix issue with unused import being emitted ([mewhhaha](https://github.com/mewhhaha) - [#1635](https://github.com/bvaughn/react-virtualized/pull/1635))
+- Fix grid roles for accessbility ([asnewman](https://github.com/asnewman) - [#1624](https://github.com/bvaughn/react-virtualized/pull/1624))
+
+##### 9.22.5
+
+- React 19 support added; special thanks to ([artur-ptaszek-mck](https://github.com/artur-ptaszek-mck) and ([adubrouski](https://github.com/adubrouski)
+
+##### 9.22.4
+
+- README changes
+
 ##### 9.22.3
 
 - Add Trusted Types support ([shhnjk](https://github.com/shhnjk) - [#1614](https://github.com/bvaughn/react-virtualized/pull/1614))

README.md

@@ -1,17 +1,10 @@
 [<img src="https://cloud.githubusercontent.com/assets/29597/11737732/0ca1e55e-9f91-11e5-97f3-098f2f8ed866.png" alt="React virtualized" data-canonical-src="https://cloud.githubusercontent.com/assets/29597/11737732/0ca1e55e-9f91-11e5-97f3-098f2f8ed866.png" width="330" height="100" />](http://bvaughn.github.io/react-virtualized/)
 
-[![NPM version](https://img.shields.io/npm/v/react-virtualized.svg?style=flat)](https://www.npmjs.com/package/react-virtualized)
-![NPM license](https://img.shields.io/npm/l/react-virtualized.svg?style=flat)
-[![NPM total downloads](https://img.shields.io/npm/dt/react-virtualized.svg?style=flat)](https://npmcharts.com/compare/react-virtualized?minimal=true)
-[![NPM monthly downloads](https://img.shields.io/npm/dm/react-virtualized.svg?style=flat)](https://npmcharts.com/compare/react-virtualized?minimal=true)
-[![CircleCI](https://circleci.com/gh/bvaughn/react-virtualized/tree/master.svg?style=svg)](https://circleci.com/gh/bvaughn/react-virtualized/tree/master)
-[![Codecov badge](https://img.shields.io/codecov/c/github/bvaughn/react-virtualized/master.svg)](https://codecov.io/github/bvaughn/react-virtualized)
-[![OpenCollective](https://opencollective.com/react-virtualized/backers/badge.svg)](#backers)
-[![OpenCollective](https://opencollective.com/react-virtualized/sponsors/badge.svg)](#sponsors)
-
 React components for efficiently rendering large lists and tabular data.
 Check out [the demo](https://bvaughn.github.io/react-virtualized/) for some examples.
 
+### If you like this project, 🎉 [become a sponsor](https://github.com/sponsors/bvaughn/) or ☕ [buy me a coffee](http://givebrian.coffee/)
+
 ### Sponsors
 
 The following wonderful companies have sponsored react-virtualized:

dist/commonjs/ArrowKeyStepper/ArrowKeyStepper.example.js

@@ -0,0 +1,207 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf3 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _ContentBox = require("../demo/ContentBox");
+
+var _ = _interopRequireWildcard(require("./"));
+
+var _AutoSizer = _interopRequireDefault(require("../AutoSizer"));
+
+var _Grid = _interopRequireDefault(require("../Grid"));
+
+var _clsx2 = _interopRequireDefault(require("clsx"));
+
+var _ArrowKeyStepperExample = _interopRequireDefault(require("./ArrowKeyStepper.example.css"));
+
+var _class, _temp;
+
+var ArrowKeyStepperExample = (_temp = _class =
+/*#__PURE__*/
+function (_React$PureComponent) {
+  (0, _inherits2["default"])(ArrowKeyStepperExample, _React$PureComponent);
+
+  function ArrowKeyStepperExample() {
+    var _getPrototypeOf2;
+
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, ArrowKeyStepperExample);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = (0, _possibleConstructorReturn2["default"])(this, (_getPrototypeOf2 = (0, _getPrototypeOf3["default"])(ArrowKeyStepperExample)).call.apply(_getPrototypeOf2, [this].concat(args)));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
+      mode: 'edges',
+      isClickable: true,
+      scrollToColumn: 0,
+      scrollToRow: 0
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_getColumnWidth", function (_ref) {
+      var index = _ref.index;
+      return (1 + index % 3) * 60;
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_getRowHeight", function (_ref2) {
+      var index = _ref2.index;
+      return (1 + index % 3) * 30;
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_cellRenderer", function (_ref3) {
+      var columnIndex = _ref3.columnIndex,
+          key = _ref3.key,
+          rowIndex = _ref3.rowIndex,
+          scrollToColumn = _ref3.scrollToColumn,
+          scrollToRow = _ref3.scrollToRow,
+          style = _ref3.style;
+      var className = (0, _clsx2["default"])(_ArrowKeyStepperExample["default"].Cell, (0, _defineProperty2["default"])({}, _ArrowKeyStepperExample["default"].FocusedCell, columnIndex === scrollToColumn && rowIndex === scrollToRow));
+      return React.createElement("span", {
+        role: "none",
+        className: className,
+        key: key,
+        onClick: _this.state.isClickable && function () {
+          return _this._selectCell({
+            scrollToColumn: columnIndex,
+            scrollToRow: rowIndex
+          });
+        },
+        style: style
+      }, "r:".concat(rowIndex, ", c:").concat(columnIndex));
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_selectCell", function (_ref4) {
+      var scrollToColumn = _ref4.scrollToColumn,
+          scrollToRow = _ref4.scrollToRow;
+
+      _this.setState({
+        scrollToColumn: scrollToColumn,
+        scrollToRow: scrollToRow
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_onClickableChange", function (event) {
+      if (event.target instanceof HTMLInputElement) {
+        _this.setState({
+          isClickable: event.target.checked,
+          scrollToColumn: 0,
+          scrollToRow: 0
+        });
+      }
+    });
+    return _this;
+  }
+
+  (0, _createClass2["default"])(ArrowKeyStepperExample, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$state = this.state,
+          mode = _this$state.mode,
+          isClickable = _this$state.isClickable,
+          scrollToColumn = _this$state.scrollToColumn,
+          scrollToRow = _this$state.scrollToRow;
+      return React.createElement(_ContentBox.ContentBox, null, React.createElement(_ContentBox.ContentBoxHeader, {
+        text: "ArrowKeyStepper",
+        sourceLink: "https://github.com/bvaughn/react-virtualized/blob/master/source/ArrowKeyStepper/ArrowKeyStepper.example.js",
+        docsLink: "https://github.com/bvaughn/react-virtualized/blob/master/docs/ArrowKeyStepper.md"
+      }), React.createElement(_ContentBox.ContentBoxParagraph, null, "This high-order component decorates a ", React.createElement("code", null, "List"), ",", ' ', React.createElement("code", null, "Table"), ", or ", React.createElement("code", null, "Grid"), " and responds to arrow-key events by scrolling one row or column at a time. Focus in the `Grid` below and use the left, right, up, or down arrow keys to move around within the grid."), React.createElement(_ContentBox.ContentBoxParagraph, null, "Note that unlike the other HOCs in react-virtualized, the", ' ', React.createElement("code", null, "ArrowKeyStepper"), " adds a ", React.createElement("code", null, "<div>"), " element around its children in order to attach a key-down event handler."), React.createElement(_ContentBox.ContentBoxParagraph, null, React.createElement("strong", null, "mode"), ":", React.createElement("label", null, React.createElement("input", {
+        "aria-label": "Set mode equal to \"cells\"",
+        checked: mode === 'cells',
+        className: _ArrowKeyStepperExample["default"].Radio,
+        type: "radio",
+        onChange: function onChange(event) {
+          return event.target.checked && _this2.setState({
+            mode: 'cells'
+          });
+        },
+        value: "cells"
+      }), "cells"), React.createElement("label", null, React.createElement("input", {
+        "aria-label": "Set mode equal to \"edges\"",
+        checked: mode === 'edges',
+        className: _ArrowKeyStepperExample["default"].Radio,
+        type: "radio",
+        onChange: function onChange(event) {
+          return event.target.checked && _this2.setState({
+            mode: 'edges'
+          });
+        },
+        value: "edges"
+      }), "edges (default)")), React.createElement(_ContentBox.ContentBoxParagraph, null, React.createElement("label", {
+        className: _ArrowKeyStepperExample["default"].checkboxLabel
+      }, React.createElement("input", {
+        "aria-label": "Enable click selection? (resets selection)",
+        className: _ArrowKeyStepperExample["default"].checkbox,
+        type: "checkbox",
+        checked: isClickable,
+        onChange: this._onClickableChange
+      }), "Enable click selection? (resets selection)")), React.createElement(_["default"], {
+        columnCount: 100,
+        isControlled: isClickable,
+        onScrollToChange: isClickable ? this._selectCell : undefined,
+        mode: mode,
+        rowCount: 100,
+        scrollToColumn: scrollToColumn,
+        scrollToRow: scrollToRow
+      }, function (_ref5) {
+        var onSectionRendered = _ref5.onSectionRendered,
+            scrollToColumn = _ref5.scrollToColumn,
+            scrollToRow = _ref5.scrollToRow;
+        return React.createElement("div", null, React.createElement(_ContentBox.ContentBoxParagraph, null, "Most-recently-stepped column: ".concat(scrollToColumn, ", row: ").concat(scrollToRow)), React.createElement(_AutoSizer["default"], {
+          disableHeight: true
+        }, function (_ref6) {
+          var width = _ref6.width;
+          return React.createElement(_Grid["default"], {
+            className: _ArrowKeyStepperExample["default"].Grid,
+            columnWidth: _this2._getColumnWidth,
+            columnCount: 100,
+            height: 200,
+            onSectionRendered: onSectionRendered,
+            cellRenderer: function cellRenderer(_ref7) {
+              var columnIndex = _ref7.columnIndex,
+                  key = _ref7.key,
+                  rowIndex = _ref7.rowIndex,
+                  style = _ref7.style;
+              return _this2._cellRenderer({
+                columnIndex: columnIndex,
+                key: key,
+                rowIndex: rowIndex,
+                scrollToColumn: scrollToColumn,
+                scrollToRow: scrollToRow,
+                style: style
+              });
+            },
+            rowHeight: _this2._getRowHeight,
+            rowCount: 100,
+            scrollToColumn: scrollToColumn,
+            scrollToRow: scrollToRow,
+            width: width
+          });
+        }));
+      }));
+    }
+  }]);
+  return ArrowKeyStepperExample;
+}(React.PureComponent), (0, _defineProperty2["default"])(_class, "propTypes", process.env.NODE_ENV === 'production' ? null : {}), _temp);
+exports["default"] = ArrowKeyStepperExample;