@servicetitan/navigation 13.1.1 → 13.1.3

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

@@ -1 +1 @@
-{"version":3,"file":"layout-header-dark.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-header-dark.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,EAAE,EAA4C,MAAM,OAAO,CAAC;AACrE,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAI5D,OAAO,EAAgB,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAkBlE,UAAU,wBAAyB,SAAQ,IAAI,CAAC,iBAAiB,EAAE,SAAS,CAAC;IACzE,mBAAmB,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAC3C,uBAAuB,CAAC,EAAE,kBAAkB,EAAE,CAAC;CAClD;AAED,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,wBAAwB,CAwEzD,CAAC"}
+{"version":3,"file":"layout-header-dark.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-header-dark.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,EAAE,EAA4C,MAAM,OAAO,CAAC;AACrE,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAI5D,OAAO,EAAgB,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAkBlE,UAAU,wBAAyB,SAAQ,IAAI,CAAC,iBAAiB,EAAE,SAAS,CAAC;IACzE,mBAAmB,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAC3C,uBAAuB,CAAC,EAAE,kBAAkB,EAAE,CAAC;CAClD;AAED,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,wBAAwB,CAkEzD,CAAC"}

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

@@ -21,7 +21,7 @@ var MinimizedState = /*#__PURE__*/ function(MinimizedState) {
     MinimizedState[MinimizedState["Full"] = 2] = "Full";
     return MinimizedState;
 }(MinimizedState || {});
