@servicetitan/navigation 13.0.0 → 13.1.0-canary.259.8b03eb7.0

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

@@ -94,6 +94,7 @@ export const InternalSideNavigationLink: FC<
             to={to}
             isActive={typeof isActive === 'function' ? isActive : undefined}
             activeClassName={Styles.navItemActive}
+            tabIndex={0}
         >
             <InternalSideNavigationItemContent
                 icon={icon}
@@ -133,6 +134,7 @@ export const InternalSideNavigationTrigger: FC<
         <div
             data-cy={`navigation-item-${id}`}
             data-pendo={`navigation-item-${id}`}
+            tabIndex={rest.onClick ? 0 : -1}
             {...rest}
             className={classNames(Styles.navItem, className, {
                 [Styles.navLink]: !!rest.onClick,
@@ -244,7 +246,7 @@ export const InternalSideNavigationGroup: FC<
         children: ReactNode;
         submenuExpanded: boolean;
         onClick?: (e: MouseEvent<never>) => void;
-        onExpandToggle(e: MouseEvent<never>): void;
+        onSubmenuExpand(id: string, expanded: boolean, force: boolean): void;
     }
 > = ({
     id,
@@ -258,46 +260,56 @@ export const InternalSideNavigationGroup: FC<
 
     children,
     submenuExpanded,
-    onExpandToggle,
+    onSubmenuExpand,
     onClick,
     navigationComponent,
     ...rest
 }) => {
-    const onRootClickCapture = (e: MouseEvent<never>) => {
-        if (!submenuExpanded) {
-            onExpandToggle?.(e);
+    const onRootClick = (e: MouseEvent<never>) => {
+        if (submenuExpanded) {
+            onSubmenuExpand(id, true, true);
+        } else {
+            onSubmenuExpand(id, true, false);
             e.preventDefault();
             e.stopPropagation();
         }
     };
+    const onToggleClick = (e: MouseEvent<never>) => {
+        onSubmenuExpand(id, !submenuExpanded, false);
+        e.preventDefault();
+        e.stopPropagation();
+    };
+
     return (
         <div className={classNames(Styles.navGroupWrapper)}>
-            <div className={Styles.navGroupItem} onClickCapture={onRootClickCapture}>
-                {to ? (
-                    <InternalSideNavigationLink
-                        id={id}
-                        to={to}
-                        title={title}
-                        isActive={isActive}
-                        icon={icon}
-                        iconActive={iconActive}
-                        tag={tag}
-                        className={className}
-                        {...rest}
-                        navigationComponent={navigationComponent}
-                    />
-                ) : (
-                    <InternalSideNavigationTrigger
-                        id={id}
-                        title={title}
-                        isActive={isActive === true || undefined}
-                        icon={icon}
-                        iconActive={iconActive}
-                        tag={tag}
-                        className={className}
-                        {...rest}
-                    />
-                )}
+            <div className={Styles.navGroupItem}>
+                <div onClick={onRootClick}>
+                    {to ? (
+                        <InternalSideNavigationLink
+                            id={id}
+                            to={to}
+                            title={title}
+                            isActive={isActive}
+                            icon={icon}
+                            iconActive={iconActive}
+                            tag={tag}
+                            className={className}
+                            {...rest}
+                            navigationComponent={navigationComponent}
+                        />
+                    ) : (
+                        <InternalSideNavigationTrigger
+                            id={id}
+                            title={title}
+                            isActive={isActive === true || undefined}
+                            icon={icon}
+                            iconActive={iconActive}
+                            tag={tag}
+                            className={className}
+                            {...rest}
+                        />
+                    )}
+                </div>
 
                 <div className={Styles.navItemGroupToggleWrapper}>
                     {withTooltip(
@@ -306,7 +318,7 @@ export const InternalSideNavigationGroup: FC<
                             size="small"
                             icon={submenuExpanded ? SvgGroupCollapse : SvgGroupExpand}
                             className={Styles.navItemGroupToggle}
-                            onClick={onExpandToggle}
+                            onClick={onToggleClick}
                             aria-label="Toggle submenu"
                             data-cy="nav-item-group-expand"
                         />,
@@ -315,14 +327,16 @@ export const InternalSideNavigationGroup: FC<
                     )}
                 </div>
             </div>
-            <div
-                className={classNames(Styles.submenuWrapper, {
-                    [Styles.submenuWrapperCollapsed]: !submenuExpanded,
-                })}
-                data-cy={`navigation-submenu-${id}`}
-            >
-                <div className={Styles.submenu}>{children}</div>
-            </div>
+            {submenuExpanded && (
+                <div
+                    className={classNames(Styles.submenuWrapper, {
+                        [Styles.submenuWrapperCollapsed]: !submenuExpanded,
+                    })}
+                    data-cy={`navigation-submenu-${id}`}
+                >
+                    <div className={Styles.submenu}>{children}</div>
+                </div>
+            )}
         </div>
     );
 };

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

@@ -47,11 +47,11 @@
         }
     }
 
-    .nav-item {
-        margin-bottom: @spacing-half;
-    }
     .nav-top {
-        margin-bottom: @spacing-half;
+        .divider {
+            margin-top: 10px;
+            margin-bottom: @spacing-half;
+        }
     }
     .nav-bottom {
         .divider {
@@ -134,10 +134,7 @@
         width: 64px;
         overflow-x: hidden;
         padding-top: @spacing-1;
-
-        &:not(:first-child) {
-            margin-top: @spacing-half;
-        }
+        margin-top: @spacing-half;
 
         .nav-item-counter[data-anv][data-anv] {
             position: absolute;
@@ -171,8 +168,13 @@
         }
     }
 
-    .nav-top .divider {
-        margin-top: @spacing-1;
+    .nav-main {
+        padding-top: @spacing-half;
+    }
+    .nav-top {
+        .divider {
+            margin-top: 12px;
+        }
     }
 }
 
@@ -185,28 +187,15 @@
         margin-right: @spacing-1;
     }
 
-    .toggle {
-        .toggle-content {
-            margin: @spacing-2;
-
-            .toggle-icon-wrapper {
-                padding-left: @spacing-half;
-                padding-right: @spacing-half;
-            }
-
-            .toggle-text {
-                padding-left: @spacing-0 !important;
-            }
+    .nav-top {
+        .divider {
+            margin-top: 10px;
+            margin-bottom: 6px;
         }
     }
 
-    .nav-top .divider {
-        margin-top: @spacing-half;
-        margin-bottom: @spacing-1;
-    }
-
     .nav-main {
-        padding-top: @spacing-1;
+        padding-top: 12px;
     }
 
     .nav-group-item {
@@ -232,7 +221,7 @@
 .nav-wide {
     .nav-item {
         flex-direction: row;
-        margin-bottom: @spacing-half;
+        margin-top: @spacing-half;
 
         .nav-item-icon-wrapper {
             flex: 1;
@@ -401,6 +390,12 @@
             width: 24px;
         }
     }
+
+    &:focus-visible {
+        .nav-item-icon-wrapper {
+            outline: -webkit-focus-ring-color auto 1px;
+        }
+    }
 }
 
 .nav-link {

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

@@ -1,15 +1,7 @@
 import { Icon, Popover, Text, ThemeProvider } from '@servicetitan/anvil2';
 import SvgClose from '@servicetitan/anvil2/assets/icons/material/round/close.svg';
 import classNames from 'classnames';
-import {
-    Children,
-    FC,
-    Fragment,
-    MouseEvent,
-    ReactElement,
-    isValidElement,
-    useCallback,
-} from 'react';
+import { Children, FC, Fragment, ReactElement, isValidElement } from 'react';
 import { NavigationItemData, NavigationSubmenuData } from '../../utils/navigation';
 import { NavLinkComponentProps } from '../../utils/navigation-context';
 import { getCounterTag, getSubmenuGroupTag } from '../../utils/side-nav';
@@ -34,7 +26,7 @@ export interface LayoutSidebarProps {
     navigationComponent: FC<NavLinkComponentProps>;
     onBarExpandChange(expanded: boolean): void;
     onDrawerOpenChange(expanded: boolean): void;
-    onSubmenuExpandChange(id: string, expanded: boolean): void;
+    onSubmenuExpandChange(id: string, expanded: boolean, force: boolean): void;
 }
 
 export const LayoutSidebar: FC<LayoutSidebarProps> = ({
@@ -133,19 +125,8 @@ const SideNavigationGroupItem: FC<{
     navigationComponent: FC<NavLinkComponentProps>;
     barExpanded: boolean;
     submenuExpanded: boolean;
-    onSubmenuExpand: undefined | ((id: string, expanded: boolean) => void);
+    onSubmenuExpand: (id: string, expanded: boolean, force: boolean) => void;
 }> = ({ item, onSubmenuExpand, barExpanded, submenuExpanded, navigationComponent }) => {
-    const onExpandToggle = useCallback(
-        (e: MouseEvent<never>) => {
-            e.preventDefault();
-            e.stopPropagation();
-
-            if (item.id) {
-                onSubmenuExpand?.(item.id, !submenuExpanded);
-            }
-        },
-        [item.id, submenuExpanded, onSubmenuExpand]
-    );
     const {
         sidebar: {
             styles: { popoverContent },
@@ -165,7 +146,7 @@ const SideNavigationGroupItem: FC<{
             className={item.className}
             tag={tag}
             submenuExpanded={submenuExpanded}
-            onExpandToggle={onExpandToggle}
+            onSubmenuExpand={onSubmenuExpand}
             navigationComponent={navigationComponent}
         >
             <SideNavigationGroupContent
@@ -175,7 +156,7 @@ const SideNavigationGroupItem: FC<{
             />
         </InternalSideNavigationGroup>
     ) : (
-        <Popover placement="right-start" openOnHover delay={500}>
+        <Popover placement="right-start" openOnHover delay={300}>
             <Popover.Trigger>
                 {(triggerProps: any) => (
                     <div {...triggerProps}>

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

@@ -162,7 +162,6 @@ const SideLinkPopoverWrapper: TitanLayoutLinkWrapper = ({ children, context }) =
 
 const sidebarTop = () => [
     <TitanLayout.Link key="tasks" {...navItems.tasks} />,
-    <TitanLayout.Link key="calls" {...navItems.calls} />,
     <TitanLayout.Trigger
         key="marketing"
         {...navItems.marketing}
@@ -170,6 +169,7 @@ const sidebarTop = () => [
         wrapper={SideLinkPopoverWrapper}
         counter={50}
     />,
+    <TitanLayout.Link key="calls" {...navItems.calls} />,
 ];
 const ContentHeader = () => {
     const [longInfo, setLongInfo] = useState(false);
@@ -350,6 +350,22 @@ export const ContentAnvil2 = (args: LayoutContentArgs) => (
     </TitanLayout>
 );
 
+export const CustomNavigation = (args: LayoutContentArgs) => (
+    <TitanLayout
+        {...useLayoutProps(args)}
+        appearance="anvil1"
+        {...useDefaultLayoutProps()}
+        logo={{
+            title: 'Commercial',
+            mantleFill: '#2270EE',
+        }}
+    >
+        <Anvil1Page>
+            <Content {...args} />
+        </Anvil1Page>
+    </TitanLayout>
+);
+
 export const ExtraWithTitle = (args: LayoutContentArgs) => (
     <TitanLayout
         {...useLayoutProps(args)}

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

@@ -205,11 +205,11 @@ function TitanLayoutComponent({
         [onStateChange, isMobile]
     );
     const onSubmenuExpandChange = useCallback(
-        (id: string, expanded: boolean) => {
+        (id: string, expanded: boolean, force: boolean) => {
             onStateChange?.({
                 navCollapsed: state?.navCollapsed ?? false,
                 submenusExpanded: [
-                    ...(state?.submenusExpanded ?? []).filter(i => i !== id),
+                    ...(force ? [] : (state?.submenusExpanded ?? []).filter(i => i !== id)),
                     ...(expanded ? [id] : []),
                 ],
             });