From d81a5b5c11f9aa10addce0d4d6b6e78f6df8b8ed Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Fri, 10 Mar 2023 14:53:36 -0500
Subject: [PATCH 01/10] docs(modal): playground example to prevent swipe to
 dismiss

---
 docs/api/modal.md                             | 11 +++-
 .../angular/example_component_html.md         | 30 ++++++++++
 .../angular/example_component_ts.md           | 19 +++++++
 .../prevent-swipe-to-close/demo.html          | 57 +++++++++++++++++++
 .../prevent-swipe-to-close/index.md           | 26 +++++++++
 .../prevent-swipe-to-close/javascript.md      | 39 +++++++++++++
 .../prevent-swipe-to-close/react.md           | 56 ++++++++++++++++++
 .../can-dismiss/prevent-swipe-to-close/vue.md | 56 ++++++++++++++++++
 8 files changed, 293 insertions(+), 1 deletion(-)
 create mode 100644 static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_html.md
 create mode 100644 static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_ts.md
 create mode 100644 static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/demo.html
 create mode 100644 static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/index.md
 create mode 100644 static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/javascript.md
 create mode 100644 static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/react.md
 create mode 100644 static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/vue.md

diff --git a/docs/api/modal.md b/docs/api/modal.md
index 6e68846652e..746594997f7 100644
--- a/docs/api/modal.md
+++ b/docs/api/modal.md
@@ -51,7 +51,7 @@ import ControllerExample from '@site/static/usage/v7/modal/controller/index.md';
 
 When entering data into a modal, it is often desirable to have a way of preventing accidental data loss. The `canDismiss` property on `ion-modal` gives developers control over when a modal is allowed to dismiss.
 
-There are two different ways of using the `canDismiss` property.
+There are two different ways of using the `canDismiss` property: setting a boolean value or setting a callback function.
 
 :::note
  Note: When using a sheet modal, `canDismiss` will not be checked on swipe if there is no `0` breakpoint set. However, it will still be checked when pressing `Esc` or the hardware back button.
@@ -79,6 +79,15 @@ import CanDismissFunctionExample from '@site/static/usage/v7/modal/can-dismiss/f
 
 <CanDismissFunctionExample />
 
+### Prevent swipe to close
+
+Developers may want to prevent users from swiping to close a modal. This can be done by setting a callback function for `canDismiss` and checking if the `role` is not `gesture`.
+
+import CanDismissPreventSwipeToCloseExample from '@site/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/index.md';
+
+<CanDismissPreventSwipeToCloseExample />
+
+
 ## Types of modals
  
 ### Card Modal
