@servicetitan/navigation 11.1.2 → 12.0.1

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/titan-layout/titan-layout.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport {\n    CSSProperties,\n    ComponentPropsWithoutRef,\n    FC,\n    Fragment,\n    ReactElement,\n    ReactNode,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { NavigationItemData } from '../../utils/navigation';\nimport { DefaultNavLinkComponent, NavLinkComponentProps } from '../../utils/navigation-context';\nimport { useTitanBreakpoint } from '../../utils/use-breakpoint';\nimport { TitanLayoutState } from './interface';\nimport {\n    LayoutContext,\n    LayoutPlacementContext,\n    TitanLayoutContextType,\n    TitanLayoutSidebarContextType,\n} from './layout-context';\nimport { LayoutHeader } from './layout-header';\nimport { LayoutHeaderDark } from './layout-header-dark';\nimport { TitanLayoutLogoProps } from './layout-logo';\nimport { LayoutSidebar } from './layout-sidebar';\nimport { TitanLayoutSidebarLink, TitanLayoutSidebarTrigger } from './layout-sidebar-links';\nimport { InternalSideNavigationTrigger } from './layout-sidebar-links-internal';\nimport { useNotificationsState } from './notifications-context';\nimport * as Styles from './titan-layout.module.less';\n\nexport type TitanLayoutProps = Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'style'> & {\n    /** layout appearance */\n    appearance?: 'legacy' | 'anvil1' | 'anvil2';\n\n    /** layout navigation variant (left by default) */\n    navVariant?: 'left' | 'top';\n\n    /** layout's content */\n    children?: ReactNode;\n\n    /** show only content without side and top bars */\n    contentOnly?: boolean;\n\n    /** component used for navigation */\n    navigationComponent?: FC<NavLinkComponentProps>;\n\n    /** data for main navigation links */\n    navigationMainItems?: NavigationItemData[];\n\n    /** data for overflow navigation links (used only with top variant) */\n    navigationOverflowItems?: NavigationItemData[];\n\n    /** logo props */\n    logo?: TitanLayoutLogoProps;\n\n    state?: TitanLayoutState;\n    onStateChange?: (state: TitanLayoutState) => void;\n\n    header?: ReactElement;\n    top?: ReactElement;\n    sideTop?: ReactElement[];\n    profile?: ReactElement;\n    extraLinks?: ReactElement;\n    extraLinksTop?: ReactElement;\n    extraText?: string;\n    minContentWidth?: number;\n};\n\nconst defaultSidebarContext: TitanLayoutSidebarContextType = {\n    styles: {\n        popoverContent: {\n            '--background-color-strong': '#24323C',\n            'color': 'var(--color-white)',\n        } as CSSProperties,\n    },\n};\n\nconst useAppearance = (appearance: TitanLayoutProps['appearance']) =>\n    useMemo(() => {\n        const isLegacy = appearance === 'legacy';\n        const isAnvil1 = appearance === 'anvil1';\n        const isAnvil2 = appearance === 'anvil2';\n\n        return {\n            isLegacy,\n            isAnvil1,\n            isAnvil2,\n            isSequent: isLegacy || isAnvil2,\n        };\n    }, [appearance]);\n\nconst TitanLayoutComponent: FC<TitanLayoutProps> = ({\n    appearance = 'anvil2',\n    navVariant = 'left',\n    id,\n    children,\n    contentOnly,\n    navigationComponent,\n    header,\n    top,\n    profile,\n    state,\n    logo,\n    onStateChange,\n    navigationMainItems,\n    navigationOverflowItems,\n    extraLinks,\n    extraLinksTop,\n    extraText,\n    minContentWidth,\n    sideTop,\n}) => {\n    const breakpoint = useTitanBreakpoint();\n    const context: TitanLayoutContextType = useMemo(\n        () => ({\n            NavigationComponent: navigationComponent ?? DefaultNavLinkComponent,\n            breakpoint,\n            isTitanLayout: true,\n            sidebar: defaultSidebarContext,\n        }),\n        [navigationComponent, breakpoint]\n    );\n    const view = useAppearance(appearance);\n    const [mobileDrawerOpened, setMobileDrawerOpened] = useState(false);\n    const { hasNotifications, NotificationsContextProvider } = useNotificationsState();\n    const [offsetTopStyles, setOffsetTopStyles] = useState<object>({});\n    const updateIndicatorsHeight = useCallback((offset: number) => {\n        setOffsetTopStyles({\n            '--content-offset-top': `calc(var(--nav-offset-top) + ${offset}px)`,\n        });\n    }, []);\n\n    const isMobile = breakpoint.isMobile;\n    const hasSideBar =\n        !contentOnly &&\n        (navVariant === 'left' || (navVariant === 'top' && isMobile)) &&\n        (!!navigationMainItems?.length || !!sideTop?.length);\n    const hasTopBar = !contentOnly;\n\n    useEffect(() => {\n        if (view.isAnvil1) {\n            const bodyClassName = 'of-hidden-i';\n            document.body.classList.add(bodyClassName);\n            return () => document.body.classList.remove(bodyClassName);\n        }\n    }, [view.isAnvil1]);\n\n    const onBurgerClick = useCallback((e: MouseEvent) => {\n        setMobileDrawerOpened(true);\n        e.stopPropagation();\n    }, []);\n\n    const onBarExpandChange = useCallback(\n        (expanded: boolean) => {\n            if (isMobile) {\n                setMobileDrawerOpened(false);\n            } else {\n                onStateChange?.({ navCollapsed: !expanded });\n            }\n        },\n        [onStateChange, isMobile]\n    );\n    const onSubmenuExpandChange = useCallback(\n        (id: string, expanded: boolean) => {\n            onStateChange?.({\n                navCollapsed: state?.navCollapsed ?? false,\n                submenuExpanded: expanded ? id : undefined,\n            });\n        },\n        [state, onStateChange]\n    );\n    const sidebarNavItems = useMemo(() => {\n        if (!hasSideBar) {\n            return undefined;\n        }\n\n        if (navVariant === 'left') {\n            return navigationMainItems;\n        }\n\n        return [...(navigationMainItems ?? []), ...(navigationOverflowItems ?? [])];\n    }, [hasSideBar, navigationMainItems, navigationOverflowItems, navVariant]);\n\n    const hasMenuNotifications = useMemo(() => {\n        try {\n            return (\n                sidebarNavItems?.some(item => {\n                    if (item.counter || item.tag?.value) {\n                        return true;\n                    } else if (item.submenu) {\n                        return item.submenu.groups.some(group =>\n                            group.links.some(link => !!link.counter || !!link.tag?.value)\n                        );\n                    }\n                    return false;\n                }) ?? false\n            );\n        } catch {\n            return false;\n        }\n    }, [sidebarNavItems]);\n\n    const limitContentWidth = useMemo(() => {\n        if (view.isAnvil2 || !minContentWidth) {\n            return undefined;\n        }\n\n        if (breakpoint.width < minContentWidth) {\n            return minContentWidth;\n        }\n    }, [view, minContentWidth, breakpoint.width]);\n\n    const contentStyles = useMemo(() => {\n        if (view.isAnvil2) {\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={hasNotifications || hasMenuNotifications}\n                                onBurgerClick={onBurgerClick}\n                            />\n                        ) : (\n                            <LayoutHeaderDark\n                                className={Styles.top}\n                                logo={logo}\n                                profile={isMobile ? undefined : profile}\n                                center={top}\n                                rightText={isMobile ? undefined : extraText}\n                                right={\n                                    <Fragment>\n                                        {extraLinksTop}\n                                        {!isMobile && extraLinks}\n                                    </Fragment>\n                                }\n                                isMobile={isMobile}\n                                hasNotifications={hasNotifications || hasMenuNotifications}\n                                onBurgerClick={onBurgerClick}\n                                navigationMainItems={navigationMainItems}\n                                navigationOverflowItems={navigationOverflowItems}\n                            />\n                        ))}\n\n                    {hasSideBar && (\n                        <NotificationsContextProvider>\n                            <LayoutSidebar\n                                className={Styles.side}\n                                mobile={breakpoint.isMobile}\n                                barExpanded={!state?.navCollapsed}\n                                onBarExpandChange={onBarExpandChange}\n                                submenuExpanded={state?.submenuExpanded}\n                                onSubmenuExpandChange={onSubmenuExpandChange}\n                                drawerOpened={mobileDrawerOpened}\n                                onDrawerOpenChange={setMobileDrawerOpened}\n                                top={sideTop}\n                                mainItems={sidebarNavItems}\n                                navigationComponent={context.NavigationComponent}\n                                bottom={\n                                    isMobile ? (\n                                        <Fragment>\n                                            {profile}\n                                            {extraLinks}\n                                            {!!extraText && (\n                                                <InternalSideNavigationTrigger\n                                                    id=\"__extra_text\"\n                                                    title={extraText}\n                                                    submenuExpanded={undefined}\n                                                    dataPrefix=\"navigation-extra-text\"\n                                                    tag={undefined}\n                                                    icon={undefined}\n                                                    iconActive={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: TitanLayoutSidebarLink,\n    Trigger: TitanLayoutSidebarTrigger,\n});\n"],"names":["classNames","Fragment","useCallback","useEffect","useMemo","useRef","useState","DefaultNavLinkComponent","useTitanBreakpoint","LayoutContext","LayoutPlacementContext","LayoutHeader","LayoutHeaderDark","LayoutSidebar","TitanLayoutSidebarLink","TitanLayoutSidebarTrigger","InternalSideNavigationTrigger","useNotificationsState","Styles","defaultSidebarContext","styles","popoverContent","useAppearance","appearance","isLegacy","isAnvil1","isAnvil2","isSequent","TitanLayoutComponent","navVariant","id","children","contentOnly","navigationComponent","header","top","profile","state","logo","onStateChange","navigationMainItems","navigationOverflowItems","extraLinks","extraLinksTop","extraText","minContentWidth","sideTop","breakpoint","context","NavigationComponent","isTitanLayout","sidebar","view","mobileDrawerOpened","setMobileDrawerOpened","hasNotifications","NotificationsContextProvider","offsetTopStyles","setOffsetTopStyles","updateIndicatorsHeight","offset","isMobile","hasSideBar","length","hasTopBar","bodyClassName","document","body","classList","add","remove","onBurgerClick","e","stopPropagation","onBarExpandChange","expanded","navCollapsed","onSubmenuExpandChange","submenuExpanded","undefined","sidebarNavItems","hasMenuNotifications","some","item","counter","tag","value","submenu","groups","group","links","link","limitContentWidth","width","contentStyles","display","flexDirection","minHeight","layoutClass","layoutLegacy","layoutAnvil1","layoutAnvil2","Provider","div","className","layout","layoutMobile","layoutDesktop","layoutTopLight","layoutTopNav","layoutNavSlim","layoutNavWide","style","topPlaceholder","variant","center","rightText","right","side","mobile","barExpanded","drawerOpened","onDrawerOpenChange","mainItems","bottom","title","dataPrefix","icon","iconActive","TitanLayoutHeaderObserved","heightChange","LayoutContentAnvil1","minWidth","LayoutContentLegacy","ref","current","updatePosition","pos","getBoundingClientRect","height","observer","ResizeObserver","observe","disconnect","contentHeader","data-cy","TitanLayoutHeader","innerContentStyles","overflowX","content","position","TitanLayout","Object","assign","Link","Trigger"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/titan-layout/titan-layout.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport {\n    CSSProperties,\n    ComponentPropsWithoutRef,\n    FC,\n    Fragment,\n    ReactElement,\n    ReactNode,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { NavigationItemData } from '../../utils/navigation';\nimport { DefaultNavLinkComponent, NavLinkComponentProps } from '../../utils/navigation-context';\nimport { useTitanBreakpoint } from '../../utils/use-breakpoint';\nimport { TitanLayoutState } from './interface';\nimport {\n    LayoutContext,\n    LayoutPlacementContext,\n    TitanLayoutContextType,\n    TitanLayoutSidebarContextType,\n} from './layout-context';\nimport { LayoutHeader } from './layout-header';\nimport { LayoutHeaderDark } from './layout-header-dark';\nimport { TitanLayoutLogoProps } from './layout-logo';\nimport { LayoutSidebar } from './layout-sidebar';\nimport { TitanLayoutSidebarLink, TitanLayoutSidebarTrigger } from './layout-sidebar-links';\nimport { InternalSideNavigationTrigger } from './layout-sidebar-links-internal';\nimport { useNotificationsState } from './notifications-context';\nimport * as Styles from './titan-layout.module.less';\n\nexport type TitanLayoutProps = Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'style'> & {\n    /** layout appearance */\n    appearance?: 'legacy' | 'anvil1' | 'anvil2';\n\n    /** layout navigation variant (left by default) */\n    navVariant?: 'left' | 'top';\n\n    /** layout's content */\n    children?: ReactNode;\n\n    /** show only content without side and top bars */\n    contentOnly?: boolean;\n\n    /** component used for navigation */\n    navigationComponent?: FC<NavLinkComponentProps>;\n\n    /** data for main navigation links */\n    navigationMainItems?: NavigationItemData[];\n\n    /** data for overflow navigation links (used only with top variant) */\n    navigationOverflowItems?: NavigationItemData[];\n\n    /** logo props */\n    logo?: TitanLayoutLogoProps;\n\n    state?: TitanLayoutState;\n    onStateChange?: (state: TitanLayoutState) => void;\n\n    header?: ReactElement;\n    top?: ReactElement;\n    sideTop?: ReactElement[];\n    profile?: ReactElement;\n    extraLinks?: ReactElement;\n    extraLinksTop?: ReactElement;\n    extraText?: string;\n    minContentWidth?: number;\n};\n\nconst defaultSidebarContext: TitanLayoutSidebarContextType = {\n    styles: {\n        popoverContent: {\n            '--background-color-strong': '#24323C',\n            'color': 'var(--color-white)',\n        } as CSSProperties,\n    },\n};\n\nconst useAppearance = (appearance: TitanLayoutProps['appearance']) =>\n    useMemo(() => {\n        const isLegacy = appearance === 'legacy';\n        const isAnvil1 = appearance === 'anvil1';\n        const isAnvil2 = appearance === 'anvil2';\n\n        return {\n            isLegacy,\n            isAnvil1,\n            isAnvil2,\n            isSequent: isLegacy || isAnvil2,\n        };\n    }, [appearance]);\n\nconst TitanLayoutComponent: FC<TitanLayoutProps> = ({\n    appearance = 'anvil2',\n    navVariant = 'left',\n    id,\n    children,\n    contentOnly,\n    navigationComponent,\n    header,\n    top,\n    profile,\n    state,\n    logo,\n    onStateChange,\n    navigationMainItems,\n    navigationOverflowItems,\n    extraLinks,\n    extraLinksTop,\n    extraText,\n    minContentWidth,\n    sideTop,\n}) => {\n    const breakpoint = useTitanBreakpoint();\n    const context: TitanLayoutContextType = useMemo(\n        () => ({\n            NavigationComponent: navigationComponent ?? DefaultNavLinkComponent,\n            breakpoint,\n            isTitanLayout: true,\n            sidebar: defaultSidebarContext,\n        }),\n        [navigationComponent, breakpoint]\n    );\n    const view = useAppearance(appearance);\n    const [mobileDrawerOpened, setMobileDrawerOpened] = useState(false);\n    const { hasNotifications, NotificationsContextProvider } = useNotificationsState();\n    const [offsetTopStyles, setOffsetTopStyles] = useState<object>({});\n    const updateIndicatorsHeight = useCallback((offset: number) => {\n        setOffsetTopStyles({\n            '--content-offset-top': `calc(var(--nav-offset-top) + ${offset}px)`,\n        });\n    }, []);\n\n    const isMobile = breakpoint.isMobile;\n    const hasSideBar =\n        !contentOnly &&\n        (navVariant === 'left' || (navVariant === 'top' && isMobile)) &&\n        (!!navigationMainItems?.length || !!sideTop?.length);\n    const hasTopBar = !contentOnly;\n\n    useEffect(() => {\n        if (view.isAnvil1) {\n            const bodyClassName = 'of-hidden-i';\n            document.body.classList.add(bodyClassName);\n            return () => document.body.classList.remove(bodyClassName);\n        }\n    }, [view.isAnvil1]);\n\n    const onBurgerClick = useCallback((e: MouseEvent) => {\n        setMobileDrawerOpened(true);\n        e.stopPropagation();\n    }, []);\n\n    const onBarExpandChange = useCallback(\n        (expanded: boolean) => {\n            if (isMobile) {\n                setMobileDrawerOpened(false);\n            } else {\n                onStateChange?.({ navCollapsed: !expanded });\n            }\n        },\n        [onStateChange, isMobile]\n    );\n    const onSubmenuExpandChange = useCallback(\n        (id: string, expanded: boolean) => {\n            onStateChange?.({\n                navCollapsed: state?.navCollapsed ?? false,\n                submenuExpanded: expanded ? id : undefined,\n            });\n        },\n        [state, onStateChange]\n    );\n    const sidebarNavItems = useMemo(() => {\n        if (!hasSideBar) {\n            return undefined;\n        }\n\n        if (navVariant === 'left') {\n            return navigationMainItems;\n        }\n\n        return [...(navigationMainItems ?? []), ...(navigationOverflowItems ?? [])];\n    }, [hasSideBar, navigationMainItems, navigationOverflowItems, navVariant]);\n\n    const hasMenuNotifications = useMemo(() => {\n        try {\n            return (\n                sidebarNavItems?.some(item => {\n                    if (item.counter || item.tag?.value) {\n                        return true;\n                    } else if (item.submenu) {\n                        return item.submenu.groups.some(group =>\n                            group.links.some(link => !!link.counter || !!link.tag?.value)\n                        );\n                    }\n                    return false;\n                }) ?? false\n            );\n        } catch {\n            return false;\n        }\n    }, [sidebarNavItems]);\n\n    const limitContentWidth = useMemo(() => {\n        if (view.isAnvil2 || !minContentWidth) {\n            return undefined;\n        }\n\n        if (breakpoint.width < minContentWidth) {\n            return minContentWidth;\n        }\n    }, [view, minContentWidth, breakpoint.width]);\n\n    const contentStyles = useMemo(() => {\n        if (view.isAnvil2) {\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={hasNotifications || hasMenuNotifications}\n                                onBurgerClick={onBurgerClick}\n                            />\n                        ) : (\n                            <LayoutHeaderDark\n                                className={Styles.top}\n                                logo={logo}\n                                profile={isMobile ? undefined : profile}\n                                center={top}\n                                rightText={isMobile ? undefined : extraText}\n                                right={\n                                    <Fragment>\n                                        {extraLinksTop}\n                                        {!isMobile && extraLinks}\n                                    </Fragment>\n                                }\n                                isMobile={isMobile}\n                                hasNotifications={hasNotifications || hasMenuNotifications}\n                                onBurgerClick={onBurgerClick}\n                                navigationMainItems={navigationMainItems}\n                                navigationOverflowItems={navigationOverflowItems}\n                            />\n                        ))}\n\n                    {hasSideBar && (\n                        <NotificationsContextProvider>\n                            <LayoutSidebar\n                                className={Styles.side}\n                                mobile={breakpoint.isMobile}\n                                barExpanded={!state?.navCollapsed}\n                                onBarExpandChange={onBarExpandChange}\n                                submenuExpanded={state?.submenuExpanded}\n                                onSubmenuExpandChange={onSubmenuExpandChange}\n                                drawerOpened={mobileDrawerOpened}\n                                onDrawerOpenChange={setMobileDrawerOpened}\n                                top={sideTop}\n                                mainItems={sidebarNavItems}\n                                navigationComponent={context.NavigationComponent}\n                                bottom={\n                                    isMobile ? (\n                                        <Fragment>\n                                            {profile}\n                                            {extraLinks}\n                                            {!!extraText && (\n                                                <InternalSideNavigationTrigger\n                                                    id=\"--extra-text\"\n                                                    title={extraText}\n                                                    submenuExpanded={undefined}\n                                                    tag={undefined}\n                                                    icon={undefined}\n                                                    iconActive={undefined}\n                                                />\n                                            )}\n                                        </Fragment>\n                                    ) : undefined\n                                }\n                            />\n                        </NotificationsContextProvider>\n                    )}\n\n                    {view.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: TitanLayoutSidebarLink,\n    Trigger: TitanLayoutSidebarTrigger,\n});\n"],"names":["classNames","Fragment","useCallback","useEffect","useMemo","useRef","useState","DefaultNavLinkComponent","useTitanBreakpoint","LayoutContext","LayoutPlacementContext","LayoutHeader","LayoutHeaderDark","LayoutSidebar","TitanLayoutSidebarLink","TitanLayoutSidebarTrigger","InternalSideNavigationTrigger","useNotificationsState","Styles","defaultSidebarContext","styles","popoverContent","useAppearance","appearance","isLegacy","isAnvil1","isAnvil2","isSequent","TitanLayoutComponent","navVariant","id","children","contentOnly","navigationComponent","header","top","profile","state","logo","onStateChange","navigationMainItems","navigationOverflowItems","extraLinks","extraLinksTop","extraText","minContentWidth","sideTop","breakpoint","context","NavigationComponent","isTitanLayout","sidebar","view","mobileDrawerOpened","setMobileDrawerOpened","hasNotifications","NotificationsContextProvider","offsetTopStyles","setOffsetTopStyles","updateIndicatorsHeight","offset","isMobile","hasSideBar","length","hasTopBar","bodyClassName","document","body","classList","add","remove","onBurgerClick","e","stopPropagation","onBarExpandChange","expanded","navCollapsed","onSubmenuExpandChange","submenuExpanded","undefined","sidebarNavItems","hasMenuNotifications","some","item","counter","tag","value","submenu","groups","group","links","link","limitContentWidth","width","contentStyles","display","flexDirection","minHeight","layoutClass","layoutLegacy","layoutAnvil1","layoutAnvil2","Provider","div","className","layout","layoutMobile","layoutDesktop","layoutTopLight","layoutTopNav","layoutNavSlim","layoutNavWide","style","topPlaceholder","variant","center","rightText","right","side","mobile","barExpanded","drawerOpened","onDrawerOpenChange","mainItems","bottom","title","icon","iconActive","TitanLayoutHeaderObserved","heightChange","LayoutContentAnvil1","minWidth","LayoutContentLegacy","ref","current","updatePosition","pos","getBoundingClientRect","height","observer","ResizeObserver","observe","disconnect","contentHeader","data-cy","TitanLayoutHeader","innerContentStyles","overflowX","content","position","TitanLayout","Object","assign","Link","Trigger"],"mappings":"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"}

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

@@ -22,6 +22,7 @@ export declare const TitanLayoutLegacyTop: (args: LayoutContentArgs) => import("
 export declare const TitanLayoutAnvil1: (args: LayoutContentArgs) => import("react/jsx-runtime").JSX.Element;
 export declare const TitanLayoutAnvil1TopNav: (args: LayoutContentArgs) => import("react/jsx-runtime").JSX.Element;
 export declare const TitanLayoutAnvil1Top: (args: LayoutContentArgs) => import("react/jsx-runtime").JSX.Element;
+export declare const TitanLayoutAnvil1TopOverflow: (args: LayoutContentArgs) => import("react/jsx-runtime").JSX.Element;
 export declare const TitanLayoutAnvil2: (args: LayoutContentArgs) => import("react/jsx-runtime").JSX.Element;
 export declare const TitanLayoutAnvil2TopNav: (args: LayoutContentArgs) => import("react/jsx-runtime").JSX.Element;
 export declare const TitanLayoutAnvil2Top: (args: LayoutContentArgs) => import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"titan-layout.stories.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/titan-layout.stories.tsx"],"names":[],"mappings":"AAsBA,UAAU,iBAAiB;IACvB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;CACrB;;;;;;UAgBQ,iBAAiB;;AAd1B,wBAeE;AA6QF,eAAO,MAAM,iBAAiB,GAAI,MAAM,iBAAiB,4CASxD,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,MAAM,iBAAiB,4CAS9D,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,MAAM,iBAAiB,4CAS3D,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,MAAM,iBAAiB,4CAMxD,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,MAAM,iBAAiB,4CAM9D,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,MAAM,iBAAiB,4CAM3D,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,MAAM,iBAAiB,4CAQxD,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,MAAM,iBAAiB,4CAQ9D,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,MAAM,iBAAiB,4CAQ3D,CAAC"}
+{"version":3,"file":"titan-layout.stories.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/titan-layout.stories.tsx"],"names":[],"mappings":"AAsBA,UAAU,iBAAiB;IACvB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;CACrB;;;;;;UAgBQ,iBAAiB;;AAd1B,wBAeE;AA6QF,eAAO,MAAM,iBAAiB,GAAI,MAAM,iBAAiB,4CASxD,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,MAAM,iBAAiB,4CAS9D,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,MAAM,iBAAiB,4CAS3D,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,MAAM,iBAAiB,4CAMxD,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,MAAM,iBAAiB,4CAM9D,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,MAAM,iBAAiB,4CAY3D,CAAC;AAEF,eAAO,MAAM,4BAA4B,GAAI,MAAM,iBAAiB,4CAMnE,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,MAAM,iBAAiB,4CAQxD,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,MAAM,iBAAiB,4CAQ9D,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,MAAM,iBAAiB,4CAQ3D,CAAC"}

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

@@ -1,6 +1,6 @@
 import { TooltipProps } from '@servicetitan/anvil2';
 import { ReactElement } from 'react';
-export declare const withTooltip: (element: ReactElement, tooltip: string | undefined, props: {
+export declare const withTooltip: (element: ReactElement, tooltip: string | undefined, props?: {
     placement?: TooltipProps["placement"];
     key?: string;
 }) => import("react/jsx-runtime").JSX.Element;

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,OAAO;IACH,SAAS,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC;IACtC,GAAG,CAAC,EAAE,MAAM,CAAC;CAChB,4CASA,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;CAChB,4CASA,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    }\n) =>\n    tooltip ? (\n        <Tooltip placement=\"bottom\" {...props}>\n            <Tooltip.Content>{tooltip}</Tooltip.Content>\n            <Tooltip.Trigger>{element}</Tooltip.Trigger>\n        </Tooltip>\n    ) : (\n        element\n    );\n"],"names":["Tooltip","withTooltip","element","tooltip","props","placement","Content","Trigger"],"mappings":";AAAA,SAASA,OAAO,QAAsB,uBAAuB;AAG7D,OAAO,MAAMC,cAAc,CACvBC,SACAC,SACAC,QAKAD,wBACI,MAACH;QAAQK,WAAU;QAAU,GAAGD,KAAK;;0BACjC,KAACJ,QAAQM,OAAO;0BAAEH;;0BAClB,KAACH,QAAQO,OAAO;0BAAEL;;;SAGtBA,QACF"}
+{"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    }\n) =>\n    tooltip ? (\n        <Tooltip placement=\"bottom\" {...props}>\n            <Tooltip.Content>{tooltip}</Tooltip.Content>\n            <Tooltip.Trigger>{element}</Tooltip.Trigger>\n        </Tooltip>\n    ) : (\n        element\n    );\n"],"names":["Tooltip","withTooltip","element","tooltip","props","placement","Content","Trigger"],"mappings":";AAAA,SAASA,OAAO,QAAsB,uBAAuB;AAG7D,OAAO,MAAMC,cAAc,CACvBC,SACAC,SACAC,QAKAD,wBACI,MAACH;QAAQK,WAAU;QAAU,GAAGD,KAAK;;0BACjC,KAACJ,QAAQM,OAAO;0BAAEH;;0BAClB,KAACH,QAAQO,OAAO;0BAAEL;;;SAGtBA,QACF"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/navigation",
-    "version": "11.1.2",
+    "version": "12.0.1",
     "description": "Navigation components",
     "repository": {
         "type": "git",
@@ -42,5 +42,5 @@
         "less": true,
         "webpack": false
     },
-    "gitHead": "c0642952ccc58829c0d57db99b5098485c216fe9"
+    "gitHead": "e2203627fce8344ea7b26536a80d70bca4065620"
 }

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

@@ -1,10 +1,12 @@
-import { ButtonCompound, Icon, Menu } from '@servicetitan/anvil2';
+import { ButtonCompound, Icon, Menu, MenuProps } from '@servicetitan/anvil2';
 import SvgMoreVert from '@servicetitan/anvil2/assets/icons/material/round/more_vert.svg';
 import classNames from 'classnames';
 import { FC, useCallback, useEffect, useRef, useState } from 'react';
 import { NavigationItemData } from '../../utils/navigation';
+import { NavigationComponentProps } from './interface-internal';
+import { useTitanLayoutContext } from './layout-context';
 import { LayoutHeader, LayoutHeaderProps } from './layout-header';
-import { LayoutHeaderNavigationLink } from './layout-header-links';
+import { InternalLayoutHeaderNavigationLink } from './layout-header-links-internal';
 import * as Styles from './layout-header.module.less';
 import { withTooltip } from './with-tooltip';
 
@@ -107,6 +109,7 @@ const LayoutHeaderNav: FC<LayoutHeaderNavProps> = ({ className, mainItems, overf
     const navigationRef = useRef<HTMLDivElement>(null);
     const forceUpdate = useForceUpdate();
     const [minimized, setMinimized] = useState(MinimizedState.Calculating);
+    const { NavigationComponent } = useTitanLayoutContext();
 
     useEffect(() => {
         const handleResize = () => {
@@ -120,7 +123,8 @@ const LayoutHeaderNav: FC<LayoutHeaderNavProps> = ({ className, mainItems, overf
 
     const updateIsMinimized = () => {
         if (containerRef.current && navigationRef.current) {
-            if (navigationRef.current.clientWidth + 16 > containerRef.current.clientWidth) {
+            const widthGap = 16 + (overflowItems?.length ? 32 : 0);
+            if (navigationRef.current.clientWidth + widthGap > containerRef.current.clientWidth) {
                 setMinimized(MinimizedState.Minimized);
             } else if (minimized === MinimizedState.Calculating) {
                 setMinimized(MinimizedState.Full);
@@ -150,37 +154,55 @@ const LayoutHeaderNav: FC<LayoutHeaderNavProps> = ({ className, mainItems, overf
             <div ref={navigationRef} className={classNames(Styles.headerNavigation)}>
                 {mainItems?.map(item =>
                     withTooltip(
-                        <LayoutHeaderNavigationLink
+                        <InternalLayoutHeaderNavigationLink
                             {...item}
                             label={isMinimized ? undefined : item.title}
                             key={item.id}
+                            navigationComponent={NavigationComponent}
                         />,
                         isMinimized ? item.title : undefined,
                         { key: item.id }
                     )
                 )}
             </div>
-            {!!overflowItems?.length && <LayoutHeaderNavOverflow items={overflowItems} />}
+            {!!overflowItems?.length && (
+                <LayoutHeaderNavOverflow
+                    items={overflowItems}
+                    navigationComponent={NavigationComponent}
+                />
+            )}
         </div>
     );
 };
 
-const LayoutHeaderNavOverflow: FC<{
-    items: NavigationItemData[];
-}> = ({ items }) => {
+const LayoutHeaderNavOverflowTrigger: MenuProps['trigger'] = props => (
+    <ButtonCompound
+        {...props}
+        className={Styles.headerNavigationOverflowTrigger}
+        data-cy="navigation-overflow-trigger"
+    >
+        <Icon svg={SvgMoreVert} size="medium" />
+    </ButtonCompound>
+);
+
+const LayoutHeaderNavOverflow: FC<
+    {
+        items: NavigationItemData[];
+    } & NavigationComponentProps
+> = ({ items, navigationComponent }) => {
     return (
-        <Menu
-            trigger={props => (
-                <ButtonCompound {...props} className={Styles.headerNavigationOverflowTrigger}>
-                    <Icon svg={SvgMoreVert} size="medium" />
-                </ButtonCompound>
-            )}
-            contentClassName={Styles.headerNavigationOverflow}
-            placement="bottom-end"
-        >
-            {items.map(item => (
-                <LayoutHeaderNavigationLink {...item} label={item.title} key={item.id} />
-            ))}
+        <Menu trigger={LayoutHeaderNavOverflowTrigger} placement="bottom-end">
+            <div data-cy="navigation-overflow-content" className={Styles.headerNavigationOverflow}>
+                {items.map(item => (
+                    <InternalLayoutHeaderNavigationLink
+                        {...item}
+                        label={item.title}
+                        key={item.id}
+                        navigationComponent={navigationComponent}
+                        isOverflow
+                    />
+                ))}
+            </div>
         </Menu>
     );
 };

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

@@ -0,0 +1,151 @@
+import { Icon, IconProps } from '@servicetitan/anvil2';
+import classNames from 'classnames';
+import { FC, Fragment } from 'react';
+import {
+    HeaderNavigationLinkProps,
+    HeaderNavigationTriggerProps,
+} from '../../utils/navigation-legacy';
+import { getCounterTag } from '../../utils/side-nav';
+import { CounterTag, CounterTagProps } from '../counter-tag';
+// use v1 tooltips due to bug with v2 in monolith
+import { NavigationComponentProps } from './interface-internal';
+import * as Styles from './layout-header.module.less';
+
+/** Content for navigation items */
+const InternalHeaderNavigationItemContent: FC<{
+    tag?: CounterTagProps;
+    counterClassName?: string;
+    icon: IconProps['svg'] | undefined;
+    iconActive?: IconProps['svg'];
+    label?: string;
+    labelClassName?: string;
+}> = ({ counterClassName, icon, iconActive, label, labelClassName, tag }) => {
+    return (
+        <Fragment>
+            {!!icon && <Icon svg={icon} className={Styles.navigationIcon} />}
+            {!!iconActive && (
+                <Icon
+                    svg={iconActive}
+                    className={classNames(Styles.navigationIcon, Styles.navigationIconActive)}
+                />
+            )}
+
+            {!!label && (
+                <span
+                    className={classNames(Styles.navigationItemLabel, labelClassName)}
+                    data-cy="nav-item-label"
+                >
+                    {label}
+                </span>
+            )}
+
+            {!!tag && (
+                <CounterTag
+                    data={tag}
+                    className={classNames(Styles.navigationItemCounter, counterClassName)}
+                    longClassName={Styles.navigationItemCounterLong}
+                />
+            )}
+        </Fragment>
+    );
+};
+
+/** Navigation extra item with link */
+export const InternalLayoutHeaderNavigationLink: FC<
+    HeaderNavigationLinkProps & NavigationComponentProps & { isOverflow?: boolean }
+> = ({
+    id,
+    to,
+    hint,
+    tooltip,
+    className,
+    counter,
+    icon,
+    iconActive,
+    iconClassName,
+    iconName,
+    iconComponent,
+    isActive,
+    isOverflow,
+    label,
+    labelClassName,
+    tag,
+    target,
+    title,
+    navigationComponent: NavigationComponent,
+    ...rest
+}) => {
+    return (
+        <NavigationComponent
+            data-cy={`navigation-item-${id}`}
+            data-pendo={`navigation-item-${id}`}
+            {...rest}
+            key={id}
+            to={to}
+            className={classNames(
+                isOverflow ? Styles.navigationLinkOverflow : Styles.navigationLink,
+                className,
+                {
+                    [Styles.navigationItemActive]: isActive === true,
+                    [Styles.navigationItemIconState]: !!icon && !!iconActive,
+                }
+            )}
+            isActive={typeof isActive === 'function' ? isActive : undefined}
+            activeClassName={Styles.navigationItemActive}
+            target={target}
+        >
+            <InternalHeaderNavigationItemContent
+                tag={getCounterTag(counter, tag)}
+                icon={icon}
+                iconActive={iconActive}
+                label={label}
+                labelClassName={labelClassName}
+            />
+        </NavigationComponent>
+    );
+};
+
+/** Navigation extra item with icon button */
+export const InternalLayoutHeaderNavigationTrigger: FC<HeaderNavigationTriggerProps> = ({
+    id,
+    className,
+    counter,
+    icon,
+    iconActive,
+    iconName,
+    isActive,
+    hint,
+    label,
+    labelClassName,
+    tag,
+    tooltip,
+    title,
+    titleClassName,
+    ...rest
+}) => {
+    return (
+        <div
+            data-cy={`navigation-trigger-${id}`}
+            data-pendo={`navigation-trigger-${id}`}
+            {...rest}
+            title={hint}
+            className={classNames(
+                Styles.navigationLink,
+                {
+                    [Styles.navigationItemActive]: isActive === true,
+                    [Styles.navigationItemIconState]: !!icon && !!iconActive,
+                },
+                'cursor-pointer',
+                className
+            )}
+        >
+            <InternalHeaderNavigationItemContent
+                tag={getCounterTag(counter, tag)}
+                icon={icon}
+                iconActive={iconActive}
+                label={label}
+                labelClassName={labelClassName}
+            />
+        </div>
+    );
+};

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

@@ -1,145 +1,29 @@
-import { Icon, IconProps } from '@servicetitan/anvil2';
-import classNames from 'classnames';
-import { FC, Fragment } from 'react';
+import { FC } from 'react';
 import {
     HeaderNavigationLinkProps,
     HeaderNavigationTriggerProps,
 } from '../../utils/navigation-legacy';
-import { getCounterTag } from '../../utils/side-nav';
-import { CounterTag, CounterTagProps } from '../counter-tag';
-// use v1 tooltips due to bug with v2 in monolith
-import { withTooltip } from '../header-navigation/with-tooltip';
 import { useTitanLayoutContext } from './layout-context';
-import * as Styles from './layout-header.module.less';
-
-/** Content for navigation items */
-const HeaderNavigationItemContent: FC<{
-    tag?: CounterTagProps;
-    counterClassName?: string;
-    icon: IconProps['svg'] | undefined;
-    iconActive?: IconProps['svg'];
-    label?: string;
-    labelClassName?: string;
-}> = ({ counterClassName, icon, iconActive, label, labelClassName, tag }) => {
-    return (
-        <Fragment>
-            {!!icon && <Icon svg={icon} className={Styles.navigationIcon} />}
-            {!!iconActive && (
-                <Icon
-                    svg={iconActive}
-                    className={classNames(Styles.navigationIcon, Styles.navigationIconActive)}
-                />
-            )}
-
-            {!!label && (
-                <span className={classNames(Styles.navigationItemLabel, labelClassName)}>
-                    {label}
-                </span>
-            )}
-
-            {!!tag && (
-                <CounterTag
-                    data={tag}
-                    className={classNames(Styles.navigationItemCounter, counterClassName)}
-                    longClassName={Styles.navigationItemCounterLong}
-                />
-            )}
-        </Fragment>
-    );
-};
+import {
+    InternalLayoutHeaderNavigationLink,
+    InternalLayoutHeaderNavigationTrigger,
+} from './layout-header-links-internal';
+import { withTooltip } from './with-tooltip';
 
 /** Navigation extra item with link */
-export const LayoutHeaderNavigationLink: FC<HeaderNavigationLinkProps> = ({
-    id,
-    to,
-    hint,
-    tooltip,
-    className,
-    counter,
-    icon,
-    iconActive,
-    iconClassName,
-    iconComponent,
-    iconName,
-    isActive,
-    label,
-    labelClassName,
-    tag,
-    target,
-    title,
-    ...rest
-}) => {
+export const LayoutHeaderNavigationLink: FC<HeaderNavigationLinkProps> = ({ tooltip, ...rest }) => {
     const { NavigationComponent } = useTitanLayoutContext();
 
     return withTooltip(
-        <NavigationComponent
-            data-cy={`navigation-link-${id}`}
-            data-pendo={`navigation-link-${id}`}
-            {...rest}
-            key={id}
-            to={to}
-            className={classNames(Styles.navigationLink, className, {
-                [Styles.navigationItemActive]: isActive === true,
-                [Styles.navigationItemIconState]: !!icon && !!iconActive,
-            })}
-            isActive={typeof isActive === 'function' ? isActive : undefined}
-            activeClassName={Styles.navigationItemActive}
-            target={target}
-        >
-            <HeaderNavigationItemContent
-                tag={getCounterTag(counter, tag)}
-                icon={icon}
-                iconActive={iconActive}
-                label={label}
-                labelClassName={labelClassName}
-            />
-        </NavigationComponent>,
+        <InternalLayoutHeaderNavigationLink {...rest} navigationComponent={NavigationComponent} />,
         tooltip
     );
 };
 
 /** Navigation extra item with icon button */
 export const LayoutHeaderNavigationTrigger: FC<HeaderNavigationTriggerProps> = ({
-    id,
-    className,
-    counter,
-    icon,
-    iconActive,
-    iconName,
-    isActive,
-    hint,
-    label,
-    labelClassName,
-    tag,
     tooltip,
-    title,
-    titleClassName,
     ...rest
 }) => {
-    return withTooltip(
-        <div
-            data-cy={`navigation-trigger-${id}`}
-            data-pendo={`navigation-trigger-${id}`}
-            {...rest}
-            title={hint}
-            className={classNames(
-                Styles.navigationLink,
-                {
-                    [Styles.navigationItemActive]: isActive === true,
-                    [Styles.navigationItemIconState]: !!icon && !!iconActive,
-                },
-                'cursor-pointer',
-                className
-            )}
-        >
-            <HeaderNavigationItemContent
-                tag={getCounterTag(counter, tag)}
-                icon={icon}
-                iconActive={iconActive}
-                label={label}
-                labelClassName={labelClassName}
-            />
-        </div>,
-        tooltip
-    );
+    return withTooltip(<InternalLayoutHeaderNavigationTrigger {...rest} />, tooltip);
 };