@instructure/ui-progress 11.7.3-snapshot-25 → 11.7.3-snapshot-27

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 (23) hide show
  1. package/CHANGELOG.md +5 -2
  2. package/es/ProgressBar/v1/index.js +55 -55
  3. package/es/ProgressBar/v1/styles.js +8 -8
  4. package/es/ProgressBar/v1/theme.js +42 -41
  5. package/es/ProgressBar/v2/index.js +55 -55
  6. package/es/ProgressBar/v2/styles.js +8 -8
  7. package/es/ProgressCircle/v1/index.js +60 -58
  8. package/es/ProgressCircle/v1/styles.js +10 -8
  9. package/es/ProgressCircle/v1/theme.js +31 -30
  10. package/es/ProgressCircle/v2/index.js +60 -58
  11. package/es/ProgressCircle/v2/styles.js +10 -8
  12. package/lib/ProgressBar/v1/index.js +55 -55
  13. package/lib/ProgressBar/v1/styles.js +8 -8
  14. package/lib/ProgressBar/v1/theme.js +42 -41
  15. package/lib/ProgressBar/v2/index.js +55 -55
  16. package/lib/ProgressBar/v2/styles.js +8 -8
  17. package/lib/ProgressCircle/v1/index.js +60 -58
  18. package/lib/ProgressCircle/v1/styles.js +10 -8
  19. package/lib/ProgressCircle/v1/theme.js +31 -30
  20. package/lib/ProgressCircle/v2/index.js +60 -58
  21. package/lib/ProgressCircle/v2/styles.js +10 -8
  22. package/package.json +12 -12
  23. package/tsconfig.build.tsbuildinfo +1 -1
package/es/ProgressCircle/v1/index.js CHANGED
@@ -1,6 +1,4 @@
1
- import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
2
- const _excluded = ["color", "renderValue", "formatScreenReaderValue", "meterColor", "valueNow", "valueMax", "screenReaderLabel", "size", "styles"];
3
- var _dec, _class, _ProgressCircle;
1
+ var _dec, _class;
4
2
  /*
5
3
  * The MIT License (MIT)
6
4
  *
@@ -39,29 +37,50 @@ category: components
39
37
  ---
40
38
  **/
41
39
  import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
