Add clickOutsideHandler

in case you'd render an element in the modal coming from an addon
but this element would be rendered outside of the modal
( for example )

Author: DramixDW

packages/ember-modal/addon/components/tpk-modal.hbs

@@ -16,6 +16,7 @@
               title=@title
               isOpen=@isOpen
               onClose=@onClose
+              onClickOutside=@onClickOutside
               Cover=(component 'tpk-modal/cover')
             )
           )
@@ -26,10 +27,11 @@
           @title={{@title}}
           @isOpen={{@isOpen}}
           @onClose={{@onClose}}
+          @onClickOutside={{@onClickOutside}}
         >
           {{yield}}
         </TpkModal::Content>
       {{/if}}
     </div>
   {{/in-element}}
-{{/if}}
+{{/if}}

packages/ember-modal/addon/components/tpk-modal.ts

@@ -6,6 +6,7 @@ import { action } from '@ember/object';
 interface UiModalArgs {
   isOpen: boolean;
   onClose?: () => void;
+  onClickOutside?: () => void;
   title: string;
   coverClass: string;
 }

packages/ember-modal/addon/components/tpk-modal/content.hbs

@@ -1,7 +1,7 @@
 <div
   data-test-tpk-modal
   class='tpk-modal-content'
-  {{on-click-outside @onClose}}
+  {{on-click-outside this.onClickOutside}}
   role='dialog'
   aria-modal='true'
   aria-labelledby='modal'
@@ -17,4 +17,4 @@
     <TpkModal::Content::Head @onClose={{@onClose}} @title={{@title}} />
       {{yield}}
   {{/if}}
-</div>
+</div>

packages/ember-modal/addon/components/tpk-modal/content.ts

@@ -0,0 +1,17 @@
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+
+interface UiModalContentArgs {
+  onClose: () => void;
+  onClickOutside?: (_e: PointerEvent) => void;
+}
+
+export default class UiModalContent extends Component<UiModalContentArgs> {
+  @action
+  public onClickOutside(e: PointerEvent) {
+    if (this.args.onClickOutside) {
+      return this.args.onClickOutside(e);
+    }
+    return this.args.onClose();
+  }
+}

packages/ember-modal/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@triptyk/ember-modal",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "description": "Easy tailwindcss modal in Ember.JS",
   "keywords": [
     "ember-addon",

packages/ember-modal/tests/integration/components/modal-test.ts

@@ -55,4 +55,40 @@ module('Integration | Component | modal', function (hooks) {
     assert.dom('[data-test-modal-toggle]').doesNotExist();
     assert.false(this.get('isOpen'));
   });
+
+  test('click outside', async function (assert) {
+    this.set('onClose', () => {
+      this.set('isOpen', false);
+    });
+    this.set('onClickOutside', () => {
+      console.log('clicked');
+      assert.step('clickOutside');
+    });
+    this.set('isOpen', false);
+    this.set('title', 'My modal');
+
+    await render(hbs`
+    <div id="tpk-modal"></div>
+    <button type="button" id="other" class="absolute top-0 z-10 p-5">Banana</button>
+    <TpkModal
+      @isOpen={{this.isOpen}}
+      @title={{this.title}}
+      @onClose={{this.onClose}}
+      @onClickOutside={{this.onClickOutside}}
+      data-test-modal-toggle
+    >
+      Content
+    </TpkModal>`);
+
+    assert.dom('[data-test-modal-toggle]').doesNotExist();
+
+    this.set('isOpen', true);
+
+    assert.dom('[data-test-modal-toggle]').exists('modal should be open');
+    await click('#other');
+    assert.verifySteps(
+      ['clickOutside'],
+      'clickOutside function must have been called'
+    );
+  });
 });