@ionic/core 8.0.0-dev.11709632212.139b6f63 → 8.0.0-dev.11711408410.14d71406

package/dist/collection/utils/animation/animation.js

@@ -2,8 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { win } from "../browser";
-import { raf } from "../helpers";
-import { addClassToArray, animationEnd, createKeyframeStylesheet, generateKeyframeName, generateKeyframeRules, processKeyframes, removeStyleProperty, setStyleProperty, } from "./animation-utils";
+import { addClassToArray, setStyleProperty } from "./animation-utils";
 export const createAnimation = (animationId) => {
     let _delay;
     let _duration;
@@ -30,7 +29,6 @@ export const createAnimation = (animationId) => {
     let willComplete = true;
     let finished = false;
     let shouldCalculateNumAnimations = true;
-    let keyframeName;
     let ani;
     let paused = false;
     const id = animationId;
@@ -47,10 +45,16 @@ export const createAnimation = (animationId) => {
     const webAnimations = [];
     const supportsAnimationEffect = typeof AnimationEffect === 'function' ||
         (win !== undefined && typeof win.AnimationEffect === 'function');
+    /**
+     * This is a feature detection for Web Animations.
+     *
+     * Certain environments such as emulated browser environments for testing,
+     * do not support Web Animations. As a result, we need to check for support
+     * and provide a fallback to test certain functionality related to Web Animations.
+     */
     const supportsWebAnimations = typeof Element === 'function' &&
         typeof Element.prototype.animate === 'function' &&
         supportsAnimationEffect;
-    const ANIMATION_END_FALLBACK_PADDING_MS = 100;
     const getWebAnimations = () => {
         return webAnimations;
     };
@@ -138,21 +142,6 @@ export const createAnimation = (animationId) => {
             });
             webAnimations.length = 0;
         }
-        else {
-            const elementsArray = elements.slice();
-            raf(() => {
-                elementsArray.forEach((element) => {
-                    removeStyleProperty(element, 'animation-name');
-                    removeStyleProperty(element, 'animation-duration');
-                    removeStyleProperty(element, 'animation-timing-function');
-                    removeStyleProperty(element, 'animation-iteration-count');
-                    removeStyleProperty(element, 'animation-delay');
-                    removeStyleProperty(element, 'animation-play-state');
-                    removeStyleProperty(element, 'animation-fill-mode');
-                    removeStyleProperty(element, 'animation-direction');
-                });
-            });
-        }
     };
     /**
      * Removes the animation's stylesheets
@@ -410,9 +399,6 @@ export const createAnimation = (animationId) => {
                 }
             });
         }
-        else {
-            initializeCSSAnimation();
-        }
     };
     /**
      * Run all "before" animation hooks.
@@ -498,32 +484,6 @@ export const createAnimation = (animationId) => {
             }
         }
     };
-    const initializeCSSAnimation = (toggleAnimationName = true) => {
-        cleanUpStyleSheets();
-        const processedKeyframes = processKeyframes(_keyframes);
-        elements.forEach((element) => {
-            if (processedKeyframes.length > 0) {
-                const keyframeRules = generateKeyframeRules(processedKeyframes);
-                keyframeName = animationId !== undefined ? animationId : generateKeyframeName(keyframeRules);
-                const stylesheet = createKeyframeStylesheet(keyframeName, keyframeRules, element);
-                stylesheets.push(stylesheet);
-                setStyleProperty(element, 'animation-duration', `${getDuration()}ms`);
-                setStyleProperty(element, 'animation-timing-function', getEasing());
-                setStyleProperty(element, 'animation-delay', `${getDelay()}ms`);
-                setStyleProperty(element, 'animation-fill-mode', getFill());
-                setStyleProperty(element, 'animation-direction', getDirection());
-                const iterationsCount = getIterations() === Infinity ? 'infinite' : getIterations().toString();
-                setStyleProperty(element, 'animation-iteration-count', iterationsCount);
-                setStyleProperty(element, 'animation-play-state', 'paused');
-                if (toggleAnimationName) {
-                    setStyleProperty(element, 'animation-name', `${stylesheet.id}-alt`);
-                }
-                raf(() => {
-                    setStyleProperty(element, 'animation-name', stylesheet.id || null);
-                });
-            }
-        });
-    };
     const initializeWebAnimation = () => {
         elements.forEach((element) => {
             const animation = element.animate(_keyframes, {
@@ -544,15 +504,12 @@ export const createAnimation = (animationId) => {
             };
         }
     };
-    const initializeAnimation = (toggleAnimationName = true) => {
+    const initializeAnimation = () => {
         beforeAnimation();
         if (_keyframes.length > 0) {
             if (supportsWebAnimations) {
                 initializeWebAnimation();
             }
-            else {
-                initializeCSSAnimation(toggleAnimationName);
-            }
         }
         initialized = true;
     };
@@ -565,15 +522,6 @@ export const createAnimation = (animationId) => {
                 animation.pause();
             });
         }
-        else {
-            const animationDuration = `-${getDuration() * step}ms`;
-            elements.forEach((element) => {
-                if (_keyframes.length > 0) {
-                    setStyleProperty(element, 'animation-delay', animationDuration);
-                    setStyleProperty(element, 'animation-play-state', 'paused');
-                }
-            });
-        }
     };
     const updateWebAnimation = (step) => {
         webAnimations.forEach((animation) => {
@@ -590,26 +538,6 @@ export const createAnimation = (animationId) => {
             setAnimationStep(step);
         }
     };
-    const updateCSSAnimation = (toggleAnimationName = true, step) => {
-        raf(() => {
-            elements.forEach((element) => {
-                setStyleProperty(element, 'animation-name', keyframeName || null);
-                setStyleProperty(element, 'animation-duration', `${getDuration()}ms`);
-                setStyleProperty(element, 'animation-timing-function', getEasing());
-                setStyleProperty(element, 'animation-delay', step !== undefined ? `-${step * getDuration()}ms` : `${getDelay()}ms`);
-                setStyleProperty(element, 'animation-fill-mode', getFill() || null);
-                setStyleProperty(element, 'animation-direction', getDirection() || null);
-                const iterationsCount = getIterations() === Infinity ? 'infinite' : getIterations().toString();
-                setStyleProperty(element, 'animation-iteration-count', iterationsCount);
-                if (toggleAnimationName) {
-                    setStyleProperty(element, 'animation-name', `${keyframeName}-alt`);
-                }
-                raf(() => {
-                    setStyleProperty(element, 'animation-name', keyframeName || null);
-                });
-            });
-        });
-    };
     const update = (deep = false, toggleAnimationName = true, step) => {
         if (deep) {
             childAnimations.forEach((animation) => {
@@ -619,9 +547,6 @@ export const createAnimation = (animationId) => {
         if (supportsWebAnimations) {
             updateWebAnimation(step);
         }
-        else {
-            updateCSSAnimation(toggleAnimationName, step);
-        }
         return ani;
     };
     const progressStart = (forceLinearEasing = false, step) => {
@@ -704,10 +629,6 @@ export const createAnimation = (animationId) => {
         pauseAnimation();
         return ani;
     };
-    const onAnimationEndFallback = () => {
-        cssAnimationsTimerFallback = undefined;
-        animationFinish();
-    };
     const clearCSSAnimationsTimeout = () => {
         if (cssAnimationsTimerFallback) {
             clearTimeout(cssAnimationsTimerFallback);
@@ -715,56 +636,7 @@ export const createAnimation = (animationId) => {
     };
     const playCSSAnimations = () => {
         clearCSSAnimationsTimeout();
-        raf(() => {
-            elements.forEach((element) => {
-                if (_keyframes.length > 0) {
-                    setStyleProperty(element, 'animation-play-state', 'running');
-                }
-            });
-        });
-        if (_keyframes.length === 0 || elements.length === 0) {
-            animationFinish();
-        }
-        else {
-            /**
-             * This is a catchall in the event that a CSS Animation did not finish.
-             * The Web Animations API has mechanisms in place for preventing this.
-             * CSS Animations will not fire an `animationend` event
-             * for elements with `display: none`. The Web Animations API
-             * accounts for this, but using raw CSS Animations requires
-             * this workaround.
-             */
-            const animationDelay = getDelay() || 0;
-            const animationDuration = getDuration() || 0;
-            const animationIterations = getIterations() || 1;
-            // No need to set a timeout when animation has infinite iterations
-            if (isFinite(animationIterations)) {
-                cssAnimationsTimerFallback = setTimeout(onAnimationEndFallback, animationDelay + animationDuration * animationIterations + ANIMATION_END_FALLBACK_PADDING_MS);
-            }
-            animationEnd(elements[0], () => {
-                clearCSSAnimationsTimeout();
-                /**
-                 * Ensure that clean up
-                 * is always done a frame
-                 * before the onFinish handlers
-                 * are fired. Otherwise, there
-                 * may be flickering if a new
-                 * animation is started on the same
-                 * element too quickly
-                 */
-                raf(() => {
-                    clearCSSAnimationPlayState();
-                    raf(animationFinish);
-                });
-            });
-        }
-    };
-    const clearCSSAnimationPlayState = () => {
-        elements.forEach((element) => {
-            removeStyleProperty(element, 'animation-duration');
-            removeStyleProperty(element, 'animation-delay');
-            removeStyleProperty(element, 'animation-play-state');
-        });
+        animationFinish();
     };
     const playWebAnimations = () => {
         webAnimations.forEach((animation) => {
@@ -779,9 +651,6 @@ export const createAnimation = (animationId) => {
             setAnimationStep(0);
             updateWebAnimation();
         }
-        else {
-            updateCSSAnimation();
-        }
     };
     const play = (opts) => {
         return new Promise((resolve) => {

package/dist/collection/utils/animation/test/animation.spec.js

@@ -2,7 +2,6 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { createAnimation } from "../animation";
-import { processKeyframes } from "../animation-utils";
 import { getTimeGivenProgression } from "../cubic-bezier";
 describe('Animation Class', () => {
     describe('progressEnd callbacks', () => {
@@ -48,84 +47,6 @@ describe('Animation Class', () => {
             animation.play();
             expect(animation.isRunning()).toEqual(false);
         });
-        it('should be running', () => {
-            const el = document.createElement('div');
-            animation.addElement(el);
-            animation.keyframes([
-                { transform: 'scale(1)', opacity: 1, offset: 0 },
-                { transform: 'scale(0)', opacity: 0, offset: 1 },
-            ]);
-            animation.duration(250);
-            animation.play();
-            expect(animation.isRunning()).toEqual(true);
-        });
-        it('should not be running after finishing the animation', async () => {
-            const el = document.createElement('div');
-            animation.addElement(el);
-            animation.keyframes([
-                { transform: 'scale(1)', opacity: 1, offset: 0 },
-                { transform: 'scale(0)', opacity: 0, offset: 1 },
-            ]);
-            animation.duration(250);
-            await animation.play();
-            expect(animation.isRunning()).toEqual(false);
-        });
-        it('should not be running after calling pause', () => {
-            const el = document.createElement('div');
-            animation.addElement(el);
-            animation.keyframes([
-                { transform: 'scale(1)', opacity: 1, offset: 0 },
-                { transform: 'scale(0)', opacity: 0, offset: 1 },
-            ]);
-            animation.duration(250);
-            animation.play();
-            expect(animation.isRunning()).toEqual(true);
-            animation.pause();
-            expect(animation.isRunning()).toEqual(false);
-        });
-        it('should not be running when doing progress steps', () => {
-            const el = document.createElement('div');
-            animation.addElement(el);
-            animation.keyframes([
-                { transform: 'scale(1)', opacity: 1, offset: 0 },
-                { transform: 'scale(0)', opacity: 0, offset: 1 },
-            ]);
-            animation.duration(250);
-            animation.play();
-            animation.progressStart();
-            expect(animation.isRunning()).toEqual(false);
-        });
-        it('should be running after calling progressEnd', () => {
-            const el = document.createElement('div');
-            animation.addElement(el);
-            animation.keyframes([
-                { transform: 'scale(1)', opacity: 1, offset: 0 },
-                { transform: 'scale(0)', opacity: 0, offset: 1 },
-            ]);
-            animation.duration(250);
-            animation.play();
-            animation.progressStart();
-            animation.progressEnd(1, 0);
-            expect(animation.isRunning()).toEqual(true);
-        });
-        it('should not be running after playing to beginning', async () => {
-            const el = document.createElement('div');
-            animation.addElement(el);
-            animation.keyframes([
-                { transform: 'scale(1)', opacity: 1, offset: 0 },
-                { transform: 'scale(0)', opacity: 0, offset: 1 },
-            ]);
-            animation.duration(250);
-            await animation.play();
-            animation.progressStart();
-            animation.progressEnd(0, 0);
-            await new Promise((resolve) => {
-                animation.onFinish(() => {
-                    expect(animation.isRunning()).toEqual(false);
-                    resolve();
-                });
-            });
-        });
     });
     describe('addElement()', () => {
         let animation;
@@ -183,16 +104,6 @@ describe('Animation Class', () => {
             ]);
             expect(animation.getKeyframes().length).toEqual(3);
         });
-        it('should convert properties for CSS Animations', () => {
-            const processedKeyframes = processKeyframes([
-                { borderRadius: '0px', easing: 'ease-in', offset: 0 },
-                { borderRadius: '4px', easing: 'ease-out', offset: 1 },
-            ]);
-            expect(processedKeyframes).toEqual([
-                { 'border-radius': '0px', 'animation-timing-function': 'ease-in', offset: 0 },
-                { 'border-radius': '4px', 'animation-timing-function': 'ease-out', offset: 1 },
-            ]);
-        });
         it('should set the from keyframe properly', () => {
             animation.from('opacity', 0).from('background', 'red').from('color', 'purple');
             const keyframes = animation.getKeyframes();

package/dist/collection/utils/animation/test/animationbuilder/animation.e2e.js

@@ -12,10 +12,6 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
             await page.goto('/src/utils/animation/test/animationbuilder', config);
             await testNavigation(page);
         });
-        test('ios-transition css', async ({ page }) => {
-            await page.goto('/src/utils/animation/test/animationbuilder?ionic:_forceCSSAnimations=true', config);
-            await testNavigation(page);
-        });
     });
 });
 const testNavigation = async (page) => {

package/dist/collection/utils/animation/test/basic/animation.e2e.js

@@ -8,10 +8,6 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             await page.goto('/src/utils/animation/test/basic', config);
             await testPage(page);
         });
-        test(`should resolve using css animations`, async ({ page }) => {
-            await page.goto('/src/utils/animation/test/basic?ionic:_forceCSSAnimations=true', config);
-            await testPage(page);
-        });
     });
 });
 const testPage = async (page) => {

package/dist/collection/utils/animation/test/display/animation.e2e.js

@@ -9,10 +9,6 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             await page.goto('/src/utils/animation/test/display', config);
             await testDisplay(page);
         });
