@vaadin/overlay
Advanced tools
@vaadin/overlay - npm Package Compare versions
Comparing version 24.1.0-alpha9 to 24.1.0-beta1
| { | ||
| "name": "@vaadin/overlay", | ||
| "version": "24.1.0-alpha9", | ||
| "version": "24.1.0-beta1", | ||
| "publishConfig": { | ||
@@ -39,7 +39,7 @@ "access": "public" | ||
| "@polymer/polymer": "^3.0.0", | ||
| "@vaadin/a11y-base": "24.1.0-alpha9", | ||
| "@vaadin/component-base": "24.1.0-alpha9", | ||
| "@vaadin/vaadin-lumo-styles": "24.1.0-alpha9", | ||
| "@vaadin/vaadin-material-styles": "24.1.0-alpha9", | ||
| "@vaadin/vaadin-themable-mixin": "24.1.0-alpha9" | ||
| "@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" | ||
| }, | ||
@@ -52,3 +52,3 @@ "devDependencies": { | ||
| }, | ||
| "gitHead": "db4fe44603a6702b85b0da2a6d033ddf8ffea5c4" | ||
| "gitHead": "f0ddb6576073a6af05ab29867bc5ec82e334f9d7" | ||
| } |
@@ -9,2 +9,3 @@ /** | ||
| 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'; | ||
@@ -486,4 +487,6 @@ import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js'; | ||
| if (opened) { | ||
| // Store focused node. | ||
| this.__restoreFocusNode = this._getActiveElement(); | ||
| if (this.restoreFocusOnClose) { | ||
| this.__storeFocus(); | ||
| } | ||
| this._animatedOpening(); | ||
@@ -510,2 +513,6 @@ | ||
| if (this.restoreFocusOnClose) { | ||
| this.__restoreFocus(); | ||
| } | ||
| this._animatedClosing(); | ||
@@ -522,2 +529,48 @@ | ||
| /** @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) { | ||
@@ -618,23 +671,2 @@ if (hidden && this.hasAttribute('closing')) { | ||
| this._exitModalState(); | ||
| // 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 | ||
| // component or by the user interaction (e.g. click on a | ||
| // button outside the overlay). | ||
| const activeElement = this._getActiveElement(); | ||
| if (activeElement === document.body || this._deepContains(activeElement)) { | ||
| // 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', ''); | ||
@@ -756,16 +788,2 @@ this.dispatchEvent(new CustomEvent('vaadin-overlay-closing')); | ||
| /** | ||
| * @return {!Element} | ||
| * @private | ||
| */ | ||
| _getActiveElement() { | ||
| // Document.activeElement can be null | ||
| // https://developer.mozilla.org/en-US/docs/Web/API/Document/activeElement | ||
| let active = document.activeElement || document.body; | ||
| while (active.shadowRoot && active.shadowRoot.activeElement) { | ||
| active = active.shadowRoot.activeElement; | ||
| } | ||
| return active; | ||
| } | ||
| /** | ||
| * @param {!Node} node | ||
@@ -772,0 +790,0 @@ * @return {boolean} |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.98%
62030
- Lines of code
- increased by1.22%
1326
Worsened metrics
- Published versions last two months
- decreased by-3.45%
28
Dependency changes
+ Added@vaadin/a11y-base@24.1.0-beta1(transitive)
+ Added@vaadin/component-base@24.1.0-beta1(transitive)
+ Added@vaadin/icon@24.1.0-beta1(transitive)
+ Added@vaadin/vaadin-lumo-styles@24.1.0-beta1(transitive)
+ Added@vaadin/vaadin-material-styles@24.1.0-beta1(transitive)
+ Added@vaadin/vaadin-themable-mixin@24.1.0-beta1(transitive)
- Removed@vaadin/a11y-base@24.1.0-alpha9(transitive)
- Removed@vaadin/component-base@24.1.0-alpha9(transitive)
- Removed@vaadin/icon@24.1.0-alpha9(transitive)
- Removed@vaadin/vaadin-lumo-styles@24.1.0-alpha9(transitive)
- Removed@vaadin/vaadin-material-styles@24.1.0-alpha9(transitive)
- Removed@vaadin/vaadin-themable-mixin@24.1.0-alpha9(transitive)