refactor!: update MSCB overlay to not extend vaadin-overlay (#7002)

vaadin · Dec 27, 2023 · 04a61a9 · 04a61a9
1 parent 133b588
commit 04a61a9
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 39 deletions.
diff --git a/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box-overlay.d.ts b/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box-overlay.d.ts
@@ -4,12 +4,16 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { ComboBoxOverlayMixin } from '@vaadin/combo-box/src/vaadin-combo-box-overlay-mixin.js';
-import { Overlay } from '@vaadin/overlay/src/vaadin-overlay.js';
+import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
+import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 /**
  * An element used internally by `<vaadin-multi-select-combo-box>`. Not intended to be used separately.
  */
-declare class MultiSelectComboBoxOverlay extends ComboBoxOverlayMixin(Overlay) {}
+declare class MultiSelectComboBoxOverlay extends ComboBoxOverlayMixin(
+  OverlayMixin(DirMixin(ThemableMixin(HTMLElement))),
+) {}
 
 declare global {
   interface HTMLElementTagNameMap {

diff --git a/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box-overlay.js b/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box-overlay.js
@@ -3,31 +3,32 @@
  * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { ComboBoxOverlayMixin } from '@vaadin/combo-box/src/vaadin-combo-box-overlay-mixin.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
-import { Overlay } from '@vaadin/overlay/src/vaadin-overlay.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-registerStyles(
-  'vaadin-multi-select-combo-box-overlay',
-  css`
-    #overlay {
-      width: var(
-        --vaadin-multi-select-combo-box-overlay-width,
-        var(--_vaadin-multi-select-combo-box-overlay-default-width, auto)
-      );
-    }
+import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
+import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
+import { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.js';
+import { css, registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+const multiSelectComboBoxOverlayStyles = css`
+  #overlay {
+    width: var(
+      --vaadin-multi-select-combo-box-overlay-width,
+      var(--_vaadin-multi-select-combo-box-overlay-default-width, auto)
+    );
+  }
 
-    [part='content'] {
-      display: flex;
-      flex-direction: column;
-      height: 100%;
-    }
-  `,
-  { moduleId: 'vaadin-multi-select-combo-box-overlay-styles' },
-);
+  [part='content'] {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+`;
 
-let memoizedTemplate;
+registerStyles('vaadin-multi-select-combo-box-overlay', [overlayStyles, multiSelectComboBoxOverlayStyles], {
+  moduleId: 'vaadin-multi-select-combo-box-overlay-styles',
+});
 
 /**
  * An element used internally by `<vaadin-multi-select-combo-box>`. Not intended to be used separately.
@@ -36,25 +37,19 @@ let memoizedTemplate;
  * @extends ComboBoxOverlay
  * @private
  */
-class MultiSelectComboBoxOverlay extends ComboBoxOverlayMixin(Overlay) {
+class MultiSelectComboBoxOverlay extends ComboBoxOverlayMixin(OverlayMixin(DirMixin(ThemableMixin(PolymerElement)))) {
   static get is() {
     return 'vaadin-multi-select-combo-box-overlay';
   }
 
   static get template() {
-    if (!memoizedTemplate) {
-      memoizedTemplate = super.template.cloneNode(true);
-
-      const overlay = memoizedTemplate.content.querySelector('[part~="overlay"]');
-      overlay.removeAttribute('tabindex');
-
-      const loader = document.createElement('div');
-      loader.setAttribute('part', 'loader');
-
-      overlay.insertBefore(loader, overlay.firstElementChild);
-    }
-
-    return memoizedTemplate;
+    return html`
+      <div id="backdrop" part="backdrop" hidden></div>
+      <div part="overlay" id="overlay">
+        <div part="loader"></div>
+        <div part="content" id="content"><slot></slot></div>
+      </div>
+    `;
   }
 }
 

diff --git a/packages/multi-select-combo-box/theme/lumo/vaadin-multi-select-combo-box.js b/packages/multi-select-combo-box/theme/lumo/vaadin-multi-select-combo-box.js
@@ -3,7 +3,6 @@
  * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import '@vaadin/overlay/theme/lumo/vaadin-overlay.js';
 import './vaadin-multi-select-combo-box-chip-styles.js';
 import './vaadin-multi-select-combo-box-styles.js';
 import '../../src/vaadin-multi-select-combo-box.js';
diff --git a/packages/multi-select-combo-box/theme/material/vaadin-multi-select-combo-box.js b/packages/multi-select-combo-box/theme/material/vaadin-multi-select-combo-box.js
@@ -3,7 +3,6 @@
  * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import '@vaadin/overlay/theme/material/vaadin-overlay.js';
 import './vaadin-multi-select-combo-box-chip-styles.js';
 import './vaadin-multi-select-combo-box-styles.js';
 import '../../src/vaadin-multi-select-combo-box.js';