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

package/dist/components/titan-layout/layout-context.js

@@ -5,6 +5,7 @@ export const LayoutContext = /*#__PURE__*/ createContext({
     breakpoint: {
         name: 'lg',
         isMobile: false,
+        isTouchDevice: false,
         width: 0
     },
     isTitanLayout: false,

package/dist/components/titan-layout/layout-context.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/titan-layout/layout-context.tsx"],"sourcesContent":["import { CSSProperties, FC, createContext, useContext } from 'react';\nimport { DefaultNavLinkComponent, NavLinkComponentProps } from '../../utils/navigation-context';\nimport { TitanBreakpoint } from '../../utils/use-breakpoint';\n\nexport interface TitanLayoutSidebarContextType {\n    styles: {\n        popoverContent: CSSProperties;\n    };\n}\n\nexport type TitanLayoutPlacement = 'top' | 'side' | 'unset';\n\nexport interface TitanLayoutContextType {\n    NavigationComponent: FC<NavLinkComponentProps>;\n    breakpoint: TitanBreakpoint;\n    isTitanLayout: boolean;\n    sidebar: TitanLayoutSidebarContextType;\n}\n\nexport const LayoutContext = createContext<TitanLayoutContextType>({\n    NavigationComponent: DefaultNavLinkComponent,\n    breakpoint: { name: 'lg', isMobile: false, width: 0 },\n    isTitanLayout: false,\n    sidebar: { styles: { popoverContent: {} } },\n});\n\nexport const useTitanLayoutContext = () => useContext(LayoutContext);\n\nexport const LayoutPlacementContext = createContext<TitanLayoutPlacement | undefined>(undefined);\nexport const useTitanLayoutPlacementContext = () => useContext(LayoutPlacementContext);\n"],"names":["createContext","useContext","DefaultNavLinkComponent","LayoutContext","NavigationComponent","breakpoint","name","isMobile","width","isTitanLayout","sidebar","styles","popoverContent","useTitanLayoutContext","LayoutPlacementContext","undefined","useTitanLayoutPlacementContext"],"mappings":"AAAA,SAA4BA,aAAa,EAAEC,UAAU,QAAQ,QAAQ;AACrE,SAASC,uBAAuB,QAA+B,iCAAiC;AAkBhG,OAAO,MAAMC,8BAAgBH,cAAsC;IAC/DI,qBAAqBF;IACrBG,YAAY;QAAEC,MAAM;QAAMC,UAAU;QAAOC,OAAO;IAAE;IACpDC,eAAe;IACfC,SAAS;QAAEC,QAAQ;YAAEC,gBAAgB,CAAC;QAAE;IAAE;AAC9C,GAAG;AAEH,OAAO,MAAMC,wBAAwB,IAAMZ,WAAWE,eAAe;AAErE,OAAO,MAAMW,uCAAyBd,cAAgDe,WAAW;AACjG,OAAO,MAAMC,iCAAiC,IAAMf,WAAWa,wBAAwB"}
+{"version":3,"sources":["../../../src/components/titan-layout/layout-context.tsx"],"sourcesContent":["import { CSSProperties, FC, createContext, useContext } from 'react';\nimport { DefaultNavLinkComponent, NavLinkComponentProps } from '../../utils/navigation-context';\nimport { TitanBreakpoint } from '../../utils/use-breakpoint';\n\nexport interface TitanLayoutSidebarContextType {\n    styles: {\n        popoverContent: CSSProperties;\n    };\n}\n\nexport type TitanLayoutPlacement = 'top' | 'side' | 'unset';\n\nexport interface TitanLayoutContextType {\n    NavigationComponent: FC<NavLinkComponentProps>;\n    breakpoint: TitanBreakpoint;\n    isTitanLayout: boolean;\n    sidebar: TitanLayoutSidebarContextType;\n}\n\nexport const LayoutContext = createContext<TitanLayoutContextType>({\n    NavigationComponent: DefaultNavLinkComponent,\n    breakpoint: { name: 'lg', isMobile: false, isTouchDevice: false, width: 0 },\n    isTitanLayout: false,\n    sidebar: { styles: { popoverContent: {} } },\n});\n\nexport const useTitanLayoutContext = () => useContext(LayoutContext);\n\nexport const LayoutPlacementContext = createContext<TitanLayoutPlacement | undefined>(undefined);\nexport const useTitanLayoutPlacementContext = () => useContext(LayoutPlacementContext);\n"],"names":["createContext","useContext","DefaultNavLinkComponent","LayoutContext","NavigationComponent","breakpoint","name","isMobile","isTouchDevice","width","isTitanLayout","sidebar","styles","popoverContent","useTitanLayoutContext","LayoutPlacementContext","undefined","useTitanLayoutPlacementContext"],"mappings":"AAAA,SAA4BA,aAAa,EAAEC,UAAU,QAAQ,QAAQ;AACrE,SAASC,uBAAuB,QAA+B,iCAAiC;AAkBhG,OAAO,MAAMC,8BAAgBH,cAAsC;IAC/DI,qBAAqBF;IACrBG,YAAY;QAAEC,MAAM;QAAMC,UAAU;QAAOC,eAAe;QAAOC,OAAO;IAAE;IAC1EC,eAAe;IACfC,SAAS;QAAEC,QAAQ;YAAEC,gBAAgB,CAAC;QAAE;IAAE;AAC9C,GAAG;AAEH,OAAO,MAAMC,wBAAwB,IAAMb,WAAWE,eAAe;AAErE,OAAO,MAAMY,uCAAyBf,cAAgDgB,WAAW;AACjG,OAAO,MAAMC,iCAAiC,IAAMhB,WAAWc,wBAAwB"}

package/dist/components/titan-layout/layout-sidebar.d.ts

@@ -10,6 +10,7 @@ export interface LayoutSidebarProps {
     submenusExpanded: string[] | undefined;
     drawerOpened: boolean;
     mobile: boolean;
+    touchDevice: boolean;
     navigationComponent: FC<NavLinkComponentProps>;
     onBarExpandChange(expanded: boolean): void;
     onDrawerOpenChange(expanded: boolean): void;

package/dist/components/titan-layout/layout-sidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"layout-sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-sidebar.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAY,EAAE,EAAY,YAAY,EAAkB,MAAM,OAAO,CAAC;AAC7E,OAAO,EAAE,kBAAkB,EAAyB,MAAM,wBAAwB,CAAC;AACnF,OAAO,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAWvE,MAAM,WAAW,kBAAkB;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,YAAY,EAAE,CAAC;IACrB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,SAAS,CAAC,EAAE,kBAAkB,EAAE,CAAC;IACjC,WAAW,EAAE,OAAO,CAAC;IACrB,gBAAgB,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;IACvC,YAAY,EAAE,OAAO,CAAC;IACtB,MAAM,EAAE,OAAO,CAAC;IAChB,mBAAmB,EAAE,EAAE,CAAC,qBAAqB,CAAC,CAAC;IAC/C,iBAAiB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;IAC3C,kBAAkB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;IAC5C,qBAAqB,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC;CAC9E;AAED,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAuFhD,CAAC"}
+{"version":3,"file":"layout-sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-sidebar.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAY,EAAE,EAAY,YAAY,EAAkB,MAAM,OAAO,CAAC;AAC7E,OAAO,EAAE,kBAAkB,EAAyB,MAAM,wBAAwB,CAAC;AACnF,OAAO,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAWvE,MAAM,WAAW,kBAAkB;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,YAAY,EAAE,CAAC;IACrB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,SAAS,CAAC,EAAE,kBAAkB,EAAE,CAAC;IACjC,WAAW,EAAE,OAAO,CAAC;IACrB,gBAAgB,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;IACvC,YAAY,EAAE,OAAO,CAAC;IACtB,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,EAAE,OAAO,CAAC;IACrB,mBAAmB,EAAE,EAAE,CAAC,qBAAqB,CAAC,CAAC;IAC/C,iBAAiB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;IAC3C,kBAAkB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;IAC5C,qBAAqB,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC;CAC9E;AAED,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAyFhD,CAAC"}

package/dist/components/titan-layout/layout-sidebar.js

@@ -7,7 +7,7 @@ import { getCounterTag, getSubmenuGroupTag } from '../../utils/side-nav';
 import { LayoutPlacementContext, useTitanLayoutContext } from './layout-context';
 import { InternalSideNavigationGroup, InternalSideNavigationGroupLink, InternalSideNavigationLink } from './layout-sidebar-links-internal';
 import * as Styles from './layout-sidebar.module.less';
-export const LayoutSidebar = ({ className, mobile, barExpanded, submenusExpanded, drawerOpened, onBarExpandChange, onSubmenuExpandChange, onDrawerOpenChange, mainItems, top, bottom, navigationComponent })=>{
+export const LayoutSidebar = ({ className, mobile, touchDevice, barExpanded, submenusExpanded, drawerOpened, onBarExpandChange, onSubmenuExpandChange, onDrawerOpenChange, mainItems, top, bottom, navigationComponent })=>{
     const closeDrawer = ()=>{
         if (mobile) {
             onDrawerOpenChange === null || onDrawerOpenChange === void 0 ? void 0 : onDrawerOpenChange(false);
@@ -49,7 +49,8 @@ export const LayoutSidebar = ({ className, mobile, barExpanded, submenusExpanded
                                     barExpanded: mobile ? drawerOpened : barExpanded,
                                     submenuExpanded: !!item.id && !!(submenusExpanded === null || submenusExpanded === void 0 ? void 0 : submenusExpanded.includes(item.id)),
                                     onSubmenuExpand: onSubmenuExpandChange,
-                                    navigationComponent: navigationComponent
+                                    navigationComponent: navigationComponent,
+                                    touchDevice: touchDevice
                                 }, item.id) : /*#__PURE__*/ _jsx(InternalSideNavigationLink, {
                                     id: item.id,
                                     to: item.to,
@@ -72,7 +73,7 @@ export const LayoutSidebar = ({ className, mobile, barExpanded, submenusExpanded
     });
 };
 LayoutSidebar.displayName = 'LayoutSidebar';
-/** Side Navigation menu item */ const SideNavigationGroupItem = ({ item, onSubmenuExpand, barExpanded, submenuExpanded, navigationComponent })=>{
+/** Side Navigation menu item */ const SideNavigationGroupItem = ({ item, onSubmenuExpand, barExpanded, submenuExpanded, navigationComponent, touchDevice })=>{
     var _item_submenu, _item_submenu1;
     const { sidebar: { styles: { popoverContent } } } = useTitanLayoutContext();
     const tag = getSubmenuGroupTag(item.submenu, getCounterTag(item.counter, item.tag));
@@ -96,7 +97,7 @@ LayoutSidebar.displayName = 'LayoutSidebar';
         })
     }) : /*#__PURE__*/ _jsxs(Popover, {
         placement: "right-start",
-        openOnHover: true,
+        openOnHover: !touchDevice,
         delay: 300,
         children: [
             /*#__PURE__*/ _jsx(Popover.Trigger, {

package/dist/components/titan-layout/layout-sidebar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/titan-layout/layout-sidebar.tsx"],"sourcesContent":["import { Icon, Popover, Text, ThemeProvider } from '@servicetitan/anvil2';\nimport SvgClose from '@servicetitan/anvil2/assets/icons/material/round/close.svg';\nimport classNames from 'classnames';\nimport { Children, FC, Fragment, ReactElement, isValidElement } from 'react';\nimport { NavigationItemData, NavigationSubmenuData } from '../../utils/navigation';\nimport { NavLinkComponentProps } from '../../utils/navigation-context';\nimport { getCounterTag, getSubmenuGroupTag } from '../../utils/side-nav';\nimport { NavigationComponentProps } from './interface-internal';\nimport { LayoutPlacementContext, useTitanLayoutContext } from './layout-context';\nimport {\n    InternalSideNavigationGroup,\n    InternalSideNavigationGroupLink,\n    InternalSideNavigationLink,\n} from './layout-sidebar-links-internal';\nimport * as Styles from './layout-sidebar.module.less';\n\nexport interface LayoutSidebarProps {\n    className?: string;\n    top?: ReactElement[];\n    bottom?: ReactElement;\n    mainItems?: NavigationItemData[];\n    barExpanded: boolean;\n    submenusExpanded: string[] | undefined;\n    drawerOpened: boolean;\n    mobile: boolean;\n    navigationComponent: FC<NavLinkComponentProps>;\n    onBarExpandChange(expanded: boolean): void;\n    onDrawerOpenChange(expanded: boolean): void;\n    onSubmenuExpandChange(id: string, expanded: boolean, force: boolean): void;\n}\n\nexport const LayoutSidebar: FC<LayoutSidebarProps> = ({\n    className,\n    mobile,\n    barExpanded,\n    submenusExpanded,\n    drawerOpened,\n    onBarExpandChange,\n    onSubmenuExpandChange,\n    onDrawerOpenChange,\n    mainItems,\n    top,\n    bottom,\n    navigationComponent,\n}) => {\n    const closeDrawer = () => {\n        if (mobile) {\n            onDrawerOpenChange?.(false);\n        }\n    };\n\n    return (\n        <LayoutPlacementContext.Provider value=\"side\">\n            {mobile && drawerOpened && (\n                <div className={Styles.navDrawerBackdrop} onClick={closeDrawer} />\n            )}\n            <div\n                className={classNames(\n                    Styles.nav,\n                    mobile && Styles.navDrawer,\n                    mobile && drawerOpened && Styles.navDrawerOpened,\n                    !mobile && (barExpanded ? Styles.navWide : Styles.navSlim),\n                    className\n                )}\n                data-cy=\"side-navigation\"\n                onClick={closeDrawer}\n            >\n                <ThemeProvider mode=\"dark\" className={Styles.navMain}>\n                    {mobile && (\n                        <div className={Styles.navCloseWrapper}>\n                            <div\n                                className={Styles.navClose}\n                                onClick={() => onBarExpandChange(false)}\n                            >\n                                <Icon svg={SvgClose} size=\"large\" />\n                            </div>\n                        </div>\n                    )}\n                    {!!top?.length && <SidebarTop>{top}</SidebarTop>}\n\n                    <div data-cy=\"navigation-items\">\n                        {mainItems?.map(item =>\n                            item.submenu ? (\n                                <SideNavigationGroupItem\n                                    key={item.id}\n                                    item={item}\n                                    barExpanded={mobile ? drawerOpened : barExpanded}\n                                    submenuExpanded={\n                                        !!item.id && !!submenusExpanded?.includes(item.id)\n                                    }\n                                    onSubmenuExpand={onSubmenuExpandChange}\n                                    navigationComponent={navigationComponent}\n                                />\n                            ) : (\n                                <InternalSideNavigationLink\n                                    key={item.id}\n                                    id={item.id}\n                                    to={item.to}\n                                    title={item.title}\n                                    isActive={item.isActive}\n                                    icon={item.icon}\n                                    iconActive={item.iconActive}\n                                    className={item.className}\n                                    tag={getSubmenuGroupTag(\n                                        item.submenu,\n                                        getCounterTag(item.counter, item.tag)\n                                    )}\n                                    navigationComponent={navigationComponent}\n                                />\n                            )\n                        )}\n                    </div>\n\n                    {!!bottom && <SidebarBottom>{bottom}</SidebarBottom>}\n                </ThemeProvider>\n            </div>\n        </LayoutPlacementContext.Provider>\n    );\n};\nLayoutSidebar.displayName = 'LayoutSidebar';\n\n/** Side Navigation menu item */\nconst SideNavigationGroupItem: FC<{\n    item: NavigationItemData;\n    navigationComponent: FC<NavLinkComponentProps>;\n    barExpanded: boolean;\n    submenuExpanded: boolean;\n    onSubmenuExpand: (id: string, expanded: boolean, force: boolean) => void;\n}> = ({ item, onSubmenuExpand, barExpanded, submenuExpanded, navigationComponent }) => {\n    const {\n        sidebar: {\n            styles: { popoverContent },\n        },\n    } = useTitanLayoutContext();\n\n    const tag = getSubmenuGroupTag(item.submenu, getCounterTag(item.counter, item.tag));\n\n    return barExpanded ? (\n        <InternalSideNavigationGroup\n            id={item.id}\n            to={item.to}\n            title={item.title}\n            isActive={item.isActive}\n            icon={item.icon}\n            iconActive={item.iconActive}\n            className={item.className}\n            tag={tag}\n            submenuExpanded={submenuExpanded}\n            onSubmenuExpand={onSubmenuExpand}\n            navigationComponent={navigationComponent}\n        >\n            <SideNavigationGroupContent\n                parentId={item.id}\n                groups={item.submenu?.groups ?? []}\n                navigationComponent={navigationComponent}\n            />\n        </InternalSideNavigationGroup>\n    ) : (\n        <Popover placement=\"right-start\" openOnHover delay={300}>\n            <Popover.Trigger>\n                {(triggerProps: any) => (\n                    <div {...triggerProps}>\n                        <InternalSideNavigationLink\n                            id={item.id}\n                            to={item.to}\n                            title={item.title}\n                            isActive={item.isActive}\n                            icon={item.icon}\n                            iconActive={item.iconActive}\n                            className={item.className}\n                            tag={tag}\n                            navigationComponent={navigationComponent}\n                        />\n                    </div>\n                )}\n            </Popover.Trigger>\n            <Popover.Content style={popoverContent} className=\"z-global-nav-i\">\n                <div className={Styles.submenuPopover}>\n                    <Text\n                        variant=\"headline\"\n                        el=\"h4\"\n                        size=\"small\"\n                        className=\"c-white m-b-half-i m-t-1\"\n                    >\n                        {item.title}\n                    </Text>\n                    <SideNavigationGroupContent\n                        parentId={item.id}\n                        groups={item.submenu?.groups ?? []}\n                        navigationComponent={navigationComponent}\n                    />\n                </div>\n            </Popover.Content>\n        </Popover>\n    );\n};\nconst SideNavigationGroupContent: FC<\n    NavigationSubmenuData & NavigationComponentProps & { parentId: string }\n> = ({ groups, parentId, navigationComponent }) => {\n    return (\n        <Fragment>\n            {groups.reduce((out, group, index) => {\n                if (!group.links.length) {\n                    return out;\n                }\n\n                const title = group.title?.trim() ?? '';\n                /* eslint-disable react/no-array-index-key */\n                out.push(\n                    <Text\n                        key={`:group:${parentId}:${index}:title`}\n                        variant=\"eyebrow\"\n                        className={classNames(Styles.submenuGroupHeader, {\n                            [Styles.submenuGroupHeaderEmpty]: !title,\n                        })}\n                    >\n                        {title}\n                    </Text>\n                );\n                out.push(\n                    ...group.links.map((link, index) => (\n                        <InternalSideNavigationGroupLink\n                            key={`:${parentId}:${link.id}:${index}`}\n                            id={link.id}\n                            to={link.to}\n                            title={link.title}\n                            isActive={link.isActive}\n                            className={undefined}\n                            tag={getCounterTag(link.counter, link.tag)}\n                            parentId={parentId}\n                            navigationComponent={navigationComponent}\n                        />\n                    ))\n                );\n                /* eslint-enable react/no-array-index-key */\n\n                return out;\n            }, [] as ReactElement[])}\n        </Fragment>\n    );\n};\n\nfunction SidebarTop({ children }: any) {\n    const list = Children.map(children, child => {\n        return child && isValidElement(child) ? child : null;\n    });\n    return list?.length ? (\n        <ThemeProvider mode=\"dark\" className={Styles.navTop} data-cy=\"navigation-items-top\">\n            {list}\n            <div className={Styles.divider} />\n        </ThemeProvider>\n    ) : null;\n}\n\nfunction SidebarBottom({ children }: any) {\n    return (\n        <ThemeProvider mode=\"dark\" className={Styles.navBottom} data-cy=\"navigation-items-bottom\">\n            <div className={Styles.divider} />\n            {children}\n        </ThemeProvider>\n    );\n}\n"],"names":["Icon","Popover","Text","ThemeProvider","SvgClose","classNames","Children","Fragment","isValidElement","getCounterTag","getSubmenuGroupTag","LayoutPlacementContext","useTitanLayoutContext","InternalSideNavigationGroup","InternalSideNavigationGroupLink","InternalSideNavigationLink","Styles","LayoutSidebar","className","mobile","barExpanded","submenusExpanded","drawerOpened","onBarExpandChange","onSubmenuExpandChange","onDrawerOpenChange","mainItems","top","bottom","navigationComponent","closeDrawer","Provider","value","div","navDrawerBackdrop","onClick","nav","navDrawer","navDrawerOpened","navWide","navSlim","data-cy","mode","navMain","navCloseWrapper","navClose","svg","size","length","SidebarTop","map","item","submenu","SideNavigationGroupItem","submenuExpanded","id","includes","onSubmenuExpand","to","title","isActive","icon","iconActive","tag","counter","SidebarBottom","displayName","sidebar","styles","popoverContent","SideNavigationGroupContent","parentId","groups","placement","openOnHover","delay","Trigger","triggerProps","Content","style","submenuPopover","variant","el","reduce","out","group","index","links","trim","push","submenuGroupHeader","submenuGroupHeaderEmpty","link","undefined","children","list","child","navTop","divider","navBottom"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/titan-layout/layout-sidebar.tsx"],"sourcesContent":["import { Icon, Popover, Text, ThemeProvider } from '@servicetitan/anvil2';\nimport SvgClose from '@servicetitan/anvil2/assets/icons/material/round/close.svg';\nimport classNames from 'classnames';\nimport { Children, FC, Fragment, ReactElement, isValidElement } from 'react';\nimport { NavigationItemData, NavigationSubmenuData } from '../../utils/navigation';\nimport { NavLinkComponentProps } from '../../utils/navigation-context';\nimport { getCounterTag, getSubmenuGroupTag } from '../../utils/side-nav';\nimport { NavigationComponentProps } from './interface-internal';\nimport { LayoutPlacementContext, useTitanLayoutContext } from './layout-context';\nimport {\n    InternalSideNavigationGroup,\n    InternalSideNavigationGroupLink,\n    InternalSideNavigationLink,\n} from './layout-sidebar-links-internal';\nimport * as Styles from './layout-sidebar.module.less';\n\nexport interface LayoutSidebarProps {\n    className?: string;\n    top?: ReactElement[];\n    bottom?: ReactElement;\n    mainItems?: NavigationItemData[];\n    barExpanded: boolean;\n    submenusExpanded: string[] | undefined;\n    drawerOpened: boolean;\n    mobile: boolean;\n    touchDevice: boolean;\n    navigationComponent: FC<NavLinkComponentProps>;\n    onBarExpandChange(expanded: boolean): void;\n    onDrawerOpenChange(expanded: boolean): void;\n    onSubmenuExpandChange(id: string, expanded: boolean, force: boolean): void;\n}\n\nexport const LayoutSidebar: FC<LayoutSidebarProps> = ({\n    className,\n    mobile,\n    touchDevice,\n    barExpanded,\n    submenusExpanded,\n    drawerOpened,\n    onBarExpandChange,\n    onSubmenuExpandChange,\n    onDrawerOpenChange,\n    mainItems,\n    top,\n    bottom,\n    navigationComponent,\n}) => {\n    const closeDrawer = () => {\n        if (mobile) {\n            onDrawerOpenChange?.(false);\n        }\n    };\n\n    return (\n        <LayoutPlacementContext.Provider value=\"side\">\n            {mobile && drawerOpened && (\n                <div className={Styles.navDrawerBackdrop} onClick={closeDrawer} />\n            )}\n            <div\n                className={classNames(\n                    Styles.nav,\n                    mobile && Styles.navDrawer,\n                    mobile && drawerOpened && Styles.navDrawerOpened,\n                    !mobile && (barExpanded ? Styles.navWide : Styles.navSlim),\n                    className\n                )}\n                data-cy=\"side-navigation\"\n                onClick={closeDrawer}\n            >\n                <ThemeProvider mode=\"dark\" className={Styles.navMain}>\n                    {mobile && (\n                        <div className={Styles.navCloseWrapper}>\n                            <div\n                                className={Styles.navClose}\n                                onClick={() => onBarExpandChange(false)}\n                            >\n                                <Icon svg={SvgClose} size=\"large\" />\n                            </div>\n                        </div>\n                    )}\n                    {!!top?.length && <SidebarTop>{top}</SidebarTop>}\n\n                    <div data-cy=\"navigation-items\">\n                        {mainItems?.map(item =>\n                            item.submenu ? (\n                                <SideNavigationGroupItem\n                                    key={item.id}\n                                    item={item}\n                                    barExpanded={mobile ? drawerOpened : barExpanded}\n                                    submenuExpanded={\n                                        !!item.id && !!submenusExpanded?.includes(item.id)\n                                    }\n                                    onSubmenuExpand={onSubmenuExpandChange}\n                                    navigationComponent={navigationComponent}\n                                    touchDevice={touchDevice}\n                                />\n                            ) : (\n                                <InternalSideNavigationLink\n                                    key={item.id}\n                                    id={item.id}\n                                    to={item.to}\n                                    title={item.title}\n                                    isActive={item.isActive}\n                                    icon={item.icon}\n                                    iconActive={item.iconActive}\n                                    className={item.className}\n                                    tag={getSubmenuGroupTag(\n                                        item.submenu,\n                                        getCounterTag(item.counter, item.tag)\n                                    )}\n                                    navigationComponent={navigationComponent}\n                                />\n                            )\n                        )}\n                    </div>\n\n                    {!!bottom && <SidebarBottom>{bottom}</SidebarBottom>}\n                </ThemeProvider>\n            </div>\n        </LayoutPlacementContext.Provider>\n    );\n};\nLayoutSidebar.displayName = 'LayoutSidebar';\n\n/** Side Navigation menu item */\nconst SideNavigationGroupItem: FC<{\n    item: NavigationItemData;\n    navigationComponent: FC<NavLinkComponentProps>;\n    touchDevice: boolean;\n    barExpanded: boolean;\n    submenuExpanded: boolean;\n    onSubmenuExpand: (id: string, expanded: boolean, force: boolean) => void;\n}> = ({\n    item,\n    onSubmenuExpand,\n    barExpanded,\n    submenuExpanded,\n    navigationComponent,\n    touchDevice,\n}) => {\n    const {\n        sidebar: {\n            styles: { popoverContent },\n        },\n    } = useTitanLayoutContext();\n\n    const tag = getSubmenuGroupTag(item.submenu, getCounterTag(item.counter, item.tag));\n\n    return barExpanded ? (\n        <InternalSideNavigationGroup\n            id={item.id}\n            to={item.to}\n            title={item.title}\n            isActive={item.isActive}\n            icon={item.icon}\n            iconActive={item.iconActive}\n            className={item.className}\n            tag={tag}\n            submenuExpanded={submenuExpanded}\n            onSubmenuExpand={onSubmenuExpand}\n            navigationComponent={navigationComponent}\n        >\n            <SideNavigationGroupContent\n                parentId={item.id}\n                groups={item.submenu?.groups ?? []}\n                navigationComponent={navigationComponent}\n            />\n        </InternalSideNavigationGroup>\n    ) : (\n        <Popover placement=\"right-start\" openOnHover={!touchDevice} delay={300}>\n            <Popover.Trigger>\n                {(triggerProps: any) => (\n                    <div {...triggerProps}>\n                        <InternalSideNavigationLink\n                            id={item.id}\n                            to={item.to}\n                            title={item.title}\n                            isActive={item.isActive}\n                            icon={item.icon}\n                            iconActive={item.iconActive}\n                            className={item.className}\n                            tag={tag}\n                            navigationComponent={navigationComponent}\n                        />\n                    </div>\n                )}\n            </Popover.Trigger>\n            <Popover.Content style={popoverContent} className=\"z-global-nav-i\">\n                <div className={Styles.submenuPopover}>\n                    <Text\n                        variant=\"headline\"\n                        el=\"h4\"\n                        size=\"small\"\n                        className=\"c-white m-b-half-i m-t-1\"\n                    >\n                        {item.title}\n                    </Text>\n                    <SideNavigationGroupContent\n                        parentId={item.id}\n                        groups={item.submenu?.groups ?? []}\n                        navigationComponent={navigationComponent}\n                    />\n                </div>\n            </Popover.Content>\n        </Popover>\n    );\n};\nconst SideNavigationGroupContent: FC<\n    NavigationSubmenuData & NavigationComponentProps & { parentId: string }\n> = ({ groups, parentId, navigationComponent }) => {\n    return (\n        <Fragment>\n            {groups.reduce((out, group, index) => {\n                if (!group.links.length) {\n                    return out;\n                }\n\n                const title = group.title?.trim() ?? '';\n                /* eslint-disable react/no-array-index-key */\n                out.push(\n                    <Text\n                        key={`:group:${parentId}:${index}:title`}\n                        variant=\"eyebrow\"\n                        className={classNames(Styles.submenuGroupHeader, {\n                            [Styles.submenuGroupHeaderEmpty]: !title,\n                        })}\n                    >\n                        {title}\n                    </Text>\n                );\n                out.push(\n                    ...group.links.map((link, index) => (\n                        <InternalSideNavigationGroupLink\n                            key={`:${parentId}:${link.id}:${index}`}\n                            id={link.id}\n                            to={link.to}\n                            title={link.title}\n                            isActive={link.isActive}\n                            className={undefined}\n                            tag={getCounterTag(link.counter, link.tag)}\n                            parentId={parentId}\n                            navigationComponent={navigationComponent}\n                        />\n                    ))\n                );\n                /* eslint-enable react/no-array-index-key */\n\n                return out;\n            }, [] as ReactElement[])}\n        </Fragment>\n    );\n};\n\nfunction SidebarTop({ children }: any) {\n    const list = Children.map(children, child => {\n        return child && isValidElement(child) ? child : null;\n    });\n    return list?.length ? (\n        <ThemeProvider mode=\"dark\" className={Styles.navTop} data-cy=\"navigation-items-top\">\n            {list}\n            <div className={Styles.divider} />\n        </ThemeProvider>\n    ) : null;\n}\n\nfunction SidebarBottom({ children }: any) {\n    return (\n        <ThemeProvider mode=\"dark\" className={Styles.navBottom} data-cy=\"navigation-items-bottom\">\n            <div className={Styles.divider} />\n            {children}\n        </ThemeProvider>\n    );\n}\n"],"names":["Icon","Popover","Text","ThemeProvider","SvgClose","classNames","Children","Fragment","isValidElement","getCounterTag","getSubmenuGroupTag","LayoutPlacementContext","useTitanLayoutContext","InternalSideNavigationGroup","InternalSideNavigationGroupLink","InternalSideNavigationLink","Styles","LayoutSidebar","className","mobile","touchDevice","barExpanded","submenusExpanded","drawerOpened","onBarExpandChange","onSubmenuExpandChange","onDrawerOpenChange","mainItems","top","bottom","navigationComponent","closeDrawer","Provider","value","div","navDrawerBackdrop","onClick","nav","navDrawer","navDrawerOpened","navWide","navSlim","data-cy","mode","navMain","navCloseWrapper","navClose","svg","size","length","SidebarTop","map","item","submenu","SideNavigationGroupItem","submenuExpanded","id","includes","onSubmenuExpand","to","title","isActive","icon","iconActive","tag","counter","SidebarBottom","displayName","sidebar","styles","popoverContent","SideNavigationGroupContent","parentId","groups","placement","openOnHover","delay","Trigger","triggerProps","Content","style","submenuPopover","variant","el","reduce","out","group","index","links","trim","push","submenuGroupHeader","submenuGroupHeaderEmpty","link","undefined","children","list","child","navTop","divider","navBottom"],"mappings":"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"}

package/dist/components/titan-layout/titan-layout-default.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"titan-layout-default.stories.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/titan-layout-default.stories.tsx"],"names":[],"mappings":"AAkBA,OAAO,EACH,iBAAiB,EAIpB,MAAM,yBAAyB,CAAC;;;;;;;;AASjC,wBAWE;AAmSF,eAAO,MAAM,aAAa,GAAI,MAAM,iBAAiB,4CASpD,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,MAAM,iBAAiB,4CAMpD,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,MAAM,iBAAiB,4CAQpD,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,MAAM,iBAAiB,4CAcvD,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,MAAM,iBAAiB,4CAyBrD,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,MAAM,iBAAiB,4CA0BxD,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,MAAM,iBAAiB,4CA0B7D,CAAC"}
+{"version":3,"file":"titan-layout-default.stories.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/titan-layout-default.stories.tsx"],"names":[],"mappings":"AAmBA,OAAO,EACH,iBAAiB,EAIpB,MAAM,yBAAyB,CAAC;;;;;;;;AASjC,wBAWE;AA6SF,eAAO,MAAM,aAAa,GAAI,MAAM,iBAAiB,4CASpD,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,MAAM,iBAAiB,4CAMpD,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,MAAM,iBAAiB,4CAIpD,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,MAAM,iBAAiB,4CAcvD,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,MAAM,iBAAiB,4CAqBrD,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,MAAM,iBAAiB,4CAsBxD,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,MAAM,iBAAiB,4CAsB7D,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"titan-layout.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/titan-layout.tsx"],"names":[],"mappings":"AACA,OAAO,EAEH,wBAAwB,EACxB,EAAE,EAGF,YAAY,EACZ,SAAS,EAMZ,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAA2B,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAEhG,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAS/C,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAOrD,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,GAAG;IACzF,wBAAwB;IACxB,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAE5C,kDAAkD;IAClD,UAAU,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAE5B,uBAAuB;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB,kDAAkD;IAClD,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,oCAAoC;IACpC,mBAAmB,CAAC,EAAE,EAAE,CAAC,qBAAqB,CAAC,CAAC;IAEhD,qCAAqC;IACrC,mBAAmB,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAE3C,sEAAsE;IACtE,uBAAuB,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAE/C,iBAAiB;IACjB,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAE5B,mBAAmB;IACnB,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,kCAAkC;IAClC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAElD,6BAA6B;IAC7B,MAAM,CAAC,EAAE,YAAY,CAAC;IAEtB,mDAAmD;IACnD,WAAW,CAAC,EAAE,YAAY,CAAC;IAE3B,qCAAqC;IACrC,GAAG,CAAC,EAAE,YAAY,CAAC;IAEnB,oCAAoC;IACpC,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IAEzB;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB;;;OAGG;IACH,UAAU,CAAC,EAAE,YAAY,CAAC;IAE1B;;;OAGG;IACH,aAAa,CAAC,EAAE,YAAY,CAAC;IAE7B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AA8DF,iBAAS,oBAAoB,CAAC,EAC1B,UAAqB,EACrB,UAAmB,EACnB,EAAE,EACF,QAAQ,EACR,WAAW,EACX,mBAAmB,EACnB,MAAM,EACN,WAAW,EACX,GAAG,EACH,OAAO,EACP,KAAK,EACL,IAAI,EACJ,aAAa,EACb,mBAAmB,EACnB,uBAAuB,EACvB,UAAU,EACV,aAAa,EACb,SAAS,EACT,eAAe,EACf,OAAO,GACV,EAAE,gBAAgB,2CAqRlB;AA2FD,eAAO,MAAM,WAAW;;;CAGtB,CAAC"}
+{"version":3,"file":"titan-layout.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/titan-layout.tsx"],"names":[],"mappings":"AACA,OAAO,EAEH,wBAAwB,EACxB,EAAE,EAGF,YAAY,EACZ,SAAS,EAMZ,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAA2B,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAEhG,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAS/C,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAOrD,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,GAAG;IACzF,wBAAwB;IACxB,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAE5C,kDAAkD;IAClD,UAAU,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAE5B,uBAAuB;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB,kDAAkD;IAClD,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,oCAAoC;IACpC,mBAAmB,CAAC,EAAE,EAAE,CAAC,qBAAqB,CAAC,CAAC;IAEhD,qCAAqC;IACrC,mBAAmB,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAE3C,sEAAsE;IACtE,uBAAuB,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAE/C,iBAAiB;IACjB,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAE5B,mBAAmB;IACnB,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,kCAAkC;IAClC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAElD,6BAA6B;IAC7B,MAAM,CAAC,EAAE,YAAY,CAAC;IAEtB,mDAAmD;IACnD,WAAW,CAAC,EAAE,YAAY,CAAC;IAE3B,qCAAqC;IACrC,GAAG,CAAC,EAAE,YAAY,CAAC;IAEnB,oCAAoC;IACpC,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IAEzB;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB;;;OAGG;IACH,UAAU,CAAC,EAAE,YAAY,CAAC;IAE1B;;;OAGG;IACH,aAAa,CAAC,EAAE,YAAY,CAAC;IAE7B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AA8DF,iBAAS,oBAAoB,CAAC,EAC1B,UAAqB,EACrB,UAAmB,EACnB,EAAE,EACF,QAAQ,EACR,WAAW,EACX,mBAAmB,EACnB,MAAM,EACN,WAAW,EACX,GAAG,EACH,OAAO,EACP,KAAK,EACL,IAAI,EACJ,aAAa,EACb,mBAAmB,EACnB,uBAAuB,EACvB,UAAU,EACV,aAAa,EACb,SAAS,EACT,eAAe,EACf,OAAO,GACV,EAAE,gBAAgB,2CA2RlB;AA2FD,eAAO,MAAM,WAAW;;;CAGtB,CAAC"}

package/dist/components/titan-layout/titan-layout.js

@@ -73,7 +73,7 @@ function TitanLayoutComponent({ appearance = 'anvil2', navVariant = 'left', id,
     const view = useAppearance(appearance);
     const [mobileDrawerOpened, setMobileDrawerOpened] = useState(false);
     const { hasNotifications, NotificationsContextProvider } = useNotificationsState();
-    const [headerHeight] = useState(0);
+    const [headerHeight, setHeaderHeight] = useState(0);
     const [headerFixedHeight, setHeaderFixedHeight] = useState(0);
     const isMobile = breakpoint.isMobile;
     const hasSideBar = !contentOnly && (navVariant === 'left' || navVariant === 'top' && isMobile) && (!!(navigationMainItems === null || navigationMainItems === void 0 ? void 0 : navigationMainItems.length) || !!(sideTop === null || sideTop === void 0 ? void 0 : sideTop.length));
@@ -273,6 +273,7 @@ function TitanLayoutComponent({ appearance = 'anvil2', navVariant = 'left', id,
                         children: /*#__PURE__*/ _jsx(LayoutSidebar, {
                             className: Styles.side,
                             mobile: breakpoint.isMobile,
+                            touchDevice: breakpoint.isTouchDevice,
                             barExpanded: !(state === null || state === void 0 ? void 0 : state.navCollapsed),
                             onBarExpandChange: onBarExpandChange,
                             submenusExpanded: state === null || state === void 0 ? void 0 : state.submenusExpanded,
@@ -307,8 +308,11 @@ function TitanLayoutComponent({ appearance = 'anvil2', navVariant = 'left', id,
                     }),
                     !!header && view.isSequent && /*#__PURE__*/ _jsx("div", {
                         className: Styles.contentHeader,
-                        "data-cy": "layout-content-header",
-                        children: header
+                        children: /*#__PURE__*/ _jsx(TitanLayoutHeaderObserved, {
+                            heightChange: setHeaderHeight,
+                            "data-cy": "layout-content-header",
+                            children: header
+                        })
                     }),
                     view.isAnvil1 ? /*#__PURE__*/ _jsx(LayoutContentAnvil1, {
                         header: header,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/titan-layout/titan-layout.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport {\n    CSSProperties,\n    ComponentPropsWithoutRef,\n    FC,\n    Fragment,\n    MouseEvent,\n    ReactElement,\n    ReactNode,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { NavigationItemData } from '../../utils/navigation';\nimport { DefaultNavLinkComponent, NavLinkComponentProps } from '../../utils/navigation-context';\nimport { useTitanBreakpoint } from '../../utils/use-breakpoint';\nimport { TitanLayoutState } from './interface';\nimport {\n    LayoutContext,\n    LayoutPlacementContext,\n    TitanLayoutContextType,\n    TitanLayoutSidebarContextType,\n} from './layout-context';\nimport { LayoutHeader, LayoutHeaderProps } from './layout-header';\nimport { LayoutHeaderDark } from './layout-header-dark';\nimport { TitanLayoutLogoProps } from './layout-logo';\nimport { LayoutSidebar } from './layout-sidebar';\nimport { InternalSideNavigationTrigger } from './layout-sidebar-links-internal';\nimport { useNotificationsState } from './notifications-context';\nimport { TitanLayoutLink, TitanLayoutTrigger } from './titan-layout-links';\nimport * as Styles from './titan-layout.module.less';\n\nexport type TitanLayoutProps = Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'style'> & {\n    /** layout appearance */\n    appearance?: 'legacy' | 'anvil1' | 'anvil2';\n\n    /** layout navigation variant (left by default) */\n    navVariant?: 'left' | 'top';\n\n    /** layout's content */\n    children?: ReactNode;\n\n    /** show only content without side and top bars */\n    contentOnly?: boolean;\n\n    /** component used for navigation */\n    navigationComponent?: FC<NavLinkComponentProps>;\n\n    /** data for main navigation links */\n    navigationMainItems?: NavigationItemData[];\n\n    /** data for overflow navigation links (used only with top variant) */\n    navigationOverflowItems?: NavigationItemData[];\n\n    /** logo props */\n    logo?: TitanLayoutLogoProps;\n\n    /** layout state */\n    state?: TitanLayoutState;\n    /** layout state change handler */\n    onStateChange?: (state: TitanLayoutState) => void;\n\n    /** content header content */\n    header?: ReactElement;\n\n    /** content header fixed (stocky to top) content */\n    headerFixed?: ReactElement;\n\n    /** layout header content (center) */\n    top?: ReactElement;\n\n    /** top links for side navigation */\n    sideTop?: ReactElement[];\n\n    /**\n     * profile element for layout\n     * @see ProfileDropdown\n     */\n    profile?: ReactElement;\n\n    /**\n     * extra links for layout header\n     * shown in side nav footer on mobile\n     */\n    extraLinks?: ReactElement;\n\n    /**\n     * fixed extra links for layout header\n     * shown in header on mobile as well\n     */\n    extraLinksTop?: ReactElement;\n\n    /**\n     * text shown in layout's header\n     * shown in side nav footer on mobile\n     */\n    extraText?: string;\n\n    /**\n     * minimal width set for content area\n     * used for pages that aren't adopted to mobile\n     */\n    minContentWidth?: number;\n};\n\nconst defaultSidebarContext: TitanLayoutSidebarContextType = {\n    styles: {\n        popoverContent: {\n            '--background-color-strong': '#24323C',\n            'color': 'var(--color-white)',\n        } as CSSProperties,\n    },\n};\n\nconst useAppearance = (appearance: TitanLayoutProps['appearance']) =>\n    useMemo(() => {\n        const isLegacy = appearance === 'legacy';\n        const isAnvil1 = appearance === 'anvil1';\n        const isAnvil2 = appearance === 'anvil2';\n\n        return {\n            isLegacy,\n            isAnvil1,\n            isAnvil2,\n            isSequent: isLegacy || isAnvil2,\n        };\n    }, [appearance]);\n\nenum TopNavVariant {\n    None = 'none',\n    Tiny = 'tiny',\n    Dark = 'dark',\n    DarkStacked = 'stacked',\n    Mobile = 'mobile',\n}\n\nconst topBarHeights: Record<TopNavVariant, number> = {\n    [TopNavVariant.None]: 0,\n    [TopNavVariant.Tiny]: 48,\n    [TopNavVariant.Dark]: 48,\n    [TopNavVariant.DarkStacked]: 80,\n    [TopNavVariant.Mobile]: 72,\n};\n\nconst useTopNavVariant = (\n    hasTopBar: boolean,\n    isMobile: boolean,\n    isLeftNav: boolean,\n    hasTopCenterContent: boolean\n) => {\n    if (!hasTopBar) {\n        return TopNavVariant.None;\n    }\n\n    if (isMobile) {\n        return TopNavVariant.Mobile;\n    }\n\n    if (isLeftNav) {\n        return TopNavVariant.Tiny;\n    }\n\n    return hasTopCenterContent ? TopNavVariant.DarkStacked : TopNavVariant.Dark;\n};\n\nfunction TitanLayoutComponent({\n    appearance = 'anvil2',\n    navVariant = 'left',\n    id,\n    children,\n    contentOnly,\n    navigationComponent,\n    header,\n    headerFixed,\n    top,\n    profile,\n    state,\n    logo,\n    onStateChange,\n    navigationMainItems,\n    navigationOverflowItems,\n    extraLinks,\n    extraLinksTop,\n    extraText,\n    minContentWidth,\n    sideTop,\n}: TitanLayoutProps) {\n    const breakpoint = useTitanBreakpoint();\n    const context: TitanLayoutContextType = useMemo(\n        () => ({\n            NavigationComponent: navigationComponent ?? DefaultNavLinkComponent,\n            breakpoint,\n            isTitanLayout: true,\n            sidebar: defaultSidebarContext,\n        }),\n        [navigationComponent, breakpoint]\n    );\n    const view = useAppearance(appearance);\n    const [mobileDrawerOpened, setMobileDrawerOpened] = useState(false);\n    const { hasNotifications, NotificationsContextProvider } = useNotificationsState();\n    const [headerHeight] = useState(0);\n    const [headerFixedHeight, setHeaderFixedHeight] = useState(0);\n\n    const isMobile = breakpoint.isMobile;\n    const hasSideBar =\n        !contentOnly &&\n        (navVariant === 'left' || (navVariant === 'top' && isMobile)) &&\n        (!!navigationMainItems?.length || !!sideTop?.length);\n    const topBarVariant = useTopNavVariant(!contentOnly, isMobile, navVariant === 'left', !!top);\n\n    useEffect(() => {\n        if (view.isAnvil1) {\n            const bodyClassName = 'of-hidden-i';\n            document.body.classList.add(bodyClassName);\n            return () => document.body.classList.remove(bodyClassName);\n        }\n    }, [view.isAnvil1]);\n\n    const onBurgerClick = useCallback(\n        (e: MouseEvent<never>) => {\n            if (isMobile) {\n                setMobileDrawerOpened(true);\n            } else {\n                onStateChange?.({ navCollapsed: !state?.navCollapsed });\n            }\n\n            e.stopPropagation();\n        },\n        [isMobile, state?.navCollapsed, onStateChange]\n    );\n\n    const onBarExpandChange = useCallback(\n        (expanded: boolean) => {\n            if (isMobile) {\n                setMobileDrawerOpened(false);\n            } else {\n                onStateChange?.({ navCollapsed: !expanded });\n            }\n        },\n        [onStateChange, isMobile]\n    );\n    const onSubmenuExpandChange = useCallback(\n        (id: string, expanded: boolean, force: boolean) => {\n            onStateChange?.({\n                navCollapsed: state?.navCollapsed ?? false,\n                submenusExpanded: [\n                    ...(force ? [] : (state?.submenusExpanded ?? []).filter(i => i !== id)),\n                    ...(expanded ? [id] : []),\n                ],\n            });\n        },\n        [state, onStateChange]\n    );\n    const sidebarNavItems = useMemo(() => {\n        if (!hasSideBar) {\n            return undefined;\n        }\n\n        if (navVariant === 'left') {\n            return navigationMainItems;\n        }\n\n        return [...(navigationMainItems ?? []), ...(navigationOverflowItems ?? [])];\n    }, [hasSideBar, navigationMainItems, navigationOverflowItems, navVariant]);\n\n    const hasMenuNotifications = useMemo(() => {\n        try {\n            return (\n                sidebarNavItems?.some(item => {\n                    if (item.counter || item.tag?.value) {\n                        return true;\n                    } else if (item.submenu) {\n                        return item.submenu.groups.some(group =>\n                            group.links.some(link => !!link.counter || !!link.tag?.value)\n                        );\n                    }\n                    return false;\n                }) ?? false\n            );\n        } catch {\n            return false;\n        }\n    }, [sidebarNavItems]);\n\n    const limitContentWidth = useMemo(() => {\n        if (view.isAnvil2 || !minContentWidth) {\n            return undefined;\n        }\n\n        if (breakpoint.width < minContentWidth) {\n            return minContentWidth;\n        }\n    }, [view, minContentWidth, breakpoint.width]);\n\n    const layoutStyles = useMemo(() => {\n        const topHeight = topBarHeights[topBarVariant] ?? 0;\n\n        return {\n            '--nav-top-height': `${topHeight}px`,\n            '--nav-offset-top': `${topHeight + headerFixedHeight}px`,\n            '--content-offset-top': `${topHeight + headerFixedHeight + headerHeight}px`,\n        } as CSSProperties;\n    }, [topBarVariant, headerFixedHeight, headerHeight]);\n\n    const layoutClass = view.isLegacy\n        ? Styles.layoutLegacy\n        : view.isAnvil1\n          ? Styles.layoutAnvil1\n          : Styles.layoutAnvil2;\n\n    const burgerProps: LayoutHeaderProps['burger'] = useMemo(() => {\n        if (topBarVariant === TopNavVariant.None) {\n            return undefined;\n        }\n\n        if (isMobile) {\n            return {\n                onClick: onBurgerClick,\n                tag: { value: hasNotifications || hasMenuNotifications },\n            };\n        }\n\n        if (navVariant === 'left') {\n            return {\n                'onClick': onBurgerClick,\n                'tooltip': state?.navCollapsed ? 'Expand' : 'Collapse',\n                'data-pendo': 'navigation-left-options',\n                'data-cy': 'navigation-left-options',\n            };\n        }\n\n        return undefined;\n    }, [\n        isMobile,\n        topBarVariant,\n        navVariant,\n        state?.navCollapsed,\n        onBurgerClick,\n        hasNotifications,\n        hasMenuNotifications,\n    ]);\n\n    return (\n        <LayoutContext.Provider value={context}>\n            <LayoutPlacementContext.Provider value=\"unset\">\n                <div\n                    id={id}\n                    className={classNames(\n                        Styles.layout,\n                        !isMobile && Styles.layoutDesktop,\n                        {\n                            [Styles.layoutNavSlim]: !isMobile && hasSideBar && state?.navCollapsed,\n                            [Styles.layoutNavWide]: !isMobile && hasSideBar && !state?.navCollapsed,\n                        },\n                        layoutClass\n                    )}\n                    style={layoutStyles}\n                >\n                    <div className={Styles.topPlaceholder} />\n                    {topBarVariant === TopNavVariant.Tiny ? (\n                        <LayoutHeader\n                            className={Styles.top}\n                            variant=\"light\"\n                            logo={logo}\n                            profile={isMobile ? undefined : profile}\n                            center={top}\n                            rightText={isMobile ? undefined : extraText}\n                            right={\n                                <Fragment>\n                                    {extraLinksTop}\n                                    {!isMobile && extraLinks}\n                                </Fragment>\n                            }\n                            isMobile={isMobile}\n                            burger={burgerProps}\n                        />\n                    ) : topBarVariant !== TopNavVariant.None ? (\n                        <LayoutHeaderDark\n                            className={Styles.top}\n                            logo={logo}\n                            profile={isMobile ? undefined : profile}\n                            center={top}\n                            rightText={isMobile ? undefined : extraText}\n                            right={\n                                <Fragment>\n                                    {extraLinksTop}\n                                    {!isMobile && extraLinks}\n                                </Fragment>\n                            }\n                            isMobile={isMobile}\n                            burger={burgerProps}\n                            navigationMainItems={navigationMainItems}\n                            navigationOverflowItems={navigationOverflowItems}\n                        />\n                    ) : null}\n\n                    {hasSideBar && (\n                        <NotificationsContextProvider>\n                            <LayoutSidebar\n                                className={Styles.side}\n                                mobile={breakpoint.isMobile}\n                                barExpanded={!state?.navCollapsed}\n                                onBarExpandChange={onBarExpandChange}\n                                submenusExpanded={state?.submenusExpanded}\n                                onSubmenuExpandChange={onSubmenuExpandChange}\n                                drawerOpened={mobileDrawerOpened}\n                                onDrawerOpenChange={setMobileDrawerOpened}\n                                top={sideTop}\n                                mainItems={sidebarNavItems}\n                                navigationComponent={context.NavigationComponent}\n                                bottom={\n                                    isMobile ? (\n                                        <Fragment>\n                                            {profile}\n                                            {extraLinks}\n                                            {!!extraText && (\n                                                <InternalSideNavigationTrigger\n                                                    id=\"--extra-text\"\n                                                    title={extraText}\n                                                    isActive={undefined}\n                                                    icon={undefined}\n                                                    iconActive={undefined}\n                                                    tag={undefined}\n                                                    className={undefined}\n                                                />\n                                            )}\n                                        </Fragment>\n                                    ) : undefined\n                                }\n                            />\n                        </NotificationsContextProvider>\n                    )}\n\n                    {!!headerFixed && (\n                        <TitanLayoutHeaderObserved\n                            heightChange={setHeaderFixedHeight}\n                            className={Styles.contentFixedHeader}\n                            data-cy=\"layout-content-fixed-header\"\n                        >\n                            {headerFixed}\n                        </TitanLayoutHeaderObserved>\n                    )}\n\n                    {!!header && view.isSequent && (\n                        <div className={Styles.contentHeader} data-cy=\"layout-content-header\">\n                            {header}\n                        </div>\n                    )}\n                    {view.isAnvil1 ? (\n                        <LayoutContentAnvil1 header={header} minWidth={limitContentWidth}>\n                            {children}\n                        </LayoutContentAnvil1>\n                    ) : view.isLegacy ? (\n                        <LayoutContentLegacy minWidth={limitContentWidth}>\n                            {children}\n                        </LayoutContentLegacy>\n                    ) : (\n                        children\n                    )}\n                </div>\n            </LayoutPlacementContext.Provider>\n        </LayoutContext.Provider>\n    );\n}\n\nconst TitanLayoutHeaderObserved: FC<{\n    'children': ReactNode;\n    'className'?: string;\n    'data-cy'?: string;\n    heightChange?(value: number): void;\n}> = ({ children, heightChange, ...rest }) => {\n    const ref = useRef<HTMLDivElement>(null);\n\n    useEffect(() => {\n        if (ref.current) {\n            const updatePosition = () => {\n                if (ref.current && heightChange) {\n                    const pos = ref.current.getBoundingClientRect();\n                    heightChange(pos.height);\n                }\n            };\n\n            const observer = new ResizeObserver(updatePosition);\n            observer.observe(ref.current);\n\n            updatePosition();\n            return () => observer.disconnect();\n        }\n    }, [heightChange]);\n\n    useEffect(() => {\n        return () => {\n            heightChange?.(0);\n        };\n    }, [heightChange]);\n    return (\n        <div {...rest} ref={ref}>\n            {children}\n        </div>\n    );\n};\nconst TitanLayoutHeader: FC<{ children: ReactNode }> = ({ children }) => {\n    return (\n        <div className={Styles.contentHeader} data-cy=\"layout-content-header\">\n            {children}\n        </div>\n    );\n};\n\nconst LayoutContentAnvil1: FC<{\n    children: ReactNode;\n    header?: ReactNode;\n    minWidth?: number;\n}> = ({ children, header, minWidth }) => {\n    const innerContentStyles: CSSProperties = useMemo(\n        () => ({\n            ...(minWidth ? { minWidth: `${minWidth}px`, overflowX: 'auto' } : {}),\n        }),\n        [minWidth]\n    );\n\n    return (\n        <Fragment>\n            <TitanLayoutHeader>{header}</TitanLayoutHeader>\n            <div\n                className={classNames(Styles.content, { 'of-x-auto-i': !!minWidth })}\n                data-cy=\"layout-content\"\n            >\n                <div\n                    className=\"position-relative d-f flex-grow-1 flex-basis-0 of-hidden\"\n                    style={innerContentStyles}\n                >\n                    {children}\n                </div>\n            </div>\n        </Fragment>\n    );\n};\n\nconst LayoutContentLegacy: FC<{\n    children: ReactNode;\n    minWidth: number | undefined;\n}> = ({ children, minWidth }) => {\n    const innerContentStyles: CSSProperties = useMemo(\n        () => ({\n            position: 'relative',\n            minWidth: `${minWidth}px`,\n        }),\n        [minWidth]\n    );\n\n    return <div style={minWidth ? innerContentStyles : undefined}>{children}</div>;\n};\n\nexport const TitanLayout = Object.assign(TitanLayoutComponent, {\n    Link: TitanLayoutLink,\n    Trigger: TitanLayoutTrigger,\n});\n"],"names":["classNames","Fragment","useCallback","useEffect","useMemo","useRef","useState","DefaultNavLinkComponent","useTitanBreakpoint","LayoutContext","LayoutPlacementContext","LayoutHeader","LayoutHeaderDark","LayoutSidebar","InternalSideNavigationTrigger","useNotificationsState","TitanLayoutLink","TitanLayoutTrigger","Styles","defaultSidebarContext","styles","popoverContent","useAppearance","appearance","isLegacy","isAnvil1","isAnvil2","isSequent","TopNavVariant","topBarHeights","useTopNavVariant","hasTopBar","isMobile","isLeftNav","hasTopCenterContent","TitanLayoutComponent","navVariant","id","children","contentOnly","navigationComponent","header","headerFixed","top","profile","state","logo","onStateChange","navigationMainItems","navigationOverflowItems","extraLinks","extraLinksTop","extraText","minContentWidth","sideTop","breakpoint","context","NavigationComponent","isTitanLayout","sidebar","view","mobileDrawerOpened","setMobileDrawerOpened","hasNotifications","NotificationsContextProvider","headerHeight","headerFixedHeight","setHeaderFixedHeight","hasSideBar","length","topBarVariant","bodyClassName","document","body","classList","add","remove","onBurgerClick","e","navCollapsed","stopPropagation","onBarExpandChange","expanded","onSubmenuExpandChange","force","submenusExpanded","filter","i","sidebarNavItems","undefined","hasMenuNotifications","some","item","counter","tag","value","submenu","groups","group","links","link","limitContentWidth","width","layoutStyles","topHeight","layoutClass","layoutLegacy","layoutAnvil1","layoutAnvil2","burgerProps","onClick","Provider","div","className","layout","layoutDesktop","layoutNavSlim","layoutNavWide","style","topPlaceholder","variant","center","rightText","right","burger","side","mobile","barExpanded","drawerOpened","onDrawerOpenChange","mainItems","bottom","title","isActive","icon","iconActive","TitanLayoutHeaderObserved","heightChange","contentFixedHeader","data-cy","contentHeader","LayoutContentAnvil1","minWidth","LayoutContentLegacy","rest","ref","current","updatePosition","pos","getBoundingClientRect","height","observer","ResizeObserver","observe","disconnect","TitanLayoutHeader","innerContentStyles","overflowX","content","position","TitanLayout","Object","assign","Link","Trigger"],"mappings":";AAAA,OAAOA,gBAAgB,aAAa;AACpC,SAIIC,QAAQ,EAIRC,WAAW,EACXC,SAAS,EACTC,OAAO,EACPC,MAAM,EACNC,QAAQ,QACL,QAAQ;AAEf,SAASC,uBAAuB,QAA+B,iCAAiC;AAChG,SAASC,kBAAkB,QAAQ,6BAA6B;AAEhE,SACIC,aAAa,EACbC,sBAAsB,QAGnB,mBAAmB;AAC1B,SAASC,YAAY,QAA2B,kBAAkB;AAClE,SAASC,gBAAgB,QAAQ,uBAAuB;AAExD,SAASC,aAAa,QAAQ,mBAAmB;AACjD,SAASC,6BAA6B,QAAQ,kCAAkC;AAChF,SAASC,qBAAqB,QAAQ,0BAA0B;AAChE,SAASC,eAAe,EAAEC,kBAAkB,QAAQ,uBAAuB;AAC3E,YAAYC,YAAY,6BAA6B;AA2ErD,MAAMC,wBAAuD;IACzDC,QAAQ;QACJC,gBAAgB;YACZ,6BAA6B;YAC7B,SAAS;QACb;IACJ;AACJ;AAEA,MAAMC,gBAAgB,CAACC,aACnBnB,QAAQ;QACJ,MAAMoB,WAAWD,eAAe;QAChC,MAAME,WAAWF,eAAe;QAChC,MAAMG,WAAWH,eAAe;QAEhC,OAAO;YACHC;YACAC;YACAC;YACAC,WAAWH,YAAYE;QAC3B;IACJ,GAAG;QAACH;KAAW;AAEnB,IAAA,AAAKK,uCAAAA;;;;;;WAAAA;EAAAA;AAQL,MAAMC,gBAA+C;IACjD,QAAoB,EAAE;IACtB,QAAoB,EAAE;IACtB,QAAoB,EAAE;IACtB,WAA2B,EAAE;IAC7B,UAAsB,EAAE;AAC5B;AAEA,MAAMC,mBAAmB,CACrBC,WACAC,UACAC,WACAC;IAEA,IAAI,CAACH,WAAW;QACZ;IACJ;IAEA,IAAIC,UAAU;QACV;IACJ;IAEA,IAAIC,WAAW;QACX;IACJ;IAEA,OAAOC;AACX;AAEA,SAASC,qBAAqB,EAC1BZ,aAAa,QAAQ,EACrBa,aAAa,MAAM,EACnBC,EAAE,EACFC,QAAQ,EACRC,WAAW,EACXC,mBAAmB,EACnBC,MAAM,EACNC,WAAW,EACXC,GAAG,EACHC,OAAO,EACPC,KAAK,EACLC,IAAI,EACJC,aAAa,EACbC,mBAAmB,EACnBC,uBAAuB,EACvBC,UAAU,EACVC,aAAa,EACbC,SAAS,EACTC,eAAe,EACfC,OAAO,EACQ;IACf,MAAMC,aAAa/C;IACnB,MAAMgD,UAAkCpD,QACpC,IAAO,CAAA;YACHqD,qBAAqBjB,gCAAAA,iCAAAA,sBAAuBjC;YAC5CgD;YACAG,eAAe;YACfC,SAASxC;QACb,CAAA,GACA;QAACqB;QAAqBe;KAAW;IAErC,MAAMK,OAAOtC,cAAcC;IAC3B,MAAM,CAACsC,oBAAoBC,sBAAsB,GAAGxD,SAAS;IAC7D,MAAM,EAAEyD,gBAAgB,EAAEC,4BAA4B,EAAE,GAAGjD;IAC3D,MAAM,CAACkD,aAAa,GAAG3D,SAAS;IAChC,MAAM,CAAC4D,mBAAmBC,qBAAqB,GAAG7D,SAAS;IAE3D,MAAM0B,WAAWuB,WAAWvB,QAAQ;IACpC,MAAMoC,aACF,CAAC7B,eACAH,CAAAA,eAAe,UAAWA,eAAe,SAASJ,QAAQ,KAC1D,CAAA,CAAC,EAACgB,gCAAAA,0CAAAA,oBAAqBqB,MAAM,KAAI,CAAC,EAACf,oBAAAA,8BAAAA,QAASe,MAAM,CAAD;IACtD,MAAMC,gBAAgBxC,iBAAiB,CAACS,aAAaP,UAAUI,eAAe,QAAQ,CAAC,CAACO;IAExFxC,UAAU;QACN,IAAIyD,KAAKnC,QAAQ,EAAE;YACf,MAAM8C,gBAAgB;YACtBC,SAASC,IAAI,CAACC,SAAS,CAACC,GAAG,CAACJ;YAC5B,OAAO,IAAMC,SAASC,IAAI,CAACC,SAAS,CAACE,MAAM,CAACL;QAChD;IACJ,GAAG;QAACX,KAAKnC,QAAQ;KAAC;IAElB,MAAMoD,gBAAgB3E,YAClB,CAAC4E;QACG,IAAI9C,UAAU;YACV8B,sBAAsB;QAC1B,OAAO;YACHf,0BAAAA,oCAAAA,cAAgB;gBAAEgC,cAAc,EAAClC,kBAAAA,4BAAAA,MAAOkC,YAAY;YAAC;QACzD;QAEAD,EAAEE,eAAe;IACrB,GACA;QAAChD;QAAUa,kBAAAA,4BAAAA,MAAOkC,YAAY;QAAEhC;KAAc;IAGlD,MAAMkC,oBAAoB/E,YACtB,CAACgF;QACG,IAAIlD,UAAU;YACV8B,sBAAsB;QAC1B,OAAO;YACHf,0BAAAA,oCAAAA,cAAgB;gBAAEgC,cAAc,CAACG;YAAS;QAC9C;IACJ,GACA;QAACnC;QAAef;KAAS;IAE7B,MAAMmD,wBAAwBjF,YAC1B,CAACmC,IAAY6C,UAAmBE;YAEVvC,qBAEQA;QAH1BE,0BAAAA,oCAAAA,cAAgB;YACZgC,cAAclC,CAAAA,sBAAAA,kBAAAA,4BAAAA,MAAOkC,YAAY,cAAnBlC,iCAAAA,sBAAuB;YACrCwC,kBAAkB;mBACVD,QAAQ,EAAE,GAAG,AAACvC,CAAAA,CAAAA,0BAAAA,kBAAAA,4BAAAA,MAAOwC,gBAAgB,cAAvBxC,qCAAAA,0BAA2B,EAAE,AAAD,EAAGyC,MAAM,CAACC,CAAAA,IAAKA,MAAMlD;mBAC/D6C,WAAW;oBAAC7C;iBAAG,GAAG,EAAE;aAC3B;QACL;IACJ,GACA;QAACQ;QAAOE;KAAc;IAE1B,MAAMyC,kBAAkBpF,QAAQ;QAC5B,IAAI,CAACgE,YAAY;YACb,OAAOqB;QACX;QAEA,IAAIrD,eAAe,QAAQ;YACvB,OAAOY;QACX;QAEA,OAAO;eAAKA,gCAAAA,iCAAAA,sBAAuB,EAAE;eAAOC,oCAAAA,qCAAAA,0BAA2B,EAAE;SAAE;IAC/E,GAAG;QAACmB;QAAYpB;QAAqBC;QAAyBb;KAAW;IAEzE,MAAMsD,uBAAuBtF,QAAQ;QACjC,IAAI;gBAEIoF;YADJ,OACIA,CAAAA,wBAAAA,4BAAAA,sCAAAA,gBAAiBG,IAAI,CAACC,CAAAA;oBACEA;gBAApB,IAAIA,KAAKC,OAAO,MAAID,YAAAA,KAAKE,GAAG,cAARF,gCAAAA,UAAUG,KAAK,GAAE;oBACjC,OAAO;gBACX,OAAO,IAAIH,KAAKI,OAAO,EAAE;oBACrB,OAAOJ,KAAKI,OAAO,CAACC,MAAM,CAACN,IAAI,CAACO,CAAAA,QAC5BA,MAAMC,KAAK,CAACR,IAAI,CAACS,CAAAA;gCAA4BA;mCAApB,CAAC,CAACA,KAAKP,OAAO,IAAI,CAAC,GAACO,YAAAA,KAAKN,GAAG,cAARM,gCAAAA,UAAUL,KAAK;;gBAEpE;gBACA,OAAO;YACX,gBATAP,mCAAAA,wBASM;QAEd,EAAE,UAAM;YACJ,OAAO;QACX;IACJ,GAAG;QAACA;KAAgB;IAEpB,MAAMa,oBAAoBjG,QAAQ;QAC9B,IAAIwD,KAAKlC,QAAQ,IAAI,CAAC2B,iBAAiB;YACnC,OAAOoC;QACX;QAEA,IAAIlC,WAAW+C,KAAK,GAAGjD,iBAAiB;YACpC,OAAOA;QACX;IACJ,GAAG;QAACO;QAAMP;QAAiBE,WAAW+C,KAAK;KAAC;IAE5C,MAAMC,eAAenG,QAAQ;YACPyB;QAAlB,MAAM2E,YAAY3E,CAAAA,+BAAAA,aAAa,CAACyC,cAAc,cAA5BzC,0CAAAA,+BAAgC;QAElD,OAAO;YACH,oBAAoB,GAAG2E,UAAU,EAAE,CAAC;YACpC,oBAAoB,GAAGA,YAAYtC,kBAAkB,EAAE,CAAC;YACxD,wBAAwB,GAAGsC,YAAYtC,oBAAoBD,aAAa,EAAE,CAAC;QAC/E;IACJ,GAAG;QAACK;QAAeJ;QAAmBD;KAAa;IAEnD,MAAMwC,cAAc7C,KAAKpC,QAAQ,GAC3BN,OAAOwF,YAAY,GACnB9C,KAAKnC,QAAQ,GACXP,OAAOyF,YAAY,GACnBzF,OAAO0F,YAAY;IAE3B,MAAMC,cAA2CzG,QAAQ;QACrD,IAAIkE,0BAAsC;YACtC,OAAOmB;QACX;QAEA,IAAIzD,UAAU;YACV,OAAO;gBACH8E,SAASjC;gBACTiB,KAAK;oBAAEC,OAAOhC,oBAAoB2B;gBAAqB;YAC3D;QACJ;QAEA,IAAItD,eAAe,QAAQ;YACvB,OAAO;gBACH,WAAWyC;gBACX,WAAWhC,CAAAA,kBAAAA,4BAAAA,MAAOkC,YAAY,IAAG,WAAW;gBAC5C,cAAc;gBACd,WAAW;YACf;QACJ;QAEA,OAAOU;IACX,GAAG;QACCzD;QACAsC;QACAlC;QACAS,kBAAAA,4BAAAA,MAAOkC,YAAY;QACnBF;QACAd;QACA2B;KACH;IAED,qBACI,KAACjF,cAAcsG,QAAQ;QAAChB,OAAOvC;kBAC3B,cAAA,KAAC9C,uBAAuBqG,QAAQ;YAAChB,OAAM;sBACnC,cAAA,MAACiB;gBACG3E,IAAIA;gBACJ4E,WAAWjH,WACPkB,OAAOgG,MAAM,EACb,CAAClF,YAAYd,OAAOiG,aAAa,EACjC;oBACI,CAACjG,OAAOkG,aAAa,CAAC,EAAE,CAACpF,YAAYoC,eAAcvB,kBAAAA,4BAAAA,MAAOkC,YAAY;oBACtE,CAAC7D,OAAOmG,aAAa,CAAC,EAAE,CAACrF,YAAYoC,cAAc,EAACvB,kBAAAA,4BAAAA,MAAOkC,YAAY;gBAC3E,GACA0B;gBAEJa,OAAOf;;kCAEP,KAACS;wBAAIC,WAAW/F,OAAOqG,cAAc;;oBACpCjD,yCACG,KAAC3D;wBACGsG,WAAW/F,OAAOyB,GAAG;wBACrB6E,SAAQ;wBACR1E,MAAMA;wBACNF,SAASZ,WAAWyD,YAAY7C;wBAChC6E,QAAQ9E;wBACR+E,WAAW1F,WAAWyD,YAAYrC;wBAClCuE,qBACI,MAAC1H;;gCACIkD;gCACA,CAACnB,YAAYkB;;;wBAGtBlB,UAAUA;wBACV4F,QAAQf;yBAEZvC,yCACA,KAAC1D;wBACGqG,WAAW/F,OAAOyB,GAAG;wBACrBG,MAAMA;wBACNF,SAASZ,WAAWyD,YAAY7C;wBAChC6E,QAAQ9E;wBACR+E,WAAW1F,WAAWyD,YAAYrC;wBAClCuE,qBACI,MAAC1H;;gCACIkD;gCACA,CAACnB,YAAYkB;;;wBAGtBlB,UAAUA;wBACV4F,QAAQf;wBACR7D,qBAAqBA;wBACrBC,yBAAyBA;yBAE7B;oBAEHmB,4BACG,KAACJ;kCACG,cAAA,KAACnD;4BACGoG,WAAW/F,OAAO2G,IAAI;4BACtBC,QAAQvE,WAAWvB,QAAQ;4BAC3B+F,aAAa,EAAClF,kBAAAA,4BAAAA,MAAOkC,YAAY;4BACjCE,mBAAmBA;4BACnBI,gBAAgB,EAAExC,kBAAAA,4BAAAA,MAAOwC,gBAAgB;4BACzCF,uBAAuBA;4BACvB6C,cAAcnE;4BACdoE,oBAAoBnE;4BACpBnB,KAAKW;4BACL4E,WAAW1C;4BACXhD,qBAAqBgB,QAAQC,mBAAmB;4BAChD0E,QACInG,yBACI,MAAC/B;;oCACI2C;oCACAM;oCACA,CAAC,CAACE,2BACC,KAACtC;wCACGuB,IAAG;wCACH+F,OAAOhF;wCACPiF,UAAU5C;wCACV6C,MAAM7C;wCACN8C,YAAY9C;wCACZK,KAAKL;wCACLwB,WAAWxB;;;iCAIvBA;;;oBAMnB,CAAC,CAAC/C,6BACC,KAAC8F;wBACGC,cAActE;wBACd8C,WAAW/F,OAAOwH,kBAAkB;wBACpCC,WAAQ;kCAEPjG;;oBAIR,CAAC,CAACD,UAAUmB,KAAKjC,SAAS,kBACvB,KAACqF;wBAAIC,WAAW/F,OAAO0H,aAAa;wBAAED,WAAQ;kCACzClG;;oBAGRmB,KAAKnC,QAAQ,iBACV,KAACoH;wBAAoBpG,QAAQA;wBAAQqG,UAAUzC;kCAC1C/D;yBAELsB,KAAKpC,QAAQ,iBACb,KAACuH;wBAAoBD,UAAUzC;kCAC1B/D;yBAGLA;;;;;AAMxB;AAEA,MAAMkG,4BAKD,CAAC,EAAElG,QAAQ,EAAEmG,YAAY,EAAE,GAAGO,MAAM;IACrC,MAAMC,MAAM5I,OAAuB;IAEnCF,UAAU;QACN,IAAI8I,IAAIC,OAAO,EAAE;YACb,MAAMC,iBAAiB;gBACnB,IAAIF,IAAIC,OAAO,IAAIT,cAAc;oBAC7B,MAAMW,MAAMH,IAAIC,OAAO,CAACG,qBAAqB;oBAC7CZ,aAAaW,IAAIE,MAAM;gBAC3B;YACJ;YAEA,MAAMC,WAAW,IAAIC,eAAeL;YACpCI,SAASE,OAAO,CAACR,IAAIC,OAAO;YAE5BC;YACA,OAAO,IAAMI,SAASG,UAAU;QACpC;IACJ,GAAG;QAACjB;KAAa;IAEjBtI,UAAU;QACN,OAAO;YACHsI,yBAAAA,mCAAAA,aAAe;QACnB;IACJ,GAAG;QAACA;KAAa;IACjB,qBACI,KAACzB;QAAK,GAAGgC,IAAI;QAAEC,KAAKA;kBACf3G;;AAGb;AACA,MAAMqH,oBAAiD,CAAC,EAAErH,QAAQ,EAAE;IAChE,qBACI,KAAC0E;QAAIC,WAAW/F,OAAO0H,aAAa;QAAED,WAAQ;kBACzCrG;;AAGb;AAEA,MAAMuG,sBAID,CAAC,EAAEvG,QAAQ,EAAEG,MAAM,EAAEqG,QAAQ,EAAE;IAChC,MAAMc,qBAAoCxJ,QACtC,IAAO,CAAA;YACH,GAAI0I,WAAW;gBAAEA,UAAU,GAAGA,SAAS,EAAE,CAAC;gBAAEe,WAAW;YAAO,IAAI,CAAC,CAAC;QACxE,CAAA,GACA;QAACf;KAAS;IAGd,qBACI,MAAC7I;;0BACG,KAAC0J;0BAAmBlH;;0BACpB,KAACuE;gBACGC,WAAWjH,WAAWkB,OAAO4I,OAAO,EAAE;oBAAE,eAAe,CAAC,CAAChB;gBAAS;gBAClEH,WAAQ;0BAER,cAAA,KAAC3B;oBACGC,WAAU;oBACVK,OAAOsC;8BAENtH;;;;;AAKrB;AAEA,MAAMyG,sBAGD,CAAC,EAAEzG,QAAQ,EAAEwG,QAAQ,EAAE;IACxB,MAAMc,qBAAoCxJ,QACtC,IAAO,CAAA;YACH2J,UAAU;YACVjB,UAAU,GAAGA,SAAS,EAAE,CAAC;QAC7B,CAAA,GACA;QAACA;KAAS;IAGd,qBAAO,KAAC9B;QAAIM,OAAOwB,WAAWc,qBAAqBnE;kBAAYnD;;AACnE;AAEA,OAAO,MAAM0H,cAAcC,OAAOC,MAAM,CAAC/H,sBAAsB;IAC3DgI,MAAMnJ;IACNoJ,SAASnJ;AACb,GAAG"}
+{"version":3,"sources":["../../../src/components/titan-layout/titan-layout.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport {\n    CSSProperties,\n    ComponentPropsWithoutRef,\n    FC,\n    Fragment,\n    MouseEvent,\n    ReactElement,\n    ReactNode,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { NavigationItemData } from '../../utils/navigation';\nimport { DefaultNavLinkComponent, NavLinkComponentProps } from '../../utils/navigation-context';\nimport { useTitanBreakpoint } from '../../utils/use-breakpoint';\nimport { TitanLayoutState } from './interface';\nimport {\n    LayoutContext,\n    LayoutPlacementContext,\n    TitanLayoutContextType,\n    TitanLayoutSidebarContextType,\n} from './layout-context';\nimport { LayoutHeader, LayoutHeaderProps } from './layout-header';\nimport { LayoutHeaderDark } from './layout-header-dark';\nimport { TitanLayoutLogoProps } from './layout-logo';\nimport { LayoutSidebar } from './layout-sidebar';\nimport { InternalSideNavigationTrigger } from './layout-sidebar-links-internal';\nimport { useNotificationsState } from './notifications-context';\nimport { TitanLayoutLink, TitanLayoutTrigger } from './titan-layout-links';\nimport * as Styles from './titan-layout.module.less';\n\nexport type TitanLayoutProps = Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'style'> & {\n    /** layout appearance */\n    appearance?: 'legacy' | 'anvil1' | 'anvil2';\n\n    /** layout navigation variant (left by default) */\n    navVariant?: 'left' | 'top';\n\n    /** layout's content */\n    children?: ReactNode;\n\n    /** show only content without side and top bars */\n    contentOnly?: boolean;\n\n    /** component used for navigation */\n    navigationComponent?: FC<NavLinkComponentProps>;\n\n    /** data for main navigation links */\n    navigationMainItems?: NavigationItemData[];\n\n    /** data for overflow navigation links (used only with top variant) */\n    navigationOverflowItems?: NavigationItemData[];\n\n    /** logo props */\n    logo?: TitanLayoutLogoProps;\n\n    /** layout state */\n    state?: TitanLayoutState;\n    /** layout state change handler */\n    onStateChange?: (state: TitanLayoutState) => void;\n\n    /** content header content */\n    header?: ReactElement;\n\n    /** content header fixed (stocky to top) content */\n    headerFixed?: ReactElement;\n\n    /** layout header content (center) */\n    top?: ReactElement;\n\n    /** top links for side navigation */\n    sideTop?: ReactElement[];\n\n    /**\n     * profile element for layout\n     * @see ProfileDropdown\n     */\n    profile?: ReactElement;\n\n    /**\n     * extra links for layout header\n     * shown in side nav footer on mobile\n     */\n    extraLinks?: ReactElement;\n\n    /**\n     * fixed extra links for layout header\n     * shown in header on mobile as well\n     */\n    extraLinksTop?: ReactElement;\n\n    /**\n     * text shown in layout's header\n     * shown in side nav footer on mobile\n     */\n    extraText?: string;\n\n    /**\n     * minimal width set for content area\n     * used for pages that aren't adopted to mobile\n     */\n    minContentWidth?: number;\n};\n\nconst defaultSidebarContext: TitanLayoutSidebarContextType = {\n    styles: {\n        popoverContent: {\n            '--background-color-strong': '#24323C',\n            'color': 'var(--color-white)',\n        } as CSSProperties,\n    },\n};\n\nconst useAppearance = (appearance: TitanLayoutProps['appearance']) =>\n    useMemo(() => {\n        const isLegacy = appearance === 'legacy';\n        const isAnvil1 = appearance === 'anvil1';\n        const isAnvil2 = appearance === 'anvil2';\n\n        return {\n            isLegacy,\n            isAnvil1,\n            isAnvil2,\n            isSequent: isLegacy || isAnvil2,\n        };\n    }, [appearance]);\n\nenum TopNavVariant {\n    None = 'none',\n    Tiny = 'tiny',\n    Dark = 'dark',\n    DarkStacked = 'stacked',\n    Mobile = 'mobile',\n}\n\nconst topBarHeights: Record<TopNavVariant, number> = {\n    [TopNavVariant.None]: 0,\n    [TopNavVariant.Tiny]: 48,\n    [TopNavVariant.Dark]: 48,\n    [TopNavVariant.DarkStacked]: 80,\n    [TopNavVariant.Mobile]: 72,\n};\n\nconst useTopNavVariant = (\n    hasTopBar: boolean,\n    isMobile: boolean,\n    isLeftNav: boolean,\n    hasTopCenterContent: boolean\n) => {\n    if (!hasTopBar) {\n        return TopNavVariant.None;\n    }\n\n    if (isMobile) {\n        return TopNavVariant.Mobile;\n    }\n\n    if (isLeftNav) {\n        return TopNavVariant.Tiny;\n    }\n\n    return hasTopCenterContent ? TopNavVariant.DarkStacked : TopNavVariant.Dark;\n};\n\nfunction TitanLayoutComponent({\n    appearance = 'anvil2',\n    navVariant = 'left',\n    id,\n    children,\n    contentOnly,\n    navigationComponent,\n    header,\n    headerFixed,\n    top,\n    profile,\n    state,\n    logo,\n    onStateChange,\n    navigationMainItems,\n    navigationOverflowItems,\n    extraLinks,\n    extraLinksTop,\n    extraText,\n    minContentWidth,\n    sideTop,\n}: TitanLayoutProps) {\n    const breakpoint = useTitanBreakpoint();\n    const context: TitanLayoutContextType = useMemo(\n        () => ({\n            NavigationComponent: navigationComponent ?? DefaultNavLinkComponent,\n            breakpoint,\n            isTitanLayout: true,\n            sidebar: defaultSidebarContext,\n        }),\n        [navigationComponent, breakpoint]\n    );\n    const view = useAppearance(appearance);\n    const [mobileDrawerOpened, setMobileDrawerOpened] = useState(false);\n    const { hasNotifications, NotificationsContextProvider } = useNotificationsState();\n    const [headerHeight, setHeaderHeight] = useState(0);\n    const [headerFixedHeight, setHeaderFixedHeight] = useState(0);\n\n    const isMobile = breakpoint.isMobile;\n    const hasSideBar =\n        !contentOnly &&\n        (navVariant === 'left' || (navVariant === 'top' && isMobile)) &&\n        (!!navigationMainItems?.length || !!sideTop?.length);\n    const topBarVariant = useTopNavVariant(!contentOnly, isMobile, navVariant === 'left', !!top);\n\n    useEffect(() => {\n        if (view.isAnvil1) {\n            const bodyClassName = 'of-hidden-i';\n            document.body.classList.add(bodyClassName);\n            return () => document.body.classList.remove(bodyClassName);\n        }\n    }, [view.isAnvil1]);\n\n    const onBurgerClick = useCallback(\n        (e: MouseEvent<never>) => {\n            if (isMobile) {\n                setMobileDrawerOpened(true);\n            } else {\n                onStateChange?.({ navCollapsed: !state?.navCollapsed });\n            }\n\n            e.stopPropagation();\n        },\n        [isMobile, state?.navCollapsed, onStateChange]\n    );\n\n    const onBarExpandChange = useCallback(\n        (expanded: boolean) => {\n            if (isMobile) {\n                setMobileDrawerOpened(false);\n            } else {\n                onStateChange?.({ navCollapsed: !expanded });\n            }\n        },\n        [onStateChange, isMobile]\n    );\n    const onSubmenuExpandChange = useCallback(\n        (id: string, expanded: boolean, force: boolean) => {\n            onStateChange?.({\n                navCollapsed: state?.navCollapsed ?? false,\n                submenusExpanded: [\n                    ...(force ? [] : (state?.submenusExpanded ?? []).filter(i => i !== id)),\n                    ...(expanded ? [id] : []),\n                ],\n            });\n        },\n        [state, onStateChange]\n    );\n    const sidebarNavItems = useMemo(() => {\n        if (!hasSideBar) {\n            return undefined;\n        }\n\n        if (navVariant === 'left') {\n            return navigationMainItems;\n        }\n\n        return [...(navigationMainItems ?? []), ...(navigationOverflowItems ?? [])];\n    }, [hasSideBar, navigationMainItems, navigationOverflowItems, navVariant]);\n\n    const hasMenuNotifications = useMemo(() => {\n        try {\n            return (\n                sidebarNavItems?.some(item => {\n                    if (item.counter || item.tag?.value) {\n                        return true;\n                    } else if (item.submenu) {\n                        return item.submenu.groups.some(group =>\n                            group.links.some(link => !!link.counter || !!link.tag?.value)\n                        );\n                    }\n                    return false;\n                }) ?? false\n            );\n        } catch {\n            return false;\n        }\n    }, [sidebarNavItems]);\n\n    const limitContentWidth = useMemo(() => {\n        if (view.isAnvil2 || !minContentWidth) {\n            return undefined;\n        }\n\n        if (breakpoint.width < minContentWidth) {\n            return minContentWidth;\n        }\n    }, [view, minContentWidth, breakpoint.width]);\n\n    const layoutStyles = useMemo(() => {\n        const topHeight = topBarHeights[topBarVariant] ?? 0;\n\n        return {\n            '--nav-top-height': `${topHeight}px`,\n            '--nav-offset-top': `${topHeight + headerFixedHeight}px`,\n            '--content-offset-top': `${topHeight + headerFixedHeight + headerHeight}px`,\n        } as CSSProperties;\n    }, [topBarVariant, headerFixedHeight, headerHeight]);\n\n    const layoutClass = view.isLegacy\n        ? Styles.layoutLegacy\n        : view.isAnvil1\n          ? Styles.layoutAnvil1\n          : Styles.layoutAnvil2;\n\n    const burgerProps: LayoutHeaderProps['burger'] = useMemo(() => {\n        if (topBarVariant === TopNavVariant.None) {\n            return undefined;\n        }\n\n        if (isMobile) {\n            return {\n                onClick: onBurgerClick,\n                tag: { value: hasNotifications || hasMenuNotifications },\n            };\n        }\n\n        if (navVariant === 'left') {\n            return {\n                'onClick': onBurgerClick,\n                'tooltip': state?.navCollapsed ? 'Expand' : 'Collapse',\n                'data-pendo': 'navigation-left-options',\n                'data-cy': 'navigation-left-options',\n            };\n        }\n\n        return undefined;\n    }, [\n        isMobile,\n        topBarVariant,\n        navVariant,\n        state?.navCollapsed,\n        onBurgerClick,\n        hasNotifications,\n        hasMenuNotifications,\n    ]);\n\n    return (\n        <LayoutContext.Provider value={context}>\n            <LayoutPlacementContext.Provider value=\"unset\">\n                <div\n                    id={id}\n                    className={classNames(\n                        Styles.layout,\n                        !isMobile && Styles.layoutDesktop,\n                        {\n                            [Styles.layoutNavSlim]: !isMobile && hasSideBar && state?.navCollapsed,\n                            [Styles.layoutNavWide]: !isMobile && hasSideBar && !state?.navCollapsed,\n                        },\n                        layoutClass\n                    )}\n                    style={layoutStyles}\n                >\n                    <div className={Styles.topPlaceholder} />\n                    {topBarVariant === TopNavVariant.Tiny ? (\n                        <LayoutHeader\n                            className={Styles.top}\n                            variant=\"light\"\n                            logo={logo}\n                            profile={isMobile ? undefined : profile}\n                            center={top}\n                            rightText={isMobile ? undefined : extraText}\n                            right={\n                                <Fragment>\n                                    {extraLinksTop}\n                                    {!isMobile && extraLinks}\n                                </Fragment>\n                            }\n                            isMobile={isMobile}\n                            burger={burgerProps}\n                        />\n                    ) : topBarVariant !== TopNavVariant.None ? (\n                        <LayoutHeaderDark\n                            className={Styles.top}\n                            logo={logo}\n                            profile={isMobile ? undefined : profile}\n                            center={top}\n                            rightText={isMobile ? undefined : extraText}\n                            right={\n                                <Fragment>\n                                    {extraLinksTop}\n                                    {!isMobile && extraLinks}\n                                </Fragment>\n                            }\n                            isMobile={isMobile}\n                            burger={burgerProps}\n                            navigationMainItems={navigationMainItems}\n                            navigationOverflowItems={navigationOverflowItems}\n                        />\n                    ) : null}\n\n                    {hasSideBar && (\n                        <NotificationsContextProvider>\n                            <LayoutSidebar\n                                className={Styles.side}\n                                mobile={breakpoint.isMobile}\n                                touchDevice={breakpoint.isTouchDevice}\n                                barExpanded={!state?.navCollapsed}\n                                onBarExpandChange={onBarExpandChange}\n                                submenusExpanded={state?.submenusExpanded}\n                                onSubmenuExpandChange={onSubmenuExpandChange}\n                                drawerOpened={mobileDrawerOpened}\n                                onDrawerOpenChange={setMobileDrawerOpened}\n                                top={sideTop}\n                                mainItems={sidebarNavItems}\n                                navigationComponent={context.NavigationComponent}\n                                bottom={\n                                    isMobile ? (\n                                        <Fragment>\n                                            {profile}\n                                            {extraLinks}\n                                            {!!extraText && (\n                                                <InternalSideNavigationTrigger\n                                                    id=\"--extra-text\"\n                                                    title={extraText}\n                                                    isActive={undefined}\n                                                    icon={undefined}\n                                                    iconActive={undefined}\n                                                    tag={undefined}\n                                                    className={undefined}\n                                                />\n                                            )}\n                                        </Fragment>\n                                    ) : undefined\n                                }\n                            />\n                        </NotificationsContextProvider>\n                    )}\n\n                    {!!headerFixed && (\n                        <TitanLayoutHeaderObserved\n                            heightChange={setHeaderFixedHeight}\n                            className={Styles.contentFixedHeader}\n                            data-cy=\"layout-content-fixed-header\"\n                        >\n                            {headerFixed}\n                        </TitanLayoutHeaderObserved>\n                    )}\n\n                    {!!header && view.isSequent && (\n                        <div className={Styles.contentHeader}>\n                            <TitanLayoutHeaderObserved\n                                heightChange={setHeaderHeight}\n                                data-cy=\"layout-content-header\"\n                            >\n                                {header}\n                            </TitanLayoutHeaderObserved>\n                        </div>\n                    )}\n                    {view.isAnvil1 ? (\n                        <LayoutContentAnvil1 header={header} minWidth={limitContentWidth}>\n                            {children}\n                        </LayoutContentAnvil1>\n                    ) : view.isLegacy ? (\n                        <LayoutContentLegacy minWidth={limitContentWidth}>\n                            {children}\n                        </LayoutContentLegacy>\n                    ) : (\n                        children\n                    )}\n                </div>\n            </LayoutPlacementContext.Provider>\n        </LayoutContext.Provider>\n    );\n}\n\nconst TitanLayoutHeaderObserved: FC<{\n    'children': ReactNode;\n    'className'?: string;\n    'data-cy'?: string;\n    heightChange?(value: number): void;\n}> = ({ children, heightChange, ...rest }) => {\n    const ref = useRef<HTMLDivElement>(null);\n\n    useEffect(() => {\n        if (ref.current) {\n            const updatePosition = () => {\n                if (ref.current && heightChange) {\n                    const pos = ref.current.getBoundingClientRect();\n                    heightChange(pos.height);\n                }\n            };\n\n            const observer = new ResizeObserver(updatePosition);\n            observer.observe(ref.current);\n\n            updatePosition();\n            return () => observer.disconnect();\n        }\n    }, [heightChange]);\n\n    useEffect(() => {\n        return () => {\n            heightChange?.(0);\n        };\n    }, [heightChange]);\n    return (\n        <div {...rest} ref={ref}>\n            {children}\n        </div>\n    );\n};\nconst TitanLayoutHeader: FC<{ children: ReactNode }> = ({ children }) => {\n    return (\n        <div className={Styles.contentHeader} data-cy=\"layout-content-header\">\n            {children}\n        </div>\n    );\n};\n\nconst LayoutContentAnvil1: FC<{\n    children: ReactNode;\n    header?: ReactNode;\n    minWidth?: number;\n}> = ({ children, header, minWidth }) => {\n    const innerContentStyles: CSSProperties = useMemo(\n        () => ({\n            ...(minWidth ? { minWidth: `${minWidth}px`, overflowX: 'auto' } : {}),\n        }),\n        [minWidth]\n    );\n\n    return (\n        <Fragment>\n            <TitanLayoutHeader>{header}</TitanLayoutHeader>\n            <div\n                className={classNames(Styles.content, { 'of-x-auto-i': !!minWidth })}\n                data-cy=\"layout-content\"\n            >\n                <div\n                    className=\"position-relative d-f flex-grow-1 flex-basis-0 of-hidden\"\n                    style={innerContentStyles}\n                >\n                    {children}\n                </div>\n            </div>\n        </Fragment>\n    );\n};\n\nconst LayoutContentLegacy: FC<{\n    children: ReactNode;\n    minWidth: number | undefined;\n}> = ({ children, minWidth }) => {\n    const innerContentStyles: CSSProperties = useMemo(\n        () => ({\n            position: 'relative',\n            minWidth: `${minWidth}px`,\n        }),\n        [minWidth]\n    );\n\n    return <div style={minWidth ? innerContentStyles : undefined}>{children}</div>;\n};\n\nexport const TitanLayout = Object.assign(TitanLayoutComponent, {\n    Link: TitanLayoutLink,\n    Trigger: TitanLayoutTrigger,\n});\n"],"names":["classNames","Fragment","useCallback","useEffect","useMemo","useRef","useState","DefaultNavLinkComponent","useTitanBreakpoint","LayoutContext","LayoutPlacementContext","LayoutHeader","LayoutHeaderDark","LayoutSidebar","InternalSideNavigationTrigger","useNotificationsState","TitanLayoutLink","TitanLayoutTrigger","Styles","defaultSidebarContext","styles","popoverContent","useAppearance","appearance","isLegacy","isAnvil1","isAnvil2","isSequent","TopNavVariant","topBarHeights","useTopNavVariant","hasTopBar","isMobile","isLeftNav","hasTopCenterContent","TitanLayoutComponent","navVariant","id","children","contentOnly","navigationComponent","header","headerFixed","top","profile","state","logo","onStateChange","navigationMainItems","navigationOverflowItems","extraLinks","extraLinksTop","extraText","minContentWidth","sideTop","breakpoint","context","NavigationComponent","isTitanLayout","sidebar","view","mobileDrawerOpened","setMobileDrawerOpened","hasNotifications","NotificationsContextProvider","headerHeight","setHeaderHeight","headerFixedHeight","setHeaderFixedHeight","hasSideBar","length","topBarVariant","bodyClassName","document","body","classList","add","remove","onBurgerClick","e","navCollapsed","stopPropagation","onBarExpandChange","expanded","onSubmenuExpandChange","force","submenusExpanded","filter","i","sidebarNavItems","undefined","hasMenuNotifications","some","item","counter","tag","value","submenu","groups","group","links","link","limitContentWidth","width","layoutStyles","topHeight","layoutClass","layoutLegacy","layoutAnvil1","layoutAnvil2","burgerProps","onClick","Provider","div","className","layout","layoutDesktop","layoutNavSlim","layoutNavWide","style","topPlaceholder","variant","center","rightText","right","burger","side","mobile","touchDevice","isTouchDevice","barExpanded","drawerOpened","onDrawerOpenChange","mainItems","bottom","title","isActive","icon","iconActive","TitanLayoutHeaderObserved","heightChange","contentFixedHeader","data-cy","contentHeader","LayoutContentAnvil1","minWidth","LayoutContentLegacy","rest","ref","current","updatePosition","pos","getBoundingClientRect","height","observer","ResizeObserver","observe","disconnect","TitanLayoutHeader","innerContentStyles","overflowX","content","position","TitanLayout","Object","assign","Link","Trigger"],"mappings":"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"}

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

@@ -88,6 +88,15 @@
     }
 }
 
+/* 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;

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/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.2.0-canary.270.41c771f.0",
+    "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": "41c771f48874df63f3b15dd35343ba2fc15d578f"
+    "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-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,
@@ -242,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 && (
@@ -332,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
@@ -353,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>
 );
 
@@ -396,11 +403,7 @@ export const ExtraWithTitle = (args: LayoutContentArgs) => (
         }
         {...useDefaultLayoutProps()}
     >
-        <Anvil2Page>
-            <Anvil2Page.Content>
-                <Content {...args} />
-            </Anvil2Page.Content>
-        </Anvil2Page>
+        <Anvil2Content {...args} />
     </TitanLayout>
 );
 
@@ -424,11 +427,7 @@ export const ExtraWithFlashing = (args: LayoutContentArgs) => (
         }
         {...useDefaultLayoutProps()}
     >
-        <Anvil2Page>
-            <Anvil2Page.Content>
-                <Content {...args} />
-            </Anvil2Page.Content>
-        </Anvil2Page>
+        <Anvil2Content {...args} />
     </TitanLayout>
 );
 
@@ -452,10 +451,6 @@ export const ExtraWithTitleFlashing = (args: LayoutContentArgs) => (
         }
         {...useDefaultLayoutProps()}
     >
-        <Anvil2Page>
-            <Anvil2Page.Content>
-                <Content {...args} />
-            </Anvil2Page.Content>
-        </Anvil2Page>
+        <Anvil2Content {...args} />
     </TitanLayout>
 );

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

@@ -88,6 +88,15 @@
     }
 }
 
+/* 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;

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

@@ -200,7 +200,7 @@ function TitanLayoutComponent({
     const view = useAppearance(appearance);
     const [mobileDrawerOpened, setMobileDrawerOpened] = useState(false);
     const { hasNotifications, NotificationsContextProvider } = useNotificationsState();
-    const [headerHeight] = useState(0);
+    const [headerHeight, setHeaderHeight] = useState(0);
     const [headerFixedHeight, setHeaderFixedHeight] = useState(0);
 
     const isMobile = breakpoint.isMobile;
@@ -401,6 +401,7 @@ function TitanLayoutComponent({
                             <LayoutSidebar
                                 className={Styles.side}
                                 mobile={breakpoint.isMobile}
+                                touchDevice={breakpoint.isTouchDevice}
                                 barExpanded={!state?.navCollapsed}
                                 onBarExpandChange={onBarExpandChange}
                                 submenusExpanded={state?.submenusExpanded}
@@ -444,8 +445,13 @@ function TitanLayoutComponent({
                     )}
 
                     {!!header && view.isSequent && (
-                        <div className={Styles.contentHeader} data-cy="layout-content-header">
-                            {header}
+                        <div className={Styles.contentHeader}>
+                            <TitanLayoutHeaderObserved
+                                heightChange={setHeaderHeight}
+                                data-cy="layout-content-header"
+                            >
+                                {header}
+                            </TitanLayoutHeaderObserved>
                         </div>
                     )}
                     {view.isAnvil1 ? (

package/src/test/data.tsx

@@ -33,7 +33,7 @@ import SvgTasks from '@servicetitan/anvil2/assets/icons/st/gnav_tasks_inactive.s
 import { BodyText, Popover } from '@servicetitan/design-system';
 
 import classNames from 'classnames';
-import { FC, Fragment, forwardRef, useState } from 'react';
+import { FC, 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';
@@ -78,6 +78,42 @@ export const LocationInfo: FC<{ className?: string }> = ({ className }) => {
     return <BodyText className={className}>current location - {location.pathname}</BodyText>;
 };
 
+export const CssInfo: FC<{ className?: string }> = ({ className }) => {
+    const ref = useRef<HTMLDivElement>(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 (
+        <div className={className} ref={ref}>
+            <p>CSS variables:</p>
+            {Object.entries(info).map(([key, value]) => (
+                <p key={key}>
+                    --{key} - {value}
+                </p>
+            ))}
+        </div>
+    );
+};
+
 export const withMemoryRouter = (Story: any) => (
     <MemoryRouter>
         <Story />

package/src/utils/use-breakpoint.ts

@@ -4,9 +4,12 @@ import { useMemo } from 'react';
 export interface TitanBreakpoint {
     name: BreakpointReturnProps['name'];
     isMobile: boolean;
+    isTouchDevice: boolean;
     width: number;
 }
 
+const isTouchDevice = () => window.matchMedia('(any-pointer: coarse)').matches;
+
 export const useTitanBreakpoint = (): TitanBreakpoint => {
     const breakpoint = useBreakpoint();
 
@@ -14,6 +17,7 @@ export const useTitanBreakpoint = (): TitanBreakpoint => {
         () => ({
             name: breakpoint?.name ?? 'xl',
             isMobile: breakpoint ? breakpoint.innerWidth < 768 : false,
+            isTouchDevice: isTouchDevice(),
             width: breakpoint?.innerWidth ?? 0,
         }),
         [breakpoint]