@servicetitan/navigation 12.0.4-canary.267.e7a392a.0 → 12.0.4-canary.267.f428d7e.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 {
     submenuExpanded: 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":"AAKA,OAAO,EAEH,EAAE,EAGF,YAAY,EAGf,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,kBAAkB,EAAyB,MAAM,wBAAwB,CAAC;AACnF,OAAO,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAavE,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,eAAe,EAAE,MAAM,GAAG,SAAS,CAAC;IACpC,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,GAAG,IAAI,CAAC;CAC9D;AAED,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CA4FhD,CAAC"}
+{"version":3,"file":"layout-sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-sidebar.tsx"],"names":[],"mappings":"AAKA,OAAO,EAEH,EAAE,EAGF,YAAY,EAGf,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,kBAAkB,EAAyB,MAAM,wBAAwB,CAAC;AACnF,OAAO,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAavE,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,eAAe,EAAE,MAAM,GAAG,SAAS,CAAC;IACpC,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,GAAG,IAAI,CAAC;CAC9D;AAED,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CA8FhD,CAAC"}

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

@@ -10,7 +10,7 @@ import { LayoutPlacementContext, useTitanLayoutContext } from './layout-context'
 import { InternalSideNavigationGroup, InternalSideNavigationGroupLink, InternalSideNavigationLink } from './layout-sidebar-links-internal';
 import * as Styles from './layout-sidebar.module.less';
 import { withTooltip } from './with-tooltip';
