@momentum-design/components 0.83.1 → 0.83.2

package/dist/components/popover/popover.component.d.ts

@@ -123,6 +123,17 @@ declare class Popover extends Popover_base {
      * @default false
      */
     hideOnEscape: boolean;
+    /**
+     * Propagates the event, when the escape key is pressed (only when pressed inside the popover)
+     * If true, the escape key press close the popover and will propagate the keydown event.
+     * If false, the escape key press will close the popover but will not propagate the keydown event.
+     * (set to false to prevent the event from bubbling up to the document).
+     *
+     * This only works when `hideOnEscape` is true.
+     *
+     * @default false
+     */
+    propagateEventOnEscape: boolean;
     /**
      * Hide popover on blur.
      * @default false
@@ -231,6 +242,8 @@ declare class Popover extends Popover_base {
     /**
      * Handles the escape keydown event to close the popover.
      *
+     * This method is attached to the document.
+     *
      * @param event - The keyboard event.
      */
     private onEscapeKeydown;

package/dist/components/popover/popover.component.js

@@ -141,6 +141,17 @@ class Popover extends FocusTrapMixin(Component) {
          * @default false
          */
         this.hideOnEscape = DEFAULTS.HIDE_ON_ESCAPE;
+        /**
+         * Propagates the event, when the escape key is pressed (only when pressed inside the popover)
+         * If true, the escape key press close the popover and will propagate the keydown event.
+         * If false, the escape key press will close the popover but will not propagate the keydown event.
+         * (set to false to prevent the event from bubbling up to the document).
+         *
+         * This only works when `hideOnEscape` is true.
+         *
+         * @default false
+         */
+        this.propagateEventOnEscape = DEFAULTS.PROPAGATE_EVENT_ON_ESCAPE;
         /**
          * Hide popover on blur.
          * @default false
@@ -240,12 +251,18 @@ class Popover extends FocusTrapMixin(Component) {
         /**
          * Handles the escape keydown event to close the popover.
          *
+         * This method is attached to the document.
+         *
          * @param event - The keyboard event.
          */
         this.onEscapeKeydown = (event) => {
             if (!this.visible || event.code !== 'Escape') {
                 return;
             }
+            if (!this.propagateEventOnEscape) {
+                // If propagateEventOnEscape is false, we don't want to allow the event to bubble up
+                event.stopPropagation();
+            }
             event.preventDefault();
             this.hidePopover();
         };
@@ -446,7 +463,7 @@ class Popover extends FocusTrapMixin(Component) {
      * @param newValue - The new value of the visible property.
      */
     async isOpenUpdated(oldValue, newValue) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e;
         if (oldValue === newValue || !this.triggerElement) {
             return;
         }
@@ -471,7 +488,8 @@ class Popover extends FocusTrapMixin(Component) {
                 document.addEventListener('click', this.onOutsidePopoverClick);
             }
             if (this.hideOnEscape) {
-                document.addEventListener('keydown', this.onEscapeKeydown);
+                this.addEventListener('keydown', this.onEscapeKeydown);
+                (_a = this.triggerElement) === null || _a === void 0 ? void 0 : _a.addEventListener('keydown', this.onEscapeKeydown);
             }
             PopoverEventManager.onShowPopover(this);
         }
@@ -480,7 +498,7 @@ class Popover extends FocusTrapMixin(Component) {
                 popoverStack.pop();
             }
             if (this.backdropElement) {
-                (_a = this.backdropElement) === null || _a === void 0 ? void 0 : _a.remove();
+                (_b = this.backdropElement) === null || _b === void 0 ? void 0 : _b.remove();
                 this.backdropElement = null;
             }
             if (this.hideOnBlur) {
@@ -493,9 +511,10 @@ class Popover extends FocusTrapMixin(Component) {
                 document.removeEventListener('click', this.onOutsidePopoverClick);
             }
             if (this.hideOnEscape) {
-                document.removeEventListener('keydown', this.onEscapeKeydown);
+                this.removeEventListener('keydown', this.onEscapeKeydown);
+                (_c = this.triggerElement) === null || _c === void 0 ? void 0 : _c.removeEventListener('keydown', this.onEscapeKeydown);
             }
-            (_b = this.deactivateFocusTrap) === null || _b === void 0 ? void 0 : _b.call(this);
+            (_d = this.deactivateFocusTrap) === null || _d === void 0 ? void 0 : _d.call(this);
             if (!this.disableAriaExpanded) {
                 this.triggerElement.removeAttribute('aria-expanded');
             }
@@ -504,7 +523,7 @@ class Popover extends FocusTrapMixin(Component) {
                 this.triggerElement.removeAttribute('aria-haspopup');
             }
             if (this.focusBackToTrigger) {
-                (_c = this.triggerElement) === null || _c === void 0 ? void 0 : _c.focus();
+                (_e = this.triggerElement) === null || _e === void 0 ? void 0 : _e.focus();
             }
             PopoverEventManager.onHidePopover(this);
         }
@@ -651,6 +670,10 @@ __decorate([
     property({ type: Boolean, reflect: true, attribute: 'hide-on-escape' }),
     __metadata("design:type", Boolean)
 ], Popover.prototype, "hideOnEscape", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'propagate-event-on-escape' }),
+    __metadata("design:type", Boolean)
+], Popover.prototype, "propagateEventOnEscape", void 0);
 __decorate([
     property({ type: Boolean, reflect: true, attribute: 'hide-on-blur' }),
     __metadata("design:type", Boolean)

package/dist/components/popover/popover.constants.d.ts

@@ -46,5 +46,6 @@ declare const DEFAULTS: {
     readonly Z_INDEX: 1000;
     readonly DISABLE_ARIA_EXPANDED: false;
     readonly DISABLE_ARIA_HAS_POPUP: false;
+    readonly PROPAGATE_EVENT_ON_ESCAPE: false;
 };
 export { TAG_NAME, POPOVER_PLACEMENT, COLOR, TRIGGER, DEFAULTS };

package/dist/components/popover/popover.constants.js

@@ -47,5 +47,6 @@ const DEFAULTS = {
     Z_INDEX: 1000,
     DISABLE_ARIA_EXPANDED: false,
     DISABLE_ARIA_HAS_POPUP: false,
+    PROPAGATE_EVENT_ON_ESCAPE: false,
 };
 export { TAG_NAME, POPOVER_PLACEMENT, COLOR, TRIGGER, DEFAULTS };