@servicetitan/navigation 13.1.4 → 13.2.0-canary.270.b4a066f.0

package/dist/components/titan-layout/titan-layout.module.less

@@ -9,8 +9,7 @@
 @bg-color-active: rgba(120, 187, 250, 0.2);
 
 .layout-anvil1 {
-    height: calc(100vh - var(--nav-offset-top));
-    margin-top: var(--nav-offset-top);
+    height: 100vh;
 
     display: flex;
     flex-direction: column;
@@ -30,20 +29,12 @@
     }
 }
 
-.layout-anvil2 {
-    .content-header {
-        position: sticky;
-        top: var(--nav-offset-top);
-        z-index: 989;
-    }
-}
-
 .layout-desktop {
     padding-left: var(--nav-offset-left);
 
     .side {
         position: fixed;
-        top: var(--nav-offset-top);
+        top: var(--nav-top-height);
         bottom: 0;
         left: 0;
         right: 0;
@@ -52,31 +43,20 @@
 }
 
 .layout-legacy,
-.layout-anvil2 {
+.layout-anvil2,
+.layout-anvil1 {
     .top-placeholder {
         height: var(--nav-offset-top);
     }
 }
 
 .layout {
+    --nav-top-height: 0px;
     --nav-offset-top: 0px;
     --nav-offset-left: 0px;
     --content-offset-top: var(--nav-offset-top);
     --offset: var(--content-offset-top);
 
-    &.layout-desktop.layout-top-light {
-        --nav-offset-top: 48px;
-    }
-
-    &.layout-desktop.layout-top-nav {
-        --nav-offset-top: 80px;
-    }
-
-    &.layout-mobile.layout-top-light,
-    &.layout-mobile.layout-top-nav {
-        --nav-offset-top: 72px;
-    }
-
     &.layout-desktop.layout-nav-slim {
         --nav-offset-left: 64px;
     }
@@ -98,10 +78,29 @@
         left: 0;
         right: 0;
     }
+
+    .content-fixed-header {
+        position: fixed;
+        top: var(--nav-top-height);
+        left: var(--nav-offset-left);
+        right: 0;
+        z-index: 801;
+    }
 }
 
+/* anvil2 doesn't support scrollable header s above the Page content */
+/* so making them sticky as well */
+.layout-anvil2 {
+    .content-header {
+        position: sticky;
+        top: var(--nav-offset-top);
+        z-index: 800;
+    }
+}
 @media print {
     .layout {
+        --nav-top-height: 0px !important;
+        --nav-offset-top: 0px !important;
         --nav-offset-left: 0px !important;
         --nav-offset-right: 0px !important;
 

package/dist/components/titan-layout/titan-layout.module.less.d.ts

@@ -1,16 +1,14 @@
 export const __esModule: true;
 export const content: string;
+export const contentFixedHeader: string;
 export const contentHeader: string;
 export const layout: string;
 export const layoutAnvil1: string;
 export const layoutAnvil2: string;
 export const layoutDesktop: string;
 export const layoutLegacy: string;
-export const layoutMobile: string;
 export const layoutNavSlim: string;
 export const layoutNavWide: string;
-export const layoutTopLight: string;
-export const layoutTopNav: string;
 export const side: string;
 export const top: string;
 export const topPlaceholder: string;

package/dist/test/data.d.ts

@@ -8,6 +8,9 @@ export declare const NavLinkMock: import("react").ForwardRefExoticComponent<Omit
 export declare const LocationInfo: FC<{
     className?: string;
 }>;
+export declare const CssInfo: FC<{
+    className?: string;
+}>;
 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;

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

@@ -1 +1 @@
-{"version":3,"file":"data.d.ts","sourceRoot":"","sources":["../../src/test/data.tsx"],"names":[],"mappings":"AAmCA,OAAO,EAAE,EAAE,EAAkC,MAAM,OAAO,CAAC;AAK3D,OAAO,EACH,kBAAkB,EAGrB,MAAM,qBAAqB,CAAC;AAI7B,eAAO,MAAM,WAAW;;;;uCAwBvB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAInD,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,OAAO,GAAG,4CAI1C,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,OAAO,GAAG,4CAInC,CAAC;AAEF,eAAO,MAAM,aAAa,+CAKzB,CAAC;AAEF,eAAO,MAAM,UAAU,+CAetB,CAAC;AAyCF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;CAuHpB,CAAC;AAEF,eAAO,MAAM,sBAAsB,+CAuBlC,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,OAAO,GAAG,4CAS9C,CAAC"}
+{"version":3,"file":"data.d.ts","sourceRoot":"","sources":["../../src/test/data.tsx"],"names":[],"mappings":"AAmCA,OAAO,EAAE,EAAE,EAA2D,MAAM,OAAO,CAAC;AAKpF,OAAO,EACH,kBAAkB,EAGrB,MAAM,qBAAqB,CAAC;AAI7B,eAAO,MAAM,WAAW;;;;uCAwBvB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAInD,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,EAAE,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAkC9C,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,OAAO,GAAG,4CAI1C,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,OAAO,GAAG,4CAInC,CAAC;AAEF,eAAO,MAAM,aAAa,+CAKzB,CAAC;AAEF,eAAO,MAAM,UAAU,+CAetB,CAAC;AAyCF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;CAuHpB,CAAC;AAEF,eAAO,MAAM,sBAAsB,+CAuBlC,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,OAAO,GAAG,4CAS9C,CAAC"}

package/dist/test/data.js

@@ -32,7 +32,7 @@ import SvgTasksActive from '@servicetitan/anvil2/assets/icons/st/gnav_tasks_acti
 import SvgTasks from '@servicetitan/anvil2/assets/icons/st/gnav_tasks_inactive.svg';
 import { BodyText, Popover } from '@servicetitan/design-system';
 import classNames from 'classnames';
-import { Fragment, forwardRef, useState } from 'react';
+import { Fragment, forwardRef, useLayoutEffect, useRef, useState } from 'react';
 // needed only for storybook and added in root dependencies
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { MemoryRouter, Redirect, Switch, useHistory, useLocation } from 'react-router-dom';
@@ -66,6 +66,45 @@ export const LocationInfo = ({ className })=>{
         ]
     });
 };
+export const CssInfo = ({ className })=>{
+    const ref = useRef(null);
+    const [info, setInfo] = useState({
+        'offset': '',
+        'nav-offset-top': ''
+    });
+    useLayoutEffect(()=>{
+        const interval = setInterval(()=>{
+            const el = ref.current;
+            if (!el) {
+                return;
+            }
+            // eslint-disable-next-line no-restricted-globals
+            const st = getComputedStyle(el);
+            setInfo({
+                'offset': st.getPropertyValue('--offset'),
+                'nav-offset-top': st.getPropertyValue('--nav-offset-top')
+            });
+        }, 100);
+        return ()=>clearInterval(interval);
+    }, []);
+    return /*#__PURE__*/ _jsxs("div", {
+        className: className,
+        ref: ref,
+        children: [
+            /*#__PURE__*/ _jsx("p", {
+                children: "CSS variables:"
+            }),
+            Object.entries(info).map(([key, value])=>/*#__PURE__*/ _jsxs("p", {
+                    children: [
+                        "--",
+                        key,
+                        " - ",
+                        value
+                    ]
+                }, key))
+        ]
+    });
+};
 export const withMemoryRouter = (Story)=>/*#__PURE__*/ _jsx(MemoryRouter, {
         children: /*#__PURE__*/ _jsx(Story, {})
     });

