@khanacademy/wonder-blocks-core 4.3.2 → 4.4.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @khanacademy/wonder-blocks-core
 
+## 4.4.0
+
+### Minor Changes
+
+-   6ee20af9: Add `useOnline` hook to encapsulate navigator.onLine and the offline/online events
+
 ## 4.3.2
 
 ### Patch Changes

package/dist/es/index.js

@@ -1,7 +1,7 @@
 import _extends from '@babel/runtime/helpers/extends';
 import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
 import * as React from 'react';
-import { useContext as useContext$1, useRef } from 'react';
+import { useContext as useContext$1, useRef, useEffect as useEffect$1 } from 'react';
 import { StyleSheet, css } from 'aphrodite';
 
 function flatten(list) {
@@ -267,7 +267,9 @@ class WithSSRPlaceholder extends React.Component {
     }
 
     {
-      console.log(`We got a render state we don't understand: "${JSON.stringify(renderState)}"`);
+      var _JSON$stringify;
+
+      console.log(`We got a render state we don't understand: "${(_JSON$stringify = JSON.stringify(renderState)) != null ? _JSON$stringify : ""}"`);
       return this._maybeRender(RenderState.Root);
     }
   }
@@ -438,6 +440,21 @@ const useForceUpdate = () => {
   return forceUpdate;
 };
 
