@oxyhq/bloom 0.12.1 → 0.14.0

package/src/responsive-sheet/ResponsiveSheet.tsx

@@ -0,0 +1,327 @@
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import {
+  Pressable,
+  StyleSheet,
+  useWindowDimensions,
+  View,
+  type ViewStyle,
+} from 'react-native';
+
+import { Z_INDEX } from '../styles/z-index';
+import { useTheme } from '../theme/use-theme';
+import {
+  ANIMATION_DURATION,
+  BACKDROP_OPACITY,
+  DEFAULT_BREAKPOINT,
+  DEFAULT_LABEL,
+  DEFAULT_MAX_HEIGHT_RATIO,
+  DEFAULT_SIDE,
+  DEFAULT_WIDTH,
+  EASE_OUT,
+  HANDLE_HEIGHT,
+  HANDLE_RADIUS,
+  HANDLE_WIDTH,
+  PANEL_RADIUS,
+  SIDE_SHEET_MIN_GUTTER,
+} from './const';
+import type { ResponsiveSheetProps } from './types';
+
+/** Stable testID for the dimmed backdrop dismiss button. */
+export const RESPONSIVE_SHEET_BACKDROP_TESTID = 'bloom-responsive-sheet-backdrop';
+
+/**
+ * Default / web variant of `<ResponsiveSheet>`.
+ *
+ * This file is BOTH the package's default entry (`react-native` export
+ * condition resolves it for downstream `tsc`, and non-Metro web bundlers pick
+ * it via the `browser` condition through `index.web`) AND the canonical web
+ * implementation. It MUST NOT import `react-native-reanimated` — reanimated has
+ * no web build and its worklets Babel plugin is native-only, so a static import
+ * here would break every web bundler and downstream type-check. The native
+ * fork (`ResponsiveSheet.native.tsx`, selected only by Metro) drives the same
+ * motion with reanimated.
+ *
+ * Motion is pure CSS transitions: react-native-web emits `transition-*` style
+ * props to the DOM, and the panel/backdrop toggle their transform/opacity by a
+ * `shown` flag. Presence is handled with a `mounted` + `shown` pair so both the
+ * open AND close directions animate while the node stays mounted through the
+ * exit. We deliberately do NOT use reanimated `exiting` on web — concurrent
+ * React unmounts there throw `Failed to execute 'removeChild' on 'Node'`, the
+ * exact bug this component exists to avoid.
+ */
+export function ResponsiveSheet({
+  open,
+  onClose,
+  side = DEFAULT_SIDE,
+  breakpoint = DEFAULT_BREAKPOINT,
+  width = DEFAULT_WIDTH,
+  maxHeightRatio = DEFAULT_MAX_HEIGHT_RATIO,
+  inset,
+  showHandle = true,
+  dismissOnBackdrop = true,
+  panelStyle,
+  panelClassName,
+  containerStyle,
+  containerClassName,
+  label = DEFAULT_LABEL,
+  children,
+}: ResponsiveSheetProps) {
+  const theme = useTheme();
+  const { width: viewportWidth, height: viewportHeight } = useWindowDimensions();
+
+  // Presence: `mounted` keeps the node in the tree through the exit transition;
+  // `shown` drives the enter/exit transform & opacity. On open we mount first,
+  // then flip `shown` on the next frame so the browser registers the start
+  // state and animates to the end. On close we flip `shown` off, then unmount
+  // after the transition duration.
+  const [mounted, setMounted] = useState(open);
+  const [shown, setShown] = useState(false);
+  const closeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const frameRef = useRef<FrameToken | null>(null);
+
+  useEffect(() => {
+    if (open) {
+      if (closeTimerRef.current) {
+        clearTimeout(closeTimerRef.current);
+        closeTimerRef.current = null;
+      }
+      setMounted(true);
+      // Defer to the next frame so the entry start state paints before we
+      // transition to the shown state. Two frames guarantees the start
+      // transform has committed before the toggle (a single frame can be
+      // coalesced with the mount paint in some browsers).
+      frameRef.current = scheduleFrame(() => {
+        frameRef.current = scheduleFrame(() => setShown(true));
+      });
+      return () => {
+        if (frameRef.current !== null) {
+          cancelFrame(frameRef.current);
+          frameRef.current = null;
+        }
+      };
+    }
+
+    // Closing: only run the exit if something is currently mounted.
+    setShown(false);
+    if (!mounted) return;
+    closeTimerRef.current = setTimeout(() => {
+      setMounted(false);
+      closeTimerRef.current = null;
+    }, ANIMATION_DURATION);
+    return () => {
+      if (closeTimerRef.current) {
+        clearTimeout(closeTimerRef.current);
+        closeTimerRef.current = null;
+      }
+    };
+  }, [open, mounted]);
+
+  // Escape-to-close while open (web only; document is undefined elsewhere).
+  useEffect(() => {
+    if (!open || typeof document === 'undefined') return;
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.stopPropagation();
+        onClose();
+      }
+    };
+    document.addEventListener('keydown', handler);
+    return () => document.removeEventListener('keydown', handler);
+  }, [open, onClose]);
+
+  const handleBackdropPress = useCallback(() => {
+    if (dismissOnBackdrop) onClose();
+  }, [dismissOnBackdrop, onClose]);
+
+  const isBottom = viewportWidth < breakpoint;
+  const panelBackground = theme.colors.background;
+
+  const panelTransition = useMemo<ViewStyle>(
+    () =>
+      ({
+        transitionProperty: 'transform, opacity',
+        transitionDuration: `${ANIMATION_DURATION}ms`,
+        transitionTimingFunction: EASE_OUT,
+      }) as ViewStyle,
+    [],
+  );
+
+  const backdropTransition = useMemo<ViewStyle>(
+    () =>
+      ({
+        transitionProperty: 'opacity',
+        transitionDuration: `${ANIMATION_DURATION}ms`,
+        transitionTimingFunction: EASE_OUT,
+      }) as ViewStyle,
+    [],
+  );
+
+  const panelGeometry = useMemo<ViewStyle>(() => {
+    if (isBottom) {
+      return {
+        left: 0,
+        right: 0,
+        bottom: 0,
+        maxHeight: Math.round(viewportHeight * maxHeightRatio),
+        borderTopLeftRadius: PANEL_RADIUS,
+        borderTopRightRadius: PANEL_RADIUS,
+        transform: [{ translateY: shown ? 0 : '100%' }],
+        opacity: shown ? 1 : 0,
+      } as ViewStyle;
+    }
+
+    // Side-sheet: full height minus top/bottom inset, anchored to `side`,
+    // offset by the matching horizontal inset. Width is capped so the panel
+    // always leaves a gutter on the opposite edge.
+    const insetTop = inset?.top ?? 0;
+    const insetBottom = inset?.bottom ?? 0;
+    const insetLeft = inset?.left ?? 0;
+    const insetRight = inset?.right ?? 0;
+    const anchorInset = side === 'left' ? insetLeft : insetRight;
+    const oppositeInset = side === 'left' ? insetRight : insetLeft;
+    const available = viewportWidth - anchorInset - oppositeInset - SIDE_SHEET_MIN_GUTTER;
+    const cappedWidth = Math.max(0, Math.min(width, available));
+    const hiddenSign = side === 'left' ? '-100%' : '100%';
+
+    return {
+      top: insetTop,
+      bottom: insetBottom,
+      [side]: anchorInset,
+      width: cappedWidth,
+      borderRadius: PANEL_RADIUS,
+      transform: [{ translateX: shown ? 0 : hiddenSign }],
+      opacity: shown ? 1 : 0,
+    } as ViewStyle;
+  }, [isBottom, shown, side, width, inset, viewportWidth, viewportHeight, maxHeightRatio]);
+
+  if (!mounted) return null;
+
+  return (
+    <View
+      style={[styles.root, containerStyle]}
+      // NativeWind reads `className` at runtime; RN core does not type it on
+      // View, so spread it conditionally (matching the Button/Fab pattern).
+      {...(containerClassName ? ({ className: containerClassName } as Record<string, string>) : {})}
+      pointerEvents="box-none"
+    >
+      <Pressable
+        testID={RESPONSIVE_SHEET_BACKDROP_TESTID}
+        accessibilityRole="button"
+        accessibilityLabel={`Dismiss ${label}`}
+        onPress={handleBackdropPress}
+        disabled={!dismissOnBackdrop}
+        style={[
+          styles.backdrop,
+          backdropTransition,
+          { opacity: shown ? BACKDROP_OPACITY : 0 },
+          isWeb ? webBackdropBlur : null,
+        ]}
+      />
+
+      <View
+        accessibilityViewIsModal
+        aria-label={label}
+        {...(panelClassName ? ({ className: panelClassName } as Record<string, string>) : {})}
+        style={[
+          styles.panel,
+          { backgroundColor: panelBackground, shadowColor: theme.colors.shadow },
+          panelGeometry,
+          panelTransition,
+          panelStyle,
+        ]}
+        pointerEvents="auto"
+      >
+        {isBottom && showHandle ? (
+          <View style={styles.handleRow} pointerEvents="none">
+            <View style={[styles.handle, { backgroundColor: theme.colors.border }]} />
+          </View>
+        ) : null}
+        {children}
+      </View>
+    </View>
+  );
+}
+
+// This module is the web/default impl, but it is also the fallback resolved by
+// a downstream consumer's `tsc` for the native target, so guard the web-only
+// `backdrop-blur` style behind a runtime check rather than assuming web.
+const isWeb = typeof document !== 'undefined';
+
+/**
+ * Opaque token returned by `scheduleFrame`. `requestAnimationFrame` returns a
+ * number; the `setTimeout` fallback returns a timer handle — both are kept so
+ * `cancelFrame` can route to the matching canceller.
+ */
+type FrameToken = { raf: number } | { timer: ReturnType<typeof setTimeout> };
+
+/**
+ * Schedule a callback for the next paint. Uses `requestAnimationFrame` in the
+ * browser; degrades to a 0ms timeout when rAF is unavailable (SSR/hydration,
+ * non-DOM test envs) so the enter transition's `shown` flip still fires.
+ */
+function scheduleFrame(cb: () => void): FrameToken {
+  if (typeof requestAnimationFrame === 'function') {
+    return { raf: requestAnimationFrame(cb) };
+  }
+  return { timer: setTimeout(cb, 0) };
+}
+
+function cancelFrame(token: FrameToken): void {
+  if ('raf' in token) {
+    if (typeof cancelAnimationFrame === 'function') cancelAnimationFrame(token.raf);
+    return;
+  }
+  clearTimeout(token.timer);
+}
+
+// `backdrop-filter` is web-only; react-native-web passes it through to the DOM.
+const webBackdropBlur = { backdropFilter: 'blur(2px)' } as unknown as ViewStyle;
+
+const styles = StyleSheet.create({
+  root: {
+    // `position: fixed` pins the overlay to the viewport on web; react-native
+    // does not type `'fixed'`, so cast to the RN-accepted `'absolute'`. On
+    // native the `.native` fork uses `StyleSheet.absoluteFill` instead.
+    position: 'fixed' as 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: Z_INDEX.fullscreen,
+  },
+  backdrop: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: '#000',
+  },
+  panel: {
+    position: 'absolute',
+    overflow: 'hidden',
+    shadowOpacity: 0.18,
+    shadowRadius: 24,
+    shadowOffset: { width: 0, height: 8 },
+  },
+  handleRow: {
+    width: '100%',
+    alignItems: 'center',
+    paddingTop: 8,
+    paddingBottom: 4,
+  },
+  handle: {
+    width: HANDLE_WIDTH,
+    height: HANDLE_HEIGHT,
+    borderRadius: HANDLE_RADIUS,
+    opacity: 0.5,
+  },
+});
+
+export default ResponsiveSheet;

package/src/responsive-sheet/const.ts

@@ -0,0 +1,53 @@
+/**
+ * Shared default constants for `ResponsiveSheet`.
+ *
+ * Platform-agnostic — imported by both the default/web CSS implementation
+ * (`ResponsiveSheet.tsx`) and the native reanimated implementation
+ * (`ResponsiveSheet.native.tsx`) so the two variants stay in lockstep.
+ */
+
+/** Below this viewport width the sheet renders as a bottom-sheet. */
+export const DEFAULT_BREAKPOINT = 768;
+
+/** Side-sheet width (px) on wide screens. Capped to fit the viewport. */
+export const DEFAULT_WIDTH = 460;
+
+/** Bottom-sheet maximum height as a fraction of the viewport height. */
+export const DEFAULT_MAX_HEIGHT_RATIO = 0.9;
+
+/** Anchored edge of the side-sheet on wide screens. */
+export const DEFAULT_SIDE = 'left' as const;
+
+/**
+ * Open/close transition duration (ms). ~280–300ms ease-out reads as smooth
+ * without feeling sluggish; shared by the CSS transition and the native
+ * reanimated timing so both platforms match.
+ */
+export const ANIMATION_DURATION = 280;
+
+/**
+ * Standard CSS approximation of reanimated's `Easing.out(Easing.cubic)` so the
+ * web transition curve matches the native one.
+ */
+export const EASE_OUT = 'cubic-bezier(0.33, 1, 0.68, 1)';
+
+/** Corner radius for the side-sheet panel and the top of the bottom-sheet. */
+export const PANEL_RADIUS = 20;
+
+/** Backdrop dim opacity once fully shown (matches `bg-black/40`). */
+export const BACKDROP_OPACITY = 0.4;
+
+/** Drag-handle pill geometry for the bottom-sheet. */
+export const HANDLE_WIDTH = 36;
+export const HANDLE_HEIGHT = 5;
+export const HANDLE_RADIUS = 3;
+
+/**
+ * Minimum gutter kept between a wide side-sheet and the opposite viewport edge
+ * when capping its width, so the panel never spans the full screen on a narrow
+ * desktop window that is still above the breakpoint.
+ */
+export const SIDE_SHEET_MIN_GUTTER = 24;
+
+/** A11y label fallback when the host does not provide one. */
+export const DEFAULT_LABEL = 'Sheet';

