@servicetitan/navigation 11.0.0-canary.237.fef17f5.0 → 11.0.0-canary.237.ff793b3.0

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

@@ -25,6 +25,10 @@ interface LayoutContentArgs {
     sideTop: boolean;
     extraText: boolean;
     search: boolean;
+    longContent: boolean;
+    wideContent: boolean;
+    minWidth: boolean;
+    emptyNav: boolean;
 }
 
 export default {
@@ -37,6 +41,10 @@ export default {
         sideTop: true,
         extraText: true,
         search: true,
+        longContent: true,
+        wideContent: false,
+        minWidth: false,
+        emptyNav: false,
     } as LayoutContentArgs,
 };
 
@@ -64,6 +72,7 @@ const profile = (
             to="https://google.com"
             tooltip="Google it"
             target="_blank"
+            tag={{ value: true }}
         >
             first link
         </ProfileDropdown.Link>
@@ -176,7 +185,9 @@ const ContentHeader = () => {
         </Fragment>
     );
 };
-const SearchBar = () => <TextField size="small" placeholder="Search" className="w-100-i" />;
+const SearchBar = () => (
+    <TextField size="small" placeholder="Search" className="w-100-i m-x-half-i" />
+);
 
 const useLayoutProps = (args: LayoutContentArgs): TitanLayoutProps => {
     const [state, setState] = useState<TitanLayoutState | undefined>(undefined);
@@ -186,7 +197,7 @@ const useLayoutProps = (args: LayoutContentArgs): TitanLayoutProps => {
         onStateChange: setState,
 
         navigationComponent: NavLinkMock,
-        navigationMainItems: mainNavItems,
+        navigationMainItems: args.emptyNav ? [] : mainNavItems,
 
         profile,
         top: args.search ? <SearchBar /> : undefined,
@@ -196,15 +207,111 @@ const useLayoutProps = (args: LayoutContentArgs): TitanLayoutProps => {
         extraLinksTop,
         extraText: args.extraText ? 'EST (-8 hrs)' : undefined,
 
-        sideTop: args.sideTop ? sidebarTop() : undefined,
+        sideTop: args.sideTop && !args.emptyNav ? sidebarTop() : undefined,
+
+        minContentWidth: args.minWidth ? 900 : undefined,
     };
 };
 
+const Content = (args: LayoutContentArgs) => {
+    return (
+        <Fragment>
+            <LocationInfo className="m-b-3" />
+            {args.wideContent && (
+                <div style={{ width: '1200px' }}>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
+                    nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
+                    fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+                    culpa qui officia deserunt mollit anim id est laborum.
+                </div>
+            )}
+
+            {args.longContent && (
+                <div>
+                    <p>Lorem</p>
+                    <p>ipsum</p>
+                    <p>dolor</p>
+                    <p>sit</p>
+                    <p>amet,</p>
+                    <p>consectetur</p>
+                    <p>adipiscing</p>
+                    <p>elit,</p>
+                    <p>sed</p>
+                    <p>do</p>
+                    <p>eiusmod</p>
+                    <p>tempor</p>
+                    <p>incididunt</p>
+                    <p>ut</p>
+                    <p>labore</p>
+                    <p>et</p>
+                    <p>dolore</p>
+                    <p>magna</p>
+                    <p>aliqua.</p>
+                    <p>Ut</p>
+                    <p>enim</p>
+                    <p>ad</p>
+                    <p>minim</p>
+                    <p>veniam,</p>
+                    <p>quis</p>
+                    <p>nostrud</p>
+                    <p>exercitation</p>
+                    <p>ullamco</p>
+                    <p>laboris</p>
+                    <p>nisi</p>
+                    <p>ut</p>
+                    <p>aliquip</p>
+                    <p>ex</p>
+                    <p>ea</p>
+                    <p>commodo</p>
+                    <p>consequat.</p>
+                    <p>Duis</p>
+                    <p>aute</p>
+                    <p>irure</p>
+                    <p>dolor</p>
+                    <p>in</p>
+                    <p>reprehenderit</p>
+                    <p>in</p>
+                    <p>voluptate</p>
+                    <p>velit</p>
+                    <p>esse</p>
+                    <p>cillum</p>
+                    <p>dolore</p>
+                    <p>eu</p>
+                    <p>fugiat</p>
+                    <p>nulla</p>
+                    <p>pariatur.</p>
+                    <p>Excepteur</p>
+                    <p>sint</p>
+                    <p>occaecat</p>
+                    <p>cupidatat</p>
+                    <p>non</p>
+                    <p>proident,</p>
+                    <p>sunt</p>
+                    <p>in</p>
+                    <p>culpa</p>
+                    <p>qui</p>
+                    <p>officia</p>
+                    <p>deserunt</p>
+                    <p>mollit</p>
+                    <p>anim</p>
+                    <p>id</p>
+                    <p>est</p>
+                    <p>laborum.</p>
+                </div>
+            )}
+        </Fragment>
+    );
+};
+
 export const TitanLayoutLegacy = (args: LayoutContentArgs) => (
     <TitanLayout {...useLayoutProps(args)} appearance="legacy">
         <TitanLayout.Logo title />
         <TitanLayout.Content>
-            <LocationInfo />
+            <div className="p-3">
+                <Content {...args} />
+            </div>
         </TitanLayout.Content>
     </TitanLayout>
 );
@@ -214,7 +321,7 @@ export const TitanLayoutAnvil1 = (args: LayoutContentArgs) => (
         <TitanLayout.Logo title />
         <TitanLayout.Content>
             <Anvil1Page>
-                <LocationInfo />
+                <Content {...args} />
             </Anvil1Page>
         </TitanLayout.Content>
     </TitanLayout>
@@ -226,7 +333,7 @@ export const TitanLayoutAnvil2 = (args: LayoutContentArgs) => (
         <TitanLayout.Content>
             <Anvil2Page>
                 <Anvil2Page.Content>
-                    <LocationInfo />
+                    <Content {...args} />
                 </Anvil2Page.Content>
             </Anvil2Page>
         </TitanLayout.Content>

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

@@ -29,24 +29,27 @@ 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>;
 
 export type TitanLayoutProps = Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'style'> & {
-    empty?: boolean;
-
+    /** layout appearance */
     appearance?: 'legacy' | 'anvil1' | 'anvil2';
 
+    /** layout's content */
+    children?: TitanLayoutChild | TitanLayoutChild[];
+
+    /** show only content without side and top bars */
+    contentOnly?: boolean;
+
     /** component used for navigation */
     navigationComponent?: FC<NavLinkComponentProps>;
 
     /** data for main navigation links */
     navigationMainItems?: NavigationItemData[];
 
-    /** layout's content */
-    children?: TitanLayoutChild | TitanLayoutChild[];
-
     state?: TitanLayoutState;
     onStateChange?: (state: TitanLayoutState) => void;
 
@@ -57,6 +60,7 @@ export type TitanLayoutProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'
     extraLinks?: ReactElement;
     extraLinksTop?: ReactElement;
     extraText?: string;
+    minContentWidth?: number;
 };
 
 const defaultSidebarContext: TitanLayoutSidebarContextType = {
@@ -115,6 +119,7 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
     appearance = 'anvil2',
     id,
     children,
+    contentOnly,
     navigationComponent,
     header,
     top,
@@ -125,10 +130,10 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
     extraLinks,
     extraLinksTop,
     extraText,
+    minContentWidth,
     sideTop,
 }) => {
     const breakpoint = useTitanBreakpoint();
-    const isMobile = breakpoint.isMobile;
     const context: TitanLayoutContextType = useMemo(
         () => ({
             NavigationComponent: navigationComponent ?? DefaultNavLinkComponent,
@@ -141,21 +146,23 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
     const variant = useVariant(appearance);
     const [mobileDrawerOpened, setMobileDrawerOpened] = useState(false);
     const { content, logo } = useLayoutChildren(children);
+    const { hasNotifications, NotificationsContextProvider } = useNotificationsState();
+    const [anvil2Styles, setAnvil2Styles] = useState<object>({});
+    const updateIndicatorsHeight = useCallback((offset: number) => {
+        setAnvil2Styles({ '--offset': `calc(var(--nav-offset-top) + ${offset}px)` });
+    }, []);
+
+    const isMobile = breakpoint.isMobile;
+    const hasSideBar = !contentOnly && (!!navigationMainItems?.length || !!sideTop?.length);
+    const hasTopBar = !contentOnly;
 
     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 +188,48 @@ 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 limitContentWidth = useMemo(() => {
+        if (variant.isAnvil2 || !minContentWidth) {
+            return undefined;
+        }
+
+        if (breakpoint.width < minContentWidth) {
+            return minContentWidth;
+        }
+    }, [variant, minContentWidth, breakpoint.width]);
+
+    const contentStyles = useMemo(() => {
+        if (variant.isAnvil2) {
+            return anvil2Styles;
+        }
+
+        if (variant.isLegacy && limitContentWidth) {
+            return {
+                display: 'flex',
+                flexDirection: 'column',
+                minHeight: '100vh',
+            };
+        }
+    }, [variant, anvil2Styles, limitContentWidth]);
 
     const layoutClass = variant.isLegacy
         ? Styles.layoutLegacy
@@ -196,62 +245,88 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
                     className={classNames(
                         Styles.layout,
                         isMobile ? Styles.layoutMobile : Styles.layoutDesktop,
-                        !isMobile && state?.navCollapsed
-                            ? Styles.layoutNavSlim
-                            : Styles.layoutNavWide,
+                        {
+                            [Styles.layoutTop]: hasTopBar,
+                            [Styles.layoutNavSlim]: !isMobile && hasSideBar && state?.navCollapsed,
+                            [Styles.layoutNavWide]: !isMobile && hasSideBar && !state?.navCollapsed,
+                        },
                         layoutClass
                     )}
+                    style={contentStyles}
                 >
                     {variant.isSequent && <div className={Styles.topPlaceholder} />}
-                    <LayoutHeader
-                        className={Styles.top}
-                        logo={logo}
-                        profile={isMobile ? undefined : profile}
-                        center={top}
-                        rightText={isMobile ? undefined : extraText}
-                        right={
-                            <Fragment>
-                                {extraLinksTop}
-                                {!isMobile && extraLinks}
-                            </Fragment>
-                        }
-                        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 ? (
+                    {hasTopBar && (
+                        <LayoutHeader
+                            className={Styles.top}
+                            logo={logo}
+                            profile={isMobile ? undefined : profile}
+                            center={top}
+                            rightText={isMobile ? undefined : extraText}
+                            right={
                                 <Fragment>
-                                    {profile}
-                                    {extraLinks}
-                                    {!!extraText && (
-                                        <InternalSideNavigationTrigger
-                                            id="__extra_text"
-                                            title={extraText}
-                                            submenuExpanded={undefined}
-                                            dataPrefix="navigation-extra-text"
-                                            tag={undefined}
-                                            icon={undefined}
-                                            iconActive={undefined}
-                                        />
-                                    )}
+                                    {extraLinksTop}
+                                    {!isMobile && extraLinks}
                                 </Fragment>
-                            ) : undefined
-                        }
-                    />
+                            }
+                            isMobile={isMobile}
+                            hasNotifications={hasNotifications || hasMenuNotifications}
+                            onBurgerClick={onBurgerClick}
+                        />
+                    )}
 
-                    <LayoutContent header={header} anvil2={variant.isAnvil2}>
-                        {content}
-                    </LayoutContent>
+                    {hasSideBar && (
+                        <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>
+                    )}
+
+                    {variant.isAnvil1 ? (
+                        <LayoutContentAnvil1 header={header} minWidth={limitContentWidth}>
+                            {content}
+                        </LayoutContentAnvil1>
+                    ) : variant.isLegacy ? (
+                        <LayoutContentLegacy header={header} minWidth={limitContentWidth}>
+                            {content}
+                        </LayoutContentLegacy>
+                    ) : (
+                        <LayoutContentAnvil2
+                            header={header}
+                            onHeaderHeightChange={updateIndicatorsHeight}
+                        >
+                            {content}
+                        </LayoutContentAnvil2>
+                    )}
                 </div>
             </LayoutPlacementContext.Provider>
         </LayoutContext.Provider>
@@ -287,7 +362,14 @@ const TitanLayoutHeaderObserved: FC<{
         };
     }, [heightChange]);
     return (
-        <div ref={ref} className={Styles.header}>
+        <div ref={ref} className={Styles.contentHeader} data-cy="layout-content-header">
+            {children}
+        </div>
+    );
+};
+const TitanLayoutHeader: FC<{ children: ReactNode }> = ({ children }) => {
+    return (
+        <div className={Styles.contentHeader} data-cy="layout-content-header">
             {children}
         </div>
     );
@@ -298,28 +380,76 @@ export interface TitanLayoutContentProps {
 }
 const TitanLayoutContent: FC<TitanLayoutContentProps> = ({ children }) => children;
 
-const LayoutContent: FC<{ children: ReactNode; header?: ReactNode; anvil2: boolean }> = ({
-    anvil2,
-    children,
-    header,
-}) => {
-    const [anvil2Styles, setAnvil2Styles] = useState<object>({});
-    const updateIndicatorsHeight = useCallback((offset: number) => {
-        setAnvil2Styles({ '--offset': `calc(var(--nav-offset-top) + ${offset}px)` });
-    }, []);
-
+const LayoutContentAnvil2: FC<{
+    children: ReactNode;
+    header?: ReactNode;
+    onHeaderHeightChange?: (height: number) => void;
+}> = ({ children, header, onHeaderHeightChange }) => {
     return (
-        <div className={Styles.content} style={anvil2Styles}>
-            {!!header &&
-                (anvil2 ? (
-                    <TitanLayoutHeaderObserved heightChange={updateIndicatorsHeight}>
-                        {header}
-                    </TitanLayoutHeaderObserved>
-                ) : (
-                    header
-                ))}
+        <Fragment>
+            <TitanLayoutHeaderObserved heightChange={onHeaderHeightChange}>
+                {header}
+            </TitanLayoutHeaderObserved>
             {children}
-        </div>
+        </Fragment>
+    );
+};
+
+const LayoutContentAnvil1: FC<{
+    children: ReactNode;
+    header?: ReactNode;
+    minWidth?: number;
+}> = ({ children, header, minWidth }) => {
+    const innerContentStyles: CSSProperties = useMemo(
+        () => ({
+            ...(minWidth ? { minWidth: `${minWidth}px` } : {}),
+        }),
+        [minWidth]
+    );
+
+    return (
+        <Fragment>
+            <TitanLayoutHeader>{header}</TitanLayoutHeader>
+            <div
+                className={classNames(Styles.content, { 'of-x-auto': !!minWidth })}
+                data-cy="layout-content"
+            >
+                <div
+                    className="position-relative d-f flex-grow-1 flex-basis-0 of-hidden"
+                    style={innerContentStyles}
+                >
+                    {children}
+                </div>
+            </div>
+        </Fragment>
+    );
+};
+
+const LayoutContentLegacy: FC<{
+    children: ReactNode;
+    header?: ReactNode;
+    minWidth: number | undefined;
+}> = ({ children, header, minWidth }) => {
+    const innerContentStyles: CSSProperties = useMemo(
+        () => ({
+            position: 'relative',
+            minWidth: `${minWidth}px`,
+        }),
+        [minWidth]
+    );
+
+    return (
+        <Fragment>
+            <TitanLayoutHeader>{header}</TitanLayoutHeader>
+
+            {minWidth ? (
+                <div className="of-x-auto flex-basis-0 flex-grow-1">
+                    <div style={innerContentStyles}>{children}</div>
+                </div>
+            ) : (
+                children
+            )}
+        </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 }) => {

package/src/utils/use-breakpoint.ts

@@ -4,6 +4,7 @@ import { useMemo } from 'react';
 export interface TitanBreakpoint {
     name: BreakpointReturnProps['name'];
     isMobile: boolean;
+    width: number;
 }
 
 export const useTitanBreakpoint = (): TitanBreakpoint => {
@@ -13,6 +14,7 @@ export const useTitanBreakpoint = (): TitanBreakpoint => {
         () => ({
             name: breakpoint?.name ?? 'xl',
             isMobile: breakpoint ? breakpoint.innerWidth <= 768 : false,
+            width: breakpoint?.innerWidth ?? 0,
         }),
         [breakpoint]
     );