@khanacademy/wonder-blocks-modal 2.2.1 → 2.3.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @khanacademy/wonder-blocks-modal
 
+## 2.3.0
+
+### Minor Changes
+
+-   7eaf74bd: Added `closedFocusId` prop so users can specify the element to receive focus after the modal is closed
+
+## 2.2.3
+
+### Patch Changes
+
+-   Updated dependencies [246a921d]
+    -   @khanacademy/wonder-blocks-core@4.3.0
+    -   @khanacademy/wonder-blocks-breadcrumbs@1.0.29
+    -   @khanacademy/wonder-blocks-icon@1.2.26
+    -   @khanacademy/wonder-blocks-icon-button@3.4.5
+    -   @khanacademy/wonder-blocks-layout@1.4.8
+    -   @khanacademy/wonder-blocks-toolbar@2.1.30
+    -   @khanacademy/wonder-blocks-typography@1.1.30
+
+## 2.2.2
+
+### Patch Changes
+
+-   @khanacademy/wonder-blocks-icon-button@3.4.4
+
 ## 2.2.1
 
 ### Patch Changes

package/dist/es/index.js

@@ -6,6 +6,7 @@ import Spacing from '@khanacademy/wonder-blocks-spacing';
 import Color from '@khanacademy/wonder-blocks-color';
 import { HeadingMedium, LabelSmall } from '@khanacademy/wonder-blocks-typography';
 import * as ReactDOM from 'react-dom';
+import { withActionScheduler } from '@khanacademy/wonder-blocks-timing';
 import _extends from '@babel/runtime/helpers/extends';
 import { icons } from '@khanacademy/wonder-blocks-icon';
 import IconButton from '@khanacademy/wonder-blocks-icon-button';
@@ -717,16 +718,45 @@ class ModalLauncher extends React.Component {
       });
     };
 
+    this._returnFocus = () => {
+      const {
+        closedFocusId,
+        schedule
+      } = this.props;
+      const lastElement = this.lastElementFocusedOutsideModal; // Focus on the specified element after closing the modal.
+
+      if (closedFocusId) {
+        const focusElement = ReactDOM.findDOMNode(document.getElementById(closedFocusId));
+
+        if (focusElement) {
+          // Wait for the modal to leave the DOM before trying
+          // to focus on the specified element.
+          schedule.animationFrame(() => {
+            focusElement.focus();
+          });
+          return;
+        }
+      }
+
+      if (lastElement != null) {
+        // Wait for the modal to leave the DOM before trying to
+        // return focus to the element that triggered the modal.
+        schedule.animationFrame(() => {
+          lastElement.focus();
+        });
+      }
+    };
+
     this.handleCloseModal = () => {
       this.setState({
         opened: false
       }, () => {
-        this.props.onClose && this.props.onClose();
+        const {
+          onClose
+        } = this.props;
+        onClose && onClose();
 
-        if (this.lastElementFocusedOutsideModal != null) {
-          // return focus to the element that triggered the modal
-          this.lastElementFocusedOutsideModal.focus();
-        }
+        this._returnFocus();
       });
     };
   }
@@ -810,6 +840,7 @@ class ModalLauncher extends React.Component {
 }
 /** A component that, when mounted, calls `onClose` when Escape is pressed. */
 
+
 ModalLauncher.defaultProps = {
   backdropDismissEnabled: true
 };
@@ -860,6 +891,7 @@ const styles$1 = StyleSheet.create({
     zIndex: 1080
   }
 });
+var modalLauncher = withActionScheduler(ModalLauncher);
 
 /**
  * The Modal content included after the header
@@ -1176,4 +1208,4 @@ function maybeGetPortalMountedModalHostElement(element) {
   return maybeGetNextAncestorModalLauncherPortal(element);
 }
 
-export { ModalDialog, ModalFooter, ModalHeader, ModalLauncher, ModalPanel, OnePaneDialog, maybeGetPortalMountedModalHostElement };
+export { ModalDialog, ModalFooter, ModalHeader, modalLauncher as ModalLauncher, ModalPanel, OnePaneDialog, maybeGetPortalMountedModalHostElement };