@momentum-design/components 0.106.3 → 0.106.5

package/dist/components/listbox/listbox.styles.js

@@ -6,7 +6,7 @@ const styles = css `
     height: inherit;
     width: inherit;
 
-    overflow-y: scroll;
+    overflow-y: auto;
     max-height: var(--mdc-listbox-max-height);
 
     /* prevent focus ring clipping */

package/dist/components/listitem/index.d.ts

@@ -1,5 +1,4 @@
 import '../text';
-import '../tooltip';
 import ListItem from './listitem.component';
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/listitem/index.js

@@ -1,5 +1,4 @@
 import '../text';
-import '../tooltip';
 import ListItem from './listitem.component';
 import { TAG_NAME } from './listitem.constants';
 ListItem.register(TAG_NAME);

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

@@ -1,6 +1,5 @@
 import { CSSResult, PropertyValues, TemplateResult } from 'lit';
 import { Component } from '../../models';
-import type { PopoverPlacement } from '../popover/popover.types';
 import type { TextType } from '../text/text.types';
 import { ListItemVariants } from './listitem.types';
 declare const ListItem_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DisabledMixin").DisabledMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/TabIndexMixin").TabIndexMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/lifecycle/LifeCycleMixin").LifeCycleMixinInterface> & typeof Component;
@@ -15,15 +14,12 @@ declare const ListItem_base: import("../../utils/mixins/index.types").Constructo
  * Based on the leading/trailing slot, the position of the controls and text can be adjusted. <br/>
  * Please use mdc-list as a parent element even when there is only listitem for a11y purpose.
  *
- * By providing the tooltip-text attribute, a tooltip will be displayed on hover of the listitem.
- * The placement of the tooltip can be adjusted using the tooltip-placement attribute.
- * This will be helpful when the listitem text is truncated or
- * when you want to display additional information about the listitem.
+ * **Note**: If a listitem contains a long text, it is recommended to create a tooltip for the listitem that displays the full text on hover.
+ * Consumers need to add a unique ID to this listitem and use that ID in the tooltip's `triggerID` attribute. We are not creating the tooltip automatically, consumers need to add `<mdc-tooltip>` element manually and associate it with the listitem using the `triggerID` attribute.
  *
  * @tagname mdc-listitem
  *
  * @dependency mdc-text
- * @dependency mdc-tooltip
  *
  * @slot leading-controls - slot for list item controls to appear of leading end.
  * @slot leading-text-primary-label - slot for list item primary label.
@@ -105,18 +101,14 @@ declare class ListItem extends ListItem_base {
      * @default undefined
      */
     softDisabled?: boolean;
-    /**
-     * The tooltip text is displayed on hover of the list item.
-     */
-    tooltipText?: string;
-    /**
-     * The tooltip placement of the list item. If the tooltip text is present,
-     * then this tooltip placement will be applied.
-     * @default 'top'
-     */
-    tooltipPlacement: PopoverPlacement;
     constructor();
     connectedCallback(): void;
+    /**
+     * Handles the click event on the list item.
+     * Prevents click when listitem is disabled
+     * @param event - The mouse event triggered when the list item is clicked.
+     */
+    private handleClick;
     /**
      * Fires the click event when the enter or space key is pressed down.
      * This behavior is similar to a button click and key interaction.
@@ -127,21 +119,6 @@ declare class ListItem extends ListItem_base {
      * Triggers a click event on the list item.
      */
     protected triggerClickEvent(): void;
-    /**
-     * Handles the click event on the list item.
-     * If the tooltip is open, it has to be closed first.
-     */
-    private handleClick;
-    /**
-     * Display a tooltip for the listitem.
-     * Create the tooltip programmatically after the nearest parent element.
-     */
-    private displayTooltipForLongText;
-    /**
-     * Removes the dynamically created tooltip for long text label on focus or mouse leave.
-     * This is triggered on focusout and mouseout events.
-     */
-    private hideTooltipOnLeave;
     /**
      * Generates a template for a text slot with the specified content.
      *

package/dist/components/listitem/listitem.component.js

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
-import { nothing, html } from 'lit';
+import { html, nothing } from 'lit';
 import { property, queryAssignedElements } from 'lit/decorators.js';
 import { Component } from '../../models';
 import { KEYS } from '../../utils/keys';
@@ -15,12 +15,10 @@ import { DisabledMixin } from '../../utils/mixins/DisabledMixin';
 import { TabIndexMixin } from '../../utils/mixins/TabIndexMixin';
 import { ROLE } from '../../utils/roles';
 import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
-import { TAG_NAME as TOOLTIP_TAG_NAME } from '../tooltip/tooltip.constants';
 import { LifeCycleMixin } from '../../utils/mixins/lifecycle/LifeCycleMixin';
 import { DEFAULTS } from './listitem.constants';
-import styles from './listitem.styles';
-import { generateListItemId, generateTooltipId } from './listitem.utils';
 import { ListItemEventManager } from './listitem.events';
+import styles from './listitem.styles';
 /**
  * mdc-listitem component is used to display a label with different types of controls.
  * There can be three types of controls, a radio button, a checkbox on the
@@ -32,15 +30,12 @@ import { ListItemEventManager } from './listitem.events';
  * Based on the leading/trailing slot, the position of the controls and text can be adjusted. <br/>
  * Please use mdc-list as a parent element even when there is only listitem for a11y purpose.
  *
- * By providing the tooltip-text attribute, a tooltip will be displayed on hover of the listitem.
- * The placement of the tooltip can be adjusted using the tooltip-placement attribute.
- * This will be helpful when the listitem text is truncated or
- * when you want to display additional information about the listitem.
+ * **Note**: If a listitem contains a long text, it is recommended to create a tooltip for the listitem that displays the full text on hover.
+ * Consumers need to add a unique ID to this listitem and use that ID in the tooltip's `triggerID` attribute. We are not creating the tooltip automatically, consumers need to add `<mdc-tooltip>` element manually and associate it with the listitem using the `triggerID` attribute.
  *
  * @tagname mdc-listitem
  *
  * @dependency mdc-text
- * @dependency mdc-tooltip
  *
  * @slot leading-controls - slot for list item controls to appear of leading end.
  * @slot leading-text-primary-label - slot for list item primary label.
@@ -84,24 +79,25 @@ class ListItem extends DisabledMixin(TabIndexMixin(LifeCycleMixin(Component))) {
          * @default 'full-width'
          */
         this.variant = DEFAULTS.VARIANT;
-        /**
-         * The tooltip placement of the list item. If the tooltip text is present,
-         * then this tooltip placement will be applied.
-         * @default 'top'
-         */
-        this.tooltipPlacement = DEFAULTS.TOOLTIP_PLACEMENT;
         this.addEventListener('keydown', this.handleKeyDown.bind(this));
-        this.addEventListener('focusin', this.displayTooltipForLongText.bind(this));
-        this.addEventListener('mouseenter', this.displayTooltipForLongText.bind(this));
-        this.addEventListener('focusout', this.hideTooltipOnLeave.bind(this));
-        this.addEventListener('mouseout', this.hideTooltipOnLeave.bind(this));
         this.addEventListener('click', this.handleClick.bind(this));
     }
     connectedCallback() {
         super.connectedCallback();
         this.role = this.role || ROLE.LISTITEM;
-        // Add a unique id to the listitem if it does not have one.
-        this.id = this.id || generateListItemId();
+    }
+    /**
+     * Handles the click event on the list item.
+     * Prevents click when listitem is disabled
+     * @param event - The mouse event triggered when the list item is clicked.
+     */
+    handleClick(event) {
+        if (this.disabled) {
+            // when disabled, prevent the click event from propagating
+            // and from firing on the host (immediate)
+            event.stopImmediatePropagation();
+            event.preventDefault();
+        }
     }
     /**
      * Fires the click event when the enter or space key is pressed down.
@@ -125,57 +121,6 @@ class ListItem extends DisabledMixin(TabIndexMixin(LifeCycleMixin(Component))) {
         });
         this.dispatchEvent(clickEvent);
     }
-    /**
-     * Handles the click event on the list item.
-     * If the tooltip is open, it has to be closed first.
-     */
-    handleClick(event) {
-        if (this.disabled) {
-            // when disabled, prevent the click event from propagating
-            // and from firing on the host (immediate)
-            event.stopImmediatePropagation();
-            event.preventDefault();
-            return;
-        }
-        // If the tooltip is open, it has to be closed first.
-        this.hideTooltipOnLeave();
-    }
-    /**
-     * Display a tooltip for the listitem.
-     * Create the tooltip programmatically after the nearest parent element.
-     */
-    displayTooltipForLongText() {
-        var _a, _b;
-        if (!this.tooltipText) {
-            return;
-        }
-        // Remove any existing tooltip.
-        this.hideTooltipOnLeave();
-        // Create tooltip for the listitem element.
-        const tooltip = document.createElement(TOOLTIP_TAG_NAME);
-        tooltip.id = generateTooltipId();
-        tooltip.textContent = this.tooltipText;
-        tooltip.setAttribute('triggerid', this.id);
-        tooltip.setAttribute('placement', this.tooltipPlacement);
-        tooltip.setAttribute('visible', '');
-        tooltip.setAttribute('show-arrow', '');
-        // Set the slot attribute if the parent element has a slot.
-        if ((_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.hasAttribute('slot')) {
-            tooltip.setAttribute('slot', this.parentElement.getAttribute('slot') || '');
-        }
-        // Attach the tooltip programmatically after the nearest parent element.
-        (_b = this.parentElement) === null || _b === void 0 ? void 0 : _b.after(tooltip);
-    }
-    /**
-     * Removes the dynamically created tooltip for long text label on focus or mouse leave.
-     * This is triggered on focusout and mouseout events.
-     */
-    hideTooltipOnLeave() {
-        const existingTooltip = document.querySelector(`${TOOLTIP_TAG_NAME}[triggerid="${this.id}"]`);
-        if (existingTooltip) {
-            existingTooltip.remove();
-        }
-    }
     /**
      * Generates a template for a text slot with the specified content.
      *
@@ -320,12 +265,4 @@ __decorate([
     property({ type: Boolean, reflect: true, attribute: 'soft-disabled' }),
     __metadata("design:type", Boolean)
 ], ListItem.prototype, "softDisabled", void 0);
-__decorate([
-    property({ type: String, reflect: true, attribute: 'tooltip-text' }),
-    __metadata("design:type", String)
-], ListItem.prototype, "tooltipText", void 0);
-__decorate([
-    property({ type: String, reflect: true, attribute: 'tooltip-placement' }),
-    __metadata("design:type", String)
-], ListItem.prototype, "tooltipPlacement", void 0);
 export default ListItem;

package/dist/components/listitem/listitem.constants.d.ts

@@ -6,6 +6,5 @@ declare const LISTITEM_VARIANTS: {
 };
 declare const DEFAULTS: {
     readonly VARIANT: "full-width";
-    readonly TOOLTIP_PLACEMENT: "top";
 };
 export { DEFAULTS, TAG_NAME, LISTITEM_VARIANTS };

package/dist/components/listitem/listitem.constants.js

@@ -1,5 +1,4 @@
 import utils from '../../utils/tag-name';
-import { POPOVER_PLACEMENT } from '../popover/popover.constants';
 const TAG_NAME = utils.constructTagName('listitem');
 const LISTITEM_VARIANTS = {
     FULL_WIDTH: 'full-width',
@@ -8,6 +7,5 @@ const LISTITEM_VARIANTS = {
 };
 const DEFAULTS = {
     VARIANT: LISTITEM_VARIANTS.FULL_WIDTH,
-    TOOLTIP_PLACEMENT: POPOVER_PLACEMENT.TOP,
 };
 export { DEFAULTS, TAG_NAME, LISTITEM_VARIANTS };

package/dist/components/menuitem/index.d.ts

@@ -1,6 +1,5 @@
 import '../icon';
 import '../text';
-import '../tooltip';
 import MenuItem from './menuitem.component';
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/menuitem/index.js

@@ -1,6 +1,5 @@
 import '../icon';
 import '../text';
-import '../tooltip';
 import MenuItem from './menuitem.component';
 import { TAG_NAME } from './menuitem.constants';
 MenuItem.register(TAG_NAME);

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

@@ -13,9 +13,11 @@ import type { ArrowPositions, ArrowDirections } from './menuitem.types';
  *
  * Menu item has `name` and `value` attribute that can be used to identify the menu item when it is selected.
  *
+ * **Note**: If a menuitem contains a long text, it is recommended to create a tooltip for the menuitem that displays the full text on hover.
+ * Consumers need to add a unique ID to this menuitem and use that ID in the tooltip's `triggerID` attribute. We are not creating the tooltip automatically, consumers need to add `<mdc-tooltip>` element manually and associate it with the menuitem using the `triggerID` attribute.
+ *
  * @dependency mdc-text
  * @dependency mdc-icon
- * @dependency mdc-tooltip
  *
  * @tagname mdc-menuitem
  *

package/dist/components/menuitem/menuitem.component.js

@@ -27,9 +27,11 @@ import styles from './menuitem.styles';
  *
  * Menu item has `name` and `value` attribute that can be used to identify the menu item when it is selected.
  *
+ * **Note**: If a menuitem contains a long text, it is recommended to create a tooltip for the menuitem that displays the full text on hover.
+ * Consumers need to add a unique ID to this menuitem and use that ID in the tooltip's `triggerID` attribute. We are not creating the tooltip automatically, consumers need to add `<mdc-tooltip>` element manually and associate it with the menuitem using the `triggerID` attribute.
+ *
  * @dependency mdc-text
  * @dependency mdc-icon
- * @dependency mdc-tooltip
  *
  * @tagname mdc-menuitem
  *

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

@@ -10,6 +10,8 @@ declare const NavMenuItem_base: import("../../utils/mixins/index.types").Constru
  * component. Its structure, spacing, and interactions are designed to align with
  * the visual and functional requirements of side navigation layouts.
  *
+ * By providing the tooltip-text attribute, a tooltip will be displayed on hover of the navmenuitem. This tooltip is useful when an active navmenuitem is present within a submenu of the sidenavigation component.
+ *
  * @tagname mdc-navmenuitem
  *
  * @dependency mdc-icon
@@ -82,6 +84,10 @@ declare class NavMenuItem extends NavMenuItem_base {
      * The active button styling will still be applied regardless of this setting.
      */
     disableAriaCurrent?: boolean;
+    /**
+     * The tooltip text is displayed on hover of the list item.
+     */
+    tooltipText?: string;
     /**
      * @internal
      */
@@ -92,7 +98,10 @@ declare class NavMenuItem extends NavMenuItem_base {
     private readonly sideNavigationContext;
     constructor();
     connectedCallback(): void;
+    disconnectedCallback(): void;
     protected updated(): void;
+    private removeTooltip;
+    private renderDynamicTooltip;
     /**
      * Check whether the navmenuitem is inside a nested nav structure.
      * Returns `true` if there is a parent `mdc-menupopover`

package/dist/components/navmenuitem/navmenuitem.component.js

@@ -10,6 +10,7 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { v4 } from 'uuid';
 import providerUtils from '../../utils/provider';
 import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
 import { TAG_NAME as MENUPOPOVER_TAGNAME } from '../menupopover/menupopover.constants';
@@ -17,6 +18,7 @@ import { IconNameMixin } from '../../utils/mixins/IconNameMixin';
 import MenuItem from '../menuitem/menuitem.component';
 import { getIconNameWithoutStyle } from '../button/button.utils';
 import SideNavigation from '../sidenavigation/sidenavigation.component';
+import { TAG_NAME as TOOLTIP_TAG_NAME } from '../tooltip/tooltip.constants';
 import { DEFAULTS, ALLOWED_BADGE_TYPES, ICON_NAME } from './navmenuitem.constants';
 import styles from './navmenuitem.styles';
 /**
@@ -27,6 +29,8 @@ import styles from './navmenuitem.styles';
  * component. Its structure, spacing, and interactions are designed to align with
  * the visual and functional requirements of side navigation layouts.
  *
+ * By providing the tooltip-text attribute, a tooltip will be displayed on hover of the navmenuitem. This tooltip is useful when an active navmenuitem is present within a submenu of the sidenavigation component.
+ *
  * @tagname mdc-navmenuitem
  *
  * @dependency mdc-icon
@@ -82,17 +86,24 @@ class NavMenuItem extends IconNameMixin(MenuItem) {
             this.dispatchEvent(event);
         };
         this.addEventListener('click', this.handleClickEvent.bind(this));
+        this.addEventListener('focusin', this.renderDynamicTooltip.bind(this));
+        this.addEventListener('mouseenter', this.renderDynamicTooltip.bind(this));
+        this.addEventListener('focusout', this.removeTooltip.bind(this));
+        this.addEventListener('mouseout', this.removeTooltip.bind(this));
     }
     connectedCallback() {
         super.connectedCallback();
         this.variant = undefined;
-        this.tooltipPlacement = undefined;
         if (!this.navId && this.onerror) {
             this.onerror('[mdc-navmenuitem] navId is required and was not provided.');
         }
         // Set in-menupopover attribute if nested
         this.toggleAttribute('in-menupopover', this.isNested());
     }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeTooltip();
+    }
     updated() {
         var _a, _b;
         const context = (_a = this.sideNavigationContext) === null || _a === void 0 ? void 0 : _a.value;
@@ -110,6 +121,35 @@ class NavMenuItem extends IconNameMixin(MenuItem) {
             this.setAttribute('aria-label', label);
         }
     }
+    removeTooltip() {
+        // Remove any existing tooltip.
+        const existingTooltip = document.querySelector(`${TOOLTIP_TAG_NAME}[triggerid="${this.id}"]`);
+        if (existingTooltip) {
+            existingTooltip.remove();
+        }
+    }
+    renderDynamicTooltip() {
+        if (!this.tooltipText) {
+            return;
+        }
+        if (!this.id) {
+            this.id = `mdc-navmenuitem-${v4()}`;
+        }
+        this.removeTooltip();
+        // Create tooltip for the listitem element.
+        const tooltip = document.createElement(TOOLTIP_TAG_NAME);
+        tooltip.id = `mdc-navmenuitem-tooltip-${v4()}`;
+        tooltip.textContent = this.tooltipText;
+        tooltip.setAttribute('triggerid', this.id);
+        tooltip.setAttribute('visible', '');
+        tooltip.setAttribute('show-arrow', '');
+        // Set the slot attribute if the parent element has a slot.
+        if (this.hasAttribute('slot')) {
+            tooltip.setAttribute('slot', this.getAttribute('slot') || '');
+        }
+        // Attach the tooltip programmatically after the nearest parent element.
+        this.after(tooltip);
+    }
     /**
      * Check whether the navmenuitem is inside a nested nav structure.
      * Returns `true` if there is a parent `mdc-menupopover`
@@ -238,4 +278,8 @@ __decorate([
     property({ type: Boolean, reflect: true, attribute: 'disable-aria-current' }),
     __metadata("design:type", Boolean)
 ], NavMenuItem.prototype, "disableAriaCurrent", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'tooltip-text' }),
+    __metadata("design:type", String)
+], NavMenuItem.prototype, "tooltipText", void 0);
 export default NavMenuItem;

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

@@ -1,6 +1,5 @@
 import '../icon';
 import '../text';
-import '../tooltip';
 import Option from './option.component';
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/option/index.js

@@ -1,6 +1,5 @@
 import '../icon';
 import '../text';
-import '../tooltip';
 import Option from './option.component';
 import { TAG_NAME } from './option.constants';
 Option.register(TAG_NAME);

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

@@ -13,12 +13,12 @@ declare const Option_base: import("../../utils/mixins/index.types").Constructor<
  * 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.
+ *
+ * **Note**: If an option contains a long text, it is recommended to create a tooltip for the option that displays the full text on hover.
+ * Consumers need to add a unique ID to this option and use that ID in the tooltip's `triggerID` attribute. We are not creating the tooltip automatically, consumers need to add `<mdc-tooltip>` element manually and associate it with the option using the `triggerID` attribute.
  *
  * @dependency mdc-icon
  * @dependency mdc-text
- * @dependency mdc-tooltip
  *
  * @tagname mdc-option
  *

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

@@ -27,12 +27,12 @@ import styles from './option.styles';
  * 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.
+ *
+ * **Note**: If an option contains a long text, it is recommended to create a tooltip for the option that displays the full text on hover.
+ * Consumers need to add a unique ID to this option and use that ID in the tooltip's `triggerID` attribute. We are not creating the tooltip automatically, consumers need to add `<mdc-tooltip>` element manually and associate it with the option using the `triggerID` attribute.
  *
  * @dependency mdc-icon
  * @dependency mdc-text
- * @dependency mdc-tooltip
  *
  * @tagname mdc-option
  *

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

@@ -8,8 +8,6 @@ declare const Select_base: import("../../utils/mixins/index.types").Constructor<
 /**
  * The mdc-select component is a dropdown selection control that allows users to pick an option from a predefined list.
  * It is designed to work with `mdc-option` for individual options and `mdc-optgroup` for grouping related options.
- * 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.
  *
@@ -17,6 +15,8 @@ declare const Select_base: import("../../utils/mixins/index.types").Constructor<
  *
  * **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.
  *
+ * If you need to use `mdc-tooltip` with any options, make sure to place the tooltip component outside the `mdc-select` element.
+ *
  * @dependency mdc-button
  * @dependency mdc-icon
  * @dependency mdc-popover

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

@@ -25,8 +25,6 @@ import styles from './select.styles';
 /**
  * The mdc-select component is a dropdown selection control that allows users to pick an option from a predefined list.
  * It is designed to work with `mdc-option` for individual options and `mdc-optgroup` for grouping related options.
- * 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.
  *
@@ -34,6 +32,8 @@ import styles from './select.styles';
  *
  * **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.
  *
+ * If you need to use `mdc-tooltip` with any options, make sure to place the tooltip component outside the `mdc-select` element.
+ *
  * @dependency mdc-button
  * @dependency mdc-icon
  * @dependency mdc-popover