@momentum-design/components 0.62.1 → 0.62.3

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

@@ -1,5 +1,5 @@
-import ListItem from './listitem.component';
 import '../text';
+import ListItem from './listitem.component';
 declare global {
     interface HTMLElementTagNameMap {
         ['mdc-listitem']: ListItem;

package/dist/components/listitem/index.js

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

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

@@ -1,9 +1,9 @@
-import type { CSSResult, PropertyValues } from 'lit';
-import { nothing, TemplateResult } from 'lit';
+import type { CSSResult, PropertyValues, TemplateResult } from 'lit';
+import { nothing } from 'lit';
 import { Component } from '../../models';
-import type { TextType } from '../text/text.types';
+import { TextType } from '../text/text.types';
 import type { ListItemVariants } from './listitem.types';
-declare const ListItem_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DisabledMixin").DisabledMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/TabIndexMixin").TabIndexMixinInterface> & typeof Component;
+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> & typeof Component;
 /**
  * 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

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

@@ -10,7 +10,6 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 import { html, nothing } from 'lit';
 import { property, queryAssignedElements } from 'lit/decorators.js';
 import { Component } from '../../models';
-import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
 import { DisabledMixin } from '../../utils/mixins/DisabledMixin';
 import { TabIndexMixin } from '../../utils/mixins/TabIndexMixin';
 import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
@@ -54,7 +53,7 @@ import styles from './listitem.styles';
  * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the listitem.
  * @event focus - (React: onFocus) This event is dispatched when the listitem receives focus.
  */
-class ListItem extends DataAriaLabelMixin(DisabledMixin(TabIndexMixin(Component))) {
+class ListItem extends DisabledMixin(TabIndexMixin(Component)) {
     constructor() {
         super(...arguments);
         /**
@@ -105,6 +104,7 @@ class ListItem extends DataAriaLabelMixin(DisabledMixin(TabIndexMixin(Component)
         if (changedProperties.has('disabled')) {
             this.tabIndex = this.disabled ? -1 : 0;
             this.disableSlottedChildren(this.disabled);
+            this.setAttribute('aria-disabled', `${this.disabled}`);
         }
     }
     render() {

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

@@ -0,0 +1,8 @@
+import '../text';
+import MenuItem from './menuitem.component';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-menuitem']: MenuItem;
+    }
+}
+export default MenuItem;

package/dist/components/menuitem/index.js

@@ -0,0 +1,5 @@
+import '../text';
+import MenuItem from './menuitem.component';
+import { TAG_NAME } from './menuitem.constants';
+MenuItem.register(TAG_NAME);
+export default MenuItem;

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

@@ -0,0 +1,25 @@
+import type { CSSResult } from 'lit';
+import ListItem from '../listitem/listitem.component';
+/**
+ * menuitem component is inherited by listitem component with the role set `menuitem`.<br/>
+ * A menu item can contain an icon on the leading or trailing side.
+ *
+ * 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.
+ *
+ * @dependency mdc-text
+ *
+ * @tagname mdc-menuitem
+ *
+ * @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.
+ * @event focus - (React: onFocus) This event is dispatched when the menuitem receives focus.
+ */
+declare class MenuItem extends ListItem {
+    connectedCallback(): void;
+    static styles: Array<CSSResult>;
+}
+export default MenuItem;

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

@@ -0,0 +1,29 @@
+import ListItem from '../listitem/listitem.component';
+import { LISTITEM_VARIANTS } from '../listitem/listitem.constants';
+/**
+ * menuitem component is inherited by listitem component with the role set `menuitem`.<br/>
+ * A menu item can contain an icon on the leading or trailing side.
+ *
+ * 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.
+ *
+ * @dependency mdc-text
+ *
+ * @tagname mdc-menuitem
+ *
+ * @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.
+ * @event focus - (React: onFocus) This event is dispatched when the menuitem receives focus.
+ */
+class MenuItem extends ListItem {
+    connectedCallback() {
+        super.connectedCallback();
+        this.role = 'menuitem';
+        this.variant = LISTITEM_VARIANTS.INSET_RECTANGLE;
+    }
+}
+MenuItem.styles = [...ListItem.styles];
+export default MenuItem;

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

@@ -0,0 +1,2 @@
+declare const TAG_NAME: "mdc-menuitem";
+export { TAG_NAME };

package/dist/components/menuitem/menuitem.constants.js

@@ -0,0 +1,3 @@
+import utils from '../../utils/tag-name';
+const TAG_NAME = utils.constructTagName('menuitem');
+export { TAG_NAME };

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

@@ -0,0 +1,6 @@
+interface Events {
+    onChangeEvent: Event;
+    onClickEvent: MouseEvent;
+    onFocusEvent: FocusEvent;
+}
+export type { Events };

package/dist/components/menuitem/menuitem.types.js

@@ -0,0 +1 @@
+export {};

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

@@ -58,7 +58,6 @@ class Option extends FormInternalsMixin(ListItem) {
         this.secondaryLabel = undefined;
         this.sideHeaderText = undefined;
         this.sublineText = undefined;
-        this.dataAriaLabel = undefined;
         this.addEventListener('focusin', this.displayTooltipForLongText);
         this.addEventListener('mouseover', this.displayTooltipForLongText);
         this.addEventListener('focusout', this.hideTooltipOnLeave);
@@ -131,9 +130,6 @@ class Option extends FormInternalsMixin(ListItem) {
     }
     update(changedProperties) {
         super.update(changedProperties);
-        if (changedProperties.has('disabled')) {
-            this.updateAttribute('aria-disabled', `${this.disabled}`);
-        }
         if (changedProperties.has('selected')) {
             this.updateAttribute('aria-selected', `${this.selected}`);
         }