@servicetitan/navigation 9.2.1 → 10.0.1

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

@@ -4,15 +4,16 @@ import SvgGroupExpand from '@servicetitan/anvil2/assets/icons/material/round/exp
 
 import classNames from 'classnames';
 import { FC, Fragment } from 'react';
-import { HeaderNavigationItemData } from '../../utils/navigation';
-import { CounterTag } from '../counter-tag';
+import { NavigationItemData } from '../../utils/navigation';
+import { CounterTag, CounterTagProps } from '../counter-tag';
 import { SideNavigationTriggerProps } from './interface';
 import { NavigationComponentProps, SideNavigationExpandedProps } from './interface-internal';
 import * as Styles from './side-navigation.module.less';
 
 export interface InternalSideNavigationItemContentProps
-    extends Omit<HeaderNavigationItemData, 'iconName' | 'to' | ''> {
+    extends Omit<NavigationItemData, 'iconName' | 'to' | 'counter' | 'tag'> {
     submenuExpanded: boolean | undefined;
+    tag: CounterTagProps | undefined;
 }
 
 export const InternalSideNavigationItemContent: FC<InternalSideNavigationItemContentProps> = ({
@@ -76,11 +77,12 @@ export const InternalSideNavigationItemContent: FC<InternalSideNavigationItemCon
 );
 
 export interface InternalSideNavigationLinkProps
-    extends Omit<HeaderNavigationItemData, 'iconName'>,
+    extends Omit<NavigationItemData, 'iconName' | 'counter' | 'tag'>,
         NavigationComponentProps,
         SideNavigationExpandedProps {
     submenuExpanded: boolean | undefined;
     dataPrefix?: string;
+    tag: CounterTagProps | undefined;
 }
 
 export const internalNavigationContentContainerProps = ({
@@ -91,7 +93,7 @@ export const internalNavigationContentContainerProps = ({
     id,
     isActive,
     prefix,
-}: Omit<SideNavigationTriggerProps, 'isActive'> & { prefix: string; isActive?: any }) => ({
+}: Omit<SideNavigationTriggerProps, 'isActive' | 'tag'> & { prefix: string; isActive?: any }) => ({
     'data-cy': `${prefix}-${id}`,
     'data-pendo': `${prefix}-${id}`,
     'className': classNames(Styles.navigationItem, className, {

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

@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import { FC, ReactElement, useContext } from 'react';
 import { NavigationComponentContext } from '../../utils/navigation-context';
+import { getCounterTag } from '../../utils/side-nav';
 import { SideNavigationLinkProps, SideNavigationTriggerProps } from './interface';
 import { SideNavigationContext } from './side-navigation-context';
 import {
@@ -27,6 +28,7 @@ export function SideNavigationLink({ wrapper, ...props }: SideNavigationLinkProp
             navigationComponent={NavigationComponent}
             submenuExpanded={undefined}
             dataPrefix="navigation-link"
+            tag={getCounterTag(props.counter, props.tag)}
         />
     );
 
@@ -44,7 +46,11 @@ export function SideNavigationTrigger({ wrapper, ...props }: SideNavigationTrigg
                 isActive: props.isActive,
             })}
         >
-            <InternalSideNavigationItemContent submenuExpanded={undefined} {...props} />
+            <InternalSideNavigationItemContent
+                submenuExpanded={undefined}
+                {...props}
+                tag={getCounterTag(props.counter, props.tag)}
+            />
         </div>
     );
     return wrapper ? <WrappedLink wrapper={wrapper}>{element}</WrappedLink> : element;

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,
 }) => {
@@ -237,29 +238,35 @@ const SideNavigationGroupContent: FC<HeaderNavigationItemSubmenu & NavigationCom
                     return out;
                 }
 
-                const key = `:group:${index}:title`;
+                /* eslint-disable react/no-array-index-key */
                 out.push(
-                    <Text key={key} variant="eyebrow" className={Styles.submenuGroupHeader}>
+                    <Text
+                        key={`:group:${index}:title`}
+                        variant="eyebrow"
+                        className={Styles.submenuGroupHeader}
+                    >
                         {group.title}
                     </Text>
                 );
-
                 out.push(
-                    ...group.links.map(link => (
+                    ...group.links.map((link, index) => (
                         <SideNavigationGroupLink
-                            key={link.id}
+                            key={`:${link.id}:${index}`}
                             {...link}
                             navigationComponent={navigationComponent}
                         />
                     ))
                 );
+                /* eslint-enable react/no-array-index-key */
+
                 return out;
             }, [] as ReactElement[])}
         </Fragment>
     );
 };
-const SideNavigationGroupLink: FC<HeaderNavigationItemSubmenuLink & NavigationComponentProps> = ({
+const SideNavigationGroupLink: FC<NavigationSubmenuItemData & NavigationComponentProps> = ({
     id,
+    counter,
     tag,
     title,
     to,
@@ -279,7 +286,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[];
 }