@servicetitan/navigation 12.0.0 → 12.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/navigation",
-    "version": "12.0.0",
+    "version": "12.0.2",
     "description": "Navigation components",
     "repository": {
         "type": "git",
@@ -42,5 +42,5 @@
         "less": true,
         "webpack": false
     },
-    "gitHead": "7dcd2ea3b19aa633f1cc2204060dfa25895b37a1"
+    "gitHead": "037d391733c6dd61d96503860e6090881cface0b"
 }

package/src/components/titan-layout/layout-header-dark.tsx

@@ -1,10 +1,12 @@
-import { ButtonCompound, Icon, Menu } from '@servicetitan/anvil2';
+import { ButtonCompound, Icon, Menu, MenuProps } from '@servicetitan/anvil2';
 import SvgMoreVert from '@servicetitan/anvil2/assets/icons/material/round/more_vert.svg';
 import classNames from 'classnames';
 import { FC, useCallback, useEffect, useRef, useState } from 'react';
 import { NavigationItemData } from '../../utils/navigation';
+import { NavigationComponentProps } from './interface-internal';
+import { useTitanLayoutContext } from './layout-context';
 import { LayoutHeader, LayoutHeaderProps } from './layout-header';
-import { LayoutHeaderNavigationLink } from './layout-header-links';
+import { InternalLayoutHeaderNavigationLink } from './layout-header-links-internal';
 import * as Styles from './layout-header.module.less';
 import { withTooltip } from './with-tooltip';
 
