refactor(modal): allow dragging when expandToScroll is false (#30235)

Author: thetaPC

core/src/components.d.ts

@@ -1736,7 +1736,7 @@ export namespace Components {
          */
         "enterAnimation"?: AnimationBuilder;
         /**
-          * Controls whether scrolling or dragging within the sheet modal expands it to a larger breakpoint. This only takes effect when `breakpoints` and `initialBreakpoint` are set.  If `true`, scrolling or dragging anywhere in the modal will first expand it to the next breakpoint. Once fully expanded, scrolling will affect the content. If `false`, scrolling will always affect the content, and the modal will only expand when dragging the header or handle.
+          * Controls whether scrolling or dragging within the sheet modal expands it to a larger breakpoint. This only takes effect when `breakpoints` and `initialBreakpoint` are set.  If `true`, scrolling or dragging anywhere in the modal will first expand it to the next breakpoint. Once fully expanded, scrolling will affect the content. If `false`, scrolling will always affect the content. The modal will only expand when dragging the header or handle. The modal will close when dragging the header or handle. It can also be closed when dragging the content, but only if the content is scrolled to the top.
          */
         "expandToScroll": boolean;
         /**
@@ -6553,7 +6553,7 @@ declare namespace LocalJSX {
          */
         "enterAnimation"?: AnimationBuilder;
         /**
-          * Controls whether scrolling or dragging within the sheet modal expands it to a larger breakpoint. This only takes effect when `breakpoints` and `initialBreakpoint` are set.  If `true`, scrolling or dragging anywhere in the modal will first expand it to the next breakpoint. Once fully expanded, scrolling will affect the content. If `false`, scrolling will always affect the content, and the modal will only expand when dragging the header or handle.
+          * Controls whether scrolling or dragging within the sheet modal expands it to a larger breakpoint. This only takes effect when `breakpoints` and `initialBreakpoint` are set.  If `true`, scrolling or dragging anywhere in the modal will first expand it to the next breakpoint. Once fully expanded, scrolling will affect the content. If `false`, scrolling will always affect the content. The modal will only expand when dragging the header or handle. The modal will close when dragging the header or handle. It can also be closed when dragging the content, but only if the content is scrolled to the top.
          */
         "expandToScroll"?: boolean;
         /**

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

@@ -192,11 +192,12 @@ export const createSheetGesture = (
     currentBreakpoint = getCurrentBreakpoint();
 
     /**
-     * If we have expandToScroll disabled, we should not allow the swipe gesture to start
-     * if the content is being swiped.
+     * If `expandToScroll` is disabled, we should not allow the swipe gesture
+     * to start if the content is not scrolled to the top.
      */
     if (!expandToScroll && contentEl) {
-      return false;
+      const scrollEl = isIonContent(contentEl) ? getElementRoot(contentEl).querySelector('.inner-scroll') : contentEl;
+      return scrollEl!.scrollTop === 0;
     }
 
     if (currentBreakpoint === 1 && contentEl) {
@@ -262,6 +263,14 @@ export const createSheetGesture = (
   };
 
   const onMove = (detail: GestureDetail) => {
+    /**
+     * If `expandToScroll` is disabled, we should not allow the swipe gesture
+     * to continue if the gesture is not pulling down.
+     */
+    if (!expandToScroll && detail.deltaY <= 0) {
+      return;
+    }
+
     /**
      * 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.

core/src/components/modal/modal.tsx

@@ -136,9 +136,12 @@ export class Modal implements ComponentInterface, OverlayInterface {
    * and `initialBreakpoint` are set.
    *
    * If `true`, scrolling or dragging anywhere in the modal will first expand
-   * it to the next breakpoint. Once fully expanded, scrolling will affect the content.
-   * If `false`, scrolling will always affect the content, and the modal will only expand
-   * when dragging the header or handle.
+   * it to the next breakpoint. Once fully expanded, scrolling will affect the
+   * content.
+   * If `false`, scrolling will always affect the content. The modal will
+   * only expand when dragging the header or handle. The modal will close when
+   * dragging the header or handle. It can also be closed when dragging the
+   * content, but only if the content is scrolled to the top.
    */
   @Prop() expandToScroll = true;