@servicetitan/navigation 10.6.1 → 11.0.0-canary.237.4cefc6a.0

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

@@ -0,0 +1,270 @@
+import classNames from 'classnames';
+import {
+    CSSProperties,
+    Children,
+    ComponentPropsWithoutRef,
+    FC,
+    Fragment,
+    ReactElement,
+    ReactNode,
+    isValidElement,
+    useCallback,
+    useEffect,
+    useMemo,
+    useState,
+} from 'react';
+import { NavigationItemData } from '../../utils/navigation';
+import { DefaultNavLinkComponent, NavLinkComponentProps } from '../../utils/navigation-context';
+import { useTitanBreakpoint } from '../../utils/use-breakpoint';
+import { TitanLayoutState } from './interface';
+import {
+    LayoutContext,
+    LayoutPlacementContext,
+    TitanLayoutContextType,
+    TitanLayoutSidebarContextType,
+} from './layout-context';
+import { LayoutHeader } from './layout-header';
+import { TitanLayoutLogo, TitanLayoutLogoProps } from './layout-logo';
+import { LayoutSidebar } from './layout-sidebar';
+import { TitanLayoutSidebarLink, TitanLayoutSidebarTrigger } from './layout-sidebar-links';
+import { InternalSideNavigationTrigger } from './layout-sidebar-links-internal';
+import * as Styles from './titan-layout.module.less';
+
+type TitanLayoutChild = ReactElement<TitanLayoutContentProps> | ReactElement<TitanLayoutLogoProps>;
+
+export type TitanLayoutProps = Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'style'> & {
+    empty?: boolean;
+
+    appearance?: 'legacy' | 'anvil1' | 'anvil2';
+
+    /** component used for navigation */
+    navigationComponent?: FC<NavLinkComponentProps>;
+
+    /** data for main navigation links */
+    navigationMainItems?: NavigationItemData[];
+
+    /** layout's content */
+    children?: TitanLayoutChild | TitanLayoutChild[];
+
+    state?: TitanLayoutState;
+    onStateChange?: (state: TitanLayoutState) => void;
+
+    header?: ReactElement;
+    profile?: ReactElement;
+    extraLinks?: ReactElement;
+    extraLinksTop?: ReactElement;
+    extraText?: string;
+    sidebarTop?: ReactElement[];
+};
+
+const defaultSidebarContext: TitanLayoutSidebarContextType = {
+    styles: {
+        popoverContent: {
+            '--background-color-strong': '#24323C',
+            'color': 'var(--color-white)',
+        } as CSSProperties,
+    },
+};
+
+const useVariant = (appearance: TitanLayoutProps['appearance']) =>
+    useMemo(() => {
+        const isLegacy = appearance === 'legacy';
+        const isAnvil1 = appearance === 'anvil1';
+        const isAnvil2 = appearance === 'anvil2';
+
+        return {
+            isLegacy,
+            isAnvil1,
+            isAnvil2,
+            isSequent: isLegacy || isAnvil1,
+        };
+    }, [appearance]);
+
+const useLayoutChildren = (children: TitanLayoutProps['children']) =>
+    useMemo(
+        () =>
+            Children.toArray(children).reduce(
+                (out, item) => {
+                    if (
+                        item &&
+                        isValidElement(item) &&
+                        item.type &&
+                        typeof item.type !== 'string'
+                    ) {
+                        if (item.type.name === TitanLayoutContent.name) {
+                            out.content = item as any;
+                        } else if (item.type.name === TitanLayoutLogo.name) {
+                            out.logo = item as any;
+                        }
+                    }
+                    return out;
+                },
+                {
+                    logo: <TitanLayoutLogo />,
+                } as {
+                    content?: ReactElement<TitanLayoutContentProps>;
+                    logo: ReactElement<TitanLayoutLogoProps>;
+                }
+            ),
+        [children]
+    );
+
+const TitanLayoutComponent: FC<TitanLayoutProps> = ({
+    appearance = 'anvil2',
+    id,
+    children,
+    navigationComponent,
+    header,
+    profile,
+    state,
+    onStateChange,
+    navigationMainItems,
+    extraLinks,
+    extraLinksTop,
+    extraText,
+    sidebarTop,
+}) => {
+    const breakpoint = useTitanBreakpoint();
+    const isMobile = breakpoint.isMobile;
+    const context: TitanLayoutContextType = useMemo(
+        () => ({
+            NavigationComponent: navigationComponent ?? DefaultNavLinkComponent,
+            breakpoint,
+            isTitanLayout: true,
+            sidebar: defaultSidebarContext,
+        }),
+        [navigationComponent, breakpoint]
+    );
+    const variant = useVariant(appearance);
+    const [mobileDrawerOpened, setMobileDrawerOpened] = useState(false);
+    const { content, logo } = useLayoutChildren(children);
+
+    useEffect(() => {
+        if (!isMobile) {
+            setMobileDrawerOpened(false);
+            return;
+        }
+
+        const listener = () => {
+            setMobileDrawerOpened(false);
+        };
+
+        document.addEventListener('click', listener);
+
+        return () => document.removeEventListener('click', listener);
+    }, [isMobile]);
+
+    const onBurgerClick = useCallback((e: MouseEvent) => {
+        setMobileDrawerOpened(true);
+        e.stopPropagation();
+    }, []);
+
+    const onBarExpandChange = useCallback(
+        (expanded: boolean) => {
+            if (isMobile) {
+                setMobileDrawerOpened(false);
+            } else {
+                onStateChange?.({ navCollapsed: !expanded });
+            }
+        },
+        [onStateChange, isMobile]
+    );
+    const onSubmenuExpandChange = useCallback(
+        (id: string, expanded: boolean) => {
+            onStateChange?.({
+                navCollapsed: state?.navCollapsed ?? false,
+                submenuExpanded: expanded ? id : undefined,
+            });
+        },
+        [state, onStateChange]
+    );
+
+    const [layoutStyles] = useState<object>({});
+
+    const layoutClass = variant.isLegacy
+        ? Styles.layoutLegacy
+        : variant.isAnvil1
+          ? Styles.layoutAnvil1
+          : Styles.layoutAnvil2;
+
+    return (
+        <LayoutContext.Provider value={context}>
+            <LayoutPlacementContext.Provider value="unset">
+                <div
+                    id={id}
+                    className={classNames(
+                        Styles.layout,
+                        isMobile
+                            ? Styles.layoutMobile
+                            : state?.navCollapsed
+                              ? Styles.layoutNavSlim
+                              : Styles.layoutNavWide,
+                        layoutClass
+                    )}
+                    style={layoutStyles}
+                >
+                    {variant.isSequent && <div className={Styles.topPlaceholder} />}
+                    <LayoutHeader
+                        className={Styles.top}
+                        logo={logo}
+                        profile={isMobile ? undefined : profile}
+                        center={header}
+                        rightText={isMobile ? undefined : extraText}
+                        right={
+                            <Fragment>
+                                {extraLinksTop}
+                                {!isMobile && extraLinks}
+                            </Fragment>
+                        }
+                        onBurgerClick={onBurgerClick}
+                    />
+
+                    <LayoutSidebar
+                        flex={!variant.isSequent}
+                        mobile={breakpoint.isMobile}
+                        barExpanded={isMobile ? mobileDrawerOpened : !state?.navCollapsed}
+                        submenuExpanded={state?.submenuExpanded}
+                        onBarExpandChange={onBarExpandChange}
+                        onSubmenuExpandChange={onSubmenuExpandChange}
+                        top={sidebarTop}
+                        mainItems={navigationMainItems}
+                        navigationComponent={context.NavigationComponent}
+                        bottom={
+                            isMobile ? (
+                                <Fragment>
+                                    {profile}
+                                    {extraLinks}
+                                    {!!extraText && (
+                                        <InternalSideNavigationTrigger
+                                            id="__extra_text"
+                                            title={extraText}
+                                            submenuExpanded={undefined}
+                                            dataPrefix="navigation-extra-text"
+                                            tag={undefined}
+                                            icon={undefined}
+                                            iconActive={undefined}
+                                        />
+                                    )}
+                                </Fragment>
+                            ) : undefined
+                        }
+                    />
+
+                    {content}
+                </div>
+            </LayoutPlacementContext.Provider>
+        </LayoutContext.Provider>
+    );
+};
+
+export interface TitanLayoutContentProps {
+    children: ReactNode;
+}
+const TitanLayoutContent: FC<TitanLayoutContentProps> = ({ children }) => children;
+
+export const TitanLayout = Object.assign(TitanLayoutComponent, {
+    Content: TitanLayoutContent,
+    Logo: TitanLayoutLogo,
+    SidebarLink: TitanLayoutSidebarLink,
+    SidebarTrigger: TitanLayoutSidebarTrigger,
+});

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]
+    );
+};