@@ -107,6 +109,7 @@ const LayoutHeaderNav: FC<LayoutHeaderNavProps> = ({ className, mainItems, overf
     const navigationRef = useRef<HTMLDivElement>(null);
     const forceUpdate = useForceUpdate();
     const [minimized, setMinimized] = useState(MinimizedState.Calculating);
+    const { NavigationComponent } = useTitanLayoutContext();
 
     useEffect(() => {
         const handleResize = () => {
@@ -120,7 +123,8 @@ const LayoutHeaderNav: FC<LayoutHeaderNavProps> = ({ className, mainItems, overf
 
     const updateIsMinimized = () => {
         if (containerRef.current && navigationRef.current) {
-            if (navigationRef.current.clientWidth + 16 > containerRef.current.clientWidth) {
+            const widthGap = 16 + (overflowItems?.length ? 32 : 0);
+            if (navigationRef.current.clientWidth + widthGap > containerRef.current.clientWidth) {
                 setMinimized(MinimizedState.Minimized);
             } else if (minimized === MinimizedState.Calculating) {
                 setMinimized(MinimizedState.Full);
@@ -150,37 +154,55 @@ const LayoutHeaderNav: FC<LayoutHeaderNavProps> = ({ className, mainItems, overf
             <div ref={navigationRef} className={classNames(Styles.headerNavigation)}>
                 {mainItems?.map(item =>
                     withTooltip(
-                        <LayoutHeaderNavigationLink
+                        <InternalLayoutHeaderNavigationLink
                             {...item}
                             label={isMinimized ? undefined : item.title}
                             key={item.id}
+                            navigationComponent={NavigationComponent}
                         />,
                         isMinimized ? item.title : undefined,
                         { key: item.id }
                     )
                 )}
             </div>
-            {!!overflowItems?.length && <LayoutHeaderNavOverflow items={overflowItems} />}
+            {!!overflowItems?.length && (
+                <LayoutHeaderNavOverflow
+                    items={overflowItems}
+                    navigationComponent={NavigationComponent}
+                />
+            )}
         </div>
     );
 };
 
-const LayoutHeaderNavOverflow: FC<{
-    items: NavigationItemData[];
-}> = ({ items }) => {
+const LayoutHeaderNavOverflowTrigger: MenuProps['trigger'] = props => (
+    <ButtonCompound
+        {...props}
+        className={Styles.headerNavigationOverflowTrigger}
+        data-cy="navigation-overflow-trigger"
+    >
+        <Icon svg={SvgMoreVert} size="medium" />
+    </ButtonCompound>
+);
+
+const LayoutHeaderNavOverflow: FC<
+    {
+        items: NavigationItemData[];
+    } & NavigationComponentProps
+> = ({ items, navigationComponent }) => {
     return (
-        <Menu
-            trigger={props => (
-                <ButtonCompound {...props} className={Styles.headerNavigationOverflowTrigger}>
-                    <Icon svg={SvgMoreVert} size="medium" />
-                </ButtonCompound>
-            )}
-            contentClassName={Styles.headerNavigationOverflow}
-            placement="bottom-end"
-        >
-            {items.map(item => (
-                <LayoutHeaderNavigationLink {...item} label={item.title} key={item.id} />
-            ))}
+        <Menu trigger={LayoutHeaderNavOverflowTrigger} placement="bottom-end">
+            <div data-cy="navigation-overflow-content" className={Styles.headerNavigationOverflow}>
+                {items.map(item => (
+                    <InternalLayoutHeaderNavigationLink
+                        {...item}
+                        label={item.title}
+                        key={item.id}
+                        navigationComponent={navigationComponent}
+                        isOverflow
+                    />
+                ))}
+            </div>
         </Menu>
     );
 };

package/src/components/titan-layout/layout-header-links-internal.tsx

@@ -0,0 +1,151 @@
+import { Icon, IconProps } from '@servicetitan/anvil2';
+import classNames from 'classnames';
+import { FC, Fragment } from 'react';
+import {
+    HeaderNavigationLinkProps,
+    HeaderNavigationTriggerProps,
+} from '../../utils/navigation-legacy';
+import { getCounterTag } from '../../utils/side-nav';
+import { CounterTag, CounterTagProps } from '../counter-tag';
+// use v1 tooltips due to bug with v2 in monolith
+import { NavigationComponentProps } from './interface-internal';
+import * as Styles from './layout-header.module.less';
+
+/** Content for navigation items */
+const InternalHeaderNavigationItemContent: FC<{
+    tag?: CounterTagProps;
+    counterClassName?: string;
+    icon: IconProps['svg'] | undefined;
+    iconActive?: IconProps['svg'];
+    label?: string;
+    labelClassName?: string;
+}> = ({ counterClassName, icon, iconActive, label, labelClassName, tag }) => {
+    return (
+        <Fragment>
+            {!!icon && <Icon svg={icon} className={Styles.navigationIcon} />}
+            {!!iconActive && (
+                <Icon
+                    svg={iconActive}
+                    className={classNames(Styles.navigationIcon, Styles.navigationIconActive)}
+                />
+            )}
+
+            {!!label && (
+                <span
+                    className={classNames(Styles.navigationItemLabel, labelClassName)}
+                    data-cy="nav-item-label"
+                >
+                    {label}
+                </span>
+            )}
+
+            {!!tag && (
+                <CounterTag
+                    data={tag}
+                    className={classNames(Styles.navigationItemCounter, counterClassName)}
+                    longClassName={Styles.navigationItemCounterLong}
+                />
+            )}
+        </Fragment>
+    );
+};
+
+/** Navigation extra item with link */
+export const InternalLayoutHeaderNavigationLink: FC<
+    HeaderNavigationLinkProps & NavigationComponentProps & { isOverflow?: boolean }
+> = ({
+    id,
+    to,
+    hint,
+    tooltip,
+    className,
+    counter,
+    icon,
+    iconActive,
+    iconClassName,
+    iconName,
+    iconComponent,
+    isActive,
+    isOverflow,
+    label,
+    labelClassName,
+    tag,
+    target,
+    title,
+    navigationComponent: NavigationComponent,
+    ...rest
+}) => {
+    return (
+        <NavigationComponent
+            data-cy={`navigation-item-${id}`}
+            data-pendo={`navigation-item-${id}`}
+            {...rest}
+            key={id}
+            to={to}
+            className={classNames(
+                isOverflow ? Styles.navigationLinkOverflow : Styles.navigationLink,
+                className,
+                {
+                    [Styles.navigationItemActive]: isActive === true,
+                    [Styles.navigationItemIconState]: !!icon && !!iconActive,
+                }
+            )}
+            isActive={typeof isActive === 'function' ? isActive : undefined}
+            activeClassName={Styles.navigationItemActive}
+            target={target}
+        >
+            <InternalHeaderNavigationItemContent
+                tag={getCounterTag(counter, tag)}
+                icon={icon}
+                iconActive={iconActive}
+                label={label}
+                labelClassName={labelClassName}
+            />
+        </NavigationComponent>
+    );
+};
+
+/** Navigation extra item with icon button */
+export const InternalLayoutHeaderNavigationTrigger: FC<HeaderNavigationTriggerProps> = ({
+    id,
+    className,
+    counter,
+    icon,
+    iconActive,
+    iconName,
+    isActive,
+    hint,
+    label,
+    labelClassName,
+    tag,
+    tooltip,
+    title,
+    titleClassName,
+    ...rest
+}) => {
+    return (
+        <div
+            data-cy={`navigation-trigger-${id}`}
+            data-pendo={`navigation-trigger-${id}`}
+            {...rest}
+            title={hint}
+            className={classNames(
+                Styles.navigationLink,
+                {
+                    [Styles.navigationItemActive]: isActive === true,
+                    [Styles.navigationItemIconState]: !!icon && !!iconActive,
+                },
+                'cursor-pointer',
+                className
+            )}
+        >
+            <InternalHeaderNavigationItemContent
+                tag={getCounterTag(counter, tag)}
+                icon={icon}
+                iconActive={iconActive}
+                label={label}
+                labelClassName={labelClassName}
+            />
+        </div>
+    );
+};

package/src/components/titan-layout/layout-header-links.tsx

@@ -1,148 +1,29 @@
-import { Icon, IconProps } from '@servicetitan/anvil2';
-import classNames from 'classnames';
-import { FC, Fragment } from 'react';
+import { FC } from 'react';
 import {
     HeaderNavigationLinkProps,
     HeaderNavigationTriggerProps,
 } from '../../utils/navigation-legacy';
-import { getCounterTag } from '../../utils/side-nav';
-import { CounterTag, CounterTagProps } from '../counter-tag';
-// use v1 tooltips due to bug with v2 in monolith
-import { withTooltip } from '../header-navigation/with-tooltip';
 import { useTitanLayoutContext } from './layout-context';
-import * as Styles from './layout-header.module.less';
-
-/** Content for navigation items */
-const HeaderNavigationItemContent: FC<{
-    tag?: CounterTagProps;
-    counterClassName?: string;
-    icon: IconProps['svg'] | undefined;
-    iconActive?: IconProps['svg'];
-    label?: string;
-    labelClassName?: string;
-}> = ({ counterClassName, icon, iconActive, label, labelClassName, tag }) => {
-    return (
-        <Fragment>
-            {!!icon && <Icon svg={icon} className={Styles.navigationIcon} />}
-            {!!iconActive && (
-                <Icon
-                    svg={iconActive}
-                    className={classNames(Styles.navigationIcon, Styles.navigationIconActive)}
-                />
-            )}
-
-            {!!label && (
-                <span
-                    className={classNames(Styles.navigationItemLabel, labelClassName)}
-                    data-cy="nav-item-label"
-                >
-                    {label}
-                </span>
-            )}
-
-            {!!tag && (
-                <CounterTag
-                    data={tag}
-                    className={classNames(Styles.navigationItemCounter, counterClassName)}
-                    longClassName={Styles.navigationItemCounterLong}
-                />
-            )}
-        </Fragment>
-    );
-};
+import {
+    InternalLayoutHeaderNavigationLink,
+    InternalLayoutHeaderNavigationTrigger,
+} from './layout-header-links-internal';
+import { withTooltip } from './with-tooltip';
 
 /** Navigation extra item with link */
-export const LayoutHeaderNavigationLink: FC<HeaderNavigationLinkProps> = ({
-    id,
-    to,
-    hint,
-    tooltip,
-    className,
-    counter,
-    icon,
-    iconActive,
-    iconClassName,
-    iconComponent,
-    iconName,
-    isActive,
-    label,
-    labelClassName,
-    tag,
-    target,
-    title,
-    ...rest
-}) => {
+export const LayoutHeaderNavigationLink: FC<HeaderNavigationLinkProps> = ({ tooltip, ...rest }) => {
     const { NavigationComponent } = useTitanLayoutContext();
 
     return withTooltip(
-        <NavigationComponent
-            data-cy={`navigation-item-${id}`}
-            data-pendo={`navigation-item-${id}`}
-            {...rest}
-            key={id}
-            to={to}
-            className={classNames(Styles.navigationLink, className, {
-                [Styles.navigationItemActive]: isActive === true,
-                [Styles.navigationItemIconState]: !!icon && !!iconActive,
-            })}
-            isActive={typeof isActive === 'function' ? isActive : undefined}
-            activeClassName={Styles.navigationItemActive}
-            target={target}
-        >
-            <HeaderNavigationItemContent
-                tag={getCounterTag(counter, tag)}
-                icon={icon}
-                iconActive={iconActive}
-                label={label}
-                labelClassName={labelClassName}
-            />
-        </NavigationComponent>,
+        <InternalLayoutHeaderNavigationLink {...rest} navigationComponent={NavigationComponent} />,
         tooltip
     );
 };
 
 /** Navigation extra item with icon button */
 export const LayoutHeaderNavigationTrigger: FC<HeaderNavigationTriggerProps> = ({
-    id,
-    className,
-    counter,
-    icon,
-    iconActive,
-    iconName,
-    isActive,
-    hint,
-    label,
-    labelClassName,
-    tag,
     tooltip,
-    title,
-    titleClassName,
     ...rest
 }) => {
-    return withTooltip(
-        <div
-            data-cy={`navigation-trigger-${id}`}
-            data-pendo={`navigation-trigger-${id}`}
-            {...rest}
-            title={hint}
-            className={classNames(
-                Styles.navigationLink,
-                {
-                    [Styles.navigationItemActive]: isActive === true,
-                    [Styles.navigationItemIconState]: !!icon && !!iconActive,
-                },
-                'cursor-pointer',
-                className
-            )}
-        >
-            <HeaderNavigationItemContent
-                tag={getCounterTag(counter, tag)}
-                icon={icon}
-                iconActive={iconActive}
-                label={label}
-                labelClassName={labelClassName}
-            />
-        </div>,
-        tooltip
-    );
+    return withTooltip(<InternalLayoutHeaderNavigationTrigger {...rest} />, tooltip);
 };

package/src/components/titan-layout/layout-header.module.less

@@ -41,10 +41,6 @@
     }
 
     .he-top-right {
-        & > * {
-            color: var(--nav-top-text-color);
-        }
-
         .he-top-right-text {
             font-size: @typescale-2;
             font-weight: @font-weight-bold;
@@ -122,14 +118,15 @@
     min-width: 0;
     overflow-x: auto;
     overflow-y: hidden;
+    flex: 1;
 
     display: flex;
     justify-content: center;
     align-items: center;
 
     &.calculating {
-        .header-navigation {
-            opacity: 0;
+        > * {
+            opacity: 0 !important;
         }
     }
 
@@ -237,7 +234,8 @@
 }
 
 //!!!!!!!!!!!!!!! nav links styles !!!!!!!!!!!!!!!//
-.navigation-link {
+.navigation-link,
+.navigation-link-overflow {
     &.navigation-item-icon-state.navigation-item-active {
         .navigation-icon[data-anv][data-anv]:not(.navigation-icon-active) {
             display: none;
@@ -276,34 +274,34 @@
 
         border-radius: 12px;
         font-size: @size-links-tiny;
-    }
-
-    .navigation-item-counter {
-        color: @color-white;
-        font-weight: @font-weight-semibold;
-        font-size: 8px !important;
-        min-width: 16px !important;
-        height: 16px !important;
-        position: absolute;
-        top: 4px;
-        right: -2px;
 
-        &.navigation-item-counter-long {
-            right: -8px;
+        .navigation-item-counter {
+            color: @color-white;
+            font-weight: @font-weight-semibold;
+            font-size: 8px !important;
+            min-width: 16px !important;
+            height: 16px !important;
+            position: absolute;
+            top: 4px;
+            right: -2px;
+
+            &.navigation-item-counter-long {
+                right: -8px;
+            }
         }
-    }
 
-    .navigation-item-label {
-        color: inherit;
-        font-size: @typescale-1;
-        font-family: @base-font-family;
-        font-weight: @font-weight-semibold;
-        margin-left: @spacing-half;
-    }
+        .navigation-item-label {
+            color: inherit;
+            font-size: @typescale-1;
+            font-family: @base-font-family;
+            font-weight: @font-weight-semibold;
+            margin-left: @spacing-half;
+        }
 
-    .navigation-icon[data-anv][data-anv] {
-        height: 24px;
-        width: 24px;
+        .navigation-icon[data-anv][data-anv] {
+            height: 24px;
+            width: 24px;
+        }
     }
 
     &.header-desktop {
@@ -339,7 +337,7 @@
 }
 
 .header-dark .navigation-link,
-.header-navigation > .navigation-link {
+.header-navigation .navigation-link {
     &.navigation-item-active {
         color: @color-blue-200 !important;
     }
@@ -401,47 +399,52 @@
     }
 }
 
-.header-navigation-overflow .navigation-link {
-    display: inline-flex;
-    color: @color-black;
-    padding: @spacing-1 12px;
-    cursor: pointer;
-
-    font-family: @base-font-family;
-    font-size: @typescale-4;
-    position: relative;
-    align-items: center;
-    flex-wrap: nowrap;
-    text-wrap: nowrap;
+.header-navigation-overflow {
+    display: flex;
+    flex-direction: column;
 
     margin-left: -0.5rem;
     margin-right: -0.5rem;
 
-    &:hover {
-        background-color: @color-blue-500;
-        color: @color-white;
-    }
-
-    &.navigation-item-active:not(:hover) {
-        color: @color-blue;
-    }
+    .navigation-link-overflow {
+        display: inline-flex;
+        color: @color-black;
+        padding: @spacing-1 12px;
+        cursor: pointer;
 
-    .navigation-item-label {
         font-family: @base-font-family;
-        font-size: @typescale-2;
-        margin-left: @spacing-half;
-    }
-    .navigation-item-counter {
-        color: @color-white;
-        font-weight: @font-weight-semibold;
-        font-size: 8px !important;
+        font-size: @typescale-4;
+        position: relative;
+        align-items: center;
+        flex-wrap: nowrap;
+        text-wrap: nowrap;
 
-        min-width: 12px !important;
-        height: 12px !important;
-        margin-left: @spacing-half;
-        margin-top: -@spacing-1;
-    }
-    .navigation-icon[data-anv][data-anv] {
-        height: 20px;
+        &:hover {
+            background-color: @color-blue-500;
+            color: @color-white;
+        }
+
+        &.navigation-item-active:not(:hover) {
+            color: @color-blue;
+        }
+
+        .navigation-item-label {
+            font-family: @base-font-family;
+            font-size: @typescale-2;
+            margin-left: @spacing-half;
+        }
+        .navigation-item-counter {
+            color: @color-white;
+            font-weight: @font-weight-semibold;
+            font-size: 8px !important;
+            margin-right: @spacing-half;
+            margin-left: @spacing-half;
+
+            min-width: 12px !important;
+            height: 12px !important;
+        }
+        .navigation-icon[data-anv][data-anv] {
+            height: 20px;
+        }
     }
 }

package/src/components/titan-layout/layout-header.module.less.d.ts

@@ -32,4 +32,5 @@ export const navigationItemCounterLong: string;
 export const navigationItemIconState: string;
 export const navigationItemLabel: string;
 export const navigationLink: string;
+export const navigationLinkOverflow: string;
 

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

@@ -365,6 +365,20 @@ export const TitanLayoutAnvil1TopNav = (args: LayoutContentArgs) => (
 );
 
 export const TitanLayoutAnvil1Top = (args: LayoutContentArgs) => (
+    <TitanLayout
+        {...useLayoutProps(args)}
+        appearance="anvil1"
+        navVariant="top"
+        top={undefined}
+        navigationOverflowItems={undefined}
+    >
+        <Anvil1Page>
+            <Content {...args} />
+        </Anvil1Page>
+    </TitanLayout>
+);
+
+export const TitanLayoutAnvil1TopOverflow = (args: LayoutContentArgs) => (
     <TitanLayout {...useLayoutProps(args)} appearance="anvil1" navVariant="top" top={undefined}>
         <Anvil1Page>
             <Content {...args} />

package/src/components/titan-layout/with-tooltip.tsx

@@ -4,7 +4,7 @@ import { ReactElement } from 'react';
 export const withTooltip = (
     element: ReactElement,
     tooltip: string | undefined,
-    props: {
+    props?: {
         placement?: TooltipProps['placement'];
         key?: string;
     }