-export const LayoutSidebar = ({ className, mobile, barExpanded, submenuExpanded, drawerOpened, onBarExpandChange, onSubmenuExpandChange, onDrawerOpenChange, mainItems, top, bottom, navigationComponent })=>{
+export const LayoutSidebar = ({ className, mobile, touchDevice, barExpanded, submenuExpanded, drawerOpened, onBarExpandChange, onSubmenuExpandChange, onDrawerOpenChange, mainItems, top, bottom, navigationComponent })=>{
     const closeDrawer = ()=>{
         if (mobile) {
             onDrawerOpenChange === null || onDrawerOpenChange === void 0 ? void 0 : onDrawerOpenChange(false);
@@ -53,6 +53,7 @@ export const LayoutSidebar = ({ className, mobile, barExpanded, submenuExpanded,
                                         submenuExpanded: !!item.id && submenuExpanded === item.id,
                                         onSubmenuExpand: onSubmenuExpandChange,
                                         navigationComponent: navigationComponent,
+                                        touchDevice: touchDevice,
                                         ...item
                                     }, item.id) : /*#__PURE__*/ _jsx(InternalSideNavigationLink, {
                                         submenuExpanded: undefined,
@@ -111,7 +112,7 @@ LayoutSidebar.displayName = 'LayoutSidebar';
     }), appearance === 'expand' ? 'Expand Menu' : appearance === 'collapse' ? 'Collapse Menu' : undefined, {
         placement: 'right'
     });
-/** Side Navigation menu item */ const SideNavigationGroupItem = ({ onSubmenuExpand, barExpanded, submenuExpanded, ...props })=>{
+/** Side Navigation menu item */ const SideNavigationGroupItem = ({ onSubmenuExpand, barExpanded, submenuExpanded, touchDevice, ...props })=>{
     var _props_submenu, _props_submenu1;
     const onExpandToggle = useCallback((e)=>{
         e.preventDefault();
@@ -139,7 +140,7 @@ LayoutSidebar.displayName = 'LayoutSidebar';
         })
     }) : /*#__PURE__*/ _jsxs(Popover, {
         placement: "right-start",
-        openOnHover: true,
+        openOnHover: !touchDevice,
         delay: 500,
         children: [
             /*#__PURE__*/ _jsx(Popover.Trigger, {
@@ -147,6 +148,7 @@ LayoutSidebar.displayName = 'LayoutSidebar';
                         ...triggerProps,
                         children: /*#__PURE__*/ _jsx(InternalSideNavigationLink, {
                             ...props,
+                            className: classNames(props.className, touchDevice && Styles.pointerEventsNone),
                             submenuExpanded: undefined,
                             tag: tag
                         })

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 SvgCollapse from '@servicetitan/anvil2/assets/icons/st/gnav_menu_collapse.svg';\nimport SvgExpand from '@servicetitan/anvil2/assets/icons/st/gnav_menu_expand.svg';\nimport classNames from 'classnames';\nimport {\n    Children,\n    FC,\n    Fragment,\n    MouseEvent,\n    ReactElement,\n    isValidElement,\n    useCallback,\n} 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\nimport { withTooltip } from './with-tooltip';\n\nexport interface LayoutSidebarProps {\n    className?: string;\n    top?: ReactElement[];\n    bottom?: ReactElement;\n    mainItems?: NavigationItemData[];\n    barExpanded: boolean;\n    submenuExpanded: 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): void;\n}\n\nexport const LayoutSidebar: FC<LayoutSidebarProps> = ({\n    className,\n    mobile,\n    barExpanded,\n    submenuExpanded,\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                                    barExpanded={mobile ? drawerOpened : barExpanded}\n                                    submenuExpanded={!!item.id && submenuExpanded === item.id}\n                                    onSubmenuExpand={onSubmenuExpandChange}\n                                    navigationComponent={navigationComponent}\n                                    {...item}\n                                />\n                            ) : (\n                                <InternalSideNavigationLink\n                                    key={item.id}\n                                    submenuExpanded={undefined}\n                                    navigationComponent={navigationComponent}\n                                    {...item}\n                                    tag={getSubmenuGroupTag(\n                                        item.submenu,\n                                        getCounterTag(item.counter, item.tag)\n                                    )}\n                                />\n                            )\n                        )}\n                    </div>\n\n                    {!!bottom && <SidebarBottom>{bottom}</SidebarBottom>}\n                </ThemeProvider>\n\n                {!mobile && (\n                    <div className={Styles.navFooter}>\n                        <div className={Styles.divider} />\n                        <div className={Styles.toggleWrapper}>\n                            <SideNavigationOptionsToggle\n                                appearance={barExpanded ? 'collapse-button' : 'expand'}\n                                onExpandedChange={() => onBarExpandChange(!barExpanded)}\n                            />\n                        </div>\n                    </div>\n                )}\n            </div>\n        </LayoutPlacementContext.Provider>\n    );\n};\nLayoutSidebar.displayName = 'LayoutSidebar';\n\n/** Side Navigation options toggle */\nconst SideNavigationOptionsToggle: FC<{\n    appearance: 'expand' | 'collapse' | 'collapse-button';\n    onExpandedChange?(expanded: boolean): void;\n}> = ({ appearance, onExpandedChange }) =>\n    withTooltip(\n        <div\n            data-cy=\"navigation-left-options\"\n            data-pendo=\"navigation-left-options\"\n            className={classNames(Styles.toggle)}\n            onClick={() => onExpandedChange?.(appearance === 'expand')}\n        >\n            <div className={Styles.toggleContent}>\n                <div className={Styles.toggleIconWrapper}>\n                    <Icon\n                        className={Styles.toggleIcon}\n                        svg={appearance === 'expand' ? SvgExpand : SvgCollapse}\n                    />\n                </div>\n\n                {appearance === 'collapse-button' && (\n                    <span className={Styles.toggleText}>Collapse Menu</span>\n                )}\n            </div>\n        </div>,\n        appearance === 'expand'\n            ? 'Expand Menu'\n            : appearance === 'collapse'\n              ? 'Collapse Menu'\n              : undefined,\n        { placement: 'right' }\n    );\n\n/** Side Navigation menu item */\nconst SideNavigationGroupItem: FC<\n    NavigationItemData & {\n        navigationComponent: FC<NavLinkComponentProps>;\n        barExpanded: boolean;\n        submenuExpanded: boolean;\n        onSubmenuExpand: undefined | ((id: string, expanded: boolean) => void);\n    }\n> = ({ onSubmenuExpand, barExpanded, submenuExpanded, ...props }) => {\n    const onExpandToggle = useCallback(\n        (e: MouseEvent<never>) => {\n            e.preventDefault();\n            e.stopPropagation();\n\n            if (props.id) {\n                onSubmenuExpand?.(props.id, !submenuExpanded);\n            }\n        },\n        [props.id, submenuExpanded, onSubmenuExpand]\n    );\n    const {\n        sidebar: {\n            styles: { popoverContent },\n        },\n    } = useTitanLayoutContext();\n\n    const tag = getSubmenuGroupTag(props.submenu, getCounterTag(props.counter, props.tag));\n\n    return barExpanded ? (\n        <InternalSideNavigationGroup\n            {...props}\n            submenuExpanded={submenuExpanded}\n            onExpandToggle={onExpandToggle}\n            tag={tag}\n        >\n            <SideNavigationGroupContent\n                parentId={props.id}\n                groups={props.submenu?.groups ?? []}\n                navigationComponent={props.navigationComponent}\n            />\n        </InternalSideNavigationGroup>\n    ) : (\n        <Popover placement=\"right-start\" openOnHover delay={500}>\n            <Popover.Trigger>\n                {(triggerProps: any) => (\n                    <div {...triggerProps}>\n                        <InternalSideNavigationLink\n                            {...props}\n                            submenuExpanded={undefined}\n                            tag={tag}\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                        {props.title}\n                    </Text>\n                    <SideNavigationGroupContent\n                        parentId={props.id}\n                        groups={props.submenu?.groups ?? []}\n                        navigationComponent={props.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                            {...link}\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","SvgCollapse","SvgExpand","classNames","Children","Fragment","isValidElement","useCallback","getCounterTag","getSubmenuGroupTag","LayoutPlacementContext","useTitanLayoutContext","InternalSideNavigationGroup","InternalSideNavigationGroupLink","InternalSideNavigationLink","Styles","withTooltip","LayoutSidebar","className","mobile","barExpanded","submenuExpanded","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","id","onSubmenuExpand","undefined","tag","counter","SidebarBottom","navFooter","divider","toggleWrapper","SideNavigationOptionsToggle","appearance","onExpandedChange","displayName","data-pendo","toggle","toggleContent","toggleIconWrapper","toggleIcon","span","toggleText","placement","props","onExpandToggle","e","preventDefault","stopPropagation","sidebar","styles","popoverContent","SideNavigationGroupContent","parentId","groups","openOnHover","delay","Trigger","triggerProps","Content","style","submenuPopover","variant","el","title","reduce","out","group","index","links","trim","push","submenuGroupHeader","submenuGroupHeaderEmpty","link","children","list","child","navTop","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 SvgCollapse from '@servicetitan/anvil2/assets/icons/st/gnav_menu_collapse.svg';\nimport SvgExpand from '@servicetitan/anvil2/assets/icons/st/gnav_menu_expand.svg';\nimport classNames from 'classnames';\nimport {\n    Children,\n    FC,\n    Fragment,\n    MouseEvent,\n    ReactElement,\n    isValidElement,\n    useCallback,\n} 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\nimport { withTooltip } from './with-tooltip';\n\nexport interface LayoutSidebarProps {\n    className?: string;\n    top?: ReactElement[];\n    bottom?: ReactElement;\n    mainItems?: NavigationItemData[];\n    barExpanded: boolean;\n    submenuExpanded: 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): void;\n}\n\nexport const LayoutSidebar: FC<LayoutSidebarProps> = ({\n    className,\n    mobile,\n    touchDevice,\n    barExpanded,\n    submenuExpanded,\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                                    barExpanded={mobile ? drawerOpened : barExpanded}\n                                    submenuExpanded={!!item.id && submenuExpanded === item.id}\n                                    onSubmenuExpand={onSubmenuExpandChange}\n                                    navigationComponent={navigationComponent}\n                                    touchDevice={touchDevice}\n                                    {...item}\n                                />\n                            ) : (\n                                <InternalSideNavigationLink\n                                    key={item.id}\n                                    submenuExpanded={undefined}\n                                    navigationComponent={navigationComponent}\n                                    {...item}\n                                    tag={getSubmenuGroupTag(\n                                        item.submenu,\n                                        getCounterTag(item.counter, item.tag)\n                                    )}\n                                />\n                            )\n                        )}\n                    </div>\n\n                    {!!bottom && <SidebarBottom>{bottom}</SidebarBottom>}\n                </ThemeProvider>\n\n                {!mobile && (\n                    <div className={Styles.navFooter}>\n                        <div className={Styles.divider} />\n                        <div className={Styles.toggleWrapper}>\n                            <SideNavigationOptionsToggle\n                                appearance={barExpanded ? 'collapse-button' : 'expand'}\n                                onExpandedChange={() => onBarExpandChange(!barExpanded)}\n                            />\n                        </div>\n                    </div>\n                )}\n            </div>\n        </LayoutPlacementContext.Provider>\n    );\n};\nLayoutSidebar.displayName = 'LayoutSidebar';\n\n/** Side Navigation options toggle */\nconst SideNavigationOptionsToggle: FC<{\n    appearance: 'expand' | 'collapse' | 'collapse-button';\n    onExpandedChange?(expanded: boolean): void;\n}> = ({ appearance, onExpandedChange }) =>\n    withTooltip(\n        <div\n            data-cy=\"navigation-left-options\"\n            data-pendo=\"navigation-left-options\"\n            className={classNames(Styles.toggle)}\n            onClick={() => onExpandedChange?.(appearance === 'expand')}\n        >\n            <div className={Styles.toggleContent}>\n                <div className={Styles.toggleIconWrapper}>\n                    <Icon\n                        className={Styles.toggleIcon}\n                        svg={appearance === 'expand' ? SvgExpand : SvgCollapse}\n                    />\n                </div>\n\n                {appearance === 'collapse-button' && (\n                    <span className={Styles.toggleText}>Collapse Menu</span>\n                )}\n            </div>\n        </div>,\n        appearance === 'expand'\n            ? 'Expand Menu'\n            : appearance === 'collapse'\n              ? 'Collapse Menu'\n              : undefined,\n        { placement: 'right' }\n    );\n\n/** Side Navigation menu item */\nconst SideNavigationGroupItem: FC<\n    NavigationItemData & {\n        navigationComponent: FC<NavLinkComponentProps>;\n        touchDevice: boolean;\n        barExpanded: boolean;\n        submenuExpanded: boolean;\n        onSubmenuExpand: undefined | ((id: string, expanded: boolean) => void);\n    }\n> = ({ onSubmenuExpand, barExpanded, submenuExpanded, touchDevice, ...props }) => {\n    const onExpandToggle = useCallback(\n        (e: MouseEvent<never>) => {\n            e.preventDefault();\n            e.stopPropagation();\n\n            if (props.id) {\n                onSubmenuExpand?.(props.id, !submenuExpanded);\n            }\n        },\n        [props.id, submenuExpanded, onSubmenuExpand]\n    );\n    const {\n        sidebar: {\n            styles: { popoverContent },\n        },\n    } = useTitanLayoutContext();\n\n    const tag = getSubmenuGroupTag(props.submenu, getCounterTag(props.counter, props.tag));\n\n    return barExpanded ? (\n        <InternalSideNavigationGroup\n            {...props}\n            submenuExpanded={submenuExpanded}\n            onExpandToggle={onExpandToggle}\n            tag={tag}\n        >\n            <SideNavigationGroupContent\n                parentId={props.id}\n                groups={props.submenu?.groups ?? []}\n                navigationComponent={props.navigationComponent}\n            />\n        </InternalSideNavigationGroup>\n    ) : (\n        <Popover placement=\"right-start\" openOnHover={!touchDevice} delay={500}>\n            <Popover.Trigger>\n                {(triggerProps: any) => (\n                    <div {...triggerProps}>\n                        <InternalSideNavigationLink\n                            {...props}\n                            className={classNames(\n                                props.className,\n                                touchDevice && Styles.pointerEventsNone\n                            )}\n                            submenuExpanded={undefined}\n                            tag={tag}\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                        {props.title}\n                    </Text>\n                    <SideNavigationGroupContent\n                        parentId={props.id}\n                        groups={props.submenu?.groups ?? []}\n                        navigationComponent={props.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                            {...link}\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","SvgCollapse","SvgExpand","classNames","Children","Fragment","isValidElement","useCallback","getCounterTag","getSubmenuGroupTag","LayoutPlacementContext","useTitanLayoutContext","InternalSideNavigationGroup","InternalSideNavigationGroupLink","InternalSideNavigationLink","Styles","withTooltip","LayoutSidebar","className","mobile","touchDevice","barExpanded","submenuExpanded","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","id","onSubmenuExpand","undefined","tag","counter","SidebarBottom","navFooter","divider","toggleWrapper","SideNavigationOptionsToggle","appearance","onExpandedChange","displayName","data-pendo","toggle","toggleContent","toggleIconWrapper","toggleIcon","span","toggleText","placement","props","onExpandToggle","e","preventDefault","stopPropagation","sidebar","styles","popoverContent","SideNavigationGroupContent","parentId","groups","openOnHover","delay","Trigger","triggerProps","pointerEventsNone","Content","style","submenuPopover","variant","el","title","reduce","out","group","index","links","trim","push","submenuGroupHeader","submenuGroupHeaderEmpty","link","children","list","child","navTop","navBottom"],"mappings":"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"}

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

@@ -537,3 +537,7 @@
         background-color: @bg-color-hover;
     }
 }
+
+.pointer-events-none {
+    pointer-events: none;
+}

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

@@ -30,6 +30,7 @@ export const navMain: string;
 export const navSlim: string;
 export const navTop: string;
 export const navWide: string;
+export const pointerEventsNone: string;
 export const submenu: string;
 export const submenuGroupHeader: string;
 export const submenuGroupHeaderEmpty: string;

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

@@ -31,7 +31,9 @@ export type TitanLayoutProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'
     extraLinksTop?: ReactElement;
     extraText?: string;
     minContentWidth?: number;
+    noResponsive?: boolean;
 };
