@servicetitan/navigation 9.2.1 → 10.0.0

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

@@ -17,12 +17,12 @@ import {
     useMemo,
 } from 'react';
 import {
-    HeaderNavigationItemData,
-    HeaderNavigationItemSubmenu,
-    HeaderNavigationItemSubmenuLink,
+    NavigationItemData,
+    NavigationSubmenuData,
+    NavigationSubmenuItemData,
 } from '../../utils/navigation';
 import { NavigationComponentContext } from '../../utils/navigation-context';
-import { getSubmenuGroupTag } from '../../utils/side-nav';
+import { getCounterTag, getSubmenuGroupTag } from '../../utils/side-nav';
 import { CounterTag } from '../counter-tag';
 import {
     SideNavigationExpandedState,
@@ -44,7 +44,7 @@ export interface SideNavigationProps {
     /** container id */
     id?: string;
     /** main navigation items */
-    items?: HeaderNavigationItemData[];
+    items?: NavigationItemData[];
     /** additional components */
     children?: OptionalChildren<SideNavigationTopProps>;
     /** is menu expanded */
@@ -119,6 +119,7 @@ function SideNavigationElement({
                                 submenuExpanded={undefined}
                                 navigationComponent={NavigationComponent}
                                 {...item}
+                                tag={getCounterTag(item.counter, item.tag)}
                             />
                         )
                     )}
@@ -155,7 +156,7 @@ const SideNavigationTop: FC<SideNavigationTopProps> = SideNavigationTopElement;
 
 /** Side Navigation menu item */
 const SideNavigationGroupItem: FC<
-    HeaderNavigationItemData &
+    NavigationItemData &
         SideNavigationExpandedProps &
         NavigationComponentProps & {
             onExpandedChange: undefined | ((expanded: SideNavigationExpandedState) => void);
@@ -178,7 +179,7 @@ const SideNavigationGroupItem: FC<
         [props.id, props.expanded, isSubmenuExpanded, onExpandedChange]
     );
 
-    const tag = getSubmenuGroupTag(props.submenu, props.tag);
+    const tag = getSubmenuGroupTag(props.submenu, getCounterTag(props.counter, props.tag));
     const context = useContext(SideNavigationContext);
 
     return props.expanded?.bar ? (
@@ -226,7 +227,7 @@ const SideNavigationGroupItem: FC<
         </Popover>
     );
 };
