@momentum-design/components 0.106.4 → 0.106.6

package/dist/react/index.d.ts

@@ -13,14 +13,13 @@ 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 CardCheckbox } from './cardcheckbox';
 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 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';
@@ -33,8 +32,9 @@ export { default as InputChip } from './inputchip';
 export { default as Link } from './link';
 export { default as LinkButton } from './linkbutton';
 export { default as Linksimple } from './linksimple';
-export { default as List } from './list';
+export { default as Combobox } from './combobox';
 export { default as ListBox } from './listbox';
+export { default as List } from './list';
 export { default as Listheader } from './listheader';
 export { default as ListItem } from './listitem';
 export { default as Marker } from './marker';
@@ -59,8 +59,8 @@ export { default as Searchfield } from './searchfield';
 export { default as Select } from './select';
 export { default as Selectlistbox } from './selectlistbox';
 export { default as SideNavigation } from './sidenavigation';
-export { default as Slider } from './slider';
 export { default as Skeleton } from './skeleton';
+export { default as Slider } from './slider';
 export { default as Spinner } from './spinner';
 export { default as StaticCheckbox } from './staticcheckbox';
 export { default as StaticRadio } from './staticradio';

package/dist/react/index.js

@@ -13,14 +13,13 @@ 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 CardCheckbox } from './cardcheckbox';
 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 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';
@@ -33,8 +32,9 @@ export { default as InputChip } from './inputchip';
 export { default as Link } from './link';
 export { default as LinkButton } from './linkbutton';
 export { default as Linksimple } from './linksimple';
-export { default as List } from './list';
+export { default as Combobox } from './combobox';
 export { default as ListBox } from './listbox';
+export { default as List } from './list';
 export { default as Listheader } from './listheader';
 export { default as ListItem } from './listitem';
 export { default as Marker } from './marker';
@@ -59,8 +59,8 @@ export { default as Searchfield } from './searchfield';
 export { default as Select } from './select';
 export { default as Selectlistbox } from './selectlistbox';
 export { default as SideNavigation } from './sidenavigation';
-export { default as Slider } from './slider';
 export { default as Skeleton } from './skeleton';
+export { default as Slider } from './slider';
 export { default as Spinner } from './spinner';
 export { default as StaticCheckbox } from './staticcheckbox';
 export { default as StaticRadio } from './staticradio';

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

@@ -11,15 +11,12 @@ import Component from '../../components/listitem';
  * 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.

package/dist/react/listitem/index.js

@@ -13,15 +13,12 @@ import { TAG_NAME } from '../../components/listitem/listitem.constants';
  * 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.

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

@@ -12,9 +12,11 @@ import Component from '../../components/menuitem';
  *
  * 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/react/menuitem/index.js

@@ -14,9 +14,11 @@ import { TAG_NAME } from '../../components/menuitem/menuitem.constants';
  *
  * 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/react/navmenuitem/index.d.ts

@@ -8,6 +8,8 @@ import Component from '../../components/navmenuitem';
  * 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

package/dist/react/navmenuitem/index.js

@@ -10,6 +10,8 @@ import { TAG_NAME } from '../../components/navmenuitem/navmenuitem.constants';
  * 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

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

@@ -11,12 +11,12 @@ import Component from '../../components/option';
  * 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/react/option/index.js

@@ -13,12 +13,12 @@ import { TAG_NAME } from '../../components/option/option.constants';
  * 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/react/select/index.d.ts

@@ -3,8 +3,6 @@ import Component from '../../components/select';
 /**
  * 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.
  *
@@ -12,6 +10,8 @@ import Component from '../../components/select';
  *
  * **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/react/select/index.js

@@ -5,8 +5,6 @@ import { TAG_NAME } from '../../components/select/select.constants';
 /**
  * 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.
  *
@@ -14,6 +12,8 @@ import { TAG_NAME } from '../../components/select/select.constants';
  *
  * **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/package.json

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

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

@@ -1,3 +0,0 @@
-declare const generateTooltipId: () => string;
-declare const generateListItemId: () => string;
-export { generateTooltipId, generateListItemId };

package/dist/components/listitem/listitem.utils.js

@@ -1,4 +0,0 @@
-import { v4 as uuidv4 } from 'uuid';
-const generateTooltipId = () => `listitem-tooltip-popover-${uuidv4()}`;
-const generateListItemId = () => `listitem-tooltip-triggerid-${uuidv4()}`;
-export { generateTooltipId, generateListItemId };