Chore: Update NPM packages with react peer deps (#36598)

* chore: bump npm packages with react peer deps

* chore: bump rc-cascader to 1.4.3

* chore: bump react-table to 7.7.0

* chore: bump types packages

* refactor(buttoncascader): use CascaderValueType (fixes typescript errors)

* refactor(cascader): use CascaderValueType (fixes typescript errors)

* chore: bump rc-drawer to 4.4.0

* refactor(drawer): update component to match rc-drawer 4.4.0 api changes

* refactor(cascader): provide backwards compatibility for component apis

* chore(react-test-renderer): bump to match react 17.0.1

* fix(drawer): defer opening RcDrawer so animations play correctly

* chore: bump rc-cascader to 1.5.0

package.json

@@ -112,7 +112,7 @@
     "@types/pluralize": "^0.0.29",
     "@types/prismjs": "1.16.0",
     "@types/react": "16.9.9",
-    "@types/react-beautiful-dnd": "12.1.2",
+    "@types/react-beautiful-dnd": "13.1.1",
     "@types/react-dom": "16.9.9",
     "@types/react-grid-layout": "1.1.1",
     "@types/react-highlight-words": "^0.16.2",
@@ -120,7 +120,7 @@
     "@types/react-redux": "7.1.7",
     "@types/react-router-dom": "^5.1.7",
     "@types/react-select": "4.0.13",
-    "@types/react-test-renderer": "16.9.2",
+    "@types/react-test-renderer": "17.0.1",
     "@types/react-transition-group": "4.4.0",
     "@types/react-virtualized-auto-sizer": "1.0.0",
     "@types/react-window": "1.8.1",
@@ -191,7 +191,7 @@
     "raw-loader": "4.0.2",
     "react-hot-loader": "4.8.0",
     "react-select-event": "^5.1.0",
-    "react-test-renderer": "16.12.0",
+    "react-test-renderer": "17.0.1",
     "redux-mock-store": "1.5.4",
     "regexp-replace-loader": "1.0.1",
     "rimraf": "3.0.1",
@@ -273,10 +273,10 @@
     "pluralize": "^8.0.0",
     "prismjs": "1.24.0",
     "prop-types": "15.7.2",
-    "rc-cascader": "1.0.1",
+    "rc-cascader": "1.5.0",
     "re-resizable": "^6.2.0",
     "react": "17.0.1",
-    "react-beautiful-dnd": "13.0.0",
+    "react-beautiful-dnd": "13.1.0",
     "react-diff-viewer": "^3.1.1",
     "react-dom": "17.0.1",
     "react-grid-layout": "1.2.5",

packages/grafana-ui/package.json

@@ -52,25 +52,24 @@
     "moment": "2.29.1",
     "monaco-editor": "0.21.2",
     "papaparse": "5.3.0",
-    "rc-cascader": "1.0.1",
-    "rc-drawer": "3.1.3",
+    "rc-cascader": "1.5.0",
+    "rc-drawer": "4.4.0",
     "rc-slider": "9.6.4",
     "rc-time-picker": "^3.7.3",
     "react": "17.0.1",
-    "react-beautiful-dnd": "13.0.0",
+    "react-beautiful-dnd": "13.1.0",
     "react-calendar": "2.19.2",
     "react-colorful": "5.1.2",
     "react-custom-scrollbars": "4.2.1",
     "react-dom": "17.0.1",
     "react-dropzone": "11.3.4",
-    "react-highlight-words": "0.16.0",
+    "react-highlight-words": "0.17.0",
     "react-hook-form": "7.5.3",
     "react-inlinesvg": "2.3.0",
     "react-popper": "2.2.4",
     "react-router-dom": "^5.2.0",
     "react-select": "4.3.0",
-    "react-storybook-addon-props-combinations": "1.1.0",
-    "react-table": "7.0.0",
+    "react-table": "7.7.0",
     "react-transition-group": "4.4.1",
     "slate": "0.47.8",
     "tinycolor2": "1.4.1",
@@ -99,13 +98,13 @@
     "@types/node": "10.14.1",
     "@types/papaparse": "5.2.0",
     "@types/react": "16.9.9",
-    "@types/react-beautiful-dnd": "12.1.2",
+    "@types/react-beautiful-dnd": "13.1.1",
     "@types/react-color": "3.0.1",
     "@types/react-custom-scrollbars": "4.0.5",
     "@types/react-router-dom": "^5.1.7",
     "@types/react-select": "4.0.13",
-    "@types/react-table": "7.0.12",
-    "@types/react-test-renderer": "16.9.2",
+    "@types/react-table": "7.7.2",
+    "@types/react-test-renderer": "17.0.1",
     "@types/react-transition-group": "4.4.0",
     "@types/rollup-plugin-visualizer": "2.6.0",
     "@types/slate": "0.47.2",
@@ -116,7 +115,7 @@
     "pretty-format": "25.1.0",
     "react-docgen-typescript-loader": "3.7.2",
     "react-is": "16.8.0",
-    "react-test-renderer": "16.13.1",
+    "react-test-renderer": "17.0.1",
     "rollup": "2.33.3",
     "rollup-plugin-sourcemaps": "0.6.3",
     "rollup-plugin-terser": "7.0.2",

packages/grafana-ui/src/components/Cascader/optionMappings.ts

@@ -1,11 +1,18 @@
-import { CascaderOption as RCCascaderOption } from 'rc-cascader/lib/Cascader';
+import { CascaderValueType, CascaderOption as RCCascaderOption } from 'rc-cascader/lib/Cascader';
 import { CascaderOption } from './Cascader';
 
 type onChangeType = ((values: string[], options: CascaderOption[]) => void) | undefined;
 
-export const onChangeCascader = (onChanged: onChangeType) => (values: string[], options: RCCascaderOption[]) => {
+export const onChangeCascader = (onChanged: onChangeType) => (
+  values: CascaderValueType,
+  options: RCCascaderOption[]
+) => {
   if (onChanged) {
-    onChanged(values, fromRCOptions(options));
+    // map values to strings for backwards compatibility with Cascader components
+    onChanged(
+      values.map((value) => String(value)),
+      fromRCOptions(options)
+    );
   }
 };
 

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

@@ -1,4 +1,4 @@
-import React, { CSSProperties, FC, ReactNode, useState } from 'react';
+import React, { CSSProperties, FC, ReactNode, useState, useEffect } from 'react';
 import { GrafanaTheme2 } from '@grafana/data';
 import RcDrawer from 'rc-drawer';
 import { css } from '@emotion/css';
@@ -96,18 +96,24 @@ export const Drawer: FC<Props> = ({
   const theme = useTheme2();
   const drawerStyles = getStyles(theme, scrollableContent);
   const [isExpanded, setIsExpanded] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
   const currentWidth = isExpanded ? '100%' : width;
 
+  // RcDrawer v4.x needs to be mounted in advance for animations to play.
+  useEffect(() => {
+    setIsOpen(true);
+  }, []);
+
   return (
     <RcDrawer
       level={null}
       handler={false}
-      open={true}
+      open={isOpen}
       onClose={onClose}
       maskClosable={closeOnMaskClick}
       placement="right"
       width={currentWidth}
-      getContainer={inline ? false : 'body'}
+      getContainer={inline ? undefined : 'body'}
       style={{ position: `${inline && 'absolute'}` } as CSSProperties}
       className={drawerStyles.drawer}
       aria-label={