@ionic/core 7.4.3-dev.11695994917.15d3036b → 7.4.3-dev.11696256088.1a73a68b

package/dist/collection/components/menu/menu.js

@@ -41,6 +41,7 @@ export class Menu {
       }
       this.trapKeyboardFocus(ev, document);
     };
+    this.operationCancelled = false;
     this.isPaneVisible = false;
     this.isEndSide = false;
     this.contentId = undefined;
@@ -328,18 +329,23 @@ export class Menu {
     const easingReverse = mode === 'ios' ? iosEasingReverse : mdEasingReverse;
     const ani = this.animation
       .direction(isReversed ? 'reverse' : 'normal')
-      .easing(isReversed ? easingReverse : easing)
-      .onFinish(() => {
-      if (ani.getDirection() === 'reverse') {
-        ani.direction('normal');
-      }
-    });
+      .easing(isReversed ? easingReverse : easing);
     if (animated) {
       await ani.play();
     }
     else {
       ani.play({ sync: true });
     }
+    /**
+     * We run this after the play invocation
+     * instead of using ani.onFinish so that
+     * multiple onFinish callbacks do not get
+     * run if an animation is played, stopped,
+     * and then played again.
+     */
+    if (ani.getDirection() === 'reverse') {
+      ani.direction('normal');
+    }
   }
   _isActive() {
     return !this.disabled && !this.isPaneVisible;
@@ -429,7 +435,9 @@ export class Menu {
     const playTo = this._isOpen ? !shouldComplete : shouldComplete;
     this.animation
       .easing('cubic-bezier(0.4, 0.0, 0.6, 1)')
-      .onFinish(() => this.afterAnimation(shouldOpen), { oneTimeCallback: true })
+      .onFinish(() => {
+      return this.afterAnimation(shouldOpen);
+    }, { oneTimeCallback: true })
       .progressEnd(playTo ? 1 : 0, this._isOpen ? 1 - newStepValue : newStepValue, 300);
   }
   beforeAnimation(shouldOpen) {
@@ -476,6 +484,15 @@ export class Menu {
   }
   afterAnimation(isOpen) {
     var _a;
+    console.log('after animation', isOpen, this.isAnimating);
+    if (this.operationCancelled) {
+      console.log('cancelled');
+      this.operationCancelled = false;
+      this.isAnimating = false;
+      this._isOpen = false;
+      console.log('this.', this.disabled);
+      return;
+    }
     assert(this.isAnimating, '_before() should be called while animating');
     // keep opening/closing the menu disabled for a touch more yet
     // only add listeners/css if it's enabled and isOpen
@@ -535,8 +552,16 @@ export class Menu {
     if (this.gesture) {
       this.gesture.enable(isActive && this.swipeGesture);
     }
-    // Close menu immediately
-    if (!isActive && this._isOpen) {
+    /**
+     * If the menu is disabled but it is still open
+     * then we should close the menu immediately.
+     * Additionally, if the menu is in the process
+     * of animating {open, close} and the menu is disabled
+     * then it should still be closed immediately.
+     * TODO: Do we let the animation finish???
+     * what happens if we navigate away from a page?
+     */
+    if (!isActive && (this._isOpen || this.isAnimating)) {
       // close if this menu is open, and should not be enabled
       this.forceClosing();
     }
@@ -551,14 +576,15 @@ export class Menu {
         menuController._setActiveMenu(this);
       }
     }
-    assert(!this.isAnimating, 'can not be animating');
   }
   forceClosing() {
-    assert(this._isOpen, 'menu cannot be closed');
-    this.isAnimating = true;
-    const ani = this.animation.direction('reverse');
-    ani.play({ sync: true });
-    this.afterAnimation(false);
+    const { animation } = this;
+    if (animation) {
+      console.log('stopping animation');
+      // TODO - disable when menu is fully open
+      animation.stop();
+      this.operationCancelled = true;
+    }
   }
   render() {
     const { type, disabled, isPaneVisible, inheritedAttributes, side } = this;

package/dist/collection/components/popover/utils.js

@@ -650,7 +650,9 @@ export const calculateWindowAdjustment = (side, coordTop, coordLeft, bodyPadding
   let originY = contentOriginY;
   let checkSafeAreaLeft = false;
   let checkSafeAreaRight = false;
-  const triggerTop = triggerCoordinates ? triggerCoordinates.top : bodyHeight / 2 - contentHeight / 2;
+  const triggerTop = triggerCoordinates
+    ? triggerCoordinates.top + triggerCoordinates.height
+    : bodyHeight / 2 - contentHeight / 2;
   const triggerHeight = triggerCoordinates ? triggerCoordinates.height : 0;
   let addPopoverBottomClass = false;
   /**
@@ -690,7 +692,7 @@ export const calculateWindowAdjustment = (side, coordTop, coordLeft, bodyPadding
        * We chose 12 here so that the popover position looks a bit nicer as
        * it is not right up against the edge of the screen.
        */
-      top = Math.max(12, triggerTop - contentHeight - (arrowHeight - 1));
+      top = Math.max(12, triggerTop - contentHeight - triggerHeight - (arrowHeight - 1));
       arrowTop = top + contentHeight;
       originY = 'bottom';
       addPopoverBottomClass = true;
@@ -703,7 +705,6 @@ export const calculateWindowAdjustment = (side, coordTop, coordLeft, bodyPadding
       bottom = bodyPadding;
     }
   }
-  console.log(top, arrowTop);
   return {
     top,
     left,

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

@@ -36,6 +36,7 @@ export const createAnimation = (animationId) => {
   const id = animationId;
   const onFinishCallbacks = [];
   const onFinishOneTimeCallbacks = [];
+  const onStopOneTimeCallbacks = [];
   const elements = [];
   const childAnimations = [];
   const stylesheets = [];
@@ -93,6 +94,28 @@ export const createAnimation = (animationId) => {
   const isRunning = () => {
     return numAnimationsRunning !== 0 && !paused;
   };
+  /**
+   * @internal
+   * Remove a callback from a chosen callback array
+   * @param callbackToRemove: A reference to the callback that should be removed
+   * @param callbackObjects: An array of callbacks that callbackToRemove should be removed from.
+   */
+  const clearCallback = (callbackToRemove, callbackObjects) => {
+    const index = callbackObjects.findIndex((callbackObject) => callbackObject.c === callbackToRemove);
+    if (index > -1) {
+      callbackObjects.splice(index, 1);
+    }
+  };
+  /**
+   * @internal
+   * Add a callback to be fired when an animation is stopped/cancelled.
+   * @param callback: A reference to the callback that should be fired
+   * @param opts: Any options associated with this particular callback
+   */
+  const onStop = (callback, opts) => {
+    onStopOneTimeCallbacks.push({ c: callback, o: opts });
+    return ani;
+  };
   const onFinish = (callback, opts) => {
     const callbacks = (opts === null || opts === void 0 ? void 0 : opts.oneTimeCallback) ? onFinishOneTimeCallbacks : onFinishCallbacks;
     callbacks.push({ c: callback, o: opts });
@@ -761,7 +784,33 @@ export const createAnimation = (animationId) => {
         numAnimationsRunning = childAnimations.length + 1;
         shouldCalculateNumAnimations = false;
       }
-      onFinish(() => resolve(), { oneTimeCallback: true });
+      /**
+       * When one of these callbacks fires we
+       * need to clear the other's callback otherwise
+       * you can potentially get these callbacks
+       * firing multiple times if the play method
+       * is subsequently called.
+       * Example:
+       * animation.play() (onStop and onFinish callbacks are registered)
+       * animation.stop() (onStop callback is fired, onFinish is not)
+       * animation.play() (onStop and onFinish callbacks are registered)
+       * Total onStop callbacks: 1
+       * Total onFinish callbacks: 2
+       */
+      const onStopCallback = () => {
+        clearCallback(onFinishCallback, onFinishOneTimeCallbacks);
+        resolve();
+      };
+      const onFinishCallback = () => {
+        clearCallback(onStopCallback, onStopOneTimeCallbacks);
+        resolve();
+      };
+      /**
+       * The play method resolves when an animation
+       * run either finishes or is cancelled.
+       */
+      onFinish(onFinishCallback, { oneTimeCallback: true });
+      onStop(onStopCallback, { oneTimeCallback: true });
       childAnimations.forEach((animation) => {
         animation.play();
       });
@@ -774,6 +823,14 @@ export const createAnimation = (animationId) => {
       paused = false;
     });
   };
+  /**
+   * Stops an animation and resets it state to the
+   * beginning. This does not fire any onFinish
+   * callbacks because the animation did not finish.
+   * However, since the animation was not destroyed
+   * (i.e. the animation could run again) we do not
+   * clear the onFinish callbacks.
+   */
   const stop = () => {
     childAnimations.forEach((animation) => {
       animation.stop();
@@ -783,6 +840,8 @@ export const createAnimation = (animationId) => {
       initialized = false;
     }
     resetFlags();
+    onStopOneTimeCallbacks.forEach((onStopCallback) => onStopCallback.c(0, ani));
+    onStopOneTimeCallbacks.length = 0;
   };
   const from = (property, value) => {
     const firstFrame = _keyframes[0];

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2023-09-29T13:44:07",
+  "timestamp": "2023-10-02T14:16:59",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.3.0",

package/dist/esm/{animation-a1d9e088.js → animation-92066c62.js}

@@ -159,6 +159,7 @@ const createAnimation = (animationId) => {
   const id = animationId;
   const onFinishCallbacks = [];
   const onFinishOneTimeCallbacks = [];
+  const onStopOneTimeCallbacks = [];
   const elements = [];
   const childAnimations = [];
   const stylesheets = [];
@@ -216,6 +217,28 @@ const createAnimation = (animationId) => {
   const isRunning = () => {
     return numAnimationsRunning !== 0 && !paused;
   };
+  /**
+   * @internal
+   * Remove a callback from a chosen callback array
+   * @param callbackToRemove: A reference to the callback that should be removed
+   * @param callbackObjects: An array of callbacks that callbackToRemove should be removed from.
+   */
+  const clearCallback = (callbackToRemove, callbackObjects) => {
+    const index = callbackObjects.findIndex((callbackObject) => callbackObject.c === callbackToRemove);
+    if (index > -1) {
+      callbackObjects.splice(index, 1);
+    }
+  };
+  /**
+   * @internal
+   * Add a callback to be fired when an animation is stopped/cancelled.
+   * @param callback: A reference to the callback that should be fired
+   * @param opts: Any options associated with this particular callback
+   */
+  const onStop = (callback, opts) => {
+    onStopOneTimeCallbacks.push({ c: callback, o: opts });
+    return ani;
+  };
   const onFinish = (callback, opts) => {
     const callbacks = (opts === null || opts === void 0 ? void 0 : opts.oneTimeCallback) ? onFinishOneTimeCallbacks : onFinishCallbacks;
     callbacks.push({ c: callback, o: opts });
@@ -884,7 +907,33 @@ const createAnimation = (animationId) => {
         numAnimationsRunning = childAnimations.length + 1;
         shouldCalculateNumAnimations = false;
       }
-      onFinish(() => resolve(), { oneTimeCallback: true });
+      /**
+       * When one of these callbacks fires we
+       * need to clear the other's callback otherwise
+       * you can potentially get these callbacks
+       * firing multiple times if the play method
+       * is subsequently called.
+       * Example:
+       * animation.play() (onStop and onFinish callbacks are registered)
+       * animation.stop() (onStop callback is fired, onFinish is not)
+       * animation.play() (onStop and onFinish callbacks are registered)
+       * Total onStop callbacks: 1
+       * Total onFinish callbacks: 2
+       */
+      const onStopCallback = () => {
+        clearCallback(onFinishCallback, onFinishOneTimeCallbacks);
+        resolve();
+      };
+      const onFinishCallback = () => {
+        clearCallback(onStopCallback, onStopOneTimeCallbacks);
+        resolve();
+      };
+      /**
+       * The play method resolves when an animation
+       * run either finishes or is cancelled.
+       */
+      onFinish(onFinishCallback, { oneTimeCallback: true });
+      onStop(onStopCallback, { oneTimeCallback: true });
       childAnimations.forEach((animation) => {
         animation.play();
       });
@@ -897,6 +946,14 @@ const createAnimation = (animationId) => {
       paused = false;
     });
   };
+  /**
+   * Stops an animation and resets it state to the
+   * beginning. This does not fire any onFinish
+   * callbacks because the animation did not finish.
+   * However, since the animation was not destroyed
+   * (i.e. the animation could run again) we do not
+   * clear the onFinish callbacks.
+   */
   const stop = () => {
     childAnimations.forEach((animation) => {
       animation.stop();
@@ -906,6 +963,8 @@ const createAnimation = (animationId) => {
       initialized = false;
     }
     resetFlags();
+    onStopOneTimeCallbacks.forEach((onStopCallback) => onStopCallback.c(0, ani));
+    onStopOneTimeCallbacks.length = 0;
   };
   const from = (property, value) => {
     const firstFrame = _keyframes[0];

package/dist/esm/{index-61bddc90.js → index-9b1940b1.js}

@@ -4,7 +4,7 @@
 import { MENU_BACK_BUTTON_PRIORITY } from './hardware-back-button-39299f84.js';
 import { c as componentOnReady } from './helpers-3379ba19.js';
 import { b as getIonMode } from './ionic-global-b3fc28dd.js';
-import { c as createAnimation } from './animation-a1d9e088.js';
+import { c as createAnimation } from './animation-92066c62.js';
 
 /**
  * baseAnimation

package/dist/esm/{index-87684bba.js → index-ca26aea8.js}

@@ -10,8 +10,8 @@ const LIFECYCLE_WILL_LEAVE = 'ionViewWillLeave';
 const LIFECYCLE_DID_LEAVE = 'ionViewDidLeave';
 const LIFECYCLE_WILL_UNLOAD = 'ionViewWillUnload';
 
-const iosTransitionAnimation = () => import('./ios.transition-81e1aed6.js');
-const mdTransitionAnimation = () => import('./md.transition-5becd8b5.js');
+const iosTransitionAnimation = () => import('./ios.transition-d4be3bd5.js');
+const mdTransitionAnimation = () => import('./md.transition-ae47f354.js');
 // TODO(FW-2832): types
 const transition = (opts) => {
   return new Promise((resolve, reject) => {

package/dist/esm/index.js

@@ -1,16 +1,16 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-export { c as createAnimation } from './animation-a1d9e088.js';
-export { a as LIFECYCLE_DID_ENTER, c as LIFECYCLE_DID_LEAVE, L as LIFECYCLE_WILL_ENTER, b as LIFECYCLE_WILL_LEAVE, d as LIFECYCLE_WILL_UNLOAD, g as getIonPageElement } from './index-87684bba.js';
-export { iosTransitionAnimation } from './ios.transition-81e1aed6.js';
-export { mdTransitionAnimation } from './md.transition-5becd8b5.js';
+export { c as createAnimation } from './animation-92066c62.js';
+export { a as LIFECYCLE_DID_ENTER, c as LIFECYCLE_DID_LEAVE, L as LIFECYCLE_WILL_ENTER, b as LIFECYCLE_WILL_LEAVE, d as LIFECYCLE_WILL_UNLOAD, g as getIonPageElement } from './index-ca26aea8.js';
+export { iosTransitionAnimation } from './ios.transition-d4be3bd5.js';
+export { mdTransitionAnimation } from './md.transition-ae47f354.js';
 export { g as getTimeGivenProgression } from './cubic-bezier-66542bc5.js';
 export { createGesture } from './index-ff313b19.js';
 export { g as getPlatforms, i as initialize, a as isPlatform } from './ionic-global-b3fc28dd.js';
 export { c as componentOnReady } from './helpers-3379ba19.js';
 export { I as IonicSafeString, g as getMode, s as setupConfig } from './config-96c9ace3.js';
-export { m as menuController } from './index-61bddc90.js';
+export { m as menuController } from './index-9b1940b1.js';
 export { b as actionSheetController, a as alertController, l as loadingController, m as modalController, p as pickerController, c as popoverController, t as toastController } from './overlays-8fc6656c.js';
 import './index-7a14ecec.js';
 import './index-2d388930.js';

package/dist/esm/ion-action-sheet.entry.js

@@ -8,7 +8,7 @@ import { c as createLockController } from './lock-controller-e8c6c051.js';
 import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, f as present, g as dismiss, h as eventMethod, s as safeCall, j as prepareOverlay, k as setOverlayId } from './overlays-8fc6656c.js';
 import { g as getClassMap } from './theme-17531cdf.js';
 import { b as getIonMode } from './ionic-global-b3fc28dd.js';
-import { c as createAnimation } from './animation-a1d9e088.js';
+import { c as createAnimation } from './animation-92066c62.js';
 import './haptic-6447af60.js';
 import './capacitor-b4979570.js';
 import './index-7a14ecec.js';

package/dist/esm/ion-alert.entry.js

@@ -9,7 +9,7 @@ import { c as createLockController } from './lock-controller-e8c6c051.js';
 import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall } from './overlays-8fc6656c.js';
 import { g as getClassMap } from './theme-17531cdf.js';
 import { c as config, b as getIonMode } from './ionic-global-b3fc28dd.js';
-import { c as createAnimation } from './animation-a1d9e088.js';
+import { c as createAnimation } from './animation-92066c62.js';
 import './haptic-6447af60.js';
 import './capacitor-b4979570.js';
 import './index-7a14ecec.js';

package/dist/esm/ion-app_8.entry.js

@@ -10,7 +10,7 @@ import { a as findIonContent, p as printIonContentErrorMsg, g as getScrollElemen
 import { c as createKeyboardController } from './keyboard-controller-0c2dce71.js';
 import { g as getTimeGivenProgression } from './cubic-bezier-66542bc5.js';
 import { a as attachComponent, d as detachComponent } from './framework-delegate-aa433dea.js';
-import { t as transition } from './index-87684bba.js';
+import { t as transition } from './index-ca26aea8.js';
 import './index-595d62c9.js';
 import './index-7a14ecec.js';
 import './keyboard-b063f012.js';

package/dist/esm/ion-datetime_3.entry.js

@@ -12,7 +12,7 @@ import { b as getIonMode } from './ionic-global-b3fc28dd.js';
 import { g as generateDayAriaLabel, a as getDay, i as isBefore, b as isAfter, c as isSameDay, d as getPreviousMonth, e as getNextMonth, v as validateParts, f as getPartsFromCalendarDay, h as getEndOfWeek, j as getStartOfWeek, k as getPreviousDay, l as getNextDay, m as getPreviousWeek, n as getNextWeek, p as parseMinParts, o as parseMaxParts, q as parseDate, w as warnIfValueOutOfBounds, r as convertToArrayOfNumbers, s as convertDataToISO, t as getToday, u as getClosestValidDate, x as getNumDaysInMonth, y as getCombinedDateColumnData, z as getMonthColumnData, A as getDayColumnData, B as getYearColumnData, C as isMonthFirstLocale, D as getTimeColumnsData, E as isLocaleDayPeriodRTL, F as getDaysOfWeek, G as getMonthAndYear, H as getDaysOfMonth, I as generateMonths, J as is24Hour, K as getLocalizedTime, L as getMonthAndDay, M as formatValue, N as getNextYear, O as getPreviousYear, P as clampDate, Q as parseAmPm, R as calculateHourFromAMPM } from './data-009dbf15.js';
 import { c as createLockController } from './lock-controller-e8c6c051.js';
 import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall } from './overlays-8fc6656c.js';
-import { c as createAnimation } from './animation-a1d9e088.js';
+import { c as createAnimation } from './animation-92066c62.js';
 import { b as hapticSelectionChanged, h as hapticSelectionEnd, a as hapticSelectionStart } from './haptic-6447af60.js';
 import './index-7a14ecec.js';
 import './framework-delegate-aa433dea.js';

package/dist/esm/ion-loading.entry.js

@@ -8,7 +8,7 @@ import { c as createLockController } from './lock-controller-e8c6c051.js';
 import { d as createDelegateController, e as createTriggerController, B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod } from './overlays-8fc6656c.js';
 import { g as getClassMap } from './theme-17531cdf.js';
 import { c as config, b as getIonMode } from './ionic-global-b3fc28dd.js';
-import { c as createAnimation } from './animation-a1d9e088.js';
+import { c as createAnimation } from './animation-92066c62.js';
 import './index-7a14ecec.js';
 import './framework-delegate-aa433dea.js';
 import './hardware-back-button-39299f84.js';

package/dist/esm/ion-menu_3.entry.js

@@ -6,13 +6,13 @@ import { g as getTimeGivenProgression } from './cubic-bezier-66542bc5.js';
 import { d as doc } from './index-7a14ecec.js';
 import { G as GESTURE_CONTROLLER } from './gesture-controller-0fa396c4.js';
 import { p as isEndSide, i as inheritAriaAttributes, o as assert, l as clamp } from './helpers-3379ba19.js';
-import { m as menuController } from './index-61bddc90.js';
+import { m as menuController } from './index-9b1940b1.js';
 import { q as getPresentedOverlay } from './overlays-8fc6656c.js';
 import { c as config, b as getIonMode } from './ionic-global-b3fc28dd.js';
 import { c as createColorClasses, h as hostContext } from './theme-17531cdf.js';
 import { u as menuOutline, v as menuSharp } from './index-ecfc2c9f.js';
 import './hardware-back-button-39299f84.js';
-import './animation-a1d9e088.js';
+import './animation-92066c62.js';
 import './framework-delegate-aa433dea.js';
 import './index-595d62c9.js';
 
@@ -53,6 +53,7 @@ const Menu = class {
       }
       this.trapKeyboardFocus(ev, document);
     };
+    this.operationCancelled = false;
     this.isPaneVisible = false;
     this.isEndSide = false;
     this.contentId = undefined;
@@ -337,18 +338,23 @@ const Menu = class {
     const easingReverse = mode === 'ios' ? iosEasingReverse : mdEasingReverse;
     const ani = this.animation
       .direction(isReversed ? 'reverse' : 'normal')
-      .easing(isReversed ? easingReverse : easing)
-      .onFinish(() => {
-      if (ani.getDirection() === 'reverse') {
-        ani.direction('normal');
-      }
-    });
+      .easing(isReversed ? easingReverse : easing);
     if (animated) {
       await ani.play();
     }
     else {
       ani.play({ sync: true });
     }
+    /**
+     * We run this after the play invocation
+     * instead of using ani.onFinish so that
+     * multiple onFinish callbacks do not get
+     * run if an animation is played, stopped,
+     * and then played again.
+     */
+    if (ani.getDirection() === 'reverse') {
+      ani.direction('normal');
+    }
   }
   _isActive() {
     return !this.disabled && !this.isPaneVisible;
@@ -438,7 +444,9 @@ const Menu = class {
     const playTo = this._isOpen ? !shouldComplete : shouldComplete;
     this.animation
       .easing('cubic-bezier(0.4, 0.0, 0.6, 1)')
-      .onFinish(() => this.afterAnimation(shouldOpen), { oneTimeCallback: true })
+      .onFinish(() => {
+      return this.afterAnimation(shouldOpen);
+    }, { oneTimeCallback: true })
       .progressEnd(playTo ? 1 : 0, this._isOpen ? 1 - newStepValue : newStepValue, 300);
   }
   beforeAnimation(shouldOpen) {
@@ -485,6 +493,15 @@ const Menu = class {
   }
   afterAnimation(isOpen) {
     var _a;
+    console.log('after animation', isOpen, this.isAnimating);
+    if (this.operationCancelled) {
+      console.log('cancelled');
+      this.operationCancelled = false;
+      this.isAnimating = false;
+      this._isOpen = false;
+      console.log('this.', this.disabled);
+      return;
+    }
     assert(this.isAnimating, '_before() should be called while animating');
     // keep opening/closing the menu disabled for a touch more yet
     // only add listeners/css if it's enabled and isOpen
@@ -544,8 +561,16 @@ const Menu = class {
     if (this.gesture) {
       this.gesture.enable(isActive && this.swipeGesture);
     }
-    // Close menu immediately
-    if (!isActive && this._isOpen) {
+    /**
+     * If the menu is disabled but it is still open
+     * then we should close the menu immediately.
+     * Additionally, if the menu is in the process
+     * of animating {open, close} and the menu is disabled
+     * then it should still be closed immediately.
+     * TODO: Do we let the animation finish???
+     * what happens if we navigate away from a page?
+     */
+    if (!isActive && (this._isOpen || this.isAnimating)) {
       // close if this menu is open, and should not be enabled
       this.forceClosing();
     }
@@ -560,14 +585,15 @@ const Menu = class {
         menuController._setActiveMenu(this);
       }
     }
-    assert(!this.isAnimating, 'can not be animating');
   }
   forceClosing() {
-    assert(this._isOpen, 'menu cannot be closed');
-    this.isAnimating = true;
-    const ani = this.animation.direction('reverse');
-    ani.play({ sync: true });
-    this.afterAnimation(false);
+    const { animation } = this;
+    if (animation) {
+      console.log('stopping animation');
+      // TODO - disable when menu is fully open
+      animation.stop();
+      this.operationCancelled = true;
+    }
   }
   render() {
     const { type, disabled, isPaneVisible, inheritedAttributes, side } = this;

package/dist/esm/ion-modal.entry.js

@@ -10,10 +10,10 @@ import { p as printIonWarning } from './index-595d62c9.js';
 import { g as getCapacitor } from './capacitor-b4979570.js';
 import { G as GESTURE, e as createTriggerController, B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, n as activeAnimations, g as dismiss, h as eventMethod } from './overlays-8fc6656c.js';
 import { g as getClassMap } from './theme-17531cdf.js';
-import { e as deepReady, w as waitForMount } from './index-87684bba.js';
+import { e as deepReady, w as waitForMount } from './index-ca26aea8.js';
 import { b as getIonMode, c as config } from './ionic-global-b3fc28dd.js';
 import { KEYBOARD_DID_OPEN } from './keyboard-b551279d.js';
-import { c as createAnimation } from './animation-a1d9e088.js';
+import { c as createAnimation } from './animation-92066c62.js';
 import { g as getTimeGivenProgression } from './cubic-bezier-66542bc5.js';
 import { createGesture } from './index-ff313b19.js';
 import { w as win } from './index-7a14ecec.js';

package/dist/esm/ion-nav_2.entry.js

@@ -4,7 +4,7 @@
 import { r as registerInstance, d as createEvent, h, f as getElement, H as Host } from './index-2d388930.js';
 import { g as getTimeGivenProgression } from './cubic-bezier-66542bc5.js';
 import { o as assert, s as shallowEqualStringMap } from './helpers-3379ba19.js';
-import { l as lifecycle, t as transition, s as setPageHidden, d as LIFECYCLE_WILL_UNLOAD, b as LIFECYCLE_WILL_LEAVE, c as LIFECYCLE_DID_LEAVE } from './index-87684bba.js';
+import { l as lifecycle, t as transition, s as setPageHidden, d as LIFECYCLE_WILL_UNLOAD, b as LIFECYCLE_WILL_LEAVE, c as LIFECYCLE_DID_LEAVE } from './index-ca26aea8.js';
 import { b as getIonMode, c as config } from './ionic-global-b3fc28dd.js';
 import { a as attachComponent } from './framework-delegate-aa433dea.js';
 

package/dist/esm/ion-popover.entry.js

@@ -9,8 +9,8 @@ import { p as printIonWarning } from './index-595d62c9.js';
 import { B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, o as focusFirstDescendant, g as dismiss, h as eventMethod } from './overlays-8fc6656c.js';
 import { b as getIonMode, a as isPlatform } from './ionic-global-b3fc28dd.js';
 import { g as getClassMap } from './theme-17531cdf.js';
-import { e as deepReady, w as waitForMount } from './index-87684bba.js';
-import { c as createAnimation } from './animation-a1d9e088.js';
+import { e as deepReady, w as waitForMount } from './index-ca26aea8.js';
+import { c as createAnimation } from './animation-92066c62.js';
 import './index-7a14ecec.js';
 import './hardware-back-button-39299f84.js';
 
@@ -660,7 +660,9 @@ const calculateWindowAdjustment = (side, coordTop, coordLeft, bodyPadding, bodyW
   let originY = contentOriginY;
   let checkSafeAreaLeft = false;
   let checkSafeAreaRight = false;
-  const triggerTop = triggerCoordinates ? triggerCoordinates.top : bodyHeight / 2 - contentHeight / 2;
+  const triggerTop = triggerCoordinates
+    ? triggerCoordinates.top + triggerCoordinates.height
+    : bodyHeight / 2 - contentHeight / 2;
   const triggerHeight = triggerCoordinates ? triggerCoordinates.height : 0;
   let addPopoverBottomClass = false;
   /**
@@ -700,7 +702,7 @@ const calculateWindowAdjustment = (side, coordTop, coordLeft, bodyPadding, bodyW
        * We chose 12 here so that the popover position looks a bit nicer as
        * it is not right up against the edge of the screen.
        */
-      top = Math.max(12, triggerTop - contentHeight - (arrowHeight - 1));
+      top = Math.max(12, triggerTop - contentHeight - triggerHeight - (arrowHeight - 1));
       arrowTop = top + contentHeight;
       originY = 'bottom';
       addPopoverBottomClass = true;
@@ -713,7 +715,6 @@ const calculateWindowAdjustment = (side, coordTop, coordLeft, bodyPadding, bodyW
       bottom = bodyPadding;
     }
   }
-  console.log(top, arrowTop);
   return {
     top,
     left,

package/dist/esm/ion-refresher_2.entry.js

@@ -7,7 +7,7 @@ import { I as ION_CONTENT_CLASS_SELECTOR, b as ION_CONTENT_ELEMENT_SELECTOR, p a
 import { t as transitionEndAsync, c as componentOnReady, l as clamp, g as getElementRoot, r as raf } from './helpers-3379ba19.js';
 import { d as hapticImpact, I as ImpactStyle } from './haptic-6447af60.js';
 import { a as isPlatform, b as getIonMode, c as config } from './ionic-global-b3fc28dd.js';
-import { c as createAnimation } from './animation-a1d9e088.js';
+import { c as createAnimation } from './animation-92066c62.js';
 import { E as ENABLE_HTML_CONTENT_DEFAULT, a as sanitizeDOMString } from './config-96c9ace3.js';
 import { h as caretBackSharp, i as arrowDown } from './index-ecfc2c9f.js';
 import { S as SPINNERS } from './spinner-configs-d09fbbbb.js';

package/dist/esm/ion-toast.entry.js

@@ -9,7 +9,7 @@ import { p as printIonWarning } from './index-595d62c9.js';
 import { d as createDelegateController, e as createTriggerController, i as isCancel, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall } from './overlays-8fc6656c.js';
 import { g as getClassMap, c as createColorClasses } from './theme-17531cdf.js';
 import { c as config, b as getIonMode } from './ionic-global-b3fc28dd.js';
-import { c as createAnimation } from './animation-a1d9e088.js';
+import { c as createAnimation } from './animation-92066c62.js';
 import './index-7a14ecec.js';
 import './framework-delegate-aa433dea.js';
 import './hardware-back-button-39299f84.js';

package/dist/esm/{ios.transition-81e1aed6.js → ios.transition-d4be3bd5.js}

@@ -1,8 +1,8 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { c as createAnimation } from './animation-a1d9e088.js';
-import { g as getIonPageElement } from './index-87684bba.js';
+import { c as createAnimation } from './animation-92066c62.js';
+import { g as getIonPageElement } from './index-ca26aea8.js';
 import './index-7a14ecec.js';
 import './helpers-3379ba19.js';
 import './index-2d388930.js';