@coinbase/cds-mobile 8.45.0 → 8.46.0

package/CHANGELOG.md

@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.46.0 (2/12/2026 PST)
+
+#### 🚀 Updates
+
+- Add open/close visibility delays to Tooltip. [[#234](https://github.com/coinbase/cds/pull/234)]
+
 ## 8.45.0 (2/12/2026 PST)
 
 #### 🚀 Updates

package/dts/overlays/tooltip/Tooltip.d.ts

@@ -17,6 +17,8 @@ export declare const Tooltip: React.MemoExoticComponent<
     visible,
     invertColorScheme,
     elevation,
+    openDelay,
+    closeDelay,
   }: TooltipProps) => import('react/jsx-runtime').JSX.Element
 >;
 //# sourceMappingURL=Tooltip.d.ts.map

package/dts/overlays/tooltip/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/overlays/tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiE,MAAM,OAAO,CAAC;AAMtF,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAGlE,eAAO,MAAM,OAAO,8QAiBf,YAAY,6CA0GhB,CAAC"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/overlays/tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4E,MAAM,OAAO,CAAC;AAMjG,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAGlE,eAAO,MAAM,OAAO,qSAmBf,YAAY,6CAsJhB,CAAC"}

package/dts/overlays/tooltip/TooltipProps.d.ts

@@ -25,6 +25,14 @@ export type TooltipBaseProps = SharedProps &
      * @default true
      */
     visible?: boolean;
+    /**
+     * Delay (in ms) before showing the tooltip after press.
+     */
+    openDelay?: number;
+    /**
+     * Delay (in ms) before hiding the tooltip after dismiss.
+     */
+    closeDelay?: number;
     /** Invert the theme's activeColorScheme for this component
      * @default true
      */

