voyager-ionic-core 8.8.17 → 9.0.3

package/dist/collection/components/modal/gestures/sheet.js

@@ -6,7 +6,7 @@ import { createGesture } from "../../../utils/gesture/index";
 import { clamp, getElementRoot, raf } from "../../../utils/helpers";
 import { FOCUS_TRAP_DISABLE_CLASS } from "../../../utils/overlays";
 import { getBackdropValueForSheet } from "../utils";
-import { calculateSpringStep, handleCanDismiss } from "./utils";
+import { calculateSpringStep, canSwipeOnContent, handleCanDismiss } from "./utils";
 export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, backdropBreakpoint, animation, breakpoints = [], expandToScroll, getCurrentBreakpoint, onDismiss, onBreakpointChange, onDragStart, onDragMove, onDragEnd) => {
     // Defaults for the sheet swipe animation
     const defaultBackdrop = [
@@ -30,6 +30,8 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
         ],
     };
     const contentEl = baseEl.querySelector('ion-content');
+    // Cache the initial value so the gesture restores it instead of forcing scrolling on.
+    const initialContentScrollY = contentEl?.scrollY ?? true;
     const height = wrapperEl.clientHeight;
     let currentBreakpoint = initialBreakpoint;
     let offset = 0;
@@ -95,9 +97,9 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
                 cachedFooterEl.style.removeProperty('height');
                 cachedFooterEl.style.removeProperty('top');
                 cachedFooterEl.style.removeProperty('left');
-                page === null || page === void 0 ? void 0 : page.style.removeProperty('padding-bottom');
+                page?.style.removeProperty('padding-bottom');
                 // Move to page
