@dloizides/ui-nav 1.31.0 → 1.33.0

package/dist/index.mjs

@@ -1,9 +1,9 @@
 import React, { useState, useCallback, useMemo, useEffect, useRef } from 'react';
 import { StyleSheet, Platform, Pressable, Text, View, TextInput, useWindowDimensions, Image, ScrollView, ActivityIndicator, Animated } from 'react-native';
 import { useUi, UiProvider } from '@dloizides/ui-feedback';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { Collapse, motionDurations, motionEasings } from '@dloizides/ui-motion';
-import { LAYOUT_COLLAPSE_BREAKPOINT, ModalDropdown, DropdownVariant, SelectedMarker } from '@dloizides/ui-layout';
+import { LAYOUT_COLLAPSE_BREAKPOINT, ModalDropdown, HEADER_STACK_BREAKPOINT, DropdownVariant, SelectedMarker } from '@dloizides/ui-layout';
 import { Z_INDEX } from '@dloizides/design-tokens';
 import { resolveAccessibleRoutes } from '@dloizides/auth-web';
 
@@ -60,7 +60,7 @@ var navStyles = StyleSheet.create({
   },
   // --- Topbar ---
   topbarContainer: {
-    height: 64,
+    minHeight: 64,
     paddingHorizontal: 12,
     borderBottomWidth: 1,
     flexDirection: "row",
@@ -81,7 +81,7 @@ var navStyles = StyleSheet.create({
   userBlock: { marginHorizontal: 12, alignItems: "flex-end", flexShrink: 1, minWidth: 0 },
   userName: { fontWeight: "600", maxWidth: "100%" },
   accountNameBtn: { flexShrink: 1, maxWidth: "100%", minHeight: MIN_TOUCH_TARGET, minWidth: MIN_TOUCH_TARGET, justifyContent: "center", alignItems: "flex-end" },
-  userEmail: { fontSize: 12 },
+  userEmail: { fontSize: 12, maxWidth: "100%" },
   accountBtn: {
     marginLeft: 8,
     paddingHorizontal: 10,
@@ -932,7 +932,24 @@ var FocusableTouchable = ({
     }
   );
 };
+var RAIL_FULL_BREAKPOINT = LAYOUT_COLLAPSE_BREAKPOINT;
+var DEFAULT_COLLAPSED_RAIL_MAX = 1024;
+function resolveRailMode({ viewport, hasSidebar, hasCollapsed, range }) {
+  if (!hasSidebar) return "none";
+  if (hasCollapsed) {
+    if (viewport >= range.max) return "full";
+    if (viewport >= range.min) return "collapsed";
+    return "drawer";
+  }
+  return viewport >= RAIL_FULL_BREAKPOINT ? "full" : "drawer";
+}
 var TEXT_ON_PRIMARY = "#ffffff";
+var ON_BRAND_SCALE = "onBrand";
+var USER_BLOCK_COMPACT = { marginHorizontal: 4 };
+var CONTAINER_STACKED = { flexWrap: "wrap" };
+var USER_ROW_STACKED = { flexBasis: "100%", alignItems: "flex-end", paddingBottom: 8 };
+var MAIN_STEP = "500";
+var WRAP_ANYWHERE = Platform.OS === "web" ? { overflowWrap: "anywhere" } : null;
 function isAccountState(account) {
   return "displayName" in account;
 }
@@ -942,6 +959,14 @@ function planToneColor(theme, tone) {
   if (tone === "enterprise") return palette.accent?.["500"] ?? palette.primary["500"];
   return theme.colors.textSecondary;
 }
+function onBrandInk(palette) {
+  const scales = palette;
+  return scales[ON_BRAND_SCALE]?.[MAIN_STEP] ?? TEXT_ON_PRIMARY;
+}
+function planBadgeInk(theme, tone) {
+  const fillIsPrimary = planToneColor(theme, tone) === theme.palette.primary["500"];
+  return fillIsPrimary ? onBrandInk(theme.palette) : TEXT_ON_PRIMARY;
+}
 var Topbar = ({
   left,
   center,
@@ -955,15 +980,60 @@ var Topbar = ({
   const { theme } = useUi();
   const colors = theme.colors;
   const primaryColor = theme.palette.primary["500"];
+  const onPrimaryInk = onBrandInk(theme.palette);
+  const { width: viewportWidth } = useWindowDimensions();
+  const stacked = viewportWidth < HEADER_STACK_BREAKPOINT;
+  const userBlockStyle = [
+    navStyles.userBlock,
+    viewportWidth < RAIL_FULL_BREAKPOINT ? USER_BLOCK_COMPACT : null,
+    stacked ? USER_ROW_STACKED : null
+  ];
   const richAccount = account !== void 0 && isAccountState(account) ? account : void 0;
   const legacyAccount = account !== void 0 && !isAccountState(account) ? account : void 0;
   const upgrade = richAccount?.upgrade;
+  const identityBlocks = /* @__PURE__ */ jsxs(Fragment, { children: [
+    user ? /* @__PURE__ */ jsxs(View, { accessible: true, accessibilityLabel: `${user.name}, ${user.email}`, style: userBlockStyle, children: [
+      /* @__PURE__ */ jsx(Text, { style: [navStyles.userName, WRAP_ANYWHERE, { color: colors.text }], children: user.name }),
+      /* @__PURE__ */ jsx(Text, { style: [navStyles.userEmail, WRAP_ANYWHERE, { color: colors.textSecondary }], children: user.email })
+    ] }) : null,
+    richAccount ? /* @__PURE__ */ jsxs(View, { style: userBlockStyle, children: [
+      richAccount.onAccount ? /* @__PURE__ */ jsx(
+        FocusableTouchable,
+        {
+          accessibilityHint: richAccount.accountHint ?? richAccount.displayName,
+          accessibilityLabel: richAccount.displayName,
+          ringColor: primaryColor,
+          style: navStyles.accountNameBtn,
+          testID: richAccount.accountTestID ?? NAV_TEST_IDS.accountName,
+          onPress: richAccount.onAccount,
+          children: /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: [navStyles.userName, { color: colors.text }], children: richAccount.displayName })
+        }
+      ) : /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: [navStyles.userName, { color: colors.text }], testID: NAV_TEST_IDS.accountName, children: richAccount.displayName }),
+      richAccount.tenantName !== void 0 ? /* @__PURE__ */ jsx(
+        Text,
+        {
+          style: [navStyles.accountTenant, { color: colors.textSecondary }],
+          testID: NAV_TEST_IDS.accountTenant,
+          children: richAccount.tenantName
+        }
+      ) : null,
+      richAccount.plan ? /* @__PURE__ */ jsx(
+        View,
+        {
+          style: [navStyles.planBadge, { backgroundColor: planToneColor(theme, richAccount.plan.tone) }],
+          testID: NAV_TEST_IDS.accountPlan,
+          children: /* @__PURE__ */ jsx(Text, { style: [navStyles.planBadgeText, { color: planBadgeInk(theme, richAccount.plan.tone) }], children: richAccount.plan.label })
+        }
+      ) : null
+    ] }) : null
+  ] });
   return /* @__PURE__ */ jsxs(
     View,
     {
       style: [
         navStyles.topbarContainer,
         { borderBottomColor: colors.border, backgroundColor: colors.background },
+        stacked ? CONTAINER_STACKED : null,
         containerStyle
       ],
       children: [
@@ -983,40 +1053,7 @@ var Topbar = ({
             }
           ) : null,
           renderTextSlot(notificationSlot, { color: colors.text }),
-          user ? /* @__PURE__ */ jsxs(View, { style: navStyles.userBlock, children: [
-            /* @__PURE__ */ jsx(Text, { style: [navStyles.userName, { color: colors.text }], children: user.name }),
-            /* @__PURE__ */ jsx(Text, { style: [navStyles.userEmail, { color: colors.textSecondary }], children: user.email })
-          ] }) : null,
-          richAccount ? /* @__PURE__ */ jsxs(View, { style: navStyles.userBlock, children: [
-            richAccount.onAccount ? /* @__PURE__ */ jsx(
-              FocusableTouchable,
-              {
-                accessibilityHint: richAccount.accountHint ?? richAccount.displayName,
-                accessibilityLabel: richAccount.displayName,
-                ringColor: primaryColor,
-                style: navStyles.accountNameBtn,
-                testID: richAccount.accountTestID ?? NAV_TEST_IDS.accountName,
-                onPress: richAccount.onAccount,
-                children: /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: [navStyles.userName, { color: colors.text }], children: richAccount.displayName })
-              }
-            ) : /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: [navStyles.userName, { color: colors.text }], testID: NAV_TEST_IDS.accountName, children: richAccount.displayName }),
-            richAccount.tenantName !== void 0 ? /* @__PURE__ */ jsx(
-              Text,
-              {
-                style: [navStyles.accountTenant, { color: colors.textSecondary }],
-                testID: NAV_TEST_IDS.accountTenant,
-                children: richAccount.tenantName
-              }
-            ) : null,
-            richAccount.plan ? /* @__PURE__ */ jsx(
-              View,
-              {
-                style: [navStyles.planBadge, { backgroundColor: planToneColor(theme, richAccount.plan.tone) }],
-                testID: NAV_TEST_IDS.accountPlan,
-                children: /* @__PURE__ */ jsx(Text, { style: [navStyles.planBadgeText, { color: TEXT_ON_PRIMARY }], children: richAccount.plan.label })
-              }
-            ) : null
-          ] }) : null,
+          stacked ? null : identityBlocks,
           legacyAccount ? /* @__PURE__ */ jsx(
             FocusableTouchable,
             {
@@ -1026,7 +1063,7 @@ var Topbar = ({
               style: [navStyles.accountBtn, { backgroundColor: primaryColor }],
               testID: legacyAccount.testID,
               onPress: legacyAccount.onPress,
-              children: /* @__PURE__ */ jsx(Text, { style: [navStyles.accountText, { color: TEXT_ON_PRIMARY }], children: legacyAccount.label })
+              children: /* @__PURE__ */ jsx(Text, { style: [navStyles.accountText, { color: onPrimaryInk }], children: legacyAccount.label })
             }
           ) : null,
           upgrade ? /* @__PURE__ */ jsx(
@@ -1038,7 +1075,7 @@ var Topbar = ({
               style: [navStyles.accountBtn, { backgroundColor: primaryColor }],
               testID: upgrade.testID ?? NAV_TEST_IDS.accountUpgrade,
               onPress: upgrade.onPress,
-              children: /* @__PURE__ */ jsx(Text, { style: [navStyles.accountText, { color: TEXT_ON_PRIMARY }], children: upgrade.label })
+              children: /* @__PURE__ */ jsx(Text, { style: [navStyles.accountText, { color: onPrimaryInk }], children: upgrade.label })
             }
           ) : null,
           /* @__PURE__ */ jsx(
@@ -1050,10 +1087,11 @@ var Topbar = ({
               style: [navStyles.accountBtn, { backgroundColor: primaryColor }],
               testID: logout.testID,
               onPress: richAccount ? richAccount.onLogout : logout.onPress,
-              children: /* @__PURE__ */ jsx(Text, { style: [navStyles.accountText, { color: TEXT_ON_PRIMARY }], children: logout.label })
+              children: /* @__PURE__ */ jsx(Text, { style: [navStyles.accountText, { color: onPrimaryInk }], children: logout.label })
             }
           )
-        ] })
+        ] }),
+        stacked ? identityBlocks : null
       ]
     }
   );
@@ -1615,17 +1653,6 @@ var Nav = (props) => {
   }
   return /* @__PURE__ */ jsx(NavBar, { ...props });
 };
-var RAIL_FULL_BREAKPOINT = LAYOUT_COLLAPSE_BREAKPOINT;
-var DEFAULT_COLLAPSED_RAIL_MAX = 1024;
-function resolveRailMode({ viewport, hasSidebar, hasCollapsed, range }) {
-  if (!hasSidebar) return "none";
-  if (hasCollapsed) {
-    if (viewport >= range.max) return "full";
-    if (viewport >= range.min) return "collapsed";
-    return "drawer";
-  }
-  return viewport >= RAIL_FULL_BREAKPOINT ? "full" : "drawer";
-}
 var styles5 = StyleSheet.create({
   band: { left: 0, position: "absolute", right: 0, top: 0 }
 });