@instructure/ui-progress 8.12.1-snapshot.7 → 8.13.1-snapshot.9

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.13.0](https://github.com/instructure/instructure-ui/compare/v8.12.0...v8.13.0) (2021-12-01)
+
+**Note:** Version bump only for package @instructure/ui-progress
+
 # [8.12.0](https://github.com/instructure/instructure-ui/compare/v8.11.1...v8.12.0) (2021-11-17)
 
 **Note:** Version bump only for package @instructure/ui-progress

package/es/ProgressBar/__examples__/ProgressBar.examples.js

@@ -27,13 +27,13 @@ export default {
   sectionProp: 'color',
   propValues: {
     valueNow: [0, 40, 80, 100],
-    renderValue: [null, // eslint-disable-next-line react/display-name
-    ({
-      valueNow,
-      valueMax
-    }) => /*#__PURE__*/React.createElement("span", null, Math.round(valueNow / valueMax * 100))]
+    renderValue: [null, _ref => {
+      let valueNow = _ref.valueNow,
+          valueMax = _ref.valueMax;
+      return /*#__PURE__*/React.createElement("span", null, Math.round(valueNow / valueMax * 100));
+    }]
   },
-  getComponentProps: props => {
+  getComponentProps: () => {
     return {
       screenReaderLabel: 'Passing students',
       valueMax
@@ -43,6 +43,5 @@ export default {
     return {
       background: props.color.includes('inverse') ? 'primary-inverse' : 'primary'
     };
-  },
-  filter: props => {}
+  }
 };

package/es/ProgressBar/index.js

@@ -40,11 +40,12 @@ import { allowedProps, propTypes } from './props';
 ---
 category: components
 ---
+@tsProps
 **/
 
 let ProgressBar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_temp = _class2 = class ProgressBar extends Component {
-  constructor(...args) {
-    super(...args);
+  constructor() {
+    super(...arguments);
     this.ref = null;
 
     this.handleRef = el => {
@@ -82,10 +83,10 @@ let ProgressBar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
           styles = _this$props3.styles,
           props = _objectWithoutProperties(_this$props3, _excluded);
 
-    const valueText = typeof formatScreenReaderValue === 'function' && formatScreenReaderValue({
-      valueNow,
-      valueMax
-    }); // consolidating the label and aria-valuetext to put in aria-label because
+    const valueText = typeof formatScreenReaderValue === 'function' ? formatScreenReaderValue({
+      valueNow: valueNow,
+      valueMax: valueMax
+    }) : void 0; // consolidating the label and aria-valuetext to put in aria-label because
     // NVDA does not read aria-valuetext: https://github.com/nvaccess/nvda/issues/913
     // But leaving aria-valuetext because JAWS ignores aria-label
 
@@ -118,24 +119,25 @@ let ProgressBar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
       css: styles === null || styles === void 0 ? void 0 : styles.value,
       "aria-hidden": "true"
     }, value));
-    /* eslint-enable jsx-a11y/no-redundant-roles, jsx-a11y/no-noninteractive-element-to-interactive-role */
   }
 
 }, _class2.displayName = "ProgressBar", _class2.componentId = 'ProgressBar', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
-  formatScreenReaderValue: ({
-    valueNow,
-    valueMax
-  }) => `${valueNow} / ${valueMax}`,
+  formatScreenReaderValue: _ref => {
+    let valueNow = _ref.valueNow,
+        valueMax = _ref.valueMax;
+    return `${valueNow} / ${valueMax}`;
+  },
   size: 'medium',
   valueMax: 100,
   valueNow: 0,
   as: 'div',
   color: 'primary',
   // default to showing `success` color on completion
-  meterColor: ({
-    valueNow,
-    valueMax
-  }) => valueNow / valueMax >= 1 ? 'success' : 'brand'
+  meterColor: _ref2 => {
+    let valueNow = _ref2.valueNow,
+        valueMax = _ref2.valueMax;
+    return valueNow / valueMax >= 1 ? 'success' : 'brand';
+  }
 }, _temp)) || _class) || _class);
 export default ProgressBar;
 export { ProgressBar };

package/es/ProgressBar/props.js

