@momentum-design/components 0.83.2 → 0.83.4

package/dist/react/dialog/index.d.ts

@@ -10,6 +10,11 @@ import Component from '../../components/dialog';
  * 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)**
@@ -30,6 +35,8 @@ import Component from '../../components/dialog';
  * @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
@@ -53,5 +60,6 @@ declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
     onHidden: EventName<Event>;
     onCreated: EventName<Event>;
     onDestroyed: EventName<Event>;
+    onClose: EventName<Event>;
 }>;
 export default reactWrapper;

package/dist/react/dialog/index.js

@@ -12,6 +12,11 @@ import { TAG_NAME } from '../../components/dialog/dialog.constants';
  * 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 @@ import { TAG_NAME } from '../../components/dialog/dialog.constants';
  * @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
@@ -59,6 +66,7 @@ const reactWrapper = createComponent({
         onHidden: 'hidden',
         onCreated: 'created',
         onDestroyed: 'destroyed',
+        onClose: 'close',
     },
     displayName: 'Dialog',
 });

package/dist/react/index.d.ts

@@ -1,20 +1,20 @@
-export { default as AlertChip } from './alertchip';
 export { default as Animation } from './animation';
 export { default as Appheader } from './appheader';
+export { default as AlertChip } from './alertchip';
 export { default as Avatar } from './avatar';
 export { default as AvatarButton } from './avatarbutton';
 export { default as Badge } from './badge';
+export { default as Brandvisual } from './brandvisual';
 export { default as Bullet } from './bullet';
 export { default as Button } from './button';
-export { default as Brandvisual } from './brandvisual';
-export { default as ButtonLink } from './buttonlink';
 export { default as ButtonGroup } from './buttongroup';
+export { default as ButtonLink } from './buttonlink';
 export { default as Buttonsimple } from './buttonsimple';
 export { default as Card } from './card';
 export { default as CardButton } from './cardbutton';
 export { default as CardCheckbox } from './cardcheckbox';
-export { default as Checkbox } from './checkbox';
 export { default as CardRadio } from './cardradio';
+export { default as Checkbox } from './checkbox';
 export { default as Chip } from './chip';
 export { default as Coachmark } from './coachmark';
 export { default as Dialog } from './dialog';
@@ -32,8 +32,8 @@ export { default as List } from './list';
 export { default as ListItem } from './listitem';
 export { default as Marker } from './marker';
 export { default as MenuBar } from './menubar';
-export { default as MenuItemCheckbox } from './menuitemcheckbox';
 export { default as MenuItem } from './menuitem';
+export { default as MenuItemCheckbox } from './menuitemcheckbox';
 export { default as MenuItemRadio } from './menuitemradio';
 export { default as MenuPopover } from './menupopover';
 export { default as MenuSection } from './menusection';

package/dist/react/index.js

@@ -1,20 +1,20 @@
-export { default as AlertChip } from './alertchip';
 export { default as Animation } from './animation';
 export { default as Appheader } from './appheader';
+export { default as AlertChip } from './alertchip';
 export { default as Avatar } from './avatar';
 export { default as AvatarButton } from './avatarbutton';
 export { default as Badge } from './badge';
+export { default as Brandvisual } from './brandvisual';
 export { default as Bullet } from './bullet';
 export { default as Button } from './button';
-export { default as Brandvisual } from './brandvisual';
-export { default as ButtonLink } from './buttonlink';
 export { default as ButtonGroup } from './buttongroup';
+export { default as ButtonLink } from './buttonlink';
 export { default as Buttonsimple } from './buttonsimple';
 export { default as Card } from './card';
 export { default as CardButton } from './cardbutton';
 export { default as CardCheckbox } from './cardcheckbox';
-export { default as Checkbox } from './checkbox';
 export { default as CardRadio } from './cardradio';
+export { default as Checkbox } from './checkbox';
 export { default as Chip } from './chip';
 export { default as Coachmark } from './coachmark';
 export { default as Dialog } from './dialog';
@@ -32,8 +32,8 @@ export { default as List } from './list';
 export { default as ListItem } from './listitem';
 export { default as Marker } from './marker';
 export { default as MenuBar } from './menubar';
-export { default as MenuItemCheckbox } from './menuitemcheckbox';
 export { default as MenuItem } from './menuitem';
+export { default as MenuItemCheckbox } from './menuitemcheckbox';
 export { default as MenuItemRadio } from './menuitemradio';
 export { default as MenuPopover } from './menupopover';
 export { default as MenuSection } from './menusection';

