@coinbase/cds-mobile 9.12.3 → 9.14.0

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

@@ -1,3 +1,4 @@
+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, { useCallback, useMemo } from 'react';
 import { Platform } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
@@ -8,14 +9,10 @@ import { ScrubberContext } from '../utils/context';
 import { getPointOnSerializableScale } from '../utils/point';
 import { invertSerializableScale } from '../utils/scale';
 import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * A component which encapsulates the ScrubberContext.
- * It depends on a ChartContext in order to provide accurate touch tracking.
- */
-export const ScrubberProvider = _ref => {
+// Sets up the pan gesture + animated reaction. Only mounted when scrubbing is enabled.
+const EnabledScrubberProvider = _ref => {
   let {
     children,
-    enableScrubbing,
     onScrubberPositionChange,
     allowOverflowGestures
   } = _ref;
@@ -119,31 +116,50 @@ export const ScrubberProvider = _ref => {
         scrubberPosition.value = newScrubberPosition;
       }
     }).onEnd(function onEnd() {
-      if (enableScrubbing) {
-        runOnJS(handleStartEndHaptics)();
-        scrubberPosition.value = undefined;
-      }
+      runOnJS(handleStartEndHaptics)();
+      scrubberPosition.value = undefined;
     }).onTouchesCancelled(function onTouchesCancelled() {
-      if (enableScrubbing) {
-        scrubberPosition.value = undefined;
-      }
+      scrubberPosition.value = undefined;
     });
-  }, [allowOverflowGestures, handleStartEndHaptics, getDataIndexFromPosition, categoryAxisIsX, scrubberPosition, enableScrubbing]);
+  }, [allowOverflowGestures, handleStartEndHaptics, getDataIndexFromPosition, categoryAxisIsX, scrubberPosition]);
   const contextValue = useMemo(() => ({
-    enableScrubbing: !!enableScrubbing,
+    enableScrubbing: true,
     scrubberPosition
-  }), [enableScrubbing, scrubberPosition]);
-  const content = /*#__PURE__*/_jsx(ScrubberContext.Provider, {
+  }), [scrubberPosition]);
+  return /*#__PURE__*/_jsx(GestureDetector, {
+    gesture: longPressGesture,
+    children: /*#__PURE__*/_jsx(ScrubberContext.Provider, {
+      value: contextValue,
+      children: children
+    })
+  });
+};
+
+// Supplies the ScrubberContext without the gesture/animated reaction (the common, disabled case).
+const DisabledScrubberProvider = _ref2 => {
+  let {
+    children
+  } = _ref2;
+  const scrubberPosition = useSharedValue(undefined);
+  const contextValue = useMemo(() => ({
+    enableScrubbing: false,
+    scrubberPosition
+  }), [scrubberPosition]);
+  return /*#__PURE__*/_jsx(ScrubberContext.Provider, {
     value: contextValue,
     children: children
   });
+};
 
-  // Wrap with gesture handler only if scrubbing is enabled
-  if (enableScrubbing) {
-    return /*#__PURE__*/_jsx(GestureDetector, {
-      gesture: longPressGesture,
-      children: content
-    });
+/**
+ * A component which encapsulates the ScrubberContext.
+ * It depends on a ChartContext in order to provide accurate touch tracking.
+ */
+export const ScrubberProvider = props => {
+  if (props.enableScrubbing) {
+    return /*#__PURE__*/_jsx(EnabledScrubberProvider, _extends({}, props));
   }
-  return content;
+  return /*#__PURE__*/_jsx(DisabledScrubberProvider, {
+    children: props.children
+  });
 };

package/esm/visualizations/chart/text/ChartText.js

@@ -34,6 +34,11 @@ const getFontWeight = (theme, font) => {
  * Vertical alignment options for chart text.
  */
 
+/**
+ * Which axes ChartText may nudge labels along to stay in bounds.
+ * @default 'both'
+ */
+
 export const ChartText = /*#__PURE__*/memo(_ref => {
   var _elevationShadow$shad, _elevationShadow$shad2, _elevationShadow$shad3, _elevationShadow$shad4, _elevationShadow$shad5, _elevationShadow$shad6, _elevationShadow$shad7;
   let {
@@ -46,6 +51,7 @@ export const ChartText = /*#__PURE__*/memo(_ref => {
     verticalAlignment = 'middle',
     paragraphAlignment = TextAlign.Left,
     disableRepositioning = false,
+    repositionAxes = disableRepositioning ? 'none' : 'both',
     bounds,
     color,
     background: backgroundProp,
@@ -183,12 +189,8 @@ export const ChartText = /*#__PURE__*/memo(_ref => {
     height: chartHeight
   }), [chartWidth, chartHeight]);
   const overflowAmount = useDerivedValue(() => {
-    if (disableRepositioning) {
-      return {
-        x: 0,
-        y: 0
-      };
-    }
+    const repositionX = repositionAxes === 'both' || repositionAxes === 'x';
+    const repositionY = repositionAxes === 'both' || repositionAxes === 'y';
     const parentBounds = bounds != null ? bounds : fullChartBounds;
     if (!parentBounds || parentBounds.width <= 0 || parentBounds.height <= 0) {
       return {
@@ -198,25 +200,25 @@ export const ChartText = /*#__PURE__*/memo(_ref => {
     }
     let offsetX = 0;
     let offsetY = 0;
-
-    // X-axis overflow
-    if (backgroundRect.value.x < parentBounds.x) {
-      offsetX = parentBounds.x - backgroundRect.value.x;
-    } else if (backgroundRect.value.x + backgroundRect.value.width > parentBounds.x + parentBounds.width) {
-      offsetX = parentBounds.x + parentBounds.width - (backgroundRect.value.x + backgroundRect.value.width);
+    if (repositionX) {
+      if (backgroundRect.value.x < parentBounds.x) {
+        offsetX = parentBounds.x - backgroundRect.value.x;
+      } else if (backgroundRect.value.x + backgroundRect.value.width > parentBounds.x + parentBounds.width) {
+        offsetX = parentBounds.x + parentBounds.width - (backgroundRect.value.x + backgroundRect.value.width);
+      }
     }
-
-    // Y-axis overflow
-    if (backgroundRect.value.y < parentBounds.y) {
-      offsetY = parentBounds.y - backgroundRect.value.y;
-    } else if (backgroundRect.value.y + backgroundRect.value.height > parentBounds.y + parentBounds.height) {
-      offsetY = parentBounds.y + parentBounds.height - (backgroundRect.value.y + backgroundRect.value.height);
+    if (repositionY) {
+      if (backgroundRect.value.y < parentBounds.y) {
+        offsetY = parentBounds.y - backgroundRect.value.y;
+      } else if (backgroundRect.value.y + backgroundRect.value.height > parentBounds.y + parentBounds.height) {
+        offsetY = parentBounds.y + parentBounds.height - (backgroundRect.value.y + backgroundRect.value.height);
+      }
     }
     return {
       x: offsetX,
       y: offsetY
     };
-  }, [backgroundRect, fullChartBounds, bounds, disableRepositioning]);
+  }, [backgroundRect, fullChartBounds, bounds, repositionAxes]);
 
   // Final adjusted positions
   const backgroundRectWithOffset = useDerivedValue(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "9.12.3",
+  "version": "9.14.0",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
@@ -218,7 +218,7 @@
     "react-native-worklets": "0.5.2"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^9.12.3",
+    "@coinbase/cds-common": "^9.14.0",
     "@coinbase/cds-icons": "^5.21.0",
     "@coinbase/cds-illustrations": "^4.47.0",
     "@coinbase/cds-lottie-files": "^3.3.4",