From 95c9947af2a17cc27161237781a5cb21392591b2 Mon Sep 17 00:00:00 2001
From: Tobias Skarhed <1438972+tskarhed@users.noreply.github.com>
Date: Wed, 20 Sep 2023 10:51:32 +0200
Subject: [PATCH] Flex: Use forwardRef and useStyles2 additional args (#75138)

Refactor for forwardRef and use of new useStyles2
---
 .../grafana-ui/src/components/Flex/Flex.tsx   | 21 ++++++++++---------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/packages/grafana-ui/src/components/Flex/Flex.tsx b/packages/grafana-ui/src/components/Flex/Flex.tsx
index 8fa3175e463..78425134d41 100644
--- a/packages/grafana-ui/src/components/Flex/Flex.tsx
+++ b/packages/grafana-ui/src/components/Flex/Flex.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { useCallback } from 'react';
+import React from 'react';
 
 import { GrafanaTheme2, ThemeSpacingTokens } from '@grafana/data';
 
@@ -41,16 +41,17 @@ interface FlexProps {
   children?: React.ReactNode;
 }
 
-export const Flex = ({ gap = 1, alignItems, justifyContent, direction, wrap, children }: FlexProps) => {
-  const styles = useStyles2(
-    useCallback(
-      (theme) => getStyles(theme, gap, alignItems, justifyContent, direction, wrap),
-      [gap, alignItems, justifyContent, direction, wrap]
-    )
-  );
+export const Flex = React.forwardRef<HTMLDivElement, FlexProps>(
+  ({ gap = 1, alignItems, justifyContent, direction, wrap, children }, ref) => {
+    const styles = useStyles2(getStyles, gap, alignItems, justifyContent, direction, wrap);
 
-  return <div className={styles.flex}>{children}</div>;
-};
+    return (
+      <div ref={ref} className={styles.flex}>
+        {children}
+      </div>
+    );
+  }
+);
 
 Flex.displayName = 'Flex';