@momentum-design/components 0.102.6 → 0.102.8

package/dist/components/radio/radio.component.d.ts

@@ -54,12 +54,6 @@ declare class Radio extends Radio_base implements AssociatedFormControl {
      * Returns all radios within the same group (name).
      */
     private getAllRadiosWithinSameGroup;
-    /**
-     * The 'change' event does not bubble up through the shadow DOM as it was not composed.
-     * Therefore, we need to re-dispatch the same event to ensure it is propagated correctly.
-     * Read more: https://developer.mozilla.org/en-US/docs/Web/API/Event/composed
-     */
-    private dispatchChangeEvent;
     /** @internal */
     formResetCallback(): void;
     /** @internal */
@@ -92,7 +86,6 @@ declare class Radio extends Radio_base implements AssociatedFormControl {
      *
      * @param enabledRadios - An array of enabled radio buttons within the same group.
      * @param index - The index of the radio button to be updated within the enabled radios array.
-     * @param event - The event that triggered the update.
      */
     private updateRadio;
     /**

package/dist/components/radio/radio.component.js

@@ -86,15 +86,6 @@ class Radio extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
     getAllRadiosWithinSameGroup() {
         return Array.from(document.querySelectorAll(`mdc-radio[name="${this.name}"]`));
     }
-    /**
-     * The 'change' event does not bubble up through the shadow DOM as it was not composed.
-     * Therefore, we need to re-dispatch the same event to ensure it is propagated correctly.
-     * Read more: https://developer.mozilla.org/en-US/docs/Web/API/Event/composed
-     */
-    dispatchChangeEvent(event) {
-        const EventConstructor = event.constructor;
-        this.dispatchEvent(new EventConstructor(event.type, event));
-    }
     /** @internal */
     formResetCallback() {
         const radios = this.getAllRadiosWithinSameGroup();
@@ -183,7 +174,7 @@ class Radio extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
      * This will toggle the state of the radio element.
      * Dispatches the change event.
      */
-    handleChange(event) {
+    handleChange() {
         var _a;
         if (this.disabled || this.readonly)
             return;
@@ -204,7 +195,7 @@ class Radio extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
         if (inputElement) {
             inputElement.checked = true;
         }
-        this.dispatchChangeEvent(event);
+        this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
     }
     /**
      * Updates the state of the radio button at the specified index within the enabled radios.
@@ -212,12 +203,11 @@ class Radio extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
      *
      * @param enabledRadios - An array of enabled radio buttons within the same group.
      * @param index - The index of the radio button to be updated within the enabled radios array.
-     * @param event - The event that triggered the update.
      */
-    updateRadio(enabledRadios, index, event) {
+    updateRadio(enabledRadios, index) {
         var _a, _b;
         (_b = (_a = enabledRadios[index].shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('input')) === null || _b === void 0 ? void 0 : _b.focus();
-        enabledRadios[index].handleChange(event);
+        enabledRadios[index].handleChange();
     }
     /**
      * Handles the keydown event (Arrow Up/Down/Left/Right) on the radio element.
@@ -232,15 +222,15 @@ class Radio extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
         if (['ArrowDown', 'ArrowRight'].includes(event.key)) {
             // Move focus to the next radio
             const nextIndex = (currentIndex + 1) % enabledRadios.length;
-            this.updateRadio(enabledRadios, nextIndex, event);
+            this.updateRadio(enabledRadios, nextIndex);
         }
         else if (['ArrowUp', 'ArrowLeft'].includes(event.key)) {
             // Move focus to the previous radio
             const prevIndex = (currentIndex - 1 + enabledRadios.length) % enabledRadios.length;
-            this.updateRadio(enabledRadios, prevIndex, event);
+            this.updateRadio(enabledRadios, prevIndex);
         }
         else if (event.key === KEYS.SPACE) {
-            this.updateRadio(enabledRadios, currentIndex, event);
+            this.updateRadio(enabledRadios, currentIndex);
         }
         this.updateTabIndex();
         if (event.key === KEYS.ENTER) {

package/dist/components/select/select.component.js

@@ -349,54 +349,52 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
      * @param event - The keyboard event.
      */
     handlePopoverKeydown(event) {
+        let optionToFocus = null;
         switch (event.key) {
             case KEYS.HOME: {
-                const firstOption = this.getFirstValidOption();
-                this.focusAndUpdateTabIndexes(firstOption);
-                event.preventDefault();
+                optionToFocus = this.getFirstValidOption();
                 break;
             }
             case KEYS.END: {
-                const lastOption = this.getLastValidOption();
-                this.focusAndUpdateTabIndexes(lastOption);
-                event.preventDefault();
+                optionToFocus = this.getLastValidOption();
                 break;
             }
             case KEYS.ARROW_DOWN: {
                 const options = this.getAllValidOptions();
                 const currentIndex = options.findIndex(option => option === event.target);
                 const newIndex = Math.min(currentIndex + 1, options.length - 1);
-                this.focusAndUpdateTabIndexes(options[newIndex]);
-                event.preventDefault();
+                optionToFocus = options[newIndex];
                 break;
             }
             case KEYS.ARROW_UP: {
                 const options = this.getAllValidOptions();
                 const currentIndex = options.findIndex(option => option === event.target);
                 const newIndex = Math.max(currentIndex - 1, 0);
-                this.focusAndUpdateTabIndexes(options[newIndex]);
-                event.preventDefault();
+                optionToFocus = options[newIndex];
                 break;
             }
             case KEYS.PAGE_DOWN: {
                 const options = this.getAllValidOptions();
                 const currentIndex = options.findIndex(option => option === event.target);
                 const newIndex = Math.min(currentIndex + 10, options.length - 1);
-                this.focusAndUpdateTabIndexes(options[newIndex]);
-                event.preventDefault();
+                optionToFocus = options[newIndex];
                 break;
             }
             case KEYS.PAGE_UP: {
                 const options = this.getAllValidOptions();
                 const currentIndex = options.findIndex(option => option === event.target);
                 const newIndex = Math.max(currentIndex - 10, 0);
-                this.focusAndUpdateTabIndexes(options[newIndex]);
-                event.preventDefault();
+                optionToFocus = options[newIndex];
                 break;
             }
             default:
                 break;
         }
+        if (optionToFocus) {
+            this.focusAndUpdateTabIndexes(optionToFocus);
+            event.preventDefault();
+            event.stopPropagation();
+        }
     }
     /**
      * Focuses the given option and updates the tabindex for all options.