+const useOnline = () => {
+  const forceUpdate = useForceUpdate();
+  useEffect$1(() => {
+    const handleChange = () => forceUpdate();
+
+    window.addEventListener("online", handleChange);
+    window.addEventListener("offline", handleChange);
+    return () => {
+      window.removeEventListener("online", handleChange);
+      window.removeEventListener("offline", handleChange);
+    };
+  }, [forceUpdate]);
+  return navigator.onLine;
+};
+
 const {
   useContext,
   useEffect,
@@ -470,4 +487,4 @@ RenderStateRoot.defaultProps = {
   throwIfNested: true
 };
 
-export { IDProvider, RenderStateRoot, server as Server, Text, UniqueIDProvider, View, WithSSRPlaceholder, addStyle, useForceUpdate, useUniqueIdWithMock, useUniqueIdWithoutMock };
+export { IDProvider, RenderStateRoot, server as Server, Text, UniqueIDProvider, View, WithSSRPlaceholder, addStyle, useForceUpdate, useOnline, useUniqueIdWithMock, useUniqueIdWithoutMock };

package/dist/index.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 16);
+/******/ 	return __webpack_require__(__webpack_require__.s = 18);
 /******/ })
 /************************************************************************/
 /******/ ([
@@ -101,7 +101,7 @@ module.exports = require("react");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
 
-const RenderState = __webpack_require__(18)({
+const RenderState = __webpack_require__(20)({
   Root: "root",
   Initial: "initial",
   Standard: "standard"
@@ -136,12 +136,13 @@ module.exports = require("aphrodite");
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return addStyle; });
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2);
-/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _util_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(7);
-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); }
+/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(8);
+/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(0);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(2);
+/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _util_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(9);
 
 
 
@@ -161,8 +162,8 @@ function addStyle(Component, defaultStyle) {
     const {
       className: aphroditeClassName,
       style: inlineStyles
-    } = Object(_util_js__WEBPACK_IMPORTED_MODULE_2__[/* processStyleList */ "a"])([reset, defaultStyle, style]);
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](Component, _extends({}, otherProps, {
+    } = Object(_util_js__WEBPACK_IMPORTED_MODULE_3__[/* processStyleList */ "a"])([reset, defaultStyle, style]);
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](Component, _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({}, otherProps, {
       className: [aphroditeClassName, className].filter(Boolean).join(" "),
       style: inlineStyles
     }));
@@ -176,7 +177,7 @@ function addStyle(Component, defaultStyle) {
  * they appear in https://github.com/necolas/normalize.css/blob/master/normalize.css.
  */
 
-const overrides = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
+const overrides = aphrodite__WEBPACK_IMPORTED_MODULE_2__["StyleSheet"].create({
   button: {
     margin: 0,
     // Safari adds 2px left/right margins
@@ -282,24 +283,27 @@ UniqueIDFactory._factoryUniquenessCounter = 0;
 /**
  * Defer or change rendering until the component did mount.
  *
- * The purpose of this component is to disable or modify serverside rendering
+ * The purpose of this component is to disable or modify server-side rendering
  * of certain components. Disabling rendering on the server, by itself, would
- * not be sufficient, since the initial render of the component must match
- * what is rendered on the server. Therefore, this component also disables
- * rendering the first time around on the client.
+ * not be sufficient, since the initial render of the component must match what
+ * is rendered on the server. Therefore, this component also disables rendering
+ * the first time around on the client.
  *
- * If `WithSSRPlaceholder` components are nested within one another,
- * the root `WithSSRPlaceholder` component will handle the initial
- * render, but nested `WithSSRPlaceholder` components will delegate to
- * the root one, meaning that we don't cascade delayed rendering down
- * the component tree. This will also be the case across portal
- * boundaries.
+ * If `WithSSRPlaceholder` components are nested within one another, the root
+ * `WithSSRPlaceholder` component will handle the initial render, but nested
+ * `WithSSRPlaceholder` components will delegate to the root one, meaning that
+ * we don't cascade delayed rendering down the component tree. This will also be
+ * the case across portal boundaries.
  *
- * Example:
+ * ## Usage
  *
  * ```js
+ * import {WithSSRPlaceholder} from "@khanacademy/wonder-blocks-core";
+ *
  * <WithSSRPlaceholder placeholder={() => <div>Renders on the server!</div>}>
- *   {() => <div>Only renders on the client (after rehydration).</div>}
+ *   {() => (
+ *      <div>This is rendered only by the client, for all renders after the rehydration render</div>
+ *   )}
  * </WithSSRPlaceholder>
  * ```
  */
@@ -401,11 +405,13 @@ class WithSSRPlaceholder extends react__WEBPACK_IMPORTED_MODULE_0__["Component"]
 
 
     {
+      var _JSON$stringify;
+
       // Let's log this case so we can debug it easily.
       // Then fall through to the root case.
 
       /* eslint-disable-next-line no-console */
-      console.log(`We got a render state we don't understand: "${JSON.stringify(renderState)}"`); // We "fallthrough" to the root case. This is more obvious
+      console.log(`We got a render state we don't understand: "${(_JSON$stringify = JSON.stringify(renderState)) != null ? _JSON$stringify : ""}"`); // We "fallthrough" to the root case. This is more obvious
       // and maintainable code than just ignoring the no-fallthrough
       // lint rule.
 
@@ -429,7 +435,7 @@ class WithSSRPlaceholder extends react__WEBPACK_IMPORTED_MODULE_0__["Component"]
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _with_ssr_placeholder_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5);
 /* harmony import */ var _util_unique_id_factory_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(4);
-/* harmony import */ var _util_ssr_id_factory_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(8);
+/* harmony import */ var _util_ssr_id_factory_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(10);
 
 
 
@@ -450,6 +456,18 @@ class WithSSRPlaceholder extends react__WEBPACK_IMPORTED_MODULE_0__["Component"]
  * unique. Therefore, `get("test")` will always equal `get("test")`, and
  * `get("test2")` will always equal `get("test2")`, but `get("test")` will
  * never equal `get("test2")`.
+ *
+ * ## Usage
+ *
+ * ```jsx
+ * import {UniqueIDProvider} from "@khanacademy/wonder-blocks-core";
+ *
+ * <UniqueIDProvider mockOnFirstRender={false} scope="field">
+ *  {(ids) => (
+ *     <>The id returned for "my-identifier": {ids.get("my-identifier")}</>
+ *  )}
+ * </UniqueIDProvider>
+ * ```
  */
 class UniqueIDProvider extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
   _performRender(firstRender) {
@@ -495,6 +513,57 @@ class UniqueIDProvider extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
 /* 7 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return useForceUpdate; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+
+/**
+ * Hook for forcing a component to update on demand.
+ *
+ * This is for use inside other hooks that do some advanced
+ * trickery with storing state outside of React's own state
+ * mechanisms. As such this should never be called directly
+ * outside of a hook, and more often than not, is the wrong
+ * choice for whatever you are trying to do. If in doubt,
+ * don't use it.
+ *
+ * @returns {() => void} A function that forces the component to update.
+ */
+
+const useForceUpdate = () => {
+  const [, setState] = react__WEBPACK_IMPORTED_MODULE_0__["useState"](false);
+  const forceUpdate = react__WEBPACK_IMPORTED_MODULE_0__["useCallback"](() => setState(state => !state), []);
+  return forceUpdate;
+};
+
+/***/ }),
+/* 8 */
+/***/ (function(module, exports) {
+
+function _extends() {
+  module.exports = _extends = Object.assign ? Object.assign.bind() : 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;
+  }, module.exports.__esModule = true, module.exports["default"] = module.exports;
+  return _extends.apply(this, arguments);
+}
+
+module.exports = _extends, module.exports.__esModule = true, module.exports["default"] = module.exports;
+
+/***/ }),
+/* 9 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
 "use strict";
 /* WEBPACK VAR INJECTION */(function(global) {/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return processStyleList; });
 /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
@@ -573,10 +642,10 @@ function processStyleList(style) {
     className: aphrodite__WEBPACK_IMPORTED_MODULE_0__["css"].apply(void 0, stylesheetStyles)
   };
 }
-/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(17)))
+/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(19)))
 
 /***/ }),
