@coinbase/cds-mobile 0.0.0 → 8.13.2

package/esm/overlays/__stories__/Trays.js

@@ -0,0 +1,119 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { FlatList } from 'react-native';
+import { prices } from '@coinbase/cds-common/internal/data/prices';
+import { Button } from '../../buttons/Button';
+import { Menu } from '../../controls/Menu';
+import { SelectOption } from '../../controls/SelectOption';
+import { Fallback, VStack } from '../../layout';
+import { Tray } from '../tray/Tray';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export const options = prices.slice(0, 4);
+const lotsOfOptions = prices.slice(0, 30);
+export const DefaultTray = _ref => {
+  let {
+    title
+  } = _ref;
+  const [isTrayVisible, setIsTrayVisible] = useState(true);
+  const setIsTrayVisibleOff = useCallback(() => setIsTrayVisible(false), [setIsTrayVisible]);
+  const setIsTrayVisibleOn = useCallback(() => setIsTrayVisible(true), [setIsTrayVisible]);
+  const [value, setValue] = useState();
+  const trayRef = useRef(null);
+  const handleOptionPress = () => {
+    var _trayRef$current;
+    (_trayRef$current = trayRef.current) == null || _trayRef$current.handleClose();
+  };
+  const handleTrayVisibilityChange = useCallback(e => {
+    console.log('Tray visibility changed:', e);
+  }, []);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Button, {
+      onPress: setIsTrayVisibleOn,
+      children: "Open"
+    }), isTrayVisible && /*#__PURE__*/_jsx(Tray, {
+      ref: trayRef,
+      onCloseComplete: setIsTrayVisibleOff,
+      onVisibilityChange: handleTrayVisibilityChange,
+      title: title,
+      children: /*#__PURE__*/_jsx(Menu, {
+        onChange: setValue,
+        value: value,
+        children: options.map(option => /*#__PURE__*/_jsx(SelectOption, {
+          description: "BTC",
+          onPress: handleOptionPress,
+          title: option,
+          value: option
+        }, option))
+      })
+    })]
+  });
+};
+const TrayFallbackContent = () => {
+  return /*#__PURE__*/_jsx(VStack, {
+    gap: 2,
+    paddingStart: 3,
+    children: lotsOfOptions.map((item, i) => /*#__PURE__*/_jsx(Fallback, {
+      height: 30,
+      rectWidthVariant: i,
+      width: 100
+    }, item))
+  });
+};
+export const ScrollableTray = _ref2 => {
+  let {
+    title,
+    fallbackEnabled,
+    verticalDrawerPercentageOfView
+  } = _ref2;
+  const [isTrayVisible, setIsTrayVisible] = useState(true);
+  const setIsTrayVisibleOff = useCallback(() => setIsTrayVisible(false), [setIsTrayVisible]);
+  const setIsTrayVisibleOn = useCallback(() => setIsTrayVisible(true), [setIsTrayVisible]);
+  const [value, setValue] = useState();
+  const trayRef = useRef(null);
+  const [isLoading, setIsLoading] = useState(fallbackEnabled);
+  useEffect(() => {
+    if (isTrayVisible && fallbackEnabled) {
+      setIsLoading(true);
+      setTimeout(() => setIsLoading(false), __DEV__ ? 2000 : 20000);
+    }
+  }, [isTrayVisible, fallbackEnabled]);
+  const spacingStyles = useMemo(() => ({
+    paddingBottom: 200
+  }), []);
+  const handleOptionPress = useCallback(() => {
+    var _trayRef$current2;
+    (_trayRef$current2 = trayRef.current) == null || _trayRef$current2.handleClose();
+  }, []);
+  const renderItem = useCallback(_ref3 => {
+    let {
+      index,
+      item
+    } = _ref3;
+    return /*#__PURE__*/_jsx(SelectOption, {
+      description: "BTC",
+      onPress: handleOptionPress,
+      title: item,
+      value: item
+    }, index);
+  }, [handleOptionPress]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Button, {
+      onPress: setIsTrayVisibleOn,
+      children: "Open"
+    }), isTrayVisible && /*#__PURE__*/_jsx(Tray, {
+      ref: trayRef,
+      disableCapturePanGestureToDismiss: true,
+      onCloseComplete: setIsTrayVisibleOff,
+      title: title,
+      verticalDrawerPercentageOfView: verticalDrawerPercentageOfView,
+      children: isLoading ? /*#__PURE__*/_jsx(TrayFallbackContent, {}) : /*#__PURE__*/_jsx(Menu, {
+        onChange: setValue,
+        value: value,
+        children: /*#__PURE__*/_jsx(FlatList, {
+          contentContainerStyle: spacingStyles,
+          data: lotsOfOptions,
+          renderItem: renderItem
+        })
+      })
+    })]
+  });
+};

