@dloizides/ui-nav 1.13.0 → 1.15.0

package/CHANGELOG.md

@@ -1,5 +1,50 @@
 # Changelog
 
+## 1.14.0
+
+- **Feature (an expandable nav group now ANIMATES its expand/collapse instead of snapping).**
+  `NavExpandableItem` used to conditionally render its children (`{expanded ? … : null}`),
+  so a sidebar/drawer group's leaves appeared and vanished INSTANTLY on toggle — a hard,
+  jarring cut with no transition. The group's children are now wrapped in the
+  `@dloizides/ui-motion` `<Collapse open={expanded}>`, which measures the children's natural
+  height and animates a real `Animated.Value` height on WEB and native alike (the height code
+  path RN's native-only `LayoutAnimation` never gave the web build), collapsing to instant
+  under `prefers-reduced-motion`.
+  - **Collapsed leaves stay non-interactive.** Per the `Collapse` contract the children remain
+    MOUNTED at all times (their state and a11y focus order are preserved); when collapsed they
+    are clipped to zero height under `overflow: hidden`, so a collapsed group's leaves are
+    neither visible nor tappable in a real browser even though they are in the tree. This is a
+    deliberate change from the prior "absent from the DOM when collapsed" behaviour.
+  - **`aria-expanded` and the mobile-drawer contract are intact.** The group header still emits
+    `aria-expanded` (the `ariaExpandedProps` spread is unchanged), so `MobileDrawer` still tells
+    a group TOGGLE apart from a navigating LEAF and does not dismiss the drawer when a group is
+    expanded on mobile. The active-leaf accent bar, docs-style section-header styling, chevron
+    slot, testIDs, and all a11y roles/labels/hints are unchanged.
+  - **No public API change.** `NavExpandableItemProps` / `NavItem` are untouched — the animation
+    is derived from the `expanded` state the component already tracked. `@dloizides/ui-motion`
+    (`^1.0.1`) is added as a runtime dependency; all 7 portals gain the animated group on their
+    next bump for free. Consumers with no expandable groups are visually unaffected.
+
+## 1.13.1
+
+- **Fix (mobile drawer: a sub-item / leaf tap dismissed the drawer WITHOUT navigating).**
+  On a phone-width viewport, tapping a leaf inside the open `MobileDrawer` closed the drawer
+  but the route never changed — verified live on finreg via Playwright (real Chromium, real
+  pointer events); every jsdom unit test stayed green because it wired `onClose` to an inert
+  `jest.fn()` that never unmounts anything.
+  - **Root cause.** `MobileDrawer` closes on a nav press via a NATIVE
+    `panel.addEventListener('click', …)`. react-native-web fires a leaf's `onPress` from its
+    `onClick`, dispatched through REACT's synthetic event system whose root listener sits on the
+    app-root container — an ANCESTOR of the panel. So on a real click the native panel listener
+    runs FIRST (during the DOM bubble), and closing synchronously there ran `setDrawerOpen(false)`,
+    unmounting the panel and tearing the leaf out of the tree BEFORE React could dispatch its
+    `onPress`. The navigation call never ran.
+  - **Fix.** The drawer's close is now DEFERRED to the next macrotask (`setTimeout(…, 0)`), so
+    React finishes dispatching the tapped leaf's `onPress` (the navigation) for the current click;
+    the panel then unmounts on the following tick, after the route has already changed. Scrim tap
+    and group-header toggle are unchanged.
+  - **No API change.** All 7 portals get the fix on their next bump.
+
 ## 1.11.0
 
 - **Feature (an expandable nav group now auto-opens when the current route is inside it).**

package/dist/index.js

@@ -3,6 +3,7 @@
 var reactNative = require('react-native');
 var uiFeedback = require('@dloizides/ui-feedback');
 var React2 = require('react');
+var uiMotion = require('@dloizides/ui-motion');
 var jsxRuntime = require('react/jsx-runtime');
 var uiLayout = require('@dloizides/ui-layout');
 var authWeb = require('@dloizides/auth-web');
@@ -413,7 +414,7 @@ var NavExpandableItem = ({
         ]
       }
     ),
-    expanded ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: expandableStyles.childrenContainer, children: item.children?.map((child) => /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx(uiMotion.Collapse, { open: expanded, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: expandableStyles.childrenContainer, children: item.children?.map((child) => /* @__PURE__ */ jsxRuntime.jsx(
       NavExpandableItem,
       {
         collapseHint,
@@ -426,7 +427,7 @@ var NavExpandableItem = ({
         onNavigate
       },
       child.key
-    )) }) : null
+    )) }) })
   ] });
 };
 function isBareText(node) {
@@ -1054,6 +1055,10 @@ var SCRIM_Z_INDEX = 1;
 var PANEL_Z_INDEX = 2;
 var NAV_ACTIVATABLE_SELECTOR = 'a, [role="button"], [role="link"]';
 var NAV_TOGGLE_SELECTOR = "[aria-expanded]";
+function deferClose(close) {
+  if (typeof setTimeout === "function") setTimeout(close, 0);
+  else close();
+}
 var DEFAULT_DRAWER_LABELS = {
   openLabel: "Menu",
   openHint: "Open the navigation menu",
@@ -1119,7 +1124,7 @@ var MobileDrawer = ({
       if (target === null) return;
       const activatable = target.closest(NAV_ACTIVATABLE_SELECTOR);
       const isToggle = activatable !== null && activatable.closest(NAV_TOGGLE_SELECTOR) !== null;
-      if (activatable !== null && !isToggle) onClose();
+      if (activatable !== null && !isToggle) deferClose(onClose);
     };
     node.addEventListener("click", handleClick);
     return () => node.removeEventListener("click", handleClick);