@servicetitan/navigation 8.1.7 → 8.2.1

package/dist/components/header-navigation/header-navigation-links.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"header-navigation-links.d.ts","sourceRoot":"","sources":["../../../src/components/header-navigation/header-navigation-links.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAE,SAAS,EAAc,MAAM,OAAO,CAAC;AAClD,OAAO,EAAE,yBAAyB,EAAE,4BAA4B,EAAE,MAAM,wBAAwB,CAAC;AAMjG,sCAAsC;AACtC,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC,yBAAyB,CA4C9D,CAAC;AAEF,6CAA6C;AAC7C,eAAO,MAAM,uBAAuB,EAAE,EAAE,CAAC,4BAA4B,CAyCpE,CAAC;AAEF,gDAAgD;AAChD,eAAO,MAAM,6BAA6B,EAAE,EAAE,CAC1C,IAAI,CACA,4BAA4B,EAC1B,SAAS,GACT,UAAU,GACV,UAAU,GACV,eAAe,GACf,eAAe,GACf,MAAM,GACN,YAAY,CACjB,GAAG;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,CAkB1B,CAAC"}
+{"version":3,"file":"header-navigation-links.d.ts","sourceRoot":"","sources":["../../../src/components/header-navigation/header-navigation-links.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAE,SAAS,EAAc,MAAM,OAAO,CAAC;AAClD,OAAO,EAAE,yBAAyB,EAAE,4BAA4B,EAAE,MAAM,wBAAwB,CAAC;AAMjG,sCAAsC;AACtC,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC,yBAAyB,CA8C9D,CAAC;AAEF,6CAA6C;AAC7C,eAAO,MAAM,uBAAuB,EAAE,EAAE,CAAC,4BAA4B,CAyCpE,CAAC;AAEF,gDAAgD;AAChD,eAAO,MAAM,6BAA6B,EAAE,EAAE,CAC1C,IAAI,CACA,4BAA4B,EAC1B,SAAS,GACT,UAAU,GACV,UAAU,GACV,eAAe,GACf,eAAe,GACf,MAAM,GACN,YAAY,CACjB,GAAG;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,CAkB1B,CAAC"}

package/dist/components/header-navigation/header-navigation-links.js

@@ -7,7 +7,7 @@ import { HeaderNavigationItemContent } from './header-navigation-content';
 import * as Styles from './header-navigation.module.less';
 import { withTooltip } from './with-tooltip';
 /** Navigation extra item with link */
-export const HeaderNavigationLink = ({ id, to, hint, tooltip, counter, className, iconClassName, iconComponent, iconName, isActive, label, labelClassName, target, ...rest }) => {
+export const HeaderNavigationLink = ({ id, to, hint, tooltip, counter, className, icon, iconActive, iconClassName, iconComponent, iconName, isActive, label, labelClassName, target, ...rest }) => {
     const NavigationComponent = useContext(NavigationComponentContext);
     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, Styles.navigationItem, className, {
             [Styles.navigationItemActive]: isActive === true,

package/dist/components/header-navigation/header-navigation-links.js.map

@@ -1 +1 @@
-{"version":3,"file":"header-navigation-links.js","sourceRoot":"","sources":["../../../src/components/header-navigation/header-navigation-links.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"header-navigation-links.js","sourceRoot":"","sources":["../../../src/components/header-navigation/header-navigation-links.tsx"],"names":[],"mappings":"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"}

package/dist/components/layout.stories.d.ts

@@ -7,4 +7,5 @@ export default _default;
 export declare const LeftNavLayout: () => import("react/jsx-runtime").JSX.Element;
 export declare const LeftNavLayoutCommercial: () => import("react/jsx-runtime").JSX.Element;
 export declare const LeftNavLayoutOnlyLinks: () => import("react/jsx-runtime").JSX.Element;
+export declare const LeftNavLayoutSubmenu: () => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=layout.stories.d.ts.map

package/dist/components/layout.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"layout.stories.d.ts","sourceRoot":"","sources":["../../src/components/layout.stories.tsx"],"names":[],"mappings":";;;;;AAUA,wBAIE;AAEF,eAAO,MAAM,aAAa,+CAUzB,CAAC;AAEF,eAAO,MAAM,uBAAuB,+CAUnC,CAAC;AAEF,eAAO,MAAM,sBAAsB,+CAUlC,CAAC"}
+{"version":3,"file":"layout.stories.d.ts","sourceRoot":"","sources":["../../src/components/layout.stories.tsx"],"names":[],"mappings":";;;;;AAYA,wBAIE;AAEF,eAAO,MAAM,aAAa,+CAUzB,CAAC;AAEF,eAAO,MAAM,uBAAuB,+CAUnC,CAAC;AAEF,eAAO,MAAM,sBAAsB,+CAUlC,CAAC;AAEF,eAAO,MAAM,oBAAoB,+CAchC,CAAC"}

package/dist/components/layout.stories.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { withAnvil, withMemoryRouter } from '../test/data';
+import { Page, Sidebar } from '@servicetitan/design-system';
+import { LocationInfo, withAnvil, withMemoryRouter } from '../test/data';
 import { WithAllMonolithData, WithAllMonolithDataCommercial, } from './left-navigation/header-navigation-tiny.stories';
-import { DefaultSideNavigation, SideNavigationLinksOnly, } from './left-navigation/side-navigation.stories';
+import { DefaultSideNavigation, SideNavigationLinksOnly, SideNavigationWithSubmenu, } from './left-navigation/side-navigation.stories';
 export default {
     title: 'Navigation/Layout',
     parameters: {},
@@ -16,4 +17,7 @@ export const LeftNavLayoutCommercial = () => {
 export const LeftNavLayoutOnlyLinks = () => {
     return (_jsxs("div", { className: "d-f border flex-column", style: { height: '800px' }, children: [_jsx(WithAllMonolithDataCommercial, {}), _jsxs("div", { className: "flex-grow-1 flex-basis-0 d-f", children: [_jsx(SideNavigationLinksOnly, {}), _jsx("div", { className: "flex-grow-1 flex-basis-0" })] })] }));
 };
+export const LeftNavLayoutSubmenu = () => {
+    return (_jsxs("div", { className: "d-f border flex-column", style: { height: '800px' }, children: [_jsx(WithAllMonolithDataCommercial, {}), _jsxs("div", { className: "flex-grow-1 flex-basis-0 d-f", children: [_jsx(SideNavigationWithSubmenu, {}), _jsx("div", { className: "flex-grow-1 flex-basis-0", children: _jsx(Page, { sidebar: _jsx(Sidebar, { localStorageKey: "undefined", children: "sidebar" }), children: _jsx(LocationInfo, {}) }) })] })] }));
+};
 //# sourceMappingURL=layout.stories.js.map

package/dist/components/layout.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"layout.stories.js","sourceRoot":"","sources":["../../src/components/layout.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAC3D,OAAO,EACH,mBAAmB,EACnB,6BAA6B,GAChC,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EACH,qBAAqB,EACrB,uBAAuB,GAC1B,MAAM,2CAA2C,CAAC;AAEnD,eAAe;IACX,KAAK,EAAE,mBAAmB;IAC1B,UAAU,EAAE,EAAE;IACd,UAAU,EAAE,CAAC,gBAAgB,EAAE,SAAS,CAAC;CAC5C,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,EAAE;IAC9B,OAAO,CACH,eAAK,SAAS,EAAC,wBAAwB,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,aAC9D,KAAC,mBAAmB,KAAG,EACvB,eAAK,SAAS,EAAC,8BAA8B,aACzC,KAAC,qBAAqB,KAAG,EACzB,cAAK,SAAS,EAAC,0BAA0B,GAAG,IAC1C,IACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,EAAE;IACxC,OAAO,CACH,eAAK,SAAS,EAAC,wBAAwB,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,aAC9D,KAAC,6BAA6B,KAAG,EACjC,eAAK,SAAS,EAAC,8BAA8B,aACzC,KAAC,qBAAqB,KAAG,EACzB,cAAK,SAAS,EAAC,0BAA0B,GAAG,IAC1C,IACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,EAAE;IACvC,OAAO,CACH,eAAK,SAAS,EAAC,wBAAwB,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,aAC9D,KAAC,6BAA6B,KAAG,EACjC,eAAK,SAAS,EAAC,8BAA8B,aACzC,KAAC,uBAAuB,KAAG,EAC3B,cAAK,SAAS,EAAC,0BAA0B,GAAG,IAC1C,IACJ,CACT,CAAC;AACN,CAAC,CAAC"}
+{"version":3,"file":"layout.stories.js","sourceRoot":"","sources":["../../src/components/layout.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AACzE,OAAO,EACH,mBAAmB,EACnB,6BAA6B,GAChC,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EACH,qBAAqB,EACrB,uBAAuB,EACvB,yBAAyB,GAC5B,MAAM,2CAA2C,CAAC;AAEnD,eAAe;IACX,KAAK,EAAE,mBAAmB;IAC1B,UAAU,EAAE,EAAE;IACd,UAAU,EAAE,CAAC,gBAAgB,EAAE,SAAS,CAAC;CAC5C,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,EAAE;IAC9B,OAAO,CACH,eAAK,SAAS,EAAC,wBAAwB,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,aAC9D,KAAC,mBAAmB,KAAG,EACvB,eAAK,SAAS,EAAC,8BAA8B,aACzC,KAAC,qBAAqB,KAAG,EACzB,cAAK,SAAS,EAAC,0BAA0B,GAAG,IAC1C,IACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,EAAE;IACxC,OAAO,CACH,eAAK,SAAS,EAAC,wBAAwB,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,aAC9D,KAAC,6BAA6B,KAAG,EACjC,eAAK,SAAS,EAAC,8BAA8B,aACzC,KAAC,qBAAqB,KAAG,EACzB,cAAK,SAAS,EAAC,0BAA0B,GAAG,IAC1C,IACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,EAAE;IACvC,OAAO,CACH,eAAK,SAAS,EAAC,wBAAwB,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,aAC9D,KAAC,6BAA6B,KAAG,EACjC,eAAK,SAAS,EAAC,8BAA8B,aACzC,KAAC,uBAAuB,KAAG,EAC3B,cAAK,SAAS,EAAC,0BAA0B,GAAG,IAC1C,IACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,EAAE;IACrC,OAAO,CACH,eAAK,SAAS,EAAC,wBAAwB,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,aAC9D,KAAC,6BAA6B,KAAG,EACjC,eAAK,SAAS,EAAC,8BAA8B,aACzC,KAAC,yBAAyB,KAAG,EAC7B,cAAK,SAAS,EAAC,0BAA0B,YACrC,KAAC,IAAI,IAAC,OAAO,EAAE,KAAC,OAAO,IAAC,eAAe,EAAC,WAAW,wBAAkB,YACjE,KAAC,YAAY,KAAG,GACb,GACL,IACJ,IACJ,CACT,CAAC;AACN,CAAC,CAAC"}

package/dist/components/left-navigation/header-navigation-tiny.stories.js

@@ -26,5 +26,5 @@ export default {
 export const DefaultTinyNavigation = () => (_jsx(HeaderNavigationTiny, { className: "border-bottom", left: _jsx(LogoCompanyTitle, { className: "m-l-1", size: "150" }), leftClassName: "d-f align-items-center" }));
 const TimeZoneOffset = () => (_jsx("div", { className: "fs-2 ff-default fw-bold p-r-1", children: _jsx("span", { children: "EST (-9 hrs)" }) }));
 export const WithAllMonolithData = () => (_jsx(HeaderNavigationTiny, { className: "border-bottom", left: _jsx(LogoCompanyTitle, { className: "m-l-1", size: "150" }), leftClassName: "d-f align-items-center", right: _jsxs(Fragment, { children: [_jsx(TimeZoneOffset, {}), _jsx(HeaderNavigationLink, { id: "search", to: "https://google.com", target: "_blank", iconComponent: SearchIcon, hint: "Search: for all the questions", tooltip: "Search", icon: SvgSearch, iconActive: SvgSearch }), _jsx(CallsNavigationTrigger, {}), _jsx(HeaderNavigationLink, { id: "titanAdvisor", to: "titanAdvisor", iconName: "rocket", iconClassName: Styles.rocketIcon, icon: SvgRocket, iconActive: SvgRocketActive }), _jsx(HeaderNavigationLink, { id: "settings", to: "settings", target: "_blank", iconName: "settings", "aria-label": "search", hint: "Settings", icon: SvgSettings, iconActive: SvgSettingsActive }), _jsxs(ProfileDropdown, { children: [_jsx(ProfileDropdown.Link, { id: "tasks", to: "https://googgle.com", counter: 10, children: "Task Management" }), _jsx(ProfileDropdown.Divider, {}), _jsxs(ProfileDropdown.Link, { id: "sign-out", to: "https://googgle.com", children: ["Sign Out", ' ', _jsx("span", { className: "c-neutral-100 m-l-half t-truncate", children: "James Bond" })] }), _jsx(ProfileDropdown.Section, { id: "userid", className: "c-neutral-100 fs-1", children: "User ID: 007" })] })] }), center: _jsx(TextField, { placeholder: "Search smth", size: "small", className: "w-100-i" }), centerClassName: "d-f align-items-center p-x-1" }));
-export const WithAllMonolithDataCommercial = () => (_jsx(HeaderNavigationTiny, { className: "border-bottom", left: _jsxs(Flex, { alignItems: "center", children: [_jsx(LogoTitan, { mantleFill: "#2270EE", className: "p-x-half", size: 48 }), _jsx(LogoTitanTitle, { children: "Commercial" })] }), leftClassName: "d-f align-items-center", right: _jsxs(Fragment, { children: [_jsx(TimeZoneOffset, {}), _jsx(HeaderNavigationLink, { id: "search", to: "https://google.com", target: "_blank", iconComponent: SearchIcon, hint: "Search: for all the questions", icon: SvgSearch, iconActive: SvgSearch }), _jsx(CallsNavigationTrigger, {}), _jsx(HeaderNavigationLink, { id: "titanAdvisor", to: "titanAdvisor", iconName: "rocket", iconClassName: Styles.rocketIcon, icon: SvgRocket, iconActive: SvgRocketActive }), _jsx(HeaderNavigationLink, { id: "settings", to: "settings", iconName: "settings", "aria-label": "search", hint: "Settings", tooltip: "Settings", icon: SvgSettings, iconActive: SvgSettingsActive }), _jsxs(ProfileDropdown, { children: [_jsx(ProfileDropdown.Link, { id: "tasks", to: "https://googgle.com", counter: 10, children: "Task Management" }), _jsx(ProfileDropdown.Divider, {}), _jsxs(ProfileDropdown.Link, { id: "sign-out", to: "https://googgle.com", children: ["Sign Out", ' ', _jsx("span", { className: "c-neutral-100 m-l-half t-truncate", children: "James Bond" })] }), _jsx(ProfileDropdown.Section, { id: "userid", className: "c-neutral-100 fs-1", children: "User ID: 007" })] })] }), center: _jsx(TextField, { placeholder: "Search smth", size: "small", className: "w-100-i" }), centerClassName: "d-f align-items-center p-x-1" }));
+export const WithAllMonolithDataCommercial = () => (_jsx(HeaderNavigationTiny, { className: "border-bottom z-global-nav", left: _jsxs(Flex, { alignItems: "center", children: [_jsx(LogoTitan, { mantleFill: "#2270EE", className: "p-x-half", size: 48 }), _jsx(LogoTitanTitle, { children: "Commercial" })] }), leftClassName: "d-f align-items-center", right: _jsxs(Fragment, { children: [_jsx(TimeZoneOffset, {}), _jsx(HeaderNavigationLink, { id: "search", to: "https://google.com", target: "_blank", iconComponent: SearchIcon, hint: "Search: for all the questions", icon: SvgSearch, iconActive: SvgSearch }), _jsx(CallsNavigationTrigger, {}), _jsx(HeaderNavigationLink, { id: "titanAdvisor", to: "titanAdvisor", iconName: "rocket", iconClassName: Styles.rocketIcon, icon: SvgRocket, iconActive: SvgRocketActive }), _jsx(HeaderNavigationLink, { id: "settings", to: "settings", iconName: "settings", "aria-label": "search", hint: "Settings", tooltip: "Settings", icon: SvgSettings, iconActive: SvgSettingsActive }), _jsxs(ProfileDropdown, { children: [_jsx(ProfileDropdown.Link, { id: "tasks", to: "https://googgle.com", counter: 10, children: "Task Management" }), _jsx(ProfileDropdown.Divider, {}), _jsxs(ProfileDropdown.Link, { id: "sign-out", to: "https://googgle.com", children: ["Sign Out", ' ', _jsx("span", { className: "c-neutral-100 m-l-half t-truncate", children: "James Bond" })] }), _jsx(ProfileDropdown.Section, { id: "userid", className: "c-neutral-100 fs-1", children: "User ID: 007" })] })] }), center: _jsx(TextField, { placeholder: "Search smth", size: "small", className: "w-100-i" }), centerClassName: "d-f align-items-center p-x-1" }));
 //# sourceMappingURL=header-navigation-tiny.stories.js.map

package/dist/components/left-navigation/header-navigation-tiny.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"header-navigation-tiny.stories.js","sourceRoot":"","sources":["../../../src/components/left-navigation/header-navigation-tiny.stories.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"header-navigation-tiny.stories.js","sourceRoot":"","sources":["../../../src/components/left-navigation/header-navigation-tiny.stories.tsx"],"names":[],"mappings":"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"}

package/dist/components/left-navigation/side-navigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"side-navigation.d.ts","sourceRoot":"","sources":["../../../src/components/left-navigation/side-navigation.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,EAAE,EAAwB,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,wBAAwB,EAAyB,MAAM,wBAAwB,CAAC;AAMzF,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,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,wBAAwB,EAAE,CAAC;IACtC,uBAAuB;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4BAA4B;IAC5B,gBAAgB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;CAC7C;AAED,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAqDlD,CAAC;AAgFF,qCAAqC;AACrC,eAAO,MAAM,2BAA2B,EAAE,EAAE,CAAC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;CAC7C,CAgBI,CAAC"}
+{"version":3,"file":"side-navigation.d.ts","sourceRoot":"","sources":["../../../src/components/left-navigation/side-navigation.tsx"],"names":[],"mappings":"AAQA,OAAO,EAEH,EAAE,EAOL,MAAM,OAAO,CAAC;AACf,OAAO,EACH,wBAAwB,EAI3B,MAAM,wBAAwB,CAAC;AAMhC,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,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,wBAAwB,EAAE,CAAC;IACtC,uBAAuB;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4BAA4B;IAC5B,gBAAgB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;CAC7C;AAED,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CA8DlD,CAAC;AAqNF,qCAAqC;AACrC,eAAO,MAAM,2BAA2B,EAAE,EAAE,CAAC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;CAC7C,CAgBI,CAAC"}

package/dist/components/left-navigation/side-navigation.js

@@ -1,24 +1,59 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Icon } from '@servicetitan/anvil2';
+import { Icon, Popover, Text } from '@servicetitan/anvil2';
+import SvgGroupCollapse from '@servicetitan/anvil2/assets/icons/material/round/expand_less.svg';
+import SvgGroupExpand from '@servicetitan/anvil2/assets/icons/material/round/expand_more.svg';
 import SvgCollapse from '@servicetitan/anvil2/assets/icons/st/gnav_menu_collapse.svg';
 import SvgExpand from '@servicetitan/anvil2/assets/icons/st/gnav_menu_expand.svg';
+import { Collapsible, Headline } from '@servicetitan/design-system';
 import classNames from 'classnames';
-import { Fragment, useContext } from 'react';
+import { Fragment, useCallback, useContext, useState, } from 'react';
 import { NavigationComponentContext } from '../../utils/navigation-context';
 import { CounterTag } from '../counter-tag';
 import * as Styles from './side-navigation.module.less';
 import { withTooltip } from './with-tooltip';
 export const SideNavigation = ({ className, expanded, id, items, itemsTop, onExpandedChange, }) => {
     const NavigationComponent = useContext(NavigationComponentContext);
-    return (_jsxs("div", { className: classNames(Styles.sideNav, expanded ? Styles.sideNavExpanded : Styles.sideNavSlim, className), id: id, "data-cy": "side-navigation", children: [!!(itemsTop === null || itemsTop === void 0 ? void 0 : itemsTop.length) && (_jsxs(Fragment, { children: [_jsx("div", { className: Styles.sideNavTop, "data-cy": "navigation-items-top", children: itemsTop.map(item => (_jsx(SideNavigationItem, { expanded: expanded, navigationComponent: NavigationComponent, ...item }, item.id))) }), _jsx("div", { className: Styles.divider })] })), _jsx("div", { className: Styles.sideNavContent, "data-cy": "navigation-items", children: items === null || items === void 0 ? void 0 : items.map(item => (_jsx(SideNavigationItem, { expanded: expanded, navigationComponent: NavigationComponent, ...item }, item.id))) }), _jsx("div", { className: Styles.divider }), _jsx("div", { className: Styles.sideNavBottom, children: _jsx(SideNavigationOptionsToggle, { expanded: expanded, onExpandedChange: onExpandedChange }) })] }));
+    return (_jsxs("div", { className: classNames(Styles.sideNav, expanded ? Styles.sideNavExpanded : Styles.sideNavSlim, className), id: id, "data-cy": "side-navigation", children: [!!(itemsTop === null || itemsTop === void 0 ? void 0 : itemsTop.length) && (_jsxs(Fragment, { children: [_jsx("div", { className: Styles.sideNavTop, "data-cy": "navigation-items-top", children: itemsTop.map(item => (_jsx(SideNavigationItem, { expanded: expanded, navigationComponent: NavigationComponent, ...item }, item.id))) }), _jsx("div", { className: Styles.divider })] })), _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, navigationComponent: NavigationComponent, ...item }, item.id)) : (_jsx(SideNavigationItem, { expanded: expanded, navigationComponent: NavigationComponent, ...item }, item.id))) }), _jsx("div", { className: Styles.divider }), _jsx("div", { className: Styles.sideNavBottom, children: _jsx(SideNavigationOptionsToggle, { expanded: expanded, onExpandedChange: onExpandedChange }) })] }));
 };
 /** Side Navigation menu item */
-const SideNavigationItem = ({ id, to, title, hint, counter, className, iconClassName, iconComponent: IconComponent, icon, iconActive, isActive, navigationComponent: NavigationComponent, expanded, }) => {
+const SideNavigationItem = ({ id, submenuExpanded, to, title, hint, counter, className, iconClassName, iconComponent: IconComponent, icon, iconActive, isActive, navigationComponent: NavigationComponent, expanded, }) => {
     const iconSwitch = !!icon && !!iconActive && !IconComponent;
+    const hasSubmenu = submenuExpanded === true || submenuExpanded === false;
     return (_jsxs(NavigationComponent, { "data-cy": `navigation-item-${id}`, "data-pendo": `navigation-item-${id}`, to: to, title: hint, className: classNames(Styles.navigationItem, className, {
             [Styles.navigationItemActive]: isActive === true,
             [Styles.navigationItemIconSwitch]: iconSwitch,
-        }), isActive: typeof isActive === 'function' ? isActive : undefined, activeClassName: Styles.navigationItemActive, children: [_jsxs("div", { className: Styles.navigationItemIconWrapper, children: [IconComponent ? (_jsx("i", { className: classNames(Styles.navigationIcon, iconClassName), children: _jsx(IconComponent, {}) })) : (_jsxs(Fragment, { children: [icon && (_jsx(Icon, { svg: icon, className: classNames(Styles.navigationIcon, Styles.navigationIconInactive, iconClassName) })), iconActive && (_jsx(Icon, { svg: iconActive, className: classNames(Styles.navigationIcon, Styles.navigationIconActive, iconClassName) }))] })), !!expanded && _jsx("div", { className: Styles.navigationItemText, children: title }), !!counter && (_jsx(CounterTag, { data: counter, className: Styles.navigationItemCounter }))] }), !expanded && _jsx("div", { className: Styles.navigationItemText, children: title })] }, id));
+        }), isActive: typeof isActive === 'function' ? isActive : undefined, activeClassName: Styles.navigationItemActive, children: [_jsxs("div", { className: Styles.navigationItemIconWrapper, children: [IconComponent ? (_jsx("i", { className: classNames(Styles.navigationIcon, iconClassName), children: _jsx(IconComponent, {}) })) : (_jsxs(Fragment, { children: [icon && (_jsx(Icon, { svg: icon, className: classNames(Styles.navigationIcon, Styles.navigationIconInactive, iconClassName) })), iconActive && (_jsx(Icon, { svg: iconActive, className: classNames(Styles.navigationIcon, Styles.navigationIconActive, iconClassName) }))] })), !!expanded && _jsx("div", { className: Styles.navigationItemText, children: title }), !!counter && (_jsx(CounterTag, { data: counter, className: Styles.navigationItemCounter })), hasSubmenu && !!expanded && (_jsx(Icon, { svg: submenuExpanded ? SvgGroupCollapse : SvgGroupExpand, className: Styles.navigationItemGroupToggle }))] }), !expanded && (_jsx("div", { className: classNames(Styles.navigationItemText, {
+                    [Styles.navigationItemTextSmall]: title.length >= 10,
+                }), children: title }))] }, id));
+};
+const submenuPopoverStyles = { '--background-color-strong': '#24323C' };
+/** Side Navigation menu item */
+const SideNavigationGroupItem = ({ ...props }) => {
+    var _a, _b, _c, _d;
+    const [submenuExpanded, setSubmenuExpanded] = useState(false);
+    const triggerClick = useCallback((e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        if (props.expanded) {
+            setSubmenuExpanded(exp => !exp);
+        }
+    }, [props.expanded]);
+    return props.expanded ? (_jsxs(Fragment, { children: [_jsx("div", { onClickCapture: triggerClick, children: _jsx(SideNavigationItem, { ...props, submenuExpanded: submenuExpanded }) }), _jsx(Collapsible, { open: submenuExpanded, animate: true, children: _jsx("div", { className: Styles.submenu, children: _jsx(SideNavigationGroupContent, { groups: (_b = (_a = props.submenu) === null || _a === void 0 ? void 0 : _a.groups) !== null && _b !== void 0 ? _b : [], navigationComponent: props.navigationComponent }) }) })] })) : (_jsxs(Popover, { placement: "right-start", openOnHover: true, children: [_jsx(Popover.Trigger, { children: (triggerProps) => (_jsx("div", { ...triggerProps, onClickCapture: triggerClick, children: _jsx(SideNavigationItem, { ...props }) })) }), _jsx(Popover.Content, { style: submenuPopoverStyles, 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: (_d = (_c = props.submenu) === null || _c === void 0 ? void 0 : _c.groups) !== null && _d !== void 0 ? _d : [], navigationComponent: props.navigationComponent })] }) })] }));
+};
+const SideNavigationGroupContent = ({ groups, navigationComponent, }) => {
+    return (_jsx(Fragment, { children: groups.reduce((out, group) => {
+            if (!group.links.length) {
+                return out;
+            }
+            out.push(_jsx(Text, { variant: "eyebrow", className: Styles.submenuGroupHeader, children: group.title }, ":group:title"));
+            out.push(...group.links.map(link => (_jsx(SideNavigationGroupLink, { ...link, navigationComponent: navigationComponent }, link.id))));
+            return out;
+        }, []) }));
+};
+const SideNavigationGroupLink = ({ id, title, to, isActive, navigationComponent: NavigationComponent, }) => {
+    return (_jsx(NavigationComponent, { "data-cy": `navigation-item-${id}`, "data-pendo": `navigation-item-${id}`, to: to, className: classNames(Styles.submenuLink, {
+            [Styles.submenuLinkActive]: isActive === true,
+        }), isActive: typeof isActive === 'function' ? isActive : undefined, activeClassName: Styles.submenuLinkActive, children: title }, id));
 };
 /** Side Navigation options toggle */
 export const SideNavigationOptionsToggle = ({ expanded, onExpandedChange }) => withTooltip(_jsxs("div", { "data-cy": "navigation-left-options", "data-pendo": "navigation-left-options", className: classNames(Styles.optionsItem), onClick: () => onExpandedChange(!expanded), children: [_jsx("div", { className: Styles.optionsIconWrapper, children: _jsx(Icon, { className: Styles.optionsIcon, svg: expanded ? SvgCollapse : SvgExpand }) }), !!expanded && _jsx("span", { className: Styles.optionsItemText, children: "Collapse Menu" })] }), expanded ? undefined : 'Expand Menu', 'right');

package/dist/components/left-navigation/side-navigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"side-navigation.js","sourceRoot":"","sources":["../../../src/components/left-navigation/side-navigation.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"side-navigation.js","sourceRoot":"","sources":["../../../src/components/left-navigation/side-navigation.tsx"],"names":[],"mappings":"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"}

package/dist/components/left-navigation/side-navigation.module.less

@@ -4,7 +4,7 @@
 @text-color: var(--colorsTextInverted, @color-white);
 @text-color-active: var(--colorsTextPrimarySubdued, @color-blue-300);
 @border-color: var(--colorsTextOnGrey, @color-neutral-200);
-@bg-color: var(--colorsSurfaceInvertedStrong, @color-neutral-400);
+@bg-color: #0f1d26;
 @bg-color-hover: rgba(255, 255, 255, 0.08);
 @bg-color-active: rgba(120, 187, 250, 0.2);
 
@@ -51,6 +51,10 @@
                 margin: 2px @spacing-half @spacing-0;
                 text-align: center;
             }
+
+            .navigation-item-text.navigation-item-text-small {
+                font-size: 10.5px;
+            }
         }
 
         .options-item {
@@ -75,7 +79,7 @@
 
             .navigation-item-icon-wrapper {
                 flex: 1;
-                padding: @spacing-1;
+                padding: @spacing-1 @spacing-half;
             }
 
             .navigation-item-text {
@@ -187,6 +191,11 @@
         font-weight: @font-weight-semibold;
     }
 
+    .navigation-item-group-toggle[data-anv][data-anv] {
+        color: inherit;
+        font-weight: @font-weight-semibold;
+    }
+
     .navigation-icon[data-anv][data-anv] {
         height: 24px;
         width: 24px;
@@ -199,6 +208,114 @@
     }
 }
 