package/esm/overlays/drawer/Drawer.js

@@ -0,0 +1,183 @@
+const _excluded = ["children", "pin", "onCloseComplete", "preventDismissGestures", "preventHardwareBackBehaviorAndroid", "hideHandleBar", "disableCapturePanGestureToDismiss", "onBlur", "verticalDrawerPercentageOfView", "handleBarAccessibilityLabel"];
+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); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React, { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
+import { Animated, Modal, Platform, StyleSheet, useWindowDimensions, View } from 'react-native';
+import { drawerAnimationDefaultDuration, MAX_OVER_DRAG } from '@coinbase/cds-common/animation/drawer';
+import { OverlayContentContext } from '@coinbase/cds-common/overlays/OverlayContentContext';
+import { horizontalDrawerPercentageOfView, verticalDrawerPercentageOfView as defaultVerticalDrawerPercentageOfView } from '@coinbase/cds-common/tokens/drawer';
+import { useTheme } from '../../hooks/useTheme';
+import { Box } from '../../layout/Box';
+import { HandleBar } from '../handlebar/HandleBar';
+import { Overlay } from '../overlay/Overlay';
+import { useOverlayAnimation } from '../overlay/useOverlayAnimation';
+import { DrawerStatusBar } from './DrawerStatusBar';
+import { useDrawerAnimation } from './useDrawerAnimation';
+import { useDrawerPanResponder } from './useDrawerPanResponder';
+import { useDrawerSpacing } from './useDrawerSpacing';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const overlayContentContextValue = {
+  isDrawer: true
+};
+export const Drawer = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Drawer(_ref, ref) {
+  let {
+      children,
+      pin = 'bottom',
+      onCloseComplete,
+      preventDismissGestures = false,
+      preventHardwareBackBehaviorAndroid = false,
+      hideHandleBar = false,
+      disableCapturePanGestureToDismiss = false,
+      onBlur,
+      verticalDrawerPercentageOfView = defaultVerticalDrawerPercentageOfView,
+      handleBarAccessibilityLabel = 'Dismiss'
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const {
+    activeColorScheme
+  } = useTheme();
+  const {
+    width,
+    height
+  } = useWindowDimensions();
+  const isAndroid = Platform.OS === 'android';
+  const {
+    drawerAnimation,
+    animateDrawerOut,
+    animateDrawerIn,
+    drawerAnimationStyles,
+    animateSwipeToClose
+  } = useDrawerAnimation(pin, verticalDrawerPercentageOfView);
+  const [opacityAnimation, animateOverlayIn, animateOverlayOut] = useOverlayAnimation(drawerAnimationDefaultDuration);
+  const spacingStyles = useDrawerSpacing(pin);
+  const isMounted = useRef(false);
+  const handleClose = useCallback(() => {
+    Animated.parallel([animateDrawerOut, animateOverlayOut]).start(_ref2 => {
+      let {
+        finished
+      } = _ref2;
+      if (finished) {
+        isMounted.current = false;
+        onCloseComplete == null || onCloseComplete();
+      }
+    });
+  }, [animateDrawerOut, animateOverlayOut, onCloseComplete]);
+  const handleRequestClose = useCallback(() => preventHardwareBackBehaviorAndroid && isAndroid ? undefined : handleClose(), [preventHardwareBackBehaviorAndroid, handleClose, isAndroid]);
+  const handleSwipeToClose = useCallback(() => {
+    if (!preventDismissGestures) {
+      Animated.parallel([animateSwipeToClose, animateOverlayOut]).start(_ref3 => {
+        let {
+          finished
+        } = _ref3;
+        if (finished) {
+          isMounted.current = false;
+          onCloseComplete == null || onCloseComplete();
+        }
+      });
+    }
+  }, [preventDismissGestures, animateSwipeToClose, animateOverlayOut, onCloseComplete]);
+  useEffect(() => {
+    if (!isMounted.current) {
+      Animated.parallel([animateOverlayIn, animateDrawerIn]).start(_ref4 => {
+        let {
+          finished
+        } = _ref4;
+        if (finished) {
+          isMounted.current = true;
+        }
+      });
+    }
+  }, [drawerAnimation, animateDrawerIn, animateOverlayIn]);
+  const panGestureHandlers = useDrawerPanResponder({
+    pin,
+    drawerAnimation,
+    animateDrawerIn,
+    disableCapturePanGestureToDismiss,
+    onBlur,
+    handleSwipeToClose,
+    opacityAnimation,
+    verticalDrawerPercentageOfView
+  });
+  const isPinHorizontal = pin === 'left' || pin === 'right';
+  const shouldShowHandleBar = !hideHandleBar && pin === 'bottom';
+
+  // leave 15% of the screenwidth as open area for menu drawer
+  const horizontalDrawerWidth = useMemo(() => width * horizontalDrawerPercentageOfView + MAX_OVER_DRAG, [width]);
+  // drawer will automatically size itself based on content, but will cap at 75% of viewport height (can override)
+  const verticalDrawerMaxHeight = useMemo(() => height * verticalDrawerPercentageOfView + MAX_OVER_DRAG, [height, verticalDrawerPercentageOfView]);
+  const getPanGestureHandlers = !preventDismissGestures ? panGestureHandlers.panHandlers : undefined;
+  const handleOverlayPress = useCallback(() => {
+    if (!preventDismissGestures) {
+      onBlur == null || onBlur();
+      handleClose();
+    }
+  }, [handleClose, preventDismissGestures, onBlur]);
+  const cardStyles = StyleSheet.create({
+    spacing: _extends({}, spacingStyles),
+    overflowStyles: {
+      overflow: 'hidden'
+    }
+  });
+  const combinedStyles = [cardStyles.spacing, drawerAnimationStyles];
+  useImperativeHandle(ref, () => ({
+    handleClose
+  }), [handleClose]);
+
+  // this hack clips internal content from overflowing the borderRadius, but also make sure the handlebar still shows if handlebar is enabled
+  const content = useMemo(() => {
+    if (shouldShowHandleBar) {
+      return /*#__PURE__*/_jsxs(View, {
+        children: [/*#__PURE__*/_jsx(HandleBar, {
+          accessibilityLabel: handleBarAccessibilityLabel,
+          accessibilityRole: "button",
+          onAccessibilityTap: handleClose
+        }), /*#__PURE__*/_jsx(Box, {
+          borderRadius: 400,
+          style: shouldShowHandleBar && cardStyles.overflowStyles,
+          children: typeof children === 'function' ? children({
+            handleClose
+          }) : children
+        })]
+      });
+    }
+    return /*#__PURE__*/_jsx(View, {
+      children: typeof children === 'function' ? children({
+        handleClose
+      }) : children
+    });
+  }, [shouldShowHandleBar, cardStyles, children, handleClose, handleBarAccessibilityLabel]);
+  return /*#__PURE__*/_jsx(Modal, _extends({
+    hardwareAccelerated: true,
+    transparent: true,
+    visible: true,
+    animationType: "none",
+    onRequestClose: handleRequestClose
+  }, props, {
+    accessibilityRole: "alert",
+    children: /*#__PURE__*/_jsxs(OverlayContentContext.Provider, {
+      value: overlayContentContextValue,
+      children: [/*#__PURE__*/_jsx(DrawerStatusBar, {
+        visible: true,
+        pin: pin
+      }), /*#__PURE__*/_jsx(Overlay, {
+        onTouchStart: handleOverlayPress,
+        opacity: opacityAnimation,
+        testID: "drawer-overlay"
+      }), /*#__PURE__*/_jsx(Box, _extends({}, getPanGestureHandlers, {
+        animated: true,
+        borderRadius: isPinHorizontal ? 0 : 400,
+        bordered: activeColorScheme === 'dark',
+        elevation: 2,
+        maxHeight: !isPinHorizontal ? verticalDrawerMaxHeight : '100%',
+        onAccessibilityEscape: handleClose,
+        pin: pin,
+        style: combinedStyles
+        // close modal when user performs the "escape" accessibility gesture
+        // https://reactnative.dev/docs/accessibility#onaccessibilityescape-ios
+        ,
+        width: isPinHorizontal ? horizontalDrawerWidth : '100%',
+        children: content
+      }))]
+    })
+  }));
+}));

