@servicetitan/navigation 12.0.3 → 13.0.0-canary.256.44cf055.0

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

@@ -1,59 +0,0 @@
-import { PopoverPropsStrict } from '@servicetitan/design-system';
-import { FC, ReactElement, ReactNode } from 'react';
-import { HeaderNavigationItemData } from '../../utils/navigation-legacy';
-export interface HeaderNavigationOverflowProps {
-    direction: PopoverPropsStrict['direction'];
-    width: PopoverPropsStrict['width'];
-    portal?: boolean;
-}
-export interface HeaderNavigationProps {
-    /** extra navigation */
-    children?: ReactNode;
-    /** container class name */
-    className?: string;
-    /** extra navigation container class name */
-    rightClassName?: string;
-    /** container id */
-    id?: string;
-    /** left content (usually used for logo) */
-    left?: ReactElement;
-    /** left container class name */
-    leftClassName?: string;
-    /** minimal width for navigation bar */
-    minWidth?: number;
-    /** main navigation items */
-    items?: HeaderNavigationItemData[];
-    /** main navigation overflow items */
-    itemsOverflow?: HeaderNavigationItemData[];
-    /** props for main items overflow component */
-    overflow?: HeaderNavigationOverflowProps;
-}
-export declare const HeaderNavigation: FC<HeaderNavigationProps>;
-export interface HeaderNavigationStackedProps {
-    /** container class name */
-    className?: string;
-    /** extra navigation */
-    right?: ReactNode;
-    /** extra navigation container class name */
-    rightClassName?: string;
-    /** container id */
-    id?: string;
-    /** left content (usually used for logo) */
-    left?: ReactElement;
-    /** left container class name */
-    leftClassName?: string;
-    /** center content */
-    center?: ReactElement;
-    /** center container class name */
-    centerClassName?: string;
-    /** minimal width for navigation bar */
-    minWidth?: number;
-    /** main navigation items */
-    items?: HeaderNavigationItemData[];
-    /** main navigation overflow items */
-    itemsOverflow?: HeaderNavigationItemData[];
-    /** props for main items overflow component */
-    overflow?: HeaderNavigationOverflowProps;
-}
-export declare const HeaderNavigationStacked: FC<HeaderNavigationStackedProps>;
-//# sourceMappingURL=header-navigation.d.ts.map

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

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

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

@@ -1,228 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createElement as _createElement } from "react";
-import { Icon, Popover } from '@servicetitan/design-system';
-import classNames from 'classnames';
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { NavigationLegacyContext } from '../../utils/navigation-context';
-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);
-    }, []);
-}
-const HeaderNavigationOverflow = ({ items, overflow })=>{
-    const [isOpen, setIsOpen] = useState(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 = /*#__PURE__*/ function(MinimizedState) {
-    MinimizedState[MinimizedState["Calculating"] = 0] = "Calculating";
-    MinimizedState[MinimizedState["Minimized"] = 1] = "Minimized";
-    MinimizedState[MinimizedState["Full"] = 2] = "Full";
-    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(0);
-    useEffect(()=>{
-        const handleResize = ()=>{
-            setMinimized(0);
-            forceUpdate();
-        };
-        window.addEventListener('resize', handleResize);
-        return ()=>window.removeEventListener('resize', handleResize);
-    }, [
-        forceUpdate
-    ]);
-    useEffect(()=>{
-        setMinimized(0);
-        forceUpdate();
-    }, [
-        items,
-        itemsOverflow,
-        forceUpdate
-    ]);
-    const updateIsMinimized = ()=>{
-        if (centerRef.current && navigationRef.current) {
-            if (navigationRef.current.clientWidth > centerRef.current.clientWidth) {
-                setMinimized(1);
-            } else if (minimized === 0) {
-                setMinimized(2);
-            }
-        }
-    };
-    useEffect(()=>{
-        updateIsMinimized();
-    });
-    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 })=>{
-    const bottomRef = 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
-    ]);
-    useEffect(()=>{
-        setMinimized(0);
-        forceUpdate();
-    }, [
-        items,
-        itemsOverflow,
-        forceUpdate
-    ]);
-    const updateIsMinimized = ()=>{
-        if (bottomRef.current && navigationRef.current) {
-            if (navigationRef.current.clientWidth + 16 > bottomRef.current.clientWidth) {
-                setMinimized(1);
-            } else if (minimized === 0) {
-                setMinimized(2);
-            }
-        }
-    };
-    useEffect(()=>{
-        updateIsMinimized();
-    });
-    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 +0,0 @@
-{"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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"}

package/dist/components/header-navigation/header-navigation.module.less

