@servicetitan/navigation 11.0.0 → 11.1.0

package/dist/components/badge-tag.js

@@ -1,8 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Badge } from '@servicetitan/anvil2';
 import classNames from 'classnames';
-export const BadgeTag = ({ className, data, longClassName }) => {
+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;
+    return value ? /*#__PURE__*/ _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 +1 @@
-{"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"}
+{"version":3,"sources":["../../src/components/badge-tag.tsx"],"sourcesContent":["import { Badge } from '@servicetitan/anvil2';\nimport classNames from 'classnames';\nimport { FC } from 'react';\nimport { CounterTagData } from '../utils/counter-tag';\n\nexport interface BadgeTagProps extends CounterTagData {\n    [key: string]: any;\n    className?: string;\n}\n\nexport const BadgeTag: FC<{\n    className?: string;\n    longClassName?: string;\n    data: BadgeTagProps | undefined;\n}> = ({ className, data, longClassName }) => {\n    const { value, className: dataClassName, ...rest } = data ?? {};\n\n    return value ? (\n        <Badge\n            {...rest}\n            className={classNames(\n                className,\n                dataClassName,\n                typeof value === 'number' && value >= 100 && longClassName\n            )}\n        >\n            {typeof value === 'number' ? (value >= 100 ? '99+' : value) : undefined}\n        </Badge>\n    ) : null;\n};\n"],"names":["Badge","classNames","BadgeTag","className","data","longClassName","value","dataClassName","rest","undefined"],"mappings":";AAAA,SAASA,KAAK,QAAQ,uBAAuB;AAC7C,OAAOC,gBAAgB,aAAa;AASpC,OAAO,MAAMC,WAIR,CAAC,EAAEC,SAAS,EAAEC,IAAI,EAAEC,aAAa,EAAE;IACpC,MAAM,EAAEC,KAAK,EAAEH,WAAWI,aAAa,EAAE,GAAGC,MAAM,GAAGJ,iBAAAA,kBAAAA,OAAQ,CAAC;IAE9D,OAAOE,sBACH,KAACN;QACI,GAAGQ,IAAI;QACRL,WAAWF,WACPE,WACAI,eACA,OAAOD,UAAU,YAAYA,SAAS,OAAOD;kBAGhD,OAAOC,UAAU,WAAYA,SAAS,MAAM,QAAQA,QAASG;SAElE;AACR,EAAE"}

package/dist/components/counter-tag.js

@@ -1,8 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Tag } from '@servicetitan/design-system';
 import classNames from 'classnames';
-export const CounterTag = ({ className, data, longClassName }) => {
+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;
+    return value ? /*#__PURE__*/ _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 +1 @@
-{"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"}
+{"version":3,"sources":["../../src/components/counter-tag.tsx"],"sourcesContent":["import { Tag } from '@servicetitan/design-system';\nimport classNames from 'classnames';\nimport { FC } from 'react';\nimport { CounterTagData } from '../utils/counter-tag';\n\nexport interface CounterTagProps extends CounterTagData {\n    [key: string]: any;\n    className: string;\n}\n\nexport const CounterTag: FC<{\n    className?: string;\n    longClassName?: string;\n    data: CounterTagProps | undefined;\n}> = ({ className, data, longClassName }) => {\n    const { value, className: dataClassName, ...rest } = data ?? {};\n\n    return value ? (\n        <Tag\n            color=\"critical\"\n            {...rest}\n            className={classNames(\n                className,\n                dataClassName,\n                typeof value === 'number' && value > 10 && longClassName\n            )}\n            compact\n            badge\n        >\n            {value}\n        </Tag>\n    ) : null;\n};\n"],"names":["Tag","classNames","CounterTag","className","data","longClassName","value","dataClassName","rest","color","compact","badge"],"mappings":";AAAA,SAASA,GAAG,QAAQ,8BAA8B;AAClD,OAAOC,gBAAgB,aAAa;AASpC,OAAO,MAAMC,aAIR,CAAC,EAAEC,SAAS,EAAEC,IAAI,EAAEC,aAAa,EAAE;IACpC,MAAM,EAAEC,KAAK,EAAEH,WAAWI,aAAa,EAAE,GAAGC,MAAM,GAAGJ,iBAAAA,kBAAAA,OAAQ,CAAC;IAE9D,OAAOE,sBACH,KAACN;QACGS,OAAM;QACL,GAAGD,IAAI;QACRL,WAAWF,WACPE,WACAI,eACA,OAAOD,UAAU,YAAYA,QAAQ,MAAMD;QAE/CK,OAAO;QACPC,KAAK;kBAEJL;SAEL;AACR,EAAE"}

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

@@ -7,16 +7,52 @@ 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, }) => {
+/** 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 }))] }));
+    return /*#__PURE__*/ _jsxs(Fragment, {
+        children: [
+            IconComponent ? /*#__PURE__*/ _jsx("i", {
+                className: iconClass,
+                children: /*#__PURE__*/ _jsx(IconComponent, {})
+            }) : iconName ? /*#__PURE__*/ _jsx(Icon, {
+                name: iconName,
+                className: iconClass
+            }) : /*#__PURE__*/ _jsx("i", {
+                className: iconClass
+            }),
+            !!title && /*#__PURE__*/ _jsx("span", {
+                className: classNames(Styles.navigationItemTitle, titleClassName),
+                children: title
+            }),
+            !!tag && /*#__PURE__*/ _jsx(CounterTag, {
+                data: tag,
+                className: classNames(Styles.navigationItemCounter, counterClassName),
+                longClassName: Styles.navigationItemCounterLong
+            })
+        ]
+    });
 };
