@amityco/react-native-social-uikit 4.2.0 → 4.2.1-7d6de7d.0

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

@@ -0,0 +1,483 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+// BottomSheet — a sheet that owns its own height, position, drag and backdrop.
+//
+// Why it owns all four: every one of them has to agree about where the sheet's
+// bottom edge is, and a sheet that leaves any of them to something else ends up
+// describing its own box two different ways. Splitting them is what produced
+// the whole family of keyboard bugs this replaces — the sheet translating on
+// one timeline while its height changed on another, a drag measured against a
+// box that had already moved, and a sheet growing back mid-close because the
+// keyboard went away.
+//
+// So there is exactly one description of the box here:
+//
+//   height = open − keyboard               (bottom edge pinned)
+//   offset = drag − keyboard               (slides out, lifts clear of the keys)
+//
+// Opening, dragging and the keyboard are all the same quantity — height — which
+// is why a drag that interrupts an animation has nothing to disagree with.
+//
+// Every one of those values is a reanimated shared value, so the whole box is
+// computed on the UI thread. That matters most for `height`, which is a layout
+// property: RN's own Animated cannot drive layout natively, so on that driver a
+// sheet with a lot of content inside it dropped the entrance animation entirely
+// and simply appeared. Here the height animates in step with the transform even
+// while JS is busy laying the content out.
+//
+// It renders in a Modal on purpose. A Modal is its own native hierarchy, so
+// nothing an ancestor does to its layout — a keyboard-avoiding wrapper padding
+// the page, a parent that clips — reaches the sheet. That makes this component
+// the only thing moving it, which is the point.
+
+// 1. React / RN imports
+import { createContext, forwardRef, useImperativeHandle, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { BackHandler, Keyboard, Modal, Platform, Pressable, ScrollView, useWindowDimensions, View } from 'react-native';
+
+// 2. Third-party imports
+import Animated, { Easing, runOnJS, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+import { Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+// 3. Internal imports (relative)
+import { useStyles } from './styles';
+
+// 4. Types
+
+const OPEN_DURATION = 300;
+const CLOSE_DURATION = 250;
+/**
+ * How far an easing carries the sheet in its opening frames scales with how
+ * tall that sheet is, so a curve that is merely brisk on a short menu can be a
+ * jump on a full-height one: an exponential-out moved a 700-high sheet 144 on
+ * frame one and half its travel inside 50ms, against 31 on frame one for a
+ * 150-high menu. This curve — the one platform sheets use — starts gently
+ * enough that the first frames read as movement at any height, then decelerates
+ * firmly into the end.
+ */
+const SHEET_EASING = Easing.bezier(0.32, 0.72, 0, 1);
+/** Past this much of the sheet's height, releasing a drag closes it. */
+const DRAG_CLOSE_RATIO = 0.3;
+/** A flick this fast (points per second) closes the sheet whatever the distance. */
+const DRAG_CLOSE_FLING = 800;
+/** A drag has to travel this far before it is a drag and not a tap. */
+const DRAG_ACTIVATION_DISTANCE = 8;
+/**
+ * How far the sheet carries on underneath the keyboard. A sheet that stops
+ * exactly on the keyboard's top edge leaves the keyboard's own rounded corners
+ * standing over whatever is behind the sheet, so the two far corners show as
+ * dark nicks. Running the surface on past that edge puts sheet behind them.
+ * The overlap is hidden by the keyboard itself, and the content does not move
+ * with it — the sheet's bottom padding grows by the same amount.
+ */
+const KEYBOARD_OVERLAP = 20;
+/** The backdrop runs this much faster than the sheet, opening and closing. */
+const BACKDROP_SPEEDUP = 2.5;
+
+/**
+ * How the sheet and a scrolling body share one downward drag.
+ *
+ * The body registers its scroll view here and keeps the sheet posted on whether
+ * it is at the top. A drag down while the list is already at the top belongs to
+ * the sheet; anywhere else it belongs to the list. The two gestures are allowed
+ * to run at once so the hand-off happens without lifting a finger.
+ */
+
+const ScrollCoordinationContext = /*#__PURE__*/createContext(null);
+
+// 5. Named function component
+const BottomSheetRoot = /*#__PURE__*/forwardRef(function BottomSheet({
+  visible,
+  height,
+  containerHeight,
+  dark = false,
+  closeOnDragDown = true,
+  closeOnBackdropPress = true,
+  style,
+  onClose,
+  children
+}, ref) {
+  const {
+    styles
+  } = useStyles({
+    dark
+  });
+  const insets = useSafeAreaInsets();
+  const window = useWindowDimensions();
+  const container = containerHeight ?? window.height;
+  const resolvedHeight = typeof height === 'number' ? height : container * parseFloat(height) / 100;
+
+  // `visible` is optional: when it is not given the sheet keeps its own flag
+  // and the ref drives it.
+  const [selfVisible, setSelfVisible] = useState(false);
+  const isOpen = visible ?? selfVisible;
+
+  // Kept mounted through the closing animation, so the sheet slides out instead
+  // of vanishing the moment it is told to close.
+  const [mounted, setMounted] = useState(isOpen);
+
+  // One value for both the drag and the close: dragging moves the sheet down,
+  // and closing is the same move carried all the way past the bottom edge. As
+  // two separate quantities — a drag that shrank the height and a close that
+  // translated — releasing a drag reset the height and the sheet flashed back
+  // to full size for a frame on its way out.
+  const slide = useSharedValue(0);
+  // The entrance, 0 below the screen to 1 at rest. It moves the sheet rather
+  // than resizing it: a sheet that grew from nothing laid its children out
+  // afresh every frame, and a body built as a fixed header, a flexible middle
+  // and a footer pinned to the bottom — which is how the taller sheets are
+  // built — spends those frames with its middle squeezed to nothing. That
+  // showed as the header arriving first above a hollow gap. Sliding a
+  // finished sheet into place has no intermediate states to show, lays the
+  // content out once instead of once per frame, and is what platform sheets
+  // do. Height stays reserved for the keyboard, which is a single change
+  // rather than an animation of its own.
+  const entrance = useSharedValue(0);
+  // Whether the entrance has actually begun. Between the Modal being mounted
+  // and `startOpen` running there are a few frames that belong to the
+  // platform: on Android the dialog window arrives under its own steam, and
+  // the sheet was caught in one of them part way up the screen with no
+  // backdrop behind it — a flash of the sheet, then nothing, then the real
+  // entrance. The sheet is simply not drawn until it is ours to move.
+  const entranceStarted = useSharedValue(0);
+  const keyboardInset = useSharedValue(0);
+  const backdropProgress = useSharedValue(0);
+
+  // While the sheet is on its way out the keyboard must not resize it: the
+  // dismissal that closes the sheet also dismisses the keyboard, and letting
+  // that grow the sheet back is exactly the upward flash this replaces.
+  const isClosing = useRef(false);
+  const finishClose = useCallback(() => {
+    isShown.current = false;
+    setMounted(false);
+    setSelfVisible(false);
+    isClosing.current = false;
+    onClose === null || onClose === void 0 || onClose();
+  }, [onClose]);
+  const close = useCallback(() => {
+    if (isClosing.current) return;
+    isClosing.current = true;
+
+    // The keyboard leaves with the sheet. Dismissing it here rather than
+    // waiting for focus to be lost keeps the two on the same beat.
+    Keyboard.dismiss();
+
+    // The backdrop clears faster than the sheet, so the page behind is already
+    // readable while the last of the sheet is still on its way out.
+    backdropProgress.value = withTiming(0, {
+      duration: CLOSE_DURATION / BACKDROP_SPEEDUP
+    });
+
+    // Carries on from wherever a drag left the sheet, straight past the
+    // bottom edge.
+    slide.value = withTiming(container, {
+      duration: CLOSE_DURATION,
+      easing: SHEET_EASING
+    }, completed => {
+      'worklet';
+
+      // A close that was interrupted — the sheet reopened while it was
+      // still animating out — must not run the teardown, which would
+      // unmount the sheet that was just reopened and empty the content that
+      // was just put in it.
+      if (completed) runOnJS(finishClose)();
+    });
+
+    // Nothing is reset here. `setMounted(false)` only takes effect on the next
+    // render, while a shared value reaches the native view at once — so
+    // resetting the slide here put the sheet back at its open position, full
+    // size and over a full-strength backdrop, for the frame before the unmount
+    // landed. That was the flash. The values are wound back when the sheet
+    // next opens instead, where nothing can see them.
+  }, [backdropProgress, container, slide, finishClose]);
+  useImperativeHandle(ref, () => ({
+    open: () => setSelfVisible(true),
+    close: () => setSelfVisible(false)
+  }), []);
+
+  // Held until the Modal is actually on screen — see `startOpen`.
+  const pendingOpen = useRef(false);
+  // Whether the Modal has presented. `mounted` cannot answer that: it is
+  // seeded from `isOpen`, so a sheet whose component mounts with `visible`
+  // already true — which is how a sheet opened by mounting its owner behaves,
+  // as opposed to one kept mounted and toggled — starts life claiming to be
+  // on screen while the Modal has not even begun presenting. The entrance
+  // then ran against nothing: measured at 564ms of animation spent before the
+  // Modal so much as reported itself shown, which at these durations means
+  // the sheet finished opening before it was ever visible and arrived with no
+  // animation at all. The heavier the content the wider that gap, which is
+  // why tall sheets looked like the only casualties.
+  const isShown = useRef(false);
+  const startOpen = useCallback(() => {
+    entranceStarted.value = 1;
+    entrance.value = withTiming(1, {
+      duration: OPEN_DURATION,
+      easing: SHEET_EASING
+    });
+    backdropProgress.value = withTiming(1, {
+      duration: OPEN_DURATION / BACKDROP_SPEEDUP
+    });
+  }, [backdropProgress, entrance, entranceStarted]);
+
+  // Which way this effect last acted, so it acts on the transition rather
+  // than on every render it happens to be woken for. It is woken often: it
+  // depends on `close`, `close` on the caller's `onClose`, and a caller
+  // writing that inline hands over a new one each render. Without this, a
+  // render arriving mid-entrance re-ran the open path, which winds the
+  // entrance back to nothing and starts it again — the sheet appeared, snapped
+  // shut and opened a second time.
+  const openHandled = useRef(false);
+
+  // Open / close from the outside.
+  useEffect(() => {
+    if (isOpen) {
+      if (openHandled.current) return;
+      openHandled.current = true;
+      isClosing.current = false;
+      // Wound back here, off screen, rather than at the end of the close,
+      // where resetting them would repaint the sheet at its open position for
+      // the frame before the unmount lands.
+      slide.value = 0;
+      keyboardInset.value = 0;
+      // The close carries the sheet out on `slide` and never touches this, so
+      // it has to be wound back by hand or the second open starts at its
+      // target and plays nothing.
+      entrance.value = 0;
+      entranceStarted.value = 0;
+      if (mounted && isShown.current) {
+        // Genuinely on screen, interrupting its own close.
+        startOpen();
+      } else {
+        // A Modal takes a while to present — longer the more there is inside
+        // it — and an animation started now would spend that time off screen.
+        // It waits for `onShow` instead.
+        pendingOpen.current = true;
+        if (!mounted) setMounted(true);
+      }
+    } else {
+      openHandled.current = false;
+      if (mounted) close();
+    }
+  }, [isOpen, mounted, close, entrance, entranceStarted, keyboardInset, slide, startOpen]);
+
+  // The keyboard, on the keyboard's own curve. Reading `duration` off the
+  // event is what keeps the sheet and the keyboard on one timeline rather than
+  // two that happen to start together.
+  useEffect(() => {
+    const isIOS = Platform.OS === 'ios';
+    // iOS announces the keyboard before it moves; Android only after.
+    const showEvent = isIOS ? 'keyboardWillShow' : 'keyboardDidShow';
+    const hideEvent = isIOS ? 'keyboardWillHide' : 'keyboardDidHide';
+    // iOS measures the keyboard from the bottom of the screen, home indicator
+    // included. Android measures it from the top of the navigation bar even
+    // though the keyboard is drawn over that bar, so it reads short by the
+    // inset and leaves the sheet's last row under the keys.
+    const bottomEdgeCorrection = isIOS ? 0 : insets.bottom;
+    const animateTo = (toValue, event) => {
+      keyboardInset.value = withTiming(toValue, {
+        duration: (event === null || event === void 0 ? void 0 : event.duration) || OPEN_DURATION,
+        easing: SHEET_EASING
+      });
+    };
+    const show = Keyboard.addListener(showEvent, event => {
+      if (isClosing.current) return;
+      animateTo(event.endCoordinates.height + bottomEdgeCorrection, event);
+    });
+    const hide = Keyboard.addListener(hideEvent, event => {
+      if (isClosing.current) return;
+      animateTo(0, event);
+    });
+    return () => {
+      show.remove();
+      hide.remove();
+    };
+  }, [insets.bottom, keyboardInset]);
+
+  // Android's hardware back closes the sheet rather than the screen behind it.
+  useEffect(() => {
+    if (!mounted) return undefined;
+    const subscription = BackHandler.addEventListener('hardwareBackPress', () => {
+      close();
+      return true;
+    });
+    return () => subscription.remove();
+  }, [mounted, close]);
+
+  // The gesture lives in react-native-gesture-handler, not in RN's responder
+  // system. The responder system hands a touch to exactly one view and settles
+  // that at touch-down, so a drag begun on a button or inside a list is that
+  // view's for good and the sheet is never consulted again — measured, not
+  // assumed. Gesture handler negotiates continuously instead, which is what
+  // lets a drag start anywhere on the sheet and still reach the sheet.
+  const scrollRef = useRef(null);
+  // A shared value rather than a ref: the gesture's callbacks run on the UI
+  // thread, where a JS ref cannot be read.
+  const atTop = useSharedValue(true);
+
+  // `close` changes identity whenever the caller's `onClose` does, and the
+  // gesture would be rebuilt and re-attached with it. This is the same call
+  // behind a handle that never changes.
+  const closeRef = useRef(close);
+  closeRef.current = close;
+  const requestClose = useCallback(() => closeRef.current(), []);
+  const pan = useMemo(() => Gesture.Pan()
+  // Downward only, and only past a few points — so a tap on a button is
+  // still a tap, and an upward flick belongs to the list.
+  .activeOffsetY(DRAG_ACTIVATION_DISTANCE).failOffsetY(-DRAG_ACTIVATION_DISTANCE).simultaneousWithExternalGesture(scrollRef).onUpdate(event => {
+    'worklet';
+
+    if (!closeOnDragDown) return;
+    // A list that can still scroll up keeps the drag.
+    if (!atTop.value) return;
+    if (event.translationY > 0) slide.value = event.translationY;
+  }).onEnd(event => {
+    'worklet';
+
+    if (!closeOnDragDown) return;
+    const passedDistance = event.translationY > resolvedHeight * DRAG_CLOSE_RATIO;
+    // velocityY is points per second here, not per frame.
+    const flickedDown = event.velocityY > DRAG_CLOSE_FLING;
+    if (atTop.value && (passedDistance || flickedDown)) {
+      runOnJS(requestClose)();
+    } else {
+      slide.value = withTiming(0, {
+        duration: OPEN_DURATION / 2,
+        easing: SHEET_EASING
+      });
+    }
+  }), [atTop, closeOnDragDown, requestClose, resolvedHeight, slide]);
+  const scrollCoordination = useMemo(() => ({
+    scrollRef,
+    setAtTop: value => {
+      atTop.value = value;
+    }
+  }), [atTop]);
+
+  // open − keyboard for the box, drag − keyboard for where it sits. The
+  // keyboard never takes more than the sheet has, and the sheet rises by
+  // exactly what it loses — the two being the same number is what keeps the
+  // sheet's TOP edge still while the keyboard opens; only the body shortens.
+  const sheetStyle = useAnimatedStyle(() => {
+    const lift = Math.min(keyboardInset.value, resolvedHeight);
+    // Only while there is a keyboard to hide it.
+    const overlap = Math.min(KEYBOARD_OVERLAP, keyboardInset.value);
+    return {
+      opacity: entranceStarted.value,
+      // Taller and lower by the overlap, which leaves the TOP edge where it
+      // was; the extra is bottom padding, so the content keeps its distance
+      // from the keys.
+      height: Math.max(resolvedHeight - lift + overlap, 0),
+      paddingBottom: insets.bottom + overlap,
+      transform: [
+      // Its own height below the screen at 0, in place at 1.
+      {
+        translateY: slide.value - lift + overlap + (1 - entrance.value) * resolvedHeight
+      }]
+    };
+  });
+
+  // The backdrop fades on its own faster curve, and thins again as the sheet is
+  // dragged away, so letting go halfway never leaves a full-strength scrim
+  // behind a half-gone sheet.
+  const backdropStyle = useAnimatedStyle(() => {
+    const dragged = resolvedHeight > 0 ? Math.min(Math.max(slide.value / resolvedHeight, 0), 1) : 0;
+    return {
+      // The scrim's own colour token carries its alpha, so this animates the
+      // view between transparent and that colour, not to a fraction of it.
+      opacity: backdropProgress.value * (1 - dragged)
+    };
+  });
+  if (!mounted) return null;
+  return /*#__PURE__*/React.createElement(Modal, {
+    transparent: true,
+    visible: true,
+    animationType: "none",
+    statusBarTranslucent: true,
+    onRequestClose: close,
+    onShow: () => {
+      isShown.current = true;
+      if (!pendingOpen.current) return;
+      pendingOpen.current = false;
+      // Two frames after `onShow`, not on it: iOS reports the Modal as shown
+      // while it is still settling, and an animation started in that window
+      // spends its opening frames — the ones an ease-out puts most of the
+      // distance into — behind a view that is not on screen yet.
+      requestAnimationFrame(() => requestAnimationFrame(startOpen));
+    }
+  }, /*#__PURE__*/React.createElement(GestureHandlerRootView, {
+    style: styles.root
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.root,
+    accessibilityViewIsModal: true
+  }, /*#__PURE__*/React.createElement(Animated.View, {
+    style: [styles.backdrop, backdropStyle],
+    pointerEvents: closeOnBackdropPress ? 'auto' : 'none'
+  }, /*#__PURE__*/React.createElement(Pressable, {
+    style: styles.backdropPressable,
+    onPress: closeOnBackdropPress ? close : undefined,
+    accessibilityRole: "button",
+    accessibilityLabel: "Close"
+  })), /*#__PURE__*/React.createElement(GestureDetector, {
+    gesture: pan
+  }, /*#__PURE__*/React.createElement(Animated.View, {
+    style: [styles.sheet, style,
+    // The resting position belongs in the plain style too, not
+    // only in the animated one. There is a frame on Android
+    // between the dialog window coming in and the animated style
+    // landing, and a view with no transform yet is drawn where it
+    // was laid out — which flashed the sheet on screen before the
+    // entrance had begun, then took it away again. Starting it
+    // off screen here means that frame shows nothing.
+    {
+      transform: [{
+        translateY: resolvedHeight
+      }]
+    }, sheetStyle]
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.handleArea
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.handle
+  })), /*#__PURE__*/React.createElement(ScrollCoordinationContext.Provider, {
+    value: scrollCoordination
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.body
+  }, children)))))));
+});
+
+/**
+ * The scroll view a sheet's body should use.
+ *
+ * It is an ordinary ScrollView that also tells the sheet whether it is scrolled
+ * to the top and hands the sheet its ref, which is what lets one downward drag
+ * scroll the list until it reaches the top and then carry on into closing the
+ * sheet, without the finger ever coming up.
+ */
+const BottomSheetScrollView = /*#__PURE__*/forwardRef(function BottomSheetScrollView({
+  onScroll,
+  scrollEventThrottle,
+  ...rest
+}, ref) {
+  const coordination = useContext(ScrollCoordinationContext);
+  const handleScroll = event => {
+    coordination === null || coordination === void 0 || coordination.setAtTop(event.nativeEvent.contentOffset.y <= 0);
+    onScroll === null || onScroll === void 0 || onScroll(event);
+  };
+  return /*#__PURE__*/React.createElement(ScrollView, _extends({}, rest, {
+    ref: node => {
+      if (coordination) {
+        coordination.scrollRef.current = node;
+      }
+      if (typeof ref === 'function') ref(node);else if (ref) ref.current = node;
+    },
+    onScroll: handleScroll,
+    scrollEventThrottle: scrollEventThrottle ?? 16
+  }));
+});
+
+/**
+ * `BottomSheet.ScrollView` is the scroll view a sheet's body should use — see
+ * the note on the component below.
+ */
+export const BottomSheet = Object.assign(BottomSheetRoot, {
+  ScrollView: BottomSheetScrollView
+});
+//# sourceMappingURL=BottomSheet.js.map

