@khanacademy/wonder-blocks-modal 4.0.39 → 4.2.0

package/dist/es/index.js

@@ -1,114 +1,174 @@
 import * as React from 'react';
-import { StyleSheet } from 'aphrodite';
-import { MediaLayoutContext, MediaLayout, MEDIA_MODAL_SPEC } from '@khanacademy/wonder-blocks-layout';
 import { View, IDProvider } from '@khanacademy/wonder-blocks-core';
-import Spacing from '@khanacademy/wonder-blocks-spacing';
+import { tokens, mergeTheme, createThemeContext, ThemeSwitcherContext, useScopedTheme, useStyles } from '@khanacademy/wonder-blocks-theming';
+import { StyleSheet } from 'aphrodite';
 import Color from '@khanacademy/wonder-blocks-color';
+import Spacing from '@khanacademy/wonder-blocks-spacing';
 import { HeadingMedium, LabelSmall } from '@khanacademy/wonder-blocks-typography';
 import * as ReactDOM from 'react-dom';
 import { withActionScheduler } from '@khanacademy/wonder-blocks-timing';
 import xIcon from '@phosphor-icons/core/regular/x.svg';
 import IconButton from '@khanacademy/wonder-blocks-icon-button';
+import { MediaLayout } from '@khanacademy/wonder-blocks-layout';
 
