@servicetitan/navigation 13.0.0-canary.256.b43c6d7.0 → 13.0.0

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

@@ -1,23 +1,19 @@
-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 { TitanLayoutLinkProps, TitanLayoutTriggerProps } from './interface';
 import { NavigationComponentProps } from './interface-internal';
 import * as Styles from './layout-sidebar.module.less';
+import { withTooltip } from './with-tooltip';
 
 export interface InternalSideNavigationItemContentProps {
-    icon: TitanLayoutLinkProps['icon'];
-    iconActive: TitanLayoutLinkProps['iconActive'];
-    title: TitanLayoutLinkProps['title'];
-    submenuExpanded: boolean | undefined;
+    icon: IconProps['svg'] | undefined;
+    iconActive: IconProps['svg'] | undefined;
+    title: string;
     tag: BadgeTagProps | undefined;
-    onExpandToggle?: (e: MouseEvent<never>) => void;
 }
 
 const InternalSideNavigationItemContent: FC<InternalSideNavigationItemContentProps> = ({
@@ -25,8 +21,6 @@ const InternalSideNavigationItemContent: FC<InternalSideNavigationItemContentPro
     iconActive,
     tag,
     title,
-    submenuExpanded,
-    onExpandToggle,
 }) => (
     <Fragment>
         <div className={Styles.navItemIconWrapper}>
@@ -50,20 +44,6 @@ const InternalSideNavigationItemContent: FC<InternalSideNavigationItemContentPro
                     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
@@ -76,39 +56,37 @@ const InternalSideNavigationItemContent: FC<InternalSideNavigationItemContentPro
         </div>
     </Fragment>
 );
-interface InternalLinkProps {
-    submenuExpanded: boolean | undefined;
-    tag: BadgeTagProps | undefined;
-    onExpandToggle?: (e: MouseEvent<never>) => void;
-}
-
-export type InternalSideNavigationLinkProps = Omit<
-    TitanLayoutLinkProps,
-    'wrapper' | 'counter' | 'tag'
-> &
-    NavigationComponentProps &
-    InternalLinkProps;
 
 /** 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,
+    title,
+    isActive,
     icon,
     iconActive,
-    isActive,
-    navigationComponent: NavigationComponent,
+    className,
     tag,
-    title,
-    submenuExpanded,
-    onExpandToggle,
-    ...props
+
+    navigationComponent: NavigationComponent,
+    ...rest
 }) => {
     return (
         <NavigationComponent
             data-cy={`navigation-item-${id}`}
             data-pendo={`navigation-item-${id}`}
-            {...props}
+            {...rest}
             className={classNames(Styles.navItem, Styles.navLink, className, {
                 [Styles.navItemActive]: isActive === true,
                 [Styles.navItemIconSwitch]: !!icon && !!iconActive,
@@ -120,8 +98,6 @@ export const InternalSideNavigationLink: FC<InternalSideNavigationLinkProps> = (
             <InternalSideNavigationItemContent
                 icon={icon}
                 iconActive={iconActive}
-                submenuExpanded={submenuExpanded}
-                onExpandToggle={onExpandToggle}
                 title={title}
                 tag={tag}
             />
@@ -129,41 +105,42 @@ export const InternalSideNavigationLink: FC<InternalSideNavigationLinkProps> = (
     );
 };
 
-export type InternalSideNavigationTriggerProps = Omit<
-    TitanLayoutTriggerProps,
-    'wrapper' | 'counter' | 'tag'
-> &
-    InternalLinkProps;
-
 /** Side Navigation menu trigger (for internal usage) */
