@servicetitan/navigation 2.0.0 → 2.2.0

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

@@ -0,0 +1,30 @@
+import { IconPropsStrict } from '@servicetitan/design-system';
+import { FC } from 'react';
+import { HeaderNavigationItemData } from '../../utils/navigation';
+import { CounterTagPropsType } from '../counter-tag';
+export interface HeaderNavigationItemContentPropsStrict {
+    /** item text */
+    title?: string;
+    /** text component class name */
+    titleClassName?: string;
+    /** counter shown for item */
+    counter?: CounterTagPropsType;
+    /** 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

@@ -0,0 +1 @@
+{"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,EAAY,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,wBAAwB,EAAE,MAAM,wBAAwB,CAAC;AAGlE,OAAO,EAAc,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAGjE,MAAM,WAAW,sCAAsC;IACnD,gBAAgB;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,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,CA6CpE,CAAC"}

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

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from '@servicetitan/design-system';
+import classNames from 'classnames';
+import { Fragment } from 'react';
+import { useNavLink } from '../../utils/navigation-context';
+import { withTooltip } from '../../utils/with-tooltip';
+import { CounterTag } from '../counter-tag';
+import * as Styles from './header-navigation.module.less';
+/** Content for navigation items */
+export const HeaderNavigationItemContent = ({ title, titleClassName, counter, counterClassName, iconClassName, iconComponent: IconComponent, iconName, }) => {
+    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 })), !!counter && (_jsx(CounterTag, { data: counter, className: classNames(Styles.navigationItemCounter, counterClassName), longClassName: Styles.navigationItemCounterLong }))] }));
+};
+/** Navigation main menu item */
+export const HeaderNavigationItem = ({ id, to, title, hint, counter, className, iconClassName, iconComponent, iconName, isActive, main, minimized, }) => {
+    const NavigationComponent = useNavLink();
+    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', counter: counter, 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

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

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

@@ -1,7 +1,7 @@
 import { FC } from 'react';
 declare const _default: {
     title: string;
-    component: FC<import("./header-navigation").HeaderNavigationLinkProps>;
+    component: FC<import("./header-navigation-links").HeaderNavigationLinkProps>;
     parameters: {};
 };
 export default _default;

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

@@ -1 +1 @@
-{"version":3,"file":"header-navigation-extra.stories.d.ts","sourceRoot":"","sources":["../../../src/components/header-navigation/header-navigation-extra.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAY,MAAM,OAAO,CAAC;;;;;;AAUrC,wBAIE;AAoBF,eAAO,MAAM,SAAS,+CAUrB,CAAC;AAEF,eAAO,MAAM,YAAY,+CAIxB,CAAC;AAEF,eAAO,MAAM,kBAAkB,+CAM9B,CAAC;AAEF,eAAO,MAAM,gBAAgB,+CAiB5B,CAAC"}
+{"version":3,"file":"header-navigation-extra.stories.d.ts","sourceRoot":"","sources":["../../../src/components/header-navigation/header-navigation-extra.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAY,MAAM,OAAO,CAAC;;;;;;AASrC,wBAIE;AAoBF,eAAO,MAAM,SAAS,+CAUrB,CAAC;AAEF,eAAO,MAAM,YAAY,+CAIxB,CAAC;AAEF,eAAO,MAAM,kBAAkB,+CAM9B,CAAC;AAEF,eAAO,MAAM,gBAAgB,+CAe5B,CAAC"}

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

@@ -10,9 +10,9 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Popover } from '@servicetitan/design-system';
+import { Button, Popover } from '@servicetitan/design-system';
 import { useState } from 'react';
-import { HeaderNavigation, HeaderNavigationItemContent, HeaderNavigationLink, HeaderNavigationTrigger, HeaderNavigationTriggerCustom, } from './header-navigation';
+import { HeaderNavigation, HeaderNavigationLink, HeaderNavigationTrigger, HeaderNavigationTriggerCustom, } from './';
 export default {
     title: 'Navigation/HeaderNavigationExtra',
     component: HeaderNavigationLink,
@@ -24,12 +24,12 @@ const NavLinkMock = (_a) => {
             e.preventDefault();
         }, children: children })));
 };
-export const extraLink = () => (_jsx(HeaderNavigation, { items: [], navigationComponent: NavLinkMock, contentClassName: "m-r-1", children: _jsx(HeaderNavigationLink, { id: "search", to: "https://google.com", target: "_blank", iconName: "search", hint: "Search: for all the questions" }) }));
-export const extraTrigger = () => (_jsx(HeaderNavigation, { items: [], navigationComponent: NavLinkMock, contentClassName: "m-r-1", children: _jsx(HeaderNavigationTrigger, { id: "dialpad", iconName: "phone", counter: 2, tooltip: "Phones pro" }) }));
+export const extraLink = () => (_jsx(HeaderNavigation, { items: [], navigationComponent: NavLinkMock, rightClassName: "m-r-1", children: _jsx(HeaderNavigationLink, { id: "search", to: "https://google.com", target: "_blank", iconName: "search", hint: "Search: for all the questions" }) }));
+export const extraTrigger = () => (_jsx(HeaderNavigation, { items: [], navigationComponent: NavLinkMock, rightClassName: "m-r-1", children: _jsx(HeaderNavigationTrigger, { id: "dialpad", iconName: "phone", counter: 2, tooltip: "Phones pro" }) }));
 export const extraCustomTrigger = () => (_jsx(HeaderNavigation, { items: [], navigationComponent: NavLinkMock, children: _jsx(HeaderNavigationTriggerCustom, { id: "help-center", children: _jsx(HelpCenterButton, {}) }) }));
