@dloizides/ui-nav 1.23.1 → 1.24.0

package/dist/index.mjs

@@ -65,11 +65,24 @@ var navStyles = StyleSheet.create({
     justifyContent: "space-between"
   },
   topbarLeft: { flex: 1 },
+  topbarCenter: { flexShrink: 1, minWidth: 0, flexDirection: "row", alignItems: "center", marginHorizontal: 8 },
   topbarRight: { flexDirection: "row", alignItems: "center" },
-  topbarRowItem: { marginHorizontal: 8, alignItems: "center" },
+  topbarRowItem: {
+    marginHorizontal: 8,
+    alignItems: "center",
+    justifyContent: "center",
+    minHeight: MIN_TOUCH_TARGET,
+    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"
+  },
   userEmail: { fontSize: 12 },
   accountBtn: {
     marginLeft: 8,
@@ -206,7 +219,8 @@ var pillNavStyles = StyleSheet.create({
     columnGap: 6,
     justifyContent: "center"
   },
-  pillText: { fontSize: 14, fontWeight: "600" }
+  pillText: { fontSize: 14, fontWeight: "600" },
+  menuTriggerText: { flexShrink: 1 }
 });
 var darkModeStyles = StyleSheet.create({
   // Segmented Light / Dark / System control.
@@ -863,7 +877,11 @@ var NAV_TEST_IDS = {
   /** links container in the horizontal NavBar. */
   navBarLinks: "navbar-links",
   /** the "More ▾" priority+ overflow trigger in the horizontal NavBar (shown when items spill). */
-  navBarOverflow: "navbar-overflow"
+  navBarOverflow: "navbar-overflow",
+  /** the compact "Current ▾" trigger of `PillNav` with `variant={PillNavVariant.Menu}`. */
+  pillNavMenu: "pill-nav-menu",
+  /** the optional middle slot of `Topbar` (rendered only when `center` is passed). */
+  topbarCenter: "topbar-center"
 };
 var APP_SHELL_SUFFIX = {
   content: "-content",
@@ -923,6 +941,7 @@ function planToneColor(theme, tone) {
 }
 var Topbar = ({
   left,
+  center,
   language,
   notificationSlot,
   user,
@@ -946,6 +965,7 @@ var Topbar = ({
       ],
       children: [
         /* @__PURE__ */ jsx(View, { style: navStyles.topbarLeft, children: renderTextSlot(left, { color: colors.text }) }),
+        center !== void 0 && center !== null ? /* @__PURE__ */ jsx(View, { style: navStyles.topbarCenter, testID: NAV_TEST_IDS.topbarCenter, children: renderTextSlot(center, { color: colors.text }) }) : null,
         /* @__PURE__ */ jsxs(View, { style: navStyles.topbarRight, children: [
           language ? /* @__PURE__ */ jsx(
             FocusableTouchable,
@@ -971,6 +991,7 @@ var Topbar = ({
                 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, { style: [navStyles.userName, { color: colors.text }], children: richAccount.displayName })
@@ -1840,7 +1861,61 @@ var NavShell = ({
     }
   );
 };
+
+// src/pillMenuLabel.ts
+function resolvePillMenuLabel(items, pathname, fallback) {
+  const activeRoute = resolveActiveRoute(items, pathname);
+  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 = ({
+  items,
+  pathname,
+  onNavigate,
+  regionLabel,
+  hint,
+  testID = NAV_TEST_IDS.pillNavMenu,
+  dropdownVariant
+}) => {
+  const { theme } = useUi();
+  const primaryColor = theme.palette.primary["500"];
+  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);
+  const optionTestID = useMemo(() => {
+    const byRoute = new Map(items.map((item) => [item.route, item.testID ?? item.key]));
+    return (route) => byRoute.get(route) ?? `${testID}-option-${route}`;
+  }, [items, testID]);
+  return /* @__PURE__ */ jsx(
+    ModalDropdown,
+    {
+      accessibilityHint: hint,
+      accessibilityLabel: label,
+      menuMinWidth: PILL_MENU_MIN_WIDTH,
+      optionTestID,
+      options,
+      testID,
+      value: activeRoute,
+      variant: dropdownVariant,
+      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" })
+      ] })
+    }
+  );
+};
+
+// src/PillNavVariant.ts
+var PillNavVariant = /* @__PURE__ */ ((PillNavVariant2) => {
+  PillNavVariant2["Pills"] = "pills";
+  PillNavVariant2["Menu"] = "menu";
+  return PillNavVariant2;
+})(PillNavVariant || {});
+var TEXT_ON_PRIMARY5 = "#ffffff";
 var DEFAULT_MIN_ITEMS = 1;
 var PillNav = ({
   items,
@@ -1849,12 +1924,29 @@ var PillNav = ({
   regionLabel,
   navigateHint = (label) => label,
   minItems = DEFAULT_MIN_ITEMS,
+  variant = "pills" /* Pills */,
+  menuHint,
+  menuTestID,
+  dropdownVariant,
   containerStyle
 }) => {
   const { theme } = useUi();
   const colors = theme.colors;
   const primaryColor = theme.palette.primary["500"];
   if (items.length < minItems) return null;
+  if (variant === "menu" /* Menu */)
+    return /* @__PURE__ */ jsx(View, { accessibilityRole: "none", "aria-label": regionLabel, role: "navigation", style: containerStyle, children: /* @__PURE__ */ jsx(
+      PillNavMenu,
+      {
+        dropdownVariant,
+        hint: menuHint ?? regionLabel,
+        items,
+        pathname,
+        regionLabel,
+        testID: menuTestID,
+        onNavigate
+      }
+    ) });
   const activeRoute = resolveActiveRoute(items, pathname);
   return /* @__PURE__ */ jsx(
     View,
@@ -1865,7 +1957,7 @@ var PillNav = ({
       style: [pillNavStyles.container, containerStyle],
       children: items.map((item) => {
         const active = item.route === activeRoute;
-        const textColor = active ? TEXT_ON_PRIMARY4 : colors.textSecondary;
+        const textColor = active ? TEXT_ON_PRIMARY5 : colors.textSecondary;
         const pillStyle = active ? { backgroundColor: primaryColor } : { backgroundColor: colors.surfaceElevated };
         return /* @__PURE__ */ jsxs(
           FocusableTouchable,
@@ -1888,7 +1980,7 @@ var PillNav = ({
     }
   );
 };
-var TEXT_ON_PRIMARY5 = "#ffffff";
+var TEXT_ON_PRIMARY6 = "#ffffff";
 var DARK_MODE_ICON_SIZE = 16;
 var DarkModeControl = ({
   value,
@@ -1937,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_PRIMARY5 : colors.textSecondary;
+        const textColor = active ? TEXT_ON_PRIMARY6 : colors.textSecondary;
         return /* @__PURE__ */ jsxs(
           FocusableTouchable,
           {
@@ -2122,6 +2214,6 @@ function accessibleNavItems(user, table, translate) {
   return roleRoutesToNavItems(resolveAccessibleRoutes(user, table), translate);
 }
 
-export { ACTIVE_BORDER_RADIUS, ACTIVE_TINT_OPACITY, APP_SHELL_SUFFIX, AppShell, BASE_INDENT, CHEVRON_ICON_SIZE, CollapsedRail, CommandPalette, CommandPaletteTrigger, DEFAULT_COLLAPSED_RAIL_MAX, DEFAULT_SEARCH_BREAKPOINT, DarkModeControl, HOVER_TINT_OPACITY, NAV_ICON_SIZE, NAV_LINK_GAP, NAV_ROW_RADIUS, NAV_TEST_IDS, Nav, NavBar, NavExpandableItem, NavOverflowMenu, NavShell, PillNav, RAIL_FULL_BREAKPOINT, Sidebar, SidebarChevron, SidebarSearch, Topbar, accessibleNavItems, collapsedRailStyles, darkModeStyles, expandableStyles, filterCommands, filterNavItems, isFilterActive, isRouteActive, navStyles, pillNavStyles, resolveActiveRoute, resolveContentMaxWidth, resolveRailMode, resolveSearchAffordance, roleRoutesToNavItems, searchTokens, useCommandPaletteHotkey, useContentMaxWidth };
+export { ACTIVE_BORDER_RADIUS, ACTIVE_TINT_OPACITY, APP_SHELL_SUFFIX, AppShell, BASE_INDENT, CHEVRON_ICON_SIZE, CollapsedRail, CommandPalette, CommandPaletteTrigger, DEFAULT_COLLAPSED_RAIL_MAX, DEFAULT_SEARCH_BREAKPOINT, DarkModeControl, HOVER_TINT_OPACITY, NAV_ICON_SIZE, NAV_LINK_GAP, NAV_ROW_RADIUS, NAV_TEST_IDS, Nav, NavBar, NavExpandableItem, NavOverflowMenu, NavShell, PillNav, PillNavVariant, RAIL_FULL_BREAKPOINT, Sidebar, SidebarChevron, SidebarSearch, Topbar, accessibleNavItems, collapsedRailStyles, darkModeStyles, expandableStyles, filterCommands, filterNavItems, isFilterActive, isRouteActive, navStyles, pillNavStyles, resolveActiveRoute, resolveContentMaxWidth, resolvePillMenuLabel, resolveRailMode, resolveSearchAffordance, roleRoutesToNavItems, searchTokens, useCommandPaletteHotkey, useContentMaxWidth };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map