@servicetitan/navigation 12.0.2 → 12.0.3

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

@@ -41,7 +41,7 @@ export const LayoutHeaderDark = ({ className, isMobile, navigationMainItems, nav
                 onBurgerClick: onBurgerClick,
                 "data-cy": "header-navigation-top"
             }),
-            !isMobile && /*#__PURE__*/ _jsx(LayoutHeaderNav, {
+            !isMobile && !!(navigationMainItems === null || navigationMainItems === void 0 ? void 0 : navigationMainItems.length) && /*#__PURE__*/ _jsx(LayoutHeaderNav, {
                 className: Styles.headerStackedNav,
                 mainItems: navigationMainItems,
                 overflowItems: navigationOverflowItems

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/titan-layout/layout-header-dark.tsx"],"sourcesContent":["import { ButtonCompound, Icon, Menu, MenuProps } 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 { NavigationComponentProps } from './interface-internal';\nimport { useTitanLayoutContext } from './layout-context';\nimport { LayoutHeader, LayoutHeaderProps } from './layout-header';\nimport { InternalLayoutHeaderNavigationLink } from './layout-header-links-internal';\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    const { NavigationComponent } = useTitanLayoutContext();\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            const widthGap = 16 + (overflowItems?.length ? 32 : 0);\n            if (navigationRef.current.clientWidth + widthGap > 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                        <InternalLayoutHeaderNavigationLink\n                            {...item}\n                            label={isMinimized ? undefined : item.title}\n                            key={item.id}\n                            navigationComponent={NavigationComponent}\n                        />,\n                        isMinimized ? item.title : undefined,\n                        { key: item.id }\n                    )\n                )}\n            </div>\n            {!!overflowItems?.length && (\n                <LayoutHeaderNavOverflow\n                    items={overflowItems}\n                    navigationComponent={NavigationComponent}\n                />\n            )}\n        </div>\n    );\n};\n\nconst LayoutHeaderNavOverflowTrigger: MenuProps['trigger'] = props => (\n    <ButtonCompound\n        {...props}\n        className={Styles.headerNavigationOverflowTrigger}\n        data-cy=\"navigation-overflow-trigger\"\n    >\n        <Icon svg={SvgMoreVert} size=\"medium\" />\n    </ButtonCompound>\n);\n\nconst LayoutHeaderNavOverflow: FC<\n    {\n        items: NavigationItemData[];\n    } & NavigationComponentProps\n> = ({ items, navigationComponent }) => {\n    return (\n        <Menu trigger={LayoutHeaderNavOverflowTrigger} placement=\"bottom-end\">\n            <div data-cy=\"navigation-overflow-content\" className={Styles.headerNavigationOverflow}>\n                {items.map(item => (\n                    <InternalLayoutHeaderNavigationLink\n                        {...item}\n                        label={item.title}\n                        key={item.id}\n                        navigationComponent={navigationComponent}\n                        isOverflow\n                    />\n                ))}\n            </div>\n        </Menu>\n    );\n};\n"],"names":["ButtonCompound","Icon","Menu","SvgMoreVert","classNames","useCallback","useEffect","useRef","useState","useTitanLayoutContext","LayoutHeader","InternalLayoutHeaderNavigationLink","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","NavigationComponent","handleResize","window","addEventListener","removeEventListener","updateIsMinimized","current","widthGap","length","clientWidth","isMinimized","ref","headerNavigationWrapper","calculating","headerNavigation","map","item","label","title","key","id","navigationComponent","LayoutHeaderNavOverflow","items","LayoutHeaderNavOverflowTrigger","props","headerNavigationOverflowTrigger","svg","size","trigger","placement","headerNavigationOverflow","isOverflow"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/titan-layout/layout-header-dark.tsx"],"sourcesContent":["import { ButtonCompound, Icon, Menu, MenuProps } 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 { NavigationComponentProps } from './interface-internal';\nimport { useTitanLayoutContext } from './layout-context';\nimport { LayoutHeader, LayoutHeaderProps } from './layout-header';\nimport { InternalLayoutHeaderNavigationLink } from './layout-header-links-internal';\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 && !!navigationMainItems?.length && (\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    const { NavigationComponent } = useTitanLayoutContext();\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            const widthGap = 16 + (overflowItems?.length ? 32 : 0);\n            if (navigationRef.current.clientWidth + widthGap > 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                        <InternalLayoutHeaderNavigationLink\n                            {...item}\n                            label={isMinimized ? undefined : item.title}\n                            key={item.id}\n                            navigationComponent={NavigationComponent}\n                        />,\n                        isMinimized ? item.title : undefined,\n                        { key: item.id }\n                    )\n                )}\n            </div>\n            {!!overflowItems?.length && (\n                <LayoutHeaderNavOverflow\n                    items={overflowItems}\n                    navigationComponent={NavigationComponent}\n                />\n            )}\n        </div>\n    );\n};\n\nconst LayoutHeaderNavOverflowTrigger: MenuProps['trigger'] = props => (\n    <ButtonCompound\n        {...props}\n        className={Styles.headerNavigationOverflowTrigger}\n        data-cy=\"navigation-overflow-trigger\"\n    >\n        <Icon svg={SvgMoreVert} size=\"medium\" />\n    </ButtonCompound>\n);\n\nconst LayoutHeaderNavOverflow: FC<\n    {\n        items: NavigationItemData[];\n    } & NavigationComponentProps\n> = ({ items, navigationComponent }) => {\n    return (\n        <Menu trigger={LayoutHeaderNavOverflowTrigger} placement=\"bottom-end\">\n            <div data-cy=\"navigation-overflow-content\" className={Styles.headerNavigationOverflow}>\n                {items.map(item => (\n                    <InternalLayoutHeaderNavigationLink\n                        {...item}\n                        label={item.title}\n                        key={item.id}\n                        navigationComponent={navigationComponent}\n                        isOverflow\n                    />\n                ))}\n            </div>\n        </Menu>\n    );\n};\n"],"names":["ButtonCompound","Icon","Menu","SvgMoreVert","classNames","useCallback","useEffect","useRef","useState","useTitanLayoutContext","LayoutHeader","InternalLayoutHeaderNavigationLink","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","length","LayoutHeaderNav","headerStackedNav","mainItems","overflowItems","headerDesktopNav","undefined","containerRef","navigationRef","forceUpdate","minimized","setMinimized","NavigationComponent","handleResize","window","addEventListener","removeEventListener","updateIsMinimized","current","widthGap","clientWidth","isMinimized","ref","headerNavigationWrapper","calculating","headerNavigation","map","item","label","title","key","id","navigationComponent","LayoutHeaderNavOverflow","items","LayoutHeaderNavOverflowTrigger","props","headerNavigationOverflowTrigger","svg","size","trigger","placement","headerNavigationOverflow","isOverflow"],"mappings":"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"}

