@servicetitan/navigation 11.0.0 → 11.1.1

package/dist/components/titan-layout/layout-header-dark.js

@@ -0,0 +1,146 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { ButtonCompound, Icon, Menu } from '@servicetitan/anvil2';
+import SvgMoreVert from '@servicetitan/anvil2/assets/icons/material/round/more_vert.svg';
+import classNames from 'classnames';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { LayoutHeader } from './layout-header';
+import { LayoutHeaderNavigationLink } from './layout-header-links';
+import * as Styles from './layout-header.module.less';
+import { withTooltip } from './with-tooltip';
+function useForceUpdate() {
+    const [, setTick] = useState(0);
+    return useCallback(()=>{
+        setTick((tick)=>tick + 1);
+    }, []);
+}
+var MinimizedState = /*#__PURE__*/ function(MinimizedState) {
+    MinimizedState[MinimizedState["Calculating"] = 0] = "Calculating";
+    MinimizedState[MinimizedState["Minimized"] = 1] = "Minimized";
+    MinimizedState[MinimizedState["Full"] = 2] = "Full";
+    return MinimizedState;
+}(MinimizedState || {});
+export const LayoutHeaderDark = ({ className, isMobile, navigationMainItems, navigationOverflowItems, hasNotifications, onBurgerClick, logo, profile, right, rightText, rightClassName, center, centerClassName, ...rest })=>{
+    return center ? /*#__PURE__*/ _jsxs("div", {
+        className: classNames(Styles.headerStacked, className),
+        "data-cy": "header-navigation",
+        ...rest,
+        children: [
+            /*#__PURE__*/ _jsx(LayoutHeader, {
+                variant: "dark",
+                right: right,
+                rightText: rightText,
+                rightClassName: rightClassName,
+                center: center,
+                centerClassName: centerClassName,
+                isMobile: isMobile,
+                hasNotifications: hasNotifications,
+                logo: logo,
+                profile: profile,
+                onBurgerClick: onBurgerClick,
+                "data-cy": "header-navigation-top"
+            }),
+            !isMobile && /*#__PURE__*/ _jsx(LayoutHeaderNav, {
+                className: Styles.headerStackedNav,
+                mainItems: navigationMainItems,
+                overflowItems: navigationOverflowItems
+            })
+        ]
+    }) : /*#__PURE__*/ _jsx(LayoutHeader, {
+        variant: "dark",
+        className: classNames(className, !isMobile && Styles.headerDesktopNav),
+        right: right,
+        rightText: rightText,
+        rightClassName: rightClassName,
+        center: isMobile ? undefined : /*#__PURE__*/ _jsx(LayoutHeaderNav, {
+            mainItems: navigationMainItems,
+            overflowItems: navigationOverflowItems
+        }),
+        centerClassName: centerClassName,
+        isMobile: isMobile,
+        hasNotifications: hasNotifications,
+        logo: logo,
+        profile: profile,
+        onBurgerClick: onBurgerClick,
+        ...rest
+    });
+};
+const LayoutHeaderNav = ({ className, mainItems, overflowItems })=>{
+    const containerRef = useRef(null);
+    const navigationRef = useRef(null);
+    const forceUpdate = useForceUpdate();
+    const [minimized, setMinimized] = useState(0);
+    useEffect(()=>{
+        const handleResize = ()=>{
+            setMinimized(0);
+            forceUpdate();
+        };
+        window.addEventListener('resize', handleResize);
+        return ()=>window.removeEventListener('resize', handleResize);
+    }, [
+        forceUpdate
+    ]);
+    const updateIsMinimized = ()=>{
+        if (containerRef.current && navigationRef.current) {
+            if (navigationRef.current.clientWidth + 16 > containerRef.current.clientWidth) {
+                setMinimized(1);
+            } else if (minimized === 0) {
+                setMinimized(2);
+            }
+        }
+    };
+    useEffect(()=>{
+        updateIsMinimized();
+    });
+    useEffect(()=>{
+        setMinimized(0);
+        forceUpdate();
+    }, [
+        forceUpdate
+    ]);
+    const isMinimized = minimized === 1;
+    return /*#__PURE__*/ _jsxs("div", {
+        ref: containerRef,
+        className: classNames(Styles.headerNavigationWrapper, className, {
+            [Styles.calculating]: minimized === 0
+        }),
+        "data-cy": "navigation-items",
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                ref: navigationRef,
+                className: classNames(Styles.headerNavigation),
+                children: mainItems === null || mainItems === void 0 ? void 0 : mainItems.map((item)=>withTooltip(/*#__PURE__*/ _createElement(LayoutHeaderNavigationLink, {
+                        ...item,
+                        label: isMinimized ? undefined : item.title,
+                        key: item.id
+                    }), isMinimized ? item.title : undefined, {
+                        key: item.id
+                    }))
+            }),
+            !!(overflowItems === null || overflowItems === void 0 ? void 0 : overflowItems.length) && /*#__PURE__*/ _jsx(LayoutHeaderNavOverflow, {
+                items: overflowItems
+            })
+        ]
+    });
+};
+const LayoutHeaderNavOverflow = ({ items })=>{
+    return /*#__PURE__*/ _jsx(Menu, {
+        trigger: (props)=>/*#__PURE__*/ _jsx(ButtonCompound, {
+                ...props,
+                className: Styles.headerNavigationOverflowTrigger,
+                children: /*#__PURE__*/ _jsx(Icon, {
+                    svg: SvgMoreVert,
+                    size: "medium"
+                })
+            }),
+        contentClassName: Styles.headerNavigationOverflow,
+        placement: "bottom-end",
+        children: items.map((item)=>/*#__PURE__*/ _createElement(LayoutHeaderNavigationLink, {
+                ...item,
+                label: item.title,
+                key: item.id
+            }))
+    });
+};
+
+//# sourceMappingURL=layout-header-dark.js.map

