@khanacademy/wonder-blocks-core 4.2.0 → 4.3.1

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @khanacademy/wonder-blocks-core
 
+## 4.3.1
+
+## 4.3.0
+
+### Minor Changes
+
+-   246a921d: NEW: `useForceUpdate` hook. This should rarely be used and likely only ever from other hooks.
+
+## 4.2.1
+
 ## 4.2.0
 
 ### Minor Changes

package/dist/es/index.js

@@ -29,24 +29,17 @@ function processStyleList(style) {
       style: {},
       className: ""
     };
-  } // Check to see if we should inline all the styles for snapshot tests.
-
+  }
 
   const shouldInlineStyles = typeof global !== "undefined" && global.SNAPSHOT_INLINE_APHRODITE;
   flatten(style).forEach(child => {
-    // Check for aphrodite internal property
     const _definition = child._definition;
 
     if (_definition != null) {
       if (shouldInlineStyles) {
-        const def = {}; // React 16 complains about invalid keys in inline styles.
-        // It doesn't accept kebab-case in media queries and instead
-        // prefers camelCase.
+        const def = {};
 
         for (const [key, value] of Object.entries(_definition)) {
-          // This regex converts all instances of -{lowercaseLetter}
-          // to the uppercase version of that letter, without the
-          // leading dash.
           def[key.replace(/-[a-z]/g, match => match[1].toUpperCase())] = value;
         }
 
@@ -58,11 +51,7 @@ function processStyleList(style) {
       inlineStyles.push(child);
     }
   });
-  const inlineStylesObject = Object.assign.apply(Object, [{}].concat(inlineStyles)); // TODO(somewhatabstract): When aphrodite no longer puts "!important" on
-  // all the styles, remove this <ADD JIRA ISSUE HERE IF THIS PASSES REVIEW>
-  // If we're not snapshotting styles, let's create a class for the inline
-  // styles so that they can apply to the element even with aphrodite's
-  // use of !important.
+  const inlineStylesObject = Object.assign.apply(Object, [{}].concat(inlineStyles));
 
   if (inlineStyles.length > 0 && !shouldInlineStyles) {
     const inlineStylesStyleSheet = StyleSheet.create({
@@ -81,32 +70,14 @@ const _excluded$2 = ["children", "style", "tag", "testId"];
 const isHeaderRegex = /^h[1-6]$/;
 const styles$1 = StyleSheet.create({
   text: {
-    // Disable subpixel antialiasing on Mac desktop for consistency of
-    // rendering with mobile and Sketch (neither of which support it).
-    // See https://bjango.com/articles/subpixeltext/ for more details.
     WebkitFontSmoothing: "antialiased",
     MozOsxFontSmoothing: "grayscale"
   },
   header: {
-    // User agent stylesheets add vertical margins to header tags by
-    // default. We prefer to be more deliberate in our spacing instead.
     marginTop: 0,
     marginBottom: 0
   }
 });
-/**
- * Text is a building block for constructing other components. `Text` roughly
- * maps to `span`. 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:
- *
- * - An inline style object
- * - An `aphrodite` StyleSheet style
- * - An array combining the above
- */
-
 class Text extends React.Component {
   render() {
     const _this$props = this.props,
@@ -120,7 +91,7 @@ class Text extends React.Component {
 
     const isHeader = isHeaderRegex.test(Tag);
     const styleAttributes = processStyleList([styles$1.text, isHeader && styles$1.header, style]);
-    return /*#__PURE__*/React.createElement(Tag, _extends({}, otherProps, {
+    return React.createElement(Tag, _extends({}, otherProps, {
       style: styleAttributes.style,
       className: styleAttributes.className,
       "data-test-id": testId
@@ -133,16 +104,13 @@ Text.defaultProps = {
 };
 
 const _excluded$1 = ["className", "style"];
-// TODO(kevinb): have an a version which uses exact object types
 function addStyle(Component, defaultStyle) {
   function StyleComponent(props) {
     const {
       className,
       style
     } = props,
-          tmpOtherProps = _objectWithoutPropertiesLoose(props, _excluded$1); // NOTE(jeresig): We need to cast the remaining props to be the right
-    // value to ensure that they're typed properly.
-
+          tmpOtherProps = _objectWithoutPropertiesLoose(props, _excluded$1);
 
     const otherProps = tmpOtherProps;
     const reset = typeof Component === "string" ? overrides[Component] : null;
@@ -150,7 +118,7 @@ function addStyle(Component, defaultStyle) {
       className: aphroditeClassName,
       style: inlineStyles
     } = processStyleList([reset, defaultStyle, style]);
-    return /*#__PURE__*/React.createElement(Component, _extends({}, otherProps, {
+    return React.createElement(Component, _extends({}, otherProps, {
       className: [aphroditeClassName, className].filter(Boolean).join(" "),
       style: inlineStyles
     }));
@@ -158,26 +126,17 @@ function addStyle(Component, defaultStyle) {
 
   return StyleComponent;
 }
-/**
- * These are necessary to override various custom styles that browsers add so that
- * elements have consistent styles across all browsers.  Only add styles here if
- * they appear in https://github.com/necolas/normalize.css/blob/master/normalize.css.
- */
-
 const overrides = StyleSheet.create({
   button: {
     margin: 0,
-    // Safari adds 2px left/right margins
     "::-moz-focus-inner": {
-      border: 0 // Firefox adds an inner focus ring around text
-
+      border: 0
     }
   }
 });
 
 const _excluded = ["testId", "tag"];
 const styles = StyleSheet.create({
-  // https://github.com/facebook/css-layout#default-values
   default: {
     alignItems: "stretch",
     borderWidth: 0,
@@ -189,7 +148,6 @@ const styles = StyleSheet.create({
     padding: 0,
     position: "relative",
     zIndex: 0,
-    // fix flexbox bugs
     minHeight: 0,
     minWidth: 0
   }
@@ -199,20 +157,6 @@ const StyledArticle = addStyle("article", styles.default);
 const StyledAside = addStyle("aside", styles.default);
 const StyledNav = addStyle("nav", styles.default);
 const StyledSection = addStyle("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.
- *
- * These components can take styles (via the `style` prop) in a variety of
- * manners:
- *
- * - An inline style object
- * - An `aphrodite` StyleSheet style
- * - An array combining the above
- */
-
 class View extends React.Component {
   render() {
     const _this$props = this.props,
@@ -228,19 +172,19 @@ class View extends React.Component {
 
     switch (tag) {
       case "article":
-        return /*#__PURE__*/React.createElement(StyledArticle, props);
+        return React.createElement(StyledArticle, props);
 
       case "aside":
-        return /*#__PURE__*/React.createElement(StyledAside, props);
+        return React.createElement(StyledAside, props);
 
       case "nav":
-        return /*#__PURE__*/React.createElement(StyledNav, props);
+        return React.createElement(StyledNav, props);
 
       case "section":
-        return /*#__PURE__*/React.createElement(StyledSection, props);
+        return React.createElement(StyledSection, props);
 
       case "div":
-        return /*#__PURE__*/React.createElement(StyledDiv, props);
+        return React.createElement(StyledDiv, props);
 
       default:
         throw Error(`${tag} is not an allowed value for the 'tag' prop`);
@@ -257,53 +201,8 @@ const RenderState = require("flow-enums-runtime")({
   Initial: "initial",
   Standard: "standard"
 });
-/**
- * This is the context that tracks who is doing what in our SSR component tree.
- *
- * root:
- *   no one has instigated an initial SSR render so the component that sees
- *   this "root" state is responsible for controlling initial versus standard
- *   rendering semantics
- *
- * initial:
- *   this means the SSR render has started, and all SSR components should act
- *   as though they are on the server
- *
- * standard:
- *   means that we're all now doing non-SSR rendering
- */
-
-const RenderStateContext = /*#__PURE__*/React.createContext(RenderState.Root);
-
-/**
- * We use render functions so that we don't do any work unless we need to.
- * This avoids rendering but not mounting potentially complex component trees.
- */
-
-/**
- * Defer or change rendering until the component did mount.
- *
- * The purpose of this component is to disable or modify serverside 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.
- *
- * 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:
- *
- * ```js
- * <WithSSRPlaceholder placeholder={() => <div>Renders on the server!</div>}>
- *   {() => <div>Only renders on the client (after rehydration).</div>}
- * </WithSSRPlaceholder>
- * ```
- */
+const RenderStateContext = React.createContext(RenderState.Root);
+
 class WithSSRPlaceholder extends React.Component {
   constructor(...args) {
     super(...args);
@@ -315,9 +214,6 @@ class WithSSRPlaceholder extends React.Component {
 
   componentDidMount() {
     if (this._isTheRootComponent) {
-      // We only want to force a new render if we were responsible for
-      // the first render, so we guard that state change here.
-      // eslint-disable-next-line react/no-did-mount-set-state
       this.setState({
         mounted: true
       });
@@ -331,30 +227,20 @@ class WithSSRPlaceholder extends React.Component {
     const {
       children,
       placeholder
-    } = this.props; // We are the first component in the tree.
-    // We are in control of instigating a second render for our
-    // component tree.
-
+    } = this.props;
     this._isTheRootComponent = true;
 
     if (mounted) {
-      // This is our second non-SSR render, so let's tell everyone to
-      // do their thing.
-      return /*#__PURE__*/React.createElement(RenderStateContext.Provider, {
+      return React.createElement(RenderStateContext.Provider, {
         value: RenderState.Standard
       }, children());
-    } // OK, this is the very first render.
-    // If we have a placeholder, we render it, and ensure that any
-    // nested SSR components know we're still on that first render
-    // but they're not in charge of instigating the second render.
-
+    }
 
     if (placeholder) {
-      return /*#__PURE__*/React.createElement(RenderStateContext.Provider, {
+      return React.createElement(RenderStateContext.Provider, {
         value: RenderState.Initial
       }, placeholder());
-    } // Otherwise, we return nothing.
-
+    }
 
     return null;
   }
@@ -370,71 +256,29 @@ class WithSSRPlaceholder extends React.Component {
         return this._renderAsRootComponent();
 
       case RenderState.Initial:
-        // We're not the root component, so we just have to either
-        // render our placeholder or nothing.
-        // The second render is going to be triggered for us.
         if (placeholder) {
           return placeholder();
-        } // Otherwise, we render nothing.
-
+        }
 
         return null;
 
       case RenderState.Standard:
-        // We have covered the SSR render, we're now rendering with
-        // standard rendering semantics.
         return children();
-    } // There are edge cases where for some reason, we get an unknown
-    // context value here. So far it seems to be when we're nested in a
-    // v1 WithSSRPlaceholder equivalent component, or in some older
-    // React v16 situations where we're nested in the provider of a
-    // different context.
-    //
-    // We ignore this from coverage. It's a maintenance case to help
-    // us catch code changes that affect the control flow unexpectedly,
-    // but it's not something we need to write a test case for.
-    //
-    // Flow will assert exhaustiveness of the switch because Flow enums
-    // rock.
-    //
-
-    /* istanbul ignore next */
-
+    }
 
     {
-      // 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
-      // and maintainable code than just ignoring the no-fallthrough
-      // lint rule.
-
+      console.log(`We got a render state we don't understand: "${JSON.stringify(renderState)}"`);
       return this._maybeRender(RenderState.Root);
     }
   }
 
   render() {
-    return /*#__PURE__*/React.createElement(RenderStateContext.Consumer, null, value => this._maybeRender(value));
+    return React.createElement(RenderStateContext.Consumer, null, value => this._maybeRender(value));
   }
 
 }
 
-/**
- * This is NOT for direct use. Instead, see the UniqueIDProvider component.
- *
- * Implements IIdentifierFactory to provide unique identifiers.
- */
 class UniqueIDFactory {
-  /**
-   * Creates a UniqueIDFactory instance.
-   *
-   * @param {string} scope An optional case-insensitive scope for the
-   * factory. This will be used as part of the identifier. Useful for
-   * providing context to the identifiers, which can be useful in
-   * differentiating elements when debugging the DOM. This must contain only
-   * hyphen and alphanumeric characters.
-   */
   constructor(scope) {
     this.get = key => {
       const normalizedKey = key.toLowerCase();
@@ -455,13 +299,6 @@ class UniqueIDFactory {
 
     this._uniqueFactoryName = `uid-${normalizedScope}-${UniqueIDFactory._factoryUniquenessCounter++}`;
   }
-  /**
-   * This method verifies that a string contains valid characters for an
-   * identifier. It does not assert that a string IS a valid identifier (for
-   * example, that it doesn't start with numbers). We don't need to do that
-   * here because all identifiers are prefixed to avoid needing that check.
-   */
-
 
   _hasValidIdChars(value) {
     if (typeof value !== "string") {
@@ -471,30 +308,10 @@ class UniqueIDFactory {
     const invalidCharsReplaced = value.replace(/[^\d\w-]/g, "-");
     return value === invalidCharsReplaced;
   }
-  /**
-   * Provides a unique identifier with the given key.
-   *
-   * @param {string} key The case-insensitive key of the identifier.
-   *
-   * @returns {string} A unique identifier that will remain the same for this
-   * key in this factory. This must contain only hyphen and alphanumeric
-   * characters.
-   */
-
 
 }
 UniqueIDFactory._factoryUniquenessCounter = 0;
 
-/**
- * This is NOT for direct use. Instead, see the UniqueIDProvider component.
- *
- * Implements a version of IIdentifierFactory that can be used for providing
- * identifiers on initial render of components that are eligible for server-side
- * rendering.
- *
- * The identifiers are not guaranteed to be unique, but they will match between
- * server and the first client render.
- */
 class SsrIDFactory {
   get(id) {
     return id;
@@ -505,76 +322,37 @@ class SsrIDFactory {
 SsrIDFactory.Default = new SsrIDFactory();
 var SsrIDFactory$1 = SsrIDFactory.Default;
 
-/**
- * The `UniqueIDProvider` component is how Wonder Blocks components obtain
- * unique identifiers. This component ensures that server-side rendering and
- * initial client rendering match while allowing the provision of unique
- * identifiers for the client.
- *
- * In all but the first render, the children are rendered with the same
- * `IIdentifierFactory` instance, ensuring that the same calls will return the
- * same identifiers.
- *
- * The `get` method of the identifier factory ensures that the same identifier
- * is returned for like requests, but also that all identifiers provided are
- * 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")`.
- */
 class UniqueIDProvider extends React.Component {
   _performRender(firstRender) {
     const {
       children,
       mockOnFirstRender,
       scope
-    } = this.props; // If this is our first render, we're going to stop right here.
-    // Note: `firstRender` will be `false` on the first render if this
-    // component is a descendant of a `WithSSRPlaceholder`.
+    } = this.props;
 
     if (firstRender) {
       if (mockOnFirstRender) {
-        // We're allowing an initial render, so let's pass our mock
-        // identifier factory to support SSR.
         return children(SsrIDFactory$1);
       }
 
       return null;
-    } // Create an identifier factory if we don't already have one
-
+    }
 
     if (!this._idFactory) {
       this._idFactory = new UniqueIDFactory(scope);
-    } // It's a regular render, so let's use our identifier factory.
-
+    }
 
     return children(this._idFactory);
   }
 
   render() {
-    // Here we use the WithSSRPlaceholder component to control
-    // when we render and whether we provide a mock or real
-    // identifier factory.
-    return /*#__PURE__*/React.createElement(WithSSRPlaceholder, {
+    return React.createElement(WithSSRPlaceholder, {
       placeholder: () => this._performRender(true)
     }, () => this._performRender(false));
   }
 
 }
 
-/**
- * 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.
- *
- * 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.
- */
 class IDProvider extends React.Component {
   renderChildren(ids) {
     const {
@@ -597,11 +375,9 @@ class IDProvider extends React.Component {
     } = this.props;
 
     if (id) {
-      // Let's bypass the extra weight of an id provider since we don't
-      // need it.
       return this.renderChildren();
     } else {
-      return /*#__PURE__*/React.createElement(UniqueIDProvider, {
+      return React.createElement(UniqueIDProvider, {
         scope: scope,
         mockOnFirstRender: true
       }, ids => this.renderChildren(ids));
@@ -613,30 +389,12 @@ IDProvider.defaultId = "wb-id";
 
 let serverSide = false;
 var server = {
-  /**
-   * Check if we are running in server-side mode.
-   *
-   * @returns {boolean} `true` if we are in server-side mode; otherwise,
-   * `false`
-   */
   isServerSide: () => serverSide,
-
-  /**
-   * Set server-side mode to true.
-   */
   setServerSide: () => {
     serverSide = true;
   }
 };
 
-/**
- * Returns a unique identifier factory.  If the parent component hasn't
- * been mounted yet, the global SsrIDFactory will be returned until the
- * component becomes mounted.
- *
- * @param {string} [scope] optional string to prefix generated ids with.
- * @returns {IIdentifierFactory}
- */
 const useUniqueIdWithMock = scope => {
   const renderState = useContext$1(RenderStateContext);
   const idFactory = useRef(null);
@@ -655,14 +413,6 @@ const useUniqueIdWithMock = scope => {
 
   return idFactory.current;
 };
-/**
- * Returns a unique identifier factory.  If the parent component hasn't
- * been mounted yet, null will be returned.
- *
- * @param {string} [scope] optional string to prefix generated ids with.
- * @returns {?IIdentifierFactory}
- */
-
 const useUniqueIdWithoutMock = scope => {
   const renderState = useContext$1(RenderStateContext);
   const idFactory = useRef(null);
@@ -682,6 +432,12 @@ const useUniqueIdWithoutMock = scope => {
   return idFactory.current;
 };
 
+const useForceUpdate = () => {
+  const [, setState] = React.useState(false);
+  const forceUpdate = React.useCallback(() => setState(state => !state), []);
+  return forceUpdate;
+};
+
 const {
   useContext,
   useEffect,
@@ -695,20 +451,18 @@ const RenderStateRoot = ({
   const contextValue = useContext(RenderStateContext);
   useEffect(() => {
     setFirstRender(false);
-  }, []); // This effect will only run once.
+  }, []);
 
   if (contextValue !== RenderState.Root) {
     if (throwIfNested) {
       throw new Error("There's already a <RenderStateRoot> above this instance in " + "the render tree.  This instance should be removed.");
-    } // Avoid rendering multiple providers if this RenderStateRoot
-    // is nested inside another one.
-
+    }
 
     return children;
   }
 
   const value = firstRender ? RenderState.Initial : RenderState.Standard;
-  return /*#__PURE__*/React.createElement(RenderStateContext.Provider, {
+  return React.createElement(RenderStateContext.Provider, {
     value: value
   }, children);
 };
@@ -716,4 +470,4 @@ RenderStateRoot.defaultProps = {
   throwIfNested: true
 };
 
-export { IDProvider, RenderStateRoot, server as Server, Text, UniqueIDProvider, View, WithSSRPlaceholder, addStyle, useUniqueIdWithMock, useUniqueIdWithoutMock };
+export { IDProvider, RenderStateRoot, server as Server, Text, UniqueIDProvider, View, WithSSRPlaceholder, addStyle, useForceUpdate, useUniqueIdWithMock, useUniqueIdWithoutMock };

package/dist/index.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 15);
+/******/ 	return __webpack_require__(__webpack_require__.s = 16);
 /******/ })
 /************************************************************************/
 /******/ ([
@@ -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__(17)({
+const RenderState = __webpack_require__(18)({
   Root: "root",
   Initial: "initial",
   Standard: "standard"
@@ -573,7 +573,7 @@ function processStyleList(style) {
     className: aphrodite__WEBPACK_IMPORTED_MODULE_0__["css"].apply(void 0, stylesheetStyles)
   };
 }
-/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(16)))
+/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(17)))
 
 /***/ }),
 /* 8 */
@@ -917,6 +917,34 @@ let serverSide = false;
 /* 14 */
 /***/ (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;
+};
+
+/***/ }),
+/* 15 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return RenderStateRoot; });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
@@ -963,7 +991,7 @@ RenderStateRoot.defaultProps = {
 };
 
 /***/ }),
-/* 15 */
+/* 16 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -994,8 +1022,12 @@ __webpack_require__.r(__webpack_exports__);
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "useUniqueIdWithoutMock", function() { return _hooks_use_unique_id_js__WEBPACK_IMPORTED_MODULE_7__["b"]; });
 
-/* harmony import */ var _components_render_state_root_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(14);
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "RenderStateRoot", function() { return _components_render_state_root_js__WEBPACK_IMPORTED_MODULE_8__["a"]; });
+/* harmony import */ var _hooks_use_force_update_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(14);
+/* 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"]; });
+
 
 
 
@@ -1008,7 +1040,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 /***/ }),
-/* 16 */
+/* 17 */
 /***/ (function(module, exports) {
 
 var g;
@@ -1034,7 +1066,7 @@ module.exports = g;
 
 
 /***/ }),
-/* 17 */
+/* 18 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-core",
-  "version": "4.2.0",
+  "version": "4.3.1",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -24,7 +24,7 @@
     "react-router-dom": "5.3.0"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.2.0"
+    "wb-dev-build-settings": "^0.4.0"
   },
   "author": "",
   "license": "MIT"

package/src/__tests__/__snapshots__/generated-snapshot.test.js.snap

@@ -532,8 +532,8 @@ exports[`wonder-blocks-core example 10 1`] = `
     }
   >
     <button
+      aria-disabled={false}
       className=""
-      disabled={false}
       onBlur={[Function]}
       onClick={[Function]}
       onDragStart={[Function]}

package/src/hooks/__tests__/use-force-update.test.js

@@ -0,0 +1,54 @@
+// @flow
+import * as React from "react";
+import {render, act} from "@testing-library/react";
+import {renderHook} from "@testing-library/react-hooks";
+
+import {useForceUpdate} from "../use-force-update.js";
+
+describe("#useForceUpdate", () => {
+    it("should return a function", () => {
+        // Arrange
+
+        // Act
+        const {
+            result: {current: result},
+        } = renderHook(() => useForceUpdate());
+
+        // Assert
+        expect(result).toBeInstanceOf(Function);
+    });
+
+    describe("returned function", () => {
+        beforeEach(() => {
+            jest.useFakeTimers();
+        });
+
+        it("should cause component to render", () => {
+            // Arrange
+            const Component = (props): React.Node => {
+                const countRef = React.useRef(0);
+                const forceUpdate = useForceUpdate();
+                React.useEffect(() => {
+                    countRef.current++;
+
+                    setTimeout(forceUpdate, 50);
+                });
+                return countRef.current;
+            };
+
+            // Act
+            const wrapper = render(<Component />);
+            act(() => {
+                // Advance enough for the timeout to run 4 times.
+                // Which means the component should have rendered 4 times,
+                // with one more pending for the timeout that was setup in
+                // the last render.
+                jest.advanceTimersByTime(204);
+            });
+            const result = wrapper.container.textContent;
+
+            // Assert
+            expect(result).toBe("4");
+        });
+    });
+});

package/src/hooks/use-force-update.js

@@ -0,0 +1,23 @@
+// @flow
+import * as React from "react";
+
+/**
+ * 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.
+ */
+export const useForceUpdate = (): (() => void) => {
+    const [, setState] = React.useState(false);
+    const forceUpdate = React.useCallback(
+        () => setState((state) => !state),
+        [],
+    );
+    return forceUpdate;
+};

package/src/index.js

@@ -12,6 +12,7 @@ export {
     useUniqueIdWithMock,
     useUniqueIdWithoutMock,
 } from "./hooks/use-unique-id.js";
+export {useForceUpdate} from "./hooks/use-force-update.js";
 export {RenderStateRoot} from "./components/render-state-root.js";
 
 export type {AriaProps, IIdentifierFactory, StyleType};

package/src/util/add-style.md

@@ -45,7 +45,7 @@ StyleSheet as well inline style objects (see example 4).
 
 #### CSSProperties
 
-[See source file](https://github.com/Khan/wonder-blocks/blob/master/flow-typed/aphrodite.flow.js#L13)
+[See source file](https://github.com/Khan/wonder-blocks/blob/main/flow-typed/aphrodite.flow.js#L13)
 
 
 ### Examples