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