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>

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) => (
-  values: CascaderValueType,
-  options: RCCascaderOption[]
-) => {
+export const onChangeCascader = (onChanged: onChangeType) => (values: SingleValueType, options: RCCascaderOption[]) => {
   if (onChanged) {
     // map values to strings for backwards compatibility with Cascader components
     onChanged(