package/dts/overlays/tooltip/TooltipProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipProps.d.ts","sourceRoot":"","sources":["../../../src/overlays/tooltip/TooltipProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,KAAK,EACV,oBAAoB,EACpB,cAAc,EACd,wBAAwB,EACxB,WAAW,EACZ,MAAM,4BAA4B,CAAC;AAEpC,MAAM,MAAM,gBAAgB,GAAG,OAAO,CAAC,oBAAoB,EAAE,QAAQ,GAAG,KAAK,CAAC,CAAC;AAE/E,MAAM,MAAM,gBAAgB,GAAG,WAAW,GACxC,cAAc,GAAG;IACf,sDAAsD;IACtD,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC;IAC7B,gDAAgD;IAChD,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;;OAIG;IACH,GAAG,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IACtB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,iIAAiI;IACjI,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,wDAAwD;IACxD,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B;;;;;OAKG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,wBAAwB,CAAC,oBAAoB,CAAC,CAAC;IACpE;;;;OAIG;IACH,4BAA4B,CAAC,EAAE,wBAAwB,CAAC,oBAAoB,CAAC,CAAC;IAC9E;;;;OAIG;IACH,2BAA2B,CAAC,EAAE,wBAAwB,CAAC,mBAAmB,CAAC,CAAC;IAC5E;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,wBAAwB,CAAC,mBAAmB,CAAC,CAAC;CACnE,CAAC;AAEJ,MAAM,MAAM,YAAY,GAAG,gBAAgB,CAAC;AAE5C,kEAAkE;AAClE,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,wBAAwB,GACzD,IAAI,CACF,YAAY,EACV,SAAS,GACT,WAAW,GACX,KAAK,GACL,QAAQ,GACR,yBAAyB,GACzB,mBAAmB,GACnB,WAAW,CACd,GAAG;IACF,aAAa,EAAE,aAAa,GAAG,SAAS,CAAC;IACzC,OAAO,EAAE,QAAQ,CAAC,KAAK,CAAC;IACxB,SAAS,EAAE,QAAQ,CAAC,kBAAkB,CAAC;IACvC,UAAU,EAAE,QAAQ,CAAC,KAAK,CAAC;IAC3B,qBAAqB,CAAC,EAAE,SAAS,CAAC,uBAAuB,CAAC,CAAC;IAC3D,kBAAkB,CAAC,EAAE,SAAS,CAAC,oBAAoB,CAAC,CAAC;CACtD,CAAC;AAEJ,MAAM,MAAM,wBAAwB,GAAG;IACrC,aAAa,EAAE,aAAa,GAAG,SAAS,CAAC;IACzC,aAAa,EAAE,eAAe,CAAC;CAChC,GAAG,IAAI,CAAC,YAAY,EAAE,WAAW,GAAG,yBAAyB,CAAC,CAAC"}
+{"version":3,"file":"TooltipProps.d.ts","sourceRoot":"","sources":["../../../src/overlays/tooltip/TooltipProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,KAAK,EACV,oBAAoB,EACpB,cAAc,EACd,wBAAwB,EACxB,WAAW,EACZ,MAAM,4BAA4B,CAAC;AAEpC,MAAM,MAAM,gBAAgB,GAAG,OAAO,CAAC,oBAAoB,EAAE,QAAQ,GAAG,KAAK,CAAC,CAAC;AAE/E,MAAM,MAAM,gBAAgB,GAAG,WAAW,GACxC,cAAc,GAAG;IACf,sDAAsD;IACtD,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC;IAC7B,gDAAgD;IAChD,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;;OAIG;IACH,GAAG,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IACtB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,iIAAiI;IACjI,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,wDAAwD;IACxD,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B;;;;;OAKG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,wBAAwB,CAAC,oBAAoB,CAAC,CAAC;IACpE;;;;OAIG;IACH,4BAA4B,CAAC,EAAE,wBAAwB,CAAC,oBAAoB,CAAC,CAAC;IAC9E;;;;OAIG;IACH,2BAA2B,CAAC,EAAE,wBAAwB,CAAC,mBAAmB,CAAC,CAAC;IAC5E;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,wBAAwB,CAAC,mBAAmB,CAAC,CAAC;CACnE,CAAC;AAEJ,MAAM,MAAM,YAAY,GAAG,gBAAgB,CAAC;AAE5C,kEAAkE;AAClE,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,wBAAwB,GACzD,IAAI,CACF,YAAY,EACV,SAAS,GACT,WAAW,GACX,KAAK,GACL,QAAQ,GACR,yBAAyB,GACzB,mBAAmB,GACnB,WAAW,CACd,GAAG;IACF,aAAa,EAAE,aAAa,GAAG,SAAS,CAAC;IACzC,OAAO,EAAE,QAAQ,CAAC,KAAK,CAAC;IACxB,SAAS,EAAE,QAAQ,CAAC,kBAAkB,CAAC;IACvC,UAAU,EAAE,QAAQ,CAAC,KAAK,CAAC;IAC3B,qBAAqB,CAAC,EAAE,SAAS,CAAC,uBAAuB,CAAC,CAAC;IAC3D,kBAAkB,CAAC,EAAE,SAAS,CAAC,oBAAoB,CAAC,CAAC;CACtD,CAAC;AAEJ,MAAM,MAAM,wBAAwB,GAAG;IACrC,aAAa,EAAE,aAAa,GAAG,SAAS,CAAC;IACzC,aAAa,EAAE,eAAe,CAAC;CAChC,GAAG,IAAI,CAAC,YAAY,EAAE,WAAW,GAAG,yBAAyB,CAAC,CAAC"}

package/esm/overlays/__stories__/TooltipV2.stories.js

@@ -14,6 +14,55 @@ const bottomTextSubject = 'BOTTOM';
 const customTextSubject = 'CUSTOM';
 const shortText = 'This is the short text.';
 const longText = 'This is the really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really long text.';
+const DelayVariations = () => {
+  return /*#__PURE__*/_jsx(Example, {
+    title: "Delay Variations",
+    children: /*#__PURE__*/_jsxs(VStack, {
+      background: "bgAlternate",
+      gap: 4,
+      paddingY: 2,
+      children: [/*#__PURE__*/_jsxs(HStack, {
+        justifyContent: "space-evenly",
+        children: [/*#__PURE__*/_jsx(Tooltip, {
+          closeDelay: 0,
+          content: "Opens after 400ms",
+          openDelay: 400,
+          children: /*#__PURE__*/_jsx(Text, {
+            font: "label2",
+            children: "Open delay 400ms"
+          })
+        }), /*#__PURE__*/_jsx(Tooltip, {
+          closeDelay: 200,
+          content: "Closes after 200ms",
+          openDelay: 0,
+          children: /*#__PURE__*/_jsx(Text, {
+            font: "label2",
+            children: "Close delay 200ms"
+          })
+        })]
+      }), /*#__PURE__*/_jsxs(HStack, {
+        justifyContent: "space-evenly",
+        children: [/*#__PURE__*/_jsx(Tooltip, {
+          closeDelay: 150,
+          content: "Open 300 / Close 150",
+          openDelay: 300,
+          children: /*#__PURE__*/_jsx(Text, {
+            font: "label2",
+            children: "Open 300 / Close 150"
+          })
+        }), /*#__PURE__*/_jsx(Tooltip, {
+          closeDelay: 300,
+          content: "Open 500 / Close 300",
+          openDelay: 500,
+          children: /*#__PURE__*/_jsx(Text, {
+            font: "label2",
+            children: "Open 500 / Close 300"
+          })
+        })]
+      })]
+    })
+  });
+};
 const ToolTipWithA11y = _ref => {
   let {
     tooltipText,
@@ -226,7 +275,7 @@ const RNModalTest = () => {
   const [yShiftByStatusBarHeight, setYShiftByStatusBarHeight] = useState(true);
   const toggleOnShiftMeasurementByStatusBar = useCallback(() => setYShiftByStatusBarHeight(true), []);
   const toggleOffShiftMeasurementByStatusBar = useCallback(() => setYShiftByStatusBarHeight(false), []);
-  return /*#__PURE__*/_jsxs(_Fragment, {
+  return /*#__PURE__*/_jsxs(Example, {
     children: [/*#__PURE__*/_jsx(Button, {
       onPress: setVisibleToOn,
       children: "Open RN Modal Test 2"
@@ -284,14 +333,17 @@ const DisabledTest = () => {
   });
 };
 const TooltipV2Screen = () => {
-  return /*#__PURE__*/_jsxs(ExampleScreen, {
-    children: [/*#__PURE__*/_jsx(CDSModalTest, {}), /*#__PURE__*/_jsx(RNModalTest, {}), /*#__PURE__*/_jsx(Content, {
-      title: "Short Text Tooltip",
-      tooltipText: shortText
-    }), /*#__PURE__*/_jsx(Content, {
-      title: "Long Text Tooltip",
-      tooltipText: longText
-    }), /*#__PURE__*/_jsx(DisabledTest, {})]
+  return /*#__PURE__*/_jsx(ExampleScreen, {
+    children: /*#__PURE__*/_jsxs(VStack, {
+      gap: 2,
+      children: [/*#__PURE__*/_jsx(CDSModalTest, {}), /*#__PURE__*/_jsx(RNModalTest, {}), /*#__PURE__*/_jsx(DelayVariations, {}), /*#__PURE__*/_jsx(Content, {
+        title: "Short Text Tooltip",
+        tooltipText: shortText
+      }), /*#__PURE__*/_jsx(Content, {
+        title: "Long Text Tooltip",
+        tooltipText: longText
+      }), /*#__PURE__*/_jsx(DisabledTest, {})]
+    })
   });
 };
 export default TooltipV2Screen;

package/esm/overlays/tooltip/Tooltip.js

@@ -1,5 +1,5 @@
 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, { Fragment, memo, useCallback, useMemo, useRef, useState } from 'react';
+import React, { Fragment, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Modal as RNModal, TouchableOpacity, View } from 'react-native';
 import { InvertedThemeProvider } from '../../system/ThemeProvider';
 import { InternalTooltip } from './InternalTooltip';
@@ -21,12 +21,16 @@ export const Tooltip = /*#__PURE__*/memo(_ref => {
     accessibilityHintForContent,
     visible,
     invertColorScheme = true,
-    elevation
+    elevation,
+    openDelay,
+    closeDelay
   } = _ref;
   const subjectRef = useRef(null);
   const [isOpen, setIsOpen] = useState(false);
   const isVisible = visible !== false && isOpen;
   const [subjectLayout, setSubjectLayout] = useState();
+  const openTimeoutRef = useRef(null);
+  const closeTimeoutRef = useRef(null);
   const WrapperComponent = invertColorScheme ? InvertedThemeProvider : Fragment;
   const {
     opacity,
@@ -34,14 +38,36 @@ export const Tooltip = /*#__PURE__*/memo(_ref => {
     animateIn,
     animateOut
   } = useTooltipAnimation(placement);
+  const clearOpenTimeout = useCallback(() => {
+    if (openTimeoutRef.current) {
+      clearTimeout(openTimeoutRef.current);
+      openTimeoutRef.current = null;
+    }
+  }, []);
+  const clearCloseTimeout = useCallback(() => {
+    if (closeTimeoutRef.current) {
+      clearTimeout(closeTimeoutRef.current);
+      closeTimeoutRef.current = null;
+    }
+  }, []);
   const handleRequestClose = useCallback(() => {
-    animateOut.start(() => {
-      setIsOpen(false);
-      onCloseTooltip == null || onCloseTooltip();
-    });
-  }, [animateOut, onCloseTooltip]);
+    clearOpenTimeout();
+    clearCloseTimeout();
+    const closeTooltip = () => {
+      animateOut.start(() => {
+        setIsOpen(false);
+        onCloseTooltip == null || onCloseTooltip();
+      });
+    };
+    if (closeDelay && closeDelay > 0) {
+      closeTimeoutRef.current = setTimeout(closeTooltip, closeDelay);
+    } else {
+      closeTooltip();
+    }
+  }, [animateOut, clearCloseTimeout, clearOpenTimeout, closeDelay, onCloseTooltip]);
   const handlePressSubject = useCallback(() => {
     var _subjectRef$current;
+    clearCloseTimeout();
     (_subjectRef$current = subjectRef.current) == null || _subjectRef$current.measure((x, y, width, height, pageOffsetX, pageOffsetY) => {
       setSubjectLayout({
         width,
@@ -50,9 +76,17 @@ export const Tooltip = /*#__PURE__*/memo(_ref => {
         pageOffsetY
       });
     });
-    setIsOpen(true);
-    onOpenTooltip == null || onOpenTooltip();
-  }, [onOpenTooltip]);
+    const openTooltip = () => {
+      setIsOpen(true);
+      onOpenTooltip == null || onOpenTooltip();
+    };
+    clearOpenTimeout();
+    if (openDelay && openDelay > 0) {
+      openTimeoutRef.current = setTimeout(openTooltip, openDelay);
+    } else {
+      openTooltip();
+    }
+  }, [clearCloseTimeout, clearOpenTimeout, onOpenTooltip, openDelay]);
 
   // The accessibility props for the trigger component. Trigger component
   // equals the component where when you click on it, it will show the tooltip
@@ -66,6 +100,12 @@ export const Tooltip = /*#__PURE__*/memo(_ref => {
     onAccessibilityEscape: handleRequestClose,
     onAccessibilityTap: handleRequestClose
   }), [content, accessibilityLabelForContent, accessibilityHintForContent, handleRequestClose]);
+  useEffect(() => {
+    return () => {
+      clearOpenTimeout();
+      clearCloseTimeout();
+    };
+  }, [clearCloseTimeout, clearOpenTimeout]);
   return /*#__PURE__*/_jsxs(View, {
     ref: subjectRef,
     collapsable: false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "8.45.0",
+  "version": "8.46.0",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
@@ -198,7 +198,7 @@
     "react-native-svg": "^14.1.0"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.45.0",
+    "@coinbase/cds-common": "^8.46.0",
     "@coinbase/cds-icons": "^5.11.0",
     "@coinbase/cds-illustrations": "^4.31.0",
     "@coinbase/cds-lottie-files": "^3.3.4",