package/dist/components/badge-tag.d.ts

@@ -1,12 +0,0 @@
-import { FC } from 'react';
-import { CounterTagData } from '../utils/counter-tag';
-export interface BadgeTagProps extends CounterTagData {
-    [key: string]: any;
-    className: string;
-}
-export declare const BadgeTag: FC<{
-    className?: string;
-    longClassName?: string;
-    data: BadgeTagProps | undefined;
-}>;
-//# sourceMappingURL=badge-tag.d.ts.map

package/dist/components/badge-tag.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"badge-tag.d.ts","sourceRoot":"","sources":["../../src/components/badge-tag.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAC3B,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEtD,MAAM,WAAW,aAAc,SAAQ,cAAc;IACjD,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,EAAE,aAAa,GAAG,SAAS,CAAC;CACnC,CAeA,CAAC"}

package/dist/components/badge-tag.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Badge } from '@servicetitan/anvil2';
-import classNames from 'classnames';
-export const BadgeTag = ({ className, data, longClassName }) => {
-    const { value, className: dataClassName, ...rest } = data !== null && data !== void 0 ? data : {};
-    return value ? (_jsx(Badge, { ...rest, className: classNames(className, dataClassName, typeof value === 'number' && value >= 100 && longClassName), children: typeof value === 'number' ? (value >= 100 ? '99+' : value) : undefined })) : null;
-};
-//# sourceMappingURL=badge-tag.js.map

