@servicetitan/navigation 3.2.0 → 4.0.0

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

@@ -1,4 +1,4 @@
-import { FC, PropsWithChildren } from 'react';
+import { FC } from 'react';
 import { HeaderNavigationItemData, NavLinkComponentProps } from '../../utils/navigation';
 export interface SideNavigationProps {
     /** container class name */
@@ -17,20 +17,9 @@ export interface SideNavigationProps {
     onExpandedChange(expanded: boolean): void;
 }
 export declare const SideNavigation: FC<SideNavigationProps>;
-interface SideNavigationItemProps extends HeaderNavigationItemData {
-    expanded?: boolean;
-}
-/** Side Navigation menu item */
-export declare const SideNavigationItem: FC<SideNavigationItemProps>;
 /** Side Navigation options toggle */
 export declare const SideNavigationOptionsToggle: FC<{
     expanded?: boolean;
     onExpandedChange(expanded: boolean): void;
 }>;
-/** Side Navigation options popover */
-export declare const SideNavigationOptionsPopover: FC<PropsWithChildren<{
-    expanded?: boolean;
-    onExpandedChange(expanded: boolean): void;
-}>>;
-export {};
 //# sourceMappingURL=side-navigation.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"side-navigation.d.ts","sourceRoot":"","sources":["../../../src/components/side-navigation/side-navigation.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,EAAE,EAAY,iBAAiB,EAAY,MAAM,OAAO,CAAC;AAClE,OAAO,EAAE,wBAAwB,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAWzF,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,4CAA4C;IAC5C,mBAAmB,CAAC,EAAE,EAAE,CAAC,qBAAqB,CAAC,CAAC;IAChD,4BAA4B;IAC5B,gBAAgB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;CAC7C;AAED,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CA4ClD,CAAC;AAEF,UAAU,uBAAwB,SAAQ,wBAAwB;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,gCAAgC;AAChC,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CA6C1D,CAAC;AAEF,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;AAEN,sCAAsC;AACtC,eAAO,MAAM,4BAA4B,EAAE,EAAE,CACzC,iBAAiB,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;CAC7C,CAAC,CA8CL,CAAC"}
+{"version":3,"file":"side-navigation.d.ts","sourceRoot":"","sources":["../../../src/components/side-navigation/side-navigation.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,EAAE,EAAY,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,wBAAwB,EAAE,qBAAqB,EAAE,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,4CAA4C;IAC5C,mBAAmB,CAAC,EAAE,EAAE,CAAC,qBAAqB,CAAC,CAAC;IAChD,4BAA4B;IAC5B,gBAAgB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;CAC7C;AAED,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAoDlD,CAAC;AAsEF,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/side-navigation/side-navigation.js

@@ -1,37 +1,23 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { BodyText, Divider, Eyebrow, Icon, Popover, Stack } from '@servicetitan/design-system';
+import { Icon } from '@servicetitan/anvil2';
+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 classNames from 'classnames';
-import { Fragment, useState } from 'react';
-import { DefaultNavLinkComponent, NavLinkContext, useNavLink, } from '../../utils/navigation-context';
+import { Fragment } from 'react';
+import { DefaultNavLinkComponent } from '../../utils/navigation-context';
 import { withTooltip } from '../../utils/with-tooltip';
 import { CounterTag } from '../counter-tag';
-import { IconSideExpanded, IconSideOptions, IconSideSlim } from './icons';
 import * as Styles from './side-navigation.module.less';
 export const SideNavigation = ({ className, expanded, id, items, itemsTop, navigationComponent = DefaultNavLinkComponent, onExpandedChange, }) => {
-    return (_jsx(NavLinkContext.Provider, { value: navigationComponent, children: _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, Object.assign({ expanded: expanded }, 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, Object.assign({ expanded: expanded }, item), item.id))) }), _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, Object.assign({ 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, Object.assign({ expanded: expanded, navigationComponent: navigationComponent }, item), item.id))) }), _jsx("div", { className: Styles.sideNavBottom, children: _jsx(SideNavigationOptionsToggle, { expanded: expanded, onExpandedChange: onExpandedChange }) })] }));
 };
 /** Side Navigation menu item */
