npm - @khanacademy/wonder-blocks-modal - Versions diffs - 2.3.5 → 2.3.7 - Mend

@khanacademy/wonder-blocks-modal 2.3.5 → 2.3.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (19) hide show

package/CHANGELOG.md +19 -0
package/dist/es/index.js +18 -69
package/dist/index.js +180 -164
package/package.json +8 -8
package/src/__tests__/__snapshots__/generated-snapshot.test.js.snap +208 -208
package/src/components/__docs__/modal-dialog.stories.js +308 -0
package/src/components/__docs__/modal-footer.stories.js +337 -0
package/src/components/__docs__/modal-header.argtypes.js +76 -0
package/src/components/__docs__/modal-header.stories.js +294 -0
package/src/components/__docs__/modal-launcher.argtypes.js +78 -0
package/src/components/__docs__/modal-launcher.stories.js +512 -0
package/src/components/__docs__/modal-panel.stories.js +414 -0
package/src/components/__docs__/one-pane-dialog.argtypes.js +102 -0
package/src/components/__docs__/one-pane-dialog.stories.js +582 -0
package/src/components/__tests__/focus-trap.test.js +101 -0
package/src/components/focus-trap.js +47 -98
package/src/components/modal-footer.js +8 -0
package/src/components/one-pane-dialog.js +26 -1
package/src/components/one-pane-dialog.stories.js +0 -248

package/dist/index.js CHANGED Viewed

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 26);
+/******/ 	return __webpack_require__(__webpack_require__.s = 27);
 /******/ })
 /************************************************************************/
 /******/ ([
@@ -305,6 +305,14 @@ const styleSheets = {
  * If you are creating a custom Dialog, make sure to follow these guidelines:
  * - Make sure to include it as part of [ModalPanel](/#modalpanel) by using the `footer` prop.
  * - The footer is completely flexible. Meaning the developer needs to add its own custom layout to match design specs.
+ *
+ * **Usage**
+ *
+ * ```js
+ * <ModalFooter>
+ *     <Button onClick={() => {}}>Submit</Button>
+ * </ModalFooter>
+ * ```
  */
 class ModalFooter extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
   static isClassOf(instance) {
@@ -479,7 +487,7 @@ const styleSheets = {
 /* harmony import */ var _modal_content_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(14);
 /* harmony import */ var _modal_header_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(7);
 /* harmony import */ var _modal_footer_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(8);
-/* harmony import */ var _close_button_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(23);
+/* harmony import */ var _close_button_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(24);
@@ -714,7 +722,7 @@ const styleSheets = {
 /* harmony import */ var _khanacademy_wonder_blocks_timing__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_timing__WEBPACK_IMPORTED_MODULE_3__);
 /* harmony import */ var _focus_trap_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(19);
 /* harmony import */ var _modal_backdrop_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(20);
-/* harmony import */ var _scroll_disabler_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(22);
+/* harmony import */ var _scroll_disabler_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(23);
 /* harmony import */ var _modal_context_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(12);
@@ -965,7 +973,32 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_2__["StyleSheet"].create({
  * This is the standard layout for most straightforward modal experiences.
  *
  * The ModalHeader is required, but the ModalFooter is optional.
- * The content of the dialog itself is fully customizable, but the left/right/top/bottom padding is fixed.
+ * The content of the dialog itself is fully customizable, but the
+ * left/right/top/bottom padding is fixed.
+ *
+ * ### Usage
+ *
+ * ```jsx
+ * import {OnePaneDialog} from "@khanacademy/wonder-blocks-modal";
+ * import {Body} from "@khanacademy/wonder-blocks-typography";
+ *
+ * <OnePaneDialog
+ *     title="Some title"
+ *     content={
+ *         <Body>
+ *             {`Lorem ipsum dolor sit amet, consectetur adipiscing
+ *             elit, sed do eiusmod tempor incididunt ut labore et
+ *             dolore magna aliqua. Ut enim ad minim veniam,
+ *             quis nostrud exercitation ullamco laboris nisi ut
+ *             aliquip ex ea commodo consequat. Duis aute irure
+ *             dolor in reprehenderit in voluptate velit esse
+ *             cillum dolore eu fugiat nulla pariatur. Excepteur
+ *             sint occaecat cupidatat non proident, sunt in culpa
+ *             qui officia deserunt mollit anim id est.`}
+ *         </Body>
+ *     }
+ * />
+ * ```
  */
 class OnePaneDialog extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
   renderHeader(uniqueId) {
@@ -1347,7 +1380,7 @@ function (modules) {
   /******/
-  return __webpack_require__(__webpack_require__.s = 13);
+  return __webpack_require__(__webpack_require__.s = 14);
   /******/
 }
 /************************************************************************/
@@ -1551,33 +1584,23 @@ function (module, __webpack_exports__, __webpack_require__) {
   /* harmony import */
-  var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
+  var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(8);
   /* harmony import */
-  var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+  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 _action_scheduler_provider_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(8);
+  var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(1);
+  /* harmony import */
-  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];
-          }
-        }
-      }
+  var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
+  /* harmony import */
-      return target;
-    };
-    return _extends.apply(this, arguments);
-  }
+  var _action_scheduler_provider_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(9);
   /**
    * A higher order component that attaches the given component to an
    * `IScheduleActions` instance. Any actions scheduled will automatically be
@@ -1590,9 +1613,9 @@ function (module, __webpack_exports__, __webpack_require__) {
   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__[
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["forwardRef"]((props, ref) => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_action_scheduler_provider_js__WEBPACK_IMPORTED_MODULE_2__[
     /* default */
-    "a"], null, schedule => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](WrappedComponent, _extends({}, props, {
+    "a"], null, schedule => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](WrappedComponent, _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({}, props, {
       ref: ref,
       schedule: schedule
     }))));
@@ -1804,6 +1827,30 @@ function (module, __webpack_exports__, __webpack_require__) {
 },
 /* 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";
@@ -1823,7 +1870,7 @@ function (module, __webpack_exports__, __webpack_require__) {
   /* harmony import */
-  var _util_action_scheduler_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(9);
+  var _util_action_scheduler_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(10);
   /**
    * A provider component that passes our action scheduling API to its children
    * and ensures that all scheduled actions are cleared on unmount.
@@ -1859,7 +1906,7 @@ function (module, __webpack_exports__, __webpack_require__) {
   /***/
 },
