@instructure/ui-progress 11.7.3-snapshot-7 → 11.7.3-snapshot-26

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/CHANGELOG.md CHANGED
@@ -3,9 +3,12 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
- ## [11.7.3-snapshot-7](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-7) (2026-04-29)
6
+ ## [11.7.3-snapshot-26](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-26) (2026-05-05)
7
7
 
8
- **Note:** Version bump only for package @instructure/ui-progress
8
+
9
+ ### Bug Fixes
10
+
11
+ * **many:** update dependencies, remove lots of Babel plugins, remove Webpack 4 support ([f916fca](https://github.com/instructure/instructure-ui/commit/f916fcafdddcb2d7de401f93e8ff92cfdfa47bba))
9
12
 
10
13
 
11
14
 
package/es/ProgressBar/v1/index.js CHANGED
@@ -1,6 +1,4 @@
1
- import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
2
- const _excluded = ["renderValue", "formatScreenReaderValue", "valueNow", "valueMax", "screenReaderLabel", "size", "color", "meterColor", "renderValueInside", "styles"];
3
- var _dec, _class, _ProgressBar;
1
+ var _dec, _class;
4
2
  /*
5
3
  * The MIT License (MIT)
6
4
  *
@@ -38,43 +36,61 @@ category: components
38
36
  ---
39
37
  **/
40
38
  import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
41
- let ProgressBar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_ProgressBar = class ProgressBar extends Component {
42
- constructor(...args) {
43
- super(...args);
44
- this.ref = null;
45
- this.handleRef = el => {
46
- const elementRef = this.props.elementRef;
47
- this.ref = el;
48
- if (typeof elementRef === 'function') {
49
- elementRef(el);
50
- }
51
- };
52
- }
39
+ let ProgressBar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = class ProgressBar extends Component {
40
+ static displayName = "ProgressBar";
41
+ static componentId = 'ProgressBar';
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
+ shouldAnimate: false,
54
+ // default to showing `success` color on completion
55
+ meterColor: ({
56
+ valueNow,
57
+ valueMax
58
+ }) => valueNow / valueMax >= 1 ? 'success' : 'brand'
59
+ };
60
+ ref = null;
53
61
  componentDidMount() {
54
- var _this$props$makeStyle, _this$props;
55
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
62
+ this.props.makeStyles?.();
56
63
  }
57
64
  componentDidUpdate() {
58
- var _this$props$makeStyle2, _this$props2;
59
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
65
+ this.props.makeStyles?.();
60
66
  }
67
+ handleRef = el => {
68
+ const {
69
+ elementRef
70
+ } = this.props;
71
+ this.ref = el;
72
+ if (typeof elementRef === 'function') {
73
+ elementRef(el);
74
+ }
75
+ };
61
76
  render() {
62
- const _this$props3 = this.props,
63
- renderValue = _this$props3.renderValue,
64
- formatScreenReaderValue = _this$props3.formatScreenReaderValue,
65
- valueNow = _this$props3.valueNow,
66
- valueMax = _this$props3.valueMax,
67
- screenReaderLabel = _this$props3.screenReaderLabel,
68
- size = _this$props3.size,
69
- color = _this$props3.color,
70
- meterColor = _this$props3.meterColor,
71
- renderValueInside = _this$props3.renderValueInside,
72
- styles = _this$props3.styles,
73
- props = _objectWithoutProperties(_this$props3, _excluded);
77
+ const {
78
+ renderValue,
79
+ formatScreenReaderValue,
80
+ valueNow,
81
+ valueMax,
82
+ screenReaderLabel,
83
+ size,
84
+ color,
85
+ meterColor,
86
+ renderValueInside,
87
+ styles,
88
+ ...props
89
+ } = this.props;
74
90
  const valueText = typeof formatScreenReaderValue === 'function' ? formatScreenReaderValue({
75
91
  valueNow: valueNow,
76
92
  valueMax: valueMax
77
- }) : void 0;
93
+ }) : undefined;
78
94
  const value = callRenderProp(renderValue, {
79
95
  valueNow: valueNow,
80
96
  valueMax: valueMax
@@ -82,50 +98,34 @@ let ProgressBar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
82
98
  return _jsxs(View, {
83
99
  ...passthroughProps(props),
84
100
  as: this.props.as,
85
- css: styles === null || styles === void 0 ? void 0 : styles.progressBar,
101
+ css: styles?.progressBar,
86
102
  margin: this.props.margin,
87
103
  elementRef: this.handleRef,
88
104
  "data-cid": "ProgressBar",
89
105
  children: [_jsxs("span", {
90
- css: styles === null || styles === void 0 ? void 0 : styles.trackLayout,
106
+ css: styles?.trackLayout,
91
107
  children: [_jsx("progress", {
92
- css: styles === null || styles === void 0 ? void 0 : styles.htmlProgress,
108
+ css: styles?.htmlProgress,
93
109
  max: valueMax,
94
110
  value: valueNow,
95
111
  "aria-valuetext": valueText,
96
112
  "aria-label": screenReaderLabel
97
113
  }), _jsx("span", {
98
- css: styles === null || styles === void 0 ? void 0 : styles.track,
114
+ css: styles?.track,
99
115
  role: "presentation",
100
116
  "aria-hidden": "true",
101
117
  children: _jsx("span", {
102
- css: styles === null || styles === void 0 ? void 0 : styles.trackValue,
118
+ css: styles?.trackValue,
103
119
  children: renderValueInside && value
104
120
  })
105
121
  })]
106
122
  }), value && !renderValueInside && _jsx("span", {
107
- css: styles === null || styles === void 0 ? void 0 : styles.value,
123
+ css: styles?.value,
108
124
  "aria-hidden": "true",
109
125
  children: value
110
126
  })]
111
127
  });
112
128
  }
113
- }, _ProgressBar.displayName = "ProgressBar", _ProgressBar.componentId = 'ProgressBar', _ProgressBar.allowedProps = allowedProps, _ProgressBar.defaultProps = {
114
- formatScreenReaderValue: ({
115
- valueNow,
116
- valueMax
117
- }) => `${valueNow} / ${valueMax}`,
118
- size: 'medium',
119
- valueMax: 100,
120
- valueNow: 0,
121
- as: 'div',
122
- color: 'primary',
123
- shouldAnimate: false,
124
- // default to showing `success` color on completion
125
- meterColor: ({
126
- valueNow,
127
- valueMax
128
- }) => valueNow / valueMax >= 1 ? 'success' : 'brand'
129
- }, _ProgressBar)) || _class);
129
+ }) || _class);
130
130
  export default ProgressBar;