package/dist/components/titan-layout/layout-header-dark.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/titan-layout/layout-header-dark.tsx"],"sourcesContent":["import { ButtonCompound, Icon, Menu } from '@servicetitan/anvil2';\nimport SvgMoreVert from '@servicetitan/anvil2/assets/icons/material/round/more_vert.svg';\nimport classNames from 'classnames';\nimport { FC, useCallback, useEffect, useRef, useState } from 'react';\nimport { NavigationItemData } from '../../utils/navigation';\nimport { LayoutHeader, LayoutHeaderProps } from './layout-header';\nimport { LayoutHeaderNavigationLink } from './layout-header-links';\nimport * as Styles from './layout-header.module.less';\nimport { withTooltip } from './with-tooltip';\n\nfunction useForceUpdate() {\n    const [, setTick] = useState(0);\n    return useCallback(() => {\n        setTick(tick => tick + 1);\n    }, []);\n}\n\nenum MinimizedState {\n    Calculating,\n    Minimized,\n    Full,\n}\n\ninterface LayoutHeaderStackedProps extends Omit<LayoutHeaderProps, 'variant'> {\n    navigationMainItems?: NavigationItemData[];\n    navigationOverflowItems?: NavigationItemData[];\n}\n\nexport const LayoutHeaderDark: FC<LayoutHeaderStackedProps> = ({\n    className,\n    isMobile,\n    navigationMainItems,\n    navigationOverflowItems,\n    hasNotifications,\n    onBurgerClick,\n    logo,\n    profile,\n    right,\n    rightText,\n    rightClassName,\n    center,\n    centerClassName,\n    ...rest\n}) => {\n    return center ? (\n        <div\n            className={classNames(Styles.headerStacked, className)}\n            data-cy=\"header-navigation\"\n            {...rest}\n        >\n            <LayoutHeader\n                variant=\"dark\"\n                right={right}\n                rightText={rightText}\n                rightClassName={rightClassName}\n                center={center}\n                centerClassName={centerClassName}\n                isMobile={isMobile}\n                hasNotifications={hasNotifications}\n                logo={logo}\n                profile={profile}\n                onBurgerClick={onBurgerClick}\n                data-cy=\"header-navigation-top\"\n            />\n\n            {!isMobile && (\n                <LayoutHeaderNav\n                    className={Styles.headerStackedNav}\n                    mainItems={navigationMainItems}\n                    overflowItems={navigationOverflowItems}\n                />\n            )}\n        </div>\n    ) : (\n        <LayoutHeader\n            variant=\"dark\"\n            className={classNames(className, !isMobile && Styles.headerDesktopNav)}\n            right={right}\n            rightText={rightText}\n            rightClassName={rightClassName}\n            center={\n                isMobile ? undefined : (\n                    <LayoutHeaderNav\n                        mainItems={navigationMainItems}\n                        overflowItems={navigationOverflowItems}\n                    />\n                )\n            }\n            centerClassName={centerClassName}\n            isMobile={isMobile}\n            hasNotifications={hasNotifications}\n            logo={logo}\n            profile={profile}\n            onBurgerClick={onBurgerClick}\n            {...rest}\n        />\n    );\n};\n\ninterface LayoutHeaderNavProps {\n    className?: string;\n    mainItems?: NavigationItemData[];\n    overflowItems?: NavigationItemData[];\n}\nconst LayoutHeaderNav: FC<LayoutHeaderNavProps> = ({ className, mainItems, overflowItems }) => {\n    const containerRef = 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    const updateIsMinimized = () => {\n        if (containerRef.current && navigationRef.current) {\n            if (navigationRef.current.clientWidth + 16 > containerRef.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    useEffect(() => {\n        setMinimized(MinimizedState.Calculating);\n        forceUpdate();\n    }, [forceUpdate]);\n\n    const isMinimized = minimized === MinimizedState.Minimized;\n\n    return (\n        <div\n            ref={containerRef}\n            className={classNames(Styles.headerNavigationWrapper, className, {\n                [Styles.calculating]: minimized === MinimizedState.Calculating,\n            })}\n            data-cy=\"navigation-items\"\n        >\n            <div ref={navigationRef} className={classNames(Styles.headerNavigation)}>\n                {mainItems?.map(item =>\n                    withTooltip(\n                        <LayoutHeaderNavigationLink\n                            {...item}\n                            label={isMinimized ? undefined : item.title}\n                            key={item.id}\n                        />,\n                        isMinimized ? item.title : undefined,\n                        { key: item.id }\n                    )\n                )}\n            </div>\n            {!!overflowItems?.length && <LayoutHeaderNavOverflow items={overflowItems} />}\n        </div>\n    );\n};\n\nconst LayoutHeaderNavOverflow: FC<{\n    items: NavigationItemData[];\n}> = ({ items }) => {\n    return (\n        <Menu\n            trigger={props => (\n                <ButtonCompound {...props} className={Styles.headerNavigationOverflowTrigger}>\n                    <Icon svg={SvgMoreVert} size=\"medium\" />\n                </ButtonCompound>\n            )}\n            contentClassName={Styles.headerNavigationOverflow}\n            placement=\"bottom-end\"\n        >\n            {items.map(item => (\n                <LayoutHeaderNavigationLink {...item} label={item.title} key={item.id} />\n            ))}\n        </Menu>\n    );\n};\n"],"names":["ButtonCompound","Icon","Menu","SvgMoreVert","classNames","useCallback","useEffect","useRef","useState","LayoutHeader","LayoutHeaderNavigationLink","Styles","withTooltip","useForceUpdate","setTick","tick","MinimizedState","LayoutHeaderDark","className","isMobile","navigationMainItems","navigationOverflowItems","hasNotifications","onBurgerClick","logo","profile","right","rightText","rightClassName","center","centerClassName","rest","div","headerStacked","data-cy","variant","LayoutHeaderNav","headerStackedNav","mainItems","overflowItems","headerDesktopNav","undefined","containerRef","navigationRef","forceUpdate","minimized","setMinimized","handleResize","window","addEventListener","removeEventListener","updateIsMinimized","current","clientWidth","isMinimized","ref","headerNavigationWrapper","calculating","headerNavigation","map","item","label","title","key","id","length","LayoutHeaderNavOverflow","items","trigger","props","headerNavigationOverflowTrigger","svg","size","contentClassName","headerNavigationOverflow","placement"],"mappings":"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"}

