@servicetitan/navigation 10.6.1 → 11.0.0-canary.237.0c461af.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/navigation",
-    "version": "10.6.1",
+    "version": "11.0.0-canary.237.0c461af.0",
     "description": "Navigation components",
     "repository": {
         "type": "git",
@@ -17,7 +17,7 @@
         "classnames": "~2.3.1"
     },
     "peerDependencies": {
-        "@servicetitan/anvil2": ">=1.34.0",
+        "@servicetitan/anvil2": ">=1.47.1",
         "@servicetitan/design-system": ">=14.0.0",
         "@servicetitan/react-ioc": ">=14.1.1",
         "@servicetitan/tokens": ">=12.0.0",
@@ -26,12 +26,11 @@
         "react": ">=18.0.0"
     },
     "devDependencies": {
-        "@servicetitan/anvil2": "~1.34.0",
+        "@servicetitan/anvil2": "~1.47.1",
         "@servicetitan/design-system": "~14.5.1",
-        "@servicetitan/react-ioc": "^30.2.1",
+        "@servicetitan/react-ioc": "^30.3.1",
         "@servicetitan/tokens": ">=12.1.11",
         "@testing-library/react": "^16.2.0",
-        "@types/react": "~18.2.55",
         "mobx": "~6.10.2",
         "mobx-react": "~9.0.2",
         "react": "~18.2.0"
@@ -43,5 +42,5 @@
         "less": true,
         "webpack": false
     },
-    "gitHead": "f6df976d1e3a1623afa66a8019f4a740bc51ed41"
+    "gitHead": "0c461af2db0a2263b60cdaaf440cee693e3d4097"
 }

package/src/components/header-navigation/header-navigation-extra.stories.tsx

