@coinbase/cds-web 8.66.1 → 8.66.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dts/tabs/SegmentedTab.d.ts.map +1 -1
  3. package/esm/tabs/SegmentedTab.js +5 -15
  4. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
8
8
 
9
9
  <!-- template-start -->
10
10
 
11
+ ## 8.66.2 (4/28/2026 PST)
12
+
13
+ #### 🐞 Fixes
14
+
15
+ - Fix SegmentedTab color not applied during Suspense transition. [[#650](https://github.com/coinbase/cds/pull/650)]
16
+
11
17
  ## 8.66.1 ((4/27/2026, 12:59 PM PST))
12
18
 
13
19
  This is an artificial version bump with no new change.
package/dts/tabs/SegmentedTab.d.ts.map CHANGED
@@ -1 +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;AAOlE,OAAO,EAAa,KAAK,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAkCzE,MAAM,MAAM,qBAAqB,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI,kBAAkB,GACnF,QAAQ,CAAC,KAAK,CAAC,GAAG;IAChB;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IAC9B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;CACzB,CAAC;AAEJ,MAAM,MAAM,iBAAiB,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI,qBAAqB,CAAC,KAAK,CAAC,GAAG;IAC5F,+DAA+D;IAC/D,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CACxD,CAAC;AAMF,KAAK,qBAAqB,GAAG,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,EACzD,KAAK,EAAE,iBAAiB,CAAC,KAAK,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAA;CAAE,KAC9E,KAAK,CAAC,YAAY,CAAC;AAExB,QAAA,MAAM,qBAAqB;;;;IAzBvB;;;OAGG;kBACW,SAAS,CAAC,KAAK;IAC7B;;;OAGG;YACK,SAAS,CAAC,KAAK;;IAIzB,+DAA+D;mCAClC,KAAK,CAAC,UAAU,KAAK,IAAI;4CAyGvD,CAAC;AAIF,eAAO,MAAM,YAAY,EAA4B,qBAAqB,CAAC"}
1
+ {"version":3,"file":"SegmentedTab.d.ts","sourceRoot":"","sources":["../../src/tabs/SegmentedTab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAC7D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAEjE,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAMlE,OAAO,EAAa,KAAK,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AA8BzE,MAAM,MAAM,qBAAqB,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI,kBAAkB,GACnF,QAAQ,CAAC,KAAK,CAAC,GAAG;IAChB;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IAC9B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;CACzB,CAAC;AAEJ,MAAM,MAAM,iBAAiB,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI,qBAAqB,CAAC,KAAK,CAAC,GAAG;IAC5F,+DAA+D;IAC/D,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CACxD,CAAC;AAMF,KAAK,qBAAqB,GAAG,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,EACzD,KAAK,EAAE,iBAAiB,CAAC,KAAK,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAA;CAAE,KAC9E,KAAK,CAAC,YAAY,CAAC;AAExB,QAAA,MAAM,qBAAqB;;;;IAzBvB;;;OAGG;kBACW,SAAS,CAAC,KAAK;IAC7B;;;OAGG;YACK,SAAS,CAAC,KAAK;;IAIzB,+DAA+D;mCAClC,KAAK,CAAC,UAAU,KAAK,IAAI;4CAsGvD,CAAC;AAIF,eAAO,MAAM,YAAY,EAA4B,qBAAqB,CAAC"}
package/esm/tabs/SegmentedTab.js CHANGED
@@ -6,17 +6,14 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
6
6
  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); }
7
7
  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; }
8
8
  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; }
9
- import React, { forwardRef, memo, useCallback, useMemo } from 'react';
9
+ import React, { forwardRef, memo, useCallback } from 'react';
10
10
  import { useTabsContext } from '@coinbase/cds-common/tabs/TabsContext';
11
- import { m as motion } from 'framer-motion';
12
11
  import { cx } from '../cx';
13
12
  import { useComponentConfig } from '../hooks/useComponentConfig';
14
13
  import { Box } from '../layout/Box';
15
14
  import { Pressable } from '../system/Pressable';
16
15
  import { Text } from '../typography/Text';
17
- import { tabsTransitionConfig } from './Tabs';
18
16
  import { jsx as _jsx } from "react/jsx-runtime";
19
- const MotionBox = motion(Box);
20
17
  const insetFocusRingCss = "insetFocusRingCss-i13o7yik";
21
18
  const buttonCss = "buttonCss-bijg88k";
22
19
  const buttonDisabledCss = "buttonDisabledCss-b265t1b";
@@ -52,13 +49,6 @@ const SegmentedTabComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props,
52
49
  updateActiveTab(id);
53
50
  onClick === null || onClick === void 0 || onClick(id, event);
54
51
  }, [id, updateActiveTab, onClick]);
55
- const motionProps = useMemo(() => ({
56
- animate: {
57
- color: "var(--color-".concat(isActive ? activeColor : color, ")")
58
- },
59
- transition: tabsTransitionConfig,
60
- initial: false
61
- }), [activeColor, color, isActive]);
62
52
  return /*#__PURE__*/_jsx(Pressable, _objectSpread(_objectSpread({
63
53
  ref: ref,
64
54
  "aria-selected": isActive,
@@ -77,12 +67,12 @@ const SegmentedTabComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props,
77
67
  textTransform: textTransform,
78
68
  type: "button"
79
69
  }, props), {}, {
80
- children: /*#__PURE__*/_jsx(MotionBox, _objectSpread(_objectSpread({
70
+ children: /*#__PURE__*/_jsx(Box, {
81
71
  as: "span",
72
+ color: isActive ? activeColor : color,
82
73
  justifyContent: "center",
83
74
  paddingX: 2,
84
- paddingY: 1
85
- }, motionProps), {}, {
75
+ paddingY: 1,
86
76
  children: typeof label === 'string' ? /*#__PURE__*/_jsx(Text, {
87
77
  color: "currentColor",
88
78
  font: font,
@@ -94,7 +84,7 @@ const SegmentedTabComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props,
94
84
  textTransform: textTransform,
95
85
  children: label
96
86
  }) : label
97
- }))
87
+ })
98
88
  }));
99
89
  }));
100
90
  SegmentedTabComponent.displayName = 'SegmentedTab';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@coinbase/cds-web",
3
- "version": "8.66.1",
3
+ "version": "8.66.2",
4
4
  "description": "Coinbase Design System - Web",
5
5
  "repository": {
6
6
  "type": "git",
@@ -207,7 +207,7 @@
207
207
  "react-dom": "^18.3.1"
208
208
  },
209
209
  "dependencies": {
210
- "@coinbase/cds-common": "^8.66.1",
210
+ "@coinbase/cds-common": "^8.66.2",
211
211
  "@coinbase/cds-icons": "^5.16.0",
212
212
  "@coinbase/cds-illustrations": "^4.38.0",
213
213
  "@coinbase/cds-lottie-files": "^3.3.4",