refactor: extract common scroller logic to reusable mixin

packages/scroller/package.json

@@ -35,6 +35,7 @@
     "polymer"
   ],
   "dependencies": {
+    "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
     "@vaadin/a11y-base": "24.6.0-alpha0",
     "@vaadin/component-base": "24.6.0-alpha0",

packages/scroller/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;
+}

packages/scroller/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;
+    }
+  };

packages/scroller/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 {

packages/scroller/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,48 +68,13 @@ 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();
 
     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);