@khanacademy/wonder-blocks-popover 1.1.26 → 1.1.28

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @khanacademy/wonder-blocks-popover
 
+## 1.1.28
+
+### Patch Changes
+
+-   496119f2: Cleanup WB interdependencies
+-   Updated dependencies [496119f2]
+    -   @khanacademy/wonder-blocks-core@4.6.2
+    -   @khanacademy/wonder-blocks-modal@3.0.5
+    -   @khanacademy/wonder-blocks-icon@1.2.35
+    -   @khanacademy/wonder-blocks-icon-button@3.4.19
+    -   @khanacademy/wonder-blocks-tooltip@1.4.4
+    -   @khanacademy/wonder-blocks-typography@1.1.37
+
+## 1.1.27
+
+### Patch Changes
+
+-   @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-modal@3.0.4
+-   @khanacademy/wonder-blocks-tooltip@1.4.3
+-   @khanacademy/wonder-blocks-typography@1.1.36
+
 ## 1.1.26
 
 ### Patch Changes

package/dist/index.js

@@ -0,0 +1,761 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _extends = require('@babel/runtime/helpers/extends');
+var React = require('react');
+var ReactDOM = require('react-dom');
+var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
+var wonderBlocksTooltip = require('@khanacademy/wonder-blocks-tooltip');
+var wonderBlocksModal = require('@khanacademy/wonder-blocks-modal');
+var aphrodite = require('aphrodite');
+var Colors = require('@khanacademy/wonder-blocks-color');
+var Spacing = require('@khanacademy/wonder-blocks-spacing');
+var wonderBlocksTypography = require('@khanacademy/wonder-blocks-typography');
+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 _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
+var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
+var Colors__default = /*#__PURE__*/_interopDefaultLegacy(Colors);
+var Spacing__default = /*#__PURE__*/_interopDefaultLegacy(Spacing);
+var IconButton__default = /*#__PURE__*/_interopDefaultLegacy(IconButton);
+
+const defaultContext = {
+  close: undefined,
+  placement: "top"
+};
+var PopoverContext = React__namespace.createContext(defaultContext);
+
+class PopoverAnchor extends React__namespace.Component {
+  componentDidMount() {
+    const anchorNode = ReactDOM__namespace.findDOMNode(this);
+
+    if (anchorNode) {
+      this.props.anchorRef(anchorNode);
+    }
+  }
+
+  render() {
+    const {
+      children,
+      id,
+      onClick,
+      "aria-controls": ariaControls,
+      "aria-expanded": ariaExpanded
+    } = this.props;
+    const sharedProps = {
+      id: id,
+      "aria-controls": ariaControls,
+      "aria-expanded": ariaExpanded
+    };
+
+    if (typeof children === "function") {
+      const renderedChildren = children({
+        open: onClick
+      });
+      return React__namespace.cloneElement(renderedChildren, sharedProps);
+    } else {
+      return React__namespace.cloneElement(children, _extends__default["default"]({}, children.props, sharedProps, {
+        onClick: children.props.onClick ? e => {
+          e.stopPropagation();
+          children.props.onClick();
+          onClick();
+        } : onClick
+      }));
+    }
+  }
+
+}
+
+class PopoverDialog extends React__namespace.Component {
+  componentDidUpdate(prevProps) {
+    if (prevProps.placement !== this.props.placement) {
+      this.props.onUpdate(this.props.placement);
+    }
+  }
+
+  render() {
+    const {
+      placement,
+      children,
+      id,
+      isReferenceHidden,
+      updateBubbleRef,
+      updateTailRef,
+      tailOffset,
+      style,
+      "aria-describedby": ariaDescribedby
+    } = this.props;
+    const contentProps = children.props;
+    const color = contentProps.emphasized ? "blue" : contentProps.color;
+    return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(wonderBlocksCore.View, {
+      "aria-describedby": ariaDescribedby,
+      id: id,
+      role: "dialog",
+      ref: updateBubbleRef,
+      "data-placement": placement,
+      style: [isReferenceHidden && styles$2.hide, styles$2[`content-${placement}`], style]
+    }, children, React__namespace.createElement(wonderBlocksTooltip.TooltipTail, {
+      color: color,
+      updateRef: updateTailRef,
+      placement: placement,
+      offset: tailOffset
+    })));
+  }
+
+}
+const styles$2 = aphrodite.StyleSheet.create({
+  hide: {
+    pointerEvents: "none",
+    opacity: 0,
+    backgroundColor: "transparent",
+    color: "transparent"
+  },
+  "content-top": {
+    flexDirection: "column"
+  },
+  "content-right": {
+    flexDirection: "row-reverse"
+  },
+  "content-bottom": {
+    flexDirection: "column-reverse"
+  },
+  "content-left": {
+    flexDirection: "row"
+  }
+});
+
+const FOCUSABLE_ELEMENTS = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+function findFocusableNodes(root) {
+  return Array.from(root.querySelectorAll(FOCUSABLE_ELEMENTS));
+}
+
+class InitialFocus extends React__namespace.Component {
+  constructor(...args) {
+    super(...args);
+
+    this.setInitialFocusableElement = node => {
+      const firstFocusableElement = this.maybeGetInitialFocusElement(node) || this.maybeGetFirstFocusableElement(node) || node;
+
+      if (firstFocusableElement === node) {
+        node.tabIndex = -1;
+      }
+
+      setTimeout(() => {
+        firstFocusableElement.focus();
+      }, 0);
+    };
+  }
+
+  componentDidMount() {
+    const node = ReactDOM__namespace.findDOMNode(this);
+
+    if (!node) {
+      return;
+    }
+
+    this.setInitialFocusableElement(node);
+  }
+
+  maybeGetInitialFocusElement(node) {
+    const {
+      initialFocusId
+    } = this.props;
+
+    if (!initialFocusId) {
+      return null;
+    }
+
+    return node.querySelector(`#${initialFocusId}`);
+  }
+
+  maybeGetFirstFocusableElement(node) {
+    const focusableElements = findFocusableNodes(node);
+
+    if (!focusableElements.length) {
+      return null;
+    }
+
+    return focusableElements[0];
+  }
+
+  render() {
+    return this.props.children;
+  }
+
+}
+
+class FocusManager extends React__namespace.Component {
+  constructor(...args) {
+    super(...args);
+    this.focusableElementsInPopover = [];
+
+    this.addEventListeners = () => {
+      const {
+        anchorElement
+      } = this.props;
+
+      if (anchorElement) {
+        anchorElement.addEventListener("keydown", this.handleKeydownPreviousFocusableElement, true);
+      }
+
+      this.nextElementAfterPopover = this.getNextFocusableElement();
+
+      if (this.nextElementAfterPopover) {
+        this.nextElementAfterPopover.addEventListener("keydown", this.handleKeydownNextFocusableElement, true);
+      }
+    };
+
+    this.getNextFocusableElement = () => {
+      const {
+        anchorElement
+      } = this.props;
+
+      if (!anchorElement || this.nextElementAfterPopover) {
+        return;
+      }
+
+      const focusableElements = findFocusableNodes(document);
+      const anchorIndex = focusableElements.indexOf(anchorElement);
+
+      if (anchorIndex >= 0) {
+        const nextElementIndex = anchorIndex < focusableElements.length - 1 ? anchorIndex + 1 : 0;
+        return focusableElements[nextElementIndex];
+      }
+
+      return;
+    };
+
+    this.getComponentRootNode = node => {
+      if (!node) {
+        return;
+      }
+
+      const rootNode = ReactDOM__namespace.findDOMNode(node);
+
+      if (!rootNode) {
+        throw new Error("Assertion error: root node should exist after mount");
+      }
+
+      this.rootNode = rootNode;
+      this.focusableElementsInPopover = findFocusableNodes(this.rootNode);
+    };
+
+    this.handleFocusPreviousFocusableElement = () => {
+      if (this.props.anchorElement) {
+        this.props.anchorElement.focus();
+      }
+    };
+
+    this.handleFocusNextFocusableElement = () => {
+      if (this.nextElementAfterPopover) {
+        this.nextElementAfterPopover.focus();
+      }
+    };
+
+    this.handleKeydownPreviousFocusableElement = e => {
+      if (e.key === "Tab" && !e.shiftKey) {
+        e.preventDefault();
+        this.focusableElementsInPopover[0].focus();
+      }
+    };
+
+    this.handleKeydownNextFocusableElement = e => {
+      if (e.key === "Tab" && e.shiftKey) {
+        e.preventDefault();
+        const lastElementIndex = this.focusableElementsInPopover.length - 1;
+        this.focusableElementsInPopover[lastElementIndex].focus();
+      }
+    };
+  }
+
+  componentDidMount() {
+    this.addEventListeners();
+  }
+
+  componentDidUpdate() {
+    this.addEventListeners();
+  }
+
+  componentWillUnmount() {
+    const {
+      anchorElement
+    } = this.props;
+
+    if (anchorElement) {
+      setTimeout(() => anchorElement.focus(), 0);
+      anchorElement.removeEventListener("keydown", this.handleKeydownPreviousFocusableElement, true);
+    }
+
+    if (this.nextElementAfterPopover) {
+      this.nextElementAfterPopover.removeEventListener("keydown", this.handleKeydownNextFocusableElement, true);
+    }
+  }
+
+  render() {
+    const {
+      children
+    } = this.props;
+    return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement("div", {
+      tabIndex: "0",
+      onFocus: this.handleFocusPreviousFocusableElement,
+      style: {
+        position: "fixed"
+      }
+    }), React__namespace.createElement("div", {
+      ref: this.getComponentRootNode
+    }, React__namespace.createElement(InitialFocus, {
+      initialFocusId: this.props.initialFocusId
+    }, children)), React__namespace.createElement("div", {
+      tabIndex: "0",
+      onFocus: this.handleFocusNextFocusableElement,
+      style: {
+        position: "fixed"
+      }
+    }));
+  }
+
+}
+
+class PopoverEventListener extends React__namespace.Component {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      isFirstClick: true
+    };
+
+    this._handleKeyup = e => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        e.stopPropagation();
+        this.props.onClose();
+      }
+    };
+
+    this._handleClick = e => {
+      var _this$props$contentRe;
+
+      if (this.state.isFirstClick) {
+        this.setState({
+          isFirstClick: false
+        });
+        return;
+      }
+
+      const node = ReactDOM__default["default"].findDOMNode((_this$props$contentRe = this.props.contentRef) == null ? void 0 : _this$props$contentRe.current);
+
+      if (node && !node.contains(e.target)) {
+        e.preventDefault();
+        e.stopPropagation();
+        this.props.onClose();
+      }
+    };
+  }
+
+  componentDidMount() {
+    window.addEventListener("keyup", this._handleKeyup);
+    window.addEventListener("click", this._handleClick);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener("keyup", this._handleKeyup);
+    window.removeEventListener("click", this._handleClick);
+  }
+
+  render() {
+    return null;
+  }
+
+}
+
+class Popover extends React__namespace.Component {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      opened: !!this.props.opened,
+      anchorElement: null,
+      placement: this.props.placement
+    };
+    this.contentRef = React__namespace.createRef();
+
+    this.handleClose = () => {
+      this.setState({
+        opened: false
+      }, () => {
+        this.props.onClose && this.props.onClose();
+      });
+    };
+
+    this.handleOpen = () => {
+      if (this.props.dismissEnabled && this.state.opened) {
+        this.setState({
+          opened: false
+        });
+      } else {
+        this.setState({
+          opened: true
+        });
+      }
+    };
+
+    this.updateRef = ref => {
+      const actualRef = ref && ReactDOM__default["default"].findDOMNode(ref);
+
+      if (actualRef && this.state.anchorElement !== actualRef) {
+        this.setState({
+          anchorElement: actualRef
+        });
+      }
+    };
+  }
+
+  static getDerivedStateFromProps(props, state) {
+    return {
+      opened: typeof props.opened === "boolean" ? props.opened : state.opened
+    };
+  }
+
+  renderContent() {
+    const {
+      content
+    } = this.props;
+    return React__namespace.cloneElement(typeof content === "function" ? content({
+      close: this.handleClose
+    }) : content, {
+      ref: this.contentRef
+    });
+  }
+
+  renderPopper(uniqueId) {
+    const {
+      initialFocusId,
+      placement
+    } = this.props;
+    const {
+      anchorElement
+    } = this.state;
+    return React__namespace.createElement(FocusManager, {
+      anchorElement: anchorElement,
+      initialFocusId: initialFocusId
+    }, React__namespace.createElement(wonderBlocksTooltip.TooltipPopper, {
+      anchorElement: anchorElement,
+      placement: placement
+    }, props => React__namespace.createElement(PopoverDialog, _extends__default["default"]({}, props, {
+      "aria-describedby": `${uniqueId}-anchor`,
+      id: uniqueId,
+      onUpdate: placement => this.setState({
+        placement
+      })
+    }), this.renderContent())));
+  }
+
+  getHost() {
+    return wonderBlocksModal.maybeGetPortalMountedModalHostElement(this.state.anchorElement) || document.body;
+  }
+
+  render() {
+    const {
+      children,
+      dismissEnabled,
+      id
+    } = this.props;
+    const {
+      opened,
+      placement
+    } = this.state;
+    const popperHost = this.getHost();
+    return React__namespace.createElement(PopoverContext.Provider, {
+      value: {
+        close: this.handleClose,
+        placement: placement
+      }
+    }, React__namespace.createElement(wonderBlocksCore.IDProvider, {
+      id: id,
+      scope: "popover"
+    }, uniqueId => React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(PopoverAnchor, {
+      anchorRef: this.updateRef,
+      id: `${uniqueId}-anchor`,
+      "aria-controls": uniqueId,
+      "aria-expanded": opened ? "true" : "false",
+      onClick: this.handleOpen
+    }, children), popperHost && opened && ReactDOM__default["default"].createPortal(this.renderPopper(uniqueId), popperHost))), dismissEnabled && opened && React__namespace.createElement(PopoverEventListener, {
+      onClose: this.handleClose,
+      contentRef: this.contentRef
+    }));
+  }
+
+}
+Popover.defaultProps = {
+  placement: "top"
+};
+
+class CloseButton extends React__namespace.Component {
+  render() {
+    const {
+      light,
+      "aria-label": ariaLabel,
+      style,
+      testId
+    } = this.props;
+    return React__namespace.createElement(PopoverContext.Consumer, null, ({
+      close
+    }) => {
+      return React__namespace.createElement(IconButton__default["default"], {
+        icon: wonderBlocksIcon.icons.dismiss,
+        "aria-label": ariaLabel,
+        onClick: close,
+        kind: light ? "primary" : "tertiary",
+        light: light,
+        style: style,
+        testId: testId
+      });
+    });
+  }
+
+}
+CloseButton.defaultProps = {
+  light: true,
+  "aria-label": "Close Popover"
+};
+
+class PopoverContentCore extends React__namespace.Component {
+  render() {
+    const {
+      children,
+      closeButtonLight,
+      closeButtonLabel,
+      closeButtonVisible,
+      color,
+      style,
+      testId
+    } = this.props;
+    return React__namespace.createElement(wonderBlocksCore.View, {
+      testId: testId,
+      style: [styles$1.content, color !== "white" && styles$1[color], style]
+    }, closeButtonVisible && React__namespace.createElement(CloseButton, {
+      "aria-label": closeButtonLabel,
+      light: closeButtonLight || color !== "white",
+      style: styles$1.closeButton,
+      testId: `${testId || "popover"}-close-btn`
+    }), children);
+  }
+
+}
+PopoverContentCore.defaultProps = {
+  color: "white",
+  closeButtonLight: false,
+  closeButtonVisible: false
+};
+const styles$1 = aphrodite.StyleSheet.create({
+  content: {
+    borderRadius: Spacing__default["default"].xxxSmall_4,
+    border: `solid 1px ${Colors__default["default"].offBlack16}`,
+    backgroundColor: Colors__default["default"].white,
+    boxShadow: `0 ${Spacing__default["default"].xSmall_8}px ${Spacing__default["default"].xSmall_8}px 0 ${Colors__default["default"].offBlack8}`,
+    margin: 0,
+    maxWidth: Spacing__default["default"].medium_16 * 18,
+    padding: Spacing__default["default"].large_24,
+    overflow: "hidden",
+    justifyContent: "center"
+  },
+  blue: {
+    backgroundColor: Colors__default["default"].blue,
+    color: Colors__default["default"].white
+  },
+  darkBlue: {
+    backgroundColor: Colors__default["default"].darkBlue,
+    color: Colors__default["default"].white
+  },
+  closeButton: {
+    position: "absolute",
+    right: Spacing__default["default"].xSmall_8,
+    top: Spacing__default["default"].xSmall_8,
+    zIndex: 1
+  }
+});
+
+const StyledImage = wonderBlocksCore.addStyle("img");
+class PopoverContent extends React__namespace.Component {
+  constructor(...args) {
+    super(...args);
+
+    this.maybeRenderImage = ({
+      placement
+    }) => {
+      const {
+        image
+      } = this.props;
+
+      if (!image) {
+        return null;
+      }
+
+      return React__namespace.createElement(wonderBlocksCore.View, {
+        style: [styles.image, placement === "bottom" && styles.imageToBottom]
+      }, image);
+    };
+
+    this.maybeRenderIcon = () => {
+      const {
+        icon
+      } = this.props;
+
+      if (!icon) {
+        return null;
+      }
+
+      return React__namespace.createElement(wonderBlocksCore.View, {
+        style: styles.iconContainer
+      }, typeof icon !== "string" ? icon : React__namespace.createElement(StyledImage, {
+        src: icon,
+        style: styles.icon
+      }));
+    };
+
+    this.maybeRenderActions = close => {
+      const {
+        actions
+      } = this.props;
+
+      if (!actions) {
+        return null;
+      }
+
+      return React__namespace.createElement(wonderBlocksCore.View, {
+        style: styles.actions
+      }, typeof actions === "function" ? actions({
+        close: close
+      }) : actions);
+    };
+  }
+
+  componentDidMount() {
+    const {
+      icon,
+      image
+    } = this.props;
+
+    if (image && icon) {
+      throw new Error("'image' and 'icon' cannot be used at the same time. You can fix this by either removing 'image' or 'icon' from your instance.");
+    }
+  }
+
+  validateProps({
+    placement
+  }) {
+    if (this.props.image && (placement === "left" || placement === "right")) {
+      throw new Error("'image' can only be vertically placed. You can fix this by either changing `placement` to `top` or `bottom` or removing the `image` prop inside `content`.");
+    }
+  }
+
+  render() {
+    const {
+      closeButtonLabel,
+      closeButtonVisible,
+      content,
+      emphasized = undefined,
+      icon,
+      image,
+      style,
+      title,
+      testId
+    } = this.props;
+    return React__namespace.createElement(PopoverContext.Consumer, null, ({
+      close,
+      placement
+    }) => {
+      this.validateProps({
+        close,
+        placement
+      });
+      return React__namespace.createElement(PopoverContentCore, {
+        color: emphasized ? "blue" : "white",
+        closeButtonLight: image && placement === "top",
+        closeButtonLabel: closeButtonLabel,
+        closeButtonVisible: closeButtonVisible,
+        style: style,
+        testId: testId
+      }, React__namespace.createElement(wonderBlocksCore.View, {
+        style: !!icon && styles.withIcon
+      }, this.maybeRenderImage({
+        placement
+      }), this.maybeRenderIcon(), React__namespace.createElement(wonderBlocksCore.View, {
+        style: styles.text
+      }, React__namespace.createElement(wonderBlocksTypography.HeadingSmall, {
+        style: styles.title
+      }, title), React__namespace.createElement(wonderBlocksTypography.Body, null, content))), this.maybeRenderActions(close));
+    });
+  }
+
+}
+PopoverContent.defaultProps = {
+  closeButtonVisible: false
+};
+const styles = aphrodite.StyleSheet.create({
+  actions: {
+    marginTop: Spacing__default["default"].large_24,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "flex-end"
+  },
+  text: {
+    justifyContent: "center"
+  },
+  title: {
+    marginBottom: Spacing__default["default"].xSmall_8
+  },
+  iconContainer: {
+    alignItems: "center",
+    justifyContent: "center",
+    height: Spacing__default["default"].xxxLarge_64,
+    width: Spacing__default["default"].xxxLarge_64,
+    minWidth: Spacing__default["default"].xxxLarge_64,
+    marginRight: Spacing__default["default"].medium_16,
+    overflow: "hidden"
+  },
+  icon: {
+    width: "100%"
+  },
+  withIcon: {
+    flexDirection: "row"
+  },
+  image: {
+    marginBottom: Spacing__default["default"].large_24,
+    marginLeft: -Spacing__default["default"].large_24,
+    marginRight: -Spacing__default["default"].large_24,
+    marginTop: -Spacing__default["default"].large_24,
+    width: `calc(100% + ${Spacing__default["default"].large_24 * 2}px)`
+  },
+  imageToBottom: {
+    marginBottom: -Spacing__default["default"].large_24,
+    marginTop: Spacing__default["default"].large_24,
+    order: 1
+  }
+});
+
+exports.Popover = Popover;
+exports.PopoverContent = PopoverContent;
+exports.PopoverContentCore = PopoverContentCore;

