@oxy.so/bloom 4.18.0 → 4.19.0

package/src/overlay/use-hardware-back.ts

@@ -0,0 +1,27 @@
+import { useEffect, useRef } from 'react';
+import { BackHandler, Platform } from 'react-native';
+
+/**
+ * Consume Android's hardware back for as long as the caller is mounted with a
+ * handler, calling the CURRENT `onBack` (read through a ref, so a new closure
+ * each render does not re-register and lose its place in the LIFO order).
+ *
+ * `BackHandler` runs the newest listener first, so surfaces opened later close
+ * first. No-op off Android and when `BackHandler` is absent (web bundles, and
+ * some test environments' react-native mocks).
+ */
+export function useHardwareBack(onBack: (() => void) | undefined): void {
+  const onBackRef = useRef(onBack);
+  onBackRef.current = onBack;
+  const active = onBack !== undefined;
+
+  useEffect(() => {
+    if (!active || Platform.OS !== 'android') return;
+    if (typeof BackHandler?.addEventListener !== 'function') return;
+    const subscription = BackHandler.addEventListener('hardwareBackPress', () => {
+      onBackRef.current?.();
+      return true;
+    });
+    return () => subscription.remove();
+  }, [active]);
+}

package/src/overlay/use-modal-overlay-active.ts

@@ -0,0 +1,31 @@
+/**
+ * `useModalOverlayActive` — whether any modal Bloom overlay is open.
+ *
+ * Re-renders only when the answer flips. See `./modal-registry.ts` for who
+ * registers and why.
+ */
+import { useEffect, useSyncExternalStore } from 'react';
+
+import {
+  hasActiveModalOverlays,
+  registerModalOverlay,
+  subscribeModalOverlays,
+} from './modal-registry';
+
+/** `false` on the server: nothing is open before hydration. */
+const serverSnapshot = () => false;
+
+export function useModalOverlayActive(): boolean {
+  return useSyncExternalStore(subscribeModalOverlays, hasActiveModalOverlays, serverSnapshot);
+}
+
+/**
+ * Register as an open modal overlay while mounted and `modal` is true. Used by
+ * `OverlayRoot`; exported only within the family.
+ */
+export function useModalOverlayRegistration(modal: boolean): void {
+  useEffect(() => {
+    if (!modal) return undefined;
+    return registerModalOverlay({});
+  }, [modal]);
+}

package/src/portal/index.ts

@@ -3,3 +3,8 @@ export {
   PortalOutlet,
   Portal,
 } from './Portal';
+// The app-content half of a modal overlay: wrap everything EXCEPT the
+// `PortalOutlet` in it. Lives in `overlay/` (it reads the modal registry) and is
+// offered here because this is the subpath the app root already imports.
+export { OverlayInertBoundary } from '../overlay/OverlayInertBoundary';
+export type { OverlayInertBoundaryProps } from '../overlay/types';

package/src/portal/index.web.ts

@@ -8,3 +8,8 @@ export {
   PortalOutlet,
   Portal,
 } from './Portal.web';
+// The app-content half of a modal overlay: wrap everything EXCEPT the
+// `PortalOutlet` in it. Lives in `overlay/` (it reads the modal registry) and is
+// offered here because this is the subpath the app root already imports.
+export { OverlayInertBoundary } from '../overlay/OverlayInertBoundary';
+export type { OverlayInertBoundaryProps } from '../overlay/types';

package/src/rating/Rating.tsx

@@ -26,7 +26,8 @@ import type { RatingProps, RatingSize } from './types';
  * `variant="stars"` draws five stars before the value instead of one, 2px
  * apart, each filled to its share of the value: the unfilled star in
  * `emptyStarColor` (border), and over it the filled star clipped to the
- * fraction. The clip is anchored with a LOGICAL inset (`insetInlineStart`) so a
+ * fraction. The fill comes from `fillValue` when given, else from `value`
+ * (parsed by `parseRatingValue` when it is a localised string). The clip is anchored with a LOGICAL inset (`insetInlineStart`) so a
  * right-to-left row fills from the right — the root carries
  * `useDirectionProps()` for react-native-web to resolve it.
  *
@@ -52,12 +53,45 @@ const IS_WEB = Platform.OS === 'web';
 const STAR_COUNT = 5;
 const STAR_GAP = 2;
 
+/**
+ * Bidi isolates and marks (U+2066–U+2069 LRI/RLI/FSI/PDI, U+200E/U+200F
+ * LRM/RLM, U+061C ALM) a localised string is wrapped in. None of them are
+ * part of the number.
+ */
+const FORMAT_CHARACTERS = /[\u2066-\u2069\u200E\u200F\u061C]/g;
+/** Arabic-Indic (U+0660) and extended Arabic-Indic (U+06F0) digit zeros. */
+const ARABIC_ZERO = 0x0660;
+const EXTENDED_ARABIC_ZERO = 0x06f0;
+
+/**
+ * The number a drawn rating value stands for, for the `stars` fill: a number
+ * is itself; a string is read after dropping bidi/format characters, with a
+ * comma or Arabic decimal separator (U+066B) accepted as the decimal point and
+ * Arabic-Indic digits accepted — so "4,5" wrapped in FSI…PDI is 4.5. Otherwise it is
+ * `Number()`'s reading, so anything unreadable is `NaN` (no fill).
+ */
+export function parseRatingValue(value: number | string): number {
+  if (typeof value === 'number') return value;
+  const text = value
+    .replace(FORMAT_CHARACTERS, '')
+    .trim()
+    .replace(/[\u0660-\u0669]/g, (d) => String(d.charCodeAt(0) - ARABIC_ZERO))
+    .replace(/[\u06F0-\u06F9]/g, (d) => String(d.charCodeAt(0) - EXTENDED_ARABIC_ZERO))
+    .replace(/[,\u066B]/, '.');
+  return Number(text);
+}
+
 /** How much of star `index` (0-based) a rating fills, `0..1`. */
 export function starFill(rating: number, index: number): number {
   if (!Number.isFinite(rating)) return 0;
   return Math.min(1, Math.max(0, rating - index));
 }
 