-export const LayoutHeaderDark = ({ className, isMobile, navigationMainItems, navigationOverflowItems, hasNotifications, logo, profile, right, rightText, rightClassName, center, centerClassName, hasBurger, onBurgerClick, ...rest })=>{
+export const LayoutHeaderDark = ({ className, isMobile, navigationMainItems, navigationOverflowItems, logo, profile, right, rightText, rightClassName, center, centerClassName, burger, ...rest })=>{
     return center ? /*#__PURE__*/ _jsxs("div", {
         className: classNames(Styles.headerStacked, className),
         "data-cy": "header-navigation",
@@ -35,11 +35,9 @@ export const LayoutHeaderDark = ({ className, isMobile, navigationMainItems, nav
                 center: center,
                 centerClassName: centerClassName,
                 isMobile: isMobile,
-                hasNotifications: hasNotifications,
                 logo: logo,
                 profile: profile,
-                onBurgerClick: onBurgerClick,
-                hasBurger: hasBurger,
+                burger: burger,
                 "data-cy": "header-navigation-top"
             }),
             !isMobile && !!(navigationMainItems === null || navigationMainItems === void 0 ? void 0 : navigationMainItems.length) && /*#__PURE__*/ _jsx(LayoutHeaderNav, {
@@ -60,11 +58,9 @@ export const LayoutHeaderDark = ({ className, isMobile, navigationMainItems, nav
         }),
         centerClassName: centerClassName,
         isMobile: isMobile,
-        hasNotifications: hasNotifications,
         logo: logo,
         profile: profile,
-        onBurgerClick: onBurgerClick,
-        hasBurger: hasBurger,
+        burger: burger,
         ...rest
     });
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/titan-layout/layout-header-dark.tsx"],"sourcesContent":["import { ButtonCompound, Icon, Menu, MenuProps } from '@servicetitan/anvil2';\nimport SvgMoreVert from '@servicetitan/anvil2/assets/icons/material/round/more_vert.svg';\nimport classNames from 'classnames';\nimport { FC, useCallback, useEffect, useRef, useState } from 'react';\nimport { NavigationItemData } from '../../utils/navigation';\nimport { getCounterTag } from '../../utils/side-nav';\nimport { NavigationComponentProps } from './interface-internal';\nimport { useTitanLayoutContext } from './layout-context';\nimport { LayoutHeader, LayoutHeaderProps } from './layout-header';\nimport { InternalLayoutHeaderNavigationLink } from './layout-header-links-internal';\nimport * as Styles from './layout-header.module.less';\nimport { withTooltip } from './with-tooltip';\n\nfunction useForceUpdate() {\n    const [, setTick] = useState(0);\n    return useCallback(() => {\n        setTick(tick => tick + 1);\n    }, []);\n}\n\nenum MinimizedState {\n    Calculating,\n    Minimized,\n    Full,\n}\n\ninterface LayoutHeaderStackedProps extends Omit<LayoutHeaderProps, 'variant'> {\n    navigationMainItems?: NavigationItemData[];\n    navigationOverflowItems?: NavigationItemData[];\n}\n\nexport const LayoutHeaderDark: FC<LayoutHeaderStackedProps> = ({\n    className,\n    isMobile,\n    navigationMainItems,\n    navigationOverflowItems,\n    hasNotifications,\n    logo,\n    profile,\n    right,\n    rightText,\n    rightClassName,\n    center,\n    centerClassName,\n    hasBurger,\n    onBurgerClick,\n    ...rest\n}) => {\n    return center ? (\n        <div\n            className={classNames(Styles.headerStacked, className)}\n            data-cy=\"header-navigation\"\n            {...rest}\n        >\n            <LayoutHeader\n                variant=\"dark\"\n                right={right}\n                rightText={rightText}\n                rightClassName={rightClassName}\n                center={center}\n                centerClassName={centerClassName}\n                isMobile={isMobile}\n                hasNotifications={hasNotifications}\n                logo={logo}\n                profile={profile}\n                onBurgerClick={onBurgerClick}\n                hasBurger={hasBurger}\n                data-cy=\"header-navigation-top\"\n            />\n\n            {!isMobile && !!navigationMainItems?.length && (\n                <LayoutHeaderNav\n                    className={Styles.headerStackedNav}\n                    mainItems={navigationMainItems}\n                    overflowItems={navigationOverflowItems}\n                />\n            )}\n        </div>\n    ) : (\n        <LayoutHeader\n            variant=\"dark\"\n            className={classNames(className, !isMobile && Styles.headerDesktopNav)}\n            right={right}\n            rightText={rightText}\n            rightClassName={rightClassName}\n            center={\n                isMobile ? undefined : (\n                    <LayoutHeaderNav\n                        mainItems={navigationMainItems}\n                        overflowItems={navigationOverflowItems}\n                    />\n                )\n            }\n            centerClassName={centerClassName}\n            isMobile={isMobile}\n            hasNotifications={hasNotifications}\n            logo={logo}\n            profile={profile}\n            onBurgerClick={onBurgerClick}\n            hasBurger={hasBurger}\n            {...rest}\n        />\n    );\n};\n\ninterface LayoutHeaderNavProps {\n    className?: string;\n    mainItems?: NavigationItemData[];\n    overflowItems?: NavigationItemData[];\n}\nconst LayoutHeaderNav: FC<LayoutHeaderNavProps> = ({ className, mainItems, overflowItems }) => {\n    const containerRef = useRef<HTMLDivElement>(null);\n    const navigationRef = useRef<HTMLDivElement>(null);\n    const forceUpdate = useForceUpdate();\n    const [minimized, setMinimized] = useState(MinimizedState.Calculating);\n    const { NavigationComponent } = useTitanLayoutContext();\n\n    useEffect(() => {\n        const handleResize = () => {\n            setMinimized(MinimizedState.Calculating);\n            forceUpdate();\n        };\n\n        window.addEventListener('resize', handleResize);\n        return () => window.removeEventListener('resize', handleResize);\n    }, [forceUpdate]);\n\n    const updateIsMinimized = () => {\n        if (containerRef.current && navigationRef.current) {\n            const widthGap = 16 + (overflowItems?.length ? 32 : 0);\n            if (navigationRef.current.clientWidth + widthGap > containerRef.current.clientWidth) {\n                setMinimized(MinimizedState.Minimized);\n            } else if (minimized === MinimizedState.Calculating) {\n                setMinimized(MinimizedState.Full);\n            }\n        }\n    };\n\n    useEffect(() => {\n        updateIsMinimized();\n    });\n\n    useEffect(() => {\n        setMinimized(MinimizedState.Calculating);\n        forceUpdate();\n    }, [forceUpdate]);\n\n    const isMinimized = minimized === MinimizedState.Minimized;\n\n    return (\n        <div\n            ref={containerRef}\n            className={classNames(Styles.headerNavigationWrapper, className, {\n                [Styles.calculating]: minimized === MinimizedState.Calculating,\n            })}\n            data-cy=\"navigation-items\"\n        >\n            <div ref={navigationRef} className={classNames(Styles.headerNavigation)}>\n                {mainItems?.map(item =>\n                    withTooltip(\n                        <InternalLayoutHeaderNavigationLink\n                            id={item.id}\n                            to={item.to}\n                            title={isMinimized ? undefined : item.title}\n                            isActive={item.isActive}\n                            icon={item.icon}\n                            iconActive={item.iconActive}\n                            tag={getCounterTag(item.counter, item.tag)}\n                            className={item.className}\n                            key={item.id}\n                            navigationComponent={NavigationComponent}\n                        />,\n                        isMinimized ? item.title : undefined,\n                        { key: item.id }\n                    )\n                )}\n            </div>\n            {!!overflowItems?.length && (\n                <LayoutHeaderNavOverflow\n                    items={overflowItems}\n                    navigationComponent={NavigationComponent}\n                />\n            )}\n        </div>\n    );\n};\n\nconst LayoutHeaderNavOverflowTrigger: MenuProps['trigger'] = props => (\n    <ButtonCompound\n        {...props}\n        className={Styles.headerNavigationOverflowTrigger}\n        data-cy=\"navigation-overflow-trigger\"\n    >\n        <Icon svg={SvgMoreVert} size=\"medium\" />\n    </ButtonCompound>\n);\n\nconst LayoutHeaderNavOverflow: FC<\n    {\n        items: NavigationItemData[];\n    } & NavigationComponentProps\n> = ({ items, navigationComponent }) => {\n    return (\n        <Menu trigger={LayoutHeaderNavOverflowTrigger} placement=\"bottom-end\">\n            <div data-cy=\"navigation-overflow-content\" className={Styles.headerNavigationOverflow}>\n                {items.map(item => (\n                    <InternalLayoutHeaderNavigationLink\n                        id={item.id}\n                        to={item.to}\n                        title={item.title}\n                        isActive={item.isActive}\n                        icon={item.icon}\n                        iconActive={item.iconActive}\n                        tag={getCounterTag(item.counter, item.tag)}\n                        className={item.className}\n                        key={item.id}\n                        navigationComponent={navigationComponent}\n                        isOverflow\n                    />\n                ))}\n            </div>\n        </Menu>\n    );\n};\n"],"names":["ButtonCompound","Icon","Menu","SvgMoreVert","classNames","useCallback","useEffect","useRef","useState","getCounterTag","useTitanLayoutContext","LayoutHeader","InternalLayoutHeaderNavigationLink","Styles","withTooltip","useForceUpdate","setTick","tick","MinimizedState","LayoutHeaderDark","className","isMobile","navigationMainItems","navigationOverflowItems","hasNotifications","logo","profile","right","rightText","rightClassName","center","centerClassName","hasBurger","onBurgerClick","rest","div","headerStacked","data-cy","variant","length","LayoutHeaderNav","headerStackedNav","mainItems","overflowItems","headerDesktopNav","undefined","containerRef","navigationRef","forceUpdate","minimized","setMinimized","NavigationComponent","handleResize","window","addEventListener","removeEventListener","updateIsMinimized","current","widthGap","clientWidth","isMinimized","ref","headerNavigationWrapper","calculating","headerNavigation","map","item","id","to","title","isActive","icon","iconActive","tag","counter","navigationComponent","key","LayoutHeaderNavOverflow","items","LayoutHeaderNavOverflowTrigger","props","headerNavigationOverflowTrigger","svg","size","trigger","placement","headerNavigationOverflow","isOverflow"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/titan-layout/layout-header-dark.tsx"],"sourcesContent":["import { ButtonCompound, Icon, Menu, MenuProps } from '@servicetitan/anvil2';\nimport SvgMoreVert from '@servicetitan/anvil2/assets/icons/material/round/more_vert.svg';\nimport classNames from 'classnames';\nimport { FC, useCallback, useEffect, useRef, useState } from 'react';\nimport { NavigationItemData } from '../../utils/navigation';\nimport { getCounterTag } from '../../utils/side-nav';\nimport { NavigationComponentProps } from './interface-internal';\nimport { useTitanLayoutContext } from './layout-context';\nimport { LayoutHeader, LayoutHeaderProps } from './layout-header';\nimport { InternalLayoutHeaderNavigationLink } from './layout-header-links-internal';\nimport * as Styles from './layout-header.module.less';\nimport { withTooltip } from './with-tooltip';\n\nfunction useForceUpdate() {\n    const [, setTick] = useState(0);\n    return useCallback(() => {\n        setTick(tick => tick + 1);\n    }, []);\n}\n\nenum MinimizedState {\n    Calculating,\n    Minimized,\n    Full,\n}\n\ninterface LayoutHeaderStackedProps extends Omit<LayoutHeaderProps, 'variant'> {\n    navigationMainItems?: NavigationItemData[];\n    navigationOverflowItems?: NavigationItemData[];\n}\n\nexport const LayoutHeaderDark: FC<LayoutHeaderStackedProps> = ({\n    className,\n    isMobile,\n    navigationMainItems,\n    navigationOverflowItems,\n    logo,\n    profile,\n    right,\n    rightText,\n    rightClassName,\n    center,\n    centerClassName,\n    burger,\n    ...rest\n}) => {\n    return center ? (\n        <div\n            className={classNames(Styles.headerStacked, className)}\n            data-cy=\"header-navigation\"\n            {...rest}\n        >\n            <LayoutHeader\n                variant=\"dark\"\n                right={right}\n                rightText={rightText}\n                rightClassName={rightClassName}\n                center={center}\n                centerClassName={centerClassName}\n                isMobile={isMobile}\n                logo={logo}\n                profile={profile}\n                burger={burger}\n                data-cy=\"header-navigation-top\"\n            />\n\n            {!isMobile && !!navigationMainItems?.length && (\n                <LayoutHeaderNav\n                    className={Styles.headerStackedNav}\n                    mainItems={navigationMainItems}\n                    overflowItems={navigationOverflowItems}\n                />\n            )}\n        </div>\n    ) : (\n        <LayoutHeader\n            variant=\"dark\"\n            className={classNames(className, !isMobile && Styles.headerDesktopNav)}\n            right={right}\n            rightText={rightText}\n            rightClassName={rightClassName}\n            center={\n                isMobile ? undefined : (\n                    <LayoutHeaderNav\n                        mainItems={navigationMainItems}\n                        overflowItems={navigationOverflowItems}\n                    />\n                )\n            }\n            centerClassName={centerClassName}\n            isMobile={isMobile}\n            logo={logo}\n            profile={profile}\n            burger={burger}\n            {...rest}\n        />\n    );\n};\n\ninterface LayoutHeaderNavProps {\n    className?: string;\n    mainItems?: NavigationItemData[];\n    overflowItems?: NavigationItemData[];\n}\nconst LayoutHeaderNav: FC<LayoutHeaderNavProps> = ({ className, mainItems, overflowItems }) => {\n    const containerRef = useRef<HTMLDivElement>(null);\n    const navigationRef = useRef<HTMLDivElement>(null);\n    const forceUpdate = useForceUpdate();\n    const [minimized, setMinimized] = useState(MinimizedState.Calculating);\n    const { NavigationComponent } = useTitanLayoutContext();\n\n    useEffect(() => {\n        const handleResize = () => {\n            setMinimized(MinimizedState.Calculating);\n            forceUpdate();\n        };\n\n        window.addEventListener('resize', handleResize);\n        return () => window.removeEventListener('resize', handleResize);\n    }, [forceUpdate]);\n\n    const updateIsMinimized = () => {\n        if (containerRef.current && navigationRef.current) {\n            const widthGap = 16 + (overflowItems?.length ? 32 : 0);\n            if (navigationRef.current.clientWidth + widthGap > containerRef.current.clientWidth) {\n                setMinimized(MinimizedState.Minimized);\n            } else if (minimized === MinimizedState.Calculating) {\n                setMinimized(MinimizedState.Full);\n            }\n        }\n    };\n\n    useEffect(() => {\n        updateIsMinimized();\n    });\n\n    useEffect(() => {\n        setMinimized(MinimizedState.Calculating);\n        forceUpdate();\n    }, [forceUpdate]);\n\n    const isMinimized = minimized === MinimizedState.Minimized;\n\n    return (\n        <div\n            ref={containerRef}\n            className={classNames(Styles.headerNavigationWrapper, className, {\n                [Styles.calculating]: minimized === MinimizedState.Calculating,\n            })}\n            data-cy=\"navigation-items\"\n        >\n            <div ref={navigationRef} className={classNames(Styles.headerNavigation)}>\n                {mainItems?.map(item =>\n                    withTooltip(\n                        <InternalLayoutHeaderNavigationLink\n                            id={item.id}\n                            to={item.to}\n                            title={isMinimized ? undefined : item.title}\n                            isActive={item.isActive}\n                            icon={item.icon}\n                            iconActive={item.iconActive}\n                            tag={getCounterTag(item.counter, item.tag)}\n                            className={item.className}\n                            key={item.id}\n                            navigationComponent={NavigationComponent}\n                        />,\n                        isMinimized ? item.title : undefined,\n                        { key: item.id }\n                    )\n                )}\n            </div>\n            {!!overflowItems?.length && (\n                <LayoutHeaderNavOverflow\n                    items={overflowItems}\n                    navigationComponent={NavigationComponent}\n                />\n            )}\n        </div>\n    );\n};\n\nconst LayoutHeaderNavOverflowTrigger: MenuProps['trigger'] = props => (\n    <ButtonCompound\n        {...props}\n        className={Styles.headerNavigationOverflowTrigger}\n        data-cy=\"navigation-overflow-trigger\"\n    >\n        <Icon svg={SvgMoreVert} size=\"medium\" />\n    </ButtonCompound>\n);\n\nconst LayoutHeaderNavOverflow: FC<\n    {\n        items: NavigationItemData[];\n    } & NavigationComponentProps\n> = ({ items, navigationComponent }) => {\n    return (\n        <Menu trigger={LayoutHeaderNavOverflowTrigger} placement=\"bottom-end\">\n            <div data-cy=\"navigation-overflow-content\" className={Styles.headerNavigationOverflow}>\n                {items.map(item => (\n                    <InternalLayoutHeaderNavigationLink\n                        id={item.id}\n                        to={item.to}\n                        title={item.title}\n                        isActive={item.isActive}\n                        icon={item.icon}\n                        iconActive={item.iconActive}\n                        tag={getCounterTag(item.counter, item.tag)}\n                        className={item.className}\n                        key={item.id}\n                        navigationComponent={navigationComponent}\n                        isOverflow\n                    />\n                ))}\n            </div>\n        </Menu>\n    );\n};\n"],"names":["ButtonCompound","Icon","Menu","SvgMoreVert","classNames","useCallback","useEffect","useRef","useState","getCounterTag","useTitanLayoutContext","LayoutHeader","InternalLayoutHeaderNavigationLink","Styles","withTooltip","useForceUpdate","setTick","tick","MinimizedState","LayoutHeaderDark","className","isMobile","navigationMainItems","navigationOverflowItems","logo","profile","right","rightText","rightClassName","center","centerClassName","burger","rest","div","headerStacked","data-cy","variant","length","LayoutHeaderNav","headerStackedNav","mainItems","overflowItems","headerDesktopNav","undefined","containerRef","navigationRef","forceUpdate","minimized","setMinimized","NavigationComponent","handleResize","window","addEventListener","removeEventListener","updateIsMinimized","current","widthGap","clientWidth","isMinimized","ref","headerNavigationWrapper","calculating","headerNavigation","map","item","id","to","title","isActive","icon","iconActive","tag","counter","navigationComponent","key","LayoutHeaderNavOverflow","items","LayoutHeaderNavOverflowTrigger","props","headerNavigationOverflowTrigger","svg","size","trigger","placement","headerNavigationOverflow","isOverflow"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"layout-header-links.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-header-links.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAQ5E,sCAAsC;AACtC,wBAAgB,0BAA0B,CAAC,EACvC,EAAE,EACF,EAAE,EACF,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,UAAU,EACV,OAAO,EACP,GAAG,EACH,SAAS,EAET,OAAO,EACP,KAAK,EACL,IAAI,EACJ,OAAO,EACP,GAAG,IAAI,EACV,EAAE,oBAAoB,2CAoBtB;AAED,6CAA6C;AAC7C,wBAAgB,6BAA6B,CAAC,EAC1C,EAAE,EACF,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,UAAU,EACV,OAAO,EACP,GAAG,EACH,SAAS,EAET,OAAO,EACP,KAAK,EACL,IAAI,EACJ,OAAO,EACP,GAAG,IAAI,EACV,EAAE,uBAAuB,2CAiBzB"}
+{"version":3,"file":"layout-header-links.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-header-links.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAQ5E,sCAAsC;AACtC,wBAAgB,0BAA0B,CAAC,EACvC,EAAE,EACF,EAAE,EACF,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,UAAU,EACV,OAAO,EACP,GAAG,EACH,SAAS,EAET,OAAO,EACP,KAAK,EACL,IAAI,EACJ,OAAO,EACP,GAAG,IAAI,EACV,EAAE,oBAAoB,2CAqBtB;AAED,6CAA6C;AAC7C,wBAAgB,6BAA6B,CAAC,EAC1C,EAAE,EACF,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,UAAU,EACV,OAAO,EACP,GAAG,EACH,SAAS,EAET,OAAO,EACP,KAAK,EACL,IAAI,EACJ,OAAO,EACP,GAAG,IAAI,EACV,EAAE,uBAAuB,2CAkBzB"}

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

@@ -18,7 +18,9 @@ import { withTooltip } from './with-tooltip';
         ...rest,
         flashing: flashing,
         navigationComponent: NavigationComponent
-    }), tooltip);
+    }), tooltip, {
+        pointerEventsNone: true
+    });
 }
 /** Navigation extra item with icon button */ export function LayoutHeaderNavigationTrigger({ id, title, isActive, icon, iconActive, counter, tag, className, tooltip, extra, side, wrapper, ...rest }) {
     const { showTitle, flashing } = extra !== null && extra !== void 0 ? extra : {};
@@ -32,7 +34,9 @@ import { withTooltip } from './with-tooltip';
         className: className,
         ...rest,
         flashing: flashing
-    }), tooltip);
+    }), tooltip, {
+        pointerEventsNone: true
+    });
 }
 
 //# sourceMappingURL=layout-header-links.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/titan-layout/layout-header-links.tsx"],"sourcesContent":["import { getCounterTag } from '../../utils/side-nav';\nimport { TitanLayoutLinkProps, TitanLayoutTriggerProps } from './interface';\nimport { useTitanLayoutContext } from './layout-context';\nimport {\n    InternalLayoutHeaderNavigationLink,\n    InternalLayoutHeaderNavigationTrigger,\n} from './layout-header-links-internal';\nimport { withTooltip } from './with-tooltip';\n\n/** Navigation extra item with link */\nexport function LayoutHeaderNavigationLink({\n    id,\n    to,\n    title,\n    isActive,\n    icon,\n    iconActive,\n    counter,\n    tag,\n    className,\n\n    tooltip,\n    extra,\n    side,\n    wrapper,\n    ...rest\n}: TitanLayoutLinkProps) {\n    const { NavigationComponent } = useTitanLayoutContext();\n    const { showTitle, flashing } = extra ?? {};\n\n    return withTooltip(\n        <InternalLayoutHeaderNavigationLink\n            id={id}\n            to={to}\n            title={showTitle ? title : undefined}\n            isActive={isActive}\n            icon={icon}\n            iconActive={iconActive}\n            tag={getCounterTag(counter, tag)}\n            className={className}\n            {...rest}\n            flashing={flashing}\n            navigationComponent={NavigationComponent}\n        />,\n        tooltip\n    );\n}\n\n/** Navigation extra item with icon button */\nexport function LayoutHeaderNavigationTrigger({\n    id,\n    title,\n    isActive,\n    icon,\n    iconActive,\n    counter,\n    tag,\n    className,\n\n    tooltip,\n    extra,\n    side,\n    wrapper,\n    ...rest\n}: TitanLayoutTriggerProps) {\n    const { showTitle, flashing } = extra ?? {};\n\n    return withTooltip(\n        <InternalLayoutHeaderNavigationTrigger\n            id={id}\n            title={showTitle ? title : undefined}\n            isActive={isActive}\n            icon={icon}\n            iconActive={iconActive}\n            tag={getCounterTag(counter, tag)}\n            className={className}\n            {...rest}\n            flashing={flashing}\n        />,\n        tooltip\n    );\n}\n"],"names":["getCounterTag","useTitanLayoutContext","InternalLayoutHeaderNavigationLink","InternalLayoutHeaderNavigationTrigger","withTooltip","LayoutHeaderNavigationLink","id","to","title","isActive","icon","iconActive","counter","tag","className","tooltip","extra","side","wrapper","rest","NavigationComponent","showTitle","flashing","undefined","navigationComponent","LayoutHeaderNavigationTrigger"],"mappings":";AAAA,SAASA,aAAa,QAAQ,uBAAuB;AAErD,SAASC,qBAAqB,QAAQ,mBAAmB;AACzD,SACIC,kCAAkC,EAClCC,qCAAqC,QAClC,iCAAiC;AACxC,SAASC,WAAW,QAAQ,iBAAiB;AAE7C,oCAAoC,GACpC,OAAO,SAASC,2BAA2B,EACvCC,EAAE,EACFC,EAAE,EACFC,KAAK,EACLC,QAAQ,EACRC,IAAI,EACJC,UAAU,EACVC,OAAO,EACPC,GAAG,EACHC,SAAS,EAETC,OAAO,EACPC,KAAK,EACLC,IAAI,EACJC,OAAO,EACP,GAAGC,MACgB;IACnB,MAAM,EAAEC,mBAAmB,EAAE,GAAGnB;IAChC,MAAM,EAAEoB,SAAS,EAAEC,QAAQ,EAAE,GAAGN,kBAAAA,mBAAAA,QAAS,CAAC;IAE1C,OAAOZ,0BACH,KAACF;QACGI,IAAIA;QACJC,IAAIA;QACJC,OAAOa,YAAYb,QAAQe;QAC3Bd,UAAUA;QACVC,MAAMA;QACNC,YAAYA;QACZE,KAAKb,cAAcY,SAASC;QAC5BC,WAAWA;QACV,GAAGK,IAAI;QACRG,UAAUA;QACVE,qBAAqBJ;QAEzBL;AAER;AAEA,2CAA2C,GAC3C,OAAO,SAASU,8BAA8B,EAC1CnB,EAAE,EACFE,KAAK,EACLC,QAAQ,EACRC,IAAI,EACJC,UAAU,EACVC,OAAO,EACPC,GAAG,EACHC,SAAS,EAETC,OAAO,EACPC,KAAK,EACLC,IAAI,EACJC,OAAO,EACP,GAAGC,MACmB;IACtB,MAAM,EAAEE,SAAS,EAAEC,QAAQ,EAAE,GAAGN,kBAAAA,mBAAAA,QAAS,CAAC;IAE1C,OAAOZ,0BACH,KAACD;QACGG,IAAIA;QACJE,OAAOa,YAAYb,QAAQe;QAC3Bd,UAAUA;QACVC,MAAMA;QACNC,YAAYA;QACZE,KAAKb,cAAcY,SAASC;QAC5BC,WAAWA;QACV,GAAGK,IAAI;QACRG,UAAUA;QAEdP;AAER"}
