public/grafana
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

upgrade rc-drawer

Browse Source
This commit is contained in:
Ashley Harrison committed 2025-12-03 15:52:33 +00:00
1 parent 3cb03b888f
commit f7c71c4fb7
3 files changed
+88 -36
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/grafana-ui/package.json
+1 -1
View File
@@ -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",
packages/grafana-ui/src/components/Drawer/Drawer.tsx
+21 -14
View File
@@ -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`,
yarn.lock
+66 -21
View File
@@ -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: