@momentum-design/components 0.66.3 → 0.66.4

package/dist/index.d.ts

@@ -51,6 +51,8 @@ import Tooltip from './components/tooltip';
 import ToggleTip from './components/toggletip';
 import VirtualizedList from './components/virtualizedlist';
 import MenuItem from './components/menuitem';
+import MenuItemRadio from './components/menuitemradio';
+import MenuItemCheckbox from './components/menuitemcheckbox';
 import type { BadgeType } from './components/badge/badge.types';
 import type { ButtonColor, ButtonVariant, IconButtonSize, PillButtonSize } from './components/button/button.types';
 import type { PopoverPlacement } from './components/popover/popover.types';
@@ -58,6 +60,6 @@ import type { SpinnerSize, SpinnerVariant } from './components/spinner/spinner.t
 import type { TextType } from './components/text/text.types';
 import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
 import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES } from './components/button/button.constants';
-export { AlertChip, Avatar, AvatarButton, Badge, Bullet, Button, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, List, ListItem, Marker, Popover, Presence, Radio, RadioGroup, Spinner, Tab, Text, ThemeProvider, Toggle, VirtualizedList, Option, OptGroup, Progressbar, ScreenreaderAnnouncer, StaticCheckbox, StaticRadio, StaticToggle, Textarea, ToggleTip, Tooltip, Searchfield, Brandvisual, Appheader, Select, TabList, Progressspinner, ButtonLink, Linksimple, MenuItem, };
+export { AlertChip, Avatar, AvatarButton, Badge, Bullet, Button, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, List, ListItem, Marker, Popover, Presence, Radio, RadioGroup, Spinner, Tab, Text, ThemeProvider, Toggle, VirtualizedList, Option, OptGroup, Progressbar, ScreenreaderAnnouncer, StaticCheckbox, StaticRadio, StaticToggle, Textarea, ToggleTip, Tooltip, Searchfield, Brandvisual, Appheader, Select, TabList, Progressspinner, ButtonLink, Linksimple, MenuItem, MenuItemRadio, MenuItemCheckbox, };
 export type { TextType, SpinnerSize, SpinnerVariant, PopoverPlacement, BadgeType, IconButtonSize, PillButtonSize, ButtonVariant, ButtonColor, };
 export { inMemoryCache, webAPIIconsCache, BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES };

package/dist/index.js

@@ -52,10 +52,12 @@ import Tooltip from './components/tooltip';
 import ToggleTip from './components/toggletip';
 import VirtualizedList from './components/virtualizedlist';
 import MenuItem from './components/menuitem';
+import MenuItemRadio from './components/menuitemradio';
+import MenuItemCheckbox from './components/menuitemcheckbox';
 import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
 // Constants / Utils Imports
 import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES, } from './components/button/button.constants';
 // Components Exports
-export { AlertChip, Avatar, AvatarButton, Badge, Bullet, Button, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, List, ListItem, Marker, Popover, Presence, Radio, RadioGroup, Spinner, Tab, Text, ThemeProvider, Toggle, VirtualizedList, Option, OptGroup, Progressbar, ScreenreaderAnnouncer, StaticCheckbox, StaticRadio, StaticToggle, Textarea, ToggleTip, Tooltip, Searchfield, Brandvisual, Appheader, Select, TabList, Progressspinner, ButtonLink, Linksimple, MenuItem, };
+export { AlertChip, Avatar, AvatarButton, Badge, Bullet, Button, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, List, ListItem, Marker, Popover, Presence, Radio, RadioGroup, Spinner, Tab, Text, ThemeProvider, Toggle, VirtualizedList, Option, OptGroup, Progressbar, ScreenreaderAnnouncer, StaticCheckbox, StaticRadio, StaticToggle, Textarea, ToggleTip, Tooltip, Searchfield, Brandvisual, Appheader, Select, TabList, Progressspinner, ButtonLink, Linksimple, MenuItem, MenuItemRadio, MenuItemCheckbox, };
 // Constants / Utils Exports
 export { inMemoryCache, webAPIIconsCache, BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES };

package/dist/react/index.d.ts

@@ -29,6 +29,8 @@ export { default as List } from './list';
 export { default as ListItem } from './listitem';
 export { default as Marker } from './marker';
 export { default as MenuItem } from './menuitem';
