@servicetitan/navigation 10.6.1 → 11.0.0-canary.237.0505ce7.0

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

@@ -0,0 +1,461 @@
+import classNames from 'classnames';
+import {
+    CSSProperties,
+    Children,
+    ComponentPropsWithoutRef,
+    FC,
+    Fragment,
+    ReactElement,
+    ReactNode,
+    isValidElement,
+    useCallback,
+    useEffect,
+    useMemo,
+    useRef,
+    useState,
+} from 'react';
+import { NavigationItemData } from '../../utils/navigation';
+import { DefaultNavLinkComponent, NavLinkComponentProps } from '../../utils/navigation-context';
+import { useTitanBreakpoint } from '../../utils/use-breakpoint';
+import { TitanLayoutState } from './interface';
+import {
+    LayoutContext,
+    LayoutPlacementContext,
+    TitanLayoutContextType,
+    TitanLayoutSidebarContextType,
+} from './layout-context';
+import { LayoutHeader } from './layout-header';
+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'> & {
+    /** 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[];
+
+    state?: TitanLayoutState;
+    onStateChange?: (state: TitanLayoutState) => void;
+
+    header?: ReactElement;
+    top?: ReactElement;
+    sideTop?: ReactElement[];
+    profile?: ReactElement;
+    extraLinks?: ReactElement;
+    extraLinksTop?: ReactElement;
+    extraText?: string;
+    minContentWidth?: number;
+};
+
+const defaultSidebarContext: TitanLayoutSidebarContextType = {
+    styles: {
+        popoverContent: {
+            '--background-color-strong': '#24323C',
+            'color': 'var(--color-white)',
+        } as CSSProperties,
+    },
+};
+
+const useVariant = (appearance: TitanLayoutProps['appearance']) =>
+    useMemo(() => {
+        const isLegacy = appearance === 'legacy';
+        const isAnvil1 = appearance === 'anvil1';
+        const isAnvil2 = appearance === 'anvil2';
+
+        return {
+            isLegacy,
+            isAnvil1,
+            isAnvil2,
+            isSequent: isLegacy || isAnvil2,
+        };
+    }, [appearance]);
+
+const useLayoutChildren = (children: TitanLayoutProps['children']) =>
+    useMemo(
+        () =>
+            Children.toArray(children).reduce(
+                (out, item) => {
+                    if (
+                        item &&
+                        isValidElement(item) &&
+                        item.type &&
+                        typeof item.type !== 'string'
+                    ) {
+                        if (item.type.name === TitanLayoutContent.name) {
+                            out.content = item as any;
+                        } else if (item.type.name === TitanLayoutLogo.name) {
+                            out.logo = item as any;
+                        }
+                    }
+                    return out;
+                },
+                {
+                    logo: <TitanLayoutLogo />,
+                } as {
+                    content?: ReactElement<TitanLayoutContentProps>;
+                    logo: ReactElement<TitanLayoutLogoProps>;
+                }
+            ),
+        [children]
+    );
+
+const TitanLayoutComponent: FC<TitanLayoutProps> = ({
+    appearance = 'anvil2',
+    id,
+    children,
+    contentOnly,
+    navigationComponent,
+    header,
+    top,
+    profile,
+    state,
+    onStateChange,
+    navigationMainItems,
+    extraLinks,
+    extraLinksTop,
+    extraText,
+    minContentWidth,
+    sideTop,
+}) => {
+    const breakpoint = useTitanBreakpoint();
+    const context: TitanLayoutContextType = useMemo(
+        () => ({
+            NavigationComponent: navigationComponent ?? DefaultNavLinkComponent,
+            breakpoint,
+            isTitanLayout: true,
+            sidebar: defaultSidebarContext,
+        }),
+        [navigationComponent, breakpoint]
+    );
+    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 (variant.isAnvil1) {
+            const bodyClassName = 'of-hidden-i';
+            document.body.classList.add(bodyClassName);
+            return () => document.body.classList.remove(bodyClassName);
+        }
+    }, [variant.isAnvil1]);
+
+    const onBurgerClick = useCallback((e: MouseEvent) => {
+        setMobileDrawerOpened(true);
+        e.stopPropagation();
+    }, []);
+
+    const onBarExpandChange = useCallback(
+        (expanded: boolean) => {
+            if (isMobile) {
+                setMobileDrawerOpened(false);
+            } else {
+                onStateChange?.({ navCollapsed: !expanded });
+            }
+        },
+        [onStateChange, isMobile]
+    );
+    const onSubmenuExpandChange = useCallback(
+        (id: string, expanded: boolean) => {
+            onStateChange?.({
+                navCollapsed: state?.navCollapsed ?? false,
+                submenuExpanded: expanded ? id : undefined,
+            });
+        },
+        [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
+        : variant.isAnvil1
+          ? Styles.layoutAnvil1
+          : Styles.layoutAnvil2;
+
+    return (
+        <LayoutContext.Provider value={context}>
+            <LayoutPlacementContext.Provider value="unset">
+                <div
+                    id={id}
+                    className={classNames(
+                        Styles.layout,
+                        isMobile ? Styles.layoutMobile : Styles.layoutDesktop,
+                        {
+                            [Styles.layoutTop]: hasTopBar,
+                            [Styles.layoutNavSlim]: !isMobile && hasSideBar && state?.navCollapsed,
+                            [Styles.layoutNavWide]: !isMobile && hasSideBar && !state?.navCollapsed,
+                        },
+                        layoutClass
+                    )}
+                    style={contentStyles}
+                >
+                    {variant.isSequent && <div className={Styles.topPlaceholder} />}
+                    {hasTopBar && (
+                        <LayoutHeader
+                            className={Styles.top}
+                            logo={logo}
+                            profile={isMobile ? undefined : profile}
+                            center={top}
+                            rightText={isMobile ? undefined : extraText}
+                            right={
+                                <Fragment>
+                                    {extraLinksTop}
+                                    {!isMobile && extraLinks}
+                                </Fragment>
+                            }
+                            isMobile={isMobile}
+                            hasNotifications={hasNotifications || hasMenuNotifications}
+                            onBurgerClick={onBurgerClick}
+                        />
+                    )}
+
+                    {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>
+    );
+};
+
+const TitanLayoutHeaderObserved: FC<{
+    children: ReactNode;
+    heightChange?(value: number): void;
+}> = ({ children, heightChange }) => {
+    const ref = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        if (ref.current) {
+            const updatePosition = () => {
+                if (ref.current && heightChange) {
+                    const pos = ref.current.getBoundingClientRect();
+                    heightChange(pos.height);
+                }
+            };
+
+            const observer = new ResizeObserver(updatePosition);
+            observer.observe(ref.current);
+
+            updatePosition();
+            return () => observer.disconnect();
+        }
+    }, [heightChange]);
+
+    useEffect(() => {
+        return () => {
+            heightChange?.(0);
+        };
+    }, [heightChange]);
+    return (
+        <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>
+    );
+};
+
+export interface TitanLayoutContentProps {
+    children: ReactNode;
+}
+const TitanLayoutContent: FC<TitanLayoutContentProps> = ({ children }) => children;
+
+const LayoutContentAnvil2: FC<{
+    children: ReactNode;
+    header?: ReactNode;
+    onHeaderHeightChange?: (height: number) => void;
+}> = ({ children, header, onHeaderHeightChange }) => {
+    return (
+        <Fragment>
+            <TitanLayoutHeaderObserved heightChange={onHeaderHeightChange}>
+                {header}
+            </TitanLayoutHeaderObserved>
+            {children}
+        </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>
+    );
+};
+
+export const TitanLayout = Object.assign(TitanLayoutComponent, {
+    Content: TitanLayoutContent,
+    Logo: TitanLayoutLogo,
+    Link: TitanLayoutSidebarLink,
+    Trigger: TitanLayoutSidebarTrigger,
+});

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

@@ -0,0 +1,16 @@
+import { Tooltip, TooltipProps } from '@servicetitan/anvil2';
+import { ReactElement } from 'react';
+
+export const withTooltip = (
+    element: ReactElement,
+    tooltip: string | undefined,
+    placement: TooltipProps['placement'] = 'bottom'
+) =>
+    tooltip ? (
+        <Tooltip placement={placement}>
+            <Tooltip.Content>{tooltip}</Tooltip.Content>
+            <Tooltip.Trigger>{element}</Tooltip.Trigger>
+        </Tooltip>
+    ) : (
+        element
+    );

package/src/index.ts

@@ -1,10 +1,10 @@
 export * from './components/header-navigation';
-export * from './components/profile-dropdown/profile-dropdown';
 export * from './components/logo/logo-company-title';
 export * from './components/logo/logo-titan';
 export * from './components/logo/logo-titan-text';
 export * from './components/counter-tag';
 export * from './components/left-navigation';
+export * from './components/titan-layout';
 export * from './components/links';
 export * from './utils/navigation';
 export {
@@ -17,3 +17,4 @@ export {
     NavigationActiveLinkMatcher,
 } from './utils/navigation-context';
 export * from './utils/navigation-legacy';
+export * from './utils/use-breakpoint';

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 }) => {
@@ -154,7 +153,7 @@ const getItem = (
     hint: id,
     icon: undefined,
     iconActive: undefined,
-    ...(data ?? {}),
+    ...data,
     submenu: data.submenu
         ? {
               ...data.submenu,
@@ -176,7 +175,7 @@ const getSubItem = (
     id,
     to: id,
     title: id[0].toUpperCase() + id.substring(1),
-    ...(data ?? {}),
+    ...data,
 });
 
 const getGroup = (
@@ -339,6 +338,7 @@ export const CallsNavigationTrigger = () => {
                     id="dialpad"
                     iconName="phone"
                     counter={2}
+                    title="Calls"
                     icon={SvgPhone}
                     iconActive={SvgPhoneActive}
                     onClick={() => setOpen(!open)}

package/src/utils/navigation-legacy.ts

@@ -54,6 +54,8 @@ export interface HeaderNavigationItemLinkProps {
 export interface HeaderNavigationTriggerPropsStrict {
     /** unique identifier */
     id: string;
