@servicetitan/navigation 9.1.0 → 9.2.1
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/header-navigation-tiny-links.d.ts.map +1 -1
- package/dist/components/left-navigation/header-navigation-tiny-links.js +1 -1
- package/dist/components/left-navigation/header-navigation-tiny-links.js.map +1 -1
- package/dist/components/left-navigation/interface.d.ts +8 -0
- package/dist/components/left-navigation/interface.d.ts.map +1 -1
- package/dist/components/left-navigation/side-navigation-context.d.ts +8 -0
- package/dist/components/left-navigation/side-navigation-context.d.ts.map +1 -0
- package/dist/components/left-navigation/side-navigation-context.js +7 -0
- package/dist/components/left-navigation/side-navigation-context.js.map +1 -0
- package/dist/components/left-navigation/side-navigation-links.d.ts +3 -4
- package/dist/components/left-navigation/side-navigation-links.d.ts.map +1 -1
- package/dist/components/left-navigation/side-navigation-links.js +13 -7
- package/dist/components/left-navigation/side-navigation-links.js.map +1 -1
- package/dist/components/left-navigation/side-navigation.d.ts +13 -5
- package/dist/components/left-navigation/side-navigation.d.ts.map +1 -1
- package/dist/components/left-navigation/side-navigation.js +36 -7
- package/dist/components/left-navigation/side-navigation.js.map +1 -1
- package/dist/components/left-navigation/side-navigation.stories.d.ts +4 -1
- package/dist/components/left-navigation/side-navigation.stories.d.ts.map +1 -1
- package/dist/components/left-navigation/side-navigation.stories.js +5 -5
- package/dist/components/left-navigation/side-navigation.stories.js.map +1 -1
- package/package.json +2 -2
- package/src/components/left-navigation/header-navigation-tiny-links.tsx +3 -0
- package/src/components/left-navigation/interface.ts +11 -1
- package/src/components/left-navigation/side-navigation-context.tsx +13 -0
- package/src/components/left-navigation/side-navigation-links.tsx +20 -8
- package/src/components/left-navigation/side-navigation.stories.tsx +21 -20
- package/src/components/left-navigation/side-navigation.tsx +112 -54
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"header-navigation-tiny-links.d.ts","sourceRoot":"","sources":["../../../src/components/left-navigation/header-navigation-tiny-links.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEvD,OAAO,EAAE,EAAE,EAAwB,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,yBAAyB,EAAE,4BAA4B,EAAE,MAAM,wBAAwB,CAAC;AAEjG,OAAO,EAAc,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAIjE,mCAAmC;AACnC,eAAO,MAAM,2BAA2B,EAAE,EAAE,CAAC;IACzC,GAAG,CAAC,EAAE,mBAAmB,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,IAAI,EAAE,SAAS,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;IACnC,UAAU,EAAE,SAAS,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;CAC3B,CA0BA,CAAC;AAEF,sCAAsC;AACtC,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC,yBAAyB,
|
|
1
|
+
{"version":3,"file":"header-navigation-tiny-links.d.ts","sourceRoot":"","sources":["../../../src/components/left-navigation/header-navigation-tiny-links.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEvD,OAAO,EAAE,EAAE,EAAwB,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,yBAAyB,EAAE,4BAA4B,EAAE,MAAM,wBAAwB,CAAC;AAEjG,OAAO,EAAc,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAIjE,mCAAmC;AACnC,eAAO,MAAM,2BAA2B,EAAE,EAAE,CAAC;IACzC,GAAG,CAAC,EAAE,mBAAmB,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,IAAI,EAAE,SAAS,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;IACnC,UAAU,EAAE,SAAS,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;CAC3B,CA0BA,CAAC;AAEF,sCAAsC;AACtC,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC,yBAAyB,CA8C9D,CAAC;AAEF,6CAA6C;AAC7C,eAAO,MAAM,uBAAuB,EAAE,EAAE,CAAC,4BAA4B,CAyCpE,CAAC"}
|
|
@@ -12,7 +12,7 @@ export const HeaderNavigationItemContent = ({ counterClassName, icon, iconActive
|
|
|
12
12
|
return (_jsxs(Fragment, { children: [!!icon && _jsx(Icon, { svg: icon, className: Styles.navigationIcon }), !!iconActive && (_jsx(Icon, { svg: iconActive, className: classNames(Styles.navigationIcon, Styles.navigationIconActive) })), !!label && (_jsx("span", { className: classNames(Styles.navigationItemLabel, labelClassName), children: label })), !!tag && (_jsx(CounterTag, { data: tag, className: classNames(Styles.navigationItemCounter, counterClassName), longClassName: Styles.navigationItemCounterLong }))] }));
|
|
13
13
|
};
|
|
14
14
|
/** Navigation extra item with link */
|
|
15
|
-
export const HeaderNavigationLink = ({ id, to, hint, tooltip, className, icon, iconActive, isActive, label, labelClassName, tag, target, ...rest }) => {
|
|
15
|
+
export const HeaderNavigationLink = ({ id, to, hint, tooltip, className, icon, iconActive, iconClassName, iconComponent, iconName, isActive, label, labelClassName, tag, target, ...rest }) => {
|
|
16
16
|
const NavigationComponent = useContext(NavigationComponentContext);
|
|
17
17
|
return withTooltip(_createElement(NavigationComponent, { "data-cy": `navigation-link-${id}`, "data-pendo": `navigation-link-${id}`, ...rest, key: id, to: to, title: hint, className: classNames(Styles.navigationLink, className, {
|
|
18
18
|
[Styles.navigationItemActive]: isActive === true,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"header-navigation-tiny-links.js","sourceRoot":"","sources":["../../../src/components/left-navigation/header-navigation-tiny-links.tsx"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"header-navigation-tiny-links.js","sourceRoot":"","sources":["../../../src/components/left-navigation/header-navigation-tiny-links.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,11 +1,19 @@
|
|
|
1
|
+
import { FC, ReactElement } from 'react';
|
|
1
2
|
import { HeaderNavigationItemData } from '../../utils/navigation';
|
|
3
|
+
import { SideNavigationContextType } from './side-navigation-context';
|
|
2
4
|
export interface SideNavigationExpandedState {
|
|
3
5
|
bar: boolean;
|
|
4
6
|
submenus?: string[];
|
|
5
7
|
}
|
|
8
|
+
export interface SideNavigationLinkWrapperProps {
|
|
9
|
+
children: ReactElement<SideNavigationLinkProps> | ReactElement<SideNavigationTriggerProps>;
|
|
10
|
+
context: SideNavigationContextType;
|
|
11
|
+
}
|
|
6
12
|
export interface SideNavigationLinkProps extends Omit<HeaderNavigationItemData, 'iconName' | 'submenu'> {
|
|
13
|
+
wrapper?: FC<SideNavigationLinkWrapperProps>;
|
|
7
14
|
}
|
|
8
15
|
export interface SideNavigationTriggerProps extends Omit<SideNavigationLinkProps, 'to' | 'isActive'> {
|
|
9
16
|
isActive?: boolean;
|
|
17
|
+
wrapper?: FC<SideNavigationLinkWrapperProps>;
|
|
10
18
|
}
|
|
11
19
|
//# sourceMappingURL=interface.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interface.d.ts","sourceRoot":"","sources":["../../../src/components/left-navigation/interface.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,wBAAwB,CAAC;
|
|
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,wBAAwB,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAC;AAEtE,MAAM,WAAW,2BAA2B;IACxC,GAAG,EAAE,OAAO,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;CACvB;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,uBACb,SAAQ,IAAI,CAAC,wBAAwB,EAAE,UAAU,GAAG,SAAS,CAAC;IAC9D,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"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { CSSProperties } from 'react';
|
|
2
|
+
export interface SideNavigationContextType {
|
|
3
|
+
styles: {
|
|
4
|
+
popoverContent: CSSProperties;
|
|
5
|
+
};
|
|
6
|
+
}
|
|
7
|
+
export declare const SideNavigationContext: import("react").Context<SideNavigationContextType>;
|
|
8
|
+
//# sourceMappingURL=side-navigation-context.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"side-navigation-context.d.ts","sourceRoot":"","sources":["../../../src/components/left-navigation/side-navigation-context.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAiB,MAAM,OAAO,CAAC;AAErD,MAAM,WAAW,yBAAyB;IACtC,MAAM,EAAE;QACJ,cAAc,EAAE,aAAa,CAAC;KACjC,CAAC;CACL;AAED,eAAO,MAAM,qBAAqB,oDAIhC,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"side-navigation-context.js","sourceRoot":"","sources":["../../../src/components/left-navigation/side-navigation-context.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,aAAa,EAAE,MAAM,OAAO,CAAC;AAQrD,MAAM,CAAC,MAAM,qBAAqB,GAAG,aAAa,CAA4B;IAC1E,MAAM,EAAE;QACJ,cAAc,EAAE,EAAE;KACrB;CACJ,CAAC,CAAC"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import { FC } from 'react';
|
|
2
1
|
import { SideNavigationLinkProps, SideNavigationTriggerProps } from './interface';
|
|
3
2
|
/** Side Navigation menu link */
|
|
4
|
-
export declare
|
|
5
|
-
/** Side Navigation menu
|
|
6
|
-
export declare
|
|
3
|
+
export declare function SideNavigationLink({ wrapper, ...props }: SideNavigationLinkProps): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
/** Side Navigation menu trigger */
|
|
5
|
+
export declare function SideNavigationTrigger({ wrapper, ...props }: SideNavigationTriggerProps): import("react/jsx-runtime").JSX.Element;
|
|
7
6
|
//# sourceMappingURL=side-navigation-links.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"side-navigation-links.d.ts","sourceRoot":"","sources":["../../../src/components/left-navigation/side-navigation-links.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"side-navigation-links.d.ts","sourceRoot":"","sources":["../../../src/components/left-navigation/side-navigation-links.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,uBAAuB,EAAE,0BAA0B,EAAE,MAAM,aAAa,CAAC;AAgBlF,gCAAgC;AAChC,wBAAgB,kBAAkB,CAAC,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,uBAAuB,2CAahF;AAED,mCAAmC;AACnC,wBAAgB,qBAAqB,CAAC,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,0BAA0B,2CActF"}
|
|
@@ -2,19 +2,25 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import classNames from 'classnames';
|
|
3
3
|
import { useContext } from 'react';
|
|
4
4
|
import { NavigationComponentContext } from '../../utils/navigation-context';
|
|
5
|
+
import { SideNavigationContext } from './side-navigation-context';
|
|
5
6
|
import { InternalSideNavigationItemContent, InternalSideNavigationLink, internalNavigationContentContainerProps, } from './side-navigation-links-internal';
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
const NavigationComponent = useContext(NavigationComponentContext);
|
|
9
|
-
return (_jsx(InternalSideNavigationLink, { ...props, navigationComponent: NavigationComponent, submenuExpanded: undefined, dataPrefix: "navigation-link" }));
|
|
7
|
+
const WrappedLink = ({ children, wrapper: WrapperComponent }) => {
|
|
8
|
+
return (_jsx(WrapperComponent, { context: useContext(SideNavigationContext), children: children }));
|
|
10
9
|
};
|
|
11
10
|
/** Side Navigation menu link */
|
|
12
|
-
export
|
|
13
|
-
|
|
11
|
+
export function SideNavigationLink({ wrapper, ...props }) {
|
|
12
|
+
const NavigationComponent = useContext(NavigationComponentContext);
|
|
13
|
+
const element = (_jsx(InternalSideNavigationLink, { ...props, navigationComponent: NavigationComponent, submenuExpanded: undefined, dataPrefix: "navigation-link" }));
|
|
14
|
+
return wrapper ? _jsx(WrappedLink, { wrapper: wrapper, children: element }) : element;
|
|
15
|
+
}
|
|
16
|
+
/** Side Navigation menu trigger */
|
|
17
|
+
export function SideNavigationTrigger({ wrapper, ...props }) {
|
|
18
|
+
const element = (_jsx("div", { ...internalNavigationContentContainerProps({
|
|
14
19
|
...props,
|
|
15
20
|
prefix: 'navigation-trigger',
|
|
16
21
|
className: classNames(props.className, 'cursor-pointer'),
|
|
17
22
|
isActive: props.isActive,
|
|
18
23
|
}), children: _jsx(InternalSideNavigationItemContent, { submenuExpanded: undefined, ...props }) }));
|
|
19
|
-
};
|
|
24
|
+
return wrapper ? _jsx(WrappedLink, { wrapper: wrapper, children: element }) : element;
|
|
25
|
+
}
|
|
20
26
|
//# sourceMappingURL=side-navigation-links.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"side-navigation-links.js","sourceRoot":"","sources":["../../../src/components/left-navigation/side-navigation-links.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,
|
|
1
|
+
{"version":3,"file":"side-navigation-links.js","sourceRoot":"","sources":["../../../src/components/left-navigation/side-navigation-links.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAoB,UAAU,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,0BAA0B,EAAE,MAAM,gCAAgC,CAAC;AAE5E,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,EACH,iCAAiC,EACjC,0BAA0B,EAC1B,uCAAuC,GAC1C,MAAM,kCAAkC,CAAC;AAE1C,MAAM,WAAW,GAGZ,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,gBAAgB,EAAE,EAAE,EAAE;IAC7C,OAAO,CACH,KAAC,gBAAgB,IAAC,OAAO,EAAE,UAAU,CAAC,qBAAqB,CAAC,YAAG,QAAQ,GAAoB,CAC9F,CAAC;AACN,CAAC,CAAC;AACF,gCAAgC;AAChC,MAAM,UAAU,kBAAkB,CAAC,EAAE,OAAO,EAAE,GAAG,KAAK,EAA2B;IAC7E,MAAM,mBAAmB,GAAG,UAAU,CAAC,0BAA0B,CAAC,CAAC;IAEnE,MAAM,OAAO,GAAG,CACZ,KAAC,0BAA0B,OACnB,KAAK,EACT,mBAAmB,EAAE,mBAAmB,EACxC,eAAe,EAAE,SAAS,EAC1B,UAAU,EAAC,iBAAiB,GAC9B,CACL,CAAC;IAEF,OAAO,OAAO,CAAC,CAAC,CAAC,KAAC,WAAW,IAAC,OAAO,EAAE,OAAO,YAAG,OAAO,GAAe,CAAC,CAAC,CAAC,OAAO,CAAC;AACtF,CAAC;AAED,mCAAmC;AACnC,MAAM,UAAU,qBAAqB,CAAC,EAAE,OAAO,EAAE,GAAG,KAAK,EAA8B;IACnF,MAAM,OAAO,GAAG,CACZ,iBACQ,uCAAuC,CAAC;YACxC,GAAG,KAAK;YACR,MAAM,EAAE,oBAAoB;YAC5B,SAAS,EAAE,UAAU,CAAC,KAAK,CAAC,SAAS,EAAE,gBAAgB,CAAC;YACxD,QAAQ,EAAE,KAAK,CAAC,QAAQ;SAC3B,CAAC,YAEF,KAAC,iCAAiC,IAAC,eAAe,EAAE,SAAS,KAAM,KAAK,GAAI,GAC1E,CACT,CAAC;IACF,OAAO,OAAO,CAAC,CAAC,CAAC,KAAC,WAAW,IAAC,OAAO,EAAE,OAAO,YAAG,OAAO,GAAe,CAAC,CAAC,CAAC,OAAO,CAAC;AACtF,CAAC"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import { FC,
|
|
1
|
+
import { FC, ReactElement } from 'react';
|
|
2
2
|
import { HeaderNavigationItemData } from '../../utils/navigation';
|
|
3
|
-
import { SideNavigationExpandedState } from './interface';
|
|
3
|
+
import { SideNavigationExpandedState, SideNavigationLinkProps, SideNavigationTriggerProps } from './interface';
|
|
4
|
+
type OptionalChildren<T> = (ReactElement<T> | false | undefined | null) | (ReactElement<T> | false | undefined | null)[];
|
|
4
5
|
export interface SideNavigationProps {
|
|
5
6
|
/** container class name */
|
|
6
7
|
className?: string;
|
|
@@ -8,12 +9,19 @@ export interface SideNavigationProps {
|
|
|
8
9
|
id?: string;
|
|
9
10
|
/** main navigation items */
|
|
10
11
|
items?: HeaderNavigationItemData[];
|
|
11
|
-
/**
|
|
12
|
-
|
|
12
|
+
/** additional components */
|
|
13
|
+
children?: OptionalChildren<SideNavigationTopProps>;
|
|
13
14
|
/** is menu expanded */
|
|
14
15
|
expanded?: SideNavigationExpandedState;
|
|
15
16
|
/** expand change handler */
|
|
16
17
|
onExpandedChange?(expanded: SideNavigationExpandedState): void;
|
|
17
18
|
}
|
|
18
|
-
|
|
19
|
+
declare function SideNavigationElement({ className, children, expanded, id, items, onExpandedChange, }: SideNavigationProps): import("react/jsx-runtime").JSX.Element;
|
|
20
|
+
export interface SideNavigationTopProps {
|
|
21
|
+
children: OptionalChildren<SideNavigationLinkProps | SideNavigationTriggerProps>;
|
|
22
|
+
}
|
|
23
|
+
export declare const SideNavigation: typeof SideNavigationElement & {
|
|
24
|
+
Top: FC<SideNavigationTopProps>;
|
|
25
|
+
};
|
|
26
|
+
export {};
|
|
19
27
|
//# sourceMappingURL=side-navigation.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"side-navigation.d.ts","sourceRoot":"","sources":["../../../src/components/left-navigation/side-navigation.tsx"],"names":[],"mappings":"AAMA,OAAO,
|
|
1
|
+
{"version":3,"file":"side-navigation.d.ts","sourceRoot":"","sources":["../../../src/components/left-navigation/side-navigation.tsx"],"names":[],"mappings":"AAMA,OAAO,EAGH,EAAE,EAGF,YAAY,EAKf,MAAM,OAAO,CAAC;AACf,OAAO,EACH,wBAAwB,EAG3B,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,wBAAwB,EAAE,CAAC;IACnC,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,2CAgErB;AAED,MAAM,WAAW,sBAAsB;IACnC,QAAQ,EAAE,gBAAgB,CAAC,uBAAuB,GAAG,0BAA0B,CAAC,CAAC;CACpF;AA8KD,eAAO,MAAM,cAAc;;CAEzB,CAAC"}
|
|
@@ -4,18 +4,43 @@ import SvgCollapse from '@servicetitan/anvil2/assets/icons/st/gnav_menu_collapse
|
|
|
4
4
|
import SvgExpand from '@servicetitan/anvil2/assets/icons/st/gnav_menu_expand.svg';
|
|
5
5
|
import { Collapsible, Headline } from '@servicetitan/design-system';
|
|
6
6
|
import classNames from 'classnames';
|
|
7
|
-
import { Fragment, useCallback, useContext, } from 'react';
|
|
7
|
+
import { Children, Fragment, isValidElement, useCallback, useContext, useMemo, } from 'react';
|
|
8
8
|
import { NavigationComponentContext } from '../../utils/navigation-context';
|
|
9
9
|
import { getSubmenuGroupTag } from '../../utils/side-nav';
|
|
10
10
|
import { CounterTag } from '../counter-tag';
|
|
11
|
+
import { SideNavigationContext } from './side-navigation-context';
|
|
11
12
|
import { InternalSideNavigationLink } from './side-navigation-links-internal';
|
|
12
13
|
import * as Styles from './side-navigation.module.less';
|
|
13
14
|
import { withTooltip } from './with-tooltip';
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
15
|
+
const defaultContext = {
|
|
16
|
+
styles: {
|
|
17
|
+
popoverContent: {
|
|
18
|
+
'--background-color-strong': '#24323C',
|
|
19
|
+
'color': 'var(--color-white)',
|
|
20
|
+
},
|
|
21
|
+
},
|
|
17
22
|
};
|
|
18
|
-
|
|
23
|
+
function SideNavigationElement({ className, children, expanded, id, items, onExpandedChange, }) {
|
|
24
|
+
const NavigationComponent = useContext(NavigationComponentContext);
|
|
25
|
+
const { childTop } = useMemo(() => Children.toArray(children).reduce((out, item) => {
|
|
26
|
+
if (item &&
|
|
27
|
+
isValidElement(item) &&
|
|
28
|
+
item.type &&
|
|
29
|
+
typeof item.type !== 'string' &&
|
|
30
|
+
item.type.name === SideNavigationTop.name) {
|
|
31
|
+
out.childTop = item;
|
|
32
|
+
}
|
|
33
|
+
return out;
|
|
34
|
+
}, {}), [children]);
|
|
35
|
+
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("div", { 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(InternalSideNavigationLink, { submenuExpanded: undefined, navigationComponent: NavigationComponent, ...item }, item.id))) }), _jsx("div", { className: Styles.divider }), _jsx("div", { className: Styles.sideNavBottom, children: _jsx(SideNavigationOptionsToggle, { expanded: expanded, onExpandedChange: onExpandedChange }) })] }) }));
|
|
36
|
+
}
|
|
37
|
+
function SideNavigationTopElement({ children }) {
|
|
38
|
+
const list = Children.map(children, child => {
|
|
39
|
+
return child && isValidElement(child) ? child : null;
|
|
40
|
+
});
|
|
41
|
+
return (list === null || list === void 0 ? void 0 : list.length) ? (_jsxs(Fragment, { children: [_jsx("div", { className: Styles.sideNavTop, "data-cy": "navigation-items-top", children: list }), _jsx("div", { className: Styles.divider })] })) : null;
|
|
42
|
+
}
|
|
43
|
+
const SideNavigationTop = SideNavigationTopElement;
|
|
19
44
|
/** Side Navigation menu item */
|
|
20
45
|
const SideNavigationGroupItem = ({ onExpandedChange, ...props }) => {
|
|
21
46
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
@@ -33,7 +58,8 @@ const SideNavigationGroupItem = ({ onExpandedChange, ...props }) => {
|
|
|
33
58
|
});
|
|
34
59
|
}, [props.id, props.expanded, isSubmenuExpanded, onExpandedChange]);
|
|
35
60
|
const tag = getSubmenuGroupTag(props.submenu, props.tag);
|
|
36
|
-
|
|
61
|
+
const context = useContext(SideNavigationContext);
|
|
62
|
+
return ((_d = props.expanded) === null || _d === void 0 ? void 0 : _d.bar) ? (_jsxs(Fragment, { children: [_jsx("div", { onClickCapture: triggerClick, children: _jsx(InternalSideNavigationLink, { ...props, submenuExpanded: isSubmenuExpanded, tag: tag }) }), _jsx(Collapsible, { open: (_f = (_e = props.expanded) === null || _e === void 0 ? void 0 : _e.submenus) === null || _f === void 0 ? void 0 : _f.includes(props.id), animate: true, children: _jsx("div", { className: Styles.submenu, children: _jsx(SideNavigationGroupContent, { groups: (_h = (_g = props.submenu) === null || _g === void 0 ? void 0 : _g.groups) !== null && _h !== void 0 ? _h : [], navigationComponent: props.navigationComponent }) }) })] })) : (_jsxs(Popover, { placement: "right-start", openOnHover: true, 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: (_k = (_j = props.submenu) === null || _j === void 0 ? void 0 : _j.groups) !== null && _k !== void 0 ? _k : [], navigationComponent: props.navigationComponent })] }) })] }));
|
|
37
63
|
};
|
|
38
64
|
const SideNavigationGroupContent = ({ groups, navigationComponent, }) => {
|
|
39
65
|
return (_jsx(Fragment, { children: groups.reduce((out, group, index) => {
|
|
@@ -52,5 +78,8 @@ const SideNavigationGroupLink = ({ id, tag, title, to, isActive, navigationCompo
|
|
|
52
78
|
}), isActive: typeof isActive === 'function' ? isActive : undefined, activeClassName: Styles.submenuLinkActive, children: [_jsx("span", { children: title }), !!tag && _jsx(CounterTag, { data: tag, className: Styles.submenuLinkCounter })] }, id));
|
|
53
79
|
};
|
|
54
80
|
/** Side Navigation options toggle */
|
|
55
|
-
const SideNavigationOptionsToggle = ({ expanded, onExpandedChange }) => withTooltip(_jsxs("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), submenus: expanded === null || expanded === void 0 ? void 0 : expanded.submenus }), children: [_jsx("div", { className: Styles.optionsIconWrapper, children: _jsx(Icon, { className: Styles.optionsIcon, svg: expanded ? 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');
|
|
81
|
+
const SideNavigationOptionsToggle = ({ expanded, onExpandedChange }) => withTooltip(_jsxs("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), submenus: expanded === null || expanded === void 0 ? void 0 : expanded.submenus }), 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');
|
|
82
|
+
export const SideNavigation = Object.assign(SideNavigationElement, {
|
|
83
|
+
Top: SideNavigationTop,
|
|
84
|
+
});
|
|
56
85
|
//# sourceMappingURL=side-navigation.js.map
|
|
@@ -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,EAAuB,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAChF,OAAO,WAAW,MAAM,6DAA6D,CAAC;AACtF,OAAO,SAAS,MAAM,2DAA2D,CAAC;AAClF,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEpE,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,
|
|
1
|
+
{"version":3,"file":"side-navigation.js","sourceRoot":"","sources":["../../../src/components/left-navigation/side-navigation.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,9 @@
|
|
|
1
|
+
import { FC } from 'react';
|
|
1
2
|
declare const _default: {
|
|
2
3
|
title: string;
|
|
3
|
-
component: import("
|
|
4
|
+
component: (({ className, children, expanded, id, items, onExpandedChange, }: import("./side-navigation").SideNavigationProps) => import("react/jsx-runtime").JSX.Element) & {
|
|
5
|
+
Top: FC<import("./side-navigation").SideNavigationTopProps>;
|
|
6
|
+
};
|
|
4
7
|
decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
|
|
5
8
|
parameters: {};
|
|
6
9
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"side-navigation.stories.d.ts","sourceRoot":"","sources":["../../../src/components/left-navigation/side-navigation.stories.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"side-navigation.stories.d.ts","sourceRoot":"","sources":["../../../src/components/left-navigation/side-navigation.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAiB,EAAE,EAAY,MAAM,OAAO,CAAC;;;;;;;;;AA4BpD,wBAKE;AAEF,eAAO,MAAM,qBAAqB,+CA4BjC,CAAC;AAEF,eAAO,MAAM,uBAAuB,+CAwBnC,CAAC;AAEF,eAAO,MAAM,yBAAyB,+CAwBrC,CAAC;AAWF,eAAO,MAAM,mCAAmC,+CAiC/C,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Popover } from '@servicetitan/anvil2';
|
|
3
3
|
import { Page } from '@servicetitan/design-system';
|
|
4
|
-
import {
|
|
4
|
+
import { useState } from 'react';
|
|
5
5
|
import { LocationInfo, items, withAnvil, withDefaultRedirects, withMemoryRouter, } from '../../test/data';
|
|
6
6
|
import { SideNavigation, SideNavigationLink, SideNavigationTrigger, } from './';
|
|
7
7
|
const layout = (Story) => {
|
|
@@ -28,7 +28,7 @@ export const DefaultSideNavigation = () => {
|
|
|
28
28
|
items.priceBook,
|
|
29
29
|
items.pointOfSale,
|
|
30
30
|
items.reports,
|
|
31
|
-
],
|
|
31
|
+
], children: _jsx(SideNavigation.Top, { children: _jsx(SideNavigationLink, { ...items.tasks }) }) }));
|
|
32
32
|
};
|
|
33
33
|
export const SideNavigationLinksOnly = () => {
|
|
34
34
|
const [expanded, setExpanded] = useState(undefined);
|
|
@@ -62,8 +62,8 @@ export const SideNavigationWithSubmenu = () => {
|
|
|
62
62
|
items.projects,
|
|
63
63
|
] }));
|
|
64
64
|
};
|
|
65
|
-
const
|
|
66
|
-
return (_jsxs(Popover, { placement: "right", openOnHover: true, children: [_jsx(Popover.Trigger, { children: props =>
|
|
65
|
+
const SideLinkPopoverWrapper = ({ children, context }) => {
|
|
66
|
+
return (_jsxs(Popover, { placement: "right", openOnHover: true, children: [_jsx(Popover.Trigger, { children: props => _jsx("div", { ...props, children: children }) }), _jsx(Popover.Content, { style: context.styles.popoverContent, children: "popover content" })] }));
|
|
67
67
|
};
|
|
68
68
|
export const SideNavigationWithCustomTopElements = () => {
|
|
69
69
|
const [expanded, setExpanded] = useState(undefined);
|
|
@@ -78,6 +78,6 @@ export const SideNavigationWithCustomTopElements = () => {
|
|
|
78
78
|
items.marketing,
|
|
79
79
|
items.priceBook,
|
|
80
80
|
items.projects,
|
|
81
|
-
],
|
|
81
|
+
], children: _jsxs(SideNavigation.Top, { children: [_jsx(SideNavigationLink, { ...items.calls }), _jsx(SideNavigationLink, { ...items.tasks }), _jsx(SideNavigationTrigger, { ...items.marketing, isActive: false, wrapper: SideLinkPopoverWrapper })] }) }));
|
|
82
82
|
};
|
|
83
83
|
//# sourceMappingURL=side-navigation.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"side-navigation.stories.js","sourceRoot":"","sources":["../../../src/components/left-navigation/side-navigation.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,IAAI,EAAE,MAAM,6BAA6B,CAAC;AACnD,OAAO,
|
|
1
|
+
{"version":3,"file":"side-navigation.stories.js","sourceRoot":"","sources":["../../../src/components/left-navigation/side-navigation.stories.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@servicetitan/navigation",
|
|
3
|
-
"version": "9.1
|
|
3
|
+
"version": "9.2.1",
|
|
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": "9b96f71a30018ed7ff17243fa35a56f5d6610d91"
|
|
47
47
|
}
|
|
@@ -1,13 +1,23 @@
|
|
|
1
|
+
import { FC, ReactElement } from 'react';
|
|
1
2
|
import { HeaderNavigationItemData } from '../../utils/navigation';
|
|
3
|
+
import { SideNavigationContextType } from './side-navigation-context';
|
|
2
4
|
|
|
3
5
|
export interface SideNavigationExpandedState {
|
|
4
6
|
bar: boolean;
|
|
5
7
|
submenus?: string[];
|
|
6
8
|
}
|
|
7
9
|
|
|
10
|
+
export interface SideNavigationLinkWrapperProps {
|
|
11
|
+
children: ReactElement<SideNavigationLinkProps> | ReactElement<SideNavigationTriggerProps>;
|
|
12
|
+
context: SideNavigationContextType;
|
|
13
|
+
}
|
|
14
|
+
|
|
8
15
|
export interface SideNavigationLinkProps
|
|
9
|
-
extends Omit<HeaderNavigationItemData, 'iconName' | 'submenu'> {
|
|
16
|
+
extends Omit<HeaderNavigationItemData, 'iconName' | 'submenu'> {
|
|
17
|
+
wrapper?: FC<SideNavigationLinkWrapperProps>;
|
|
18
|
+
}
|
|
10
19
|
export interface SideNavigationTriggerProps
|
|
11
20
|
extends Omit<SideNavigationLinkProps, 'to' | 'isActive'> {
|
|
12
21
|
isActive?: boolean;
|
|
22
|
+
wrapper?: FC<SideNavigationLinkWrapperProps>;
|
|
13
23
|
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { CSSProperties, createContext } from 'react';
|
|
2
|
+
|
|
3
|
+
export interface SideNavigationContextType {
|
|
4
|
+
styles: {
|
|
5
|
+
popoverContent: CSSProperties;
|
|
6
|
+
};
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
export const SideNavigationContext = createContext<SideNavigationContextType>({
|
|
10
|
+
styles: {
|
|
11
|
+
popoverContent: {},
|
|
12
|
+
},
|
|
13
|
+
});
|
|
@@ -1,18 +1,27 @@
|
|
|
1
1
|
import classNames from 'classnames';
|
|
2
|
-
import { FC, useContext } from 'react';
|
|
2
|
+
import { FC, ReactElement, useContext } from 'react';
|
|
3
3
|
import { NavigationComponentContext } from '../../utils/navigation-context';
|
|
4
4
|
import { SideNavigationLinkProps, SideNavigationTriggerProps } from './interface';
|
|
5
|
+
import { SideNavigationContext } from './side-navigation-context';
|
|
5
6
|
import {
|
|
6
7
|
InternalSideNavigationItemContent,
|
|
7
8
|
InternalSideNavigationLink,
|
|
8
9
|
internalNavigationContentContainerProps,
|
|
9
10
|
} from './side-navigation-links-internal';
|
|
10
11
|
|
|
12
|
+
const WrappedLink: FC<{
|
|
13
|
+
children: ReactElement;
|
|
14
|
+
wrapper: NonNullable<SideNavigationLinkProps['wrapper']>;
|
|
15
|
+
}> = ({ children, wrapper: WrapperComponent }) => {
|
|
16
|
+
return (
|
|
17
|
+
<WrapperComponent context={useContext(SideNavigationContext)}>{children}</WrapperComponent>
|
|
18
|
+
);
|
|
19
|
+
};
|
|
11
20
|
/** Side Navigation menu link */
|
|
12
|
-
export
|
|
21
|
+
export function SideNavigationLink({ wrapper, ...props }: SideNavigationLinkProps) {
|
|
13
22
|
const NavigationComponent = useContext(NavigationComponentContext);
|
|
14
23
|
|
|
15
|
-
|
|
24
|
+
const element = (
|
|
16
25
|
<InternalSideNavigationLink
|
|
17
26
|
{...props}
|
|
18
27
|
navigationComponent={NavigationComponent}
|
|
@@ -20,11 +29,13 @@ export const SideNavigationLink: FC<SideNavigationLinkProps> = props => {
|
|
|
20
29
|
dataPrefix="navigation-link"
|
|
21
30
|
/>
|
|
22
31
|
);
|
|
23
|
-
};
|
|
24
32
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
33
|
+
return wrapper ? <WrappedLink wrapper={wrapper}>{element}</WrappedLink> : element;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
/** Side Navigation menu trigger */
|
|
37
|
+
export function SideNavigationTrigger({ wrapper, ...props }: SideNavigationTriggerProps) {
|
|
38
|
+
const element = (
|
|
28
39
|
<div
|
|
29
40
|
{...internalNavigationContentContainerProps({
|
|
30
41
|
...props,
|
|
@@ -36,4 +47,5 @@ export const SideNavigationTrigger: FC<SideNavigationTriggerProps> = props => {
|
|
|
36
47
|
<InternalSideNavigationItemContent submenuExpanded={undefined} {...props} />
|
|
37
48
|
</div>
|
|
38
49
|
);
|
|
39
|
-
};
|
|
50
|
+
return wrapper ? <WrappedLink wrapper={wrapper}>{element}</WrappedLink> : element;
|
|
51
|
+
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Popover } from '@servicetitan/anvil2';
|
|
2
2
|
import { Page } from '@servicetitan/design-system';
|
|
3
|
-
import { ComponentType,
|
|
3
|
+
import { ComponentType, FC, useState } from 'react';
|
|
4
4
|
import {
|
|
5
5
|
LocationInfo,
|
|
6
6
|
items,
|
|
@@ -12,6 +12,7 @@ import {
|
|
|
12
12
|
SideNavigation,
|
|
13
13
|
SideNavigationExpandedState,
|
|
14
14
|
SideNavigationLink,
|
|
15
|
+
SideNavigationLinkWrapperProps,
|
|
15
16
|
SideNavigationTrigger,
|
|
16
17
|
} from './';
|
|
17
18
|
|
|
@@ -56,8 +57,11 @@ export const DefaultSideNavigation = () => {
|
|
|
56
57
|
items.pointOfSale,
|
|
57
58
|
items.reports,
|
|
58
59
|
]}
|
|
59
|
-
|
|
60
|
-
|
|
60
|
+
>
|
|
61
|
+
<SideNavigation.Top>
|
|
62
|
+
<SideNavigationLink {...items.tasks} />
|
|
63
|
+
</SideNavigation.Top>
|
|
64
|
+
</SideNavigation>
|
|
61
65
|
);
|
|
62
66
|
};
|
|
63
67
|
|
|
@@ -113,17 +117,11 @@ export const SideNavigationWithSubmenu = () => {
|
|
|
113
117
|
);
|
|
114
118
|
};
|
|
115
119
|
|
|
116
|
-
const
|
|
120
|
+
const SideLinkPopoverWrapper: FC<SideNavigationLinkWrapperProps> = ({ children, context }) => {
|
|
117
121
|
return (
|
|
118
122
|
<Popover placement="right" openOnHover>
|
|
119
|
-
<Popover.Trigger>
|
|
120
|
-
|
|
121
|
-
<div {...props}>
|
|
122
|
-
<SideNavigationTrigger {...items.marketing} isActive={false} />
|
|
123
|
-
</div>
|
|
124
|
-
)}
|
|
125
|
-
</Popover.Trigger>
|
|
126
|
-
<Popover.Content>popover content</Popover.Content>
|
|
123
|
+
<Popover.Trigger>{props => <div {...props}>{children}</div>}</Popover.Trigger>
|
|
124
|
+
<Popover.Content style={context.styles.popoverContent}>popover content</Popover.Content>
|
|
127
125
|
</Popover>
|
|
128
126
|
);
|
|
129
127
|
};
|
|
@@ -149,13 +147,16 @@ export const SideNavigationWithCustomTopElements = () => {
|
|
|
149
147
|
|
|
150
148
|
items.projects,
|
|
151
149
|
]}
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
150
|
+
>
|
|
151
|
+
<SideNavigation.Top>
|
|
152
|
+
<SideNavigationLink {...items.calls} />
|
|
153
|
+
<SideNavigationLink {...items.tasks} />
|
|
154
|
+
<SideNavigationTrigger
|
|
155
|
+
{...items.marketing}
|
|
156
|
+
isActive={false}
|
|
157
|
+
wrapper={SideLinkPopoverWrapper}
|
|
158
|
+
/>
|
|
159
|
+
</SideNavigation.Top>
|
|
160
|
+
</SideNavigation>
|
|
160
161
|
);
|
|
161
162
|
};
|
|
@@ -6,13 +6,15 @@ import { Collapsible, Headline } from '@servicetitan/design-system';
|
|
|
6
6
|
import classNames from 'classnames';
|
|
7
7
|
import {
|
|
8
8
|
CSSProperties,
|
|
9
|
+
Children,
|
|
9
10
|
FC,
|
|
10
11
|
Fragment,
|
|
11
12
|
MouseEvent,
|
|
12
13
|
ReactElement,
|
|
13
|
-
|
|
14
|
+
isValidElement,
|
|
14
15
|
useCallback,
|
|
15
16
|
useContext,
|
|
17
|
+
useMemo,
|
|
16
18
|
} from 'react';
|
|
17
19
|
import {
|
|
18
20
|
HeaderNavigationItemData,
|
|
@@ -22,12 +24,20 @@ import {
|
|
|
22
24
|
import { NavigationComponentContext } from '../../utils/navigation-context';
|
|
23
25
|
import { getSubmenuGroupTag } from '../../utils/side-nav';
|
|
24
26
|
import { CounterTag } from '../counter-tag';
|
|
25
|
-
import {
|
|
27
|
+
import {
|
|
28
|
+
SideNavigationExpandedState,
|
|
29
|
+
SideNavigationLinkProps,
|
|
30
|
+
SideNavigationTriggerProps,
|
|
31
|
+
} from './interface';
|
|
26
32
|
import { NavigationComponentProps, SideNavigationExpandedProps } from './interface-internal';
|
|
33
|
+
import { SideNavigationContext, SideNavigationContextType } from './side-navigation-context';
|
|
27
34
|
import { InternalSideNavigationLink } from './side-navigation-links-internal';
|
|
28
35
|
import * as Styles from './side-navigation.module.less';
|
|
29
36
|
import { withTooltip } from './with-tooltip';
|
|
30
37
|
|
|
38
|
+
type OptionalChildren<T> =
|
|
39
|
+
| (ReactElement<T> | false | undefined | null)
|
|
40
|
+
| (ReactElement<T> | false | undefined | null)[];
|
|
31
41
|
export interface SideNavigationProps {
|
|
32
42
|
/** container class name */
|
|
33
43
|
className?: string;
|
|
@@ -35,73 +45,113 @@ export interface SideNavigationProps {
|
|
|
35
45
|
id?: string;
|
|
36
46
|
/** main navigation items */
|
|
37
47
|
items?: HeaderNavigationItemData[];
|
|
38
|
-
/**
|
|
39
|
-
|
|
48
|
+
/** additional components */
|
|
49
|
+
children?: OptionalChildren<SideNavigationTopProps>;
|
|
40
50
|
/** is menu expanded */
|
|
41
51
|
expanded?: SideNavigationExpandedState;
|
|
42
52
|
/** expand change handler */
|
|
43
53
|
onExpandedChange?(expanded: SideNavigationExpandedState): void;
|
|
44
54
|
}
|
|
45
55
|
|
|
46
|
-
|
|
56
|
+
const defaultContext: SideNavigationContextType = {
|
|
57
|
+
styles: {
|
|
58
|
+
popoverContent: {
|
|
59
|
+
'--background-color-strong': '#24323C',
|
|
60
|
+
'color': 'var(--color-white)',
|
|
61
|
+
} as CSSProperties,
|
|
62
|
+
},
|
|
63
|
+
};
|
|
64
|
+
|
|
65
|
+
function SideNavigationElement({
|
|
47
66
|
className,
|
|
67
|
+
children,
|
|
48
68
|
expanded,
|
|
49
69
|
id,
|
|
50
70
|
items,
|
|
51
|
-
itemsTop,
|
|
52
71
|
onExpandedChange,
|
|
53
|
-
})
|
|
72
|
+
}: SideNavigationProps) {
|
|
54
73
|
const NavigationComponent = useContext(NavigationComponentContext);
|
|
74
|
+
|
|
75
|
+
const { childTop } = useMemo(
|
|
76
|
+
() =>
|
|
77
|
+
Children.toArray(children).reduce(
|
|
78
|
+
(out, item) => {
|
|
79
|
+
if (
|
|
80
|
+
item &&
|
|
81
|
+
isValidElement(item) &&
|
|
82
|
+
item.type &&
|
|
83
|
+
typeof item.type !== 'string' &&
|
|
84
|
+
item.type.name === SideNavigationTop.name
|
|
85
|
+
) {
|
|
86
|
+
out.childTop = item;
|
|
87
|
+
}
|
|
88
|
+
return out;
|
|
89
|
+
},
|
|
90
|
+
{} as { childTop?: ReactElement }
|
|
91
|
+
),
|
|
92
|
+
[children]
|
|
93
|
+
);
|
|
55
94
|
return (
|
|
56
|
-
<
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
id={id}
|
|
63
|
-
data-cy="side-navigation"
|
|
64
|
-
>
|
|
65
|
-
{!!itemsTop && (
|
|
66
|
-
<Fragment>
|
|
67
|
-
<div className={Styles.sideNavTop} data-cy="navigation-items-top">
|
|
68
|
-
{itemsTop}
|
|
69
|
-
</div>
|
|
70
|
-
<div className={Styles.divider} />
|
|
71
|
-
</Fragment>
|
|
72
|
-
)}
|
|
73
|
-
<div className={Styles.sideNavContent} data-cy="navigation-items">
|
|
74
|
-
{items?.map(item =>
|
|
75
|
-
item.submenu ? (
|
|
76
|
-
<SideNavigationGroupItem
|
|
77
|
-
key={item.id}
|
|
78
|
-
expanded={expanded}
|
|
79
|
-
onExpandedChange={onExpandedChange}
|
|
80
|
-
navigationComponent={NavigationComponent}
|
|
81
|
-
{...item}
|
|
82
|
-
/>
|
|
83
|
-
) : (
|
|
84
|
-
<InternalSideNavigationLink
|
|
85
|
-
key={item.id}
|
|
86
|
-
submenuExpanded={undefined}
|
|
87
|
-
navigationComponent={NavigationComponent}
|
|
88
|
-
{...item}
|
|
89
|
-
/>
|
|
90
|
-
)
|
|
95
|
+
<SideNavigationContext.Provider value={defaultContext}>
|
|
96
|
+
<div
|
|
97
|
+
className={classNames(
|
|
98
|
+
Styles.sideNav,
|
|
99
|
+
expanded?.bar ? Styles.sideNavExpanded : Styles.sideNavSlim,
|
|
100
|
+
className
|
|
91
101
|
)}
|
|
102
|
+
id={id}
|
|
103
|
+
data-cy="side-navigation"
|
|
104
|
+
>
|
|
105
|
+
{childTop}
|
|
106
|
+
<div className={Styles.sideNavContent} data-cy="navigation-items">
|
|
107
|
+
{items?.map(item =>
|
|
108
|
+
item.submenu ? (
|
|
109
|
+
<SideNavigationGroupItem
|
|
110
|
+
key={item.id}
|
|
111
|
+
expanded={expanded}
|
|
112
|
+
onExpandedChange={onExpandedChange}
|
|
113
|
+
navigationComponent={NavigationComponent}
|
|
114
|
+
{...item}
|
|
115
|
+
/>
|
|
116
|
+
) : (
|
|
117
|
+
<InternalSideNavigationLink
|
|
118
|
+
key={item.id}
|
|
119
|
+
submenuExpanded={undefined}
|
|
120
|
+
navigationComponent={NavigationComponent}
|
|
121
|
+
{...item}
|
|
122
|
+
/>
|
|
123
|
+
)
|
|
124
|
+
)}
|
|
125
|
+
</div>
|
|
126
|
+
<div className={Styles.divider} />
|
|
127
|
+
<div className={Styles.sideNavBottom}>
|
|
128
|
+
<SideNavigationOptionsToggle
|
|
129
|
+
expanded={expanded}
|
|
130
|
+
onExpandedChange={onExpandedChange}
|
|
131
|
+
/>
|
|
132
|
+
</div>
|
|
92
133
|
</div>
|
|
93
|
-
|
|
94
|
-
<div className={Styles.sideNavBottom}>
|
|
95
|
-
<SideNavigationOptionsToggle
|
|
96
|
-
expanded={expanded}
|
|
97
|
-
onExpandedChange={onExpandedChange}
|
|
98
|
-
/>
|
|
99
|
-
</div>
|
|
100
|
-
</div>
|
|
134
|
+
</SideNavigationContext.Provider>
|
|
101
135
|
);
|
|
102
|
-
}
|
|
136
|
+
}
|
|
103
137
|
|
|
104
|
-
|
|
138
|
+
export interface SideNavigationTopProps {
|
|
139
|
+
children: OptionalChildren<SideNavigationLinkProps | SideNavigationTriggerProps>;
|
|
140
|
+
}
|
|
141
|
+
function SideNavigationTopElement({ children }: SideNavigationTopProps) {
|
|
142
|
+
const list = Children.map(children, child => {
|
|
143
|
+
return child && isValidElement(child) ? child : null;
|
|
144
|
+
});
|
|
145
|
+
return list?.length ? (
|
|
146
|
+
<Fragment>
|
|
147
|
+
<div className={Styles.sideNavTop} data-cy="navigation-items-top">
|
|
148
|
+
{list}
|
|
149
|
+
</div>
|
|
150
|
+
<div className={Styles.divider} />
|
|
151
|
+
</Fragment>
|
|
152
|
+
) : null;
|
|
153
|
+
}
|
|
154
|
+
const SideNavigationTop: FC<SideNavigationTopProps> = SideNavigationTopElement;
|
|
105
155
|
|
|
106
156
|
/** Side Navigation menu item */
|
|
107
157
|
const SideNavigationGroupItem: FC<
|
|
@@ -129,6 +179,7 @@ const SideNavigationGroupItem: FC<
|
|
|
129
179
|
);
|
|
130
180
|
|
|
131
181
|
const tag = getSubmenuGroupTag(props.submenu, props.tag);
|
|
182
|
+
const context = useContext(SideNavigationContext);
|
|
132
183
|
|
|
133
184
|
return props.expanded?.bar ? (
|
|
134
185
|
<Fragment>
|
|
@@ -161,7 +212,7 @@ const SideNavigationGroupItem: FC<
|
|
|
161
212
|
</div>
|
|
162
213
|
)}
|
|
163
214
|
</Popover.Trigger>
|
|
164
|
-
<Popover.Content style={
|
|
215
|
+
<Popover.Content style={context.styles.popoverContent} className="z-global-nav-i">
|
|
165
216
|
<div className={Styles.submenuPopover}>
|
|
166
217
|
<Headline size="small" className="c-white m-b-half-i m-t-1">
|
|
167
218
|
{props.title}
|
|
@@ -248,7 +299,10 @@ const SideNavigationOptionsToggle: FC<{
|
|
|
248
299
|
}
|
|
249
300
|
>
|
|
250
301
|
<div className={Styles.optionsIconWrapper}>
|
|
251
|
-
<Icon
|
|
302
|
+
<Icon
|
|
303
|
+
className={Styles.optionsIcon}
|
|
304
|
+
svg={expanded?.bar ? SvgCollapse : SvgExpand}
|
|
305
|
+
/>
|
|
252
306
|
</div>
|
|
253
307
|
|
|
254
308
|
{!!expanded?.bar && <span className={Styles.optionsItemText}>Collapse Menu</span>}
|
|
@@ -256,3 +310,7 @@ const SideNavigationOptionsToggle: FC<{
|
|
|
256
310
|
expanded?.bar ? undefined : 'Expand Menu',
|
|
257
311
|
'right'
|
|
258
312
|
);
|
|
313
|
+
|
|
314
|
+
export const SideNavigation = Object.assign(SideNavigationElement, {
|
|
315
|
+
Top: SideNavigationTop,
|
|
316
|
+
});
|