@servicetitan/navigation 11.0.0-canary.237.c90556e.0 → 11.0.0-canary.237.dd4db7e.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,9 +6,10 @@ import {
     InternalSideNavigationLink,
     InternalSideNavigationTrigger,
 } from './layout-sidebar-links-internal';
+import { useNotificationsContext } from './notifications-context';
 
 const WrappedLink: FC<{
-    children: ReactElement;
+    children: ReactElement<any>;
     wrapper: NonNullable<TitanLayoutSidebarLinkProps['wrapper']>;
 }> = ({ children, wrapper: WrapperComponent }) => {
     const { sidebar } = useTitanLayoutContext();
@@ -17,7 +18,14 @@ const WrappedLink: FC<{
 
 /** Side Navigation menu link */
 export function TitanLayoutSidebarLink({ wrapper, ...props }: TitanLayoutSidebarLinkProps) {
-    const { NavigationComponent } = useTitanLayoutContext();
+    const {
+        NavigationComponent,
+        breakpoint: { isMobile },
+    } = useTitanLayoutContext();
+    const { onNotificationsUpdate } = useNotificationsContext();
+    const tag = getCounterTag(props.counter, props.tag);
+
+    onNotificationsUpdate(props.id, !!tag);
 
     const element = (
         <InternalSideNavigationLink
@@ -25,11 +33,11 @@ export function TitanLayoutSidebarLink({ wrapper, ...props }: TitanLayoutSidebar
             navigationComponent={NavigationComponent}
             submenuExpanded={undefined}
             dataPrefix="navigation-link"
-            tag={getCounterTag(props.counter, props.tag)}
+            tag={tag}
         />
     );
 
-    return wrapper ? <WrappedLink wrapper={wrapper}>{element}</WrappedLink> : element;
+    return wrapper && !isMobile ? <WrappedLink wrapper={wrapper}>{element}</WrappedLink> : element;
 }
 
 /** Side Navigation menu trigger */
@@ -42,13 +50,17 @@ 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}
         />
     );

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

@@ -15,32 +15,22 @@
     align-items: stretch;
 }
 
-// desktop version positioned with flex
-.nav-flex {
-    flex-basis: var(--nav-offset-left);
-    flex-grow: 0;
-    flex-shrink: 0;
-}
-
-// desktop version positioned with fixed
-.nav-fixed {
-    position: fixed;
-    top: var(--nav-offset-top);
-    bottom: 0;
-    left: 0;
-}
-
 // 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;
@@ -54,6 +44,7 @@
             padding-top: @spacing-2;
             padding-left: @spacing-2;
             padding-right: @spacing-2;
+            cursor: pointer;
         }
     }
 
