@servicetitan/navigation 9.0.1 → 9.2.0

package/src/components/left-navigation/side-navigation.tsx

@@ -1,6 +1,4 @@
 import { Icon, Popover, PopoverTriggerProps, Text } from '@servicetitan/anvil2';
-import SvgGroupCollapse from '@servicetitan/anvil2/assets/icons/material/round/expand_less.svg';
-import SvgGroupExpand from '@servicetitan/anvil2/assets/icons/material/round/expand_more.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 { Collapsible, Headline } from '@servicetitan/design-system';
@@ -8,29 +6,38 @@ import { Collapsible, Headline } from '@servicetitan/design-system';
 import classNames from 'classnames';
 import {
     CSSProperties,
+    Children,
     FC,
     Fragment,
     MouseEvent,
     ReactElement,
+    isValidElement,
     useCallback,
     useContext,
+    useMemo,
 } from 'react';
 import {
     HeaderNavigationItemData,
     HeaderNavigationItemSubmenu,
     HeaderNavigationItemSubmenuLink,
-    NavLinkComponentProps,
 } from '../../utils/navigation';
 import { NavigationComponentContext } from '../../utils/navigation-context';
+import { getSubmenuGroupTag } from '../../utils/side-nav';
 import { CounterTag } from '../counter-tag';
+import {
+    SideNavigationExpandedState,
+    SideNavigationLinkProps,
+    SideNavigationTriggerProps,
+} from './interface';
+import { NavigationComponentProps, SideNavigationExpandedProps } from './interface-internal';
+import { SideNavigationContext, SideNavigationContextType } from './side-navigation-context';
+import { InternalSideNavigationLink } from './side-navigation-links-internal';
 import * as Styles from './side-navigation.module.less';
 import { withTooltip } from './with-tooltip';
 