-export const SideNavigationItem = ({ id, to, title, hint, counter, className, iconClassName, iconComponent: IconComponent, iconName, isActive, expanded, }) => {
-    const NavigationComponent = useNavLink();
-    const iconClass = classNames(Styles.navigationIcon, iconClassName);
+const SideNavigationItem = ({ id, to, title, hint, counter, className, iconClassName, iconComponent: IconComponent, icon, iconActive, isActive, navigationComponent: NavigationComponent, expanded, }) => {
     return withTooltip(_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,
-        }), isActive: typeof isActive === 'function' ? isActive : undefined, activeClassName: Styles.navigationItemActive, children: [IconComponent ? (_jsx("i", { className: iconClass, children: _jsx(IconComponent, {}) })) : iconName ? (_jsx(Icon, { name: iconName, className: iconClass })) : (_jsx("i", { className: iconClass })), !!expanded && _jsx("span", { className: Styles.navigationItemText, children: title }), !!counter && _jsx(CounterTag, { data: counter, className: Styles.navigationItemCounter })] }, id), expanded ? undefined : title, 'r');
+            [Styles.navigationItemIconState]: !!icon && !!iconActive,
+        }), isActive: typeof isActive === 'function' ? isActive : undefined, activeClassName: Styles.navigationItemActive, children: [IconComponent ? (_jsx("i", { className: classNames(Styles.navigationIcon, iconClassName), children: _jsx(IconComponent, {}) })) : (_jsxs(Fragment, { children: [icon && (_jsx(Icon, { svg: icon, className: classNames(Styles.navigationIcon, iconClassName) })), iconActive && (_jsx(Icon, { svg: iconActive, className: classNames(Styles.navigationIcon, Styles.navigationIconActive, iconClassName) }))] })), !!expanded && _jsx("span", { className: Styles.navigationItemText, children: title }), !!counter && _jsx(CounterTag, { data: counter, className: Styles.navigationItemCounter })] }, id), expanded ? undefined : title, 'right');
 };
 /** 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.optionsIcon, children: _jsx(IconSideOptions, { expanded: expanded }) }), !!expanded && _jsx("span", { className: Styles.optionsItemText, children: "Collapse Menu" })] }), expanded ? undefined : 'Expand Menu', 'r');
-/** Side Navigation options popover */
-export const SideNavigationOptionsPopover = ({ children, expanded, onExpandedChange }) => {
-    const [open, setOpen] = useState(false);
-    const onExpand = () => {
-        setOpen(false);
-        onExpandedChange(true);
-    };
-    const onCollapse = () => {
-        setOpen(false);
-        onExpandedChange(false);
-    };
-    return (_jsxs(Popover, { className: "bg-neutral-30", trigger: children, direction: "tr", onClickOutside: () => setOpen(false), open: open, padding: "s", width: "xs", children: [_jsx(Eyebrow, { className: "p-l-2", children: "menu options" }), _jsx(SideNavigationOptionsItem, { active: !expanded, icon: IconSideSlim, title: "Slim", onClick: onCollapse }), _jsx(SideNavigationOptionsItem, { active: !!expanded, icon: IconSideExpanded, title: "Expanded", onClick: onExpand }), _jsx(Divider, { className: "m-x-half m-y-1" }), _jsx(SideNavigationOptionsItem, { active: false, icon: expanded ? IconSideExpanded : IconSideSlim, title: expanded ? 'Expanded' : 'Slim' })] }));
-};
-const SideNavigationOptionsItem = ({ active, onClick, title, icon: IconComponent }) => (_jsxs(Stack, { className: classNames(active ? Styles.optionsPopoverItemActive : Styles.optionsPopoverItemInactive, 'p-y-1 p-x-2', { [Styles.optionsPopoverItemClickable]: onClick && !active }), alignItems: "center", onClick: !active && onClick, children: [_jsx(IconComponent, {}), _jsx(BodyText, { className: "c-inherit m-l-1 flex-grow-1 flex-basis-0", children: title }), active && _jsx(Icon, { name: "check" })] }));
+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.optionsIcon, children: _jsx(Icon, { svg: expanded ? SvgCollapse : SvgExpand }) }), !!expanded && _jsx("span", { className: Styles.optionsItemText, children: "Collapse Menu" })] }), expanded ? undefined : 'Expand Menu', 'right');
 //# sourceMappingURL=side-navigation.js.map

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

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

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

