pixelize-native-library 1.0.7 → 1.2.0

package/lib/module/modules/bottom-nav/BottomNav.js

@@ -9,30 +9,31 @@
  * escape hooks (backdrop press, Android hardware back, iOS VoiceOver escape, the web-portal opt-in)
  * is inherited for free.
  *
- * `BottomNav.tsx` owns only the fixed bar: per-tab focus tracking, the active-indicator render
- * (presence/absence + a label-weight switch, never colour alone — see the accessibility contract in
- * MODULE.md), wiring press → `onDestinationPress`, and closing the sheet after a sheet-row selection.
- * The sheet's actual content (search, Recent, grouped sections, edit mode, no-results) is
- * `BottomNavOverflowSheet` — a private sub-component in its own file, the same "this warrants its own
- * file" call this library already made for Reorder's private `ReorderRow`.
+ * `BottomNav.tsx` owns only the bar's composition: laying out the slots, wiring press →
+ * `onDestinationPress`, and closing the sheet after a sheet-row selection. One slot — icon, badge,
+ * label, focus ring, active indicator, and that indicator's transition — is `BottomNavTab`, rendered
+ * for the core tabs AND the More slot. The sheet's actual content (search, Recent, grouped sections,
+ * edit mode, no-results) is `BottomNavOverflowSheet`. Both are private sub-components in their own
+ * files, the same "this warrants its own file" call this library already made for Reorder's private
+ * `ReorderRow`.
  *
  * Every piece of state here was classified against one question: does anything OUTSIDE this
  * component plausibly need to read or set it? `active`, `moreVisible`, `recent`, `coreTabs`, and
  * `edit.editing` all answer yes (the app's own router/persistence owns them) and are therefore
  * controlled props, never internal state — see MODULE.md's "Controlled-state contract" for the full,
- * item-by-item reasoning. Only per-tab keyboard/AT focus is internal here, the same idiom
- * Button/Input/Select already use for their own focus rings.
+ * item-by-item reasoning. Only per-tab keyboard/AT focus is internal, and it lives inside
+ * `BottomNavTab` — the same idiom Button/Input/Select use for their own focus rings.
  */
 
-import { memo, useCallback, useMemo, useState } from "react";
-import { Platform, Pressable, StyleSheet, Text, View } from "react-native";
-import { useTheme } from "../../theme/index.js";
+import { memo, useCallback, useMemo } from "react";
+import { Platform, StyleSheet, View } from "react-native";
+import { useTheme } from "../../theme/hooks.js";
 import { Button } from "../button/index.js";
 import { Drawer } from "../drawer/index.js";
 import { Menu } from "../menu/index.js";
-import { BOTTOM_NAV_ICON_SIZE, bottomNavBarStructure, bottomNavTabStructure, resolveBottomNavAccessibility, resolveBottomNavBadge, resolveBottomNavBottomInset, resolveBottomNavDestinationAccessibilityLabel, resolveBottomNavOverflowBadgeTotal, resolveBottomNavTabColors } from "./BottomNav.variants.js";
-import { BottomNavIconWithBadge } from "./BottomNavIconWithBadge.js";
+import { bottomNavBarStructure, resolveBottomNavBottomInset, resolveBottomNavOverflowBadgeTotal } from "./BottomNav.variants.js";
 import { BottomNavOverflowSheet } from "./BottomNavOverflowSheet.js";
+import { BottomNavTab } from "./BottomNavTab.js";
 
 /** Fully app-supplied. The library never hardcodes a destination's id, label, icon, or grouping. */
 
@@ -54,31 +55,11 @@ const DEFAULT_MORE_QUICK_ACTIONS_LABEL = "More options";
 // Nudges the quick-actions badge toward the More tab's corner without clipping its own ≥44dp target
 // (Button's `hitSlop` still expands outward from this offset position).
 const QUICK_ACTIONS_BADGE_OFFSET = -4;
-// The active-tab dot — presence/absence conveys selection (WCAG 1.4.1), never a colour swap alone.
-const ACTIVE_DOT_SIZE = 6;
 // Stable identity so an omitted `recent` hands `BottomNavOverflowSheet` the SAME empty array every
 // render, rather than a fresh `[]` literal that would defeat its memo.
 const EMPTY_RECENT = [];
-
-/** Which tab currently holds keyboard/AT focus — a discriminated shape (not a bare id) so the More
- *  tab, whose "id" isn't one of `coreTabs`, can't collide with a core tab that happens to share it. */
-
-function focusRing(theme, testID) {
-  return /*#__PURE__*/_jsx(View, {
-    pointerEvents: "none",
-    testID: testID,
-    style: {
-      position: "absolute",
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
-      borderWidth: 2,
-      borderColor: theme.colors.border.focus,
-      borderRadius: theme.radii.base
-    }
-  });
-}
+// The More slot has no destination id; its own press handler takes no argument.
+const MORE_TAB_ID = "more";
 export const BottomNav = /*#__PURE__*/memo(function BottomNav(props) {
   const {
     coreTabs,
@@ -101,15 +82,10 @@ export const BottomNav = /*#__PURE__*/memo(function BottomNav(props) {
     testID
   } = props;
   const theme = useTheme();
-  const [focused, setFocused] = useState(null);
   const bottomInset = resolveBottomNavBottomInset(theme.space[2], Platform.OS);
   const moreSelected = active.kind === "more";
-  const moreColors = resolveBottomNavTabColors(theme.colors, moreSelected);
-  const moreA11y = resolveBottomNavAccessibility({
-    selected: moreSelected,
-    expanded: moreVisible
-  });
   const overflowBadgeTotal = resolveBottomNavOverflowBadgeTotal(overflowSections);
+  const openSheet = useCallback(() => onMoreVisibleChange(true), [onMoreVisibleChange]);
   const closeSheet = useCallback(() => onMoreVisibleChange(false), [onMoreVisibleChange]);
   // Every navigation intent inside the sheet reports through the same `onDestinationPress` the core
   // tabs use, then closes the sheet — see the interaction model in MODULE.md. Stable via useCallback
@@ -138,92 +114,27 @@ export const BottomNav = /*#__PURE__*/memo(function BottomNav(props) {
         borderTopColor: theme.colors.border.default,
         paddingBottom: bottomInset
       }, style],
-      children: [coreTabs.map(tab => {
-        const selected = active.kind === "core" && active.id === tab.id;
-        const colors = resolveBottomNavTabColors(theme.colors, selected);
-        const a11y = resolveBottomNavAccessibility({
-          selected
-        });
-        const isFocused = focused?.kind === "core" && focused.id === tab.id;
-        const tabTestID = testID ? `${testID}-tab-${tab.id}` : undefined;
-        return /*#__PURE__*/_jsxs(Pressable, {
-          testID: tabTestID,
-          accessibilityRole: a11y.accessibilityRole,
-          accessibilityLabel: resolveBottomNavDestinationAccessibilityLabel({
-            label: tab.label,
-            accessibilityLabel: tab.accessibilityLabel,
-            badge: resolveBottomNavBadge(tab.badge)
-          }),
-          accessibilityState: a11y.accessibilityState,
-          onPress: () => onDestinationPress(tab.id),
-          onFocus: () => setFocused({
-            kind: "core",
-            id: tab.id
-          }),
-          onBlur: () => setFocused(prev => prev?.kind === "core" && prev.id === tab.id ? null : prev),
-          style: bottomNavTabStructure(theme),
-          children: [isFocused && focusRing(theme, tabTestID ? `${tabTestID}-focus-ring` : undefined), /*#__PURE__*/_jsx(BottomNavIconWithBadge, {
-            icon: tab.icon,
-            iconSize: BOTTOM_NAV_ICON_SIZE,
-            iconColor: colors.icon,
-            badgeCount: tab.badge,
-            badgeTestID: tabTestID ? `${tabTestID}-badge` : undefined
-          }), /*#__PURE__*/_jsx(Text, {
-            numberOfLines: 1,
-            style: [theme.fontStyleForWeight(selected ? theme.fontWeights.semibold : theme.fontWeights.regular), {
-              fontSize: theme.fontSizes.xs,
-              color: colors.label
-            }],
-            children: tab.label
-          }), selected && /*#__PURE__*/_jsx(View, {
-            testID: tabTestID ? `${tabTestID}-indicator` : undefined,
-            style: {
-              width: ACTIVE_DOT_SIZE,
-              height: ACTIVE_DOT_SIZE,
-              borderRadius: ACTIVE_DOT_SIZE / 2,
-              backgroundColor: colors.indicator
-            }
-          })]
-        }, tab.id);
-      }), /*#__PURE__*/_jsxs(View, {
+      children: [coreTabs.map(tab => /*#__PURE__*/_jsx(BottomNavTab, {
+        id: tab.id,
+        label: tab.label,
+        icon: tab.icon,
+        accessibilityLabel: tab.accessibilityLabel,
+        badgeCount: tab.badge,
+        selected: active.kind === "core" && active.id === tab.id,
+        onPress: onDestinationPress,
+        testID: testID ? `${testID}-tab-${tab.id}` : undefined
+      }, tab.id)), /*#__PURE__*/_jsxs(View, {
         style: styles.moreSlot,
-        children: [/*#__PURE__*/_jsxs(Pressable, {
-          testID: testID ? `${testID}-more` : undefined,
-          accessibilityRole: moreA11y.accessibilityRole,
-          accessibilityLabel: resolveBottomNavDestinationAccessibilityLabel({
-            label: moreLabel,
-            badge: resolveBottomNavBadge(overflowBadgeTotal)
-          }),
-          accessibilityState: moreA11y.accessibilityState,
-          onPress: () => onMoreVisibleChange(true),
-          onFocus: () => setFocused({
-            kind: "more"
-          }),
-          onBlur: () => setFocused(prev => prev?.kind === "more" ? null : prev),
-          style: bottomNavTabStructure(theme),
-          children: [focused?.kind === "more" && focusRing(theme, testID ? `${testID}-more-focus-ring` : undefined), /*#__PURE__*/_jsx(BottomNavIconWithBadge, {
-            icon: moreIcon,
-            iconSize: BOTTOM_NAV_ICON_SIZE,
-            iconColor: moreColors.icon,
-            badgeCount: overflowBadgeTotal,
-            appearance: "dot",
-            badgeTestID: testID ? `${testID}-more-badge` : undefined
-          }), /*#__PURE__*/_jsx(Text, {
-            numberOfLines: 1,
-            style: [theme.fontStyleForWeight(moreSelected ? theme.fontWeights.semibold : theme.fontWeights.regular), {
-              fontSize: theme.fontSizes.xs,
-              color: moreColors.label
-            }],
-            children: moreLabel
-          }), moreSelected && /*#__PURE__*/_jsx(View, {
-            testID: testID ? `${testID}-more-indicator` : undefined,
-            style: {
-              width: ACTIVE_DOT_SIZE,
-              height: ACTIVE_DOT_SIZE,
-              borderRadius: ACTIVE_DOT_SIZE / 2,
-              backgroundColor: moreColors.indicator
-            }
-          })]
+        children: [/*#__PURE__*/_jsx(BottomNavTab, {
+          id: MORE_TAB_ID,
+          label: moreLabel,
+          icon: moreIcon,
+          badgeCount: overflowBadgeTotal,
+          badgeAppearance: "dot",
+          selected: moreSelected,
+          expanded: moreVisible,
+          onPress: openSheet,
+          testID: testID ? `${testID}-more` : undefined
         }), moreQuickActions !== undefined && /*#__PURE__*/_jsx(View, {
           style: styles.quickActionsBadge,
           children: /*#__PURE__*/_jsx(Menu, {

package/lib/module/modules/bottom-nav/BottomNav.variants.js

@@ -47,6 +47,14 @@ export const BOTTOM_NAV_BADGE_FONT_SIZE = 10;
 /** The More trigger's presence-only badge dot — same quiet idiom as the bar's active-indicator dot;
  *  the summed count still reaches AT users through the trigger's accessible name. */
 export const BOTTOM_NAV_BADGE_DOT_SIZE = 8;
+
+/** The active-tab dot. Geometry is static — selection is animated on opacity/scale only, so the
+ *  bar never reflows when the active tab changes. */
+export const BOTTOM_NAV_ACTIVE_DOT_SIZE = 6;
+
+/** The one settle magnitude the bar owns: the scale both the active dot and a badge grow FROM as
+ *  they fade in, so every appearance in this module reads as the same gesture. */
+export const BOTTOM_NAV_SETTLE_SCALE = 0.8;
 /** `undefined`/`0` (or any non-positive count) resolves to `null` — the badge renders nothing and
  *  leaves the accessible name untouched. */
 export function resolveBottomNavBadge(count) {
@@ -129,19 +137,16 @@ export function resolveBottomNavBadgeColors(colors) {
   };
 }
 /**
- * Derives one tab's accessibility surface once, purely (WCAG 4.1.2): `selected` is required,
- * `expanded` and `disabled` are folded in only when the caller actually passes them, so a plain
- * core tab's `accessibilityState` never carries a stray `expanded: undefined` key.
+ * Derives one tab's accessibility surface once, purely (WCAG 4.1.2): `selected` is required, while
+ * `expanded` and `disabled` stay `undefined` unless the caller passes them — React drops an
+ * `undefined` prop, so a plain core tab renders neither attribute.
  */
 export function resolveBottomNavAccessibility(input) {
-  const accessibilityState = {
-    selected: input.selected
-  };
-  if (input.expanded !== undefined) accessibilityState.expanded = input.expanded;
-  if (input.disabled !== undefined) accessibilityState.disabled = input.disabled;
   return {
     accessibilityRole: "tab",
-    accessibilityState
+    "aria-selected": input.selected,
+    "aria-expanded": input.expanded,
+    "aria-disabled": input.disabled
   };
 }
 /** Pure "is this the targeted slot" derivation, shared by the render tree and its tests — the same
@@ -175,6 +180,20 @@ export const bottomNavTabStructure = createThemedVariants(theme => ({
   }
 }));
 
+/** The keyboard/AT focus ring drawn over one tab's own bounds — same `border.focus` treatment
+ *  Button/Input use. Its colour is applied inline over this, never hardcoded here. */
+export const bottomNavFocusRingStructure = createThemedVariants(theme => ({
+  base: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    borderWidth: theme.borderWidths.thick,
+    borderRadius: theme.radii.base
+  }
+}));
+
 /** One row inside the overflow sheet — Recent, a grouped section's destination, or a search result.
  *  Same shape as Select's own `selectRowStructure` / Menu's `menuRowStructure`. */
 export const overflowRowStructure = createThemedVariants(theme => ({

package/lib/module/modules/bottom-nav/BottomNavIconWithBadge.js

@@ -14,11 +14,12 @@
  * accessible name but never passes that fresh-per-render object down.
  */
 
-import { memo } from "react";
-import { StyleSheet, Text, View } from "react-native";
+import { memo, useEffect, useMemo, useRef } from "react";
+import { Animated, StyleSheet, Text, View } from "react-native";
 import { Icon } from "../../core/icon/index.js";
-import { useTheme } from "../../theme/index.js";
-import { BOTTOM_NAV_BADGE_DOT_SIZE, BOTTOM_NAV_BADGE_FONT_SIZE, bottomNavBadgePillStructure, resolveBottomNavBadge, resolveBottomNavBadgeColors } from "./BottomNav.variants.js";
+import { useAnimatedValue, useMotion } from "../../core/motion/index.js";
+import { useTheme } from "../../theme/hooks.js";
+import { BOTTOM_NAV_BADGE_DOT_SIZE, BOTTOM_NAV_BADGE_FONT_SIZE, BOTTOM_NAV_SETTLE_SCALE, bottomNavBadgePillStructure, resolveBottomNavBadge, resolveBottomNavBadgeColors } from "./BottomNav.variants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ICON_STROKE = 2;
 const DOT_OFFSET = -2;
@@ -31,26 +32,67 @@ export const BottomNavIconWithBadge = /*#__PURE__*/memo(function BottomNavIconWi
   badgeTestID
 }) {
   const theme = useTheme();
+  const motion = useMotion();
   const badge = resolveBottomNavBadge(badgeCount);
   const badgeColors = resolveBottomNavBadgeColors(theme.colors);
+  const settle = useAnimatedValue(badge === null ? 0 : 1);
+  const running = useRef(null);
+  const firstRun = useRef(true);
+  const settleMotionStyle = useMemo(() => ({
+    opacity: settle,
+    transform: [{
+      scale: settle.interpolate({
+        inputRange: [0, 1],
+        outputRange: [BOTTOM_NAV_SETTLE_SCALE, 1]
+      })
+    }]
+  }), [settle]);
+  // No animation runs under reduce motion, so the settled style is rendered directly.
+  const settleStyle = motion.enabled ? settleMotionStyle : styles.settled;
+
+  // Keyed on the DISPLAY label, so a count change inside the "99+" cap doesn't re-settle a pill
+  // that looks identical.
+  const badgeLabel = badge?.label;
+  useEffect(() => {
+    // A badge already present at mount is part of the bar's resting state, not an appearance.
+    const onMount = firstRun.current;
+    firstRun.current = false;
+    running.current?.stop();
+    if (badgeLabel === undefined) {
+      settle.setValue(0);
+      return;
+    }
+    if (onMount || !motion.enabled) {
+      settle.setValue(1);
+      return;
+    }
+    settle.setValue(0);
+    running.current = motion.timing(settle, 1, {
+      duration: "fast",
+      easing: "decelerate"
+    });
+    running.current.start();
+    return () => running.current?.stop();
+  }, [badgeLabel, motion, settle]);
+  useEffect(() => () => running.current?.stop(), []);
   return /*#__PURE__*/_jsxs(View, {
     children: [/*#__PURE__*/_jsx(Icon, {
       name: icon,
       size: iconSize,
       color: iconColor,
       strokeWidth: ICON_STROKE
-    }), badge !== null && (appearance === "dot" ? /*#__PURE__*/_jsx(View, {
+    }), badge !== null && (appearance === "dot" ? /*#__PURE__*/_jsx(Animated.View, {
       testID: badgeTestID,
       pointerEvents: "none",
       style: [styles.dot, {
         backgroundColor: badgeColors.fill
-      }]
-    }) : /*#__PURE__*/_jsx(View, {
+      }, settleStyle]
+    }) : /*#__PURE__*/_jsx(Animated.View, {
       testID: badgeTestID,
       pointerEvents: "none",
       style: [bottomNavBadgePillStructure(theme), {
         backgroundColor: badgeColors.fill
-      }],
+      }, settleStyle],
       children: /*#__PURE__*/_jsx(Text, {
         numberOfLines: 1,
         style: [theme.fontStyleForWeight(theme.fontWeights.semibold), {
@@ -63,6 +105,12 @@ export const BottomNavIconWithBadge = /*#__PURE__*/memo(function BottomNavIconWi
   });
 });
 const styles = StyleSheet.create({
+  settled: {
+    opacity: 1,
+    transform: [{
+      scale: 1
+    }]
+  },
   dot: {
     position: "absolute",
     top: DOT_OFFSET,