@@ -1,260 +0,0 @@
-/* stylelint-disable no-descending-specificity */
-@import (reference) '@servicetitan/tokens/core/tokens.less';
-
-.header {
-    height: 56px;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-
-    background-color: @color-neutral-300;
-    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
-
-    .right > * {
-        color: @color-white;
-    }
-
-    .right {
-        .navigation-icon {
-            height: 24px;
-            width: 24px;
-            font-size: 24px;
-        }
-    }
-
-    .center {
-        min-width: 0;
-        overflow-x: hidden;
-        overflow-y: hidden;
-
-        .navigation-icon {
-            height: 20px;
-            width: 20px;
-            font-size: @typescale-4;
-        }
-    }
-
-    &.calculating {
-        .center {
-            opacity: 0;
-        }
-    }
-
-    :global(.profile-dropdown-image) {
-        height: 32px;
-        width: 32px;
-    }
-
-    :global(.profile-dropdown-trigger) {
-        height: 40px;
-        font-size: 24px;
-    }
-
-    .navigation-item-counter {
-        font-size: @typescale-0 !important;
-    }
-
-    .navigation-item-main .navigation-item-counter {
-        top: 8px;
-        right: -4px;
-
-        &.navigation-item-counter-long {
-            right: -8px;
-        }
-    }
-
-    .navigation-link {
-        padding: @spacing-2 @spacing-1;
-        font-size: 24px;
-
-        .navigation-item-counter {
-            top: 8px;
-            right: -4px;
-        }
-    }
-
-    .navigation-item-main {
-        // styles specific to main nav links
-        padding: 18px 10px;
-    }
-
-    .navigation-item {
-        &.navigation-item-active:not(.navigation-item-overflow) {
-            color: @color-blue-200 !important;
-        }
-        &:hover:not(.navigation-item-active):not(.navigation-item-overflow) {
-            opacity: 0.7;
-        }
-    }
-}
-
-.overflow-popover {
-    padding: @spacing-1 @spacing-0 !important;
-
-    .navigation-overflow {
-        display: flex;
-        flex-direction: column;
-    }
-}
-
-.header-stacked {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    grid-template-rows: 44px 36px;
-
-    background-color: @color-neutral-500;
-
-    & > * {
-        overflow-y: hidden;
-    }
-
-    .he-top-left {
-        grid-column: span 1;
-    }
-
-    .he-top-center {
-        grid-column: span 1;
-    }
-
-    .he-top-right {
-        grid-column: span 1;
-
-        .navigation-icon {
-            height: 20px;
-            width: 20px;
-            font-size: @typescale-4;
-        }
-
-        & > * {
-            color: @color-white;
-        }
-    }
-
-    .he-bottom {
-        grid-column: span 3;
-        border-top: 1px solid @color-neutral-200;
-
-        .navigation-icon {
-            height: 20px;
-            width: 20px;
-            font-size: @typescale-4;
-        }
-    }
-
-    &.calculating {
-        .he-bottom {
-            opacity: 0;
-        }
-    }
-
-    :global(.profile-dropdown-image) {
-        height: 24px;
-        width: 24px;
-    }
-
-    :global(.profile-dropdown-trigger) {
-        height: 30px;
-        font-size: @typescale-4;
-    }
-
-    .navigation-item-counter {
-        font-size: 8px !important;
-    }
-
-    .navigation-item-main .navigation-item-counter {
-        top: 4px;
-        right: -4px;
-
-        &.navigation-item-counter-long {
-            right: -8px;
-        }
-    }
-
-    .navigation-link {
-        padding: 12px @spacing-1;
-        font-size: @typescale-4;
-
-        .navigation-item-counter {
-            top: 8px;
-            right: 0;
-        }
-    }
-
-    .navigation-item-main {
-        // styles specific to main nav links
-        padding: 7px 10px;
-    }
-
-    .navigation-item {
-        &.navigation-item-active:not(.navigation-item-overflow) {
-            color: @color-blue-200 !important;
-        }
-        &:hover:not(.navigation-item-active):not(.navigation-item-overflow) {
-            opacity: 0.7;
-        }
-    }
-}
-
-.navigation-icon {
-    display: inline-block;
-    color: inherit;
-
-    & > svg {
-        height: 1em;
-        width: 1em;
-        font-size: 1em;
-    }
-}
-
-.navigation-item {
-    // styles specific to main nav links and extra nav links
-    font-family: @base-font-family;
-    color: @color-white;
-    position: relative;
-    display: flex;
-    align-items: center;
-    flex-wrap: nowrap;
-    text-wrap: nowrap;
-
-    .navigation-item-counter {
-        color: @color-white;
-        font-weight: @font-weight-semibold;
-        min-width: 12px !important;
-        min-height: 12px !important;
-    }
-
-    &:not(.navigation-item-overflow) .navigation-item-counter {
-        position: absolute;
-    }
-
-    .navigation-item-title {
-        font-family: @base-font-family;
-        font-size: @typescale-2;
-        margin-left: @spacing-half;
-    }
-}
-
-.navigation-item-overflow {
-    // styles specific to overflow links
-    display: inline-flex;
-    color: @color-black;
-    padding: @spacing-1 12px;
-
-    &.navigation-item-active:not(:hover) {
-        color: @color-blue-500;
-    }
-
-    &:hover {
-        background-color: @color-blue-500;
-        color: @color-white;
-    }
-
-    .navigation-item-counter {
-        margin-left: @spacing-half;
-        margin-top: -@spacing-1;
-    }
-}
-
-.navigation-link {
-    color: inherit;
-}

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

