@vaadin/overlay - npm Package Compare versions

Comparing version 24.0.0-alpha9 to 24.0.0-beta1

package.json

 {
   "name": "@vaadin/overlay",
-  "version": "24.0.0-alpha9",
+  "version": "24.0.0-beta1",
   "publishConfig": {
@@ -39,14 +39,14 @@ "access": "public"
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "24.0.0-alpha9",
-    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha9",
-    "@vaadin/vaadin-material-styles": "24.0.0-alpha9",
-    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha9"
+    "@vaadin/component-base": "24.0.0-beta1",
+    "@vaadin/vaadin-lumo-styles": "24.0.0-beta1",
+    "@vaadin/vaadin-material-styles": "24.0.0-beta1",
+    "@vaadin/vaadin-themable-mixin": "24.0.0-beta1"
   },
   "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": "cc3f747164041566b300bde4b105d2475649e93f"
+  "gitHead": "c5b48921a62482746df8e46994b37e1490fec27e"
 }

src/vaadin-overlay-position-mixin.d.ts

@@ -57,2 +57,12 @@ /**
   noVerticalOverlap: boolean;
+
+  /**
+   * If the overlay content has no intrinsic height, this property can be used to set
+   * the minimum vertical space (in pixels) required by the overlay. Setting a value to
+   * the property effectively disables the content measurement in favor of using this
+   * fixed value for determining the open direction.
+   *
+   * @attr {number} required-vertical-space
+   */
+  requiredVerticalSpace: number;
 }

src/vaadin-overlay-position-mixin.js

@@ -96,2 +96,15 @@ /**
         },
+
+        /**
+         * If the overlay content has no intrinsic height, this property can be used to set
+         * the minimum vertical space (in pixels) required by the overlay. Setting a value to
+         * the property effectively disables the content measurement in favor of using this
+         * fixed value for determining the open direction.
+         *
+         * @attr {number} required-vertical-space
+         */
+        requiredVerticalSpace: {
+          type: Number,
+          value: 0,
+        },
       };
@@ -102,3 +115,3 @@ }
       return [
-        '__positionSettingsChanged(horizontalAlign, verticalAlign, noHorizontalOverlap, noVerticalOverlap)',
+        '__positionSettingsChanged(horizontalAlign, verticalAlign, noHorizontalOverlap, noVerticalOverlap, requiredVerticalSpace)',
         '__overlayOpenedChanged(opened, positionTarget)',
@@ -267,3 +280,4 @@ ];
       // smaller than its current space before the fit-calculations.
-      const contentHeight = Math.max(this.__oldContentHeight || 0, this.$.overlay.offsetHeight);
+      const contentHeight =
+        this.requiredVerticalSpace || Math.max(this.__oldContentHeight || 0, this.$.overlay.offsetHeight);
       this.__oldContentHeight = this.$.overlay.offsetHeight;
@@ -270,0 +284,0 @@

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.
  */
@@ -152,3 +160,3 @@ declare class Overlay extends ThemableMixin(DirMixin(ControllerMixin(HTMLElement))) {
    * When true the overlay won't disable the main content, showing
-   * it doesn’t change the functionality of the user interface.
+   * it doesn't change the functionality of the user interface.
    */
@@ -180,2 +188,7 @@ modeless: boolean;
 
+  /**
+   * Returns true if this is the last one in the opened overlays stack.
+   */
+  protected readonly _last: boolean;
+
   close(sourceEvent?: Event | null): void;
@@ -207,2 +220,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;
 }
@@ -209,0 +230,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.
  *
@@ -206,3 +207,3 @@ * @extends HTMLElement
        * When true the overlay won't disable the main content, showing
-       * it doesn’t change the functionality of the user interface.
+       * it doesn't change the functionality of the user interface.
        * @type {boolean}
@@ -284,2 +285,12 @@ */
 
