@momentum-design/components 0.85.6 → 0.85.7

package/dist/components/menuitemradio/menuitemradio.component.js

@@ -7,29 +7,54 @@ 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 { html } from 'lit';
+import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { ROLE } from '../../utils/roles';
 import MenuItem from '../menuitem/menuitem.component';
 import { TYPE } from '../text/text.constants';
-import { ARIA_CHECKED_STATES, TAG_NAME as MENUSECTION_TAGNAME } from '../menusection/menusection.constants';
+import { TAG_NAME as MENUSECTION_TAGNAME } from '../menusection/menusection.constants';
 import { TAG_NAME as MENUPOPOVER_TAGNAME } from '../menupopover/menupopover.constants';
+import { INDICATOR, DEFAULTS } from './menuitemradio.constants';
+import styles from './menuitemradio.styles';
 /**
  * A menuitemradio component is a checkable menuitem that is used in a menu.
  * 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.
@@ -39,63 +64,123 @@ class MenuItemRadio extends MenuItem {
         super();
         /**
          * The aria-checked attribute is used to indicate that the menuitemradio is checked or not.
-         * @default 'false'
+         * @default false
          */
-        this.ariaChecked = ARIA_CHECKED_STATES.FALSE;
+        this.checked = false;
         /**
-         * The name attribute is used to group radio items within the same menu container.
+         * The indicator attribute is used to differentiate between <b>radio</b>, <b>checkmark</b> and <b>none</b>.
+         * @default 'radio'
          */
-        this.name = '';
+        this.indicator = DEFAULTS.INDICATOR;
         /**
          * Handles click events to set checked state and uncheck siblings in the same group and container.
-         * If the menuitemradio is not checked, it sets its aria-checked state to `true`
-         * and sets all other menuitemradio elements of the same group with aria-checked state to `false`.
+         * If the menuitemradio is not checked, it sets its checked state to `true`
+         * and sets all other menuitemradio elements of the same group with checked state to `false`.
          */
-        this.menuitemradioHandleClick = () => {
-            if (this.disabled || this.ariaChecked === ARIA_CHECKED_STATES.TRUE)
+        this.radioHandleClick = (event) => {
+            event.stopPropagation();
+            if (this.disabled || this.checked)
                 return;
-            // Find the closest menu container (menupopover or menusection)
-            const container = this.closest(`${MENUSECTION_TAGNAME}, ${MENUPOPOVER_TAGNAME}`);
-            if (container) {
-                const radios = Array.from(container.querySelectorAll(this.tagName));
-                radios.forEach(item => {
-                    const radio = item;
-                    if (radio.name === this.name) {
-                        radio.ariaChecked = ARIA_CHECKED_STATES.FALSE;
-                    }
-                });
-            }
-            this.ariaChecked = ARIA_CHECKED_STATES.TRUE;
+            this.updateOtherRadiosCheckedState();
+            this.checked = true;
+            this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
         };
-        this.addEventListener('click', this.menuitemradioHandleClick);
+        this.addEventListener('click', this.radioHandleClick);
     }
     connectedCallback() {
         super.connectedCallback();
         this.role = ROLE.MENUITEMRADIO;
     }
