@servicetitan/navigation 11.1.1 → 12.0.0

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

@@ -1 +1 @@
-{"version":3,"file":"layout-header-links.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-header-links.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,EAAE,EAAY,MAAM,OAAO,CAAC;AACrC,OAAO,EACH,yBAAyB,EACzB,4BAA4B,EAC/B,MAAM,+BAA+B,CAAC;AA4CvC,sCAAsC;AACtC,eAAO,MAAM,0BAA0B,EAAE,EAAE,CAAC,yBAAyB,CA+CpE,CAAC;AAEF,6CAA6C;AAC7C,eAAO,MAAM,6BAA6B,EAAE,EAAE,CAAC,4BAA4B,CA2C1E,CAAC"}
+{"version":3,"file":"layout-header-links.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-header-links.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,EAAE,EAAY,MAAM,OAAO,CAAC;AACrC,OAAO,EACH,yBAAyB,EACzB,4BAA4B,EAC/B,MAAM,+BAA+B,CAAC;AA+CvC,sCAAsC;AACtC,eAAO,MAAM,0BAA0B,EAAE,EAAE,CAAC,yBAAyB,CA+CpE,CAAC;AAEF,6CAA6C;AAC7C,eAAO,MAAM,6BAA6B,EAAE,EAAE,CAAC,4BAA4B,CA2C1E,CAAC"}

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

