@khanacademy/wonder-blocks-timing 2.0.0 → 2.1.0

package/dist/index.js

@@ -82,71 +82,441 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 2);
+/******/ 	return __webpack_require__(__webpack_require__.s = 13);
 /******/ })
 /************************************************************************/
 /******/ ([
 /* 0 */
-/***/ (function(module, exports) {
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
-module.exports = require("react");
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return SchedulePolicy; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return ClearPolicy; });
+const SchedulePolicy = {
+  Immediately: "schedule-immediately",
+  OnDemand: "schedule-on-demand"
+};
+const ClearPolicy = {
+  Resolve: "resolve-on-clear",
+  Cancel: "cancel-on-clear"
+};
 
 /***/ }),
 /* 1 */
 /***/ (function(module, exports) {
 
-function _extends() {
-  module.exports = _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
+module.exports = require("react");
 
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
+/***/ }),
+/* 2 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return useUpdatingRef; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+
+/**
+ * Returns a ref whose .current value is updated whenever
+ * the `value` passed to this hook changes.
+ *
+ * this is great for values that you want to reference from
+ * within a useCallback or useEffect event listener, without
+ * re-triggering the effect when the value changes
+ *
+ * @returns {{current: T}}
+ */
+
+const useUpdatingRef = value => {
+  const ref = Object(react__WEBPACK_IMPORTED_MODULE_0__["useRef"])(value);
+  Object(react__WEBPACK_IMPORTED_MODULE_0__["useEffect"])(() => {
+    ref.current = value;
+  }, [value]);
+  return ref;
+};
+
+/***/ }),
+/* 3 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return useInterval; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _internal_use_updating_ref_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2);
+
+
+/**
+ * A simple hook for using `setInterval`.
+ *
+ * @param action called every `intervalMs` when `active` is true
+ * @param intervalMs the duration between calls to `action`
+ * @param active whether or not the interval is active
+ */
+
+function useInterval(action, intervalMs, active) {
+  // We using a ref instead of a callback for `action` to avoid resetting
+  // the interval whenever the `action` changes.
+  const actionRef = Object(_internal_use_updating_ref_js__WEBPACK_IMPORTED_MODULE_1__[/* useUpdatingRef */ "a"])(action);
+  Object(react__WEBPACK_IMPORTED_MODULE_0__["useEffect"])(() => {
+    if (active) {
+      const intervalId = setInterval(() => {
+        actionRef.current();
+      }, intervalMs);
+      return () => {
+        clearInterval(intervalId);
+      };
+    } // actionRef isn't actually required, but react-hooks/exhaustive-deps
+    // doesn't recognize it as a ref and thus complains if it isn't in the
+    // deps list.  It isn't a big deal though since the value ofactionRef
+    // never changes (only its contents do).
+
+  }, [intervalMs, active, actionRef]);
+}
+
+/***/ }),
+/* 4 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return useTimeout; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _internal_use_updating_ref_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2);
+
+
+/**
+ * A simple hook for using `setTimeout`.
+ *
+ * @param action called after `timeoutMs` when `active` is true
+ * @param timeoutMs the duration after which `action` is called
+ * @param active whether or not the interval is active
+ */
+
+function useTimeout(action, timeoutMs, active) {
+  // We using a ref instead of a callback for `action` to avoid resetting
+  // the interval whenever the `action` changes.
+  const actionRef = Object(_internal_use_updating_ref_js__WEBPACK_IMPORTED_MODULE_1__[/* useUpdatingRef */ "a"])(action);
+  Object(react__WEBPACK_IMPORTED_MODULE_0__["useEffect"])(() => {
+    if (active) {
+      const timeoutId = setTimeout(() => {
+        actionRef.current();
+      }, timeoutMs);
+      return () => {
+        clearTimeout(timeoutId);
+      };
+    } // actionRef isn't actually required, but react-hooks/exhaustive-deps
+    // doesn't recognize it as a ref and thus complains if it isn't in the
+    // deps list.  It isn't a big deal though since the value ofactionRef
+    // never changes (only its contents do).
+
+  }, [timeoutMs, active, actionRef]);
+}
+
+/***/ }),
+/* 5 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return withActionScheduler; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _action_scheduler_provider_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(8);
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+
+
+
+/**
+ * A higher order component that attaches the given component to an
+ * `IScheduleActions` instance. Any actions scheduled will automatically be
+ * cleared on unmount.
+ *
+ * @template TOwnProps The own props of the component being rendered, without
+ * the additional action scheduler prop. To attach the additional prop to
+ * these props use the `WithActionScheduler` type.
+ */
+function withActionScheduler(WrappedComponent) {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["forwardRef"]((props, ref) => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_action_scheduler_provider_js__WEBPACK_IMPORTED_MODULE_1__[/* default */ "a"], null, schedule => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](WrappedComponent, _extends({}, props, {
+    ref: ref,
+    schedule: schedule
+  }))));
+}
+
+/***/ }),
+/* 6 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return useScheduledInterval; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _util_policies_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(0);
+/* harmony import */ var _internal_use_updating_ref_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(2);
+/* harmony import */ var _use_interval_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(3);
+
+
+
+
+function useScheduledInterval(action, intervalMs, options) {
+  var _options$schedulePoli;
+
+  if (typeof action !== "function") {
+    throw new Error("Action must be a function");
+  }
+
+  if (intervalMs < 1) {
+    throw new Error("Interval period must be >= 1");
+  }
+
+  const schedulePolicy = (_options$schedulePoli = options == null ? void 0 : options.schedulePolicy) != null ? _options$schedulePoli : _util_policies_js__WEBPACK_IMPORTED_MODULE_1__[/* SchedulePolicy */ "b"].Immediately;
+  const [isSet, setIsSet] = Object(react__WEBPACK_IMPORTED_MODULE_0__["useState"])(schedulePolicy === _util_policies_js__WEBPACK_IMPORTED_MODULE_1__[/* SchedulePolicy */ "b"].Immediately);
+  const set = Object(react__WEBPACK_IMPORTED_MODULE_0__["useCallback"])(() => setIsSet(true), []);
+  const actionRef = Object(_internal_use_updating_ref_js__WEBPACK_IMPORTED_MODULE_2__[/* useUpdatingRef */ "a"])(action);
+  const clear = Object(react__WEBPACK_IMPORTED_MODULE_0__["useCallback"])(policy => {
+    var _policy;
+
+    policy = (_policy = policy) != null ? _policy : options == null ? void 0 : options.clearPolicy;
+
+    if (isSet && policy === _util_policies_js__WEBPACK_IMPORTED_MODULE_1__[/* ClearPolicy */ "a"].Resolve) {
+      actionRef.current();
     }
 
-    return target;
+    setIsSet(false);
+  }, // react-hooks/exhaustive-deps doesn't require refs to be
+  // listed in the deps array.  Unfortunately, in this situation
+  // it doesn't recognized actionRef as a ref.
+  [actionRef, isSet, options == null ? void 0 : options.clearPolicy]);
+  const runOnUnmountRef = Object(_internal_use_updating_ref_js__WEBPACK_IMPORTED_MODULE_2__[/* useUpdatingRef */ "a"])(isSet && (options == null ? void 0 : options.clearPolicy) === _util_policies_js__WEBPACK_IMPORTED_MODULE_1__[/* ClearPolicy */ "a"].Resolve);
+  Object(react__WEBPACK_IMPORTED_MODULE_0__["useEffect"])(() => {
+    return () => {
+      // This code will only run with the component using this
+      // hook is unmounted.
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      if (runOnUnmountRef.current) {
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        actionRef.current();
+      }
+    }; // This eslint rule doesn't realize actionRef and runOnUnmountRef
+    // a both refs and thus do not have to be listed as deps.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  Object(_use_interval_js__WEBPACK_IMPORTED_MODULE_3__[/* useInterval */ "a"])(action, intervalMs, isSet);
+  return {
+    isSet,
+    set,
+    clear
   };
+}
+
+/***/ }),
+/* 7 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return useScheduledTimeout; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _util_policies_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(0);
+/* harmony import */ var _internal_use_updating_ref_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(2);
+/* harmony import */ var _use_timeout_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(4);
+
 
