@momentum-design/components 0.121.1 → 0.121.3

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

@@ -1,6 +1,7 @@
 import type { PropertyValues, CSSResult, TemplateResult } from 'lit';
 import MenuItem from '../menuitem/menuitem.component';
 import { Indicator } from './menuitemradio.types';
+declare const MenuItemRadio_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/ControlTypeMixin").ControlTypeMixinInterface> & typeof MenuItem;
 /**
  * A menuitemradio component is a checkable menuitem that is used in a menu.
  * A menuitemradio should be checked only one at a time. <br/>
@@ -56,7 +57,7 @@ import { Indicator } from './menuitemradio.types';
  * @csspart trailing-arrow - Allows customization of trailing arrow icon.
  * @csspart trailing-text - Allows customization of the trailing text part.
  */
-declare class MenuItemRadio extends MenuItem {
+declare class MenuItemRadio extends MenuItemRadio_base {
     /**
      * The aria-checked attribute is used to indicate that the menuitemradio is checked or not.
      * @default false

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

@@ -15,6 +15,7 @@ import MenuItem from '../menuitem/menuitem.component';
 import { TYPE } from '../text/text.constants';
 import { TAG_NAME as MENUSECTION_TAGNAME } from '../menusection/menusection.constants';
 import { TAG_NAME as MENUPOPOVER_TAGNAME } from '../menupopover/menupopover.constants';
+import { ControlTypeMixin } from '../../utils/mixins/ControlTypeMixin';
 import { INDICATOR, DEFAULTS } from './menuitemradio.constants';
 import styles from './menuitemradio.styles';
 /**
@@ -72,7 +73,7 @@ import styles from './menuitemradio.styles';
  * @csspart trailing-arrow - Allows customization of trailing arrow icon.
  * @csspart trailing-text - Allows customization of the trailing text part.
  */
-class MenuItemRadio extends MenuItem {
+class MenuItemRadio extends ControlTypeMixin(MenuItem) {
     constructor() {
         super();
         /**
@@ -121,8 +122,10 @@ class MenuItemRadio extends MenuItem {
     handleMouseClick() {
         if (this.disabled || this.checked)
             return;
-        this.updateOtherRadiosCheckedState();
-        this.checked = true;
+        if (this.controlType !== 'controlled') {
+            this.updateOtherRadiosCheckedState();
+            this.checked = true;
+        }
         this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
     }
     update(changedProperties) {

package/dist/custom-elements.json

@@ -22060,231 +22060,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/list/list.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "mdc-list component is used to display a group of list items. It is used as a container to wrap other list items.\n\nTo add a header to the list, use the `mdc-listheader` component and place it in the `list-header` slot.\n`mdc-listitem` components can be placed in the default slot.",
-          "name": "List",
-          "cssParts": [
-            {
-              "description": "The container slot around the list items",
-              "name": "container"
-            }
-          ],
-          "slots": [
-            {
-              "description": "This is a default/unnamed slot, where listitems can be placed.",
-              "name": "default"
-            },
-            {
-              "description": "This slot is used to pass a header for the list, which can be a `mdc-listheader` component.",
-              "name": "list-header"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "loop",
-              "type": {
-                "text": "'true' | 'false'"
-              },
-              "privacy": "public",
-              "description": "Whether to loop navigation when reaching the end of the list.\nIf 'true', pressing the down arrow on the last item will focus the first item,\nand pressing the up arrow on the first item will focus the last item.\nIf 'false', navigation will stop at the first or last item.",
-              "default": "''",
-              "attribute": "loop",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "initialFocus",
-              "type": {
-                "text": "number"
-              },
-              "privacy": "public",
-              "description": "The index of the item that should receive focus when the list is first rendered.\nIf the index is out of bounds, the first item (index 0) will receive focus.",
-              "default": "0",
-              "attribute": "initial-focus",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "itemsStore",
-              "default": "new ElementStore<ListItem>(this, { isValidItem: this.isValidItem, })"
-            },
-            {
-              "kind": "method",
-              "name": "getCurrentIndex",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "parameters": [
-                {
-                  "name": "target",
-                  "type": {
-                    "text": "HTMLElement | null"
-                  },
-                  "description": "The target element that triggered the event."
-                }
-              ],
-              "description": "Retrieves the current index of the item that triggered the event.",
-              "inheritedFrom": {
-                "name": "ListNavigationMixin",
-                "module": "utils/mixins/ListNavigationMixin.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "resetTabIndexes",
-              "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "index",
-                  "type": {
-                    "text": "number"
-                  },
-                  "description": "The index of the currently focused item."
-                }
-              ],
-              "description": "Reset all tabindex to -1 and set the tabindex of the current item to 0",
-              "inheritedFrom": {
-                "name": "ListNavigationMixin",
-                "module": "utils/mixins/ListNavigationMixin.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "resetTabIndexAndSetFocus",
-              "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "newIndex",
-                  "type": {
-                    "text": "number"
-                  },
-                  "description": "The index of the new item to focus."
-                },
-                {
-                  "name": "oldIndex",
-                  "optional": true,
-                  "type": {
-                    "text": "number"
-                  },
-                  "description": "The index of the currently focused item."
-                },
-                {
-                  "name": "focusNewItem",
-                  "default": "true",
-                  "description": "Call focus() on the new item or not. It should be false during firstUpdate"
-                }
-              ],
-              "description": "Resets the tabindex of the currently focused item and sets focus to a new item.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "inheritedFrom": {
-                "name": "ListNavigationMixin",
-                "module": "utils/mixins/ListNavigationMixin.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "resolveDirectionKey",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "key",
-                  "type": {
-                    "text": "string"
-                  },
-                  "description": "The key pressed by the user."
-                },
-                {
-                  "name": "isRtl",
-                  "type": {
-                    "text": "boolean"
-                  },
-                  "description": "A boolean indicating if the layout is right-to-left (RTL)."
-                }
-              ],
-              "description": "Resolves the key pressed by the user based on the direction of the layout.\nThis method is used to handle keyboard navigation in a right-to-left (RTL) layout.\nIt checks if the layout is RTL and adjusts the arrow keys accordingly.\nFor example, in RTL, the left arrow key behaves like the right arrow key and vice versa.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "inheritedFrom": {
-                "name": "ListNavigationMixin",
-                "module": "utils/mixins/ListNavigationMixin.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "shouldLoop",
-              "privacy": "private",
-              "inheritedFrom": {
-                "name": "ListNavigationMixin",
-                "module": "utils/mixins/ListNavigationMixin.js"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "loop",
-              "type": {
-                "text": "'true' | 'false'"
-              },
-              "description": "Whether to loop navigation when reaching the end of the list.\nIf 'true', pressing the down arrow on the last item will focus the first item,\nand pressing the up arrow on the first item will focus the last item.\nIf 'false', navigation will stop at the first or last item.",
-              "default": "''",
-              "fieldName": "loop"
-            },
-            {
-              "name": "initial-focus",
-              "type": {
-                "text": "number"
-              },
-              "description": "The index of the item that should receive focus when the list is first rendered.\nIf the index is out of bounds, the first item (index 0) will receive focus.",
-              "default": "0",
-              "fieldName": "initialFocus"
-            }
-          ],
-          "mixins": [
-            {
-              "name": "ListNavigationMixin",
-              "module": "/src/utils/mixins/ListNavigationMixin"
-            },
-            {
-              "name": "CaptureDestroyEventForChildElement",
-              "module": "/src/utils/mixins/lifecycle/CaptureDestroyEventForChildElement"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-list",
-          "jsDoc": "/**\n * mdc-list component is used to display a group of list items. It is used as a container to wrap other list items.\n *\n * To add a header to the list, use the `mdc-listheader` component and place it in the `list-header` slot.\n * `mdc-listitem` components can be placed in the default slot.\n *\n * @tagname mdc-list\n *\n * @slot default - This is a default/unnamed slot, where listitems can be placed.\n * @slot list-header - This slot is used to pass a header for the list, which can be a `mdc-listheader` component.\n *\n * @csspart container - The container slot around the list items\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "List",
-            "module": "components/list/list.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/listbox/listbox.component.js",
@@ -23249,6 +23024,231 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/list/list.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "mdc-list component is used to display a group of list items. It is used as a container to wrap other list items.\n\nTo add a header to the list, use the `mdc-listheader` component and place it in the `list-header` slot.\n`mdc-listitem` components can be placed in the default slot.",
+          "name": "List",
+          "cssParts": [
+            {
+              "description": "The container slot around the list items",
+              "name": "container"
+            }
+          ],
+          "slots": [
+            {
+              "description": "This is a default/unnamed slot, where listitems can be placed.",
+              "name": "default"
+            },
+            {
+              "description": "This slot is used to pass a header for the list, which can be a `mdc-listheader` component.",
+              "name": "list-header"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "loop",
+              "type": {
+                "text": "'true' | 'false'"
+              },
+              "privacy": "public",
+              "description": "Whether to loop navigation when reaching the end of the list.\nIf 'true', pressing the down arrow on the last item will focus the first item,\nand pressing the up arrow on the first item will focus the last item.\nIf 'false', navigation will stop at the first or last item.",
+              "default": "''",
+              "attribute": "loop",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "initialFocus",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "public",
+              "description": "The index of the item that should receive focus when the list is first rendered.\nIf the index is out of bounds, the first item (index 0) will receive focus.",
+              "default": "0",
+              "attribute": "initial-focus",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "itemsStore",
+              "default": "new ElementStore<ListItem>(this, { isValidItem: this.isValidItem, })"
+            },
+            {
+              "kind": "method",
+              "name": "getCurrentIndex",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "parameters": [
+                {
+                  "name": "target",
+                  "type": {
+                    "text": "HTMLElement | null"
+                  },
+                  "description": "The target element that triggered the event."
+                }
+              ],
+              "description": "Retrieves the current index of the item that triggered the event.",
+              "inheritedFrom": {
+                "name": "ListNavigationMixin",
+                "module": "utils/mixins/ListNavigationMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "resetTabIndexes",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "index",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The index of the currently focused item."
+                }
+              ],
+              "description": "Reset all tabindex to -1 and set the tabindex of the current item to 0",
+              "inheritedFrom": {
+                "name": "ListNavigationMixin",
+                "module": "utils/mixins/ListNavigationMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "resetTabIndexAndSetFocus",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "newIndex",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The index of the new item to focus."
+                },
+                {
+                  "name": "oldIndex",
+                  "optional": true,
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The index of the currently focused item."
+                },
+                {
+                  "name": "focusNewItem",
+                  "default": "true",
+                  "description": "Call focus() on the new item or not. It should be false during firstUpdate"
+                }
+              ],
+              "description": "Resets the tabindex of the currently focused item and sets focus to a new item.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "ListNavigationMixin",
+                "module": "utils/mixins/ListNavigationMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "resolveDirectionKey",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "key",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The key pressed by the user."
+                },
+                {
+                  "name": "isRtl",
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "A boolean indicating if the layout is right-to-left (RTL)."
+                }
+              ],
+              "description": "Resolves the key pressed by the user based on the direction of the layout.\nThis method is used to handle keyboard navigation in a right-to-left (RTL) layout.\nIt checks if the layout is RTL and adjusts the arrow keys accordingly.\nFor example, in RTL, the left arrow key behaves like the right arrow key and vice versa.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "ListNavigationMixin",
+                "module": "utils/mixins/ListNavigationMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "shouldLoop",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "ListNavigationMixin",
+                "module": "utils/mixins/ListNavigationMixin.js"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "loop",
+              "type": {
+                "text": "'true' | 'false'"
+              },
+              "description": "Whether to loop navigation when reaching the end of the list.\nIf 'true', pressing the down arrow on the last item will focus the first item,\nand pressing the up arrow on the first item will focus the last item.\nIf 'false', navigation will stop at the first or last item.",
+              "default": "''",
+              "fieldName": "loop"
+            },
+            {
+              "name": "initial-focus",
+              "type": {
+                "text": "number"
+              },
+              "description": "The index of the item that should receive focus when the list is first rendered.\nIf the index is out of bounds, the first item (index 0) will receive focus.",
+              "default": "0",
+              "fieldName": "initialFocus"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "ListNavigationMixin",
+              "module": "/src/utils/mixins/ListNavigationMixin"
+            },
+            {
+              "name": "CaptureDestroyEventForChildElement",
+              "module": "/src/utils/mixins/lifecycle/CaptureDestroyEventForChildElement"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-list",
+          "jsDoc": "/**\n * mdc-list component is used to display a group of list items. It is used as a container to wrap other list items.\n *\n * To add a header to the list, use the `mdc-listheader` component and place it in the `list-header` slot.\n * `mdc-listitem` components can be placed in the default slot.\n *\n * @tagname mdc-list\n *\n * @slot default - This is a default/unnamed slot, where listitems can be placed.\n * @slot list-header - This slot is used to pass a header for the list, which can be a `mdc-listheader` component.\n *\n * @csspart container - The container slot around the list items\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "List",
+            "module": "components/list/list.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/marker/marker.component.js",
@@ -25837,6 +25837,32 @@
               },
               "description": "Returns a checkmark icon if the indicator is set to checkmark and the checked state is true.\nIf the indicator is not set to checkmark or the checked state is false, it returns nothing.\n\nThe checkmark icon will always be positioned on the trailing side of the menuitem label."
             },
+            {
+              "kind": "field",
+              "name": "controlTypeProviderContext",
+              "privacy": "private",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "ControlTypeMixin",
+                "module": "utils/mixins/ControlTypeMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "controlType",
+              "type": {
+                "text": "ControlType | undefined"
+              },
+              "privacy": "public",
+              "description": "Indicates whether the component is controlled or uncontrolled.\n- 'controlled' it will not handle any interaction itself, e.g. toggling a checkbox.\n- 'uncontrolled' it will handle interactions\n- undefined it will get the value from controltypeprovider, or default to 'uncontrolled'",
+              "default": "undefined",
+              "attribute": "control-type",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "ControlTypeMixin",
+                "module": "utils/mixins/ControlTypeMixin.js"
+              }
+            },
             {
               "kind": "field",
               "name": "arrowPosition",
@@ -26339,6 +26365,19 @@
               "default": "'radio'",
               "fieldName": "indicator"
             },
+            {
+              "name": "control-type",
+              "type": {
+                "text": "ControlType | undefined"
+              },
+              "description": "Indicates whether the component is controlled or uncontrolled.\n- 'controlled' it will not handle any interaction itself, e.g. toggling a checkbox.\n- 'uncontrolled' it will handle interactions\n- undefined it will get the value from controltypeprovider, or default to 'uncontrolled'",
+              "default": "undefined",
+              "fieldName": "controlType",
+              "inheritedFrom": {
+                "name": "ControlTypeMixin",
+                "module": "src/utils/mixins/ControlTypeMixin.ts"
+              }
+            },
             {
               "name": "arrow-position",
               "type": {
@@ -26500,6 +26539,12 @@
               }
             }
           ],
+          "mixins": [
+            {
+              "name": "ControlTypeMixin",
+              "module": "/src/utils/mixins/ControlTypeMixin"
+            }
+          ],
           "superclass": {
             "name": "MenuItem",
             "module": "/src/components/menuitem/menuitem.component"

package/dist/react/index.d.ts

@@ -38,10 +38,10 @@ 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 ListBox } from './listbox';
 export { default as Listheader } from './listheader';
 export { default as ListItem } from './listitem';
+export { default as List } from './list';
 export { default as Marker } from './marker';
 export { default as MenuBar } from './menubar';
 export { default as MenuItem } from './menuitem';

package/dist/react/index.js

@@ -38,10 +38,10 @@ 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 ListBox } from './listbox';
 export { default as Listheader } from './listheader';
 export { default as ListItem } from './listitem';
+export { default as List } from './list';
 export { default as Marker } from './marker';
 export { default as MenuBar } from './menubar';
 export { default as MenuItem } from './menuitem';

package/dist/utils/mixins/ControlTypeMixin.js

@@ -12,6 +12,7 @@ import ControlTypeProvider from '../../components/controltypeprovider';
 import providerUtils from '../provider';
 import { DEFAULTS, VALID_VALUES } from '../../components/controltypeprovider/controltypeprovider.constants';
 export const ControlTypeMixin = (superClass) => {
+    // The tests for this mixin are in the menuitemcheckbox component
     class InnerMixinClass extends superClass {
         constructor() {
             super(...arguments);

package/package.json

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