+.submenu {
+    margin-left: @spacing-3;
+    padding-left: @spacing-1;
+    padding-right: @spacing-1;
+    margin-bottom: @spacing-1;
+    position: relative;
+
+    &:before {
+        content: '';
+        position: absolute;
+        border-left: 1px solid @color-neutral-100;
+        width: 1px;
+        top: @spacing-2;
+        bottom: @spacing-1;
+        left: 0;
+    }
+
+    .submenu-group-header[data-anv][data-anv] {
+        padding-top: @spacing-2;
+        padding-bottom: @spacing-half;
+    }
+
+    .submenu-link {
+        padding: @spacing-1;
+    }
+
+    .submenu-link-active {
+        position: relative;
+    }
+
+    .submenu-link-active:before {
+        content: '';
+        position: absolute;
+        background-color: @text-color-active;
+        width: 3px;
+        top: @spacing-1;
+        bottom: @spacing-1;
+        left: -12px;
+    }
+
+    .submenu-link:before:not(.submenu-link-active) {
+        background-color: @bg-color-hover;
+    }
+
+    > *,
+    > *[data-anv][data-anv] {
+        border-left: 3px solid transparent;
+        padding-left: @spacing-1;
+    }
+
+    > *:last-child {
+        margin-bottom: @spacing-0;
+    }
+}
+
+.submenu-popover {
+    margin-left: -@spacing-1;
+    margin-right: -@spacing-1;
+    min-width: 240px;
+
+    .submenu-group-header[data-anv][data-anv] {
+        margin-top: @spacing-2;
+        padding-bottom: @spacing-half;
+    }
+
+    .submenu-link {
+        padding-top: @spacing-1;
+        padding-bottom: @spacing-1;
+    }
+
+    .submenu-link-active {
+        background-color: @bg-color-active;
+    }
+    .submenu-link:hover:not(.submenu-link-active) {
+        background-color: @bg-color-hover;
+    }
+
+    > *,
+    > *[data-anv][data-anv] {
+        padding-left: @spacing-1;
+        padding-right: @spacing-1;
+    }
+}
+
+.submenu,
+.submenu-popover {
+    display: flex;
+    flex-direction: column;
+
+    .submenu-group-header[data-anv][data-anv] {
+        color: @color-neutral-70;
+    }
+
+    .submenu-link {
+        color: @text-color;
+        font-size: @typescale-2;
+        border-radius: @border-radius-2;
+    }
+
+    .submenu-link-active {
+        color: @text-color-active;
+    }
+
+    .submenu-link:hover:not(.submenu-link-active) {
+        background-color: @bg-color-hover;
+    }
+}
+
 .options-item {
     font-family: @base-font-family;
     color: @text-color;

package/dist/components/left-navigation/side-navigation.stories.d.ts

@@ -7,4 +7,5 @@ declare const _default: {
 export default _default;
 export declare const DefaultSideNavigation: () => import("react/jsx-runtime").JSX.Element;
 export declare const SideNavigationLinksOnly: () => import("react/jsx-runtime").JSX.Element;
+export declare const SideNavigationWithSubmenu: () => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=side-navigation.stories.d.ts.map

package/dist/components/left-navigation/side-navigation.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"side-navigation.stories.d.ts","sourceRoot":"","sources":["../../../src/components/left-navigation/side-navigation.stories.tsx"],"names":[],"mappings":";;;;;;AAYA,wBAKE;AAEF,eAAO,MAAM,qBAAqB,+CAyBjC,CAAC;AAEF,eAAO,MAAM,uBAAuB,+CAwBnC,CAAC"}
+{"version":3,"file":"side-navigation.stories.d.ts","sourceRoot":"","sources":["../../../src/components/left-navigation/side-navigation.stories.tsx"],"names":[],"mappings":";;;;;;AAiBA,wBAKE;AAEF,eAAO,MAAM,qBAAqB,+CAyBjC,CAAC;AAEF,eAAO,MAAM,uBAAuB,+CAwBnC,CAAC;AAEF,eAAO,MAAM,yBAAyB,+CAwBrC,CAAC"}

package/dist/components/left-navigation/side-navigation.stories.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Page, Sidebar } from '@servicetitan/design-system';
 import { useState } from 'react';
