Merge remote-tracking branch 'origin/main' into sync-6.2-with-main

packages/react/src/components/index.ts

@@ -132,6 +132,7 @@ export { IonPopover } from './IonPopover';
 // Custom Components
 export { IonApp } from './IonApp';
 export { IonPage } from './IonPage';
+export { IonNav } from './navigation/IonNav';
 export { IonTabsContext, IonTabsContextState } from './navigation/IonTabsContext';
 export { IonTabs } from './navigation/IonTabs';
 export { IonTabBar } from './navigation/IonTabBar';

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

@@ -21,7 +21,15 @@ export const IonBackButton = /*@__PURE__*/ (() =>
     context!: React.ContextType<typeof NavContext>;
 
     clickButton = (e: React.MouseEvent) => {
+      /**
+       * If ion-back-button is being used inside
+       * of ion-nav then we should not interact with
+       * the router.
+       */
+      if (e.target && (e.target as HTMLElement).closest('ion-nav') !== null) { return; }
+
       const { defaultHref, routerAnimation } = this.props;
+
       if (this.context.hasIonicRouter()) {
         e.stopPropagation();
         this.context.goBack(defaultHref, routerAnimation);

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

@@ -0,0 +1,30 @@
+import type { FrameworkDelegate, JSX } from '@ionic/core/components';
+import { defineCustomElement } from '@ionic/core/components/ion-nav.js';
+import React, { useState } from 'react';
+
+import { ReactDelegate } from '../../framework-delegate';
+import { createReactComponent } from '../react-component-lib';
+
+const IonNavInner = createReactComponent<
+  JSX.IonNav & { delegate: FrameworkDelegate },
+  HTMLIonNavElement
+>('ion-nav', undefined, undefined, defineCustomElement);
+
+export const IonNav: React.FC<JSX.IonNav> = ({ children, ...restOfProps }) => {
+  const [views, setViews] = useState<React.ReactPortal[]>([]);
+
+  /**
+   * Allows us to create React components that are rendered within
+   * the context of the IonNav component.
+   */
+  const addView = (view: React.ReactPortal) => setViews([...views, view]);
+  const removeView = (view: React.ReactPortal) => setViews(views.filter((v) => v !== view));
+
+  const delegate = ReactDelegate(addView, removeView);
+
+  return (
+    <IonNavInner delegate={delegate} {...restOfProps}>
+      {views}
+    </IonNavInner>
+  );
+};