@momentum-design/components 0.81.0 → 0.81.1

package/dist/react/index.d.ts

@@ -1,6 +1,6 @@
-export { default as Appheader } from './appheader';
 export { default as AlertChip } from './alertchip';
 export { default as Animation } from './animation';
+export { default as Appheader } from './appheader';
 export { default as Avatar } from './avatar';
 export { default as AvatarButton } from './avatarbutton';
 export { default as Badge } from './badge';
@@ -12,14 +12,15 @@ 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 CardRadio } from './cardradio';
 export { default as Checkbox } from './checkbox';
 export { default as Chip } from './chip';
-export { default as CardCheckbox } from './cardcheckbox';
 export { default as Coachmark } from './coachmark';
 export { default as Dialog } from './dialog';
 export { default as Divider } from './divider';
 export { default as FilterChip } from './filterchip';
+export { default as FormfieldGroup } from './formfieldgroup';
 export { default as FormfieldWrapper } from './formfieldwrapper';
 export { default as Icon } from './icon';
 export { default as IconProvider } from './iconprovider';
@@ -29,7 +30,6 @@ export { default as Link } from './link';
 export { default as Linksimple } from './linksimple';
 export { default as List } from './list';
 export { default as ListItem } from './listitem';
-export { default as FormfieldGroup } from './formfieldgroup';
 export { default as Marker } from './marker';
 export { default as Menu } from './menu';
 export { default as MenuBar } from './menubar';

package/dist/react/index.js

@@ -1,6 +1,6 @@
-export { default as Appheader } from './appheader';
 export { default as AlertChip } from './alertchip';
 export { default as Animation } from './animation';
+export { default as Appheader } from './appheader';
 export { default as Avatar } from './avatar';
 export { default as AvatarButton } from './avatarbutton';
 export { default as Badge } from './badge';
@@ -12,14 +12,15 @@ 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 CardRadio } from './cardradio';
 export { default as Checkbox } from './checkbox';
 export { default as Chip } from './chip';
-export { default as CardCheckbox } from './cardcheckbox';
 export { default as Coachmark } from './coachmark';
 export { default as Dialog } from './dialog';
 export { default as Divider } from './divider';
 export { default as FilterChip } from './filterchip';
+export { default as FormfieldGroup } from './formfieldgroup';
 export { default as FormfieldWrapper } from './formfieldwrapper';
 export { default as Icon } from './icon';
 export { default as IconProvider } from './iconprovider';
@@ -29,7 +30,6 @@ export { default as Link } from './link';
 export { default as Linksimple } from './linksimple';
 export { default as List } from './list';
 export { default as ListItem } from './listitem';
-export { default as FormfieldGroup } from './formfieldgroup';
 export { default as Marker } from './marker';
 export { default as Menu } from './menu';
 export { default as MenuBar } from './menubar';

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

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

package/dist/utils/mixins/FocusTrapMixin.js

@@ -11,14 +11,16 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 import { property } from 'lit/decorators.js';
 export const FocusTrapMixin = (superClass) => {
     class FocusTrap extends superClass {
-        constructor(...args) {
-            super(...args);
+        constructor() {
+            super(...arguments);
             /**
-             * Determines whether the focus trap is enabled.
-             * If true, focus will be restricted to the content within this component.
-             * @default false
+             * 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.
+             * @default true
              */
-            this.enabledFocusTrap = false;
+            this.shouldFocusTrapWrap = true;
             /**
              * Prevent outside scrolling when element is shown.
              * @default false
@@ -28,16 +30,43 @@ export const FocusTrapMixin = (superClass) => {
             this.focusTrapIndex = -1;
             /** @internal */
             this.focusableElements = [];
-            this.shouldWrapFocus = () => true;
-            this.addEventListener('keydown', this.handleKeydown);
+            /** @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();
+                }
+            }
+        }
+        /**
+         * Activate the focus trap
+         * This calculates the focusable elements within the component's shadow root
+         */
+        activateFocusTrap() {
+            if (this.focusTrap) {
+                this.isFocusTrapActivated = true;
+                this.setFocusableElements();
+            }
         }
         /**
          * Deactivate the focus trap.
          */
         deactivateFocusTrap() {
-            this.enabledFocusTrap = false;
-            this.enabledPreventScroll = false;
+            this.isFocusTrapActivated = false;
             this.focusTrapIndex = -1;
+            // todo: this should not override the body overflow style, but reset it instead
+            this.enabledPreventScroll = false;
             document.body.style.overflow = '';
         }
         /**
@@ -198,17 +227,17 @@ export const FocusTrapMixin = (superClass) => {
         /**
          * Sets the initial focus within the container.
          *
-         * @param prefferableElement - The index of the preferable element to focus.
+         * @param elementIndexToReceiveFocus - The index of the preferable element to focus.
          */
-        setInitialFocus(prefferableElement = 0) {
+        setInitialFocus(elementIndexToReceiveFocus = 0) {
             if (this.focusableElements.length === 0)
                 return;
             if (this.enabledPreventScroll) {
                 document.body.style.overflow = 'hidden';
             }
-            if (this.focusableElements[prefferableElement]) {
-                this.focusTrapIndex = prefferableElement;
-                this.focusableElements[prefferableElement].focus();
+            if (this.focusableElements[elementIndexToReceiveFocus]) {
+                this.focusTrapIndex = elementIndexToReceiveFocus;
+                this.focusableElements[elementIndexToReceiveFocus].focus();
             }
         }
         /**
@@ -220,12 +249,11 @@ export const FocusTrapMixin = (superClass) => {
          */
         calculateNextIndex(currentIndex, step) {
             const { length } = this.focusableElements;
-            const wrapFocus = this.shouldWrapFocus();
             if (currentIndex === -1) {
                 return step > 0 ? 0 : length - 1;
             }
             let nextIndex = currentIndex + step;
-            if (wrapFocus) {
+            if (this.shouldFocusTrapWrap) {
                 if (nextIndex < 0)
                     nextIndex = length - 1;
                 if (nextIndex >= length)
@@ -281,8 +309,9 @@ export const FocusTrapMixin = (superClass) => {
          * If true, the focus will be trapped in the previous element.
          */
         trapFocus(direction) {
-            if (this.focusableElements.length === 0)
+            if (this.focusableElements.length === 0) {
                 return;
+            }
             const activeElement = this.getDeepActiveElement();
             const activeIndex = this.findElement(activeElement);
             if (direction) {
@@ -301,8 +330,8 @@ export const FocusTrapMixin = (superClass) => {
          *
          * @param event - The keyboard event.
          */
-        handleKeydown(event) {
-            if (!this.enabledFocusTrap || !this.focusableElements.length) {
+        handleTabKeydown(event) {
+            if (!this.isFocusTrapActivated || !this.focusableElements.length) {
                 return;
             }
             if (event.key === 'Tab') {
@@ -312,9 +341,9 @@ export const FocusTrapMixin = (superClass) => {
         }
     }
     __decorate([
-        property({ type: Boolean }),
+        property({ type: Boolean, reflect: true, attribute: 'should-focus-trap-wrap' }),
         __metadata("design:type", Boolean)
-    ], FocusTrap.prototype, "enabledFocusTrap", void 0);
+    ], FocusTrap.prototype, "shouldFocusTrapWrap", void 0);
     __decorate([
         property({ type: Boolean }),
         __metadata("design:type", Boolean)

package/package.json

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