@ionic/react 8.7.13-dev.11766070268.1ab3dde2 → 8.7.13-dev.11766081813.18052ea1

package/dist/index.js

@@ -1149,8 +1149,39 @@ class PageManager extends React.PureComponent {
         this.ionViewWillLeaveHandler = this.ionViewWillLeaveHandler.bind(this);
         this.ionViewDidLeaveHandler = this.ionViewDidLeaveHandler.bind(this);
     }
+    parseClasses(className) {
+        if (!className)
+            return new Set();
+        return new Set(className.split(/\s+/).filter(Boolean));
+    }
+    /**
+     * Updates classList by diffing old/new className props.
+     * Preserves framework-added classes (can-go-back, ion-page-invisible, etc.).
+     */
+    updateUserClasses(oldClassName, newClassName) {
+        if (!this.ionPageElementRef.current)
+            return;
+        const oldClasses = this.parseClasses(oldClassName);
+        const newClasses = this.parseClasses(newClassName);
+        oldClasses.forEach((cls) => {
+            if (!newClasses.has(cls)) {
+                this.ionPageElementRef.current.classList.remove(cls);
+            }
+        });
+        newClasses.forEach((cls) => {
+            if (!oldClasses.has(cls)) {
+                this.ionPageElementRef.current.classList.add(cls);
+            }
+        });
+    }
     componentDidMount() {
         if (this.ionPageElementRef.current) {
+            // Add user classes via classList to preserve framework-added classes on re-renders
+            if (this.props.className) {
+                this.parseClasses(this.props.className).forEach((cls) => {
+                    this.ionPageElementRef.current.classList.add(cls);
+                });
+            }
             if (this.context.isInOutlet()) {
                 this.ionPageElementRef.current.classList.add('ion-page-invisible');
             }
@@ -1161,6 +1192,11 @@ class PageManager extends React.PureComponent {
             this.ionPageElementRef.current.addEventListener('ionViewDidLeave', this.ionViewDidLeaveHandler);
         }
     }
+    componentDidUpdate(prevProps) {
+        if (prevProps.className !== this.props.className) {
+            this.updateUserClasses(prevProps.className, this.props.className);
+        }
+    }
     componentWillUnmount() {
         if (this.ionPageElementRef.current) {
             this.ionPageElementRef.current.removeEventListener('ionViewWillEnter', this.ionViewWillEnterHandler);
@@ -1192,7 +1228,7 @@ class PageManager extends React.PureComponent {
         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 }));
+                return (jsx("div", { className: "ion-page", ref: this.stableMergedRefs, ...props, children: children }));
             } }));
     }
     static get contextType() {