@momentum-design/components 0.110.2 → 0.111.1

package/dist/react/index.d.ts

@@ -1,6 +1,6 @@
 export { default as Accordion } from './accordion';
-export { default as AccordionButton } from './accordionbutton';
 export { default as AccordionGroup } from './accordiongroup';
+export { default as AccordionButton } from './accordionbutton';
 export { default as AlertChip } from './alertchip';
 export { default as Animation } from './animation';
 export { default as Appheader } from './appheader';
@@ -13,15 +13,14 @@ export { default as Button } from './button';
 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 CardRadio } from './cardradio';
+export { default as Card } from './card';
 export { default as Checkbox } from './checkbox';
 export { default as Chip } from './chip';
 export { default as Coachmark } from './coachmark';
 export { default as Combobox } from './combobox';
-export { default as Dialog } from './dialog';
 export { default as Divider } from './divider';
 export { default as FilterChip } from './filterchip';
 export { default as FormfieldGroup } from './formfieldgroup';
@@ -35,6 +34,7 @@ export { default as LinkButton } from './linkbutton';
 export { default as Linksimple } from './linksimple';
 export { default as List } from './list';
 export { default as ListBox } from './listbox';
+export { default as Dialog } from './dialog';
 export { default as Listheader } from './listheader';
 export { default as ListItem } from './listitem';
 export { default as Marker } from './marker';

package/dist/react/index.js

@@ -1,6 +1,6 @@
 export { default as Accordion } from './accordion';
-export { default as AccordionButton } from './accordionbutton';
 export { default as AccordionGroup } from './accordiongroup';
+export { default as AccordionButton } from './accordionbutton';
 export { default as AlertChip } from './alertchip';
 export { default as Animation } from './animation';
 export { default as Appheader } from './appheader';
@@ -13,15 +13,14 @@ export { default as Button } from './button';
 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 CardRadio } from './cardradio';
+export { default as Card } from './card';
 export { default as Checkbox } from './checkbox';
 export { default as Chip } from './chip';
 export { default as Coachmark } from './coachmark';
 export { default as Combobox } from './combobox';
-export { default as Dialog } from './dialog';
 export { default as Divider } from './divider';
 export { default as FilterChip } from './filterchip';
 export { default as FormfieldGroup } from './formfieldgroup';
@@ -35,6 +34,7 @@ export { default as LinkButton } from './linkbutton';
 export { default as Linksimple } from './linksimple';
 export { default as List } from './list';
 export { default as ListBox } from './listbox';
+export { default as Dialog } from './dialog';
 export { default as Listheader } from './listheader';
 export { default as ListItem } from './listitem';
 export { default as Marker } from './marker';

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

@@ -1,10 +1,11 @@
 import type { Component } from '../../models';
 import type { Constructor } from './index.types';
 export declare abstract class ListNavigationMixinInterface {
-    protected loop: boolean;
+    protected loop: 'true' | 'false';
     protected propagateAllKeyEvents: boolean;
-    protected resetTabIndexes(index: number): void;
+    protected initialFocus: number;
     protected abstract get navItems(): HTMLElement[];
+    protected resetTabIndexes(index: number): void;
     protected resetTabIndexAndSetFocus(newIndex: number, oldIndex?: number, focusNewItem?: boolean): void;
 }
 /**

package/dist/utils/mixins/ListNavigationMixin.js

@@ -23,14 +23,14 @@ export const ListNavigationMixin = (superClass) => {
             super(...rest);
             /**
              * Whether to loop navigation when reaching the end of the list.
-             * If true, pressing the down arrow on the last item will focus the first item,
+             * If 'true', pressing the down arrow on the last item will focus the first item,
              * and pressing the up arrow on the first item will focus the last item.
-             * If false, navigation will stop at the first or last item.
+             * If 'false', navigation will stop at the first or last item.
              *
-             * @default true
+             * @default 'true'
              * @internal
              */
-            this.loop = true;
+            this.loop = 'true';
             /**
              * Whether to propagate all key events to parent components.
              * If true, all key events will bubble up and can be handled by parent components.
@@ -40,6 +40,13 @@ export const ListNavigationMixin = (superClass) => {
              * @internal
              */
             this.propagateAllKeyEvents = false;
