@oxy.so/bloom 4.18.0 → 4.18.1

package/src/chat-screen/ChatBackground.tsx

@@ -44,9 +44,9 @@ function PatternLayer({
     <View
       pointerEvents="none"
       testID="chat-background-pattern"
-      style={StyleSheet.absoluteFillObject}
+      style={StyleSheet.absoluteFill}
     >
-      <Svg style={StyleSheet.absoluteFillObject} width="100%" height="100%">
+      <Svg style={StyleSheet.absoluteFill} width="100%" height="100%">
         <Defs>
           <Pattern
             id={id}
@@ -83,9 +83,9 @@ function GradientLayer({ colors }: { colors: string[] }) {
     <View
       pointerEvents="none"
       testID="chat-background-gradient"
-      style={StyleSheet.absoluteFillObject}
+      style={StyleSheet.absoluteFill}
     >
-      <Svg style={StyleSheet.absoluteFillObject} width="100%" height="100%">
+      <Svg style={StyleSheet.absoluteFill} width="100%" height="100%">
         <Defs>
           <LinearGradient id={id} x1="0" y1="0" x2="0.35" y2="1">
             {colors.map((color, i) => (
@@ -159,13 +159,13 @@ function ChatBackgroundComponent({
             accessibilityElementsHidden
             importantForAccessibility="no-hide-descendants"
             testID="chat-background-image"
-            style={StyleSheet.absoluteFillObject}
+            style={StyleSheet.absoluteFill}
           />
           <View
             pointerEvents="none"
             testID="chat-background-dim"
             style={[
-              StyleSheet.absoluteFillObject,
+              StyleSheet.absoluteFill,
               { backgroundColor: paint.imageDim, opacity: dim },
             ]}
           />

package/src/dialog/Dialog.tsx

@@ -546,7 +546,15 @@ function SideSheet({
   return (
     // `OverlayRoot` takes this drawer's place in the open-order overlay stack.
     // It mounts here, past the `mounted` guard, so the rank tracks OPENING.
-    <OverlayRoot style={[sideStyles.root, containerStyle]} className={containerClassName}>
+    // `onRequestClose`: the drawer is not an RN `Modal`, so Android back would
+    // otherwise pass straight to the screen behind it. A drawer that refuses
+    // backdrop dismissal still swallows the press, and stays open.
+    <OverlayRoot
+      style={[sideStyles.root, containerStyle]}
+      className={containerClassName}
+      onRequestClose={handleBackdropPress}
+      modal
+    >
       <Backdrop
         testID={testID ? `${testID}-backdrop` : DIALOG_SHEET_BACKDROP_TESTID}
         accessibilityLabel={label ? `Dismiss ${label}` : 'Dismiss dialog'}

package/src/location-puck/LocationPuck.tsx

@@ -81,7 +81,7 @@ const PULSE_SCALE = 0.18;
 
 /** One full-size layer that centres whatever it holds on the box's centre. */
 const layerStyle: ViewStyle = {
-  ...StyleSheet.absoluteFillObject,
+  ...StyleSheet.absoluteFill,
   alignItems: 'center',
   justifyContent: 'center',
 };

package/src/mail-list/parts.tsx

@@ -77,7 +77,7 @@ export function MailRowLink({
   };
   const interactive = Boolean(onPress || href || onLongPress);
   const style: WebCssStyle = {
-    ...StyleSheet.absoluteFillObject,
+    ...StyleSheet.absoluteFill,
     borderRadius: MAIL_ROW_RADIUS,
     '--bloom-mail-ring': paint.accent,
   };

package/src/media-card/parts.tsx

@@ -287,7 +287,7 @@ export function CardLink({ name, onPress, href, onLongPress, selected = false, r
     if (!IS_WEB && href) void Linking.openURL(href).catch(() => undefined);
   };
   const style: WebCssStyle = {
-    ...StyleSheet.absoluteFillObject,
+    ...StyleSheet.absoluteFill,
     borderRadius: radius,
     '--bloom-media-card-ring': paint.ring,
   };

package/src/overlay/Overlay.tsx

@@ -57,6 +57,7 @@ import { WEB_POSITION_FIXED } from '../styles/web-view-style';
 import { StyledView } from '../styles/styled-primitives';
 import { SurfaceLevelProvider } from '../styles/surface-levels';
 import { layerForRank, type OverlayLayer } from './stack';
+import { useHardwareBack } from './use-hardware-back';
 import { useOverlayLayer } from './use-overlay-layer';
 import type { OverlayRootProps, BackdropProps } from './types';
 
@@ -109,32 +110,43 @@ export const BACKDROP_DIM_OPACITY = 0.28;
  * every Bloom surface already puts it. Descendants that need to order
  * themselves within the surface read `useOverlayLayerContext()`.
  */
-export function OverlayRoot({ children, className, style, testID, zIndex }: OverlayRootProps) {
+export function OverlayRoot({
+  children,
+  className,
+  style,
+  testID,
+  zIndex,
+  onRequestClose,
+  modal = false,
+}: OverlayRootProps) {
+  // On the root rather than in each surface: every portaled surface mounts one
+  // inside its open guard, so this is the one place that cannot be forgotten.
+  // The gallery once forgot it and Android back finished the whole activity.
+  useHardwareBack(onRequestClose);
   // Split into two components rather than branching on the hook: a pinned root
   // must not CONSUME a rank either. The toast host is pinned and mounts for the
   // whole life of the app, so holding a rank would keep the live set permanently
   // non-empty — the counter would never reset and depths would climb for the
   // rest of the session.
   return zIndex === undefined ? (
-    <StackedOverlayRoot className={className} style={style} testID={testID}>
+    <StackedOverlayRoot className={className} style={style} testID={testID} modal={modal}>
       {children}
     </StackedOverlayRoot>
   ) : (
-    <PinnedOverlayRoot zIndex={zIndex} className={className} style={style} testID={testID}>
+    <PinnedOverlayRoot zIndex={zIndex} className={className} style={style} testID={testID} modal={modal}>
       {children}
     </PinnedOverlayRoot>
   );
 }
 
-function StackedOverlayRoot({
-  children,
-  className,
-  style,
-  testID,
-}: Omit<OverlayRootProps, 'zIndex'>) {
+type OverlayRootViewProps = Pick<OverlayRootProps, 'children' | 'className' | 'style' | 'testID'> & {
+  modal: boolean;
+};
+
+function StackedOverlayRoot({ children, className, style, testID, modal }: OverlayRootViewProps) {
   const layer = useOverlayLayer();
   return (
-    <OverlayRootView layer={layer} className={className} style={style} testID={testID}>
+    <OverlayRootView layer={layer} className={className} style={style} testID={testID} modal={modal}>
       {children}
     </OverlayRootView>
   );
@@ -146,7 +158,8 @@ function PinnedOverlayRoot({
   style,
   testID,
   zIndex,
-}: OverlayRootProps & { zIndex: number }) {
+  modal,
+}: OverlayRootViewProps & { zIndex: number }) {
   // Outside the stack, so descendants must not read stack depths from it
   // either — every slot is the pinned depth.
   const layer = useMemo(
@@ -154,7 +167,7 @@ function PinnedOverlayRoot({
     [zIndex],
   );
   return (
-    <OverlayRootView layer={layer} className={className} style={style} testID={testID}>
+    <OverlayRootView layer={layer} className={className} style={style} testID={testID} modal={modal}>
       {children}
     </OverlayRootView>
   );
@@ -166,14 +179,19 @@ function OverlayRootView({
   style,
   testID,
   layer,
-}: Omit<OverlayRootProps, 'zIndex'> & { layer: OverlayLayer }) {
+  modal,
+}: OverlayRootViewProps & { layer: OverlayLayer }) {
   return (
     <OverlayLayerContext.Provider value={layer}>
       {/* `pointerEvents` stays a PROP: react-native-web resolves the RN-only
           `box-none` from the prop path only, and as a style entry it is silently
-          dropped — which makes the whole portaled surface click-through. */}
+          dropped — which makes the whole portaled surface click-through.
+          `accessibilityViewIsModal` sits HERE, not on the panel: iOS hides only
+          the modal view's SIBLINGS, and at the native outlet this root is the
+          sibling of the app content, where the panel is not. */}
       <StyledView
         pointerEvents="box-none"
+        accessibilityViewIsModal={modal && Platform.OS !== 'web' ? true : undefined}
         className={className}
         style={[styles.root, { zIndex: layer.root }, style]}
         testID={testID}

package/src/overlay/types.ts

@@ -23,6 +23,24 @@ export interface OverlayRootProps {
    * `./stack.ts` exists to remove.
    */
   zIndex?: number;
+  /**
+   * Android hardware back while this surface is open. A portaled surface is not
+   * an RN `Modal`, so nothing else consumes the press: without this the app's
+   * own back handling runs and, at the root of a stack, finishes the activity —
+   * the surface "closes" by closing the whole app. Called and consumed while the
+   * root is mounted; later-opened surfaces register later, and `BackHandler`
+   * runs the newest listener first, so the top surface closes first. A blocking
+   * surface still passes a handler (a no-op) so the press is swallowed rather
+   * than falling through to the screen underneath.
+   */
+  onRequestClose?: () => void;
+  /**
+   * The surface is modal: a screen reader must not wander into the app behind
+   * it. Native only — sets `accessibilityViewIsModal` on this root, which is the
+   * app content's sibling at the portal outlet (iOS confines VoiceOver to
+   * it). Web surfaces already carry `aria-modal` on their own dialog node.
+   */
+  modal?: boolean;
 }
 
 export interface BackdropProps {

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/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,