@ionic/react 8.3.2 → 8.3.3-dev.11728518847.1ef16a63

package/dist/index.js

@@ -1260,6 +1260,8 @@ const IonNav = createForwardRef(IonNavInternal, 'IonNav');
 const IonTabsContext = React.createContext({
     activeTab: undefined,
     selectTab: () => false,
+    hasRouterOutlet: false,
+    tabBarProps: { ref: React.createRef() },
 });
 
 const HTMLElementSSR = (typeof HTMLElement !== 'undefined' ? HTMLElement : class {
@@ -1347,6 +1349,133 @@ class IonRouterOutletContainer extends React.Component {
 }
 const IonRouterOutlet = createForwardRef(IonRouterOutletContainer, 'IonRouterOutlet');
 
+class IonTabsElement extends HTMLElementSSR {
+    constructor() {
+        super();
+    }
+}
+// TODO(FW-2959): types
+if (typeof window !== 'undefined' && window.customElements) {
+    const element = window.customElements.get('ion-tabs');
+    if (!element) {
+        window.customElements.define('ion-tabs', IonTabsElement);
+    }
+}
+const IonTabs = /*@__PURE__*/ (() => class extends React.Component {
+    constructor(props) {
+        super(props);
+        this.tabBarRef = React.createRef();
+        this.ionTabContextState = {
+            activeTab: undefined,
+            selectTab: () => false,
+            hasRouterOutlet: false,
+            /**
+             * Tab bar can be used as a standalone component,
+             * so the props can not be passed directly to the
+             * tab bar component. Instead, props will be
+             * passed through the context.
+             */
+            tabBarProps: { ref: this.tabBarRef },
+        };
+    }
+    componentDidMount() {
+        if (this.tabBarRef.current) {
+            // Grab initial value
+            this.ionTabContextState.activeTab = this.tabBarRef.current.state.activeTab;
+            // Override method
+            this.tabBarRef.current.setActiveTabOnContext = (tab) => {
+                this.ionTabContextState.activeTab = tab;
+            };
+            this.ionTabContextState.selectTab = this.tabBarRef.current.selectTab;
+        }
+    }
+    renderTabsInner(children, outlet) {
+        return (React.createElement(IonTabsInner, Object.assign({}, this.props), React.Children.map(children, (child) => {
+            if (React.isValidElement(child)) {
+                const isRouterOutlet = child.type === IonRouterOutlet ||
+                    child.type.isRouterOutlet ||
+                    (child.type === Fragment && child.props.children[0].type === IonRouterOutlet);
+                if (isRouterOutlet) {
+                    /**
+                     * The modified outlet needs to be returned to include
+                     * the ref.
+                     */
+                    return outlet;
+                }
+            }
+            return child;
+        })));
+    }
+    render() {
+        let outlet;
+        // 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;
+        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);
+            }
+            else if (child.type === Fragment && child.props.children[0].type === IonRouterOutlet) {
+                outlet = React.cloneElement(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.
+                 */
+                hasTab = true;
+            }
+            this.ionTabContextState.hasRouterOutlet = !!outlet;
+            let childProps = Object.assign({}, this.ionTabContextState.tabBarProps);
+            /**
+             * Only pass these props
+             * down from IonTabs to IonTabBar
+             * if they are defined, otherwise
+             * if you have a handler set on
+             * IonTabBar it will be overridden.
+             */
+            if (onIonTabsDidChange !== undefined) {
+                childProps = Object.assign(Object.assign({}, childProps), { onIonTabsDidChange });
+            }
+            if (onIonTabsWillChange !== undefined) {
+                childProps = Object.assign(Object.assign({}, childProps), { onIonTabsWillChange });
+            }
+            this.ionTabContextState.tabBarProps = 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 (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), this.renderTabsInner(children, outlet))) : (this.renderTabsInner(children, outlet))));
+    }
+    static get contextType() {
+        return NavContext;
+    }
+})();
+
 const IonTabButton = /*@__PURE__*/ (() => class extends React.Component {
     constructor(props) {
         super(props);
@@ -1496,15 +1625,16 @@ class IonTabBarUnwrapped extends React.PureComponent {
         };
     }
     onTabButtonClick(e, onClickFn) {
-        var _a, _b;
+        var _a;
         const tappedTab = this.state.tabs[e.detail.tab];
         const originalHref = tappedTab.originalHref;
+        const hasRouterOutlet = (_a = this.props.tabsContext) === null || _a === void 0 ? void 0 : _a.hasRouterOutlet;
         /**
          * 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 currentHref = hasRouterOutlet ? e.detail.href : '';
         const { activeTab: prevActiveTab } = this.state;
         if (onClickFn) {
             /**
@@ -1527,7 +1657,7 @@ class IonTabBarUnwrapped extends React.PureComponent {
             if (this.props.onIonTabsDidChange) {
                 this.props.onIonTabsDidChange(new CustomEvent('ionTabDidChange', { detail: { tab: e.detail.tab } }));
             }
-            if ((_b = this.props.routerOutletRef) === null || _b === void 0 ? void 0 : _b.current) {
+            if (hasRouterOutlet) {
                 this.setActiveTabOnContext(e.detail.tab);
                 this.context.changeTab(e.detail.tab, currentHref, e.detail.routeOptions);
             }
@@ -1563,170 +1693,19 @@ class IonTabBarUnwrapped extends React.PureComponent {
 const IonTabBarContainer = React.memo((_a) => {
     var { forwardedRef } = _a, props = __rest(_a, ["forwardedRef"]);
     const context = useContext(NavContext);
-    return (React.createElement(IonTabBarUnwrapped, Object.assign({ ref: forwardedRef }, props, { routeInfo: props.routeInfo || context.routeInfo || { pathname: window.location.pathname }, onSetCurrentTab: context.setCurrentTab }), props.children));
-});
-const IonTabBar = createForwardRef(IonTabBarContainer, 'IonTabBar');
-
-class IonTabsElement extends HTMLElementSSR {
-    constructor() {
-        super();
-    }
-}
-// TODO(FW-2959): types
-if (typeof window !== 'undefined' && window.customElements) {
-    const element = window.customElements.get('ion-tabs');
-    if (!element) {
-        window.customElements.define('ion-tabs', IonTabsElement);
-    }
-}
-const hostStyles = {
-    display: 'flex',
-    position: 'absolute',
-    top: '0',
-    left: '0',
-    right: '0',
-    bottom: '0',
-    flexDirection: 'column',
-    width: '100%',
-    height: '100%',
-    contain: 'layout size style',
-};
-const tabsInner = {
-    position: 'relative',
-    flex: 1,
-    contain: 'layout size style',
-};
-const IonTabs = /*@__PURE__*/ (() => class extends React.Component {
-    constructor(props) {
-        super(props);
-        this.routerOutletRef = React.createRef();
-        this.tabBarRef = React.createRef();
-        this.ionTabContextState = {
-            activeTab: undefined,
-            selectTab: () => false,
-        };
-    }
-    componentDidMount() {
-        if (this.tabBarRef.current) {
-            // Grab initial value
-            this.ionTabContextState.activeTab = this.tabBarRef.current.state.activeTab;
-            // Override method
-            this.tabBarRef.current.setActiveTabOnContext = (tab) => {
-                this.ionTabContextState.activeTab = tab;
-            };
-            this.ionTabContextState.selectTab = this.tabBarRef.current.selectTab;
-        }
-    }
-    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);
-            }
-            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;
-            }
-            let childProps = {
-                ref: this.tabBarRef,
-                routerOutletRef: this.routerOutletRef,
-            };
-            /**
-             * Only pass these props
-             * down from IonTabs to IonTabBar
-             * if they are defined, otherwise
-             * if you have a handler set on
-             * IonTabBar it will be overridden.
-             */
-            if (onIonTabsDidChange !== undefined) {
-                childProps = Object.assign(Object.assign({}, childProps), { onIonTabsDidChange });
-            }
-            if (onIonTabsWillChange !== undefined) {
-                childProps = Object.assign(Object.assign({}, childProps), { onIonTabsWillChange });
-            }
-            if (child.type === IonTabBar || child.type.isTabBar) {
-                tabBar = React.cloneElement(child, childProps);
-            }
-            else if (child.type === Fragment &&
-                (child.props.children[1].type === IonTabBar || child.props.children[1].type.isTabBar)) {
-                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 (hasTab) {
-            return React.createElement(IonTabsInner, Object.assign({}, this.props));
-        }
+    const tabsContext = useContext(IonTabsContext);
+    const tabBarRef = forwardedRef || tabsContext.tabBarProps.ref;
+    const updatedTabBarProps = Object.assign(Object.assign({}, tabsContext.tabBarProps), { ref: tabBarRef });
+    return (React.createElement(IonTabBarUnwrapped, Object.assign({ ref: tabBarRef }, props, { routeInfo: props.routeInfo || context.routeInfo || { pathname: window.location.pathname }, onSetCurrentTab: context.setCurrentTab, 
         /**
-         * 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.
+         * Tab bar can be used as a standalone component,
+         * so it cannot be modified directly through
+         * IonTabs. Instead, props will be passed through
+         * the context.
          */
-        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 }),
-            (tabBar === null || tabBar === void 0 ? void 0 : tabBar.props.slot) === 'top' ? tabBar : null,
-            React.createElement("div", { style: tabsInner, className: "tabs-inner" }, outlet),
-            (tabBar === null || tabBar === void 0 ? void 0 : tabBar.props.slot) === 'bottom' ? tabBar : null))));
-    }
-    static get contextType() {
-        return NavContext;
-    }
-})();
+        tabsContext: Object.assign(Object.assign({}, tabsContext), { tabBarProps: updatedTabBarProps }) }), props.children));
+});
+const IonTabBar = createForwardRef(IonTabBarContainer, 'IonTabBar');
 
 const IonBackButton = /*@__PURE__*/ (() => class extends React.Component {
     constructor() {