@vaadin/vaadin-overlay 22.0.1 → 23.0.0-alpha3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/vaadin-overlay",
-  "version": "22.0.1",
+  "version": "23.0.0-alpha3",
   "publishConfig": {
     "access": "public"
   },
@@ -34,20 +34,20 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "^22.0.1",
-    "@vaadin/vaadin-lumo-styles": "^22.0.1",
-    "@vaadin/vaadin-material-styles": "^22.0.1",
-    "@vaadin/vaadin-themable-mixin": "^22.0.1"
+    "@vaadin/component-base": "23.0.0-alpha3",
+    "@vaadin/vaadin-lumo-styles": "23.0.0-alpha3",
+    "@vaadin/vaadin-material-styles": "23.0.0-alpha3",
+    "@vaadin/vaadin-themable-mixin": "23.0.0-alpha3"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
     "@polymer/iron-overlay-behavior": "^3.0.0",
-    "@vaadin/button": "^22.0.1",
-    "@vaadin/radio-group": "^22.0.1",
+    "@vaadin/button": "23.0.0-alpha3",
+    "@vaadin/radio-group": "23.0.0-alpha3",
     "@vaadin/testing-helpers": "^0.3.2",
-    "@vaadin/text-field": "^22.0.1",
+    "@vaadin/text-field": "23.0.0-alpha3",
     "lit": "^2.0.0",
     "sinon": "^9.2.1"
   },
-  "gitHead": "2b0a2bff0369d6020f7cc33ad35506aa2d1f6f68"
+  "gitHead": "490037919a9e054cc002c1b3be0c94a1603e1a44"
 }

package/src/vaadin-overlay-position-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
@@ -76,6 +76,7 @@ export const PositionMixin = (superClass) =>
         }
       };
     }
+
     static get observers() {
       return [
         '__positionSettingsChanged(positionTarget, horizontalAlign, verticalAlign, noHorizontalOverlap, noVerticalOverlap)',
@@ -212,6 +213,7 @@ export const PositionMixin = (superClass) =>
       );
     }
 
