@momentum-design/components 0.95.0 → 0.95.1

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

@@ -3,9 +3,17 @@ import type { IconNames } from '../icon/icon.types';
 import ListItem from '../listitem/listitem.component';
 declare const Option_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/FormInternalsMixin").FormInternalsMixinInterface> & typeof ListItem;
 /**
- * option component, which is used as a list item in a select component.<br/>
- * We can pass an icon which will be displayed in leading position of the option label text.
- * We can pass a tooltip which will be displayed on hover of the option label text.
+ * Option component, which is used within Selectlistbox within Select component.
+ *
+ * The label and secondary label of the option can be set using the `label` and `secondaryLabel` properties respectively.
+ * The `label` is the primary text displayed in the option, while the `secondaryLabel` is the secondary text displayed below the primary label.
+ *
+ * The `selected` property is used to indicate whether the option is selected or not.
+ * When the `selected` property is set to true, a checkmark icon will be displayed
+ * on the right side of the option to indicate that it is selected.
+ *
+ * The `prefixIcon` property can be used to display an icon on the left side of the option label.
+ * We can show a tooltip by setting `tooltip-text` attribute. This will be displayed on hover or focus of the option.
  * The tooltip will be helpful for a long label text which is truncated with ellipsis.
  *
  * @dependency mdc-icon
@@ -14,8 +22,6 @@ declare const Option_base: import("../../utils/mixins/index.types").Constructor<
  *
  * @tagname mdc-option
  *
- * @slot default - This is a default/unnamed slot
- *
  * @event click - (React: onClick) This event is dispatched when the option is clicked.
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the option.
  * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the option.
@@ -35,12 +41,6 @@ declare class Option extends Option_base {
      */
     ariaLabel: string | null;
     connectedCallback(): void;
-    /**
-     * Listens to changes in the default slot and updates the label of the option accordingly.
-     * This is used to set the label of the option when it is not explicitly set.
-     * It is called internally when the slot is changed.
-     */
-    private handleDefaultSlotChange;
     update(changedProperties: PropertyValues): void;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;

package/dist/components/option/option.component.js

