@momentum-design/components 0.83.2 → 0.83.3

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

@@ -1,7 +1,7 @@
 import { CSSResult, PropertyValues } from 'lit';
 import { Component } from '../../models';
 import type { DialogRole, DialogSize, DialogVariant } from './dialog.types';
-declare const Dialog_base: import("../../utils/mixins/index.types").Constructor<HTMLElement & import("../../utils/mixins/FocusTrapMixin").FocusTrapClassInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/CardAndDialogFooterMixin").CardAndDialogFooterMixinInterface> & typeof Component;
+declare const Dialog_base: import("../../utils/mixins/index.types").Constructor<Component & import("../../utils/mixins/PreventScrollMixin").PreventScrollMixinInterface> & import("../../utils/mixins/index.types").Constructor<Component & import("../../utils/mixins/FocusTrapMixin").FocusTrapClassInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/CardAndDialogFooterMixin").CardAndDialogFooterMixinInterface> & typeof Component;
 /**
  * Dialog component is a modal dialog that can be used to display information or prompt the user for input.
  * It can be used to create custom dialogs where content for the body and footer actions is provided by the consumer.
@@ -136,8 +136,13 @@ declare class Dialog extends Dialog_base {
      * For now FocusTrap is always true as the dialog is a modal component only.
      * This means it will always trap focus within the dialog when it is open.
      */
+    focusTrap: boolean;
+    /**
+     * For now preventScroll is always true as the dialog is a modal component only.
+     * This means scroll will be prevented when the dialog is open.
+     */
     /** @internal */
-    protected focusTrap: boolean;
+    protected preventScroll: boolean;
     /** @internal */
     protected triggerElement: HTMLElement | null;
     /** @internal */

package/dist/components/dialog/dialog.component.js

@@ -13,6 +13,7 @@ import { property } from 'lit/decorators.js';
 import styles from './dialog.styles';
 import { Component } from '../../models';
 import { FocusTrapMixin } from '../../utils/mixins/FocusTrapMixin';
+import { PreventScrollMixin } from '../../utils/mixins/PreventScrollMixin';
 import { DEFAULTS } from './dialog.constants';
 import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
 import { DialogEventManager } from './dialog.events';
@@ -66,7 +67,7 @@ import { CardAndDialogFooterMixin } from '../../utils/mixins/CardAndDialogFooter
  * @slot footer -  This slot is for passing custom footer content. Only use this if really needed,
  * using the footer-link and footer-button slots is preferred
  */
