Fix issue with navigation component name mangling in production builds

packages/react/src/common/types.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+
+/**
+ * Extends the React FunctionComponent type with the componentName key
+ *
+ */
+export type FCWithName = React.FC & { componentName: string };

packages/react/src/components/navigation/Navigation.tsx

@@ -15,6 +15,7 @@ import { NavigationDropdown } from './navigation-dropdown/NavigationDropdown';
 import { useMobile } from '../../hooks/useMobile';
 import { IconCross, IconMenuHamburger } from '../../icons';
 import { NavigationReducerAction, NavigationReducerState } from './Navigation.interface';
+import { FCWithName } from '../../common/types';
 
 const MOBILE_MENU_TRANSITION: UseTransitionProps = {
   from: { transform: 'translate3d(0, -10%, 0)', opacity: 0.85 },
@@ -107,7 +108,7 @@ const rearrangeChildrenForMobile = (children: React.ReactElement[], authenticate
 
   // moves the component to the start of the array
   const moveComponentToTop = (name: string) => {
-    const index = rearrangedChildren.findIndex((item) => (item?.type as React.FC)?.name === name);
+    const index = rearrangedChildren.findIndex((item) => (item?.type as FCWithName)?.componentName === name);
     if (index > -1) {
       const component = rearrangedChildren.splice(index, 1)[0];
       rearrangedChildren.splice(0, 0, component);
@@ -205,18 +206,18 @@ export const Navigation = ({
   const childrenAsArray = React.Children.toArray(children) as React.ReactElement[];
   // children without the navigation row
   const childrenWithoutNavigation = childrenAsArray.filter(
-    (child) => (child.type as React.FC)?.name !== 'NavigationRow',
+    (child) => (child.type as FCWithName)?.componentName !== 'NavigationRow',
   );
   // filter out the NavigationRow, so that it can be rendered correctly based on the 'navigationRowDisplay' value
-  const navigation = childrenAsArray.filter((child) => (child.type as React.FC)?.name === 'NavigationRow');
+  const navigation = childrenAsArray.filter((child) => (child.type as FCWithName)?.componentName === 'NavigationRow');
 
   // children that will be rendered in the mobile menu
   let menuChildren = null;
 
   if (isMobile) {
     // navigation actions
-    const actions = childrenAsArray.find((child) => (child.type as React.FC).name === 'NavigationActions')?.props
-      ?.children;
+    const actions = childrenAsArray.find((child) => (child.type as FCWithName).componentName === 'NavigationActions')
+      ?.props?.children;
     const items = React.Children.toArray([navigation, actions]) as React.ReactElement[];
 
     // rearrange children

packages/react/src/components/navigation/navigation-actions/NavigationActions.tsx

@@ -5,3 +5,4 @@ import styles from './NavigationActions.module.css';
 export const NavigationActions = ({ children }: React.PropsWithChildren<{}>) => (
   <div className={styles.navigationActions}>{children}</div>
 );
+NavigationActions.componentName = 'NavigationActions';

packages/react/src/components/navigation/navigation-row/NavigationRow.tsx

@@ -37,3 +37,4 @@ export const NavigationRow = ({ display = 'subNav', children }: NavigationRowPro
     <nav className={classNames(styles.navigation, display === 'subNav' && styles.subNav)}>{childrenWithClassName}</nav>
   );
 };
+NavigationRow.componentName = 'NavigationRow';

packages/react/src/components/navigation/navigation-search/NavigationSearch.tsx

@@ -107,3 +107,4 @@ export const NavigationSearch = ({
     </div>
   );
 };
+NavigationSearch.displayName = 'NavigationSearch';

packages/react/src/components/navigation/navigation-user/NavigationUser.tsx

@@ -89,3 +89,4 @@ export const NavigationUser = ({
     </div>
   );
 };
+NavigationUser.componentName = 'NavigationUser';