+    /**
+     * Returns all radios within the same group (name).
+     */
+    getAllRadiosWithinSameGroup() {
+        const container = this.closest(`${MENUSECTION_TAGNAME}, ${MENUPOPOVER_TAGNAME}`);
+        if (!container || !this.name)
+            return [];
+        return Array.from(container.querySelectorAll(`${this.tagName}[name="${this.name}"]`));
+    }
+    /**
+     * Updates the checked state of all other radios in the same group.
+     * This method is called when a radio is clicked to ensure that only one radio in the group can be checked at a time.
+     * It sets the `checked` property of all other radios in the same group to `false`.
+     */
+    updateOtherRadiosCheckedState() {
+        const radios = this.getAllRadiosWithinSameGroup();
+        radios.forEach(radio => {
+            // eslint-disable-next-line no-param-reassign
+            if (radio !== this)
+                radio.checked = false;
+        });
+    }
+    update(changedProperties) {
+        super.update(changedProperties);
+        if (changedProperties.has('checked')) {
+            this.ariaChecked = `${this.checked}`;
+            if (changedProperties.get('checked') === false && this.checked) {
+                this.updateOtherRadiosCheckedState();
+            }
+        }
+    }
+    /**
+     * Returns a static checkbox element if the indicator is set to checkbox.
+     * If the indicator is not set to checkbox, it returns nothing.
+     * @returns TemplateResult | typeof nothing
+     */
+    renderStaticRadio() {
+        if (this.indicator !== INDICATOR.RADIO) {
+            return nothing;
+        }
+        return html `
+      <mdc-staticradio
+        slot="leading-controls"
+        ?checked="${this.checked}"
+        ?disabled="${this.disabled}"
+      ></mdc-staticradio>
+    `;
+    }
+    /**
+     * Returns a checkmark icon if the indicator is set to checkmark and the checked state is true.
+     * If the indicator is not set to checkmark or the checked state is false, it returns nothing.
+     *
+     * The checkmark icon will always be positioned on the trailing side of the menuitem label.
+     * @returns TemplateResult | typeof nothing
+     */
+    renderCheckmarkIcon() {
+        if (this.checked && this.indicator === INDICATOR.CHECKMARK) {
+            return html ` <mdc-icon slot="trailing-controls" name="check-bold" part="checkmark-icon"></mdc-icon> `;
+        }
+        return nothing;
+    }
     render() {
         return html `
-      <div part="leading-controls">
-        <mdc-staticradio
-          slot="leading-controls"
-          ?checked="${this.ariaChecked === ARIA_CHECKED_STATES.TRUE}"
-          ?disabled="${this.disabled}"
-        ></mdc-staticradio>
+      <div part="leading">
+        ${this.renderStaticRadio()}
+        <slot name="leading-controls"></slot>
+        <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)}
+          ${this.getText('leading-text-tertiary-label', TYPE.BODY_SMALL_REGULAR, this.tertiaryLabel)}
+        </div>
       </div>
-      <div part="leading-text">
-        ${this.getText('leading-text-primary-label', TYPE.BODY_MIDSIZE_REGULAR, this.label)}
-        ${this.getText('leading-text-secondary-label', TYPE.BODY_MIDSIZE_REGULAR, this.secondaryLabel)}
+      <div part="trailing">
+        <div part="trailing-text">
+          ${this.getText('trailing-text-side-header', TYPE.BODY_MIDSIZE_REGULAR, this.sideHeaderText)}
+          ${this.getText('trailing-text-subline', TYPE.BODY_SMALL_REGULAR, this.sublineText)}
+        </div>
+        <slot name="trailing-controls"></slot>
+        ${this.renderCheckmarkIcon()}
       </div>
     `;
     }
 }
-MenuItemRadio.styles = [...MenuItem.styles];
+MenuItemRadio.styles = [...MenuItem.styles, ...styles];
 __decorate([
-    property({ type: String, reflect: true, attribute: 'aria-checked' }),
-    __metadata("design:type", String)
-], MenuItemRadio.prototype, "ariaChecked", void 0);
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Boolean)
+], MenuItemRadio.prototype, "checked", void 0);
 __decorate([
     property({ type: String, reflect: true }),
-    __metadata("design:type", Object)
-], MenuItemRadio.prototype, "name", void 0);
+    __metadata("design:type", String)
+], MenuItemRadio.prototype, "indicator", void 0);
 export default MenuItemRadio;

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

@@ -1,2 +1,10 @@
 declare const TAG_NAME: "mdc-menuitemradio";
-export { TAG_NAME };
+declare const INDICATOR: {
+    readonly NONE: "none";
+    readonly RADIO: "radio";
+    readonly CHECKMARK: "checkmark";
+};
+declare const DEFAULTS: {
+    readonly INDICATOR: "radio";
+};
+export { TAG_NAME, INDICATOR, DEFAULTS };

package/dist/components/menuitemradio/menuitemradio.constants.js

@@ -1,3 +1,11 @@
 import utils from '../../utils/tag-name';
 const TAG_NAME = utils.constructTagName('menuitemradio');
-export { TAG_NAME };
+const INDICATOR = {
+    NONE: 'none',
+    RADIO: 'radio',
+    CHECKMARK: 'checkmark',
+};
+const DEFAULTS = {
+    INDICATOR: INDICATOR.RADIO,
+};
+export { TAG_NAME, INDICATOR, DEFAULTS };

package/dist/components/menuitemradio/menuitemradio.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult[];
+export default _default;

package/dist/components/menuitemradio/menuitemradio.styles.js

@@ -0,0 +1,7 @@
+import { css } from 'lit';
+const styles = css `
+  :host::part(checkmark-icon) {
+    --mdc-icon-fill-color: currentColor;
+  }
+`;
+export default [styles];

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

@@ -1,6 +1,9 @@
+import { ValueOf } from '../../utils/types';
+import { INDICATOR } from './menuitemradio.constants';
+type Indicator = ValueOf<typeof INDICATOR>;
 interface Events {
     onChangeEvent: Event;
     onClickEvent: MouseEvent;
     onFocusEvent: FocusEvent;
 }
-export type { Events };
+export type { Events, Indicator };

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