-        test(`should resolve using css animations`, async ({ page }) => {
-            await page.goto('/src/utils/animation/test/display?ionic:_forceCSSAnimations=true', config);
-            await testDisplay(page);
-        });
     });
 });
 const testDisplay = async (page) => {

package/dist/collection/utils/animation/test/hooks/animation.e2e.js

@@ -9,10 +9,6 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             await page.goto('/src/utils/animation/test/hooks', config);
             await testHooks(page);
         });
-        test(`should fire hooks using css animations`, async ({ page }) => {
-            await page.goto('/src/utils/animation/test/hooks?ionic:_forceCSSAnimations=true', config);
-            await testHooks(page);
-        });
     });
 });
 const testHooks = async (page) => {

package/dist/collection/utils/animation/test/multiple/animation.e2e.js

@@ -9,13 +9,6 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             await page.goto('/src/utils/animation/test/multiple', config);
             await testMultiple(page);
         });
-        /**
-         * CSS animations will occasionally resolve out of order, so we skip for now
-         */
-        test.skip(`should resolve grouped animations using css animations`, async ({ page }) => {
-            await page.goto('/src/utils/animation/test/multiple?ionic:_forceCSSAnimations=true', config);
-            await testMultiple(page);
-        });
     });
 });
 const testMultiple = async (page) => {

package/dist/collection/utils/focus-trap.js

@@ -0,0 +1,78 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { focusVisibleElement } from "./helpers";
+/**
+ * This query string selects elements that
+ * are eligible to receive focus. We select
+ * interactive elements that meet the following
+ * criteria:
+ * 1. Element does not have a negative tabindex
+ * 2. Element does not have `hidden`
+ * 3. Element does not have `disabled` for non-Ionic components.
+ * 4. Element does not have `disabled` or `disabled="true"` for Ionic components.
+ * Note: We need this distinction because `disabled="false"` is
+ * valid usage for the disabled property on ion-button.
+ */
+export const focusableQueryString = '[tabindex]:not([tabindex^="-"]):not([hidden]):not([disabled]), input:not([type=hidden]):not([tabindex^="-"]):not([hidden]):not([disabled]), textarea:not([tabindex^="-"]):not([hidden]):not([disabled]), button:not([tabindex^="-"]):not([hidden]):not([disabled]), select:not([tabindex^="-"]):not([hidden]):not([disabled]), .ion-focusable:not([tabindex^="-"]):not([hidden]):not([disabled]), .ion-focusable[disabled="false"]:not([tabindex^="-"]):not([hidden])';
+/**
+ * Focuses the first descendant in a context
+ * that can receive focus. If none exists,
+ * a fallback element will be focused.
+ * This fallback is typically an ancestor
+ * container such as a menu or overlay so focus does not
+ * leave the container we are trying to trap focus in.
+ *
+ * If no fallback is specified then we focus the container itself.
+ */
+export const focusFirstDescendant = (ref, fallbackElement) => {
+    const firstInput = ref.querySelector(focusableQueryString);
+    focusElementInContext(firstInput, fallbackElement !== null && fallbackElement !== void 0 ? fallbackElement : ref);
+};
+/**
+ * Focuses the last descendant in a context
+ * that can receive focus. If none exists,
+ * a fallback element will be focused.
+ * This fallback is typically an ancestor
+ * container such as a menu or overlay so focus does not
+ * leave the container we are trying to trap focus in.
+ *
+ * If no fallback is specified then we focus the container itself.
+ */
+export const focusLastDescendant = (ref, fallbackElement) => {
+    const inputs = Array.from(ref.querySelectorAll(focusableQueryString));
+    const lastInput = inputs.length > 0 ? inputs[inputs.length - 1] : null;
+    focusElementInContext(lastInput, fallbackElement !== null && fallbackElement !== void 0 ? fallbackElement : ref);
+};
+/**
+ * Focuses a particular element in a context. If the element
+ * doesn't have anything focusable associated with it then
+ * a fallback element will be focused.
+ *
+ * This fallback is typically an ancestor
+ * container such as a menu or overlay so focus does not
+ * leave the container we are trying to trap focus in.
+ * This should be used instead of the focus() method
+ * on most elements because the focusable element
+ * may not be the host element.
+ *
+ * For example, if an ion-button should be focused
+ * then we should actually focus the native <button>
+ * element inside of ion-button's shadow root, not
+ * the host element itself.
+ */
+const focusElementInContext = (hostToFocus, fallbackElement) => {
+    let elementToFocus = hostToFocus;
+    const shadowRoot = hostToFocus === null || hostToFocus === void 0 ? void 0 : hostToFocus.shadowRoot;
+    if (shadowRoot) {
+        // If there are no inner focusable elements, just focus the host element.
+        elementToFocus = shadowRoot.querySelector(focusableQueryString) || hostToFocus;
+    }
+    if (elementToFocus) {
+        focusVisibleElement(elementToFocus);
+    }
+    else {
+        // Focus fallback element instead of letting focus escape
+        fallbackElement.focus();
+    }
+};

package/dist/collection/utils/forms/index.js

@@ -1,6 +1,5 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-export * from './form-controller';
 export * from './notch-controller';
 export * from './compare-with-utils';

package/dist/collection/utils/hardware-back-button.js

@@ -15,7 +15,7 @@ import { config } from "../global/config";
  * moment this file is evaluated which could be
  * before the config is set.
  */
-export const shoudUseCloseWatcher = () => config.get('experimentalCloseWatcher', false) && win !== undefined && 'CloseWatcher' in win;
+export const shouldUseCloseWatcher = () => config.get('experimentalCloseWatcher', false) && win !== undefined && 'CloseWatcher' in win;
 /**
  * When hardwareBackButton: false in config,
  * we need to make sure we also block the default
@@ -85,7 +85,7 @@ export const startHardwareBackButton = () => {
      * backbutton event otherwise we may get duplicate
      * events firing.
      */
-    if (shoudUseCloseWatcher()) {
+    if (shouldUseCloseWatcher()) {
         let watcher;
         const configureWatcher = () => {
             watcher === null || watcher === void 0 ? void 0 : watcher.destroy();

package/dist/collection/utils/helpers.js

@@ -230,13 +230,6 @@ export const raf = (h) => {
 export const hasShadowDom = (el) => {
     return !!el.shadowRoot && !!el.attachShadow;
 };
-export const findItemLabel = (componentEl) => {
-    const itemEl = componentEl.closest('ion-item');
-    if (itemEl) {
-        return itemEl.querySelector('ion-label');
-    }
-    return null;
-};
 export const focusVisibleElement = (el) => {
     el.focus();
     /**
@@ -254,52 +247,6 @@ export const focusVisibleElement = (el) => {
         }
     }
 };
-/**
- * This method is used for Ionic's input components that use Shadow DOM. In
- * order to properly label the inputs to work with screen readers, we need
- * to get the text content of the label outside of the shadow root and pass
- * it to the input inside of the shadow root.
- *
- * Referencing label elements by id from outside of the component is
- * impossible due to the shadow boundary, read more here:
- * https://developer.salesforce.com/blogs/2020/01/accessibility-for-web-components.html
- *
- * @param componentEl The shadow element that needs the aria label
- * @param inputId The unique identifier for the input
- */
-export const getAriaLabel = (componentEl, inputId) => {
-    let labelText;
-    // If the user provides their own label via the aria-labelledby attr
-    // we should use that instead of looking for an ion-label
-    const labelledBy = componentEl.getAttribute('aria-labelledby');
-    // Grab the id off of the component in case they are using
-    // a custom label using the label element
-    const componentId = componentEl.id;
-    let labelId = labelledBy !== null && labelledBy.trim() !== '' ? labelledBy : inputId + '-lbl';
-    let label = labelledBy !== null && labelledBy.trim() !== '' ? document.getElementById(labelledBy) : findItemLabel(componentEl);
-    if (label) {
-        if (labelledBy === null) {
-            label.id = labelId;
-        }
-        labelText = label.textContent;
-        label.setAttribute('aria-hidden', 'true');
-        // if there is no label, check to see if the user has provided
-        // one by setting an id on the component and using the label element
-    }
-    else if (componentId.trim() !== '') {
-        label = document.querySelector(`label[for="${componentId}"]`);
-        if (label) {
-            if (label.id !== '') {
-                labelId = label.id;
-            }
-            else {
-                label.id = labelId = `${componentId}-lbl`;
-            }
-            labelText = label.textContent;
-        }
-    }
-    return { label, labelId, labelText };
-};
 /**
  * This method is used to add a hidden input to a host element that contains
  * a Shadow DOM. It does not add the input inside of the Shadow root which

package/dist/collection/utils/menu-controller/animations/overlay.js

@@ -27,8 +27,8 @@ export const menuOverlayAnimation = (menu) => {
     }
     menuAnimation.addElement(menu.menuInnerEl).fromTo('transform', `translateX(${closedX})`, `translateX(${openedX})`);
     const mode = getIonMode(menu);
-    const isIos = mode === 'ios';
-    const opacity = isIos ? 0.2 : 0.25;
+    const isIOS = mode === 'ios';
+    const opacity = isIOS ? 0.2 : 0.25;
     backdropAnimation.addElement(menu.backdropEl).fromTo('opacity', 0.01, opacity);
-    return baseAnimation(isIos).addAnimation([menuAnimation, backdropAnimation]);
+    return baseAnimation(isIOS).addAnimation([menuAnimation, backdropAnimation]);
 };

package/dist/collection/utils/menu-controller/animations/push.js

@@ -14,6 +14,7 @@ export const menuPushAnimation = (menu) => {
     let menuClosedX;
     const mode = getIonMode(menu);
     const width = menu.width;
+    const isIOS = mode === 'ios';
     if (menu.isEndSide) {
         contentOpenedX = -width + 'px';
         menuClosedX = width + 'px';
@@ -29,5 +30,5 @@ export const menuPushAnimation = (menu) => {
         .addElement(menu.contentEl)
         .fromTo('transform', 'translateX(0px)', `translateX(${contentOpenedX})`);
     const backdropAnimation = createAnimation().addElement(menu.backdropEl).fromTo('opacity', 0.01, 0.32);
-    return baseAnimation(mode === 'ios').addAnimation([menuAnimation, contentAnimation, backdropAnimation]);
+    return baseAnimation(isIOS).addAnimation([menuAnimation, contentAnimation, backdropAnimation]);
 };

package/dist/collection/utils/menu-controller/animations/reveal.js

@@ -11,9 +11,10 @@ import { baseAnimation } from "./base";
  */
 export const menuRevealAnimation = (menu) => {
     const mode = getIonMode(menu);
+    const isIOS = mode === 'ios';
     const openedX = menu.width * (menu.isEndSide ? -1 : 1) + 'px';
     const contentOpen = createAnimation()
         .addElement(menu.contentEl) // REVIEW
         .fromTo('transform', 'translateX(0px)', `translateX(${openedX})`);
-    return baseAnimation(mode === 'ios').addAnimation(contentOpen);
+    return baseAnimation(isIOS).addAnimation(contentOpen);
 };