-class ModalDialog extends React.Component {
-  render() {
-    const {
-      above,
-      below,
-      role,
-      style,
-      children,
-      testId,
-      "aria-labelledby": ariaLabelledBy,
-      "aria-describedby": ariaDescribedBy
-    } = this.props;
-    const contextValue = {
-      ssrSize: "large",
-      mediaSpec: MEDIA_MODAL_SPEC
-    };
-    return React.createElement(MediaLayoutContext.Provider, {
-      value: contextValue
-    }, React.createElement(MediaLayout, {
-      styleSheets: styleSheets$3
-    }, ({
-      styles
-    }) => React.createElement(View, {
-      style: [styles.wrapper, style]
-    }, below && React.createElement(View, {
-      style: styles.below
-    }, below), React.createElement(View, {
-      role: role,
-      "aria-modal": "true",
-      "aria-labelledby": ariaLabelledBy,
-      "aria-describedby": ariaDescribedBy,
-      style: styles.dialog,
-      testId: testId
-    }, children), above && React.createElement(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: StyleSheet.create({
-    wrapper: {
-      display: "flex",
-      flexDirection: "row",
-      alignItems: "stretch",
-      width: "100%",
-      height: "100%",
-      position: "relative"
+
+const theme$1 = {
+  color: {
+    bg: {
+      inverse: tokens.color.darkBlue
+    },
+    text: {
+      inverse: tokens.color.white,
+      secondary: tokens.color.offBlack64
     },
+    shadow: {
+      default: tokens.color.offBlack16
+    }
+  },
+  border: {
+    radius: tokens.border.radius.medium_4
+  },
+  spacing: {
     dialog: {
-      width: "100%",
-      height: "100%",
-      borderRadius: 4,
-      overflow: "hidden"
+      small: tokens.spacing.medium_16
     },
-    above: {
-      pointerEvents: "none",
-      position: "absolute",
-      top: 0,
-      left: 0,
-      bottom: 0,
-      right: 0,
-      zIndex: 1
+    panel: {
+      closeButton: tokens.spacing.medium_16,
+      footer: tokens.spacing.xLarge_32
     },
-    below: {
-      pointerEvents: "none",
-      position: "absolute",
-      top: 0,
-      left: 0,
-      bottom: 0,
-      right: 0,
-      zIndex: -1
-    }
-  }),
-  small: StyleSheet.create({
-    wrapper: {
-      padding: Spacing.medium_16,
-      flexDirection: "column"
+    header: {
+      xsmall: tokens.spacing.xSmall_8,
+      small: tokens.spacing.medium_16,
+      medium: tokens.spacing.large_24,
+      large: tokens.spacing.xLarge_32
     }
-  })
+  }
 };
 
-class ModalFooter extends React.Component {
-  static isClassOf(instance) {
-    return instance && instance.type && instance.type.__IS_MODAL_FOOTER__;
+const theme = mergeTheme(theme$1, {
+  color: {
+    bg: {
+      inverse: tokens.color.eggplant
+    }
   }
-  render() {
-    const {
-      children
-    } = this.props;
-    return React.createElement(View, {
-      style: styles$3.footer
-    }, children);
+});
+
+const themes = {
+  default: theme$1,
+  khanmigo: theme
+};
+const ModalDialogThemeContext = createThemeContext(theme$1);
+function ThemeModalDialog(props) {
+  const currentTheme = React.useContext(ThemeSwitcherContext);
+  const theme = themes[currentTheme] || theme$1;
+  return React.createElement(ModalDialogThemeContext.Provider, {
+    value: theme
+  }, props.children);
+}
+
+const ModalDialogCore = React.forwardRef(function ModalDialogCore(props, ref) {
+  const {
+    above,
+    below,
+    role = "dialog",
+    style,
+    children,
+    testId,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy
+  } = props;
+  const {
+    theme
+  } = useScopedTheme(ModalDialogThemeContext);
+  const styles = useStyles(themedStylesFn$3, theme);
+  return React.createElement(View, {
+    style: [styles.wrapper, style]
+  }, below && React.createElement(View, {
+    style: styles.below
+  }, below), React.createElement(View, {
+    role: role,
+    "aria-modal": "true",
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy,
+    ref: ref,
+    style: styles.dialog,
+    testId: testId
+  }, children), above && React.createElement(View, {
+    style: styles.above
+  }, above));
+});
+const ModalDialog = React.forwardRef(function ModalDialog(props, ref) {
+  return React.createElement(ThemeModalDialog, null, React.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.createElement(View, {
+    style: styles$2.footer
+  }, children);
 }
 ModalFooter.__IS_MODAL_FOOTER__ = true;
-const styles$3 = StyleSheet.create({
+ModalFooter.isComponentOf = instance => {
+  return instance && instance.type && instance.type.__IS_MODAL_FOOTER__;
+};
+const styles$2 = StyleSheet.create({
   footer: {
     flex: "0 0 auto",
     boxSizing: "border-box",
@@ -125,78 +185,73 @@ const styles$3 = StyleSheet.create({
   }
 });
 
-class ModalHeader extends React.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
+  } = useScopedTheme(ModalDialogThemeContext);
+  const styles = useStyles(themedStylesFn$2, theme);
+  return React.createElement(View, {
+    style: [styles.header, !light && styles.dark],
+    testId: testId
+  }, breadcrumbs && React.createElement(View, {
+    style: styles.breadcrumbs
+  }, breadcrumbs), React.createElement(HeadingMedium, {
+    style: styles.title,
+    id: titleId,
+    testId: testId && `${testId}-title`
+  }, title), subtitle && React.createElement(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.createElement(MediaLayout, {
-      styleSheets: styleSheets$2
-    }, ({
-      styles
-    }) => React.createElement(View, {
-      style: [styles.header, !light && styles.dark],
-      testId: testId
-    }, breadcrumbs && React.createElement(View, {
-      style: styles.breadcrumbs
-    }, breadcrumbs), React.createElement(HeadingMedium, {
-      style: styles.title,
-      id: titleId,
-      testId: testId && `${testId}-title`
-    }, title), subtitle && React.createElement(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: StyleSheet.create({
-    header: {
-      boxShadow: `0px 1px 0px ${Color.offBlack16}`,
-      display: "flex",
-      flexDirection: "column",
-      minHeight: 66,
-      padding: `${Spacing.large_24}px ${Spacing.xLarge_32}px`,
-      position: "relative",
-      width: "100%"
-    },
-    dark: {
-      background: Color.darkBlue,
-      color: Color.white
-    },
-    breadcrumbs: {
-      color: Color.offBlack64,
-      marginBottom: Spacing.xSmall_8
-    },
-    title: {
-      paddingRight: Spacing.medium_16
-    },
-    subtitle: {
-      color: Color.offBlack64,
-      marginTop: Spacing.xSmall_8
-    }
-  }),
-  small: StyleSheet.create({
-    header: {
-      paddingLeft: Spacing.medium_16,
-      paddingRight: Spacing.medium_16
-    },
-    title: {
-      paddingRight: Spacing.xLarge_32
-    }
-  })
-};
 
 const FOCUSABLE_ELEMENTS$1 = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
 class FocusTrap extends React.Component {
@@ -260,21 +315,6 @@ class FocusTrap extends React.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"])';
@@ -336,14 +376,14 @@ class ModalBackdrop extends React.Component {
       [ModalLauncherPortalAttributeName]: true
     };
     return React.createElement(View, _extends({
-      style: styles$2.modalPositioner,
+      style: styles$1.modalPositioner,
       onMouseDown: this.handleMouseDown,
       onMouseUp: this.handleMouseUp,
       testId: testId
     }, backdropProps), children);
   }
 }
-const styles$2 = StyleSheet.create({
+const styles$1 = StyleSheet.create({
   modalPositioner: {
     position: "fixed",
     left: 0,
@@ -514,7 +554,7 @@ class ModalLauncher extends React.Component {
         closeModal: this.handleCloseModal
       }
     }, renderedChildren, this.state.opened && ReactDOM.createPortal(React.createElement(FocusTrap, {
-      style: styles$1.container
+      style: styles.container
     }, React.createElement(ModalBackdrop, {
       initialFocusId: this.props.initialFocusId,
       testId: this.props.testId,
@@ -548,59 +588,54 @@ class ModalLauncherKeypressListener extends React.Component {
     return null;
   }
 }
-const styles$1 = StyleSheet.create({
+const styles = StyleSheet.create({
   container: {
     zIndex: 1080
   }
 });
 var modalLauncher = withActionScheduler(ModalLauncher);
 
-class ModalContent extends React.Component {
-  static isClassOf(instance) {
-    return instance && instance.type && instance.type.__IS_MODAL_CONTENT__;
-  }
-  render() {
-    const {
-      scrollOverflow,
-      style,
-      children
-    } = this.props;
-    return React.createElement(MediaLayout, {
-      styleSheets: styleSheets$1
-    }, ({
-      styles
-    }) => React.createElement(View, {
-      style: [styles.wrapper, scrollOverflow && styles.scrollOverflow]
-    }, React.createElement(View, {
-      style: [styles.content, style]
-    }, children)));
-  }
+function ModalContent(props) {
+  const {
+    scrollOverflow,
+    style,
+    children
+  } = props;
+  const {
+    theme
+  } = useScopedTheme(ModalDialogThemeContext);
+  const styles = useStyles(themedStylesFn$1, theme);
+  return React.createElement(View, {
+    style: [styles.wrapper, scrollOverflow && styles.scrollOverflow]
+  }, React.createElement(View, {
+    style: [styles.content, style]
+  }, children));
 }
-ModalContent.defaultProps = {
-  scrollOverflow: true
-};
 ModalContent.__IS_MODAL_CONTENT__ = true;
-const styleSheets$1 = {
-  all: StyleSheet.create({
-    wrapper: {
-      flex: 1,
-      display: "block"
-    },
-    scrollOverflow: {
-      overflow: "auto"
-    },
-    content: {
-      flex: 1,
-      minHeight: "100%",
-      padding: Spacing.xLarge_32,
-      boxSizing: "border-box"
-    }
-  }),
-  small: 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.xLarge_32,
+    boxSizing: "border-box",
+    [small]: {
       padding: `${Spacing.xLarge_32}px ${Spacing.medium_16}px`
     }
-  })
+  }
+});
+ModalContent.defaultProps = {
+  scrollOverflow: true
 };
 
 class CloseButton extends React.Component {
@@ -630,14 +665,23 @@ class CloseButton extends React.Component {
   }
 }
 
-class ModalPanel extends React.Component {
-  renderMainContent() {
-    const {
-      content,
-      footer,
-      scrollOverflow
-    } = this.props;
-    const mainContent = ModalContent.isClassOf(content) ? content : React.createElement(ModalContent, null, content);
+function ModalPanel({
+  closeButtonVisible = true,
+  scrollOverflow = true,
+  light = true,
+  content,
+  footer,
+  header,
+  onClose,
+  style,
+  testId
+}) {
+  const {
+    theme
+  } = useScopedTheme(ModalDialogThemeContext);
+  const styles = useStyles(themedStylesFn, theme);
+  const renderMainContent = React.useCallback(() => {
+    const mainContent = ModalContent.isComponentOf(content) ? content : React.createElement(ModalContent, null, content);
     if (!mainContent) {
       return mainContent;
     }
@@ -645,35 +689,24 @@ class ModalPanel extends React.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.createElement(View, {
-      style: [styles.wrapper, !light && styles.dark, style],
-      testId: testId && `${testId}-panel`
-    }, closeButtonVisible && React.createElement(CloseButton, {
-      light: !light,
-      onClick: onClose,
-      style: styles.closeButton,
-      testId: testId && `${testId}-close`
-    }), header, mainContent, !footer || ModalFooter.isClassOf(footer) ? footer : React.createElement(ModalFooter, null, footer));
-  }
+  }, [content, footer, scrollOverflow, styles.hasFooter]);
+  const mainContent = renderMainContent();
+  return React.createElement(View, {
+    style: [styles.wrapper, !light && styles.dark, style],
+    testId: testId && `${testId}-panel`
+  }, closeButtonVisible && React.createElement(CloseButton, {
+    light: !light,
+    onClick: onClose,
+    style: styles.closeButton,
+    testId: testId && `${testId}-close`
+  }), header, mainContent, !footer || ModalFooter.isComponentOf(footer) ? footer : React.createElement(ModalFooter, null, footer));
 }
 ModalPanel.defaultProps = {
   closeButtonVisible: true,
   scrollOverflow: true,
   light: true
 };
-const styles = StyleSheet.create({
+const themedStylesFn = theme => ({
   wrapper: {
     flex: "1 1 auto",
     position: "relative",
@@ -687,16 +720,16 @@ const styles = StyleSheet.create({
   },
   closeButton: {
     position: "absolute",
-    right: Spacing.medium_16,
-    top: Spacing.medium_16,
+    right: theme.spacing.panel.closeButton,
+    top: theme.spacing.panel.closeButton,
     zIndex: 1
   },
   dark: {
-    background: Color.darkBlue,
-    color: Color.white
+    background: theme.color.bg.inverse,
+    color: theme.color.text.inverse
   },
   hasFooter: {
-    paddingBottom: Spacing.xLarge_32
+    paddingBottom: theme.spacing.panel.footer
   }
 });