@momentum-design/components 0.84.2 → 0.84.3

package/dist/react/index.d.ts

@@ -1,10 +1,10 @@
+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 Badge } from './badge';
 export { default as Bullet } from './bullet';
 export { default as Button } from './button';
 export { default as ButtonGroup } from './buttongroup';
@@ -32,9 +32,9 @@ 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 MenuItemRadio } from './menuitemradio';
+export { default as MenuItemCheckbox } from './menuitemcheckbox';
+export { default as MenuItem } from './menuitem';
 export { default as MenuPopover } from './menupopover';
 export { default as MenuSection } from './menusection';
 export { default as NavItem } from './navitem';

package/dist/react/index.js

@@ -1,10 +1,10 @@
+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 Badge } from './badge';
 export { default as Bullet } from './bullet';
 export { default as Button } from './button';
 export { default as ButtonGroup } from './buttongroup';
@@ -32,9 +32,9 @@ 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 MenuItemRadio } from './menuitemradio';
+export { default as MenuItemCheckbox } from './menuitemcheckbox';
+export { default as MenuItem } from './menuitem';
 export { default as MenuPopover } from './menupopover';
 export { default as MenuSection } from './menusection';
 export { default as NavItem } from './navitem';

package/dist/utils/mixins/FocusTrapMixin.js

@@ -16,6 +16,9 @@ import { property } from 'lit/decorators.js';
  *
  * This also makes sure there is only one keydown listener active at a time,
  * which is necessary to handle focus trapping correctly.
+ *
+ * Handling iFrames is supported, as long as there are focusable elements around the iFrame.
+ * Otherwise it will not work as expected.
  */
 class FocusTrapStack {
     static get stackArray() {
@@ -356,7 +359,7 @@ export const FocusTrapMixin = (superClass) => {
          * @param direction - The direction of the focus trap.
          * If true, the focus will be trapped in the previous element.
          */
-        trapFocus(direction) {
+        trapFocus(event) {
             // calculate the focusable elements
             this.setFocusableElements();
             if (this.focusableElements.length === 0) {
@@ -364,6 +367,7 @@ export const FocusTrapMixin = (superClass) => {
             }
             const activeElement = this.getDeepActiveElement();
             const activeIndex = this.findElement(activeElement);
+            const direction = event.shiftKey;
             if (direction) {
                 this.focusTrapIndex = this.calculateNextIndex(activeIndex, -1);
             }
@@ -371,8 +375,15 @@ export const FocusTrapMixin = (superClass) => {
                 this.focusTrapIndex = this.calculateNextIndex(activeIndex, 1);
             }
             const nextElement = this.focusableElements[this.focusTrapIndex];
+            if (nextElement.tagName === 'IFRAME') {
+                // If the next element is an iframe we should not focus it manually
+                // but just let the browser handle it.
+                // this only works if there are focusable elements around the iframe!
+                return;
+            }
             if (nextElement) {
-                nextElement.focus({ preventScroll: true });
+                event.preventDefault();
+                nextElement.focus();
             }
         }
         /**
@@ -386,8 +397,7 @@ export const FocusTrapMixin = (superClass) => {
                 return;
             }
             if (event.key === 'Tab') {
-                event.preventDefault();
-                this.trapFocus(event.shiftKey);
+                this.trapFocus(event);
             }
         }
     }

package/package.json

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