@momentum-design/components 0.83.1 → 0.83.3

package/dist/react/index.d.ts

@@ -5,8 +5,8 @@ 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 Button } from './button';
 export { default as Bullet } from './bullet';
+export { default as Button } from './button';
 export { default as ButtonGroup } from './buttongroup';
 export { default as ButtonLink } from './buttonlink';
 export { default as Buttonsimple } from './buttonsimple';
@@ -14,8 +14,8 @@ export { default as Card } from './card';
 export { default as CardButton } from './cardbutton';
 export { default as CardCheckbox } from './cardcheckbox';
 export { default as CardRadio } from './cardradio';
-export { default as Checkbox } from './checkbox';
 export { default as Chip } from './chip';
+export { default as Checkbox } from './checkbox';
 export { default as Coachmark } from './coachmark';
 export { default as Dialog } from './dialog';
 export { default as Divider } from './divider';

package/dist/react/index.js

@@ -5,8 +5,8 @@ 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 Button } from './button';
 export { default as Bullet } from './bullet';
+export { default as Button } from './button';
 export { default as ButtonGroup } from './buttongroup';
 export { default as ButtonLink } from './buttonlink';
 export { default as Buttonsimple } from './buttonsimple';
@@ -14,8 +14,8 @@ export { default as Card } from './card';
 export { default as CardButton } from './cardbutton';
 export { default as CardCheckbox } from './cardcheckbox';
 export { default as CardRadio } from './cardradio';
-export { default as Checkbox } from './checkbox';
 export { default as Chip } from './chip';
+export { default as Checkbox } from './checkbox';
 export { default as Coachmark } from './coachmark';
 export { default as Dialog } from './dialog';
 export { default as Divider } from './divider';

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() {
@@ -17,15 +78,10 @@ export const FocusTrapMixin = (superClass) => {
              * Determines whether focus should wrap around when reaching the first or last focusable element.
              * If true, focus will cycle from end to start and vice versa.
              *
-             * This only applies when `enabledFocusTrap` is true.
+             * This only applies when `focusTrap` is true.
              * @default true
              */
             this.shouldFocusTrapWrap = true;
-            /**
-             * Prevent outside scrolling when element is shown.
-             * @default false
-             */
-            this.enabledPreventScroll = false;
             /** @internal */
             this.focusTrapIndex = -1;
             /** @internal */
@@ -33,41 +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() {
-            if (this.focusTrap) {
-                this.isFocusTrapActivated = true;
-                this.setFocusableElements();
-            }
+            this.setIsFocusTrapActivated(true);
+            FocusTrapStack.activate(this);
         }
         /**
          * Deactivate the focus trap.
          */
         deactivateFocusTrap() {
-            this.isFocusTrapActivated = false;
+            this.setIsFocusTrapActivated(false);
+            FocusTrapStack.deactivate(this);
             this.focusTrapIndex = -1;
-            // todo: this should not override the body overflow style, but reset it instead
-            this.enabledPreventScroll = false;
-            document.body.style.overflow = '';
         }
         /**
          * Checks if the element has no client rectangles (not visible in the viewport).
@@ -185,6 +223,8 @@ export const FocusTrapMixin = (superClass) => {
         /**
          * Recursively finds all focusable elements within the given root and its descendants.
          *
+         * Make sure this is performant, as it will be called multiple times.
+         *
          * @param root - The root element to search for focusable elements.
          * @param matches - The set of focusable elements.
          * @returns The list of focusable elements.
@@ -230,14 +270,13 @@ export const FocusTrapMixin = (superClass) => {
          * @param elementIndexToReceiveFocus - The index of the preferable element to focus.
          */
         setInitialFocus(elementIndexToReceiveFocus = 0) {
-            if (this.focusableElements.length === 0)
+            this.setFocusableElements();
+            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 });
             }
         }
         /**
@@ -309,6 +348,8 @@ export const FocusTrapMixin = (superClass) => {
          * If true, the focus will be trapped in the previous element.
          */
         trapFocus(direction) {
+            // calculate the focusable elements
+            this.setFocusableElements();
             if (this.focusableElements.length === 0) {
                 return;
             }
@@ -322,7 +363,7 @@ export const FocusTrapMixin = (superClass) => {
             }
             const nextElement = this.focusableElements[this.focusTrapIndex];
             if (nextElement) {
-                nextElement.focus();
+                nextElement.focus({ preventScroll: true });
             }
         }
         /**
@@ -330,8 +371,9 @@ 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 || !this.focusableElements.length) {
+            if (!this.isFocusTrapActivated) {
                 return;
             }
             if (event.key === 'Tab') {
@@ -344,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.1"
+  "version": "0.83.3"
 }