package/dist/test/data.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/test/data.tsx"],"sourcesContent":["import { AnvilProvider } from '@servicetitan/anvil2';\nimport SvgPhone from '@servicetitan/anvil2/assets/icons/material/round/phone_disabled.svg';\nimport SvgPhoneActive from '@servicetitan/anvil2/assets/icons/material/round/phone_enabled.svg';\nimport SvgAccountingActive from '@servicetitan/anvil2/assets/icons/st/gnav_accounting_active.svg';\nimport SvgAccounting from '@servicetitan/anvil2/assets/icons/st/gnav_accounting_inactive.svg';\nimport SvgCallsActive from '@servicetitan/anvil2/assets/icons/st/gnav_calls_active.svg';\nimport SvgCalls from '@servicetitan/anvil2/assets/icons/st/gnav_calls_inactive.svg';\nimport SvgDashboardActive from '@servicetitan/anvil2/assets/icons/st/gnav_dashboard_active.svg';\nimport SvgDashboard from '@servicetitan/anvil2/assets/icons/st/gnav_dashboard_inactive.svg';\nimport SvgDispatchActive from '@servicetitan/anvil2/assets/icons/st/gnav_dispatch_active.svg';\nimport SvgDispatch from '@servicetitan/anvil2/assets/icons/st/gnav_dispatch_inactive.svg';\nimport SvgFleetProActive from '@servicetitan/anvil2/assets/icons/st/gnav_fleet_pro_active.svg';\nimport SvgFleetPro from '@servicetitan/anvil2/assets/icons/st/gnav_fleet_pro_inactive.svg';\nimport SvgFollowUpActive from '@servicetitan/anvil2/assets/icons/st/gnav_follow_up_active.svg';\nimport SvgFollowUp from '@servicetitan/anvil2/assets/icons/st/gnav_follow_up_inactive.svg';\nimport SvgInventoryActive from '@servicetitan/anvil2/assets/icons/st/gnav_inventory_active.svg';\nimport SvgInventory from '@servicetitan/anvil2/assets/icons/st/gnav_inventory_inactive.svg';\nimport SvgMarketingActive from '@servicetitan/anvil2/assets/icons/st/gnav_marketing_active.svg';\nimport SvgMarketing from '@servicetitan/anvil2/assets/icons/st/gnav_marketing_inactive.svg';\nimport SvgPosActive from '@servicetitan/anvil2/assets/icons/st/gnav_pos_active.svg';\nimport SvgPos from '@servicetitan/anvil2/assets/icons/st/gnav_pos_inactive.svg';\nimport SvgPriceBookActive from '@servicetitan/anvil2/assets/icons/st/gnav_pricebook_active.svg';\nimport SvgPriceBook from '@servicetitan/anvil2/assets/icons/st/gnav_pricebook_inactive.svg';\nimport SvgProjectsActive from '@servicetitan/anvil2/assets/icons/st/gnav_projects_active.svg';\nimport SvgProjects from '@servicetitan/anvil2/assets/icons/st/gnav_projects_inactive.svg';\nimport SvgReportsActive from '@servicetitan/anvil2/assets/icons/st/gnav_reports_active.svg';\nimport SvgReports from '@servicetitan/anvil2/assets/icons/st/gnav_reports_inactive.svg';\nimport SvgScheduleActive from '@servicetitan/anvil2/assets/icons/st/gnav_schedule_active.svg';\nimport SvgSchedule from '@servicetitan/anvil2/assets/icons/st/gnav_schedule_inactive.svg';\nimport SvgTasksActive from '@servicetitan/anvil2/assets/icons/st/gnav_tasks_active.svg';\nimport SvgTasks from '@servicetitan/anvil2/assets/icons/st/gnav_tasks_inactive.svg';\n\nimport { BodyText, Popover } from '@servicetitan/design-system';\n\nimport classNames from 'classnames';\nimport { FC, Fragment, forwardRef, useState } from 'react';\n// needed only for storybook and added in root dependencies\n// eslint-disable-next-line import/no-extraneous-dependencies\nimport { MemoryRouter, Redirect, Switch, useHistory, useLocation } from 'react-router-dom';\nimport { TitanLayout } from '../components/titan-layout';\nimport {\n    NavigationItemData,\n    NavigationSubmenuGroupData,\n    NavigationSubmenuItemData,\n} from '../utils/navigation';\nimport { NavLinkComponentProps } from '../utils/navigation-context';\nimport * as Styles from './data-stories.module.less';\n\nexport const NavLinkMock = forwardRef<any, NavLinkComponentProps>(\n    ({ to, children, activeClassName, className, isActive, ...rest }, ref) => {\n        const history = useHistory();\n        const location = useLocation();\n        const linkActive = location.pathname.startsWith(to);\n\n        return (\n            <a\n                {...rest}\n                onClick={e => {\n                    e.preventDefault();\n\n                    if (!to.startsWith('http')) {\n                        history.replace(to);\n                    }\n                }}\n                className={classNames(className, linkActive ? activeClassName : '')}\n                href={to}\n                ref={ref}\n            >\n                {children}\n            </a>\n        );\n    }\n);\n\nexport const LocationInfo: FC<{ className?: string }> = ({ className }) => {\n    const location = useLocation();\n\n    return <BodyText className={className}>current location - {location.pathname}</BodyText>;\n};\n\nexport const withMemoryRouter = (Story: any) => (\n    <MemoryRouter>\n        <Story />\n    </MemoryRouter>\n);\n\nexport const withAnvil = (Story: any) => (\n    <AnvilProvider className={Styles.fixIcons}>\n        <Story />\n    </AnvilProvider>\n);\n\nexport const InventoryIcon = () => (\n    <svg width=\"20\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"-293 385 24 24\" fill=\"currentColor\">\n        <polyline points=\"-288,400.9 -282,404.3 -282,397.6 -288,394.2 -288,400.9 \" />\n        <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\" />\n    </svg>\n);\n\nexport const SearchIcon = () => (\n    <svg\n        width=\"1em\"\n        height=\"1em\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n    >\n        <g transform=\"translate(0,4)\">\n            <path\n                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\"\n                fill=\"white\"\n            />\n        </g>\n    </svg>\n);\n\nconst getNavItem = (id: string, data: Partial<NavigationItemData>): NavigationItemData => ({\n    id,\n    to: '/' + id,\n    title: id[0].toUpperCase() + id.substring(1),\n    icon: undefined,\n    iconActive: undefined,\n    ...data,\n    submenu: data.submenu\n        ? {\n              ...data.submenu,\n              groups: data.submenu.groups.map(group => ({\n                  ...group,\n                  links: group.links.map(link => ({\n                      ...link,\n                      to: `/${id}/${link.to}`,\n                  })),\n              })),\n          }\n        : undefined,\n});\n\nconst getSubItem = (\n    id: string,\n    data: Partial<NavigationSubmenuItemData>\n): NavigationSubmenuItemData => ({\n    id,\n    to: id,\n    title: id[0].toUpperCase() + id.substring(1),\n    ...data,\n});\n\nconst getGroup = (\n    title: string,\n    links: NavigationSubmenuItemData[]\n): NavigationSubmenuGroupData => ({\n    title,\n    links,\n});\n\nexport const navItems = {\n    calendar: getNavItem('calendar', {\n        icon: SvgSchedule,\n        iconActive: SvgScheduleActive,\n    }),\n    schedule: getNavItem('schedule', {\n        icon: SvgSchedule,\n        iconActive: SvgScheduleActive,\n    }),\n    calls: getNavItem('calls', {\n        icon: SvgCalls,\n        iconActive: SvgCallsActive,\n        counter: 1234,\n    }),\n    dashboard: getNavItem('dashboard', {\n        icon: SvgDashboard,\n        iconActive: SvgDashboardActive,\n    }),\n    dispatch: getNavItem('dispatch', {\n        icon: SvgDispatch,\n        iconActive: SvgDispatchActive,\n        tag: { value: 3 },\n    }),\n    fleet: getNavItem('fleet', {\n        icon: SvgFleetPro,\n        iconActive: SvgFleetProActive,\n        title: 'Fleet Pro',\n    }),\n    followUps: getNavItem('followUps', {\n        icon: SvgFollowUp,\n        iconActive: SvgFollowUpActive,\n        title: 'Follow Up',\n    }),\n    followUpsWithSubmenu: getNavItem('followUps', {\n        icon: SvgFollowUp,\n        iconActive: SvgFollowUpActive,\n        title: 'Follow Up',\n        submenu: {\n            groups: [\n                getGroup('', [\n                    getSubItem('estimates', { title: 'Unsold Estimates' }),\n                    getSubItem('sold', { title: 'Sold Estimates' }),\n                    getSubItem('surveys', { title: 'Surveys' }),\n                ]),\n            ],\n        },\n    }),\n    inventory: getNavItem('inventory', {\n        icon: SvgInventory,\n        iconActive: SvgInventoryActive,\n    }),\n    purchasing: getNavItem('purchasing', {}),\n    purchasingWithSubmenu: getNavItem('purchasing', {\n        icon: SvgInventory,\n        iconActive: SvgInventoryActive,\n        counter: true,\n        submenu: {\n            groups: [\n                getGroup('Purchase', [\n                    getSubItem('repl', { title: 'Replenishment' }),\n                    getSubItem('orders', { title: 'Purchase Orders' }),\n                    getSubItem('receipts', { title: 'Receipts' }),\n                    getSubItem('returns', { title: 'Returns' }),\n                ]),\n            ],\n        },\n    }),\n    accounting: getNavItem('accounting', {\n        icon: SvgAccounting,\n        iconActive: SvgAccountingActive,\n        counter: true,\n    }),\n    accountingWithSubmenu: getNavItem('accounting', {\n        icon: SvgAccounting,\n        iconActive: SvgAccountingActive,\n        counter: 1,\n        submenu: {\n            groups: [\n                getGroup('Accounts Receivable', [\n                    getSubItem('export', {\n                        title: 'Batch/Export Transactions',\n                        counter: true,\n                    }),\n                    getSubItem('ar', { title: 'AR Management' }),\n                    getSubItem('invoices', { title: 'Invoices', counter: 3 }),\n                    getSubItem('payments', { title: 'Customer Payments', counter: 2 }),\n                    getSubItem('deposits', { title: 'Bank Deposits' }),\n                ]),\n                getGroup('Accounts Payable', [getSubItem('bills', { title: 'Bills' })]),\n                getGroup('Financing', [getSubItem('dashboard', { title: 'Dashboard' })]),\n                getGroup('Others', [getSubItem('at', { title: 'Accounting Audit Trail' })]),\n            ],\n        },\n    }),\n    marketing: getNavItem('marketing', {\n        icon: SvgMarketing,\n        iconActive: SvgMarketingActive,\n    }),\n    priceBook: getNavItem('pricebook', {\n        icon: SvgPriceBook,\n        iconActive: SvgPriceBookActive,\n    }),\n    pointOfSale: getNavItem('pointOfSale', {\n        icon: SvgPos,\n        iconActive: SvgPosActive,\n        title: 'Point Of Sale',\n    }),\n    projects: getNavItem('projects', {\n        icon: SvgProjects,\n        iconActive: SvgProjectsActive,\n    }),\n    reports: getNavItem('reports', {\n        icon: SvgReports,\n        iconActive: SvgReportsActive,\n    }),\n    tasks: getNavItem('tasks', {\n        icon: SvgTasks,\n        iconActive: SvgTasksActive,\n    }),\n};\n\nexport const CallsNavigationTrigger = () => {\n    const [open, setOpen] = useState(false);\n\n    return (\n        <Popover\n            open={open}\n            onClickOutside={() => setOpen(false)}\n            direction=\"bl\"\n            trigger={\n                <TitanLayout.Trigger\n                    id=\"dialpad\"\n                    counter={2}\n                    title=\"Calls\"\n                    icon={SvgPhone}\n                    iconActive={SvgPhoneActive}\n                    onClick={() => setOpen(!open)}\n                    isActive={open}\n                />\n            }\n        >\n            calls content\n        </Popover>\n    );\n};\n\nexport const withDefaultRedirects = (Story: any) => (\n    <Fragment>\n        <Switch>\n            <Redirect from=\"/accounting\" exact to=\"/accounting/export\" />\n            <Redirect from=\"/purchasing\" exact to=\"/purchasing/repl\" />\n            <Redirect from=\"/followUps\" exact to=\"/followUps/sold\" />\n        </Switch>\n        <Story />\n    </Fragment>\n);\n"],"names":["AnvilProvider","SvgPhone","SvgPhoneActive","SvgAccountingActive","SvgAccounting","SvgCallsActive","SvgCalls","SvgDashboardActive","SvgDashboard","SvgDispatchActive","SvgDispatch","SvgFleetProActive","SvgFleetPro","SvgFollowUpActive","SvgFollowUp","SvgInventoryActive","SvgInventory","SvgMarketingActive","SvgMarketing","SvgPosActive","SvgPos","SvgPriceBookActive","SvgPriceBook","SvgProjectsActive","SvgProjects","SvgReportsActive","SvgReports","SvgScheduleActive","SvgSchedule","SvgTasksActive","SvgTasks","BodyText","Popover","classNames","Fragment","forwardRef","useState","MemoryRouter","Redirect","Switch","useHistory","useLocation","TitanLayout","Styles","NavLinkMock","to","children","activeClassName","className","isActive","rest","ref","history","location","linkActive","pathname","startsWith","a","onClick","e","preventDefault","replace","href","LocationInfo","withMemoryRouter","Story","withAnvil","fixIcons","InventoryIcon","svg","width","xmlns","viewBox","fill","polyline","points","path","d","SearchIcon","height","g","transform","getNavItem","id","data","title","toUpperCase","substring","icon","undefined","iconActive","submenu","groups","map","group","links","link","getSubItem","getGroup","navItems","calendar","schedule","calls","counter","dashboard","dispatch","tag","value","fleet","followUps","followUpsWithSubmenu","inventory","purchasing","purchasingWithSubmenu","accounting","accountingWithSubmenu","marketing","priceBook","pointOfSale","projects","reports","tasks","CallsNavigationTrigger","open","setOpen","onClickOutside","direction","trigger","Trigger","withDefaultRedirects","from","exact"],"mappings":"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"}
+{"version":3,"sources":["../../src/test/data.tsx"],"sourcesContent":["import { AnvilProvider } from '@servicetitan/anvil2';\nimport SvgPhone from '@servicetitan/anvil2/assets/icons/material/round/phone_disabled.svg';\nimport SvgPhoneActive from '@servicetitan/anvil2/assets/icons/material/round/phone_enabled.svg';\nimport SvgAccountingActive from '@servicetitan/anvil2/assets/icons/st/gnav_accounting_active.svg';\nimport SvgAccounting from '@servicetitan/anvil2/assets/icons/st/gnav_accounting_inactive.svg';\nimport SvgCallsActive from '@servicetitan/anvil2/assets/icons/st/gnav_calls_active.svg';\nimport SvgCalls from '@servicetitan/anvil2/assets/icons/st/gnav_calls_inactive.svg';\nimport SvgDashboardActive from '@servicetitan/anvil2/assets/icons/st/gnav_dashboard_active.svg';\nimport SvgDashboard from '@servicetitan/anvil2/assets/icons/st/gnav_dashboard_inactive.svg';\nimport SvgDispatchActive from '@servicetitan/anvil2/assets/icons/st/gnav_dispatch_active.svg';\nimport SvgDispatch from '@servicetitan/anvil2/assets/icons/st/gnav_dispatch_inactive.svg';\nimport SvgFleetProActive from '@servicetitan/anvil2/assets/icons/st/gnav_fleet_pro_active.svg';\nimport SvgFleetPro from '@servicetitan/anvil2/assets/icons/st/gnav_fleet_pro_inactive.svg';\nimport SvgFollowUpActive from '@servicetitan/anvil2/assets/icons/st/gnav_follow_up_active.svg';\nimport SvgFollowUp from '@servicetitan/anvil2/assets/icons/st/gnav_follow_up_inactive.svg';\nimport SvgInventoryActive from '@servicetitan/anvil2/assets/icons/st/gnav_inventory_active.svg';\nimport SvgInventory from '@servicetitan/anvil2/assets/icons/st/gnav_inventory_inactive.svg';\nimport SvgMarketingActive from '@servicetitan/anvil2/assets/icons/st/gnav_marketing_active.svg';\nimport SvgMarketing from '@servicetitan/anvil2/assets/icons/st/gnav_marketing_inactive.svg';\nimport SvgPosActive from '@servicetitan/anvil2/assets/icons/st/gnav_pos_active.svg';\nimport SvgPos from '@servicetitan/anvil2/assets/icons/st/gnav_pos_inactive.svg';\nimport SvgPriceBookActive from '@servicetitan/anvil2/assets/icons/st/gnav_pricebook_active.svg';\nimport SvgPriceBook from '@servicetitan/anvil2/assets/icons/st/gnav_pricebook_inactive.svg';\nimport SvgProjectsActive from '@servicetitan/anvil2/assets/icons/st/gnav_projects_active.svg';\nimport SvgProjects from '@servicetitan/anvil2/assets/icons/st/gnav_projects_inactive.svg';\nimport SvgReportsActive from '@servicetitan/anvil2/assets/icons/st/gnav_reports_active.svg';\nimport SvgReports from '@servicetitan/anvil2/assets/icons/st/gnav_reports_inactive.svg';\nimport SvgScheduleActive from '@servicetitan/anvil2/assets/icons/st/gnav_schedule_active.svg';\nimport SvgSchedule from '@servicetitan/anvil2/assets/icons/st/gnav_schedule_inactive.svg';\nimport SvgTasksActive from '@servicetitan/anvil2/assets/icons/st/gnav_tasks_active.svg';\nimport SvgTasks from '@servicetitan/anvil2/assets/icons/st/gnav_tasks_inactive.svg';\n\nimport { BodyText, Popover } from '@servicetitan/design-system';\n\nimport classNames from 'classnames';\nimport { FC, Fragment, forwardRef, useLayoutEffect, useRef, useState } from 'react';\n// needed only for storybook and added in root dependencies\n// eslint-disable-next-line import/no-extraneous-dependencies\nimport { MemoryRouter, Redirect, Switch, useHistory, useLocation } from 'react-router-dom';\nimport { TitanLayout } from '../components/titan-layout';\nimport {\n    NavigationItemData,\n    NavigationSubmenuGroupData,\n    NavigationSubmenuItemData,\n} from '../utils/navigation';\nimport { NavLinkComponentProps } from '../utils/navigation-context';\nimport * as Styles from './data-stories.module.less';\n\nexport const NavLinkMock = forwardRef<any, NavLinkComponentProps>(\n    ({ to, children, activeClassName, className, isActive, ...rest }, ref) => {\n        const history = useHistory();\n        const location = useLocation();\n        const linkActive = location.pathname.startsWith(to);\n\n        return (\n            <a\n                {...rest}\n                onClick={e => {\n                    e.preventDefault();\n\n                    if (!to.startsWith('http')) {\n                        history.replace(to);\n                    }\n                }}\n                className={classNames(className, linkActive ? activeClassName : '')}\n                href={to}\n                ref={ref}\n            >\n                {children}\n            </a>\n        );\n    }\n);\n\nexport const LocationInfo: FC<{ className?: string }> = ({ className }) => {\n    const location = useLocation();\n\n    return <BodyText className={className}>current location - {location.pathname}</BodyText>;\n};\n\nexport const CssInfo: FC<{ className?: string }> = ({ className }) => {\n    const ref = useRef<HTMLDivElement>(null);\n    const [info, setInfo] = useState({ 'offset': '', 'nav-offset-top': '' });\n\n    useLayoutEffect(() => {\n        const interval = setInterval(() => {\n            const el = ref.current;\n\n            if (!el) {\n                return;\n            }\n\n            // eslint-disable-next-line no-restricted-globals\n            const st = getComputedStyle(el);\n\n            setInfo({\n                'offset': st.getPropertyValue('--offset'),\n                'nav-offset-top': st.getPropertyValue('--nav-offset-top'),\n            });\n        }, 100);\n\n        return () => clearInterval(interval);\n    }, []);\n\n    return (\n        <div className={className} ref={ref}>\n            <p>CSS variables:</p>\n            {Object.entries(info).map(([key, value]) => (\n                <p key={key}>\n                    --{key} - {value}\n                </p>\n            ))}\n        </div>\n    );\n};\n\nexport const withMemoryRouter = (Story: any) => (\n    <MemoryRouter>\n        <Story />\n    </MemoryRouter>\n);\n\nexport const withAnvil = (Story: any) => (\n    <AnvilProvider className={Styles.fixIcons}>\n        <Story />\n    </AnvilProvider>\n);\n\nexport const InventoryIcon = () => (\n    <svg width=\"20\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"-293 385 24 24\" fill=\"currentColor\">\n        <polyline points=\"-288,400.9 -282,404.3 -282,397.6 -288,394.2 -288,400.9 \" />\n        <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\" />\n    </svg>\n);\n\nexport const SearchIcon = () => (\n    <svg\n        width=\"1em\"\n        height=\"1em\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n    >\n        <g transform=\"translate(0,4)\">\n            <path\n                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\"\n                fill=\"white\"\n            />\n        </g>\n    </svg>\n);\n\nconst getNavItem = (id: string, data: Partial<NavigationItemData>): NavigationItemData => ({\n    id,\n    to: '/' + id,\n    title: id[0].toUpperCase() + id.substring(1),\n    icon: undefined,\n    iconActive: undefined,\n    ...data,\n    submenu: data.submenu\n        ? {\n              ...data.submenu,\n              groups: data.submenu.groups.map(group => ({\n                  ...group,\n                  links: group.links.map(link => ({\n                      ...link,\n                      to: `/${id}/${link.to}`,\n                  })),\n              })),\n          }\n        : undefined,\n});\n\nconst getSubItem = (\n    id: string,\n    data: Partial<NavigationSubmenuItemData>\n): NavigationSubmenuItemData => ({\n    id,\n    to: id,\n    title: id[0].toUpperCase() + id.substring(1),\n    ...data,\n});\n\nconst getGroup = (\n    title: string,\n    links: NavigationSubmenuItemData[]\n): NavigationSubmenuGroupData => ({\n    title,\n    links,\n});\n\nexport const navItems = {\n    calendar: getNavItem('calendar', {\n        icon: SvgSchedule,\n        iconActive: SvgScheduleActive,\n    }),\n    schedule: getNavItem('schedule', {\n        icon: SvgSchedule,\n        iconActive: SvgScheduleActive,\n    }),\n    calls: getNavItem('calls', {\n        icon: SvgCalls,\n        iconActive: SvgCallsActive,\n        counter: 1234,\n    }),\n    dashboard: getNavItem('dashboard', {\n        icon: SvgDashboard,\n        iconActive: SvgDashboardActive,\n    }),\n    dispatch: getNavItem('dispatch', {\n        icon: SvgDispatch,\n        iconActive: SvgDispatchActive,\n        tag: { value: 3 },\n    }),\n    fleet: getNavItem('fleet', {\n        icon: SvgFleetPro,\n        iconActive: SvgFleetProActive,\n        title: 'Fleet Pro',\n    }),\n    followUps: getNavItem('followUps', {\n        icon: SvgFollowUp,\n        iconActive: SvgFollowUpActive,\n        title: 'Follow Up',\n    }),\n    followUpsWithSubmenu: getNavItem('followUps', {\n        icon: SvgFollowUp,\n        iconActive: SvgFollowUpActive,\n        title: 'Follow Up',\n        submenu: {\n            groups: [\n                getGroup('', [\n                    getSubItem('estimates', { title: 'Unsold Estimates' }),\n                    getSubItem('sold', { title: 'Sold Estimates' }),\n                    getSubItem('surveys', { title: 'Surveys' }),\n                ]),\n            ],\n        },\n    }),\n    inventory: getNavItem('inventory', {\n        icon: SvgInventory,\n        iconActive: SvgInventoryActive,\n    }),\n    purchasing: getNavItem('purchasing', {}),\n    purchasingWithSubmenu: getNavItem('purchasing', {\n        icon: SvgInventory,\n        iconActive: SvgInventoryActive,\n        counter: true,\n        submenu: {\n            groups: [\n                getGroup('Purchase', [\n                    getSubItem('repl', { title: 'Replenishment' }),\n                    getSubItem('orders', { title: 'Purchase Orders' }),\n                    getSubItem('receipts', { title: 'Receipts' }),\n                    getSubItem('returns', { title: 'Returns' }),\n                ]),\n            ],\n        },\n    }),\n    accounting: getNavItem('accounting', {\n        icon: SvgAccounting,\n        iconActive: SvgAccountingActive,\n        counter: true,\n    }),\n    accountingWithSubmenu: getNavItem('accounting', {\n        icon: SvgAccounting,\n        iconActive: SvgAccountingActive,\n        counter: 1,\n        submenu: {\n            groups: [\n                getGroup('Accounts Receivable', [\n                    getSubItem('export', {\n                        title: 'Batch/Export Transactions',\n                        counter: true,\n                    }),\n                    getSubItem('ar', { title: 'AR Management' }),\n                    getSubItem('invoices', { title: 'Invoices', counter: 3 }),\n                    getSubItem('payments', { title: 'Customer Payments', counter: 2 }),\n                    getSubItem('deposits', { title: 'Bank Deposits' }),\n                ]),\n                getGroup('Accounts Payable', [getSubItem('bills', { title: 'Bills' })]),\n                getGroup('Financing', [getSubItem('dashboard', { title: 'Dashboard' })]),\n                getGroup('Others', [getSubItem('at', { title: 'Accounting Audit Trail' })]),\n            ],\n        },\n    }),\n    marketing: getNavItem('marketing', {\n        icon: SvgMarketing,\n        iconActive: SvgMarketingActive,\n    }),\n    priceBook: getNavItem('pricebook', {\n        icon: SvgPriceBook,\n        iconActive: SvgPriceBookActive,\n    }),\n    pointOfSale: getNavItem('pointOfSale', {\n        icon: SvgPos,\n        iconActive: SvgPosActive,\n        title: 'Point Of Sale',\n    }),\n    projects: getNavItem('projects', {\n        icon: SvgProjects,\n        iconActive: SvgProjectsActive,\n    }),\n    reports: getNavItem('reports', {\n        icon: SvgReports,\n        iconActive: SvgReportsActive,\n    }),\n    tasks: getNavItem('tasks', {\n        icon: SvgTasks,\n        iconActive: SvgTasksActive,\n    }),\n};\n\nexport const CallsNavigationTrigger = () => {\n    const [open, setOpen] = useState(false);\n\n    return (\n        <Popover\n            open={open}\n            onClickOutside={() => setOpen(false)}\n            direction=\"bl\"\n            trigger={\n                <TitanLayout.Trigger\n                    id=\"dialpad\"\n                    counter={2}\n                    title=\"Calls\"\n                    icon={SvgPhone}\n                    iconActive={SvgPhoneActive}\n                    onClick={() => setOpen(!open)}\n                    isActive={open}\n                />\n            }\n        >\n            calls content\n        </Popover>\n    );\n};\n\nexport const withDefaultRedirects = (Story: any) => (\n    <Fragment>\n        <Switch>\n            <Redirect from=\"/accounting\" exact to=\"/accounting/export\" />\n            <Redirect from=\"/purchasing\" exact to=\"/purchasing/repl\" />\n            <Redirect from=\"/followUps\" exact to=\"/followUps/sold\" />\n        </Switch>\n        <Story />\n    </Fragment>\n);\n"],"names":["AnvilProvider","SvgPhone","SvgPhoneActive","SvgAccountingActive","SvgAccounting","SvgCallsActive","SvgCalls","SvgDashboardActive","SvgDashboard","SvgDispatchActive","SvgDispatch","SvgFleetProActive","SvgFleetPro","SvgFollowUpActive","SvgFollowUp","SvgInventoryActive","SvgInventory","SvgMarketingActive","SvgMarketing","SvgPosActive","SvgPos","SvgPriceBookActive","SvgPriceBook","SvgProjectsActive","SvgProjects","SvgReportsActive","SvgReports","SvgScheduleActive","SvgSchedule","SvgTasksActive","SvgTasks","BodyText","Popover","classNames","Fragment","forwardRef","useLayoutEffect","useRef","useState","MemoryRouter","Redirect","Switch","useHistory","useLocation","TitanLayout","Styles","NavLinkMock","to","children","activeClassName","className","isActive","rest","ref","history","location","linkActive","pathname","startsWith","a","onClick","e","preventDefault","replace","href","LocationInfo","CssInfo","info","setInfo","interval","setInterval","el","current","st","getComputedStyle","getPropertyValue","clearInterval","div","p","Object","entries","map","key","value","withMemoryRouter","Story","withAnvil","fixIcons","InventoryIcon","svg","width","xmlns","viewBox","fill","polyline","points","path","d","SearchIcon","height","g","transform","getNavItem","id","data","title","toUpperCase","substring","icon","undefined","iconActive","submenu","groups","group","links","link","getSubItem","getGroup","navItems","calendar","schedule","calls","counter","dashboard","dispatch","tag","fleet","followUps","followUpsWithSubmenu","inventory","purchasing","purchasingWithSubmenu","accounting","accountingWithSubmenu","marketing","priceBook","pointOfSale","projects","reports","tasks","CallsNavigationTrigger","open","setOpen","onClickOutside","direction","trigger","Trigger","withDefaultRedirects","from","exact"],"mappings":"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"}

