@khanacademy/wonder-blocks-modal 3.0.4 → 3.0.6

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @khanacademy/wonder-blocks-modal
 
+## 3.0.6
+
+### Patch Changes
+
+-   Updated dependencies [1a5624d4]
+    -   @khanacademy/wonder-blocks-icon@1.2.36
+    -   @khanacademy/wonder-blocks-icon-button@3.4.20
+
+## 3.0.5
+
+### Patch Changes
+
+-   496119f2: Cleanup WB interdependencies
+-   Updated dependencies [496119f2]
+    -   @khanacademy/wonder-blocks-breadcrumbs@1.0.37
+    -   @khanacademy/wonder-blocks-core@4.6.2
+    -   @khanacademy/wonder-blocks-icon@1.2.35
+    -   @khanacademy/wonder-blocks-icon-button@3.4.19
+    -   @khanacademy/wonder-blocks-layout@1.4.15
+    -   @khanacademy/wonder-blocks-typography@1.1.37
+
 ## 3.0.4
 
 ### Patch Changes

package/dist/index.js

@@ -0,0 +1,910 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var aphrodite = require('aphrodite');
+var wonderBlocksLayout = require('@khanacademy/wonder-blocks-layout');
+var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
+var Spacing = require('@khanacademy/wonder-blocks-spacing');
+var Color = require('@khanacademy/wonder-blocks-color');
+var wonderBlocksTypography = require('@khanacademy/wonder-blocks-typography');
+var ReactDOM = require('react-dom');
+var wonderBlocksTiming = require('@khanacademy/wonder-blocks-timing');
+var _extends = require('@babel/runtime/helpers/extends');
+var wonderBlocksIcon = require('@khanacademy/wonder-blocks-icon');
+var IconButton = require('@khanacademy/wonder-blocks-icon-button');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n["default"] = e;
+    return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var Spacing__default = /*#__PURE__*/_interopDefaultLegacy(Spacing);
+var Color__default = /*#__PURE__*/_interopDefaultLegacy(Color);
+var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
+var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
+var IconButton__default = /*#__PURE__*/_interopDefaultLegacy(IconButton);
+
+class ModalDialog extends React__namespace.Component {
+  render() {
+    const {
+      above,
+      below,
+      role,
+      style,
+      children,
+      testId,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-describedby": ariaDescribedBy
+    } = this.props;
+    const contextValue = {
+      ssrSize: "large",
+      mediaSpec: wonderBlocksLayout.MEDIA_MODAL_SPEC
+    };
+    return React__namespace.createElement(wonderBlocksLayout.MediaLayoutContext.Provider, {
+      value: contextValue
+    }, React__namespace.createElement(wonderBlocksLayout.MediaLayout, {
+      styleSheets: styleSheets$3
+    }, ({
+      styles
+    }) => React__namespace.createElement(wonderBlocksCore.View, {
+      style: [styles.wrapper, style]
+    }, below && React__namespace.createElement(wonderBlocksCore.View, {
+      style: styles.below
+    }, below), React__namespace.createElement(wonderBlocksCore.View, {
+      role: role,
+      "aria-modal": "true",
+      "aria-labelledby": ariaLabelledBy,
+      "aria-describedby": ariaDescribedBy,
+      style: styles.dialog,
+      testId: testId
+    }, children), above && React__namespace.createElement(wonderBlocksCore.View, {
+      style: styles.above
+    }, above))));
+  }
+
+}
+ModalDialog.defaultProps = {
+  role: "dialog"
+};
+const styleSheets$3 = {
+  all: aphrodite.StyleSheet.create({
+    wrapper: {
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "stretch",
+      width: "100%",
+      height: "100%",
+      position: "relative"
+    },
+    dialog: {
+      width: "100%",
+      height: "100%",
+      borderRadius: 4,
+      overflow: "hidden"
+    },
+    above: {
+      pointerEvents: "none",
+      position: "absolute",
+      top: 0,
+      left: 0,
+      bottom: 0,
+      right: 0,
+      zIndex: 1
+    },
+    below: {
+      pointerEvents: "none",
+      position: "absolute",
+      top: 0,
+      left: 0,
+      bottom: 0,
+      right: 0,
+      zIndex: -1
+    }
+  }),
+  small: aphrodite.StyleSheet.create({
+    wrapper: {
+      padding: Spacing__default["default"].medium_16,
+      flexDirection: "column"
+    }
+  })
+};
+
+class ModalFooter extends React__namespace.Component {
+  static isClassOf(instance) {
+    return instance && instance.type && instance.type.__IS_MODAL_FOOTER__;
+  }
+
+  render() {
+    const {
+      children
+    } = this.props;
+    return React__namespace.createElement(wonderBlocksCore.View, {
+      style: styles$3.footer
+    }, children);
+  }
+
+}
+ModalFooter.__IS_MODAL_FOOTER__ = true;
+const styles$3 = aphrodite.StyleSheet.create({
+  footer: {
+    flex: "0 0 auto",
+    boxSizing: "border-box",
+    minHeight: Spacing__default["default"].xxxLarge_64,
+    paddingLeft: Spacing__default["default"].medium_16,
+    paddingRight: Spacing__default["default"].medium_16,
+    paddingTop: Spacing__default["default"].xSmall_8,
+    paddingBottom: Spacing__default["default"].xSmall_8,
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    boxShadow: `0px -1px 0px ${Color__default["default"].offBlack16}`
+  }
+});
+
+class ModalHeader extends React__namespace.Component {
+  render() {
+    const {
+      breadcrumbs = undefined,
+      light,
+      subtitle = undefined,
+      testId,
+      title,
+      titleId
+    } = this.props;
+
+    if (subtitle && breadcrumbs) {
+      throw new Error("'subtitle' and 'breadcrumbs' can't be used together");
+    }
+
+    return React__namespace.createElement(wonderBlocksLayout.MediaLayout, {
+      styleSheets: styleSheets$2
+    }, ({
+      styles
+    }) => React__namespace.createElement(wonderBlocksCore.View, {
+      style: [styles.header, !light && styles.dark],
+      testId: testId
+    }, breadcrumbs && React__namespace.createElement(wonderBlocksCore.View, {
+      style: styles.breadcrumbs
+    }, breadcrumbs), React__namespace.createElement(wonderBlocksTypography.HeadingMedium, {
+      style: styles.title,
+      id: titleId,
+      testId: testId && `${testId}-title`
+    }, title), subtitle && React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
+      style: light && styles.subtitle,
+      testId: testId && `${testId}-subtitle`
+    }, subtitle)));
+  }
+
+}
+ModalHeader.defaultProps = {
+  light: true
+};
+const styleSheets$2 = {
+  all: aphrodite.StyleSheet.create({
+    header: {
+      boxShadow: `0px 1px 0px ${Color__default["default"].offBlack16}`,
+      display: "flex",
+      flexDirection: "column",
+      minHeight: 66,
+      padding: `${Spacing__default["default"].large_24}px ${Spacing__default["default"].xLarge_32}px`,
+      position: "relative",
+      width: "100%"
+    },
+    dark: {
+      background: Color__default["default"].darkBlue,
+      color: Color__default["default"].white
+    },
+    breadcrumbs: {
+      color: Color__default["default"].offBlack64,
+      marginBottom: Spacing__default["default"].xSmall_8
+    },
+    title: {
+      paddingRight: Spacing__default["default"].medium_16
+    },
+    subtitle: {
+      color: Color__default["default"].offBlack64,
+      marginTop: Spacing__default["default"].xSmall_8
+    }
+  }),
+  small: aphrodite.StyleSheet.create({
+    header: {
+      paddingLeft: Spacing__default["default"].medium_16,
+      paddingRight: Spacing__default["default"].medium_16
+    },
+    title: {
+      paddingRight: Spacing__default["default"].xLarge_32
+    }
+  })
+};
+
+const FOCUSABLE_ELEMENTS$1 = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+class FocusTrap extends React__namespace.Component {
+  constructor(...args) {
+    super(...args);
+
+    this.getModalRoot = node => {
+      if (!node) {
+        return;
+      }
+
+      const modalRoot = ReactDOM__namespace.findDOMNode(node);
+
+      if (!modalRoot) {
+        throw new Error("Assertion error: modal root should exist after mount");
+      }
+
+      this.modalRoot = modalRoot;
+    };
+
+    this.handleFocusMoveToLast = () => {
+      this.focusElementIn(false);
+    };
+
+    this.handleFocusMoveToFirst = () => {
+      this.focusElementIn(true);
+    };
+  }
+
+  tryToFocus(node) {
+    if (node instanceof HTMLElement) {
+      try {
+        node.focus();
+      } catch (e) {}
+
+      return document.activeElement === node;
+    }
+  }
+
+  focusElementIn(isLast) {
+    const modalRootAsHtmlEl = this.modalRoot;
+    const focusableNodes = Array.from(modalRootAsHtmlEl.querySelectorAll(FOCUSABLE_ELEMENTS$1));
+    const nodeIndex = !isLast ? focusableNodes.length - 1 : 0;
+    const focusableNode = focusableNodes[nodeIndex];
+    this.tryToFocus(focusableNode);
+  }
+
+  render() {
+    const {
+      style
+    } = this.props;
+    return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement("div", {
+      tabIndex: "0",
+      className: "modal-focus-trap-first",
+      onFocus: this.handleFocusMoveToLast,
+      style: {
+        position: "fixed"
+      }
+    }), React__namespace.createElement(wonderBlocksCore.View, {
+      style: style,
+      ref: this.getModalRoot
+    }, this.props.children), React__namespace.createElement("div", {
+      tabIndex: "0",
+      className: "modal-focus-trap-last",
+      onFocus: this.handleFocusMoveToFirst,
+      style: {
+        position: "fixed"
+      }
+    }));
+  }
+
+}
+
+const ModalLauncherPortalAttributeName = "data-modal-launcher-portal";
+
+const FOCUSABLE_ELEMENTS = 'a[href], details, input, textarea, select, button:not([aria-label^="Close"])';
+function findFocusableNodes(root) {
+  return Array.from(root.querySelectorAll(FOCUSABLE_ELEMENTS));
+}
+
+class ModalBackdrop extends React__namespace.Component {
+  constructor(...args) {
+    super(...args);
+    this._mousePressedOutside = false;
+
+    this.handleMouseDown = e => {
+      this._mousePressedOutside = e.target === e.currentTarget;
+    };
+
+    this.handleMouseUp = e => {
+      if (e.target === e.currentTarget && this._mousePressedOutside) {
+        this.props.onCloseModal();
+      }
+
+      this._mousePressedOutside = false;
+    };
+  }
+
+  componentDidMount() {
+    const node = ReactDOM__namespace.findDOMNode(this);
+
+    if (!node) {
+      return;
+    }
+
+    const firstFocusableElement = this._getInitialFocusElement(node) || this._getFirstFocusableElement(node) || this._getDialogElement(node);
+
+    setTimeout(() => {
+      firstFocusableElement.focus();
+    }, 0);
+  }
+
+  _getInitialFocusElement(node) {
+    const {
+      initialFocusId
+    } = this.props;
+
+    if (!initialFocusId) {
+      return null;
+    }
+
+    return ReactDOM__namespace.findDOMNode(node.querySelector(`#${initialFocusId}`));
+  }
+
+  _getFirstFocusableElement(node) {
+    const focusableElements = findFocusableNodes(node);
+
+    if (!focusableElements) {
+      return null;
+    }
+
+    return focusableElements[0];
+  }
+
+  _getDialogElement(node) {
+    const dialogElement = ReactDOM__namespace.findDOMNode(node.querySelector('[role="dialog"]'));
+    dialogElement.tabIndex = -1;
+    return dialogElement;
+  }
+
+  render() {
+    const {
+      children,
+      testId
+    } = this.props;
+    const backdropProps = {
+      [ModalLauncherPortalAttributeName]: true
+    };
+    return React__namespace.createElement(wonderBlocksCore.View, _extends__default["default"]({
+      style: styles$2.modalPositioner,
+      onMouseDown: this.handleMouseDown,
+      onMouseUp: this.handleMouseUp,
+      testId: testId
+    }, backdropProps), children);
+  }
+
+}
+const styles$2 = aphrodite.StyleSheet.create({
+  modalPositioner: {
+    position: "fixed",
+    left: 0,
+    top: 0,
+    width: "100%",
+    height: "100%",
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "auto",
+    background: Color__default["default"].offBlack64
+  }
+});
+
+const needsHackyMobileSafariScrollDisabler = (() => {
+  if (typeof window === "undefined") {
+    return false;
+  }
+
+  const userAgent = window.navigator.userAgent;
+  return userAgent.indexOf("iPad") > -1 || userAgent.indexOf("iPhone") > -1;
+})();
+
+class ScrollDisabler extends React__namespace.Component {
+  componentDidMount() {
+    if (ScrollDisabler.numModalsOpened === 0) {
+      const body = document.body;
+
+      if (!body) {
+        throw new Error("couldn't find document.body");
+      }
+
+      ScrollDisabler.oldOverflow = body.style.overflow;
+      ScrollDisabler.oldScrollY = window.scrollY;
+
+      if (needsHackyMobileSafariScrollDisabler) {
+        ScrollDisabler.oldPosition = body.style.position;
+        ScrollDisabler.oldWidth = body.style.width;
+        ScrollDisabler.oldTop = body.style.top;
+      }
+
+      body.style.overflow = "hidden";
+
+      if (needsHackyMobileSafariScrollDisabler) {
+        body.style.position = "fixed";
+        body.style.width = "100%";
+        body.style.top = `${-ScrollDisabler.oldScrollY}px`;
+      }
+    }
+
+    ScrollDisabler.numModalsOpened++;
+  }
+
+  componentWillUnmount() {
+    ScrollDisabler.numModalsOpened--;
+
+    if (ScrollDisabler.numModalsOpened === 0) {
+      const body = document.body;
+
+      if (!body) {
+        throw new Error("couldn't find document.body");
+      }
+
+      body.style.overflow = ScrollDisabler.oldOverflow;
+
+      if (needsHackyMobileSafariScrollDisabler) {
+        body.style.position = ScrollDisabler.oldPosition;
+        body.style.width = ScrollDisabler.oldWidth;
+        body.style.top = ScrollDisabler.oldTop;
+      }
+
+      if (typeof window !== "undefined" && window.scrollTo) {
+        window.scrollTo(0, ScrollDisabler.oldScrollY);
+      }
+    }
+  }
+
+  render() {
+    return null;
+  }
+
+}
+
+ScrollDisabler.numModalsOpened = 0;
+
+const defaultContext = {
+  closeModal: undefined
+};
+var ModalContext = React__namespace.createContext(defaultContext);
+
+class ModalLauncher extends React__namespace.Component {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      opened: false
+    };
+
+    this._saveLastElementFocused = () => {
+      this.lastElementFocusedOutsideModal = document.activeElement;
+    };
+
+    this._openModal = () => {
+      this._saveLastElementFocused();
+
+      this.setState({
+        opened: true
+      });
+    };
+
+    this._returnFocus = () => {
+      const {
+        closedFocusId,
+        schedule
+      } = this.props;
+      const lastElement = this.lastElementFocusedOutsideModal;
+
+      if (closedFocusId) {
+        const focusElement = ReactDOM__namespace.findDOMNode(document.getElementById(closedFocusId));
+
+        if (focusElement) {
+          schedule.animationFrame(() => {
+            focusElement.focus();
+          });
+          return;
+        }
+      }
+
+      if (lastElement != null) {
+        schedule.animationFrame(() => {
+          lastElement.focus();
+        });
+      }
+    };
+
+    this.handleCloseModal = () => {
+      this.setState({
+        opened: false
+      }, () => {
+        const {
+          onClose
+        } = this.props;
+        onClose && onClose();
+
+        this._returnFocus();
+      });
+    };
+  }
+
+  static getDerivedStateFromProps(props, state) {
+    if (typeof props.opened === "boolean" && props.children) {
+      console.warn("'children' and 'opened' can't be used together");
+    }
+
+    if (typeof props.opened === "boolean" && !props.onClose) {
+      console.warn("'onClose' should be used with 'opened'");
+    }
+
+    if (typeof props.opened !== "boolean" && !props.children) {
+      console.warn("either 'children' or 'opened' must be set");
+    }
+
+    return {
+      opened: typeof props.opened === "boolean" ? props.opened : state.opened
+    };
+  }
+
+  componentDidUpdate(prevProps) {
+    if (!prevProps.opened && this.props.opened) {
+      this._saveLastElementFocused();
+    }
+  }
+
+  _renderModal() {
+    if (typeof this.props.modal === "function") {
+      return this.props.modal({
+        closeModal: this.handleCloseModal
+      });
+    } else {
+      return this.props.modal;
+    }
+  }
+
+  render() {
+    const renderedChildren = this.props.children ? this.props.children({
+      openModal: this._openModal
+    }) : null;
+    const {
+      body
+    } = document;
+
+    if (!body) {
+      return null;
+    }
+
+    return React__namespace.createElement(ModalContext.Provider, {
+      value: {
+        closeModal: this.handleCloseModal
+      }
+    }, renderedChildren, this.state.opened && ReactDOM__namespace.createPortal(React__namespace.createElement(FocusTrap, {
+      style: styles$1.container
+    }, React__namespace.createElement(ModalBackdrop, {
+      initialFocusId: this.props.initialFocusId,
+      testId: this.props.testId,
+      onCloseModal: this.props.backdropDismissEnabled ? this.handleCloseModal : () => {}
+    }, this._renderModal())), body), this.state.opened && React__namespace.createElement(ModalLauncherKeypressListener, {
+      onClose: this.handleCloseModal
+    }), this.state.opened && React__namespace.createElement(ScrollDisabler, null));
+  }
+
+}
+
+ModalLauncher.defaultProps = {
+  backdropDismissEnabled: true
+};
+
+class ModalLauncherKeypressListener extends React__namespace.Component {
+  constructor(...args) {
+    super(...args);
+
+    this._handleKeyup = e => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        e.stopPropagation();
+        this.props.onClose();
+      }
+    };
+  }
+
+  componentDidMount() {
+    window.addEventListener("keyup", this._handleKeyup);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener("keyup", this._handleKeyup);
+  }
+
+  render() {
+    return null;
+  }
+
+}
+
+const styles$1 = aphrodite.StyleSheet.create({
+  container: {
+    zIndex: 1080
+  }
+});
+var modalLauncher = wonderBlocksTiming.withActionScheduler(ModalLauncher);
+
+class ModalContent extends React__namespace.Component {
+  static isClassOf(instance) {
+    return instance && instance.type && instance.type.__IS_MODAL_CONTENT__;
+  }
+
+  render() {
+    const {
+      scrollOverflow,
+      style,
+      children
+    } = this.props;
+    return React__namespace.createElement(wonderBlocksLayout.MediaLayout, {
+      styleSheets: styleSheets$1
+    }, ({
+      styles
+    }) => React__namespace.createElement(wonderBlocksCore.View, {
+      style: [styles.wrapper, scrollOverflow && styles.scrollOverflow]
+    }, React__namespace.createElement(wonderBlocksCore.View, {
+      style: [styles.content, style]
+    }, children)));
+  }
+
+}
+ModalContent.defaultProps = {
+  scrollOverflow: true
+};
+ModalContent.__IS_MODAL_CONTENT__ = true;
+const styleSheets$1 = {
+  all: aphrodite.StyleSheet.create({
+    wrapper: {
+      flex: 1,
+      display: "block"
+    },
+    scrollOverflow: {
+      overflow: "auto"
+    },
+    content: {
+      flex: 1,
+      minHeight: "100%",
+      padding: Spacing__default["default"].xLarge_32,
+      boxSizing: "border-box"
+    }
+  }),
+  small: aphrodite.StyleSheet.create({
+    content: {
+      padding: `${Spacing__default["default"].xLarge_32}px ${Spacing__default["default"].medium_16}px`
+    }
+  })
+};
+
+class CloseButton extends React__namespace.Component {
+  render() {
+    const {
+      light,
+      onClick,
+      style,
+      testId
+    } = this.props;
+    return React__namespace.createElement(ModalContext.Consumer, null, ({
+      closeModal
+    }) => {
+      if (closeModal && onClick) {
+        throw new Error("You've specified 'onClose' on a modal when using ModalLauncher.  Please specify 'onClose' on the ModalLauncher instead");
+      }
+
+      return React__namespace.createElement(IconButton__default["default"], {
+        icon: wonderBlocksIcon.icons.dismiss,
+        "aria-label": "Close modal",
+        onClick: onClick || closeModal,
+        kind: light ? "primary" : "tertiary",
+        light: light,
+        style: style,
+        testId: testId
+      });
+    });
+  }
+
+}
+
+class ModalPanel extends React__namespace.Component {
+  renderMainContent() {
+    const {
+      content,
+      footer,
+      scrollOverflow
+    } = this.props;
+    const mainContent = ModalContent.isClassOf(content) ? content : React__namespace.createElement(ModalContent, null, content);
+
+    if (!mainContent) {
+      return mainContent;
+    }
+
+    return React__namespace.cloneElement(mainContent, {
+      scrollOverflow,
+      style: [!!footer && styles.hasFooter, mainContent.props.style]
+    });
+  }
+
+  render() {
+    const {
+      closeButtonVisible,
+      footer,
+      header,
+      light,
+      onClose,
+      style,
+      testId
+    } = this.props;
+    const mainContent = this.renderMainContent();
+    return React__namespace.createElement(wonderBlocksCore.View, {
+      style: [styles.wrapper, !light && styles.dark, style],
+      testId: testId && `${testId}-panel`
+    }, closeButtonVisible && React__namespace.createElement(CloseButton, {
+      light: !light,
+      onClick: onClose,
+      style: styles.closeButton,
+      testId: testId && `${testId}-close`
+    }), header, mainContent, !footer || ModalFooter.isClassOf(footer) ? footer : React__namespace.createElement(ModalFooter, null, footer));
+  }
+
+}
+ModalPanel.defaultProps = {
+  closeButtonVisible: true,
+  scrollOverflow: true,
+  light: true
+};
+const styles = aphrodite.StyleSheet.create({
+  wrapper: {
+    flex: "1 1 auto",
+    position: "relative",
+    display: "flex",
+    flexDirection: "column",
+    background: "white",
+    boxSizing: "border-box",
+    overflow: "hidden",
+    height: "100%",
+    width: "100%"
+  },
+  closeButton: {
+    position: "absolute",
+    right: Spacing__default["default"].medium_16,
+    top: Spacing__default["default"].medium_16,
+    zIndex: 1
+  },
+  dark: {
+    background: Color__default["default"].darkBlue,
+    color: Color__default["default"].white
+  },
+  hasFooter: {
+    paddingBottom: Spacing__default["default"].xLarge_32
+  }
+});
+
+class OnePaneDialog extends React__namespace.Component {
+  renderHeader(uniqueId) {
+    const {
+      title,
+      breadcrumbs = undefined,
+      subtitle = undefined,
+      testId
+    } = this.props;
+
+    if (breadcrumbs) {
+      return React__namespace.createElement(ModalHeader, {
+        title: title,
+        breadcrumbs: breadcrumbs,
+        titleId: uniqueId,
+        testId: testId && `${testId}-header`
+      });
+    } else if (subtitle) {
+      return React__namespace.createElement(ModalHeader, {
+        title: title,
+        subtitle: subtitle,
+        titleId: uniqueId,
+        testId: testId && `${testId}-header`
+      });
+    } else {
+      return React__namespace.createElement(ModalHeader, {
+        title: title,
+        titleId: uniqueId,
+        testId: testId && `${testId}-header`
+      });
+    }
+  }
+
+  render() {
+    const {
+      onClose,
+      footer,
+      content,
+      above,
+      below,
+      style,
+      closeButtonVisible,
+      testId,
+      titleId,
+      role,
+      "aria-describedby": ariaDescribedBy
+    } = this.props;
+    return React__namespace.createElement(wonderBlocksLayout.MediaLayout, {
+      styleSheets: styleSheets
+    }, ({
+      styles
+    }) => React__namespace.createElement(wonderBlocksCore.IDProvider, {
+      id: titleId,
+      scope: "modal"
+    }, uniqueId => React__namespace.createElement(ModalDialog, {
+      style: [styles.dialog, style],
+      above: above,
+      below: below,
+      testId: testId,
+      "aria-labelledby": uniqueId,
+      "aria-describedby": ariaDescribedBy,
+      role: role
+    }, React__namespace.createElement(ModalPanel, {
+      onClose: onClose,
+      header: this.renderHeader(uniqueId),
+      content: content,
+      footer: footer,
+      closeButtonVisible: closeButtonVisible,
+      testId: testId
+    }))));
+  }
+
+}
+OnePaneDialog.defaultProps = {
+  closeButtonVisible: true
+};
+const styleSheets = {
+  small: aphrodite.StyleSheet.create({
+    dialog: {
+      width: "100%",
+      height: "100%",
+      overflow: "hidden"
+    }
+  }),
+  mdOrLarger: aphrodite.StyleSheet.create({
+    dialog: {
+      width: "93.75%",
+      maxWidth: 576,
+      height: "81.25%",
+      maxHeight: 624
+    }
+  })
+};
+
+function maybeGetNextAncestorModalLauncherPortal(element) {
+  let candidateElement = element && element.parentElement;
+
+  while (candidateElement && !candidateElement.hasAttribute(ModalLauncherPortalAttributeName)) {
+    candidateElement = candidateElement.parentElement;
+  }
+
+  return candidateElement;
+}
+
+function maybeGetPortalMountedModalHostElement(element) {
+  return maybeGetNextAncestorModalLauncherPortal(element);
+}
+
+exports.ModalDialog = ModalDialog;
+exports.ModalFooter = ModalFooter;
+exports.ModalHeader = ModalHeader;
+exports.ModalLauncher = modalLauncher;
+exports.ModalPanel = ModalPanel;
+exports.OnePaneDialog = OnePaneDialog;
+exports.maybeGetPortalMountedModalHostElement = maybeGetPortalMountedModalHostElement;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-modal",
-  "version": "3.0.4",
+  "version": "3.0.6",
   "design": "v2",
   "publishConfig": {
     "access": "public"
@@ -16,14 +16,15 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-breadcrumbs": "^1.0.36",
+    "@khanacademy/wonder-blocks-breadcrumbs": "^1.0.37",
     "@khanacademy/wonder-blocks-color": "^1.2.0",
-    "@khanacademy/wonder-blocks-core": "^4.6.1",
-    "@khanacademy/wonder-blocks-icon": "^1.2.34",
-    "@khanacademy/wonder-blocks-icon-button": "^3.4.18",
-    "@khanacademy/wonder-blocks-layout": "^1.4.14",
+    "@khanacademy/wonder-blocks-core": "^4.6.2",
+    "@khanacademy/wonder-blocks-icon": "^1.2.36",
+    "@khanacademy/wonder-blocks-icon-button": "^3.4.20",
+    "@khanacademy/wonder-blocks-layout": "^1.4.15",
     "@khanacademy/wonder-blocks-spacing": "^3.0.5",
-    "@khanacademy/wonder-blocks-typography": "^1.1.36"
+    "@khanacademy/wonder-blocks-timing": "^2.1.0",
+    "@khanacademy/wonder-blocks-typography": "^1.1.37"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",
@@ -31,6 +32,7 @@
     "react-dom": "16.14.0"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.6.0"
+    "@khanacademy/wonder-blocks-breadcrumbs": "^1.0.37",
+    "wb-dev-build-settings": "^0.7.0"
   }
-}
+}