@servicetitan/navigation 12.0.2 → 13.0.0-canary.256.299dd08.0

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

@@ -1,543 +0,0 @@
-import { Icon, Popover, Text, ThemeProvider } from '@servicetitan/anvil2';
-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 { Headline } from '@servicetitan/design-system';
-
-import classNames from 'classnames';
-import {
-    CSSProperties,
-    Children,
-    FC,
-    Fragment,
-    MouseEvent,
-    ReactElement,
-    isValidElement,
-    useCallback,
-    useContext,
-    useEffect,
-    useMemo,
-    useRef,
-    useState,
-} from 'react';
-import {
-    NavigationItemData,
-    NavigationLinkData,
-    NavigationSubmenuData,
-    NavigationSubmenuItemData,
-} from '../../utils/navigation';
-import {
-    NavLinkComponentProps,
-    NavigationActiveLinkMatcher,
-    NavigationComponentContext,
-    NavigationLocationContext,
-    NavigationLocationInfo,
-} from '../../utils/navigation-context';
-import { getCounterTag, getSubmenuGroupTag } from '../../utils/side-nav';
-import { BadgeTag } from '../badge-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';
-
-type OptionalChildren<T> =
-    | (ReactElement<T> | false | undefined | null)
-    | (ReactElement<T> | false | undefined | null)[];
-export interface SideNavigationProps {
-    /** container class name */
-    className?: string;
-    /** container id */
-    id?: string;
-    /** main navigation items */
-    items?: NavigationItemData[];
-    /** additional components */
-    children?: OptionalChildren<SideNavigationTopProps>;
-    /** is menu expanded */
-    expanded?: SideNavigationExpandedState;
-    /** show submenu in separate bar */
-    appearance?: 'v1' | 'v2';
-    /** expand change handler */
-    onExpandedChange?(expanded: SideNavigationExpandedState): void;
-}
-
-const defaultContext: SideNavigationContextType = {
-    styles: {
-        popoverContent: {
-            '--background-color-strong': '#24323C',
-            'color': 'var(--color-white)',
-        } as CSSProperties,
-    },
-};
-
-const useOutRef = (onOut: () => void) => {
-    const ref = useRef<HTMLDivElement>(null);
-
-    useEffect(() => {
-        const elem = ref.current;
-
-        if (elem) {
-            let timeout: ReturnType<typeof setTimeout> | undefined = undefined;
-            const onMouseLeave = () => {
-                timeout = setTimeout(onOut, 500);
-            };
-            const onMouseEnter = () => {
-                if (timeout) {
-                    clearTimeout(timeout);
-                    timeout = undefined;
-                }
-            };
-
-            elem.addEventListener('mouseleave', onMouseLeave);
-            elem.addEventListener('mouseenter', onMouseEnter);
-            return () => {
-                elem.removeEventListener('mouseleave', onMouseLeave);
-                elem.removeEventListener('mouseenter', onMouseEnter);
-            };
-        }
-    }, [onOut]);
-
-    return ref;
-};
-
-const isLinkActive = (
-    location: NavigationLocationInfo,
-    link: NavigationLinkData,
-    matcher: NavigationActiveLinkMatcher
-) => {
-    if (typeof link.isActive === 'boolean') {
-        return link.isActive;
-    }
-
-    if (typeof link.isActive === 'function') {
-        return link.isActive(location.pathname);
-    }
-
-    return matcher?.(location, link) ?? false;
-};
-
-function SideNavigationElement({
-    className,
-    children,
-    expanded,
-    id,
-    items,
-    appearance,
-    onExpandedChange,
-}: SideNavigationProps) {
-    const NavigationComponent = useContext(NavigationComponentContext);
-    const locationInfo = useContext(NavigationLocationContext);
-    const [submenuDrawerItemId, setSubmenuDrawerItemId] = useState<string>();
-    const isExperimental = appearance === 'v2';
-    const isExperimentalExpanded = isExperimental && !expanded?.collapsedBar;
-
-    const activeItem = useMemo(
-        () =>
-            items?.find(item =>
-                isLinkActive(locationInfo.location, item, locationInfo.isLinkActive)
-            ),
-        [locationInfo, items]
-    );
-    const activeId = activeItem?.id;
-
-    const submenu = useMemo(() => {
-        if (!isExperimental) {
-            return undefined;
-        }
-
-        if (isExperimentalExpanded) {
-            const item = activeId ? items?.find(item => item.id === activeId) : undefined;
-
-            return item?.submenu ? { item, bar: true, drawer: false } : undefined;
-        } else if (submenuDrawerItemId) {
-            const item = items?.find(item => item.id === submenuDrawerItemId);
-
-            return item?.submenu ? { item, bar: false, drawer: true } : undefined;
-        }
-
-        return undefined;
-    }, [activeId, items, isExperimental, isExperimentalExpanded, submenuDrawerItemId]);
-    const isExpanded = isExperimental ? isExperimentalExpanded && !!submenu : !!expanded?.bar;
-
-    useEffect(() => {
-        if (isExperimentalExpanded) {
-            setSubmenuDrawerItemId(undefined);
-        }
-    }, [isExperimentalExpanded]);
-
-    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]
-    );
-
-    const canActivateSubmenuBarDrawer = isExperimental && !!expanded?.collapsedBar;
-    const hideSubmenuBarDrawer = useCallback(() => {
-        setSubmenuDrawerItemId(undefined);
-    }, []);
-
-    const openSubmenuBarDrawer = (e: MouseEvent<HTMLDivElement>, item: NavigationItemData) => {
-        if (!isExperimental || !expanded?.collapsedBar) {
-            return;
-        }
-
-        if (item.submenu) {
-            setSubmenuDrawerItemId(item.id);
-
-            if (item.id === activeId) {
-                e.preventDefault();
-                e.stopPropagation();
-            }
-        }
-    };
-
-    const handleExpandedChange = useCallback(
-        (value: boolean) => {
-            onExpandedChange?.(
-                isExperimental ? { bar: false, collapsedBar: !value } : { bar: value }
-            );
-            setSubmenuDrawerItemId(undefined);
-        },
-        [isExperimental, onExpandedChange]
-    );
-
-    return (
-        <SideNavigationContext.Provider value={defaultContext}>
-            <div
-                className={classNames(
-                    Styles.sideNav,
-                    isExperimental ? Styles.sideNavV2 : Styles.sideNavV1,
-                    isExpanded ? Styles.sideNavExpanded : Styles.sideNavSlim,
-                    className
-                )}
-                id={id}
-                data-cy="side-navigation"
-            >
-                <ThemeProvider mode="dark" className={Styles.sideNavMain}>
-                    <div className={Styles.sideNavNavigation}>
-                        {isExperimental && !isExpanded && !!activeItem?.submenu && (
-                            <SideNavigationOptionsToggle
-                                appearance="expand"
-                                onExpandedChange={handleExpandedChange}
-                            />
-                        )}
-
-                        {childTop}
-                        <div className={Styles.sideNavContent} data-cy="navigation-items">
-                            {items?.map(item =>
-                                item.submenu && !isExperimental ? (
-                                    <SideNavigationGroupItem
-                                        key={item.id}
-                                        expanded={expanded}
-                                        isGroupActive={activeItem?.id === item.id}
-                                        onExpandedChange={onExpandedChange}
-                                        navigationComponent={NavigationComponent}
-                                        {...item}
-                                    />
-                                ) : (
-                                    <div
-                                        key={item.id}
-                                        onClickCapture={
-                                            canActivateSubmenuBarDrawer
-                                                ? item.submenu
-                                                    ? e => openSubmenuBarDrawer(e, item)
-                                                    : hideSubmenuBarDrawer
-                                                : undefined
-                                        }
-                                    >
-                                        <InternalSideNavigationLink
-                                            submenuExpanded={undefined}
-                                            navigationComponent={NavigationComponent}
-                                            {...item}
-                                            tag={getSubmenuGroupTag(
-                                                item.submenu,
-                                                getCounterTag(item.counter, item.tag)
-                                            )}
-                                        />
-                                    </div>
-                                )
-                            )}
-                        </div>
-                    </div>
-
-                    {!!submenu && (
-                        <SubmenuBar
-                            bar={submenu.bar}
-                            item={submenu.item}
-                            handleExpandedChange={handleExpandedChange}
-                            handleLeave={hideSubmenuBarDrawer}
-                            navigationComponent={NavigationComponent}
-                        />
-                    )}
-                </ThemeProvider>
-
-                {!isExperimental && (
-                    <div className={Styles.sideNavFooter}>
-                        <div className={Styles.divider} />
-                        <div className={Styles.sideNavBottom}>
-                            <SideNavigationOptionsToggle
-                                appearance={isExpanded ? 'collapse-button' : 'expand'}
-                                onExpandedChange={handleExpandedChange}
-                            />
-                        </div>
-                    </div>
-                )}
-            </div>
-        </SideNavigationContext.Provider>
-    );
-}
-
-const SubmenuBar: FC<{
-    item: NavigationItemData;
-    bar: boolean;
-    navigationComponent: FC<NavLinkComponentProps>;
-    handleExpandedChange(value: boolean): void;
-    handleLeave(): void;
-}> = ({
-    bar,
-    item,
-    navigationComponent: NavigationComponent,
-    handleExpandedChange,
-    handleLeave,
-}) => {
-    const outRef = useOutRef(handleLeave);
-
-    return (
-        <div className={bar ? Styles.sideNavSubmenuBar : Styles.sideNavSubmenuDrawer} ref={outRef}>
-            <div className="d-f justify-content-between align-items-center m-t-2 m-l-3">
-                <Headline size="small" className="c-white m-b-0-i">
-                    {item.title}
-                </Headline>
-
-                {bar && (
-                    <SideNavigationOptionsToggle
-                        appearance="collapse"
-                        onExpandedChange={handleExpandedChange}
-                    />
-                )}
-            </div>
-
-            <div className={Styles.submenuBar}>
-                <SideNavigationGroupContent
-                    groups={item.submenu?.groups ?? []}
-                    navigationComponent={NavigationComponent}
-                />
-            </div>
-        </div>
-    );
-};
-export interface SideNavigationTopProps {
-    children: OptionalChildren<SideNavigationLinkProps | SideNavigationTriggerProps>;
-}
-function SideNavigationTopElement({ children }: SideNavigationTopProps) {
-    const list = Children.map(children, child => {
-        return child && isValidElement(child) ? child : null;
-    });
-    return list?.length ? (
-        <Fragment>
-            <ThemeProvider mode="dark" className={Styles.sideNavTop} data-cy="navigation-items-top">
-                {list}
-            </ThemeProvider>
-            <div className={Styles.divider} />
-        </Fragment>
-    ) : null;
-}
-const SideNavigationTop: FC<SideNavigationTopProps> = SideNavigationTopElement;
-
-/** Side Navigation menu item */
-const SideNavigationGroupItem: FC<
-    NavigationItemData &
-        SideNavigationExpandedProps &
-        NavigationComponentProps & {
-            isGroupActive: boolean;
-            onExpandedChange: undefined | ((expanded: SideNavigationExpandedState) => void);
-        }
-> = ({ onExpandedChange, isGroupActive, ...props }) => {
-    const isSubmenuExpanded = !!props.id && props.expanded?.expandedSubmenu === props.id;
-    const onExpandToggle = useCallback(
-        (e: MouseEvent<never>) => {
-            e.preventDefault();
-            e.stopPropagation();
-
-            onExpandedChange?.({
-                bar: true,
-                expandedSubmenu: isSubmenuExpanded ? undefined : props.id,
-            });
-        },
-        [props.id, isSubmenuExpanded, onExpandedChange]
-    );
-
-    const tag = getSubmenuGroupTag(props.submenu, getCounterTag(props.counter, props.tag));
-    const context = useContext(SideNavigationContext);
-
-    return props.expanded?.bar ? (
-        <div className={classNames(Styles.navigationGroupWrapper)}>
-            <div className={Styles.navigationGroupItem}>
-                <InternalSideNavigationLink
-                    {...props}
-                    submenuExpanded={isSubmenuExpanded}
-                    onExpandToggle={onExpandToggle}
-                    tag={tag}
-                />
-            </div>
-            <div
-                className={classNames(Styles.submenuWrapper, {
-                    [Styles.submenuWrapperCollapsed]: !isSubmenuExpanded,
-                })}
-            >
-                <div className={Styles.submenu}>
-                    <SideNavigationGroupContent
-                        groups={props.submenu?.groups ?? []}
-                        navigationComponent={props.navigationComponent}
-                    />
-                </div>
-            </div>
-        </div>
-    ) : (
-        <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={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}
-                    </Headline>
-                    <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) => (
-                        <SideNavigationGroupLink
-                            key={`:${link.id}:${index}`}
-                            {...link}
-                            navigationComponent={navigationComponent}
-                        />
-                    ))
-                );
-                /* eslint-enable react/no-array-index-key */
-
-                return out;
-            }, [] as ReactElement[])}
-        </Fragment>
-    );
-};
-const SideNavigationGroupLink: FC<NavigationSubmenuItemData & NavigationComponentProps> = ({
-    id,
-    counter,
-    tag,
-    title,
-    to,
-    isActive,
-    navigationComponent: NavigationComponent,
-}) => {
-    return (
-        <NavigationComponent
-            data-cy={`navigation-item-${id}`}
-            data-pendo={`navigation-item-${id}`}
-            key={id}
-            to={to}
-            className={classNames(Styles.submenuLink, {
-                [Styles.submenuLinkActive]: isActive === true,
-            })}
-            isActive={typeof isActive === 'function' ? isActive : undefined}
-            activeClassName={Styles.submenuLinkActive}
-        >
-            <span>{title}</span>
-            <BadgeTag data={getCounterTag(counter, tag)} className={Styles.submenuLinkCounter} />
-        </NavigationComponent>
-    );
-};
-
-/** 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.optionsItem)}
-            onClick={() => onExpandedChange?.(appearance === 'expand')}
-        >
-            <div className={Styles.optionsItemContent}>
-                <div className={Styles.optionsIconWrapper}>
-                    <Icon
-                        className={Styles.optionsIcon}
-                        svg={appearance === 'expand' ? SvgExpand : SvgCollapse}
-                    />
-                </div>
-
-                {appearance === 'collapse-button' && (
-                    <span className={Styles.optionsItemText}>Collapse Menu</span>
-                )}
-            </div>
-        </div>,
-        appearance === 'expand'
-            ? 'Expand Menu'
-            : appearance === 'collapse'
-              ? 'Collapse Menu'
-              : undefined,
-        'right'
-    );
-
-export const SideNavigation = Object.assign(SideNavigationElement, {
-    Top: SideNavigationTop,
-});

package/src/components/left-navigation/with-tooltip.tsx

@@ -1,16 +0,0 @@
-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/components/links.tsx

@@ -1,54 +0,0 @@
-import { FC } from 'react';
-import {
-    HeaderNavigationLinkProps,
-    HeaderNavigationTriggerProps,
-} from '../utils/navigation-legacy';
-import {
-    HeaderNavigationLink as HeaderNavigationLinkLegacy,
-    HeaderNavigationTrigger as HeaderNavigationTriggerLegacy,
-} from './header-navigation/header-navigation-links';
-import { useTitanLayoutPlacementContext } from './titan-layout';
-import {
-    LayoutHeaderNavigationLink,
-    LayoutHeaderNavigationTrigger,
-} from './titan-layout/layout-header-links';
-import {
-    TitanLayoutSidebarLink,
-    TitanLayoutSidebarTrigger,
-} from './titan-layout/layout-sidebar-links';
-
-export const HeaderNavigationLink: FC<HeaderNavigationLinkProps> = props => {
-    const placement = useTitanLayoutPlacementContext();
-
-    return placement === 'top' ? (
-        <LayoutHeaderNavigationLink {...props} />
-    ) : placement === 'side' ? (
-        <TitanLayoutSidebarLink
-            id={props.id}
-            icon={props.icon}
-            iconActive={props.iconActive}
-            to={props.to}
-            title={props.title}
-            counter={props.counter}
-        />
-    ) : (
-        <HeaderNavigationLinkLegacy {...props} />
-    );
-};
-
-export const HeaderNavigationTrigger: FC<HeaderNavigationTriggerProps> = props => {
-    const placement = useTitanLayoutPlacementContext();
-
-    return placement === 'top' ? (
-        <LayoutHeaderNavigationTrigger {...props} />
-    ) : placement === 'side' ? (
-        <TitanLayoutSidebarTrigger
-            id={props.id}
-            title={props.title}
-            icon={props.icon}
-            iconActive={props.iconActive}
-        />
-    ) : (
-        <HeaderNavigationTriggerLegacy {...props} />
-    );
-};

package/src/components/profile-dropdown/profile-dropdown-tiny.stories.tsx

@@ -1,25 +0,0 @@
-import { withAnvil, withMemoryRouter } from '../../test/data';
-import { HeaderNavigationTiny } from '../left-navigation';
-import { ProfileDropdown } from './profile-dropdown';
-
-const withHeaderNavigationTiny = (Story: any) => (
-    <HeaderNavigationTiny className="border" right={<Story />} />
-);
-
-export default {
-    title: 'Navigation/ProfileDropdown/Tiny',
-    component: ProfileDropdown,
-    parameters: {},
-    decorators: [withMemoryRouter, withAnvil, withHeaderNavigationTiny],
-};
-
-export {
-    ProfileDropdownDefault,
-    ProfileDropdownWithBothBadges,
-    ProfileDropdownWithCounter,
-    ProfileDropdownWithErrorLogo,
-    ProfileDropdownWithInfo,
-    ProfileDropdownWithHintAndInfoPopup,
-    ProfileDropdownWithHintPopup,
-    ProfileDropdownWithLogo,
-} from './profile-dropdown.stories';

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

@@ -1,46 +0,0 @@
-import { ReactElement } from 'react';
-import { withAnvil, withDefaultRedirects, withMemoryRouter } from '../../test/data';
-import { ProfileDropdown } from './layout-profile';
-import { TitanLayout } from './titan-layout';
-
-const withTitanLayout = (element: ReactElement) => () => (
-    <TitanLayout navigationMainItems={[]} profile={element}>
-        profile
-    </TitanLayout>
-);
-
-export default {
-    title: 'Navigation/TitanLayoutProfile',
-    component: ProfileDropdown,
-    decorators: [withDefaultRedirects, withMemoryRouter, withAnvil],
-    parameters: {},
-};
-
-export const ProfileDefault = withTitanLayout(
-    <ProfileDropdown>
-        <ProfileDropdown.Link id="first" to="https://google.com" external>
-            first link
-        </ProfileDropdown.Link>
-        <ProfileDropdown.Section id="second" onClick={() => alert('second click')}>
-            second link
-        </ProfileDropdown.Section>
-        <ProfileDropdown.Divider />
-        <ProfileDropdown.Section id="content">some content</ProfileDropdown.Section>
-        <ProfileDropdown.Divider />
-        <ProfileDropdown.Divider />
-        <ProfileDropdown.Divider />
-        <ProfileDropdown.Link id="third" to="third">
-            third link
-        </ProfileDropdown.Link>
-        <ProfileDropdown.Divider />
-        <ProfileDropdown.Section
-            id="forth"
-            onClick={() => alert('forth click')}
-            text="Sign Out user"
-        >
-            Sign Out
-            <span className="c-neutral-60 m-l-1">user</span>
-        </ProfileDropdown.Section>
-        <ProfileDropdown.Divider />
-    </ProfileDropdown>
-);