package/esm/overlays/drawer/DrawerStatusBar.js

@@ -0,0 +1,21 @@
+import React, { memo } from 'react';
+import { Platform, StatusBar } from 'react-native';
+import { useHasNotch } from '../../hooks/useHasNotch';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const DrawerStatusBar = /*#__PURE__*/memo(function DrawerStatusBar(_ref) {
+  let {
+    pin,
+    visible
+  } = _ref;
+  /** this is only used for when the drawer comes from the side or top, and it fades out the menus in the notches (time and wifi/battery) */
+  const hasNotch = useHasNotch();
+  const updateStatusBar = hasNotch && ['left', 'right', 'top'].includes(pin);
+  return Platform.select({
+    ios: updateStatusBar ? /*#__PURE__*/_jsx(StatusBar, {
+      animated: true,
+      hidden: visible
+    }) : null,
+    default: null
+  });
+});
+DrawerStatusBar.displayName = 'DrawerStatusBar';

package/esm/overlays/drawer/useDrawerAnimation.js

@@ -0,0 +1,76 @@
+import { useMemo, useRef } from 'react';
+import { Animated, Easing, useWindowDimensions } from 'react-native';
+import { animateDrawerInConfig, animateDrawerOutConfig, drawerAnimationDefaultDuration, MAX_OVER_DRAG } from '@coinbase/cds-common/animation/drawer';
+import { durations } from '@coinbase/cds-common/motion/tokens';
+import { handleBarOffset, horizontalDrawerPercentageOfView, verticalDrawerPercentageOfView as defaultVerticalDrawerPercentageOfView } from '@coinbase/cds-common/tokens/drawer';
+import { convertMotionConfig } from '../../animation/convertMotionConfig';
+const animateDrawer = {
+  animateIn: convertMotionConfig(animateDrawerInConfig),
+  animateOut: convertMotionConfig(animateDrawerOutConfig)
+};
+export const useDrawerAnimation = function (pin, verticalDrawerPercentageOfView) {
+  if (pin === void 0) {
+    pin = 'bottom';
+  }
+  if (verticalDrawerPercentageOfView === void 0) {
+    verticalDrawerPercentageOfView = defaultVerticalDrawerPercentageOfView;
+  }
+  const windowDimensions = useWindowDimensions();
+  const isPinVertical = pin === 'top' || pin === 'bottom';
+  const drawerDimension = isPinVertical ? windowDimensions.height * verticalDrawerPercentageOfView : windowDimensions.width * horizontalDrawerPercentageOfView;
+  const drawerAnimation = useRef(new Animated.Value(0));
+  const animateDrawerIn = useMemo(() => Animated.timing(drawerAnimation.current, animateDrawer.animateIn), []);
+  const animateDrawerOut = useMemo(() => Animated.timing(drawerAnimation.current, animateDrawer.animateOut), []);
+
+  /** custom animation config for swipe and fling to close that has no friction and is faster */
+  const animateSwipeToClose = useMemo(() => Animated.timing(drawerAnimation.current, {
+    toValue: animateDrawerOutConfig.toValue,
+    useNativeDriver: true,
+    duration: isPinVertical ? durations.fast3 : durations[drawerAnimationDefaultDuration],
+    easing: Easing.ease
+  }), [isPinVertical]);
+  const translation = useMemo(() => {
+    switch (pin) {
+      case 'top':
+        return {
+          translateY: drawerAnimation.current.interpolate({
+            inputRange: [0, 1],
+            outputRange: [-drawerDimension, -MAX_OVER_DRAG]
+          })
+        };
+      case 'left':
+        return {
+          translateX: drawerAnimation.current.interpolate({
+            inputRange: [0, 1],
+            outputRange: [-drawerDimension, -MAX_OVER_DRAG]
+          })
+        };
+      case 'right':
+        return {
+          translateX: drawerAnimation.current.interpolate({
+            inputRange: [0, 1],
+            outputRange: [drawerDimension, MAX_OVER_DRAG]
+          })
+        };
+      case 'bottom':
+      default:
+        return {
+          translateY: drawerAnimation.current.interpolate({
+            inputRange: [0, 1],
+            outputRange: [drawerDimension + handleBarOffset, MAX_OVER_DRAG]
+          })
+        };
+    }
+  }, [pin, drawerDimension]);
+  return useMemo(() => {
+    return {
+      drawerAnimation: drawerAnimation.current,
+      animateDrawerOut,
+      animateDrawerIn,
+      drawerAnimationStyles: {
+        transform: [translation]
+      },
+      animateSwipeToClose
+    };
+  }, [animateDrawerOut, animateDrawerIn, translation, animateSwipeToClose]);
+};

