@momentum-design/components 0.74.2 → 0.74.3

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import AlertChip from './components/alertchip';
+import Animation from './components/animation';
 import Appheader from './components/appheader';
 import Avatar from './components/avatar';
 import AvatarButton from './components/avatarbutton';
@@ -27,7 +28,13 @@ import Linksimple from './components/linksimple';
 import List from './components/list';
 import ListItem from './components/listitem';
 import Marker from './components/marker';
+import Menu from './components/menu';
+import MenuBar from './components/menubar';
 import MenuItem from './components/menuitem';
+import MenuItemCheckbox from './components/menuitemcheckbox';
+import MenuItemRadio from './components/menuitemradio';
+import MenuSection from './components/menusection';
+import MenuPopover from './components/menupopover';
 import OptGroup from './components/optgroup';
 import Option from './components/option';
 import Popover from './components/popover';
@@ -52,10 +59,6 @@ import Toggle from './components/toggle';
 import ToggleTip from './components/toggletip';
 import Tooltip from './components/tooltip';
 import VirtualizedList from './components/virtualizedlist';
-import MenuItemRadio from './components/menuitemradio';
-import MenuItemCheckbox from './components/menuitemcheckbox';
-import MenuSection from './components/menusection';
-import Animation from './components/animation';
 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';
@@ -63,6 +66,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, Animation, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonLink, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, Linksimple, List, ListItem, Marker, MenuItem, OptGroup, Option, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, Spinner, Tab, TabList, Text, Textarea, ThemeProvider, Toggle, VirtualizedList, StaticCheckbox, StaticRadio, StaticToggle, ToggleTip, Tooltip, MenuItemRadio, MenuItemCheckbox, MenuSection, };
+export { AlertChip, Animation, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonLink, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, Linksimple, List, ListItem, Marker, Menu, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, OptGroup, Option, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, Spinner, StaticCheckbox, StaticRadio, StaticToggle, Tab, TabList, Text, Textarea, ThemeProvider, Toggle, ToggleTip, Tooltip, MenuSection, VirtualizedList, };
 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

@@ -1,5 +1,6 @@
 // Components Imports
 import AlertChip from './components/alertchip';
+import Animation from './components/animation';
 import Appheader from './components/appheader';
 import Avatar from './components/avatar';
 import AvatarButton from './components/avatarbutton';
@@ -28,7 +29,13 @@ import Linksimple from './components/linksimple';
 import List from './components/list';
 import ListItem from './components/listitem';
 import Marker from './components/marker';
+import Menu from './components/menu';
+import MenuBar from './components/menubar';
 import MenuItem from './components/menuitem';
+import MenuItemCheckbox from './components/menuitemcheckbox';
+import MenuItemRadio from './components/menuitemradio';
+import MenuSection from './components/menusection';
+import MenuPopover from './components/menupopover';
 import OptGroup from './components/optgroup';
 import Option from './components/option';
 import Popover from './components/popover';
@@ -53,14 +60,10 @@ import Toggle from './components/toggle';
 import ToggleTip from './components/toggletip';
 import Tooltip from './components/tooltip';
 import VirtualizedList from './components/virtualizedlist';
-import MenuItemRadio from './components/menuitemradio';
-import MenuItemCheckbox from './components/menuitemcheckbox';
-import MenuSection from './components/menusection';
-import Animation from './components/animation';
 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, Animation, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonLink, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, Linksimple, List, ListItem, Marker, MenuItem, OptGroup, Option, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, Spinner, Tab, TabList, Text, Textarea, ThemeProvider, Toggle, VirtualizedList, StaticCheckbox, StaticRadio, StaticToggle, ToggleTip, Tooltip, MenuItemRadio, MenuItemCheckbox, MenuSection, };
+export { AlertChip, Animation, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonLink, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, Linksimple, List, ListItem, Marker, Menu, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, OptGroup, Option, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, Spinner, StaticCheckbox, StaticRadio, StaticToggle, Tab, TabList, Text, Textarea, ThemeProvider, Toggle, ToggleTip, Tooltip, MenuSection, VirtualizedList, };
 // Constants / Utils Exports
 export { inMemoryCache, webAPIIconsCache, BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES };

package/dist/react/index.d.ts

@@ -1,6 +1,6 @@
-export { default as Appheader } from './appheader';
 export { default as AlertChip } from './alertchip';
 export { default as Animation } from './animation';
+export { default as Appheader } from './appheader';
 export { default as Avatar } from './avatar';
 export { default as AvatarButton } from './avatarbutton';
 export { default as Badge } from './badge';
@@ -30,9 +30,12 @@ export { default as Linksimple } from './linksimple';
 export { default as List } from './list';
 export { default as ListItem } from './listitem';
 export { default as Marker } from './marker';
+export { default as Menu } from './menu';
+export { default as MenuBar } from './menubar';
 export { default as MenuItem } from './menuitem';
 export { default as MenuItemCheckbox } from './menuitemcheckbox';
 export { default as MenuItemRadio } from './menuitemradio';