+{"version":3,"sources":["../../../src/components/titan-layout/layout-header-links.tsx"],"sourcesContent":["import { getCounterTag } from '../../utils/side-nav';\nimport { TitanLayoutLinkProps, TitanLayoutTriggerProps } from './interface';\nimport { useTitanLayoutContext } from './layout-context';\nimport {\n    InternalLayoutHeaderNavigationLink,\n    InternalLayoutHeaderNavigationTrigger,\n} from './layout-header-links-internal';\nimport { withTooltip } from './with-tooltip';\n\n/** Navigation extra item with link */\nexport function LayoutHeaderNavigationLink({\n    id,\n    to,\n    title,\n    isActive,\n    icon,\n    iconActive,\n    counter,\n    tag,\n    className,\n\n    tooltip,\n    extra,\n    side,\n    wrapper,\n    ...rest\n}: TitanLayoutLinkProps) {\n    const { NavigationComponent } = useTitanLayoutContext();\n    const { showTitle, flashing } = extra ?? {};\n\n    return withTooltip(\n        <InternalLayoutHeaderNavigationLink\n            id={id}\n            to={to}\n            title={showTitle ? title : undefined}\n            isActive={isActive}\n            icon={icon}\n            iconActive={iconActive}\n            tag={getCounterTag(counter, tag)}\n            className={className}\n            {...rest}\n            flashing={flashing}\n            navigationComponent={NavigationComponent}\n        />,\n        tooltip,\n        { pointerEventsNone: true }\n    );\n}\n\n/** Navigation extra item with icon button */\nexport function LayoutHeaderNavigationTrigger({\n    id,\n    title,\n    isActive,\n    icon,\n    iconActive,\n    counter,\n    tag,\n    className,\n\n    tooltip,\n    extra,\n    side,\n    wrapper,\n    ...rest\n}: TitanLayoutTriggerProps) {\n    const { showTitle, flashing } = extra ?? {};\n\n    return withTooltip(\n        <InternalLayoutHeaderNavigationTrigger\n            id={id}\n            title={showTitle ? title : undefined}\n            isActive={isActive}\n            icon={icon}\n            iconActive={iconActive}\n            tag={getCounterTag(counter, tag)}\n            className={className}\n            {...rest}\n            flashing={flashing}\n        />,\n        tooltip,\n        { pointerEventsNone: true }\n    );\n}\n"],"names":["getCounterTag","useTitanLayoutContext","InternalLayoutHeaderNavigationLink","InternalLayoutHeaderNavigationTrigger","withTooltip","LayoutHeaderNavigationLink","id","to","title","isActive","icon","iconActive","counter","tag","className","tooltip","extra","side","wrapper","rest","NavigationComponent","showTitle","flashing","undefined","navigationComponent","pointerEventsNone","LayoutHeaderNavigationTrigger"],"mappings":";AAAA,SAASA,aAAa,QAAQ,uBAAuB;AAErD,SAASC,qBAAqB,QAAQ,mBAAmB;AACzD,SACIC,kCAAkC,EAClCC,qCAAqC,QAClC,iCAAiC;AACxC,SAASC,WAAW,QAAQ,iBAAiB;AAE7C,oCAAoC,GACpC,OAAO,SAASC,2BAA2B,EACvCC,EAAE,EACFC,EAAE,EACFC,KAAK,EACLC,QAAQ,EACRC,IAAI,EACJC,UAAU,EACVC,OAAO,EACPC,GAAG,EACHC,SAAS,EAETC,OAAO,EACPC,KAAK,EACLC,IAAI,EACJC,OAAO,EACP,GAAGC,MACgB;IACnB,MAAM,EAAEC,mBAAmB,EAAE,GAAGnB;IAChC,MAAM,EAAEoB,SAAS,EAAEC,QAAQ,EAAE,GAAGN,kBAAAA,mBAAAA,QAAS,CAAC;IAE1C,OAAOZ,0BACH,KAACF;QACGI,IAAIA;QACJC,IAAIA;QACJC,OAAOa,YAAYb,QAAQe;QAC3Bd,UAAUA;QACVC,MAAMA;QACNC,YAAYA;QACZE,KAAKb,cAAcY,SAASC;QAC5BC,WAAWA;QACV,GAAGK,IAAI;QACRG,UAAUA;QACVE,qBAAqBJ;QAEzBL,SACA;QAAEU,mBAAmB;IAAK;AAElC;AAEA,2CAA2C,GAC3C,OAAO,SAASC,8BAA8B,EAC1CpB,EAAE,EACFE,KAAK,EACLC,QAAQ,EACRC,IAAI,EACJC,UAAU,EACVC,OAAO,EACPC,GAAG,EACHC,SAAS,EAETC,OAAO,EACPC,KAAK,EACLC,IAAI,EACJC,OAAO,EACP,GAAGC,MACmB;IACtB,MAAM,EAAEE,SAAS,EAAEC,QAAQ,EAAE,GAAGN,kBAAAA,mBAAAA,QAAS,CAAC;IAE1C,OAAOZ,0BACH,KAACD;QACGG,IAAIA;QACJE,OAAOa,YAAYb,QAAQe;QAC3Bd,UAAUA;QACVC,MAAMA;QACNC,YAAYA;QACZE,KAAKb,cAAcY,SAASC;QAC5BC,WAAWA;QACV,GAAGK,IAAI;QACRG,UAAUA;QAEdP,SACA;QAAEU,mBAAmB;IAAK;AAElC"}

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

@@ -1,4 +1,5 @@
-import { ComponentPropsWithoutRef, FC, MouseEvent, ReactElement, ReactNode } from 'react';
+import { ComponentPropsWithoutRef, FC, ReactElement, ReactNode } from 'react';
+import { TitanLayoutTriggerProps } from './interface';
 import { TitanLayoutLogoProps } from './layout-logo';
 export type LayoutHeaderProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'> & {
     right?: ReactNode;
@@ -11,10 +12,7 @@ export type LayoutHeaderProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'
     profile?: ReactElement;
     isMobile: boolean;
     variant: 'light' | 'dark';
-    hasNotifications: boolean;
-    hasBurger: boolean;
-    burgerTooltip?: string;
-    onBurgerClick?: (e: MouseEvent<never>) => void;
+    burger?: Partial<TitanLayoutTriggerProps>;
 };
 export declare const LayoutHeader: FC<LayoutHeaderProps>;
 //# sourceMappingURL=layout-header.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"layout-header.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-header.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,wBAAwB,EAAE,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAI1F,OAAO,EAAc,oBAAoB,EAAgB,MAAM,eAAe,CAAC;AAG/E,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IAChF,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAC5B,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,GAAG,MAAM,CAAC;IAC1B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;CAClD,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAmF9C,CAAC"}
+{"version":3,"file":"layout-header.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-header.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,wBAAwB,EAAE,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC9E,OAAO,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAItD,OAAO,EAAc,oBAAoB,EAAgB,MAAM,eAAe,CAAC;AAE/E,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IAChF,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAC5B,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,GAAG,MAAM,CAAC;IAC1B,MAAM,CAAC,EAAE,OAAO,CAAC,uBAAuB,CAAC,CAAC;CAC7C,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CA0E9C,CAAC"}

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

@@ -5,20 +5,16 @@ import { LayoutPlacementContext } from './layout-context';
 import { LayoutHeaderNavigationTrigger } from './layout-header-links';
 import * as Styles from './layout-header.module.less';
 import { LayoutLogo, isLogoCustom } from './layout-logo';