package/dist/components/badge-tag.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"badge-tag.js","sourceRoot":"","sources":["../../src/components/badge-tag.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAC7C,OAAO,UAAU,MAAM,YAAY,CAAC;AASpC,MAAM,CAAC,MAAM,QAAQ,GAIhB,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,aAAa,EAAE,EAAE,EAAE;IACxC,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,GAAG,IAAI,EAAE,GAAG,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,EAAE,CAAC;IAEhE,OAAO,KAAK,CAAC,CAAC,CAAC,CACX,KAAC,KAAK,OACE,IAAI,EACR,SAAS,EAAE,UAAU,CACjB,SAAS,EACT,aAAa,EACb,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,IAAI,GAAG,IAAI,aAAa,CAC7D,YAEA,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,GACnE,CACX,CAAC,CAAC,CAAC,IAAI,CAAC;AACb,CAAC,CAAC"}

package/dist/components/counter-tag.d.ts

@@ -1,12 +0,0 @@
-import { FC } from 'react';
-import { CounterTagData } from '../utils/counter-tag';
-export interface CounterTagProps extends CounterTagData {
-    [key: string]: any;
-    className: string;
-}
-export declare const CounterTag: FC<{
-    className?: string;
-    longClassName?: string;
-    data: CounterTagProps | undefined;
-}>;
-//# sourceMappingURL=counter-tag.d.ts.map

package/dist/components/counter-tag.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"counter-tag.d.ts","sourceRoot":"","sources":["../../src/components/counter-tag.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAC3B,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEtD,MAAM,WAAW,eAAgB,SAAQ,cAAc;IACnD,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,EAAE,eAAe,GAAG,SAAS,CAAC;CACrC,CAkBA,CAAC"}

