@momentum-design/components 0.85.6 → 0.85.8

package/dist/index.d.ts

@@ -69,9 +69,11 @@ import type { PopoverPlacement } from './components/popover/popover.types';
 import type { SkeletonVariant } from './components/skeleton/skeleton.types';
 import type { SpinnerSize, SpinnerVariant } from './components/spinner/spinner.types';
 import type { TextType } from './components/text/text.types';
+import type { MenuPopoverActionEvent, MenuPopoverChangeEvent } from './components/menupopover/menupopover.types';
+import type { MenuSectionChangeEvent } from './components/menusection/menusection.types';
 import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
 import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES } from './components/button/button.constants';
 import { SKELETON_VARIANTS } from './components/skeleton/skeleton.constants';
 export { AlertChip, Animation, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonGroup, ButtonLink, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, Linksimple, List, ListItem, Marker, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuSection, NavItem, NavItemList, OptGroup, Option, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, SideNavigation, Skeleton, Spinner, StaticCheckbox, StaticRadio, StaticToggle, Tab, TabList, Text, Textarea, ThemeProvider, Toggle, ToggleTip, Tooltip, VirtualizedList, };
-export type { TextType, SpinnerSize, SpinnerVariant, SkeletonVariant, PopoverPlacement, BadgeType, IconButtonSize, PillButtonSize, ButtonVariant, ButtonColor, };
+export type { BadgeType, ButtonColor, ButtonVariant, IconButtonSize, MenuPopoverActionEvent, MenuPopoverChangeEvent, MenuSectionChangeEvent, PillButtonSize, PopoverPlacement, SkeletonVariant, SpinnerSize, SpinnerVariant, TextType, };
 export { inMemoryCache, webAPIIconsCache, BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES, SKELETON_VARIANTS, };

package/dist/react/index.d.ts

@@ -1,6 +1,6 @@
-export { default as AlertChip } from './alertchip';
 export { default as Animation } from './animation';
 export { default as Appheader } from './appheader';
+export { default as AlertChip } from './alertchip';
 export { default as Avatar } from './avatar';
 export { default as AvatarButton } from './avatarbutton';
 export { default as Badge } from './badge';

package/dist/react/index.js

@@ -1,6 +1,6 @@
-export { default as AlertChip } from './alertchip';
 export { default as Animation } from './animation';
 export { default as Appheader } from './appheader';
+export { default as AlertChip } from './alertchip';
 export { default as Avatar } from './avatar';
 export { default as AvatarButton } from './avatarbutton';
 export { default as Badge } from './badge';

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

@@ -7,7 +7,10 @@ import Component from '../../components/menuitem';
  * The leading and trailing slots can be used to display controls and text.<br/>
  * Based on the leading/trailing slot, the position of the controls and text can be adjusted.
  *
- * Please use mdc-menu as a parent element even when there is only menuitem for a11y purpose.
+ * Please use element with role=menu as a parent element even when there is only menuitem for a11y purpose.
+ * For example mdc-menupopover or mdc-menubar.
+ *
+ * Menu item has `name` and `value` attribute that can be used to identify the menu item when it is selected.
  *
  * @dependency mdc-text
  * @dependency mdc-icon
@@ -15,6 +18,14 @@ import Component from '../../components/menuitem';
  *
  * @tagname mdc-menuitem
  *
+ * @slot leading-controls - slot for menu item controls to appear of leading end.
+ * @slot leading-text-primary-label - slot for menu item primary label.
+ * @slot leading-text-secondary-label - slot for menu item secondary label.
+ * @slot leading-text-tertiary-label - slot for menu item tertiary label.
+ * @slot trailing-text-side-header - slot for menu item side header text.
+ * @slot trailing-text-subline - slot for menu item subline text.
+ * @slot trailing-controls - slot for menu item controls to appear of trailing end.
+ *
  * @event click - (React: onClick) This event is dispatched when the menuitem is clicked.
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the menuitem.
  * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the menuitem.

package/dist/react/menuitem/index.js

@@ -9,7 +9,10 @@ import { TAG_NAME } from '../../components/menuitem/menuitem.constants';
  * The leading and trailing slots can be used to display controls and text.<br/>
  * Based on the leading/trailing slot, the position of the controls and text can be adjusted.
  *