-/* 8 */
+/* 10 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -601,7 +670,7 @@ SsrIDFactory.Default = new SsrIDFactory();
 /* harmony default export */ __webpack_exports__["a"] = (SsrIDFactory.Default);
 
 /***/ }),
-/* 9 */
+/* 11 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -609,7 +678,7 @@ SsrIDFactory.Default = new SsrIDFactory();
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return useUniqueIdWithoutMock; });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _util_ssr_id_factory_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(8);
+/* harmony import */ var _util_ssr_id_factory_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(10);
 /* harmony import */ var _util_unique_id_factory_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(4);
 /* harmony import */ var _components_render_state_context_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(1);
 
@@ -671,23 +740,24 @@ const useUniqueIdWithoutMock = scope => {
 };
 
 /***/ }),
-/* 10 */
+/* 12 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Text; });
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2);
-/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _util_util_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(7);
-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); }
+/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(8);
+/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(0);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(2);
+/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _util_util_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(9);
 
 
 
 
 const isHeaderRegex = /^h[1-6]$/;
-const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
+const styles = aphrodite__WEBPACK_IMPORTED_MODULE_2__["StyleSheet"].create({
   text: {
     // Disable subpixel antialiasing on Mac desktop for consistency of
     // rendering with mobile and Sketch (neither of which support it).
@@ -715,7 +785,7 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
  * - An array combining the above
  */
 
-class Text extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
+class Text extends react__WEBPACK_IMPORTED_MODULE_1__["Component"] {
   render() {
     const {
       children,
@@ -725,8 +795,8 @@ class Text extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
       ...otherProps
     } = this.props;
     const isHeader = isHeaderRegex.test(Tag);
-    const styleAttributes = Object(_util_util_js__WEBPACK_IMPORTED_MODULE_2__[/* processStyleList */ "a"])([styles.text, isHeader && styles.header, style]);
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](Tag, _extends({}, otherProps, {
+    const styleAttributes = Object(_util_util_js__WEBPACK_IMPORTED_MODULE_3__[/* processStyleList */ "a"])([styles.text, isHeader && styles.header, style]);
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](Tag, _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({}, otherProps, {
       style: styleAttributes.style,
       className: styleAttributes.className,
       "data-test-id": testId
@@ -739,7 +809,7 @@ Text.defaultProps = {
 };
 
 /***/ }),
-/* 11 */
+/* 13 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -777,9 +847,8 @@ const StyledNav = Object(_util_add_style_js__WEBPACK_IMPORTED_MODULE_2__[/* defa
 const StyledSection = Object(_util_add_style_js__WEBPACK_IMPORTED_MODULE_2__[/* default */ "a"])("section", styles.default);
 /**
  * View is a building block for constructing other components. `View` roughly
- * maps to `div` and `Text` roughly maps to `span`. You can override which tag
- * is used to render the component (for semantic purposes) by specifying the
- * `tag` prop.
+ * maps to `div`. You can override which tag is used to render the component
+ * (for semantic purposes) by specifying the `tag` prop.
  *
  * These components can take styles (via the `style` prop) in a variety of
  * manners:
@@ -787,6 +856,20 @@ const StyledSection = Object(_util_add_style_js__WEBPACK_IMPORTED_MODULE_2__[/*
  * - An inline style object
  * - An `aphrodite` StyleSheet style
  * - An array combining the above
+ *
+ * `View` sets the following defaults:
+ *
+ * - `display: "flex"`
+ * - `flexDirection: "column"`
+ * - they each get their own stacking context.
+ *
+ * ### Usage
+ *
+ * ```jsx
+ * import {View} from "@khanacademy/wonder-blocks-core";
+ *
+ * <View>This is a View!</View>
+ * ```
  */
 
 class View extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
@@ -829,7 +912,7 @@ View.defaultProps = {
 };
 
 /***/ }),
