@servicetitan/navigation 12.0.2 → 13.0.0-canary.256.5761ed1.0

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

@@ -2,6 +2,18 @@
 /* stylelint-disable no-duplicate-selectors */
 @import (reference) '@servicetitan/tokens/core/tokens.less';
 
+@keyframes ExtraPulseAnimation {
+    0% {
+        opacity: 0.7;
+    }
+    50% {
+        opacity: 0.5;
+    }
+    100% {
+        opacity: 0;
+    }
+}
+
 @size-links-tiny: 24px;
 @bg-light: @color-white;
 @bg-dark: @color-neutral-300;
@@ -225,6 +237,11 @@
 }
 
 .header-dark.header-logo-custom {
+    &.header-desktop .logo-short-wrapper {
+        background-color: @color-white;
+        color: @c-light;
+    }
+
     .burger .navigation-link {
         color: inherit !important;
     }
@@ -347,6 +364,25 @@
     }
 }
 
+.he-top-right .navigation-item-flashing {
+    &::before {
+        content: '';
+        position: absolute;
+        animation-name: ExtraPulseAnimation;
+        will-change: opacity;
+        background-color: var(--color-neutral-60, @color-neutral-60);
+        animation-iteration-count: infinite;
+        animation-duration: 500ms;
+        animation-direction: alternate;
+        border-radius: 12px;
+        inset: 0;
+    }
+
+    &.navigation-item-active::before {
+        background-color: var(--color-blue-200, @color-blue-200);
+    }
+}
+
 // styles specific to main nav links
 .header-navigation .navigation-link {
     font-family: @base-font-family;

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

@@ -1,6 +1,7 @@
 export const __esModule: true;
 export const burger: string;
 export const calculating: string;
+export const extraPulseAnimation: string;
 export const heTopCenter: string;
 export const heTopRight: string;
 export const heTopRightText: string;
@@ -29,6 +30,7 @@ export const navigationIconActive: string;
 export const navigationItemActive: string;
 export const navigationItemCounter: string;
 export const navigationItemCounterLong: string;
+export const navigationItemFlashing: string;
 export const navigationItemIconState: string;
 export const navigationItemLabel: string;
 export const navigationLink: string;

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

@@ -1,6 +1,6 @@
 import SvgBurgerMenu from '@servicetitan/anvil2/assets/icons/material/round/menu.svg';
 import classNames from 'classnames';
-import { ComponentPropsWithoutRef, FC, ReactElement, ReactNode } from 'react';
+import { ComponentPropsWithoutRef, FC, MouseEvent, ReactElement, ReactNode } from 'react';
 import { LayoutPlacementContext } from './layout-context';
 import { LayoutHeaderNavigationTrigger } from './layout-header-links';
 import * as Styles from './layout-header.module.less';
@@ -22,7 +22,7 @@ export type LayoutHeaderProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'
     isMobile: boolean;
     variant: 'light' | 'dark';
     hasNotifications: boolean;
-    onBurgerClick?: (e: MouseEvent) => void;
+    onBurgerClick?: (e: MouseEvent<never>) => void;
 };
 
 export const LayoutHeader: FC<LayoutHeaderProps> = ({

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

@@ -2,13 +2,14 @@ import SvgAccountActive from '@servicetitan/anvil2/assets/icons/st/gnav_account_
 import SvgAccountInactive from '@servicetitan/anvil2/assets/icons/st/gnav_account_inactive.svg';
 
 import { FC, MouseEvent, useEffect, useState } from 'react';
-import { NavLinkComponentProps, NavigationComponentContext } from '../../utils/navigation-context';
+import { NavLinkComponentProps } from '../../utils/navigation-context';
+import { getCounterTag } from '../../utils/side-nav';
 import {
-    ProfileDropdown as DesktopProfileDropdown,
     ProfileDropdownLinkProps,
     ProfileDropdownProps,
     ProfileDropdownSectionProps,
-} from '../profile-dropdown/profile-dropdown';
+} from '../profile-dropdown/interface';
+import { DesktopProfileDropdown } from '../profile-dropdown/profile-dropdown';
 import { NavigationComponentProps } from './interface-internal';
 import { useTitanLayoutContext } from './layout-context';
 import {
@@ -23,7 +24,7 @@ export type {
     ProfileDropdownProps,
     ProfileDropdownSectionProps,
     ProfileDropdownLinkProps,
-} from '../profile-dropdown/profile-dropdown';
+} from '../profile-dropdown/interface';
 
 const ExternalNavComponent: FC<NavLinkComponentProps> = ({
     children,
@@ -37,24 +38,27 @@ const ExternalNavComponent: FC<NavLinkComponentProps> = ({
     </a>
 );
 
-const ProfileDropdownContent: FC<ProfileDropdownProps> = props => {
-    const { isTitanLayout, breakpoint, NavigationComponent } = useTitanLayoutContext();
+function ProfileDropdownComponent(props: ProfileDropdownProps) {
+    const { breakpoint, NavigationComponent } = useTitanLayoutContext();
     return breakpoint.isMobile ? (
         <MobileProfileDropdown {...props} navigationComponent={NavigationComponent} />
-    ) : isTitanLayout ? (
-        <NavigationComponentContext.Provider value={NavigationComponent}>
-            <DesktopProfileDropdown {...props} />
-        </NavigationComponentContext.Provider>
     ) : (
         <DesktopProfileDropdown {...props} />
     );
-};
-ProfileDropdownContent.displayName = 'ProfileDropdown';
+}
 const profileId = '--profile';
 
 const MobileProfileDropdown: FC<ProfileDropdownProps & NavigationComponentProps> = ({
+    direction,
+    trigger,
+    hintPopup,
+    portal,
+    width,
+    onClose,
+    onOpen,
+    className,
     children,
-    ...props
+    ...rest
 }) => {
     const [expanded, setExpanded] = useState(false);
     const { hasNotifications, NotificationsContextProvider } = useNotificationsState();
@@ -77,7 +81,8 @@ const MobileProfileDropdown: FC<ProfileDropdownProps & NavigationComponentProps>
                 icon={SvgAccountInactive}
                 iconActive={SvgAccountActive}
                 isActive={expanded}
-                {...props}
+                className={className}
+                {...rest}
                 submenuExpanded={expanded}
                 onExpandToggle={onExpandToggle}
                 onClick={onExpandToggle}
@@ -110,71 +115,85 @@ const getText = (children: any, text: any): string | undefined => {
     return undefined;
 };
 
-const getTag = (
-    tag: ProfileDropdownLinkProps['tag'],
-    counter: ProfileDropdownLinkProps['counter']
-): boolean => {
-    return !!tag?.value || !!counter;
-};
-
-const ProfileDropdownSection: FC<ProfileDropdownSectionProps> = props => {
+function ProfileDropdownSection(props: ProfileDropdownSectionProps) {
     const { breakpoint } = useTitanLayoutContext();
     return breakpoint.isMobile ? (
         <MobileProfileDropdownSection {...props} />
     ) : (
         <DesktopProfileDropdown.Section {...props} />
     );
-};
+}
 const MobileProfileDropdownSection: FC<ProfileDropdownSectionProps> = ({
+    id,
+    tooltip,
+    tag,
+    counter,
+
+    className,
     children,
     text,
-    tooltip,
-    title,
-    ...props
+    ...rest
 }) => {
     const sectionText = getText(children, text);
     const { onNotificationsUpdate } = useNotificationsContext();
-    onNotificationsUpdate(props.id, getTag(props.tag, props.counter));
+    const tagData = getCounterTag(counter, tag);
+    onNotificationsUpdate(id, !!tagData);
 
     return sectionText ? (
-        <InternalSideNavigationGroupTrigger {...props} title={sectionText} />
+        <InternalSideNavigationGroupTrigger
+            {...rest}
+            id={id}
+            title={sectionText}
+            isActive={undefined}
+            tag={tagData}
+            className={className}
+        />
     ) : null;
 };
 
-const ProfileDropdownLink: FC<ProfileDropdownLinkProps> = props => {
+function ProfileDropdownLink(props: ProfileDropdownLinkProps) {
     const { breakpoint, NavigationComponent } = useTitanLayoutContext();
     return breakpoint.isMobile ? (
         <MobileProfileDropdownLink {...props} navigationComponent={NavigationComponent} />
     ) : (
         <DesktopProfileDropdown.Link {...props} />
     );
-};
+}
 const MobileProfileDropdownLink: FC<ProfileDropdownLinkProps & NavigationComponentProps> = ({
+    id,
     external,
     to,
     tooltip,
     text,
     children,
+    className,
     navigationComponent,
-    ...props
+    tag,
+    counter,
+    ...rest
 }) => {
     const { onNotificationsUpdate } = useNotificationsContext();
     const linkText = getText(children, text);
     const isExternalLink = external ?? to?.startsWith('http');
-    onNotificationsUpdate(props.id, getTag(props.tag, props.counter));
+    const tagData = getCounterTag(counter, tag);
+    onNotificationsUpdate(id, !!tagData);
 
     return linkText ? (
         <InternalSideNavigationGroupLink
-            {...props}
+            {...rest}
+            id={id}
             to={to}
             title={linkText}
+            isActive={undefined}
+            className={className}
+            tag={tagData}
             parentId={profileId}
             navigationComponent={isExternalLink ? ExternalNavComponent : navigationComponent}
         />
     ) : null;
 };
 
-export const ProfileDropdown = Object.assign(ProfileDropdownContent, {
+export const ProfileDropdown = Object.assign(ProfileDropdownComponent, {
     Divider: ProfileDropdownDivider,
     Link: ProfileDropdownLink,
     Section: ProfileDropdownSection,

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

@@ -1,28 +1,25 @@
-import { Icon } from '@servicetitan/anvil2';
+import { Icon, IconProps } from '@servicetitan/anvil2';
 import SvgGroupCollapse from '@servicetitan/anvil2/assets/icons/material/round/expand_less.svg';
 import SvgGroupExpand from '@servicetitan/anvil2/assets/icons/material/round/expand_more.svg';
-
 import classNames from 'classnames';
 import { FC, Fragment, MouseEvent, ReactNode } from 'react';
-import { NavigationItemData, NavigationSubmenuItemData } from '../../utils/navigation';
-import { getCounterTag } from '../../utils/side-nav';
+
 import { BadgeTag, BadgeTagProps } from '../badge-tag';
-import { TitanLayoutSidebarTriggerProps } from './interface';
 import { NavigationComponentProps } from './interface-internal';
 import * as Styles from './layout-sidebar.module.less';
 
-export interface InternalSideNavigationItemContentProps
-    extends Omit<NavigationItemData, 'iconName' | 'to' | 'counter' | 'tag'> {
+export interface InternalSideNavigationItemContentProps {
+    icon: IconProps['svg'] | undefined;
+    iconActive: IconProps['svg'] | undefined;
+    title: string;
     submenuExpanded: boolean | undefined;
     tag: BadgeTagProps | undefined;
     onExpandToggle?: (e: MouseEvent<never>) => void;
 }
 
-export const InternalSideNavigationItemContent: FC<InternalSideNavigationItemContentProps> = ({
+const InternalSideNavigationItemContent: FC<InternalSideNavigationItemContentProps> = ({
     icon,
     iconActive,
-    iconClassName,
-    iconComponent: IconComponent,
     tag,
     title,
     submenuExpanded,
@@ -30,33 +27,14 @@ export const InternalSideNavigationItemContent: FC<InternalSideNavigationItemCon
 }) => (
     <Fragment>
         <div className={Styles.navItemIconWrapper}>
-            {IconComponent ? (
-                <i className={classNames(Styles.navIcon, iconClassName)}>
-                    <IconComponent />
-                </i>
-            ) : (
-                <Fragment>
-                    {icon && (
-                        <Icon
-                            svg={icon}
-                            className={classNames(
-                                Styles.navIcon,
-                                Styles.navIconInactive,
-                                iconClassName
-                            )}
-                        />
-                    )}
-                    {iconActive && (
-                        <Icon
-                            svg={iconActive}
-                            className={classNames(
-                                Styles.navIcon,
-                                Styles.navIconActive,
-                                iconClassName
-                            )}
-                        />
-                    )}
-                </Fragment>
+            {icon && (
+                <Icon svg={icon} className={classNames(Styles.navIcon, Styles.navIconInactive)} />
+            )}
+            {iconActive && (
+                <Icon
+                    svg={iconActive}
+                    className={classNames(Styles.navIcon, Styles.navIconActive)}
+                />
             )}
 
             <div className={Styles.navItemTextExpanded} data-cy="nav-item-label">
@@ -96,107 +74,130 @@ export const InternalSideNavigationItemContent: FC<InternalSideNavigationItemCon
     </Fragment>
 );
 
-export interface InternalSideNavigationLinkProps
-    extends Omit<NavigationItemData, 'iconName' | 'counter' | 'tag'>,
-        NavigationComponentProps {
-    submenuExpanded: boolean | undefined;
-    dataPrefix?: string;
-    tag: BadgeTagProps | undefined;
-    onExpandToggle?: (e: MouseEvent<never>) => void;
-}
+/** Side Navigation menu item (for internal usage) */
+export const InternalSideNavigationLink: FC<
+    NavigationComponentProps & {
+        id: string;
+        to: string;
+        title: string;
+        isActive: boolean | ((pathname: string) => boolean) | undefined;
+        icon: IconProps['svg'] | undefined;
+        iconActive: IconProps['svg'] | undefined;
+        className: string | undefined;
+        tag: BadgeTagProps | undefined;
 
-export const internalNavigationContentContainerProps = ({
-    className,
-    icon,
-    iconActive,
-    iconComponent,
+        submenuExpanded: boolean | undefined;
+        onExpandToggle?: (e: MouseEvent<never>) => void;
+    }
+> = ({
     id,
-    isActive,
-    prefix,
-    isLink,
-}: Omit<TitanLayoutSidebarTriggerProps, 'isActive' | 'tag'> & {
-    prefix: string;
-    isActive?: any;
-    isLink: boolean;
-}) => ({
-    'data-cy': `${prefix}-${id}`,
-    'data-pendo': `${prefix}-${id}`,
-    'className': classNames(Styles.navItem, className, {
-        [Styles.navLink]: isLink,
-        [Styles.navItemActive]: isActive === true,
-        [Styles.navItemIconSwitch]: !!icon && !!iconActive && !iconComponent,
-    }),
-});
-
-/** Side Navigation menu item (for internal usage) */
-export const InternalSideNavigationLink: FC<InternalSideNavigationLinkProps> = ({
     to,
-    className,
-    dataPrefix,
+    title,
     isActive,
+    icon,
+    iconActive,
+    className,
+    tag,
+
     navigationComponent: NavigationComponent,
     submenuExpanded,
     onExpandToggle,
-    ...props
+    ...rest
 }) => {
     return (
         <NavigationComponent
-            {...internalNavigationContentContainerProps({
-                ...props,
-                prefix: dataPrefix ?? 'navigation-item',
-                className,
-                isActive,
-                isLink: true,
+            data-cy={`navigation-item-${id}`}
+            data-pendo={`navigation-item-${id}`}
+            {...rest}
+            className={classNames(Styles.navItem, Styles.navLink, className, {
+                [Styles.navItemActive]: isActive === true,
+                [Styles.navItemIconSwitch]: !!icon && !!iconActive,
             })}
             to={to}
             isActive={typeof isActive === 'function' ? isActive : undefined}
             activeClassName={Styles.navItemActive}
         >
             <InternalSideNavigationItemContent
+                icon={icon}
+                iconActive={iconActive}
                 submenuExpanded={submenuExpanded}
                 onExpandToggle={onExpandToggle}
-                {...props}
+                title={title}
+                tag={tag}
             />
         </NavigationComponent>
     );
 };
 
 /** Side Navigation menu trigger (for internal usage) */
-export const InternalSideNavigationTrigger: FC<
-    Omit<InternalSideNavigationLinkProps, 'to' | 'navigationComponent'> & {
-        onClick?: (e: MouseEvent<never>) => void;
-    }
-> = ({ className, dataPrefix, isActive, submenuExpanded, onExpandToggle, onClick, ...props }) => {
+export const InternalSideNavigationTrigger: FC<{
+    id: string;
+    title: string;
+    isActive: boolean | undefined;
+    icon: IconProps['svg'] | undefined;
+    iconActive: IconProps['svg'] | undefined;
+    className: string | undefined;
+
+    submenuExpanded: boolean | undefined;
+    tag: BadgeTagProps | undefined;
+    onClick?: (e: MouseEvent<never>) => void;
+    onExpandToggle?: (e: MouseEvent<never>) => void;
+}> = ({
+    id,
+    title,
+    isActive,
+    icon,
+    iconActive,
+    className,
+
+    submenuExpanded,
+    tag,
+    onExpandToggle,
+    ...rest
+}) => {
     return (
         <div
-            {...internalNavigationContentContainerProps({
-                ...props,
-                prefix: dataPrefix ?? 'navigation-item',
-                className,
-                isActive,
-                isLink: !!onClick,
+            data-cy={`navigation-item-${id}`}
+            data-pendo={`navigation-item-${id}`}
+            {...rest}
+            className={classNames(Styles.navItem, className, {
+                [Styles.navLink]: !!rest.onClick,
+                [Styles.navItemActive]: isActive === true,
+                [Styles.navItemIconSwitch]: !!icon && !!iconActive,
             })}
-            onClick={onClick}
         >
             <InternalSideNavigationItemContent
                 submenuExpanded={submenuExpanded}
                 onExpandToggle={onExpandToggle}
-                {...props}
+                icon={icon}
+                iconActive={iconActive}
+                title={title}
+                tag={tag}
             />
         </div>
     );
 };
 
 export const InternalSideNavigationGroupLink: FC<
-    NavigationSubmenuItemData & NavigationComponentProps & { parentId: string }
+    NavigationComponentProps & {
+        id: string;
+        to: string;
+        title: string;
+        isActive: boolean | ((pathname: string) => boolean) | undefined;
+        className: string | undefined;
+        tag: BadgeTagProps | undefined;
+
+        parentId: string;
+    }
 > = ({
     id,
-    counter,
-    parentId,
-    tag,
-    title,
     to,
+    title,
     isActive,
+    className,
+    tag,
+
+    parentId,
     navigationComponent: NavigationComponent,
     ...rest
 }) => {
@@ -207,21 +208,36 @@ export const InternalSideNavigationGroupLink: FC<
             data-pendo={`navigation-item-${parentId}--${id}`}
             {...rest}
             to={to}
-            className={classNames(Styles.submenuItem, Styles.submenuLink, {
+            className={classNames(Styles.submenuItem, Styles.submenuLink, className, {
                 [Styles.submenuLinkActive]: isActive === true,
             })}
             isActive={typeof isActive === 'function' ? isActive : undefined}
             activeClassName={Styles.submenuLinkActive}
         >
             <span>{title}</span>
-            <BadgeTag data={getCounterTag(counter, tag)} className={Styles.submenuLinkCounter} />
+            <BadgeTag data={tag} className={Styles.submenuLinkCounter} />
         </NavigationComponent>
     );
 };
 
-export const InternalSideNavigationGroupTrigger: FC<
-    Omit<NavigationSubmenuItemData, 'to'> & { onClick?: (e: MouseEvent<any>) => void }
-> = ({ id, counter, onClick, tag, title, isActive, ...rest }) => {
+export const InternalSideNavigationGroupTrigger: FC<{
+    id: string;
+    title: string;
+    isActive: boolean | ((pathname: string) => boolean) | undefined;
+    className: string | undefined;
+    tag: BadgeTagProps | undefined;
+
+    onClick?: (e: MouseEvent<any>) => void;
+}> = ({
+    id,
+    title,
+    isActive,
+    className,
+    tag,
+
+    onClick,
+    ...rest
+}) => {
     return (
         <div
             data-cy={`navigation-item-${id}`}
@@ -235,7 +251,7 @@ export const InternalSideNavigationGroupTrigger: FC<
             onClick={onClick}
         >
             <span>{title}</span>
-            <BadgeTag data={getCounterTag(counter, tag)} className={Styles.submenuLinkCounter} />
+            <BadgeTag data={tag} className={Styles.submenuLinkCounter} />
         </div>
     );
 };
@@ -245,29 +261,66 @@ export const InternalSideNavigationGroupDivider = () => {
 };
 
 export const InternalSideNavigationGroup: FC<
-    Omit<NavigationItemData, 'tag' | 'counter' | 'to'> &
-        NavigationComponentProps & {
-            children: ReactNode;
-            submenuExpanded: boolean;
-            onExpandToggle?: (e: MouseEvent<never>) => void;
-            tag: BadgeTagProps | undefined;
-            to: NavigationItemData['to'] | undefined;
-            onClick?: (e: MouseEvent<never>) => void;
-        }
-> = ({ children, submenuExpanded, to, onExpandToggle, onClick, ...props }) => {
+    NavigationComponentProps & {
+        id: string;
+        to: string | undefined;
+        title: string;
+        isActive: boolean | ((pathname: string) => boolean) | undefined;
+        icon: IconProps['svg'] | undefined;
+        iconActive: IconProps['svg'] | undefined;
+        className: string | undefined;
+        tag: BadgeTagProps | undefined;
+
+        children: ReactNode;
+        submenuExpanded: boolean;
+        onExpandToggle?: (e: MouseEvent<never>) => void;
+        onClick?: (e: MouseEvent<never>) => void;
+    }
+> = ({
+    id,
+    to,
+    title,
+    isActive,
+    icon,
+    iconActive,
+    className,
+    tag,
+
+    children,
+    submenuExpanded,
+    onExpandToggle,
+    onClick,
+    navigationComponent,
+    ...rest
+}) => {
     return (
         <div className={classNames(Styles.navGroupWrapper)}>
             <div className={Styles.navGroupItem}>
                 {to ? (
                     <InternalSideNavigationLink
-                        {...props}
+                        id={id}
                         to={to}
+                        title={title}
+                        isActive={isActive}
+                        icon={icon}
+                        iconActive={iconActive}
+                        tag={tag}
+                        className={className}
+                        {...rest}
                         submenuExpanded={submenuExpanded}
                         onExpandToggle={onExpandToggle}
+                        navigationComponent={navigationComponent}
                     />
                 ) : (
                     <InternalSideNavigationTrigger
-                        {...props}
+                        id={id}
+                        title={title}
+                        isActive={isActive === true || undefined}
+                        icon={icon}
+                        iconActive={iconActive}
+                        tag={tag}
+                        className={className}
+                        {...rest}
                         submenuExpanded={submenuExpanded}
                         onExpandToggle={onExpandToggle}
                         onClick={onClick}
@@ -278,7 +331,7 @@ export const InternalSideNavigationGroup: FC<
                 className={classNames(Styles.submenuWrapper, {
                     [Styles.submenuWrapperCollapsed]: !submenuExpanded,
                 })}
-                data-cy={`navigation-submenu-${props.id}`}
+                data-cy={`navigation-submenu-${id}`}
             >
                 <div className={Styles.submenu}>{children}</div>
             </div>