@dloizides/ui-nav 1.19.0 → 1.21.0

package/dist/index.mjs

@@ -1,9 +1,9 @@
 import React, { useState, useCallback, useMemo, useEffect, useRef } from 'react';
-import { Platform, StyleSheet, Pressable, Text, View, TextInput, useWindowDimensions, ActivityIndicator, ScrollView } from 'react-native';
+import { Platform, StyleSheet, Pressable, Text, View, TextInput, useWindowDimensions, ScrollView, ActivityIndicator } from 'react-native';
 import { useUi, UiProvider } from '@dloizides/ui-feedback';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Collapse } from '@dloizides/ui-motion';
-import { ModalDropdown } from '@dloizides/ui-layout';
+import { LAYOUT_COLLAPSE_BREAKPOINT, ModalDropdown } from '@dloizides/ui-layout';
 import { resolveAccessibleRoutes } from '@dloizides/auth-web';
 
 // src/Sidebar.tsx
@@ -640,9 +640,7 @@ var NavExpandableItem = ({
     )) }) })
   ] });
 };
-
-// src/searchAffordance.ts
-var DEFAULT_SEARCH_BREAKPOINT = 768;
+var DEFAULT_SEARCH_BREAKPOINT = LAYOUT_COLLAPSE_BREAKPOINT;
 function resolveSearchAffordance(viewport, breakpoint = DEFAULT_SEARCH_BREAKPOINT) {
   return viewport >= breakpoint ? "inline" : "palette";
 }
@@ -1338,7 +1336,22 @@ var CARD_TITLE_FONT_SIZE = 16;
 var CARD_MESSAGE_FONT_SIZE = 14;
 var CARD_TITLE_MARGIN_BOTTOM = 8;
 var styles3 = StyleSheet.create({
-  centerFill: { flex: 1, justifyContent: "center", alignItems: "center" },
+  // Loading is a TRANSITIONAL state: the spinner is an absolute overlay ON TOP of
+  // stably-mounted children, never a replacement for them. Replacing children here
+  // would unmount whatever they host (e.g. a navigator), and on remount React
+  // Navigation re-derives its default route — silently discarding a deep link.
+  // The host wraps children whenever a `state` is passed (not only while loading),
+  // so its element type is invariant across the loading toggle — see `useContentBody`.
+  loadingHost: { flex: 1 },
+  loadingOverlay: {
+    alignItems: "center",
+    bottom: 0,
+    justifyContent: "center",
+    left: 0,
+    position: "absolute",
+    right: 0,
+    top: 0
+  },
   card: {
     padding: CARD_PADDING,
     borderRadius: CARD_BORDER_RADIUS,
@@ -1363,13 +1376,22 @@ function useContentBody(state, children, testID) {
   const { theme } = useUi();
   const primary = theme.palette.primary["500"];
   const errorColor = theme.semantic.error["500"];
-  if (state?.forbidden)
+  if (!state) return children;
+  if (state.forbidden)
     return /* @__PURE__ */ jsx(MessageCard, { accentColor: errorColor, message: state.forbidden, testID: `${testID}${APP_SHELL_SUFFIX.forbidden}` });
-  if (state?.error)
+  if (state.error)
     return /* @__PURE__ */ jsx(MessageCard, { accentColor: errorColor, message: state.error, testID: `${testID}${APP_SHELL_SUFFIX.error}` });
-  if (state?.loading === true)
-    return /* @__PURE__ */ jsx(View, { style: styles3.centerFill, testID: `${testID}${APP_SHELL_SUFFIX.loading}`, children: /* @__PURE__ */ jsx(ActivityIndicator, { color: primary, size: "large" }) });
-  return children;
+  return /* @__PURE__ */ jsxs(View, { style: styles3.loadingHost, children: [
+    children,
+    state.loading === true ? /* @__PURE__ */ jsx(
+      View,
+      {
+        style: [styles3.loadingOverlay, { backgroundColor: theme.colors.background }],
+        testID: `${testID}${APP_SHELL_SUFFIX.loading}`,
+        children: /* @__PURE__ */ jsx(ActivityIndicator, { color: primary, size: "large" })
+      }
+    ) : null
+  ] });
 }
 var SCRIM_COLOR = "rgba(0, 0, 0, 0.5)";
 var MENU_GLYPH2 = "\u2630";
@@ -1481,9 +1503,7 @@ var MobileDrawer = ({
     )
   ] });
 };
-
-// src/railMode.ts
-var RAIL_FULL_BREAKPOINT = 768;
+var RAIL_FULL_BREAKPOINT = LAYOUT_COLLAPSE_BREAKPOINT;
 var DEFAULT_COLLAPSED_RAIL_MAX = 1024;
 function resolveRailMode({ viewport, hasSidebar, hasCollapsed, range }) {
   if (!hasSidebar) return "none";
@@ -1507,7 +1527,10 @@ function useContentMaxWidth(width) {
 var DEFAULT_CONTENT_PADDING = 24;
 var styles5 = StyleSheet.create({
   root: { flex: 1 },
-  centerFill: { flex: 1, justifyContent: "center", alignItems: "center" },
+  // Auth-pending spinner: an opaque absolute overlay over the mounted shell, so
+  // `children` (and any navigator they host) are never unmounted while the gate
+  // resolves. See the `gatePending` note in the render body.
+  pendingOverlay: { alignItems: "center", bottom: 0, justifyContent: "center", left: 0, position: "absolute", right: 0, top: 0 },
   scroll: { flex: 1 },
   scrollContent: { flexGrow: 1 },
   // Mobile back-office header: the hamburger sits inline before the header slot.
@@ -1561,8 +1584,7 @@ var AppShell = ({
   useEffect(() => {
     if (isUnauthenticated && gate !== void 0) gate.onRedirect();
   }, [isUnauthenticated, gate]);
-  if (gate?.pending === true)
-    return /* @__PURE__ */ jsx(View, { style: [styles5.root, styles5.centerFill, { backgroundColor: theme.colors.background }], testID: `${testID}${APP_SHELL_SUFFIX.pending}`, children: /* @__PURE__ */ jsx(ActivityIndicator, { color: primary, size: "large" }) });
+  const gatePending = gate?.pending === true;
   if (isUnauthenticated) return null;
   const columnStyle = maxWidth === "full" ? styles5.columnFull : [styles5.columnCapped, { maxWidth }];
   const navInnerStyle = chromeAlignment === "content" && maxWidth !== "full" ? [styles5.chromeCapped, { maxWidth, paddingHorizontal: contentPadding }] : void 0;
@@ -1605,6 +1627,14 @@ var AppShell = ({
         sidebar,
         onClose: closeDrawer
       }
+    ) : null,
+    gatePending ? /* @__PURE__ */ jsx(
+      View,
+      {
+        style: [styles5.pendingOverlay, { backgroundColor: theme.colors.background }],
+        testID: `${testID}${APP_SHELL_SUFFIX.pending}`,
+        children: /* @__PURE__ */ jsx(ActivityIndicator, { color: primary, size: "large" })
+      }
     ) : null
   ] });
 };