@vaadin/overlay - npm Package Compare versions

Comparing version 24.1.0-beta1 to 24.1.0-beta2

package.json

 {
   "name": "@vaadin/overlay",
-  "version": "24.1.0-beta1",
+  "version": "24.1.0-beta2",
   "publishConfig": {
@@ -39,7 +39,7 @@ "access": "public"
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.1.0-beta1",
-    "@vaadin/component-base": "24.1.0-beta1",
-    "@vaadin/vaadin-lumo-styles": "24.1.0-beta1",
-    "@vaadin/vaadin-material-styles": "24.1.0-beta1",
-    "@vaadin/vaadin-themable-mixin": "24.1.0-beta1"
+    "@vaadin/a11y-base": "24.1.0-beta2",
+    "@vaadin/component-base": "24.1.0-beta2",
+    "@vaadin/vaadin-lumo-styles": "24.1.0-beta2",
+    "@vaadin/vaadin-material-styles": "24.1.0-beta2",
+    "@vaadin/vaadin-themable-mixin": "24.1.0-beta2"
   },
@@ -52,3 +52,3 @@ "devDependencies": {
   },
-  "gitHead": "f0ddb6576073a6af05ab29867bc5ec82e334f9d7"
+  "gitHead": "83536fcc7d6661a593b2713cb99a8cb74f2fd868"
 }

src/vaadin-overlay.d.ts

@@ -9,2 +9,3 @@ /**
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { OverlayFocusMixin } from './vaadin-overlay-focus-mixin.js';
 
@@ -123,3 +124,3 @@ export type OverlayRenderer = (root: HTMLElement, owner: HTMLElement, model?: object) => void;
  */
