@momentum-design/components 0.83.2 → 0.83.4

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.
@@ -12,6 +12,11 @@ declare const Dialog_base: import("../../utils/mixins/index.types").Constructor<
  * If a `triggerId` is provided, the dialog will manage focus with that element, otherwise it will
  * remember the previously focused element before the dialog was opened.
  *
+ * The dialog is a controlled component, meaning it does not have its own state management for visibility.
+ * Use the `visible` property to control the visibility of the dialog.
+ * Use the `onClose` event to handle the close action of the dialog (fired when Close button is clicked
+ * or Escape is pressed).
+ *
  * Dialog component have 2 variants: default and promotional.
  *
  * **Accessibility notes for consuming (have to be explicitly set when you consume the component)**
@@ -32,6 +37,8 @@ declare const Dialog_base: import("../../utils/mixins/index.types").Constructor<
  * @event hidden - (React: onHidden) Dispatched when the dialog is hidden
  * @event created - (React: onCreated) Dispatched when the dialog is created (added to the DOM)
  * @event destroyed - (React: onDestroyed) Dispatched when the dialog is destroyed (removed from the DOM)
+ * @event close - (React: onClose) Dispatched when the Close Button is clicked or Escape key is pressed
+ * (this does not hide the dialog)
  *
  * @cssproperty --mdc-dialog-primary-background-color - primary background color of the dialog
  * @cssproperty --mdc-dialog-border-color - border color of the dialog
@@ -63,6 +70,8 @@ declare class Dialog extends Dialog_base {
     triggerId?: string;
     /**
      * The visibility of the dialog
+     *
+     * Dialog is a controlled component, visible is the only property that controls the visibility of the dialog.
      * @default false
      */
     visible: boolean;
@@ -136,8 +145,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 */
@@ -171,6 +185,12 @@ declare class Dialog extends Dialog_base {
      * @internal
      */
     private createBackdrop;
+    /**
+     * Fired when Close Button is clicked or Escape key is pressed.
+     * This method dispatches the close event. Setting visible to false
+     * has to be done by the consumer of the component.
+     */
+    private closeDialog;
     /**
      * Handles the escape keydown event to close the dialog.
      * @internal
@@ -192,16 +212,6 @@ declare class Dialog extends Dialog_base {
      * @internal
      */
     private focusBackToTrigger;
-    /**
-     * Hides the dialog.
-     * @internal
-     */
-    hideDialog: () => void;
-    /**
-     * Shows the dialog.
-     * @internal
-     */
-    showDialog: () => void;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;
 }

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';
@@ -28,6 +29,11 @@ import { CardAndDialogFooterMixin } from '../../utils/mixins/CardAndDialogFooter
  * If a `triggerId` is provided, the dialog will manage focus with that element, otherwise it will
  * remember the previously focused element before the dialog was opened.
  *
+ * The dialog is a controlled component, meaning it does not have its own state management for visibility.
+ * Use the `visible` property to control the visibility of the dialog.
+ * Use the `onClose` event to handle the close action of the dialog (fired when Close button is clicked
+ * or Escape is pressed).
+ *
  * Dialog component have 2 variants: default and promotional.
  *
  * **Accessibility notes for consuming (have to be explicitly set when you consume the component)**
@@ -48,6 +54,8 @@ import { CardAndDialogFooterMixin } from '../../utils/mixins/CardAndDialogFooter
  * @event hidden - (React: onHidden) Dispatched when the dialog is hidden
  * @event created - (React: onCreated) Dispatched when the dialog is created (added to the DOM)
  * @event destroyed - (React: onDestroyed) Dispatched when the dialog is destroyed (removed from the DOM)
+ * @event close - (React: onClose) Dispatched when the Close Button is clicked or Escape key is pressed
+ * (this does not hide the dialog)
  *
  * @cssproperty --mdc-dialog-primary-background-color - primary background color of the dialog
  * @cssproperty --mdc-dialog-border-color - border color of the dialog
@@ -66,7 +74,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);
         /**
@@ -75,6 +83,8 @@ class Dialog extends FocusTrapMixin(CardAndDialogFooterMixin(Component)) {
         this.id = '';
         /**
          * The visibility of the dialog
+         *
+         * Dialog is a controlled component, visible is the only property that controls the visibility of the dialog.
          * @default false
          */
         this.visible = DEFAULTS.VISIBLE;
