@coinbase/cds-mobile 8.28.2 → 8.30.0

package/esm/carousel/__stories__/Carousel.stories.js

@@ -14,8 +14,7 @@ import { useTheme } from '../../hooks/useTheme';
 import { Box, HStack, VStack } from '../../layout';
 import { RemoteImage } from '../../media';
 import { Pressable } from '../../system/Pressable';
-import { Link, TextHeadline, TextLabel2 } from '../../typography';
-import { Text } from '../../typography/Text';
+import { Link, Text } from '../../typography';
 import { Carousel } from '../Carousel';
 import { CarouselItem } from '../CarouselItem';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
@@ -92,7 +91,8 @@ const sampleItems = [/*#__PURE__*/_jsx(SampleCard, {
 }, "9"), /*#__PURE__*/_jsx(SampleCard, {
   text: "Slide 10"
 }, "10")];
-const SeeAllComponent = () => /*#__PURE__*/_jsx(TextHeadline, {
+const SeeAllComponent = () => /*#__PURE__*/_jsx(Text, {
+  font: "headline",
   children: /*#__PURE__*/_jsx(Link, {
     to: "https://coinbase.com/",
     children: "See all"
@@ -459,8 +459,9 @@ const AnimatedExample = () => {
     return /*#__PURE__*/_jsx(Animated.View, {
       style: animatedStyle,
       children: /*#__PURE__*/_jsx(ContainedAssetCard, {
-        description: /*#__PURE__*/_jsx(TextLabel2, {
+        description: /*#__PURE__*/_jsx(Text, {
           color: "fgPositive",
+          font: "label2",
           numberOfLines: 2,
           children: "\u21976.37%"
         }),

package/esm/hooks/useHorizontalScrollToTarget.js

@@ -4,11 +4,19 @@ import throttle from 'lodash/throttle';
  * A hook for managing horizontal scrolling with overflow detection.
  * Useful for horizontally scrollable content that needs to show overflow indicators.
  * Optionally handles scrolling to an active target element.
+ *
+ * @param scrollThrottleWaitTime - Throttle time for scroll events (default: 200ms)
+ * @param activeTarget - The active element to scroll to when it's offscreen
+ * @param autoScrollOffset - X position offset when auto-scrolling to active target
+ * @param overflowThreshold - Threshold for detecting if content is offscreen (default: 1)
  */
+
 export const useHorizontalScrollToTarget = function (_temp) {
   let {
     scrollThrottleWaitTime = 200,
-    activeTarget
+    activeTarget,
+    autoScrollOffset = 0,
+    overflowThreshold = 1
   } = _temp === void 0 ? {} : _temp;
   const scrollRef = useRef(null);
   const scrollDetails = useRef({
@@ -18,6 +26,7 @@ export const useHorizontalScrollToTarget = function (_temp) {
   });
   const [isScrollContentOverflowing, setIsScrollContentOverflowing] = useState(false);
   const [isScrollContentOffscreenRight, setIsScrollContentOffscreenRight] = useState(false);
+  const [isScrollContentOffscreenLeft, setIsScrollContentOffscreenLeft] = useState(false);
   const checkScrollState = useCallback(() => {
     const {
       xPosition,
@@ -26,8 +35,9 @@ export const useHorizontalScrollToTarget = function (_temp) {
     } = scrollDetails.current;
     const maxScroll = contentWidth - containerWidth;
     setIsScrollContentOverflowing(contentWidth > containerWidth);
-    setIsScrollContentOffscreenRight(xPosition < maxScroll - 1); // -1 offset for fractional values
-  }, []);
+    setIsScrollContentOffscreenRight(xPosition < maxScroll - overflowThreshold); // -1 offset for fractional values
+    setIsScrollContentOffscreenLeft(xPosition > overflowThreshold); // 1 offset for fractional values
+  }, [overflowThreshold]);
   const throttledHandleScroll = useRef(throttle(xPosition => {
     scrollDetails.current.xPosition = xPosition;
     checkScrollState();
@@ -56,7 +66,7 @@ export const useHorizontalScrollToTarget = function (_temp) {
         if (isOffscreenLeft || isOffscreenRight) {
           var _scrollRef$current;
           (_scrollRef$current = scrollRef.current) == null || _scrollRef$current.scrollTo({
-            x,
+            x: x - autoScrollOffset,
             y: 0,
             animated: true
           });
@@ -64,11 +74,12 @@ export const useHorizontalScrollToTarget = function (_temp) {
       });
     }
     return () => throttledHandleScroll.cancel();
-  }, [activeTarget, throttledHandleScroll]);
+  }, [activeTarget, autoScrollOffset, throttledHandleScroll]);
   return {
     scrollRef,
     isScrollContentOverflowing,
     isScrollContentOffscreenRight,
+    isScrollContentOffscreenLeft,
     handleScroll,
     handleScrollContainerLayout,
     handleScrollContentSizeChange

package/esm/overlays/drawer/Drawer.js

@@ -1,8 +1,8 @@
 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 } from 'react-native';
+import React, { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { Animated, Keyboard, Modal, Platform, StyleSheet, 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';
@@ -103,8 +103,19 @@ export const Drawer = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Drawer(
 
   // leave 15% of the screenwidth as open area for menu drawer
   const horizontalDrawerWidth = useMemo(() => width * horizontalDrawerPercentageOfView + MAX_OVER_DRAG, [width]);
+  const [keyboardInset, setKeyboardInset] = useState(0);
+  useEffect(() => {
+    if (Platform.OS !== 'android') return;
+    const show = Keyboard.addListener('keyboardDidShow', e => setKeyboardInset(e.endCoordinates.height));
+    const hide = Keyboard.addListener('keyboardDidHide', () => setKeyboardInset(0));
+    return () => {
+      show.remove();
+      hide.remove();
+    };
+  }, []);
+
   // 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 verticalDrawerMaxHeight = useMemo(() => height * verticalDrawerPercentageOfView + MAX_OVER_DRAG - keyboardInset, [height, verticalDrawerPercentageOfView, keyboardInset]);
   const getPanGestureHandlers = !preventDismissGestures ? panGestureHandlers.panHandlers : undefined;
   const handleOverlayPress = useCallback(() => {
     if (!preventDismissGestures) {

package/esm/overlays/tray/Tray.js

@@ -1,4 +1,4 @@
-const _excluded = ["children", "title", "onVisibilityChange", "verticalDrawerPercentageOfView"];
+const _excluded = ["children", "header", "footer", "title", "onVisibilityChange", "verticalDrawerPercentageOfView"];
 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';
@@ -16,6 +16,8 @@ export const TrayContext = /*#__PURE__*/createContext({
 export const Tray = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Tray(_ref, ref) {
   let {
       children,
+      header,
+      footer,
       title,
       onVisibilityChange,
       verticalDrawerPercentageOfView = defaultVerticalDrawerPercentageOfView
@@ -30,7 +32,13 @@ export const Tray = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Tray(_ref
     let {
       handleClose
     } = _ref2;
+    const content = typeof children === 'function' ? children({
+      handleClose
+    }) : children;
     return /*#__PURE__*/_jsxs(VStack, {
+      flexGrow: 1,
+      flexShrink: 1,
+      minHeight: 0,
       paddingTop: title ? 0 : 2,
       children: [title && (typeof title === 'string' ? /*#__PURE__*/_jsx(HStack, {
         alignItems: "center",
@@ -45,11 +53,15 @@ export const Tray = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Tray(_ref
       }) : /*#__PURE__*/_jsx(Box, {
         onLayout: onTitleLayout,
         children: title
-      })), typeof children === 'function' ? children({
-        handleClose
-      }) : children]
+      })), header, /*#__PURE__*/_jsx(Box, {
+        flexGrow: 1,
+        flexShrink: 1,
+        minHeight: 0,
+        width: "100%",
+        children: content
+      }), footer]
     });
-  }, [children, onTitleLayout, title]);
+  }, [children, footer, header, onTitleLayout, title]);
   useEffect(() => {
     onVisibilityChange == null || onVisibilityChange('visible');
     return () => {

package/esm/visualizations/__stories__/ProgressCircle.stories.js

@@ -8,8 +8,7 @@ import { Icon } from '../../icons';
 import { Box, HStack, VStack } from '../../layout';
 import { RemoteImage } from '../../media';
 import { defaultTheme } from '../../themes/defaultTheme';
-import { TextTitle1 } from '../../typography';
-import { Text } from '../../typography/Text';
+import { Text } from '../../typography';
 import { theme } from '../../utils/testHelpers';
 import { DefaultProgressCircleContent } from '../DefaultProgressCircleContent';
 import { ProgressCircle } from '../ProgressCircle';
@@ -22,8 +21,9 @@ const CustomStyles = () => {
     children: [/*#__PURE__*/_jsxs(HStack, {
       gap: 2,
       children: [/*#__PURE__*/_jsx(ProgressCircle, {
-        contentNode: /*#__PURE__*/_jsx(TextTitle1, {
+        contentNode: /*#__PURE__*/_jsx(Text, {
           color: disabled ? 'fgMuted' : 'fgPrimary',
+          font: "title1",
           children: "40%"
         }),
         disabled: disabled,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "8.28.2",
+  "version": "8.30.0",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
@@ -154,7 +154,7 @@
     "react-native-svg": "^14.1.0"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.28.2",
+    "@coinbase/cds-common": "^8.30.0",
     "@coinbase/cds-icons": "^5.8.0",
     "@coinbase/cds-illustrations": "^4.29.0",
     "@coinbase/cds-lottie-files": "^3.3.3",