From e0ef676a36900862fdcd3d5af53080682272073a Mon Sep 17 00:00:00 2001
From: Rajkeshwar Prasad <rajkeshwar.pd@gmail.com>
Date: Thu, 22 Aug 2024 13:12:50 +0200
Subject: [PATCH] opened-changed event detail exposes opened state (#2334)

* opened-changed event detail exposes opened state

* Fixed lint issue

* Generated changeset

---------

Co-authored-by: Rajkeshwar Prasad <rajkeshwarp@azuga.com>
Co-authored-by: Rajkeshwar Prasad <--global>
---
 .changeset/fuzzy-poets-brake.md               |  5 ++
 docs/components/dialog/src/external-dialog.js | 32 +++++++++++++
 docs/components/dialog/use-cases.md           | 46 +++++++++++++++++++
 .../dialog/test/lion-dialog.test.js           | 38 +++++++++++++++
 .../components/overlays/src/OverlayMixin.js   |  6 ++-
 5 files changed, 126 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/fuzzy-poets-brake.md
 create mode 100644 docs/components/dialog/src/external-dialog.js

diff --git a/.changeset/fuzzy-poets-brake.md b/.changeset/fuzzy-poets-brake.md
new file mode 100644
index 000000000..68e7ec92d
--- /dev/null
+++ b/.changeset/fuzzy-poets-brake.md
@@ -0,0 +1,5 @@
+---
+'@lion/ui': patch
+---
+
+opened-changed event detail exposes opened state
diff --git a/docs/components/dialog/src/external-dialog.js b/docs/components/dialog/src/external-dialog.js
new file mode 100644
index 000000000..cd7c9aeb5
--- /dev/null
+++ b/docs/components/dialog/src/external-dialog.js
@@ -0,0 +1,32 @@
+import { LitElement, html } from 'lit';
+
+class DialogTriggerDemo extends LitElement {
+  static get properties() {
+    return {
+      _isOpen: { state: true },
+    };
+  }
+
+  toggleDialog(open) {
+    // eslint-disable-next-line no-return-assign
+    return () => (this._isOpen = open);
+  }
+
+  handleDialog(e) {
+    this._isOpen = e.detail.opened;
+  }
+
+  render() {
+    return html`
+      <button @click=${this.toggleDialog(true)}>Open dialog</button>
+      <lion-dialog ?opened=${this._isOpen} @opened-changed=${this.handleDialog}>
+        <div slot="content" class="dialog demo-box">
+          Hello! You can close this notification here:
+          <button class="close-button" @click=${this.toggleDialog(false)}>⨯</button>
+        </div>
+      </lion-dialog>
+    `;
+  }
+}
+
+customElements.define('dialog-trigger-demo', DialogTriggerDemo);
diff --git a/docs/components/dialog/use-cases.md b/docs/components/dialog/use-cases.md
index 23441f4ef..0ea5f2141 100644
--- a/docs/components/dialog/use-cases.md
+++ b/docs/components/dialog/use-cases.md
@@ -10,6 +10,7 @@ import '@lion/ui/define/lion-dialog.js';
 import { demoStyle } from './src/demoStyle.js';
 import './src/styled-dialog-content.js';
 import './src/slots-dialog-content.js';
+import './src/external-dialog.js';
 ```
 
 ```html
@@ -22,6 +23,51 @@ import './src/slots-dialog-content.js';
 </lion-dialog>
 ```
 
+## External trigger
+
+```js preview-story
+export const externalTrigger = () => {
+  const externalTriggerDialog = () => {
+    class DialogTriggerDemo extends LitElement {
+      static get properties() {
+        return {
+          _isOpen: { state: true },
+        };
+      }
+
+      toggleDialog(open) {
+        return () => (this._isOpen = open);
+      }
+
+      handleDialog(e) {
+        this._isOpen = e.detail.opened;
+      }
+
+      render() {
+        return html`
+          <button @click=${this.toggleDialog(true)}>Open dialog</button>
+          <lion-dialog ?opened=${this._isOpen} @opened-changed=${this.handleDialog}>
+            <div slot="content" class="dialog demo-box">
+              Hello! You can close this notification here:
+              <button class="close-button" @click=${this.toggleDialog(false)}>⨯</button>
+            </div>
+          </lion-dialog>
+        `;
+      }
+    }
+  };
+
+  return html`
+    <style>
+      ${demoStyle}
+    </style>
+    <div class="demo-box_placements">
+      <dialog-trigger-demo></dialog-trigger-demo>
+    </div>
+  `;
+};
+```
+
 ## Placement overrides
 
 ```js preview-story
diff --git a/packages/ui/components/dialog/test/lion-dialog.test.js b/packages/ui/components/dialog/test/lion-dialog.test.js
index 97b81a22d..fa08bc864 100644
--- a/packages/ui/components/dialog/test/lion-dialog.test.js
+++ b/packages/ui/components/dialog/test/lion-dialog.test.js
@@ -127,5 +127,43 @@ describe('lion-dialog', () => {
       invokerNode.click();
       expect(document.activeElement).to.equal(invokerNode);
     });
+
+    it('opened-changed event should send detail object with opened state', async () => {
+      const el = /** @type {LionDialog} */ await fixture(html`
+        <lion-dialog .config=${{ trapsKeyboardFocus: false }}>
+          <button slot="invoker">invoker button</button>
+          <div slot="content">
+            <label for="myInput">Label</label>
+            <input id="myInput" autofocus />
+          </div>
+        </lion-dialog>
+      `);
+
+      el.setAttribute('opened', '');
+      expect(el.opened).to.be.true;
+
+      el.addEventListener('opened-changed', e => {
+        // @ts-expect-error [allow-detail-since-custom-event]
+        expect(e.detail.opened).to.be.false;
+      });
+      el.removeAttribute('opened');
+    });
+
+    it("opened-changed event's target should point to lion-dialog", async () => {
+      const el = /** @type {LionDialog} */ await fixture(html`
+        <lion-dialog .config=${{ trapsKeyboardFocus: false }}>
+          <button slot="invoker">invoker button</button>
+          <div slot="content">
+            <label for="myInput">Label</label>
+            <input id="myInput" autofocus />
+          </div>
+        </lion-dialog>
+      `);
+
+      el.addEventListener('opened-changed', e => {
+        expect(e.target).to.equal(el);
+      });
+      el.setAttribute('opened', '');
+    });
   });
 });
diff --git a/packages/ui/components/overlays/src/OverlayMixin.js b/packages/ui/components/overlays/src/OverlayMixin.js
index af65f0ff5..2676c757b 100644
--- a/packages/ui/components/overlays/src/OverlayMixin.js
+++ b/packages/ui/components/overlays/src/OverlayMixin.js
@@ -72,7 +72,11 @@ export const OverlayMixinImplementation = superclass =>
     requestUpdate(name, oldValue, options) {
       super.requestUpdate(name, oldValue, options);
       if (name === 'opened' && this.opened !== oldValue) {
-        this.dispatchEvent(new Event('opened-changed'));
+        this.dispatchEvent(
+          new CustomEvent('opened-changed', {
+            detail: { opened: this.opened },
+          }),
+        );
       }
     }