@khanacademy/perseus-editor 5.2.2 → 5.2.4

package/dist/index.js

@@ -6,12 +6,12 @@ var perseusCore = require('@khanacademy/perseus-core');
 var perseus = require('@khanacademy/perseus');
 var React = require('react');
 var _ = require('underscore');
-var PropTypes = require('prop-types');
 var createReactClass = require('create-react-class');
 var Clickable = require('@khanacademy/wonder-blocks-clickable');
-var Color = require('@khanacademy/wonder-blocks-color');
+var wonderBlocksTokens = require('@khanacademy/wonder-blocks-tokens');
 var aphrodite = require('aphrodite');
 var $ = require('jquery');
+var PropTypes = require('prop-types');
 var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
 var wonderBlocksIcon = require('@khanacademy/wonder-blocks-icon');
 var caretRight = require('@phosphor-icons/core/bold/caret-right-bold.svg');
@@ -23,9 +23,7 @@ var wonderStuffCore = require('@khanacademy/wonder-stuff-core');
 var mathInput = require('@khanacademy/math-input');
 var wonderBlocksDropdown = require('@khanacademy/wonder-blocks-dropdown');
 var wonderBlocksForm = require('@khanacademy/wonder-blocks-form');
-var Spacing = require('@khanacademy/wonder-blocks-spacing');
 var wonderBlocksTypography = require('@khanacademy/wonder-blocks-typography');
-var wonderBlocksTokens = require('@khanacademy/wonder-blocks-tokens');
 var IconButton = require('@khanacademy/wonder-blocks-icon-button');
 var trashIcon = require('@phosphor-icons/core/bold/trash-bold.svg');
 var Button = require('@khanacademy/wonder-blocks-button');
@@ -53,16 +51,14 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var ___default = /*#__PURE__*/_interopDefaultLegacy(_);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var createReactClass__default = /*#__PURE__*/_interopDefaultLegacy(createReactClass);
 var Clickable__default = /*#__PURE__*/_interopDefaultLegacy(Clickable);
-var Color__default = /*#__PURE__*/_interopDefaultLegacy(Color);
 var $__default = /*#__PURE__*/_interopDefaultLegacy($);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var caretRight__default = /*#__PURE__*/_interopDefaultLegacy(caretRight);
 var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 var KAS__namespace = /*#__PURE__*/_interopNamespace(KAS);
-var Spacing__default = /*#__PURE__*/_interopDefaultLegacy(Spacing);
 var IconButton__default = /*#__PURE__*/_interopDefaultLegacy(IconButton);
 var trashIcon__default = /*#__PURE__*/_interopDefaultLegacy(trashIcon);
 var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
@@ -70,7 +66,7 @@ var i18n__namespace = /*#__PURE__*/_interopNamespace(i18n$1);
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus-editor";
-const libVersion = "5.2.2";
+const libVersion = "5.2.4";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -108,48 +104,49 @@ const SCREEN_SIZES = {
     framedWidth: 688
   }
 };
