@oxy.so/bloom 4.15.0 → 4.16.0

package/src/sidebar/SidebarPlanCard.tsx

@@ -31,8 +31,8 @@ function SidebarPlanCardComponent({ plan, collapsed = false, style, testID }: Si
   const geometry = useAnimatedStyle(() => ({
     width: inSidebar ? '100%' : naturalWidth.value > 0 ? naturalWidth.value + (36 - naturalWidth.value) * progress.value : progress.value === 1 ? 36 : '100%',
     height: 56 - 20 * progress.value,
-    paddingLeft: 10 + (compactPadding - 10) * progress.value,
-    paddingRight: 12 + (compactPadding - 12) * progress.value,
+    paddingInlineStart: 10 + (compactPadding - 10) * progress.value,
+    paddingInlineEnd: 12 + (compactPadding - 12) * progress.value,
   }), [progress, inSidebar, naturalWidth, compactPadding]);
   const fill = useAnimatedStyle(() => ({ opacity: 1 - progress.value }), [progress]);
   const avatar = plan.avatar ?? { initials: plan.name.slice(0, 1).toUpperCase(), color: 'blue' as const };
@@ -87,7 +87,7 @@ function SidebarPlanCardComponent({ plan, collapsed = false, style, testID }: Si
       <View style={{ minWidth: 0, flexShrink: 1, flexDirection: 'row', alignItems: 'center' }}>
         {avatarNode}
         <Collapsible collapsed={collapsed}>
-        <View style={{ paddingLeft: 8, minWidth: 0, flexShrink: 1, flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'center' }}>
+        <View style={{ paddingInlineStart: 8, minWidth: 0, flexShrink: 1, flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'center' }}>
           <Text variant="body-medium" numberOfLines={1} style={{ color: palette.text }}>
             {plan.name}
           </Text>

package/src/sidebar/SidebarRail.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { View } from 'react-native';
 
 import { Badge } from '../badge';
+import { useDirectionProps } from '../hooks/use-is-rtl';
 import { useSidebarPalette } from './palette';
 import { IS_WEB } from './parts';
 import { SidebarPrimaryAction } from './SidebarPrimaryAction';
@@ -34,10 +35,14 @@ export function SidebarRail({
   secondaryItems = [],
   selected,
   onNavigate,
+  accessibilityLabel = 'Sidebar',
   style,
   testID,
 }: SidebarProps) {
   const palette = useSidebarPalette();
+  // The badges sit on logical insets; react-native-web resolves those against a
+  // `dir` prop, not `<html dir>` (see `useDirectionProps`).
+  const dirProps = useDirectionProps();
 
   const renderItem = (item: SidebarNavItem) => {
     const isSelected = selected === item.key;
@@ -68,8 +73,9 @@ export function SidebarRail({
 
   return (
     <View
+      {...dirProps}
       role="complementary"
-      accessibilityLabel="Sidebar"
+      accessibilityLabel={accessibilityLabel}
       testID={testID}
       style={[
         {

package/src/sidebar/SidebarRailItem.tsx

@@ -26,7 +26,7 @@ const SELECTION_DURATION = 220;
  *              glyph), background-secondary-hover on hover
  *   label      10px, centred, one line; text-primary medium while selected,
  *              text-secondary otherwise
- *   badge      over the indicator's top-right corner
+ *   badge      over the indicator's top-end corner (top-right in LTR)
  *
  * With `href` the item is a link (a real anchor on web).
  */
@@ -111,7 +111,7 @@ const SidebarRailItemComponent: React.FC<SidebarRailItemProps> = ({
           <SelectedGlyph width={ICON_SIZE} height={ICON_SIZE} fill={palette.selectedForeground} />
         </Animated.View>
         {badge != null ? (
-          <View pointerEvents="none" style={{ position: 'absolute', top: -6, left: INDICATOR_WIDTH - 16 }}>
+          <View pointerEvents="none" style={{ position: 'absolute', top: -6, insetInlineStart: INDICATOR_WIDTH - 16 }}>
             {badge}
           </View>
         ) : null}

package/src/sidebar/SidebarTeamMenu.tsx

@@ -10,6 +10,7 @@ import Animated, {
 
 import { Badge } from '../badge';
 import { useInteractionState } from '../hooks/use-interaction-state';
+import { mirrorAlign, mirrorSide, useIsRtl } from '../hooks/use-is-rtl';
 import { Popover, PopoverContent, PopoverTrigger } from '../popover';
 import { BREAKPOINTS } from '../styles/breakpoints';
 import { borderRadius } from '../styles/tokens';
@@ -43,7 +44,7 @@ const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
  *                     tertiary-hover) that turns over while open (200ms)
  *   card (collapsed)  36px circle, transparent, just the avatar
  *   menu              265 wide, radius 16, 1px border, p10, shadow-dropdown,
- *                     beside the rail (right, bottom-aligned), below it under
+ *                     beside the rail (end side, bottom-aligned), below it under
  *                     `sm`; header, grouped rows with full-bleed dividers
  *                     (10px either side), footer with a version chip
  *   row               p8 radius 10 gap 10, icon 20 secondary, body-medium
@@ -149,6 +150,7 @@ const SidebarTeamMenuComponent: React.FC<SidebarTeamMenuProps> = ({ team, collap
   const narrow = width < BREAKPOINTS.sm;
   const { state: hovered, onIn, onOut } = useInteractionState();
   const reducedMotion = useReducedMotion();
+  const rtl = useIsRtl();
 
   const turn = useSharedValue(0);
   useEffect(() => {
@@ -168,7 +170,7 @@ const SidebarTeamMenuComponent: React.FC<SidebarTeamMenuProps> = ({ team, collap
     const height = expandedHeight + (36 - expandedHeight) * p;
     return { width: inSidebar ? '100%' : naturalWidth.value > 0 ? naturalWidth.value + (36 - naturalWidth.value) * p : p === 1 ? 36 : '100%',
       height,
-      borderRadius: height / 2, paddingLeft: 10 + (compactPadding - 10) * p, paddingRight: 16 + (compactPadding - 16) * p };
+      borderRadius: height / 2, paddingInlineStart: 10 + (compactPadding - 10) * p, paddingInlineEnd: 16 + (compactPadding - 16) * p };
   }, [progress, expandedHeight, inSidebar, naturalWidth, compactPadding]);
   const fill = useAnimatedStyle(() => ({ opacity: 1 - progress.value }), [progress]);
   const cardStyle: WebCssStyle = {
@@ -209,7 +211,7 @@ const SidebarTeamMenuComponent: React.FC<SidebarTeamMenuProps> = ({ team, collap
           <View style={{ flexDirection: 'row', alignItems: 'center', minWidth: 0, flexShrink: 1 }}>
             <SidebarAvatarView avatar={team.avatar} size="md" palette={palette} />
             <Collapsible collapsed={collapsed}>
-              <View style={{ paddingLeft: 8, justifyContent: 'center', alignItems: 'flex-start' }}>
+              <View style={{ paddingInlineStart: 8, justifyContent: 'center', alignItems: 'flex-start' }}>
                 <Text variant="body-medium" numberOfLines={1} style={{ color: palette.text }}>
                   {team.name}
                 </Text>
@@ -241,9 +243,11 @@ const SidebarTeamMenuComponent: React.FC<SidebarTeamMenuProps> = ({ team, collap
         </AnimatedPressable>
       </PopoverTrigger>
       <PopoverContent
-        label={`${team.name} menu`}
-        side={narrow ? 'bottom' : 'right'}
-        align={narrow ? 'start' : 'end'}
+        label={team.menuLabel ?? `${team.name} menu`}
+        // Beside the rail's trailing edge: floating sides are physical, so
+        // they are mirrored here rather than by the layout.
+        side={mirrorSide(narrow ? 'bottom' : 'right', rtl)}
+        align={mirrorAlign(narrow ? 'start' : 'end', narrow ? 'bottom' : 'right', rtl)}
         sideOffset={8}
         maxWidth={width - 32}
         style={SIDEBAR_MENU_PANEL}

package/src/sidebar/SidebarUserMenu.tsx

@@ -4,6 +4,7 @@ import Animated, { useAnimatedStyle } from 'react-native-reanimated';
 
 import { Button } from '../button';
 import { useInteractionState } from '../hooks/use-interaction-state';
+import { mirrorAlign, mirrorSide, useIsRtl } from '../hooks/use-is-rtl';
 import { RiAddFill } from '../icons/remix/RiAddFill';
 import { RiEqualizer3Line } from '../icons/remix/RiEqualizer3Line';
 import { Popover, PopoverContent, PopoverTrigger } from '../popover';
@@ -36,7 +37,7 @@ const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
  *              without moving layout. Collapsed: the rail's 36px column, the
  *              pill squared to 42×42 (3px sides).
  *   menu       265 wide, radius 16, border, p10, shadow-dropdown, beside the
- *              rail (right, top-aligned), below it under `sm`: "Users with
+ *              rail (its end side — right in LTR — top-aligned), below it under `sm`: "Users with
  *              access" (pt5, gap 6), rows px8 py6 radius 10 (20px avatar +
  *              body-medium), a full-bleed divider 14px either side, then two
  *              small secondary buttons 12 apart, pb8 so the inset reads 18
@@ -158,6 +159,7 @@ const SidebarUserMenuComponent: React.FC<SidebarUserMenuProps> = ({
   const [open, setOpen] = useState(false);
   const { width } = useWindowDimensions();
   const narrow = width < BREAKPOINTS.sm;
+  const rtl = useIsRtl();
   const { state: hovered, onIn, onOut } = useInteractionState();
 
   const progress = useSidebarCollapseProgress(collapsed);
@@ -208,7 +210,7 @@ const SidebarUserMenuComponent: React.FC<SidebarUserMenuProps> = ({
           />
           <SidebarAvatarView avatar={account.avatar} size="md" palette={palette} background={avatarBackground} />
           <Collapsible collapsed={collapsed}>
-            <View style={{ flexDirection: 'row', alignItems: 'center', gap: 2, paddingLeft: 8 }}>
+            <View style={{ flexDirection: 'row', alignItems: 'center', gap: 2, paddingInlineStart: 8 }}>
               <Text variant="body-medium" numberOfLines={1} style={{ color: palette.text }}>
                 {account.name}
               </Text>
@@ -218,9 +220,10 @@ const SidebarUserMenuComponent: React.FC<SidebarUserMenuProps> = ({
         </AnimatedPressable>
       </PopoverTrigger>
       <PopoverContent
-        label="Account menu"
-        side={narrow ? 'bottom' : 'right'}
-        align="start"
+        label={account.menuLabel ?? 'Account menu'}
+        // Beside the rail's trailing edge; floating sides are physical.
+        side={mirrorSide(narrow ? 'bottom' : 'right', rtl)}
+        align={mirrorAlign('start', narrow ? 'bottom' : 'right', rtl)}
         sideOffset={8}
         maxWidth={width - 32}
         style={SIDEBAR_MENU_PANEL}

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

@@ -48,6 +48,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';
@@ -178,6 +179,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 +319,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 +425,7 @@ function TabBarBody({
     highlightOpacity,
     minimized,
     progress,
+    rtl,
   ]);
 
   // CRITICAL — every shared value and every scalar a mapper READS must appear
@@ -497,9 +510,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 +547,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
@@ -784,7 +797,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: {