@dloizides/ui-nav 1.2.0 → 1.4.0

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { StyleSheet, TouchableOpacity, View, Text, useWindowDimensions, ActivityIndicator, ScrollView } from 'react-native';
+import { StyleSheet, Platform, TouchableOpacity, View, Text, useWindowDimensions, Pressable, ActivityIndicator, ScrollView } from 'react-native';
 import { useUi } from '@dloizides/ui-feedback';
 import { useState, useCallback, useMemo, useEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -79,7 +79,12 @@ var navBarStyles = StyleSheet.create({
     marginLeft: "auto",
     paddingHorizontal: 10,
     paddingVertical: 6,
-    borderRadius: 4
+    borderRadius: 4,
+    // a11y: keep the hamburger a comfortable ≥44×44 touch target.
+    minWidth: 44,
+    minHeight: 44,
+    alignItems: "center",
+    justifyContent: "center"
   },
   toggleGlyph: { fontSize: 20, fontWeight: "700" },
   links: {
@@ -104,7 +109,10 @@ var navBarStyles = StyleSheet.create({
     paddingHorizontal: 14,
     borderRadius: 8,
     flexDirection: "row",
-    alignItems: "center"
+    alignItems: "center",
+    // a11y: comfortable ≥44 tall touch target (rounded-pill hover/active affordance).
+    minHeight: 44,
+    justifyContent: "center"
   },
   linkStacked: { paddingVertical: 10 },
   linkIcon: { marginRight: 6 },
@@ -147,6 +155,31 @@ var expandableStyles = StyleSheet.create({
 var BASE_INDENT = 12;
 var NAV_ICON_SIZE = 14;
 var CHEVRON_ICON_SIZE = 12;
+var IS_WEB = Platform.OS === "web";
+var FOCUS_RING_WIDTH = 2;
+var FOCUS_RING_OFFSET = 2;
+var HOVER_TRANSITION_MS = 150;
+function focusRingStyle(focused, ringColor) {
+  if (!IS_WEB || !focused) return void 0;
+  const ring = {
+    outlineWidth: FOCUS_RING_WIDTH,
+    outlineStyle: "solid",
+    outlineColor: ringColor,
+    outlineOffset: FOCUS_RING_OFFSET
+  };
+  return ring;
+}
+function hoverTransitionStyle(reducedMotion) {
+  if (!IS_WEB) return void 0;
+  const transition = {
+    transitionProperty: "color, background-color",
+    transitionDuration: reducedMotion ? "0ms" : `${HOVER_TRANSITION_MS}ms`
+  };
+  return transition;
+}
+function ariaCurrentProps(isActive) {
+  return isActive ? { "aria-current": "page" } : {};
+}
 var NavExpandableItem = ({
   item,
   pathname,
@@ -158,6 +191,7 @@ var NavExpandableItem = ({
   depth = 0
 }) => {
   const [expanded, setExpanded] = useState(false);
+  const [focused, setFocused] = useState(false);
   const { theme } = useUi();
   const colors = theme.colors;
   const primaryColor = theme.palette.primary["500"];
@@ -178,9 +212,18 @@ var NavExpandableItem = ({
         accessibilityHint: navigateHint(item.label),
         accessibilityLabel: item.label,
         accessibilityRole: "button",
-        style: [expandableStyles.childItem, paddingStyle, isActive ? activeItemStyle : void 0],
+        accessibilityState: { selected: isActive },
+        style: [
+          expandableStyles.childItem,
+          paddingStyle,
+          isActive ? activeItemStyle : void 0,
+          focusRingStyle(focused, primaryColor)
+        ],
         testID: item.testID ?? item.key,
+        onBlur: () => setFocused(false),
+        onFocus: () => setFocused(true),
         onPress: () => onNavigate(item.route),
+        ...ariaCurrentProps(isActive),
         children: [
           typeof item.renderIcon === "function" ? /* @__PURE__ */ jsx(View, { style: expandableStyles.iconWrapper, children: item.renderIcon(colors.textSecondary, NAV_ICON_SIZE) }) : null,
           /* @__PURE__ */ jsx(
@@ -204,8 +247,10 @@ var NavExpandableItem = ({
         accessibilityLabel: item.label,
         accessibilityRole: "button",
         accessibilityState: { expanded },
-        style: [expandableStyles.header, headerPaddingStyle],
+        style: [expandableStyles.header, headerPaddingStyle, focusRingStyle(focused, primaryColor)],
         testID: item.testID ?? item.key,
+        onBlur: () => setFocused(false),
+        onFocus: () => setFocused(true),
         onPress: toggle,
         children: [
           typeof item.renderIcon === "function" ? /* @__PURE__ */ jsx(View, { style: expandableStyles.iconWrapper, children: item.renderIcon(colors.text, NAV_ICON_SIZE) }) : null,
@@ -299,12 +344,40 @@ var APP_SHELL_SUFFIX = {
   content: "-content",
   header: "-header",
   nav: "-nav",
+  /** The persistent left rail of the back-office layout (only when `sidebar` is supplied). */
+  sidebar: "-sidebar",
   banner: "-banner",
   pending: "-pending",
   loading: "-loading",
   error: "-error",
   forbidden: "-forbidden"
 };
+var FocusableTouchable = ({
+  onPress,
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityRole = "button",
+  ringColor,
+  style,
+  testID,
+  children
+}) => {
+  const [focused, setFocused] = useState(false);
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      accessibilityHint,
+      accessibilityLabel,
+      accessibilityRole,
+      style: [style, focusRingStyle(focused, ringColor)],
+      testID,
+      onBlur: () => setFocused(false),
+      onFocus: () => setFocused(true),
+      onPress,
+      children
+    }
+  );
+};
 var TEXT_ON_PRIMARY = "#ffffff";
 function isAccountState(account) {
   return "displayName" in account;
@@ -342,11 +415,11 @@ var Topbar = ({
         /* @__PURE__ */ jsx(View, { style: navStyles.topbarLeft, children: left }),
         /* @__PURE__ */ jsxs(View, { style: navStyles.topbarRight, children: [
           language ? /* @__PURE__ */ jsx(
-            TouchableOpacity,
+            FocusableTouchable,
             {
               accessibilityHint: language.hint,
               accessibilityLabel: language.label,
-              accessibilityRole: "button",
+              ringColor: primaryColor,
               style: navStyles.topbarRowItem,
               onPress: language.onPress,
               children: /* @__PURE__ */ jsx(Text, { style: [navStyles.topbarLabel, { color: colors.text }], children: language.label })
@@ -359,11 +432,11 @@ var Topbar = ({
           ] }) : null,
           richAccount ? /* @__PURE__ */ jsxs(View, { style: navStyles.userBlock, children: [
             richAccount.onAccount ? /* @__PURE__ */ jsx(
-              TouchableOpacity,
+              FocusableTouchable,
               {
                 accessibilityHint: richAccount.displayName,
                 accessibilityLabel: richAccount.displayName,
-                accessibilityRole: "button",
+                ringColor: primaryColor,
                 testID: NAV_TEST_IDS.accountName,
                 onPress: richAccount.onAccount,
                 children: /* @__PURE__ */ jsx(Text, { style: [navStyles.userName, { color: colors.text }], children: richAccount.displayName })
@@ -387,11 +460,11 @@ var Topbar = ({
             ) : null
           ] }) : null,
           legacyAccount ? /* @__PURE__ */ jsx(
-            TouchableOpacity,
+            FocusableTouchable,
             {
               accessibilityHint: legacyAccount.hint,
               accessibilityLabel: legacyAccount.label,
-              accessibilityRole: "button",
+              ringColor: primaryColor,
               style: [navStyles.accountBtn, { backgroundColor: primaryColor }],
               testID: legacyAccount.testID,
               onPress: legacyAccount.onPress,
@@ -399,11 +472,11 @@ var Topbar = ({
             }
           ) : null,
           upgrade ? /* @__PURE__ */ jsx(
-            TouchableOpacity,
+            FocusableTouchable,
             {
               accessibilityHint: upgrade.hint,
               accessibilityLabel: upgrade.label,
-              accessibilityRole: "button",
+              ringColor: primaryColor,
               style: [navStyles.accountBtn, { backgroundColor: primaryColor }],
               testID: upgrade.testID ?? NAV_TEST_IDS.accountUpgrade,
               onPress: upgrade.onPress,
@@ -411,12 +484,11 @@ var Topbar = ({
             }
           ) : null,
           /* @__PURE__ */ jsx(
-            TouchableOpacity,
+            FocusableTouchable,
             {
-              accessible: true,
               accessibilityHint: logout.hint,
               accessibilityLabel: logout.label,
-              accessibilityRole: "button",
+              ringColor: primaryColor,
               style: [navStyles.accountBtn, { backgroundColor: primaryColor }],
               testID: logout.testID,
               onPress: richAccount ? richAccount.onLogout : logout.onPress,
@@ -429,10 +501,75 @@ var Topbar = ({
   );
 };
 var TEXT_ON_PRIMARY2 = "#ffffff";
+function ariaCurrentProps2(isActive) {
+  return isActive ? { "aria-current": "page" } : {};
+}
+var NavBarLink = ({
+  item,
+  isActive,
+  collapsed,
+  iconSize,
+  reducedMotion,
+  colors,
+  navigateHint,
+  onPress
+}) => {
+  const [hovered, setHovered] = useState(false);
+  const [focused, setFocused] = useState(false);
+  const isHovered = hovered && !isActive;
+  const textColor = isActive ? TEXT_ON_PRIMARY2 : isHovered ? colors.hoverText : colors.rest;
+  const pillStyle = isActive ? { backgroundColor: colors.activeBg } : isHovered ? { backgroundColor: colors.hoverBg } : void 0;
+  return /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      accessibilityHint: navigateHint(item.label),
+      accessibilityLabel: item.label,
+      accessibilityRole: "link",
+      accessibilityState: { selected: isActive },
+      style: [
+        navBarStyles.link,
+        collapsed ? navBarStyles.linkStacked : void 0,
+        pillStyle,
+        hoverTransitionStyle(reducedMotion),
+        focusRingStyle(focused, colors.ring)
+      ],
+      testID: item.testID ?? item.key,
+      onBlur: () => setFocused(false),
+      onFocus: () => setFocused(true),
+      onHoverIn: () => setHovered(true),
+      onHoverOut: () => setHovered(false),
+      onPress: () => onPress(item.route),
+      ...ariaCurrentProps2(isActive),
+      children: [
+        typeof item.renderIcon === "function" ? /* @__PURE__ */ jsx(View, { style: navBarStyles.linkIcon, children: item.renderIcon(textColor, iconSize) }) : null,
+        /* @__PURE__ */ jsx(Text, { style: [navBarStyles.linkText, { color: textColor }], children: item.label })
+      ]
+    }
+  );
+};
+var REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+function getReducedMotionQuery() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return void 0;
+  return window.matchMedia(REDUCED_MOTION_QUERY);
+}
+function useReducedMotion() {
+  const [reduced, setReduced] = useState(() => getReducedMotionQuery()?.matches ?? false);
+  useEffect(() => {
+    const mql = getReducedMotionQuery();
+    if (mql === void 0 || mql.addEventListener === void 0) return void 0;
+    const onChange = () => setReduced(mql.matches);
+    mql.addEventListener("change", onChange);
+    return () => {
+      mql.removeEventListener?.("change", onChange);
+    };
+  }, []);
+  return reduced;
+}
+var LINKS_REGION_ID = "navbar-links-region";
 var DEFAULT_COLLAPSE_BELOW = 760;
 var MENU_GLYPH = "\u2630";
-function activeAriaProps(isActive) {
-  return isActive ? { "aria-current": "page" } : {};
+function ariaControlsProps(id) {
+  return { "aria-controls": id };
 }
 var NavBar = ({
   items,
@@ -452,7 +589,9 @@ var NavBar = ({
   const colors = theme.colors;
   const primaryColor = theme.palette.primary["500"];
   const { width } = useWindowDimensions();
+  const reducedMotion = useReducedMotion();
   const [open, setOpen] = useState(false);
+  const [toggleFocused, setToggleFocused] = useState(false);
   const collapsed = width < collapseBelow;
   const showLinks = !collapsed || open;
   const toggleMenu = useCallback(() => setOpen((v) => !v), []);
@@ -463,33 +602,16 @@ var NavBar = ({
     },
     [onNavigate]
   );
-  const activeLinkStyle = useMemo(
-    () => ({ backgroundColor: primaryColor, borderRadius: ACTIVE_BORDER_RADIUS }),
-    [primaryColor]
+  const linkColors = useMemo(
+    () => ({
+      rest: colors.textSecondary,
+      hoverText: colors.text,
+      hoverBg: colors.surfaceElevated,
+      activeBg: primaryColor,
+      ring: primaryColor
+    }),
+    [colors.textSecondary, colors.text, colors.surfaceElevated, primaryColor]
   );
-  const renderLink = (item) => {
-    const isActive = isRouteActive(pathname, item.route);
-    const textColor = isActive ? TEXT_ON_PRIMARY2 : colors.textSecondary;
-    return /* @__PURE__ */ jsxs(
-      TouchableOpacity,
-      {
-        accessible: true,
-        accessibilityHint: navigateHint(item.label),
-        accessibilityLabel: item.label,
-        accessibilityRole: "link",
-        accessibilityState: { selected: isActive },
-        style: [navBarStyles.link, collapsed ? navBarStyles.linkStacked : void 0, isActive ? activeLinkStyle : void 0],
-        testID: item.testID ?? item.key,
-        onPress: () => handlePress(item.route),
-        ...activeAriaProps(isActive),
-        children: [
-          typeof item.renderIcon === "function" ? /* @__PURE__ */ jsx(View, { style: navBarStyles.linkIcon, children: item.renderIcon(textColor, NAV_ICON_SIZE) }) : null,
-          /* @__PURE__ */ jsx(Text, { style: [navBarStyles.linkText, { color: textColor }], children: item.label })
-        ]
-      },
-      item.key
-    );
-  };
   return /* @__PURE__ */ jsx(
     View,
     {
@@ -504,21 +626,44 @@ var NavBar = ({
       children: /* @__PURE__ */ jsxs(View, { style: navBarStyles.inner, children: [
         brand !== void 0 ? /* @__PURE__ */ jsx(View, { style: navBarStyles.brand, children: brand }) : null,
         collapsed ? /* @__PURE__ */ jsx(
-          TouchableOpacity,
+          Pressable,
           {
-            accessible: true,
             accessibilityHint: menuHint,
             accessibilityLabel: menuLabel,
             accessibilityRole: "button",
             accessibilityState: { expanded: open },
             "aria-expanded": open,
-            style: navBarStyles.toggle,
+            style: [navBarStyles.toggle, focusRingStyle(toggleFocused, primaryColor)],
             testID: NAV_TEST_IDS.navBarToggle,
+            onBlur: () => setToggleFocused(false),
+            onFocus: () => setToggleFocused(true),
             onPress: toggleMenu,
+            ...ariaControlsProps(LINKS_REGION_ID),
             children: typeof renderMenuIcon === "function" ? renderMenuIcon(colors.text, open) : /* @__PURE__ */ jsx(Text, { style: [navBarStyles.toggleGlyph, { color: colors.text }], children: MENU_GLYPH })
           }
         ) : null,
-        showLinks ? /* @__PURE__ */ jsx(View, { style: collapsed ? navBarStyles.linksStacked : navBarStyles.links, testID: NAV_TEST_IDS.navBarLinks, children: items.map(renderLink) }) : null,
+        showLinks ? /* @__PURE__ */ jsx(
+          View,
+          {
+            nativeID: LINKS_REGION_ID,
+            style: collapsed ? navBarStyles.linksStacked : navBarStyles.links,
+            testID: NAV_TEST_IDS.navBarLinks,
+            children: items.map((item) => /* @__PURE__ */ jsx(
+              NavBarLink,
+              {
+                collapsed,
+                colors: linkColors,
+                iconSize: NAV_ICON_SIZE,
+                isActive: isRouteActive(pathname, item.route),
+                item,
+                navigateHint,
+                reducedMotion,
+                onPress: handlePress
+              },
+              item.key
+            ))
+          }
+        ) : null,
         showLinks && right !== void 0 ? /* @__PURE__ */ jsx(View, { style: collapsed ? navBarStyles.rightStacked : navBarStyles.right, children: right }) : null
       ] })
     }
@@ -546,6 +691,8 @@ var styles = StyleSheet.create({
   centerFill: { flex: 1, justifyContent: "center", alignItems: "center" },
   scroll: { flex: 1 },
   scrollContent: { flexGrow: 1 },
+  // Back-office layout: a persistent left rail beside the scrolling content column.
+  bodyRow: { flex: 1, flexDirection: "row" },
   columnFull: { flex: 1 },
   columnCapped: { flex: 1, width: "100%", alignSelf: "center" },
   // Non-flex variant used to cap the nav strip's inner content to the content
@@ -593,6 +740,7 @@ function useContentBody(state, children, testID) {
 var AppShell = ({
   header,
   nav,
+  sidebar,
   banner,
   width = "full",
   contentPadding = DEFAULT_CONTENT_PADDING,
@@ -615,19 +763,23 @@ var AppShell = ({
   if (isUnauthenticated) return null;
   const columnStyle = maxWidth === "full" ? styles.columnFull : [styles.columnCapped, { maxWidth }];
   const navInnerStyle = chromeAlignment === "content" && maxWidth !== "full" ? [styles.chromeCapped, { maxWidth, paddingHorizontal: contentPadding }] : void 0;
+  const scroller = /* @__PURE__ */ jsx(
+    ScrollView,
+    {
+      contentContainerStyle: [styles.scrollContent, { padding: contentPadding }],
+      style: styles.scroll,
+      testID: `${testID}${APP_SHELL_SUFFIX.content}`,
+      children: /* @__PURE__ */ jsx(View, { style: columnStyle, children: body })
+    }
+  );
   return /* @__PURE__ */ jsxs(View, { style: [styles.root, { backgroundColor: theme.colors.background }], testID, children: [
     /* @__PURE__ */ jsx(View, { testID: `${testID}${APP_SHELL_SUFFIX.header}`, children: header }),
     nav !== void 0 ? /* @__PURE__ */ jsx(View, { testID: `${testID}${APP_SHELL_SUFFIX.nav}`, children: navInnerStyle !== void 0 ? /* @__PURE__ */ jsx(View, { style: navInnerStyle, children: nav }) : nav }) : null,
     banner !== void 0 ? /* @__PURE__ */ jsx(View, { testID: `${testID}${APP_SHELL_SUFFIX.banner}`, children: banner }) : null,
-    /* @__PURE__ */ jsx(
-      ScrollView,
-      {
-        contentContainerStyle: [styles.scrollContent, { padding: contentPadding }],
-        style: styles.scroll,
-        testID: `${testID}${APP_SHELL_SUFFIX.content}`,
-        children: /* @__PURE__ */ jsx(View, { style: columnStyle, children: body })
-      }
-    )
+    sidebar !== void 0 ? /* @__PURE__ */ jsxs(View, { style: styles.bodyRow, children: [
+      /* @__PURE__ */ jsx(View, { testID: `${testID}${APP_SHELL_SUFFIX.sidebar}`, children: sidebar }),
+      scroller
+    ] }) : scroller
   ] });
 };
 function roleRoutesToNavItems(routes, translate) {