@servicetitan/navigation 3.3.0 → 4.1.0

package/dist/index.d.ts

@@ -4,7 +4,8 @@ export * from './components/logo/logo-company-title';
 export * from './components/logo/logo-titan';
 export * from './components/logo/logo-titan-text';
 export * from './components/counter-tag';
-export * from './components/side-navigation';
+export * from './components/left-navigation';
+export * from './components/links';
 export * from './utils/navigation';
 export * from './utils/with-tooltip';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC;AAC/C,cAAc,gDAAgD,CAAC;AAC/D,cAAc,sCAAsC,CAAC;AACrD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,mCAAmC,CAAC;AAClD,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC;AAC/C,cAAc,gDAAgD,CAAC;AAC/D,cAAc,sCAAsC,CAAC;AACrD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,mCAAmC,CAAC;AAClD,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC"}

package/dist/index.js

@@ -4,7 +4,8 @@ export * from './components/logo/logo-company-title';
 export * from './components/logo/logo-titan';
 export * from './components/logo/logo-titan-text';
 export * from './components/counter-tag';
-export * from './components/side-navigation';
+export * from './components/left-navigation';
+export * from './components/links';
 export * from './utils/navigation';
 export * from './utils/with-tooltip';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC;AAC/C,cAAc,gDAAgD,CAAC;AAC/D,cAAc,sCAAsC,CAAC;AACrD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,mCAAmC,CAAC;AAClD,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC;AAC/C,cAAc,gDAAgD,CAAC;AAC/D,cAAc,sCAAsC,CAAC;AACrD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,mCAAmC,CAAC;AAClD,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC"}

package/dist/test/data-stories.module.less

@@ -0,0 +1,8 @@
+// emulate temp anvil2 hotfix from monolith
+.fix-icons {
+    [data-anv][data-anv] {
+        all: revert-layer;
+        line-height: revert-layer;
+        -webkit-font-smoothing: auto;
+    }
+}

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

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import { HeaderNavigationItemData, NavLinkComponentProps } from '../utils/navigation';
+export declare const NavLinkMock: import("react").ForwardRefExoticComponent<Omit<NavLinkComponentProps, "ref"> & import("react").RefAttributes<any>>;
+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;
+export declare const SearchIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const items: {
+    calendar: HeaderNavigationItemData;
+    calls: HeaderNavigationItemData;
+    dashboard: HeaderNavigationItemData;
+    dispatch: HeaderNavigationItemData;
+    fleet: HeaderNavigationItemData;
+    followUps: HeaderNavigationItemData;
+    inventory: HeaderNavigationItemData;
+    purchasing: HeaderNavigationItemData;
+    accounting: HeaderNavigationItemData;
+    marketing: HeaderNavigationItemData;
+    priceBook: HeaderNavigationItemData;
+    pointOfSale: HeaderNavigationItemData;
+    projects: HeaderNavigationItemData;
+    reports: HeaderNavigationItemData;
+    tasks: HeaderNavigationItemData;
+};
+export declare const CallsNavigationTrigger: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=data.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data.stories.d.ts","sourceRoot":"","sources":["../../src/test/data.stories.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;;;;;;;;;;;;;;;;CA4EjB,CAAC;AAEF,eAAO,MAAM,sBAAsB,+CAuBlC,CAAC"}

package/dist/test/data.stories.js

