From 69865ae80ddc780dd5a7ea8c18ecb0ebf7168739 Mon Sep 17 00:00:00 2001
From: Tomasz Kajtoch <tomasz.kajtoch@elastic.co>
Date: Wed, 1 May 2024 14:08:42 +0200
Subject: [PATCH] feat: allow defining `displayName` on `EuiFlexItem` and
 `EuiFlexGroup`

---
 src/components/flex/flex_group.tsx | 10 ++++------
 src/components/flex/flex_item.tsx  |  8 +++-----
 2 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/src/components/flex/flex_group.tsx b/src/components/flex/flex_group.tsx
index 575918ab5ff..c7bb866486b 100644
--- a/src/components/flex/flex_group.tsx
+++ b/src/components/flex/flex_group.tsx
@@ -12,7 +12,6 @@ import React, {
   ElementType,
   ForwardedRef,
   forwardRef,
-  FunctionComponent,
   PropsWithChildren,
   Ref,
 } from 'react';
@@ -121,14 +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<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';
diff --git a/src/components/flex/flex_item.tsx b/src/components/flex/flex_item.tsx
index b4687054cf9..2b29aeacf48 100644
--- a/src/components/flex/flex_item.tsx
+++ b/src/components/flex/flex_item.tsx
@@ -14,7 +14,6 @@ import React, {
   ComponentType,
   ForwardedRef,
   forwardRef,
-  FunctionComponent,
   Ref,
 } from 'react';
 import classNames from 'classnames';
@@ -110,14 +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 <
+export const EuiFlexItem = forwardRef(EuiFlexItemInternal) as (<
   TComponent extends ComponentPropType,
   TComponentRef = ReturnType<typeof EuiFlexItemInternal>
 >(
   props: EuiFlexItemProps<TComponent> & {
     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';