@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/lib/ProgressBar/v1/index.js CHANGED
@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
7
  exports.default = exports.ProgressBar = void 0;
8
- var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
9
8
  var _react = require("react");
10
9
  var _v11_ = require("@instructure/ui-view/v11_6");
11
10
  var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
@@ -15,8 +14,7 @@ var _styles = _interopRequireDefault(require("./styles"));
15
14
  var _theme = _interopRequireDefault(require("./theme"));
16
15
  var _props = require("./props");
17
16
  var _jsxRuntime = require("@emotion/react/jsx-runtime");
18
- const _excluded = ["renderValue", "formatScreenReaderValue", "valueNow", "valueMax", "screenReaderLabel", "size", "color", "meterColor", "renderValueInside", "styles"];
19
- var _dec, _class, _ProgressBar;
17
+ var _dec, _class;
20
18
  /*
21
19
  * The MIT License (MIT)
22
20
  *
@@ -45,43 +43,61 @@ var _dec, _class, _ProgressBar;
45
43
  category: components
46
44
  ---
47
45
  **/
48
- let ProgressBar = exports.ProgressBar = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = (_ProgressBar = class ProgressBar extends _react.Component {
49
- constructor(...args) {
50
- super(...args);
51
- this.ref = null;
52
- this.handleRef = el => {
53
- const elementRef = this.props.elementRef;
54
- this.ref = el;
55
- if (typeof elementRef === 'function') {
56
- elementRef(el);
57
- }
58
- };
59
- }
46
+ let ProgressBar = exports.ProgressBar = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = class ProgressBar extends _react.Component {
47
+ static displayName = "ProgressBar";
48
+ static componentId = 'ProgressBar';
49
+ static allowedProps = _props.allowedProps;
50
+ static defaultProps = {
51
+ formatScreenReaderValue: ({
52
+ valueNow,
53
+ valueMax
54
+ }) => `${valueNow} / ${valueMax}`,
55
+ size: 'medium',
56
+ valueMax: 100,
57
+ valueNow: 0,
58
+ as: 'div',
59
+ color: 'primary',
60
+ shouldAnimate: false,
61
+ // default to showing `success` color on completion
62
+ meterColor: ({
63
+ valueNow,
64
+ valueMax
65
+ }) => valueNow / valueMax >= 1 ? 'success' : 'brand'
66
+ };
67
+ ref = null;
60
68
  componentDidMount() {
61
- var _this$props$makeStyle, _this$props;
62
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
69
+ this.props.makeStyles?.();
63
70
  }
64
71
  componentDidUpdate() {
65
- var _this$props$makeStyle2, _this$props2;
66
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
72
+ this.props.makeStyles?.();
67
73
  }
74
+ handleRef = el => {
75
+ const {
76
+ elementRef
77
+ } = this.props;
78
+ this.ref = el;
79
+ if (typeof elementRef === 'function') {
80
+ elementRef(el);
81
+ }
82
+ };
68
83
  render() {
69
- const _this$props3 = this.props,
70
- renderValue = _this$props3.renderValue,
71
- formatScreenReaderValue = _this$props3.formatScreenReaderValue,
72
- valueNow = _this$props3.valueNow,
73
- valueMax = _this$props3.valueMax,
74
- screenReaderLabel = _this$props3.screenReaderLabel,
75
- size = _this$props3.size,
76
- color = _this$props3.color,
77
- meterColor = _this$props3.meterColor,
78
- renderValueInside = _this$props3.renderValueInside,
79
- styles = _this$props3.styles,
80
- props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
84
+ const {
85
+ renderValue,
86
+ formatScreenReaderValue,
87
+ valueNow,
88
+ valueMax,
89
+ screenReaderLabel,
90
+ size,
91
+ color,
92
+ meterColor,
93
+ renderValueInside,
94
+ styles,
95
+ ...props
96
+ } = this.props;
81
97
  const valueText = typeof formatScreenReaderValue === 'function' ? formatScreenReaderValue({
82
98
  valueNow: valueNow,
83
99
  valueMax: valueMax
84
- }) : void 0;
100
+ }) : undefined;
85
101
  const value = (0, _callRenderProp.callRenderProp)(renderValue, {
86
102
  valueNow: valueNow,
87
103
  valueMax: valueMax
@@ -89,49 +105,33 @@ let ProgressBar = exports.ProgressBar = (_dec = (0, _emotion.withStyleLegacy)(_s
89
105
  return (0, _jsxRuntime.jsxs)(_v11_.View, {
90
106
  ...(0, _passthroughProps.passthroughProps)(props),
91
107
  as: this.props.as,
92
- css: styles === null || styles === void 0 ? void 0 : styles.progressBar,
108
+ css: styles?.progressBar,
93
109
  margin: this.props.margin,
94
110
  elementRef: this.handleRef,
95
111
  "data-cid": "ProgressBar",
96
112
  children: [(0, _jsxRuntime.jsxs)("span", {
97
- css: styles === null || styles === void 0 ? void 0 : styles.trackLayout,
113
+ css: styles?.trackLayout,
98
114
  children: [(0, _jsxRuntime.jsx)("progress", {
99
- css: styles === null || styles === void 0 ? void 0 : styles.htmlProgress,
115
+ css: styles?.htmlProgress,
100
116
  max: valueMax,
101
117
  value: valueNow,
102
118
  "aria-valuetext": valueText,
103
119
  "aria-label": screenReaderLabel
104
120
  }), (0, _jsxRuntime.jsx)("span", {
105
- css: styles === null || styles === void 0 ? void 0 : styles.track,
121
+ css: styles?.track,
106
122
  role: "presentation",
107
123
  "aria-hidden": "true",
108
124
  children: (0, _jsxRuntime.jsx)("span", {
109
- css: styles === null || styles === void 0 ? void 0 : styles.trackValue,
125
+ css: styles?.trackValue,
110
126
  children: renderValueInside && value
111
127
  })
112
128
  })]
113
129
  }), value && !renderValueInside && (0, _jsxRuntime.jsx)("span", {
114
- css: styles === null || styles === void 0 ? void 0 : styles.value,
130
+ css: styles?.value,
115
131
  "aria-hidden": "true",
116
132
  children: value
117
133
  })]
118
134
  });
119
135
  }
120
- }, _ProgressBar.displayName = "ProgressBar", _ProgressBar.componentId = 'ProgressBar', _ProgressBar.allowedProps = _props.allowedProps, _ProgressBar.defaultProps = {
121
- formatScreenReaderValue: ({
122
- valueNow,
123
- valueMax
124
- }) => `${valueNow} / ${valueMax}`,
125
- size: 'medium',
126
- valueMax: 100,
127
- valueNow: 0,
128
- as: 'div',
129
- color: 'primary',
130
- shouldAnimate: false,
131
- // default to showing `success` color on completion
132
- meterColor: ({
133
- valueNow,
134
- valueMax
135
- }) => valueNow / valueMax >= 1 ? 'success' : 'brand'
136
- }, _ProgressBar)) || _class);
136
+ }) || _class);
137
137
  var _default = exports.default = ProgressBar;