42
- let ProgressCircle = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_ProgressCircle = class ProgressCircle extends Component {
40
+ let ProgressCircle = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = class ProgressCircle extends Component {
41
+ static displayName = "ProgressCircle";
42
+ static componentId = 'ProgressCircle';
43
+ static allowedProps = allowedProps;
44
+ static defaultProps = {
45
+ formatScreenReaderValue: ({
46
+ valueNow,
47
+ valueMax
48
+ }) => `${valueNow} / ${valueMax}`,
49
+ size: 'medium',
50
+ valueMax: 100,
51
+ valueNow: 0,
52
+ as: 'div',
53
+ color: 'primary',
54
+ shouldAnimateOnMount: false,
55
+ // default to showing `success` color on completion
56
+ meterColor: ({
57
+ valueNow,
58
+ valueMax
59
+ }) => valueNow / valueMax >= 1 ? 'success' : 'brand'
60
+ };
61
+ _timeouts = [];
62
+ ref = null;
43
63
  constructor(props) {
44
64
  super(props);
45
- this._timeouts = [];
46
- this.ref = null;
47
- this.handleRef = el => {
48
- const elementRef = this.props.elementRef;
49
- this.ref = el;
50
- if (typeof elementRef === 'function') {
51
- elementRef(el);
52
- }
53
- };
54
65
  this.state = {
55
66
  shouldAnimateOnMount: props.shouldAnimateOnMount
56
67
  };
57
68
  }
69
+ handleRef = el => {
70
+ const {
71
+ elementRef
72
+ } = this.props;
73
+ this.ref = el;
74
+ if (typeof elementRef === 'function') {
75
+ elementRef(el);
76
+ }
77
+ };
58
78
  get makeStylesVariables() {
59
79
  return {
60
80
  shouldAnimateOnMount: this.state.shouldAnimateOnMount
61
81
  };
62
82
  }
63
83
  componentDidMount() {
64
- var _this$props$makeStyle, _this$props;
65
84
  if (this.state.shouldAnimateOnMount) {
66
85
  this._timeouts.push(setTimeout(() => {
67
86
  this.setState({
@@ -69,32 +88,31 @@ let ProgressCircle = (_dec = withStyle(generateStyle, generateComponentTheme), _
69
88
  });
70
89
  }, this.props.animationDelay || 500));
71
90
  }
72
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, this.makeStylesVariables);
91
+ this.props.makeStyles?.(this.makeStylesVariables);
73
92
  }
74
93
  componentDidUpdate() {
75
- var _this$props$makeStyle2, _this$props2;
76
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, this.makeStylesVariables);
94
+ this.props.makeStyles?.(this.makeStylesVariables);
77
95
  }
78
96
  componentWillUnmount() {
79
97
  this._timeouts.forEach(timeout => clearTimeout(timeout));
80
98
  }
81
99
  render() {
82
- var _styles$radii, _styles$radii2, _styles$radii3;
83
- const _this$props3 = this.props,
84
- color = _this$props3.color,
85
- renderValue = _this$props3.renderValue,
86
- formatScreenReaderValue = _this$props3.formatScreenReaderValue,
87
- meterColor = _this$props3.meterColor,
88
- valueNow = _this$props3.valueNow,
89
- valueMax = _this$props3.valueMax,
90
- screenReaderLabel = _this$props3.screenReaderLabel,
91
- size = _this$props3.size,
92
- styles = _this$props3.styles,
93
- props = _objectWithoutProperties(_this$props3, _excluded);
100
+ const {
101
+ color,
102
+ renderValue,
103
+ formatScreenReaderValue,
104
+ meterColor,
105
+ valueNow,
106
+ valueMax,
107
+ screenReaderLabel,
108
+ size,
109
+ styles,
110
+ ...props
111
+ } = this.props;
94
112
  const valueText = typeof formatScreenReaderValue === 'function' ? formatScreenReaderValue({
95
113
  valueNow: valueNow,
96
114
  valueMax: valueMax
97
- }) : void 0;
115
+ }) : undefined;
98
116
  // consolidating the label and aria-valuetext to put in aria-label because
99
117
  // NVDA does not read aria-valuetext: https://github.com/nvaccess/nvda/issues/913
100
118
  // But leaving aria-valuetext because JAWS ignores aria-label
@@ -104,13 +122,13 @@ let ProgressCircle = (_dec = withStyle(generateStyle, generateComponentTheme), _
104
122
  valueMax: valueMax
105
123
  });
106
124
  const style = {
107
- strokeDashoffset: `${styles === null || styles === void 0 ? void 0 : styles.dashOffset}em`
125
+ strokeDashoffset: `${styles?.dashOffset}em`
108
126
  };
109
127
  return _jsxs(View, {
110
128
  ...passthroughProps(props),
111
129
  as: this.props.as,
112
130
  elementRef: this.handleRef,
113
- css: styles === null || styles === void 0 ? void 0 : styles.progressCircle,
131
+ css: styles?.progressCircle,
114
132
  margin: this.props.margin,
115
133
  "data-cid": "ProgressCircle",
116
134
  children: [_jsx(ScreenReaderContent, {
@@ -120,55 +138,39 @@ let ProgressCircle = (_dec = withStyle(generateStyle, generateComponentTheme), _
120
138
  "aria-valuetext": labelAndValueText
121
139
  })
122
140
  }), value && _jsx("span", {
123
- css: styles === null || styles === void 0 ? void 0 : styles.center,
141
+ css: styles?.center,
124
142
  "aria-hidden": "true",
125
143
  children: _jsx("span", {
126
- css: styles === null || styles === void 0 ? void 0 : styles.value,
144
+ css: styles?.value,
127
145
  children: value
128
146
  })
129
147
  }), _jsxs("svg", {
130
- css: styles === null || styles === void 0 ? void 0 : styles.circle,
148
+ css: styles?.circle,
131
149
  role: "presentation",
132
150
  focusable: "false",
133
151
  children: [_jsx("circle", {
134
- css: styles === null || styles === void 0 ? void 0 : styles.track,
152
+ css: styles?.track,
135
153
  role: "presentation",
136
154
  cx: "50%",
137
155
  cy: "50%",
138
- r: styles === null || styles === void 0 ? void 0 : (_styles$radii = styles.radii) === null || _styles$radii === void 0 ? void 0 : _styles$radii.radius
156
+ r: styles?.radii?.radius
139
157
  }), _jsx("circle", {
140
- css: styles === null || styles === void 0 ? void 0 : styles.border,
158
+ css: styles?.border,
141
159
  role: "presentation",
142
160
  cx: "50%",
143
161
  cy: "50%",
144
- r: styles === null || styles === void 0 ? void 0 : (_styles$radii2 = styles.radii) === null || _styles$radii2 === void 0 ? void 0 : _styles$radii2.borderOffsetRadius
162
+ r: styles?.radii?.borderOffsetRadius
145
163
  }), _jsx("circle", {
146
- css: styles === null || styles === void 0 ? void 0 : styles.meter,
164
+ css: styles?.meter,
147
165
  role: "presentation",
148
166
  style: style,
149
167
  cx: "50%",
150
168
  cy: "50%",
151
- r: styles === null || styles === void 0 ? void 0 : (_styles$radii3 = styles.radii) === null || _styles$radii3 === void 0 ? void 0 : _styles$radii3.radius
169
+ r: styles?.radii?.radius
152
170
  })]
153
171
  })]
154
172
  });