+export { default as MenuPopover } from './menupopover';
 export { default as MenuSection } from './menusection';
 export { default as OptGroup } from './optgroup';
 export { default as Option } from './option';

package/dist/react/index.js

@@ -1,6 +1,6 @@
-export { default as Appheader } from './appheader';
 export { default as AlertChip } from './alertchip';
 export { default as Animation } from './animation';
+export { default as Appheader } from './appheader';
 export { default as Avatar } from './avatar';
 export { default as AvatarButton } from './avatarbutton';
 export { default as Badge } from './badge';
@@ -30,9 +30,12 @@ export { default as Linksimple } from './linksimple';
 export { default as List } from './list';
 export { default as ListItem } from './listitem';
 export { default as Marker } from './marker';
+export { default as Menu } from './menu';
+export { default as MenuBar } from './menubar';
 export { default as MenuItem } from './menuitem';
 export { default as MenuItemCheckbox } from './menuitemcheckbox';
 export { default as MenuItemRadio } from './menuitemradio';
+export { default as MenuPopover } from './menupopover';
 export { default as MenuSection } from './menusection';
 export { default as OptGroup } from './optgroup';
 export { default as Option } from './option';

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

@@ -19,6 +19,7 @@ import Component from '../../components/listitem';
  * @tagname mdc-listitem
  *
  * @dependency mdc-text
+ * @dependency mdc-tooltip
  *
  * @slot leading-controls - slot for list item controls to appear of leading end.
  * @slot leading-text-primary-label - slot for list item primary label.

package/dist/react/listitem/index.js

@@ -21,6 +21,7 @@ import { TAG_NAME } from '../../components/listitem/listitem.constants';
  * @tagname mdc-listitem
  *
  * @dependency mdc-text
+ * @dependency mdc-tooltip
  *
  * @slot leading-controls - slot for list item controls to appear of leading end.
  * @slot leading-text-primary-label - slot for list item primary label.

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

@@ -0,0 +1,13 @@
+import Component from '../../components/menu';
+/**
+ * mdc-menu component is used to display a group of menu items. It is used as a container to wrap menu items.
+ * It contains the menu header component.
+ *
+ * @dependency mdc-text
+ *
+ * @tagname mdc-menu
+ *
+ * @slot default - This is a default/unnamed slot
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+export default reactWrapper;

package/dist/react/menu/index.js

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/menu';
+import { TAG_NAME } from '../../components/menu/menu.constants';
+/**
+ * mdc-menu component is used to display a group of menu items. It is used as a container to wrap menu items.
+ * It contains the menu header component.
+ *
+ * @dependency mdc-text
+ *
+ * @tagname mdc-menu
+ *
+ * @slot default - This is a default/unnamed slot
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {},
+    displayName: 'Menu',
+});
+export default reactWrapper;

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

@@ -0,0 +1,23 @@
+import Component from '../../components/menubar';
+/**
+ * Menubar is a navigational menu component that provides a horizontal (default) or vertical fixed list of menu items,
+ * with support for nested submenus and keyboard navigation. It serves as a container
+ * for menu items and manages their interaction patterns, including:
+ * - Keyboard navigation (arrow keys, Home, End)
+ * - Menu item activation (Enter/Space)
+ * - Submenu toggling (Right/Left arrow keys)
+ * - Focus management
+ * - Support for both horizontal and vertical orientations
+ * - Integration with MenuPopover for nested menus
+ *
+ * A menubar will contain a set of menu items and their associated popovers.
+ * Each menu item can have a popover for nested menus.
+ *
+ * The component automatically handles ARIA attributes and follows WAI-ARIA menu design patterns.
+ * It works in conjunction with `mdc-menuitem` and `mdc-menupopover` to create accessible menu structures.
+ *
+ * @tagname mdc-menubar
+ * @slot default - Contains the menu items and their associated popovers
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+export default reactWrapper;

package/dist/react/menubar/index.js

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/menubar';
+import { TAG_NAME } from '../../components/menubar/menubar.constants';
+/**
+ * Menubar is a navigational menu component that provides a horizontal (default) or vertical fixed list of menu items,
+ * with support for nested submenus and keyboard navigation. It serves as a container
+ * for menu items and manages their interaction patterns, including:
+ * - Keyboard navigation (arrow keys, Home, End)
+ * - Menu item activation (Enter/Space)
+ * - Submenu toggling (Right/Left arrow keys)
+ * - Focus management
+ * - Support for both horizontal and vertical orientations
+ * - Integration with MenuPopover for nested menus
+ *
+ * A menubar will contain a set of menu items and their associated popovers.
+ * Each menu item can have a popover for nested menus.
+ *
+ * The component automatically handles ARIA attributes and follows WAI-ARIA menu design patterns.
+ * It works in conjunction with `mdc-menuitem` and `mdc-menupopover` to create accessible menu structures.
+ *
+ * @tagname mdc-menubar
+ * @slot default - Contains the menu items and their associated popovers
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {},
+    displayName: 'MenuBar',
+});
+export default reactWrapper;

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

@@ -10,6 +10,8 @@ import Component from '../../components/menuitem';
  * Please use mdc-menu as a parent element even when there is only menuitem for a11y purpose.
  *
  * @dependency mdc-text
+ * @dependency mdc-icon
+ * @dependency mdc-tooltip
  *
  * @tagname mdc-menuitem
  *

package/dist/react/menuitem/index.js

@@ -12,6 +12,8 @@ import { TAG_NAME } from '../../components/menuitem/menuitem.constants';
  * Please use mdc-menu as a parent element even when there is only menuitem for a11y purpose.
  *
  * @dependency mdc-text
+ * @dependency mdc-icon
+ * @dependency mdc-tooltip
  *
  * @tagname mdc-menuitem
  *

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

@@ -0,0 +1,29 @@
+import { type EventName } from '@lit/react';
+import Component from '../../components/menupopover';
+/**
+ * A popover menu component that displays a list of menu items in a floating container.
+ * It's designed to work in conjunction with `mdc-menubar` and `mdc-menuitem` to create
+ * accessible, nested menu structures with the following features:
+ * - Appears adjacent to the triggering menu item
+ * - Supports keyboard navigation (arrow keys, Home, End)
+ * - Manages focus trapping when open
+ * - Closes on Escape key or outside click
+ * - Supports both mouse and keyboard interactions
+ * - Automatically handles ARIA attributes for accessibility
+ *
+ * The component extends `mdc-popover` and adds menu-specific behaviors and styling.
+ * When nested within another `mdc-menupopover`, it automatically adjusts its behavior
+ * to work as a submenu (right-aligned, shows on hover).
+ *
+ * The orientation of the menu popover is always set to `vertical`.
+ *
+ * @tagname mdc-menupopover
+ * @slot default - Contains the menu items to be displayed in the popover
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
+    onShown: EventName<Event>;
+    onHidden: EventName<Event>;
+    onCreated: EventName<Event>;
+    onDestroyed: EventName<Event>;
+}>;
+export default reactWrapper;

package/dist/react/menupopover/index.js

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/menupopover';
+import { TAG_NAME } from '../../components/menupopover/menupopover.constants';
+/**
+ * A popover menu component that displays a list of menu items in a floating container.
+ * It's designed to work in conjunction with `mdc-menubar` and `mdc-menuitem` to create
+ * accessible, nested menu structures with the following features:
+ * - Appears adjacent to the triggering menu item
+ * - Supports keyboard navigation (arrow keys, Home, End)
+ * - Manages focus trapping when open
+ * - Closes on Escape key or outside click
+ * - Supports both mouse and keyboard interactions
+ * - Automatically handles ARIA attributes for accessibility
+ *
+ * The component extends `mdc-popover` and adds menu-specific behaviors and styling.
+ * When nested within another `mdc-menupopover`, it automatically adjusts its behavior
+ * to work as a submenu (right-aligned, shows on hover).
+ *
+ * The orientation of the menu popover is always set to `vertical`.
+ *
+ * @tagname mdc-menupopover
+ * @slot default - Contains the menu items to be displayed in the popover
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {
+        onShown: 'shown',
+        onHidden: 'hidden',
+        onCreated: 'created',
+        onDestroyed: 'destroyed',
+    },
+    displayName: 'MenuPopover',
+});
+export default reactWrapper;

package/dist/utils/keys.d.ts

@@ -1,5 +1,7 @@
 declare const KEYS: {
     readonly ARROW_DOWN: "ArrowDown";
+    readonly ARROW_LEFT: "ArrowLeft";
+    readonly ARROW_RIGHT: "ArrowRight";
     readonly ARROW_UP: "ArrowUp";
     readonly END: "End";
     readonly ENTER: "Enter";

package/dist/utils/keys.js

@@ -1,5 +1,7 @@
 const KEYS = {
     ARROW_DOWN: 'ArrowDown',
+    ARROW_LEFT: 'ArrowLeft',
+    ARROW_RIGHT: 'ArrowRight',
     ARROW_UP: 'ArrowUp',
     END: 'End',
     ENTER: 'Enter',

package/dist/utils/mixins/MenuMixin.d.ts

@@ -0,0 +1,12 @@
+import { LitElement } from 'lit';
+import type { Orientation } from '../../components/menubar/menubar.types';
+import type { Constructor } from './index.types';
+export declare class MenuMixinInterface {
+    ariaOrientation: Orientation;
+    protected handleKeyDown(event: KeyboardEvent): void;
+    protected handleMouseClick(event: MouseEvent): void;
+    protected resetTabIndexAndSetActiveTabIndex(newIndex: number): void;
+    protected setTabIndexOnMouseClick(event: MouseEvent): void;
+    protected updatePopoverPlacementBasedOnOrientation(): void;
+}
+export declare const MenuMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<MenuMixinInterface> & T;