@servicetitan/navigation 11.0.0-canary.237.ff793b3.0 → 11.1.0

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

@@ -1,13 +1,11 @@
 import classNames from 'classnames';
 import {
     CSSProperties,
-    Children,
     ComponentPropsWithoutRef,
     FC,
     Fragment,
     ReactElement,
     ReactNode,
-    isValidElement,
     useCallback,
     useEffect,
     useMemo,
@@ -25,21 +23,23 @@ import {
     TitanLayoutSidebarContextType,
 } from './layout-context';
 import { LayoutHeader } from './layout-header';
-import { TitanLayoutLogo, TitanLayoutLogoProps } from './layout-logo';
+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 * as Styles from './titan-layout.module.less';
 
-type TitanLayoutChild = ReactElement<TitanLayoutContentProps> | ReactElement<TitanLayoutLogoProps>;
-
 export type TitanLayoutProps = Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'style'> & {
     /** layout appearance */
     appearance?: 'legacy' | 'anvil1' | 'anvil2';
 
+    /** layout navigation variant (left by default) */
+    navVariant?: 'left' | 'top';
+
     /** layout's content */
-    children?: TitanLayoutChild | TitanLayoutChild[];
+    children?: ReactNode;
 
     /** show only content without side and top bars */
     contentOnly?: boolean;
@@ -50,6 +50,12 @@ export type TitanLayoutProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'
     /** data for main navigation links */
     navigationMainItems?: NavigationItemData[];
 
+    /** data for overflow navigation links (used only with top variant) */
+    navigationOverflowItems?: NavigationItemData[];
+
+    /** logo props */
+    logo?: TitanLayoutLogoProps;
+
     state?: TitanLayoutState;
     onStateChange?: (state: TitanLayoutState) => void;
 
@@ -72,7 +78,7 @@ const defaultSidebarContext: TitanLayoutSidebarContextType = {
     },
 };
 
-const useVariant = (appearance: TitanLayoutProps['appearance']) =>
+const useAppearance = (appearance: TitanLayoutProps['appearance']) =>
     useMemo(() => {
         const isLegacy = appearance === 'legacy';
         const isAnvil1 = appearance === 'anvil1';
@@ -86,37 +92,9 @@ const useVariant = (appearance: TitanLayoutProps['appearance']) =>
         };
     }, [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',
+    navVariant = 'left',
     id,
     children,
     contentOnly,
@@ -125,8 +103,10 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
     top,
     profile,
     state,
+    logo,
     onStateChange,
     navigationMainItems,
+    navigationOverflowItems,
     extraLinks,
     extraLinksTop,
     extraText,
@@ -143,26 +123,30 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
         }),
         [navigationComponent, breakpoint]
     );
-    const variant = useVariant(appearance);
+    const view = useAppearance(appearance);
     const [mobileDrawerOpened, setMobileDrawerOpened] = useState(false);
-    const { content, logo } = useLayoutChildren(children);
     const { hasNotifications, NotificationsContextProvider } = useNotificationsState();
-    const [anvil2Styles, setAnvil2Styles] = useState<object>({});
+    const [offsetTopStyles, setOffsetTopStyles] = useState<object>({});
     const updateIndicatorsHeight = useCallback((offset: number) => {
-        setAnvil2Styles({ '--offset': `calc(var(--nav-offset-top) + ${offset}px)` });
+        setOffsetTopStyles({
+            '--content-offset-top': `calc(var(--nav-offset-top) + ${offset}px)`,
+        });
     }, []);
 
     const isMobile = breakpoint.isMobile;
-    const hasSideBar = !contentOnly && (!!navigationMainItems?.length || !!sideTop?.length);
+    const hasSideBar =
+        !contentOnly &&
+        (navVariant === 'left' || (navVariant === 'top' && isMobile)) &&
+        (!!navigationMainItems?.length || !!sideTop?.length);
     const hasTopBar = !contentOnly;
 
     useEffect(() => {
-        if (variant.isAnvil1) {
+        if (view.isAnvil1) {
             const bodyClassName = 'of-hidden-i';
             document.body.classList.add(bodyClassName);
             return () => document.body.classList.remove(bodyClassName);
         }
-    }, [variant.isAnvil1]);
+    }, [view.isAnvil1]);
 
     const onBurgerClick = useCallback((e: MouseEvent) => {
         setMobileDrawerOpened(true);
@@ -188,10 +172,22 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
         },
         [state, onStateChange]
     );
