@instructure/ui-progress 8.13.1-snapshot.2 → 8.13.1-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 (43) hide show
  1. package/es/ProgressBar/__examples__/ProgressBar.examples.js +3 -5
  2. package/es/ProgressBar/index.js +5 -5
  3. package/es/ProgressBar/props.js +0 -47
  4. package/es/ProgressBar/styles.js +4 -2
  5. package/es/ProgressCircle/__examples__/ProgressCircle.examples.js +3 -5
  6. package/es/ProgressCircle/index.js +6 -5
  7. package/es/ProgressCircle/props.js +1 -48
  8. package/es/ProgressCircle/styles.js +4 -2
  9. package/lib/ProgressBar/__examples__/ProgressBar.examples.js +3 -5
  10. package/lib/ProgressBar/index.js +5 -5
  11. package/lib/ProgressBar/props.js +0 -47
  12. package/lib/ProgressBar/styles.js +4 -2
  13. package/lib/ProgressCircle/__examples__/ProgressCircle.examples.js +3 -5
  14. package/lib/ProgressCircle/index.js +6 -5
  15. package/lib/ProgressCircle/props.js +1 -48
  16. package/lib/ProgressCircle/styles.js +4 -2
  17. package/package.json +14 -14
  18. package/src/ProgressBar/__examples__/ProgressBar.examples.tsx +6 -11
  19. package/src/ProgressBar/index.tsx +7 -8
  20. package/src/ProgressBar/props.ts +43 -41
  21. package/src/ProgressBar/styles.ts +1 -1
  22. package/src/ProgressCircle/__examples__/ProgressCircle.examples.tsx +6 -11
  23. package/src/ProgressCircle/index.tsx +13 -22
  24. package/src/ProgressCircle/props.ts +46 -48
  25. package/src/ProgressCircle/styles.ts +2 -2
  26. package/src/ProgressCircle/theme.ts +2 -5
  27. package/tsconfig.build.json +18 -2
  28. package/tsconfig.build.tsbuildinfo +1 -0
  29. package/types/ProgressBar/ProgressBarLocator.d.ts +52 -52
  30. package/types/ProgressBar/__examples__/ProgressBar.examples.d.ts +4 -7
  31. package/types/ProgressBar/__examples__/ProgressBar.examples.d.ts.map +1 -1
  32. package/types/ProgressBar/index.d.ts +10 -15
  33. package/types/ProgressBar/index.d.ts.map +1 -1
  34. package/types/ProgressBar/props.d.ts +46 -5
  35. package/types/ProgressBar/props.d.ts.map +1 -1
  36. package/types/ProgressCircle/ProgressCircleLocator.d.ts +52 -52
  37. package/types/ProgressCircle/__examples__/ProgressCircle.examples.d.ts +4 -7
  38. package/types/ProgressCircle/__examples__/ProgressCircle.examples.d.ts.map +1 -1
  39. package/types/ProgressCircle/index.d.ts +12 -17
  40. package/types/ProgressCircle/index.d.ts.map +1 -1
  41. package/types/ProgressCircle/props.d.ts +52 -6
  42. package/types/ProgressCircle/props.d.ts.map +1 -1
  43. package/types/ProgressCircle/theme.d.ts.map +1 -1