@@ -0,0 +1,151 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AnvilProvider } from '@servicetitan/anvil2';
+import SvgPhone from '@servicetitan/anvil2/assets/icons/material/round/phone_disabled.svg';
+import SvgPhoneActive from '@servicetitan/anvil2/assets/icons/material/round/phone_enabled.svg';
+import SvgAccountingActive from '@servicetitan/anvil2/assets/icons/st/gnav_accounting_active.svg';
+import SvgAccounting from '@servicetitan/anvil2/assets/icons/st/gnav_accounting_inactive.svg';
+import SvgCallsActive from '@servicetitan/anvil2/assets/icons/st/gnav_calls_active.svg';
+import SvgCalls from '@servicetitan/anvil2/assets/icons/st/gnav_calls_inactive.svg';
+import SvgDashboardActive from '@servicetitan/anvil2/assets/icons/st/gnav_dashboard_active.svg';
+import SvgDashboard from '@servicetitan/anvil2/assets/icons/st/gnav_dashboard_inactive.svg';
+import SvgDispatchActive from '@servicetitan/anvil2/assets/icons/st/gnav_dispatch_active.svg';
+import SvgDispatch from '@servicetitan/anvil2/assets/icons/st/gnav_dispatch_inactive.svg';
+import SvgFleetProActive from '@servicetitan/anvil2/assets/icons/st/gnav_fleet_pro_active.svg';
+import SvgFleetPro from '@servicetitan/anvil2/assets/icons/st/gnav_fleet_pro_inactive.svg';
+import SvgFollowUpActive from '@servicetitan/anvil2/assets/icons/st/gnav_follow_up_active.svg';
+import SvgFollowUp from '@servicetitan/anvil2/assets/icons/st/gnav_follow_up_inactive.svg';
+import SvgInventoryActive from '@servicetitan/anvil2/assets/icons/st/gnav_inventory_active.svg';
+import SvgInventory from '@servicetitan/anvil2/assets/icons/st/gnav_inventory_inactive.svg';
+import SvgMarketingActive from '@servicetitan/anvil2/assets/icons/st/gnav_marketing_active.svg';
+import SvgMarketing from '@servicetitan/anvil2/assets/icons/st/gnav_marketing_inactive.svg';
+import SvgPosActive from '@servicetitan/anvil2/assets/icons/st/gnav_pos_active.svg';
+import SvgPos from '@servicetitan/anvil2/assets/icons/st/gnav_pos_inactive.svg';
+import SvgPriceBookActive from '@servicetitan/anvil2/assets/icons/st/gnav_pricebook_active.svg';
+import SvgPriceBook from '@servicetitan/anvil2/assets/icons/st/gnav_pricebook_inactive.svg';
+import SvgProjectsActive from '@servicetitan/anvil2/assets/icons/st/gnav_projects_active.svg';
+import SvgProjects from '@servicetitan/anvil2/assets/icons/st/gnav_projects_inactive.svg';
+import SvgReportsActive from '@servicetitan/anvil2/assets/icons/st/gnav_reports_active.svg';
+import SvgReports from '@servicetitan/anvil2/assets/icons/st/gnav_reports_inactive.svg';
+import SvgScheduleActive from '@servicetitan/anvil2/assets/icons/st/gnav_schedule_active.svg';
+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 classNames from 'classnames';
+import { forwardRef, useState } from 'react';
+// needed only for storybook and added in root dependencies
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { MemoryRouter, useHistory, useLocation } from 'react-router-dom';
+import { HeaderNavigationTrigger } from '../components/links';
+import { NavigationComponentContext } from '../utils/navigation-context';
+import * as Styles from './data-stories.module.less';
+export const NavLinkMock = forwardRef((_a, ref) => {
+    var { to, children, activeClassName, className, isActive } = _a, rest = __rest(_a, ["to", "children", "activeClassName", "className", "isActive"]);
+    const history = useHistory();
+    const location = useLocation();
+    const linkActive = location.pathname.replace('/', '') === to;
+    return (_jsx("a", Object.assign({}, rest, { className: classNames(className, linkActive ? activeClassName : ''), href: to, onClick: e => {
+            e.preventDefault();
+            if (!to.startsWith('http')) {
+                history.push(to);
+            }
+        }, ref: ref, children: children })));
+});
+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) => (Object.assign({ id, to: id, title: id[0].toUpperCase() + id.substring(1), hint: id, icon: undefined, iconActive: undefined }, (data !== null && data !== void 0 ? data : {})));
+export const items = {
+    calendar: getItem('calendar', {
+        iconName: 'event',
+        icon: SvgSchedule,
+        iconActive: SvgScheduleActive,
+    }),
+    calls: getItem('calls', {
+        iconName: 'local_phone',
+        icon: SvgCalls,
+        iconActive: SvgCallsActive,
+        counter: 12,
+    }),
+    dashboard: getItem('dashboard', {
+        iconName: 'odometer',
+        icon: SvgDashboard,
+        iconActive: SvgDashboardActive,
+    }),
+    dispatch: getItem('dispatch', {
+        iconName: 'location_disabled',
+        icon: SvgDispatch,
+        iconActive: SvgDispatchActive,
+        counter: 1,
+    }),
+    fleet: getItem('fleet', {
+        iconName: 'fleet-pro',
+        icon: SvgFleetPro,
+        iconActive: SvgFleetProActive,
+        title: 'Fleet Pro',
+    }),
+    followUps: getItem('followUps', {
+        iconName: 'flag',
+        icon: SvgFollowUp,
+        iconActive: SvgFollowUpActive,
+        title: 'Follow Ups',
+    }),
+    inventory: getItem('inventory', {
+        iconName: 'toys',
+        icon: SvgInventory,
+        iconActive: SvgInventoryActive,
+    }),
+    purchasing: getItem('purchasing', { iconComponent: InventoryIcon }),
+    accounting: getItem('accounting', {
+        iconName: 'assignment',
+        icon: SvgAccounting,
+        iconActive: SvgAccountingActive,
+    }),
+    marketing: getItem('marketing', {
+        iconName: 'bullhorn',
+        icon: SvgMarketing,
+        iconActive: SvgMarketingActive,
+    }),
+    priceBook: getItem('priceBook', {
+        iconName: 'book',
+        icon: SvgPriceBook,
+        iconActive: SvgPriceBookActive,
+    }),
+    pointOfSale: getItem('pointOfSale', {
+        iconName: 'cash-register',
+        icon: SvgPos,
+        iconActive: SvgPosActive,
+    }),
+    projects: getItem('projects', {
+        iconName: 'folder_special',
+        icon: SvgProjects,
+        iconActive: SvgProjectsActive,
+    }),
+    reports: getItem('reports', {
+        iconName: 'folder_special',
+        icon: SvgReports,
+        iconActive: SvgReportsActive,
+    }),
+    tasks: getItem('tasks', {
+        iconName: 'format_list_bulleted',
+        icon: SvgTasks,
+        iconActive: SvgTasksActive,
+    }),
+};
+export const CallsNavigationTrigger = () => {
+    const [open, setOpen] = useState(false);
+    return (_jsx(Popover, { open: open, onClickOutside: () => setOpen(false), direction: "bl", trigger: _jsx(HeaderNavigationTrigger, { id: "dialpad", iconName: "phone", counter: 2, icon: SvgPhone, iconActive: SvgPhoneActive, onClick: () => setOpen(!open), isActive: open }), children: "calls content" }));
+};
+//# sourceMappingURL=data.stories.js.map