package/dist/index.js.flow

@@ -0,0 +1,2 @@
+// @flow
+export * from "../src/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-popover",
-  "version": "1.1.26",
+  "version": "1.1.28",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -17,14 +17,13 @@
   "dependencies": {
     "@babel/runtime": "^7.18.6",
     "@khanacademy/wonder-blocks-color": "^1.2.0",
-    "@khanacademy/wonder-blocks-core": "^4.6.0",
-    "@khanacademy/wonder-blocks-icon": "^1.2.33",
-    "@khanacademy/wonder-blocks-icon-button": "^3.4.17",
-    "@khanacademy/wonder-blocks-layout": "^1.4.13",
-    "@khanacademy/wonder-blocks-modal": "^3.0.3",
+    "@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-modal": "^3.0.5",
     "@khanacademy/wonder-blocks-spacing": "^3.0.5",
-    "@khanacademy/wonder-blocks-tooltip": "^1.4.2",
-    "@khanacademy/wonder-blocks-typography": "^1.1.35"
+    "@khanacademy/wonder-blocks-tooltip": "^1.4.4",
+    "@khanacademy/wonder-blocks-typography": "^1.1.37"
   },
   "peerDependencies": {
     "@popperjs/core": "^2.10.1",
@@ -34,6 +33,6 @@
     "react-popper": "^2.0.0"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.5.0"
+    "wb-dev-build-settings": "^0.7.0"
   }
-}
+}