package/lib/module/core/design/components/BottomSheet/BottomSheet.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createContext","forwardRef","useImperativeHandle","useCallback","useContext","useEffect","useMemo","useRef","useState","BackHandler","Keyboard","Modal","Platform","Pressable","ScrollView","useWindowDimensions","View","Animated","Easing","runOnJS","useAnimatedStyle","useSharedValue","withTiming","Gesture","GestureDetector","GestureHandlerRootView","useSafeAreaInsets","useStyles","OPEN_DURATION","CLOSE_DURATION","SHEET_EASING","bezier","DRAG_CLOSE_RATIO","DRAG_CLOSE_FLING","DRAG_ACTIVATION_DISTANCE","KEYBOARD_OVERLAP","BACKDROP_SPEEDUP","ScrollCoordinationContext","BottomSheetRoot","BottomSheet","visible","height","containerHeight","dark","closeOnDragDown","closeOnBackdropPress","style","onClose","children","ref","styles","insets","window","container","resolvedHeight","parseFloat","selfVisible","setSelfVisible","isOpen","mounted","setMounted","slide","entrance","entranceStarted","keyboardInset","backdropProgress","isClosing","finishClose","isShown","current","close","dismiss","value","duration","easing","completed","open","pendingOpen","startOpen","openHandled","isIOS","OS","showEvent","hideEvent","bottomEdgeCorrection","bottom","animateTo","toValue","event","show","addListener","endCoordinates","hide","remove","undefined","subscription","addEventListener","scrollRef","atTop","closeRef","requestClose","pan","Pan","activeOffsetY","failOffsetY","simultaneousWithExternalGesture","onUpdate","translationY","onEnd","passedDistance","flickedDown","velocityY","scrollCoordination","setAtTop","sheetStyle","lift","Math","min","overlap","opacity","max","paddingBottom","transform","translateY","backdropStyle","dragged","React","createElement","transparent","animationType","statusBarTranslucent","onRequestClose","onShow","requestAnimationFrame","root","accessibilityViewIsModal","backdrop","pointerEvents","backdropPressable","onPress","accessibilityRole","accessibilityLabel","gesture","sheet","handleArea","handle","Provider","body","BottomSheetScrollView","onScroll","scrollEventThrottle","rest","coordination","handleScroll","nativeEvent","contentOffset","y","_extends","node","Object","assign"],"sourceRoot":"../../../../../../src","sources":["core/design/components/BottomSheet/BottomSheet.tsx"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+export { BottomSheet } from './BottomSheet';
+//# sourceMappingURL=index.js.map

