feat(modal): add preventCloseOnClickOutside prop

Closes #266

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"),

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

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"

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