package/dist/test/titan-layout.d.ts

@@ -1,6 +1,7 @@
 import { TitanLayoutProps } from '../components/titan-layout';
 export interface LayoutContentArgs {
     header: boolean;
+    headerFixed: boolean;
     sideTop: boolean;
     extraText: boolean;
     search: boolean;

package/dist/test/titan-layout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"titan-layout.d.ts","sourceRoot":"","sources":["../../src/test/titan-layout.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAE9D,MAAM,WAAW,iBAAiB;IAC9B,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,aAAa,EAAE,OAAO,CAAC;CAC1B;AAED,eAAO,MAAM,cAAc,QAAO,iBAUhC,CAAC;AAGH,eAAO,MAAM,sBAAsB,GAAI,OAAO,OAAO,CAAC,gBAAgB,CAAC,MAAM,OAAO,GAAG,4CAItF,CAAC;AACF,eAAO,MAAM,qBAAqB,iCAAwC,CAAC"}
+{"version":3,"file":"titan-layout.d.ts","sourceRoot":"","sources":["../../src/test/titan-layout.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAE9D,MAAM,WAAW,iBAAiB;IAC9B,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,EAAE,OAAO,CAAC;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,aAAa,EAAE,OAAO,CAAC;CAC1B;AAED,eAAO,MAAM,cAAc,QAAO,iBAWhC,CAAC;AAGH,eAAO,MAAM,sBAAsB,GAAI,OAAO,OAAO,CAAC,gBAAgB,CAAC,MAAM,OAAO,GAAG,4CAItF,CAAC;AACF,eAAO,MAAM,qBAAqB,iCAAwC,CAAC"}

package/dist/test/titan-layout.js

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext } from 'react';
 export const getDefaultArgs = ()=>({
         header: true,
+        headerFixed: true,
         sideTop: true,
         extraText: true,
         search: true,

package/dist/test/titan-layout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/test/titan-layout.tsx"],"sourcesContent":["import { createContext, useContext } from 'react';\nimport { TitanLayoutProps } from '../components/titan-layout';\n\nexport interface LayoutContentArgs {\n    header: boolean;\n    sideTop: boolean;\n    extraText: boolean;\n    search: boolean;\n    longContent: boolean;\n    wideContent: boolean;\n    minWidth: boolean;\n    emptyNav: boolean;\n    overflowItems: boolean;\n}\n\nexport const getDefaultArgs = (): LayoutContentArgs => ({\n    header: true,\n    sideTop: true,\n    extraText: true,\n    search: true,\n    longContent: true,\n    wideContent: false,\n    minWidth: false,\n    emptyNav: false,\n    overflowItems: true,\n});\n\nconst DefaultPropsContext = createContext<Partial<TitanLayoutProps>>({});\nexport const withDefaultLayoutProps = (props: Partial<TitanLayoutProps>) => (Story: any) => (\n    <DefaultPropsContext.Provider value={props}>\n        <Story />\n    </DefaultPropsContext.Provider>\n);\nexport const useDefaultLayoutProps = () => useContext(DefaultPropsContext);\n"],"names":["createContext","useContext","getDefaultArgs","header","sideTop","extraText","search","longContent","wideContent","minWidth","emptyNav","overflowItems","DefaultPropsContext","withDefaultLayoutProps","props","Story","Provider","value","useDefaultLayoutProps"],"mappings":";AAAA,SAASA,aAAa,EAAEC,UAAU,QAAQ,QAAQ;AAelD,OAAO,MAAMC,iBAAiB,IAA0B,CAAA;QACpDC,QAAQ;QACRC,SAAS;QACTC,WAAW;QACXC,QAAQ;QACRC,aAAa;QACbC,aAAa;QACbC,UAAU;QACVC,UAAU;QACVC,eAAe;IACnB,CAAA,EAAG;AAEH,MAAMC,oCAAsBZ,cAAyC,CAAC;AACtE,OAAO,MAAMa,yBAAyB,CAACC,QAAqC,CAACC,sBACzE,KAACH,oBAAoBI,QAAQ;YAACC,OAAOH;sBACjC,cAAA,KAACC;WAEP;AACF,OAAO,MAAMG,wBAAwB,IAAMjB,WAAWW,qBAAqB"}
+{"version":3,"sources":["../../src/test/titan-layout.tsx"],"sourcesContent":["import { createContext, useContext } from 'react';\nimport { TitanLayoutProps } from '../components/titan-layout';\n\nexport interface LayoutContentArgs {\n    header: boolean;\n    headerFixed: boolean;\n    sideTop: boolean;\n    extraText: boolean;\n    search: boolean;\n    longContent: boolean;\n    wideContent: boolean;\n    minWidth: boolean;\n    emptyNav: boolean;\n    overflowItems: boolean;\n}\n\nexport const getDefaultArgs = (): LayoutContentArgs => ({\n    header: true,\n    headerFixed: true,\n    sideTop: true,\n    extraText: true,\n    search: true,\n    longContent: true,\n    wideContent: false,\n    minWidth: false,\n    emptyNav: false,\n    overflowItems: true,\n});\n\nconst DefaultPropsContext = createContext<Partial<TitanLayoutProps>>({});\nexport const withDefaultLayoutProps = (props: Partial<TitanLayoutProps>) => (Story: any) => (\n    <DefaultPropsContext.Provider value={props}>\n        <Story />\n    </DefaultPropsContext.Provider>\n);\nexport const useDefaultLayoutProps = () => useContext(DefaultPropsContext);\n"],"names":["createContext","useContext","getDefaultArgs","header","headerFixed","sideTop","extraText","search","longContent","wideContent","minWidth","emptyNav","overflowItems","DefaultPropsContext","withDefaultLayoutProps","props","Story","Provider","value","useDefaultLayoutProps"],"mappings":";AAAA,SAASA,aAAa,EAAEC,UAAU,QAAQ,QAAQ;AAgBlD,OAAO,MAAMC,iBAAiB,IAA0B,CAAA;QACpDC,QAAQ;QACRC,aAAa;QACbC,SAAS;QACTC,WAAW;QACXC,QAAQ;QACRC,aAAa;QACbC,aAAa;QACbC,UAAU;QACVC,UAAU;QACVC,eAAe;IACnB,CAAA,EAAG;AAEH,MAAMC,oCAAsBb,cAAyC,CAAC;AACtE,OAAO,MAAMc,yBAAyB,CAACC,QAAqC,CAACC,sBACzE,KAACH,oBAAoBI,QAAQ;YAACC,OAAOH;sBACjC,cAAA,KAACC;WAEP;AACF,OAAO,MAAMG,wBAAwB,IAAMlB,WAAWY,qBAAqB"}

package/dist/utils/use-breakpoint.d.ts

@@ -2,6 +2,7 @@ import { BreakpointReturnProps } from '@servicetitan/anvil2';
 export interface TitanBreakpoint {
     name: BreakpointReturnProps['name'];
     isMobile: boolean;
+    isTouchDevice: boolean;
     width: number;
 }
 export declare const useTitanBreakpoint: () => TitanBreakpoint;

package/dist/utils/use-breakpoint.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-breakpoint.d.ts","sourceRoot":"","sources":["../../src/utils/use-breakpoint.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAiB,MAAM,sBAAsB,CAAC;AAG5E,MAAM,WAAW,eAAe;IAC5B,IAAI,EAAE,qBAAqB,CAAC,MAAM,CAAC,CAAC;IACpC,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,kBAAkB,QAAO,eAWrC,CAAC"}
+{"version":3,"file":"use-breakpoint.d.ts","sourceRoot":"","sources":["../../src/utils/use-breakpoint.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAiB,MAAM,sBAAsB,CAAC;AAG5E,MAAM,WAAW,eAAe;IAC5B,IAAI,EAAE,qBAAqB,CAAC,MAAM,CAAC,CAAC;IACpC,QAAQ,EAAE,OAAO,CAAC;IAClB,aAAa,EAAE,OAAO,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;CACjB;AAID,eAAO,MAAM,kBAAkB,QAAO,eAYrC,CAAC"}

package/dist/utils/use-breakpoint.js

@@ -1,5 +1,6 @@
 import { useBreakpoint } from '@servicetitan/anvil2';
 import { useMemo } from 'react';
+const isTouchDevice = ()=>window.matchMedia('(any-pointer: coarse)').matches;
 export const useTitanBreakpoint = ()=>{
     const breakpoint = useBreakpoint();
     return useMemo(()=>{
@@ -7,6 +8,7 @@ export const useTitanBreakpoint = ()=>{
         return {
             name: (_breakpoint_name = breakpoint === null || breakpoint === void 0 ? void 0 : breakpoint.name) !== null && _breakpoint_name !== void 0 ? _breakpoint_name : 'xl',
             isMobile: breakpoint ? breakpoint.innerWidth < 768 : false,
+            isTouchDevice: isTouchDevice(),
             width: (_breakpoint_innerWidth = breakpoint === null || breakpoint === void 0 ? void 0 : breakpoint.innerWidth) !== null && _breakpoint_innerWidth !== void 0 ? _breakpoint_innerWidth : 0
         };
     }, [

package/dist/utils/use-breakpoint.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/use-breakpoint.ts"],"sourcesContent":["import { BreakpointReturnProps, useBreakpoint } from '@servicetitan/anvil2';\nimport { useMemo } from 'react';\n\nexport interface TitanBreakpoint {\n    name: BreakpointReturnProps['name'];\n    isMobile: boolean;\n    width: number;\n}\n\nexport const useTitanBreakpoint = (): TitanBreakpoint => {\n    const breakpoint = useBreakpoint();\n\n    return useMemo(\n        () => ({\n            name: breakpoint?.name ?? 'xl',\n            isMobile: breakpoint ? breakpoint.innerWidth < 768 : false,\n            width: breakpoint?.innerWidth ?? 0,\n        }),\n        [breakpoint]\n    );\n};\n"],"names":["useBreakpoint","useMemo","useTitanBreakpoint","breakpoint","name","isMobile","innerWidth","width"],"mappings":"AAAA,SAAgCA,aAAa,QAAQ,uBAAuB;AAC5E,SAASC,OAAO,QAAQ,QAAQ;AAQhC,OAAO,MAAMC,qBAAqB;IAC9B,MAAMC,aAAaH;IAEnB,OAAOC,QACH;YACUE,kBAECA;eAHJ;YACHC,MAAMD,CAAAA,mBAAAA,uBAAAA,iCAAAA,WAAYC,IAAI,cAAhBD,8BAAAA,mBAAoB;YAC1BE,UAAUF,aAAaA,WAAWG,UAAU,GAAG,MAAM;YACrDC,OAAOJ,CAAAA,yBAAAA,uBAAAA,iCAAAA,WAAYG,UAAU,cAAtBH,oCAAAA,yBAA0B;QACrC;OACA;QAACA;KAAW;AAEpB,EAAE"}
+{"version":3,"sources":["../../src/utils/use-breakpoint.ts"],"sourcesContent":["import { BreakpointReturnProps, useBreakpoint } from '@servicetitan/anvil2';\nimport { useMemo } from 'react';\n\nexport interface TitanBreakpoint {\n    name: BreakpointReturnProps['name'];\n    isMobile: boolean;\n    isTouchDevice: boolean;\n    width: number;\n}\n\nconst isTouchDevice = () => window.matchMedia('(any-pointer: coarse)').matches;\n\nexport const useTitanBreakpoint = (): TitanBreakpoint => {\n    const breakpoint = useBreakpoint();\n\n    return useMemo(\n        () => ({\n            name: breakpoint?.name ?? 'xl',\n            isMobile: breakpoint ? breakpoint.innerWidth < 768 : false,\n            isTouchDevice: isTouchDevice(),\n            width: breakpoint?.innerWidth ?? 0,\n        }),\n        [breakpoint]\n    );\n};\n"],"names":["useBreakpoint","useMemo","isTouchDevice","window","matchMedia","matches","useTitanBreakpoint","breakpoint","name","isMobile","innerWidth","width"],"mappings":"AAAA,SAAgCA,aAAa,QAAQ,uBAAuB;AAC5E,SAASC,OAAO,QAAQ,QAAQ;AAShC,MAAMC,gBAAgB,IAAMC,OAAOC,UAAU,CAAC,yBAAyBC,OAAO;AAE9E,OAAO,MAAMC,qBAAqB;IAC9B,MAAMC,aAAaP;IAEnB,OAAOC,QACH;YACUM,kBAGCA;eAJJ;YACHC,MAAMD,CAAAA,mBAAAA,uBAAAA,iCAAAA,WAAYC,IAAI,cAAhBD,8BAAAA,mBAAoB;YAC1BE,UAAUF,aAAaA,WAAWG,UAAU,GAAG,MAAM;YACrDR,eAAeA;YACfS,OAAOJ,CAAAA,yBAAAA,uBAAAA,iCAAAA,WAAYG,UAAU,cAAtBH,oCAAAA,yBAA0B;QACrC;OACA;QAACA;KAAW;AAEpB,EAAE"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/navigation",
-    "version": "13.1.4",
+    "version": "13.2.0-canary.270.b4a066f.0",
     "description": "Navigation components",
     "repository": {
         "type": "git",
@@ -26,7 +26,7 @@
         "react": ">=18.0.0"
     },
     "devDependencies": {
-        "@servicetitan/anvil2": "~1.49.7",
+        "@servicetitan/anvil2": "~1.51.0",
         "@servicetitan/design-system": "~14.5.1",
         "@servicetitan/react-ioc": "^33.1.0",
         "@servicetitan/tokens": ">=12.1.11",
@@ -42,5 +42,5 @@
         "less": true,
         "webpack": false
     },
-    "gitHead": "34dcba243deb5c93ca126328ccd5d63fc9248403"
+    "gitHead": "b4a066f5337652cf5e986216c705a6e44c328186"
 }

package/src/components/titan-layout/layout-context.tsx

@@ -19,7 +19,7 @@ export interface TitanLayoutContextType {
 
 export const LayoutContext = createContext<TitanLayoutContextType>({
     NavigationComponent: DefaultNavLinkComponent,
-    breakpoint: { name: 'lg', isMobile: false, width: 0 },
+    breakpoint: { name: 'lg', isMobile: false, isTouchDevice: false, width: 0 },
     isTitanLayout: false,
     sidebar: { styles: { popoverContent: {} } },
 });

package/src/components/titan-layout/layout-header.module.less

@@ -24,7 +24,7 @@
 .header {
     --nav-top-content-height: 32px;
 
-    height: var(--nav-offset-top);
+    height: var(--nav-top-height);
     display: flex;
     justify-content: space-between;
 

package/src/components/titan-layout/layout-sidebar.tsx

@@ -23,6 +23,7 @@ export interface LayoutSidebarProps {
     submenusExpanded: string[] | undefined;
     drawerOpened: boolean;
     mobile: boolean;
+    touchDevice: boolean;
     navigationComponent: FC<NavLinkComponentProps>;
     onBarExpandChange(expanded: boolean): void;
     onDrawerOpenChange(expanded: boolean): void;
@@ -32,6 +33,7 @@ export interface LayoutSidebarProps {
 export const LayoutSidebar: FC<LayoutSidebarProps> = ({
     className,
     mobile,
+    touchDevice,
     barExpanded,
     submenusExpanded,
     drawerOpened,
@@ -90,6 +92,7 @@ export const LayoutSidebar: FC<LayoutSidebarProps> = ({
                                     }
                                     onSubmenuExpand={onSubmenuExpandChange}
                                     navigationComponent={navigationComponent}
+                                    touchDevice={touchDevice}
                                 />
                             ) : (
                                 <InternalSideNavigationLink
@@ -123,10 +126,18 @@ LayoutSidebar.displayName = 'LayoutSidebar';
 const SideNavigationGroupItem: FC<{
     item: NavigationItemData;
     navigationComponent: FC<NavLinkComponentProps>;
+    touchDevice: boolean;
     barExpanded: boolean;
     submenuExpanded: boolean;
     onSubmenuExpand: (id: string, expanded: boolean, force: boolean) => void;
-}> = ({ item, onSubmenuExpand, barExpanded, submenuExpanded, navigationComponent }) => {
+}> = ({
+    item,
+    onSubmenuExpand,
+    barExpanded,
+    submenuExpanded,
+    navigationComponent,
+    touchDevice,
+}) => {
     const {
         sidebar: {
             styles: { popoverContent },
@@ -156,7 +167,7 @@ const SideNavigationGroupItem: FC<{
             />
         </InternalSideNavigationGroup>
     ) : (
-        <Popover placement="right-start" openOnHover delay={300}>
+        <Popover placement="right-start" openOnHover={!touchDevice} delay={300}>
             <Popover.Trigger>
                 {(triggerProps: any) => (
                     <div {...triggerProps}>

package/src/components/titan-layout/titan-layout-default.stories.tsx

@@ -9,6 +9,7 @@ import { Page as Anvil1Page } from '@servicetitan/design-system';
 import { Fragment, useEffect, useState } from 'react';
 import {
     CallsNavigationTrigger,
+    CssInfo,
     LocationInfo,
     NavLinkMock,
     navItems,
@@ -176,7 +177,6 @@ const ContentHeader = () => {
 
     return (
         <Fragment>
-            <Announcement title="Some info" status="info" />
             <Announcement title="Some warning" status="warning" />
             <div
                 className="d-f justify-content-center align-items-center bg-purple-100-i"
@@ -192,6 +192,9 @@ const ContentHeader = () => {
         </Fragment>
     );
 };
+const ContentHeaderFixed = () => {
+    return <Announcement title="Some info" status="info" />;
+};
 const SearchBar = () => (
     <TextField size="small" placeholder="Search" className="w-100-i m-x-half-i" />
 );
@@ -210,6 +213,7 @@ const useLayoutProps = (args: LayoutContentArgs): TitanLayoutProps => {
         profile,
         top: args.search ? <SearchBar /> : undefined,
         header: args.header ? <ContentHeader /> : undefined,
+        headerFixed: args.headerFixed ? <ContentHeaderFixed /> : undefined,
 
         logo: { title: true },
 
@@ -239,6 +243,7 @@ const Content = (args: LayoutContentArgs & { stickyHeader?: boolean }) => {
                 </div>
             )}
             <LocationInfo className="m-b-3" />
+            <CssInfo className="bg-neutral-30 p-2" />
             <div className="m-b-3">component rendered - {info}</div>
             <div className="m-b-3">rerendered - {new Date().toLocaleTimeString()}</div>
             {args.wideContent && (
@@ -329,6 +334,15 @@ const Content = (args: LayoutContentArgs & { stickyHeader?: boolean }) => {
     );
 };
 
+const Anvil2Content = (args: LayoutContentArgs) => (
+    <Anvil2Page>
+        <Anvil2Page.Sidebar>page sidebar</Anvil2Page.Sidebar>
+        <Anvil2Page.Content>
+            <Content {...args} />
+        </Anvil2Page.Content>
+    </Anvil2Page>
+);
+
 export const ContentLegacy = (args: LayoutContentArgs) => (
     <TitanLayout {...useLayoutProps(args)} appearance="legacy" {...useDefaultLayoutProps()}>
         <div
@@ -350,11 +364,7 @@ export const ContentAnvil1 = (args: LayoutContentArgs) => (
 
 export const ContentAnvil2 = (args: LayoutContentArgs) => (
     <TitanLayout {...useLayoutProps(args)} appearance="anvil2" {...useDefaultLayoutProps()}>
-        <Anvil2Page>
-            <Anvil2Page.Content>
-                <Content {...args} />
-            </Anvil2Page.Content>
-        </Anvil2Page>
+        <Anvil2Content {...args} />
     </TitanLayout>
 );
 
@@ -393,11 +403,7 @@ export const ExtraWithTitle = (args: LayoutContentArgs) => (
         }
         {...useDefaultLayoutProps()}
     >
-        <Anvil2Page>
-            <Anvil2Page.Content>
-                <Content {...args} />
-            </Anvil2Page.Content>
-        </Anvil2Page>
+        <Anvil2Content {...args} />
     </TitanLayout>
 );
 
@@ -421,11 +427,7 @@ export const ExtraWithFlashing = (args: LayoutContentArgs) => (
         }
         {...useDefaultLayoutProps()}
     >
-        <Anvil2Page>
-            <Anvil2Page.Content>
-                <Content {...args} />
-            </Anvil2Page.Content>
-        </Anvil2Page>
+        <Anvil2Content {...args} />
     </TitanLayout>
 );
 
@@ -449,10 +451,6 @@ export const ExtraWithTitleFlashing = (args: LayoutContentArgs) => (
         }
         {...useDefaultLayoutProps()}
     >
-        <Anvil2Page>
-            <Anvil2Page.Content>
-                <Content {...args} />
-            </Anvil2Page.Content>
-        </Anvil2Page>
+        <Anvil2Content {...args} />
     </TitanLayout>
 );