package/dist/components/titan-layout/layout-header.module.less

@@ -225,6 +225,11 @@
 }
 
 .header-dark.header-logo-custom {
+    &.header-desktop .logo-short-wrapper {
+        background-color: @color-white;
+        color: @c-light;
+    }
+
     .burger .navigation-link {
         color: inherit !important;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/navigation",
-    "version": "12.0.2",
+    "version": "12.0.3",
     "description": "Navigation components",
     "repository": {
         "type": "git",
@@ -42,5 +42,5 @@
         "less": true,
         "webpack": false
     },
-    "gitHead": "037d391733c6dd61d96503860e6090881cface0b"
+    "gitHead": "c4d3e8b44fbf7d1fc7849c475ddeb32547bcac8b"
 }

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

@@ -65,7 +65,7 @@ export const LayoutHeaderDark: FC<LayoutHeaderStackedProps> = ({
                 data-cy="header-navigation-top"
             />
 
-            {!isMobile && (
+            {!isMobile && !!navigationMainItems?.length && (
                 <LayoutHeaderNav
                     className={Styles.headerStackedNav}
                     mainItems={navigationMainItems}

package/src/components/titan-layout/layout-header.module.less

@@ -225,6 +225,11 @@
 }
 
 .header-dark.header-logo-custom {
+    &.header-desktop .logo-short-wrapper {
+        background-color: @color-white;
+        color: @c-light;
+    }
+
     .burger .navigation-link {
         color: inherit !important;
     }