@@ -24,63 +24,16 @@
 import PropTypes from 'prop-types';
 import { ThemeablePropTypes } from '@instructure/emotion';
 const propTypes = {
-  /**
-   * A label is required for accessibility
-   */
   screenReaderLabel: PropTypes.string.isRequired,
-
-  /**
-   * Control the height of the progress bar
-   */
   size: PropTypes.oneOf(['x-small', 'small', 'medium', 'large']),
-
-  /**
-   * Maximum value (defaults to 100)
-   */
   valueMax: PropTypes.number,
-
-  /**
-   * Receives the progress of the event
-   */
   valueNow: PropTypes.number,
-
-  /**
-   * A function for formatting the text provided to screen readers via `aria-valuenow`
-   */
   formatScreenReaderValue: PropTypes.func,
-
-  /**
-   * A function to format the displayed value. If null the value will not display.
-   * Takes `valueNow` and `valueMax` as parameters.
-   */
   renderValue: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
-
-  /**
-   * Controls the overall color scheme of the component
-   */
   color: PropTypes.oneOf(['primary', 'primary-inverse']),
-
-  /**
-   * Control the color of the progress meter. Defaults to showing theme success
-   * color on completion, based on `valueNow` and `valueMax`.
-   */
   meterColor: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOf(['info', 'warning', 'danger', 'alert', 'success', 'brand'])]),
-
-  /**
-   * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
-   * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
-   * familiar CSS-like shorthand. For example: `margin="small auto large"`.
-   */
   margin: ThemeablePropTypes.spacing,
-
-  /**
-   * Provides a reference to the component's root HTML element
-   */
   elementRef: PropTypes.func,
-
-  /**
-   * Set the element type of the component's root
-   */
   as: PropTypes.elementType
 };
 const allowedProps = ['screenReaderLabel', 'size', 'valueMax', 'valueNow', 'formatScreenReaderValue', 'renderValue', 'color', 'meterColor', 'margin', 'elementRef', 'as'];

package/es/ProgressBar/styles.js

@@ -33,8 +33,10 @@
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (componentTheme, props) => {
-  const valueNow = props.valueNow,
-        valueMax = props.valueMax,
+  const _props$valueNow = props.valueNow,
+        valueNow = _props$valueNow === void 0 ? 0 : _props$valueNow,
+        _props$valueMax = props.valueMax,
+        valueMax = _props$valueMax === void 0 ? 100 : _props$valueMax,
         size = props.size,
         color = props.color,
         meterColor = props.meterColor;

package/es/ProgressCircle/__examples__/ProgressCircle.examples.js

@@ -27,13 +27,13 @@ export default {
   sectionProp: 'color',
   propValues: {
     valueNow: [0, 40, 80, 100],
-    renderValue: [null, // eslint-disable-next-line react/display-name
-    ({
-      valueNow,
-      valueMax
-    }) => /*#__PURE__*/React.createElement("span", null, Math.round(valueNow / valueMax * 100))]
+    renderValue: [null, _ref => {
+      let valueNow = _ref.valueNow,
+          valueMax = _ref.valueMax;
+      return /*#__PURE__*/React.createElement("span", null, Math.round(valueNow / valueMax * 100));
+    }]
   },
-  getComponentProps: props => {
+  getComponentProps: () => {
     return {
       screenReaderLabel: 'Passing students',
       valueMax
@@ -43,6 +43,5 @@ export default {
     return {
       background: props.color.includes('inverse') ? 'primary-inverse' : 'primary'
     };
-  },
-  filter: props => {}
+  }
 };

package/es/ProgressCircle/index.js

@@ -41,6 +41,7 @@ import { allowedProps, propTypes } from './props';
 ---
 category: components
 ---
+@tsProps
 **/
 
 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), _
           styles = _this$props3.styles,
           props = _objectWithoutProperties(_this$props3, _excluded);
 
-    const valueText = typeof formatScreenReaderValue === 'function' && formatScreenReaderValue({
-      valueNow,
-      valueMax
-    }); // consolidating the label and aria-valuetext to put in aria-label because
+    const valueText = typeof formatScreenReaderValue === 'function' ? formatScreenReaderValue({
+      valueNow: valueNow,
+      valueMax: valueMax
+    }) : void 0; // consolidating the label and aria-valuetext to put in aria-label because
     // NVDA does not read aria-valuetext: https://github.com/nvaccess/nvda/issues/913
     // But leaving aria-valuetext because JAWS ignores aria-label
 
@@ -120,7 +121,7 @@ let ProgressCircle = (_dec = withStyle(generateStyle, generateComponentTheme), _
       valueNow,
       valueMax
     });
-    const style = this.state.animateOnMount ? null : {
+    const style = {
       strokeDashoffset: `${styles === null || styles === void 0 ? void 0 : styles.dashOffset}em`
     };
     return jsx(View, Object.assign({}, passthroughProps(props), {
@@ -167,10 +168,11 @@ let ProgressCircle = (_dec = withStyle(generateStyle, generateComponentTheme), _
   }
 
 }, _class2.displayName = "ProgressCircle", _class2.componentId = 'ProgressCircle', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
-  formatScreenReaderValue: ({
-    valueNow,
-    valueMax
-  }) => `${valueNow} / ${valueMax}`,
+  formatScreenReaderValue: _ref => {
+    let valueNow = _ref.valueNow,
+        valueMax = _ref.valueMax;
+    return `${valueNow} / ${valueMax}`;
+  },
   size: 'medium',
   valueMax: 100,
   valueNow: 0,
@@ -178,10 +180,11 @@ let ProgressCircle = (_dec = withStyle(generateStyle, generateComponentTheme), _
   color: 'primary',
   shouldAnimateOnMount: false,
   // default to showing `success` color on completion
-  meterColor: ({
-    valueNow,
-    valueMax
-  }) => valueNow / valueMax >= 1 ? 'success' : 'brand'
+  meterColor: _ref2 => {
+    let valueNow = _ref2.valueNow,
+        valueMax = _ref2.valueMax;
+    return valueNow / valueMax >= 1 ? 'success' : 'brand';
+  }
 }, _temp)) || _class) || _class);
 export default ProgressCircle;
 export { ProgressCircle };

