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

package/src/components/profile-dropdown/profile-dropdown.tsx

@@ -3,57 +3,41 @@ import SvgExpandLess from '@servicetitan/anvil2/assets/icons/material/round/expa
 import SvgExpandMore from '@servicetitan/anvil2/assets/icons/material/round/expand_more.svg';
 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 { BodyText, Popover, PopoverPropsStrict } from '@servicetitan/design-system';
+import { BodyText, Popover } from '@servicetitan/design-system';
 import classNames from 'classnames';
 import {
     ComponentPropsWithoutRef,
     FC,
-    HTMLAttributeAnchorTarget,
     MouseEvent,
     MouseEventHandler,
-    ReactNode,
     useCallback,
-    useContext,
     useEffect,
     useMemo,
     useState,
 } from 'react';
 
 import { CounterTagData, CounterTagValue } from '../../utils/counter-tag';
-import {
-    NavigationComponentContext,
-    NavigationLegacyContext,
-} from '../../utils/navigation-context';
 import { getCounterTag } from '../../utils/side-nav';
 import { CounterTag } from '../counter-tag';
+import { useTitanLayoutContext } from '../titan-layout';
 import { withTooltip } from '../titan-layout/with-tooltip';
+import {
+    ProfileDropdownLinkProps,
+    ProfileDropdownProps,
+    ProfileDropdownSectionProps,
+    ProfileDropdownTriggerProps,
+} from './interface';
 import * as Styles from './profile-dropdown.module.less';
-import { ProfileLogo } from './profile-icon';
 
