feat: update to latest overlay system

Co-authored-by: Thomas Allmer <Thomas.Allmer@ing.com>
Co-authored-by: Joren Broekema <Joren.Broekema@ing.com>
Co-authored-by: Mikhail Bashkirov <Mikhail.Bashkirov@ing.com>
Co-authored-by: Alex Ghiu <Alex.Ghiu@ing.com>

Author: 5 people

packages/calendar/src/LionCalendar.js

@@ -221,7 +221,6 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
   firstUpdated() {
     super.firstUpdated();
     this.__contentWrapperElement = this.shadowRoot.getElementById('js-content-wrapper');
-
     this.__addEventDelegationForClickDate();
     this.__addEventDelegationForFocusDate();
     this.__addEventDelegationForBlurDate();
@@ -501,6 +500,9 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
   }
 
   __removeEventDelegations() {
+    if (!this.__contentWrapperElement) {
+      return;
+    }
     this.__contentWrapperElement.removeEventListener('click', this.__clickDateDelegation);
     this.__contentWrapperElement.removeEventListener('focus', this.__focusDateDelegation);
     this.__contentWrapperElement.removeEventListener('blur', this.__blurDateDelegation);

packages/input-datepicker/src/LionInputDatepicker.js

@@ -1,15 +1,15 @@
-import { html, render, ifDefined } from '@lion/core';
+import { html, ifDefined, render } from '@lion/core';
 import { LionInputDate } from '@lion/input-date';
-import { overlays, ModalDialogController } from '@lion/overlays';
-import { Unparseable, isValidatorApplied } from '@lion/validate';
+import { OverlayController, withModalDialogConfig, OverlayMixin } from '@lion/overlays';
+import { isValidatorApplied } from '@lion/validate';
 import '@lion/calendar/lion-calendar.js';
 import './lion-calendar-overlay-frame.js';
 
 /**
  * @customElement lion-input-datepicker
  * @extends {LionInputDate}
  */
-export class LionInputDatepicker extends LionInputDate {
+export class LionInputDatepicker extends OverlayMixin(LionInputDate) {
   static get properties() {
     return {
       /**
@@ -46,7 +46,11 @@ export class LionInputDatepicker extends LionInputDate {
   get slots() {
     return {
       ...super.slots,
-      [this._calendarInvokerSlot]: () => this.__createPickerAndReturnInvokerNode(),
+      [this._calendarInvokerSlot]: () => {
+        const renderParent = document.createElement('div');
+        render(this._invokerTemplate(), renderParent);
+        return renderParent.firstElementChild;
+      },
     };
   }
 
@@ -137,12 +141,8 @@ export class LionInputDatepicker extends LionInputDate {
     return this.querySelector(`#${this.__invokerId}`);
   }
 
-  get _calendarOverlayElement() {
-    return this._overlayCtrl.contentNode;
-  }
-
   get _calendarElement() {
-    return this._calendarOverlayElement.querySelector('#calendar');
+    return this._overlayCtrl.contentNode.querySelector('#calendar');
   }
 
   constructor() {
@@ -200,7 +200,12 @@ export class LionInputDatepicker extends LionInputDate {
     }
   }
 
-  _calendarOverlayTemplate() {
+  /**
+   * Defining this overlay as a templates lets OverlayInteraceMixin
+   * this is our source to give as .contentNode to OverlayController.
+   * Important: do not change the name of this method.
+   */
+  _overlayTemplate() {
     return html`
       <lion-calendar-overlay-frame @dialog-close=${() => this._overlayCtrl.hide()}>
         <span slot="heading">${this.calendarHeading}</span>
@@ -240,8 +245,6 @@ export class LionInputDatepicker extends LionInputDate {
         type="button"
         @click="${this.__openCalendarOverlay}"
         id="${this.__invokerId}"
-        aria-haspopup="dialog"
-        aria-expanded="false"
         aria-label="${this.msgLit('lion-input-datepicker:openDatepickerLabel')}"
         title="${this.msgLit('lion-input-datepicker:openDatepickerLabel')}"
       >
@@ -250,27 +253,26 @@ export class LionInputDatepicker extends LionInputDate {
     `;
   }
 
-  __createPickerAndReturnInvokerNode() {
-    const renderParent = document.createElement('div');
-    render(this._invokerTemplate(), renderParent);
-    const invokerNode = renderParent.firstElementChild;
-
-    // TODO: ModalDialogController could be replaced by a more flexible
-    // overlay, allowing the overlay to switch on smaller screens, for instance from dropdown to
-    // bottom sheet via DynamicOverlayController
-    this._overlayCtrl = overlays.add(
-      new ModalDialogController({
-        contentTemplate: () => this._calendarOverlayTemplate(),
-        elementToFocusAfterHide: invokerNode,
-      }),
-    );
-    return invokerNode;
+  /**
+   * @override Configures OverlayMixin
+   * @desc returns an instance of a (dynamic) overlay controller
+   * @returns {OverlayController}
+   */
+  // eslint-disable-next-line class-methods-use-this
+  _defineOverlay({ contentNode, invokerNode }) {
+    const ctrl = new OverlayController({
+      ...withModalDialogConfig(),
+      contentNode,
+      invokerNode,
+      elementToFocusAfterHide: invokerNode,
+    });
+    return ctrl;
   }
 
   async __openCalendarOverlay() {
     this._overlayCtrl.show();
     await Promise.all([
-      this._calendarOverlayElement.updateComplete,
+      this._overlayCtrl.contentNode.updateComplete,
       this._calendarElement.updateComplete,
     ]);
     this._onCalendarOverlayOpened();
@@ -301,7 +303,7 @@ export class LionInputDatepicker extends LionInputDate {
    * @returns {Date|undefined} a 'guarded' modelValue
    */
   static __getSyncDownValue(modelValue) {
-    return modelValue instanceof Unparseable ? undefined : modelValue;
+    return modelValue instanceof Date ? modelValue : undefined;
   }
 
   /**
@@ -327,4 +329,11 @@ export class LionInputDatepicker extends LionInputDate {
       }
     });
   }
+
+  /**
+   * @override Configures OverlayMixin
+   */
+  get _overlayInvokerNode() {
+    return this._invokerElement;
+  }
 }

packages/input-datepicker/test-helpers/DatepickerInputObject.js

@@ -24,6 +24,10 @@ export class DatepickerInputObject {
     return Promise.all(completePromises);
   }
 
+  async closeCalendar() {
+    this.overlayCloseButtonEl.click();
+  }
+
   async selectMonthDay(day) {
     this.overlayController.show();
     await this.calendarEl.updateComplete;

packages/input-datepicker/test/lion-input-datepicker.test.js

@@ -1,6 +1,5 @@
 import { expect, fixture, defineCE } from '@open-wc/testing';
 import sinon from 'sinon';
-import { localizeTearDown } from '@lion/localize/test-helpers.js';
 import { html, LitElement } from '@lion/core';
 import {
   maxDateValidator,
@@ -15,10 +14,6 @@ import { LionInputDatepicker } from '../src/LionInputDatepicker.js';
 import '../lion-input-datepicker.js';
 
 describe('<lion-input-datepicker>', () => {
-  beforeEach(() => {
-    localizeTearDown();
-  });
-
   describe('Calendar Overlay', () => {
     it('implements calendar-overlay Style component', async () => {
       const el = await fixture(html`
@@ -287,14 +282,16 @@ describe('<lion-input-datepicker>', () => {
       expect(elObj.invokerEl.getAttribute('aria-label')).to.equal('Open date picker');
     });
 
-    // TODO: move this functionality to GlobalOverlay
-    it('adds aria-haspopup="dialog" and aria-expanded="true" to invoker button', async () => {
+    it('adds [aria-expanded] to invoker button', async () => {
       const el = await fixture(html`
         <lion-input-datepicker></lion-input-datepicker>
       `);
       const elObj = new DatepickerInputObject(el);
 
-      expect(elObj.invokerEl.getAttribute('aria-haspopup')).to.equal('dialog');
+      expect(elObj.invokerEl.getAttribute('aria-expanded')).to.equal('false');
+      await elObj.openCalendar();
+      expect(elObj.invokerEl.getAttribute('aria-expanded')).to.equal('true');
+      await elObj.closeCalendar();
       expect(elObj.invokerEl.getAttribute('aria-expanded')).to.equal('false');
     });
   });

packages/option/src/LionOption.js

@@ -28,7 +28,8 @@ export class LionOption extends DisabledMixin(ChoiceInputMixin(FormRegisteringMi
           padding: 4px;
         }
 
-        :host([active]) {
+        :host([active]),
+        :host(:hover) {
           background-color: #ddd;
         }
 
@@ -46,7 +47,7 @@ export class LionOption extends DisabledMixin(ChoiceInputMixin(FormRegisteringMi
   constructor() {
     super();
     this.active = false;
-    this.__registerEventListener();
+    this.__registerEventListeners();
   }
 
   _requestUpdate(name, oldValue) {
@@ -81,35 +82,16 @@ export class LionOption extends DisabledMixin(ChoiceInputMixin(FormRegisteringMi
     this.setAttribute('role', 'option');
   }
 
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.__unRegisterEventListeners();
-  }
-
-  __registerEventListener() {
+  __registerEventListeners() {
     this.__onClick = () => {
       if (!this.disabled) {
         this.checked = true;
       }
     };
-    this.__onMouseEnter = () => {
-      if (!this.disabled) {
-        this.active = true;
-      }
-    };
-    this.__onMouseLeave = () => {
-      if (!this.disabled) {
-        this.active = false;
-      }
-    };
     this.addEventListener('click', this.__onClick);
-    this.addEventListener('mouseenter', this.__onMouseEnter);
-    this.addEventListener('mouseleave', this.__onMouseLeave);
   }
 
   __unRegisterEventListeners() {
     this.removeEventListener('click', this.__onClick);
-    this.removeEventListener('mouseenter', this.__onMouseEnter);
-    this.removeEventListener('mouseleave', this.__onMouseLeave);
   }
 }

packages/option/test/lion-option.test.js

@@ -80,24 +80,6 @@ describe('lion-option', () => {
       expect(el.hasAttribute('active')).to.be.false;
     });
 
-    it('does become active on [mouseenter]', async () => {
-      const el = await fixture(html`
-        <lion-option .choiceValue=${10}></lion-option>
-      `);
-      expect(el.active).to.be.false;
-      el.dispatchEvent(new Event('mouseenter'));
-      expect(el.active).to.be.true;
-    });
-
-    it('does become un-active on [mouseleave]', async () => {
-      const el = await fixture(html`
-        <lion-option .choiceValue=${10} active></lion-option>
-      `);
-      expect(el.active).to.be.true;
-      el.dispatchEvent(new Event('mouseleave'));
-      expect(el.active).to.be.false;
-    });
-
     it('does become checked on [click]', async () => {
       const el = await fixture(html`
         <lion-option .choiceValue=${10}></lion-option>

packages/popup/src/LionPopup.js

@@ -1,53 +1,40 @@
-import { UpdatingElement } from '@lion/core';
-import { overlays, LocalOverlayController } from '@lion/overlays';
-
-export class LionPopup extends UpdatingElement {
-  static get properties() {
-    return {
-      popperConfig: {
-        type: Object,
-      },
-    };
+import { LitElement, html } from '@lion/core';
+import { OverlayMixin, OverlayController } from '@lion/overlays';
+
+export class LionPopup extends OverlayMixin(LitElement) {
+  render() {
+    return html`
+      <slot name="invoker"></slot>
+      <slot name="content"></slot>
+    `;
   }
 
-  get popperConfig() {
-    return this._popperConfig;
+  get _overlayContentNode() {
+    return this.querySelector('[slot=content]');
   }
 
-  set popperConfig(config) {
-    this._popperConfig = {
-      ...this._popperConfig,
-      ...config,
-    };
+  get _overlayInvokerNode() {
+    return this.querySelector('[slot=invoker]');
+  }
 
-    if (this._controller && this._controller._popper) {
-      this._controller.updatePopperConfig(this._popperConfig);
-    }
+  // eslint-disable-next-line class-methods-use-this
+  _defineOverlay() {
+    return new OverlayController({
+      placementMode: 'local',
+      contentNode: this._overlayContentNode,
+      invokerNode: this._overlayInvokerNode,
+      handlesAccessibility: true,
+    });
   }
 
   connectedCallback() {
     super.connectedCallback();
-    this.contentNode = this.querySelector('[slot="content"]');
-    this.invokerNode = this.querySelector('[slot="invoker"]');
-
-    this._controller = overlays.add(
-      new LocalOverlayController({
-        hidesOnEsc: true,
-        hidesOnOutsideClick: true,
-        popperConfig: this.popperConfig,
-        contentNode: this.contentNode,
-        invokerNode: this.invokerNode,
-      }),
-    );
-    this._show = () => this._controller.show();
-    this._hide = () => this._controller.hide();
-    this._toggle = () => this._controller.toggle();
-
-    this.invokerNode.addEventListener('click', this._toggle);
+    this.__toggle = () => this._overlayCtrl.toggle();
+    this._overlayInvokerNode.addEventListener('click', this.__toggle);
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.invokerNode.removeEventListener('click', this._toggle);
+    this._overlayInvokerNode.removeEventListener('click', this._toggle);
   }
 }