-/** Navigation main menu item */
-export const HeaderNavigationItem = ({ id, to, counter, title, hint, className, iconClassName, iconComponent, iconName, isActive, main, minimized, tag, }) => {
+/** 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);
+    return withTooltip(/*#__PURE__*/ _jsx(NavigationComponent, {
+        "data-cy": `navigation-item-${id}`,
+        "data-pendo": `navigation-item-${id}`,
+        to: to,
+        title: hint,
+        className: classNames(Styles.navigationItem, main ? Styles.navigationItemMain : Styles.navigationItemOverflow, className, {
+            [Styles.navigationItemActive]: isActive === true
+        }),
+        isActive: typeof isActive === 'function' ? isActive : undefined,
+        activeClassName: Styles.navigationItemActive,
+        children: /*#__PURE__*/ _jsx(HeaderNavigationItemContent, {
+            title: minimized ? undefined : title,
+            titleClassName: main ? '' : 'm-l-half',
+            tag: getCounterTag(counter, tag),
+            iconComponent: iconComponent,
+            iconClassName: iconClassName,
+            iconName: iconName
+        })
+    }, id), minimized ? title : undefined);
 };
+
 //# sourceMappingURL=header-navigation-content.js.map

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

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

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

@@ -7,20 +7,56 @@ 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, title, ...rest }) => {
+/** Navigation extra item with link */ export const HeaderNavigationLink = ({ id, to, counter, hint, tooltip, className, icon, iconActive, iconClassName, iconComponent, iconName, isActive, label, labelClassName, tag, target, title, ...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);
+    return withTooltip(/*#__PURE__*/ _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
+    }, /*#__PURE__*/ _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, title, ...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 icon button */ export const HeaderNavigationTrigger = ({ id, className, counter, icon, iconActive, iconClassName, iconComponent, iconName, isActive, label, labelClassName, hint, tag, tooltip, title, ...rest })=>{
+    return withTooltip(/*#__PURE__*/ _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: /*#__PURE__*/ _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);
+/** Navigation extra item with custom content */ export const HeaderNavigationTriggerCustom = ({ children, id, className, tooltip, title, ...rest })=>withTooltip(/*#__PURE__*/ _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

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

@@ -1 +1 @@
-{"version":3,"file":"header-navigation-links.js","sourceRoot":"","sources":["../../../src/components/header-navigation/header-navigation-links.tsx"],"names":[],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/header-navigation/header-navigation-links.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { FC, ReactNode, useContext } from 'react';\nimport { NavigationComponentContext } from '../../utils/navigation-context';\nimport {\n    HeaderNavigationLinkProps,\n    HeaderNavigationTriggerProps,\n} from '../../utils/navigation-legacy';\nimport { getCounterTag } from '../../utils/side-nav';\nimport { HeaderNavigationItemContent } from './header-navigation-content';\nimport * as Styles from './header-navigation.module.less';\nimport { withTooltip } from './with-tooltip';\n\n/** Navigation extra item with link */\nexport const HeaderNavigationLink: FC<HeaderNavigationLinkProps> = ({\n    id,\n    to,\n    counter,\n    hint,\n    tooltip,\n    className,\n    icon,\n    iconActive,\n    iconClassName,\n    iconComponent,\n    iconName,\n    isActive,\n    label,\n    labelClassName,\n    tag,\n    target,\n    title,\n    ...rest\n}) => {\n    const NavigationComponent = useContext(NavigationComponentContext);\n\n    return withTooltip(\n        <NavigationComponent\n            data-cy={`navigation-link-${id}`}\n            data-pendo={`navigation-link-${id}`}\n            {...rest}\n            key={id}\n            to={to}\n            title={hint}\n            className={classNames(Styles.navigationLink, Styles.navigationItem, className, {\n                [Styles.navigationItemActive]: isActive === true,\n            })}\n            isActive={typeof isActive === 'function' ? isActive : undefined}\n            activeClassName={Styles.navigationItemActive}\n            target={target}\n        >\n            <HeaderNavigationItemContent\n                tag={getCounterTag(counter, tag)}\n                iconComponent={iconComponent}\n                iconClassName={iconClassName}\n                iconName={iconName}\n                title={label}\n                titleClassName={labelClassName}\n            />\n        </NavigationComponent>,\n        tooltip\n    );\n};\n\n/** Navigation extra item with icon button */\nexport const HeaderNavigationTrigger: FC<HeaderNavigationTriggerProps> = ({\n    id,\n    className,\n    counter,\n    icon,\n    iconActive,\n    iconClassName,\n    iconComponent,\n    iconName,\n    isActive,\n    label,\n    labelClassName,\n    hint,\n    tag,\n    tooltip,\n    title,\n    ...rest\n}) => {\n    return withTooltip(\n        <div\n            data-cy={`navigation-trigger-${id}`}\n            data-pendo={`navigation-trigger-${id}`}\n            {...rest}\n            title={hint}\n            className={classNames(\n                Styles.navigationItem,\n                Styles.navigationLink,\n                {\n                    [Styles.navigationItemActive]: isActive === true,\n                },\n                'cursor-pointer',\n                className\n            )}\n        >\n            <HeaderNavigationItemContent\n                tag={getCounterTag(counter, tag)}\n                iconComponent={iconComponent}\n                iconClassName={iconClassName}\n                iconName={iconName}\n                title={label}\n                titleClassName={labelClassName}\n            />\n        </div>,\n        tooltip\n    );\n};\n\n/** Navigation extra item with custom content */\nexport const HeaderNavigationTriggerCustom: FC<\n    Omit<\n        HeaderNavigationTriggerProps,\n        | 'counter'\n        | 'iconSize'\n        | 'iconName'\n        | 'iconComponent'\n        | 'iconClassName'\n        | 'icon'\n        | 'iconActive'\n    > & { children: ReactNode }\n> = ({ children, id, className, tooltip, title, ...rest }) =>\n    withTooltip(\n        <div\n            data-cy={`navigation-custom-${id}`}\n            data-pendo={`navigation-custom-${id}`}\n            {...rest}\n            title={title}\n            className={classNames(\n                Styles.navigationItem,\n                Styles.navigationLink,\n                'cursor-pointer',\n                className\n            )}\n        >\n            {children}\n        </div>,\n        tooltip\n    );\n"],"names":["classNames","useContext","NavigationComponentContext","getCounterTag","HeaderNavigationItemContent","Styles","withTooltip","HeaderNavigationLink","id","to","counter","hint","tooltip","className","icon","iconActive","iconClassName","iconComponent","iconName","isActive","label","labelClassName","tag","target","title","rest","NavigationComponent","data-cy","data-pendo","key","navigationLink","navigationItem","navigationItemActive","undefined","activeClassName","titleClassName","HeaderNavigationTrigger","div","HeaderNavigationTriggerCustom","children"],"mappings":";;AAAA,OAAOA,gBAAgB,aAAa;AACpC,SAAwBC,UAAU,QAAQ,QAAQ;AAClD,SAASC,0BAA0B,QAAQ,iCAAiC;AAK5E,SAASC,aAAa,QAAQ,uBAAuB;AACrD,SAASC,2BAA2B,QAAQ,8BAA8B;AAC1E,YAAYC,YAAY,kCAAkC;AAC1D,SAASC,WAAW,QAAQ,iBAAiB;AAE7C,oCAAoC,GACpC,OAAO,MAAMC,uBAAsD,CAAC,EAChEC,EAAE,EACFC,EAAE,EACFC,OAAO,EACPC,IAAI,EACJC,OAAO,EACPC,SAAS,EACTC,IAAI,EACJC,UAAU,EACVC,aAAa,EACbC,aAAa,EACbC,QAAQ,EACRC,QAAQ,EACRC,KAAK,EACLC,cAAc,EACdC,GAAG,EACHC,MAAM,EACNC,KAAK,EACL,GAAGC,MACN;IACG,MAAMC,sBAAsBzB,WAAWC;IAEvC,OAAOI,0BACH,eAACoB;QACGC,WAAS,CAAC,gBAAgB,EAAEnB,IAAI;QAChCoB,cAAY,CAAC,gBAAgB,EAAEpB,IAAI;QAClC,GAAGiB,IAAI;QACRI,KAAKrB;QACLC,IAAIA;QACJe,OAAOb;QACPE,WAAWb,WAAWK,OAAOyB,cAAc,EAAEzB,OAAO0B,cAAc,EAAElB,WAAW;YAC3E,CAACR,OAAO2B,oBAAoB,CAAC,EAAEb,aAAa;QAChD;QACAA,UAAU,OAAOA,aAAa,aAAaA,WAAWc;QACtDC,iBAAiB7B,OAAO2B,oBAAoB;QAC5CT,QAAQA;qBAER,KAACnB;QACGkB,KAAKnB,cAAcO,SAASY;QAC5BL,eAAeA;QACfD,eAAeA;QACfE,UAAUA;QACVM,OAAOJ;QACPe,gBAAgBd;SAGxBT;AAER,EAAE;AAEF,2CAA2C,GAC3C,OAAO,MAAMwB,0BAA4D,CAAC,EACtE5B,EAAE,EACFK,SAAS,EACTH,OAAO,EACPI,IAAI,EACJC,UAAU,EACVC,aAAa,EACbC,aAAa,EACbC,QAAQ,EACRC,QAAQ,EACRC,KAAK,EACLC,cAAc,EACdV,IAAI,EACJW,GAAG,EACHV,OAAO,EACPY,KAAK,EACL,GAAGC,MACN;IACG,OAAOnB,0BACH,KAAC+B;QACGV,WAAS,CAAC,mBAAmB,EAAEnB,IAAI;QACnCoB,cAAY,CAAC,mBAAmB,EAAEpB,IAAI;QACrC,GAAGiB,IAAI;QACRD,OAAOb;QACPE,WAAWb,WACPK,OAAO0B,cAAc,EACrB1B,OAAOyB,cAAc,EACrB;YACI,CAACzB,OAAO2B,oBAAoB,CAAC,EAAEb,aAAa;QAChD,GACA,kBACAN;kBAGJ,cAAA,KAACT;YACGkB,KAAKnB,cAAcO,SAASY;YAC5BL,eAAeA;YACfD,eAAeA;YACfE,UAAUA;YACVM,OAAOJ;YACPe,gBAAgBd;;QAGxBT;AAER,EAAE;AAEF,8CAA8C,GAC9C,OAAO,MAAM0B,gCAWT,CAAC,EAAEC,QAAQ,EAAE/B,EAAE,EAAEK,SAAS,EAAED,OAAO,EAAEY,KAAK,EAAE,GAAGC,MAAM,GACrDnB,0BACI,KAAC+B;QACGV,WAAS,CAAC,kBAAkB,EAAEnB,IAAI;QAClCoB,cAAY,CAAC,kBAAkB,EAAEpB,IAAI;QACpC,GAAGiB,IAAI;QACRD,OAAOA;QACPX,WAAWb,WACPK,OAAO0B,cAAc,EACrB1B,OAAOyB,cAAc,EACrB,kBACAjB;kBAGH0B;QAEL3B,SACF"}

package/dist/components/header-navigation/header-navigation-stories.module.less.d.ts

@@ -0,0 +1,3 @@
+export const __esModule: true;
+export const rocketIcon: string;
+

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

@@ -8,89 +8,221 @@ import { HeaderNavigationItem } from './header-navigation-content';
 import * as Styles from './header-navigation.module.less';
 function useForceUpdate() {
     const [, setTick] = useState(0);
-    return useCallback(() => {
-        setTick(tick => tick + 1);
+    return useCallback(()=>{
+        setTick((tick)=>tick + 1);
     }, []);
 }
-const HeaderNavigationOverflow = ({ items, overflow }) => {
-    var _a, _b;
+const HeaderNavigationOverflow = ({ items, overflow })=>{
     const [isOpen, setIsOpen] = useState(false);
-    return (_jsx(Popover, { open: isOpen, trigger: _jsx(Icon, { name: "more_vert", size: "24px", className: "c-pointer", onClick: () => setIsOpen(true), color: "white", "data-cy": "navigation-overflow-trigger", "data-pendo": "navigation-overflow-trigger" }), direction: (_a = overflow === null || overflow === void 0 ? void 0 : overflow.direction) !== null && _a !== void 0 ? _a : 'bl', width: (_b = overflow === null || overflow === void 0 ? void 0 : overflow.width) !== null && _b !== void 0 ? _b : 'xs', portal: overflow === null || overflow === void 0 ? void 0 : overflow.portal, onClickOutside: () => setIsOpen(false), wrapperClassName: "d-if-i align-items-center", popoverContentClassName: Styles.overflowPopover, children: _jsx("div", { onClick: () => setIsOpen(false), className: Styles.navigationOverflow, "data-cy": "navigation-overflow-content", children: items.map(item => (_createElement(HeaderNavigationItem, { ...item, key: item.id, minimized: false, main: false }))) }) }));
+    var _overflow_direction, _overflow_width;
+    return /*#__PURE__*/ _jsx(Popover, {
+        open: isOpen,
+        trigger: /*#__PURE__*/ _jsx(Icon, {
+            name: "more_vert",
+            size: "24px",
+            className: "c-pointer",
+            onClick: ()=>setIsOpen(true),
+            color: "white",
+            "data-cy": "navigation-overflow-trigger",
+            "data-pendo": "navigation-overflow-trigger"
+        }),
+        direction: (_overflow_direction = overflow === null || overflow === void 0 ? void 0 : overflow.direction) !== null && _overflow_direction !== void 0 ? _overflow_direction : 'bl',
+        width: (_overflow_width = overflow === null || overflow === void 0 ? void 0 : overflow.width) !== null && _overflow_width !== void 0 ? _overflow_width : 'xs',
+        portal: overflow === null || overflow === void 0 ? void 0 : overflow.portal,
+        onClickOutside: ()=>setIsOpen(false),
+        wrapperClassName: "d-if-i align-items-center",
+        popoverContentClassName: Styles.overflowPopover,
+        children: /*#__PURE__*/ _jsx("div", {
+            onClick: ()=>setIsOpen(false),
+            className: Styles.navigationOverflow,
+            "data-cy": "navigation-overflow-content",
+            children: items.map((item)=>/*#__PURE__*/ _createElement(HeaderNavigationItem, {
+                    ...item,
+                    key: item.id,
+                    minimized: false,
+                    main: false
+                }))
+        })
+    });
 };
-var MinimizedState;
-(function (MinimizedState) {
+var MinimizedState = /*#__PURE__*/ function(MinimizedState) {
     MinimizedState[MinimizedState["Calculating"] = 0] = "Calculating";
     MinimizedState[MinimizedState["Minimized"] = 1] = "Minimized";
     MinimizedState[MinimizedState["Full"] = 2] = "Full";
-})(MinimizedState || (MinimizedState = {}));
-export const HeaderNavigation = ({ children, className, id, items, itemsOverflow, left, leftClassName, rightClassName, minWidth = 800, overflow, }) => {
+    return MinimizedState;
+}(MinimizedState || {});
+export const HeaderNavigation = ({ children, className, id, items, itemsOverflow, left, leftClassName, rightClassName, minWidth = 800, overflow })=>{
     const leftRef = useRef(null);
     const rightRef = useRef(null);
     const centerRef = useRef(null);
     const navigationRef = useRef(null);
     const forceUpdate = useForceUpdate();
-    const [minimized, setMinimized] = useState(MinimizedState.Calculating);
-    useEffect(() => {
-        const handleResize = () => {
-            setMinimized(MinimizedState.Calculating);
+    const [minimized, setMinimized] = useState(0);
+    useEffect(()=>{
+        const handleResize = ()=>{
+            setMinimized(0);
             forceUpdate();
         };
         window.addEventListener('resize', handleResize);
-        return () => window.removeEventListener('resize', handleResize);
-    }, [forceUpdate]);
-    useEffect(() => {
-        setMinimized(MinimizedState.Calculating);
+        return ()=>window.removeEventListener('resize', handleResize);
+    }, [
+        forceUpdate
+    ]);
+    useEffect(()=>{
+        setMinimized(0);
         forceUpdate();
-    }, [items, itemsOverflow, forceUpdate]);
-    const updateIsMinimized = () => {
+    }, [
+        items,
+        itemsOverflow,
+        forceUpdate
+    ]);
+    const updateIsMinimized = ()=>{
         if (centerRef.current && navigationRef.current) {
             if (navigationRef.current.clientWidth > centerRef.current.clientWidth) {
-                setMinimized(MinimizedState.Minimized);
-            }
-            else if (minimized === MinimizedState.Calculating) {
-                setMinimized(MinimizedState.Full);
+                setMinimized(1);
+            } else if (minimized === 0) {
+                setMinimized(2);
             }
         }
     };
-    useEffect(() => {
+    useEffect(()=>{
         updateIsMinimized();
     });
-    return (_jsx(NavigationLegacyContext.Provider, { value: true, children: _jsxs("div", { className: classNames(Styles.header, className, {
-                [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('d-if'), children: [items === null || items === void 0 ? void 0 : items.map(item => (_createElement(HeaderNavigationItem, { ...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 })] }) }));
+    return /*#__PURE__*/ _jsx(NavigationLegacyContext.Provider, {
+        value: true,
+        children: /*#__PURE__*/ _jsxs("div", {
+            className: classNames(Styles.header, className, {
+                [Styles.calculating]: minimized === 0
+            }),
+            style: {
+                minWidth: `${minWidth}px`
+            },
+            id: id,
+            "data-cy": "header-navigation",
+            children: [
+                /*#__PURE__*/ _jsx("div", {
+                    className: leftClassName,
+                    ref: leftRef,
+                    "data-cy": "navigation-left",
+                    children: left
+                }),
+                /*#__PURE__*/ _jsx("div", {
+                    ref: centerRef,
+                    className: classNames('d-if flex-grow-1 flex-basis-0 justify-content-center', Styles.center),
+                    "data-cy": "navigation-items",
+                    children: /*#__PURE__*/ _jsxs("div", {
+                        ref: navigationRef,
+                        className: classNames('d-if'),
+                        children: [
+                            items === null || items === void 0 ? void 0 : items.map((item)=>/*#__PURE__*/ _createElement(HeaderNavigationItem, {
+                                    ...item,
+                                    minimized: minimized === 1,
+                                    main: true,
+                                    key: item.id
+                                })),
+                            !!(itemsOverflow === null || itemsOverflow === void 0 ? void 0 : itemsOverflow.length) && /*#__PURE__*/ _jsx(HeaderNavigationOverflow, {
+                                items: itemsOverflow,
+                                overflow: overflow
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ _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, overflow, }) => {
+export const HeaderNavigationStacked = ({ className, id, items, itemsOverflow, left, leftClassName, right, rightClassName, center, centerClassName, minWidth = 800, overflow })=>{
     const bottomRef = useRef(null);
     const navigationRef = useRef(null);
     const forceUpdate = useForceUpdate();
-    const [minimized, setMinimized] = useState(MinimizedState.Calculating);
-    useEffect(() => {
-        const handleResize = () => {
-            setMinimized(MinimizedState.Calculating);
+    const [minimized, setMinimized] = useState(0);
+    useEffect(()=>{
+        const handleResize = ()=>{
+            setMinimized(0);
             forceUpdate();
         };
         window.addEventListener('resize', handleResize);
-        return () => window.removeEventListener('resize', handleResize);
-    }, [forceUpdate]);
-    useEffect(() => {
-        setMinimized(MinimizedState.Calculating);
+        return ()=>window.removeEventListener('resize', handleResize);
+    }, [
+        forceUpdate
+    ]);
+    useEffect(()=>{
+        setMinimized(0);
         forceUpdate();
-    }, [items, itemsOverflow, forceUpdate]);
-    const updateIsMinimized = () => {
+    }, [
+        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);
+                setMinimized(1);
+            } else if (minimized === 0) {
+                setMinimized(2);
             }
         }
     };
-    useEffect(() => {
+    useEffect(()=>{
         updateIsMinimized();
     });
-    return (_jsx(NavigationLegacyContext.Provider, { value: true, 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, { ...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 }))] }) })] }) }));
+    return /*#__PURE__*/ _jsx(NavigationLegacyContext.Provider, {
+        value: true,
+        children: /*#__PURE__*/ _jsxs("div", {
+            className: classNames(Styles.headerStacked, {
+                [Styles.calculating]: minimized === 0
+            }, className),
+            style: {
+                minWidth: `${minWidth}px`
+            },
+            id: id,
+            "data-cy": "header-navigation",
+            children: [
+                /*#__PURE__*/ _jsx("div", {
+                    className: classNames(Styles.heTopLeft, leftClassName),
+                    "data-cy": "navigation-left",
+                    children: left
+                }),
+                /*#__PURE__*/ _jsx("div", {
+                    className: classNames(Styles.heTopCenter, centerClassName),
+                    "data-cy": "navigation-center",
+                    children: center
+                }),
+                /*#__PURE__*/ _jsx("div", {
+                    className: classNames('d-f flex-row justify-content-end align-items-center', Styles.heTopRight, rightClassName),
+                    "data-cy": "navigation-right",
+                    children: right
+                }),
+                /*#__PURE__*/ _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: /*#__PURE__*/ _jsxs("div", {
+                        ref: navigationRef,
+                        className: classNames('d-if'),
+                        children: [
+                            items === null || items === void 0 ? void 0 : items.map((item)=>/*#__PURE__*/ _createElement(HeaderNavigationItem, {
+                                    ...item,
+                                    minimized: minimized === 1,
+                                    main: true,
+                                    key: item.id
+                                })),
+                            !!(itemsOverflow === null || itemsOverflow === void 0 ? void 0 : itemsOverflow.length) && /*#__PURE__*/ _jsx(HeaderNavigationOverflow, {
+                                items: itemsOverflow,
+                                overflow: overflow
+                            })
+                        ]
+                    })
+                })
+            ]
+        })
+    });
 };
+
 //# sourceMappingURL=header-navigation.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"header-navigation.js","sourceRoot":"","sources":["../../../src/components/header-navigation/header-navigation.tsx"],"names":[],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/header-navigation/header-navigation.tsx"],"sourcesContent":["import { Icon, Popover, PopoverPropsStrict } from '@servicetitan/design-system';\nimport classNames from 'classnames';\nimport { FC, ReactElement, ReactNode, useCallback, useEffect, useRef, useState } from 'react';\nimport { NavigationLegacyContext } from '../../utils/navigation-context';\nimport { HeaderNavigationItemData } from '../../utils/navigation-legacy';\nimport { HeaderNavigationItem } from './header-navigation-content';\nimport * as Styles from './header-navigation.module.less';\n\nfunction useForceUpdate() {\n    const [, setTick] = useState(0);\n    return useCallback(() => {\n        setTick(tick => tick + 1);\n    }, []);\n}\n\nexport interface HeaderNavigationOverflowProps {\n    direction: PopoverPropsStrict['direction'];\n    width: PopoverPropsStrict['width'];\n    portal?: boolean;\n}\n\nconst HeaderNavigationOverflow: FC<{\n    items: HeaderNavigationItemData[];\n    overflow?: HeaderNavigationOverflowProps;\n}> = ({ items, overflow }) => {\n    const [isOpen, setIsOpen] = useState(false);\n\n    return (\n        <Popover\n            open={isOpen}\n            trigger={\n                <Icon\n                    name=\"more_vert\"\n                    size=\"24px\"\n                    className=\"c-pointer\"\n                    onClick={() => setIsOpen(true)}\n                    color=\"white\"\n                    data-cy=\"navigation-overflow-trigger\"\n                    data-pendo=\"navigation-overflow-trigger\"\n                />\n            }\n            direction={overflow?.direction ?? 'bl'}\n            width={overflow?.width ?? 'xs'}\n            portal={overflow?.portal}\n            onClickOutside={() => setIsOpen(false)}\n            wrapperClassName=\"d-if-i align-items-center\"\n            popoverContentClassName={Styles.overflowPopover}\n        >\n            <div\n                onClick={() => setIsOpen(false)}\n                className={Styles.navigationOverflow}\n                data-cy=\"navigation-overflow-content\"\n            >\n                {items.map(item => (\n                    <HeaderNavigationItem {...item} key={item.id} minimized={false} main={false} />\n                ))}\n            </div>\n        </Popover>\n    );\n};\n\nexport interface HeaderNavigationProps {\n    /** extra navigation */\n    children?: ReactNode;\n    /** container class name */\n    className?: string;\n    /** extra navigation container class name */\n    rightClassName?: string;\n    /** container id */\n    id?: string;\n    /** left content (usually used for logo) */\n    left?: ReactElement;\n    /** left container class name */\n    leftClassName?: string;\n    /** minimal width for navigation bar */\n    minWidth?: number;\n    /** main navigation items */\n    items?: HeaderNavigationItemData[];\n    /** main navigation overflow items */\n    itemsOverflow?: HeaderNavigationItemData[];\n    /** props for main items overflow component */\n    overflow?: HeaderNavigationOverflowProps;\n}\n\nenum MinimizedState {\n    Calculating,\n    Minimized,\n    Full,\n}\n\nexport const HeaderNavigation: FC<HeaderNavigationProps> = ({\n    children,\n    className,\n    id,\n    items,\n    itemsOverflow,\n    left,\n    leftClassName,\n    rightClassName,\n    minWidth = 800,\n    overflow,\n}) => {\n    const leftRef = useRef<HTMLDivElement>(null);\n    const rightRef = useRef<HTMLDivElement>(null);\n    const centerRef = useRef<HTMLDivElement>(null);\n    const navigationRef = useRef<HTMLDivElement>(null);\n    const forceUpdate = useForceUpdate();\n    const [minimized, setMinimized] = useState(MinimizedState.Calculating);\n\n    useEffect(() => {\n        const handleResize = () => {\n            setMinimized(MinimizedState.Calculating);\n            forceUpdate();\n        };\n\n        window.addEventListener('resize', handleResize);\n        return () => window.removeEventListener('resize', handleResize);\n    }, [forceUpdate]);\n\n    useEffect(() => {\n        setMinimized(MinimizedState.Calculating);\n        forceUpdate();\n    }, [items, itemsOverflow, forceUpdate]);\n\n    const updateIsMinimized = () => {\n        if (centerRef.current && navigationRef.current) {\n            if (navigationRef.current.clientWidth > centerRef.current.clientWidth) {\n                setMinimized(MinimizedState.Minimized);\n            } else if (minimized === MinimizedState.Calculating) {\n                setMinimized(MinimizedState.Full);\n            }\n        }\n    };\n\n    useEffect(() => {\n        updateIsMinimized();\n    });\n\n    return (\n        <NavigationLegacyContext.Provider value>\n            <div\n                className={classNames(Styles.header, className, {\n                    [Styles.calculating]: minimized === MinimizedState.Calculating,\n                })}\n                style={{ minWidth: `${minWidth}px` }}\n                id={id}\n                data-cy=\"header-navigation\"\n            >\n                <div className={leftClassName} ref={leftRef} data-cy=\"navigation-left\">\n                    {left}\n                </div>\n                <div\n                    ref={centerRef}\n                    className={classNames(\n                        'd-if flex-grow-1 flex-basis-0 justify-content-center',\n                        Styles.center\n                    )}\n                    data-cy=\"navigation-items\"\n                >\n                    <div ref={navigationRef} className={classNames('d-if')}>\n                        {items?.map(item => (\n                            <HeaderNavigationItem\n                                {...item}\n                                minimized={minimized === MinimizedState.Minimized}\n                                main\n                                key={item.id}\n                            />\n                        ))}\n                        {!!itemsOverflow?.length && (\n                            <HeaderNavigationOverflow items={itemsOverflow} overflow={overflow} />\n                        )}\n                    </div>\n                </div>\n                <div\n                    className={classNames(\n                        'd-f flex-row justify-content-end align-items-center',\n                        Styles.right,\n                        rightClassName\n                    )}\n                    ref={rightRef}\n                    data-cy=\"navigation-right\"\n                >\n                    {children}\n                </div>\n            </div>\n        </NavigationLegacyContext.Provider>\n    );\n};\n\nexport interface HeaderNavigationStackedProps {\n    /** container class name */\n    className?: string;\n    /** extra navigation */\n    right?: ReactNode;\n    /** extra navigation container class name */\n    rightClassName?: string;\n    /** container id */\n    id?: string;\n    /** left content (usually used for logo) */\n    left?: ReactElement;\n    /** left container class name */\n    leftClassName?: string;\n    /** center content */\n    center?: ReactElement;\n    /** center container class name */\n    centerClassName?: string;\n    /** minimal width for navigation bar */\n    minWidth?: number;\n    /** main navigation items */\n    items?: HeaderNavigationItemData[];\n    /** main navigation overflow items */\n    itemsOverflow?: HeaderNavigationItemData[];\n    /** props for main items overflow component */\n    overflow?: HeaderNavigationOverflowProps;\n}\n\nexport const HeaderNavigationStacked: FC<HeaderNavigationStackedProps> = ({\n    className,\n    id,\n    items,\n    itemsOverflow,\n    left,\n    leftClassName,\n    right,\n    rightClassName,\n    center,\n    centerClassName,\n    minWidth = 800,\n    overflow,\n}) => {\n    const bottomRef = useRef<HTMLDivElement>(null);\n    const navigationRef = useRef<HTMLDivElement>(null);\n    const forceUpdate = useForceUpdate();\n    const [minimized, setMinimized] = useState(MinimizedState.Calculating);\n\n    useEffect(() => {\n        const handleResize = () => {\n            setMinimized(MinimizedState.Calculating);\n            forceUpdate();\n        };\n\n        window.addEventListener('resize', handleResize);\n        return () => window.removeEventListener('resize', handleResize);\n    }, [forceUpdate]);\n\n    useEffect(() => {\n        setMinimized(MinimizedState.Calculating);\n        forceUpdate();\n    }, [items, itemsOverflow, forceUpdate]);\n\n    const updateIsMinimized = () => {\n        if (bottomRef.current && navigationRef.current) {\n            if (navigationRef.current.clientWidth + 16 > bottomRef.current.clientWidth) {\n                setMinimized(MinimizedState.Minimized);\n            } else if (minimized === MinimizedState.Calculating) {\n                setMinimized(MinimizedState.Full);\n            }\n        }\n    };\n\n    useEffect(() => {\n        updateIsMinimized();\n    });\n\n    return (\n        <NavigationLegacyContext.Provider value>\n            <div\n                className={classNames(\n                    Styles.headerStacked,\n                    {\n                        [Styles.calculating]: minimized === MinimizedState.Calculating,\n                    },\n                    className\n                )}\n                style={{ minWidth: `${minWidth}px` }}\n                id={id}\n                data-cy=\"header-navigation\"\n            >\n                <div\n                    className={classNames(Styles.heTopLeft, leftClassName)}\n                    data-cy=\"navigation-left\"\n                >\n                    {left}\n                </div>\n                <div\n                    className={classNames(Styles.heTopCenter, centerClassName)}\n                    data-cy=\"navigation-center\"\n                >\n                    {center}\n                </div>\n                <div\n                    className={classNames(\n                        'd-f flex-row justify-content-end align-items-center',\n                        Styles.heTopRight,\n                        rightClassName\n                    )}\n                    data-cy=\"navigation-right\"\n                >\n                    {right}\n                </div>\n                <div\n                    ref={bottomRef}\n                    className={classNames(\n                        Styles.heBottom,\n                        'd-if flex-grow-1 flex-basis-0 justify-content-center',\n                        Styles.center\n                    )}\n                    data-cy=\"navigation-items\"\n                >\n                    <div ref={navigationRef} className={classNames('d-if')}>\n                        {items?.map(item => (\n                            <HeaderNavigationItem\n                                {...item}\n                                minimized={minimized === MinimizedState.Minimized}\n                                main\n                                key={item.id}\n                            />\n                        ))}\n                        {!!itemsOverflow?.length && (\n                            <HeaderNavigationOverflow items={itemsOverflow} overflow={overflow} />\n                        )}\n                    </div>\n                </div>\n            </div>\n        </NavigationLegacyContext.Provider>\n    );\n};\n"],"names":["Icon","Popover","classNames","useCallback","useEffect","useRef","useState","NavigationLegacyContext","HeaderNavigationItem","Styles","useForceUpdate","setTick","tick","HeaderNavigationOverflow","items","overflow","isOpen","setIsOpen","open","trigger","name","size","className","onClick","color","data-cy","data-pendo","direction","width","portal","onClickOutside","wrapperClassName","popoverContentClassName","overflowPopover","div","navigationOverflow","map","item","key","id","minimized","main","MinimizedState","HeaderNavigation","children","itemsOverflow","left","leftClassName","rightClassName","minWidth","leftRef","rightRef","centerRef","navigationRef","forceUpdate","setMinimized","handleResize","window","addEventListener","removeEventListener","updateIsMinimized","current","clientWidth","Provider","value","header","calculating","style","ref","center","length","right","HeaderNavigationStacked","centerClassName","bottomRef","headerStacked","heTopLeft","heTopCenter","heTopRight","heBottom"],"mappings":"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"}