package/esm/overlays/drawer/useDrawerPanResponder.js

@@ -0,0 +1,181 @@
+import { useCallback, useMemo } from 'react';
+import { PanResponder, useWindowDimensions } from 'react-native';
+import { DISMISSAL_DRAG_THRESHOLD, DISMISSAL_VELOCITY_THRESHOLD, MAX_OVER_DRAG, MIN_PAN_DISTANCE } from '@coinbase/cds-common/animation/drawer';
+import { handleBarHeight, handleBarOffset, horizontalDrawerPercentageOfView, normalizeDrawerPanDistanceMultiplier, verticalDrawerPercentageOfView as defaultVerticalDrawerPercentageOfView } from '@coinbase/cds-common/tokens/drawer';
+import { modulate } from '@coinbase/cds-common/utils/modulate';
+/** accumulated distance of the gesture - max over drag */
+const calculateDragOffset = x => {
+  const newX = x / 100;
+  return MAX_OVER_DRAG * Math.tanh(newX);
+};
+export const useDrawerPanResponder = _ref => {
+  let {
+    pin,
+    drawerAnimation,
+    animateDrawerIn,
+    disableCapturePanGestureToDismiss,
+    onBlur,
+    handleSwipeToClose,
+    opacityAnimation,
+    verticalDrawerPercentageOfView = defaultVerticalDrawerPercentageOfView
+  } = _ref;
+  // drawer dimensions
+  const {
+    width,
+    height
+  } = useWindowDimensions();
+  const drawerWidth = width * horizontalDrawerPercentageOfView + MAX_OVER_DRAG;
+  const handleBarTotalHeight = handleBarOffset + handleBarHeight;
+  const drawerHeight = pin === 'bottom' ? height * verticalDrawerPercentageOfView + handleBarTotalHeight + MAX_OVER_DRAG : height * verticalDrawerPercentageOfView + MAX_OVER_DRAG;
+  const isHorizontalDrawer = pin === 'left' || pin === 'right';
+
+  /** calculates whether gesture was great enough to warrant a response */
+  const shouldHandleGesture = useCallback(_ref2 => {
+    let {
+      dx,
+      dy
+    } = _ref2;
+    if (pin === 'bottom') {
+      return dy > MIN_PAN_DISTANCE || dy < -MIN_PAN_DISTANCE;
+    }
+    return dx > MIN_PAN_DISTANCE || dx < -MIN_PAN_DISTANCE;
+  }, [pin]);
+  const shouldCaptureGestures = useCallback((_, state) => {
+    if (disableCapturePanGestureToDismiss) {
+      return false;
+    }
+    return shouldHandleGesture(state);
+  }, [shouldHandleGesture, disableCapturePanGestureToDismiss]);
+
+  /** translate gesture state based on pin position */
+  const parseGestureState = useCallback(gestureState => {
+    let dragDirection;
+    let isOverDrag = false;
+    const distance = pin === 'top' || pin === 'bottom' ? gestureState.dy : gestureState.dx;
+    const velocity = pin === 'top' || pin === 'bottom' ? gestureState.vy : gestureState.vx;
+    const isDragging = Math.abs(distance) > MIN_PAN_DISTANCE;
+    switch (pin) {
+      case 'left':
+      case 'right':
+        dragDirection = gestureState.dx <= 0 ? 'left' : 'right';
+        break;
+      case 'bottom':
+      case 'top':
+      default:
+        dragDirection = gestureState.dy <= 0 ? 'up' : 'down';
+        break;
+    }
+    switch (pin) {
+      case 'left':
+        isOverDrag = dragDirection === 'right';
+        break;
+      case 'right':
+        isOverDrag = dragDirection === 'left';
+        break;
+      case 'bottom':
+        isOverDrag = dragDirection === 'up';
+        break;
+      case 'top':
+      default:
+        isOverDrag = dragDirection === 'down';
+        break;
+    }
+    return {
+      distance,
+      velocity,
+      isDragging,
+      dragDirection,
+      isOverDrag
+    };
+  }, [pin]);
+  const isTryingToDismiss = useCallback(dragDirection => {
+    if (pin === 'left' && dragDirection === 'left' || pin === 'right' && dragDirection === 'right' || pin === 'bottom' && dragDirection === 'down' || pin === 'top' && dragDirection === 'up') {
+      return true;
+    }
+    return false;
+  }, [pin]);
+  const isFlingToDismiss = useCallback(velocity => {
+    switch (pin) {
+      case 'top':
+      case 'left':
+        return velocity <= -DISMISSAL_VELOCITY_THRESHOLD;
+      case 'bottom':
+      case 'right':
+      default:
+        return velocity >= DISMISSAL_VELOCITY_THRESHOLD;
+    }
+  }, [pin]);
+  const isSwipeToDismiss = useCallback(distance => {
+    switch (pin) {
+      case 'top':
+      case 'left':
+        return distance <= -DISMISSAL_DRAG_THRESHOLD;
+      case 'bottom':
+      case 'right':
+      default:
+        return distance >= DISMISSAL_DRAG_THRESHOLD;
+    }
+  }, [pin]);
+  const shouldDismiss = useCallback(gestureState => {
+    const {
+      velocity,
+      dragDirection,
+      distance
+    } = parseGestureState(gestureState);
+    if (isTryingToDismiss(dragDirection) && (isFlingToDismiss(velocity) || isSwipeToDismiss(distance))) {
+      return true;
+    }
+    return false;
+  }, [isTryingToDismiss, parseGestureState, isFlingToDismiss, isSwipeToDismiss]);
+  const panGestureHandlers = useMemo(() => {
+    return PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponder: shouldCaptureGestures,
+      onMoveShouldSetPanResponderCapture: shouldCaptureGestures,
+      onPanResponderMove: (_, gestureState) => {
+        const {
+          isDragging,
+          distance,
+          isOverDrag
+        } = parseGestureState(gestureState);
+        const isInvertedPin = pin === 'bottom' || pin === 'right';
+        const horizontalDrawerMaxPanDistance = isInvertedPin ? -drawerWidth : drawerWidth;
+        const verticalDrawerMaxPanDistance = isInvertedPin ? -drawerHeight : drawerHeight;
+        if (isDragging) {
+          if (isOverDrag) {
+            const normalizedDistance = modulate(Math.abs(distance), {
+              inputRange: [0, MAX_OVER_DRAG],
+              outputRange: [0, 0.1],
+              clamp: true
+            });
+            drawerAnimation.setOffset(calculateDragOffset(normalizedDistance));
+          } else {
+            const normalizedDrawerTransition = modulate(distance, {
+              inputRange: [0, isHorizontalDrawer ? horizontalDrawerMaxPanDistance : verticalDrawerMaxPanDistance],
+              outputRange: [0, normalizeDrawerPanDistanceMultiplier],
+              clamp: false
+            });
+            drawerAnimation.setOffset(normalizedDrawerTransition);
+            const normalizedOpacityTransition = modulate(distance, {
+              inputRange: [0, isHorizontalDrawer ? horizontalDrawerMaxPanDistance : verticalDrawerMaxPanDistance],
+              outputRange: [0, 1],
+              clamp: false
+            });
+            opacityAnimation.setOffset(normalizedOpacityTransition);
+          }
+        }
+      },
+      onPanResponderRelease: (_, gestureState) => {
+        drawerAnimation.flattenOffset();
+        opacityAnimation.flattenOffset();
+        if (shouldDismiss(gestureState)) {
+          onBlur == null || onBlur();
+          handleSwipeToClose();
+        } else {
+          animateDrawerIn.start();
+        }
+      }
+    });
+  }, [drawerAnimation, animateDrawerIn, parseGestureState, shouldCaptureGestures, shouldDismiss, drawerWidth, drawerHeight, pin, isHorizontalDrawer, onBlur, handleSwipeToClose, opacityAnimation]);
+  return panGestureHandlers;
+};