@@ -19,6 +19,12 @@ import { PopoverPlacement } from '../popover/popover.types';
  * 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 class MenuPopover extends Popover {

package/dist/components/menupopover/menupopover.component.js

@@ -35,6 +35,12 @@ import { isActiveMenuItem, isValidMenuItem, isValidPopover } from './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
  */
 class MenuPopover extends Popover {
@@ -73,9 +79,8 @@ class MenuPopover extends Popover {
                 this.closeAllMenuPopovers(popoverOfTarget);
                 return;
             }
-            let insidePopoverClick = false;
             const path = event.composedPath();
-            insidePopoverClick = this.contains(event.target) || path.includes(this.triggerElement);
+            const insidePopoverClick = this.contains(event.target) || path.includes(this.triggerElement);
             const clickedOnBackdrop = this.backdropElement ? path.includes(this.backdropElement) : false;
             if (!insidePopoverClick || clickedOnBackdrop) {
                 this.closeAllMenuPopovers();
@@ -199,8 +204,11 @@ class MenuPopover extends Popover {
         const target = event.target;
         const triggerId = target.getAttribute('id');
         if (isActiveMenuItem(target) && // menuitemcheckbox and menuitemradio are not supposed to close the popover
-            !this.hasSubmenuWithTriggerId(triggerId)) {
+            !this.hasSubmenuWithTriggerId(triggerId) &&
+            this === target.closest(MENU_POPOVER) // Ensure close all popover called only once
+        ) {
             this.closeAllMenuPopovers();
+            target.dispatchEvent(new Event('action', { bubbles: true, composed: true }));
         }
     }
     /**

package/dist/components/menupopover/menupopover.styles.js

@@ -3,5 +3,9 @@ const styles = css `
   :host::part(popover-content) {
     padding: 0.75rem 0.5rem;
   }
+
+  ::slotted(mdc-divider) {
+    margin-block: 0.25rem;
+  }
 `;
 export default [styles];

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

@@ -0,0 +1,11 @@
+import type MenuItem from '../menuitem';
+export type MenuPopoverChangeEvent = Event & {
+    target: MenuItem;
+};
+export type MenuPopoverActionEvent = Event & {
+    target: MenuItem;
+};
+export interface Events {
+    onChangeEvent: MenuPopoverChangeEvent;
+    onActionEvent: MenuPopoverActionEvent;
+}

package/dist/components/menupopover/menupopover.types.js

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

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

@@ -1,9 +1,11 @@
+import type MenuItem from '../menuitem';
+import type MenuPopover from './menupopover.component';
 /**
  * Checks if the given menu item is a valid menu item.
  * @param menuItem - The menu item to check.
  * @returns True if the menu item is a valid menu item, false otherwise.
  */
 declare const isValidMenuItem: (menuItem: Element | null) => boolean;
-declare const isValidPopover: (menuItem: Element | null) => boolean;
-declare const isActiveMenuItem: (menuItem: Element | null) => boolean;
+declare const isValidPopover: (el: Element | null) => el is MenuPopover;
+declare const isActiveMenuItem: (menuItem: Element | null) => menuItem is MenuItem;
 export { isValidMenuItem, isValidPopover, isActiveMenuItem };

package/dist/components/menupopover/menupopover.utils.js

@@ -11,6 +11,6 @@ const isValidMenuItem = (menuItem) => {
     var _a, _b;
     return [MENUITEM_TAGNAME, MENUITEMCHECKBOX_TAGNAME, MENUITEMRADIO_TAGNAME].includes((_b = (_a = menuItem === null || menuItem === void 0 ? void 0 : menuItem.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase) === null || _b === void 0 ? void 0 : _b.call(_a));
 };
-const isValidPopover = (menuItem) => { var _a; return ((_a = menuItem === null || menuItem === void 0 ? void 0 : menuItem.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === MENUPOPOVER_TAGNAME; };
+const isValidPopover = (el) => { var _a; return ((_a = el === null || el === void 0 ? void 0 : el.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === MENUPOPOVER_TAGNAME; };
 const isActiveMenuItem = (menuItem) => { var _a, _b; return ((_b = (_a = menuItem === null || menuItem === void 0 ? void 0 : menuItem.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase) === null || _b === void 0 ? void 0 : _b.call(_a)) === MENUITEM_TAGNAME && !menuItem.hasAttribute('disabled'); };
 export { isValidMenuItem, isValidPopover, isActiveMenuItem };

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

@@ -1,4 +1,4 @@
-import { CSSResult } from 'lit';
+import { CSSResult, PropertyValues } from 'lit';
 import { Component } from '../../models';
 /**
  * `mdc-menusection` is a container element used to group a set of menu items.
@@ -12,10 +12,23 @@ import { Component } from '../../models';
  * @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 class MenuSection extends Component {
+    /**
+     * The primary headerText of the list item.
+     * This appears on the leading side of the list item.
+     */
+    ariaLabel: string | null;
+    /**
+     * The primary headerText of the list item.
+     * This appears on the leading side of the list item.
+     */
+    headerText: string | null;
     connectedCallback(): void;
-    disconnectedCallback(): void;
+    update(changedProperties: PropertyValues): void;
+    private renderLabel;
     render(): import("lit-html").TemplateResult<1>;
     static styles: CSSResult[];
 }

package/dist/components/menusection/menusection.component.js

@@ -1,6 +1,18 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
 import { html } from 'lit';
+import { property } from 'lit/decorators.js';
 import { Component } from '../../models';
 import { ROLE } from '../../utils/roles';
+import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
+import styles from './menusection.styles';
 /**
  * `mdc-menusection` is a container element used to group a set of menu items.
  *
@@ -13,18 +25,57 @@ import { ROLE } from '../../utils/roles';
  * @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.
  */
 class MenuSection extends Component {
+    constructor() {
+        super(...arguments);
+        /**
+         * The primary headerText of the list item.
+         * This appears on the leading side of the list item.
+         */
+        this.ariaLabel = null;
+        /**
+         * The primary headerText of the list item.
+         * This appears on the leading side of the list item.
+         */
+        this.headerText = null;
+    }
     connectedCallback() {
         super.connectedCallback();
         this.setAttribute('role', ROLE.GROUP);
     }
-    disconnectedCallback() {
-        super.disconnectedCallback();
+    update(changedProperties) {
+        super.update(changedProperties);
+        if ((changedProperties.has('ariaLabel') || changedProperties.has('headerText')) &&
+            (!this.ariaLabel || this.ariaLabel === changedProperties.get('headerText'))) {
+            // Because IDREF attribute reflection does not work across light and shadow DOM, we either set the
+            // `aria-label` directly or use the `ariaLabelledByElements`.
+            // Since the later one just released in the major browsers, we do the first one for now.
+            // more details: https://nolanlawson.com/2022/11/28/shadow-dom-and-accessibility-the-trouble-with-aria/
+            this.ariaLabel = this.headerText || '';
+        }
+    }
+    renderLabel() {
+        if (this.headerText) {
+            return html `<mdc-text part="header-text" type=${TYPE.BODY_MIDSIZE_BOLD} tagname=${VALID_TEXT_TAGS.DIV}>
+        ${this.headerText}
+      </mdc-text> `;
+        }
+        return null;
     }
     render() {
-        return html `<slot></slot>`;
+        return html `${this.renderLabel()}<slot></slot>`;
     }
 }
-MenuSection.styles = [...Component.styles];
+MenuSection.styles = [...Component.styles, ...styles];
+__decorate([
+    property({ type: String, reflect: true, attribute: 'aria-label' }),
+    __metadata("design:type", Object)
+], MenuSection.prototype, "ariaLabel", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", Object)
+], MenuSection.prototype, "headerText", void 0);
 export default MenuSection;

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

@@ -1,6 +1,2 @@
 declare const TAG_NAME: "mdc-menusection";
-declare const ARIA_CHECKED_STATES: {
-    readonly TRUE: "true";
-    readonly FALSE: "false";
-};
-export { ARIA_CHECKED_STATES, TAG_NAME };
+export { TAG_NAME };

package/dist/components/menusection/menusection.constants.js

@@ -1,7 +1,3 @@
 import utils from '../../utils/tag-name';
 const TAG_NAME = utils.constructTagName('menusection');
-const ARIA_CHECKED_STATES = {
-    TRUE: 'true',
-    FALSE: 'false',
-};
-export { ARIA_CHECKED_STATES, TAG_NAME };
+export { TAG_NAME };

package/dist/components/menusection/menusection.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult[];
+export default _default;

package/dist/components/menusection/menusection.styles.js

@@ -0,0 +1,11 @@
+import { css } from 'lit';
+const styles = css `
+  :host > .mdc-menusection__label {
+    padding: 0.5rem 0.75rem;
+  }
+
+  ::slotted(mdc-divider) {
+    margin-block: 0.25rem;
+  }
+`;
+export default [styles];

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

@@ -1,4 +1,7 @@
-import { ValueOf } from '../../utils/types';
-import { ARIA_CHECKED_STATES } from './menusection.constants';
-type AriaCheckedStates = ValueOf<typeof ARIA_CHECKED_STATES>;
-export type { AriaCheckedStates };
+import type MenuItem from '../menuitem';
+export type MenuSectionChangeEvent = Event & {
+    target: MenuItem;
+};
+export interface Events {
+    onChangeEvent: MenuSectionChangeEvent;
+}