package/es/ProgressCircle/props.js

@@ -24,63 +24,16 @@
 import PropTypes from 'prop-types';
 import { ThemeablePropTypes } from '@instructure/emotion';
 const propTypes = {
-  /**
-   * A label is required for accessibility
-   */
   screenReaderLabel: PropTypes.string.isRequired,
-
-  /**
-   * Control the size of the progress circle
-   */
   size: PropTypes.oneOf(['x-small', 'small', 'medium', 'large']),
-
-  /**
-   * Maximum value (defaults to 100)
-   */
   valueMax: PropTypes.number,
-
-  /**
-   * Receives the progress of the event
-   */
   valueNow: PropTypes.number,
-
-  /**
-   * A function for formatting the text provided to screen readers via `aria-valuenow`
-   */
-  formatScreenReaderValue: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
-
-  /**
-   * A function to format the displayed value. If null the value will not display.
-   * Takes `valueNow` and `valueMax` as parameters.
-   */
+  formatScreenReaderValue: PropTypes.func,
   renderValue: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
-
-  /**
-   * Controls the overall color scheme of the component
-   */
   color: PropTypes.oneOf(['primary', 'primary-inverse']),
-
-  /**
-   * Control the color of the progress meter. Defaults to showing theme success
-   * color on completion, based on `valueNow` and `valueMax`.
-   */
   meterColor: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOf(['info', 'warning', 'danger', 'alert', 'success', 'brand'])]),
-
-  /**
-   * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
-   * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
-   * familiar CSS-like shorthand. For example: `margin="small auto large"`.
-   */
   margin: ThemeablePropTypes.spacing,
-
-  /**
-   * Provides a reference to the component's root HTML element
-   */
   elementRef: PropTypes.func,
-
-  /**
-   * Set the element type of the component's root
-   */
   as: PropTypes.elementType,
   shouldAnimateOnMount: PropTypes.bool,
   animationDelay: PropTypes.number

package/es/ProgressCircle/styles.js