-/* 9 */
+/* 10 */
 /***/
 function (module, __webpack_exports__, __webpack_require__) {
@@ -1872,15 +1919,15 @@ function (module, __webpack_exports__, __webpack_require__) {
   /* harmony import */
-  var _timeout_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(10);
+  var _timeout_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(11);
   /* harmony import */
-  var _interval_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(11);
+  var _interval_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(12);
   /* harmony import */
-  var _animation_frame_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(12);
+  var _animation_frame_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(13);
   /**
    * Implements the `IScheduleActions` API to provide timeout, interval, and
    * animation frame support. This is not intended for direct use, but instead
@@ -1966,7 +2013,7 @@ function (module, __webpack_exports__, __webpack_require__) {
   };
   /***/
 },
-/* 10 */
+/* 11 */
 /***/
 function (module, __webpack_exports__, __webpack_require__) {
@@ -2098,7 +2145,7 @@ function (module, __webpack_exports__, __webpack_require__) {
   /***/
 },
-/* 11 */
+/* 12 */
 /***/
 function (module, __webpack_exports__, __webpack_require__) {
@@ -2226,7 +2273,7 @@ function (module, __webpack_exports__, __webpack_require__) {
   /***/
 },
-/* 12 */
+/* 13 */
 /***/
 function (module, __webpack_exports__, __webpack_require__) {
@@ -2354,7 +2401,7 @@ function (module, __webpack_exports__, __webpack_require__) {
   /***/
 },
-/* 13 */
+/* 14 */
 /***/
 function (module, __webpack_exports__, __webpack_require__) {
@@ -2448,19 +2495,32 @@ function (module, __webpack_exports__, __webpack_require__) {
-class FocusTrap extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
-  /** The most recent node _inside this component_ to receive focus. */
-  /**
-   * Whether we're currently applying programmatic focus, and should therefore
-   * ignore focus change events.
-   */
+/**
+ * List of elements that can be focused
+ * @see https://www.w3.org/TR/html5/editing.html#can-be-focused
+ */
+const FOCUSABLE_ELEMENTS = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+/**
+ * This component ensures that focus stays within itself. If the user uses Tab
+ * at the end of the modal, or Shift-Tab at the start of the modal, then this
+ * component wraps focus to the start/end respectively.
+ *
+ * We use this in `ModalBackdrop` to ensure that focus stays within the launched
+ * modal.
+ *
+ * Adapted from the WAI-ARIA dialog behavior example.
+ * https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/dialog-modal/dialog.html
+ *
+ * NOTE(mdr): This component frequently references the "modal" and the "modal
+ *     root", to aid readability in this package. But this component isn't
+ *     actually coupled to the modal, and these could be renamed "children"
+ *     instead if we were to generalize!
+ */
-  /**
-   * Tabbing is restricted to descendents of this element.
-   */
-  constructor(props) {
-    super(props);
+class FocusTrap extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
+  constructor(...args) {
+    super(...args);
     this.getModalRoot = node => {
       if (!node) {
@@ -2477,128 +2537,58 @@ class FocusTrap extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
       this.modalRoot = modalRoot;
     };
-    this.handleGlobalFocus = e => {
-      // If we're busy applying our own programmatic focus, we ignore focus
-      // changes, to avoid an infinite loop.
-      if (this.ignoreFocusChanges) {
-        return;
-      }
-      const target = e.target;
-      if (!(target instanceof Node)) {
-        // Sometimes focus events trigger on the document itself. Ignore!
-        return;
-      }
-      const modalRoot = this.modalRoot;
-      if (!modalRoot) {
-        return;
-      }
-      if (modalRoot.contains(target)) {
-        // If the newly focused node is inside the modal, we just keep track
-        // of that.
-        this.lastNodeFocusedInModal = target;
-      } else {
-        // If the newly focused node is outside the modal, we try refocusing
-        // the first focusable node of the modal. (This could be the user
-        // pressing Tab on the last node of the modal, or focus escaping in
-        // some other way.)
-        this.focusFirstElementIn(modalRoot); // But, if it turns out that the first focusable node of the modal
-        // was what we were previously focusing, then this is probably the
-        // user pressing Shift-Tab on the first node, wanting to go to the
-        // end. So, we instead try focusing the last focusable node of the
-        // modal.
-        if (document.activeElement === this.lastNodeFocusedInModal) {
-          this.focusLastElementIn(modalRoot);
-        } // Focus should now be inside the modal, so record the newly-focused
-        // node as the last node focused in the modal.
-        this.lastNodeFocusedInModal = document.activeElement;
-      }
+    this.handleFocusMoveToLast = () => {
+      this.focusElementIn(false);
     };
-    this.lastNodeFocusedInModal = null;
-    this.ignoreFocusChanges = false;
-  }
-  componentDidMount() {
-    window.addEventListener("focus", this.handleGlobalFocus, true);
-  }
-  componentWillUnmount() {
-    window.removeEventListener("focus", this.handleGlobalFocus, true);
+    this.handleFocusMoveToFirst = () => {
+      this.focusElementIn(true);
+    };
   }
-  /** Try to focus the given node. Return true iff successful. */
+  /**
+   * Try to focus the given node. Return true if successful.
+   */
   tryToFocus(node) {
     if (node instanceof HTMLElement) {
-      this.ignoreFocusChanges = true;
       try {
         node.focus();
       } catch (e) {// ignore error
       }
-      this.ignoreFocusChanges = false;
       return document.activeElement === node;
     }
   }
   /**
-   * Focus the first focusable descendant of the given node.
+   * Focus the next available focusable element within the modal root.
    *
-   * Return true if we succeed. Or, if the given node has no focusable
-   * descendants, return false.
+   * @param {boolean} isLast Used to determine the next available item. true =
+   * First element within the modal, false = Last element within the modal.
    */
-  focusFirstElementIn(currentParent) {
-    const children = currentParent.childNodes;
-    for (let i = 0; i < children.length; i++) {
-      const child = children[i];
+  focusElementIn(isLast) {
+    const modalRootAsHtmlEl = this.modalRoot; // Get the list of available focusable elements within the modal.
-      if (this.tryToFocus(child) || this.focusFirstElementIn(child)) {
-        return true;
-      }
-    }
-    return false;
+    const focusableNodes = Array.from(modalRootAsHtmlEl.querySelectorAll(FOCUSABLE_ELEMENTS));
+    const nodeIndex = !isLast ? focusableNodes.length - 1 : 0;
+    const focusableNode = focusableNodes[nodeIndex];
+    this.tryToFocus(focusableNode);
   }
   /**
-   * Focus the last focusable descendant of the given node.
-   *
-   * Return true if we succeed. Or, if the given node has no focusable
-   * descendants, return false.
+   * Triggered when the focus is set to the first sentinel. This way, the
+   * focus will be redirected to the last element inside the modal dialog.
    */
-  focusLastElementIn(currentParent) {
-    const children = currentParent.childNodes;
-    for (let i = children.length - 1; i >= 0; i--) {
-      const child = children[i];
-      if (this.tryToFocus(child) || this.focusLastElementIn(child)) {
-        return true;
-      }
-    }
-    return false;
-  }
-  /** This method is called when any node on the page is focused. */
   render() {
     const {
       style
     } = this.props;
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
       tabIndex: "0",
+      className: "modal-focus-trap-first",
+      onFocus: this.handleFocusMoveToLast,
       style: {
         position: "fixed"
       }
@@ -2607,6 +2597,8 @@ class FocusTrap extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
       ref: this.getModalRoot
     }, this.props.children), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
       tabIndex: "0",
+      className: "modal-focus-trap-last",
+      onFocus: this.handleFocusMoveToFirst,
       style: {
         position: "fixed"
       }
@@ -2621,19 +2613,20 @@ class FocusTrap extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return ModalBackdrop; });
-/* 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 react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(6);
-/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(3);
-/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(4);
-/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(2);
-/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__);
-/* harmony import */ var _util_constants_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(11);
-/* harmony import */ var _util_find_focusable_nodes_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(21);
-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__(21);
+/* 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 react_dom__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(6);
+/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(3);
+/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(4);
+/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4__);
+/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(2);
+/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_5__);
+/* harmony import */ var _util_constants_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(11);
+/* harmony import */ var _util_find_focusable_nodes_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(22);
@@ -2653,7 +2646,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
  * and adding an `onClose` prop that will call `onCloseModal`. If an
  * `onClose` prop is already provided, the two are merged.
  */
-class ModalBackdrop extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
+class ModalBackdrop extends react__WEBPACK_IMPORTED_MODULE_1__["Component"] {
   constructor(...args) {
     super(...args);
     this._mousePressedOutside = false;
@@ -2675,7 +2668,7 @@ class ModalBackdrop extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
   }
   componentDidMount() {
-    const node = react_dom__WEBPACK_IMPORTED_MODULE_1__["findDOMNode"](this);
+    const node = react_dom__WEBPACK_IMPORTED_MODULE_2__["findDOMNode"](this);
     if (!node) {
       return;
@@ -2704,7 +2697,7 @@ class ModalBackdrop extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
       return null;
     }
-    return react_dom__WEBPACK_IMPORTED_MODULE_1__["findDOMNode"](node.querySelector(`#${initialFocusId}`));
+    return react_dom__WEBPACK_IMPORTED_MODULE_2__["findDOMNode"](node.querySelector(`#${initialFocusId}`));
   }
   /**
    * Returns the first focusable element found inside the Dialog
@@ -2713,7 +2706,7 @@ class ModalBackdrop extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
   _getFirstFocusableElement(node) {
     // get a collection of elements that can be focused
-    const focusableElements = Object(_util_find_focusable_nodes_js__WEBPACK_IMPORTED_MODULE_6__[/* findFocusableNodes */ "a"])(node);
+    const focusableElements = Object(_util_find_focusable_nodes_js__WEBPACK_IMPORTED_MODULE_7__[/* findFocusableNodes */ "a"])(node);
     if (!focusableElements) {
       return null;
@@ -2730,7 +2723,7 @@ class ModalBackdrop extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
   _getDialogElement(node) {
     // If no focusable elements are found,
     // the dialog content element itself will receive focus.
-    const dialogElement = react_dom__WEBPACK_IMPORTED_MODULE_1__["findDOMNode"](node.querySelector('[role="dialog"]')); // add tabIndex to make the Dialog focusable
+    const dialogElement = react_dom__WEBPACK_IMPORTED_MODULE_2__["findDOMNode"](node.querySelector('[role="dialog"]')); // add tabIndex to make the Dialog focusable
     dialogElement.tabIndex = -1;
     return dialogElement;
@@ -2748,9 +2741,9 @@ class ModalBackdrop extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
       testId
     } = this.props;
     const backdropProps = {
-      [_util_constants_js__WEBPACK_IMPORTED_MODULE_5__[/* ModalLauncherPortalAttributeName */ "a"]]: true
+      [_util_constants_js__WEBPACK_IMPORTED_MODULE_6__[/* ModalLauncherPortalAttributeName */ "a"]]: true
     };
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__["View"], _extends({
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_5__["View"], _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({
       style: styles.modalPositioner,
       onMouseDown: this.handleMouseDown,
       onMouseUp: this.handleMouseUp,
@@ -2759,7 +2752,7 @@ class ModalBackdrop extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
   }
 }
-const styles = aphrodite__WEBPACK_IMPORTED_MODULE_2__["StyleSheet"].create({
+const styles = aphrodite__WEBPACK_IMPORTED_MODULE_3__["StyleSheet"].create({
   modalPositioner: {
     position: "fixed",
     left: 0,
@@ -2777,12 +2770,35 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_2__["StyleSheet"].create({
     //     turns out to be necessary. That sounds hard to do; punting for
     //     now!
     overflow: "auto",
-    background: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.offBlack64
+    background: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4___default.a.offBlack64
   }
 });
 /***/ }),
 /* 21 */
+/***/ (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;
+/***/ }),
+/* 22 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 "use strict";
@@ -2797,7 +2813,7 @@ function findFocusableNodes(root) {
 }
 /***/ }),
-/* 22 */
+/* 23 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 "use strict";
@@ -2894,16 +2910,16 @@ ScrollDisabler.numModalsOpened = 0;
 /* harmony default export */ __webpack_exports__["a"] = (ScrollDisabler);
 /***/ }),
-/* 23 */
+/* 24 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return CloseButton; });
 /* 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 _khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(24);
+/* harmony import */ var _khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(25);
 /* harmony import */ var _khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _khanacademy_wonder_blocks_icon_button__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(25);
+/* harmony import */ var _khanacademy_wonder_blocks_icon_button__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(26);
 /* harmony import */ var _khanacademy_wonder_blocks_icon_button__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_icon_button__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var _modal_context_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(12);
@@ -2942,19 +2958,19 @@ class CloseButton extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
 }
 /***/ }),
-/* 24 */
+/* 25 */
 /***/ (function(module, exports) {
 module.exports = require("@khanacademy/wonder-blocks-icon");
 /***/ }),
-/* 25 */
+/* 26 */
 /***/ (function(module, exports) {
 module.exports = require("@khanacademy/wonder-blocks-icon-button");
 /***/ }),
-/* 26 */
+/* 27 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 "use strict";

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-modal",
-  "version": "2.3.5",
+  "version": "2.3.7",
   "design": "v2",
   "publishConfig": {
     "access": "public"
@@ -16,15 +16,15 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-breadcrumbs": "^1.0.32",
+    "@khanacademy/wonder-blocks-breadcrumbs": "^1.0.33",
     "@khanacademy/wonder-blocks-color": "^1.2.0",
-    "@khanacademy/wonder-blocks-core": "^4.3.2",
-    "@khanacademy/wonder-blocks-icon": "^1.2.29",
-    "@khanacademy/wonder-blocks-icon-button": "^3.4.10",
-    "@khanacademy/wonder-blocks-layout": "^1.4.10",
+    "@khanacademy/wonder-blocks-core": "^4.4.0",
+    "@khanacademy/wonder-blocks-icon": "^1.2.30",
+    "@khanacademy/wonder-blocks-icon-button": "^3.4.11",
+    "@khanacademy/wonder-blocks-layout": "^1.4.11",
     "@khanacademy/wonder-blocks-spacing": "^3.0.5",
-    "@khanacademy/wonder-blocks-toolbar": "^2.1.33",
-    "@khanacademy/wonder-blocks-typography": "^1.1.32"
+    "@khanacademy/wonder-blocks-toolbar": "^2.1.34",
+    "@khanacademy/wonder-blocks-typography": "^1.1.33"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",