From f7c71c4fb74dbdf2536d9bbb1b635479129c4249 Mon Sep 17 00:00:00 2001 From: Ashley Harrison Date: Wed, 3 Dec 2025 15:52:33 +0000 Subject: [PATCH] upgrade rc-drawer --- packages/grafana-ui/package.json | 2 +- .../src/components/Drawer/Drawer.tsx | 35 +++++--- yarn.lock | 87 ++++++++++++++----- 3 files changed, 88 insertions(+), 36 deletions(-) diff --git a/packages/grafana-ui/package.json b/packages/grafana-ui/package.json index 4efd0a26de4..04f24ad6925 100644 --- a/packages/grafana-ui/package.json +++ b/packages/grafana-ui/package.json @@ -75,6 +75,7 @@ "@hello-pangea/dnd": "18.0.1", "@monaco-editor/react": "4.7.0", "@popperjs/core": "2.11.8", + "@rc-component/drawer": "1.3.0", "@react-aria/dialog": "3.5.31", "@react-aria/focus": "3.21.2", "@react-aria/overlays": "3.30.0", @@ -102,7 +103,6 @@ "ol": "10.7.0", "prismjs": "1.30.0", "rc-cascader": "3.34.0", - "rc-drawer": "7.3.0", "rc-picker": "4.11.3", "rc-slider": "11.1.9", "rc-tooltip": "6.4.0", diff --git a/packages/grafana-ui/src/components/Drawer/Drawer.tsx b/packages/grafana-ui/src/components/Drawer/Drawer.tsx index b7ee0252bfc..00039adfc3f 100644 --- a/packages/grafana-ui/src/components/Drawer/Drawer.tsx +++ b/packages/grafana-ui/src/components/Drawer/Drawer.tsx @@ -1,8 +1,8 @@ import { css, cx } from '@emotion/css'; +import RcDrawer from '@rc-component/drawer'; import { useDialog } from '@react-aria/dialog'; import { FocusScope } from '@react-aria/focus'; import { useOverlay } from '@react-aria/overlays'; -import RcDrawer from 'rc-drawer'; import { ReactNode, useCallback, useEffect, useState } from 'react'; import * as React from 'react'; @@ -17,8 +17,6 @@ import { Stack } from '../Layout/Stack/Stack'; import { ScrollContainer } from '../ScrollContainer/ScrollContainer'; import { Text } from '../Text/Text'; -import 'rc-drawer/assets/index.css'; - export interface Props { children: ReactNode; /** Title shown at the top of the drawer */ @@ -264,23 +262,28 @@ const getStyles = (theme: GrafanaTheme2) => { position: 'relative', }), drawer: css({ - top: 0, + inset: 0, + position: 'fixed', + zIndex: theme.zIndex.modalBackdrop, + pointerEvents: 'none', '.rc-drawer-content-wrapper': { boxShadow: theme.shadows.z3, }, }), drawerContent: css({ - backgroundColor: `${theme.colors.background.primary} !important`, + backgroundColor: theme.colors.background.primary, display: 'flex', - overflow: 'unset !important', flexDirection: 'column', + height: '100%', + pointerEvents: 'auto', + width: '100%', }), drawerMotion: css({ '&-appear': { [theme.transitions.handleMotion('no-preference')]: { transform: 'translateX(100%)', - transition: 'none !important', + transition: 'none', }, [theme.transitions.handleMotion('reduce')]: { opacity: 0, @@ -288,7 +291,7 @@ const getStyles = (theme: GrafanaTheme2) => { '&-active': { [theme.transitions.handleMotion('no-preference')]: { transform: 'translateX(0)', - transition: `${theme.transitions.create('transform')} !important`, + transition: theme.transitions.create('transform'), }, [theme.transitions.handleMotion('reduce')]: { transition: `opacity 0.2s ease-in-out`, @@ -302,13 +305,13 @@ const getStyles = (theme: GrafanaTheme2) => { // but we don't want the backdrop styling to apply over the top bar as it looks weird // instead have a child pseudo element to apply the backdrop styling below the top bar mask: css({ - // The !important here is to override the default .rc-drawer-mask styles - backgroundColor: 'transparent !important', - // eslint-disable-next-line @typescript-eslint/consistent-type-assertions - position: 'fixed !important' as 'fixed', + inset: 0, + pointerEvents: 'auto', + position: 'fixed', + zIndex: theme.zIndex.modalBackdrop, '&:before': { - backgroundColor: `${theme.components.overlay.background} !important`, + backgroundColor: theme.components.overlay.background, bottom: 0, content: '""', left: 0, @@ -370,8 +373,12 @@ const getStyles = (theme: GrafanaTheme2) => { function getWrapperStyles(theme: GrafanaTheme2, size: 'sm' | 'md' | 'lg') { return css({ + bottom: 0, label: `drawer-content-wrapper-${size}`, - overflow: 'unset !important', + position: 'absolute', + right: 0, + top: 0, + zIndex: theme.zIndex.modalBackdrop, [theme.breakpoints.down('md')]: { width: `calc(100% - ${theme.spacing(2)}) !important`, diff --git a/yarn.lock b/yarn.lock index cb495d132ca..753d9c2724e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1473,7 +1473,7 @@ __metadata: languageName: node linkType: hard -"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.1, @babel/runtime@npm:^7.11.1, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.0, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.13, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.16.3, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.18.0, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.20.0, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.23.9, @babel/runtime@npm:^7.24.5, @babel/runtime@npm:^7.24.7, @babel/runtime@npm:^7.25.0, @babel/runtime@npm:^7.25.6, @babel/runtime@npm:^7.25.7, @babel/runtime@npm:^7.26.10, @babel/runtime@npm:^7.26.7, @babel/runtime@npm:^7.27.0, @babel/runtime@npm:^7.27.6, @babel/runtime@npm:^7.28.4, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.7": +"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.1, @babel/runtime@npm:^7.11.1, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.0, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.13, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.16.3, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.18.0, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.20.0, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.24.5, @babel/runtime@npm:^7.24.7, @babel/runtime@npm:^7.25.0, @babel/runtime@npm:^7.25.6, @babel/runtime@npm:^7.25.7, @babel/runtime@npm:^7.26.10, @babel/runtime@npm:^7.26.7, @babel/runtime@npm:^7.27.0, @babel/runtime@npm:^7.27.6, @babel/runtime@npm:^7.28.4, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.7": version: 7.28.4 resolution: "@babel/runtime@npm:7.28.4" checksum: 10/6c9a70452322ea80b3c9b2a412bcf60771819213a67576c8cec41e88a95bb7bf01fc983754cda35dc19603eef52df22203ccbf7777b9d6316932f9fb77c25163 @@ -3782,6 +3782,7 @@ __metadata: "@hello-pangea/dnd": "npm:18.0.1" "@monaco-editor/react": "npm:4.7.0" "@popperjs/core": "npm:2.11.8" + "@rc-component/drawer": "npm:1.3.0" "@react-aria/dialog": "npm:3.5.31" "@react-aria/focus": "npm:3.21.2" "@react-aria/overlays": "npm:3.30.0" @@ -3863,7 +3864,6 @@ __metadata: prismjs: "npm:1.30.0" process: "npm:^0.11.10" rc-cascader: "npm:3.34.0" - rc-drawer: "npm:7.3.0" rc-picker: "npm:4.11.3" rc-slider: "npm:11.1.9" rc-tooltip: "npm:6.4.0" @@ -6789,7 +6789,35 @@ __metadata: languageName: node linkType: hard -"@rc-component/portal@npm:^1.1.0, @rc-component/portal@npm:^1.1.1": +"@rc-component/drawer@npm:1.3.0": + version: 1.3.0 + resolution: "@rc-component/drawer@npm:1.3.0" + dependencies: + "@rc-component/motion": "npm:^1.1.4" + "@rc-component/portal": "npm:^2.0.0" + "@rc-component/util": "npm:^1.2.1" + clsx: "npm:^2.1.1" + peerDependencies: + react: ">=18.0.0" + react-dom: ">=18.0.0" + checksum: 10/55bd6e2aac3d0bbe04f9e79c5cf60bbb3291a32eeaf9e2cbcad7ec360543d5c44efdc8f0d49ba420f05c11866c7b263029c60ecab8bbce5fcab860e552a13e1a + languageName: node + linkType: hard + +"@rc-component/motion@npm:^1.1.4": + version: 1.1.5 + resolution: "@rc-component/motion@npm:1.1.5" + dependencies: + "@rc-component/util": "npm:^1.2.0" + clsx: "npm:^2.1.1" + peerDependencies: + react: ">=16.9.0" + react-dom: ">=16.9.0" + checksum: 10/61993afa6aca1353ac1200c042450e7439ee5638f7542838bf741aaac0eaa0584b45150902379da1e0352db4b30d95c2d3d5477e1a217b526eb033c4acb91558 + languageName: node + linkType: hard + +"@rc-component/portal@npm:^1.1.0": version: 1.1.1 resolution: "@rc-component/portal@npm:1.1.1" dependencies: @@ -6803,6 +6831,19 @@ __metadata: languageName: node linkType: hard +"@rc-component/portal@npm:^2.0.0": + version: 2.0.1 + resolution: "@rc-component/portal@npm:2.0.1" + dependencies: + "@rc-component/util": "npm:^1.2.1" + clsx: "npm:^2.1.1" + peerDependencies: + react: ">=18.0.0" + react-dom: ">=18.0.0" + checksum: 10/c53df9c27b65f2f4fc8e9952f1b7fe9aa70b284541881296149bef5eb899d77cbc75e1dcfb477cb08751817644da2e731b273a11eb4cf772173c0228d4190532 + languageName: node + linkType: hard + "@rc-component/trigger@npm:^2.0.0, @rc-component/trigger@npm:^2.1.1": version: 2.2.0 resolution: "@rc-component/trigger@npm:2.2.0" @@ -6820,6 +6861,19 @@ __metadata: languageName: node linkType: hard +"@rc-component/util@npm:^1.2.0, @rc-component/util@npm:^1.2.1": + version: 1.4.0 + resolution: "@rc-component/util@npm:1.4.0" + dependencies: + is-mobile: "npm:^5.0.0" + react-is: "npm:^18.2.0" + peerDependencies: + react: ">=18.0.0" + react-dom: ">=18.0.0" + checksum: 10/dc74487289ffdf83b854d9511b5be2a2400ac08a3c51645f0d2afaf90e991e8f9d244690a0ef246fb07fb0bccdcc3c913950b159b204b832ceae8f19534cb263 + languageName: node + linkType: hard + "@reach/observe-rect@npm:^1.1.0": version: 1.2.0 resolution: "@reach/observe-rect@npm:1.2.0" @@ -21135,6 +21189,13 @@ __metadata: languageName: node linkType: hard +"is-mobile@npm:^5.0.0": + version: 5.0.0 + resolution: "is-mobile@npm:5.0.0" + checksum: 10/426f6bacfffa4166e9af49a915f3389d27c4cbc5cdce1585c3f5f11a0c2983c6d3d2c739985c32f948c0fe4f6b66fc88f71d8f79802608be232d799a27615a37 + languageName: node + linkType: hard + "is-module@npm:^1.0.0": version: 1.0.0 resolution: "is-module@npm:1.0.0" @@ -27932,23 +27993,7 @@ __metadata: languageName: node linkType: hard -"rc-drawer@npm:7.3.0": - version: 7.3.0 - resolution: "rc-drawer@npm:7.3.0" - dependencies: - "@babel/runtime": "npm:^7.23.9" - "@rc-component/portal": "npm:^1.1.1" - classnames: "npm:^2.2.6" - rc-motion: "npm:^2.6.1" - rc-util: "npm:^5.38.1" - peerDependencies: - react: ">=16.9.0" - react-dom: ">=16.9.0" - checksum: 10/99dd1dd51abd21ae1b7b12a1f32a1509fac5d1d9e4719b77e5354cae98fe14fb21dde382c9552cdb21fba07505d3bfbab490b04fb97df709f4efe0b352f129e1 - languageName: node - linkType: hard - -"rc-motion@npm:^2.0.0, rc-motion@npm:^2.0.1, rc-motion@npm:^2.6.1": +"rc-motion@npm:^2.0.0, rc-motion@npm:^2.0.1": version: 2.6.2 resolution: "rc-motion@npm:2.6.2" dependencies: @@ -28085,7 +28130,7 @@ __metadata: languageName: node linkType: hard -"rc-util@npm:^5.15.0, rc-util@npm:^5.16.1, rc-util@npm:^5.21.0, rc-util@npm:^5.24.4, rc-util@npm:^5.36.0, rc-util@npm:^5.37.0, rc-util@npm:^5.38.0, rc-util@npm:^5.38.1, rc-util@npm:^5.43.0, rc-util@npm:^5.44.1, rc-util@npm:^5.44.3": +"rc-util@npm:^5.15.0, rc-util@npm:^5.16.1, rc-util@npm:^5.21.0, rc-util@npm:^5.24.4, rc-util@npm:^5.36.0, rc-util@npm:^5.37.0, rc-util@npm:^5.38.0, rc-util@npm:^5.43.0, rc-util@npm:^5.44.1, rc-util@npm:^5.44.3": version: 5.44.3 resolution: "rc-util@npm:5.44.3" dependencies: