@coinbase/cds-mobile-visualization 3.4.0-beta.14 → 3.4.0-beta.16

package/CHANGELOG.md

@@ -8,6 +8,18 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 3.4.0-beta.16 (1/28/2026 PST)
+
+#### 🐞 Fixes
+
+- Fix every context rendering a second time in CDS Chart for performance. [[#339](https://github.com/avocado-cb/cds/pull/339)] [DEX2-874]
+
+## 3.4.0-beta.15 (1/27/2026 PST)
+
+#### 🐞 Fixes
+
+- Fix padding on PeriodSelector. [[#330](https://github.com/coinbase/cds/pull/330)]
+
 ## 3.4.0-beta.14 (1/22/2026 PST)
 
 #### 🚀 Updates

package/dts/chart/ChartContextBridge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChartContextBridge.d.ts","sourceRoot":"","sources":["../../src/chart/ChartContextBridge.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAwE/B;;GAEG;AACH,qBAAa,mBAAoB,SAAQ,KAAK,CAAC,SAAS,CAAC;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAAC;IACtF,OAAO,CAAC,eAAe,CAAY;IAEnC,MAAM;CAOP;AA4BD,MAAM,MAAM,UAAU,GAAG,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,GAAG;IACtD,GAAG,CAAC,CAAC,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,SAAS,CAAC;CAClD,CAAC;AA8BF;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC,CAAC;AAE3E;;;GAGG;AACH,wBAAgB,qBAAqB,IAAI,kBAAkB,CAgB1D"}
+{"version":3,"file":"ChartContextBridge.d.ts","sourceRoot":"","sources":["../../src/chart/ChartContextBridge.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAuF/B;;GAEG;AACH,qBAAa,mBAAoB,SAAQ,KAAK,CAAC,SAAS,CAAC;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAAC;IACtF,OAAO,CAAC,eAAe,CAAY;IAEnC,MAAM;CAOP;AA4BD,MAAM,MAAM,UAAU,GAAG,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,GAAG;IACtD,GAAG,CAAC,CAAC,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,SAAS,CAAC;CAClD,CAAC;AAmCF;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC,CAAC;AAE3E;;;GAGG;AACH,wBAAgB,qBAAqB,IAAI,kBAAkB,CAgB1D"}

package/dts/chart/ChartProvider.d.ts

@@ -1,4 +1,7 @@
 import type { CartesianChartContextValue } from './utils';
+export declare const CartesianChartContext: import('react').Context<
+  CartesianChartContextValue | undefined
+>;
 export declare const useCartesianChartContext: () => CartesianChartContextValue;
 export declare const CartesianChartProvider: import('react').Provider<
   CartesianChartContextValue | undefined

package/dts/chart/ChartProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChartProvider.d.ts","sourceRoot":"","sources":["../../src/chart/ChartProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,SAAS,CAAC;AAI1D,eAAO,MAAM,wBAAwB,QAAO,0BAQ3C,CAAC;AAEF,eAAO,MAAM,sBAAsB,kEAAiC,CAAC"}
+{"version":3,"file":"ChartProvider.d.ts","sourceRoot":"","sources":["../../src/chart/ChartProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,SAAS,CAAC;AAE1D,eAAO,MAAM,qBAAqB,iEAEjC,CAAC;AAEF,eAAO,MAAM,wBAAwB,QAAO,0BAQ3C,CAAC;AAEF,eAAO,MAAM,sBAAsB,kEAAiC,CAAC"}

package/esm/chart/ChartContextBridge.js

@@ -6,6 +6,17 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
  */
 
 import * as React from 'react';
+import { ThemeContext } from '@coinbase/cds-mobile/system/ThemeProvider';
+import { ScrubberContext } from './utils/context';
+import { CartesianChartContext } from './ChartProvider';
+
+/**
+ * Whitelist of contexts that should be bridged to the Skia canvas.
+ * Only these contexts will be made available inside the chart's Skia tree.
+ * This improves performance by avoiding the overhead of rendering every bridged context.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+const BRIDGED_CONTEXTS = [ThemeContext, CartesianChartContext, ScrubberContext];
 
 /**
  * Represents a react-internal tree node.
@@ -14,7 +25,7 @@ import * as React from 'react';
 /**
  * Represents a tree node selector for traversal.
  */
-import { jsx as _jsx } from "react/jsx-runtime";
+
 /**
  * Traverses up or down a React tree, return `true` to stop and select a node.
  */
@@ -104,7 +115,7 @@ function useTreeNode() {
   return treeNode;
 }
 /**
- * Returns a map of all contexts and their values.
+ * Returns a map of whitelisted contexts and their values.
  */
 function useContextMap() {
   const treeNode = useTreeNode();
@@ -118,7 +129,7 @@ function useContextMap() {
       // https://github.com/facebook/react/pull/28226
       const enableRenderableContext = node.type._context === undefined && node.type.Provider === node.type;
       const context = enableRenderableContext ? node.type : node.type._context;
-      if (context && context !== TreeNodeContext && !contextMap.has(context)) {
+      if (context && context !== TreeNodeContext && BRIDGED_CONTEXTS.includes(context) && !contextMap.has(context)) {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         contextMap.set(context, React.useContext(wrapContext(context)));
       }

package/esm/chart/ChartProvider.js

@@ -1,5 +1,5 @@
 import { createContext, useContext } from 'react';
-const CartesianChartContext = /*#__PURE__*/createContext(undefined);
+export const CartesianChartContext = /*#__PURE__*/createContext(undefined);
 export const useCartesianChartContext = () => {
   const context = useContext(CartesianChartContext);
   if (!context) {

package/esm/chart/PeriodSelector.js

@@ -24,7 +24,8 @@ export const PeriodSelectorActiveIndicator = _ref => {
   const {
     width,
     height,
-    x
+    x,
+    y
   } = activeTabRect;
 
   // Get the target background color
@@ -38,6 +39,7 @@ export const PeriodSelectorActiveIndicator = _ref => {
   // Combined animated value for position, size, and color
   const newAnimatedValues = {
     x,
+    y,
     width,
     backgroundColor: targetColor
   };
@@ -51,6 +53,8 @@ export const PeriodSelectorActiveIndicator = _ref => {
   const animatedStyles = useAnimatedStyle(() => ({
     transform: [{
       translateX: animatedValues.value.x
+    }, {
+      translateY: animatedValues.value.y
     }],
     width: animatedValues.value.width,
     backgroundColor: animatedValues.value.backgroundColor

package/esm/chart/__stories__/PeriodSelector.stories.js

@@ -70,6 +70,27 @@ const MinWidthPeriodSelectorExample = () => {
     width: "fit-content"
   });
 };
+const PaddedPeriodSelectorExample = () => {
+  const tabs = [{
+    id: '1W',
+    label: '1W'
+  }, {
+    id: '1M',
+    label: '1M'
+  }, {
+    id: 'YTD',
+    label: 'YTD'
+  }];
+  const [activeTab, setActiveTab] = useState(tabs[0]);
+  return /*#__PURE__*/_jsx(PeriodSelector, {
+    activeTab: activeTab,
+    gap: 2,
+    onChange: tab => setActiveTab(tab),
+    padding: 3,
+    tabs: tabs,
+    width: "fit-content"
+  });
+};
 const LivePeriodSelectorExample = () => {
   const tabs = useMemo(() => [{
     id: '1H',
@@ -317,6 +338,9 @@ export default function All() {
     }), /*#__PURE__*/_jsx(Example, {
       title: "Colored Excluding Live",
       children: /*#__PURE__*/_jsx(ColoredExcludingLivePeriodSelectorExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "With Padding",
+      children: /*#__PURE__*/_jsx(PaddedPeriodSelectorExample, {})
     })]
   });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile-visualization",
-  "version": "3.4.0-beta.14",
+  "version": "3.4.0-beta.16",
   "description": "Coinbase Design System - Mobile Visualization Native",
   "repository": {
     "type": "git",
@@ -36,9 +36,9 @@
     "CHANGELOG"
   ],
   "peerDependencies": {
-    "@coinbase/cds-common": "^8.38.6",
+    "@coinbase/cds-common": "^8.40.0",
     "@coinbase/cds-lottie-files": "^3.3.4",
-    "@coinbase/cds-mobile": "^8.38.6",
+    "@coinbase/cds-mobile": "^8.40.0",
     "@coinbase/cds-utils": "^2.3.5",
     "@shopify/react-native-skia": "^1.12.4 || ^2.0.0",
     "react": "^18.3.1",
@@ -57,9 +57,9 @@
     "@babel/preset-env": "^7.28.0",
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
-    "@coinbase/cds-common": "^8.38.6",
+    "@coinbase/cds-common": "^8.40.0",
     "@coinbase/cds-lottie-files": "^3.3.4",
-    "@coinbase/cds-mobile": "^8.38.6",
+    "@coinbase/cds-mobile": "^8.40.0",
     "@coinbase/cds-utils": "^2.3.5",
     "@shopify/react-native-skia": "1.12.4",
     "@types/react": "^18.3.12",