-import { withTooltip } from './with-tooltip';
-export const LayoutHeader = ({ className, right, rightText, rightClassName, center, centerClassName, isMobile, hasNotifications, logo, profile, variant, hasBurger, burgerTooltip, onBurgerClick, ...rest })=>{
-    const burgerElement = hasBurger && /*#__PURE__*/ _jsx("div", {
+export const LayoutHeader = ({ className, right, rightText, rightClassName, center, centerClassName, isMobile, logo, profile, variant, burger, ...rest })=>{
+    const burgerElement = !!burger && /*#__PURE__*/ _jsx("div", {
         className: Styles.burger,
         tabIndex: -1,
         children: /*#__PURE__*/ _jsx(LayoutHeaderNavigationTrigger, {
+            ...burger,
             id: "burger",
             title: "",
             icon: SvgBurgerMenu,
-            iconActive: undefined,
-            onClick: onBurgerClick,
-            tag: {
-                value: hasNotifications
-            }
+            iconActive: undefined
         })
     });
     return /*#__PURE__*/ _jsx(LayoutPlacementContext.Provider, {
@@ -31,10 +27,7 @@ export const LayoutHeader = ({ className, right, rightText, rightClassName, cent
                 /*#__PURE__*/ _jsxs("div", {
                     className: Styles.heTopLeft,
                     children: [
-                        burgerElement && (burgerTooltip ? withTooltip(burgerElement, burgerTooltip, {
-                            placement: 'bottom-end',
-                            pointerEventsNone: true
-                        }) : burgerElement),
+                        burgerElement,
                         /*#__PURE__*/ _jsx(LayoutLogo, {
                             ...logo
                         })

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/titan-layout/layout-header.tsx"],"sourcesContent":["import SvgBurgerMenu from '@servicetitan/anvil2/assets/icons/material/round/menu.svg';\nimport classNames from 'classnames';\nimport { ComponentPropsWithoutRef, FC, MouseEvent, ReactElement, ReactNode } from 'react';\nimport { LayoutPlacementContext } from './layout-context';\nimport { LayoutHeaderNavigationTrigger } from './layout-header-links';\nimport * as Styles from './layout-header.module.less';\nimport { LayoutLogo, TitanLayoutLogoProps, isLogoCustom } from './layout-logo';\nimport { withTooltip } from './with-tooltip';\n\nexport type LayoutHeaderProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'> & {\n    right?: ReactNode;\n    rightText?: string;\n    rightClassName?: string;\n\n    id?: string;\n\n    center?: ReactElement;\n    centerClassName?: string;\n\n    logo?: TitanLayoutLogoProps;\n    profile?: ReactElement;\n\n    isMobile: boolean;\n    variant: 'light' | 'dark';\n    hasNotifications: boolean;\n    hasBurger: boolean;\n    burgerTooltip?: string;\n    onBurgerClick?: (e: MouseEvent<never>) => void;\n};\n\nexport const LayoutHeader: FC<LayoutHeaderProps> = ({\n    className,\n    right,\n    rightText,\n    rightClassName,\n    center,\n    centerClassName,\n    isMobile,\n    hasNotifications,\n    logo,\n    profile,\n    variant,\n    hasBurger,\n    burgerTooltip,\n    onBurgerClick,\n    ...rest\n}) => {\n    const burgerElement = hasBurger && (\n        <div className={Styles.burger} tabIndex={-1}>\n            <LayoutHeaderNavigationTrigger\n                id=\"burger\"\n                title=\"\"\n                icon={SvgBurgerMenu}\n                iconActive={undefined}\n                onClick={onBurgerClick}\n                tag={{ value: hasNotifications }}\n            />\n        </div>\n    );\n\n    return (\n        <LayoutPlacementContext.Provider value=\"top\">\n            <div\n                className={classNames(\n                    Styles.header,\n                    variant === 'light' ? Styles.headerLight : Styles.headerDark,\n                    isMobile ? Styles.headerMobile : Styles.headerDesktop,\n                    isLogoCustom(logo, isMobile) && Styles.headerLogoCustom,\n                    className\n                )}\n                data-cy=\"header-navigation\"\n                {...rest}\n            >\n                <div className={Styles.heTopLeft}>\n                    {burgerElement &&\n                        (burgerTooltip\n                            ? withTooltip(burgerElement, burgerTooltip, {\n                                  placement: 'bottom-end',\n                                  pointerEventsNone: true,\n                              })\n                            : burgerElement)}\n                    <LayoutLogo {...logo} />\n                </div>\n\n                <div\n                    className={classNames(\n                        Styles.heTopCenter,\n                        'd-f align-items-center justify-content-center',\n                        centerClassName\n                    )}\n                    data-cy=\"navigation-center\"\n                >\n                    {center}\n                </div>\n                <div\n                    className={classNames(\n                        'd-f flex-row justify-content-end align-items-center',\n                        Styles.heTopRight,\n                        rightClassName\n                    )}\n                    data-cy=\"navigation-right\"\n                >\n                    {!!rightText && (\n                        <div className={Styles.heTopRightText} data-cy=\"navigation-right-text\">\n                            {rightText}\n                        </div>\n                    )}\n                    {right}\n                    {profile}\n                </div>\n            </div>\n        </LayoutPlacementContext.Provider>\n    );\n};\n"],"names":["SvgBurgerMenu","classNames","LayoutPlacementContext","LayoutHeaderNavigationTrigger","Styles","LayoutLogo","isLogoCustom","withTooltip","LayoutHeader","className","right","rightText","rightClassName","center","centerClassName","isMobile","hasNotifications","logo","profile","variant","hasBurger","burgerTooltip","onBurgerClick","rest","burgerElement","div","burger","tabIndex","id","title","icon","iconActive","undefined","onClick","tag","value","Provider","header","headerLight","headerDark","headerMobile","headerDesktop","headerLogoCustom","data-cy","heTopLeft","placement","pointerEventsNone","heTopCenter","heTopRight","heTopRightText"],"mappings":";AAAA,OAAOA,mBAAmB,4DAA4D;AACtF,OAAOC,gBAAgB,aAAa;AAEpC,SAASC,sBAAsB,QAAQ,mBAAmB;AAC1D,SAASC,6BAA6B,QAAQ,wBAAwB;AACtE,YAAYC,YAAY,8BAA8B;AACtD,SAASC,UAAU,EAAwBC,YAAY,QAAQ,gBAAgB;AAC/E,SAASC,WAAW,QAAQ,iBAAiB;AAuB7C,OAAO,MAAMC,eAAsC,CAAC,EAChDC,SAAS,EACTC,KAAK,EACLC,SAAS,EACTC,cAAc,EACdC,MAAM,EACNC,eAAe,EACfC,QAAQ,EACRC,gBAAgB,EAChBC,IAAI,EACJC,OAAO,EACPC,OAAO,EACPC,SAAS,EACTC,aAAa,EACbC,aAAa,EACb,GAAGC,MACN;IACG,MAAMC,gBAAgBJ,2BAClB,KAACK;QAAIhB,WAAWL,OAAOsB,MAAM;QAAEC,UAAU,CAAC;kBACtC,cAAA,KAACxB;YACGyB,IAAG;YACHC,OAAM;YACNC,MAAM9B;YACN+B,YAAYC;YACZC,SAASX;YACTY,KAAK;gBAAEC,OAAOnB;YAAiB;;;IAK3C,qBACI,KAACd,uBAAuBkC,QAAQ;QAACD,OAAM;kBACnC,cAAA,MAACV;YACGhB,WAAWR,WACPG,OAAOiC,MAAM,EACblB,YAAY,UAAUf,OAAOkC,WAAW,GAAGlC,OAAOmC,UAAU,EAC5DxB,WAAWX,OAAOoC,YAAY,GAAGpC,OAAOqC,aAAa,EACrDnC,aAAaW,MAAMF,aAAaX,OAAOsC,gBAAgB,EACvDjC;YAEJkC,WAAQ;YACP,GAAGpB,IAAI;;8BAER,MAACE;oBAAIhB,WAAWL,OAAOwC,SAAS;;wBAC3BpB,iBACIH,CAAAA,gBACKd,YAAYiB,eAAeH,eAAe;4BACtCwB,WAAW;4BACXC,mBAAmB;wBACvB,KACAtB,aAAY;sCACtB,KAACnB;4BAAY,GAAGY,IAAI;;;;8BAGxB,KAACQ;oBACGhB,WAAWR,WACPG,OAAO2C,WAAW,EAClB,iDACAjC;oBAEJ6B,WAAQ;8BAEP9B;;8BAEL,MAACY;oBACGhB,WAAWR,WACP,uDACAG,OAAO4C,UAAU,EACjBpC;oBAEJ+B,WAAQ;;wBAEP,CAAC,CAAChC,2BACC,KAACc;4BAAIhB,WAAWL,OAAO6C,cAAc;4BAAEN,WAAQ;sCAC1ChC;;wBAGRD;wBACAQ;;;;;;AAKrB,EAAE"}
+{"version":3,"sources":["../../../src/components/titan-layout/layout-header.tsx"],"sourcesContent":["import SvgBurgerMenu from '@servicetitan/anvil2/assets/icons/material/round/menu.svg';\nimport classNames from 'classnames';\nimport { ComponentPropsWithoutRef, FC, ReactElement, ReactNode } from 'react';\nimport { TitanLayoutTriggerProps } from './interface';\nimport { LayoutPlacementContext } from './layout-context';\nimport { LayoutHeaderNavigationTrigger } from './layout-header-links';\nimport * as Styles from './layout-header.module.less';\nimport { LayoutLogo, TitanLayoutLogoProps, isLogoCustom } from './layout-logo';\n\nexport type LayoutHeaderProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'> & {\n    right?: ReactNode;\n    rightText?: string;\n    rightClassName?: string;\n\n    id?: string;\n\n    center?: ReactElement;\n    centerClassName?: string;\n\n    logo?: TitanLayoutLogoProps;\n    profile?: ReactElement;\n\n    isMobile: boolean;\n    variant: 'light' | 'dark';\n    burger?: Partial<TitanLayoutTriggerProps>;\n};\n\nexport const LayoutHeader: FC<LayoutHeaderProps> = ({\n    className,\n    right,\n    rightText,\n    rightClassName,\n    center,\n    centerClassName,\n    isMobile,\n    logo,\n    profile,\n    variant,\n    burger,\n\n    ...rest\n}) => {\n    const burgerElement = !!burger && (\n        <div className={Styles.burger} tabIndex={-1}>\n            <LayoutHeaderNavigationTrigger\n                {...burger}\n                id=\"burger\"\n                title=\"\"\n                icon={SvgBurgerMenu}\n                iconActive={undefined}\n            />\n        </div>\n    );\n\n    return (\n        <LayoutPlacementContext.Provider value=\"top\">\n            <div\n                className={classNames(\n                    Styles.header,\n                    variant === 'light' ? Styles.headerLight : Styles.headerDark,\n                    isMobile ? Styles.headerMobile : Styles.headerDesktop,\n                    isLogoCustom(logo, isMobile) && Styles.headerLogoCustom,\n                    className\n                )}\n                data-cy=\"header-navigation\"\n                {...rest}\n            >\n                <div className={Styles.heTopLeft}>\n                    {burgerElement}\n                    <LayoutLogo {...logo} />\n                </div>\n\n                <div\n                    className={classNames(\n                        Styles.heTopCenter,\n                        'd-f align-items-center justify-content-center',\n                        centerClassName\n                    )}\n                    data-cy=\"navigation-center\"\n                >\n                    {center}\n                </div>\n                <div\n                    className={classNames(\n                        'd-f flex-row justify-content-end align-items-center',\n                        Styles.heTopRight,\n                        rightClassName\n                    )}\n                    data-cy=\"navigation-right\"\n                >\n                    {!!rightText && (\n                        <div className={Styles.heTopRightText} data-cy=\"navigation-right-text\">\n                            {rightText}\n                        </div>\n                    )}\n                    {right}\n                    {profile}\n                </div>\n            </div>\n        </LayoutPlacementContext.Provider>\n    );\n};\n"],"names":["SvgBurgerMenu","classNames","LayoutPlacementContext","LayoutHeaderNavigationTrigger","Styles","LayoutLogo","isLogoCustom","LayoutHeader","className","right","rightText","rightClassName","center","centerClassName","isMobile","logo","profile","variant","burger","rest","burgerElement","div","tabIndex","id","title","icon","iconActive","undefined","Provider","value","header","headerLight","headerDark","headerMobile","headerDesktop","headerLogoCustom","data-cy","heTopLeft","heTopCenter","heTopRight","heTopRightText"],"mappings":";AAAA,OAAOA,mBAAmB,4DAA4D;AACtF,OAAOC,gBAAgB,aAAa;AAGpC,SAASC,sBAAsB,QAAQ,mBAAmB;AAC1D,SAASC,6BAA6B,QAAQ,wBAAwB;AACtE,YAAYC,YAAY,8BAA8B;AACtD,SAASC,UAAU,EAAwBC,YAAY,QAAQ,gBAAgB;AAoB/E,OAAO,MAAMC,eAAsC,CAAC,EAChDC,SAAS,EACTC,KAAK,EACLC,SAAS,EACTC,cAAc,EACdC,MAAM,EACNC,eAAe,EACfC,QAAQ,EACRC,IAAI,EACJC,OAAO,EACPC,OAAO,EACPC,MAAM,EAEN,GAAGC,MACN;IACG,MAAMC,gBAAgB,CAAC,CAACF,wBACpB,KAACG;QAAIb,WAAWJ,OAAOc,MAAM;QAAEI,UAAU,CAAC;kBACtC,cAAA,KAACnB;YACI,GAAGe,MAAM;YACVK,IAAG;YACHC,OAAM;YACNC,MAAMzB;YACN0B,YAAYC;;;IAKxB,qBACI,KAACzB,uBAAuB0B,QAAQ;QAACC,OAAM;kBACnC,cAAA,MAACR;YACGb,WAAWP,WACPG,OAAO0B,MAAM,EACbb,YAAY,UAAUb,OAAO2B,WAAW,GAAG3B,OAAO4B,UAAU,EAC5DlB,WAAWV,OAAO6B,YAAY,GAAG7B,OAAO8B,aAAa,EACrD5B,aAAaS,MAAMD,aAAaV,OAAO+B,gBAAgB,EACvD3B;YAEJ4B,WAAQ;YACP,GAAGjB,IAAI;;8BAER,MAACE;oBAAIb,WAAWJ,OAAOiC,SAAS;;wBAC3BjB;sCACD,KAACf;4BAAY,GAAGU,IAAI;;;;8BAGxB,KAACM;oBACGb,WAAWP,WACPG,OAAOkC,WAAW,EAClB,iDACAzB;oBAEJuB,WAAQ;8BAEPxB;;8BAEL,MAACS;oBACGb,WAAWP,WACP,uDACAG,OAAOmC,UAAU,EACjB5B;oBAEJyB,WAAQ;;wBAEP,CAAC,CAAC1B,2BACC,KAACW;4BAAIb,WAAWJ,OAAOoC,cAAc;4BAAEJ,WAAQ;sCAC1C1B;;wBAGRD;wBACAO;;;;;;AAKrB,EAAE"}

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

@@ -184,7 +184,8 @@ export const InternalSideNavigationGroup = ({ id, to, title, isActive, icon, ico
                             "aria-label": "Toggle submenu",
                             "data-cy": "nav-item-group-expand"
                         }), submenuExpanded ? 'Hide Submenu' : 'View Submenu', {
-                            placement: 'right'
+                            placement: 'right',
+                            delay: 1000
                         })
                     })
                 ]

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/titan-layout/layout-sidebar-links-internal.tsx"],"sourcesContent":["import { Button, Icon, IconProps } from '@servicetitan/anvil2';\nimport SvgGroupCollapse from '@servicetitan/anvil2/assets/icons/material/round/expand_less.svg';\nimport SvgGroupExpand from '@servicetitan/anvil2/assets/icons/material/round/expand_more.svg';\nimport classNames from 'classnames';\nimport { ComponentPropsWithoutRef, FC, Fragment, MouseEvent, ReactNode } from 'react';\n\nimport { BadgeTag, BadgeTagProps } from '../badge-tag';\nimport { NavigationComponentProps } from './interface-internal';\nimport * as Styles from './layout-sidebar.module.less';\nimport { withTooltip } from './with-tooltip';\n\nexport interface InternalSideNavigationItemContentProps {\n    icon: IconProps['svg'] | undefined;\n    iconActive: IconProps['svg'] | undefined;\n    title: string;\n    tag: BadgeTagProps | undefined;\n}\n\nconst InternalSideNavigationItemContent: FC<InternalSideNavigationItemContentProps> = ({\n    icon,\n    iconActive,\n    tag,\n    title,\n}) => (\n    <Fragment>\n        <div className={Styles.navItemIconWrapper}>\n            {icon && (\n                <Icon svg={icon} className={classNames(Styles.navIcon, Styles.navIconInactive)} />\n            )}\n            {iconActive && (\n                <Icon\n                    svg={iconActive}\n                    className={classNames(Styles.navIcon, Styles.navIconActive)}\n                />\n            )}\n\n            <div className={Styles.navItemTextExpanded} data-cy=\"nav-item-label\">\n                {title}\n            </div>\n            {!!tag && (\n                <BadgeTag\n                    data={tag}\n                    className={Styles.navItemCounter}\n                    longClassName={Styles.navItemCounterLong}\n                />\n            )}\n        </div>\n\n        <div\n            className={classNames(Styles.navItemTextCollapsed, {\n                [Styles.navItemTextSmall]: !!title && title.length >= 10,\n            })}\n            data-cy=\"nav-item-label\"\n        >\n            {title}\n        </div>\n    </Fragment>\n);\n\n/** Side Navigation menu item (for internal usage) */\nexport const InternalSideNavigationLink: FC<\n    NavigationComponentProps & {\n        id: string;\n        to: string;\n        title: string;\n        isActive: boolean | ((pathname: string) => boolean) | undefined;\n        icon: IconProps['svg'] | undefined;\n        iconActive: IconProps['svg'] | undefined;\n        className: string | undefined;\n        tag: BadgeTagProps | undefined;\n    } & Omit<ComponentPropsWithoutRef<'a'>, 'children' | 'title'>\n> = ({\n    id,\n    to,\n    title,\n    isActive,\n    icon,\n    iconActive,\n    className,\n    tag,\n\n    navigationComponent: NavigationComponent,\n    ...rest\n}) => {\n    return (\n        <NavigationComponent\n            data-cy={`navigation-item-${id}`}\n            data-pendo={`navigation-item-${id}`}\n            {...rest}\n            className={classNames(Styles.navItem, Styles.navLink, className, {\n                [Styles.navItemActive]: isActive === true,\n                [Styles.navItemIconSwitch]: !!icon && !!iconActive,\n            })}\n            to={to}\n            isActive={typeof isActive === 'function' ? isActive : undefined}\n            activeClassName={Styles.navItemActive}\n            tabIndex={0}\n        >\n            <InternalSideNavigationItemContent\n                icon={icon}\n                iconActive={iconActive}\n                title={title}\n                tag={tag}\n            />\n        </NavigationComponent>\n    );\n};\n\n/** Side Navigation menu trigger (for internal usage) */\nexport const InternalSideNavigationTrigger: FC<\n    {\n        id: string;\n        title: string;\n        isActive: boolean | undefined;\n        icon: IconProps['svg'] | undefined;\n        iconActive: IconProps['svg'] | undefined;\n        className: string | undefined;\n\n        tag: BadgeTagProps | undefined;\n        onClick?: (e: MouseEvent<never>) => void;\n    } & Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'title'>\n> = ({\n    id,\n    title,\n    isActive,\n    icon,\n    iconActive,\n    className,\n\n    tag,\n    ...rest\n}) => {\n    return (\n        <div\n            data-cy={`navigation-item-${id}`}\n            data-pendo={`navigation-item-${id}`}\n            tabIndex={rest.onClick ? 0 : -1}\n            {...rest}\n            className={classNames(Styles.navItem, className, {\n                [Styles.navLink]: !!rest.onClick,\n                [Styles.navItemActive]: isActive === true,\n                [Styles.navItemIconSwitch]: !!icon && !!iconActive,\n            })}\n        >\n            <InternalSideNavigationItemContent\n                icon={icon}\n                iconActive={iconActive}\n                title={title}\n                tag={tag}\n            />\n        </div>\n    );\n};\n\nexport const InternalSideNavigationGroupLink: FC<\n    NavigationComponentProps & {\n        id: string;\n        to: string;\n        title: string;\n        isActive: boolean | ((pathname: string) => boolean) | undefined;\n        className: string | undefined;\n        tag: BadgeTagProps | undefined;\n\n        parentId: string;\n    }\n> = ({\n    id,\n    to,\n    title,\n    isActive,\n    className,\n    tag,\n\n    parentId,\n    navigationComponent: NavigationComponent,\n    ...rest\n}) => {\n    return (\n        <NavigationComponent\n            key={id}\n            data-cy={`navigation-item-${parentId}--${id}`}\n            data-pendo={`navigation-item-${parentId}--${id}`}\n            {...rest}\n            to={to}\n            className={classNames(Styles.submenuItem, Styles.submenuLink, className, {\n                [Styles.submenuLinkActive]: isActive === true,\n            })}\n            isActive={typeof isActive === 'function' ? isActive : undefined}\n            activeClassName={Styles.submenuLinkActive}\n        >\n            <span>{title}</span>\n            <BadgeTag data={tag} className={Styles.submenuLinkCounter} />\n        </NavigationComponent>\n    );\n};\n\nexport const InternalSideNavigationGroupTrigger: FC<{\n    id: string;\n    title: string;\n    isActive: boolean | ((pathname: string) => boolean) | undefined;\n    className: string | undefined;\n    tag: BadgeTagProps | undefined;\n\n    onClick?: (e: MouseEvent<any>) => void;\n}> = ({\n    id,\n    title,\n    isActive,\n    className,\n    tag,\n\n    ...rest\n}) => {\n    return (\n        <div\n            data-cy={`navigation-item-${id}`}\n            data-pendo={`navigation-item-${id}`}\n            key={id}\n            {...rest}\n            className={classNames(Styles.submenuItem, {\n                [Styles.submenuLink]: !!rest.onClick,\n                [Styles.submenuLinkActive]: isActive === true,\n            })}\n        >\n            <span>{title}</span>\n            <BadgeTag data={tag} className={Styles.submenuLinkCounter} />\n        </div>\n    );\n};\n\nexport const InternalSideNavigationGroupDivider = () => {\n    return <div className={Styles.divider} />;\n};\n\nexport const InternalSideNavigationGroup: FC<\n    NavigationComponentProps & {\n        id: string;\n        to: string | undefined;\n        title: string;\n        isActive: boolean | ((pathname: string) => boolean) | undefined;\n        icon: IconProps['svg'] | undefined;\n        iconActive: IconProps['svg'] | undefined;\n        className: string | undefined;\n        tag: BadgeTagProps | undefined;\n\n        children: ReactNode;\n        submenuExpanded: boolean;\n        onClick?: (e: MouseEvent<never>) => void;\n        onSubmenuExpand(id: string, expanded: boolean, force: boolean): void;\n    }\n> = ({\n    id,\n    to,\n    title,\n    isActive,\n    icon,\n    iconActive,\n    className,\n    tag,\n\n    children,\n    submenuExpanded,\n    onSubmenuExpand,\n    onClick,\n    navigationComponent,\n    ...rest\n}) => {\n    const onRootClick = (e: MouseEvent<never>) => {\n        if (submenuExpanded) {\n            onSubmenuExpand(id, true, true);\n        } else {\n            onSubmenuExpand(id, true, false);\n            e.preventDefault();\n            e.stopPropagation();\n        }\n    };\n    const onToggleClick = (e: MouseEvent<never>) => {\n        onSubmenuExpand(id, !submenuExpanded, false);\n        e.preventDefault();\n        e.stopPropagation();\n    };\n\n    return (\n        <div className={classNames(Styles.navGroupWrapper)}>\n            <div className={Styles.navGroupItem}>\n                <div onClick={onRootClick}>\n                    {to ? (\n                        <InternalSideNavigationLink\n                            id={id}\n                            to={to}\n                            title={title}\n                            isActive={isActive}\n                            icon={icon}\n                            iconActive={iconActive}\n                            tag={tag}\n                            className={className}\n                            {...rest}\n                            navigationComponent={navigationComponent}\n                        />\n                    ) : (\n                        <InternalSideNavigationTrigger\n                            id={id}\n                            title={title}\n                            isActive={isActive === true || undefined}\n                            icon={icon}\n                            iconActive={iconActive}\n                            tag={tag}\n                            className={className}\n                            {...rest}\n                        />\n                    )}\n                </div>\n\n                <div className={Styles.navItemGroupToggleWrapper}>\n                    {withTooltip(\n                        <Button\n                            appearance=\"secondary\"\n                            size=\"small\"\n                            icon={submenuExpanded ? SvgGroupCollapse : SvgGroupExpand}\n                            className={Styles.navItemGroupToggle}\n                            onClick={onToggleClick}\n                            aria-label=\"Toggle submenu\"\n                            data-cy=\"nav-item-group-expand\"\n                        />,\n                        submenuExpanded ? 'Hide Submenu' : 'View Submenu',\n                        { placement: 'right' }\n                    )}\n                </div>\n            </div>\n            {submenuExpanded && (\n                <div\n                    className={classNames(Styles.submenuWrapper, {\n                        [Styles.submenuWrapperCollapsed]: !submenuExpanded,\n                    })}\n                    data-cy={`navigation-submenu-${id}`}\n                >\n                    <div className={Styles.submenu}>{children}</div>\n                </div>\n            )}\n        </div>\n    );\n};\n"],"names":["Button","Icon","SvgGroupCollapse","SvgGroupExpand","classNames","Fragment","BadgeTag","Styles","withTooltip","InternalSideNavigationItemContent","icon","iconActive","tag","title","div","className","navItemIconWrapper","svg","navIcon","navIconInactive","navIconActive","navItemTextExpanded","data-cy","data","navItemCounter","longClassName","navItemCounterLong","navItemTextCollapsed","navItemTextSmall","length","InternalSideNavigationLink","id","to","isActive","navigationComponent","NavigationComponent","rest","data-pendo","navItem","navLink","navItemActive","navItemIconSwitch","undefined","activeClassName","tabIndex","InternalSideNavigationTrigger","onClick","InternalSideNavigationGroupLink","parentId","submenuItem","submenuLink","submenuLinkActive","span","submenuLinkCounter","InternalSideNavigationGroupTrigger","InternalSideNavigationGroupDivider","divider","InternalSideNavigationGroup","children","submenuExpanded","onSubmenuExpand","onRootClick","e","preventDefault","stopPropagation","onToggleClick","navGroupWrapper","navGroupItem","navItemGroupToggleWrapper","appearance","size","navItemGroupToggle","aria-label","placement","submenuWrapper","submenuWrapperCollapsed","submenu"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/titan-layout/layout-sidebar-links-internal.tsx"],"sourcesContent":["import { Button, Icon, IconProps } from '@servicetitan/anvil2';\nimport SvgGroupCollapse from '@servicetitan/anvil2/assets/icons/material/round/expand_less.svg';\nimport SvgGroupExpand from '@servicetitan/anvil2/assets/icons/material/round/expand_more.svg';\nimport classNames from 'classnames';\nimport { ComponentPropsWithoutRef, FC, Fragment, MouseEvent, ReactNode } from 'react';\n\nimport { BadgeTag, BadgeTagProps } from '../badge-tag';\nimport { NavigationComponentProps } from './interface-internal';\nimport * as Styles from './layout-sidebar.module.less';\nimport { withTooltip } from './with-tooltip';\n\nexport interface InternalSideNavigationItemContentProps {\n    icon: IconProps['svg'] | undefined;\n    iconActive: IconProps['svg'] | undefined;\n    title: string;\n    tag: BadgeTagProps | undefined;\n}\n\nconst InternalSideNavigationItemContent: FC<InternalSideNavigationItemContentProps> = ({\n    icon,\n    iconActive,\n    tag,\n    title,\n}) => (\n    <Fragment>\n        <div className={Styles.navItemIconWrapper}>\n            {icon && (\n                <Icon svg={icon} className={classNames(Styles.navIcon, Styles.navIconInactive)} />\n            )}\n            {iconActive && (\n                <Icon\n                    svg={iconActive}\n                    className={classNames(Styles.navIcon, Styles.navIconActive)}\n                />\n            )}\n\n            <div className={Styles.navItemTextExpanded} data-cy=\"nav-item-label\">\n                {title}\n            </div>\n            {!!tag && (\n                <BadgeTag\n                    data={tag}\n                    className={Styles.navItemCounter}\n                    longClassName={Styles.navItemCounterLong}\n                />\n            )}\n        </div>\n\n        <div\n            className={classNames(Styles.navItemTextCollapsed, {\n                [Styles.navItemTextSmall]: !!title && title.length >= 10,\n            })}\n            data-cy=\"nav-item-label\"\n        >\n            {title}\n        </div>\n    </Fragment>\n);\n\n/** Side Navigation menu item (for internal usage) */\nexport const InternalSideNavigationLink: FC<\n    NavigationComponentProps & {\n        id: string;\n        to: string;\n        title: string;\n        isActive: boolean | ((pathname: string) => boolean) | undefined;\n        icon: IconProps['svg'] | undefined;\n        iconActive: IconProps['svg'] | undefined;\n        className: string | undefined;\n        tag: BadgeTagProps | undefined;\n    } & Omit<ComponentPropsWithoutRef<'a'>, 'children' | 'title'>\n> = ({\n    id,\n    to,\n    title,\n    isActive,\n    icon,\n    iconActive,\n    className,\n    tag,\n\n    navigationComponent: NavigationComponent,\n    ...rest\n}) => {\n    return (\n        <NavigationComponent\n            data-cy={`navigation-item-${id}`}\n            data-pendo={`navigation-item-${id}`}\n            {...rest}\n            className={classNames(Styles.navItem, Styles.navLink, className, {\n                [Styles.navItemActive]: isActive === true,\n                [Styles.navItemIconSwitch]: !!icon && !!iconActive,\n            })}\n            to={to}\n            isActive={typeof isActive === 'function' ? isActive : undefined}\n            activeClassName={Styles.navItemActive}\n            tabIndex={0}\n        >\n            <InternalSideNavigationItemContent\n                icon={icon}\n                iconActive={iconActive}\n                title={title}\n                tag={tag}\n            />\n        </NavigationComponent>\n    );\n};\n\n/** Side Navigation menu trigger (for internal usage) */\nexport const InternalSideNavigationTrigger: FC<\n    {\n        id: string;\n        title: string;\n        isActive: boolean | undefined;\n        icon: IconProps['svg'] | undefined;\n        iconActive: IconProps['svg'] | undefined;\n        className: string | undefined;\n\n        tag: BadgeTagProps | undefined;\n        onClick?: (e: MouseEvent<never>) => void;\n    } & Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'title'>\n> = ({\n    id,\n    title,\n    isActive,\n    icon,\n    iconActive,\n    className,\n\n    tag,\n    ...rest\n}) => {\n    return (\n        <div\n            data-cy={`navigation-item-${id}`}\n            data-pendo={`navigation-item-${id}`}\n            tabIndex={rest.onClick ? 0 : -1}\n            {...rest}\n            className={classNames(Styles.navItem, className, {\n                [Styles.navLink]: !!rest.onClick,\n                [Styles.navItemActive]: isActive === true,\n                [Styles.navItemIconSwitch]: !!icon && !!iconActive,\n            })}\n        >\n            <InternalSideNavigationItemContent\n                icon={icon}\n                iconActive={iconActive}\n                title={title}\n                tag={tag}\n            />\n        </div>\n    );\n};\n\nexport const InternalSideNavigationGroupLink: FC<\n    NavigationComponentProps & {\n        id: string;\n        to: string;\n        title: string;\n        isActive: boolean | ((pathname: string) => boolean) | undefined;\n        className: string | undefined;\n        tag: BadgeTagProps | undefined;\n\n        parentId: string;\n    }\n> = ({\n    id,\n    to,\n    title,\n    isActive,\n    className,\n    tag,\n\n    parentId,\n    navigationComponent: NavigationComponent,\n    ...rest\n}) => {\n    return (\n        <NavigationComponent\n            key={id}\n            data-cy={`navigation-item-${parentId}--${id}`}\n            data-pendo={`navigation-item-${parentId}--${id}`}\n            {...rest}\n            to={to}\n            className={classNames(Styles.submenuItem, Styles.submenuLink, className, {\n                [Styles.submenuLinkActive]: isActive === true,\n            })}\n            isActive={typeof isActive === 'function' ? isActive : undefined}\n            activeClassName={Styles.submenuLinkActive}\n        >\n            <span>{title}</span>\n            <BadgeTag data={tag} className={Styles.submenuLinkCounter} />\n        </NavigationComponent>\n    );\n};\n\nexport const InternalSideNavigationGroupTrigger: FC<{\n    id: string;\n    title: string;\n    isActive: boolean | ((pathname: string) => boolean) | undefined;\n    className: string | undefined;\n    tag: BadgeTagProps | undefined;\n\n    onClick?: (e: MouseEvent<any>) => void;\n}> = ({\n    id,\n    title,\n    isActive,\n    className,\n    tag,\n\n    ...rest\n}) => {\n    return (\n        <div\n            data-cy={`navigation-item-${id}`}\n            data-pendo={`navigation-item-${id}`}\n            key={id}\n            {...rest}\n            className={classNames(Styles.submenuItem, {\n                [Styles.submenuLink]: !!rest.onClick,\n                [Styles.submenuLinkActive]: isActive === true,\n            })}\n        >\n            <span>{title}</span>\n            <BadgeTag data={tag} className={Styles.submenuLinkCounter} />\n        </div>\n    );\n};\n\nexport const InternalSideNavigationGroupDivider = () => {\n    return <div className={Styles.divider} />;\n};\n\nexport const InternalSideNavigationGroup: FC<\n    NavigationComponentProps & {\n        id: string;\n        to: string | undefined;\n        title: string;\n        isActive: boolean | ((pathname: string) => boolean) | undefined;\n        icon: IconProps['svg'] | undefined;\n        iconActive: IconProps['svg'] | undefined;\n        className: string | undefined;\n        tag: BadgeTagProps | undefined;\n\n        children: ReactNode;\n        submenuExpanded: boolean;\n        onClick?: (e: MouseEvent<never>) => void;\n        onSubmenuExpand(id: string, expanded: boolean, force: boolean): void;\n    }\n> = ({\n    id,\n    to,\n    title,\n    isActive,\n    icon,\n    iconActive,\n    className,\n    tag,\n\n    children,\n    submenuExpanded,\n    onSubmenuExpand,\n    onClick,\n    navigationComponent,\n    ...rest\n}) => {\n    const onRootClick = (e: MouseEvent<never>) => {\n        if (submenuExpanded) {\n            onSubmenuExpand(id, true, true);\n        } else {\n            onSubmenuExpand(id, true, false);\n            e.preventDefault();\n            e.stopPropagation();\n        }\n    };\n    const onToggleClick = (e: MouseEvent<never>) => {\n        onSubmenuExpand(id, !submenuExpanded, false);\n        e.preventDefault();\n        e.stopPropagation();\n    };\n\n    return (\n        <div className={classNames(Styles.navGroupWrapper)}>\n            <div className={Styles.navGroupItem}>\n                <div onClick={onRootClick}>\n                    {to ? (\n                        <InternalSideNavigationLink\n                            id={id}\n                            to={to}\n                            title={title}\n                            isActive={isActive}\n                            icon={icon}\n                            iconActive={iconActive}\n                            tag={tag}\n                            className={className}\n                            {...rest}\n                            navigationComponent={navigationComponent}\n                        />\n                    ) : (\n                        <InternalSideNavigationTrigger\n                            id={id}\n                            title={title}\n                            isActive={isActive === true || undefined}\n                            icon={icon}\n                            iconActive={iconActive}\n                            tag={tag}\n                            className={className}\n                            {...rest}\n                        />\n                    )}\n                </div>\n\n                <div className={Styles.navItemGroupToggleWrapper}>\n                    {withTooltip(\n                        <Button\n                            appearance=\"secondary\"\n                            size=\"small\"\n                            icon={submenuExpanded ? SvgGroupCollapse : SvgGroupExpand}\n                            className={Styles.navItemGroupToggle}\n                            onClick={onToggleClick}\n                            aria-label=\"Toggle submenu\"\n                            data-cy=\"nav-item-group-expand\"\n                        />,\n                        submenuExpanded ? 'Hide Submenu' : 'View Submenu',\n                        { placement: 'right', delay: 1000 }\n                    )}\n                </div>\n            </div>\n            {submenuExpanded && (\n                <div\n                    className={classNames(Styles.submenuWrapper, {\n                        [Styles.submenuWrapperCollapsed]: !submenuExpanded,\n                    })}\n                    data-cy={`navigation-submenu-${id}`}\n                >\n                    <div className={Styles.submenu}>{children}</div>\n                </div>\n            )}\n        </div>\n    );\n};\n"],"names":["Button","Icon","SvgGroupCollapse","SvgGroupExpand","classNames","Fragment","BadgeTag","Styles","withTooltip","InternalSideNavigationItemContent","icon","iconActive","tag","title","div","className","navItemIconWrapper","svg","navIcon","navIconInactive","navIconActive","navItemTextExpanded","data-cy","data","navItemCounter","longClassName","navItemCounterLong","navItemTextCollapsed","navItemTextSmall","length","InternalSideNavigationLink","id","to","isActive","navigationComponent","NavigationComponent","rest","data-pendo","navItem","navLink","navItemActive","navItemIconSwitch","undefined","activeClassName","tabIndex","InternalSideNavigationTrigger","onClick","InternalSideNavigationGroupLink","parentId","submenuItem","submenuLink","submenuLinkActive","span","submenuLinkCounter","InternalSideNavigationGroupTrigger","InternalSideNavigationGroupDivider","divider","InternalSideNavigationGroup","children","submenuExpanded","onSubmenuExpand","onRootClick","e","preventDefault","stopPropagation","onToggleClick","navGroupWrapper","navGroupItem","navItemGroupToggleWrapper","appearance","size","navItemGroupToggle","aria-label","placement","delay","submenuWrapper","submenuWrapperCollapsed","submenu"],"mappings":"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"}

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

@@ -20,9 +20,9 @@
     position: fixed;
     max-width: 400px;
     width: 0;
-    height: 100vh;
+    height: 100%;
     top: 0;
-    left: -100vh;
+    left: -100vw;
     z-index: 991;
 
     -webkit-transition: width 200ms ease-in-out;

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

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

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

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

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

@@ -156,25 +156,44 @@ function TitanLayoutComponent({ appearance = 'anvil2', navVariant = 'left', id,
         breakpoint.width
     ]);
     const contentStyles = useMemo(()=>{
-        if (view.isAnvil2) {
+        if (view.isAnvil2 || view.isLegacy) {
             return offsetTopStyles;
         }
-        if (view.isLegacy) {
+    }, [
+        view,
+        offsetTopStyles
+    ]);
+    const layoutClass = view.isLegacy ? Styles.layoutLegacy : view.isAnvil1 ? Styles.layoutAnvil1 : Styles.layoutAnvil2;
+    const burgerProps = useMemo(()=>{
+        if (!hasTopBar) {
+            return undefined;
+        }
+        if (isMobile) {
+            return {
+                onClick: onBurgerClick,
+                tag: {
+                    value: hasNotifications || hasMenuNotifications
+                }
+            };
+        }
+        if (navVariant === 'left') {
             return {
-                ...limitContentWidth ? {
-                    display: 'flex',
-                    flexDirection: 'column',
-                    minHeight: '100vh'
-                } : {},
-                ...offsetTopStyles
+                'onClick': onBurgerClick,
+                'tooltip': (state === null || state === void 0 ? void 0 : state.navCollapsed) ? 'Expand' : 'Collapse',
+                'data-pendo': 'navigation-left-options',
+                'data-cy': 'navigation-left-options'
             };
         }
+        return undefined;
     }, [
-        view,
-        offsetTopStyles,
-        limitContentWidth
+        isMobile,
+        hasTopBar,
+        navVariant,
+        state === null || state === void 0 ? void 0 : state.navCollapsed,
+        onBurgerClick,
+        hasNotifications,
+        hasMenuNotifications
     ]);
-    const layoutClass = view.isLegacy ? Styles.layoutLegacy : view.isAnvil1 ? Styles.layoutAnvil1 : Styles.layoutAnvil2;
     return /*#__PURE__*/ _jsx(LayoutContext.Provider, {
         value: context,
         children: /*#__PURE__*/ _jsx(LayoutPlacementContext.Provider, {
@@ -204,10 +223,7 @@ function TitanLayoutComponent({ appearance = 'anvil2', navVariant = 'left', id,
                             ]
                         }),
                         isMobile: isMobile,
-                        hasNotifications: isMobile && (hasNotifications || hasMenuNotifications),
-                        hasBurger: hasSideBar,
-                        burgerTooltip: isMobile ? undefined : (state === null || state === void 0 ? void 0 : state.navCollapsed) ? 'Expand' : 'Collapse',
-                        onBurgerClick: onBurgerClick
+                        burger: burgerProps
                     }) : /*#__PURE__*/ _jsx(LayoutHeaderDark, {
                         className: Styles.top,
                         logo: logo,
@@ -221,9 +237,7 @@ function TitanLayoutComponent({ appearance = 'anvil2', navVariant = 'left', id,
                             ]
                         }),
                         isMobile: isMobile,
-                        hasNotifications: hasNotifications || hasMenuNotifications,
-                        onBurgerClick: onBurgerClick,
-                        hasBurger: isMobile,
+                        burger: burgerProps,
                         navigationMainItems: navigationMainItems,
                         navigationOverflowItems: navigationOverflowItems
                     })),
@@ -349,11 +363,8 @@ const LayoutContentLegacy = ({ children, minWidth })=>{
         minWidth
     ]);
     return /*#__PURE__*/ _jsx("div", {
-        className: minWidth ? 'of-x-auto flex-basis-0 flex-grow-1' : undefined,
-        children: /*#__PURE__*/ _jsx("div", {
-            style: minWidth ? innerContentStyles : undefined,
-            children: children
-        })
+        style: minWidth ? innerContentStyles : undefined,
+        children: children
     });
 };
 export const TitanLayout = Object.assign(TitanLayoutComponent, {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/titan-layout/titan-layout.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport {\n    CSSProperties,\n    ComponentPropsWithoutRef,\n    FC,\n    Fragment,\n    MouseEvent,\n    ReactElement,\n    ReactNode,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { NavigationItemData } from '../../utils/navigation';\nimport { DefaultNavLinkComponent, NavLinkComponentProps } from '../../utils/navigation-context';\nimport { useTitanBreakpoint } from '../../utils/use-breakpoint';\nimport { TitanLayoutState } from './interface';\nimport {\n    LayoutContext,\n    LayoutPlacementContext,\n    TitanLayoutContextType,\n    TitanLayoutSidebarContextType,\n} from './layout-context';\nimport { LayoutHeader } from './layout-header';\nimport { LayoutHeaderDark } from './layout-header-dark';\nimport { TitanLayoutLogoProps } from './layout-logo';\nimport { LayoutSidebar } from './layout-sidebar';\nimport { InternalSideNavigationTrigger } from './layout-sidebar-links-internal';\nimport { useNotificationsState } from './notifications-context';\nimport { TitanLayoutLink, TitanLayoutTrigger } from './titan-layout-links';\nimport * as Styles from './titan-layout.module.less';\n\nexport type TitanLayoutProps = Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'style'> & {\n    /** layout appearance */\n    appearance?: 'legacy' | 'anvil1' | 'anvil2';\n\n    /** layout navigation variant (left by default) */\n    navVariant?: 'left' | 'top';\n\n    /** layout's content */\n    children?: ReactNode;\n\n    /** show only content without side and top bars */\n    contentOnly?: boolean;\n\n    /** component used for navigation */\n    navigationComponent?: FC<NavLinkComponentProps>;\n\n    /** data for main navigation links */\n    navigationMainItems?: NavigationItemData[];\n\n    /** data for overflow navigation links (used only with top variant) */\n    navigationOverflowItems?: NavigationItemData[];\n\n    /** logo props */\n    logo?: TitanLayoutLogoProps;\n\n    /** layout state */\n    state?: TitanLayoutState;\n    /** layout state change handler */\n    onStateChange?: (state: TitanLayoutState) => void;\n\n    /** content header content */\n    header?: ReactElement;\n\n    /** layout header content (center) */\n    top?: ReactElement;\n\n    /** top links for side navigation */\n    sideTop?: ReactElement[];\n\n    /**\n     * profile element for layout\n     * @see ProfileDropdown\n     */\n    profile?: ReactElement;\n\n    /**\n     * extra links for layout header\n     * shown in side nav footer on mobile\n     */\n    extraLinks?: ReactElement;\n\n    /**\n     * fixed extra links for layout header\n     * shown in header on mobile as well\n     */\n    extraLinksTop?: ReactElement;\n\n    /**\n     * text shown in layout's header\n     * shown in side nav footer on mobile\n     */\n    extraText?: string;\n\n    /**\n     * minimal width set for content area\n     * used for pages that aren't adopted to mobile\n     */\n    minContentWidth?: number;\n};\n\nconst defaultSidebarContext: TitanLayoutSidebarContextType = {\n    styles: {\n        popoverContent: {\n            '--background-color-strong': '#24323C',\n            'color': 'var(--color-white)',\n        } as CSSProperties,\n    },\n};\n\nconst useAppearance = (appearance: TitanLayoutProps['appearance']) =>\n    useMemo(() => {\n        const isLegacy = appearance === 'legacy';\n        const isAnvil1 = appearance === 'anvil1';\n        const isAnvil2 = appearance === 'anvil2';\n\n        return {\n            isLegacy,\n            isAnvil1,\n            isAnvil2,\n            isSequent: isLegacy || isAnvil2,\n        };\n    }, [appearance]);\n\nfunction TitanLayoutComponent({\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}: TitanLayoutProps) {\n    const breakpoint = useTitanBreakpoint();\n    const context: TitanLayoutContextType = useMemo(\n        () => ({\n            NavigationComponent: navigationComponent ?? DefaultNavLinkComponent,\n            breakpoint,\n            isTitanLayout: true,\n            sidebar: defaultSidebarContext,\n        }),\n        [navigationComponent, breakpoint]\n    );\n    const view = useAppearance(appearance);\n    const [mobileDrawerOpened, setMobileDrawerOpened] = useState(false);\n    const { hasNotifications, NotificationsContextProvider } = useNotificationsState();\n    const [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(\n        (e: MouseEvent<never>) => {\n            if (isMobile) {\n                setMobileDrawerOpened(true);\n            } else {\n                onStateChange?.({ navCollapsed: !state?.navCollapsed });\n            }\n\n            e.stopPropagation();\n        },\n        [isMobile, state?.navCollapsed, onStateChange]\n    );\n\n    const onBarExpandChange = useCallback(\n        (expanded: boolean) => {\n            if (isMobile) {\n                setMobileDrawerOpened(false);\n            } else {\n                onStateChange?.({ navCollapsed: !expanded });\n            }\n        },\n        [onStateChange, isMobile]\n    );\n    const onSubmenuExpandChange = useCallback(\n        (id: string, expanded: boolean, force: boolean) => {\n            onStateChange?.({\n                navCollapsed: state?.navCollapsed ?? false,\n                submenusExpanded: [\n                    ...(force ? [] : (state?.submenusExpanded ?? []).filter(i => i !== id)),\n                    ...(expanded ? [id] : []),\n                ],\n            });\n        },\n        [state, onStateChange]\n    );\n    const sidebarNavItems = useMemo(() => {\n        if (!hasSideBar) {\n            return undefined;\n        }\n\n        if (navVariant === 'left') {\n            return navigationMainItems;\n        }\n\n        return [...(navigationMainItems ?? []), ...(navigationOverflowItems ?? [])];\n    }, [hasSideBar, navigationMainItems, navigationOverflowItems, navVariant]);\n\n    const hasMenuNotifications = useMemo(() => {\n        try {\n            return (\n                sidebarNavItems?.some(item => {\n                    if (item.counter || item.tag?.value) {\n                        return true;\n                    } else if (item.submenu) {\n                        return item.submenu.groups.some(group =>\n                            group.links.some(link => !!link.counter || !!link.tag?.value)\n                        );\n                    }\n                    return false;\n                }) ?? false\n            );\n        } catch {\n            return false;\n        }\n    }, [sidebarNavItems]);\n\n    const limitContentWidth = useMemo(() => {\n        if (view.isAnvil2 || !minContentWidth) {\n            return undefined;\n        }\n\n        if (breakpoint.width < minContentWidth) {\n            return minContentWidth;\n        }\n    }, [view, minContentWidth, breakpoint.width]);\n\n    const contentStyles = useMemo(() => {\n        if (view.isAnvil2) {\n            return offsetTopStyles;\n        }\n\n        if (view.isLegacy) {\n            return {\n                ...(limitContentWidth\n                    ? { display: 'flex', flexDirection: 'column', minHeight: '100vh' }\n                    : {}),\n                ...offsetTopStyles,\n            };\n        }\n    }, [view, offsetTopStyles, limitContentWidth]);\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={\n                                    isMobile && (hasNotifications || hasMenuNotifications)\n                                }\n                                hasBurger={hasSideBar}\n                                burgerTooltip={\n                                    isMobile\n                                        ? undefined\n                                        : state?.navCollapsed\n                                          ? 'Expand'\n                                          : 'Collapse'\n                                }\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                                hasBurger={isMobile}\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                                submenusExpanded={state?.submenusExpanded}\n                                onSubmenuExpandChange={onSubmenuExpandChange}\n                                drawerOpened={mobileDrawerOpened}\n                                onDrawerOpenChange={setMobileDrawerOpened}\n                                top={sideTop}\n                                mainItems={sidebarNavItems}\n                                navigationComponent={context.NavigationComponent}\n                                bottom={\n                                    isMobile ? (\n                                        <Fragment>\n                                            {profile}\n                                            {extraLinks}\n                                            {!!extraText && (\n                                                <InternalSideNavigationTrigger\n                                                    id=\"--extra-text\"\n                                                    title={extraText}\n                                                    isActive={undefined}\n                                                    icon={undefined}\n                                                    iconActive={undefined}\n                                                    tag={undefined}\n                                                    className={undefined}\n                                                />\n                                            )}\n                                        </Fragment>\n                                    ) : undefined\n                                }\n                            />\n                        </NotificationsContextProvider>\n                    )}\n\n                    {view.isSequent && (\n                        <TitanLayoutHeaderObserved heightChange={updateIndicatorsHeight}>\n                            {header}\n                        </TitanLayoutHeaderObserved>\n                    )}\n                    {view.isAnvil1 ? (\n                        <LayoutContentAnvil1 header={header} minWidth={limitContentWidth}>\n                            {children}\n                        </LayoutContentAnvil1>\n                    ) : view.isLegacy ? (\n                        <LayoutContentLegacy minWidth={limitContentWidth}>\n                            {children}\n                        </LayoutContentLegacy>\n                    ) : (\n                        children\n                    )}\n                </div>\n            </LayoutPlacementContext.Provider>\n        </LayoutContext.Provider>\n    );\n}\n\nconst TitanLayoutHeaderObserved: FC<{\n    children: ReactNode;\n    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 (\n        <div className={minWidth ? 'of-x-auto flex-basis-0 flex-grow-1' : undefined}>\n            <div style={minWidth ? innerContentStyles : undefined}>{children}</div>\n        </div>\n    );\n};\n\nexport const TitanLayout = Object.assign(TitanLayoutComponent, {\n    Link: TitanLayoutLink,\n    Trigger: TitanLayoutTrigger,\n});\n"],"names":["classNames","Fragment","useCallback","useEffect","useMemo","useRef","useState","DefaultNavLinkComponent","useTitanBreakpoint","LayoutContext","LayoutPlacementContext","LayoutHeader","LayoutHeaderDark","LayoutSidebar","InternalSideNavigationTrigger","useNotificationsState","TitanLayoutLink","TitanLayoutTrigger","Styles","defaultSidebarContext","styles","popoverContent","useAppearance","appearance","isLegacy","isAnvil1","isAnvil2","isSequent","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","navCollapsed","stopPropagation","onBarExpandChange","expanded","onSubmenuExpandChange","force","submenusExpanded","filter","i","sidebarNavItems","undefined","hasMenuNotifications","some","item","counter","tag","value","submenu","groups","group","links","link","limitContentWidth","width","contentStyles","display","flexDirection","minHeight","layoutClass","layoutLegacy","layoutAnvil1","layoutAnvil2","Provider","div","className","layout","layoutMobile","layoutDesktop","layoutTopLight","layoutTopNav","layoutNavSlim","layoutNavWide","style","topPlaceholder","variant","center","rightText","right","hasBurger","burgerTooltip","side","mobile","barExpanded","drawerOpened","onDrawerOpenChange","mainItems","bottom","title","isActive","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    MouseEvent,\n    ReactElement,\n    ReactNode,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { NavigationItemData } from '../../utils/navigation';\nimport { DefaultNavLinkComponent, NavLinkComponentProps } from '../../utils/navigation-context';\nimport { useTitanBreakpoint } from '../../utils/use-breakpoint';\nimport { TitanLayoutState } from './interface';\nimport {\n    LayoutContext,\n    LayoutPlacementContext,\n    TitanLayoutContextType,\n    TitanLayoutSidebarContextType,\n} from './layout-context';\nimport { LayoutHeader, LayoutHeaderProps } from './layout-header';\nimport { LayoutHeaderDark } from './layout-header-dark';\nimport { TitanLayoutLogoProps } from './layout-logo';\nimport { LayoutSidebar } from './layout-sidebar';\nimport { InternalSideNavigationTrigger } from './layout-sidebar-links-internal';\nimport { useNotificationsState } from './notifications-context';\nimport { TitanLayoutLink, TitanLayoutTrigger } from './titan-layout-links';\nimport * as Styles from './titan-layout.module.less';\n\nexport type TitanLayoutProps = Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'style'> & {\n    /** layout appearance */\n    appearance?: 'legacy' | 'anvil1' | 'anvil2';\n\n    /** layout navigation variant (left by default) */\n    navVariant?: 'left' | 'top';\n\n    /** layout's content */\n    children?: ReactNode;\n\n    /** show only content without side and top bars */\n    contentOnly?: boolean;\n\n    /** component used for navigation */\n    navigationComponent?: FC<NavLinkComponentProps>;\n\n    /** data for main navigation links */\n    navigationMainItems?: NavigationItemData[];\n\n    /** data for overflow navigation links (used only with top variant) */\n    navigationOverflowItems?: NavigationItemData[];\n\n    /** logo props */\n    logo?: TitanLayoutLogoProps;\n\n    /** layout state */\n    state?: TitanLayoutState;\n    /** layout state change handler */\n    onStateChange?: (state: TitanLayoutState) => void;\n\n    /** content header content */\n    header?: ReactElement;\n\n    /** layout header content (center) */\n    top?: ReactElement;\n\n    /** top links for side navigation */\n    sideTop?: ReactElement[];\n\n    /**\n     * profile element for layout\n     * @see ProfileDropdown\n     */\n    profile?: ReactElement;\n\n    /**\n     * extra links for layout header\n     * shown in side nav footer on mobile\n     */\n    extraLinks?: ReactElement;\n\n    /**\n     * fixed extra links for layout header\n     * shown in header on mobile as well\n     */\n    extraLinksTop?: ReactElement;\n\n    /**\n     * text shown in layout's header\n     * shown in side nav footer on mobile\n     */\n    extraText?: string;\n\n    /**\n     * minimal width set for content area\n     * used for pages that aren't adopted to mobile\n     */\n    minContentWidth?: number;\n};\n\nconst defaultSidebarContext: TitanLayoutSidebarContextType = {\n    styles: {\n        popoverContent: {\n            '--background-color-strong': '#24323C',\n            'color': 'var(--color-white)',\n        } as CSSProperties,\n    },\n};\n\nconst useAppearance = (appearance: TitanLayoutProps['appearance']) =>\n    useMemo(() => {\n        const isLegacy = appearance === 'legacy';\n        const isAnvil1 = appearance === 'anvil1';\n        const isAnvil2 = appearance === 'anvil2';\n\n        return {\n            isLegacy,\n            isAnvil1,\n            isAnvil2,\n            isSequent: isLegacy || isAnvil2,\n        };\n    }, [appearance]);\n\nfunction TitanLayoutComponent({\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}: TitanLayoutProps) {\n    const breakpoint = useTitanBreakpoint();\n    const context: TitanLayoutContextType = useMemo(\n        () => ({\n            NavigationComponent: navigationComponent ?? DefaultNavLinkComponent,\n            breakpoint,\n            isTitanLayout: true,\n            sidebar: defaultSidebarContext,\n        }),\n        [navigationComponent, breakpoint]\n    );\n    const view = useAppearance(appearance);\n    const [mobileDrawerOpened, setMobileDrawerOpened] = useState(false);\n    const { hasNotifications, NotificationsContextProvider } = useNotificationsState();\n    const [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(\n        (e: MouseEvent<never>) => {\n            if (isMobile) {\n                setMobileDrawerOpened(true);\n            } else {\n                onStateChange?.({ navCollapsed: !state?.navCollapsed });\n            }\n\n            e.stopPropagation();\n        },\n        [isMobile, state?.navCollapsed, onStateChange]\n    );\n\n    const onBarExpandChange = useCallback(\n        (expanded: boolean) => {\n            if (isMobile) {\n                setMobileDrawerOpened(false);\n            } else {\n                onStateChange?.({ navCollapsed: !expanded });\n            }\n        },\n        [onStateChange, isMobile]\n    );\n    const onSubmenuExpandChange = useCallback(\n        (id: string, expanded: boolean, force: boolean) => {\n            onStateChange?.({\n                navCollapsed: state?.navCollapsed ?? false,\n                submenusExpanded: [\n                    ...(force ? [] : (state?.submenusExpanded ?? []).filter(i => i !== id)),\n                    ...(expanded ? [id] : []),\n                ],\n            });\n        },\n        [state, onStateChange]\n    );\n    const sidebarNavItems = useMemo(() => {\n        if (!hasSideBar) {\n            return undefined;\n        }\n\n        if (navVariant === 'left') {\n            return navigationMainItems;\n        }\n\n        return [...(navigationMainItems ?? []), ...(navigationOverflowItems ?? [])];\n    }, [hasSideBar, navigationMainItems, navigationOverflowItems, navVariant]);\n\n    const hasMenuNotifications = useMemo(() => {\n        try {\n            return (\n                sidebarNavItems?.some(item => {\n                    if (item.counter || item.tag?.value) {\n                        return true;\n                    } else if (item.submenu) {\n                        return item.submenu.groups.some(group =>\n                            group.links.some(link => !!link.counter || !!link.tag?.value)\n                        );\n                    }\n                    return false;\n                }) ?? false\n            );\n        } catch {\n            return false;\n        }\n    }, [sidebarNavItems]);\n\n    const limitContentWidth = useMemo(() => {\n        if (view.isAnvil2 || !minContentWidth) {\n            return undefined;\n        }\n\n        if (breakpoint.width < minContentWidth) {\n            return minContentWidth;\n        }\n    }, [view, minContentWidth, breakpoint.width]);\n\n    const 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    const burgerProps: LayoutHeaderProps['burger'] = useMemo(() => {\n        if (!hasTopBar) {\n            return undefined;\n        }\n\n        if (isMobile) {\n            return {\n                onClick: onBurgerClick,\n                tag: { value: hasNotifications || hasMenuNotifications },\n            };\n        }\n\n        if (navVariant === 'left') {\n            return {\n                'onClick': onBurgerClick,\n                'tooltip': state?.navCollapsed ? 'Expand' : 'Collapse',\n                'data-pendo': 'navigation-left-options',\n                'data-cy': 'navigation-left-options',\n            };\n        }\n\n        return undefined;\n    }, [\n        isMobile,\n        hasTopBar,\n        navVariant,\n        state?.navCollapsed,\n        onBurgerClick,\n        hasNotifications,\n        hasMenuNotifications,\n    ]);\n\n    return (\n        <LayoutContext.Provider value={context}>\n            <LayoutPlacementContext.Provider value=\"unset\">\n                <div\n                    id={id}\n                    className={classNames(\n                        Styles.layout,\n                        isMobile ? Styles.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                                burger={burgerProps}\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                                burger={burgerProps}\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                                submenusExpanded={state?.submenusExpanded}\n                                onSubmenuExpandChange={onSubmenuExpandChange}\n                                drawerOpened={mobileDrawerOpened}\n                                onDrawerOpenChange={setMobileDrawerOpened}\n                                top={sideTop}\n                                mainItems={sidebarNavItems}\n                                navigationComponent={context.NavigationComponent}\n                                bottom={\n                                    isMobile ? (\n                                        <Fragment>\n                                            {profile}\n                                            {extraLinks}\n                                            {!!extraText && (\n                                                <InternalSideNavigationTrigger\n                                                    id=\"--extra-text\"\n                                                    title={extraText}\n                                                    isActive={undefined}\n                                                    icon={undefined}\n                                                    iconActive={undefined}\n                                                    tag={undefined}\n                                                    className={undefined}\n                                                />\n                                            )}\n                                        </Fragment>\n                                    ) : undefined\n                                }\n                            />\n                        </NotificationsContextProvider>\n                    )}\n\n                    {view.isSequent && (\n                        <TitanLayoutHeaderObserved heightChange={updateIndicatorsHeight}>\n                            {header}\n                        </TitanLayoutHeaderObserved>\n                    )}\n                    {view.isAnvil1 ? (\n                        <LayoutContentAnvil1 header={header} minWidth={limitContentWidth}>\n                            {children}\n                        </LayoutContentAnvil1>\n                    ) : view.isLegacy ? (\n                        <LayoutContentLegacy minWidth={limitContentWidth}>\n                            {children}\n                        </LayoutContentLegacy>\n                    ) : (\n                        children\n                    )}\n                </div>\n            </LayoutPlacementContext.Provider>\n        </LayoutContext.Provider>\n    );\n}\n\nconst TitanLayoutHeaderObserved: FC<{\n    children: ReactNode;\n    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: TitanLayoutLink,\n    Trigger: TitanLayoutTrigger,\n});\n"],"names":["classNames","Fragment","useCallback","useEffect","useMemo","useRef","useState","DefaultNavLinkComponent","useTitanBreakpoint","LayoutContext","LayoutPlacementContext","LayoutHeader","LayoutHeaderDark","LayoutSidebar","InternalSideNavigationTrigger","useNotificationsState","TitanLayoutLink","TitanLayoutTrigger","Styles","defaultSidebarContext","styles","popoverContent","useAppearance","appearance","isLegacy","isAnvil1","isAnvil2","isSequent","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","navCollapsed","stopPropagation","onBarExpandChange","expanded","onSubmenuExpandChange","force","submenusExpanded","filter","i","sidebarNavItems","undefined","hasMenuNotifications","some","item","counter","tag","value","submenu","groups","group","links","link","limitContentWidth","width","contentStyles","layoutClass","layoutLegacy","layoutAnvil1","layoutAnvil2","burgerProps","onClick","Provider","div","className","layout","layoutMobile","layoutDesktop","layoutTopLight","layoutTopNav","layoutNavSlim","layoutNavWide","style","topPlaceholder","variant","center","rightText","right","burger","side","mobile","barExpanded","drawerOpened","onDrawerOpenChange","mainItems","bottom","title","isActive","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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"}

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

@@ -4,5 +4,6 @@ export declare const withTooltip: (element: ReactElement, tooltip: string | unde
     placement?: TooltipProps["placement"];
     key?: string;
     pointerEventsNone?: boolean;
+    delay?: number;
 }) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=with-tooltip.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"with-tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/with-tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAErC,eAAO,MAAM,WAAW,GACpB,SAAS,YAAY,EACrB,SAAS,MAAM,GAAG,SAAS,EAC3B,QAAQ;IACJ,SAAS,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC;IACtC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC/B,4CAcJ,CAAC"}
+{"version":3,"file":"with-tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/with-tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAErC,eAAO,MAAM,WAAW,GACpB,SAAS,YAAY,EACrB,SAAS,MAAM,GAAG,SAAS,EAC3B,QAAQ;IACJ,SAAS,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC;IACtC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB,4CAcJ,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/titan-layout/with-tooltip.tsx"],"sourcesContent":["import { Tooltip, TooltipProps } from '@servicetitan/anvil2';\nimport { ReactElement } from 'react';\n\nexport const withTooltip = (\n    element: ReactElement,\n    tooltip: string | undefined,\n    props?: {\n        placement?: TooltipProps['placement'];\n        key?: string;\n        pointerEventsNone?: boolean;\n    }\n) => {\n    const { pointerEventsNone, ...tooltipProps } = props ?? {};\n\n    return tooltip ? (\n        <Tooltip placement=\"bottom\" {...tooltipProps}>\n            <Tooltip.Content style={pointerEventsNone ? { pointerEvents: 'none' } : undefined}>\n                {tooltip}\n            </Tooltip.Content>\n            <Tooltip.Trigger>{element}</Tooltip.Trigger>\n        </Tooltip>\n    ) : (\n        element\n    );\n};\n"],"names":["Tooltip","withTooltip","element","tooltip","props","pointerEventsNone","tooltipProps","placement","Content","style","pointerEvents","undefined","Trigger"],"mappings":";AAAA,SAASA,OAAO,QAAsB,uBAAuB;AAG7D,OAAO,MAAMC,cAAc,CACvBC,SACAC,SACAC;IAMA,MAAM,EAAEC,iBAAiB,EAAE,GAAGC,cAAc,GAAGF,kBAAAA,mBAAAA,QAAS,CAAC;IAEzD,OAAOD,wBACH,MAACH;QAAQO,WAAU;QAAU,GAAGD,YAAY;;0BACxC,KAACN,QAAQQ,OAAO;gBAACC,OAAOJ,oBAAoB;oBAAEK,eAAe;gBAAO,IAAIC;0BACnER;;0BAEL,KAACH,QAAQY,OAAO;0BAAEV;;;SAGtBA;AAER,EAAE"}
+{"version":3,"sources":["../../../src/components/titan-layout/with-tooltip.tsx"],"sourcesContent":["import { Tooltip, TooltipProps } from '@servicetitan/anvil2';\nimport { ReactElement } from 'react';\n\nexport const withTooltip = (\n    element: ReactElement,\n    tooltip: string | undefined,\n    props?: {\n        placement?: TooltipProps['placement'];\n        key?: string;\n        pointerEventsNone?: boolean;\n        delay?: number;\n    }\n) => {\n    const { pointerEventsNone, ...tooltipProps } = props ?? {};\n\n    return tooltip ? (\n        <Tooltip placement=\"bottom\" {...tooltipProps}>\n            <Tooltip.Content style={pointerEventsNone ? { pointerEvents: 'none' } : undefined}>\n                {tooltip}\n            </Tooltip.Content>\n            <Tooltip.Trigger>{element}</Tooltip.Trigger>\n        </Tooltip>\n    ) : (\n        element\n    );\n};\n"],"names":["Tooltip","withTooltip","element","tooltip","props","pointerEventsNone","tooltipProps","placement","Content","style","pointerEvents","undefined","Trigger"],"mappings":";AAAA,SAASA,OAAO,QAAsB,uBAAuB;AAG7D,OAAO,MAAMC,cAAc,CACvBC,SACAC,SACAC;IAOA,MAAM,EAAEC,iBAAiB,EAAE,GAAGC,cAAc,GAAGF,kBAAAA,mBAAAA,QAAS,CAAC;IAEzD,OAAOD,wBACH,MAACH;QAAQO,WAAU;QAAU,GAAGD,YAAY;;0BACxC,KAACN,QAAQQ,OAAO;gBAACC,OAAOJ,oBAAoB;oBAAEK,eAAe;gBAAO,IAAIC;0BACnER;;0BAEL,KAACH,QAAQY,OAAO;0BAAEV;;;SAGtBA;AAER,EAAE"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/navigation",
-    "version": "13.1.1",
+    "version": "13.1.3",
     "description": "Navigation components",
     "repository": {
         "type": "git",
@@ -42,5 +42,5 @@
         "less": true,
         "webpack": false
     },
-    "gitHead": "79f451413bbafe82c68ae2d554477395166c66c7"
+    "gitHead": "cd08e467dfda5ea17418691ad361a858f3163e17"
 }

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

@@ -34,7 +34,6 @@ export const LayoutHeaderDark: FC<LayoutHeaderStackedProps> = ({
     isMobile,
     navigationMainItems,
     navigationOverflowItems,
-    hasNotifications,
     logo,
     profile,
     right,
@@ -42,8 +41,7 @@ export const LayoutHeaderDark: FC<LayoutHeaderStackedProps> = ({
     rightClassName,
     center,
     centerClassName,
-    hasBurger,
-    onBurgerClick,
+    burger,
     ...rest
 }) => {
     return center ? (
@@ -60,11 +58,9 @@ export const LayoutHeaderDark: FC<LayoutHeaderStackedProps> = ({
                 center={center}
                 centerClassName={centerClassName}
                 isMobile={isMobile}
-                hasNotifications={hasNotifications}
                 logo={logo}
                 profile={profile}
-                onBurgerClick={onBurgerClick}
-                hasBurger={hasBurger}
+                burger={burger}
                 data-cy="header-navigation-top"
             />
 
@@ -93,11 +89,9 @@ export const LayoutHeaderDark: FC<LayoutHeaderStackedProps> = ({
             }
             centerClassName={centerClassName}
             isMobile={isMobile}
-            hasNotifications={hasNotifications}
             logo={logo}
             profile={profile}
-            onBurgerClick={onBurgerClick}
-            hasBurger={hasBurger}
+            burger={burger}
             {...rest}
         />
     );

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

@@ -42,7 +42,8 @@ export function LayoutHeaderNavigationLink({
             flashing={flashing}
             navigationComponent={NavigationComponent}
         />,
-        tooltip
+        tooltip,
+        { pointerEventsNone: true }
     );
 }
 
@@ -77,6 +78,7 @@ export function LayoutHeaderNavigationTrigger({
             {...rest}
             flashing={flashing}
         />,
-        tooltip
+        tooltip,
+        { pointerEventsNone: true }
     );
 }

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

@@ -1,11 +1,11 @@
 import SvgBurgerMenu from '@servicetitan/anvil2/assets/icons/material/round/menu.svg';
 import classNames from 'classnames';
-import { ComponentPropsWithoutRef, FC, MouseEvent, ReactElement, ReactNode } from 'react';
+import { ComponentPropsWithoutRef, FC, ReactElement, ReactNode } from 'react';
+import { TitanLayoutTriggerProps } from './interface';
 import { LayoutPlacementContext } from './layout-context';
 import { LayoutHeaderNavigationTrigger } from './layout-header-links';
 import * as Styles from './layout-header.module.less';
 import { LayoutLogo, TitanLayoutLogoProps, isLogoCustom } from './layout-logo';
-import { withTooltip } from './with-tooltip';
 
 export type LayoutHeaderProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'> & {
     right?: ReactNode;
@@ -22,10 +22,7 @@ export type LayoutHeaderProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'
 
     isMobile: boolean;
     variant: 'light' | 'dark';
-    hasNotifications: boolean;
-    hasBurger: boolean;
-    burgerTooltip?: string;
-    onBurgerClick?: (e: MouseEvent<never>) => void;
+    burger?: Partial<TitanLayoutTriggerProps>;
 };
 
 export const LayoutHeader: FC<LayoutHeaderProps> = ({
@@ -36,24 +33,21 @@ export const LayoutHeader: FC<LayoutHeaderProps> = ({
     center,
     centerClassName,
     isMobile,
-    hasNotifications,
     logo,
     profile,
     variant,
-    hasBurger,
-    burgerTooltip,
-    onBurgerClick,
+    burger,
+
     ...rest
 }) => {
-    const burgerElement = hasBurger && (
+    const burgerElement = !!burger && (
         <div className={Styles.burger} tabIndex={-1}>
             <LayoutHeaderNavigationTrigger
+                {...burger}
                 id="burger"
                 title=""
                 icon={SvgBurgerMenu}
                 iconActive={undefined}
-                onClick={onBurgerClick}
-                tag={{ value: hasNotifications }}
             />
         </div>
     );
@@ -72,13 +66,7 @@ export const LayoutHeader: FC<LayoutHeaderProps> = ({
                 {...rest}
             >
                 <div className={Styles.heTopLeft}>
-                    {burgerElement &&
-                        (burgerTooltip
-                            ? withTooltip(burgerElement, burgerTooltip, {
-                                  placement: 'bottom-end',
-                                  pointerEventsNone: true,
-                              })
-                            : burgerElement)}
+                    {burgerElement}
                     <LayoutLogo {...logo} />
                 </div>
 

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

@@ -323,7 +323,7 @@ export const InternalSideNavigationGroup: FC<
                             data-cy="nav-item-group-expand"
                         />,
                         submenuExpanded ? 'Hide Submenu' : 'View Submenu',
-                        { placement: 'right' }
+                        { placement: 'right', delay: 1000 }
                     )}
                 </div>
             </div>

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

@@ -20,9 +20,9 @@
     position: fixed;
     max-width: 400px;
     width: 0;
-    height: 100vh;
+    height: 100%;
     top: 0;
-    left: -100vh;
+    left: -100vw;
     z-index: 991;
 
     -webkit-transition: width 200ms ease-in-out;

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

@@ -223,13 +223,21 @@ const useLayoutProps = (args: LayoutContentArgs): TitanLayoutProps => {
     };
 };
 
-const Content = (args: LayoutContentArgs) => {
+const Content = (args: LayoutContentArgs & { stickyHeader?: boolean }) => {
     const [info, setInfo] = useState('');
     useEffect(() => {
         setInfo(new Date().toLocaleTimeString());
     }, []);
     return (
         <Fragment>
+            {!!args.stickyHeader && (
+                <div
+                    className="w-100 p-4 bg-white m-l--3 m-t--3"
+                    style={{ position: 'sticky', top: 'var(--nav-offset-top)' }}
+                >
+                    sticky header
+                </div>
+            )}
             <LocationInfo className="m-b-3" />
             <div className="m-b-3">component rendered - {info}</div>
             <div className="m-b-3">rerendered - {new Date().toLocaleTimeString()}</div>
@@ -327,7 +335,7 @@ export const ContentLegacy = (args: LayoutContentArgs) => (
             className="p-3"
             style={{ position: 'absolute', width: 'calc(100% - var(--nav-offset-left))' }}
         >
-            <Content {...args} />
+            <Content {...args} stickyHeader />
         </div>
     </TitanLayout>
 );

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

@@ -23,7 +23,7 @@ import {
     TitanLayoutContextType,
     TitanLayoutSidebarContextType,
 } from './layout-context';
-import { LayoutHeader } from './layout-header';
+import { LayoutHeader, LayoutHeaderProps } from './layout-header';
 import { LayoutHeaderDark } from './layout-header-dark';
 import { TitanLayoutLogoProps } from './layout-logo';
 import { LayoutSidebar } from './layout-sidebar';
@@ -258,19 +258,10 @@ function TitanLayoutComponent({
     }, [view, minContentWidth, breakpoint.width]);
 
     const contentStyles = useMemo(() => {
-        if (view.isAnvil2) {
+        if (view.isAnvil2 || view.isLegacy) {
             return offsetTopStyles;
         }
-
-        if (view.isLegacy) {
-            return {
-                ...(limitContentWidth
-                    ? { display: 'flex', flexDirection: 'column', minHeight: '100vh' }
-                    : {}),
-                ...offsetTopStyles,
-            };
-        }
-    }, [view, offsetTopStyles, limitContentWidth]);
+    }, [view, offsetTopStyles]);
 
     const layoutClass = view.isLegacy
         ? Styles.layoutLegacy
@@ -278,6 +269,38 @@ function TitanLayoutComponent({
           ? Styles.layoutAnvil1
           : Styles.layoutAnvil2;
 
+    const burgerProps: LayoutHeaderProps['burger'] = useMemo(() => {
+        if (!hasTopBar) {
+            return undefined;
+        }
+
+        if (isMobile) {
+            return {
+                onClick: onBurgerClick,
+                tag: { value: hasNotifications || hasMenuNotifications },
+            };
+        }
+
+        if (navVariant === 'left') {
+            return {
+                'onClick': onBurgerClick,
+                'tooltip': state?.navCollapsed ? 'Expand' : 'Collapse',
+                'data-pendo': 'navigation-left-options',
+                'data-cy': 'navigation-left-options',
+            };
+        }
+
+        return undefined;
+    }, [
+        isMobile,
+        hasTopBar,
+        navVariant,
+        state?.navCollapsed,
+        onBurgerClick,
+        hasNotifications,
+        hasMenuNotifications,
+    ]);
+
     return (
         <LayoutContext.Provider value={context}>
             <LayoutPlacementContext.Provider value="unset">
@@ -315,18 +338,7 @@ function TitanLayoutComponent({
                                     </Fragment>
                                 }
                                 isMobile={isMobile}
-                                hasNotifications={
-                                    isMobile && (hasNotifications || hasMenuNotifications)
-                                }
-                                hasBurger={hasSideBar}
-                                burgerTooltip={
-                                    isMobile
-                                        ? undefined
-                                        : state?.navCollapsed
-                                          ? 'Expand'
-                                          : 'Collapse'
-                                }
-                                onBurgerClick={onBurgerClick}
+                                burger={burgerProps}
                             />
                         ) : (
                             <LayoutHeaderDark
@@ -342,9 +354,7 @@ function TitanLayoutComponent({
                                     </Fragment>
                                 }
                                 isMobile={isMobile}
-                                hasNotifications={hasNotifications || hasMenuNotifications}
-                                onBurgerClick={onBurgerClick}
-                                hasBurger={isMobile}
+                                burger={burgerProps}
                                 navigationMainItems={navigationMainItems}
                                 navigationOverflowItems={navigationOverflowItems}
                             />
@@ -493,11 +503,7 @@ const LayoutContentLegacy: FC<{
         [minWidth]
     );
 
-    return (
-        <div className={minWidth ? 'of-x-auto flex-basis-0 flex-grow-1' : undefined}>
-            <div style={minWidth ? innerContentStyles : undefined}>{children}</div>
-        </div>
-    );
+    return <div style={minWidth ? innerContentStyles : undefined}>{children}</div>;
 };
 
 export const TitanLayout = Object.assign(TitanLayoutComponent, {

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

@@ -8,6 +8,7 @@ export const withTooltip = (
         placement?: TooltipProps['placement'];
         key?: string;
         pointerEventsNone?: boolean;
+        delay?: number;
     }
 ) => {
     const { pointerEventsNone, ...tooltipProps } = props ?? {};