Use the new jsx runtime, bump peerDeps (#2184)

* TypeScript 4.1, use the new jsx runtime

* rm --legacy-peer-deps cli flags

* one more webpack tweak

* Replace all usage of createElement

* rm preview.jsx

* typescript@rc

* fix lints

* Fix TextEditor missing generic

* lint

* runtime: automatic

* un-rc typescript

* add back type assertion

.eslintrc.js

@@ -257,7 +257,17 @@ const rules = {
   'no-duplicate-imports': 0, // replace by @typescript-eslint/no-duplicate-imports
   'no-new-symbol': 0,
   'no-restricted-exports': 0,
-  'no-restricted-imports': 0,
+  'no-restricted-imports': [1, {
+    "paths": [{
+      "name": "react",
+      "importNames": ["default"],
+      "message": "Use named imports instead."
+    }, {
+      "name": "react-dom",
+      "importNames": ["default"],
+      "message": "Use named imports instead."
+    }]
+  }],
   'no-this-before-super': 0,
   'no-useless-computed-key': [1, { enforceForClassMembers: true }],
   'no-useless-constructor': 0, // replaced by @typescript-eslint/no-useless-constructor
@@ -371,7 +381,7 @@ const rules = {
     afterOpening: 'never',
     beforeClosing: 'never'
   }],
-  'react/jsx-uses-react': 1,
+  'react/jsx-uses-react': 0,
   'react/jsx-uses-vars': 1,
   'react/jsx-wrap-multilines': [1, {
     declaration: 'parens-new-line',

.storybook/preview.tsx

@@ -1,7 +1,7 @@
 import 'core-js/stable';
 import '../style/index.less';
 import '../stories/index.less';
-import React, { StrictMode } from 'react';
+import { StrictMode } from 'react';
 import { ResizeObserver as Polyfill } from '@juggle/resize-observer';
 import { addDecorator } from '@storybook/react';
 

babel.config.json

@@ -11,7 +11,7 @@
         "@babel/proposal-optional-chaining"
       ]
     }],
-    ["@babel/react", { "useSpread": true }],
+    ["@babel/react", { "runtime": "automatic" }],
     "@babel/typescript"
   ],
   "plugins": [

package.json

@@ -102,7 +102,7 @@
     "typescript": "~4.0.5"
   },
   "peerDependencies": {
-    "react": "^16.8 || ^17.0",
-    "react-dom": "^16.8 || ^17.0"
+    "react": "^16.14 || ^17.0",
+    "react-dom": "^16.14 || ^17.0"
   }
 }

src/Cell.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, memo, useRef } from 'react';
+import { forwardRef, memo, useRef } from 'react';
 import clsx from 'clsx';
 
 import type { CellRendererProps } from './types';

src/Columns.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { SelectCellFormatter } from './formatters';
 import type { Column } from './types';
 import { stopPropagation } from './utils/domUtils';

src/DataGrid.tsx