-export const extraWithTooltip = () => (_jsxs(HeaderNavigation, { items: [], navigationComponent: NavLinkMock, contentClassName: "m-r-1", children: [_jsx(HeaderNavigationLink, { id: "search", to: "https://google.com", target: "_blank", iconName: "search", tooltip: "Search: for all the questions", hint: "Google" }), _jsx(HeaderNavigationTrigger, { id: "dialpad", iconName: "phone", title: "Dialpad", counter: 2 }), _jsx(HeaderNavigationTriggerCustom, { id: "help-center", children: _jsx(HelpCenterButton, {}) })] }));
+export const extraWithTooltip = () => (_jsxs(HeaderNavigation, { items: [], navigationComponent: NavLinkMock, rightClassName: "m-r-1", children: [_jsx(HeaderNavigationLink, { id: "search", to: "https://google.com", target: "_blank", iconName: "search", tooltip: "Search: for all the questions", hint: "Google" }), _jsx(HeaderNavigationTrigger, { id: "dialpad", iconName: "phone", title: "Dialpad", counter: 2 }), _jsx(HelpCenterButton, {})] }));
 const HelpCenterButton = () => {
     const [open, setOpen] = useState(false);
-    return (_jsx(Popover, { onClickOutside: () => setOpen(false), open: open, direction: "bl", width: "xs", trigger: _jsx("div", { onClick: () => setOpen(true), children: _jsx(HeaderNavigationItemContent, { iconName: "help_outline" }) }), portal: true, children: "help center" }));
+    return (_jsx(Popover, { onClickOutside: () => setOpen(false), open: open, direction: "bl", width: "xs", trigger: _jsx(Button, { className: "c-white", iconName: "help_outline", fill: "subtle", onClick: () => setOpen(true) }), portal: true, children: "help center" }));
 };
 //# sourceMappingURL=header-navigation-extra.stories.js.map

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