-import { items, withAnvil, withMemoryRouter } from '../../test/data';
+import { LocationInfo, items, withAnvil, withMemoryRouter } from '../../test/data';
 import { SideNavigation } from './';
 const layout = (Story) => {
-    return (_jsxs("div", { className: "d-f border", style: { height: '800px' }, children: [_jsx(Story, {}), _jsx("div", { className: "flex-grow-1 flex-basis-0" })] }));
+    return (_jsxs("div", { className: "d-f border", style: { height: '800px' }, children: [_jsx(Story, {}), _jsx("div", { className: "flex-grow-1 flex-basis-0", children: _jsx(Page, { sidebar: _jsx(Sidebar, { localStorageKey: "undefined", children: "qq" }), children: _jsx(LocationInfo, {}) }) })] }));
 };
 export default {
     title: 'Navigation/SideNavigation',
@@ -44,4 +45,20 @@ export const SideNavigationLinksOnly = () => {
             items.projects,
         ] }));
 };
+export const SideNavigationWithSubmenu = () => {
+    const [expanded, setExpanded] = useState(false);
+    return (_jsx(SideNavigation, { expanded: expanded, onExpandedChange: setExpanded, items: [
+            items.dashboard,
+            items.calls,
+            items.schedule,
+            items.dispatch,
+            items.accountingWithSubmenu,
+            items.purchasingWithSubmenu,
+            items.followUpsWithSubmenu,
+            items.reports,
+            items.marketing,
+            items.priceBook,
+            items.projects,
+        ] }));
+};
 //# sourceMappingURL=side-navigation.stories.js.map