@@ -84,6 +84,16 @@
         color: @text-color-active;
     }
 
+    &.navigation-item-icon-state.navigation-item-active {
+        .navigation-icon:not(.navigation-icon-active) {
+            display: none;
+        }
+
+        .navigation-icon.navigation-icon-active {
+            display: block;
+        }
+    }
+
     &:hover:not(.navigation-item-active) {
         background-color: @bg-color-hover;
     }
@@ -104,7 +114,16 @@
 .navigation-icon {
     height: 24px;
     width: 24px;
-    font-size: 24px;
+    color: inherit;
+
+    & > svg {
+        height: 24px;
+        width: 24px;
+    }
+
+    &.navigation-icon-active {
+        display: none;
+    }
 }
 
 .options-item {
@@ -130,9 +149,14 @@
     .options-icon {
         height: 24px;
         width: 24px;
-        font-size: 24px;
         padding-left: @spacing-1;
         padding-right: @spacing-1;
+
+        & > span > svg {
+            height: 24px;
+            width: 24px;
+            color: @text-color;
+        }
     }
 
     .options-item-text {
@@ -143,24 +167,6 @@
     }
 }
 
-.options-popover-item-clickable {
-    cursor: pointer;
-
-    &:hover {
-        background-color: @color-neutral-60;
-    }
-}
-
-.options-popover-item-active {
-    background-color: @color-blue-100;
-    color: @color-blue-500;
-}
-
-.options-popover-item-inactive,
-.options-popover-item-active {
-    border-radius: @border-radius-1;
-}
-
 .divider {
     border-top: 1px solid @border-color;
     margin-left: 12px;

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

@@ -1,8 +1,8 @@
-import { ComponentType, FC } from 'react';
+/// <reference types="react" />
 declare const _default: {
     title: string;
-    component: FC<import("./side-navigation").SideNavigationProps>;
-    decorators: ((Story: ComponentType) => import("react/jsx-runtime").JSX.Element)[];
+    component: import("react").FC<import("./side-navigation").SideNavigationProps>;
+    decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
     parameters: {};
 };
 export default _default;

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

@@ -1 +1 @@
-{"version":3,"file":"side-navigation.stories.d.ts","sourceRoot":"","sources":["../../../src/components/side-navigation/side-navigation.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,EAAE,EAAY,MAAM,OAAO,CAAC;;;;;;;AAYpD,wBAKE;AAmDF,eAAO,MAAM,qBAAqB,+CA0BjC,CAAC"}
+{"version":3,"file":"side-navigation.stories.d.ts","sourceRoot":"","sources":["../../../src/components/side-navigation/side-navigation.stories.tsx"],"names":[],"mappings":";;;;;;;AAYA,wBAKE;AAEF,eAAO,MAAM,qBAAqB,+CA0BjC,CAAC"}

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

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
+import { NavLinkMock, items, withAnvil, withMemoryRouter } from '../../test/data.stories';
 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" })] }));
@@ -7,31 +8,9 @@ const layout = (Story) => {
 export default {
     title: 'Navigation/SideNavigation',
     component: SideNavigation,
-    decorators: [layout],
+    decorators: [layout, withMemoryRouter, withAnvil],
     parameters: {},
 };
-const getItem = (id, data) => (Object.assign({ id, to: '/', title: id[0].toUpperCase() + id.substring(1), hint: id }, (data !== null && data !== void 0 ? data : {})));
-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" })] }));
-const items = {
-    calendar: getItem('calendar', { iconName: 'event' }),
-    calls: getItem('calls', { iconName: 'local_phone', isActive: true, counter: 12 }),
-    dashboard: getItem('dashboard', { iconName: 'odometer' }),
-    dispatch: getItem('dispatch', { iconName: 'location_disabled', counter: 1 }),
-    fleet: getItem('fleet', { iconName: 'fleet-pro', title: 'Fleet Pro' }),
-    followUps: getItem('followUps', { iconName: 'flag', title: 'Follow Ups' }),
-    inventory: getItem('inventory', { iconName: 'toys' }),
-    purchasing: getItem('purchasing', { iconComponent: InventoryIcon }),
-    accounting: getItem('accounting', { iconName: 'assignment' }),
-    marketing: getItem('marketing', { iconName: 'bullhorn' }),
-    priceBook: getItem('priceBook', { iconName: 'book' }),
-    pointOfSale: getItem('pointOfSale', { iconName: 'cash-register' }),
-    projects: getItem('projects', { iconName: 'folder_special' }),
-    reports: getItem('reports', { iconName: 'poll' }),
-    tasks: getItem('tasks', { iconName: 'format_list_bulleted' }),
-};
-const NavLinkMock = props => (_jsx("a", { href: props.to, target: props.target, onClick: e => {
-        e.preventDefault();
-    }, className: props.className, children: props.children }));
 export const DefaultSideNavigation = () => {
     const [expanded, setExpanded] = useState(false);
     return (_jsx(SideNavigation, { navigationComponent: NavLinkMock, expanded: expanded, onExpandedChange: setExpanded, items: [

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

@@ -1 +1 @@
-{"version":3,"file":"side-navigation.stories.js","sourceRoot":"","sources":["../../../src/components/side-navigation/side-navigation.stories.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"side-navigation.stories.js","sourceRoot":"","sources":["../../../src/components/side-navigation/side-navigation.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAiB,QAAQ,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC1F,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,mBAAmB,EAAE,WAAW,EAChC,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"}

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

@@ -0,0 +1,6 @@
+// temp fix to reset incorrect coloring from anvil2
+.fix-icons {
+    :global(span[data-anv='icon'] > svg > path) {
+        fill: inherit !important;
+    }
+}

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;AAGtF,eAAO,MAAM,WAAW,oHAwBvB,CAAC;AAEF,eAAO,MAAM,gBAAgB,UAAW,GAAG,4CAI1C,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,150 @@
+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/header-navigation';
+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(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,9 @@
 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 interface NavigationContextType {
+    NavigationComponent: FC<NavLinkComponentProps>;
+    isLegacy: boolean;
+}
+export declare const NavigationContext: import("react").Context<NavigationContextType>;
 //# 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,MAAM,WAAW,qBAAqB;IAClC,mBAAmB,EAAE,EAAE,CAAC,qBAAqB,CAAC,CAAC;IAC/C,QAAQ,EAAE,OAAO,CAAC;CACrB;AACD,eAAO,MAAM,iBAAiB,gDAG5B,CAAC"}

package/dist/utils/navigation-context.js

@@ -1,7 +1,22 @@
+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 NavigationContext = createContext({
+    NavigationComponent: DefaultNavLinkComponent,
+    isLegacy: 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;AAMnC,MAAM,CAAC,MAAM,iBAAiB,GAAG,aAAa,CAAwB;IAClE,mBAAmB,EAAE,uBAAuB;IAC5C,QAAQ,EAAE,KAAK;CAClB,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 */

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":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,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,yCAAyC;IACzC,IAAI,EAAE,SAAS,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;IAEnC,uCAAuC;IACvC,UAAU,EAAE,SAAS,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;IAEzC,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"}

package/package.json

@@ -1,10 +1,10 @@
 {
     "name": "@servicetitan/navigation",
-    "version": "3.2.0",
+    "version": "4.0.0",
     "description": "Navigation components",
     "repository": {
         "type": "git",
-        "url": "https://github.com/servicetitan/anvil-uikit-contrib",
+        "url": "https://github.com/servicetitan/anvil-uikit-contrib.git",
         "directory": "packages/navigation"
     },
     "main": "./dist/index.js",
@@ -17,24 +17,24 @@
         "classnames": "~2.3.1"
     },
     "peerDependencies": {
-        "@servicetitan/design-system": ">=13.2.1",
+        "@servicetitan/anvil2": ">=1.16.1",
+        "@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.1",
+        "@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": "c6611950f796446028e741a2da684d98805dc8c1"
+    "gitHead": "58794dd7d4254b98695790fe80aadad5495878d1"
 }