@servicetitan/navigation 11.0.0-canary.237.4d902dc.0 → 11.0.0-canary.237.5f3f02d.0

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

@@ -1,8 +1,8 @@
 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, useState } from 'react';
-import { NavigationComponentContext } from '../../utils/navigation-context';
+import { FC, MouseEvent, useEffect, useState } from 'react';
+import { NavLinkComponentProps, NavigationComponentContext } from '../../utils/navigation-context';
 import {
     ProfileDropdown as DesktopProfileDropdown,
     ProfileDropdownLinkProps,
@@ -17,6 +17,7 @@ import {
     InternalSideNavigationGroupLink,
     InternalSideNavigationGroupTrigger,
 } from './layout-sidebar-links-internal';
+import { useNotificationsContext, useNotificationsState } from './notifications-context';
 
 export type {
     ProfileDropdownProps,
@@ -24,14 +25,28 @@ export type {
     ProfileDropdownLinkProps,
 } from '../profile-dropdown/profile-dropdown';
 
+const ExternalNavComponent: FC<NavLinkComponentProps> = ({
+    children,
+    isActive,
+    to,
+    activeClassName,
+    ...props
+}) => (
+    <a {...props} href={to}>
+        {children}
+    </a>
+);
+
 const ProfileDropdownContent: FC<ProfileDropdownProps> = props => {
-    const { breakpoint, NavigationComponent } = useTitanLayoutContext();
+    const { isTitanLayout, breakpoint, NavigationComponent } = useTitanLayoutContext();
     return breakpoint.isMobile ? (
         <MobileProfileDropdown {...props} navigationComponent={NavigationComponent} />
-    ) : (
+    ) : isTitanLayout ? (
         <NavigationComponentContext.Provider value={NavigationComponent}>
             <DesktopProfileDropdown {...props} />
         </NavigationComponentContext.Provider>
+    ) : (
+        <DesktopProfileDropdown {...props} />
     );
 };
 ProfileDropdownContent.displayName = 'ProfileDropdown';
@@ -40,24 +55,37 @@ const MobileProfileDropdown: FC<ProfileDropdownProps & NavigationComponentProps>
     children,
     ...props
 }) => {
+    const id = '__profile';
     const [expanded, setExpanded] = useState(false);
-    const onExpandToggle = () => setExpanded(!expanded);
+    const { hasNotifications, NotificationsContextProvider } = useNotificationsState();
+    const { onNotificationsUpdate } = useNotificationsContext();
+    const onExpandToggle = (e: MouseEvent<never>) => {
+        e.stopPropagation();
+        setExpanded(!expanded);
+    };
+
+    useEffect(() => {
+        onNotificationsUpdate(id, hasNotifications);
+    }, [hasNotifications, onNotificationsUpdate]);
+
     return (
-        <InternalSideNavigationGroup
-            id="__profile"
-            to={undefined}
-            title="Profile"
-            icon={SvgAccountInactive}
-            iconActive={SvgAccountActive}
-            isActive={expanded}
-            {...props}
-            submenuExpanded={expanded}
-            onExpandToggle={onExpandToggle}
-            onClick={onExpandToggle}
-            tag={undefined}
-        >
-            {children}
-        </InternalSideNavigationGroup>
+        <NotificationsContextProvider>
+            <InternalSideNavigationGroup
+                id={id}
+                to={undefined}
+                title="Profile"
+                icon={SvgAccountInactive}
+                iconActive={SvgAccountActive}
+                isActive={expanded}
+                {...props}
+                submenuExpanded={expanded}
+                onExpandToggle={onExpandToggle}
+                onClick={onExpandToggle}
+                tag={{ value: hasNotifications }}
+            >
+                {children}
+            </InternalSideNavigationGroup>
+        </NotificationsContextProvider>
     );
 };
 
@@ -70,6 +98,25 @@ const ProfileDropdownDivider: FC = () => {
     );
 };
 
