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

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 (8) hide show
  1. package/CHANGELOG.md +6 -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/ScrubberBeaconLabelGroup.d.ts.map +1 -1
  5. package/esm/chart/line/__stories__/LineChart.stories.js +1 -0
  6. package/esm/chart/scrubber/ScrubberBeaconLabelGroup.js +9 -5
  7. package/esm/sparkline/sparkline-interactive-header/__stories__/SparklineInteractiveHeader.stories.js +2 -0
  8. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -8,6 +8,12 @@ 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.26 (3/24/2026 PST)
12
+
13
+ #### 🐞 Fixes
14
+
15
+ - Fix scrubber beacon label single frame delay for y value. [[#570](https://github.com/coinbase/cds/pull/570)]
16
+
11
17
  ## 3.4.0-beta.25 (3/24/2026 PST)
12
18
 
13
19
  #### 🐞 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/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;AAmFpB,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/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(0);
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 : 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.26",
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",