@coinbase/cds-mobile 9.6.0 → 9.6.2

package/esm/visualizations/chart/line/__stories__/LineChart.stories.js

@@ -1,9 +1,9 @@
 const _excluded = ["dataX", "dataY"],
-  _excluded2 = ["label"],
+  _excluded2 = ["ref", "label"],
   _excluded3 = ["style"];
 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; }
 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 { forwardRef, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useAnimatedReaction, useDerivedValue, useSharedValue, withDelay, withTiming } from 'react-native-reanimated';
 import { assets, ethBackground } from '@coinbase/cds-common/internal/data/assets';
 import { prices } from '@coinbase/cds-common/internal/data/prices';
@@ -823,8 +823,9 @@ function AssetPriceWithDottedArea() {
     // Register system fonts if available, otherwise Skia will use defaults
     return fontProvider;
   }, []);
-  const BTCTab = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref8, ref) => {
+  const BTCTab = /*#__PURE__*/memo(_ref8 => {
     let {
+        ref,
         label
       } = _ref8,
       props = _objectWithoutPropertiesLoose(_ref8, _excluded2);
@@ -842,7 +843,7 @@ function AssetPriceWithDottedArea() {
         children: label
       })
     }, props));
-  }));
+  });
   const BTCActiveIndicator = /*#__PURE__*/memo(_ref9 => {
     let {
         style

package/esm/visualizations/chart/scrubber/DefaultScrubberBeacon.js

@@ -1,4 +1,4 @@
-import { forwardRef, memo, useEffect, useImperativeHandle, useMemo } from 'react';
+import { memo, useEffect, useImperativeHandle, useMemo } from 'react';
 import { cancelAnimation, Easing, useAnimatedReaction, useDerivedValue, useSharedValue, withDelay, withRepeat, withSequence, withTiming } from 'react-native-reanimated';
 import { Circle, Group } from '@shopify/react-native-skia';
 import { useTheme } from '../../../hooks/useTheme';
@@ -19,8 +19,9 @@ const defaultPulseTransition = {
   easing: Easing.bezier(0.0, 0.0, 0.0, 1.0)
 };
 const defaultPulseRepeatDelay = 400;
-export const DefaultScrubberBeacon = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+export const DefaultScrubberBeacon = /*#__PURE__*/memo(_ref => {
   let {
+    ref,
     seriesId,
     color: colorProp,
     dataX,
@@ -179,4 +180,4 @@ export const DefaultScrubberBeacon = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((
       r: radius - strokeWidth / 2
     })]
   });
-}));
+});

package/esm/visualizations/chart/scrubber/Scrubber.js

@@ -1,5 +1,5 @@
 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, { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo } from 'react';
+import React, { memo, useCallback, useEffect, useImperativeHandle, useMemo } from 'react';
 import { runOnJS, useAnimatedReaction, useDerivedValue, useSharedValue } from 'react-native-reanimated';
 import { Group, Paint, Rect } from '@shopify/react-native-skia';
 import { useTheme } from '../../../hooks/useTheme';
@@ -16,8 +16,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Unified component that manages all scrubber elements (beacons, line, labels).
  */
-export const Scrubber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+export const Scrubber = /*#__PURE__*/memo(_ref => {
   let {
+    ref,
     seriesIds,
     hideBeaconLabels,
     hideLine,
@@ -198,4 +199,4 @@ export const Scrubber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
       transitions: transitions
     })]
   });
-}));
+});

package/esm/visualizations/chart/scrubber/ScrubberBeaconGroup.js

@@ -1,4 +1,4 @@
-import { forwardRef, memo, useCallback, useImperativeHandle, useMemo } from 'react';
+import { memo, useCallback, useImperativeHandle, useMemo } from 'react';
 import { useDerivedValue } from 'react-native-reanimated';
 import { useRefMap } from '@coinbase/cds-common/hooks/useRefMap';
 import { useTheme } from '../../../hooks/useTheme';
@@ -98,8 +98,9 @@ const BeaconWithData = /*#__PURE__*/memo(_ref => {
     transitions: transitions
   });
 });
-export const ScrubberBeaconGroup = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) => {
+export const ScrubberBeaconGroup = /*#__PURE__*/memo(_ref2 => {
   let {
+    ref,
     seriesIds,
     idlePulse,
     transitions,
@@ -167,4 +168,4 @@ export const ScrubberBeaconGroup = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_r
     stroke: stroke,
     transitions: transitions
   }, s.id));
-}));
+});

package/esm/visualizations/sparkline/Sparkline.js

@@ -1,5 +1,5 @@
 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, { forwardRef, memo, useMemo, useRef } from 'react';
+import React, { memo, useMemo, useRef } from 'react';
 import { Defs, G, LinearGradient, Mask, Path, Rect, Stop, Svg } from 'react-native-svg';
 import { getAccessibleForegroundGradient } from '@coinbase/cds-common/color/getAccessibleForegroundGradient';
 import { borderWidth } from '@coinbase/cds-common/tokens/sparkline';
@@ -15,8 +15,9 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * @deprecated Use LineChart instead. This will be removed in a future major release.
  * @deprecationExpectedRemoval v4
  */
-export const Sparkline = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+export const Sparkline = /*#__PURE__*/memo(_ref => {
   let {
+    ref,
     background,
     color,
     height,
@@ -161,5 +162,5 @@ export const Sparkline = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
       }), generateSparklineAreaWithId(patternId.current, children, fillType === 'gradientDotted' ? maskId : undefined)]
     }))]
   });