package/dist/components/left-navigation/side-navigation.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"side-navigation.stories.js","sourceRoot":"","sources":["../../../src/components/left-navigation/side-navigation.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAiB,QAAQ,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACrE,OAAO,EAAE,cAAc,EAAE,MAAM,IAAI,CAAC;AAEpC,MAAM,MAAM,GAAG,CAAC,KAAoB,EAAE,EAAE;IACpC,OAAO,CACH,eAAK,SAAS,EAAC,YAAY,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,aAClD,KAAC,KAAK,KAAG,EACT,cAAK,SAAS,EAAC,0BAA0B,GAAG,IAC1C,CACT,CAAC;AACN,CAAC,CAAC;AACF,eAAe;IACX,KAAK,EAAE,2BAA2B;IAClC,SAAS,EAAE,cAAc;IACzB,UAAU,EAAE,CAAC,MAAM,EAAE,gBAAgB,EAAE,SAAS,CAAC;IACjD,UAAU,EAAE,EAAE;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,EAAE;IACtC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChD,OAAO,CACH,KAAC,cAAc,IACX,QAAQ,EAAE,QAAQ,EAClB,gBAAgB,EAAE,WAAW,EAC7B,KAAK,EAAE;YACH,KAAK,CAAC,SAAS;YACf,KAAK,CAAC,QAAQ;YACd,KAAK,CAAC,KAAK;YACX,KAAK,CAAC,UAAU;YAChB,KAAK,CAAC,QAAQ;YAEd,KAAK,CAAC,KAAK;YACX,KAAK,CAAC,SAAS;YACf,KAAK,CAAC,SAAS;YAEf,KAAK,CAAC,SAAS;YACf,KAAK,CAAC,SAAS;YACf,KAAK,CAAC,WAAW;YACjB,KAAK,CAAC,OAAO;SAChB,EACD,QAAQ,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,GACzB,CACL,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,EAAE;IACxC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChD,OAAO,CACH,KAAC,cAAc,IACX,QAAQ,EAAE,QAAQ,EAClB,gBAAgB,EAAE,WAAW,EAC7B,KAAK,EAAE;YACH,KAAK,CAAC,SAAS;YACf,KAAK,CAAC,KAAK;YACX,KAAK,CAAC,QAAQ;YACd,KAAK,CAAC,QAAQ;YAEd,KAAK,CAAC,UAAU;YAChB,KAAK,CAAC,SAAS;YAEf,KAAK,CAAC,SAAS;YACf,KAAK,CAAC,OAAO;YACb,KAAK,CAAC,SAAS;YACf,KAAK,CAAC,SAAS;YAEf,KAAK,CAAC,QAAQ;SACjB,GACH,CACL,CAAC;AACN,CAAC,CAAC"}
+{"version":3,"file":"side-navigation.stories.js","sourceRoot":"","sources":["../../../src/components/left-navigation/side-navigation.stories.tsx"],"names":[],"mappings":"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"}