package/lib/module/core/design/components/BottomSheet/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["BottomSheet"],"sourceRoot":"../../../../../../src","sources":["core/design/components/BottomSheet/index.ts"],"mappings":"AAAA,SAASA,WAAW,QAAQ,eAAe","ignoreList":[]}

package/lib/module/core/design/components/BottomSheet/styles.js

@@ -0,0 +1,81 @@
+// Styles for BottomSheet, read off the design: a 20-radius top, a 36x4 handle
+// in a 28-high strip, and the bottom safe-area inset on the sheet itself, since
+// a bottom sheet's lower edge sits on the screen edge (home indicator / gesture
+// bar).
+
+import { StyleSheet } from 'react-native';
+import { useToken } from '../../theme/useToken';
+import { AmityColorToken } from '../../tokens/amity-color-tokens';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+// Design geometry: a 28-high strip holding a 36x4 pill, which is 12 of padding
+// above and below it. The strip is only the visual handle — the whole sheet is
+// draggable — so it does not need to be oversized as a touch target.
+const HANDLE_STRIP_HEIGHT = 28;
+const HANDLE_WIDTH = 36;
+const HANDLE_HEIGHT = 4;
+const SHEET_RADIUS = 20;
+// The design leaves 32 below the sheet's content and another 32 for the home
+// indicator — 64 in all. The safe-area inset on the sheet already covers most
+// of that, and the heights callers ask for carry slack of their own, so the
+// part that still has to be added here is the remainder, not the whole 32.
+const CONTENT_BOTTOM_GAP = 12;
+export const useStyles = ({
+  dark
+} = {}) => {
+  const token = useToken();
+  // The dark sheet is opened over a dark page (the livestream player and
+  // composer), where the themed surface would read as a light panel on black.
+  // It is the same Surface/Sheets token, asked for in the dark column rather
+  // than the active one, so a customer's dark palette still governs it.
+  const darkToken = useToken('dark');
+  const insets = useSafeAreaInsets();
+  const styles = StyleSheet.create({
+    root: {
+      flex: 1,
+      justifyContent: 'flex-end'
+    },
+    backdrop: {
+      ...StyleSheet.absoluteFillObject,
+      // The scrim carries its own alpha, so the entrance animates this view's
+      // opacity from 0 to 1 rather than to a fraction of its own.
+      backgroundColor: token(AmityColorToken.SurfaceMediaOverlayTransparentBlack)
+    },
+    backdropPressable: {
+      flex: 1
+    },
+    sheet: {
+      width: '100%',
+      borderTopLeftRadius: SHEET_RADIUS,
+      borderTopRightRadius: SHEET_RADIUS,
+      paddingBottom: insets.bottom,
+      backgroundColor: (dark ? darkToken : token)(AmityColorToken.SurfaceSheetsBackgroundGeneral),
+      // The sheet closes by shrinking to nothing, and its children do not shrink
+      // with it — the handle strip is a fixed 28 — so without this they spill
+      // out of the shrinking box and stay on screen until the sheet unmounts,
+      // which reads as the last of the sheet vanishing a beat late. Clipping is
+      // free here: this view casts no shadow for it to cut off.
+      overflow: 'hidden'
+    },
+    handleArea: {
+      height: HANDLE_STRIP_HEIGHT,
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    handle: {
+      width: HANDLE_WIDTH,
+      height: HANDLE_HEIGHT,
+      borderRadius: HANDLE_HEIGHT / 2,
+      backgroundColor: token(AmityColorToken.SurfaceSheetsHandleDefault)
+    },
+    body: {
+      flex: 1,
+      paddingBottom: CONTENT_BOTTOM_GAP
+    }
+  });
+  return {
+    styles,
+    token
+  };
+};
+//# sourceMappingURL=styles.js.map

package/lib/module/core/design/components/BottomSheet/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["StyleSheet","useToken","AmityColorToken","useSafeAreaInsets","HANDLE_STRIP_HEIGHT","HANDLE_WIDTH","HANDLE_HEIGHT","SHEET_RADIUS","CONTENT_BOTTOM_GAP","useStyles","dark","token","darkToken","insets","styles","create","root","flex","justifyContent","backdrop","absoluteFillObject","backgroundColor","SurfaceMediaOverlayTransparentBlack","backdropPressable","sheet","width","borderTopLeftRadius","borderTopRightRadius","paddingBottom","bottom","SurfaceSheetsBackgroundGeneral","overflow","handleArea","height","alignItems","handle","borderRadius","SurfaceSheetsHandleDefault","body"],"sourceRoot":"../../../../../../src","sources":["core/design/components/BottomSheet/styles.ts"],"mappings":"AAAA;AACA;AACA;AACA;;AAEA,SAASA,UAAU,QAAQ,cAAc;AAEzC,SAASC,QAAQ,QAAQ,sBAAsB;AAC/C,SAASC,eAAe,QAAQ,iCAAiC;AACjE,SAASC,iBAAiB,QAAQ,gCAAgC;;AAElE;AACA;AACA;AACA,MAAMC,mBAAmB,GAAG,EAAE;AAC9B,MAAMC,YAAY,GAAG,EAAE;AACvB,MAAMC,aAAa,GAAG,CAAC;AACvB,MAAMC,YAAY,GAAG,EAAE;AACvB;AACA;AACA;AACA;AACA,MAAMC,kBAAkB,GAAG,EAAE;AAE7B,OAAO,MAAMC,SAAS,GAAGA,CAAC;EAAEC;AAAyB,CAAC,GAAG,CAAC,CAAC,KAAK;EAC9D,MAAMC,KAAK,GAAGV,QAAQ,CAAC,CAAC;EACxB;EACA;EACA;EACA;EACA,MAAMW,SAAS,GAAGX,QAAQ,CAAC,MAAM,CAAC;EAClC,MAAMY,MAAM,GAAGV,iBAAiB,CAAC,CAAC;EAElC,MAAMW,MAAM,GAAGd,UAAU,CAACe,MAAM,CAAC;IAC/BC,IAAI,EAAE;MACJC,IAAI,EAAE,CAAC;MACPC,cAAc,EAAE;IAClB,CAAC;IACDC,QAAQ,EAAE;MACR,GAAGnB,UAAU,CAACoB,kBAAkB;MAChC;MACA;MACAC,eAAe,EAAEV,KAAK,CACpBT,eAAe,CAACoB,mCAClB;IACF,CAAC;IACDC,iBAAiB,EAAE;MACjBN,IAAI,EAAE;IACR,CAAC;IACDO,KAAK,EAAE;MACLC,KAAK,EAAE,MAAM;MACbC,mBAAmB,EAAEnB,YAAY;MACjCoB,oBAAoB,EAAEpB,YAAY;MAClCqB,aAAa,EAAEf,MAAM,CAACgB,MAAM;MAC5BR,eAAe,EAAE,CAACX,IAAI,GAAGE,SAAS,GAAGD,KAAK,EACxCT,eAAe,CAAC4B,8BAClB,CAAC;MACD;MACA;MACA;MACA;MACA;MACAC,QAAQ,EAAE;IACZ,CAAC;IACDC,UAAU,EAAE;MACVC,MAAM,EAAE7B,mBAAmB;MAC3B8B,UAAU,EAAE,QAAQ;MACpBhB,cAAc,EAAE;IAClB,CAAC;IACDiB,MAAM,EAAE;MACNV,KAAK,EAAEpB,YAAY;MACnB4B,MAAM,EAAE3B,aAAa;MACrB8B,YAAY,EAAE9B,aAAa,GAAG,CAAC;MAC/Be,eAAe,EAAEV,KAAK,CAACT,eAAe,CAACmC,0BAA0B;IACnE,CAAC;IACDC,IAAI,EAAE;MACJrB,IAAI,EAAE,CAAC;MACPW,aAAa,EAAEpB;IACjB;EACF,CAAC,CAAC;EAEF,OAAO;IAAEM,MAAM;IAAEH;EAAM,CAAC;AAC1B,CAAC","ignoreList":[]}