@servicetitan/navigation 14.3.0 → 14.4.0

package/dist/components/titan-layout/navigation-catalog/navigation-catalog.module.less

@@ -8,23 +8,9 @@
  * inside it plain, rather than each one having to defend itself with `!important`.
  */
 :global(.anvil2.anvil2) {
-    /*
-     * The catalog's column geometry.
-     *
-     * `@catalog-column` is the *minimum* a column may be, not its width — the columns share out the
-     * dialog evenly and end up wider than this. Its job is to set how many there are: at `xlarge`
-     * (70rem) four of these plus their gaps fit and a fifth does not. The columns land at 248px, which
-     * still clears the widest row the catalog renders (229px including its star), so nothing clips.
-     *
-     * Width rather than `column-count: 4`, so a dialog narrowed by a small viewport drops to three
-     * columns and then two instead of squeezing four ever thinner. A fixed count gave 208px per column
-     * at a 768px viewport, under that 229px, which turned the longest labels into ellipses —
-     * "Batch/Export Transactions" and "Recurring Service Events" among them.
-     */
+    // Four readable columns fit the desktop dialog; narrower dialogs wrap whole groups.
     @catalog-column: 15rem;
     @catalog-gap: 1.5rem;
-
-    // The dialog's own horizontal inset, shared by the search field's row and the footer.
     @catalog-padding: @spacing-2;
 
     /*
@@ -93,6 +79,7 @@
 
         > * {
             height: 100%;
+            padding-bottom: @spacing-0;
         }
     }
 
@@ -104,6 +91,7 @@
      * in the left third of the dialog, reading as a fourth column.
      */
     .body {
+        container-type: inline-size;
         display: flex;
         flex: 1;
         min-width: 0;
@@ -119,6 +107,8 @@
      */
     .content {
         min-height: 0;
+        padding-inline: @catalog-padding;
+        padding-bottom: @spacing-0;
     }
 
     // Results scroll above the full-width footer; allow its content to wrap on narrow screens.
@@ -160,14 +150,12 @@
     /*
      * Fills whatever the now fixed-height dialog leaves under the search field, instead of sizing to
      * its own content, so browse, a narrowed search, and the empty state all hold the same height.
-     *
-     * `.columns` stays at `height: auto` regardless — a multi-column box given a fixed height becomes a
-     * fragmentainer and spills overflow sideways into further columns instead of growing downwards, which
-     * is a horizontal scrollbar rather than the vertical one wanted here.
      */
     .results {
         flex: 1;
         min-height: 0;
+        // Overlay scrollbars ignore scrollbar-gutter; keep the last column's stars clear of them.
+        padding-right: @spacing-2;
         overflow-y: auto;
 
         /*
@@ -177,107 +165,81 @@
         scrollbar-gutter: stable;
     }
 
-    /**
-     * Column width rather than column count, so a narrow dialog drops a column instead of squeezing all
-     * three.
-     *
-     * The dialog tracks the viewport below its cap, so `column-count: 3` had to divide whatever it was
-     * given by three. At a 768px viewport that was 208px per column, narrower than the 229px the widest
-     * category wants, and `max-width: 100%` on the category turned the overflow into ellipses — "Batch/
-     * Export Transactions" and "Recurring Service Events" among them.
-     *
-     * Giving the width instead lets the count fall out of it: three columns at the cap, then two, then
-     * one, and never a clipped label at any width. It cannot reach four, because a fourth column and its
-     * gap need more room than the cap ever offers, which is what keeps the reference's three-column
-     * layout at every desktop size.
-     *
-     * Multi-column rather than grid so categories pack against one another and flow into the next column,
-     * instead of leaving a ragged row of half-empty grid cells whenever one category is much taller than
-     * its neighbours.
-     */
+    // Match the input's width; let either scrollbar style occupy the dialog's right padding.
+    .searchResults {
+        padding-right: @spacing-0;
+        margin-right: -@catalog-padding;
+        scrollbar-gutter: auto;
 
-    /*
-     * `column-rule` rather than a border on the categories, because the line belongs to the boundary
-     * between columns and not to any category. Multi-column draws it once per gap, only where a gap
-     * exists, and at the full height of the column block — so it disappears on its own when the dialog
-     * narrows to a single column, and a short last column still gets the full-height line to its left
-     * rather than one that stops where its content does.
-     *
-     * A translucent white rather than the `subdued` border token, for the same reason as the row hover:
-     * the token is a flat neutral grey, and a grey line on a navy surface reads as a slightly dirty
-     * seam. At 12% it lands about where the token's grey would in lightness, but tinted by the navy
-     * underneath it, so it belongs to the surface it divides.
-     */
-    .columns {
-        columns: @catalog-column;
-        column-gap: @catalog-gap;
-        column-rule: 1px solid rgba(255, 255, 255, 0.12);
+        > div {
+            width: 100cqw;
+        }
     }
 
     /*
-     * A category and its heading stay in the same column.
-     *
-     * Without this a tall category flowed across a column boundary and its remainder arrived at the top
-     * of the next column with no heading over it, reading as though those destinations belonged to
-     * whatever was above them. `break-after` on the heading only keeps the heading with its first row;
-     * it says nothing about the rest.
-     *
-     * This is a preference, not a guarantee: a category taller than the column still has to break
-     * somewhere, and the browser will split it rather than overflow. That degrades to today's behaviour
-     * for the one or two largest categories and fixes it for the rest.
+     * Each group owns a column, regardless of its length. In particular, Projects & Field starts
+     * beside Demand rather than flowing beneath it. The minimum shrinks to the available width
+     * on small screens. Search uses a plain single-column list instead of this grid.
      */
+    .columns {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(min(100%, @catalog-column), 1fr));
+        gap: @catalog-gap;
+        overflow: hidden;
+    }
 
     /*
-     * Full column width, so every star in the catalog lands on the column's right edge just inside the
-     * divider. The rows are flex containers with `flex: 1` on the link, so the star is pushed to
-     * whatever the category's right edge is; letting that edge be the column's puts all of them on one
-     * line down the whole column rather than one line per category.
+     * Grid items stretch to the tallest group so dividers span the row. Place each divider in the
+     * preceding gap; the grid clips the one before its first column, including after wrapping.
      */
     .group {
-        break-inside: avoid;
-        margin-bottom: 1.5rem;
+        position: relative;
+        min-width: 0;
+
+        &::before {
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: -(@catalog-gap / 2);
+            width: 1px;
+            background: rgba(255, 255, 255, 0.12);
+            content: '';
+        }
     }
 
-    /*
-     * Level 1 of three. It shares its size with the module rows below it and is told apart by case,
-     * tracking and colour rather than by being bigger or smaller — the standard eyebrow treatment, and
-     * the one place a plain grey belongs.
-     *
-     * `break-after` keeps a heading from being stranded at the foot of a column.
-     *
-     * The colour is spelled out rather than taken from `--a2-foreground-color-subdued`, which resolves
-     * to `#c4c4c4` in dark mode: close enough to white that the heading competed with the destinations
-     * under it. This is `--a2-color-neutral-400`, a genuine mid grey, and it is the same value the rail
-     * headings use.
-     *
-     * Note that anvil2's colour tokens are spelled `foreground`, not `text`; a `--a2-text-color-*` name
-     * resolves to nothing and drops silently to the fallback. That matters here because this
-     * repository's LESS `@color-neutral` ramp runs dark-to-light, opposite to anvil2's, so a wrong
-     * guess lands on near-black text against a near-black dialog.
-     */
+    // Keep eyebrow medium typography and use the catalog's specified subdued colour.
     .groupTitle {
+        --a2-text-foreground-color-subdued: @color-neutral-70;
+
         display: block;
-        break-after: avoid;
         padding: @spacing-0 0.5rem;
         margin-bottom: 0.5rem;
-        color: light-dark(
-            var(--a2-color-neutral-500, #707070),
-            var(--a2-color-neutral-400, #8b8b8b)
-        );
-        text-transform: uppercase;
-        letter-spacing: 0.06em;
     }
 
-    /* A module and its pages are one unit and stay in the same column. */
     .module-group {
-        break-inside: avoid;
         margin-bottom: 0.75rem;
     }
 
+    // Match the sidebar's small, subdued headings and spacing above each page group.
+    .submenuTitle {
+        --a2-text-foreground-color-subdued: @color-neutral-70;
+
+        display: block;
+        padding: 12px @spacing-1 @spacing-half 2rem;
+        margin: @spacing-0;
+    }
+
     .row {
         display: flex;
         align-items: center;
         gap: 0.25rem;
+        border-radius: var(--a2-border-radius-medium, 4px);
+
+        // Share the highlight while keeping the link and favorite button independently focusable.
+        &:hover,
+        &:has(:focus-visible) {
+            background-color: @rail-hover;
+        }
     }
 
     .link {
@@ -290,15 +252,8 @@
         border-radius: var(--a2-border-radius-medium, 4px);
         text-decoration: none;
 
-        /*
-         * The rail's hover, not anvil2's. The token resolves to a flat neutral grey in dark mode, which
-         * on this navy replaces the surface's hue instead of lifting it. A translucent white tints
-         * whatever it covers, so the hovered row stays the same colour, just brighter — and it is the
-         * same value the rail uses on its own rows, which is what the user is comparing it against.
-         */
         &:hover,
         &:focus-visible {
-            background-color: @rail-hover;
             text-decoration: none;
         }
     }
@@ -320,24 +275,15 @@
         white-space: nowrap;
         color: var(--a2-foreground-color-default, light-dark(#040404, #ffffff));
         font-weight: var(--a2-font-weight-semibold, 600);
+        line-height: 1rem;
     }
 
-    /* Indented to sit under the module's title rather than its icon. */
+    // As in the sidebar, page text sits 8px farther in than its group heading.
     .childLink {
-        padding-left: 2rem;
+        padding: @spacing-1 @spacing-1 @spacing-1 2.5rem;
     }
 
-    /*
-     * Level 3 of three: below the module row, above the category heading, at regular weight and at the
-     * same full-strength foreground. It is still a destination, so it is not dimmed — size and weight
-     * are what place it under its module. Only the category heading is greyed.
-     *
-     * 13px is deliberately off the token scale, which jumps 0.75rem → 0.875rem with nothing in between.
-     * At 0.75rem this tied with the category heading and read as another label rather than as somewhere
-     * to go. It has to clear the heading and stay under the module row, and the gap between those two is
-     * one token wide, so the size is spelled out. It matches the rail's pinned pages, which are sized
-     * the same way and for the same reason.
-     */
+    // Match the expanded sidebar's child-page typography.
     .childTitle {
         flex: 1;
         min-width: 0;
@@ -345,7 +291,9 @@
         text-overflow: ellipsis;
         white-space: nowrap;
         color: var(--a2-foreground-color-default, light-dark(#040404, #ffffff));
-        font-size: 0.8125rem;
+        font-size: @typescale-2;
+        font-weight: @font-weight-semibold;
+        line-height: 20px;
     }
 
     /*
@@ -382,24 +330,19 @@
     .star {
         flex: none;
         opacity: 0;
-
-        &:focus-visible {
-            opacity: 1;
-        }
     }
 
-    .row:hover .star {
+    // Mouse clicks retain focus after leaving the row; only keyboard focus should reveal a star.
+    .row:hover .star,
+    .row:has(:focus-visible) .star {
         opacity: 0.5;
 
-        &:hover {
+        &:hover,
+        &:focus-visible {
             opacity: 1;
         }
     }
 
-    .row:focus-within .star {
-        opacity: 0.5;
-    }
-
     /*
      * After the hover rules, which match at the same specificity, so a pinned star stays lit.
      *
@@ -411,7 +354,7 @@
      */
     .starActive,
     .row:hover .starActive,
-    .row:focus-within .starActive {
+    .row:has(:focus-visible) .starActive {
         color: var(--a2-status-color-warning, light-dark(#ffbe00, #ffe278));
         opacity: 1;
     }

package/dist/components/titan-layout/navigation-catalog/navigation-catalog.module.less.d.ts

@@ -19,6 +19,8 @@ export const moduleTitle: string;
 export const results: string;
 export const row: string;
 export const search: string;
+export const searchResults: string;
 export const star: string;
 export const starActive: string;
+export const submenuTitle: string;
 

package/dist/utils/__tests__/catalog-groups.test.d.ts

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

package/dist/utils/__tests__/catalog-groups.test.d.ts.map

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

package/dist/utils/catalog-groups.d.ts

@@ -0,0 +1,11 @@
+import { NavigationCatalogGroup } from '../components/titan-layout/interface';
+import { NavigationItemData } from './navigation';
+/** Preserve submenu headings while offering each page only once within its module. */
+export declare const getCatalogSubmenuGroups: (item: NavigationItemData) => {
+    title: string;
+    links: import("./navigation").NavigationSubmenuItemData[];
+}[];
+export declare const getCatalogChildren: (item: NavigationItemData) => import("./navigation").NavigationSubmenuItemData[];
+/** Match destination titles literally, retaining the headings of matching child pages. */
+export declare const filterCatalogGroups: (groups: NavigationCatalogGroup[], query: string) => NavigationCatalogGroup[];
+//# sourceMappingURL=catalog-groups.d.ts.map

package/dist/utils/catalog-groups.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"catalog-groups.d.ts","sourceRoot":"","sources":["../../src/utils/catalog-groups.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,sCAAsC,CAAC;AAC9E,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAElD,sFAAsF;AACtF,eAAO,MAAM,uBAAuB,GAAI,MAAM,kBAAkB;;;GAe/D,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,MAAM,kBAAkB,uDACI,CAAC;AAEhE,0FAA0F;AAC1F,eAAO,MAAM,mBAAmB,GAAI,QAAQ,sBAAsB,EAAE,EAAE,OAAO,MAAM,6BA+BlF,CAAC"}

package/dist/utils/catalog-groups.js

@@ -0,0 +1,66 @@
+/** Preserve submenu headings while offering each page only once within its module. */ export const getCatalogSubmenuGroups = (item)=>{
+    var _ref;
+    var _item_submenu;
+    const seen = new Set();
+    return ((_ref = (_item_submenu = item.submenu) === null || _item_submenu === void 0 ? void 0 : _item_submenu.groups) !== null && _ref !== void 0 ? _ref : []).flatMap((group)=>{
+        var _group_links, _ref;
+        var _group_title;
+        const links = ((_group_links = group.links) !== null && _group_links !== void 0 ? _group_links : []).filter((link)=>{
+            if (seen.has(link.id)) {
+                return false;
+            }
+            seen.add(link.id);
+            return true;
+        });
+        return links.length ? [
+            {
+                ...group,
+                title: (_ref = (_group_title = group.title) === null || _group_title === void 0 ? void 0 : _group_title.trim()) !== null && _ref !== void 0 ? _ref : '',
+                links
+            }
+        ] : [];
+    });
+};
+export const getCatalogChildren = (item)=>getCatalogSubmenuGroups(item).flatMap((group)=>group.links);
+/** Match destination titles literally, retaining the headings of matching child pages. */ export const filterCatalogGroups = (groups, query)=>{
+    const needle = query.trim().toLowerCase();
+    if (!needle) {
+        return groups;
+    }
+    return groups.reduce((out, group)=>{
+        const items = group.items.reduce((kept, item)=>{
+            const matchingGroups = getCatalogSubmenuGroups(item).flatMap((submenuGroup)=>{
+                const links = submenuGroup.links.filter((child)=>child.title.toLowerCase().includes(needle));
+                return links.length ? [
+                    {
+                        ...submenuGroup,
+                        links
+                    }
+                ] : [];
+            });
+            if (matchingGroups.length > 0) {
+                kept.push({
+                    ...item,
+                    submenu: {
+                        groups: matchingGroups
+                    }
+                });
+            } else if (item.title.toLowerCase().includes(needle)) {
+                kept.push({
+                    ...item,
+                    submenu: undefined
+                });
+            }
+            return kept;
+        }, []);
+        if (items.length > 0) {
+            out.push({
+                ...group,
+                items
+            });
+        }
+        return out;
+    }, []);
+};
+
+//# sourceMappingURL=catalog-groups.js.map

package/dist/utils/catalog-groups.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/catalog-groups.ts"],"sourcesContent":["import { NavigationCatalogGroup } from '../components/titan-layout/interface';\nimport { NavigationItemData } from './navigation';\n\n/** Preserve submenu headings while offering each page only once within its module. */\nexport const getCatalogSubmenuGroups = (item: NavigationItemData) => {\n    const seen = new Set<string>();\n\n    return (item.submenu?.groups ?? []).flatMap(group => {\n        const links = (group.links ?? []).filter(link => {\n            if (seen.has(link.id)) {\n                return false;\n            }\n\n            seen.add(link.id);\n            return true;\n        });\n\n        return links.length ? [{ ...group, title: group.title?.trim() ?? '', links }] : [];\n    });\n};\n\nexport const getCatalogChildren = (item: NavigationItemData) =>\n    getCatalogSubmenuGroups(item).flatMap(group => group.links);\n\n/** Match destination titles literally, retaining the headings of matching child pages. */\nexport const filterCatalogGroups = (groups: NavigationCatalogGroup[], query: string) => {\n    const needle = query.trim().toLowerCase();\n\n    if (!needle) {\n        return groups;\n    }\n\n    return groups.reduce<NavigationCatalogGroup[]>((out, group) => {\n        const items = group.items.reduce<NavigationItemData[]>((kept, item) => {\n            const matchingGroups = getCatalogSubmenuGroups(item).flatMap(submenuGroup => {\n                const links = submenuGroup.links.filter(child =>\n                    child.title.toLowerCase().includes(needle)\n                );\n                return links.length ? [{ ...submenuGroup, links }] : [];\n            });\n\n            if (matchingGroups.length > 0) {\n                kept.push({ ...item, submenu: { groups: matchingGroups } });\n            } else if (item.title.toLowerCase().includes(needle)) {\n                kept.push({ ...item, submenu: undefined });\n            }\n\n            return kept;\n        }, []);\n\n        if (items.length > 0) {\n            out.push({ ...group, items });\n        }\n\n        return out;\n    }, []);\n};\n"],"names":["getCatalogSubmenuGroups","item","seen","Set","submenu","groups","flatMap","group","links","filter","link","has","id","add","length","title","trim","getCatalogChildren","filterCatalogGroups","query","needle","toLowerCase","reduce","out","items","kept","matchingGroups","submenuGroup","child","includes","push","undefined"],"mappings":"AAGA,oFAAoF,GACpF,OAAO,MAAMA,0BAA0B,CAACC;;QAG5BA;IAFR,MAAMC,OAAO,IAAIC;IAEjB,OAAO,UAACF,gBAAAA,KAAKG,OAAO,cAAZH,oCAAAA,cAAcI,MAAM,uCAAI,EAAE,EAAEC,OAAO,CAACC,CAAAA;YACzBA;YAS2BA;QAT1C,MAAMC,QAAQ,EAACD,eAAAA,MAAMC,KAAK,cAAXD,0BAAAA,eAAe,EAAE,EAAEE,MAAM,CAACC,CAAAA;YACrC,IAAIR,KAAKS,GAAG,CAACD,KAAKE,EAAE,GAAG;gBACnB,OAAO;YACX;YAEAV,KAAKW,GAAG,CAACH,KAAKE,EAAE;YAChB,OAAO;QACX;QAEA,OAAOJ,MAAMM,MAAM,GAAG;YAAC;gBAAE,GAAGP,KAAK;gBAAEQ,KAAK,WAAER,eAAAA,MAAMQ,KAAK,cAAXR,mCAAAA,aAAaS,IAAI,yCAAM;gBAAIR;YAAM;SAAE,GAAG,EAAE;IACtF;AACJ,EAAE;AAEF,OAAO,MAAMS,qBAAqB,CAAChB,OAC/BD,wBAAwBC,MAAMK,OAAO,CAACC,CAAAA,QAASA,MAAMC,KAAK,EAAE;AAEhE,wFAAwF,GACxF,OAAO,MAAMU,sBAAsB,CAACb,QAAkCc;IAClE,MAAMC,SAASD,MAAMH,IAAI,GAAGK,WAAW;IAEvC,IAAI,CAACD,QAAQ;QACT,OAAOf;IACX;IAEA,OAAOA,OAAOiB,MAAM,CAA2B,CAACC,KAAKhB;QACjD,MAAMiB,QAAQjB,MAAMiB,KAAK,CAACF,MAAM,CAAuB,CAACG,MAAMxB;YAC1D,MAAMyB,iBAAiB1B,wBAAwBC,MAAMK,OAAO,CAACqB,CAAAA;gBACzD,MAAMnB,QAAQmB,aAAanB,KAAK,CAACC,MAAM,CAACmB,CAAAA,QACpCA,MAAMb,KAAK,CAACM,WAAW,GAAGQ,QAAQ,CAACT;gBAEvC,OAAOZ,MAAMM,MAAM,GAAG;oBAAC;wBAAE,GAAGa,YAAY;wBAAEnB;oBAAM;iBAAE,GAAG,EAAE;YAC3D;YAEA,IAAIkB,eAAeZ,MAAM,GAAG,GAAG;gBAC3BW,KAAKK,IAAI,CAAC;oBAAE,GAAG7B,IAAI;oBAAEG,SAAS;wBAAEC,QAAQqB;oBAAe;gBAAE;YAC7D,OAAO,IAAIzB,KAAKc,KAAK,CAACM,WAAW,GAAGQ,QAAQ,CAACT,SAAS;gBAClDK,KAAKK,IAAI,CAAC;oBAAE,GAAG7B,IAAI;oBAAEG,SAAS2B;gBAAU;YAC5C;YAEA,OAAON;QACX,GAAG,EAAE;QAEL,IAAID,MAAMV,MAAM,GAAG,GAAG;YAClBS,IAAIO,IAAI,CAAC;gBAAE,GAAGvB,KAAK;gBAAEiB;YAAM;QAC/B;QAEA,OAAOD;IACX,GAAG,EAAE;AACT,EAAE"}

package/package.json

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

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

@@ -133,15 +133,19 @@ 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.
-    expect(marketingStar().getAttribute('aria-pressed')).toBe('true');
+    /*
+     * 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');
     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([]);
+    expect(props.onPinnedIdsChange).toHaveBeenCalledWith(['marketing', 'overview', 'campaigns']);
     expect(props.onResetToDefaults).not.toHaveBeenCalled();
 });