@coinbase/cds-mobile-visualization 3.4.0-beta.25 → 3.4.0-beta.27

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dts/chart/PeriodSelector.d.ts +11 -1
  3. package/dts/chart/PeriodSelector.d.ts.map +1 -1
  4. package/dts/chart/scrubber/DefaultScrubberBeacon.d.ts.map +1 -1
  5. package/dts/chart/scrubber/ScrubberBeaconLabelGroup.d.ts.map +1 -1
  6. package/esm/chart/line/__stories__/LineChart.stories.js +1 -0
  7. package/esm/chart/scrubber/DefaultScrubberBeacon.js +5 -3
  8. package/esm/chart/scrubber/ScrubberBeaconLabelGroup.js +9 -5
  9. package/esm/sparkline/sparkline-interactive-header/__stories__/SparklineInteractiveHeader.stories.js +2 -0
  10. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -8,6 +8,18 @@ All notable changes to this project will be documented in this file.
8
8
 
9
9
  <!-- template-start -->
10
10
 
11
+ ## 3.4.0-beta.27 (4/1/2026 PST)
12
+
13
+ #### 🐞 Fixes
14
+
15
+ - Fix scrubber beacon initial load glitch. [[#573](https://github.com/coinbase/cds/pull/573)]
16
+
17
+ ## 3.4.0-beta.26 (3/31/2026 PST)
18
+
19
+ #### 🐞 Fixes
20
+
21
+ - Fix scrubber beacon label single frame delay for y value. [[#570](https://github.com/coinbase/cds/pull/570)]
22
+
11
23
  ## 3.4.0-beta.25 (3/24/2026 PST)
12
24
 
13
25
  #### 🐞 Fixes
package/dts/chart/PeriodSelector.d.ts CHANGED
@@ -71,10 +71,20 @@ export declare const PeriodSelector: React.MemoExoticComponent<
71
71
  React.ForwardRefExoticComponent<
72
72
  Partial<
73
73
  Pick<
74
- import('@coinbase/cds-mobile/tabs').TabsProps<string>,
74
+ import('@coinbase/cds-mobile/tabs').TabsBaseProps<string>,
75
75
  'TabComponent' | 'TabsActiveIndicatorComponent'
76
76
  >
77
77
  > &
78
+ Omit<
79
+ import('@coinbase/cds-mobile/tabs').TabsBaseProps<string>,
80
+ 'styles' | 'TabComponent' | 'TabsActiveIndicatorComponent'
81
+ > &
82
+ Partial<
83
+ Pick<
84
+ import('@coinbase/cds-mobile/tabs').TabsProps<string>,
85
+ 'TabComponent' | 'TabsActiveIndicatorComponent'
86
+ >
87
+ > &
78
88
  Omit<
79
89
  import('@coinbase/cds-mobile/tabs').TabsProps<string>,
80
90
  'styles' | 'TabComponent' | 'TabsActiveIndicatorComponent'
package/dts/chart/PeriodSelector.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PeriodSelector.d.ts","sourceRoot":"","sources":["../../src/chart/PeriodSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,EAAc,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAGhE,OAAO,EAEL,KAAK,kBAAkB,EAEvB,KAAK,wBAAwB,EAC9B,MAAM,2BAA2B,CAAC;AAGnC,OAAO,EAAQ,KAAK,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAG3E,eAAO,MAAM,6BAA6B,GAAI,wDAK3C,wBAAwB,wDAmD1B,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,aAAa,GAAG;IAClD;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,GAAG,CAAC;CACb,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,qBAAqB,CAAC;AAStD,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;IAxBvB;;;OAGG;YACK,MAAM;IACd;;OAEG;cACO,OAAO;IACjB;;OAEG;YACK,GAAG;+BAyCZ,CAAC;AASF,MAAM,MAAM,mBAAmB,GAAG,kBAAkB,CAAC;AAErD;;;GAGG;AACH,eAAO,MAAM,cAAc;;YApIwD,CAAC;WACjC,CAAC;uBACoB,CAAC;;8BA4JxE,CAAC"}
1
+ {"version":3,"file":"PeriodSelector.d.ts","sourceRoot":"","sources":["../../src/chart/PeriodSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,EAAc,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAGhE,OAAO,EAEL,KAAK,kBAAkB,EAEvB,KAAK,wBAAwB,EAC9B,MAAM,2BAA2B,CAAC;AAGnC,OAAO,EAAQ,KAAK,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAG3E,eAAO,MAAM,6BAA6B,GAAI,wDAK3C,wBAAwB,wDAmD1B,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,aAAa,GAAG;IAClD;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,GAAG,CAAC;CACb,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,qBAAqB,CAAC;AAStD,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;IAxBvB;;;OAGG;YACK,MAAM;IACd;;OAEG;cACO,OAAO;IACjB;;OAEG;YACK,GAAG;+BAyCZ,CAAC;AASF,MAAM,MAAM,mBAAmB,GAAG,kBAAkB,CAAC;AAErD;;;GAGG;AACH,eAAO,MAAM,cAAc;;YA9Hd,CAAC;WAGZ,CAAC;uBAGE,CAAC;;8BAkJL,CAAC"}
package/dts/chart/scrubber/DefaultScrubberBeacon.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"DefaultScrubberBeacon.d.ts","sourceRoot":"","sources":["../../../src/chart/scrubber/DefaultScrubberBeacon.tsx"],"names":[],"mappings":"AAkBA,OAAO,EAIL,KAAK,UAAU,EAChB,MAAM,qBAAqB,CAAC;AAE7B,OAAO,KAAK,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAkBzE,MAAM,MAAM,0BAA0B,GAAG,mBAAmB,GAAG;IAC7D;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,qBAAqB;;aAmD1B,CAAC;cAGI,CAAC;aAIE,CAAC;wBAEe,CAAC;;;IAxE/B;;;OAGG;aACM,MAAM;IACf;;;OAGG;kBACW,MAAM;sDAoMrB,CAAC"}
1
+ {"version":3,"file":"DefaultScrubberBeacon.d.ts","sourceRoot":"","sources":["../../../src/chart/scrubber/DefaultScrubberBeacon.tsx"],"names":[],"mappings":"AAkBA,OAAO,EAIL,KAAK,UAAU,EAChB,MAAM,qBAAqB,CAAC;AAE7B,OAAO,KAAK,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAkBzE,MAAM,MAAM,0BAA0B,GAAG,mBAAmB,GAAG;IAC7D;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,qBAAqB;;aAmD1B,CAAC;cAGI,CAAC;aAIE,CAAC;wBAEe,CAAC;;;IAxE/B;;;OAGG;aACM,MAAM;IACf;;;OAGG;kBACW,MAAM;sDAsMrB,CAAC"}
package/dts/chart/scrubber/ScrubberBeaconLabelGroup.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ScrubberBeaconLabelGroup.d.ts","sourceRoot":"","sources":["../../../src/chart/scrubber/ScrubberBeaconLabelGroup.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAqB,cAAc,EAAE,MAAM,SAAS,CAAC;AAEjE,OAAO,EAKL,KAAK,qBAAqB,EAC3B,MAAM,mBAAmB,CAAC;AAS3B,OAAO,KAAK,EACV,4BAA4B,EAC5B,wBAAwB,EACxB,mBAAmB,EACpB,MAAM,YAAY,CAAC;AA4EpB,MAAM,MAAM,iCAAiC,GAAG;IAC9C;;OAEG;IACH,MAAM,EAAE,KAAK,CAAC,IAAI,CAAC,wBAAwB,EAAE,UAAU,GAAG,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC;IAC9E;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B;;OAEG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC;IACnC;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,qBAAqB,CAAC;CAC5C,CAAC;AAEF,MAAM,MAAM,6BAA6B,GAAG,iCAAiC,GAAG;IAC9E;;;OAGG;IACH,oBAAoB,CAAC,EAAE,4BAA4B,CAAC;IACpD;;OAEG;IACH,WAAW,CAAC,EAAE,mBAAmB,CAAC,aAAa,CAAC,CAAC;CAClD,CAAC;AAEF,eAAO,MAAM,wBAAwB,qEAoMpC,CAAC"}
1
+ {"version":3,"file":"ScrubberBeaconLabelGroup.d.ts","sourceRoot":"","sources":["../../../src/chart/scrubber/ScrubberBeaconLabelGroup.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAqB,cAAc,EAAE,MAAM,SAAS,CAAC;AAEjE,OAAO,EAKL,KAAK,qBAAqB,EAC3B,MAAM,mBAAmB,CAAC;AAS3B,OAAO,KAAK,EACV,4BAA4B,EAC5B,wBAAwB,EACxB,mBAAmB,EACpB,MAAM,YAAY,CAAC;AAsFpB,MAAM,MAAM,iCAAiC,GAAG;IAC9C;;OAEG;IACH,MAAM,EAAE,KAAK,CAAC,IAAI,CAAC,wBAAwB,EAAE,UAAU,GAAG,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC;IAC9E;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B;;OAEG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC;IACnC;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,qBAAqB,CAAC;CAC5C,CAAC;AAEF,MAAM,MAAM,6BAA6B,GAAG,iCAAiC,GAAG;IAC9E;;;OAGG;IACH,oBAAoB,CAAC,EAAE,4BAA4B,CAAC;IACpD;;OAEG;IACH,WAAW,CAAC,EAAE,mBAAmB,CAAC,aAAa,CAAC,CAAC;CAClD,CAAC;AAEF,eAAO,MAAM,wBAAwB,qEAoMpC,CAAC"}
package/esm/chart/line/__stories__/LineChart.stories.js CHANGED
@@ -770,6 +770,7 @@ function Compact() {
770
770
  subdetail
771
771
  } = _ref7;
772
772
  return /*#__PURE__*/_jsx(ListCell, {
773
+ accessibilityLabel: "Compact chart cell",
773
774
  detail: formatPrice(parseFloat(prices[0])),
774
775
  intermediary: /*#__PURE__*/_jsx(CompactChart, {
775
776
  color: color,
package/esm/chart/scrubber/DefaultScrubberBeacon.js CHANGED
@@ -69,8 +69,8 @@ export const DefaultScrubberBeacon = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((
69
69
  useEffect(() => {
70
70
  idlePulseShared.value = idlePulse != null ? idlePulse : false;
71
71
  }, [idlePulse, idlePulseShared]);
72
- const animatedX = useSharedValue(0);
73
- const animatedY = useSharedValue(0);
72
+ const animatedX = useSharedValue(null);
73
+ const animatedY = useSharedValue(null);
74
74
 
75
75
  // Calculate the target point position - project data to pixels
76
76
  const targetPoint = useDerivedValue(() => {
@@ -104,11 +104,13 @@ export const DefaultScrubberBeacon = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((
104
104
 
105
105
  // Create animated point using the animated values
106
106
  const animatedPoint = useDerivedValue(() => {
107
+ // If the animated values have not been set yet, return the target point
108
+ if (animatedX.value === null || animatedY.value === null) return targetPoint.value;
107
109
  return {
108
110
  x: animatedX.value,
109
111
  y: animatedY.value
110
112
  };
111
- }, [animatedX, animatedY]);
113
+ }, [targetPoint, animatedX, animatedY]);
112
114
  useImperativeHandle(ref, () => ({
113
115
  pulse: () => {
114
116
  // Only trigger manual pulse when idlePulse is not enabled
package/esm/chart/scrubber/ScrubberBeaconLabelGroup.js CHANGED
@@ -31,17 +31,21 @@ const PositionedLabel = /*#__PURE__*/memo(_ref => {
31
31
  var _positions$value$inde3, _positions$value$inde4;
32
32
  return (_positions$value$inde3 = (_positions$value$inde4 = positions.value[index]) == null ? void 0 : _positions$value$inde4.y) != null ? _positions$value$inde3 : 0;
33
33
  }, [positions, index]);
34
- const animatedY = useSharedValue(0);
34
+ const idleAnimatedY = useSharedValue(null);
35
35
  useAnimatedReaction(() => ({
36
36
  y: targetY.value,
37
37
  idle: unwrapAnimatedValue(isIdle)
38
38
  }), (current, previous) => {
39
- if (previous === null || !previous.idle || !current.idle) {
40
- animatedY.value = current.y;
39
+ // Only animate idle-to-idle updates, immediately set the value for other changes.
40
+ if (previous != null && previous.idle && current.idle) {
41
+ idleAnimatedY.value = buildTransition(current.y, updateTransition);
41
42
  } else {
42
- animatedY.value = buildTransition(current.y, updateTransition);
43
+ idleAnimatedY.value = current.y;
43
44
  }
44
45
  }, [updateTransition]);
46
+
47
+ // When scrubbing, use the targetY value, when idle, use the idleAnimatedY value.
48
+ const y = useDerivedValue(() => unwrapAnimatedValue(isIdle) && idleAnimatedY.value !== null ? idleAnimatedY.value : targetY.value, [isIdle, idleAnimatedY, targetY]);
45
49
  const dx = useDerivedValue(() => {
46
50
  return position.value === 'right' ? labelHorizontalOffset : -labelHorizontalOffset;
47
51
  }, [position, labelHorizontalOffset]);
@@ -56,7 +60,7 @@ const PositionedLabel = /*#__PURE__*/memo(_ref => {
56
60
  opacity: opacity,
57
61
  seriesId: seriesId,
58
62
  x: x,
59
- y: animatedY
63
+ y: y
60
64
  });
61
65
  });
62
66
  export const ScrubberBeaconLabelGroup = /*#__PURE__*/memo(_ref2 => {
package/esm/sparkline/sparkline-interactive-header/__stories__/SparklineInteractiveHeader.stories.js CHANGED
@@ -453,11 +453,13 @@ const SparklineInteractiveHeaderScreen = () => {
453
453
  gap: 1,
454
454
  children: [/*#__PURE__*/_jsx(IconButton, {
455
455
  active: true,
456
+ accessibilityLabel: "Star",
456
457
  feedback: "heavy",
457
458
  name: "star",
458
459
  onPress: handlePress,
459
460
  variant: "secondary"
460
461
  }), /*#__PURE__*/_jsx(IconButton, {
462
+ accessibilityLabel: "Share",
461
463
  feedback: "heavy",
462
464
  name: "share",
463
465
  onPress: handlePress,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@coinbase/cds-mobile-visualization",
3
- "version": "3.4.0-beta.25",
3
+ "version": "3.4.0-beta.27",
4
4
  "description": "Coinbase Design System - Mobile Visualization Native",
5
5
  "repository": {
6
6
  "type": "git",
@@ -36,9 +36,9 @@
36
36
  "CHANGELOG"
37
37
  ],
38
38
  "peerDependencies": {
39
- "@coinbase/cds-common": "^8.57.0",
39
+ "@coinbase/cds-common": "^8.62.0",
40
40
  "@coinbase/cds-lottie-files": "^3.3.4",
41
- "@coinbase/cds-mobile": "^8.57.0",
41
+ "@coinbase/cds-mobile": "^8.62.0",
42
42
  "@coinbase/cds-utils": "^2.3.5",
43
43
  "@shopify/react-native-skia": "^1.12.4 || ^2.0.0",
44
44
  "react": "^18.3.1",
@@ -57,9 +57,9 @@
57
57
  "@babel/preset-env": "^7.28.0",
58
58
  "@babel/preset-react": "^7.27.1",
59
59
  "@babel/preset-typescript": "^7.27.1",
60
- "@coinbase/cds-common": "^8.57.0",
60
+ "@coinbase/cds-common": "^8.62.0",
61
61
  "@coinbase/cds-lottie-files": "^3.3.4",
62
- "@coinbase/cds-mobile": "^8.57.0",
62
+ "@coinbase/cds-mobile": "^8.62.0",
63
63
  "@coinbase/cds-utils": "^2.3.5",
64
64
  "@shopify/react-native-skia": "1.12.4",
65
65
  "@types/react": "^18.3.12",