@vaadin/overlay - npm Package Compare versions

Comparing version 24.0.0-alpha12 to 24.0.0-alpha13

package.json

 {
   "name": "@vaadin/overlay",
-  "version": "24.0.0-alpha12",
+  "version": "24.0.0-alpha13",
   "publishConfig": {
@@ -39,14 +39,14 @@ "access": "public"
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "24.0.0-alpha12",
-    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha12",
-    "@vaadin/vaadin-material-styles": "24.0.0-alpha12",
-    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha12"
+    "@vaadin/component-base": "24.0.0-alpha13",
+    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha13",
+    "@vaadin/vaadin-material-styles": "24.0.0-alpha13",
+    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha13"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.3.2",
+    "@vaadin/testing-helpers": "^0.4.0",
     "lit": "^2.0.0",
     "sinon": "^13.0.2"
   },
-  "gitHead": "7e29eee4d522fb7b03ac8e7e385e9057d71c79ce"
+  "gitHead": "a423ad309c12b4e4f847737ee9f491f83ea60ff0"
 }

src/vaadin-overlay.d.ts

@@ -23,4 +23,4 @@ /**
 /**
- * Fired before the overlay will be closed.
- * If canceled the closing of the overlay is canceled as well.
+ * Fired when the opened overlay is about to be closed.
+ * Calling `preventDefault()` on the event cancels the closing.
  */
@@ -30,9 +30,15 @@ export type OverlayCloseEvent = CustomEvent;
 /**
- * Fired when the overlay will be closed.
+ * Fired after the overlay is closed.
  */
+export type OverlayClosedEvent = CustomEvent;
+
+/**
+ * Fired when the overlay starts to close.
+ * Closing the overlay can be asynchronous depending on the animation.
+ */
 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.
+ * Fired before the overlay is closed on outside click.
+ * Calling `preventDefault()` on the event cancels the closing.
  */
@@ -42,4 +48,4 @@ 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.
+ * Fired before the overlay is closed on Escape key press.
+ * Calling `preventDefault()` on the event cancels the closing.
  */
@@ -52,2 +58,3 @@ export type OverlayEscapePressEvent = CustomEvent<{ sourceEvent: KeyboardEvent }>;
   'vaadin-overlay-close': OverlayCloseEvent;
+  'vaadin-overlay-closed': OverlayClosedEvent;
   'vaadin-overlay-closing': OverlayClosingEvent;
@@ -113,6 +120,7 @@ 'vaadin-overlay-outside-click': OverlayOutsideClickEvent;
  * @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.
+ * @fires {CustomEvent} vaadin-overlay-close - Fired when the opened overlay is about to be closed. Calling `preventDefault()` on the event cancels the closing.
+ * @fires {CustomEvent} vaadin-overlay-closing - Fired when the overlay starts to close. Closing the overlay can be asynchronous depending on the animation.
+ * @fires {CustomEvent} vaadin-overlay-closed - Fired after the overlay is closed.
+ * @fires {CustomEvent} vaadin-overlay-outside-click - Fired before the overlay is closed on outside click. Calling `preventDefault()` on the event cancels the closing.
+ * @fires {CustomEvent} vaadin-overlay-escape-press - Fired before the overlay is closed on Escape key press. Calling `preventDefault()` on the event cancels the closing.
  */
@@ -179,2 +187,7 @@ declare class Overlay extends ThemableMixin(DirMixin(ControllerMixin(HTMLElement))) {
 
+  /**
+   * Returns true if this is the last one in the opened overlays stack.
+   */
+  protected readonly _last: boolean;
+
   close(sourceEvent?: Event | null): void;
@@ -206,2 +219,10 @@
   ): void;
+
+  protected _flushAnimation(type: 'closing' | 'opening'): void;
+
+  /**
+   * Whether to close the overlay on outside click or not.
+   * Override this method to customize the closing logic.
+   */
+  protected _shouldCloseOnOutsideClick(event: Event): boolean;
 }
@@ -208,0 +229,0 @@

src/vaadin-overlay.js