package/lib/ProgressBar/v1/styles.js CHANGED
@@ -39,14 +39,14 @@ exports.default = void 0;
39
39
  * @return {Object} The final style object, which will be used in the component
40
40
  */
41
41
  const generateStyle = (componentTheme, props) => {
42
- const _props$valueNow = props.valueNow,
43
- valueNow = _props$valueNow === void 0 ? 0 : _props$valueNow,
44
- _props$valueMax = props.valueMax,
45
- valueMax = _props$valueMax === void 0 ? 100 : _props$valueMax,
46
- size = props.size,
47
- color = props.color,
48
- meterColor = props.meterColor,
49
- shouldAnimate = props.shouldAnimate;
42
+ const {
43
+ valueNow = 0,
44
+ valueMax = 100,
45
+ size,
46
+ color,
47
+ meterColor,
48
+ shouldAnimate
49
+ } = props;
50
50
  const meterColorClassName = typeof meterColor === 'function' ? meterColor({
51
51
  valueNow,
52
52
  valueMax
package/lib/ProgressBar/v1/theme.js CHANGED
@@ -34,61 +34,62 @@ exports.default = void 0;
34
34
  * @return {Object} The final theme object with the overrides and component variables
35
35
  */
36
36
  const generateComponentTheme = theme => {
37
- 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;
38
- const borders = theme.borders,
39
- colors = theme.colors,
40
- spacing = theme.spacing,
41
- typography = theme.typography,
42
- themeName = theme.key;
37
+ const {
38
+ borders,
39
+ colors,
40
+ spacing,
41
+ typography,
42
+ key: themeName
43
+ } = theme;
43
44
  const themeSpecificStyle = {
44
45
  canvas: {
45
46
  meterColorBrand: theme['ic-brand-primary']
46
47
  },
47
48
  'canvas-high-contrast': {
48
- meterColorBrandInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.white1010,
49
- meterColorSuccessInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.white1010,
50
- meterColorInfoInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.white1010,
51
- meterColorAlertInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.white1010,
52
- meterColorWarningInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.white1010,
53
- meterColorDangerInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.white1010
49
+ meterColorBrandInverse: colors?.contrasts?.white1010,
50
+ meterColorSuccessInverse: colors?.contrasts?.white1010,
51
+ meterColorInfoInverse: colors?.contrasts?.white1010,
52
+ meterColorAlertInverse: colors?.contrasts?.white1010,
53
+ meterColorWarningInverse: colors?.contrasts?.white1010,
54
+ meterColorDangerInverse: colors?.contrasts?.white1010
54
55
  }
55
56
  };
56
57
  const componentVariables = {
57
- fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
58
- fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
59
- lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightCondensed,
60
- fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
61
- xSmallHeight: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
62
- xSmallValueFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeXSmall,
58
+ fontFamily: typography?.fontFamily,
59
+ fontWeight: typography?.fontWeightNormal,
60
+ lineHeight: typography?.lineHeightCondensed,
61
+ fontSize: typography?.fontSizeMedium,
62
+ xSmallHeight: spacing?.xSmall,
63
+ xSmallValueFontSize: typography?.fontSizeXSmall,
63
64
  smallHeight: '1.125rem',
64
65
  // product design wants = 18px
65
- smallValueFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeXSmall,
66
- mediumHeight: spacing === null || spacing === void 0 ? void 0 : spacing.medium,
67
- mediumValueFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
68
- largeHeight: spacing === null || spacing === void 0 ? void 0 : spacing.large,
69
- largeValueFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
70
- valuePadding: `${spacing === null || spacing === void 0 ? void 0 : spacing.xxSmall}`,
66
+ smallValueFontSize: typography?.fontSizeXSmall,
67
+ mediumHeight: spacing?.medium,
68
+ mediumValueFontSize: typography?.fontSizeSmall,
69
+ largeHeight: spacing?.large,
70
+ largeValueFontSize: typography?.fontSizeMedium,
71
+ valuePadding: `${spacing?.xxSmall}`,
71
72
  // variables are split out for inverse to allow
72
73
  // color value changes for inverse-high-constrast
73
- meterColorBrand: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.blue4570,
74
- meterColorBrandInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts8 = colors.contrasts) === null || _colors$contrasts8 === void 0 ? void 0 : _colors$contrasts8.blue4570,
75
- meterColorInfo: colors === null || colors === void 0 ? void 0 : (_colors$contrasts9 = colors.contrasts) === null || _colors$contrasts9 === void 0 ? void 0 : _colors$contrasts9.blue4570,
76
- meterColorInfoInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts0 = colors.contrasts) === null || _colors$contrasts0 === void 0 ? void 0 : _colors$contrasts0.blue4570,
77
- meterColorSuccess: colors === null || colors === void 0 ? void 0 : (_colors$contrasts1 = colors.contrasts) === null || _colors$contrasts1 === void 0 ? void 0 : _colors$contrasts1.green4570,
78
- meterColorSuccessInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts10 = colors.contrasts) === null || _colors$contrasts10 === void 0 ? void 0 : _colors$contrasts10.green4570,
79
- meterColorDanger: colors === null || colors === void 0 ? void 0 : (_colors$contrasts11 = colors.contrasts) === null || _colors$contrasts11 === void 0 ? void 0 : _colors$contrasts11.red4570,
80
- meterColorDangerInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts12 = colors.contrasts) === null || _colors$contrasts12 === void 0 ? void 0 : _colors$contrasts12.red4570,
81
- meterColorAlert: colors === null || colors === void 0 ? void 0 : (_colors$contrasts13 = colors.contrasts) === null || _colors$contrasts13 === void 0 ? void 0 : _colors$contrasts13.blue4570,
82
- meterColorAlertInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts14 = colors.contrasts) === null || _colors$contrasts14 === void 0 ? void 0 : _colors$contrasts14.blue4570,
83
- meterColorWarning: colors === null || colors === void 0 ? void 0 : (_colors$contrasts15 = colors.contrasts) === null || _colors$contrasts15 === void 0 ? void 0 : _colors$contrasts15.orange4570,
84
- meterColorWarningInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts16 = colors.contrasts) === null || _colors$contrasts16 === void 0 ? void 0 : _colors$contrasts16.orange4570,
85
- meterBorderWidthInverse: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
74
+ meterColorBrand: colors?.contrasts?.blue4570,
75
+ meterColorBrandInverse: colors?.contrasts?.blue4570,
76
+ meterColorInfo: colors?.contrasts?.blue4570,
77
+ meterColorInfoInverse: colors?.contrasts?.blue4570,
78
+ meterColorSuccess: colors?.contrasts?.green4570,
79
+ meterColorSuccessInverse: colors?.contrasts?.green4570,
80
+ meterColorDanger: colors?.contrasts?.red4570,
81
+ meterColorDangerInverse: colors?.contrasts?.red4570,
82
+ meterColorAlert: colors?.contrasts?.blue4570,
83
+ meterColorAlertInverse: colors?.contrasts?.blue4570,
84
+ meterColorWarning: colors?.contrasts?.orange4570,
85
+ meterColorWarningInverse: colors?.contrasts?.orange4570,
86
+ meterBorderWidthInverse: borders?.widthSmall,
86
87
  meterBorderColorInverse: 'transparent',
