@servicetitan/navigation 13.0.0-canary.256.b43c6d7.0 → 13.0.0

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

@@ -57,16 +57,48 @@ export type TitanLayoutProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'
     /** logo props */
     logo?: TitanLayoutLogoProps;
 
+    /** layout state */
     state?: TitanLayoutState;
+    /** layout state change handler */
     onStateChange?: (state: TitanLayoutState) => void;
 
+    /** content header content */
     header?: ReactElement;
+
+    /** layout header content (center) */
     top?: ReactElement;
+
+    /** top links for side navigation */
     sideTop?: ReactElement[];
+
+    /**
+     * profile element for layout
+     * @see ProfileDropdown
+     */
     profile?: ReactElement;
+
+    /**
+     * extra links for layout header
+     * shown in side nav footer on mobile
+     */
     extraLinks?: ReactElement;
+
+    /**
+     * fixed extra links for layout header
+     * shown in header on mobile as well
+     */
     extraLinksTop?: ReactElement;
+
+    /**
+     * text shown in layout's header
+     * shown in side nav footer on mobile
+     */
     extraText?: string;
+
+    /**
+     * minimal width set for content area
+     * used for pages that aren't adopted to mobile
+     */
     minContentWidth?: number;
 };
 
@@ -93,7 +125,7 @@ const useAppearance = (appearance: TitanLayoutProps['appearance']) =>
         };
     }, [appearance]);
 
-const TitanLayoutComponent: FC<TitanLayoutProps> = ({
+function TitanLayoutComponent({
     appearance = 'anvil2',
     navVariant = 'left',
     id,
@@ -113,7 +145,7 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
     extraText,
     minContentWidth,
     sideTop,
-}) => {
+}: TitanLayoutProps) {
     const breakpoint = useTitanBreakpoint();
     const context: TitanLayoutContextType = useMemo(
         () => ({
@@ -149,10 +181,18 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
         }
     }, [view.isAnvil1]);
 
-    const onBurgerClick = useCallback((e: MouseEvent<never>) => {
-        setMobileDrawerOpened(true);
-        e.stopPropagation();
-    }, []);
+    const onBurgerClick = useCallback(
+        (e: MouseEvent<never>) => {
+            if (isMobile) {
+                setMobileDrawerOpened(true);
+            } else {
+                onStateChange?.({ navCollapsed: !state?.navCollapsed });
+            }
+
+            e.stopPropagation();
+        },
+        [isMobile, state?.navCollapsed, onStateChange]
+    );
 
     const onBarExpandChange = useCallback(
         (expanded: boolean) => {
@@ -168,7 +208,10 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
         (id: string, expanded: boolean) => {
             onStateChange?.({
                 navCollapsed: state?.navCollapsed ?? false,
-                submenuExpanded: expanded ? id : undefined,
+                submenusExpanded: [
+                    ...(state?.submenusExpanded ?? []).filter(i => i !== id),
+                    ...(expanded ? [id] : []),
+                ],
             });
         },
         [state, onStateChange]
@@ -272,7 +315,17 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
                                     </Fragment>
                                 }
                                 isMobile={isMobile}
-                                hasNotifications={hasNotifications || hasMenuNotifications}
+                                hasNotifications={
+                                    isMobile && (hasNotifications || hasMenuNotifications)
+                                }
+                                hasBurger={hasSideBar}
+                                burgerTooltip={
+                                    isMobile
+                                        ? undefined
+                                        : state?.navCollapsed
+                                          ? 'Expand'
+                                          : 'Collapse'
+                                }
                                 onBurgerClick={onBurgerClick}
                             />
                         ) : (
@@ -291,6 +344,7 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
                                 isMobile={isMobile}
                                 hasNotifications={hasNotifications || hasMenuNotifications}
                                 onBurgerClick={onBurgerClick}
+                                hasBurger={isMobile}
                                 navigationMainItems={navigationMainItems}
                                 navigationOverflowItems={navigationOverflowItems}
                             />
@@ -303,7 +357,7 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
                                 mobile={breakpoint.isMobile}
                                 barExpanded={!state?.navCollapsed}
                                 onBarExpandChange={onBarExpandChange}
-                                submenuExpanded={state?.submenuExpanded}
+                                submenusExpanded={state?.submenusExpanded}
                                 onSubmenuExpandChange={onSubmenuExpandChange}
                                 drawerOpened={mobileDrawerOpened}
                                 onDrawerOpenChange={setMobileDrawerOpened}
@@ -319,10 +373,11 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
                                                 <InternalSideNavigationTrigger
                                                     id="--extra-text"
                                                     title={extraText}
-                                                    submenuExpanded={undefined}
-                                                    tag={undefined}
+                                                    isActive={undefined}
                                                     icon={undefined}
                                                     iconActive={undefined}
+                                                    tag={undefined}
+                                                    className={undefined}
                                                 />
                                             )}
                                         </Fragment>
@@ -352,7 +407,7 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
             </LayoutPlacementContext.Provider>
         </LayoutContext.Provider>
     );
-};
+}
 
 const TitanLayoutHeaderObserved: FC<{
     children: ReactNode;

package/src/index.ts

@@ -5,5 +5,4 @@ export * from './components/counter-tag';
 export * from './components/titan-layout';
 export type * from './utils/navigation';
 export type { NavLinkComponentProps } from './utils/navigation-context';
-export type * from './utils/navigation-legacy';
 export * from './utils/use-breakpoint';

package/src/test/data.tsx

@@ -44,7 +44,6 @@ import {
     NavigationSubmenuItemData,
 } from '../utils/navigation';
 import { NavLinkComponentProps } from '../utils/navigation-context';
-import { HeaderNavigationItemData } from '../utils/navigation-legacy';
 import * as Styles from './data-stories.module.less';
 
 export const NavLinkMock = forwardRef<any, NavLinkComponentProps>(
@@ -115,31 +114,6 @@ export const SearchIcon = () => (
     </svg>
 );
 
-const getItem = (
-    id: string,
-    data: Partial<HeaderNavigationItemData>
-): HeaderNavigationItemData => ({
-    id,
-    to: '/' + id,
-    title: id[0].toUpperCase() + id.substring(1),
-    hint: id,
-    icon: undefined,
-    iconActive: undefined,
-    ...data,
-    submenu: data.submenu
-        ? {
-              ...data.submenu,
-              groups: data.submenu.groups.map(group => ({
-                  ...group,
-                  links: group.links.map(link => ({
-                      ...link,
-                      to: `/${id}/${link.to}`,
-                  })),
-              })),
-          }
-        : undefined,
-});
-
 const getNavItem = (id: string, data: Partial<NavigationItemData>): NavigationItemData => ({
     id,
     to: '/' + id,
@@ -179,145 +153,6 @@ const getGroup = (
     links,
 });
 
-export const items = {
-    calendar: getItem('calendar', {
-        iconName: 'event',
-        icon: SvgSchedule,
-        iconActive: SvgScheduleActive,
-    }),
-    schedule: getItem('schedule', {
-        iconName: 'event',
-        icon: SvgSchedule,
-        iconActive: SvgScheduleActive,
-    }),
-    calls: getItem('calls', {
-        iconName: 'local_phone',
-        icon: SvgCalls,
-        iconActive: SvgCallsActive,
-        counter: 1234,
-    }),
-    dashboard: getItem('dashboard', {
-        iconName: 'odometer',
-        icon: SvgDashboard,
-        iconActive: SvgDashboardActive,
-    }),
-    dispatch: getItem('dispatch', {
-        iconName: 'location_disabled',
-        icon: SvgDispatch,
-        iconActive: SvgDispatchActive,
-        tag: { value: 3 },
-    }),
-    fleet: getItem('fleet', {
-        iconName: 'fleet-pro',
-        icon: SvgFleetPro,
-        iconActive: SvgFleetProActive,
-        title: 'Fleet Pro',
-    }),
-    followUps: getItem('followUps', {
-        iconName: 'flag',
-        icon: SvgFollowUp,
-        iconActive: SvgFollowUpActive,
-        title: 'Follow Up',
-    }),
-    followUpsWithSubmenu: getItem('followUps', {
-        iconName: 'flag',
-        icon: SvgFollowUp,
-        iconActive: SvgFollowUpActive,
-        title: 'Follow Up',
-        submenu: {
-            groups: [
-                getGroup('', [
-                    getSubItem('estimates', { title: 'Unsold Estimates' }),
-                    getSubItem('sold', { title: 'Sold Estimates' }),
-                    getSubItem('surveys', { title: 'Surveys' }),
-                ]),
-            ],
-        },
-    }),
-    inventory: getItem('inventory', {
-        iconName: 'toys',
-        icon: SvgInventory,
-        iconActive: SvgInventoryActive,
-    }),
-    purchasing: getItem('purchasing', { iconComponent: InventoryIcon }),
-    purchasingWithSubmenu: getItem('purchasing', {
-        iconName: 'toys',
-        icon: SvgInventory,
-        iconActive: SvgInventoryActive,
-        counter: true,
-        submenu: {
-            groups: [
-                getGroup('Purchase', [
-                    getSubItem('repl', { title: 'Replenishment' }),
-                    getSubItem('orders', { title: 'Purchase Orders' }),
-                    getSubItem('receipts', { title: 'Receipts' }),
-                    getSubItem('returns', { title: 'Returns' }),
-                ]),
-            ],
-        },
-    }),
-    accounting: getItem('accounting', {
-        iconName: 'assignment',
-        icon: SvgAccounting,
-        iconActive: SvgAccountingActive,
-        counter: true,
-    }),
-    accountingWithSubmenu: getItem('accounting', {
-        iconName: 'assignment',
-        icon: SvgAccounting,
-        iconActive: SvgAccountingActive,
-        counter: 1,
-        submenu: {
-            groups: [
-                getGroup('Accounts Receivable', [
-                    getSubItem('export', {
-                        title: 'Batch/Export Transactions',
-                        counter: true,
-                    }),
-                    getSubItem('ar', { title: 'AR Management' }),
-                    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' })]),
-                getGroup('Financing', [getSubItem('dashboard', { title: 'Dashboard' })]),
-                getGroup('Others', [getSubItem('at', { title: 'Accounting Audit Trail' })]),
-            ],
-        },
-    }),
-    marketing: getItem('marketing', {
-        iconName: 'bullhorn',
-        icon: SvgMarketing,
-        iconActive: SvgMarketingActive,
-    }),
-    priceBook: getItem('pricebook', {
-        iconName: 'book',
-        icon: SvgPriceBook,
-        iconActive: SvgPriceBookActive,
-    }),
-    pointOfSale: getItem('pointOfSale', {
-        iconName: 'cash-register',
-        icon: SvgPos,
-        iconActive: SvgPosActive,
-        title: 'Point Of Sale',
-    }),
-    projects: getItem('projects', {
-        iconName: 'folder_special',
-        icon: SvgProjects,
-        iconActive: SvgProjectsActive,
-    }),
-    reports: getItem('reports', {
-        iconName: 'folder_special',
-        icon: SvgReports,
-        iconActive: SvgReportsActive,
-    }),
-    tasks: getItem('tasks', {
-        iconName: 'format_list_bulleted',
-        icon: SvgTasks,
-        iconActive: SvgTasksActive,
-    }),
-};
-
 export const navItems = {
     calendar: getNavItem('calendar', {
         icon: SvgSchedule,

package/src/test/titan-layout.tsx

@@ -0,0 +1,34 @@
+import { createContext, useContext } from 'react';
+import { TitanLayoutProps } from '../components/titan-layout';
+
+export interface LayoutContentArgs {
+    header: boolean;
+    sideTop: boolean;
+    extraText: boolean;
+    search: boolean;
+    longContent: boolean;
+    wideContent: boolean;
+    minWidth: boolean;
+    emptyNav: boolean;
+    overflowItems: boolean;
+}
+
+export const getDefaultArgs = (): LayoutContentArgs => ({
+    header: true,
+    sideTop: true,
+    extraText: true,
+    search: true,
+    longContent: true,
+    wideContent: false,
+    minWidth: false,
+    emptyNav: false,
+    overflowItems: true,
+});
+
+const DefaultPropsContext = createContext<Partial<TitanLayoutProps>>({});
+export const withDefaultLayoutProps = (props: Partial<TitanLayoutProps>) => (Story: any) => (
+    <DefaultPropsContext.Provider value={props}>
+        <Story />
+    </DefaultPropsContext.Provider>
+);
+export const useDefaultLayoutProps = () => useContext(DefaultPropsContext);

package/src/utils/navigation.ts

@@ -2,9 +2,6 @@ import { IconProps } from '@servicetitan/anvil2';
 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;
-
     /** svg icon (anvil2) of inactive item */
     icon: IconProps['svg'] | undefined;
 
@@ -20,9 +17,6 @@ export interface NavigationItemData extends NavigationLinkData {
 
     /** optional submenu of link item */
     submenu?: NavigationSubmenuData;
-
-    iconClassName?: never;
-    iconComponent?: never;
 }
 
 export interface NavigationLinkData {
@@ -47,6 +41,7 @@ export interface NavigationSubmenuData {
 export interface NavigationSubmenuItemData extends NavigationLinkData {
     /** item tag (optional) value. shown if it is set and true or greater than 0 */
     counter?: CounterTagValue;
+    /** item tag (optional) value. shown if value is true or greater than 0 */
     tag?: CounterTagData;
 }
 

package/dist/components/titan-layout/titan-layout.stories.d.ts

@@ -1,29 +0,0 @@
-interface LayoutContentArgs {
-    header: boolean;
-    sideTop: boolean;
-    extraText: boolean;
-    search: boolean;
-    longContent: boolean;
-    wideContent: boolean;
-    minWidth: boolean;
-    emptyNav: boolean;
-}
-declare const _default: {
-    title: string;
-    decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
-    parameters: {};
-    argTypes: {};
-    args: LayoutContentArgs;
-};
-export default _default;
-export declare const TitanLayoutLegacy: (args: LayoutContentArgs) => import("react/jsx-runtime").JSX.Element;
-export declare const TitanLayoutLegacyTopNav: (args: LayoutContentArgs) => import("react/jsx-runtime").JSX.Element;
-export declare const TitanLayoutLegacyTop: (args: LayoutContentArgs) => import("react/jsx-runtime").JSX.Element;
-export declare const TitanLayoutAnvil1: (args: LayoutContentArgs) => import("react/jsx-runtime").JSX.Element;
-export declare const TitanLayoutAnvil1TopNav: (args: LayoutContentArgs) => import("react/jsx-runtime").JSX.Element;
-export declare const TitanLayoutAnvil1Top: (args: LayoutContentArgs) => import("react/jsx-runtime").JSX.Element;
-export declare const TitanLayoutAnvil1TopOverflow: (args: LayoutContentArgs) => import("react/jsx-runtime").JSX.Element;
-export declare const TitanLayoutAnvil2: (args: LayoutContentArgs) => import("react/jsx-runtime").JSX.Element;
-export declare const TitanLayoutAnvil2TopNav: (args: LayoutContentArgs) => import("react/jsx-runtime").JSX.Element;
-export declare const TitanLayoutAnvil2Top: (args: LayoutContentArgs) => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=titan-layout.stories.d.ts.map

package/dist/components/titan-layout/titan-layout.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"titan-layout.stories.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/titan-layout.stories.tsx"],"names":[],"mappings":"AA0BA,UAAU,iBAAiB;IACvB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;CACrB;;;;;;UAgBQ,iBAAiB;;AAd1B,wBAeE;AA0QF,eAAO,MAAM,iBAAiB,GAAI,MAAM,iBAAiB,4CASxD,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,MAAM,iBAAiB,4CAS9D,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,MAAM,iBAAiB,4CAS3D,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,MAAM,iBAAiB,4CAMxD,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,MAAM,iBAAiB,4CAM9D,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,MAAM,iBAAiB,4CAY3D,CAAC;AAEF,eAAO,MAAM,4BAA4B,GAAI,MAAM,iBAAiB,4CAMnE,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,MAAM,iBAAiB,4CAQxD,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,MAAM,iBAAiB,4CAQ9D,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,MAAM,iBAAiB,4CAQ3D,CAAC"}

package/dist/utils/navigation-legacy.d.ts

@@ -1,88 +0,0 @@
-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;
-    /** item title (used for mobile) */
-    title: 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'];
-}
-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;
-}
-//# sourceMappingURL=navigation-legacy.d.ts.map

package/dist/utils/navigation-legacy.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"navigation-legacy.d.ts","sourceRoot":"","sources":["../../src/utils/navigation-legacy.ts"],"names":[],"mappings":"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"}

package/dist/utils/navigation-legacy.js

@@ -1,3 +0,0 @@
-export { };
-
-//# sourceMappingURL=navigation-legacy.js.map

package/dist/utils/navigation-legacy.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/utils/navigation-legacy.ts"],"sourcesContent":["import { IconProps } from '@servicetitan/anvil2';\nimport { IconPropsStrict } from '@servicetitan/design-system';\nimport { FC, HTMLAttributeAnchorTarget } from 'react';\nimport { CounterTagData, CounterTagValue } from './counter-tag';\nimport { NavigationSubmenuData } from './navigation';\n\nexport interface HeaderNavigationItemData extends HeaderNavigationItemLinkProps {\n    /** link description */\n    hint: string;\n\n    /** flag if the link is not shown (based on FG and/or user permissions) */\n    isHidden?: boolean;\n\n    /** custom className (can be used for mdi icons) */\n    iconClassName?: string;\n\n    /** anvil's icon name of item */\n    iconName?: IconPropsStrict['name'];\n\n    /** svg icon (anvil2) of inactive item */\n    icon: IconProps['svg'] | undefined;\n\n    /** svg icon (anvil2) of active item */\n    iconActive: IconProps['svg'] | undefined;\n\n    /** icon component of item (<svg />) */\n    iconComponent?: FC;\n\n    /** item tag (optional). shown if it is set and true or greater than 0 */\n    counter?: CounterTagValue;\n    tag?: CounterTagData;\n\n    /** class name of link item */\n    className?: string;\n\n    /** optional submenu of link item */\n    submenu?: NavigationSubmenuData;\n}\n\nexport interface HeaderNavigationItemLinkProps {\n    /** link id */\n    id: string;\n\n    /** link href */\n    to: string;\n\n    /** link title */\n    title: string;\n\n    /** callback to return active state. By default, it compares link href with current pathname */\n    isActive?: boolean | ((pathname: string) => boolean);\n}\n\nexport interface HeaderNavigationTriggerPropsStrict {\n    /** unique identifier */\n    id: string;\n    /** item title (used for mobile) */\n    title: string;\n    /** tooltip text */\n    tooltip?: string;\n    /** item description */\n    hint?: string;\n    /** container class name */\n    className?: string;\n    /** item label */\n    label?: string;\n    /** label class name */\n    labelClassName?: string;\n    /** isActive */\n    isActive?: boolean;\n    /** counter value shown for item */\n    counter?: CounterTagValue;\n    tag?: CounterTagData;\n    /** counter component class name */\n    counterClassName?: string;\n    /** icon component class name */\n    iconClassName?: string;\n    /** IconComponent custom icon component */\n    iconComponent?: FC;\n    /** iconName name of anvil icon */\n    iconName?: IconPropsStrict['name'];\n    /** svg icon (anvil2) of inactive item */\n    icon: IconProps['svg'] | undefined;\n    /** svg icon (anvil2) of active item */\n    iconActive?: IconProps['svg'];\n}\n\nexport interface HeaderNavigationTriggerProps extends HeaderNavigationTriggerPropsStrict {\n    /** unstrict props */\n    [key: string]: any;\n}\n\nexport interface HeaderNavigationLinkPropsStrict\n    extends Omit<HeaderNavigationTriggerPropsStrict, 'isActive'> {\n    /** link href */\n    to: string;\n    /** isActive */\n    isActive?: boolean | ((pathname: string) => boolean);\n    /** link html target */\n    target?: HTMLAttributeAnchorTarget;\n}\n\nexport interface HeaderNavigationLinkProps extends HeaderNavigationLinkPropsStrict {\n    /** unstrict props */\n    [key: string]: any;\n}\n"],"names":[],"mappings":"AAsGA,WAGC"}

package/src/utils/navigation-legacy.ts

@@ -1,106 +0,0 @@
-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;
-    /** item title (used for mobile) */
-    title: 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'];
-}
-
-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;
-}