@vaadin/scroller 24.5.0-rc2 → 24.6.0-alpha1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/scroller",
-  "version": "24.5.0-rc2",
+  "version": "24.6.0-alpha1",
   "publishConfig": {
     "access": "public"
   },
@@ -35,20 +35,21 @@
     "polymer"
   ],
   "dependencies": {
+    "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.5.0-rc2",
-    "@vaadin/component-base": "24.5.0-rc2",
-    "@vaadin/vaadin-lumo-styles": "24.5.0-rc2",
-    "@vaadin/vaadin-material-styles": "24.5.0-rc2",
-    "@vaadin/vaadin-themable-mixin": "24.5.0-rc2"
+    "@vaadin/a11y-base": "24.6.0-alpha1",
+    "@vaadin/component-base": "24.6.0-alpha1",
+    "@vaadin/vaadin-lumo-styles": "24.6.0-alpha1",
+    "@vaadin/vaadin-material-styles": "24.6.0-alpha1",
+    "@vaadin/vaadin-themable-mixin": "24.6.0-alpha1"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.5.0-rc2",
+    "@vaadin/chai-plugins": "24.6.0-alpha1",
     "@vaadin/testing-helpers": "^1.0.0"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "be5bf40aec33761c6defdb5b3093c7b6dd5d97fd"
+  "gitHead": "ae1fb0e6e7ce925999051c6cc62ba8476264c63f"
 }

package/src/vaadin-scroller-mixin.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @license
+ * Copyright (c) 2020 - 2024 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';
+import type { FocusMixinClass } from '@vaadin/a11y-base/src/focus-mixin.js';
+
+export declare function ScrollerMixin<T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<FocusMixinClass> & Constructor<ScrollerMixinClass> & T;
+
+export declare class ScrollerMixinClass {
+  /**
+   * This property indicates the scroll direction. Supported values are `vertical`, `horizontal`, `none`.
+   * When `scrollDirection` is undefined scrollbars will be shown in both directions.
+   * @attr {string} scroll-direction
+   */
+  scrollDirection: 'horizontal' | 'none' | 'vertical' | undefined;
+
+  /**
+   * Indicates whether the element can be focused and where it participates in sequential keyboard navigation.
+   */
+  tabindex: number;
+}

package/src/vaadin-scroller-mixin.js

@@ -0,0 +1,48 @@
+/**
+ * @license
+ * Copyright (c) 2020 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { FocusMixin } from '@vaadin/a11y-base/src/focus-mixin.js';
+
+/**
+ * @polymerMixin
+ * @mixes FocusMixin
+ */
+export const ScrollerMixin = (superClass) =>
+  class ScrollerMixinClass extends FocusMixin(superClass) {
+    static get properties() {
+      return {
+        /**
+         * This property indicates the scroll direction. Supported values are `vertical`, `horizontal`, `none`.
+         * When `scrollDirection` is undefined scrollbars will be shown in both directions.
+         * @attr {string} scroll-direction
+         */
+        scrollDirection: {
+          type: String,
+          reflectToAttribute: true,
+        },
+
+        /**
+         * Indicates whether the element can be focused and where it participates in sequential keyboard navigation.
+         * @protected
+         */
+        tabindex: {
+          type: Number,
+          value: 0,
+          reflectToAttribute: true,
+        },
+      };
+    }
+
+    /**
+     * Override method inherited from `FocusMixin` to mark the scroller as focused
+     * only when the host is focused.
+     * @param {Event} event
+     * @return {boolean}
+     * @protected
+     */
+    _shouldSetFocus(event) {
+      return event.target === this;
+    }
+  };

package/src/vaadin-scroller.d.ts

@@ -3,10 +3,10 @@
  * Copyright (c) 2020 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { FocusMixin } from '@vaadin/a11y-base/src/focus-mixin.js';
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { ScrollerMixin } from './vaadin-scroller-mixin.js';
 
 /**
  * `<vaadin-scroller>` provides a simple way to enable scrolling when its content is overflowing.
@@ -24,19 +24,7 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  * `focused`    | Set when the element is focused.
  * `overflow`   | Set to `top`, `bottom`, `start`, `end`, all of them, or none.
  */
-declare class Scroller extends FocusMixin(ThemableMixin(ElementMixin(ControllerMixin(HTMLElement)))) {
-  /**
-   * This property indicates the scroll direction. Supported values are `vertical`, `horizontal`, `none`.
-   * When `scrollDirection` is undefined scrollbars will be shown in both directions.
-   * @attr {string} scroll-direction
-   */
-  scrollDirection: 'horizontal' | 'none' | 'vertical' | undefined;
-
-  /**
-   * Indicates whether the element can be focused and where it participates in sequential keyboard navigation.
-   */
-  tabindex: number;
-}
+declare class Scroller extends ScrollerMixin(ThemableMixin(ElementMixin(ControllerMixin(HTMLElement)))) {}
 
 declare global {
   interface HTMLElementTagNameMap {

package/src/vaadin-scroller.js

@@ -4,12 +4,12 @@
  * 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 { FocusMixin } from '@vaadin/a11y-base/src/focus-mixin.js';
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { OverflowController } from '@vaadin/component-base/src/overflow-controller.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { ScrollerMixin } from './vaadin-scroller-mixin';
 
 /**
  * `<vaadin-scroller>` provides a simple way to enable scrolling when its content is overflowing.
@@ -32,9 +32,9 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  * @mixes ThemableMixin
  * @mixes ControllerMixin
  * @mixes ElementMixin
- * @mixes FocusMixin
+ * @mixes ScrollerMixin
  */
-class Scroller extends FocusMixin(ElementMixin(ControllerMixin(ThemableMixin(PolymerElement)))) {
+class Scroller extends ScrollerMixin(ElementMixin(ControllerMixin(ThemableMixin(PolymerElement)))) {
   static get template() {
     return html`
       <style>
@@ -68,30 +68,6 @@ class Scroller extends FocusMixin(ElementMixin(ControllerMixin(ThemableMixin(Pol
     return 'vaadin-scroller';
   }
 
-  static get properties() {
-    return {
-      /**
-       * This property indicates the scroll direction. Supported values are `vertical`, `horizontal`, `none`.
-       * When `scrollDirection` is undefined scrollbars will be shown in both directions.
-       * @attr {string} scroll-direction
-       */
-      scrollDirection: {
-        type: String,
-        reflectToAttribute: true,
-      },
-
-      /**
-       * Indicates whether the element can be focused and where it participates in sequential keyboard navigation.
-       * @protected
-       */
-      tabindex: {
-        type: Number,
-        value: 0,
-        reflectToAttribute: true,
-      },
-    };
-  }
-
   /** @protected */
   ready() {
     super.ready();
@@ -99,17 +75,6 @@ class Scroller extends FocusMixin(ElementMixin(ControllerMixin(ThemableMixin(Pol
     this.__overflowController = new OverflowController(this);
     this.addController(this.__overflowController);
   }
-
-  /**
-   * Override method inherited from `FocusMixin` to mark the scroller as focused
-   * only when the host is focused.
-   * @param {Event} event
-   * @return {boolean}
-   * @protected
-   */
-  _shouldSetFocus(event) {
-    return event.target === this;
-  }
 }
 
 defineCustomElement(Scroller);

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/scroller",
-  "version": "24.5.0-rc2",
+  "version": "24.6.0-alpha1",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/scroller",
-  "version": "24.5.0-rc2",
+  "version": "24.6.0-alpha1",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {