@momentum-design/components 0.80.4 → 0.80.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (50) hide show
  1. package/dist/browser/index.js +601 -317
  2. package/dist/browser/index.js.map +4 -4
  3. package/dist/components/list/list.component.d.ts +1 -1
  4. package/dist/components/listitem/listitem.component.js +10 -3
  5. package/dist/components/menupopover/menupopover.component.js +2 -1
  6. package/dist/components/navitem/index.d.ts +11 -0
  7. package/dist/components/navitem/index.js +8 -0
  8. package/dist/components/navitem/navitem.component.d.ts +125 -0
  9. package/dist/components/navitem/navitem.component.js +251 -0
  10. package/dist/components/navitem/navitem.constants.d.ts +16 -0
  11. package/dist/components/navitem/navitem.constants.js +21 -0
  12. package/dist/components/navitem/navitem.styles.d.ts +2 -0
  13. package/dist/components/navitem/navitem.styles.js +146 -0
  14. package/dist/components/navitem/navitem.types.d.ts +11 -0
  15. package/dist/components/navitem/navitem.types.js +1 -0
  16. package/dist/components/navitemlist/index.d.ts +7 -0
  17. package/dist/components/navitemlist/index.js +4 -0
  18. package/dist/components/navitemlist/navitemlist.component.d.ts +51 -0
  19. package/dist/components/navitemlist/navitemlist.component.js +92 -0
  20. package/dist/components/navitemlist/navitemlist.constants.d.ts +2 -0
  21. package/dist/components/navitemlist/navitemlist.constants.js +3 -0
  22. package/dist/components/navitemlist/navitemlist.styles.d.ts +2 -0
  23. package/dist/components/navitemlist/navitemlist.styles.js +23 -0
  24. package/dist/components/sidenavigation/index.d.ts +10 -0
  25. package/dist/components/sidenavigation/index.js +7 -0
  26. package/dist/components/sidenavigation/sidenavigation.component.d.ts +144 -0
  27. package/dist/components/sidenavigation/sidenavigation.component.js +244 -0
  28. package/dist/components/sidenavigation/sidenavigation.constants.d.ts +11 -0
  29. package/dist/components/sidenavigation/sidenavigation.constants.js +12 -0
  30. package/dist/components/sidenavigation/sidenavigation.context.d.ts +15 -0
  31. package/dist/components/sidenavigation/sidenavigation.context.js +78 -0
  32. package/dist/components/sidenavigation/sidenavigation.styles.d.ts +2 -0
  33. package/dist/components/sidenavigation/sidenavigation.styles.js +68 -0
  34. package/dist/components/sidenavigation/sidenavigation.types.d.ts +7 -0
  35. package/dist/components/sidenavigation/sidenavigation.types.js +1 -0
  36. package/dist/custom-elements.json +2512 -524
  37. package/dist/index.d.ts +4 -1
  38. package/dist/index.js +4 -1
  39. package/dist/react/index.d.ts +5 -2
  40. package/dist/react/index.js +5 -2
  41. package/dist/react/navitem/index.d.ts +43 -0
  42. package/dist/react/navitem/index.js +51 -0
  43. package/dist/react/navitemlist/index.d.ts +13 -0
  44. package/dist/react/navitemlist/index.js +22 -0
  45. package/dist/react/sidenavigation/index.d.ts +56 -0
  46. package/dist/react/sidenavigation/index.js +64 -0
  47. package/dist/utils/mixins/MenuMixin.js +39 -14
  48. package/dist/utils/roles.d.ts +1 -0
  49. package/dist/utils/roles.js +1 -0
  50. package/package.json +1 -1
package/dist/index.d.ts CHANGED
@@ -35,6 +35,8 @@ import MenuItem from './components/menuitem';
35
35
  import MenuItemCheckbox from './components/menuitemcheckbox';
36
36
  import MenuItemRadio from './components/menuitemradio';
37
37
  import MenuPopover from './components/menupopover';
38
+ import NavItem from './components/navitem';
39
+ import NavItemList from './components/navitemlist';
38
40
  import MenuSection from './components/menusection';
39
41
  import OptGroup from './components/optgroup';
40
42
  import Option from './components/option';
@@ -47,6 +49,7 @@ import RadioGroup from './components/radiogroup';
47
49
  import ScreenreaderAnnouncer from './components/screenreaderannouncer';
48
50
  import Searchfield from './components/searchfield';
49
51
  import Select from './components/select';
52
+ import SideNavigation from './components/sidenavigation';
50
53
  import Spinner from './components/spinner';
51
54
  import StaticCheckbox from './components/staticcheckbox';
52
55
  import StaticRadio from './components/staticradio';
@@ -67,6 +70,6 @@ import type { SpinnerSize, SpinnerVariant } from './components/spinner/spinner.t
67
70
  import type { TextType } from './components/text/text.types';
68
71
  import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
69
72
  import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES } from './components/button/button.constants';
70
- export { AlertChip, Animation, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonLink, ButtonGroup, 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, };
73
+ export { AlertChip, Animation, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonLink, ButtonGroup, 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, NavItem, NavItemList, OptGroup, Option, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, SideNavigation, Spinner, StaticCheckbox, StaticRadio, StaticToggle, Tab, TabList, Text, Textarea, ThemeProvider, Toggle, ToggleTip, Tooltip, MenuSection, VirtualizedList, };
71
74
  export type { TextType, SpinnerSize, SpinnerVariant, PopoverPlacement, BadgeType, IconButtonSize, PillButtonSize, ButtonVariant, ButtonColor, };
72
75
  export { inMemoryCache, webAPIIconsCache, BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES };
package/dist/index.js CHANGED
@@ -36,6 +36,8 @@ import MenuItem from './components/menuitem';
36
36
  import MenuItemCheckbox from './components/menuitemcheckbox';
37
37
  import MenuItemRadio from './components/menuitemradio';
38
38
  import MenuPopover from './components/menupopover';
39
+ import NavItem from './components/navitem';
40
+ import NavItemList from './components/navitemlist';
39
41
  import MenuSection from './components/menusection';
40
42
  import OptGroup from './components/optgroup';
41
43
  import Option from './components/option';
@@ -48,6 +50,7 @@ import RadioGroup from './components/radiogroup';
48
50
  import ScreenreaderAnnouncer from './components/screenreaderannouncer';
49
51
  import Searchfield from './components/searchfield';
50
52
  import Select from './components/select';
53
+ import SideNavigation from './components/sidenavigation';
51
54
  import Spinner from './components/spinner';
52
55
  import StaticCheckbox from './components/staticcheckbox';
53
56
  import StaticRadio from './components/staticradio';
@@ -65,6 +68,6 @@ import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
65
68
  // Constants / Utils Imports
66
69
  import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES, } from './components/button/button.constants';
67
70
  // Components Exports
68
- export { AlertChip, Animation, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonLink, ButtonGroup, 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, };
71
+ export { AlertChip, Animation, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonLink, ButtonGroup, 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, NavItem, NavItemList, OptGroup, Option, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, SideNavigation, Spinner, StaticCheckbox, StaticRadio, StaticToggle, Tab, TabList, Text, Textarea, ThemeProvider, Toggle, ToggleTip, Tooltip, MenuSection, VirtualizedList, };
69
72
  // Constants / Utils Exports
70
73
  export { inMemoryCache, webAPIIconsCache, BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES };
@@ -1,6 +1,6 @@
1
1
  export { default as AlertChip } from './alertchip';
2
- export { default as Appheader } from './appheader';
3
2
  export { default as Animation } from './animation';
3
+ export { default as Appheader } from './appheader';
4
4
  export { default as Avatar } from './avatar';
5
5
  export { default as AvatarButton } from './avatarbutton';
6
6
  export { default as Badge } from './badge';
@@ -21,8 +21,8 @@ export { default as Dialog } from './dialog';
21
21
  export { default as Divider } from './divider';
22
22
  export { default as FilterChip } from './filterchip';
23
23
  export { default as FormfieldGroup } from './formfieldgroup';
24
- export { default as FormfieldWrapper } from './formfieldwrapper';
25
24
  export { default as Icon } from './icon';
25
+ export { default as FormfieldWrapper } from './formfieldwrapper';
26
26
  export { default as IconProvider } from './iconprovider';
27
27
  export { default as Input } from './input';
28
28
  export { default as InputChip } from './inputchip';
@@ -38,6 +38,8 @@ export { default as MenuItemCheckbox } from './menuitemcheckbox';
38
38
  export { default as MenuItemRadio } from './menuitemradio';
39
39
  export { default as MenuPopover } from './menupopover';
40
40
  export { default as MenuSection } from './menusection';
41
+ export { default as NavItem } from './navitem';
42
+ export { default as NavItemList } from './navitemlist';
41
43
  export { default as OptGroup } from './optgroup';
42
44
  export { default as Option } from './option';
43
45
  export { default as Popover } from './popover';
@@ -49,6 +51,7 @@ export { default as RadioGroup } from './radiogroup';
49
51
  export { default as ScreenreaderAnnouncer } from './screenreaderannouncer';
50
52
  export { default as Searchfield } from './searchfield';
51
53
  export { default as Select } from './select';
54
+ export { default as SideNavigation } from './sidenavigation';
52
55
  export { default as Spinner } from './spinner';
53
56
  export { default as StaticCheckbox } from './staticcheckbox';
54
57
  export { default as StaticRadio } from './staticradio';
@@ -1,6 +1,6 @@
1
1
  export { default as AlertChip } from './alertchip';
2
- export { default as Appheader } from './appheader';
3
2
  export { default as Animation } from './animation';
3
+ export { default as Appheader } from './appheader';
4
4
  export { default as Avatar } from './avatar';
5
5
  export { default as AvatarButton } from './avatarbutton';
6
6
  export { default as Badge } from './badge';
@@ -21,8 +21,8 @@ export { default as Dialog } from './dialog';
21
21
  export { default as Divider } from './divider';
22
22
  export { default as FilterChip } from './filterchip';
23
23
  export { default as FormfieldGroup } from './formfieldgroup';
24
- export { default as FormfieldWrapper } from './formfieldwrapper';
25
24
  export { default as Icon } from './icon';
25
+ export { default as FormfieldWrapper } from './formfieldwrapper';
26
26
  export { default as IconProvider } from './iconprovider';
27
27
  export { default as Input } from './input';
28
28
  export { default as InputChip } from './inputchip';
@@ -38,6 +38,8 @@ export { default as MenuItemCheckbox } from './menuitemcheckbox';
38
38
  export { default as MenuItemRadio } from './menuitemradio';
39
39
  export { default as MenuPopover } from './menupopover';
40
40
  export { default as MenuSection } from './menusection';
41
+ export { default as NavItem } from './navitem';
42
+ export { default as NavItemList } from './navitemlist';
41
43
  export { default as OptGroup } from './optgroup';
42
44
  export { default as Option } from './option';
43
45
  export { default as Popover } from './popover';
@@ -49,6 +51,7 @@ export { default as RadioGroup } from './radiogroup';
49
51
  export { default as ScreenreaderAnnouncer } from './screenreaderannouncer';
50
52
  export { default as Searchfield } from './searchfield';
51
53
  export { default as Select } from './select';
54
+ export { default as SideNavigation } from './sidenavigation';
52
55
  export { default as Spinner } from './spinner';
53
56
  export { default as StaticCheckbox } from './staticcheckbox';
54
57
  export { default as StaticRadio } from './staticradio';
@@ -0,0 +1,43 @@
1
+ import { type EventName } from '@lit/react';
2
+ import Component from '../../components/navitem';
3
+ /**
4
+ * `mdc-navitem` is a menuitem styled to work as a navigation tab.
5
+ * It supports a leading icon, optional badge and dynamic text rendering.
6
+ *
7
+ * Note: `mdc-navitem` is intended to be used inside `mdc-navitemlist` as part of the sideNavigation
8
+ * component. Its structure, spacing, and interactions are designed to align with
9
+ * the visual and functional requirements of side navigation layouts.
10
+ *
11
+ * @tagname mdc-navitem
12
+ *
13
+ * @dependency mdc-icon
14
+ * @dependency mdc-text
15
+ * @dependency mdc-badge
16
+ * @dependency mdc-tooltip
17
+ *
18
+ * @event click - (React: onClick) This event is dispatched when the navitem is clicked.
19
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the navitem.
20
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the navitem.
21
+ * @event focus - (React: onFocus) This event is dispatched when the navitem receives focus.
22
+ * @event activechange - (React: onActiveChange) Dispatched when the active state of the navitem changes.
23
+ *
24
+ * @cssproperty --mdc-navitem-color - Text color of the navitem in its normal state.
25
+ * @cssproperty --mdc-navitem-border-color - Border color of the navitem in its normal state.
26
+ * @cssproperty --mdc-navitem-disabled-color - Text color of the navitem when disabled.
27
+ * @cssproperty --mdc-navitem-expanded-width - Width of the navItem when expanded.
28
+ * @cssproperty --mdc-navitem-hover-background-color - Background color of the navitem when hovered.
29
+ * @cssproperty --mdc-navitem-hover-active-background-color - Background color of the active navitem when hovered.
30
+ * @cssproperty --mdc-navitem-pressed-background-color - Background color of the navitem when pressed.
31
+ * @cssproperty --mdc-navitem-pressed-active-background-color - Background color of the active navitem when pressed.
32
+ * @cssproperty --mdc-navitem-disabled-background-color - Background color of the navitem when disabled.
33
+ * @cssproperty --mdc-navitem-disabled-active-background-color - Background color of the active navitem when disabled.
34
+ * @cssproperty --mdc-navitem-rest-active-background-color - Background color of the active nav item in its rest state.
35
+ */
36
+ declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
37
+ onActiveChange: EventName<Event>;
38
+ onClick: EventName<MouseEvent>;
39
+ onKeyDown: EventName<KeyboardEvent>;
40
+ onKeyUp: EventName<KeyboardEvent>;
41
+ onFocus: EventName<FocusEvent>;
42
+ }>;
43
+ export default reactWrapper;
@@ -0,0 +1,51 @@
1
+ import * as React from 'react';
2
+ import { createComponent } from '@lit/react';
3
+ import Component from '../../components/navitem';
4
+ import { TAG_NAME } from '../../components/navitem/navitem.constants';
5
+ /**
6
+ * `mdc-navitem` is a menuitem styled to work as a navigation tab.
7
+ * It supports a leading icon, optional badge and dynamic text rendering.
8
+ *
9
+ * Note: `mdc-navitem` is intended to be used inside `mdc-navitemlist` as part of the sideNavigation
10
+ * component. Its structure, spacing, and interactions are designed to align with
11
+ * the visual and functional requirements of side navigation layouts.
12
+ *
13
+ * @tagname mdc-navitem
14
+ *
15
+ * @dependency mdc-icon
16
+ * @dependency mdc-text
17
+ * @dependency mdc-badge
18
+ * @dependency mdc-tooltip
19
+ *
20
+ * @event click - (React: onClick) This event is dispatched when the navitem is clicked.
21
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the navitem.
22
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the navitem.
23
+ * @event focus - (React: onFocus) This event is dispatched when the navitem receives focus.
24
+ * @event activechange - (React: onActiveChange) Dispatched when the active state of the navitem changes.
25
+ *
26
+ * @cssproperty --mdc-navitem-color - Text color of the navitem in its normal state.
27
+ * @cssproperty --mdc-navitem-border-color - Border color of the navitem in its normal state.
28
+ * @cssproperty --mdc-navitem-disabled-color - Text color of the navitem when disabled.
29
+ * @cssproperty --mdc-navitem-expanded-width - Width of the navItem when expanded.
30
+ * @cssproperty --mdc-navitem-hover-background-color - Background color of the navitem when hovered.
31
+ * @cssproperty --mdc-navitem-hover-active-background-color - Background color of the active navitem when hovered.
32
+ * @cssproperty --mdc-navitem-pressed-background-color - Background color of the navitem when pressed.
33
+ * @cssproperty --mdc-navitem-pressed-active-background-color - Background color of the active navitem when pressed.
34
+ * @cssproperty --mdc-navitem-disabled-background-color - Background color of the navitem when disabled.
35
+ * @cssproperty --mdc-navitem-disabled-active-background-color - Background color of the active navitem when disabled.
36
+ * @cssproperty --mdc-navitem-rest-active-background-color - Background color of the active nav item in its rest state.
37
+ */
38
+ const reactWrapper = createComponent({
39
+ tagName: TAG_NAME,
40
+ elementClass: Component,
41
+ react: React,
42
+ events: {
43
+ onActiveChange: 'activechange',
44
+ onClick: 'click',
45
+ onKeyDown: 'keydown',
46
+ onKeyUp: 'keyup',
47
+ onFocus: 'focus',
48
+ },
49
+ displayName: 'NavItem',
50
+ });
51
+ export default reactWrapper;
@@ -0,0 +1,13 @@
1
+ import Component from '../../components/navitemlist';
2
+ /**
3
+ * `mdc-navitemlist` is a container component used to group multiple mdc-navitem elements into a navigation list.
4
+ * It provides the structural foundation for organizing vertical nav items and
5
+ * ensures consistent behavior and layout within side navigation patterns.
6
+ *
7
+ * Note: mdc-navitemlist is typically used within the sidenavigation component.
8
+ * @tagname mdc-navitemlist
9
+ *
10
+ * @slot default - Slot for projecting one or more navigation items, optional section headers and dividers.
11
+ */
12
+ declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
13
+ export default reactWrapper;
@@ -0,0 +1,22 @@
1
+ import * as React from 'react';
2
+ import { createComponent } from '@lit/react';
3
+ import Component from '../../components/navitemlist';
4
+ import { TAG_NAME } from '../../components/navitemlist/navitemlist.constants';
5
+ /**
6
+ * `mdc-navitemlist` is a container component used to group multiple mdc-navitem elements into a navigation list.
7
+ * It provides the structural foundation for organizing vertical nav items and
8
+ * ensures consistent behavior and layout within side navigation patterns.
9
+ *
10
+ * Note: mdc-navitemlist is typically used within the sidenavigation component.
11
+ * @tagname mdc-navitemlist
12
+ *
13
+ * @slot default - Slot for projecting one or more navigation items, optional section headers and dividers.
14
+ */
15
+ const reactWrapper = createComponent({
16
+ tagName: TAG_NAME,
17
+ elementClass: Component,
18
+ react: React,
19
+ events: {},
20
+ displayName: 'NavItemList',
21
+ });
22
+ export default reactWrapper;
@@ -0,0 +1,56 @@
1
+ import { type EventName } from '@lit/react';
2
+ import Component from '../../components/sidenavigation';
3
+ /**
4
+ * The `mdc-sidenavigation` component provides a vertically stacked navigation experience,
5
+ * typically used in layouts with persistent or collapsible sidebars.
6
+ *
7
+ * ## Features:
8
+ * - Supports four layout variants: `fixed-collapsed`, `fixed-expanded`, `flexible`, and `hidden`
9
+ * - Toggleable expand/collapse behavior
10
+ * - Displays brand logo and customer name
11
+ * - Serves as a context provider for descendant components - `mdc-navitemlist` and `mdc-navitem`
12
+ *
13
+ * ### Usage:
14
+ * In a sidenavigation, navitems can be used in the following ways:
15
+ *
16
+ * 1. **Simple navitem** – No submenu or interaction beyond selection.
17
+ *
18
+ * 2. **Navitem with submenu**:
19
+ * - Provide an `id` on the `mdc-navitem`
20
+ * - Set the `triggerId` on the corresponding `mdc-menupopover` to match the navitem's `id`
21
+ * - Set `parent-nav-tooltip-text` with appropriate text that will display when a child menu item
22
+ * inside the nested menupopover is active, conveying which submenu item is currently selected
23
+ *
24
+ * 3. **Actionable navitem (no submenu)**:
25
+ * - Performs an action such as navigation or alert trigger
26
+ * - Set `disable-aria-current="true"` to maintain visual active state without navigation behavior
27
+ *
28
+ * ### Recommendations:
29
+ * - Use `mdc-text` for section headers
30
+ * - Use `mdc-divider` with the attribute `variant="gradient"` for section dividers
31
+ * - For the brand logo, use an informative icon. Refer to `Momentum Informative Icons`
32
+ *
33
+ * #### Accessibility Notes:
34
+ * - Always provide meaningful `aria-label` attributes for both `mdc-navitem` and `mdc-navitemlist`
35
+ * to ensure screen reader support
36
+ * - Set `grabber-btn-aria-label` to provide accessible labels for the expand/collapse grabber button
37
+ *
38
+ * @dependency mdc-text
39
+ * @dependency mdc-button
40
+ * @dependency mdc-divider
41
+ *
42
+ * @event activechange - (React: onActiveChange) Dispatched when the active state of the navitem changes.
43
+ *
44
+ * @tagname mdc-sidenavigation
45
+ *
46
+ * @slot scrollable-section - Slot for the scrollable content area of the side navigation.
47
+ * @slot fixed-section - Slot for the fixed content area of the side navigation.
48
+ * @slot brand-logo - Slot for the brand logo (e.g., icon or img).
49
+ *
50
+ * @cssproperty --mdc-sidenavigation-expanded-width - width of the sideNavigation when expanded
51
+ * @cssproperty --mdc-sidenavigation-collapsed-width - width of the sideNavigation when collpased
52
+ */
53
+ declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
54
+ onActiveChange: EventName<Event>;
55
+ }>;
56
+ export default reactWrapper;
@@ -0,0 +1,64 @@
1
+ import * as React from 'react';
2
+ import { createComponent } from '@lit/react';
3
+ import Component from '../../components/sidenavigation';
4
+ import { TAG_NAME } from '../../components/sidenavigation/sidenavigation.constants';
5
+ /**
6
+ * The `mdc-sidenavigation` component provides a vertically stacked navigation experience,
7
+ * typically used in layouts with persistent or collapsible sidebars.
8
+ *
9
+ * ## Features:
10
+ * - Supports four layout variants: `fixed-collapsed`, `fixed-expanded`, `flexible`, and `hidden`
11
+ * - Toggleable expand/collapse behavior
12
+ * - Displays brand logo and customer name
13
+ * - Serves as a context provider for descendant components - `mdc-navitemlist` and `mdc-navitem`
14
+ *
15
+ * ### Usage:
16
+ * In a sidenavigation, navitems can be used in the following ways:
17
+ *
18
+ * 1. **Simple navitem** – No submenu or interaction beyond selection.
19
+ *
20
+ * 2. **Navitem with submenu**:
21
+ * - Provide an `id` on the `mdc-navitem`
22
+ * - Set the `triggerId` on the corresponding `mdc-menupopover` to match the navitem's `id`
23
+ * - Set `parent-nav-tooltip-text` with appropriate text that will display when a child menu item
24
+ * inside the nested menupopover is active, conveying which submenu item is currently selected
25
+ *
26
+ * 3. **Actionable navitem (no submenu)**:
27
+ * - Performs an action such as navigation or alert trigger
28
+ * - Set `disable-aria-current="true"` to maintain visual active state without navigation behavior
29
+ *
30
+ * ### Recommendations:
31
+ * - Use `mdc-text` for section headers
32
+ * - Use `mdc-divider` with the attribute `variant="gradient"` for section dividers
33
+ * - For the brand logo, use an informative icon. Refer to `Momentum Informative Icons`
34
+ *
35
+ * #### Accessibility Notes:
36
+ * - Always provide meaningful `aria-label` attributes for both `mdc-navitem` and `mdc-navitemlist`
37
+ * to ensure screen reader support
38
+ * - Set `grabber-btn-aria-label` to provide accessible labels for the expand/collapse grabber button
39
+ *
40
+ * @dependency mdc-text
41
+ * @dependency mdc-button
42
+ * @dependency mdc-divider
43
+ *
44
+ * @event activechange - (React: onActiveChange) Dispatched when the active state of the navitem changes.
45
+ *
46
+ * @tagname mdc-sidenavigation
47
+ *
48
+ * @slot scrollable-section - Slot for the scrollable content area of the side navigation.
49
+ * @slot fixed-section - Slot for the fixed content area of the side navigation.
50
+ * @slot brand-logo - Slot for the brand logo (e.g., icon or img).
51
+ *
52
+ * @cssproperty --mdc-sidenavigation-expanded-width - width of the sideNavigation when expanded
53
+ * @cssproperty --mdc-sidenavigation-collapsed-width - width of the sideNavigation when collpased
54
+ */
55
+ const reactWrapper = createComponent({
56
+ tagName: TAG_NAME,
57
+ elementClass: Component,
58
+ react: React,
59
+ events: {
60
+ onActiveChange: 'activechange',
61
+ },
62
+ displayName: 'SideNavigation',
63
+ });
64
+ export default reactWrapper;
@@ -10,13 +10,12 @@ var __metadata = (this && this.__metadata) || function (k, v) {
10
10
  import { property, queryAssignedElements } from 'lit/decorators.js';
11
11
  import { TAG_NAME as MENU_TAGNAME } from '../../components/menu/menu.constants';
12
12
  import { ORIENTATION, TAG_NAME as MENUBAR_TAGNAME } from '../../components/menubar/menubar.constants';
13
- import { TAG_NAME as MENUITEM_TAGNAME } from '../../components/menuitem/menuitem.constants';
14
- import { TAG_NAME as MENUITEMCHECKBOX_TAGNAME } from '../../components/menuitemcheckbox/menuitemcheckbox.constants';
15
- import { TAG_NAME as MENUITEMRADIO_TAGNAME } from '../../components/menuitemradio/menuitemradio.constants';
16
13
  import { TAG_NAME as MENUPOPOVER_TAGNAME } from '../../components/menupopover/menupopover.constants';
17
14
  import { TAG_NAME as MENUSECTION_TAGNAME } from '../../components/menusection/menusection.constants';
15
+ import { TAG_NAME as NAVITEMLIST_TAGNAME } from '../../components/navitemlist/navitemlist.constants';
18
16
  import { POPOVER_PLACEMENT } from '../../components/popover/popover.constants';
19
17
  import { KEYS } from '../keys';
18
+ import { ROLE } from '../roles';
20
19
  export const MenuMixin = (superClass) => {
21
20
  class InnerMixinClass extends superClass {
22
21
  constructor() {
@@ -116,7 +115,15 @@ export const MenuMixin = (superClass) => {
116
115
  */
117
116
  isValidMenu(tagName) {
118
117
  return ((tagName === null || tagName === void 0 ? void 0 : tagName.toLowerCase()) === MENU_TAGNAME
119
- || (tagName === null || tagName === void 0 ? void 0 : tagName.toLowerCase()) === MENUBAR_TAGNAME);
118
+ || (tagName === null || tagName === void 0 ? void 0 : tagName.toLowerCase()) === MENUBAR_TAGNAME || this.isValidNavItemList(tagName));
119
+ }
120
+ /**
121
+ * Checks if the given tag name is a valid navitemlist tag name.
122
+ * @param tagName - The tag name to check.
123
+ * @returns True if the tag name is a valid navitemlist, false otherwise.
124
+ */
125
+ isValidNavItemList(tagName) {
126
+ return (tagName === null || tagName === void 0 ? void 0 : tagName.toLowerCase()) === NAVITEMLIST_TAGNAME;
120
127
  }
121
128
  /**
122
129
  * Checks if the given tag name is a valid menu popover tag name.
@@ -230,9 +237,7 @@ export const MenuMixin = (superClass) => {
230
237
  newIndex = parentMenuItemIndex - 1;
231
238
  }
232
239
  this.updateTabIndexAndFocusNewIndex(parentMenuItemsChildren, parentMenuItemIndex, newIndex);
233
- if (key === KEYS.ARROW_LEFT) {
234
- (_e = (_d = parentMenuItemsChildren[parentMenuItemIndex - 1]) === null || _d === void 0 ? void 0 : _d.nextElementSibling) === null || _e === void 0 ? void 0 : _e.toggleAttribute('visible');
235
- }
240
+ (_e = (_d = parentMenuItemsChildren[parentMenuItemIndex - 1]) === null || _d === void 0 ? void 0 : _d.nextElementSibling) === null || _e === void 0 ? void 0 : _e.toggleAttribute('visible');
236
241
  }
237
242
  /**
238
243
  * Closes the current menu popover and navigates to the previous parent menu item.
@@ -272,6 +277,8 @@ export const MenuMixin = (superClass) => {
272
277
  // - If there are no popovers to the right, then we will close all popovers recursively,
273
278
  // and go the next menu item from the menu bar
274
279
  this.hideAllPopovers(this.menuItems[currentIndex]);
280
+ if (this.isValidMenu(this.tagName))
281
+ return;
275
282
  // - get the top parent menu items using recursion.
276
283
  const { parentMenuItemDetails, parentMenuItemsChildren, } = this.getParentMenuContents(this.menuItems[currentIndex]);
277
284
  if (parentMenuItemsChildren.length === 0 || (parentMenuItemDetails === null || parentMenuItemDetails === void 0 ? void 0 : parentMenuItemDetails.menuChildId) === '') {
@@ -289,9 +296,7 @@ export const MenuMixin = (superClass) => {
289
296
  * @returns True if the menu item is a valid menu item, false otherwise.
290
297
  */
291
298
  isValidMenuItem(menuItem) {
292
- var _a;
293
- return [MENUITEM_TAGNAME, MENUITEMCHECKBOX_TAGNAME, MENUITEMRADIO_TAGNAME]
294
- .includes((_a = menuItem.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase());
299
+ return menuItem.getAttribute('role') === ROLE.MENUITEM;
295
300
  }
296
301
  /**
297
302
  * Resets all list items tabindex to -1 and sets the tabindex of the
@@ -306,6 +311,28 @@ export const MenuMixin = (superClass) => {
306
311
  node === null || node === void 0 ? void 0 : node.setAttribute('tabindex', newTabindex);
307
312
  });
308
313
  }
314
+ /**
315
+ * Returns the key based on the direction of the document.
316
+ * If the document is in RTL mode and the key is ARROW_LEFT or ARROW_RIGHT,
317
+ * it will swap them to maintain the correct navigation direction.
318
+ * @param originalKey - The original key pressed.
319
+ * @returns The key based on the direction of the document.
320
+ */
321
+ getKeyBasedOnDirection(originalKey) {
322
+ var _a;
323
+ let key = originalKey;
324
+ const isRtl = ((_a = document.querySelector('html')) === null || _a === void 0 ? void 0 : _a.getAttribute('dir')) === 'rtl'
325
+ || window.getComputedStyle(this).direction === 'rtl';
326
+ if (isRtl && (key === KEYS.ARROW_LEFT || key === KEYS.ARROW_RIGHT)) {
327
+ if (key === KEYS.ARROW_LEFT) {
328
+ key = KEYS.ARROW_RIGHT;
329
+ }
330
+ else {
331
+ key = KEYS.ARROW_LEFT;
332
+ }
333
+ }
334
+ return key;
335
+ }
309
336
  /**
310
337
  * Handles the keydown event on the menu bar.
311
338
  * The keys are as follows:
@@ -343,7 +370,8 @@ export const MenuMixin = (superClass) => {
343
370
  const currentIndex = this.getCurrentIndex(event.target);
344
371
  if (currentIndex === -1)
345
372
  return;
346
- switch (event.key) {
373
+ const key = this.getKeyBasedOnDirection(event.key);
374
+ switch (key) {
347
375
  case KEYS.HOME:
348
376
  this.updateTabIndexAndFocusNewIndex(this.menuItems, currentIndex, firstMenuIndex);
349
377
  break;
@@ -400,9 +428,6 @@ export const MenuMixin = (superClass) => {
400
428
  }
401
429
  case KEYS.ESCAPE: {
402
430
  this.setMenuBarPopoverValue(false);
403
- if (this.ariaOrientation === ORIENTATION.VERTICAL) {
404
- this.navigateToPrevParentMenuItem(currentIndex, event.key);
405
- }
406
431
  break;
407
432
  }
408
433
  default:
@@ -10,6 +10,7 @@ declare const ROLE: {
10
10
  readonly MENUITEM: "menuitem";
11
11
  readonly MENUITEMCHECKBOX: "menuitemcheckbox";
12
12
  readonly MENUITEMRADIO: "menuitemradio";
13
+ readonly NAVIGATION: "navigation";
13
14
  readonly RADIO: "radio";
14
15
  readonly RADIOGROUP: "radiogroup";
15
16
  readonly TOOLTIP: "tooltip";
@@ -10,6 +10,7 @@ const ROLE = {
10
10
  MENUITEM: 'menuitem',
11
11
  MENUITEMCHECKBOX: 'menuitemcheckbox',
12
12
  MENUITEMRADIO: 'menuitemradio',
13
+ NAVIGATION: 'navigation',
13
14
  RADIO: 'radio',
14
15
  RADIOGROUP: 'radiogroup',
15
16
  TOOLTIP: 'tooltip',
package/package.json CHANGED
@@ -41,5 +41,5 @@
41
41
  "lottie-web": "^5.12.2",
42
42
  "uuid": "^11.0.5"
43
43
  },
44
- "version": "0.80.4"
44
+ "version": "0.80.5"
45
45
  }