@ionic/react 8.2.8 → 8.3.1-nightly.20240906

package/dist/index.js

@@ -39,7 +39,7 @@ import { IonMenuButton as IonMenuButton$1, defineCustomElement as defineCustomEl
 import { IonMenuToggle as IonMenuToggle$1, defineCustomElement as defineCustomElement$B } from '@ionic/core/components/ion-menu-toggle.js';
 import { IonMenu as IonMenu$1, defineCustomElement as defineCustomElement$z } from '@ionic/core/components/ion-menu.js';
 import { IonNavLink as IonNavLink$1, defineCustomElement as defineCustomElement$C } from '@ionic/core/components/ion-nav-link.js';
-import { defineCustomElement as defineCustomElement$1h } from '@ionic/core/components/ion-nav.js';
+import { defineCustomElement as defineCustomElement$1i } from '@ionic/core/components/ion-nav.js';
 import { IonNote as IonNote$1, defineCustomElement as defineCustomElement$D } from '@ionic/core/components/ion-note.js';
 import { IonPickerColumnOption as IonPickerColumnOption$1, defineCustomElement as defineCustomElement$G } from '@ionic/core/components/ion-picker-column-option.js';
 import { IonPickerColumn as IonPickerColumn$1, defineCustomElement as defineCustomElement$F } from '@ionic/core/components/ion-picker-column.js';
@@ -86,11 +86,12 @@ import { defineCustomElement as defineCustomElement$18 } from '@ionic/core/compo
 import { defineCustomElement as defineCustomElement$19 } from '@ionic/core/components/ion-modal.js';
 import { defineCustomElement as defineCustomElement$1a } from '@ionic/core/components/ion-popover.js';
 import ReactDOM, { createPortal } from 'react-dom';
-import { defineCustomElement as defineCustomElement$1g } from '@ionic/core/components/ion-app.js';
-import { defineCustomElement as defineCustomElement$1f } from '@ionic/core/components/ion-back-button.js';
+import { defineCustomElement as defineCustomElement$1h } from '@ionic/core/components/ion-app.js';
+import { defineCustomElement as defineCustomElement$1g } from '@ionic/core/components/ion-back-button.js';
 import { defineCustomElement as defineCustomElement$1c } from '@ionic/core/components/ion-router-outlet.js';
 import { defineCustomElement as defineCustomElement$1b } from '@ionic/core/components/ion-tab-bar.js';
 import { defineCustomElement as defineCustomElement$1e } from '@ionic/core/components/ion-tab-button.js';
+import { defineCustomElement as defineCustomElement$1f } from '@ionic/core/components/ion-tabs.js';
 import { defineCustomElement as defineCustomElement$1d } from 'ionicons/components/ion-icon.js';
 
 const IonLifeCycleContext = /*@__PURE__*/ React.createContext({
@@ -1541,9 +1542,10 @@ const createReactComponent = (tagName, ReactComponentContext, manipulatePropsFun
 
 const IonTabButtonInner = /*@__PURE__*/ createReactComponent('ion-tab-button', undefined, undefined, defineCustomElement$1e);
 const IonTabBarInner = /*@__PURE__*/ createReactComponent('ion-tab-bar', undefined, undefined, defineCustomElement$1b);
-const IonBackButtonInner = /*@__PURE__*/ createReactComponent('ion-back-button', undefined, undefined, defineCustomElement$1f);
+const IonTabsInner = /*@__PURE__*/ createReactComponent('ion-tabs', undefined, undefined, defineCustomElement$1f);
+const IonBackButtonInner = /*@__PURE__*/ createReactComponent('ion-back-button', undefined, undefined, defineCustomElement$1g);
 const IonRouterOutletInner = /*@__PURE__*/ createReactComponent('ion-router-outlet', undefined, undefined, defineCustomElement$1c);
-const IonAppInner = /*@__PURE__*/ createReactComponent('ion-app', undefined, undefined, defineCustomElement$1g);
+const IonAppInner = /*@__PURE__*/ createReactComponent('ion-app', undefined, undefined, defineCustomElement$1h);
 // ionicons
 const IonIconInner = /*@__PURE__*/ createReactComponent('ion-icon', undefined, undefined, defineCustomElement$1d);
 
@@ -1706,7 +1708,7 @@ const ReactDelegate = (addView, removeView) => {
     };
 };
 
-const IonNavInner = createReactComponent('ion-nav', undefined, undefined, defineCustomElement$1h);
+const IonNavInner = createReactComponent('ion-nav', undefined, undefined, defineCustomElement$1i);
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const IonNavInternal = (_a) => {
     var { children, forwardedRef } = _a, restOfProps = __rest(_a, ["children", "forwardedRef"]);
@@ -1961,9 +1963,15 @@ class IonTabBarUnwrapped extends React.PureComponent {
         };
     }
     onTabButtonClick(e, onClickFn) {
+        var _a;
         const tappedTab = this.state.tabs[e.detail.tab];
         const originalHref = tappedTab.originalHref;
-        const currentHref = e.detail.href;
+        /**
+         * If the router outlet is not defined, then the tabs is being used
+         * as a basic tab navigation without the router. In this case, we
+         * don't want to update the href else the URL will change.
+         */
+        const currentHref = ((_a = this.props.routerOutletRef) === null || _a === void 0 ? void 0 : _a.current) ? e.detail.href : '';
         const { activeTab: prevActiveTab } = this.state;
         if (onClickFn) {
             /**
@@ -2077,23 +2085,36 @@ const IonTabs = /*@__PURE__*/ (() => class extends React.Component {
     render() {
         let outlet;
         let tabBar;
+        // Check if IonTabs has any IonTab children
+        let hasTab = false;
         const _a = this.props, { className, onIonTabsDidChange, onIonTabsWillChange } = _a, props = __rest(_a, ["className", "onIonTabsDidChange", "onIonTabsWillChange"]);
         const children = typeof this.props.children === 'function'
             ? this.props.children(this.ionTabContextState)
             : this.props.children;
+        const outletProps = {
+            ref: this.routerOutletRef,
+        };
         React.Children.forEach(children, (child) => {
             // eslint-disable-next-line no-prototype-builtins
             if (child == null || typeof child !== 'object' || !child.hasOwnProperty('type')) {
                 return;
             }
             if (child.type === IonRouterOutlet || child.type.isRouterOutlet) {
-                outlet = React.cloneElement(child);
+                outlet = React.cloneElement(child, outletProps);
             }
             else if (child.type === Fragment && child.props.children[0].type === IonRouterOutlet) {
-                outlet = child.props.children[0];
+                outlet = React.cloneElement(child.props.children[0], outletProps);
+            }
+            else if (child.type === IonTab) {
+                /**
+                 * This indicates that IonTabs will be using a basic tab-based navigation
+                 * without the history stack or URL updates associated with the router.
+                 */
+                hasTab = true;
             }
             let childProps = {
                 ref: this.tabBarRef,
+                routerOutletRef: this.routerOutletRef,
             };
             /**
              * Only pass these props
@@ -2116,17 +2137,56 @@ const IonTabs = /*@__PURE__*/ (() => class extends React.Component {
                 tabBar = React.cloneElement(child.props.children[1], childProps);
             }
         });
-        if (!outlet) {
-            throw new Error('IonTabs must contain an IonRouterOutlet');
+        if (!outlet && !hasTab) {
+            throw new Error('IonTabs must contain an IonRouterOutlet or an IonTab');
+        }
+        if (outlet && hasTab) {
+            throw new Error('IonTabs cannot contain an IonRouterOutlet and an IonTab at the same time');
         }
         if (!tabBar) {
             throw new Error('IonTabs needs a IonTabBar');
         }
+        if (hasTab) {
+            return React.createElement(IonTabsInner, Object.assign({}, this.props));
+        }
+        /**
+         * TODO(ROU-11051)
+         *
+         * There is no error handling for the case where there
+         * is no associated Route for the given IonTabButton.
+         *
+         * More investigation is needed to determine how to
+         * handle this to prevent any overwriting of the
+         * IonTabButton's onClick handler and how the routing
+         * is handled.
+         */
         return (React.createElement(IonTabsContext.Provider, { value: this.ionTabContextState }, this.context.hasIonicRouter() ? (React.createElement(PageManager, Object.assign({ className: className ? `${className}` : '', routeInfo: this.context.routeInfo }, props),
-            React.createElement("ion-tabs", { className: "ion-tabs", style: hostStyles },
-                tabBar.props.slot === 'top' ? tabBar : null,
-                React.createElement("div", { style: tabsInner, className: "tabs-inner" }, outlet),
-                tabBar.props.slot === 'bottom' ? tabBar : null))) : (React.createElement("div", Object.assign({ className: className ? `${className}` : 'ion-tabs' }, props, { style: hostStyles }),
+            React.createElement(IonTabsInner, Object.assign({}, this.props), React.Children.map(children, (child) => {
+                if (React.isValidElement(child)) {
+                    const isTabBar = child.type === IonTabBar ||
+                        child.type.isTabBar ||
+                        (child.type === Fragment &&
+                            (child.props.children[1].type === IonTabBar || child.props.children[1].type.isTabBar));
+                    const isRouterOutlet = child.type === IonRouterOutlet ||
+                        child.type.isRouterOutlet ||
+                        (child.type === Fragment && child.props.children[0].type === IonRouterOutlet);
+                    if (isTabBar) {
+                        /**
+                         * The modified tabBar needs to be returned to include
+                         * the context and the overridden methods.
+                         */
+                        return tabBar;
+                    }
+                    if (isRouterOutlet) {
+                        /**
+                         * The modified outlet needs to be returned to include
+                         * the ref.
+                         */
+                        return outlet;
+                    }
+                }
+                return child;
+            })))) : (React.createElement("div", Object.assign({ className: className ? `${className}` : 'ion-tabs' }, props, { style: hostStyles }),
             tabBar.props.slot === 'top' ? tabBar : null,
             React.createElement("div", { style: tabsInner, className: "tabs-inner" }, outlet),
             tabBar.props.slot === 'bottom' ? tabBar : null))));