-export interface SideNavigationExpandedState {
-    bar: boolean;
-    submenus?: string[];
-}
-
+type OptionalChildren<T> =
+    | (ReactElement<T> | false | undefined | null)
+    | (ReactElement<T> | false | undefined | null)[];
 export interface SideNavigationProps {
     /** container class name */
     className?: string;
@@ -38,186 +45,128 @@ export interface SideNavigationProps {
     id?: string;
     /** main navigation items */
     items?: HeaderNavigationItemData[];
-    /** top navigation items */
-    itemsTop?: HeaderNavigationItemData[];
+    /** additional components */
+    children?: OptionalChildren<SideNavigationTopProps>;
     /** is menu expanded */
     expanded?: SideNavigationExpandedState;
     /** expand change handler */
     onExpandedChange?(expanded: SideNavigationExpandedState): void;
 }
 
-export const SideNavigation: FC<SideNavigationProps> = ({
+const defaultContext: SideNavigationContextType = {
+    styles: {
+        popoverContent: {
+            '--background-color-strong': '#24323C',
+            'color': 'var(--color-white)',
+        } as CSSProperties,
+    },
+};
+
+function SideNavigationElement({
     className,
+    children,
     expanded,
     id,
     items,
-    itemsTop,
     onExpandedChange,
-}) => {
+}: SideNavigationProps) {
     const NavigationComponent = useContext(NavigationComponentContext);
+
+    const { childTop } = useMemo(
+        () =>
+            Children.toArray(children).reduce(
+                (out, item) => {
+                    if (
+                        item &&
+                        isValidElement(item) &&
+                        item.type &&
+                        typeof item.type !== 'string' &&
+                        item.type.name === SideNavigationTop.name
+                    ) {
+                        out.childTop = item;
+                    }
+                    return out;
+                },
+                {} as { childTop?: ReactElement }
+            ),
+        [children]
+    );
     return (
-        <div
-            className={classNames(
-                Styles.sideNav,
-                expanded?.bar ? Styles.sideNavExpanded : Styles.sideNavSlim,
-                className
-            )}
-            id={id}
-            data-cy="side-navigation"
-        >
-            {!!itemsTop?.length && (
-                <Fragment>
-                    <div className={Styles.sideNavTop} data-cy="navigation-items-top">
-                        {itemsTop.map(item => (
-                            <SideNavigationItem
+        <SideNavigationContext.Provider value={defaultContext}>
+            <div
+                className={classNames(
+                    Styles.sideNav,
+                    expanded?.bar ? Styles.sideNavExpanded : Styles.sideNavSlim,
+                    className
+                )}
+                id={id}
+                data-cy="side-navigation"
+            >
+                {childTop}
+                <div className={Styles.sideNavContent} data-cy="navigation-items">
+                    {items?.map(item =>
+                        item.submenu ? (
+                            <SideNavigationGroupItem
                                 key={item.id}
                                 expanded={expanded}
+                                onExpandedChange={onExpandedChange}
                                 navigationComponent={NavigationComponent}
                                 {...item}
                             />
-                        ))}
-                    </div>
-                    <div className={Styles.divider} />
-                </Fragment>
-            )}
-            <div className={Styles.sideNavContent} data-cy="navigation-items">
-                {items?.map(item =>
-                    item.submenu ? (
-                        <SideNavigationGroupItem
-                            key={item.id}
-                            expanded={expanded}
-                            onExpandedChange={onExpandedChange}
-                            navigationComponent={NavigationComponent}
-                            {...item}
-                        />
-                    ) : (
-                        <SideNavigationItem
-                            key={item.id}
-                            expanded={expanded}
-                            navigationComponent={NavigationComponent}
-                            {...item}
-                        />
-                    )
-                )}
-            </div>
-            <div className={Styles.divider} />
-            <div className={Styles.sideNavBottom}>
-                <SideNavigationOptionsToggle
-                    expanded={expanded}
-                    onExpandedChange={onExpandedChange}
-                />
+                        ) : (
+                            <InternalSideNavigationLink
+                                key={item.id}
+                                submenuExpanded={undefined}
+                                navigationComponent={NavigationComponent}
+                                {...item}
+                            />
+                        )
+                    )}
+                </div>
+                <div className={Styles.divider} />
+                <div className={Styles.sideNavBottom}>
+                    <SideNavigationOptionsToggle
+                        expanded={expanded}
+                        onExpandedChange={onExpandedChange}
+                    />
+                </div>
             </div>
-        </div>
+        </SideNavigationContext.Provider>
     );
-};
-
-interface NavigationComponentProps {
-    navigationComponent: FC<NavLinkComponentProps>;
 }
 
-interface SideNavigationItemProps extends HeaderNavigationItemData, NavigationComponentProps {
-    expanded?: SideNavigationExpandedState;
+export interface SideNavigationTopProps {
+    children: OptionalChildren<SideNavigationLinkProps | SideNavigationTriggerProps>;
 }
-
-/** Side Navigation menu item */
-const SideNavigationItem: FC<SideNavigationItemProps> = ({
-    id,
-    to,
-    title,
-    className,
-    iconClassName,
-    iconComponent: IconComponent,
-    icon,
-    iconActive,
-    isActive,
-    navigationComponent: NavigationComponent,
-    tag,
-    expanded,
-    submenu,
-}) => {
-    const iconSwitch = !!icon && !!iconActive && !IconComponent;
-    const hasSubmenu = !!submenu;
-
-    return (
-        <NavigationComponent
-            data-cy={`navigation-item-${id}`}
-            data-pendo={`navigation-item-${id}`}
-            key={id}
-            to={to}
-            className={classNames(Styles.navigationItem, className, {
-                [Styles.navigationItemActive]: isActive === true,
-                [Styles.navigationItemIconSwitch]: iconSwitch,
-            })}
-            isActive={typeof isActive === 'function' ? isActive : undefined}
-            activeClassName={Styles.navigationItemActive}
-        >
-            <div className={Styles.navigationItemIconWrapper}>
-                {IconComponent ? (
-                    <i className={classNames(Styles.navigationIcon, iconClassName)}>
-                        <IconComponent />
-                    </i>
-                ) : (
-                    <Fragment>
-                        {icon && (
-                            <Icon
-                                svg={icon}
-                                className={classNames(
-                                    Styles.navigationIcon,
-                                    Styles.navigationIconInactive,
-                                    iconClassName
-                                )}
-                            />
-                        )}
-                        {iconActive && (
-                            <Icon
-                                svg={iconActive}
-                                className={classNames(
-                                    Styles.navigationIcon,
-                                    Styles.navigationIconActive,
-                                    iconClassName
-                                )}
-                            />
-                        )}
-                    </Fragment>
-                )}
-
-                {!!expanded?.bar && <div className={Styles.navigationItemText}>{title}</div>}
-                {!!tag && <CounterTag data={tag} className={Styles.navigationItemCounter} />}
-                {hasSubmenu && !!expanded?.bar && (
-                    <Icon
-                        svg={expanded?.submenus?.includes(id) ? SvgGroupCollapse : SvgGroupExpand}
-                        className={Styles.navigationItemGroupToggle}
-                    />
-                )}
+function SideNavigationTopElement({ children }: SideNavigationTopProps) {
+    const list = Children.map(children, child => {
+        return child && isValidElement(child) ? child : null;
+    });
+    return list?.length ? (
+        <Fragment>
+            <div className={Styles.sideNavTop} data-cy="navigation-items-top">
+                {list}
             </div>
-
-            {!expanded?.bar && (
-                <div
-                    className={classNames(Styles.navigationItemText, {
-                        [Styles.navigationItemTextSmall]: title.length >= 10,
-                    })}
-                >
-                    {title}
-                </div>
-            )}
-        </NavigationComponent>
-    );
-};
-
-const submenuPopoverStyles = { '--background-color-strong': '#24323C' } as CSSProperties;
+            <div className={Styles.divider} />
+        </Fragment>
+    ) : null;
+}
+const SideNavigationTop: FC<SideNavigationTopProps> = SideNavigationTopElement;
 
 /** Side Navigation menu item */
 const SideNavigationGroupItem: FC<
-    SideNavigationItemProps & {
-        onExpandedChange: undefined | ((expanded: SideNavigationExpandedState) => void);
-    }
+    HeaderNavigationItemData &
+        SideNavigationExpandedProps &
+        NavigationComponentProps & {
+            onExpandedChange: undefined | ((expanded: SideNavigationExpandedState) => void);
+        }
 > = ({ onExpandedChange, ...props }) => {
+    const isSubmenuExpanded = props.expanded?.submenus?.includes(props.id) ?? false;
     const triggerClick = useCallback(
         (e: MouseEvent<HTMLDivElement>) => {
             e.stopPropagation();
             e.preventDefault();
 
-            const isSubmenuExpanded = props.expanded?.submenus?.includes(props.id);
             onExpandedChange?.({
                 bar: !!props.expanded?.bar,
                 submenus: [
@@ -226,17 +175,20 @@ const SideNavigationGroupItem: FC<
                 ],
             });
         },
-        [props.id, props.expanded, onExpandedChange]
+        [props.id, props.expanded, isSubmenuExpanded, onExpandedChange]
     );
 
-    const tag = props.submenu?.groups.some(group => group.links.some(link => !!link.tag))
-        ? true
-        : props.tag;
+    const tag = getSubmenuGroupTag(props.submenu, props.tag);
+    const context = useContext(SideNavigationContext);
 
     return props.expanded?.bar ? (
         <Fragment>
             <div onClickCapture={triggerClick}>
-                <SideNavigationItem {...props} tag={tag} />
+                <InternalSideNavigationLink
+                    {...props}
+                    submenuExpanded={isSubmenuExpanded}
+                    tag={tag}
+                />
             </div>
             <Collapsible open={props.expanded?.submenus?.includes(props.id)} animate>
                 <div className={Styles.submenu}>
@@ -252,11 +204,15 @@ const SideNavigationGroupItem: FC<
             <Popover.Trigger>
                 {(triggerProps: PopoverTriggerProps) => (
                     <div {...triggerProps}>
-                        <SideNavigationItem {...props} tag={tag} />
+                        <InternalSideNavigationLink
+                            {...props}
+                            submenuExpanded={undefined}
+                            tag={tag}
+                        />
                     </div>
                 )}
             </Popover.Trigger>
-            <Popover.Content style={submenuPopoverStyles} className="z-global-nav-i">
+            <Popover.Content style={context.styles.popoverContent} className="z-global-nav-i">
                 <div className={Styles.submenuPopover}>
                     <Headline size="small" className="c-white m-b-half-i m-t-1">
                         {props.title}
@@ -329,7 +285,7 @@ const SideNavigationGroupLink: FC<HeaderNavigationItemSubmenuLink & NavigationCo
 };
 
 /** Side Navigation options toggle */
-export const SideNavigationOptionsToggle: FC<{
+const SideNavigationOptionsToggle: FC<{
     expanded?: SideNavigationExpandedState;
     onExpandedChange?(expanded: SideNavigationExpandedState): void;
 }> = ({ expanded, onExpandedChange }) =>
@@ -351,3 +307,7 @@ export const SideNavigationOptionsToggle: FC<{
         expanded?.bar ? undefined : 'Expand Menu',
         'right'
     );
+
+export const SideNavigation = Object.assign(SideNavigationElement, {
+    Top: SideNavigationTop,
+});

package/src/utils/counter-tag.ts

@@ -0,0 +1,11 @@
+import { CounterTagProps } from '../components/counter-tag';
+
+export interface CounterTagPropsStrict {
+    value: number | boolean;
+    className?: string;
+}
+
+export type CounterTagType = boolean | number | CounterTagProps;
+
+export const isCounterPropsObject = (tag?: CounterTagType): tag is CounterTagProps =>
+    !!tag && (tag as any).value !== undefined;

package/src/utils/side-nav.ts

@@ -0,0 +1,34 @@
+import { isCounterPropsObject } from './counter-tag';
+import { HeaderNavigationItemData, HeaderNavigationItemSubmenu } from './navigation';
+
+export function getSubmenuGroupTag(
+    submenu: HeaderNavigationItemSubmenu | undefined,
+    defaultTag: HeaderNavigationItemData['tag']
+): HeaderNavigationItemData['tag'] {
+    if (!submenu) {
+        return defaultTag;
+    }
+
+    let tagValue: number | boolean | undefined = undefined;
+
+    for (const group of submenu.groups) {
+        for (const link of group.links) {
+            const ltv: number | boolean | undefined = isCounterPropsObject(link.tag)
+                ? link.tag.value
+                : link.tag;
+
+            if (ltv) {
+                if (typeof ltv === 'number') {
+                    if (typeof tagValue !== 'number') {
+                        tagValue = 0;
+                    }
+                    tagValue += ltv;
+                } else if (typeof tagValue !== 'number') {
+                    tagValue = true;
+                }
+            }
+        }
+    }
+
+    return tagValue ?? defaultTag;
+}