chore: align select-rich and input-datepicker with latest overlays

packages/input-datepicker/package.json

@@ -48,7 +48,6 @@
     "@lion/button": "^0.3.16",
     "@open-wc/demoing-storybook": "^0.2.0",
     "@open-wc/testing": "^2.3.4",
-    "@polymer/iron-test-helpers": "^3.0.1",
     "sinon": "^7.2.2"
   }
 }

packages/input-datepicker/src/LionInputDatepicker.js

@@ -138,7 +138,7 @@ export class LionInputDatepicker extends LionInputDate {
   }
 
   get _calendarOverlayElement() {
-    return this._overlayCtrl._container.firstElementChild;
+    return this._overlayCtrl.contentNode;
   }
 
   get _calendarElement() {
@@ -202,7 +202,7 @@ export class LionInputDatepicker extends LionInputDate {
 
   _calendarOverlayTemplate() {
     return html`
-      <lion-calendar-overlay-frame>
+      <lion-calendar-overlay-frame @dialog-close=${() => this._overlayCtrl.hide()}>
         <span slot="heading">${this.calendarHeading}</span>
         ${this._calendarTemplate()}
       </lion-calendar-overlay-frame>
@@ -255,9 +255,9 @@ export class LionInputDatepicker extends LionInputDate {
     render(this._invokerTemplate(), renderParent);
     const invokerNode = renderParent.firstElementChild;
 
-    // TODO: ModalDialogController should be replaced by a more flexible
+    // 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 (working name for this controller: ResponsiveOverlayController)
+    // bottom sheet via DynamicOverlayController
     this._overlayCtrl = overlays.add(
       new ModalDialogController({
         contentTemplate: () => this._calendarOverlayTemplate(),

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

@@ -40,7 +40,7 @@ export class DatepickerInputObject {
   }
 
   get overlayEl() {
-    return this.el._overlayCtrl._container && this.el._overlayCtrl._container.firstElementChild;
+    return this.el._overlayCtrl.contentNode;
   }
 
   get overlayHeadingEl() {

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

@@ -8,8 +8,6 @@ import {
   minMaxDateValidator,
   isDateDisabledValidator,
 } from '@lion/validate';
-import { keyCodes } from '@lion/overlays/src/utils/key-codes.js';
-import { keyUpOn } from '@polymer/iron-test-helpers/mock-interactions.js';
 import { LionCalendar } from '@lion/calendar';
 import { isSameDate } from '@lion/calendar/src/utils/isSameDate.js';
 import { DatepickerInputObject } from '../test-helpers.js';
@@ -92,9 +90,22 @@ describe('<lion-input-datepicker>', () => {
       const elObj = new DatepickerInputObject(el);
       await elObj.openCalendar();
       expect(elObj.overlayController.isShown).to.equal(true);
-      // Mimic user input: should fire the 'selected-date-changed' event
+
-      // Make sure focus is inside the calendar/overlay
+      elObj.overlayController.contentNode.dispatchEvent(
-      keyUpOn(elObj.calendarEl, keyCodes.escape);
+        new KeyboardEvent('keyup', { key: 'Escape' }),
+      );
+      expect(elObj.overlayController.isShown).to.equal(false);
+    });
+
+    it('closes the calendar via close button', async () => {
+      const el = await fixture(html`
+        <lion-input-datepicker></lion-input-datepicker>
+      `);
+      const elObj = new DatepickerInputObject(el);
+      await elObj.openCalendar();
+      expect(elObj.overlayController.isShown).to.equal(true);
+
+      elObj.overlayCloseButtonEl.click();
       expect(elObj.overlayController.isShown).to.equal(false);
     });
 

packages/select-rich/test/lion-select-rich-interaction.test.js

@@ -280,7 +280,9 @@ describe('lion-select-rich interactions', () => {
   describe('Disabled', () => {
     it('cannot be focused if disabled', async () => {
       const el = await fixture(html`
-        <lion-select-rich disabled></lion-select-rich>
+        <lion-select-rich disabled>
+          <lion-options slot="input"></lion-options>
+        </lion-select-rich>
       `);
       expect(el._invokerNode.tabIndex).to.equal(-1);
     });
@@ -312,7 +314,9 @@ describe('lion-select-rich interactions', () => {
 
     it('cannot be opened via click if disabled', async () => {
       const el = await fixture(html`
-        <lion-select-rich disabled> </lion-select-rich>
+        <lion-select-rich disabled>
+          <lion-options slot="input"></lion-options>
+        </lion-select-rich>
       `);
       el._invokerNode.click();
       expect(el.opened).to.be.false;
@@ -320,7 +324,9 @@ describe('lion-select-rich interactions', () => {
 
     it('reflects disabled attribute to invoker', async () => {
       const el = await fixture(html`
-        <lion-select-rich disabled> </lion-select-rich>
+        <lion-select-rich disabled>
+          <lion-options slot="input"></lion-options>
+        </lion-select-rich>
       `);
       expect(el._invokerNode.hasAttribute('disabled')).to.be.true;
       el.removeAttribute('disabled');

packages/select-rich/test/lion-select-rich.test.js

@@ -8,7 +8,9 @@ import '../lion-select-rich.js';
 describe('lion-select-rich', () => {
   it('does not have a tabindex', async () => {
     const el = await fixture(html`
-      <lion-select-rich></lion-select-rich>
+      <lion-select-rich>
+        <lion-options slot="input"></lion-options>
+      </lion-select-rich>
     `);
     expect(el.hasAttribute('tabindex')).to.be.false;
   });
@@ -16,7 +18,9 @@ describe('lion-select-rich', () => {
   describe('Invoker', () => {
     it('generates an lion-select-invoker if no invoker is provided', async () => {
       const el = await fixture(html`
-        <lion-select-rich></lion-select-rich>
+        <lion-select-rich>
+          <lion-options slot="input"></lion-options>
+        </lion-select-rich>
       `);
 
       expect(el._invokerNode).to.exist;
@@ -43,7 +47,9 @@ describe('lion-select-rich', () => {
   describe('overlay', () => {
     it('should be closed by default', async () => {
       const el = await fixture(html`
-        <lion-select-rich></lion-select-rich>
+        <lion-select-rich>
+          <lion-options slot="input"></lion-options>
+        </lion-select-rich>
       `);
       expect(el.opened).to.be.false;
     });
@@ -117,7 +123,9 @@ describe('lion-select-rich', () => {
   describe('interaction-mode', () => {
     it('allows to specify an interaction-mode which determines other behaviors', async () => {
       const el = await fixture(html`
-        <lion-select-rich interaction-mode="mac"></lion-select-rich>
+        <lion-select-rich interaction-mode="mac">
+          <lion-options slot="input"></lion-options>
+        </lion-select-rich>
       `);
       expect(el.interactionMode).to.equal('mac');
     });
@@ -279,6 +287,8 @@ describe('lion-select-rich', () => {
       expect(el._invokerNode.getAttribute('aria-expanded')).to.equal('false');
       el.opened = true;
       await el.updateComplete;
+      await el.updateComplete; // need 2 awaits as overlay.show is an async function
+
       expect(el._invokerNode.getAttribute('aria-expanded')).to.equal('true');
     });
   });