diff --git a/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_html.md b/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_html.md
new file mode 100644
index 00000000000..5fc546ed15f
--- /dev/null
+++ b/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_html.md
@@ -0,0 +1,30 @@
+```html
+<div class="ion-page">
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>App</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">
+    <ion-button id="open-modal" expand="block">Open</ion-button>
+    <ion-modal #modal trigger="open-modal" [canDismiss]="canDismiss" [presentingElement]="presentingElement">
+      <ng-template>
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Modal</ion-title>
+            <ion-buttons slot="end">
+              <ion-button (click)="modal.dismiss()">Close</ion-button>
+            </ion-buttons>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+          <p>
+            To close this modal, please use the "Close" button provided. Note that swiping the modal will not dismiss
+            it.
+          </p>
+        </ion-content>
+      </ng-template>
+    </ion-modal>
+  </ion-content>
+</div>
+```
diff --git a/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_ts.md b/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_ts.md
new file mode 100644
index 00000000000..14c26633f93
--- /dev/null
+++ b/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_ts.md
@@ -0,0 +1,19 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  presentingElement = undefined;
+
+  ngOnInit() {
+    this.presentingElement = document.querySelector('.ion-page');
+  }
+
+  canDismiss = async (data?: any, role?: string) => {
+    return role !== 'gesture';
+  };
+}
+```
diff --git a/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/demo.html b/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/demo.html
new file mode 100644
index 00000000000..300560bc234
--- /dev/null
+++ b/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/demo.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Modal | Can Dismiss</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <div class="ion-page">
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>App</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        <ion-button id="open-modal" expand="block">Open</ion-button>
+
+        <ion-modal trigger="open-modal">
+          <ion-header>
+            <ion-toolbar>
+              <ion-title>Modal</ion-title>
+              <ion-buttons slot="end">
+                <ion-button onclick="dismiss()">Close</ion-button>
+              </ion-buttons>
+            </ion-toolbar>
+          </ion-header>
+          <ion-content class="ion-padding">
+            <p>To close this modal, please use the "Close" button provided. Note that swiping the modal will not dismiss
+              it.</p>
+          </ion-content>
+        </ion-modal>
+      </ion-content>
+    </div>
+  </ion-app>
+
+  <script>
+    const modal = document.querySelector('ion-modal');
+
+    modal.canDismiss = (data, role) => role !== 'gesture';
+    modal.presentingElement = document.querySelector('.ion-page');
+
+    function dismiss() {
+      modal.dismiss();
+    }
+
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/index.md b/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/index.md
new file mode 100644
index 00000000000..fdc9c5c89ce
--- /dev/null
+++ b/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/index.md
@@ -0,0 +1,26 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+
+import react from './react.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/modal/can-dismiss/prevent-swipe-to-close/demo.html"
+  devicePreview
+/>
diff --git a/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/javascript.md b/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/javascript.md
new file mode 100644
index 00000000000..e50e279364c
--- /dev/null
+++ b/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/javascript.md
@@ -0,0 +1,39 @@
+```html
+<div class="ion-page">
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>App</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">
+    <ion-button id="open-modal" expand="block">Open</ion-button>
+
+    <ion-modal trigger="open-modal">
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Modal</ion-title>
+          <ion-buttons slot="end">
+            <ion-button onclick="dismiss()">Close</ion-button>
+          </ion-buttons>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        <p>
+          To close this modal, please use the "Close" button provided. Note that swiping the modal will not dismiss it.
+        </p>
+      </ion-content>
+    </ion-modal>
+  </ion-content>
+</div>
+
+<script>
+  var modal = document.querySelector('ion-modal');
+
+  modal.canDismiss = (data, role) => role !== 'gesture';
+  modal.presentingElement = document.querySelector('.ion-page');
+
+  function dismiss() {
+    modal.dismiss();
+  }
+</script>
+```
diff --git a/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/react.md b/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/react.md
new file mode 100644
index 00000000000..c63bd0d1503
--- /dev/null
+++ b/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/react.md
@@ -0,0 +1,56 @@
+```tsx
+import React, { useState, useRef, useEffect } from 'react';
+import { IonButtons, IonButton, IonModal, IonHeader, IonContent, IonToolbar, IonTitle, IonPage } from '@ionic/react';
+
+function Example() {
+  const modal = useRef<HTMLIonModalElement>(null);
+  const page = useRef(null);
+
+  const [presentingElement, setPresentingElement] = useState<HTMLElement | null>(null);
+
+  useEffect(() => {
+    setPresentingElement(page.current);
+  }, []);
+
+  function dismiss() {
+    modal.current?.dismiss();
+  }
+
+  async function canDismiss(data?: any, role?: string) {
+    return role !== 'gesture';
+  }
+
+  return (
+    <IonPage ref={page}>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>App</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent className="ion-padding">
+        <IonButton id="open-modal" expand="block">
+          Open
+        </IonButton>
+        <IonModal ref={modal} trigger="open-modal" canDismiss={canDismiss} presentingElement={presentingElement!}>
+          <IonHeader>
+            <IonToolbar>
+              <IonTitle>Modal</IonTitle>
+              <IonButtons slot="end">
+                <IonButton onClick={() => dismiss()}>Close</IonButton>
+              </IonButtons>
+            </IonToolbar>
+          </IonHeader>
+          <IonContent className="ion-padding">
+            <p>
+              To close this modal, please use the "Close" button provided. Note that swiping the modal will not dismiss
+              it.
+            </p>
+          </IonContent>
+        </IonModal>
+      </IonContent>
+    </IonPage>
+  );
+}
+
+export default Example;
+```
diff --git a/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/vue.md b/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/vue.md
new file mode 100644
index 00000000000..cc1171ff74b
--- /dev/null
+++ b/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/vue.md
@@ -0,0 +1,56 @@
+```html
+<template>
+  <ion-page ref="page">
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>App</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <ion-button id="open-modal" expand="block">Open</ion-button>
+
+      <ion-modal ref="modal" trigger="open-modal" :can-dismiss="canDismiss" :presenting-element="presentingElement">
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Modal</ion-title>
+            <ion-buttons slot="end">
+              <ion-button @click="dismiss()">Close</ion-button>
+            </ion-buttons>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+          <p>
+            To close this modal, please use the "Close" button provided. Note that swiping the modal will not dismiss
+            it.
+          </p>
+        </ion-content>
+      </ion-modal>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script lang="ts">
+  import { IonButtons, IonButton, IonModal, IonHeader, IonContent, IonToolbar, IonTitle, IonPage } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonButtons, IonButton, IonModal, IonHeader, IonContent, IonToolbar, IonTitle, IonPage },
+    data() {
+      return {
+        presentingElement: undefined,
+      };
+    },
+    methods: {
+      dismiss() {
+        this.$refs.modal.$el.dismiss();
+      },
+      async canDismiss(data?: any, role?: string) {
+        return role !== 'gesture';
+      },
+    },
+    mounted() {
+      this.presentingElement = this.$refs.page.$el;
+    },
+  });
+</script>
+```

From 7038409e5767de65c7a9084b31c5e629ba1eaa41 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Mon, 13 Mar 2023 12:47:50 -0400
Subject: [PATCH 02/10] chore: v6 example and updates

---
 docs/api/modal.md                             |  1 -
 .../angular/example_component_html.md         | 30 ++++++++++
 .../angular/example_component_ts.md           | 19 +++++++
 .../prevent-swipe-to-close/demo.html          | 57 +++++++++++++++++++
 .../prevent-swipe-to-close/index.md           | 26 +++++++++
 .../prevent-swipe-to-close/javascript.md      | 39 +++++++++++++
 .../prevent-swipe-to-close/react.md           | 56 ++++++++++++++++++
 .../can-dismiss/prevent-swipe-to-close/vue.md | 56 ++++++++++++++++++
 .../angular/example_component_ts.md           |  6 +-
 versioned_docs/version-v6/api/modal.md        |  8 +++
 10 files changed, 294 insertions(+), 4 deletions(-)
 create mode 100644 static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_html.md
 create mode 100644 static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_ts.md
 create mode 100644 static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/demo.html
 create mode 100644 static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/index.md
 create mode 100644 static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/javascript.md
 create mode 100644 static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/react.md
 create mode 100644 static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/vue.md

diff --git a/docs/api/modal.md b/docs/api/modal.md
index 746594997f7..81a90b9a91d 100644
--- a/docs/api/modal.md
+++ b/docs/api/modal.md
@@ -87,7 +87,6 @@ import CanDismissPreventSwipeToCloseExample from '@site/static/usage/v7/modal/ca
 
 <CanDismissPreventSwipeToCloseExample />
 
-
 ## Types of modals
  
 ### Card Modal
diff --git a/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_html.md b/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_html.md
new file mode 100644
index 00000000000..5fc546ed15f
--- /dev/null
+++ b/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_html.md
@@ -0,0 +1,30 @@
+```html
+<div class="ion-page">
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>App</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">
+    <ion-button id="open-modal" expand="block">Open</ion-button>
+    <ion-modal #modal trigger="open-modal" [canDismiss]="canDismiss" [presentingElement]="presentingElement">
+      <ng-template>
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Modal</ion-title>
+            <ion-buttons slot="end">
+              <ion-button (click)="modal.dismiss()">Close</ion-button>
+            </ion-buttons>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+          <p>
+            To close this modal, please use the "Close" button provided. Note that swiping the modal will not dismiss
+            it.
+          </p>
+        </ion-content>
+      </ng-template>
+    </ion-modal>
+  </ion-content>
+</div>
+```
diff --git a/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_ts.md b/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_ts.md
new file mode 100644
index 00000000000..6b0941b470b
--- /dev/null
+++ b/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_ts.md
@@ -0,0 +1,19 @@
+```ts
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent implements OnInit {
+  presentingElement = undefined;
+
+  ngOnInit() {
+    this.presentingElement = document.querySelector('.ion-page');
+  }
+
+  async canDismiss(data?: any, role?: string) {
+    return role !== 'gesture';
+  };
+}
+```
diff --git a/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/demo.html b/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/demo.html
new file mode 100644
index 00000000000..620cf48cb9d
--- /dev/null
+++ b/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/demo.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Modal | Can Dismiss</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <div class="ion-page">
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>App</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        <ion-button id="open-modal" expand="block">Open</ion-button>
+
+        <ion-modal trigger="open-modal">
+          <ion-header>
+            <ion-toolbar>
+              <ion-title>Modal</ion-title>
+              <ion-buttons slot="end">
+                <ion-button onclick="dismiss()">Close</ion-button>
+              </ion-buttons>
+            </ion-toolbar>
+          </ion-header>
+          <ion-content class="ion-padding">
+            <p>To close this modal, please use the "Close" button provided. Note that swiping the modal will not dismiss
+              it.</p>
+          </ion-content>
+        </ion-modal>
+      </ion-content>
+    </div>
+  </ion-app>
+
+  <script>
+    const modal = document.querySelector('ion-modal');
+
+    modal.canDismiss = (data, role) => role !== 'gesture';
+    modal.presentingElement = document.querySelector('.ion-page');
+
+    function dismiss() {
+      modal.dismiss();
+    }
+
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/index.md b/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/index.md
new file mode 100644
index 00000000000..2208debb92a
--- /dev/null
+++ b/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/index.md
@@ -0,0 +1,26 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+
+import react from './react.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="6"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v6/modal/can-dismiss/prevent-swipe-to-close/demo.html"
+  devicePreview
+/>
diff --git a/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/javascript.md b/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/javascript.md
new file mode 100644
index 00000000000..e50e279364c
--- /dev/null
+++ b/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/javascript.md
@@ -0,0 +1,39 @@
+```html
+<div class="ion-page">
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>App</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">
+    <ion-button id="open-modal" expand="block">Open</ion-button>
+
+    <ion-modal trigger="open-modal">
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Modal</ion-title>
+          <ion-buttons slot="end">
+            <ion-button onclick="dismiss()">Close</ion-button>
+          </ion-buttons>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        <p>
+          To close this modal, please use the "Close" button provided. Note that swiping the modal will not dismiss it.
+        </p>
+      </ion-content>
+    </ion-modal>
+  </ion-content>
+</div>
+
+<script>
+  var modal = document.querySelector('ion-modal');
+
+  modal.canDismiss = (data, role) => role !== 'gesture';
+  modal.presentingElement = document.querySelector('.ion-page');
+
+  function dismiss() {
+    modal.dismiss();
+  }
+</script>
+```
diff --git a/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/react.md b/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/react.md
new file mode 100644
index 00000000000..c63bd0d1503
--- /dev/null
+++ b/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/react.md
@@ -0,0 +1,56 @@
+```tsx
+import React, { useState, useRef, useEffect } from 'react';
+import { IonButtons, IonButton, IonModal, IonHeader, IonContent, IonToolbar, IonTitle, IonPage } from '@ionic/react';
+
+function Example() {
+  const modal = useRef<HTMLIonModalElement>(null);
+  const page = useRef(null);
+
+  const [presentingElement, setPresentingElement] = useState<HTMLElement | null>(null);
+
+  useEffect(() => {
+    setPresentingElement(page.current);
+  }, []);
+
+  function dismiss() {
+    modal.current?.dismiss();
+  }
+
+  async function canDismiss(data?: any, role?: string) {
+    return role !== 'gesture';
+  }
+
+  return (
+    <IonPage ref={page}>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>App</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent className="ion-padding">
+        <IonButton id="open-modal" expand="block">
+          Open
+        </IonButton>
+        <IonModal ref={modal} trigger="open-modal" canDismiss={canDismiss} presentingElement={presentingElement!}>
+          <IonHeader>
+            <IonToolbar>
+              <IonTitle>Modal</IonTitle>
+              <IonButtons slot="end">
+                <IonButton onClick={() => dismiss()}>Close</IonButton>
+              </IonButtons>
+            </IonToolbar>
+          </IonHeader>
+          <IonContent className="ion-padding">
+            <p>
+              To close this modal, please use the "Close" button provided. Note that swiping the modal will not dismiss
+              it.
+            </p>
+          </IonContent>
+        </IonModal>
+      </IonContent>
+    </IonPage>
+  );
+}
+
+export default Example;
+```
diff --git a/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/vue.md b/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/vue.md
new file mode 100644
index 00000000000..cc1171ff74b
--- /dev/null
+++ b/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/vue.md
@@ -0,0 +1,56 @@
+```html
+<template>
+  <ion-page ref="page">
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>App</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <ion-button id="open-modal" expand="block">Open</ion-button>
+
+      <ion-modal ref="modal" trigger="open-modal" :can-dismiss="canDismiss" :presenting-element="presentingElement">
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Modal</ion-title>
+            <ion-buttons slot="end">
+              <ion-button @click="dismiss()">Close</ion-button>
+            </ion-buttons>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+          <p>
+            To close this modal, please use the "Close" button provided. Note that swiping the modal will not dismiss
+            it.
+          </p>
+        </ion-content>
+      </ion-modal>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script lang="ts">
+  import { IonButtons, IonButton, IonModal, IonHeader, IonContent, IonToolbar, IonTitle, IonPage } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonButtons, IonButton, IonModal, IonHeader, IonContent, IonToolbar, IonTitle, IonPage },
+    data() {
+      return {
+        presentingElement: undefined,
+      };
+    },
+    methods: {
+      dismiss() {
+        this.$refs.modal.$el.dismiss();
+      },
+      async canDismiss(data?: any, role?: string) {
+        return role !== 'gesture';
+      },
+    },
+    mounted() {
+      this.presentingElement = this.$refs.page.$el;
+    },
+  });
+</script>
+```
diff --git a/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_ts.md b/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_ts.md
index 14c26633f93..6b0941b470b 100644
--- a/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_ts.md
+++ b/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_ts.md
@@ -1,18 +1,18 @@
 ```ts
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
 })