@@ -68,6 +68,7 @@ /**
  * @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.
+ * @fires {CustomEvent} vaadin-overlay-close - Fired when the opened overlay is about to be closed. Calling `preventDefault()` on the event cancels the closing.
+ * @fires {CustomEvent} vaadin-overlay-closing - Fired when the overlay starts to close. Closing the overlay can be asynchronous depending on the animation.
+ * @fires {CustomEvent} vaadin-overlay-closed - Fired after the overlay is closed.
+ * @fires {CustomEvent} vaadin-overlay-outside-click - Fired before the overlay is closed on outside click. Calling `preventDefault()` on the event cancels the closing.
+ * @fires {CustomEvent} vaadin-overlay-escape-press - Fired before the overlay is closed on Escape key press. Calling `preventDefault()` on the event cancels the closing.
  *
@@ -356,4 +357,2 @@ * @extends HTMLElement
    * @param {Event=} sourceEvent
-   * @event vaadin-overlay-close
-   * fired before the `vaadin-overlay` will be closed. If canceled the closing of the overlay is canceled as well.
    */
@@ -416,8 +415,17 @@ close(sourceEvent) {
   /**
-   * We need to listen on 'click' / 'tap' event and capture it and close the overlay before
-   * propagating the event to the listener in the button. Otherwise, if the clicked button would call
-   * open(), this would happen: https://www.youtube.com/watch?v=Z86V_ICUCD4
+   * Whether to close the overlay on outside click or not.
+   * Override this method to customize the closing logic.
    *
-   * @event vaadin-overlay-outside-click
-   * fired before the `vaadin-overlay` will be closed on outside click. If canceled the closing of the overlay is canceled as well.
+   * @param {Event} _event
+   * @return {boolean}
+   * @protected
+   */
+  _shouldCloseOnOutsideClick(_event) {
+    return this._last;
+  }
+
+  /**
+   * Outside click listener used in capture phase to close the overlay before
+   * propagating the event to the listener on the element that triggered it.
+   * Otherwise, calling `open()` would result in closing and re-opening.
    *
@@ -432,3 +440,4 @@ * @private
     }
-    if (!this._last) {
+
+    if (!this._shouldCloseOnOutsideClick(event)) {
       return;
@@ -450,5 +459,3 @@ }
   /**
-   * @event vaadin-overlay-escape-press
-   * fired before the `vaadin-overlay` will be closed on ESC button press. If canceled the closing of the overlay is canceled as well.
-   *
+   * Listener used to close whe overlay on Escape press, if it is the last one.
    * @private
@@ -480,8 +487,3 @@ */
 
-  /**
-   * @event vaadin-overlay-open
-   * fired after the `vaadin-overlay` is opened.
-   *
-   * @private
-   */
+  /** @private */
   _openedChanged(opened, wasOpened) {
@@ -531,7 +533,8 @@ if (opened) {
    * @return {boolean}
-   * @protected
+   * @private
    */
   _shouldAnimate() {
-    const name = getComputedStyle(this).getPropertyValue('animation-name');
-    const hidden = getComputedStyle(this).getPropertyValue('display') === 'none';
+    const style = getComputedStyle(this);
+    const name = style.getPropertyValue('animation-name');
+    const hidden = style.getPropertyValue('display') === 'none';
     return !hidden && name && name !== 'none';
@@ -543,3 +546,3 @@ }
    * @param {Function} callback
-   * @protected
+   * @private
    */
@@ -571,3 +574,3 @@ _enqueueAnimation(type, callback) {
 
-  /** @protected */
+  /** @private */
   _animatedOpening() {
@@ -592,3 +595,3 @@ if (this.parentNode === document.body && this.hasAttribute('closing')) {
 
-  /** @protected */
+  /** @private */
   _attachOverlay() {
@@ -601,3 +604,3 @@ this._placeholder = document.createComment('vaadin-overlay-placeholder');
 
-  /** @protected */
+  /** @private */
   _finishOpening() {
@@ -607,3 +610,3 @@ this.removeAttribute('opening');
 
-  /** @protected */
+  /** @private */
   _finishClosing() {
@@ -613,10 +616,6 @@ this._detachOverlay();
     this.removeAttribute('closing');
+    this.dispatchEvent(new CustomEvent('vaadin-overlay-closed'));
   }
 
-  /**
-   * @event vaadin-overlay-closing
-   * Fired when the overlay will be closed.
-   *
-   * @protected
-   */
+  /** @private */
   _animatedClosing() {
@@ -662,3 +661,3 @@ if (this.hasAttribute('opening')) {
 
-  /** @protected */
+  /** @private */
   _detachOverlay() {
@@ -682,3 +681,3 @@ this._placeholder.parentNode.insertBefore(this, this._placeholder);
 
-  /** @protected */
+  /** @private */
   _addGlobalListeners() {
@@ -692,3 +691,3 @@ document.addEventListener('mousedown', this._boundMouseDownListener);
 
-  /** @protected */
+  /** @private */
   _enterModalState() {
@@ -710,3 +709,3 @@ if (document.body.style.pointerEvents !== 'none') {
 
-  /** @protected */
+  /** @private */
   _removeGlobalListeners() {
@@ -718,3 +717,3 @@ document.removeEventListener('mousedown', this._boundMouseDownListener);
 
-  /** @protected */
+  /** @private */
   _exitModalState() {
@@ -771,3 +770,3 @@ if (this._previousDocumentPointerEvents !== undefined) {
    * @return {!Element}
-   * @protected
+   * @private
    */
@@ -787,3 +786,3 @@ _getActiveElement() {
    * @return {boolean}
-   * @protected
+   * @private
    */
@@ -816,2 +815,36 @@ _deepContains(node) {
   }
+
+  /**
+   * @event vaadin-overlay-open
+   * Fired after the overlay is opened.
+   */
+
+  /**
+   * @event vaadin-overlay-close
+   * Fired when the opened overlay is about to be closed.
+   * Calling `preventDefault()` on the event cancels the closing.
+   */
+
+  /**
+   * @event vaadin-overlay-closing
+   * Fired when the overlay starts to close.
+   * Closing the overlay can be asynchronous depending on the animation.
+   */
+
+  /**
+   * @event vaadin-overlay-closed
+   * Fired after the overlay is closed.
+   */
+
+  /**
+   * @event vaadin-overlay-escape-press
+   * Fired before the overlay is closed on Escape key press.
+   * Calling `preventDefault()` on the event cancels the closing.
+   */
+
+  /**
+   * @event vaadin-overlay-outside-click
+   * Fired before the overlay is closed on outside click.
+   * Calling `preventDefault()` on the event cancels the closing.
+   */
 }
@@ -818,0 +851,0 @@

New alerts

License Policy Violation

License

This 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

License

This 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

60420

increased by2.48%

Lines of code

1288

increased by3.37%

Dependency changes

• + Added@vaadin/component-base@24.0.0-alpha13(transitive)

• + Added@vaadin/icon@24.0.0-alpha13(transitive)

• + Added@vaadin/vaadin-lumo-styles@24.0.0-alpha13(transitive)

• + Added@vaadin/vaadin-material-styles@24.0.0-alpha13(transitive)

• + Added@vaadin/vaadin-themable-mixin@24.0.0-alpha13(transitive)

• - Removed@vaadin/component-base@24.0.0-alpha12(transitive)

• - Removed@vaadin/icon@24.0.0-alpha12(transitive)

• - Removed@vaadin/vaadin-lumo-styles@24.0.0-alpha12(transitive)

• - Removed@vaadin/vaadin-material-styles@24.0.0-alpha12(transitive)

• - Removed@vaadin/vaadin-themable-mixin@24.0.0-alpha12(transitive)

• Updated@vaadin/component-base@24.0.0-alpha13

• Updated@vaadin/vaadin-lumo-styles@24.0.0-alpha13

• Updated@vaadin/vaadin-material-styles@24.0.0-alpha13

• Updated@vaadin/vaadin-themable-mixin@24.0.0-alpha13