package/dist/components/counter-tag.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Tag } from '@servicetitan/design-system';
-import classNames from 'classnames';
-export const CounterTag = ({ className, data, longClassName }) => {
-    const { value, className: dataClassName, ...rest } = data !== null && data !== void 0 ? data : {};
-    return value ? (_jsx(Tag, { color: "critical", ...rest, className: classNames(className, dataClassName, typeof value === 'number' && value > 10 && longClassName), compact: true, badge: true, children: value })) : null;
-};
-//# sourceMappingURL=counter-tag.js.map

package/dist/components/counter-tag.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"counter-tag.js","sourceRoot":"","sources":["../../src/components/counter-tag.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,6BAA6B,CAAC;AAClD,OAAO,UAAU,MAAM,YAAY,CAAC;AASpC,MAAM,CAAC,MAAM,UAAU,GAIlB,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,aAAa,EAAE,EAAE,EAAE;IACxC,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,GAAG,IAAI,EAAE,GAAG,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,EAAE,CAAC;IAEhE,OAAO,KAAK,CAAC,CAAC,CAAC,CACX,KAAC,GAAG,IACA,KAAK,EAAC,UAAU,KACZ,IAAI,EACR,SAAS,EAAE,UAAU,CACjB,SAAS,EACT,aAAa,EACb,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,GAAG,EAAE,IAAI,aAAa,CAC3D,EACD,OAAO,QACP,KAAK,kBAEJ,KAAK,GACJ,CACT,CAAC,CAAC,CAAC,IAAI,CAAC;AACb,CAAC,CAAC"}

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,22 +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 (_jsxs(Fragment, { children: [IconComponent ? (_jsx("i", { className: iconClass, children: _jsx(IconComponent, {}) })) : iconName ? (_jsx(Icon, { name: iconName, className: iconClass })) : (_jsx("i", { className: iconClass })), !!title && (_jsx("span", { className: classNames(Styles.navigationItemTitle, titleClassName), children: title })), !!tag && (_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(_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: _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,"file":"header-navigation-content.js","sourceRoot":"","sources":["../../../src/components/header-navigation/header-navigation-content.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAmB,MAAM,6BAA6B,CAAC;AACpE,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAM,QAAQ,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,0BAA0B,EAAE,MAAM,gCAAgC,CAAC;AAE5E,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,UAAU,EAAmB,MAAM,gBAAgB,CAAC;AAC7D,OAAO,KAAK,MAAM,MAAM,iCAAiC,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAmB7C,mCAAmC;AACnC,MAAM,CAAC,MAAM,2BAA2B,GAA+C,CAAC,EACpF,KAAK,EACL,cAAc,EACd,gBAAgB,EAChB,aAAa,EACb,aAAa,EAAE,aAAa,EAC5B,QAAQ,EACR,GAAG,GACN,EAAE,EAAE;IACD,MAAM,SAAS,GAAG,UAAU,CAAC,MAAM,CAAC,cAAc,EAAE,aAAa,CAAC,CAAC;IACnE,OAAO,CACH,MAAC,QAAQ,eACJ,aAAa,CAAC,CAAC,CAAC,CACb,YAAG,SAAS,EAAE,SAAS,YACnB,KAAC,aAAa,KAAG,GACjB,CACP,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CACX,KAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,GAAI,CACjD,CAAC,CAAC,CAAC,CACA,YAAG,SAAS,EAAE,SAAS,GAAI,CAC9B,EAEA,CAAC,CAAC,KAAK,IAAI,CACR,eAAM,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,mBAAmB,EAAE,cAAc,CAAC,YAClE,KAAK,GACH,CACV,EAEA,CAAC,CAAC,GAAG,IAAI,CACN,KAAC,UAAU,IACP,IAAI,EAAE,GAAG,EACT,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,qBAAqB,EAAE,gBAAgB,CAAC,EACrE,aAAa,EAAE,MAAM,CAAC,yBAAyB,GACjD,CACL,IACM,CACd,CAAC;AACN,CAAC,CAAC;AAOF,gCAAgC;AAChC,MAAM,CAAC,MAAM,oBAAoB,GAAwC,CAAC,EACtE,EAAE,EACF,EAAE,EACF,OAAO,EACP,KAAK,EACL,IAAI,EACJ,SAAS,EACT,aAAa,EACb,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,GAAG,GACN,EAAE,EAAE;IACD,MAAM,mBAAmB,GAAG,UAAU,CAAC,0BAA0B,CAAC,CAAC;IAEnE,OAAO,WAAW,CACd,KAAC,mBAAmB,eACP,mBAAmB,EAAE,EAAE,gBACpB,mBAAmB,EAAE,EAAE,EAEnC,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,IAAI,EACX,SAAS,EAAE,UAAU,CACjB,MAAM,CAAC,cAAc,EACrB,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC,CAAC,MAAM,CAAC,sBAAsB,EAChE,SAAS,EACT;YACI,CAAC,MAAM,CAAC,oBAAoB,CAAC,EAAE,QAAQ,KAAK,IAAI;SACnD,CACJ,EACD,QAAQ,EAAE,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAC/D,eAAe,EAAE,MAAM,CAAC,oBAAoB,YAE5C,KAAC,2BAA2B,IACxB,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,EACpC,cAAc,EAAE,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,EACtC,GAAG,EAAE,aAAa,CAAC,OAAO,EAAE,GAAG,CAAC,EAChC,aAAa,EAAE,aAAa,EAC5B,aAAa,EAAE,aAAa,EAC5B,QAAQ,EAAE,QAAQ,GACpB,IArBG,EAAE,CAsBW,EACtB,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAChC,CAAC;AACN,CAAC,CAAC"}

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-stacked.stories.js

@@ -1,13 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { withAnvil, withMemoryRouter } from '../../test/data';
-import { HeaderNavigationLink } from '../links';
-import { HeaderNavigationStacked } from './header-navigation';
-const withHeaderNavigationStacked = (Story) => _jsx(HeaderNavigationStacked, { right: _jsx(Story, {}) });
-export default {
-    title: 'Navigation/Extra/Stacked',
-    component: HeaderNavigationLink,
-    decorators: [withHeaderNavigationStacked, withMemoryRouter, withAnvil],
-    parameters: {},
-};
-export { ExtraWithTooltip, ExtraLink, ExtraTrigger, ExtraWithLabel, } from './header-navigation-extra.stories';
-//# sourceMappingURL=header-navigation-extra-stacked.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"header-navigation-extra-stacked.stories.js","sourceRoot":"","sources":["../../../src/components/header-navigation/header-navigation-extra-stacked.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAC9D,OAAO,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAChD,OAAO,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAE9D,MAAM,2BAA2B,GAAG,CAAC,KAAU,EAAE,EAAE,CAAC,KAAC,uBAAuB,IAAC,KAAK,EAAE,KAAC,KAAK,KAAG,GAAI,CAAC;AAElG,eAAe;IACX,KAAK,EAAE,0BAA0B;IACjC,SAAS,EAAE,oBAAoB;IAC/B,UAAU,EAAE,CAAC,2BAA2B,EAAE,gBAAgB,EAAE,SAAS,CAAC;IACtE,UAAU,EAAE,EAAE;CACjB,CAAC;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,+CAUrB,CAAC;AAEF,eAAO,MAAM,YAAY,+CASxB,CAAC;AAEF,eAAO,MAAM,gBAAgB,+CAwB5B,CAAC;AA0CF,eAAO,MAAM,cAAc,+CAuB1B,CAAC"}

package/dist/components/header-navigation/header-navigation-extra.stories.js

@@ -1,29 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import SvgHelp from '@servicetitan/anvil2/assets/icons/material/round/help_outline.svg';
-import SvgPhone from '@servicetitan/anvil2/assets/icons/material/round/phone.svg';
-import SvgSearch from '@servicetitan/anvil2/assets/icons/material/round/search.svg';
-import { Button, Popover } from '@servicetitan/design-system';
-import { Fragment, useState } from 'react';
-import { withAnvil, withMemoryRouter } from '../../test/data';
-import { HeaderNavigationLink, HeaderNavigationTrigger } from '../links';
-import { HeaderNavigation } from './';
-const withHeaderNavigation = (Story) => (_jsx(HeaderNavigation, { rightClassName: "m-r-1", children: _jsx(Story, {}) }));
-export default {
-    title: 'Navigation/Extra/Legacy',
-    component: HeaderNavigationLink,
-    decorators: [withHeaderNavigation, withMemoryRouter, withAnvil],
-    parameters: {},
-};
-export const ExtraLink = () => (_jsx(HeaderNavigationLink, { id: "search", to: "https://google.com", target: "_blank", iconName: "search", icon: SvgSearch, iconActive: undefined, hint: "Search: for all the questions" }));
-export const ExtraTrigger = () => (_jsx(HeaderNavigationTrigger, { id: "dialpad", iconName: "phone", counter: 2, tooltip: "Phones pro", icon: SvgPhone, iconActive: undefined }));
-export const ExtraWithTooltip = () => (_jsxs(Fragment, { children: [_jsx(HeaderNavigationLink, { id: "search", to: "https://google.com", target: "_blank", iconName: "search", icon: SvgSearch, iconActive: undefined, tooltip: "Search: for all the questions", hint: "Google" }), _jsx(HeaderNavigationTrigger, { id: "dialpad", iconName: "phone", hint: "Dialpad", counter: 2, icon: SvgPhone, iconActive: undefined }), _jsx(HelpCenterButton, {})] }));
-const HelpCenterButton = () => {
-    const [open, setOpen] = useState(false);
-    return (_jsx(Popover, { onClickOutside: () => setOpen(false), open: open, direction: "bl", width: "xs", trigger: _jsx(Button, { className: "c-inherit", iconName: "help_outline", fill: "subtle", onClick: () => setOpen(true) }), portal: true, children: "help center" }));
-};
-const HelpTrigger = () => {
-    const [active, setActive] = useState(true);
-    return (_jsx(HeaderNavigationTrigger, { id: "help", iconName: "help_outline", hint: "Help", icon: SvgHelp, iconActive: undefined, label: "Live Chat", onClick: () => setActive(!active), isActive: active }));
-};
-export const ExtraWithLabel = () => (_jsxs(Fragment, { children: [_jsx(HeaderNavigationLink, { id: "search", to: "https://google.com", target: "_blank", iconName: "search", icon: SvgSearch, iconActive: undefined, tooltip: "Search: for all the questions", hint: "Google" }), _jsx(HelpTrigger, {}), _jsx(HeaderNavigationTrigger, { id: "dialpad", iconName: "phone", hint: "Dialpad", tag: { value: 2 }, icon: SvgPhone, iconActive: undefined })] }));
-//# sourceMappingURL=header-navigation-extra.stories.js.map

package/dist/components/header-navigation/header-navigation-extra.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"header-navigation-extra.stories.js","sourceRoot":"","sources":["../../../src/components/header-navigation/header-navigation-extra.stories.tsx"],"names":[],"mappings":"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"}

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

@@ -1,11 +0,0 @@
-import { FC, ReactNode } from 'react';
-import { HeaderNavigationLinkProps, HeaderNavigationTriggerProps } from '../../utils/navigation-legacy';
-/** Navigation extra item with link */
-export declare const HeaderNavigationLink: FC<HeaderNavigationLinkProps>;
-/** Navigation extra item with icon button */
-export declare const HeaderNavigationTrigger: FC<HeaderNavigationTriggerProps>;
-/** Navigation extra item with custom content */
-export declare const HeaderNavigationTriggerCustom: FC<Omit<HeaderNavigationTriggerProps, 'counter' | 'iconSize' | 'iconName' | 'iconComponent' | 'iconClassName' | 'icon' | 'iconActive'> & {
-    children: ReactNode;
-}>;
-//# sourceMappingURL=header-navigation-links.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"header-navigation-links.d.ts","sourceRoot":"","sources":["../../../src/components/header-navigation/header-navigation-links.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAE,SAAS,EAAc,MAAM,OAAO,CAAC;AAElD,OAAO,EACH,yBAAyB,EACzB,4BAA4B,EAC/B,MAAM,+BAA+B,CAAC;AAMvC,sCAAsC;AACtC,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC,yBAAyB,CA+C9D,CAAC;AAEF,6CAA6C;AAC7C,eAAO,MAAM,uBAAuB,EAAE,EAAE,CAAC,4BAA4B,CA4CpE,CAAC;AAEF,gDAAgD;AAChD,eAAO,MAAM,6BAA6B,EAAE,EAAE,CAC1C,IAAI,CACA,4BAA4B,EAC1B,SAAS,GACT,UAAU,GACV,UAAU,GACV,eAAe,GACf,eAAe,GACf,MAAM,GACN,YAAY,CACjB,GAAG;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,CAkB1B,CAAC"}

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

@@ -1,26 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createElement as _createElement } from "react";
-import classNames from 'classnames';
-import { useContext } from 'react';
-import { NavigationComponentContext } from '../../utils/navigation-context';
-import { getCounterTag } from '../../utils/side-nav';
-import { HeaderNavigationItemContent } from './header-navigation-content';
-import * as Styles from './header-navigation.module.less';
-import { withTooltip } from './with-tooltip';
-/** Navigation extra item with link */
-export const HeaderNavigationLink = ({ id, to, counter, hint, tooltip, className, icon, iconActive, iconClassName, iconComponent, iconName, isActive, label, labelClassName, tag, target, ...rest }) => {
-    const NavigationComponent = useContext(NavigationComponentContext);
-    return withTooltip(_createElement(NavigationComponent, { "data-cy": `navigation-link-${id}`, "data-pendo": `navigation-link-${id}`, ...rest, key: id, to: to, title: hint, className: classNames(Styles.navigationLink, Styles.navigationItem, className, {
-            [Styles.navigationItemActive]: isActive === true,
-        }), isActive: typeof isActive === 'function' ? isActive : undefined, activeClassName: Styles.navigationItemActive, target: target },
-        _jsx(HeaderNavigationItemContent, { tag: getCounterTag(counter, tag), iconComponent: iconComponent, iconClassName: iconClassName, iconName: iconName, title: label, titleClassName: labelClassName })), tooltip);
-};
-/** Navigation extra item with icon button */
-export const HeaderNavigationTrigger = ({ id, className, counter, icon, iconActive, iconClassName, iconComponent, iconName, isActive, label, labelClassName, hint, tag, tooltip, ...rest }) => {
-    return withTooltip(_jsx("div", { "data-cy": `navigation-trigger-${id}`, "data-pendo": `navigation-trigger-${id}`, ...rest, title: hint, className: classNames(Styles.navigationItem, Styles.navigationLink, {
-            [Styles.navigationItemActive]: isActive === true,
-        }, 'cursor-pointer', className), children: _jsx(HeaderNavigationItemContent, { tag: getCounterTag(counter, tag), iconComponent: iconComponent, iconClassName: iconClassName, iconName: iconName, title: label, titleClassName: labelClassName }) }), tooltip);
-};
-/** Navigation extra item with custom content */
-export const HeaderNavigationTriggerCustom = ({ children, id, className, tooltip, title, ...rest }) => withTooltip(_jsx("div", { "data-cy": `navigation-custom-${id}`, "data-pendo": `navigation-custom-${id}`, ...rest, title: title, className: classNames(Styles.navigationItem, Styles.navigationLink, 'cursor-pointer', className), children: children }), tooltip);
-//# sourceMappingURL=header-navigation-links.js.map