package/dist/components/titan-layout/layout-header-links.js

@@ -1,5 +1,5 @@
-import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
 import { Icon } from '@servicetitan/anvil2';
 import classNames from 'classnames';
 import { Fragment } from 'react';
@@ -9,24 +9,70 @@ import { CounterTag } from '../counter-tag';
 import { withTooltip } from '../header-navigation/with-tooltip';
 import { useTitanLayoutContext } from './layout-context';
 import * as Styles from './layout-header.module.less';
-/** Content for navigation items */
-const HeaderNavigationItemContent = ({ counterClassName, icon, iconActive, label, labelClassName, tag }) => {
-    return (_jsxs(Fragment, { children: [!!icon && _jsx(Icon, { svg: icon, className: Styles.navigationIcon }), !!iconActive && (_jsx(Icon, { svg: iconActive, className: classNames(Styles.navigationIcon, Styles.navigationIconActive) })), !!label && (_jsx("span", { className: classNames(Styles.navigationItemLabel, labelClassName), children: label })), !!tag && (_jsx(CounterTag, { data: tag, className: classNames(Styles.navigationItemCounter, counterClassName), longClassName: Styles.navigationItemCounterLong }))] }));
+/** Content for navigation items */ const HeaderNavigationItemContent = ({ counterClassName, icon, iconActive, label, labelClassName, tag })=>{
+    return /*#__PURE__*/ _jsxs(Fragment, {
+        children: [
+            !!icon && /*#__PURE__*/ _jsx(Icon, {
+                svg: icon,
+                className: Styles.navigationIcon
+            }),
+            !!iconActive && /*#__PURE__*/ _jsx(Icon, {
+                svg: iconActive,
+                className: classNames(Styles.navigationIcon, Styles.navigationIconActive)
+            }),
+            !!label && /*#__PURE__*/ _jsx("span", {
+                className: classNames(Styles.navigationItemLabel, labelClassName),
+                children: label
+            }),
+            !!tag && /*#__PURE__*/ _jsx(CounterTag, {
+                data: tag,
+                className: classNames(Styles.navigationItemCounter, counterClassName),
+                longClassName: Styles.navigationItemCounterLong
+            })
+        ]
+    });
 };
-/** Navigation extra item with link */
-export const LayoutHeaderNavigationLink = ({ id, to, hint, tooltip, className, counter, icon, iconActive, iconClassName, iconComponent, iconName, isActive, label, labelClassName, tag, target, ...rest }) => {
+/** Navigation extra item with link */ export const LayoutHeaderNavigationLink = ({ id, to, hint, tooltip, className, counter, icon, iconActive, iconClassName, iconComponent, iconName, isActive, label, labelClassName, tag, target, title, ...rest })=>{
     const { NavigationComponent } = useTitanLayoutContext();
-    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, className, {
+    return withTooltip(/*#__PURE__*/ _createElement(NavigationComponent, {
+        "data-cy": `navigation-link-${id}`,
+        "data-pendo": `navigation-link-${id}`,
+        ...rest,
+        key: id,
+        to: to,
+        className: classNames(Styles.navigationLink, className, {
             [Styles.navigationItemActive]: isActive === true,
-            [Styles.navigationItemIconState]: !!icon && !!iconActive,
-        }), isActive: typeof isActive === 'function' ? isActive : undefined, activeClassName: Styles.navigationItemActive, target: target },
-        _jsx(HeaderNavigationItemContent, { tag: getCounterTag(counter, tag), icon: icon, iconActive: iconActive, label: label, labelClassName: labelClassName })), tooltip);
+            [Styles.navigationItemIconState]: !!icon && !!iconActive
+        }),
+        isActive: typeof isActive === 'function' ? isActive : undefined,
+        activeClassName: Styles.navigationItemActive,
+        target: target
+    }, /*#__PURE__*/ _jsx(HeaderNavigationItemContent, {
+        tag: getCounterTag(counter, tag),
+        icon: icon,
+        iconActive: iconActive,
+        label: label,
+        labelClassName: labelClassName
+    })), tooltip);
 };
