From 8bf014390838714a5fc39bba54ec108730a01015 Mon Sep 17 00:00:00 2001
From: Alex Khomenko <Clarity-89@users.noreply.github.com>
Date: Fri, 13 Oct 2023 16:40:25 +0200
Subject: [PATCH] Grafana/ui: Wrap Box in forwardRef (#76555)

* Grafana/ui: Wrap Box in forwardRef

* Destructure props
---
 .../src/components/Layout/Box/Box.tsx         | 67 ++++++++++---------
 1 file changed, 36 insertions(+), 31 deletions(-)

diff --git a/packages/grafana-ui/src/components/Layout/Box/Box.tsx b/packages/grafana-ui/src/components/Layout/Box/Box.tsx
index 51527ca877e..32bc6ce8ec9 100644
--- a/packages/grafana-ui/src/components/Layout/Box/Box.tsx
+++ b/packages/grafana-ui/src/components/Layout/Box/Box.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { ElementType } from 'react';
+import React, { ElementType, forwardRef, PropsWithChildren } from 'react';
 
 import { GrafanaTheme2, ThemeSpacingTokens, ThemeShape, ThemeShadows } from '@grafana/data';
 
@@ -68,34 +68,35 @@ interface BoxProps {
   element?: ElementType;
 }
 
-export const Box = ({
-  children,
-  margin,
-  marginX,
-  marginY,
-  marginTop,
-  marginBottom,
-  marginLeft,
-  marginRight,
-  padding,
-  paddingX,
-  paddingY,
-  paddingTop,
-  paddingBottom,
-  paddingLeft,
-  paddingRight,
-  display,
-  backgroundColor,
-  grow,
-  shrink,
-  borderColor,
-  borderStyle,
-  borderRadius,
-  justifyContent,
-  alignItems,
-  boxShadow,
-  element,
-}: React.PropsWithChildren<BoxProps>) => {
+export const Box = forwardRef<HTMLElement, PropsWithChildren<BoxProps>>((props, ref) => {
+  const {
+    children,
+    margin,
+    marginX,
+    marginY,
+    marginTop,
+    marginBottom,
+    marginLeft,
+    marginRight,
+    padding,
+    paddingX,
+    paddingY,
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    display,
+    backgroundColor,
+    grow,
+    shrink,
+    borderColor,
+    borderStyle,
+    borderRadius,
+    justifyContent,
+    alignItems,
+    boxShadow,
+    element,
+  } = props;
   const styles = useStyles2(
     getStyles,
     margin,
@@ -125,8 +126,12 @@ export const Box = ({
   );
   const Element = element ?? 'div';
 
-  return <Element className={styles.root}>{children}</Element>;
-};
+  return (
+    <Element ref={ref} className={styles.root}>
+      {children}
+    </Element>
+  );
+});
 
 Box.displayName = 'Box';