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

@@ -0,0 +1,5 @@
+---
+'@lion/ui': patch
+---
+
+opened-changed event detail exposes opened state

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);

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

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', '');
+    });
   });
 });

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 },
+          }),
+        );
       }
     }