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

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

@@ -1,62 +1,37 @@
-import { Icon } from '@servicetitan/anvil2';
+import { Button, 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 { ComponentPropsWithoutRef, FC, Fragment, MouseEvent, ReactNode } from 'react';
+
 import { BadgeTag, BadgeTagProps } from '../badge-tag';
-import { TitanLayoutSidebarTriggerProps } from './interface';
 import { NavigationComponentProps } from './interface-internal';
 import * as Styles from './layout-sidebar.module.less';
+import { withTooltip } from './with-tooltip';
 
-export interface InternalSideNavigationItemContentProps
-    extends Omit<NavigationItemData, 'iconName' | 'to' | 'counter' | 'tag'> {
-    submenuExpanded: boolean | undefined;
+export interface InternalSideNavigationItemContentProps {
+    icon: IconProps['svg'] | undefined;
+    iconActive: IconProps['svg'] | undefined;
+    title: string;
     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,
-    onExpandToggle,
 }) => (
     <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">
@@ -69,20 +44,6 @@ export const InternalSideNavigationItemContent: FC<InternalSideNavigationItemCon
                     longClassName={Styles.navItemCounterLong}
                 />
             )}
-            {typeof submenuExpanded === 'boolean' && (
-                <div className={Styles.navItemGroupToggleWrapper}>
-                    <Icon
-                        svg={submenuExpanded ? SvgGroupCollapse : SvgGroupExpand}
-                        className={Styles.navItemGroupToggle}
-                        onClick={onExpandToggle}
-                    />
-                    <div
-                        className={Styles.navItemGroupToggleClick}
-                        data-cy="nav-item-group-expand"
-                        onClick={onExpandToggle}
-                    />
-                </div>
-            )}
         </div>
 
         <div