-declare class Overlay extends ThemableMixin(DirMixin(ControllerMixin(HTMLElement))) {
+declare class Overlay extends OverlayFocusMixin(ThemableMixin(DirMixin(HTMLElement))) {
   /**
@@ -168,19 +169,2 @@ * When true, the overlay is visible and attached to body.
   /**
-   * When true move focus to the first focusable element in the overlay,
-   * or to the overlay if there are no focusable elements.
-   */
-  focusTrap: boolean;
-
-  /**
-   * Set to true to enable restoring of focus when overlay is closed.
-   */
-  restoreFocusOnClose: boolean;
-
-  /**
-   * Set to specify the element which should be focused on overlay close,
-   * if `restoreFocusOnClose` is set to true.
-   */
-  restoreFocusNode?: HTMLElement;
-
-  /**
    * Returns true if this is the last one in the opened overlays stack.
@@ -187,0 +171,0 @@ */

src/vaadin-overlay.js

@@ -8,9 +8,7 @@ /**
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
-import { FocusTrapController } from '@vaadin/a11y-base/src/focus-trap-controller.js';
-import { getDeepActiveElement } from '@vaadin/a11y-base/src/focus-utils.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 { processTemplates } from '@vaadin/component-base/src/templates.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { OverlayFocusMixin } from './vaadin-overlay-focus-mixin.js';
 
@@ -79,5 +77,5 @@ /**
  * @mixes DirMixin
- * @mixes ControllerMixin
+ * @mixes OverlayFocusMixin
  */
-class Overlay extends ThemableMixin(DirMixin(ControllerMixin(PolymerElement))) {
+class Overlay extends OverlayFocusMixin(ThemableMixin(DirMixin(PolymerElement))) {
   static get template() {
@@ -230,30 +228,2 @@ return html`
 
-      /**
-       * When true move focus to the first focusable element in the overlay,
-       * or to the overlay if there are no focusable elements.
-       * @type {boolean}
-       */
-      focusTrap: {
-        type: Boolean,
-        value: false,
-      },
-
-      /**
-       * Set to true to enable restoring of focus when overlay is closed.
-       * @type {boolean}
-       */
-      restoreFocusOnClose: {
-        type: Boolean,
-        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 */
@@ -308,4 +278,2 @@ _mouseDownInside: {
     }
-
-    this.__focusTrapController = new FocusTrapController(this);
   }
@@ -333,4 +301,2 @@
 
-    this.addController(this.__focusTrapController);
-
     processTemplates(this);
@@ -491,5 +457,3 @@ }
     if (opened) {
-      if (this.restoreFocusOnClose) {
-        this.__storeFocus();
-      }
+      this._storeFocus();
 
@@ -499,5 +463,3 @@ this._animatedOpening();
       afterNextRender(this, () => {
-        if (this.focusTrap) {
-          this.__focusTrapController.trapFocus(this.$.overlay);
-        }
+        this._trapFocus();
 
@@ -514,10 +476,4 @@ const evt = new CustomEvent('vaadin-overlay-open', { bubbles: true });
     } else if (wasOpened) {
-      if (this.focusTrap) {
-        this.__focusTrapController.releaseFocus();
-      }
+      this._resetFocus();
 
-      if (this.restoreFocusOnClose) {
-        this.__restoreFocus();
-      }
-
       this._animatedClosing();
@@ -534,48 +490,2 @@
   /** @private */
-  __storeFocus() {
-    // Store the focused node.
-    this.__restoreFocusNode = getDeepActiveElement();
-
-    // Determine and store the node that has the `focus-ring` attribute
-    // in order to restore the attribute when the overlay closes.
-    const restoreFocusNode = this.restoreFocusNode || this.__restoreFocusNode;
-    if (restoreFocusNode) {
-      const restoreFocusNodeHost = (restoreFocusNode.assignedSlot || restoreFocusNode).getRootNode().host;
-      this.__restoreFocusRingNode = [restoreFocusNode, restoreFocusNodeHost].find((node) => {
-        return node && node.hasAttribute('focus-ring');
-      });
-    }
-  }
-
-  /** @private */
-  __restoreFocus() {
-    // 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
-    // component or by the user interaction (e.g. click on a
-    // button outside the overlay).
-    const activeElement = getDeepActiveElement();
-    if (activeElement !== document.body && !this._deepContains(activeElement)) {
-      return;
-    }
-
-    // Use restoreFocusNode if specified, otherwise fallback to the node
-    // which was focused before opening the overlay.
-    const restoreFocusNode = this.restoreFocusNode || this.__restoreFocusNode;
-    if (restoreFocusNode) {
-      // 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;
-    }
-
-    // Restore the `focus-ring` attribute if it was present
-    // when the overlay was opening.
-    if (this.__restoreFocusRingNode) {
-      this.__restoreFocusRingNode.setAttribute('focus-ring', '');
-      this.__restoreFocusRingNode = null;
-    }
-  }
-
-  /** @private */
   _hiddenChanged(hidden) {
@@ -582,0 +492,0 @@ if (hidden && this.hasAttribute('closing')) {

No alert changes

Improved metrics

Total package byte prevSize

64615

increased by4.17%

Number of package files

15

increased by15.38%

Lines of code

1406

increased by6.03%

Dependency changes

• + Added@vaadin/a11y-base@24.1.0-beta2(transitive)

• + Added@vaadin/component-base@24.1.0-beta2(transitive)

• + Added@vaadin/icon@24.1.0-beta2(transitive)

• + Added@vaadin/vaadin-lumo-styles@24.1.0-beta2(transitive)

• + Added@vaadin/vaadin-material-styles@24.1.0-beta2(transitive)

• + Added@vaadin/vaadin-themable-mixin@24.1.0-beta2(transitive)

• - Removed@vaadin/a11y-base@24.1.0-beta1(transitive)

• - Removed@vaadin/component-base@24.1.0-beta1(transitive)

• - Removed@vaadin/icon@24.1.0-beta1(transitive)

• - Removed@vaadin/vaadin-lumo-styles@24.1.0-beta1(transitive)

• - Removed@vaadin/vaadin-material-styles@24.1.0-beta1(transitive)

• - Removed@vaadin/vaadin-themable-mixin@24.1.0-beta1(transitive)

• Updated@vaadin/a11y-base@24.1.0-beta2

• Updated@vaadin/component-base@24.1.0-beta2

• Updated@vaadin/vaadin-lumo-styles@24.1.0-beta2

• Updated@vaadin/vaadin-material-styles@24.1.0-beta2

• Updated@vaadin/vaadin-themable-mixin@24.1.0-beta2