-class DeviceFramer extends React__namespace.Component {
-  static propTypes = {
-    children: PropTypes__default["default"].element.isRequired,
-    deviceType: PropTypes__default["default"].oneOf([perseus.constants.devices.PHONE, perseus.constants.devices.TABLET, perseus.constants.devices.DESKTOP]).isRequired,
-    // TODO(kevinb) rename to variableHeight
-    nochrome: PropTypes__default["default"].bool
-  };
-  render() {
-    const deviceType = this.props.deviceType;
-    if (this.props.nochrome) {
-      // Render content inside a variable height iframe.  Used on the
-      // "edit" table of the content editor. In this mode, PerseusFrame
-      // will draw the border and reserve space on the right for
-      // lint indicators.
-      return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", {
-        key: "screen",
-        style: {
-          width: SCREEN_SIZES[deviceType].framedWidth + 2 * perseus.constants.perseusFrameBorderWidth + perseus.constants.lintGutterWidth
-        }
-      }, /*#__PURE__*/React__namespace.createElement("div", null, this.props.children)));
-    }
-    const scale = SCREEN_SIZES[deviceType].framedWidth / SCREEN_SIZES[deviceType].width;
-
-    // In this mode we draw our own border and don't reserve
-    // space for a lint gutter.
-    const screenStyle = {
-      backgroundColor: "white",
-      color: "black",
-      textAlign: "left",
-      width: SCREEN_SIZES[deviceType].width,
-      height: SCREEN_SIZES[deviceType].height,
-      border: "solid 1px #CCC",
-      margin: 8,
-      zoom: scale
-    };
+const DeviceFramer = _ref => {
+  let {
+    children,
+    deviceType = "phone",
+    nochrome
+  } = _ref;
+  const scale = React__namespace.useMemo(() => SCREEN_SIZES[deviceType].framedWidth / SCREEN_SIZES[deviceType].width, [deviceType]);
+
+  // In this mode we draw our own border and don't reserve
+  // space for a lint gutter.
+  const withChromeStyle = React__namespace.useMemo(() => ({
+    backgroundColor: "white",
+    overflow: "scroll",
+    color: "black",
+    textAlign: "left",
+    width: SCREEN_SIZES[deviceType].width,
+    height: SCREEN_SIZES[deviceType].height,
+    border: "solid 1px #CCC",
+    margin: 8,
+    zoom: scale
+  }), [deviceType, scale]);
+  if (nochrome) {
+    // Render content inside a variable height iframe.  Used on the
+    // "edit" table of the content editor. In this mode, PerseusFrame
+    // will draw the border and reserve space on the right for
+    // lint indicators.
     return /*#__PURE__*/React__namespace.createElement("div", {
       key: "screen",
-      className: "screen",
-      style: screenStyle
-    }, this.props.children);
+      style: {
+        overflow: "scroll",
+        width: SCREEN_SIZES[deviceType].framedWidth + 2 * perseus.constants.perseusFrameBorderWidth + perseus.constants.lintGutterWidth
+      }
+    }, /*#__PURE__*/React__namespace.createElement("div", null, children));
   }
-}
+  return /*#__PURE__*/React__namespace.createElement("div", {
+    key: "screen",
+    className: "screen",
+    style: {
+      ...withChromeStyle,
+      textAlign: "start"
+    }
+  }, children);
+};
 
 /* eslint-disable @babel/no-invalid-this */
 const JsonEditor = createReactClass__default["default"]({
@@ -272,7 +269,7 @@ class SectionControlButton extends React__namespace.Component {
 }
 const styles$q = aphrodite.StyleSheet.create({
   button: {
-    backgroundColor: Color__default["default"].gold,
+    backgroundColor: wonderBlocksTokens.color.gold,
     margin: 2,
     paddingRight: 10,
     paddingLeft: 10,
@@ -21001,7 +20998,8 @@ class Editor extends React__namespace.Component {
     }
     return /*#__PURE__*/React__namespace.createElement(WidgetEditor, _extends({
       ref: id,
-      id: id
+      id: id,
+      key: id
       // eslint-disable-next-line react/jsx-no-bind
       ,
       onChange: this._handleWidgetEditorChange.bind(this, id)
@@ -22108,42 +22106,30 @@ const {
   iconMobilePhone,
   iconTablet
 } = perseus.icons;
-class ViewportResizer extends React__namespace.Component {
-  static propTypes = {
-    // The current device type that is selected.
-    deviceType: PropTypes__default["default"].string.isRequired,
-    // A callback that is passed (width, height) as the dimensions of the
-    // viewport to resize to.
-    onViewportSizeChanged: PropTypes__default["default"].func.isRequired
-  };
-  handleChange = value => {
-    this.props.onViewportSizeChanged(value);
-  };
-  render() {
-    const phoneButtonContents = /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(InlineIcon$8, iconMobilePhone), " Phone");
-    const tabletButtonContents = /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(InlineIcon$8, iconTablet), " Tablet");
-    const desktopButtonContents = /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(InlineIcon$8, iconDesktop), " Desktop");
-
-    // TODO(david): Allow input of custom viewport sizes.
-    return /*#__PURE__*/React__namespace.createElement("span", {
-      className: "viewport-resizer"
-    }, "Viewport:", " ", /*#__PURE__*/React__namespace.createElement(ButtonGroup$5, {
-      value: this.props.deviceType,
-      allowEmpty: false,
-      buttons: [{
-        value: devices.PHONE,
-        content: phoneButtonContents
-      }, {
-        value: devices.TABLET,
-        content: tabletButtonContents
-      }, {
-        value: devices.DESKTOP,
-        content: desktopButtonContents
-      }],
-      onChange: this.handleChange
-    }));
-  }
-}
+const ViewportResizer = props => {
+  const phoneButtonContents = /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(InlineIcon$8, iconMobilePhone), " Phone");
+  const tabletButtonContents = /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(InlineIcon$8, iconTablet), " Tablet");
+  const desktopButtonContents = /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(InlineIcon$8, iconDesktop), " Desktop");
+
+  // TODO(david): Allow input of custom viewport sizes.
+  return /*#__PURE__*/React__namespace.createElement("span", {
+    className: "viewport-resizer"
+  }, "Viewport:", " ", /*#__PURE__*/React__namespace.createElement(ButtonGroup$5, {
+    value: props.deviceType,
+    allowEmpty: false,
+    buttons: [{
+      value: devices.PHONE,
+      content: phoneButtonContents
+    }, {
+      value: devices.TABLET,
+      content: tabletButtonContents
+    }, {
+      value: devices.DESKTOP,
+      content: desktopButtonContents
+    }],
+    onChange: props.onViewportSizeChanged
+  }));
+};
 
 /*
 Software License Agreement (BSD License)
@@ -26690,6 +26676,7 @@ class ExpressionEditor extends React__namespace.Component {
         widgetId: this.props.widgetId + "-" + ans.key
       };
       return lens(ans).merge([], {
+        key,
         draggable: true,
         onChange: props => this.updateForm(Number.parseInt(ans.key ?? ""), props),
         onDelete: () => this.handleRemoveForm(key),
@@ -27318,10 +27305,12 @@ const GraphSettings = createReactClass__default["default"]({
     }
   },
   renderLabelChoices: function (choices) {
-    return ___default["default"].map(choices, function (nameAndValue) {
+    return ___default["default"].map(choices, function (_ref) {
+      let [name, value] = _ref;
       return /*#__PURE__*/React__namespace.createElement("option", {
-        value: nameAndValue[1]
-      }, nameAndValue[0]);
+        key: value,
+        value: value
+      }, name);
     });
   },
   validRange: function (range) {
@@ -27681,6 +27670,7 @@ const GraphSettings = createReactClass__default["default"]({
       value: this.props.rulerTicks
     }, ___default["default"].map([1, 2, 4, 8, 10, 16], function (n) {
       return /*#__PURE__*/React__namespace.createElement("option", {
+        key: n,
         value: n
       }, n);
     })))))));
