hotfix: correct EuiFlexGroup and EuiFlexItem ref prop type and othe…

…r small adjustments (#7724)

Co-authored-by: Trevor Pierce <1Copenut@users.noreply.github.com>

changelogs/upcoming/7724.md

@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Fixed `EuiFlexGroup` and `EuiFlexItem` `ref` prop typing to support refs of the same type as the passed `component` type and allow `displayName` to be defined for easy component naming when using component wrappers like `styled()`

src/components/flex/flex_group.tsx

@@ -12,7 +12,7 @@ import React, {
   ElementType,
   ForwardedRef,
   forwardRef,
-  FunctionComponent,
+  PropsWithChildren,
   Ref,
 } from 'react';
 import classNames from 'classnames';
@@ -54,32 +54,34 @@ type FlexGroupDirection = (typeof DIRECTIONS)[number];
 type ComponentPropType = ElementType<CommonProps>;
 
 export type EuiFlexGroupProps<TComponent extends ComponentPropType = 'div'> =
-  ComponentPropsWithoutRef<TComponent> & {
-    alignItems?: FlexGroupAlignItems;
-    /**
-     * Customize the component type that is rendered.
-     *
-     * It can be any valid React component type like a tag name string
-     * such as `'div'` or `'span'`, a React component (a function, a class,
-     * or an exotic component like `memo()`).
-     *
-     * `<EuiFlexGroup>` accepts and forwards all extra props to the custom
-     * component.
-     *
-     * @example
-     * // Renders a <button> element
-     * <EuiFlexGroup component="button">
-     *   Submit form
-     * </EuiFlexGroup>
-     * @default "div"
-     */
-    component?: TComponent;
-    direction?: FlexGroupDirection;
-    gutterSize?: EuiFlexGroupGutterSize;
-    justifyContent?: FlexGroupJustifyContent;
-    responsive?: boolean;
-    wrap?: boolean;
-  };
+  PropsWithChildren &
+    CommonProps &
+    ComponentPropsWithoutRef<TComponent> & {
+      alignItems?: FlexGroupAlignItems;
+      /**
+       * Customize the component type that is rendered.
+       *
+       * It can be any valid React component type like a tag name string
+       * such as `'div'` or `'span'`, a React component (a function, a class,
+       * or an exotic component like `memo()`).
+       *
+       * `<EuiFlexGroup>` accepts and forwards all extra props to the custom
+       * component.
+       *
+       * @example
+       * // Renders a <button> element
+       * <EuiFlexGroup component="button">
+       *   Submit form
+       * </EuiFlexGroup>
+       * @default "div"
+       */
+      component?: TComponent;
+      direction?: FlexGroupDirection;
+      gutterSize?: EuiFlexGroupGutterSize;
+      justifyContent?: FlexGroupJustifyContent;
+      responsive?: boolean;
+      wrap?: boolean;
+    };
 
 const EuiFlexGroupInternal = <TComponent extends ComponentPropType>(
   {
@@ -118,13 +120,13 @@ const EuiFlexGroupInternal = <TComponent extends ComponentPropType>(
 
 // Cast forwardRef return type to work with the generic TComponent type
 // and not fallback to implicit any typing
-export const EuiFlexGroup = forwardRef(EuiFlexGroupInternal) as <
-  TComponent extends ComponentPropType
+export const EuiFlexGroup = forwardRef(EuiFlexGroupInternal) as (<
+  TComponent extends ComponentPropType = 'div',
+  TComponentRef = ReturnType<typeof EuiFlexGroupInternal>
 >(
   props: EuiFlexGroupProps<TComponent> & {
-    ref?: Ref<typeof EuiFlexGroupInternal>;
+    ref?: Ref<TComponentRef>;
   }
-) => ReturnType<typeof EuiFlexGroupInternal>;
+) => ReturnType<typeof EuiFlexGroupInternal>) & { displayName?: string };
 
-// Cast is required here because of the cast above
-(EuiFlexGroup as FunctionComponent).displayName = 'EuiFlexGroup';
+EuiFlexGroup.displayName = 'EuiFlexGroup';

src/components/flex/flex_item.tsx

@@ -14,7 +14,6 @@ import React, {
   ComponentType,
   ForwardedRef,
   forwardRef,
-  FunctionComponent,
   Ref,
 } from 'react';
 import classNames from 'classnames';
@@ -110,13 +109,13 @@ const EuiFlexItemInternal = <TComponent extends ComponentPropType>(
 
 // Cast forwardRef return type to work with the generic TComponent type
 // and not fallback to implicit any typing
-export const EuiFlexItem = forwardRef(EuiFlexItemInternal) as <
-  TComponent extends ComponentPropType
+export const EuiFlexItem = forwardRef(EuiFlexItemInternal) as (<
+  TComponent extends ComponentPropType,
+  TComponentRef = ReturnType<typeof EuiFlexItemInternal>
 >(
   props: EuiFlexItemProps<TComponent> & {
-    ref?: Ref<typeof EuiFlexItemInternal>;
+    ref?: Ref<TComponentRef>;
   }
-) => ReturnType<typeof EuiFlexItemInternal>;
+) => ReturnType<typeof EuiFlexItemInternal>) & { displayName?: string };
 
-// Cast is required here because of the cast above
-(EuiFlexItem as FunctionComponent).displayName = 'EuiFlexItem';
+EuiFlexItem.displayName = 'EuiFlexItem';