- * Please use mdc-menu as a parent element even when there is only menuitem for a11y purpose.
+ * Please use element with role=menu as a parent element even when there is only menuitem for a11y purpose.
+ * For example mdc-menupopover or mdc-menubar.
+ *
+ * Menu item has `name` and `value` attribute that can be used to identify the menu item when it is selected.
  *
  * @dependency mdc-text
  * @dependency mdc-icon
@@ -17,6 +20,14 @@ import { TAG_NAME } from '../../components/menuitem/menuitem.constants';
  *
  * @tagname mdc-menuitem
  *
+ * @slot leading-controls - slot for menu item controls to appear of leading end.
+ * @slot leading-text-primary-label - slot for menu item primary label.
+ * @slot leading-text-secondary-label - slot for menu item secondary label.
+ * @slot leading-text-tertiary-label - slot for menu item tertiary label.
+ * @slot trailing-text-side-header - slot for menu item side header text.
+ * @slot trailing-text-subline - slot for menu item subline text.
+ * @slot trailing-controls - slot for menu item controls to appear of trailing end.
+ *
  * @event click - (React: onClick) This event is dispatched when the menuitem is clicked.
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the menuitem.
  * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the menuitem.

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

@@ -4,21 +4,26 @@ import Component from '../../components/menuitemcheckbox';
  * A menuitemcheckbox component is a checkable menuitem.
  * There should be no focusable descendants inside this menuitemcheckbox component.
  *
- * The `aria-checked` attribute indicates whether the menuitemcheckbox is checked or not.
+ * The `checked` attribute indicates whether the menuitemcheckbox is checked or not.
  *
- * The `indicator` attribute is used to differentiate between <b>checkbox</b>, <b>checkmark</b> and <b>toggle</b>.
- * By default the `indicator` is set to <b>checkbox</b>.<br/>
+ * Menu item checkbox has `name` and `value` attribute that can be used to identify the menu item when it is selected.
+ *
+ * The `indicator` attribute is used to differentiate between <b>checkbox</b>, <b>checkmark</b>, <b>toggle</b> and <b>none</b>.
+ * By default, the `indicator` is set to <b>checkbox</b>.<br/>
  *
  * The checkbox will always be positioned on the leading side of the menuitem label and
  * the toggle and checkmark will always be positioned on the trailing side.
  *
  * The checkbox will have the possible states of `true` or `false`.
- * If the indicator is set to <b>checkmark</b> and if the `aria-checked` attribute is set to `true`,
+ * If the indicator is set to <b>checkmark</b> and if the `checked` attribute is set to `true`,
  * then the checkmark will be displayed. if not, then no indicator will be displayed.
  *
- * If you want only one item in a group to be checked, consider using menuitemradio component.
+ * The forth options for the `indicator` is <b>none</b>, which will not display any indicator at all.
+ * It is intended to be used for customised menu items where the indicator is implemented differently.
+ * For example, you can use a custom icon or a different visual element to indicate the state of the menu item.
+ * Make sure the new indicator is accessible.
  *
- * If a menuitemcheckbox is disabled, then the `aria-disabled` attribute is set to `true`.
+ * If you want only one item in a group to be checked, consider using menuitemradio component.
  *
  * @dependency mdc-staticcheckbox
  * @dependency mdc-statictoggle
@@ -26,7 +31,13 @@ import Component from '../../components/menuitemcheckbox';
  *
  * @tagname mdc-menuitemcheckbox
  *
- * @cssproperty --mdc-checkmark-indicator-color - Allows customization of the checkmark indicator color
+ * @slot leading-controls - slot for menu item checkbox controls to appear of leading end.
+ * @slot leading-text-primary-label - slot for menu item checkbox primary label.
+ * @slot leading-text-secondary-label - slot for menu item checkbox secondary label.
+ * @slot leading-text-tertiary-label - slot for menu item checkbox tertiary label.
+ * @slot trailing-text-side-header - slot for menu item checkbox side header text.
+ * @slot trailing-text-subline - slot for menu item checkbox subline text.
+ * @slot trailing-controls - slot for menu item checkbox controls to appear of trailing end.
  *
  * @event change - (React: onChange) This event is dispatched when the menuitemcheckbox changes.
  * @event click - (React: onClick) This event is dispatched when the menuitemcheckbox is clicked.

