@ionic/react 8.2.7 → 8.2.8-dev.11723747334.19c4ecce

package/dist/index.js

@@ -40,7 +40,7 @@ import { defineCustomElement as defineCustomElement$y } from '@ionic/core/compon
 import { defineCustomElement as defineCustomElement$z } from '@ionic/core/components/ion-menu.js';
 import { defineCustomElement as defineCustomElement$A } from '@ionic/core/components/ion-menu-button.js';
 import { defineCustomElement as defineCustomElement$B } from '@ionic/core/components/ion-menu-toggle.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 { defineCustomElement as defineCustomElement$C } from '@ionic/core/components/ion-nav-link.js';
 import { defineCustomElement as defineCustomElement$D } from '@ionic/core/components/ion-note.js';
 import { defineCustomElement as defineCustomElement$E } from '@ionic/core/components/ion-picker.js';
@@ -85,11 +85,12 @@ import { defineCustomElement as defineCustomElement$17 } from '@ionic/core/compo
 import { defineCustomElement as defineCustomElement$18 } from '@ionic/core/components/ion-action-sheet.js';
 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 { 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({
@@ -1074,9 +1075,10 @@ const IonOverlayManager = ({ onAddOverlay, onRemoveOverlay }) => {
 
 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);
 
@@ -1239,7 +1241,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"]);
@@ -1610,6 +1612,7 @@ const IonTabs = /*@__PURE__*/ (() => class extends React.Component {
     render() {
         let outlet;
         let tabBar;
+        let hasIonTab = 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)
@@ -1625,6 +1628,13 @@ const IonTabs = /*@__PURE__*/ (() => class extends React.Component {
             else if (child.type === Fragment && child.props.children[0].type === IonRouterOutlet) {
                 outlet = child.props.children[0];
             }
+            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.
+                 */
+                hasIonTab = true;
+            }
             let childProps = {
                 ref: this.tabBarRef,
             };
@@ -1649,17 +1659,29 @@ const IonTabs = /*@__PURE__*/ (() => class extends React.Component {
                 tabBar = React.cloneElement(child.props.children[1], childProps);
             }
         });
-        if (!outlet) {
+        if (!outlet && !hasIonTab) {
             throw new Error('IonTabs must contain an IonRouterOutlet');
         }
+        if (outlet && hasIonTab) {
+            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 (hasIonTab) {
+            return React.createElement(IonTabsInner, Object.assign({}, this.props));
+        }
         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 (child.type === IonTabBar || child.type.isTabBar) {
+                    /**
+                     * The modified tabBar needs to be returned to include
+                     * the context and the overridden methods.
+                     */
+                    return tabBar;
+                }
+                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))));