From f488e19cfb2c06a38211b6207e8ba982e1321dd0 Mon Sep 17 00:00:00 2001
From: Niclas Liimatainen <niclas.liimatainen@digia.com>
Date: Mon, 21 Sep 2020 15:42:21 +0300
Subject: [PATCH] Fix issue with navigation component name mangling in
 production builds

---
 packages/react/src/common/types.ts                    |  7 +++++++
 .../react/src/components/navigation/Navigation.tsx    | 11 ++++++-----
 .../navigation-actions/NavigationActions.tsx          |  1 +
 .../navigation/navigation-row/NavigationRow.tsx       |  1 +
 .../navigation/navigation-search/NavigationSearch.tsx |  1 +
 .../navigation/navigation-user/NavigationUser.tsx     |  1 +
 6 files changed, 17 insertions(+), 5 deletions(-)
 create mode 100644 packages/react/src/common/types.ts

diff --git a/packages/react/src/common/types.ts b/packages/react/src/common/types.ts
new file mode 100644
index 0000000000..51d71e7494
--- /dev/null
+++ b/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 };
diff --git a/packages/react/src/components/navigation/Navigation.tsx b/packages/react/src/components/navigation/Navigation.tsx
index cb86fbf8ff..b3f13b85e7 100644
--- a/packages/react/src/components/navigation/Navigation.tsx
+++ b/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
diff --git a/packages/react/src/components/navigation/navigation-actions/NavigationActions.tsx b/packages/react/src/components/navigation/navigation-actions/NavigationActions.tsx
index 82342637c8..929809599a 100644
--- a/packages/react/src/components/navigation/navigation-actions/NavigationActions.tsx
+++ b/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';
diff --git a/packages/react/src/components/navigation/navigation-row/NavigationRow.tsx b/packages/react/src/components/navigation/navigation-row/NavigationRow.tsx
index 3a91430914..845cbb630a 100644
--- a/packages/react/src/components/navigation/navigation-row/NavigationRow.tsx
+++ b/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';
diff --git a/packages/react/src/components/navigation/navigation-search/NavigationSearch.tsx b/packages/react/src/components/navigation/navigation-search/NavigationSearch.tsx
index c565a22707..a177222eb8 100644
--- a/packages/react/src/components/navigation/navigation-search/NavigationSearch.tsx
+++ b/packages/react/src/components/navigation/navigation-search/NavigationSearch.tsx
@@ -107,3 +107,4 @@ export const NavigationSearch = ({
     </div>
   );
 };
+NavigationSearch.displayName = 'NavigationSearch';
diff --git a/packages/react/src/components/navigation/navigation-user/NavigationUser.tsx b/packages/react/src/components/navigation/navigation-user/NavigationUser.tsx
index f534b8a309..eeb1618d2c 100644
--- a/packages/react/src/components/navigation/navigation-user/NavigationUser.tsx
+++ b/packages/react/src/components/navigation/navigation-user/NavigationUser.tsx
@@ -89,3 +89,4 @@ export const NavigationUser = ({
     </div>
   );
 };
+NavigationUser.componentName = 'NavigationUser';