@momentum-design/components 0.87.0 → 0.87.2

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

@@ -10,6 +10,8 @@ declare const Select_base: import("../../utils/mixins/index.types").Constructor<
  * The component ensures accessibility and usability while handling various use cases,
  * including long text truncation with tooltip support.
  *
+ * To set a default option, use the `selected` attribute on the `mdc-option` element.
+ *
  * @dependency mdc-button
  * @dependency mdc-icon
  * @dependency mdc-popover
@@ -22,6 +24,7 @@ declare const Select_base: import("../../utils/mixins/index.types").Constructor<
  *
  * @event click - (React: onClick) This event is dispatched when the select is clicked.
  * @event change - (React: onChange) This event is dispatched when the select is changed.
+ * @event input - (React: onInput) This event is dispatched when the select is changed.
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the select.
  * @event focus - (React: onFocus) This event is dispatched when the select receives focus.
  */
@@ -60,7 +63,6 @@ declare class Select extends Select_base implements AssociatedFormControl {
      * The native select element
      */
     inputElement: HTMLInputElement;
-    connectedCallback(): void;
     /**
      * A helper function which returns a flattened array of all valid options from the assigned slot.
      * It takes care of the edge cases where the option is either a direct child or a
@@ -106,6 +108,7 @@ declare class Select extends Select_base implements AssociatedFormControl {
     /** @internal */
     formStateRestoreCallback(state: string): void;
     private dispatchChange;
+    private dispatchInput;
     /**
      * Handles the keydown event on the select element when the popover is open.
      * The options are as follows:

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

@@ -28,6 +28,8 @@ import styles from './select.styles';
  * The component ensures accessibility and usability while handling various use cases,
  * including long text truncation with tooltip support.
  *
+ * To set a default option, use the `selected` attribute on the `mdc-option` element.
+ *
  * @dependency mdc-button
  * @dependency mdc-icon
  * @dependency mdc-popover
@@ -40,6 +42,7 @@ import styles from './select.styles';
  *
  * @event click - (React: onClick) This event is dispatched when the select is clicked.
  * @event change - (React: onChange) This event is dispatched when the select is changed.
+ * @event input - (React: onInput) This event is dispatched when the select is changed.
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the select.
  * @event focus - (React: onFocus) This event is dispatched when the select receives focus.
  */
@@ -66,11 +69,6 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
         /** @internal */
         this.activeDescendant = '';
     }
-    connectedCallback() {
-        super.connectedCallback();
-        // select will only contain name and value will be defined in the options.
-        this.value = undefined;
-    }
     /**
      * A helper function which returns a flattened array of all valid options from the assigned slot.
      * It takes care of the edge cases where the option is either a direct child or a
@@ -142,10 +140,12 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
         this.selectedValueText = (_b = (_a = option === null || option === void 0 ? void 0 : option.getAttribute('label')) !== null && _a !== void 0 ? _a : option === null || option === void 0 ? void 0 : option.textContent) !== null && _b !== void 0 ? _b : '';
         this.selectedIcon = option === null || option === void 0 ? void 0 : option.getAttribute('prefix-icon');
         this.selectedValue = (_d = (_c = option === null || option === void 0 ? void 0 : option.getAttribute('value')) !== null && _c !== void 0 ? _c : option === null || option === void 0 ? void 0 : option.textContent) !== null && _d !== void 0 ? _d : '';
+        this.value = this.selectedValue;
         // Set form value
         this.internals.setFormValue(this.selectedValue);
         this.manageRequired();
         // dispatch a change event when a value is selected
+        this.dispatchInput(this.selectedValue);
         this.dispatchChange(this.selectedValue);
     }
     /**
@@ -196,6 +196,16 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
             bubbles: true,
         }));
     }
+    dispatchInput(value) {
+        if (!value) {
+            return;
+        }
+        this.dispatchEvent(new CustomEvent('input', {
+            detail: { value },
+            composed: true,
+            bubbles: true,
+        }));
+    }
     /**
      * Handles the keydown event on the select element when the popover is open.
      * The options are as follows:
@@ -215,12 +225,10 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
                 break;
             }
             case KEYS.SPACE:
-                this.updateTabIndexForAllOptions(event.target);
                 this.closePopover();
                 event.preventDefault();
                 break;
             case KEYS.ENTER:
-                this.updateTabIndexForAllOptions(event.target);
                 this.closePopover();
                 event.preventDefault();
                 // if the popover is closed, then we submit the form.

package/dist/components/select/select.types.d.ts

@@ -3,6 +3,7 @@ import { ARROW_ICON } from './select.constants';
 interface Events {
     onClickEvent: MouseEvent;
     onChangeEvent: Event;
+    onInputEvent: Event;
     onKeyDownEvent: KeyboardEvent;
     onFocusEvent: FocusEvent;
 }