@@ -36,8 +36,10 @@ const generateStyle = (componentTheme, props, state) => {
   const size = props.size,
         color = props.color,
         meterColor = props.meterColor,
-        valueNow = props.valueNow,
-        valueMax = props.valueMax;
+        _props$valueNow = props.valueNow,
+        valueNow = _props$valueNow === void 0 ? 0 : _props$valueNow,
+        _props$valueMax = props.valueMax,
+        valueMax = _props$valueMax === void 0 ? 100 : _props$valueMax;
   const shouldAnimateOnMount = state.shouldAnimateOnMount;
   const getMeterColorClassName = typeof meterColor === 'function' ? meterColor({
     valueNow,

package/lib/ProgressBar/__examples__/ProgressBar.examples.js

@@ -37,13 +37,13 @@ var _default = {
   sectionProp: 'color',
   propValues: {
     valueNow: [0, 40, 80, 100],
-    renderValue: [null, // eslint-disable-next-line react/display-name
-    ({
-      valueNow,
-      valueMax
-    }) => /*#__PURE__*/_react.default.createElement("span", null, Math.round(valueNow / valueMax * 100))]
+    renderValue: [null, _ref => {
+      let valueNow = _ref.valueNow,
+          valueMax = _ref.valueMax;
+      return /*#__PURE__*/_react.default.createElement("span", null, Math.round(valueNow / valueMax * 100));
+    }]
   },
-  getComponentProps: props => {
+  getComponentProps: () => {
     return {
       screenReaderLabel: 'Passing students',
       valueMax
@@ -53,7 +53,6 @@ var _default = {
     return {
       background: props.color.includes('inverse') ? 'primary-inverse' : 'primary'
     };
-  },
-  filter: props => {}
+  }
 };
 exports.default = _default;

package/lib/ProgressBar/index.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ProgressBar = exports.default = void 0;
+exports.default = exports.ProgressBar = void 0;
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
@@ -35,10 +35,11 @@ var _dec, _dec2, _class, _class2, _temp;
 ---
 category: components
 ---
+@tsProps
 **/
 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 {
-  constructor(...args) {
-    super(...args);
+  constructor() {
+    super(...arguments);
     this.ref = null;
 
     this.handleRef = el => {
@@ -75,10 +76,10 @@ let ProgressBar = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
           meterColor = _this$props3.meterColor,
           styles = _this$props3.styles,
           props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
-    const valueText = typeof formatScreenReaderValue === 'function' && formatScreenReaderValue({
-      valueNow,
-      valueMax
-    }); // consolidating the label and aria-valuetext to put in aria-label because
+    const valueText = typeof formatScreenReaderValue === 'function' ? formatScreenReaderValue({
+      valueNow: valueNow,
+      valueMax: valueMax
+    }) : void 0; // consolidating the label and aria-valuetext to put in aria-label because
     // NVDA does not read aria-valuetext: https://github.com/nvaccess/nvda/issues/913
     // But leaving aria-valuetext because JAWS ignores aria-label
 
@@ -111,24 +112,25 @@ let ProgressBar = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
       css: styles === null || styles === void 0 ? void 0 : styles.value,
       "aria-hidden": "true"
     }, value));
-    /* eslint-enable jsx-a11y/no-redundant-roles, jsx-a11y/no-noninteractive-element-to-interactive-role */
   }
 
 }, _class2.displayName = "ProgressBar", _class2.componentId = 'ProgressBar', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
-  formatScreenReaderValue: ({
-    valueNow,
-    valueMax
-  }) => `${valueNow} / ${valueMax}`,
+  formatScreenReaderValue: _ref => {
+    let valueNow = _ref.valueNow,
+        valueMax = _ref.valueMax;
+    return `${valueNow} / ${valueMax}`;
+  },
   size: 'medium',
   valueMax: 100,
   valueNow: 0,
   as: 'div',
   color: 'primary',
   // default to showing `success` color on completion
-  meterColor: ({
-    valueNow,
-    valueMax
-  }) => valueNow / valueMax >= 1 ? 'success' : 'brand'
+  meterColor: _ref2 => {
+    let valueNow = _ref2.valueNow,
+        valueMax = _ref2.valueMax;
+    return valueNow / valueMax >= 1 ? 'success' : 'brand';
+  }
 }, _temp)) || _class) || _class);
 exports.ProgressBar = ProgressBar;
 var _default = ProgressBar;

package/lib/ProgressBar/props.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.allowedProps = exports.propTypes = void 0;
+exports.propTypes = exports.allowedProps = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -35,63 +35,16 @@ var _emotion = require("@instructure/emotion");
  * SOFTWARE.
  */
 const propTypes = {
-  /**
-   * A label is required for accessibility
-   */
   screenReaderLabel: _propTypes.default.string.isRequired,
-
-  /**
-   * Control the height of the progress bar
-   */
   size: _propTypes.default.oneOf(['x-small', 'small', 'medium', 'large']),
-
-  /**
-   * Maximum value (defaults to 100)
-   */
   valueMax: _propTypes.default.number,
-
-  /**
-   * Receives the progress of the event
-   */
   valueNow: _propTypes.default.number,
-
-  /**
-   * A function for formatting the text provided to screen readers via `aria-valuenow`
-   */
   formatScreenReaderValue: _propTypes.default.func,
-
-  /**
-   * A function to format the displayed value. If null the value will not display.
-   * Takes `valueNow` and `valueMax` as parameters.
-   */
   renderValue: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
-
-  /**
-   * Controls the overall color scheme of the component
-   */
   color: _propTypes.default.oneOf(['primary', 'primary-inverse']),
-
-  /**
-   * Control the color of the progress meter. Defaults to showing theme success
-   * color on completion, based on `valueNow` and `valueMax`.
-   */
   meterColor: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.oneOf(['info', 'warning', 'danger', 'alert', 'success', 'brand'])]),
-
-  /**
-   * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
-   * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
-   * familiar CSS-like shorthand. For example: `margin="small auto large"`.
-   */
   margin: _emotion.ThemeablePropTypes.spacing,
