Update dependency @types/react to v17 (#40440)

* Update dependency @types/react to v17

* Chore: Typescript fixes

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>

package.json

@@ -118,7 +118,7 @@
     "@types/pluralize": "^0.0.29",
     "@types/prismjs": "1.16.0",
     "@types/rc-time-picker": "^3",
-    "@types/react": "16.9.9",
+    "@types/react": "17.0.30",
     "@types/react-beautiful-dnd": "13.1.1",
     "@types/react-dom": "16.9.9",
     "@types/react-grid-layout": "1.1.1",

packages/grafana-data/package.json

@@ -44,7 +44,7 @@
     "@types/marked": "1.1.0",
     "@types/node": "10.14.1",
     "@types/papaparse": "5.2.0",
-    "@types/react": "16.9.9",
+    "@types/react": "17.0.30",
     "@types/rollup-plugin-visualizer": "2.6.0",
     "@types/sinon": "^10.0.4",
     "rollup": "2.33.3",

packages/grafana-ui/package.json

@@ -102,7 +102,7 @@
     "@types/mock-raf": "1.0.2",
     "@types/node": "10.14.1",
     "@types/papaparse": "5.2.0",
-    "@types/react": "16.9.9",
+    "@types/react": "17.0.30",
     "@types/react-beautiful-dnd": "13.1.1",
     "@types/react-calendar": "^3.4.3",
     "@types/react-color": "3.0.1",

packages/grafana-ui/src/components/Card/Card.tsx

@@ -39,10 +39,10 @@ export const Card: CardInterface = ({ heading, description, disabled, href, onCl
   const [tags, figure, meta, actions, secondaryActions] = ['Tags', 'Figure', 'Meta', 'Actions', 'SecondaryActions'].map(
     (item) => {
       const found = React.Children.toArray(children as React.ReactElement[]).find((child) => {
-        return child?.type && (child.type as any).displayName === item;
+        return React.isValidElement(child) && child?.type && (child.type as any).displayName === item;
       });
 
-      if (found) {
+      if (found && React.isValidElement(found)) {
         return React.cloneElement(found, { disabled, styles, ...found.props });
       }
       return found;

packages/grafana-ui/src/components/Table/types.ts

@@ -1,7 +1,7 @@
 import { CellProps } from 'react-table';
 import { Field, KeyValue } from '@grafana/data';
 import { TableStyles } from './styles';
-import { CSSProperties, FC } from 'react';
+import { FC } from 'react';
 
 export { TableFieldOptions, TableCellDisplayMode, FieldTextAlignment } from '@grafana/schema';
 
@@ -24,7 +24,7 @@ export interface TableSortByFieldState {
 
 export interface TableCellProps extends CellProps<any> {
   tableStyles: TableStyles;
-  cellProps: CSSProperties;
+  cellProps: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
   field: Field;
   onCellFilterAdded: TableFilterActionCallback;
   innerWidth: number;

packages/jaeger-ui-components/package.json

@@ -22,7 +22,7 @@
     "@types/deep-freeze": "^0.1.1",
     "@types/hoist-non-react-statics": "^3.3.1",
     "@types/lodash": "^4.14.123",
-    "@types/react": "16.9.9",
+    "@types/react": "17.0.30",
     "@types/react-icons": "2.2.7",
     "@types/recompose": "^0.30.7",
     "@types/slate-react": "0.22.5",

public/app/core/components/CopyToClipboard/CopyToClipboard.tsx

@@ -3,7 +3,7 @@ import ClipboardJS from 'clipboard';
 
 interface Props {
   text: () => string;
-  elType?: string | React.RefForwardingComponent<any, any>;
+  elType?: string | React.ForwardRefExoticComponent<any>;
   onSuccess?: (evt: any) => void;
   onError?: (evt: any) => void;
   className?: string;

yarn.lock

@@ -2406,7 +2406,7 @@ __metadata:
     "@types/marked": 1.1.0
     "@types/node": 10.14.1
     "@types/papaparse": 5.2.0
-    "@types/react": 16.9.9
+    "@types/react": 17.0.30
     "@types/rollup-plugin-visualizer": 2.6.0
     "@types/sinon": ^10.0.4
     date-fns: 2.21.3
@@ -2707,7 +2707,7 @@ __metadata:
     "@types/mock-raf": 1.0.2
     "@types/node": 10.14.1
     "@types/papaparse": 5.2.0
-    "@types/react": 16.9.9
+    "@types/react": 17.0.30
     "@types/react-beautiful-dnd": 13.1.1
     "@types/react-calendar": ^3.4.3
     "@types/react-color": 3.0.1
@@ -2847,7 +2847,7 @@ __metadata:
     "@types/deep-freeze": ^0.1.1
     "@types/hoist-non-react-statics": ^3.3.1
     "@types/lodash": ^4.14.123
-    "@types/react": 16.9.9
+    "@types/react": 17.0.30
     "@types/react-icons": 2.2.7
     "@types/recompose": ^0.30.7
     "@types/slate-react": 0.22.5
@@ -8129,13 +8129,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react@npm:16.9.9":
-  version: 16.9.9
-  resolution: "@types/react@npm:16.9.9"
+"@types/react@npm:17.0.30":
+  version: 17.0.30
+  resolution: "@types/react@npm:17.0.30"
   dependencies:
     "@types/prop-types": "*"
-    csstype: ^2.2.0
-  checksum: a44ad6338989161b4da02b1d0da6efe31a50e78bd747525402c953110736e0567f54148743f1399bd58e2874866bcd9c56961893c791d0cdc11df5b955c78382
+    "@types/scheduler": "*"
+    csstype: ^3.0.2
+  checksum: e3aaac1b8fda6e3622b75db0bd7d8dc412c2f2b77a00afdd32cae8c71fb0b1ca6926ab1fbe1c536dd51d96c0ba372738993837a8df1637637aaab7b86e421b7f
   languageName: node
   linkType: hard
 
@@ -13511,7 +13512,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"csstype@npm:^2.2.0, csstype@npm:^2.5.7":
+"csstype@npm:^2.5.7":
   version: 2.6.18
   resolution: "csstype@npm:2.6.18"
   checksum: 1d6d67bc7f55af976d7a9cb153d61867d6c84eb0d69733165d2d4f10c659e7647a1e7a19859acacbf0120552164b8ff1a4ffef45a435aa37a4ff2f09e5b0bcf7
@@ -17853,7 +17854,7 @@ fsevents@~2.1.2:
     "@types/pluralize": ^0.0.29
     "@types/prismjs": 1.16.0
     "@types/rc-time-picker": ^3
-    "@types/react": 16.9.9
+    "@types/react": 17.0.30
     "@types/react-beautiful-dnd": 13.1.1
     "@types/react-dom": 16.9.9
     "@types/react-grid-layout": 1.1.1