From e75be23a49f35c5b82bd444592df71f9ef8f7259 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sat, 19 Sep 2020 09:37:36 -0700
Subject: [PATCH] feat(modal): add preventCloseOnClickOutside prop

Closes #266
---
 src/ComposedModal/ComposedModal.stories.js | 4 ++++
 src/ComposedModal/ComposedModal.svelte     | 8 +++++++-
 src/Modal/Modal.stories.js                 | 4 ++++
 src/Modal/Modal.svelte                     | 8 +++++++-
 4 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/ComposedModal/ComposedModal.stories.js b/src/ComposedModal/ComposedModal.stories.js
index afbdf4eb..b9c3b4f4 100644
--- a/src/ComposedModal/ComposedModal.stories.js
+++ b/src/ComposedModal/ComposedModal.stories.js
@@ -21,6 +21,10 @@ export const Default = () => ({
         "[data-modal-primary-focus]"
       ),
       size: select("Size (size)", sizes, "sm"),
+      preventCloseOnClickOutside: boolean(
+        "Prevent the modal from closing when clicking outside (preventCloseOnClickOutside)",
+        false
+      ),
     },
     modalHeader: {
       label: text("Optional Label (label in <ModalHeader>)", "Optional Label"),
diff --git a/src/ComposedModal/ComposedModal.svelte b/src/ComposedModal/ComposedModal.svelte
index c9f24b27..6223eb12 100644
--- a/src/ComposedModal/ComposedModal.svelte
+++ b/src/ComposedModal/ComposedModal.svelte
@@ -17,6 +17,12 @@
    */
   export let danger = false;
 
+  /**
+   * Set to `true` to prevent the modal from closing when clicking outside
+   * @type {boolean} [preventCloseOnClickOutside=false]
+   */
+  export let preventCloseOnClickOutside = false;
+
   /**
    * Specify a class for the inner modal
    * @type {string} [containerClass=""]
@@ -104,7 +110,7 @@
   {...$$restProps}
   on:click
   on:click="{() => {
-    if (!didClickInnerModal) open = false;
+    if (!didClickInnerModal && !preventCloseOnClickOutside) open = false;
     didClickInnerModal = false;
   }}"
   on:mouseover
diff --git a/src/Modal/Modal.stories.js b/src/Modal/Modal.stories.js
index ae668a7f..cd01ff3a 100644
--- a/src/Modal/Modal.stories.js
+++ b/src/Modal/Modal.stories.js
@@ -44,6 +44,10 @@ export const Default = () => ({
       "[data-modal-primary-focus]"
     ),
     size: select("Size (size)", sizes),
+    preventCloseOnClickOutside: boolean(
+      "Prevent the modal from closing when clicking outside (preventCloseOnClickOutside)",
+      false
+    ),
     iconDescription: text(
       "Close icon description (iconDescription)",
       "Close the modal"
diff --git a/src/Modal/Modal.svelte b/src/Modal/Modal.svelte
index 6fb5873b..263bab12 100644
--- a/src/Modal/Modal.svelte
+++ b/src/Modal/Modal.svelte
@@ -89,6 +89,12 @@
    */
   export let selectorPrimaryFocus = "[data-modal-primary-focus]";
 
+  /**
+   * Set to `true` to prevent the modal from closing when clicking outside
+   * @type {boolean} [preventCloseOnClickOutside=false]
+   */
+  export let preventCloseOnClickOutside = false;
+
   /**
    * Set an id for the top-level element
    * @type {string} [id]
@@ -167,7 +173,7 @@
   }}"
   on:click
   on:click="{() => {
-    if (!didClickInnerModal) open = false;
+    if (!didClickInnerModal && !preventCloseOnClickOutside) open = false;
     didClickInnerModal = false;
   }}"
   on:mouseover