+  /**
+   * Returns all attached overlays in visual stacking order.
+   * @private
+   */
+  static get __attachedInstances() {
+    return Array.from(document.body.children)
+      .filter((el) => el instanceof Overlay && !el.hasAttribute('closing'))
+      .sort((a, b) => a.__zIndex - b.__zIndex || 0);
+  }
+
   constructor() {
@@ -300,2 +311,11 @@ super();
 
+  /**
+   * Returns true if this is the last one in the opened overlays stack
+   * @return {boolean}
+   * @protected
+   */
+  get _last() {
+    return this === Overlay.__attachedInstances.pop();
+  }
+
   /** @protected */
@@ -340,4 +360,2 @@ ready() {
    * @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.
    */
@@ -400,8 +418,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.
    *
@@ -416,3 +443,4 @@ * @private
     }
-    if (!this._last) {
+
+    if (!this._shouldCloseOnOutsideClick(event)) {
       return;
@@ -434,5 +462,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
@@ -464,8 +490,3 @@ */
 
-  /**
-   * @event vaadin-overlay-open
-   * fired after the `vaadin-overlay` is opened.
-   *
-   * @private
-   */
+  /** @private */
   _openedChanged(opened, wasOpened) {
@@ -515,7 +536,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';
@@ -527,3 +549,3 @@ }
    * @param {Function} callback
-   * @protected
+   * @private
    */
@@ -555,3 +577,3 @@ _enqueueAnimation(type, callback) {
 
-  /** @protected */
+  /** @private */
   _animatedOpening() {
@@ -576,3 +598,3 @@ if (this.parentNode === document.body && this.hasAttribute('closing')) {
 
-  /** @protected */
+  /** @private */
   _attachOverlay() {
@@ -585,3 +607,3 @@ this._placeholder = document.createComment('vaadin-overlay-placeholder');
 
-  /** @protected */
+  /** @private */
   _finishOpening() {
@@ -591,3 +613,3 @@ this.removeAttribute('opening');
 
-  /** @protected */
+  /** @private */
   _finishClosing() {
@@ -597,10 +619,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() {
@@ -646,3 +664,3 @@ if (this.hasAttribute('opening')) {
 
-  /** @protected */
+  /** @private */
   _detachOverlay() {
@@ -653,21 +671,2 @@ this._placeholder.parentNode.insertBefore(this, this._placeholder);
 
-  /**
-   * Returns all attached overlays in visual stacking order.
-   * @private
-   */
-  static get __attachedInstances() {
-    return Array.from(document.body.children)
-      .filter((el) => el instanceof Overlay && !el.hasAttribute('closing'))
-      .sort((a, b) => a.__zIndex - b.__zIndex || 0);
-  }
-
-  /**
-   * Returns true if this is the last one in the opened overlays stack
-   * @return {boolean}
-   * @protected
-   */
-  get _last() {
-    return this === Overlay.__attachedInstances.pop();
-  }
-
   /** @private */
@@ -686,3 +685,3 @@ _modelessChanged(modeless) {
 
-  /** @protected */
+  /** @private */
   _addGlobalListeners() {
@@ -696,3 +695,3 @@ document.addEventListener('mousedown', this._boundMouseDownListener);
 
-  /** @protected */
+  /** @private */
   _enterModalState() {
@@ -714,3 +713,3 @@ if (document.body.style.pointerEvents !== 'none') {
 
-  /** @protected */
+  /** @private */
   _removeGlobalListeners() {
@@ -722,3 +721,3 @@ document.removeEventListener('mousedown', this._boundMouseDownListener);
 
-  /** @protected */
+  /** @private */
   _exitModalState() {
@@ -775,3 +774,3 @@ if (this._previousDocumentPointerEvents !== undefined) {
    * @return {!Element}
-   * @protected
+   * @private
    */
@@ -791,3 +790,3 @@ _getActiveElement() {
    * @return {boolean}
-   * @protected
+   * @private
    */
@@ -820,2 +819,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.
+   */
 }
@@ -822,0 +855,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

61386

increased by4.13%

Lines of code

1310

increased by5.14%

Dependency changes

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

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

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

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

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

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

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

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

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

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

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

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

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

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