@ionic/react 8.2.8-dev.11724280606.1a8c11d4 → 8.2.8-dev.11724359497.19f21e81

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$1i } from '@ionic/core/components/ion-nav.js';
+import { defineCustomElement as defineCustomElement$1h } 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,12 +85,11 @@ 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$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$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$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({
@@ -1075,10 +1074,9 @@ 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 IonTabsInner = /*@__PURE__*/ createReactComponent('ion-tabs', undefined, undefined, defineCustomElement$1f);
-const IonBackButtonInner = /*@__PURE__*/ createReactComponent('ion-back-button', undefined, undefined, defineCustomElement$1g);
+const IonBackButtonInner = /*@__PURE__*/ createReactComponent('ion-back-button', undefined, undefined, defineCustomElement$1f);
 const IonRouterOutletInner = /*@__PURE__*/ createReactComponent('ion-router-outlet', undefined, undefined, defineCustomElement$1c);
-const IonAppInner = /*@__PURE__*/ createReactComponent('ion-app', undefined, undefined, defineCustomElement$1h);
+const IonAppInner = /*@__PURE__*/ createReactComponent('ion-app', undefined, undefined, defineCustomElement$1g);
 // ionicons
 const IonIconInner = /*@__PURE__*/ createReactComponent('ion-icon', undefined, undefined, defineCustomElement$1d);
 
@@ -1241,7 +1239,7 @@ const ReactDelegate = (addView, removeView) => {
     };
 };
 
-const IonNavInner = createReactComponent('ion-nav', undefined, undefined, defineCustomElement$1i);
+const IonNavInner = createReactComponent('ion-nav', undefined, undefined, defineCustomElement$1h);
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const IonNavInternal = (_a) => {
     var { children, forwardedRef } = _a, restOfProps = __rest(_a, ["children", "forwardedRef"]);
@@ -1496,10 +1494,9 @@ class IonTabBarUnwrapped extends React.PureComponent {
         };
     }
     onTabButtonClick(e, onClickFn) {
-        var _a;
         const tappedTab = this.state.tabs[e.detail.tab];
         const originalHref = tappedTab.originalHref;
-        const currentHref = ((_a = this.props.routerOutletRef) === null || _a === void 0 ? void 0 : _a.current) ? e.detail.href : '';
+        const currentHref = e.detail.href;
         const { activeTab: prevActiveTab } = this.state;
         if (onClickFn) {
             /**
@@ -1613,36 +1610,23 @@ 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, outletProps);
+                outlet = React.cloneElement(child);
             }
             else if (child.type === Fragment && child.props.children[0].type === IonRouterOutlet) {
-                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;
+                outlet = child.props.children[0];
             }
             let childProps = {
                 ref: this.tabBarRef,
-                routerOutletRef: this.routerOutletRef,
             };
             /**
              * Only pass these props
@@ -1665,56 +1649,17 @@ const IonTabs = /*@__PURE__*/ (() => class extends React.Component {
                 tabBar = React.cloneElement(child.props.children[1], childProps);
             }
         });
-        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 (!outlet) {
+            throw new Error('IonTabs must contain an IonRouterOutlet');
         }
         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(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 }),
+            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 }),
             tabBar.props.slot === 'top' ? tabBar : null,
             React.createElement("div", { style: tabsInner, className: "tabs-inner" }, outlet),
             tabBar.props.slot === 'bottom' ? tabBar : null))));