+    // eslint-disable-next-line max-params
     __shouldAlignStart(targetRect, contentSize, viewportSize, margins, defaultAlignStart, noOverlap, propNames) {
       const spaceForStartAlignment =
         viewportSize - targetRect[noOverlap ? propNames.end : propNames.start] - margins[propNames.end];
@@ -230,6 +232,7 @@ export const PositionMixin = (superClass) =>
      * Returns an object with CSS position properties to set,
      * e.g. { top: "100px", bottom: "" }
      */
+    // eslint-disable-next-line max-params
     __calculatePositionInOneDimension(targetRect, overlayRect, noOverlap, propNames, overlay, shouldAlignStart) {
       const cssPropNameToSet = shouldAlignStart ? propNames.start : propNames.end;
       const cssPropNameToClear = shouldAlignStart ? propNames.end : propNames.start;

package/src/vaadin-overlay.d.ts

@@ -1,8 +1,9 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
@@ -13,8 +14,41 @@ export type OverlayRenderer = (root: HTMLElement, owner: HTMLElement, model?: ob
  */
 export type OverlayOpenedChangedEvent = CustomEvent<{ value: boolean }>;
 
+/**
+ * Fired after the overlay is opened.
+ */
+export type OverlayOpenEvent = CustomEvent;
+
+/**
+ * Fired before the overlay will be closed.
+ * If canceled the closing of the overlay is canceled as well.
+ */
+export type OverlayCloseEvent = CustomEvent;
+
+/**
+ * Fired when the overlay will be closed.
+ */
+export type OverlayClosingEvent = CustomEvent;
+
+/**
+ * Fired before the overlay will be closed on outside click.
+ * If canceled the closing of the overlay is canceled as well.
+ */
+export type OverlayOutsideClickEvent = CustomEvent<{ sourceEvent: MouseEvent }>;
+
+/**
+ * Fired before the overlay will be closed on ESC button press.
+ * If canceled the closing of the overlay is canceled as well.
+ */
+export type OverlayEscapePressEvent = CustomEvent<{ sourceEvent: KeyboardEvent }>;
+
 export interface OverlayElementEventMap {
   'opened-changed': OverlayOpenedChangedEvent;
+  'vaadin-overlay-open': OverlayOpenEvent;
+  'vaadin-overlay-close': OverlayCloseEvent;
+  'vaadin-overlay-closing': OverlayClosingEvent;
+  'vaadin-overlay-outside-click': OverlayOutsideClickEvent;
+  'vaadin-overlay-escape-press': OverlayEscapePressEvent;
 }
 
 export type OverlayEventMap = HTMLElementEventMap & OverlayElementEventMap;
@@ -61,8 +95,7 @@ export type OverlayEventMap = HTMLElementEventMap & OverlayElementEventMap;
  *
  * The overlay provides `forwardHostProp` when calling
  * `Polymer.Templatize.templatize` for the template, so that the bindings
- * from the parent scope propagate to the content.  You can also pass
- * custom `instanceProps` object using the `instanceProps` property.
+ * from the parent scope propagate to the content.
  *
  * ```html
  * <vaadin-overlay>
@@ -70,10 +103,6 @@ export type OverlayEventMap = HTMLElementEventMap & OverlayElementEventMap;
  * </vaadin-overlay>
  * ```
  *
- * **NOTE:** when using `instanceProps`: because of the Polymer limitation,
- * every template can only be templatized once, so it is important
- * to set `instanceProps` before the `template` is assigned to the overlay.
- *
  * ### Styling
  *
  * To style the overlay content, use styles in the parent scope:
@@ -109,8 +138,13 @@ export type OverlayEventMap = HTMLElementEventMap & OverlayElementEventMap;
  * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
  *
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
+ * @fires {CustomEvent} vaadin-overlay-open - Fired after the overlay is opened.
+ * @fires {CustomEvent} vaadin-overlay-close - Fired before the overlay will be closed. If canceled the closing of the overlay is canceled as well.
+ * @fires {CustomEvent} vaadin-overlay-closing - Fired when the overlay will be closed.
+ * @fires {CustomEvent} vaadin-overlay-outside-click - Fired before the overlay will be closed on outside click. If canceled the closing of the overlay is canceled as well.
+ * @fires {CustomEvent} vaadin-overlay-escape-press - Fired before the overlay will be closed on ESC button press. If canceled the closing of the overlay is canceled as well.
  */
-declare class OverlayElement extends ThemableMixin(DirMixin(HTMLElement)) {
+declare class OverlayElement extends ThemableMixin(DirMixin(ControllerMixin(HTMLElement))) {
   /**
    * When true, the overlay is visible and attached to body.
    */
@@ -136,11 +170,6 @@ declare class OverlayElement extends ThemableMixin(DirMixin(HTMLElement)) {
    */
   template: HTMLTemplateElement | null | undefined;
 
-  /**
-   * Optional argument for `Polymer.Templatize.templatize`.
-   */
-  instanceProps: object | null | undefined;
-
   /**
    * References the content container after the template is stamped.
    */
@@ -179,6 +208,12 @@ declare class OverlayElement extends ThemableMixin(DirMixin(HTMLElement)) {
    */
   restoreFocusOnClose: boolean;
 
+  /**
+   * Set to specify the element which should be focused on overlay close,
+   * if `restoreFocusOnClose` is set to true.
+   */
+  restoreFocusNode?: HTMLElement;
+
   close(sourceEvent?: Event | null): void;
 
   /**

package/src/vaadin-overlay.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
@@ -8,9 +8,10 @@ import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
 import { templatize } from '@polymer/polymer/lib/utils/templatize.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { isIOS } from '@vaadin/component-base/src/browser-utils.js';
+import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
+import { FocusTrapController } from '@vaadin/component-base/src/focus-trap-controller.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { FocusablesHelper } from './vaadin-focusables-helper.js';
 
 /**
  *
@@ -55,18 +56,7 @@ import { FocusablesHelper } from './vaadin-focusables-helper.js';
  *
  * The overlay provides `forwardHostProp` when calling
  * `Polymer.Templatize.templatize` for the template, so that the bindings
- * from the parent scope propagate to the content.  You can also pass
- * custom `instanceProps` object using the `instanceProps` property.
- *
- * ```html
- * <vaadin-overlay>
- *   <template>Overlay content</template>
- * </vaadin-overlay>
- * ```
- *
- * **NOTE:** when using `instanceProps`: because of the Polymer limitation,
- * every template can only be templatized once, so it is important
- * to set `instanceProps` before the `template` is assigned to the overlay.
+ * from the parent scope propagate to the content.
  *
  * ### Styling
  *
@@ -103,12 +93,18 @@ import { FocusablesHelper } from './vaadin-focusables-helper.js';
  * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
  *
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
+ * @fires {CustomEvent} vaadin-overlay-open - Fired after the overlay is opened.
+ * @fires {CustomEvent} vaadin-overlay-close - Fired before the overlay will be closed. If canceled the closing of the overlay is canceled as well.
+ * @fires {CustomEvent} vaadin-overlay-closing - Fired when the overlay will be closed.
+ * @fires {CustomEvent} vaadin-overlay-outside-click - Fired before the overlay will be closed on outside click. If canceled the closing of the overlay is canceled as well.
+ * @fires {CustomEvent} vaadin-overlay-escape-press - Fired before the overlay will be closed on ESC button press. If canceled the closing of the overlay is canceled as well.
  *
  * @extends HTMLElement
  * @mixes ThemableMixin
  * @mixes DirMixin
+ * @mixes ControllerMixin
  */
-class OverlayElement extends ThemableMixin(DirMixin(PolymerElement)) {
+class OverlayElement extends ThemableMixin(DirMixin(ControllerMixin(PolymerElement))) {
   static get template() {
     return html`
       <style>
@@ -227,13 +223,6 @@ class OverlayElement extends ThemableMixin(DirMixin(PolymerElement)) {
         notify: true
       },
 
-      /**
-       * Optional argument for `Polymer.Templatize.templatize`.
-       */
-      instanceProps: {
-        type: Object
-      },
-
       /**
        * References the content container after the template is stamped.
        * @type {!HTMLElement | undefined}
@@ -300,6 +289,15 @@ class OverlayElement extends ThemableMixin(DirMixin(PolymerElement)) {
         value: false
       },
 
+      /**
+       * Set to specify the element which should be focused on overlay close,
+       * if `restoreFocusOnClose` is set to true.
+       * @type {HTMLElement}
+       */
+      restoreFocusNode: {
+        type: HTMLElement
+      },
+
       /** @private */
       _mouseDownInside: {
         type: Boolean
@@ -330,9 +328,6 @@ class OverlayElement extends ThemableMixin(DirMixin(PolymerElement)) {
       /** @private */
       _oldTemplate: Object,
 
-      /** @private */
-      _oldInstanceProps: Object,
-
       /** @private */
       _oldRenderer: Object,
 
@@ -342,7 +337,7 @@ class OverlayElement extends ThemableMixin(DirMixin(PolymerElement)) {
   }
 
   static get observers() {
-    return ['_templateOrRendererChanged(template, renderer, owner, model, instanceProps, opened)'];
+    return ['_templateOrRendererChanged(template, renderer, owner, model, opened)'];
   }
 
   constructor() {
@@ -363,6 +358,8 @@ class OverlayElement extends ThemableMixin(DirMixin(PolymerElement)) {
     if (isIOS) {
       this._boundIosResizeListener = () => this._detectIosNavbar();
     }
+
+    this.__focusTrapController = new FocusTrapController(this);
   }
 
   /** @protected */
@@ -377,6 +374,8 @@ class OverlayElement extends ThemableMixin(DirMixin(PolymerElement)) {
     // and <vaadin-context-menu>).
     this.addEventListener('click', () => {});
     this.$.backdrop.addEventListener('click', () => {});
+
+    this.addController(this.__focusTrapController);
   }
 
   /** @private */
@@ -516,15 +515,7 @@ class OverlayElement extends ThemableMixin(DirMixin(PolymerElement)) {
       return;
     }
 
-    // TAB
-    if (event.key === 'Tab' && this.focusTrap && !event.defaultPrevented) {
-      // if only tab key is pressed, cycle forward, else cycle backwards.
-      this._cycleTab(event.shiftKey ? -1 : 1);
-
-      event.preventDefault();
-
-      // ESC
-    } else if (event.key === 'Escape' || event.key === 'Esc') {
+    if (event.key === 'Escape') {
       const evt = new CustomEvent('vaadin-overlay-escape-press', {
         bubbles: true,
         cancelable: true,
@@ -560,8 +551,8 @@ class OverlayElement extends ThemableMixin(DirMixin(PolymerElement)) {
       this._animatedOpening();
 
       afterNextRender(this, () => {
-        if (this.focusTrap && !this.contains(document.activeElement)) {
-          this._cycleTab(0, 0);
+        if (this.focusTrap) {
+          this.__focusTrapController.trapFocus(this.$.overlay);
         }
 
         const evt = new CustomEvent('vaadin-overlay-open', { bubbles: true });
@@ -572,6 +563,8 @@ class OverlayElement extends ThemableMixin(DirMixin(PolymerElement)) {
         this._addGlobalListeners();
       }
     } else if (wasOpened) {
+      this.__focusTrapController.releaseFocus();
+
       this._animatedClosing();
 
       if (!this.modeless) {
@@ -638,16 +631,12 @@ class OverlayElement extends ThemableMixin(DirMixin(PolymerElement)) {
     }
     this.setAttribute('opening', '');
 
-    const finishOpening = () => {
-      document.addEventListener('iron-overlay-canceled', this._boundIronOverlayCanceledListener);
-
-      this.removeAttribute('opening');
-    };
-
     if (this._shouldAnimate()) {
-      this._enqueueAnimation('opening', finishOpening);
+      this._enqueueAnimation('opening', () => {
+        this._finishOpening();
+      });
     } else {
-      finishOpening();
+      this._finishOpening();
     }
   }
 
@@ -660,6 +649,25 @@ class OverlayElement extends ThemableMixin(DirMixin(PolymerElement)) {
   }
 
   /** @protected */
+  _finishOpening() {
+    document.addEventListener('iron-overlay-canceled', this._boundIronOverlayCanceledListener);
+    this.removeAttribute('opening');
+  }
+
+  /** @protected */
+  _finishClosing() {
+    document.removeEventListener('iron-overlay-canceled', this._boundIronOverlayCanceledListener);
+    this._detachOverlay();
+    this.$.overlay.style.removeProperty('pointer-events');
+    this.removeAttribute('closing');
+  }
+
+  /**
+   * @event vaadin-overlay-closing
+   * Fired when the overlay will be closed.
+   *
+   * @protected
+   */
   _animatedClosing() {
     if (this.hasAttribute('opening')) {
       this._flushAnimation('opening');
@@ -667,7 +675,11 @@ class OverlayElement extends ThemableMixin(DirMixin(PolymerElement)) {
     if (this._placeholder) {
       this._exitModalState();
 
-      if (this.restoreFocusOnClose && this.__restoreFocusNode) {
+      // Use this.restoreFocusNode if specified, otherwise fallback to the node
+      // which was focused before opening the overlay.
+      const restoreFocusNode = this.restoreFocusNode || this.__restoreFocusNode;
+
+      if (this.restoreFocusOnClose && restoreFocusNode) {
         // If the activeElement is `<body>` or inside the overlay,
         // we are allowed to restore the focus. In all the other
         // cases focus might have been moved elsewhere by another
@@ -676,24 +688,22 @@ class OverlayElement extends ThemableMixin(DirMixin(PolymerElement)) {
         const activeElement = this._getActiveElement();
 
         if (activeElement === document.body || this._deepContains(activeElement)) {
-          this.__restoreFocusNode.focus();
+          // Focusing the restoreFocusNode doesn't always work synchronously on Firefox and Safari
+          // (e.g. combo-box overlay close on outside click).
+          setTimeout(() => restoreFocusNode.focus());
         }
         this.__restoreFocusNode = null;
       }
 
       this.setAttribute('closing', '');
-
-      const finishClosing = () => {
-        document.removeEventListener('iron-overlay-canceled', this._boundIronOverlayCanceledListener);
-        this._detachOverlay();
-        this.shadowRoot.querySelector('[part="overlay"]').style.removeProperty('pointer-events');
-        this.removeAttribute('closing');
-      };
+      this.dispatchEvent(new CustomEvent('vaadin-overlay-closing'));
 
       if (this._shouldAnimate()) {
-        this._enqueueAnimation('closing', finishClosing);
+        this._enqueueAnimation('closing', () => {
+          this._finishClosing();
+        });
       } else {
-        finishClosing();
+        this._finishClosing();
       }
     }
   }
@@ -825,15 +835,13 @@ class OverlayElement extends ThemableMixin(DirMixin(PolymerElement)) {
 
   /**
    * @param {!HTMLTemplateElement} template
-   * @param {object} instanceProps
    * @protected
    */
-  _stampOverlayTemplate(template, instanceProps) {
+  _stampOverlayTemplate(template) {
     this._removeOldContent();
 
     if (!template._Templatizer) {
       template._Templatizer = templatize(template, this, {
-        instanceProps: instanceProps,
         forwardHostProp: function (prop, value) {
           if (this._instance) {
             this._instance.forwardHostProp(prop, value);
@@ -886,7 +894,8 @@ class OverlayElement extends ThemableMixin(DirMixin(PolymerElement)) {
   }
 
   /** @private */
-  _templateOrRendererChanged(template, renderer, owner, model, instanceProps, opened) {
+  // eslint-disable-next-line max-params
+  _templateOrRendererChanged(template, renderer, owner, model, opened) {
     if (template && renderer) {
       this._removeNewRendererOrTemplate(template, this._oldTemplate, renderer, this._oldRenderer);
       throw new Error('You should only use either a renderer or a template for overlay content');
@@ -896,8 +905,7 @@ class OverlayElement extends ThemableMixin(DirMixin(PolymerElement)) {
     this._oldModel = model;
     this._oldOwner = owner;
 
-    const templateOrInstancePropsChanged = this._oldInstanceProps !== instanceProps || this._oldTemplate !== template;
-    this._oldInstanceProps = instanceProps;
+    const templateChanged = this._oldTemplate !== template;
     this._oldTemplate = template;
 
     const rendererChanged = this._oldRenderer !== renderer;
@@ -915,8 +923,8 @@ class OverlayElement extends ThemableMixin(DirMixin(PolymerElement)) {
       delete this.content._$litPart$;
     }
 
-    if (template && templateOrInstancePropsChanged) {
-      this._stampOverlayTemplate(template, instanceProps);
+    if (template && templateChanged) {
+      this._stampOverlayTemplate(template);
     } else if (renderer && (rendererChanged || openedChanged || ownerOrModelChanged)) {
       if (opened) {
         this.requestContentUpdate();
@@ -924,59 +932,6 @@ class OverlayElement extends ThemableMixin(DirMixin(PolymerElement)) {
     }
   }
 
-  /**
-   * @param {Element} element
-   * @return {boolean}
-   * @protected
-   */
-  _isFocused(element) {
-    return element && element.getRootNode().activeElement === element;
-  }
-
-  /**
-   * @param {Element[]} elements
-   * @return {number}
-   * @protected
-   */
-  _focusedIndex(elements) {
-    elements = elements || this._getFocusableElements();
-    return elements.indexOf(elements.filter(this._isFocused).pop());
-  }
-
-  /**
-   * @param {number} increment
-   * @param {number | undefined} index
-   * @protected
-   */
-  _cycleTab(increment, index) {
-    const focusableElements = this._getFocusableElements();
-
-    if (index === undefined) {
-      index = this._focusedIndex(focusableElements);
-    }
-
-    index += increment;
-
-    // rollover to first item
-    if (index >= focusableElements.length) {
-      index = 0;
-      // go to last item
-    } else if (index < 0) {
-      index = focusableElements.length - 1;
-    }
-
-    focusableElements[index].focus();
-  }
-
-  /**
-   * @return {!Array<!HTMLElement>}
-   * @protected
-   */
-  _getFocusableElements() {
-    // collect all focusable elements
-    return FocusablesHelper.getTabbableNodes(this.$.overlay);
-  }
-
   /**
    * @return {!Element}
    * @protected

package/src/vaadin-focusables-helper.d.ts

@@ -1,27 +0,0 @@
-/**
- * `Polymer.IronFocusablesHelper` relies on some Polymer-specific legacy API,
- * especially the `root` property which does not exist for native shadow DOM.
- * That's why we have this helper here.
- * See https://github.com/PolymerElements/iron-overlay-behavior/issues/282
- */
-declare class FocusablesHelper {
-  /**
-   * Returns a sorted array of tabbable nodes, including the root node.
-   * It searches the tabbable nodes in the light and shadow dom of the children,
-   * sorting the result by tabindex.
-   */
-  static getTabbableNodes(node: Node): HTMLElement[];
-
-  /**
-   * Returns if a element is focusable.
-   */
-  static isFocusable(element: HTMLElement): boolean;
-
-  /**
-   * Returns if a element is tabbable. To be tabbable, a element must be
-   * focusable, visible, and with a tabindex !== -1.
-   */
-  static isTabbable(element: HTMLElement): boolean;
-}
-
-export { FocusablesHelper };

package/src/vaadin-focusables-helper.js

@@ -1,207 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-/**
- * `Polymer.IronFocusablesHelper` relies on some Polymer-specific legacy API,
- * especially the `root` property which does not exist for native shadow DOM.
- * That's why we have this helper here.
- * See https://github.com/PolymerElements/iron-overlay-behavior/issues/282
- */
-class FocusablesHelper {
-  /**
-   * Returns a sorted array of tabbable nodes, including the root node.
-   * It searches the tabbable nodes in the light and shadow dom of the children,
-   * sorting the result by tabindex.
-   * @param {!Node} node
-   * @return {!Array<!HTMLElement>}
-   */
-  static getTabbableNodes(node) {
-    const result = [];
-    // If there is at least one element with tabindex > 0, we need to sort
-    // the final array by tabindex.
-    const needsSortByTabIndex = this._collectTabbableNodes(node, result);
-    if (needsSortByTabIndex) {
-      return this._sortByTabIndex(result);
-    }
-    return result;
-  }
-
-  /**
-   * Returns if a element is focusable.
-   * @param {!HTMLElement} element
-   * @return {boolean}
-   */
-  static isFocusable(element) {
-    // From http://stackoverflow.com/a/1600194/4228703:
-    // There isn't a definite list, it's up to the browser. The only
-    // standard we have is DOM Level 2 HTML
-    // https://www.w3.org/TR/DOM-Level-2-HTML/html.html, according to which the
-    // only elements that have a focus() method are HTMLInputElement,
-    // HTMLSelectElement, HTMLTextAreaElement and HTMLAnchorElement. This
-    // notably omits HTMLButtonElement and HTMLAreaElement. Referring to these
-    // tests with tabbables in different browsers
-    // http://allyjs.io/data-tables/focusable.html
-
-    // Elements that cannot be focused if they have [disabled] attribute.
-    if (element.matches('input, select, textarea, button, object')) {
-      return element.matches(':not([disabled])');
-    }
-    // Elements that can be focused even if they have [disabled] attribute.
-    return element.matches('a[href], area[href], iframe, [tabindex], [contentEditable]');
-  }
-
-  /**
-   * Returns if a element is tabbable. To be tabbable, a element must be
-   * focusable, visible, and with a tabindex !== -1.
-   * @param {!HTMLElement} element
-   * @return {boolean}
-   */
-  static isTabbable(element) {
-    return this.isFocusable(element) && element.matches(':not([tabindex="-1"])') && this._isVisible(element);
-  }
-
-  /**
-   * Returns the normalized element tabindex. If not focusable, returns -1.
-   * It checks for the attribute "tabindex" instead of the element property
-   * `tabIndex` since browsers assign different values to it.
-   * e.g. in Firefox `<div contenteditable>` has `tabIndex = -1`
-   * @param {!HTMLElement} element
-   * @return {!number}
-   * @private
-   */
-  static _normalizedTabIndex(element) {
-    if (this.isFocusable(element)) {
-      const tabIndex = element.getAttribute('tabindex') || 0;
-      return Number(tabIndex);
-    }
-    return -1;
-  }
-
-  /**
-   * Searches for nodes that are tabbable and adds them to the `result` array.
-   * Returns if the `result` array needs to be sorted by tabindex.
-   * @param {!Node} node The starting point for the search; added to `result` if tabbable.
-   * @param {!Array<!HTMLElement>} result
-   * @return {boolean}
-   * @private
-   */
-  static _collectTabbableNodes(node, result) {
-    // If not an element or not visible, no need to explore children.
-    if (node.nodeType !== Node.ELEMENT_NODE || !this._isVisible(node)) {
-      return false;
-    }
-    const element = /** @type {!HTMLElement} */ (node);
-    const tabIndex = this._normalizedTabIndex(element);
-    let needsSort = tabIndex > 0;
-    if (tabIndex >= 0) {
-      result.push(element);
-    }
-
-    // In ShadowDOM v1, tab order is affected by the order of distribution.
-    // E.g. getTabbableNodes(#root) in ShadowDOM v1 should return [#A, #B];
-    // in ShadowDOM v0 tab order is not affected by the distribution order,
-    // in fact getTabbableNodes(#root) returns [#B, #A].
-    //  <div id="root">
-    //   <!-- shadow -->
-    //     <slot name="a">
-    //     <slot name="b">
-    //   <!-- /shadow -->
-    //   <input id="A" slot="a">
-    //   <input id="B" slot="b" tabindex="1">
-    //  </div>
-    let children;
-    if (element.localName === 'slot') {
-      children = element.assignedNodes({ flatten: true });
-    } else {
-      // Use shadow root if possible, will check for distributed nodes.
-      children = (element.shadowRoot || element).children;
-    }
-    if (children) {
-      for (let i = 0; i < children.length; i++) {
-        // Ensure method is always invoked to collect tabbable children.
-        needsSort = this._collectTabbableNodes(children[i], result) || needsSort;
-      }
-    }
-    return needsSort;
-  }
-
-  /**
-   * Returns false if the element has `visibility: hidden` or `display: none`
-   * @param {!HTMLElement} element
-   * @return {boolean}
-   * @private
-   */
-  static _isVisible(element) {
-    // Check inline style first to save a re-flow. If looks good, check also
-    // computed style.
-    let style = element.style;
-    if (style.visibility !== 'hidden' && style.display !== 'none') {
-      style = window.getComputedStyle(element);
-      return style.visibility !== 'hidden' && style.display !== 'none';
-    }
-    return false;
-  }
-
-  /**
-   * Sorts an array of tabbable elements by tabindex. Returns a new array.
-   * @param {!Array<!HTMLElement>} tabbables
-   * @return {!Array<!HTMLElement>}
-   * @private
-   */
-  static _sortByTabIndex(tabbables) {
-    // Implement a merge sort as Array.prototype.sort does a non-stable sort
-    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
-    const len = tabbables.length;
-    if (len < 2) {
-      return tabbables;
-    }
-    const pivot = Math.ceil(len / 2);
-    const left = this._sortByTabIndex(tabbables.slice(0, pivot));
-    const right = this._sortByTabIndex(tabbables.slice(pivot));
-    return this._mergeSortByTabIndex(left, right);
-  }
-
-  /**
-   * Merge sort iterator, merges the two arrays into one, sorted by tab index.
-   * @param {!Array<!HTMLElement>} left
-   * @param {!Array<!HTMLElement>} right
-   * @return {!Array<!HTMLElement>}
-   * @private
-   */
-  static _mergeSortByTabIndex(left, right) {
-    const result = [];
-    while (left.length > 0 && right.length > 0) {
-      if (this._hasLowerTabOrder(left[0], right[0])) {
-        result.push(right.shift());
-      } else {
-        result.push(left.shift());
-      }
-    }
-
-    return result.concat(left, right);
-  }
-
-  /**
-   * Returns if element `a` has lower tab order compared to element `b`
-   * (both elements are assumed to be focusable and tabbable).
-   * Elements with tabindex = 0 have lower tab order compared to elements
-   * with tabindex > 0.
-   * If both have same tabindex, it returns false.
-   * @param {!HTMLElement} a
-   * @param {!HTMLElement} b
-   * @return {boolean}
-   * @private
-   */
-  static _hasLowerTabOrder(a, b) {
-    // Normalize tabIndexes
-    // e.g. in Firefox `<div contenteditable>` has `tabIndex = -1`
-    const ati = Math.max(a.tabIndex, 0);
-    const bti = Math.max(b.tabIndex, 0);
-    return ati === 0 || bti === 0 ? bti > ati : ati > bti;
-  }
-}
-
-export { FocusablesHelper };