@vaadin/component-base 24.0.0-alpha8 → 24.0.0-alpha9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/component-base",
-  "version": "24.0.0-alpha8",
+  "version": "24.0.0-alpha9",
   "publishConfig": {
     "access": "public"
   },
@@ -42,5 +42,5 @@
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^13.0.2"
   },
-  "gitHead": "476752249bb12295c500980d98a3256ad3b22b73"
+  "gitHead": "cc3f747164041566b300bde4b105d2475649e93f"
 }

package/src/element-mixin.js

@@ -45,7 +45,7 @@ const registered = new Set();
 export const ElementMixin = (superClass) =>
   class VaadinElementMixin extends DirMixin(superClass) {
     static get version() {
-      return '24.0.0-alpha8';
+      return '24.0.0-alpha9';
     }
 
     /** @protected */

package/src/overlay-class-mixin.d.ts

@@ -0,0 +1,33 @@
+/**
+ * @license
+ * Copyright (c) 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { Constructor } from '@open-wc/dedupe-mixin';
+
+/**
+ * A mixin that forwards CSS class names to the internal overlay element
+ * by setting the `overlayClass` property or `overlay-class` attribute.
+ */
+export declare function OverlayClassMixin<T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<OverlayClassMixinClass> & T;
+
+export declare class OverlayClassMixinClass {
+  /**
+   * A space-delimited list of CSS class names to set on the overlay element.
+   * This property does not affect other CSS class names set manually via JS.
+   *
+   * Note, if the CSS class name was set with this property, clearing it will
+   * remove it from the overlay, even if the same class name was also added
+   * manually, e.g. by using `classList.add()` in the `renderer` function.
+   *
+   * @attr {string} overlay-class
+   */
+  overlayClass: string;
+
+  /**
+   * An overlay element on which CSS class names are set.
+   */
+  protected _overlayElement: HTMLElement;
+}

package/src/overlay-class-mixin.js

@@ -0,0 +1,79 @@
+/**
+ * @license
+ * Copyright (c) 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * A mixin that forwards CSS class names to the internal overlay element
+ * by setting the `overlayClass` property or `overlay-class` attribute.
+ *
+ * @polymerMixin
+ */
+export const OverlayClassMixin = (superclass) =>
+  class OverlayClassMixinClass extends superclass {
+    static get properties() {
+      return {
+        /**
+         * A space-delimited list of CSS class names to set on the overlay element.
+         * This property does not affect other CSS class names set manually via JS.
+         *
+         * Note, if the CSS class name was set with this property, clearing it will
+         * remove it from the overlay, even if the same class name was also added
+         * manually, e.g. by using `classList.add()` in the `renderer` function.
+         *
+         * @attr {string} overlay-class
+         */
+        overlayClass: {
+          type: String,
+        },
+
+        /**
+         * An overlay element on which CSS class names are set.
+         *
+         * @protected
+         */
+        _overlayElement: {
+          type: Object,
+        },
+      };
+    }
+
+    static get observers() {
+      return ['__updateOverlayClassNames(overlayClass, _overlayElement)'];
+    }
+
+    /** @private */
+    __updateOverlayClassNames(overlayClass, overlayElement) {
+      if (!overlayElement) {
+        return;
+      }
+
+      // Overlay is set but overlayClass is not set
+      if (overlayClass === undefined) {
+        return;
+      }
+
+      const { classList } = overlayElement;
+
+      if (!this.__initialClasses) {
+        this.__initialClasses = new Set(classList);
+      }
+
+      if (Array.isArray(this.__previousClasses)) {
+        // Remove old classes that no longer apply
+        const classesToRemove = this.__previousClasses.filter((name) => !this.__initialClasses.has(name));
+        if (classesToRemove.length > 0) {
+          classList.remove(...classesToRemove);
+        }
+      }
+
+      // Add new classes based on the overlayClass
+      const classesToAdd = typeof overlayClass === 'string' ? overlayClass.split(' ') : [];
+      if (classesToAdd.length > 0) {
+        classList.add(...classesToAdd);
+      }
+
+      this.__previousClasses = classesToAdd;
+    }
+  };