@servicetitan/navigation 13.0.0 → 13.0.1

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

@@ -113,6 +113,24 @@
         margin-right: @spacing-2;
         max-width: 400px;
     }
+
+    .burger {
+        width: 64px;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+    }
+}
+
+.header-light.header-desktop {
+    .he-top-left {
+        .logo-company-wrapper {
+            padding-left: @spacing-0 !important;
+        }
+        .logo-short-wrapper {
+            padding-left: @spacing-half !important;
+        }
+    }
 }
 
 // desktop stacked header

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;AAG5D,OAAO,EACH,wBAAwB,EACxB,oBAAoB,EACpB,2BAA2B,EAC9B,MAAM,+BAA+B,CAAC;AAYvC,YAAY,EACR,oBAAoB,EACpB,2BAA2B,EAC3B,wBAAwB,GAC3B,MAAM,+BAA+B,CAAC;AAcvC,iBAAS,wBAAwB,CAAC,KAAK,EAAE,oBAAoB,2CAO5D;AAsED,iBAAS,sBAAsB,CAAC,KAAK,EAAE,2BAA2B,2CAOjE;AA6BD,iBAAS,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,2CAO3D;AAmCD,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,EAAuB,MAAM,OAAO,CAAC;AAGhD,OAAO,EACH,wBAAwB,EACxB,oBAAoB,EACpB,2BAA2B,EAC9B,MAAM,+BAA+B,CAAC;AAYvC,YAAY,EACR,oBAAoB,EACpB,2BAA2B,EAC3B,wBAAwB,GAC3B,MAAM,+BAA+B,CAAC;AAcvC,iBAAS,wBAAwB,CAAC,KAAK,EAAE,oBAAoB,2CAO5D;AAqED,iBAAS,sBAAsB,CAAC,KAAK,EAAE,2BAA2B,2CAOjE;AA6BD,iBAAS,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,2CAO3D;AAmCD,eAAO,MAAM,eAAe;;;;CAI1B,CAAC"}

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