-const SideNavigationGroupContent: FC<HeaderNavigationItemSubmenu & NavigationComponentProps> = ({
+const SideNavigationGroupContent: FC<NavigationSubmenuData & NavigationComponentProps> = ({
     groups,
     navigationComponent,
 }) => {
@@ -258,8 +259,9 @@ const SideNavigationGroupContent: FC<HeaderNavigationItemSubmenu & NavigationCom
         </Fragment>
     );
 };
-const SideNavigationGroupLink: FC<HeaderNavigationItemSubmenuLink & NavigationComponentProps> = ({
+const SideNavigationGroupLink: FC<NavigationSubmenuItemData & NavigationComponentProps> = ({
     id,
+    counter,
     tag,
     title,
     to,
@@ -279,7 +281,7 @@ const SideNavigationGroupLink: FC<HeaderNavigationItemSubmenuLink & NavigationCo
             activeClassName={Styles.submenuLinkActive}
         >
             <span>{title}</span>
-            {!!tag && <CounterTag data={tag} className={Styles.submenuLinkCounter} />}
+            <CounterTag data={getCounterTag(counter, tag)} className={Styles.submenuLinkCounter} />
         </NavigationComponent>
     );
 };

package/src/components/links.tsx

@@ -1,6 +1,9 @@
 import { FC, useContext } from 'react';
-import { HeaderNavigationLinkProps, HeaderNavigationTriggerProps } from '../utils/navigation';
 import { NavigationLegacyContext } from '../utils/navigation-context';
+import {
+    HeaderNavigationLinkProps,
+    HeaderNavigationTriggerProps,
+} from '../utils/navigation-legacy';
 import {
     HeaderNavigationLink as HeaderNavigationLinkLegacy,
     HeaderNavigationTrigger as HeaderNavigationTriggerLegacy,

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

@@ -112,11 +112,14 @@ export const ProfileDropdownWithHintPopup = () => (
         onOpen={() => log('open profile dropdown')}
         onClose={() => log('close profile dropdown')}
     >
-        <ProfileDropdown.Link id="first" to="https://google.com">
+        <ProfileDropdown.Link id="first" to="https://google.com" counter={12}>
             first item
         </ProfileDropdown.Link>
         <ProfileDropdown.Divider />
         <ProfileDropdown.Section id="second">second item</ProfileDropdown.Section>
+        <ProfileDropdown.Link id="third" to="https://google.com" tag={{ value: 1 }}>
+            third item
+        </ProfileDropdown.Link>
     </ProfileDropdown>
 );
 

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

@@ -18,11 +18,13 @@ import {
     useState,
 } from 'react';
 
+import { CounterTagData, CounterTagValue } from '../../utils/counter-tag';
 import {
     NavigationComponentContext,
     NavigationLegacyContext,
 } from '../../utils/navigation-context';
-import { CounterTag, CounterTagPropsType } from '../counter-tag';
+import { getCounterTag } from '../../utils/side-nav';
+import { CounterTag } from '../counter-tag';
 import * as Styles from './profile-dropdown.module.less';
 import { ProfileLogo } from './profile-icon';
 
@@ -192,7 +194,8 @@ export interface ProfileDropdownLinkPropsStrict {
     external?: boolean;
     target?: HTMLAttributeAnchorTarget;
     to?: string;
-    tag?: CounterTagPropsType;
+    tag?: CounterTagData;
+    counter?: CounterTagValue;
     onClick?: () => void;
 }
 
@@ -205,6 +208,7 @@ export const ProfileDropdownLink: FC<ProfileDropdownLinkProps> = ({
     className,
     external,
     id,
+    counter,
     tag,
     target,
     to,
@@ -220,7 +224,10 @@ export const ProfileDropdownLink: FC<ProfileDropdownLinkProps> = ({
 
     const isExternalLink = external ?? to?.startsWith('http');
 
-    const tagElement = useMemo(() => <CounterTag data={tag} className={Styles.counter} />, [tag]);
+    const tagElement = useMemo(
+        () => <CounterTag data={getCounterTag(counter, tag)} className={Styles.counter} />,
+        [counter, tag]
+    );
 
     return isExternalLink ? (
         <a

package/src/index.ts

@@ -7,4 +7,9 @@ export * from './components/counter-tag';
 export * from './components/left-navigation';
 export * from './components/links';
 export * from './utils/navigation';
-export { NavigationComponentContext } from './utils/navigation-context';
+export {
+    NavigationComponentContext,
+    NavLinkComponentPropsStrict,
+    NavLinkComponentProps,
+} from './utils/navigation-context';
+export * from './utils/navigation-legacy';

package/src/test/data.tsx

@@ -38,13 +38,9 @@ import { Fragment, forwardRef, useState } from 'react';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { MemoryRouter, Redirect, Switch, useHistory, useLocation } from 'react-router-dom';
 import { HeaderNavigationTrigger } from '../components/links';
-import {
-    HeaderNavigationItemData,
-    HeaderNavigationItemSubmenuGroup,
-    HeaderNavigationItemSubmenuLink,
-    NavLinkComponentProps,
-} from '../utils/navigation';
-import { NavigationComponentContext } from '../utils/navigation-context';
+import { NavigationSubmenuGroupData, NavigationSubmenuItemData } from '../utils/navigation';
+import { NavLinkComponentProps, NavigationComponentContext } from '../utils/navigation-context';
+import { HeaderNavigationItemData } from '../utils/navigation-legacy';
 import * as Styles from './data-stories.module.less';
 
 export const NavLinkMock = forwardRef<any, NavLinkComponentProps>(
@@ -145,8 +141,8 @@ const getItem = (
 
 const getSubItem = (
     id: string,
-    data: Partial<HeaderNavigationItemSubmenuLink>
-): HeaderNavigationItemSubmenuLink => ({
+    data: Partial<NavigationSubmenuItemData>
+): NavigationSubmenuItemData => ({
     id,
     to: id,
     title: id[0].toUpperCase() + id.substring(1),
@@ -155,8 +151,8 @@ const getSubItem = (
 
 const getGroup = (
     title: string,
-    links: HeaderNavigationItemSubmenuLink[]
-): HeaderNavigationItemSubmenuGroup => ({
+    links: NavigationSubmenuItemData[]
+): NavigationSubmenuGroupData => ({
     title,
     links,
 });
@@ -176,7 +172,7 @@ export const items = {
         iconName: 'local_phone',
         icon: SvgCalls,
         iconActive: SvgCallsActive,
-        tag: 12,
+        counter: 12,
     }),
     dashboard: getItem('dashboard', {
         iconName: 'odometer',
@@ -187,7 +183,7 @@ export const items = {
         iconName: 'location_disabled',
         icon: SvgDispatch,
         iconActive: SvgDispatchActive,
-        tag: 1,
+        tag: { value: 3 },
     }),
     fleet: getItem('fleet', {
         iconName: 'fleet-pro',
@@ -241,7 +237,7 @@ export const items = {
         iconName: 'assignment',
         icon: SvgAccounting,
         iconActive: SvgAccountingActive,
-        tag: true,
+        counter: true,
     }),
     accountingWithSubmenu: getItem('accounting', {
         iconName: 'assignment',
@@ -251,9 +247,12 @@ export const items = {
             groups: [
                 getGroup('Accounts Receivable', [
                     getSubItem('ar', { title: 'AR Management' }),
-                    getSubItem('export', { title: 'Batch/Export Transactions', tag: true }),
-                    getSubItem('invoices', { title: 'Invoices', tag: 3 }),
-                    getSubItem('payments', { title: 'Customer Payments', tag: 2 }),
+                    getSubItem('export', {
+                        title: 'Batch/Export Transactions',
+                        counter: true,
+                    }),
+                    getSubItem('invoices', { title: 'Invoices', counter: 3 }),
+                    getSubItem('payments', { title: 'Customer Payments', counter: 2 }),
                     getSubItem('deposits', { title: 'Bank Deposits' }),
                 ]),
                 getGroup('Accounts Payable', [getSubItem('bills', { title: 'Bills' })]),
@@ -307,7 +306,7 @@ export const CallsNavigationTrigger = () => {
                 <HeaderNavigationTrigger
                     id="dialpad"
                     iconName="phone"
-                    tag={2}
+                    counter={2}
                     icon={SvgPhone}
                     iconActive={SvgPhoneActive}
                     onClick={() => setOpen(!open)}

package/src/utils/counter-tag.ts

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

package/src/utils/navigation-context.tsx

@@ -1,5 +1,18 @@
-import { FC, createContext } from 'react';
-import { NavLinkComponentProps } from './navigation';
+import { FC, HTMLAttributeAnchorTarget, ReactNode, createContext } from 'react';
+
+export interface NavLinkComponentPropsStrict {
+    to: string;
+    title?: string;
+    className?: string;
+    activeClassName?: string;
+    children: ReactNode;
+    isActive?: (pathname: string) => boolean;
+    target?: HTMLAttributeAnchorTarget;
+}
+
+export interface NavLinkComponentProps extends NavLinkComponentPropsStrict {
+    [key: string]: any;
+}
 
 export const DefaultNavLinkComponent: FC<NavLinkComponentProps> = ({
     children,

package/src/utils/navigation-legacy.ts

@@ -0,0 +1,104 @@
+import { IconProps } from '@servicetitan/anvil2';
+import { IconPropsStrict } from '@servicetitan/design-system';
+import { FC, HTMLAttributeAnchorTarget } from 'react';
+import { CounterTagData, CounterTagValue } from './counter-tag';
+import { NavigationSubmenuData } from './navigation';
+
+export interface HeaderNavigationItemData extends HeaderNavigationItemLinkProps {
+    /** link description */
+    hint: string;
+
+    /** flag if the link is not shown (based on FG and/or user permissions) */
+    isHidden?: boolean;
+
+    /** custom className (can be used for mdi icons) */
+    iconClassName?: string;
+
+    /** anvil's icon name of item */
+    iconName?: IconPropsStrict['name'];
+
+    /** svg icon (anvil2) of inactive item */
+    icon: IconProps['svg'] | undefined;
+
+    /** svg icon (anvil2) of active item */
+    iconActive: IconProps['svg'] | undefined;
+
+    /** icon component of item (<svg />) */
+    iconComponent?: FC;
+
+    /** item tag (optional). shown if it is set and true or greater than 0 */
+    counter?: CounterTagValue;
+    tag?: CounterTagData;
+
+    /** class name of link item */
+    className?: string;
+
+    /** optional submenu of link item */
+    submenu?: NavigationSubmenuData;
+}
+
+export interface HeaderNavigationItemLinkProps {
+    /** link id */
+    id: string;
+
+    /** link href */
+    to: string;
+
+    /** link title */
+    title: string;
+
+    /** callback to return active state. By default, it compares link href with current pathname */
+    isActive?: boolean | ((pathname: string) => boolean);
+}
+
+export interface HeaderNavigationTriggerPropsStrict {
+    /** unique identifier */
+    id: string;
+    /** tooltip text */
+    tooltip?: string;
+    /** item description */
+    hint?: string;
+    /** container class name */
+    className?: string;
+    /** item label */
+    label?: string;
+    /** label class name */
+    labelClassName?: string;
+    /** isActive */
+    isActive?: boolean;
+    /** counter value shown for item */
+    counter?: CounterTagValue;
+    tag?: CounterTagData;
+    /** counter component class name */
+    counterClassName?: string;
+    /** icon component class name */
+    iconClassName?: string;
+    /** IconComponent custom icon component */
+    iconComponent?: FC;
+    /** iconName name of anvil icon */
+    iconName?: IconPropsStrict['name'];
+    /** svg icon (anvil2) of inactive item */
+    icon: IconProps['svg'] | undefined;
+    /** svg icon (anvil2) of active item */
+    iconActive: IconProps['svg'] | undefined;
+}
+
+export interface HeaderNavigationTriggerProps extends HeaderNavigationTriggerPropsStrict {
+    /** unstrict props */
+    [key: string]: any;
+}
+
+export interface HeaderNavigationLinkPropsStrict
+    extends Omit<HeaderNavigationTriggerPropsStrict, 'isActive'> {
+    /** link href */
+    to: string;
+    /** isActive */
+    isActive?: boolean | ((pathname: string) => boolean);
+    /** link html target */
+    target?: HTMLAttributeAnchorTarget;
+}
+
+export interface HeaderNavigationLinkProps extends HeaderNavigationLinkPropsStrict {
+    /** unstrict props */
+    [key: string]: any;
+}

package/src/utils/navigation.ts

@@ -1,21 +1,14 @@
 import { IconProps } from '@servicetitan/anvil2';
-import { IconPropsStrict } from '@servicetitan/design-system';
-import { FC, HTMLAttributeAnchorTarget, ReactNode } from 'react';
-import { CounterTagPropsType } from '../components/counter-tag';
-
-export interface HeaderNavigationItemData extends HeaderNavigationItemLinkProps {
-    /** link description */
-    hint: string;
+import { FC } from 'react';
+import { CounterTagData, CounterTagValue } from './counter-tag';
 
+export interface NavigationItemData extends NavigationLinkData {
     /** flag if the link is not shown (based on FG and/or user permissions) */
     isHidden?: boolean;
 
     /** custom className (can be used for mdi icons) */
     iconClassName?: string;
 
-    /** anvil's icon name of item */
-    iconName?: IconPropsStrict['name'];
-
     /** svg icon (anvil2) of inactive item */
     icon: IconProps['svg'] | undefined;
 
@@ -26,16 +19,17 @@ export interface HeaderNavigationItemData extends HeaderNavigationItemLinkProps
     iconComponent?: FC;
 
     /** item tag (optional). shown if it is set and true or greater than 0 */
-    tag?: CounterTagPropsType;
+    counter?: CounterTagValue;
+    tag?: CounterTagData;
 
     /** class name of link item */
     className?: string;
 
     /** optional submenu of link item */
-    submenu?: HeaderNavigationItemSubmenu;
+    submenu?: NavigationSubmenuData;
 }
 
-export interface HeaderNavigationItemLinkProps {
+export interface NavigationLinkData {
     /** link id */
     id: string;
 
@@ -49,85 +43,21 @@ export interface HeaderNavigationItemLinkProps {
     isActive?: boolean | ((pathname: string) => boolean);
 }
 
-export interface HeaderNavigationItemSubmenu {
+export interface NavigationSubmenuData {
     /** submenu groups */
-    groups: HeaderNavigationItemSubmenuGroup[];
+    groups: NavigationSubmenuGroupData[];
 }
 
-export interface HeaderNavigationItemSubmenuLink extends HeaderNavigationItemLinkProps {
-    /** item tag (optional). shown if it is set and true or greater than 0 */
-    tag?: CounterTagPropsType;
+export interface NavigationSubmenuItemData extends NavigationLinkData {
+    /** item tag (optional) value. shown if it is set and true or greater than 0 */
+    counter?: CounterTagValue;
+    tag?: CounterTagData;
 }
 
-export interface HeaderNavigationItemSubmenuGroup {
+export interface NavigationSubmenuGroupData {
     /** submenu group title */
     title: string;
 
     /** submenu group links */
-    links: HeaderNavigationItemSubmenuLink[];
-}
-
-export interface NavLinkComponentPropsStrict {
-    to: string;
-    title?: string;
-    className?: string;
-    activeClassName?: string;
-    children: ReactNode;
-    isActive?: (pathname: string) => boolean;
-    target?: HTMLAttributeAnchorTarget;
-}
-
-export interface NavLinkComponentProps extends NavLinkComponentPropsStrict {
-    [key: string]: any;
-}
-
-export interface HeaderNavigationTriggerPropsStrict {
-    /** unique identifier */
-    id: string;
-    /** tooltip text */
-    tooltip?: string;
-    /** item description */
-    hint?: string;
-    /** container class name */
-    className?: string;
-    /** item label */
-    label?: string;
-    /** label class name */
-    labelClassName?: string;
-    /** isActive */
-    isActive?: boolean;
-    /** counter tag shown for item */
-    tag?: CounterTagPropsType;
-    /** counter component class name */
-    counterClassName?: string;
-    /** icon component class name */
-    iconClassName?: string;
-    /** IconComponent custom icon component */
-    iconComponent?: FC;
-    /** iconName name of anvil icon */
-    iconName?: IconPropsStrict['name'];
-    /** svg icon (anvil2) of inactive item */
-    icon: IconProps['svg'] | undefined;
-    /** svg icon (anvil2) of active item */
-    iconActive: IconProps['svg'] | undefined;
-}
-
-export interface HeaderNavigationTriggerProps extends HeaderNavigationTriggerPropsStrict {
-    /** unstrict props */
-    [key: string]: any;
-}
-
-export interface HeaderNavigationLinkPropsStrict
-    extends Omit<HeaderNavigationTriggerPropsStrict, 'isActive'> {
-    /** link href */
-    to: string;
-    /** isActive */
-    isActive?: boolean | ((pathname: string) => boolean);
-    /** link html target */
-    target?: HTMLAttributeAnchorTarget;
-}
-
-export interface HeaderNavigationLinkProps extends HeaderNavigationLinkPropsStrict {
-    /** unstrict props */
-    [key: string]: any;
+    links: NavigationSubmenuItemData[];
 }

package/src/utils/side-nav.ts

@@ -1,10 +1,11 @@
-import { isCounterPropsObject } from './counter-tag';
-import { HeaderNavigationItemData, HeaderNavigationItemSubmenu } from './navigation';
+import { CounterTagProps } from '../components/counter-tag';
+import { CounterTagData, CounterTagValue } from './counter-tag';
+import { NavigationSubmenuData } from './navigation';
 
 export function getSubmenuGroupTag(
-    submenu: HeaderNavigationItemSubmenu | undefined,
-    defaultTag: HeaderNavigationItemData['tag']
-): HeaderNavigationItemData['tag'] {
+    submenu: NavigationSubmenuData | undefined,
+    defaultTag: CounterTagProps | undefined
+): CounterTagProps | undefined {
     if (!submenu) {
         return defaultTag;
     }
@@ -13,9 +14,7 @@ export function getSubmenuGroupTag(
 
     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;
+            const ltv: number | boolean | undefined = link.counter;
 
             if (ltv) {
                 if (typeof ltv === 'number') {
@@ -30,5 +29,14 @@ export function getSubmenuGroupTag(
         }
     }
 
-    return tagValue ?? defaultTag;
+    return tagValue ? getCounterTag(tagValue) : defaultTag;
 }
+
+export const getCounterTag = (
+    counter: CounterTagValue | undefined,
+    tag?: CounterTagData | undefined
+): CounterTagProps | undefined => {
+    const value = counter ?? tag?.value;
+
+    return value ? { value, className: '' } : undefined;
+};