@coinbase/cds-mobile 8.62.0 → 8.66.0

package/esm/tour/Tour.js

@@ -1,6 +1,6 @@
 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, useRef } from 'react';
-import { Modal, View } from 'react-native';
+import React, { useCallback, useMemo, useRef } from 'react';
+import { Modal, StyleSheet, View } from 'react-native';
 import { OverlayContentContext } from '@coinbase/cds-common/overlays/OverlayContentContext';
 import { TourContext } from '@coinbase/cds-common/tour/TourContext';
 import { useTour } from '@coinbase/cds-common/tour/useTour';
@@ -14,8 +14,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const overlayContentContextValue = {
   isTour: true
 };
+
+// ------------ SUBCOMPONENT PROP TYPES ------------
+
+// ------------ SUBCOMPONENT TYPES ------------
+
 const TourComponent = _props => {
-  var _activeTourStep$Arrow, _activeTourStep$hideO, _activeTourStep$tourM, _activeTourStep$tourM2;
+  var _ref, _activeTourStep$hideO, _activeTourStep$tourM, _activeTourStep$tourM2;
   const mergedProps = useComponentConfig('Tour', _props);
   const {
     steps,
@@ -29,6 +34,7 @@ const TourComponent = _props => {
     hideOverlay,
     tourMaskPadding,
     tourMaskBorderRadius,
+    styles,
     accessibilityLabel,
     accessibilityLabelledBy,
     id,
@@ -39,13 +45,20 @@ const TourComponent = _props => {
   const defaultTourStepShiftPadding = theme.space[4];
   const tourStepArrowRef = useRef(null);
   const RenderedTourStep = activeTourStep == null ? void 0 : activeTourStep.Component;
-  const RenderedTourStepArrow = (_activeTourStep$Arrow = activeTourStep == null ? void 0 : activeTourStep.ArrowComponent) != null ? _activeTourStep$Arrow : TourStepArrowComponent;
+  // activeTourStep.ArrowComponent references old, deprecated type in cds-common
+  const RenderedTourStepArrow = (_ref = activeTourStep == null ? void 0 : activeTourStep.ArrowComponent) != null ? _ref : TourStepArrowComponent;
   const [animation, animationApi] = useSpring(() => ({
     from: {
       opacity: 0
     },
     config: springConfig.slow
   }), []);
+
+  // StyleSheet.flatten is needed because styles?.mask/stepContainer are StyleProp<ViewStyle>,
+  // which may be arrays. Unlike RN's Animated.View, react-spring's animated.View only accepts
+  // plain style objects, so we must flatten before merging with the spring animation values.
+  const maskStyles = useMemo(() => _extends({}, animation, StyleSheet.flatten(styles == null ? void 0 : styles.mask)), [animation, styles == null ? void 0 : styles.mask]);
+  const stepContainerStyles = useMemo(() => _extends({}, animation, StyleSheet.flatten(styles == null ? void 0 : styles.stepContainer)), [animation, styles == null ? void 0 : styles.stepContainer]);
   const {
     refs,
     floatingStyles,
@@ -124,9 +137,11 @@ const TourComponent = _props => {
         animationType: "none",
         id: id,
         presentationStyle: "overFullScreen",
+        style: styles == null ? void 0 : styles.root,
         testID: testID,
         children: [!((_activeTourStep$hideO = activeTourStep.hideOverlay) != null ? _activeTourStep$hideO : hideOverlay) && !!activeTourStepTarget && /*#__PURE__*/_jsx(animated.View, {
-          style: animation,
+          style: maskStyles,
+          testID: "tour-mask",
           children: /*#__PURE__*/_jsx(TourMaskComponent, {
             activeTourStepTarget: activeTourStepTarget,
             borderRadius: (_activeTourStep$tourM = activeTourStep.tourMaskBorderRadius) != null ? _activeTourStep$tourM : tourMaskBorderRadius,
@@ -137,12 +152,13 @@ const TourComponent = _props => {
           collapsable: false,
           style: floatingStyles,
           children: /*#__PURE__*/_jsxs(animated.View, {
-            style: animation,
+            style: stepContainerStyles,
+            testID: "tour-step-container",
             children: [/*#__PURE__*/_jsx(RenderedTourStepArrow, {
               ref: tourStepArrowRef,
               arrow: arrow,
               placement: placement,
-              style: activeTourStep == null ? void 0 : activeTourStep.arrowStyle
+              style: styles == null ? void 0 : styles.stepArrow
             }), /*#__PURE__*/_jsx(RenderedTourStep, _extends({}, activeTourStep))]
           })
         })]

package/esm/tour/TourStep.js

@@ -1,3 +1,6 @@
+const _excluded = ["id", "children"];
+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, { useCallback } from 'react';
 import { View } from 'react-native';
 import { useTourContext } from '@coinbase/cds-common/tour/TourContext';
@@ -9,17 +12,19 @@ import { jsx as _jsx } from "react/jsx-runtime";
  */
 export const TourStep = _ref => {
   let {
-    id,
-    children
-  } = _ref;
+      id,
+      children
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const {
     activeTourStep,
     setActiveTourStepTarget
   } = useTourContext();
   const refCallback = useCallback(ref => (activeTourStep == null ? void 0 : activeTourStep.id) === id && ref && setActiveTourStepTarget(ref), [activeTourStep, id, setActiveTourStepTarget]);
-  return /*#__PURE__*/_jsx(View, {
+  return /*#__PURE__*/_jsx(View, _extends({
     ref: refCallback,
-    collapsable: false,
+    collapsable: false
+  }, props, {
     children: children
-  });
+  }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "8.62.0",
+  "version": "8.66.0",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
@@ -197,9 +197,9 @@
     "react-native-svg": "^14.1.0"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.62.0",
-    "@coinbase/cds-icons": "^5.13.0",
-    "@coinbase/cds-illustrations": "^4.36.0",
+    "@coinbase/cds-common": "^8.66.0",
+    "@coinbase/cds-icons": "^5.15.0",
+    "@coinbase/cds-illustrations": "^4.38.0",
     "@coinbase/cds-lottie-files": "^3.3.4",
     "@coinbase/cds-utils": "^2.3.5",
     "@floating-ui/react-native": "^0.10.5",