@@ -27,14 +27,13 @@ export default {
27
27
  sectionProp: 'color',
28
28
  propValues: {
29
29
  valueNow: [0, 40, 80, 100],
30
- renderValue: [null, // eslint-disable-next-line react/display-name
31
- _ref => {
30
+ renderValue: [null, _ref => {
32
31
  let valueNow = _ref.valueNow,
33
32
  valueMax = _ref.valueMax;
34
33
  return /*#__PURE__*/React.createElement("span", null, Math.round(valueNow / valueMax * 100));
35
34
  }]
36
35
  },
37
- getComponentProps: props => {
36
+ getComponentProps: () => {
38
37
  return {
39
38
  screenReaderLabel: 'Passing students',
40
39
  valueMax
@@ -44,6 +43,5 @@ export default {
44
43
  return {
45
44
  background: props.color.includes('inverse') ? 'primary-inverse' : 'primary'
46
45
  };
47
- },
48
- filter: props => {}
46
+ }
49
47
  };
@@ -40,6 +40,7 @@ import { allowedProps, propTypes } from './props';
40
40
  ---
41
41
  category: components
42
42
  ---
43
+ @tsProps
43
44
  **/
44
45
 
45
46
  let ProgressBar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_temp = _class2 = class ProgressBar extends Component {
@@ -82,10 +83,10 @@ let ProgressBar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
82
83
  styles = _this$props3.styles,
83
84
  props = _objectWithoutProperties(_this$props3, _excluded);
84
85
 
85
- const valueText = typeof formatScreenReaderValue === 'function' && formatScreenReaderValue({
86
- valueNow,
87
- valueMax
88
- }); // consolidating the label and aria-valuetext to put in aria-label because
86
+ const valueText = typeof formatScreenReaderValue === 'function' ? formatScreenReaderValue({
87
+ valueNow: valueNow,
88
+ valueMax: valueMax
89
+ }) : void 0; // consolidating the label and aria-valuetext to put in aria-label because
89
90
  // NVDA does not read aria-valuetext: https://github.com/nvaccess/nvda/issues/913
90
91
  // But leaving aria-valuetext because JAWS ignores aria-label
91
92
 
@@ -118,7 +119,6 @@ let ProgressBar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
118
119
  css: styles === null || styles === void 0 ? void 0 : styles.value,
119
120
  "aria-hidden": "true"
120
121
  }, value));
121
- /* eslint-enable jsx-a11y/no-redundant-roles, jsx-a11y/no-noninteractive-element-to-interactive-role */
122
122
  }
123
123
 
124
124
  }, _class2.displayName = "ProgressBar", _class2.componentId = 'ProgressBar', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
@@ -24,63 +24,16 @@
24
24
  import PropTypes from 'prop-types';
25
25
  import { ThemeablePropTypes } from '@instructure/emotion';
26
26
  const propTypes = {
27
- /**
28
- * A label is required for accessibility
29
- */
30
27
  screenReaderLabel: PropTypes.string.isRequired,
31
-
32
- /**
33
- * Control the height of the progress bar
34
- */
35
28
  size: PropTypes.oneOf(['x-small', 'small', 'medium', 'large']),
36
-
37
- /**
38
- * Maximum value (defaults to 100)
39
- */
40
29
  valueMax: PropTypes.number,
41
-
42
- /**
43
- * Receives the progress of the event
44
- */
45
30
  valueNow: PropTypes.number,
46
-
47
- /**
48
- * A function for formatting the text provided to screen readers via `aria-valuenow`
49
- */
50
31
  formatScreenReaderValue: PropTypes.func,
51
-
52
- /**
53
- * A function to format the displayed value. If null the value will not display.
54
- * Takes `valueNow` and `valueMax` as parameters.
55
- */
56
32
  renderValue: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
57
-
58
- /**
59
- * Controls the overall color scheme of the component
60
- */
61
33
  color: PropTypes.oneOf(['primary', 'primary-inverse']),
62
-
63
- /**
64
- * Control the color of the progress meter. Defaults to showing theme success
65
- * color on completion, based on `valueNow` and `valueMax`.
66
- */
67
34
  meterColor: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOf(['info', 'warning', 'danger', 'alert', 'success', 'brand'])]),
68
-
69
- /**
70
- * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
71
- * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
72
- * familiar CSS-like shorthand. For example: `margin="small auto large"`.
73
- */
74
35
  margin: ThemeablePropTypes.spacing,
75
-
76
- /**
77
- * Provides a reference to the component's root HTML element
78
- */
79
36
  elementRef: PropTypes.func,
80
-
81
- /**
82
- * Set the element type of the component's root
83
- */
84
37
  as: PropTypes.elementType
85
38
  };
86
39
  const allowedProps = ['screenReaderLabel', 'size', 'valueMax', 'valueNow', 'formatScreenReaderValue', 'renderValue', 'color', 'meterColor', 'margin', 'elementRef', 'as'];
@@ -33,8 +33,10 @@
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 valueNow = props.valueNow,
37
- valueMax = props.valueMax,
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,
38
40
  size = props.size,
39
41
  color = props.color,
40
42
  meterColor = props.meterColor;