package/src/responsive-sheet/index.ts

@@ -0,0 +1,6 @@
+export { ResponsiveSheet, RESPONSIVE_SHEET_BACKDROP_TESTID } from './ResponsiveSheet';
+export type {
+  ResponsiveSheetProps,
+  ResponsiveSheetSide,
+  ResponsiveSheetInset,
+} from './types';

package/src/responsive-sheet/index.web.ts

@@ -0,0 +1,16 @@
+// Web variant of the `./responsive-sheet` barrel.
+//
+// The default barrel (`./index.ts`) re-exports from `./ResponsiveSheet`, which
+// is itself the reanimated-free web/CSS implementation — Metro additionally
+// resolves `./ResponsiveSheet.native` for native targets. Web bundlers select
+// THIS file via the `"browser"` export condition in `package.json`'s
+// `exports['./responsive-sheet']`, pointing them explicitly at the CSS
+// implementation so a non-Metro bundler never follows the `.native` sibling
+// (which statically imports `react-native-reanimated`, a native-only module).
+// Types are platform-agnostic, so they come straight from `./types`.
+export { ResponsiveSheet, RESPONSIVE_SHEET_BACKDROP_TESTID } from './ResponsiveSheet';
+export type {
+  ResponsiveSheetProps,
+  ResponsiveSheetSide,
+  ResponsiveSheetInset,
+} from './types';