-  module.exports["default"] = module.exports, module.exports.__esModule = true;
-  return _extends.apply(this, arguments);
+
+
+function useScheduledTimeout(action, timeoutMs, options) {
+  var _options$schedulePoli;
+
+  if (typeof action !== "function") {
+    throw new Error("Action must be a function");
+  }
+
+  if (timeoutMs < 0) {
+    throw new Error("Timeout period must be >= 0");
+  }
+
+  const schedulePolicy = (_options$schedulePoli = options == null ? void 0 : options.schedulePolicy) != null ? _options$schedulePoli : _util_policies_js__WEBPACK_IMPORTED_MODULE_1__[/* SchedulePolicy */ "b"].Immediately;
+  const [isSet, setIsSet] = Object(react__WEBPACK_IMPORTED_MODULE_0__["useState"])(schedulePolicy === _util_policies_js__WEBPACK_IMPORTED_MODULE_1__[/* SchedulePolicy */ "b"].Immediately);
+  const set = Object(react__WEBPACK_IMPORTED_MODULE_0__["useCallback"])(() => setIsSet(true), []); // This wrapper isn't present in useScheduledInterval because we
+  // don't need to update `isSet` in that situations.
+
+  const wrappedAction = Object(react__WEBPACK_IMPORTED_MODULE_0__["useCallback"])(() => {
+    setIsSet(false);
+    action();
+  }, [action]);
+  const actionRef = Object(_internal_use_updating_ref_js__WEBPACK_IMPORTED_MODULE_2__[/* useUpdatingRef */ "a"])(wrappedAction);
+  const clear = Object(react__WEBPACK_IMPORTED_MODULE_0__["useCallback"])(policy => {
+    var _policy;
+
+    policy = (_policy = policy) != null ? _policy : options == null ? void 0 : options.clearPolicy;
+
+    if (isSet && policy === _util_policies_js__WEBPACK_IMPORTED_MODULE_1__[/* ClearPolicy */ "a"].Resolve) {
+      actionRef.current();
+    }
+
+    setIsSet(false);
+  }, // react-hooks/exhaustive-deps doesn't require refs to be
+  // listed in the deps array.  Unfortunately, in this situation
+  // it doesn't recognized actionRef as a ref.
+  [actionRef, isSet, options == null ? void 0 : options.clearPolicy]);
+  const runOnUnmountRef = Object(_internal_use_updating_ref_js__WEBPACK_IMPORTED_MODULE_2__[/* useUpdatingRef */ "a"])(isSet && (options == null ? void 0 : options.clearPolicy) === _util_policies_js__WEBPACK_IMPORTED_MODULE_1__[/* ClearPolicy */ "a"].Resolve);
+  Object(react__WEBPACK_IMPORTED_MODULE_0__["useEffect"])(() => {
+    return () => {
+      // This code will only run with the component using this
+      // hook is unmounted.
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      if (runOnUnmountRef.current) {
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        actionRef.current();
+      }
+    }; // This eslint rule doesn't realize actionRef and runOnUnmountRef
+    // a both refs and thus do not have to be listed as deps.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  Object(_use_timeout_js__WEBPACK_IMPORTED_MODULE_3__[/* useTimeout */ "a"])(wrappedAction, timeoutMs, isSet);
+  return {
+    isSet,
+    set,
+    clear
+  };
 }
 
-module.exports = _extends;
-module.exports["default"] = module.exports, module.exports.__esModule = true;
+/***/ }),
+/* 8 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return ActionSchedulerProvider; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _util_action_scheduler_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(9);
+
+
+
+/**
+ * A provider component that passes our action scheduling API to its children
+ * and ensures that all scheduled actions are cleared on unmount.
+ *
+ * ```jsx
+ * <ActionSchedulerProvider>
+ *     {schedule => this.renderThingThatNeedsTimers(schedule)}
+ * </ActionSchedulerProvider>
+ * ```
+ */
+class ActionSchedulerProvider extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
+  constructor(...args) {
+    super(...args);
+    this._actionScheduler = new _util_action_scheduler_js__WEBPACK_IMPORTED_MODULE_1__[/* default */ "a"]();
+  }
+
+  componentWillUnmount() {
+    this._actionScheduler.disable();
+  }
+
+  render() {
+    const {
+      children
+    } = this.props;
+    return children(this._actionScheduler);
+  }
+
+}
 
 /***/ }),
