@servicetitan/navigation 14.0.0 → 14.1.0

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

@@ -1 +1 @@
-{"version":3,"file":"layout-sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-sidebar.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAY,EAAE,EAAY,YAAY,EAAkB,MAAM,OAAO,CAAC;AAC7E,OAAO,EAAE,kBAAkB,EAAyB,MAAM,wBAAwB,CAAC;AACnF,OAAO,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAYvE,MAAM,WAAW,kBAAkB;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,YAAY,EAAE,CAAC;IACrB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,SAAS,CAAC,EAAE,kBAAkB,EAAE,CAAC;IACjC,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;IACrC,YAAY,EAAE,OAAO,CAAC;IACtB,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,EAAE,OAAO,CAAC;IACrB,mBAAmB,EAAE,EAAE,CAAC,qBAAqB,CAAC,CAAC;IAC/C,iBAAiB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;IAC3C,kBAAkB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;IAC5C,mBAAmB,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,GAAG,IAAI,CAAC;IACvD,qBAAqB,CAAC,CAAC,MAAM,EAAE,MAAM,EAAE,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACxE;AAED,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAqGhD,CAAC"}
+{"version":3,"file":"layout-sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-sidebar.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAY,EAAE,EAAY,YAAY,EAAkB,MAAM,OAAO,CAAC;AAC7E,OAAO,EAAE,kBAAkB,EAAyB,MAAM,wBAAwB,CAAC;AACnF,OAAO,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAYvE,MAAM,WAAW,kBAAkB;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,YAAY,EAAE,CAAC;IACrB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,SAAS,CAAC,EAAE,kBAAkB,EAAE,CAAC;IACjC,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;IACrC,YAAY,EAAE,OAAO,CAAC;IACtB,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,EAAE,OAAO,CAAC;IACrB,mBAAmB,EAAE,EAAE,CAAC,qBAAqB,CAAC,CAAC;IAC/C,iBAAiB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;IAC3C,kBAAkB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;IAC5C,mBAAmB,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,GAAG,IAAI,CAAC;IACvD,qBAAqB,CAAC,CAAC,MAAM,EAAE,MAAM,EAAE,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACxE;AAED,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CA2GhD,CAAC"}

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

@@ -16,6 +16,7 @@ export const LayoutSidebar = ({ className, mobile, touchDevice, barExpanded, sub
             onDrawerOpenChange === null || onDrawerOpenChange === void 0 ? void 0 : onDrawerOpenChange(false);
         }
     };