@@ -17,9 +17,17 @@ import { TYPE } from '../text/text.constants';
 import { SELECTED_ICON_NAME } from './option.constants';
 import styles from './option.styles';
 /**
- * option component, which is used as a list item in a select component.<br/>
- * We can pass an icon which will be displayed in leading position of the option label text.
- * We can pass a tooltip which will be displayed on hover of the option label text.
+ * Option component, which is used within Selectlistbox within Select component.
+ *
+ * The label and secondary label of the option can be set using the `label` and `secondaryLabel` properties respectively.
+ * The `label` is the primary text displayed in the option, while the `secondaryLabel` is the secondary text displayed below the primary label.
+ *
+ * The `selected` property is used to indicate whether the option is selected or not.
+ * When the `selected` property is set to true, a checkmark icon will be displayed
+ * on the right side of the option to indicate that it is selected.
+ *
+ * The `prefixIcon` property can be used to display an icon on the left side of the option label.
+ * We can show a tooltip by setting `tooltip-text` attribute. This will be displayed on hover or focus of the option.
  * The tooltip will be helpful for a long label text which is truncated with ellipsis.
  *
  * @dependency mdc-icon
@@ -28,8 +36,6 @@ import styles from './option.styles';
  *
  * @tagname mdc-option
  *
- * @slot default - This is a default/unnamed slot
- *
  * @event click - (React: onClick) This event is dispatched when the option is clicked.
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the option.
  * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the option.
@@ -55,22 +61,9 @@ class Option extends FormInternalsMixin(ListItem) {
         this.setAttribute('aria-disabled', `${!!this.disabled}`);
         // Option will not contain below fields
         this.name = undefined;
-        this.secondaryLabel = undefined;
         this.sideHeaderText = undefined;
         this.sublineText = undefined;
     }
-    /**
-     * Listens to changes in the default slot and updates the label of the option accordingly.
-     * This is used to set the label of the option when it is not explicitly set.
-     * It is called internally when the slot is changed.
-     */
-    handleDefaultSlotChange() {
-        var _a, _b, _c;
-        const slot = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
-        if (slot && !this.label) {
-            this.label = (_c = (_b = slot.assignedNodes()[0]) === null || _b === void 0 ? void 0 : _b.textContent) === null || _c === void 0 ? void 0 : _c.trim();
-        }
-    }
     update(changedProperties) {
         super.update(changedProperties);
         if (changedProperties.has('selected')) {
@@ -92,9 +85,9 @@ class Option extends FormInternalsMixin(ListItem) {
       ${prefixIconContent}
       <div part="leading-text">
         ${this.getText('leading-text-primary-label', TYPE.BODY_MIDSIZE_REGULAR, this.label)}
+        ${this.getText('leading-text-secondary-label', TYPE.BODY_SMALL_REGULAR, this.secondaryLabel)}
       </div>
       <div part="trailing">${selectedIcon}</div>
-      <slot part="default-slot" @slotchange="${this.handleDefaultSlotChange}"></slot>
     `;
     }
 }

package/dist/components/popover/popover.component.js

@@ -278,7 +278,8 @@ class Popover extends PreventScrollMixin(FocusTrapMixin(Component)) {
                 return;
             let insidePopoverClick = false;
             const path = event.composedPath();
-            insidePopoverClick = this.contains(event.target) || path.includes(this.triggerElement);
+            insidePopoverClick =
+                this.contains(event.target) || path.includes(this.triggerElement) || path.includes(this);
             const clickedOnBackdrop = this.backdropElement ? path.includes(this.backdropElement) : false;
             if (!insidePopoverClick || clickedOnBackdrop) {
                 this.hidePopover();

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

@@ -2,7 +2,7 @@ import type { PropertyValues } from 'lit';
 import { CSSResult } from 'lit';
 import { AssociatedFormControl } from '../../utils/mixins/FormInternalsMixin';
 import FormfieldWrapper from '../formfieldwrapper/formfieldwrapper.component';
-import type { IconNames } from '../icon/icon.types';
+import type Option from '../option/option.component';
 import type { Placement } from './select.types';
 declare const Select_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/FormInternalsMixin").FormInternalsMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & typeof FormfieldWrapper;
 /**
@@ -11,6 +11,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.
  *
+ * Every mdc-option should have a `value` attribute set to ensure proper form submission.
+ *
  * To set a default option, use the `selected` attribute on the `mdc-option` element.
  *
  * **Note:** Make sure to add `mdc-selectlistbox` as a child of `mdc-select` and wrap options/optgroup in it to ensure proper accessibility functionality. Read more about it in SelectListBox documentation.
@@ -23,7 +25,7 @@ declare const Select_base: import("../../utils/mixins/index.types").Constructor<
  *
  * @tagname mdc-select
  *
- * @slot default - This is a default/unnamed slot for options and/or option group.
+ * @slot default - This is a default/unnamed slot for Selectlistbox including options and/or option group.
  *
  * @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.
@@ -62,20 +64,24 @@ declare class Select extends Select_base implements AssociatedFormControl {
     /** @internal */
     slottedListboxes: Array<HTMLElement>;
     /** @internal */
-    private baseIconName;
-    /** @internal */
-    selectedValueText?: string;
-    /** @internal */
-    selectedIcon?: IconNames | null;
+    private visualCombobox;
     /** @internal */
-    selectedValue: string;
+    selectedOption?: Option | null;
     /** @internal */
     displayPopover: boolean;
+    /** @internal */
+    private initialSelectedOption;
+    private getAllValidOptions;
+    private getFirstValidOption;
+    private getLastValidOption;
+    private getFirstSelectedOption;
     /**
-     * @internal
-     * The native select element
+     * Handles the first updated lifecycle event.
+     * If an option is selected, use that as the value.
+     * If not, use the placeholder if it exists, otherwise use the first option.
      */
-    inputElement: HTMLInputElement;
+    firstUpdated(): Promise<void>;
+    updated(changedProperties: PropertyValues): void;
     /**
      * Modifies the listbox wrapper to ensure it has the correct attributes
      * and IDs for accessibility.
@@ -86,43 +92,53 @@ declare class Select extends Select_base implements AssociatedFormControl {
      */
     private modifyListBoxWrapper;
     /**
-     * A helper function which returns a flattened array of all valid options from within the slotted listbox.
-     * It takes care of the edge cases where the option is either a direct child or a
-     * child of an option group.
+     * A private method which is called when an option is clicked.
+     * It sets the selected option, removes selected from other options, updates the tabindex for all options,
+     * closes the popover, and fires the change and input events.
+     * @param event - The event which triggered this function.
      */
-    private getAllValidOptions;
+    private handleOptionsClick;
+    /**
+     * Sets the selected option in the component state and updates the input element's value.
+     * This method ensures that only the selected option is marked as selected in the DOM,
+     * and updates the tabindex for all options accordingly.
+     * It also updates the validity of the input element based on the selected option.
+     * This method is called when an option is selected.
+     *
+     * @param option - The option element in DOM which gets selected.
+     */
+    private setSelectedOption;
     /**
-     * Updates the tabindex and selected attribute of the options.
-     * If selectedOption is provided, it will be set as the selected option.
-     * Otherwise, it will set the first option as the selected option.
-     * @param selectedOption - The option which should be selected.
+     * Updates the tabindex of all options.
+     * Sets the tabindex of the selected option to '0' and others to '-1'.
+     *
+     * @param option - The option which tabIndex should be set to 0.
      */
     private updateTabIndexForAllOptions;
     /**
-     * A private method which is called when an option is clicked.
-     * It is used to update the tabindex and selected attribute of the options.
-     * @param event - The event which triggered this function.
+     * Sets selected attribute on the selected option and removes it from all options
+     * @param selectedOption - The option which gets selected
      */
-    private handleOptionsClick;
+    private updateSelectedInChildOptions;
     /**
-     * Sets the selected value based on the provided option element.
-     * It retrieves the 'label' attribute of the option, if present,
-     * otherwise it falls back to the option's text content.
-     * @param option - The option element from which to set the selected value.
+     * A private method which is called to fire the change and input events.
+     * It dispatches the input and change events with the selected option's value and label.
      */
-    private setSelectedValue;
+    private fireEvents;
     /**
-     * Manages the required state of the select.
-     * If the select is required and no value is selected,
-     * it sets a custom validity message based on the validationMessage property.
-     * If the select is not required or a value is selected, it clears the custom validity.
-     * This method is called to ensure that the select behaves correctly in forms.
+     * Sets the validity of the input element based on the selected option.
+     * If the selected option is not set and the select is required,
+     * it sets a custom validation message.
+     * If the selected option is set or the select is not required,
+     * it clears the custom validation message.
+     * This method is called to ensure that the select component behaves correctly
+     * in form validation scenarios, especially when the select is required.
      * @internal
      */
-    private manageRequired;
+    private setInputValidity;
     /**
+     * Resets the select to its initially selected option.
      * @internal
-     * Resets the select to its initial state.
      */
     formResetCallback(): void;
     /** @internal */
@@ -130,15 +146,12 @@ declare class Select extends Select_base implements AssociatedFormControl {
     private dispatchChange;
     private dispatchInput;
     /**
-     * Handles the keydown event on the select element when the popover is open.
-     * The options are as follows:
-     * - SPACE or ENTER: Selects the currently active option and closes the popover.
-     * - HOME: Sets focus and tabindex on the first option.
-     * - END: Sets focus and tabindex on the last option.
-     * - ARROW_DOWN, ARROW_UP, PAGE_DOWN, PAGE_UP: Handles navigation between options.
-     * @param event - The keyboard event.
+     * Handles the click event on the visual combobox.
+     * If the select is disabled, soft-disabled or readonly, it does nothing.
+     * If the popover is already open, it closes it.
+     * If it is closed, it opens it.
+     * @param event - The mouse event which triggered this function.
      */
-    private handlePopoverOnOpen;
     private handleClickCombobox;
     /**
      * Handles the keydown event on the select element when the popover is closed.
@@ -151,36 +164,29 @@ declare class Select extends Select_base implements AssociatedFormControl {
      */
     private handleKeydownCombobox;
     /**
-     * Handles the navigation of options when the user presses
-     * ArrowUp, ArrowDown, PageUp, or PageDown keys.
-     * @param event - The keyboard event that triggered the navigation.
+     * Handles the keydown event on the select element when the popover is open.
+     * The options are as follows:
+     * - HOME: Sets focus and tabindex on the first option.
+     * - END: Sets focus and tabindex on the last option.
+     * - ARROW_DOWN, ARROW_UP, PAGE_DOWN, PAGE_UP: Handles navigation between options.
+     * @param event - The keyboard event.
      */
-    private handleOptionsNavigation;
+    private handlePopoverKeydown;
     /**
-     * Calculates the new index based on the pressed navigation key.
-     * Supports ArrowUp, ArrowDown, PageUp, and PageDown keys for navigating options.
-     * - ArrowDown: Moves focus to the next option, if available.
-     * - ArrowUp: Moves focus to the previous option, if available.
-     * - PageDown: Moves focus 10 options down or to the last option.
-     * - PageUp: Moves focus 10 options up or to the first option.
-     *
-     * @param key - The navigation key that was pressed.
-     * @param currentIndex - The current index of the focused option.
-     * @param optionsLength - The total number of options.
-     * @returns The new index to focus on, or -1 if no movement is possible.
+     * Focuses the given option and updates the tabindex for all options.
+     * @param option - The option to focus.
+     * @internal
      */
-    private getNewIndexBasedOnKey;
-    private setFocusAndTabIndex;
-    private openPopover;
-    private closePopover;
+    private focusAndUpdateTabIndexes;
     /**
-     * Handles the first updated lifecycle event.
-     * If an option is selected, use that as the value.
-     * If not, use the placeholder if it exists, otherwise use the first option.
+     * If the native input is focused, it will focus the visual combobox.
+     * This is to ensure that the visual combobox is focused when the native input is focused.
+     * For example when a form is submitted and the native input is focused,
+     * we want to focus the visual combobox so that the user can see the selected option
+     * and can interact with it.
+     * @internal
      */
-    firstUpdated(): Promise<void>;
-    updated(changedProperties: PropertyValues): void;
-    private handleOnChange;
+    private handleNativeInputFocus;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;
 }