@servicetitan/navigation 11.0.0-canary.237.0c461af.0 → 11.0.0-canary.237.2d7cfa1.0

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

@@ -33,9 +33,11 @@ export interface LayoutSidebarProps {
     mainItems?: NavigationItemData[];
     barExpanded: boolean;
     submenuExpanded: string | undefined;
+    drawerOpened: boolean;
     mobile: boolean;
     navigationComponent: FC<NavLinkComponentProps>;
     onBarExpandChange(expanded: boolean): void;
+    onDrawerOpenChange(expanded: boolean): void;
     onSubmenuExpandChange(id: string, expanded: boolean): void;
 }
 
@@ -44,29 +46,36 @@ export const LayoutSidebar: FC<LayoutSidebarProps> = ({
     mobile,
     barExpanded,
     submenuExpanded,
+    drawerOpened,
     onBarExpandChange,
     onSubmenuExpandChange,
+    onDrawerOpenChange,
     mainItems,
     top,
     bottom,
     navigationComponent,
 }) => {
-    const handleClick = (e: MouseEvent<never>) => {
-        e.stopPropagation();
+    const closeDrawer = () => {
+        if (mobile) {
+            onDrawerOpenChange?.(false);
+        }
     };
 
     return (
         <LayoutPlacementContext.Provider value="side">
+            {mobile && drawerOpened && (
+                <div className={Styles.navDrawerBackdrop} onClick={closeDrawer} />
+            )}
             <div
                 className={classNames(
                     Styles.nav,
                     mobile && Styles.navDrawer,
-                    mobile && barExpanded && Styles.navDrawerOpened,
+                    mobile && drawerOpened && Styles.navDrawerOpened,
                     !mobile && (barExpanded ? Styles.navWide : Styles.navSlim),
                     className
                 )}
                 data-cy="side-navigation"
-                onClick={handleClick}
+                onClick={closeDrawer}
             >
                 <ThemeProvider mode="dark" className={Styles.navMain}>
                     {mobile && (
@@ -86,7 +95,7 @@ export const LayoutSidebar: FC<LayoutSidebarProps> = ({
                             item.submenu ? (
                                 <SideNavigationGroupItem
                                     key={item.id}
-                                    barExpanded={barExpanded}
+                                    barExpanded={mobile ? barExpanded : drawerOpened}
                                     submenuExpanded={!!item.id && submenuExpanded === item.id}
                                     onSubmenuExpand={onSubmenuExpandChange}
                                     navigationComponent={navigationComponent}

package/src/components/titan-layout/notifications-context.tsx

@@ -0,0 +1,44 @@
+import {
+    FC,
+    PropsWithChildren,
+    createContext,
+    useCallback,
+    useContext,
+    useRef,
+    useState,
+} from 'react';
+
+interface NotificationsContextType {
+    onNotificationsUpdate: (id: string, hasNotifications: boolean) => void;
+}
+
+const NotificationsContext = createContext<NotificationsContextType>({
+    onNotificationsUpdate: () => {},
+});
+
+export const useNotificationsContext = () => useContext(NotificationsContext);
+
+export const useNotificationsState = () => {
+    const [hasNotifications, setHasNotifications] = useState(false);
+    const items = useRef(new Set<string>());
+    const onNotificationsUpdate = useCallback((id: string, hasNotifications: boolean) => {
+        if (hasNotifications && !items.current.has(id)) {
+            items.current.add(id);
+            setHasNotifications(!!items.current.size);
+        } else if (!hasNotifications && items.current.has(id)) {
+            items.current.delete(id);
+            setHasNotifications(!!items.current.size);
+        }
+    }, []);
+
+    const NotificationsContextProvider: FC<PropsWithChildren> = useCallback(
+        ({ children }) => (
+            <NotificationsContext.Provider value={{ onNotificationsUpdate }}>
+                {children}
+            </NotificationsContext.Provider>
+        ),
+        [onNotificationsUpdate]
+    );
+
+    return { NotificationsContextProvider, hasNotifications };
+};

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

@@ -77,9 +77,9 @@
 
     .top {
         position: fixed;
+        width: 100vw;
         top: 0;
         left: 0;
-        right: 0;
         z-index: 991;
     }
 

package/src/components/titan-layout/titan-layout.stories.tsx

@@ -27,6 +27,7 @@ interface LayoutContentArgs {
     search: boolean;
     longContent: boolean;
     wideContent: boolean;
+    minWidth: boolean;
 }
 
 export default {
@@ -41,6 +42,7 @@ export default {
         search: true,
         longContent: true,
         wideContent: false,
+        minWidth: false,
     } as LayoutContentArgs,
 };
 
@@ -68,6 +70,7 @@ const profile = (
             to="https://google.com"
             tooltip="Google it"
             target="_blank"
+            tag={{ value: true }}
         >
             first link
         </ProfileDropdown.Link>
@@ -201,13 +204,15 @@ const useLayoutProps = (args: LayoutContentArgs): TitanLayoutProps => {
         extraText: args.extraText ? 'EST (-8 hrs)' : undefined,
 
         sideTop: args.sideTop ? sidebarTop() : undefined,
+
+        minContentWidth: args.minWidth ? 900 : undefined,
     };
 };
 
 const Content = (args: LayoutContentArgs) => {
     return (
         <Fragment>
-            <LocationInfo />
+            <LocationInfo className="m-b-3" />
             {args.wideContent && (
                 <div style={{ width: '1200px' }}>
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor

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

@@ -29,6 +29,7 @@ import { TitanLayoutLogo, TitanLayoutLogoProps } from './layout-logo';
 import { LayoutSidebar } from './layout-sidebar';
 import { TitanLayoutSidebarLink, TitanLayoutSidebarTrigger } from './layout-sidebar-links';
 import { InternalSideNavigationTrigger } from './layout-sidebar-links-internal';
+import { useNotificationsState } from './notifications-context';
 import * as Styles from './titan-layout.module.less';
 
 type TitanLayoutChild = ReactElement<TitanLayoutContentProps> | ReactElement<TitanLayoutLogoProps>;
@@ -143,26 +144,13 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
     const variant = useVariant(appearance);
     const [mobileDrawerOpened, setMobileDrawerOpened] = useState(false);
     const { content, logo } = useLayoutChildren(children);
-
-    useEffect(() => {
-        if (!isMobile) {
-            setMobileDrawerOpened(false);
-            return;
-        }
-
-        const listener = () => {
-            setMobileDrawerOpened(false);
-        };
-
-        document.addEventListener('click', listener);
-
-        return () => document.removeEventListener('click', listener);
-    }, [isMobile]);
+    const { hasNotifications, NotificationsContextProvider } = useNotificationsState();
 
     useEffect(() => {
         if (variant.isAnvil1) {
-            document.body.classList.add('of-hidden-i');
-            return () => document.body.classList.remove('of-hidden');
+            const bodyClassName = 'of-hidden-i';
+            document.body.classList.add(bodyClassName);
+            return () => document.body.classList.remove(bodyClassName);
         }
     }, [variant.isAnvil1]);
 
@@ -190,6 +178,24 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
         },
         [state, onStateChange]
     );
+    const hasMenuNotifications = useMemo(() => {
+        try {
+            return (
+                navigationMainItems?.some(item => {
+                    if (item.counter || item.tag?.value) {
+                        return true;
+                    } else if (item.submenu) {
+                        return item.submenu.groups.some(group =>
+                            group.links.some(link => !!link.counter || !!link.tag?.value)
+                        );
+                    }
+                    return false;
+                }) ?? false
+            );
+        } catch {
+            return false;
+        }
+    }, [navigationMainItems]);
 
     const layoutClass = variant.isLegacy
         ? Styles.layoutLegacy
@@ -224,40 +230,45 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
                                 {!isMobile && extraLinks}
                             </Fragment>
                         }
+                        isMobile={isMobile}
+                        hasNotifications={hasNotifications || hasMenuNotifications}
                         onBurgerClick={onBurgerClick}
                     />
 
-                    <LayoutSidebar
-                        className={Styles.side}
-                        mobile={breakpoint.isMobile}
-                        barExpanded={isMobile ? mobileDrawerOpened : !state?.navCollapsed}
-                        submenuExpanded={state?.submenuExpanded}
-                        onBarExpandChange={onBarExpandChange}
-                        onSubmenuExpandChange={onSubmenuExpandChange}
-                        top={sideTop}
-                        mainItems={navigationMainItems}
-                        navigationComponent={context.NavigationComponent}
-                        bottom={
-                            isMobile ? (
-                                <Fragment>
-                                    {profile}
-                                    {extraLinks}
-                                    {!!extraText && (
-                                        <InternalSideNavigationTrigger
-                                            id="__extra_text"
-                                            title={extraText}
-                                            submenuExpanded={undefined}
-                                            dataPrefix="navigation-extra-text"
-                                            tag={undefined}
-                                            icon={undefined}
-                                            iconActive={undefined}
-                                        />
-                                    )}
-                                </Fragment>
-                            ) : undefined
-                        }
-                    />
-
+                    <NotificationsContextProvider>
+                        <LayoutSidebar
+                            className={Styles.side}
+                            mobile={breakpoint.isMobile}
+                            barExpanded={!state?.navCollapsed}
+                            onBarExpandChange={onBarExpandChange}
+                            submenuExpanded={state?.submenuExpanded}
+                            onSubmenuExpandChange={onSubmenuExpandChange}
+                            drawerOpened={mobileDrawerOpened}
+                            onDrawerOpenChange={setMobileDrawerOpened}
+                            top={sideTop}
+                            mainItems={navigationMainItems}
+                            navigationComponent={context.NavigationComponent}
+                            bottom={
+                                isMobile ? (
+                                    <Fragment>
+                                        {profile}
+                                        {extraLinks}
+                                        {!!extraText && (
+                                            <InternalSideNavigationTrigger
+                                                id="__extra_text"
+                                                title={extraText}
+                                                submenuExpanded={undefined}
+                                                dataPrefix="navigation-extra-text"
+                                                tag={undefined}
+                                                icon={undefined}
+                                                iconActive={undefined}
+                                            />
+                                        )}
+                                    </Fragment>
+                                ) : undefined
+                            }
+                        />
+                    </NotificationsContextProvider>
                     <LayoutContent
                         header={header}
                         anvil2={variant.isAnvil2}

package/src/test/data.tsx

@@ -66,7 +66,6 @@ export const NavLinkMock = forwardRef<any, NavLinkComponentProps>(
                 {...rest}
                 onClick={e => {
                     e.preventDefault();
-                    e.stopPropagation();
 
                     if (!to.startsWith('http')) {
                         history.replace(to);
@@ -82,10 +81,10 @@ export const NavLinkMock = forwardRef<any, NavLinkComponentProps>(
     }
 );
 
-export const LocationInfo = () => {
+export const LocationInfo: FC<{ className?: string }> = ({ className }) => {
     const location = useLocation();
 
-    return <BodyText>current location - {location.pathname}</BodyText>;
+    return <BodyText className={className}>current location - {location.pathname}</BodyText>;
 };
 
 const LocationProvider: FC<{ children: any }> = ({ children }) => {