Drawer: Improve performance when resizing (#89691)

apply dynamic styles as styles instead of emotion classes

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

@@ -54,6 +54,12 @@ export interface Props {
   onClose: () => void;
 }
 
+const drawerSizes = {
+  sm: { width: '25vw', minWidth: 384 },
+  md: { width: '50vw', minWidth: 568 },
+  lg: { width: '75vw', minWidth: 744 },
+};
+
 export function Drawer({
   children,
   onClose,
@@ -68,7 +74,7 @@ export function Drawer({
   const [drawerWidth, onMouseDown, onTouchStart] = useResizebleDrawer();
 
   const styles = useStyles2(getStyles);
-  const sizeStyles = useStyles2(getSizeStyles, size, drawerWidth ?? width);
+  const wrapperStyles = useStyles2(getWrapperStyles, size);
   const dragStyles = useStyles2(getDragStyles);
 
   const overlayRef = React.useRef(null);
@@ -85,8 +91,9 @@ export function Drawer({
   // Adds body class while open so the toolbar nav can hide some actions while drawer is open
   useBodyClassWhileOpen();
 
-  const rootClass = cx(styles.drawer, sizeStyles);
   const content = <div className={styles.content}>{children}</div>;
+  const overrideWidth = drawerWidth ?? width ?? drawerSizes[size].width;
+  const minWidth = drawerSizes[size].minWidth;
 
   return (
     <RcDrawer
@@ -95,7 +102,16 @@ export function Drawer({
       placement="right"
       getContainer={'.main-view'}
       className={styles.drawerContent}
-      rootClassName={rootClass}
+      rootClassName={styles.drawer}
+      classNames={{
+        wrapper: wrapperStyles,
+      }}
+      styles={{
+        wrapper: {
+          width: overrideWidth,
+          minWidth,
+        },
+      }}
       width={''}
       motion={{
         motionAppear: true,
@@ -356,27 +372,14 @@ const getStyles = (theme: GrafanaTheme2) => {
   };
 };
 
-const drawerSizes = {
-  sm: { width: '25vw', minWidth: 384 },
-  md: { width: '50vw', minWidth: 568 },
-  lg: { width: '75vw', minWidth: 744 },
-};
-
-function getSizeStyles(theme: GrafanaTheme2, size: 'sm' | 'md' | 'lg', overrideWidth: number | string | undefined) {
-  let width = overrideWidth ?? drawerSizes[size].width;
-  let minWidth = drawerSizes[size].minWidth;
-
+function getWrapperStyles(theme: GrafanaTheme2, size: 'sm' | 'md' | 'lg') {
   return css({
-    '.rc-drawer-content-wrapper': {
-      label: `drawer-content-wrapper-${size}`,
-      width: width,
-      minWidth: minWidth,
-      overflow: 'unset',
-
-      [theme.breakpoints.down('md')]: {
-        width: `calc(100% - ${theme.spacing(2)}) !important`,
-        minWidth: 0,
-      },
+    label: `drawer-content-wrapper-${size}`,
+    overflow: 'unset !important',
+
+    [theme.breakpoints.down('md')]: {
+      width: `calc(100% - ${theme.spacing(2)}) !important`,
+      minWidth: 0,
     },
   });
 }