@@ -76,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) {
@@ -156,7 +158,11 @@
 // desktop version expanded
 .nav-wide {
     width: var(--nav-offset-left);
-    padding-top: @spacing-2;
+
+    .nav-item {
+        margin-left: @spacing-1;
+        margin-right: @spacing-1;
+    }
 
     .toggle {
         .toggle-content {
@@ -177,14 +183,16 @@
         margin-top: @spacing-1;
         margin-bottom: @spacing-1;
     }
+
+    .nav-main {
+        padding-top: @spacing-1;
+    }
 }
 
 .nav-drawer,
 .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

@@ -0,0 +1,49 @@
+export const __esModule: true;
+export const divider: string;
+export const nav: string;
+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;
+export const navGroupWrapper: string;
+export const navIcon: string;
+export const navIconActive: string;
+export const navIconInactive: string;
+export const navItem: string;
+export const navItemActive: string;
+export const navItemCounter: string;
+export const navItemCounterLong: string;
+export const navItemGroupToggle: string;
+export const navItemGroupToggleClick: string;
+export const navItemGroupToggleWrapper: string;
+export const navItemIconSwitch: string;
+export const navItemIconWrapper: string;
+export const navItemTextCollapsed: string;
+export const navItemTextExpanded: string;
+export const navItemTextSmall: string;
+export const navLink: string;
+export const navMain: string;
+export const navSlim: string;
+export const navTop: string;
+export const navWide: string;
+export const submenu: string;
+export const submenuGroupHeader: string;
+export const submenuGroupHeaderEmpty: string;
+export const submenuItem: string;
+export const submenuLink: string;
+export const submenuLinkActive: string;
+export const submenuLinkCounter: string;
+export const submenuPopover: string;
+export const submenuWrapper: string;
+export const submenuWrapperCollapsed: string;
+export const toggle: string;
+export const toggleContent: string;
+export const toggleIcon: string;
+export const toggleIconWrapper: string;
+export const toggleText: string;
+export const toggleWrapper: string;
+

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

@@ -31,45 +31,51 @@ export interface LayoutSidebarProps {
     top?: ReactElement[];
     bottom?: ReactElement;
     mainItems?: NavigationItemData[];
-    flex: boolean;
     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;
 }
 
 export const LayoutSidebar: FC<LayoutSidebarProps> = ({
     className,
-    flex,
     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),
-                    !mobile && (flex ? Styles.navFlex : Styles.navFixed),
                     className
                 )}
                 data-cy="side-navigation"
-                onClick={handleClick}
+                onClick={closeDrawer}
             >
                 <ThemeProvider mode="dark" className={Styles.navMain}>
                     {mobile && (
@@ -82,14 +88,14 @@ export const LayoutSidebar: FC<LayoutSidebarProps> = ({
                             </div>
                         </div>
                     )}
-                    {top?.length && <SidebarTop>{top}</SidebarTop>}
+                    {!!top?.length && <SidebarTop>{top}</SidebarTop>}
 
                     <div data-cy="navigation-items">
                         {mainItems?.map(item =>
                             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

@@ -8,46 +8,100 @@
 @bg-color-hover: rgba(255, 255, 255, 0.08);
 @bg-color-active: rgba(120, 187, 250, 0.2);
 
-.layout-legacy {
-    padding-left: var(--nav-offset-left);
-}
-
 .layout-anvil1 {
-    display: block;
+    height: calc(100vh - var(--nav-offset-top));
+    margin-top: var(--nav-offset-top);
+
+    display: flex;
+    flex-direction: column;
+
+    .side {
+        flex-basis: var(--nav-offset-left);
+        flex-grow: 0;
+        flex-shrink: 0;
+    }
+
+    .content {
+        flex-grow: 1;
+
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+    }
 }
 
 .layout-anvil2 {
-    display: block;
+    .content-header {
+        position: sticky;
+        top: var(--nav-offset-top);
+        z-index: 989;
+    }
+}
+
+.layout-desktop {
+    padding-left: var(--nav-offset-left);
+
+    .side {
+        position: fixed;
+        top: var(--nav-offset-top);
+        bottom: 0;
+        left: 0;
+        right: 0;
+        z-index: @z-index-global-nav;
+    }
 }
 
 .layout-legacy,
 .layout-anvil2 {
+    overflow-x: auto;
     .top-placeholder {
         height: var(--nav-offset-top);
     }
+}
+
+.layout {
+    --nav-offset-top: 0;
+    --nav-offset-left: 0;
+
+    &.layout-desktop.layout-top {
+        --nav-offset-top: 48px;
+    }
+
+    &.layout-mobile.layout-top {
+        --nav-offset-top: 72px;
+    }
+
+    &.layout-desktop.layout-nav-slim {
+        --nav-offset-left: 64px;
+    }
+
+    &.layout-desktop.layout-nav-wide {
+        --nav-offset-left: 212px;
+    }
 
     .top {
         position: fixed;
+        width: 100vw;
         top: 0;
         left: 0;
-        right: 0;
         z-index: 991;
     }
-}
 
-.layout {
-    --nav-offset-top: 49px;
-
-    &.layout-mobile {
-        --nav-offset-top: 61px;
-        --nav-offset-left: 0;
+    .content-header {
+        position: sticky;
+        left: 0;
+        right: 0;
     }
+}
 
-    &.layout-nav-slim {
-        --nav-offset-left: 64px;
-    }
+@media print {
+    .layout {
+        --nav-offset-left: 0px !important;
+        --nav-offset-right: 0px !important;
 
-    &.layout-nav-wide {
-        --nav-offset-left: 212px;
+        .side,
+        .top {
+            display: none !important;
+        }
     }
 }

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

@@ -0,0 +1,16 @@
+export const __esModule: true;
+export const content: string;
+export const contentHeader: string;
+export const layout: string;
+export const layoutAnvil1: string;
+export const layoutAnvil2: string;
+export const layoutDesktop: string;
+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;
+