@ionic/core 8.7.17-dev.11772118942.181221d4 → 8.7.17-dev.11772568074.1d7a4aea

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

@@ -90,7 +90,8 @@ export class MenuButton {
                         "Color": {
                             "location": "import",
                             "path": "../../interface",
-                            "id": "src/interface.d.ts::Color"
+                            "id": "src/interface.d.ts::Color",
+                            "referenceLocation": "Color"
                         }
                     }
                 },

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

@@ -339,17 +339,25 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
             : step;
         offset = clamp(0.0001, processedStep, maxStep);
         animation.progressStep(offset);
-        const closest = calculateClosestBreakpoint(detail.velocityY, detail.deltaY);
+        const snapBreakpoint = calculateSnapBreakpoint(detail.deltaY);
         const eventDetail = {
             currentY: detail.currentY,
             deltaY: detail.deltaY,
             velocityY: detail.velocityY,
             progress: calculateProgress(detail.currentY),
-            currentBreakpoint: closest,
+            snapBreakpoint: snapBreakpoint,
         };
         onDragMove(eventDetail);
     };
     const onEnd = (detail) => {
+        const snapBreakpoint = calculateSnapBreakpoint(detail.deltaY);
+        const eventDetail = {
+            currentY: detail.currentY,
+            deltaY: detail.deltaY,
+            velocityY: detail.velocityY,
+            progress: calculateProgress(detail.currentY),
+            snapBreakpoint,
+        };
         /**
          * If expandToScroll is disabled, we should not allow the moveSheetToBreakpoint
          * function to be called if the user is trying to swipe content upwards and the content
@@ -364,11 +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);
             return;
         }
-        const closest = calculateClosestBreakpoint(detail.velocityY, detail.deltaY);
         moveSheetToBreakpoint({
-            breakpoint: closest,
+            breakpoint: snapBreakpoint,
             breakpointOffset: offset,
             canDismiss: canDismissBlocksGesture,
             /**
@@ -377,13 +385,6 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
              */
             animated: true,
         });
-        const eventDetail = {
-            currentY: detail.currentY,
-            deltaY: detail.deltaY,
-            velocityY: detail.velocityY,
-            progress: calculateProgress(detail.currentY),
-            currentBreakpoint: closest,
-        };
         onDragEnd(eventDetail);
     };
     const moveSheetToBreakpoint = (options) => {
@@ -525,21 +526,32 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
         });
     };
     /**
-     * Calculates the closest breakpoint based on the current velocity and deltaY.
+     * Calculates the breakpoint based on the current deltaY.
      * This determines where the sheet should snap to when the user releases the
      * gesture.
      *
-     * @param velocityY The current velocity of the gesture in the Y direction.
      * @param deltaY The change in Y position since the gesture started.
-     * @returns The closest breakpoint value.
+     * @returns The snap breakpoint value.
      */