package/dist/test/data.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data.stories.js","sourceRoot":"","sources":["../../src/test/data.stories.tsx"],"names":[],"mappings":"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"}

package/dist/utils/navigation-context.d.ts

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { NavLinkComponentProps } from './navigation';
 export declare const DefaultNavLinkComponent: FC<NavLinkComponentProps>;
-export declare const NavLinkContext: import("react").Context<FC<NavLinkComponentProps>>;
-export declare const useNavLink: () => FC<NavLinkComponentProps>;
+export declare const NavigationComponentContext: import("react").Context<FC<NavLinkComponentProps>>;
+export declare const NavigationLegacyContext: import("react").Context<boolean>;
 //# sourceMappingURL=navigation-context.d.ts.map

package/dist/utils/navigation-context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"navigation-context.d.ts","sourceRoot":"","sources":["../../src/utils/navigation-context.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAA6B,MAAM,OAAO,CAAC;AAEtD,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAErD,eAAO,MAAM,uBAAuB,EAAE,EAAE,CAAC,qBAAqB,CAK7D,CAAC;AAEF,eAAO,MAAM,cAAc,oDAAyC,CAAC;AACrE,eAAO,MAAM,UAAU,iCAAmC,CAAC"}
+{"version":3,"file":"navigation-context.d.ts","sourceRoot":"","sources":["../../src/utils/navigation-context.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAiB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAErD,eAAO,MAAM,uBAAuB,EAAE,EAAE,CAAC,qBAAqB,CAK5B,CAAC;AAEnC,eAAO,MAAM,0BAA0B,oDAC8B,CAAC;AACtE,eAAO,MAAM,uBAAuB,kCAAuB,CAAC"}

package/dist/utils/navigation-context.js

@@ -1,7 +1,20 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext } from 'react';
-import { NavLink } from 'react-router-dom';
-export const DefaultNavLinkComponent = props => (_jsx(NavLink, Object.assign({}, props, { isActive: props.isActive && ((_, { pathname }) => props.isActive(pathname)) })));
-export const NavLinkContext = createContext(DefaultNavLinkComponent);
-export const useNavLink = () => useContext(NavLinkContext);
+import { createContext } from 'react';
+export const DefaultNavLinkComponent = (_a) => {
+    var { children, activeClassName, isActive } = _a, props = __rest(_a, ["children", "activeClassName", "isActive"]);
+    return _jsx("a", Object.assign({}, props, { children: children }));
+};
+export const NavigationComponentContext = createContext(DefaultNavLinkComponent);
+export const NavigationLegacyContext = createContext(false);
 //# sourceMappingURL=navigation-context.js.map