@@ -23,6 +23,7 @@ export default {
 export const ExtraLink = () => (
     <HeaderNavigationLink
         id="search"
+        title="Search"
         to="https://google.com"
         target="_blank"
         iconName="search"
@@ -35,6 +36,7 @@ export const ExtraLink = () => (
 export const ExtraTrigger = () => (
     <HeaderNavigationTrigger
         id="dialpad"
+        title="Dialpad"
         iconName="phone"
         counter={2}
         tooltip="Phones pro"
@@ -47,6 +49,7 @@ export const ExtraWithTooltip = () => (
     <Fragment>
         <HeaderNavigationLink
             id="search"
+            title="Search"
             to="https://google.com"
             target="_blank"
             iconName="search"
@@ -58,6 +61,7 @@ export const ExtraWithTooltip = () => (
 
         <HeaderNavigationTrigger
             id="dialpad"
+            title="Dialpad"
             iconName="phone"
             hint="Dialpad"
             counter={2}
@@ -99,6 +103,7 @@ const HelpTrigger = () => {
     return (
         <HeaderNavigationTrigger
             id="help"
+            title="Help"
             iconName="help_outline"
             hint="Help"
             icon={SvgHelp}
@@ -113,6 +118,7 @@ export const ExtraWithLabel = () => (
     <Fragment>
         <HeaderNavigationLink
             id="search"
+            title="Search"
             to="https://google.com"
             target="_blank"
             iconName="search"
@@ -125,6 +131,7 @@ export const ExtraWithLabel = () => (
         <HelpTrigger />
         <HeaderNavigationTrigger
             id="dialpad"
+            title="Dialpad"
             iconName="phone"
             hint="Dialpad"
             tag={{ value: 2 }}

package/src/components/header-navigation/header-navigation-links.tsx

@@ -28,6 +28,7 @@ export const HeaderNavigationLink: FC<HeaderNavigationLinkProps> = ({
     labelClassName,
     tag,
     target,
+    title,
     ...rest
 }) => {
     const NavigationComponent = useContext(NavigationComponentContext);
@@ -76,6 +77,7 @@ export const HeaderNavigationTrigger: FC<HeaderNavigationTriggerProps> = ({
     hint,
     tag,
     tooltip,
+    title,
     ...rest
 }) => {
     return withTooltip(

package/src/components/header-navigation/header-navigation-stacked.stories.tsx

@@ -85,6 +85,7 @@ export const WithAllMonolithData = () => (
 
                 <HeaderNavigationLink
                     id="search"
+                    title="Search"
                     to="https://google.com"
                     target="_blank"
                     iconComponent={SearchIcon}
@@ -95,6 +96,7 @@ export const WithAllMonolithData = () => (
 
                 <HeaderNavigationTrigger
                     id="dialpad"
+                    title="Dialpad"
                     iconName="phone"
                     tag={{ value: 2 }}
                     icon={SvgIcon}
@@ -103,6 +105,7 @@ export const WithAllMonolithData = () => (
 
                 <HeaderNavigationTrigger
                     id="titanAdvisor"
+                    title="Titan Advisor"
                     iconName="rocket"
                     iconClassName={Styles.rocketIcon}
                     icon={SvgIcon}
@@ -111,6 +114,7 @@ export const WithAllMonolithData = () => (
 
                 <HeaderNavigationLink
                     id="settings"
+                    title="Settings"
                     to="https://google.com"
                     target="_blank"
                     iconName="settings"
@@ -126,7 +130,7 @@ export const WithAllMonolithData = () => (
                         Task Management
                     </ProfileDropdown.Link>
                     <ProfileDropdown.Divider />
-                    <ProfileDropdown.Link id="sign-out" to="https://googgle.com">
+                    <ProfileDropdown.Link id="sign-out" to="https://googgle.com" text="Sign Out">
                         Sign Out{' '}
                         <span className="c-neutral-100 m-l-half t-truncate">James Bond</span>
                     </ProfileDropdown.Link>

package/src/components/header-navigation/header-navigation.stories.tsx

@@ -64,6 +64,7 @@ const HelpCenterButton = () => {
             trigger={
                 <HeaderNavigationTrigger
                     id="help"
+                    title="Help"
                     iconName="help_outline"
                     onClick={() => setOpen(true)}
                     icon={SvgIcon}
@@ -107,6 +108,7 @@ export const WithAllMonolithData = () => (
 
         <HeaderNavigationTrigger
             id="dialpad"
+            title="Dialpad"
             iconName="phone"
             counter={2}
             icon={SvgIcon}
@@ -115,6 +117,7 @@ export const WithAllMonolithData = () => (
 
         <HeaderNavigationLink
             id="search"
+            title="Search"
             to="https://google.com"
             target="_blank"
             iconComponent={SearchIcon}
@@ -126,6 +129,7 @@ export const WithAllMonolithData = () => (
         <HelpCenterButton />
         <HeaderNavigationTrigger
             id="titanAdvisor"
+            title="Titan Advisor"
             iconName="rocket"
             iconClassName={Styles.rocketIcon}
             icon={SvgIcon}
@@ -134,6 +138,7 @@ export const WithAllMonolithData = () => (
 
         <HeaderNavigationLink
             id="settings"
+            title="Settings"
             to="https://google.com"
             target="_blank"
             iconName="settings"
@@ -149,7 +154,7 @@ export const WithAllMonolithData = () => (
                 Task Management
             </ProfileDropdown.Link>
             <ProfileDropdown.Divider />
-            <ProfileDropdown.Link id="sign-out" to="https://googgle.com">
+            <ProfileDropdown.Link id="sign-out" to="https://googgle.com" text="Sign Out">
                 Sign Out <span className="c-neutral-100 m-l-half t-truncate">James Bond</span>
             </ProfileDropdown.Link>
             <ProfileDropdown.Section id="userid" className="c-neutral-100 fs-1">

package/src/components/left-navigation/header-navigation-tiny.stories.tsx

@@ -54,6 +54,7 @@ export const WithAllMonolithData = () => (
 
                 <HeaderNavigationLink
                     id="search"
+                    title="Search"
                     to="https://google.com"
                     target="_blank"
                     iconComponent={SearchIcon}
@@ -67,6 +68,7 @@ export const WithAllMonolithData = () => (
 
                 <HeaderNavigationLink
                     id="titanAdvisor"
+                    title="Titan Advisor"
                     to="titanAdvisor"
                     iconName="rocket"
                     iconClassName={Styles.rocketIcon}
@@ -76,6 +78,7 @@ export const WithAllMonolithData = () => (
 
                 <HeaderNavigationLink
                     id="settings"
+                    title="Settings"
                     to="settings"
                     target="_blank"
                     iconName="settings"
@@ -90,7 +93,7 @@ export const WithAllMonolithData = () => (
                         Task Management
                     </ProfileDropdown.Link>
                     <ProfileDropdown.Divider />
-                    <ProfileDropdown.Link id="sign-out" to="https://googgle.com">
+                    <ProfileDropdown.Link id="sign-out" to="https://googgle.com" text="Sign Out">
                         Sign Out{' '}
                         <span className="c-neutral-100 m-l-half t-truncate">James Bond</span>
                     </ProfileDropdown.Link>
@@ -121,6 +124,7 @@ export const WithAllMonolithDataCommercial = () => (
 
                 <HeaderNavigationLink
                     id="search"
+                    title="Search"
                     to="https://google.com"
                     target="_blank"
                     iconComponent={SearchIcon}
@@ -133,6 +137,7 @@ export const WithAllMonolithDataCommercial = () => (
 
                 <HeaderNavigationLink
                     id="titanAdvisor"
+                    title="Titan Advisor"
                     to="titanAdvisor"
                     iconName="rocket"
                     iconClassName={Styles.rocketIcon}
@@ -142,6 +147,7 @@ export const WithAllMonolithDataCommercial = () => (
 
                 <HeaderNavigationLink
                     id="settings"
+                    title="Settings"
                     to="settings"
                     iconName="settings"
                     aria-label="search"
@@ -156,7 +162,7 @@ export const WithAllMonolithDataCommercial = () => (
                         Task Management
                     </ProfileDropdown.Link>
                     <ProfileDropdown.Divider />
-                    <ProfileDropdown.Link id="sign-out" to="https://googgle.com">
+                    <ProfileDropdown.Link id="sign-out" to="https://googgle.com" text="Sign Out">
                         Sign Out{' '}
                         <span className="c-neutral-100 m-l-half t-truncate">James Bond</span>
                     </ProfileDropdown.Link>

package/src/components/left-navigation/interface.ts

@@ -5,8 +5,8 @@ import { SideNavigationContextType } from './side-navigation-context';
 export interface SideNavigationExpandedState {
     // expanded bar (classic)
     bar: boolean;
-    // collapsed submenu item (classic)
-    collapsed?: string;
+    // expanded submenu item (classic)
+    expandedSubmenu?: string;
     // collapsed bar (experimental submenu bar)
     collapsedBar?: boolean;
 }

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

@@ -3,7 +3,7 @@ import SvgGroupCollapse from '@servicetitan/anvil2/assets/icons/material/round/e
 import SvgGroupExpand from '@servicetitan/anvil2/assets/icons/material/round/expand_more.svg';
 
 import classNames from 'classnames';
-import { FC, Fragment } from 'react';
+import { FC, Fragment, MouseEvent } from 'react';
 import { NavigationItemData } from '../../utils/navigation';
 import { BadgeTag, BadgeTagProps } from '../badge-tag';
 import { SideNavigationTriggerProps } from './interface';
@@ -14,6 +14,7 @@ export interface InternalSideNavigationItemContentProps
     extends Omit<NavigationItemData, 'iconName' | 'to' | 'counter' | 'tag'> {
     submenuExpanded: boolean | undefined;
     tag: BadgeTagProps | undefined;
+    onExpandToggle?: (e: MouseEvent<never>) => void;
 }
 
 export const InternalSideNavigationItemContent: FC<InternalSideNavigationItemContentProps> = ({
@@ -24,6 +25,7 @@ export const InternalSideNavigationItemContent: FC<InternalSideNavigationItemCon
     tag,
     title,
     submenuExpanded,
+    onExpandToggle,
 }) => (
     <Fragment>
         <div className={Styles.navigationItemIconWrapper}>
@@ -65,10 +67,17 @@ export const InternalSideNavigationItemContent: FC<InternalSideNavigationItemCon
                 />
             )}
             {typeof submenuExpanded === 'boolean' && (
-                <Icon
-                    svg={submenuExpanded ? SvgGroupCollapse : SvgGroupExpand}
-                    className={Styles.navigationItemGroupToggle}
-                />
+                <div className={Styles.navigationItemGroupToggleWrapper}>
+                    <Icon
+                        svg={submenuExpanded ? SvgGroupCollapse : SvgGroupExpand}
+                        className={Styles.navigationItemGroupToggle}
+                        onClick={onExpandToggle}
+                    />
+                    <div
+                        className={Styles.navigationItemGroupToggleClick}
+                        onClick={onExpandToggle}
+                    />
+                </div>
             )}
         </div>
 
@@ -89,6 +98,7 @@ export interface InternalSideNavigationLinkProps
     submenuExpanded: boolean | undefined;
     dataPrefix?: string;
     tag: BadgeTagProps | undefined;
+    onExpandToggle?: (e: MouseEvent<never>) => void;
 }
 
 export const internalNavigationContentContainerProps = ({
@@ -116,6 +126,7 @@ export const InternalSideNavigationLink: FC<InternalSideNavigationLinkProps> = (
     isActive,
     navigationComponent: NavigationComponent,
     submenuExpanded,
+    onExpandToggle,
     ...props
 }) => {
     return (
@@ -130,7 +141,11 @@ export const InternalSideNavigationLink: FC<InternalSideNavigationLinkProps> = (
             isActive={typeof isActive === 'function' ? isActive : undefined}
             activeClassName={Styles.navigationItemActive}
         >
-            <InternalSideNavigationItemContent submenuExpanded={submenuExpanded} {...props} />
+            <InternalSideNavigationItemContent
+                submenuExpanded={submenuExpanded}
+                onExpandToggle={onExpandToggle}
+                {...props}
+            />
         </NavigationComponent>
     );
 };

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

@@ -11,7 +11,7 @@ import {
 } from './side-navigation-links-internal';
 
 const WrappedLink: FC<{
-    children: ReactElement;
+    children: ReactElement<any>;
     wrapper: NonNullable<SideNavigationLinkProps['wrapper']>;
 }> = ({ children, wrapper: WrapperComponent }) => {
     return (

package/src/components/left-navigation/side-navigation.module.less

@@ -246,9 +246,24 @@
         min-height: 12px !important;
     }
 
-    .navigation-item-group-toggle[data-anv][data-anv] {
-        color: inherit;
-        font-weight: @font-weight-semibold;
+    .navigation-item-group-toggle-wrapper {
+        position: relative;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        .navigation-item-group-toggle[data-anv][data-anv] {
+            color: inherit;
+            font-weight: @font-weight-semibold;
+        }
+
+        .navigation-item-group-toggle-click {
+            position: absolute;
+            left: -@spacing-2;
+            right: -@spacing-half;
+            top: -@spacing-1;
+            bottom: -@spacing-1;
+        }
     }
 
     .navigation-icon[data-anv][data-anv] {
@@ -266,24 +281,11 @@
 .navigation-group-wrapper {
     .navigation-group-item {
         position: relative;
-
-        .navigation-group-item-collapse {
-            display: none;
-            position: absolute;
-            inset: 0;
-            cursor: pointer;
-        }
     }
 
-    &:has(.navigation-item-active) {
-        .navigation-group-item-collapse {
-            display: block;
-        }
-
-        .submenu-wrapper:not(.submenu-wrapper-collapsed) {
-            max-height: 2000px;
-            transition: max-height 0.7s ease-in-out;
-        }
+    .submenu-wrapper:not(.submenu-wrapper-collapsed) {
+        max-height: 2000px;
+        transition: max-height 0.7s ease-in-out;
     }
 }
 

package/src/components/left-navigation/side-navigation.module.less.d.ts

@@ -1,7 +1,6 @@
 export const __esModule: true;
 export const divider: string;
 export const navigationGroupItem: string;
-export const navigationGroupItemCollapse: string;
 export const navigationGroupWrapper: string;
 export const navigationIcon: string;
 export const navigationIconActive: string;
@@ -11,6 +10,8 @@ export const navigationItemActive: string;
 export const navigationItemCounter: string;
 export const navigationItemCounterLong: string;
 export const navigationItemGroupToggle: string;
+export const navigationItemGroupToggleClick: string;
+export const navigationItemGroupToggleWrapper: string;
 export const navigationItemIconSwitch: string;
 export const navigationItemIconWrapper: string;
 export const navigationItemTextCollapsed: string;

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

@@ -371,13 +371,20 @@ const SideNavigationGroupItem: FC<
             onExpandedChange: undefined | ((expanded: SideNavigationExpandedState) => void);
         }
 > = ({ onExpandedChange, isGroupActive, ...props }) => {
-    const isSubmenuExpanded = !!props.id && isGroupActive && props.expanded?.collapsed !== props.id;
-    const triggerClick = useCallback(() => {
-        onExpandedChange?.({
-            bar: !!props.expanded?.bar,
-            collapsed: props.expanded?.collapsed === props.id ? undefined : props.id,
-        });
-    }, [props.id, props.expanded, onExpandedChange]);
+    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);
 
@@ -387,9 +394,9 @@ const SideNavigationGroupItem: FC<
                 <InternalSideNavigationLink
                     {...props}
                     submenuExpanded={isSubmenuExpanded}
+                    onExpandToggle={onExpandToggle}
                     tag={tag}
                 />
-                <div className={Styles.navigationGroupItemCollapse} onClick={triggerClick} />
             </div>
             <div
                 className={classNames(Styles.submenuWrapper, {

package/src/components/links.tsx

@@ -1,5 +1,4 @@
-import { FC, useContext } from 'react';
-import { NavigationLegacyContext } from '../utils/navigation-context';
+import { FC } from 'react';
 import {
     HeaderNavigationLinkProps,
     HeaderNavigationTriggerProps,
@@ -8,27 +7,48 @@ import {
     HeaderNavigationLink as HeaderNavigationLinkLegacy,
     HeaderNavigationTrigger as HeaderNavigationTriggerLegacy,
 } from './header-navigation/header-navigation-links';
+import { useTitanLayoutPlacementContext } from './titan-layout';
 import {
-    HeaderNavigationLink as HeaderNavigationLinkModern,
-    HeaderNavigationTrigger as HeaderNavigationTriggerModern,
-} from './left-navigation/header-navigation-tiny-links';
+    LayoutHeaderNavigationLink,
+    LayoutHeaderNavigationTrigger,
+} from './titan-layout/layout-header-links';
+import {
+    TitanLayoutSidebarLink,
+    TitanLayoutSidebarTrigger,
+} from './titan-layout/layout-sidebar-links';
 
 export const HeaderNavigationLink: FC<HeaderNavigationLinkProps> = props => {
-    const isLegacy = useContext(NavigationLegacyContext);
+    const placement = useTitanLayoutPlacementContext();
 
-    return isLegacy ? (
-        <HeaderNavigationLinkLegacy {...props} />
+    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}
+        />
     ) : (
-        <HeaderNavigationLinkModern {...props} />
+        <HeaderNavigationLinkLegacy {...props} />
     );
 };
 
 export const HeaderNavigationTrigger: FC<HeaderNavigationTriggerProps> = props => {
-    const isLegacy = useContext(NavigationLegacyContext);
+    const placement = useTitanLayoutPlacementContext();
 
-    return isLegacy ? (
-        <HeaderNavigationTriggerLegacy {...props} />
+    return placement === 'top' ? (
+        <LayoutHeaderNavigationTrigger {...props} />
+    ) : placement === 'side' ? (
+        <TitanLayoutSidebarTrigger
+            id={props.id}
+            title={props.title}
+            icon={props.icon}
+            iconActive={props.iconActive}
+        />
     ) : (
-        <HeaderNavigationTriggerModern {...props} />
+        <HeaderNavigationTriggerLegacy {...props} />
     );
 };

package/src/components/logo/logo-company-title.tsx

@@ -1,15 +1,17 @@
 import { FC } from 'react';
 
 /* tslint:disable: max-line-length */
-export const LogoCompanyTitle: FC<{ className?: string; fill?: string; size?: string }> = ({
-    className,
-    fill = 'currentColor',
-    size = '162',
-}) => {
+export const LogoCompanyTitle: FC<{
+    className?: string;
+    fill?: string;
+    size?: string;
+    height?: string | number;
+}> = ({ className, fill = 'currentColor', size = '162', height }) => {
     return (
         <svg
             className={className}
-            width={size}
+            width={height ? undefined : size}
+            height={height}
             viewBox="0 0 322 80"
             xmlns="http://www.w3.org/2000/svg"
         >

package/src/components/profile-dropdown/profile-dropdown.module.less

@@ -105,6 +105,10 @@
         position: relative;
     }
 
+    .dropdown-content-wrapper > span {
+        display: block !important;
+    }
+
     .dropdown-content-bottom-left {
         .dropdown-content-wrapper::before {
             content: '';

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

@@ -21,9 +21,9 @@ export const ProfileDropdownDefault = () => (
         <ProfileDropdown.Link id="first" to="https://google.com">
             first link
         </ProfileDropdown.Link>
-        <ProfileDropdown.Link id="second" onClick={() => alert('second click')}>
+        <ProfileDropdown.Section id="second" onClick={() => alert('second click')}>
             second link
-        </ProfileDropdown.Link>
+        </ProfileDropdown.Section>
         <ProfileDropdown.Divider />
         <ProfileDropdown.Section id="content">some content</ProfileDropdown.Section>
         <ProfileDropdown.Divider />
@@ -45,9 +45,9 @@ export const ProfileDropdownWithLogo = () => (
         <ProfileDropdown.Link id="first" to="https://google.com">
             first link
         </ProfileDropdown.Link>
-        <ProfileDropdown.Link id="second" onClick={() => alert('second click')}>
+        <ProfileDropdown.Section id="second" onClick={() => alert('second click')}>
             second link
-        </ProfileDropdown.Link>
+        </ProfileDropdown.Section>
     </ProfileDropdown>
 );