-/* 12 */
+/* 14 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -841,18 +924,33 @@ View.defaultProps = {
 
 
 /**
- * This is a wrapper that returns an identifier. If the `id` prop is set, the component will
- * return the same id to be consumed by its children. Otherwise, a unique id will be provided.
- * This is beneficial for accessibility purposes, among other things.
+ * This is a wrapper that returns an identifier. If the `id` prop is set, the
+ * component will return the same id to be consumed by its children. Otherwise,
+ * a unique id will be provided. This is beneficial for accessibility purposes,
+ * among other things.
+ *
+ * The main difference with `UniqueIDProvider` is that `IDProvider` has a single
+ * responsibility, to return an identifier that can by used by the children that
+ * are rendered internally.
  *
- * The main difference with UniqueIDProvider is that IDProvider has a single responsibility,
- * to return an identifier that can by used by the children that are rendered internally.
+ * This way, the wrapped component will receive this custom ID and will use it
+ * to connect different elements.
  *
- * This way, the wrapped component will receive this custom ID and will use it to connect
- * different elements.
+ * e.g. It uses the same generated id to connect a Dialog with its main title,
+ * or form label with the associated input element, etc.
+ *
+ * ## Usage
+ *
+ * ```jsx
+ * import {IDProvider} from "@khanacademy/wonder-blocks-core";
+ *
+ * <IDProvider scope="field">
+ *  {(uniqueId) => (
+ *     Unique ID: {uniqueId}
+ *  )}
+ * </IDProvider>
+ * ```
  *
- * e.g. It uses the same generated id to connect a Dialog with its main title, or form label
- * with the associated input element, etc.
  */
 class IDProvider extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
   renderChildren(ids) {
@@ -891,7 +989,7 @@ class IDProvider extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
 IDProvider.defaultId = "wb-id";
 
 /***/ }),
-/* 13 */
+/* 15 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -914,35 +1012,42 @@ let serverSide = false;
 });
 
 /***/ }),
-/* 14 */
+/* 16 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return useForceUpdate; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return useOnline; });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _use_force_update_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(7);
+
 
 /**
- * Hook for forcing a component to update on demand.
+ * Track the online status of the browser.
  *
- * This is for use inside other hooks that do some advanced
- * trickery with storing state outside of React's own state
- * mechanisms. As such this should never be called directly
- * outside of a hook, and more often than not, is the wrong
- * choice for whatever you are trying to do. If in doubt,
- * don't use it.
+ * This hook monitors the offline and online events, forcing the consuming
+ * component to re-render when they fire.
  *
- * @returns {() => void} A function that forces the component to update.
+ * @returns {boolean} The current value of `navigator.onLine`.
  */
 
-const useForceUpdate = () => {
-  const [, setState] = react__WEBPACK_IMPORTED_MODULE_0__["useState"](false);
-  const forceUpdate = react__WEBPACK_IMPORTED_MODULE_0__["useCallback"](() => setState(state => !state), []);
-  return forceUpdate;
+const useOnline = () => {
+  const forceUpdate = Object(_use_force_update_js__WEBPACK_IMPORTED_MODULE_1__[/* useForceUpdate */ "a"])();
+  Object(react__WEBPACK_IMPORTED_MODULE_0__["useEffect"])(() => {
+    const handleChange = () => forceUpdate();
+
+    window.addEventListener("online", handleChange);
+    window.addEventListener("offline", handleChange);
+    return () => {
+      window.removeEventListener("online", handleChange);
+      window.removeEventListener("offline", handleChange);
+    };
+  }, [forceUpdate]);
+  return navigator.onLine;
 };
 
 /***/ }),
-/* 15 */
+/* 17 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -991,21 +1096,21 @@ RenderStateRoot.defaultProps = {
 };
 
 /***/ }),
-/* 16 */
+/* 18 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _components_text_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(10);
+/* harmony import */ var _components_text_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(12);
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Text", function() { return _components_text_js__WEBPACK_IMPORTED_MODULE_0__["a"]; });
 
-/* harmony import */ var _components_view_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(11);
+/* harmony import */ var _components_view_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(13);
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "View", function() { return _components_view_js__WEBPACK_IMPORTED_MODULE_1__["a"]; });
 
 /* harmony import */ var _components_with_ssr_placeholder_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(5);
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "WithSSRPlaceholder", function() { return _components_with_ssr_placeholder_js__WEBPACK_IMPORTED_MODULE_2__["a"]; });
 
