@servicetitan/navigation 13.3.0 → 13.3.1

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

@@ -204,7 +204,7 @@ function DesktopProfileDropdownComponent({ anvil1, ...props }) {
     });
     const hintPopover = (hintPopup === null || hintPopup === void 0 ? void 0 : hintPopup.content) && !open ? /*#__PURE__*/ _jsx(PopoverAnvil1, {
         direction: "bl",
-        width: "xs",
+        width: "auto",
         trigger: triggerElement,
         popoverContentClassName: Styles.hint1,
         onClickOutside: hintPopup === null || hintPopup === void 0 ? void 0 : hintPopup.onClose,
@@ -224,7 +224,7 @@ function DesktopProfileDropdownComponent({ anvil1, ...props }) {
         ...rest,
         children: hintPopover !== null && hintPopover !== void 0 ? hintPopover : /*#__PURE__*/ _jsx(PopoverAnvil1, {
             direction: "bl",
-            width: "xs",
+            width: "s",
             trigger: triggerElement,
             open: open,
             portal: portal,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/profile-dropdown/profile-dropdown.tsx"],"sourcesContent":["import { Divider, Icon, Popover, Text } 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 { Popover as PopoverAnvil1 } from '@servicetitan/design-system';\nimport { tokens } from '@servicetitan/tokens/core';\nimport classNames from 'classnames';\nimport {\n    ComponentPropsWithoutRef,\n    FC,\n    MouseEvent,\n    MouseEventHandler,\n    createElement,\n    forwardRef,\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 = forwardRef<\n    HTMLDivElement,\n    ProfileDropdownTriggerProps & {\n        hintArrow?: boolean;\n        open: boolean;\n        onClick: ComponentPropsWithoutRef<'div'>['onClick'];\n    }\n>(({ info, imageSrc, avatarBadge, badge, className, hintArrow, open, onClick, ...rest }, ref) => {\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('profile-dropdown-trigger', Styles.triggerContainer, className)}\n            onClick={onClick}\n            ref={ref}\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={Styles.profileIcon}\n                    size=\"large\"\n                    svg={open ? SvgAccountActive : SvgAccountInactive}\n                />\n            )}\n\n            {!!info && (\n                <div className={Styles.info}>\n                    <Text title={info.title} className={Styles.infoTitle} size=\"small\">\n                        {info.title}\n                    </Text>\n                    <Text title={info.text} className={Styles.infoText} size=\"small\" subdued>\n                        {info.text}\n                    </Text>\n                </div>\n            )}\n\n            <Icon\n                svg={open ? SvgExpandLess : SvgExpandMore}\n                className={Styles.expandIcon}\n                size=\"small\"\n            />\n\n            {!!avatarBadge && (\n                <div\n                    className={Styles.avatarBadge}\n                    style={{\n                        backgroundColor: avatarBadge === true ? tokens.colorBlue500 : avatarBadge,\n                    }}\n                />\n            )}\n            {!!badge && (\n                <span\n                    className={classNames(\n                        Styles.badge,\n                        badge.content ? Styles.badgeWithContent : Styles.badgeNoContent\n                    )}\n                    style={{ backgroundColor: badge.color }}\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 = 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({ anvil1, ...props }: ProfileDropdownProps) {\n    return anvil1 ? (\n        <DesktopProfileDropdownComponentAnvil1 {...props} />\n    ) : (\n        <DesktopProfileDropdownComponentAnvil2 {...props} />\n    );\n}\n\n/**\n * A2 profile dropdown popover sometimes rendered incorrectly in top left corner. It is seen on cypress test failed builds.\n * it needs to be investigated, but for now keeping an option for A1 popover\n */\nfunction DesktopProfileDropdownComponentAnvil1({\n    children,\n\n    trigger,\n    hintPopup,\n    portal,\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\n    const triggerElement = (\n        <ProfileDropdownTrigger\n            {...trigger}\n            onClick={children ? onTriggerClick : undefined}\n            hintArrow={hintShown}\n            open={open}\n        />\n    );\n\n    const hintPopover =\n        hintPopup?.content && !open ? (\n            <PopoverAnvil1\n                direction=\"bl\"\n                width=\"xs\"\n                trigger={triggerElement}\n                popoverContentClassName={Styles.hint1}\n                onClickOutside={hintPopup?.onClose}\n                open\n            >\n                <div\n                    className={classNames(Styles.hintContent1)}\n                    style={{ '--hint-background': hintPopup.bgColor ?? '#fff' } as any}\n                >\n                    {createElement(hintPopup.content, { openProfile: handleOpen })}\n                </div>\n            </PopoverAnvil1>\n        ) : null;\n\n    return (\n        <div data-cy=\"profile-dropdown\" {...rest}>\n            {hintPopover ?? (\n                <PopoverAnvil1\n                    direction=\"bl\"\n                    width=\"xs\"\n                    trigger={triggerElement}\n                    open={open}\n                    portal={portal}\n                    onClickOutside={handleClose}\n                    popoverContentClassName={classNames(Styles.dropdown1)}\n                >\n                    <div\n                        className={Styles.dropdownContent}\n                        onClick={handleClose}\n                        data-cy=\"profile-dropdown-content\"\n                    >\n                        {children}\n                    </div>\n                </PopoverAnvil1>\n            )}\n        </div>\n    );\n}\n\nfunction DesktopProfileDropdownComponentAnvil2({\n    children,\n\n    trigger,\n    hintPopup,\n    portal,\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\n    const triggerElement = (props: any) => (\n        <ProfileDropdownTrigger\n            {...trigger}\n            {...props}\n            open={open}\n            onClick={children ? onTriggerClick : undefined}\n        />\n    );\n\n    const hintPopover =\n        hintPopup?.content && !open ? (\n            <Popover placement=\"bottom-start\" onClickOutside={hintPopup?.onClose} noPadding open>\n                <Popover.Trigger>{triggerElement}</Popover.Trigger>\n                <Popover.Content\n                    className={Styles.hint2}\n                    style={{ '--hint-background': hintPopup.bgColor ?? '#fff' } as any}\n                >\n                    <div className={classNames(Styles.hintContent2)}>\n                        {createElement(hintPopup.content, { openProfile: handleOpen })}\n                    </div>\n                </Popover.Content>\n            </Popover>\n        ) : null;\n\n    return (\n        <div data-cy=\"profile-dropdown\" {...rest}>\n            {hintPopover ?? (\n                <Popover\n                    placement=\"bottom-start\"\n                    open={open}\n                    onClickOutside={handleClose}\n                    noPadding\n                >\n                    <Popover.Trigger>{triggerElement}</Popover.Trigger>\n                    <Popover.Content className={Styles.dropdown2}>\n                        <div\n                            onClick={handleClose}\n                            data-cy=\"profile-dropdown-content\"\n                            className={Styles.dropdownContent}\n                        >\n                            {children}\n                        </div>\n                    </Popover.Content>\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":["Divider","Icon","Popover","Text","SvgExpandLess","SvgExpandMore","SvgAccountActive","SvgAccountInactive","PopoverAnvil1","tokens","classNames","createElement","forwardRef","useCallback","useEffect","useMemo","useState","getCounterTag","CounterTag","useTitanLayoutContext","withTooltip","Styles","ProfileDropdownTrigger","info","imageSrc","avatarBadge","badge","className","hintArrow","open","onClick","rest","ref","avatarSource","setAvatarSource","avatarSourceError","setAvatarSourceError","src","onAvatarError","div","data-cy","data-pendo","tabIndex","triggerContainer","img","profileImage","onError","alt","profileIcon","size","svg","title","infoTitle","text","infoText","subdued","expandIcon","style","backgroundColor","colorBlue500","span","content","badgeWithContent","badgeNoContent","color","useTag","counter","tag","data","counterWrapper","undefined","DesktopProfileDropdownSection","children","id","tooltip","clickHandler","e","stopPropagation","tagElement","dropdownSection","dropdownSectionWithCounter","dropdownLink","placement","DesktopProfileDropdownDivider","DesktopProfileDropdownLink","external","target","to","NavigationComponent","isExternalLink","startsWith","a","href","DesktopProfileDropdownComponent","anvil1","props","DesktopProfileDropdownComponentAnvil1","DesktopProfileDropdownComponentAnvil2","trigger","hintPopup","portal","onClose","onOpen","setOpen","handleClose","handleOpen","onTriggerClick","hintShown","triggerElement","hintPopover","direction","width","popoverContentClassName","hint1","onClickOutside","hintContent1","bgColor","openProfile","dropdown1","dropdownContent","noPadding","Trigger","Content","hint2","hintContent2","dropdown2","DesktopProfileDropdown","Object","assign","Link","Section"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/profile-dropdown/profile-dropdown.tsx"],"sourcesContent":["import { Divider, Icon, Popover, Text } 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 { Popover as PopoverAnvil1 } from '@servicetitan/design-system';\nimport { tokens } from '@servicetitan/tokens/core';\nimport classNames from 'classnames';\nimport {\n    ComponentPropsWithoutRef,\n    FC,\n    MouseEvent,\n    MouseEventHandler,\n    createElement,\n    forwardRef,\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 = forwardRef<\n    HTMLDivElement,\n    ProfileDropdownTriggerProps & {\n        hintArrow?: boolean;\n        open: boolean;\n        onClick: ComponentPropsWithoutRef<'div'>['onClick'];\n    }\n>(({ info, imageSrc, avatarBadge, badge, className, hintArrow, open, onClick, ...rest }, ref) => {\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('profile-dropdown-trigger', Styles.triggerContainer, className)}\n            onClick={onClick}\n            ref={ref}\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={Styles.profileIcon}\n                    size=\"large\"\n                    svg={open ? SvgAccountActive : SvgAccountInactive}\n                />\n            )}\n\n            {!!info && (\n                <div className={Styles.info}>\n                    <Text title={info.title} className={Styles.infoTitle} size=\"small\">\n                        {info.title}\n                    </Text>\n                    <Text title={info.text} className={Styles.infoText} size=\"small\" subdued>\n                        {info.text}\n                    </Text>\n                </div>\n            )}\n\n            <Icon\n                svg={open ? SvgExpandLess : SvgExpandMore}\n                className={Styles.expandIcon}\n                size=\"small\"\n            />\n\n            {!!avatarBadge && (\n                <div\n                    className={Styles.avatarBadge}\n                    style={{\n                        backgroundColor: avatarBadge === true ? tokens.colorBlue500 : avatarBadge,\n                    }}\n                />\n            )}\n            {!!badge && (\n                <span\n                    className={classNames(\n                        Styles.badge,\n                        badge.content ? Styles.badgeWithContent : Styles.badgeNoContent\n                    )}\n                    style={{ backgroundColor: badge.color }}\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 = 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({ anvil1, ...props }: ProfileDropdownProps) {\n    return anvil1 ? (\n        <DesktopProfileDropdownComponentAnvil1 {...props} />\n    ) : (\n        <DesktopProfileDropdownComponentAnvil2 {...props} />\n    );\n}\n\n/**\n * A2 profile dropdown popover sometimes rendered incorrectly in top left corner. It is seen on cypress test failed builds.\n * it needs to be investigated, but for now keeping an option for A1 popover\n */\nfunction DesktopProfileDropdownComponentAnvil1({\n    children,\n\n    trigger,\n    hintPopup,\n    portal,\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\n    const triggerElement = (\n        <ProfileDropdownTrigger\n            {...trigger}\n            onClick={children ? onTriggerClick : undefined}\n            hintArrow={hintShown}\n            open={open}\n        />\n    );\n\n    const hintPopover =\n        hintPopup?.content && !open ? (\n            <PopoverAnvil1\n                direction=\"bl\"\n                width=\"auto\"\n                trigger={triggerElement}\n                popoverContentClassName={Styles.hint1}\n                onClickOutside={hintPopup?.onClose}\n                open\n            >\n                <div\n                    className={classNames(Styles.hintContent1)}\n                    style={{ '--hint-background': hintPopup.bgColor ?? '#fff' } as any}\n                >\n                    {createElement(hintPopup.content, { openProfile: handleOpen })}\n                </div>\n            </PopoverAnvil1>\n        ) : null;\n\n    return (\n        <div data-cy=\"profile-dropdown\" {...rest}>\n            {hintPopover ?? (\n                <PopoverAnvil1\n                    direction=\"bl\"\n                    width=\"s\"\n                    trigger={triggerElement}\n                    open={open}\n                    portal={portal}\n                    onClickOutside={handleClose}\n                    popoverContentClassName={classNames(Styles.dropdown1)}\n                >\n                    <div\n                        className={Styles.dropdownContent}\n                        onClick={handleClose}\n                        data-cy=\"profile-dropdown-content\"\n                    >\n                        {children}\n                    </div>\n                </PopoverAnvil1>\n            )}\n        </div>\n    );\n}\n\nfunction DesktopProfileDropdownComponentAnvil2({\n    children,\n\n    trigger,\n    hintPopup,\n    portal,\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\n    const triggerElement = (props: any) => (\n        <ProfileDropdownTrigger\n            {...trigger}\n            {...props}\n            open={open}\n            onClick={children ? onTriggerClick : undefined}\n        />\n    );\n\n    const hintPopover =\n        hintPopup?.content && !open ? (\n            <Popover placement=\"bottom-start\" onClickOutside={hintPopup?.onClose} noPadding open>\n                <Popover.Trigger>{triggerElement}</Popover.Trigger>\n                <Popover.Content\n                    className={Styles.hint2}\n                    style={{ '--hint-background': hintPopup.bgColor ?? '#fff' } as any}\n                >\n                    <div className={classNames(Styles.hintContent2)}>\n                        {createElement(hintPopup.content, { openProfile: handleOpen })}\n                    </div>\n                </Popover.Content>\n            </Popover>\n        ) : null;\n\n    return (\n        <div data-cy=\"profile-dropdown\" {...rest}>\n            {hintPopover ?? (\n                <Popover\n                    placement=\"bottom-start\"\n                    open={open}\n                    onClickOutside={handleClose}\n                    noPadding\n                >\n                    <Popover.Trigger>{triggerElement}</Popover.Trigger>\n                    <Popover.Content className={Styles.dropdown2}>\n                        <div\n                            onClick={handleClose}\n                            data-cy=\"profile-dropdown-content\"\n                            className={Styles.dropdownContent}\n                        >\n                            {children}\n                        </div>\n                    </Popover.Content>\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":["Divider","Icon","Popover","Text","SvgExpandLess","SvgExpandMore","SvgAccountActive","SvgAccountInactive","PopoverAnvil1","tokens","classNames","createElement","forwardRef","useCallback","useEffect","useMemo","useState","getCounterTag","CounterTag","useTitanLayoutContext","withTooltip","Styles","ProfileDropdownTrigger","info","imageSrc","avatarBadge","badge","className","hintArrow","open","onClick","rest","ref","avatarSource","setAvatarSource","avatarSourceError","setAvatarSourceError","src","onAvatarError","div","data-cy","data-pendo","tabIndex","triggerContainer","img","profileImage","onError","alt","profileIcon","size","svg","title","infoTitle","text","infoText","subdued","expandIcon","style","backgroundColor","colorBlue500","span","content","badgeWithContent","badgeNoContent","color","useTag","counter","tag","data","counterWrapper","undefined","DesktopProfileDropdownSection","children","id","tooltip","clickHandler","e","stopPropagation","tagElement","dropdownSection","dropdownSectionWithCounter","dropdownLink","placement","DesktopProfileDropdownDivider","DesktopProfileDropdownLink","external","target","to","NavigationComponent","isExternalLink","startsWith","a","href","DesktopProfileDropdownComponent","anvil1","props","DesktopProfileDropdownComponentAnvil1","DesktopProfileDropdownComponentAnvil2","trigger","hintPopup","portal","onClose","onOpen","setOpen","handleClose","handleOpen","onTriggerClick","hintShown","triggerElement","hintPopover","direction","width","popoverContentClassName","hint1","onClickOutside","hintContent1","bgColor","openProfile","dropdown1","dropdownContent","noPadding","Trigger","Content","hint2","hintContent2","dropdown2","DesktopProfileDropdown","Object","assign","Link","Section"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/navigation",
-    "version": "13.3.0",
+    "version": "13.3.1",
     "description": "Navigation components",
     "repository": {
         "type": "git",
@@ -35,5 +35,5 @@
         "less": true,
         "webpack": false
     },
-    "gitHead": "587902f4632108283819a777ad367b8f49d77e53"
+    "gitHead": "8cc3007728c77ed381924cb3b2619783fb2c2916"
 }

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

@@ -299,7 +299,7 @@ function DesktopProfileDropdownComponentAnvil1({
         hintPopup?.content && !open ? (
             <PopoverAnvil1
                 direction="bl"
-                width="xs"
+                width="auto"
                 trigger={triggerElement}
                 popoverContentClassName={Styles.hint1}
                 onClickOutside={hintPopup?.onClose}
@@ -319,7 +319,7 @@ function DesktopProfileDropdownComponentAnvil1({
             {hintPopover ?? (
                 <PopoverAnvil1
                     direction="bl"
-                    width="xs"
+                    width="s"
                     trigger={triggerElement}
                     open={open}
                     portal={portal}