-    const calculateClosestBreakpoint = (velocityY, deltaY) => {
-        const threshold = (deltaY + velocityY * 350) / height;
-        const diff = currentBreakpoint - threshold;
-        const closest = breakpoints.reduce((a, b) => {
-            return Math.abs(b - diff) < Math.abs(a - diff) ? b : a;
+    const calculateSnapBreakpoint = (deltaY) => {
+        /**
+         * Calculates the real-time vertical position of the modal.
+         * We combine the wrapper's current bounding box position with the
+         * gesture's deltaY to account for the physical movement during the drag.
+         */
+        const currentY = wrapperEl.getBoundingClientRect().top + deltaY;
+        /**
+         * Convert that pixel position back into a 0 to 1 progress value.
+         */
+        const currentProgress = calculateProgress(currentY);
+        /**
+         * Find and return the defined breakpoint that is closest to the
+         * current progress.
+         */
+        const snapBreakpoint = breakpoints.reduce((a, b) => {
+            return Math.abs(b - currentProgress) < Math.abs(a - currentProgress) ? b : a;
         });
-        return closest;
+        return snapBreakpoint;
     };
     /**
      * Calculates the progress of the swipe gesture.
@@ -556,7 +568,6 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
     const calculateProgress = (currentY) => {
         const minBreakpoint = breakpoints[0];
         const maxBreakpoint = breakpoints[breakpoints.length - 1];
-        // Convert breakpoints to pixel Y coordinates
         /**
          * The lowest point the sheet can be dragged to aka the point at which
          * the sheet is fully closed.

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

@@ -984,20 +984,20 @@ export class Modal {
         const isCardModal = presentingElement !== undefined && mode === 'ios';
         const isHandleCycle = handleBehavior === 'cycle';
         const isSheetModalWithHandle = isSheetModal && showHandle;
-        return (h(Host, Object.assign({ key: 'bca3cbdb2ce8e5127d27eae7494c434aaeddaf88', "no-router": true,
+        return (h(Host, Object.assign({ key: '2ddd1cf92efe244adb5a8086f8b7c537aa966684', "no-router": true,
             // Allow the modal to be navigable when the handle is focusable
             tabIndex: isHandleCycle && isSheetModalWithHandle ? 0 : -1 }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }), h("ion-backdrop", { key: 'b1c4112123d84d8a9b9d455bcc17d884f99d9f28', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: '080c8e6d37b311a1b5ad2655d99f18668abae211', class: "modal-shadow" }), h("div", Object.assign({ key: '8ba05e9520b1b5529bf0caeb766da5bf612d4d14',
+            }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }), h("ion-backdrop", { key: 'a757a70858d77aa13233e07d6a966b35a97ca41d', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: '160d8c9d180924db0b0c51659c28b1eeaf28924a', class: "modal-shadow" }), h("div", Object.assign({ key: '75ec5207aabb03a9e455a93da40a10ef1c24c771',
             /*
               role and aria-modal must be used on the
               same element. They must also be set inside the
               shadow DOM otherwise ion-button will not be highlighted
               when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
             */
-            role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { key: '2d2d5d731f55755f32ebcbf557f97486dc6202a6', class: "modal-handle",
+            role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { key: '0a4fdf39c3086bcfcc72547b2fa45a8db20dca4f', class: "modal-handle",
             // Prevents the handle from receiving keyboard focus when it does not cycle
-            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle", ref: (el) => (this.dragHandleEl = el) })), h("slot", { key: 'c717d19865dafba02e15db79bc0662c5d89e96fd', onSlotchange: this.onSlotChange }))));
+            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle", ref: (el) => (this.dragHandleEl = el) })), h("slot", { key: 'ba6e90ee447db65f62ed659d4497d22463216823', onSlotchange: this.onSlotChange }))));
     }
     static get is() { return "ion-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -1070,7 +1070,8 @@ export class Modal {
                         "FrameworkDelegate": {
                             "location": "import",
                             "path": "../../interface",
-                            "id": "src/interface.d.ts::FrameworkDelegate"
+                            "id": "src/interface.d.ts::FrameworkDelegate",
+                            "referenceLocation": "FrameworkDelegate"
                         }
                     }
                 },
@@ -1116,7 +1117,8 @@ export class Modal {
                         "AnimationBuilder": {
                             "location": "import",
                             "path": "../../interface",
-                            "id": "src/interface.d.ts::AnimationBuilder"
+                            "id": "src/interface.d.ts::AnimationBuilder",
+                            "referenceLocation": "AnimationBuilder"
                         }
                     }
                 },
@@ -1139,7 +1141,8 @@ export class Modal {
                         "AnimationBuilder": {
                             "location": "import",
                             "path": "../../interface",
-                            "id": "src/interface.d.ts::AnimationBuilder"
+                            "id": "src/interface.d.ts::AnimationBuilder",
+                            "referenceLocation": "AnimationBuilder"
                         }
                     }
                 },
@@ -1257,7 +1260,8 @@ export class Modal {
                         "ModalHandleBehavior": {
                             "location": "import",
                             "path": "./modal-interface",
-                            "id": "src/components/modal/modal-interface.ts::ModalHandleBehavior"
+                            "id": "src/components/modal/modal-interface.ts::ModalHandleBehavior",
+                            "referenceLocation": "ModalHandleBehavior"
                         }
                     }
                 },
@@ -1283,7 +1287,8 @@ export class Modal {
                         "ComponentRef": {
                             "location": "import",
                             "path": "../../interface",
-                            "id": "src/interface.d.ts::ComponentRef"
+                            "id": "src/interface.d.ts::ComponentRef",
+                            "referenceLocation": "ComponentRef"
                         }
                     }
                 },
