@coinbase/cds-web 8.13.2 → 8.13.6

package/CHANGELOG.md

@@ -8,6 +8,26 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.13.6 ((10/3/2025, 01:54 PM PST))
+
+This is an artificial version bump with no new change.
+
+## 8.13.5 (10/3/2025 PST)
+
+#### 🐞 Fixes
+
+- Support custom font in SegmentedTab. [[#65](https://github.com/coinbase/cds/pull/65)]
+
+## 8.13.4 (10/1/2025 PST)
+
+#### 🐞 Fixes
+
+- Fix tour position flickering issue.
+
+## 8.13.3 ((10/1/2025, 03:05 PM PST))
+
+This is an artificial version bump with no new change.
+
 ## 8.13.2 (10/1/2025 PST)
 
 #### 🐞 Fixes

package/dts/tabs/SegmentedTab.d.ts

@@ -1,23 +1,22 @@
 import React from 'react';
 import type { ThemeVars } from '@coinbase/cds-common/core/theme';
 import { type TabValue } from '@coinbase/cds-common/tabs/useTabs';
-import type { SharedProps } from '@coinbase/cds-common/types/SharedProps';
-export type SegmentedTabProps<T extends string = string> = {
-  /**
-   * Text color when the SegmentedTab is active.
-   * @default negativeForeground
-   */
-  activeColor?: ThemeVars.Color;
-  /**
-   * Text color when the SegmentedTab is inactive.
-   * @default foreground
-   */
-  color?: ThemeVars.Color;
-  /** Callback that is fired when the SegmentedTab is clicked. */
-  onClick?: (id: T, event: React.MouseEvent) => void;
-} & TabValue<T> &
-  Omit<React.ComponentProps<'button'>, 'ref'> &
-  SharedProps;
+import { type PressableBaseProps } from '../system/Pressable';
+export type SegmentedTabProps<T extends string = string> = PressableBaseProps &
+  TabValue<T> & {
+    /**
+     * Text color when the SegmentedTab is active.
+     * @default negativeForeground
+     */
+    activeColor?: ThemeVars.Color;
+    /**
+     * Text color when the SegmentedTab is inactive.
+     * @default foreground
+     */
+    color?: ThemeVars.Color;
+    /** Callback that is fired when the SegmentedTab is clicked. */
+    onClick?: (id: T, event: React.MouseEvent) => void;
+  };
 type SegmentedTabComponent = <T extends string = string>(
   props: SegmentedTabProps<T> & {
     ref?: React.ForwardedRef<HTMLButtonElement>;
@@ -25,26 +24,29 @@ type SegmentedTabComponent = <T extends string = string>(
 ) => React.ReactElement;
 declare const SegmentedTabComponent: React.MemoExoticComponent<
   React.ForwardRefExoticComponent<
-    {
-      /**
-       * Text color when the SegmentedTab is active.
-       * @default negativeForeground
-       */
-      activeColor?: ThemeVars.Color;
-      /**
-       * Text color when the SegmentedTab is inactive.
-       * @default foreground
-       */
-      color?: ThemeVars.Color;
-      /** Callback that is fired when the SegmentedTab is clicked. */
-      onClick?: ((id: string, event: React.MouseEvent) => void) | undefined;
-    } & TabValue<string> &
-      Omit<
-        React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>,
-        'ref'
+    import('@coinbase/cds-common').ComponentEventHandlerProps & {
+      noScaleOnPress?: boolean;
+      focusable?: boolean;
+    } & Omit<
+        import('../system').InteractableBaseProps,
+        | 'focusable'
+        | keyof import('@coinbase/cds-common').ComponentEventHandlerProps
+        | 'noScaleOnPress'
       > &
-      SharedProps &
-      React.RefAttributes<HTMLButtonElement>
+      TabValue<string> & {
+        /**
+         * Text color when the SegmentedTab is active.
+         * @default negativeForeground
+         */
+        activeColor?: ThemeVars.Color;
+        /**
+         * Text color when the SegmentedTab is inactive.
+         * @default foreground
+         */
+        color?: ThemeVars.Color;
+        /** Callback that is fired when the SegmentedTab is clicked. */
+        onClick?: ((id: string, event: React.MouseEvent) => void) | undefined;
+      } & React.RefAttributes<HTMLButtonElement>
   >
 >;
 export declare const SegmentedTab: SegmentedTabComponent;

package/dts/tabs/SegmentedTab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedTab.d.ts","sourceRoot":"","sources":["../../src/tabs/SegmentedTab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiD,MAAM,OAAO,CAAC;AACtE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAEjE,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAClE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAuC1E,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI;IACzD;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IAC9B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IACxB,+DAA+D;IAC/D,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CACpD,GAAG,QAAQ,CAAC,CAAC,CAAC,GACb,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,GAC3C,WAAW,CAAC;AAMd,KAAK,qBAAqB,GAAG,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EACrD,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAA;CAAE,KAC1E,KAAK,CAAC,YAAY,CAAC;AAExB,QAAA,MAAM,qBAAqB;IAxBzB;;;OAGG;kBACW,SAAS,CAAC,KAAK;IAC7B;;;OAGG;YACK,SAAS,CAAC,KAAK;IACvB,+DAA+D;mCACtC,KAAK,CAAC,UAAU,KAAK,IAAI;sLAkFnD,CAAC;AAIF,eAAO,MAAM,YAAY,EAA4B,qBAAqB,CAAC"}
+{"version":3,"file":"SegmentedTab.d.ts","sourceRoot":"","sources":["../../src/tabs/SegmentedTab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiD,MAAM,OAAO,CAAC;AACtE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAEjE,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAOlE,OAAO,EAAa,KAAK,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAkCzE,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,kBAAkB,GAC3E,QAAQ,CAAC,CAAC,CAAC,GAAG;IACZ;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IAC9B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IACxB,+DAA+D;IAC/D,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CACpD,CAAC;AAMJ,KAAK,qBAAqB,GAAG,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EACrD,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAA;CAAE,KAC1E,KAAK,CAAC,YAAY,CAAC;AAExB,QAAA,MAAM,qBAAqB;;;;IAtBvB;;;OAGG;kBACW,SAAS,CAAC,KAAK;IAC7B;;;OAGG;YACK,SAAS,CAAC,KAAK;IACvB,+DAA+D;mCACtC,KAAK,CAAC,UAAU,KAAK,IAAI;4CAuGrD,CAAC;AAIF,eAAO,MAAM,YAAY,EAA4B,qBAAqB,CAAC"}

package/dts/tour/Tour.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tour.d.ts","sourceRoot":"","sources":["../../src/tour/Tour.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAQ9D,OAAO,KAAK,EACV,WAAW,EACX,iBAAiB,EACjB,sBAAsB,EAEvB,MAAM,mCAAmC,CAAC;AAE3C,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qDAAqD,CAAC;AACpG,OAAO,EAGL,KAAK,oBAAoB,EAGzB,KAAK,aAAa,EAElB,KAAK,YAAY,EAElB,MAAM,wBAAwB,CAAC;AA0BhC,MAAM,MAAM,sBAAsB,GAAG;IACnC;;OAEG;IACH,wBAAwB,EAAE,IAAI,CAAC;IAC/B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAAC,CAAC;AAEjE,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,WAAW,CAAC,CAAC,CAAC,GAAG;IAClE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC;;;OAGG;IACH,sBAAsB,CAAC,EAAE,sBAAsB,CAAC;IAChD;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B;;;OAGG;IACH,qBAAqB,CAAC,EAAE,oBAAoB,CAAC;IAC7C;;OAEG;IACH,aAAa,CAAC,EAAE,YAAY,CAAC;IAC7B;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAClC;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvC;;OAEG;IACH,aAAa,CAAC,EAAE,iBAAiB,CAAC;IAClC;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B,GAAG,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,GAAG,yBAAyB,GAAG,IAAI,CAAC,GACzF,WAAW,CAAC;AAsDd,MAAM,MAAM,MAAM,GAAG,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;AAkIzF,eAAO,MAAM,IAAI,EAAoB,MAAM,CAAC"}
+{"version":3,"file":"Tour.d.ts","sourceRoot":"","sources":["../../src/tour/Tour.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAM9D,OAAO,KAAK,EACV,WAAW,EACX,iBAAiB,EACjB,sBAAsB,EAEvB,MAAM,mCAAmC,CAAC;AAE3C,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qDAAqD,CAAC;AACpG,OAAO,EAGL,KAAK,oBAAoB,EAGzB,KAAK,aAAa,EAElB,KAAK,YAAY,EAElB,MAAM,wBAAwB,CAAC;AA0BhC,MAAM,MAAM,sBAAsB,GAAG;IACnC;;OAEG;IACH,wBAAwB,EAAE,IAAI,CAAC;IAC/B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAAC,CAAC;AAEjE,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,WAAW,CAAC,CAAC,CAAC,GAAG;IAClE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC;;;OAGG;IACH,sBAAsB,CAAC,EAAE,sBAAsB,CAAC;IAChD;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B;;;OAGG;IACH,qBAAqB,CAAC,EAAE,oBAAoB,CAAC;IAC7C;;OAEG;IACH,aAAa,CAAC,EAAE,YAAY,CAAC;IAC7B;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAClC;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvC;;OAEG;IACH,aAAa,CAAC,EAAE,iBAAiB,CAAC;IAClC;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B,GAAG,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,GAAG,yBAAyB,GAAG,IAAI,CAAC,GACzF,WAAW,CAAC;AAsDd,MAAM,MAAM,MAAM,GAAG,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;AA8KzF,eAAO,MAAM,IAAI,EAAoB,MAAM,CAAC"}

package/esm/tabs/SegmentedTab.js

@@ -1,4 +1,4 @@
-const _excluded = ["id", "label", "disabled", "onClick", "color", "activeColor", "className", "testID"];
+const _excluded = ["id", "label", "disabled", "onClick", "color", "activeColor", "className", "testID", "font", "fontFamily", "fontSize", "fontWeight", "lineHeight", "textAlign", "textTransform"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -11,6 +11,7 @@ import { useTabsContext } from '@coinbase/cds-common/tabs/TabsContext';
 import { m as motion } from 'framer-motion';
 import { cx } from '../cx';
 import { Box } from '../layout/Box';
+import { Pressable } from '../system/Pressable';
 import { Text } from '../typography/Text';
 import { tabsTransitionConfig } from './Tabs';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -28,7 +29,14 @@ const SegmentedTabComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, r
       color = 'fg',
       activeColor = 'fgInverse',
       className,
-      testID
+      testID,
+      font = 'headline',
+      fontFamily,
+      fontSize,
+      fontWeight,
+      lineHeight,
+      textAlign,
+      textTransform
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   const {
@@ -49,15 +57,22 @@ const SegmentedTabComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, r
     transition: tabsTransitionConfig,
     initial: false
   }), [activeColor, color, isActive]);
-  return /*#__PURE__*/_jsx("button", _objectSpread(_objectSpread({
+  return /*#__PURE__*/_jsx(Pressable, _objectSpread(_objectSpread({
     ref: ref,
     "aria-checked": isActive,
     className: cx(insetFocusRingCss, buttonCss, isDisabled && buttonDisabledCss, disabledProp && !allTabsDisabled && disabledCss, className),
     "data-testid": testID,
     disabled: isDisabled,
+    font: font,
+    fontFamily: fontFamily,
+    fontSize: fontSize,
+    fontWeight: fontWeight,
     id: id,
+    lineHeight: lineHeight,
     onClick: handlePress,
     role: "radio",
+    textAlign: textAlign,
+    textTransform: textTransform,
     type: "button"
   }, props), {}, {
     children: /*#__PURE__*/_jsx(Box, {
@@ -66,7 +81,13 @@ const SegmentedTabComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, r
       paddingX: 2,
       paddingY: 1,
       children: typeof label === 'string' ? /*#__PURE__*/_jsx(MotionText, _objectSpread(_objectSpread({
-        font: "headline"
+        font: font,
+        fontFamily: fontFamily,
+        fontSize: fontSize,
+        fontWeight: fontWeight,
+        lineHeight: lineHeight,
+        textAlign: textAlign,
+        textTransform: textTransform
       }, motionProps), {}, {
         children: label
       })) : label

package/esm/tour/Tour.js

@@ -4,9 +4,7 @@ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import React, { useCallback, useEffect, useRef } from 'react';
-import { useRefMap } from '@coinbase/cds-common/hooks/useRefMap';
 import { OverlayContentContext } from '@coinbase/cds-common/overlays/OverlayContentContext';
-import { RefMapContext } from '@coinbase/cds-common/system/RefMapContext';
 import { TourContext } from '@coinbase/cds-common/tour/TourContext';
 import { useTour } from '@coinbase/cds-common/tour/useTour';
 import { arrow as arrowMiddleware, autoPlacement, autoUpdate, offset, shift, useFloating } from '@floating-ui/react-dom';
@@ -70,6 +68,8 @@ const scrollIntoView = async (element, scrollOptions) => {
   });
   await waitForScroll();
 };
+const defaultTourStepOffset = 24;
+const defaultTourStepShiftPadding = 32;
 const TourComponent = _ref => {
   var _activeTourStep$Arrow, _activeTourStep$hideO, _activeTourStep$tourM, _activeTourStep$tourM2;
   let {
@@ -80,7 +80,7 @@ const TourComponent = _ref => {
     TourMaskComponent = DefaultTourMask,
     TourStepArrowComponent = DefaultTourStepArrow,
     hideOverlay,
-    tourStepOffset = 24,
+    tourStepOffset = defaultTourStepOffset,
     tourStepShift,
     tourStepAutoPlacement,
     tourMaskPadding,
@@ -93,12 +93,20 @@ const TourComponent = _ref => {
     id,
     testID
   } = _ref;
-  const refMap = useRefMap();
   const tourStepArrowRef = useRef(null);
   const RenderedTourStep = activeTourStep === null || activeTourStep === void 0 ? void 0 : activeTourStep.Component;
   const RenderedTourStepArrow = (_activeTourStep$Arrow = activeTourStep === null || activeTourStep === void 0 ? void 0 : activeTourStep.ArrowComponent) !== null && _activeTourStep$Arrow !== void 0 ? _activeTourStep$Arrow : TourStepArrowComponent;
-  const activeTourStepTarget = activeTourStep ? refMap.getRef(activeTourStep.id) : null;
-  const defaultTourStepShiftPadding = 32;
+
+  // This state is used to store the active tour step target element.
+  // const [activeTourStepTarget, setActiveTourStepTarget] = useState<HTMLElement | null>(null);
+
+  const blockScroll = useScrollBlocker();
+  const [animation, animationApi] = useSpring(() => ({
+    from: {
+      opacity: 0
+    },
+    config: springConfig.slow
+  }), []);
   const {
     refs,
     floatingStyles,
@@ -114,88 +122,110 @@ const TourComponent = _ref => {
     })],
     whileElementsMounted: autoUpdate
   });
-  const [animation, animationApi] = useSpring(() => ({
-    from: {
-      opacity: 0
-    },
-    config: springConfig.slow
-  }), []);
   const handleChange = useCallback(tourStep => {
-    // If the opacity is already 0, animating it to 0 does not trigger `onRest`
-    if (animation.opacity.get() === 0) return onChange(tourStep);
     void animationApi.start({
       to: {
         opacity: 0
       },
       config: springConfig.stiff,
-      onRest: () => onChange(tourStep)
+      onResolve: () => onChange(tourStep)
     });
-  }, [animation.opacity, animationApi, onChange]);
-  const revealTourStep = useCallback(async () => {
-    var _activeTourStep$scrol;
-    if (!disableAutoScroll && !(activeTourStep !== null && activeTourStep !== void 0 && activeTourStep.disableAutoScroll)) await scrollIntoView(activeTourStepTarget, (_activeTourStep$scrol = activeTourStep === null || activeTourStep === void 0 ? void 0 : activeTourStep.scrollOptions) !== null && _activeTourStep$scrol !== void 0 ? _activeTourStep$scrol : scrollOptions);
-    refs.setReference(activeTourStepTarget);
-    void animationApi.start({
-      to: {
-        opacity: 1
-      },
-      config: springConfig.slow
-    });
-  }, [activeTourStep, activeTourStepTarget, refs, animationApi, disableAutoScroll, scrollOptions]);
+  }, [animationApi, onChange]);
   const api = useTour({
     steps,
     activeTourStep,
     onChange: handleChange
   });
-  const blockScroll = useScrollBlocker();
-  useEffect(() => {
-    if (!activeTourStep) return;
-    blockScroll(true);
+  const {
+    activeTourStepTarget,
+    setActiveTourStepTarget
+  } = api;
+
+  // Component Lifecycle & Side Effects
+  // ---------------------------------------------------------------------------
+  // This component's visual side effects (scrolling and animations) are driven
+  // by a single callback, `handleSetActiveTourStepTarget`.
+  //
+  // This function is called from the `TourStep` component's ref callback
+  // whenever the active step changes. Because the ref callback is tied to the
+  // lifecycle of the `TourStep`, it reliably fires whenever a new step becomes
+  // active, regardless of whether the change was triggered internally (by a
+  // "Next" button) or externally (by a direct prop change).
+  //
+  // This centralizes the logic for revealing a step: we get the target element,
+  // scroll it into view, and then kick off the fade-in animation, all in one
+  // sequential, event-driven flow.
+
+  const handleActiveTourStepTargetChange = useCallback(target => {
+    refs.setReference(target);
+    setActiveTourStepTarget(target);
+    const revealTourStep = async () => {
+      // Scroll the new target into view.
+      if (!disableAutoScroll && !(activeTourStep !== null && activeTourStep !== void 0 && activeTourStep.disableAutoScroll)) {
+        var _activeTourStep$scrol;
+        await scrollIntoView(target, (_activeTourStep$scrol = activeTourStep === null || activeTourStep === void 0 ? void 0 : activeTourStep.scrollOptions) !== null && _activeTourStep$scrol !== void 0 ? _activeTourStep$scrol : scrollOptions);
+      }
+      void animationApi.start({
+        to: {
+          opacity: 1
+        },
+        config: springConfig.slow
+      });
+    };
     void revealTourStep();
-    return () => blockScroll(false);
-  }, [activeTourStep, blockScroll, revealTourStep]);
+  }, [refs, setActiveTourStepTarget, disableAutoScroll, activeTourStep === null || activeTourStep === void 0 ? void 0 : activeTourStep.disableAutoScroll, activeTourStep === null || activeTourStep === void 0 ? void 0 : activeTourStep.scrollOptions, animationApi, scrollOptions]);
+
+  // Manages scroll locking for the tour's duration. `useEffect` is used to
+  // guarantee that scroll is re-enabled when the tour is closed or unmounted.
+  useEffect(() => {
+    if (activeTourStep !== null && activeTourStep !== void 0 && activeTourStep.id) {
+      blockScroll(true);
+    }
+    return () => {
+      blockScroll(false);
+    };
+  }, [activeTourStep, animationApi, blockScroll, disableAutoScroll, scrollOptions]);
   return /*#__PURE__*/_jsx(OverlayContentContext.Provider, {
     value: overlayContentContextValue,
-    children: /*#__PURE__*/_jsx(RefMapContext.Provider, {
-      value: refMap,
-      children: /*#__PURE__*/_jsxs(TourContext.Provider, {
-        value: api,
-        children: [children, !!RenderedTourStep && /*#__PURE__*/_jsx(Portal, {
-          containerId: modalContainerId,
-          disablePortal: disablePortal,
-          children: /*#__PURE__*/_jsxs("div", {
-            "aria-label": accessibilityLabel,
-            "aria-labelledby": accessibilityLabelledBy,
-            "aria-modal": "true",
-            className: containerCss,
-            "data-testid": testID,
-            id: id,
-            role: "dialog",
-            children: [!((_activeTourStep$hideO = activeTourStep.hideOverlay) !== null && _activeTourStep$hideO !== void 0 ? _activeTourStep$hideO : hideOverlay) && activeTourStepTarget && /*#__PURE__*/_jsx(animated.div, {
-              style: animation,
-              children: /*#__PURE__*/_jsx(TourMaskComponent, {
-                activeTourStepTargetRect: activeTourStepTarget.getBoundingClientRect(),
-                borderRadius: (_activeTourStep$tourM = activeTourStep.tourMaskBorderRadius) !== null && _activeTourStep$tourM !== void 0 ? _activeTourStep$tourM : tourMaskBorderRadius,
-                padding: (_activeTourStep$tourM2 = activeTourStep.tourMaskPadding) !== null && _activeTourStep$tourM2 !== void 0 ? _activeTourStep$tourM2 : tourMaskPadding
-              })
-            }), /*#__PURE__*/_jsx("div", {
-              ref: refs.setFloating,
-              style: floatingStyles,
-              children: /*#__PURE__*/_jsx(FocusTrap, {
-                children: /*#__PURE__*/_jsxs(animated.div, {
-                  style: animation,
-                  children: [/*#__PURE__*/_jsx(RenderedTourStepArrow, {
-                    ref: tourStepArrowRef,
-                    arrow: arrow,
-                    placement: placement,
-                    style: activeTourStep === null || activeTourStep === void 0 ? void 0 : activeTourStep.arrowStyle
-                  }), /*#__PURE__*/_jsx(RenderedTourStep, _objectSpread({}, activeTourStep))]
-                })
+    children: /*#__PURE__*/_jsxs(TourContext.Provider, {
+      value: _objectSpread(_objectSpread({}, api), {}, {
+        setActiveTourStepTarget: handleActiveTourStepTargetChange
+      }),
+      children: [children, !!RenderedTourStep && /*#__PURE__*/_jsx(Portal, {
+        containerId: modalContainerId,
+        disablePortal: disablePortal,
+        children: /*#__PURE__*/_jsxs("div", {
+          "aria-label": accessibilityLabel,
+          "aria-labelledby": accessibilityLabelledBy,
+          "aria-modal": "true",
+          className: containerCss,
+          "data-testid": testID,
+          id: id,
+          role: "dialog",
+          children: [!((_activeTourStep$hideO = activeTourStep.hideOverlay) !== null && _activeTourStep$hideO !== void 0 ? _activeTourStep$hideO : hideOverlay) && activeTourStepTarget && /*#__PURE__*/_jsx(animated.div, {
+            style: animation,
+            children: /*#__PURE__*/_jsx(TourMaskComponent, {
+              activeTourStepTargetRect: activeTourStepTarget.getBoundingClientRect(),
+              borderRadius: (_activeTourStep$tourM = activeTourStep.tourMaskBorderRadius) !== null && _activeTourStep$tourM !== void 0 ? _activeTourStep$tourM : tourMaskBorderRadius,
+              padding: (_activeTourStep$tourM2 = activeTourStep.tourMaskPadding) !== null && _activeTourStep$tourM2 !== void 0 ? _activeTourStep$tourM2 : tourMaskPadding
+            })
+          }), /*#__PURE__*/_jsx("div", {
+            ref: refs.setFloating,
+            style: floatingStyles,
+            children: /*#__PURE__*/_jsx(FocusTrap, {
+              children: /*#__PURE__*/_jsxs(animated.div, {
+                style: animation,
+                children: [/*#__PURE__*/_jsx(RenderedTourStepArrow, {
+                  ref: tourStepArrowRef,
+                  arrow: arrow,
+                  placement: placement,
+                  style: activeTourStep === null || activeTourStep === void 0 ? void 0 : activeTourStep.arrowStyle
+                }), /*#__PURE__*/_jsx(RenderedTourStep, _objectSpread({}, activeTourStep))]
               })
-            })]
-          })
-        })]
-      })
+            })
+          })]
+        })
+      })]
     })
   });
 };

package/esm/tour/TourStep.js

@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import { useRefMapContext } from '@coinbase/cds-common/system/RefMapContext';
+import { useTourContext } from '@coinbase/cds-common/tour/TourContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * The TourStep component wraps the target element (children) that you want to highlight during a step
@@ -12,9 +12,10 @@ export const TourStep = _ref => {
     children
   } = _ref;
   const {
-    registerRef
-  } = useRefMapContext();
-  const refCallback = useCallback(ref => ref && registerRef(id, ref), [registerRef, id]);
+    activeTourStep,
+    setActiveTourStepTarget
+  } = useTourContext();
+  const refCallback = useCallback(ref => (activeTourStep === null || activeTourStep === void 0 ? void 0 : activeTourStep.id) === id && ref && setActiveTourStepTarget(ref), [activeTourStep, id, setActiveTourStepTarget]);
   return /*#__PURE__*/_jsx("div", {
     ref: refCallback,
     children: children

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-web",
-  "version": "8.13.2",
+  "version": "8.13.6",
   "description": "Coinbase Design System - Web",
   "repository": {
     "type": "git",
@@ -147,9 +147,9 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.13.2",
+    "@coinbase/cds-common": "^8.13.6",
     "@coinbase/cds-icons": "^5.4.1",
-    "@coinbase/cds-illustrations": "^4.22.1",
+    "@coinbase/cds-illustrations": "^4.23.0",
     "@coinbase/cds-lottie-files": "^3.3.1",
     "@coinbase/cds-utils": "^2.3.2",
     "@floating-ui/react-dom": "^2.1.1",