@coinbase/cds-mobile 8.66.2 → 9.0.0-rc.2

package/esm/visualizations/chart/CartesianChart.js

@@ -0,0 +1,455 @@
+const _excluded = ["series", "children", "layout", "animate", "enableScrubbing", "getScrubberAccessibilityLabel", "scrubberAccessibilityLabelStep", "xAxis", "yAxis", "inset", "onScrubberPositionChange", "legend", "legendPosition", "legendAccessibilityLabel", "width", "height", "style", "styles", "allowOverflowGestures", "fontFamilies", "fontProvider", "collapsable", "accessible", "accessibilityLabel", "accessibilityLiveRegion"];
+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, useMemo, useRef, useState } from 'react';
+import { Canvas, Skia } from '@shopify/react-native-skia';
+import { Box } from '../../layout';
+import { ScrubberAccessibilityView } from './scrubber/ScrubberAccessibilityView';
+import { ScrubberProvider } from './scrubber/ScrubberProvider';
+import { convertToSerializableScale } from './utils/scale';
+import { useChartContextBridge } from './ChartContextBridge';
+import { CartesianChartProvider } from './ChartProvider';
+import { Legend } from './legend';
+import { defaultAxisId, defaultHorizontalLayoutChartInset, defaultVerticalLayoutChartInset, getAxisConfig, getAxisRange, getCartesianAxisDomain, getCartesianAxisScale, getChartInset, getStackedSeriesData as calculateStackedSeriesData, useTotalAxisPadding } from './utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ChartCanvas = /*#__PURE__*/memo(_ref => {
+  let {
+    children,
+    style,
+    accessible = true,
+    accessibilityLabel,
+    accessibilityLiveRegion = 'polite'
+  } = _ref;
+  const ContextBridge = useChartContextBridge();
+  const isAccessible = accessible && accessibilityLabel !== null;
+  return /*#__PURE__*/_jsx(Canvas, {
+    accessibilityLabel: isAccessible ? accessibilityLabel : undefined,
+    accessibilityLiveRegion: isAccessible ? accessibilityLiveRegion : undefined,
+    accessible: isAccessible,
+    style: [{
+      width: '100%',
+      height: '100%'
+    }, style],
+    children: /*#__PURE__*/_jsx(ContextBridge, {
+      children: children
+    })
+  });
+});
+function useChartLayout() {
+  const [containerLayout, setContainerLayout] = useState({
+    width: 0,
+    height: 0,
+    x: 0,
+    y: 0
+  });
+  const containerLayoutRafRef = useRef(null);
+  const onContainerLayout = useCallback(event => {
+    const layout = event.nativeEvent.layout;
+    if (containerLayoutRafRef.current !== null) cancelAnimationFrame(containerLayoutRafRef.current);
+    containerLayoutRafRef.current = requestAnimationFrame(() => {
+      containerLayoutRafRef.current = null;
+      setContainerLayout(layout);
+    });
+  }, []);
+  useEffect(() => {
+    return () => {
+      if (containerLayoutRafRef.current !== null) {
+        cancelAnimationFrame(containerLayoutRafRef.current);
+      }
+    };
+  }, []);
+  return [containerLayout, onContainerLayout];
+}
+export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) => {
+  let {
+      series,
+      children,
+      layout = 'vertical',
+      animate = true,
+      enableScrubbing,
+      getScrubberAccessibilityLabel,
+      scrubberAccessibilityLabelStep,
+      xAxis: xAxisConfigProp,
+      yAxis: yAxisConfigProp,
+      inset,
+      onScrubberPositionChange,
+      legend,
+      legendPosition = 'bottom',
+      legendAccessibilityLabel,
+      width = '100%',
+      height = '100%',
+      style,
+      styles,
+      allowOverflowGestures,
+      fontFamilies,
+      fontProvider: fontProviderProp,
+      // React Native will collapse views by default when only used
+      // to group children, which interferes with gesture-handler
+      // https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/gesture-detector/#:~:text=%7B%0A%20%20return%20%3C-,View,-collapsable%3D%7B
+      collapsable = false,
+      accessible = true,
+      accessibilityLabel,
+      accessibilityLiveRegion = 'polite'
+    } = _ref2,
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded);
+  const [containerLayout, onContainerLayout] = useChartLayout();
+  const chartWidth = containerLayout.width;
+  const chartHeight = containerLayout.height;
+  const calculatedInset = useMemo(() => getChartInset(inset, layout === 'horizontal' ? defaultHorizontalLayoutChartInset : defaultVerticalLayoutChartInset), [inset, layout]);
+  const xAxisConfig = useMemo(() => getAxisConfig('x', xAxisConfigProp), [xAxisConfigProp]);
+  const yAxisConfig = useMemo(() => getAxisConfig('y', yAxisConfigProp), [yAxisConfigProp]);
+
+  // Horizontal layout supports multiple value axes on x, but only a single category axis on y.
+  // Vertical layout keeps a single x-axis to preserve existing behavior.
+  if (layout === 'horizontal' && yAxisConfig.length > 1) {
+    throw new Error('When layout="horizontal", only one y-axis is supported. See https://cds.coinbase.com/components/charts/CartesianChart.');
+  }
+  if (layout !== 'horizontal' && xAxisConfig.length > 1) {
+    throw new Error('Multiple x-axes are only supported when layout="horizontal". See https://cds.coinbase.com/components/charts/CartesianChart.');
+  }
+  const {
+    renderedAxes,
+    registerAxis,
+    unregisterAxis,
+    axisPadding
+  } = useTotalAxisPadding();
+  const totalInset = useMemo(() => ({
+    top: calculatedInset.top + axisPadding.top,
+    right: calculatedInset.right + axisPadding.right,
+    bottom: calculatedInset.bottom + axisPadding.bottom,
+    left: calculatedInset.left + axisPadding.left
+  }), [calculatedInset, axisPadding]);
+  const chartRect = useMemo(() => {
+    if (chartWidth <= 0 || chartHeight <= 0) return {
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0
+    };
+    const availableWidth = chartWidth - totalInset.left - totalInset.right;
+    const availableHeight = chartHeight - totalInset.top - totalInset.bottom;
+    return {
+      x: totalInset.left,
+      y: totalInset.top,
+      width: availableWidth > 0 ? availableWidth : 0,
+      height: availableHeight > 0 ? availableHeight : 0
+    };
+  }, [chartHeight, chartWidth, totalInset]);
+  const {
+    xAxes,
+    xScales
+  } = useMemo(() => {
+    const axes = new Map();
+    const scales = new Map();
+    if (!chartRect || chartRect.width <= 0 || chartRect.height <= 0) return {
+      xAxes: axes,
+      xScales: scales
+    };
+    xAxisConfig.forEach(axisParam => {
+      var _axisParam$id, _series$filter, _axisParam$domainLimi;
+      const axisId = (_axisParam$id = axisParam.id) != null ? _axisParam$id : defaultAxisId;
+
+      // Get relevant series data.
+      const relevantSeries = xAxisConfig.length > 1 ? (_series$filter = series == null ? void 0 : series.filter(s => {
+        var _s$xAxisId;
+        return ((_s$xAxisId = s.xAxisId) != null ? _s$xAxisId : defaultAxisId) === axisId;
+      })) != null ? _series$filter : [] : series != null ? series : [];
+
+      // Calculate domain and range.
+      const dataDomain = getCartesianAxisDomain(axisParam, relevantSeries, 'x', layout);
+      const range = getAxisRange(axisParam, chartRect, 'x');
+      const axisConfig = {
+        scaleType: axisParam.scaleType,
+        domain: dataDomain,
+        range,
+        data: axisParam.data,
+        categoryPadding: axisParam.categoryPadding,
+        domainLimit: (_axisParam$domainLimi = axisParam.domainLimit) != null ? _axisParam$domainLimi : layout === 'horizontal' ? 'nice' : 'strict',
+        baseline: axisParam.baseline
+      };
+
+      // Create the scale.
+      const scale = getCartesianAxisScale({
+        config: axisConfig,
+        type: 'x',
+        range: axisConfig.range,
+        dataDomain: axisConfig.domain,
+        layout
+      });
+      if (scale) {
+        scales.set(axisId, scale);
+
+        // Update axis config with actual scale domain (after .nice() or other adjustments).
+        const scaleDomain = scale.domain();
+        const actualDomain = Array.isArray(scaleDomain) && scaleDomain.length === 2 ? {
+          min: scaleDomain[0],
+          max: scaleDomain[1]
+        } : axisConfig.domain;
+        axes.set(axisId, _extends({}, axisConfig, {
+          domain: actualDomain
+        }));
+      }
+    });
+    return {
+      xAxes: axes,
+      xScales: scales
+    };
+  }, [xAxisConfig, series, chartRect, layout]);
+
+  // We need a set of serialized scales usable in UI thread.
+  const xSerializableScales = useMemo(() => {
+    const serializableScales = new Map();
+    xScales.forEach((scale, id) => {
+      const serializableScale = convertToSerializableScale(scale);
+      if (serializableScale) {
+        serializableScales.set(id, serializableScale);
+      }
+    });
+    return serializableScales;
+  }, [xScales]);
+  const {
+    yAxes,
+    yScales
+  } = useMemo(() => {
+    const axes = new Map();
+    const scales = new Map();
+    if (!chartRect || chartRect.width <= 0 || chartRect.height <= 0) return {
+      yAxes: axes,
+      yScales: scales
+    };
+    yAxisConfig.forEach(axisParam => {
+      var _axisParam$id2, _series$filter2, _axisParam$domainLimi2;
+      const axisId = (_axisParam$id2 = axisParam.id) != null ? _axisParam$id2 : defaultAxisId;
+
+      // Get relevant series data.
+      const relevantSeries = yAxisConfig.length > 1 ? (_series$filter2 = series == null ? void 0 : series.filter(s => {
+        var _s$yAxisId;
+        return ((_s$yAxisId = s.yAxisId) != null ? _s$yAxisId : defaultAxisId) === axisId;
+      })) != null ? _series$filter2 : [] : series != null ? series : [];
+
+      // Calculate domain and range.
+      const dataDomain = getCartesianAxisDomain(axisParam, relevantSeries, 'y', layout);
+      const range = getAxisRange(axisParam, chartRect, 'y');
+      const axisConfig = {
+        scaleType: axisParam.scaleType,
+        domain: dataDomain,
+        range,
+        data: axisParam.data,
+        categoryPadding: axisParam.categoryPadding,
+        domainLimit: (_axisParam$domainLimi2 = axisParam.domainLimit) != null ? _axisParam$domainLimi2 : layout === 'horizontal' ? 'strict' : 'nice',
+        baseline: axisParam.baseline
+      };
+
+      // Create the scale.
+      const scale = getCartesianAxisScale({
+        config: axisConfig,
+        type: 'y',
+        range: axisConfig.range,
+        dataDomain: axisConfig.domain,
+        layout
+      });
+      if (scale) {
+        scales.set(axisId, scale);
+
+        // Update axis config with actual scale domain (after .nice() or other adjustments).
+        const scaleDomain = scale.domain();
+        const actualDomain = Array.isArray(scaleDomain) && scaleDomain.length === 2 ? {
+          min: scaleDomain[0],
+          max: scaleDomain[1]
+        } : axisConfig.domain;
+        axes.set(axisId, _extends({}, axisConfig, {
+          domain: actualDomain
+        }));
+      }
+    });
+    return {
+      yAxes: axes,
+      yScales: scales
+    };
+  }, [yAxisConfig, series, chartRect, layout]);
+
+  // We need a set of serialized scales usable in UI thread
+  const ySerializableScales = useMemo(() => {
+    const serializableScales = new Map();
+    yScales.forEach((scale, id) => {
+      const serializableScale = convertToSerializableScale(scale);
+      if (serializableScale) {
+        serializableScales.set(id, serializableScale);
+      }
+    });
+    return serializableScales;
+  }, [yScales]);
+  const getXAxis = useCallback(id => xAxes.get(id != null ? id : defaultAxisId), [xAxes]);
+  const getYAxis = useCallback(id => yAxes.get(id != null ? id : defaultAxisId), [yAxes]);
+  const getXScale = useCallback(id => xScales.get(id != null ? id : defaultAxisId), [xScales]);
+  const getYScale = useCallback(id => yScales.get(id != null ? id : defaultAxisId), [yScales]);
+  const getXSerializableScale = useCallback(id => xSerializableScales.get(id != null ? id : defaultAxisId), [xSerializableScales]);
+  const getYSerializableScale = useCallback(id => ySerializableScales.get(id != null ? id : defaultAxisId), [ySerializableScales]);
+  const getSeries = useCallback(seriesId => series == null ? void 0 : series.find(s => s.id === seriesId), [series]);
+  const stackedDataMap = useMemo(() => {
+    if (!series) return new Map();
+    return calculateStackedSeriesData(series, layout, xAxisConfig, yAxisConfig);
+  }, [series, layout, xAxisConfig, yAxisConfig]);
+  const getStackedSeriesData = useCallback(seriesId => {
+    if (!seriesId) return undefined;
+    return stackedDataMap.get(seriesId);
+  }, [stackedDataMap]);
+  const categoryAxisIsX = useMemo(() => {
+    return layout !== 'horizontal';
+  }, [layout]);
+  const categoryAxisConfig = useMemo(() => {
+    var _xAxisConfig$, _yAxisConfig$;
+    return categoryAxisIsX ? (_xAxisConfig$ = xAxisConfig[0]) != null ? _xAxisConfig$ : yAxisConfig[0] : (_yAxisConfig$ = yAxisConfig[0]) != null ? _yAxisConfig$ : xAxisConfig[0];
+  }, [categoryAxisIsX, xAxisConfig, yAxisConfig]);
+  const dataLength = useMemo(() => {
+    // If category axis has categorical data, use that length.
+    if (categoryAxisConfig.data && categoryAxisConfig.data.length > 0) {
+      return categoryAxisConfig.data.length;
+    }
+
+    // Otherwise, find the longest series.
+    if (!series || series.length === 0) return 0;
+    return series.reduce((max, s) => {
+      var _seriesData$length;
+      const seriesData = getStackedSeriesData(s.id);
+      return Math.max(max, (_seriesData$length = seriesData == null ? void 0 : seriesData.length) != null ? _seriesData$length : 0);
+    }, 0);
+  }, [categoryAxisConfig, series, getStackedSeriesData]);
+  const getAxisBounds = useCallback(axisId => {
+    const axis = renderedAxes.get(axisId);
+    if (!axis || !chartRect) return;
+    const axesAtPosition = Array.from(renderedAxes.values()).filter(a => a.position === axis.position).sort((a, b) => a.id.localeCompare(b.id));
+    const axisIndex = axesAtPosition.findIndex(a => a.id === axisId);
+    if (axisIndex === -1) return;
+
+    // Calculate offset from previous axes at the same position
+    const offsetFromPreviousAxes = axesAtPosition.slice(0, axisIndex).reduce((sum, a) => sum + a.size, 0);
+    if (axis.position === 'top') {
+      // Position above the chart rect, accounting for user inset
+      const startY = calculatedInset.top + offsetFromPreviousAxes;
+      return {
+        x: chartRect.x,
+        y: startY,
+        width: chartRect.width,
+        height: axis.size
+      };
+    } else if (axis.position === 'bottom') {
+      // Position below the chart rect, accounting for user inset
+      const startY = chartRect.y + chartRect.height + offsetFromPreviousAxes;
+      return {
+        x: chartRect.x,
+        y: startY,
+        width: chartRect.width,
+        height: axis.size
+      };
+    } else if (axis.position === 'left') {
+      // Position to the left of the chart rect, accounting for user inset
+      const startX = calculatedInset.left + offsetFromPreviousAxes;
+      return {
+        x: startX,
+        y: chartRect.y,
+        width: axis.size,
+        height: chartRect.height
+      };
+    } else {
+      // right - position to the right of the chart rect, accounting for user inset
+      const startX = chartRect.x + chartRect.width + offsetFromPreviousAxes;
+      return {
+        x: startX,
+        y: chartRect.y,
+        width: axis.size,
+        height: chartRect.height
+      };
+    }
+  }, [renderedAxes, chartRect, calculatedInset]);
+  const fontProvider = useMemo(() => {
+    if (fontProviderProp) return fontProviderProp;
+    return Skia.TypefaceFontProvider.Make();
+  }, [fontProviderProp]);
+  const contextValue = useMemo(() => ({
+    layout,
+    series: series != null ? series : [],
+    getSeries,
+    getSeriesData: getStackedSeriesData,
+    animate,
+    width: chartWidth,
+    height: chartHeight,
+    fontFamilies,
+    fontProvider,
+    getXAxis,
+    getYAxis,
+    getXScale,
+    getYScale,
+    getXSerializableScale,
+    getYSerializableScale,
+    drawingArea: chartRect,
+    dataLength,
+    registerAxis,
+    unregisterAxis,
+    getAxisBounds
+  }), [layout, series, getSeries, getStackedSeriesData, animate, chartWidth, chartHeight, fontFamilies, fontProvider, getXAxis, getYAxis, getXScale, getYScale, getXSerializableScale, getYSerializableScale, chartRect, dataLength, registerAxis, unregisterAxis, getAxisBounds]);
+  const rootStyles = useMemo(() => {
+    return [style, styles == null ? void 0 : styles.root];
+  }, [style, styles == null ? void 0 : styles.root]);
+  const legendElement = useMemo(() => {
+    if (!legend) return;
+    if (legend === true) {
+      const isHorizontal = legendPosition === 'top' || legendPosition === 'bottom';
+      const flexDirection = isHorizontal ? 'row' : 'column';
+      return /*#__PURE__*/_jsx(Legend, {
+        accessibilityLabel: legendAccessibilityLabel,
+        flexDirection: flexDirection
+      });
+    }
+    return legend;
+  }, [legend, legendAccessibilityLabel, legendPosition]);
+  const rootBoxProps = useMemo(() => _extends({
+    ref,
+    height,
+    style: rootStyles,
+    width
+  }, props), [ref, height, rootStyles, width, props]);
+  return /*#__PURE__*/_jsx(CartesianChartProvider, {
+    value: contextValue,
+    children: /*#__PURE__*/_jsx(ScrubberProvider, {
+      allowOverflowGestures: allowOverflowGestures,
+      enableScrubbing: enableScrubbing,
+      onScrubberPositionChange: onScrubberPositionChange,
+      children: legend ? /*#__PURE__*/_jsxs(Box, _extends({
+        flexDirection: legendPosition === 'top' || legendPosition === 'bottom' ? 'column' : 'row'
+      }, rootBoxProps, {
+        children: [(legendPosition === 'top' || legendPosition === 'left') && legendElement, /*#__PURE__*/_jsxs(Box, {
+          collapsable: collapsable,
+          onLayout: onContainerLayout,
+          style: {
+            flex: 1
+          },
+          children: [/*#__PURE__*/_jsx(ChartCanvas, {
+            accessibilityLabel: accessibilityLabel,
+            accessibilityLiveRegion: accessibilityLiveRegion,
+            accessible: accessible,
+            style: styles == null ? void 0 : styles.chart,
+            children: children
+          }), /*#__PURE__*/_jsx(ScrubberAccessibilityView, {
+            accessibilityLabel: getScrubberAccessibilityLabel,
+            accessibilityStep: scrubberAccessibilityLabelStep
+          })]
+        }), (legendPosition === 'bottom' || legendPosition === 'right') && legendElement]
+      })) : /*#__PURE__*/_jsxs(Box, _extends({
+        collapsable: collapsable,
+        onLayout: onContainerLayout
+      }, rootBoxProps, {
+        children: [/*#__PURE__*/_jsx(ChartCanvas, {
+          accessibilityLabel: accessibilityLabel,
+          accessibilityLiveRegion: accessibilityLiveRegion,
+          accessible: accessible,
+          style: styles == null ? void 0 : styles.chart,
+          children: children
+        }), /*#__PURE__*/_jsx(ScrubberAccessibilityView, {
+          accessibilityLabel: getScrubberAccessibilityLabel,
+          accessibilityStep: scrubberAccessibilityLabelStep
+        })]
+      }))
+    })
+  });
+}));