@@ -22,6 +22,7 @@ import * as Styles from './layout-header.module.less';
             }),
             !!label && /*#__PURE__*/ _jsx("span", {
                 className: classNames(Styles.navigationItemLabel, labelClassName),
+                "data-cy": "nav-item-label",
                 children: label
             }),
             !!tag && /*#__PURE__*/ _jsx(CounterTag, {
@@ -35,8 +36,8 @@ import * as Styles from './layout-header.module.less';
 /** Navigation extra item with link */ export const LayoutHeaderNavigationLink = ({ id, to, hint, tooltip, className, counter, icon, iconActive, iconClassName, iconComponent, iconName, isActive, label, labelClassName, tag, target, title, ...rest })=>{
     const { NavigationComponent } = useTitanLayoutContext();
     return withTooltip(/*#__PURE__*/ _createElement(NavigationComponent, {
-        "data-cy": `navigation-link-${id}`,
-        "data-pendo": `navigation-link-${id}`,
+        "data-cy": `navigation-item-${id}`,
+        "data-pendo": `navigation-item-${id}`,
         ...rest,
         key: id,
         to: to,

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

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

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

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

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

@@ -40,6 +40,7 @@ export const LayoutHeader = ({ className, right, rightText, rightClassName, cent
                     children: [
                         !!rightText && /*#__PURE__*/ _jsx("div", {
                             className: Styles.heTopRightText,
+                            "data-cy": "navigation-right-text",
                             children: rightText
                         }),
                         right,

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, 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';\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    onBurgerClick?: (e: MouseEvent) => 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    onBurgerClick,\n    ...rest\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                {isMobile && (\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                <LayoutLogo {...logo} />\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 && <div className={Styles.heTopRightText}>{rightText}</div>}\n                    {right}\n                    {profile}\n                </div>\n            </div>\n        </LayoutPlacementContext.Provider>\n    );\n};\n"],"names":["SvgBurgerMenu","classNames","LayoutPlacementContext","LayoutHeaderNavigationTrigger","Styles","LayoutLogo","isLogoCustom","LayoutHeader","className","right","rightText","rightClassName","center","centerClassName","isMobile","hasNotifications","logo","profile","variant","onBurgerClick","rest","Provider","value","div","header","headerLight","headerDark","headerMobile","headerDesktop","headerLogoCustom","data-cy","burger","id","title","icon","iconActive","undefined","onClick","tag","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;AAqB/E,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,aAAa,EACb,GAAGC,MACN;IACG,qBACI,KAAClB,uBAAuBmB,QAAQ;QAACC,OAAM;kBACnC,cAAA,MAACC;YACGf,WAAWP,WACPG,OAAOoB,MAAM,EACbN,YAAY,UAAUd,OAAOqB,WAAW,GAAGrB,OAAOsB,UAAU,EAC5DZ,WAAWV,OAAOuB,YAAY,GAAGvB,OAAOwB,aAAa,EACrDtB,aAAaU,MAAMF,aAAaV,OAAOyB,gBAAgB,EACvDrB;YAEJsB,WAAQ;YACP,GAAGV,IAAI;;gBAEPN,0BACG,KAACS;oBAAIf,WAAWJ,OAAO2B,MAAM;8BACzB,cAAA,KAAC5B;wBACG6B,IAAG;wBACHC,OAAM;wBACNC,MAAMlC;wBACNmC,YAAYC;wBACZC,SAASlB;wBACTmB,KAAK;4BAAEhB,OAAOP;wBAAiB;;;8BAI3C,KAACV;oBAAY,GAAGW,IAAI;;8BACpB,KAACO;oBACGf,WAAWP,WACPG,OAAOmC,WAAW,EAClB,iDACA1B;oBAEJiB,WAAQ;8BAEPlB;;8BAEL,MAACW;oBACGf,WAAWP,WACP,uDACAG,OAAOoC,UAAU,EACjB7B;oBAEJmB,WAAQ;;wBAEP,CAAC,CAACpB,2BAAa,KAACa;4BAAIf,WAAWJ,OAAOqC,cAAc;sCAAG/B;;wBACvDD;wBACAQ;;;;;;AAKrB,EAAE"}
+{"version":3,"sources":["../../../src/components/titan-layout/layout-header.tsx"],"sourcesContent":["import SvgBurgerMenu from '@servicetitan/anvil2/assets/icons/material/round/menu.svg';\nimport classNames from 'classnames';\nimport { ComponentPropsWithoutRef, FC, ReactElement, ReactNode } from 'react';\nimport { LayoutPlacementContext } from './layout-context';\nimport { LayoutHeaderNavigationTrigger } from './layout-header-links';\nimport * as Styles from './layout-header.module.less';\nimport { LayoutLogo, TitanLayoutLogoProps, isLogoCustom } from './layout-logo';\n\nexport type LayoutHeaderProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'> & {\n    right?: ReactNode;\n    rightText?: string;\n    rightClassName?: string;\n\n    id?: string;\n\n    center?: ReactElement;\n    centerClassName?: string;\n\n    logo?: TitanLayoutLogoProps;\n    profile?: ReactElement;\n\n    isMobile: boolean;\n    variant: 'light' | 'dark';\n    hasNotifications: boolean;\n    onBurgerClick?: (e: MouseEvent) => 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    onBurgerClick,\n    ...rest\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                {isMobile && (\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                <LayoutLogo {...logo} />\n                <div\n                    className={classNames(\n                        Styles.heTopCenter,\n                        'd-f align-items-center justify-content-center',\n                        centerClassName\n                    )}\n                    data-cy=\"navigation-center\"\n                >\n                    {center}\n                </div>\n                <div\n                    className={classNames(\n                        'd-f flex-row justify-content-end align-items-center',\n                        Styles.heTopRight,\n                        rightClassName\n                    )}\n                    data-cy=\"navigation-right\"\n                >\n                    {!!rightText && (\n                        <div className={Styles.heTopRightText} data-cy=\"navigation-right-text\">\n                            {rightText}\n                        </div>\n                    )}\n                    {right}\n                    {profile}\n                </div>\n            </div>\n        </LayoutPlacementContext.Provider>\n    );\n};\n"],"names":["SvgBurgerMenu","classNames","LayoutPlacementContext","LayoutHeaderNavigationTrigger","Styles","LayoutLogo","isLogoCustom","LayoutHeader","className","right","rightText","rightClassName","center","centerClassName","isMobile","hasNotifications","logo","profile","variant","onBurgerClick","rest","Provider","value","div","header","headerLight","headerDark","headerMobile","headerDesktop","headerLogoCustom","data-cy","burger","id","title","icon","iconActive","undefined","onClick","tag","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;AAqB/E,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,aAAa,EACb,GAAGC,MACN;IACG,qBACI,KAAClB,uBAAuBmB,QAAQ;QAACC,OAAM;kBACnC,cAAA,MAACC;YACGf,WAAWP,WACPG,OAAOoB,MAAM,EACbN,YAAY,UAAUd,OAAOqB,WAAW,GAAGrB,OAAOsB,UAAU,EAC5DZ,WAAWV,OAAOuB,YAAY,GAAGvB,OAAOwB,aAAa,EACrDtB,aAAaU,MAAMF,aAAaV,OAAOyB,gBAAgB,EACvDrB;YAEJsB,WAAQ;YACP,GAAGV,IAAI;;gBAEPN,0BACG,KAACS;oBAAIf,WAAWJ,OAAO2B,MAAM;8BACzB,cAAA,KAAC5B;wBACG6B,IAAG;wBACHC,OAAM;wBACNC,MAAMlC;wBACNmC,YAAYC;wBACZC,SAASlB;wBACTmB,KAAK;4BAAEhB,OAAOP;wBAAiB;;;8BAI3C,KAACV;oBAAY,GAAGW,IAAI;;8BACpB,KAACO;oBACGf,WAAWP,WACPG,OAAOmC,WAAW,EAClB,iDACA1B;oBAEJiB,WAAQ;8BAEPlB;;8BAEL,MAACW;oBACGf,WAAWP,WACP,uDACAG,OAAOoC,UAAU,EACjB7B;oBAEJmB,WAAQ;;wBAEP,CAAC,CAACpB,2BACC,KAACa;4BAAIf,WAAWJ,OAAOqC,cAAc;4BAAEX,WAAQ;sCAC1CpB;;wBAGRD;wBACAQ;;;;;;AAKrB,EAAE"}

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

@@ -202,6 +202,12 @@
             text-decoration: none;
         }
     }
+    .logo-title {
+        font-family: @display-font-family;
+        font-weight: @font-weight-semibold;
+        font-size: 21px;
+        line-height: 24px;
+    }
 }
 
 .header-desktop {
@@ -222,12 +228,6 @@
 }
 
 .header-dark.header-logo-custom {
-    .logo-short-wrapper,
-    .burger {
-        background-color: @color-white;
-        color: @c-light;
-    }
-
     .burger .navigation-link {
         color: inherit !important;
     }

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

@@ -1,12 +1,10 @@
-import { FC, ReactNode } from 'react';
-import { WrapperProps } from '../logo/logo-titan-text';
-export interface TitanLayoutLogoProps {
+import { ComponentPropsWithoutRef, FC, ReactNode } from 'react';
+export type TitanLayoutLogoProps = Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'style' | 'title'> & {
     title?: string | boolean;
     postfix?: ReactNode;
-    logoWrapper?: WrapperProps;
     mantleFill?: string;
     to?: string;
-}
+};
 export declare const isLogoCompany: (props: TitanLayoutLogoProps | undefined, isMobile: boolean) => boolean;
 export declare const isLogoCustom: (props: TitanLayoutLogoProps | undefined, isMobile: boolean) => boolean;
 export declare const isLogoText: (props: TitanLayoutLogoProps | undefined, isMobile: boolean) => boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"layout-logo.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-logo.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAY,SAAS,EAAE,MAAM,OAAO,CAAC;AAGhD,OAAO,EAAkB,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAIvE,MAAM,WAAW,oBAAoB;IACjC,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;CACf;AAID,eAAO,MAAM,aAAa,GAAI,OAAO,oBAAoB,GAAG,SAAS,EAAE,UAAU,OAAO,YAClD,CAAC;AACvC,eAAO,MAAM,YAAY,GAAI,OAAO,oBAAoB,GAAG,SAAS,EAAE,UAAU,OAAO,YAC7B,CAAC;AAC3D,eAAO,MAAM,UAAU,GAAI,OAAO,oBAAoB,GAAG,SAAS,EAAE,UAAU,OAAO,YACpC,CAAC;AAElD,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,oBAAoB,CAmC/C,CAAC"}
+{"version":3,"file":"layout-logo.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-logo.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,wBAAwB,EAAE,EAAE,EAAY,SAAS,EAAE,MAAM,OAAO,CAAC;AAM1E,MAAM,MAAM,oBAAoB,GAAG,IAAI,CACnC,wBAAwB,CAAC,KAAK,CAAC,EAC/B,UAAU,GAAG,OAAO,GAAG,OAAO,CACjC,GAAG;IACA,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAIF,eAAO,MAAM,aAAa,GAAI,OAAO,oBAAoB,GAAG,SAAS,EAAE,UAAU,OAAO,YAClD,CAAC;AACvC,eAAO,MAAM,YAAY,GAAI,OAAO,oBAAoB,GAAG,SAAS,EAAE,UAAU,OAAO,YAC7B,CAAC;AAC3D,eAAO,MAAM,UAAU,GAAI,OAAO,oBAAoB,GAAG,SAAS,EAAE,UAAU,OAAO,YACpC,CAAC;AAElD,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,oBAAoB,CAwC/C,CAAC"}

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

@@ -3,7 +3,6 @@ import classNames from 'classnames';
 import { Fragment } from 'react';
 import { LogoCompanyTitle } from '../logo/logo-company-title';
 import { LogoTitanSvg } from '../logo/logo-titan';
-import { LogoTitanTitle } from '../logo/logo-titan-text';
 import { useTitanLayoutContext } from './layout-context';
 import * as Styles from './layout-header.module.less';
 const EmptyWrapper = ({ children })=>children;
@@ -12,40 +11,47 @@ export const isLogoCustom = (props, isMobile)=>!isLogoCompany(props, isMobile) &
 export const isLogoText = (props, isMobile)=>typeof (props === null || props === void 0 ? void 0 : props.title) === 'string' && !isMobile;
 export const LayoutLogo = (props)=>{
     const { NavigationComponent, breakpoint: { isMobile } } = useTitanLayoutContext();
-    const Wrapper = props.to ? NavigationComponent : EmptyWrapper;
+    const { title, postfix, mantleFill, to, ...rest } = props;
+    const Wrapper = to ? NavigationComponent : EmptyWrapper;
     const showCompanyTitle = isLogoCompany(props, isMobile);
     return /*#__PURE__*/ _jsxs("div", {
         className: classNames(Styles.logo),
         "data-cy": "navigation-left",
         children: [
             showCompanyTitle ? /*#__PURE__*/ _jsx("div", {
+                "data-cy": "logo-wrapper",
+                ...rest,
                 className: Styles.logoCompanyWrapper,
                 children: /*#__PURE__*/ _jsx(Wrapper, {
-                    to: props.to,
+                    to: to,
                     className: Styles.logoLink,
                     children: /*#__PURE__*/ _jsx(LogoCompanyTitle, {})
                 })
             }) : /*#__PURE__*/ _jsxs(Fragment, {
                 children: [
                     /*#__PURE__*/ _jsx("div", {
+                        "data-cy": "logo-wrapper",
+                        ...rest,
                         className: Styles.logoShortWrapper,
                         children: /*#__PURE__*/ _jsx(Wrapper, {
-                            to: props.to,
+                            to: to,
                             className: Styles.logoLink,
                             children: /*#__PURE__*/ _jsx(LogoTitanSvg, {
-                                mantleFill: props.mantleFill
+                                mantleFill: mantleFill
                             })
                         })
                     }),
-                    isLogoText(props, isMobile) && /*#__PURE__*/ _jsx(LogoTitanTitle, {
+                    isLogoText(props, isMobile) && /*#__PURE__*/ _jsx("div", {
                         className: Styles.logoTitle,
-                        children: props.title
+                        "data-cy": "logo-title",
+                        children: title
                     })
                 ]
             }),
-            !isMobile && props.postfix && /*#__PURE__*/ _jsx("div", {
+            !isMobile && postfix && /*#__PURE__*/ _jsx("div", {
                 className: Styles.logoPostfix,
-                children: props.postfix
+                "data-cy": "logo-postfix",
+                children: postfix
             })
         ]
     });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/titan-layout/layout-logo.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { FC, Fragment, ReactNode } from 'react';\nimport { LogoCompanyTitle } from '../logo/logo-company-title';\nimport { LogoTitanSvg } from '../logo/logo-titan';\nimport { LogoTitanTitle, WrapperProps } from '../logo/logo-titan-text';\nimport { useTitanLayoutContext } from './layout-context';\nimport * as Styles from './layout-header.module.less';\n\nexport interface TitanLayoutLogoProps {\n    title?: string | boolean;\n    postfix?: ReactNode;\n    logoWrapper?: WrapperProps;\n    mantleFill?: string;\n    to?: string;\n}\n\nconst EmptyWrapper: FC<any> = ({ children }) => children;\n\nexport const isLogoCompany = (props: TitanLayoutLogoProps | undefined, isMobile: boolean) =>\n    props?.title === true && !isMobile;\nexport const isLogoCustom = (props: TitanLayoutLogoProps | undefined, isMobile: boolean) =>\n    !isLogoCompany(props, isMobile) && !!props?.mantleFill;\nexport const isLogoText = (props: TitanLayoutLogoProps | undefined, isMobile: boolean) =>\n    typeof props?.title === 'string' && !isMobile;\n\nexport const LayoutLogo: FC<TitanLayoutLogoProps> = props => {\n    const {\n        NavigationComponent,\n        breakpoint: { isMobile },\n    } = useTitanLayoutContext();\n    const Wrapper: FC<any> = props.to ? NavigationComponent : EmptyWrapper;\n    const showCompanyTitle = isLogoCompany(props, isMobile);\n\n    return (\n        <div className={classNames(Styles.logo)} data-cy=\"navigation-left\">\n            {showCompanyTitle ? (\n                <div className={Styles.logoCompanyWrapper}>\n                    <Wrapper to={props.to} className={Styles.logoLink}>\n                        <LogoCompanyTitle />\n                    </Wrapper>\n                </div>\n            ) : (\n                <Fragment>\n                    <div className={Styles.logoShortWrapper}>\n                        <Wrapper to={props.to} className={Styles.logoLink}>\n                            <LogoTitanSvg mantleFill={props.mantleFill} />\n                        </Wrapper>\n                    </div>\n\n                    {isLogoText(props, isMobile) && (\n                        <LogoTitanTitle className={Styles.logoTitle}>{props.title}</LogoTitanTitle>\n                    )}\n                </Fragment>\n            )}\n\n            {!isMobile && props.postfix && (\n                <div className={Styles.logoPostfix}>{props.postfix}</div>\n            )}\n        </div>\n    );\n};\n"],"names":["classNames","Fragment","LogoCompanyTitle","LogoTitanSvg","LogoTitanTitle","useTitanLayoutContext","Styles","EmptyWrapper","children","isLogoCompany","props","isMobile","title","isLogoCustom","mantleFill","isLogoText","LayoutLogo","NavigationComponent","breakpoint","Wrapper","to","showCompanyTitle","div","className","logo","data-cy","logoCompanyWrapper","logoLink","logoShortWrapper","logoTitle","postfix","logoPostfix"],"mappings":";AAAA,OAAOA,gBAAgB,aAAa;AACpC,SAAaC,QAAQ,QAAmB,QAAQ;AAChD,SAASC,gBAAgB,QAAQ,6BAA6B;AAC9D,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,cAAc,QAAsB,0BAA0B;AACvE,SAASC,qBAAqB,QAAQ,mBAAmB;AACzD,YAAYC,YAAY,8BAA8B;AAUtD,MAAMC,eAAwB,CAAC,EAAEC,QAAQ,EAAE,GAAKA;AAEhD,OAAO,MAAMC,gBAAgB,CAACC,OAAyCC,WACnED,CAAAA,kBAAAA,4BAAAA,MAAOE,KAAK,MAAK,QAAQ,CAACD,SAAS;AACvC,OAAO,MAAME,eAAe,CAACH,OAAyCC,WAClE,CAACF,cAAcC,OAAOC,aAAa,CAAC,EAACD,kBAAAA,4BAAAA,MAAOI,UAAU,EAAC;AAC3D,OAAO,MAAMC,aAAa,CAACL,OAAyCC,WAChE,QAAOD,kBAAAA,4BAAAA,MAAOE,KAAK,MAAK,YAAY,CAACD,SAAS;AAElD,OAAO,MAAMK,aAAuCN,CAAAA;IAChD,MAAM,EACFO,mBAAmB,EACnBC,YAAY,EAAEP,QAAQ,EAAE,EAC3B,GAAGN;IACJ,MAAMc,UAAmBT,MAAMU,EAAE,GAAGH,sBAAsBV;IAC1D,MAAMc,mBAAmBZ,cAAcC,OAAOC;IAE9C,qBACI,MAACW;QAAIC,WAAWvB,WAAWM,OAAOkB,IAAI;QAAGC,WAAQ;;YAC5CJ,iCACG,KAACC;gBAAIC,WAAWjB,OAAOoB,kBAAkB;0BACrC,cAAA,KAACP;oBAAQC,IAAIV,MAAMU,EAAE;oBAAEG,WAAWjB,OAAOqB,QAAQ;8BAC7C,cAAA,KAACzB;;+BAIT,MAACD;;kCACG,KAACqB;wBAAIC,WAAWjB,OAAOsB,gBAAgB;kCACnC,cAAA,KAACT;4BAAQC,IAAIV,MAAMU,EAAE;4BAAEG,WAAWjB,OAAOqB,QAAQ;sCAC7C,cAAA,KAACxB;gCAAaW,YAAYJ,MAAMI,UAAU;;;;oBAIjDC,WAAWL,OAAOC,2BACf,KAACP;wBAAemB,WAAWjB,OAAOuB,SAAS;kCAAGnB,MAAME,KAAK;;;;YAKpE,CAACD,YAAYD,MAAMoB,OAAO,kBACvB,KAACR;gBAAIC,WAAWjB,OAAOyB,WAAW;0BAAGrB,MAAMoB,OAAO;;;;AAIlE,EAAE"}
+{"version":3,"sources":["../../../src/components/titan-layout/layout-logo.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { ComponentPropsWithoutRef, FC, Fragment, ReactNode } from 'react';\nimport { LogoCompanyTitle } from '../logo/logo-company-title';\nimport { LogoTitanSvg } from '../logo/logo-titan';\nimport { useTitanLayoutContext } from './layout-context';\nimport * as Styles from './layout-header.module.less';\n\nexport type TitanLayoutLogoProps = Omit<\n    ComponentPropsWithoutRef<'div'>,\n    'children' | 'style' | 'title'\n> & {\n    title?: string | boolean;\n    postfix?: ReactNode;\n    mantleFill?: string;\n    to?: string;\n};\n\nconst EmptyWrapper: FC<any> = ({ children }) => children;\n\nexport const isLogoCompany = (props: TitanLayoutLogoProps | undefined, isMobile: boolean) =>\n    props?.title === true && !isMobile;\nexport const isLogoCustom = (props: TitanLayoutLogoProps | undefined, isMobile: boolean) =>\n    !isLogoCompany(props, isMobile) && !!props?.mantleFill;\nexport const isLogoText = (props: TitanLayoutLogoProps | undefined, isMobile: boolean) =>\n    typeof props?.title === 'string' && !isMobile;\n\nexport const LayoutLogo: FC<TitanLayoutLogoProps> = props => {\n    const {\n        NavigationComponent,\n        breakpoint: { isMobile },\n    } = useTitanLayoutContext();\n    const { title, postfix, mantleFill, to, ...rest } = props;\n    const Wrapper: FC<any> = to ? NavigationComponent : EmptyWrapper;\n    const showCompanyTitle = isLogoCompany(props, isMobile);\n\n    return (\n        <div className={classNames(Styles.logo)} data-cy=\"navigation-left\">\n            {showCompanyTitle ? (\n                <div data-cy=\"logo-wrapper\" {...rest} className={Styles.logoCompanyWrapper}>\n                    <Wrapper to={to} className={Styles.logoLink}>\n                        <LogoCompanyTitle />\n                    </Wrapper>\n                </div>\n            ) : (\n                <Fragment>\n                    <div data-cy=\"logo-wrapper\" {...rest} className={Styles.logoShortWrapper}>\n                        <Wrapper to={to} className={Styles.logoLink}>\n                            <LogoTitanSvg mantleFill={mantleFill} />\n                        </Wrapper>\n                    </div>\n\n                    {isLogoText(props, isMobile) && (\n                        <div className={Styles.logoTitle} data-cy=\"logo-title\">\n                            {title}\n                        </div>\n                    )}\n                </Fragment>\n            )}\n\n            {!isMobile && postfix && (\n                <div className={Styles.logoPostfix} data-cy=\"logo-postfix\">\n                    {postfix}\n                </div>\n            )}\n        </div>\n    );\n};\n"],"names":["classNames","Fragment","LogoCompanyTitle","LogoTitanSvg","useTitanLayoutContext","Styles","EmptyWrapper","children","isLogoCompany","props","isMobile","title","isLogoCustom","mantleFill","isLogoText","LayoutLogo","NavigationComponent","breakpoint","postfix","to","rest","Wrapper","showCompanyTitle","div","className","logo","data-cy","logoCompanyWrapper","logoLink","logoShortWrapper","logoTitle","logoPostfix"],"mappings":";AAAA,OAAOA,gBAAgB,aAAa;AACpC,SAAuCC,QAAQ,QAAmB,QAAQ;AAC1E,SAASC,gBAAgB,QAAQ,6BAA6B;AAC9D,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,qBAAqB,QAAQ,mBAAmB;AACzD,YAAYC,YAAY,8BAA8B;AAYtD,MAAMC,eAAwB,CAAC,EAAEC,QAAQ,EAAE,GAAKA;AAEhD,OAAO,MAAMC,gBAAgB,CAACC,OAAyCC,WACnED,CAAAA,kBAAAA,4BAAAA,MAAOE,KAAK,MAAK,QAAQ,CAACD,SAAS;AACvC,OAAO,MAAME,eAAe,CAACH,OAAyCC,WAClE,CAACF,cAAcC,OAAOC,aAAa,CAAC,EAACD,kBAAAA,4BAAAA,MAAOI,UAAU,EAAC;AAC3D,OAAO,MAAMC,aAAa,CAACL,OAAyCC,WAChE,QAAOD,kBAAAA,4BAAAA,MAAOE,KAAK,MAAK,YAAY,CAACD,SAAS;AAElD,OAAO,MAAMK,aAAuCN,CAAAA;IAChD,MAAM,EACFO,mBAAmB,EACnBC,YAAY,EAAEP,QAAQ,EAAE,EAC3B,GAAGN;IACJ,MAAM,EAAEO,KAAK,EAAEO,OAAO,EAAEL,UAAU,EAAEM,EAAE,EAAE,GAAGC,MAAM,GAAGX;IACpD,MAAMY,UAAmBF,KAAKH,sBAAsBV;IACpD,MAAMgB,mBAAmBd,cAAcC,OAAOC;IAE9C,qBACI,MAACa;QAAIC,WAAWxB,WAAWK,OAAOoB,IAAI;QAAGC,WAAQ;;YAC5CJ,iCACG,KAACC;gBAAIG,WAAQ;gBAAgB,GAAGN,IAAI;gBAAEI,WAAWnB,OAAOsB,kBAAkB;0BACtE,cAAA,KAACN;oBAAQF,IAAIA;oBAAIK,WAAWnB,OAAOuB,QAAQ;8BACvC,cAAA,KAAC1B;;+BAIT,MAACD;;kCACG,KAACsB;wBAAIG,WAAQ;wBAAgB,GAAGN,IAAI;wBAAEI,WAAWnB,OAAOwB,gBAAgB;kCACpE,cAAA,KAACR;4BAAQF,IAAIA;4BAAIK,WAAWnB,OAAOuB,QAAQ;sCACvC,cAAA,KAACzB;gCAAaU,YAAYA;;;;oBAIjCC,WAAWL,OAAOC,2BACf,KAACa;wBAAIC,WAAWnB,OAAOyB,SAAS;wBAAEJ,WAAQ;kCACrCf;;;;YAMhB,CAACD,YAAYQ,yBACV,KAACK;gBAAIC,WAAWnB,OAAO0B,WAAW;gBAAEL,WAAQ;0BACvCR;;;;AAKrB,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"file":"layout-profile.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-profile.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,EAAE,EAAmC,MAAM,OAAO,CAAC;AAE5D,OAAO,EAEH,wBAAwB,EACxB,oBAAoB,EACpB,2BAA2B,EAC9B,MAAM,sCAAsC,CAAC;AAW9C,YAAY,EACR,oBAAoB,EACpB,2BAA2B,EAC3B,wBAAwB,GAC3B,MAAM,sCAAsC,CAAC;AAsJ9C,eAAO,MAAM,eAAe;;;;CAI1B,CAAC"}
+{"version":3,"file":"layout-profile.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-profile.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,EAAE,EAAmC,MAAM,OAAO,CAAC;AAE5D,OAAO,EAEH,wBAAwB,EACxB,oBAAoB,EACpB,2BAA2B,EAC9B,MAAM,sCAAsC,CAAC;AAW9C,YAAY,EACR,oBAAoB,EACpB,2BAA2B,EAC3B,wBAAwB,GAC3B,MAAM,sCAAsC,CAAC;AAuJ9C,eAAO,MAAM,eAAe;;;;CAI1B,CAAC"}

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

@@ -27,8 +27,8 @@ const ProfileDropdownContent = (props)=>{
     });
 };
 ProfileDropdownContent.displayName = 'ProfileDropdown';
+const profileId = '--profile';
 const MobileProfileDropdown = ({ children, ...props })=>{
-    const id = '__profile';
     const [expanded, setExpanded] = useState(false);
     const { hasNotifications, NotificationsContextProvider } = useNotificationsState();
     const { onNotificationsUpdate } = useNotificationsContext();
@@ -37,14 +37,14 @@ const MobileProfileDropdown = ({ children, ...props })=>{
         setExpanded(!expanded);
     };
     useEffect(()=>{
-        onNotificationsUpdate(id, hasNotifications);
+        onNotificationsUpdate(profileId, hasNotifications);
     }, [
         hasNotifications,
         onNotificationsUpdate
     ]);
     return /*#__PURE__*/ _jsx(NotificationsContextProvider, {
         children: /*#__PURE__*/ _jsx(InternalSideNavigationGroup, {
-            id: id,
+            id: profileId,
             to: undefined,
             title: "Profile",
             icon: SvgAccountInactive,
@@ -112,6 +112,7 @@ const MobileProfileDropdownLink = ({ external, to, tooltip, text, children, navi
         ...props,
         to: to,
         title: linkText,
+        parentId: profileId,
         navigationComponent: isExternalLink ? ExternalNavComponent : navigationComponent
     }) : null;
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/titan-layout/layout-profile.tsx"],"sourcesContent":["import SvgAccountActive from '@servicetitan/anvil2/assets/icons/st/gnav_account_active.svg';\nimport SvgAccountInactive from '@servicetitan/anvil2/assets/icons/st/gnav_account_inactive.svg';\n\nimport { FC, MouseEvent, useEffect, useState } from 'react';\nimport { NavLinkComponentProps, NavigationComponentContext } from '../../utils/navigation-context';\nimport {\n    ProfileDropdown as DesktopProfileDropdown,\n    ProfileDropdownLinkProps,\n    ProfileDropdownProps,\n    ProfileDropdownSectionProps,\n} from '../profile-dropdown/profile-dropdown';\nimport { NavigationComponentProps } from './interface-internal';\nimport { useTitanLayoutContext } from './layout-context';\nimport {\n    InternalSideNavigationGroup,\n    InternalSideNavigationGroupDivider,\n    InternalSideNavigationGroupLink,\n    InternalSideNavigationGroupTrigger,\n} from './layout-sidebar-links-internal';\nimport { useNotificationsContext, useNotificationsState } from './notifications-context';\n\nexport type {\n    ProfileDropdownProps,\n    ProfileDropdownSectionProps,\n    ProfileDropdownLinkProps,\n} from '../profile-dropdown/profile-dropdown';\n\nconst ExternalNavComponent: FC<NavLinkComponentProps> = ({\n    children,\n    isActive,\n    to,\n    activeClassName,\n    ...props\n}) => (\n    <a {...props} href={to}>\n        {children}\n    </a>\n);\n\nconst ProfileDropdownContent: FC<ProfileDropdownProps> = props => {\n    const { isTitanLayout, breakpoint, NavigationComponent } = useTitanLayoutContext();\n    return breakpoint.isMobile ? (\n        <MobileProfileDropdown {...props} navigationComponent={NavigationComponent} />\n    ) : isTitanLayout ? (\n        <NavigationComponentContext.Provider value={NavigationComponent}>\n            <DesktopProfileDropdown {...props} />\n        </NavigationComponentContext.Provider>\n    ) : (\n        <DesktopProfileDropdown {...props} />\n    );\n};\nProfileDropdownContent.displayName = 'ProfileDropdown';\n\nconst MobileProfileDropdown: FC<ProfileDropdownProps & NavigationComponentProps> = ({\n    children,\n    ...props\n}) => {\n    const id = '__profile';\n    const [expanded, setExpanded] = useState(false);\n    const { hasNotifications, NotificationsContextProvider } = useNotificationsState();\n    const { onNotificationsUpdate } = useNotificationsContext();\n    const onExpandToggle = (e: MouseEvent<never>) => {\n        e.stopPropagation();\n        setExpanded(!expanded);\n    };\n\n    useEffect(() => {\n        onNotificationsUpdate(id, hasNotifications);\n    }, [hasNotifications, onNotificationsUpdate]);\n\n    return (\n        <NotificationsContextProvider>\n            <InternalSideNavigationGroup\n                id={id}\n                to={undefined}\n                title=\"Profile\"\n                icon={SvgAccountInactive}\n                iconActive={SvgAccountActive}\n                isActive={expanded}\n                {...props}\n                submenuExpanded={expanded}\n                onExpandToggle={onExpandToggle}\n                onClick={onExpandToggle}\n                tag={{ value: hasNotifications }}\n            >\n                {children}\n            </InternalSideNavigationGroup>\n        </NotificationsContextProvider>\n    );\n};\n\nconst ProfileDropdownDivider: FC = () => {\n    const { breakpoint } = useTitanLayoutContext();\n    return breakpoint.isMobile ? (\n        <InternalSideNavigationGroupDivider />\n    ) : (\n        <DesktopProfileDropdown.Divider />\n    );\n};\n\nconst getText = (children: any, text: any): string | undefined => {\n    if (typeof children === 'string') {\n        return children;\n    }\n\n    if (typeof text === 'string') {\n        return text;\n    }\n\n    return undefined;\n};\n\nconst getTag = (\n    tag: ProfileDropdownLinkProps['tag'],\n    counter: ProfileDropdownLinkProps['counter']\n): boolean => {\n    return !!tag?.value || !!counter;\n};\n\nconst ProfileDropdownSection: FC<ProfileDropdownSectionProps> = props => {\n    const { breakpoint } = useTitanLayoutContext();\n    return breakpoint.isMobile ? (\n        <MobileProfileDropdownSection {...props} />\n    ) : (\n        <DesktopProfileDropdown.Section {...props} />\n    );\n};\nconst MobileProfileDropdownSection: FC<ProfileDropdownSectionProps> = ({\n    children,\n    text,\n    tooltip,\n    title,\n    ...props\n}) => {\n    const sectionText = getText(children, text);\n    const { onNotificationsUpdate } = useNotificationsContext();\n    onNotificationsUpdate(props.id, getTag(props.tag, props.counter));\n\n    return sectionText ? (\n        <InternalSideNavigationGroupTrigger {...props} title={sectionText} />\n    ) : null;\n};\n\nconst ProfileDropdownLink: FC<ProfileDropdownLinkProps> = props => {\n    const { breakpoint, NavigationComponent } = useTitanLayoutContext();\n    return breakpoint.isMobile ? (\n        <MobileProfileDropdownLink {...props} navigationComponent={NavigationComponent} />\n    ) : (\n        <DesktopProfileDropdown.Link {...props} />\n    );\n};\nconst MobileProfileDropdownLink: FC<ProfileDropdownLinkProps & NavigationComponentProps> = ({\n    external,\n    to,\n    tooltip,\n    text,\n    children,\n    navigationComponent,\n    ...props\n}) => {\n    const { onNotificationsUpdate } = useNotificationsContext();\n    const linkText = getText(children, text);\n    const isExternalLink = external ?? to?.startsWith('http');\n    onNotificationsUpdate(props.id, getTag(props.tag, props.counter));\n\n    return linkText ? (\n        <InternalSideNavigationGroupLink\n            {...props}\n            to={to}\n            title={linkText}\n            navigationComponent={isExternalLink ? ExternalNavComponent : navigationComponent}\n        />\n    ) : null;\n};\n\nexport const ProfileDropdown = Object.assign(ProfileDropdownContent, {\n    Divider: ProfileDropdownDivider,\n    Link: ProfileDropdownLink,\n    Section: ProfileDropdownSection,\n});\n"],"names":["SvgAccountActive","SvgAccountInactive","useEffect","useState","NavigationComponentContext","ProfileDropdown","DesktopProfileDropdown","useTitanLayoutContext","InternalSideNavigationGroup","InternalSideNavigationGroupDivider","InternalSideNavigationGroupLink","InternalSideNavigationGroupTrigger","useNotificationsContext","useNotificationsState","ExternalNavComponent","children","isActive","to","activeClassName","props","a","href","ProfileDropdownContent","isTitanLayout","breakpoint","NavigationComponent","isMobile","MobileProfileDropdown","navigationComponent","Provider","value","displayName","id","expanded","setExpanded","hasNotifications","NotificationsContextProvider","onNotificationsUpdate","onExpandToggle","e","stopPropagation","undefined","title","icon","iconActive","submenuExpanded","onClick","tag","ProfileDropdownDivider","Divider","getText","text","getTag","counter","ProfileDropdownSection","MobileProfileDropdownSection","Section","tooltip","sectionText","ProfileDropdownLink","MobileProfileDropdownLink","Link","external","linkText","isExternalLink","startsWith","Object","assign"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/titan-layout/layout-profile.tsx"],"sourcesContent":["import SvgAccountActive from '@servicetitan/anvil2/assets/icons/st/gnav_account_active.svg';\nimport SvgAccountInactive from '@servicetitan/anvil2/assets/icons/st/gnav_account_inactive.svg';\n\nimport { FC, MouseEvent, useEffect, useState } from 'react';\nimport { NavLinkComponentProps, NavigationComponentContext } from '../../utils/navigation-context';\nimport {\n    ProfileDropdown as DesktopProfileDropdown,\n    ProfileDropdownLinkProps,\n    ProfileDropdownProps,\n    ProfileDropdownSectionProps,\n} from '../profile-dropdown/profile-dropdown';\nimport { NavigationComponentProps } from './interface-internal';\nimport { useTitanLayoutContext } from './layout-context';\nimport {\n    InternalSideNavigationGroup,\n    InternalSideNavigationGroupDivider,\n    InternalSideNavigationGroupLink,\n    InternalSideNavigationGroupTrigger,\n} from './layout-sidebar-links-internal';\nimport { useNotificationsContext, useNotificationsState } from './notifications-context';\n\nexport type {\n    ProfileDropdownProps,\n    ProfileDropdownSectionProps,\n    ProfileDropdownLinkProps,\n} from '../profile-dropdown/profile-dropdown';\n\nconst ExternalNavComponent: FC<NavLinkComponentProps> = ({\n    children,\n    isActive,\n    to,\n    activeClassName,\n    ...props\n}) => (\n    <a {...props} href={to}>\n        {children}\n    </a>\n);\n\nconst ProfileDropdownContent: FC<ProfileDropdownProps> = props => {\n    const { isTitanLayout, breakpoint, NavigationComponent } = useTitanLayoutContext();\n    return breakpoint.isMobile ? (\n        <MobileProfileDropdown {...props} navigationComponent={NavigationComponent} />\n    ) : isTitanLayout ? (\n        <NavigationComponentContext.Provider value={NavigationComponent}>\n            <DesktopProfileDropdown {...props} />\n        </NavigationComponentContext.Provider>\n    ) : (\n        <DesktopProfileDropdown {...props} />\n    );\n};\nProfileDropdownContent.displayName = 'ProfileDropdown';\nconst profileId = '--profile';\n\nconst MobileProfileDropdown: FC<ProfileDropdownProps & NavigationComponentProps> = ({\n    children,\n    ...props\n}) => {\n    const [expanded, setExpanded] = useState(false);\n    const { hasNotifications, NotificationsContextProvider } = useNotificationsState();\n    const { onNotificationsUpdate } = useNotificationsContext();\n    const onExpandToggle = (e: MouseEvent<never>) => {\n        e.stopPropagation();\n        setExpanded(!expanded);\n    };\n\n    useEffect(() => {\n        onNotificationsUpdate(profileId, hasNotifications);\n    }, [hasNotifications, onNotificationsUpdate]);\n\n    return (\n        <NotificationsContextProvider>\n            <InternalSideNavigationGroup\n                id={profileId}\n                to={undefined}\n                title=\"Profile\"\n                icon={SvgAccountInactive}\n                iconActive={SvgAccountActive}\n                isActive={expanded}\n                {...props}\n                submenuExpanded={expanded}\n                onExpandToggle={onExpandToggle}\n                onClick={onExpandToggle}\n                tag={{ value: hasNotifications }}\n            >\n                {children}\n            </InternalSideNavigationGroup>\n        </NotificationsContextProvider>\n    );\n};\n\nconst ProfileDropdownDivider: FC = () => {\n    const { breakpoint } = useTitanLayoutContext();\n    return breakpoint.isMobile ? (\n        <InternalSideNavigationGroupDivider />\n    ) : (\n        <DesktopProfileDropdown.Divider />\n    );\n};\n\nconst getText = (children: any, text: any): string | undefined => {\n    if (typeof children === 'string') {\n        return children;\n    }\n\n    if (typeof text === 'string') {\n        return text;\n    }\n\n    return undefined;\n};\n\nconst getTag = (\n    tag: ProfileDropdownLinkProps['tag'],\n    counter: ProfileDropdownLinkProps['counter']\n): boolean => {\n    return !!tag?.value || !!counter;\n};\n\nconst ProfileDropdownSection: FC<ProfileDropdownSectionProps> = props => {\n    const { breakpoint } = useTitanLayoutContext();\n    return breakpoint.isMobile ? (\n        <MobileProfileDropdownSection {...props} />\n    ) : (\n        <DesktopProfileDropdown.Section {...props} />\n    );\n};\nconst MobileProfileDropdownSection: FC<ProfileDropdownSectionProps> = ({\n    children,\n    text,\n    tooltip,\n    title,\n    ...props\n}) => {\n    const sectionText = getText(children, text);\n    const { onNotificationsUpdate } = useNotificationsContext();\n    onNotificationsUpdate(props.id, getTag(props.tag, props.counter));\n\n    return sectionText ? (\n        <InternalSideNavigationGroupTrigger {...props} title={sectionText} />\n    ) : null;\n};\n\nconst ProfileDropdownLink: FC<ProfileDropdownLinkProps> = props => {\n    const { breakpoint, NavigationComponent } = useTitanLayoutContext();\n    return breakpoint.isMobile ? (\n        <MobileProfileDropdownLink {...props} navigationComponent={NavigationComponent} />\n    ) : (\n        <DesktopProfileDropdown.Link {...props} />\n    );\n};\nconst MobileProfileDropdownLink: FC<ProfileDropdownLinkProps & NavigationComponentProps> = ({\n    external,\n    to,\n    tooltip,\n    text,\n    children,\n    navigationComponent,\n    ...props\n}) => {\n    const { onNotificationsUpdate } = useNotificationsContext();\n    const linkText = getText(children, text);\n    const isExternalLink = external ?? to?.startsWith('http');\n    onNotificationsUpdate(props.id, getTag(props.tag, props.counter));\n\n    return linkText ? (\n        <InternalSideNavigationGroupLink\n            {...props}\n            to={to}\n            title={linkText}\n            parentId={profileId}\n            navigationComponent={isExternalLink ? ExternalNavComponent : navigationComponent}\n        />\n    ) : null;\n};\n\nexport const ProfileDropdown = Object.assign(ProfileDropdownContent, {\n    Divider: ProfileDropdownDivider,\n    Link: ProfileDropdownLink,\n    Section: ProfileDropdownSection,\n});\n"],"names":["SvgAccountActive","SvgAccountInactive","useEffect","useState","NavigationComponentContext","ProfileDropdown","DesktopProfileDropdown","useTitanLayoutContext","InternalSideNavigationGroup","InternalSideNavigationGroupDivider","InternalSideNavigationGroupLink","InternalSideNavigationGroupTrigger","useNotificationsContext","useNotificationsState","ExternalNavComponent","children","isActive","to","activeClassName","props","a","href","ProfileDropdownContent","isTitanLayout","breakpoint","NavigationComponent","isMobile","MobileProfileDropdown","navigationComponent","Provider","value","displayName","profileId","expanded","setExpanded","hasNotifications","NotificationsContextProvider","onNotificationsUpdate","onExpandToggle","e","stopPropagation","id","undefined","title","icon","iconActive","submenuExpanded","onClick","tag","ProfileDropdownDivider","Divider","getText","text","getTag","counter","ProfileDropdownSection","MobileProfileDropdownSection","Section","tooltip","sectionText","ProfileDropdownLink","MobileProfileDropdownLink","Link","external","linkText","isExternalLink","startsWith","parentId","Object","assign"],"mappings":"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"}

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

@@ -30,7 +30,9 @@ export declare const InternalSideNavigationLink: FC<InternalSideNavigationLinkPr
 export declare const InternalSideNavigationTrigger: FC<Omit<InternalSideNavigationLinkProps, 'to' | 'navigationComponent'> & {
     onClick?: (e: MouseEvent<never>) => void;
 }>;
-export declare const InternalSideNavigationGroupLink: FC<NavigationSubmenuItemData & NavigationComponentProps>;
+export declare const InternalSideNavigationGroupLink: FC<NavigationSubmenuItemData & NavigationComponentProps & {
+    parentId: string;
+}>;
 export declare const InternalSideNavigationGroupTrigger: FC<Omit<NavigationSubmenuItemData, 'to'> & {
     onClick?: (e: MouseEvent<any>) => void;
 }>;

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":"AAKA,OAAO,EAAE,EAAE,EAAY,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAEvF,OAAO,EAAY,aAAa,EAAE,MAAM,cAAc,CAAC;AACvD,OAAO,EAAE,8BAA8B,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AAGhE,MAAM,WAAW,sCACb,SAAQ,IAAI,CAAC,kBAAkB,EAAE,UAAU,GAAG,IAAI,GAAG,SAAS,GAAG,KAAK,CAAC;IACvE,eAAe,EAAE,OAAO,GAAG,SAAS,CAAC;IACrC,GAAG,EAAE,aAAa,GAAG,SAAS,CAAC;IAC/B,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;CACnD;AAED,eAAO,MAAM,iCAAiC,EAAE,EAAE,CAAC,sCAAsC,CAqExF,CAAC;AAEF,MAAM,WAAW,+BACb,SAAQ,IAAI,CAAC,kBAAkB,EAAE,UAAU,GAAG,SAAS,GAAG,KAAK,CAAC,EAC5D,wBAAwB;IAC5B,eAAe,EAAE,OAAO,GAAG,SAAS,CAAC;IACrC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,GAAG,EAAE,aAAa,GAAG,SAAS,CAAC;IAC/B,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;CACnD;AAED,eAAO,MAAM,uCAAuC,GAAI,+EASrD,IAAI,CAAC,8BAA8B,EAAE,UAAU,GAAG,KAAK,CAAC,GAAG;IAC1D,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,MAAM,EAAE,OAAO,CAAC;CACnB;;;;CAQC,CAAC;AAEH,qDAAqD;AACrD,eAAO,MAAM,0BAA0B,EAAE,EAAE,CAAC,+BAA+B,CA8B1E,CAAC;AAEF,wDAAwD;AACxD,eAAO,MAAM,6BAA6B,EAAE,EAAE,CAC1C,IAAI,CAAC,+BAA+B,EAAE,IAAI,GAAG,qBAAqB,CAAC,GAAG;IAClE,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;CAC5C,CAoBJ,CAAC;AAEF,eAAO,MAAM,+BAA+B,EAAE,EAAE,CAC5C,yBAAyB,GAAG,wBAAwB,CA4BvD,CAAC;AAEF,eAAO,MAAM,kCAAkC,EAAE,EAAE,CAC/C,IAAI,CAAC,yBAAyB,EAAE,IAAI,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,GAAG,CAAC,KAAK,IAAI,CAAA;CAAE,CAkBrF,CAAC;AAEF,eAAO,MAAM,kCAAkC,+CAE9C,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,EAAE,CACxC,IAAI,CAAC,kBAAkB,EAAE,KAAK,GAAG,SAAS,GAAG,IAAI,CAAC,GAC9C,wBAAwB,GAAG;IACvB,QAAQ,EAAE,SAAS,CAAC;IACpB,eAAe,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;IAChD,GAAG,EAAE,aAAa,GAAG,SAAS,CAAC;IAC/B,EAAE,EAAE,kBAAkB,CAAC,IAAI,CAAC,GAAG,SAAS,CAAC;IACzC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;CAC5C,CA8BR,CAAC"}
+{"version":3,"file":"layout-sidebar-links-internal.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-sidebar-links-internal.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,EAAE,EAAY,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAEvF,OAAO,EAAY,aAAa,EAAE,MAAM,cAAc,CAAC;AACvD,OAAO,EAAE,8BAA8B,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AAGhE,MAAM,WAAW,sCACb,SAAQ,IAAI,CAAC,kBAAkB,EAAE,UAAU,GAAG,IAAI,GAAG,SAAS,GAAG,KAAK,CAAC;IACvE,eAAe,EAAE,OAAO,GAAG,SAAS,CAAC;IACrC,GAAG,EAAE,aAAa,GAAG,SAAS,CAAC;IAC/B,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;CACnD;AAED,eAAO,MAAM,iCAAiC,EAAE,EAAE,CAAC,sCAAsC,CA4ExF,CAAC;AAEF,MAAM,WAAW,+BACb,SAAQ,IAAI,CAAC,kBAAkB,EAAE,UAAU,GAAG,SAAS,GAAG,KAAK,CAAC,EAC5D,wBAAwB;IAC5B,eAAe,EAAE,OAAO,GAAG,SAAS,CAAC;IACrC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,GAAG,EAAE,aAAa,GAAG,SAAS,CAAC;IAC/B,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;CACnD;AAED,eAAO,MAAM,uCAAuC,GAAI,+EASrD,IAAI,CAAC,8BAA8B,EAAE,UAAU,GAAG,KAAK,CAAC,GAAG;IAC1D,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,MAAM,EAAE,OAAO,CAAC;CACnB;;;;CAQC,CAAC;AAEH,qDAAqD;AACrD,eAAO,MAAM,0BAA0B,EAAE,EAAE,CAAC,+BAA+B,CA8B1E,CAAC;AAEF,wDAAwD;AACxD,eAAO,MAAM,6BAA6B,EAAE,EAAE,CAC1C,IAAI,CAAC,+BAA+B,EAAE,IAAI,GAAG,qBAAqB,CAAC,GAAG;IAClE,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;CAC5C,CAoBJ,CAAC;AAEF,eAAO,MAAM,+BAA+B,EAAE,EAAE,CAC5C,yBAAyB,GAAG,wBAAwB,GAAG;IAAE,QAAQ,EAAE,MAAM,CAAA;CAAE,CA6B9E,CAAC;AAEF,eAAO,MAAM,kCAAkC,EAAE,EAAE,CAC/C,IAAI,CAAC,yBAAyB,EAAE,IAAI,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,GAAG,CAAC,KAAK,IAAI,CAAA;CAAE,CAkBrF,CAAC;AAEF,eAAO,MAAM,kCAAkC,+CAE9C,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,EAAE,CACxC,IAAI,CAAC,kBAAkB,EAAE,KAAK,GAAG,SAAS,GAAG,IAAI,CAAC,GAC9C,wBAAwB,GAAG;IACvB,QAAQ,EAAE,SAAS,CAAC;IACpB,eAAe,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;IAChD,GAAG,EAAE,aAAa,GAAG,SAAS,CAAC;IAC/B,EAAE,EAAE,kBAAkB,CAAC,IAAI,CAAC,GAAG,SAAS,CAAC;IACzC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;CAC5C,CA+BR,CAAC"}

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

@@ -29,6 +29,7 @@ export const InternalSideNavigationItemContent = ({ icon, iconActive, iconClassN
                     }),
                     /*#__PURE__*/ _jsx("div", {
                         className: Styles.navItemTextExpanded,
+                        "data-cy": "nav-item-label",
                         children: title
                     }),
                     !!tag && /*#__PURE__*/ _jsx(BadgeTag, {
@@ -46,6 +47,7 @@ export const InternalSideNavigationItemContent = ({ icon, iconActive, iconClassN
                             }),
                             /*#__PURE__*/ _jsx("div", {
                                 className: Styles.navItemGroupToggleClick,
+                                "data-cy": "nav-item-group-expand",
                                 onClick: onExpandToggle
                             })
                         ]
@@ -56,6 +58,7 @@ export const InternalSideNavigationItemContent = ({ icon, iconActive, iconClassN
                 className: classNames(Styles.navItemTextCollapsed, {
                     [Styles.navItemTextSmall]: !!title && title.length >= 10
                 }),
+                "data-cy": "nav-item-label",
                 children: title
             })
         ]
@@ -105,10 +108,10 @@ export const internalNavigationContentContainerProps = ({ className, icon, iconA
         })
     });
 };
-export const InternalSideNavigationGroupLink = ({ id, counter, tag, title, to, isActive, navigationComponent: NavigationComponent, ...rest })=>{
+export const InternalSideNavigationGroupLink = ({ id, counter, parentId, tag, title, to, isActive, navigationComponent: NavigationComponent, ...rest })=>{
     return /*#__PURE__*/ _jsxs(NavigationComponent, {
-        "data-cy": `navigation-item-${id}`,
-        "data-pendo": `navigation-item-${id}`,
+        "data-cy": `navigation-item-${parentId}--${id}`,
+        "data-pendo": `navigation-item-${parentId}--${id}`,
         ...rest,
         to: to,
         className: classNames(Styles.submenuItem, Styles.submenuLink, {
@@ -175,6 +178,7 @@ export const InternalSideNavigationGroup = ({ children, submenuExpanded, to, onE
                 className: classNames(Styles.submenuWrapper, {
                     [Styles.submenuWrapperCollapsed]: !submenuExpanded
                 }),
+                "data-cy": `navigation-submenu-${props.id}`,
                 children: /*#__PURE__*/ _jsx("div", {
                     className: Styles.submenu,
                     children: children

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 { Icon } 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';\n\nimport classNames from 'classnames';\nimport { FC, Fragment, MouseEvent, ReactNode } from 'react';\nimport { NavigationItemData, NavigationSubmenuItemData } from '../../utils/navigation';\nimport { getCounterTag } from '../../utils/side-nav';\nimport { BadgeTag, BadgeTagProps } from '../badge-tag';\nimport { TitanLayoutSidebarTriggerProps } from './interface';\nimport { NavigationComponentProps } from './interface-internal';\nimport * as Styles from './layout-sidebar.module.less';\n\nexport interface InternalSideNavigationItemContentProps\n    extends Omit<NavigationItemData, 'iconName' | 'to' | 'counter' | 'tag'> {\n    submenuExpanded: boolean | undefined;\n    tag: BadgeTagProps | undefined;\n    onExpandToggle?: (e: MouseEvent<never>) => void;\n}\n\nexport const InternalSideNavigationItemContent: FC<InternalSideNavigationItemContentProps> = ({\n    icon,\n    iconActive,\n    iconClassName,\n    iconComponent: IconComponent,\n    tag,\n    title,\n    submenuExpanded,\n    onExpandToggle,\n}) => (\n    <Fragment>\n        <div className={Styles.navItemIconWrapper}>\n            {IconComponent ? (\n                <i className={classNames(Styles.navIcon, iconClassName)}>\n                    <IconComponent />\n                </i>\n            ) : (\n                <Fragment>\n                    {icon && (\n                        <Icon\n                            svg={icon}\n                            className={classNames(\n                                Styles.navIcon,\n                                Styles.navIconInactive,\n                                iconClassName\n                            )}\n                        />\n                    )}\n                    {iconActive && (\n                        <Icon\n                            svg={iconActive}\n                            className={classNames(\n                                Styles.navIcon,\n                                Styles.navIconActive,\n                                iconClassName\n                            )}\n                        />\n                    )}\n                </Fragment>\n            )}\n\n            <div className={Styles.navItemTextExpanded}>{title}</div>\n            {!!tag && (\n                <BadgeTag\n                    data={tag}\n                    className={Styles.navItemCounter}\n                    longClassName={Styles.navItemCounterLong}\n                />\n            )}\n            {typeof submenuExpanded === 'boolean' && (\n                <div className={Styles.navItemGroupToggleWrapper}>\n                    <Icon\n                        svg={submenuExpanded ? SvgGroupCollapse : SvgGroupExpand}\n                        className={Styles.navItemGroupToggle}\n                        onClick={onExpandToggle}\n                    />\n                    <div className={Styles.navItemGroupToggleClick} onClick={onExpandToggle} />\n                </div>\n            )}\n        </div>\n\n        <div\n            className={classNames(Styles.navItemTextCollapsed, {\n                [Styles.navItemTextSmall]: !!title && title.length >= 10,\n            })}\n        >\n            {title}\n        </div>\n    </Fragment>\n);\n\nexport interface InternalSideNavigationLinkProps\n    extends Omit<NavigationItemData, 'iconName' | 'counter' | 'tag'>,\n        NavigationComponentProps {\n    submenuExpanded: boolean | undefined;\n    dataPrefix?: string;\n    tag: BadgeTagProps | undefined;\n    onExpandToggle?: (e: MouseEvent<never>) => void;\n}\n\nexport const internalNavigationContentContainerProps = ({\n    className,\n    icon,\n    iconActive,\n    iconComponent,\n    id,\n    isActive,\n    prefix,\n    isLink,\n}: Omit<TitanLayoutSidebarTriggerProps, 'isActive' | 'tag'> & {\n    prefix: string;\n    isActive?: any;\n    isLink: boolean;\n}) => ({\n    'data-cy': `${prefix}-${id}`,\n    'data-pendo': `${prefix}-${id}`,\n    'className': classNames(Styles.navItem, className, {\n        [Styles.navLink]: isLink,\n        [Styles.navItemActive]: isActive === true,\n        [Styles.navItemIconSwitch]: !!icon && !!iconActive && !iconComponent,\n    }),\n});\n\n/** Side Navigation menu item (for internal usage) */\nexport const InternalSideNavigationLink: FC<InternalSideNavigationLinkProps> = ({\n    to,\n    className,\n    dataPrefix,\n    isActive,\n    navigationComponent: NavigationComponent,\n    submenuExpanded,\n    onExpandToggle,\n    ...props\n}) => {\n    return (\n        <NavigationComponent\n            {...internalNavigationContentContainerProps({\n                ...props,\n                prefix: dataPrefix ?? 'navigation-item',\n                className,\n                isActive,\n                isLink: true,\n            })}\n            to={to}\n            isActive={typeof isActive === 'function' ? isActive : undefined}\n            activeClassName={Styles.navItemActive}\n        >\n            <InternalSideNavigationItemContent\n                submenuExpanded={submenuExpanded}\n                onExpandToggle={onExpandToggle}\n                {...props}\n            />\n        </NavigationComponent>\n    );\n};\n\n/** Side Navigation menu trigger (for internal usage) */\nexport const InternalSideNavigationTrigger: FC<\n    Omit<InternalSideNavigationLinkProps, 'to' | 'navigationComponent'> & {\n        onClick?: (e: MouseEvent<never>) => void;\n    }\n> = ({ className, dataPrefix, isActive, submenuExpanded, onExpandToggle, onClick, ...props }) => {\n    return (\n        <div\n            {...internalNavigationContentContainerProps({\n                ...props,\n                prefix: dataPrefix ?? 'navigation-item',\n                className,\n                isActive,\n                isLink: !!onClick,\n            })}\n            onClick={onClick}\n        >\n            <InternalSideNavigationItemContent\n                submenuExpanded={submenuExpanded}\n                onExpandToggle={onExpandToggle}\n                {...props}\n            />\n        </div>\n    );\n};\n\nexport const InternalSideNavigationGroupLink: FC<\n    NavigationSubmenuItemData & NavigationComponentProps\n> = ({\n    id,\n    counter,\n    tag,\n    title,\n    to,\n    isActive,\n    navigationComponent: NavigationComponent,\n    ...rest\n}) => {\n    return (\n        <NavigationComponent\n            key={id}\n            data-cy={`navigation-item-${id}`}\n            data-pendo={`navigation-item-${id}`}\n            {...rest}\n            to={to}\n            className={classNames(Styles.submenuItem, Styles.submenuLink, {\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={getCounterTag(counter, tag)} className={Styles.submenuLinkCounter} />\n        </NavigationComponent>\n    );\n};\n\nexport const InternalSideNavigationGroupTrigger: FC<\n    Omit<NavigationSubmenuItemData, 'to'> & { onClick?: (e: MouseEvent<any>) => void }\n> = ({ id, counter, onClick, tag, title, isActive, ...rest }) => {\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]: !!onClick,\n                [Styles.submenuLinkActive]: isActive === true,\n            })}\n            onClick={onClick}\n        >\n            <span>{title}</span>\n            <BadgeTag data={getCounterTag(counter, 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    Omit<NavigationItemData, 'tag' | 'counter' | 'to'> &\n        NavigationComponentProps & {\n            children: ReactNode;\n            submenuExpanded: boolean;\n            onExpandToggle?: (e: MouseEvent<never>) => void;\n            tag: BadgeTagProps | undefined;\n            to: NavigationItemData['to'] | undefined;\n            onClick?: (e: MouseEvent<never>) => void;\n        }\n> = ({ children, submenuExpanded, to, onExpandToggle, onClick, ...props }) => {\n    return (\n        <div className={classNames(Styles.navGroupWrapper)}>\n            <div className={Styles.navGroupItem}>\n                {to ? (\n                    <InternalSideNavigationLink\n                        {...props}\n                        to={to}\n                        submenuExpanded={submenuExpanded}\n                        onExpandToggle={onExpandToggle}\n                    />\n                ) : (\n                    <InternalSideNavigationTrigger\n                        {...props}\n                        submenuExpanded={submenuExpanded}\n                        onExpandToggle={onExpandToggle}\n                        onClick={onClick}\n                    />\n                )}\n            </div>\n            <div\n                className={classNames(Styles.submenuWrapper, {\n                    [Styles.submenuWrapperCollapsed]: !submenuExpanded,\n                })}\n            >\n                <div className={Styles.submenu}>{children}</div>\n            </div>\n        </div>\n    );\n};\n"],"names":["Icon","SvgGroupCollapse","SvgGroupExpand","classNames","Fragment","getCounterTag","BadgeTag","Styles","InternalSideNavigationItemContent","icon","iconActive","iconClassName","iconComponent","IconComponent","tag","title","submenuExpanded","onExpandToggle","div","className","navItemIconWrapper","i","navIcon","svg","navIconInactive","navIconActive","navItemTextExpanded","data","navItemCounter","longClassName","navItemCounterLong","navItemGroupToggleWrapper","navItemGroupToggle","onClick","navItemGroupToggleClick","navItemTextCollapsed","navItemTextSmall","length","internalNavigationContentContainerProps","id","isActive","prefix","isLink","navItem","navLink","navItemActive","navItemIconSwitch","InternalSideNavigationLink","to","dataPrefix","navigationComponent","NavigationComponent","props","undefined","activeClassName","InternalSideNavigationTrigger","InternalSideNavigationGroupLink","counter","rest","data-cy","data-pendo","submenuItem","submenuLink","submenuLinkActive","span","submenuLinkCounter","InternalSideNavigationGroupTrigger","InternalSideNavigationGroupDivider","divider","InternalSideNavigationGroup","children","navGroupWrapper","navGroupItem","submenuWrapper","submenuWrapperCollapsed","submenu"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/titan-layout/layout-sidebar-links-internal.tsx"],"sourcesContent":["import { Icon } 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';\n\nimport classNames from 'classnames';\nimport { FC, Fragment, MouseEvent, ReactNode } from 'react';\nimport { NavigationItemData, NavigationSubmenuItemData } from '../../utils/navigation';\nimport { getCounterTag } from '../../utils/side-nav';\nimport { BadgeTag, BadgeTagProps } from '../badge-tag';\nimport { TitanLayoutSidebarTriggerProps } from './interface';\nimport { NavigationComponentProps } from './interface-internal';\nimport * as Styles from './layout-sidebar.module.less';\n\nexport interface InternalSideNavigationItemContentProps\n    extends Omit<NavigationItemData, 'iconName' | 'to' | 'counter' | 'tag'> {\n    submenuExpanded: boolean | undefined;\n    tag: BadgeTagProps | undefined;\n    onExpandToggle?: (e: MouseEvent<never>) => void;\n}\n\nexport const InternalSideNavigationItemContent: FC<InternalSideNavigationItemContentProps> = ({\n    icon,\n    iconActive,\n    iconClassName,\n    iconComponent: IconComponent,\n    tag,\n    title,\n    submenuExpanded,\n    onExpandToggle,\n}) => (\n    <Fragment>\n        <div className={Styles.navItemIconWrapper}>\n            {IconComponent ? (\n                <i className={classNames(Styles.navIcon, iconClassName)}>\n                    <IconComponent />\n                </i>\n            ) : (\n                <Fragment>\n                    {icon && (\n                        <Icon\n                            svg={icon}\n                            className={classNames(\n                                Styles.navIcon,\n                                Styles.navIconInactive,\n                                iconClassName\n                            )}\n                        />\n                    )}\n                    {iconActive && (\n                        <Icon\n                            svg={iconActive}\n                            className={classNames(\n                                Styles.navIcon,\n                                Styles.navIconActive,\n                                iconClassName\n                            )}\n                        />\n                    )}\n                </Fragment>\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            {typeof submenuExpanded === 'boolean' && (\n                <div className={Styles.navItemGroupToggleWrapper}>\n                    <Icon\n                        svg={submenuExpanded ? SvgGroupCollapse : SvgGroupExpand}\n                        className={Styles.navItemGroupToggle}\n                        onClick={onExpandToggle}\n                    />\n                    <div\n                        className={Styles.navItemGroupToggleClick}\n                        data-cy=\"nav-item-group-expand\"\n                        onClick={onExpandToggle}\n                    />\n                </div>\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\nexport interface InternalSideNavigationLinkProps\n    extends Omit<NavigationItemData, 'iconName' | 'counter' | 'tag'>,\n        NavigationComponentProps {\n    submenuExpanded: boolean | undefined;\n    dataPrefix?: string;\n    tag: BadgeTagProps | undefined;\n    onExpandToggle?: (e: MouseEvent<never>) => void;\n}\n\nexport const internalNavigationContentContainerProps = ({\n    className,\n    icon,\n    iconActive,\n    iconComponent,\n    id,\n    isActive,\n    prefix,\n    isLink,\n}: Omit<TitanLayoutSidebarTriggerProps, 'isActive' | 'tag'> & {\n    prefix: string;\n    isActive?: any;\n    isLink: boolean;\n}) => ({\n    'data-cy': `${prefix}-${id}`,\n    'data-pendo': `${prefix}-${id}`,\n    'className': classNames(Styles.navItem, className, {\n        [Styles.navLink]: isLink,\n        [Styles.navItemActive]: isActive === true,\n        [Styles.navItemIconSwitch]: !!icon && !!iconActive && !iconComponent,\n    }),\n});\n\n/** Side Navigation menu item (for internal usage) */\nexport const InternalSideNavigationLink: FC<InternalSideNavigationLinkProps> = ({\n    to,\n    className,\n    dataPrefix,\n    isActive,\n    navigationComponent: NavigationComponent,\n    submenuExpanded,\n    onExpandToggle,\n    ...props\n}) => {\n    return (\n        <NavigationComponent\n            {...internalNavigationContentContainerProps({\n                ...props,\n                prefix: dataPrefix ?? 'navigation-item',\n                className,\n                isActive,\n                isLink: true,\n            })}\n            to={to}\n            isActive={typeof isActive === 'function' ? isActive : undefined}\n            activeClassName={Styles.navItemActive}\n        >\n            <InternalSideNavigationItemContent\n                submenuExpanded={submenuExpanded}\n                onExpandToggle={onExpandToggle}\n                {...props}\n            />\n        </NavigationComponent>\n    );\n};\n\n/** Side Navigation menu trigger (for internal usage) */\nexport const InternalSideNavigationTrigger: FC<\n    Omit<InternalSideNavigationLinkProps, 'to' | 'navigationComponent'> & {\n        onClick?: (e: MouseEvent<never>) => void;\n    }\n> = ({ className, dataPrefix, isActive, submenuExpanded, onExpandToggle, onClick, ...props }) => {\n    return (\n        <div\n            {...internalNavigationContentContainerProps({\n                ...props,\n                prefix: dataPrefix ?? 'navigation-item',\n                className,\n                isActive,\n                isLink: !!onClick,\n            })}\n            onClick={onClick}\n        >\n            <InternalSideNavigationItemContent\n                submenuExpanded={submenuExpanded}\n                onExpandToggle={onExpandToggle}\n                {...props}\n            />\n        </div>\n    );\n};\n\nexport const InternalSideNavigationGroupLink: FC<\n    NavigationSubmenuItemData & NavigationComponentProps & { parentId: string }\n> = ({\n    id,\n    counter,\n    parentId,\n    tag,\n    title,\n    to,\n    isActive,\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, {\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={getCounterTag(counter, tag)} className={Styles.submenuLinkCounter} />\n        </NavigationComponent>\n    );\n};\n\nexport const InternalSideNavigationGroupTrigger: FC<\n    Omit<NavigationSubmenuItemData, 'to'> & { onClick?: (e: MouseEvent<any>) => void }\n> = ({ id, counter, onClick, tag, title, isActive, ...rest }) => {\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]: !!onClick,\n                [Styles.submenuLinkActive]: isActive === true,\n            })}\n            onClick={onClick}\n        >\n            <span>{title}</span>\n            <BadgeTag data={getCounterTag(counter, 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    Omit<NavigationItemData, 'tag' | 'counter' | 'to'> &\n        NavigationComponentProps & {\n            children: ReactNode;\n            submenuExpanded: boolean;\n            onExpandToggle?: (e: MouseEvent<never>) => void;\n            tag: BadgeTagProps | undefined;\n            to: NavigationItemData['to'] | undefined;\n            onClick?: (e: MouseEvent<never>) => void;\n        }\n> = ({ children, submenuExpanded, to, onExpandToggle, onClick, ...props }) => {\n    return (\n        <div className={classNames(Styles.navGroupWrapper)}>\n            <div className={Styles.navGroupItem}>\n                {to ? (\n                    <InternalSideNavigationLink\n                        {...props}\n                        to={to}\n                        submenuExpanded={submenuExpanded}\n                        onExpandToggle={onExpandToggle}\n                    />\n                ) : (\n                    <InternalSideNavigationTrigger\n                        {...props}\n                        submenuExpanded={submenuExpanded}\n                        onExpandToggle={onExpandToggle}\n                        onClick={onClick}\n                    />\n                )}\n            </div>\n            <div\n                className={classNames(Styles.submenuWrapper, {\n                    [Styles.submenuWrapperCollapsed]: !submenuExpanded,\n                })}\n                data-cy={`navigation-submenu-${props.id}`}\n            >\n                <div className={Styles.submenu}>{children}</div>\n            </div>\n        </div>\n    );\n};\n"],"names":["Icon","SvgGroupCollapse","SvgGroupExpand","classNames","Fragment","getCounterTag","BadgeTag","Styles","InternalSideNavigationItemContent","icon","iconActive","iconClassName","iconComponent","IconComponent","tag","title","submenuExpanded","onExpandToggle","div","className","navItemIconWrapper","i","navIcon","svg","navIconInactive","navIconActive","navItemTextExpanded","data-cy","data","navItemCounter","longClassName","navItemCounterLong","navItemGroupToggleWrapper","navItemGroupToggle","onClick","navItemGroupToggleClick","navItemTextCollapsed","navItemTextSmall","length","internalNavigationContentContainerProps","id","isActive","prefix","isLink","navItem","navLink","navItemActive","navItemIconSwitch","InternalSideNavigationLink","to","dataPrefix","navigationComponent","NavigationComponent","props","undefined","activeClassName","InternalSideNavigationTrigger","InternalSideNavigationGroupLink","counter","parentId","rest","data-pendo","submenuItem","submenuLink","submenuLinkActive","span","submenuLinkCounter","InternalSideNavigationGroupTrigger","InternalSideNavigationGroupDivider","divider","InternalSideNavigationGroup","children","navGroupWrapper","navGroupItem","submenuWrapper","submenuWrapperCollapsed","submenu"],"mappings":"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"}

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

@@ -19,7 +19,7 @@ const WrappedLink = ({ children, wrapper: WrapperComponent })=>{
         ...props,
         navigationComponent: NavigationComponent,
         submenuExpanded: undefined,
-        dataPrefix: "navigation-link",
+        dataPrefix: "navigation-item",
         tag: tag
     });
     return wrapper && !isMobile ? /*#__PURE__*/ _jsx(WrappedLink, {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/titan-layout/layout-sidebar-links.tsx"],"sourcesContent":["import { FC, ReactElement } from 'react';\nimport { getCounterTag } from '../../utils/side-nav';\nimport { TitanLayoutSidebarLinkProps, TitanLayoutSidebarTriggerProps } from './interface';\nimport { useTitanLayoutContext } from './layout-context';\nimport {\n    InternalSideNavigationLink,\n    InternalSideNavigationTrigger,\n} from './layout-sidebar-links-internal';\nimport { useNotificationsContext } from './notifications-context';\n\nconst WrappedLink: FC<{\n    children: ReactElement<any>;\n    wrapper: NonNullable<TitanLayoutSidebarLinkProps['wrapper']>;\n}> = ({ children, wrapper: WrapperComponent }) => {\n    const { sidebar } = useTitanLayoutContext();\n    return <WrapperComponent context={sidebar}>{children}</WrapperComponent>;\n};\n\n/** Side Navigation menu link */\nexport function TitanLayoutSidebarLink({ wrapper, ...props }: TitanLayoutSidebarLinkProps) {\n    const {\n        NavigationComponent,\n        breakpoint: { isMobile },\n    } = useTitanLayoutContext();\n    const { onNotificationsUpdate } = useNotificationsContext();\n    const tag = getCounterTag(props.counter, props.tag);\n\n    onNotificationsUpdate(props.id, !!tag);\n\n    const element = (\n        <InternalSideNavigationLink\n            {...props}\n            navigationComponent={NavigationComponent}\n            submenuExpanded={undefined}\n            dataPrefix=\"navigation-link\"\n            tag={tag}\n        />\n    );\n\n    return wrapper && !isMobile ? <WrappedLink wrapper={wrapper}>{element}</WrappedLink> : element;\n}\n\n/** Side Navigation menu trigger */\nexport function TitanLayoutSidebarTrigger({\n    wrapper,\n    onMobileClick,\n    onClick,\n    ...props\n}: TitanLayoutSidebarTriggerProps) {\n    const {\n        breakpoint: { isMobile },\n    } = useTitanLayoutContext();\n    const { onNotificationsUpdate } = useNotificationsContext();\n    const tag = getCounterTag(props.counter, props.tag);\n\n    onNotificationsUpdate(props.id, !!tag);\n\n    const element = (\n        <InternalSideNavigationTrigger\n            {...props}\n            submenuExpanded={undefined}\n            dataPrefix=\"navigation-trigger\"\n            tag={tag}\n            onClick={isMobile && !!onMobileClick ? onMobileClick : onClick}\n        />\n    );\n    return wrapper && (!isMobile || !onMobileClick) ? (\n        <WrappedLink wrapper={wrapper}>{element}</WrappedLink>\n    ) : (\n        element\n    );\n}\n"],"names":["getCounterTag","useTitanLayoutContext","InternalSideNavigationLink","InternalSideNavigationTrigger","useNotificationsContext","WrappedLink","children","wrapper","WrapperComponent","sidebar","context","TitanLayoutSidebarLink","props","NavigationComponent","breakpoint","isMobile","onNotificationsUpdate","tag","counter","id","element","navigationComponent","submenuExpanded","undefined","dataPrefix","TitanLayoutSidebarTrigger","onMobileClick","onClick"],"mappings":";AACA,SAASA,aAAa,QAAQ,uBAAuB;AAErD,SAASC,qBAAqB,QAAQ,mBAAmB;AACzD,SACIC,0BAA0B,EAC1BC,6BAA6B,QAC1B,kCAAkC;AACzC,SAASC,uBAAuB,QAAQ,0BAA0B;AAElE,MAAMC,cAGD,CAAC,EAAEC,QAAQ,EAAEC,SAASC,gBAAgB,EAAE;IACzC,MAAM,EAAEC,OAAO,EAAE,GAAGR;IACpB,qBAAO,KAACO;QAAiBE,SAASD;kBAAUH;;AAChD;AAEA,8BAA8B,GAC9B,OAAO,SAASK,uBAAuB,EAAEJ,OAAO,EAAE,GAAGK,OAAoC;IACrF,MAAM,EACFC,mBAAmB,EACnBC,YAAY,EAAEC,QAAQ,EAAE,EAC3B,GAAGd;IACJ,MAAM,EAAEe,qBAAqB,EAAE,GAAGZ;IAClC,MAAMa,MAAMjB,cAAcY,MAAMM,OAAO,EAAEN,MAAMK,GAAG;IAElDD,sBAAsBJ,MAAMO,EAAE,EAAE,CAAC,CAACF;IAElC,MAAMG,wBACF,KAAClB;QACI,GAAGU,KAAK;QACTS,qBAAqBR;QACrBS,iBAAiBC;QACjBC,YAAW;QACXP,KAAKA;;IAIb,OAAOV,WAAW,CAACQ,yBAAW,KAACV;QAAYE,SAASA;kBAAUa;SAAyBA;AAC3F;AAEA,iCAAiC,GACjC,OAAO,SAASK,0BAA0B,EACtClB,OAAO,EACPmB,aAAa,EACbC,OAAO,EACP,GAAGf,OAC0B;IAC7B,MAAM,EACFE,YAAY,EAAEC,QAAQ,EAAE,EAC3B,GAAGd;IACJ,MAAM,EAAEe,qBAAqB,EAAE,GAAGZ;IAClC,MAAMa,MAAMjB,cAAcY,MAAMM,OAAO,EAAEN,MAAMK,GAAG;IAElDD,sBAAsBJ,MAAMO,EAAE,EAAE,CAAC,CAACF;IAElC,MAAMG,wBACF,KAACjB;QACI,GAAGS,KAAK;QACTU,iBAAiBC;QACjBC,YAAW;QACXP,KAAKA;QACLU,SAASZ,YAAY,CAAC,CAACW,gBAAgBA,gBAAgBC;;IAG/D,OAAOpB,WAAY,CAAA,CAACQ,YAAY,CAACW,aAAY,kBACzC,KAACrB;QAAYE,SAASA;kBAAUa;SAEhCA;AAER"}
+{"version":3,"sources":["../../../src/components/titan-layout/layout-sidebar-links.tsx"],"sourcesContent":["import { FC, ReactElement } from 'react';\nimport { getCounterTag } from '../../utils/side-nav';\nimport { TitanLayoutSidebarLinkProps, TitanLayoutSidebarTriggerProps } from './interface';\nimport { useTitanLayoutContext } from './layout-context';\nimport {\n    InternalSideNavigationLink,\n    InternalSideNavigationTrigger,\n} from './layout-sidebar-links-internal';\nimport { useNotificationsContext } from './notifications-context';\n\nconst WrappedLink: FC<{\n    children: ReactElement<any>;\n    wrapper: NonNullable<TitanLayoutSidebarLinkProps['wrapper']>;\n}> = ({ children, wrapper: WrapperComponent }) => {\n    const { sidebar } = useTitanLayoutContext();\n    return <WrapperComponent context={sidebar}>{children}</WrapperComponent>;\n};\n\n/** Side Navigation menu link */\nexport function TitanLayoutSidebarLink({ wrapper, ...props }: TitanLayoutSidebarLinkProps) {\n    const {\n        NavigationComponent,\n        breakpoint: { isMobile },\n    } = useTitanLayoutContext();\n    const { onNotificationsUpdate } = useNotificationsContext();\n    const tag = getCounterTag(props.counter, props.tag);\n\n    onNotificationsUpdate(props.id, !!tag);\n\n    const element = (\n        <InternalSideNavigationLink\n            {...props}\n            navigationComponent={NavigationComponent}\n            submenuExpanded={undefined}\n            dataPrefix=\"navigation-item\"\n            tag={tag}\n        />\n    );\n\n    return wrapper && !isMobile ? <WrappedLink wrapper={wrapper}>{element}</WrappedLink> : element;\n}\n\n/** Side Navigation menu trigger */\nexport function TitanLayoutSidebarTrigger({\n    wrapper,\n    onMobileClick,\n    onClick,\n    ...props\n}: TitanLayoutSidebarTriggerProps) {\n    const {\n        breakpoint: { isMobile },\n    } = useTitanLayoutContext();\n    const { onNotificationsUpdate } = useNotificationsContext();\n    const tag = getCounterTag(props.counter, props.tag);\n\n    onNotificationsUpdate(props.id, !!tag);\n\n    const element = (\n        <InternalSideNavigationTrigger\n            {...props}\n            submenuExpanded={undefined}\n            dataPrefix=\"navigation-trigger\"\n            tag={tag}\n            onClick={isMobile && !!onMobileClick ? onMobileClick : onClick}\n        />\n    );\n    return wrapper && (!isMobile || !onMobileClick) ? (\n        <WrappedLink wrapper={wrapper}>{element}</WrappedLink>\n    ) : (\n        element\n    );\n}\n"],"names":["getCounterTag","useTitanLayoutContext","InternalSideNavigationLink","InternalSideNavigationTrigger","useNotificationsContext","WrappedLink","children","wrapper","WrapperComponent","sidebar","context","TitanLayoutSidebarLink","props","NavigationComponent","breakpoint","isMobile","onNotificationsUpdate","tag","counter","id","element","navigationComponent","submenuExpanded","undefined","dataPrefix","TitanLayoutSidebarTrigger","onMobileClick","onClick"],"mappings":";AACA,SAASA,aAAa,QAAQ,uBAAuB;AAErD,SAASC,qBAAqB,QAAQ,mBAAmB;AACzD,SACIC,0BAA0B,EAC1BC,6BAA6B,QAC1B,kCAAkC;AACzC,SAASC,uBAAuB,QAAQ,0BAA0B;AAElE,MAAMC,cAGD,CAAC,EAAEC,QAAQ,EAAEC,SAASC,gBAAgB,EAAE;IACzC,MAAM,EAAEC,OAAO,EAAE,GAAGR;IACpB,qBAAO,KAACO;QAAiBE,SAASD;kBAAUH;;AAChD;AAEA,8BAA8B,GAC9B,OAAO,SAASK,uBAAuB,EAAEJ,OAAO,EAAE,GAAGK,OAAoC;IACrF,MAAM,EACFC,mBAAmB,EACnBC,YAAY,EAAEC,QAAQ,EAAE,EAC3B,GAAGd;IACJ,MAAM,EAAEe,qBAAqB,EAAE,GAAGZ;IAClC,MAAMa,MAAMjB,cAAcY,MAAMM,OAAO,EAAEN,MAAMK,GAAG;IAElDD,sBAAsBJ,MAAMO,EAAE,EAAE,CAAC,CAACF;IAElC,MAAMG,wBACF,KAAClB;QACI,GAAGU,KAAK;QACTS,qBAAqBR;QACrBS,iBAAiBC;QACjBC,YAAW;QACXP,KAAKA;;IAIb,OAAOV,WAAW,CAACQ,yBAAW,KAACV;QAAYE,SAASA;kBAAUa;SAAyBA;AAC3F;AAEA,iCAAiC,GACjC,OAAO,SAASK,0BAA0B,EACtClB,OAAO,EACPmB,aAAa,EACbC,OAAO,EACP,GAAGf,OAC0B;IAC7B,MAAM,EACFE,YAAY,EAAEC,QAAQ,EAAE,EAC3B,GAAGd;IACJ,MAAM,EAAEe,qBAAqB,EAAE,GAAGZ;IAClC,MAAMa,MAAMjB,cAAcY,MAAMM,OAAO,EAAEN,MAAMK,GAAG;IAElDD,sBAAsBJ,MAAMO,EAAE,EAAE,CAAC,CAACF;IAElC,MAAMG,wBACF,KAACjB;QACI,GAAGS,KAAK;QACTU,iBAAiBC;QACjBC,YAAW;QACXP,KAAKA;QACLU,SAASZ,YAAY,CAAC,CAACW,gBAAgBA,gBAAgBC;;IAG/D,OAAOpB,WAAY,CAAA,CAACQ,YAAY,CAACW,aAAY,kBACzC,KAACrB;QAAYE,SAASA;kBAAUa;SAEhCA;AAER"}

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

@@ -133,6 +133,7 @@ LayoutSidebar.displayName = 'LayoutSidebar';
         onExpandToggle: onExpandToggle,
         tag: tag,
         children: /*#__PURE__*/ _jsx(SideNavigationGroupContent, {
+            parentId: props.id,
             groups: (_props_submenu_groups = (_props_submenu = props.submenu) === null || _props_submenu === void 0 ? void 0 : _props_submenu.groups) !== null && _props_submenu_groups !== void 0 ? _props_submenu_groups : [],
             navigationComponent: props.navigationComponent
         })
@@ -165,6 +166,7 @@ LayoutSidebar.displayName = 'LayoutSidebar';
                             children: props.title
                         }),
                         /*#__PURE__*/ _jsx(SideNavigationGroupContent, {
+                            parentId: props.id,
                             groups: (_props_submenu_groups1 = (_props_submenu1 = props.submenu) === null || _props_submenu1 === void 0 ? void 0 : _props_submenu1.groups) !== null && _props_submenu_groups1 !== void 0 ? _props_submenu_groups1 : [],
                             navigationComponent: props.navigationComponent
                         })
@@ -174,7 +176,7 @@ LayoutSidebar.displayName = 'LayoutSidebar';
         ]
     });
 };
-const SideNavigationGroupContent = ({ groups, navigationComponent })=>{
+const SideNavigationGroupContent = ({ groups, parentId, navigationComponent })=>{
     return /*#__PURE__*/ _jsx(Fragment, {
         children: groups.reduce((out, group, index)=>{
             var _group_title;
@@ -189,11 +191,12 @@ const SideNavigationGroupContent = ({ groups, navigationComponent })=>{
                     [Styles.submenuGroupHeaderEmpty]: !title
                 }),
                 children: title
-            }, `:group:${index}:title`));
+            }, `:group:${parentId}:${index}:title`));
             out.push(...group.links.map((link, index)=>/*#__PURE__*/ _jsx(InternalSideNavigationGroupLink, {
                     ...link,
+                    parentId: parentId,
                     navigationComponent: navigationComponent
-                }, `:${link.id}:${index}`)));
+                }, `:${parentId}:${link.id}:${index}`)));
             /* eslint-enable react/no-array-index-key */ return out;
         }, [])
     });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/titan-layout/layout-sidebar.tsx"],"sourcesContent":["import { Icon, Popover, Text, ThemeProvider } from '@servicetitan/anvil2';\nimport SvgClose from '@servicetitan/anvil2/assets/icons/material/round/close.svg';\nimport SvgCollapse from '@servicetitan/anvil2/assets/icons/st/gnav_menu_collapse.svg';\nimport SvgExpand from '@servicetitan/anvil2/assets/icons/st/gnav_menu_expand.svg';\nimport classNames from 'classnames';\nimport {\n    Children,\n    FC,\n    Fragment,\n    MouseEvent,\n    ReactElement,\n    isValidElement,\n    useCallback,\n} from 'react';\nimport { NavigationItemData, NavigationSubmenuData } from '../../utils/navigation';\nimport { NavLinkComponentProps } from '../../utils/navigation-context';\nimport { getCounterTag, getSubmenuGroupTag } from '../../utils/side-nav';\nimport { NavigationComponentProps } from './interface-internal';\nimport { LayoutPlacementContext, useTitanLayoutContext } from './layout-context';\nimport {\n    InternalSideNavigationGroup,\n    InternalSideNavigationGroupLink,\n    InternalSideNavigationLink,\n} from './layout-sidebar-links-internal';\nimport * as Styles from './layout-sidebar.module.less';\n\nimport { withTooltip } from './with-tooltip';\n\nexport interface LayoutSidebarProps {\n    className?: string;\n    top?: ReactElement[];\n    bottom?: ReactElement;\n    mainItems?: NavigationItemData[];\n    barExpanded: boolean;\n    submenuExpanded: string | undefined;\n    drawerOpened: boolean;\n    mobile: boolean;\n    navigationComponent: FC<NavLinkComponentProps>;\n    onBarExpandChange(expanded: boolean): void;\n    onDrawerOpenChange(expanded: boolean): void;\n    onSubmenuExpandChange(id: string, expanded: boolean): void;\n}\n\nexport const LayoutSidebar: FC<LayoutSidebarProps> = ({\n    className,\n    mobile,\n    barExpanded,\n    submenuExpanded,\n    drawerOpened,\n    onBarExpandChange,\n    onSubmenuExpandChange,\n    onDrawerOpenChange,\n    mainItems,\n    top,\n    bottom,\n    navigationComponent,\n}) => {\n    const closeDrawer = () => {\n        if (mobile) {\n            onDrawerOpenChange?.(false);\n        }\n    };\n\n    return (\n        <LayoutPlacementContext.Provider value=\"side\">\n            {mobile && drawerOpened && (\n                <div className={Styles.navDrawerBackdrop} onClick={closeDrawer} />\n            )}\n            <div\n                className={classNames(\n                    Styles.nav,\n                    mobile && Styles.navDrawer,\n                    mobile && drawerOpened && Styles.navDrawerOpened,\n                    !mobile && (barExpanded ? Styles.navWide : Styles.navSlim),\n                    className\n                )}\n                data-cy=\"side-navigation\"\n                onClick={closeDrawer}\n            >\n                <ThemeProvider mode=\"dark\" className={Styles.navMain}>\n                    {mobile && (\n                        <div className={Styles.navCloseWrapper}>\n                            <div\n                                className={Styles.navClose}\n                                onClick={() => onBarExpandChange(false)}\n                            >\n                                <Icon svg={SvgClose} size=\"large\" />\n                            </div>\n                        </div>\n                    )}\n                    {!!top?.length && <SidebarTop>{top}</SidebarTop>}\n\n                    <div data-cy=\"navigation-items\">\n                        {mainItems?.map(item =>\n                            item.submenu ? (\n                                <SideNavigationGroupItem\n                                    key={item.id}\n                                    barExpanded={mobile ? drawerOpened : barExpanded}\n                                    submenuExpanded={!!item.id && submenuExpanded === item.id}\n                                    onSubmenuExpand={onSubmenuExpandChange}\n                                    navigationComponent={navigationComponent}\n                                    {...item}\n                                />\n                            ) : (\n                                <InternalSideNavigationLink\n                                    key={item.id}\n                                    submenuExpanded={undefined}\n                                    navigationComponent={navigationComponent}\n                                    {...item}\n                                    tag={getSubmenuGroupTag(\n                                        item.submenu,\n                                        getCounterTag(item.counter, item.tag)\n                                    )}\n                                />\n                            )\n                        )}\n                    </div>\n\n                    {!!bottom && <SidebarBottom>{bottom}</SidebarBottom>}\n                </ThemeProvider>\n\n                {!mobile && (\n                    <div className={Styles.navFooter}>\n                        <div className={Styles.divider} />\n                        <div className={Styles.toggleWrapper}>\n                            <SideNavigationOptionsToggle\n                                appearance={barExpanded ? 'collapse-button' : 'expand'}\n                                onExpandedChange={() => onBarExpandChange(!barExpanded)}\n                            />\n                        </div>\n                    </div>\n                )}\n            </div>\n        </LayoutPlacementContext.Provider>\n    );\n};\nLayoutSidebar.displayName = 'LayoutSidebar';\n\n/** Side Navigation options toggle */\nconst SideNavigationOptionsToggle: FC<{\n    appearance: 'expand' | 'collapse' | 'collapse-button';\n    onExpandedChange?(expanded: boolean): void;\n}> = ({ appearance, onExpandedChange }) =>\n    withTooltip(\n        <div\n            data-cy=\"navigation-left-options\"\n            data-pendo=\"navigation-left-options\"\n            className={classNames(Styles.toggle)}\n            onClick={() => onExpandedChange?.(appearance === 'expand')}\n        >\n            <div className={Styles.toggleContent}>\n                <div className={Styles.toggleIconWrapper}>\n                    <Icon\n                        className={Styles.toggleIcon}\n                        svg={appearance === 'expand' ? SvgExpand : SvgCollapse}\n                    />\n                </div>\n\n                {appearance === 'collapse-button' && (\n                    <span className={Styles.toggleText}>Collapse Menu</span>\n                )}\n            </div>\n        </div>,\n        appearance === 'expand'\n            ? 'Expand Menu'\n            : appearance === 'collapse'\n              ? 'Collapse Menu'\n              : undefined,\n        { placement: 'right' }\n    );\n\n/** Side Navigation menu item */\nconst SideNavigationGroupItem: FC<\n    NavigationItemData & {\n        navigationComponent: FC<NavLinkComponentProps>;\n        barExpanded: boolean;\n        submenuExpanded: boolean;\n        onSubmenuExpand: undefined | ((id: string, expanded: boolean) => void);\n    }\n> = ({ onSubmenuExpand, barExpanded, submenuExpanded, ...props }) => {\n    const onExpandToggle = useCallback(\n        (e: MouseEvent<never>) => {\n            e.preventDefault();\n            e.stopPropagation();\n\n            if (props.id) {\n                onSubmenuExpand?.(props.id, !submenuExpanded);\n            }\n        },\n        [props.id, submenuExpanded, onSubmenuExpand]\n    );\n    const {\n        sidebar: {\n            styles: { popoverContent },\n        },\n    } = useTitanLayoutContext();\n\n    const tag = getSubmenuGroupTag(props.submenu, getCounterTag(props.counter, props.tag));\n\n    return barExpanded ? (\n        <InternalSideNavigationGroup\n            {...props}\n            submenuExpanded={submenuExpanded}\n            onExpandToggle={onExpandToggle}\n            tag={tag}\n        >\n            <SideNavigationGroupContent\n                groups={props.submenu?.groups ?? []}\n                navigationComponent={props.navigationComponent}\n            />\n        </InternalSideNavigationGroup>\n    ) : (\n        <Popover placement=\"right-start\" openOnHover delay={500}>\n            <Popover.Trigger>\n                {(triggerProps: any) => (\n                    <div {...triggerProps}>\n                        <InternalSideNavigationLink\n                            {...props}\n                            submenuExpanded={undefined}\n                            tag={tag}\n                        />\n                    </div>\n                )}\n            </Popover.Trigger>\n            <Popover.Content style={popoverContent} className=\"z-global-nav-i\">\n                <div className={Styles.submenuPopover}>\n                    <Text\n                        variant=\"headline\"\n                        el=\"h4\"\n                        size=\"small\"\n                        className=\"c-white m-b-half-i m-t-1\"\n                    >\n                        {props.title}\n                    </Text>\n                    <SideNavigationGroupContent\n                        groups={props.submenu?.groups ?? []}\n                        navigationComponent={props.navigationComponent}\n                    />\n                </div>\n            </Popover.Content>\n        </Popover>\n    );\n};\nconst SideNavigationGroupContent: FC<NavigationSubmenuData & NavigationComponentProps> = ({\n    groups,\n    navigationComponent,\n}) => {\n    return (\n        <Fragment>\n            {groups.reduce((out, group, index) => {\n                if (!group.links.length) {\n                    return out;\n                }\n\n                const title = group.title?.trim() ?? '';\n                /* eslint-disable react/no-array-index-key */\n                out.push(\n                    <Text\n                        key={`:group:${index}:title`}\n                        variant=\"eyebrow\"\n                        className={classNames(Styles.submenuGroupHeader, {\n                            [Styles.submenuGroupHeaderEmpty]: !title,\n                        })}\n                    >\n                        {title}\n                    </Text>\n                );\n                out.push(\n                    ...group.links.map((link, index) => (\n                        <InternalSideNavigationGroupLink\n                            key={`:${link.id}:${index}`}\n                            {...link}\n                            navigationComponent={navigationComponent}\n                        />\n                    ))\n                );\n                /* eslint-enable react/no-array-index-key */\n\n                return out;\n            }, [] as ReactElement[])}\n        </Fragment>\n    );\n};\n\nfunction SidebarTop({ children }: any) {\n    const list = Children.map(children, child => {\n        return child && isValidElement(child) ? child : null;\n    });\n    return list?.length ? (\n        <ThemeProvider mode=\"dark\" className={Styles.navTop} data-cy=\"navigation-items-top\">\n            {list}\n            <div className={Styles.divider} />\n        </ThemeProvider>\n    ) : null;\n}\n\nfunction SidebarBottom({ children }: any) {\n    return (\n        <ThemeProvider mode=\"dark\" className={Styles.navBottom} data-cy=\"navigation-items-bottom\">\n            <div className={Styles.divider} />\n            {children}\n        </ThemeProvider>\n    );\n}\n"],"names":["Icon","Popover","Text","ThemeProvider","SvgClose","SvgCollapse","SvgExpand","classNames","Children","Fragment","isValidElement","useCallback","getCounterTag","getSubmenuGroupTag","LayoutPlacementContext","useTitanLayoutContext","InternalSideNavigationGroup","InternalSideNavigationGroupLink","InternalSideNavigationLink","Styles","withTooltip","LayoutSidebar","className","mobile","barExpanded","submenuExpanded","drawerOpened","onBarExpandChange","onSubmenuExpandChange","onDrawerOpenChange","mainItems","top","bottom","navigationComponent","closeDrawer","Provider","value","div","navDrawerBackdrop","onClick","nav","navDrawer","navDrawerOpened","navWide","navSlim","data-cy","mode","navMain","navCloseWrapper","navClose","svg","size","length","SidebarTop","map","item","submenu","SideNavigationGroupItem","id","onSubmenuExpand","undefined","tag","counter","SidebarBottom","navFooter","divider","toggleWrapper","SideNavigationOptionsToggle","appearance","onExpandedChange","displayName","data-pendo","toggle","toggleContent","toggleIconWrapper","toggleIcon","span","toggleText","placement","props","onExpandToggle","e","preventDefault","stopPropagation","sidebar","styles","popoverContent","SideNavigationGroupContent","groups","openOnHover","delay","Trigger","triggerProps","Content","style","submenuPopover","variant","el","title","reduce","out","group","index","links","trim","push","submenuGroupHeader","submenuGroupHeaderEmpty","link","children","list","child","navTop","navBottom"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/titan-layout/layout-sidebar.tsx"],"sourcesContent":["import { Icon, Popover, Text, ThemeProvider } from '@servicetitan/anvil2';\nimport SvgClose from '@servicetitan/anvil2/assets/icons/material/round/close.svg';\nimport SvgCollapse from '@servicetitan/anvil2/assets/icons/st/gnav_menu_collapse.svg';\nimport SvgExpand from '@servicetitan/anvil2/assets/icons/st/gnav_menu_expand.svg';\nimport classNames from 'classnames';\nimport {\n    Children,\n    FC,\n    Fragment,\n    MouseEvent,\n    ReactElement,\n    isValidElement,\n    useCallback,\n} from 'react';\nimport { NavigationItemData, NavigationSubmenuData } from '../../utils/navigation';\nimport { NavLinkComponentProps } from '../../utils/navigation-context';\nimport { getCounterTag, getSubmenuGroupTag } from '../../utils/side-nav';\nimport { NavigationComponentProps } from './interface-internal';\nimport { LayoutPlacementContext, useTitanLayoutContext } from './layout-context';\nimport {\n    InternalSideNavigationGroup,\n    InternalSideNavigationGroupLink,\n    InternalSideNavigationLink,\n} from './layout-sidebar-links-internal';\nimport * as Styles from './layout-sidebar.module.less';\n\nimport { withTooltip } from './with-tooltip';\n\nexport interface LayoutSidebarProps {\n    className?: string;\n    top?: ReactElement[];\n    bottom?: ReactElement;\n    mainItems?: NavigationItemData[];\n    barExpanded: boolean;\n    submenuExpanded: string | undefined;\n    drawerOpened: boolean;\n    mobile: boolean;\n    navigationComponent: FC<NavLinkComponentProps>;\n    onBarExpandChange(expanded: boolean): void;\n    onDrawerOpenChange(expanded: boolean): void;\n    onSubmenuExpandChange(id: string, expanded: boolean): void;\n}\n\nexport const LayoutSidebar: FC<LayoutSidebarProps> = ({\n    className,\n    mobile,\n    barExpanded,\n    submenuExpanded,\n    drawerOpened,\n    onBarExpandChange,\n    onSubmenuExpandChange,\n    onDrawerOpenChange,\n    mainItems,\n    top,\n    bottom,\n    navigationComponent,\n}) => {\n    const closeDrawer = () => {\n        if (mobile) {\n            onDrawerOpenChange?.(false);\n        }\n    };\n\n    return (\n        <LayoutPlacementContext.Provider value=\"side\">\n            {mobile && drawerOpened && (\n                <div className={Styles.navDrawerBackdrop} onClick={closeDrawer} />\n            )}\n            <div\n                className={classNames(\n                    Styles.nav,\n                    mobile && Styles.navDrawer,\n                    mobile && drawerOpened && Styles.navDrawerOpened,\n                    !mobile && (barExpanded ? Styles.navWide : Styles.navSlim),\n                    className\n                )}\n                data-cy=\"side-navigation\"\n                onClick={closeDrawer}\n            >\n                <ThemeProvider mode=\"dark\" className={Styles.navMain}>\n                    {mobile && (\n                        <div className={Styles.navCloseWrapper}>\n                            <div\n                                className={Styles.navClose}\n                                onClick={() => onBarExpandChange(false)}\n                            >\n                                <Icon svg={SvgClose} size=\"large\" />\n                            </div>\n                        </div>\n                    )}\n                    {!!top?.length && <SidebarTop>{top}</SidebarTop>}\n\n                    <div data-cy=\"navigation-items\">\n                        {mainItems?.map(item =>\n                            item.submenu ? (\n                                <SideNavigationGroupItem\n                                    key={item.id}\n                                    barExpanded={mobile ? drawerOpened : barExpanded}\n                                    submenuExpanded={!!item.id && submenuExpanded === item.id}\n                                    onSubmenuExpand={onSubmenuExpandChange}\n                                    navigationComponent={navigationComponent}\n                                    {...item}\n                                />\n                            ) : (\n                                <InternalSideNavigationLink\n                                    key={item.id}\n                                    submenuExpanded={undefined}\n                                    navigationComponent={navigationComponent}\n                                    {...item}\n                                    tag={getSubmenuGroupTag(\n                                        item.submenu,\n                                        getCounterTag(item.counter, item.tag)\n                                    )}\n                                />\n                            )\n                        )}\n                    </div>\n\n                    {!!bottom && <SidebarBottom>{bottom}</SidebarBottom>}\n                </ThemeProvider>\n\n                {!mobile && (\n                    <div className={Styles.navFooter}>\n                        <div className={Styles.divider} />\n                        <div className={Styles.toggleWrapper}>\n                            <SideNavigationOptionsToggle\n                                appearance={barExpanded ? 'collapse-button' : 'expand'}\n                                onExpandedChange={() => onBarExpandChange(!barExpanded)}\n                            />\n                        </div>\n                    </div>\n                )}\n            </div>\n        </LayoutPlacementContext.Provider>\n    );\n};\nLayoutSidebar.displayName = 'LayoutSidebar';\n\n/** Side Navigation options toggle */\nconst SideNavigationOptionsToggle: FC<{\n    appearance: 'expand' | 'collapse' | 'collapse-button';\n    onExpandedChange?(expanded: boolean): void;\n}> = ({ appearance, onExpandedChange }) =>\n    withTooltip(\n        <div\n            data-cy=\"navigation-left-options\"\n            data-pendo=\"navigation-left-options\"\n            className={classNames(Styles.toggle)}\n            onClick={() => onExpandedChange?.(appearance === 'expand')}\n        >\n            <div className={Styles.toggleContent}>\n                <div className={Styles.toggleIconWrapper}>\n                    <Icon\n                        className={Styles.toggleIcon}\n                        svg={appearance === 'expand' ? SvgExpand : SvgCollapse}\n                    />\n                </div>\n\n                {appearance === 'collapse-button' && (\n                    <span className={Styles.toggleText}>Collapse Menu</span>\n                )}\n            </div>\n        </div>,\n        appearance === 'expand'\n            ? 'Expand Menu'\n            : appearance === 'collapse'\n              ? 'Collapse Menu'\n              : undefined,\n        { placement: 'right' }\n    );\n\n/** Side Navigation menu item */\nconst SideNavigationGroupItem: FC<\n    NavigationItemData & {\n        navigationComponent: FC<NavLinkComponentProps>;\n        barExpanded: boolean;\n        submenuExpanded: boolean;\n        onSubmenuExpand: undefined | ((id: string, expanded: boolean) => void);\n    }\n> = ({ onSubmenuExpand, barExpanded, submenuExpanded, ...props }) => {\n    const onExpandToggle = useCallback(\n        (e: MouseEvent<never>) => {\n            e.preventDefault();\n            e.stopPropagation();\n\n            if (props.id) {\n                onSubmenuExpand?.(props.id, !submenuExpanded);\n            }\n        },\n        [props.id, submenuExpanded, onSubmenuExpand]\n    );\n    const {\n        sidebar: {\n            styles: { popoverContent },\n        },\n    } = useTitanLayoutContext();\n\n    const tag = getSubmenuGroupTag(props.submenu, getCounterTag(props.counter, props.tag));\n\n    return barExpanded ? (\n        <InternalSideNavigationGroup\n            {...props}\n            submenuExpanded={submenuExpanded}\n            onExpandToggle={onExpandToggle}\n            tag={tag}\n        >\n            <SideNavigationGroupContent\n                parentId={props.id}\n                groups={props.submenu?.groups ?? []}\n                navigationComponent={props.navigationComponent}\n            />\n        </InternalSideNavigationGroup>\n    ) : (\n        <Popover placement=\"right-start\" openOnHover delay={500}>\n            <Popover.Trigger>\n                {(triggerProps: any) => (\n                    <div {...triggerProps}>\n                        <InternalSideNavigationLink\n                            {...props}\n                            submenuExpanded={undefined}\n                            tag={tag}\n                        />\n                    </div>\n                )}\n            </Popover.Trigger>\n            <Popover.Content style={popoverContent} className=\"z-global-nav-i\">\n                <div className={Styles.submenuPopover}>\n                    <Text\n                        variant=\"headline\"\n                        el=\"h4\"\n                        size=\"small\"\n                        className=\"c-white m-b-half-i m-t-1\"\n                    >\n                        {props.title}\n                    </Text>\n                    <SideNavigationGroupContent\n                        parentId={props.id}\n                        groups={props.submenu?.groups ?? []}\n                        navigationComponent={props.navigationComponent}\n                    />\n                </div>\n            </Popover.Content>\n        </Popover>\n    );\n};\nconst SideNavigationGroupContent: FC<\n    NavigationSubmenuData & NavigationComponentProps & { parentId: string }\n> = ({ groups, parentId, navigationComponent }) => {\n    return (\n        <Fragment>\n            {groups.reduce((out, group, index) => {\n                if (!group.links.length) {\n                    return out;\n                }\n\n                const title = group.title?.trim() ?? '';\n                /* eslint-disable react/no-array-index-key */\n                out.push(\n                    <Text\n                        key={`:group:${parentId}:${index}:title`}\n                        variant=\"eyebrow\"\n                        className={classNames(Styles.submenuGroupHeader, {\n                            [Styles.submenuGroupHeaderEmpty]: !title,\n                        })}\n                    >\n                        {title}\n                    </Text>\n                );\n                out.push(\n                    ...group.links.map((link, index) => (\n                        <InternalSideNavigationGroupLink\n                            key={`:${parentId}:${link.id}:${index}`}\n                            {...link}\n                            parentId={parentId}\n                            navigationComponent={navigationComponent}\n                        />\n                    ))\n                );\n                /* eslint-enable react/no-array-index-key */\n\n                return out;\n            }, [] as ReactElement[])}\n        </Fragment>\n    );\n};\n\nfunction SidebarTop({ children }: any) {\n    const list = Children.map(children, child => {\n        return child && isValidElement(child) ? child : null;\n    });\n    return list?.length ? (\n        <ThemeProvider mode=\"dark\" className={Styles.navTop} data-cy=\"navigation-items-top\">\n            {list}\n            <div className={Styles.divider} />\n        </ThemeProvider>\n    ) : null;\n}\n\nfunction SidebarBottom({ children }: any) {\n    return (\n        <ThemeProvider mode=\"dark\" className={Styles.navBottom} data-cy=\"navigation-items-bottom\">\n            <div className={Styles.divider} />\n            {children}\n        </ThemeProvider>\n    );\n}\n"],"names":["Icon","Popover","Text","ThemeProvider","SvgClose","SvgCollapse","SvgExpand","classNames","Children","Fragment","isValidElement","useCallback","getCounterTag","getSubmenuGroupTag","LayoutPlacementContext","useTitanLayoutContext","InternalSideNavigationGroup","InternalSideNavigationGroupLink","InternalSideNavigationLink","Styles","withTooltip","LayoutSidebar","className","mobile","barExpanded","submenuExpanded","drawerOpened","onBarExpandChange","onSubmenuExpandChange","onDrawerOpenChange","mainItems","top","bottom","navigationComponent","closeDrawer","Provider","value","div","navDrawerBackdrop","onClick","nav","navDrawer","navDrawerOpened","navWide","navSlim","data-cy","mode","navMain","navCloseWrapper","navClose","svg","size","length","SidebarTop","map","item","submenu","SideNavigationGroupItem","id","onSubmenuExpand","undefined","tag","counter","SidebarBottom","navFooter","divider","toggleWrapper","SideNavigationOptionsToggle","appearance","onExpandedChange","displayName","data-pendo","toggle","toggleContent","toggleIconWrapper","toggleIcon","span","toggleText","placement","props","onExpandToggle","e","preventDefault","stopPropagation","sidebar","styles","popoverContent","SideNavigationGroupContent","parentId","groups","openOnHover","delay","Trigger","triggerProps","Content","style","submenuPopover","variant","el","title","reduce","out","group","index","links","trim","push","submenuGroupHeader","submenuGroupHeaderEmpty","link","children","list","child","navTop","navBottom"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"titan-layout.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/titan-layout.tsx"],"names":[],"mappings":"AACA,OAAO,EAEH,wBAAwB,EACxB,EAAE,EAEF,YAAY,EACZ,SAAS,EAMZ,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAA2B,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAEhG,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAS/C,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAErD,OAAO,EAAE,sBAAsB,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAK3F,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,GAAG;IACzF,wBAAwB;IACxB,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAE5C,kDAAkD;IAClD,UAAU,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAE5B,uBAAuB;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB,kDAAkD;IAClD,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,oCAAoC;IACpC,mBAAmB,CAAC,EAAE,EAAE,CAAC,qBAAqB,CAAC,CAAC;IAEhD,qCAAqC;IACrC,mBAAmB,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAE3C,sEAAsE;IACtE,uBAAuB,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAE/C,iBAAiB;IACjB,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAE5B,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAElD,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,GAAG,CAAC,EAAE,YAAY,CAAC;IACnB,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,aAAa,CAAC,EAAE,YAAY,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AA0XF,eAAO,MAAM,WAAW;;;CAGtB,CAAC"}
+{"version":3,"file":"titan-layout.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/titan-layout.tsx"],"names":[],"mappings":"AACA,OAAO,EAEH,wBAAwB,EACxB,EAAE,EAEF,YAAY,EACZ,SAAS,EAMZ,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAA2B,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAEhG,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAS/C,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAErD,OAAO,EAAE,sBAAsB,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAK3F,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,GAAG;IACzF,wBAAwB;IACxB,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAE5C,kDAAkD;IAClD,UAAU,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAE5B,uBAAuB;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB,kDAAkD;IAClD,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,oCAAoC;IACpC,mBAAmB,CAAC,EAAE,EAAE,CAAC,qBAAqB,CAAC,CAAC;IAEhD,qCAAqC;IACrC,mBAAmB,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAE3C,sEAAsE;IACtE,uBAAuB,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAE/C,iBAAiB;IACjB,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAE5B,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAElD,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,GAAG,CAAC,EAAE,YAAY,CAAC;IACnB,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,aAAa,CAAC,EAAE,YAAY,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAyXF,eAAO,MAAM,WAAW;;;CAGtB,CAAC"}

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

@@ -227,10 +227,9 @@ const TitanLayoutComponent = ({ appearance = 'anvil2', navVariant = 'left', id,
                                     profile,
                                     extraLinks,
                                     !!extraText && /*#__PURE__*/ _jsx(InternalSideNavigationTrigger, {
-                                        id: "__extra_text",
+                                        id: "--extra-text",
                                         title: extraText,
                                         submenuExpanded: undefined,
-                                        dataPrefix: "navigation-extra-text",
                                         tag: undefined,
                                         icon: undefined,
                                         iconActive: undefined

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/navigation",
-    "version": "11.1.1",
+    "version": "12.0.0",
     "description": "Navigation components",
     "repository": {
         "type": "git",
@@ -42,5 +42,5 @@
         "less": true,
         "webpack": false
     },
-    "gitHead": "fc3ac25baf0fac6c2295807f9fb31afe4aa5da70"
+    "gitHead": "7dcd2ea3b19aa633f1cc2204060dfa25895b37a1"
 }

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

@@ -32,7 +32,10 @@ const HeaderNavigationItemContent: FC<{
             )}
 
             {!!label && (
-                <span className={classNames(Styles.navigationItemLabel, labelClassName)}>
+                <span
+                    className={classNames(Styles.navigationItemLabel, labelClassName)}
+                    data-cy="nav-item-label"
+                >
                     {label}
                 </span>
             )}
@@ -73,8 +76,8 @@ export const LayoutHeaderNavigationLink: FC<HeaderNavigationLinkProps> = ({
 
     return withTooltip(
         <NavigationComponent
-            data-cy={`navigation-link-${id}`}
-            data-pendo={`navigation-link-${id}`}
+            data-cy={`navigation-item-${id}`}
+            data-pendo={`navigation-item-${id}`}
             {...rest}
             key={id}
             to={to}

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

@@ -202,6 +202,12 @@
             text-decoration: none;
         }
     }
+    .logo-title {
+        font-family: @display-font-family;
+        font-weight: @font-weight-semibold;
+        font-size: 21px;
+        line-height: 24px;
+    }
 }
 
 .header-desktop {
@@ -222,12 +228,6 @@
 }
 
 .header-dark.header-logo-custom {
-    .logo-short-wrapper,
-    .burger {
-        background-color: @color-white;
-        color: @c-light;
-    }
-
     .burger .navigation-link {
         color: inherit !important;
     }

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

@@ -84,7 +84,11 @@ export const LayoutHeader: FC<LayoutHeaderProps> = ({
                     )}
                     data-cy="navigation-right"
                 >
-                    {!!rightText && <div className={Styles.heTopRightText}>{rightText}</div>}
+                    {!!rightText && (
+                        <div className={Styles.heTopRightText} data-cy="navigation-right-text">
+                            {rightText}
+                        </div>
+                    )}
                     {right}
                     {profile}
                 </div>

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

@@ -1,18 +1,19 @@
 import classNames from 'classnames';
-import { FC, Fragment, ReactNode } from 'react';
+import { ComponentPropsWithoutRef, FC, Fragment, ReactNode } from 'react';
 import { LogoCompanyTitle } from '../logo/logo-company-title';
 import { LogoTitanSvg } from '../logo/logo-titan';
-import { LogoTitanTitle, WrapperProps } from '../logo/logo-titan-text';
 import { useTitanLayoutContext } from './layout-context';
 import * as Styles from './layout-header.module.less';
 
-export interface TitanLayoutLogoProps {
+export type TitanLayoutLogoProps = Omit<
+    ComponentPropsWithoutRef<'div'>,
+    'children' | 'style' | 'title'
+> & {
     title?: string | boolean;
     postfix?: ReactNode;
-    logoWrapper?: WrapperProps;
     mantleFill?: string;
     to?: string;
-}
+};
 
 const EmptyWrapper: FC<any> = ({ children }) => children;
 
@@ -28,33 +29,38 @@ export const LayoutLogo: FC<TitanLayoutLogoProps> = props => {
         NavigationComponent,
         breakpoint: { isMobile },
     } = useTitanLayoutContext();
-    const Wrapper: FC<any> = props.to ? NavigationComponent : EmptyWrapper;
+    const { title, postfix, mantleFill, to, ...rest } = props;
+    const Wrapper: FC<any> = to ? NavigationComponent : EmptyWrapper;
     const showCompanyTitle = isLogoCompany(props, isMobile);
 
     return (
         <div className={classNames(Styles.logo)} data-cy="navigation-left">
             {showCompanyTitle ? (
-                <div className={Styles.logoCompanyWrapper}>
-                    <Wrapper to={props.to} className={Styles.logoLink}>
+                <div data-cy="logo-wrapper" {...rest} className={Styles.logoCompanyWrapper}>
+                    <Wrapper to={to} className={Styles.logoLink}>
                         <LogoCompanyTitle />
                     </Wrapper>
                 </div>
             ) : (
                 <Fragment>
-                    <div className={Styles.logoShortWrapper}>
-                        <Wrapper to={props.to} className={Styles.logoLink}>
-                            <LogoTitanSvg mantleFill={props.mantleFill} />
+                    <div data-cy="logo-wrapper" {...rest} className={Styles.logoShortWrapper}>
+                        <Wrapper to={to} className={Styles.logoLink}>
+                            <LogoTitanSvg mantleFill={mantleFill} />
                         </Wrapper>
                     </div>
 
                     {isLogoText(props, isMobile) && (
-                        <LogoTitanTitle className={Styles.logoTitle}>{props.title}</LogoTitanTitle>
+                        <div className={Styles.logoTitle} data-cy="logo-title">
+                            {title}
+                        </div>
                     )}
                 </Fragment>
             )}
 
-            {!isMobile && props.postfix && (
-                <div className={Styles.logoPostfix}>{props.postfix}</div>
+            {!isMobile && postfix && (
+                <div className={Styles.logoPostfix} data-cy="logo-postfix">
+                    {postfix}
+                </div>
             )}
         </div>
     );

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

@@ -50,12 +50,12 @@ const ProfileDropdownContent: FC<ProfileDropdownProps> = props => {
     );
 };
 ProfileDropdownContent.displayName = 'ProfileDropdown';
+const profileId = '--profile';
 
 const MobileProfileDropdown: FC<ProfileDropdownProps & NavigationComponentProps> = ({
     children,
     ...props
 }) => {
-    const id = '__profile';
     const [expanded, setExpanded] = useState(false);
     const { hasNotifications, NotificationsContextProvider } = useNotificationsState();
     const { onNotificationsUpdate } = useNotificationsContext();
@@ -65,13 +65,13 @@ const MobileProfileDropdown: FC<ProfileDropdownProps & NavigationComponentProps>
     };
 
     useEffect(() => {
-        onNotificationsUpdate(id, hasNotifications);
+        onNotificationsUpdate(profileId, hasNotifications);
     }, [hasNotifications, onNotificationsUpdate]);
 
     return (
         <NotificationsContextProvider>
             <InternalSideNavigationGroup
-                id={id}
+                id={profileId}
                 to={undefined}
                 title="Profile"
                 icon={SvgAccountInactive}
@@ -168,6 +168,7 @@ const MobileProfileDropdownLink: FC<ProfileDropdownLinkProps & NavigationCompone
             {...props}
             to={to}
             title={linkText}
+            parentId={profileId}
             navigationComponent={isExternalLink ? ExternalNavComponent : navigationComponent}
         />
     ) : null;

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

@@ -59,7 +59,9 @@ export const InternalSideNavigationItemContent: FC<InternalSideNavigationItemCon
                 </Fragment>
             )}
 
-            <div className={Styles.navItemTextExpanded}>{title}</div>
+            <div className={Styles.navItemTextExpanded} data-cy="nav-item-label">
+                {title}
+            </div>
             {!!tag && (
                 <BadgeTag
                     data={tag}
@@ -74,7 +76,11 @@ export const InternalSideNavigationItemContent: FC<InternalSideNavigationItemCon
                         className={Styles.navItemGroupToggle}
                         onClick={onExpandToggle}
                     />
-                    <div className={Styles.navItemGroupToggleClick} onClick={onExpandToggle} />
+                    <div
+                        className={Styles.navItemGroupToggleClick}
+                        data-cy="nav-item-group-expand"
+                        onClick={onExpandToggle}
+                    />
                 </div>
             )}
         </div>
@@ -83,6 +89,7 @@ export const InternalSideNavigationItemContent: FC<InternalSideNavigationItemCon
             className={classNames(Styles.navItemTextCollapsed, {
                 [Styles.navItemTextSmall]: !!title && title.length >= 10,
             })}
+            data-cy="nav-item-label"
         >
             {title}
         </div>
@@ -181,10 +188,11 @@ export const InternalSideNavigationTrigger: FC<
 };
 
 export const InternalSideNavigationGroupLink: FC<
-    NavigationSubmenuItemData & NavigationComponentProps
+    NavigationSubmenuItemData & NavigationComponentProps & { parentId: string }
 > = ({
     id,
     counter,
+    parentId,
     tag,
     title,
     to,
@@ -195,8 +203,8 @@ export const InternalSideNavigationGroupLink: FC<
     return (
         <NavigationComponent
             key={id}
-            data-cy={`navigation-item-${id}`}
-            data-pendo={`navigation-item-${id}`}
+            data-cy={`navigation-item-${parentId}--${id}`}
+            data-pendo={`navigation-item-${parentId}--${id}`}
             {...rest}
             to={to}
             className={classNames(Styles.submenuItem, Styles.submenuLink, {
@@ -270,6 +278,7 @@ export const InternalSideNavigationGroup: FC<
                 className={classNames(Styles.submenuWrapper, {
                     [Styles.submenuWrapperCollapsed]: !submenuExpanded,
                 })}
+                data-cy={`navigation-submenu-${props.id}`}
             >
                 <div className={Styles.submenu}>{children}</div>
             </div>

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

@@ -32,7 +32,7 @@ export function TitanLayoutSidebarLink({ wrapper, ...props }: TitanLayoutSidebar
             {...props}
             navigationComponent={NavigationComponent}
             submenuExpanded={undefined}
-            dataPrefix="navigation-link"
+            dataPrefix="navigation-item"
             tag={tag}
         />
     );

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

@@ -205,6 +205,7 @@ const SideNavigationGroupItem: FC<
             tag={tag}
         >
             <SideNavigationGroupContent
+                parentId={props.id}
                 groups={props.submenu?.groups ?? []}
                 navigationComponent={props.navigationComponent}
             />
@@ -233,6 +234,7 @@ const SideNavigationGroupItem: FC<
                         {props.title}
                     </Text>
                     <SideNavigationGroupContent
+                        parentId={props.id}
                         groups={props.submenu?.groups ?? []}
                         navigationComponent={props.navigationComponent}
                     />
@@ -241,10 +243,9 @@ const SideNavigationGroupItem: FC<
         </Popover>
     );
 };
-const SideNavigationGroupContent: FC<NavigationSubmenuData & NavigationComponentProps> = ({
-    groups,
-    navigationComponent,
-}) => {
+const SideNavigationGroupContent: FC<
+    NavigationSubmenuData & NavigationComponentProps & { parentId: string }
+> = ({ groups, parentId, navigationComponent }) => {
     return (
         <Fragment>
             {groups.reduce((out, group, index) => {
@@ -256,7 +257,7 @@ const SideNavigationGroupContent: FC<NavigationSubmenuData & NavigationComponent
                 /* eslint-disable react/no-array-index-key */
                 out.push(
                     <Text
-                        key={`:group:${index}:title`}
+                        key={`:group:${parentId}:${index}:title`}
                         variant="eyebrow"
                         className={classNames(Styles.submenuGroupHeader, {
                             [Styles.submenuGroupHeaderEmpty]: !title,
@@ -268,8 +269,9 @@ const SideNavigationGroupContent: FC<NavigationSubmenuData & NavigationComponent
                 out.push(
                     ...group.links.map((link, index) => (
                         <InternalSideNavigationGroupLink
-                            key={`:${link.id}:${index}`}
+                            key={`:${parentId}:${link.id}:${index}`}
                             {...link}
+                            parentId={parentId}
                             navigationComponent={navigationComponent}
                         />
                     ))

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

@@ -316,10 +316,9 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
                                             {extraLinks}
                                             {!!extraText && (
                                                 <InternalSideNavigationTrigger
-                                                    id="__extra_text"
+                                                    id="--extra-text"
                                                     title={extraText}
                                                     submenuExpanded={undefined}
-                                                    dataPrefix="navigation-extra-text"
                                                     tag={undefined}
                                                     icon={undefined}
                                                     iconActive={undefined}