-class Dialog extends FocusTrapMixin(CardAndDialogFooterMixin(Component)) {
+class Dialog extends PreventScrollMixin(FocusTrapMixin(CardAndDialogFooterMixin(Component))) {
     constructor() {
         super(...arguments);
         /**
@@ -140,8 +141,13 @@ class Dialog extends FocusTrapMixin(CardAndDialogFooterMixin(Component)) {
          * For now FocusTrap is always true as the dialog is a modal component only.
          * This means it will always trap focus within the dialog when it is open.
          */
-        /** @internal */
         this.focusTrap = true;
+        /**
+         * For now preventScroll is always true as the dialog is a modal component only.
+         * This means scroll will be prevented when the dialog is open.
+         */
+        /** @internal */
+        this.preventScroll = true;
         /** @internal */
         this.triggerElement = null;
         /** @internal */
@@ -158,6 +164,9 @@ class Dialog extends FocusTrapMixin(CardAndDialogFooterMixin(Component)) {
                 return;
             }
             event.preventDefault();
+            // Prevent the event from propagating to the document level
+            // pressing escape on a dialog should only close the dialog, nothing else
+            event.stopPropagation();
             this.hideDialog();
         };
         /**
@@ -177,17 +186,20 @@ class Dialog extends FocusTrapMixin(CardAndDialogFooterMixin(Component)) {
     }
     connectedCallback() {
         super.connectedCallback();
-        document.addEventListener('keydown', this.onEscapeKeydown.bind(this));
+        // event listener can be added to the element directly, since dialog is a modal component
+        // and it will not be allowed to be focused outside of it
+        this.addEventListener('keydown', this.onEscapeKeydown.bind(this));
     }
     disconnectedCallback() {
         var _a, _b, _c;
         super.disconnectedCallback();
-        document.removeEventListener('keydown', this.onEscapeKeydown);
+        this.removeEventListener('keydown', this.onEscapeKeydown);
         (_a = this.backdropElement) === null || _a === void 0 ? void 0 : _a.remove();
         this.backdropElement = null;
-        (_b = this.deactivateFocusTrap) === null || _b === void 0 ? void 0 : _b.call(this);
         // Set aria-expanded attribute on the trigger element to false if it exists
-        (_c = this.triggerElement) === null || _c === void 0 ? void 0 : _c.setAttribute('aria-expanded', 'false');
+        (_b = this.triggerElement) === null || _b === void 0 ? void 0 : _b.setAttribute('aria-expanded', 'false');
+        this.deactivatePreventScroll();
+        (_c = this.deactivateFocusTrap) === null || _c === void 0 ? void 0 : _c.call(this);
         this.focusBackToTrigger();
         DialogEventManager.onDestroyedDialog(this);
     }
@@ -222,6 +234,12 @@ class Dialog extends FocusTrapMixin(CardAndDialogFooterMixin(Component)) {
             || changedProperties.has('descriptionText')) {
             this.setupAriaLabelledDescribedBy();
         }
+        if (changedProperties.has('focusTrap')) {
+            // if focusTrap turned false and the popover is visible, deactivate the focus trap
+            if (!this.focusTrap && this.visible) {
+                this.deactivateFocusTrap();
+            }
+        }
     }
     /**
      * Sets up the aria-haspopup attribute for the dialog.
@@ -304,8 +322,8 @@ class Dialog extends FocusTrapMixin(CardAndDialogFooterMixin(Component)) {
         if (newValue && !oldValue) {
             // Store the currently focused element before opening the dialog
             this.lastActiveElement = document.activeElement;
-            this.enabledPreventScroll = true;
             this.createBackdrop();
+            this.activatePreventScroll();
             await this.updateComplete;
             (_a = this.activateFocusTrap) === null || _a === void 0 ? void 0 : _a.call(this);
             (_b = this.setInitialFocus) === null || _b === void 0 ? void 0 : _b.call(this);
@@ -316,9 +334,10 @@ class Dialog extends FocusTrapMixin(CardAndDialogFooterMixin(Component)) {
         else if (!newValue && oldValue) {
             (_d = this.backdropElement) === null || _d === void 0 ? void 0 : _d.remove();
             this.backdropElement = null;
-            (_e = this.deactivateFocusTrap) === null || _e === void 0 ? void 0 : _e.call(this);
             // Set aria-expanded attribute on the trigger element to false if it exists
-            (_f = this.triggerElement) === null || _f === void 0 ? void 0 : _f.setAttribute('aria-expanded', 'false');
+            (_e = this.triggerElement) === null || _e === void 0 ? void 0 : _e.setAttribute('aria-expanded', 'false');
+            this.deactivatePreventScroll();
+            (_f = this.deactivateFocusTrap) === null || _f === void 0 ? void 0 : _f.call(this);
             this.focusBackToTrigger();
             DialogEventManager.onHideDialog(this);
         }

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

@@ -1,7 +1,7 @@
 import { CSSResult, PropertyValues } from 'lit';
 import { Component } from '../../models';
 import { PopoverColor, PopoverPlacement, PopoverTrigger } from './popover.types';
-declare const Popover_base: import("../../utils/mixins/index.types").Constructor<HTMLElement & import("../../utils/mixins/FocusTrapMixin").FocusTrapClassInterface> & typeof Component;
+declare const Popover_base: import("../../utils/mixins/index.types").Constructor<Component & import("../../utils/mixins/PreventScrollMixin").PreventScrollMixinInterface> & import("../../utils/mixins/index.types").Constructor<Component & import("../../utils/mixins/FocusTrapMixin").FocusTrapClassInterface> & typeof Component;
 /**
  * Popover component is a lightweight floating UI element that displays additional content when triggered.
  * It can be used for tooltips, dropdowns, or contextual menus.
@@ -94,7 +94,7 @@ declare class Popover extends Popover_base {
      */
     focusTrap: boolean;
     /**
-     * Prevent outside scrolling when popover show.
+     * Prevent outside scrolling when popover is shown.
      * @default false
      */
     preventScroll: boolean;
@@ -109,7 +109,10 @@ declare class Popover extends Popover_base {
      */
     closeButton: boolean;
     /**
-     * Determines whether the popover is interactive。
+     * Determines whether the popover is interactive.
+     * Make sure to set focusTrap to true to keep the focus inside the popover in case necessary.
+     * Setting interactive to true will not automatically set focusTrap!
+     *
      * @default false
      */
     interactive: boolean;
@@ -282,10 +285,6 @@ declare class Popover extends Popover_base {
      * Toggles the popover visibility.
      */
     togglePopoverVisible: () => void;
-    /**
-     * Sets the focusable elements inside the popover.
-     */
-    private handleCreatePopoverFirstUpdate;
     /**
      * Positions the popover based on the trigger element.
      * It also handles the flip, size and arrow placement.

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

@@ -13,6 +13,7 @@ import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { Component } from '../../models';
 import { FocusTrapMixin } from '../../utils/mixins/FocusTrapMixin';
+import { PreventScrollMixin } from '../../utils/mixins/PreventScrollMixin';
 import { COLOR, DEFAULTS, POPOVER_PLACEMENT, TRIGGER } from './popover.constants';
 import { PopoverEventManager } from './popover.events';
 import { popoverStack } from './popover.stack';
@@ -48,7 +49,7 @@ import { PopoverUtils } from './popover.utils';
  * @slot - Default slot for the popover content
  *
  */
-class Popover extends FocusTrapMixin(Component) {
+class Popover extends PreventScrollMixin(FocusTrapMixin(Component)) {
     constructor() {
         super();
         /**
@@ -112,7 +113,7 @@ class Popover extends FocusTrapMixin(Component) {
          */
         this.focusTrap = DEFAULTS.FOCUS_TRAP;
         /**
-         * Prevent outside scrolling when popover show.
+         * Prevent outside scrolling when popover is shown.
          * @default false
          */
         this.preventScroll = DEFAULTS.PREVENT_SCROLL;
@@ -127,7 +128,10 @@ class Popover extends FocusTrapMixin(Component) {
          */
         this.closeButton = DEFAULTS.CLOSE_BUTTON;
         /**
-         * Determines whether the popover is interactive。
+         * Determines whether the popover is interactive.
+         * Make sure to set focusTrap to true to keep the focus inside the popover in case necessary.
+         * Setting interactive to true will not automatically set focusTrap!
+         *
          * @default false
          */
         this.interactive = DEFAULTS.INTERACTIVE;
@@ -336,6 +340,7 @@ class Popover extends FocusTrapMixin(Component) {
         this.utils = new PopoverUtils(this);
     }
     async firstUpdated(changedProperties) {
+        var _a, _b;
         super.firstUpdated(changedProperties);
         this.utils.setupAppendTo();
         [this.openDelay, this.closeDelay] = this.utils.setupDelay();
@@ -345,7 +350,14 @@ class Popover extends FocusTrapMixin(Component) {
         PopoverEventManager.onCreatedPopover(this);
         if (this.visible) {
             this.positionPopover();
-            await this.handleCreatePopoverFirstUpdate();
+            this.activatePreventScroll();
+            // If the popover is visible on first update and focustrap is enabled, we need to activate the focus trap
+            if (this.interactive && this.focusTrap) {
+                // Wait for the first update to complete before setting focusable elements
+                await this.updateComplete;
+                (_a = this.activateFocusTrap) === null || _a === void 0 ? void 0 : _a.call(this);
+                (_b = this.setInitialFocus) === null || _b === void 0 ? void 0 : _b.call(this);
+            }
         }
     }
     async disconnectedCallback() {
@@ -353,6 +365,7 @@ class Popover extends FocusTrapMixin(Component) {
         super.disconnectedCallback();
         this.removeEventListeners();
         (_a = this.deactivateFocusTrap) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.deactivatePreventScroll();
         PopoverEventManager.onDestroyedPopover(this);
         popoverStack.remove(this);
     }
@@ -454,6 +467,21 @@ class Popover extends FocusTrapMixin(Component) {
         if (changedProperties.has('interactive') || changedProperties.has('disableAriaHasPopup')) {
             this.utils.updateAriaHasPopupAttribute();
         }
+        if (changedProperties.has('focusTrap')) {
+            // if focusTrap turned false and the popover is visible, deactivate the focus trap
+            if (!this.focusTrap && this.visible) {
+                this.deactivateFocusTrap();
+            }
+        }
+        if (changedProperties.has('preventScroll')) {
+            // if preventScroll turned false and the popover is visible, deactivate the prevent scroll
+            if (!this.preventScroll && this.visible) {
+                this.deactivatePreventScroll();
+            }
+            else if (this.preventScroll && this.visible) {
+                this.activatePreventScroll();
+            }
+        }
     }
     /**
      * Handles the popover visibility change and position the popover.
@@ -463,7 +491,7 @@ class Popover extends FocusTrapMixin(Component) {
      * @param newValue - The new value of the visible property.
      */
     async isOpenUpdated(oldValue, newValue) {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f, _g;
         if (oldValue === newValue || !this.triggerElement) {
             return;
         }
@@ -471,13 +499,11 @@ class Popover extends FocusTrapMixin(Component) {
             if (popoverStack.peek() !== this) {
                 popoverStack.push(this);
             }
-            this.enabledPreventScroll = this.preventScroll;
             if (this.backdrop) {
                 this.utils.createBackdrop();
                 this.triggerElement.style.zIndex = `${this.zIndex}`;
             }
             this.positionPopover();
-            await this.handleCreatePopoverFirstUpdate();
             if (this.hideOnBlur) {
                 this.addEventListener('focusout', this.onPopoverFocusOut);
                 if (this.trigger === 'click') {
@@ -491,6 +517,13 @@ class Popover extends FocusTrapMixin(Component) {
                 this.addEventListener('keydown', this.onEscapeKeydown);
                 (_a = this.triggerElement) === null || _a === void 0 ? void 0 : _a.addEventListener('keydown', this.onEscapeKeydown);
             }
+            this.activatePreventScroll();
+            if (this.interactive && this.focusTrap) {
+                // Wait for the update to complete before setting focusable elements
+                await this.updateComplete;
+                (_b = this.activateFocusTrap) === null || _b === void 0 ? void 0 : _b.call(this);
+                (_c = this.setInitialFocus) === null || _c === void 0 ? void 0 : _c.call(this);
+            }
             PopoverEventManager.onShowPopover(this);
         }
         else {
@@ -498,7 +531,7 @@ class Popover extends FocusTrapMixin(Component) {
                 popoverStack.pop();
             }
             if (this.backdropElement) {
-                (_b = this.backdropElement) === null || _b === void 0 ? void 0 : _b.remove();
+                (_d = this.backdropElement) === null || _d === void 0 ? void 0 : _d.remove();
                 this.backdropElement = null;
             }
             if (this.hideOnBlur) {
@@ -512,9 +545,8 @@ class Popover extends FocusTrapMixin(Component) {
             }
             if (this.hideOnEscape) {
                 this.removeEventListener('keydown', this.onEscapeKeydown);
-                (_c = this.triggerElement) === null || _c === void 0 ? void 0 : _c.removeEventListener('keydown', this.onEscapeKeydown);
+                (_e = this.triggerElement) === null || _e === void 0 ? void 0 : _e.removeEventListener('keydown', this.onEscapeKeydown);
             }
-            (_d = this.deactivateFocusTrap) === null || _d === void 0 ? void 0 : _d.call(this);
             if (!this.disableAriaExpanded) {
                 this.triggerElement.removeAttribute('aria-expanded');
             }
@@ -522,24 +554,14 @@ class Popover extends FocusTrapMixin(Component) {
             if (!this.interactive) {
                 this.triggerElement.removeAttribute('aria-haspopup');
             }
+            this.deactivatePreventScroll();
+            (_f = this.deactivateFocusTrap) === null || _f === void 0 ? void 0 : _f.call(this);
             if (this.focusBackToTrigger) {
-                (_e = this.triggerElement) === null || _e === void 0 ? void 0 : _e.focus();
+                (_g = this.triggerElement) === null || _g === void 0 ? void 0 : _g.focus();
             }
             PopoverEventManager.onHidePopover(this);
         }
     }
-    /**
-     * Sets the focusable elements inside the popover.
-     */
-    async handleCreatePopoverFirstUpdate() {
-        var _a, _b;
-        if (this.visible && this.interactive) {
-            // Wait for the first update to complete before setting focusable elements
-            await this.updateComplete;
-            (_a = this.activateFocusTrap) === null || _a === void 0 ? void 0 : _a.call(this);
-            (_b = this.setInitialFocus) === null || _b === void 0 ? void 0 : _b.call(this);
-        }
-    }
     /**
      * Positions the popover based on the trigger element.
      * It also handles the flip, size and arrow placement.

package/dist/components/tooltip/tooltip.component.js

@@ -57,7 +57,7 @@ class Tooltip extends Popover {
         this.placement = this.placement || DEFAULTS.PLACEMENT;
         this.role = ROLE.TOOLTIP;
         this.trigger = 'mouseenter focusin';
-        this.enabledPreventScroll = false;
+        this.preventScroll = false;
         this.flip = true;
         this.preventScroll = false;
         this.closeButton = false;