131
131
  export { ProgressBar };
package/es/ProgressBar/v1/styles.js CHANGED
@@ -33,14 +33,14 @@
33
33
  * @return {Object} The final style object, which will be used in the component
34
34
  */
35
35
  const generateStyle = (componentTheme, props) => {
36
- const _props$valueNow = props.valueNow,
37
- valueNow = _props$valueNow === void 0 ? 0 : _props$valueNow,
38
- _props$valueMax = props.valueMax,
39
- valueMax = _props$valueMax === void 0 ? 100 : _props$valueMax,
40
- size = props.size,
41
- color = props.color,
42
- meterColor = props.meterColor,
43
- shouldAnimate = props.shouldAnimate;
36
+ const {
37
+ valueNow = 0,
38
+ valueMax = 100,
39
+ size,
40
+ color,
41
+ meterColor,
42
+ shouldAnimate
43
+ } = props;
44
44
  const meterColorClassName = typeof meterColor === 'function' ? meterColor({
45
45
  valueNow,
46
46
  valueMax
package/es/ProgressBar/v1/theme.js CHANGED
@@ -28,61 +28,62 @@
28
28
  * @return {Object} The final theme object with the overrides and component variables
29
29
  */
30
30
  const generateComponentTheme = theme => {
31
- 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;
32
- const borders = theme.borders,
33
- colors = theme.colors,
34
- spacing = theme.spacing,
35
- typography = theme.typography,
36
- themeName = theme.key;
31
+ const {
32
+ borders,
33
+ colors,
34
+ spacing,
35
+ typography,
36
+ key: themeName
37
+ } = theme;
37
38
  const themeSpecificStyle = {
38
39
  canvas: {
39
40
  meterColorBrand: theme['ic-brand-primary']
40
41
  },
41
42
  'canvas-high-contrast': {
42
- meterColorBrandInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.white1010,
43
- meterColorSuccessInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.white1010,
44
- meterColorInfoInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.white1010,
45
- meterColorAlertInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.white1010,
46
- meterColorWarningInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.white1010,
47
- meterColorDangerInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.white1010
43
+ meterColorBrandInverse: colors?.contrasts?.white1010,
44
+ meterColorSuccessInverse: colors?.contrasts?.white1010,
45
+ meterColorInfoInverse: colors?.contrasts?.white1010,
46
+ meterColorAlertInverse: colors?.contrasts?.white1010,
47
+ meterColorWarningInverse: colors?.contrasts?.white1010,
48
+ meterColorDangerInverse: colors?.contrasts?.white1010
48
49
  }
49
50
  };
50
51
  const componentVariables = {
51
- fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
52
- fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
53
- lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightCondensed,
54
- fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
55
- xSmallHeight: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
56
- xSmallValueFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeXSmall,
52
+ fontFamily: typography?.fontFamily,
53
+ fontWeight: typography?.fontWeightNormal,
54
+ lineHeight: typography?.lineHeightCondensed,
55
+ fontSize: typography?.fontSizeMedium,
56
+ xSmallHeight: spacing?.xSmall,
57
+ xSmallValueFontSize: typography?.fontSizeXSmall,
57
58
  smallHeight: '1.125rem',
58
59
  // product design wants = 18px
59
- smallValueFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeXSmall,
60
- mediumHeight: spacing === null || spacing === void 0 ? void 0 : spacing.medium,
61
- mediumValueFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
62
- largeHeight: spacing === null || spacing === void 0 ? void 0 : spacing.large,
63
- largeValueFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
64
- valuePadding: `${spacing === null || spacing === void 0 ? void 0 : spacing.xxSmall}`,
60
+ smallValueFontSize: typography?.fontSizeXSmall,
61
+ mediumHeight: spacing?.medium,
62
+ mediumValueFontSize: typography?.fontSizeSmall,
63
+ largeHeight: spacing?.large,
64
+ largeValueFontSize: typography?.fontSizeMedium,
65
+ valuePadding: `${spacing?.xxSmall}`,
65
66
  // variables are split out for inverse to allow
66
67
  // color value changes for inverse-high-constrast
67
- meterColorBrand: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.blue4570,
68
- meterColorBrandInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts8 = colors.contrasts) === null || _colors$contrasts8 === void 0 ? void 0 : _colors$contrasts8.blue4570,
69
- meterColorInfo: colors === null || colors === void 0 ? void 0 : (_colors$contrasts9 = colors.contrasts) === null || _colors$contrasts9 === void 0 ? void 0 : _colors$contrasts9.blue4570,
70
- meterColorInfoInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts0 = colors.contrasts) === null || _colors$contrasts0 === void 0 ? void 0 : _colors$contrasts0.blue4570,
71
- meterColorSuccess: colors === null || colors === void 0 ? void 0 : (_colors$contrasts1 = colors.contrasts) === null || _colors$contrasts1 === void 0 ? void 0 : _colors$contrasts1.green4570,
72
- meterColorSuccessInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts10 = colors.contrasts) === null || _colors$contrasts10 === void 0 ? void 0 : _colors$contrasts10.green4570,
73
- meterColorDanger: colors === null || colors === void 0 ? void 0 : (_colors$contrasts11 = colors.contrasts) === null || _colors$contrasts11 === void 0 ? void 0 : _colors$contrasts11.red4570,
74
- meterColorDangerInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts12 = colors.contrasts) === null || _colors$contrasts12 === void 0 ? void 0 : _colors$contrasts12.red4570,
75
- meterColorAlert: colors === null || colors === void 0 ? void 0 : (_colors$contrasts13 = colors.contrasts) === null || _colors$contrasts13 === void 0 ? void 0 : _colors$contrasts13.blue4570,
76
- meterColorAlertInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts14 = colors.contrasts) === null || _colors$contrasts14 === void 0 ? void 0 : _colors$contrasts14.blue4570,
77
- meterColorWarning: colors === null || colors === void 0 ? void 0 : (_colors$contrasts15 = colors.contrasts) === null || _colors$contrasts15 === void 0 ? void 0 : _colors$contrasts15.orange4570,
78
- meterColorWarningInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts16 = colors.contrasts) === null || _colors$contrasts16 === void 0 ? void 0 : _colors$contrasts16.orange4570,
79
- meterBorderWidthInverse: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
68
+ meterColorBrand: colors?.contrasts?.blue4570,
69
+ meterColorBrandInverse: colors?.contrasts?.blue4570,
70
+ meterColorInfo: colors?.contrasts?.blue4570,
71
+ meterColorInfoInverse: colors?.contrasts?.blue4570,
72
+ meterColorSuccess: colors?.contrasts?.green4570,
73
+ meterColorSuccessInverse: colors?.contrasts?.green4570,
74
+ meterColorDanger: colors?.contrasts?.red4570,
75
+ meterColorDangerInverse: colors?.contrasts?.red4570,
76
+ meterColorAlert: colors?.contrasts?.blue4570,
77
+ meterColorAlertInverse: colors?.contrasts?.blue4570,
78
+ meterColorWarning: colors?.contrasts?.orange4570,
79
+ meterColorWarningInverse: colors?.contrasts?.orange4570,
80
+ meterBorderWidthInverse: borders?.widthSmall,
80
81
  meterBorderColorInverse: 'transparent',