-
-  /**
-   * Provides a reference to the component's root HTML element
-   */
   elementRef: _propTypes.default.func,
-
-  /**
-   * Set the element type of the component's root
-   */
   as: _propTypes.default.elementType
 };
 exports.propTypes = propTypes;

package/lib/ProgressBar/styles.js

@@ -40,8 +40,10 @@ exports.default = void 0;
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (componentTheme, props) => {
-  const valueNow = props.valueNow,
-        valueMax = props.valueMax,
+  const _props$valueNow = props.valueNow,
+        valueNow = _props$valueNow === void 0 ? 0 : _props$valueNow,
+        _props$valueMax = props.valueMax,
+        valueMax = _props$valueMax === void 0 ? 100 : _props$valueMax,
         size = props.size,
         color = props.color,
         meterColor = props.meterColor;

package/lib/ProgressCircle/__examples__/ProgressCircle.examples.js

@@ -37,13 +37,13 @@ var _default = {
   sectionProp: 'color',
   propValues: {
     valueNow: [0, 40, 80, 100],
-    renderValue: [null, // eslint-disable-next-line react/display-name
-    ({
-      valueNow,
-      valueMax
-    }) => /*#__PURE__*/_react.default.createElement("span", null, Math.round(valueNow / valueMax * 100))]
+    renderValue: [null, _ref => {
+      let valueNow = _ref.valueNow,
+          valueMax = _ref.valueMax;
+      return /*#__PURE__*/_react.default.createElement("span", null, Math.round(valueNow / valueMax * 100));
+    }]
   },
-  getComponentProps: props => {
+  getComponentProps: () => {
     return {
       screenReaderLabel: 'Passing students',
       valueMax
@@ -53,7 +53,6 @@ var _default = {
     return {
       background: props.color.includes('inverse') ? 'primary-inverse' : 'primary'
     };
-  },
-  filter: props => {}
+  }
 };
 exports.default = _default;

package/lib/ProgressCircle/index.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ProgressCircle = exports.default = void 0;
+exports.default = exports.ProgressCircle = void 0;
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
@@ -37,6 +37,7 @@ var _dec, _dec2, _class, _class2, _temp;
 ---
 category: components
 ---
+@tsProps
 **/
 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 {
   constructor(props) {
@@ -102,10 +103,10 @@ let ProgressCircle = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
           size = _this$props3.size,
           styles = _this$props3.styles,
           props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
-    const valueText = typeof formatScreenReaderValue === 'function' && formatScreenReaderValue({
-      valueNow,
-      valueMax
-    }); // consolidating the label and aria-valuetext to put in aria-label because
+    const valueText = typeof formatScreenReaderValue === 'function' ? formatScreenReaderValue({
+      valueNow: valueNow,
+      valueMax: valueMax
+    }) : void 0; // consolidating the label and aria-valuetext to put in aria-label because
     // NVDA does not read aria-valuetext: https://github.com/nvaccess/nvda/issues/913
     // But leaving aria-valuetext because JAWS ignores aria-label
 
@@ -114,7 +115,7 @@ let ProgressCircle = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
       valueNow,
       valueMax
     });
-    const style = this.state.animateOnMount ? null : {
+    const style = {
       strokeDashoffset: `${styles === null || styles === void 0 ? void 0 : styles.dashOffset}em`
     };
     return (0, _emotion.jsx)(_View.View, Object.assign({}, (0, _passthroughProps.passthroughProps)(props), {
@@ -161,10 +162,11 @@ let ProgressCircle = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
   }
 
 }, _class2.displayName = "ProgressCircle", _class2.componentId = 'ProgressCircle', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
-  formatScreenReaderValue: ({
-    valueNow,
-    valueMax
-  }) => `${valueNow} / ${valueMax}`,
+  formatScreenReaderValue: _ref => {
+    let valueNow = _ref.valueNow,
+        valueMax = _ref.valueMax;
+    return `${valueNow} / ${valueMax}`;
+  },
   size: 'medium',
   valueMax: 100,
   valueNow: 0,
@@ -172,10 +174,11 @@ let ProgressCircle = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
   color: 'primary',
   shouldAnimateOnMount: false,
   // default to showing `success` color on completion
-  meterColor: ({
-    valueNow,
-    valueMax
-  }) => valueNow / valueMax >= 1 ? 'success' : 'brand'
+  meterColor: _ref2 => {
+    let valueNow = _ref2.valueNow,
+        valueMax = _ref2.valueMax;
+    return valueNow / valueMax >= 1 ? 'success' : 'brand';
+  }
 }, _temp)) || _class) || _class);
 exports.ProgressCircle = ProgressCircle;
 var _default = ProgressCircle;