-/** Navigation extra item with icon button */
-export const LayoutHeaderNavigationTrigger = ({ id, className, counter, icon, iconActive, iconName, isActive, hint, label, labelClassName, tag, tooltip, title, titleClassName, ...rest }) => {
-    return withTooltip(_jsx("div", { "data-cy": `navigation-trigger-${id}`, "data-pendo": `navigation-trigger-${id}`, ...rest, title: hint, className: classNames(Styles.navigationLink, {
+/** Navigation extra item with icon button */ export const LayoutHeaderNavigationTrigger = ({ id, className, counter, icon, iconActive, iconName, isActive, hint, label, labelClassName, tag, tooltip, title, titleClassName, ...rest })=>{
+    return withTooltip(/*#__PURE__*/ _jsx("div", {
+        "data-cy": `navigation-trigger-${id}`,
+        "data-pendo": `navigation-trigger-${id}`,
+        ...rest,
+        title: hint,
+        className: classNames(Styles.navigationLink, {
             [Styles.navigationItemActive]: isActive === true,
-            [Styles.navigationItemIconState]: !!icon && !!iconActive,
-        }, 'cursor-pointer', className), children: _jsx(HeaderNavigationItemContent, { tag: getCounterTag(counter, tag), icon: icon, iconActive: iconActive, label: label, labelClassName: labelClassName }) }), tooltip);
+            [Styles.navigationItemIconState]: !!icon && !!iconActive
+        }, 'cursor-pointer', className),
+        children: /*#__PURE__*/ _jsx(HeaderNavigationItemContent, {
+            tag: getCounterTag(counter, tag),
+            icon: icon,
+            iconActive: iconActive,
+            label: label,
+            labelClassName: labelClassName
+        })
+    }), tooltip);
 };
+
 //# sourceMappingURL=layout-header-links.js.map

package/dist/components/titan-layout/layout-header-links.js.map

@@ -1 +1 @@
-{"version":3,"file":"layout-header-links.js","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-header-links.tsx"],"names":[],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/titan-layout/layout-header-links.tsx"],"sourcesContent":["import { Icon, IconProps } from '@servicetitan/anvil2';\nimport classNames from 'classnames';\nimport { FC, Fragment } from 'react';\nimport {\n    HeaderNavigationLinkProps,\n    HeaderNavigationTriggerProps,\n} from '../../utils/navigation-legacy';\nimport { getCounterTag } from '../../utils/side-nav';\nimport { CounterTag, CounterTagProps } from '../counter-tag';\n// use v1 tooltips due to bug with v2 in monolith\nimport { withTooltip } from '../header-navigation/with-tooltip';\nimport { useTitanLayoutContext } from './layout-context';\nimport * as Styles from './layout-header.module.less';\n\n/** Content for navigation items */\nconst HeaderNavigationItemContent: FC<{\n    tag?: CounterTagProps;\n    counterClassName?: string;\n    icon: IconProps['svg'] | undefined;\n    iconActive?: IconProps['svg'];\n    label?: string;\n    labelClassName?: string;\n}> = ({ counterClassName, icon, iconActive, label, labelClassName, tag }) => {\n    return (\n        <Fragment>\n            {!!icon && <Icon svg={icon} className={Styles.navigationIcon} />}\n            {!!iconActive && (\n                <Icon\n                    svg={iconActive}\n                    className={classNames(Styles.navigationIcon, Styles.navigationIconActive)}\n                />\n            )}\n\n            {!!label && (\n                <span className={classNames(Styles.navigationItemLabel, labelClassName)}>\n                    {label}\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\n/** Navigation extra item with link */\nexport const LayoutHeaderNavigationLink: FC<HeaderNavigationLinkProps> = ({\n    id,\n    to,\n    hint,\n    tooltip,\n    className,\n    counter,\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 } = useTitanLayoutContext();\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            className={classNames(Styles.navigationLink, className, {\n                [Styles.navigationItemActive]: isActive === true,\n                [Styles.navigationItemIconState]: !!icon && !!iconActive,\n            })}\n            isActive={typeof isActive === 'function' ? isActive : undefined}\n            activeClassName={Styles.navigationItemActive}\n            target={target}\n        >\n            <HeaderNavigationItemContent\n                tag={getCounterTag(counter, tag)}\n                icon={icon}\n                iconActive={iconActive}\n                label={label}\n                labelClassName={labelClassName}\n            />\n        </NavigationComponent>,\n        tooltip\n    );\n};\n\n/** Navigation extra item with icon button */\nexport const LayoutHeaderNavigationTrigger: FC<HeaderNavigationTriggerProps> = ({\n    id,\n    className,\n    counter,\n    icon,\n    iconActive,\n    iconName,\n    isActive,\n    hint,\n    label,\n    labelClassName,\n    tag,\n    tooltip,\n    title,\n    titleClassName,\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.navigationLink,\n                {\n                    [Styles.navigationItemActive]: isActive === true,\n                    [Styles.navigationItemIconState]: !!icon && !!iconActive,\n                },\n                'cursor-pointer',\n                className\n            )}\n        >\n            <HeaderNavigationItemContent\n                tag={getCounterTag(counter, tag)}\n                icon={icon}\n                iconActive={iconActive}\n                label={label}\n                labelClassName={labelClassName}\n            />\n        </div>,\n        tooltip\n    );\n};\n"],"names":["Icon","classNames","Fragment","getCounterTag","CounterTag","withTooltip","useTitanLayoutContext","Styles","HeaderNavigationItemContent","counterClassName","icon","iconActive","label","labelClassName","tag","svg","className","navigationIcon","navigationIconActive","span","navigationItemLabel","data","navigationItemCounter","longClassName","navigationItemCounterLong","LayoutHeaderNavigationLink","id","to","hint","tooltip","counter","iconClassName","iconComponent","iconName","isActive","target","title","rest","NavigationComponent","data-cy","data-pendo","key","navigationLink","navigationItemActive","navigationItemIconState","undefined","activeClassName","LayoutHeaderNavigationTrigger","titleClassName","div"],"mappings":"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"}

package/dist/components/titan-layout/layout-header.d.ts

@@ -1,10 +1,5 @@
 import { ComponentPropsWithoutRef, FC, ReactElement, ReactNode } from 'react';
 import { TitanLayoutLogoProps } from './layout-logo';
-export interface TitanLayoutHeaderLogoProps {
-    title?: true | string;
-    mantleFill?: string;
-    to?: string;
-}
 export type LayoutHeaderProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'> & {
     right?: ReactNode;
     rightText?: string;
@@ -12,9 +7,10 @@ export type LayoutHeaderProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'
     id?: string;
     center?: ReactElement;
     centerClassName?: string;
-    logo: ReactElement<TitanLayoutLogoProps>;
+    logo?: TitanLayoutLogoProps;
     profile?: ReactElement;
     isMobile: boolean;
+    variant: 'light' | 'dark';
     hasNotifications: boolean;
     onBurgerClick?: (e: MouseEvent) => void;
 };

