@servicetitan/navigation 13.0.1 → 13.1.0-canary.259.cd6c17f.0

package/dist/components/profile-dropdown/profile-dropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"profile-dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/profile-dropdown/profile-dropdown.tsx"],"names":[],"mappings":"AAOA,OAAO,EAEH,EAAE,EAOL,MAAM,OAAO,CAAC;AAOf,OAAO,EACH,wBAAwB,EACxB,oBAAoB,EACpB,2BAA2B,EAE9B,MAAM,aAAa,CAAC;AAuHrB,iBAAS,6BAA6B,CAAC,EACnC,QAAQ,EACR,SAAS,EACT,OAAO,EACP,EAAE,EACF,GAAG,EACH,IAAI,EACJ,OAAO,EACP,OAAO,EACP,GAAG,IAAI,EACV,EAAE,2BAA2B,2CA8B7B;AAID,iBAAS,0BAA0B,CAAC,EAChC,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,EAAE,EACF,OAAO,EACP,GAAG,EACH,MAAM,EACN,IAAI,EACJ,EAAE,EACF,OAAO,EACP,OAAO,EACP,GAAG,IAAI,EACV,EAAE,wBAAwB,2CA8C1B;AAED,iBAAS,+BAA+B,CAAC,EACrC,QAAQ,EAER,SAAS,EACT,OAAO,EACP,SAAS,EACT,MAAM,EACN,KAAK,EACL,OAAO,EACP,MAAM,EAEN,GAAG,IAAI,EACV,EAAE,oBAAoB,2CA2EtB;AAED,eAAO,MAAM,sBAAsB;;;;CAIjC,CAAC"}
+{"version":3,"file":"profile-dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/profile-dropdown/profile-dropdown.tsx"],"names":[],"mappings":"AAOA,OAAO,EAEH,EAAE,EAOL,MAAM,OAAO,CAAC;AAOf,OAAO,EACH,wBAAwB,EACxB,oBAAoB,EACpB,2BAA2B,EAE9B,MAAM,aAAa,CAAC;AAwHrB,iBAAS,6BAA6B,CAAC,EACnC,QAAQ,EACR,SAAS,EACT,OAAO,EACP,EAAE,EACF,GAAG,EACH,IAAI,EACJ,OAAO,EACP,OAAO,EACP,GAAG,IAAI,EACV,EAAE,2BAA2B,2CA8B7B;AAID,iBAAS,0BAA0B,CAAC,EAChC,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,EAAE,EACF,OAAO,EACP,GAAG,EACH,MAAM,EACN,IAAI,EACJ,EAAE,EACF,OAAO,EACP,OAAO,EACP,GAAG,IAAI,EACV,EAAE,wBAAwB,2CA8C1B;AAED,iBAAS,+BAA+B,CAAC,EACrC,QAAQ,EAER,SAAS,EACT,OAAO,EACP,SAAS,EACT,MAAM,EACN,KAAK,EACL,OAAO,EACP,MAAM,EAEN,GAAG,IAAI,EACV,EAAE,oBAAoB,2CA2EtB;AAED,eAAO,MAAM,sBAAsB;;;;CAIjC,CAAC"}

package/dist/components/profile-dropdown/profile-dropdown.js

