@servicetitan/navigation 12.0.2 → 13.0.0-canary.256.5761ed1.0
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/components/counter-tag.d.ts +1 -1
- package/dist/components/counter-tag.d.ts.map +1 -1
- package/dist/components/counter-tag.js.map +1 -1
- package/dist/components/profile-dropdown/interface.d.ts +55 -0
- package/dist/components/profile-dropdown/interface.d.ts.map +1 -0
- package/dist/components/profile-dropdown/interface.js.map +1 -0
- package/dist/components/profile-dropdown/profile-dropdown-legacy.stories.d.ts +13 -0
- package/dist/components/profile-dropdown/profile-dropdown-legacy.stories.d.ts.map +1 -0
- package/dist/components/profile-dropdown/profile-dropdown-stacked.stories.d.ts +5 -1
- package/dist/components/profile-dropdown/profile-dropdown-stacked.stories.d.ts.map +1 -1
- package/dist/components/profile-dropdown/profile-dropdown.d.ts +9 -79
- package/dist/components/profile-dropdown/profile-dropdown.d.ts.map +1 -1
- package/dist/components/profile-dropdown/profile-dropdown.js +22 -22
- package/dist/components/profile-dropdown/profile-dropdown.js.map +1 -1
- package/dist/components/profile-dropdown/profile-dropdown.stories.d.ts +5 -1
- package/dist/components/profile-dropdown/profile-dropdown.stories.d.ts.map +1 -1
- package/dist/components/titan-layout/interface-internal.d.ts +12 -0
- package/dist/components/titan-layout/interface-internal.d.ts.map +1 -1
- package/dist/components/titan-layout/interface-internal.js.map +1 -1
- package/dist/components/titan-layout/interface.d.ts +66 -13
- package/dist/components/titan-layout/interface.d.ts.map +1 -1
- package/dist/components/titan-layout/interface.js.map +1 -1
- package/dist/components/titan-layout/layout-header-dark.d.ts.map +1 -1
- package/dist/components/titan-layout/layout-header-dark.js +22 -12
- package/dist/components/titan-layout/layout-header-dark.js.map +1 -1
- package/dist/components/titan-layout/layout-header-links-internal.d.ts +22 -3
- package/dist/components/titan-layout/layout-header-links-internal.d.ts.map +1 -1
- package/dist/components/titan-layout/layout-header-links-internal.js +15 -18
- package/dist/components/titan-layout/layout-header-links-internal.js.map +1 -1
- package/dist/components/titan-layout/layout-header-links.d.ts +3 -4
- package/dist/components/titan-layout/layout-header-links.d.ts.map +1 -1
- package/dist/components/titan-layout/layout-header-links.js +25 -5
- package/dist/components/titan-layout/layout-header-links.js.map +1 -1
- package/dist/components/titan-layout/layout-header.d.ts +2 -2
- package/dist/components/titan-layout/layout-header.d.ts.map +1 -1
- package/dist/components/titan-layout/layout-header.js.map +1 -1
- package/dist/components/titan-layout/layout-header.module.less +36 -0
- package/dist/components/titan-layout/layout-header.module.less.d.ts +2 -0
- package/dist/components/titan-layout/layout-profile.d.ts +8 -5
- package/dist/components/titan-layout/layout-profile.d.ts.map +1 -1
- package/dist/components/titan-layout/layout-profile.js +30 -28
- package/dist/components/titan-layout/layout-profile.js.map +1 -1
- package/dist/components/titan-layout/layout-sidebar-links-internal.d.ts +48 -25
- package/dist/components/titan-layout/layout-sidebar-links-internal.d.ts.map +1 -1
- package/dist/components/titan-layout/layout-sidebar-links-internal.js +56 -52
- package/dist/components/titan-layout/layout-sidebar-links-internal.js.map +1 -1
- package/dist/components/titan-layout/layout-sidebar-links.d.ts +3 -3
- package/dist/components/titan-layout/layout-sidebar-links.d.ts.map +1 -1
- package/dist/components/titan-layout/layout-sidebar-links.js +33 -18
- package/dist/components/titan-layout/layout-sidebar-links.js.map +1 -1
- package/dist/components/titan-layout/layout-sidebar.d.ts.map +1 -1
- package/dist/components/titan-layout/layout-sidebar.js +49 -24
- package/dist/components/titan-layout/layout-sidebar.js.map +1 -1
- package/dist/components/titan-layout/titan-layout-default.stories.d.ts +16 -0
- package/dist/components/titan-layout/titan-layout-default.stories.d.ts.map +1 -0
- package/dist/components/titan-layout/titan-layout-legacy.stories.d.ts +10 -0
- package/dist/components/titan-layout/titan-layout-legacy.stories.d.ts.map +1 -0
- package/dist/components/titan-layout/titan-layout-links.d.ts +5 -0
- package/dist/components/titan-layout/titan-layout-links.d.ts.map +1 -0
- package/dist/components/titan-layout/titan-layout-links.js +34 -0
- package/dist/components/titan-layout/titan-layout-links.js.map +1 -0
- package/dist/components/titan-layout/titan-layout-stacked.stories.d.ts +10 -0
- package/dist/components/titan-layout/titan-layout-stacked.stories.d.ts.map +1 -0
- package/dist/components/titan-layout/titan-layout.d.ts +5 -4
- package/dist/components/titan-layout/titan-layout.d.ts.map +1 -1
- package/dist/components/titan-layout/titan-layout.js +10 -8
- package/dist/components/titan-layout/titan-layout.js.map +1 -1
- package/dist/index.d.ts +1 -6
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +0 -4
- package/dist/index.js.map +1 -1
- package/dist/test/data.d.ts +26 -23
- package/dist/test/data.d.ts.map +1 -1
- package/dist/test/data.js +26 -69
- package/dist/test/data.js.map +1 -1
- package/dist/test/titan-layout.d.ts +16 -0
- package/dist/test/titan-layout.d.ts.map +1 -0
- package/dist/test/titan-layout.js +21 -0
- package/dist/test/titan-layout.js.map +1 -0
- package/dist/utils/navigation-context.d.ts +3 -22
- package/dist/utils/navigation-context.d.ts.map +1 -1
- package/dist/utils/navigation-context.js +2 -10
- package/dist/utils/navigation-context.js.map +1 -1
- package/dist/utils/navigation.d.ts +2 -7
- package/dist/utils/navigation.d.ts.map +1 -1
- package/dist/utils/navigation.js.map +1 -1
- package/package.json +2 -2
- package/src/components/counter-tag.tsx +1 -1
- package/src/components/profile-dropdown/interface.ts +47 -0
- package/src/components/profile-dropdown/profile-dropdown-legacy.stories.tsx +25 -0
- package/src/components/profile-dropdown/profile-dropdown-stacked.stories.tsx +15 -7
- package/src/components/profile-dropdown/profile-dropdown.stories.tsx +50 -43
- package/src/components/profile-dropdown/profile-dropdown.tsx +39 -115
- package/src/components/titan-layout/interface-internal.ts +13 -0
- package/src/components/titan-layout/interface.ts +72 -16
- package/src/components/titan-layout/layout-header-dark.tsx +18 -5
- package/src/components/titan-layout/layout-header-links-internal.tsx +41 -54
- package/src/components/titan-layout/layout-header-links.tsx +65 -12
- package/src/components/titan-layout/layout-header.module.less +36 -0
- package/src/components/titan-layout/layout-header.module.less.d.ts +2 -0
- package/src/components/titan-layout/layout-header.tsx +2 -2
- package/src/components/titan-layout/layout-profile.tsx +53 -34
- package/src/components/titan-layout/layout-sidebar-links-internal.tsx +169 -116
- package/src/components/titan-layout/layout-sidebar-links.tsx +73 -24
- package/src/components/titan-layout/layout-sidebar.tsx +52 -28
- package/src/components/titan-layout/{titan-layout.stories.tsx → titan-layout-default.stories.tsx} +125 -113
- package/src/components/titan-layout/titan-layout-legacy.stories.tsx +24 -0
- package/src/components/titan-layout/titan-layout-links.tsx +34 -0
- package/src/components/titan-layout/titan-layout-stacked.stories.tsx +30 -0
- package/src/components/titan-layout/titan-layout.tsx +12 -9
- package/src/index.ts +1 -12
- package/src/test/data.tsx +31 -83
- package/src/test/titan-layout.tsx +34 -0
- package/src/utils/navigation-context.tsx +9 -35
- package/src/utils/navigation.ts +3 -10
- package/dist/components/header-navigation/header-navigation-content.d.ts +0 -30
- package/dist/components/header-navigation/header-navigation-content.d.ts.map +0 -1
- package/dist/components/header-navigation/header-navigation-content.js +0 -58
- package/dist/components/header-navigation/header-navigation-content.js.map +0 -1
- package/dist/components/header-navigation/header-navigation-extra-stacked.stories.d.ts +0 -9
- package/dist/components/header-navigation/header-navigation-extra-stacked.stories.d.ts.map +0 -1
- package/dist/components/header-navigation/header-navigation-extra.stories.d.ts +0 -12
- package/dist/components/header-navigation/header-navigation-extra.stories.d.ts.map +0 -1
- package/dist/components/header-navigation/header-navigation-links.d.ts +0 -11
- package/dist/components/header-navigation/header-navigation-links.d.ts.map +0 -1
- package/dist/components/header-navigation/header-navigation-links.js +0 -62
- package/dist/components/header-navigation/header-navigation-links.js.map +0 -1
- package/dist/components/header-navigation/header-navigation-stacked.stories.d.ts +0 -12
- package/dist/components/header-navigation/header-navigation-stacked.stories.d.ts.map +0 -1
- package/dist/components/header-navigation/header-navigation-stories.module.less +0 -6
- package/dist/components/header-navigation/header-navigation-stories.module.less.d.ts +0 -3
- package/dist/components/header-navigation/header-navigation.d.ts +0 -59
- package/dist/components/header-navigation/header-navigation.d.ts.map +0 -1
- package/dist/components/header-navigation/header-navigation.js +0 -228
- package/dist/components/header-navigation/header-navigation.js.map +0 -1
- package/dist/components/header-navigation/header-navigation.module.less +0 -260
- package/dist/components/header-navigation/header-navigation.module.less.d.ts +0 -22
- package/dist/components/header-navigation/header-navigation.stories.d.ts +0 -12
- package/dist/components/header-navigation/header-navigation.stories.d.ts.map +0 -1
- package/dist/components/header-navigation/index.d.ts +0 -2
- package/dist/components/header-navigation/index.d.ts.map +0 -1
- package/dist/components/header-navigation/index.js +0 -3
- package/dist/components/header-navigation/index.js.map +0 -1
- package/dist/components/header-navigation/with-tooltip.d.ts +0 -4
- package/dist/components/header-navigation/with-tooltip.d.ts.map +0 -1
- package/dist/components/header-navigation/with-tooltip.js +0 -10
- package/dist/components/header-navigation/with-tooltip.js.map +0 -1
- package/dist/components/layout.stories.d.ts +0 -13
- package/dist/components/layout.stories.d.ts.map +0 -1
- package/dist/components/left-navigation/header-navigation-extra-tiny.stories.d.ts +0 -9
- package/dist/components/left-navigation/header-navigation-extra-tiny.stories.d.ts.map +0 -1
- package/dist/components/left-navigation/header-navigation-tiny-links.d.ts +0 -18
- package/dist/components/left-navigation/header-navigation-tiny-links.d.ts.map +0 -1
- package/dist/components/left-navigation/header-navigation-tiny-links.js +0 -79
- package/dist/components/left-navigation/header-navigation-tiny-links.js.map +0 -1
- package/dist/components/left-navigation/header-navigation-tiny.d.ts +0 -23
- package/dist/components/left-navigation/header-navigation-tiny.d.ts.map +0 -1
- package/dist/components/left-navigation/header-navigation-tiny.js +0 -32
- package/dist/components/left-navigation/header-navigation-tiny.js.map +0 -1
- package/dist/components/left-navigation/header-navigation-tiny.module.less +0 -117
- package/dist/components/left-navigation/header-navigation-tiny.module.less.d.ts +0 -15
- package/dist/components/left-navigation/header-navigation-tiny.stories.d.ts +0 -12
- package/dist/components/left-navigation/header-navigation-tiny.stories.d.ts.map +0 -1
- package/dist/components/left-navigation/index.d.ts +0 -5
- package/dist/components/left-navigation/index.d.ts.map +0 -1
- package/dist/components/left-navigation/index.js +0 -5
- package/dist/components/left-navigation/index.js.map +0 -1
- package/dist/components/left-navigation/interface-internal.d.ts +0 -10
- package/dist/components/left-navigation/interface-internal.d.ts.map +0 -1
- package/dist/components/left-navigation/interface-internal.js +0 -3
- package/dist/components/left-navigation/interface-internal.js.map +0 -1
- package/dist/components/left-navigation/interface.d.ts +0 -20
- package/dist/components/left-navigation/interface.d.ts.map +0 -1
- package/dist/components/left-navigation/interface.js.map +0 -1
- package/dist/components/left-navigation/side-navigation-context.d.ts +0 -8
- package/dist/components/left-navigation/side-navigation-context.d.ts.map +0 -1
- package/dist/components/left-navigation/side-navigation-context.js +0 -8
- package/dist/components/left-navigation/side-navigation-context.js.map +0 -1
- package/dist/components/left-navigation/side-navigation-links-internal.d.ts +0 -28
- package/dist/components/left-navigation/side-navigation-links-internal.d.ts.map +0 -1
- package/dist/components/left-navigation/side-navigation-links-internal.js +0 -89
- package/dist/components/left-navigation/side-navigation-links-internal.js.map +0 -1
- package/dist/components/left-navigation/side-navigation-links.d.ts +0 -6
- package/dist/components/left-navigation/side-navigation-links.d.ts.map +0 -1
- package/dist/components/left-navigation/side-navigation-links.js +0 -48
- package/dist/components/left-navigation/side-navigation-links.js.map +0 -1
- package/dist/components/left-navigation/side-navigation.d.ts +0 -29
- package/dist/components/left-navigation/side-navigation.d.ts.map +0 -1
- package/dist/components/left-navigation/side-navigation.js +0 -411
- package/dist/components/left-navigation/side-navigation.js.map +0 -1
- package/dist/components/left-navigation/side-navigation.module.less +0 -530
- package/dist/components/left-navigation/side-navigation.module.less.d.ts +0 -48
- package/dist/components/left-navigation/side-navigation.stories.d.ts +0 -17
- package/dist/components/left-navigation/side-navigation.stories.d.ts.map +0 -1
- package/dist/components/left-navigation/with-tooltip.d.ts +0 -4
- package/dist/components/left-navigation/with-tooltip.d.ts.map +0 -1
- package/dist/components/left-navigation/with-tooltip.js +0 -15
- package/dist/components/left-navigation/with-tooltip.js.map +0 -1
- package/dist/components/links.d.ts +0 -5
- package/dist/components/links.d.ts.map +0 -1
- package/dist/components/links.js +0 -35
- package/dist/components/links.js.map +0 -1
- package/dist/components/profile-dropdown/profile-dropdown-tiny.stories.d.ts +0 -9
- package/dist/components/profile-dropdown/profile-dropdown-tiny.stories.d.ts.map +0 -1
- package/dist/components/titan-layout/layout-profile.stories.d.ts +0 -13
- package/dist/components/titan-layout/layout-profile.stories.d.ts.map +0 -1
- package/dist/components/titan-layout/titan-layout.stories.d.ts +0 -29
- package/dist/components/titan-layout/titan-layout.stories.d.ts.map +0 -1
- package/dist/utils/navigation-legacy.d.ts +0 -88
- package/dist/utils/navigation-legacy.d.ts.map +0 -1
- package/dist/utils/navigation-legacy.js +0 -3
- package/dist/utils/navigation-legacy.js.map +0 -1
- package/src/components/header-navigation/header-navigation-content.tsx +0 -120
- package/src/components/header-navigation/header-navigation-extra-stacked.stories.tsx +0 -19
- package/src/components/header-navigation/header-navigation-extra.stories.tsx +0 -142
- package/src/components/header-navigation/header-navigation-links.tsx +0 -141
- package/src/components/header-navigation/header-navigation-stacked.stories.tsx +0 -146
- package/src/components/header-navigation/header-navigation-stories.module.less +0 -6
- package/src/components/header-navigation/header-navigation-stories.module.less.d.ts +0 -3
- package/src/components/header-navigation/header-navigation.module.less +0 -260
- package/src/components/header-navigation/header-navigation.module.less.d.ts +0 -22
- package/src/components/header-navigation/header-navigation.stories.tsx +0 -165
- package/src/components/header-navigation/header-navigation.tsx +0 -327
- package/src/components/header-navigation/index.ts +0 -1
- package/src/components/header-navigation/with-tooltip.tsx +0 -15
- package/src/components/layout.stories.tsx +0 -103
- package/src/components/left-navigation/header-navigation-extra-tiny.stories.tsx +0 -21
- package/src/components/left-navigation/header-navigation-tiny-links.tsx +0 -145
- package/src/components/left-navigation/header-navigation-tiny.module.less +0 -117
- package/src/components/left-navigation/header-navigation-tiny.module.less.d.ts +0 -15
- package/src/components/left-navigation/header-navigation-tiny.stories.tsx +0 -178
- package/src/components/left-navigation/header-navigation-tiny.tsx +0 -65
- package/src/components/left-navigation/index.ts +0 -4
- package/src/components/left-navigation/interface-internal.ts +0 -11
- package/src/components/left-navigation/interface.ts +0 -26
- package/src/components/left-navigation/side-navigation-context.tsx +0 -13
- package/src/components/left-navigation/side-navigation-links-internal.tsx +0 -151
- package/src/components/left-navigation/side-navigation-links.tsx +0 -57
- package/src/components/left-navigation/side-navigation.module.less +0 -530
- package/src/components/left-navigation/side-navigation.module.less.d.ts +0 -48
- package/src/components/left-navigation/side-navigation.stories.tsx +0 -226
- package/src/components/left-navigation/side-navigation.tsx +0 -543
- package/src/components/left-navigation/with-tooltip.tsx +0 -16
- package/src/components/links.tsx +0 -54
- package/src/components/profile-dropdown/profile-dropdown-tiny.stories.tsx +0 -25
- package/src/components/titan-layout/layout-profile.stories.tsx +0 -46
- package/src/utils/navigation-legacy.ts +0 -106
- /package/dist/components/{left-navigation → profile-dropdown}/interface.js +0 -0
|
@@ -2,8 +2,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import SvgAccountActive from '@servicetitan/anvil2/assets/icons/st/gnav_account_active.svg';
|
|
3
3
|
import SvgAccountInactive from '@servicetitan/anvil2/assets/icons/st/gnav_account_inactive.svg';
|
|
4
4
|
import { useEffect, useState } from 'react';
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
5
|
+
import { getCounterTag } from '../../utils/side-nav';
|
|
6
|
+
import { DesktopProfileDropdown } from '../profile-dropdown/profile-dropdown';
|
|
7
7
|
import { useTitanLayoutContext } from './layout-context';
|
|
8
8
|
import { InternalSideNavigationGroup, InternalSideNavigationGroupDivider, InternalSideNavigationGroupLink, InternalSideNavigationGroupTrigger } from './layout-sidebar-links-internal';
|
|
9
9
|
import { useNotificationsContext, useNotificationsState } from './notifications-context';
|
|
@@ -12,23 +12,17 @@ const ExternalNavComponent = ({ children, isActive, to, activeClassName, ...prop
|
|
|
12
12
|
href: to,
|
|
13
13
|
children: children
|
|
14
14
|
});
|
|
15
|
-
|
|
16
|
-
const {
|
|
15
|
+
function ProfileDropdownComponent(props) {
|
|
16
|
+
const { breakpoint, NavigationComponent } = useTitanLayoutContext();
|
|
17
17
|
return breakpoint.isMobile ? /*#__PURE__*/ _jsx(MobileProfileDropdown, {
|
|
18
18
|
...props,
|
|
19
19
|
navigationComponent: NavigationComponent
|
|
20
|
-
}) : isTitanLayout ? /*#__PURE__*/ _jsx(NavigationComponentContext.Provider, {
|
|
21
|
-
value: NavigationComponent,
|
|
22
|
-
children: /*#__PURE__*/ _jsx(DesktopProfileDropdown, {
|
|
23
|
-
...props
|
|
24
|
-
})
|
|
25
20
|
}) : /*#__PURE__*/ _jsx(DesktopProfileDropdown, {
|
|
26
21
|
...props
|
|
27
22
|
});
|
|
28
|
-
}
|
|
29
|
-
ProfileDropdownContent.displayName = 'ProfileDropdown';
|
|
23
|
+
}
|
|
30
24
|
const profileId = '--profile';
|
|
31
|
-
const MobileProfileDropdown = ({ children, ...
|
|
25
|
+
const MobileProfileDropdown = ({ direction, trigger, hintPopup, portal, width, onClose, onOpen, className, children, ...rest })=>{
|
|
32
26
|
const [expanded, setExpanded] = useState(false);
|
|
33
27
|
const { hasNotifications, NotificationsContextProvider } = useNotificationsState();
|
|
34
28
|
const { onNotificationsUpdate } = useNotificationsContext();
|
|
@@ -50,7 +44,8 @@ const MobileProfileDropdown = ({ children, ...props })=>{
|
|
|
50
44
|
icon: SvgAccountInactive,
|
|
51
45
|
iconActive: SvgAccountActive,
|
|
52
46
|
isActive: expanded,
|
|
53
|
-
|
|
47
|
+
className: className,
|
|
48
|
+
...rest,
|
|
54
49
|
submenuExpanded: expanded,
|
|
55
50
|
onExpandToggle: onExpandToggle,
|
|
56
51
|
onClick: onExpandToggle,
|
|
@@ -74,27 +69,29 @@ const getText = (children, text)=>{
|
|
|
74
69
|
}
|
|
75
70
|
return undefined;
|
|
76
71
|
};
|
|
77
|
-
|
|
78
|
-
return !!(tag === null || tag === void 0 ? void 0 : tag.value) || !!counter;
|
|
79
|
-
};
|
|
80
|
-
const ProfileDropdownSection = (props)=>{
|
|
72
|
+
function ProfileDropdownSection(props) {
|
|
81
73
|
const { breakpoint } = useTitanLayoutContext();
|
|
82
74
|
return breakpoint.isMobile ? /*#__PURE__*/ _jsx(MobileProfileDropdownSection, {
|
|
83
75
|
...props
|
|
84
76
|
}) : /*#__PURE__*/ _jsx(DesktopProfileDropdown.Section, {
|
|
85
77
|
...props
|
|
86
78
|
});
|
|
87
|
-
}
|
|
88
|
-
const MobileProfileDropdownSection = ({
|
|
79
|
+
}
|
|
80
|
+
const MobileProfileDropdownSection = ({ id, tooltip, tag, counter, className, children, text, ...rest })=>{
|
|
89
81
|
const sectionText = getText(children, text);
|
|
90
82
|
const { onNotificationsUpdate } = useNotificationsContext();
|
|
91
|
-
|
|
83
|
+
const tagData = getCounterTag(counter, tag);
|
|
84
|
+
onNotificationsUpdate(id, !!tagData);
|
|
92
85
|
return sectionText ? /*#__PURE__*/ _jsx(InternalSideNavigationGroupTrigger, {
|
|
93
|
-
...
|
|
94
|
-
|
|
86
|
+
...rest,
|
|
87
|
+
id: id,
|
|
88
|
+
title: sectionText,
|
|
89
|
+
isActive: undefined,
|
|
90
|
+
tag: tagData,
|
|
91
|
+
className: className
|
|
95
92
|
}) : null;
|
|
96
93
|
};
|
|
97
|
-
|
|
94
|
+
function ProfileDropdownLink(props) {
|
|
98
95
|
const { breakpoint, NavigationComponent } = useTitanLayoutContext();
|
|
99
96
|
return breakpoint.isMobile ? /*#__PURE__*/ _jsx(MobileProfileDropdownLink, {
|
|
100
97
|
...props,
|
|
@@ -102,21 +99,26 @@ const ProfileDropdownLink = (props)=>{
|
|
|
102
99
|
}) : /*#__PURE__*/ _jsx(DesktopProfileDropdown.Link, {
|
|
103
100
|
...props
|
|
104
101
|
});
|
|
105
|
-
}
|
|
106
|
-
const MobileProfileDropdownLink = ({ external, to, tooltip, text, children, navigationComponent, ...
|
|
102
|
+
}
|
|
103
|
+
const MobileProfileDropdownLink = ({ id, external, to, tooltip, text, children, className, navigationComponent, tag, counter, ...rest })=>{
|
|
107
104
|
const { onNotificationsUpdate } = useNotificationsContext();
|
|
108
105
|
const linkText = getText(children, text);
|
|
109
106
|
const isExternalLink = external !== null && external !== void 0 ? external : to === null || to === void 0 ? void 0 : to.startsWith('http');
|
|
110
|
-
|
|
107
|
+
const tagData = getCounterTag(counter, tag);
|
|
108
|
+
onNotificationsUpdate(id, !!tagData);
|
|
111
109
|
return linkText ? /*#__PURE__*/ _jsx(InternalSideNavigationGroupLink, {
|
|
112
|
-
...
|
|
110
|
+
...rest,
|
|
111
|
+
id: id,
|
|
113
112
|
to: to,
|
|
114
113
|
title: linkText,
|
|
114
|
+
isActive: undefined,
|
|
115
|
+
className: className,
|
|
116
|
+
tag: tagData,
|
|
115
117
|
parentId: profileId,
|
|
116
118
|
navigationComponent: isExternalLink ? ExternalNavComponent : navigationComponent
|
|
117
119
|
}) : null;
|
|
118
120
|
};
|
|
119
|
-
export const ProfileDropdown = Object.assign(
|
|
121
|
+
export const ProfileDropdown = Object.assign(ProfileDropdownComponent, {
|
|
120
122
|
Divider: ProfileDropdownDivider,
|
|
121
123
|
Link: ProfileDropdownLink,
|
|
122
124
|
Section: ProfileDropdownSection
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/titan-layout/layout-profile.tsx"],"sourcesContent":["import SvgAccountActive from '@servicetitan/anvil2/assets/icons/st/gnav_account_active.svg';\nimport SvgAccountInactive from '@servicetitan/anvil2/assets/icons/st/gnav_account_inactive.svg';\n\nimport { FC, MouseEvent, useEffect, useState } from 'react';\nimport { NavLinkComponentProps, NavigationComponentContext } from '../../utils/navigation-context';\nimport {\n ProfileDropdown as DesktopProfileDropdown,\n ProfileDropdownLinkProps,\n ProfileDropdownProps,\n ProfileDropdownSectionProps,\n} from '../profile-dropdown/profile-dropdown';\nimport { NavigationComponentProps } from './interface-internal';\nimport { useTitanLayoutContext } from './layout-context';\nimport {\n InternalSideNavigationGroup,\n InternalSideNavigationGroupDivider,\n InternalSideNavigationGroupLink,\n InternalSideNavigationGroupTrigger,\n} from './layout-sidebar-links-internal';\nimport { useNotificationsContext, useNotificationsState } from './notifications-context';\n\nexport type {\n ProfileDropdownProps,\n ProfileDropdownSectionProps,\n ProfileDropdownLinkProps,\n} from '../profile-dropdown/profile-dropdown';\n\nconst ExternalNavComponent: FC<NavLinkComponentProps> = ({\n children,\n isActive,\n to,\n activeClassName,\n ...props\n}) => (\n <a {...props} href={to}>\n {children}\n </a>\n);\n\nconst ProfileDropdownContent: FC<ProfileDropdownProps> = props => {\n const { isTitanLayout, breakpoint, NavigationComponent } = useTitanLayoutContext();\n return breakpoint.isMobile ? (\n <MobileProfileDropdown {...props} navigationComponent={NavigationComponent} />\n ) : isTitanLayout ? (\n <NavigationComponentContext.Provider value={NavigationComponent}>\n <DesktopProfileDropdown {...props} />\n </NavigationComponentContext.Provider>\n ) : (\n <DesktopProfileDropdown {...props} />\n );\n};\nProfileDropdownContent.displayName = 'ProfileDropdown';\nconst profileId = '--profile';\n\nconst MobileProfileDropdown: FC<ProfileDropdownProps & NavigationComponentProps> = ({\n children,\n ...props\n}) => {\n const [expanded, setExpanded] = useState(false);\n const { hasNotifications, NotificationsContextProvider } = useNotificationsState();\n const { onNotificationsUpdate } = useNotificationsContext();\n const onExpandToggle = (e: MouseEvent<never>) => {\n e.stopPropagation();\n setExpanded(!expanded);\n };\n\n useEffect(() => {\n onNotificationsUpdate(profileId, hasNotifications);\n }, [hasNotifications, onNotificationsUpdate]);\n\n return (\n <NotificationsContextProvider>\n <InternalSideNavigationGroup\n id={profileId}\n to={undefined}\n title=\"Profile\"\n icon={SvgAccountInactive}\n iconActive={SvgAccountActive}\n isActive={expanded}\n {...props}\n submenuExpanded={expanded}\n onExpandToggle={onExpandToggle}\n onClick={onExpandToggle}\n tag={{ value: hasNotifications }}\n >\n {children}\n </InternalSideNavigationGroup>\n </NotificationsContextProvider>\n );\n};\n\nconst ProfileDropdownDivider: FC = () => {\n const { breakpoint } = useTitanLayoutContext();\n return breakpoint.isMobile ? (\n <InternalSideNavigationGroupDivider />\n ) : (\n <DesktopProfileDropdown.Divider />\n );\n};\n\nconst getText = (children: any, text: any): string | undefined => {\n if (typeof children === 'string') {\n return children;\n }\n\n if (typeof text === 'string') {\n return text;\n }\n\n return undefined;\n};\n\nconst getTag = (\n tag: ProfileDropdownLinkProps['tag'],\n counter: ProfileDropdownLinkProps['counter']\n): boolean => {\n return !!tag?.value || !!counter;\n};\n\nconst ProfileDropdownSection: FC<ProfileDropdownSectionProps> = props => {\n const { breakpoint } = useTitanLayoutContext();\n return breakpoint.isMobile ? (\n <MobileProfileDropdownSection {...props} />\n ) : (\n <DesktopProfileDropdown.Section {...props} />\n );\n};\nconst MobileProfileDropdownSection: FC<ProfileDropdownSectionProps> = ({\n children,\n text,\n tooltip,\n title,\n ...props\n}) => {\n const sectionText = getText(children, text);\n const { onNotificationsUpdate } = useNotificationsContext();\n onNotificationsUpdate(props.id, getTag(props.tag, props.counter));\n\n return sectionText ? (\n <InternalSideNavigationGroupTrigger {...props} title={sectionText} />\n ) : null;\n};\n\nconst ProfileDropdownLink: FC<ProfileDropdownLinkProps> = props => {\n const { breakpoint, NavigationComponent } = useTitanLayoutContext();\n return breakpoint.isMobile ? (\n <MobileProfileDropdownLink {...props} navigationComponent={NavigationComponent} />\n ) : (\n <DesktopProfileDropdown.Link {...props} />\n );\n};\nconst MobileProfileDropdownLink: FC<ProfileDropdownLinkProps & NavigationComponentProps> = ({\n external,\n to,\n tooltip,\n text,\n children,\n navigationComponent,\n ...props\n}) => {\n const { onNotificationsUpdate } = useNotificationsContext();\n const linkText = getText(children, text);\n const isExternalLink = external ?? to?.startsWith('http');\n onNotificationsUpdate(props.id, getTag(props.tag, props.counter));\n\n return linkText ? (\n <InternalSideNavigationGroupLink\n {...props}\n to={to}\n title={linkText}\n parentId={profileId}\n navigationComponent={isExternalLink ? ExternalNavComponent : navigationComponent}\n />\n ) : null;\n};\n\nexport const ProfileDropdown = Object.assign(ProfileDropdownContent, {\n Divider: ProfileDropdownDivider,\n Link: ProfileDropdownLink,\n Section: ProfileDropdownSection,\n});\n"],"names":["SvgAccountActive","SvgAccountInactive","useEffect","useState","NavigationComponentContext","ProfileDropdown","DesktopProfileDropdown","useTitanLayoutContext","InternalSideNavigationGroup","InternalSideNavigationGroupDivider","InternalSideNavigationGroupLink","InternalSideNavigationGroupTrigger","useNotificationsContext","useNotificationsState","ExternalNavComponent","children","isActive","to","activeClassName","props","a","href","ProfileDropdownContent","isTitanLayout","breakpoint","NavigationComponent","isMobile","MobileProfileDropdown","navigationComponent","Provider","value","displayName","profileId","expanded","setExpanded","hasNotifications","NotificationsContextProvider","onNotificationsUpdate","onExpandToggle","e","stopPropagation","id","undefined","title","icon","iconActive","submenuExpanded","onClick","tag","ProfileDropdownDivider","Divider","getText","text","getTag","counter","ProfileDropdownSection","MobileProfileDropdownSection","Section","tooltip","sectionText","ProfileDropdownLink","MobileProfileDropdownLink","Link","external","linkText","isExternalLink","startsWith","parentId","Object","assign"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/titan-layout/layout-profile.tsx"],"sourcesContent":["import SvgAccountActive from '@servicetitan/anvil2/assets/icons/st/gnav_account_active.svg';\nimport SvgAccountInactive from '@servicetitan/anvil2/assets/icons/st/gnav_account_inactive.svg';\n\nimport { FC, MouseEvent, useEffect, useState } from 'react';\nimport { NavLinkComponentProps } from '../../utils/navigation-context';\nimport { getCounterTag } from '../../utils/side-nav';\nimport {\n ProfileDropdownLinkProps,\n ProfileDropdownProps,\n ProfileDropdownSectionProps,\n} from '../profile-dropdown/interface';\nimport { DesktopProfileDropdown } from '../profile-dropdown/profile-dropdown';\nimport { NavigationComponentProps } from './interface-internal';\nimport { useTitanLayoutContext } from './layout-context';\nimport {\n InternalSideNavigationGroup,\n InternalSideNavigationGroupDivider,\n InternalSideNavigationGroupLink,\n InternalSideNavigationGroupTrigger,\n} from './layout-sidebar-links-internal';\nimport { useNotificationsContext, useNotificationsState } from './notifications-context';\n\nexport type {\n ProfileDropdownProps,\n ProfileDropdownSectionProps,\n ProfileDropdownLinkProps,\n} from '../profile-dropdown/interface';\n\nconst ExternalNavComponent: FC<NavLinkComponentProps> = ({\n children,\n isActive,\n to,\n activeClassName,\n ...props\n}) => (\n <a {...props} href={to}>\n {children}\n </a>\n);\n\nfunction ProfileDropdownComponent(props: ProfileDropdownProps) {\n const { breakpoint, NavigationComponent } = useTitanLayoutContext();\n return breakpoint.isMobile ? (\n <MobileProfileDropdown {...props} navigationComponent={NavigationComponent} />\n ) : (\n <DesktopProfileDropdown {...props} />\n );\n}\nconst profileId = '--profile';\n\nconst MobileProfileDropdown: FC<ProfileDropdownProps & NavigationComponentProps> = ({\n direction,\n trigger,\n hintPopup,\n portal,\n width,\n onClose,\n onOpen,\n className,\n children,\n ...rest\n}) => {\n const [expanded, setExpanded] = useState(false);\n const { hasNotifications, NotificationsContextProvider } = useNotificationsState();\n const { onNotificationsUpdate } = useNotificationsContext();\n const onExpandToggle = (e: MouseEvent<never>) => {\n e.stopPropagation();\n setExpanded(!expanded);\n };\n\n useEffect(() => {\n onNotificationsUpdate(profileId, hasNotifications);\n }, [hasNotifications, onNotificationsUpdate]);\n\n return (\n <NotificationsContextProvider>\n <InternalSideNavigationGroup\n id={profileId}\n to={undefined}\n title=\"Profile\"\n icon={SvgAccountInactive}\n iconActive={SvgAccountActive}\n isActive={expanded}\n className={className}\n {...rest}\n submenuExpanded={expanded}\n onExpandToggle={onExpandToggle}\n onClick={onExpandToggle}\n tag={{ value: hasNotifications }}\n >\n {children}\n </InternalSideNavigationGroup>\n </NotificationsContextProvider>\n );\n};\n\nconst ProfileDropdownDivider: FC = () => {\n const { breakpoint } = useTitanLayoutContext();\n return breakpoint.isMobile ? (\n <InternalSideNavigationGroupDivider />\n ) : (\n <DesktopProfileDropdown.Divider />\n );\n};\n\nconst getText = (children: any, text: any): string | undefined => {\n if (typeof children === 'string') {\n return children;\n }\n\n if (typeof text === 'string') {\n return text;\n }\n\n return undefined;\n};\n\nfunction ProfileDropdownSection(props: ProfileDropdownSectionProps) {\n const { breakpoint } = useTitanLayoutContext();\n return breakpoint.isMobile ? (\n <MobileProfileDropdownSection {...props} />\n ) : (\n <DesktopProfileDropdown.Section {...props} />\n );\n}\nconst MobileProfileDropdownSection: FC<ProfileDropdownSectionProps> = ({\n id,\n tooltip,\n tag,\n counter,\n\n className,\n children,\n text,\n ...rest\n}) => {\n const sectionText = getText(children, text);\n const { onNotificationsUpdate } = useNotificationsContext();\n const tagData = getCounterTag(counter, tag);\n onNotificationsUpdate(id, !!tagData);\n\n return sectionText ? (\n <InternalSideNavigationGroupTrigger\n {...rest}\n id={id}\n title={sectionText}\n isActive={undefined}\n tag={tagData}\n className={className}\n />\n ) : null;\n};\n\nfunction ProfileDropdownLink(props: ProfileDropdownLinkProps) {\n const { breakpoint, NavigationComponent } = useTitanLayoutContext();\n return breakpoint.isMobile ? (\n <MobileProfileDropdownLink {...props} navigationComponent={NavigationComponent} />\n ) : (\n <DesktopProfileDropdown.Link {...props} />\n );\n}\nconst MobileProfileDropdownLink: FC<ProfileDropdownLinkProps & NavigationComponentProps> = ({\n id,\n external,\n to,\n tooltip,\n text,\n children,\n className,\n navigationComponent,\n tag,\n counter,\n ...rest\n}) => {\n const { onNotificationsUpdate } = useNotificationsContext();\n const linkText = getText(children, text);\n const isExternalLink = external ?? to?.startsWith('http');\n const tagData = getCounterTag(counter, tag);\n onNotificationsUpdate(id, !!tagData);\n\n return linkText ? (\n <InternalSideNavigationGroupLink\n {...rest}\n id={id}\n to={to}\n title={linkText}\n isActive={undefined}\n className={className}\n tag={tagData}\n parentId={profileId}\n navigationComponent={isExternalLink ? ExternalNavComponent : navigationComponent}\n />\n ) : null;\n};\n\nexport const ProfileDropdown = Object.assign(ProfileDropdownComponent, {\n Divider: ProfileDropdownDivider,\n Link: ProfileDropdownLink,\n Section: ProfileDropdownSection,\n});\n"],"names":["SvgAccountActive","SvgAccountInactive","useEffect","useState","getCounterTag","DesktopProfileDropdown","useTitanLayoutContext","InternalSideNavigationGroup","InternalSideNavigationGroupDivider","InternalSideNavigationGroupLink","InternalSideNavigationGroupTrigger","useNotificationsContext","useNotificationsState","ExternalNavComponent","children","isActive","to","activeClassName","props","a","href","ProfileDropdownComponent","breakpoint","NavigationComponent","isMobile","MobileProfileDropdown","navigationComponent","profileId","direction","trigger","hintPopup","portal","width","onClose","onOpen","className","rest","expanded","setExpanded","hasNotifications","NotificationsContextProvider","onNotificationsUpdate","onExpandToggle","e","stopPropagation","id","undefined","title","icon","iconActive","submenuExpanded","onClick","tag","value","ProfileDropdownDivider","Divider","getText","text","ProfileDropdownSection","MobileProfileDropdownSection","Section","tooltip","counter","sectionText","tagData","ProfileDropdownLink","MobileProfileDropdownLink","Link","external","linkText","isExternalLink","startsWith","parentId","ProfileDropdown","Object","assign"],"mappings":"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"}
|
|
@@ -1,48 +1,71 @@
|
|
|
1
|
+
import { IconProps } from '@servicetitan/anvil2';
|
|
1
2
|
import { FC, MouseEvent, ReactNode } from 'react';
|
|
2
|
-
import { NavigationItemData, NavigationSubmenuItemData } from '../../utils/navigation';
|
|
3
3
|
import { BadgeTagProps } from '../badge-tag';
|
|
4
|
-
import { TitanLayoutSidebarTriggerProps } from './interface';
|
|
5
4
|
import { NavigationComponentProps } from './interface-internal';
|
|
6
|
-
export interface InternalSideNavigationItemContentProps
|
|
5
|
+
export interface InternalSideNavigationItemContentProps {
|
|
6
|
+
icon: IconProps['svg'] | undefined;
|
|
7
|
+
iconActive: IconProps['svg'] | undefined;
|
|
8
|
+
title: string;
|
|
7
9
|
submenuExpanded: boolean | undefined;
|
|
8
10
|
tag: BadgeTagProps | undefined;
|
|
9
11
|
onExpandToggle?: (e: MouseEvent<never>) => void;
|
|
10
12
|
}
|
|
11
|
-
|
|
12
|
-
export
|
|
13
|
-
|
|
14
|
-
|
|
13
|
+
/** Side Navigation menu item (for internal usage) */
|
|
14
|
+
export declare const InternalSideNavigationLink: FC<NavigationComponentProps & {
|
|
15
|
+
id: string;
|
|
16
|
+
to: string;
|
|
17
|
+
title: string;
|
|
18
|
+
isActive: boolean | ((pathname: string) => boolean) | undefined;
|
|
19
|
+
icon: IconProps['svg'] | undefined;
|
|
20
|
+
iconActive: IconProps['svg'] | undefined;
|
|
21
|
+
className: string | undefined;
|
|
15
22
|
tag: BadgeTagProps | undefined;
|
|
23
|
+
submenuExpanded: boolean | undefined;
|
|
16
24
|
onExpandToggle?: (e: MouseEvent<never>) => void;
|
|
17
|
-
}
|
|
18
|
-
export declare const internalNavigationContentContainerProps: ({ className, icon, iconActive, iconComponent, id, isActive, prefix, isLink, }: Omit<TitanLayoutSidebarTriggerProps, "isActive" | "tag"> & {
|
|
19
|
-
prefix: string;
|
|
20
|
-
isActive?: any;
|
|
21
|
-
isLink: boolean;
|
|
22
|
-
}) => {
|
|
23
|
-
'data-cy': string;
|
|
24
|
-
'data-pendo': string;
|
|
25
|
-
className: string;
|
|
26
|
-
};
|
|
27
|
-
/** Side Navigation menu item (for internal usage) */
|
|
28
|
-
export declare const InternalSideNavigationLink: FC<InternalSideNavigationLinkProps>;
|
|
25
|
+
}>;
|
|
29
26
|
/** Side Navigation menu trigger (for internal usage) */
|
|
30
|
-
export declare const InternalSideNavigationTrigger: FC<
|
|
27
|
+
export declare const InternalSideNavigationTrigger: FC<{
|
|
28
|
+
id: string;
|
|
29
|
+
title: string;
|
|
30
|
+
isActive: boolean | undefined;
|
|
31
|
+
icon: IconProps['svg'] | undefined;
|
|
32
|
+
iconActive: IconProps['svg'] | undefined;
|
|
33
|
+
className: string | undefined;
|
|
34
|
+
submenuExpanded: boolean | undefined;
|
|
35
|
+
tag: BadgeTagProps | undefined;
|
|
31
36
|
onClick?: (e: MouseEvent<never>) => void;
|
|
37
|
+
onExpandToggle?: (e: MouseEvent<never>) => void;
|
|
32
38
|
}>;
|
|
33
|
-
export declare const InternalSideNavigationGroupLink: FC<
|
|
39
|
+
export declare const InternalSideNavigationGroupLink: FC<NavigationComponentProps & {
|
|
40
|
+
id: string;
|
|
41
|
+
to: string;
|
|
42
|
+
title: string;
|
|
43
|
+
isActive: boolean | ((pathname: string) => boolean) | undefined;
|
|
44
|
+
className: string | undefined;
|
|
45
|
+
tag: BadgeTagProps | undefined;
|
|
34
46
|
parentId: string;
|
|
35
47
|
}>;
|
|
36
|
-
export declare const InternalSideNavigationGroupTrigger: FC<
|
|
48
|
+
export declare const InternalSideNavigationGroupTrigger: FC<{
|
|
49
|
+
id: string;
|
|
50
|
+
title: string;
|
|
51
|
+
isActive: boolean | ((pathname: string) => boolean) | undefined;
|
|
52
|
+
className: string | undefined;
|
|
53
|
+
tag: BadgeTagProps | undefined;
|
|
37
54
|
onClick?: (e: MouseEvent<any>) => void;
|
|
38
55
|
}>;
|
|
39
56
|
export declare const InternalSideNavigationGroupDivider: () => import("react/jsx-runtime").JSX.Element;
|
|
40
|
-
export declare const InternalSideNavigationGroup: FC<
|
|
57
|
+
export declare const InternalSideNavigationGroup: FC<NavigationComponentProps & {
|
|
58
|
+
id: string;
|
|
59
|
+
to: string | undefined;
|
|
60
|
+
title: string;
|
|
61
|
+
isActive: boolean | ((pathname: string) => boolean) | undefined;
|
|
62
|
+
icon: IconProps['svg'] | undefined;
|
|
63
|
+
iconActive: IconProps['svg'] | undefined;
|
|
64
|
+
className: string | undefined;
|
|
65
|
+
tag: BadgeTagProps | undefined;
|
|
41
66
|
children: ReactNode;
|
|
42
67
|
submenuExpanded: boolean;
|
|
43
68
|
onExpandToggle?: (e: MouseEvent<never>) => void;
|
|
44
|
-
tag: BadgeTagProps | undefined;
|
|
45
|
-
to: NavigationItemData['to'] | undefined;
|
|
46
69
|
onClick?: (e: MouseEvent<never>) => void;
|
|
47
70
|
}>;
|
|
48
71
|
//# sourceMappingURL=layout-sidebar-links-internal.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"layout-sidebar-links-internal.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-sidebar-links-internal.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"layout-sidebar-links-internal.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-sidebar-links-internal.tsx"],"names":[],"mappings":"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"}
|
|
@@ -4,28 +4,20 @@ import SvgGroupCollapse from '@servicetitan/anvil2/assets/icons/material/round/e
|
|
|
4
4
|
import SvgGroupExpand from '@servicetitan/anvil2/assets/icons/material/round/expand_more.svg';
|
|
5
5
|
import classNames from 'classnames';
|
|
6
6
|
import { Fragment } from 'react';
|
|
7
|
-
import { getCounterTag } from '../../utils/side-nav';
|
|
8
7
|
import { BadgeTag } from '../badge-tag';
|
|
9
8
|
import * as Styles from './layout-sidebar.module.less';
|
|
10
|
-
|
|
9
|
+
const InternalSideNavigationItemContent = ({ icon, iconActive, tag, title, submenuExpanded, onExpandToggle })=>/*#__PURE__*/ _jsxs(Fragment, {
|
|
11
10
|
children: [
|
|
12
11
|
/*#__PURE__*/ _jsxs("div", {
|
|
13
12
|
className: Styles.navItemIconWrapper,
|
|
14
13
|
children: [
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
})
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
className: classNames(Styles.navIcon, Styles.navIconInactive, iconClassName)
|
|
23
|
-
}),
|
|
24
|
-
iconActive && /*#__PURE__*/ _jsx(Icon, {
|
|
25
|
-
svg: iconActive,
|
|
26
|
-
className: classNames(Styles.navIcon, Styles.navIconActive, iconClassName)
|
|
27
|
-
})
|
|
28
|
-
]
|
|
14
|
+
icon && /*#__PURE__*/ _jsx(Icon, {
|
|
15
|
+
svg: icon,
|
|
16
|
+
className: classNames(Styles.navIcon, Styles.navIconInactive)
|
|
17
|
+
}),
|
|
18
|
+
iconActive && /*#__PURE__*/ _jsx(Icon, {
|
|
19
|
+
svg: iconActive,
|
|
20
|
+
className: classNames(Styles.navIcon, Styles.navIconActive)
|
|
29
21
|
}),
|
|
30
22
|
/*#__PURE__*/ _jsx("div", {
|
|
31
23
|
className: Styles.navItemTextExpanded,
|
|
@@ -63,58 +55,55 @@ export const InternalSideNavigationItemContent = ({ icon, iconActive, iconClassN
|
|
|
63
55
|
})
|
|
64
56
|
]
|
|
65
57
|
});
|
|
66
|
-
export const
|
|
67
|
-
'data-cy': `${prefix}-${id}`,
|
|
68
|
-
'data-pendo': `${prefix}-${id}`,
|
|
69
|
-
'className': classNames(Styles.navItem, className, {
|
|
70
|
-
[Styles.navLink]: isLink,
|
|
71
|
-
[Styles.navItemActive]: isActive === true,
|
|
72
|
-
[Styles.navItemIconSwitch]: !!icon && !!iconActive && !iconComponent
|
|
73
|
-
})
|
|
74
|
-
});
|
|
75
|
-
/** Side Navigation menu item (for internal usage) */ export const InternalSideNavigationLink = ({ to, className, dataPrefix, isActive, navigationComponent: NavigationComponent, submenuExpanded, onExpandToggle, ...props })=>{
|
|
58
|
+
/** Side Navigation menu item (for internal usage) */ export const InternalSideNavigationLink = ({ id, to, title, isActive, icon, iconActive, className, tag, navigationComponent: NavigationComponent, submenuExpanded, onExpandToggle, ...rest })=>{
|
|
76
59
|
return /*#__PURE__*/ _jsx(NavigationComponent, {
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
isActive,
|
|
82
|
-
|
|
60
|
+
"data-cy": `navigation-item-${id}`,
|
|
61
|
+
"data-pendo": `navigation-item-${id}`,
|
|
62
|
+
...rest,
|
|
63
|
+
className: classNames(Styles.navItem, Styles.navLink, className, {
|
|
64
|
+
[Styles.navItemActive]: isActive === true,
|
|
65
|
+
[Styles.navItemIconSwitch]: !!icon && !!iconActive
|
|
83
66
|
}),
|
|
84
67
|
to: to,
|
|
85
68
|
isActive: typeof isActive === 'function' ? isActive : undefined,
|
|
86
69
|
activeClassName: Styles.navItemActive,
|
|
87
70
|
children: /*#__PURE__*/ _jsx(InternalSideNavigationItemContent, {
|
|
71
|
+
icon: icon,
|
|
72
|
+
iconActive: iconActive,
|
|
88
73
|
submenuExpanded: submenuExpanded,
|
|
89
74
|
onExpandToggle: onExpandToggle,
|
|
90
|
-
|
|
75
|
+
title: title,
|
|
76
|
+
tag: tag
|
|
91
77
|
})
|
|
92
78
|
});
|
|
93
79
|
};
|
|
94
|
-
/** Side Navigation menu trigger (for internal usage) */ export const InternalSideNavigationTrigger = ({
|
|
80
|
+
/** Side Navigation menu trigger (for internal usage) */ export const InternalSideNavigationTrigger = ({ id, title, isActive, icon, iconActive, className, submenuExpanded, tag, onExpandToggle, ...rest })=>{
|
|
95
81
|
return /*#__PURE__*/ _jsx("div", {
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
82
|
+
"data-cy": `navigation-item-${id}`,
|
|
83
|
+
"data-pendo": `navigation-item-${id}`,
|
|
84
|
+
...rest,
|
|
85
|
+
className: classNames(Styles.navItem, className, {
|
|
86
|
+
[Styles.navLink]: !!rest.onClick,
|
|
87
|
+
[Styles.navItemActive]: isActive === true,
|
|
88
|
+
[Styles.navItemIconSwitch]: !!icon && !!iconActive
|
|
102
89
|
}),
|
|
103
|
-
onClick: onClick,
|
|
104
90
|
children: /*#__PURE__*/ _jsx(InternalSideNavigationItemContent, {
|
|
105
91
|
submenuExpanded: submenuExpanded,
|
|
106
92
|
onExpandToggle: onExpandToggle,
|
|
107
|
-
|
|
93
|
+
icon: icon,
|
|
94
|
+
iconActive: iconActive,
|
|
95
|
+
title: title,
|
|
96
|
+
tag: tag
|
|
108
97
|
})
|
|
109
98
|
});
|
|
110
99
|
};
|
|
111
|
-
export const InternalSideNavigationGroupLink = ({ id,
|
|
100
|
+
export const InternalSideNavigationGroupLink = ({ id, to, title, isActive, className, tag, parentId, navigationComponent: NavigationComponent, ...rest })=>{
|
|
112
101
|
return /*#__PURE__*/ _jsxs(NavigationComponent, {
|
|
113
102
|
"data-cy": `navigation-item-${parentId}--${id}`,
|
|
114
103
|
"data-pendo": `navigation-item-${parentId}--${id}`,
|
|
115
104
|
...rest,
|
|
116
105
|
to: to,
|
|
117
|
-
className: classNames(Styles.submenuItem, Styles.submenuLink, {
|
|
106
|
+
className: classNames(Styles.submenuItem, Styles.submenuLink, className, {
|
|
118
107
|
[Styles.submenuLinkActive]: isActive === true
|
|
119
108
|
}),
|
|
120
109
|
isActive: typeof isActive === 'function' ? isActive : undefined,
|
|
@@ -124,13 +113,13 @@ export const InternalSideNavigationGroupLink = ({ id, counter, parentId, tag, ti
|
|
|
124
113
|
children: title
|
|
125
114
|
}),
|
|
126
115
|
/*#__PURE__*/ _jsx(BadgeTag, {
|
|
127
|
-
data:
|
|
116
|
+
data: tag,
|
|
128
117
|
className: Styles.submenuLinkCounter
|
|
129
118
|
})
|
|
130
119
|
]
|
|
131
120
|
}, id);
|
|
132
121
|
};
|
|
133
|
-
export const InternalSideNavigationGroupTrigger = ({ id,
|
|
122
|
+
export const InternalSideNavigationGroupTrigger = ({ id, title, isActive, className, tag, onClick, ...rest })=>{
|
|
134
123
|
return /*#__PURE__*/ _jsxs("div", {
|
|
135
124
|
"data-cy": `navigation-item-${id}`,
|
|
136
125
|
"data-pendo": `navigation-item-${id}`,
|
|
@@ -145,7 +134,7 @@ export const InternalSideNavigationGroupTrigger = ({ id, counter, onClick, tag,
|
|
|
145
134
|
children: title
|
|
146
135
|
}),
|
|
147
136
|
/*#__PURE__*/ _jsx(BadgeTag, {
|
|
148
|
-
data:
|
|
137
|
+
data: tag,
|
|
149
138
|
className: Styles.submenuLinkCounter
|
|
150
139
|
})
|
|
151
140
|
]
|
|
@@ -156,19 +145,34 @@ export const InternalSideNavigationGroupDivider = ()=>{
|
|
|
156
145
|
className: Styles.divider
|
|
157
146
|
});
|
|
158
147
|
};
|
|
159
|
-
export const InternalSideNavigationGroup = ({ children, submenuExpanded,
|
|
148
|
+
export const InternalSideNavigationGroup = ({ id, to, title, isActive, icon, iconActive, className, tag, children, submenuExpanded, onExpandToggle, onClick, navigationComponent, ...rest })=>{
|
|
160
149
|
return /*#__PURE__*/ _jsxs("div", {
|
|
161
150
|
className: classNames(Styles.navGroupWrapper),
|
|
162
151
|
children: [
|
|
163
152
|
/*#__PURE__*/ _jsx("div", {
|
|
164
153
|
className: Styles.navGroupItem,
|
|
165
154
|
children: to ? /*#__PURE__*/ _jsx(InternalSideNavigationLink, {
|
|
166
|
-
|
|
155
|
+
id: id,
|
|
167
156
|
to: to,
|
|
157
|
+
title: title,
|
|
158
|
+
isActive: isActive,
|
|
159
|
+
icon: icon,
|
|
160
|
+
iconActive: iconActive,
|
|
161
|
+
tag: tag,
|
|
162
|
+
className: className,
|
|
163
|
+
...rest,
|
|
168
164
|
submenuExpanded: submenuExpanded,
|
|
169
|
-
onExpandToggle: onExpandToggle
|
|
165
|
+
onExpandToggle: onExpandToggle,
|
|
166
|
+
navigationComponent: navigationComponent
|
|
170
167
|
}) : /*#__PURE__*/ _jsx(InternalSideNavigationTrigger, {
|
|
171
|
-
|
|
168
|
+
id: id,
|
|
169
|
+
title: title,
|
|
170
|
+
isActive: isActive === true || undefined,
|
|
171
|
+
icon: icon,
|
|
172
|
+
iconActive: iconActive,
|
|
173
|
+
tag: tag,
|
|
174
|
+
className: className,
|
|
175
|
+
...rest,
|
|
172
176
|
submenuExpanded: submenuExpanded,
|
|
173
177
|
onExpandToggle: onExpandToggle,
|
|
174
178
|
onClick: onClick
|
|
@@ -178,7 +182,7 @@ export const InternalSideNavigationGroup = ({ children, submenuExpanded, to, onE
|
|
|
178
182
|
className: classNames(Styles.submenuWrapper, {
|
|
179
183
|
[Styles.submenuWrapperCollapsed]: !submenuExpanded
|
|
180
184
|
}),
|
|
181
|
-
"data-cy": `navigation-submenu-${
|
|
185
|
+
"data-cy": `navigation-submenu-${id}`,
|
|
182
186
|
children: /*#__PURE__*/ _jsx("div", {
|
|
183
187
|
className: Styles.submenu,
|
|
184
188
|
children: children
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/titan-layout/layout-sidebar-links-internal.tsx"],"sourcesContent":["import { Icon } from '@servicetitan/anvil2';\nimport SvgGroupCollapse from '@servicetitan/anvil2/assets/icons/material/round/expand_less.svg';\nimport SvgGroupExpand from '@servicetitan/anvil2/assets/icons/material/round/expand_more.svg';\n\nimport classNames from 'classnames';\nimport { FC, Fragment, MouseEvent, ReactNode } from 'react';\nimport { NavigationItemData, NavigationSubmenuItemData } from '../../utils/navigation';\nimport { getCounterTag } from '../../utils/side-nav';\nimport { BadgeTag, BadgeTagProps } from '../badge-tag';\nimport { TitanLayoutSidebarTriggerProps } from './interface';\nimport { NavigationComponentProps } from './interface-internal';\nimport * as Styles from './layout-sidebar.module.less';\n\nexport interface InternalSideNavigationItemContentProps\n extends Omit<NavigationItemData, 'iconName' | 'to' | 'counter' | 'tag'> {\n submenuExpanded: boolean | undefined;\n tag: BadgeTagProps | undefined;\n onExpandToggle?: (e: MouseEvent<never>) => void;\n}\n\nexport const InternalSideNavigationItemContent: FC<InternalSideNavigationItemContentProps> = ({\n icon,\n iconActive,\n iconClassName,\n iconComponent: IconComponent,\n tag,\n title,\n submenuExpanded,\n onExpandToggle,\n}) => (\n <Fragment>\n <div className={Styles.navItemIconWrapper}>\n {IconComponent ? (\n <i className={classNames(Styles.navIcon, iconClassName)}>\n <IconComponent />\n </i>\n ) : (\n <Fragment>\n {icon && (\n <Icon\n svg={icon}\n className={classNames(\n Styles.navIcon,\n Styles.navIconInactive,\n iconClassName\n )}\n />\n )}\n {iconActive && (\n <Icon\n svg={iconActive}\n className={classNames(\n Styles.navIcon,\n Styles.navIconActive,\n iconClassName\n )}\n />\n )}\n </Fragment>\n )}\n\n <div className={Styles.navItemTextExpanded} data-cy=\"nav-item-label\">\n {title}\n </div>\n {!!tag && (\n <BadgeTag\n data={tag}\n className={Styles.navItemCounter}\n longClassName={Styles.navItemCounterLong}\n />\n )}\n {typeof submenuExpanded === 'boolean' && (\n <div className={Styles.navItemGroupToggleWrapper}>\n <Icon\n svg={submenuExpanded ? SvgGroupCollapse : SvgGroupExpand}\n className={Styles.navItemGroupToggle}\n onClick={onExpandToggle}\n />\n <div\n className={Styles.navItemGroupToggleClick}\n data-cy=\"nav-item-group-expand\"\n onClick={onExpandToggle}\n />\n </div>\n )}\n </div>\n\n <div\n className={classNames(Styles.navItemTextCollapsed, {\n [Styles.navItemTextSmall]: !!title && title.length >= 10,\n })}\n data-cy=\"nav-item-label\"\n >\n {title}\n </div>\n </Fragment>\n);\n\nexport interface InternalSideNavigationLinkProps\n extends Omit<NavigationItemData, 'iconName' | 'counter' | 'tag'>,\n NavigationComponentProps {\n submenuExpanded: boolean | undefined;\n dataPrefix?: string;\n tag: BadgeTagProps | undefined;\n onExpandToggle?: (e: MouseEvent<never>) => void;\n}\n\nexport const internalNavigationContentContainerProps = ({\n className,\n icon,\n iconActive,\n iconComponent,\n id,\n isActive,\n prefix,\n isLink,\n}: Omit<TitanLayoutSidebarTriggerProps, 'isActive' | 'tag'> & {\n prefix: string;\n isActive?: any;\n isLink: boolean;\n}) => ({\n 'data-cy': `${prefix}-${id}`,\n 'data-pendo': `${prefix}-${id}`,\n 'className': classNames(Styles.navItem, className, {\n [Styles.navLink]: isLink,\n [Styles.navItemActive]: isActive === true,\n [Styles.navItemIconSwitch]: !!icon && !!iconActive && !iconComponent,\n }),\n});\n\n/** Side Navigation menu item (for internal usage) */\nexport const InternalSideNavigationLink: FC<InternalSideNavigationLinkProps> = ({\n to,\n className,\n dataPrefix,\n isActive,\n navigationComponent: NavigationComponent,\n submenuExpanded,\n onExpandToggle,\n ...props\n}) => {\n return (\n <NavigationComponent\n {...internalNavigationContentContainerProps({\n ...props,\n prefix: dataPrefix ?? 'navigation-item',\n className,\n isActive,\n isLink: true,\n })}\n to={to}\n isActive={typeof isActive === 'function' ? isActive : undefined}\n activeClassName={Styles.navItemActive}\n >\n <InternalSideNavigationItemContent\n submenuExpanded={submenuExpanded}\n onExpandToggle={onExpandToggle}\n {...props}\n />\n </NavigationComponent>\n );\n};\n\n/** Side Navigation menu trigger (for internal usage) */\nexport const InternalSideNavigationTrigger: FC<\n Omit<InternalSideNavigationLinkProps, 'to' | 'navigationComponent'> & {\n onClick?: (e: MouseEvent<never>) => void;\n }\n> = ({ className, dataPrefix, isActive, submenuExpanded, onExpandToggle, onClick, ...props }) => {\n return (\n <div\n {...internalNavigationContentContainerProps({\n ...props,\n prefix: dataPrefix ?? 'navigation-item',\n className,\n isActive,\n isLink: !!onClick,\n })}\n onClick={onClick}\n >\n <InternalSideNavigationItemContent\n submenuExpanded={submenuExpanded}\n onExpandToggle={onExpandToggle}\n {...props}\n />\n </div>\n );\n};\n\nexport const InternalSideNavigationGroupLink: FC<\n NavigationSubmenuItemData & NavigationComponentProps & { parentId: string }\n> = ({\n id,\n counter,\n parentId,\n tag,\n title,\n to,\n isActive,\n navigationComponent: NavigationComponent,\n ...rest\n}) => {\n return (\n <NavigationComponent\n key={id}\n data-cy={`navigation-item-${parentId}--${id}`}\n data-pendo={`navigation-item-${parentId}--${id}`}\n {...rest}\n to={to}\n className={classNames(Styles.submenuItem, Styles.submenuLink, {\n [Styles.submenuLinkActive]: isActive === true,\n })}\n isActive={typeof isActive === 'function' ? isActive : undefined}\n activeClassName={Styles.submenuLinkActive}\n >\n <span>{title}</span>\n <BadgeTag data={getCounterTag(counter, tag)} className={Styles.submenuLinkCounter} />\n </NavigationComponent>\n );\n};\n\nexport const InternalSideNavigationGroupTrigger: FC<\n Omit<NavigationSubmenuItemData, 'to'> & { onClick?: (e: MouseEvent<any>) => void }\n> = ({ id, counter, onClick, tag, title, isActive, ...rest }) => {\n return (\n <div\n data-cy={`navigation-item-${id}`}\n data-pendo={`navigation-item-${id}`}\n key={id}\n {...rest}\n className={classNames(Styles.submenuItem, {\n [Styles.submenuLink]: !!onClick,\n [Styles.submenuLinkActive]: isActive === true,\n })}\n onClick={onClick}\n >\n <span>{title}</span>\n <BadgeTag data={getCounterTag(counter, tag)} className={Styles.submenuLinkCounter} />\n </div>\n );\n};\n\nexport const InternalSideNavigationGroupDivider = () => {\n return <div className={Styles.divider} />;\n};\n\nexport const InternalSideNavigationGroup: FC<\n Omit<NavigationItemData, 'tag' | 'counter' | 'to'> &\n NavigationComponentProps & {\n children: ReactNode;\n submenuExpanded: boolean;\n onExpandToggle?: (e: MouseEvent<never>) => void;\n tag: BadgeTagProps | undefined;\n to: NavigationItemData['to'] | undefined;\n onClick?: (e: MouseEvent<never>) => void;\n }\n> = ({ children, submenuExpanded, to, onExpandToggle, onClick, ...props }) => {\n return (\n <div className={classNames(Styles.navGroupWrapper)}>\n <div className={Styles.navGroupItem}>\n {to ? (\n <InternalSideNavigationLink\n {...props}\n to={to}\n submenuExpanded={submenuExpanded}\n onExpandToggle={onExpandToggle}\n />\n ) : (\n <InternalSideNavigationTrigger\n {...props}\n submenuExpanded={submenuExpanded}\n onExpandToggle={onExpandToggle}\n onClick={onClick}\n />\n )}\n </div>\n <div\n className={classNames(Styles.submenuWrapper, {\n [Styles.submenuWrapperCollapsed]: !submenuExpanded,\n })}\n data-cy={`navigation-submenu-${props.id}`}\n >\n <div className={Styles.submenu}>{children}</div>\n </div>\n </div>\n );\n};\n"],"names":["Icon","SvgGroupCollapse","SvgGroupExpand","classNames","Fragment","getCounterTag","BadgeTag","Styles","InternalSideNavigationItemContent","icon","iconActive","iconClassName","iconComponent","IconComponent","tag","title","submenuExpanded","onExpandToggle","div","className","navItemIconWrapper","i","navIcon","svg","navIconInactive","navIconActive","navItemTextExpanded","data-cy","data","navItemCounter","longClassName","navItemCounterLong","navItemGroupToggleWrapper","navItemGroupToggle","onClick","navItemGroupToggleClick","navItemTextCollapsed","navItemTextSmall","length","internalNavigationContentContainerProps","id","isActive","prefix","isLink","navItem","navLink","navItemActive","navItemIconSwitch","InternalSideNavigationLink","to","dataPrefix","navigationComponent","NavigationComponent","props","undefined","activeClassName","InternalSideNavigationTrigger","InternalSideNavigationGroupLink","counter","parentId","rest","data-pendo","submenuItem","submenuLink","submenuLinkActive","span","submenuLinkCounter","InternalSideNavigationGroupTrigger","InternalSideNavigationGroupDivider","divider","InternalSideNavigationGroup","children","navGroupWrapper","navGroupItem","submenuWrapper","submenuWrapperCollapsed","submenu"],"mappings":";AAAA,SAASA,IAAI,QAAQ,uBAAuB;AAC5C,OAAOC,sBAAsB,mEAAmE;AAChG,OAAOC,oBAAoB,mEAAmE;AAE9F,OAAOC,gBAAgB,aAAa;AACpC,SAAaC,QAAQ,QAA+B,QAAQ;AAE5D,SAASC,aAAa,QAAQ,uBAAuB;AACrD,SAASC,QAAQ,QAAuB,eAAe;AAGvD,YAAYC,YAAY,+BAA+B;AASvD,OAAO,MAAMC,oCAAgF,CAAC,EAC1FC,IAAI,EACJC,UAAU,EACVC,aAAa,EACbC,eAAeC,aAAa,EAC5BC,GAAG,EACHC,KAAK,EACLC,eAAe,EACfC,cAAc,EACjB,iBACG,MAACb;;0BACG,MAACc;gBAAIC,WAAWZ,OAAOa,kBAAkB;;oBACpCP,8BACG,KAACQ;wBAAEF,WAAWhB,WAAWI,OAAOe,OAAO,EAAEX;kCACrC,cAAA,KAACE;uCAGL,MAACT;;4BACIK,sBACG,KAACT;gCACGuB,KAAKd;gCACLU,WAAWhB,WACPI,OAAOe,OAAO,EACdf,OAAOiB,eAAe,EACtBb;;4BAIXD,4BACG,KAACV;gCACGuB,KAAKb;gCACLS,WAAWhB,WACPI,OAAOe,OAAO,EACdf,OAAOkB,aAAa,EACpBd;;;;kCAOpB,KAACO;wBAAIC,WAAWZ,OAAOmB,mBAAmB;wBAAEC,WAAQ;kCAC/CZ;;oBAEJ,CAAC,CAACD,qBACC,KAACR;wBACGsB,MAAMd;wBACNK,WAAWZ,OAAOsB,cAAc;wBAChCC,eAAevB,OAAOwB,kBAAkB;;oBAG/C,OAAOf,oBAAoB,2BACxB,MAACE;wBAAIC,WAAWZ,OAAOyB,yBAAyB;;0CAC5C,KAAChC;gCACGuB,KAAKP,kBAAkBf,mBAAmBC;gCAC1CiB,WAAWZ,OAAO0B,kBAAkB;gCACpCC,SAASjB;;0CAEb,KAACC;gCACGC,WAAWZ,OAAO4B,uBAAuB;gCACzCR,WAAQ;gCACRO,SAASjB;;;;;;0BAMzB,KAACC;gBACGC,WAAWhB,WAAWI,OAAO6B,oBAAoB,EAAE;oBAC/C,CAAC7B,OAAO8B,gBAAgB,CAAC,EAAE,CAAC,CAACtB,SAASA,MAAMuB,MAAM,IAAI;gBAC1D;gBACAX,WAAQ;0BAEPZ;;;OAGX;AAWF,OAAO,MAAMwB,0CAA0C,CAAC,EACpDpB,SAAS,EACTV,IAAI,EACJC,UAAU,EACVE,aAAa,EACb4B,EAAE,EACFC,QAAQ,EACRC,MAAM,EACNC,MAAM,EAKT,GAAM,CAAA;QACH,WAAW,GAAGD,OAAO,CAAC,EAAEF,IAAI;QAC5B,cAAc,GAAGE,OAAO,CAAC,EAAEF,IAAI;QAC/B,aAAarC,WAAWI,OAAOqC,OAAO,EAAEzB,WAAW;YAC/C,CAACZ,OAAOsC,OAAO,CAAC,EAAEF;YAClB,CAACpC,OAAOuC,aAAa,CAAC,EAAEL,aAAa;YACrC,CAAClC,OAAOwC,iBAAiB,CAAC,EAAE,CAAC,CAACtC,QAAQ,CAAC,CAACC,cAAc,CAACE;QAC3D;IACJ,CAAA,EAAG;AAEH,mDAAmD,GACnD,OAAO,MAAMoC,6BAAkE,CAAC,EAC5EC,EAAE,EACF9B,SAAS,EACT+B,UAAU,EACVT,QAAQ,EACRU,qBAAqBC,mBAAmB,EACxCpC,eAAe,EACfC,cAAc,EACd,GAAGoC,OACN;IACG,qBACI,KAACD;QACI,GAAGb,wCAAwC;YACxC,GAAGc,KAAK;YACRX,QAAQQ,uBAAAA,wBAAAA,aAAc;YACtB/B;YACAsB;YACAE,QAAQ;QACZ,EAAE;QACFM,IAAIA;QACJR,UAAU,OAAOA,aAAa,aAAaA,WAAWa;QACtDC,iBAAiBhD,OAAOuC,aAAa;kBAErC,cAAA,KAACtC;YACGQ,iBAAiBA;YACjBC,gBAAgBA;YACf,GAAGoC,KAAK;;;AAIzB,EAAE;AAEF,sDAAsD,GACtD,OAAO,MAAMG,gCAIT,CAAC,EAAErC,SAAS,EAAE+B,UAAU,EAAET,QAAQ,EAAEzB,eAAe,EAAEC,cAAc,EAAEiB,OAAO,EAAE,GAAGmB,OAAO;IACxF,qBACI,KAACnC;QACI,GAAGqB,wCAAwC;YACxC,GAAGc,KAAK;YACRX,QAAQQ,uBAAAA,wBAAAA,aAAc;YACtB/B;YACAsB;YACAE,QAAQ,CAAC,CAACT;QACd,EAAE;QACFA,SAASA;kBAET,cAAA,KAAC1B;YACGQ,iBAAiBA;YACjBC,gBAAgBA;YACf,GAAGoC,KAAK;;;AAIzB,EAAE;AAEF,OAAO,MAAMI,kCAET,CAAC,EACDjB,EAAE,EACFkB,OAAO,EACPC,QAAQ,EACR7C,GAAG,EACHC,KAAK,EACLkC,EAAE,EACFR,QAAQ,EACRU,qBAAqBC,mBAAmB,EACxC,GAAGQ,MACN;IACG,qBACI,MAACR;QAEGzB,WAAS,CAAC,gBAAgB,EAAEgC,SAAS,EAAE,EAAEnB,IAAI;QAC7CqB,cAAY,CAAC,gBAAgB,EAAEF,SAAS,EAAE,EAAEnB,IAAI;QAC/C,GAAGoB,IAAI;QACRX,IAAIA;QACJ9B,WAAWhB,WAAWI,OAAOuD,WAAW,EAAEvD,OAAOwD,WAAW,EAAE;YAC1D,CAACxD,OAAOyD,iBAAiB,CAAC,EAAEvB,aAAa;QAC7C;QACAA,UAAU,OAAOA,aAAa,aAAaA,WAAWa;QACtDC,iBAAiBhD,OAAOyD,iBAAiB;;0BAEzC,KAACC;0BAAMlD;;0BACP,KAACT;gBAASsB,MAAMvB,cAAcqD,SAAS5C;gBAAMK,WAAWZ,OAAO2D,kBAAkB;;;OAZ5E1B;AAejB,EAAE;AAEF,OAAO,MAAM2B,qCAET,CAAC,EAAE3B,EAAE,EAAEkB,OAAO,EAAExB,OAAO,EAAEpB,GAAG,EAAEC,KAAK,EAAE0B,QAAQ,EAAE,GAAGmB,MAAM;IACxD,qBACI,MAAC1C;QACGS,WAAS,CAAC,gBAAgB,EAAEa,IAAI;QAChCqB,cAAY,CAAC,gBAAgB,EAAErB,IAAI;QAElC,GAAGoB,IAAI;QACRzC,WAAWhB,WAAWI,OAAOuD,WAAW,EAAE;YACtC,CAACvD,OAAOwD,WAAW,CAAC,EAAE,CAAC,CAAC7B;YACxB,CAAC3B,OAAOyD,iBAAiB,CAAC,EAAEvB,aAAa;QAC7C;QACAP,SAASA;;0BAET,KAAC+B;0BAAMlD;;0BACP,KAACT;gBAASsB,MAAMvB,cAAcqD,SAAS5C;gBAAMK,WAAWZ,OAAO2D,kBAAkB;;;OAT5E1B;AAYjB,EAAE;AAEF,OAAO,MAAM4B,qCAAqC;IAC9C,qBAAO,KAAClD;QAAIC,WAAWZ,OAAO8D,OAAO;;AACzC,EAAE;AAEF,OAAO,MAAMC,8BAUT,CAAC,EAAEC,QAAQ,EAAEvD,eAAe,EAAEiC,EAAE,EAAEhC,cAAc,EAAEiB,OAAO,EAAE,GAAGmB,OAAO;IACrE,qBACI,MAACnC;QAAIC,WAAWhB,WAAWI,OAAOiE,eAAe;;0BAC7C,KAACtD;gBAAIC,WAAWZ,OAAOkE,YAAY;0BAC9BxB,mBACG,KAACD;oBACI,GAAGK,KAAK;oBACTJ,IAAIA;oBACJjC,iBAAiBA;oBACjBC,gBAAgBA;mCAGpB,KAACuC;oBACI,GAAGH,KAAK;oBACTrC,iBAAiBA;oBACjBC,gBAAgBA;oBAChBiB,SAASA;;;0BAIrB,KAAChB;gBACGC,WAAWhB,WAAWI,OAAOmE,cAAc,EAAE;oBACzC,CAACnE,OAAOoE,uBAAuB,CAAC,EAAE,CAAC3D;gBACvC;gBACAW,WAAS,CAAC,mBAAmB,EAAE0B,MAAMb,EAAE,EAAE;0BAEzC,cAAA,KAACtB;oBAAIC,WAAWZ,OAAOqE,OAAO;8BAAGL;;;;;AAIjD,EAAE"}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/titan-layout/layout-sidebar-links-internal.tsx"],"sourcesContent":["import { Icon, IconProps } from '@servicetitan/anvil2';\nimport SvgGroupCollapse from '@servicetitan/anvil2/assets/icons/material/round/expand_less.svg';\nimport SvgGroupExpand from '@servicetitan/anvil2/assets/icons/material/round/expand_more.svg';\nimport classNames from 'classnames';\nimport { FC, Fragment, MouseEvent, ReactNode } from 'react';\n\nimport { BadgeTag, BadgeTagProps } from '../badge-tag';\nimport { NavigationComponentProps } from './interface-internal';\nimport * as Styles from './layout-sidebar.module.less';\n\nexport interface InternalSideNavigationItemContentProps {\n icon: IconProps['svg'] | undefined;\n iconActive: IconProps['svg'] | undefined;\n title: string;\n submenuExpanded: boolean | undefined;\n tag: BadgeTagProps | undefined;\n onExpandToggle?: (e: MouseEvent<never>) => void;\n}\n\nconst InternalSideNavigationItemContent: FC<InternalSideNavigationItemContentProps> = ({\n icon,\n iconActive,\n tag,\n title,\n submenuExpanded,\n onExpandToggle,\n}) => (\n <Fragment>\n <div className={Styles.navItemIconWrapper}>\n {icon && (\n <Icon svg={icon} className={classNames(Styles.navIcon, Styles.navIconInactive)} />\n )}\n {iconActive && (\n <Icon\n svg={iconActive}\n className={classNames(Styles.navIcon, Styles.navIconActive)}\n />\n )}\n\n <div className={Styles.navItemTextExpanded} data-cy=\"nav-item-label\">\n {title}\n </div>\n {!!tag && (\n <BadgeTag\n data={tag}\n className={Styles.navItemCounter}\n longClassName={Styles.navItemCounterLong}\n />\n )}\n {typeof submenuExpanded === 'boolean' && (\n <div className={Styles.navItemGroupToggleWrapper}>\n <Icon\n svg={submenuExpanded ? SvgGroupCollapse : SvgGroupExpand}\n className={Styles.navItemGroupToggle}\n onClick={onExpandToggle}\n />\n <div\n className={Styles.navItemGroupToggleClick}\n data-cy=\"nav-item-group-expand\"\n onClick={onExpandToggle}\n />\n </div>\n )}\n </div>\n\n <div\n className={classNames(Styles.navItemTextCollapsed, {\n [Styles.navItemTextSmall]: !!title && title.length >= 10,\n })}\n data-cy=\"nav-item-label\"\n >\n {title}\n </div>\n </Fragment>\n);\n\n/** Side Navigation menu item (for internal usage) */\nexport const InternalSideNavigationLink: FC<\n NavigationComponentProps & {\n id: string;\n to: string;\n title: string;\n isActive: boolean | ((pathname: string) => boolean) | undefined;\n icon: IconProps['svg'] | undefined;\n iconActive: IconProps['svg'] | undefined;\n className: string | undefined;\n tag: BadgeTagProps | undefined;\n\n submenuExpanded: boolean | undefined;\n onExpandToggle?: (e: MouseEvent<never>) => void;\n }\n> = ({\n id,\n to,\n title,\n isActive,\n icon,\n iconActive,\n className,\n tag,\n\n navigationComponent: NavigationComponent,\n submenuExpanded,\n onExpandToggle,\n ...rest\n}) => {\n return (\n <NavigationComponent\n data-cy={`navigation-item-${id}`}\n data-pendo={`navigation-item-${id}`}\n {...rest}\n className={classNames(Styles.navItem, Styles.navLink, className, {\n [Styles.navItemActive]: isActive === true,\n [Styles.navItemIconSwitch]: !!icon && !!iconActive,\n })}\n to={to}\n isActive={typeof isActive === 'function' ? isActive : undefined}\n activeClassName={Styles.navItemActive}\n >\n <InternalSideNavigationItemContent\n icon={icon}\n iconActive={iconActive}\n submenuExpanded={submenuExpanded}\n onExpandToggle={onExpandToggle}\n title={title}\n tag={tag}\n />\n </NavigationComponent>\n );\n};\n\n/** Side Navigation menu trigger (for internal usage) */\nexport const InternalSideNavigationTrigger: FC<{\n id: string;\n title: string;\n isActive: boolean | undefined;\n icon: IconProps['svg'] | undefined;\n iconActive: IconProps['svg'] | undefined;\n className: string | undefined;\n\n submenuExpanded: boolean | undefined;\n tag: BadgeTagProps | undefined;\n onClick?: (e: MouseEvent<never>) => void;\n onExpandToggle?: (e: MouseEvent<never>) => void;\n}> = ({\n id,\n title,\n isActive,\n icon,\n iconActive,\n className,\n\n submenuExpanded,\n tag,\n onExpandToggle,\n ...rest\n}) => {\n return (\n <div\n data-cy={`navigation-item-${id}`}\n data-pendo={`navigation-item-${id}`}\n {...rest}\n className={classNames(Styles.navItem, className, {\n [Styles.navLink]: !!rest.onClick,\n [Styles.navItemActive]: isActive === true,\n [Styles.navItemIconSwitch]: !!icon && !!iconActive,\n })}\n >\n <InternalSideNavigationItemContent\n submenuExpanded={submenuExpanded}\n onExpandToggle={onExpandToggle}\n icon={icon}\n iconActive={iconActive}\n title={title}\n tag={tag}\n />\n </div>\n );\n};\n\nexport const InternalSideNavigationGroupLink: FC<\n NavigationComponentProps & {\n id: string;\n to: string;\n title: string;\n isActive: boolean | ((pathname: string) => boolean) | undefined;\n className: string | undefined;\n tag: BadgeTagProps | undefined;\n\n parentId: string;\n }\n> = ({\n id,\n to,\n title,\n isActive,\n className,\n tag,\n\n parentId,\n navigationComponent: NavigationComponent,\n ...rest\n}) => {\n return (\n <NavigationComponent\n key={id}\n data-cy={`navigation-item-${parentId}--${id}`}\n data-pendo={`navigation-item-${parentId}--${id}`}\n {...rest}\n to={to}\n className={classNames(Styles.submenuItem, Styles.submenuLink, className, {\n [Styles.submenuLinkActive]: isActive === true,\n })}\n isActive={typeof isActive === 'function' ? isActive : undefined}\n activeClassName={Styles.submenuLinkActive}\n >\n <span>{title}</span>\n <BadgeTag data={tag} className={Styles.submenuLinkCounter} />\n </NavigationComponent>\n );\n};\n\nexport const InternalSideNavigationGroupTrigger: FC<{\n id: string;\n title: string;\n isActive: boolean | ((pathname: string) => boolean) | undefined;\n className: string | undefined;\n tag: BadgeTagProps | undefined;\n\n onClick?: (e: MouseEvent<any>) => void;\n}> = ({\n id,\n title,\n isActive,\n className,\n tag,\n\n onClick,\n ...rest\n}) => {\n return (\n <div\n data-cy={`navigation-item-${id}`}\n data-pendo={`navigation-item-${id}`}\n key={id}\n {...rest}\n className={classNames(Styles.submenuItem, {\n [Styles.submenuLink]: !!onClick,\n [Styles.submenuLinkActive]: isActive === true,\n })}\n onClick={onClick}\n >\n <span>{title}</span>\n <BadgeTag data={tag} className={Styles.submenuLinkCounter} />\n </div>\n );\n};\n\nexport const InternalSideNavigationGroupDivider = () => {\n return <div className={Styles.divider} />;\n};\n\nexport const InternalSideNavigationGroup: FC<\n NavigationComponentProps & {\n id: string;\n to: string | undefined;\n title: string;\n isActive: boolean | ((pathname: string) => boolean) | undefined;\n icon: IconProps['svg'] | undefined;\n iconActive: IconProps['svg'] | undefined;\n className: string | undefined;\n tag: BadgeTagProps | undefined;\n\n children: ReactNode;\n submenuExpanded: boolean;\n onExpandToggle?: (e: MouseEvent<never>) => void;\n onClick?: (e: MouseEvent<never>) => void;\n }\n> = ({\n id,\n to,\n title,\n isActive,\n icon,\n iconActive,\n className,\n tag,\n\n children,\n submenuExpanded,\n onExpandToggle,\n onClick,\n navigationComponent,\n ...rest\n}) => {\n return (\n <div className={classNames(Styles.navGroupWrapper)}>\n <div className={Styles.navGroupItem}>\n {to ? (\n <InternalSideNavigationLink\n id={id}\n to={to}\n title={title}\n isActive={isActive}\n icon={icon}\n iconActive={iconActive}\n tag={tag}\n className={className}\n {...rest}\n submenuExpanded={submenuExpanded}\n onExpandToggle={onExpandToggle}\n navigationComponent={navigationComponent}\n />\n ) : (\n <InternalSideNavigationTrigger\n id={id}\n title={title}\n isActive={isActive === true || undefined}\n icon={icon}\n iconActive={iconActive}\n tag={tag}\n className={className}\n {...rest}\n submenuExpanded={submenuExpanded}\n onExpandToggle={onExpandToggle}\n onClick={onClick}\n />\n )}\n </div>\n <div\n className={classNames(Styles.submenuWrapper, {\n [Styles.submenuWrapperCollapsed]: !submenuExpanded,\n })}\n data-cy={`navigation-submenu-${id}`}\n >\n <div className={Styles.submenu}>{children}</div>\n </div>\n </div>\n );\n};\n"],"names":["Icon","SvgGroupCollapse","SvgGroupExpand","classNames","Fragment","BadgeTag","Styles","InternalSideNavigationItemContent","icon","iconActive","tag","title","submenuExpanded","onExpandToggle","div","className","navItemIconWrapper","svg","navIcon","navIconInactive","navIconActive","navItemTextExpanded","data-cy","data","navItemCounter","longClassName","navItemCounterLong","navItemGroupToggleWrapper","navItemGroupToggle","onClick","navItemGroupToggleClick","navItemTextCollapsed","navItemTextSmall","length","InternalSideNavigationLink","id","to","isActive","navigationComponent","NavigationComponent","rest","data-pendo","navItem","navLink","navItemActive","navItemIconSwitch","undefined","activeClassName","InternalSideNavigationTrigger","InternalSideNavigationGroupLink","parentId","submenuItem","submenuLink","submenuLinkActive","span","submenuLinkCounter","InternalSideNavigationGroupTrigger","InternalSideNavigationGroupDivider","divider","InternalSideNavigationGroup","children","navGroupWrapper","navGroupItem","submenuWrapper","submenuWrapperCollapsed","submenu"],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { TitanLayoutLinkProps, TitanLayoutTriggerProps } from './interface';
|
|
2
2
|
/** Side Navigation menu link */
|
|
3
|
-
export declare function
|
|
3
|
+
export declare function LayoutSidebarLink({ id, to, title, isActive, icon, iconActive, counter, tag, className, tooltip, wrapper, extra, side, ...rest }: TitanLayoutLinkProps): import("react/jsx-runtime").JSX.Element;
|
|
4
4
|
/** Side Navigation menu trigger */
|
|
5
|
-
export declare function
|
|
5
|
+
export declare function LayoutSidebarTrigger({ id, title, isActive, icon, iconActive, counter, tag, className, tooltip, wrapper, extra, side, ...rest }: TitanLayoutTriggerProps): import("react/jsx-runtime").JSX.Element;
|
|
6
6
|
//# sourceMappingURL=layout-sidebar-links.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"layout-sidebar-links.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-sidebar-links.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"layout-sidebar-links.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-sidebar-links.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAqB5E,gCAAgC;AAChC,wBAAgB,iBAAiB,CAAC,EAC9B,EAAE,EACF,EAAE,EACF,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,UAAU,EACV,OAAO,EACP,GAAG,EACH,SAAS,EAET,OAAO,EACP,OAAO,EACP,KAAK,EACL,IAAI,EACJ,GAAG,IAAI,EACV,EAAE,oBAAoB,2CAiCtB;AAED,mCAAmC;AACnC,wBAAgB,oBAAoB,CAAC,EACjC,EAAE,EACF,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,UAAU,EACV,OAAO,EACP,GAAG,EACH,SAAS,EAET,OAAO,EACP,OAAO,EACP,KAAK,EACL,IAAI,EACJ,GAAG,IAAI,EACV,EAAE,uBAAuB,2CA6BzB"}
|