@servicetitan/navigation 11.0.0-canary.237.6ce8e81.0 → 11.0.0-canary.237.8bb2b7d.0

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>;
@@ -57,6 +58,7 @@ export type TitanLayoutProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'
     extraLinks?: ReactElement;
     extraLinksTop?: ReactElement;
     extraText?: string;
+    minContentWidth?: number;
 };
 
 const defaultSidebarContext: TitanLayoutSidebarContextType = {
@@ -125,6 +127,7 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
     extraLinks,
     extraLinksTop,
     extraText,
+    minContentWidth,
     sideTop,
 }) => {
     const breakpoint = useTitanBreakpoint();
@@ -141,21 +144,15 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
     const variant = useVariant(appearance);
     const [mobileDrawerOpened, setMobileDrawerOpened] = useState(false);
     const { content, logo } = useLayoutChildren(children);
+    const { hasNotifications, NotificationsContextProvider } = useNotificationsState();
 
     useEffect(() => {
-        if (!isMobile) {
-            setMobileDrawerOpened(false);
-            return;
+        if (variant.isAnvil1) {
+            const bodyClassName = 'of-hidden-i';
+            document.body.classList.add(bodyClassName);
+            return () => document.body.classList.remove(bodyClassName);
         }
-
-        const listener = () => {
-            setMobileDrawerOpened(false);
-        };
-
-        document.addEventListener('click', listener);
-
-        return () => document.removeEventListener('click', listener);
-    }, [isMobile]);
+    }, [variant.isAnvil1]);
 
     const onBurgerClick = useCallback((e: MouseEvent) => {
         setMobileDrawerOpened(true);
@@ -181,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
@@ -215,44 +230,50 @@ 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}
                         anvil1={variant.isAnvil1}
+                        minWidth={minContentWidth}
                     >
                         {content}
                     </LayoutContent>
@@ -291,7 +312,7 @@ const TitanLayoutHeaderObserved: FC<{
         };
     }, [heightChange]);
     return (
-        <div ref={ref} className={Styles.header}>
+        <div ref={ref} className={Styles.contentHeader} data-cy="layout-content-header">
             {children}
         </div>
     );
@@ -307,30 +328,43 @@ const LayoutContent: FC<{
     header?: ReactNode;
     anvil1: boolean;
     anvil2: boolean;
-}> = ({ anvil1, anvil2, children, header }) => {
+    minWidth: number | undefined;
+}> = ({ anvil1, anvil2, children, header, minWidth }) => {
     const [anvil2Styles, setAnvil2Styles] = useState<object>({});
     const updateIndicatorsHeight = useCallback((offset: number) => {
         setAnvil2Styles({ '--offset': `calc(var(--nav-offset-top) + ${offset}px)` });
     }, []);
 
+    const contentStyles = useMemo(
+        () => ({
+            ...(minWidth ? { minWidth: `${minWidth}px` } : {}),
+            ...(anvil2 ? anvil2Styles : {}),
+        }),
+        [anvil2, minWidth, anvil2Styles]
+    );
+
     return (
-        <div className={Styles.content} style={anvil2Styles}>
+        <Fragment>
             {!!header &&
                 (anvil2 ? (
                     <TitanLayoutHeaderObserved heightChange={updateIndicatorsHeight}>
                         {header}
                     </TitanLayoutHeaderObserved>
                 ) : (
-                    header
+                    <div className={Styles.contentHeader} data-cy="layout-content-header">
+                        {header}
+                    </div>
                 ))}
-            {anvil1 ? (
-                <div className="position-relative d-f flex-grow-1 flex-basis-0 of-hidden">
-                    {children}
-                </div>
-            ) : (
-                children
-            )}
-        </div>
+            <div className={Styles.content} style={contentStyles} data-cy="layout-content">
+                {anvil1 ? (
+                    <div className="position-relative d-f flex-grow-1 flex-basis-0 of-hidden">
+                        {children}
+                    </div>
+                ) : (
+                    children
+                )}
+            </div>
+        </Fragment>
     );
 };
 

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 }) => {