155
173
  }
156
- }, _ProgressCircle.displayName = "ProgressCircle", _ProgressCircle.componentId = 'ProgressCircle', _ProgressCircle.allowedProps = allowedProps, _ProgressCircle.defaultProps = {
157
- formatScreenReaderValue: ({
158
- valueNow,
159
- valueMax
160
- }) => `${valueNow} / ${valueMax}`,
161
- size: 'medium',
162
- valueMax: 100,
163
- valueNow: 0,
164
- as: 'div',
165
- color: 'primary',
166
- shouldAnimateOnMount: false,
167
- // default to showing `success` color on completion
168
- meterColor: ({
169
- valueNow,
170
- valueMax
171
- }) => valueNow / valueMax >= 1 ? 'success' : 'brand'
172
- }, _ProgressCircle)) || _class);
174
+ }) || _class);
173
175
  export default ProgressCircle;
174
176
  export { ProgressCircle };
package/es/ProgressCircle/v1/styles.js CHANGED
@@ -33,14 +33,16 @@
33
33
  * @return {Object} The final style object, which will be used in the component
34
34
  */
35
35
  const generateStyle = (componentTheme, props, state) => {
36
- const size = props.size,
37
- color = props.color,
38
- meterColor = props.meterColor,
39
- _props$valueNow = props.valueNow,
40
- valueNow = _props$valueNow === void 0 ? 0 : _props$valueNow,
41
- _props$valueMax = props.valueMax,
42
- valueMax = _props$valueMax === void 0 ? 100 : _props$valueMax;
43
- const shouldAnimateOnMount = state.shouldAnimateOnMount;
36
+ const {
37
+ size,
38
+ color,
39
+ meterColor,
40
+ valueNow = 0,
41
+ valueMax = 100
42
+ } = props;
43
+ const {
44
+ shouldAnimateOnMount
45
+ } = state;
44
46
  const getMeterColorClassName = typeof meterColor === 'function' ? meterColor({
45
47
  valueNow,
46
48
  valueMax
package/es/ProgressCircle/v1/theme.js CHANGED
@@ -64,28 +64,29 @@ const transform = function (s) {
64
64
  * @return {Object} The final theme object with the overrides and component variables
65
65
  */
66
66
  const generateComponentTheme = theme => {
67
- var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6, _colors$contrasts7, _colors$contrasts8, _colors$contrasts9, _colors$contrasts0, _colors$contrasts1, _colors$contrasts10, _colors$contrasts11, _colors$contrasts12, _colors$contrasts13, _colors$contrasts14, _colors$contrasts15, _colors$contrasts16, _colors$contrasts17, _colors$contrasts18, _colors$contrasts19, _colors$contrasts20, _colors$contrasts21;
68
- const colors = theme.colors,
69
- typography = theme.typography,
70
- themeName = theme.key;
67
+ const {
68
+ colors,
69
+ typography,
70
+ key: themeName
71
+ } = theme;
71
72
  const themeSpecificStyle = {
72
73
  canvas: {
73
74
  color: theme['ic-brand-font-color-dark'],
74
75
  meterColorBrand: theme['ic-brand-primary']
75
76
  },
76
77
  'canvas-high-contrast': {
77
- meterColorBrandInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.white1010,
78
- meterColorSuccessInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.white1010,
79
- meterColorInfoInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.white1010,
80
- meterColorAlertInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.white1010,
81
- meterColorWarningInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.white1010,
82
- meterColorDangerInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.white1010
78
+ meterColorBrandInverse: colors?.contrasts?.white1010,
79
+ meterColorSuccessInverse: colors?.contrasts?.white1010,
80
+ meterColorInfoInverse: colors?.contrasts?.white1010,
81
+ meterColorAlertInverse: colors?.contrasts?.white1010,
82
+ meterColorWarningInverse: colors?.contrasts?.white1010,
83
+ meterColorDangerInverse: colors?.contrasts?.white1010
83
84
  }
84
85
  };
85
86
  const componentVariables = {
86
- fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
87
- fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
88
- lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightCondensed,
87
+ fontFamily: typography?.fontFamily,
88
+ fontWeight: typography?.fontWeightNormal,
89
+ lineHeight: typography?.lineHeightCondensed,
89
90
  xSmallSize: `${size.xSmall}em`,
90
91
  xSmallRadius: `${radius.xSmall}em`,
91
92
  xSmallCircumference: `${circumference(radius.xSmall)}em`,
@@ -110,26 +111,26 @@ const generateComponentTheme = theme => {
110
111
  largeTransform: `${transform(size.large)}em`,
111
112
  largeStrokeWidth: `${strokeWidth.large}em`,
112
113
  largeBorderOffset: `${borderOffsetRadius.large}em`,
113
- color: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.grey125125,
114
- colorInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts8 = colors.contrasts) === null || _colors$contrasts8 === void 0 ? void 0 : _colors$contrasts8.white1010,
115
- trackColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts9 = colors.contrasts) === null || _colors$contrasts9 === void 0 ? void 0 : _colors$contrasts9.white1010,
114
+ color: colors?.contrasts?.grey125125,
115
+ colorInverse: colors?.contrasts?.white1010,
116
+ trackColor: colors?.contrasts?.white1010,
116
117
  trackColorInverse: 'transparent',
117
- trackBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts0 = colors.contrasts) === null || _colors$contrasts0 === void 0 ? void 0 : _colors$contrasts0.grey3045,
118
- trackBorderColorInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts1 = colors.contrasts) === null || _colors$contrasts1 === void 0 ? void 0 : _colors$contrasts1.white1010,
118
+ trackBorderColor: colors?.contrasts?.grey3045,
119
+ trackBorderColorInverse: colors?.contrasts?.white1010,
119
120
  // variables are split out for inverse to allow
120
121
  // color value changes for inverse-high-contrast
121
- meterColorBrand: colors === null || colors === void 0 ? void 0 : (_colors$contrasts10 = colors.contrasts) === null || _colors$contrasts10 === void 0 ? void 0 : _colors$contrasts10.blue4570,
122
- meterColorBrandInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts11 = colors.contrasts) === null || _colors$contrasts11 === void 0 ? void 0 : _colors$contrasts11.blue4570,
123
- meterColorInfo: colors === null || colors === void 0 ? void 0 : (_colors$contrasts12 = colors.contrasts) === null || _colors$contrasts12 === void 0 ? void 0 : _colors$contrasts12.blue4570,
124
- meterColorInfoInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts13 = colors.contrasts) === null || _colors$contrasts13 === void 0 ? void 0 : _colors$contrasts13.blue4570,
125
- meterColorSuccess: colors === null || colors === void 0 ? void 0 : (_colors$contrasts14 = colors.contrasts) === null || _colors$contrasts14 === void 0 ? void 0 : _colors$contrasts14.green4570,
126
- meterColorSuccessInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts15 = colors.contrasts) === null || _colors$contrasts15 === void 0 ? void 0 : _colors$contrasts15.green4570,
127
- meterColorDanger: colors === null || colors === void 0 ? void 0 : (_colors$contrasts16 = colors.contrasts) === null || _colors$contrasts16 === void 0 ? void 0 : _colors$contrasts16.red4570,
128
- meterColorDangerInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts17 = colors.contrasts) === null || _colors$contrasts17 === void 0 ? void 0 : _colors$contrasts17.red4570,
129
- meterColorAlert: colors === null || colors === void 0 ? void 0 : (_colors$contrasts18 = colors.contrasts) === null || _colors$contrasts18 === void 0 ? void 0 : _colors$contrasts18.blue4570,
130
- meterColorAlertInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts19 = colors.contrasts) === null || _colors$contrasts19 === void 0 ? void 0 : _colors$contrasts19.blue4570,
131
- meterColorWarning: colors === null || colors === void 0 ? void 0 : (_colors$contrasts20 = colors.contrasts) === null || _colors$contrasts20 === void 0 ? void 0 : _colors$contrasts20.orange4570,
132
- meterColorWarningInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts21 = colors.contrasts) === null || _colors$contrasts21 === void 0 ? void 0 : _colors$contrasts21.orange4570
122
+ meterColorBrand: colors?.contrasts?.blue4570,
123
+ meterColorBrandInverse: colors?.contrasts?.blue4570,
124
+ meterColorInfo: colors?.contrasts?.blue4570,
125
+ meterColorInfoInverse: colors?.contrasts?.blue4570,
126
+ meterColorSuccess: colors?.contrasts?.green4570,
127
+ meterColorSuccessInverse: colors?.contrasts?.green4570,
128
+ meterColorDanger: colors?.contrasts?.red4570,
129
+ meterColorDangerInverse: colors?.contrasts?.red4570,
130
+ meterColorAlert: colors?.contrasts?.blue4570,
131
+ meterColorAlertInverse: colors?.contrasts?.blue4570,
132
+ meterColorWarning: colors?.contrasts?.orange4570,
133
+ meterColorWarningInverse: colors?.contrasts?.orange4570
133
134
  };
