@helloimjolopez-pathway/pathway-components 0.3.1 → 0.3.2

package/components/nav-shell/nav-shell-demo.jsx

@@ -28,15 +28,16 @@ function App() {
   // The app switcher's on/off, the same switch as the web component's
   // `app-switcher` attribute. It lives in the page so it works in every width.
   const [appSwitcher, setAppSwitcher] = useState(false);
-  const [app, setApp] = useState("financials-home");
   return (
     <DemoChrome title="NavShell" widths={WIDTHS}
       blurb={"TopNav, SideNav and the page area composed into one application frame. " +
              "Desktop pushes the page with a collapsible nav, Tablet locks the 72px rail, " +
              "Mobile opens the nav as an overlay from the hamburger. Tick App switcher to turn on the Accounting app switcher."}>
       <NavShell activeModuleId="accounting" org={ORG} user={USER}
-        navSections={NAV_SECTIONS} activeNavId="balance_sheet" onNavigate={() => {}}
-        appSwitcher={appSwitcher ? { ...ACCOUNTING_APP_SWITCHER, activeId: app, onSelect: setApp } : null}>
+        navSections={NAV_SECTIONS} activeNavId="balance_sheet"
+        // NavShell tracks the current page and app itself. With the switcher on,
+        // each Accounting app brings its own side nav.
+        appSwitcher={appSwitcher ? ACCOUNTING_APP_SWITCHER : null}>
         <PageTemplate>
           <label style={{ display: "flex", alignItems: "center", gap: "var(--semantic-layout-units-gap-tight)",
             fontSize: Y("font-size-s"), lineHeight: Y("line-height-s-single"),

package/components/nav-shell/nav-shell.jsx

@@ -75,17 +75,31 @@ function useBreakpoint() {
  *   defaultCollapsed boolean — initial desktop collapse state (default false)
  *   children         ReactNode — page content (renders inside Shell.Main)
  */
-// The Accounting module's apps, as Figma's Accounting.AppSwitcher lists them.
-// The web component falls back to this when `app-switcher` is on and no
-// `appSwitcher` property has been set.
+// The Accounting module's apps, as Figma's Accounting.AppSwitcher lists them,
+// each with its own side nav. The web component falls back to this when
+// `app-switcher` is on and no `appSwitcher` property has been set.
+//
+// Financials Home's nav is Figma's SideNav.Local.Accounting (40016737:141666),
+// icons included. Figma draws no other app's nav, so Accounts Payable,
+// Accounts Receivable and Bank Reconciliation use the item lists the widget
+// demo read from production (Bank Reconciliation takes Bank Account
+// Management's), on the same Figma icons.
+const accountingNav = (app, labels) => labels.map((l) => ({ id: `${app}-${l.toLowerCase().replace(/\s+/g, "-")}`, label: l, icon: ACCOUNTING_ICONS[l] }));
+const ACCOUNTING_ICONS = {
+  Dashboard: "space_dashboard", Enter: "input", Manage: "bookmark_manager", View: "visibility",
+  Reports: "insert_chart", Modify: "edit_square", Help: "help", Utilities: "tools_wrench",
+  "Security Setup": "security",
+};
+const APP_NAV_STANDARD = ["Dashboard", "Enter", "Manage", "View", "Reports", "Modify", "Utilities", "Help"];
 export const ACCOUNTING_APP_SWITCHER = {
   label: "Financials Home",
   icon: "apps",
-  home: { id: "financials-home", label: "Financials Home" },
+  home: { id: "financials-home", label: "Financials Home",
+    navItems: accountingNav("fh", ["Dashboard", "Enter", "Manage", "View", "Reports", "Modify", "Help", "Utilities", "Security Setup"]) },
   apps: [
-    { id: "accounts-payable", label: "Accounts Payable" },
-    { id: "accounts-receivable", label: "Accounts Receivable" },
-    { id: "bank-reconciliation", label: "Bank Reconciliation" },
+    { id: "accounts-payable",    label: "Accounts Payable",    navItems: accountingNav("ap", APP_NAV_STANDARD) },
+    { id: "accounts-receivable", label: "Accounts Receivable", navItems: accountingNav("ar", APP_NAV_STANDARD) },
+    { id: "bank-reconciliation", label: "Bank Reconciliation", navItems: accountingNav("br", APP_NAV_STANDARD) },
   ],
 };
 
@@ -132,6 +146,49 @@ export function NavShell({
   // opened with a 72 rail inside it and 178px of blank.
   const effectiveCollapsed = isTablet ? true : isMobile ? false : collapsed;
 
+  // ── Current page and current app ──────────────────────────────────────────
+  // Both follow their props when given, and otherwise NavShell tracks them
+  // itself, so a tap always moves the selection even when the host only
+  // listens to onNavigate (or does not listen at all). Before this the shell
+  // was purely controlled: a host that did not echo activeNavId back got a nav
+  // whose items looked dead.
+  const [navActive, setNavActive] = useState(activeNavId);
+  useEffect(() => { setNavActive(activeNavId); }, [activeNavId]);
+
+  const apps = appSwitcher ? [appSwitcher.home, ...(appSwitcher.apps || [])].filter(Boolean) : [];
+  const [appActive, setAppActive] = useState(appSwitcher && (appSwitcher.activeId ?? (appSwitcher.home && appSwitcher.home.id)));
+  useEffect(() => {
+    if (appSwitcher && appSwitcher.activeId !== undefined) setAppActive(appSwitcher.activeId);
+  }, [appSwitcher && appSwitcher.activeId]);
+  const currentApp = apps.find((a) => a.id === appActive);
+
+  // An app that carries its own nav replaces the shell's: choosing Accounts
+  // Payable shows Accounts Payable's items. Apps without one keep the shell's.
+  const appNav = currentApp && (currentApp.navItems || currentApp.navSections);
+  const sideItems    = appNav ? currentApp.navItems    : navItems;
+  const sideSections = appNav ? currentApp.navSections : navSections;
+  // Figma shows the app's Dashboard active on arrival, so when the current page
+  // is not one of this app's items, its first item is the active one.
+  const appIds = appNav
+    ? (currentApp.navItems || currentApp.navSections.flatMap((x) => x.items))
+        .flatMap((i) => [i.id, ...((i.children || []).map((c) => c.id))])
+    : null;
+  const sideActive = appIds && !appIds.includes(navActive) ? appIds[0] : navActive;
+
+  const handleNavigate = useCallback((id) => {
+    setNavActive(id);
+    onNavigate && onNavigate(id);
+  }, [onNavigate]);
+
+  const handleAppSelect = useCallback((id) => {
+    setAppActive(id);
+    appSwitcher && appSwitcher.onSelect && appSwitcher.onSelect(id);
+    // Land on the new app's first page (its Dashboard).
+    const next = apps.find((a) => a.id === id);
+    const first = next && (next.navItems ? next.navItems[0] : next.navSections && next.navSections[0] && next.navSections[0].items[0]);
+    if (first) handleNavigate(first.id);
+  }, [appSwitcher, apps, handleNavigate]);
+
   // Shell.Main margin-left: matches current SideNav width for push layout.
   // Mobile: no margin (SideNav is an overlay).
   const mainMarginLeft = isMobile
@@ -240,17 +297,19 @@ export function NavShell({
         }}
       >
         <SideNav
-          items={navItems}
-          sections={navSections}
-          activeId={activeNavId}
-          onNavigate={onNavigate}
+          // Remount per app so one app's open groups do not carry into the next.
+          key={appNav ? currentApp.id : "shell"}
+          items={sideItems}
+          sections={sideSections}
+          activeId={sideActive}
+          onNavigate={handleNavigate}
           collapsed={effectiveCollapsed}
           onCollapseChange={handleCollapseChange}
           // Mobile: the TopNav hamburger is the only toggle (NavHeader spec).
           hideCollapseButton={isTablet || isMobile}
           headerEnd={navHeaderEnd}
           footer={navFooter}
-          appSwitcher={appSwitcher}
+          appSwitcher={appSwitcher ? { ...appSwitcher, activeId: appActive, onSelect: handleAppSelect } : null}
         >
           {navChildren}
         </SideNav>

package/components/sidenav/sidenav.jsx

@@ -235,9 +235,12 @@ export function SideNavItem({
     : (isActive || isCollapsedActiveGrouper || isExpandedGrouper) ? T.text.navActive
     : hovered ? T.text.navHover
     :           T.text.navBase;
+  // Figma SideNavItem State=Trail (an open grouper) binds Secondary/Pressed on
+  // the leading icon AND the chevron, as it does on the label. The icon used to
+  // stay on Rest/Hover there, so an open group's glyphs read lighter than its label.
   const iconColor =
     isDisabled ? T.icon.navDisabled
-    : (isActive || isCollapsedActiveGrouper) ? T.icon.navActive
+    : (isActive || isCollapsedActiveGrouper || isExpandedGrouper) ? T.icon.navActive
     : hovered                              ? T.icon.navHover
     :                                        T.icon.navBase;
 
@@ -581,7 +584,12 @@ const APP_T = {
   separator:    c("stroke-static-neutral-base"),
 };
 
-export function AppSwitcher({ label, icon = "apps", home, apps = [], activeId, onSelect, collapsed = false }) {
+export function AppSwitcher({ label: fallbackLabel, icon = "apps", home, apps = [], activeId, onSelect, collapsed = false }) {
+  // The trigger names WHERE YOU ARE: the current app's label, so after choosing
+  // Accounts Payable it reads Accounts Payable. `label` is only the fallback
+  // for when no app is current.
+  const current = [home, ...apps].filter(Boolean).find(a => a.id === activeId);
+  const label = (current && current.label) || fallbackLabel || (home && home.label);
   const [hov, setHov] = useState(false);
   const [press, setPress] = useState(false);
   const [open, setOpen] = useState(false);
@@ -614,7 +622,7 @@ export function AppSwitcher({ label, icon = "apps", home, apps = [], activeId, o
   const active = open || press;
   const fg = active ? APP_T.openFg : hov ? APP_T.hoverFg : APP_T.restFg;
   const chevron = active ? APP_T.openFg : hov ? APP_T.hoverFg : APP_T.restChevron;
-  const homeItem = home || { id: "__home", label };
+  const homeItem = home || { id: "__home", label: fallbackLabel };
 
   return (
     // Full column width in both states: 218 expanded, the rail's 48 collapsed,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@helloimjolopez-pathway/pathway-components",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "Pathway Design System React components",
   "type": "module",
   "sideEffects": false,