81
- trackColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts17 = colors.contrasts) === null || _colors$contrasts17 === void 0 ? void 0 : _colors$contrasts17.white1010,
82
+ trackColor: colors?.contrasts?.white1010,
82
83
  trackColorInverse: 'transparent',
83
- trackBottomBorderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
84
- trackBottomBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts18 = colors.contrasts) === null || _colors$contrasts18 === void 0 ? void 0 : _colors$contrasts18.grey3045,
85
- trackBottomBorderColorInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts19 = colors.contrasts) === null || _colors$contrasts19 === void 0 ? void 0 : _colors$contrasts19.white1010,
84
+ trackBottomBorderWidth: borders?.widthSmall,
85
+ trackBottomBorderColor: colors?.contrasts?.grey3045,
86
+ trackBottomBorderColorInverse: colors?.contrasts?.white1010,
86
87
  borderRadius: '0px'
87
88
  };
88
89
  return {
package/es/ProgressBar/v2/index.js CHANGED
@@ -1,6 +1,4 @@
1
- import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
2
- const _excluded = ["renderValue", "formatScreenReaderValue", "valueNow", "valueMax", "screenReaderLabel", "size", "color", "meterColor", "renderValueInside", "styles"];
3
- var _dec, _class, _ProgressBar;
1
+ var _dec, _class;
4
2
  /*
5
3
  * The MIT License (MIT)
6
4
  *
@@ -37,43 +35,61 @@ category: components
37
35
  ---
38
36
  **/
39
37
  import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
40
- let ProgressBar = (_dec = withStyle(generateStyle), _dec(_class = (_ProgressBar = class ProgressBar extends Component {
41
- constructor(...args) {
42
- super(...args);
43
- this.ref = null;
44
- this.handleRef = el => {
45
- const elementRef = this.props.elementRef;
46
- this.ref = el;
47
- if (typeof elementRef === 'function') {
48
- elementRef(el);
49
- }
50
- };
51
- }
38
+ let ProgressBar = (_dec = withStyle(generateStyle), _dec(_class = class ProgressBar extends Component {
39
+ static displayName = "ProgressBar";
40
+ static componentId = 'ProgressBar';
41
+ static allowedProps = allowedProps;
42
+ static defaultProps = {
43
+ formatScreenReaderValue: ({
44
+ valueNow,
45
+ valueMax
46
+ }) => `${valueNow} / ${valueMax}`,
47
+ size: 'medium',
48
+ valueMax: 100,
49
+ valueNow: 0,
50
+ as: 'div',
51
+ color: 'primary',
52
+ shouldAnimate: false,
53
+ // default to showing `success` color on completion
54
+ meterColor: ({
55
+ valueNow,
56
+ valueMax
57
+ }) => valueNow / valueMax >= 1 ? 'success' : 'brand'
58
+ };
59
+ ref = null;
52
60
  componentDidMount() {
53
- var _this$props$makeStyle, _this$props;
54
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
61
+ this.props.makeStyles?.();
55
62
  }
56
63
  componentDidUpdate() {
57
- var _this$props$makeStyle2, _this$props2;
58
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
64
+ this.props.makeStyles?.();
59
65
  }
66
+ handleRef = el => {
67
+ const {
68
+ elementRef
69
+ } = this.props;
70
+ this.ref = el;
71
+ if (typeof elementRef === 'function') {
72
+ elementRef(el);
73
+ }
74
+ };
60
75
  render() {
61
- const _this$props3 = this.props,
62
- renderValue = _this$props3.renderValue,
63
- formatScreenReaderValue = _this$props3.formatScreenReaderValue,
64
- valueNow = _this$props3.valueNow,
65
- valueMax = _this$props3.valueMax,
66
- screenReaderLabel = _this$props3.screenReaderLabel,
67
- size = _this$props3.size,
68
- color = _this$props3.color,
69
- meterColor = _this$props3.meterColor,
70
- renderValueInside = _this$props3.renderValueInside,
71
- styles = _this$props3.styles,
72
- props = _objectWithoutProperties(_this$props3, _excluded);
76
+ const {
77
+ renderValue,
78
+ formatScreenReaderValue,
79
+ valueNow,
80
+ valueMax,
81
+ screenReaderLabel,
82
+ size,
83
+ color,
84
+ meterColor,
85
+ renderValueInside,
86
+ styles,
87
+ ...props
88
+ } = this.props;
73
89
  const valueText = typeof formatScreenReaderValue === 'function' ? formatScreenReaderValue({
74
90
  valueNow: valueNow,
75
91
  valueMax: valueMax
76
- }) : void 0;
92
+ }) : undefined;
77
93
  const value = callRenderProp(renderValue, {
78
94
  valueNow: valueNow,
79
95
  valueMax: valueMax
@@ -81,50 +97,34 @@ let ProgressBar = (_dec = withStyle(generateStyle), _dec(_class = (_ProgressBar
81
97
  return _jsxs(View, {
82
98
  ...passthroughProps(props),
83
99
  as: this.props.as,
84
- css: styles === null || styles === void 0 ? void 0 : styles.progressBar,
100
+ css: styles?.progressBar,
85
101
  margin: this.props.margin,
86
102
  elementRef: this.handleRef,
87
103
  "data-cid": "ProgressBar",
88
104
  children: [_jsxs("span", {
89
- css: styles === null || styles === void 0 ? void 0 : styles.trackLayout,
105
+ css: styles?.trackLayout,
90
106
  children: [_jsx("progress", {
91
- css: styles === null || styles === void 0 ? void 0 : styles.htmlProgress,
107
+ css: styles?.htmlProgress,
92
108
  max: valueMax,
93
109
  value: valueNow,
94
110
  "aria-valuetext": valueText,
95
111
  "aria-label": screenReaderLabel
96
112
  }), _jsx("span", {
97
- css: styles === null || styles === void 0 ? void 0 : styles.track,
113
+ css: styles?.track,
98
114
  role: "presentation",
99
115
  "aria-hidden": "true",
100
116
  children: _jsx("span", {
101
- css: styles === null || styles === void 0 ? void 0 : styles.trackValue,
117
+ css: styles?.trackValue,
102
118
  children: renderValueInside && value
103
119
  })
104
120
  })]
105
121
  }), value && !renderValueInside && _jsx("span", {
106
- css: styles === null || styles === void 0 ? void 0 : styles.value,
122
+ css: styles?.value,
107
123
  "aria-hidden": "true",
108
124
  children: value
109
125
  })]
110
126
  });
111
127
  }
112
- }, _ProgressBar.displayName = "ProgressBar", _ProgressBar.componentId = 'ProgressBar', _ProgressBar.allowedProps = allowedProps, _ProgressBar.defaultProps = {
113
- formatScreenReaderValue: ({
114
- valueNow,
115
- valueMax
116
- }) => `${valueNow} / ${valueMax}`,
117
- size: 'medium',
118
- valueMax: 100,
119
- valueNow: 0,
120
- as: 'div',
121
- color: 'primary',
122
- shouldAnimate: false,
123
- // default to showing `success` color on completion
124
- meterColor: ({
125
- valueNow,
126
- valueMax
127
- }) => valueNow / valueMax >= 1 ? 'success' : 'brand'
128
- }, _ProgressBar)) || _class);
128
+ }) || _class);
129
129
  export default ProgressBar;
130
130
  export { ProgressBar };
package/es/ProgressBar/v2/styles.js CHANGED
@@ -33,14 +33,14 @@
33
33
  * @return {Object} The final style object, which will be used in the component
34
34
  */
35
35
  const generateStyle = (componentTheme, props, _sharedTokens) => {
36
- const _props$valueNow = props.valueNow,
37
- valueNow = _props$valueNow === void 0 ? 0 : _props$valueNow,
38
- _props$valueMax = props.valueMax,
39
- valueMax = _props$valueMax === void 0 ? 100 : _props$valueMax,
40
- size = props.size,
41
- color = props.color,
42
- meterColor = props.meterColor,
43
- shouldAnimate = props.shouldAnimate;
36
+ const {
37
+ valueNow = 0,
38
+ valueMax = 100,
39
+ size,
40
+ color,
41
+ meterColor,
42
+ shouldAnimate
43
+ } = props;
44
44
  const meterColorClassName = typeof meterColor === 'function' ? meterColor({
45
45
  valueNow,
46
46
  valueMax