@@ -1,22 +0,0 @@
-export const __esModule: true;
-export const calculating: string;
-export const center: string;
-export const heBottom: string;
-export const heTopCenter: string;
-export const heTopLeft: string;
-export const heTopRight: string;
-export const header: string;
-export const headerStacked: string;
-export const navigationIcon: string;
-export const navigationItem: string;
-export const navigationItemActive: string;
-export const navigationItemCounter: string;
-export const navigationItemCounterLong: string;
-export const navigationItemMain: string;
-export const navigationItemOverflow: string;
-export const navigationItemTitle: string;
-export const navigationLink: string;
-export const navigationOverflow: string;
-export const overflowPopover: string;
-export const right: string;
-

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

@@ -1,12 +0,0 @@
-import { FC } from 'react';
-declare const _default: {
-    title: string;
-    component: FC<import("./header-navigation").HeaderNavigationProps>;
-    parameters: {};
-    decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
-};
-export default _default;
-export declare const DefaultNavigation: () => import("react/jsx-runtime").JSX.Element;
-export declare const WithLogoTextAndOverflow: () => import("react/jsx-runtime").JSX.Element;
-export declare const WithAllMonolithData: () => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=header-navigation.stories.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"header-navigation.stories.d.ts","sourceRoot":"","sources":["../../../src/components/header-navigation/header-navigation.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAY,MAAM,OAAO,CAAC;;;;;;;AASrC,wBAKE;AAGF,eAAO,MAAM,iBAAiB,+CAY7B,CAAC;AAEF,eAAO,MAAM,uBAAuB,+CAoBnC,CAAC;AAkCF,eAAO,MAAM,mBAAmB,+CA8E/B,CAAC"}

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

@@ -1,2 +0,0 @@
-export * from './header-navigation';
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/header-navigation/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC"}

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

@@ -1,3 +0,0 @@
-export * from './header-navigation';
-
-//# sourceMappingURL=index.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/components/header-navigation/index.ts"],"sourcesContent":["export * from './header-navigation';\n"],"names":[],"mappings":"AAAA,cAAc,sBAAsB"}

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

@@ -1,4 +0,0 @@
-import { TooltipPropsStrict } from '@servicetitan/design-system';
-import { ReactNode } from 'react';
-export declare const withTooltip: (element: ReactNode, tooltip: string | undefined, direction?: TooltipPropsStrict["direction"]) => string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
-//# sourceMappingURL=with-tooltip.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"with-tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/header-navigation/with-tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC1E,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,eAAO,MAAM,WAAW,GACpB,SAAS,SAAS,EAClB,SAAS,MAAM,GAAG,SAAS,EAC3B,YAAW,kBAAkB,CAAC,WAAW,CAAO,4UAQ/C,CAAC"}

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

@@ -1,10 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Tooltip } from '@servicetitan/design-system';
-export const withTooltip = (element, tooltip, direction = 'b')=>tooltip ? /*#__PURE__*/ _jsx(Tooltip, {
-        el: "div",
-        direction: direction,
-        text: tooltip,
-        children: element
-    }) : element;
-
-//# sourceMappingURL=with-tooltip.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/components/header-navigation/with-tooltip.tsx"],"sourcesContent":["import { Tooltip, TooltipPropsStrict } from '@servicetitan/design-system';\nimport { ReactNode } from 'react';\n\nexport const withTooltip = (\n    element: ReactNode,\n    tooltip: string | undefined,\n    direction: TooltipPropsStrict['direction'] = 'b'\n) =>\n    tooltip ? (\n        <Tooltip el=\"div\" direction={direction} text={tooltip}>\n            {element}\n        </Tooltip>\n    ) : (\n        element\n    );\n"],"names":["Tooltip","withTooltip","element","tooltip","direction","el","text"],"mappings":";AAAA,SAASA,OAAO,QAA4B,8BAA8B;AAG1E,OAAO,MAAMC,cAAc,CACvBC,SACAC,SACAC,YAA6C,GAAG,GAEhDD,wBACI,KAACH;QAAQK,IAAG;QAAMD,WAAWA;QAAWE,MAAMH;kBACzCD;SAGLA,QACF"}