@@ -27,14 +27,13 @@ export default {
27
27
  sectionProp: 'color',
28
28
  propValues: {
29
29
  valueNow: [0, 40, 80, 100],
30
- renderValue: [null, // eslint-disable-next-line react/display-name
31
- _ref => {
30
+ renderValue: [null, _ref => {
32
31
  let valueNow = _ref.valueNow,
33
32
  valueMax = _ref.valueMax;
34
33
  return /*#__PURE__*/React.createElement("span", null, Math.round(valueNow / valueMax * 100));
35
34
  }]
36
35
  },
37
- getComponentProps: props => {
36
+ getComponentProps: () => {
38
37
  return {
39
38
  screenReaderLabel: 'Passing students',
40
39
  valueMax
@@ -44,6 +43,5 @@ export default {
44
43
  return {
45
44
  background: props.color.includes('inverse') ? 'primary-inverse' : 'primary'
46
45
  };
47
- },
48
- filter: props => {}
46
+ }
49
47
  };
@@ -41,6 +41,7 @@ import { allowedProps, propTypes } from './props';
41
41
  ---
42
42
  category: components
43
43
  ---
44
+ @tsProps
44
45
  **/
45
46
 
46
47
  let ProgressCircle = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_temp = _class2 = class ProgressCircle extends Component {
@@ -108,10 +109,10 @@ let ProgressCircle = (_dec = withStyle(generateStyle, generateComponentTheme), _
108
109
  styles = _this$props3.styles,
109
110
  props = _objectWithoutProperties(_this$props3, _excluded);
110
111
 
111
- const valueText = typeof formatScreenReaderValue === 'function' && formatScreenReaderValue({
112
- valueNow,
113
- valueMax
114
- }); // consolidating the label and aria-valuetext to put in aria-label because
112
+ const valueText = typeof formatScreenReaderValue === 'function' ? formatScreenReaderValue({
113
+ valueNow: valueNow,
114
+ valueMax: valueMax
115
+ }) : void 0; // consolidating the label and aria-valuetext to put in aria-label because
115
116
  // NVDA does not read aria-valuetext: https://github.com/nvaccess/nvda/issues/913
116
117
  // But leaving aria-valuetext because JAWS ignores aria-label
117
118
 
@@ -120,7 +121,7 @@ let ProgressCircle = (_dec = withStyle(generateStyle, generateComponentTheme), _
120
121
  valueNow,
121
122
  valueMax
122
123
  });
123
- const style = this.state.animateOnMount ? null : {
124
+ const style = {
124
125
  strokeDashoffset: `${styles === null || styles === void 0 ? void 0 : styles.dashOffset}em`
125
126
  };
126
127
  return jsx(View, Object.assign({}, passthroughProps(props), {
@@ -24,63 +24,16 @@
24
24
  import PropTypes from 'prop-types';
25
25
  import { ThemeablePropTypes } from '@instructure/emotion';
26
26
  const propTypes = {
27
- /**
28
- * A label is required for accessibility
29
- */
30
27
  screenReaderLabel: PropTypes.string.isRequired,
31
-
32
- /**
33
- * Control the size of the progress circle
34
- */
35
28
  size: PropTypes.oneOf(['x-small', 'small', 'medium', 'large']),
36
-
37
- /**
38
- * Maximum value (defaults to 100)
39
- */
40
29
  valueMax: PropTypes.number,
41
-
42
- /**
43
- * Receives the progress of the event
44
- */
45
30
  valueNow: PropTypes.number,
46
-
47
- /**
48
- * A function for formatting the text provided to screen readers via `aria-valuenow`
49
- */
50
- formatScreenReaderValue: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
51
-
52
- /**
53
- * A function to format the displayed value. If null the value will not display.
54
- * Takes `valueNow` and `valueMax` as parameters.
55
- */
31
+ formatScreenReaderValue: PropTypes.func,
56
32
  renderValue: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
57
-
58
- /**
59
- * Controls the overall color scheme of the component
60
- */
61
33
  color: PropTypes.oneOf(['primary', 'primary-inverse']),
62
-
63
- /**
64
- * Control the color of the progress meter. Defaults to showing theme success
65
- * color on completion, based on `valueNow` and `valueMax`.
66
- */
67
34
  meterColor: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOf(['info', 'warning', 'danger', 'alert', 'success', 'brand'])]),
68
-
69
- /**
70
- * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
71
- * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
72
- * familiar CSS-like shorthand. For example: `margin="small auto large"`.
73
- */
74
35
  margin: ThemeablePropTypes.spacing,
75
-
76
- /**
77
- * Provides a reference to the component's root HTML element
78
- */
79
36
  elementRef: PropTypes.func,
80
-
81
- /**
82
- * Set the element type of the component's root
83
- */
84
37
  as: PropTypes.elementType,
85
38
  shouldAnimateOnMount: PropTypes.bool,
86
39
  animationDelay: PropTypes.number
@@ -36,8 +36,10 @@ const generateStyle = (componentTheme, props, state) => {
36
36
  const size = props.size,
37
37
  color = props.color,
38
38
  meterColor = props.meterColor,
39
- valueNow = props.valueNow,
40
- valueMax = props.valueMax;
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;
41
43
  const shouldAnimateOnMount = state.shouldAnimateOnMount;
42
44
  const getMeterColorClassName = typeof meterColor === 'function' ? meterColor({
43
45
  valueNow,
@@ -37,14 +37,13 @@ var _default = {
37
37
  sectionProp: 'color',
38
38
  propValues: {
39
39
  valueNow: [0, 40, 80, 100],
40
- renderValue: [null, // eslint-disable-next-line react/display-name
41
- _ref => {
40
+ renderValue: [null, _ref => {
42
41
  let valueNow = _ref.valueNow,
43
42
  valueMax = _ref.valueMax;
44
43
  return /*#__PURE__*/_react.default.createElement("span", null, Math.round(valueNow / valueMax * 100));
45
44
  }]
46
45
  },
47
- getComponentProps: props => {
46
+ getComponentProps: () => {
48
47
  return {
49
48
  screenReaderLabel: 'Passing students',
50
49
  valueMax
@@ -54,7 +53,6 @@ var _default = {
54
53
  return {
55
54
  background: props.color.includes('inverse') ? 'primary-inverse' : 'primary'
56
55
  };
57
- },
58
- filter: props => {}
56
+ }
59
57
  };
60
58
  exports.default = _default;
@@ -35,6 +35,7 @@ var _dec, _dec2, _class, _class2, _temp;
35
35
  ---
36
36
  category: components
37
37
  ---
38
+ @tsProps
38
39
  **/
39
40
  let ProgressBar = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_temp = _class2 = class ProgressBar extends _react.Component {
40
41
  constructor() {
@@ -75,10 +76,10 @@ let ProgressBar = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
75
76
  meterColor = _this$props3.meterColor,
76
77
  styles = _this$props3.styles,
77
78
  props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
78
- const valueText = typeof formatScreenReaderValue === 'function' && formatScreenReaderValue({
79
- valueNow,
80
- valueMax
81
- }); // consolidating the label and aria-valuetext to put in aria-label because
79
+ const valueText = typeof formatScreenReaderValue === 'function' ? formatScreenReaderValue({
80
+ valueNow: valueNow,
81
+ valueMax: valueMax
82
+ }) : void 0; // consolidating the label and aria-valuetext to put in aria-label because
82
83
  // NVDA does not read aria-valuetext: https://github.com/nvaccess/nvda/issues/913
83
84
  // But leaving aria-valuetext because JAWS ignores aria-label
84
85
 
@@ -111,7 +112,6 @@ let ProgressBar = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
111
112
  css: styles === null || styles === void 0 ? void 0 : styles.value,
112
113
  "aria-hidden": "true"
113
114
  }, value));
114
- /* eslint-enable jsx-a11y/no-redundant-roles, jsx-a11y/no-noninteractive-element-to-interactive-role */
115
115
  }
116
116
 
117
117
  }, _class2.displayName = "ProgressBar", _class2.componentId = 'ProgressBar', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
@@ -35,63 +35,16 @@ var _emotion = require("@instructure/emotion");
35
35
  * SOFTWARE.
36
36
  */
37
37
  const propTypes = {
38
- /**
39
- * A label is required for accessibility
40
- */
41
38
  screenReaderLabel: _propTypes.default.string.isRequired,
42
-
43
- /**
44
- * Control the height of the progress bar
45
- */
46
39
  size: _propTypes.default.oneOf(['x-small', 'small', 'medium', 'large']),
47
-
48
- /**
49
- * Maximum value (defaults to 100)
50
- */
51
40
  valueMax: _propTypes.default.number,
52
-
53
- /**
54
- * Receives the progress of the event
55
- */
56
41
  valueNow: _propTypes.default.number,
57
-
58
- /**
59
- * A function for formatting the text provided to screen readers via `aria-valuenow`
60
- */
61
42
  formatScreenReaderValue: _propTypes.default.func,
62
-
63
- /**
64
- * A function to format the displayed value. If null the value will not display.
65
- * Takes `valueNow` and `valueMax` as parameters.
66
- */
67
43
  renderValue: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
68
-
69
- /**
70
- * Controls the overall color scheme of the component
71
- */
72
44
  color: _propTypes.default.oneOf(['primary', 'primary-inverse']),
73
-
74
- /**
75
- * Control the color of the progress meter. Defaults to showing theme success
76
- * color on completion, based on `valueNow` and `valueMax`.
77
- */
78
45
  meterColor: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.oneOf(['info', 'warning', 'danger', 'alert', 'success', 'brand'])]),
79
-
80
- /**
81
- * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
82
- * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
83
- * familiar CSS-like shorthand. For example: `margin="small auto large"`.
84
- */
85
46
  margin: _emotion.ThemeablePropTypes.spacing,
86
-
87
- /**
88
- * Provides a reference to the component's root HTML element
89
- */
90
47
  elementRef: _propTypes.default.func,
91
-
92
- /**
93
- * Set the element type of the component's root
94
- */
95
48
  as: _propTypes.default.elementType
96
49
  };
97
50
  exports.propTypes = propTypes;
@@ -40,8 +40,10 @@ exports.default = void 0;
40
40
  * @return {Object} The final style object, which will be used in the component
41
41
  */
42
42
  const generateStyle = (componentTheme, props) => {
43
- const valueNow = props.valueNow,
44
- valueMax = props.valueMax,
43
+ const _props$valueNow = props.valueNow,
44
+ valueNow = _props$valueNow === void 0 ? 0 : _props$valueNow,
45
+ _props$valueMax = props.valueMax,
46
+ valueMax = _props$valueMax === void 0 ? 100 : _props$valueMax,
45
47
  size = props.size,
46
48
  color = props.color,
47
49
  meterColor = props.meterColor;
@@ -37,14 +37,13 @@ var _default = {
37
37
  sectionProp: 'color',
38
38
  propValues: {
39
39
  valueNow: [0, 40, 80, 100],
40
- renderValue: [null, // eslint-disable-next-line react/display-name
41
- _ref => {
40
+ renderValue: [null, _ref => {
42
41
  let valueNow = _ref.valueNow,
43
42
  valueMax = _ref.valueMax;
44
43
  return /*#__PURE__*/_react.default.createElement("span", null, Math.round(valueNow / valueMax * 100));
45
44
  }]
46
45
  },
47
- getComponentProps: props => {
46
+ getComponentProps: () => {
48
47
  return {
49
48
  screenReaderLabel: 'Passing students',
50
49
  valueMax
@@ -54,7 +53,6 @@ var _default = {
54
53
  return {
55
54
  background: props.color.includes('inverse') ? 'primary-inverse' : 'primary'
56
55
  };
57
- },
58
- filter: props => {}
56
+ }
59
57
  };
60
58
  exports.default = _default;
@@ -37,6 +37,7 @@ var _dec, _dec2, _class, _class2, _temp;
37
37
  ---
38
38
  category: components
39
39
  ---
40
+ @tsProps
40
41
  **/
41
42
  let ProgressCircle = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_temp = _class2 = class ProgressCircle extends _react.Component {
42
43
  constructor(props) {
@@ -102,10 +103,10 @@ let ProgressCircle = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
102
103
  size = _this$props3.size,
103
104
  styles = _this$props3.styles,
104
105
  props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
105
- const valueText = typeof formatScreenReaderValue === 'function' && formatScreenReaderValue({
106
- valueNow,
107
- valueMax
108
- }); // consolidating the label and aria-valuetext to put in aria-label because
106
+ const valueText = typeof formatScreenReaderValue === 'function' ? formatScreenReaderValue({
107
+ valueNow: valueNow,
108
+ valueMax: valueMax
109
+ }) : void 0; // consolidating the label and aria-valuetext to put in aria-label because
109
110
  // NVDA does not read aria-valuetext: https://github.com/nvaccess/nvda/issues/913
110
111
  // But leaving aria-valuetext because JAWS ignores aria-label
111
112
 
@@ -114,7 +115,7 @@ let ProgressCircle = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
114
115
  valueNow,
115
116
  valueMax
116
117
  });
117
- const style = this.state.animateOnMount ? null : {
118
+ const style = {
118
119
  strokeDashoffset: `${styles === null || styles === void 0 ? void 0 : styles.dashOffset}em`
119
120
  };
120
121
  return (0, _emotion.jsx)(_View.View, Object.assign({}, (0, _passthroughProps.passthroughProps)(props), {
@@ -35,63 +35,16 @@ var _emotion = require("@instructure/emotion");
35
35
  * SOFTWARE.
36
36
  */
37
37
  const propTypes = {
38
- /**
39
- * A label is required for accessibility
40
- */
41
38
  screenReaderLabel: _propTypes.default.string.isRequired,
42
-
43
- /**
44
- * Control the size of the progress circle
45
- */
46
39
  size: _propTypes.default.oneOf(['x-small', 'small', 'medium', 'large']),
47
-
48
- /**
49
- * Maximum value (defaults to 100)
50
- */
51
40
  valueMax: _propTypes.default.number,
52
-
53
- /**
54
- * Receives the progress of the event
55
- */
56
41
  valueNow: _propTypes.default.number,
57
-
58
- /**
59
- * A function for formatting the text provided to screen readers via `aria-valuenow`
60
- */
61
- formatScreenReaderValue: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
62
-
63
- /**
64
- * A function to format the displayed value. If null the value will not display.
65
- * Takes `valueNow` and `valueMax` as parameters.
66
- */
42
+ formatScreenReaderValue: _propTypes.default.func,
67
43
  renderValue: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
68
-
69
- /**
70
- * Controls the overall color scheme of the component
71
- */
72
44
  color: _propTypes.default.oneOf(['primary', 'primary-inverse']),
73
-
74
- /**
75
- * Control the color of the progress meter. Defaults to showing theme success
76
- * color on completion, based on `valueNow` and `valueMax`.
77
- */
78
45
  meterColor: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.oneOf(['info', 'warning', 'danger', 'alert', 'success', 'brand'])]),
79
-
80
- /**
81
- * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
82
- * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
83
- * familiar CSS-like shorthand. For example: `margin="small auto large"`.
84
- */
85
46
  margin: _emotion.ThemeablePropTypes.spacing,
86
-
87
- /**
88
- * Provides a reference to the component's root HTML element
89
- */
90
47
  elementRef: _propTypes.default.func,
91
-
92
- /**
93
- * Set the element type of the component's root
94
- */
95
48
  as: _propTypes.default.elementType,
96
49
  shouldAnimateOnMount: _propTypes.default.bool,
97
50
  animationDelay: _propTypes.default.number
@@ -43,8 +43,10 @@ const generateStyle = (componentTheme, props, state) => {
43
43
  const size = props.size,
44
44
  color = props.color,
45
45
  meterColor = props.meterColor,
46
- valueNow = props.valueNow,
47
- valueMax = props.valueMax;
46
+ _props$valueNow = props.valueNow,
47
+ valueNow = _props$valueNow === void 0 ? 0 : _props$valueNow,
48
+ _props$valueMax = props.valueMax,
49
+ valueMax = _props$valueMax === void 0 ? 100 : _props$valueMax;
48
50
  const shouldAnimateOnMount = state.shouldAnimateOnMount;
49
51
  const getMeterColorClassName = typeof meterColor === 'function' ? meterColor({
50
52
  valueNow,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-progress",
3
- "version": "8.13.1-snapshot.2+249897ee7",
3
+ "version": "8.13.1-snapshot.27+37d3bca26",
4
4
  "description": "Styled HTML <progress /> elements for showing completion of a task",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "type": "commonjs",
@@ -25,21 +25,21 @@
25
25
  "license": "MIT",
26
26
  "dependencies": {
27
27
  "@babel/runtime": "^7.13.10",
28
- "@instructure/console": "8.13.1-snapshot.2+249897ee7",
29
- "@instructure/emotion": "8.13.1-snapshot.2+249897ee7",
30
- "@instructure/shared-types": "8.13.1-snapshot.2+249897ee7",
31
- "@instructure/ui-a11y-content": "8.13.1-snapshot.2+249897ee7",
32
- "@instructure/ui-color-utils": "8.13.1-snapshot.2+249897ee7",
33
- "@instructure/ui-react-utils": "8.13.1-snapshot.2+249897ee7",
34
- "@instructure/ui-testable": "8.13.1-snapshot.2+249897ee7",
35
- "@instructure/ui-view": "8.13.1-snapshot.2+249897ee7",
28
+ "@instructure/console": "8.13.1-snapshot.27+37d3bca26",
29
+ "@instructure/emotion": "8.13.1-snapshot.27+37d3bca26",
30
+ "@instructure/shared-types": "8.13.1-snapshot.27+37d3bca26",
31
+ "@instructure/ui-a11y-content": "8.13.1-snapshot.27+37d3bca26",
32
+ "@instructure/ui-color-utils": "8.13.1-snapshot.27+37d3bca26",
33
+ "@instructure/ui-react-utils": "8.13.1-snapshot.27+37d3bca26",
34
+ "@instructure/ui-testable": "8.13.1-snapshot.27+37d3bca26",
35
+ "@instructure/ui-view": "8.13.1-snapshot.27+37d3bca26",
36
36
  "prop-types": "^15"
37
37
  },
38
38
  "devDependencies": {
39
- "@instructure/ui-babel-preset": "8.13.1-snapshot.2+249897ee7",
40
- "@instructure/ui-test-locator": "8.13.1-snapshot.2+249897ee7",
41
- "@instructure/ui-test-utils": "8.13.1-snapshot.2+249897ee7",
42
- "@instructure/ui-themes": "8.13.1-snapshot.2+249897ee7"
39
+ "@instructure/ui-babel-preset": "8.13.1-snapshot.27+37d3bca26",
40
+ "@instructure/ui-test-locator": "8.13.1-snapshot.27+37d3bca26",
41
+ "@instructure/ui-test-utils": "8.13.1-snapshot.27+37d3bca26",
42
+ "@instructure/ui-themes": "8.13.1-snapshot.27+37d3bca26"
43
43
  },
44
44
  "peerDependencies": {
45
45
  "react": ">=16.8 <=17"
@@ -48,5 +48,5 @@
48
48
  "access": "public"
49
49
  },
50
50
  "sideEffects": false,
51
- "gitHead": "249897ee75a61c9436fca89f11473c0ece4c3e15"
51
+ "gitHead": "37d3bca26e420d33639ba518b2443e450ec3df3b"
52
52
  }
@@ -22,6 +22,7 @@
22
22
  * SOFTWARE.
23
23
  */
24
24
  import React from 'react'
25
+ import type { ProgressBarProps, Values } from '../props'
25
26
 
26
27
  const valueMax = 100
27
28
 
@@ -31,28 +32,22 @@ export default {
31
32
  valueNow: [0, 40, 80, 100],
32
33
  renderValue: [
33
34
  null,
34
- // @ts-expect-error ts-migrate(7031) FIXME: Binding element 'valueNow' implicitly has an 'any'... Remove this comment to see the full error message
35
- // eslint-disable-next-line react/display-name
36
- ({ valueNow, valueMax }) => (
35
+ ({ valueNow, valueMax }: Values) => (
37
36
  <span>{Math.round((valueNow / valueMax) * 100)}</span>
38
37
  )
39
38
  ]
40
39
  },
41
- // @ts-expect-error ts-migrate(6133) FIXME: 'props' is declared but its value is never read.
42
- getComponentProps: (props) => {
40
+ getComponentProps: () => {
43
41
  return {
44
42
  screenReaderLabel: 'Passing students',
45
43
  valueMax
46
44
  }
47
45
  },
48
- // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'props' implicitly has an 'any' type.
49
- getExampleProps: (props) => {
46
+ getExampleProps: (props: ProgressBarProps) => {
50
47
  return {
51
- background: props.color.includes('inverse')
48
+ background: props.color!.includes('inverse')
52
49
  ? 'primary-inverse'
53
50
  : 'primary'
54
51
  }
55
- },
56
- // @ts-expect-error ts-migrate(6133) FIXME: 'props' is declared but its value is never read.
57
- filter: (props) => {}
52
+ }
58
53
  }