@@ -1306,12 +1311,13 @@ export class Modal {
                 "mutable": false,
                 "complexType": {
                     "original": "ComponentProps",
-                    "resolved": "undefined | { [key: string]: any; }",
+                    "resolved": "T | undefined",
                     "references": {
                         "ComponentProps": {
                             "location": "import",
                             "path": "../../interface",
-                            "id": "src/interface.d.ts::ComponentProps"
+                            "id": "src/interface.d.ts::ComponentProps",
+                            "referenceLocation": "ComponentProps"
                         }
                     }
                 },
@@ -1608,7 +1614,8 @@ export class Modal {
                         "OverlayEventDetail": {
                             "location": "import",
                             "path": "../../utils/overlays-interface",
-                            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+                            "id": "src/utils/overlays-interface.ts::OverlayEventDetail",
+                            "referenceLocation": "OverlayEventDetail"
                         }
                     }
                 }
@@ -1629,7 +1636,8 @@ export class Modal {
                         "OverlayEventDetail": {
                             "location": "import",
                             "path": "../../utils/overlays-interface",
-                            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+                            "id": "src/utils/overlays-interface.ts::OverlayEventDetail",
+                            "referenceLocation": "OverlayEventDetail"
                         }
                     }
                 }
@@ -1650,7 +1658,8 @@ export class Modal {
                         "ModalBreakpointChangeEventDetail": {
                             "location": "import",
                             "path": "./modal-interface",
-                            "id": "src/components/modal/modal-interface.ts::ModalBreakpointChangeEventDetail"
+                            "id": "src/components/modal/modal-interface.ts::ModalBreakpointChangeEventDetail",
+                            "referenceLocation": "ModalBreakpointChangeEventDetail"
                         }
                     }
                 }
@@ -1701,7 +1710,8 @@ export class Modal {
                         "OverlayEventDetail": {
                             "location": "import",
                             "path": "../../utils/overlays-interface",
-                            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+                            "id": "src/utils/overlays-interface.ts::OverlayEventDetail",
+                            "referenceLocation": "OverlayEventDetail"
                         }
                     }
                 }
@@ -1722,7 +1732,8 @@ export class Modal {
                         "OverlayEventDetail": {
                             "location": "import",
                             "path": "../../utils/overlays-interface",
-                            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+                            "id": "src/utils/overlays-interface.ts::OverlayEventDetail",
+                            "referenceLocation": "OverlayEventDetail"
                         }
                     }
                 }
@@ -1776,7 +1787,8 @@ export class Modal {
                         "ModalDragEventDetail": {
                             "location": "import",
                             "path": "./modal-interface",
-                            "id": "src/components/modal/modal-interface.ts::ModalDragEventDetail"
+                            "id": "src/components/modal/modal-interface.ts::ModalDragEventDetail",
+                            "referenceLocation": "ModalDragEventDetail"
                         }
                     }
                 }
@@ -1797,7 +1809,8 @@ export class Modal {
                         "ModalDragEventDetail": {
                             "location": "import",
                             "path": "./modal-interface",
-                            "id": "src/components/modal/modal-interface.ts::ModalDragEventDetail"
+                            "id": "src/components/modal/modal-interface.ts::ModalDragEventDetail",
+                            "referenceLocation": "ModalDragEventDetail"
                         }
                     }
                 }
@@ -1873,7 +1886,8 @@ export class Modal {
                         "OverlayEventDetail": {
                             "location": "import",
                             "path": "../../utils/overlays-interface",
-                            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+                            "id": "src/utils/overlays-interface.ts::OverlayEventDetail",
+                            "referenceLocation": "OverlayEventDetail"
                         },
                         "T": {
                             "location": "global",
@@ -1899,7 +1913,8 @@ export class Modal {
                         "OverlayEventDetail": {
                             "location": "import",
                             "path": "../../utils/overlays-interface",
-                            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+                            "id": "src/utils/overlays-interface.ts::OverlayEventDetail",
+                            "referenceLocation": "OverlayEventDetail"
                         },
                         "T": {
                             "location": "global",