-export class ExampleComponent {
+export class ExampleComponent implements OnInit {
   presentingElement = undefined;
 
   ngOnInit() {
     this.presentingElement = document.querySelector('.ion-page');
   }
 
-  canDismiss = async (data?: any, role?: string) => {
+  async canDismiss(data?: any, role?: string) {
     return role !== 'gesture';
   };
 }
diff --git a/versioned_docs/version-v6/api/modal.md b/versioned_docs/version-v6/api/modal.md
index 68d44332e4e..5263acab85a 100644
--- a/versioned_docs/version-v6/api/modal.md
+++ b/versioned_docs/version-v6/api/modal.md
@@ -83,6 +83,14 @@ import CanDismissFunctionExample from '@site/static/usage/v6/modal/can-dismiss/f
 
 <CanDismissFunctionExample />
 
+### Prevent swipe to close
+
+Developers may want to prevent users from swiping to close a modal. This can be done by setting a callback function for `canDismiss` and checking if the `role` is not `gesture`.
+
+import CanDismissPreventSwipeToCloseExample from '@site/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/index.md';
+
+<CanDismissPreventSwipeToCloseExample />
+
 ## Types of modals
 
 ### Card Modal

From fb4904654d557b78a855d4c9ef999274df43e71b Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Mon, 13 Mar 2023 12:54:02 -0400
Subject: [PATCH 03/10] chore: update description for v6

---
 versioned_docs/version-v6/api/modal.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/versioned_docs/version-v6/api/modal.md b/versioned_docs/version-v6/api/modal.md
index 5263acab85a..d669d1c0617 100644
--- a/versioned_docs/version-v6/api/modal.md
+++ b/versioned_docs/version-v6/api/modal.md
@@ -55,7 +55,7 @@ import ControllerExample from '@site/static/usage/v6/modal/controller/index.md';
 
 When entering data into a modal, it is often desirable to have a way of preventing accidental data loss. The `canDismiss` property on `ion-modal` gives developers control over when a modal is allowed to dismiss.
 
-There are two different ways of using the `canDismiss` property.
+There are two different ways of using the `canDismiss` property: setting a boolean value or setting a callback function.
 
 :::note
 Note: When using a sheet modal, `canDismiss` will not be checked on swipe if there is no `0` breakpoint set. However, it will still be checked when pressing `Esc` or the hardware back button.

From cc336b0673ff89b71e0a040d8d95e21352ecdbb9 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Tue, 14 Mar 2023 11:30:08 -0400
Subject: [PATCH 04/10] fix: rework vue examples to use composition API

---
 .../can-dismiss/prevent-swipe-to-close/vue.md | 36 +++++++++----------
 .../can-dismiss/prevent-swipe-to-close/vue.md | 36 +++++++++----------
 2 files changed, 32 insertions(+), 40 deletions(-)

diff --git a/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/vue.md b/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/vue.md
index cc1171ff74b..ced71b0b070 100644
--- a/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/vue.md
+++ b/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/vue.md
@@ -29,28 +29,24 @@
   </ion-page>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonButtons, IonButton, IonModal, IonHeader, IonContent, IonToolbar, IonTitle, IonPage } from '@ionic/vue';
-  import { defineComponent } from 'vue';
+  import { onMounted, ref } from 'vue';
 
-  export default defineComponent({
-    components: { IonButtons, IonButton, IonModal, IonHeader, IonContent, IonToolbar, IonTitle, IonPage },
-    data() {
-      return {
-        presentingElement: undefined,
-      };
-    },
-    methods: {
-      dismiss() {
-        this.$refs.modal.$el.dismiss();
-      },
-      async canDismiss(data?: any, role?: string) {
-        return role !== 'gesture';
-      },
-    },
-    mounted() {
-      this.presentingElement = this.$refs.page.$el;
-    },
+  const page = ref(null);
+  const modal = ref(null);
+  const presentingElement = ref(null);
+
+  function dismiss() {
+    modal.value.$el.dismiss();
+  }
+
+  async function canDismiss(data?: any, role?: string) {
+    return role !== 'gesture';
+  }
+
+  onMounted(() => {
+    presentingElement.value = page.value.$el;
   });
 </script>
 ```
diff --git a/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/vue.md b/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/vue.md
index cc1171ff74b..ced71b0b070 100644
--- a/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/vue.md
+++ b/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/vue.md
@@ -29,28 +29,24 @@
   </ion-page>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonButtons, IonButton, IonModal, IonHeader, IonContent, IonToolbar, IonTitle, IonPage } from '@ionic/vue';
-  import { defineComponent } from 'vue';
+  import { onMounted, ref } from 'vue';
 
-  export default defineComponent({
-    components: { IonButtons, IonButton, IonModal, IonHeader, IonContent, IonToolbar, IonTitle, IonPage },
-    data() {
-      return {
-        presentingElement: undefined,
-      };
-    },
-    methods: {
-      dismiss() {
-        this.$refs.modal.$el.dismiss();
-      },
-      async canDismiss(data?: any, role?: string) {
-        return role !== 'gesture';
-      },
-    },
-    mounted() {
-      this.presentingElement = this.$refs.page.$el;
-    },
+  const page = ref(null);
+  const modal = ref(null);
+  const presentingElement = ref(null);
+
+  function dismiss() {
+    modal.value.$el.dismiss();
+  }
+
+  async function canDismiss(data?: any, role?: string) {
+    return role !== 'gesture';
+  }
+
+  onMounted(() => {
+    presentingElement.value = page.value.$el;
   });
 </script>
 ```

From 1d1915bce23301fc2fd108ee7a304f00041797f0 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Tue, 14 Mar 2023 11:37:02 -0400
Subject: [PATCH 05/10] fix: simplify angular example

---
 .../angular/example_component_html.md                |  4 ++--
 .../angular/example_component_ts.md                  | 12 +++---------
 .../angular/example_component_html.md                |  4 ++--
 .../angular/example_component_ts.md                  | 12 +++---------
 4 files changed, 10 insertions(+), 22 deletions(-)

diff --git a/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_html.md b/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_html.md
index 5fc546ed15f..de1d6d041ea 100644
--- a/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_html.md
+++ b/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_html.md
@@ -1,5 +1,5 @@
 ```html
-<div class="ion-page">
+<div class="ion-page" #page>
   <ion-header>
     <ion-toolbar>
       <ion-title>App</ion-title>
@@ -7,7 +7,7 @@
   </ion-header>
   <ion-content class="ion-padding">
     <ion-button id="open-modal" expand="block">Open</ion-button>
-    <ion-modal #modal trigger="open-modal" [canDismiss]="canDismiss" [presentingElement]="presentingElement">
+    <ion-modal #modal trigger="open-modal" [canDismiss]="canDismiss" [presentingElement]="page">
       <ng-template>
         <ion-header>
           <ion-toolbar>
diff --git a/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_ts.md b/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_ts.md
index 6b0941b470b..788b9a14c0f 100644
--- a/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_ts.md
+++ b/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_ts.md
@@ -1,19 +1,13 @@
 ```ts
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
 })
-export class ExampleComponent implements OnInit {
-  presentingElement = undefined;
-
-  ngOnInit() {
-    this.presentingElement = document.querySelector('.ion-page');
-  }
-
+export class ExampleComponent {
   async canDismiss(data?: any, role?: string) {
     return role !== 'gesture';
-  };
+  }
 }
 ```
diff --git a/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_html.md b/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_html.md
index 5fc546ed15f..de1d6d041ea 100644
--- a/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_html.md
+++ b/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_html.md
@@ -1,5 +1,5 @@
 ```html
-<div class="ion-page">
+<div class="ion-page" #page>
   <ion-header>
     <ion-toolbar>
       <ion-title>App</ion-title>
@@ -7,7 +7,7 @@
   </ion-header>
   <ion-content class="ion-padding">
     <ion-button id="open-modal" expand="block">Open</ion-button>
-    <ion-modal #modal trigger="open-modal" [canDismiss]="canDismiss" [presentingElement]="presentingElement">
+    <ion-modal #modal trigger="open-modal" [canDismiss]="canDismiss" [presentingElement]="page">
       <ng-template>
         <ion-header>
           <ion-toolbar>
diff --git a/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_ts.md b/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_ts.md
index 6b0941b470b..788b9a14c0f 100644
--- a/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_ts.md
+++ b/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_ts.md
@@ -1,19 +1,13 @@
 ```ts
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
 })
-export class ExampleComponent implements OnInit {
-  presentingElement = undefined;
-
-  ngOnInit() {
-    this.presentingElement = document.querySelector('.ion-page');
-  }
-
+export class ExampleComponent {
   async canDismiss(data?: any, role?: string) {
     return role !== 'gesture';
-  };
+  }
 }
 ```

From f41855cb04777d01fd72e22458561fa3ed9f701d Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Tue, 14 Mar 2023 11:39:43 -0400
Subject: [PATCH 06/10] fix: use function name reference for event handlers in
 vue examples

---
 static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/vue.md | 2 +-
 static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/vue.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/vue.md b/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/vue.md
index ced71b0b070..b5a6314830f 100644
--- a/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/vue.md
+++ b/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/vue.md
@@ -14,7 +14,7 @@
           <ion-toolbar>
             <ion-title>Modal</ion-title>
             <ion-buttons slot="end">
-              <ion-button @click="dismiss()">Close</ion-button>
+              <ion-button @click="dismiss">Close</ion-button>
             </ion-buttons>
           </ion-toolbar>
         </ion-header>
diff --git a/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/vue.md b/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/vue.md
index ced71b0b070..b5a6314830f 100644
--- a/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/vue.md
+++ b/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/vue.md
@@ -14,7 +14,7 @@
           <ion-toolbar>
             <ion-title>Modal</ion-title>
             <ion-buttons slot="end">
-              <ion-button @click="dismiss()">Close</ion-button>
+              <ion-button @click="dismiss">Close</ion-button>
             </ion-buttons>
           </ion-toolbar>
         </ion-header>

From c6008ca18186d03558d8e8524f7418f0f4aa5e05 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Tue, 14 Mar 2023 11:42:37 -0400
Subject: [PATCH 07/10] chore: simplify vue examples

---
 .../v6/modal/can-dismiss/prevent-swipe-to-close/vue.md   | 9 ++-------
 .../v7/modal/can-dismiss/prevent-swipe-to-close/vue.md   | 9 ++-------
 2 files changed, 4 insertions(+), 14 deletions(-)

diff --git a/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/vue.md b/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/vue.md
index b5a6314830f..afd25081c11 100644
--- a/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/vue.md
+++ b/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/vue.md
@@ -9,7 +9,7 @@
     <ion-content class="ion-padding">
       <ion-button id="open-modal" expand="block">Open</ion-button>
 
-      <ion-modal ref="modal" trigger="open-modal" :can-dismiss="canDismiss" :presenting-element="presentingElement">
+      <ion-modal ref="modal" trigger="open-modal" :can-dismiss="canDismiss" :presenting-element="page?.$el">
         <ion-header>
           <ion-toolbar>
             <ion-title>Modal</ion-title>
@@ -31,11 +31,10 @@
 
 <script setup lang="ts">
   import { IonButtons, IonButton, IonModal, IonHeader, IonContent, IonToolbar, IonTitle, IonPage } from '@ionic/vue';
-  import { onMounted, ref } from 'vue';
+  import { ref } from 'vue';
 
   const page = ref(null);
   const modal = ref(null);
-  const presentingElement = ref(null);
 
   function dismiss() {
     modal.value.$el.dismiss();
@@ -44,9 +43,5 @@
   async function canDismiss(data?: any, role?: string) {
     return role !== 'gesture';
   }
-
-  onMounted(() => {
-    presentingElement.value = page.value.$el;
-  });
 </script>
 ```
diff --git a/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/vue.md b/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/vue.md
index b5a6314830f..afd25081c11 100644
--- a/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/vue.md
+++ b/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/vue.md
@@ -9,7 +9,7 @@
     <ion-content class="ion-padding">
       <ion-button id="open-modal" expand="block">Open</ion-button>
 
-      <ion-modal ref="modal" trigger="open-modal" :can-dismiss="canDismiss" :presenting-element="presentingElement">
+      <ion-modal ref="modal" trigger="open-modal" :can-dismiss="canDismiss" :presenting-element="page?.$el">
         <ion-header>
           <ion-toolbar>
             <ion-title>Modal</ion-title>
@@ -31,11 +31,10 @@
 
 <script setup lang="ts">
   import { IonButtons, IonButton, IonModal, IonHeader, IonContent, IonToolbar, IonTitle, IonPage } from '@ionic/vue';
-  import { onMounted, ref } from 'vue';
+  import { ref } from 'vue';
 
   const page = ref(null);
   const modal = ref(null);
-  const presentingElement = ref(null);
 
   function dismiss() {
     modal.value.$el.dismiss();
@@ -44,9 +43,5 @@
   async function canDismiss(data?: any, role?: string) {
     return role !== 'gesture';
   }
-
-  onMounted(() => {
-    presentingElement.value = page.value.$el;
-  });
 </script>
 ```

From ab8717b3563739669720f8ed01618c30cd3e8f1d Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Wed, 15 Mar 2023 10:39:47 -0400
Subject: [PATCH 08/10] chore: simplify react examples

---
 .../modal/can-dismiss/prevent-swipe-to-close/react.md  | 10 ++--------
 .../modal/can-dismiss/prevent-swipe-to-close/react.md  | 10 ++--------
 2 files changed, 4 insertions(+), 16 deletions(-)

diff --git a/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/react.md b/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/react.md
index c63bd0d1503..4bf8ecaf036 100644
--- a/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/react.md
+++ b/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/react.md
@@ -1,17 +1,11 @@
 ```tsx
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useRef } from 'react';
 import { IonButtons, IonButton, IonModal, IonHeader, IonContent, IonToolbar, IonTitle, IonPage } from '@ionic/react';
 
 function Example() {
   const modal = useRef<HTMLIonModalElement>(null);
   const page = useRef(null);
 
-  const [presentingElement, setPresentingElement] = useState<HTMLElement | null>(null);
-
-  useEffect(() => {
-    setPresentingElement(page.current);
-  }, []);
-
   function dismiss() {
     modal.current?.dismiss();
   }
@@ -31,7 +25,7 @@ function Example() {
         <IonButton id="open-modal" expand="block">
           Open
         </IonButton>
-        <IonModal ref={modal} trigger="open-modal" canDismiss={canDismiss} presentingElement={presentingElement!}>
+        <IonModal ref={modal} trigger="open-modal" canDismiss={canDismiss} presentingElement={page?.current!}>
           <IonHeader>
             <IonToolbar>
               <IonTitle>Modal</IonTitle>
diff --git a/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/react.md b/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/react.md
index c63bd0d1503..4bf8ecaf036 100644
--- a/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/react.md
+++ b/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/react.md
@@ -1,17 +1,11 @@
 ```tsx
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useRef } from 'react';
 import { IonButtons, IonButton, IonModal, IonHeader, IonContent, IonToolbar, IonTitle, IonPage } from '@ionic/react';
 
 function Example() {
   const modal = useRef<HTMLIonModalElement>(null);
   const page = useRef(null);
 
-  const [presentingElement, setPresentingElement] = useState<HTMLElement | null>(null);
-
-  useEffect(() => {
-    setPresentingElement(page.current);
-  }, []);
-
   function dismiss() {
     modal.current?.dismiss();
   }
@@ -31,7 +25,7 @@ function Example() {
         <IonButton id="open-modal" expand="block">
           Open
         </IonButton>
-        <IonModal ref={modal} trigger="open-modal" canDismiss={canDismiss} presentingElement={presentingElement!}>
+        <IonModal ref={modal} trigger="open-modal" canDismiss={canDismiss} presentingElement={page?.current!}>
           <IonHeader>
             <IonToolbar>
               <IonTitle>Modal</IonTitle>

From 24a569185ab22efcdd483cbbd01919b1fed08622 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Wed, 15 Mar 2023 14:33:06 -0400
Subject: [PATCH 09/10] chore: limit to iOS mode

---
 .../usage/v6/modal/can-dismiss/prevent-swipe-to-close/index.md   | 1 +
 .../usage/v7/modal/can-dismiss/prevent-swipe-to-close/index.md   | 1 +
 2 files changed, 2 insertions(+)

diff --git a/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/index.md b/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/index.md
index 2208debb92a..1f24e318e8c 100644
--- a/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/index.md
+++ b/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/index.md
@@ -23,4 +23,5 @@ import angular_example_component_ts from './angular/example_component_ts.md';
   }}
   src="usage/v6/modal/can-dismiss/prevent-swipe-to-close/demo.html"
   devicePreview
+  mode="ios"
 />
diff --git a/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/index.md b/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/index.md
index fdc9c5c89ce..a37ce212fc8 100644
--- a/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/index.md
+++ b/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/index.md
@@ -23,4 +23,5 @@ import angular_example_component_ts from './angular/example_component_ts.md';
   }}
   src="usage/v7/modal/can-dismiss/prevent-swipe-to-close/demo.html"
   devicePreview
