@servicetitan/navigation 10.2.0 → 10.3.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/left-navigation/interface.d.ts +1 -1
- package/dist/components/left-navigation/interface.d.ts.map +1 -1
- package/dist/components/left-navigation/side-navigation.d.ts.map +1 -1
- package/dist/components/left-navigation/side-navigation.js +11 -17
- package/dist/components/left-navigation/side-navigation.js.map +1 -1
- package/dist/components/left-navigation/side-navigation.module.less +31 -0
- package/package.json +2 -2
- package/src/components/left-navigation/interface.ts +1 -1
- package/src/components/left-navigation/side-navigation.module.less +31 -0
- package/src/components/left-navigation/side-navigation.module.less.d.ts +5 -0
- package/src/components/left-navigation/side-navigation.tsx +17 -22
|
@@ -3,7 +3,7 @@ import { NavigationItemData } from '../../utils/navigation';
|
|
|
3
3
|
import { SideNavigationContextType } from './side-navigation-context';
|
|
4
4
|
export interface SideNavigationExpandedState {
|
|
5
5
|
bar: boolean;
|
|
6
|
-
|
|
6
|
+
collapsed?: string;
|
|
7
7
|
}
|
|
8
8
|
export interface SideNavigationLinkWrapperProps {
|
|
9
9
|
children: ReactElement<SideNavigationLinkProps> | ReactElement<SideNavigationTriggerProps>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interface.d.ts","sourceRoot":"","sources":["../../../src/components/left-navigation/interface.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAC;AAEtE,MAAM,WAAW,2BAA2B;IACxC,GAAG,EAAE,OAAO,CAAC;IACb,
|
|
1
|
+
{"version":3,"file":"interface.d.ts","sourceRoot":"","sources":["../../../src/components/left-navigation/interface.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAC;AAEtE,MAAM,WAAW,2BAA2B;IACxC,GAAG,EAAE,OAAO,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,8BAA8B;IAC3C,QAAQ,EAAE,YAAY,CAAC,uBAAuB,CAAC,GAAG,YAAY,CAAC,0BAA0B,CAAC,CAAC;IAC3F,OAAO,EAAE,yBAAyB,CAAC;CACtC;AAED,MAAM,WAAW,uBAAwB,SAAQ,IAAI,CAAC,kBAAkB,EAAE,SAAS,CAAC;IAChF,OAAO,CAAC,EAAE,EAAE,CAAC,8BAA8B,CAAC,CAAC;CAChD;AACD,MAAM,WAAW,0BACb,SAAQ,IAAI,CAAC,uBAAuB,EAAE,IAAI,GAAG,UAAU,CAAC;IACxD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,EAAE,CAAC,8BAA8B,CAAC,CAAC;CAChD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"side-navigation.d.ts","sourceRoot":"","sources":["../../../src/components/left-navigation/side-navigation.tsx"],"names":[],"mappings":"AAMA,OAAO,EAGH,EAAE,EAEF,YAAY,EAKf,MAAM,OAAO,CAAC;AACf,OAAO,EACH,kBAAkB,EAGrB,MAAM,wBAAwB,CAAC;AAIhC,OAAO,EACH,2BAA2B,EAC3B,uBAAuB,EACvB,0BAA0B,EAC7B,MAAM,aAAa,CAAC;AAOrB,KAAK,gBAAgB,CAAC,CAAC,IACjB,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,SAAS,GAAG,IAAI,CAAC,GAC5C,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC;AACrD,MAAM,WAAW,mBAAmB;IAChC,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mBAAmB;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,4BAA4B;IAC5B,KAAK,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAC7B,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,gBAAgB,CAAC,sBAAsB,CAAC,CAAC;IACpD,uBAAuB;IACvB,QAAQ,CAAC,EAAE,2BAA2B,CAAC;IACvC,4BAA4B;IAC5B,gBAAgB,CAAC,CAAC,QAAQ,EAAE,2BAA2B,GAAG,IAAI,CAAC;CAClE;AAWD,iBAAS,qBAAqB,CAAC,EAC3B,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,EAAE,EACF,KAAK,EACL,gBAAgB,GACnB,EAAE,mBAAmB,
|
|
1
|
+
{"version":3,"file":"side-navigation.d.ts","sourceRoot":"","sources":["../../../src/components/left-navigation/side-navigation.tsx"],"names":[],"mappings":"AAMA,OAAO,EAGH,EAAE,EAEF,YAAY,EAKf,MAAM,OAAO,CAAC;AACf,OAAO,EACH,kBAAkB,EAGrB,MAAM,wBAAwB,CAAC;AAIhC,OAAO,EACH,2BAA2B,EAC3B,uBAAuB,EACvB,0BAA0B,EAC7B,MAAM,aAAa,CAAC;AAOrB,KAAK,gBAAgB,CAAC,CAAC,IACjB,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,SAAS,GAAG,IAAI,CAAC,GAC5C,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC;AACrD,MAAM,WAAW,mBAAmB;IAChC,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mBAAmB;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,4BAA4B;IAC5B,KAAK,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAC7B,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,gBAAgB,CAAC,sBAAsB,CAAC,CAAC;IACpD,uBAAuB;IACvB,QAAQ,CAAC,EAAE,2BAA2B,CAAC;IACvC,4BAA4B;IAC5B,gBAAgB,CAAC,CAAC,QAAQ,EAAE,2BAA2B,GAAG,IAAI,CAAC;CAClE;AAWD,iBAAS,qBAAqB,CAAC,EAC3B,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,EAAE,EACF,KAAK,EACL,gBAAgB,GACnB,EAAE,mBAAmB,2CAuErB;AAED,MAAM,WAAW,sBAAsB;IACnC,QAAQ,EAAE,gBAAgB,CAAC,uBAAuB,GAAG,0BAA0B,CAAC,CAAC;CACpF;AAkLD,eAAO,MAAM,cAAc;;CAEzB,CAAC"}
|
|
@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { Icon, Popover, Text, ThemeProvider } from '@servicetitan/anvil2';
|
|
3
3
|
import SvgCollapse from '@servicetitan/anvil2/assets/icons/st/gnav_menu_collapse.svg';
|
|
4
4
|
import SvgExpand from '@servicetitan/anvil2/assets/icons/st/gnav_menu_expand.svg';
|
|
5
|
-
import {
|
|
5
|
+
import { Headline } from '@servicetitan/design-system';
|
|
6
6
|
import classNames from 'classnames';
|
|
7
7
|
import { Children, Fragment, isValidElement, useCallback, useContext, useMemo, } from 'react';
|
|
8
8
|
import { NavigationComponentContext } from '../../utils/navigation-context';
|
|
@@ -32,15 +32,7 @@ function SideNavigationElement({ className, children, expanded, id, items, onExp
|
|
|
32
32
|
}
|
|
33
33
|
return out;
|
|
34
34
|
}, {}), [children]);
|
|
35
|
-
const onLinkClick = useCallback(() => {
|
|
36
|
-
var _a;
|
|
37
|
-
if ((expanded === null || expanded === void 0 ? void 0 : expanded.bar) && ((_a = expanded === null || expanded === void 0 ? void 0 : expanded.submenus) === null || _a === void 0 ? void 0 : _a.length)) {
|
|
38
|
-
onExpandedChange === null || onExpandedChange === void 0 ? void 0 : onExpandedChange({
|
|
39
|
-
bar: expanded.bar,
|
|
40
|
-
submenus: [],
|
|
41
|
-
});
|
|
42
|
-
}
|
|
43
|
-
}, [onExpandedChange, expanded === null || expanded === void 0 ? void 0 : expanded.bar, expanded === null || expanded === void 0 ? void 0 : expanded.submenus]);
|
|
35
|
+
const onLinkClick = useCallback(() => { }, []);
|
|
44
36
|
return (_jsx(SideNavigationContext.Provider, { value: defaultContext, children: _jsxs("div", { className: classNames(Styles.sideNav, (expanded === null || expanded === void 0 ? void 0 : expanded.bar) ? Styles.sideNavExpanded : Styles.sideNavSlim, className), id: id, "data-cy": "side-navigation", children: [childTop, _jsx(ThemeProvider, { mode: "dark", className: Styles.sideNavContent, "data-cy": "navigation-items", children: items === null || items === void 0 ? void 0 : items.map(item => item.submenu ? (_jsx(SideNavigationGroupItem, { expanded: expanded, onExpandedChange: onExpandedChange, navigationComponent: NavigationComponent, ...item }, item.id)) : (_jsx("div", { onClickCapture: onLinkClick, children: _jsx(InternalSideNavigationLink, { submenuExpanded: undefined, navigationComponent: NavigationComponent, ...item, tag: getCounterTag(item.counter, item.tag) }) }, item.id))) }), _jsx("div", { className: Styles.divider }), _jsx("div", { className: Styles.sideNavBottom, children: _jsx(SideNavigationOptionsToggle, { expanded: expanded, onExpandedChange: onExpandedChange }) })] }) }));
|
|
45
37
|
}
|
|
46
38
|
function SideNavigationTopElement({ children }) {
|
|
@@ -52,18 +44,20 @@ function SideNavigationTopElement({ children }) {
|
|
|
52
44
|
const SideNavigationTop = SideNavigationTopElement;
|
|
53
45
|
/** Side Navigation menu item */
|
|
54
46
|
const SideNavigationGroupItem = ({ onExpandedChange, ...props }) => {
|
|
55
|
-
var _a, _b, _c, _d, _e, _f
|
|
56
|
-
const
|
|
47
|
+
var _a, _b, _c, _d, _e, _f;
|
|
48
|
+
const isSubmenuCollapsed = !!props.id && ((_a = props.expanded) === null || _a === void 0 ? void 0 : _a.collapsed) === props.id;
|
|
57
49
|
const triggerClick = useCallback(() => {
|
|
58
|
-
var _a;
|
|
50
|
+
var _a, _b;
|
|
59
51
|
onExpandedChange === null || onExpandedChange === void 0 ? void 0 : onExpandedChange({
|
|
60
52
|
bar: !!((_a = props.expanded) === null || _a === void 0 ? void 0 : _a.bar),
|
|
61
|
-
|
|
53
|
+
collapsed: ((_b = props.expanded) === null || _b === void 0 ? void 0 : _b.collapsed) === props.id ? undefined : props.id,
|
|
62
54
|
});
|
|
63
|
-
}, [props.id, props.expanded,
|
|
55
|
+
}, [props.id, props.expanded, onExpandedChange]);
|
|
64
56
|
const tag = getSubmenuGroupTag(props.submenu, getCounterTag(props.counter, props.tag));
|
|
65
57
|
const context = useContext(SideNavigationContext);
|
|
66
|
-
return ((
|
|
58
|
+
return ((_b = props.expanded) === null || _b === void 0 ? void 0 : _b.bar) ? (_jsxs("div", { className: classNames(Styles.navigationGroupWrapper), children: [_jsxs("div", { className: Styles.navigationGroupItem, children: [_jsx(InternalSideNavigationLink, { ...props, submenuExpanded: !isSubmenuCollapsed, tag: tag }), _jsx("div", { className: Styles.navigationGroupItemCollapse, onClick: triggerClick })] }), _jsx("div", { className: classNames(Styles.submenuWrapper, {
|
|
59
|
+
[Styles.submenuWrapperCollapsed]: isSubmenuCollapsed,
|
|
60
|
+
}), children: _jsx("div", { className: Styles.submenu, children: _jsx(SideNavigationGroupContent, { groups: (_d = (_c = props.submenu) === null || _c === void 0 ? void 0 : _c.groups) !== null && _d !== void 0 ? _d : [], navigationComponent: props.navigationComponent }) }) })] })) : (_jsxs(Popover, { placement: "right-start", openOnHover: true, delay: 500, children: [_jsx(Popover.Trigger, { children: (triggerProps) => (_jsx("div", { ...triggerProps, children: _jsx(InternalSideNavigationLink, { ...props, submenuExpanded: undefined, tag: tag }) })) }), _jsx(Popover.Content, { style: context.styles.popoverContent, className: "z-global-nav-i", children: _jsxs("div", { className: Styles.submenuPopover, children: [_jsx(Headline, { size: "small", className: "c-white m-b-half-i m-t-1", children: props.title }), _jsx(SideNavigationGroupContent, { groups: (_f = (_e = props.submenu) === null || _e === void 0 ? void 0 : _e.groups) !== null && _f !== void 0 ? _f : [], navigationComponent: props.navigationComponent })] }) })] }));
|
|
67
61
|
};
|
|
68
62
|
const SideNavigationGroupContent = ({ groups, navigationComponent, }) => {
|
|
69
63
|
return (_jsx(Fragment, { children: groups.reduce((out, group, index) => {
|
|
@@ -87,7 +81,7 @@ const SideNavigationGroupLink = ({ id, counter, tag, title, to, isActive, naviga
|
|
|
87
81
|
}), isActive: typeof isActive === 'function' ? isActive : undefined, activeClassName: Styles.submenuLinkActive, children: [_jsx("span", { children: title }), _jsx(BadgeTag, { data: getCounterTag(counter, tag), className: Styles.submenuLinkCounter })] }, id));
|
|
88
82
|
};
|
|
89
83
|
/** Side Navigation options toggle */
|
|
90
|
-
const SideNavigationOptionsToggle = ({ expanded, onExpandedChange }) => withTooltip(_jsx("div", { "data-cy": "navigation-left-options", "data-pendo": "navigation-left-options", className: classNames(Styles.optionsItem), onClick: () => onExpandedChange === null || onExpandedChange === void 0 ? void 0 : onExpandedChange({ bar: !(expanded === null || expanded === void 0 ? void 0 : expanded.bar)
|
|
84
|
+
const SideNavigationOptionsToggle = ({ expanded, onExpandedChange }) => withTooltip(_jsx("div", { "data-cy": "navigation-left-options", "data-pendo": "navigation-left-options", className: classNames(Styles.optionsItem), onClick: () => onExpandedChange === null || onExpandedChange === void 0 ? void 0 : onExpandedChange({ bar: !(expanded === null || expanded === void 0 ? void 0 : expanded.bar) }), children: _jsxs("div", { className: Styles.optionsItemContent, children: [_jsx("div", { className: Styles.optionsIconWrapper, children: _jsx(Icon, { className: Styles.optionsIcon, svg: (expanded === null || expanded === void 0 ? void 0 : expanded.bar) ? SvgCollapse : SvgExpand }) }), !!(expanded === null || expanded === void 0 ? void 0 : expanded.bar) && _jsx("span", { className: Styles.optionsItemText, children: "Collapse Menu" })] }) }), (expanded === null || expanded === void 0 ? void 0 : expanded.bar) ? undefined : 'Expand Menu', 'right');
|
|
91
85
|
export const SideNavigation = Object.assign(SideNavigationElement, {
|
|
92
86
|
Top: SideNavigationTop,
|
|
93
87
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"side-navigation.js","sourceRoot":"","sources":["../../../src/components/left-navigation/side-navigation.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAC1E,OAAO,WAAW,MAAM,6DAA6D,CAAC;AACtF,OAAO,SAAS,MAAM,2DAA2D,CAAC;AAClF,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"side-navigation.js","sourceRoot":"","sources":["../../../src/components/left-navigation/side-navigation.tsx"],"names":[],"mappings":"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"}
|
|
@@ -222,12 +222,43 @@
|
|
|
222
222
|
}
|
|
223
223
|
}
|
|
224
224
|
|
|
225
|
+
.navigation-group-wrapper {
|
|
226
|
+
.navigation-group-item {
|
|
227
|
+
position: relative;
|
|
228
|
+
|
|
229
|
+
.navigation-group-item-collapse {
|
|
230
|
+
display: none;
|
|
231
|
+
position: absolute;
|
|
232
|
+
inset: 0;
|
|
233
|
+
cursor: pointer;
|
|
234
|
+
}
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
&:has(.navigation-item-active) {
|
|
238
|
+
.navigation-group-item-collapse {
|
|
239
|
+
display: block;
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
.submenu-wrapper:not(.submenu-wrapper-collapsed) {
|
|
243
|
+
max-height: 2000px;
|
|
244
|
+
transition: max-height 0.7s ease-in-out;
|
|
245
|
+
}
|
|
246
|
+
}
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
.submenu-wrapper {
|
|
250
|
+
max-height: 0;
|
|
251
|
+
overflow: hidden;
|
|
252
|
+
transition: max-height unset;
|
|
253
|
+
}
|
|
254
|
+
|
|
225
255
|
.submenu {
|
|
226
256
|
margin-left: @spacing-3;
|
|
227
257
|
padding-left: @spacing-1;
|
|
228
258
|
padding-right: @spacing-1;
|
|
229
259
|
margin-bottom: @spacing-1;
|
|
230
260
|
position: relative;
|
|
261
|
+
font-family: @base-font-family;
|
|
231
262
|
|
|
232
263
|
.submenu-group-header[data-anv][data-anv] {
|
|
233
264
|
padding-top: @spacing-2;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@servicetitan/navigation",
|
|
3
|
-
"version": "10.
|
|
3
|
+
"version": "10.3.0",
|
|
4
4
|
"description": "Navigation components",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -43,5 +43,5 @@
|
|
|
43
43
|
"less": true,
|
|
44
44
|
"webpack": false
|
|
45
45
|
},
|
|
46
|
-
"gitHead": "
|
|
46
|
+
"gitHead": "8527ab08c22ad62716890f100bfbc955eac49aa7"
|
|
47
47
|
}
|
|
@@ -222,12 +222,43 @@
|
|
|
222
222
|
}
|
|
223
223
|
}
|
|
224
224
|
|
|
225
|
+
.navigation-group-wrapper {
|
|
226
|
+
.navigation-group-item {
|
|
227
|
+
position: relative;
|
|
228
|
+
|
|
229
|
+
.navigation-group-item-collapse {
|
|
230
|
+
display: none;
|
|
231
|
+
position: absolute;
|
|
232
|
+
inset: 0;
|
|
233
|
+
cursor: pointer;
|
|
234
|
+
}
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
&:has(.navigation-item-active) {
|
|
238
|
+
.navigation-group-item-collapse {
|
|
239
|
+
display: block;
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
.submenu-wrapper:not(.submenu-wrapper-collapsed) {
|
|
243
|
+
max-height: 2000px;
|
|
244
|
+
transition: max-height 0.7s ease-in-out;
|
|
245
|
+
}
|
|
246
|
+
}
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
.submenu-wrapper {
|
|
250
|
+
max-height: 0;
|
|
251
|
+
overflow: hidden;
|
|
252
|
+
transition: max-height unset;
|
|
253
|
+
}
|
|
254
|
+
|
|
225
255
|
.submenu {
|
|
226
256
|
margin-left: @spacing-3;
|
|
227
257
|
padding-left: @spacing-1;
|
|
228
258
|
padding-right: @spacing-1;
|
|
229
259
|
margin-bottom: @spacing-1;
|
|
230
260
|
position: relative;
|
|
261
|
+
font-family: @base-font-family;
|
|
231
262
|
|
|
232
263
|
.submenu-group-header[data-anv][data-anv] {
|
|
233
264
|
padding-top: @spacing-2;
|
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
export const __esModule: true;
|
|
2
2
|
export const divider: string;
|
|
3
|
+
export const navigationGroupItem: string;
|
|
4
|
+
export const navigationGroupItemCollapse: string;
|
|
5
|
+
export const navigationGroupWrapper: string;
|
|
3
6
|
export const navigationIcon: string;
|
|
4
7
|
export const navigationIconActive: string;
|
|
5
8
|
export const navigationIconInactive: string;
|
|
@@ -30,4 +33,6 @@ export const submenuLink: string;
|
|
|
30
33
|
export const submenuLinkActive: string;
|
|
31
34
|
export const submenuLinkCounter: string;
|
|
32
35
|
export const submenuPopover: string;
|
|
36
|
+
export const submenuWrapper: string;
|
|
37
|
+
export const submenuWrapperCollapsed: string;
|
|
33
38
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { Icon, Popover, Text, ThemeProvider } from '@servicetitan/anvil2';
|
|
2
2
|
import SvgCollapse from '@servicetitan/anvil2/assets/icons/st/gnav_menu_collapse.svg';
|
|
3
3
|
import SvgExpand from '@servicetitan/anvil2/assets/icons/st/gnav_menu_expand.svg';
|
|
4
|
-
import {
|
|
4
|
+
import { Headline } from '@servicetitan/design-system';
|
|
5
5
|
|
|
6
6
|
import classNames from 'classnames';
|
|
7
7
|
import {
|
|
@@ -90,14 +90,7 @@ function SideNavigationElement({
|
|
|
90
90
|
),
|
|
91
91
|
[children]
|
|
92
92
|
);
|
|
93
|
-
const onLinkClick = useCallback(() => {
|
|
94
|
-
if (expanded?.bar && expanded?.submenus?.length) {
|
|
95
|
-
onExpandedChange?.({
|
|
96
|
-
bar: expanded.bar,
|
|
97
|
-
submenus: [],
|
|
98
|
-
});
|
|
99
|
-
}
|
|
100
|
-
}, [onExpandedChange, expanded?.bar, expanded?.submenus]);
|
|
93
|
+
const onLinkClick = useCallback(() => {}, []);
|
|
101
94
|
return (
|
|
102
95
|
<SideNavigationContext.Provider value={defaultContext}>
|
|
103
96
|
<div
|
|
@@ -174,35 +167,39 @@ const SideNavigationGroupItem: FC<
|
|
|
174
167
|
onExpandedChange: undefined | ((expanded: SideNavigationExpandedState) => void);
|
|
175
168
|
}
|
|
176
169
|
> = ({ onExpandedChange, ...props }) => {
|
|
177
|
-
const
|
|
170
|
+
const isSubmenuCollapsed = !!props.id && props.expanded?.collapsed === props.id;
|
|
178
171
|
const triggerClick = useCallback(() => {
|
|
179
172
|
onExpandedChange?.({
|
|
180
173
|
bar: !!props.expanded?.bar,
|
|
181
|
-
|
|
174
|
+
collapsed: props.expanded?.collapsed === props.id ? undefined : props.id,
|
|
182
175
|
});
|
|
183
|
-
}, [props.id, props.expanded,
|
|
184
|
-
|
|
176
|
+
}, [props.id, props.expanded, onExpandedChange]);
|
|
185
177
|
const tag = getSubmenuGroupTag(props.submenu, getCounterTag(props.counter, props.tag));
|
|
186
178
|
const context = useContext(SideNavigationContext);
|
|
187
179
|
|
|
188
180
|
return props.expanded?.bar ? (
|
|
189
|
-
<
|
|
190
|
-
<div
|
|
181
|
+
<div className={classNames(Styles.navigationGroupWrapper)}>
|
|
182
|
+
<div className={Styles.navigationGroupItem}>
|
|
191
183
|
<InternalSideNavigationLink
|
|
192
184
|
{...props}
|
|
193
|
-
submenuExpanded={
|
|
185
|
+
submenuExpanded={!isSubmenuCollapsed}
|
|
194
186
|
tag={tag}
|
|
195
187
|
/>
|
|
188
|
+
<div className={Styles.navigationGroupItemCollapse} onClick={triggerClick} />
|
|
196
189
|
</div>
|
|
197
|
-
<
|
|
190
|
+
<div
|
|
191
|
+
className={classNames(Styles.submenuWrapper, {
|
|
192
|
+
[Styles.submenuWrapperCollapsed]: isSubmenuCollapsed,
|
|
193
|
+
})}
|
|
194
|
+
>
|
|
198
195
|
<div className={Styles.submenu}>
|
|
199
196
|
<SideNavigationGroupContent
|
|
200
197
|
groups={props.submenu?.groups ?? []}
|
|
201
198
|
navigationComponent={props.navigationComponent}
|
|
202
199
|
/>
|
|
203
200
|
</div>
|
|
204
|
-
</
|
|
205
|
-
</
|
|
201
|
+
</div>
|
|
202
|
+
</div>
|
|
206
203
|
) : (
|
|
207
204
|
<Popover placement="right-start" openOnHover delay={500}>
|
|
208
205
|
<Popover.Trigger>
|
|
@@ -307,9 +304,7 @@ const SideNavigationOptionsToggle: FC<{
|
|
|
307
304
|
data-cy="navigation-left-options"
|
|
308
305
|
data-pendo="navigation-left-options"
|
|
309
306
|
className={classNames(Styles.optionsItem)}
|
|
310
|
-
onClick={() =>
|
|
311
|
-
onExpandedChange?.({ bar: !expanded?.bar, submenus: expanded?.submenus })
|
|
312
|
-
}
|
|
307
|
+
onClick={() => onExpandedChange?.({ bar: !expanded?.bar })}
|
|
313
308
|
>
|
|
314
309
|
<div className={Styles.optionsItemContent}>
|
|
315
310
|
<div className={Styles.optionsIconWrapper}>
|