@servicetitan/navigation 14.2.0 → 14.3.0

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

@@ -2,7 +2,16 @@ 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 { ComponentPropsWithoutRef, FC, Fragment, MouseEvent, ReactNode } from 'react';
+import {
+    ComponentPropsWithoutRef,
+    FC,
+    Fragment,
+    MouseEvent,
+    ReactNode,
+    SyntheticEvent,
+    useId,
+} from 'react';
+import { getNotificationCount } from '../../utils/navigation-notifications';
 
 import { BadgeTag, BadgeTagProps } from '../badge-tag';
 import { NavigationComponentProps } from './interface-internal';
@@ -46,12 +55,7 @@ const InternalSideNavigationItemContent: FC<InternalSideNavigationItemContentPro
             )}
         </div>
 
-        <div
-            className={classNames(Styles.navItemTextCollapsed, {
-                [Styles.navItemTextSmall]: !!title && title.length >= 10,
-            })}
-            data-cy="nav-item-label"
-        >
+        <div className={Styles.navItemTextCollapsed} data-cy="nav-item-label">
             {title}
         </div>
     </Fragment>
@@ -68,6 +72,7 @@ export const InternalSideNavigationLink: FC<
         iconActive: IconProps['svg'] | undefined;
         className: string | undefined;
         tag: BadgeTagProps | undefined;
