Update dependency rc-drawer to v6 (#58237)

* Update dependency rc-drawer to v6

* updates for rc-drawer v6

* move aria-label to an inner child to fix e2e tests

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>

package.json

@@ -348,7 +348,7 @@
     "prop-types": "15.8.1",
     "pseudoizer": "^0.1.0",
     "rc-cascader": "3.7.0",
-    "rc-drawer": "4.4.3",
+    "rc-drawer": "6.0.1",
     "rc-slider": "10.0.1",
     "rc-time-picker": "3.7.3",
     "rc-tree": "5.7.0",

packages/grafana-e2e-selectors/src/selectors/components.ts

@@ -107,7 +107,7 @@ export const Components = {
       expand: 'Drawer expand',
       contract: 'Drawer contract',
       close: 'Drawer close',
-      rcContentWrapper: () => '.drawer-content-wrapper',
+      rcContentWrapper: () => '.rc-drawer-content-wrapper',
     },
   },
   PanelEditor: {

packages/grafana-ui/package.json

@@ -79,7 +79,7 @@
     "ol": "7.1.0",
     "prismjs": "1.29.0",
     "rc-cascader": "3.7.0",
-    "rc-drawer": "4.4.3",
+    "rc-drawer": "6.0.1",
     "rc-slider": "10.0.1",
     "rc-time-picker": "^3.7.3",
     "rc-tooltip": "5.2.2",

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

@@ -74,24 +74,37 @@ export function Drawer({
 
   return (
     <RcDrawer
-      level={null}
-      handler={false}
       open={isOpen}
       onClose={onClose}
-      maskClosable={closeOnMaskClick}
       placement="right"
       width={currentWidth}
       getContainer={inline ? undefined : 'body'}
       style={style}
-      className={drawerStyles.drawer}
+      className={drawerStyles.drawerContent}
-      aria-label={
+      rootClassName={drawerStyles.drawer}
-        typeof title === 'string'
+      motion={{
-          ? selectors.components.Drawer.General.title(title)
+        motionAppear: true,
-          : selectors.components.Drawer.General.title('no title')
+        motionName: drawerStyles.drawerMotion,
-      }
+      }}
+      maskClassName={drawerStyles.mask}
+      maskClosable={closeOnMaskClick}
+      maskMotion={{
+        motionAppear: true,
+        motionName: drawerStyles.maskMotion,
+      }}
     >
       <FocusScope restoreFocus contain autoFocus>
-        <div className={drawerStyles.container} {...overlayProps} {...dialogProps} ref={overlayRef}>
+        <div
+          aria-label={
+            typeof title === 'string'
+              ? selectors.components.Drawer.General.title(title)
+              : selectors.components.Drawer.General.title('no title')
+          }
+          className={drawerStyles.container}
+          {...overlayProps}
+          {...dialogProps}
+          ref={overlayRef}
+        >
           {typeof title === 'string' && (
             <div className={drawerStyles.header}>
               <div className={drawerStyles.actions}>
@@ -145,33 +158,46 @@ const getStyles = (theme: GrafanaTheme2) => {
       flex: 1 1 0;
     `,
     drawer: css`
-      .drawer-content {
+      .rc-drawer-content-wrapper {
-        background-color: ${theme.colors.background.primary};
-        display: flex;
-        flex-direction: column;
-        overflow: hidden;
-      }
-      &.drawer-open .drawer-mask {
-        background-color: ${theme.components.overlay.background};
-        backdrop-filter: blur(1px);
-        opacity: 1;
-      }
-      .drawer-mask {
-        background-color: ${theme.components.overlay.background};
-        backdrop-filter: blur(1px);
-      }
-      .drawer-open .drawer-content-wrapper {
         box-shadow: ${theme.shadows.z3};
-      }
 
-      z-index: ${theme.zIndex.dropdown};
+        ${theme.breakpoints.down('sm')} {
-
-      ${theme.breakpoints.down('sm')} {
-        .drawer-content-wrapper {
           width: 100% !important;
         }
       }
     `,
+    drawerContent: css`
+      background-color: ${theme.colors.background.primary} !important;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      z-index: ${theme.zIndex.dropdown};
+    `,
+    drawerMotion: css`
+      &-appear {
+        transform: translateX(100%);
+        transition: none !important;
+
+        &-active {
+          transition: ${theme.transitions.create('transform')} !important;
+          transform: translateX(0);
+        }
+      }
+    `,
+    mask: css`
+      background-color: ${theme.components.overlay.background} !important;
+      backdrop-filter: blur(1px);
+    `,
+    maskMotion: css`
+      &-appear {
+        opacity: 0;
+
+        &-active {
+          opacity: 1;
+          transition: ${theme.transitions.create('opacity')};
+        }
+      }
+    `,
     header: css`
       background-color: ${theme.colors.background.canvas};
       flex-grow: 0;

yarn.lock

@@ -2967,7 +2967,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:7.20.1":
+"@babel/runtime@npm:7.20.1, @babel/runtime@npm:^7.18.0":
   version: 7.20.1
   resolution: "@babel/runtime@npm:7.20.1"
   dependencies:
@@ -4777,7 +4777,7 @@ __metadata:
     prismjs: 1.29.0
     process: ^0.11.10
     rc-cascader: 3.7.0
-    rc-drawer: 4.4.3
+    rc-drawer: 6.0.1
     rc-slider: 10.0.1
     rc-time-picker: ^3.7.3
     rc-tooltip: 5.2.2
@@ -7496,6 +7496,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rc-component/portal@npm:^1.0.0-6":
+  version: 1.0.3
+  resolution: "@rc-component/portal@npm:1.0.3"
+  dependencies:
+    "@babel/runtime": ^7.18.0
+    classnames: ^2.3.2
+    rc-util: ^5.24.4
+  peerDependencies:
+    react: ">=16.9.0"
+    react-dom: ">=16.9.0"
+  checksum: e25a72042c4a7dfe8a25526972e1d024a8f5aac29963bed63ecdb356b238ae882575b2dc27de9f003618638c758dc669d5684549cf09125fce95d9227d78a75e
+  languageName: node
+  linkType: hard
+
 "@reach/observe-rect@npm:^1.1.0":
   version: 1.2.0
   resolution: "@reach/observe-rect@npm:1.2.0"
@@ -15478,7 +15492,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"classnames@npm:2.3.2":
+"classnames@npm:2.3.2, classnames@npm:^2.3.2":
   version: 2.3.2
   resolution: "classnames@npm:2.3.2"
   checksum: 2c62199789618d95545c872787137262e741f9db13328e216b093eea91c85ef2bfb152c1f9e63027204e2559a006a92eb74147d46c800a9f96297ae1d9f96f4e
@@ -21713,7 +21727,7 @@ __metadata:
     prop-types: 15.8.1
     pseudoizer: ^0.1.0
     rc-cascader: 3.7.0
-    rc-drawer: 4.4.3
+    rc-drawer: 6.0.1
     rc-slider: 10.0.1
     rc-time-picker: 3.7.3
     rc-tree: 5.7.0
@@ -31664,17 +31678,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rc-drawer@npm:4.4.3":
+"rc-drawer@npm:6.0.1":
-  version: 4.4.3
+  version: 6.0.1
-  resolution: "rc-drawer@npm:4.4.3"
+  resolution: "rc-drawer@npm:6.0.1"
   dependencies:
     "@babel/runtime": ^7.10.1
+    "@rc-component/portal": ^1.0.0-6
     classnames: ^2.2.6
-    rc-util: ^5.7.0
+    rc-motion: ^2.6.1
+    rc-util: ^5.21.2
   peerDependencies:
     react: ">=16.9.0"
     react-dom: ">=16.9.0"
-  checksum: bb0b3932dbe351f67c21221d08612272854166d84c4425beda365e17d89c356aecfd964f7f6451a19eb31034c4b22e515939bef1319a067c2a669541e1658084
+  checksum: ce4a0b2ac3a96a203a1038f1c30df079e34359f821db9bcab39a87bdc62e62dd681d3b37354d9e1c77b44e3954b4f583d3b16ed021bcd1851dea0f62b888f6a8
   languageName: node
   linkType: hard
 
@@ -31692,6 +31708,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"rc-motion@npm:^2.6.1":
+  version: 2.6.2
+  resolution: "rc-motion@npm:2.6.2"
+  dependencies:
+    "@babel/runtime": ^7.11.1
+    classnames: ^2.2.1
+    rc-util: ^5.21.0
+  peerDependencies:
+    react: ">=16.9.0"
+    react-dom: ">=16.9.0"
+  checksum: e91ec8a9f8748ae34d6f9c0380d4587729453c7c8afe23c026ff096905b5a24672b050e04789061c833994e05ed18fec02919bc0e27c1e05b06fe7a0c0b75532
+  languageName: node
+  linkType: hard
+
 "rc-overflow@npm:^1.0.0":
   version: 1.2.2
   resolution: "rc-overflow@npm:1.2.2"
@@ -31889,7 +31919,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rc-util@npm:^5.18.1, rc-util@npm:^5.19.2":
+"rc-util@npm:^5.18.1, rc-util@npm:^5.19.2, rc-util@npm:^5.21.0, rc-util@npm:^5.21.2, rc-util@npm:^5.24.4":
   version: 5.24.4
   resolution: "rc-util@npm:5.24.4"
   dependencies:
@@ -31903,7 +31933,7 @@ __metadata:
   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":
+"rc-util@npm:^5.2.1, rc-util@npm:^5.3.0, rc-util@npm:^5.5.0":
   version: 5.14.0
   resolution: "rc-util@npm:5.14.0"
   dependencies: