@oxyhq/bloom 0.58.1 → 0.60.0

package/src/select/index.web.tsx

@@ -3,6 +3,7 @@ import { Pressable, StyleSheet, View } from 'react-native';
 
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
+import { Backdrop } from '../overlay';
 import { Portal } from '../portal/index.web';
 import { createOverlayZIndex } from '../styles/z-index';
 import { WEB_POSITION_FIXED } from '../styles/web-view-style';
@@ -188,7 +189,7 @@ export function SelectContent<T>({
 
   return (
     <Portal>
-      <Pressable
+      <Backdrop
         style={styles.backdrop}
         onPress={ctx.close}
         accessibilityLabel="Close selection"

package/src/zoomable-image-gallery/ZoomableImageGallery.tsx

@@ -95,6 +95,15 @@ interface FittedSize {
   height: number;
 }
 
+/**
+ * Resolve `cornerRadius` against the size an image is actually rendered at, so
+ * `'circle'` stays a circle at every fitted size (and through the open/close
+ * animation, which scales this same box).
+ */
+function resolveCornerRadius(cornerRadius: number | 'circle', fit: FittedSize): number {
+  return cornerRadius === 'circle' ? Math.min(fit.width, fit.height) / 2 : cornerRadius;
+}
+
 /**
  * Fullscreen, swipeable image viewer that replicates the profile avatar's
  * measured-origin zoom transition (`ZoomableAvatar`) for rectangular post media:
@@ -116,6 +125,11 @@ const ZoomableImageGalleryInner = React.forwardRef<ZoomableImageGalleryHandle, Z
   const theme = useTheme();
   const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = useWindowDimensions();
 
+  const radiusFor = useCallback(
+    (fit: FittedSize) => resolveCornerRadius(cornerRadius, fit),
+    [cornerRadius],
+  );
+
   const [isOpen, setIsOpen] = useState(false);
   // Once true, the swipeable pager is mounted and the single open-image hidden.
   const [pagerReady, setPagerReady] = useState(false);
@@ -787,7 +801,7 @@ const ZoomableImageGalleryInner = React.forwardRef<ZoomableImageGalleryHandle, Z
                 source={{ uri: images[activeIndex]?.uri }}
                 contentFit="contain"
                 style={[
-                  { width: activeFit.width, height: activeFit.height, borderRadius: cornerRadius },
+                  { width: activeFit.width, height: activeFit.height, borderRadius: radiusFor(activeFit) },
                   openImageStyle,
                 ]}
                 transition={0}
@@ -839,7 +853,7 @@ const ZoomableImageGalleryInner = React.forwardRef<ZoomableImageGalleryHandle, Z
                             source={{ uri: img.uri }}
                             contentFit="contain"
                             style={[
-                              { width: fit.width, height: fit.height, borderRadius: cornerRadius },
+                              { width: fit.width, height: fit.height, borderRadius: radiusFor(fit) },
                               zoomImageStyle,
                             ]}
                             transition={0}
@@ -859,7 +873,7 @@ const ZoomableImageGalleryInner = React.forwardRef<ZoomableImageGalleryHandle, Z
                       <Image
                         source={{ uri: img.uri }}
                         contentFit="contain"
-                        style={{ width: fit.width, height: fit.height, borderRadius: cornerRadius }}
+                        style={{ width: fit.width, height: fit.height, borderRadius: radiusFor(fit) }}
                         transition={0}
                         {...(Platform.OS === 'web' ? { draggable: false } : {})}
                       />

package/src/zoomable-image-gallery/types.ts

@@ -44,8 +44,12 @@ export interface ZoomableImageGalleryHandle {
 export interface ZoomableImageGalleryProps {
   /** Measures any thumbnail by its images-only subset index, used on dismiss. */
   measureThumb?: MeasureThumb;
-  /** Corner radius applied to the zoomed images. Defaults to `DEFAULT_CORNER_RADIUS`. */
-  cornerRadius?: number;
+  /**
+   * Corner radius applied to the zoomed images. `'circle'` rounds each image to
+   * a full circle at whatever size it is fitted to — what an avatar needs, and
+   * the reason avatars don't need their own viewer.
+   */
+  cornerRadius?: number | 'circle';
   /**
    * Bottom page indicator for multi-image galleries. `'dots'` (default) renders the
    * compact dot row; `'thumbnails'` renders a horizontal strip of tappable image