@dloizides/ui-nav 1.10.1 → 1.11.0

package/CHANGELOG.md

@@ -1,5 +1,50 @@
 # 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
+  just closed the drawer / did nothing, in all seven portals below 768px).**
+  `MobileDrawer` rendered a full-bleed scrim `Pressable` (`StyleSheet.absoluteFillObject`) and a
+  panel `View` with `{ position: 'absolute', top: 0, bottom: 0, left: 0 }` — **no width and no
+  zIndex**. Reproduced structurally: the panel's computed `width` was empty and its `zIndex` was
+  `0`; the scrim's computed `left`/`right` were both `0px` at `zIndex` `0`. So the scrim FULLY
+  overlapped the panel at the SAME stacking level, and on react-native-web the equal-zIndex scrim
+  won the pointer (the estate's known "RN-web Pressable swallows a sibling/child press" trap):
+  the tap closed the drawer and the nav-item's `TouchableOpacity` `onPress` (→ the app's router)
+  never fired.
+  - Fixed once, in the kit: the panel now has an explicit drawer **width** (`280px`), a solid
+    surface background, and a `zIndex` **above** the scrim; the scrim is anchored BESIDE the panel
+    (`left: DRAWER_WIDTH`) so its tap-to-close hit area never overlaps the panel. Nav-item taps
+    reach the `Sidebar` leaves; taps beside the drawer still close it.
+  - Guarded by `src/mobileDrawer.test.tsx` (RED-first): three structural assertions read the
+    resolved geometry via `getComputedStyle` and FAIL against the pre-fix panel/scrim (no width,
+    equal zIndex, overlapping scrim); two behavioural assertions lock the contract (nav-item tap
+    navigates + closes; scrim tap only closes).
+  - **No API change.** Consumers need no edit — bump the dependency and the drawer works.
+
 ## 1.10.1
 
 - **Fix (a plain-string slot logged `console.error` on EVERY render, in all seven portals).**

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;
@@ -1004,6 +1008,9 @@ var MENU_MIN_TARGET = 44;
 var MENU_GLYPH_FONT_SIZE = 20;
 var MENU_TOGGLE_PADDING = 12;
 var DRAWER_Z_INDEX = 50;
+var DRAWER_WIDTH = 280;
+var SCRIM_Z_INDEX = 1;
+var PANEL_Z_INDEX = 2;
 var NAV_ACTIVATABLE_SELECTOR = 'a, [role="button"], [role="link"]';
 var DEFAULT_DRAWER_LABELS = {
   openLabel: "Menu",
@@ -1013,8 +1020,22 @@ var DEFAULT_DRAWER_LABELS = {
 };
 var styles2 = reactNative.StyleSheet.create({
   overlay: { ...reactNative.StyleSheet.absoluteFillObject, zIndex: DRAWER_Z_INDEX },
-  scrim: { ...reactNative.StyleSheet.absoluteFillObject, backgroundColor: SCRIM_COLOR },
-  panel: { position: "absolute", top: 0, bottom: 0, left: 0 },
+  // The scrim's tap-to-close hit area is anchored to the RIGHT of the panel
+  // (`left: DRAWER_WIDTH`), so it NEVER overlaps the panel: nav-item taps always
+  // reach the Sidebar's TouchableOpacity, while taps beside the drawer still close.
+  scrim: {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    left: DRAWER_WIDTH,
+    right: 0,
+    backgroundColor: SCRIM_COLOR,
+    zIndex: SCRIM_Z_INDEX
+  },
+  // The panel gets an explicit width (a real drawer) AND a zIndex above the scrim,
+  // so on react-native-web it — and the nav leaves inside it — sit above the scrim
+  // and receive presses instead of the scrim swallowing them.
+  panel: { position: "absolute", top: 0, bottom: 0, left: 0, width: DRAWER_WIDTH, zIndex: PANEL_Z_INDEX },
   menuToggle: {
     minWidth: MENU_MIN_TARGET,
     minHeight: MENU_MIN_TARGET,
@@ -1071,7 +1092,17 @@ var MobileDrawer = ({
         onPress: onClose
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { ref: panelRef, "aria-modal": true, role: "dialog", style: styles2.panel, testID: drawerTestID, children: renderTextSlot(sidebar, { color: theme.colors.text }) })
+    /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.View,
+      {
+        ref: panelRef,
+        "aria-modal": true,
+        role: "dialog",
+        style: [styles2.panel, { backgroundColor: theme.colors.surface }],
+        testID: drawerTestID,
+        children: renderTextSlot(sidebar, { color: theme.colors.text })
+      }
+    )
   ] });
 };