@servicetitan/navigation 10.7.0 → 11.0.0-canary.237.4d902dc.0

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

@@ -0,0 +1,270 @@
+import classNames from 'classnames';
+import {
+    CSSProperties,
+    Children,
+    ComponentPropsWithoutRef,
+    FC,
+    Fragment,
+    ReactElement,
+    ReactNode,
+    isValidElement,
+    useCallback,
+    useEffect,
+    useMemo,
+    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 * as Styles from './titan-layout.module.less';
+
+type TitanLayoutChild = ReactElement<TitanLayoutContentProps> | ReactElement<TitanLayoutLogoProps>;
+
+export type TitanLayoutProps = Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'style'> & {
+    empty?: boolean;
+
+    appearance?: 'legacy' | 'anvil1' | 'anvil2';
+
+    /** 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;
+
+    header?: ReactElement;
+    profile?: ReactElement;
+    extraLinks?: ReactElement;
+    extraLinksTop?: ReactElement;
+    extraText?: string;
+    sidebarTop?: ReactElement[];
+};
+
+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 || isAnvil1,
+        };
+    }, [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,
+    navigationComponent,
+    header,
+    profile,
+    state,
+    onStateChange,
+    navigationMainItems,
+    extraLinks,
+    extraLinksTop,
+    extraText,
+    sidebarTop,
+}) => {
+    const breakpoint = useTitanBreakpoint();
+    const isMobile = breakpoint.isMobile;
+    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);
+
+    useEffect(() => {
+        if (!isMobile) {
+            setMobileDrawerOpened(false);
+            return;
+        }
+
+        const listener = () => {
+            setMobileDrawerOpened(false);
+        };
+
+        document.addEventListener('click', listener);
+
+        return () => document.removeEventListener('click', listener);
+    }, [isMobile]);
+
+    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 [layoutStyles] = useState<object>({});
+
+    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
+                            : state?.navCollapsed
+                              ? Styles.layoutNavSlim
+                              : Styles.layoutNavWide,
+                        layoutClass
+                    )}
+                    style={layoutStyles}
+                >
+                    {variant.isSequent && <div className={Styles.topPlaceholder} />}
+                    <LayoutHeader
+                        className={Styles.top}
+                        logo={logo}
+                        profile={isMobile ? undefined : profile}
+                        center={header}
+                        rightText={isMobile ? undefined : extraText}
+                        right={
+                            <Fragment>
+                                {extraLinksTop}
+                                {!isMobile && extraLinks}
+                            </Fragment>
+                        }
+                        onBurgerClick={onBurgerClick}
+                    />
+
+                    <LayoutSidebar
+                        flex={!variant.isSequent}
+                        mobile={breakpoint.isMobile}
+                        barExpanded={isMobile ? mobileDrawerOpened : !state?.navCollapsed}
+                        submenuExpanded={state?.submenuExpanded}
+                        onBarExpandChange={onBarExpandChange}
+                        onSubmenuExpandChange={onSubmenuExpandChange}
+                        top={sidebarTop}
+                        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
+                        }
+                    />
+
+                    {content}
+                </div>
+            </LayoutPlacementContext.Provider>
+        </LayoutContext.Provider>
+    );
+};
+
+export interface TitanLayoutContentProps {
+    children: ReactNode;
+}
+const TitanLayoutContent: FC<TitanLayoutContentProps> = ({ children }) => children;
+
+export const TitanLayout = Object.assign(TitanLayoutComponent, {
+    Content: TitanLayoutContent,
+    Logo: TitanLayoutLogo,
+    SidebarLink: TitanLayoutSidebarLink,
+    SidebarTrigger: 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

@@ -154,7 +154,7 @@ const getItem = (
     hint: id,
     icon: undefined,
     iconActive: undefined,
-    ...(data ?? {}),
+    ...data,
     submenu: data.submenu
         ? {
               ...data.submenu,
@@ -176,7 +176,7 @@ const getSubItem = (
     id,
     to: id,
     title: id[0].toUpperCase() + id.substring(1),
-    ...(data ?? {}),
+    ...data,
 });
 
 const getGroup = (
@@ -339,6 +339,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,19 @@
+import { BreakpointReturnProps, useBreakpoint } from '@servicetitan/anvil2';
+import { useMemo } from 'react';
+
+export interface TitanBreakpoint {
+    name: BreakpointReturnProps['name'];
+    isMobile: boolean;
+}
+
+export const useTitanBreakpoint = (): TitanBreakpoint => {
+    const breakpoint = useBreakpoint();
+
+    return useMemo(
+        () => ({
+            name: breakpoint?.name ?? 'xl',
+            isMobile: breakpoint ? breakpoint.innerWidth <= 768 : false,
+        }),
+        [breakpoint]
+    );
+};