@khanacademy/wonder-blocks-modal 4.0.39 → 4.2.0

package/dist/index.js

@@ -3,143 +3,203 @@
 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 wonderBlocksTheming = require('@khanacademy/wonder-blocks-theming');
+var aphrodite = require('aphrodite');
 var Color = require('@khanacademy/wonder-blocks-color');
+var Spacing = require('@khanacademy/wonder-blocks-spacing');
 var wonderBlocksTypography = require('@khanacademy/wonder-blocks-typography');
 var ReactDOM = require('react-dom');
 var wonderBlocksTiming = require('@khanacademy/wonder-blocks-timing');
 var xIcon = require('@phosphor-icons/core/regular/x.svg');
 var IconButton = require('@khanacademy/wonder-blocks-icon-button');
+var wonderBlocksLayout = require('@khanacademy/wonder-blocks-layout');
 
 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]; }
-                });
-            }
+  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);
+      }
+    });
+  }
+  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 Spacing__default = /*#__PURE__*/_interopDefaultLegacy(Spacing);
 var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
 var xIcon__default = /*#__PURE__*/_interopDefaultLegacy(xIcon);
 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))));
-  }
+function _extends() {
+  _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;
+  };
+  return _extends.apply(this, arguments);
 }
-ModalDialog.defaultProps = {
-  role: "dialog"
-};
-const styleSheets$3 = {
-  all: aphrodite.StyleSheet.create({
-    wrapper: {
-      display: "flex",
-      flexDirection: "row",
-      alignItems: "stretch",
-      width: "100%",
-      height: "100%",
-      position: "relative"
+
+const theme$1 = {
+  color: {
+    bg: {
+      inverse: wonderBlocksTheming.tokens.color.darkBlue
+    },
+    text: {
+      inverse: wonderBlocksTheming.tokens.color.white,
+      secondary: wonderBlocksTheming.tokens.color.offBlack64
     },
+    shadow: {
+      default: wonderBlocksTheming.tokens.color.offBlack16
+    }
+  },
+  border: {
+    radius: wonderBlocksTheming.tokens.border.radius.medium_4
+  },
+  spacing: {
     dialog: {
-      width: "100%",
-      height: "100%",
-      borderRadius: 4,
-      overflow: "hidden"
+      small: wonderBlocksTheming.tokens.spacing.medium_16
     },
-    above: {
-      pointerEvents: "none",
-      position: "absolute",
-      top: 0,
-      left: 0,
-      bottom: 0,
-      right: 0,
-      zIndex: 1
+    panel: {
+      closeButton: wonderBlocksTheming.tokens.spacing.medium_16,
+      footer: wonderBlocksTheming.tokens.spacing.xLarge_32
     },
-    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"
+    header: {
+      xsmall: wonderBlocksTheming.tokens.spacing.xSmall_8,
+      small: wonderBlocksTheming.tokens.spacing.medium_16,
+      medium: wonderBlocksTheming.tokens.spacing.large_24,
+      large: wonderBlocksTheming.tokens.spacing.xLarge_32
     }
-  })
+  }
 };
 
-class ModalFooter extends React__namespace.Component {
-  static isClassOf(instance) {
-    return instance && instance.type && instance.type.__IS_MODAL_FOOTER__;
+const theme = wonderBlocksTheming.mergeTheme(theme$1, {
+  color: {
+    bg: {
+      inverse: wonderBlocksTheming.tokens.color.eggplant
+    }
   }
-  render() {
-    const {
-      children
-    } = this.props;
-    return React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$3.footer
-    }, children);
+});
+
+const themes = {
+  default: theme$1,
+  khanmigo: theme
+};
+const ModalDialogThemeContext = wonderBlocksTheming.createThemeContext(theme$1);
+function ThemeModalDialog(props) {
+  const currentTheme = React__namespace.useContext(wonderBlocksTheming.ThemeSwitcherContext);
+  const theme = themes[currentTheme] || theme$1;
+  return React__namespace.createElement(ModalDialogThemeContext.Provider, {
+    value: theme
+  }, props.children);
+}
+
+const ModalDialogCore = React__namespace.forwardRef(function ModalDialogCore(props, ref) {
+  const {
+    above,
+    below,
+    role = "dialog",
+    style,
+    children,
+    testId,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy
+  } = props;
+  const {
+    theme
+  } = wonderBlocksTheming.useScopedTheme(ModalDialogThemeContext);
+  const styles = wonderBlocksTheming.useStyles(themedStylesFn$3, theme);
+  return 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,
+    ref: ref,
+    style: styles.dialog,
+    testId: testId
+  }, children), above && React__namespace.createElement(wonderBlocksCore.View, {
+    style: styles.above
+  }, above));
+});
+const ModalDialog = React__namespace.forwardRef(function ModalDialog(props, ref) {
+  return React__namespace.createElement(ThemeModalDialog, null, React__namespace.createElement(ModalDialogCore, _extends({}, props, {
+    ref: ref
+  })));
+});
+const small$2 = "@media (max-width: 767px)";
+const themedStylesFn$3 = theme => ({
+  wrapper: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "stretch",
+    width: "100%",
+    height: "100%",
+    position: "relative",
+    [small$2]: {
+      padding: theme.spacing.dialog.small,
+      flexDirection: "column"
+    }
+  },
+  dialog: {
+    width: "100%",
+    height: "100%",
+    borderRadius: theme.border.radius,
+    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
   }
+});
+ModalDialog.displayName = "ModalDialog";
+
+function ModalFooter({
+  children
+}) {
+  return React__namespace.createElement(wonderBlocksCore.View, {
+    style: styles$2.footer
+  }, children);
 }
 ModalFooter.__IS_MODAL_FOOTER__ = true;
