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

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

@@ -0,0 +1,16 @@
+import { Tooltip, TooltipProps } from '@servicetitan/anvil2';
+import { ReactElement } from 'react';
+
+export const withTooltip = (
+    element: ReactElement,
+    tooltip: string | undefined,
+    placement: TooltipProps['placement'] = 'bottom'
+) =>
+    tooltip ? (
+        <Tooltip placement={placement}>
+            <Tooltip.Content>{tooltip}</Tooltip.Content>
+            <Tooltip.Trigger>{element}</Tooltip.Trigger>
+        </Tooltip>
+    ) : (
+        element
+    );

package/src/index.ts

@@ -1,10 +1,10 @@
 export * from './components/header-navigation';
-export * from './components/profile-dropdown/profile-dropdown';
 export * from './components/logo/logo-company-title';
 export * from './components/logo/logo-titan';
 export * from './components/logo/logo-titan-text';
 export * from './components/counter-tag';
 export * from './components/left-navigation';
+export * from './components/titan-layout';
 export * from './components/links';
 export * from './utils/navigation';
 export {
@@ -17,3 +17,4 @@ export {
     NavigationActiveLinkMatcher,
 } from './utils/navigation-context';
 export * from './utils/navigation-legacy';
+export * from './utils/use-breakpoint';

package/src/test/data.tsx

@@ -154,7 +154,7 @@ const getItem = (
     hint: id,
     icon: undefined,
     iconActive: undefined,
-    ...(data ?? {}),
+    ...data,
     submenu: data.submenu
         ? {
               ...data.submenu,
@@ -176,7 +176,7 @@ const getSubItem = (
     id,
     to: id,
     title: id[0].toUpperCase() + id.substring(1),
-    ...(data ?? {}),
+    ...data,
 });
 
 const getGroup = (
@@ -339,6 +339,7 @@ export const CallsNavigationTrigger = () => {
                     id="dialpad"
                     iconName="phone"
                     counter={2}
+                    title="Calls"
                     icon={SvgPhone}
                     iconActive={SvgPhoneActive}
                     onClick={() => setOpen(!open)}

package/src/utils/navigation-legacy.ts

@@ -54,6 +54,8 @@ export interface HeaderNavigationItemLinkProps {
 export interface HeaderNavigationTriggerPropsStrict {
     /** unique identifier */
     id: string;
+    /** item title (used for mobile) */
+    title: string;
     /** tooltip text */
     tooltip?: string;
     /** item description */
@@ -80,7 +82,7 @@ export interface HeaderNavigationTriggerPropsStrict {
     /** svg icon (anvil2) of inactive item */
     icon: IconProps['svg'] | undefined;
     /** svg icon (anvil2) of active item */
-    iconActive: IconProps['svg'] | undefined;
+    iconActive?: IconProps['svg'];
 }
 
 export interface HeaderNavigationTriggerProps extends HeaderNavigationTriggerPropsStrict {

package/src/utils/use-breakpoint.ts

@@ -0,0 +1,19 @@
+import { BreakpointReturnProps, useBreakpoint } from '@servicetitan/anvil2';
+import { useMemo } from 'react';
+
+export interface TitanBreakpoint {
+    name: BreakpointReturnProps['name'];
+    isMobile: boolean;
+}
+
+export const useTitanBreakpoint = (): TitanBreakpoint => {
+    const breakpoint = useBreakpoint();
+
+    return useMemo(
+        () => ({
+            name: breakpoint?.name ?? 'xl',
+            isMobile: breakpoint ? breakpoint.innerWidth <= 768 : false,
+        }),
+        [breakpoint]
+    );
+};