-/* 2 */
+/* 9 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-// ESM COMPAT FLAG
-__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return ActionScheduler; });
+/* harmony import */ var _timeout_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(10);
+/* harmony import */ var _interval_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(11);
+/* harmony import */ var _animation_frame_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(12);
 
-// EXPORTS
-__webpack_require__.d(__webpack_exports__, "SchedulePolicy", function() { return /* reexport */ SchedulePolicy; });
-__webpack_require__.d(__webpack_exports__, "ClearPolicy", function() { return /* reexport */ ClearPolicy; });
-__webpack_require__.d(__webpack_exports__, "withActionScheduler", function() { return /* reexport */ withActionScheduler; });
 
-// CONCATENATED MODULE: ./packages/wonder-blocks-timing/src/util/policies.js
-const SchedulePolicy = {
-  Immediately: "schedule-immediately",
-  OnDemand: "schedule-on-demand"
-};
-const ClearPolicy = {
-  Resolve: "resolve-on-clear",
-  Cancel: "cancel-on-clear"
+
+
+/**
+ * Implements the `IScheduleActions` API to provide timeout, interval, and
+ * animation frame support. This is not intended for direct use, but instead
+ * is to be used solely by the `ActionSchedulerProvider` to provide an
+ * `IScheduleActions` instance.
+ */
+class ActionScheduler {
+  constructor() {
+    this._disabled = false;
+    this._registeredActions = [];
+  }
+
+  timeout(action, period, options) {
+    if (this._disabled) {
+      return ActionScheduler.NoopAction;
+    }
+
+    const timeout = new _timeout_js__WEBPACK_IMPORTED_MODULE_0__[/* default */ "a"](action, period, options == null ? void 0 : options.schedulePolicy);
+
+    this._registeredActions.push(() => timeout.clear(options == null ? void 0 : options.clearPolicy));
+
+    return timeout;
+  }
+
+  interval(action, period, options) {
+    if (this._disabled) {
+      return ActionScheduler.NoopAction;
+    }
+
+    const interval = new _interval_js__WEBPACK_IMPORTED_MODULE_1__[/* default */ "a"](action, period, options == null ? void 0 : options.schedulePolicy);
+
+    this._registeredActions.push(() => interval.clear(options == null ? void 0 : options.clearPolicy));
+
+    return interval;
+  }
+
+  animationFrame(action, options) {
+    if (this._disabled) {
+      return ActionScheduler.NoopAction;
+    }
+
+    const animationFrame = new _animation_frame_js__WEBPACK_IMPORTED_MODULE_2__[/* default */ "a"](action, options == null ? void 0 : options.schedulePolicy);
+
+    this._registeredActions.push(() => animationFrame.clear(options == null ? void 0 : options.clearPolicy));
+
+    return animationFrame;
+  }
+
+  clearAll() {
+    const registered = [].concat(this._registeredActions);
+    this._registeredActions = [];
+    registered.forEach(clearFn => clearFn());
+  }
+  /**
+   * Prevents this scheduler from creating any additional actions.
+   * This also clears any pending actions.
+   */
+
+
+  disable() {
+    this._disabled = true;
+    this.clearAll();
+  }
+
+}
+ActionScheduler.NoopAction = {
+  set: () => {},
+
+  get isSet() {
+    return false;
+  },
+
+  clear: () => {}
 };
-// EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/extends.js
-var helpers_extends = __webpack_require__(1);
-var extends_default = /*#__PURE__*/__webpack_require__.n(helpers_extends);
 
-// EXTERNAL MODULE: external "react"
-var external_react_ = __webpack_require__(0);
+/***/ }),
+/* 10 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
-// CONCATENATED MODULE: ./packages/wonder-blocks-timing/src/util/timeout.js
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Timeout; });
+/* harmony import */ var _policies_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
 
 
 /**
@@ -158,7 +528,7 @@ var external_react_ = __webpack_require__(0);
  * @class Timeout
  * @implements {ITimeout}
  */