package/esm/visualizations/chart/ChartContextBridge.js

@@ -0,0 +1,159 @@
+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); }
+/**
+ * Simplified context bridge utilities for React Native.
+ * Adapted from its-fine to enable context sharing across React renderers
+ * https://github.com/pmndrs/its-fine/blob/598b81f02778c22ed21121c2b1a786bdefb14e23/src/index.tsx
+ */
+
+import { Component, createContext, useContext, useId, useMemo, useState } from 'react';
+import { ThemeContext } from '../../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.
+ */
+
+/**
+ * Represents a tree node selector for traversal.
+ */
+
+/**
+ * Traverses up or down a React tree, return `true` to stop and select a node.
+ */
+function traverseTreeNode(node, ascending, selector) {
+  if (!node) return;
+  if (selector(node) === true) return node;
+  let child = ascending ? node.return : node.child;
+  while (child) {
+    const match = traverseTreeNode(child, ascending, selector);
+    if (match) return match;
+    child = ascending ? null : child.sibling;
+  }
+}
+
+/**
+ * Wraps context to hide React development warnings about using contexts between renderers.
+ */
+function wrapContext(context) {
+  try {
+    return Object.defineProperties(context, {
+      _currentRenderer: {
+        get() {
+          return null;
+        },
+        set() {}
+      },
+      _currentRenderer2: {
+        get() {
+          return null;
+        },
+        set() {}
+      }
+    });
+  } catch (_) {
+    return context;
+  }
+}
+
+// In development, React will warn about using contexts between renderers.
+// Suppress the warning because our context bridge fixes this issue
+const error = console.error;
+console.error = function () {
+  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+    args[_key] = arguments[_key];
+  }
+  const message = args.join('');
+  if (message != null && message.startsWith('Warning:') && message.includes('useContext')) {
+    console.error = error;
+    return;
+  }
+  return error.apply(this, args);
+};
+const TreeNodeContext = wrapContext(/*#__PURE__*/createContext(null));
+
+/**
+ * A react-internal tree node provider that binds React children to the React tree for chart context bridging.
+ */
+export class ChartBridgeProvider extends Component {
+  render() {
+    return /*#__PURE__*/_jsx(TreeNodeContext.Provider, {
+      value: this._reactInternals,
+      children: this.props.children
+    });
+  }
+}
+
+/**
+ * Returns the current react-internal tree node.
+ */
+function useTreeNode() {
+  const root = useContext(TreeNodeContext);
+  if (root === null) throw new Error('useTreeNode must be called within a <ChartBridgeProvider />!');
+  const id = useId();
+  const treeNode = useMemo(() => {
+    for (const maybeNode of [root, root == null ? void 0 : root.alternate]) {
+      if (!maybeNode) continue;
+      const node = traverseTreeNode(maybeNode, false, node => {
+        let state = node.memoizedState;
+        while (state) {
+          if (state.memoizedState === id) return true;
+          state = state.next;
+        }
+      });
+      if (node) return node;
+    }
+  }, [root, id]);
+  return treeNode;
+}
+/**
+ * Returns a map of whitelisted contexts and their values.
+ */
+function useContextMap() {
+  const treeNode = useTreeNode();
+  const [contextMap] = useState(() => new Map());
+
+  // Collect live context
+  contextMap.clear();
+  let node = treeNode;
+  while (node) {
+    if (node.type && typeof node.type === 'object') {
+      // 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 && BRIDGED_CONTEXTS.includes(context) && !contextMap.has(context)) {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        contextMap.set(context, useContext(wrapContext(context)));
+      }
+    }
+    node = node.return;
+  }
+  return contextMap;
+}
+
+/**
+ * Represents a chart context bridge provider component.
+ */
+
+/**
+ * Returns a ChartContextBridge of live context providers to pierce Context across renderers.
+ * Pass ChartContextBridge as a component to a secondary renderer (e.g., Skia Canvas) to enable context-sharing in charts.
+ */
+export function useChartContextBridge() {
+  const contextMap = useContextMap();
+
+  // Flatten context and their memoized values into a `ChartContextBridge` provider
+  return useMemo(() => Array.from(contextMap.keys()).reduce((Prev, context) => props => /*#__PURE__*/_jsx(Prev, {
+    children: /*#__PURE__*/_jsx(context.Provider, _extends({}, props, {
+      value: contextMap.get(context)
+    }))
+  }), props => /*#__PURE__*/_jsx(ChartBridgeProvider, _extends({}, props))), [contextMap]);
+}

package/esm/visualizations/chart/ChartProvider.js

@@ -0,0 +1,10 @@
+import { createContext, useContext } from 'react';
+export const CartesianChartContext = /*#__PURE__*/createContext(undefined);
+export const useCartesianChartContext = () => {
+  const context = useContext(CartesianChartContext);
+  if (!context) {
+    throw new Error('useCartesianChartContext must be used within a CartesianChart component. See https://cds.coinbase.com/components/charts/CartesianChart.');
+  }
+  return context;
+};
+export const CartesianChartProvider = CartesianChartContext.Provider;