package/dist/react/menuitemcheckbox/index.js

@@ -6,21 +6,26 @@ import { TAG_NAME } from '../../components/menuitemcheckbox/menuitemcheckbox.con
  * A menuitemcheckbox component is a checkable menuitem.
  * There should be no focusable descendants inside this menuitemcheckbox component.
  *
- * The `aria-checked` attribute indicates whether the menuitemcheckbox is checked or not.
+ * The `checked` attribute indicates whether the menuitemcheckbox is checked or not.
  *
- * The `indicator` attribute is used to differentiate between <b>checkbox</b>, <b>checkmark</b> and <b>toggle</b>.
- * By default the `indicator` is set to <b>checkbox</b>.<br/>
+ * Menu item checkbox has `name` and `value` attribute that can be used to identify the menu item when it is selected.
+ *
+ * The `indicator` attribute is used to differentiate between <b>checkbox</b>, <b>checkmark</b>, <b>toggle</b> and <b>none</b>.
+ * By default, the `indicator` is set to <b>checkbox</b>.<br/>
  *
  * The checkbox will always be positioned on the leading side of the menuitem label and
  * the toggle and checkmark will always be positioned on the trailing side.
  *
  * The checkbox will have the possible states of `true` or `false`.
- * If the indicator is set to <b>checkmark</b> and if the `aria-checked` attribute is set to `true`,
+ * If the indicator is set to <b>checkmark</b> and if the `checked` attribute is set to `true`,
  * then the checkmark will be displayed. if not, then no indicator will be displayed.
  *
- * If you want only one item in a group to be checked, consider using menuitemradio component.
+ * The forth options for the `indicator` is <b>none</b>, which will not display any indicator at all.
+ * It is intended to be used for customised menu items where the indicator is implemented differently.
+ * For example, you can use a custom icon or a different visual element to indicate the state of the menu item.
+ * Make sure the new indicator is accessible.
  *
- * If a menuitemcheckbox is disabled, then the `aria-disabled` attribute is set to `true`.
+ * If you want only one item in a group to be checked, consider using menuitemradio component.
  *
  * @dependency mdc-staticcheckbox
  * @dependency mdc-statictoggle
@@ -28,7 +33,13 @@ import { TAG_NAME } from '../../components/menuitemcheckbox/menuitemcheckbox.con
  *
  * @tagname mdc-menuitemcheckbox
  *
- * @cssproperty --mdc-checkmark-indicator-color - Allows customization of the checkmark indicator color
+ * @slot leading-controls - slot for menu item checkbox controls to appear of leading end.
+ * @slot leading-text-primary-label - slot for menu item checkbox primary label.
+ * @slot leading-text-secondary-label - slot for menu item checkbox secondary label.
+ * @slot leading-text-tertiary-label - slot for menu item checkbox tertiary label.
+ * @slot trailing-text-side-header - slot for menu item checkbox side header text.
+ * @slot trailing-text-subline - slot for menu item checkbox subline text.
+ * @slot trailing-controls - slot for menu item checkbox controls to appear of trailing end.
  *
  * @event change - (React: onChange) This event is dispatched when the menuitemcheckbox changes.
  * @event click - (React: onClick) This event is dispatched when the menuitemcheckbox is clicked.

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

@@ -5,17 +5,40 @@ import Component from '../../components/menuitemradio';
  * A menuitemradio should be checked only one at a time. <br/>
  * There should be no focusable descendants inside this menuitemradio component.
  *
- * The `aria-checked` menuitemradio attribute is used to indicate that the menuitemradio is checked or not.
+ * The `checked` menuitemradio attribute is used to indicate that the menuitemradio is checked or not.
+ *
+ * Menu item radio has `name` and `value` attribute that can be used to identify the menu item when it is selected.
  *
  * If you want more than one item in a group to be checked, consider using menuitemcheckbox component.
  *
