@servicetitan/navigation 11.0.0-canary.237.0c461af.0 → 11.0.0-canary.237.1127df0.0

package/dist/utils/use-breakpoint.js

@@ -3,10 +3,11 @@ import { useMemo } from 'react';
 export const useTitanBreakpoint = () => {
     const breakpoint = useBreakpoint();
     return useMemo(() => {
-        var _a;
+        var _a, _b;
         return ({
             name: (_a = breakpoint === null || breakpoint === void 0 ? void 0 : breakpoint.name) !== null && _a !== void 0 ? _a : 'xl',
-            isMobile: breakpoint ? breakpoint.innerWidth <= 768 : false,
+            isMobile: breakpoint ? breakpoint.innerWidth < 768 : false,
+            width: (_b = breakpoint === null || breakpoint === void 0 ? void 0 : breakpoint.innerWidth) !== null && _b !== void 0 ? _b : 0,
         });
     }, [breakpoint]);
 };

package/dist/utils/use-breakpoint.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-breakpoint.js","sourceRoot":"","sources":["../../src/utils/use-breakpoint.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyB,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAC5E,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAOhC,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAoB,EAAE;IACpD,MAAM,UAAU,GAAG,aAAa,EAAE,CAAC;IAEnC,OAAO,OAAO,CACV,GAAG,EAAE;;QAAC,OAAA,CAAC;YACH,IAAI,EAAE,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,IAAI,mCAAI,IAAI;YAC9B,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,UAAU,IAAI,GAAG,CAAC,CAAC,CAAC,KAAK;SAC9D,CAAC,CAAA;KAAA,EACF,CAAC,UAAU,CAAC,CACf,CAAC;AACN,CAAC,CAAC"}
+{"version":3,"file":"use-breakpoint.js","sourceRoot":"","sources":["../../src/utils/use-breakpoint.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyB,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAC5E,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAQhC,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAoB,EAAE;IACpD,MAAM,UAAU,GAAG,aAAa,EAAE,CAAC;IAEnC,OAAO,OAAO,CACV,GAAG,EAAE;;QAAC,OAAA,CAAC;YACH,IAAI,EAAE,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,IAAI,mCAAI,IAAI;YAC9B,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,UAAU,GAAG,GAAG,CAAC,CAAC,CAAC,KAAK;YAC1D,KAAK,EAAE,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,UAAU,mCAAI,CAAC;SACrC,CAAC,CAAA;KAAA,EACF,CAAC,UAAU,CAAC,CACf,CAAC;AACN,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/navigation",
-    "version": "11.0.0-canary.237.0c461af.0",
+    "version": "11.0.0-canary.237.1127df0.0",
     "description": "Navigation components",
     "repository": {
         "type": "git",
@@ -42,5 +42,5 @@
         "less": true,
         "webpack": false
     },
-    "gitHead": "0c461af2db0a2263b60cdaaf440cee693e3d4097"
+    "gitHead": "1127df0cf95ea4e6e4b074bf79895bed386049c9"
 }

package/src/components/badge-tag.tsx

@@ -5,7 +5,7 @@ import { CounterTagData } from '../utils/counter-tag';
 
 export interface BadgeTagProps extends CounterTagData {
     [key: string]: any;
-    className: string;
+    className?: string;
 }
 
 export const BadgeTag: FC<{

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

@@ -3,7 +3,7 @@ import { CSSProperties, FC, ReactNode } from 'react';
 import { LogoTitanSvg } from './logo-titan';
 import * as Styles from './logo-titan-text.module.less';
 
-export type WrapperProps = FC<{ className: string; children: ReactNode; style?: CSSProperties }>;
+export type WrapperProps = FC<{ className?: string; children: ReactNode; style?: CSSProperties }>;
 
 export interface LogoTitanProps {
     mantleFill?: string;

package/src/components/profile-dropdown/profile-dropdown.module.less

@@ -143,6 +143,8 @@
         position: absolute;
         top: @spacing-half;
         margin-left: @spacing-half;
+        min-width: 12px !important;
+        min-height: 12px !important;
     }
 }
 

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

@@ -19,7 +19,7 @@ export interface TitanLayoutContextType {
 
 export const LayoutContext = createContext<TitanLayoutContextType>({
     NavigationComponent: DefaultNavLinkComponent,
-    breakpoint: { name: 'lg', isMobile: false },
+    breakpoint: { name: 'lg', isMobile: false, width: 0 },
     isTitanLayout: false,
     sidebar: { styles: { popoverContent: {} } },
 });

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

@@ -4,12 +4,14 @@
 @size-links-tiny: 24px;
 
 .header {
+    --nav-top-content-height: 32px;
     display: flex;
     justify-content: space-between;
 
     background-color: @color-white;
     color: @color-black;
-    border-bottom: 1px solid @color-neutral-60;
+    box-sizing: border-box;
+    outline: 1px solid @color-neutral-60;
 
     & > * {
         overflow-y: hidden;
@@ -20,6 +22,10 @@
         align-items: center;
     }
 
+    .he-top-center {
+        overflow: hidden;
+    }
+
     .he-top-right {
         & > * {
             color: @color-black;
@@ -84,29 +90,59 @@
     }
 }
 
+.header-mobile {
+    padding: @spacing-2 @spacing-0;
+    height: var(--nav-offset-top);
+
+    --nav-top-content-height: 40px;
+
+    .navigation-link {
+        padding: 10px;
+    }
+
+    .he-top-center {
+        max-width: unset;
+        flex: 1;
+        margin-left: @spacing-3;
+        margin-right: @spacing-3;
+    }
+
+    .he-top-left {
+        margin-left: @spacing-half;
+    }
+
+    .he-top-right {
+        margin-right: @spacing-half;
+    }
+}
+
 // desktop
-@media only screen and (min-width: 768px) {
-    .header {
-        height: var(--nav-offset-top);
-        .navigation-link {
-            margin: 6px 2px;
-            padding: 6px 6px;
-        }
+.header-desktop {
+    height: var(--nav-offset-top);
+    .navigation-link {
+        margin: 6px 2px;
+        padding: 6px 6px;
 
-        .he-top-left {
-            padding-left: @spacing-1;
-        }
-        .he-top-center {
-            flex: 1;
-            margin-left: @spacing-2;
-            margin-right: @spacing-2;
-            max-width: 400px;
+        .navigation-item-counter {
+            min-width: 12px !important;
+            height: 12px !important;
         }
     }
+
+    .he-top-left {
+        padding-left: @spacing-1;
+    }
+    .he-top-center {
+        flex: 1;
+        margin-left: @spacing-2;
+        margin-right: @spacing-2;
+        max-width: 400px;
+    }
 }
+
 // desktop wide
 @media only screen and (min-width: 1200px) {
-    .header {
+    .header-desktop {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         grid-template-rows: 48px;
@@ -123,24 +159,6 @@
     }
 }
 
-// mobile
-@media only screen and (max-width: 768px) {
-    .header {
-        padding: @spacing-1 @spacing-half;
-
-        .navigation-link {
-            padding: 10px;
-        }
-
-        .he-top-center {
-            max-width: unset;
-            flex: 1;
-            margin-left: @spacing-3;
-            margin-right: @spacing-3;
-        }
-    }
-}
-
 .navigation-link {
     // styles specific to extra nav links
     color: @color-black;
@@ -154,7 +172,8 @@
         color: @color-white;
         font-weight: @font-weight-semibold;
         font-size: 8px !important;
-        min-width: 12px;
+        min-width: 16px !important;
+        height: 16px !important;
         position: absolute;
         top: 4px;
         right: -2px;

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

@@ -4,6 +4,8 @@ export const heTopLeft: string;
 export const heTopRight: string;
 export const heTopRightText: string;
 export const header: string;
+export const headerDesktop: string;
+export const headerMobile: string;
 export const navigationIcon: string;
 export const navigationIconActive: string;
 export const navigationItemActive: string;

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

@@ -1,7 +1,7 @@
 import SvgBurgerMenu from '@servicetitan/anvil2/assets/icons/material/round/menu.svg';
 import classNames from 'classnames';
 import { ComponentPropsWithoutRef, FC, ReactElement, ReactNode } from 'react';
-import { LayoutPlacementContext, useTitanLayoutContext } from './layout-context';
+import { LayoutPlacementContext } from './layout-context';
 import { LayoutHeaderNavigationTrigger } from './layout-header-links';
 import * as Styles from './layout-header.module.less';
 import { TitanLayoutLogoProps } from './layout-logo';
@@ -25,6 +25,8 @@ export type LayoutHeaderProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'
     logo: ReactElement<TitanLayoutLogoProps>;
     profile?: ReactElement;
 
+    isMobile: boolean;
+    hasNotifications: boolean;
     onBurgerClick?: (e: MouseEvent) => void;
 };
 
@@ -35,22 +37,26 @@ export const LayoutHeader: FC<LayoutHeaderProps> = ({
     rightClassName,
     center,
     centerClassName,
+    isMobile,
+    hasNotifications,
     logo,
     profile,
     onBurgerClick,
     ...rest
 }) => {
-    const { breakpoint } = useTitanLayoutContext();
-
     return (
         <LayoutPlacementContext.Provider value="top">
             <div
-                className={classNames(Styles.header, className)}
+                className={classNames(
+                    Styles.header,
+                    isMobile ? Styles.headerMobile : Styles.headerDesktop,
+                    className
+                )}
                 {...rest}
                 data-cy="header-navigation"
             >
                 <div className={classNames(Styles.heTopLeft)} data-cy="navigation-left">
-                    {breakpoint.isMobile && (
+                    {isMobile && (
                         <LayoutHeaderNavigationTrigger
                             id="burger"
                             title=""
@@ -58,6 +64,7 @@ export const LayoutHeader: FC<LayoutHeaderProps> = ({
                             iconActive={SvgBurgerMenu}
                             className="m-r-1"
                             onClick={onBurgerClick}
+                            tag={{ value: hasNotifications }}
                         />
                     )}
                     {logo}

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

@@ -33,20 +33,27 @@ export const TitanLayoutLogo: FC<TitanLayoutLogoProps> = ({
     const Wrapper = logoWrapper;
     const logoSize = isMobile ? 44 : 56;
     const logoCompanySize = 48;
+    const showCompanyTitle = title === true && !isMobile;
 
     return (
-        <div className={classNames('d-f align-items-center', className)}>
-            {typeof title === 'string' ? (
+        <div
+            className={classNames(
+                'd-f align-items-center',
+                { 'p-t-half': showCompanyTitle },
+                className
+            )}
+        >
+            {showCompanyTitle ? (
+                <Wrapper>
+                    <LogoCompanyTitle height={logoCompanySize} />
+                </Wrapper>
+            ) : typeof title === 'string' ? (
                 <Fragment>
                     <LogoTitan size={logoSize} mantleFill={mantleFill} logoWrapper={Wrapper} />
                     {!isMobile && (
                         <LogoTitanTitle className="c-inherit m-l-1">{title}</LogoTitanTitle>
                     )}
                 </Fragment>
-            ) : title === true && !isMobile ? (
-                <Wrapper className="">
-                    <LogoCompanyTitle height={logoCompanySize} />
-                </Wrapper>
             ) : (
                 <LogoTitan size={logoSize} mantleFill={mantleFill} logoWrapper={Wrapper} />
             )}

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, useState } from 'react';
+import { FC, MouseEvent, useEffect, useState } from 'react';
 import { NavLinkComponentProps, NavigationComponentContext } from '../../utils/navigation-context';
 import {
     ProfileDropdown as DesktopProfileDropdown,
@@ -17,6 +17,7 @@ import {
     InternalSideNavigationGroupLink,
     InternalSideNavigationGroupTrigger,
 } from './layout-sidebar-links-internal';
+import { useNotificationsContext, useNotificationsState } from './notifications-context';
 
 export type {
     ProfileDropdownProps,
@@ -24,8 +25,16 @@ export type {
     ProfileDropdownLinkProps,
 } from '../profile-dropdown/profile-dropdown';
 
-const ExternalNavComponent: FC<NavLinkComponentProps> = ({ children, isActive, ...props }) => (
-    <a {...props}>{children}</a>
+const ExternalNavComponent: FC<NavLinkComponentProps> = ({
+    children,
+    isActive,
+    to,
+    activeClassName,
+    ...props
+}) => (
+    <a {...props} href={to}>
+        {children}
+    </a>
 );
 
 const ProfileDropdownContent: FC<ProfileDropdownProps> = props => {
@@ -44,24 +53,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>
     );
 };
 
@@ -74,13 +96,13 @@ const ProfileDropdownDivider: FC = () => {
     );
 };
 
-const getText = (props: any): string | undefined => {
-    if (typeof props.children === 'string') {
-        return props.children;
+const getText = (children: any, text: any): string | undefined => {
+    if (typeof children === 'string') {
+        return children;
     }
 
-    if (typeof props.text === 'string') {
-        return props.text;
+    if (typeof text === 'string') {
+        return text;
     }
 
     return undefined;
@@ -94,10 +116,19 @@ const ProfileDropdownSection: FC<ProfileDropdownSectionProps> = props => {
         <DesktopProfileDropdown.Section {...props} />
     );
 };
-const MobileProfileDropdownSection: FC<ProfileDropdownSectionProps> = props => {
-    const text = getText(props);
-    return text ? (
-        <InternalSideNavigationGroupTrigger id={props.id} title={text} onClick={props.onClick} />
+const MobileProfileDropdownSection: FC<ProfileDropdownSectionProps> = ({
+    children,
+    text,
+    tooltip,
+    ...props
+}) => {
+    const sectionText = getText(children, text);
+    return sectionText ? (
+        <InternalSideNavigationGroupTrigger
+            id={props.id}
+            title={sectionText}
+            onClick={props.onClick}
+        />
     ) : null;
 };
 
@@ -110,17 +141,25 @@ const ProfileDropdownLink: FC<ProfileDropdownLinkProps> = props => {
     );
 };
 const MobileProfileDropdownLink: FC<ProfileDropdownLinkProps & NavigationComponentProps> = ({
+    external,
     to,
+    tooltip,
+    text,
+    children,
     navigationComponent,
     ...props
 }) => {
-    const text = getText(props);
-    return text ? (
+    const { onNotificationsUpdate } = useNotificationsContext();
+    const linkText = getText(children, text);
+    const isExternalLink = external ?? to?.startsWith('http');
+    onNotificationsUpdate(props.id, !!props.tag?.value);
+
+    return linkText ? (
         <InternalSideNavigationGroupLink
             {...props}
             to={to}
-            title={text}
-            navigationComponent={props.external ? ExternalNavComponent : 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
@@ -211,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,
@@ -241,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>;
@@ -21,6 +22,10 @@ export function TitanLayoutSidebarLink({ wrapper, ...props }: TitanLayoutSidebar
         NavigationComponent,
         breakpoint: { isMobile },
     } = useTitanLayoutContext();
+    const { onNotificationsUpdate } = useNotificationsContext();
+    const tag = getCounterTag(props.counter, props.tag);
+
+    onNotificationsUpdate(props.id, !!tag);
 
     const element = (
         <InternalSideNavigationLink
@@ -28,7 +33,7 @@ export function TitanLayoutSidebarLink({ wrapper, ...props }: TitanLayoutSidebar
             navigationComponent={NavigationComponent}
             submenuExpanded={undefined}
             dataPrefix="navigation-link"
-            tag={getCounterTag(props.counter, props.tag)}
+            tag={tag}
         />
     );
 
@@ -45,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

@@ -17,15 +17,20 @@
 
 // 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;
@@ -39,6 +44,7 @@
             padding-top: @spacing-2;
             padding-left: @spacing-2;
             padding-right: @spacing-2;
+            cursor: pointer;
         }
     }
 
@@ -61,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) {
@@ -142,6 +159,11 @@
 .nav-wide {
     width: var(--nav-offset-left);
 
+    .nav-item {
+        margin-left: @spacing-1;
+        margin-right: @spacing-1;
+    }
+
     .toggle {
         .toggle-content {
             margin: @spacing-2;
@@ -171,8 +193,6 @@
 .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,6 +5,7 @@ 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 navFooter: string;
 export const navGroupItem: string;