@coinbase/cds-mobile 8.43.2 → 8.44.0

package/esm/overlays/drawer/Drawer.js

@@ -1,8 +1,8 @@
-const _excluded = ["children", "pin", "onCloseComplete", "preventDismissGestures", "preventHardwareBackBehaviorAndroid", "hideHandleBar", "disableCapturePanGestureToDismiss", "onBlur", "verticalDrawerPercentageOfView", "handleBarAccessibilityLabel"];
+const _excluded = ["children", "pin", "onCloseComplete", "preventDismissGestures", "preventHardwareBackBehaviorAndroid", "handleBarVariant", "hideHandleBar", "disableCapturePanGestureToDismiss", "onBlur", "verticalDrawerPercentageOfView", "handleBarAccessibilityLabel", "accessibilityLabel", "accessibilityLabelledBy", "style", "styles", "accessibilityRole", "animationType"];
 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, useState } from 'react';
-import { Animated, Keyboard, Modal, Platform, StyleSheet, useWindowDimensions } from 'react-native';
+import { Animated, Keyboard, Modal, Platform, 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';
@@ -19,23 +19,32 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const overlayContentContextValue = {
   isDrawer: true
 };
+const overflowStyle = {
+  overflow: 'hidden',
+  maxHeight: '100%'
+};
 export const Drawer = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Drawer(_ref, ref) {
   let {
       children,
       pin = 'bottom',
       onCloseComplete,
-      preventDismissGestures = false,
-      preventHardwareBackBehaviorAndroid = false,
-      hideHandleBar = false,
+      preventDismissGestures,
+      preventHardwareBackBehaviorAndroid,
+      handleBarVariant = 'outside',
+      hideHandleBar,
       disableCapturePanGestureToDismiss = false,
       onBlur,
       verticalDrawerPercentageOfView = defaultVerticalDrawerPercentageOfView,
-      handleBarAccessibilityLabel = 'Dismiss'
+      handleBarAccessibilityLabel = 'Dismiss',
+      accessibilityLabel,
+      accessibilityLabelledBy,
+      style,
+      styles,
+      accessibilityRole = 'alert',
+      animationType = 'none'
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  const {
-    activeColorScheme
-  } = useTheme();
+  const theme = useTheme();
   const {
     width,
     height
@@ -49,7 +58,7 @@ export const Drawer = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Drawer(
     animateSwipeToClose
   } = useDrawerAnimation(pin, verticalDrawerPercentageOfView);
   const [opacityAnimation, animateOverlayIn, animateOverlayOut] = useOverlayAnimation(drawerAnimationDefaultDuration);
-  const spacingStyles = useDrawerSpacing(pin);
+  const paddingStyles = useDrawerSpacing(pin);
   const isMounted = useRef(false);
   const handleClose = useCallback(() => {
     Animated.parallel([animateDrawerOut, animateOverlayOut]).start(_ref2 => {
@@ -98,8 +107,10 @@ export const Drawer = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Drawer(
     opacityAnimation,
     verticalDrawerPercentageOfView
   });
-  const isPinHorizontal = pin === 'left' || pin === 'right';
-  const shouldShowHandleBar = !hideHandleBar && pin === 'bottom';
+  const isSideDrawer = pin === 'left' || pin === 'right';
+  const showHandleBar = !hideHandleBar && pin === 'bottom';
+  const showHandleBarOutside = showHandleBar && handleBarVariant === 'outside';
+  const showHandleBarInside = showHandleBar && handleBarVariant === 'inside';
 
   // leave 15% of the screenwidth as open area for menu drawer
   const horizontalDrawerWidth = useMemo(() => width * horizontalDrawerPercentageOfView + MAX_OVER_DRAG, [width]);
@@ -116,33 +127,47 @@ export const Drawer = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Drawer(
 
   // 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 - keyboardInset, [height, verticalDrawerPercentageOfView, keyboardInset]);
-  const getPanGestureHandlers = !preventDismissGestures ? panGestureHandlers.panHandlers : undefined;
+
+  // For inside variant, pan handlers go on handlebar, for outside variant, on container
+  const getContainerPanHandlers = !preventDismissGestures && !showHandleBarInside ? panGestureHandlers.panHandlers : undefined;
+  const getHandleBarPanHandlers = !preventDismissGestures && showHandleBarInside ? 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'
-    }
-  });
   useImperativeHandle(ref, () => ({
     handleClose
   }), [handleClose]);
   const content = useMemo(() => typeof children === 'function' ? children({
     handleClose
   }) : children, [children, handleClose]);
+  const rootStyle = useMemo(() => [style, styles == null ? void 0 : styles.root], [style, styles == null ? void 0 : styles.root]);
+  const containerStyle = useMemo(() => [drawerAnimationStyles, styles == null ? void 0 : styles.container], [drawerAnimationStyles, styles == null ? void 0 : styles.container]);
+  const drawerStyle = useMemo(() => [paddingStyles, {
+    overflow: showHandleBarOutside ? 'visible' : 'hidden'
+  }, styles == null ? void 0 : styles.drawer], [paddingStyles, showHandleBarOutside, styles == null ? void 0 : styles.drawer]);
+  const handleBar = useMemo(() => /*#__PURE__*/_jsx(HandleBar, {
+    accessibilityLabel: handleBarAccessibilityLabel,
+    accessibilityRole: "button",
+    onAccessibilityPress: handleClose,
+    panHandlers: getHandleBarPanHandlers,
+    styles: {
+      root: styles == null ? void 0 : styles.handleBar,
+      handle: styles == null ? void 0 : styles.handleBarHandle
+    },
+    variant: handleBarVariant
+  }), [handleBarAccessibilityLabel, handleClose, getHandleBarPanHandlers, styles == null ? void 0 : styles.handleBar, styles == null ? void 0 : styles.handleBarHandle, handleBarVariant]);
   return /*#__PURE__*/_jsx(Modal, _extends({
     hardwareAccelerated: true,
     transparent: true,
     visible: true,
-    animationType: "none",
-    onRequestClose: handleRequestClose
+    accessibilityRole: accessibilityRole,
+    animationType: animationType,
+    onRequestClose: handleRequestClose,
+    style: rootStyle
   }, props, {
-    accessibilityRole: "alert",
     children: /*#__PURE__*/_jsxs(OverlayContentContext.Provider, {
       value: overlayContentContextValue,
       children: [/*#__PURE__*/_jsx(DrawerStatusBar, {
@@ -151,27 +176,29 @@ export const Drawer = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Drawer(
       }), /*#__PURE__*/_jsx(Overlay, {
         onTouchStart: handleOverlayPress,
         opacity: opacityAnimation,
+        style: styles == null ? void 0 : styles.overlay,
         testID: "drawer-overlay"
-      }), /*#__PURE__*/_jsxs(Box, _extends({}, getPanGestureHandlers, {
-        animated: true,
-        onAccessibilityEscape: handleClose
+      }), /*#__PURE__*/_jsxs(Box, _extends({}, getContainerPanHandlers, {
+        animated: true
         // close modal when user performs the "escape" accessibility gesture
         // https://reactnative.dev/docs/accessibility#onaccessibilityescape-ios
         ,
+        onAccessibilityEscape: handleClose,
         pin: pin,
-        style: drawerAnimationStyles,
-        width: isPinHorizontal ? horizontalDrawerWidth : '100%',
-        children: [shouldShowHandleBar && /*#__PURE__*/_jsx(HandleBar, {
-          accessibilityLabel: handleBarAccessibilityLabel,
-          accessibilityRole: "button",
-          onAccessibilityPress: handleClose
-        }), /*#__PURE__*/_jsx(Box, {
-          borderRadius: isPinHorizontal ? 0 : 400,
-          bordered: activeColorScheme === 'dark',
+        style: containerStyle,
+        width: isSideDrawer ? horizontalDrawerWidth : '100%',
+        children: [showHandleBarOutside && handleBar, /*#__PURE__*/_jsxs(Box, {
+          accessibilityLabel: accessibilityLabel,
+          accessibilityLabelledBy: accessibilityLabelledBy,
+          borderRadius: isSideDrawer ? 0 : 600,
+          bordered: theme.activeColorScheme === 'dark',
           elevation: 2,
-          maxHeight: !isPinHorizontal ? verticalDrawerMaxHeight : '100%',
-          style: [cardStyles.spacing, shouldShowHandleBar && cardStyles.overflowStyles],
-          children: content
+          maxHeight: !isSideDrawer ? verticalDrawerMaxHeight : '100%',
+          style: drawerStyle,
+          children: [showHandleBarInside && handleBar, /*#__PURE__*/_jsx(View, {
+            style: overflowStyle,
+            children: content
+          })]
         })]
       }))]
     })

package/esm/overlays/handlebar/HandleBar.js

@@ -1,52 +1,75 @@
-const _excluded = ["onAccessibilityPress"];
+const _excluded = ["onAccessibilityPress", "variant", "panHandlers", "style", "styles"];
 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 { useCallback } from 'react';
-import { Pressable, StyleSheet, View } from 'react-native';
+import { useCallback, useMemo } from 'react';
+import { Pressable, View } from 'react-native';
 import { handleBarHeight } from '@coinbase/cds-common/tokens/drawer';
 import { useTheme } from '../../hooks/useTheme';
 import { jsx as _jsx } from "react/jsx-runtime";
+// Fixed pixel values used intentionally — handle size should not scale with theme density.
+const HANDLE_WIDTH_OUTSIDE = 64;
+const HANDLE_WIDTH_INSIDE = 32;
+const HANDLE_OPACITY_INSIDE = 0.4;
 export const HandleBar = _ref => {
   let {
-      onAccessibilityPress
+      onAccessibilityPress,
+      variant = 'outside',
+      panHandlers,
+      style,
+      styles
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const theme = useTheme();
-  const handleBarBackgroundColor = theme.color.bgSecondary;
-  const handleBarStyles = {
-    backgroundColor: handleBarBackgroundColor
-  };
-  const touchableAreaStyles = {
-    paddingBottom: theme.space[2],
-    paddingTop: theme.space[2]
-  };
+  const paddingY = theme.space[2];
+  const isInside = variant === 'inside';
+  const handleBarBackgroundColor = theme.color[isInside ? 'bgInverse' : 'bgSecondary'];
   const handleAccessibilityAction = useCallback(event => {
     if (event.nativeEvent.actionName === 'activate') {
       onAccessibilityPress == null || onAccessibilityPress();
     }
   }, [onAccessibilityPress]);
+  const pressableStyle = useCallback(state => [{
+    alignItems: 'center',
+    paddingBottom: paddingY,
+    paddingTop: paddingY
+  }, style, typeof (styles == null ? void 0 : styles.root) === 'function' ? styles == null ? void 0 : styles.root(state) : styles == null ? void 0 : styles.root], [paddingY, style, styles]);
+  const handleBarStyle = useMemo(() => [{
+    width: isInside ? HANDLE_WIDTH_INSIDE : HANDLE_WIDTH_OUTSIDE,
+    height: handleBarHeight,
+    backgroundColor: handleBarBackgroundColor,
+    borderRadius: 4,
+    opacity: isInside ? HANDLE_OPACITY_INSIDE : 1
+  }, styles == null ? void 0 : styles.handle], [isInside, handleBarBackgroundColor, styles == null ? void 0 : styles.handle]);
+  if (isInside) {
+    return /*#__PURE__*/_jsx(View, _extends({
+      accessible: true,
+      accessibilityActions: onAccessibilityPress ? [{
+        name: 'activate'
+      }] : undefined,
+      accessibilityRole: "button",
+      onAccessibilityAction: handleAccessibilityAction,
+      style: pressableStyle({
+        pressed: false
+      }),
+      testID: "handleBar"
+    }, panHandlers, props, {
+      children: /*#__PURE__*/_jsx(View, {
+        style: handleBarStyle
+      })
+    }));
+  }
   return /*#__PURE__*/_jsx(Pressable, _extends({
     accessible: true,
     accessibilityActions: onAccessibilityPress ? [{
       name: 'activate'
     }] : undefined,
     onAccessibilityAction: handleAccessibilityAction,
-    style: [styles.touchableArea, touchableAreaStyles],
+    style: pressableStyle,
     testID: "handleBar"
-  }, props, {
+  }, panHandlers, props, {
     children: /*#__PURE__*/_jsx(View, {
-      style: [styles.handleBar, handleBarStyles]
+      style: handleBarStyle
     })
   }));
 };
-const styles = StyleSheet.create({
-  touchableArea: {
-    alignItems: 'center'
-  },
-  handleBar: {
-    width: 64,
-    height: handleBarHeight,
-    borderRadius: 4
-  }
-});
 HandleBar.displayName = 'HandleBar';

package/esm/overlays/tray/Tray.js

@@ -1,11 +1,12 @@
-const _excluded = ["children", "header", "footer", "title", "onVisibilityChange", "verticalDrawerPercentageOfView"];
+const _excluded = ["children", "title", "header", "headerElevation", "footer", "onVisibilityChange", "handleBarVariant", "verticalDrawerPercentageOfView", "styles"],
+  _excluded2 = ["content", "header", "title"];
 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, { createContext, forwardRef, memo, useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { useWindowDimensions } from 'react-native';
 import { MAX_OVER_DRAG } from '@coinbase/cds-common/animation/drawer';
 import { verticalDrawerPercentageOfView as defaultVerticalDrawerPercentageOfView } from '@coinbase/cds-common/tokens/drawer';
-import { Box, HStack, VStack } from '../../layout';
+import { Box, VStack } from '../../layout';
 import { Text } from '../../typography/Text';
 import { Drawer } from '../drawer/Drawer';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -16,52 +17,85 @@ export const TrayContext = /*#__PURE__*/createContext({
 export const Tray = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Tray(_ref, ref) {
   let {
       children,
+      title,
       header,
+      headerElevation,
       footer,
-      title,
       onVisibilityChange,
-      verticalDrawerPercentageOfView = defaultVerticalDrawerPercentageOfView
+      handleBarVariant = 'outside',
+      verticalDrawerPercentageOfView = defaultVerticalDrawerPercentageOfView,
+      styles
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const [titleHeight, setTitleHeight] = useState(0);
+  const isInsideHandleBar = handleBarVariant === 'inside';
+  const {
+    contentStyle,
+    headerStyle,
+    titleStyle,
+    drawerStyles
+  } = useMemo(() => {
+    const _ref2 = styles != null ? styles : {},
+      {
+        content: contentStyle,
+        header: headerStyle,
+        title: titleStyle
+      } = _ref2,
+      drawerStyles = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+    return {
+      contentStyle,
+      headerStyle,
+      titleStyle,
+      drawerStyles
+    };
+  }, [styles]);
   const onTitleLayout = useCallback(event => {
     if (!title) return;
     setTitleHeight(event.nativeEvent.layout.height);
   }, [title]);
-  const renderChildren = useCallback(_ref2 => {
+  const renderChildren = useCallback(_ref3 => {
     let {
       handleClose
-    } = _ref2;
+    } = _ref3;
     const content = typeof children === 'function' ? children({
       handleClose
     }) : children;
+    const headerContent = typeof header === 'function' ? header({
+      handleClose
+    }) : header;
+    const footerContent = typeof footer === 'function' ? footer({
+      handleClose
+    }) : footer;
     return /*#__PURE__*/_jsxs(VStack, {
       flexGrow: 1,
       flexShrink: 1,
       minHeight: 0,
       paddingTop: title ? 0 : 2,
-      children: [title && (typeof title === 'string' ? /*#__PURE__*/_jsx(HStack, {
-        alignItems: "center",
-        onLayout: onTitleLayout,
-        paddingBottom: 2,
-        paddingTop: 3,
-        paddingX: 3,
-        children: /*#__PURE__*/_jsx(Text, {
-          font: "title3",
-          children: title
-        })
-      }) : /*#__PURE__*/_jsx(Box, {
-        onLayout: onTitleLayout,
-        children: title
-      })), header, /*#__PURE__*/_jsx(Box, {
+      style: contentStyle,
+      children: [(title || headerContent) && /*#__PURE__*/_jsxs(Box, {
+        elevation: headerElevation,
+        style: headerStyle,
+        children: [title && /*#__PURE__*/_jsx(Box, {
+          justifyContent: "center",
+          onLayout: onTitleLayout,
+          paddingBottom: isInsideHandleBar ? 0.75 : 2,
+          paddingTop: isInsideHandleBar ? 0 : 3,
+          paddingX: 3,
+          children: typeof title === 'string' ? /*#__PURE__*/_jsx(Text, {
+            font: "title3",
+            style: titleStyle,
+            children: title
+          }) : title
+        }), headerContent]
+      }), /*#__PURE__*/_jsx(Box, {
         flexGrow: 1,
         flexShrink: 1,
         minHeight: 0,
         width: "100%",
         children: content
-      }), footer]
+      }), footerContent]
     });
-  }, [children, footer, header, onTitleLayout, title]);
+  }, [title, contentStyle, onTitleLayout, isInsideHandleBar, headerElevation, headerStyle, titleStyle, header, children, footer]);
   useEffect(() => {
     onVisibilityChange == null || onVisibilityChange('visible');
     return () => {
@@ -75,18 +109,19 @@ export const Tray = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Tray(_ref
   return /*#__PURE__*/_jsx(TrayContext.Provider, {
     value: trayContextValue,
     children: /*#__PURE__*/_jsx(Drawer, _extends({
-      pin: "bottom",
+      ref: ref,
+      handleBarVariant: handleBarVariant,
+      styles: drawerStyles,
       verticalDrawerPercentageOfView: trayContextValue.verticalDrawerPercentageOfView
     }, props, {
-      ref: ref,
       children: renderChildren
     }))
   });
 }));
-export const TrayStickyFooter = _ref3 => {
+export const TrayStickyFooter = _ref4 => {
   let {
     children
-  } = _ref3;
+  } = _ref4;
   const {
     verticalDrawerPercentageOfView,
     titleHeight

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "8.43.2",
+  "version": "8.44.0",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
@@ -198,7 +198,7 @@
     "react-native-svg": "^14.1.0"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.43.2",
+    "@coinbase/cds-common": "^8.44.0",
     "@coinbase/cds-icons": "^5.11.0",
     "@coinbase/cds-illustrations": "^4.31.0",
     "@coinbase/cds-lottie-files": "^3.3.4",