+            /**
+             * The index of the item to focus initially when the component is first updated.
+             *
+             * @default 0
+             * @internal
+             */
+            this.initialFocus = 0;
             /**
              * Handles keydown events for navigation within the list.
              * It allows users to navigate through the list items using arrow keys, home, and end keys.
@@ -52,41 +59,40 @@ export const ListNavigationMixin = (superClass) => {
              * @internal
              */
             this.handleNavigationKeyDown = (event) => {
-                let isKeyHandled = false;
+                const keysToHandle = new Set([KEYS.ARROW_DOWN, KEYS.ARROW_UP, KEYS.HOME, KEYS.END]);
+                const isRtl = window.getComputedStyle(this).direction === 'rtl';
+                const targetKey = this.resolveDirectionKey(event.key, isRtl);
+                if (!keysToHandle.has(targetKey)) {
+                    return;
+                }
                 const target = event.target;
                 const currentIndex = this.getCurrentIndex(target);
                 if (currentIndex === -1)
                     return;
                 this.resetTabIndexes(currentIndex);
-                const isRtl = window.getComputedStyle(this).direction === 'rtl';
-                const targetKey = this.resolveDirectionKey(event.key, isRtl);
                 switch (targetKey) {
                     case KEYS.HOME: {
                         // Move focus to the first item
                         this.resetTabIndexAndSetFocus(0, currentIndex);
-                        isKeyHandled = true;
                         break;
                     }
                     case KEYS.END: {
                         // Move focus to the last item
                         this.resetTabIndexAndSetFocus(this.navItems.length - 1, currentIndex);
-                        isKeyHandled = true;
                         break;
                     }
                     case KEYS.ARROW_DOWN: {
                         // Move focus to the next item
-                        const eolIndex = this.loop ? 0 : currentIndex;
+                        const eolIndex = this.shouldLoop() ? 0 : currentIndex;
                         const newIndex = currentIndex + 1 === this.navItems.length ? eolIndex : currentIndex + 1;
                         this.resetTabIndexAndSetFocus(newIndex, currentIndex);
-                        isKeyHandled = true;
                         break;
                     }
                     case KEYS.ARROW_UP: {
                         // Move focus to the prev item
-                        const eolIndex = this.loop ? this.navItems.length - 1 : currentIndex;
+                        const eolIndex = this.shouldLoop() ? this.navItems.length - 1 : currentIndex;
                         const newIndex = currentIndex - 1 === -1 ? eolIndex : currentIndex - 1;
                         this.resetTabIndexAndSetFocus(newIndex, currentIndex);
-                        isKeyHandled = true;
                         break;
                     }
                     default:
@@ -94,7 +100,7 @@ export const ListNavigationMixin = (superClass) => {
                 }
                 // When the component consume any of the pressed key, we need to stop propagation
                 // to prevent the event from bubbling up and being handled by parent components which might use the same key.
-                if (isKeyHandled && !this.propagateAllKeyEvents) {
+                if (!this.propagateAllKeyEvents) {
                     event.stopPropagation();
                     event.preventDefault();
                 }
@@ -120,7 +126,8 @@ export const ListNavigationMixin = (superClass) => {
          */
         async firstUpdated(changedProperties) {
             super.firstUpdated(changedProperties);
-            this.resetTabIndexAndSetFocus(0, undefined, false);
+            const indexToFocus = Math.max(Math.min(this.initialFocus, this.navItems.length - 1), 0);
+            this.resetTabIndexAndSetFocus(indexToFocus, undefined, false);
         }
         /**
          * Retrieves the current index of the item that triggered the event.
@@ -129,7 +136,9 @@ export const ListNavigationMixin = (superClass) => {
          * @returns - The index of the current item in the `navItems` array.
          */
         getCurrentIndex(target) {
-            return this.navItems.findIndex(node => node === target);
+            return this.navItems.findIndex(node => node === target ||
+                // eslint-disable-next-line no-bitwise
+                !!(node.compareDocumentPosition(target) & Node.DOCUMENT_POSITION_CONTAINED_BY));
         }
         /**
          * Reset all tabindex to -1 and set the tabindex of the current item to 0
@@ -162,13 +171,17 @@ export const ListNavigationMixin = (superClass) => {
             if (newIndex === oldIndex && newItem && newItem.getAttribute('tabindex') === '0') {
                 return;
             }
-            if (oldIndex !== undefined && navItems[oldIndex]) {
+            if (oldIndex === undefined) {
+                navItems.forEach(item => item.setAttribute('tabindex', '-1'));
+            }
+            else if (navItems[oldIndex]) {
                 // Reset tabindex of the old item
                 navItems[oldIndex].setAttribute('tabindex', '-1');
             }
             newItem.setAttribute('tabindex', '0');
             if (focusNewItem) {
-                newItem.focus();
+                newItem.focus({ preventScroll: true });
+                newItem.scrollIntoView({ block: 'nearest' });
             }
         }
         /**
@@ -193,6 +206,9 @@ export const ListNavigationMixin = (superClass) => {
                     return key;
             }
         }
+        shouldLoop() {
+            return this.loop !== 'false';
+        }
     }
     // Cast return type to your mixin's interface intersected with the superClass type
     return InnerMixinClass;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@momentum-design/components",
   "packageManager": "yarn@3.2.4",
-  "version": "0.110.2",
+  "version": "0.111.1",
   "engines": {
     "node": ">=20.0.0",
     "npm": ">=8.0.0"