+  mode="ios"
 />

From ad814d77fbb3cb8913eaa78002211f8f9f84e1e2 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Wed, 15 Mar 2023 14:33:34 -0400
Subject: [PATCH 10/10] revert: react example presenting element

---
 .../modal/can-dismiss/prevent-swipe-to-close/react.md  | 10 ++++++++--
 .../modal/can-dismiss/prevent-swipe-to-close/react.md  | 10 ++++++++--
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/react.md b/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/react.md
index 4bf8ecaf036..c63bd0d1503 100644
--- a/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/react.md
+++ b/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/react.md
@@ -1,11 +1,17 @@
 ```tsx
-import React, { useRef } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { IonButtons, IonButton, IonModal, IonHeader, IonContent, IonToolbar, IonTitle, IonPage } from '@ionic/react';
 
 function Example() {
   const modal = useRef<HTMLIonModalElement>(null);
   const page = useRef(null);
 
+  const [presentingElement, setPresentingElement] = useState<HTMLElement | null>(null);
+
+  useEffect(() => {
+    setPresentingElement(page.current);
+  }, []);
+
   function dismiss() {
     modal.current?.dismiss();
   }
@@ -25,7 +31,7 @@ function Example() {
         <IonButton id="open-modal" expand="block">
           Open
         </IonButton>
-        <IonModal ref={modal} trigger="open-modal" canDismiss={canDismiss} presentingElement={page?.current!}>
+        <IonModal ref={modal} trigger="open-modal" canDismiss={canDismiss} presentingElement={presentingElement!}>
           <IonHeader>
             <IonToolbar>
               <IonTitle>Modal</IonTitle>
diff --git a/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/react.md b/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/react.md
index 4bf8ecaf036..c63bd0d1503 100644
--- a/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/react.md
+++ b/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/react.md
@@ -1,11 +1,17 @@
 ```tsx
-import React, { useRef } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { IonButtons, IonButton, IonModal, IonHeader, IonContent, IonToolbar, IonTitle, IonPage } from '@ionic/react';
 
 function Example() {
   const modal = useRef<HTMLIonModalElement>(null);
   const page = useRef(null);
 
+  const [presentingElement, setPresentingElement] = useState<HTMLElement | null>(null);
+
+  useEffect(() => {
+    setPresentingElement(page.current);
+  }, []);
+
   function dismiss() {
     modal.current?.dismiss();
   }
@@ -25,7 +31,7 @@ function Example() {
         <IonButton id="open-modal" expand="block">
           Open
         </IonButton>
-        <IonModal ref={modal} trigger="open-modal" canDismiss={canDismiss} presentingElement={page?.current!}>
+        <IonModal ref={modal} trigger="open-modal" canDismiss={canDismiss} presentingElement={presentingElement!}>
           <IonHeader>
             <IonToolbar>
               <IonTitle>Modal</IonTitle>