@coinbase/cds-web 8.34.1 → 8.34.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 (11) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dts/visualizations/DefaultProgressCircleContent.d.ts +1 -0
  3. package/dts/visualizations/DefaultProgressCircleContent.d.ts.map +1 -1
  4. package/dts/visualizations/ProgressCircle.d.ts +4 -1
  5. package/dts/visualizations/ProgressCircle.d.ts.map +1 -1
  6. package/dts/visualizations/ProgressTextLabel.d.ts +5 -1
  7. package/dts/visualizations/ProgressTextLabel.d.ts.map +1 -1
  8. package/esm/visualizations/DefaultProgressCircleContent.js +2 -0
  9. package/esm/visualizations/ProgressCircle.js +6 -2
  10. package/esm/visualizations/ProgressTextLabel.js +2 -1
  11. 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.34.2 (1/2/2026 PST)
12
+
13
+ #### 🐞 Fixes
14
+
15
+ - Handle disableAnimateOnMount prop for web ProgressCircle. [[#280](https://github.com/coinbase/cds/pull/280)]
16
+
11
17
  ## 8.34.1 (12/23/2025 PST)
12
18
 
13
19
  #### 🐞 Fixes
package/dts/visualizations/DefaultProgressCircleContent.d.ts CHANGED
@@ -3,6 +3,7 @@ import type { ProgressCircleContentProps } from './ProgressCircle';
3
3
  export declare const DefaultProgressCircleContent: React.MemoExoticComponent<
4
4
  ({
5
5
  progress,
6
+ disableAnimateOnMount,
6
7
  disabled,
7
8
  color,
8
9
  }: ProgressCircleContentProps) => import('react/jsx-runtime').JSX.Element
package/dts/visualizations/DefaultProgressCircleContent.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"DefaultProgressCircleContent.d.ts","sourceRoot":"","sources":["../../src/visualizations/DefaultProgressCircleContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AAEpC,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,kBAAkB,CAAC;AAGnE,eAAO,MAAM,4BAA4B,4DACK,0BAA0B,6CAKvE,CAAC"}
1
+ {"version":3,"file":"DefaultProgressCircleContent.d.ts","sourceRoot":"","sources":["../../src/visualizations/DefaultProgressCircleContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AAEpC,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,kBAAkB,CAAC;AAGnE,eAAO,MAAM,4BAA4B,oFAMpC,0BAA0B,6CAU9B,CAAC"}
package/dts/visualizations/ProgressCircle.d.ts CHANGED
@@ -75,7 +75,10 @@ export type ProgressCircleProps = ProgressCircleBaseProps & {
75
75
  progress?: string;
76
76
  };
77
77
  };
78
- export type ProgressCircleContentProps = Pick<ProgressCircleBaseProps, 'progress' | 'disabled'> & {
78
+ export type ProgressCircleContentProps = Pick<
79
+ ProgressCircleBaseProps,
80
+ 'progress' | 'disableAnimateOnMount' | 'disabled'
81
+ > & {
79
82
  /**
80
83
  * Custom text color.
81
84
  * @default fgMuted
package/dts/visualizations/ProgressCircle.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ProgressCircle.d.ts","sourceRoot":"","sources":["../../src/visualizations/ProgressCircle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmC,MAAM,OAAO,CAAC;AACxD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAatD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAWvD,MAAM,MAAM,uBAAuB,GAAG,iBAAiB,GAAG;IACxD;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,uBAAuB,GAAG;IAC1D;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,MAAM,CAAC,EAAE;QACP;;WAEG;QACH,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B;;WAEG;QACH,GAAG,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC1B;;WAEG;QACH,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC7B;;WAEG;QACH,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAChC,CAAC;IACF;;OAEG;IACH,UAAU,CAAC,EAAE;QACX;;WAEG;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;QACd;;WAEG;QACH,GAAG,CAAC,EAAE,MAAM,CAAC;QACb;;WAEG;QACH,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB;;WAEG;QACH,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG,IAAI,CAAC,uBAAuB,EAAE,UAAU,GAAG,UAAU,CAAC,GAAG;IAChG;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;CACzB,CAAC;AA+DF,eAAO,MAAM,cAAc;;;;;;;;IAhJzB;;OAEG;kBACW,OAAO;IACrB;;;OAGG;eACQ,OAAO;IAClB;;;;;OAKG;WACI,MAAM;IACb;;OAEG;kBACW,KAAK,CAAC,SAAS;;IAI7B;;OAEG;YACK,KAAK,CAAC,aAAa;IAC3B;;OAEG;gBACS,MAAM;IAClB;;OAEG;aACM;QACP;;WAEG;QACH,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B;;WAEG;QACH,GAAG,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC1B;;WAEG;QACH,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC7B;;WAEG;QACH,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAChC;IACD;;OAEG;iBACU;QACX;;WAEG;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;QACd;;WAEG;QACH,GAAG,CAAC,EAAE,MAAM,CAAC;QACb;;WAEG;QACH,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB;;WAEG;QACH,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB;yCAsLF,CAAC"}
1
+ {"version":3,"file":"ProgressCircle.d.ts","sourceRoot":"","sources":["../../src/visualizations/ProgressCircle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmC,MAAM,OAAO,CAAC;AACxD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAatD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAWvD,MAAM,MAAM,uBAAuB,GAAG,iBAAiB,GAAG;IACxD;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,uBAAuB,GAAG;IAC1D;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,MAAM,CAAC,EAAE;QACP;;WAEG;QACH,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B;;WAEG;QACH,GAAG,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC1B;;WAEG;QACH,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC7B;;WAEG;QACH,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAChC,CAAC;IACF;;OAEG;IACH,UAAU,CAAC,EAAE;QACX;;WAEG;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;QACd;;WAEG;QACH,GAAG,CAAC,EAAE,MAAM,CAAC;QACb;;WAEG;QACH,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB;;WAEG;QACH,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG,IAAI,CAC3C,uBAAuB,EACvB,UAAU,GAAG,uBAAuB,GAAG,UAAU,CAClD,GAAG;IACF;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;CACzB,CAAC;AAkEF,eAAO,MAAM,cAAc;;;;;;;;IAtJzB;;OAEG;kBACW,OAAO;IACrB;;;OAGG;eACQ,OAAO;IAClB;;;;;OAKG;WACI,MAAM;IACb;;OAEG;kBACW,KAAK,CAAC,SAAS;;IAI7B;;OAEG;YACK,KAAK,CAAC,aAAa;IAC3B;;OAEG;gBACS,MAAM;IAClB;;OAEG;aACM;QACP;;WAEG;QACH,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B;;WAEG;QACH,GAAG,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC1B;;WAEG;QACH,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC7B;;WAEG;QACH,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAChC;IACD;;OAEG;iBACU;QACX;;WAEG;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;QACd;;WAEG;QACH,GAAG,CAAC,EAAE,MAAM,CAAC;QACb;;WAEG;QACH,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB;;WAEG;QACH,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB;yCAkMF,CAAC"}
package/dts/visualizations/ProgressTextLabel.d.ts CHANGED
@@ -1,7 +1,10 @@
1
1
  import React from 'react';
2
2
  import type { ThemeVars } from '@coinbase/cds-common/core/theme';
3
3
  import type { ProgressBaseProps } from './ProgressBar';
4
- export type ProgressTextLabelProps = Pick<ProgressBaseProps, 'disabled'> & {
4
+ export type ProgressTextLabelProps = Pick<
5
+ ProgressBaseProps,
6
+ 'disableAnimateOnMount' | 'disabled'
7
+ > & {
5
8
  value: number;
6
9
  renderLabel?: (num: number, disabled?: boolean) => React.ReactNode;
7
10
  color?: ThemeVars.Color;
@@ -18,6 +21,7 @@ export declare const ProgressTextLabel: React.MemoExoticComponent<
18
21
  ({
19
22
  value,
20
23
  renderLabel,
24
+ disableAnimateOnMount,
21
25
  disabled,
22
26
  color,
23
27
  style,
package/dts/visualizations/ProgressTextLabel.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ProgressTextLabel.d.ts","sourceRoot":"","sources":["../../src/visualizations/ProgressTextLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAQjE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAEvD,MAAM,MAAM,sBAAsB,GAAG,IAAI,CAAC,iBAAiB,EAAE,UAAU,CAAC,GAAG;IACzE,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAC;IACnE,KAAK,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IACxB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,iBAAiB,wFACgC,sBAAsB,6CAwCnF,CAAC"}
1
+ {"version":3,"file":"ProgressTextLabel.d.ts","sourceRoot":"","sources":["../../src/visualizations/ProgressTextLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAQjE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAEvD,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACvC,iBAAiB,EACjB,uBAAuB,GAAG,UAAU,CACrC,GAAG;IACF,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAC;IACnE,KAAK,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IACxB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,iBAAiB,gHASzB,sBAAsB,6CA0C1B,CAAC"}
package/esm/visualizations/DefaultProgressCircleContent.js CHANGED
@@ -4,11 +4,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
4
4
  export const DefaultProgressCircleContent = /*#__PURE__*/memo(_ref => {
5
5
  let {
6
6
  progress,
7
+ disableAnimateOnMount,
7
8
  disabled,
8
9
  color = 'fgMuted'
9
10
  } = _ref;
10
11
  return /*#__PURE__*/_jsx(ProgressTextLabel, {
11
12
  color: color,
13
+ disableAnimateOnMount: disableAnimateOnMount,
12
14
  disabled: disabled,
13
15
  value: Math.round(progress * 100)
14
16
  });
package/esm/visualizations/ProgressCircle.js CHANGED
@@ -26,7 +26,8 @@ const ProgressCircleInner = /*#__PURE__*/memo(_ref => {
26
26
  style,
27
27
  className,
28
28
  onAnimationEnd,
29
- onAnimationStart
29
+ onAnimationStart,
30
+ disableAnimateOnMount
30
31
  } = _ref;
31
32
  const strokeWidth = useProgressSize(weight);
32
33
  const circleRef = useRef(null);
@@ -41,7 +42,7 @@ const ProgressCircleInner = /*#__PURE__*/memo(_ref => {
41
42
  },
42
43
  transition: animateProgressBaseSpec,
43
44
  initial: {
44
- strokeDashoffset: circumference
45
+ strokeDashoffset: disableAnimateOnMount ? progressOffset : circumference
45
46
  }
46
47
  });
47
48
  return /*#__PURE__*/_jsx(motion.circle, _objectSpread(_objectSpread(_objectSpread({
@@ -65,6 +66,7 @@ export const ProgressCircle = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2,
65
66
  progress,
66
67
  color = 'bgPrimary',
67
68
  disabled = false,
69
+ disableAnimateOnMount = false,
68
70
  testID,
69
71
  hideContent,
70
72
  hideText,
@@ -126,6 +128,7 @@ export const ProgressCircle = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2,
126
128
  })), /*#__PURE__*/_jsx(ProgressCircleInner, {
127
129
  className: classNames === null || classNames === void 0 ? void 0 : classNames.progress,
128
130
  color: color,
131
+ disableAnimateOnMount: disableAnimateOnMount,
129
132
  onAnimationEnd: onAnimationEnd,
130
133
  onAnimationStart: onAnimationStart,
131
134
  progress: progress,
@@ -149,6 +152,7 @@ export const ProgressCircle = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2,
149
152
  overflow: "clip",
150
153
  width: "100%",
151
154
  children: contentNode !== null && contentNode !== void 0 ? contentNode : /*#__PURE__*/_jsx(DefaultProgressCircleContent, {
155
+ disableAnimateOnMount: disableAnimateOnMount,
152
156
  disabled: disabled,
153
157
  progress: progress
154
158
  })
package/esm/visualizations/ProgressTextLabel.js CHANGED
@@ -10,6 +10,7 @@ export const ProgressTextLabel = /*#__PURE__*/memo(_ref => {
10
10
  let {
11
11
  value,
12
12
  renderLabel,
13
+ disableAnimateOnMount,
13
14
  disabled,
14
15
  color,
15
16
  style,
@@ -18,7 +19,7 @@ export const ProgressTextLabel = /*#__PURE__*/memo(_ref => {
18
19
  const {
19
20
  getPreviousValue,
20
21
  addPreviousValue
21
- } = usePreviousValues([0]);
22
+ } = usePreviousValues([disableAnimateOnMount ? value : 0]);
22
23
  addPreviousValue(value);
23
24
  const renderNum = useCallback(num => {
24
25
  const textValue = renderLabel ? renderLabel(num, disabled) : "".concat(num, "%");
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@coinbase/cds-web",
3
- "version": "8.34.1",
3
+ "version": "8.34.2",
4
4
  "description": "Coinbase Design System - Web",
5
5
  "repository": {
6
6
  "type": "git",
@@ -203,7 +203,7 @@
203
203
  "react-dom": "^18.3.1"
204
204
  },
205
205
  "dependencies": {
206
- "@coinbase/cds-common": "^8.34.1",
206
+ "@coinbase/cds-common": "^8.34.2",
207
207
  "@coinbase/cds-icons": "^5.9.0",
208
208
  "@coinbase/cds-illustrations": "^4.29.0",
209
209
  "@coinbase/cds-lottie-files": "^3.3.4",