@dloizides/ui-nav 1.25.0 → 1.26.1

package/dist/index.mjs

@@ -3,7 +3,7 @@ import { StyleSheet, Platform, Pressable, Text, View, TextInput, useWindowDimens
 import { useUi, UiProvider } from '@dloizides/ui-feedback';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Collapse } from '@dloizides/ui-motion';
-import { LAYOUT_COLLAPSE_BREAKPOINT, ModalDropdown } from '@dloizides/ui-layout';
+import { LAYOUT_COLLAPSE_BREAKPOINT, ModalDropdown, DropdownVariant, SelectedMarker } from '@dloizides/ui-layout';
 import { Z_INDEX } from '@dloizides/design-tokens';
 import { resolveAccessibleRoutes } from '@dloizides/auth-web';
 
@@ -64,9 +64,9 @@ var navStyles = StyleSheet.create({
     alignItems: "center",
     justifyContent: "space-between"
   },
-  topbarLeft: { flex: 1 },
+  topbarLeft: { flexGrow: 1, flexShrink: 0 },
   topbarCenter: { flexShrink: 1, minWidth: 0, flexDirection: "row", alignItems: "center", marginHorizontal: 8 },
-  topbarRight: { flexDirection: "row", alignItems: "center" },
+  topbarRight: { flexDirection: "row", alignItems: "center", flexShrink: 1, minWidth: 0 },
   topbarRowItem: {
     marginHorizontal: 8,
     alignItems: "center",
@@ -75,14 +75,9 @@ var navStyles = StyleSheet.create({
     minWidth: MIN_TOUCH_TARGET
   },
   topbarLabel: { fontSize: 14 },
-  userBlock: { marginHorizontal: 12, alignItems: "flex-end" },
-  userName: { fontWeight: "600" },
-  accountNameBtn: {
-    minHeight: MIN_TOUCH_TARGET,
-    minWidth: MIN_TOUCH_TARGET,
-    justifyContent: "center",
-    alignItems: "flex-end"
-  },
+  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 },
   accountBtn: {
     marginLeft: 8,
@@ -220,7 +215,8 @@ var pillNavStyles = StyleSheet.create({
     justifyContent: "center"
   },
   pillText: { fontSize: 14, fontWeight: "600" },
-  menuTriggerText: { flexShrink: 1 }
+  menuTriggerText: { flexShrink: 1 },
+  pillOutline: { borderWidth: 2 }
 });
 var darkModeStyles = StyleSheet.create({
   // Segmented Light / Dark / System control.
@@ -994,9 +990,9 @@ var Topbar = ({
                 style: navStyles.accountNameBtn,
                 testID: richAccount.accountTestID ?? NAV_TEST_IDS.accountName,
                 onPress: richAccount.onAccount,
-                children: /* @__PURE__ */ jsx(Text, { style: [navStyles.userName, { color: colors.text }], children: richAccount.displayName })
+                children: /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: [navStyles.userName, { color: colors.text }], children: richAccount.displayName })
               }
-            ) : /* @__PURE__ */ jsx(Text, { style: [navStyles.userName, { color: colors.text }], testID: NAV_TEST_IDS.accountName, 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,
               {
@@ -1868,7 +1864,6 @@ function resolvePillMenuLabel(items, pathname, fallback) {
   const active = items.find((item) => item.route === activeRoute);
   return active?.label ?? fallback;
 }
-var TEXT_ON_PRIMARY4 = "#ffffff";
 var NO_ACTIVE_ROUTE2 = "";
 var PILL_MENU_MIN_WIDTH = 200;
 var PillNavMenu = ({
@@ -1882,7 +1877,7 @@ var PillNavMenu = ({
   menuHeading
 }) => {
   const { theme } = useUi();
-  const primaryColor = theme.palette.primary["500"];
+  const { colors } = theme;
   const options = useMemo(() => items.map((item) => ({ label: item.label, value: item.route })), [items]);
   const activeRoute = resolveActiveRoute(items, pathname) ?? NO_ACTIVE_ROUTE2;
   const label = resolvePillMenuLabel(items, pathname, regionLabel);
@@ -1901,11 +1896,12 @@ var PillNavMenu = ({
       options,
       testID,
       value: activeRoute,
-      variant: dropdownVariant,
+      selectedMarker: SelectedMarker.AccentCheck,
+      variant: dropdownVariant ?? DropdownVariant.Menu,
       onChange: onNavigate,
-      renderTrigger: ({ isOpen }) => /* @__PURE__ */ jsxs(View, { style: [pillNavStyles.pill, { backgroundColor: primaryColor }], children: [
-        /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: [pillNavStyles.pillText, pillNavStyles.menuTriggerText, { color: TEXT_ON_PRIMARY4 }], children: label }),
-        /* @__PURE__ */ jsx(Text, { style: [pillNavStyles.pillText, { color: TEXT_ON_PRIMARY4 }], children: isOpen ? "\u25B4" : "\u25BE" })
+      renderTrigger: ({ isOpen }) => /* @__PURE__ */ jsxs(View, { style: [pillNavStyles.pill, pillNavStyles.pillOutline, { backgroundColor: colors.background, borderColor: colors.text }], children: [
+        /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: [pillNavStyles.pillText, pillNavStyles.menuTriggerText, { color: colors.text }], children: label }),
+        /* @__PURE__ */ jsx(Text, { style: [pillNavStyles.pillText, { color: colors.text }], children: isOpen ? "\u25B4" : "\u25BE" })
       ] })
     }
   );
@@ -1917,7 +1913,7 @@ var PillNavVariant = /* @__PURE__ */ ((PillNavVariant2) => {
   PillNavVariant2["Menu"] = "menu";
   return PillNavVariant2;
 })(PillNavVariant || {});
-var TEXT_ON_PRIMARY5 = "#ffffff";
+var TEXT_ON_PRIMARY4 = "#ffffff";
 var DEFAULT_MIN_ITEMS = 1;
 var PillNav = ({
   items,
@@ -1961,7 +1957,7 @@ var PillNav = ({
       style: [pillNavStyles.container, containerStyle],
       children: items.map((item) => {
         const active = item.route === activeRoute;
-        const textColor = active ? TEXT_ON_PRIMARY5 : colors.textSecondary;
+        const textColor = active ? TEXT_ON_PRIMARY4 : colors.textSecondary;
         const pillStyle = active ? { backgroundColor: primaryColor } : { backgroundColor: colors.surfaceElevated };
         return /* @__PURE__ */ jsxs(
           FocusableTouchable,
@@ -1984,7 +1980,7 @@ var PillNav = ({
     }
   );
 };
-var TEXT_ON_PRIMARY6 = "#ffffff";
+var TEXT_ON_PRIMARY5 = "#ffffff";
 var DARK_MODE_ICON_SIZE = 16;
 var DarkModeControl = ({
   value,
@@ -2033,7 +2029,7 @@ var DarkModeControl = ({
       style: [darkModeStyles.segmentRow, { borderColor: colors.border }, containerStyle],
       children: options.map((option) => {
         const active = option.value === value;
-        const textColor = active ? TEXT_ON_PRIMARY6 : colors.textSecondary;
+        const textColor = active ? TEXT_ON_PRIMARY5 : colors.textSecondary;
         return /* @__PURE__ */ jsxs(
           FocusableTouchable,
           {