-/* harmony import */ var _components_id_provider_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(12);
+/* harmony import */ var _components_id_provider_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(14);
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "IDProvider", function() { return _components_id_provider_js__WEBPACK_IMPORTED_MODULE_3__["a"]; });
 
 /* harmony import */ var _components_unique_id_provider_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(6);
@@ -1014,19 +1119,23 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _util_add_style_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(3);
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "addStyle", function() { return _util_add_style_js__WEBPACK_IMPORTED_MODULE_5__["a"]; });
 
-/* harmony import */ var _util_server_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(13);
+/* harmony import */ var _util_server_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(15);
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Server", function() { return _util_server_js__WEBPACK_IMPORTED_MODULE_6__["a"]; });
 
-/* harmony import */ var _hooks_use_unique_id_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(9);
+/* harmony import */ var _hooks_use_unique_id_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(11);
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "useUniqueIdWithMock", function() { return _hooks_use_unique_id_js__WEBPACK_IMPORTED_MODULE_7__["a"]; });
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "useUniqueIdWithoutMock", function() { return _hooks_use_unique_id_js__WEBPACK_IMPORTED_MODULE_7__["b"]; });
 
-/* harmony import */ var _hooks_use_force_update_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(14);
+/* harmony import */ var _hooks_use_force_update_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(7);
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "useForceUpdate", function() { return _hooks_use_force_update_js__WEBPACK_IMPORTED_MODULE_8__["a"]; });
 
-/* harmony import */ var _components_render_state_root_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(15);
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "RenderStateRoot", function() { return _components_render_state_root_js__WEBPACK_IMPORTED_MODULE_9__["a"]; });
+/* harmony import */ var _hooks_use_online_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(16);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "useOnline", function() { return _hooks_use_online_js__WEBPACK_IMPORTED_MODULE_9__["a"]; });
+
+/* harmony import */ var _components_render_state_root_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(17);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "RenderStateRoot", function() { return _components_render_state_root_js__WEBPACK_IMPORTED_MODULE_10__["a"]; });
+
 
 
 
@@ -1040,7 +1149,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 /***/ }),
-/* 17 */
+/* 19 */
 /***/ (function(module, exports) {
 
 var g;
@@ -1066,7 +1175,7 @@ module.exports = g;
 
 
 /***/ }),
-/* 18 */
+/* 20 */
 /***/ (function(module, exports) {
 
 module.exports = require("flow-enums-runtime");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-core",
-  "version": "4.3.2",
+  "version": "4.4.0",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -13,7 +13,7 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {
-    "@babel/runtime": "^7.16.3",
+    "@babel/runtime": "^7.18.6",
     "@khanacademy/wonder-blocks-spacing": "^3.0.5"
   },
   "peerDependencies": {

package/src/__docs__/_overview_.stories.mdx

@@ -0,0 +1,16 @@
+import {Meta} from "@storybook/addon-docs";
+
+<Meta
+    title="Core / Overview"
+    parameters={{
+        chromatic: {
+            disableSnapshot: true,
+        },
+    }}
+/>
+
+# Core
+
+`wonder-blocks-core` provides building blocks and utilities for constructing
+other wonder-blocks components. Many of these may be useful inside your
+applications, as well.

package/src/__docs__/exports.use-force-update.stories.mdx

@@ -0,0 +1,18 @@
+import {Meta} from "@storybook/addon-docs";
+
+<Meta
+    title="Core / Exports / useForceUpdate()"
+    parameters={{
+        chromatic: {
+            disableSnapshot: true,
+        },
+    }}
+/>
+
+# useForceUpdate()
+
+```ts
+function useForceUpdate(): () => void;
+```
+
+The `useForceUpdate` hook returns a function that can be called to force a component to re-render. This is usually not needed as you should be using `useState` or `useReducer` to manage state and rendering in your component (along with `useCallback` and `useMemo` as necessary). However, there maybe times where caching is used to avoid state. In those cases, the `useForceUpdate` hook can be used to force a re-render upon cached data changing or some other triggering event.

package/src/__docs__/exports.use-online.stories.mdx

@@ -0,0 +1,20 @@
+import {Meta} from "@storybook/addon-docs";
+
+<Meta
+    title="Core / Exports / useOnline()"
+    parameters={{
+        chromatic: {
+            disableSnapshot: true,
+        },
+    }}
+/>
+
+# useOnline()
+
+```ts
+function useOnline(): boolean;
+```
+
+The `useOnline` hook returns the value of `navigator.onLine`. It also listens
+to the `online` and `offline` events and triggers a render of the component on
+those events.