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

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

@@ -156,7 +156,9 @@ export const InternalSideNavigationLink: FC<InternalSideNavigationLinkProps> = (
 
 /** Side Navigation menu trigger (for internal usage) */
 export const InternalSideNavigationTrigger: FC<
-    Omit<InternalSideNavigationLinkProps, 'to' | 'navigationComponent'> & { onClick?: () => void }
+    Omit<InternalSideNavigationLinkProps, 'to' | 'navigationComponent'> & {
+        onClick?: (e: MouseEvent<never>) => void;
+    }
 > = ({ className, dataPrefix, isActive, submenuExpanded, onExpandToggle, onClick, ...props }) => {
     return (
         <div
@@ -180,12 +182,22 @@ export const InternalSideNavigationTrigger: FC<
 
 export const InternalSideNavigationGroupLink: FC<
     NavigationSubmenuItemData & NavigationComponentProps
-> = ({ id, counter, tag, title, to, isActive, navigationComponent: NavigationComponent }) => {
+> = ({
+    id,
+    counter,
+    tag,
+    title,
+    to,
+    isActive,
+    navigationComponent: NavigationComponent,
+    ...rest
+}) => {
     return (
         <NavigationComponent
+            key={id}
             data-cy={`navigation-item-${id}`}
             data-pendo={`navigation-item-${id}`}
-            key={id}
+            {...rest}
             to={to}
             className={classNames(Styles.submenuItem, Styles.submenuLink, {
                 [Styles.submenuLinkActive]: isActive === true,
@@ -201,12 +213,13 @@ export const InternalSideNavigationGroupLink: FC<
 
 export const InternalSideNavigationGroupTrigger: FC<
     Omit<NavigationSubmenuItemData, 'to'> & { onClick?: (e: MouseEvent<any>) => void }
-> = ({ id, counter, onClick, tag, title, isActive }) => {
+> = ({ id, counter, onClick, tag, title, isActive, ...rest }) => {
     return (
         <div
             data-cy={`navigation-item-${id}`}
             data-pendo={`navigation-item-${id}`}
             key={id}
+            {...rest}
             className={classNames(Styles.submenuItem, {
                 [Styles.submenuLink]: !!onClick,
                 [Styles.submenuLinkActive]: isActive === true,
@@ -231,7 +244,7 @@ export const InternalSideNavigationGroup: FC<
             onExpandToggle?: (e: MouseEvent<never>) => void;
             tag: BadgeTagProps | undefined;
             to: NavigationItemData['to'] | undefined;
-            onClick?: () => void;
+            onClick?: (e: MouseEvent<never>) => void;
         }
 > = ({ children, submenuExpanded, to, onExpandToggle, onClick, ...props }) => {
     return (

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

@@ -6,6 +6,7 @@ import {
     InternalSideNavigationLink,
     InternalSideNavigationTrigger,
 } from './layout-sidebar-links-internal';
+import { useNotificationsContext } from './notifications-context';
 
 const WrappedLink: FC<{
     children: ReactElement<any>;
@@ -21,6 +22,10 @@ export function TitanLayoutSidebarLink({ wrapper, ...props }: TitanLayoutSidebar
         NavigationComponent,
         breakpoint: { isMobile },
     } = useTitanLayoutContext();
+    const { onNotificationsUpdate } = useNotificationsContext();
+    const tag = getCounterTag(props.counter, props.tag);
+
+    onNotificationsUpdate(props.id, !!tag);
 
     const element = (
         <InternalSideNavigationLink
@@ -28,7 +33,7 @@ export function TitanLayoutSidebarLink({ wrapper, ...props }: TitanLayoutSidebar
             navigationComponent={NavigationComponent}
             submenuExpanded={undefined}
             dataPrefix="navigation-link"
-            tag={getCounterTag(props.counter, props.tag)}
+            tag={tag}
         />
     );
 
@@ -45,15 +50,23 @@ export function TitanLayoutSidebarTrigger({
     const {
         breakpoint: { isMobile },
     } = useTitanLayoutContext();
+    const { onNotificationsUpdate } = useNotificationsContext();
+    const tag = getCounterTag(props.counter, props.tag);
+
+    onNotificationsUpdate(props.id, !!tag);
 
     const element = (
         <InternalSideNavigationTrigger
             {...props}
             submenuExpanded={undefined}
             dataPrefix="navigation-trigger"
-            tag={getCounterTag(props.counter, props.tag)}
+            tag={tag}
             onClick={isMobile && !!onMobileClick ? onMobileClick : onClick}
         />
     );
-    return wrapper && !isMobile ? <WrappedLink wrapper={wrapper}>{element}</WrappedLink> : element;
+    return wrapper && (!isMobile || !onMobileClick) ? (
+        <WrappedLink wrapper={wrapper}>{element}</WrappedLink>
+    ) : (
+        element
+    );
 }

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

@@ -17,15 +17,20 @@
 
 // mobile version
 .nav-drawer {
-    display: none;
+    // display: none;
     position: fixed;
     max-width: 400px;
     width: 0;
+    height: 100vh;
     top: 0;
-    bottom: 0;
-    left: 0;
+    left: -100vh;
     z-index: 991;
 
+    -webkit-transition: width 200ms ease-in-out;
+    -moz-transition: width 200ms ease-in-out;
+    -o-transition: width 200ms ease-in-out;
+    transition: width 200ms ease-in-out;
+
     .nav-main {
         padding-left: @spacing-2;
         padding-right: @spacing-2;
@@ -39,6 +44,7 @@
             padding-top: @spacing-2;
             padding-left: @spacing-2;
             padding-right: @spacing-2;
+            cursor: pointer;
         }
     }
 
@@ -61,10 +67,21 @@
     }
 }
 
+.nav-drawer-backdrop {
+    position: fixed;
+    height: 100vh;
+    width: 100vw;
+    top: 0;
+    left: 0;
+    z-index: 991;
+    background-color: rgba(0, 0, 0, 0.5);
+}
+
 // mobile version opened
 .nav-drawer-opened {
     display: flex;
     width: 90vw;
+    left: 0;
 }
 
 @media only screen and (min-width: 361px) {
@@ -142,6 +159,11 @@
 .nav-wide {
     width: var(--nav-offset-left);
 
+    .nav-item {
+        margin-left: @spacing-1;
+        margin-right: @spacing-1;
+    }
+
     .toggle {
         .toggle-content {
             margin: @spacing-2;
@@ -171,8 +193,6 @@
 .nav-wide {
     .nav-item {
         flex-direction: row;
-        margin-left: @spacing-1;
-        margin-right: @spacing-1;
 
         .nav-item-icon-wrapper {
             flex: 1;

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

@@ -5,6 +5,7 @@ export const navBottom: string;
 export const navClose: string;
 export const navCloseWrapper: string;
 export const navDrawer: string;
+export const navDrawerBackdrop: string;
 export const navDrawerOpened: string;
 export const navFooter: string;
 export const navGroupItem: string;

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 ? drawerOpened : barExpanded}
                                     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

@@ -13,7 +13,7 @@
     margin-top: var(--nav-offset-top);
 
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
 
     .side {
         flex-basis: var(--nav-offset-left);
@@ -31,39 +31,45 @@
 }
 
 .layout-anvil2 {
-    .header {
+    .content-header {
         position: sticky;
         top: var(--nav-offset-top);
         z-index: 989;
     }
 }
 
-.layout-legacy,
-.layout-anvil2 {
+.layout-desktop {
     padding-left: var(--nav-offset-left);
 
-    .top-placeholder {
-        height: var(--nav-offset-top);
+    .side {
+        position: fixed;
+        top: var(--nav-offset-top);
+        bottom: 0;
+        left: 0;
+        right: 0;
+        z-index: @z-index-global-nav;
     }
+}
 
-    &.layout-desktop {
-        .side {
-            position: fixed;
-            top: var(--nav-offset-top);
-            bottom: 0;
-            left: 0;
-            right: 0;
-            z-index: @z-index-global-nav;
-        }
+.layout-legacy,
+.layout-anvil2 {
+    .top-placeholder {
+        height: var(--nav-offset-top);
     }
 }
 
 .layout {
-    --nav-offset-top: 49px;
+    --nav-offset-top: 0px;
+    --nav-offset-left: 0px;
+    --content-offset-top: var(--nav-offset-top);
+    --offset: var(--content-offset-top);
+
+    &.layout-desktop.layout-top {
+        --nav-offset-top: 48px;
+    }
 
-    &.layout-mobile {
-        --nav-offset-top: 61px;
-        --nav-offset-left: 0;
+    &.layout-mobile.layout-top {
+        --nav-offset-top: 72px;
     }
 
     &.layout-desktop.layout-nav-slim {
@@ -76,9 +82,27 @@
 
     .top {
         position: fixed;
+        width: 100vw;
         top: 0;
         left: 0;
-        right: 0;
         z-index: 991;
     }
+
+    .content-header {
+        position: sticky;
+        left: 0;
+        right: 0;
+    }
+}
+
+@media print {
+    .layout {
+        --nav-offset-left: 0px !important;
+        --nav-offset-right: 0px !important;
+
+        .side,
+        .top {
+            display: none !important;
+        }
+    }
 }

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

@@ -1,6 +1,6 @@
 export const __esModule: true;
 export const content: string;
-export const header: string;
+export const contentHeader: string;
 export const layout: string;
 export const layoutAnvil1: string;
 export const layoutAnvil2: string;
@@ -9,6 +9,7 @@ export const layoutLegacy: string;
 export const layoutMobile: string;
 export const layoutNavSlim: string;
 export const layoutNavWide: string;
+export const layoutTop: string;
 export const side: string;
 export const top: string;
 export const topPlaceholder: string;

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>
@@ -71,6 +80,7 @@ const profile = (
             id="second"
             onClick={() => alert('second click')}
             tooltip="Second hint"
+            counter
         >
             second link
         </ProfileDropdown.Section>
@@ -176,7 +186,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 +198,7 @@ const useLayoutProps = (args: LayoutContentArgs): TitanLayoutProps => {
         onStateChange: setState,
 
         navigationComponent: NavLinkMock,
-        navigationMainItems: mainNavItems,
+        navigationMainItems: args.emptyNav ? [] : mainNavItems,
 
         profile,
         top: args.search ? <SearchBar /> : undefined,
@@ -196,15 +208,115 @@ 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" />
+            <div className="m-b-3">rendered - {new Date().toLocaleTimeString()}</div>
+            {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"
+                style={{ position: 'absolute', width: 'calc(100% - var(--nav-offset-left));' }}
+            >
+                <Content {...args} />
+            </div>
         </TitanLayout.Content>
     </TitanLayout>
 );
@@ -214,7 +326,7 @@ export const TitanLayoutAnvil1 = (args: LayoutContentArgs) => (
         <TitanLayout.Logo title />
         <TitanLayout.Content>
             <Anvil1Page>
-                <LocationInfo />
+                <Content {...args} />
             </Anvil1Page>
         </TitanLayout.Content>
     </TitanLayout>
@@ -226,7 +338,7 @@ export const TitanLayoutAnvil2 = (args: LayoutContentArgs) => (
         <TitanLayout.Content>
             <Anvil2Page>
                 <Anvil2Page.Content>
-                    <LocationInfo />
+                    <Content {...args} />
                 </Anvil2Page.Content>
             </Anvil2Page>
         </TitanLayout.Content>