@@ -1 +1 @@
-{"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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"}
+{"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

@@ -0,0 +1,38 @@
+import { FC, HTMLAttributeAnchorTarget, ReactNode } from 'react';
+import { HeaderNavigationItemContentPropsStrict } from './header-navigation-content';
+export interface HeaderNavigationTriggerPropsStrict extends Omit<HeaderNavigationItemContentPropsStrict, 'title' | 'size'> {
+    /** unique identifier */
+    id: string;
+    /** tooltip text */
+    tooltip?: string;
+    /** item description */
+    hint?: string;
+    /** container class name */
+    className?: string;
+}
+interface HeaderNavigationTriggerProps extends HeaderNavigationTriggerPropsStrict {
+    /** unstrict props */
+    [key: string]: any;
+}
+export interface HeaderNavigationLinkPropsStrict extends HeaderNavigationTriggerPropsStrict {
+    /** link href */
+    to: string;
+    /** isActive */
+    isActive?: boolean | ((pathname: string) => boolean);
+    /** link html target */
+    target?: HTMLAttributeAnchorTarget;
+}
+export interface HeaderNavigationLinkProps extends HeaderNavigationLinkPropsStrict {
+    /** unstrict props */
+    [key: string]: any;
+}
+/** 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'> & {
+    children: ReactNode;
+}>;
+export {};
+//# sourceMappingURL=header-navigation-links.d.ts.map

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

@@ -0,0 +1 @@
+{"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,yBAAyB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGjE,OAAO,EAEH,sCAAsC,EACzC,MAAM,6BAA6B,CAAC;AAGrC,MAAM,WAAW,kCACb,SAAQ,IAAI,CAAC,sCAAsC,EAAE,OAAO,GAAG,MAAM,CAAC;IACtE,wBAAwB;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,mBAAmB;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uBAAuB;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,UAAU,4BAA6B,SAAQ,kCAAkC;IAC7E,qBAAqB;IACrB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED,MAAM,WAAW,+BAAgC,SAAQ,kCAAkC;IACvF,gBAAgB;IAChB,EAAE,EAAE,MAAM,CAAC;IACX,eAAe;IACf,QAAQ,CAAC,EAAE,OAAO,GAAG,CAAC,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,CAAC;IACrD,uBAAuB;IACvB,MAAM,CAAC,EAAE,yBAAyB,CAAC;CACtC;AAED,MAAM,WAAW,yBAA0B,SAAQ,+BAA+B;IAC9E,qBAAqB;IACrB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED,sCAAsC;AACtC,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC,yBAAyB,CAwC9D,CAAC;AAEF,6CAA6C;AAC7C,eAAO,MAAM,uBAAuB,EAAE,EAAE,CAAC,4BAA4B,CAgChE,CAAC;AAEN,gDAAgD;AAChD,eAAO,MAAM,6BAA6B,EAAE,EAAE,CAC1C,IAAI,CACA,4BAA4B,EAC5B,SAAS,GAAG,UAAU,GAAG,UAAU,GAAG,eAAe,GAAG,eAAe,CAC1E,GAAG;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,CAkB1B,CAAC"}

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

@@ -0,0 +1,38 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import classNames from 'classnames';
+import { useNavLink } from '../../utils/navigation-context';
+import { withTooltip } from '../../utils/with-tooltip';
+import { HeaderNavigationItemContent, } from './header-navigation-content';
+import * as Styles from './header-navigation.module.less';
+/** Navigation extra item with link */
+export const HeaderNavigationLink = (_a) => {
+    var { id, to, hint, tooltip, counter, className, iconClassName, iconComponent, iconName, isActive, target } = _a, rest = __rest(_a, ["id", "to", "hint", "tooltip", "counter", "className", "iconClassName", "iconComponent", "iconName", "isActive", "target"]);
+    const NavigationComponent = useNavLink();
+    return withTooltip(_createElement(NavigationComponent, Object.assign({ "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, { counter: counter, iconComponent: iconComponent, iconClassName: iconClassName, iconName: iconName })), tooltip);
+};
+/** Navigation extra item with icon button */
+export const HeaderNavigationTrigger = (_a) => {
+    var { id, className, counter, iconClassName, iconComponent, iconName, hint, tooltip } = _a, rest = __rest(_a, ["id", "className", "counter", "iconClassName", "iconComponent", "iconName", "hint", "tooltip"]);
+    return withTooltip(_jsx("div", Object.assign({ "data-cy": `navigation-trigger-${id}`, "data-pendo": `navigation-trigger-${id}` }, rest, { title: hint, className: classNames(Styles.navigationItem, Styles.navigationLink, 'cursor-pointer', className), children: _jsx(HeaderNavigationItemContent, { counter: counter, iconComponent: iconComponent, iconClassName: iconClassName, iconName: iconName }) })), tooltip);
+};
+/** Navigation extra item with custom content */
+export const HeaderNavigationTriggerCustom = (_a) => {
+    var { children, id, className, tooltip, title } = _a, rest = __rest(_a, ["children", "id", "className", "tooltip", "title"]);
+    return withTooltip(_jsx("div", Object.assign({ "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

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

@@ -0,0 +1 @@
+{"version":3,"file":"header-navigation-links.js","sourceRoot":"","sources":["../../../src/components/header-navigation/header-navigation-links.tsx"],"names":[],"mappings":";;;;;;;;;;;;;AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EACH,2BAA2B,GAE9B,MAAM,6BAA6B,CAAC;AACrC,OAAO,KAAK,MAAM,MAAM,iCAAiC,CAAC;AAiC1D,sCAAsC;AACtC,MAAM,CAAC,MAAM,oBAAoB,GAAkC,CAAC,EAanE,EAAE,EAAE;QAb+D,EAChE,EAAE,EACF,EAAE,EACF,IAAI,EACJ,OAAO,EACP,OAAO,EACP,SAAS,EACT,aAAa,EACb,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,MAAM,OAET,EADM,IAAI,cAZyD,2HAanE,CADU;IAEP,MAAM,mBAAmB,GAAG,UAAU,EAAE,CAAC;IAEzC,OAAO,WAAW,CACd,eAAC,mBAAmB,6BACP,mBAAmB,EAAE,EAAE,gBACpB,mBAAmB,EAAE,EAAE,IAC/B,IAAI,IACR,GAAG,EAAE,EAAE,EACP,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,IAAI,EACX,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,cAAc,EAAE,MAAM,CAAC,cAAc,EAAE,SAAS,EAAE;YAC3E,CAAC,MAAM,CAAC,oBAAoB,CAAC,EAAE,QAAQ,KAAK,IAAI;SACnD,CAAC,EACF,QAAQ,EAAE,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAC/D,eAAe,EAAE,MAAM,CAAC,oBAAoB,EAC5C,MAAM,EAAE,MAAM;QAEd,KAAC,2BAA2B,IACxB,OAAO,EAAE,OAAO,EAChB,aAAa,EAAE,aAAa,EAC5B,aAAa,EAAE,aAAa,EAC5B,QAAQ,EAAE,QAAQ,GACpB,CACgB,EACtB,OAAO,CACV,CAAC;AACN,CAAC,CAAC;AAEF,6CAA6C;AAC7C,MAAM,CAAC,MAAM,uBAAuB,GAAqC,CAAC,EAUzE,EAAE,EAAE;QAVqE,EACtE,EAAE,EACF,SAAS,EACT,OAAO,EACP,aAAa,EACb,aAAa,EACb,QAAQ,EACR,IAAI,EACJ,OAAO,OAEV,EADM,IAAI,cAT+D,+FAUzE,CADU;IAEP,OAAA,WAAW,CACP,uCACa,sBAAsB,EAAE,EAAE,gBACvB,sBAAsB,EAAE,EAAE,IAClC,IAAI,IACR,KAAK,EAAE,IAAI,EACX,SAAS,EAAE,UAAU,CACjB,MAAM,CAAC,cAAc,EACrB,MAAM,CAAC,cAAc,EACrB,gBAAgB,EAChB,SAAS,CACZ,YAED,KAAC,2BAA2B,IACxB,OAAO,EAAE,OAAO,EAChB,aAAa,EAAE,aAAa,EAC5B,aAAa,EAAE,aAAa,EAC5B,QAAQ,EAAE,QAAQ,GACpB,IACA,EACN,OAAO,CACV,CAAA;CAAA,CAAC;AAEN,gDAAgD;AAChD,MAAM,CAAC,MAAM,6BAA6B,GAKtC,CAAC,EAAoD,EAAE,EAAE;QAAxD,EAAE,QAAQ,EAAE,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,OAAW,EAAN,IAAI,cAAlD,mDAAoD,CAAF;IACnD,OAAA,WAAW,CACP,uCACa,qBAAqB,EAAE,EAAE,gBACtB,qBAAqB,EAAE,EAAE,IACjC,IAAI,IACR,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,UAAU,CACjB,MAAM,CAAC,cAAc,EACrB,MAAM,CAAC,cAAc,EACrB,gBAAgB,EAChB,SAAS,CACZ,YAEA,QAAQ,IACP,EACN,OAAO,CACV,CAAA;CAAA,CAAC"}

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

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+declare const _default: {
+    title: string;
+    component: FC<import("./header-navigation").HeaderNavigationStackedProps>;
+    parameters: {};
+};
+export default _default;
+export declare const defaultNavigation: () => import("react/jsx-runtime").JSX.Element;
+export declare const withLogoTextAndOverflow: () => import("react/jsx-runtime").JSX.Element;
+export declare const withAllMonolithData: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=header-navigation-stacked.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"header-navigation-stacked.stories.d.ts","sourceRoot":"","sources":["../../../src/components/header-navigation/header-navigation-stacked.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAY,MAAM,OAAO,CAAC;;;;;;AAQrC,wBAIE;AA4DF,eAAO,MAAM,iBAAiB,+CAc7B,CAAC;AAEF,eAAO,MAAM,uBAAuB,+CAoBnC,CAAC;AAQF,eAAO,MAAM,mBAAmB,+CAqE/B,CAAC"}

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

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Input, Stack } from '@servicetitan/design-system';
+import { Fragment } from 'react';
+import { LogoCompanyTitle } from '../logo/logo-company-title';
+import { LogoTitan, LogoTitanTitle } from '../logo/logo-titan-text';
+import { ProfileDropdown } from '../profile-dropdown/profile-dropdown';
+import * as Styles from './header-navigation-stories.module.less';
+import { HeaderNavigationLink, HeaderNavigationStacked, HeaderNavigationTrigger } from './';
+export default {
+    title: 'Navigation/HeaderNavigationStacked',
+    component: HeaderNavigationStacked,
+    parameters: {},
+};
+const getItem = (id, data) => (Object.assign({ id, to: '/', title: id[0].toUpperCase() + id.substring(1), hint: id }, (data !== null && data !== void 0 ? data : {})));
+const InventoryIcon = () => (_jsxs("svg", { width: "20", xmlns: "http://www.w3.org/2000/svg", viewBox: "-293 385 24 24", fill: "currentColor", children: [_jsx("polyline", { points: "-288,400.9 -282,404.3 -282,397.6 -288,394.2 -288,400.9 " }), _jsx("path", { d: "M-272,401.5c0,0.4-0.2,0.7-0.5,0.9l-7.9,4.4c-0.2,0.1-0.4,0.2-0.6,0.2s-0.4-0.1-0.6-0.2l-7.9-4.4c-0.3-0.2-0.5-0.5-0.5-0.9v-9c0-0.4,0.2-0.7,0.5-0.9l7.9-4.4c0.2-0.1,0.4-0.2,0.6-0.2s0.4,0.1,0.6,0.2l7.9,4.4c0.3,0.2,0.5,0.5,0.5,0.9V401.5 M-287,392.5 l6,3.4l5.9-3.3l-5.9-3.4L-287,392.5 M-274,400.9v-6.7l-6,3.4v6.7L-274,400.9z" })] }));
+const SearchIcon = () => (_jsx("svg", { width: "24", height: "24", viewBox: "-4 2 26 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M0 15.7992V13.9992H12V15.7992H0ZM0 9.49922V7.69922H6V9.49922H0ZM0 3.19922V1.39922H6V3.19922H0ZM22.74 15.7992L17.94 10.9992C17.42 11.3992 16.86 11.6992 16.26 11.8992C15.66 12.0992 15.04 12.1992 14.4 12.1992C12.74 12.1992 11.325 11.6142 10.155 10.4442C8.985 9.27422 8.4 7.85922 8.4 6.19922C8.4 4.53922 8.985 3.12422 10.155 1.95422C11.325 0.784219 12.74 0.199219 14.4 0.199219C16.06 0.199219 17.475 0.784219 18.645 1.95422C19.815 3.12422 20.4 4.53922 20.4 6.19922C20.4 6.83922 20.3 7.45922 20.1 8.05922C19.9 8.65922 19.6 9.21922 19.2 9.73922L24 14.5392L22.74 15.7992ZM14.393 10.3992C15.5577 10.3992 16.55 9.99157 17.37 9.17627C18.19 8.36099 18.6 7.37099 18.6 6.20627C18.6 5.04157 18.1923 4.04922 17.377 3.22922C16.5618 2.40922 15.5718 1.99922 14.407 1.99922C13.2423 1.99922 12.25 2.40687 11.43 3.22217C10.61 4.03745 10.2 5.02745 10.2 6.19217C10.2 7.35687 10.6077 8.34922 11.423 9.16922C12.2382 9.98922 13.2282 10.3992 14.393 10.3992Z", fill: "white", style: { fill: 'white', fillOpacity: 1 } }) }));
+const items = {
+    calendar: getItem('calendar', { iconName: 'event' }),
+    calls: getItem('calls', { iconName: 'local_phone', isActive: true, counter: 12 }),
+    dashboard: getItem('dashboard', { iconName: 'odometer', isActive: true }),
+    dispatch: getItem('dispatch', { iconName: 'location_disabled', counter: 1 }),
+    fleet: getItem('fleet', { iconName: 'fleet-pro', title: 'Fleet Pro' }),
+    followUps: getItem('followUps', { iconName: 'flag', title: 'Follow Ups' }),
+    inventory: getItem('inventory', { iconName: 'toys' }),
+    purchasing: getItem('purchasing', { iconComponent: InventoryIcon }),
+    accounting: getItem('accounting', { iconName: 'assignment' }),
+    marketing: getItem('marketing', { iconName: 'bullhorn' }),
+    priceBook: getItem('priceBook', { iconName: 'book' }),
+    pointOfSale: getItem('pointOfSale', { iconName: 'cash-register' }),
+    projects: getItem('projects', { iconName: 'folder_special' }),
+    reports: getItem('reports', { iconName: 'poll' }),
+};
+const NavLinkMock = props => (_jsx("a", { href: props.to, target: props.target, onClick: e => {
+        e.preventDefault();
+    }, className: props.className, children: props.children }));
+export const defaultNavigation = () => (_jsx(HeaderNavigationStacked, { left: _jsx(LogoCompanyTitle, { className: "m-l-1", fill: "#fff" }), leftClassName: "d-f align-items-center", items: [
+        items.dashboard,
+        items.calendar,
+        items.calls,
+        items.accounting,
+        items.dispatch,
+        items.fleet,
+    ], navigationComponent: NavLinkMock }));
+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], navigationComponent: NavLinkMock }));
+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" }), 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,
+    ], navigationComponent: NavLinkMock, right: _jsxs(Fragment, { children: [_jsx(TimeZoneOffset, {}), _jsx(HeaderNavigationLink, { id: "search", to: "https://google.com", target: "_blank", iconComponent: SearchIcon, hint: "Search: for all the questions" }), _jsx(HeaderNavigationTrigger, { id: "dialpad", iconName: "phone", counter: 2 }), _jsx(HeaderNavigationTrigger, { id: "titanAdvisor", iconName: "rocket", iconClassName: Styles.rocketIcon }), _jsx(HeaderNavigationLink, { id: "settings", to: "https://google.com", target: "_blank", iconName: "settings", "aria-label": "search", hint: "Settings", isActive: true }), _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", 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

@@ -0,0 +1 @@
+{"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.module.less

@@ -0,0 +1,6 @@
+/* stylelint-disable no-descending-specificity */
+@import (reference) '@servicetitan/tokens/core/tokens.less';
+
+.rocket-icon {
+    transform: scale(0.9) translate(2px, -2px) rotate(45deg);
+}

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

@@ -1,57 +1,6 @@
-import { IconPropsStrict, PopoverPropsStrict } from '@servicetitan/design-system';
-import { FC, HTMLAttributeAnchorTarget, ReactElement, ReactNode } from 'react';
+import { PopoverPropsStrict } from '@servicetitan/design-system';
+import { FC, ReactElement, ReactNode } from 'react';
 import { HeaderNavigationItemData, NavLinkComponentProps } from '../../utils/navigation';
-import { CounterTagPropsType } from '../counter-tag';
-interface HeaderNavigationItemContentPropsStrict {
-    /** item text */
-    title?: string;
-    /** counter shown for item */
-    counter?: CounterTagPropsType;
-    /** icon component class name */
-    iconClassName?: string;
-    /** IconComponent custom icon component */
-    iconComponent?: FC;
-    /** iconName name of anvil icon */
-    iconName?: IconPropsStrict['name'];
-    /** iconSize size of anvil icon */
-    iconSize?: IconPropsStrict['size'];
-}
-export interface HeaderNavigationTriggerPropsStrict extends Omit<HeaderNavigationItemContentPropsStrict, 'title'> {
-    /** unique identifier */
-    id: string;
-    /** tooltip text */
-    tooltip?: string;
-    /** item description */
-    hint?: string;
-    /** container class name */
-    className?: string;
-}
-interface HeaderNavigationTriggerProps extends HeaderNavigationTriggerPropsStrict {
-    /** unstrict props */
-    [key: string]: any;
-}
-export interface HeaderNavigationLinkPropsStrict extends HeaderNavigationTriggerPropsStrict {
-    /** link href */
-    to: string;
-    /** isActive */
-    isActive?: boolean | ((pathname: string) => boolean);
-    /** link html target */
-    target?: HTMLAttributeAnchorTarget;
-}
-export interface HeaderNavigationLinkProps extends HeaderNavigationLinkPropsStrict {
-    /** unstrict props */
-    [key: string]: any;
-}
-/** Content for navigation items */
-export declare const HeaderNavigationItemContent: FC<HeaderNavigationItemContentPropsStrict>;
-/** 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'> & {
-    children: ReactNode;
-}>;
 export interface HeaderNavigationOverflowProps {
     direction: PopoverPropsStrict['direction'];
     width: PopoverPropsStrict['width'];
@@ -63,7 +12,7 @@ export interface HeaderNavigationProps {
     /** container class name */
     className?: string;
     /** extra navigation container class name */
-    contentClassName?: string;
+    rightClassName?: string;
     /** container id */
     id?: string;
     /** left content (usually used for logo) */
@@ -82,5 +31,33 @@ export interface HeaderNavigationProps {
     overflow?: HeaderNavigationOverflowProps;
 }
 export declare const HeaderNavigation: FC<HeaderNavigationProps>;
-export {};
+export interface HeaderNavigationStackedProps {
+    /** container class name */
+    className?: string;
+    /** extra navigation */
+    right?: ReactNode;
+    /** extra navigation container class name */
+    rightClassName?: string;
+    /** container id */
+    id?: string;
+    /** left content (usually used for logo) */
+    left?: ReactElement;
+    /** left container class name */
+    leftClassName?: string;
+    /** center content */
+    center?: ReactElement;
+    /** center container class name */
+    centerClassName?: string;
+    /** minimal width for navigation bar */
+    minWidth?: number;
+    /** main navigation items */
+    items?: HeaderNavigationItemData[];
+    /** main navigation overflow items */
+    itemsOverflow?: HeaderNavigationItemData[];
+    /** navigation component used for routing */
+    navigationComponent?: FC<NavLinkComponentProps>;
+    /** props for main items overflow component */
+    overflow?: HeaderNavigationOverflowProps;
+}
+export declare const HeaderNavigationStacked: FC<HeaderNavigationStackedProps>;
 //# sourceMappingURL=header-navigation.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"header-navigation.d.ts","sourceRoot":"","sources":["../../../src/components/header-navigation/header-navigation.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"header-navigation.d.ts","sourceRoot":"","sources":["../../../src/components/header-navigation/header-navigation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAEhF,OAAO,EAAE,EAAE,EAAE,YAAY,EAAE,SAAS,EAA4C,MAAM,OAAO,CAAC;AAC9F,OAAO,EAAE,wBAAwB,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAYzF,MAAM,WAAW,6BAA6B;IAC1C,SAAS,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAC;IAC3C,KAAK,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;IACnC,MAAM,CAAC,EAAE,OAAO,CAAC;CACpB;AA0CD,MAAM,WAAW,qBAAqB;IAClC,uBAAuB;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mBAAmB;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,2CAA2C;IAC3C,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,gCAAgC;IAChC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,wBAAwB,EAAE,CAAC;IACnC,qCAAqC;IACrC,aAAa,CAAC,EAAE,wBAAwB,EAAE,CAAC;IAC3C,4CAA4C;IAC5C,mBAAmB,CAAC,EAAE,EAAE,CAAC,qBAAqB,CAAC,CAAC;IAChD,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,6BAA6B,CAAC;CAC5C;AAQD,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CAkGtD,CAAC;AAEF,MAAM,WAAW,4BAA4B;IACzC,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uBAAuB;IACvB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,4CAA4C;IAC5C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mBAAmB;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,2CAA2C;IAC3C,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,gCAAgC;IAChC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qBAAqB;IACrB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,kCAAkC;IAClC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,wBAAwB,EAAE,CAAC;IACnC,qCAAqC;IACrC,aAAa,CAAC,EAAE,wBAAwB,EAAE,CAAC;IAC3C,4CAA4C;IAC5C,mBAAmB,CAAC,EAAE,EAAE,CAAC,qBAAqB,CAAC,CAAC;IAChD,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,6BAA6B,CAAC;CAC5C;AAED,eAAO,MAAM,uBAAuB,EAAE,EAAE,CAAC,4BAA4B,CA+GpE,CAAC"}

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

@@ -1,21 +1,10 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Icon, Popover, Tooltip, } from '@servicetitan/design-system';
+import { createElement as _createElement } from "react";
+import { Icon, Popover } from '@servicetitan/design-system';
 import classNames from 'classnames';
-import { Fragment, useCallback, useEffect, useRef, useState, } from 'react';
-import { DefaultNavLinkComponent, NavLinkContext, useNavLink, } from '../../utils/navigation-context';
-import { CounterTag } from '../counter-tag';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { DefaultNavLinkComponent, NavLinkContext } from '../../utils/navigation-context';
+import { HeaderNavigationItem } from './header-navigation-content';
 import * as Styles from './header-navigation.module.less';
 function useForceUpdate() {
     const [, setTick] = useState(0);
@@ -23,35 +12,6 @@ function useForceUpdate() {
         setTick(tick => tick + 1);
     }, []);
 }
-/** Content for navigation items */
-export const HeaderNavigationItemContent = ({ title, counter, iconClassName, iconComponent: IconComponent, iconName, iconSize = '24px', }) => (_jsxs(Fragment, { children: [IconComponent ? (_jsx("i", { className: classNames(Styles.icon, iconClassName), children: _jsx(IconComponent, {}) })) : iconName ? (_jsx(Icon, { size: iconSize, name: iconName, className: classNames(Styles.icon, iconClassName) })) : (_jsx("i", { className: classNames(Styles.icon, iconClassName) })), !!title && _jsx("ins", { children: title }), !!counter && (_jsx(CounterTag, { data: counter, className: Styles.counter, longClassName: Styles.counterLong }))] }));
-const withTooltip = (element, tooltip) => tooltip ? (_jsx(Tooltip, { el: "div", direction: "b", text: tooltip, children: element })) : (element);
-/** Navigation extra item with link */
-export const HeaderNavigationLink = (_a) => {
-    var { id, to, hint, tooltip, counter, className, iconClassName, iconComponent, iconName, isActive, target } = _a, rest = __rest(_a, ["id", "to", "hint", "tooltip", "counter", "className", "iconClassName", "iconComponent", "iconName", "isActive", "target"]);
-    const NavigationComponent = useNavLink();
-    return withTooltip(_createElement(NavigationComponent, Object.assign({ "data-cy": `navigation-link-${id}`, "data-pendo": `navigation-link-${id}` }, rest, { key: id, to: to, title: hint, className: classNames(Styles.link, className, {
-            [Styles.active]: isActive === true,
-        }), isActive: typeof isActive === 'function' ? isActive : undefined, activeClassName: Styles.active, target: target }),
-        _jsx(HeaderNavigationItemContent, { counter: counter, iconComponent: iconComponent, iconClassName: iconClassName, iconName: iconName })), tooltip);
-};
-/** Navigation main menu item */
-const HeaderNavigationItem = ({ id, to, title, hint, counter, className, iconClassName, iconComponent, iconName, isActive, main, minimized, }) => {
-    const NavigationComponent = useNavLink();
-    return withTooltip(_jsx(NavigationComponent, { "data-cy": `navigation-item-${id}`, "data-pendo": `navigation-item-${id}`, to: to, title: hint, className: classNames(Styles.link, className, main ? Styles.linkMain : Styles.linkOverflow, {
-            [Styles.active]: isActive === true,
-        }), isActive: typeof isActive === 'function' ? isActive : undefined, activeClassName: Styles.active, children: _jsx(HeaderNavigationItemContent, { title: minimized ? undefined : title, counter: counter, iconComponent: iconComponent, iconClassName: iconClassName, iconName: iconName, iconSize: "20px" }) }, id), minimized ? title : undefined);
-};
-/** Navigation extra item with icon button */
-export const HeaderNavigationTrigger = (_a) => {
-    var { id, className, counter, iconClassName, iconComponent, iconName, hint, tooltip } = _a, rest = __rest(_a, ["id", "className", "counter", "iconClassName", "iconComponent", "iconName", "hint", "tooltip"]);
-    return withTooltip(_jsx("div", Object.assign({ "data-cy": `navigation-trigger-${id}`, "data-pendo": `navigation-trigger-${id}` }, rest, { title: hint, className: classNames(Styles.link, 'cursor-pointer', className), children: _jsx(HeaderNavigationItemContent, { counter: counter, iconComponent: iconComponent, iconClassName: iconClassName, iconName: iconName }) })), tooltip);
-};
-/** Navigation extra item with custom content */
-export const HeaderNavigationTriggerCustom = (_a) => {
-    var { children, id, className, tooltip, title } = _a, rest = __rest(_a, ["children", "id", "className", "tooltip", "title"]);
-    return withTooltip(_jsx("div", Object.assign({ "data-cy": `navigation-custom-${id}`, "data-pendo": `navigation-custom-${id}` }, rest, { title: title, className: classNames(Styles.link, 'cursor-pointer', className), children: children })), tooltip);
-};
 const HeaderNavigationOverflow = ({ items, overflow }) => {
     var _a, _b;
     const [isOpen, setIsOpen] = useState(false);
@@ -63,7 +23,7 @@ var MinimizedState;
     MinimizedState[MinimizedState["Minimized"] = 1] = "Minimized";
     MinimizedState[MinimizedState["Full"] = 2] = "Full";
 })(MinimizedState || (MinimizedState = {}));
-export const HeaderNavigation = ({ children, className, contentClassName, id, items, itemsOverflow, left, leftClassName, minWidth = 800, navigationComponent = DefaultNavLinkComponent, overflow, }) => {
+export const HeaderNavigation = ({ children, className, id, items, itemsOverflow, left, leftClassName, rightClassName, minWidth = 800, navigationComponent = DefaultNavLinkComponent, overflow, }) => {
     const leftRef = useRef(null);
     const rightRef = useRef(null);
     const centerRef = useRef(null);
@@ -96,8 +56,41 @@ export const HeaderNavigation = ({ children, className, contentClassName, id, it
         updateIsMinimized();
     });
     return (_jsx(NavLinkContext.Provider, { value: navigationComponent, children: _jsxs("div", { className: classNames(Styles.header, className, {
-                [Styles.minimized]: minimized === MinimizedState.Minimized,
                 [Styles.calculating]: minimized === MinimizedState.Calculating,
-            }), style: { minWidth: `${minWidth}px` }, id: id, "data-cy": "header-navigation", children: [_jsx("div", { className: leftClassName, ref: leftRef, "data-cy": "navigation-left", children: left }), _jsx("div", { ref: centerRef, className: classNames('d-if flex-grow-1 flex-basis-0 justify-content-center', Styles.center), "data-cy": "navigation-items", children: _jsxs("div", { ref: navigationRef, className: classNames(Styles.navigationItems, 'd-if'), children: [items === null || items === void 0 ? void 0 : items.map(item => (_createElement(HeaderNavigationItem, Object.assign({}, item, { minimized: minimized === MinimizedState.Minimized, main: true, key: item.id })))), !!(itemsOverflow === null || itemsOverflow === void 0 ? void 0 : itemsOverflow.length) && (_jsx(HeaderNavigationOverflow, { items: itemsOverflow, overflow: overflow }))] }) }), _jsx("div", { className: classNames('d-f flex-row justify-content-end align-items-center', Styles.right, contentClassName), ref: rightRef, "data-cy": "navigation-content", children: children })] }) }));
+            }), style: { minWidth: `${minWidth}px` }, id: id, "data-cy": "header-navigation", children: [_jsx("div", { className: leftClassName, ref: leftRef, "data-cy": "navigation-left", children: left }), _jsx("div", { ref: centerRef, className: classNames('d-if flex-grow-1 flex-basis-0 justify-content-center', Styles.center), "data-cy": "navigation-items", children: _jsxs("div", { ref: navigationRef, className: classNames('d-if'), children: [items === null || items === void 0 ? void 0 : items.map(item => (_createElement(HeaderNavigationItem, Object.assign({}, item, { minimized: minimized === MinimizedState.Minimized, main: true, key: item.id })))), !!(itemsOverflow === null || itemsOverflow === void 0 ? void 0 : itemsOverflow.length) && (_jsx(HeaderNavigationOverflow, { items: itemsOverflow, overflow: overflow }))] }) }), _jsx("div", { className: classNames('d-f flex-row justify-content-end align-items-center', Styles.right, rightClassName), ref: rightRef, "data-cy": "navigation-right", children: children })] }) }));
+};
+export const HeaderNavigationStacked = ({ className, id, items, itemsOverflow, left, leftClassName, right, rightClassName, center, centerClassName, minWidth = 800, navigationComponent = DefaultNavLinkComponent, overflow, }) => {
+    const bottomRef = useRef(null);
+    const navigationRef = useRef(null);
+    const forceUpdate = useForceUpdate();
+    const [minimized, setMinimized] = useState(MinimizedState.Calculating);
+    useEffect(() => {
+        const handleResize = () => {
+            setMinimized(MinimizedState.Calculating);
+            forceUpdate();
+        };
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, [forceUpdate]);
+    useEffect(() => {
+        setMinimized(MinimizedState.Calculating);
+        forceUpdate();
+    }, [items, itemsOverflow, forceUpdate]);
+    const updateIsMinimized = () => {
+        if (bottomRef.current && navigationRef.current) {
+            if (navigationRef.current.clientWidth + 16 > bottomRef.current.clientWidth) {
+                setMinimized(MinimizedState.Minimized);
+            }
+            else if (minimized === MinimizedState.Calculating) {
+                setMinimized(MinimizedState.Full);
+            }
+        }
+    };
+    useEffect(() => {
+        updateIsMinimized();
+    });
+    return (_jsx(NavLinkContext.Provider, { value: navigationComponent, children: _jsxs("div", { className: classNames(Styles.headerStacked, {
+                [Styles.calculating]: minimized === MinimizedState.Calculating,
+            }, className), style: { minWidth: `${minWidth}px` }, id: id, "data-cy": "header-navigation", children: [_jsx("div", { className: classNames(Styles.heTopLeft, leftClassName), "data-cy": "navigation-left", children: left }), _jsx("div", { className: classNames(Styles.heTopCenter, centerClassName), "data-cy": "navigation-center", children: center }), _jsx("div", { className: classNames('d-f flex-row justify-content-end align-items-center', Styles.heTopRight, rightClassName), "data-cy": "navigation-right", children: right }), _jsx("div", { ref: bottomRef, className: classNames(Styles.heBottom, 'd-if flex-grow-1 flex-basis-0 justify-content-center', Styles.center), "data-cy": "navigation-items", children: _jsxs("div", { ref: navigationRef, className: classNames('d-if'), children: [items === null || items === void 0 ? void 0 : items.map(item => (_createElement(HeaderNavigationItem, Object.assign({}, item, { minimized: minimized === MinimizedState.Minimized, main: true, key: item.id })))), !!(itemsOverflow === null || itemsOverflow === void 0 ? void 0 : itemsOverflow.length) && (_jsx(HeaderNavigationOverflow, { items: itemsOverflow, overflow: overflow }))] }) })] }) }));
 };
 //# sourceMappingURL=header-navigation.js.map