134
135
  return {
135
136
  ...componentVariables,
package/es/ProgressCircle/v2/index.js CHANGED
@@ -1,6 +1,4 @@
1
- import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
2
- const _excluded = ["color", "renderValue", "formatScreenReaderValue", "meterColor", "valueNow", "valueMax", "screenReaderLabel", "size", "styles"];
3
- var _dec, _class, _ProgressCircle;
1
+ var _dec, _class;
4
2
  /*
5
3
  * The MIT License (MIT)
6
4
  *
@@ -38,29 +36,50 @@ category: components
38
36
  ---
39
37
  **/
40
38
  import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
41
- let ProgressCircle = (_dec = withStyle(generateStyle), _dec(_class = (_ProgressCircle = class ProgressCircle extends Component {
39
+ let ProgressCircle = (_dec = withStyle(generateStyle), _dec(_class = class ProgressCircle extends Component {
40
+ static displayName = "ProgressCircle";
41
+ static componentId = 'ProgressCircle';
42
+ static allowedProps = allowedProps;
43
+ static defaultProps = {
44
+ formatScreenReaderValue: ({
45
+ valueNow,
46
+ valueMax
47
+ }) => `${valueNow} / ${valueMax}`,
48
+ size: 'medium',
49
+ valueMax: 100,
50
+ valueNow: 0,
51
+ as: 'div',
52
+ color: 'primary',
53
+ shouldAnimateOnMount: false,
54
+ // default to showing `success` color on completion
55
+ meterColor: ({
56
+ valueNow,
57
+ valueMax
58
+ }) => valueNow / valueMax >= 1 ? 'success' : 'brand'
59
+ };
60
+ _timeouts = [];
61
+ ref = null;
42
62
  constructor(props) {
43
63
  super(props);
44
- this._timeouts = [];
45
- this.ref = null;
46
- this.handleRef = el => {
47
- const elementRef = this.props.elementRef;
48
- this.ref = el;
49
- if (typeof elementRef === 'function') {
50
- elementRef(el);
51
- }
52
- };
53
64
  this.state = {
54
65
  shouldAnimateOnMount: props.shouldAnimateOnMount
55
66
  };
56
67
  }
68
+ handleRef = el => {
69
+ const {
70
+ elementRef
71
+ } = this.props;
72
+ this.ref = el;
73
+ if (typeof elementRef === 'function') {
74
+ elementRef(el);
75
+ }
76
+ };
57
77
  get makeStylesVariables() {
58
78
  return {
59
79
  shouldAnimateOnMount: this.state.shouldAnimateOnMount
60
80
  };
61
81
  }
62
82
  componentDidMount() {
63
- var _this$props$makeStyle, _this$props;
64
83
  if (this.state.shouldAnimateOnMount) {
65
84
  this._timeouts.push(setTimeout(() => {
66
85
  this.setState({
@@ -68,32 +87,31 @@ let ProgressCircle = (_dec = withStyle(generateStyle), _dec(_class = (_ProgressC
68
87
  });
69
88
  }, this.props.animationDelay || 500));
70
89
  }
71
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, this.makeStylesVariables);
90
+ this.props.makeStyles?.(this.makeStylesVariables);
72
91
  }
73
92
  componentDidUpdate() {
74
- var _this$props$makeStyle2, _this$props2;
75
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, this.makeStylesVariables);
93
+ this.props.makeStyles?.(this.makeStylesVariables);
76
94
  }
77
95
  componentWillUnmount() {
78
96
  this._timeouts.forEach(timeout => clearTimeout(timeout));
79
97
  }
80
98
  render() {
81
- var _styles$radii, _styles$radii2, _styles$radii3;
82
- const _this$props3 = this.props,
83
- color = _this$props3.color,
84
- renderValue = _this$props3.renderValue,
85
- formatScreenReaderValue = _this$props3.formatScreenReaderValue,
86
- meterColor = _this$props3.meterColor,
87
- valueNow = _this$props3.valueNow,
88
- valueMax = _this$props3.valueMax,
89
- screenReaderLabel = _this$props3.screenReaderLabel,
90
- size = _this$props3.size,
91
- styles = _this$props3.styles,
92
- props = _objectWithoutProperties(_this$props3, _excluded);
99
+ const {
100
+ color,
101
+ renderValue,
102
+ formatScreenReaderValue,
103
+ meterColor,
104
+ valueNow,
105
+ valueMax,
106
+ screenReaderLabel,
107
+ size,
108
+ styles,
109
+ ...props
110
+ } = this.props;
93
111
  const valueText = typeof formatScreenReaderValue === 'function' ? formatScreenReaderValue({
94
112
  valueNow: valueNow,
95
113
  valueMax: valueMax
96
- }) : void 0;
114
+ }) : undefined;
97
115
  // consolidating the label and aria-valuetext to put in aria-label because
98
116
  // NVDA does not read aria-valuetext: https://github.com/nvaccess/nvda/issues/913
99
117
  // But leaving aria-valuetext because JAWS ignores aria-label
@@ -103,13 +121,13 @@ let ProgressCircle = (_dec = withStyle(generateStyle), _dec(_class = (_ProgressC
103
121
  valueMax: valueMax
104
122
  });
105
123
  const style = {
106
- strokeDashoffset: `${styles === null || styles === void 0 ? void 0 : styles.dashOffset}em`
124
+ strokeDashoffset: `${styles?.dashOffset}em`
107
125
  };
108
126
  return _jsxs(View, {
109
127
  ...passthroughProps(props),
110
128
  as: this.props.as,
111
129
  elementRef: this.handleRef,
112
- css: styles === null || styles === void 0 ? void 0 : styles.progressCircle,
130
+ css: styles?.progressCircle,
113
131
  margin: this.props.margin,
114
132
  "data-cid": "ProgressCircle",
115
133
  children: [_jsx(ScreenReaderContent, {
@@ -119,55 +137,39 @@ let ProgressCircle = (_dec = withStyle(generateStyle), _dec(_class = (_ProgressC
119
137
  "aria-valuetext": labelAndValueText
120
138
  })
121
139
  }), value && _jsx("span", {
122
- css: styles === null || styles === void 0 ? void 0 : styles.center,
140
+ css: styles?.center,
123
141
  "aria-hidden": "true",
124
142
  children: _jsx("span", {
125
- css: styles === null || styles === void 0 ? void 0 : styles.value,
143
+ css: styles?.value,
126
144
  children: value
127
145
  })
128
146
  }), _jsxs("svg", {
129
- css: styles === null || styles === void 0 ? void 0 : styles.circle,
147
+ css: styles?.circle,
130
148
  role: "presentation",
131
149
  focusable: "false",
132
150
  children: [_jsx("circle", {
133
- css: styles === null || styles === void 0 ? void 0 : styles.track,
151
+ css: styles?.track,
134
152
  role: "presentation",
135
153
  cx: "50%",
136
154
  cy: "50%",
137
- r: styles === null || styles === void 0 ? void 0 : (_styles$radii = styles.radii) === null || _styles$radii === void 0 ? void 0 : _styles$radii.radius
155
+ r: styles?.radii?.radius
138
156
  }), _jsx("circle", {
139
- css: styles === null || styles === void 0 ? void 0 : styles.border,
157
+ css: styles?.border,
140
158
  role: "presentation",
141
159
  cx: "50%",
142
160
  cy: "50%",
143
- r: styles === null || styles === void 0 ? void 0 : (_styles$radii2 = styles.radii) === null || _styles$radii2 === void 0 ? void 0 : _styles$radii2.borderOffsetRadius
161
+ r: styles?.radii?.borderOffsetRadius
144
162
  }), _jsx("circle", {
145
- css: styles === null || styles === void 0 ? void 0 : styles.meter,
163
+ css: styles?.meter,
146
164
  role: "presentation",
147
165
  style: style,
148
166
  cx: "50%",
149
167
  cy: "50%",
150
- r: styles === null || styles === void 0 ? void 0 : (_styles$radii3 = styles.radii) === null || _styles$radii3 === void 0 ? void 0 : _styles$radii3.radius
168
+ r: styles?.radii?.radius
151
169
  })]
152
170
  })]
153
171
  });
154
172
  }
155
- }, _ProgressCircle.displayName = "ProgressCircle", _ProgressCircle.componentId = 'ProgressCircle', _ProgressCircle.allowedProps = allowedProps, _ProgressCircle.defaultProps = {
156
- formatScreenReaderValue: ({
157
- valueNow,
158
- valueMax
159
- }) => `${valueNow} / ${valueMax}`,
160
- size: 'medium',
161
- valueMax: 100,
162
- valueNow: 0,
163
- as: 'div',
164
- color: 'primary',
165
- shouldAnimateOnMount: false,
166
- // default to showing `success` color on completion
167
- meterColor: ({
168
- valueNow,
169
- valueMax
170
- }) => valueNow / valueMax >= 1 ? 'success' : 'brand'
171
- }, _ProgressCircle)) || _class);
173
+ }) || _class);
172
174
  export default ProgressCircle;
173
175
  export { ProgressCircle };
package/es/ProgressCircle/v2/styles.js CHANGED
@@ -33,14 +33,16 @@
33
33
  * @return {Object} The final style object, which will be used in the component
34
34
  */
35
35
  const generateStyle = (componentTheme, props, _sharedTokens, state) => {
36
- const size = props.size,
37
- color = props.color,
38
- meterColor = props.meterColor,
39
- _props$valueNow = props.valueNow,
40
- valueNow = _props$valueNow === void 0 ? 0 : _props$valueNow,
41
- _props$valueMax = props.valueMax,
42
- valueMax = _props$valueMax === void 0 ? 100 : _props$valueMax;
43
- const shouldAnimateOnMount = state.shouldAnimateOnMount;
36
+ const {
37
+ size,
38
+ color,
39
+ meterColor,
40
+ valueNow = 0,
41
+ valueMax = 100
42
+ } = props;
43
+ const {
44
+ shouldAnimateOnMount
45
+ } = state;
44
46
  const getMeterColorClassName = typeof meterColor === 'function' ? meterColor({
45
47
  valueNow,
46
48
  valueMax