-class timeout_Timeout {
+class Timeout {
   /**
    * Creates a timeout that will invoke the given action after
    * the given period. The timeout does not start until set is called.
@@ -172,7 +542,7 @@ class timeout_Timeout {
    * Defaults to `SchedulePolicy.Immediately`.
    * @memberof Timeout
    */
-  constructor(action, timeoutMs, schedulePolicy = SchedulePolicy.Immediately) {
+  constructor(action, timeoutMs, schedulePolicy = _policies_js__WEBPACK_IMPORTED_MODULE_0__[/* SchedulePolicy */ "b"].Immediately) {
     if (typeof action !== "function") {
       throw new Error("Action must be a function");
     }
@@ -184,7 +554,7 @@ class timeout_Timeout {
     this._action = action;
     this._timeoutMs = timeoutMs;
 
-    if (schedulePolicy === SchedulePolicy.Immediately) {
+    if (schedulePolicy === _policies_js__WEBPACK_IMPORTED_MODULE_0__[/* SchedulePolicy */ "b"].Immediately) {
       this.set();
     }
   }
@@ -213,10 +583,10 @@ class timeout_Timeout {
 
   set() {
     if (this.isSet) {
-      this.clear(ClearPolicy.Cancel);
+      this.clear(_policies_js__WEBPACK_IMPORTED_MODULE_0__[/* ClearPolicy */ "a"].Cancel);
     }
 
-    this._timeoutId = setTimeout(() => this.clear(ClearPolicy.Resolve), this._timeoutMs);
+    this._timeoutId = setTimeout(() => this.clear(_policies_js__WEBPACK_IMPORTED_MODULE_0__[/* ClearPolicy */ "a"].Resolve), this._timeoutMs);
   }
   /**
    * Clear the set timeout.
@@ -234,7 +604,7 @@ class timeout_Timeout {
    */
 
 
-  clear(policy = ClearPolicy.Cancel) {
+  clear(policy = _policies_js__WEBPACK_IMPORTED_MODULE_0__[/* ClearPolicy */ "a"].Cancel) {
     const timeoutId = this._timeoutId;
     this._timeoutId = null;
 
@@ -244,13 +614,20 @@ class timeout_Timeout {
 
     clearTimeout(timeoutId);
 
-    if (policy === ClearPolicy.Resolve) {
+    if (policy === _policies_js__WEBPACK_IMPORTED_MODULE_0__[/* ClearPolicy */ "a"].Resolve) {
       this._action();
     }
   }
 
 }
-// CONCATENATED MODULE: ./packages/wonder-blocks-timing/src/util/interval.js
+
+/***/ }),
+/* 11 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Interval; });
+/* harmony import */ var _policies_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
 
 
 /**
@@ -262,7 +639,7 @@ class timeout_Timeout {
  * @class Interval
  * @implements {IInterval}
  */
-class interval_Interval {
+class Interval {
   /**
    * Creates an interval that will invoke the given action after
    * the given period. The interval does not start until set is called.
@@ -276,7 +653,7 @@ class interval_Interval {
    * Defaults to `SchedulePolicy.Immediately`.
    * @memberof Interval
    */
-  constructor(action, intervalMs, schedulePolicy = SchedulePolicy.Immediately) {
+  constructor(action, intervalMs, schedulePolicy = _policies_js__WEBPACK_IMPORTED_MODULE_0__[/* SchedulePolicy */ "b"].Immediately) {
     if (typeof action !== "function") {
       throw new Error("Action must be a function");
     }
@@ -288,7 +665,7 @@ class interval_Interval {
     this._action = action;
     this._intervalMs = intervalMs;
 
-    if (schedulePolicy === SchedulePolicy.Immediately) {
+    if (schedulePolicy === _policies_js__WEBPACK_IMPORTED_MODULE_0__[/* SchedulePolicy */ "b"].Immediately) {
       this.set();
     }
   }
@@ -315,7 +692,7 @@ class interval_Interval {
 
   set() {
     if (this.isSet) {
-      this.clear(ClearPolicy.Cancel);
+      this.clear(_policies_js__WEBPACK_IMPORTED_MODULE_0__[/* ClearPolicy */ "a"].Cancel);
     }
 
     this._intervalId = setInterval(() => this._action(), this._intervalMs);
@@ -336,7 +713,7 @@ class interval_Interval {
    */
 
 
-  clear(policy = ClearPolicy.Cancel) {
+  clear(policy = _policies_js__WEBPACK_IMPORTED_MODULE_0__[/* ClearPolicy */ "a"].Cancel) {
     const intervalId = this._intervalId;
     this._intervalId = null;
 
@@ -346,13 +723,20 @@ class interval_Interval {
 
     clearInterval(intervalId);
 
-    if (policy === ClearPolicy.Resolve) {
+    if (policy === _policies_js__WEBPACK_IMPORTED_MODULE_0__[/* ClearPolicy */ "a"].Resolve) {
       this._action();
     }
   }
 
 }
-// CONCATENATED MODULE: ./packages/wonder-blocks-timing/src/util/animation-frame.js
+
+/***/ }),
+/* 12 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return AnimationFrame; });
+/* harmony import */ var _policies_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
 
 
 /**
@@ -364,7 +748,7 @@ class interval_Interval {
  * @class AnimationFrame
  * @implements {IAnimationFrame}
  */
-class animation_frame_AnimationFrame {
+class AnimationFrame {
   /**
    * Creates an animation frame request that will invoke the given action.
    * The request is not made until set is called.
@@ -376,14 +760,14 @@ class animation_frame_AnimationFrame {
    * Defaults to `SchedulePolicy.Immediately`.
    * @memberof AnimationFrame
    */
-  constructor(action, schedulePolicy = SchedulePolicy.Immediately) {
+  constructor(action, schedulePolicy = _policies_js__WEBPACK_IMPORTED_MODULE_0__[/* SchedulePolicy */ "b"].Immediately) {
     if (typeof action !== "function") {
       throw new Error("Action must be a function");
     }
 
     this._action = action;
 
-    if (schedulePolicy === SchedulePolicy.Immediately) {
+    if (schedulePolicy === _policies_js__WEBPACK_IMPORTED_MODULE_0__[/* SchedulePolicy */ "b"].Immediately) {
       this.set();
     }
   }
@@ -412,10 +796,10 @@ class animation_frame_AnimationFrame {
 
   set() {
     if (this.isSet) {
-      this.clear(ClearPolicy.Cancel);
+      this.clear(_policies_js__WEBPACK_IMPORTED_MODULE_0__[/* ClearPolicy */ "a"].Cancel);
     }
 
-    this._animationFrameId = requestAnimationFrame(time => this.clear(ClearPolicy.Resolve, time));
+    this._animationFrameId = requestAnimationFrame(time => this.clear(_policies_js__WEBPACK_IMPORTED_MODULE_0__[/* ClearPolicy */ "a"].Resolve, time));
   }
   /**
    * Clear the pending request.
@@ -436,7 +820,7 @@ class animation_frame_AnimationFrame {
    */
 
 
-  clear(policy = ClearPolicy.Cancel, time) {
+  clear(policy = _policies_js__WEBPACK_IMPORTED_MODULE_0__[/* ClearPolicy */ "a"].Cancel, time) {
     const animationFrameId = this._animationFrameId;
     this._animationFrameId = null;
 
@@ -446,144 +830,43 @@ class animation_frame_AnimationFrame {
 
     cancelAnimationFrame(animationFrameId);
 
-    if (policy === ClearPolicy.Resolve) {
+    if (policy === _policies_js__WEBPACK_IMPORTED_MODULE_0__[/* ClearPolicy */ "a"].Resolve) {
       this._action(time || performance.now());
     }
   }
 
 }
-// CONCATENATED MODULE: ./packages/wonder-blocks-timing/src/util/action-scheduler.js
-
-
-
-
-/**
- * Implements the `IScheduleActions` API to provide timeout, interval, and
- * animation frame support. This is not intended for direct use, but instead
- * is to be used solely by the `ActionSchedulerProvider` to provide an
- * `IScheduleActions` instance.
- */
-class action_scheduler_ActionScheduler {
-  constructor() {
-    this._disabled = false;
-    this._registeredActions = [];
-  }
-
-  timeout(action, period, options) {
-    if (this._disabled) {
-      return action_scheduler_ActionScheduler.NoopAction;
-    }
-
-    const timeout = new timeout_Timeout(action, period, options == null ? void 0 : options.schedulePolicy);
-
-    this._registeredActions.push(() => timeout.clear(options == null ? void 0 : options.clearPolicy));
-
-    return timeout;
-  }
-
-  interval(action, period, options) {
-    if (this._disabled) {
-      return action_scheduler_ActionScheduler.NoopAction;
-    }
-
-    const interval = new interval_Interval(action, period, options == null ? void 0 : options.schedulePolicy);
-
-    this._registeredActions.push(() => interval.clear(options == null ? void 0 : options.clearPolicy));
-
-    return interval;
-  }
 
-  animationFrame(action, options) {
-    if (this._disabled) {
-      return action_scheduler_ActionScheduler.NoopAction;
-    }
-
-    const animationFrame = new animation_frame_AnimationFrame(action, options == null ? void 0 : options.schedulePolicy);
-
-    this._registeredActions.push(() => animationFrame.clear(options == null ? void 0 : options.clearPolicy));
-
-    return animationFrame;
-  }
-
-  clearAll() {
-    const registered = [].concat(this._registeredActions);
-    this._registeredActions = [];
-    registered.forEach(clearFn => clearFn());
-  }
-  /**
-   * Prevents this scheduler from creating any additional actions.
-   * This also clears any pending actions.
-   */
-
-
-  disable() {
-    this._disabled = true;
-    this.clearAll();
-  }
-
-}
-action_scheduler_ActionScheduler.NoopAction = {
-  set: () => {},
+/***/ }),
+/* 13 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
-  get isSet() {
-    return false;
-  },
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _util_policies_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SchedulePolicy", function() { return _util_policies_js__WEBPACK_IMPORTED_MODULE_0__["b"]; });
 
-  clear: () => {}
-};
-// CONCATENATED MODULE: ./packages/wonder-blocks-timing/src/components/action-scheduler-provider.js
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ClearPolicy", function() { return _util_policies_js__WEBPACK_IMPORTED_MODULE_0__["a"]; });
 
+/* harmony import */ var _components_with_action_scheduler_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "withActionScheduler", function() { return _components_with_action_scheduler_js__WEBPACK_IMPORTED_MODULE_1__["a"]; });
 
+/* harmony import */ var _hooks_use_interval_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(3);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "useInterval", function() { return _hooks_use_interval_js__WEBPACK_IMPORTED_MODULE_2__["a"]; });
 
-/**
- * A provider component that passes our action scheduling API to its children
- * and ensures that all scheduled actions are cleared on unmount.
- *
- * ```jsx
- * <ActionSchedulerProvider>
- *     {schedule => this.renderThingThatNeedsTimers(schedule)}
- * </ActionSchedulerProvider>
- * ```
- */
-class action_scheduler_provider_ActionSchedulerProvider extends external_react_["Component"] {
-  constructor(...args) {
-    super(...args);
-    this._actionScheduler = new action_scheduler_ActionScheduler();
-  }
+/* harmony import */ var _hooks_use_timeout_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(4);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "useTimeout", function() { return _hooks_use_timeout_js__WEBPACK_IMPORTED_MODULE_3__["a"]; });
 
-  componentWillUnmount() {
-    this._actionScheduler.disable();
-  }
+/* harmony import */ var _hooks_use_scheduled_interval_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(6);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "useScheduledInterval", function() { return _hooks_use_scheduled_interval_js__WEBPACK_IMPORTED_MODULE_4__["a"]; });
 
-  render() {
-    const {
-      children
-    } = this.props;
-    return children(this._actionScheduler);
-  }
+/* harmony import */ var _hooks_use_scheduled_timeout_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(7);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "useScheduledTimeout", function() { return _hooks_use_scheduled_timeout_js__WEBPACK_IMPORTED_MODULE_5__["a"]; });
 
-}
-// CONCATENATED MODULE: ./packages/wonder-blocks-timing/src/components/with-action-scheduler.js
 
 
 
 
-/**
- * A higher order component that attaches the given component to an
- * `IScheduleActions` instance. Any actions scheduled will automatically be
- * cleared on unmount.
- *
- * @template TOwnProps The own props of the component being rendered, without
- * the additional action scheduler prop. To attach the additional prop to
- * these props use the `WithActionScheduler` type.
- */
-function withActionScheduler(WrappedComponent) {
-  return /*#__PURE__*/external_react_["forwardRef"]((props, ref) => /*#__PURE__*/external_react_["createElement"](action_scheduler_provider_ActionSchedulerProvider, null, schedule => /*#__PURE__*/external_react_["createElement"](WrappedComponent, extends_default()({}, props, {
-    ref: ref,
-    schedule: schedule
-  }))));
-}
-// CONCATENATED MODULE: ./packages/wonder-blocks-timing/src/index.js