87
- trackColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts17 = colors.contrasts) === null || _colors$contrasts17 === void 0 ? void 0 : _colors$contrasts17.white1010,
88
+ trackColor: colors?.contrasts?.white1010,
88
89
  trackColorInverse: 'transparent',
89
- trackBottomBorderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
90
- trackBottomBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts18 = colors.contrasts) === null || _colors$contrasts18 === void 0 ? void 0 : _colors$contrasts18.grey3045,
91
- trackBottomBorderColorInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts19 = colors.contrasts) === null || _colors$contrasts19 === void 0 ? void 0 : _colors$contrasts19.white1010,
90
+ trackBottomBorderWidth: borders?.widthSmall,
91
+ trackBottomBorderColor: colors?.contrasts?.grey3045,
92
+ trackBottomBorderColorInverse: colors?.contrasts?.white1010,
92
93
  borderRadius: '0px'
93
94
  };
94
95
  return {
package/lib/ProgressBar/v2/index.js CHANGED
@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
7
  exports.default = exports.ProgressBar = void 0;
8
- var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
9
8
  var _react = require("react");
10
9
  var _latest = require("@instructure/ui-view/latest");
11
10
  var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
@@ -14,8 +13,7 @@ var _emotion = require("@instructure/emotion");
14
13
  var _styles = _interopRequireDefault(require("./styles"));
15
14
  var _props = require("./props");
16
15
  var _jsxRuntime = require("@emotion/react/jsx-runtime");
17
- const _excluded = ["renderValue", "formatScreenReaderValue", "valueNow", "valueMax", "screenReaderLabel", "size", "color", "meterColor", "renderValueInside", "styles"];
18
- var _dec, _class, _ProgressBar;
16
+ var _dec, _class;
19
17
  /*
20
18
  * The MIT License (MIT)
21
19
  *
@@ -44,43 +42,61 @@ var _dec, _class, _ProgressBar;
44
42
  category: components
45
43
  ---
46
44
  **/
47
- let ProgressBar = exports.ProgressBar = (_dec = (0, _emotion.withStyle)(_styles.default), _dec(_class = (_ProgressBar = class ProgressBar extends _react.Component {
48
- constructor(...args) {
49
- super(...args);
50
- this.ref = null;
51
- this.handleRef = el => {
52
- const elementRef = this.props.elementRef;
53
- this.ref = el;
54
- if (typeof elementRef === 'function') {
55
- elementRef(el);
56
- }
57
- };
58
- }
45
+ let ProgressBar = exports.ProgressBar = (_dec = (0, _emotion.withStyle)(_styles.default), _dec(_class = class ProgressBar extends _react.Component {
46
+ static displayName = "ProgressBar";
47
+ static componentId = 'ProgressBar';
48
+ static allowedProps = _props.allowedProps;
49
+ static defaultProps = {
50
+ formatScreenReaderValue: ({
51
+ valueNow,
52
+ valueMax
53
+ }) => `${valueNow} / ${valueMax}`,
54
+ size: 'medium',
55
+ valueMax: 100,
56
+ valueNow: 0,
57
+ as: 'div',
58
+ color: 'primary',
59
+ shouldAnimate: false,
60
+ // default to showing `success` color on completion
61
+ meterColor: ({
62
+ valueNow,
63
+ valueMax
64
+ }) => valueNow / valueMax >= 1 ? 'success' : 'brand'
65
+ };
66
+ ref = null;
59
67
  componentDidMount() {
60
- var _this$props$makeStyle, _this$props;
61
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
68
+ this.props.makeStyles?.();
62
69
  }
63
70
  componentDidUpdate() {
64
- var _this$props$makeStyle2, _this$props2;
65
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
71
+ this.props.makeStyles?.();
66
72
  }
73
+ handleRef = el => {
74
+ const {
75
+ elementRef
76
+ } = this.props;
77
+ this.ref = el;
78
+ if (typeof elementRef === 'function') {
79
+ elementRef(el);
80
+ }
81
+ };
67
82
  render() {
68
- const _this$props3 = this.props,
69
- renderValue = _this$props3.renderValue,
70
- formatScreenReaderValue = _this$props3.formatScreenReaderValue,
71
- valueNow = _this$props3.valueNow,
72
- valueMax = _this$props3.valueMax,
73
- screenReaderLabel = _this$props3.screenReaderLabel,
74
- size = _this$props3.size,
75
- color = _this$props3.color,
76
- meterColor = _this$props3.meterColor,
77
- renderValueInside = _this$props3.renderValueInside,
78
- styles = _this$props3.styles,
79
- props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
83
+ const {
84
+ renderValue,
85
+ formatScreenReaderValue,
86
+ valueNow,
87
+ valueMax,
88
+ screenReaderLabel,
89
+ size,
90
+ color,
91
+ meterColor,
92
+ renderValueInside,
93
+ styles,
94
+ ...props
95
+ } = this.props;
80
96
  const valueText = typeof formatScreenReaderValue === 'function' ? formatScreenReaderValue({
81
97
  valueNow: valueNow,
82
98
  valueMax: valueMax
83
- }) : void 0;
99
+ }) : undefined;
84
100
  const value = (0, _callRenderProp.callRenderProp)(renderValue, {
85
101
  valueNow: valueNow,
86
102
  valueMax: valueMax
@@ -88,49 +104,33 @@ let ProgressBar = exports.ProgressBar = (_dec = (0, _emotion.withStyle)(_styles.
88
104
  return (0, _jsxRuntime.jsxs)(_latest.View, {
89
105
  ...(0, _passthroughProps.passthroughProps)(props),
90
106
  as: this.props.as,
91
- css: styles === null || styles === void 0 ? void 0 : styles.progressBar,
107
+ css: styles?.progressBar,
92
108
  margin: this.props.margin,
93
109
  elementRef: this.handleRef,
94
110
  "data-cid": "ProgressBar",
95
111
  children: [(0, _jsxRuntime.jsxs)("span", {
96
- css: styles === null || styles === void 0 ? void 0 : styles.trackLayout,
112
+ css: styles?.trackLayout,
97
113
  children: [(0, _jsxRuntime.jsx)("progress", {
98
- css: styles === null || styles === void 0 ? void 0 : styles.htmlProgress,
114
+ css: styles?.htmlProgress,
99
115
  max: valueMax,
100
116
  value: valueNow,
101
117
  "aria-valuetext": valueText,
102
118
  "aria-label": screenReaderLabel
103
119
  }), (0, _jsxRuntime.jsx)("span", {
104
- css: styles === null || styles === void 0 ? void 0 : styles.track,
120
+ css: styles?.track,
105
121
  role: "presentation",
106
122
  "aria-hidden": "true",
107
123
  children: (0, _jsxRuntime.jsx)("span", {
108
- css: styles === null || styles === void 0 ? void 0 : styles.trackValue,
124
+ css: styles?.trackValue,
109
125
  children: renderValueInside && value
110
126
  })
111
127
  })]
112
128
  }), value && !renderValueInside && (0, _jsxRuntime.jsx)("span", {
113
- css: styles === null || styles === void 0 ? void 0 : styles.value,
129
+ css: styles?.value,
114
130
  "aria-hidden": "true",
115
131
  children: value
116
132
  })]
117
133
  });
118
134
  }
119
- }, _ProgressBar.displayName = "ProgressBar", _ProgressBar.componentId = 'ProgressBar', _ProgressBar.allowedProps = _props.allowedProps, _ProgressBar.defaultProps = {
120
- formatScreenReaderValue: ({
121
- valueNow,
122
- valueMax
123
- }) => `${valueNow} / ${valueMax}`,
124
- size: 'medium',
125
- valueMax: 100,
126
- valueNow: 0,
127
- as: 'div',
128
- color: 'primary',
129
- shouldAnimate: false,
130
- // default to showing `success` color on completion
131
- meterColor: ({
132
- valueNow,
133
- valueMax
134
- }) => valueNow / valueMax >= 1 ? 'success' : 'brand'
135
- }, _ProgressBar)) || _class);
135
+ }) || _class);
136
136
  var _default = exports.default = ProgressBar;
package/lib/ProgressBar/v2/styles.js CHANGED
@@ -39,14 +39,14 @@ exports.default = void 0;
39
39
  * @return {Object} The final style object, which will be used in the component
40
40
  */
41
41
  const generateStyle = (componentTheme, props, _sharedTokens) => {
42
- const _props$valueNow = props.valueNow,
43
- valueNow = _props$valueNow === void 0 ? 0 : _props$valueNow,
44
- _props$valueMax = props.valueMax,
45
- valueMax = _props$valueMax === void 0 ? 100 : _props$valueMax,
46
- size = props.size,
47
- color = props.color,
48
- meterColor = props.meterColor,
49
- shouldAnimate = props.shouldAnimate;
42
+ const {
43
+ valueNow = 0,
44
+ valueMax = 100,
45
+ size,
46
+ color,
47
+ meterColor,
48
+ shouldAnimate
49
+ } = props;
50
50
  const meterColorClassName = typeof meterColor === 'function' ? meterColor({
51
51
  valueNow,
52
52
  valueMax