@webority-technologies/mobile-ui 0.0.1

package/lib/module/components/BottomSheet/BottomSheet.js

@@ -0,0 +1,553 @@
+"use strict";
+
+/**
+ * BottomSheet — Reanimated 3 + Gesture Handler 2 implementation.
+ *
+ * A polished, theme-aware bottom sheet with multi-snap-point support,
+ * UI-thread driven pan gestures, and native-driver spring animations.
+ *
+ * USAGE:
+ *
+ * const ref = useRef<BottomSheetRef>(null);
+ * <BottomSheet ref={ref} snapPoints={[200, '50%', '90%']}>
+ *   <YourContent />
+ * </BottomSheet>
+ *
+ * ref.current?.expand();   // open at first snap point (or `index` prop)
+ * ref.current?.expand(2);  // open at specific index
+ * ref.current?.collapse(); // animate to smallest snap point
+ * ref.current?.close();    // dismiss
+ */
+
+import React, { createContext, forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { Dimensions, Keyboard, Modal, Platform, StyleSheet, View } from 'react-native';
+import { Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler';
+import Animated, { Easing, runOnJS, useAnimatedStyle, useSharedValue, withSpring, withTiming } from 'react-native-reanimated';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useTheme } from "../../theme/index.js";
+import { triggerHaptic } from "../../utils/index.js";
+
+/**
+ * State + actions exposed to anything rendered inside a `<BottomSheet>` —
+ * including the `header` and `footer` slots. Read via `useBottomSheet()`.
+ *
+ * `snapIndex` is the JS-thread mirror of the current snap point. -1 means the
+ * sheet is closed (mid-close-animation included). Use it to drive footer
+ * button enable state, conditional headers, etc. If you need per-frame
+ * progress (e.g. fade a header in as the sheet expands), reach for the
+ * animated value via a future enhancement — not exposed today to keep the
+ * surface minimal.
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const BottomSheetContext = /*#__PURE__*/createContext(null);
+
+/**
+ * Access the enclosing `<BottomSheet>`'s state and imperative actions.
+ * Must be called from a component rendered inside a `<BottomSheet>` (as
+ * `children`, `header`, or `footer`).
+ */
+export const useBottomSheet = () => {
+  const ctx = useContext(BottomSheetContext);
+  if (!ctx) {
+    throw new Error('useBottomSheet must be used inside a <BottomSheet>.');
+  }
+  return ctx;
+};
+const SPRING_CONFIG = {
+  damping: 20,
+  stiffness: 240,
+  mass: 1
+};
+const CLOSE_VELOCITY_THRESHOLD = 1000;
+const DRAG_ACTIVATION_OFFSET = 10;
+const BottomSheet = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    snapPoints,
+    index: controlledIndex,
+    onChange,
+    onAnimate,
+    enablePanDownToClose = true,
+    enableBackdropPress = true,
+    keyboardBehavior = 'none',
+    mode = 'modal',
+    handleIndicatorStyle,
+    containerStyle,
+    header,
+    footer,
+    headerStyle,
+    footerStyle,
+    children,
+    accessibilityLabel,
+    accessibilityViewIsModal,
+    testID
+  } = props;
+  const theme = useTheme();
+  const insets = useSafeAreaInsets();
+  const [screenHeight, setScreenHeight] = useState(() => Dimensions.get('window').height);
+
+  // Resolve snap points (px values), sorted ascending so larger height = smaller translateY.
+  const resolvedSnapPoints = useMemo(() => resolveSnapPoints(snapPoints, screenHeight), [snapPoints, screenHeight]);
+
+  // Listen for orientation / window changes so % snap points stay accurate.
+  useEffect(() => {
+    const sub = Dimensions.addEventListener('change', ({
+      window
+    }) => {
+      setScreenHeight(window.height);
+    });
+    return () => sub.remove();
+  }, []);
+  const closedY = screenHeight; // fully off-screen
+  const maxSnapPoint = resolvedSnapPoints[resolvedSnapPoints.length - 1] ?? 0;
+
+  // translateY: 0 = top of screen, screenHeight = fully closed.
+  const translateY = useSharedValue(closedY);
+  // Captures the translateY at gesture start so onUpdate can be additive.
+  const dragStartY = useSharedValue(closedY);
+  // Tracks current snap index on the JS thread (mirrored to a shared value for worklets).
+  const currentIndexShared = useSharedValue(-1);
+  const [currentIndex, setCurrentIndex] = useState(-1);
+  const isAnimatingRef = useRef(false);
+  // Drives the native <Modal>'s visible prop in modal mode. We mount the modal
+  // synchronously on open and unmount only after the close animation finishes
+  // so the slide-down stays visible.
+  const [modalVisible, setModalVisible] = useState(false);
+  // Inline-mode mirror of modalVisible: gates the absoluteFill backdrop +
+  // sheet tree so a closed inline sheet doesn't sit over the parent dimming
+  // it and swallowing touches. Set true on expand, cleared in
+  // markAnimationDone once the close animation completes.
+  const [inlineMounted, setInlineMounted] = useState(false);
+
+  // Convert a snap-point index → translateY position. -1 = closed.
+  const yForIndex = useCallback(idx => {
+    if (idx < 0 || idx >= resolvedSnapPoints.length) {
+      return closedY;
+    }
+    const sheetHeight = resolvedSnapPoints[idx];
+    return screenHeight - sheetHeight;
+  }, [resolvedSnapPoints, screenHeight, closedY]);
+  const setIndexJS = useCallback(next => {
+    const previous = currentIndex;
+    if (previous === next) {
+      return;
+    }
+    setCurrentIndex(next);
+    currentIndexShared.value = next;
+    onChange?.(next);
+  }, [currentIndex, currentIndexShared, onChange]);
+  const markAnimationDone = useCallback(() => {
+    isAnimatingRef.current = false;
+    // If we just finished a close animation, unmount the sheet wrapper.
+    if (currentIndexShared.value < 0) {
+      if (mode === 'modal') {
+        setModalVisible(false);
+      } else {
+        setInlineMounted(false);
+      }
+    }
+  }, [mode, currentIndexShared]);
+  const animateTo = useCallback((to, fromIndex, toIndex) => {
+    isAnimatingRef.current = true;
+    onAnimate?.(fromIndex, toIndex);
+    translateY.value = withSpring(to, SPRING_CONFIG, finished => {
+      'worklet';
+
+      if (finished) {
+        runOnJS(markAnimationDone)();
+      }
+    });
+  }, [onAnimate, translateY, markAnimationDone]);
+  const expand = useCallback(idx => {
+    const target = typeof idx === 'number' ? clamp(idx, 0, resolvedSnapPoints.length - 1) : currentIndex >= 0 ? currentIndex : 0;
+    const fromIndex = currentIndexShared.value;
+    const to = yForIndex(target);
+    // Mount the host (Modal in modal mode, inline overlay in inline mode)
+    // before kicking off the spring so the sheet has somewhere to animate
+    // into. Inline mode also gates the backdrop on this so a closed sheet
+    // doesn't dim the parent.
+    if (mode === 'modal') {
+      setModalVisible(true);
+    } else {
+      setInlineMounted(true);
+    }
+    // Reset translateY to the closed position so the first open animates
+    // up from off-screen rather than snapping in place.
+    if (fromIndex < 0) {
+      translateY.value = closedY;
+    }
+    setIndexJS(target);
+    animateTo(to, fromIndex, target);
+  }, [animateTo, closedY, currentIndex, currentIndexShared, mode, resolvedSnapPoints.length, setIndexJS, translateY, yForIndex]);
+  const collapse = useCallback(() => {
+    if (resolvedSnapPoints.length === 0) {
+      return;
+    }
+    const fromIndex = currentIndexShared.value;
+    const to = yForIndex(0);
+    setIndexJS(0);
+    animateTo(to, fromIndex, 0);
+  }, [animateTo, currentIndexShared, resolvedSnapPoints.length, setIndexJS, yForIndex]);
+  const close = useCallback(() => {
+    const fromIndex = currentIndexShared.value;
+    setIndexJS(-1);
+    isAnimatingRef.current = true;
+    onAnimate?.(fromIndex, -1);
+    translateY.value = withTiming(closedY, {
+      duration: theme.motion.duration.fast,
+      easing: Easing.bezier(...theme.motion.easing.accelerate)
+    }, finished => {
+      'worklet';
+
+      if (finished) {
+        runOnJS(markAnimationDone)();
+      }
+    });
+  }, [closedY, currentIndexShared, markAnimationDone, onAnimate, setIndexJS, translateY, theme.motion.duration.fast, theme.motion.easing.accelerate]);
+  useImperativeHandle(ref, () => ({
+    expand,
+    collapse,
+    close
+  }), [expand, collapse, close]);
+
+  // Drive the controlled `index` prop.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: controlled-prop driver: adding `currentIndex` would fight the user's drag by re-snapping to the controlled index
+  useEffect(() => {
+    if (typeof controlledIndex !== 'number') {
+      return;
+    }
+    if (controlledIndex === currentIndex) {
+      return;
+    }
+    if (controlledIndex === -1) {
+      close();
+    } else {
+      expand(controlledIndex);
+    }
+  }, [controlledIndex]);
+
+  // ───────── Gesture (UI thread) ─────────
+  // Worklet helpers must be declared inline so they capture shared values correctly.
+  const minTopY = screenHeight - maxSnapPoint; // smallest translateY (sheet fully expanded)
+  const snapTargets = useMemo(() => resolvedSnapPoints.map(h => screenHeight - h), [resolvedSnapPoints, screenHeight]);
+  const handleSnapEnd = useCallback((toIndex, toY) => {
+    const fromIndex = currentIndexShared.value;
+    if (toIndex === -1) {
+      triggerHaptic('selection');
+      setIndexJS(-1);
+      isAnimatingRef.current = true;
+      onAnimate?.(fromIndex, -1);
+      translateY.value = withTiming(closedY, {
+        duration: theme.motion.duration.fast,
+        easing: Easing.bezier(...theme.motion.easing.accelerate)
+      }, finished => {
+        'worklet';
+
+        if (finished) {
+          runOnJS(markAnimationDone)();
+        }
+      });
+      return;
+    }
+    setIndexJS(toIndex);
+    animateTo(toY, fromIndex, toIndex);
+  }, [animateTo, closedY, currentIndexShared, markAnimationDone, onAnimate, setIndexJS, translateY, theme.motion.duration.fast, theme.motion.easing.accelerate]);
+  const panGesture = useMemo(() => {
+    const targets = snapTargets;
+    const closed = closedY;
+    const top = minTopY;
+    const canPanDownToClose = enablePanDownToClose;
+    return Gesture.Pan().activeOffsetY([-DRAG_ACTIVATION_OFFSET, DRAG_ACTIVATION_OFFSET]).failOffsetX([-15, 15]).onStart(() => {
+      'worklet';
+
+      dragStartY.value = translateY.value;
+    }).onUpdate(event => {
+      'worklet';
+
+      const next = dragStartY.value + event.translationY;
+      // Clamp at the top (most-expanded) snap point with a touch of rubber-banding.
+      if (next < top) {
+        translateY.value = top + (next - top) * 0.25;
+      } else {
+        translateY.value = next;
+      }
+    }).onEnd(event => {
+      'worklet';
+
+      const releaseY = translateY.value;
+      const velocity = event.velocityY;
+
+      // Fast downward swipe → close (if allowed) or snap to smallest.
+      if (velocity > CLOSE_VELOCITY_THRESHOLD) {
+        if (canPanDownToClose) {
+          runOnJS(handleSnapEnd)(-1, closed);
+          return;
+        }
+        runOnJS(handleSnapEnd)(0, targets[0]);
+        return;
+      }
+
+      // Find nearest snap target by distance.
+      let nearestIdx = 0;
+      let nearestDist = Math.abs(releaseY - targets[0]);
+      for (let i = 1; i < targets.length; i++) {
+        const d = Math.abs(releaseY - targets[i]);
+        if (d < nearestDist) {
+          nearestDist = d;
+          nearestIdx = i;
+        }
+      }
+
+      // If user dragged below smallest snap point past threshold and pan-to-close is on, dismiss.
+      const smallest = targets[0];
+      const overshoot = releaseY - smallest;
+      if (canPanDownToClose && overshoot > 80) {
+        runOnJS(handleSnapEnd)(-1, closed);
+        return;
+      }
+      runOnJS(handleSnapEnd)(nearestIdx, targets[nearestIdx]);
+    });
+  }, [closedY, dragStartY, enablePanDownToClose, handleSnapEnd, minTopY, snapTargets, translateY]);
+
+  // ───────── Keyboard tracking ─────────
+  // keyboardOffset is added to translateY in sheetStyle so we don't disturb
+  // snap-point math. iOS gets keyboardWillShow/Hide (smoother), Android only
+  // emits keyboardDidShow/Hide.
+  const keyboardOffset = useSharedValue(0);
+  useEffect(() => {
+    if (keyboardBehavior === 'none') {
+      return;
+    }
+    const showEvt = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
+    const hideEvt = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
+    const onShow = e => {
+      const h = e.endCoordinates?.height ?? 0;
+      keyboardOffset.value = withTiming(-h, {
+        duration: theme.motion.duration.normal
+      });
+    };
+    const onHide = () => {
+      keyboardOffset.value = withTiming(0, {
+        duration: theme.motion.duration.normal
+      });
+    };
+    const showSub = Keyboard.addListener(showEvt, onShow);
+    const hideSub = Keyboard.addListener(hideEvt, onHide);
+    return () => {
+      showSub.remove();
+      hideSub.remove();
+    };
+  }, [keyboardBehavior, keyboardOffset, theme.motion.duration.normal]);
+
+  // ───────── Animated styles ─────────
+  const safeAreaTop = insets.top;
+  const sheetStyle = useAnimatedStyle(() => {
+    const yWithKb = translateY.value + keyboardOffset.value;
+    // When the keyboard is up, allow the sheet to slide above its natural
+    // max-snap-point top (`minTopY`) so the input area stays visible. We still
+    // clamp to the safe-area top so the sheet doesn't disappear under the
+    // status bar / notch.
+    const lowerBound = keyboardOffset.value < 0 ? safeAreaTop : minTopY;
+    const clamped = yWithKb < lowerBound ? lowerBound : yWithKb;
+    // Animate `top` (layout prop) instead of `transform: translateY`
+    // (visual only). Layout-prop animation under Reanimated still runs on
+    // the UI thread, but crucially the sheet's *hit-test box* moves with
+    // its visual position. With translateY the layout box stayed parked
+    // at top:0..maxSnap regardless of visual offset, so:
+    //   (a) the empty top half intercepted backdrop taps (worked around
+    //       previously via pointerEvents="box-none"), and
+    //   (b) drag gestures on the handle could be claimed by sibling
+    //       gesture handlers because the actual sheet view was effectively
+    //       hidden from the responder chain.
+    // Animating `top` collapses both problems into nothing — visible area
+    // == hit area — so we can drop the box-none hack too.
+    return {
+      top: clamped
+    };
+  });
+  const isExpanded = currentIndex >= 0;
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  const handleBackdropPress = useCallback(() => {
+    if (!enableBackdropPress) {
+      return;
+    }
+    triggerHaptic('selection');
+    close();
+  }, [enableBackdropPress, close]);
+
+  // RNGH Tap gesture for the backdrop. Plain RN Pressable on a sibling of a
+  // gesture-handler/reanimated sheet doesn't fire reliably on RN 0.85 / Fabric
+  // (the gesture system swallows the touch sequence). gorhom/bottom-sheet uses
+  // the same Gesture.Tap() pattern for the same reason.
+  const backdropTapGesture = useMemo(() => Gesture.Tap().maxDuration(250).onEnd((_e, success) => {
+    'worklet';
+
+    if (!success) {
+      return;
+    }
+    runOnJS(handleBackdropPress)();
+  }), [handleBackdropPress]);
+  const contextValue = useMemo(() => ({
+    snapIndex: currentIndex,
+    snapPoints: resolvedSnapPoints,
+    expand,
+    collapse,
+    close
+  }), [currentIndex, resolvedSnapPoints, expand, collapse, close]);
+
+  // Don't render the backdrop / sheet tree when the sheet is fully closed.
+  // Inline: gated by `inlineMounted` (set in expand, cleared in
+  // markAnimationDone after close animation) — keeps an idle inline sheet
+  // from sitting over the parent and swallowing touches.
+  // Modal: gated by `modalVisible` for the same reason.
+  if (mode === 'inline' && !inlineMounted) {
+    return null;
+  }
+  if (mode === 'modal' && !modalVisible) {
+    return null;
+  }
+  const sheetTree = /*#__PURE__*/_jsxs(View, {
+    collapsable: false
+    // Modal mode: the backdrop is the modal's root, so it fills via flex.
+    // Inline mode: the backdrop overlays the parent, so it positions absolute.
+    ,
+    style: [mode === 'modal' ? styles.backdropModal : styles.backdropInline, {
+      backgroundColor: theme.colors.background.overlay
+    }],
+    testID: testID,
+    accessibilityViewIsModal: accessibilityViewIsModal ?? isExpanded,
+    children: [/*#__PURE__*/_jsx(GestureDetector, {
+      gesture: backdropTapGesture,
+      children: /*#__PURE__*/_jsx(Animated.View, {
+        style: StyleSheet.absoluteFill,
+        accessibilityRole: "button",
+        accessibilityLabel: "Close bottom sheet"
+      })
+    }), /*#__PURE__*/_jsx(GestureDetector, {
+      gesture: panGesture,
+      children: /*#__PURE__*/_jsxs(Animated.View, {
+        // 'dialog' is a valid platform role on web/iOS; RN's typings list it as a string union
+        // that varies by platform — cast keeps strict-mode happy.
+        accessibilityRole: "alert",
+        accessibilityLabel: accessibilityLabel,
+        accessibilityViewIsModal: accessibilityViewIsModal ?? isExpanded,
+        style: [styles.sheet, {
+          height: maxSnapPoint,
+          backgroundColor: theme.colors.background.elevated,
+          borderTopLeftRadius: theme.radius['2xl'],
+          borderTopRightRadius: theme.radius['2xl'],
+          paddingBottom: insets.bottom,
+          ...theme.shadows.xl
+        }, containerStyle, sheetStyle],
+        children: [/*#__PURE__*/_jsx(View, {
+          style: styles.handleRow,
+          pointerEvents: "box-none",
+          children: /*#__PURE__*/_jsx(View, {
+            style: [styles.handle, {
+              backgroundColor: theme.components.bottomSheet?.handleColor ?? theme.colors.border.primary
+            }, handleIndicatorStyle]
+          })
+        }), header != null && /*#__PURE__*/_jsx(View, {
+          style: [styles.header, headerStyle],
+          children: header
+        }), /*#__PURE__*/_jsx(View, {
+          style: styles.content,
+          children: children
+        }), footer != null && /*#__PURE__*/_jsx(View, {
+          style: [styles.footer, footerStyle],
+          children: footer
+        })]
+      })
+    })]
+  });
+  const wrappedTree = /*#__PURE__*/_jsx(BottomSheetContext.Provider, {
+    value: contextValue,
+    children: sheetTree
+  });
+  if (mode === 'modal') {
+    return /*#__PURE__*/_jsx(Modal, {
+      transparent: true,
+      visible: modalVisible,
+      onRequestClose: close,
+      statusBarTranslucent: true,
+      navigationBarTranslucent: true,
+      animationType: "none",
+      supportedOrientations: ['portrait', 'landscape'],
+      children: Platform.OS === 'android' ? /*#__PURE__*/_jsx(GestureHandlerRootView, {
+        style: styles.modalRoot,
+        children: wrappedTree
+      }) : wrappedTree
+    });
+  }
+  return wrappedTree;
+});
+BottomSheet.displayName = 'BottomSheet';
+
+// ───────── Helpers ─────────
+
+const resolveSnapPoints = (points, screenH) => {
+  const resolved = points.map(p => {
+    if (typeof p === 'number') {
+      return p;
+    }
+    const pct = parseFloat(p);
+    if (Number.isNaN(pct)) {
+      return 0;
+    }
+    return pct / 100 * screenH;
+  });
+  return [...resolved].sort((a, b) => a - b);
+};
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+const buildStyles = _theme => StyleSheet.create({
+  backdropModal: {
+    // The backdrop is the modal's root View. On Fabric, an absolute-
+    // positioned root inside RNModal has no positioned ancestor and
+    // collapses to zero size, taking the scrim with it. `flex: 1` fills
+    // the modal content area reliably.
+    flex: 1
+  },
+  backdropInline: {
+    // Inline mode: overlay the parent. Parent must be positioned for this
+    // to take effect (the consumer is expected to render BottomSheet inside
+    // a relatively-positioned container).
+    ...StyleSheet.absoluteFill
+  },
+  sheet: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    // `top` is driven by the animated style (see sheetStyle). Omitted
+    // here so the static `0` doesn't fight the animated value during
+    // initial paint.
+    overflow: 'hidden'
+  },
+  handleRow: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingTop: 10,
+    paddingBottom: 8
+  },
+  header: {
+    // No opinionated padding — slot owns its own styling. Sits between the
+    // drag handle and the scrollable content; does not flex.
+  },
+  footer: {
+    // Pinned to the bottom of the sheet (above safe-area inset, which lives
+    // on the sheet's paddingBottom). Does not flex, does not scroll with
+    // content. Rides with the keyboard via the sheet's `top` animation.
+  },
+  handle: {
+    width: 36,
+    height: 4,
+    borderRadius: 2
+  },
+  content: {
+    flex: 1
+  },
+  modalRoot: {
+    flex: 1
+  }
+});
+export { BottomSheet };
+export default BottomSheet;
+//# sourceMappingURL=BottomSheet.js.map

package/lib/module/components/BottomSheet/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { BottomSheet, default, useBottomSheet } from "./BottomSheet.js";
+//# sourceMappingURL=index.js.map