package/src/responsive-sheet/types.ts

@@ -0,0 +1,57 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+/** Edge a wide-screen side-sheet anchors to. */
+export type ResponsiveSheetSide = 'left' | 'right';
+
+/**
+ * Inset (px) of the wide-screen side-sheet from its container edges. Lets a
+ * host place the sheet "inside its own shell" — e.g. offset from the top by a
+ * header, or from the left by a nav rail — with margins on every side.
+ */
+export interface ResponsiveSheetInset {
+  top?: number;
+  bottom?: number;
+  left?: number;
+  right?: number;
+}
+
+/**
+ * A responsive overlay sheet: an anchored side-sheet on wide screens and a
+ * bottom-sheet (with drag handle) on small screens, switching by viewport
+ * width. It is a plain controlled component — the host drives `open`/`onClose`
+ * from its own state. It renders in place (no portal) so the host can scope it
+ * inside a themed/positioned subtree.
+ */
+export interface ResponsiveSheetProps {
+  /** Whether the sheet is open. Controlled by the host. */
+  open: boolean;
+  /** Fired when the sheet requests to close (backdrop tap, Escape on web). */
+  onClose: () => void;
+  /** Anchor edge on wide screens. Defaults to `'left'`. */
+  side?: ResponsiveSheetSide;
+  /** Viewport width (px) below which the sheet renders as a bottom-sheet. Defaults to `768`. */
+  breakpoint?: number;
+  /** Side-sheet width (px) on wide screens. Capped to fit. Defaults to `460`. */
+  width?: number;
+  /** Bottom-sheet max height as a fraction of the viewport height. Defaults to `0.9`. */
+  maxHeightRatio?: number;
+  /** Side-sheet inset (px) from the container edges. Defaults to `0` on all sides. */
+  inset?: ResponsiveSheetInset;
+  /** Whether to render the drag handle in bottom-sheet mode. Defaults to `true`. */
+  showHandle?: boolean;
+  /** Whether tapping the backdrop closes the sheet. Defaults to `true`. */
+  dismissOnBackdrop?: boolean;
+  /** Style for the panel surface (e.g. brand color). Composed after defaults. */
+  panelStyle?: StyleProp<ViewStyle>;
+  /** NativeWind classes for the panel surface. */
+  panelClassName?: string;
+  /** Style for the root overlay (theme-var scope, rail offset, etc.). */
+  containerStyle?: StyleProp<ViewStyle>;
+  /** NativeWind classes for the root overlay (e.g. `"md:left-[4.75rem]"`). */
+  containerClassName?: string;
+  /** Accessibility label for the sheet panel and the backdrop dismiss button. */
+  label?: string;
+  /** Sheet content. */
+  children: ReactNode;
+}