Pass ref to EuiFlexGroup

CHANGELOG.md

@@ -1,9 +1,15 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+<<<<<<< HEAD
+- Allow `EuiFlexGroup` to accept a `ref` ([#2223](https://github.com/elastic/eui/pull/2223))
+
+**Bug fixes**
+=======
 - Fixed `EuiSuperDatePicker` to update `asyncInterval.isStopped` on a `isPaused` prop change. ([#2250](https://github.com/elastic/eui/pull/2250))
 - Converted table, popover, buttons, pagination, outside click detector, focus trap, context menu, and panel to TypeScript ([#2212](https://github.com/elastic/eui/pull/2212))
 
 ## [`13.5.0`](https://github.com/elastic/eui/tree/v13.5.0)
+>>>>>>> master
 
 - Fixed `logoCloudEnterprise`, `logoLogging`, and `logoSecurity` SVGs in `EuiIcon` to be center aligned ([#2246](https://github.com/elastic/eui/pull/2246))
 - Added locking behavior of `EuiNavDrawer` expanded state inluding the following props `isLocked`, `onIsLockedUpdate` ([#2247](https://github.com/elastic/eui/pull/2247))

src/components/flex/flex_group.tsx

@@ -1,4 +1,4 @@
-import React, { HTMLAttributes, FunctionComponent } from 'react';
+import React, { HTMLAttributes, Ref, forwardRef } from 'react';
 import classNames from 'classnames';
 import { CommonProps, keysOf } from '../common';
 
@@ -59,38 +59,69 @@ const directionToClassNameMap = {
 
 export const DIRECTIONS = keysOf(directionToClassNameMap);
 
-export const EuiFlexGroup: FunctionComponent<
+const isValidElement = (
+  component: string
+): component is FlexGroupComponentType => {
+  return ['div', 'span'].includes(component);
+};
+
+const EuiFlexGroup = forwardRef<
+  HTMLDivElement | HTMLSpanElement,
   CommonProps &
     HTMLAttributes<HTMLDivElement | HTMLSpanElement> &
     EuiFlexGroupProps
-> = ({
-  children,
-  className,
-  gutterSize = 'l',
-  alignItems = 'stretch',
-  responsive = true,
-  justifyContent = 'flexStart',
-  direction = 'row',
-  wrap = false,
-  component: Component = 'div',
-  ...rest
-}) => {
-  const classes = classNames(
-    'euiFlexGroup',
-    gutterSize ? gutterSizeToClassNameMap[gutterSize] : undefined,
-    alignItems ? alignItemsToClassNameMap[alignItems] : undefined,
-    justifyContent ? justifyContentToClassNameMap[justifyContent] : undefined,
-    direction ? directionToClassNameMap[direction] : undefined,
+>(
+  (
     {
-      'euiFlexGroup--responsive': responsive,
-      'euiFlexGroup--wrap': wrap,
+      children,
+      className,
+      gutterSize = 'l',
+      alignItems = 'stretch',
+      responsive = true,
+      justifyContent = 'flexStart',
+      direction = 'row',
+      wrap = false,
+      component = 'div',
+      ...rest
     },
-    className
-  );
+    ref: Ref<HTMLDivElement> | Ref<HTMLSpanElement>
+  ) => {
+    const classes = classNames(
+      'euiFlexGroup',
+      gutterSizeToClassNameMap[gutterSize as FlexGroupGutterSize],
+      alignItemsToClassNameMap[alignItems as FlexGroupAlignItems],
+      justifyContentToClassNameMap[justifyContent as FlexGroupJustifyContent],
+      directionToClassNameMap[direction as FlexGroupDirection],
+      {
+        'euiFlexGroup--responsive': responsive,
+        'euiFlexGroup--wrap': wrap,
+      },
+      className
+    );
 
-  return (
-    <Component className={classes} {...rest}>
-      {children}
-    </Component>
-  );
-};
+    if (!isValidElement(component)) {
+      throw new Error(
+        `${component} is not a valid element type. Use \`div\` or \`span\`.`
+      );
+    }
+
+    return component === 'span' ? (
+      <span
+        className={classes}
+        ref={ref as Ref<HTMLSpanElement>}
+        {...rest as HTMLAttributes<HTMLSpanElement>}>
+        {children}
+      </span>
+    ) : (
+      <div
+        className={classes}
+        ref={ref as Ref<HTMLDivElement>}
+        {...rest as HTMLAttributes<HTMLDivElement>}>
+        {children}
+      </div>
+    );
+  }
+);
+EuiFlexGroup.displayName = 'EuiFlexGroup';
+
+export { EuiFlexGroup };