@coinbase/cds-mobile 8.53.1 → 8.55.0

package/esm/overlays/__stories__/TrayRedesign.stories.js

@@ -172,6 +172,7 @@ const TrayWithListCells = () => {
       children: "Open"
     }), isTrayVisible && /*#__PURE__*/_jsx(Tray, {
       ref: trayRef,
+      disableSafeAreaPaddingBottom: true,
       handleBarVariant: "inside",
       headerElevation: isScrolled ? 2 : 0,
       onCloseComplete: setIsTrayVisibleOff,
@@ -196,7 +197,6 @@ const TrayWithListCells = () => {
   });
 };
 const TrayWithListCellsStickyFooter = () => {
-  const safeBottomPadding = useSafeBottomPadding();
   const [isTrayVisible, setIsTrayVisible] = useState(false);
   const [isScrolled, setIsScrolled] = useState(false);
   const setIsTrayVisibleOff = useCallback(() => setIsTrayVisible(false), [setIsTrayVisible]);
@@ -223,9 +223,6 @@ const TrayWithListCellsStickyFooter = () => {
           background: "bgElevation2",
           elevation: isScrolled ? 2 : 0,
           paddingX: 3,
-          style: {
-            paddingBottom: safeBottomPadding
-          },
           children: /*#__PURE__*/_jsx(Button, {
             block: true,
             onPress: handleClose,
@@ -327,6 +324,7 @@ const IllustrationTrayWithListCells = () => {
       children: "Open"
     }), isTrayVisible && /*#__PURE__*/_jsx(Tray, {
       ref: trayRef,
+      disableSafeAreaPaddingBottom: true,
       handleBarVariant: "inside",
       headerElevation: isScrolled ? 2 : 0,
       onCloseComplete: setIsTrayVisibleOff,
@@ -410,7 +408,6 @@ const IllustrationTrayWithStickyFooter = () => {
   });
 };
 const IllustrationTrayWithListCellsStickyFooter = () => {
-  const safeBottomPadding = useSafeBottomPadding();
   const [isTrayVisible, setIsTrayVisible] = useState(false);
   const [isScrolled, setIsScrolled] = useState(false);
   const setIsTrayVisibleOff = useCallback(() => setIsTrayVisible(false), [setIsTrayVisible]);
@@ -437,9 +434,6 @@ const IllustrationTrayWithListCellsStickyFooter = () => {
           background: "bgElevation2",
           elevation: isScrolled ? 2 : 0,
           paddingX: 3,
-          style: {
-            paddingBottom: safeBottomPadding
-          },
           children: /*#__PURE__*/_jsx(Button, {
             block: true,
             onPress: handleClose,
@@ -570,6 +564,7 @@ const FullBleedImageTrayWithListCells = () => {
       children: "Open"
     }), isTrayVisible && /*#__PURE__*/_jsx(Tray, {
       ref: trayRef,
+      disableSafeAreaPaddingBottom: true,
       handleBarVariant: "inside",
       header: /*#__PURE__*/_jsx(Text, {
         font: "title3",
@@ -591,8 +586,7 @@ const FullBleedImageTrayWithListCells = () => {
         header: {
           paddingHorizontal: 0,
           paddingBottom: 0
-        },
-        drawer: scrollContentStyle
+        }
       },
       title: /*#__PURE__*/_jsx(Box, {
         background: "bgAlternate",
@@ -907,8 +901,7 @@ const MultiScreenTrayExample = () => {
       let {
         onNavigate
       } = _ref9;
-      return /*#__PURE__*/_jsxs(ScrollView, {
-        scrollEventThrottle: 16,
+      return /*#__PURE__*/_jsxs(VStack, {
         children: [/*#__PURE__*/_jsx(ListCell, {
           accessory: "arrow",
           description: "Manage your account settings",

package/esm/overlays/__stories__/Trays.js

@@ -102,6 +102,7 @@ export const ScrollableTray = _ref2 => {
     }), isTrayVisible && /*#__PURE__*/_jsx(Tray, {
       ref: trayRef,
       disableCapturePanGestureToDismiss: true,
+      disableSafeAreaPaddingBottom: true,
       onCloseComplete: setIsTrayVisibleOff,
       title: title,
       verticalDrawerPercentageOfView: verticalDrawerPercentageOfView,

package/esm/overlays/drawer/Drawer.js

@@ -1,8 +1,8 @@
-const _excluded = ["children", "pin", "onCloseComplete", "preventDismissGestures", "preventHardwareBackBehaviorAndroid", "handleBarVariant", "hideHandleBar", "disableCapturePanGestureToDismiss", "onBlur", "verticalDrawerPercentageOfView", "handleBarAccessibilityLabel", "accessibilityLabel", "accessibilityLabelledBy", "reduceMotion", "style", "styles", "accessibilityRole", "animationType"];
+const _excluded = ["children", "pin", "onCloseComplete", "preventDismissGestures", "preventHardwareBackBehaviorAndroid", "handleBarVariant", "hideHandleBar", "disableCapturePanGestureToDismiss", "onBlur", "verticalDrawerPercentageOfView", "handleBarAccessibilityLabel", "accessibilityLabel", "accessibilityLabelledBy", "reduceMotion", "onOpenComplete", "style", "styles", "accessibilityRole", "animationType", "disableSafeAreaPaddingBottom"];
 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, useWindowDimensions, View } from 'react-native';
+import { Animated, Keyboard, Modal, Platform, useWindowDimensions } 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,10 +19,6 @@ 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,
@@ -39,10 +35,12 @@ export const Drawer = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Drawer(
       accessibilityLabel,
       accessibilityLabelledBy,
       reduceMotion,
+      onOpenComplete,
       style,
       styles,
       accessibilityRole = 'alert',
-      animationType = 'none'
+      animationType = 'none',
+      disableSafeAreaPaddingBottom
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const theme = useTheme();
@@ -60,7 +58,7 @@ export const Drawer = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Drawer(
     animateSwipeToClose
   } = useDrawerAnimation(pin, verticalDrawerPercentageOfView, reduceMotion);
   const [opacityAnimation, animateOverlayIn, animateOverlayOut] = useOverlayAnimation(drawerAnimationDefaultDuration);
-  const paddingStyles = useDrawerSpacing(pin);
+  const paddingStyles = useDrawerSpacing(pin, disableSafeAreaPaddingBottom);
   const isMounted = useRef(false);
   const handleClose = useCallback(() => {
     Animated.parallel([animateDrawerOut, animateOverlayOut]).start(_ref2 => {
@@ -95,10 +93,11 @@ export const Drawer = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Drawer(
         } = _ref4;
         if (finished) {
           isMounted.current = true;
+          onOpenComplete == null || onOpenComplete();
         }
       });
     }
-  }, [drawerAnimation, animateDrawerIn, animateOverlayIn]);
+  }, [drawerAnimation, animateDrawerIn, animateOverlayIn, onOpenComplete]);
   const panGestureHandlers = useDrawerPanResponder({
     pin,
     drawerAnimation,
@@ -197,10 +196,7 @@ export const Drawer = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Drawer(
           elevation: 2,
           maxHeight: !isSideDrawer ? verticalDrawerMaxHeight : '100%',
           style: drawerStyle,
-          children: [showHandleBarInside && handleBar, showHandleBarInside ? /*#__PURE__*/_jsx(View, {
-            style: overflowStyle,
-            children: content
-          }) : content]
+          children: [showHandleBarInside && handleBar, content]
         })]
       }))]
     })

package/esm/overlays/drawer/useDrawerSpacing.js

@@ -2,39 +2,42 @@ 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) {
+export const useDrawerSpacing = function (pin, disableSafeAreaPaddingBottom) {
   if (pin === void 0) {
     pin = 'bottom';
   }
+  if (disableSafeAreaPaddingBottom === void 0) {
+    disableSafeAreaPaddingBottom = false;
+  }
   const {
-    top
+    top: safeTopPadding
   } = useSafeAreaInsets();
   const safeBottomPadding = useSafeBottomPadding();
   const safeAreaStyles = useMemo(() => {
     switch (pin) {
       case 'top':
         return {
-          paddingTop: top + MAX_OVER_DRAG
+          paddingTop: safeTopPadding + MAX_OVER_DRAG
         };
       case 'left':
         return {
-          paddingTop: top,
+          paddingTop: safeTopPadding,
           paddingLeft: MAX_OVER_DRAG
         };
       case 'bottom':
         return {
-          paddingBottom: safeBottomPadding + MAX_OVER_DRAG
+          paddingBottom: disableSafeAreaPaddingBottom ? MAX_OVER_DRAG : safeBottomPadding + MAX_OVER_DRAG
         };
       case 'right':
         return {
-          paddingTop: top,
+          paddingTop: safeTopPadding,
           paddingRight: MAX_OVER_DRAG
         };
       default:
         return {
-          paddingBottom: safeBottomPadding + MAX_OVER_DRAG
+          paddingBottom: disableSafeAreaPaddingBottom ? MAX_OVER_DRAG : safeBottomPadding + MAX_OVER_DRAG
         };
     }
-  }, [pin, safeBottomPadding, top]);
+  }, [pin, safeBottomPadding, safeTopPadding, disableSafeAreaPaddingBottom]);
   return safeAreaStyles;
 };

package/esm/overlays/tooltip/Tooltip.js

@@ -19,6 +19,7 @@ export const Tooltip = /*#__PURE__*/memo(_ref => {
     accessibilityHint,
     accessibilityLabelForContent,
     accessibilityHintForContent,
+    accessibilityState,
     visible,
     invertColorScheme = true,
     elevation,
@@ -92,8 +93,12 @@ export const Tooltip = /*#__PURE__*/memo(_ref => {
   // equals the component where when you click on it, it will show the tooltip
   const accessibilityPropsForTrigger = useMemo(() => ({
     accessibilityLabel: typeof children === 'string' && accessibilityLabel === undefined ? children : accessibilityLabel,
-    accessibilityHint: typeof children === 'string' && accessibilityHint === undefined ? children : accessibilityHint
-  }), [children, accessibilityLabel, accessibilityHint]);
+    accessibilityHint: typeof children === 'string' && accessibilityHint === undefined ? children : accessibilityHint,
+    // accessibilityState is applied to the trigger regardless of screen reader usage.
+    // Only set it when you need screen reader behavior.
+    // e.g. disabled = true: state is announced and the trigger cannot activate
+    accessibilityState
+  }), [children, accessibilityLabel, accessibilityHint, accessibilityState]);
   const accessibilityPropsForContent = useMemo(() => ({
     accessibilityLabel: typeof content === 'string' && accessibilityLabelForContent === undefined ? content : accessibilityLabelForContent,
     accessibilityHint: typeof content === 'string' && accessibilityHintForContent === undefined ? content : accessibilityHintForContent,

package/esm/overlays/tray/Tray.js

@@ -71,6 +71,7 @@ export const Tray = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Tray(_ref
       flexGrow: 1,
       flexShrink: 1,
       minHeight: 0,
+      overflow: "hidden",
       paddingTop: title ? 0 : 2,
       style: contentStyle,
       children: [(title || headerContent) && /*#__PURE__*/_jsxs(Box, {
@@ -119,6 +120,10 @@ export const Tray = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Tray(_ref
     }))
   });
 }));
+
+/**
+ * @deprecated Redundant component.
+ */
 export const TrayStickyFooter = _ref4 => {
   let {
     children

package/esm/sticky-footer/StickyFooter.js

@@ -1,4 +1,4 @@
-const _excluded = ["elevated", "elevation", "children", "testID", "role", "accessibilityLabel", "padding"];
+const _excluded = ["elevated", "elevation", "children", "testID", "role", "accessibilityLabel", "padding", "flexShrink"];
 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 } from 'react';
@@ -13,13 +13,15 @@ export const StickyFooter = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, for
       testID = 'sticky-footer',
       role = 'toolbar',
       accessibilityLabel = 'footer',
-      padding = 2
+      padding = 2,
+      flexShrink = 0
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   return /*#__PURE__*/_jsx(Box, _extends({
     ref: forwardedRef,
     accessibilityLabel: accessibilityLabel,
     elevation: elevation,
+    flexShrink: flexShrink,
     padding: padding,
     role: role,
     testID: testID

package/esm/sticky-footer/__stories__/StickyFooterWithTray.stories.js

@@ -1,12 +1,12 @@
 import React, { useCallback, useRef, useState } from 'react';
-import { FlatList, ScrollView } from 'react-native';
+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 { Example, ExampleScreen } from '../../examples/ExampleScreen';
 import { Box, HStack } from '../../layout';
-import { Tray, TrayStickyFooter } from '../../overlays';
+import { Tray } from '../../overlays';
 import { StickyFooter } from '../StickyFooter';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const options = prices.slice(0, 20);
@@ -42,51 +42,46 @@ const StickyFooterWithTray = _ref => {
     }), isTrayVisible && /*#__PURE__*/_jsx(Tray, {
       ref: trayRef,
       disableCapturePanGestureToDismiss: true,
-      onCloseComplete: setIsTrayVisibleToFalse,
-      title: title,
-      verticalDrawerPercentageOfView: 0.75,
-      children: _ref3 => {
+      footer: _ref3 => {
         let {
           handleClose
         } = _ref3;
-        return /*#__PURE__*/_jsxs(TrayStickyFooter, {
-          children: [/*#__PURE__*/_jsx(ScrollView, {
-            children: /*#__PURE__*/_jsx(Menu, {
-              onChange: setValue,
-              value: value,
-              children: /*#__PURE__*/_jsx(FlatList, {
-                data: options,
-                renderItem: renderItem,
-                scrollEnabled: false
+        return /*#__PURE__*/_jsx(StickyFooter, {
+          children: /*#__PURE__*/_jsxs(HStack, {
+            alignItems: "center",
+            gap: 1,
+            justifyContent: "center",
+            width: "100%",
+            children: [/*#__PURE__*/_jsx(Box, {
+              flexGrow: 1,
+              children: /*#__PURE__*/_jsx(Button, {
+                block: true,
+                variant: "secondary",
+                children: "Secondary"
+              })
+            }), /*#__PURE__*/_jsx(Box, {
+              flexGrow: 1,
+              children: /*#__PURE__*/_jsx(Button, {
+                block: true,
+                onPress: handleClose,
+                children: "Primary"
               })
-            })
-          }), /*#__PURE__*/_jsx(StickyFooter, {
-            elevated: true,
-            children: /*#__PURE__*/_jsxs(HStack, {
-              alignContent: "center",
-              alignItems: "center",
-              gap: 1,
-              justifyContent: "center",
-              width: "100%",
-              children: [/*#__PURE__*/_jsx(Box, {
-                flexGrow: 1,
-                children: /*#__PURE__*/_jsx(Button, {
-                  block: true,
-                  variant: "secondary",
-                  children: "Secondary"
-                })
-              }), /*#__PURE__*/_jsx(Box, {
-                flexGrow: 1,
-                children: /*#__PURE__*/_jsx(Button, {
-                  block: true,
-                  onPress: handleClose,
-                  children: "Primary"
-                })
-              })]
-            })
-          })]
+            })]
+          })
         });
-      }
+      },
+      handleBarVariant: "inside",
+      onCloseComplete: setIsTrayVisibleToFalse,
+      title: title,
+      verticalDrawerPercentageOfView: 0.75,
+      children: /*#__PURE__*/_jsx(Menu, {
+        onChange: setValue,
+        value: value,
+        children: /*#__PURE__*/_jsx(FlatList, {
+          data: options,
+          renderItem: renderItem
+        })
+      })
     })]
   });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "8.53.1",
+  "version": "8.55.0",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
@@ -187,7 +187,6 @@
     "lottie-react-native": "^6.7.0",
     "react": "^18.3.1",
     "react-native": "^0.74.5",
-    "react-native-date-picker": "^4.4.2",
     "react-native-gesture-handler": "^2.16.2",
     "react-native-inappbrowser-reborn": "^3.7.0",
     "react-native-linear-gradient": "^2.8.3",
@@ -198,7 +197,7 @@
     "react-native-svg": "^14.1.0"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.53.1",
+    "@coinbase/cds-common": "^8.55.0",
     "@coinbase/cds-icons": "^5.13.0",
     "@coinbase/cds-illustrations": "^4.34.0",
     "@coinbase/cds-lottie-files": "^3.3.4",
@@ -223,7 +222,6 @@
     "eslint-plugin-reanimated": "^2.0.1",
     "lottie-react-native": "6.7.0",
     "react-native-accessibility-engine": "^3.2.0",
-    "react-native-date-picker": "4.4.2",
     "react-native-gesture-handler": "2.16.2",
     "react-native-inappbrowser-reborn": "3.7.0",
     "react-native-linear-gradient": "2.8.3",