package/dist/utils/navigation-context.js.map

@@ -1 +1 @@
-{"version":3,"file":"navigation-context.js","sourceRoot":"","sources":["../../src/utils/navigation-context.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAG3C,MAAM,CAAC,MAAM,uBAAuB,GAA8B,KAAK,CAAC,EAAE,CAAC,CACvE,KAAC,OAAO,oBACA,KAAK,IACT,QAAQ,EAAE,KAAK,CAAC,QAAQ,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,QAAS,CAAC,QAAQ,CAAC,CAAC,IAC9E,CACL,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,aAAa,CAAC,uBAAuB,CAAC,CAAC;AACrE,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,EAAE,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC"}
+{"version":3,"file":"navigation-context.js","sourceRoot":"","sources":["../../src/utils/navigation-context.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAM,aAAa,EAAE,MAAM,OAAO,CAAC;AAG1C,MAAM,CAAC,MAAM,uBAAuB,GAA8B,CAAC,EAKlE,EAAE,EAAE;QAL8D,EAC/D,QAAQ,EACR,eAAe,EACf,QAAQ,OAEX,EADM,KAAK,cAJuD,2CAKlE,CADW;IACN,OAAA,4BAAO,KAAK,cAAG,QAAQ,IAAK,CAAA;CAAA,CAAC;AAEnC,MAAM,CAAC,MAAM,0BAA0B,GACnC,aAAa,CAA4B,uBAAuB,CAAC,CAAC;AACtE,MAAM,CAAC,MAAM,uBAAuB,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC"}

package/dist/utils/navigation.d.ts

@@ -1,3 +1,4 @@
+import { IconProps } from '@servicetitan/anvil2';
 import { IconPropsStrict } from '@servicetitan/design-system';
 import { FC, HTMLAttributeAnchorTarget, ReactNode } from 'react';
 import { CounterTagPropsType } from '../components/counter-tag';
@@ -18,6 +19,10 @@ export interface HeaderNavigationItemData {
     iconClassName?: string;
     /** anvil's icon name of item */
     iconName?: IconPropsStrict['name'];
+    /** svg icon (anvil2) of inactive item */
+    icon: IconProps['svg'] | undefined;
+    /** svg icon (anvil2) of active item */
+    iconActive: IconProps['svg'] | undefined;
     /** icon component of item (<svg />) */
     iconComponent?: FC;
     /** item counter (optional). shown if it is set and greater than 0 */
@@ -37,4 +42,46 @@ export interface NavLinkComponentPropsStrict {
 export interface NavLinkComponentProps extends NavLinkComponentPropsStrict {
     [key: string]: any;
 }
+export interface HeaderNavigationTriggerPropsStrict {
+    /** unique identifier */
+    id: string;
+    /** tooltip text */
+    tooltip?: string;
+    /** item description */
+    hint?: string;
+    /** container class name */
+    className?: string;
+    /** isActive */
+    isActive?: boolean;
+    /** counter shown for item */
+    counter?: CounterTagPropsType;
+    /** counter component class name */
+    counterClassName?: string;
+    /** icon component class name */
+    iconClassName?: string;
+    /** IconComponent custom icon component */
+    iconComponent?: FC;
+    /** iconName name of anvil icon */
+    iconName?: IconPropsStrict['name'];
+    /** svg icon (anvil2) of inactive item */
+    icon: IconProps['svg'] | undefined;
+    /** svg icon (anvil2) of active item */
+    iconActive: IconProps['svg'] | undefined;
+}
+export interface HeaderNavigationTriggerProps extends HeaderNavigationTriggerPropsStrict {
+    /** unstrict props */
+    [key: string]: any;
+}
+export interface HeaderNavigationLinkPropsStrict extends Omit<HeaderNavigationTriggerPropsStrict, 'isActive'> {
+    /** link href */
+    to: string;
+    /** isActive */
+    isActive?: boolean | ((pathname: string) => boolean);
+    /** link html target */
+    target?: HTMLAttributeAnchorTarget;
+}
+export interface HeaderNavigationLinkProps extends HeaderNavigationLinkPropsStrict {
+    /** unstrict props */
+    [key: string]: any;
+}
 //# sourceMappingURL=navigation.d.ts.map

package/dist/utils/navigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../../src/utils/navigation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAC9D,OAAO,EAAE,EAAE,EAAE,yBAAyB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACjE,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAEhE,MAAM,WAAW,wBAAwB;IACrC,cAAc;IACd,EAAE,EAAE,MAAM,CAAC;IAEX,gBAAgB;IAChB,EAAE,EAAE,MAAM,CAAC;IAEX,iBAAiB;IACjB,KAAK,EAAE,MAAM,CAAC;IAEd,uBAAuB;IACvB,IAAI,EAAE,MAAM,CAAC;IAEb,+FAA+F;IAC/F,QAAQ,CAAC,EAAE,OAAO,GAAG,CAAC,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,CAAC;IAErD,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,mDAAmD;IACnD,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAEnC,uCAAuC;IACvC,aAAa,CAAC,EAAE,EAAE,CAAC;IAEnB,qEAAqE;IACrE,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAE9B,8BAA8B;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,2BAA2B;IACxC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC;IACzC,MAAM,CAAC,EAAE,yBAAyB,CAAC;CACtC;AAED,MAAM,WAAW,qBAAsB,SAAQ,2BAA2B;IACtE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB"}
+{"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../../src/utils/navigation.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/navigation",
-    "version": "3.3.0",
+    "version": "4.1.0",
     "description": "Navigation components",
     "repository": {
         "type": "git",
@@ -17,24 +17,24 @@
         "classnames": "~2.3.1"
     },
     "peerDependencies": {
-        "@servicetitan/design-system": ">=13.2.1",
+        "@servicetitan/anvil2": ">=1.16.3",
+        "@servicetitan/design-system": ">=13.0.0",
         "@servicetitan/react-ioc": ">=14.1.1",
-        "@servicetitan/tokens": ">=12.2.1",
-        "mobx": ">=6.3.2",
-        "mobx-react": ">=7.5.1",
-        "react": ">=17.0.2",
-        "react-router-dom": "~5.3.0"
+        "@servicetitan/tokens": ">=12.0.0",
+        "mobx": ">=6.10.0",
+        "mobx-react": ">=9.0.0",
+        "react": ">=18.0.0"
     },
     "devDependencies": {
-        "@servicetitan/design-system": "~13.4.5",
+        "@servicetitan/anvil2": "~1.16.3",
+        "@servicetitan/design-system": "~14.4.3",
         "@servicetitan/react-ioc": "^24.0.3",
         "@servicetitan/tokens": ">=12.1.11",
         "@testing-library/react": "^14.0.0",
         "@types/react": "~18.2.55",
         "mobx": "~6.10.2",
         "mobx-react": "~9.0.2",
-        "react": "~18.2.0",
-        "react-router-dom": "~5.3.0"
+        "react": "~18.2.0"
     },
     "publishConfig": {
         "access": "public"
@@ -43,5 +43,5 @@
         "less": true,
         "webpack": false
     },
-    "gitHead": "41795ef488172af6a1d3cf989a759d7e10af2f67"
+    "gitHead": "901f041843355800451ac2e52a830bfcece54acd"
 }

package/src/components/header-navigation/header-navigation-content.tsx

@@ -1,8 +1,8 @@
 import { Icon, IconPropsStrict } from '@servicetitan/design-system';
 import classNames from 'classnames';
-import { FC, Fragment } from 'react';
+import { FC, Fragment, useContext } from 'react';
 import { HeaderNavigationItemData } from '../../utils/navigation';
-import { useNavLink } from '../../utils/navigation-context';
+import { NavigationComponentContext } from '../../utils/navigation-context';
 import { withTooltip } from '../../utils/with-tooltip';
 import { CounterTag, CounterTagPropsType } from '../counter-tag';
 import * as Styles from './header-navigation.module.less';
@@ -84,7 +84,7 @@ export const HeaderNavigationItem: FC<HeaderNavigationItemPropsStrict> = ({
     main,
     minimized,
 }) => {
-    const NavigationComponent = useNavLink();
+    const NavigationComponent = useContext(NavigationComponentContext);
 
     return withTooltip(
         <NavigationComponent

package/src/components/header-navigation/header-navigation-extra.stories.tsx

@@ -1,75 +1,66 @@
 import { Button, Popover } from '@servicetitan/design-system';
-import { FC, useState } from 'react';
-import { NavLinkComponentProps } from '../../utils/navigation';
-import {
-    HeaderNavigation,
-    HeaderNavigationLink,
-    HeaderNavigationTrigger,
-    HeaderNavigationTriggerCustom,
-} from './';
+import { useState } from 'react';
+import { withAnvil, withMemoryRouter } from '../../test/data.stories';
+import { HeaderNavigationLink, HeaderNavigationTrigger } from './header-navigation-links';
+import { HeaderNavigation } from './';
 
 export default {
     title: 'Navigation/HeaderNavigationExtra',
     component: HeaderNavigationLink,
+    decorators: [withMemoryRouter, withAnvil],
     parameters: {},
 };
 
-const NavLinkMock: FC<NavLinkComponentProps> = ({
-    to,
-    children,
-    isActive,
-    activeClassName,
-    ...rest
-}) => (
-    <a
-        {...rest}
-        href={to}
-        onClick={e => {
-            e.preventDefault();
-        }}
-    >
-        {children}
-    </a>
-);
+const SvgIcon = undefined as any;
 
 export const extraLink = () => (
-    <HeaderNavigation items={[]} navigationComponent={NavLinkMock} rightClassName="m-r-1">
+    <HeaderNavigation items={[]} rightClassName="m-r-1">
         <HeaderNavigationLink
             id="search"
             to="https://google.com"
             target="_blank"
             iconName="search"
+            icon={SvgIcon}
+            iconActive={SvgIcon}
             hint="Search: for all the questions"
         />
     </HeaderNavigation>
 );
 
 export const extraTrigger = () => (
-    <HeaderNavigation items={[]} navigationComponent={NavLinkMock} rightClassName="m-r-1">
-        <HeaderNavigationTrigger id="dialpad" iconName="phone" counter={2} tooltip="Phones pro" />
-    </HeaderNavigation>
-);
-
-export const extraCustomTrigger = () => (
-    <HeaderNavigation items={[]} navigationComponent={NavLinkMock}>
-        <HeaderNavigationTriggerCustom id="help-center">
-            <HelpCenterButton />
-        </HeaderNavigationTriggerCustom>
+    <HeaderNavigation items={[]} rightClassName="m-r-1">
+        <HeaderNavigationTrigger
+            id="dialpad"
+            iconName="phone"
+            counter={2}
+            tooltip="Phones pro"
+            icon={SvgIcon}
+            iconActive={SvgIcon}
+        />
     </HeaderNavigation>
 );
 
 export const extraWithTooltip = () => (
-    <HeaderNavigation items={[]} navigationComponent={NavLinkMock} rightClassName="m-r-1">
+    <HeaderNavigation items={[]} rightClassName="m-r-1">
         <HeaderNavigationLink
             id="search"
             to="https://google.com"
             target="_blank"
             iconName="search"
+            icon={SvgIcon}
+            iconActive={SvgIcon}
             tooltip="Search: for all the questions"
             hint="Google"
         />
 
-        <HeaderNavigationTrigger id="dialpad" iconName="phone" title="Dialpad" counter={2} />
+        <HeaderNavigationTrigger
+            id="dialpad"
+            iconName="phone"
+            title="Dialpad"
+            counter={2}
+            icon={SvgIcon}
+            iconActive={SvgIcon}
+        />
 
         <HelpCenterButton />
     </HeaderNavigation>

package/src/components/header-navigation/header-navigation-links.tsx

@@ -1,44 +1,11 @@
 import classNames from 'classnames';
-import { FC, HTMLAttributeAnchorTarget, ReactNode } from 'react';
-import { useNavLink } from '../../utils/navigation-context';
+import { FC, ReactNode, useContext } from 'react';
+import { HeaderNavigationLinkProps, HeaderNavigationTriggerProps } from '../../utils/navigation';
+import { NavigationComponentContext } from '../../utils/navigation-context';
 import { withTooltip } from '../../utils/with-tooltip';
-import {
-    HeaderNavigationItemContent,
-    HeaderNavigationItemContentPropsStrict,
-} from './header-navigation-content';
+import { HeaderNavigationItemContent } from './header-navigation-content';
 import * as Styles from './header-navigation.module.less';
 
-export interface HeaderNavigationTriggerPropsStrict
-    extends Omit<HeaderNavigationItemContentPropsStrict, 'title' | 'size'> {
-    /** unique identifier */
-    id: string;
-    /** tooltip text */
-    tooltip?: string;
-    /** item description */
-    hint?: string;
-    /** container class name */
-    className?: string;
-}
-
-interface HeaderNavigationTriggerProps extends HeaderNavigationTriggerPropsStrict {
-    /** unstrict props */
-    [key: string]: any;
-}
-
-export interface HeaderNavigationLinkPropsStrict extends HeaderNavigationTriggerPropsStrict {
-    /** link href */
-    to: string;
-    /** isActive */
-    isActive?: boolean | ((pathname: string) => boolean);
-    /** link html target */
-    target?: HTMLAttributeAnchorTarget;
-}
-
-export interface HeaderNavigationLinkProps extends HeaderNavigationLinkPropsStrict {
-    /** unstrict props */
-    [key: string]: any;
-}
-
 /** Navigation extra item with link */
 export const HeaderNavigationLink: FC<HeaderNavigationLinkProps> = ({
     id,
@@ -54,7 +21,7 @@ export const HeaderNavigationLink: FC<HeaderNavigationLinkProps> = ({
     target,
     ...rest
 }) => {
-    const NavigationComponent = useNavLink();
+    const NavigationComponent = useContext(NavigationComponentContext);
 
     return withTooltip(
         <NavigationComponent
@@ -90,11 +57,12 @@ export const HeaderNavigationTrigger: FC<HeaderNavigationTriggerProps> = ({
     iconClassName,
     iconComponent,
     iconName,
+    isActive,
     hint,
     tooltip,
     ...rest
-}) =>
-    withTooltip(
+}) => {
+    return withTooltip(
         <div
             data-cy={`navigation-trigger-${id}`}
             data-pendo={`navigation-trigger-${id}`}
@@ -103,6 +71,9 @@ export const HeaderNavigationTrigger: FC<HeaderNavigationTriggerProps> = ({
             className={classNames(
                 Styles.navigationItem,
                 Styles.navigationLink,
+                {
+                    [Styles.navigationItemActive]: isActive === true,
+                },
                 'cursor-pointer',
                 className
             )}
@@ -116,12 +87,19 @@ export const HeaderNavigationTrigger: FC<HeaderNavigationTriggerProps> = ({
         </div>,
         tooltip
     );
+};
 
 /** Navigation extra item with custom content */
 export const HeaderNavigationTriggerCustom: FC<
     Omit<
         HeaderNavigationTriggerProps,
-        'counter' | 'iconSize' | 'iconName' | 'iconComponent' | 'iconClassName'
+        | 'counter'
+        | 'iconSize'
+        | 'iconName'
+        | 'iconComponent'
+        | 'iconClassName'
+        | 'icon'
+        | 'iconActive'
     > & { children: ReactNode }
 > = ({ children, id, className, tooltip, title, ...rest }) =>
     withTooltip(