-                page === null || page === void 0 ? void 0 : page.appendChild(cachedFooterEl);
+                page?.appendChild(cachedFooterEl);
             });
         }
         else {
@@ -141,7 +143,7 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
                 // when the footer is positioned absolutely. This has to be done before we
                 // make the footer absolutely positioned or we may accidentally cause the
                 // sheet to scroll.
-                page === null || page === void 0 ? void 0 : page.style.setProperty('padding-bottom', `${footerHeights}px`);
+                page?.style.setProperty('padding-bottom', `${footerHeights}px`);
                 // Apply positioning styles to keep footer at bottom
                 cachedFooterEl.classList.add('modal-footer-moving');
                 // Apply our preserved styles to pin the footer
@@ -166,7 +168,7 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
     if (wrapperAnimation && backdropAnimation) {
         wrapperAnimation.keyframes([...SheetDefaults.WRAPPER_KEYFRAMES]);
         backdropAnimation.keyframes([...SheetDefaults.BACKDROP_KEYFRAMES]);
-        contentAnimation === null || contentAnimation === void 0 ? void 0 : contentAnimation.keyframes([...SheetDefaults.CONTENT_KEYFRAMES]);
+        contentAnimation?.keyframes([...SheetDefaults.CONTENT_KEYFRAMES]);
         animation.progressStart(true, 1 - currentBreakpoint);
         /**
          * If backdrop is not enabled, then content
@@ -190,9 +192,6 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
     }
     const canStart = (detail) => {
         /**
-         * If we are swiping on the content, swiping should only be possible if the content
-         * is scrolled all the way to the top so that we do not interfere with scrolling.
-         *
          * We cannot assume that the `ion-content` target will remain consistent between swipes.
          * For example, when using ion-nav within a modal it is possible to swipe, push a view,
          * and then swipe again. The target content will not be the same between swipes.
@@ -200,37 +199,21 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
         const contentEl = findClosestIonContent(detail.event.target);
         currentBreakpoint = getCurrentBreakpoint();
         /**
-         * If `expandToScroll` is disabled, we should not allow the swipe gesture
-         * to start if the content is not scrolled to the top.
+         * Upwards swipes on the content cannot move the sheet anyway, so this only
+         * blocks swiping the sheet down from the content.
          */
-        if (!expandToScroll && contentEl) {
-            const scrollEl = isIonContent(contentEl) ? getElementRoot(contentEl).querySelector('.inner-scroll') : contentEl;
-            return scrollEl.scrollTop === 0;
-        }
-        if (currentBreakpoint === 1 && contentEl) {
-            /**
-             * The modal should never swipe to close on the content with a refresher.
-             * Note 1: We cannot solve this by making this gesture have a higher priority than
-             * the refresher gesture as the iOS native refresh gesture uses a scroll listener in
-             * addition to a gesture.
-             *
-             * Note 2: Do not use getScrollElement here because we need this to be a synchronous
-             * operation, and getScrollElement is asynchronous.
-             */
-            const scrollEl = isIonContent(contentEl) ? getElementRoot(contentEl).querySelector('.inner-scroll') : contentEl;
-            const hasRefresherInContent = !!contentEl.querySelector('ion-refresher');
-            return !hasRefresherInContent && scrollEl.scrollTop === 0;
+        if (contentEl && (!expandToScroll || currentBreakpoint === 1)) {
+            return canSwipeOnContent(contentEl);
         }
         return true;
     };
     const onStart = (detail) => {
-        var _a;
         /**
          * Firefox automatically selects the header text during drag
          * due to the focusable wrapper (tabindex="-1"). Remove any
          * selection that may have occurred.
          */
-        (_a = window.getSelection()) === null || _a === void 0 ? void 0 : _a.removeAllRanges();
+        window.getSelection()?.removeAllRanges();
         /**
          * If canDismiss is anything other than `true`
          * then users should be able to swipe down
@@ -358,12 +341,22 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
     };
     const onEnd = (detail) => {
         const snapBreakpoint = calculateSnapBreakpoint(detail.deltaY);
+        /**
+         * `snapBreakpoint === 0` is not enough on its own. `canDismiss: false`
+         * snaps to 0 but never dismisses, since `handleCanDismiss` returns early
+         * when canDismiss is not a function. A canDismiss function dismisses
+         * through `handleCanDismiss`, which awaits the callback, so the outcome
+         * is not known when this event is emitted.
+         */
+        const shouldPreventDismiss = canDismissBlocksGesture && snapBreakpoint === 0;
+        const isDismissing = shouldPreventDismiss ? typeof baseEl.canDismiss === 'function' : snapBreakpoint === 0;
         const eventDetail = {
             currentY: detail.currentY,
             deltaY: detail.deltaY,
             velocityY: detail.velocityY,
             progress: calculateProgress(detail.currentY),
             snapBreakpoint,
+            isDismissing,
         };
         /**
          * If expandToScroll is disabled, we should not allow the moveSheetToBreakpoint
@@ -379,7 +372,11 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
              * swap to moving on drag and if we don't swap back here then the footer will get stuck.
              */
             swapFooterPosition('stationary');
-            onDragEnd(eventDetail);
+            /**
+             * The sheet does not move in this case, so the gesture
+             * never dismisses the modal.
+             */
+            onDragEnd({ ...eventDetail, isDismissing: false });
             return;
         }
         moveSheetToBreakpoint({
@@ -452,14 +449,14 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
             onDismiss();
         }
         /**
-         * Enables scrolling immediately if the sheet is about to fully expand
-         * or if it allows scrolling at any breakpoint. Without this, there would
+         * Restores the content's scroll setting immediately if the sheet is about to
+         * fully expand or if it allows scrolling at any breakpoint. Without this, there would
          * be a ~500ms delay while the modal animation completes, causing a
          * noticeable lag. Native iOS allows scrolling as soon as the gesture is
          * released, so we align with that behavior.
          */
         if (contentEl && (snapToBreakpoint === breakpoints[breakpoints.length - 1] || !expandToScroll)) {
-            contentEl.scrollY = true;
+            contentEl.scrollY = initialContentScrollY;
         }
         /**
          * If expandToScroll is disabled and we're animating
@@ -494,7 +491,7 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
                         raf(() => {
                             wrapperAnimation.keyframes([...SheetDefaults.WRAPPER_KEYFRAMES]);
                             backdropAnimation.keyframes([...SheetDefaults.BACKDROP_KEYFRAMES]);
-                            contentAnimation === null || contentAnimation === void 0 ? void 0 : contentAnimation.keyframes([...SheetDefaults.CONTENT_KEYFRAMES]);
+                            contentAnimation?.keyframes([...SheetDefaults.CONTENT_KEYFRAMES]);
                             animation.progressStart(true, 1 - snapToBreakpoint);
                             currentBreakpoint = snapToBreakpoint;
                             onBreakpointChange(currentBreakpoint);
@@ -641,8 +638,19 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
         onMove,
         onEnd,
     });
+    /**
+     * Puts the content back the way the app declared it. A sheet can dismiss
+     * without going through moveSheetToBreakpoint, and an inline modal reuses
+     * the same element on the next present.
+     */
+    const resetContentScroll = () => {
+        if (contentEl) {
+            contentEl.scrollY = initialContentScrollY;
+        }
+    };
     return {
         gesture,
         moveSheetToBreakpoint,
+        resetContentScroll,
     };
 };

package/dist/collection/components/modal/gestures/swipe-to-close.js

@@ -4,10 +4,10 @@
 import { getTimeGivenProgression } from "../../../utils/animation/cubic-bezier";
 import { isIonContent, findClosestIonContent, disableContentScrollY, resetContentScrollY } from "../../../utils/content/index";
 import { createGesture } from "../../../utils/gesture/index";
-import { clamp, getElementRoot } from "../../../utils/helpers";
+import { clamp } from "../../../utils/helpers";
 import { OVERLAY_GESTURE_PRIORITY } from "../../../utils/overlays";
 import { setCardStatusBarDark, setCardStatusBarDefault } from "../utils";
-import { calculateSpringStep, handleCanDismiss } from "./utils";
+import { calculateSpringStep, canSwipeOnContent, handleCanDismiss } from "./utils";
 // Defaults for the card swipe animation
 export const SwipeToCloseDefaults = {
     MIN_PRESENTING_SCALE: 0.915,
@@ -22,7 +22,6 @@ export const createSwipeToCloseGesture = (el, animation, statusBarStyle, onDismi
     let isOpen = false;
     let canDismissBlocksGesture = false;
     let contentEl = null;
-    let scrollEl = null;
     const canDismissMaxStep = 0.2;
     let initialScrollY = true;
     let lastStep = 0;
@@ -45,12 +44,6 @@ export const createSwipeToCloseGesture = (el, animation, statusBarStyle, onDismi
             return true;
         }
         /**
-         * If we are swiping on the content,
-         * swiping should only be possible if
-         * the content is scrolled all the way
-         * to the top so that we do not interfere
-         * with scrolling.
-         *
          * We cannot assume that the `ion-content`
          * target will remain consistent between
          * swipes. For example, when using
@@ -61,29 +54,7 @@ export const createSwipeToCloseGesture = (el, animation, statusBarStyle, onDismi
          */
         contentEl = findClosestIonContent(target);
         if (contentEl) {
-            /**
-             * The card should never swipe to close
-             * on the content with a refresher.
-             * Note: We cannot solve this by making the
-             * swipeToClose gesture have a higher priority
-             * than the refresher gesture as the iOS native
-             * refresh gesture uses a scroll listener in
-             * addition to a gesture.
-             *
-             * Note: Do not use getScrollElement here
-             * because we need this to be a synchronous
-             * operation, and getScrollElement is
-             * asynchronous.
-             */
-            if (isIonContent(contentEl)) {
-                const root = getElementRoot(contentEl);
-                scrollEl = root.querySelector('.inner-scroll');
-            }
-            else {
-                scrollEl = contentEl;
-            }
-            const hasRefresherInContent = !!contentEl.querySelector('ion-refresher');
-            return !hasRefresherInContent && scrollEl.scrollTop === 0;
+            return canSwipeOnContent(contentEl);
         }
         /**
          * Card should be swipeable on all
@@ -96,14 +67,13 @@ export const createSwipeToCloseGesture = (el, animation, statusBarStyle, onDismi
         return false;
     };
     const onStart = (detail) => {
-        var _a;
         const { deltaY } = detail;
         /**
          * Firefox automatically selects the header text during drag
          * due to the focusable wrapper (tabindex="-1"). Remove any
          * selection that may have occurred.
          */
-        (_a = window.getSelection()) === null || _a === void 0 ? void 0 : _a.removeAllRanges();
+        window.getSelection()?.removeAllRanges();
         /**
          * Get the initial scrollY value so
          * that we can correctly reset the scrollY
@@ -256,17 +226,30 @@ export const createSwipeToCloseGesture = (el, animation, statusBarStyle, onDismi
          * check canDismiss. 25% was chosen
          * to avoid accidental swipes.
          */
-        if (isAttemptingDismissWithCanDismiss && clampedStep > maxStep / 4) {
+        const isAttemptingCanDismiss = isAttemptingDismissWithCanDismiss && clampedStep > maxStep / 4;
+        if (isAttemptingCanDismiss) {
             handleCanDismiss(el, animation);
         }
         else if (shouldComplete) {
             onDismiss();
         }
+        /**
+         * `shouldComplete` is not enough on its own, since it is always `false`
+         * when canDismiss blocks the gesture. `canDismiss: false` blocks it and
+         * never dismisses, because `handleCanDismiss` returns early when
+         * canDismiss is not a function. A canDismiss function dismisses through
+         * `handleCanDismiss`, which awaits the callback, so the outcome is not
+         * known when this event is emitted.
+         */
+        const isDismissing = isAttemptingDismissWithCanDismiss
+            ? isAttemptingCanDismiss && typeof el.canDismiss === 'function'
+            : shouldComplete;
         const eventDetail = {
             currentY: detail.currentY,
             deltaY: detail.deltaY,
             velocityY: detail.velocityY,
             progress: calculateProgress(el, detail.deltaY),
+            isDismissing,
             snapBreakpoint: shouldComplete ? 0 : 1,
         };
         onDragEnd(eventDetail);

package/dist/collection/components/modal/gestures/utils.js

@@ -1,7 +1,24 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
+import { findRefresherInContent, isIonContent } from "../../../utils/content/index";
+import { getElementRoot } from "../../../utils/helpers";
 import { GESTURE } from "../../../utils/overlays";
+/**
+ * Swiping is only possible when the content is scrolled to the top, so that we
+ * do not interfere with scrolling, and never on content with a refresher.
+ *
+ * Note: We cannot solve the refresher case with gesture priority as the iOS
+ * native refresh gesture uses a scroll listener in addition to a gesture.
+ *
+ * Note: Do not use `getScrollElement` here because we need this to be a
+ * synchronous operation, and `getScrollElement` is asynchronous.
+ */
+export const canSwipeOnContent = (contentEl) => {
+    const scrollEl = isIonContent(contentEl) ? getElementRoot(contentEl).querySelector('.inner-scroll') : contentEl;
+    const hasRefresherInContent = !!findRefresherInContent(contentEl);
+    return !hasRefresherInContent && scrollEl.scrollTop === 0;
+};
 export const handleCanDismiss = async (el, animation) => {
     /**
      * If canDismiss is not a function