@@ -26,8 +26,7 @@ const MobileProfileDropdown = ({ direction, trigger, hintPopup, portal, width, o
     const [expanded, setExpanded] = useState(false);
     const { hasNotifications, NotificationsContextProvider } = useNotificationsState();
     const { onNotificationsUpdate } = useNotificationsContext();
-    const onExpandToggle = (e)=>{
-        e.stopPropagation();
+    const onExpandToggle = ()=>{
         setExpanded(!expanded);
     };
     useEffect(()=>{
@@ -47,7 +46,7 @@ const MobileProfileDropdown = ({ direction, trigger, hintPopup, portal, width, o
             className: className,
             ...rest,
             submenuExpanded: expanded,
-            onExpandToggle: onExpandToggle,
+            onSubmenuExpand: onExpandToggle,
             onClick: onExpandToggle,
             tag: {
                 value: hasNotifications

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 } from '../../utils/navigation-context';\nimport { getCounterTag } from '../../utils/side-nav';\nimport {\n    ProfileDropdownLinkProps,\n    ProfileDropdownProps,\n    ProfileDropdownSectionProps,\n} from '../profile-dropdown/interface';\nimport { DesktopProfileDropdown } 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/interface';\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\nfunction ProfileDropdownComponent(props: ProfileDropdownProps) {\n    const { breakpoint, NavigationComponent } = useTitanLayoutContext();\n    return breakpoint.isMobile ? (\n        <MobileProfileDropdown {...props} navigationComponent={NavigationComponent} />\n    ) : (\n        <DesktopProfileDropdown {...props} />\n    );\n}\nconst profileId = '--profile';\n\nconst MobileProfileDropdown: FC<ProfileDropdownProps & NavigationComponentProps> = ({\n    direction,\n    trigger,\n    hintPopup,\n    portal,\n    width,\n    onClose,\n    onOpen,\n    className,\n    children,\n    ...rest\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                className={className}\n                {...rest}\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\nfunction ProfileDropdownSection(props: ProfileDropdownSectionProps) {\n    const { breakpoint } = useTitanLayoutContext();\n    return breakpoint.isMobile ? (\n        <MobileProfileDropdownSection {...props} />\n    ) : (\n        <DesktopProfileDropdown.Section {...props} />\n    );\n}\nconst MobileProfileDropdownSection: FC<ProfileDropdownSectionProps> = ({\n    id,\n    tooltip,\n    tag,\n    counter,\n\n    className,\n    children,\n    text,\n    ...rest\n}) => {\n    const sectionText = getText(children, text);\n    const { onNotificationsUpdate } = useNotificationsContext();\n    const tagData = getCounterTag(counter, tag);\n    onNotificationsUpdate(id, !!tagData);\n\n    return sectionText ? (\n        <InternalSideNavigationGroupTrigger\n            {...rest}\n            id={id}\n            title={sectionText}\n            isActive={undefined}\n            tag={tagData}\n            className={className}\n        />\n    ) : null;\n};\n\nfunction ProfileDropdownLink(props: ProfileDropdownLinkProps) {\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    id,\n    external,\n    to,\n    tooltip,\n    text,\n    children,\n    className,\n    navigationComponent,\n    tag,\n    counter,\n    ...rest\n}) => {\n    const { onNotificationsUpdate } = useNotificationsContext();\n    const linkText = getText(children, text);\n    const isExternalLink = external ?? to?.startsWith('http');\n    const tagData = getCounterTag(counter, tag);\n    onNotificationsUpdate(id, !!tagData);\n\n    return linkText ? (\n        <InternalSideNavigationGroupLink\n            {...rest}\n            id={id}\n            to={to}\n            title={linkText}\n            isActive={undefined}\n            className={className}\n            tag={tagData}\n            parentId={profileId}\n            navigationComponent={isExternalLink ? ExternalNavComponent : navigationComponent}\n        />\n    ) : null;\n};\n\nexport const ProfileDropdown = Object.assign(ProfileDropdownComponent, {\n    Divider: ProfileDropdownDivider,\n    Link: ProfileDropdownLink,\n    Section: ProfileDropdownSection,\n});\n"],"names":["SvgAccountActive","SvgAccountInactive","useEffect","useState","getCounterTag","DesktopProfileDropdown","useTitanLayoutContext","InternalSideNavigationGroup","InternalSideNavigationGroupDivider","InternalSideNavigationGroupLink","InternalSideNavigationGroupTrigger","useNotificationsContext","useNotificationsState","ExternalNavComponent","children","isActive","to","activeClassName","props","a","href","ProfileDropdownComponent","breakpoint","NavigationComponent","isMobile","MobileProfileDropdown","navigationComponent","profileId","direction","trigger","hintPopup","portal","width","onClose","onOpen","className","rest","expanded","setExpanded","hasNotifications","NotificationsContextProvider","onNotificationsUpdate","onExpandToggle","e","stopPropagation","id","undefined","title","icon","iconActive","submenuExpanded","onClick","tag","value","ProfileDropdownDivider","Divider","getText","text","ProfileDropdownSection","MobileProfileDropdownSection","Section","tooltip","counter","sectionText","tagData","ProfileDropdownLink","MobileProfileDropdownLink","Link","external","linkText","isExternalLink","startsWith","parentId","ProfileDropdown","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, useEffect, useState } from 'react';\nimport { NavLinkComponentProps } from '../../utils/navigation-context';\nimport { getCounterTag } from '../../utils/side-nav';\nimport {\n    ProfileDropdownLinkProps,\n    ProfileDropdownProps,\n    ProfileDropdownSectionProps,\n} from '../profile-dropdown/interface';\nimport { DesktopProfileDropdown } 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/interface';\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\nfunction ProfileDropdownComponent(props: ProfileDropdownProps) {\n    const { breakpoint, NavigationComponent } = useTitanLayoutContext();\n    return breakpoint.isMobile ? (\n        <MobileProfileDropdown {...props} navigationComponent={NavigationComponent} />\n    ) : (\n        <DesktopProfileDropdown {...props} />\n    );\n}\nconst profileId = '--profile';\n\nconst MobileProfileDropdown: FC<ProfileDropdownProps & NavigationComponentProps> = ({\n    direction,\n    trigger,\n    hintPopup,\n    portal,\n    width,\n    onClose,\n    onOpen,\n    className,\n    children,\n    ...rest\n}) => {\n    const [expanded, setExpanded] = useState(false);\n    const { hasNotifications, NotificationsContextProvider } = useNotificationsState();\n    const { onNotificationsUpdate } = useNotificationsContext();\n    const onExpandToggle = () => {\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                className={className}\n                {...rest}\n                submenuExpanded={expanded}\n                onSubmenuExpand={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\nfunction ProfileDropdownSection(props: ProfileDropdownSectionProps) {\n    const { breakpoint } = useTitanLayoutContext();\n    return breakpoint.isMobile ? (\n        <MobileProfileDropdownSection {...props} />\n    ) : (\n        <DesktopProfileDropdown.Section {...props} />\n    );\n}\nconst MobileProfileDropdownSection: FC<ProfileDropdownSectionProps> = ({\n    id,\n    tooltip,\n    tag,\n    counter,\n\n    className,\n    children,\n    text,\n    ...rest\n}) => {\n    const sectionText = getText(children, text);\n    const { onNotificationsUpdate } = useNotificationsContext();\n    const tagData = getCounterTag(counter, tag);\n    onNotificationsUpdate(id, !!tagData);\n\n    return sectionText ? (\n        <InternalSideNavigationGroupTrigger\n            {...rest}\n            id={id}\n            title={sectionText}\n            isActive={undefined}\n            tag={tagData}\n            className={className}\n        />\n    ) : null;\n};\n\nfunction ProfileDropdownLink(props: ProfileDropdownLinkProps) {\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    id,\n    external,\n    to,\n    tooltip,\n    text,\n    children,\n    className,\n    navigationComponent,\n    tag,\n    counter,\n    ...rest\n}) => {\n    const { onNotificationsUpdate } = useNotificationsContext();\n    const linkText = getText(children, text);\n    const isExternalLink = external ?? to?.startsWith('http');\n    const tagData = getCounterTag(counter, tag);\n    onNotificationsUpdate(id, !!tagData);\n\n    return linkText ? (\n        <InternalSideNavigationGroupLink\n            {...rest}\n            id={id}\n            to={to}\n            title={linkText}\n            isActive={undefined}\n            className={className}\n            tag={tagData}\n            parentId={profileId}\n            navigationComponent={isExternalLink ? ExternalNavComponent : navigationComponent}\n        />\n    ) : null;\n};\n\nexport const ProfileDropdown = Object.assign(ProfileDropdownComponent, {\n    Divider: ProfileDropdownDivider,\n    Link: ProfileDropdownLink,\n    Section: ProfileDropdownSection,\n});\n"],"names":["SvgAccountActive","SvgAccountInactive","useEffect","useState","getCounterTag","DesktopProfileDropdown","useTitanLayoutContext","InternalSideNavigationGroup","InternalSideNavigationGroupDivider","InternalSideNavigationGroupLink","InternalSideNavigationGroupTrigger","useNotificationsContext","useNotificationsState","ExternalNavComponent","children","isActive","to","activeClassName","props","a","href","ProfileDropdownComponent","breakpoint","NavigationComponent","isMobile","MobileProfileDropdown","navigationComponent","profileId","direction","trigger","hintPopup","portal","width","onClose","onOpen","className","rest","expanded","setExpanded","hasNotifications","NotificationsContextProvider","onNotificationsUpdate","onExpandToggle","id","undefined","title","icon","iconActive","submenuExpanded","onSubmenuExpand","onClick","tag","value","ProfileDropdownDivider","Divider","getText","text","ProfileDropdownSection","MobileProfileDropdownSection","Section","tooltip","counter","sectionText","tagData","ProfileDropdownLink","MobileProfileDropdownLink","Link","external","linkText","isExternalLink","startsWith","parentId","ProfileDropdown","Object","assign"],"mappings":"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"}

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

@@ -60,6 +60,6 @@ export declare const InternalSideNavigationGroup: FC<NavigationComponentProps &
     children: ReactNode;
     submenuExpanded: boolean;
     onClick?: (e: MouseEvent<never>) => void;
-    onExpandToggle(e: MouseEvent<never>): void;
+    onSubmenuExpand(id: string, expanded: boolean, force: boolean): void;
 }>;
 //# sourceMappingURL=layout-sidebar-links-internal.d.ts.map

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

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

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

@@ -126,41 +126,50 @@ export const InternalSideNavigationGroupDivider = ()=>{
         className: Styles.divider
     });
 };
-export const InternalSideNavigationGroup = ({ id, to, title, isActive, icon, iconActive, className, tag, children, submenuExpanded, onExpandToggle, onClick, navigationComponent, ...rest })=>{
-    const onRootClickCapture = (e)=>{
-        if (!submenuExpanded) {
-            onExpandToggle === null || onExpandToggle === void 0 ? void 0 : onExpandToggle(e);
+export const InternalSideNavigationGroup = ({ id, to, title, isActive, icon, iconActive, className, tag, children, submenuExpanded, onSubmenuExpand, onClick, navigationComponent, ...rest })=>{
+    const onRootClick = (e)=>{
+        if (submenuExpanded) {
+            onSubmenuExpand(id, true, true);
+        } else {
+            onSubmenuExpand(id, true, false);
             e.preventDefault();
             e.stopPropagation();
         }
     };
+    const onToggleClick = (e)=>{
+        onSubmenuExpand(id, !submenuExpanded, false);
+        e.preventDefault();
+        e.stopPropagation();
+    };
     return /*#__PURE__*/ _jsxs("div", {
         className: classNames(Styles.navGroupWrapper),
         children: [
             /*#__PURE__*/ _jsxs("div", {
                 className: Styles.navGroupItem,
-                onClickCapture: onRootClickCapture,
                 children: [
-                    to ? /*#__PURE__*/ _jsx(InternalSideNavigationLink, {
-                        id: id,
-                        to: to,
-                        title: title,
-                        isActive: isActive,
-                        icon: icon,
-                        iconActive: iconActive,
-                        tag: tag,
-                        className: className,
-                        ...rest,
-                        navigationComponent: navigationComponent
-                    }) : /*#__PURE__*/ _jsx(InternalSideNavigationTrigger, {
-                        id: id,
-                        title: title,
-                        isActive: isActive === true || undefined,
-                        icon: icon,
-                        iconActive: iconActive,
-                        tag: tag,
-                        className: className,
-                        ...rest
+                    /*#__PURE__*/ _jsx("div", {
+                        onClick: onRootClick,
+                        children: to ? /*#__PURE__*/ _jsx(InternalSideNavigationLink, {
+                            id: id,
+                            to: to,
+                            title: title,
+                            isActive: isActive,
+                            icon: icon,
+                            iconActive: iconActive,
+                            tag: tag,
+                            className: className,
+                            ...rest,
+                            navigationComponent: navigationComponent
+                        }) : /*#__PURE__*/ _jsx(InternalSideNavigationTrigger, {
+                            id: id,
+                            title: title,
+                            isActive: isActive === true || undefined,
+                            icon: icon,
+                            iconActive: iconActive,
+                            tag: tag,
+                            className: className,
+                            ...rest
+                        })
                     }),
                     /*#__PURE__*/ _jsx("div", {
                         className: Styles.navItemGroupToggleWrapper,
@@ -169,7 +178,7 @@ export const InternalSideNavigationGroup = ({ id, to, title, isActive, icon, ico
                             size: "small",
                             icon: submenuExpanded ? SvgGroupCollapse : SvgGroupExpand,
                             className: Styles.navItemGroupToggle,
-                            onClick: onExpandToggle,
+                            onClick: onToggleClick,
                             "aria-label": "Toggle submenu",
                             "data-cy": "nav-item-group-expand"
                         }), submenuExpanded ? 'Hide Submenu' : 'View Submenu', {

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

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

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

@@ -13,7 +13,7 @@ export interface LayoutSidebarProps {
     navigationComponent: FC<NavLinkComponentProps>;
     onBarExpandChange(expanded: boolean): void;
     onDrawerOpenChange(expanded: boolean): void;
-    onSubmenuExpandChange(id: string, expanded: boolean): void;
+    onSubmenuExpandChange(id: string, expanded: boolean, force: boolean): void;
 }
 export declare const LayoutSidebar: FC<LayoutSidebarProps>;
 //# sourceMappingURL=layout-sidebar.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"layout-sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-sidebar.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEH,EAAE,EAGF,YAAY,EAGf,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,kBAAkB,EAAyB,MAAM,wBAAwB,CAAC;AACnF,OAAO,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAWvE,MAAM,WAAW,kBAAkB;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,YAAY,EAAE,CAAC;IACrB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,SAAS,CAAC,EAAE,kBAAkB,EAAE,CAAC;IACjC,WAAW,EAAE,OAAO,CAAC;IACrB,gBAAgB,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;IACvC,YAAY,EAAE,OAAO,CAAC;IACtB,MAAM,EAAE,OAAO,CAAC;IAChB,mBAAmB,EAAE,EAAE,CAAC,qBAAqB,CAAC,CAAC;IAC/C,iBAAiB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;IAC3C,kBAAkB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;IAC5C,qBAAqB,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;CAC9D;AAED,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAuFhD,CAAC"}
+{"version":3,"file":"layout-sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-sidebar.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAY,EAAE,EAAY,YAAY,EAAkB,MAAM,OAAO,CAAC;AAC7E,OAAO,EAAE,kBAAkB,EAAyB,MAAM,wBAAwB,CAAC;AACnF,OAAO,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAWvE,MAAM,WAAW,kBAAkB;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,YAAY,EAAE,CAAC;IACrB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,SAAS,CAAC,EAAE,kBAAkB,EAAE,CAAC;IACjC,WAAW,EAAE,OAAO,CAAC;IACrB,gBAAgB,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;IACvC,YAAY,EAAE,OAAO,CAAC;IACtB,MAAM,EAAE,OAAO,CAAC;IAChB,mBAAmB,EAAE,EAAE,CAAC,qBAAqB,CAAC,CAAC;IAC/C,iBAAiB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;IAC3C,kBAAkB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;IAC5C,qBAAqB,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC;CAC9E;AAED,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAuFhD,CAAC"}

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

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Icon, Popover, Text, ThemeProvider } from '@servicetitan/anvil2';
 import SvgClose from '@servicetitan/anvil2/assets/icons/material/round/close.svg';
 import classNames from 'classnames';
-import { Children, Fragment, isValidElement, useCallback } from 'react';
+import { Children, Fragment, isValidElement } from 'react';
 import { getCounterTag, getSubmenuGroupTag } from '../../utils/side-nav';
 import { LayoutPlacementContext, useTitanLayoutContext } from './layout-context';
 import { InternalSideNavigationGroup, InternalSideNavigationGroupLink, InternalSideNavigationLink } from './layout-sidebar-links-internal';
@@ -74,17 +74,6 @@ export const LayoutSidebar = ({ className, mobile, barExpanded, submenusExpanded
 LayoutSidebar.displayName = 'LayoutSidebar';
 /** Side Navigation menu item */ const SideNavigationGroupItem = ({ item, onSubmenuExpand, barExpanded, submenuExpanded, navigationComponent })=>{
     var _item_submenu, _item_submenu1;
-    const onExpandToggle = useCallback((e)=>{
-        e.preventDefault();
-        e.stopPropagation();
-        if (item.id) {
-            onSubmenuExpand === null || onSubmenuExpand === void 0 ? void 0 : onSubmenuExpand(item.id, !submenuExpanded);
-        }
-    }, [
-        item.id,
-        submenuExpanded,
-        onSubmenuExpand
-    ]);
     const { sidebar: { styles: { popoverContent } } } = useTitanLayoutContext();
     const tag = getSubmenuGroupTag(item.submenu, getCounterTag(item.counter, item.tag));
     var _item_submenu_groups, _item_submenu_groups1;
@@ -98,7 +87,7 @@ LayoutSidebar.displayName = 'LayoutSidebar';
         className: item.className,
         tag: tag,
         submenuExpanded: submenuExpanded,
-        onExpandToggle: onExpandToggle,
+        onSubmenuExpand: onSubmenuExpand,
         navigationComponent: navigationComponent,
         children: /*#__PURE__*/ _jsx(SideNavigationGroupContent, {
             parentId: item.id,
@@ -108,7 +97,7 @@ LayoutSidebar.displayName = 'LayoutSidebar';
     }) : /*#__PURE__*/ _jsxs(Popover, {
         placement: "right-start",
         openOnHover: true,
-        delay: 500,
+        delay: 300,
         children: [
             /*#__PURE__*/ _jsx(Popover.Trigger, {
                 children: (triggerProps)=>/*#__PURE__*/ _jsx("div", {

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 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\nexport interface LayoutSidebarProps {\n    className?: string;\n    top?: ReactElement[];\n    bottom?: ReactElement;\n    mainItems?: NavigationItemData[];\n    barExpanded: boolean;\n    submenusExpanded: 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    submenusExpanded,\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                                    item={item}\n                                    barExpanded={mobile ? drawerOpened : barExpanded}\n                                    submenuExpanded={\n                                        !!item.id && !!submenusExpanded?.includes(item.id)\n                                    }\n                                    onSubmenuExpand={onSubmenuExpandChange}\n                                    navigationComponent={navigationComponent}\n                                />\n                            ) : (\n                                <InternalSideNavigationLink\n                                    key={item.id}\n                                    id={item.id}\n                                    to={item.to}\n                                    title={item.title}\n                                    isActive={item.isActive}\n                                    icon={item.icon}\n                                    iconActive={item.iconActive}\n                                    className={item.className}\n                                    tag={getSubmenuGroupTag(\n                                        item.submenu,\n                                        getCounterTag(item.counter, item.tag)\n                                    )}\n                                    navigationComponent={navigationComponent}\n                                />\n                            )\n                        )}\n                    </div>\n\n                    {!!bottom && <SidebarBottom>{bottom}</SidebarBottom>}\n                </ThemeProvider>\n            </div>\n        </LayoutPlacementContext.Provider>\n    );\n};\nLayoutSidebar.displayName = 'LayoutSidebar';\n\n/** Side Navigation menu item */\nconst SideNavigationGroupItem: FC<{\n    item: NavigationItemData;\n    navigationComponent: FC<NavLinkComponentProps>;\n    barExpanded: boolean;\n    submenuExpanded: boolean;\n    onSubmenuExpand: undefined | ((id: string, expanded: boolean) => void);\n}> = ({ item, onSubmenuExpand, barExpanded, submenuExpanded, navigationComponent }) => {\n    const onExpandToggle = useCallback(\n        (e: MouseEvent<never>) => {\n            e.preventDefault();\n            e.stopPropagation();\n\n            if (item.id) {\n                onSubmenuExpand?.(item.id, !submenuExpanded);\n            }\n        },\n        [item.id, submenuExpanded, onSubmenuExpand]\n    );\n    const {\n        sidebar: {\n            styles: { popoverContent },\n        },\n    } = useTitanLayoutContext();\n\n    const tag = getSubmenuGroupTag(item.submenu, getCounterTag(item.counter, item.tag));\n\n    return barExpanded ? (\n        <InternalSideNavigationGroup\n            id={item.id}\n            to={item.to}\n            title={item.title}\n            isActive={item.isActive}\n            icon={item.icon}\n            iconActive={item.iconActive}\n            className={item.className}\n            tag={tag}\n            submenuExpanded={submenuExpanded}\n            onExpandToggle={onExpandToggle}\n            navigationComponent={navigationComponent}\n        >\n            <SideNavigationGroupContent\n                parentId={item.id}\n                groups={item.submenu?.groups ?? []}\n                navigationComponent={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                            id={item.id}\n                            to={item.to}\n                            title={item.title}\n                            isActive={item.isActive}\n                            icon={item.icon}\n                            iconActive={item.iconActive}\n                            className={item.className}\n                            tag={tag}\n                            navigationComponent={navigationComponent}\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                        {item.title}\n                    </Text>\n                    <SideNavigationGroupContent\n                        parentId={item.id}\n                        groups={item.submenu?.groups ?? []}\n                        navigationComponent={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                            id={link.id}\n                            to={link.to}\n                            title={link.title}\n                            isActive={link.isActive}\n                            className={undefined}\n                            tag={getCounterTag(link.counter, link.tag)}\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","classNames","Children","Fragment","isValidElement","useCallback","getCounterTag","getSubmenuGroupTag","LayoutPlacementContext","useTitanLayoutContext","InternalSideNavigationGroup","InternalSideNavigationGroupLink","InternalSideNavigationLink","Styles","LayoutSidebar","className","mobile","barExpanded","submenusExpanded","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","submenuExpanded","id","includes","onSubmenuExpand","to","title","isActive","icon","iconActive","tag","counter","SidebarBottom","displayName","onExpandToggle","e","preventDefault","stopPropagation","sidebar","styles","popoverContent","SideNavigationGroupContent","parentId","groups","placement","openOnHover","delay","Trigger","triggerProps","Content","style","submenuPopover","variant","el","reduce","out","group","index","links","trim","push","submenuGroupHeader","submenuGroupHeaderEmpty","link","undefined","children","list","child","navTop","divider","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 classNames from 'classnames';\nimport { Children, FC, Fragment, ReactElement, isValidElement } 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\nexport interface LayoutSidebarProps {\n    className?: string;\n    top?: ReactElement[];\n    bottom?: ReactElement;\n    mainItems?: NavigationItemData[];\n    barExpanded: boolean;\n    submenusExpanded: 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, force: boolean): void;\n}\n\nexport const LayoutSidebar: FC<LayoutSidebarProps> = ({\n    className,\n    mobile,\n    barExpanded,\n    submenusExpanded,\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                                    item={item}\n                                    barExpanded={mobile ? drawerOpened : barExpanded}\n                                    submenuExpanded={\n                                        !!item.id && !!submenusExpanded?.includes(item.id)\n                                    }\n                                    onSubmenuExpand={onSubmenuExpandChange}\n                                    navigationComponent={navigationComponent}\n                                />\n                            ) : (\n                                <InternalSideNavigationLink\n                                    key={item.id}\n                                    id={item.id}\n                                    to={item.to}\n                                    title={item.title}\n                                    isActive={item.isActive}\n                                    icon={item.icon}\n                                    iconActive={item.iconActive}\n                                    className={item.className}\n                                    tag={getSubmenuGroupTag(\n                                        item.submenu,\n                                        getCounterTag(item.counter, item.tag)\n                                    )}\n                                    navigationComponent={navigationComponent}\n                                />\n                            )\n                        )}\n                    </div>\n\n                    {!!bottom && <SidebarBottom>{bottom}</SidebarBottom>}\n                </ThemeProvider>\n            </div>\n        </LayoutPlacementContext.Provider>\n    );\n};\nLayoutSidebar.displayName = 'LayoutSidebar';\n\n/** Side Navigation menu item */\nconst SideNavigationGroupItem: FC<{\n    item: NavigationItemData;\n    navigationComponent: FC<NavLinkComponentProps>;\n    barExpanded: boolean;\n    submenuExpanded: boolean;\n    onSubmenuExpand: (id: string, expanded: boolean, force: boolean) => void;\n}> = ({ item, onSubmenuExpand, barExpanded, submenuExpanded, navigationComponent }) => {\n    const {\n        sidebar: {\n            styles: { popoverContent },\n        },\n    } = useTitanLayoutContext();\n\n    const tag = getSubmenuGroupTag(item.submenu, getCounterTag(item.counter, item.tag));\n\n    return barExpanded ? (\n        <InternalSideNavigationGroup\n            id={item.id}\n            to={item.to}\n            title={item.title}\n            isActive={item.isActive}\n            icon={item.icon}\n            iconActive={item.iconActive}\n            className={item.className}\n            tag={tag}\n            submenuExpanded={submenuExpanded}\n            onSubmenuExpand={onSubmenuExpand}\n            navigationComponent={navigationComponent}\n        >\n            <SideNavigationGroupContent\n                parentId={item.id}\n                groups={item.submenu?.groups ?? []}\n                navigationComponent={navigationComponent}\n            />\n        </InternalSideNavigationGroup>\n    ) : (\n        <Popover placement=\"right-start\" openOnHover delay={300}>\n            <Popover.Trigger>\n                {(triggerProps: any) => (\n                    <div {...triggerProps}>\n                        <InternalSideNavigationLink\n                            id={item.id}\n                            to={item.to}\n                            title={item.title}\n                            isActive={item.isActive}\n                            icon={item.icon}\n                            iconActive={item.iconActive}\n                            className={item.className}\n                            tag={tag}\n                            navigationComponent={navigationComponent}\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                        {item.title}\n                    </Text>\n                    <SideNavigationGroupContent\n                        parentId={item.id}\n                        groups={item.submenu?.groups ?? []}\n                        navigationComponent={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                            id={link.id}\n                            to={link.to}\n                            title={link.title}\n                            isActive={link.isActive}\n                            className={undefined}\n                            tag={getCounterTag(link.counter, link.tag)}\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","classNames","Children","Fragment","isValidElement","getCounterTag","getSubmenuGroupTag","LayoutPlacementContext","useTitanLayoutContext","InternalSideNavigationGroup","InternalSideNavigationGroupLink","InternalSideNavigationLink","Styles","LayoutSidebar","className","mobile","barExpanded","submenusExpanded","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","submenuExpanded","id","includes","onSubmenuExpand","to","title","isActive","icon","iconActive","tag","counter","SidebarBottom","displayName","sidebar","styles","popoverContent","SideNavigationGroupContent","parentId","groups","placement","openOnHover","delay","Trigger","triggerProps","Content","style","submenuPopover","variant","el","reduce","out","group","index","links","trim","push","submenuGroupHeader","submenuGroupHeaderEmpty","link","undefined","children","list","child","navTop","divider","navBottom"],"mappings":"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"}

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

@@ -47,11 +47,11 @@
         }
     }
 
-    .nav-item {
-        margin-bottom: @spacing-half;
-    }
     .nav-top {
-        margin-bottom: @spacing-half;
+        .divider {
+            margin-top: 10px;
+            margin-bottom: @spacing-half;
+        }
     }
     .nav-bottom {
         .divider {
@@ -134,10 +134,7 @@
         width: 64px;
         overflow-x: hidden;
         padding-top: @spacing-1;
-
-        &:not(:first-child) {
-            margin-top: @spacing-half;
-        }
+        margin-top: @spacing-half;
 
         .nav-item-counter[data-anv][data-anv] {
             position: absolute;
@@ -171,8 +168,13 @@
         }
     }
 
-    .nav-top .divider {
-        margin-top: @spacing-1;
+    .nav-main {
+        padding-top: @spacing-half;
+    }
+    .nav-top {
+        .divider {
+            margin-top: 12px;
+        }
     }
 }
 
@@ -185,28 +187,15 @@
         margin-right: @spacing-1;
     }
 
-    .toggle {
-        .toggle-content {
-            margin: @spacing-2;
-
-            .toggle-icon-wrapper {
-                padding-left: @spacing-half;
-                padding-right: @spacing-half;
-            }
-
-            .toggle-text {
-                padding-left: @spacing-0 !important;
-            }
+    .nav-top {
+        .divider {
+            margin-top: 10px;
+            margin-bottom: 6px;
         }
     }
 
-    .nav-top .divider {
-        margin-top: @spacing-half;
-        margin-bottom: @spacing-1;
-    }
-
     .nav-main {
-        padding-top: @spacing-1;
+        padding-top: 12px;
     }
 
     .nav-group-item {
@@ -232,7 +221,7 @@
 .nav-wide {
     .nav-item {
         flex-direction: row;
-        margin-bottom: @spacing-half;
+        margin-top: @spacing-half;
 
         .nav-item-icon-wrapper {
             flex: 1;

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

@@ -10,6 +10,7 @@ export default _default;
 export declare const ContentLegacy: (args: LayoutContentArgs) => import("react/jsx-runtime").JSX.Element;
 export declare const ContentAnvil1: (args: LayoutContentArgs) => import("react/jsx-runtime").JSX.Element;
 export declare const ContentAnvil2: (args: LayoutContentArgs) => import("react/jsx-runtime").JSX.Element;
+export declare const CustomNavigation: (args: LayoutContentArgs) => import("react/jsx-runtime").JSX.Element;
 export declare const ExtraWithTitle: (args: LayoutContentArgs) => import("react/jsx-runtime").JSX.Element;
 export declare const ExtraWithFlashing: (args: LayoutContentArgs) => import("react/jsx-runtime").JSX.Element;
 export declare const ExtraWithTitleFlashing: (args: LayoutContentArgs) => import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -90,12 +90,12 @@ function TitanLayoutComponent({ appearance = 'anvil2', navVariant = 'left', id,
         onStateChange,
         isMobile
     ]);
-    const onSubmenuExpandChange = useCallback((id, expanded)=>{
+    const onSubmenuExpandChange = useCallback((id, expanded, force)=>{
         var _state_navCollapsed, _state_submenusExpanded;
         onStateChange === null || onStateChange === void 0 ? void 0 : onStateChange({
             navCollapsed: (_state_navCollapsed = state === null || state === void 0 ? void 0 : state.navCollapsed) !== null && _state_navCollapsed !== void 0 ? _state_navCollapsed : false,
             submenusExpanded: [
-                ...((_state_submenusExpanded = state === null || state === void 0 ? void 0 : state.submenusExpanded) !== null && _state_submenusExpanded !== void 0 ? _state_submenusExpanded : []).filter((i)=>i !== id),
+                ...force ? [] : ((_state_submenusExpanded = state === null || state === void 0 ? void 0 : state.submenusExpanded) !== null && _state_submenusExpanded !== void 0 ? _state_submenusExpanded : []).filter((i)=>i !== id),
                 ...expanded ? [
                     id
                 ] : []

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/navigation",
-    "version": "13.0.0",
+    "version": "13.0.1",
     "description": "Navigation components",
     "repository": {
         "type": "git",
@@ -42,5 +42,5 @@
         "less": true,
         "webpack": false
     },
-    "gitHead": "b47aa7d5873f1684381f957022e3ebae0caeeedb"
+    "gitHead": "3b872c501643de94f998d2260cc2d384132b2b89"
 }

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

@@ -113,6 +113,24 @@
         margin-right: @spacing-2;
         max-width: 400px;
     }
+
+    .burger {
+        width: 64px;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+    }
+}
+
+.header-light.header-desktop {
+    .he-top-left {
+        .logo-company-wrapper {
+            padding-left: @spacing-0 !important;
+        }
+        .logo-short-wrapper {
+            padding-left: @spacing-half !important;
+        }
+    }
 }
 
 // desktop stacked header

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

@@ -1,7 +1,7 @@
 import SvgAccountActive from '@servicetitan/anvil2/assets/icons/st/gnav_account_active.svg';
 import SvgAccountInactive from '@servicetitan/anvil2/assets/icons/st/gnav_account_inactive.svg';
 
-import { FC, MouseEvent, useEffect, useState } from 'react';
+import { FC, useEffect, useState } from 'react';
 import { NavLinkComponentProps } from '../../utils/navigation-context';
 import { getCounterTag } from '../../utils/side-nav';
 import {
@@ -63,8 +63,7 @@ const MobileProfileDropdown: FC<ProfileDropdownProps & NavigationComponentProps>
     const [expanded, setExpanded] = useState(false);
     const { hasNotifications, NotificationsContextProvider } = useNotificationsState();
     const { onNotificationsUpdate } = useNotificationsContext();
-    const onExpandToggle = (e: MouseEvent<never>) => {
-        e.stopPropagation();
+    const onExpandToggle = () => {
         setExpanded(!expanded);
     };
 
@@ -84,7 +83,7 @@ const MobileProfileDropdown: FC<ProfileDropdownProps & NavigationComponentProps>
                 className={className}
                 {...rest}
                 submenuExpanded={expanded}
-                onExpandToggle={onExpandToggle}
+                onSubmenuExpand={onExpandToggle}
                 onClick={onExpandToggle}
                 tag={{ value: hasNotifications }}
             >

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

@@ -244,7 +244,7 @@ export const InternalSideNavigationGroup: FC<
         children: ReactNode;
         submenuExpanded: boolean;
         onClick?: (e: MouseEvent<never>) => void;
-        onExpandToggle(e: MouseEvent<never>): void;
+        onSubmenuExpand(id: string, expanded: boolean, force: boolean): void;
     }
 > = ({
     id,
@@ -258,46 +258,56 @@ export const InternalSideNavigationGroup: FC<
 
     children,
     submenuExpanded,
-    onExpandToggle,
+    onSubmenuExpand,
     onClick,
     navigationComponent,
     ...rest
 }) => {
-    const onRootClickCapture = (e: MouseEvent<never>) => {
-        if (!submenuExpanded) {
-            onExpandToggle?.(e);
+    const onRootClick = (e: MouseEvent<never>) => {
+        if (submenuExpanded) {
+            onSubmenuExpand(id, true, true);
+        } else {
+            onSubmenuExpand(id, true, false);
             e.preventDefault();
             e.stopPropagation();
         }
     };
+    const onToggleClick = (e: MouseEvent<never>) => {
+        onSubmenuExpand(id, !submenuExpanded, false);
+        e.preventDefault();
+        e.stopPropagation();
+    };
+
     return (
         <div className={classNames(Styles.navGroupWrapper)}>
-            <div className={Styles.navGroupItem} onClickCapture={onRootClickCapture}>
-                {to ? (
-                    <InternalSideNavigationLink
-                        id={id}
-                        to={to}
-                        title={title}
-                        isActive={isActive}
-                        icon={icon}
-                        iconActive={iconActive}
-                        tag={tag}
-                        className={className}
-                        {...rest}
-                        navigationComponent={navigationComponent}
-                    />
-                ) : (
-                    <InternalSideNavigationTrigger
-                        id={id}
-                        title={title}
-                        isActive={isActive === true || undefined}
-                        icon={icon}
-                        iconActive={iconActive}
-                        tag={tag}
-                        className={className}
-                        {...rest}
-                    />
-                )}
+            <div className={Styles.navGroupItem}>
+                <div onClick={onRootClick}>
+                    {to ? (
+                        <InternalSideNavigationLink
+                            id={id}
+                            to={to}
+                            title={title}
+                            isActive={isActive}
+                            icon={icon}
+                            iconActive={iconActive}
+                            tag={tag}
+                            className={className}
+                            {...rest}
+                            navigationComponent={navigationComponent}
+                        />
+                    ) : (
+                        <InternalSideNavigationTrigger
+                            id={id}
+                            title={title}
+                            isActive={isActive === true || undefined}
+                            icon={icon}
+                            iconActive={iconActive}
+                            tag={tag}
+                            className={className}
+                            {...rest}
+                        />
+                    )}
+                </div>
 
                 <div className={Styles.navItemGroupToggleWrapper}>
                     {withTooltip(
@@ -306,7 +316,7 @@ export const InternalSideNavigationGroup: FC<
                             size="small"
                             icon={submenuExpanded ? SvgGroupCollapse : SvgGroupExpand}
                             className={Styles.navItemGroupToggle}
-                            onClick={onExpandToggle}
+                            onClick={onToggleClick}
                             aria-label="Toggle submenu"
                             data-cy="nav-item-group-expand"
                         />,

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

@@ -47,11 +47,11 @@
         }
     }
 
-    .nav-item {
-        margin-bottom: @spacing-half;
-    }
     .nav-top {
-        margin-bottom: @spacing-half;
+        .divider {
+            margin-top: 10px;
+            margin-bottom: @spacing-half;
+        }
     }
     .nav-bottom {
         .divider {
@@ -134,10 +134,7 @@
         width: 64px;
         overflow-x: hidden;
         padding-top: @spacing-1;
-
-        &:not(:first-child) {
-            margin-top: @spacing-half;
-        }
+        margin-top: @spacing-half;
 
         .nav-item-counter[data-anv][data-anv] {
             position: absolute;
@@ -171,8 +168,13 @@
         }
     }
 
-    .nav-top .divider {
-        margin-top: @spacing-1;
+    .nav-main {
+        padding-top: @spacing-half;
+    }
+    .nav-top {
+        .divider {
+            margin-top: 12px;
+        }
     }
 }
 
@@ -185,28 +187,15 @@
         margin-right: @spacing-1;
     }
 
-    .toggle {
-        .toggle-content {
-            margin: @spacing-2;
-
-            .toggle-icon-wrapper {
-                padding-left: @spacing-half;
-                padding-right: @spacing-half;
-            }
-
-            .toggle-text {
-                padding-left: @spacing-0 !important;
-            }
+    .nav-top {
+        .divider {
+            margin-top: 10px;
+            margin-bottom: 6px;
         }
     }
 
-    .nav-top .divider {
-        margin-top: @spacing-half;
-        margin-bottom: @spacing-1;
-    }
-
     .nav-main {
-        padding-top: @spacing-1;
+        padding-top: 12px;
     }
 
     .nav-group-item {
@@ -232,7 +221,7 @@
 .nav-wide {
     .nav-item {
         flex-direction: row;
-        margin-bottom: @spacing-half;
+        margin-top: @spacing-half;
 
         .nav-item-icon-wrapper {
             flex: 1;

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

@@ -1,15 +1,7 @@
 import { Icon, Popover, Text, ThemeProvider } from '@servicetitan/anvil2';
 import SvgClose from '@servicetitan/anvil2/assets/icons/material/round/close.svg';
 import classNames from 'classnames';
-import {
-    Children,
-    FC,
-    Fragment,
-    MouseEvent,
-    ReactElement,
-    isValidElement,
-    useCallback,
-} from 'react';
+import { Children, FC, Fragment, ReactElement, isValidElement } from 'react';
 import { NavigationItemData, NavigationSubmenuData } from '../../utils/navigation';
 import { NavLinkComponentProps } from '../../utils/navigation-context';
 import { getCounterTag, getSubmenuGroupTag } from '../../utils/side-nav';
@@ -34,7 +26,7 @@ export interface LayoutSidebarProps {
     navigationComponent: FC<NavLinkComponentProps>;
     onBarExpandChange(expanded: boolean): void;
     onDrawerOpenChange(expanded: boolean): void;
-    onSubmenuExpandChange(id: string, expanded: boolean): void;
+    onSubmenuExpandChange(id: string, expanded: boolean, force: boolean): void;
 }
 
 export const LayoutSidebar: FC<LayoutSidebarProps> = ({
@@ -133,19 +125,8 @@ const SideNavigationGroupItem: FC<{
     navigationComponent: FC<NavLinkComponentProps>;
     barExpanded: boolean;
     submenuExpanded: boolean;
-    onSubmenuExpand: undefined | ((id: string, expanded: boolean) => void);
+    onSubmenuExpand: (id: string, expanded: boolean, force: boolean) => void;
 }> = ({ item, onSubmenuExpand, barExpanded, submenuExpanded, navigationComponent }) => {
-    const onExpandToggle = useCallback(
-        (e: MouseEvent<never>) => {
-            e.preventDefault();
-            e.stopPropagation();
-
-            if (item.id) {
-                onSubmenuExpand?.(item.id, !submenuExpanded);
-            }
-        },
-        [item.id, submenuExpanded, onSubmenuExpand]
-    );
     const {
         sidebar: {
             styles: { popoverContent },
@@ -165,7 +146,7 @@ const SideNavigationGroupItem: FC<{
             className={item.className}
             tag={tag}
             submenuExpanded={submenuExpanded}
-            onExpandToggle={onExpandToggle}
+            onSubmenuExpand={onSubmenuExpand}
             navigationComponent={navigationComponent}
         >
             <SideNavigationGroupContent
@@ -175,7 +156,7 @@ const SideNavigationGroupItem: FC<{
             />
         </InternalSideNavigationGroup>
     ) : (
-        <Popover placement="right-start" openOnHover delay={500}>
+        <Popover placement="right-start" openOnHover delay={300}>
             <Popover.Trigger>
                 {(triggerProps: any) => (
                     <div {...triggerProps}>

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

@@ -162,7 +162,6 @@ const SideLinkPopoverWrapper: TitanLayoutLinkWrapper = ({ children, context }) =
 
 const sidebarTop = () => [
     <TitanLayout.Link key="tasks" {...navItems.tasks} />,
-    <TitanLayout.Link key="calls" {...navItems.calls} />,
     <TitanLayout.Trigger
         key="marketing"
         {...navItems.marketing}
@@ -170,6 +169,7 @@ const sidebarTop = () => [
         wrapper={SideLinkPopoverWrapper}
         counter={50}
     />,
+    <TitanLayout.Link key="calls" {...navItems.calls} />,
 ];
 const ContentHeader = () => {
     const [longInfo, setLongInfo] = useState(false);
@@ -350,6 +350,22 @@ export const ContentAnvil2 = (args: LayoutContentArgs) => (
     </TitanLayout>
 );
 
+export const CustomNavigation = (args: LayoutContentArgs) => (
+    <TitanLayout
+        {...useLayoutProps(args)}
+        appearance="anvil1"
+        {...useDefaultLayoutProps()}
+        logo={{
+            title: 'Commercial',
+            mantleFill: '#2270EE',
+        }}
+    >
+        <Anvil1Page>
+            <Content {...args} />
+        </Anvil1Page>
+    </TitanLayout>
+);
+
 export const ExtraWithTitle = (args: LayoutContentArgs) => (
     <TitanLayout
         {...useLayoutProps(args)}

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

@@ -205,11 +205,11 @@ function TitanLayoutComponent({
         [onStateChange, isMobile]
     );
     const onSubmenuExpandChange = useCallback(
-        (id: string, expanded: boolean) => {
+        (id: string, expanded: boolean, force: boolean) => {
             onStateChange?.({
                 navCollapsed: state?.navCollapsed ?? false,
                 submenusExpanded: [
-                    ...(state?.submenusExpanded ?? []).filter(i => i !== id),
+                    ...(force ? [] : (state?.submenusExpanded ?? []).filter(i => i !== id)),
                     ...(expanded ? [id] : []),
                 ],
             });