+/** A fill on the five-star scale, clamped to `0..5`; `NaN` stays `NaN` (no fill). */
+function clampRating(rating: number): number {
+  return Math.min(STAR_COUNT, Math.max(0, rating));
+}
+
 function StarRow({
   rating,
   size,
@@ -113,6 +147,7 @@ function RatingComponent({
   starColor,
   countColor,
   emptyStarColor,
+  fillValue,
   accessibilityLabel,
   style,
   testID,
@@ -148,7 +183,7 @@ function RatingComponent({
     >
       {variant === 'stars' && rated ? (
         <StarRow
-          rating={typeof value === 'number' ? value : Number(value)}
+          rating={clampRating(fillValue ?? parseRatingValue(value))}
           size={config.star}
           fill={starPaint}
           empty={emptyStarColor ?? theme.colors.border}

package/src/rating/types.ts

@@ -44,6 +44,15 @@ export interface RatingProps {
   countColor?: string;
   /** `stars` variant: the unfilled part of each star. Default the theme's border colour. */
   emptyStarColor?: string;
+  /**
+   * `stars` variant: the number the stars are filled to, clamped to `0..5`,
+   * independent of the drawn `value`. Pass it with a localised `value` string
+   * (`value="4,5"` with `fillValue={4.5}`) so the text follows the locale and
+   * the fill does not depend on parsing it. Without it a string `value` is
+   * parsed (bidi marks dropped, a comma decimal accepted). Ignored by
+   * `compact` and while there is no rating (`value` empty).
+   */
+  fillValue?: number;
   /**
    * Overrides the composed accessible name ("Rated 4.92 out of 5, 128
    * reviews"), which is English — pass a translated sentence here.

package/src/search/Search.tsx

@@ -1,6 +1,8 @@
-import { forwardRef } from 'react';
+import { forwardRef, useCallback, useMemo, useRef } from 'react';
 import { Platform, type TextInput, View } from 'react-native';
 
+import { mergeRefs } from '../hooks/merge-refs';
+
 import { useTheme } from '../theme/use-theme';
 import { atoms as a } from '../styles';
 import { borderRadius } from '../styles/tokens';
@@ -18,22 +20,56 @@ type SearchProps = Omit<TextFieldInputProps, 'label'> & {
 };
 
 export const Search = forwardRef<TextInput, SearchProps>(
-  function Search({ value, label = 'Search', onClearText, ...rest }, ref) {
+  function Search({ value, label = 'Search', onClearText, onFocus, onPressIn, ...rest }, ref) {
     const theme = useTheme();
     const showClear = value != null && value.length > 0;
 
+    // Select-on-focus, done here rather than through RN's `selectTextOnFocus`.
+    // On Android that prop does not select on focus: it arms a one-shot flag and
+    // calls `selectAll()` on the input's NEXT layout while focused. An
+    // autofocused search lays out nothing after focusing until the first
+    // keystroke mounts the clear button and pads the input for it — and that
+    // layout selects everything, so the SECOND keystroke replaced the query.
+    // Typing "mention" in one burst left "on" (OxyHQ/Mention#1126). Now a
+    // press-driven focus selects the current query once, immediately, and a
+    // programmatic focus (autoFocus, `ref.focus()`) selects nothing. Web never
+    // selected on focus and still does not.
+    const inputRef = useRef<TextInput | null>(null);
+    const refs = useMemo(() => mergeRefs([inputRef, ref]), [ref]);
+    const pressedRef = useRef(false);
+    const valueRef = useRef(value);
+    valueRef.current = value;
+    const handlePressIn = useCallback<NonNullable<SearchProps['onPressIn']>>(
+      (event) => {
+        pressedRef.current = true;
+        onPressIn?.(event);
+      },
+      [onPressIn],
+    );
+    const handleFocus = useCallback<NonNullable<SearchProps['onFocus']>>(
+      (event) => {
+        onFocus?.(event);
+        const pressed = pressedRef.current;
+        pressedRef.current = false;
+        const length = valueRef.current?.length ?? 0;
+        if (pressed && Platform.OS !== 'web' && length > 0) {
+          inputRef.current?.setSelection(0, length);
+        }
+      },
+      [onFocus],
+    );
+
     return (
       <View style={[a.w_full, a.relative]}>
         <TextField radius={borderRadius.full}>
           <TextFieldIcon icon={MagnifyingGlassIcon} />
           <TextFieldInput
-            inputRef={ref}
+            inputRef={refs}
             label={label}
             value={value}
             placeholder={label}
             returnKeyType="search"
             keyboardAppearance={theme.mode === 'light' ? 'light' : 'dark'}
-            selectTextOnFocus={Platform.OS !== 'web'}
             autoFocus={false}
             accessibilityRole="search"
             autoCorrect={false}
@@ -41,6 +77,8 @@ export const Search = forwardRef<TextInput, SearchProps>(
             autoCapitalize="none"
             style={showClear ? { paddingRight: 24 } : undefined}
             {...rest}
+            onPressIn={handlePressIn}
+            onFocus={handleFocus}
           />
         </TextField>
 

package/src/select/types.ts

@@ -37,6 +37,13 @@ export type SelectTriggerProps = {
   /**
    * Utility classes APPENDED to the part's own — never substituted for them, so
    * a single layout class cannot strip the chrome.
+   *
+   * Never pin a HEIGHT here (`h-8`). The value's line box is 20 × the system
+   * font scale, and on native Yoga measures the text at most as tall as the
+   * space left inside the field: a fixed height cuts the glyphs in half on
+   * Android (OxyHQ/Mention#1126 — `h-8` is 28dp there, leaving 15.5dp for a
+   * 20dp line). Size a compact trigger with its padding (`fieldStyle`) so the
+   * text sets the height.
    */
   className?: string;
   /**

package/src/settings-modal/SettingsModal.tsx

@@ -6,7 +6,7 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { BackHandler, Pressable, StyleSheet, View, useWindowDimensions } from 'react-native';
+import { Pressable, StyleSheet, View, useWindowDimensions } from 'react-native';
 import Animated, {
   Easing,
   useAnimatedStyle,
@@ -263,18 +263,13 @@ export function SettingsModal({
   const compactPageOpenRef = useRef(false);
   compactPageOpenRef.current = compactPageOpen && layoutRef.current === 'compact';
 
-  // Android back closes, like a native modal.
-  useEffect(() => {
-    // `BackHandler` is absent from some test environments' react-native mocks.
-    if (!mounted || IS_WEB || typeof BackHandler?.addEventListener !== 'function') return;
-    const sub = BackHandler.addEventListener('hardwareBackPress', () => {
-      // On a pushed page (compact), back returns to the section list first.
-      if (compactPageOpenRef.current) requestNavigation();
-      else requestClose();
-      return true;
-    });
-    return () => sub.remove();
-  }, [mounted, requestClose, requestNavigation]);
+  // Android back closes, like a native modal — handed to `OverlayRoot`, which
+  // owns hardware back for every portaled surface.
+  const onHardwareBack = useCallback(() => {
+    // On a pushed page (compact), back returns to the section list first.
+    if (compactPageOpenRef.current) requestNavigation();
+    else requestClose();
+  }, [requestClose, requestNavigation]);
 
   // ----- saved toast -------------------------------------------------------
   const [savedPhase, setSavedPhase] = useState<SavedPhase>('hidden');
@@ -351,7 +346,7 @@ export function SettingsModal({
   return (
     <ModalPortal>
       <SettingsModalContext.Provider value={context}>
-        <OverlayRoot>
+        <OverlayRoot onRequestClose={onHardwareBack} modal>
           <Backdrop
             onPress={requestClose}
             progress={progress}
@@ -813,7 +808,17 @@ function SavedToast({
 
 const styles = StyleSheet.create({
   center: {
-    ...StyleSheet.absoluteFillObject,
+    // Spelled out, not `StyleSheet.absoluteFillObject`: RN 0.85 removed it, and
+    // spreading the resulting `undefined` left this box in flow at ZERO height.
+    // The panel still painted (nothing clips it) and still took touches, but
+    // Android reports every view under a zero-area ancestor as not visible to
+    // the user, so TalkBack and UI Automator saw no modal content at all —
+    // only the backdrop's full-screen "Close".
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
     alignItems: 'center',
     justifyContent: 'center',
     padding: VIEWPORT_GUTTER,

package/src/teleport/PortalHost.tsx

@@ -25,7 +25,7 @@ import PortalHost from "./PortalHostView";
  * export default function App() {
  *   return (
  *     <PortalProvider>
- *        <PortalHost style={StyleSheet.absoluteFillObject} name="overlay" />
+ *        <PortalHost style={StyleSheet.absoluteFill} name="overlay" />
  *     </PortalProvider>
  *   );
  * }

package/src/zoomable-media-gallery/ZoomableMediaGallery.tsx

@@ -25,6 +25,7 @@ import {
   Gesture,
   GestureDetector,
 } from 'react-native-gesture-handler';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { borderRadius } from '../styles/tokens';
 import { Backdrop, OverlayRoot } from '../overlay';
 import { Portal } from '../portal';
@@ -109,6 +110,13 @@ function shareUri(item: GalleryMedia): string | undefined {
 // image. `Platform.select` keeps them off native. `cursor` is a real
 // `ViewStyle` key on RN 0.83; `userSelect` is declared on `TextStyle` only,
 // which is what `WebCssStyle` covers.
+/** Share button inset from the top-right corner of the safe area. */
+const CHROME_EDGE = 16;
+/** Page indicator (and a lone caption) above the bottom of the safe area. */
+const INDICATOR_BOTTOM = 48;
+/** A caption lifted above the page counter + dots when the indicator shows. */
+const CAPTION_BOTTOM_WITH_INDICATOR = 110;
+
 const WEB_POINTER: WebCssStyle = { userSelect: 'none', cursor: 'pointer' };
 const WEB_USER_SELECT_NONE: WebCssStyle = { userSelect: 'none' };
 
@@ -207,6 +215,9 @@ function resolveCornerRadius(cornerRadius: number | 'circle', fit: FittedSize):
  */
 const ZoomableMediaGalleryInner = React.forwardRef<ZoomableMediaGalleryHandle, ZoomableMediaGalleryProps>(({ measureThumb, cornerRadius = DEFAULT_CORNER_RADIUS, indicatorVariant = 'dots', videoControls = false }, ref) => {
   const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = useWindowDimensions();
+  // The viewer is full-bleed, so its chrome must clear the status bar, the
+  // cutout and the home indicator itself — nothing above it applies them.
+  const insets = useSafeAreaInsets();
 
   const radiusFor = useCallback(
     (fit: FittedSize) => resolveCornerRadius(cornerRadius, fit),
@@ -928,7 +939,10 @@ const ZoomableMediaGalleryInner = React.forwardRef<ZoomableMediaGalleryHandle, Z
   }, [handleDismiss, isOpen, pageTo]);
 
   const renderContent = () => (
-    <OverlayRoot style={styles.modalContainer}>
+    // `onRequestClose`: Android back flies the media home like every other
+    // dismiss. The viewer is a Portal, not an RN `Modal`, so without it nothing
+    // consumed the press and back finished the whole app.
+    <OverlayRoot style={styles.modalContainer} onRequestClose={handleDismiss} modal>
       <GestureHandlerRootView style={StyleSheet.absoluteFill}>
         {/* Shared `Backdrop` (a Pressable) rather than a `Gesture.Tap()`: the
             viewer renders through the web Portal, whose root is
@@ -1063,7 +1077,10 @@ const ZoomableMediaGalleryInner = React.forwardRef<ZoomableMediaGalleryHandle, Z
           )}
 
           {pagerReady && items.length > 1 && (
-            <Animated.View style={[styles.indicatorWrap, backdropStyle]} pointerEvents="box-none">
+            <Animated.View
+              style={[styles.indicatorWrap, { bottom: INDICATOR_BOTTOM + insets.bottom }, backdropStyle]}
+              pointerEvents="box-none"
+            >
               <View style={styles.counterPill} pointerEvents="none">
                 <Text style={styles.counterText}>{`${activeIndex + 1} / ${items.length}`}</Text>
               </View>
@@ -1120,7 +1137,11 @@ const ZoomableMediaGalleryInner = React.forwardRef<ZoomableMediaGalleryHandle, Z
               accessibilityRole="button"
               accessibilityLabel="Share media"
               hitSlop={8}
-              style={[styles.shareButton, webPointerStyle]}
+              style={[
+                styles.shareButton,
+                { top: CHROME_EDGE + insets.top, right: CHROME_EDGE + insets.right },
+                webPointerStyle,
+              ]}
             >
               <RiUpload2Line fill="#fff" size="md" />
             </Pressable>
@@ -1130,7 +1151,11 @@ const ZoomableMediaGalleryInner = React.forwardRef<ZoomableMediaGalleryHandle, Z
             <Animated.View
               style={[
                 styles.altCaptionWrap,
-                items.length > 1 && styles.altCaptionWrapWithIndicator,
+                {
+                  bottom:
+                    (items.length > 1 ? CAPTION_BOTTOM_WITH_INDICATOR : INDICATOR_BOTTOM) +
+                    insets.bottom,
+                },
                 backdropStyle,
               ]}
               pointerEvents="none"
@@ -1209,9 +1234,9 @@ const styles = StyleSheet.create({
   mediaBox: {
     overflow: 'hidden',
   },
+  // `bottom` is inline: INDICATOR_BOTTOM above the bottom safe-area inset.
   indicatorWrap: {
     position: 'absolute',
-    bottom: 48,
     left: 0,
     right: 0,
     alignItems: 'center',
@@ -1298,10 +1323,10 @@ const styles = StyleSheet.create({
     backgroundColor: 'rgba(0,0,0,0.7)',
     transform: [{ translateY: -22 }, { scale: 1.08 }],
   },
+  // `top`/`right` are inline: CHROME_EDGE inside the safe area. A bare 16
+  // put the button under the Android status bar, over the battery icon.
   shareButton: {
     position: 'absolute',
-    top: 16,
-    right: 16,
     width: 40,
     height: 40,
     borderRadius: borderRadius.full,
@@ -1309,18 +1334,14 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     backgroundColor: 'rgba(0,0,0,0.45)',
   },
+  // `bottom` is inline, above the indicator when there is one, inside the safe area.
   altCaptionWrap: {
     position: 'absolute',
-    bottom: 48,
     left: 0,
     right: 0,
     alignItems: 'center',
     paddingHorizontal: 24,
   },
-  // Lifted above the page counter + dots when the multi-image indicator shows.
-  altCaptionWrapWithIndicator: {
-    bottom: 110,
-  },
   altCaptionPill: {
     maxWidth: 600,
     paddingHorizontal: 14,