@@ -1,11 +1,10 @@
-import React, {
+import {
   forwardRef,
   useState,
   useRef,
   useLayoutEffect,
   useImperativeHandle,
-  useCallback,
-  createElement
+  useCallback
 } from 'react';
 import clsx from 'clsx';
 
@@ -189,7 +188,7 @@ function DataGrid<R, SR>({
   onExpandedGroupIdsChange,
   // Custom renderers
   rowRenderer: RowRenderer = Row,
-  emptyRowsRenderer,
+  emptyRowsRenderer: EmptyRowsRenderer,
   // Event props
   onRowClick,
   onScroll,
@@ -911,7 +910,7 @@ function DataGrid<R, SR>({
           onFiltersChange={onFiltersChange}
         />
       )}
-      {rows.length === 0 && emptyRowsRenderer ? createElement(emptyRowsRenderer) : (
+      {rows.length === 0 && EmptyRowsRenderer ? <EmptyRowsRenderer /> : (
         <>
           <div
             ref={focusSinkRef}

src/EditCell.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from 'react';
+import { useState, useCallback } from 'react';
 import clsx from 'clsx';
 
 import EditorContainer from './editors/EditorContainer';

src/FilterRow.tsx

@@ -1,4 +1,4 @@
-import React, { createElement, memo } from 'react';
+import { memo } from 'react';
 import clsx from 'clsx';
 
 import type { CalculatedColumn, Filters } from './types';
@@ -48,11 +48,13 @@ function FilterRow<R, SR>({
             style={style}
             className={className}
           >
-            {column.filterRenderer && createElement(column.filterRenderer, {
-              column,
-              value: filters?.[column.key],
-              onChange: value => onChange(key, value)
-            })}
+            {column.filterRenderer && (
+              <column.filterRenderer
+                column={column}
+                value={filters?.[column.key]}
+                onChange={value => onChange(key, value)}
+              />
+            )}
           </div>
         );
       })}

src/GroupCell.tsx

@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import { memo } from 'react';
 import clsx from 'clsx';
 
 import type { CalculatedColumn } from './types';

src/GroupRow.tsx

@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import { memo } from 'react';
 import clsx from 'clsx';
 
 import type { CalculatedColumn, Position, SelectRowEvent, Omit } from './types';

src/HeaderCell.tsx

@@ -1,4 +1,3 @@
-import React, { createElement } from 'react';
 import clsx from 'clsx';
 
 import type { CalculatedColumn } from './types';
@@ -42,14 +41,16 @@ export default function HeaderCell<R, SR>({
 }: HeaderCellProps<R, SR>) {
   function getCell() {
     if (column.headerRenderer) {
-      return createElement(column.headerRenderer, {
-        column,
-        sortColumn,
-        sortDirection,
-        onSort,
-        allRowsSelected,
-        onAllRowsSelectionChange
-      });
+      return (
+        <column.headerRenderer
+          column={column}
+          sortColumn={sortColumn}
+          sortDirection={sortDirection}
+          onSort={onSort}
+          allRowsSelected={allRowsSelected}
+          onAllRowsSelectionChange={onAllRowsSelectionChange}
+        />
+      );
     }
 
     if (column.sortable) {

src/HeaderRow.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, memo } from 'react';
+import { useCallback, memo } from 'react';
 
 import HeaderCell from './HeaderCell';
 import type { CalculatedColumn } from './types';

src/Row.tsx

@@ -1,4 +1,4 @@
-import React, { memo, forwardRef } from 'react';
+import { memo, forwardRef } from 'react';
 import clsx from 'clsx';
 
 import Cell from './Cell';

src/SummaryCell.tsx

@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import { memo } from 'react';
 import clsx from 'clsx';
 
 import type { CellRendererProps } from './types';

src/SummaryRow.tsx

@@ -1,5 +1,4 @@
-import React, { memo } from 'react';
-
+import { memo } from 'react';
 import SummaryCell from './SummaryCell';
 import type { RowRendererProps } from './types';
 

src/editors/EditorContainer.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { createPortal } from 'react-dom';
 
 import type { EditorProps } from '../types';

src/editors/TextEditor.tsx

@@ -1,17 +1,16 @@
-import React from 'react';
 import type { EditorProps } from '../types';
 
 function autoFocusAndSelect(input: HTMLInputElement | null) {
   input?.focus();
   input?.select();
 }
 
-export default function TextEditor<TRow>({
+export default function TextEditor<TRow, TSummaryRow = unknown>({
   row,
   column,
   onRowChange,
   onClose
-}: EditorProps<TRow>) {
+}: EditorProps<TRow, TSummaryRow>) {
   return (
     <input
       className="rdg-text-editor"

src/formatters/SelectCellFormatter.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import clsx from 'clsx';
 
 import { useFocusRef } from '../hooks/useFocusRef';

src/formatters/ToggleGroupFormatter.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { GroupFormatterProps } from '../types';
 import { useFocusRef } from '../hooks/useFocusRef';
 

src/formatters/ValueFormatter.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { FormatterProps } from '../types';
 
 export function ValueFormatter<R, SR>(props: FormatterProps<R, SR>) {

src/headerCells/SortableHeaderCell.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { HeaderCellProps } from '../HeaderCell';
 import type { SortDirection } from '../enums';
 

src/hooks/useViewportRows.ts

@@ -57,7 +57,7 @@ export function useViewportRows<R>({
         // TODO: should users have control over the generated key?
         const id = parentId !== undefined ? `${parentId}__${groupKey}` : groupKey;
         const isExpanded = expandedGroupIds?.has(id) ?? false;
-        const { childRows, childGroups, startRowIndex } = (rows as GroupByDictionary<R>)[groupKey]; // https://github.com/microsoft/TypeScript/issues/17002
+        const { childRows, childGroups, startRowIndex } = (rows as GroupByDictionary<R>)[groupKey]; // TODO (ts4.1): https://github.com/microsoft/TypeScript/issues/17002
 
         const groupRow: GroupRow<R> = {
           id,

stories/demos/AllFeatures.tsx

@@ -1,5 +1,5 @@
 import faker from 'faker';
-import React, { useState, useRef } from 'react';
+import { useState, useRef } from 'react';
 import DataGrid, { SelectColumn, TextEditor } from '../../src';
 import type { Column, DataGridHandle, FillEvent, PasteEvent } from '../../src';
 import DropDownEditor from './components/Editors/DropDownEditor';

stories/demos/CellActions.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import faker from 'faker';
 
 import DataGrid from '../../src';

stories/demos/CellNavigation.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 import DataGrid from '../../src';
 import type { Column, CellNavigationMode } from '../../src';

stories/demos/ColumnsReordering.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useMemo } from 'react';
+import { useState, useCallback, useMemo } from 'react';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 

stories/demos/CommonFeatures.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useMemo } from 'react';
+import { useState, useCallback, useMemo } from 'react';
 import faker from 'faker';
 import DataGrid, { SelectColumn, TextEditor, SelectCellFormatter } from '../../src';
 import type { Column, SortDirection } from '../../src';

stories/demos/ContextMenu.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useReducer } from 'react';
+import { useState, useReducer } from 'react';
 import { createPortal } from 'react-dom';
 import faker from 'faker';
 import { ContextMenu, MenuItem, SubMenu, ContextMenuTrigger } from 'react-contextmenu';

stories/demos/Grouping.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useMemo } from 'react';
+import { useState, useMemo } from 'react';
 import { groupBy as rowGrouper } from 'lodash';
 import Select, { components } from 'react-select';
 import type { ValueType, OptionsType, Props as SelectProps } from 'react-select';

stories/demos/HeaderFilters.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import Select from 'react-select';
 import faker from 'faker';
 

stories/demos/MillionCells.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 import DataGrid from '../../src';
 import type { Column, FormatterProps } from '../../src';
 

stories/demos/NoRows.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import DataGrid from '../../src';
 import type { Column } from '../../src';
 

stories/demos/Resizable.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import DataGrid from '../../src';
 import type { Column, FormatterProps } from '../../src';
 

stories/demos/RowsReordering.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 

stories/demos/ScrollToRow.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef } from 'react';
+import { useState, useRef } from 'react';
 import DataGrid from '../../src';
 import type { Column, DataGridHandle } from '../../src';
 

stories/demos/TreeView.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useReducer, useMemo } from 'react';
+import { useState, useReducer, useMemo } from 'react';
 
 import DataGrid from '../../src';
 import type { Column } from '../../src';

stories/demos/components/Editors/DropDownEditor.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { EditorProps } from '../../../../src';
 import type { Row } from '../../AllFeatures';
 

stories/demos/components/Editors/SelectEditor.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import Select from 'react-select';
 import type { OptionTypeBase, OptionsType } from 'react-select';
 

stories/demos/components/Filters/NumericFilter.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { Column, FilterRendererProps } from '../../../../src';
 
 enum RuleType {

stories/demos/components/Formatters/CellActionsFormatter.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import type { ReactNode } from 'react';
 import clsx from 'clsx';
 import { usePopper } from 'react-popper';

stories/demos/components/Formatters/CellExpanderFormatter.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { useFocusRef } from '../../../../src/hooks';
 import './CellExpanderFormatter.less';
 

stories/demos/components/Formatters/ChildRowDeleteButton.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useFocusRef } from '../../../../src/hooks';
 
 export interface ChildRowDeleteButtonProps {

stories/demos/components/Formatters/ImageFormatter.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import './rdg-image.less';
 
 interface Props {

stories/demos/components/HeaderRenderers/DraggableHeaderRenderer.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useDrag, useDrop } from 'react-dnd';
 import type { DragObjectWithType } from 'react-dnd';
 

stories/demos/components/RowRenderers/DraggableRowRenderer.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useDrag, useDrop } from 'react-dnd';
 import type { DragObjectWithType } from 'react-dnd';
 import clsx from 'clsx';

test/column/formatter.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { Column } from '../../src';
 import { setup, getCells } from '../utils';
 

test/utils.tsx

@@ -1,4 +1,4 @@
-import React, { StrictMode } from 'react';
+import { StrictMode } from 'react';
 import { render, screen } from '@testing-library/react';
 import DataGrid from '../src/';
 import type { DataGridProps } from '../src/';