+const getText = (children: any, text: any): string | undefined => {
+    if (typeof children === 'string') {
+        return children;
+    }
+
+    if (typeof text === 'string') {
+        return text;
+    }
+
+    return undefined;
+};
+
+const getTag = (
+    tag: ProfileDropdownLinkProps['tag'],
+    counter: ProfileDropdownLinkProps['counter']
+): boolean => {
+    return !!tag?.value || !!counter;
+};
+
 const ProfileDropdownSection: FC<ProfileDropdownSectionProps> = props => {
     const { breakpoint } = useTitanLayoutContext();
     return breakpoint.isMobile ? (
@@ -78,10 +125,19 @@ const ProfileDropdownSection: FC<ProfileDropdownSectionProps> = props => {
         <DesktopProfileDropdown.Section {...props} />
     );
 };
-const MobileProfileDropdownSection: FC<ProfileDropdownSectionProps> = props => {
-    const title = typeof props.children === 'string' ? props.children : undefined;
-    return title ? (
-        <InternalSideNavigationGroupTrigger id={props.id} title={title} onClick={props.onClick} />
+const MobileProfileDropdownSection: FC<ProfileDropdownSectionProps> = ({
+    children,
+    text,
+    tooltip,
+    title,
+    ...props
+}) => {
+    const sectionText = getText(children, text);
+    const { onNotificationsUpdate } = useNotificationsContext();
+    onNotificationsUpdate(props.id, getTag(props.tag, props.counter));
+
+    return sectionText ? (
+        <InternalSideNavigationGroupTrigger {...props} title={sectionText} />
     ) : null;
 };
 
@@ -94,17 +150,25 @@ const ProfileDropdownLink: FC<ProfileDropdownLinkProps> = props => {
     );
 };
 const MobileProfileDropdownLink: FC<ProfileDropdownLinkProps & NavigationComponentProps> = ({
+    external,
     to,
+    tooltip,
+    text,
+    children,
     navigationComponent,
     ...props
 }) => {
-    const title = typeof props.children === 'string' ? props.children : undefined;
-    return title ? (
+    const { onNotificationsUpdate } = useNotificationsContext();
+    const linkText = getText(children, text);
+    const isExternalLink = external ?? to?.startsWith('http');
+    onNotificationsUpdate(props.id, getTag(props.tag, props.counter));
+
+    return linkText ? (
         <InternalSideNavigationGroupLink
             {...props}
             to={to}
-            title={title}
-            navigationComponent={navigationComponent}
+            title={linkText}
+            navigationComponent={isExternalLink ? ExternalNavComponent : navigationComponent}
         />
     ) : null;
 };

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

@@ -156,7 +156,9 @@ export const InternalSideNavigationLink: FC<InternalSideNavigationLinkProps> = (
 
 /** Side Navigation menu trigger (for internal usage) */
 export const InternalSideNavigationTrigger: FC<
-    Omit<InternalSideNavigationLinkProps, 'to' | 'navigationComponent'> & { onClick?: () => void }
+    Omit<InternalSideNavigationLinkProps, 'to' | 'navigationComponent'> & {
+        onClick?: (e: MouseEvent<never>) => void;
+    }
 > = ({ className, dataPrefix, isActive, submenuExpanded, onExpandToggle, onClick, ...props }) => {
     return (
         <div
@@ -180,12 +182,22 @@ export const InternalSideNavigationTrigger: FC<
 
 export const InternalSideNavigationGroupLink: FC<
     NavigationSubmenuItemData & NavigationComponentProps
-> = ({ id, counter, tag, title, to, isActive, navigationComponent: NavigationComponent }) => {
+> = ({
+    id,
+    counter,
+    tag,
+    title,
+    to,
+    isActive,
+    navigationComponent: NavigationComponent,
+    ...rest
+}) => {
     return (
         <NavigationComponent
+            key={id}
             data-cy={`navigation-item-${id}`}
             data-pendo={`navigation-item-${id}`}
-            key={id}
+            {...rest}
             to={to}
             className={classNames(Styles.submenuItem, Styles.submenuLink, {
                 [Styles.submenuLinkActive]: isActive === true,
@@ -201,12 +213,13 @@ export const InternalSideNavigationGroupLink: FC<
 
 export const InternalSideNavigationGroupTrigger: FC<
     Omit<NavigationSubmenuItemData, 'to'> & { onClick?: (e: MouseEvent<any>) => void }
-> = ({ id, counter, onClick, tag, title, isActive }) => {
+> = ({ id, counter, onClick, tag, title, isActive, ...rest }) => {
     return (
         <div
             data-cy={`navigation-item-${id}`}
             data-pendo={`navigation-item-${id}`}
             key={id}
+            {...rest}
             className={classNames(Styles.submenuItem, {
                 [Styles.submenuLink]: !!onClick,
                 [Styles.submenuLinkActive]: isActive === true,
@@ -231,7 +244,7 @@ export const InternalSideNavigationGroup: FC<
             onExpandToggle?: (e: MouseEvent<never>) => void;
             tag: BadgeTagProps | undefined;
             to: NavigationItemData['to'] | undefined;
-            onClick?: () => void;
+            onClick?: (e: MouseEvent<never>) => void;
         }
 > = ({ children, submenuExpanded, to, onExpandToggle, onClick, ...props }) => {
     return (

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

@@ -6,6 +6,7 @@ import {
     InternalSideNavigationLink,
     InternalSideNavigationTrigger,
 } from './layout-sidebar-links-internal';
+import { useNotificationsContext } from './notifications-context';
 
 const WrappedLink: FC<{
     children: ReactElement<any>;
@@ -17,7 +18,14 @@ const WrappedLink: FC<{
 
 /** Side Navigation menu link */
 export function TitanLayoutSidebarLink({ wrapper, ...props }: TitanLayoutSidebarLinkProps) {
-    const { NavigationComponent } = useTitanLayoutContext();
+    const {
+        NavigationComponent,
+        breakpoint: { isMobile },
+    } = useTitanLayoutContext();
+    const { onNotificationsUpdate } = useNotificationsContext();
+    const tag = getCounterTag(props.counter, props.tag);
+
+    onNotificationsUpdate(props.id, !!tag);
 
     const element = (
         <InternalSideNavigationLink
@@ -25,11 +33,11 @@ export function TitanLayoutSidebarLink({ wrapper, ...props }: TitanLayoutSidebar
             navigationComponent={NavigationComponent}
             submenuExpanded={undefined}
             dataPrefix="navigation-link"
-            tag={getCounterTag(props.counter, props.tag)}
+            tag={tag}
         />
     );
 
-    return wrapper ? <WrappedLink wrapper={wrapper}>{element}</WrappedLink> : element;
+    return wrapper && !isMobile ? <WrappedLink wrapper={wrapper}>{element}</WrappedLink> : element;
 }
 
 /** Side Navigation menu trigger */
@@ -42,15 +50,23 @@ export function TitanLayoutSidebarTrigger({
     const {
         breakpoint: { isMobile },
     } = useTitanLayoutContext();
+    const { onNotificationsUpdate } = useNotificationsContext();
+    const tag = getCounterTag(props.counter, props.tag);
+
+    onNotificationsUpdate(props.id, !!tag);
 
     const element = (
         <InternalSideNavigationTrigger
             {...props}
             submenuExpanded={undefined}
             dataPrefix="navigation-trigger"
-            tag={getCounterTag(props.counter, props.tag)}
+            tag={tag}
             onClick={isMobile && !!onMobileClick ? onMobileClick : onClick}
         />
     );
-    return wrapper && !isMobile ? <WrappedLink wrapper={wrapper}>{element}</WrappedLink> : element;
+    return wrapper && (!isMobile || !onMobileClick) ? (
+        <WrappedLink wrapper={wrapper}>{element}</WrappedLink>
+    ) : (
+        element
+    );
 }

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

@@ -15,32 +15,22 @@
     align-items: stretch;
 }
 
-// desktop version positioned with flex
-.nav-flex {
-    flex-basis: var(--nav-offset-left);
-    flex-grow: 0;
-    flex-shrink: 0;
-}
-
-// desktop version positioned with fixed
-.nav-fixed {
-    position: fixed;
-    top: var(--nav-offset-top);
-    bottom: 0;
-    left: 0;
-}
-
 // mobile version
 .nav-drawer {
-    display: none;
+    // display: none;
     position: fixed;
     max-width: 400px;
     width: 0;
+    height: 100vh;
     top: 0;
-    bottom: 0;
-    left: 0;
+    left: -100vh;
     z-index: 991;
 
+    -webkit-transition: width 200ms ease-in-out;
+    -moz-transition: width 200ms ease-in-out;
+    -o-transition: width 200ms ease-in-out;
+    transition: width 200ms ease-in-out;
+
     .nav-main {
         padding-left: @spacing-2;
         padding-right: @spacing-2;
@@ -54,6 +44,7 @@
             padding-top: @spacing-2;
             padding-left: @spacing-2;
             padding-right: @spacing-2;
+            cursor: pointer;
         }
     }
 
@@ -76,10 +67,21 @@
     }
 }
 
+.nav-drawer-backdrop {
+    position: fixed;
+    height: 100vh;
+    width: 100vw;
+    top: 0;
+    left: 0;
+    z-index: 991;
+    background-color: rgba(0, 0, 0, 0.5);
+}
+
 // mobile version opened
 .nav-drawer-opened {
     display: flex;
     width: 90vw;
+    left: 0;
 }
 
 @media only screen and (min-width: 361px) {
@@ -156,7 +158,11 @@
 // desktop version expanded
 .nav-wide {
     width: var(--nav-offset-left);
-    padding-top: @spacing-2;
+
+    .nav-item {
+        margin-left: @spacing-1;
+        margin-right: @spacing-1;
+    }
 
     .toggle {
         .toggle-content {
@@ -177,14 +183,16 @@
         margin-top: @spacing-1;
         margin-bottom: @spacing-1;
     }
+
+    .nav-main {
+        padding-top: @spacing-1;
+    }
 }
 
 .nav-drawer,
 .nav-wide {
     .nav-item {
         flex-direction: row;
-        margin-left: @spacing-1;
-        margin-right: @spacing-1;
 
         .nav-item-icon-wrapper {
             flex: 1;

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

@@ -5,9 +5,8 @@ export const navBottom: string;
 export const navClose: string;
 export const navCloseWrapper: string;
 export const navDrawer: string;
+export const navDrawerBackdrop: string;
 export const navDrawerOpened: string;
-export const navFixed: string;
-export const navFlex: string;
 export const navFooter: string;
 export const navGroupItem: string;
 export const navGroupWrapper: string;

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

@@ -31,45 +31,51 @@ export interface LayoutSidebarProps {
     top?: ReactElement[];
     bottom?: ReactElement;
     mainItems?: NavigationItemData[];
-    flex: boolean;
     barExpanded: boolean;
     submenuExpanded: string | undefined;
+    drawerOpened: boolean;
     mobile: boolean;
     navigationComponent: FC<NavLinkComponentProps>;
     onBarExpandChange(expanded: boolean): void;
+    onDrawerOpenChange(expanded: boolean): void;
     onSubmenuExpandChange(id: string, expanded: boolean): void;
 }
 
 export const LayoutSidebar: FC<LayoutSidebarProps> = ({
     className,
-    flex,
     mobile,
     barExpanded,
     submenuExpanded,
+    drawerOpened,
     onBarExpandChange,
     onSubmenuExpandChange,
+    onDrawerOpenChange,
     mainItems,
     top,
     bottom,
     navigationComponent,
 }) => {
-    const handleClick = (e: MouseEvent<never>) => {
-        e.stopPropagation();
+    const closeDrawer = () => {
+        if (mobile) {
+            onDrawerOpenChange?.(false);
+        }
     };
 
     return (
         <LayoutPlacementContext.Provider value="side">
+            {mobile && drawerOpened && (
+                <div className={Styles.navDrawerBackdrop} onClick={closeDrawer} />
+            )}
             <div
                 className={classNames(
                     Styles.nav,
                     mobile && Styles.navDrawer,
-                    mobile && barExpanded && Styles.navDrawerOpened,
+                    mobile && drawerOpened && Styles.navDrawerOpened,
                     !mobile && (barExpanded ? Styles.navWide : Styles.navSlim),
-                    !mobile && (flex ? Styles.navFlex : Styles.navFixed),
                     className
                 )}
                 data-cy="side-navigation"
-                onClick={handleClick}
+                onClick={closeDrawer}
             >
                 <ThemeProvider mode="dark" className={Styles.navMain}>
                     {mobile && (
@@ -82,14 +88,14 @@ export const LayoutSidebar: FC<LayoutSidebarProps> = ({
                             </div>
                         </div>
                     )}
-                    {top?.length && <SidebarTop>{top}</SidebarTop>}
+                    {!!top?.length && <SidebarTop>{top}</SidebarTop>}
 
                     <div data-cy="navigation-items">
                         {mainItems?.map(item =>
                             item.submenu ? (
                                 <SideNavigationGroupItem
                                     key={item.id}
-                                    barExpanded={barExpanded}
+                                    barExpanded={mobile ? drawerOpened : barExpanded}
                                     submenuExpanded={!!item.id && submenuExpanded === item.id}
                                     onSubmenuExpand={onSubmenuExpandChange}
                                     navigationComponent={navigationComponent}

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

@@ -0,0 +1,44 @@
+import {
+    FC,
+    PropsWithChildren,
+    createContext,
+    useCallback,
+    useContext,
+    useRef,
+    useState,
+} from 'react';
+
+interface NotificationsContextType {
+    onNotificationsUpdate: (id: string, hasNotifications: boolean) => void;
+}
+
+const NotificationsContext = createContext<NotificationsContextType>({
+    onNotificationsUpdate: () => {},
+});
+
+export const useNotificationsContext = () => useContext(NotificationsContext);
+
+export const useNotificationsState = () => {
+    const [hasNotifications, setHasNotifications] = useState(false);
+    const items = useRef(new Set<string>());
+    const onNotificationsUpdate = useCallback((id: string, hasNotifications: boolean) => {
+        if (hasNotifications && !items.current.has(id)) {
+            items.current.add(id);
+            setHasNotifications(!!items.current.size);
+        } else if (!hasNotifications && items.current.has(id)) {
+            items.current.delete(id);
+            setHasNotifications(!!items.current.size);
+        }
+    }, []);
+
+    const NotificationsContextProvider: FC<PropsWithChildren> = useCallback(
+        ({ children }) => (
+            <NotificationsContext.Provider value={{ onNotificationsUpdate }}>
+                {children}
+            </NotificationsContext.Provider>
+        ),
+        [onNotificationsUpdate]
+    );
+
+    return { NotificationsContextProvider, hasNotifications };
+};

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

@@ -8,16 +8,47 @@
 @bg-color-hover: rgba(255, 255, 255, 0.08);
 @bg-color-active: rgba(120, 187, 250, 0.2);
 
-.layout-legacy {
-    padding-left: var(--nav-offset-left);
-}
-
 .layout-anvil1 {
-    display: block;
+    height: calc(100vh - var(--nav-offset-top));
+    margin-top: var(--nav-offset-top);
+
+    display: flex;
+    flex-direction: column;
+
+    .side {
+        flex-basis: var(--nav-offset-left);
+        flex-grow: 0;
+        flex-shrink: 0;
+    }
+
+    .content {
+        flex-grow: 1;
+
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+    }
 }
 
 .layout-anvil2 {
-    display: block;
+    .content-header {
+        position: sticky;
+        top: var(--nav-offset-top);
+        z-index: 989;
+    }
+}
+
+.layout-desktop {
+    padding-left: var(--nav-offset-left);
+
+    .side {
+        position: fixed;
+        top: var(--nav-offset-top);
+        bottom: 0;
+        left: 0;
+        right: 0;
+        z-index: @z-index-global-nav;
+    }
 }
 
 .layout-legacy,
@@ -25,29 +56,53 @@
     .top-placeholder {
         height: var(--nav-offset-top);
     }
+}
+
+.layout {
+    --nav-offset-top: 0px;
+    --nav-offset-left: 0px;
+    --content-offset-top: var(--nav-offset-top);
+    --offset: var(--content-offset-top);
+
+    &.layout-desktop.layout-top {
+        --nav-offset-top: 48px;
+    }
+
+    &.layout-mobile.layout-top {
+        --nav-offset-top: 72px;
+    }
+
+    &.layout-desktop.layout-nav-slim {
+        --nav-offset-left: 64px;
+    }
+
+    &.layout-desktop.layout-nav-wide {
+        --nav-offset-left: 212px;
+    }
 
     .top {
         position: fixed;
+        width: 100vw;
         top: 0;
         left: 0;
-        right: 0;
         z-index: 991;
     }
-}
 
-.layout {
-    --nav-offset-top: 49px;
-
-    &.layout-mobile {
-        --nav-offset-top: 61px;
-        --nav-offset-left: 0;
+    .content-header {
+        position: sticky;
+        left: 0;
+        right: 0;
     }
+}
 
-    &.layout-nav-slim {
-        --nav-offset-left: 64px;
-    }
+@media print {
+    .layout {
+        --nav-offset-left: 0px !important;
+        --nav-offset-right: 0px !important;
 
-    &.layout-nav-wide {
-        --nav-offset-left: 212px;
+        .side,
+        .top {
+            display: none !important;
+        }
     }
 }

package/src/components/titan-layout/titan-layout.module.less.d.ts

@@ -1,11 +1,16 @@
 export const __esModule: true;
+export const content: string;
+export const contentHeader: string;
 export const layout: string;
 export const layoutAnvil1: string;
 export const layoutAnvil2: string;
+export const layoutDesktop: string;
 export const layoutLegacy: string;
 export const layoutMobile: string;
 export const layoutNavSlim: string;
 export const layoutNavWide: string;
+export const layoutTop: string;
+export const side: string;
 export const top: string;
 export const topPlaceholder: string;