@@ -140,8 +150,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,36 +173,28 @@ class Dialog extends FocusTrapMixin(CardAndDialogFooterMixin(Component)) {
                 return;
             }
             event.preventDefault();
-            this.hideDialog();
-        };
-        /**
-         * Hides the dialog.
-         * @internal
-         */
-        this.hideDialog = () => {
-            this.visible = false;
-        };
-        /**
-         * Shows the dialog.
-         * @internal
-         */
-        this.showDialog = () => {
-            this.visible = true;
+            // Prevent the event from propagating to the document level
+            // pressing escape on a dialog should only close the dialog, nothing else
+            event.stopPropagation();
+            this.closeDialog();
         };
     }
     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 +229,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.
@@ -289,6 +302,14 @@ class Dialog extends FocusTrapMixin(CardAndDialogFooterMixin(Component)) {
         (_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.appendChild(backdrop);
         this.backdropElement = backdrop;
     }
+    /**
+     * Fired when Close Button is clicked or Escape key is pressed.
+     * This method dispatches the close event. Setting visible to false
+     * has to be done by the consumer of the component.
+     */
+    closeDialog() {
+        DialogEventManager.onCloseDialog(this, false);
+    }
     /**
      * Handles the dialog visibility change.
      * Handles the exit event to close the dialog.
@@ -304,8 +325,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 +337,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);
         }
@@ -371,7 +393,7 @@ class Dialog extends FocusTrapMixin(CardAndDialogFooterMixin(Component)) {
         variant="${BUTTON_VARIANTS.TERTIARY}"
         size="${ICON_BUTTON_SIZES[20]}"
         aria-label="${ifDefined(this.closeButtonAriaLabel) || ''}"
-        @click="${this.hideDialog}"
+        @click="${this.closeDialog}"
       ></mdc-button>
       <div part="body">
         <slot name="dialog-body"></slot>

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

@@ -6,7 +6,7 @@ export declare class DialogEventManager {
      * @param eventName - The name of the event.
      * @param instance - The dialog instance.
      */
-    static dispatchDialogEvent(eventName: string, instance: Dialog): void;
+    static dispatchDialogEvent(eventName: string, instance: Dialog, bubbles?: boolean): void;
     /**
      * Custom event that is fired when the dialog is shown.
      *
@@ -19,6 +19,14 @@ export declare class DialogEventManager {
      * @param instance - The dialog instance.
      */
     static onHideDialog(instance: Dialog): void;
+    /**
+     * Custom event that is fired when the dialog is closed.
+     * This gets fired when the Close Button is clicked or
+     * when Escape key is pressed.
+     *
+     * @param instance - The dialog instance.
+     */
+    static onCloseDialog(instance: Dialog, bubbles?: boolean): void;
     /**
      * Custom event that is fired when the dialog is created.
      *

package/dist/components/dialog/dialog.events.js

@@ -5,11 +5,11 @@ export class DialogEventManager {
      * @param eventName - The name of the event.
      * @param instance - The dialog instance.
      */
-    static dispatchDialogEvent(eventName, instance) {
+    static dispatchDialogEvent(eventName, instance, bubbles = true) {
         instance.dispatchEvent(new CustomEvent(eventName, {
             detail: { show: instance.visible },
             composed: true,
-            bubbles: true,
+            bubbles,
         }));
     }
     /**
@@ -28,6 +28,16 @@ export class DialogEventManager {
     static onHideDialog(instance) {
         this.dispatchDialogEvent('hidden', instance);
     }
+    /**
+     * Custom event that is fired when the dialog is closed.
+     * This gets fired when the Close Button is clicked or
+     * when Escape key is pressed.
+     *
+     * @param instance - The dialog instance.
+     */
+    static onCloseDialog(instance, bubbles = true) {
+        this.dispatchDialogEvent('close', instance, bubbles);
+    }
     /**
      * Custom event that is fired when the dialog is created.
      *

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

@@ -8,5 +8,6 @@ interface Events {
     onHiddenEvent: Event;
     onCreatedEvent: Event;
     onDestroyedEvent: Event;
+    onCloseEvent: Event;
 }
 export type { DialogSize, DialogRole, DialogVariant, Events };

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;