@oxy.so/bloom 4.17.0 → 4.18.1

package/src/price-breakdown/types.ts

@@ -32,6 +32,12 @@ export interface PriceLine {
    * app owns currency, locale and the minus sign. Omit it for a `pending` line.
    */
   amount?: string;
+  /**
+   * A second, PRE-FORMATTED rendering of the same amount, drawn de-emphasised
+   * under it — the buyer's currency beside the shop's: `"≈ 12,00 €"`. Like
+   * `ListingPriceLine.secondary`, it is drawn as given; nothing converts.
+   */
+  secondaryAmount?: string;
   /** Default `default`. */
   tone?: PriceLineTone;
   /** Default `final`. */
@@ -54,6 +60,12 @@ export interface PriceTotal {
   label: string;
   /** PRE-FORMATTED, like every other amount here. */
   amount?: string;
+  /**
+   * A second, PRE-FORMATTED rendering of the same amount, drawn de-emphasised
+   * under it — the buyer's currency beside the shop's: `"≈ 12,00 €"`. Like
+   * `ListingPriceLine.secondary`, it is drawn as given; nothing converts.
+   */
+  secondaryAmount?: string;
   /** A quieter line under the total — "Includes taxes". */
   note?: string;
   /** Default `final`. */

package/src/rating/Rating.tsx

@@ -2,6 +2,7 @@ import React, { memo } from 'react';
 import { Platform, View } from 'react-native';
 
 import { RiStarFill } from '../icons/remix/RiStarFill';
+import { useDirectionProps } from '../hooks/use-is-rtl';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
 import type { TypeScaleVariant } from '../typography/scale';
@@ -21,6 +22,16 @@ import type { RatingProps, RatingSize } from './types';
  * reviews") on the row — `role="img"` on web, where a plain `div` with an
  * `aria-label` is not announced, and one `accessible` element on native — so a
  * screen reader never reads "star, 4.92, open paren, 128".
+ *
+ * `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
+ * right-to-left row fills from the right — the root carries
+ * `useDirectionProps()` for react-native-web to resolve it.
+ *
+ * `color` / `starColor` / `countColor` recolour it for a surface the theme's
+ * text pair cannot sit on (a brand-coloured hero).
  */
 
 const SIZE_CONFIG: Record<RatingSize, { star: number; value: TypeScaleVariant; count: TypeScaleVariant }> = {
@@ -37,6 +48,59 @@ export function formatRatingValue(value: number | string): string {
 
 const IS_WEB = Platform.OS === 'web';
 
+/** The number of stars in the `stars` variant. */
+const STAR_COUNT = 5;
+const STAR_GAP = 2;
+
+/** 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));
+}
+
+function StarRow({
+  rating,
+  size,
+  fill,
+  empty,
+  testID,
+}: {
+  rating: number;
+  size: number;
+  fill: string;
+  empty: string;
+  testID?: string;
+}) {
+  return (
+    <View style={{ flexDirection: 'row', alignItems: 'center', gap: STAR_GAP }} testID={testID}>
+      {Array.from({ length: STAR_COUNT }, (_, index) => {
+        const share = starFill(rating, index);
+        return (
+          <View key={index} style={{ width: size, height: size }}>
+            <RiStarFill width={size} height={size} fill={empty} />
+            {share > 0 ? (
+              <View
+                testID={testID ? `${testID}-${index}` : undefined}
+                style={{
+                  position: 'absolute',
+                  top: 0,
+                  bottom: 0,
+                  insetInlineStart: 0,
+                  width: size * share,
+                  overflow: 'hidden',
+                  alignItems: 'flex-start',
+                }}
+              >
+                <RiStarFill width={size} height={size} fill={fill} />
+              </View>
+            ) : null}
+          </View>
+        );
+      })}
+    </View>
+  );
+}
+
 function RatingComponent({
   value,
   count,
@@ -44,11 +108,20 @@ function RatingComponent({
   reviewsLabel = 'reviews',
   newLabel = 'New',
   size = 'medium',
+  variant = 'compact',
+  color,
+  starColor,
+  countColor,
+  emptyStarColor,
   accessibilityLabel,
   style,
   testID,
 }: RatingProps) {
   const theme = useTheme();
+  const directionProps = useDirectionProps();
+  const textColor = color ?? theme.colors.text;
+  const starPaint = starColor ?? textColor;
+  const countPaint = countColor ?? color ?? theme.colors.textSecondary;
   const config = SIZE_CONFIG[size];
   const rated = value != null && value !== '';
   const shownValue = rated ? formatRatingValue(value) : newLabel;
@@ -66,18 +139,29 @@ function RatingComponent({
 
   return (
     <View
+      {...directionProps}
       testID={testID}
       accessible
       accessibilityLabel={name}
       {...(IS_WEB ? { role: 'img' as const } : null)}
       style={[{ flexDirection: 'row', alignItems: 'center', gap: 4 }, style]}
     >
-      <RiStarFill width={config.star} height={config.star} fill={theme.colors.text} />
-      <Text variant={config.value} style={{ color: theme.colors.text, fontVariant: ['tabular-nums'] }}>
+      {variant === 'stars' && rated ? (
+        <StarRow
+          rating={typeof value === 'number' ? value : Number(value)}
+          size={config.star}
+          fill={starPaint}
+          empty={emptyStarColor ?? theme.colors.border}
+          testID={testID ? `${testID}-stars` : undefined}
+        />
+      ) : variant === 'stars' ? null : (
+        <RiStarFill width={config.star} height={config.star} fill={starPaint} />
+      )}
+      <Text variant={config.value} style={{ color: textColor, fontVariant: ['tabular-nums'] }}>
         {shownValue}
       </Text>
       {countText != null && (
-        <Text variant={config.count} style={{ color: theme.colors.textSecondary }}>
+        <Text variant={config.count} style={{ color: countPaint }}>
           {countText}
         </Text>
       )}

package/src/rating/index.ts

@@ -8,4 +8,5 @@ export type {
   RatingInputSize,
   RatingProps,
   RatingSize,
+  RatingVariant,
 } from './types';

package/src/rating/types.ts

@@ -6,6 +6,13 @@ export type RatingSize = 'small' | 'medium';
 /** `parenthesis` draws "(128)"; `reviews` draws "· 128 reviews". */
 export type RatingCountStyle = 'parenthesis' | 'reviews';
 
+/**
+ * `compact` (default) is one star and the value; `stars` a full row of `max`
+ * stars (five) filled to the value — fractionally, so 4.3 fills the fifth star
+ * 30% — before the value.
+ */
+export type RatingVariant = 'compact' | 'stars';
+
 export interface RatingProps {
   /**
    * The rating on a 5 scale. A number is drawn with up to two decimals (4.9,
@@ -23,6 +30,20 @@ export interface RatingProps {
   newLabel?: string;
   /** Default `medium`. */
   size?: RatingSize;
+  /** Default `compact` — one star. `stars` draws a row of five, filled fractionally. */
+  variant?: RatingVariant;
+  /**
+   * Paints the star(s) and the value — and the count, unless `countColor` is
+   * given — e.g. white over a brand-coloured hero, where text-primary and
+   * text-secondary are illegible. Default: text-primary (count text-secondary).
+   */
+  color?: string;
+  /** The filled star(s) alone, e.g. a gold star beside neutral text. Default `color`. */
+  starColor?: string;
+  /** The count alone. Default `color` when given, else text-secondary. */
+  countColor?: string;
+  /** `stars` variant: the unfilled part of each star. Default the theme's border colour. */
+  emptyStarColor?: string;
   /**
    * 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/stepper/Stepper.tsx

@@ -5,6 +5,7 @@ import { Button } from '../button';
 import { webDataSet } from '../styles/web-data';
 import { useAccessibleNameWarning } from '../hooks/use-accessible-name-warning';
 import { RiAddLine } from '../icons/remix/RiAddLine';
+import { RiDeleteBinLine } from '../icons/remix/RiDeleteBinLine';
 import { RiSubtractLine } from '../icons/remix/RiSubtractLine';
 import { useRingOffsetStyle } from '../styles/surface-levels';
 import { interactiveWebCss, useInteractiveWebCss } from '../styles/interactive-web-css';
@@ -33,6 +34,14 @@ import { useFieldMembership } from '../field/membership';
  * the tab order, being pointer affordances for the same action. On native it
  * answers the `increment`/`decrement` accessibility actions (VoiceOver swipe
  * up/down, TalkBack volume keys).
+ *
+ * REMOVE AT THE FLOOR is opt-in (`onRemove`). With it, the `−` button at `min`
+ * turns into a trash button named `removeLabel` that calls `onRemove` — a
+ * basket line that goes from 1 to gone. Without it the button disables at
+ * `min`, as it always has. The keyboard and the accessibility actions on the
+ * value never remove: an arrow key or a volume-key swipe that deletes is a
+ * destructive action behind an arithmetic one. So that a keyboard user can
+ * still reach it, the button joins the tab order while it is the remove control.
  */
 
 const IS_WEB = Platform.OS === 'web';
@@ -83,6 +92,8 @@ function StepperComponent({
   accessibilityLabel,
   decrementLabel = 'Decrease',
   incrementLabel = 'Increase',
+  onRemove,
+  removeLabel = 'Remove',
   style,
   testID,
 }: StepperProps) {
@@ -99,6 +110,8 @@ function StepperComponent({
 
   const canDecrement = !disabled && value > min;
   const canIncrement = !disabled && (max === undefined || value < max);
+  // At the floor with `onRemove`, the decrement slot IS the remove control.
+  const removes = onRemove !== undefined && !disabled && value <= min;
 
   const change = useCallback(
     (target: number) => {
@@ -180,11 +193,11 @@ function StepperComponent({
         variant="secondary"
         size={config.button}
         iconOnly
-        icon={RiSubtractLine}
-        onPress={decrement}
-        disabled={!canDecrement}
-        accessibilityLabel={decrementLabel}
-        tabIndex={-1}
+        icon={removes ? RiDeleteBinLine : RiSubtractLine}
+        onPress={removes ? onRemove : decrement}
+        disabled={!(canDecrement || removes)}
+        accessibilityLabel={removes ? removeLabel : decrementLabel}
+        tabIndex={removes ? 0 : -1}
         testID={testID ? `${testID}-decrement` : undefined}
       />
       <View

package/src/stepper/types.ts

@@ -38,6 +38,15 @@ export interface StepperProps {
   decrementLabel?: string;
   /** Name of the `+` button. Default `"Increase"`. */
   incrementLabel?: string;
+  /**
+   * Opt-in remove at the floor: at `min` the `−` button becomes a trash button
+   * that calls this instead of disabling (a basket line going from 1 to gone).
+   * Only the button removes — the keyboard and accessibility actions on the
+   * value still stop at `min`. Without it the stepper floors at `min`.
+   */
+  onRemove?: () => void;
+  /** Name of the trash button drawn at `min` with `onRemove`. Default `"Remove"`. */
+  removeLabel?: string;
   style?: StyleProp<ViewStyle>;
   testID?: string;
 }

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,