@ionic/react 8.4.5 → 8.5.0

package/dist/index.js

@@ -1,7 +1,7 @@
-import React, { useContext, useRef, useEffect, createElement, useState, useMemo, Fragment, useCallback } from 'react';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import React, { useContext, useRef, useEffect, createElement, useState, useMemo, Fragment as Fragment$1, useCallback } from 'react';
 import { isPlatform as isPlatform$1, getPlatforms as getPlatforms$1, componentOnReady, createAnimation, actionSheetController, alertController, toastController, modalController, popoverController, pickerController, loadingController, initialize } from '@ionic/core/components';
 export { IonicSafeString, IonicSlides, createAnimation, createGesture, getIonPageElement, getTimeGivenProgression, iosTransitionAnimation, mdTransitionAnimation, openURL } from '@ionic/core/components';
-import { __rest } from 'tslib';
 import ReactDOM, { createPortal } from 'react-dom';
 import { defineCustomElement as defineCustomElement$1 } from '@ionic/core/components/ion-accordion.js';
 import { defineCustomElement as defineCustomElement$2 } from '@ionic/core/components/ion-accordion-group.js';
@@ -88,13 +88,13 @@ import { defineCustomElement as defineCustomElement$1a } from '@ionic/core/compo
 import { defineCustomElement as defineCustomElement$1b } from '@ionic/core/components/ion-action-sheet.js';
 import { defineCustomElement as defineCustomElement$1c } from '@ionic/core/components/ion-modal.js';
 import { defineCustomElement as defineCustomElement$1d } from '@ionic/core/components/ion-popover.js';
-import { defineCustomElement as defineCustomElement$1k } from '@ionic/core/components/ion-app.js';
-import { defineCustomElement as defineCustomElement$1j } from '@ionic/core/components/ion-back-button.js';
-import { defineCustomElement as defineCustomElement$1f } from '@ionic/core/components/ion-router-outlet.js';
-import { defineCustomElement as defineCustomElement$1e } from '@ionic/core/components/ion-tab-bar.js';
-import { defineCustomElement as defineCustomElement$1h } from '@ionic/core/components/ion-tab-button.js';
-import { defineCustomElement as defineCustomElement$1i } from '@ionic/core/components/ion-tabs.js';
-import { defineCustomElement as defineCustomElement$1g } from 'ionicons/components/ion-icon.js';
+import { defineCustomElement as defineCustomElement$1j } from '@ionic/core/components/ion-app.js';
+import { defineCustomElement as defineCustomElement$1h } from '@ionic/core/components/ion-back-button.js';
+import { defineCustomElement as defineCustomElement$1i } from '@ionic/core/components/ion-router-outlet.js';
+import { defineCustomElement as defineCustomElement$1f } 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$1g } from '@ionic/core/components/ion-tabs.js';
+import { defineCustomElement as defineCustomElement$1k } from 'ionicons/components/ion-icon.js';
 
 const IonLifeCycleContext = /*@__PURE__*/ React.createContext({
     onIonViewWillEnter: () => {
@@ -321,10 +321,10 @@ const withIonLifeCycle = (WrappedComponent) => {
             });
         }
         render() {
-            return (React.createElement(IonLifeCycleContext.Consumer, null, (context) => {
-                this.context = context;
-                return React.createElement(WrappedComponent, Object.assign({ ref: this.componentRef }, this.props));
-            }));
+            return (jsx(IonLifeCycleContext.Consumer, { children: (context) => {
+                    this.context = context;
+                    return jsx(WrappedComponent, { ref: this.componentRef, ...this.props });
+                } }));
         }
     };
 };