+    const sidebarNavItems = useMemo(() => {
+        if (!hasSideBar) {
+            return undefined;
+        }
+
+        if (navVariant === 'left') {
+            return navigationMainItems;
+        }
+
+        return [...(navigationMainItems ?? []), ...(navigationOverflowItems ?? [])];
+    }, [hasSideBar, navigationMainItems, navigationOverflowItems, navVariant]);
+
     const hasMenuNotifications = useMemo(() => {
         try {
             return (
-                navigationMainItems?.some(item => {
+                sidebarNavItems?.some(item => {
                     if (item.counter || item.tag?.value) {
                         return true;
                     } else if (item.submenu) {
@@ -205,35 +201,36 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
         } catch {
             return false;
         }
-    }, [navigationMainItems]);
+    }, [sidebarNavItems]);
 
     const limitContentWidth = useMemo(() => {
-        if (variant.isAnvil2 || !minContentWidth) {
+        if (view.isAnvil2 || !minContentWidth) {
             return undefined;
         }
 
         if (breakpoint.width < minContentWidth) {
             return minContentWidth;
         }
-    }, [variant, minContentWidth, breakpoint.width]);
+    }, [view, minContentWidth, breakpoint.width]);
 
     const contentStyles = useMemo(() => {
-        if (variant.isAnvil2) {
-            return anvil2Styles;
+        if (view.isAnvil2) {
+            return offsetTopStyles;
         }
 
-        if (variant.isLegacy && limitContentWidth) {
+        if (view.isLegacy) {
             return {
-                display: 'flex',
-                flexDirection: 'column',
-                minHeight: '100vh',
+                ...(limitContentWidth
+                    ? { display: 'flex', flexDirection: 'column', minHeight: '100vh' }
+                    : {}),
+                ...offsetTopStyles,
             };
         }
-    }, [variant, anvil2Styles, limitContentWidth]);
+    }, [view, offsetTopStyles, limitContentWidth]);
 
-    const layoutClass = variant.isLegacy
+    const layoutClass = view.isLegacy
         ? Styles.layoutLegacy
-        : variant.isAnvil1
+        : view.isAnvil1
           ? Styles.layoutAnvil1
           : Styles.layoutAnvil2;
 
@@ -245,8 +242,11 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
                     className={classNames(
                         Styles.layout,
                         isMobile ? Styles.layoutMobile : Styles.layoutDesktop,
+                        hasTopBar &&
+                            (navVariant === 'left' || !top
+                                ? Styles.layoutTopLight
+                                : Styles.layoutTopNav),
                         {
-                            [Styles.layoutTop]: hasTopBar,
                             [Styles.layoutNavSlim]: !isMobile && hasSideBar && state?.navCollapsed,
                             [Styles.layoutNavWide]: !isMobile && hasSideBar && !state?.navCollapsed,
                         },
@@ -254,25 +254,46 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
                     )}
                     style={contentStyles}
                 >
-                    {variant.isSequent && <div className={Styles.topPlaceholder} />}
-                    {hasTopBar && (
-                        <LayoutHeader
-                            className={Styles.top}
-                            logo={logo}
-                            profile={isMobile ? undefined : profile}
-                            center={top}
-                            rightText={isMobile ? undefined : extraText}
-                            right={
-                                <Fragment>
-                                    {extraLinksTop}
-                                    {!isMobile && extraLinks}
-                                </Fragment>
-                            }
-                            isMobile={isMobile}
-                            hasNotifications={hasNotifications || hasMenuNotifications}
-                            onBurgerClick={onBurgerClick}
-                        />
-                    )}
+                    {view.isSequent && <div className={Styles.topPlaceholder} />}
+                    {hasTopBar &&
+                        (navVariant === 'left' ? (
+                            <LayoutHeader
+                                className={Styles.top}
+                                variant="light"
+                                logo={logo}
+                                profile={isMobile ? undefined : profile}
+                                center={top}
+                                rightText={isMobile ? undefined : extraText}
+                                right={
+                                    <Fragment>
+                                        {extraLinksTop}
+                                        {!isMobile && extraLinks}
+                                    </Fragment>
+                                }
+                                isMobile={isMobile}
+                                hasNotifications={hasNotifications || hasMenuNotifications}
+                                onBurgerClick={onBurgerClick}
+                            />
+                        ) : (
+                            <LayoutHeaderDark
+                                className={Styles.top}
+                                logo={logo}
+                                profile={isMobile ? undefined : profile}
+                                center={top}
+                                rightText={isMobile ? undefined : extraText}
+                                right={
+                                    <Fragment>
+                                        {extraLinksTop}
+                                        {!isMobile && extraLinks}
+                                    </Fragment>
+                                }
+                                isMobile={isMobile}
+                                hasNotifications={hasNotifications || hasMenuNotifications}
+                                onBurgerClick={onBurgerClick}
+                                navigationMainItems={navigationMainItems}
+                                navigationOverflowItems={navigationOverflowItems}
+                            />
+                        ))}
 
                     {hasSideBar && (
                         <NotificationsContextProvider>
@@ -286,7 +307,7 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
                                 drawerOpened={mobileDrawerOpened}
                                 onDrawerOpenChange={setMobileDrawerOpened}
                                 top={sideTop}
-                                mainItems={navigationMainItems}
+                                mainItems={sidebarNavItems}
                                 navigationComponent={context.NavigationComponent}
                                 bottom={
                                     isMobile ? (
@@ -311,21 +332,21 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
                         </NotificationsContextProvider>
                     )}
 
-                    {variant.isAnvil1 ? (
+                    {view.isSequent && (
+                        <TitanLayoutHeaderObserved heightChange={updateIndicatorsHeight}>
+                            {header}
+                        </TitanLayoutHeaderObserved>
+                    )}
+                    {view.isAnvil1 ? (
                         <LayoutContentAnvil1 header={header} minWidth={limitContentWidth}>
-                            {content}
+                            {children}
                         </LayoutContentAnvil1>
-                    ) : variant.isLegacy ? (
-                        <LayoutContentLegacy header={header} minWidth={limitContentWidth}>
-                            {content}
+                    ) : view.isLegacy ? (
+                        <LayoutContentLegacy minWidth={limitContentWidth}>
+                            {children}
                         </LayoutContentLegacy>
                     ) : (
-                        <LayoutContentAnvil2
-                            header={header}
-                            onHeaderHeightChange={updateIndicatorsHeight}
-                        >
-                            {content}
-                        </LayoutContentAnvil2>
+                        children
                     )}
                 </div>
             </LayoutPlacementContext.Provider>
@@ -375,26 +396,6 @@ const TitanLayoutHeader: FC<{ children: ReactNode }> = ({ children }) => {
     );
 };
 
-export interface TitanLayoutContentProps {
-    children: ReactNode;
-}
-const TitanLayoutContent: FC<TitanLayoutContentProps> = ({ children }) => children;
-
-const LayoutContentAnvil2: FC<{
-    children: ReactNode;
-    header?: ReactNode;
-    onHeaderHeightChange?: (height: number) => void;
-}> = ({ children, header, onHeaderHeightChange }) => {
-    return (
-        <Fragment>
-            <TitanLayoutHeaderObserved heightChange={onHeaderHeightChange}>
-                {header}
-            </TitanLayoutHeaderObserved>
-            {children}
-        </Fragment>
-    );
-};
-
 const LayoutContentAnvil1: FC<{
     children: ReactNode;
     header?: ReactNode;
@@ -402,7 +403,7 @@ const LayoutContentAnvil1: FC<{
 }> = ({ children, header, minWidth }) => {
     const innerContentStyles: CSSProperties = useMemo(
         () => ({
-            ...(minWidth ? { minWidth: `${minWidth}px` } : {}),
+            ...(minWidth ? { minWidth: `${minWidth}px`, overflowX: 'auto' } : {}),
         }),
         [minWidth]
     );
@@ -411,7 +412,7 @@ const LayoutContentAnvil1: FC<{
         <Fragment>
             <TitanLayoutHeader>{header}</TitanLayoutHeader>
             <div
-                className={classNames(Styles.content, { 'of-x-auto': !!minWidth })}
+                className={classNames(Styles.content, { 'of-x-auto-i': !!minWidth })}
                 data-cy="layout-content"
             >
                 <div
@@ -427,9 +428,8 @@ const LayoutContentAnvil1: FC<{
 
 const LayoutContentLegacy: FC<{
     children: ReactNode;
-    header?: ReactNode;
     minWidth: number | undefined;
-}> = ({ children, header, minWidth }) => {
+}> = ({ children, minWidth }) => {
     const innerContentStyles: CSSProperties = useMemo(
         () => ({
             position: 'relative',
@@ -439,23 +439,13 @@ const LayoutContentLegacy: FC<{
     );
 
     return (
-        <Fragment>
-            <TitanLayoutHeader>{header}</TitanLayoutHeader>
-
-            {minWidth ? (
-                <div className="of-x-auto flex-basis-0 flex-grow-1">
-                    <div style={innerContentStyles}>{children}</div>
-                </div>
-            ) : (
-                children
-            )}
-        </Fragment>
+        <div className={minWidth ? 'of-x-auto flex-basis-0 flex-grow-1' : undefined}>
+            <div style={minWidth ? innerContentStyles : undefined}>{children}</div>
+        </div>
     );
 };
 
 export const TitanLayout = Object.assign(TitanLayoutComponent, {
-    Content: TitanLayoutContent,
-    Logo: TitanLayoutLogo,
     Link: TitanLayoutSidebarLink,
     Trigger: TitanLayoutSidebarTrigger,
 });

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

@@ -4,10 +4,13 @@ import { ReactElement } from 'react';
 export const withTooltip = (
     element: ReactElement,
     tooltip: string | undefined,
-    placement: TooltipProps['placement'] = 'bottom'
+    props: {
+        placement?: TooltipProps['placement'];
+        key?: string;
+    }
 ) =>
     tooltip ? (
-        <Tooltip placement={placement}>
+        <Tooltip placement="bottom" {...props}>
             <Tooltip.Content>{tooltip}</Tooltip.Content>
             <Tooltip.Trigger>{element}</Tooltip.Trigger>
         </Tooltip>

package/src/index.ts

@@ -6,15 +6,14 @@ export * from './components/counter-tag';
 export * from './components/left-navigation';
 export * from './components/titan-layout';
 export * from './components/links';
-export * from './utils/navigation';
-export {
-    NavigationComponentContext,
+export type * from './utils/navigation';
+export type {
     NavLinkComponentPropsStrict,
     NavLinkComponentProps,
-    NavigationLocationContext,
     NavigationLocationContextType,
     NavigationLocationInfo,
     NavigationActiveLinkMatcher,
 } from './utils/navigation-context';
-export * from './utils/navigation-legacy';
+export { NavigationComponentContext, NavigationLocationContext } from './utils/navigation-context';
+export type * from './utils/navigation-legacy';
 export * from './utils/use-breakpoint';

package/src/utils/use-breakpoint.ts

@@ -13,7 +13,7 @@ export const useTitanBreakpoint = (): TitanBreakpoint => {
     return useMemo(
         () => ({
             name: breakpoint?.name ?? 'xl',
-            isMobile: breakpoint ? breakpoint.innerWidth <= 768 : false,
+            isMobile: breakpoint ? breakpoint.innerWidth < 768 : false,
             width: breakpoint?.innerWidth ?? 0,
         }),
         [breakpoint]

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.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", title: "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", title: "Dialpad", iconName: "phone", counter: 2, tooltip: "Phones pro", icon: SvgPhone, iconActive: undefined }));
-export const ExtraWithTooltip = () => (_jsxs(Fragment, { children: [_jsx(HeaderNavigationLink, { id: "search", title: "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", title: "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", title: "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", title: "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", title: "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-stacked.stories.js

@@ -1,50 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Input, Stack } from '@servicetitan/design-system';
-import { Fragment } from 'react';
-import { SearchIcon, items, withMemoryRouter } from '../../test/data';
-import { LogoCompanyTitle } from '../logo/logo-company-title';
-import { LogoTitan, LogoTitanTitle } from '../logo/logo-titan-text';
-import { ProfileDropdown } from '../profile-dropdown/profile-dropdown';
-import { HeaderNavigationLink, HeaderNavigationTrigger } from './header-navigation-links';
-import * as Styles from './header-navigation-stories.module.less';
-import { HeaderNavigationStacked } from './';
-export default {
-    title: 'Navigation/HeaderNavigationStacked',
-    component: HeaderNavigationStacked,
-    parameters: {},
-    decorators: [withMemoryRouter],
-};
-const SvgIcon = undefined;
-export const DefaultNavigation = () => (_jsx(HeaderNavigationStacked, { left: _jsx(LogoCompanyTitle, { className: "m-l-1", fill: "#fff", size: "150" }), leftClassName: "d-f align-items-center", items: [
-        items.dashboard,
-        items.calendar,
-        items.calls,
-        items.accounting,
-        items.dispatch,
-        items.fleet,
-    ] }));
-export const WithLogoTextAndOverflow = () => (_jsx(HeaderNavigationStacked, { left: _jsxs(Stack, { alignItems: "center", children: [_jsx(LogoTitan, { mantleFill: "#2270EE", size: 44 }), _jsx(LogoTitanTitle, { className: "c-white m-l-1", children: "Commercial" })] }), items: [
-        items.dashboard,
-        items.calendar,
-        items.calls,
-        items.accounting,
-        items.dispatch,
-        items.purchasing,
-        items.fleet,
-    ], itemsOverflow: [items.calls, items.accounting, items.purchasing, items.dispatch] }));
-const TimeZoneOffset = () => (_jsx("div", { className: "fs-2 ff-default p-r-2", children: _jsx("span", { children: "EST (-9 hrs)" }) }));
-export const WithAllMonolithData = () => (_jsx(HeaderNavigationStacked, { left: _jsx(LogoCompanyTitle, { className: "m-l-1", fill: "#fff", size: "150" }), leftClassName: "d-f align-items-center", items: [
-        items.dashboard,
-        items.calendar,
-        items.calls,
-        items.accounting,
-        items.dispatch,
-        items.fleet,
-        items.followUps,
-        items.inventory,
-        items.marketing,
-        items.priceBook,
-        items.pointOfSale,
-        items.reports,
-    ], right: _jsxs(Fragment, { children: [_jsx(TimeZoneOffset, {}), _jsx(HeaderNavigationLink, { id: "search", title: "Search", to: "https://google.com", target: "_blank", iconComponent: SearchIcon, hint: "Search: for all the questions", icon: SvgIcon, iconActive: SvgIcon }), _jsx(HeaderNavigationTrigger, { id: "dialpad", title: "Dialpad", iconName: "phone", tag: { value: 2 }, icon: SvgIcon, iconActive: SvgIcon }), _jsx(HeaderNavigationTrigger, { id: "titanAdvisor", title: "Titan Advisor", iconName: "rocket", iconClassName: Styles.rocketIcon, icon: SvgIcon, iconActive: SvgIcon }), _jsx(HeaderNavigationLink, { id: "settings", title: "Settings", to: "https://google.com", target: "_blank", iconName: "settings", "aria-label": "search", hint: "Settings", isActive: true, icon: SvgIcon, iconActive: SvgIcon }), _jsxs(ProfileDropdown, { children: [_jsx(ProfileDropdown.Link, { id: "tasks", to: "https://googgle.com", counter: 10, children: "Task Management" }), _jsx(ProfileDropdown.Divider, {}), _jsxs(ProfileDropdown.Link, { id: "sign-out", to: "https://googgle.com", text: "Sign Out", children: ["Sign Out", ' ', _jsx("span", { className: "c-neutral-100 m-l-half t-truncate", children: "James Bond" })] }), _jsx(ProfileDropdown.Section, { id: "userid", className: "c-neutral-100 fs-1", children: "User ID: 007" })] })] }), center: _jsx(Input, { placeholder: "Search smth", size: "xsmall", className: "w-100" }), centerClassName: "d-f align-items-center" }));
-//# sourceMappingURL=header-navigation-stacked.stories.js.map

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

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

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

@@ -1,54 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Popover } from '@servicetitan/design-system';
-import { useState } from 'react';
-import { SearchIcon, items, withMemoryRouter } from '../../test/data';
-import { LogoCompanyTitle } from '../logo/logo-company-title';
-import { LogoTitanText } from '../logo/logo-titan-text';
-import { ProfileDropdown } from '../profile-dropdown/profile-dropdown';
-import { HeaderNavigationLink, HeaderNavigationTrigger } from './header-navigation-links';
-import * as Styles from './header-navigation-stories.module.less';
-import { HeaderNavigation } from './';
-export default {
-    title: 'Navigation/HeaderNavigation',
-    component: HeaderNavigation,
-    parameters: {},
-    decorators: [withMemoryRouter],
-};
-const SvgIcon = undefined;
-export const DefaultNavigation = () => (_jsx(HeaderNavigation, { left: _jsx(LogoCompanyTitle, { className: "m-l-1", fill: "#fff" }), items: [
-        items.dashboard,
-        items.calendar,
-        items.calls,
-        items.accounting,
-        items.dispatch,
-        items.fleet,
-    ] }));
-export const WithLogoTextAndOverflow = () => (_jsx(HeaderNavigation, { left: _jsx(LogoTitanText, { mantleFill: "#2270EE", title: "Commercial", description: "tenant tenant tenant tenant tenant" }), items: [
-        items.dashboard,
-        items.calendar,
-        items.calls,
-        items.accounting,
-        items.dispatch,
-        items.purchasing,
-        items.fleet,
-    ], itemsOverflow: [items.calls, items.accounting, items.purchasing, items.dispatch] }));
-const HelpCenterButton = () => {
-    const [open, setOpen] = useState(false);
-    return (_jsx(Popover, { onClickOutside: () => setOpen(false), open: open, direction: "bl", width: "xs", trigger: _jsx(HeaderNavigationTrigger, { id: "help", title: "Help", iconName: "help_outline", onClick: () => setOpen(true), icon: SvgIcon, iconActive: SvgIcon }), portal: true, children: "help center" }));
-};
-const TimeZoneOffset = () => (_jsx("div", { className: "fs-2 ff-default p-r-2", children: _jsx("span", { children: "EST (-9 hrs)" }) }));
-export const WithAllMonolithData = () => (_jsxs(HeaderNavigation, { left: _jsx(LogoCompanyTitle, { className: "m-l-1", fill: "#fff" }), items: [
-        items.dashboard,
-        items.calendar,
-        items.calls,
-        items.accounting,
-        items.dispatch,
-        items.fleet,
-        items.followUps,
-        items.inventory,
-        items.marketing,
-        items.priceBook,
-        items.pointOfSale,
-        items.reports,
-    ], children: [_jsx(TimeZoneOffset, {}), _jsx(HeaderNavigationTrigger, { id: "dialpad", title: "Dialpad", iconName: "phone", counter: 2, icon: SvgIcon, iconActive: SvgIcon }), _jsx(HeaderNavigationLink, { id: "search", title: "Search", to: "https://google.com", target: "_blank", iconComponent: SearchIcon, hint: "Search: for all the questions", icon: SvgIcon, iconActive: SvgIcon }), _jsx(HelpCenterButton, {}), _jsx(HeaderNavigationTrigger, { id: "titanAdvisor", title: "Titan Advisor", iconName: "rocket", iconClassName: Styles.rocketIcon, icon: SvgIcon, iconActive: SvgIcon }), _jsx(HeaderNavigationLink, { id: "settings", title: "Settings", to: "https://google.com", target: "_blank", iconName: "settings", "aria-label": "search", hint: "Settings", isActive: true, icon: SvgIcon, iconActive: SvgIcon }), _jsxs(ProfileDropdown, { children: [_jsx(ProfileDropdown.Link, { id: "tasks", to: "https://googgle.com", counter: 10, children: "Task Management" }), _jsx(ProfileDropdown.Divider, {}), _jsxs(ProfileDropdown.Link, { id: "sign-out", to: "https://googgle.com", text: "Sign Out", children: ["Sign Out ", _jsx("span", { className: "c-neutral-100 m-l-half t-truncate", children: "James Bond" })] }), _jsx(ProfileDropdown.Section, { id: "userid", className: "c-neutral-100 fs-1", children: "User ID: 007" })] })] }));
-//# sourceMappingURL=header-navigation.stories.js.map