package/dist/test/data.d.ts

@@ -1,5 +1,6 @@
 import { HeaderNavigationItemData, NavLinkComponentProps } from '../utils/navigation';
 export declare const NavLinkMock: import("react").ForwardRefExoticComponent<Omit<NavLinkComponentProps, "ref"> & import("react").RefAttributes<any>>;
+export declare const LocationInfo: () => import("react/jsx-runtime").JSX.Element;
 export declare const withMemoryRouter: (Story: any) => import("react/jsx-runtime").JSX.Element;
 export declare const withAnvil: (Story: any) => import("react/jsx-runtime").JSX.Element;
 export declare const InventoryIcon: () => import("react/jsx-runtime").JSX.Element;
@@ -12,9 +13,12 @@ export declare const items: {
     dispatch: HeaderNavigationItemData;
     fleet: HeaderNavigationItemData;
     followUps: HeaderNavigationItemData;
+    followUpsWithSubmenu: HeaderNavigationItemData;
     inventory: HeaderNavigationItemData;
     purchasing: HeaderNavigationItemData;
+    purchasingWithSubmenu: HeaderNavigationItemData;
     accounting: HeaderNavigationItemData;
+    accountingWithSubmenu: HeaderNavigationItemData;
     marketing: HeaderNavigationItemData;
     priceBook: HeaderNavigationItemData;
     pointOfSale: HeaderNavigationItemData;

package/dist/test/data.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data.d.ts","sourceRoot":"","sources":["../../src/test/data.tsx"],"names":[],"mappings":"AAwCA,OAAO,EAAE,wBAAwB,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAItF,eAAO,MAAM,WAAW,oHAwBvB,CAAC;AAEF,eAAO,MAAM,gBAAgB,UAAW,GAAG,4CAM1C,CAAC;AAEF,eAAO,MAAM,SAAS,UAAW,GAAG,4CAInC,CAAC;AAEF,eAAO,MAAM,aAAa,+CAKzB,CAAC;AAEF,eAAO,MAAM,UAAU,+CAetB,CAAC;AAeF,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;CAkFjB,CAAC;AAEF,eAAO,MAAM,sBAAsB,+CAuBlC,CAAC"}
+{"version":3,"file":"data.d.ts","sourceRoot":"","sources":["../../src/test/data.tsx"],"names":[],"mappings":"AAwCA,OAAO,EACH,wBAAwB,EAGxB,qBAAqB,EACxB,MAAM,qBAAqB,CAAC;AAI7B,eAAO,MAAM,WAAW,oHAyBvB,CAAC;AAEF,eAAO,MAAM,YAAY,+CAIxB,CAAC;AAEF,eAAO,MAAM,gBAAgB,UAAW,GAAG,4CAM1C,CAAC;AAEF,eAAO,MAAM,SAAS,UAAW,GAAG,4CAInC,CAAC;AAEF,eAAO,MAAM,aAAa,+CAKzB,CAAC;AAEF,eAAO,MAAM,UAAU,+CAetB,CAAC;AA6CF,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;CAmIjB,CAAC;AAEF,eAAO,MAAM,sBAAsB,+CAuBlC,CAAC"}

package/dist/test/data.js

@@ -30,7 +30,7 @@ import SvgScheduleActive from '@servicetitan/anvil2/assets/icons/st/gnav_schedul
 import SvgSchedule from '@servicetitan/anvil2/assets/icons/st/gnav_schedule_inactive.svg';
 import SvgTasksActive from '@servicetitan/anvil2/assets/icons/st/gnav_tasks_active.svg';
 import SvgTasks from '@servicetitan/anvil2/assets/icons/st/gnav_tasks_inactive.svg';
-import { Popover } from '@servicetitan/design-system';
+import { BodyText, Popover } from '@servicetitan/design-system';
 import classNames from 'classnames';
 import { forwardRef, useState } from 'react';
 // needed only for storybook and added in root dependencies
@@ -42,26 +42,53 @@ import * as Styles from './data-stories.module.less';
 export const NavLinkMock = forwardRef(({ to, children, activeClassName, className, isActive, ...rest }, ref) => {
     const history = useHistory();
     const location = useLocation();
-    const linkActive = location.pathname.replace('/', '') === to;
-    return (_jsx("a", { ...rest, className: classNames(className, linkActive ? activeClassName : ''), href: to, onClick: e => {
+    const linkActive = location.pathname.startsWith(to);
+    return (_jsx("a", { ...rest, onClick: e => {
             e.preventDefault();
+            e.stopPropagation();
             if (!to.startsWith('http')) {
-                history.push(to);
+                history.replace(to);
             }
-        }, ref: ref, children: children }));
+        }, className: classNames(className, linkActive ? activeClassName : ''), href: to, ref: ref, children: children }));
 });
+export const LocationInfo = () => {
+    const location = useLocation();
+    return _jsxs(BodyText, { children: ["current location - ", location.pathname] });
+};
 export const withMemoryRouter = (Story) => (_jsx(MemoryRouter, { children: _jsx(NavigationComponentContext.Provider, { value: NavLinkMock, children: _jsx(Story, {}) }) }));
 export const withAnvil = (Story) => (_jsx(AnvilProvider, { className: Styles.fixIcons, children: _jsx(Story, {}) }));
 export const InventoryIcon = () => (_jsxs("svg", { width: "20", xmlns: "http://www.w3.org/2000/svg", viewBox: "-293 385 24 24", fill: "currentColor", children: [_jsx("polyline", { points: "-288,400.9 -282,404.3 -282,397.6 -288,394.2 -288,400.9 " }), _jsx("path", { d: "M-272,401.5c0,0.4-0.2,0.7-0.5,0.9l-7.9,4.4c-0.2,0.1-0.4,0.2-0.6,0.2s-0.4-0.1-0.6-0.2l-7.9-4.4c-0.3-0.2-0.5-0.5-0.5-0.9v-9c0-0.4,0.2-0.7,0.5-0.9l7.9-4.4c0.2-0.1,0.4-0.2,0.6-0.2s0.4,0.1,0.6,0.2l7.9,4.4c0.3,0.2,0.5,0.5,0.5,0.9V401.5 M-287,392.5 l6,3.4l5.9-3.3l-5.9-3.4L-287,392.5 M-274,400.9v-6.7l-6,3.4v6.7L-274,400.9z" })] }));
 export const SearchIcon = () => (_jsx("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("g", { transform: "translate(0,4)", children: _jsx("path", { d: "M0 15.7992V13.9992H12V15.7992H0ZM0 9.49922V7.69922H6V9.49922H0ZM0 3.19922V1.39922H6V3.19922H0ZM22.74 15.7992L17.94 10.9992C17.42 11.3992 16.86 11.6992 16.26 11.8992C15.66 12.0992 15.04 12.1992 14.4 12.1992C12.74 12.1992 11.325 11.6142 10.155 10.4442C8.985 9.27422 8.4 7.85922 8.4 6.19922C8.4 4.53922 8.985 3.12422 10.155 1.95422C11.325 0.784219 12.74 0.199219 14.4 0.199219C16.06 0.199219 17.475 0.784219 18.645 1.95422C19.815 3.12422 20.4 4.53922 20.4 6.19922C20.4 6.83922 20.3 7.45922 20.1 8.05922C19.9 8.65922 19.6 9.21922 19.2 9.73922L24 14.5392L22.74 15.7992ZM14.393 10.3992C15.5577 10.3992 16.55 9.99157 17.37 9.17627C18.19 8.36099 18.6 7.37099 18.6 6.20627C18.6 5.04157 18.1923 4.04922 17.377 3.22922C16.5618 2.40922 15.5718 1.99922 14.407 1.99922C13.2423 1.99922 12.25 2.40687 11.43 3.22217C10.61 4.03745 10.2 5.02745 10.2 6.19217C10.2 7.35687 10.6077 8.34922 11.423 9.16922C12.2382 9.98922 13.2282 10.3992 14.393 10.3992Z", fill: "white" }) }) }));
 const getItem = (id, data) => ({
     id,
-    to: id,
+    to: '/' + id,
     title: id[0].toUpperCase() + id.substring(1),
     hint: id,
     icon: undefined,
     iconActive: undefined,
     ...(data !== null && data !== void 0 ? data : {}),
+    submenu: data.submenu
+        ? {
+            ...data.submenu,
+            groups: data.submenu.groups.map(group => ({
+                ...group,
+                links: group.links.map(link => ({
+                    ...link,
+                    to: `/${id}/${link.to}`,
+                })),
+            })),
+        }
+        : undefined,
+});
+const getSubItem = (id, data) => ({
+    id,
+    to: id,
+    title: id[0].toUpperCase() + id.substring(1),
+    ...(data !== null && data !== void 0 ? data : {}),
+});
+const getGroup = (title, links) => ({
+    title,
+    links,
 });
 export const items = {
     calendar: getItem('calendar', {
@@ -103,23 +130,72 @@ export const items = {
         iconActive: SvgFollowUpActive,
         title: 'Follow Up',
     }),
+    followUpsWithSubmenu: getItem('followUps', {
+        iconName: 'flag',
+        icon: SvgFollowUp,
+        iconActive: SvgFollowUpActive,
+        title: 'Follow Up',
+        submenu: {
+            groups: [
+                getGroup('', [
+                    getSubItem('estimates', { title: 'Unsold Estimates' }),
+                    getSubItem('sold', { title: 'Sold Estimates' }),
+                    getSubItem('surveys', { title: 'Surveys' }),
+                ]),
+            ],
+        },
+    }),
     inventory: getItem('inventory', {
         iconName: 'toys',
         icon: SvgInventory,
         iconActive: SvgInventoryActive,
     }),
     purchasing: getItem('purchasing', { iconComponent: InventoryIcon }),
+    purchasingWithSubmenu: getItem('purchasing', {
+        iconName: 'toys',
+        icon: SvgInventory,
+        iconActive: SvgInventoryActive,
+        submenu: {
+            groups: [
+                getGroup('Purchase', [
+                    getSubItem('repl', { title: 'Replenishment' }),
+                    getSubItem('orders', { title: 'Purchase Orders' }),
+                    getSubItem('receipts', { title: 'Receipts' }),
+                    getSubItem('returns', { title: 'Returns' }),
+                ]),
+            ],
+        },
+    }),
     accounting: getItem('accounting', {
         iconName: 'assignment',
         icon: SvgAccounting,
         iconActive: SvgAccountingActive,
     }),
+    accountingWithSubmenu: getItem('accounting', {
+        iconName: 'assignment',
+        icon: SvgAccounting,
+        iconActive: SvgAccountingActive,
+        submenu: {
+            groups: [
+                getGroup('Accounts Receivable', [
+                    getSubItem('ar', { title: 'AR Management' }),
+                    getSubItem('export', { title: 'Batch/Export Transactions' }),
+                    getSubItem('invoices', { title: 'Invoices' }),
+                    getSubItem('payments', { title: 'Customer Payments' }),
+                    getSubItem('deposits', { title: 'Bank Deposits' }),
+                ]),
+                getGroup('Accounts Payable', [getSubItem('bills', { title: 'Bills' })]),
+                getGroup('Financing', [getSubItem('dashboard', { title: 'Dashboard' })]),
+                getGroup('Others', [getSubItem('at', { title: 'Accounting Audit Trail' })]),
+            ],
+        },
+    }),
     marketing: getItem('marketing', {
         iconName: 'bullhorn',
         icon: SvgMarketing,
         iconActive: SvgMarketingActive,
     }),
-    priceBook: getItem('priceBook', {
+    priceBook: getItem('pricebook', {
         iconName: 'book',
         icon: SvgPriceBook,
         iconActive: SvgPriceBookActive,