- * If a menuitemradio is disabled, then the `aria-disabled` attribute is set to `true`.
+ * The `indicator` attribute is used to differentiate between <b>radio</b>, <b>checkmark</b> and <b>none</b>.
+ * By default, the `indicator` is set to <b>radio</b>.<br/>
+ *
+ * The checkbox will always be positioned on the leading side of the menuitem label and
+ * the checkmark will always be positioned on the trailing side.
+ *
+ * The radio will have the possible states of `true` or `false`.
+ * If the indicator is set to <b>checkmark</b> and if the `checked` attribute is set to `true`,
+ * then the checkmark will be displayed. if not, then no indicator will be displayed.
+ *
+ * The third options for the `indicator` is <b>none</b>, which will not display any indicator at all.
+ * It is intended to be used for customised menu items where the indicator is implemented differently.
+ * For example, you can use a custom icon or a different visual element to indicate the state of the menu item.
+ * Make sure the new indicator is accessible.
  *
  * @dependency mdc-staticradio
  * @dependency mdc-text
  *
  * @tagname mdc-menuitemradio
  *
+ * @slot leading-controls - slot for menu item radio controls to appear of leading end.
+ * @slot leading-text-primary-label - slot for menu item radio primary label.
+ * @slot leading-text-secondary-label - slot for menu item radio secondary label.
+ * @slot leading-text-tertiary-label - slot for menu item radio tertiary label.
+ * @slot trailing-text-side-header - slot for menu item radio side header text.
+ * @slot trailing-text-subline - slot for menu item radio subline text.
+ * @slot trailing-controls - slot for menu item radio controls to appear of trailing end.
+ *
  * @event change - (React: onChange) This event is dispatched when the menuitemradio changes.
  * @event click - (React: onClick) This event is dispatched when the menuitemradio is clicked.
  * @event focus - (React: onFocus) This event is dispatched when the menuitemradio receives focus.

package/dist/react/menuitemradio/index.js

@@ -7,17 +7,40 @@ import { TAG_NAME } from '../../components/menuitemradio/menuitemradio.constants
  * A menuitemradio should be checked only one at a time. <br/>
  * There should be no focusable descendants inside this menuitemradio component.
  *
- * The `aria-checked` menuitemradio attribute is used to indicate that the menuitemradio is checked or not.
+ * The `checked` menuitemradio attribute is used to indicate that the menuitemradio is checked or not.
+ *
+ * Menu item radio has `name` and `value` attribute that can be used to identify the menu item when it is selected.
  *
  * If you want more than one item in a group to be checked, consider using menuitemcheckbox component.
  *
- * If a menuitemradio is disabled, then the `aria-disabled` attribute is set to `true`.
+ * The `indicator` attribute is used to differentiate between <b>radio</b>, <b>checkmark</b> and <b>none</b>.
+ * By default, the `indicator` is set to <b>radio</b>.<br/>
+ *
+ * The checkbox will always be positioned on the leading side of the menuitem label and
+ * the checkmark will always be positioned on the trailing side.
+ *
+ * The radio will have the possible states of `true` or `false`.
+ * If the indicator is set to <b>checkmark</b> and if the `checked` attribute is set to `true`,
+ * then the checkmark will be displayed. if not, then no indicator will be displayed.
+ *
+ * The third options for the `indicator` is <b>none</b>, which will not display any indicator at all.
+ * It is intended to be used for customised menu items where the indicator is implemented differently.
+ * For example, you can use a custom icon or a different visual element to indicate the state of the menu item.
+ * Make sure the new indicator is accessible.
  *
  * @dependency mdc-staticradio
  * @dependency mdc-text
  *
  * @tagname mdc-menuitemradio
  *
+ * @slot leading-controls - slot for menu item radio controls to appear of leading end.
+ * @slot leading-text-primary-label - slot for menu item radio primary label.
+ * @slot leading-text-secondary-label - slot for menu item radio secondary label.
+ * @slot leading-text-tertiary-label - slot for menu item radio tertiary label.
+ * @slot trailing-text-side-header - slot for menu item radio side header text.
+ * @slot trailing-text-subline - slot for menu item radio subline text.
+ * @slot trailing-controls - slot for menu item radio controls to appear of trailing end.
+ *
  * @event change - (React: onChange) This event is dispatched when the menuitemradio changes.
  * @event click - (React: onClick) This event is dispatched when the menuitemradio is clicked.
  * @event focus - (React: onFocus) This event is dispatched when the menuitemradio receives focus.

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

