@servicetitan/navigation 10.7.0 → 11.0.0-canary.237.0a4df1d.0

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

@@ -0,0 +1,304 @@
+import { Icon, Popover, Text, ThemeProvider } from '@servicetitan/anvil2';
+import SvgClose from '@servicetitan/anvil2/assets/icons/material/round/close.svg';
+import SvgCollapse from '@servicetitan/anvil2/assets/icons/st/gnav_menu_collapse.svg';
+import SvgExpand from '@servicetitan/anvil2/assets/icons/st/gnav_menu_expand.svg';
+import classNames from 'classnames';
+import {
+    Children,
+    FC,
+    Fragment,
+    MouseEvent,
+    ReactElement,
+    isValidElement,
+    useCallback,
+} from 'react';
+import { NavigationItemData, NavigationSubmenuData } from '../../utils/navigation';
+import { NavLinkComponentProps } from '../../utils/navigation-context';
+import { getCounterTag, getSubmenuGroupTag } from '../../utils/side-nav';
+import { NavigationComponentProps } from './interface-internal';
+import { LayoutPlacementContext, useTitanLayoutContext } from './layout-context';
+import {
+    InternalSideNavigationGroup,
+    InternalSideNavigationGroupLink,
+    InternalSideNavigationLink,
+} from './layout-sidebar-links-internal';
+import * as Styles from './layout-sidebar.module.less';
+
+import { withTooltip } from './with-tooltip';
+
+export interface LayoutSidebarProps {
+    className?: string;
+    top?: ReactElement[];
+    bottom?: ReactElement;
+    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;
+}
+
+export const LayoutSidebar: FC<LayoutSidebarProps> = ({
+    className,
+    mobile,
+    barExpanded,
+    submenuExpanded,
+    drawerOpened,
+    onBarExpandChange,
+    onSubmenuExpandChange,
+    onDrawerOpenChange,
+    mainItems,
+    top,
+    bottom,
+    navigationComponent,
+}) => {
+    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 && drawerOpened && Styles.navDrawerOpened,
+                    !mobile && (barExpanded ? Styles.navWide : Styles.navSlim),
+                    className
+                )}
+                data-cy="side-navigation"
+                onClick={closeDrawer}
+            >
+                <ThemeProvider mode="dark" className={Styles.navMain}>
+                    {mobile && (
+                        <div className={Styles.navCloseWrapper}>
+                            <div
+                                className={Styles.navClose}
+                                onClick={() => onBarExpandChange(false)}
+                            >
+                                <Icon svg={SvgClose} size="large" />
+                            </div>
+                        </div>
+                    )}
+                    {!!top?.length && <SidebarTop>{top}</SidebarTop>}
+
+                    <div data-cy="navigation-items">
+                        {mainItems?.map(item =>
+                            item.submenu ? (
+                                <SideNavigationGroupItem
+                                    key={item.id}
+                                    barExpanded={mobile ? drawerOpened : barExpanded}
+                                    submenuExpanded={!!item.id && submenuExpanded === item.id}
+                                    onSubmenuExpand={onSubmenuExpandChange}
+                                    navigationComponent={navigationComponent}
+                                    {...item}
+                                />
+                            ) : (
+                                <InternalSideNavigationLink
+                                    key={item.id}
+                                    submenuExpanded={undefined}
+                                    navigationComponent={navigationComponent}
+                                    {...item}
+                                    tag={getSubmenuGroupTag(
+                                        item.submenu,
+                                        getCounterTag(item.counter, item.tag)
+                                    )}
+                                />
+                            )
+                        )}
+                    </div>
+
+                    {!!bottom && <SidebarBottom>{bottom}</SidebarBottom>}
+                </ThemeProvider>
+
+                {!mobile && (
+                    <div className={Styles.navFooter}>
+                        <div className={Styles.divider} />
+                        <div className={Styles.toggleWrapper}>
+                            <SideNavigationOptionsToggle
+                                appearance={barExpanded ? 'collapse-button' : 'expand'}
+                                onExpandedChange={() => onBarExpandChange(!barExpanded)}
+                            />
+                        </div>
+                    </div>
+                )}
+            </div>
+        </LayoutPlacementContext.Provider>
+    );
+};
+LayoutSidebar.displayName = 'LayoutSidebar';
+
+/** Side Navigation options toggle */
+const SideNavigationOptionsToggle: FC<{
+    appearance: 'expand' | 'collapse' | 'collapse-button';
+    onExpandedChange?(expanded: boolean): void;
+}> = ({ appearance, onExpandedChange }) =>
+    withTooltip(
+        <div
+            data-cy="navigation-left-options"
+            data-pendo="navigation-left-options"
+            className={classNames(Styles.toggle)}
+            onClick={() => onExpandedChange?.(appearance === 'expand')}
+        >
+            <div className={Styles.toggleContent}>
+                <div className={Styles.toggleIconWrapper}>
+                    <Icon
+                        className={Styles.toggleIcon}
+                        svg={appearance === 'expand' ? SvgExpand : SvgCollapse}
+                    />
+                </div>
+
+                {appearance === 'collapse-button' && (
+                    <span className={Styles.toggleText}>Collapse Menu</span>
+                )}
+            </div>
+        </div>,
+        appearance === 'expand'
+            ? 'Expand Menu'
+            : appearance === 'collapse'
+              ? 'Collapse Menu'
+              : undefined,
+        'right'
+    );
+
+/** Side Navigation menu item */
+const SideNavigationGroupItem: FC<
+    NavigationItemData & {
+        navigationComponent: FC<NavLinkComponentProps>;
+        barExpanded: boolean;
+        submenuExpanded: boolean;
+        onSubmenuExpand: undefined | ((id: string, expanded: boolean) => void);
+    }
+> = ({ onSubmenuExpand, barExpanded, submenuExpanded, ...props }) => {
+    const onExpandToggle = useCallback(
+        (e: MouseEvent<never>) => {
+            e.preventDefault();
+            e.stopPropagation();
+
+            if (props.id) {
+                onSubmenuExpand?.(props.id, !submenuExpanded);
+            }
+        },
+        [props.id, submenuExpanded, onSubmenuExpand]
+    );
+    const {
+        sidebar: {
+            styles: { popoverContent },
+        },
+    } = useTitanLayoutContext();
+
+    const tag = getSubmenuGroupTag(props.submenu, getCounterTag(props.counter, props.tag));
+
+    return barExpanded ? (
+        <InternalSideNavigationGroup
+            {...props}
+            submenuExpanded={submenuExpanded}
+            onExpandToggle={onExpandToggle}
+            tag={tag}
+        >
+            <SideNavigationGroupContent
+                groups={props.submenu?.groups ?? []}
+                navigationComponent={props.navigationComponent}
+            />
+        </InternalSideNavigationGroup>
+    ) : (
+        <Popover placement="right-start" openOnHover delay={500}>
+            <Popover.Trigger>
+                {(triggerProps: any) => (
+                    <div {...triggerProps}>
+                        <InternalSideNavigationLink
+                            {...props}
+                            submenuExpanded={undefined}
+                            tag={tag}
+                        />
+                    </div>
+                )}
+            </Popover.Trigger>
+            <Popover.Content style={popoverContent} className="z-global-nav-i">
+                <div className={Styles.submenuPopover}>
+                    <Text
+                        variant="headline"
+                        el="h4"
+                        size="small"
+                        className="c-white m-b-half-i m-t-1"
+                    >
+                        {props.title}
+                    </Text>
+                    <SideNavigationGroupContent
+                        groups={props.submenu?.groups ?? []}
+                        navigationComponent={props.navigationComponent}
+                    />
+                </div>
+            </Popover.Content>
+        </Popover>
+    );
+};
+const SideNavigationGroupContent: FC<NavigationSubmenuData & NavigationComponentProps> = ({
+    groups,
+    navigationComponent,
+}) => {
+    return (
+        <Fragment>
+            {groups.reduce((out, group, index) => {
+                if (!group.links.length) {
+                    return out;
+                }
+
+                const title = group.title?.trim() ?? '';
+                /* eslint-disable react/no-array-index-key */
+                out.push(
+                    <Text
+                        key={`:group:${index}:title`}
+                        variant="eyebrow"
+                        className={classNames(Styles.submenuGroupHeader, {
+                            [Styles.submenuGroupHeaderEmpty]: !title,
+                        })}
+                    >
+                        {title}
+                    </Text>
+                );
+                out.push(
+                    ...group.links.map((link, index) => (
+                        <InternalSideNavigationGroupLink
+                            key={`:${link.id}:${index}`}
+                            {...link}
+                            navigationComponent={navigationComponent}
+                        />
+                    ))
+                );
+                /* eslint-enable react/no-array-index-key */
+
+                return out;
+            }, [] as ReactElement[])}
+        </Fragment>
+    );
+};
+
+function SidebarTop({ children }: any) {
+    const list = Children.map(children, child => {
+        return child && isValidElement(child) ? child : null;
+    });
+    return list?.length ? (
+        <ThemeProvider mode="dark" className={Styles.navTop} data-cy="navigation-items-top">
+            {list}
+            <div className={Styles.divider} />
+        </ThemeProvider>
+    ) : null;
+}
+
+function SidebarBottom({ children }: any) {
+    return (
+        <ThemeProvider mode="dark" className={Styles.navBottom} data-cy="navigation-items-bottom">
+            <div className={Styles.divider} />
+            {children}
+        </ThemeProvider>
+    );
+}

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

@@ -0,0 +1,106 @@
+/* stylelint-disable no-descending-specificity */
+@import (reference) '@servicetitan/tokens/core/tokens.less';
+
+@text-color: var(--colorsTextInverted, @color-white);
+@text-color-active: var(--colorsTextPrimarySubdued, @color-blue-300);
+@border-color: var(--colorsTextOnGrey, @color-neutral-200);
+@bg-color: #0f1d26;
+@bg-color-hover: rgba(255, 255, 255, 0.08);
+@bg-color-active: rgba(120, 187, 250, 0.2);
+
+.layout-anvil1 {
+    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 {
+    .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 {
+    .top-placeholder {
+        height: var(--nav-offset-top);
+    }
+}
+
+.layout {
+    --nav-offset-top: 0px;
+    --nav-offset-left: 0px;
+
+    &.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;
+        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

@@ -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;
+