@@ -32,6 +32,7 @@ const ProfileDropdownTrigger = ({ info, imageSrc, avatarBadge, badge, className,
     return /*#__PURE__*/ _jsxs("div", {
         "data-cy": "profile-dropdown-trigger",
         "data-pendo": "profile-dropdown-trigger",
+        tabIndex: 0,
         ...rest,
         className: classNames('d-f align-items-center cursor-pointer position-relative p-x-1 p-y-half', 'profile-dropdown-trigger', Styles.triggerContainer, {
             [Styles.triggerContainerHintArrow]: hintArrow

package/dist/components/profile-dropdown/profile-dropdown.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/profile-dropdown/profile-dropdown.tsx"],"sourcesContent":["import { Icon } from '@servicetitan/anvil2';\nimport SvgExpandLess from '@servicetitan/anvil2/assets/icons/material/round/expand_less.svg';\nimport SvgExpandMore from '@servicetitan/anvil2/assets/icons/material/round/expand_more.svg';\nimport SvgAccountActive from '@servicetitan/anvil2/assets/icons/st/gnav_account_active.svg';\nimport SvgAccountInactive from '@servicetitan/anvil2/assets/icons/st/gnav_account_inactive.svg';\nimport { BodyText, Popover } from '@servicetitan/design-system';\nimport classNames from 'classnames';\nimport {\n    ComponentPropsWithoutRef,\n    FC,\n    MouseEvent,\n    MouseEventHandler,\n    useCallback,\n    useEffect,\n    useMemo,\n    useState,\n} from 'react';\n\nimport { CounterTagData, CounterTagValue } from '../../utils/counter-tag';\nimport { getCounterTag } from '../../utils/side-nav';\nimport { CounterTag } from '../counter-tag';\nimport { useTitanLayoutContext } from '../titan-layout';\nimport { withTooltip } from '../titan-layout/with-tooltip';\nimport {\n    ProfileDropdownLinkProps,\n    ProfileDropdownProps,\n    ProfileDropdownSectionProps,\n    ProfileDropdownTriggerProps,\n} from './interface';\nimport * as Styles from './profile-dropdown.module.less';\n\nconst ProfileDropdownTrigger: FC<\n    ProfileDropdownTriggerProps & {\n        hintArrow?: boolean;\n        open: boolean;\n        onClick: ComponentPropsWithoutRef<'div'>['onClick'];\n    }\n> = ({ info, imageSrc, avatarBadge, badge, className, hintArrow, open, onClick, ...rest }) => {\n    const [avatarSource, setAvatarSource] = useState(imageSrc ?? '');\n    const [avatarSourceError, setAvatarSourceError] = useState(false);\n\n    useEffect(() => {\n        const src = imageSrc ?? '';\n\n        if (src === avatarSource) {\n            return;\n        }\n\n        setAvatarSource(src);\n        setAvatarSourceError(false);\n    }, [imageSrc, avatarSource]);\n\n    const onAvatarError = useCallback(() => {\n        setAvatarSourceError(true);\n    }, []);\n\n    return (\n        <div\n            data-cy=\"profile-dropdown-trigger\"\n            data-pendo=\"profile-dropdown-trigger\"\n            {...rest}\n            className={classNames(\n                'd-f align-items-center cursor-pointer position-relative p-x-1 p-y-half',\n                'profile-dropdown-trigger',\n                Styles.triggerContainer,\n                {\n                    [Styles.triggerContainerHintArrow]: hintArrow,\n                },\n                className\n            )}\n            onClick={onClick}\n        >\n            {avatarSource && !avatarSourceError ? (\n                <img\n                    src={avatarSource}\n                    className={classNames(Styles.profileImage, 'profile-dropdown-image')}\n                    onError={onAvatarError}\n                    alt=\"user dropdown menu\"\n                />\n            ) : (\n                <Icon\n                    className=\"c-inherit-i\"\n                    size=\"large\"\n                    svg={open ? SvgAccountActive : SvgAccountInactive}\n                />\n            )}\n\n            {!!info && (\n                <div className={Styles.info}>\n                    <BodyText\n                        bold\n                        title={info.title}\n                        className=\"t-truncate c-inherit\"\n                        size=\"xsmall\"\n                    >\n                        {info.title}\n                    </BodyText>\n                    <BodyText\n                        title={info.text}\n                        className=\"t-truncate c-neutral-70 tt-uppercase\"\n                        size=\"xsmall\"\n                    >\n                        {info.text}\n                    </BodyText>\n                </div>\n            )}\n\n            <Icon\n                svg={open ? SvgExpandLess : SvgExpandMore}\n                className={classNames(Styles.expandIcon, 'c-inherit-i')}\n                size=\"small\"\n            />\n\n            {!!avatarBadge && (\n                <div\n                    className={classNames(\n                        Styles.avatarBadge,\n                        avatarBadge === true ? 'bg-blue-500' : `bg-${avatarBadge}`\n                    )}\n                />\n            )}\n            {!!badge && (\n                <span\n                    className={classNames(\n                        Styles.badge,\n                        badge.content ? Styles.badgeWithContent : Styles.badgeNoContent,\n                        badge.className\n                    )}\n                >\n                    {badge.content}\n                </span>\n            )}\n        </div>\n    );\n};\n\nconst useTag = (counter?: CounterTagValue, tag?: CounterTagData) =>\n    useMemo(() => {\n        const data = getCounterTag(counter, tag);\n\n        return data ? (\n            <div className={Styles.counterWrapper}>\n                <CounterTag className={Styles.counter} data={data} />\n            </div>\n        ) : undefined;\n    }, [counter, tag]);\n\nfunction DesktopProfileDropdownSection({\n    children,\n    className,\n    counter,\n    id,\n    tag,\n    text,\n    tooltip,\n    onClick,\n    ...rest\n}: ProfileDropdownSectionProps) {\n    const clickHandler: MouseEventHandler<never> = e => {\n        if (onClick) {\n            onClick(e);\n        } else {\n            e.stopPropagation();\n        }\n    };\n\n    const tagElement = useTag(counter, tag);\n\n    return withTooltip(\n        <div\n            className={classNames(\n                Styles.dropdownSection,\n                tagElement && Styles.dropdownSectionWithCounter,\n                !!onClick && Styles.dropdownLink,\n                className\n            )}\n            onClick={clickHandler}\n            data-cy={`profile-dropdown-section-${id}`}\n            data-pendo={`profile-dropdown-section-${id}`}\n            {...rest}\n        >\n            {children}\n            {tagElement}\n        </div>,\n        tooltip,\n        { placement: 'left' }\n    );\n}\n\nconst DesktopProfileDropdownDivider: FC = Popover.Divider;\n\nfunction DesktopProfileDropdownLink({\n    children,\n    className,\n    external,\n    id,\n    counter,\n    tag,\n    target,\n    text,\n    to,\n    tooltip,\n    onClick,\n    ...rest\n}: ProfileDropdownLinkProps) {\n    const { NavigationComponent } = useTitanLayoutContext();\n\n    const isExternalLink = external ?? to?.startsWith('http');\n\n    const tagElement = useTag(counter, tag);\n\n    return withTooltip(\n        isExternalLink ? (\n            <a\n                className={classNames(\n                    Styles.dropdownSection,\n                    tagElement && Styles.dropdownSectionWithCounter,\n                    Styles.dropdownLink,\n                    className\n                )}\n                href={to}\n                target={target}\n                data-cy={`profile-dropdown-link-${id}`}\n                data-pendo={`profile-dropdown-link-${id}`}\n                {...rest}\n            >\n                {children}\n                {tagElement}\n            </a>\n        ) : (\n            <NavigationComponent\n                className={classNames(\n                    Styles.dropdownSection,\n                    Styles.dropdownLink,\n                    { [Styles.dropdownSectionWithCounter]: !!tagElement },\n                    className\n                )}\n                target={target}\n                to={to}\n                data-cy={`profile-dropdown-link-${id}`}\n                data-pendo={`profile-dropdown-link-${id}`}\n                {...rest}\n            >\n                {children}\n                {tagElement}\n            </NavigationComponent>\n        ),\n        tooltip,\n        { placement: 'left' }\n    );\n}\n\nfunction DesktopProfileDropdownComponent({\n    children,\n\n    direction,\n    trigger,\n    hintPopup,\n    portal,\n    width,\n    onClose,\n    onOpen,\n\n    ...rest\n}: ProfileDropdownProps) {\n    const [open, setOpen] = useState(false);\n    const handleClose = useCallback(() => {\n        setOpen(false);\n        onClose?.();\n    }, [onClose]);\n    const handleOpen = useCallback(() => {\n        setOpen(true);\n        onOpen?.();\n    }, [onOpen]);\n    const onTriggerClick = useCallback(\n        (e: MouseEvent) => {\n            e.stopPropagation();\n            setOpen(!open);\n\n            if (open) {\n                onClose?.();\n            } else {\n                onOpen?.();\n            }\n        },\n        [open, onOpen, onClose]\n    );\n    const hintShown = !!hintPopup && !open;\n    const HintComponent = hintPopup?.content;\n\n    const triggerElement = (\n        <ProfileDropdownTrigger\n            {...trigger}\n            onClick={children ? onTriggerClick : undefined}\n            hintArrow={hintShown}\n            open={open}\n        />\n    );\n\n    return (\n        <div data-cy=\"profile-dropdown\" {...rest}>\n            {!!hintPopup && hintShown && HintComponent ? (\n                <Popover\n                    direction={direction ?? 'bl'}\n                    width={hintPopup.width ?? 'xs'}\n                    trigger={triggerElement}\n                    popoverContentClassName={Styles.hint}\n                    onClickOutside={hintPopup?.onClose}\n                    open\n                >\n                    <div className={classNames(Styles.hintContent, hintPopup.className)}>\n                        <HintComponent openProfile={handleOpen} />\n                    </div>\n                </Popover>\n            ) : (\n                <Popover\n                    direction={direction ?? 'bl'}\n                    width={width ?? 'xs'}\n                    trigger={triggerElement}\n                    open={open}\n                    portal={portal}\n                    onClickOutside={handleClose}\n                    className={Styles.dropdown}\n                    popoverContentClassName={classNames(\n                        Styles.dropdownContent,\n                        Styles.dropdownContentBottomLeft\n                    )}\n                >\n                    <div\n                        className={Styles.dropdownContentWrapper}\n                        onClick={handleClose}\n                        data-cy=\"profile-dropdown-content\"\n                    >\n                        {children}\n                    </div>\n                </Popover>\n            )}\n        </div>\n    );\n}\n\nexport const DesktopProfileDropdown = Object.assign(DesktopProfileDropdownComponent, {\n    Divider: DesktopProfileDropdownDivider,\n    Link: DesktopProfileDropdownLink,\n    Section: DesktopProfileDropdownSection,\n});\n"],"names":["Icon","SvgExpandLess","SvgExpandMore","SvgAccountActive","SvgAccountInactive","BodyText","Popover","classNames","useCallback","useEffect","useMemo","useState","getCounterTag","CounterTag","useTitanLayoutContext","withTooltip","Styles","ProfileDropdownTrigger","info","imageSrc","avatarBadge","badge","className","hintArrow","open","onClick","rest","avatarSource","setAvatarSource","avatarSourceError","setAvatarSourceError","src","onAvatarError","div","data-cy","data-pendo","triggerContainer","triggerContainerHintArrow","img","profileImage","onError","alt","size","svg","bold","title","text","expandIcon","span","content","badgeWithContent","badgeNoContent","useTag","counter","tag","data","counterWrapper","undefined","DesktopProfileDropdownSection","children","id","tooltip","clickHandler","e","stopPropagation","tagElement","dropdownSection","dropdownSectionWithCounter","dropdownLink","placement","DesktopProfileDropdownDivider","Divider","DesktopProfileDropdownLink","external","target","to","NavigationComponent","isExternalLink","startsWith","a","href","DesktopProfileDropdownComponent","direction","trigger","hintPopup","portal","width","onClose","onOpen","setOpen","handleClose","handleOpen","onTriggerClick","hintShown","HintComponent","triggerElement","popoverContentClassName","hint","onClickOutside","hintContent","openProfile","dropdown","dropdownContent","dropdownContentBottomLeft","dropdownContentWrapper","DesktopProfileDropdown","Object","assign","Link","Section"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/profile-dropdown/profile-dropdown.tsx"],"sourcesContent":["import { Icon } from '@servicetitan/anvil2';\nimport SvgExpandLess from '@servicetitan/anvil2/assets/icons/material/round/expand_less.svg';\nimport SvgExpandMore from '@servicetitan/anvil2/assets/icons/material/round/expand_more.svg';\nimport SvgAccountActive from '@servicetitan/anvil2/assets/icons/st/gnav_account_active.svg';\nimport SvgAccountInactive from '@servicetitan/anvil2/assets/icons/st/gnav_account_inactive.svg';\nimport { BodyText, Popover } from '@servicetitan/design-system';\nimport classNames from 'classnames';\nimport {\n    ComponentPropsWithoutRef,\n    FC,\n    MouseEvent,\n    MouseEventHandler,\n    useCallback,\n    useEffect,\n    useMemo,\n    useState,\n} from 'react';\n\nimport { CounterTagData, CounterTagValue } from '../../utils/counter-tag';\nimport { getCounterTag } from '../../utils/side-nav';\nimport { CounterTag } from '../counter-tag';\nimport { useTitanLayoutContext } from '../titan-layout';\nimport { withTooltip } from '../titan-layout/with-tooltip';\nimport {\n    ProfileDropdownLinkProps,\n    ProfileDropdownProps,\n    ProfileDropdownSectionProps,\n    ProfileDropdownTriggerProps,\n} from './interface';\nimport * as Styles from './profile-dropdown.module.less';\n\nconst ProfileDropdownTrigger: FC<\n    ProfileDropdownTriggerProps & {\n        hintArrow?: boolean;\n        open: boolean;\n        onClick: ComponentPropsWithoutRef<'div'>['onClick'];\n    }\n> = ({ info, imageSrc, avatarBadge, badge, className, hintArrow, open, onClick, ...rest }) => {\n    const [avatarSource, setAvatarSource] = useState(imageSrc ?? '');\n    const [avatarSourceError, setAvatarSourceError] = useState(false);\n\n    useEffect(() => {\n        const src = imageSrc ?? '';\n\n        if (src === avatarSource) {\n            return;\n        }\n\n        setAvatarSource(src);\n        setAvatarSourceError(false);\n    }, [imageSrc, avatarSource]);\n\n    const onAvatarError = useCallback(() => {\n        setAvatarSourceError(true);\n    }, []);\n\n    return (\n        <div\n            data-cy=\"profile-dropdown-trigger\"\n            data-pendo=\"profile-dropdown-trigger\"\n            tabIndex={0}\n            {...rest}\n            className={classNames(\n                'd-f align-items-center cursor-pointer position-relative p-x-1 p-y-half',\n                'profile-dropdown-trigger',\n                Styles.triggerContainer,\n                {\n                    [Styles.triggerContainerHintArrow]: hintArrow,\n                },\n                className\n            )}\n            onClick={onClick}\n        >\n            {avatarSource && !avatarSourceError ? (\n                <img\n                    src={avatarSource}\n                    className={classNames(Styles.profileImage, 'profile-dropdown-image')}\n                    onError={onAvatarError}\n                    alt=\"user dropdown menu\"\n                />\n            ) : (\n                <Icon\n                    className=\"c-inherit-i\"\n                    size=\"large\"\n                    svg={open ? SvgAccountActive : SvgAccountInactive}\n                />\n            )}\n\n            {!!info && (\n                <div className={Styles.info}>\n                    <BodyText\n                        bold\n                        title={info.title}\n                        className=\"t-truncate c-inherit\"\n                        size=\"xsmall\"\n                    >\n                        {info.title}\n                    </BodyText>\n                    <BodyText\n                        title={info.text}\n                        className=\"t-truncate c-neutral-70 tt-uppercase\"\n                        size=\"xsmall\"\n                    >\n                        {info.text}\n                    </BodyText>\n                </div>\n            )}\n\n            <Icon\n                svg={open ? SvgExpandLess : SvgExpandMore}\n                className={classNames(Styles.expandIcon, 'c-inherit-i')}\n                size=\"small\"\n            />\n\n            {!!avatarBadge && (\n                <div\n                    className={classNames(\n                        Styles.avatarBadge,\n                        avatarBadge === true ? 'bg-blue-500' : `bg-${avatarBadge}`\n                    )}\n                />\n            )}\n            {!!badge && (\n                <span\n                    className={classNames(\n                        Styles.badge,\n                        badge.content ? Styles.badgeWithContent : Styles.badgeNoContent,\n                        badge.className\n                    )}\n                >\n                    {badge.content}\n                </span>\n            )}\n        </div>\n    );\n};\n\nconst useTag = (counter?: CounterTagValue, tag?: CounterTagData) =>\n    useMemo(() => {\n        const data = getCounterTag(counter, tag);\n\n        return data ? (\n            <div className={Styles.counterWrapper}>\n                <CounterTag className={Styles.counter} data={data} />\n            </div>\n        ) : undefined;\n    }, [counter, tag]);\n\nfunction DesktopProfileDropdownSection({\n    children,\n    className,\n    counter,\n    id,\n    tag,\n    text,\n    tooltip,\n    onClick,\n    ...rest\n}: ProfileDropdownSectionProps) {\n    const clickHandler: MouseEventHandler<never> = e => {\n        if (onClick) {\n            onClick(e);\n        } else {\n            e.stopPropagation();\n        }\n    };\n\n    const tagElement = useTag(counter, tag);\n\n    return withTooltip(\n        <div\n            className={classNames(\n                Styles.dropdownSection,\n                tagElement && Styles.dropdownSectionWithCounter,\n                !!onClick && Styles.dropdownLink,\n                className\n            )}\n            onClick={clickHandler}\n            data-cy={`profile-dropdown-section-${id}`}\n            data-pendo={`profile-dropdown-section-${id}`}\n            {...rest}\n        >\n            {children}\n            {tagElement}\n        </div>,\n        tooltip,\n        { placement: 'left' }\n    );\n}\n\nconst DesktopProfileDropdownDivider: FC = Popover.Divider;\n\nfunction DesktopProfileDropdownLink({\n    children,\n    className,\n    external,\n    id,\n    counter,\n    tag,\n    target,\n    text,\n    to,\n    tooltip,\n    onClick,\n    ...rest\n}: ProfileDropdownLinkProps) {\n    const { NavigationComponent } = useTitanLayoutContext();\n\n    const isExternalLink = external ?? to?.startsWith('http');\n\n    const tagElement = useTag(counter, tag);\n\n    return withTooltip(\n        isExternalLink ? (\n            <a\n                className={classNames(\n                    Styles.dropdownSection,\n                    tagElement && Styles.dropdownSectionWithCounter,\n                    Styles.dropdownLink,\n                    className\n                )}\n                href={to}\n                target={target}\n                data-cy={`profile-dropdown-link-${id}`}\n                data-pendo={`profile-dropdown-link-${id}`}\n                {...rest}\n            >\n                {children}\n                {tagElement}\n            </a>\n        ) : (\n            <NavigationComponent\n                className={classNames(\n                    Styles.dropdownSection,\n                    Styles.dropdownLink,\n                    { [Styles.dropdownSectionWithCounter]: !!tagElement },\n                    className\n                )}\n                target={target}\n                to={to}\n                data-cy={`profile-dropdown-link-${id}`}\n                data-pendo={`profile-dropdown-link-${id}`}\n                {...rest}\n            >\n                {children}\n                {tagElement}\n            </NavigationComponent>\n        ),\n        tooltip,\n        { placement: 'left' }\n    );\n}\n\nfunction DesktopProfileDropdownComponent({\n    children,\n\n    direction,\n    trigger,\n    hintPopup,\n    portal,\n    width,\n    onClose,\n    onOpen,\n\n    ...rest\n}: ProfileDropdownProps) {\n    const [open, setOpen] = useState(false);\n    const handleClose = useCallback(() => {\n        setOpen(false);\n        onClose?.();\n    }, [onClose]);\n    const handleOpen = useCallback(() => {\n        setOpen(true);\n        onOpen?.();\n    }, [onOpen]);\n    const onTriggerClick = useCallback(\n        (e: MouseEvent) => {\n            e.stopPropagation();\n            setOpen(!open);\n\n            if (open) {\n                onClose?.();\n            } else {\n                onOpen?.();\n            }\n        },\n        [open, onOpen, onClose]\n    );\n    const hintShown = !!hintPopup && !open;\n    const HintComponent = hintPopup?.content;\n\n    const triggerElement = (\n        <ProfileDropdownTrigger\n            {...trigger}\n            onClick={children ? onTriggerClick : undefined}\n            hintArrow={hintShown}\n            open={open}\n        />\n    );\n\n    return (\n        <div data-cy=\"profile-dropdown\" {...rest}>\n            {!!hintPopup && hintShown && HintComponent ? (\n                <Popover\n                    direction={direction ?? 'bl'}\n                    width={hintPopup.width ?? 'xs'}\n                    trigger={triggerElement}\n                    popoverContentClassName={Styles.hint}\n                    onClickOutside={hintPopup?.onClose}\n                    open\n                >\n                    <div className={classNames(Styles.hintContent, hintPopup.className)}>\n                        <HintComponent openProfile={handleOpen} />\n                    </div>\n                </Popover>\n            ) : (\n                <Popover\n                    direction={direction ?? 'bl'}\n                    width={width ?? 'xs'}\n                    trigger={triggerElement}\n                    open={open}\n                    portal={portal}\n                    onClickOutside={handleClose}\n                    className={Styles.dropdown}\n                    popoverContentClassName={classNames(\n                        Styles.dropdownContent,\n                        Styles.dropdownContentBottomLeft\n                    )}\n                >\n                    <div\n                        className={Styles.dropdownContentWrapper}\n                        onClick={handleClose}\n                        data-cy=\"profile-dropdown-content\"\n                    >\n                        {children}\n                    </div>\n                </Popover>\n            )}\n        </div>\n    );\n}\n\nexport const DesktopProfileDropdown = Object.assign(DesktopProfileDropdownComponent, {\n    Divider: DesktopProfileDropdownDivider,\n    Link: DesktopProfileDropdownLink,\n    Section: DesktopProfileDropdownSection,\n});\n"],"names":["Icon","SvgExpandLess","SvgExpandMore","SvgAccountActive","SvgAccountInactive","BodyText","Popover","classNames","useCallback","useEffect","useMemo","useState","getCounterTag","CounterTag","useTitanLayoutContext","withTooltip","Styles","ProfileDropdownTrigger","info","imageSrc","avatarBadge","badge","className","hintArrow","open","onClick","rest","avatarSource","setAvatarSource","avatarSourceError","setAvatarSourceError","src","onAvatarError","div","data-cy","data-pendo","tabIndex","triggerContainer","triggerContainerHintArrow","img","profileImage","onError","alt","size","svg","bold","title","text","expandIcon","span","content","badgeWithContent","badgeNoContent","useTag","counter","tag","data","counterWrapper","undefined","DesktopProfileDropdownSection","children","id","tooltip","clickHandler","e","stopPropagation","tagElement","dropdownSection","dropdownSectionWithCounter","dropdownLink","placement","DesktopProfileDropdownDivider","Divider","DesktopProfileDropdownLink","external","target","to","NavigationComponent","isExternalLink","startsWith","a","href","DesktopProfileDropdownComponent","direction","trigger","hintPopup","portal","width","onClose","onOpen","setOpen","handleClose","handleOpen","onTriggerClick","hintShown","HintComponent","triggerElement","popoverContentClassName","hint","onClickOutside","hintContent","openProfile","dropdown","dropdownContent","dropdownContentBottomLeft","dropdownContentWrapper","DesktopProfileDropdown","Object","assign","Link","Section"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"layout-header-links-internal.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-header-links-internal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEvD,OAAO,EAAE,EAAE,EAAY,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAEzD,OAAO,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AAsChE,sCAAsC;AACtC,eAAO,MAAM,kCAAkC,EAAE,EAAE,CAC/C,wBAAwB,GAAG;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,QAAQ,EAAE,OAAO,GAAG,CAAC,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,GAAG,SAAS,CAAC;IAChE,IAAI,EAAE,SAAS,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;IACnC,UAAU,EAAE,SAAS,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;IACzC,GAAG,EAAE,cAAc,GAAG,SAAS,CAAC;IAChC,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAE9B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB,CA0CJ,CAAC;AAEF,6CAA6C;AAC7C,eAAO,MAAM,qCAAqC,EAAE,EAAE,CAAC;IACnD,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,QAAQ,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,IAAI,EAAE,SAAS,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;IACnC,UAAU,EAAE,SAAS,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;IACzC,GAAG,EAAE,cAAc,GAAG,SAAS,CAAC;IAChC,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAE9B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB,CAyBA,CAAC"}
+{"version":3,"file":"layout-header-links-internal.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-header-links-internal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEvD,OAAO,EAAE,EAAE,EAAY,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAEzD,OAAO,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AAsChE,sCAAsC;AACtC,eAAO,MAAM,kCAAkC,EAAE,EAAE,CAC/C,wBAAwB,GAAG;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,QAAQ,EAAE,OAAO,GAAG,CAAC,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,GAAG,SAAS,CAAC;IAChE,IAAI,EAAE,SAAS,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;IACnC,UAAU,EAAE,SAAS,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;IACzC,GAAG,EAAE,cAAc,GAAG,SAAS,CAAC;IAChC,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAE9B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB,CA0CJ,CAAC;AAEF,6CAA6C;AAC7C,eAAO,MAAM,qCAAqC,EAAE,EAAE,CAAC;IACnD,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,QAAQ,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,IAAI,EAAE,SAAS,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;IACnC,UAAU,EAAE,SAAS,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;IACzC,GAAG,EAAE,cAAc,GAAG,SAAS,CAAC;IAChC,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAE9B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB,CA0BA,CAAC"}

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

@@ -54,6 +54,7 @@ import * as Styles from './layout-header.module.less';
     return /*#__PURE__*/ _jsx("div", {
         "data-cy": `navigation-trigger-${id}`,
         "data-pendo": `navigation-trigger-${id}`,
+        tabIndex: 0,
         ...rest,
         className: classNames(Styles.navigationLink, {
             [Styles.navigationItemActive]: isActive === true,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/titan-layout/layout-header-links-internal.tsx"],"sourcesContent":["import { Icon, IconProps } from '@servicetitan/anvil2';\nimport classNames from 'classnames';\nimport { FC, Fragment } from 'react';\nimport { CounterTagData } from '../../utils/counter-tag';\nimport { CounterTag, CounterTagProps } from '../counter-tag';\nimport { NavigationComponentProps } from './interface-internal';\nimport * as Styles from './layout-header.module.less';\n\n/** Content for navigation items */\nconst InternalHeaderNavigationItemContent: FC<{\n    tag?: CounterTagProps;\n    counterClassName?: string;\n    icon: IconProps['svg'] | undefined;\n    iconActive?: IconProps['svg'];\n    title?: string;\n}> = ({ counterClassName, icon, iconActive, title, tag }) => {\n    return (\n        <Fragment>\n            {!!icon && <Icon svg={icon} className={Styles.navigationIcon} />}\n            {!!iconActive && (\n                <Icon\n                    svg={iconActive}\n                    className={classNames(Styles.navigationIcon, Styles.navigationIconActive)}\n                />\n            )}\n\n            {!!title && (\n                <span className={Styles.navigationItemLabel} data-cy=\"nav-item-label\">\n                    {title}\n                </span>\n            )}\n\n            {!!tag && (\n                <CounterTag\n                    data={tag}\n                    className={classNames(Styles.navigationItemCounter, counterClassName)}\n                    longClassName={Styles.navigationItemCounterLong}\n                />\n            )}\n        </Fragment>\n    );\n};\n\n/** Navigation extra item with link */\nexport const InternalLayoutHeaderNavigationLink: FC<\n    NavigationComponentProps & {\n        id: string;\n        to: string;\n        title: string | undefined;\n        isActive: boolean | ((pathname: string) => boolean) | undefined;\n        icon: IconProps['svg'] | undefined;\n        iconActive: IconProps['svg'] | undefined;\n        tag: CounterTagData | undefined;\n        className: string | undefined;\n\n        isOverflow?: boolean;\n        flashing?: boolean;\n    }\n> = ({\n    id,\n    to,\n    title,\n    isActive,\n    icon,\n    iconActive,\n    tag,\n    className,\n    isOverflow,\n    flashing,\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            key={id}\n            to={to}\n            className={classNames(\n                isOverflow ? Styles.navigationLinkOverflow : Styles.navigationLink,\n                className,\n                {\n                    [Styles.navigationItemActive]: isActive === true,\n                    [Styles.navigationItemIconState]: !!icon && !!iconActive,\n                    [Styles.navigationItemFlashing]: flashing,\n                }\n            )}\n            isActive={typeof isActive === 'function' ? isActive : undefined}\n            activeClassName={Styles.navigationItemActive}\n        >\n            <InternalHeaderNavigationItemContent\n                tag={tag}\n                icon={icon}\n                iconActive={iconActive}\n                title={title}\n            />\n        </NavigationComponent>\n    );\n};\n\n/** Navigation extra item with icon button */\nexport const InternalLayoutHeaderNavigationTrigger: FC<{\n    id: string;\n    title: string | undefined;\n    isActive: boolean | undefined;\n    icon: IconProps['svg'] | undefined;\n    iconActive: IconProps['svg'] | undefined;\n    tag: CounterTagData | undefined;\n    className: string | undefined;\n\n    flashing?: boolean;\n}> = ({ id, className, flashing, icon, iconActive, isActive, tag, title, ...rest }) => {\n    return (\n        <div\n            data-cy={`navigation-trigger-${id}`}\n            data-pendo={`navigation-trigger-${id}`}\n            {...rest}\n            className={classNames(\n                Styles.navigationLink,\n                {\n                    [Styles.navigationItemActive]: isActive === true,\n                    [Styles.navigationItemIconState]: !!icon && !!iconActive,\n                    [Styles.navigationItemFlashing]: flashing,\n                },\n                'cursor-pointer',\n                className\n            )}\n        >\n            <InternalHeaderNavigationItemContent\n                tag={tag}\n                icon={icon}\n                iconActive={iconActive}\n                title={title}\n            />\n        </div>\n    );\n};\n"],"names":["Icon","classNames","Fragment","CounterTag","Styles","InternalHeaderNavigationItemContent","counterClassName","icon","iconActive","title","tag","svg","className","navigationIcon","navigationIconActive","span","navigationItemLabel","data-cy","data","navigationItemCounter","longClassName","navigationItemCounterLong","InternalLayoutHeaderNavigationLink","id","to","isActive","isOverflow","flashing","navigationComponent","NavigationComponent","rest","data-pendo","key","navigationLinkOverflow","navigationLink","navigationItemActive","navigationItemIconState","navigationItemFlashing","undefined","activeClassName","InternalLayoutHeaderNavigationTrigger","div"],"mappings":";;AAAA,SAASA,IAAI,QAAmB,uBAAuB;AACvD,OAAOC,gBAAgB,aAAa;AACpC,SAAaC,QAAQ,QAAQ,QAAQ;AAErC,SAASC,UAAU,QAAyB,iBAAiB;AAE7D,YAAYC,YAAY,8BAA8B;AAEtD,iCAAiC,GACjC,MAAMC,sCAMD,CAAC,EAAEC,gBAAgB,EAAEC,IAAI,EAAEC,UAAU,EAAEC,KAAK,EAAEC,GAAG,EAAE;IACpD,qBACI,MAACR;;YACI,CAAC,CAACK,sBAAQ,KAACP;gBAAKW,KAAKJ;gBAAMK,WAAWR,OAAOS,cAAc;;YAC3D,CAAC,CAACL,4BACC,KAACR;gBACGW,KAAKH;gBACLI,WAAWX,WAAWG,OAAOS,cAAc,EAAET,OAAOU,oBAAoB;;YAI/E,CAAC,CAACL,uBACC,KAACM;gBAAKH,WAAWR,OAAOY,mBAAmB;gBAAEC,WAAQ;0BAChDR;;YAIR,CAAC,CAACC,qBACC,KAACP;gBACGe,MAAMR;gBACNE,WAAWX,WAAWG,OAAOe,qBAAqB,EAAEb;gBACpDc,eAAehB,OAAOiB,yBAAyB;;;;AAKnE;AAEA,oCAAoC,GACpC,OAAO,MAAMC,qCAcT,CAAC,EACDC,EAAE,EACFC,EAAE,EACFf,KAAK,EACLgB,QAAQ,EACRlB,IAAI,EACJC,UAAU,EACVE,GAAG,EACHE,SAAS,EACTc,UAAU,EACVC,QAAQ,EACRC,qBAAqBC,mBAAmB,EACxC,GAAGC,MACN;IACG,qBACI,eAACD;QACGZ,WAAS,CAAC,gBAAgB,EAAEM,IAAI;QAChCQ,cAAY,CAAC,gBAAgB,EAAER,IAAI;QAClC,GAAGO,IAAI;QACRE,KAAKT;QACLC,IAAIA;QACJZ,WAAWX,WACPyB,aAAatB,OAAO6B,sBAAsB,GAAG7B,OAAO8B,cAAc,EAClEtB,WACA;YACI,CAACR,OAAO+B,oBAAoB,CAAC,EAAEV,aAAa;YAC5C,CAACrB,OAAOgC,uBAAuB,CAAC,EAAE,CAAC,CAAC7B,QAAQ,CAAC,CAACC;YAC9C,CAACJ,OAAOiC,sBAAsB,CAAC,EAAEV;QACrC;QAEJF,UAAU,OAAOA,aAAa,aAAaA,WAAWa;QACtDC,iBAAiBnC,OAAO+B,oBAAoB;qBAE5C,KAAC9B;QACGK,KAAKA;QACLH,MAAMA;QACNC,YAAYA;QACZC,OAAOA;;AAIvB,EAAE;AAEF,2CAA2C,GAC3C,OAAO,MAAM+B,wCAUR,CAAC,EAAEjB,EAAE,EAAEX,SAAS,EAAEe,QAAQ,EAAEpB,IAAI,EAAEC,UAAU,EAAEiB,QAAQ,EAAEf,GAAG,EAAED,KAAK,EAAE,GAAGqB,MAAM;IAC9E,qBACI,KAACW;QACGxB,WAAS,CAAC,mBAAmB,EAAEM,IAAI;QACnCQ,cAAY,CAAC,mBAAmB,EAAER,IAAI;QACrC,GAAGO,IAAI;QACRlB,WAAWX,WACPG,OAAO8B,cAAc,EACrB;YACI,CAAC9B,OAAO+B,oBAAoB,CAAC,EAAEV,aAAa;YAC5C,CAACrB,OAAOgC,uBAAuB,CAAC,EAAE,CAAC,CAAC7B,QAAQ,CAAC,CAACC;YAC9C,CAACJ,OAAOiC,sBAAsB,CAAC,EAAEV;QACrC,GACA,kBACAf;kBAGJ,cAAA,KAACP;YACGK,KAAKA;YACLH,MAAMA;YACNC,YAAYA;YACZC,OAAOA;;;AAIvB,EAAE"}
+{"version":3,"sources":["../../../src/components/titan-layout/layout-header-links-internal.tsx"],"sourcesContent":["import { Icon, IconProps } from '@servicetitan/anvil2';\nimport classNames from 'classnames';\nimport { FC, Fragment } from 'react';\nimport { CounterTagData } from '../../utils/counter-tag';\nimport { CounterTag, CounterTagProps } from '../counter-tag';\nimport { NavigationComponentProps } from './interface-internal';\nimport * as Styles from './layout-header.module.less';\n\n/** Content for navigation items */\nconst InternalHeaderNavigationItemContent: FC<{\n    tag?: CounterTagProps;\n    counterClassName?: string;\n    icon: IconProps['svg'] | undefined;\n    iconActive?: IconProps['svg'];\n    title?: string;\n}> = ({ counterClassName, icon, iconActive, title, tag }) => {\n    return (\n        <Fragment>\n            {!!icon && <Icon svg={icon} className={Styles.navigationIcon} />}\n            {!!iconActive && (\n                <Icon\n                    svg={iconActive}\n                    className={classNames(Styles.navigationIcon, Styles.navigationIconActive)}\n                />\n            )}\n\n            {!!title && (\n                <span className={Styles.navigationItemLabel} data-cy=\"nav-item-label\">\n                    {title}\n                </span>\n            )}\n\n            {!!tag && (\n                <CounterTag\n                    data={tag}\n                    className={classNames(Styles.navigationItemCounter, counterClassName)}\n                    longClassName={Styles.navigationItemCounterLong}\n                />\n            )}\n        </Fragment>\n    );\n};\n\n/** Navigation extra item with link */\nexport const InternalLayoutHeaderNavigationLink: FC<\n    NavigationComponentProps & {\n        id: string;\n        to: string;\n        title: string | undefined;\n        isActive: boolean | ((pathname: string) => boolean) | undefined;\n        icon: IconProps['svg'] | undefined;\n        iconActive: IconProps['svg'] | undefined;\n        tag: CounterTagData | undefined;\n        className: string | undefined;\n\n        isOverflow?: boolean;\n        flashing?: boolean;\n    }\n> = ({\n    id,\n    to,\n    title,\n    isActive,\n    icon,\n    iconActive,\n    tag,\n    className,\n    isOverflow,\n    flashing,\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            key={id}\n            to={to}\n            className={classNames(\n                isOverflow ? Styles.navigationLinkOverflow : Styles.navigationLink,\n                className,\n                {\n                    [Styles.navigationItemActive]: isActive === true,\n                    [Styles.navigationItemIconState]: !!icon && !!iconActive,\n                    [Styles.navigationItemFlashing]: flashing,\n                }\n            )}\n            isActive={typeof isActive === 'function' ? isActive : undefined}\n            activeClassName={Styles.navigationItemActive}\n        >\n            <InternalHeaderNavigationItemContent\n                tag={tag}\n                icon={icon}\n                iconActive={iconActive}\n                title={title}\n            />\n        </NavigationComponent>\n    );\n};\n\n/** Navigation extra item with icon button */\nexport const InternalLayoutHeaderNavigationTrigger: FC<{\n    id: string;\n    title: string | undefined;\n    isActive: boolean | undefined;\n    icon: IconProps['svg'] | undefined;\n    iconActive: IconProps['svg'] | undefined;\n    tag: CounterTagData | undefined;\n    className: string | undefined;\n\n    flashing?: boolean;\n}> = ({ id, className, flashing, icon, iconActive, isActive, tag, title, ...rest }) => {\n    return (\n        <div\n            data-cy={`navigation-trigger-${id}`}\n            data-pendo={`navigation-trigger-${id}`}\n            tabIndex={0}\n            {...rest}\n            className={classNames(\n                Styles.navigationLink,\n                {\n                    [Styles.navigationItemActive]: isActive === true,\n                    [Styles.navigationItemIconState]: !!icon && !!iconActive,\n                    [Styles.navigationItemFlashing]: flashing,\n                },\n                'cursor-pointer',\n                className\n            )}\n        >\n            <InternalHeaderNavigationItemContent\n                tag={tag}\n                icon={icon}\n                iconActive={iconActive}\n                title={title}\n            />\n        </div>\n    );\n};\n"],"names":["Icon","classNames","Fragment","CounterTag","Styles","InternalHeaderNavigationItemContent","counterClassName","icon","iconActive","title","tag","svg","className","navigationIcon","navigationIconActive","span","navigationItemLabel","data-cy","data","navigationItemCounter","longClassName","navigationItemCounterLong","InternalLayoutHeaderNavigationLink","id","to","isActive","isOverflow","flashing","navigationComponent","NavigationComponent","rest","data-pendo","key","navigationLinkOverflow","navigationLink","navigationItemActive","navigationItemIconState","navigationItemFlashing","undefined","activeClassName","InternalLayoutHeaderNavigationTrigger","div","tabIndex"],"mappings":";;AAAA,SAASA,IAAI,QAAmB,uBAAuB;AACvD,OAAOC,gBAAgB,aAAa;AACpC,SAAaC,QAAQ,QAAQ,QAAQ;AAErC,SAASC,UAAU,QAAyB,iBAAiB;AAE7D,YAAYC,YAAY,8BAA8B;AAEtD,iCAAiC,GACjC,MAAMC,sCAMD,CAAC,EAAEC,gBAAgB,EAAEC,IAAI,EAAEC,UAAU,EAAEC,KAAK,EAAEC,GAAG,EAAE;IACpD,qBACI,MAACR;;YACI,CAAC,CAACK,sBAAQ,KAACP;gBAAKW,KAAKJ;gBAAMK,WAAWR,OAAOS,cAAc;;YAC3D,CAAC,CAACL,4BACC,KAACR;gBACGW,KAAKH;gBACLI,WAAWX,WAAWG,OAAOS,cAAc,EAAET,OAAOU,oBAAoB;;YAI/E,CAAC,CAACL,uBACC,KAACM;gBAAKH,WAAWR,OAAOY,mBAAmB;gBAAEC,WAAQ;0BAChDR;;YAIR,CAAC,CAACC,qBACC,KAACP;gBACGe,MAAMR;gBACNE,WAAWX,WAAWG,OAAOe,qBAAqB,EAAEb;gBACpDc,eAAehB,OAAOiB,yBAAyB;;;;AAKnE;AAEA,oCAAoC,GACpC,OAAO,MAAMC,qCAcT,CAAC,EACDC,EAAE,EACFC,EAAE,EACFf,KAAK,EACLgB,QAAQ,EACRlB,IAAI,EACJC,UAAU,EACVE,GAAG,EACHE,SAAS,EACTc,UAAU,EACVC,QAAQ,EACRC,qBAAqBC,mBAAmB,EACxC,GAAGC,MACN;IACG,qBACI,eAACD;QACGZ,WAAS,CAAC,gBAAgB,EAAEM,IAAI;QAChCQ,cAAY,CAAC,gBAAgB,EAAER,IAAI;QAClC,GAAGO,IAAI;QACRE,KAAKT;QACLC,IAAIA;QACJZ,WAAWX,WACPyB,aAAatB,OAAO6B,sBAAsB,GAAG7B,OAAO8B,cAAc,EAClEtB,WACA;YACI,CAACR,OAAO+B,oBAAoB,CAAC,EAAEV,aAAa;YAC5C,CAACrB,OAAOgC,uBAAuB,CAAC,EAAE,CAAC,CAAC7B,QAAQ,CAAC,CAACC;YAC9C,CAACJ,OAAOiC,sBAAsB,CAAC,EAAEV;QACrC;QAEJF,UAAU,OAAOA,aAAa,aAAaA,WAAWa;QACtDC,iBAAiBnC,OAAO+B,oBAAoB;qBAE5C,KAAC9B;QACGK,KAAKA;QACLH,MAAMA;QACNC,YAAYA;QACZC,OAAOA;;AAIvB,EAAE;AAEF,2CAA2C,GAC3C,OAAO,MAAM+B,wCAUR,CAAC,EAAEjB,EAAE,EAAEX,SAAS,EAAEe,QAAQ,EAAEpB,IAAI,EAAEC,UAAU,EAAEiB,QAAQ,EAAEf,GAAG,EAAED,KAAK,EAAE,GAAGqB,MAAM;IAC9E,qBACI,KAACW;QACGxB,WAAS,CAAC,mBAAmB,EAAEM,IAAI;QACnCQ,cAAY,CAAC,mBAAmB,EAAER,IAAI;QACtCmB,UAAU;QACT,GAAGZ,IAAI;QACRlB,WAAWX,WACPG,OAAO8B,cAAc,EACrB;YACI,CAAC9B,OAAO+B,oBAAoB,CAAC,EAAEV,aAAa;YAC5C,CAACrB,OAAOgC,uBAAuB,CAAC,EAAE,CAAC,CAAC7B,QAAQ,CAAC,CAACC;YAC9C,CAACJ,OAAOiC,sBAAsB,CAAC,EAAEV;QACrC,GACA,kBACAf;kBAGJ,cAAA,KAACP;YACGK,KAAKA;YACLH,MAAMA;YACNC,YAAYA;YACZC,OAAOA;;;AAIvB,EAAE"}

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

@@ -9,6 +9,7 @@ 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", {
         className: Styles.burger,
+        tabIndex: -1,
         children: /*#__PURE__*/ _jsx(LayoutHeaderNavigationTrigger, {
             id: "burger",
             title: "",

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}>\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, { placement: 'bottom-end' })\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","id","title","icon","iconActive","undefined","onClick","tag","value","Provider","header","headerLight","headerDark","headerMobile","headerDesktop","headerLogoCustom","data-cy","heTopLeft","placement","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;kBACzB,cAAA,KAACvB;YACGwB,IAAG;YACHC,OAAM;YACNC,MAAM7B;YACN8B,YAAYC;YACZC,SAASV;YACTW,KAAK;gBAAEC,OAAOlB;YAAiB;;;IAK3C,qBACI,KAACd,uBAAuBiC,QAAQ;QAACD,OAAM;kBACnC,cAAA,MAACT;YACGhB,WAAWR,WACPG,OAAOgC,MAAM,EACbjB,YAAY,UAAUf,OAAOiC,WAAW,GAAGjC,OAAOkC,UAAU,EAC5DvB,WAAWX,OAAOmC,YAAY,GAAGnC,OAAOoC,aAAa,EACrDlC,aAAaW,MAAMF,aAAaX,OAAOqC,gBAAgB,EACvDhC;YAEJiC,WAAQ;YACP,GAAGnB,IAAI;;8BAER,MAACE;oBAAIhB,WAAWL,OAAOuC,SAAS;;wBAC3BnB,iBACIH,CAAAA,gBACKd,YAAYiB,eAAeH,eAAe;4BAAEuB,WAAW;wBAAa,KACpEpB,aAAY;sCACtB,KAACnB;4BAAY,GAAGY,IAAI;;;;8BAGxB,KAACQ;oBACGhB,WAAWR,WACPG,OAAOyC,WAAW,EAClB,iDACA/B;oBAEJ4B,WAAQ;8BAEP7B;;8BAEL,MAACY;oBACGhB,WAAWR,WACP,uDACAG,OAAO0C,UAAU,EACjBlC;oBAEJ8B,WAAQ;;wBAEP,CAAC,CAAC/B,2BACC,KAACc;4BAAIhB,WAAWL,OAAO2C,cAAc;4BAAEL,WAAQ;sCAC1C/B;;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, 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, { placement: 'bottom-end' })\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","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;4BAAEwB,WAAW;wBAAa,KACpErB,aAAY;sCACtB,KAACnB;4BAAY,GAAGY,IAAI;;;;8BAGxB,KAACQ;oBACGhB,WAAWR,WACPG,OAAO0C,WAAW,EAClB,iDACAhC;oBAEJ6B,WAAQ;8BAEP9B;;8BAEL,MAACY;oBACGhB,WAAWR,WACP,uDACAG,OAAO2C,UAAU,EACjBnC;oBAEJ+B,WAAQ;;wBAEP,CAAC,CAAChC,2BACC,KAACc;4BAAIhB,WAAWL,OAAO4C,cAAc;4BAAEL,WAAQ;sCAC1ChC;;wBAGRD;wBACAQ;;;;;;AAKrB,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"file":"layout-sidebar-links-internal.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-sidebar-links-internal.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"layout-sidebar-links-internal.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-sidebar-links-internal.tsx"],"names":[],"mappings":"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"}

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

@@ -53,6 +53,7 @@ const InternalSideNavigationItemContent = ({ icon, iconActive, tag, title })=>/*
         to: to,
         isActive: typeof isActive === 'function' ? isActive : undefined,
         activeClassName: Styles.navItemActive,
+        tabIndex: 0,
         children: /*#__PURE__*/ _jsx(InternalSideNavigationItemContent, {
             icon: icon,
             iconActive: iconActive,
@@ -65,6 +66,7 @@ const InternalSideNavigationItemContent = ({ icon, iconActive, tag, title })=>/*
     return /*#__PURE__*/ _jsx("div", {
         "data-cy": `navigation-item-${id}`,
         "data-pendo": `navigation-item-${id}`,
+        tabIndex: rest.onClick ? 0 : -1,
         ...rest,
         className: classNames(Styles.navItem, className, {
             [Styles.navLink]: !!rest.onClick,
@@ -187,7 +189,7 @@ export const InternalSideNavigationGroup = ({ id, to, title, isActive, icon, ico
                     })
                 ]
             }),
-            /*#__PURE__*/ _jsx("div", {
+            submenuExpanded && /*#__PURE__*/ _jsx("div", {
                 className: classNames(Styles.submenuWrapper, {
                     [Styles.submenuWrapperCollapsed]: !submenuExpanded
                 }),

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        >\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            {...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: 'top-end' }\n                    )}\n                </div>\n            </div>\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        </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","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: 'top-end' }\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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"}

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

@@ -2,7 +2,7 @@
 @import (reference) '@servicetitan/tokens/core/tokens.less';
 
 @text-color: var(--colorsTextInverted, @color-white);
-@text-color-active: var(--colorsTextPrimarySubdued, @color-blue-300);
+@text-color-active: var(--foreground-color-primary, @color-blue-300);
 @border-color: var(--colorsTextOnGrey, @color-neutral-200);
 @bg-color: #0f1d26;
 @bg-color-hover: rgba(255, 255, 255, 0.08);
@@ -185,6 +185,10 @@
     .nav-item {
         margin-left: @spacing-1;
         margin-right: @spacing-1;
+
+        &.nav-item-active .nav-item-text-expanded {
+            font-weight: @font-weight-bold;
+        }
     }
 
     .nav-top {
@@ -337,6 +341,7 @@
     align-items: center;
     outline: none;
     overflow: hidden;
+    font-weight: @font-weight-semibold;
 
     .nav-item-icon-wrapper {
         border-radius: @border-radius-2;
@@ -390,6 +395,12 @@
             width: 24px;
         }
     }
+
+    &:focus-visible {
+        .nav-item-icon-wrapper {
+            outline: -webkit-focus-ring-color auto 1px;
+        }
+    }
 }
 
 .nav-link {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/navigation",
-    "version": "13.0.1",
+    "version": "13.1.0-canary.259.cd6c17f.0",
     "description": "Navigation components",
     "repository": {
         "type": "git",
@@ -42,5 +42,5 @@
         "less": true,
         "webpack": false
     },
-    "gitHead": "3b872c501643de94f998d2260cc2d384132b2b89"
+    "gitHead": "cd6c17fad184d64eed03eabb5e446d32570dc2e2"
 }

package/src/components/profile-dropdown/profile-dropdown.tsx

@@ -58,6 +58,7 @@ const ProfileDropdownTrigger: FC<
         <div
             data-cy="profile-dropdown-trigger"
             data-pendo="profile-dropdown-trigger"
+            tabIndex={0}
             {...rest}
             className={classNames(
                 'd-f align-items-center cursor-pointer position-relative p-x-1 p-y-half',

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

@@ -115,6 +115,7 @@ export const InternalLayoutHeaderNavigationTrigger: FC<{
         <div
             data-cy={`navigation-trigger-${id}`}
             data-pendo={`navigation-trigger-${id}`}
+            tabIndex={0}
             {...rest}
             className={classNames(
                 Styles.navigationLink,

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

@@ -46,7 +46,7 @@ export const LayoutHeader: FC<LayoutHeaderProps> = ({
     ...rest
 }) => {
     const burgerElement = hasBurger && (
-        <div className={Styles.burger}>
+        <div className={Styles.burger} tabIndex={-1}>
             <LayoutHeaderNavigationTrigger
                 id="burger"
                 title=""

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

@@ -94,6 +94,7 @@ export const InternalSideNavigationLink: FC<
             to={to}
             isActive={typeof isActive === 'function' ? isActive : undefined}
             activeClassName={Styles.navItemActive}
+            tabIndex={0}
         >
             <InternalSideNavigationItemContent
                 icon={icon}
@@ -133,6 +134,7 @@ export const InternalSideNavigationTrigger: FC<
         <div
             data-cy={`navigation-item-${id}`}
             data-pendo={`navigation-item-${id}`}
+            tabIndex={rest.onClick ? 0 : -1}
             {...rest}
             className={classNames(Styles.navItem, className, {
                 [Styles.navLink]: !!rest.onClick,
@@ -325,14 +327,16 @@ export const InternalSideNavigationGroup: FC<
                     )}
                 </div>
             </div>
-            <div
-                className={classNames(Styles.submenuWrapper, {
-                    [Styles.submenuWrapperCollapsed]: !submenuExpanded,
-                })}
-                data-cy={`navigation-submenu-${id}`}
-            >
-                <div className={Styles.submenu}>{children}</div>
-            </div>
+            {submenuExpanded && (
+                <div
+                    className={classNames(Styles.submenuWrapper, {
+                        [Styles.submenuWrapperCollapsed]: !submenuExpanded,
+                    })}
+                    data-cy={`navigation-submenu-${id}`}
+                >
+                    <div className={Styles.submenu}>{children}</div>
+                </div>
+            )}
         </div>
     );
 };

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

@@ -2,7 +2,7 @@
 @import (reference) '@servicetitan/tokens/core/tokens.less';
 
 @text-color: var(--colorsTextInverted, @color-white);
-@text-color-active: var(--colorsTextPrimarySubdued, @color-blue-300);
+@text-color-active: var(--foreground-color-primary, @color-blue-300);
 @border-color: var(--colorsTextOnGrey, @color-neutral-200);
 @bg-color: #0f1d26;
 @bg-color-hover: rgba(255, 255, 255, 0.08);
@@ -185,6 +185,10 @@
     .nav-item {
         margin-left: @spacing-1;
         margin-right: @spacing-1;
+
+        &.nav-item-active .nav-item-text-expanded {
+            font-weight: @font-weight-bold;
+        }
     }
 
     .nav-top {
@@ -337,6 +341,7 @@
     align-items: center;
     outline: none;
     overflow: hidden;
+    font-weight: @font-weight-semibold;
 
     .nav-item-icon-wrapper {
         border-radius: @border-radius-2;
@@ -390,6 +395,12 @@
             width: 24px;
         }
     }
+
+    &:focus-visible {
+        .nav-item-icon-wrapper {
+            outline: -webkit-focus-ring-color auto 1px;
+        }
+    }
 }
 
 .nav-link {