@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.
- package/dist/browser/index.js +601 -317
- package/dist/browser/index.js.map +4 -4
- package/dist/components/list/list.component.d.ts +1 -1
- package/dist/components/listitem/listitem.component.js +10 -3
- package/dist/components/menupopover/menupopover.component.js +2 -1
- package/dist/components/navitem/index.d.ts +11 -0
- package/dist/components/navitem/index.js +8 -0
- package/dist/components/navitem/navitem.component.d.ts +125 -0
- package/dist/components/navitem/navitem.component.js +251 -0
- package/dist/components/navitem/navitem.constants.d.ts +16 -0
- package/dist/components/navitem/navitem.constants.js +21 -0
- package/dist/components/navitem/navitem.styles.d.ts +2 -0
- package/dist/components/navitem/navitem.styles.js +146 -0
- package/dist/components/navitem/navitem.types.d.ts +11 -0
- package/dist/components/navitem/navitem.types.js +1 -0
- package/dist/components/navitemlist/index.d.ts +7 -0
- package/dist/components/navitemlist/index.js +4 -0
- package/dist/components/navitemlist/navitemlist.component.d.ts +51 -0
- package/dist/components/navitemlist/navitemlist.component.js +92 -0
- package/dist/components/navitemlist/navitemlist.constants.d.ts +2 -0
- package/dist/components/navitemlist/navitemlist.constants.js +3 -0
- package/dist/components/navitemlist/navitemlist.styles.d.ts +2 -0
- package/dist/components/navitemlist/navitemlist.styles.js +23 -0
- package/dist/components/sidenavigation/index.d.ts +10 -0
- package/dist/components/sidenavigation/index.js +7 -0
- package/dist/components/sidenavigation/sidenavigation.component.d.ts +144 -0
- package/dist/components/sidenavigation/sidenavigation.component.js +244 -0
- package/dist/components/sidenavigation/sidenavigation.constants.d.ts +11 -0
- package/dist/components/sidenavigation/sidenavigation.constants.js +12 -0
- package/dist/components/sidenavigation/sidenavigation.context.d.ts +15 -0
- package/dist/components/sidenavigation/sidenavigation.context.js +78 -0
- package/dist/components/sidenavigation/sidenavigation.styles.d.ts +2 -0
- package/dist/components/sidenavigation/sidenavigation.styles.js +68 -0
- package/dist/components/sidenavigation/sidenavigation.types.d.ts +7 -0
- package/dist/components/sidenavigation/sidenavigation.types.js +1 -0
- package/dist/custom-elements.json +2512 -524
- package/dist/index.d.ts +4 -1
- package/dist/index.js +4 -1
- package/dist/react/index.d.ts +5 -2
- package/dist/react/index.js +5 -2
- package/dist/react/navitem/index.d.ts +43 -0
- package/dist/react/navitem/index.js +51 -0
- package/dist/react/navitemlist/index.d.ts +13 -0
- package/dist/react/navitemlist/index.js +22 -0
- package/dist/react/sidenavigation/index.d.ts +56 -0
- package/dist/react/sidenavigation/index.js +64 -0
- package/dist/utils/mixins/MenuMixin.js +39 -14
- package/dist/utils/roles.d.ts +1 -0
- package/dist/utils/roles.js +1 -0
- 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 };
|
package/dist/react/index.d.ts
CHANGED
@@ -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';
|
package/dist/react/index.js
CHANGED
@@ -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
|
-
|
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
|
-
|
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
|
-
|
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:
|
package/dist/utils/roles.d.ts
CHANGED
@@ -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";
|
package/dist/utils/roles.js
CHANGED
package/package.json
CHANGED