package/esm/overlays/drawer/useDrawerSpacing.js

@@ -0,0 +1,40 @@
+import { useMemo } from 'react';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { MAX_OVER_DRAG } from '@coinbase/cds-common/animation/drawer';
+import { useSafeBottomPadding } from '../../hooks/useSafeBottomPadding';
+export const useDrawerSpacing = function (pin) {
+  if (pin === void 0) {
+    pin = 'bottom';
+  }
+  const {
+    top
+  } = useSafeAreaInsets();
+  const safeBottomPadding = useSafeBottomPadding();
+  const safeAreaStyles = useMemo(() => {
+    switch (pin) {
+      case 'top':
+        return {
+          paddingTop: top + MAX_OVER_DRAG
+        };
+      case 'left':
+        return {
+          paddingTop: top,
+          paddingLeft: MAX_OVER_DRAG
+        };
+      case 'bottom':
+        return {
+          paddingBottom: safeBottomPadding + MAX_OVER_DRAG
+        };
+      case 'right':
+        return {
+          paddingTop: top,
+          paddingRight: MAX_OVER_DRAG
+        };
+      default:
+        return {
+          paddingBottom: safeBottomPadding + MAX_OVER_DRAG
+        };
+    }
+  }, [pin, safeBottomPadding, top]);
+  return safeAreaStyles;
+};