package/dist/components/titan-layout/layout-header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"layout-header.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-header.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,wBAAwB,EAAE,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAI9E,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAErD,MAAM,WAAW,0BAA0B;IACvC,KAAK,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IAChF,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,IAAI,EAAE,YAAY,CAAC,oBAAoB,CAAC,CAAC;IACzC,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB,QAAQ,EAAE,OAAO,CAAC;IAClB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;CAC3C,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAgE9C,CAAC"}
+{"version":3,"file":"layout-header.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-header.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,wBAAwB,EAAE,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAI9E,OAAO,EAAc,oBAAoB,EAAgB,MAAM,eAAe,CAAC;AAE/E,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IAChF,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAC5B,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,GAAG,MAAM,CAAC;IAC1B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;CAC3C,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAkE9C,CAAC"}

package/dist/components/titan-layout/layout-header.js

@@ -4,7 +4,51 @@ import classNames from 'classnames';
 import { LayoutPlacementContext } from './layout-context';
 import { LayoutHeaderNavigationTrigger } from './layout-header-links';
 import * as Styles from './layout-header.module.less';
-export const LayoutHeader = ({ className, right, rightText, rightClassName, center, centerClassName, isMobile, hasNotifications, logo, profile, onBurgerClick, ...rest }) => {
-    return (_jsx(LayoutPlacementContext.Provider, { value: "top", children: _jsxs("div", { className: classNames(Styles.header, isMobile ? Styles.headerMobile : Styles.headerDesktop, className), ...rest, "data-cy": "header-navigation", children: [_jsxs("div", { className: classNames(Styles.heTopLeft), "data-cy": "navigation-left", children: [isMobile && (_jsx(LayoutHeaderNavigationTrigger, { id: "burger", title: "", icon: SvgBurgerMenu, iconActive: SvgBurgerMenu, className: "m-r-1", onClick: onBurgerClick, tag: { value: hasNotifications } })), logo] }), _jsx("div", { className: classNames(Styles.heTopCenter, 'd-f align-items-center justify-content-center', centerClassName), "data-cy": "navigation-center", children: center }), _jsxs("div", { className: classNames('d-f flex-row justify-content-end align-items-center', Styles.heTopRight, rightClassName), "data-cy": "navigation-right", children: [!!rightText && _jsx("div", { className: Styles.heTopRightText, children: rightText }), right, profile] })] }) }));
+import { LayoutLogo, isLogoCustom } from './layout-logo';
+export const LayoutHeader = ({ className, right, rightText, rightClassName, center, centerClassName, isMobile, hasNotifications, logo, profile, variant, onBurgerClick, ...rest })=>{
+    return /*#__PURE__*/ _jsx(LayoutPlacementContext.Provider, {
+        value: "top",
+        children: /*#__PURE__*/ _jsxs("div", {
+            className: classNames(Styles.header, variant === 'light' ? Styles.headerLight : Styles.headerDark, isMobile ? Styles.headerMobile : Styles.headerDesktop, isLogoCustom(logo, isMobile) && Styles.headerLogoCustom, className),
+            "data-cy": "header-navigation",
+            ...rest,
+            children: [
+                isMobile && /*#__PURE__*/ _jsx("div", {
+                    className: Styles.burger,
+                    children: /*#__PURE__*/ _jsx(LayoutHeaderNavigationTrigger, {
+                        id: "burger",
+                        title: "",
+                        icon: SvgBurgerMenu,
+                        iconActive: undefined,
+                        onClick: onBurgerClick,
+                        tag: {
+                            value: hasNotifications
+                        }
+                    })
+                }),
+                /*#__PURE__*/ _jsx(LayoutLogo, {
+                    ...logo
+                }),
+                /*#__PURE__*/ _jsx("div", {
+                    className: classNames(Styles.heTopCenter, 'd-f align-items-center justify-content-center', centerClassName),
+                    "data-cy": "navigation-center",
+                    children: center
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: classNames('d-f flex-row justify-content-end align-items-center', Styles.heTopRight, rightClassName),
+                    "data-cy": "navigation-right",
+                    children: [
+                        !!rightText && /*#__PURE__*/ _jsx("div", {
+                            className: Styles.heTopRightText,
+                            children: rightText
+                        }),
+                        right,
+                        profile
+                    ]
+                })
+            ]
+        })
+    });
 };
+
 //# sourceMappingURL=layout-header.js.map

package/dist/components/titan-layout/layout-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"layout-header.js","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-header.tsx"],"names":[],"mappings":";AAAA,OAAO,aAAa,MAAM,2DAA2D,CAAC;AACtF,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EAAE,6BAA6B,EAAE,MAAM,uBAAuB,CAAC;AACtE,OAAO,KAAK,MAAM,MAAM,6BAA6B,CAAC;AA2BtD,MAAM,CAAC,MAAM,YAAY,GAA0B,CAAC,EAChD,SAAS,EACT,KAAK,EACL,SAAS,EACT,cAAc,EACd,MAAM,EACN,eAAe,EACf,QAAQ,EACR,gBAAgB,EAChB,IAAI,EACJ,OAAO,EACP,aAAa,EACb,GAAG,IAAI,EACV,EAAE,EAAE;IACD,OAAO,CACH,KAAC,sBAAsB,CAAC,QAAQ,IAAC,KAAK,EAAC,KAAK,YACxC,eACI,SAAS,EAAE,UAAU,CACjB,MAAM,CAAC,MAAM,EACb,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,aAAa,EACrD,SAAS,CACZ,KACG,IAAI,aACA,mBAAmB,aAE3B,eAAK,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,SAAS,CAAC,aAAU,iBAAiB,aAClE,QAAQ,IAAI,CACT,KAAC,6BAA6B,IAC1B,EAAE,EAAC,QAAQ,EACX,KAAK,EAAC,EAAE,EACR,IAAI,EAAE,aAAa,EACnB,UAAU,EAAE,aAAa,EACzB,SAAS,EAAC,OAAO,EACjB,OAAO,EAAE,aAAa,EACtB,GAAG,EAAE,EAAE,KAAK,EAAE,gBAAgB,EAAE,GAClC,CACL,EACA,IAAI,IACH,EACN,cACI,SAAS,EAAE,UAAU,CACjB,MAAM,CAAC,WAAW,EAClB,+CAA+C,EAC/C,eAAe,CAClB,aACO,mBAAmB,YAE1B,MAAM,GACL,EACN,eACI,SAAS,EAAE,UAAU,CACjB,qDAAqD,EACrD,MAAM,CAAC,UAAU,EACjB,cAAc,CACjB,aACO,kBAAkB,aAEzB,CAAC,CAAC,SAAS,IAAI,cAAK,SAAS,EAAE,MAAM,CAAC,cAAc,YAAG,SAAS,GAAO,EACvE,KAAK,EACL,OAAO,IACN,IACJ,GACwB,CACrC,CAAC;AACN,CAAC,CAAC"}
+{"version":3,"sources":["../../../src/components/titan-layout/layout-header.tsx"],"sourcesContent":["import SvgBurgerMenu from '@servicetitan/anvil2/assets/icons/material/round/menu.svg';\nimport classNames from 'classnames';\nimport { ComponentPropsWithoutRef, FC, ReactElement, ReactNode } from 'react';\nimport { LayoutPlacementContext } from './layout-context';\nimport { LayoutHeaderNavigationTrigger } from './layout-header-links';\nimport * as Styles from './layout-header.module.less';\nimport { LayoutLogo, TitanLayoutLogoProps, isLogoCustom } from './layout-logo';\n\nexport type LayoutHeaderProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'> & {\n    right?: ReactNode;\n    rightText?: string;\n    rightClassName?: string;\n\n    id?: string;\n\n    center?: ReactElement;\n    centerClassName?: string;\n\n    logo?: TitanLayoutLogoProps;\n    profile?: ReactElement;\n\n    isMobile: boolean;\n    variant: 'light' | 'dark';\n    hasNotifications: boolean;\n    onBurgerClick?: (e: MouseEvent) => void;\n};\n\nexport const LayoutHeader: FC<LayoutHeaderProps> = ({\n    className,\n    right,\n    rightText,\n    rightClassName,\n    center,\n    centerClassName,\n    isMobile,\n    hasNotifications,\n    logo,\n    profile,\n    variant,\n    onBurgerClick,\n    ...rest\n}) => {\n    return (\n        <LayoutPlacementContext.Provider value=\"top\">\n            <div\n                className={classNames(\n                    Styles.header,\n                    variant === 'light' ? Styles.headerLight : Styles.headerDark,\n                    isMobile ? Styles.headerMobile : Styles.headerDesktop,\n                    isLogoCustom(logo, isMobile) && Styles.headerLogoCustom,\n                    className\n                )}\n                data-cy=\"header-navigation\"\n                {...rest}\n            >\n                {isMobile && (\n                    <div className={Styles.burger}>\n                        <LayoutHeaderNavigationTrigger\n                            id=\"burger\"\n                            title=\"\"\n                            icon={SvgBurgerMenu}\n                            iconActive={undefined}\n                            onClick={onBurgerClick}\n                            tag={{ value: hasNotifications }}\n                        />\n                    </div>\n                )}\n                <LayoutLogo {...logo} />\n                <div\n                    className={classNames(\n                        Styles.heTopCenter,\n                        'd-f align-items-center justify-content-center',\n                        centerClassName\n                    )}\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                    {!!rightText && <div className={Styles.heTopRightText}>{rightText}</div>}\n                    {right}\n                    {profile}\n                </div>\n            </div>\n        </LayoutPlacementContext.Provider>\n    );\n};\n"],"names":["SvgBurgerMenu","classNames","LayoutPlacementContext","LayoutHeaderNavigationTrigger","Styles","LayoutLogo","isLogoCustom","LayoutHeader","className","right","rightText","rightClassName","center","centerClassName","isMobile","hasNotifications","logo","profile","variant","onBurgerClick","rest","Provider","value","div","header","headerLight","headerDark","headerMobile","headerDesktop","headerLogoCustom","data-cy","burger","id","title","icon","iconActive","undefined","onClick","tag","heTopCenter","heTopRight","heTopRightText"],"mappings":";AAAA,OAAOA,mBAAmB,4DAA4D;AACtF,OAAOC,gBAAgB,aAAa;AAEpC,SAASC,sBAAsB,QAAQ,mBAAmB;AAC1D,SAASC,6BAA6B,QAAQ,wBAAwB;AACtE,YAAYC,YAAY,8BAA8B;AACtD,SAASC,UAAU,EAAwBC,YAAY,QAAQ,gBAAgB;AAqB/E,OAAO,MAAMC,eAAsC,CAAC,EAChDC,SAAS,EACTC,KAAK,EACLC,SAAS,EACTC,cAAc,EACdC,MAAM,EACNC,eAAe,EACfC,QAAQ,EACRC,gBAAgB,EAChBC,IAAI,EACJC,OAAO,EACPC,OAAO,EACPC,aAAa,EACb,GAAGC,MACN;IACG,qBACI,KAAClB,uBAAuBmB,QAAQ;QAACC,OAAM;kBACnC,cAAA,MAACC;YACGf,WAAWP,WACPG,OAAOoB,MAAM,EACbN,YAAY,UAAUd,OAAOqB,WAAW,GAAGrB,OAAOsB,UAAU,EAC5DZ,WAAWV,OAAOuB,YAAY,GAAGvB,OAAOwB,aAAa,EACrDtB,aAAaU,MAAMF,aAAaV,OAAOyB,gBAAgB,EACvDrB;YAEJsB,WAAQ;YACP,GAAGV,IAAI;;gBAEPN,0BACG,KAACS;oBAAIf,WAAWJ,OAAO2B,MAAM;8BACzB,cAAA,KAAC5B;wBACG6B,IAAG;wBACHC,OAAM;wBACNC,MAAMlC;wBACNmC,YAAYC;wBACZC,SAASlB;wBACTmB,KAAK;4BAAEhB,OAAOP;wBAAiB;;;8BAI3C,KAACV;oBAAY,GAAGW,IAAI;;8BACpB,KAACO;oBACGf,WAAWP,WACPG,OAAOmC,WAAW,EAClB,iDACA1B;oBAEJiB,WAAQ;8BAEPlB;;8BAEL,MAACW;oBACGf,WAAWP,WACP,uDACAG,OAAOoC,UAAU,EACjB7B;oBAEJmB,WAAQ;;wBAEP,CAAC,CAACpB,2BAAa,KAACa;4BAAIf,WAAWJ,OAAOqC,cAAc;sCAAG/B;;wBACvDD;wBACAQ;;;;;;AAKrB,EAAE"}