@khanacademy/wonder-blocks-modal 4.1.0 → 4.2.1

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @khanacademy/wonder-blocks-modal
 
+## 4.2.1
+
+### Patch Changes
+
+-   Updated dependencies [80592e75]
+    -   @khanacademy/wonder-blocks-theming@1.3.0
+    -   @khanacademy/wonder-blocks-icon-button@5.1.8
+
+## 4.2.0
+
+### Minor Changes
+
+-   b7bae8f2: Add theming support to ModalPanel
+-   09c61d25: Add theming support to ModalHeader and ModalFooter
+
 ## 4.1.0
 
 ### Minor Changes

package/dist/components/modal-content.d.ts

@@ -8,16 +8,15 @@ type Props = {
     /** Optional styling to apply to the contents. */
     style?: StyleType;
 };
-type DefaultProps = {
-    scrollOverflow: Props["scrollOverflow"];
-};
 /**
  * The Modal content included after the header
  */
-export default class ModalContent extends React.Component<Props> {
-    static isClassOf(instance: any): boolean;
-    static defaultProps: DefaultProps;
-    static __IS_MODAL_CONTENT__: boolean;
-    render(): React.ReactNode;
+declare function ModalContent(props: Props): JSX.Element;
+declare namespace ModalContent {
+    var __IS_MODAL_CONTENT__: boolean;
+    var isComponentOf: (instance: any) => boolean;
+    var defaultProps: {
+        scrollOverflow: boolean;
+    };
 }
-export {};
+export default ModalContent;

package/dist/components/modal-footer.d.ts

@@ -19,9 +19,9 @@ type Props = {
  * </ModalFooter>
  * ```
  */
-export default class ModalFooter extends React.Component<Props> {
-    static isClassOf(instance: any): boolean;
-    static __IS_MODAL_FOOTER__: boolean;
-    render(): React.ReactNode;
+declare function ModalFooter({ children }: Props): JSX.Element;
+declare namespace ModalFooter {
+    var __IS_MODAL_FOOTER__: boolean;
+    var isComponentOf: (instance: any) => boolean;
 }
-export {};
+export default ModalFooter;

package/dist/components/modal-header.d.ts

@@ -40,9 +40,6 @@ type WithBreadcrumbs = Common & {
     breadcrumbs: React.ReactElement<React.ComponentProps<typeof Breadcrumbs>>;
 };
 type Props = Common | WithSubtitle | WithBreadcrumbs;
-type DefaultProps = {
-    light: Props["light"];
-};
 /**
  * This is a helper component that is never rendered by itself. It is always
  * pinned to the top of the dialog, is responsive using the same behavior as its
@@ -86,8 +83,10 @@ type DefaultProps = {
  *  />
  * ```
  */
-export default class ModalHeader extends React.Component<Props> {
-    static defaultProps: DefaultProps;
-    render(): React.ReactNode;
+declare function ModalHeader(props: Props): JSX.Element;
+declare namespace ModalHeader {
+    var defaultProps: {
+        light: boolean;
+    };
 }
-export {};
+export default ModalHeader;

package/dist/components/modal-panel.d.ts

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { PropsFor } from "@khanacademy/wonder-blocks-core";
 import type { StyleType } from "@khanacademy/wonder-blocks-core";
 import ModalContent from "./modal-content";
 import ModalHeader from "./modal-header";
@@ -8,15 +9,15 @@ type Props = {
      * The main contents of the ModalPanel. All other parts of the panel
      * are positioned around it.
      */
-    content: React.ReactElement<React.ComponentProps<typeof ModalContent>> | React.ReactNode;
+    content: React.ReactElement<PropsFor<typeof ModalContent>> | React.ReactNode;
     /**
      * The modal header to show at the top of the panel.
      */
-    header?: React.ReactElement<React.ComponentProps<typeof ModalHeader>> | React.ReactNode;
+    header?: React.ReactElement<PropsFor<typeof ModalHeader>> | React.ReactNode;
     /**
      * A footer to show beneath the contents.
      */
-    footer?: React.ReactElement<React.ComponentProps<typeof ModalFooter>> | React.ReactNode;
+    footer?: React.ReactElement<PropsFor<typeof ModalFooter>> | React.ReactNode;
     /**
      * When true, the close button is shown; otherwise, the close button is not shown.
      */
@@ -51,13 +52,8 @@ type Props = {
      */
     testId?: string;
 };
-type DefaultProps = {
-    closeButtonVisible: Props["closeButtonVisible"];
-    scrollOverflow: Props["scrollOverflow"];
-    light: Props["light"];
-};
 /**
- * ModalPanel is  the content container.
+ * ModalPanel is the content container.
  *
  * **Implementation notes:**
  *
@@ -76,9 +72,12 @@ type DefaultProps = {
  * </ModalDialog>
  * ```
  */
-export default class ModalPanel extends React.Component<Props> {
-    static defaultProps: DefaultProps;
-    renderMainContent(): React.ReactNode;
-    render(): React.ReactNode;
+declare function ModalPanel({ closeButtonVisible, scrollOverflow, light, content, footer, header, onClose, style, testId, }: Props): JSX.Element;
+declare namespace ModalPanel {
+    var defaultProps: {
+        closeButtonVisible: boolean;
+        scrollOverflow: boolean;
+        light: boolean;
+    };
 }
-export {};
+export default ModalPanel;

package/dist/es/index.js

@@ -1,15 +1,15 @@
 import * as React from 'react';
 import { View, IDProvider } from '@khanacademy/wonder-blocks-core';
-import { tokens, createThemeContext, ThemeSwitcherContext, useScopedTheme, useStyles } from '@khanacademy/wonder-blocks-theming';
+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 { MediaLayout } from '@khanacademy/wonder-blocks-layout';
 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';
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -26,26 +26,57 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
-const theme = {
+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: {
       small: tokens.spacing.medium_16
+    },
+    panel: {
+      closeButton: tokens.spacing.medium_16,
+      footer: tokens.spacing.xLarge_32
+    },
+    header: {
+      xsmall: tokens.spacing.xSmall_8,
+      small: tokens.spacing.medium_16,
+      medium: tokens.spacing.large_24,
+      large: tokens.spacing.xLarge_32
     }
   }
 };
 
+const theme = mergeTheme(theme$1, {
+  color: {
+    bg: {
+      inverse: tokens.color.eggplant
+    }
+  }
+});
+
 const themes = {
-  default: theme
+  default: theme$1,
+  khanmigo: theme
 };
-const ModalDialogThemeContext = createThemeContext(theme);
+const ModalDialogThemeContext = createThemeContext(theme$1);
 function ThemeModalDialog(props) {
   const currentTheme = React.useContext(ThemeSwitcherContext);
-  const theme$1 = themes[currentTheme] || theme;
+  const theme = themes[currentTheme] || theme$1;
   return React.createElement(ModalDialogThemeContext.Provider, {
-    value: theme$1
+    value: theme
   }, props.children);
 }
 
@@ -63,7 +94,7 @@ const ModalDialogCore = React.forwardRef(function ModalDialogCore(props, ref) {
   const {
     theme
   } = useScopedTheme(ModalDialogThemeContext);
-  const styles = useStyles(themedStylesFn, theme);
+  const styles = useStyles(themedStylesFn$3, theme);
   return React.createElement(View, {
     style: [styles.wrapper, style]
   }, below && React.createElement(View, {
@@ -85,8 +116,8 @@ const ModalDialog = React.forwardRef(function ModalDialog(props, ref) {
     ref: ref
   })));
 });
-const small = "@media (max-width: 767px)";
-const themedStylesFn = theme => ({
+const small$2 = "@media (max-width: 767px)";
+const themedStylesFn$3 = theme => ({
   wrapper: {
     display: "flex",
     flexDirection: "row",
@@ -94,7 +125,7 @@ const themedStylesFn = theme => ({
     width: "100%",
     height: "100%",
     position: "relative",
-    [small]: {
+    [small$2]: {
       padding: theme.spacing.dialog.small,
       flexDirection: "column"
     }
@@ -126,21 +157,18 @@ const themedStylesFn = theme => ({
 });
 ModalDialog.displayName = "ModalDialog";
 
-class ModalFooter extends React.Component {
-  static isClassOf(instance) {
-    return instance && instance.type && instance.type.__IS_MODAL_FOOTER__;
-  }
-  render() {
-    const {
-      children
-    } = this.props;
-    return React.createElement(View, {
-      style: styles$3.footer
-    }, children);
-  }
+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",
@@ -157,77 +185,72 @@ 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");
-    }
-    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)));
+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));
 }
-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
+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
     }
-  }),
-  small: StyleSheet.create({
-    header: {
-      paddingLeft: Spacing.medium_16,
-      paddingRight: Spacing.medium_16
-    },
-    title: {
-      paddingRight: Spacing.xLarge_32
+  },
+  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 FOCUSABLE_ELEMENTS$1 = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
@@ -353,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,
@@ -531,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,
@@ -565,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 {
@@ -647,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;
     }
@@ -662,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",
@@ -704,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
   }
 });