feat: allow defining displayName on EuiFlexItem and EuiFlexGroup

elastic · May 1, 2024 · 69865ae · 69865ae
1 parent a26c214
commit 69865ae
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 11 deletions.
diff --git 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
@@ -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';