@@ -545,7 +545,7 @@ const mergeRefs = (...refs) => {
 };
 const createForwardRef$1 = (ReactComponent, displayName) => {
     const forwardRef = (props, ref) => {
-        return React.createElement(ReactComponent, Object.assign({}, props, { forwardedRef: ref }));
+        return jsx(ReactComponent, { ...props, forwardedRef: ref });
     };
     forwardRef.displayName = displayName;
     return React.forwardRef(forwardRef);
@@ -575,7 +575,7 @@ const createReactComponent = (tagName, ReactComponentContext, manipulatePropsFun
             attachProps(this.componentEl, this.props, prevProps);
         }
         render() {
-            const _a = this.props, { children, forwardedRef, style, className, ref } = _a, cProps = __rest(_a, ["children", "forwardedRef", "style", "className", "ref"]);
+            const { children, forwardedRef, style, className, ref, ...cProps } = this.props;
             let propsToPass = Object.keys(cProps).reduce((acc, name) => {
                 const value = cProps[name];
                 if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
@@ -597,7 +597,11 @@ const createReactComponent = (tagName, ReactComponentContext, manipulatePropsFun
             if (manipulatePropsFunction) {
                 propsToPass = manipulatePropsFunction(this.props, propsToPass);
             }
-            const newProps = Object.assign(Object.assign({}, propsToPass), { ref: mergeRefs(forwardedRef, this.setComponentElRef), style });
+            const newProps = {
+                ...propsToPass,
+                ref: mergeRefs(forwardedRef, this.setComponentElRef),
+                style,
+            };
             /**
              * We use createElement here instead of
              * React.createElement to work around a
@@ -695,7 +699,7 @@ const IonToolbar = /*@__PURE__*/ createReactComponent('ion-toolbar', undefined,
 const createForwardRef = (ReactComponent, // TODO(FW-2959): type
 displayName) => {
     const forwardRef = (props, ref) => {
-        return React.createElement(ReactComponent, Object.assign({}, props, { forwardedRef: ref }));
+        return jsx(ReactComponent, { ...props, forwardedRef: ref });
     };
     forwardRef.displayName = displayName;
     return React.forwardRef(forwardRef);
@@ -743,7 +747,7 @@ const createRoutingComponent = (tagName, customElement) => {
         }
         render() {
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const _a = this.props, { children, forwardedRef, style, className, ref } = _a, cProps = __rest(_a, ["children", "forwardedRef", "style", "className", "ref"]);
+            const { children, forwardedRef, style, className, ref, ...cProps } = this.props;
             const propsToPass = Object.keys(cProps).reduce((acc, name) => {
                 if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
                     const eventName = name.substring(2).toLowerCase();
@@ -756,7 +760,11 @@ const createRoutingComponent = (tagName, customElement) => {
                 }
                 return acc;
             }, {});
-            const newProps = Object.assign(Object.assign({}, propsToPass), { ref: this.stableMergedRefs, style });
+            const newProps = {
+                ...propsToPass,
+                ref: this.stableMergedRefs,
+                style,
+            };
             if (this.props.routerLink && !this.props.href) {
                 newProps.href = this.props.routerLink;
             }
@@ -882,11 +890,10 @@ const createInlineOverlayComponent = (tagName, defineCustomElement, hasDelegateH
             this.wrapperRef = React.createRef();
         }
         componentDidMount() {
-            var _a, _b, _c;
             this.componentDidUpdate(this.props);
-            (_a = this.ref.current) === null || _a === void 0 ? void 0 : _a.addEventListener('ionMount', this.handleIonMount);
-            (_b = this.ref.current) === null || _b === void 0 ? void 0 : _b.addEventListener('willPresent', this.handleWillPresent);
-            (_c = this.ref.current) === null || _c === void 0 ? void 0 : _c.addEventListener('didDismiss', this.handleDidDismiss);
+            this.ref.current?.addEventListener('ionMount', this.handleIonMount);
+            this.ref.current?.addEventListener('willPresent', this.handleWillPresent);
+            this.ref.current?.addEventListener('didDismiss', this.handleDidDismiss);
         }
         componentDidUpdate(prevProps) {
             const node = this.ref.current;
@@ -896,7 +903,7 @@ const createInlineOverlayComponent = (tagName, defineCustomElement, hasDelegateH
              * so they don't get attached twice and called twice.
              */
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const _a = this.props, cProps = __rest(_a, ["onDidDismiss", "onWillPresent"]);
+            const { onDidDismiss, onWillPresent, ...cProps } = this.props;
             attachProps(node, cProps, prevProps);
         }
         componentWillUnmount() {
@@ -929,7 +936,7 @@ const createInlineOverlayComponent = (tagName, defineCustomElement, hasDelegateH
         }
         render() {
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const _a = this.props, { children, forwardedRef, style, className, ref } = _a, cProps = __rest(_a, ["children", "forwardedRef", "style", "className", "ref"]);
+            const { children, forwardedRef, style, className, ref, ...cProps } = this.props;
             const propsToPass = Object.keys(cProps).reduce((acc, name) => {
                 if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
                     const eventName = name.substring(2).toLowerCase();
@@ -942,7 +949,11 @@ const createInlineOverlayComponent = (tagName, defineCustomElement, hasDelegateH
                 }
                 return acc;
             }, {});
-            const newProps = Object.assign(Object.assign({}, propsToPass), { ref: this.stableMergedRefs, style });
+            const newProps = {
+                ...propsToPass,
+                ref: this.stableMergedRefs,
+                style,
+            };
             /**
              * Some overlays need `.ion-page` so content
              * takes up the full size of the parent overlay.
@@ -1027,7 +1038,7 @@ const IonOverlayManager = ({ onAddOverlay, onRemoveOverlay }) => {
         onRemoveOverlay(removeOverlay);
     }, []);
     const addOverlay = (id, component, containerElement) => {
-        const newOverlays = Object.assign({}, overlaysRef.current);
+        const newOverlays = { ...overlaysRef.current };
         newOverlays[id] = { component, containerElement };
         /**
          * In order for this function to use the latest data
@@ -1050,7 +1061,7 @@ const IonOverlayManager = ({ onAddOverlay, onRemoveOverlay }) => {
         setOverlays(newOverlays);
     };
     const removeOverlay = (id) => {
-        const newOverlays = Object.assign({}, overlaysRef.current);
+        const newOverlays = { ...overlaysRef.current };
         delete newOverlays[id];
         /**
          * In order for this function to use the latest data
@@ -1073,27 +1084,24 @@ const IonOverlayManager = ({ onAddOverlay, onRemoveOverlay }) => {
         setOverlays(newOverlays);
     };
     const overlayKeys = Object.keys(overlays);
-    return (React.createElement(React.Fragment, null, overlayKeys.map((key) => {
-        const overlay = overlays[key];
-        return ReactDOM.createPortal(overlay.component, overlay.containerElement, `overlay-${key}`);
-    })));
+    return (jsx(Fragment, { children: overlayKeys.map((key) => {
+            const overlay = overlays[key];
+            return ReactDOM.createPortal(overlay.component, overlay.containerElement, `overlay-${key}`);
+        }) }));
 };
 
-const IonTabButtonInner = /*@__PURE__*/ createReactComponent('ion-tab-button', undefined, undefined, defineCustomElement$1h);
-const IonTabBarInner = /*@__PURE__*/ createReactComponent('ion-tab-bar', undefined, undefined, defineCustomElement$1e);
-const IonTabsInner = /*@__PURE__*/ createReactComponent('ion-tabs', undefined, undefined, defineCustomElement$1i);
-const IonBackButtonInner = /*@__PURE__*/ createReactComponent('ion-back-button', undefined, undefined, defineCustomElement$1j);
-const IonRouterOutletInner = /*@__PURE__*/ createReactComponent('ion-router-outlet', undefined, undefined, defineCustomElement$1f);
-const IonAppInner = /*@__PURE__*/ createReactComponent('ion-app', undefined, undefined, defineCustomElement$1k);
+const IonTabButtonInner = /*@__PURE__*/ createReactComponent('ion-tab-button', undefined, undefined, defineCustomElement$1e);
+const IonTabBarInner = /*@__PURE__*/ createReactComponent('ion-tab-bar', undefined, undefined, defineCustomElement$1f);
+const IonTabsInner = /*@__PURE__*/ createReactComponent('ion-tabs', undefined, undefined, defineCustomElement$1g);
+const IonBackButtonInner = /*@__PURE__*/ createReactComponent('ion-back-button', undefined, undefined, defineCustomElement$1h);
+const IonRouterOutletInner = /*@__PURE__*/ createReactComponent('ion-router-outlet', undefined, undefined, defineCustomElement$1i);
+const IonAppInner = /*@__PURE__*/ createReactComponent('ion-app', undefined, undefined, defineCustomElement$1j);
 // ionicons
-const IonIconInner = /*@__PURE__*/ createReactComponent('ion-icon', undefined, undefined, defineCustomElement$1g);
+const IonIconInner = /*@__PURE__*/ createReactComponent('ion-icon', undefined, undefined, defineCustomElement$1k);
 
-const IonApp = /*@__PURE__*/ (() => class extends React.Component {
+class IonApp extends React.Component {
     constructor(props) {
         super(props);
-        /*
-          Wire up methods to call into IonOverlayManager
-        */
         this.ionContext = {
             addOverlay: (id, overlay, containerElement) => {
                 if (this.addOverlayCallback) {
@@ -1108,18 +1116,14 @@ const IonApp = /*@__PURE__*/ (() => class extends React.Component {
         };
     }
     render() {
-        return (React.createElement(IonContext.Provider, { value: this.ionContext },
-            React.createElement(IonAppInner, Object.assign({}, this.props), this.props.children),
-            React.createElement(IonOverlayManager, { onAddOverlay: (callback) => {
-                    this.addOverlayCallback = callback;
-                }, onRemoveOverlay: (callback) => {
-                    this.removeOverlayCallback = callback;
-                } })));
+        return (jsxs(IonContext.Provider, { value: this.ionContext, children: [jsx(IonAppInner, { ...this.props, children: this.props.children }), jsx(IonOverlayManager, { onAddOverlay: (callback) => {
+                        this.addOverlayCallback = callback;
+                    }, onRemoveOverlay: (callback) => {
+                        this.removeOverlayCallback = callback;
+                    } })] }));
     }
-    static get displayName() {
-        return 'IonApp';
-    }
-})();
+}
+IonApp.displayName = 'IonApp';
 
 const StackContext = React.createContext({
     registerIonPage: () => undefined,
@@ -1183,11 +1187,11 @@ class PageManager extends React.PureComponent {
     }
     render() {
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        const _a = this.props, { className, children, routeInfo, forwardedRef } = _a, props = __rest(_a, ["className", "children", "routeInfo", "forwardedRef"]);
-        return (React.createElement(IonLifeCycleContext.Consumer, null, (context) => {
-            this.ionLifeCycleContext = context;
-            return (React.createElement("div", Object.assign({ className: className ? `${className} ion-page` : `ion-page`, ref: this.stableMergedRefs }, props), children));
-        }));
+        const { className, children, routeInfo, forwardedRef, ...props } = this.props;
+        return (jsx(IonLifeCycleContext.Consumer, { children: (context) => {
+                this.ionLifeCycleContext = context;
+                return (jsx("div", { className: className ? `${className} ion-page` : `ion-page`, ref: this.stableMergedRefs, ...props, children: children }));
+            } }));
     }
     static get contextType() {
         return StackContext;
@@ -1199,8 +1203,8 @@ class IonPageInternal extends React.Component {
         super(props);
     }
     render() {
-        const _a = this.props, { className, children, forwardedRef } = _a, props = __rest(_a, ["className", "children", "forwardedRef"]);
-        return this.context.hasIonicRouter() ? (React.createElement(PageManager, Object.assign({ className: className ? `${className}` : '', routeInfo: this.context.routeInfo, forwardedRef: forwardedRef }, props), children)) : (React.createElement("div", Object.assign({ className: className ? `ion-page ${className}` : 'ion-page', ref: forwardedRef }, props), children));
+        const { className, children, forwardedRef, ...props } = this.props;
+        return this.context.hasIonicRouter() ? (jsx(PageManager, { className: className ? `${className}` : '', routeInfo: this.context.routeInfo, forwardedRef: forwardedRef, ...props, children: children })) : (jsx("div", { className: className ? `ion-page ${className}` : 'ion-page', ref: forwardedRef, ...props, children: children }));
     }
     static get displayName() {
         return 'IonPage';
@@ -1213,8 +1217,7 @@ const IonPage = createForwardRef(IonPageInternal, 'IonPage');
 
 const ids = { main: 0 };
 const generateId = (type = 'main') => {
-    var _a;
-    const id = ((_a = ids[type]) !== null && _a !== void 0 ? _a : 0) + 1;
+    const id = (ids[type] ?? 0) + 1;
     ids[type] = id;
     return id.toString();
 };
@@ -1249,8 +1252,7 @@ const ReactDelegate = (addView, removeView) => {
 
 const IonNavInner = createReactComponent('ion-nav', undefined, undefined, defineCustomElement$1l);
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-const IonNavInternal = (_a) => {
-    var { children, forwardedRef } = _a, restOfProps = __rest(_a, ["children", "forwardedRef"]);
+const IonNavInternal = ({ children, forwardedRef, ...restOfProps }) => {
     const [views, setViews] = useState([]);
     /**
      * Allows us to create React components that are rendered within
@@ -1259,7 +1261,7 @@ const IonNavInternal = (_a) => {
     const addView = (view) => setViews((existingViews) => [...existingViews, view]);
     const removeView = (view) => setViews((existingViews) => existingViews.filter((v) => v !== view));
     const delegate = useMemo(() => ReactDelegate(addView, removeView), []);
-    return (React.createElement(IonNavInner, Object.assign({ delegate: delegate, ref: forwardedRef }, restOfProps), views));
+    return (jsx(IonNavInner, { delegate: delegate, ref: forwardedRef, ...restOfProps, children: views }));
 };
 const IonNav = createForwardRef(IonNavInternal, 'IonNav');
 
@@ -1327,12 +1329,11 @@ class OutletPageManager extends React.Component {
         this.ionLifeCycleContext.ionViewDidLeave();
     }
     render() {
-        const _a = this.props, { StackManager, children, routeInfo } = _a, props = __rest(_a, ["StackManager", "children", "routeInfo"]);
-        return (React.createElement(IonLifeCycleContext.Consumer, null, (context) => {
-            this.ionLifeCycleContext = context;
-            return (React.createElement(StackManager, { routeInfo: routeInfo },
-                React.createElement(IonRouterOutletInner, Object.assign({ setRef: (val) => (this.ionRouterOutlet = val) }, props), children)));
-        }));
+        const { StackManager, children, routeInfo, ...props } = this.props;
+        return (jsx(IonLifeCycleContext.Consumer, { children: (context) => {
+                this.ionLifeCycleContext = context;
+                return (jsx(StackManager, { routeInfo: routeInfo, children: jsx(IonRouterOutletInner, { setRef: (val) => (this.ionRouterOutlet = val), ...props, children: children }) }));
+            } }));
     }
     static get contextType() {
         return StackContext;
@@ -1345,9 +1346,8 @@ class IonRouterOutletContainer extends React.Component {
     }
     render() {
         const StackManager = this.context.getStackManager();
-        const _a = this.props, { children, forwardedRef } = _a, props = __rest(_a, ["children", "forwardedRef"]);
-        return this.context.hasIonicRouter() ? (props.ionPage ? (React.createElement(OutletPageManager, Object.assign({ StackManager: StackManager, routeInfo: this.context.routeInfo }, props), children)) : (React.createElement(StackManager, { routeInfo: this.context.routeInfo },
-            React.createElement(IonRouterOutletInner, Object.assign({}, props, { forwardedRef: forwardedRef }), children)))) : (React.createElement(IonRouterOutletInner, Object.assign({ ref: forwardedRef }, this.props), this.props.children));
+        const { children, forwardedRef, ...props } = this.props;
+        return this.context.hasIonicRouter() ? (props.ionPage ? (jsx(OutletPageManager, { StackManager: StackManager, routeInfo: this.context.routeInfo, ...props, children: children })) : (jsx(StackManager, { routeInfo: this.context.routeInfo, children: jsx(IonRouterOutletInner, { ...props, forwardedRef: forwardedRef, children: children }) }))) : (jsx(IonRouterOutletInner, { ref: forwardedRef, ...this.props, children: this.props.children }));
     }
     static get contextType() {
         return NavContext;
@@ -1367,7 +1367,10 @@ if (typeof window !== 'undefined' && window.customElements) {
         window.customElements.define('ion-tabs', IonTabsElement);
     }
 }
-const IonTabs = /*@__PURE__*/ (() => class extends React.Component {
+class IonTabs extends React.Component {
+    shouldComponentUpdate() {
+        return true;
+    }
     constructor(props) {
         super(props);
         /**
@@ -1403,27 +1406,27 @@ const IonTabs = /*@__PURE__*/ (() => class extends React.Component {
         }
     }
     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 (jsx(IonTabsInner, { ...this.props, children: React.Children.map(children, (child) => {
+                if (React.isValidElement(child)) {
+                    const isRouterOutlet = child.type === IonRouterOutlet ||
+                        child.type.isRouterOutlet ||
+                        (child.type === Fragment$1 && child.props.children[0].type === IonRouterOutlet);
+                    if (isRouterOutlet) {
+                        /**
+                         * The modified outlet needs to be returned to include
+                         * the ref.
+                         */
+                        return outlet;
+                    }
                 }
-            }
-            return child;
-        })));
+                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 { className, onIonTabsDidChange, onIonTabsWillChange, ...props } = this.props;
         const children = typeof this.props.children === 'function'
             ? this.props.children(this.ionTabContextState)
             : this.props.children;
@@ -1435,7 +1438,7 @@ const IonTabs = /*@__PURE__*/ (() => class extends React.Component {
             if (child.type === IonRouterOutlet || child.type.isRouterOutlet) {
                 outlet = React.cloneElement(child);
             }
-            else if (child.type === Fragment && child.props.children[0].type === IonRouterOutlet) {
+            else if (child.type === Fragment$1 && child.props.children[0].type === IonRouterOutlet) {
                 outlet = React.cloneElement(child.props.children[0]);
             }
             else if (child.type === IonTab) {
@@ -1446,7 +1449,9 @@ const IonTabs = /*@__PURE__*/ (() => class extends React.Component {
                 hasTab = true;
             }
             this.ionTabContextState.hasRouterOutlet = !!outlet;
-            let childProps = Object.assign({}, this.ionTabContextState.tabBarProps);
+            let childProps = {
+                ...this.ionTabContextState.tabBarProps,
+            };
             /**
              * Only pass these props
              * down from IonTabs to IonTabBar
@@ -1455,10 +1460,16 @@ const IonTabs = /*@__PURE__*/ (() => class extends React.Component {
              * IonTabBar it will be overridden.
              */
             if (onIonTabsDidChange !== undefined) {
-                childProps = Object.assign(Object.assign({}, childProps), { onIonTabsDidChange });
+                childProps = {
+                    ...childProps,
+                    onIonTabsDidChange,
+                };
             }
             if (onIonTabsWillChange !== undefined) {
-                childProps = Object.assign(Object.assign({}, childProps), { onIonTabsWillChange });
+                childProps = {
+                    ...childProps,
+                    onIonTabsWillChange,
+                };
             }
             this.ionTabContextState.tabBarProps = childProps;
         });
@@ -1469,7 +1480,7 @@ const IonTabs = /*@__PURE__*/ (() => class extends React.Component {
             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));
+            return jsx(IonTabsInner, { ...this.props });
         }
         /**
          * TODO(ROU-11051)
@@ -1482,14 +1493,17 @@ const IonTabs = /*@__PURE__*/ (() => class extends React.Component {
          * 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))));
+        return (jsx(IonTabsContext.Provider, { value: this.ionTabContextState, children: this.context.hasIonicRouter() ? (jsx(PageManager, { className: className ? `${className}` : '', routeInfo: this.context.routeInfo, ...props, children: this.renderTabsInner(children, outlet) })) : (this.renderTabsInner(children, outlet)) }));
     }
     static get contextType() {
         return NavContext;
     }
-})();
+}
 
-const IonTabButton = /*@__PURE__*/ (() => class extends React.Component {
+class IonTabButton extends React.Component {
+    shouldComponentUpdate() {
+        return true;
+    }
     constructor(props) {
         super(props);
         this.handleIonTabButtonClick = this.handleIonTabButtonClick.bind(this);
@@ -1512,13 +1526,13 @@ const IonTabButton = /*@__PURE__*/ (() => class extends React.Component {
          * component would result in duplicate handler calls.
          */
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        const _a = this.props, rest = __rest(_a, ["onClick"]);
-        return React.createElement(IonTabButtonInner, Object.assign({ onIonTabButtonClick: this.handleIonTabButtonClick }, rest));
+        const { onClick, ...rest } = this.props;
+        return jsx(IonTabButtonInner, { onIonTabButtonClick: this.handleIonTabButtonClick, ...rest });
     }
     static get displayName() {
         return 'IonTabButton';
     }
-})();
+}
 
 // TODO(FW-2959): types
 class IonTabBarUnwrapped extends React.PureComponent {
@@ -1528,7 +1542,6 @@ class IonTabBarUnwrapped extends React.PureComponent {
         this.setActiveTabOnContext = (_tab) => { };
         const tabs = {};
         React.Children.forEach(props.children, (child) => {
-            var _a, _b, _c, _d;
             if (child != null &&
                 typeof child === 'object' &&
                 child.props &&
@@ -1536,8 +1549,8 @@ class IonTabBarUnwrapped extends React.PureComponent {
                 tabs[child.props.tab] = {
                     originalHref: child.props.href,
                     currentHref: child.props.href,
-                    originalRouteOptions: child.props.href === ((_a = props.routeInfo) === null || _a === void 0 ? void 0 : _a.pathname) ? (_b = props.routeInfo) === null || _b === void 0 ? void 0 : _b.routeOptions : undefined,
-                    currentRouteOptions: child.props.href === ((_c = props.routeInfo) === null || _c === void 0 ? void 0 : _c.pathname) ? (_d = props.routeInfo) === null || _d === void 0 ? void 0 : _d.routeOptions : undefined,
+                    originalRouteOptions: child.props.href === props.routeInfo?.pathname ? props.routeInfo?.routeOptions : undefined,
+                    currentRouteOptions: child.props.href === props.routeInfo?.pathname ? props.routeInfo?.routeOptions : undefined,
                 };
             }
         });
@@ -1583,8 +1596,7 @@ class IonTabBarUnwrapped extends React.PureComponent {
         return false;
     }
     static getDerivedStateFromProps(props, state) {
-        var _a, _b, _c;
-        const tabs = Object.assign({}, state.tabs);
+        const tabs = { ...state.tabs };
         const tabKeys = Object.keys(state.tabs);
         const activeTab = tabKeys.find((key) => {
             const href = state.tabs[key].originalHref;
@@ -1612,13 +1624,13 @@ class IonTabBarUnwrapped extends React.PureComponent {
             const prevHref = state.tabs[prevActiveTab].currentHref;
             const prevRouteOptions = state.tabs[prevActiveTab].currentRouteOptions;
             if (activeTab !== prevActiveTab ||
-                prevHref !== ((_a = props.routeInfo) === null || _a === void 0 ? void 0 : _a.pathname) ||
-                prevRouteOptions !== ((_b = props.routeInfo) === null || _b === void 0 ? void 0 : _b.routeOptions)) {
+                prevHref !== props.routeInfo?.pathname ||
+                prevRouteOptions !== props.routeInfo?.routeOptions) {
                 tabs[activeTab] = {
                     originalHref: tabs[activeTab].originalHref,
                     currentHref: props.routeInfo.pathname + (props.routeInfo.search || ''),
                     originalRouteOptions: tabs[activeTab].originalRouteOptions,
-                    currentRouteOptions: (_c = props.routeInfo) === null || _c === void 0 ? void 0 : _c.routeOptions,
+                    currentRouteOptions: props.routeInfo?.routeOptions,
                 };
                 if (props.routeInfo.routeAction === 'pop' && activeTab !== prevActiveTab) {
                     // If navigating back and the tabs change, set the prev tab back to its original href
@@ -1638,10 +1650,9 @@ class IonTabBarUnwrapped extends React.PureComponent {
         };
     }
     onTabButtonClick(e, onClickFn) {
-        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;
+        const hasRouterOutlet = this.props.tabsContext?.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
@@ -1678,13 +1689,12 @@ class IonTabBarUnwrapped extends React.PureComponent {
     }
     renderTabButton(activeTab) {
         return (child) => {
-            var _a, _b;
             if (child != null && child.props && (child.type === IonTabButton || child.type.isTabButton)) {
                 const href = child.props.tab === activeTab
-                    ? (_a = this.props.routeInfo) === null || _a === void 0 ? void 0 : _a.pathname
+                    ? this.props.routeInfo?.pathname
                     : this.state.tabs[child.props.tab].currentHref;
                 const routeOptions = child.props.tab === activeTab
-                    ? (_b = this.props.routeInfo) === null || _b === void 0 ? void 0 : _b.routeOptions
+                    ? this.props.routeInfo?.routeOptions
                     : this.state.tabs[child.props.tab].currentRouteOptions;
                 return React.cloneElement(child, {
                     href,
@@ -1697,30 +1707,35 @@ class IonTabBarUnwrapped extends React.PureComponent {
     }
     render() {
         const { activeTab } = this.state;
-        return (React.createElement(IonTabBarInner, Object.assign({}, this.props, { selectedTab: activeTab }), React.Children.map(this.props.children, this.renderTabButton(activeTab))));
+        return (jsx(IonTabBarInner, { ...this.props, selectedTab: activeTab, children: React.Children.map(this.props.children, this.renderTabButton(activeTab)) }));
     }
     static get contextType() {
         return NavContext;
     }
 }
-const IonTabBarContainer = React.memo((_a) => {
-    var { forwardedRef } = _a, props = __rest(_a, ["forwardedRef"]);
+const IonTabBarContainer = React.memo(({ forwardedRef, ...props }) => {
     const context = useContext(NavContext);
     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, 
+    const updatedTabBarProps = {
+        ...tabsContext.tabBarProps,
+        ref: tabBarRef,
+    };
+    return (jsx(IonTabBarUnwrapped, { ref: tabBarRef, ...props, routeInfo: props.routeInfo || context.routeInfo || { pathname: window.location.pathname }, onSetCurrentTab: context.setCurrentTab, 
         /**
          * 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.
          */
-        tabsContext: Object.assign(Object.assign({}, tabsContext), { tabBarProps: updatedTabBarProps }) }), props.children));
+        tabsContext: {
+            ...tabsContext,
+            tabBarProps: updatedTabBarProps,
+        }, children: props.children }));
 });
 const IonTabBar = createForwardRef(IonTabBarContainer, 'IonTabBar');
 
-const IonBackButton = /*@__PURE__*/ (() => class extends React.Component {
+class IonBackButton extends React.Component {
     constructor() {
         super(...arguments);
         this.clickButton = (e) => {
@@ -1743,7 +1758,7 @@ const IonBackButton = /*@__PURE__*/ (() => class extends React.Component {
         };
     }
     render() {
-        return React.createElement(IonBackButtonInner, Object.assign({ onClick: this.clickButton }, this.props));
+        return jsx(IonBackButtonInner, { onClick: this.clickButton, ...this.props });
     }
     static get displayName() {
         return 'IonBackButton';
@@ -1751,7 +1766,10 @@ const IonBackButton = /*@__PURE__*/ (() => class extends React.Component {
     static get contextType() {
         return NavContext;
     }
-})();
+    shouldComponentUpdate() {
+        return true;
+    }
+}
 
 class IonIconContainer extends React.PureComponent {
     constructor(props) {
@@ -1761,23 +1779,22 @@ class IonIconContainer extends React.PureComponent {
         }
     }
     render() {
-        var _a, _b;
-        const _c = this.props, { icon, ios, md, mode } = _c, rest = __rest(_c, ["icon", "ios", "md", "mode"]);
+        const { icon, ios, md, mode, ...rest } = this.props;
         let iconToUse;
         const config = getConfig();
-        const iconMode = mode || (config === null || config === void 0 ? void 0 : config.get('mode'));
+        const iconMode = mode || config?.get('mode');
         if (ios || md) {
             if (iconMode === 'ios') {
-                iconToUse = (_a = ios !== null && ios !== void 0 ? ios : md) !== null && _a !== void 0 ? _a : icon;
+                iconToUse = ios ?? md ?? icon;
             }
             else {
-                iconToUse = (_b = md !== null && md !== void 0 ? md : ios) !== null && _b !== void 0 ? _b : icon;
+                iconToUse = md ?? ios ?? icon;
             }
         }
         else {
             iconToUse = icon;
         }
-        return (React.createElement(IonIconInner, Object.assign({ ref: this.props.forwardedRef, icon: iconToUse }, rest), this.props.children));
+        return (jsx(IonIconInner, { ref: this.props.forwardedRef, icon: iconToUse, ...rest, children: this.props.children }));
     }
     static get contextType() {
         return NavContext;
@@ -1792,7 +1809,7 @@ class IonRoute extends React.PureComponent {
             console.error('You either do not have an Ionic Router package, or your router does not support using <IonRoute>');
             return null;
         }
-        return React.createElement(IonRouteInner, Object.assign({}, this.props));
+        return jsx(IonRouteInner, { ...this.props });
     }
     static get contextType() {
         return NavContext;
@@ -1806,7 +1823,7 @@ class IonRedirect extends React.PureComponent {
             console.error('You either do not have an Ionic Router package, or your router does not support using <IonRedirect>');
             return null;
         }
-        return React.createElement(IonRedirectInner, Object.assign({}, this.props));
+        return jsx(IonRedirectInner, { ...this.props });
     }
     static get contextType() {
         return NavContext;
@@ -1869,7 +1886,7 @@ class CreateAnimation extends React.PureComponent {
     }
     render() {
         const { children } = this.props;
-        return (React.createElement(React.Fragment, null, React.Children.map(children, (child, id) => React.cloneElement(child, { ref: (el) => this.nodes.set(id, el) }))));
+        return (jsx(Fragment, { children: React.Children.map(children, (child, id) => React.cloneElement(child, { ref: (el) => this.nodes.set(id, el) })) }));
     }
 }
 const checkConfig = (animation, currentProps = {}, prevProps = {}) => {
@@ -1918,20 +1935,19 @@ const checkConfig = (animation, currentProps = {}, prevProps = {}) => {
     }
 };
 const checkProgress = (animation, currentProps = {}, prevProps = {}) => {
-    var _a, _b, _c, _d, _e;
     const { progressStart, progressStep, progressEnd } = currentProps;
     if (progressStart &&
-        (((_a = prevProps.progressStart) === null || _a === void 0 ? void 0 : _a.forceLinearEasing) !== (progressStart === null || progressStart === void 0 ? void 0 : progressStart.forceLinearEasing) ||
-            ((_b = prevProps.progressStart) === null || _b === void 0 ? void 0 : _b.step) !== (progressStart === null || progressStart === void 0 ? void 0 : progressStart.step))) {
+        (prevProps.progressStart?.forceLinearEasing !== progressStart?.forceLinearEasing ||
+            prevProps.progressStart?.step !== progressStart?.step)) {
         animation.progressStart(progressStart.forceLinearEasing, progressStart.step);
     }
-    if (progressStep && ((_c = prevProps.progressStep) === null || _c === void 0 ? void 0 : _c.step) !== (progressStep === null || progressStep === void 0 ? void 0 : progressStep.step)) {
+    if (progressStep && prevProps.progressStep?.step !== progressStep?.step) {
         animation.progressStep(progressStep.step);
     }
     if (progressEnd &&
-        (((_d = prevProps.progressEnd) === null || _d === void 0 ? void 0 : _d.playTo) !== (progressEnd === null || progressEnd === void 0 ? void 0 : progressEnd.playTo) ||
-            ((_e = prevProps.progressEnd) === null || _e === void 0 ? void 0 : _e.step) !== (progressEnd === null || progressEnd === void 0 ? void 0 : progressEnd.step) ||
-            (prevProps === null || prevProps === void 0 ? void 0 : prevProps.dur) !== (progressEnd === null || progressEnd === void 0 ? void 0 : progressEnd.dur))) {
+        (prevProps.progressEnd?.playTo !== progressEnd?.playTo ||
+            prevProps.progressEnd?.step !== progressEnd?.step ||
+            prevProps?.dur !== progressEnd?.dur)) {
         animation.progressEnd(progressEnd.playTo, progressEnd.step, progressEnd.dur);
     }
 };
@@ -1961,14 +1977,16 @@ function useController(displayName, controller, defineCustomElement) {
         if (overlayRef.current) {
             return;
         }
-        const { onDidDismiss, onWillDismiss, onDidPresent, onWillPresent } = options, rest = __rest(options, ["onDidDismiss", "onWillDismiss", "onDidPresent", "onWillPresent"]);
+        const { onDidDismiss, onWillDismiss, onDidPresent, onWillPresent, ...rest } = options;
         const handleDismiss = (event) => {
             if (onDidDismiss) {
                 onDidDismiss(event);
             }
             overlayRef.current = undefined;
         };
-        overlayRef.current = await controller.create(Object.assign({}, rest));
+        overlayRef.current = await controller.create({
+            ...rest,
+        });
         attachProps(overlayRef.current, {
             [didDismissEventName]: handleDismiss,
             [didPresentEventName]: (e) => onDidPresent && onDidPresent(e),
@@ -2017,7 +2035,7 @@ function useIonAlert() {
         if (typeof messageOrOptions === 'string') {
             return controller.present({
                 message: messageOrOptions,
-                buttons: buttons !== null && buttons !== void 0 ? buttons : [{ text: 'Ok' }],
+                buttons: buttons ?? [{ text: 'Ok' }],
             });
         }
         else {
@@ -2073,11 +2091,14 @@ function useOverlay(displayName, controller, defineCustomElement, component, com
         if (overlayRef.current) {
             return;
         }
-        const { onDidDismiss, onWillDismiss, onDidPresent, onWillPresent } = options, rest = __rest(options, ["onDidDismiss", "onWillDismiss", "onDidPresent", "onWillPresent"]);
+        const { onDidDismiss, onWillDismiss, onDidPresent, onWillPresent, ...rest } = options;
         if (typeof document !== 'undefined') {
             containerElRef.current = document.createElement('div');
         }
-        overlayRef.current = await controller.create(Object.assign(Object.assign({}, rest), { component: containerElRef.current }));
+        overlayRef.current = await controller.create({
+            ...rest,
+            component: containerElRef.current,
+        });
         attachProps(overlayRef.current, {
             [didDismissEventName]: handleDismiss,
             [didPresentEventName]: (e) => onDidPresent && onDidPresent(e),
@@ -2148,7 +2169,7 @@ function useIonPicker() {
         if (Array.isArray(columnsOrOptions)) {
             return controller.present({
                 columns: columnsOrOptions,
-                buttons: buttons !== null && buttons !== void 0 ? buttons : [{ text: 'Ok' }],
+                buttons: buttons ?? [{ text: 'Ok' }],
             });
         }
         else {
@@ -2190,7 +2211,9 @@ const setupIonicReact = (config = {}) => {
     if (typeof document !== 'undefined') {
         document.documentElement.classList.add('ion-ce');
     }
-    initialize(Object.assign({}, config));
+    initialize({
+        ...config,
+    });
 };
 
 // TODO(FW-2959): types
@@ -2233,7 +2256,7 @@ class ViewLifeCycleManager extends React.Component {
     }
     render() {
         const { show } = this.state;
-        return (React.createElement(IonLifeCycleContext.Provider, { value: this.ionLifeCycleContext }, show && this.props.children));
+        return (jsx(IonLifeCycleContext.Provider, { value: this.ionLifeCycleContext, children: show && this.props.children }));
     }
 }
 
@@ -2453,8 +2476,7 @@ class NavManager extends React.PureComponent {
         return this.props.stackManager;
     }
     render() {
-        return (React.createElement(NavContext.Provider, { value: Object.assign(Object.assign({}, this.state), { routeInfo: this.props.routeInfo }) },
-            React.createElement(IonRouterContext.Provider, { value: Object.assign(Object.assign({}, this.ionRouterContextValue), { routeInfo: this.props.routeInfo }) }, this.props.children)));
+        return (jsx(NavContext.Provider, { value: { ...this.state, routeInfo: this.props.routeInfo }, children: jsx(IonRouterContext.Provider, { value: { ...this.ionRouterContextValue, routeInfo: this.props.routeInfo }, children: this.props.children }) }));
     }
 }