+export declare const useViewportConfigs: (noResponsive?: boolean) => void;
 export declare const TitanLayout: FC<TitanLayoutProps> & {
     Link: typeof TitanLayoutSidebarLink;
     Trigger: typeof TitanLayoutSidebarTrigger;

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,EAEF,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;AAErD,OAAO,EAAE,sBAAsB,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAK3F,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,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAElD,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,GAAG,CAAC,EAAE,YAAY,CAAC;IACnB,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,aAAa,CAAC,EAAE,YAAY,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AA8WF,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,EAEF,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;AAErD,OAAO,EAAE,sBAAsB,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAK3F,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,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAElD,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,GAAG,CAAC,EAAE,YAAY,CAAC;IACnB,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,aAAa,CAAC,EAAE,YAAY,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAyBF,eAAO,MAAM,kBAAkB,GAAI,eAAe,OAAO,SAUxD,CAAC;AA0VF,eAAO,MAAM,WAAW;;;CAGtB,CAAC"}

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

@@ -32,8 +32,18 @@ const useAppearance = (appearance)=>useMemo(()=>{
     }, [
         appearance
     ]);
-const TitanLayoutComponent = ({ appearance = 'anvil2', navVariant = 'left', id, children, contentOnly, navigationComponent, header, top, profile, state, logo, onStateChange, navigationMainItems, navigationOverflowItems, extraLinks, extraLinksTop, extraText, minContentWidth, sideTop })=>{
-    const breakpoint = useTitanBreakpoint();
+export const useViewportConfigs = (noResponsive)=>{
+    useEffect(()=>{
+        const meta = document.head.querySelector('meta[name="viewport"]');
+        if (meta) {
+            meta.content = noResponsive ? '' : 'width=device-width, initial-scale=1, maximum-scale=1';
+        }
+    }, [
+        noResponsive
+    ]);
+};
+const TitanLayoutComponent = ({ appearance = 'anvil2', navVariant = 'left', id, children, contentOnly, navigationComponent, header, top, profile, state, logo, onStateChange, navigationMainItems, navigationOverflowItems, extraLinks, extraLinksTop, extraText, minContentWidth, noResponsive, sideTop })=>{
+    const breakpoint = useTitanBreakpoint(noResponsive);
     const context = useMemo(()=>({
             NavigationComponent: navigationComponent !== null && navigationComponent !== void 0 ? navigationComponent : DefaultNavLinkComponent,
             breakpoint,
@@ -155,13 +165,13 @@ const TitanLayoutComponent = ({ appearance = 'anvil2', navVariant = 'left', id,
             value: "unset",
             children: /*#__PURE__*/ _jsxs("div", {
                 id: id,
-                className: classNames(Styles.layout, isMobile ? Styles.layoutMobile : Styles.layoutDesktop, hasTopBar && (navVariant === 'left' || !top ? Styles.layoutTopLight : Styles.layoutTopNav), {
+                className: classNames(Styles.layout, isMobile ? Styles.layoutMobile : Styles.layoutDesktop, noResponsive && Styles.layoutNoResponsive, hasTopBar && (navVariant === 'left' || !top ? Styles.layoutTopLight : Styles.layoutTopNav), {
                     [Styles.layoutNavSlim]: !isMobile && hasSideBar && (state === null || state === void 0 ? void 0 : state.navCollapsed),
                     [Styles.layoutNavWide]: !isMobile && hasSideBar && !(state === null || state === void 0 ? void 0 : state.navCollapsed)
                 }, layoutClass),
                 style: contentStyles,
                 children: [
-                    view.isSequent && /*#__PURE__*/ _jsx("div", {
+                    /*#__PURE__*/ _jsx("div", {
                         className: Styles.topPlaceholder
                     }),
                     hasTopBar && (navVariant === 'left' ? /*#__PURE__*/ _jsx(LayoutHeader, {
@@ -202,6 +212,7 @@ const 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,
                             submenuExpanded: state === null || state === void 0 ? void 0 : state.submenuExpanded,

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    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 } from './layout-header';\nimport { LayoutHeaderDark } from './layout-header-dark';\nimport { TitanLayoutLogoProps } from './layout-logo';\nimport { LayoutSidebar } from './layout-sidebar';\nimport { TitanLayoutSidebarLink, TitanLayoutSidebarTrigger } from './layout-sidebar-links';\nimport { InternalSideNavigationTrigger } from './layout-sidebar-links-internal';\nimport { useNotificationsState } from './notifications-context';\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    state?: TitanLayoutState;\n    onStateChange?: (state: TitanLayoutState) => void;\n\n    header?: ReactElement;\n    top?: ReactElement;\n    sideTop?: ReactElement[];\n    profile?: ReactElement;\n    extraLinks?: ReactElement;\n    extraLinksTop?: ReactElement;\n    extraText?: string;\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\nconst TitanLayoutComponent: FC<TitanLayoutProps> = ({\n    appearance = 'anvil2',\n    navVariant = 'left',\n    id,\n    children,\n    contentOnly,\n    navigationComponent,\n    header,\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}) => {\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 [offsetTopStyles, setOffsetTopStyles] = useState<object>({});\n    const updateIndicatorsHeight = useCallback((offset: number) => {\n        setOffsetTopStyles({\n            '--content-offset-top': `calc(var(--nav-offset-top) + ${offset}px)`,\n        });\n    }, []);\n\n    const isMobile = breakpoint.isMobile;\n    const hasSideBar =\n        !contentOnly &&\n        (navVariant === 'left' || (navVariant === 'top' && isMobile)) &&\n        (!!navigationMainItems?.length || !!sideTop?.length);\n    const hasTopBar = !contentOnly;\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((e: MouseEvent) => {\n        setMobileDrawerOpened(true);\n        e.stopPropagation();\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) => {\n            onStateChange?.({\n                navCollapsed: state?.navCollapsed ?? false,\n                submenuExpanded: expanded ? id : undefined,\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 contentStyles = useMemo(() => {\n        if (view.isAnvil2 || view.isLegacy) {\n            return offsetTopStyles;\n        }\n    }, [view, offsetTopStyles]);\n\n    const layoutClass = view.isLegacy\n        ? Styles.layoutLegacy\n        : view.isAnvil1\n          ? Styles.layoutAnvil1\n          : Styles.layoutAnvil2;\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.layoutMobile : Styles.layoutDesktop,\n                        hasTopBar &&\n                            (navVariant === 'left' || !top\n                                ? Styles.layoutTopLight\n                                : Styles.layoutTopNav),\n                        {\n                            [Styles.layoutNavSlim]: !isMobile && hasSideBar && state?.navCollapsed,\n                            [Styles.layoutNavWide]: !isMobile && hasSideBar && !state?.navCollapsed,\n                        },\n                        layoutClass\n                    )}\n                    style={contentStyles}\n                >\n                    {view.isSequent && <div className={Styles.topPlaceholder} />}\n                    {hasTopBar &&\n                        (navVariant === 'left' ? (\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                                hasNotifications={hasNotifications || hasMenuNotifications}\n                                onBurgerClick={onBurgerClick}\n                            />\n                        ) : (\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                                hasNotifications={hasNotifications || hasMenuNotifications}\n                                onBurgerClick={onBurgerClick}\n                                navigationMainItems={navigationMainItems}\n                                navigationOverflowItems={navigationOverflowItems}\n                            />\n                        ))}\n\n                    {hasSideBar && (\n                        <NotificationsContextProvider>\n                            <LayoutSidebar\n                                className={Styles.side}\n                                mobile={breakpoint.isMobile}\n                                barExpanded={!state?.navCollapsed}\n                                onBarExpandChange={onBarExpandChange}\n                                submenuExpanded={state?.submenuExpanded}\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                                                    submenuExpanded={undefined}\n                                                    tag={undefined}\n                                                    icon={undefined}\n                                                    iconActive={undefined}\n                                                />\n                                            )}\n                                        </Fragment>\n                                    ) : undefined\n                                }\n                            />\n                        </NotificationsContextProvider>\n                    )}\n\n                    {view.isAnvil2 ? (\n                        <TitanLayoutHeaderObserved heightChange={updateIndicatorsHeight}>\n                            {header}\n                        </TitanLayoutHeaderObserved>\n                    ) : view.isLegacy ? (\n                        header\n                    ) : null}\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    heightChange?(value: number): void;\n}> = ({ children, heightChange }) => {\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 ref={ref} className={Styles.contentHeader} data-cy=\"layout-content-header\">\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: TitanLayoutSidebarLink,\n    Trigger: TitanLayoutSidebarTrigger,\n});\n"],"names":["classNames","Fragment","useCallback","useEffect","useMemo","useRef","useState","DefaultNavLinkComponent","useTitanBreakpoint","LayoutContext","LayoutPlacementContext","LayoutHeader","LayoutHeaderDark","LayoutSidebar","TitanLayoutSidebarLink","TitanLayoutSidebarTrigger","InternalSideNavigationTrigger","useNotificationsState","Styles","defaultSidebarContext","styles","popoverContent","useAppearance","appearance","isLegacy","isAnvil1","isAnvil2","isSequent","TitanLayoutComponent","navVariant","id","children","contentOnly","navigationComponent","header","top","profile","state","logo","onStateChange","navigationMainItems","navigationOverflowItems","extraLinks","extraLinksTop","extraText","minContentWidth","sideTop","breakpoint","context","NavigationComponent","isTitanLayout","sidebar","view","mobileDrawerOpened","setMobileDrawerOpened","hasNotifications","NotificationsContextProvider","offsetTopStyles","setOffsetTopStyles","updateIndicatorsHeight","offset","isMobile","hasSideBar","length","hasTopBar","bodyClassName","document","body","classList","add","remove","onBurgerClick","e","stopPropagation","onBarExpandChange","expanded","navCollapsed","onSubmenuExpandChange","submenuExpanded","undefined","sidebarNavItems","hasMenuNotifications","some","item","counter","tag","value","submenu","groups","group","links","link","limitContentWidth","width","contentStyles","layoutClass","layoutLegacy","layoutAnvil1","layoutAnvil2","Provider","div","className","layout","layoutMobile","layoutDesktop","layoutTopLight","layoutTopNav","layoutNavSlim","layoutNavWide","style","topPlaceholder","variant","center","rightText","right","side","mobile","barExpanded","drawerOpened","onDrawerOpenChange","mainItems","bottom","title","icon","iconActive","TitanLayoutHeaderObserved","heightChange","LayoutContentAnvil1","minWidth","LayoutContentLegacy","ref","current","updatePosition","pos","getBoundingClientRect","height","observer","ResizeObserver","observe","disconnect","contentHeader","data-cy","TitanLayoutHeader","innerContentStyles","overflowX","content","position","TitanLayout","Object","assign","Link","Trigger"],"mappings":"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"}
+{"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    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 } from './layout-header';\nimport { LayoutHeaderDark } from './layout-header-dark';\nimport { TitanLayoutLogoProps } from './layout-logo';\nimport { LayoutSidebar } from './layout-sidebar';\nimport { TitanLayoutSidebarLink, TitanLayoutSidebarTrigger } from './layout-sidebar-links';\nimport { InternalSideNavigationTrigger } from './layout-sidebar-links-internal';\nimport { useNotificationsState } from './notifications-context';\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    state?: TitanLayoutState;\n    onStateChange?: (state: TitanLayoutState) => void;\n\n    header?: ReactElement;\n    top?: ReactElement;\n    sideTop?: ReactElement[];\n    profile?: ReactElement;\n    extraLinks?: ReactElement;\n    extraLinksTop?: ReactElement;\n    extraText?: string;\n    minContentWidth?: number;\n    noResponsive?: boolean;\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\nexport const useViewportConfigs = (noResponsive?: boolean) => {\n    useEffect(() => {\n        const meta: HTMLMetaElement | null = document.head.querySelector('meta[name=\"viewport\"]');\n\n        if (meta) {\n            meta.content = noResponsive\n                ? ''\n                : 'width=device-width, initial-scale=1, maximum-scale=1';\n        }\n    }, [noResponsive]);\n};\n\nconst TitanLayoutComponent: FC<TitanLayoutProps> = ({\n    appearance = 'anvil2',\n    navVariant = 'left',\n    id,\n    children,\n    contentOnly,\n    navigationComponent,\n    header,\n    top,\n    profile,\n    state,\n    logo,\n    onStateChange,\n    navigationMainItems,\n    navigationOverflowItems,\n    extraLinks,\n    extraLinksTop,\n    extraText,\n    minContentWidth,\n    noResponsive,\n    sideTop,\n}) => {\n    const breakpoint = useTitanBreakpoint(noResponsive);\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 [offsetTopStyles, setOffsetTopStyles] = useState<object>({});\n    const updateIndicatorsHeight = useCallback((offset: number) => {\n        setOffsetTopStyles({\n            '--content-offset-top': `calc(var(--nav-offset-top) + ${offset}px)`,\n        });\n    }, []);\n\n    const isMobile = breakpoint.isMobile;\n    const hasSideBar =\n        !contentOnly &&\n        (navVariant === 'left' || (navVariant === 'top' && isMobile)) &&\n        (!!navigationMainItems?.length || !!sideTop?.length);\n    const hasTopBar = !contentOnly;\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((e: MouseEvent) => {\n        setMobileDrawerOpened(true);\n        e.stopPropagation();\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) => {\n            onStateChange?.({\n                navCollapsed: state?.navCollapsed ?? false,\n                submenuExpanded: expanded ? id : undefined,\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 contentStyles = useMemo(() => {\n        if (view.isAnvil2 || view.isLegacy) {\n            return offsetTopStyles;\n        }\n    }, [view, offsetTopStyles]);\n\n    const layoutClass = view.isLegacy\n        ? Styles.layoutLegacy\n        : view.isAnvil1\n          ? Styles.layoutAnvil1\n          : Styles.layoutAnvil2;\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.layoutMobile : Styles.layoutDesktop,\n                        noResponsive && Styles.layoutNoResponsive,\n                        hasTopBar &&\n                            (navVariant === 'left' || !top\n                                ? Styles.layoutTopLight\n                                : Styles.layoutTopNav),\n                        {\n                            [Styles.layoutNavSlim]: !isMobile && hasSideBar && state?.navCollapsed,\n                            [Styles.layoutNavWide]: !isMobile && hasSideBar && !state?.navCollapsed,\n                        },\n                        layoutClass\n                    )}\n                    style={contentStyles}\n                >\n                    <div className={Styles.topPlaceholder} />\n                    {hasTopBar &&\n                        (navVariant === 'left' ? (\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                                hasNotifications={hasNotifications || hasMenuNotifications}\n                                onBurgerClick={onBurgerClick}\n                            />\n                        ) : (\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                                hasNotifications={hasNotifications || hasMenuNotifications}\n                                onBurgerClick={onBurgerClick}\n                                navigationMainItems={navigationMainItems}\n                                navigationOverflowItems={navigationOverflowItems}\n                            />\n                        ))}\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                                submenuExpanded={state?.submenuExpanded}\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                                                    submenuExpanded={undefined}\n                                                    tag={undefined}\n                                                    icon={undefined}\n                                                    iconActive={undefined}\n                                                />\n                                            )}\n                                        </Fragment>\n                                    ) : undefined\n                                }\n                            />\n                        </NotificationsContextProvider>\n                    )}\n\n                    {view.isAnvil2 ? (\n                        <TitanLayoutHeaderObserved heightChange={updateIndicatorsHeight}>\n                            {header}\n                        </TitanLayoutHeaderObserved>\n                    ) : view.isLegacy ? (\n                        header\n                    ) : null}\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    heightChange?(value: number): void;\n}> = ({ children, heightChange }) => {\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 ref={ref} className={Styles.contentHeader} data-cy=\"layout-content-header\">\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: TitanLayoutSidebarLink,\n    Trigger: TitanLayoutSidebarTrigger,\n});\n"],"names":["classNames","Fragment","useCallback","useEffect","useMemo","useRef","useState","DefaultNavLinkComponent","useTitanBreakpoint","LayoutContext","LayoutPlacementContext","LayoutHeader","LayoutHeaderDark","LayoutSidebar","TitanLayoutSidebarLink","TitanLayoutSidebarTrigger","InternalSideNavigationTrigger","useNotificationsState","Styles","defaultSidebarContext","styles","popoverContent","useAppearance","appearance","isLegacy","isAnvil1","isAnvil2","isSequent","useViewportConfigs","noResponsive","meta","document","head","querySelector","content","TitanLayoutComponent","navVariant","id","children","contentOnly","navigationComponent","header","top","profile","state","logo","onStateChange","navigationMainItems","navigationOverflowItems","extraLinks","extraLinksTop","extraText","minContentWidth","sideTop","breakpoint","context","NavigationComponent","isTitanLayout","sidebar","view","mobileDrawerOpened","setMobileDrawerOpened","hasNotifications","NotificationsContextProvider","offsetTopStyles","setOffsetTopStyles","updateIndicatorsHeight","offset","isMobile","hasSideBar","length","hasTopBar","bodyClassName","body","classList","add","remove","onBurgerClick","e","stopPropagation","onBarExpandChange","expanded","navCollapsed","onSubmenuExpandChange","submenuExpanded","undefined","sidebarNavItems","hasMenuNotifications","some","item","counter","tag","value","submenu","groups","group","links","link","limitContentWidth","width","contentStyles","layoutClass","layoutLegacy","layoutAnvil1","layoutAnvil2","Provider","div","className","layout","layoutMobile","layoutDesktop","layoutNoResponsive","layoutTopLight","layoutTopNav","layoutNavSlim","layoutNavWide","style","topPlaceholder","variant","center","rightText","right","side","mobile","touchDevice","isTouchDevice","barExpanded","drawerOpened","onDrawerOpenChange","mainItems","bottom","title","icon","iconActive","TitanLayoutHeaderObserved","heightChange","LayoutContentAnvil1","minWidth","LayoutContentLegacy","ref","current","updatePosition","pos","getBoundingClientRect","height","observer","ResizeObserver","observe","disconnect","contentHeader","data-cy","TitanLayoutHeader","innerContentStyles","overflowX","position","TitanLayout","Object","assign","Link","Trigger"],"mappings":"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"}

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

@@ -9,8 +9,7 @@
 @bg-color-active: rgba(120, 187, 250, 0.2);
 
 .layout-anvil1 {
-    height: calc(100vh - var(--nav-offset-top));
-    margin-top: var(--nav-offset-top);
+    height: 100vh;
 
     display: flex;
     flex-direction: column;
@@ -52,7 +51,8 @@
 }
 
 .layout-legacy,
-.layout-anvil2 {
+.layout-anvil2,
+.layout-anvil1 {
     .top-placeholder {
         height: var(--nav-offset-top);
     }
@@ -100,6 +100,14 @@
     }
 }
 
+.layout-no-responsive {
+    min-width: 800px;
+
+    .top {
+        width: 100%;
+    }
+}
+
 @media print {
     .layout {
         --nav-offset-left: 0px !important;

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

@@ -9,6 +9,7 @@ export const layoutLegacy: string;
 export const layoutMobile: string;
 export const layoutNavSlim: string;
 export const layoutNavWide: string;
+export const layoutNoResponsive: string;
 export const layoutTopLight: string;
 export const layoutTopNav: string;
 export const side: string;

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

@@ -2,7 +2,8 @@ import { BreakpointReturnProps } from '@servicetitan/anvil2';
 export interface TitanBreakpoint {
     name: BreakpointReturnProps['name'];
     isMobile: boolean;
+    isTouchDevice: boolean;
     width: number;
 }
-export declare const useTitanBreakpoint: () => TitanBreakpoint;
+export declare const useTitanBreakpoint: (noResponsive?: boolean) => TitanBreakpoint;
 //# sourceMappingURL=use-breakpoint.d.ts.map

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,GAAI,eAAe,OAAO,KAAG,eAY3D,CAAC"}

package/dist/utils/use-breakpoint.js

@@ -1,16 +1,19 @@
 import { useBreakpoint } from '@servicetitan/anvil2';
 import { useMemo } from 'react';
-export const useTitanBreakpoint = ()=>{
+const isTouchDevice = ()=>window.matchMedia('(any-pointer: coarse)').matches;
+export const useTitanBreakpoint = (noResponsive)=>{
     const breakpoint = useBreakpoint();
     return useMemo(()=>{
         var _breakpoint_name, _breakpoint_innerWidth;
         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,
+            isMobile: breakpoint && !noResponsive ? 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
         };
     }, [
-        breakpoint
+        breakpoint,
+        noResponsive
     ]);
 };
 

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 = (noResponsive?: boolean): TitanBreakpoint => {\n    const breakpoint = useBreakpoint();\n\n    return useMemo(\n        () => ({\n            name: breakpoint?.name ?? 'xl',\n            isMobile: breakpoint && !noResponsive ? breakpoint.innerWidth < 768 : false,\n            isTouchDevice: isTouchDevice(),\n            width: breakpoint?.innerWidth ?? 0,\n        }),\n        [breakpoint, noResponsive]\n    );\n};\n"],"names":["useBreakpoint","useMemo","isTouchDevice","window","matchMedia","matches","useTitanBreakpoint","noResponsive","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,CAACC;IAC/B,MAAMC,aAAaR;IAEnB,OAAOC,QACH;YACUO,kBAGCA;eAJJ;YACHC,MAAMD,CAAAA,mBAAAA,uBAAAA,iCAAAA,WAAYC,IAAI,cAAhBD,8BAAAA,mBAAoB;YAC1BE,UAAUF,cAAc,CAACD,eAAeC,WAAWG,UAAU,GAAG,MAAM;YACtET,eAAeA;YACfU,OAAOJ,CAAAA,yBAAAA,uBAAAA,iCAAAA,WAAYG,UAAU,cAAtBH,oCAAAA,yBAA0B;QACrC;OACA;QAACA;QAAYD;KAAa;AAElC,EAAE"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/navigation",
-    "version": "12.0.4-canary.267.e7a392a.0",
+    "version": "12.0.4-canary.267.f428d7e.0",
     "description": "Navigation components",
     "repository": {
         "type": "git",
@@ -42,5 +42,5 @@
         "less": true,
         "webpack": false
     },
-    "gitHead": "e7a392adbbed984980b7d03a9fb65495f29203dc"
+    "gitHead": "f428d7e5a0d6bc0bada217a0fc595aefc155fa8e"
 }

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.module.less

@@ -537,3 +537,7 @@
         background-color: @bg-color-hover;
     }
 }
+
+.pointer-events-none {
+    pointer-events: none;
+}

package/src/components/titan-layout/layout-sidebar.module.less.d.ts

@@ -30,6 +30,7 @@ export const navMain: string;
 export const navSlim: string;
 export const navTop: string;
 export const navWide: string;
+export const pointerEventsNone: string;
 export const submenu: string;
 export const submenuGroupHeader: string;
 export const submenuGroupHeaderEmpty: string;

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

@@ -35,6 +35,7 @@ export interface LayoutSidebarProps {
     submenuExpanded: string | undefined;
     drawerOpened: boolean;
     mobile: boolean;
+    touchDevice: boolean;
     navigationComponent: FC<NavLinkComponentProps>;
     onBarExpandChange(expanded: boolean): void;
     onDrawerOpenChange(expanded: boolean): void;
@@ -44,6 +45,7 @@ export interface LayoutSidebarProps {
 export const LayoutSidebar: FC<LayoutSidebarProps> = ({
     className,
     mobile,
+    touchDevice,
     barExpanded,
     submenuExpanded,
     drawerOpened,
@@ -99,6 +101,7 @@ export const LayoutSidebar: FC<LayoutSidebarProps> = ({
                                     submenuExpanded={!!item.id && submenuExpanded === item.id}
                                     onSubmenuExpand={onSubmenuExpandChange}
                                     navigationComponent={navigationComponent}
+                                    touchDevice={touchDevice}
                                     {...item}
                                 />
                             ) : (
@@ -173,11 +176,12 @@ const SideNavigationOptionsToggle: FC<{
 const SideNavigationGroupItem: FC<
     NavigationItemData & {
         navigationComponent: FC<NavLinkComponentProps>;
+        touchDevice: boolean;
         barExpanded: boolean;
         submenuExpanded: boolean;
         onSubmenuExpand: undefined | ((id: string, expanded: boolean) => void);
     }
-> = ({ onSubmenuExpand, barExpanded, submenuExpanded, ...props }) => {
+> = ({ onSubmenuExpand, barExpanded, submenuExpanded, touchDevice, ...props }) => {
     const onExpandToggle = useCallback(
         (e: MouseEvent<never>) => {
             e.preventDefault();
@@ -211,12 +215,16 @@ const SideNavigationGroupItem: FC<
             />
         </InternalSideNavigationGroup>
     ) : (
-        <Popover placement="right-start" openOnHover delay={500}>
+        <Popover placement="right-start" openOnHover={!touchDevice} delay={500}>
             <Popover.Trigger>
                 {(triggerProps: any) => (
                     <div {...triggerProps}>
                         <InternalSideNavigationLink
                             {...props}
+                            className={classNames(
+                                props.className,
+                                touchDevice && Styles.pointerEventsNone
+                            )}
                             submenuExpanded={undefined}
                             tag={tag}
                         />

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

@@ -9,8 +9,7 @@
 @bg-color-active: rgba(120, 187, 250, 0.2);
 
 .layout-anvil1 {
-    height: calc(100vh - var(--nav-offset-top));
-    margin-top: var(--nav-offset-top);
+    height: 100vh;
 
     display: flex;
     flex-direction: column;
@@ -52,7 +51,8 @@
 }
 
 .layout-legacy,
-.layout-anvil2 {
+.layout-anvil2,
+.layout-anvil1 {
     .top-placeholder {
         height: var(--nav-offset-top);
     }
@@ -100,6 +100,14 @@
     }
 }
 
+.layout-no-responsive {
+    min-width: 800px;
+
+    .top {
+        width: 100%;
+    }
+}
+
 @media print {
     .layout {
         --nav-offset-left: 0px !important;

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

@@ -9,6 +9,7 @@ export const layoutLegacy: string;
 export const layoutMobile: string;
 export const layoutNavSlim: string;
 export const layoutNavWide: string;
+export const layoutNoResponsive: string;
 export const layoutTopLight: string;
 export const layoutTopNav: string;
 export const side: string;

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

@@ -67,6 +67,7 @@ export type TitanLayoutProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'
     extraLinksTop?: ReactElement;
     extraText?: string;
     minContentWidth?: number;
+    noResponsive?: boolean;
 };
 
 const defaultSidebarContext: TitanLayoutSidebarContextType = {
@@ -92,6 +93,18 @@ const useAppearance = (appearance: TitanLayoutProps['appearance']) =>
         };
     }, [appearance]);
 
+export const useViewportConfigs = (noResponsive?: boolean) => {
+    useEffect(() => {
+        const meta: HTMLMetaElement | null = document.head.querySelector('meta[name="viewport"]');
+
+        if (meta) {
+            meta.content = noResponsive
+                ? ''
+                : 'width=device-width, initial-scale=1, maximum-scale=1';
+        }
+    }, [noResponsive]);
+};
+
 const TitanLayoutComponent: FC<TitanLayoutProps> = ({
     appearance = 'anvil2',
     navVariant = 'left',
@@ -111,9 +124,10 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
     extraLinksTop,
     extraText,
     minContentWidth,
+    noResponsive,
     sideTop,
 }) => {
-    const breakpoint = useTitanBreakpoint();
+    const breakpoint = useTitanBreakpoint(noResponsive);
     const context: TitanLayoutContextType = useMemo(
         () => ({
             NavigationComponent: navigationComponent ?? DefaultNavLinkComponent,
@@ -233,6 +247,7 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
                     className={classNames(
                         Styles.layout,
                         isMobile ? Styles.layoutMobile : Styles.layoutDesktop,
+                        noResponsive && Styles.layoutNoResponsive,
                         hasTopBar &&
                             (navVariant === 'left' || !top
                                 ? Styles.layoutTopLight
@@ -245,7 +260,7 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
                     )}
                     style={contentStyles}
                 >
-                    {view.isSequent && <div className={Styles.topPlaceholder} />}
+                    <div className={Styles.topPlaceholder} />
                     {hasTopBar &&
                         (navVariant === 'left' ? (
                             <LayoutHeader
@@ -291,6 +306,7 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
                             <LayoutSidebar
                                 className={Styles.side}
                                 mobile={breakpoint.isMobile}
+                                touchDevice={breakpoint.isTouchDevice}
                                 barExpanded={!state?.navCollapsed}
                                 onBarExpandChange={onBarExpandChange}
                                 submenuExpanded={state?.submenuExpanded}

package/src/utils/use-breakpoint.ts

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