package/dist/utils/mixins/FocusTrapMixin.d.ts

@@ -2,9 +2,9 @@ import type { Component } from '../../models';
 import type { Constructor } from './index.types';
 export declare abstract class FocusTrapClassInterface {
     protected abstract focusTrap: boolean;
-    enabledPreventScroll: boolean;
     setInitialFocus(elementIndexToReceiveFocus?: number): void;
     activateFocusTrap(): void;
     deactivateFocusTrap(): void;
+    private setIsFocusTrapActivated;
 }
-export declare const FocusTrapMixin: <T extends Constructor<Component>>(superClass: T) => Constructor<HTMLElement & FocusTrapClassInterface> & T;
+export declare const FocusTrapMixin: <T extends Constructor<Component>>(superClass: T) => Constructor<Component & FocusTrapClassInterface> & T;

package/dist/utils/mixins/FocusTrapMixin.js

@@ -7,8 +7,69 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
+/* eslint-disable no-use-before-define */
 /* eslint-disable max-classes-per-file */
 import { property } from 'lit/decorators.js';
+/**
+ * FocusTrapStack manages a stack of active focus traps,
+ * ensuring only one focus trap is active at a time.
+ *
+ * This also makes sure there is only one keydown listener active at a time,
+ * which is necessary to handle focus trapping correctly.
+ */
+class FocusTrapStack {
+    static get stackArray() {
+        return Array.from(this.stack);
+    }
+    static addKeydownListener(keydownListener) {
+        this.currentKeydownListener = keydownListener;
+        document.addEventListener('keydown', keydownListener);
+    }
+    static removeKeydownListener() {
+        if (this.currentKeydownListener) {
+            document.removeEventListener('keydown', this.currentKeydownListener);
+        }
+    }
+    /**
+     * Activates a focus trap by adding it to the stack.
+     * It deactivates all other traps in the stack to ensure only one trap is active
+     *
+     * @param trap - The focus trap to activate.
+     */
+    static activate(trap) {
+        // Deactivate all other traps
+        this.stackArray.forEach((activeTrap) => {
+            if (activeTrap !== trap) {
+                activeTrap.setIsFocusTrapActivated(false);
+            }
+        });
+        this.stack.add(trap);
+        // remove the current keydown listener if it exists
+        // and add a new one for the current trap
+        this.removeKeydownListener();
+        this.addKeydownListener(trap.handleTabKeydown.bind(trap));
+    }
+    /**
+     * Deactivates a focus trap by removing it from the stack.
+     * Activates the previous trap in the stack if any.
+     *
+     * @param trap - The focus trap to deactivate.
+     */
+    static deactivate(trap) {
+        this.stack.delete(trap);
+        this.removeKeydownListener();
+        // activate the previous trap in the stack if any
+        if (this.stack.size > 0) {
+            const lastTrap = this.stackArray.pop();
+            if (lastTrap) {
+                lastTrap.setIsFocusTrapActivated(true);
+                this.addKeydownListener(lastTrap.handleTabKeydown.bind(lastTrap));
+            }
+        }
+    }
+}
+FocusTrapStack.stack = new Set();
+FocusTrapStack.currentKeydownListener = null;
 export const FocusTrapMixin = (superClass) => {
     class FocusTrap extends superClass {
         constructor() {
@@ -21,11 +82,6 @@ export const FocusTrapMixin = (superClass) => {
              * @default true
              */
             this.shouldFocusTrapWrap = true;
-            /**
-             * Prevent outside scrolling when element is shown.
-             * @default false
-             */
-            this.enabledPreventScroll = false;
             /** @internal */
             this.focusTrapIndex = -1;
             /** @internal */
@@ -33,38 +89,23 @@ export const FocusTrapMixin = (superClass) => {
             /** @internal */
             this.isFocusTrapActivated = false;
         }
-        connectedCallback() {
-            super.connectedCallback();
-            document.addEventListener('keydown', this.handleTabKeydown.bind(this));
-        }
-        disconnectedCallback() {
-            super.disconnectedCallback();
-            document.removeEventListener('keydown', this.handleTabKeydown.bind(this));
-        }
-        async updated(changedProperties) {
-            super.updated(changedProperties);
-            if (changedProperties.has('focusTrap')) {
-                if (!this.focusTrap) {
-                    this.deactivateFocusTrap();
-                }
-            }
+        setIsFocusTrapActivated(isActivated) {
+            this.isFocusTrapActivated = isActivated;
         }
         /**
          * Activate the focus trap
-         * This calculates the focusable elements within the component's shadow root
          */
         activateFocusTrap() {
-            this.isFocusTrapActivated = !!this.focusTrap;
+            this.setIsFocusTrapActivated(true);
+            FocusTrapStack.activate(this);
         }
         /**
          * Deactivate the focus trap.
          */
         deactivateFocusTrap() {
-            this.isFocusTrapActivated = false;
+            this.setIsFocusTrapActivated(false);
+            FocusTrapStack.deactivate(this);
             this.focusTrapIndex = -1;
-            this.enabledPreventScroll = false;
-            // todo: this should not override the body overflow style, but reset it instead
-            document.body.style.overflow = '';
         }
         /**
          * Checks if the element has no client rectangles (not visible in the viewport).
@@ -233,12 +274,9 @@ export const FocusTrapMixin = (superClass) => {
             if (this.focusableElements.length === 0 || !this.focusTrap) {
                 return;
             }
-            if (this.enabledPreventScroll) {
-                document.body.style.overflow = 'hidden';
-            }
             if (this.focusableElements[elementIndexToReceiveFocus]) {
                 this.focusTrapIndex = elementIndexToReceiveFocus;
-                this.focusableElements[elementIndexToReceiveFocus].focus();
+                this.focusableElements[elementIndexToReceiveFocus].focus({ preventScroll: true });
             }
         }
         /**
@@ -325,7 +363,7 @@ export const FocusTrapMixin = (superClass) => {
             }
             const nextElement = this.focusableElements[this.focusTrapIndex];
             if (nextElement) {
-                nextElement.focus();
+                nextElement.focus({ preventScroll: true });
             }
         }
         /**
@@ -333,6 +371,7 @@ export const FocusTrapMixin = (superClass) => {
          *
          * @param event - The keyboard event.
          */
+        // @ts-ignore - this is a method which will be called in the stack
         handleTabKeydown(event) {
             if (!this.isFocusTrapActivated) {
                 return;
@@ -347,9 +386,5 @@ export const FocusTrapMixin = (superClass) => {
         property({ type: Boolean, reflect: true, attribute: 'should-focus-trap-wrap' }),
         __metadata("design:type", Boolean)
     ], FocusTrap.prototype, "shouldFocusTrapWrap", void 0);
-    __decorate([
-        property({ type: Boolean }),
-        __metadata("design:type", Boolean)
-    ], FocusTrap.prototype, "enabledPreventScroll", void 0);
     return FocusTrap;
 };

package/dist/utils/mixins/PreventScrollMixin.d.ts

@@ -0,0 +1,9 @@
+import { LitElement } from 'lit';
+import type { Constructor } from './index.types';
+import type { Component } from '../../models';
+export declare abstract class PreventScrollMixinInterface {
+    protected abstract preventScroll?: boolean;
+    protected activatePreventScroll(): void;
+    protected deactivatePreventScroll(): void;
+}
+export declare const PreventScrollMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<Component & PreventScrollMixinInterface> & T;

package/dist/utils/mixins/PreventScrollMixin.js

@@ -0,0 +1,32 @@
+export const PreventScrollMixin = (superClass) => {
+    class PreventScroll extends superClass {
+        constructor() {
+            super(...arguments);
+            /**
+             * @internal
+             */
+            this.isPreventScrollActive = false;
+            /**
+             * @internal
+             */
+            this.previousDocumentBodyStyleOverflow = '';
+        }
+        activatePreventScroll() {
+            if (this.preventScroll && !this.isPreventScrollActive) {
+                this.isPreventScrollActive = true;
+                // Store the previous body overflow style
+                this.previousDocumentBodyStyleOverflow = document.body.style.overflow;
+                // Set body overflow to hidden to prevent scrolling
+                document.body.style.overflow = 'hidden';
+            }
+        }
+        deactivatePreventScroll() {
+            if (this.isPreventScrollActive) {
+                this.isPreventScrollActive = false;
+                // Restore the previous body overflow style
+                document.body.style.overflow = this.previousDocumentBodyStyleOverflow;
+            }
+        }
+    }
+    return PreventScroll;
+};

package/package.json

@@ -41,5 +41,5 @@
     "lottie-web": "^5.12.2",
     "uuid": "^11.0.5"
   },
-  "version": "0.83.2"
+  "version": "0.83.4"
 }