-export interface ProfileDropdownTriggerProps {
-    className?: string;
-    info?: { title: string; text: string };
-    imageSrc?: string | null;
-    avatarBadge?: boolean | string;
-    badge?: { content?: number | string; className: string };
-    hintArrow?: boolean;
-    open: boolean;
-    onClick?(e: MouseEvent): void;
-}
-
-const ProfileDropdownTrigger: FC<ProfileDropdownTriggerProps> = ({
-    avatarBadge,
-    badge,
-    className,
-    hintArrow,
-    imageSrc,
-    info,
-    onClick,
-    open,
-}) => {
+const ProfileDropdownTrigger: FC<
+    ProfileDropdownTriggerProps & {
+        hintArrow?: boolean;
+        open: boolean;
+        onClick: ComponentPropsWithoutRef<'div'>['onClick'];
+    }
+> = ({ info, imageSrc, avatarBadge, badge, className, hintArrow, open, onClick, ...rest }) => {
     const [avatarSource, setAvatarSource] = useState(imageSrc ?? '');
     const [avatarSourceError, setAvatarSourceError] = useState(false);
-    const isLegacy = useContext(NavigationLegacyContext);
 
     useEffect(() => {
         const src = imageSrc ?? '';
@@ -72,19 +56,19 @@ const ProfileDropdownTrigger: FC<ProfileDropdownTriggerProps> = ({
 
     return (
         <div
+            data-cy="profile-dropdown-trigger"
+            data-pendo="profile-dropdown-trigger"
+            {...rest}
             className={classNames(
                 'd-f align-items-center cursor-pointer position-relative p-x-1 p-y-half',
                 'profile-dropdown-trigger',
                 Styles.triggerContainer,
                 {
                     [Styles.triggerContainerHintArrow]: hintArrow,
-                    [Styles.triggerContainerLegacy]: isLegacy,
                 },
                 className
             )}
             onClick={onClick}
-            data-cy="profile-dropdown-trigger"
-            data-pendo="profile-dropdown-trigger"
         >
             {avatarSource && !avatarSourceError ? (
                 <img
@@ -93,8 +77,6 @@ const ProfileDropdownTrigger: FC<ProfileDropdownTriggerProps> = ({
                     onError={onAvatarError}
                     alt="user dropdown menu"
                 />
-            ) : isLegacy ? (
-                <ProfileLogo />
             ) : (
                 <Icon
                     className="c-inherit-i"
@@ -163,25 +145,7 @@ const useTag = (counter?: CounterTagValue, tag?: CounterTagData) =>
         ) : undefined;
     }, [counter, tag]);
 
-export type ProfileItemContent =
-    | { children: string; text?: string }
-    | { children: ReactNode; text: string };
-
-export interface ProfileDropdownSectionPropsStrict {
-    children: ReactNode;
-    id: string;
-    tooltip?: string;
-    className?: string;
-    tag?: CounterTagData;
-    counter?: CounterTagValue;
-    onClick?(e: MouseEvent): void;
-}
-
-export type ProfileDropdownSectionProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'> &
-    ProfileDropdownSectionPropsStrict &
-    ProfileItemContent;
-
-export const ProfileDropdownSection: FC<ProfileDropdownSectionProps> = ({
+function DesktopProfileDropdownSection({
     children,
     className,
     counter,
@@ -191,7 +155,7 @@ export const ProfileDropdownSection: FC<ProfileDropdownSectionProps> = ({
     tooltip,
     onClick,
     ...rest
-}) => {
+}: ProfileDropdownSectionProps) {
     const clickHandler: MouseEventHandler<never> = e => {
         if (onClick) {
             onClick(e);
@@ -221,27 +185,11 @@ export const ProfileDropdownSection: FC<ProfileDropdownSectionProps> = ({
         tooltip,
         { placement: 'left' }
     );
-};
-
-export const ProfileDropdownDivider: FC = Popover.Divider;
-
-export interface ProfileDropdownLinkPropsStrict {
-    id: string;
-    children: ReactNode;
-    className?: string;
-    external?: boolean;
-    target?: HTMLAttributeAnchorTarget;
-    tooltip?: string;
-    to: string;
-    tag?: CounterTagData;
-    counter?: CounterTagValue;
 }
 
-export type ProfileDropdownLinkProps = Omit<ComponentPropsWithoutRef<'a'>, 'children'> &
-    ProfileDropdownLinkPropsStrict &
-    ProfileItemContent;
+const DesktopProfileDropdownDivider: FC = Popover.Divider;
 
-export const ProfileDropdownLink: FC<ProfileDropdownLinkProps> = ({
+function DesktopProfileDropdownLink({
     children,
     className,
     external,
@@ -254,8 +202,8 @@ export const ProfileDropdownLink: FC<ProfileDropdownLinkProps> = ({
     tooltip,
     onClick,
     ...rest
-}: ProfileDropdownLinkProps) => {
-    const NavigationComponent = useContext(NavigationComponentContext);
+}: ProfileDropdownLinkProps) {
+    const { NavigationComponent } = useTitanLayoutContext();
 
     const isExternalLink = external ?? to?.startsWith('http');
 
@@ -300,47 +248,21 @@ export const ProfileDropdownLink: FC<ProfileDropdownLinkProps> = ({
         tooltip,
         { placement: 'left' }
     );
-};
-
-export interface ProfileDropdownPropsStrict {
-    children?: ReactNode;
-    className?: string;
-    direction?: PopoverPropsStrict['direction'];
-    trigger?: Omit<ProfileDropdownTriggerProps, 'onClick' | 'open' | 'hintArrow'>;
-    hintPopup?: {
-        className?: string;
-        content: FC<{ openProfile(): void }>;
-        width?: PopoverPropsStrict['width'];
-        onClose?: () => void;
-    };
-    portal?: boolean;
-    width?: PopoverPropsStrict['width'];
-    onClose?(): void;
-    onOpen?(): void;
-}
-
-export interface ProfileDropdownProps extends ProfileDropdownPropsStrict {
-    [key: string]: any;
 }
 
-export interface ProfileDropdownType extends FC<ProfileDropdownProps> {
-    Divider: typeof ProfileDropdownDivider;
-    Link: typeof ProfileDropdownLink;
-    Trigger: typeof ProfileDropdownTrigger;
-    Section: typeof ProfileDropdownSection;
-}
-
-export const ProfileDropdown: ProfileDropdownType = (({
+function DesktopProfileDropdownComponent({
     children,
-    className,
+
     direction,
+    trigger,
     hintPopup,
-    onClose,
-    onOpen,
     portal,
-    trigger,
     width,
-}) => {
+    onClose,
+    onOpen,
+
+    ...rest
+}: ProfileDropdownProps) {
     const [open, setOpen] = useState(false);
     const handleClose = useCallback(() => {
         setOpen(false);
@@ -376,7 +298,7 @@ export const ProfileDropdown: ProfileDropdownType = (({
     );
 
     return (
-        <div className={className} data-cy="profile-dropdown">
+        <div data-cy="profile-dropdown" {...rest}>
             {!!hintPopup && hintShown && HintComponent ? (
                 <Popover
                     direction={direction ?? 'bl'}
@@ -415,8 +337,10 @@ export const ProfileDropdown: ProfileDropdownType = (({
             )}
         </div>
     );
-}) as ProfileDropdownType;
+}
 
-ProfileDropdown.Divider = ProfileDropdownDivider;
-ProfileDropdown.Link = ProfileDropdownLink;
-ProfileDropdown.Section = ProfileDropdownSection;
+export const DesktopProfileDropdown = Object.assign(DesktopProfileDropdownComponent, {
+    Divider: DesktopProfileDropdownDivider,
+    Link: DesktopProfileDropdownLink,
+    Section: DesktopProfileDropdownSection,
+});

package/src/components/titan-layout/interface-internal.ts

@@ -1,6 +1,19 @@
+import { IconProps } from '@servicetitan/anvil2';
 import { FC } from 'react';
+import { CounterTagData } from '../../utils/counter-tag';
 import { NavLinkComponentProps } from '../../utils/navigation-context';
 
 export interface NavigationComponentProps {
     navigationComponent: FC<NavLinkComponentProps>;
 }
+export interface NavigationItemPropsStrict {
+    id: string;
+    to: string;
+    title: string;
+    isActive: boolean | ((pathname: string) => boolean) | undefined;
+    icon: IconProps['svg'] | undefined;
+    iconActive: IconProps['svg'] | undefined;
+
+    tag: CounterTagData | undefined;
+    className: string | undefined;
+}

package/src/components/titan-layout/interface.ts

@@ -1,26 +1,82 @@
-import { FC, ReactElement } from 'react';
-import { NavigationItemData } from '../../utils/navigation';
+import { IconProps } from '@servicetitan/anvil2';
+import { ComponentPropsWithoutRef, FC, ReactNode } from 'react';
+import { CounterTagData, CounterTagValue } from '../../utils/counter-tag';
 import { TitanLayoutSidebarContextType } from './layout-context';
 
-export interface TitanLayoutSidebarLinkWrapperProps {
-    children:
-        | ReactElement<TitanLayoutSidebarLinkProps>
-        | ReactElement<TitanLayoutSidebarTriggerProps>;
+export interface TitanLayoutLinkWrapperProps {
+    children: ReactNode;
     context: TitanLayoutSidebarContextType;
+    isMobile: boolean;
 }
 
-export interface TitanLayoutSidebarLinkProps extends Omit<NavigationItemData, 'submenu'> {
-    wrapper?: FC<TitanLayoutSidebarLinkWrapperProps>;
-}
-export interface TitanLayoutSidebarTriggerProps
-    extends Omit<TitanLayoutSidebarLinkProps, 'to' | 'isActive'> {
-    isActive?: boolean;
-    wrapper?: FC<TitanLayoutSidebarLinkWrapperProps>;
-    onClick?: () => void;
-    onMobileClick?: () => void;
-}
+export type TitanLayoutLinkWrapper = FC<TitanLayoutLinkWrapperProps>;
 
 export interface TitanLayoutState {
     navCollapsed: boolean;
     submenuExpanded?: string;
 }
+
+export interface TitanLayoutLinkExtraProps {
+    showTitle?: boolean;
+    flashing?: boolean;
+}
+
+export interface TitanLayoutLinkSideProps {
+    counter: CounterTagValue;
+}
+
+export type TitanLayoutLinkProps = {
+    /** link id */
+    id: string;
+    /** link href */
+    to: string;
+    /** link title */
+    title: string;
+    /** callback to return active state. By default, it compares link href with current pathname */
+    isActive?: boolean | ((pathname: string) => boolean);
+    /** svg icon (anvil2) of inactive item */
+    icon: IconProps['svg'] | undefined;
+    /** svg icon (anvil2) of active item */
+    iconActive: IconProps['svg'] | undefined;
+    /** item tag (optional). shown if it is set and value is true or greater than 0 */
+    tag?: CounterTagData;
+    counter?: CounterTagValue;
+    /** class name of link item */
+    className?: string;
+
+    /** tooltip text (for extra links) */
+    tooltip?: string;
+    /** wrapper component for link element (used for side links) */
+    wrapper?: TitanLayoutLinkWrapper;
+    /** props for extra link element */
+    extra?: TitanLayoutLinkExtraProps;
+    /** props for side nav link element (mobile version) */
+    side?: TitanLayoutLinkSideProps;
+} & Omit<ComponentPropsWithoutRef<'a'>, 'children' | 'title'>;
+
+export type TitanLayoutTriggerProps = {
+    /** link id */
+    id: string;
+    /** link title */
+    title: string;
+    /** active state */
+    isActive?: boolean;
+    /** svg icon (anvil2) of inactive item */
+    icon: IconProps['svg'] | undefined;
+    /** svg icon (anvil2) of active item */
+    iconActive: IconProps['svg'] | undefined;
+    /** item tag (optional). shown if it is set and value is true or greater than 0 */
+    tag?: CounterTagData;
+    counter?: CounterTagValue;
+    /** class name of link item */
+    className?: string;
+
+    /** tooltip text (for extra links) */
+    tooltip?: string;
+    /** wrapper component for link element (used for side links) */
+    wrapper?: TitanLayoutLinkWrapper;
+    /** props for extra link element */
+    extra?: TitanLayoutLinkExtraProps;
+    /** props for nav link element (mobile version) */
+    side?: TitanLayoutLinkSideProps;
+} & Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'title'>;

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';
@@ -155,8 +156,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 +202,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
+    );
+}