+        notificationCount?: number;
     } & Omit<ComponentPropsWithoutRef<'a'>, 'children' | 'title'>
 > = ({
     id,
@@ -78,6 +83,7 @@ export const InternalSideNavigationLink: FC<
     iconActive,
     className,
     tag,
+    notificationCount = getNotificationCount(tag?.value),
 
     navigationComponent: NavigationComponent,
     ...rest
@@ -86,6 +92,7 @@ export const InternalSideNavigationLink: FC<
         <NavigationComponent
             data-cy={`navigation-item-${id}`}
             data-pendo={`navigation-item-${id}`}
+            data-navigation-notification-count={notificationCount || undefined}
             {...rest}
             className={classNames(Styles.navItem, Styles.navLink, className, {
                 [Styles.navItemActive]: isActive === true,
@@ -117,6 +124,7 @@ export const InternalSideNavigationTrigger: FC<
         className: string | undefined;
 
         tag: BadgeTagProps | undefined;
+        notificationCount?: number;
         onClick?: (e: MouseEvent<never>) => void;
     } & Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'title'>
 > = ({
@@ -128,12 +136,14 @@ export const InternalSideNavigationTrigger: FC<
     className,
 
     tag,
+    notificationCount = getNotificationCount(tag?.value),
     ...rest
 }) => {
     return (
         <div
             data-cy={`navigation-item-${id}`}
             data-pendo={`navigation-item-${id}`}
+            data-navigation-notification-count={notificationCount || undefined}
             tabIndex={rest.onClick ? 0 : -1}
             {...rest}
             className={classNames(Styles.navItem, className, {
@@ -186,6 +196,7 @@ export const InternalSideNavigationGroupLink: FC<
                 key={id}
                 data-cy={`navigation-item-${parentId}--${id}`}
                 data-pendo={`navigation-item-${parentId}--${id}`}
+                data-navigation-notification-count={getNotificationCount(tag?.value) || undefined}
                 {...rest}
                 to={to}
                 className={classNames(Styles.submenuItem, Styles.submenuLink, className, {
@@ -221,6 +232,7 @@ export const InternalSideNavigationGroupTrigger: FC<{
     return (
         <div
             data-cy={`navigation-item-${id}`}
+            data-navigation-notification-count={getNotificationCount(tag?.value) || undefined}
             data-pendo={`navigation-item-${id}`}
             key={id}
             {...rest}
@@ -250,6 +262,7 @@ export const InternalSideNavigationGroup: FC<
         className: string | undefined;
         tag: BadgeTagProps | undefined;
 
+        notificationCount?: number;
         children: ReactNode;
         submenuOpened: boolean;
         onClick?: (e: MouseEvent<never>) => void;
@@ -265,6 +278,7 @@ export const InternalSideNavigationGroup: FC<
     className,
     tag,
 
+    notificationCount,
     children,
     submenuOpened,
     onSubmenuOpen,
@@ -272,16 +286,62 @@ export const InternalSideNavigationGroup: FC<
     navigationComponent,
     ...rest
 }) => {
-    const onToggleClick = (e: MouseEvent<never>) => {
-        onSubmenuOpen(id, !submenuOpened);
+    const submenuId = useId();
+    const onToggleClick = (e: SyntheticEvent) => {
         e.preventDefault();
         e.stopPropagation();
+        onSubmenuOpen(id, !submenuOpened);
     };
 
     return (
-        <div className={classNames(Styles.navGroupWrapper)}>
+        <div
+            className={classNames(Styles.navGroupWrapper, {
+                [Styles.navGroupOpened]: submenuOpened,
+            })}
+        >
             <div className={Styles.navGroupItem}>
-                <div>
+                <div
+                    // Update expansion before the host link handles navigation to its destination.
+                    onClickCapture={event => {
+                        if (!to) {
+                            onToggleClick(event);
+                        } else if (
+                            /*
+                             * A module name only ever opens. It navigates into the module, so
+                             * collapsing would hide the very page the click is about to land on —
+                             * the destination is `to`, whether that is a page itself or an entry
+                             * route the host redirects to the module's default page. Collapsing an
+                             * open module is the chevron's job.
+                             */
+                            !submenuOpened &&
+                            event.button === 0 &&
+                            !event.altKey &&
+                            !event.ctrlKey &&
+                            !event.metaKey &&
+                            !event.shiftKey
+                        ) {
+                            onSubmenuOpen(id, true);
+                        }
+                    }}
+                    onClick={event => event.stopPropagation()}
+                    onKeyDownCapture={event => {
+                        if (
+                            (event.key === 'Enter' || event.key === ' ') &&
+                            !event.altKey &&
+                            !event.ctrlKey &&
+                            !event.metaKey &&
+                            !event.shiftKey
+                        ) {
+                            if (to) {
+                                event.preventDefault();
+                                event.stopPropagation();
+                                event.currentTarget.querySelector('a')?.click();
+                            } else {
+                                onToggleClick(event);
+                            }
+                        }
+                    }}
+                >
                     {to ? (
                         <InternalSideNavigationLink
                             id={id}
@@ -291,8 +351,11 @@ export const InternalSideNavigationGroup: FC<
                             icon={icon}
                             iconActive={iconActive}
                             tag={tag}
+                            notificationCount={notificationCount}
                             className={className}
                             {...rest}
+                            aria-expanded={submenuOpened}
+                            aria-controls={submenuId}
                             navigationComponent={navigationComponent}
                         />
                     ) : (
@@ -303,8 +366,14 @@ export const InternalSideNavigationGroup: FC<
                             icon={icon}
                             iconActive={iconActive}
                             tag={tag}
+                            notificationCount={notificationCount}
                             className={className}
                             {...rest}
+                            role="button"
+                            tabIndex={0}
+                            onClick={onToggleClick}
+                            aria-expanded={submenuOpened}
+                            aria-controls={submenuId}
                         />
                     )}
                 </div>
@@ -312,12 +381,14 @@ export const InternalSideNavigationGroup: FC<
                 <div className={Styles.navItemGroupToggleWrapper}>
                     {withTooltip(
                         <Button
-                            appearance="secondary"
-                            size="small"
+                            appearance="ghost"
+                            size="xsmall"
                             icon={submenuOpened ? SvgGroupCollapse : SvgGroupExpand}
                             className={Styles.navItemGroupToggle}
                             onClick={onToggleClick}
-                            aria-label="Toggle submenu"
+                            aria-label={`${submenuOpened ? 'Collapse' : 'Expand'} ${title} submenu`}
+                            aria-expanded={submenuOpened}
+                            aria-controls={submenuId}
                             data-cy="nav-item-group-expand"
                         />,
                         // hide submenu tooltip for now
@@ -328,6 +399,7 @@ export const InternalSideNavigationGroup: FC<
             </div>
             {submenuOpened && (
                 <div
+                    id={submenuId}
                     className={classNames(Styles.submenuWrapper, {
                         [Styles.submenuWrapperCollapsed]: !submenuOpened,
                     })}