@servicetitan/navigation 12.0.2 → 13.0.0-canary.256.5761ed1.0

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

@@ -0,0 +1,34 @@
+import { FC } from 'react';
+
+import { TitanLayoutLinkProps, TitanLayoutTriggerProps } from './interface';
+import { useTitanLayoutPlacementContext } from './layout-context';
+import { LayoutHeaderNavigationLink, LayoutHeaderNavigationTrigger } from './layout-header-links';
+import { LayoutSidebarLink, LayoutSidebarTrigger } from './layout-sidebar-links';
+
+export const TitanLayoutLink: FC<TitanLayoutLinkProps> = props => {
+    const placement = useTitanLayoutPlacementContext();
+
+    if (placement === 'top') {
+        return <LayoutHeaderNavigationLink {...props} />;
+    }
+
+    if (placement === 'side') {
+        return <LayoutSidebarLink {...props} />;
+    }
+
+    return null;
+};
+
+export const TitanLayoutTrigger: FC<TitanLayoutTriggerProps> = props => {
+    const placement = useTitanLayoutPlacementContext();
+
+    if (placement === 'top') {
+        return <LayoutHeaderNavigationTrigger {...props} />;
+    }
+
+    if (placement === 'side') {
+        return <LayoutSidebarTrigger {...props} />;
+    }
+
+    return null;
+};

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

@@ -0,0 +1,30 @@
+import { TextField } from '@servicetitan/anvil2';
+
+import { withAnvil, withDefaultRedirects, withMemoryRouter } from '../../test/data';
+import { getDefaultArgs, withDefaultLayoutProps } from '../../test/titan-layout';
+
+const SearchBar = () => (
+    <TextField size="small" placeholder="Search" className="w-100-i m-x-half-i" />
+);
+
+export default {
+    title: 'Navigation/TitanLayout/Stacked',
+    decorators: [
+        withDefaultLayoutProps({ navVariant: 'top', top: <SearchBar /> }),
+        withDefaultRedirects,
+        withMemoryRouter,
+        withAnvil,
+    ],
+    parameters: {},
+    argTypes: {},
+    args: getDefaultArgs(),
+};
+
+export {
+    ContentLegacy,
+    ContentAnvil1,
+    ContentAnvil2,
+    ExtraWithTitle,
+    ExtraWithFlashing,
+    ExtraWithTitleFlashing,
+} from './titan-layout-default.stories';

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

@@ -4,6 +4,7 @@ import {
     ComponentPropsWithoutRef,
     FC,
     Fragment,
+    MouseEvent,
     ReactElement,
     ReactNode,
     useCallback,
@@ -26,9 +27,9 @@ import { LayoutHeader } from './layout-header';
 import { LayoutHeaderDark } from './layout-header-dark';
 import { TitanLayoutLogoProps } from './layout-logo';
 import { LayoutSidebar } from './layout-sidebar';
-import { TitanLayoutSidebarLink, TitanLayoutSidebarTrigger } from './layout-sidebar-links';
 import { InternalSideNavigationTrigger } from './layout-sidebar-links-internal';
 import { useNotificationsState } from './notifications-context';
+import { TitanLayoutLink, TitanLayoutTrigger } from './titan-layout-links';
 import * as Styles from './titan-layout.module.less';
 
 export type TitanLayoutProps = Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'style'> & {
@@ -92,7 +93,7 @@ const useAppearance = (appearance: TitanLayoutProps['appearance']) =>
         };
     }, [appearance]);
 
-const TitanLayoutComponent: FC<TitanLayoutProps> = ({
+function TitanLayoutComponent({
     appearance = 'anvil2',
     navVariant = 'left',
     id,
@@ -112,7 +113,7 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
     extraText,
     minContentWidth,
     sideTop,
-}) => {
+}: TitanLayoutProps) {
     const breakpoint = useTitanBreakpoint();
     const context: TitanLayoutContextType = useMemo(
         () => ({
@@ -148,7 +149,7 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
         }
     }, [view.isAnvil1]);
 
-    const onBurgerClick = useCallback((e: MouseEvent) => {
+    const onBurgerClick = useCallback((e: MouseEvent<never>) => {
         setMobileDrawerOpened(true);
         e.stopPropagation();
     }, []);
@@ -318,10 +319,12 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
                                                 <InternalSideNavigationTrigger
                                                     id="--extra-text"
                                                     title={extraText}
-                                                    submenuExpanded={undefined}
-                                                    tag={undefined}
+                                                    isActive={undefined}
                                                     icon={undefined}
                                                     iconActive={undefined}
+                                                    tag={undefined}
+                                                    className={undefined}
+                                                    submenuExpanded={undefined}
                                                 />
                                             )}
                                         </Fragment>
@@ -351,7 +354,7 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
             </LayoutPlacementContext.Provider>
         </LayoutContext.Provider>
     );
-};
+}
 
 const TitanLayoutHeaderObserved: FC<{
     children: ReactNode;
@@ -445,6 +448,6 @@ const LayoutContentLegacy: FC<{
 };
 
 export const TitanLayout = Object.assign(TitanLayoutComponent, {
-    Link: TitanLayoutSidebarLink,
-    Trigger: TitanLayoutSidebarTrigger,
+    Link: TitanLayoutLink,
+    Trigger: TitanLayoutTrigger,
 });

package/src/index.ts

@@ -1,19 +1,8 @@
-export * from './components/header-navigation';
 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 type * from './utils/navigation';
-export type {
-    NavLinkComponentPropsStrict,
-    NavLinkComponentProps,
-    NavigationLocationContextType,
-    NavigationLocationInfo,
-    NavigationActiveLinkMatcher,
-} from './utils/navigation-context';
-export { NavigationComponentContext, NavigationLocationContext } from './utils/navigation-context';
-export type * from './utils/navigation-legacy';
+export type { NavLinkComponentProps } from './utils/navigation-context';
 export * from './utils/use-breakpoint';

package/src/test/data.tsx

@@ -33,26 +33,17 @@ import SvgTasks from '@servicetitan/anvil2/assets/icons/st/gnav_tasks_inactive.s
 import { BodyText, Popover } from '@servicetitan/design-system';
 
 import classNames from 'classnames';
-import { FC, Fragment, forwardRef, useMemo, useState } from 'react';
+import { FC, Fragment, forwardRef, useState } from 'react';
 // needed only for storybook and added in root dependencies
 // eslint-disable-next-line import/no-extraneous-dependencies
+import { MemoryRouter, Redirect, Switch, useHistory, useLocation } from 'react-router-dom';
+import { TitanLayout } from '../components/titan-layout';
 import {
-    MemoryRouter,
-    Redirect,
-    Switch,
-    matchPath,
-    useHistory,
-    useLocation,
-} from 'react-router-dom';
-import { HeaderNavigationTrigger } from '../components/links';
-import { NavigationSubmenuGroupData, NavigationSubmenuItemData } from '../utils/navigation';
-import {
-    NavLinkComponentProps,
-    NavigationComponentContext,
-    NavigationLocationContext,
-    NavigationLocationContextType,
-} from '../utils/navigation-context';
-import { HeaderNavigationItemData } from '../utils/navigation-legacy';
+    NavigationItemData,
+    NavigationSubmenuGroupData,
+    NavigationSubmenuItemData,
+} from '../utils/navigation';
+import { NavLinkComponentProps } from '../utils/navigation-context';
 import * as Styles from './data-stories.module.less';
 
 export const NavLinkMock = forwardRef<any, NavLinkComponentProps>(
@@ -87,29 +78,9 @@ export const LocationInfo: FC<{ className?: string }> = ({ className }) => {
     return <BodyText className={className}>current location - {location.pathname}</BodyText>;
 };
 
-const LocationProvider: FC<{ children: any }> = ({ children }) => {
-    const location = useLocation();
-    const context: NavigationLocationContextType = useMemo(
-        () => ({
-            location: { pathname: location.pathname },
-            isLinkActive: (location, item) => !!matchPath(location.pathname, item.to),
-        }),
-        [location.pathname]
-    );
-
-    return (
-        <NavigationLocationContext.Provider value={context}>
-            {children}
-        </NavigationLocationContext.Provider>
-    );
-};
 export const withMemoryRouter = (Story: any) => (
     <MemoryRouter>
-        <NavigationComponentContext.Provider value={NavLinkMock}>
-            <LocationProvider>
-                <Story />
-            </LocationProvider>
-        </NavigationComponentContext.Provider>
+        <Story />
     </MemoryRouter>
 );
 
@@ -143,14 +114,10 @@ export const SearchIcon = () => (
     </svg>
 );
 
-const getItem = (
-    id: string,
-    data: Partial<HeaderNavigationItemData>
-): HeaderNavigationItemData => ({
+const getNavItem = (id: string, data: Partial<NavigationItemData>): NavigationItemData => ({
     id,
     to: '/' + id,
     title: id[0].toUpperCase() + id.substring(1),
-    hint: id,
     icon: undefined,
     iconActive: undefined,
     ...data,
@@ -186,48 +153,40 @@ const getGroup = (
     links,
 });
 
-export const items = {
-    calendar: getItem('calendar', {
-        iconName: 'event',
+export const navItems = {
+    calendar: getNavItem('calendar', {
         icon: SvgSchedule,
         iconActive: SvgScheduleActive,
     }),
-    schedule: getItem('schedule', {
-        iconName: 'event',
+    schedule: getNavItem('schedule', {
         icon: SvgSchedule,
         iconActive: SvgScheduleActive,
     }),
-    calls: getItem('calls', {
-        iconName: 'local_phone',
+    calls: getNavItem('calls', {
         icon: SvgCalls,
         iconActive: SvgCallsActive,
         counter: 1234,
     }),
-    dashboard: getItem('dashboard', {
-        iconName: 'odometer',
+    dashboard: getNavItem('dashboard', {
         icon: SvgDashboard,
         iconActive: SvgDashboardActive,
     }),
-    dispatch: getItem('dispatch', {
-        iconName: 'location_disabled',
+    dispatch: getNavItem('dispatch', {
         icon: SvgDispatch,
         iconActive: SvgDispatchActive,
         tag: { value: 3 },
     }),
-    fleet: getItem('fleet', {
-        iconName: 'fleet-pro',
+    fleet: getNavItem('fleet', {
         icon: SvgFleetPro,
         iconActive: SvgFleetProActive,
         title: 'Fleet Pro',
     }),
-    followUps: getItem('followUps', {
-        iconName: 'flag',
+    followUps: getNavItem('followUps', {
         icon: SvgFollowUp,
         iconActive: SvgFollowUpActive,
         title: 'Follow Up',
     }),
-    followUpsWithSubmenu: getItem('followUps', {
-        iconName: 'flag',
+    followUpsWithSubmenu: getNavItem('followUps', {
         icon: SvgFollowUp,
         iconActive: SvgFollowUpActive,
         title: 'Follow Up',
@@ -241,14 +200,12 @@ export const items = {
             ],
         },
     }),
-    inventory: getItem('inventory', {
-        iconName: 'toys',
+    inventory: getNavItem('inventory', {
         icon: SvgInventory,
         iconActive: SvgInventoryActive,
     }),
-    purchasing: getItem('purchasing', { iconComponent: InventoryIcon }),
-    purchasingWithSubmenu: getItem('purchasing', {
-        iconName: 'toys',
+    purchasing: getNavItem('purchasing', {}),
+    purchasingWithSubmenu: getNavItem('purchasing', {
         icon: SvgInventory,
         iconActive: SvgInventoryActive,
         counter: true,
@@ -263,14 +220,12 @@ export const items = {
             ],
         },
     }),
-    accounting: getItem('accounting', {
-        iconName: 'assignment',
+    accounting: getNavItem('accounting', {
         icon: SvgAccounting,
         iconActive: SvgAccountingActive,
         counter: true,
     }),
-    accountingWithSubmenu: getItem('accounting', {
-        iconName: 'assignment',
+    accountingWithSubmenu: getNavItem('accounting', {
         icon: SvgAccounting,
         iconActive: SvgAccountingActive,
         counter: 1,
@@ -292,34 +247,28 @@ export const items = {
             ],
         },
     }),
-    marketing: getItem('marketing', {
-        iconName: 'bullhorn',
+    marketing: getNavItem('marketing', {
         icon: SvgMarketing,
         iconActive: SvgMarketingActive,
     }),
-    priceBook: getItem('pricebook', {
-        iconName: 'book',
+    priceBook: getNavItem('pricebook', {
         icon: SvgPriceBook,
         iconActive: SvgPriceBookActive,
     }),
-    pointOfSale: getItem('pointOfSale', {
-        iconName: 'cash-register',
+    pointOfSale: getNavItem('pointOfSale', {
         icon: SvgPos,
         iconActive: SvgPosActive,
         title: 'Point Of Sale',
     }),
-    projects: getItem('projects', {
-        iconName: 'folder_special',
+    projects: getNavItem('projects', {
         icon: SvgProjects,
         iconActive: SvgProjectsActive,
     }),
-    reports: getItem('reports', {
-        iconName: 'folder_special',
+    reports: getNavItem('reports', {
         icon: SvgReports,
         iconActive: SvgReportsActive,
     }),
-    tasks: getItem('tasks', {
-        iconName: 'format_list_bulleted',
+    tasks: getNavItem('tasks', {
         icon: SvgTasks,
         iconActive: SvgTasksActive,
     }),
@@ -334,9 +283,8 @@ export const CallsNavigationTrigger = () => {
             onClickOutside={() => setOpen(false)}
             direction="bl"
             trigger={
-                <HeaderNavigationTrigger
+                <TitanLayout.Trigger
                     id="dialpad"
-                    iconName="phone"
                     counter={2}
                     title="Calls"
                     icon={SvgPhone}

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-context.tsx

@@ -1,45 +1,19 @@
-import { FC, HTMLAttributeAnchorTarget, ReactNode, createContext } from 'react';
-import { NavigationLinkData } from './navigation';
+import { ComponentPropsWithoutRef, FC } from 'react';
 
-export interface NavLinkComponentPropsStrict {
+export type NavLinkComponentProps = ComponentPropsWithoutRef<'a'> & {
     to: string;
-    title?: string;
-    className?: string;
     activeClassName?: string;
-    children: ReactNode;
     isActive?: (pathname: string) => boolean;
-    target?: HTMLAttributeAnchorTarget;
-}
-
-export interface NavLinkComponentProps extends NavLinkComponentPropsStrict {
-    [key: string]: any;
-}
+};
 
 export const DefaultNavLinkComponent: FC<NavLinkComponentProps> = ({
     children,
+    to,
     activeClassName,
     isActive,
     ...props
-}) => <a {...props}>{children}</a>;
-
-export interface NavigationLocationInfo {
-    pathname: string;
-}
-
-export type NavigationActiveLinkMatcher = (
-    location: NavigationLocationInfo,
-    link: NavigationLinkData
-) => boolean;
-
-export interface NavigationLocationContextType {
-    location: NavigationLocationInfo;
-    isLinkActive: NavigationActiveLinkMatcher;
-}
-
-export const NavigationComponentContext =
-    createContext<FC<NavLinkComponentProps>>(DefaultNavLinkComponent);
-export const NavigationLegacyContext = createContext(false);
-export const NavigationLocationContext = createContext<NavigationLocationContextType>({
-    location: { pathname: '' },
-    isLinkActive: () => false,
-});
+}) => (
+    <a href={to} {...props}>
+        {children}
+    </a>
+);

package/src/utils/navigation.ts

@@ -1,23 +1,13 @@
 import { IconProps } from '@servicetitan/anvil2';
-import { FC } from 'react';
 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;
-
-    /** custom className (can be used for mdi icons) */
-    iconClassName?: string;
-
     /** 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;
@@ -27,6 +17,9 @@ export interface NavigationItemData extends NavigationLinkData {
 
     /** optional submenu of link item */
     submenu?: NavigationSubmenuData;
+
+    iconClassName?: never;
+    iconComponent?: never;
 }
 
 export interface NavigationLinkData {

package/dist/components/header-navigation/header-navigation-content.d.ts

@@ -1,30 +0,0 @@
-import { IconPropsStrict } from '@servicetitan/design-system';
-import { FC } from 'react';
-import { HeaderNavigationItemData } from '../../utils/navigation-legacy';
-import { CounterTagProps } from '../counter-tag';
-export interface HeaderNavigationItemContentPropsStrict {
-    /** item text */
-    title?: string;
-    /** text component class name */
-    titleClassName?: string;
-    /** counter tag shown for item */
-    tag: CounterTagProps | undefined;
-    /** 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'];
-}
-/** Content for navigation items */
-export declare const HeaderNavigationItemContent: FC<HeaderNavigationItemContentPropsStrict>;
-interface HeaderNavigationItemPropsStrict extends HeaderNavigationItemData {
-    minimized: boolean;
-    main: boolean;
-}
-/** Navigation main menu item */
-export declare const HeaderNavigationItem: FC<HeaderNavigationItemPropsStrict>;
-export {};
-//# sourceMappingURL=header-navigation-content.d.ts.map

package/dist/components/header-navigation/header-navigation-content.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"header-navigation-content.d.ts","sourceRoot":"","sources":["../../../src/components/header-navigation/header-navigation-content.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAEpE,OAAO,EAAE,EAAE,EAAwB,MAAM,OAAO,CAAC;AAEjD,OAAO,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAEzE,OAAO,EAAc,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAI7D,MAAM,WAAW,sCAAsC;IACnD,gBAAgB;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iCAAiC;IACjC,GAAG,EAAE,eAAe,GAAG,SAAS,CAAC;IACjC,mCAAmC;IACnC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gCAAgC;IAChC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,0CAA0C;IAC1C,aAAa,CAAC,EAAE,EAAE,CAAC;IACnB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;CACtC;AAED,mCAAmC;AACnC,eAAO,MAAM,2BAA2B,EAAE,EAAE,CAAC,sCAAsC,CAqClF,CAAC;AAEF,UAAU,+BAAgC,SAAQ,wBAAwB;IACtE,SAAS,EAAE,OAAO,CAAC;IACnB,IAAI,EAAE,OAAO,CAAC;CACjB;AAED,gCAAgC;AAChC,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC,+BAA+B,CA8CpE,CAAC"}

package/dist/components/header-navigation/header-navigation-content.js

@@ -1,58 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Icon } from '@servicetitan/design-system';
-import classNames from 'classnames';
-import { Fragment, useContext } from 'react';
-import { NavigationComponentContext } from '../../utils/navigation-context';
-import { getCounterTag } from '../../utils/side-nav';
-import { CounterTag } from '../counter-tag';
-import * as Styles from './header-navigation.module.less';
-import { withTooltip } from './with-tooltip';
-/** Content for navigation items */ export const HeaderNavigationItemContent = ({ title, titleClassName, counterClassName, iconClassName, iconComponent: IconComponent, iconName, tag })=>{
-    const iconClass = classNames(Styles.navigationIcon, iconClassName);
-    return /*#__PURE__*/ _jsxs(Fragment, {
-        children: [
-            IconComponent ? /*#__PURE__*/ _jsx("i", {
-                className: iconClass,
-                children: /*#__PURE__*/ _jsx(IconComponent, {})
-            }) : iconName ? /*#__PURE__*/ _jsx(Icon, {
-                name: iconName,
-                className: iconClass
-            }) : /*#__PURE__*/ _jsx("i", {
-                className: iconClass
-            }),
-            !!title && /*#__PURE__*/ _jsx("span", {
-                className: classNames(Styles.navigationItemTitle, titleClassName),
-                children: title
-            }),
-            !!tag && /*#__PURE__*/ _jsx(CounterTag, {
-                data: tag,
-                className: classNames(Styles.navigationItemCounter, counterClassName),
-                longClassName: Styles.navigationItemCounterLong
-            })
-        ]
-    });
-};
-/** Navigation main menu item */ export const HeaderNavigationItem = ({ id, to, counter, title, hint, className, iconClassName, iconComponent, iconName, isActive, main, minimized, tag })=>{
-    const NavigationComponent = useContext(NavigationComponentContext);
-    return withTooltip(/*#__PURE__*/ _jsx(NavigationComponent, {
-        "data-cy": `navigation-item-${id}`,
-        "data-pendo": `navigation-item-${id}`,
-        to: to,
-        title: hint,
-        className: classNames(Styles.navigationItem, main ? Styles.navigationItemMain : Styles.navigationItemOverflow, className, {
-            [Styles.navigationItemActive]: isActive === true
-        }),
-        isActive: typeof isActive === 'function' ? isActive : undefined,
-        activeClassName: Styles.navigationItemActive,
-        children: /*#__PURE__*/ _jsx(HeaderNavigationItemContent, {
-            title: minimized ? undefined : title,
-            titleClassName: main ? '' : 'm-l-half',
-            tag: getCounterTag(counter, tag),
-            iconComponent: iconComponent,
-            iconClassName: iconClassName,
-            iconName: iconName
-        })
-    }, id), minimized ? title : undefined);
-};
-
-//# sourceMappingURL=header-navigation-content.js.map

package/dist/components/header-navigation/header-navigation-content.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/components/header-navigation/header-navigation-content.tsx"],"sourcesContent":["import { Icon, IconPropsStrict } from '@servicetitan/design-system';\nimport classNames from 'classnames';\nimport { FC, Fragment, useContext } from 'react';\nimport { NavigationComponentContext } from '../../utils/navigation-context';\nimport { HeaderNavigationItemData } from '../../utils/navigation-legacy';\nimport { getCounterTag } from '../../utils/side-nav';\nimport { CounterTag, CounterTagProps } from '../counter-tag';\nimport * as Styles from './header-navigation.module.less';\nimport { withTooltip } from './with-tooltip';\n\nexport interface HeaderNavigationItemContentPropsStrict {\n    /** item text */\n    title?: string;\n    /** text component class name */\n    titleClassName?: string;\n    /** counter tag shown for item */\n    tag: CounterTagProps | undefined;\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}\n\n/** Content for navigation items */\nexport const HeaderNavigationItemContent: FC<HeaderNavigationItemContentPropsStrict> = ({\n    title,\n    titleClassName,\n    counterClassName,\n    iconClassName,\n    iconComponent: IconComponent,\n    iconName,\n    tag,\n}) => {\n    const iconClass = classNames(Styles.navigationIcon, iconClassName);\n    return (\n        <Fragment>\n            {IconComponent ? (\n                <i className={iconClass}>\n                    <IconComponent />\n                </i>\n            ) : iconName ? (\n                <Icon name={iconName} className={iconClass} />\n            ) : (\n                <i className={iconClass} />\n            )}\n\n            {!!title && (\n                <span className={classNames(Styles.navigationItemTitle, titleClassName)}>\n                    {title}\n                </span>\n            )}\n\n            {!!tag && (\n                <CounterTag\n                    data={tag}\n                    className={classNames(Styles.navigationItemCounter, counterClassName)}\n                    longClassName={Styles.navigationItemCounterLong}\n                />\n            )}\n        </Fragment>\n    );\n};\n\ninterface HeaderNavigationItemPropsStrict extends HeaderNavigationItemData {\n    minimized: boolean;\n    main: boolean;\n}\n\n/** Navigation main menu item */\nexport const HeaderNavigationItem: FC<HeaderNavigationItemPropsStrict> = ({\n    id,\n    to,\n    counter,\n    title,\n    hint,\n    className,\n    iconClassName,\n    iconComponent,\n    iconName,\n    isActive,\n    main,\n    minimized,\n    tag,\n}) => {\n    const NavigationComponent = useContext(NavigationComponentContext);\n\n    return withTooltip(\n        <NavigationComponent\n            data-cy={`navigation-item-${id}`}\n            data-pendo={`navigation-item-${id}`}\n            key={id}\n            to={to}\n            title={hint}\n            className={classNames(\n                Styles.navigationItem,\n                main ? Styles.navigationItemMain : Styles.navigationItemOverflow,\n                className,\n                {\n                    [Styles.navigationItemActive]: isActive === true,\n                }\n            )}\n            isActive={typeof isActive === 'function' ? isActive : undefined}\n            activeClassName={Styles.navigationItemActive}\n        >\n            <HeaderNavigationItemContent\n                title={minimized ? undefined : title}\n                titleClassName={main ? '' : 'm-l-half'}\n                tag={getCounterTag(counter, tag)}\n                iconComponent={iconComponent}\n                iconClassName={iconClassName}\n                iconName={iconName}\n            />\n        </NavigationComponent>,\n        minimized ? title : undefined\n    );\n};\n"],"names":["Icon","classNames","Fragment","useContext","NavigationComponentContext","getCounterTag","CounterTag","Styles","withTooltip","HeaderNavigationItemContent","title","titleClassName","counterClassName","iconClassName","iconComponent","IconComponent","iconName","tag","iconClass","navigationIcon","i","className","name","span","navigationItemTitle","data","navigationItemCounter","longClassName","navigationItemCounterLong","HeaderNavigationItem","id","to","counter","hint","isActive","main","minimized","NavigationComponent","data-cy","data-pendo","navigationItem","navigationItemMain","navigationItemOverflow","navigationItemActive","undefined","activeClassName"],"mappings":";AAAA,SAASA,IAAI,QAAyB,8BAA8B;AACpE,OAAOC,gBAAgB,aAAa;AACpC,SAAaC,QAAQ,EAAEC,UAAU,QAAQ,QAAQ;AACjD,SAASC,0BAA0B,QAAQ,iCAAiC;AAE5E,SAASC,aAAa,QAAQ,uBAAuB;AACrD,SAASC,UAAU,QAAyB,iBAAiB;AAC7D,YAAYC,YAAY,kCAAkC;AAC1D,SAASC,WAAW,QAAQ,iBAAiB;AAmB7C,iCAAiC,GACjC,OAAO,MAAMC,8BAA0E,CAAC,EACpFC,KAAK,EACLC,cAAc,EACdC,gBAAgB,EAChBC,aAAa,EACbC,eAAeC,aAAa,EAC5BC,QAAQ,EACRC,GAAG,EACN;IACG,MAAMC,YAAYjB,WAAWM,OAAOY,cAAc,EAAEN;IACpD,qBACI,MAACX;;YACIa,8BACG,KAACK;gBAAEC,WAAWH;0BACV,cAAA,KAACH;iBAELC,yBACA,KAAChB;gBAAKsB,MAAMN;gBAAUK,WAAWH;+BAEjC,KAACE;gBAAEC,WAAWH;;YAGjB,CAAC,CAACR,uBACC,KAACa;gBAAKF,WAAWpB,WAAWM,OAAOiB,mBAAmB,EAAEb;0BACnDD;;YAIR,CAAC,CAACO,qBACC,KAACX;gBACGmB,MAAMR;gBACNI,WAAWpB,WAAWM,OAAOmB,qBAAqB,EAAEd;gBACpDe,eAAepB,OAAOqB,yBAAyB;;;;AAKnE,EAAE;AAOF,8BAA8B,GAC9B,OAAO,MAAMC,uBAA4D,CAAC,EACtEC,EAAE,EACFC,EAAE,EACFC,OAAO,EACPtB,KAAK,EACLuB,IAAI,EACJZ,SAAS,EACTR,aAAa,EACbC,aAAa,EACbE,QAAQ,EACRkB,QAAQ,EACRC,IAAI,EACJC,SAAS,EACTnB,GAAG,EACN;IACG,MAAMoB,sBAAsBlC,WAAWC;IAEvC,OAAOI,0BACH,KAAC6B;QACGC,WAAS,CAAC,gBAAgB,EAAER,IAAI;QAChCS,cAAY,CAAC,gBAAgB,EAAET,IAAI;QAEnCC,IAAIA;QACJrB,OAAOuB;QACPZ,WAAWpB,WACPM,OAAOiC,cAAc,EACrBL,OAAO5B,OAAOkC,kBAAkB,GAAGlC,OAAOmC,sBAAsB,EAChErB,WACA;YACI,CAACd,OAAOoC,oBAAoB,CAAC,EAAET,aAAa;QAChD;QAEJA,UAAU,OAAOA,aAAa,aAAaA,WAAWU;QACtDC,iBAAiBtC,OAAOoC,oBAAoB;kBAE5C,cAAA,KAAClC;YACGC,OAAO0B,YAAYQ,YAAYlC;YAC/BC,gBAAgBwB,OAAO,KAAK;YAC5BlB,KAAKZ,cAAc2B,SAASf;YAC5BH,eAAeA;YACfD,eAAeA;YACfG,UAAUA;;OApBTc,KAuBTM,YAAY1B,QAAQkC;AAE5B,EAAE"}

package/dist/components/header-navigation/header-navigation-extra-stacked.stories.d.ts

@@ -1,9 +0,0 @@
-declare const _default: {
-    title: string;
-    component: import("react").FC<import("../..").HeaderNavigationLinkProps>;
-    decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
-    parameters: {};
-};
-export default _default;
-export { ExtraWithTooltip, ExtraLink, ExtraTrigger, ExtraWithLabel, } from './header-navigation-extra.stories';
-//# sourceMappingURL=header-navigation-extra-stacked.stories.d.ts.map

package/dist/components/header-navigation/header-navigation-extra-stacked.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"header-navigation-extra-stacked.stories.d.ts","sourceRoot":"","sources":["../../../src/components/header-navigation/header-navigation-extra-stacked.stories.tsx"],"names":[],"mappings":";;;;;;AAMA,wBAKE;AAEF,OAAO,EACH,gBAAgB,EAChB,SAAS,EACT,YAAY,EACZ,cAAc,GACjB,MAAM,mCAAmC,CAAC"}

package/dist/components/header-navigation/header-navigation-extra.stories.d.ts

@@ -1,12 +0,0 @@
-declare const _default: {
-    title: string;
-    component: import("react").FC<import("../..").HeaderNavigationLinkProps>;
-    decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
-    parameters: {};
-};
-export default _default;
-export declare const ExtraLink: () => import("react/jsx-runtime").JSX.Element;
-export declare const ExtraTrigger: () => import("react/jsx-runtime").JSX.Element;
-export declare const ExtraWithTooltip: () => import("react/jsx-runtime").JSX.Element;
-export declare const ExtraWithLabel: () => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=header-navigation-extra.stories.d.ts.map

package/dist/components/header-navigation/header-navigation-extra.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"header-navigation-extra.stories.d.ts","sourceRoot":"","sources":["../../../src/components/header-navigation/header-navigation-extra.stories.tsx"],"names":[],"mappings":";;;;;;AAeA,wBAKE;AAEF,eAAO,MAAM,SAAS,+CAWrB,CAAC;AAEF,eAAO,MAAM,YAAY,+CAUxB,CAAC;AAEF,eAAO,MAAM,gBAAgB,+CA0B5B,CAAC;AA2CF,eAAO,MAAM,cAAc,+CAyB1B,CAAC"}