@servicetitan/navigation 12.0.3 → 13.0.0-canary.256.44cf055.0

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

@@ -3,6 +3,7 @@ import SvgMoreVert from '@servicetitan/anvil2/assets/icons/material/round/more_v
 import classNames from 'classnames';
 import { FC, useCallback, useEffect, useRef, useState } from 'react';
 import { NavigationItemData } from '../../utils/navigation';
+import { getCounterTag } from '../../utils/side-nav';
 import { NavigationComponentProps } from './interface-internal';
 import { useTitanLayoutContext } from './layout-context';
 import { LayoutHeader, LayoutHeaderProps } from './layout-header';
@@ -34,7 +35,6 @@ export const LayoutHeaderDark: FC<LayoutHeaderStackedProps> = ({
     navigationMainItems,
     navigationOverflowItems,
     hasNotifications,
-    onBurgerClick,
     logo,
     profile,
     right,
@@ -42,6 +42,8 @@ export const LayoutHeaderDark: FC<LayoutHeaderStackedProps> = ({
     rightClassName,
     center,
     centerClassName,
+    hasBurger,
+    onBurgerClick,
     ...rest
 }) => {
     return center ? (
@@ -62,6 +64,7 @@ export const LayoutHeaderDark: FC<LayoutHeaderStackedProps> = ({
                 logo={logo}
                 profile={profile}
                 onBurgerClick={onBurgerClick}
+                hasBurger={hasBurger}
                 data-cy="header-navigation-top"
             />
 
@@ -94,6 +97,7 @@ export const LayoutHeaderDark: FC<LayoutHeaderStackedProps> = ({
             logo={logo}
             profile={profile}
             onBurgerClick={onBurgerClick}
+            hasBurger={hasBurger}
             {...rest}
         />
     );
@@ -155,8 +159,14 @@ const LayoutHeaderNav: FC<LayoutHeaderNavProps> = ({ className, mainItems, overf
                 {mainItems?.map(item =>
                     withTooltip(
                         <InternalLayoutHeaderNavigationLink
-                            {...item}
-                            label={isMinimized ? undefined : item.title}
+                            id={item.id}
+                            to={item.to}
+                            title={isMinimized ? undefined : item.title}
+                            isActive={item.isActive}
+                            icon={item.icon}
+                            iconActive={item.iconActive}
+                            tag={getCounterTag(item.counter, item.tag)}
+                            className={item.className}
                             key={item.id}
                             navigationComponent={NavigationComponent}
                         />,
@@ -195,8 +205,14 @@ const LayoutHeaderNavOverflow: FC<
             <div data-cy="navigation-overflow-content" className={Styles.headerNavigationOverflow}>
                 {items.map(item => (
                     <InternalLayoutHeaderNavigationLink
-                        {...item}
-                        label={item.title}
+                        id={item.id}
+                        to={item.to}
+                        title={item.title}
+                        isActive={item.isActive}
+                        icon={item.icon}
+                        iconActive={item.iconActive}
+                        tag={getCounterTag(item.counter, item.tag)}
+                        className={item.className}
                         key={item.id}
                         navigationComponent={navigationComponent}
                         isOverflow

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

@@ -1,13 +1,8 @@
 import { Icon, IconProps } from '@servicetitan/anvil2';
 import classNames from 'classnames';
 import { FC, Fragment } from 'react';
-import {
-    HeaderNavigationLinkProps,
-    HeaderNavigationTriggerProps,
-} from '../../utils/navigation-legacy';
-import { getCounterTag } from '../../utils/side-nav';
+import { CounterTagData } from '../../utils/counter-tag';
 import { CounterTag, CounterTagProps } from '../counter-tag';
-// use v1 tooltips due to bug with v2 in monolith
 import { NavigationComponentProps } from './interface-internal';
 import * as Styles from './layout-header.module.less';
 
@@ -17,9 +12,8 @@ const InternalHeaderNavigationItemContent: FC<{
     counterClassName?: string;
     icon: IconProps['svg'] | undefined;
     iconActive?: IconProps['svg'];
-    label?: string;
-    labelClassName?: string;
-}> = ({ counterClassName, icon, iconActive, label, labelClassName, tag }) => {
+    title?: string;
+}> = ({ counterClassName, icon, iconActive, title, tag }) => {
     return (
         <Fragment>
             {!!icon && <Icon svg={icon} className={Styles.navigationIcon} />}
@@ -30,12 +24,9 @@ const InternalHeaderNavigationItemContent: FC<{
                 />
             )}
 
-            {!!label && (
-                <span
-                    className={classNames(Styles.navigationItemLabel, labelClassName)}
-                    data-cy="nav-item-label"
-                >
-                    {label}
+            {!!title && (
+                <span className={Styles.navigationItemLabel} data-cy="nav-item-label">
+                    {title}
                 </span>
             )}
 
@@ -52,26 +43,30 @@ const InternalHeaderNavigationItemContent: FC<{
 
 /** Navigation extra item with link */
 export const InternalLayoutHeaderNavigationLink: FC<
-    HeaderNavigationLinkProps & NavigationComponentProps & { isOverflow?: boolean }
+    NavigationComponentProps & {
+        id: string;
+        to: string;
+        title: string | undefined;
+        isActive: boolean | ((pathname: string) => boolean) | undefined;
+        icon: IconProps['svg'] | undefined;
+        iconActive: IconProps['svg'] | undefined;
+        tag: CounterTagData | undefined;
+        className: string | undefined;
+
+        isOverflow?: boolean;
+        flashing?: boolean;
+    }
 > = ({
     id,
     to,
-    hint,
-    tooltip,
-    className,
-    counter,
+    title,
+    isActive,
     icon,
     iconActive,
-    iconClassName,
-    iconName,
-    iconComponent,
-    isActive,
-    isOverflow,
-    label,
-    labelClassName,
     tag,
-    target,
-    title,
+    className,
+    isOverflow,
+    flashing,
     navigationComponent: NavigationComponent,
     ...rest
 }) => {
@@ -88,63 +83,55 @@ export const InternalLayoutHeaderNavigationLink: FC<
                 {
                     [Styles.navigationItemActive]: isActive === true,
                     [Styles.navigationItemIconState]: !!icon && !!iconActive,
+                    [Styles.navigationItemFlashing]: flashing,
                 }
             )}
             isActive={typeof isActive === 'function' ? isActive : undefined}
             activeClassName={Styles.navigationItemActive}
-            target={target}
         >
             <InternalHeaderNavigationItemContent
-                tag={getCounterTag(counter, tag)}
+                tag={tag}
                 icon={icon}
                 iconActive={iconActive}
-                label={label}
-                labelClassName={labelClassName}
+                title={title}
             />
         </NavigationComponent>
     );
 };
 
 /** Navigation extra item with icon button */
-export const InternalLayoutHeaderNavigationTrigger: FC<HeaderNavigationTriggerProps> = ({
-    id,
-    className,
-    counter,
-    icon,
-    iconActive,
-    iconName,
-    isActive,
-    hint,
-    label,
-    labelClassName,
-    tag,
-    tooltip,
-    title,
-    titleClassName,
-    ...rest
-}) => {
+export const InternalLayoutHeaderNavigationTrigger: FC<{
+    id: string;
+    title: string | undefined;
+    isActive: boolean | undefined;
+    icon: IconProps['svg'] | undefined;
+    iconActive: IconProps['svg'] | undefined;
+    tag: CounterTagData | undefined;
+    className: string | undefined;
+
+    flashing?: boolean;
+}> = ({ id, className, flashing, icon, iconActive, isActive, tag, title, ...rest }) => {
     return (
         <div
             data-cy={`navigation-trigger-${id}`}
             data-pendo={`navigation-trigger-${id}`}
             {...rest}
-            title={hint}
             className={classNames(
                 Styles.navigationLink,
                 {
                     [Styles.navigationItemActive]: isActive === true,
                     [Styles.navigationItemIconState]: !!icon && !!iconActive,
+                    [Styles.navigationItemFlashing]: flashing,
                 },
                 'cursor-pointer',
                 className
             )}
         >
             <InternalHeaderNavigationItemContent
-                tag={getCounterTag(counter, tag)}
+                tag={tag}
                 icon={icon}
                 iconActive={iconActive}
-                label={label}
-                labelClassName={labelClassName}
+                title={title}
             />
         </div>
     );

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

@@ -1,8 +1,5 @@
-import { FC } from 'react';
-import {
-    HeaderNavigationLinkProps,
-    HeaderNavigationTriggerProps,
-} from '../../utils/navigation-legacy';
+import { getCounterTag } from '../../utils/side-nav';
+import { TitanLayoutLinkProps, TitanLayoutTriggerProps } from './interface';
 import { useTitanLayoutContext } from './layout-context';
 import {
     InternalLayoutHeaderNavigationLink,
@@ -11,19 +8,75 @@ import {
 import { withTooltip } from './with-tooltip';
 
 /** Navigation extra item with link */
-export const LayoutHeaderNavigationLink: FC<HeaderNavigationLinkProps> = ({ tooltip, ...rest }) => {
+export function LayoutHeaderNavigationLink({
+    id,
+    to,
+    title,
+    isActive,
+    icon,
+    iconActive,
+    counter,
+    tag,
+    className,
+
+    tooltip,
+    extra,
+    side,
+    wrapper,
+    ...rest
+}: TitanLayoutLinkProps) {
     const { NavigationComponent } = useTitanLayoutContext();
+    const { showTitle, flashing } = extra ?? {};
 
     return withTooltip(
-        <InternalLayoutHeaderNavigationLink {...rest} navigationComponent={NavigationComponent} />,
+        <InternalLayoutHeaderNavigationLink
+            id={id}
+            to={to}
+            title={showTitle ? title : undefined}
+            isActive={isActive}
+            icon={icon}
+            iconActive={iconActive}
+            tag={getCounterTag(counter, tag)}
+            className={className}
+            {...rest}
+            flashing={flashing}
+            navigationComponent={NavigationComponent}
+        />,
         tooltip
     );
-};
+}
 
 /** Navigation extra item with icon button */
-export const LayoutHeaderNavigationTrigger: FC<HeaderNavigationTriggerProps> = ({
+export function LayoutHeaderNavigationTrigger({
+    id,
+    title,
+    isActive,
+    icon,
+    iconActive,
+    counter,
+    tag,
+    className,
+
     tooltip,
+    extra,
+    side,
+    wrapper,
     ...rest
-}) => {
-    return withTooltip(<InternalLayoutHeaderNavigationTrigger {...rest} />, tooltip);
-};
+}: TitanLayoutTriggerProps) {
+    const { showTitle, flashing } = extra ?? {};
+
+    return withTooltip(
+        <InternalLayoutHeaderNavigationTrigger
+            id={id}
+            title={showTitle ? title : undefined}
+            isActive={isActive}
+            icon={icon}
+            iconActive={iconActive}
+            tag={getCounterTag(counter, tag)}
+            className={className}
+            {...rest}
+            flashing={flashing}
+        />,
+        tooltip
+    );
+}

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;
@@ -36,6 +48,11 @@
         overflow-y: hidden;
     }
 
+    .he-top-left {
+        display: flex;
+        flex-direction: row;
+    }
+
     .he-top-center {
         overflow: hidden;
     }
@@ -146,7 +163,7 @@
         grid-template-columns: repeat(3, 1fr);
         grid-template-rows: 48px;
 
-        .logo,
+        .he-top-left,
         .he-top-center,
         .he-top-right {
             grid-column: span 1;
@@ -352,6 +369,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,7 +1,9 @@
 export const __esModule: true;
 export const burger: string;
 export const calculating: string;
+export const extraPulseAnimation: string;
 export const heTopCenter: string;
+export const heTopLeft: string;
 export const heTopRight: string;
 export const heTopRightText: string;
 export const header: string;
@@ -29,6 +31,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,10 +1,11 @@
 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';
 import { LayoutLogo, TitanLayoutLogoProps, isLogoCustom } from './layout-logo';
+import { withTooltip } from './with-tooltip';
 
 export type LayoutHeaderProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'> & {
     right?: ReactNode;
@@ -22,7 +23,9 @@ export type LayoutHeaderProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'
     isMobile: boolean;
     variant: 'light' | 'dark';
     hasNotifications: boolean;
-    onBurgerClick?: (e: MouseEvent) => void;
+    hasBurger: boolean;
+    burgerTooltip?: string;
+    onBurgerClick?: (e: MouseEvent<never>) => void;
 };
 
 export const LayoutHeader: FC<LayoutHeaderProps> = ({
@@ -37,9 +40,24 @@ export const LayoutHeader: FC<LayoutHeaderProps> = ({
     logo,
     profile,
     variant,
+    hasBurger,
+    burgerTooltip,
     onBurgerClick,
     ...rest
 }) => {
+    const burgerElement = hasBurger && (
+        <div className={Styles.burger}>
+            <LayoutHeaderNavigationTrigger
+                id="burger"
+                title=""
+                icon={SvgBurgerMenu}
+                iconActive={undefined}
+                onClick={onBurgerClick}
+                tag={{ value: hasNotifications }}
+            />
+        </div>
+    );
+
     return (
         <LayoutPlacementContext.Provider value="top">
             <div
@@ -53,19 +71,14 @@ export const LayoutHeader: FC<LayoutHeaderProps> = ({
                 data-cy="header-navigation"
                 {...rest}
             >
-                {isMobile && (
-                    <div className={Styles.burger}>
-                        <LayoutHeaderNavigationTrigger
-                            id="burger"
-                            title=""
-                            icon={SvgBurgerMenu}
-                            iconActive={undefined}
-                            onClick={onBurgerClick}
-                            tag={{ value: hasNotifications }}
-                        />
-                    </div>
-                )}
-                <LayoutLogo {...logo} />
+                <div className={Styles.heTopLeft}>
+                    {burgerElement &&
+                        (burgerTooltip
+                            ? withTooltip(burgerElement, burgerTooltip, { placement: 'bottom-end' })
+                            : burgerElement)}
+                    <LayoutLogo {...logo} />
+                </div>
+
                 <div
                     className={classNames(
                         Styles.heTopCenter,

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,