@momentum-design/components 0.83.1 → 0.83.2

package/dist/react/index.d.ts

@@ -4,17 +4,17 @@ export { default as Appheader } from './appheader';
 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 ButtonGroup } from './buttongroup';
+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 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 CardRadio } from './cardradio';
 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 MenuItem } from './menuitem';
 export { default as MenuItemCheckbox } from './menuitemcheckbox';
+export { default as MenuItem } from './menuitem';
 export { default as MenuItemRadio } from './menuitemradio';
 export { default as MenuPopover } from './menupopover';
 export { default as MenuSection } from './menusection';

package/dist/react/index.js

@@ -4,17 +4,17 @@ export { default as Appheader } from './appheader';
 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 ButtonGroup } from './buttongroup';
+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 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 CardRadio } from './cardradio';
 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 MenuItem } from './menuitem';
 export { default as MenuItemCheckbox } from './menuitemcheckbox';
+export { default as MenuItem } from './menuitem';
 export { default as MenuItemRadio } from './menuitemradio';
 export { default as MenuPopover } from './menupopover';
 export { default as MenuSection } from './menusection';

package/dist/utils/mixins/FocusTrapMixin.js

@@ -17,7 +17,7 @@ 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;
@@ -54,10 +54,7 @@ export const FocusTrapMixin = (superClass) => {
          * This calculates the focusable elements within the component's shadow root
          */
         activateFocusTrap() {
-            if (this.focusTrap) {
-                this.isFocusTrapActivated = true;
-                this.setFocusableElements();
-            }
+            this.isFocusTrapActivated = !!this.focusTrap;
         }
         /**
          * Deactivate the focus trap.
@@ -65,8 +62,8 @@ export const FocusTrapMixin = (superClass) => {
         deactivateFocusTrap() {
             this.isFocusTrapActivated = false;
             this.focusTrapIndex = -1;
-            // todo: this should not override the body overflow style, but reset it instead
             this.enabledPreventScroll = false;
+            // todo: this should not override the body overflow style, but reset it instead
             document.body.style.overflow = '';
         }
         /**
@@ -185,6 +182,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,8 +229,10 @@ 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';
             }
@@ -309,6 +310,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;
             }
@@ -331,7 +334,7 @@ export const FocusTrapMixin = (superClass) => {
          * @param event - The keyboard event.
          */
         handleTabKeydown(event) {
-            if (!this.isFocusTrapActivated || !this.focusableElements.length) {
+            if (!this.isFocusTrapActivated) {
                 return;
             }
             if (event.key === 'Tab') {

package/package.json

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