package/esm/overlays/handlebar/HandleBar.js

@@ -0,0 +1,40 @@
+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); }
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { handleBarHeight, handleBarOffset } from '@coinbase/cds-common/tokens/drawer';
+import { useTheme } from '../../hooks/useTheme';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const HandleBar = props => {
+  const theme = useTheme();
+  const handleBarBackgroundColor = theme.color.bgSecondary;
+  const handleBarStyles = {
+    backgroundColor: handleBarBackgroundColor,
+    marginBottom: theme.space[2]
+  };
+  return /*#__PURE__*/_jsx(View, _extends({
+    accessible: true,
+    style: styles.touchableArea,
+    testID: "handleBar"
+  }, props, {
+    children: /*#__PURE__*/_jsx(View, {
+      style: [styles.handleBar, handleBarStyles]
+    })
+  }));
+};
+const styles = StyleSheet.create({
+  touchableArea: {
+    position: 'absolute',
+    top: -handleBarOffset,
+    left: 0,
+    right: 0,
+    height: handleBarOffset,
+    alignItems: 'center',
+    justifyContent: 'flex-end'
+  },
+  handleBar: {
+    width: 64,
+    height: handleBarHeight,
+    borderRadius: 4
+  }
+});
+HandleBar.displayName = 'HandleBar';

package/esm/overlays/index.js

@@ -0,0 +1,11 @@
+export * from './Alert';
+export * from './drawer/Drawer';
+export * from './modal/Modal';
+export * from './modal/ModalBody';
+export * from './modal/ModalFooter';
+export * from './modal/ModalHeader';
+export * from './overlay/Overlay';
+export * from './overlay/useOverlayAnimation';
+export * from './Toast';
+export * from './tooltip/Tooltip';
+export * from './tray/Tray';