-const styles$3 = aphrodite.StyleSheet.create({
+ModalFooter.isComponentOf = instance => {
+  return instance && instance.type && instance.type.__IS_MODAL_FOOTER__;
+};
+const styles$2 = aphrodite.StyleSheet.create({
   footer: {
     flex: "0 0 auto",
     boxSizing: "border-box",
@@ -156,78 +216,73 @@ const styles$3 = aphrodite.StyleSheet.create({
   }
 });
 
-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");
+function ModalHeader(props) {
+  const {
+    breadcrumbs = undefined,
+    light,
+    subtitle = undefined,
+    testId,
+    title,
+    titleId
+  } = props;
+  if (subtitle && breadcrumbs) {
+    throw new Error("'subtitle' and 'breadcrumbs' can't be used together");
+  }
+  const {
+    theme
+  } = wonderBlocksTheming.useScopedTheme(ModalDialogThemeContext);
+  const styles = wonderBlocksTheming.useStyles(themedStylesFn$2, theme);
+  return 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));
+}
+const small$1 = "@media (max-width: 767px)";
+const themedStylesFn$2 = theme => ({
+  header: {
+    boxShadow: `0px 1px 0px ${theme.color.shadow.default}`,
+    display: "flex",
+    flexDirection: "column",
+    minHeight: 66,
+    padding: `${theme.spacing.header.medium}px ${theme.spacing.header.large}px`,
+    position: "relative",
+    width: "100%",
+    [small$1]: {
+      paddingLeft: theme.spacing.header.small,
+      paddingRight: theme.spacing.header.small
     }
-    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)));
+  },
+  dark: {
+    background: theme.color.bg.inverse,
+    color: theme.color.text.inverse
+  },
+  breadcrumbs: {
+    color: theme.color.text.secondary,
+    marginBottom: theme.spacing.header.xsmall
+  },
+  title: {
+    paddingRight: theme.spacing.header.small,
+    [small$1]: {
+      paddingRight: theme.spacing.header.large
+    }
+  },
+  subtitle: {
+    color: theme.color.text.secondary,
+    marginTop: theme.spacing.header.xsmall
   }
-}
+});
 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 {
@@ -291,21 +346,6 @@ class FocusTrap extends React__namespace.Component {
   }
 }
 
-function _extends() {
-  _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;
-  };
-  return _extends.apply(this, arguments);
-}
-
 const ModalLauncherPortalAttributeName = "data-modal-launcher-portal";
 
 const FOCUSABLE_ELEMENTS = 'a[href], details, input, textarea, select, button:not([aria-label^="Close"])';
@@ -367,14 +407,14 @@ class ModalBackdrop extends React__namespace.Component {
       [ModalLauncherPortalAttributeName]: true
     };
     return React__namespace.createElement(wonderBlocksCore.View, _extends({
-      style: styles$2.modalPositioner,
+      style: styles$1.modalPositioner,
       onMouseDown: this.handleMouseDown,
       onMouseUp: this.handleMouseUp,
       testId: testId
     }, backdropProps), children);
   }
 }