+    const effectiveExpanded = mobile ? drawerOpened : barExpanded;
     return /*#__PURE__*/ _jsxs(LayoutPlacementContext.Provider, {
         value: "side",
         children: [
@@ -48,9 +49,11 @@ export const LayoutSidebar = ({ className, mobile, touchDevice, barExpanded, sub
                             }),
                             /*#__PURE__*/ _jsx("div", {
                                 "data-cy": "navigation-items",
-                                children: mainItems === null || mainItems === void 0 ? void 0 : mainItems.map((item)=>item.submenu ? /*#__PURE__*/ _jsx(SideNavigationGroupItem, {
+                                children: mainItems === null || mainItems === void 0 ? void 0 : mainItems.map((item)=>{
+                                    var _item_collapsedTitle;
+                                    return item.submenu ? /*#__PURE__*/ _jsx(SideNavigationGroupItem, {
                                         item: item,
-                                        barExpanded: mobile ? drawerOpened : barExpanded,
+                                        barExpanded: effectiveExpanded,
                                         submenuOpened: !!item.id && !!(submenusOpened === null || submenusOpened === void 0 ? void 0 : submenusOpened.includes(item.id)),
                                         onSubmenuOpen: onSubmenuOpenChange,
                                         navigationComponent: navigationComponent,
@@ -59,14 +62,15 @@ export const LayoutSidebar = ({ className, mobile, touchDevice, barExpanded, sub
                                     }, item.id) : /*#__PURE__*/ _jsx(InternalSideNavigationLink, {
                                         id: item.id,
                                         to: item.to,
-                                        title: item.title,
+                                        title: effectiveExpanded ? item.title : (_item_collapsedTitle = item.collapsedTitle) !== null && _item_collapsedTitle !== void 0 ? _item_collapsedTitle : item.title,
                                         isActive: item.isActive,
                                         icon: item.icon,
                                         iconActive: item.iconActive,
                                         className: item.className,
                                         tag: getSubmenuGroupTag(item.submenu, getCounterTag(item.counter, item.tag)),
                                         navigationComponent: navigationComponent
-                                    }, item.id))
+                                    }, item.id);
+                                })
                             }),
                             !!bottom && /*#__PURE__*/ _jsx(SidebarBottom, {
                                 children: bottom
@@ -157,12 +161,14 @@ LayoutSidebar.displayName = 'LayoutSidebar';
         noPadding: true,
         children: [
             /*#__PURE__*/ _jsx(Popover.Trigger, {
-                children: (triggerProps)=>/*#__PURE__*/ _jsx("div", {
+                children: (triggerProps)=>{
+                    var _item_collapsedTitle;
+                    return /*#__PURE__*/ _jsx("div", {
                         ...triggerProps,
                         children: /*#__PURE__*/ _jsx(InternalSideNavigationLink, {
                             id: item.id,
                             to: item.to,
-                            title: item.title,
+                            title: (_item_collapsedTitle = item.collapsedTitle) !== null && _item_collapsedTitle !== void 0 ? _item_collapsedTitle : item.title,
                             isActive: item.isActive,
                             icon: item.icon,
                             iconActive: item.iconActive,
@@ -170,7 +176,8 @@ LayoutSidebar.displayName = 'LayoutSidebar';
                             tag: tag,
                             navigationComponent: navigationComponent
                         })
-                    })
+                    });
+                }
             }),
             /*#__PURE__*/ _jsx(Popover.Content, {
                 style: popoverContent,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/titan-layout/layout-sidebar.tsx"],"sourcesContent":["import { Divider, Icon, Popover, Text, ThemeProvider } from '@servicetitan/anvil2';\nimport SvgClose from '@servicetitan/anvil2/assets/icons/material/round/close.svg';\nimport SvgCollapse from '@servicetitan/anvil2/assets/icons/st/gnav_menu_collapse.svg';\nimport SvgExpand from '@servicetitan/anvil2/assets/icons/st/gnav_menu_expand.svg';\nimport classNames from 'classnames';\nimport { Children, FC, Fragment, ReactElement, isValidElement } from 'react';\nimport { NavigationItemData, NavigationSubmenuData } from '../../utils/navigation';\nimport { NavLinkComponentProps } from '../../utils/navigation-context';\nimport { getCounterTag, getSubmenuGroupTag } from '../../utils/side-nav';\nimport { NavigationComponentProps } from './interface-internal';\nimport { LayoutPlacementContext, useTitanLayoutContext } from './layout-context';\nimport {\n    InternalSideNavigationGroup,\n    InternalSideNavigationGroupLink,\n    InternalSideNavigationLink,\n} from './layout-sidebar-links-internal';\nimport * as Styles from './layout-sidebar.module.less';\nimport { withTooltip } from './with-tooltip';\n\nexport interface LayoutSidebarProps {\n    className?: string;\n    top?: ReactElement[];\n    bottom?: ReactElement;\n    mainItems?: NavigationItemData[];\n    barExpanded: boolean;\n    submenusOpened: string[] | undefined;\n    drawerOpened: boolean;\n    mobile: boolean;\n    touchDevice: boolean;\n    navigationComponent: FC<NavLinkComponentProps>;\n    onBarExpandChange(expanded: boolean): void;\n    onDrawerOpenChange(expanded: boolean): void;\n    onSubmenuOpenChange(id: string, opened: boolean): void;\n    onNavigationLinkClick?(itemId: string, submenuItemId?: string): void;\n}\n\nexport const LayoutSidebar: FC<LayoutSidebarProps> = ({\n    className,\n    mobile,\n    touchDevice,\n    barExpanded,\n    submenusOpened,\n    drawerOpened,\n    onBarExpandChange,\n    onSubmenuOpenChange,\n    onDrawerOpenChange,\n    onNavigationLinkClick,\n    mainItems,\n    top,\n    bottom,\n    navigationComponent,\n}) => {\n    const closeDrawer = () => {\n        if (mobile) {\n            onDrawerOpenChange?.(false);\n        }\n    };\n\n    return (\n        <LayoutPlacementContext.Provider value=\"side\">\n            {mobile && drawerOpened && (\n                <div className={Styles.navDrawerBackdrop} onClick={closeDrawer} />\n            )}\n            <div\n                className={classNames(\n                    Styles.nav,\n                    mobile && Styles.navDrawer,\n                    mobile && drawerOpened && Styles.navDrawerOpened,\n                    !mobile && (barExpanded ? Styles.navWide : Styles.navSlim),\n                    className\n                )}\n                data-cy=\"side-navigation\"\n                onClick={closeDrawer}\n            >\n                <ThemeProvider mode=\"dark\" className={Styles.navMain}>\n                    {mobile && (\n                        <div className={Styles.navCloseWrapper}>\n                            <div\n                                className={Styles.navClose}\n                                onClick={() => onBarExpandChange(false)}\n                            >\n                                <Icon svg={SvgClose} size=\"large\" />\n                            </div>\n                        </div>\n                    )}\n                    {!!top?.length && <SidebarTop>{top}</SidebarTop>}\n\n                    <div data-cy=\"navigation-items\">\n                        {mainItems?.map(item =>\n                            item.submenu ? (\n                                <SideNavigationGroupItem\n                                    key={item.id}\n                                    item={item}\n                                    barExpanded={mobile ? drawerOpened : barExpanded}\n                                    submenuOpened={!!item.id && !!submenusOpened?.includes(item.id)}\n                                    onSubmenuOpen={onSubmenuOpenChange}\n                                    navigationComponent={navigationComponent}\n                                    onNavigationLinkClick={onNavigationLinkClick}\n                                    touchDevice={touchDevice}\n                                />\n                            ) : (\n                                <InternalSideNavigationLink\n                                    key={item.id}\n                                    id={item.id}\n                                    to={item.to}\n                                    title={item.title}\n                                    isActive={item.isActive}\n                                    icon={item.icon}\n                                    iconActive={item.iconActive}\n                                    className={item.className}\n                                    tag={getSubmenuGroupTag(\n                                        item.submenu,\n                                        getCounterTag(item.counter, item.tag)\n                                    )}\n                                    navigationComponent={navigationComponent}\n                                />\n                            )\n                        )}\n                    </div>\n\n                    {!!bottom && <SidebarBottom>{bottom}</SidebarBottom>}\n                </ThemeProvider>\n\n                {!mobile && (\n                    <div className={Styles.navFooter}>\n                        <div className={Styles.divider} />\n                        <div className={Styles.toggleWrapper}>\n                            <SideNavigationOptionsToggle\n                                appearance={barExpanded ? 'collapse-button' : 'expand'}\n                                onExpandedChange={() => onBarExpandChange(!barExpanded)}\n                            />\n                        </div>\n                    </div>\n                )}\n            </div>\n        </LayoutPlacementContext.Provider>\n    );\n};\nLayoutSidebar.displayName = 'LayoutSidebar';\n\n/** Side Navigation options toggle */\nconst SideNavigationOptionsToggle: FC<{\n    appearance: 'expand' | 'collapse' | 'collapse-button';\n    onExpandedChange?(expanded: boolean): void;\n}> = ({ appearance, onExpandedChange }) =>\n    withTooltip(\n        <div\n            role=\"button\"\n            tabIndex={0}\n            data-cy=\"navigation-left-options\"\n            data-pendo=\"navigation-left-options\"\n            aria-label={appearance === 'expand' ? 'Expand Menu' : 'Collapse Menu'}\n            className={classNames(Styles.toggle)}\n            onClick={() => onExpandedChange?.(appearance === 'expand')}\n            onKeyDown={e => {\n                if (e.key === 'Enter' || e.key === ' ') {\n                    e.preventDefault();\n                    onExpandedChange?.(appearance === 'expand');\n                }\n            }}\n        >\n            <div className={Styles.toggleContent}>\n                <div className={Styles.toggleIconWrapper}>\n                    <Icon\n                        className={Styles.toggleIcon}\n                        svg={appearance === 'expand' ? SvgExpand : SvgCollapse}\n                    />\n                </div>\n\n                {appearance === 'collapse-button' && (\n                    <span className={Styles.toggleText}>Collapse Menu</span>\n                )}\n            </div>\n        </div>,\n        appearance === 'expand'\n            ? 'Expand Menu'\n            : appearance === 'collapse'\n              ? 'Collapse Menu'\n              : undefined,\n        { placement: 'right' }\n    );\n\n/** Side Navigation menu item */\nconst SideNavigationGroupItem: FC<{\n    item: NavigationItemData;\n    navigationComponent: FC<NavLinkComponentProps>;\n    touchDevice: boolean;\n    barExpanded: boolean;\n    submenuOpened: boolean;\n    onSubmenuOpen: (id: string, opened: boolean) => void;\n    onNavigationLinkClick?: (itemId: string, submenuItemId?: string) => void;\n}> = ({\n    item,\n    onSubmenuOpen,\n    onNavigationLinkClick,\n    barExpanded,\n    submenuOpened,\n    navigationComponent,\n    touchDevice,\n}) => {\n    const {\n        sidebar: {\n            styles: { popoverContent },\n        },\n    } = useTitanLayoutContext();\n\n    const tag = getSubmenuGroupTag(item.submenu, getCounterTag(item.counter, item.tag));\n\n    return barExpanded ? (\n        <InternalSideNavigationGroup\n            id={item.id}\n            to={item.to}\n            title={item.title}\n            isActive={item.isActive}\n            icon={item.icon}\n            iconActive={item.iconActive}\n            className={item.className}\n            tag={tag}\n            submenuOpened={submenuOpened}\n            onSubmenuOpen={onSubmenuOpen}\n            navigationComponent={navigationComponent}\n        >\n            <SideNavigationGroupContent\n                parentId={item.id}\n                groups={item.submenu?.groups ?? []}\n                navigationComponent={navigationComponent}\n                onNavigationLinkClick={onNavigationLinkClick}\n            />\n        </InternalSideNavigationGroup>\n    ) : (\n        <Popover placement=\"right-start\" openOnHover={!touchDevice} delay={200} noPadding>\n            <Popover.Trigger>\n                {(triggerProps: any) => (\n                    <div {...triggerProps}>\n                        <InternalSideNavigationLink\n                            id={item.id}\n                            to={item.to}\n                            title={item.title}\n                            isActive={item.isActive}\n                            icon={item.icon}\n                            iconActive={item.iconActive}\n                            className={classNames(\n                                item.className,\n                                touchDevice && Styles.pointerEventsNone\n                            )}\n                            tag={tag}\n                            navigationComponent={navigationComponent}\n                        />\n                    </div>\n                )}\n            </Popover.Trigger>\n            <Popover.Content\n                style={popoverContent}\n                className={classNames('z-global-nav-i', Styles.submenuPopoverContent)}\n                data-cy=\"navigation-item-popover-content\"\n            >\n                <div className={Styles.submenuPopover}>\n                    <Text\n                        variant=\"headline\"\n                        el=\"h4\"\n                        size=\"small\"\n                        className={Styles.submenuPopoverTitle}\n                    >\n                        {item.title}\n                    </Text>\n                    <Divider className={Styles.submenuPopoverDivider} />\n                    <div className={Styles.submenuPopoverBody}>\n                        <SideNavigationGroupContent\n                            parentId={item.id}\n                            groups={item.submenu?.groups ?? []}\n                            navigationComponent={navigationComponent}\n                        />\n                    </div>\n                </div>\n            </Popover.Content>\n        </Popover>\n    );\n};\nconst SideNavigationGroupContent: FC<\n    NavigationSubmenuData &\n        NavigationComponentProps & {\n            parentId: string;\n            onNavigationLinkClick?: (itemId: string, submenuItemId?: string) => void;\n        }\n> = ({ groups, parentId, navigationComponent, onNavigationLinkClick }) => {\n    return (\n        <Fragment>\n            {groups.reduce((out, group, index) => {\n                if (!group.links.length) {\n                    return out;\n                }\n\n                const title = group.title?.trim() ?? '';\n                /* eslint-disable react/no-array-index-key */\n                if (title) {\n                    out.push(\n                        <div\n                            key={`:group:${parentId}:${index}:title`}\n                            className={Styles.submenuGroupHeader}\n                        >\n                            {title}\n                        </div>\n                    );\n                }\n                out.push(\n                    ...group.links.map((link, index) => (\n                        <InternalSideNavigationGroupLink\n                            key={`:${parentId}:${link.id}:${index}`}\n                            id={link.id}\n                            to={link.to}\n                            title={link.title}\n                            isActive={link.isActive}\n                            className={undefined}\n                            tag={getCounterTag(link.counter, link.tag)}\n                            parentId={parentId}\n                            navigationComponent={navigationComponent}\n                            onLinkClick={onNavigationLinkClick}\n                        />\n                    ))\n                );\n                /* eslint-enable react/no-array-index-key */\n\n                return out;\n            }, [] as ReactElement[])}\n        </Fragment>\n    );\n};\n\nfunction SidebarTop({ children }: any) {\n    const list = Children.map(children, child => {\n        return child && isValidElement(child) ? child : null;\n    });\n    return list?.length ? (\n        <ThemeProvider mode=\"dark\" className={Styles.navTop} data-cy=\"navigation-items-top\">\n            {list}\n            <div className={Styles.divider} />\n        </ThemeProvider>\n    ) : null;\n}\n\nfunction SidebarBottom({ children }: any) {\n    return (\n        <ThemeProvider mode=\"dark\" className={Styles.navBottom} data-cy=\"navigation-items-bottom\">\n            <div className={Styles.divider} />\n            {children}\n        </ThemeProvider>\n    );\n}\n"],"names":["Divider","Icon","Popover","Text","ThemeProvider","SvgClose","SvgCollapse","SvgExpand","classNames","Children","Fragment","isValidElement","getCounterTag","getSubmenuGroupTag","LayoutPlacementContext","useTitanLayoutContext","InternalSideNavigationGroup","InternalSideNavigationGroupLink","InternalSideNavigationLink","Styles","withTooltip","LayoutSidebar","className","mobile","touchDevice","barExpanded","submenusOpened","drawerOpened","onBarExpandChange","onSubmenuOpenChange","onDrawerOpenChange","onNavigationLinkClick","mainItems","top","bottom","navigationComponent","closeDrawer","Provider","value","div","navDrawerBackdrop","onClick","nav","navDrawer","navDrawerOpened","navWide","navSlim","data-cy","mode","navMain","navCloseWrapper","navClose","svg","size","length","SidebarTop","map","item","submenu","SideNavigationGroupItem","submenuOpened","id","includes","onSubmenuOpen","to","title","isActive","icon","iconActive","tag","counter","SidebarBottom","navFooter","divider","toggleWrapper","SideNavigationOptionsToggle","appearance","onExpandedChange","displayName","role","tabIndex","data-pendo","aria-label","toggle","onKeyDown","e","key","preventDefault","toggleContent","toggleIconWrapper","toggleIcon","span","toggleText","undefined","placement","sidebar","styles","popoverContent","SideNavigationGroupContent","parentId","groups","openOnHover","delay","noPadding","Trigger","triggerProps","pointerEventsNone","Content","style","submenuPopoverContent","submenuPopover","variant","el","submenuPopoverTitle","submenuPopoverDivider","submenuPopoverBody","reduce","out","group","index","links","trim","push","submenuGroupHeader","link","onLinkClick","children","list","child","navTop","navBottom"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/titan-layout/layout-sidebar.tsx"],"sourcesContent":["import { Divider, Icon, Popover, Text, ThemeProvider } from '@servicetitan/anvil2';\nimport SvgClose from '@servicetitan/anvil2/assets/icons/material/round/close.svg';\nimport SvgCollapse from '@servicetitan/anvil2/assets/icons/st/gnav_menu_collapse.svg';\nimport SvgExpand from '@servicetitan/anvil2/assets/icons/st/gnav_menu_expand.svg';\nimport classNames from 'classnames';\nimport { Children, FC, Fragment, ReactElement, isValidElement } from 'react';\nimport { NavigationItemData, NavigationSubmenuData } from '../../utils/navigation';\nimport { NavLinkComponentProps } from '../../utils/navigation-context';\nimport { getCounterTag, getSubmenuGroupTag } from '../../utils/side-nav';\nimport { NavigationComponentProps } from './interface-internal';\nimport { LayoutPlacementContext, useTitanLayoutContext } from './layout-context';\nimport {\n    InternalSideNavigationGroup,\n    InternalSideNavigationGroupLink,\n    InternalSideNavigationLink,\n} from './layout-sidebar-links-internal';\nimport * as Styles from './layout-sidebar.module.less';\nimport { withTooltip } from './with-tooltip';\n\nexport interface LayoutSidebarProps {\n    className?: string;\n    top?: ReactElement[];\n    bottom?: ReactElement;\n    mainItems?: NavigationItemData[];\n    barExpanded: boolean;\n    submenusOpened: string[] | undefined;\n    drawerOpened: boolean;\n    mobile: boolean;\n    touchDevice: boolean;\n    navigationComponent: FC<NavLinkComponentProps>;\n    onBarExpandChange(expanded: boolean): void;\n    onDrawerOpenChange(expanded: boolean): void;\n    onSubmenuOpenChange(id: string, opened: boolean): void;\n    onNavigationLinkClick?(itemId: string, submenuItemId?: string): void;\n}\n\nexport const LayoutSidebar: FC<LayoutSidebarProps> = ({\n    className,\n    mobile,\n    touchDevice,\n    barExpanded,\n    submenusOpened,\n    drawerOpened,\n    onBarExpandChange,\n    onSubmenuOpenChange,\n    onDrawerOpenChange,\n    onNavigationLinkClick,\n    mainItems,\n    top,\n    bottom,\n    navigationComponent,\n}) => {\n    const closeDrawer = () => {\n        if (mobile) {\n            onDrawerOpenChange?.(false);\n        }\n    };\n\n    const effectiveExpanded = mobile ? drawerOpened : barExpanded;\n\n    return (\n        <LayoutPlacementContext.Provider value=\"side\">\n            {mobile && drawerOpened && (\n                <div className={Styles.navDrawerBackdrop} onClick={closeDrawer} />\n            )}\n            <div\n                className={classNames(\n                    Styles.nav,\n                    mobile && Styles.navDrawer,\n                    mobile && drawerOpened && Styles.navDrawerOpened,\n                    !mobile && (barExpanded ? Styles.navWide : Styles.navSlim),\n                    className\n                )}\n                data-cy=\"side-navigation\"\n                onClick={closeDrawer}\n            >\n                <ThemeProvider mode=\"dark\" className={Styles.navMain}>\n                    {mobile && (\n                        <div className={Styles.navCloseWrapper}>\n                            <div\n                                className={Styles.navClose}\n                                onClick={() => onBarExpandChange(false)}\n                            >\n                                <Icon svg={SvgClose} size=\"large\" />\n                            </div>\n                        </div>\n                    )}\n                    {!!top?.length && <SidebarTop>{top}</SidebarTop>}\n\n                    <div data-cy=\"navigation-items\">\n                        {mainItems?.map(item =>\n                            item.submenu ? (\n                                <SideNavigationGroupItem\n                                    key={item.id}\n                                    item={item}\n                                    barExpanded={effectiveExpanded}\n                                    submenuOpened={!!item.id && !!submenusOpened?.includes(item.id)}\n                                    onSubmenuOpen={onSubmenuOpenChange}\n                                    navigationComponent={navigationComponent}\n                                    onNavigationLinkClick={onNavigationLinkClick}\n                                    touchDevice={touchDevice}\n                                />\n                            ) : (\n                                <InternalSideNavigationLink\n                                    key={item.id}\n                                    id={item.id}\n                                    to={item.to}\n                                    title={\n                                        effectiveExpanded\n                                            ? item.title\n                                            : (item.collapsedTitle ?? item.title)\n                                    }\n                                    isActive={item.isActive}\n                                    icon={item.icon}\n                                    iconActive={item.iconActive}\n                                    className={item.className}\n                                    tag={getSubmenuGroupTag(\n                                        item.submenu,\n                                        getCounterTag(item.counter, item.tag)\n                                    )}\n                                    navigationComponent={navigationComponent}\n                                />\n                            )\n                        )}\n                    </div>\n\n                    {!!bottom && <SidebarBottom>{bottom}</SidebarBottom>}\n                </ThemeProvider>\n\n                {!mobile && (\n                    <div className={Styles.navFooter}>\n                        <div className={Styles.divider} />\n                        <div className={Styles.toggleWrapper}>\n                            <SideNavigationOptionsToggle\n                                appearance={barExpanded ? 'collapse-button' : 'expand'}\n                                onExpandedChange={() => onBarExpandChange(!barExpanded)}\n                            />\n                        </div>\n                    </div>\n                )}\n            </div>\n        </LayoutPlacementContext.Provider>\n    );\n};\nLayoutSidebar.displayName = 'LayoutSidebar';\n\n/** Side Navigation options toggle */\nconst SideNavigationOptionsToggle: FC<{\n    appearance: 'expand' | 'collapse' | 'collapse-button';\n    onExpandedChange?(expanded: boolean): void;\n}> = ({ appearance, onExpandedChange }) =>\n    withTooltip(\n        <div\n            role=\"button\"\n            tabIndex={0}\n            data-cy=\"navigation-left-options\"\n            data-pendo=\"navigation-left-options\"\n            aria-label={appearance === 'expand' ? 'Expand Menu' : 'Collapse Menu'}\n            className={classNames(Styles.toggle)}\n            onClick={() => onExpandedChange?.(appearance === 'expand')}\n            onKeyDown={e => {\n                if (e.key === 'Enter' || e.key === ' ') {\n                    e.preventDefault();\n                    onExpandedChange?.(appearance === 'expand');\n                }\n            }}\n        >\n            <div className={Styles.toggleContent}>\n                <div className={Styles.toggleIconWrapper}>\n                    <Icon\n                        className={Styles.toggleIcon}\n                        svg={appearance === 'expand' ? SvgExpand : SvgCollapse}\n                    />\n                </div>\n\n                {appearance === 'collapse-button' && (\n                    <span className={Styles.toggleText}>Collapse Menu</span>\n                )}\n            </div>\n        </div>,\n        appearance === 'expand'\n            ? 'Expand Menu'\n            : appearance === 'collapse'\n              ? 'Collapse Menu'\n              : undefined,\n        { placement: 'right' }\n    );\n\n/** Side Navigation menu item */\nconst SideNavigationGroupItem: FC<{\n    item: NavigationItemData;\n    navigationComponent: FC<NavLinkComponentProps>;\n    touchDevice: boolean;\n    barExpanded: boolean;\n    submenuOpened: boolean;\n    onSubmenuOpen: (id: string, opened: boolean) => void;\n    onNavigationLinkClick?: (itemId: string, submenuItemId?: string) => void;\n}> = ({\n    item,\n    onSubmenuOpen,\n    onNavigationLinkClick,\n    barExpanded,\n    submenuOpened,\n    navigationComponent,\n    touchDevice,\n}) => {\n    const {\n        sidebar: {\n            styles: { popoverContent },\n        },\n    } = useTitanLayoutContext();\n\n    const tag = getSubmenuGroupTag(item.submenu, getCounterTag(item.counter, item.tag));\n\n    return barExpanded ? (\n        <InternalSideNavigationGroup\n            id={item.id}\n            to={item.to}\n            title={item.title}\n            isActive={item.isActive}\n            icon={item.icon}\n            iconActive={item.iconActive}\n            className={item.className}\n            tag={tag}\n            submenuOpened={submenuOpened}\n            onSubmenuOpen={onSubmenuOpen}\n            navigationComponent={navigationComponent}\n        >\n            <SideNavigationGroupContent\n                parentId={item.id}\n                groups={item.submenu?.groups ?? []}\n                navigationComponent={navigationComponent}\n                onNavigationLinkClick={onNavigationLinkClick}\n            />\n        </InternalSideNavigationGroup>\n    ) : (\n        <Popover placement=\"right-start\" openOnHover={!touchDevice} delay={200} noPadding>\n            <Popover.Trigger>\n                {(triggerProps: any) => (\n                    <div {...triggerProps}>\n                        <InternalSideNavigationLink\n                            id={item.id}\n                            to={item.to}\n                            title={item.collapsedTitle ?? item.title}\n                            isActive={item.isActive}\n                            icon={item.icon}\n                            iconActive={item.iconActive}\n                            className={classNames(\n                                item.className,\n                                touchDevice && Styles.pointerEventsNone\n                            )}\n                            tag={tag}\n                            navigationComponent={navigationComponent}\n                        />\n                    </div>\n                )}\n            </Popover.Trigger>\n            <Popover.Content\n                style={popoverContent}\n                className={classNames('z-global-nav-i', Styles.submenuPopoverContent)}\n                data-cy=\"navigation-item-popover-content\"\n            >\n                <div className={Styles.submenuPopover}>\n                    <Text\n                        variant=\"headline\"\n                        el=\"h4\"\n                        size=\"small\"\n                        className={Styles.submenuPopoverTitle}\n                    >\n                        {item.title}\n                    </Text>\n                    <Divider className={Styles.submenuPopoverDivider} />\n                    <div className={Styles.submenuPopoverBody}>\n                        <SideNavigationGroupContent\n                            parentId={item.id}\n                            groups={item.submenu?.groups ?? []}\n                            navigationComponent={navigationComponent}\n                        />\n                    </div>\n                </div>\n            </Popover.Content>\n        </Popover>\n    );\n};\nconst SideNavigationGroupContent: FC<\n    NavigationSubmenuData &\n        NavigationComponentProps & {\n            parentId: string;\n            onNavigationLinkClick?: (itemId: string, submenuItemId?: string) => void;\n        }\n> = ({ groups, parentId, navigationComponent, onNavigationLinkClick }) => {\n    return (\n        <Fragment>\n            {groups.reduce((out, group, index) => {\n                if (!group.links.length) {\n                    return out;\n                }\n\n                const title = group.title?.trim() ?? '';\n                /* eslint-disable react/no-array-index-key */\n                if (title) {\n                    out.push(\n                        <div\n                            key={`:group:${parentId}:${index}:title`}\n                            className={Styles.submenuGroupHeader}\n                        >\n                            {title}\n                        </div>\n                    );\n                }\n                out.push(\n                    ...group.links.map((link, index) => (\n                        <InternalSideNavigationGroupLink\n                            key={`:${parentId}:${link.id}:${index}`}\n                            id={link.id}\n                            to={link.to}\n                            title={link.title}\n                            isActive={link.isActive}\n                            className={undefined}\n                            tag={getCounterTag(link.counter, link.tag)}\n                            parentId={parentId}\n                            navigationComponent={navigationComponent}\n                            onLinkClick={onNavigationLinkClick}\n                        />\n                    ))\n                );\n                /* eslint-enable react/no-array-index-key */\n\n                return out;\n            }, [] as ReactElement[])}\n        </Fragment>\n    );\n};\n\nfunction SidebarTop({ children }: any) {\n    const list = Children.map(children, child => {\n        return child && isValidElement(child) ? child : null;\n    });\n    return list?.length ? (\n        <ThemeProvider mode=\"dark\" className={Styles.navTop} data-cy=\"navigation-items-top\">\n            {list}\n            <div className={Styles.divider} />\n        </ThemeProvider>\n    ) : null;\n}\n\nfunction SidebarBottom({ children }: any) {\n    return (\n        <ThemeProvider mode=\"dark\" className={Styles.navBottom} data-cy=\"navigation-items-bottom\">\n            <div className={Styles.divider} />\n            {children}\n        </ThemeProvider>\n    );\n}\n"],"names":["Divider","Icon","Popover","Text","ThemeProvider","SvgClose","SvgCollapse","SvgExpand","classNames","Children","Fragment","isValidElement","getCounterTag","getSubmenuGroupTag","LayoutPlacementContext","useTitanLayoutContext","InternalSideNavigationGroup","InternalSideNavigationGroupLink","InternalSideNavigationLink","Styles","withTooltip","LayoutSidebar","className","mobile","touchDevice","barExpanded","submenusOpened","drawerOpened","onBarExpandChange","onSubmenuOpenChange","onDrawerOpenChange","onNavigationLinkClick","mainItems","top","bottom","navigationComponent","closeDrawer","effectiveExpanded","Provider","value","div","navDrawerBackdrop","onClick","nav","navDrawer","navDrawerOpened","navWide","navSlim","data-cy","mode","navMain","navCloseWrapper","navClose","svg","size","length","SidebarTop","map","item","submenu","SideNavigationGroupItem","submenuOpened","id","includes","onSubmenuOpen","to","title","collapsedTitle","isActive","icon","iconActive","tag","counter","SidebarBottom","navFooter","divider","toggleWrapper","SideNavigationOptionsToggle","appearance","onExpandedChange","displayName","role","tabIndex","data-pendo","aria-label","toggle","onKeyDown","e","key","preventDefault","toggleContent","toggleIconWrapper","toggleIcon","span","toggleText","undefined","placement","sidebar","styles","popoverContent","SideNavigationGroupContent","parentId","groups","openOnHover","delay","noPadding","Trigger","triggerProps","pointerEventsNone","Content","style","submenuPopoverContent","submenuPopover","variant","el","submenuPopoverTitle","submenuPopoverDivider","submenuPopoverBody","reduce","out","group","index","links","trim","push","submenuGroupHeader","link","onLinkClick","children","list","child","navTop","navBottom"],"mappings":"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"}

package/dist/utils/navigation.d.ts

@@ -20,6 +20,8 @@ export interface NavigationLinkData {
     to: string;
     /** link title */
     title: string;
+    /** title shown when the navigation rail is collapsed; falls back to `title` */
+    collapsedTitle?: string;
     /** callback to return active state. By default, it compares link href with current pathname */
     isActive?: boolean | ((pathname: string) => boolean);
 }

package/dist/utils/navigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../../src/utils/navigation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAEhE,MAAM,WAAW,kBAAmB,SAAQ,kBAAkB;IAC1D,yCAAyC;IACzC,IAAI,EAAE,SAAS,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;IAEnC,uCAAuC;IACvC,UAAU,EAAE,SAAS,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;IAEzC,yEAAyE;IACzE,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,GAAG,CAAC,EAAE,cAAc,CAAC;IAErB,8BAA8B;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,oCAAoC;IACpC,OAAO,CAAC,EAAE,qBAAqB,CAAC;CACnC;AAED,MAAM,WAAW,kBAAkB;IAC/B,cAAc;IACd,EAAE,EAAE,MAAM,CAAC;IAEX,gBAAgB;IAChB,EAAE,EAAE,MAAM,CAAC;IAEX,iBAAiB;IACjB,KAAK,EAAE,MAAM,CAAC;IAEd,+FAA+F;IAC/F,QAAQ,CAAC,EAAE,OAAO,GAAG,CAAC,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,CAAC;CACxD;AAED,MAAM,WAAW,qBAAqB;IAClC,qBAAqB;IACrB,MAAM,EAAE,0BAA0B,EAAE,CAAC;CACxC;AAED,MAAM,WAAW,yBAA0B,SAAQ,kBAAkB;IACjE,+EAA+E;IAC/E,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,0EAA0E;IAC1E,GAAG,CAAC,EAAE,cAAc,CAAC;CACxB;AAED,MAAM,WAAW,0BAA0B;IACvC,0BAA0B;IAC1B,KAAK,EAAE,MAAM,CAAC;IAEd,0BAA0B;IAC1B,KAAK,EAAE,yBAAyB,EAAE,CAAC;CACtC"}
+{"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../../src/utils/navigation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAEhE,MAAM,WAAW,kBAAmB,SAAQ,kBAAkB;IAC1D,yCAAyC;IACzC,IAAI,EAAE,SAAS,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;IAEnC,uCAAuC;IACvC,UAAU,EAAE,SAAS,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;IAEzC,yEAAyE;IACzE,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,GAAG,CAAC,EAAE,cAAc,CAAC;IAErB,8BAA8B;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,oCAAoC;IACpC,OAAO,CAAC,EAAE,qBAAqB,CAAC;CACnC;AAED,MAAM,WAAW,kBAAkB;IAC/B,cAAc;IACd,EAAE,EAAE,MAAM,CAAC;IAEX,gBAAgB;IAChB,EAAE,EAAE,MAAM,CAAC;IAEX,iBAAiB;IACjB,KAAK,EAAE,MAAM,CAAC;IAEd,+EAA+E;IAC/E,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,+FAA+F;IAC/F,QAAQ,CAAC,EAAE,OAAO,GAAG,CAAC,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,CAAC;CACxD;AAED,MAAM,WAAW,qBAAqB;IAClC,qBAAqB;IACrB,MAAM,EAAE,0BAA0B,EAAE,CAAC;CACxC;AAED,MAAM,WAAW,yBAA0B,SAAQ,kBAAkB;IACjE,+EAA+E;IAC/E,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,0EAA0E;IAC1E,GAAG,CAAC,EAAE,cAAc,CAAC;CACxB;AAED,MAAM,WAAW,0BAA0B;IACvC,0BAA0B;IAC1B,KAAK,EAAE,MAAM,CAAC;IAEd,0BAA0B;IAC1B,KAAK,EAAE,yBAAyB,EAAE,CAAC;CACtC"}

package/dist/utils/navigation.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/navigation.ts"],"sourcesContent":["import { IconProps } from '@servicetitan/anvil2';\nimport { CounterTagData, CounterTagValue } from './counter-tag';\n\nexport interface NavigationItemData extends NavigationLinkData {\n    /** svg icon (anvil2) of inactive item */\n    icon: IconProps['svg'] | undefined;\n\n    /** svg icon (anvil2) of active item */\n    iconActive: IconProps['svg'] | undefined;\n\n    /** item tag (optional). shown if it is set and true or greater than 0 */\n    counter?: CounterTagValue;\n    tag?: CounterTagData;\n\n    /** class name of link item */\n    className?: string;\n\n    /** optional submenu of link item */\n    submenu?: NavigationSubmenuData;\n}\n\nexport interface NavigationLinkData {\n    /** link id */\n    id: string;\n\n    /** link href */\n    to: string;\n\n    /** link title */\n    title: string;\n\n    /** callback to return active state. By default, it compares link href with current pathname */\n    isActive?: boolean | ((pathname: string) => boolean);\n}\n\nexport interface NavigationSubmenuData {\n    /** submenu groups */\n    groups: NavigationSubmenuGroupData[];\n}\n\nexport interface NavigationSubmenuItemData extends NavigationLinkData {\n    /** item tag (optional) value. shown if it is set and true or greater than 0 */\n    counter?: CounterTagValue;\n    /** item tag (optional) value. shown if value is true or greater than 0 */\n    tag?: CounterTagData;\n}\n\nexport interface NavigationSubmenuGroupData {\n    /** submenu group title */\n    title: string;\n\n    /** submenu group links */\n    links: NavigationSubmenuItemData[];\n}\n"],"names":[],"mappings":"AA+CA,WAMC"}
+{"version":3,"sources":["../../src/utils/navigation.ts"],"sourcesContent":["import { IconProps } from '@servicetitan/anvil2';\nimport { CounterTagData, CounterTagValue } from './counter-tag';\n\nexport interface NavigationItemData extends NavigationLinkData {\n    /** svg icon (anvil2) of inactive item */\n    icon: IconProps['svg'] | undefined;\n\n    /** svg icon (anvil2) of active item */\n    iconActive: IconProps['svg'] | undefined;\n\n    /** item tag (optional). shown if it is set and true or greater than 0 */\n    counter?: CounterTagValue;\n    tag?: CounterTagData;\n\n    /** class name of link item */\n    className?: string;\n\n    /** optional submenu of link item */\n    submenu?: NavigationSubmenuData;\n}\n\nexport interface NavigationLinkData {\n    /** link id */\n    id: string;\n\n    /** link href */\n    to: string;\n\n    /** link title */\n    title: string;\n\n    /** title shown when the navigation rail is collapsed; falls back to `title` */\n    collapsedTitle?: string;\n\n    /** callback to return active state. By default, it compares link href with current pathname */\n    isActive?: boolean | ((pathname: string) => boolean);\n}\n\nexport interface NavigationSubmenuData {\n    /** submenu groups */\n    groups: NavigationSubmenuGroupData[];\n}\n\nexport interface NavigationSubmenuItemData extends NavigationLinkData {\n    /** item tag (optional) value. shown if it is set and true or greater than 0 */\n    counter?: CounterTagValue;\n    /** item tag (optional) value. shown if value is true or greater than 0 */\n    tag?: CounterTagData;\n}\n\nexport interface NavigationSubmenuGroupData {\n    /** submenu group title */\n    title: string;\n\n    /** submenu group links */\n    links: NavigationSubmenuItemData[];\n}\n"],"names":[],"mappings":"AAkDA,WAMC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/navigation",
-    "version": "14.0.0",
+    "version": "14.1.0",
     "description": "Navigation components",
     "repository": {
         "type": "git",
@@ -35,5 +35,5 @@
         "less": true,
         "webpack": false
     },
-    "gitHead": "cc95ed44520e07801e9fc8bd61d6d89797696a11"
+    "gitHead": "cbf3577ab42547360554b0a59369463e5ee185fa"
 }

package/src/components/titan-layout/layout-sidebar.tsx

@@ -56,6 +56,8 @@ export const LayoutSidebar: FC<LayoutSidebarProps> = ({
         }
     };
 
+    const effectiveExpanded = mobile ? drawerOpened : barExpanded;
+
     return (
         <LayoutPlacementContext.Provider value="side">
             {mobile && drawerOpened && (
@@ -91,7 +93,7 @@ export const LayoutSidebar: FC<LayoutSidebarProps> = ({
                                 <SideNavigationGroupItem
                                     key={item.id}
                                     item={item}
-                                    barExpanded={mobile ? drawerOpened : barExpanded}
+                                    barExpanded={effectiveExpanded}
                                     submenuOpened={!!item.id && !!submenusOpened?.includes(item.id)}
                                     onSubmenuOpen={onSubmenuOpenChange}
                                     navigationComponent={navigationComponent}
@@ -103,7 +105,11 @@ export const LayoutSidebar: FC<LayoutSidebarProps> = ({
                                     key={item.id}
                                     id={item.id}
                                     to={item.to}
-                                    title={item.title}
+                                    title={
+                                        effectiveExpanded
+                                            ? item.title
+                                            : (item.collapsedTitle ?? item.title)
+                                    }
                                     isActive={item.isActive}
                                     icon={item.icon}
                                     iconActive={item.iconActive}
@@ -235,7 +241,7 @@ const SideNavigationGroupItem: FC<{
                         <InternalSideNavigationLink
                             id={item.id}
                             to={item.to}
-                            title={item.title}
+                            title={item.collapsedTitle ?? item.title}
                             isActive={item.isActive}
                             icon={item.icon}
                             iconActive={item.iconActive}

package/src/utils/navigation.ts

@@ -29,6 +29,9 @@ export interface NavigationLinkData {
     /** link title */
     title: string;
 
+    /** title shown when the navigation rail is collapsed; falls back to `title` */
+    collapsedTitle?: string;
+
     /** callback to return active state. By default, it compares link href with current pathname */
     isActive?: boolean | ((pathname: string) => boolean);
 }