-export const InternalSideNavigationTrigger: FC<InternalSideNavigationTriggerProps> = ({
-    className,
-    icon,
-    iconActive,
+export const InternalSideNavigationTrigger: FC<
+    {
+        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;
+    } & Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'title'>
+> = ({
     id,
-    isActive,
-    submenuExpanded,
-    onExpandToggle,
-    onClick,
     title,
+    isActive,
+    icon,
+    iconActive,
+    className,
+
     tag,
-    ...props
+    ...rest
 }) => {
     return (
         <div
             data-cy={`navigation-item-${id}`}
             data-pendo={`navigation-item-${id}`}
-            {...props}
+            {...rest}
             className={classNames(Styles.navItem, className, {
-                [Styles.navLink]: !!onClick,
+                [Styles.navLink]: !!rest.onClick,
                 [Styles.navItemActive]: isActive === true,
                 [Styles.navItemIconSwitch]: !!icon && !!iconActive,
             })}
-            onClick={onClick}
         >
             <InternalSideNavigationItemContent
-                submenuExpanded={submenuExpanded}
-                onExpandToggle={onExpandToggle}
                 icon={icon}
                 iconActive={iconActive}
                 title={title}
@@ -174,15 +151,25 @@ export const InternalSideNavigationTrigger: FC<InternalSideNavigationTriggerProp
 };
 
 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
 }) => {
@@ -193,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}`}
@@ -215,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>
     );
 };
@@ -231,42 +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, isActive, ...props }) => {
+    };
     return (
         <div className={classNames(Styles.navGroupWrapper)}>
-            <div className={Styles.navGroupItem}>
+            <div className={Styles.navGroupItem} onClickCapture={onRootClickCapture}>
                 {to ? (
                     <InternalSideNavigationLink
-                        {...props}
-                        isActive={isActive}
+                        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}
+                        id={id}
+                        title={title}
                         isActive={isActive === true || undefined}
-                        submenuExpanded={submenuExpanded}
-                        onExpandToggle={onExpandToggle}
-                        onClick={onClick}
+                        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

@@ -23,31 +23,47 @@ const WrappedLink: FC<{
 
 /** Side Navigation menu link */
 export function LayoutSidebarLink({
+    id,
+    to,
+    title,
+    isActive,
+    icon,
+    iconActive,
     counter,
     tag,
+    className,
+
     tooltip,
     wrapper,
-    ...props
+    extra,
+    side,
+    ...rest
 }: TitanLayoutLinkProps) {
     const {
         NavigationComponent,
         breakpoint: { isMobile },
     } = useTitanLayoutContext();
     const { onNotificationsUpdate } = useNotificationsContext();
-    const tagData = getCounterTag(counter, tag);
+    const tagData = getCounterTag(side?.counter ?? counter, tag);
 
-    onNotificationsUpdate(props.id, !!tagData);
+    onNotificationsUpdate(id, !!tagData);
 
     const element = (
         <InternalSideNavigationLink
-            {...props}
-            navigationComponent={NavigationComponent}
-            submenuExpanded={undefined}
+            id={id}
+            to={to}
+            title={title}
+            isActive={isActive}
+            icon={icon}
+            iconActive={iconActive}
             tag={tagData}
+            className={className}
+            {...rest}
+            navigationComponent={NavigationComponent}
         />
     );
 
-    return wrapper && !isMobile ? (
+    return wrapper ? (
         <WrappedLink isMobile={isMobile} wrapper={wrapper}>
             {element}
         </WrappedLink>
@@ -58,23 +74,40 @@ export function LayoutSidebarLink({
 
 /** Side Navigation menu trigger */
 export function LayoutSidebarTrigger({
+    id,
+    title,
+    isActive,
+    icon,
+    iconActive,
     counter,
     tag,
+    className,
+
     tooltip,
     wrapper,
-    onClick,
-    ...props
+    extra,
+    side,
+    ...rest
 }: TitanLayoutTriggerProps) {
     const {
         breakpoint: { isMobile },
     } = useTitanLayoutContext();
     const { onNotificationsUpdate } = useNotificationsContext();
-    const tagData = getCounterTag(counter, tag);
+    const tagData = getCounterTag(side?.counter ?? counter, tag);
 
-    onNotificationsUpdate(props.id, !!tagData);
+    onNotificationsUpdate(id, !!tagData);
 
     const element = (
-        <InternalSideNavigationTrigger {...props} submenuExpanded={undefined} tag={tagData} />
+        <InternalSideNavigationTrigger
+            id={id}
+            title={title}
+            isActive={isActive}
+            icon={icon}
+            iconActive={iconActive}
+            tag={tagData}
+            className={className}
+            {...rest}
+        />
     );
     return wrapper ? (
         <WrappedLink isMobile={isMobile} wrapper={wrapper}>

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

@@ -17,7 +17,6 @@
 
 // mobile version
 .nav-drawer {
-    // display: none;
     position: fixed;
     max-width: 400px;
     width: 0;
@@ -65,6 +64,24 @@
             margin-bottom: @spacing-half;
         }
     }
+
+    .nav-group-item {
+        .nav-item {
+            margin-right: 36px;
+
+            &.nav-item-active {
+                margin-right: @spacing-0;
+
+                .nav-item-icon-wrapper {
+                    padding-right: 40px;
+                }
+            }
+        }
+
+        .nav-item-group-toggle-wrapper {
+            right: @spacing-0;
+        }
+    }
 }
 
 .nav-drawer-backdrop {
@@ -184,19 +201,38 @@
     }
 
     .nav-top .divider {
-        margin-top: @spacing-1;
+        margin-top: @spacing-half;
         margin-bottom: @spacing-1;
     }
 
     .nav-main {
         padding-top: @spacing-1;
     }
+
+    .nav-group-item {
+        .nav-item {
+            margin-right: 44px;
+
+            &.nav-item-active {
+                margin-right: @spacing-1;
+
+                .nav-item-icon-wrapper {
+                    padding-right: 40px;
+                }
+            }
+        }
+
+        .nav-item-group-toggle-wrapper {
+            right: @spacing-1;
+        }
+    }
 }
 
 .nav-drawer,
 .nav-wide {
     .nav-item {
         flex-direction: row;
+        margin-bottom: @spacing-half;
 
         .nav-item-icon-wrapper {
             flex: 1;
@@ -355,26 +391,6 @@
         min-height: 12px !important;
     }
 
-    .nav-item-group-toggle-wrapper {
-        position: relative;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
-        .nav-item-group-toggle[data-anv][data-anv] {
-            color: inherit;
-            font-weight: @font-weight-semibold;
-        }
-
-        .nav-item-group-toggle-click {
-            position: absolute;
-            left: -@spacing-2;
-            right: -@spacing-half;
-            top: -@spacing-1;
-            bottom: -@spacing-1;
-        }
-    }
-
     .nav-icon[data-anv][data-anv] {
         height: 24px;
         width: 24px;
@@ -397,6 +413,42 @@
 .nav-group-wrapper {
     .nav-group-item {
         position: relative;
+
+        .nav-item {
+            .nav-item-counter[data-anv][data-anv] {
+                margin-right: @spacing-0;
+            }
+        }
+
+        &:has(.nav-item-active) {
+            .nav-item-group-toggle-wrapper {
+                color: @text-color-active;
+            }
+        }
+    }
+
+    .nav-item-group-toggle-wrapper {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        right: @spacing-0;
+        color: @text-color;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        .nav-item-group-toggle[data-anv][data-anv] {
+            color: inherit;
+            font-weight: @font-weight-semibold;
+        }
+
+        .nav-item-group-toggle-click {
+            position: absolute;
+            left: -@spacing-2;
+            right: -@spacing-half;
+            top: -@spacing-1;
+            bottom: -@spacing-1;
+        }
     }
 
     .submenu-wrapper:not(.submenu-wrapper-collapsed) {