@hig/progress-ring - npm Package Compare versions

Comparing version 1.2.2 to 2.0.0

build/index.es.js

@@ -1,2 +0,2 @@
-import React, { Component } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
@@ -7,207 +7,182 @@ import { CSSTransition } from 'react-transition-group';
 
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+var MAX_INCREASE_PER_MS = 1 / 1000;
 
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+var ProgressRingDeterminateBehavior = function ProgressRingDeterminateBehavior(props) {
+  var _useState = useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      cssTransitionState = _useState2[0],
+      setCSSTransitionState = _useState2[1];
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+  var _useState3 = useState(true),
+      _useState4 = _slicedToArray(_useState3, 2),
+      transitionEnter = _useState4[0],
+      setTransitionEnter = _useState4[1];
 
-var MAX_INCREASE_PER_MS = 1 / 1000;
+  var containerRef = useRef(null);
+  var value = 0;
+  var prevTimestamp = 0;
+  var targetValue = void 0;
+  var segments = void 0;
+  var SEGMENT_COUNT = void 0;
+  var FADE_DELAY_FACTOR = void 0;
 
-var ProgressRingDeterminateBehavior = function (_Component) {
-  _inherits(ProgressRingDeterminateBehavior, _Component);
+  var wait = function wait() {
+    prevTimestamp = window.performance.now();
+    // eslint-disable-next-line no-use-before-define
+    window.requestAnimationFrame(step);
+  };
 
-  function ProgressRingDeterminateBehavior(props) {
-    _classCallCheck(this, ProgressRingDeterminateBehavior);
+  var enter = function enter() {
+    segments.forEach(function (segment) {
+      var eachSegment = segment;
+      eachSegment.style.opacity = 0;
+    });
+    setTransitionEnter(true);
+    wait();
+  };
+  /**
+   * @todo The exit function is associated with the final state of the animation.
+   */
+  var exit = function exit() {
+    segments.forEach(function (segment) {
+      var eachSegment = segment;
+      eachSegment.style.opacity = null;
+    });
+    setTransitionEnter(false);
+    wait();
+  };
 
-    var _this = _possibleConstructorReturn(this, (ProgressRingDeterminateBehavior.__proto__ || Object.getPrototypeOf(ProgressRingDeterminateBehavior)).call(this, props));
+  var opacityForSegment = function opacityForSegment(index, param) {
+    var fadeStartValue = index * FADE_DELAY_FACTOR;
+    return Math.max(0, (param - fadeStartValue) / FADE_DELAY_FACTOR);
+  };
 
-    _this.state = {
-      cssTransitionState: null,
-      transitionEnter: true
-    };
+  var setSegmentOpacities = function setSegmentOpacities(param) {
+    segments.forEach(function (segment, i) {
+      var index = Math.abs(i - SEGMENT_COUNT) - 1;
+      var eachSegment = segment;
+      eachSegment.style.opacity = opacityForSegment(index, param);
+    });
+  };
 
-    _this.step = function (timestamp) {
-      if (_this.state.cssTransitionState === "entering" || _this.state.cssTransitionState === "exiting") {
-        _this.wait();
-        return;
-      }
+  var progressTowardTarget = function progressTowardTarget(timestamp) {
+    var elapsed = timestamp - prevTimestamp;
+    var valueDiff = void 0;
 
-      if (_this.state.cssTransitionState === "exited" && _this.value !== _this.targetValue) {
-        _this.enter();
-        return;
+    if (targetValue > value) {
+      valueDiff = Math.min(elapsed * MAX_INCREASE_PER_MS, targetValue - value);
+    } else if (targetValue < value) {
+      valueDiff = Math.max(-elapsed * MAX_INCREASE_PER_MS, targetValue - value);
+    } else {
+      if (cssTransitionState !== "exited") {
+        setSegmentOpacities(value);
       }
+      prevTimestamp = undefined;
+      return;
+    }
 
-      if (_this.targetValue === 1 && _this.value === 1 && _this.state.cssTransitionState !== "exited") {
-        _this.exit();
-        return;
-      }
+    var interrumValue = value + valueDiff;
 
-      _this.progressTowardTarget(timestamp);
-    };
+    setSegmentOpacities(interrumValue);
 
-    _this.handleEntering = function () {
-      _this.setState({ cssTransitionState: "entering" });
-    };
+    prevTimestamp = timestamp;
+    value = interrumValue;
 
-    _this.handleEntered = function () {
-      _this.setState({ cssTransitionState: "entered" });
-      _this.setProgress(_this.props.percentComplete);
-    };
+    // eslint-disable-next-line no-use-before-define
+    window.requestAnimationFrame(step);
+  };
 
-    _this.handleExiting = function () {
-      _this.setState({ cssTransitionState: "exiting" });
-    };
-
-    _this.handleExited = function () {
-      _this.setState({ cssTransitionState: "exited" });
-    };
-
-    _this.refContainer = function (containerRef) {
-      _this.containerRef = containerRef;
-    };
-
-    _this.value = 0;
-    _this.prevTimestamp = 0;
-    return _this;
-  }
-
-  _createClass(ProgressRingDeterminateBehavior, [{
-    key: "componentDidUpdate",
-    value: function componentDidUpdate() {
-      if (this.state.cssTransitionState === "entered" || this.state.cssTransitionState === "exited") {
-        this.initSegments();
-        this.setProgress(this.props.percentComplete);
-      }
+  var step = function step(timestamp) {
+    if (cssTransitionState === "entering" || cssTransitionState === "exiting") {
+      wait();
+      return;
     }
-  }, {
-    key: "setProgress",
-    value: function setProgress(percent) {
-      this.targetValue = percent / 100;
 
-      if (!this.prevTimestamp) {
-        this.prevTimestamp = window.performance.now();
-      }
-      window.requestAnimationFrame(this.step);
+    if (cssTransitionState === "exited" && value !== targetValue) {
+      enter();
+      return;
     }
-  }, {
-    key: "setSegmentOpacities",
-    value: function setSegmentOpacities(value) {
-      var _this2 = this;
+    /**
+     * @todo The condition associated with the final state of the animation was modified to prevent it from running. The exited state of the animation is the origin of an infinite loop. The component must be refactored to optimize the component life cycle.
+     */
+    if (targetValue === 1 && value === 1 && cssTransitionState === "exited") {
+      exit();
+      return;
+    }
 
-      this.segments.forEach(function (segment, i) {
-        var index = Math.abs(i - _this2.SEGMENT_COUNT) - 1;
-        var eachSegment = segment;
-        eachSegment.style.opacity = _this2.opacityForSegment(index, value);
-      });
+    progressTowardTarget(timestamp);
+  };
+
+  var setProgress = function setProgress(percent) {
+    targetValue = percent / 100;
+    if (!prevTimestamp) {
+      prevTimestamp = window.performance.now();
     }
-  }, {
-    key: "initSegments",
-    value: function initSegments() {
-      this.segments = Array.from(this.containerRef.querySelectorAll(".hig__progress-ring__segment"));
-      this.containerRef.querySelector(".hig__progress-ring__mask").style.opacity = null;
-      this.SEGMENT_COUNT = this.segments.length;
-      this.FADE_DELAY_FACTOR = 1 / this.SEGMENT_COUNT;
-    }
-  }, {
-    key: "progressTowardTarget",
-    value: function progressTowardTarget(timestamp) {
-      var elapsed = timestamp - this.prevTimestamp;
+    window.requestAnimationFrame(step);
+  };
 
-      var valueDiff = void 0;
-      if (this.targetValue > this.value) {
-        valueDiff = Math.min(elapsed * MAX_INCREASE_PER_MS, this.targetValue - this.value);
-      } else if (this.targetValue < this.value) {
-        valueDiff = Math.max(-elapsed * MAX_INCREASE_PER_MS, this.targetValue - this.value);
-      } else {
-        if (this.state.cssTransitionState !== "exited") {
-          this.setSegmentOpacities(this.value);
-        }
-        this.prevTimestamp = undefined;
-        return;
-      }
+  var initSegments = function initSegments() {
+    var current = containerRef.current;
 
-      var interrumValue = this.value + valueDiff;
+    segments = Array.from(current.querySelectorAll(".hig__progress-ring__segment"));
+    current.querySelector(".hig__progress-ring__mask").style.opacity = null;
+    SEGMENT_COUNT = segments.length;
+    FADE_DELAY_FACTOR = 1 / SEGMENT_COUNT;
+  };
 
-      this.setSegmentOpacities(interrumValue);
+  var handleEntering = function handleEntering() {
+    setCSSTransitionState("entering");
+  };
 
-      this.prevTimestamp = timestamp;
-      this.value = interrumValue;
+  var handleEntered = function handleEntered() {
+    setCSSTransitionState("entered");
+    setProgress(props.percentComplete);
+  };
 
-      window.requestAnimationFrame(this.step);
-    }
-  }, {
-    key: "enter",
-    value: function enter() {
-      this.segments.forEach(function (segment) {
-        var eachSegment = segment;
-        eachSegment.style.opacity = 0;
-      });
-      this.setState({ transitionEnter: true });
-      this.wait();
-    }
-  }, {
-    key: "exit",
-    value: function exit() {
-      this.segments.forEach(function (segment) {
-        var eachSegment = segment;
-        eachSegment.style.opacity = null;
-      });
-      this.setState({ transitionEnter: false });
-      this.wait();
-    }
-  }, {
-    key: "wait",
-    value: function wait() {
-      this.prevTimestamp = window.performance.now();
-      window.requestAnimationFrame(this.step);
-    }
-    /**
-     * @param {HTMLDivElement} containerRef
-     */
+  var handleExiting = function handleExiting() {
+    setCSSTransitionState("exiting");
+  };
 
+  var handleExited = function handleExited() {
+    setCSSTransitionState("exited");
+  };
+  /**
+   * @param {HTMLDivElement} containerRef
+   */
+  var refContainer = function refContainer(param) {
+    containerRef.current = param;
+  };
 
-    /** @type {HTMLDivElement} */
-
-  }, {
-    key: "opacityForSegment",
-    value: function opacityForSegment(index, value) {
-      var fadeStartValue = index * this.FADE_DELAY_FACTOR;
-      return Math.max(0, (value - fadeStartValue) / this.FADE_DELAY_FACTOR);
+  useEffect(function () {
+    if (cssTransitionState === "entered" || cssTransitionState === "exited") {
+      initSegments();
+      setProgress(props.percentComplete);
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this3 = this;
+  });
 
-      var innerRef = this.refContainer,
-          percentComplete = this.percentComplete;
-
-
-      return React.createElement(
-        CSSTransition,
-        {
-          "in": this.state.transitionEnter,
-          timeout: { enter: 650, exit: 466 },
-          appear: true,
-          classNames: "hig__progress-ring--",
-          onEntering: this.handleEntering,
-          onEntered: this.handleEntered,
-          onExiting: this.handleExiting,
-          onExited: this.handleExited
-        },
-        function (status) {
-          return _this3.props.children({
-            innerRef: innerRef,
-            percentComplete: percentComplete,
-            cssTransitionState: status
-          });
-        }
-      );
+  return React.createElement(
+    CSSTransition,
+    {
+      "in": transitionEnter,
+      timeout: { enter: 650, exit: 466 },
+      appear: true,
+      classNames: "hig__progress-ring--",
+      onEntering: handleEntering,
+      onEntered: handleEntered,
+      onExiting: handleExiting,
+      onExited: handleExited
+    },
+    function (status) {
+      return props.children({
+        innerRef: refContainer,
+        percentComplete: props.percentComplete,
+        cssTransitionState: status
+      });
     }
-  }]);
+  );
+};
 
-  return ProgressRingDeterminateBehavior;
-}(Component);
+ProgressRingDeterminateBehavior.displayName = "ProgressRingDeterminateBehavior";
 
@@ -248,160 +223,131 @@ ProgressRingDeterminateBehavior.propTypes = {
 
-var _createClass$1 = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+var _slicedToArray$1 = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
 
-function _classCallCheck$1(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn$1(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits$1(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
 var CYCLE_DURATION = 1000;
 var FADE_DURATION = 416;
 
-var ProgressRingIndeterminateBehavior = function (_Component) {
-  _inherits$1(ProgressRingIndeterminateBehavior, _Component);
+var ProgressRingIndeterminateBehavior = function ProgressRingIndeterminateBehavior(props) {
+  var _useState = useState(null),
+      _useState2 = _slicedToArray$1(_useState, 2),
+      cssTransitionState = _useState2[0],
+      setcssTransitionState = _useState2[1];
 
-  function ProgressRingIndeterminateBehavior(props) {
-    _classCallCheck$1(this, ProgressRingIndeterminateBehavior);
+  var _useState3 = useState(null),
+      _useState4 = _slicedToArray$1(_useState3, 2),
+      playing = _useState4[0],
+      setPlaying = _useState4[1];
 
-    var _this = _possibleConstructorReturn$1(this, (ProgressRingIndeterminateBehavior.__proto__ || Object.getPrototypeOf(ProgressRingIndeterminateBehavior)).call(this, props));
+  var containerRef = useRef(null);
+  var startTime = void 0;
+  var segments = void 0;
+  var SEGMENT_COUNT = void 0;
+  var SEGMENT_DELAY_FACTOR = void 0;
 
-    _this.state = {
-      cssTransitionState: null
-    };
+  var opacityForSegment = function opacityForSegment(index, elapsedThisCycle) {
+    var segmentFadeStartTime = index * SEGMENT_DELAY_FACTOR;
 
-    _this.step = function (timestamp) {
-      if (!_this.playing) {
-        return;
-      }
-      if (_this.state.cssTransitionState !== "entered") {
-        window.requestAnimationFrame(_this.step);
-        return;
-      }
+    // Fade continuing from previous cycle
+    if (segmentFadeStartTime + FADE_DURATION > CYCLE_DURATION && elapsedThisCycle < FADE_DURATION) {
+      return ((elapsedThisCycle + CYCLE_DURATION - segmentFadeStartTime) / FADE_DURATION - 1) * -1;
+    }
 
-      if (!_this.startTime) _this.startTime = timestamp;
-      var elapsed = timestamp - _this.startTime;
-      var elapsedThisCycle = elapsed % CYCLE_DURATION;
+    // Fade has finished
+    if (elapsedThisCycle < segmentFadeStartTime || elapsedThisCycle > segmentFadeStartTime + FADE_DURATION) {
+      return 0;
+    }
 
-      _this.setSegmentOpacities(elapsedThisCycle);
+    // Fading
+    return Math.abs((elapsedThisCycle - segmentFadeStartTime) / FADE_DURATION - 1);
+  };
 
-      window.requestAnimationFrame(_this.step);
-    };
+  var setSegmentOpacities = function setSegmentOpacities(elapsedThisCycle) {
+    segments.forEach(function (segment, i) {
+      var index = Math.abs(i - SEGMENT_COUNT) - 1;
+      var eachSegment = segment;
+      eachSegment.style.opacity = opacityForSegment(index, elapsedThisCycle);
+    });
+  };
 
-    _this.handleEntering = function () {
-      _this.setState({ cssTransitionState: "entering" });
-    };
+  var initSegments = function initSegments() {
+    var current = containerRef.current;
 
-    _this.handleEntered = function () {
-      _this.setState({ cssTransitionState: "entered" });
-      _this.start();
-    };
+    segments = Array.from(current.querySelectorAll(".hig__progress-ring__segment"));
+    current.querySelector(".hig__progress-ring__mask").style.opacity = null;
+    SEGMENT_COUNT = segments.length;
+    SEGMENT_DELAY_FACTOR = CYCLE_DURATION / SEGMENT_COUNT;
+  };
 
-    _this.handleExiting = function () {
-      _this.setState({ cssTransitionState: "exiting" });
-    };
-
-    _this.handleExited = function () {
-      _this.setState({ cssTransitionState: "exited" });
-    };
-
-    _this.refContainer = function (containerRef) {
-      _this.containerRef = containerRef;
-    };
-
-    _this.startTime = undefined;
-    return _this;
-  }
-
-  _createClass$1(ProgressRingIndeterminateBehavior, [{
-    key: "componentDidUpdate",
-    value: function componentDidUpdate() {
-      this.initSegments();
-      this.step(1);
+  var step = function step(timestamp) {
+    if (!playing) {
+      return;
     }
-  }, {
-    key: "setSegmentOpacities",
-    value: function setSegmentOpacities(elapsedThisCycle) {
-      var _this2 = this;
-
-      this.segments.forEach(function (segment, i) {
-        var index = Math.abs(i - _this2.SEGMENT_COUNT) - 1;
-        var eachSegment = segment;
-
-        eachSegment.style.opacity = _this2.opacityForSegment(index, elapsedThisCycle);
-      });
+    if (cssTransitionState !== "entered") {
+      window.requestAnimationFrame(step);
+      return;
     }
-  }, {
-    key: "initSegments",
-    value: function initSegments() {
-      this.segments = Array.from(this.containerRef.querySelectorAll(".hig__progress-ring__segment"));
 
-      this.containerRef.querySelector(".hig__progress-ring__mask").style.opacity = null;
-      this.SEGMENT_COUNT = this.segments.length;
-      this.SEGMENT_DELAY_FACTOR = CYCLE_DURATION / this.SEGMENT_COUNT;
-    }
+    if (!startTime) startTime = timestamp;
+    var elapsed = timestamp - startTime;
+    var elapsedThisCycle = elapsed % CYCLE_DURATION;
+    setSegmentOpacities(elapsedThisCycle);
 
-    /**
-     * @param {HTMLDivElement} containerRef
-     */
+    window.requestAnimationFrame(step);
+  };
 
+  var start = function start() {
+    setPlaying(true);
+    startTime = undefined;
+    window.requestAnimationFrame(step);
+  };
 
-    /** @type {HTMLDivElement} */
+  var handleEntering = function handleEntering() {
+    setcssTransitionState("entering");
+  };
 
-  }, {
-    key: "opacityForSegment",
-    value: function opacityForSegment(index, elapsedThisCycle) {
-      var segmentFadeStartTime = index * this.SEGMENT_DELAY_FACTOR;
+  var handleEntered = function handleEntered() {
+    setcssTransitionState("entered");
+    start();
+  };
 
-      // Fade continuing from previous cycle
-      if (segmentFadeStartTime + FADE_DURATION > CYCLE_DURATION && elapsedThisCycle < FADE_DURATION) {
-        return ((elapsedThisCycle + CYCLE_DURATION - segmentFadeStartTime) / FADE_DURATION - 1) * -1;
-      }
+  var handleExiting = function handleExiting() {
+    setcssTransitionState("exited");
+  };
 
-      // Fade has finished
-      if (elapsedThisCycle < segmentFadeStartTime || elapsedThisCycle > segmentFadeStartTime + FADE_DURATION) {
-        return 0;
-      }
+  var handleExited = function handleExited() {
+    setcssTransitionState("exited");
+  };
+  /**
+   * @param {HTMLDivElement} containerRef
+   */
+  var refContainer = function refContainer(value) {
+    containerRef.current = value;
+  };
 
-      // Fading
-      return Math.abs((elapsedThisCycle - segmentFadeStartTime) / FADE_DURATION - 1);
-    }
-  }, {
-    key: "start",
-    value: function start() {
-      this.playing = true;
-      this.startTime = undefined;
-      window.requestAnimationFrame(this.step);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this3 = this;
+  useEffect(function () {
+    initSegments();
+    step(1);
+  });
 
-      var innerRef = this.refContainer;
-
-
-      return React.createElement(
-        CSSTransition,
-        {
-          "in": true,
-          timeout: { enter: 650, exit: 466 },
-          appear: true,
-          classNames: "hig__progress-ring--",
-          onEntering: this.handleEntering,
-          onEntered: this.handleEntered,
-          onExiting: this.handleExiting,
-          onExited: this.handleExited
-        },
-        function (status) {
-          return _this3.props.children({
-            innerRef: innerRef,
-            cssTransitionState: status
-          });
-        }
-      );
+  return React.createElement(
+    CSSTransition,
+    {
+      "in": true,
+      timeout: { enter: 650, exit: 466 },
+      appear: true,
+      classNames: "hig__progress-ring--",
+      onEntering: handleEntering,
+      onEntered: handleEntered,
+      onExiting: handleExiting,
+      onExited: handleExited
+    },
+    function (status) {
+      return props.children({
+        innerRef: refContainer,
+        cssTransitionState: status
+      });
     }
-  }]);
+  );
+};
 
-  return ProgressRingIndeterminateBehavior;
-}(Component);
+ProgressRingIndeterminateBehavior.displayName = "ProgressRingIndeterminateBehavior";
 
@@ -943,3 +889,3 @@ ProgressRingIndeterminateBehavior.propTypes = {
   stylesheet: PropTypes.func,
-  surface: PropTypes.oneOf(availableSurfaces)
+  surface: PropTypes.oneOfType([PropTypes.string, PropTypes.oneOf(availableSurfaces)])
 };
@@ -1005,5 +951,10 @@ ProgressRingPresenter.__docgenInfo = {
       "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "availableSurfaces"
+        "name": "union",
+        "value": [{
+          "name": "string"
+        }, {
+          "name": "enum",
+          "computed": true,
+          "value": "availableSurfaces"
+        }]
       },
@@ -1022,58 +973,34 @@ "required": false,
 
-var _createClass$2 = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
 function _objectWithoutProperties$1(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
-function _classCallCheck$2(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+var ProgressRing = function ProgressRing(props) {
+  var mask = props.mask,
+      percentComplete = props.percentComplete,
+      size = props.size,
+      stylesheet = props.stylesheet,
+      surface = props.surface,
+      otherProps = _objectWithoutProperties$1(props, ["mask", "percentComplete", "size", "stylesheet", "surface"]);
 
-function _possibleConstructorReturn$2(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+  var ProgressRingBehavior = percentComplete === undefined ? ProgressRingIndeterminateBehavior : ProgressRingDeterminateBehavior;
+  var behaviorProps = percentComplete === undefined ? {} : { percentComplete: percentComplete };
 
-function _inherits$2(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var ProgressRing = function (_Component) {
-  _inherits$2(ProgressRing, _Component);
-
-  function ProgressRing() {
-    _classCallCheck$2(this, ProgressRing);
-
-    return _possibleConstructorReturn$2(this, (ProgressRing.__proto__ || Object.getPrototypeOf(ProgressRing)).apply(this, arguments));
-  }
-
-  _createClass$2(ProgressRing, [{
-    key: "render",
-    value: function render() {
-      var _props = this.props,
-          mask = _props.mask,
-          percentComplete = _props.percentComplete,
-          size = _props.size,
-          stylesheet = _props.stylesheet,
-          surface = _props.surface,
-          otherProps = _objectWithoutProperties$1(_props, ["mask", "percentComplete", "size", "stylesheet", "surface"]);
-
-      var ProgressRingBehavior = percentComplete === undefined ? ProgressRingIndeterminateBehavior : ProgressRingDeterminateBehavior;
-      var behaviorProps = percentComplete === undefined ? {} : { percentComplete: percentComplete };
-
-      return React.createElement(
-        ProgressRingBehavior,
-        behaviorProps,
-        function (_ref) {
-          var innerRef = _ref.innerRef,
-              cssTransitionState = _ref.cssTransitionState;
-          return React.createElement(ProgressRingPresenter, _extends$1({
-            innerRef: innerRef,
-            percentComplete: percentComplete,
-            size: size,
-            cssTransitionState: cssTransitionState,
-            stylesheet: stylesheet,
-            surface: surface,
-            mask: mask
-          }, otherProps));
-        }
-      );
+  return React.createElement(
+    ProgressRingBehavior,
+    behaviorProps,
+    function (_ref) {
+      var innerRef = _ref.innerRef,
+          cssTransitionState = _ref.cssTransitionState;
+      return React.createElement(ProgressRingPresenter, _extends$1({
+        innerRef: innerRef,
+        percentComplete: percentComplete,
+        size: size,
+        cssTransitionState: cssTransitionState,
+        stylesheet: stylesheet,
+        surface: surface,
+        mask: mask
+      }, otherProps));
     }
-  }]);
+  );
+};
 
-  return ProgressRing;
-}(Component);
-
 ProgressRing.propTypes = {
@@ -1101,4 +1028,5 @@ /**
    */
-  surface: PropTypes.oneOf(availableSurfaces)
+  surface: PropTypes.oneOfType([PropTypes.string, PropTypes.oneOf(availableSurfaces)])
 };
+
 ProgressRing.defaultProps = {
@@ -1153,5 +1081,10 @@ size: "m",
       "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "availableSurfaces"
+        "name": "union",
+        "value": [{
+          "name": "string"
+        }, {
+          "name": "enum",
+          "computed": true,
+          "value": "availableSurfaces"
+        }]
       },
@@ -1158,0 +1091,0 @@ "required": false,

build/index.js

@@ -14,207 +14,182 @@ 'use strict';
 
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+var MAX_INCREASE_PER_MS = 1 / 1000;
 
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+var ProgressRingDeterminateBehavior = function ProgressRingDeterminateBehavior(props) {
+  var _useState = React.useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      cssTransitionState = _useState2[0],
+      setCSSTransitionState = _useState2[1];
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+  var _useState3 = React.useState(true),
+      _useState4 = _slicedToArray(_useState3, 2),
+      transitionEnter = _useState4[0],
+      setTransitionEnter = _useState4[1];
 
-var MAX_INCREASE_PER_MS = 1 / 1000;
+  var containerRef = React.useRef(null);
+  var value = 0;
+  var prevTimestamp = 0;
+  var targetValue = void 0;
+  var segments = void 0;
+  var SEGMENT_COUNT = void 0;
+  var FADE_DELAY_FACTOR = void 0;
 
-var ProgressRingDeterminateBehavior = function (_Component) {
-  _inherits(ProgressRingDeterminateBehavior, _Component);
+  var wait = function wait() {
+    prevTimestamp = window.performance.now();
+    // eslint-disable-next-line no-use-before-define
+    window.requestAnimationFrame(step);
+  };
 
-  function ProgressRingDeterminateBehavior(props) {
-    _classCallCheck(this, ProgressRingDeterminateBehavior);
+  var enter = function enter() {
+    segments.forEach(function (segment) {
+      var eachSegment = segment;
+      eachSegment.style.opacity = 0;
+    });
+    setTransitionEnter(true);
+    wait();
+  };
+  /**
+   * @todo The exit function is associated with the final state of the animation.
+   */
+  var exit = function exit() {
+    segments.forEach(function (segment) {
+      var eachSegment = segment;
+      eachSegment.style.opacity = null;
+    });
+    setTransitionEnter(false);
+    wait();
+  };
 
-    var _this = _possibleConstructorReturn(this, (ProgressRingDeterminateBehavior.__proto__ || Object.getPrototypeOf(ProgressRingDeterminateBehavior)).call(this, props));
+  var opacityForSegment = function opacityForSegment(index, param) {
+    var fadeStartValue = index * FADE_DELAY_FACTOR;
+    return Math.max(0, (param - fadeStartValue) / FADE_DELAY_FACTOR);
+  };
 
-    _this.state = {
-      cssTransitionState: null,
-      transitionEnter: true
-    };
+  var setSegmentOpacities = function setSegmentOpacities(param) {
+    segments.forEach(function (segment, i) {
+      var index = Math.abs(i - SEGMENT_COUNT) - 1;
+      var eachSegment = segment;
+      eachSegment.style.opacity = opacityForSegment(index, param);
+    });
+  };
 
-    _this.step = function (timestamp) {
-      if (_this.state.cssTransitionState === "entering" || _this.state.cssTransitionState === "exiting") {
-        _this.wait();
-        return;
-      }
+  var progressTowardTarget = function progressTowardTarget(timestamp) {
+    var elapsed = timestamp - prevTimestamp;
+    var valueDiff = void 0;
 
-      if (_this.state.cssTransitionState === "exited" && _this.value !== _this.targetValue) {
-        _this.enter();
-        return;
+    if (targetValue > value) {
+      valueDiff = Math.min(elapsed * MAX_INCREASE_PER_MS, targetValue - value);
+    } else if (targetValue < value) {
+      valueDiff = Math.max(-elapsed * MAX_INCREASE_PER_MS, targetValue - value);
+    } else {
+      if (cssTransitionState !== "exited") {
+        setSegmentOpacities(value);
       }
+      prevTimestamp = undefined;
+      return;
+    }
 
-      if (_this.targetValue === 1 && _this.value === 1 && _this.state.cssTransitionState !== "exited") {
-        _this.exit();
-        return;
-      }
+    var interrumValue = value + valueDiff;
 
-      _this.progressTowardTarget(timestamp);
-    };
+    setSegmentOpacities(interrumValue);
 
-    _this.handleEntering = function () {
-      _this.setState({ cssTransitionState: "entering" });
-    };
+    prevTimestamp = timestamp;
+    value = interrumValue;
 
-    _this.handleEntered = function () {
-      _this.setState({ cssTransitionState: "entered" });
-      _this.setProgress(_this.props.percentComplete);
-    };
+    // eslint-disable-next-line no-use-before-define
+    window.requestAnimationFrame(step);
+  };
 
-    _this.handleExiting = function () {
-      _this.setState({ cssTransitionState: "exiting" });
-    };
-
-    _this.handleExited = function () {
-      _this.setState({ cssTransitionState: "exited" });
-    };
-
-    _this.refContainer = function (containerRef) {
-      _this.containerRef = containerRef;
-    };
-
-    _this.value = 0;
-    _this.prevTimestamp = 0;
-    return _this;
-  }
-
-  _createClass(ProgressRingDeterminateBehavior, [{
-    key: "componentDidUpdate",
-    value: function componentDidUpdate() {
-      if (this.state.cssTransitionState === "entered" || this.state.cssTransitionState === "exited") {
-        this.initSegments();
-        this.setProgress(this.props.percentComplete);
-      }
+  var step = function step(timestamp) {
+    if (cssTransitionState === "entering" || cssTransitionState === "exiting") {
+      wait();
+      return;
     }
-  }, {
-    key: "setProgress",
-    value: function setProgress(percent) {
-      this.targetValue = percent / 100;
 
-      if (!this.prevTimestamp) {
-        this.prevTimestamp = window.performance.now();
-      }
-      window.requestAnimationFrame(this.step);
+    if (cssTransitionState === "exited" && value !== targetValue) {
+      enter();
+      return;
     }
-  }, {
-    key: "setSegmentOpacities",
-    value: function setSegmentOpacities(value) {
-      var _this2 = this;
+    /**
+     * @todo The condition associated with the final state of the animation was modified to prevent it from running. The exited state of the animation is the origin of an infinite loop. The component must be refactored to optimize the component life cycle.
+     */
+    if (targetValue === 1 && value === 1 && cssTransitionState === "exited") {
+      exit();
+      return;
+    }
 
-      this.segments.forEach(function (segment, i) {
-        var index = Math.abs(i - _this2.SEGMENT_COUNT) - 1;
-        var eachSegment = segment;
-        eachSegment.style.opacity = _this2.opacityForSegment(index, value);
-      });
+    progressTowardTarget(timestamp);
+  };
+
+  var setProgress = function setProgress(percent) {
+    targetValue = percent / 100;
+    if (!prevTimestamp) {
+      prevTimestamp = window.performance.now();
     }
-  }, {
-    key: "initSegments",
-    value: function initSegments() {
-      this.segments = Array.from(this.containerRef.querySelectorAll(".hig__progress-ring__segment"));
-      this.containerRef.querySelector(".hig__progress-ring__mask").style.opacity = null;
-      this.SEGMENT_COUNT = this.segments.length;
-      this.FADE_DELAY_FACTOR = 1 / this.SEGMENT_COUNT;
-    }
-  }, {
-    key: "progressTowardTarget",
-    value: function progressTowardTarget(timestamp) {
-      var elapsed = timestamp - this.prevTimestamp;
+    window.requestAnimationFrame(step);
+  };
 
-      var valueDiff = void 0;
-      if (this.targetValue > this.value) {
-        valueDiff = Math.min(elapsed * MAX_INCREASE_PER_MS, this.targetValue - this.value);
-      } else if (this.targetValue < this.value) {
-        valueDiff = Math.max(-elapsed * MAX_INCREASE_PER_MS, this.targetValue - this.value);
-      } else {
-        if (this.state.cssTransitionState !== "exited") {
-          this.setSegmentOpacities(this.value);
-        }
-        this.prevTimestamp = undefined;
-        return;
-      }
+  var initSegments = function initSegments() {
+    var current = containerRef.current;
 
-      var interrumValue = this.value + valueDiff;
+    segments = Array.from(current.querySelectorAll(".hig__progress-ring__segment"));
+    current.querySelector(".hig__progress-ring__mask").style.opacity = null;
+    SEGMENT_COUNT = segments.length;
+    FADE_DELAY_FACTOR = 1 / SEGMENT_COUNT;
+  };
 
-      this.setSegmentOpacities(interrumValue);
+  var handleEntering = function handleEntering() {
+    setCSSTransitionState("entering");
+  };
 
-      this.prevTimestamp = timestamp;
-      this.value = interrumValue;
+  var handleEntered = function handleEntered() {
+    setCSSTransitionState("entered");
+    setProgress(props.percentComplete);
+  };
 
-      window.requestAnimationFrame(this.step);
-    }
-  }, {
-    key: "enter",
-    value: function enter() {
-      this.segments.forEach(function (segment) {
-        var eachSegment = segment;
-        eachSegment.style.opacity = 0;
-      });
-      this.setState({ transitionEnter: true });
-      this.wait();
-    }
-  }, {
-    key: "exit",
-    value: function exit() {
-      this.segments.forEach(function (segment) {
-        var eachSegment = segment;
-        eachSegment.style.opacity = null;
-      });
-      this.setState({ transitionEnter: false });
-      this.wait();
-    }
-  }, {
-    key: "wait",
-    value: function wait() {
-      this.prevTimestamp = window.performance.now();
-      window.requestAnimationFrame(this.step);
-    }
-    /**
-     * @param {HTMLDivElement} containerRef
-     */
+  var handleExiting = function handleExiting() {
+    setCSSTransitionState("exiting");
+  };
 
+  var handleExited = function handleExited() {
+    setCSSTransitionState("exited");
+  };
+  /**
+   * @param {HTMLDivElement} containerRef
+   */
+  var refContainer = function refContainer(param) {
+    containerRef.current = param;
+  };
 
-    /** @type {HTMLDivElement} */
-
-  }, {
-    key: "opacityForSegment",
-    value: function opacityForSegment(index, value) {
-      var fadeStartValue = index * this.FADE_DELAY_FACTOR;
-      return Math.max(0, (value - fadeStartValue) / this.FADE_DELAY_FACTOR);
+  React.useEffect(function () {
+    if (cssTransitionState === "entered" || cssTransitionState === "exited") {
+      initSegments();
+      setProgress(props.percentComplete);
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this3 = this;
+  });
 
-      var innerRef = this.refContainer,
-          percentComplete = this.percentComplete;
-
-
-      return React__default.createElement(
-        reactTransitionGroup.CSSTransition,
-        {
-          "in": this.state.transitionEnter,
-          timeout: { enter: 650, exit: 466 },
-          appear: true,
-          classNames: "hig__progress-ring--",
-          onEntering: this.handleEntering,
-          onEntered: this.handleEntered,
-          onExiting: this.handleExiting,
-          onExited: this.handleExited
-        },
-        function (status) {
-          return _this3.props.children({
-            innerRef: innerRef,
-            percentComplete: percentComplete,
-            cssTransitionState: status
-          });
-        }
-      );
+  return React__default.createElement(
+    reactTransitionGroup.CSSTransition,
+    {
+      "in": transitionEnter,
+      timeout: { enter: 650, exit: 466 },
+      appear: true,
+      classNames: "hig__progress-ring--",
+      onEntering: handleEntering,
+      onEntered: handleEntered,
+      onExiting: handleExiting,
+      onExited: handleExited
+    },
+    function (status) {
+      return props.children({
+        innerRef: refContainer,
+        percentComplete: props.percentComplete,
+        cssTransitionState: status
+      });
     }
-  }]);
+  );
+};
 
-  return ProgressRingDeterminateBehavior;
-}(React.Component);
+ProgressRingDeterminateBehavior.displayName = "ProgressRingDeterminateBehavior";
 
@@ -255,160 +230,131 @@ ProgressRingDeterminateBehavior.propTypes = {
 
-var _createClass$1 = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+var _slicedToArray$1 = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
 
-function _classCallCheck$1(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn$1(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits$1(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
 var CYCLE_DURATION = 1000;
 var FADE_DURATION = 416;
 
-var ProgressRingIndeterminateBehavior = function (_Component) {
-  _inherits$1(ProgressRingIndeterminateBehavior, _Component);
+var ProgressRingIndeterminateBehavior = function ProgressRingIndeterminateBehavior(props) {
+  var _useState = React.useState(null),
+      _useState2 = _slicedToArray$1(_useState, 2),
+      cssTransitionState = _useState2[0],
+      setcssTransitionState = _useState2[1];
 
-  function ProgressRingIndeterminateBehavior(props) {
-    _classCallCheck$1(this, ProgressRingIndeterminateBehavior);
+  var _useState3 = React.useState(null),
+      _useState4 = _slicedToArray$1(_useState3, 2),
+      playing = _useState4[0],
+      setPlaying = _useState4[1];
 
-    var _this = _possibleConstructorReturn$1(this, (ProgressRingIndeterminateBehavior.__proto__ || Object.getPrototypeOf(ProgressRingIndeterminateBehavior)).call(this, props));
+  var containerRef = React.useRef(null);
+  var startTime = void 0;
+  var segments = void 0;
+  var SEGMENT_COUNT = void 0;
+  var SEGMENT_DELAY_FACTOR = void 0;
 
-    _this.state = {
-      cssTransitionState: null
-    };
+  var opacityForSegment = function opacityForSegment(index, elapsedThisCycle) {
+    var segmentFadeStartTime = index * SEGMENT_DELAY_FACTOR;
 
-    _this.step = function (timestamp) {
-      if (!_this.playing) {
-        return;
-      }
-      if (_this.state.cssTransitionState !== "entered") {
-        window.requestAnimationFrame(_this.step);
-        return;
-      }
+    // Fade continuing from previous cycle
+    if (segmentFadeStartTime + FADE_DURATION > CYCLE_DURATION && elapsedThisCycle < FADE_DURATION) {
+      return ((elapsedThisCycle + CYCLE_DURATION - segmentFadeStartTime) / FADE_DURATION - 1) * -1;
+    }
 
-      if (!_this.startTime) _this.startTime = timestamp;
-      var elapsed = timestamp - _this.startTime;
-      var elapsedThisCycle = elapsed % CYCLE_DURATION;
+    // Fade has finished
+    if (elapsedThisCycle < segmentFadeStartTime || elapsedThisCycle > segmentFadeStartTime + FADE_DURATION) {
+      return 0;
+    }
 
-      _this.setSegmentOpacities(elapsedThisCycle);
+    // Fading
+    return Math.abs((elapsedThisCycle - segmentFadeStartTime) / FADE_DURATION - 1);
+  };
 
-      window.requestAnimationFrame(_this.step);
-    };
+  var setSegmentOpacities = function setSegmentOpacities(elapsedThisCycle) {
+    segments.forEach(function (segment, i) {
+      var index = Math.abs(i - SEGMENT_COUNT) - 1;
+      var eachSegment = segment;
+      eachSegment.style.opacity = opacityForSegment(index, elapsedThisCycle);
+    });
+  };
 
-    _this.handleEntering = function () {
-      _this.setState({ cssTransitionState: "entering" });
-    };
+  var initSegments = function initSegments() {
+    var current = containerRef.current;
 
-    _this.handleEntered = function () {
-      _this.setState({ cssTransitionState: "entered" });
-      _this.start();
-    };
+    segments = Array.from(current.querySelectorAll(".hig__progress-ring__segment"));
+    current.querySelector(".hig__progress-ring__mask").style.opacity = null;
+    SEGMENT_COUNT = segments.length;
+    SEGMENT_DELAY_FACTOR = CYCLE_DURATION / SEGMENT_COUNT;
+  };
 
-    _this.handleExiting = function () {
-      _this.setState({ cssTransitionState: "exiting" });
-    };
-
-    _this.handleExited = function () {
-      _this.setState({ cssTransitionState: "exited" });
-    };
-
-    _this.refContainer = function (containerRef) {
-      _this.containerRef = containerRef;
-    };
-
-    _this.startTime = undefined;
-    return _this;
-  }
-
-  _createClass$1(ProgressRingIndeterminateBehavior, [{
-    key: "componentDidUpdate",
-    value: function componentDidUpdate() {
-      this.initSegments();
-      this.step(1);
+  var step = function step(timestamp) {
+    if (!playing) {
+      return;
     }
-  }, {
-    key: "setSegmentOpacities",
-    value: function setSegmentOpacities(elapsedThisCycle) {
-      var _this2 = this;
-
-      this.segments.forEach(function (segment, i) {
-        var index = Math.abs(i - _this2.SEGMENT_COUNT) - 1;
-        var eachSegment = segment;
-
-        eachSegment.style.opacity = _this2.opacityForSegment(index, elapsedThisCycle);
-      });
+    if (cssTransitionState !== "entered") {
+      window.requestAnimationFrame(step);
+      return;
     }
-  }, {
-    key: "initSegments",
-    value: function initSegments() {
-      this.segments = Array.from(this.containerRef.querySelectorAll(".hig__progress-ring__segment"));
 
-      this.containerRef.querySelector(".hig__progress-ring__mask").style.opacity = null;
-      this.SEGMENT_COUNT = this.segments.length;
-      this.SEGMENT_DELAY_FACTOR = CYCLE_DURATION / this.SEGMENT_COUNT;
-    }
+    if (!startTime) startTime = timestamp;
+    var elapsed = timestamp - startTime;
+    var elapsedThisCycle = elapsed % CYCLE_DURATION;
+    setSegmentOpacities(elapsedThisCycle);
 
-    /**
-     * @param {HTMLDivElement} containerRef
-     */
+    window.requestAnimationFrame(step);
+  };
 
+  var start = function start() {
+    setPlaying(true);
+    startTime = undefined;
+    window.requestAnimationFrame(step);
+  };
 
-    /** @type {HTMLDivElement} */
+  var handleEntering = function handleEntering() {
+    setcssTransitionState("entering");
+  };
 
-  }, {
-    key: "opacityForSegment",
-    value: function opacityForSegment(index, elapsedThisCycle) {
-      var segmentFadeStartTime = index * this.SEGMENT_DELAY_FACTOR;
+  var handleEntered = function handleEntered() {
+    setcssTransitionState("entered");
+    start();
+  };
 
-      // Fade continuing from previous cycle
-      if (segmentFadeStartTime + FADE_DURATION > CYCLE_DURATION && elapsedThisCycle < FADE_DURATION) {
-        return ((elapsedThisCycle + CYCLE_DURATION - segmentFadeStartTime) / FADE_DURATION - 1) * -1;
-      }
+  var handleExiting = function handleExiting() {
+    setcssTransitionState("exited");
+  };
 
-      // Fade has finished
-      if (elapsedThisCycle < segmentFadeStartTime || elapsedThisCycle > segmentFadeStartTime + FADE_DURATION) {
-        return 0;
-      }
+  var handleExited = function handleExited() {
+    setcssTransitionState("exited");
+  };
+  /**
+   * @param {HTMLDivElement} containerRef
+   */
+  var refContainer = function refContainer(value) {
+    containerRef.current = value;
+  };
 
-      // Fading
-      return Math.abs((elapsedThisCycle - segmentFadeStartTime) / FADE_DURATION - 1);
-    }
-  }, {
-    key: "start",
-    value: function start() {
-      this.playing = true;
-      this.startTime = undefined;
-      window.requestAnimationFrame(this.step);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this3 = this;
+  React.useEffect(function () {
+    initSegments();
+    step(1);
+  });
 
-      var innerRef = this.refContainer;
-
-
-      return React__default.createElement(
-        reactTransitionGroup.CSSTransition,
-        {
-          "in": true,
-          timeout: { enter: 650, exit: 466 },
-          appear: true,
-          classNames: "hig__progress-ring--",
-          onEntering: this.handleEntering,
-          onEntered: this.handleEntered,
-          onExiting: this.handleExiting,
-          onExited: this.handleExited
-        },
-        function (status) {
-          return _this3.props.children({
-            innerRef: innerRef,
-            cssTransitionState: status
-          });
-        }
-      );
+  return React__default.createElement(
+    reactTransitionGroup.CSSTransition,
+    {
+      "in": true,
+      timeout: { enter: 650, exit: 466 },
+      appear: true,
+      classNames: "hig__progress-ring--",
+      onEntering: handleEntering,
+      onEntered: handleEntered,
+      onExiting: handleExiting,
+      onExited: handleExited
+    },
+    function (status) {
+      return props.children({
+        innerRef: refContainer,
+        cssTransitionState: status
+      });
     }
-  }]);
+  );
+};
 
-  return ProgressRingIndeterminateBehavior;
-}(React.Component);
+ProgressRingIndeterminateBehavior.displayName = "ProgressRingIndeterminateBehavior";
 
@@ -950,3 +896,3 @@ ProgressRingIndeterminateBehavior.propTypes = {
   stylesheet: PropTypes.func,
-  surface: PropTypes.oneOf(availableSurfaces)
+  surface: PropTypes.oneOfType([PropTypes.string, PropTypes.oneOf(availableSurfaces)])
 };
@@ -1012,5 +958,10 @@ ProgressRingPresenter.__docgenInfo = {
       "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "availableSurfaces"
+        "name": "union",
+        "value": [{
+          "name": "string"
+        }, {
+          "name": "enum",
+          "computed": true,
+          "value": "availableSurfaces"
+        }]
       },
@@ -1029,58 +980,34 @@ "required": false,
 
-var _createClass$2 = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
 function _objectWithoutProperties$1(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
-function _classCallCheck$2(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+var ProgressRing = function ProgressRing(props) {
+  var mask = props.mask,
+      percentComplete = props.percentComplete,
+      size = props.size,
+      stylesheet = props.stylesheet,
+      surface = props.surface,
+      otherProps = _objectWithoutProperties$1(props, ["mask", "percentComplete", "size", "stylesheet", "surface"]);
 
-function _possibleConstructorReturn$2(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+  var ProgressRingBehavior = percentComplete === undefined ? ProgressRingIndeterminateBehavior : ProgressRingDeterminateBehavior;
+  var behaviorProps = percentComplete === undefined ? {} : { percentComplete: percentComplete };
 
-function _inherits$2(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var ProgressRing = function (_Component) {
-  _inherits$2(ProgressRing, _Component);
-
-  function ProgressRing() {
-    _classCallCheck$2(this, ProgressRing);
-
-    return _possibleConstructorReturn$2(this, (ProgressRing.__proto__ || Object.getPrototypeOf(ProgressRing)).apply(this, arguments));
-  }
-
-  _createClass$2(ProgressRing, [{
-    key: "render",
-    value: function render() {
-      var _props = this.props,
-          mask = _props.mask,
-          percentComplete = _props.percentComplete,
-          size = _props.size,
-          stylesheet = _props.stylesheet,
-          surface = _props.surface,
-          otherProps = _objectWithoutProperties$1(_props, ["mask", "percentComplete", "size", "stylesheet", "surface"]);
-
-      var ProgressRingBehavior = percentComplete === undefined ? ProgressRingIndeterminateBehavior : ProgressRingDeterminateBehavior;
-      var behaviorProps = percentComplete === undefined ? {} : { percentComplete: percentComplete };
-
-      return React__default.createElement(
-        ProgressRingBehavior,
-        behaviorProps,
-        function (_ref) {
-          var innerRef = _ref.innerRef,
-              cssTransitionState = _ref.cssTransitionState;
-          return React__default.createElement(ProgressRingPresenter, _extends$1({
-            innerRef: innerRef,
-            percentComplete: percentComplete,
-            size: size,
-            cssTransitionState: cssTransitionState,
-            stylesheet: stylesheet,
-            surface: surface,
-            mask: mask
-          }, otherProps));
-        }
-      );
+  return React__default.createElement(
+    ProgressRingBehavior,
+    behaviorProps,
+    function (_ref) {
+      var innerRef = _ref.innerRef,
+          cssTransitionState = _ref.cssTransitionState;
+      return React__default.createElement(ProgressRingPresenter, _extends$1({
+        innerRef: innerRef,
+        percentComplete: percentComplete,
+        size: size,
+        cssTransitionState: cssTransitionState,
+        stylesheet: stylesheet,
+        surface: surface,
+        mask: mask
+      }, otherProps));
     }
-  }]);
+  );
+};
 
-  return ProgressRing;
-}(React.Component);
-
 ProgressRing.propTypes = {
@@ -1108,4 +1035,5 @@ /**
    */
-  surface: PropTypes.oneOf(availableSurfaces)
+  surface: PropTypes.oneOfType([PropTypes.string, PropTypes.oneOf(availableSurfaces)])
 };
+
 ProgressRing.defaultProps = {
@@ -1160,5 +1088,10 @@ size: "m",
       "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "availableSurfaces"
+        "name": "union",
+        "value": [{
+          "name": "string"
+        }, {
+          "name": "enum",
+          "computed": true,
+          "value": "availableSurfaces"
+        }]
       },
@@ -1165,0 +1098,0 @@ "required": false,

CHANGELOG.md

@@ -0,1 +1,13 @@
+# [@hig/progress-ring-v2.0.0](https://github.com/Autodesk/hig/compare/@hig/progress-ring@1.2.2...@hig/progress-ring@2.0.0) (2022-01-13)
+
+
+### Code Refactoring
+
+* Major Release - React 17 Upgrade ([2523711](https://github.com/Autodesk/hig/commit/2523711))
+
+
+### BREAKING CHANGES
+
+* This release includes upgrading to React 17 and all associated libraries. The components have also had structural changes, utilizing stateless components and hooks. There should be no change in look or behavior of components. The code usage is the same so if you’re already on react 17 you can bump the version directly. If you’re on an old version of react you’ll need to upgrade your project’s react first to 17 and then the HIG components. This upgrade also means no more fixes for the react 15 version but it will still be available for download from NPM. You can fork the repo and make fixes with the older version if there is something critical past this release date.
+
 # [@hig/progress-ring-v1.2.2](https://github.com/Autodesk/hig/compare/@hig/progress-ring@1.2.1...@hig/progress-ring@1.2.2) (2022-01-12)
@@ -2,0 +14,0 @@

package.json

 {
   "name": "@hig/progress-ring",
-  "version": "1.2.2",
+  "version": "2.0.0",
   "description": "HIG Progress Ring",
@@ -27,4 +27,4 @@ "author": "Autodesk Inc.",
     "@hig/theme-context": "^3.0.1",
-    "@hig/theme-data": "^2.22.0",
-    "react": "^15.4.1 || ^16.3.2"
+    "@hig/theme-data": "^2.22.1",
+    "react": "^17.0.0"
   },
@@ -31,0 +31,0 @@ "devDependencies": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

73469

decreased by-10.05%

Lines of code

2020

decreased by-4.27%

No dependency changes