+export { default as MenuItemCheckbox } from './menuitemcheckbox';
+export { default as MenuItemRadio } from './menuitemradio';
 export { default as OptGroup } from './optgroup';
 export { default as Option } from './option';
 export { default as Popover } from './popover';

package/dist/react/index.js

@@ -29,6 +29,8 @@ export { default as List } from './list';
 export { default as ListItem } from './listitem';
 export { default as Marker } from './marker';
 export { default as MenuItem } from './menuitem';
+export { default as MenuItemCheckbox } from './menuitemcheckbox';
+export { default as MenuItemRadio } from './menuitemradio';
 export { default as OptGroup } from './optgroup';
 export { default as Option } from './option';
 export { default as Popover } from './popover';

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

@@ -0,0 +1,42 @@
+import { type EventName } from '@lit/react';
+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 `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/>
+ *
+ * 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`,
+ * 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.
+ *
+ * If a menuitemcheckbox is disabled, then the `aria-disabled` attribute is set to `true`.
+ *
+ * @dependency mdc-staticcheckbox
+ * @dependency mdc-statictoggle
+ * @dependency mdc-icon
+ *
+ * @tagname mdc-menuitemcheckbox
+ *
+ * @cssproperty --mdc-checkmark-indicator-color - Allows customization of the checkmark indicator color
+ *
+ * @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.
+ * @event focus - (React: onFocus) This event is dispatched when the menuitemcheckbox receives focus.
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
+    onChange: EventName<Event>;
+    onClick: EventName<MouseEvent>;
+    onFocus: EventName<FocusEvent>;
+    onKeyDown: EventName<KeyboardEvent>;
+    onKeyUp: EventName<KeyboardEvent>;
+}>;
+export default reactWrapper;

package/dist/react/menuitemcheckbox/index.js

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/menuitemcheckbox';
+import { TAG_NAME } from '../../components/menuitemcheckbox/menuitemcheckbox.constants';
+/**
+ * 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 `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/>
+ *
+ * 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`,
+ * 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.
+ *
+ * If a menuitemcheckbox is disabled, then the `aria-disabled` attribute is set to `true`.
+ *
+ * @dependency mdc-staticcheckbox
+ * @dependency mdc-statictoggle
+ * @dependency mdc-icon
+ *
+ * @tagname mdc-menuitemcheckbox
+ *
+ * @cssproperty --mdc-checkmark-indicator-color - Allows customization of the checkmark indicator color
+ *
+ * @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.
+ * @event focus - (React: onFocus) This event is dispatched when the menuitemcheckbox receives focus.
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {
+        onChange: 'change',
+        onClick: 'click',
+        onFocus: 'focus',
+        onKeyDown: 'keydown',
+        onKeyUp: 'keyup',
+    },
+    displayName: 'MenuItemCheckbox',
+});
+export default reactWrapper;

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

@@ -0,0 +1,30 @@
+import { type EventName } from '@lit/react';
+import Component from '../../components/menuitemradio';
+/**
+ * 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.
+ *
+ * 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`.
+ *
+ * @dependency mdc-staticradio
+ * @dependency mdc-text
+ *
+ * @tagname mdc-menuitemradio
+ *
+ * @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.
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
+    onChange: EventName<Event>;
+    onClick: EventName<MouseEvent>;
+    onFocus: EventName<FocusEvent>;
+    onKeyDown: EventName<KeyboardEvent>;
+    onKeyUp: EventName<KeyboardEvent>;
+}>;
+export default reactWrapper;

package/dist/react/menuitemradio/index.js

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/menuitemradio';
+import { TAG_NAME } from '../../components/menuitemradio/menuitemradio.constants';
+/**
+ * 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.
+ *
+ * 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`.
+ *
+ * @dependency mdc-staticradio
+ * @dependency mdc-text
+ *
+ * @tagname mdc-menuitemradio
+ *
+ * @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.
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {
+        onChange: 'change',
+        onClick: 'click',
+        onFocus: 'focus',
+        onKeyDown: 'keydown',
+        onKeyUp: 'keyup',
+    },
+    displayName: 'MenuItemRadio',
+});
+export default reactWrapper;

package/package.json

@@ -39,5 +39,5 @@
     "lit": "^3.2.0",
     "uuid": "^11.0.5"
   },
-  "version": "0.66.3"
+  "version": "0.66.4"
 }