@dloizides/ui-nav 1.10.2 → 1.11.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # Changelog
 
+## 1.11.0
+
+- **Feature (an expandable nav group now auto-opens when the current route is inside it).**
+  `NavExpandableItem` used to mount every group collapsed (`useState(false)`), so on a fresh
+  page load the group containing the active route was closed and its active leaf was hidden.
+  A persistent-rail console that groups its nav by module (e.g. finreg-web's Payments / CRM /
+  Accounting rail) needs the active module's group open on load, the others collapsed — with
+  no way for the caller to express that, since expansion state was internal and uncontrolled.
+  - The group now initializes its expansion from whether the current route is inside it:
+    `useState(() => hasActiveDescendant(item, pathname))`, where `hasActiveDescendant` is true
+    when the item's own route is active (`isRouteActive`) or any descendant's is (recursive, so
+    it holds at any nesting depth). The group of the active route mounts EXPANDED (active leaf
+    visible + highlighted); a group with no active descendant mounts COLLAPSED — exactly the
+    prior behaviour.
+  - **No API change.** `NavItem` is unchanged — the behaviour is derived from the `pathname`
+    the component already receives. Consumers with no expandable groups, or whose groups hold no
+    active route, are byte-for-byte unaffected; all 7 portals gain the auto-open on their next
+    bump for free.
+  - Guarded by `src/navExpandableItem.test.tsx` (RED-first): the two "mounts EXPANDED" assertions
+    FAIL against the pre-change `useState(false)` (the active group's child is absent from the DOM)
+    and pass after; the "mounts COLLAPSED" + "header always renders" assertions lock the
+    backward-compatible half.
+
 ## 1.10.2
 
 - **Fix (the mobile nav DRAWER was not clickable — a tap on a nav item did not navigate, it

package/dist/index.js

@@ -289,6 +289,10 @@ function hoverTransitionStyle(reducedMotion) {
 function ariaCurrentProps(isActive) {
   return isActive ? { "aria-current": "page" } : {};
 }
+function hasActiveDescendant(item, pathname) {
+  if (isRouteActive(pathname, item.route)) return true;
+  return (item.children ?? []).some((child) => hasActiveDescendant(child, pathname));
+}
 var NavExpandableItem = ({
   item,
   pathname,
@@ -299,7 +303,7 @@ var NavExpandableItem = ({
   renderChevron,
   depth = 0
 }) => {
-  const [expanded, setExpanded] = React2.useState(false);
+  const [expanded, setExpanded] = React2.useState(() => hasActiveDescendant(item, pathname));
   const [focused, setFocused] = React2.useState(false);
   const { theme } = uiFeedback.useUi();
   const colors = theme.colors;