-const styles$2 = aphrodite.StyleSheet.create({
+const styles$1 = aphrodite.StyleSheet.create({
   modalPositioner: {
     position: "fixed",
     left: 0,
@@ -545,7 +585,7 @@ class ModalLauncher extends React__namespace.Component {
         closeModal: this.handleCloseModal
       }
     }, renderedChildren, this.state.opened && ReactDOM__namespace.createPortal(React__namespace.createElement(FocusTrap, {
-      style: styles$1.container
+      style: styles.container
     }, React__namespace.createElement(ModalBackdrop, {
       initialFocusId: this.props.initialFocusId,
       testId: this.props.testId,
@@ -579,59 +619,54 @@ class ModalLauncherKeypressListener extends React__namespace.Component {
     return null;
   }
 }
-const styles$1 = aphrodite.StyleSheet.create({
+const styles = 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)));
-  }
+function ModalContent(props) {
+  const {
+    scrollOverflow,
+    style,
+    children
+  } = props;
+  const {
+    theme
+  } = wonderBlocksTheming.useScopedTheme(ModalDialogThemeContext);
+  const styles = wonderBlocksTheming.useStyles(themedStylesFn$1, theme);
+  return 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: {
+ModalContent.isComponentOf = instance => {
+  return instance && instance.type && instance.type.__IS_MODAL_CONTENT__;
+};
+const small = "@media (max-width: 767px)";
+const themedStylesFn$1 = theme => ({
+  wrapper: {
+    flex: 1,
+    display: "block"
+  },
+  scrollOverflow: {
+    overflow: "auto"
+  },
+  content: {
+    flex: 1,
+    minHeight: "100%",
+    padding: Spacing__default["default"].xLarge_32,
+    boxSizing: "border-box",
+    [small]: {
       padding: `${Spacing__default["default"].xLarge_32}px ${Spacing__default["default"].medium_16}px`
     }
-  })
+  }
+});
+ModalContent.defaultProps = {
+  scrollOverflow: true
 };
 
 class CloseButton extends React__namespace.Component {
@@ -661,14 +696,23 @@ class CloseButton extends React__namespace.Component {
   }
 }
 
-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);
+function ModalPanel({
+  closeButtonVisible = true,
+  scrollOverflow = true,
+  light = true,
+  content,
+  footer,
+  header,
+  onClose,
+  style,
+  testId
+}) {
+  const {
+    theme
+  } = wonderBlocksTheming.useScopedTheme(ModalDialogThemeContext);
+  const styles = wonderBlocksTheming.useStyles(themedStylesFn, theme);
+  const renderMainContent = React__namespace.useCallback(() => {
+    const mainContent = ModalContent.isComponentOf(content) ? content : React__namespace.createElement(ModalContent, null, content);
     if (!mainContent) {
       return mainContent;
     }
@@ -676,35 +720,24 @@ class ModalPanel extends React__namespace.Component {
       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));
-  }
+  }, [content, footer, scrollOverflow, styles.hasFooter]);
+  const mainContent = 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.isComponentOf(footer) ? footer : React__namespace.createElement(ModalFooter, null, footer));
 }
 ModalPanel.defaultProps = {
   closeButtonVisible: true,
   scrollOverflow: true,
   light: true
 };
-const styles = aphrodite.StyleSheet.create({
+const themedStylesFn = theme => ({
   wrapper: {
     flex: "1 1 auto",
     position: "relative",
@@ -718,16 +751,16 @@ const styles = aphrodite.StyleSheet.create({
   },
   closeButton: {
     position: "absolute",
-    right: Spacing__default["default"].medium_16,
-    top: Spacing__default["default"].medium_16,
+    right: theme.spacing.panel.closeButton,
+    top: theme.spacing.panel.closeButton,
     zIndex: 1
   },
   dark: {
-    background: Color__default["default"].darkBlue,
-    color: Color__default["default"].white
+    background: theme.color.bg.inverse,
+    color: theme.color.text.inverse
   },
   hasFooter: {
-    paddingBottom: Spacing__default["default"].xLarge_32
+    paddingBottom: theme.spacing.panel.footer
   }
 });