Update dependency rc-cascader to v3 (#44241)

* Update dependency rc-cascader to v3

* type changes for rc-cascader v3

* kick drone

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

package.json

@@ -317,7 +317,7 @@
     "pluralize": "^8.0.0",
     "prismjs": "1.26.0",
     "prop-types": "15.8.1",
-    "rc-cascader": "1.5.0",
+    "rc-cascader": "3.2.1",
     "rc-drawer": "4.4.3",
     "rc-slider": "9.7.5",
     "rc-time-picker": "3.7.3",

packages/grafana-ui/package.json

@@ -60,7 +60,7 @@
     "moment": "2.29.1",
     "monaco-editor": "^0.31.1",
     "prismjs": "1.26.0",
-    "rc-cascader": "1.5.0",
+    "rc-cascader": "3.2.1",
     "rc-drawer": "4.4.3",
     "rc-slider": "9.7.5",
     "rc-time-picker": "^3.7.3",

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

@@ -3,7 +3,6 @@ import { Icon } from '../Icon/Icon';
 import { IconName } from '../../types/icon';
 import { css, cx } from '@emotion/css';
 
-// @ts-ignore
 import RCCascader from 'rc-cascader';
 import { CascaderOption } from '../Cascader/Cascader';
 import { onChangeCascader, onLoadDataCascader } from '../Cascader/optionMappings';

packages/grafana-ui/src/components/ButtonCascader/_ButtonCascader.scss

@@ -1,20 +1,25 @@
 .rc-cascader {
   font-size: 12px;
 
+  &-dropdown {
+    position: absolute;
+    // Required, otherwise the portal that the popup is shown in will render under other components
+    z-index: 9999;
+
+    &-hidden {
+      display: none;
+    }
+  }
+
   &-menus {
     font-size: 12px;
     overflow: hidden;
     background: $page-bg;
-    position: absolute;
     border: $panel-border;
     border-radius: $border-radius;
     box-shadow: $typeahead-shadow;
     white-space: nowrap;
 
-    &-hidden {
-      display: none;
-    }
-
     &.slide-up-enter,
     &.slide-up-appear {
       animation-duration: 0.3s;
@@ -126,6 +131,7 @@
           color: $text-color-weak;
           position: absolute;
           right: 16px;
+          top: 0;
           line-height: 32px;
         }
       }

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

@@ -184,7 +184,7 @@ export class Cascader extends React.PureComponent<CascaderProps, CascaderState>
   };
 
   render() {
-    const { allowCustomValue, placeholder, width, changeOnSelect, options } = this.props;
+    const { allowCustomValue, formatCreateLabel, placeholder, width, changeOnSelect, options } = this.props;
     const { focusCascade, isSearching, rcValue, activeLabel } = this.state;
 
     const searchableOptions = this.getSearchableOptions(options);
@@ -201,21 +201,17 @@ export class Cascader extends React.PureComponent<CascaderProps, CascaderState>
             onBlur={this.onBlur}
             options={searchableOptions}
             onCreateOption={this.onCreateOption}
-            formatCreateLabel={this.props.formatCreateLabel}
+            formatCreateLabel={formatCreateLabel}
             width={width}
           />
         ) : (
           <RCCascader
             onChange={onChangeCascader(this.onChange)}
-            options={this.props.options}
+            options={options}
             changeOnSelect={changeOnSelect}
             value={rcValue.value}
             fieldNames={{ label: 'label', value: 'value', children: 'items' }}
             expandIcon={null}
-            // Required, otherwise the portal that the popup is shown in will render under other components
-            popupClassName={css`
-              z-index: 9999;
-            `}
           >
             <div className={disableDivFocus}>
               <Input

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

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

yarn.lock

@@ -4125,7 +4125,7 @@ __metadata:
     postcss-loader: 6.2.1
     prismjs: 1.26.0
     raw-loader: 4.0.2
-    rc-cascader: 1.5.0
+    rc-cascader: 3.2.1
     rc-drawer: 4.4.3
     rc-slider: 9.7.5
     rc-time-picker: ^3.7.3
@@ -19932,7 +19932,7 @@ __metadata:
     prismjs: 1.26.0
     prop-types: 15.8.1
     raw-loader: 4.0.2
-    rc-cascader: 1.5.0
+    rc-cascader: 3.2.1
     rc-drawer: 4.4.3
     rc-slider: 9.7.5
     rc-time-picker: 3.7.3
@@ -29269,19 +29269,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rc-cascader@npm:1.5.0":
+"rc-cascader@npm:3.2.1":
-  version: 1.5.0
+  version: 3.2.1
-  resolution: "rc-cascader@npm:1.5.0"
+  resolution: "rc-cascader@npm:3.2.1"
   dependencies:
     "@babel/runtime": ^7.12.5
     array-tree-filter: ^2.1.0
-    rc-trigger: ^5.0.4
+    classnames: ^2.3.1
-    rc-util: ^5.0.1
+    rc-select: ~14.0.0-alpha.23
-    warning: ^4.0.1
+    rc-tree: ~5.4.3
+    rc-util: ^5.6.1
   peerDependencies:
     react: ">=16.9.0"
     react-dom: ">=16.9.0"
-  checksum: 481c42b4eae83f42895caebae1e56631a3f8d1be4bf1a26128e2c1eeee86f2e07e9073a3851886e110b4daafbb71c72b4c028254d9e819fc221ea522663004a8
+  checksum: 0f96d976adc68dc1e83d0a4d9186451db4d360860d585bc00415970076acf0a1906b22b808a7f703814b2e02992b2655533247c3089ccc009282728020111e4b
   languageName: node
   linkType: hard
 
@@ -29299,7 +29300,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rc-motion@npm:^2.0.0":
+"rc-motion@npm:^2.0.0, rc-motion@npm:^2.0.1":
   version: 2.4.4
   resolution: "rc-motion@npm:2.4.4"
   dependencies:
@@ -29313,6 +29314,54 @@ __metadata:
   languageName: node
   linkType: hard
 
+"rc-overflow@npm:^1.0.0":
+  version: 1.2.2
+  resolution: "rc-overflow@npm:1.2.2"
+  dependencies:
+    "@babel/runtime": ^7.11.1
+    classnames: ^2.2.1
+    rc-resize-observer: ^1.0.0
+    rc-util: ^5.5.1
+  peerDependencies:
+    react: ">=16.9.0"
+    react-dom: ">=16.9.0"
+  checksum: e8c0a0689fca6cb899ff3a2bdc19add737c22e9fa2d6dd9a446e1fa4e356d927041f07a29e3043aac1a53d838768404db66b5eca9dd00186286adba0eb94356b
+  languageName: node
+  linkType: hard
+
+"rc-resize-observer@npm:^1.0.0":
+  version: 1.2.0
+  resolution: "rc-resize-observer@npm:1.2.0"
+  dependencies:
+    "@babel/runtime": ^7.10.1
+    classnames: ^2.2.1
+    rc-util: ^5.15.0
+    resize-observer-polyfill: ^1.5.1
+  peerDependencies:
+    react: ">=16.9.0"
+    react-dom: ">=16.9.0"
+  checksum: cb338ee405c6df3d072754ad2fc29c19fe90cc9264331c02b7e23cb85d75f8ad984352fa8e0ff48f339439f548613b8960992e3050754290f2e651ed71909489
+  languageName: node
+  linkType: hard
+
+"rc-select@npm:~14.0.0-alpha.23":
+  version: 14.0.0-alpha.23
+  resolution: "rc-select@npm:14.0.0-alpha.23"
+  dependencies:
+    "@babel/runtime": ^7.10.1
+    classnames: 2.x
+    rc-motion: ^2.0.1
+    rc-overflow: ^1.0.0
+    rc-trigger: ^5.0.4
+    rc-util: ^5.16.1
+    rc-virtual-list: ^3.2.0
+  peerDependencies:
+    react: "*"
+    react-dom: "*"
+  checksum: dedcc72a80c890c9b877563581faac81d260a2cf30cf2d791dae60063b5e2c14c0e09d6762df5433dc7be982b65347e502d2663e740a386c9c04e9c6db6b7113
+  languageName: node
+  linkType: hard
+
 "rc-slider@npm:9.7.5":
   version: 9.7.5
   resolution: "rc-slider@npm:9.7.5"
@@ -29356,6 +29405,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"rc-tree@npm:~5.4.3":
+  version: 5.4.3
+  resolution: "rc-tree@npm:5.4.3"
+  dependencies:
+    "@babel/runtime": ^7.10.1
+    classnames: 2.x
+    rc-motion: ^2.0.1
+    rc-util: ^5.16.1
+    rc-virtual-list: ^3.4.1
+  peerDependencies:
+    react: "*"
+    react-dom: "*"
+  checksum: bf86dd216f53d1886234f07e765e0831906ca84e333d2bc757198b10ace1d6a256f8a1aa818ab545680375c13a8ab855667eb768eabcd6ad12eccfa99f6d6dab
+  languageName: node
+  linkType: hard
+
 "rc-trigger@npm:^2.2.0":
   version: 2.6.5
   resolution: "rc-trigger@npm:2.6.5"
@@ -29400,7 +29465,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rc-util@npm:^5.0.1, rc-util@npm:^5.2.1, rc-util@npm:^5.3.0, rc-util@npm:^5.5.0, rc-util@npm:^5.7.0":
+"rc-util@npm:^5.0.7, rc-util@npm:^5.15.0, rc-util@npm:^5.16.1, rc-util@npm:^5.5.1, rc-util@npm:^5.6.1":
+  version: 5.16.1
+  resolution: "rc-util@npm:5.16.1"
+  dependencies:
+    "@babel/runtime": ^7.12.5
+    react-is: ^16.12.0
+    shallowequal: ^1.1.0
+  peerDependencies:
+    react: ">=16.9.0"
+    react-dom: ">=16.9.0"
+  checksum: f2a6fd262d91d0b2ee1d84853c5ab212c9138b535ce5df8fa807fad4d8772539cbf0fee8cf7044ce9d47d8847950dfa5ae2f884c40eda9b0e9879050e4d549ec
+  languageName: node
+  linkType: hard
+
+"rc-util@npm:^5.2.1, rc-util@npm:^5.3.0, rc-util@npm:^5.5.0, rc-util@npm:^5.7.0":
   version: 5.14.0
   resolution: "rc-util@npm:5.14.0"
   dependencies:
@@ -29414,17 +29493,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rc-util@npm:^5.16.1":
+"rc-virtual-list@npm:^3.2.0, rc-virtual-list@npm:^3.4.1":
-  version: 5.16.1
+  version: 3.4.2
-  resolution: "rc-util@npm:5.16.1"
+  resolution: "rc-virtual-list@npm:3.4.2"
   dependencies:
-    "@babel/runtime": ^7.12.5
+    classnames: ^2.2.6
-    react-is: ^16.12.0
+    rc-resize-observer: ^1.0.0
-    shallowequal: ^1.1.0
+    rc-util: ^5.0.7
   peerDependencies:
-    react: ">=16.9.0"
+    react: "*"
-    react-dom: ">=16.9.0"
+    react-dom: "*"
-  checksum: f2a6fd262d91d0b2ee1d84853c5ab212c9138b535ce5df8fa807fad4d8772539cbf0fee8cf7044ce9d47d8847950dfa5ae2f884c40eda9b0e9879050e4d549ec
+  checksum: ed0954c6a0263de9fda48c213a38f20852851ce9292c413ce982f45b50ea837841aafa7ab81d06ad7fc8b11289ca56552c69ff01c7967d941ab2cafee41ffaff
   languageName: node
   linkType: hard
 
@@ -35414,7 +35493,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"warning@npm:^4.0.1, warning@npm:^4.0.2":
+"warning@npm:^4.0.2":
   version: 4.0.3
   resolution: "warning@npm:4.0.3"
   dependencies: