fix(modal): sheet modal can be swiped down on content (#29260)

Issue number: Part of
#24583

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

When a sheet modal is fully opened swiping down on the IonContent when
the content is scrolled to top does not move the sheet modal down. This
does not align with the card modal where doing the same actions causes
the card modal to move down.

 
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Swiping down on the content now moves the sheet modal down as long as
the content is scrolled to the top.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Dev build: `7.8.3-dev.11712114476.152fc43d`

Reviewers:

Please test this on physical iOS and Android devices. Please check the
following:

1. When a modal is fully opened, ensure that users can still scroll down
(i.e. swipe up on the content to scroll down).
2. When a modal is fully opened, ensure that users can swipe down on the
modal to dismiss when the content is scrolled to the top.
3. Repeat step 2 but ensure that swiping down scrolls content to the top
when content is NOT already scrolled to the top.


**Card Behavior**

| Demo |
| - |
| <video
src="https://github.com/ionic-team/ionic-framework/assets/2721089/910755c8-808e-4e0b-85d2-9a56a3b127c4"></video>
|

**Sheet Behavior**

| `main` | branch |
| - | - |
| <video
src="https://github.com/ionic-team/ionic-framework/assets/2721089/eb0b740f-b644-4602-93f9-8c634458239b"></video>
| <video
src="https://github.com/ionic-team/ionic-framework/assets/2721089/3844983e-ebbc-43f3-b5c2-20aad738b201"></video>
|

Author: liamdebeasi

core/src/components/modal/gestures/sheet.ts

@@ -1,5 +1,6 @@
+import { isIonContent, findClosestIonContent } from '@utils/content';
 import { createGesture } from '@utils/gesture';
-import { clamp, raf } from '@utils/helpers';
+import { clamp, raf, getElementRoot } from '@utils/helpers';
 
 import type { Animation } from '../../../interface';
 import type { GestureDetail } from '../../../utils/gesture';
@@ -142,22 +143,35 @@ export const createSheetGesture = (
 
   const canStart = (detail: GestureDetail) => {
     /**
-     * If the sheet is fully expanded and
-     * the user is swiping on the content,
-     * the gesture should not start to
-     * allow for scrolling on the content.
+     * 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.
      */
-    const content = (detail.event.target! as HTMLElement).closest('ion-content');
+    const contentEl = findClosestIonContent(detail.event.target! as HTMLElement);
     currentBreakpoint = getCurrentBreakpoint();
 
-    if (currentBreakpoint === 1 && content) {
-      return false;
+    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;
     }
 
     return true;
   };
 
-  const onStart = () => {
+  const onStart = (detail: GestureDetail) => {
     /**
      * If canDismiss is anything other than `true`
      * then users should be able to swipe down
@@ -173,11 +187,10 @@ export const createSheetGesture = (
     canDismissBlocksGesture = baseEl.canDismiss !== undefined && baseEl.canDismiss !== true && minBreakpoint === 0;
 
     /**
-     * If swiping on the content
-     * we should disable scrolling otherwise
-     * the sheet will expand and the content will scroll.
+     * If we are pulling down, then it is possible we are pulling on the content.
+     * We do not want scrolling to happen at the same time as the gesture.
      */
-    if (contentEl) {
+    if (detail.deltaY > 0 && contentEl) {
       contentEl.scrollY = false;
     }
 
@@ -193,6 +206,16 @@ export const createSheetGesture = (
   };
 
   const onMove = (detail: GestureDetail) => {
+    /**
+     * If we are pulling down, then it is possible we are pulling on the content.
+     * We do not want scrolling to happen at the same time as the gesture.
+     * This accounts for when the user scrolls down, scrolls all the way up, and then
+     * pulls down again such that the modal should start to move.
+     */
+    if (detail.deltaY > 0 && contentEl) {
+      contentEl.scrollY = false;
+    }
+
     /**
      * Given the change in gesture position on the Y axis,
      * compute where the offset of the animation should be