@oxy.so/bloom 4.15.0 → 4.16.1

package/src/sidebar/types.ts

@@ -28,7 +28,7 @@ export interface SidebarNavItem {
   activeIcon?: SidebarIcon;
   /** Link target. On web the row renders a real anchor. */
   href?: string;
-  /** Counter badge on the right; primary-tinted when the row is selected. */
+  /** Counter badge at the row's end (the right in LTR); primary-tinted when the row is selected. */
   badge?: string | number;
   /**
    * An ACTION row (Settings → a modal): intercepts the navigation. When set,
@@ -87,7 +87,7 @@ export interface SidebarRailItemProps {
   activeIcon?: SidebarIcon;
   label: string;
   href?: string;
-  /** Sits over the indicator's top-right corner. */
+  /** Sits over the indicator's top-end corner (top-right in LTR). */
   badge?: ReactNode;
   selected?: boolean;
   onPress?: () => void;
@@ -158,6 +158,8 @@ export interface SidebarTeam {
   groups?: SidebarMenuGroup[];
   /** Footer line: product name and an optional version chip. */
   footer?: { label: string; version?: string };
+  /** Names the menu the card opens. Default `` `${name} menu` ``. */
+  menuLabel?: string;
 }
 
 export interface SidebarAccountUser {
@@ -210,6 +212,8 @@ export interface SidebarAccount {
   onManage?: () => void;
   addUserLabel?: string;
   manageLabel?: string;
+  /** Names the menu the switcher opens. Default `"Account menu"`. */
+  menuLabel?: string;
 }
 
 export interface SidebarTeamMenuProps {
@@ -289,6 +293,15 @@ export interface SidebarProps {
   /** Rendered inside a mobile drawer: always expanded, close button instead of collapse. */
   mobile?: boolean;
   onClose?: () => void;
+
+  /** The landmark's accessible name. Default `"Sidebar"`. */
+  accessibilityLabel?: string;
+  /** Names the collapse control while expanded. Default `"Collapse sidebar"`. */
+  collapseLabel?: string;
+  /** Names the same control while collapsed. Default `"Expand sidebar"`. */
+  expandLabel?: string;
+  /** Names the `mobile` close button. Default `"Close sidebar"`. */
+  closeLabel?: string;
   /** Expanded width fills the container instead of the size's own width. */
   fluid?: boolean;
   /** The panel's edge. Defaults to `card`. */
@@ -307,8 +320,17 @@ export interface SidebarProps {
   searchShortcutLabel?: string;
   /** Binds ⌘L / Ctrl+L on web. Defaults to true. */
   searchShortcut?: boolean;
+  /** Names the quick-search button. Default `"Quick Search"`. */
   searchLabel?: string;
+  /** Names the search button in a flat `mobile` header. Default `"Search"`. */
+  searchButtonLabel?: string;
+  /** Placeholder. Defaults `"Search navigation…"`, or `"Search..."` in a flat `mobile` header. */
   searchPlaceholder?: string;
+  /** Names the search field. Default `"Filter navigation"`. */
+  filterLabel?: string;
+  /** Names the button that clears and closes the search. Default `"Clear navigation search"`. */
+  clearSearchLabel?: string;
+  /** Default `"No results"`. */
   noResultsLabel?: string;
 
   /**
@@ -346,7 +368,7 @@ export interface SidebarTreeItem {
   onLongPress?: () => void;
   key: string;
   label: string;
-  /** A short chip on the right, e.g. a relative time (`34m`, `now`). */
+  /** A short chip at the row's end (the right in LTR), e.g. a relative time (`34m`, `now`). */
   meta?: string;
   /** Link target (a real anchor on web). */
   href?: string;

package/src/tab-bar/TabBarBase.tsx

@@ -30,6 +30,7 @@ import {
   Pressable,
   StyleSheet,
   View,
+  type GestureResponderEvent,
   type ViewStyle,
 } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
@@ -48,6 +49,7 @@ import Animated, {
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { useHaptics } from '../hooks/use-haptics';
+import { useDirectionProps, useIsRtl } from '../hooks/use-is-rtl';
 import { useClaimBottomEdge } from '../layout/bottom-edge';
 import { windowEdgeGap } from '../layout/edge';
 import type { ProgressiveBlurProps } from '../progressive-blur/types';
@@ -111,6 +113,28 @@ type BarContextValue = {
 
 const BarContext = createContext<BarContextValue | null>(null);
 
+/**
+ * Whether the bar's `Tap` gesture has already reported the touch a button's
+ * press came from. The gesture activates on RELEASE, after the `Pressable` has
+ * fired, and it cancels that press on iOS alone:
+ *
+ * - iOS: RNGH sets `cancelsTouchesInView`, so a press that still arrives came
+ *   from something the gesture never saw (VoiceOver, a hardware keyboard).
+ * - Android: nothing is cancelled. Measured on a Pixel 10 Pro, one tap produced
+ *   `PRESSABLE selectIndex(1)` AND `GESTURE tap selectIndex(1)` ~600ms apart.
+ *   A press there cannot say whether it was a touch, so every press is taken
+ *   for one.
+ * - Web: nothing is cancelled either. Measured in Mention's web build, one
+ *   mouse click reached `onIndexChange` twice. react-native-web says which
+ *   input it was: a pointer press arrives as the DOM `click`, and a keyboard
+ *   Enter or Space as `keyup`, which the gesture never sees.
+ */
+function gestureReportedPress(event: GestureResponderEvent): boolean {
+  if (Platform.OS === 'android') return true;
+  if (Platform.OS === 'web') return (event.nativeEvent as { type?: string }).type === 'click';
+  return false;
+}
+
 function OptionalGesture({ enabled, children, ...props }: ComponentProps<typeof GestureDetector> & { enabled: boolean }) {
   return enabled ? <GestureDetector {...props}>{children}</GestureDetector> : <Fragment>{children}</Fragment>;
 }
@@ -178,6 +202,14 @@ function TabBarBody({
   const isDragging = useSharedValue(false);
   const lastTicked = useSharedValue(-1);
   const { colors } = useTheme();
+  // The tabs are a flex row, so they mirror under RTL by themselves; the
+  // highlight is a `translateX` from the start edge and the scrub reads a
+  // PHYSICAL `event.x`, so both take the direction explicitly.
+  const rtl = useIsRtl();
+  const dir = rtl ? -1 : 1;
+  // The capsule's `insetInlineStart` must resolve on the same side the row
+  // mirrors to; react-native-web reads that from a `dir` prop, not `<html>`.
+  const dirProps = useDirectionProps();
   const theme = useTabBarTheme(material === 'solid' ? { ...themeOverrides, solidFallback: themeOverrides?.solidFallback ?? colors.backgroundSecondary } : themeOverrides);
   const impact = useHaptics();
 
@@ -310,7 +342,10 @@ function TabBarBody({
       // border edge either way.)
       const barWidth = barOuterWidth - sideInset * 2;
       const itemWidth = (barWidth - ROW_PAD_H * 2) / tabCount;
-      const raw = (x - ROW_PAD_H) / itemWidth - 0.5;
+      // Under RTL the first tab is at the right edge, so distance is measured
+      // from there instead.
+      const fromStart = rtl ? barWidth - x : x;
+      const raw = (fromStart - ROW_PAD_H) / itemWidth - 0.5;
       return Math.min(Math.max(raw, 0), tabCount - 1);
     };
 
@@ -413,6 +448,7 @@ function TabBarBody({
     highlightOpacity,
     minimized,
     progress,
+    rtl,
   ]);
 
   // CRITICAL — every shared value and every scalar a mapper READS must appear
@@ -497,9 +533,9 @@ function TabBarBody({
       // out-of-range one is a real place — one item-width to the LEFT of the
       // first tab, i.e. half outside the pill — not an absence.
       opacity: highlightOpacity.value,
-      transform: [{ translateX: ROW_PAD_H + itemWidth * slideIndex.value }],
+      transform: [{ translateX: dir * (ROW_PAD_H + itemWidth * slideIndex.value) }],
     };
-  }, [progress, slideIndex, highlightOpacity, barOuterWidth, tabCount, minimizeInset]);
+  }, [progress, slideIndex, highlightOpacity, barOuterWidth, tabCount, minimizeInset, dir]);
 
   // Shared with `useTabBarFootprint`, so a consumer accounting for the bar in
   // its own layout can never drift from where the bar actually sits.
@@ -534,7 +570,7 @@ function TabBarBody({
 
   const ResolvedSurface = material === 'solid' ? SolidTabBarSurface : Surface;
   return (
-    <View {...viewProps} onLayout={(event) => { setContainerWidth(event.nativeEvent.layout.width); onLayout?.(event); }} pointerEvents="box-none" style={[embedded ? { width: '100%' } : styles.root, style]}>
+    <View {...viewProps} {...dirProps} onLayout={(event) => { setContainerWidth(event.nativeEvent.layout.width); onLayout?.(event); }} pointerEvents="box-none" style={[embedded ? { width: '100%' } : styles.root, style]}>
       {/* Progressive blur rising from the screen's bottom edge behind the pill.
           Rendered CONDITIONALLY, and as nothing at all when off: the band is
           full-bleed and 114pt tall at a zero bottom inset, so it blurs whatever
@@ -686,8 +722,8 @@ function TabBarButtonBody({
         if (isFocused === undefined) bar?.selectIndex(index);
       }}
       onPress={(event) => {
-        // The bar's GestureDetector normally consumes touches; this still fires
-        // for assistive-technology activation (VoiceOver) and keyboard focus.
+        // Fires for keyboard and assistive-technology activation, and on
+        // Android and web also for the pointer taps the gesture reports.
         if (bar) {
           // Appear at the tab when hidden, slide to it when visible — the same
           // rule the tap gesture and the controlled path follow. Skipped on the
@@ -700,20 +736,20 @@ function TabBarButtonBody({
           bar.highlightOpacity.value = withTiming(1, HIGHLIGHT_FADE);
         }
         setMinimized(minimized, 0);
-        // Controlled path only, and NOT on Android. On the focus-driven path the
-        // trigger's own `onPress` below performs the navigation, so reporting
-        // the selection here as well would navigate twice.
-        //
-        // ANDROID IS THE ONE PLATFORM THAT DOUBLES. RNGH sets
-        // `cancelsTouchesInView` on iOS, so a recognised tap cancels this press
-        // and the gesture above is the only reporter there; react-native-web
-        // likewise routes a keyboard Enter or Space through this press and
-        // nothing else. Android cancels nothing — measured on a Pixel 10 Pro,
-        // one tap produced `PRESSABLE selectIndex(1)` AND `GESTURE tap
-        // selectIndex(1)` ~600ms apart on a busy JS thread — so there, and only
-        // there, this press stands down.
-        if (isFocused === undefined && (bar?.scrollable || Platform.OS !== 'android')) bar?.selectIndex(index);
-        onPress?.(event);
+        // A tap the bar's gesture already reported is not reported again
+        // (`gestureReportedPress`). A scrollable bar has no gesture, so its
+        // presses are the only reporter.
+        const reported = bar != null && !bar.scrollable && gestureReportedPress(event);
+        // Controlled path only. On the focus-driven path the trigger's own
+        // `onPress` below performs the navigation, so reporting the selection
+        // here as well would navigate twice.
+        if (isFocused === undefined && !reported) bar?.selectIndex(index);
+        // The trigger's `onPress` is for what the gesture cannot see (keyboard,
+        // assistive technology). On web a pointer click has already navigated
+        // through `onIndexChange`, so it stands down. Android keeps calling it:
+        // a press there cannot tell a touch from a keyboard or D-pad, and
+        // dropping it would strand keyboard navigation.
+        if (!(reported && Platform.OS === 'web')) onPress?.(event);
       }}
       // `Pressable`'s `style` also accepts a function of the press state; both
       // forms are composed on top of the flex-share base so a caller can tint
@@ -784,7 +820,8 @@ const styles = StyleSheet.create({
   },
   highlight: {
     position: 'absolute',
-    left: 0,
+    // The START edge: the translate above runs from it, signed by direction.
+    insetInlineStart: 0,
     borderCurve: 'continuous',
   },
   itemRow: {