@@ -18,9 +18,17 @@ import Component from '../../components/menupopover';
  * The orientation of the menu popover is always set to `vertical`.
  *
  * @tagname mdc-menupopover
+ *
+ * @slot - Default slot for the menu popover content
+ *
+ * @event change - (React: onChange) This event is dispatched when a `menuitemcheckbox`, or `menuitemradio` changes.
+ * @event action - (React: onAction) This event is dispatched when a menuItem selected and the menu closes.
+ *
  * @slot default - Contains the menu items to be displayed in the popover
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
+    onChange: EventName<import("../../components/menupopover/menupopover.types").MenuPopoverChangeEvent>;
+    onAction: EventName<import("../../components/menupopover/menupopover.types").MenuPopoverActionEvent>;
     onShown: EventName<Event>;
     onHidden: EventName<Event>;
     onCreated: EventName<Event>;

package/dist/react/menupopover/index.js

@@ -20,6 +20,12 @@ import { TAG_NAME } from '../../components/menupopover/menupopover.constants';
  * The orientation of the menu popover is always set to `vertical`.
  *
  * @tagname mdc-menupopover
+ *
+ * @slot - Default slot for the menu popover content
+ *
+ * @event change - (React: onChange) This event is dispatched when a `menuitemcheckbox`, or `menuitemradio` changes.
+ * @event action - (React: onAction) This event is dispatched when a menuItem selected and the menu closes.
+ *
  * @slot default - Contains the menu items to be displayed in the popover
  */
 const reactWrapper = createComponent({
@@ -27,6 +33,8 @@ const reactWrapper = createComponent({
     elementClass: Component,
     react: React,
     events: {
+        onChange: 'change',
+        onAction: 'action',
         onShown: 'shown',
         onHidden: 'hidden',
         onCreated: 'created',

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

@@ -1,3 +1,4 @@
+import { type EventName } from '@lit/react';
 import Component from '../../components/menusection';
 /**
  * `mdc-menusection` is a container element used to group a set of menu items.
@@ -11,6 +12,10 @@ import Component from '../../components/menusection';
  * @tagname mdc-menusection
  *
  * @slot - Default slot for inserting `menuitem`, `menuitemcheckbox`, or `menuitemradio`
+ *
+ * @event change - (React: onChange) This event is dispatched when a `menuitemcheckbox`, or `menuitemradio` changes.
  */
-declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
+    onChange: EventName<import("../../components/menusection/menusection.types").MenuSectionChangeEvent>;
+}>;
 export default reactWrapper;

package/dist/react/menusection/index.js

@@ -14,12 +14,16 @@ import { TAG_NAME } from '../../components/menusection/menusection.constants';
  * @tagname mdc-menusection
  *
  * @slot - Default slot for inserting `menuitem`, `menuitemcheckbox`, or `menuitemradio`
+ *
+ * @event change - (React: onChange) This event is dispatched when a `menuitemcheckbox`, or `menuitemradio` changes.
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,
     elementClass: Component,
     react: React,
-    events: {},
+    events: {
+        onChange: 'change',
+    },
     displayName: 'MenuSection',
 });
 export default reactWrapper;

package/dist/utils/types.d.ts

@@ -1 +1,11 @@
 export type ValueOf<T> = T[keyof T];
+/**
+ * A generic type for strongly typing custom events with their targets
+ * @typeParam T - The type of the event target (extends EventTarget)
+ * @typeParam D - The type of the detail payload for the custom event
+ *
+ * @see [Strongly Typed Events for Web Components](https://dev.to/stuffbreaker/creating-strongly-typed-events-for-web-components-1jem)
+ */
+export type TypedEvent<T extends EventTarget, D = unknown> = CustomEvent<D> & {
+    target: T;
+};

package/package.json

@@ -41,5 +41,5 @@
     "lottie-web": "^5.12.2",
     "uuid": "^11.0.5"
   },
-  "version": "0.85.6"
+  "version": "0.85.8"
 }