From ac33804d030141b0262b70ec66a7a894c36dda82 Mon Sep 17 00:00:00 2001
From: Thijs Louisse <Thijs.Louisse@ing.com>
Date: Thu, 26 Sep 2019 13:46:14 +0200
Subject: [PATCH] feat(select-rich): provide generic mechanism for overrifing
 overlay type

---
 packages/select-rich/src/LionSelectRich.js    | 19 ++++--
 .../select-rich/test/lion-select-rich.test.js | 60 ++++++++++++++++++-
 2 files changed, 72 insertions(+), 7 deletions(-)

diff --git a/packages/select-rich/src/LionSelectRich.js b/packages/select-rich/src/LionSelectRich.js
index 34302ee67..0e1a70db1 100644
--- a/packages/select-rich/src/LionSelectRich.js
+++ b/packages/select-rich/src/LionSelectRich.js
@@ -548,11 +548,15 @@ export class LionSelectRich extends FormRegistrarMixin(
     }
   }
 
-  __setupOverlay() {
-    this.__overlay = overlays.add(
+  /**
+   * @overridable Subclassers can override the default
+   */
+  // eslint-disable-next-line class-methods-use-this
+  _defineOverlay({ invokerNode, contentNode } = {}) {
+    return overlays.add(
       new LocalOverlayController({
-        contentNode: this._listboxNode,
-        invokerNode: this._invokerNode,
+        contentNode,
+        invokerNode,
         hidesOnEsc: false,
         hidesOnOutsideClick: true,
         inheritsReferenceObjectWidth: true,
@@ -566,6 +570,13 @@ export class LionSelectRich extends FormRegistrarMixin(
         },
       }),
     );
+  }
+
+  __setupOverlay() {
+    this.__overlay = this._defineOverlay({
+      invokerNode: this._invokerNode,
+      contentNode: this._listboxNode,
+    });
 
     this.__overlayOnShow = () => {
       this.opened = true;
diff --git a/packages/select-rich/test/lion-select-rich.test.js b/packages/select-rich/test/lion-select-rich.test.js
index 072150b0e..4015f05e3 100644
--- a/packages/select-rich/test/lion-select-rich.test.js
+++ b/packages/select-rich/test/lion-select-rich.test.js
@@ -1,9 +1,16 @@
-import { expect, fixture, html, aTimeout } from '@open-wc/testing';
-import './keyboardEventShimIE.js';
-
+import { expect, fixture, html, aTimeout, defineCE, unsafeStatic } from '@open-wc/testing';
 import '@lion/option/lion-option.js';
+import {
+  overlays,
+  LocalOverlayController,
+  GlobalOverlayController,
+  DynamicOverlayController,
+} from '@lion/overlays';
+
+import './keyboardEventShimIE.js';
 import '../lion-options.js';
 import '../lion-select-rich.js';
+import { LionSelectRich } from '../index.js';
 
 describe('lion-select-rich', () => {
   it('does not have a tabindex', async () => {
@@ -328,4 +335,51 @@ describe('lion-select-rich', () => {
       });
     });
   });
+
+  describe('Subclassers', () => {
+    it('allows to override the type of overlays', async () => {
+      const mySelectTagString = defineCE(
+        class MySelect extends LionSelectRich {
+          _defineOverlay({ invokerNode, contentNode }) {
+            // add a DynamicOverlayController
+            const dynamicCtrl = new DynamicOverlayController();
+
+            const localCtrl = overlays.add(
+              new LocalOverlayController({
+                contentNode,
+                invokerNode,
+              }),
+            );
+            dynamicCtrl.add(localCtrl);
+
+            const globalCtrl = overlays.add(
+              new GlobalOverlayController({
+                contentNode,
+                invokerNode,
+              }),
+            );
+            dynamicCtrl.add(globalCtrl);
+
+            return dynamicCtrl;
+          }
+        },
+      );
+
+      const mySelectTag = unsafeStatic(mySelectTagString);
+
+      const el = await fixture(html`
+        <${mySelectTag} label="Favorite color" name="color">
+          <lion-options slot="input">
+            ${Array(2).map(
+              (_, i) => html`
+                <lion-option .modelValue="${{ value: i, checked: false }}">value ${i}</lion-option>
+              `,
+            )}
+          </lion-options>
+        </${mySelectTag}>
+      `);
+
+      expect(el.__overlay).to.be.instanceOf(DynamicOverlayController);
+    });
+  });
 });