@coinbase/cds-web 8.35.0 → 8.36.0

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.
package/CHANGELOG.md CHANGED
@@ -8,6 +8,16 @@ All notable changes to this project will be documented in this file.
8
8
 
9
9
  <!-- template-start -->
10
10
 
11
+ ## 8.36.0 ((1/6/2026, 01:00 PM PST))
12
+
13
+ This is an artificial version bump with no new change.
14
+
15
+ ## 8.35.1 (1/5/2026 PST)
16
+
17
+ #### 🐞 Fixes
18
+
19
+ - Fix disableAnimateOnMount for progress bar label components. [[#284](https://github.com/coinbase/cds/pull/284)]
20
+
11
21
  ## 8.35.0 (1/5/2026 PST)
12
22
 
13
23
  #### 🚀 Updates
@@ -13,7 +13,6 @@ export type ProgressBaseProps = SharedProps &
13
13
  weight?: Weight;
14
14
  /**
15
15
  * Toggle used to show a disabled progress visualization
16
- * @default false
17
16
  */
18
17
  disabled?: boolean;
19
18
  /**
@@ -79,7 +78,6 @@ export declare const ProgressBar: React.MemoExoticComponent<
79
78
  weight?: Weight;
80
79
  /**
81
80
  * Toggle used to show a disabled progress visualization
82
- * @default false
83
81
  */
84
82
  disabled?: boolean;
85
83
  /**
@@ -1 +1 @@
1
- {"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../src/visualizations/ProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAEhD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAEjE,OAAO,KAAK,EAAE,wBAAwB,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAOhG,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAI3D,MAAM,MAAM,iBAAiB,GAAG,WAAW,GACzC,IAAI,CAAC,mBAAmB,EAAE,uBAAuB,CAAC,GAClD,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,CAAC,GAAG;IACrD,8DAA8D;IAC9D,QAAQ,EAAE,MAAM,CAAC;IACjB;;SAEK;IACL,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IACxB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;CAC/B,CAAC;AAEJ,MAAM,MAAM,gBAAgB,GAAG,iBAAiB,GAAG;IACjD;;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,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,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB,CAAC;CACH,CAAC;AAQF,eAAO,MAAM,WAAW;IArEpB,8DAA8D;cACpD,MAAM;IAChB;;SAEK;aACI,MAAM;IACf;;;OAGG;eACQ,OAAO;IAClB;;;OAGG;YACK,SAAS,CAAC,KAAK;IACvB;;OAEG;qBACc,MAAM,IAAI;IAC3B;;OAEG;uBACgB,MAAM,IAAI;;IAI/B;;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,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAChC;IACD;;OAEG;iBACU;QACX;;WAEG;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;QACd;;WAEG;QACH,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB;yCA8FF,CAAC"}
1
+ {"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../src/visualizations/ProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAEhD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAEjE,OAAO,KAAK,EAAE,wBAAwB,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAOhG,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAI3D,MAAM,MAAM,iBAAiB,GAAG,WAAW,GACzC,IAAI,CAAC,mBAAmB,EAAE,uBAAuB,CAAC,GAClD,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,CAAC,GAAG;IACrD,8DAA8D;IAC9D,QAAQ,EAAE,MAAM,CAAC;IACjB;;SAEK;IACL,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IACxB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;CAC/B,CAAC;AAEJ,MAAM,MAAM,gBAAgB,GAAG,iBAAiB,GAAG;IACjD;;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,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,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB,CAAC;CACH,CAAC;AAQF,eAAO,MAAM,WAAW;IApEpB,8DAA8D;cACpD,MAAM;IAChB;;SAEK;aACI,MAAM;IACf;;OAEG;eACQ,OAAO;IAClB;;;OAGG;YACK,SAAS,CAAC,KAAK;IACvB;;OAEG;qBACc,MAAM,IAAI;IAC3B;;OAEG;uBACgB,MAAM,IAAI;;IAI/B;;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,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAChC;IACD;;OAEG;iBACU;QACX;;WAEG;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;QACd;;WAEG;QACH,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB;yCA8FF,CAAC"}
@@ -1,8 +1,11 @@
1
1
  import React from 'react';
2
2
  import type { PaddingProps, Placement } from '@coinbase/cds-common/types';
3
3
  import { type ProgressBarLabel } from './getProgressBarLabelParts';
4
- import { type ProgressBaseProps } from './ProgressBar';
5
- export type ProgressBarWithFixedLabelsProps = Pick<ProgressBaseProps, 'disabled' | 'testID'> & {
4
+ import { type ProgressBarProps } from './ProgressBar';
5
+ export type ProgressBarWithFixedLabelsProps = Pick<
6
+ ProgressBarProps,
7
+ 'disableAnimateOnMount' | 'disabled' | 'testID'
8
+ > & {
6
9
  /** Label that is pinned to the start of the container. If a number is used then it will format it as a percentage. */
7
10
  startLabel?: ProgressBarLabel;
8
11
  /** Label that is pinned to the end of the container. If a number is used then it will format it as a percentage. */
@@ -70,18 +73,20 @@ export type ProgressBarFixedLabelContainerProps = Omit<
70
73
  Pick<PaddingProps, 'paddingBottom' | 'paddingTop'> & {
71
74
  visuallyDisabled: boolean;
72
75
  };
73
- export type ProgressBarFixedLabelBesideProps = {
76
+ export type ProgressBarFixedLabelBesideProps = Pick<
77
+ ProgressBarProps,
78
+ 'disableAnimateOnMount' | 'style' | 'className'
79
+ > & {
74
80
  label: ProgressBarLabel;
75
81
  visuallyDisabled: boolean;
76
- style?: React.CSSProperties;
77
- className?: string;
78
82
  };
79
- export type ProgressBarFixedLabelProps = {
83
+ export type ProgressBarFixedLabelProps = Pick<
84
+ ProgressBarProps,
85
+ 'disableAnimateOnMount' | 'style' | 'className'
86
+ > & {
80
87
  position: 'start' | 'end';
81
88
  label: ProgressBarLabel;
82
89
  visuallyDisabled: boolean;
83
- style?: React.CSSProperties;
84
- className?: string;
85
90
  };
86
91
  export declare const ProgressBarWithFixedLabels: React.FC<
87
92
  React.PropsWithChildren<ProgressBarWithFixedLabelsProps>
@@ -1 +1 @@
1
- {"version":3,"file":"ProgressBarWithFixedLabels.d.ts","sourceRoot":"","sources":["../../src/visualizations/ProgressBarWithFixedLabels.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAO1E,OAAO,EAA4B,KAAK,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAC7F,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAGvD,MAAM,MAAM,+BAA+B,GAAG,IAAI,CAAC,iBAAiB,EAAE,UAAU,GAAG,QAAQ,CAAC,GAAG;IAC7F,sHAAsH;IACtH,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,oHAAoH;IACpH,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B;;;SAGK;IACL,cAAc,CAAC,EAAE,OAAO,CAAC,SAAS,EAAE,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAC,CAAC;IAClE;;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,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QACrC;;WAEG;QACH,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QACjC;;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,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB;;WAEG;QACH,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB;;WAEG;QACH,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,mCAAmC,GAAG,IAAI,CACpD,+BAA+B,EAC/B,gBAAgB,GAAG,UAAU,GAAG,UAAU,GAAG,OAAO,GAAG,WAAW,CACnE,GACC,IAAI,CAAC,YAAY,EAAE,eAAe,GAAG,YAAY,CAAC,GAAG;IACnD,gBAAgB,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEJ,MAAM,MAAM,gCAAgC,GAAG;IAC7C,KAAK,EAAE,gBAAgB,CAAC;IACxB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACvC,QAAQ,EAAE,OAAO,GAAG,KAAK,CAAC;IAC1B,KAAK,EAAE,gBAAgB,CAAC;IACxB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAkGF,eAAO,MAAM,0BAA0B,EAAE,KAAK,CAAC,EAAE,CAC/C,KAAK,CAAC,iBAAiB,CAAC,+BAA+B,CAAC,CA4EzD,CAAC"}
1
+ {"version":3,"file":"ProgressBarWithFixedLabels.d.ts","sourceRoot":"","sources":["../../src/visualizations/ProgressBarWithFixedLabels.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAO1E,OAAO,EAA4B,KAAK,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAC7F,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAGtD,MAAM,MAAM,+BAA+B,GAAG,IAAI,CAChD,gBAAgB,EAChB,uBAAuB,GAAG,UAAU,GAAG,QAAQ,CAChD,GAAG;IACF,sHAAsH;IACtH,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,oHAAoH;IACpH,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B;;;SAGK;IACL,cAAc,CAAC,EAAE,OAAO,CAAC,SAAS,EAAE,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAC,CAAC;IAClE;;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,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QACrC;;WAEG;QACH,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QACjC;;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,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB;;WAEG;QACH,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB;;WAEG;QACH,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,mCAAmC,GAAG,IAAI,CACpD,+BAA+B,EAC/B,gBAAgB,GAAG,UAAU,GAAG,UAAU,GAAG,OAAO,GAAG,WAAW,CACnE,GACC,IAAI,CAAC,YAAY,EAAE,eAAe,GAAG,YAAY,CAAC,GAAG;IACnD,gBAAgB,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEJ,MAAM,MAAM,gCAAgC,GAAG,IAAI,CACjD,gBAAgB,EAChB,uBAAuB,GAAG,OAAO,GAAG,WAAW,CAChD,GAAG;IACF,KAAK,EAAE,gBAAgB,CAAC;IACxB,gBAAgB,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG,IAAI,CAC3C,gBAAgB,EAChB,uBAAuB,GAAG,OAAO,GAAG,WAAW,CAChD,GAAG;IACF,QAAQ,EAAE,OAAO,GAAG,KAAK,CAAC;IAC1B,KAAK,EAAE,gBAAgB,CAAC;IACxB,gBAAgB,EAAE,OAAO,CAAC;CAC3B,CAAC;AAoHF,eAAO,MAAM,0BAA0B,EAAE,KAAK,CAAC,EAAE,CAC/C,KAAK,CAAC,iBAAiB,CAAC,+BAA+B,CAAC,CAiFzD,CAAC"}
@@ -4,11 +4,17 @@ import { type ProgressBarLabel } from './getProgressBarLabelParts';
4
4
  import { type ProgressBaseProps } from './ProgressBar';
5
5
  export type ProgressBarFloatLabelProps = Pick<
6
6
  ProgressBarWithFloatLabelProps,
7
- 'label' | 'progress' | 'disabled' | 'labelPlacement' | 'styles' | 'classNames'
7
+ | 'label'
8
+ | 'progress'
9
+ | 'disableAnimateOnMount'
10
+ | 'disabled'
11
+ | 'labelPlacement'
12
+ | 'styles'
13
+ | 'classNames'
8
14
  >;
9
15
  export type ProgressBarWithFloatLabelProps = Pick<
10
16
  ProgressBaseProps,
11
- 'progress' | 'disabled' | 'testID'
17
+ 'progress' | 'disableAnimateOnMount' | 'disabled' | 'testID'
12
18
  > & {
13
19
  /** Label that is floated at the end of the filled in bar. If a number is used then it will format it as a percentage. */
14
20
  label: ProgressBarLabel;
@@ -1 +1 @@
1
- {"version":3,"file":"ProgressBarWithFloatLabel.d.ts","sourceRoot":"","sources":["../../src/visualizations/ProgressBarWithFloatLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAGzD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAc5D,OAAO,EAA4B,KAAK,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAC7F,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAGvD,MAAM,MAAM,0BAA0B,GAAG,IAAI,CAC3C,8BAA8B,EAC9B,OAAO,GAAG,UAAU,GAAG,UAAU,GAAG,gBAAgB,GAAG,QAAQ,GAAG,YAAY,CAC/E,CAAC;AAkGF,MAAM,MAAM,8BAA8B,GAAG,IAAI,CAC/C,iBAAiB,EACjB,UAAU,GAAG,UAAU,GAAG,QAAQ,CACnC,GAAG;IACF,yHAAyH;IACzH,KAAK,EAAE,gBAAgB,CAAC;IACxB;;;SAGK;IACL,cAAc,CAAC,EAAE,OAAO,CAAC,SAAS,EAAE,OAAO,GAAG,OAAO,CAAC,CAAC;IACvD;;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,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QACrC;;WAEG;QACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAC7B,CAAC;IACF;;OAEG;IACH,UAAU,CAAC,EAAE;QACX;;WAEG;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;QACd;;WAEG;QACH,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB;;WAEG;QACH,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KAAK,CAAC,EAAE,CAC9C,KAAK,CAAC,iBAAiB,CAAC,8BAA8B,CAAC,CAsCxD,CAAC"}
1
+ {"version":3,"file":"ProgressBarWithFloatLabel.d.ts","sourceRoot":"","sources":["../../src/visualizations/ProgressBarWithFloatLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8C,MAAM,OAAO,CAAC;AAGnE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAc5D,OAAO,EAA4B,KAAK,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAC7F,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAGvD,MAAM,MAAM,0BAA0B,GAAG,IAAI,CAC3C,8BAA8B,EAC5B,OAAO,GACP,UAAU,GACV,uBAAuB,GACvB,UAAU,GACV,gBAAgB,GAChB,QAAQ,GACR,YAAY,CACf,CAAC;AA0GF,MAAM,MAAM,8BAA8B,GAAG,IAAI,CAC/C,iBAAiB,EACjB,UAAU,GAAG,uBAAuB,GAAG,UAAU,GAAG,QAAQ,CAC7D,GAAG;IACF,yHAAyH;IACzH,KAAK,EAAE,gBAAgB,CAAC;IACxB;;;SAGK;IACL,cAAc,CAAC,EAAE,OAAO,CAAC,SAAS,EAAE,OAAO,GAAG,OAAO,CAAC,CAAC;IACvD;;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,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QACrC;;WAEG;QACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAC7B,CAAC;IACF;;OAEG;IACH,UAAU,CAAC,EAAE;QACX;;WAEG;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;QACd;;WAEG;QACH,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB;;WAEG;QACH,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KAAK,CAAC,EAAE,CAC9C,KAAK,CAAC,iBAAiB,CAAC,8BAA8B,CAAC,CAwCxD,CAAC"}
@@ -21,8 +21,8 @@ export const ProgressBar = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, forw
21
21
  weight = 'normal',
22
22
  progress,
23
23
  color = 'bgPrimary',
24
- disabled = false,
25
- disableAnimateOnMount = false,
24
+ disabled,
25
+ disableAnimateOnMount,
26
26
  testID,
27
27
  accessibilityLabel,
28
28
  style,
@@ -15,6 +15,7 @@ const ProgressBarFixedLabelBeside = /*#__PURE__*/memo(_ref => {
15
15
  let {
16
16
  label,
17
17
  visuallyDisabled,
18
+ disableAnimateOnMount,
18
19
  style,
19
20
  className
20
21
  } = _ref;
@@ -25,6 +26,7 @@ const ProgressBarFixedLabelBeside = /*#__PURE__*/memo(_ref => {
25
26
  return /*#__PURE__*/_jsx(ProgressTextLabel, {
26
27
  className: className,
27
28
  color: "fg",
29
+ disableAnimateOnMount: disableAnimateOnMount,
28
30
  disabled: visuallyDisabled,
29
31
  renderLabel: renderLabel,
30
32
  style: style,
@@ -36,6 +38,7 @@ const ProgressBarFixedLabel = /*#__PURE__*/memo(_ref2 => {
36
38
  label,
37
39
  position,
38
40
  visuallyDisabled,
41
+ disableAnimateOnMount,
39
42
  style,
40
43
  className
41
44
  } = _ref2;
@@ -43,6 +46,7 @@ const ProgressBarFixedLabel = /*#__PURE__*/memo(_ref2 => {
43
46
  "data-testid": "cds-progress-bar-fixed-label-".concat(position),
44
47
  children: /*#__PURE__*/_jsx(ProgressBarFixedLabelBeside, {
45
48
  className: className,
49
+ disableAnimateOnMount: disableAnimateOnMount,
46
50
  label: label,
47
51
  style: style,
48
52
  visuallyDisabled: visuallyDisabled
@@ -54,6 +58,7 @@ const ProgressBarFixedLabelContainer = /*#__PURE__*/memo(_ref3 => {
54
58
  startLabel,
55
59
  endLabel,
56
60
  visuallyDisabled,
61
+ disableAnimateOnMount,
57
62
  paddingBottom,
58
63
  paddingTop,
59
64
  styles,
@@ -63,6 +68,7 @@ const ProgressBarFixedLabelContainer = /*#__PURE__*/memo(_ref3 => {
63
68
  if (typeof startLabel !== 'undefined') {
64
69
  nodes.push(/*#__PURE__*/_jsx(ProgressBarFixedLabel, {
65
70
  className: classNames === null || classNames === void 0 ? void 0 : classNames.startLabel,
71
+ disableAnimateOnMount: disableAnimateOnMount,
66
72
  label: startLabel,
67
73
  position: "start",
68
74
  style: styles === null || styles === void 0 ? void 0 : styles.startLabel,
@@ -75,6 +81,7 @@ const ProgressBarFixedLabelContainer = /*#__PURE__*/memo(_ref3 => {
75
81
  if (typeof endLabel !== 'undefined') {
76
82
  nodes.push(/*#__PURE__*/_jsx(ProgressBarFixedLabel, {
77
83
  className: classNames === null || classNames === void 0 ? void 0 : classNames.endLabel,
84
+ disableAnimateOnMount: disableAnimateOnMount,
78
85
  label: endLabel,
79
86
  position: "end",
80
87
  style: styles === null || styles === void 0 ? void 0 : styles.endLabel,
@@ -104,6 +111,7 @@ export const ProgressBarWithFixedLabels = /*#__PURE__*/memo(_ref4 => {
104
111
  startLabel,
105
112
  endLabel,
106
113
  labelPlacement = 'beside',
114
+ disableAnimateOnMount,
107
115
  disabled = false,
108
116
  children,
109
117
  testID,
@@ -118,6 +126,7 @@ export const ProgressBarWithFixedLabels = /*#__PURE__*/memo(_ref4 => {
118
126
  paddingEnd: 1,
119
127
  children: /*#__PURE__*/_jsx(ProgressBarFixedLabelBeside, {
120
128
  className: classNames === null || classNames === void 0 ? void 0 : classNames.startLabel,
129
+ disableAnimateOnMount: disableAnimateOnMount,
121
130
  label: startLabel,
122
131
  style: styles === null || styles === void 0 ? void 0 : styles.startLabel,
123
132
  visuallyDisabled: disabled
@@ -129,6 +138,7 @@ export const ProgressBarWithFixedLabels = /*#__PURE__*/memo(_ref4 => {
129
138
  paddingStart: 1,
130
139
  children: /*#__PURE__*/_jsx(ProgressBarFixedLabelBeside, {
131
140
  className: classNames === null || classNames === void 0 ? void 0 : classNames.endLabel,
141
+ disableAnimateOnMount: disableAnimateOnMount,
132
142
  label: endLabel,
133
143
  style: styles === null || styles === void 0 ? void 0 : styles.endLabel,
134
144
  visuallyDisabled: disabled
@@ -143,6 +153,7 @@ export const ProgressBarWithFixedLabels = /*#__PURE__*/memo(_ref4 => {
143
153
  width: "100%",
144
154
  children: [labelPlacement === 'above' && /*#__PURE__*/_jsx(ProgressBarFixedLabelContainer, {
145
155
  classNames: classNames,
156
+ disableAnimateOnMount: disableAnimateOnMount,
146
157
  endLabel: endLabel,
147
158
  paddingBottom: 1,
148
159
  startLabel: startLabel,
@@ -156,6 +167,7 @@ export const ProgressBarWithFixedLabels = /*#__PURE__*/memo(_ref4 => {
156
167
  children: [labelPlacement === 'beside' && leftEl, children, labelPlacement === 'beside' && rightEl]
157
168
  }), labelPlacement === 'below' && /*#__PURE__*/_jsx(ProgressBarFixedLabelContainer, {
158
169
  classNames: classNames,
170
+ disableAnimateOnMount: disableAnimateOnMount,
159
171
  endLabel: endLabel,
160
172
  paddingTop: 1,
161
173
  startLabel: startLabel,
@@ -3,7 +3,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
3
3
  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; }
4
4
  function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
5
5
  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); }
6
- import React, { memo, useCallback, useRef } from 'react';
6
+ import React, { memo, useCallback, useRef, useState } from 'react';
7
7
  import { animateProgressBaseSpec } from '@coinbase/cds-common/animation/progress';
8
8
  import { usePreviousValues } from '@coinbase/cds-common/hooks/usePreviousValues';
9
9
  import { isStorybook } from '@coinbase/cds-utils';
@@ -28,6 +28,7 @@ const ProgressBarFloatLabel = /*#__PURE__*/memo(_ref => {
28
28
  label,
29
29
  disabled,
30
30
  progress,
31
+ disableAnimateOnMount,
31
32
  labelPlacement,
32
33
  styles,
33
34
  classNames
@@ -37,8 +38,9 @@ const ProgressBarFloatLabel = /*#__PURE__*/memo(_ref => {
37
38
  const {
38
39
  getPreviousValue: getPreviousPercent,
39
40
  addPreviousValue: addPreviousPercent
40
- } = usePreviousValues([0]);
41
+ } = usePreviousValues([disableAnimateOnMount ? progress : 0]);
41
42
  const animationControls = useAnimation();
43
+ const [hasAnimationMounted, setHasAnimationMounted] = useState(!disableAnimateOnMount);
42
44
  addPreviousPercent(progress);
43
45
  const previousPercent = (_getPreviousPercent = getPreviousPercent()) !== null && _getPreviousPercent !== void 0 ? _getPreviousPercent : 0;
44
46
 
@@ -58,12 +60,19 @@ const ProgressBarFloatLabel = /*#__PURE__*/memo(_ref => {
58
60
  const textContainerWidth = textContainerRef.current.offsetWidth;
59
61
  const startLeftTranslate = isRtl() ? Math.min(containerWidth - textContainerWidth, containerWidth - containerWidth * previousPercent) : Math.max(0, containerWidth * previousPercent - textContainerWidth);
60
62
  const endLeftTranslate = isRtl() ? Math.min(containerWidth - textContainerWidth, containerWidth - containerWidth * progress) : Math.max(0, containerWidth * progress - textContainerWidth);
61
- void animationControls.start({
62
- x: [startLeftTranslate, endLeftTranslate],
63
- transition: convertTransition(animateProgressBaseSpec)
64
- });
63
+ if (!hasAnimationMounted && disableAnimateOnMount) {
64
+ void animationControls.set({
65
+ x: endLeftTranslate
66
+ });
67
+ setHasAnimationMounted(true);
68
+ } else {
69
+ void animationControls.start({
70
+ x: [startLeftTranslate, endLeftTranslate],
71
+ transition: convertTransition(animateProgressBaseSpec)
72
+ });
73
+ }
65
74
  }
66
- }, [progress, cWidth, cHeight, previousPercent]);
75
+ }, [progress, cWidth, cHeight, previousPercent, disableAnimateOnMount]);
67
76
  const setupContainerRef = useCallback(ref => {
68
77
  containerRef.current = ref;
69
78
  observe(ref);
@@ -82,10 +91,13 @@ const ProgressBarFloatLabel = /*#__PURE__*/memo(_ref => {
82
91
  animate: animationControls,
83
92
  className: floatingTextContainerCss,
84
93
  "data-testid": "cds-progress-bar-float-label",
85
- style: motionStyle,
94
+ style: _objectSpread(_objectSpread({}, motionStyle), {}, {
95
+ opacity: hasAnimationMounted ? 1 : 0
96
+ }),
86
97
  children: /*#__PURE__*/_jsx(ProgressTextLabel, {
87
98
  className: classNames === null || classNames === void 0 ? void 0 : classNames.label,
88
99
  color: "fgMuted",
100
+ disableAnimateOnMount: disableAnimateOnMount,
89
101
  disabled: disabled,
90
102
  renderLabel: renderLabel,
91
103
  style: styles === null || styles === void 0 ? void 0 : styles.label,
@@ -99,6 +111,7 @@ export const ProgressBarWithFloatLabel = /*#__PURE__*/memo(_ref2 => {
99
111
  label,
100
112
  labelPlacement = 'above',
101
113
  progress,
114
+ disableAnimateOnMount,
102
115
  disabled,
103
116
  children,
104
117
  testID,
@@ -110,6 +123,7 @@ export const ProgressBarWithFloatLabel = /*#__PURE__*/memo(_ref2 => {
110
123
  const skipLabel = isStorybook();
111
124
  const progressBarFloatLabel = !skipLabel && /*#__PURE__*/_jsx(ProgressBarFloatLabel, {
112
125
  classNames: classNames,
126
+ disableAnimateOnMount: disableAnimateOnMount,
113
127
  disabled: disabled,
114
128
  label: label,
115
129
  labelPlacement: labelPlacement,
@@ -65,8 +65,8 @@ export const ProgressCircle = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2,
65
65
  weight = 'normal',
66
66
  progress,
67
67
  color = 'bgPrimary',
68
- disabled = false,
69
- disableAnimateOnMount = false,
68
+ disabled,
69
+ disableAnimateOnMount,
70
70
  testID,
71
71
  hideContent,
72
72
  hideText,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@coinbase/cds-web",
3
- "version": "8.35.0",
3
+ "version": "8.36.0",
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.35.0",
206
+ "@coinbase/cds-common": "^8.36.0",
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",