@coinbase/cds-web 9.6.9 → 9.6.10

package/CHANGELOG.md

@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 9.6.10 (7/22/2026 PST)
+
+#### 🐞 Fixes
+
+- Fix: Remove max-width constraint for ReactNode children of Tooltip. [[#801](https://github.com/coinbase/cds/pull/801)]
+
 ## 9.6.9 (7/22/2026 PST)
 
 #### 🐞 Fixes

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,KAA2D,MAAM,OAAO,CAAC;AAWhF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAQnD,eAAO,MAAM,OAAO,qCAAiB,YAAY,6CA+H/C,CAAC"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/overlays/tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAOhF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAQnD,eAAO,MAAM,OAAO,qCAAiB,YAAY,6CA+H/C,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"TooltipContent.d.ts","sourceRoot":"","sources":["../../../src/overlays/tooltip/TooltipContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAezD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAI1D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAgBzD,MAAM,MAAM,uBAAuB,GAAG,kBAAkB,GACtD,IAAI,CAAC,YAAY,EAAE,UAAU,GAAG,KAAK,GAAG,KAAK,CAAC,CAAC;AAEjD,MAAM,MAAM,mBAAmB,GAAG,uBAAuB,CAAC;AAE1D,eAAO,MAAM,cAAc;;;wMA+E1B,CAAC"}
+{"version":3,"file":"TooltipContent.d.ts","sourceRoot":"","sources":["../../../src/overlays/tooltip/TooltipContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAezD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAI1D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAgBzD,MAAM,MAAM,uBAAuB,GAAG,kBAAkB,GACtD,IAAI,CAAC,YAAY,EAAE,UAAU,GAAG,KAAK,GAAG,KAAK,CAAC,CAAC;AAEjD,MAAM,MAAM,mBAAmB,GAAG,uBAAuB,CAAC;AAE1D,eAAO,MAAM,cAAc;;;wMAmF1B,CAAC"}

package/dts/typography/index.d.ts

@@ -1,11 +1,11 @@
 export * from './Link';
 export * from './Text';
 export * from './TextBody';
-export * from './TextFallback';
 export * from './TextCaption';
 export * from './TextDisplay1';
 export * from './TextDisplay2';
 export * from './TextDisplay3';
+export * from './TextFallback';
 export * from './TextHeadline';
 export * from './TextInherited';
 export * from './TextLabel1';

package/dts/typography/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/typography/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/typography/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC"}

package/esm/cells/ListCellFallback.js

@@ -48,10 +48,10 @@ export const ListCellFallback = /*#__PURE__*/memo(function ListCellFallback(_pro
     }
     return /*#__PURE__*/_jsx(TextFallback, {
       "aria-hidden": true,
+      percentage: true,
       className: classNames === null || classNames === void 0 ? void 0 : classNames.helperText,
       disableRandomRectWidth: disableRandomRectWidth,
       font: "body",
-      percentage: true,
       rectWidthVariant: getRectWidthVariant(rectWidthVariant, 4),
       style: styles === null || styles === void 0 ? void 0 : styles.helperText,
       testID: "list-cell-fallback-helper-text",
@@ -67,20 +67,20 @@ export const ListCellFallback = /*#__PURE__*/memo(function ListCellFallback(_pro
       flexShrink: 0,
       children: [!!detail && /*#__PURE__*/_jsx(TextFallback, {
         "aria-hidden": true,
+        percentage: true,
         className: classNames === null || classNames === void 0 ? void 0 : classNames.detail,
         disableRandomRectWidth: disableRandomRectWidth,
         font: "body",
-        percentage: true,
         rectWidthVariant: getRectWidthVariant(rectWidthVariant, 0),
         style: styles === null || styles === void 0 ? void 0 : styles.detail,
         testID: "list-cell-fallback-detail",
         width: 60
       }), !!subdetail && /*#__PURE__*/_jsx(TextFallback, {
         "aria-hidden": true,
+        percentage: true,
         className: classNames === null || classNames === void 0 ? void 0 : classNames.subdetail,
         disableRandomRectWidth: disableRandomRectWidth,
         font: spacingVariant === 'condensed' ? 'label2' : 'body',
-        percentage: true,
         rectWidthVariant: getRectWidthVariant(rectWidthVariant, 1),
         style: styles === null || styles === void 0 ? void 0 : styles.subdetail,
         testID: "list-cell-fallback-subdetail",
@@ -94,10 +94,10 @@ export const ListCellFallback = /*#__PURE__*/memo(function ListCellFallback(_pro
     }
     return /*#__PURE__*/_jsx(TextFallback, {
       "aria-hidden": true,
+      percentage: true,
       className: classNames === null || classNames === void 0 ? void 0 : classNames.title,
       disableRandomRectWidth: disableRandomRectWidth,
       font: "headline",
-      percentage: true,
       rectWidthVariant: getRectWidthVariant(rectWidthVariant, 2),
       style: styles === null || styles === void 0 ? void 0 : styles.title,
       testID: "list-cell-fallback-title",
@@ -110,10 +110,10 @@ export const ListCellFallback = /*#__PURE__*/memo(function ListCellFallback(_pro
     }
     return /*#__PURE__*/_jsx(TextFallback, {
       "aria-hidden": true,
+      percentage: true,
       className: classNames === null || classNames === void 0 ? void 0 : classNames.subtitle,
       disableRandomRectWidth: disableRandomRectWidth,
       font: "label1",
-      percentage: true,
       rectWidthVariant: getRectWidthVariant(rectWidthVariant, 2),
       style: styles === null || styles === void 0 ? void 0 : styles.subtitle,
       testID: "list-cell-fallback-subtitle",
@@ -126,10 +126,10 @@ export const ListCellFallback = /*#__PURE__*/memo(function ListCellFallback(_pro
     }
     return /*#__PURE__*/_jsx(TextFallback, {
       "aria-hidden": true,
+      percentage: true,
       className: classNames === null || classNames === void 0 ? void 0 : classNames.description,
       disableRandomRectWidth: disableRandomRectWidth,
       font: spacingVariant === 'condensed' ? 'label2' : 'body',
-      percentage: true,
       rectWidthVariant: getRectWidthVariant(rectWidthVariant, 3),
       style: styles === null || styles === void 0 ? void 0 : styles.description,
       testID: "list-cell-fallback-description",

package/esm/overlays/tooltip/Tooltip.js

@@ -7,7 +7,7 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 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, { cloneElement, memo, useCallback, useMemo, useRef } from 'react';
-import { tooltipMaxWidth, tooltipPaddingX, tooltipPaddingY } from '@coinbase/cds-common/tokens/tooltip';
+import { tooltipPaddingX, tooltipPaddingY } from '@coinbase/cds-common/tokens/tooltip';
 import { useComponentConfig } from '../../hooks/useComponentConfig';
 import { Popover } from '../popover/Popover';
 import { TooltipContent } from './TooltipContent';
@@ -42,7 +42,7 @@ export const Tooltip = /*#__PURE__*/memo(_props => {
       closeDelay,
       background = 'bg',
       borderRadius = 200,
-      maxWidth = tooltipMaxWidth,
+      maxWidth,
       paddingX = tooltipPaddingX,
       paddingY = tooltipPaddingY,
       color = 'fg',

package/esm/overlays/tooltip/TooltipContent.js

@@ -27,7 +27,7 @@ export const TooltipContent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, r
       placement = 'top',
       background = 'bg',
       borderRadius = 200,
-      maxWidth = tooltipMaxWidth,
+      maxWidth,
       paddingX = tooltipPaddingX,
       paddingY = tooltipPaddingY,
       color = 'fg',
@@ -42,6 +42,8 @@ export const TooltipContent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, r
     padding: "var(--space-".concat(gap, ")"),
     zIndex: zIndex !== null && zIndex !== void 0 ? zIndex : zIndexTokens.tooltip
   }), [gap, zIndex]);
+  const isTextContent = typeof content === 'string';
+  const contentMaxWidth = maxWidth !== null && maxWidth !== void 0 ? maxWidth : isTextContent ? tooltipMaxWidth : undefined;
   const motionProps = useMotionProps({
     style: outerStyle,
     enterConfigs: [animateInOpacityConfig, getTranslateConfigByPlacement({
@@ -62,12 +64,13 @@ export const TooltipContent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, r
       "data-testid": testID,
       elevation: elevation,
       id: tooltipId,
-      maxWidth: maxWidth,
+      maxWidth: contentMaxWidth,
       paddingX: paddingX,
       paddingY: paddingY,
-      role: "tooltip"
+      role: "tooltip",
+      width: "max-content"
     }, props), {}, {
-      children: typeof content === 'string' ? /*#__PURE__*/_jsx(Text, {
+      children: isTextContent ? /*#__PURE__*/_jsx(Text, {
         className: textCss,
         color: color,
         font: font,

package/esm/typography/index.js

@@ -1,11 +1,11 @@
 export * from './Link';
 export * from './Text';
 export * from './TextBody';
-export * from './TextFallback';
 export * from './TextCaption';
 export * from './TextDisplay1';
 export * from './TextDisplay2';
 export * from './TextDisplay3';
+export * from './TextFallback';
 export * from './TextHeadline';
 export * from './TextInherited';
 export * from './TextLabel1';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-web",
-  "version": "9.6.9",
+  "version": "9.6.10",
   "description": "Coinbase Design System - Web",
   "repository": {
     "type": "git",
@@ -227,7 +227,7 @@
     "react-dom": "^18.0.0 || ~19.1.2"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^9.6.9",
+    "@coinbase/cds-common": "^9.6.10",
     "@coinbase/cds-icons": "^5.21.0",
     "@coinbase/cds-illustrations": "^4.44.0",
     "@coinbase/cds-lottie-files": "^3.3.4",