@@ -28479,9 +28469,9 @@ const styles$k = aphrodite.StyleSheet.create({
     display: "inline-block",
     borderStyle: "solid",
     borderWidth: 1,
-    borderColor: Color__default["default"].offBlack50,
+    borderColor: wonderBlocksTokens.color.offBlack50,
     borderRadius: 3,
-    background: Color__default["default"].white
+    background: wonderBlocksTokens.color.white
   }
 });
 
@@ -29566,6 +29556,7 @@ const GraphPointsCountSelector = _ref => {
     value: `${n}`,
     label: `${n} point${n > 1 ? "s" : ""}`
   })), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
+    key: "unlimited",
     value: UNLIMITED,
     label: "unlimited"
   })]);
@@ -30742,6 +30733,7 @@ class InteractiveGraphEditor extends React__namespace.Component {
       },
       style: styles$a.singleSelectShort
     }, [...POLYGON_SIDES, /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
+      key: "unlimited",
       value: "unlimited",
       label: "unlimited sides"
     })])), /*#__PURE__*/React__namespace.createElement(LabeledRow, {
@@ -30872,7 +30864,7 @@ class InteractiveGraphEditor extends React__namespace.Component {
       style: {
         fontSize: 12,
         backgroundColor: "#eee",
-        paddingInline: Spacing__default["default"].xxSmall_6,
+        paddingInline: wonderBlocksTokens.spacing.xxSmall_6,
         borderColor: "#ccc",
         borderStyle: "solid",
         borderWidth: 1
@@ -30927,7 +30919,7 @@ const styles$a = aphrodite.StyleSheet.create({
   },
   row: {
     flexDirection: "row",
-    marginTop: Spacing__default["default"].xSmall_8,
+    marginTop: wonderBlocksTokens.spacing.xSmall_8,
     alignItems: "center"
   }
 });
@@ -31000,7 +30992,7 @@ class FormWrappedTextField extends React__namespace.Component {
     if (color) {
       extraStyles.color = color;
     }
-    const borderColorStyle = focused ? focusBorderColor || Color__default["default"].blue : borderColor || Color__default["default"].offBlack16;
+    const borderColorStyle = focused ? focusBorderColor || wonderBlocksTokens.color.blue : borderColor || wonderBlocksTokens.color.offBlack16;
     extraStyles.border = `1px solid ${borderColorStyle}`;
     const wrappedIcon = icon && /*#__PURE__*/React__namespace.createElement("span", {
       className: aphrodite.css(styles$9.icon)