@@ -96,66 +57,49 @@ 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;
-}
-
-export const internalNavigationContentContainerProps = ({
-    className,
-    icon,
-    iconActive,
-    iconComponent,
-    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> = ({
+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;
+    } & Omit<ComponentPropsWithoutRef<'a'>, 'children' | 'title'>
+> = ({
+    id,
     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
-                submenuExpanded={submenuExpanded}
-                onExpandToggle={onExpandToggle}
-                {...props}
+                icon={icon}
+                iconActive={iconActive}
+                title={title}
+                tag={tag}
             />
         </NavigationComponent>
     );
@@ -163,40 +107,69 @@ export const InternalSideNavigationLink: FC<InternalSideNavigationLinkProps> = (
 
 /** Side Navigation menu trigger (for internal usage) */
 export const InternalSideNavigationTrigger: FC<
-    Omit<InternalSideNavigationLinkProps, 'to' | 'navigationComponent'> & {
+    {
+        id: string;
+        title: string;
+        isActive: boolean | undefined;
+        icon: IconProps['svg'] | undefined;
+        iconActive: IconProps['svg'] | undefined;
+        className: string | undefined;
+
+        tag: BadgeTagProps | undefined;
         onClick?: (e: MouseEvent<never>) => void;
-    }
-> = ({ className, dataPrefix, isActive, submenuExpanded, onExpandToggle, onClick, ...props }) => {
+    } & Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'title'>
+> = ({
+    id,
+    title,
+    isActive,
+    icon,
+    iconActive,
+    className,
+
+    tag,
+    ...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 +180,35 @@ 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,
+
+    ...rest
+}) => {
     return (
         <div
             data-cy={`navigation-item-${id}`}
@@ -229,13 +216,12 @@ export const InternalSideNavigationGroupTrigger: FC<
             key={id}
             {...rest}
             className={classNames(Styles.submenuItem, {
-                [Styles.submenuLink]: !!onClick,
+                [Styles.submenuLink]: !!rest.onClick,
                 [Styles.submenuLinkActive]: isActive === true,
             })}
-            onClick={onClick}
         >
             <span>{title}</span>
-            <BadgeTag data={getCounterTag(counter, tag)} className={Styles.submenuLinkCounter} />
+            <BadgeTag data={tag} className={Styles.submenuLinkCounter} />
         </div>
     );
 };
@@ -245,40 +231,95 @@ 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;
+    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;
+        onClick?: (e: MouseEvent<never>) => void;
+        onExpandToggle(e: MouseEvent<never>): void;
+    }
+> = ({
+    id,
+    to,
+    title,
+    isActive,
+    icon,
+    iconActive,
+    className,
+    tag,
+
+    children,
+    submenuExpanded,
+    onExpandToggle,
+    onClick,
+    navigationComponent,
+    ...rest
+}) => {
+    const onRootClickCapture = (e: MouseEvent<never>) => {
+        if (!submenuExpanded) {
+            onExpandToggle?.(e);
+            e.preventDefault();
+            e.stopPropagation();
         }
-> = ({ children, submenuExpanded, to, onExpandToggle, onClick, ...props }) => {
+    };
     return (
         <div className={classNames(Styles.navGroupWrapper)}>
-            <div className={Styles.navGroupItem}>
+            <div className={Styles.navGroupItem} onClickCapture={onRootClickCapture}>
                 {to ? (
                     <InternalSideNavigationLink
-                        {...props}
+                        id={id}
                         to={to}
-                        submenuExpanded={submenuExpanded}
-                        onExpandToggle={onExpandToggle}
+                        title={title}
+                        isActive={isActive}
+                        icon={icon}
+                        iconActive={iconActive}
+                        tag={tag}
+                        className={className}
+                        {...rest}
+                        navigationComponent={navigationComponent}
                     />
                 ) : (
                     <InternalSideNavigationTrigger
-                        {...props}
-                        submenuExpanded={submenuExpanded}
-                        onExpandToggle={onExpandToggle}
-                        onClick={onClick}
+                        id={id}
+                        title={title}
+                        isActive={isActive === true || undefined}
+                        icon={icon}
+                        iconActive={iconActive}
+                        tag={tag}
+                        className={className}
+                        {...rest}
                     />
                 )}
+
+                <div className={Styles.navItemGroupToggleWrapper}>
+                    {withTooltip(
+                        <Button
+                            appearance="secondary"
+                            size="small"
+                            icon={submenuExpanded ? SvgGroupCollapse : SvgGroupExpand}
+                            className={Styles.navItemGroupToggle}
+                            onClick={onExpandToggle}
+                            aria-label="Toggle submenu"
+                            data-cy="nav-item-group-expand"
+                        />,
+                        submenuExpanded ? 'Hide Submenu' : 'View Submenu',
+                        { placement: 'top-end' }
+                    )}
+                </div>
             </div>
             <div
                 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>

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

@@ -1,6 +1,6 @@
 import { FC, ReactElement } from 'react';
 import { getCounterTag } from '../../utils/side-nav';
-import { TitanLayoutSidebarLinkProps, TitanLayoutSidebarTriggerProps } from './interface';
+import { TitanLayoutLinkProps, TitanLayoutTriggerProps } from './interface';
 import { useTitanLayoutContext } from './layout-context';
 import {
     InternalSideNavigationLink,
@@ -10,62 +10,109 @@ import { useNotificationsContext } from './notifications-context';
 
 const WrappedLink: FC<{
     children: ReactElement<any>;
-    wrapper: NonNullable<TitanLayoutSidebarLinkProps['wrapper']>;
-}> = ({ children, wrapper: WrapperComponent }) => {
+    wrapper: NonNullable<TitanLayoutLinkProps['wrapper']>;
+    isMobile: boolean;
+}> = ({ children, isMobile, wrapper: WrapperComponent }) => {
     const { sidebar } = useTitanLayoutContext();
-    return <WrapperComponent context={sidebar}>{children}</WrapperComponent>;
+    return (
+        <WrapperComponent isMobile={isMobile} context={sidebar}>
+            {children}
+        </WrapperComponent>
+    );
 };
 
 /** Side Navigation menu link */
-export function TitanLayoutSidebarLink({ wrapper, ...props }: TitanLayoutSidebarLinkProps) {
+export function LayoutSidebarLink({
+    id,
+    to,
+    title,
+    isActive,
+    icon,
+    iconActive,
+    counter,
+    tag,
+    className,
+
+    tooltip,
+    wrapper,
+    extra,
+    side,
+    ...rest
+}: TitanLayoutLinkProps) {
     const {
         NavigationComponent,
         breakpoint: { isMobile },
     } = useTitanLayoutContext();
     const { onNotificationsUpdate } = useNotificationsContext();
-    const tag = getCounterTag(props.counter, props.tag);
+    const tagData = getCounterTag(side?.counter ?? counter, tag);
 
-    onNotificationsUpdate(props.id, !!tag);
+    onNotificationsUpdate(id, !!tagData);
 
     const element = (
         <InternalSideNavigationLink
-            {...props}
+            id={id}
+            to={to}
+            title={title}
+            isActive={isActive}
+            icon={icon}
+            iconActive={iconActive}
+            tag={tagData}
+            className={className}
+            {...rest}
             navigationComponent={NavigationComponent}
-            submenuExpanded={undefined}
-            dataPrefix="navigation-item"
-            tag={tag}
         />
     );
 
-    return wrapper && !isMobile ? <WrappedLink wrapper={wrapper}>{element}</WrappedLink> : element;
+    return wrapper ? (
+        <WrappedLink isMobile={isMobile} wrapper={wrapper}>
+            {element}
+        </WrappedLink>
+    ) : (
+        element
+    );
 }
 
 /** Side Navigation menu trigger */
-export function TitanLayoutSidebarTrigger({
+export function LayoutSidebarTrigger({
+    id,
+    title,
+    isActive,
+    icon,
+    iconActive,
+    counter,
+    tag,
+    className,
+
+    tooltip,
     wrapper,
-    onMobileClick,
-    onClick,
-    ...props
-}: TitanLayoutSidebarTriggerProps) {
+    extra,
+    side,
+    ...rest
+}: TitanLayoutTriggerProps) {
     const {
         breakpoint: { isMobile },
     } = useTitanLayoutContext();
     const { onNotificationsUpdate } = useNotificationsContext();
-    const tag = getCounterTag(props.counter, props.tag);
+    const tagData = getCounterTag(side?.counter ?? counter, tag);
 
-    onNotificationsUpdate(props.id, !!tag);
+    onNotificationsUpdate(id, !!tagData);
 
     const element = (
         <InternalSideNavigationTrigger
-            {...props}
-            submenuExpanded={undefined}
-            dataPrefix="navigation-trigger"
-            tag={tag}
-            onClick={isMobile && !!onMobileClick ? onMobileClick : onClick}
+            id={id}
+            title={title}
+            isActive={isActive}
+            icon={icon}
+            iconActive={iconActive}
+            tag={tagData}
+            className={className}
+            {...rest}
         />
     );
-    return wrapper && (!isMobile || !onMobileClick) ? (
-        <WrappedLink wrapper={wrapper}>{element}</WrappedLink>
+    return wrapper ? (
+        <WrappedLink isMobile={isMobile} wrapper={wrapper}>
+            {element}
+        </WrappedLink>
     ) : (
         element
     );