-}));
+});
 Sparkline.displayName = 'Sparkline';

package/esm/visualizations/sparkline/SparklineArea.js

@@ -1,12 +1,13 @@
-import React, { forwardRef, memo } from 'react';
+import React, { memo } from 'react';
 import { Path } from 'react-native-svg';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * @deprecated Use AreaChart instead. This will be removed in a future major release.
  * @deprecationExpectedRemoval v4
  */
-export const SparklineArea = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+export const SparklineArea = /*#__PURE__*/memo(_ref => {
   let {
+    ref,
     area,
     patternId,
     maskId
@@ -17,4 +18,4 @@ export const SparklineArea = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, re
     fill: "url(#" + patternId + ")",
     mask: maskId ? "url(#" + maskId + ")" : undefined
   });
-}));
+});

package/esm/visualizations/sparkline/SparklineGradient.js

@@ -1,5 +1,5 @@
 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, { forwardRef, memo, useMemo, useRef } from 'react';
+import React, { memo, useMemo, useRef } from 'react';
 import { Defs, G, LinearGradient, Path, Stop, Svg } from 'react-native-svg';
 import { getAccessibleForegroundGradient } from '@coinbase/cds-common/color/getAccessibleForegroundGradient';
 import { borderWidth } from '@coinbase/cds-common/tokens/sparkline';
@@ -15,8 +15,9 @@ import { SparklineAreaPattern } from './SparklineAreaPattern';
  * @deprecationExpectedRemoval v4
  */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const SparklineGradient = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+export const SparklineGradient = /*#__PURE__*/memo(_ref => {
   let {
+    ref,
     background,
     color,
     path,
@@ -73,5 +74,5 @@ export const SparklineGradient = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref
       }), generateSparklineAreaWithId(patternId.current, children)]
     }))]
   });
-}));
+});
 SparklineGradient.displayName = 'SparklineGradient';

package/esm/visualizations/sparkline/sparkline-interactive/SparklineInteractiveHoverDate.js

@@ -1,5 +1,5 @@
 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, { forwardRef, useImperativeHandle, useMemo, useRef } from 'react';
+import React, { useImperativeHandle, useMemo, useRef } from 'react';
 import { Animated, StyleSheet, TextInput } from 'react-native';
 import { useTheme } from '../../../hooks/useTheme';
 import { useSparklineInteractiveContext } from './SparklineInteractiveProvider';
@@ -27,8 +27,9 @@ const styles = StyleSheet.create({
   }
 });
 const MAX_MEASURE_ITERATIONS = 5;
-const SparklineInteractiveHoverDateWithGeneric = /*#__PURE__*/forwardRef((_ref, ref) => {
+const SparklineInteractiveHoverDateWithGeneric = _ref => {
   let {
+    ref,
     formatHoverDate,
     shouldTakeUpHeight
   } = _ref;
@@ -127,5 +128,5 @@ const SparklineInteractiveHoverDateWithGeneric = /*#__PURE__*/forwardRef((_ref,
       })
     })
   });
-});
+};
 export const SparklineInteractiveHoverDate = SparklineInteractiveHoverDateWithGeneric;

package/esm/visualizations/sparkline/sparkline-interactive/SparklineInteractivePanGestureHandler.js

@@ -10,8 +10,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const {
   lightImpact
 } = Haptics;
-// Generics do not work with React.memo or forwardRef
-// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref/58473012
+// Generics do not work with React.memo
 export const SparklineInteractivePanGestureHandler = function SparklineInteractivePanGestureHandler(_ref) {
   let {
     onScrubEnd = noop,

package/esm/visualizations/sparkline/sparkline-interactive-header/SparklineInteractiveHeader.js

@@ -1,5 +1,5 @@
 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, { forwardRef, memo, useCallback, useImperativeHandle, useRef } from 'react';
+import React, { memo, useCallback, useImperativeHandle, useRef } from 'react';
 import { TextInput, View } from 'react-native';
 import { subheadIconSignMap } from '@coinbase/cds-common/tokens/sparkline';
 import { HStack } from '../../../layout/HStack';
@@ -31,8 +31,9 @@ const Trailing = _ref => {
   }
   return null;
 };
-const SparklineInteractiveHeaderStable = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, forwardedRef) => {
+const SparklineInteractiveHeaderStable = /*#__PURE__*/memo(_ref2 => {
   let {
+    ref: forwardedRef,
     defaultLabel,
     defaultTitle,
     defaultSubHead,
@@ -207,9 +208,10 @@ const SparklineInteractiveHeaderStable = /*#__PURE__*/memo(/*#__PURE__*/forwardR
       children: trailing
     })]
   });
-}));
-export const SparklineInteractiveHeader = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref4, ref) => {
+});
+export const SparklineInteractiveHeader = /*#__PURE__*/memo(_ref4 => {
   let {
+    ref,
     defaultLabel,
     defaultTitle,
     defaultSubHead,
@@ -231,4 +233,4 @@ export const SparklineInteractiveHeader = /*#__PURE__*/memo(/*#__PURE__*/forward
     testID: testID,
     trailing: trailing
   });
-}));
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "9.6.0",
+  "version": "9.6.2",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
@@ -206,7 +206,7 @@
     "react-native-worklets": "0.5.2"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^9.6.0",
+    "@coinbase/cds-common": "^9.6.2",
     "@coinbase/cds-icons": "^5.20.0",
     "@coinbase/cds-illustrations": "^4.44.0",
     "@coinbase/cds-lottie-files": "^3.3.4",