+    /** item title (used for mobile) */
+    title: string;
     /** tooltip text */
     tooltip?: string;
     /** item description */
@@ -80,7 +82,7 @@ export interface HeaderNavigationTriggerPropsStrict {
     /** svg icon (anvil2) of inactive item */
     icon: IconProps['svg'] | undefined;
     /** svg icon (anvil2) of active item */
-    iconActive: IconProps['svg'] | undefined;
+    iconActive?: IconProps['svg'];
 }
 
 export interface HeaderNavigationTriggerProps extends HeaderNavigationTriggerPropsStrict {

package/src/utils/use-breakpoint.ts

@@ -0,0 +1,21 @@
+import { BreakpointReturnProps, useBreakpoint } from '@servicetitan/anvil2';
+import { useMemo } from 'react';
+
+export interface TitanBreakpoint {
+    name: BreakpointReturnProps['name'];
+    isMobile: boolean;
+    width: number;
+}
+
+export const useTitanBreakpoint = (): TitanBreakpoint => {
+    const breakpoint = useBreakpoint();
+
+    return useMemo(
+        () => ({
+            name: breakpoint?.name ?? 'xl',
+            isMobile: breakpoint ? breakpoint.innerWidth < 768 : false,
+            width: breakpoint?.innerWidth ?? 0,
+        }),
+        [breakpoint]
+    );
+};