@descope/web-components-ui 3.14.10 → 3.15.0

package/src/components/descope-modal/ModalClass.js

@@ -23,6 +23,10 @@ const customMixin = (superclass) =>
       return this.getAttribute('opened') === 'true';
     }
 
+    get closeOnOutsideClick() {
+      return this.getAttribute('close-on-outside-click') === 'true';
+    }
+
     handleOpened() {
       if (this.opened) {
         this.style.display = '';
@@ -88,6 +92,28 @@ const customMixin = (superclass) =>
       overlay._enterModalState = () => {};
 
       overlay.close = () => false;
+
+      // close the modal when the user clicks/taps the backdrop (outside the modal
+      // box). Vaadin's own outside-click does not fire here because we keep the
+      // overlay in the shadow DOM (see _attachOverlay above), which leaves it out
+      // of Vaadin's overlay stack, so we detect the backdrop click ourselves.
+      // the listener is always attached and reads `closeOnOutsideClick` at click
+      // time, so toggling the attribute after init is respected.
+      overlay.addEventListener('click', (event) => {
+        if (!this.closeOnOutsideClick || !this.opened) return;
+
+        // the visible modal box; clicks inside it (content + its padding) keep
+        // the modal open, only clicks on the dimmed backdrop close it. if we
+        // can't find the box, don't close - safer than closing on an inside click
+        const overlayPart = overlay.shadowRoot?.querySelector('[part="overlay"]');
+        if (!overlayPart || event.composedPath().includes(overlayPart)) {
+          return;
+        }
+
+        // just close ourselves; consumers that need to react (e.g. ModalDriver
+        // resetting the content) observe the `opened` attribute
+        this.removeAttribute('opened');
+      });
     }
   };
 

package/stories/descope-modal.stories.js

@@ -13,7 +13,7 @@ const template = `
   </descope-container>
 </descope-container>`;
 
-const Template = ({ opened }) => {
+const Template = ({ opened, closeOnOutsideClick }) => {
   const loader = `
     <descope-container direction="column" st-align-items="center" st-horizontal-padding="1.25rem" st-vertical-padding="1.25rem" st-gap="0.75rem" st-background-color="transparent">
       <descope-loader-radial size="sm" mode="primary"></descope-loader-radial>
@@ -21,7 +21,7 @@ const Template = ({ opened }) => {
   `;
 
   return `
-    <descope-modal opened="${opened}">
+    <descope-modal opened="${opened}" close-on-outside-click="${closeOnOutsideClick}">
       ${loader}
     </descope-modal>
     `;
@@ -30,6 +30,16 @@ const Template = ({ opened }) => {
 export default {
   component: componentName,
   title: 'descope-modal',
+  argTypes: {
+    opened: {
+      name: 'Opened',
+      control: { type: 'boolean' },
+    },
+    closeOnOutsideClick: {
+      name: 'Close on outside click',
+      control: { type: 'boolean' },
+    },
+  },
   decorators: [
     (render) => {
       setTimeout(() => {
@@ -45,4 +55,5 @@ export const Default = Template.bind({});
 
 Default.args = {
   opened: true,
+  closeOnOutsideClick: true,
 };