@dloizides/ui-nav 1.18.0 → 1.20.0

package/dist/index.mjs

@@ -1,5 +1,5 @@
 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';
@@ -1068,6 +1068,7 @@ var NavBarLink = ({
 };
 var TEXT_ON_PRIMARY3 = "#ffffff";
 var NO_ACTIVE_ROUTE = "";
+var OVERFLOW_MENU_MIN_WIDTH = 200;
 var NavOverflowMenu = ({
   items,
   pathname,
@@ -1095,6 +1096,7 @@ var NavOverflowMenu = ({
     {
       accessibilityHint: hint,
       accessibilityLabel: label,
+      menuMinWidth: OVERFLOW_MENU_MIN_WIDTH,
       optionTestID,
       options,
       testID,
@@ -1336,7 +1338,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,
@@ -1361,13 +1378,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";
@@ -1505,7 +1531,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.
@@ -1559,8 +1588,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;
@@ -1603,6 +1631,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
   ] });
 };