@servicetitan/navigation 14.4.0 → 14.5.1

package/dist/components/titan-layout/navigation-catalog/navigation-catalog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/titan-layout/navigation-catalog/navigation-catalog.tsx"],"sourcesContent":["import { Button, Dialog, Icon, SearchField, Text, Tooltip } from '@servicetitan/anvil2';\nimport IconLock from '@servicetitan/anvil2/assets/icons/material/round/lock.svg';\nimport IconStar from '@servicetitan/anvil2/assets/icons/material/round/star.svg';\nimport IconStarBorder from '@servicetitan/anvil2/assets/icons/material/round/star_border.svg';\nimport classNames from 'classnames';\nimport { FC, Fragment, MouseEvent, useMemo, useRef, useState } from 'react';\nimport {\n    filterCatalogGroups,\n    getCatalogChildren,\n    getCatalogSubmenuGroups,\n} from '../../../utils/catalog-groups';\nimport { NavigationItemData } from '../../../utils/navigation';\nimport { getCounterTag } from '../../../utils/side-nav';\nimport { BadgeTag } from '../../badge-tag';\nimport { PinnedNavigationConfig } from '../interface';\nimport { useTitanLayoutContext } from '../layout-context';\nimport { NavigationCatalogFooter } from './navigation-catalog-footer';\nimport * as styles from './navigation-catalog.module.less';\n\n/** Shown in place of the pin control for a destination the user may not unpin. */\nconst LockedPin: FC = () => (\n    <Tooltip>\n        <Tooltip.Trigger>\n            <Icon svg={IconLock} className={styles.lock} />\n        </Tooltip.Trigger>\n        <Tooltip.Content style={{ pointerEvents: 'none' }}>\n            Cannot be removed from Favorites\n        </Tooltip.Content>\n    </Tooltip>\n);\n\ninterface PinToggleProps {\n    /** Mixed modules stay highlighted but use an outline until all pages are pinned. */\n    pinned: boolean | 'mixed';\n    label: string;\n    onToggle: () => void;\n}\n\nconst PinToggle: FC<PinToggleProps> = ({ pinned, label, onToggle }) => {\n    const toggle = (event: MouseEvent) => {\n        // The control sits inside the row but is not a navigation affordance.\n        event.preventDefault();\n        event.stopPropagation();\n        onToggle();\n    };\n\n    return (\n        <Tooltip delay={300}>\n            <Tooltip.Trigger>\n                <Button\n                    appearance=\"ghost\"\n                    size=\"small\"\n                    icon={pinned === true ? IconStar : IconStarBorder}\n                    className={classNames(styles.star, pinned && styles.starActive)}\n                    aria-label={label}\n                    aria-pressed={pinned}\n                    onClick={toggle}\n                />\n            </Tooltip.Trigger>\n            <Tooltip.Content style={{ pointerEvents: 'none' }}>\n                {pinned === 'mixed'\n                    ? 'Add this module to Favorites'\n                    : pinned\n                      ? 'Remove from Favorites'\n                      : 'Add to Favorites'}\n            </Tooltip.Content>\n        </Tooltip>\n    );\n};\n\ninterface CatalogRowsProps {\n    item: NavigationItemData;\n    /**\n     * Every id the module's own control covers, taken from the unfiltered item.\n     *\n     * `item` may have been narrowed by the search, so deriving this from it would let the control\n     * act on only the pages that happen to be visible — silently stranding the rest.\n     */\n    scopeIds: string[];\n    isPinned: (id: string) => boolean;\n    isLocked: (id: string) => boolean;\n    /** `ownerId` is the module the page belongs to; omitted for the module's own row. */\n    onTogglePin: (id: string, ownerId?: string) => void;\n    onToggleAll: (ids: string[], shouldPin: boolean) => void;\n    onNavigate: () => void;\n}\n\nconst CatalogRows: FC<CatalogRowsProps> = ({\n    item,\n    scopeIds,\n    isPinned,\n    isLocked,\n    onTogglePin,\n    onToggleAll,\n    onNavigate,\n}) => {\n    const { NavigationComponent } = useTitanLayoutContext();\n    const submenuGroups = getCatalogSubmenuGroups(item);\n\n    /*\n     * Minus anything locked — locked destinations are always present, so the module's control\n     * neither reports on them nor acts on them.\n     */\n    const everything = scopeIds.filter(id => !isLocked(id));\n    const anyPinned = everything.some(isPinned);\n    const allPinned = everything.length > 0 && everything.every(isPinned);\n    const tag = getCounterTag(item.counter, item.tag);\n\n    return (\n        <div className={styles.moduleGroup}>\n            <div className={styles.row}>\n                <NavigationComponent\n                    to={item.to}\n                    className={styles.link}\n                    onClick={onNavigate}\n                    aria-label={item.title}\n                >\n                    {item.icon && (\n                        <Icon svg={item.icon} size=\"medium\" className={styles.moduleIcon} />\n                    )}\n                    <Text inline size=\"small\" className={styles.moduleTitle}>\n                        {item.title}\n                    </Text>\n                    {/*\n                     * The same counter the rail shows, so a destination that is asking for\n                     * attention still says so here — the catalog is the only place an unfavourited\n                     * one is visible at all.\n                     */}\n                    {!!tag && <BadgeTag data={tag} className={styles.badge} />}\n                </NavigationComponent>\n                {/*\n                 * One control for the whole module: favouriting it takes its pages with it, and\n                 * unfavouriting it takes them away again.\n                 *\n                 * A gold outline marks a partially favourited module. Fill the star only when\n                 * its full, unfiltered scope is favourited, including pages hidden by search.\n                 * Clicking the outline adds the remaining pages; clicking the filled star removes all.\n                 */}\n                {isLocked(item.id) ? (\n                    <LockedPin />\n                ) : (\n                    <PinToggle\n                        pinned={allPinned ? true : anyPinned ? 'mixed' : false}\n                        label={\n                            allPinned\n                                ? `Unpin ${item.title} from the navigation`\n                                : `Pin ${item.title} to the navigation`\n                        }\n                        onToggle={() => onToggleAll(everything, !allPinned)}\n                    />\n                )}\n            </div>\n            {submenuGroups.map(group => (\n                <div key={group.links[0].id}>\n                    {group.title && (\n                        <Text variant=\"eyebrow\" size=\"small\" className={styles.submenuTitle}>\n                            {group.title}\n                        </Text>\n                    )}\n                    {group.links.map(child => {\n                        /*\n                         * Page titles are only unique within their item — \"Settings\" and \"Reports\" recur\n                         * across the catalog — and the row that tells them apart is a separate element, so\n                         * it is not part of any of these names. Anything reading the rows on their own, a\n                         * screen reader running through the links or a voice command naming one, would\n                         * otherwise be given the same name several times.\n                         */\n                        const qualifiedTitle = `${item.title}: ${child.title}`;\n                        const childPinned = isPinned(child.id);\n                        const childTag = getCounterTag(child.counter, child.tag);\n\n                        return (\n                            <div key={child.id} className={styles.row}>\n                                <NavigationComponent\n                                    to={child.to}\n                                    className={classNames(styles.link, styles.childLink)}\n                                    onClick={onNavigate}\n                                    aria-label={qualifiedTitle}\n                                >\n                                    <Text inline className={styles.childTitle}>\n                                        {child.title}\n                                    </Text>\n                                    {!!childTag && (\n                                        <BadgeTag data={childTag} className={styles.badge} />\n                                    )}\n                                </NavigationComponent>\n                                {isLocked(child.id) ? (\n                                    <LockedPin />\n                                ) : (\n                                    <PinToggle\n                                        pinned={childPinned}\n                                        label={\n                                            childPinned\n                                                ? `Unpin ${qualifiedTitle} from the navigation`\n                                                : `Pin ${qualifiedTitle} to the navigation`\n                                        }\n                                        onToggle={() => onTogglePin(child.id, item.id)}\n                                    />\n                                )}\n                            </div>\n                        );\n                    })}\n                </div>\n            ))}\n        </div>\n    );\n};\n\nexport interface NavigationCatalogProps extends PinnedNavigationConfig {\n    open: boolean;\n    onClose: () => void;\n}\n\n/**\n * Every destination the host offers, grouped into sections, with a star on every row.\n *\n * The catalog shows what it is given and nothing more — the host has already resolved what this\n * user may reach, so the catalog cannot offer a destination they do not have.\n */\nexport const NavigationCatalog: FC<NavigationCatalogProps> = ({\n    open,\n    onClose,\n    groups,\n    pinnedIds,\n    lockedIds,\n    onPinnedIdsChange,\n    onResetToDefaults,\n}) => {\n    const [query, setQuery] = useState('');\n    const isSearching = query.trim().length > 0;\n    const searchRef = useRef<HTMLInputElement>(null);\n\n    /*\n     * Resolved here rather than by the host, so a catalog that costs requests to enumerate is paid\n     * for on opening the dialog and not on every page load. This component is mounted only while\n     * open, so the call happens once per open unless the host changes the function.\n     */\n    const resolvedGroups = useMemo(() => groups(), [groups]);\n\n    const visibleGroups = useMemo(\n        () => filterCatalogGroups(resolvedGroups, query),\n        [resolvedGroups, query]\n    );\n\n    /*\n     * The pin scope of every item, keyed by id and built before the search narrows anything, so a\n     * module's control still covers the pages a query is currently hiding.\n     */\n    const scopeById = useMemo(\n        () =>\n            new Map(\n                resolvedGroups\n                    .flatMap(group => group.items)\n                    .map(item => [\n                        item.id,\n                        [item.id, ...getCatalogChildren(item).map(child => child.id)],\n                    ])\n            ),\n        [resolvedGroups]\n    );\n    const pinnedSet = useMemo(() => new Set(pinnedIds), [pinnedIds]);\n    const lockedSet = useMemo(() => new Set(lockedIds ?? []), [lockedIds]);\n\n    const isPinned = (id: string) => pinnedSet.has(id);\n    const isLocked = (id: string) => lockedSet.has(id);\n\n    /**\n     * Favourites or unfavourites one row, carrying its module with it.\n     *\n     * A page is reached through its module, so the two travel together: favouriting a page brings\n     * the module along when it is not already there, and unfavouriting the last one takes the\n     * module with it. Leaving the module behind on its own would not read as an emptier\n     * navigation — it would put the module back carrying every page it has.\n     *\n     * Locked ids never reach a proposal. The controls that would move them are not rendered, so\n     * that part is belt and braces — but the host's list is the thing that gets persisted, and a\n     * locked destination has no business appearing in or disappearing from it.\n     */\n    const togglePin = (id: string, ownerId?: string) => {\n        if (lockedSet.has(id)) {\n            return;\n        }\n\n        /** The module, when it is a separate row that this page can legitimately move. */\n        const owner = ownerId !== id && ownerId && !lockedSet.has(ownerId) ? ownerId : undefined;\n\n        if (pinnedSet.has(id)) {\n            const removing = new Set([id]);\n\n            if (owner) {\n                const siblings = (scopeById.get(owner) ?? []).filter(\n                    scoped => scoped !== owner && scoped !== id\n                );\n\n                if (!siblings.some(sibling => pinnedSet.has(sibling))) {\n                    removing.add(owner);\n                }\n            }\n\n            onPinnedIdsChange(pinnedIds.filter(pinned => !removing.has(pinned)));\n            return;\n        }\n\n        // Module first, so it reads ahead of its own page in the saved order.\n        const additions = owner && !pinnedSet.has(owner) ? [owner, id] : [id];\n\n        onPinnedIdsChange([...pinnedIds, ...additions]);\n    };\n\n    /*\n     * One proposal for the whole set rather than one per row, so a host that persists on every\n     * change writes once, and every intermediate list — states the user never asked for — never\n     * exists.\n     */\n    const toggleAll = (ids: string[], shouldPin: boolean) => {\n        const actionable = ids.filter(id => !lockedSet.has(id));\n\n        if (!shouldPin) {\n            const removing = new Set(actionable);\n\n            onPinnedIdsChange(pinnedIds.filter(pinned => !removing.has(pinned)));\n            return;\n        }\n\n        const additions = actionable.filter(id => !pinnedSet.has(id));\n\n        if (additions.length > 0) {\n            onPinnedIdsChange([...pinnedIds, ...additions]);\n        }\n    };\n\n    const close = () => {\n        setQuery('');\n        onClose();\n    };\n\n    return (\n        <Dialog\n            open={open}\n            onClose={close}\n            size=\"xlarge\"\n            aria-label=\"All Navigation\"\n            className={styles.dialog}\n            data-cy=\"navigation-catalog-dialog\"\n        >\n            <Dialog.Content className={styles.content}>\n                <div className={styles.body}>\n                    <SearchField\n                        ref={searchRef}\n                        size=\"small\"\n                        className={styles.search}\n                        placeholder=\"Go to ...\"\n                        value={query}\n                        onChange={event => setQuery(event.target.value)}\n                        onClear={() => setQuery('')}\n                        aria-label=\"Go to\"\n                    />\n                    <div\n                        className={classNames(styles.results, isSearching && styles.searchResults)}\n                    >\n                        {visibleGroups.length === 0 ? (\n                            <div className={styles.empty}>\n                                {/*\n                                 * Two different nothings: a search that matched no row, and a host\n                                 * that offered no rows at all. The second is a real state — the\n                                 * catalog is reachable whether or not there is anything in it — and\n                                 * quoting an empty query at the user does not describe it.\n                                 */}\n                                <Text subdued>\n                                    {isSearching ? (\n                                        <Fragment>\n                                            No navigation items match &ldquo;{query}&rdquo;.\n                                        </Fragment>\n                                    ) : (\n                                        'There are no navigation items to show.'\n                                    )}\n                                </Text>\n                            </div>\n                        ) : (\n                            <div className={isSearching ? undefined : styles.columns}>\n                                {visibleGroups.map(group => (\n                                    <div\n                                        key={group.title}\n                                        className={isSearching ? undefined : styles.group}\n                                    >\n                                        {/*\n                                         * Browse uses titled columns. Search stacks matches at full\n                                         * width, keeping only each module's own submenu headings.\n                                         */}\n                                        {!isSearching && (\n                                            <Text\n                                                variant=\"eyebrow\"\n                                                size=\"medium\"\n                                                className={styles.groupTitle}\n                                            >\n                                                {group.title}\n                                            </Text>\n                                        )}\n                                        {group.items.map(item => (\n                                            <CatalogRows\n                                                key={item.id}\n                                                item={item}\n                                                scopeIds={scopeById.get(item.id) ?? [item.id]}\n                                                isPinned={isPinned}\n                                                isLocked={isLocked}\n                                                onTogglePin={togglePin}\n                                                onToggleAll={toggleAll}\n                                                onNavigate={close}\n                                            />\n                                        ))}\n                                    </div>\n                                ))}\n                            </div>\n                        )}\n                    </div>\n                </div>\n            </Dialog.Content>\n            <NavigationCatalogFooter\n                onRestore={\n                    onResetToDefaults &&\n                    (() => {\n                        onResetToDefaults();\n                        // The control disappears with the host's reset; keep focus in the dialog.\n                        searchRef.current?.focus();\n                    })\n                }\n            />\n        </Dialog>\n    );\n};\n"],"names":["Button","Dialog","Icon","SearchField","Text","Tooltip","IconLock","IconStar","IconStarBorder","classNames","Fragment","useMemo","useRef","useState","filterCatalogGroups","getCatalogChildren","getCatalogSubmenuGroups","getCounterTag","BadgeTag","useTitanLayoutContext","NavigationCatalogFooter","styles","LockedPin","Trigger","svg","className","lock","Content","style","pointerEvents","PinToggle","pinned","label","onToggle","toggle","event","preventDefault","stopPropagation","delay","appearance","size","icon","star","starActive","aria-label","aria-pressed","onClick","CatalogRows","item","scopeIds","isPinned","isLocked","onTogglePin","onToggleAll","onNavigate","NavigationComponent","submenuGroups","everything","filter","id","anyPinned","some","allPinned","length","every","tag","counter","div","moduleGroup","row","to","link","title","moduleIcon","inline","moduleTitle","data","badge","map","group","variant","submenuTitle","links","child","qualifiedTitle","childPinned","childTag","childLink","childTitle","NavigationCatalog","open","onClose","groups","pinnedIds","lockedIds","onPinnedIdsChange","onResetToDefaults","query","setQuery","isSearching","trim","searchRef","resolvedGroups","visibleGroups","scopeById","Map","flatMap","items","pinnedSet","Set","lockedSet","has","togglePin","ownerId","owner","undefined","removing","siblings","get","scoped","sibling","add","additions","toggleAll","ids","shouldPin","actionable","close","dialog","data-cy","content","body","ref","search","placeholder","value","onChange","target","onClear","results","searchResults","empty","subdued","columns","groupTitle","onRestore","current","focus"],"mappings":";AAAA,SAASA,MAAM,EAAEC,MAAM,EAAEC,IAAI,EAAEC,WAAW,EAAEC,IAAI,EAAEC,OAAO,QAAQ,uBAAuB;AACxF,OAAOC,cAAc,4DAA4D;AACjF,OAAOC,cAAc,4DAA4D;AACjF,OAAOC,oBAAoB,mEAAmE;AAC9F,OAAOC,gBAAgB,aAAa;AACpC,SAAaC,QAAQ,EAAcC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAC5E,SACIC,mBAAmB,EACnBC,kBAAkB,EAClBC,uBAAuB,QACpB,gCAAgC;AAEvC,SAASC,aAAa,QAAQ,0BAA0B;AACxD,SAASC,QAAQ,QAAQ,kBAAkB;AAE3C,SAASC,qBAAqB,QAAQ,oBAAoB;AAC1D,SAASC,uBAAuB,QAAQ,8BAA8B;AACtE,YAAYC,YAAY,mCAAmC;AAE3D,gFAAgF,GAChF,MAAMC,YAAgB,kBAClB,MAACjB;;0BACG,KAACA,QAAQkB,OAAO;0BACZ,cAAA,KAACrB;oBAAKsB,KAAKlB;oBAAUmB,WAAWJ,OAAOK,IAAI;;;0BAE/C,KAACrB,QAAQsB,OAAO;gBAACC,OAAO;oBAAEC,eAAe;gBAAO;0BAAG;;;;AAa3D,MAAMC,YAAgC,CAAC,EAAEC,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAE;IAC9D,MAAMC,SAAS,CAACC;QACZ,sEAAsE;QACtEA,MAAMC,cAAc;QACpBD,MAAME,eAAe;QACrBJ;IACJ;IAEA,qBACI,MAAC5B;QAAQiC,OAAO;;0BACZ,KAACjC,QAAQkB,OAAO;0BACZ,cAAA,KAACvB;oBACGuC,YAAW;oBACXC,MAAK;oBACLC,MAAMV,WAAW,OAAOxB,WAAWC;oBACnCiB,WAAWhB,WAAWY,OAAOqB,IAAI,EAAEX,UAAUV,OAAOsB,UAAU;oBAC9DC,cAAYZ;oBACZa,gBAAcd;oBACde,SAASZ;;;0BAGjB,KAAC7B,QAAQsB,OAAO;gBAACC,OAAO;oBAAEC,eAAe;gBAAO;0BAC3CE,WAAW,UACN,iCACAA,SACE,0BACA;;;;AAIxB;AAmBA,MAAMgB,cAAoC,CAAC,EACvCC,IAAI,EACJC,QAAQ,EACRC,QAAQ,EACRC,QAAQ,EACRC,WAAW,EACXC,WAAW,EACXC,UAAU,EACb;IACG,MAAM,EAAEC,mBAAmB,EAAE,GAAGpC;IAChC,MAAMqC,gBAAgBxC,wBAAwBgC;IAE9C;;;KAGC,GACD,MAAMS,aAAaR,SAASS,MAAM,CAACC,CAAAA,KAAM,CAACR,SAASQ;IACnD,MAAMC,YAAYH,WAAWI,IAAI,CAACX;IAClC,MAAMY,YAAYL,WAAWM,MAAM,GAAG,KAAKN,WAAWO,KAAK,CAACd;IAC5D,MAAMe,MAAMhD,cAAc+B,KAAKkB,OAAO,EAAElB,KAAKiB,GAAG;IAEhD,qBACI,MAACE;QAAI1C,WAAWJ,OAAO+C,WAAW;;0BAC9B,MAACD;gBAAI1C,WAAWJ,OAAOgD,GAAG;;kCACtB,MAACd;wBACGe,IAAItB,KAAKsB,EAAE;wBACX7C,WAAWJ,OAAOkD,IAAI;wBACtBzB,SAASQ;wBACTV,cAAYI,KAAKwB,KAAK;;4BAErBxB,KAAKP,IAAI,kBACN,KAACvC;gCAAKsB,KAAKwB,KAAKP,IAAI;gCAAED,MAAK;gCAASf,WAAWJ,OAAOoD,UAAU;;0CAEpE,KAACrE;gCAAKsE,MAAM;gCAAClC,MAAK;gCAAQf,WAAWJ,OAAOsD,WAAW;0CAClD3B,KAAKwB,KAAK;;4BAOd,CAAC,CAACP,qBAAO,KAAC/C;gCAAS0D,MAAMX;gCAAKxC,WAAWJ,OAAOwD,KAAK;;;;oBAUzD1B,SAASH,KAAKW,EAAE,kBACb,KAACrC,+BAED,KAACQ;wBACGC,QAAQ+B,YAAY,OAAOF,YAAY,UAAU;wBACjD5B,OACI8B,YACM,CAAC,MAAM,EAAEd,KAAKwB,KAAK,CAAC,oBAAoB,CAAC,GACzC,CAAC,IAAI,EAAExB,KAAKwB,KAAK,CAAC,kBAAkB,CAAC;wBAE/CvC,UAAU,IAAMoB,YAAYI,YAAY,CAACK;;;;YAIpDN,cAAcsB,GAAG,CAACC,CAAAA,sBACf,MAACZ;;wBACIY,MAAMP,KAAK,kBACR,KAACpE;4BAAK4E,SAAQ;4BAAUxC,MAAK;4BAAQf,WAAWJ,OAAO4D,YAAY;sCAC9DF,MAAMP,KAAK;;wBAGnBO,MAAMG,KAAK,CAACJ,GAAG,CAACK,CAAAA;4BACb;;;;;;yBAMC,GACD,MAAMC,iBAAiB,GAAGpC,KAAKwB,KAAK,CAAC,EAAE,EAAEW,MAAMX,KAAK,EAAE;4BACtD,MAAMa,cAAcnC,SAASiC,MAAMxB,EAAE;4BACrC,MAAM2B,WAAWrE,cAAckE,MAAMjB,OAAO,EAAEiB,MAAMlB,GAAG;4BAEvD,qBACI,MAACE;gCAAmB1C,WAAWJ,OAAOgD,GAAG;;kDACrC,MAACd;wCACGe,IAAIa,MAAMb,EAAE;wCACZ7C,WAAWhB,WAAWY,OAAOkD,IAAI,EAAElD,OAAOkE,SAAS;wCACnDzC,SAASQ;wCACTV,cAAYwC;;0DAEZ,KAAChF;gDAAKsE,MAAM;gDAACjD,WAAWJ,OAAOmE,UAAU;0DACpCL,MAAMX,KAAK;;4CAEf,CAAC,CAACc,0BACC,KAACpE;gDAAS0D,MAAMU;gDAAU7D,WAAWJ,OAAOwD,KAAK;;;;oCAGxD1B,SAASgC,MAAMxB,EAAE,kBACd,KAACrC,+BAED,KAACQ;wCACGC,QAAQsD;wCACRrD,OACIqD,cACM,CAAC,MAAM,EAAED,eAAe,oBAAoB,CAAC,GAC7C,CAAC,IAAI,EAAEA,eAAe,kBAAkB,CAAC;wCAEnDnD,UAAU,IAAMmB,YAAY+B,MAAMxB,EAAE,EAAEX,KAAKW,EAAE;;;+BAxB/CwB,MAAMxB,EAAE;wBA6B1B;;mBAhDMoB,MAAMG,KAAK,CAAC,EAAE,CAACvB,EAAE;;;AAqD3C;AAOA;;;;;CAKC,GACD,OAAO,MAAM8B,oBAAgD,CAAC,EAC1DC,IAAI,EACJC,OAAO,EACPC,MAAM,EACNC,SAAS,EACTC,SAAS,EACTC,iBAAiB,EACjBC,iBAAiB,EACpB;IACG,MAAM,CAACC,OAAOC,SAAS,GAAGrF,SAAS;IACnC,MAAMsF,cAAcF,MAAMG,IAAI,GAAGrC,MAAM,GAAG;IAC1C,MAAMsC,YAAYzF,OAAyB;IAE3C;;;;KAIC,GACD,MAAM0F,iBAAiB3F,QAAQ,IAAMiF,UAAU;QAACA;KAAO;IAEvD,MAAMW,gBAAgB5F,QAClB,IAAMG,oBAAoBwF,gBAAgBL,QAC1C;QAACK;QAAgBL;KAAM;IAG3B;;;KAGC,GACD,MAAMO,YAAY7F,QACd,IACI,IAAI8F,IACAH,eACKI,OAAO,CAAC3B,CAAAA,QAASA,MAAM4B,KAAK,EAC5B7B,GAAG,CAAC9B,CAAAA,OAAQ;gBACTA,KAAKW,EAAE;gBACP;oBAACX,KAAKW,EAAE;uBAAK5C,mBAAmBiC,MAAM8B,GAAG,CAACK,CAAAA,QAASA,MAAMxB,EAAE;iBAAE;aAChE,IAEb;QAAC2C;KAAe;IAEpB,MAAMM,YAAYjG,QAAQ,IAAM,IAAIkG,IAAIhB,YAAY;QAACA;KAAU;IAC/D,MAAMiB,YAAYnG,QAAQ,IAAM,IAAIkG,IAAIf,sBAAAA,uBAAAA,YAAa,EAAE,GAAG;QAACA;KAAU;IAErE,MAAM5C,WAAW,CAACS,KAAeiD,UAAUG,GAAG,CAACpD;IAC/C,MAAMR,WAAW,CAACQ,KAAemD,UAAUC,GAAG,CAACpD;IAE/C;;;;;;;;;;;KAWC,GACD,MAAMqD,YAAY,CAACrD,IAAYsD;QAC3B,IAAIH,UAAUC,GAAG,CAACpD,KAAK;YACnB;QACJ;QAEA,gFAAgF,GAChF,MAAMuD,QAAQD,YAAYtD,MAAMsD,WAAW,CAACH,UAAUC,GAAG,CAACE,WAAWA,UAAUE;QAE/E,IAAIP,UAAUG,GAAG,CAACpD,KAAK;YACnB,MAAMyD,WAAW,IAAIP,IAAI;gBAAClD;aAAG;YAE7B,IAAIuD,OAAO;oBACWV;gBAAlB,MAAMa,WAAW,EAACb,iBAAAA,UAAUc,GAAG,CAACJ,oBAAdV,4BAAAA,iBAAwB,EAAE,EAAE9C,MAAM,CAChD6D,CAAAA,SAAUA,WAAWL,SAASK,WAAW5D;gBAG7C,IAAI,CAAC0D,SAASxD,IAAI,CAAC2D,CAAAA,UAAWZ,UAAUG,GAAG,CAACS,WAAW;oBACnDJ,SAASK,GAAG,CAACP;gBACjB;YACJ;YAEAnB,kBAAkBF,UAAUnC,MAAM,CAAC3B,CAAAA,SAAU,CAACqF,SAASL,GAAG,CAAChF;YAC3D;QACJ;QAEA,sEAAsE;QACtE,MAAM2F,YAAYR,SAAS,CAACN,UAAUG,GAAG,CAACG,SAAS;YAACA;YAAOvD;SAAG,GAAG;YAACA;SAAG;QAErEoC,kBAAkB;eAAIF;eAAc6B;SAAU;IAClD;IAEA;;;;KAIC,GACD,MAAMC,YAAY,CAACC,KAAeC;QAC9B,MAAMC,aAAaF,IAAIlE,MAAM,CAACC,CAAAA,KAAM,CAACmD,UAAUC,GAAG,CAACpD;QAEnD,IAAI,CAACkE,WAAW;YACZ,MAAMT,WAAW,IAAIP,IAAIiB;YAEzB/B,kBAAkBF,UAAUnC,MAAM,CAAC3B,CAAAA,SAAU,CAACqF,SAASL,GAAG,CAAChF;YAC3D;QACJ;QAEA,MAAM2F,YAAYI,WAAWpE,MAAM,CAACC,CAAAA,KAAM,CAACiD,UAAUG,GAAG,CAACpD;QAEzD,IAAI+D,UAAU3D,MAAM,GAAG,GAAG;YACtBgC,kBAAkB;mBAAIF;mBAAc6B;aAAU;QAClD;IACJ;IAEA,MAAMK,QAAQ;QACV7B,SAAS;QACTP;IACJ;IAEA,qBACI,MAAC1F;QACGyF,MAAMA;QACNC,SAASoC;QACTvF,MAAK;QACLI,cAAW;QACXnB,WAAWJ,OAAO2G,MAAM;QACxBC,WAAQ;;0BAER,KAAChI,OAAO0B,OAAO;gBAACF,WAAWJ,OAAO6G,OAAO;0BACrC,cAAA,MAAC/D;oBAAI1C,WAAWJ,OAAO8G,IAAI;;sCACvB,KAAChI;4BACGiI,KAAK/B;4BACL7D,MAAK;4BACLf,WAAWJ,OAAOgH,MAAM;4BACxBC,aAAY;4BACZC,OAAOtC;4BACPuC,UAAUrG,CAAAA,QAAS+D,SAAS/D,MAAMsG,MAAM,CAACF,KAAK;4BAC9CG,SAAS,IAAMxC,SAAS;4BACxBtD,cAAW;;sCAEf,KAACuB;4BACG1C,WAAWhB,WAAWY,OAAOsH,OAAO,EAAExC,eAAe9E,OAAOuH,aAAa;sCAExErC,cAAcxC,MAAM,KAAK,kBACtB,KAACI;gCAAI1C,WAAWJ,OAAOwH,KAAK;0CAOxB,cAAA,KAACzI;oCAAK0I,OAAO;8CACR3C,4BACG,MAACzF;;4CAAS;4CAC4BuF;4CAAM;;yCAG5C;;+CAKZ,KAAC9B;gCAAI1C,WAAW0E,cAAcgB,YAAY9F,OAAO0H,OAAO;0CACnDxC,cAAczB,GAAG,CAACC,CAAAA,sBACf,MAACZ;wCAEG1C,WAAW0E,cAAcgB,YAAY9F,OAAO0D,KAAK;;4CAMhD,CAACoB,6BACE,KAAC/F;gDACG4E,SAAQ;gDACRxC,MAAK;gDACLf,WAAWJ,OAAO2H,UAAU;0DAE3BjE,MAAMP,KAAK;;4CAGnBO,MAAM4B,KAAK,CAAC7B,GAAG,CAAC9B,CAAAA;oDAICwD;qEAHd,KAACzD;oDAEGC,MAAMA;oDACNC,QAAQ,GAAEuD,iBAAAA,UAAUc,GAAG,CAACtE,KAAKW,EAAE,eAArB6C,4BAAAA,iBAA0B;wDAACxD,KAAKW,EAAE;qDAAC;oDAC7CT,UAAUA;oDACVC,UAAUA;oDACVC,aAAa4D;oDACb3D,aAAasE;oDACbrE,YAAYyE;mDAPP/E,KAAKW,EAAE;;;uCAlBfoB,MAAMP,KAAK;;;;;;0BAmC5C,KAACpD;gBACG6H,WACIjD,qBACC,CAAA;wBAEG,0EAA0E;oBAC1EK;oBAFAL;qBAEAK,qBAAAA,UAAU6C,OAAO,cAAjB7C,yCAAAA,mBAAmB8C,KAAK;gBAC5B,CAAA;;;;AAKpB,EAAE"}
+{"version":3,"sources":["../../../../src/components/titan-layout/navigation-catalog/navigation-catalog.tsx"],"sourcesContent":["import { Button, Dialog, Icon, SearchField, Text, Tooltip } from '@servicetitan/anvil2';\nimport IconLock from '@servicetitan/anvil2/assets/icons/material/round/lock.svg';\nimport IconStar from '@servicetitan/anvil2/assets/icons/material/round/star.svg';\nimport IconStarBorder from '@servicetitan/anvil2/assets/icons/material/round/star_border.svg';\nimport classNames from 'classnames';\nimport { FC, Fragment, MouseEvent, useMemo, useRef, useState } from 'react';\nimport {\n    filterCatalogGroups,\n    getCatalogChildren,\n    getCatalogSubmenuGroups,\n} from '../../../utils/catalog-groups';\nimport { NavigationItemData } from '../../../utils/navigation';\nimport { getCounterTag } from '../../../utils/side-nav';\nimport { BadgeTag } from '../../badge-tag';\nimport { PinnedNavigationConfig } from '../interface';\nimport { useTitanLayoutContext } from '../layout-context';\nimport { NavigationCatalogFooter } from './navigation-catalog-footer';\nimport * as styles from './navigation-catalog.module.less';\n\n/** Shown in place of the pin control for a destination the user may not unpin. */\nconst LockedPin: FC = () => (\n    <Tooltip>\n        <Tooltip.Trigger>\n            <Icon svg={IconLock} className={styles.lock} />\n        </Tooltip.Trigger>\n        <Tooltip.Content style={{ pointerEvents: 'none' }}>\n            Cannot be removed from Favorites\n        </Tooltip.Content>\n    </Tooltip>\n);\n\ninterface PinToggleProps {\n    /** `mixed` is a module on the rail with only some of its pages: an outline, still active. */\n    pinned: boolean | 'mixed';\n    label: string;\n    onToggle: () => void;\n}\n\nconst PinToggle: FC<PinToggleProps> = ({ pinned, label, onToggle }) => {\n    const toggle = (event: MouseEvent) => {\n        // The control sits inside the row but is not a navigation affordance.\n        event.preventDefault();\n        event.stopPropagation();\n        onToggle();\n    };\n\n    return (\n        <Tooltip delay={300}>\n            <Tooltip.Trigger>\n                <Button\n                    appearance=\"ghost\"\n                    size=\"small\"\n                    icon={pinned === true ? IconStar : IconStarBorder}\n                    className={classNames(styles.star, pinned && styles.starActive)}\n                    aria-label={label}\n                    aria-pressed={pinned}\n                    data-pendo=\"global-nav-favorite-star\"\n                    onClick={toggle}\n                />\n            </Tooltip.Trigger>\n            <Tooltip.Content style={{ pointerEvents: 'none' }}>\n                {pinned ? 'Remove from Favorites' : 'Add to Favorites'}\n            </Tooltip.Content>\n        </Tooltip>\n    );\n};\n\ninterface CatalogRowsProps {\n    item: NavigationItemData;\n    /**\n     * Every id the module's own control covers, taken from the unfiltered item.\n     *\n     * `item` may have been narrowed by the search, so deriving this from it would let the control\n     * act on only the pages that happen to be visible — silently stranding the rest.\n     */\n    scopeIds: string[];\n    isPinned: (id: string) => boolean;\n    isLocked: (id: string) => boolean;\n    onToggleModule: (moduleId: string) => void;\n    onTogglePage: (id: string, moduleId: string) => void;\n    onNavigate: () => void;\n}\n\nconst CatalogRows: FC<CatalogRowsProps> = ({\n    item,\n    scopeIds,\n    isPinned,\n    isLocked,\n    onToggleModule,\n    onTogglePage,\n    onNavigate,\n}) => {\n    const { NavigationComponent } = useTitanLayoutContext();\n    const submenuGroups = getCatalogSubmenuGroups(item);\n\n    /*\n     * A pinned module id means the whole module, every page included. Pinned page ids without\n     * their module mean the module is on the rail carrying only those pages.\n     */\n    const isWholeModule = isPinned(item.id);\n    const isOnRail = scopeIds.some(isPinned);\n    const pageIds = scopeIds.filter(id => id !== item.id && !isLocked(id));\n    const isFullyPinned = isWholeModule || (pageIds.length > 0 && pageIds.every(isPinned));\n    const tag = getCounterTag(item.counter, item.tag);\n\n    return (\n        <div className={styles.moduleGroup}>\n            <div className={styles.row}>\n                <NavigationComponent\n                    to={item.to}\n                    className={styles.link}\n                    onClick={onNavigate}\n                    aria-label={item.title}\n                >\n                    {item.icon && (\n                        <Icon svg={item.icon} size=\"medium\" className={styles.moduleIcon} />\n                    )}\n                    <Text inline size=\"small\" className={styles.moduleTitle}>\n                        {item.title}\n                    </Text>\n                    {/*\n                     * The same counter the rail shows, so a destination that is asking for\n                     * attention still says so here — the catalog is the only place an unfavourited\n                     * one is visible at all.\n                     */}\n                    {!!tag && <BadgeTag data={tag} className={styles.badge} />}\n                </NavigationComponent>\n                {/*\n                 * Filled when every page is favourited, an outline when only some are. Either way\n                 * the module is on the rail, so one click takes it off with all of its pages.\n                 */}\n                {isLocked(item.id) ? (\n                    <LockedPin />\n                ) : (\n                    <PinToggle\n                        pinned={isFullyPinned ? true : isOnRail ? 'mixed' : false}\n                        label={\n                            isOnRail\n                                ? `Unpin ${item.title} from the navigation`\n                                : `Pin ${item.title} to the navigation`\n                        }\n                        onToggle={() => onToggleModule(item.id)}\n                    />\n                )}\n            </div>\n            {submenuGroups.map(group => (\n                <div key={group.links[0].id}>\n                    {group.title && (\n                        <Text variant=\"eyebrow\" size=\"small\" className={styles.submenuTitle}>\n                            {group.title}\n                        </Text>\n                    )}\n                    {group.links.map(child => {\n                        /*\n                         * Page titles are only unique within their item — \"Settings\" and \"Reports\" recur\n                         * across the catalog — and the row that tells them apart is a separate element, so\n                         * it is not part of any of these names. Anything reading the rows on their own, a\n                         * screen reader running through the links or a voice command naming one, would\n                         * otherwise be given the same name several times.\n                         */\n                        const qualifiedTitle = `${item.title}: ${child.title}`;\n                        const childPinned = isWholeModule || isPinned(child.id);\n                        const childTag = getCounterTag(child.counter, child.tag);\n\n                        return (\n                            <div key={child.id} className={styles.row}>\n                                <NavigationComponent\n                                    to={child.to}\n                                    className={classNames(styles.link, styles.childLink)}\n                                    onClick={onNavigate}\n                                    aria-label={qualifiedTitle}\n                                >\n                                    <Text inline className={styles.childTitle}>\n                                        {child.title}\n                                    </Text>\n                                    {!!childTag && (\n                                        <BadgeTag data={childTag} className={styles.badge} />\n                                    )}\n                                </NavigationComponent>\n                                {isLocked(child.id) ? (\n                                    <LockedPin />\n                                ) : (\n                                    <PinToggle\n                                        pinned={childPinned}\n                                        label={\n                                            childPinned\n                                                ? `Unpin ${qualifiedTitle} from the navigation`\n                                                : `Pin ${qualifiedTitle} to the navigation`\n                                        }\n                                        onToggle={() => onTogglePage(child.id, item.id)}\n                                    />\n                                )}\n                            </div>\n                        );\n                    })}\n                </div>\n            ))}\n        </div>\n    );\n};\n\nexport interface NavigationCatalogProps extends PinnedNavigationConfig {\n    open: boolean;\n    onClose: () => void;\n}\n\n/**\n * Every destination the host offers, grouped into sections, with a star on every row.\n *\n * The catalog shows what it is given and nothing more — the host has already resolved what this\n * user may reach, so the catalog cannot offer a destination they do not have.\n */\nexport const NavigationCatalog: FC<NavigationCatalogProps> = ({\n    open,\n    onClose,\n    groups,\n    pinnedIds,\n    lockedIds,\n    onPinnedIdsChange,\n    onResetToDefaults,\n}) => {\n    const [query, setQuery] = useState('');\n    const isSearching = query.trim().length > 0;\n    const searchRef = useRef<HTMLInputElement>(null);\n\n    /*\n     * Resolved here rather than by the host, so a catalog that costs requests to enumerate is paid\n     * for on opening the dialog and not on every page load. This component is mounted only while\n     * open, so the call happens once per open unless the host changes the function.\n     */\n    const resolvedGroups = useMemo(() => groups(), [groups]);\n\n    const visibleGroups = useMemo(\n        () => filterCatalogGroups(resolvedGroups, query),\n        [resolvedGroups, query]\n    );\n\n    /*\n     * The pin scope of every item, keyed by id and built before the search narrows anything, so a\n     * module's control still covers the pages a query is currently hiding.\n     */\n    const scopeById = useMemo(\n        () =>\n            new Map(\n                resolvedGroups\n                    .flatMap(group => group.items)\n                    .map(item => [\n                        item.id,\n                        [item.id, ...getCatalogChildren(item).map(child => child.id)],\n                    ])\n            ),\n        [resolvedGroups]\n    );\n    const pinnedSet = useMemo(() => new Set(pinnedIds), [pinnedIds]);\n    const lockedSet = useMemo(() => new Set(lockedIds ?? []), [lockedIds]);\n\n    const isPinned = (id: string) => pinnedSet.has(id);\n    const isLocked = (id: string) => lockedSet.has(id);\n\n    /*\n     * The saved list follows the host's model: a module id pins the whole module, and page ids\n     * without their module pin the module carrying only those pages. A module id is therefore\n     * never saved next to its own page ids — the host would read that as the whole module.\n     *\n     * Locked ids never reach a proposal. The controls that would move them are not rendered, so\n     * that part is belt and braces — but the host's list is the thing that gets persisted, and a\n     * locked destination has no business appearing in or disappearing from it.\n     */\n\n    /** Takes a module off the rail with all of its pages, or puts the whole module on it. */\n    const toggleModule = (moduleId: string) => {\n        if (lockedSet.has(moduleId)) {\n            return;\n        }\n\n        const scope = (scopeById.get(moduleId) ?? [moduleId]).filter(id => !lockedSet.has(id));\n        const scopeSet = new Set(scope);\n        const withoutModule = pinnedIds.filter(pinned => !scopeSet.has(pinned));\n\n        onPinnedIdsChange(\n            scope.some(id => pinnedSet.has(id)) ? withoutModule : [...withoutModule, moduleId]\n        );\n    };\n\n    /**\n     * Favourites or unfavourites a single page.\n     *\n     * Unstarring a page of a wholly favourited module narrows the module to the rest of its pages,\n     * in the module's place; unstarring its last page takes the module off the rail.\n     */\n    const togglePage = (id: string, moduleId: string) => {\n        if (lockedSet.has(id)) {\n            return;\n        }\n\n        const scope = scopeById.get(moduleId) ?? [moduleId];\n        const pages = scope.filter(scoped => scoped !== moduleId && !lockedSet.has(scoped));\n\n        if (pinnedSet.has(moduleId) && !lockedSet.has(moduleId)) {\n            const scopeSet = new Set(scope);\n            const rest = pages.filter(page => page !== id);\n\n            onPinnedIdsChange(\n                pinnedIds.flatMap(pinned =>\n                    pinned === moduleId ? rest : scopeSet.has(pinned) ? [] : [pinned]\n                )\n            );\n            return;\n        }\n\n        onPinnedIdsChange(\n            pinnedSet.has(id) ? pinnedIds.filter(pinned => pinned !== id) : [...pinnedIds, id]\n        );\n    };\n\n    const close = () => {\n        setQuery('');\n        onClose();\n    };\n\n    return (\n        <Dialog\n            open={open}\n            onClose={close}\n            size=\"xlarge\"\n            aria-label=\"All Navigation\"\n            className={styles.dialog}\n            data-cy=\"navigation-catalog-dialog\"\n        >\n            <Dialog.Content className={styles.content}>\n                <div className={styles.body}>\n                    <SearchField\n                        ref={searchRef}\n                        size=\"small\"\n                        className={styles.search}\n                        placeholder=\"Go to ...\"\n                        value={query}\n                        onChange={event => setQuery(event.target.value)}\n                        onClear={() => setQuery('')}\n                        aria-label=\"Go to\"\n                    />\n                    <div\n                        className={classNames(styles.results, isSearching && styles.searchResults)}\n                    >\n                        {visibleGroups.length === 0 ? (\n                            <div className={styles.empty}>\n                                {/*\n                                 * Two different nothings: a search that matched no row, and a host\n                                 * that offered no rows at all. The second is a real state — the\n                                 * catalog is reachable whether or not there is anything in it — and\n                                 * quoting an empty query at the user does not describe it.\n                                 */}\n                                <Text subdued>\n                                    {isSearching ? (\n                                        <Fragment>\n                                            No navigation items match &ldquo;{query}&rdquo;.\n                                        </Fragment>\n                                    ) : (\n                                        'There are no navigation items to show.'\n                                    )}\n                                </Text>\n                            </div>\n                        ) : (\n                            <div className={isSearching ? undefined : styles.columns}>\n                                {visibleGroups.map(group => (\n                                    <div\n                                        key={group.title}\n                                        className={isSearching ? undefined : styles.group}\n                                    >\n                                        {/*\n                                         * Browse uses titled columns. Search stacks matches at full\n                                         * width, keeping only each module's own submenu headings.\n                                         */}\n                                        {!isSearching && (\n                                            <Text\n                                                variant=\"eyebrow\"\n                                                size=\"medium\"\n                                                className={styles.groupTitle}\n                                            >\n                                                {group.title}\n                                            </Text>\n                                        )}\n                                        {group.items.map(item => (\n                                            <CatalogRows\n                                                key={item.id}\n                                                item={item}\n                                                scopeIds={scopeById.get(item.id) ?? [item.id]}\n                                                isPinned={isPinned}\n                                                isLocked={isLocked}\n                                                onToggleModule={toggleModule}\n                                                onTogglePage={togglePage}\n                                                onNavigate={close}\n                                            />\n                                        ))}\n                                    </div>\n                                ))}\n                            </div>\n                        )}\n                    </div>\n                </div>\n            </Dialog.Content>\n            <NavigationCatalogFooter\n                onRestore={\n                    onResetToDefaults &&\n                    (() => {\n                        onResetToDefaults();\n                        // The control disappears with the host's reset; keep focus in the dialog.\n                        searchRef.current?.focus();\n                    })\n                }\n            />\n        </Dialog>\n    );\n};\n"],"names":["Button","Dialog","Icon","SearchField","Text","Tooltip","IconLock","IconStar","IconStarBorder","classNames","Fragment","useMemo","useRef","useState","filterCatalogGroups","getCatalogChildren","getCatalogSubmenuGroups","getCounterTag","BadgeTag","useTitanLayoutContext","NavigationCatalogFooter","styles","LockedPin","Trigger","svg","className","lock","Content","style","pointerEvents","PinToggle","pinned","label","onToggle","toggle","event","preventDefault","stopPropagation","delay","appearance","size","icon","star","starActive","aria-label","aria-pressed","data-pendo","onClick","CatalogRows","item","scopeIds","isPinned","isLocked","onToggleModule","onTogglePage","onNavigate","NavigationComponent","submenuGroups","isWholeModule","id","isOnRail","some","pageIds","filter","isFullyPinned","length","every","tag","counter","div","moduleGroup","row","to","link","title","moduleIcon","inline","moduleTitle","data","badge","map","group","variant","submenuTitle","links","child","qualifiedTitle","childPinned","childTag","childLink","childTitle","NavigationCatalog","open","onClose","groups","pinnedIds","lockedIds","onPinnedIdsChange","onResetToDefaults","query","setQuery","isSearching","trim","searchRef","resolvedGroups","visibleGroups","scopeById","Map","flatMap","items","pinnedSet","Set","lockedSet","has","toggleModule","moduleId","scope","get","scopeSet","withoutModule","togglePage","pages","scoped","rest","page","close","dialog","data-cy","content","body","ref","search","placeholder","value","onChange","target","onClear","results","searchResults","empty","subdued","undefined","columns","groupTitle","onRestore","current","focus"],"mappings":"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"}

package/dist/utils/__tests__/side-nav.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=side-nav.test.d.ts.map

package/dist/utils/__tests__/side-nav.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-nav.test.d.ts","sourceRoot":"","sources":["../../../src/utils/__tests__/side-nav.test.ts"],"names":[],"mappings":""}

package/dist/utils/side-nav.d.ts

@@ -1,6 +1,23 @@
 import { CounterTagProps } from '../components/counter-tag';
 import { CounterTagData, CounterTagValue } from './counter-tag';
 import { NavigationSubmenuData } from './navigation';
+/**
+ * A module with sub-items always routes to the first one, in the nav's existing order, rather
+ * than whatever destination the host configured for the module row itself (3.5a). A host-supplied
+ * `to` only applies to modules with no submenu.
+ */
+export declare function getModuleDestination(to: string, submenu: NavigationSubmenuData | undefined): string;
+/**
+ * Routing a module row to its first sub-item (see `getModuleDestination`) means the row's `to` no
+ * longer identifies the module for a host that has no explicit `isActive` of its own — the default
+ * "compare href to pathname" behavior would then only match the first sub-item's page, not the rest
+ * of the module. Synthesize an equivalent match across the module's own `to` and every sub-item
+ * instead, so the row still highlights on any of the module's pages, not just the first.
+ *
+ * Returns `undefined` when there's nothing to match, so a host can still supply its own `isActive`
+ * and take precedence (this only fills the gap left by the default behavior, it doesn't replace it).
+ */
+export declare function getModuleActiveMatcher(to: string, submenu: NavigationSubmenuData | undefined): ((pathname: string) => boolean) | undefined;
 export declare function getSubmenuGroupTag(submenu: NavigationSubmenuData | undefined, defaultTag: CounterTagProps | undefined): CounterTagProps | undefined;
 export declare const getCounterTag: (counter: CounterTagValue | undefined, tag?: CounterTagData) => CounterTagProps | undefined;
 //# sourceMappingURL=side-nav.d.ts.map

package/dist/utils/side-nav.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"side-nav.d.ts","sourceRoot":"","sources":["../../src/utils/side-nav.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAChE,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAErD,wBAAgB,kBAAkB,CAC9B,OAAO,EAAE,qBAAqB,GAAG,SAAS,EAC1C,UAAU,EAAE,eAAe,GAAG,SAAS,GACxC,eAAe,GAAG,SAAS,CAyB7B;AAED,eAAO,MAAM,aAAa,GACtB,SAAS,eAAe,GAAG,SAAS,EACpC,MAAM,cAAc,KACrB,eAAe,GAAG,SAIpB,CAAC"}
+{"version":3,"file":"side-nav.d.ts","sourceRoot":"","sources":["../../src/utils/side-nav.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAChE,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAErD;;;;GAIG;AACH,wBAAgB,oBAAoB,CAChC,EAAE,EAAE,MAAM,EACV,OAAO,EAAE,qBAAqB,GAAG,SAAS,GAC3C,MAAM,CAQR;AAED;;;;;;;;;GASG;AACH,wBAAgB,sBAAsB,CAClC,EAAE,EAAE,MAAM,EACV,OAAO,EAAE,qBAAqB,GAAG,SAAS,GAC3C,CAAC,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,GAAG,SAAS,CAS7C;AAED,wBAAgB,kBAAkB,CAC9B,OAAO,EAAE,qBAAqB,GAAG,SAAS,EAC1C,UAAU,EAAE,eAAe,GAAG,SAAS,GACxC,eAAe,GAAG,SAAS,CAyB7B;AAED,eAAO,MAAM,aAAa,GACtB,SAAS,eAAe,GAAG,SAAS,EACpC,MAAM,cAAc,KACrB,eAAe,GAAG,SAIpB,CAAC"}

package/dist/utils/side-nav.js

@@ -1,3 +1,35 @@
+/**
+ * A module with sub-items always routes to the first one, in the nav's existing order, rather
+ * than whatever destination the host configured for the module row itself (3.5a). A host-supplied
+ * `to` only applies to modules with no submenu.
+ */ export function getModuleDestination(to, submenu) {
+    var _ref;
+    for (const group of (_ref = submenu === null || submenu === void 0 ? void 0 : submenu.groups) !== null && _ref !== void 0 ? _ref : []){
+        if (group.links.length > 0) {
+            return group.links[0].to;
+        }
+    }
+    return to;
+}
+/**
+ * Routing a module row to its first sub-item (see `getModuleDestination`) means the row's `to` no
+ * longer identifies the module for a host that has no explicit `isActive` of its own — the default
+ * "compare href to pathname" behavior would then only match the first sub-item's page, not the rest
+ * of the module. Synthesize an equivalent match across the module's own `to` and every sub-item
+ * instead, so the row still highlights on any of the module's pages, not just the first.
+ *
+ * Returns `undefined` when there's nothing to match, so a host can still supply its own `isActive`
+ * and take precedence (this only fills the gap left by the default behavior, it doesn't replace it).
+ */ export function getModuleActiveMatcher(to, submenu) {
+    var _ref;
+    const candidates = [
+        ...to ? [
+            to
+        ] : [],
+        ...(_ref = submenu === null || submenu === void 0 ? void 0 : submenu.groups.flatMap((group)=>group.links.map((link)=>link.to))) !== null && _ref !== void 0 ? _ref : []
+    ];
+    return candidates.length > 0 ? (pathname)=>candidates.some((candidate)=>pathname.startsWith(candidate)) : undefined;
+}
 export function getSubmenuGroupTag(submenu, defaultTag) {
     if (!submenu) {
         return defaultTag;

package/dist/utils/side-nav.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/side-nav.ts"],"sourcesContent":["import { CounterTagProps } from '../components/counter-tag';\nimport { CounterTagData, CounterTagValue } from './counter-tag';\nimport { NavigationSubmenuData } from './navigation';\n\nexport function getSubmenuGroupTag(\n    submenu: NavigationSubmenuData | undefined,\n    defaultTag: CounterTagProps | undefined\n): CounterTagProps | undefined {\n    if (!submenu) {\n        return defaultTag;\n    }\n\n    let tagValue: number | boolean | undefined = undefined;\n\n    for (const group of submenu.groups) {\n        for (const link of group.links) {\n            const ltv: number | boolean | undefined = link.counter ?? link.tag?.value;\n\n            if (ltv) {\n                if (typeof ltv === 'number') {\n                    if (typeof tagValue !== 'number') {\n                        tagValue = 0;\n                    }\n                    tagValue += ltv;\n                } else if (typeof tagValue !== 'number') {\n                    tagValue = true;\n                }\n            }\n        }\n    }\n\n    return tagValue ? getCounterTag(tagValue) : defaultTag;\n}\n\nexport const getCounterTag = (\n    counter: CounterTagValue | undefined,\n    tag?: CounterTagData\n): CounterTagProps | undefined => {\n    const value = counter ?? tag?.value;\n\n    return value ? { value, className: '' } : undefined;\n};\n"],"names":["getSubmenuGroupTag","submenu","defaultTag","tagValue","undefined","group","groups","link","links","ltv","counter","tag","value","getCounterTag","className"],"mappings":"AAIA,OAAO,SAASA,mBACZC,OAA0C,EAC1CC,UAAuC;IAEvC,IAAI,CAACD,SAAS;QACV,OAAOC;IACX;IAEA,IAAIC,WAAyCC;IAE7C,KAAK,MAAMC,SAASJ,QAAQK,MAAM,CAAE;QAChC,KAAK,MAAMC,QAAQF,MAAMG,KAAK,CAAE;gBACcD;gBAAgBA;YAA1D,MAAME,OAAoCF,gBAAAA,KAAKG,OAAO,cAAZH,2BAAAA,iBAAgBA,YAAAA,KAAKI,GAAG,cAARJ,gCAAAA,UAAUK,KAAK;YAEzE,IAAIH,KAAK;gBACL,IAAI,OAAOA,QAAQ,UAAU;oBACzB,IAAI,OAAON,aAAa,UAAU;wBAC9BA,WAAW;oBACf;oBACAA,YAAYM;gBAChB,OAAO,IAAI,OAAON,aAAa,UAAU;oBACrCA,WAAW;gBACf;YACJ;QACJ;IACJ;IAEA,OAAOA,WAAWU,cAAcV,YAAYD;AAChD;AAEA,OAAO,MAAMW,gBAAgB,CACzBH,SACAC;IAEA,MAAMC,QAAQF,oBAAAA,qBAAAA,UAAWC,gBAAAA,0BAAAA,IAAKC,KAAK;IAEnC,OAAOA,QAAQ;QAAEA;QAAOE,WAAW;IAAG,IAAIV;AAC9C,EAAE"}
+{"version":3,"sources":["../../src/utils/side-nav.ts"],"sourcesContent":["import { CounterTagProps } from '../components/counter-tag';\nimport { CounterTagData, CounterTagValue } from './counter-tag';\nimport { NavigationSubmenuData } from './navigation';\n\n/**\n * A module with sub-items always routes to the first one, in the nav's existing order, rather\n * than whatever destination the host configured for the module row itself (3.5a). A host-supplied\n * `to` only applies to modules with no submenu.\n */\nexport function getModuleDestination(\n    to: string,\n    submenu: NavigationSubmenuData | undefined\n): string {\n    for (const group of submenu?.groups ?? []) {\n        if (group.links.length > 0) {\n            return group.links[0].to;\n        }\n    }\n\n    return to;\n}\n\n/**\n * Routing a module row to its first sub-item (see `getModuleDestination`) means the row's `to` no\n * longer identifies the module for a host that has no explicit `isActive` of its own — the default\n * \"compare href to pathname\" behavior would then only match the first sub-item's page, not the rest\n * of the module. Synthesize an equivalent match across the module's own `to` and every sub-item\n * instead, so the row still highlights on any of the module's pages, not just the first.\n *\n * Returns `undefined` when there's nothing to match, so a host can still supply its own `isActive`\n * and take precedence (this only fills the gap left by the default behavior, it doesn't replace it).\n */\nexport function getModuleActiveMatcher(\n    to: string,\n    submenu: NavigationSubmenuData | undefined\n): ((pathname: string) => boolean) | undefined {\n    const candidates = [\n        ...(to ? [to] : []),\n        ...(submenu?.groups.flatMap(group => group.links.map(link => link.to)) ?? []),\n    ];\n\n    return candidates.length > 0\n        ? (pathname: string) => candidates.some(candidate => pathname.startsWith(candidate))\n        : undefined;\n}\n\nexport function getSubmenuGroupTag(\n    submenu: NavigationSubmenuData | undefined,\n    defaultTag: CounterTagProps | undefined\n): CounterTagProps | undefined {\n    if (!submenu) {\n        return defaultTag;\n    }\n\n    let tagValue: number | boolean | undefined = undefined;\n\n    for (const group of submenu.groups) {\n        for (const link of group.links) {\n            const ltv: number | boolean | undefined = link.counter ?? link.tag?.value;\n\n            if (ltv) {\n                if (typeof ltv === 'number') {\n                    if (typeof tagValue !== 'number') {\n                        tagValue = 0;\n                    }\n                    tagValue += ltv;\n                } else if (typeof tagValue !== 'number') {\n                    tagValue = true;\n                }\n            }\n        }\n    }\n\n    return tagValue ? getCounterTag(tagValue) : defaultTag;\n}\n\nexport const getCounterTag = (\n    counter: CounterTagValue | undefined,\n    tag?: CounterTagData\n): CounterTagProps | undefined => {\n    const value = counter ?? tag?.value;\n\n    return value ? { value, className: '' } : undefined;\n};\n"],"names":["getModuleDestination","to","submenu","group","groups","links","length","getModuleActiveMatcher","candidates","flatMap","map","link","pathname","some","candidate","startsWith","undefined","getSubmenuGroupTag","defaultTag","tagValue","ltv","counter","tag","value","getCounterTag","className"],"mappings":"AAIA;;;;CAIC,GACD,OAAO,SAASA,qBACZC,EAAU,EACVC,OAA0C;;IAE1C,KAAK,MAAMC,iBAASD,oBAAAA,8BAAAA,QAASE,MAAM,uCAAI,EAAE,CAAE;QACvC,IAAID,MAAME,KAAK,CAACC,MAAM,GAAG,GAAG;YACxB,OAAOH,MAAME,KAAK,CAAC,EAAE,CAACJ,EAAE;QAC5B;IACJ;IAEA,OAAOA;AACX;AAEA;;;;;;;;;CASC,GACD,OAAO,SAASM,uBACZN,EAAU,EACVC,OAA0C;;IAE1C,MAAMM,aAAa;WACXP,KAAK;YAACA;SAAG,GAAG,EAAE;mBACdC,oBAAAA,8BAAAA,QAASE,MAAM,CAACK,OAAO,CAACN,CAAAA,QAASA,MAAME,KAAK,CAACK,GAAG,CAACC,CAAAA,OAAQA,KAAKV,EAAE,yCAAM,EAAE;KAC/E;IAED,OAAOO,WAAWF,MAAM,GAAG,IACrB,CAACM,WAAqBJ,WAAWK,IAAI,CAACC,CAAAA,YAAaF,SAASG,UAAU,CAACD,cACvEE;AACV;AAEA,OAAO,SAASC,mBACZf,OAA0C,EAC1CgB,UAAuC;IAEvC,IAAI,CAAChB,SAAS;QACV,OAAOgB;IACX;IAEA,IAAIC,WAAyCH;IAE7C,KAAK,MAAMb,SAASD,QAAQE,MAAM,CAAE;QAChC,KAAK,MAAMO,QAAQR,MAAME,KAAK,CAAE;gBACcM;gBAAgBA;YAA1D,MAAMS,OAAoCT,gBAAAA,KAAKU,OAAO,cAAZV,2BAAAA,iBAAgBA,YAAAA,KAAKW,GAAG,cAARX,gCAAAA,UAAUY,KAAK;YAEzE,IAAIH,KAAK;gBACL,IAAI,OAAOA,QAAQ,UAAU;oBACzB,IAAI,OAAOD,aAAa,UAAU;wBAC9BA,WAAW;oBACf;oBACAA,YAAYC;gBAChB,OAAO,IAAI,OAAOD,aAAa,UAAU;oBACrCA,WAAW;gBACf;YACJ;QACJ;IACJ;IAEA,OAAOA,WAAWK,cAAcL,YAAYD;AAChD;AAEA,OAAO,MAAMM,gBAAgB,CACzBH,SACAC;IAEA,MAAMC,QAAQF,oBAAAA,qBAAAA,UAAWC,gBAAAA,0BAAAA,IAAKC,KAAK;IAEnC,OAAOA,QAAQ;QAAEA;QAAOE,WAAW;IAAG,IAAIT;AAC9C,EAAE"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/navigation",
-    "version": "14.4.0",
+    "version": "14.5.1",
     "description": "Navigation components",
     "repository": {
         "type": "git",
@@ -35,5 +35,5 @@
         "less": true,
         "webpack": false
     },
-    "gitHead": "b64111bc6e95671da2480fa57b27a09c85520c4b"
+    "gitHead": "641fcf58999dd57e39c199ca97fddfc0aa224a4c"
 }

package/src/components/titan-layout/__tests__/navigation-catalog-reset.test.tsx

@@ -133,22 +133,74 @@ it('leaves favorites untouched until the host applies the reset', () => {
     const props = renderCatalog();
     click(button('Restore Default Favorites')!);
     click(button('Restore')!);
-    /*
-     * Fully controlled: the catalog has proposed nothing, so the rows still read as they did —
-     * `mixed` here, because two of Marketing's three ids are favourited and not the third.
-     */
-    expect(marketingStar().getAttribute('aria-pressed')).toBe('mixed');
+    // Fully controlled: the catalog has proposed nothing, so the rows still read as they did.
+    expect(marketingStar().getAttribute('aria-pressed')).toBe('true');
     expect(props.onPinnedIdsChange).not.toHaveBeenCalled();
 });
 
 it('keeps star edits on onPinnedIdsChange without calling the reset handler', () => {
     const props = renderCatalog();
-    // A partly favourited module completes itself rather than clearing: campaigns joins the list.
     click(marketingStar());
-    expect(props.onPinnedIdsChange).toHaveBeenCalledWith(['marketing', 'overview', 'campaigns']);
+    expect(props.onPinnedIdsChange).toHaveBeenCalledWith([]);
     expect(props.onResetToDefaults).not.toHaveBeenCalled();
 });
 
+describe('favourite stars', () => {
+    const star = (label: string) =>
+        container.querySelector(`button[aria-label="${label}"]`)?.getAttribute('aria-pressed');
+    const clickStar = (label: string) =>
+        click(container.querySelector(`button[aria-label="${label}"]`)!);
+
+    it('pins only the page, not its module, when one page is starred', () => {
+        const props = renderCatalog({ pinnedIds: ['other'] });
+        clickStar('Pin Marketing: Campaigns to the navigation');
+        expect(props.onPinnedIdsChange).toHaveBeenCalledWith(['other', 'campaigns']);
+    });
+
+    it('shows a module pinned by its id alone as filled, with every page starred', () => {
+        renderCatalog({ pinnedIds: ['marketing'] });
+        expect(star('Unpin Marketing from the navigation')).toBe('true');
+        expect(star('Unpin Marketing: Overview from the navigation')).toBe('true');
+        expect(star('Unpin Marketing: Campaigns from the navigation')).toBe('true');
+    });
+
+    it('shows a module on the rail through one page as mixed, with only that page starred', () => {
+        renderCatalog({ pinnedIds: ['overview'] });
+        expect(star('Unpin Marketing from the navigation')).toBe('mixed');
+        expect(star('Unpin Marketing: Overview from the navigation')).toBe('true');
+        expect(star('Pin Marketing: Campaigns to the navigation')).toBe('false');
+    });
+
+    it('shows a module as filled once every page is starred on its own', () => {
+        renderCatalog({ pinnedIds: ['overview', 'campaigns'] });
+        expect(star('Unpin Marketing from the navigation')).toBe('true');
+    });
+
+    it('removes a partly favourited module and its pages in one click', () => {
+        const props = renderCatalog({ pinnedIds: ['other', 'overview'] });
+        clickStar('Unpin Marketing from the navigation');
+        expect(props.onPinnedIdsChange).toHaveBeenCalledWith(['other']);
+    });
+
+    it('pins an unfavourited module by its id alone', () => {
+        const props = renderCatalog({ pinnedIds: [] });
+        clickStar('Pin Marketing to the navigation');
+        expect(props.onPinnedIdsChange).toHaveBeenCalledWith(['marketing']);
+    });
+
+    it('narrows a whole module to its remaining pages when one page is unstarred', () => {
+        const props = renderCatalog({ pinnedIds: ['a', 'marketing', 'b'] });
+        clickStar('Unpin Marketing: Overview from the navigation');
+        expect(props.onPinnedIdsChange).toHaveBeenCalledWith(['a', 'campaigns', 'b']);
+    });
+
+    it('takes the module off the rail when its last page is unstarred', () => {
+        const props = renderCatalog({ pinnedIds: ['overview'] });
+        clickStar('Unpin Marketing: Overview from the navigation');
+        expect(props.onPinnedIdsChange).toHaveBeenCalledWith([]);
+    });
+});
+
 it('hides restore when the host does not offer one', () => {
     renderCatalog({ onResetToDefaults: undefined });
     expect(button('Restore Default Favorites')).toBeUndefined();

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

@@ -401,7 +401,6 @@
     background-color: @bg-color;
 
     .toggle-wrapper {
-        display: flex;
         padding: @spacing-1 @spacing-1 @spacing-1 14px;
     }
 
@@ -620,6 +619,7 @@
 
     .submenu-popover-title[data-anv][data-anv] {
         color: @color-white;
+        font-size: @typescale-2;
         margin-bottom: @spacing-0;
         margin-top: @spacing-1;
         padding: @spacing-1;

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

@@ -1,15 +1,20 @@
-import { Button, Divider, Icon, Popover, Text, ThemeProvider } from '@servicetitan/anvil2';
+import { Button, Divider, Flex, Icon, Popover, Text, ThemeProvider } from '@servicetitan/anvil2';
 import SvgClose from '@servicetitan/anvil2/assets/icons/material/round/close.svg';
 import SvgCollapseAll from '@servicetitan/anvil2/assets/icons/material/round/unfold_less.svg';
 import SvgExpandAll from '@servicetitan/anvil2/assets/icons/material/round/unfold_more.svg';
 import SvgCollapse from '@servicetitan/anvil2/assets/icons/st/gnav_menu_collapse.svg';
 import SvgExpand from '@servicetitan/anvil2/assets/icons/st/gnav_menu_expand.svg';
 import classNames from 'classnames';
-import { Children, FC, Fragment, ReactElement, isValidElement } from 'react';
+import { Children, FC, Fragment, ReactElement, isValidElement, useCallback, useRef } from 'react';
 import { NavigationItemData, NavigationSubmenuData } from '../../utils/navigation';
 import { NavLinkComponentProps } from '../../utils/navigation-context';
 import { getModuleNotificationCount } from '../../utils/navigation-notifications';
-import { getCounterTag, getSubmenuGroupTag } from '../../utils/side-nav';
+import {
+    getCounterTag,
+    getModuleActiveMatcher,
+    getModuleDestination,
+    getSubmenuGroupTag,
+} from '../../utils/side-nav';
 import { PinnedNavigationConfig } from './interface';
 import { NavigationComponentProps } from './interface-internal';
 import { LayoutPlacementContext, useTitanLayoutContext } from './layout-context';
@@ -219,12 +224,12 @@ export const LayoutSidebar: FC<LayoutSidebarProps> = ({
                 {!mobile && (
                     <ThemeProvider mode="dark" className={Styles.navFooter}>
                         <div className={Styles.divider} />
-                        <div className={Styles.toggleWrapper}>
+                        <Flex direction="column" className={Styles.toggleWrapper}>
                             <SideNavigationOptionsToggle
                                 expanded={barExpanded}
                                 onExpandedChange={() => onBarExpandChange(!barExpanded)}
                             />
-                        </div>
+                        </Flex>
                     </ThemeProvider>
                 )}
             </div>
@@ -242,6 +247,8 @@ const SideNavigationOptionsToggle: FC<{
         <Button
             appearance="ghost"
             size="small"
+            flexGrow={1}
+            justifyContent="flex-start"
             icon={expanded ? SvgCollapse : SvgExpand}
             data-cy="navigation-left-options"
             data-pendo="navigation-left-options"
@@ -251,7 +258,7 @@ const SideNavigationOptionsToggle: FC<{
             onClick={() => onExpandedChange?.(!expanded)}
         />,
         expanded ? 'Collapse Menu' : 'Expand Menu',
-        { placement: 'right' }
+        { placement: 'right', pointerEventsNone: true }
     );
 
 /** Side Navigation menu item */
@@ -279,13 +286,28 @@ const SideNavigationGroupItem: FC<{
     } = useTitanLayoutContext();
 
     const tag = getSubmenuGroupTag(item.submenu, getCounterTag(item.counter, item.tag));
+    const isActive = item.isActive ?? getModuleActiveMatcher(item.to, item.submenu);
+
+    /*
+     * Some destinations (legacy monolith pages) never fire the route-change signal the popover
+     * would otherwise rely on to dismiss itself, leaving it stranded open over the loaded page.
+     * Closing explicitly on click, rather than waiting on navigation to settle, works everywhere.
+     */
+    const popoverRef = useRef<{ closePopover: () => void }>(null);
+    const handleSubmenuLinkClick = useCallback(
+        (itemId: string, submenuItemId?: string) => {
+            popoverRef.current?.closePopover();
+            onNavigationLinkClick?.(itemId, submenuItemId);
+        },
+        [onNavigationLinkClick]
+    );
 
     return barExpanded ? (
         <InternalSideNavigationGroup
             id={item.id}
-            to={item.to}
+            to={getModuleDestination(item.to, item.submenu)}
             title={item.title}
-            isActive={item.isActive}
+            isActive={isActive}
             icon={item.icon}
             iconActive={item.iconActive}
             className={item.className}
@@ -304,6 +326,7 @@ const SideNavigationGroupItem: FC<{
         </InternalSideNavigationGroup>
     ) : (
         <Popover
+            ref={popoverRef}
             placement="right-start"
             openOnHover={!touchDevice}
             delay={200}
@@ -315,9 +338,9 @@ const SideNavigationGroupItem: FC<{
                     <div {...triggerProps}>
                         <InternalSideNavigationLink
                             id={item.id}
-                            to={item.to}
+                            to={getModuleDestination(item.to, item.submenu)}
                             title={item.collapsedTitle ?? item.title}
-                            isActive={item.isActive}
+                            isActive={isActive}
                             icon={item.icon}
                             iconActive={item.iconActive}
                             className={classNames(
@@ -351,6 +374,7 @@ const SideNavigationGroupItem: FC<{
                             parentId={item.id}
                             groups={item.submenu?.groups ?? []}
                             navigationComponent={navigationComponent}
+                            onNavigationLinkClick={handleSubmenuLinkClick}
                         />
                     </div>
                 </div>

package/src/components/titan-layout/navigation-catalog/navigation-catalog-trigger.tsx

@@ -95,7 +95,7 @@ export const NavigationCatalogTrigger: FC<NavigationCatalogTriggerProps> = ({
          * selector written for a link to match it.
          */
         'data-cy': 'navigation-catalog-trigger',
-        'data-pendo': 'navigation-catalog-trigger',
+        'data-pendo': 'global-nav-go-to',
         'appearance': 'secondary',
         'size': 'small',
         'aria-label': 'Go to',