@momentum-design/components 0.111.2 → 0.112.0

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

@@ -1,6 +1,7 @@
 import type { PropertyValues, CSSResult, TemplateResult } from 'lit';
 import MenuItem from '../menuitem/menuitem.component';
 import type { Indicator } from './menuitemcheckbox.types';
+declare const MenuItemCheckbox_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/ControlledMixin").ControlledMixinInterface> & typeof MenuItem;
 /**
  * A menuitemcheckbox component is a checkable menuitem.
  * There should be no focusable descendants inside this menuitemcheckbox component.
@@ -44,7 +45,7 @@ import type { Indicator } from './menuitemcheckbox.types';
  * @event click - (React: onClick) This event is dispatched when the menuitemcheckbox is clicked.
  * @event focus - (React: onFocus) This event is dispatched when the menuitemcheckbox receives focus.
  */
-declare class MenuItemCheckbox extends MenuItem {
+declare class MenuItemCheckbox extends MenuItemCheckbox_base {
     /**
      * The checked attribute is used to indicate that the menuitemcheckbox is checked or not.
      * @default false
@@ -60,7 +61,7 @@ declare class MenuItemCheckbox extends MenuItem {
     /**
      * Handles click events to toggle checked state
      * If the menuitemcheckbox is disabled, it does nothing.
-     * If the menuitemcheckbox is not disabled, it toggles the `checked` state between `true` and `false`.
+     * If the menuitemcheckbox is not disabled, it toggles checked if uncontrolled, and dispatches the 'change' event.
      */
     private handleMouseClick;
     update(changedProperties: PropertyValues): void;

package/dist/components/menuitemcheckbox/menuitemcheckbox.component.js

@@ -14,6 +14,7 @@ import { ROLE } from '../../utils/roles';
 import MenuItem from '../menuitem/menuitem.component';
 import { TYPE } from '../text/text.constants';
 import { TOGGLE_SIZE } from '../toggle/toggle.constants';
+import { ControlledMixin } from '../../utils/mixins/ControlledMixin';
 import { DEFAULTS, INDICATOR } from './menuitemcheckbox.constants';
 import styles from './menuitemcheckbox.styles';
 /**
@@ -59,7 +60,7 @@ import styles from './menuitemcheckbox.styles';
  * @event click - (React: onClick) This event is dispatched when the menuitemcheckbox is clicked.
  * @event focus - (React: onFocus) This event is dispatched when the menuitemcheckbox receives focus.
  */
-class MenuItemCheckbox extends MenuItem {
+class MenuItemCheckbox extends ControlledMixin(MenuItem) {
     constructor() {
         super();
         /**
@@ -81,12 +82,14 @@ class MenuItemCheckbox extends MenuItem {
     /**
      * Handles click events to toggle checked state
      * If the menuitemcheckbox is disabled, it does nothing.
-     * If the menuitemcheckbox is not disabled, it toggles the `checked` state between `true` and `false`.
+     * If the menuitemcheckbox is not disabled, it toggles checked if uncontrolled, and dispatches the 'change' event.
      */
     handleMouseClick() {
         if (this.disabled)
             return;
-        this.checked = !this.checked;
+        if (!this.controlled) {
+            this.checked = !this.checked;
+        }
         this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
     }
     update(changedProperties) {