@khanacademy/perseus-editor 17.8.1 → 17.9.0

package/dist/index.js

@@ -145,7 +145,7 @@ const addLibraryVersionToPerseusDebug = (libraryName, libraryVersion) => {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus-editor";
-const libVersion = "17.8.1";
+const libVersion = "17.9.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const devices = {
@@ -20885,12 +20885,13 @@ class WidgetSelect extends React__namespace.Component {
     const addWidgetString = "Add a widget\u2026";
     return /*#__PURE__*/React__namespace.createElement("select", {
       value: "",
-      onChange: this.handleChange
+      onChange: this.handleChange,
+      "data-testid": "editor__widget-select"
     }, /*#__PURE__*/React__namespace.createElement("option", {
       value: ""
     }, addWidgetString), /*#__PURE__*/React__namespace.createElement("option", {
       disabled: true
-    }, "--"), ___default["default"].map(orderedWidgetNames, name => {
+    }, "--"), orderedWidgetNames.map(name => {
       return /*#__PURE__*/React__namespace.createElement("option", {
         key: name,
         value: name
@@ -25250,17 +25251,25 @@ class ExpressionEditor extends React__namespace.Component {
       return perseus.Changeable.change.apply(_this, args);
     };
   })();
-  serialize = () => {
-    const formSerializables = ["value", "form", "simplify", "considered",
-    // it's a little weird to serialize the react key, but saves some
-    // effort reconstructing them when this item is loaded later.
-    "key"];
-    const serializables = ["answerForms", "buttonSets", "functions", "times", "visibleLabel", "ariaLabel"];
-    const answerForms = this.props.answerForms.map(form => {
-      return ___default["default"](form).pick(formSerializables);
-    });
-    return lens(this.props).set(["answerForms"], answerForms).mod([], props => ___default["default"](props).pick(serializables)).freeze();
-  };
+  serialize() {
+    const {
+      answerForms,
+      buttonSets,
+      functions,
+      times,
+      visibleLabel,
+      ariaLabel
+    } = this.props;
+    return {
+      answerForms,
+      buttonSets,
+      functions,
+      times,
+      visibleLabel,
+      ariaLabel,
+      extraKeys: perseusCore.deriveExtraKeys(this.props)
+    };
+  }
   getSaveWarnings = () => {
     const issues = [];
     if (this.props.answerForms.length === 0) {
@@ -25329,12 +25338,27 @@ class ExpressionEditor extends React__namespace.Component {
 
   // This function is designed to update the answerForm property
   // with new data. This function should not be used to update any
-  // other properties within ExpressionEditor.
+  // other properties within ExpressionEditor except extraKeys
+  // which is derived from answerForms
   updateAnswerForm(i, props) {
     const answerForms = lens(this.props.answerForms).merge([i], props).freeze();
-    this.change({
+
+    // deriveExtraKeys defaults to using the `extraKeys` it was given
+    // which in most case is what we want, but is not what we want
+    // in the editing experience because we should recalculate them
+    // when answers change
+    const {
+      extraKeys: _,
+      ...restProps
+    } = this.props;
+    const extraKeys = perseusCore.deriveExtraKeys({
+      ...restProps,
       answerForms
     });
+    this.change({
+      answerForms,
+      extraKeys
+    });
   }
   handleReorder = components => {
     const answerForms = components.map(component => {
@@ -36402,19 +36426,11 @@ class PythonProgramEditor extends React__namespace.Component {
   }
 }
 
-/* eslint-disable jsx-a11y/anchor-is-valid, react/forbid-prop-types */
+/* eslint-disable jsx-a11y/anchor-is-valid */
 const {
   InlineIcon
 } = perseus.components;
 class ChoiceEditor extends React__namespace.Component {
-  static propTypes = {
-    apiOptions: perseus.ApiOptions.propTypes,
-    choice: PropTypes__default["default"].object,
-    showDelete: PropTypes__default["default"].bool,
-    onClueChange: PropTypes__default["default"].func,
-    onContentChange: PropTypes__default["default"].func,
-    onDelete: PropTypes__default["default"].func
-  };
   render() {
     const checkedClass = this.props.choice.correct ? "correct" : "incorrect";
     let placeholder = "Type a choice here...";
@@ -36462,25 +36478,6 @@ class ChoiceEditor extends React__namespace.Component {
   }
 }
 class RadioEditor extends React__namespace.Component {
-  static propTypes = {
-    ...perseus.Changeable.propTypes,
-    apiOptions: perseus.ApiOptions.propTypes,
-    choices: PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({
-      content: PropTypes__default["default"].string,
-      clue: PropTypes__default["default"].string,
-      correct: PropTypes__default["default"].bool
-    })),
-    displayCount: PropTypes__default["default"].number,
-    randomize: PropTypes__default["default"].bool,
-    hasNoneOfTheAbove: PropTypes__default["default"].bool,
-    multipleSelect: PropTypes__default["default"].bool,
-    countChoices: PropTypes__default["default"].bool,
-    // TODO(kevinb): DEPRECATED: This is be used to force deselectEnabled
-    // behavior on mobile but not on desktop.  When enabled, the user can
-    // deselect a radio input by tapping on it again.
-    deselectEnabled: PropTypes__default["default"].bool,
-    static: PropTypes__default["default"].bool
-  };
   static widgetName = "radio";
   static defaultProps = perseusCore.radioLogic.defaultWidgetOptions;
   change = (() => {
@@ -36524,14 +36521,19 @@ class RadioEditor extends React__namespace.Component {
     let {
       checked
     } = _ref;
-    const choices = ___default["default"].map(this.props.choices, (choice, i) => {
-      return ___default["default"].extend({}, choice, {
+    const choices = this.props.choices.map((choice, i) => {
+      return {
+        ...choice,
         correct: checked[i],
         content: choice.isNoneOfTheAbove && !checked[i] ? "" : choice.content
-      });
+      };
     });
     this.props.onChange({
-      choices: choices
+      choices: choices,
+      numCorrect: perseusCore.deriveNumCorrect({
+        ...this.props,
+        choices
+      })
     });
   };
   onContentChange = (choiceIndex, newContent) => {
@@ -36543,7 +36545,7 @@ class RadioEditor extends React__namespace.Component {
       choices: choices
     });
   };
-  onClueChange = (choiceIndex, newClue) => {
+  onClueChange(choiceIndex, newClue) {
     const choices = this.props.choices.slice();
     choices[choiceIndex] = ___default["default"].extend({}, choices[choiceIndex], {
       clue: newClue
@@ -36554,7 +36556,7 @@ class RadioEditor extends React__namespace.Component {
     this.props.onChange({
       choices: choices
     });
-  };
+  }
   onDelete = choiceIndex => {
     const choices = this.props.choices.slice();
     const deleted = choices[choiceIndex];
@@ -36568,7 +36570,8 @@ class RadioEditor extends React__namespace.Component {
     e.preventDefault();
     const choices = this.props.choices.slice();
     const newChoice = {
-      isNoneOfTheAbove: noneOfTheAbove
+      isNoneOfTheAbove: noneOfTheAbove,
+      content: ""
     };
     const addIndex = choices.length - (this.props.hasNoneOfTheAbove ? 1 : 0);
     choices.splice(addIndex, 0, newChoice);
@@ -36598,9 +36601,27 @@ class RadioEditor extends React__namespace.Component {
     }
     return [];
   };
-  serialize = () => {
-    return ___default["default"].pick(this.props, "choices", "randomize", "multipleSelect", "countChoices", "displayCount", "hasNoneOfTheAbove", "deselectEnabled");
-  };
+  serialize() {
+    const {
+      choices,
+      randomize,
+      multipleSelect,
+      countChoices,
+      displayCount,
+      hasNoneOfTheAbove,
+      deselectEnabled
+    } = this.props;
+    return {
+      choices,
+      randomize,
+      multipleSelect,
+      countChoices,
+      displayCount,
+      hasNoneOfTheAbove,
+      deselectEnabled,
+      numCorrect: perseusCore.deriveNumCorrect(this.props)
+    };
+  }
   render() {
     const numCorrect = ___default["default"].reduce(this.props.choices, function (memo, choice) {
       return choice.correct ? memo + 1 : memo;
@@ -36658,12 +36679,12 @@ class RadioEditor extends React__namespace.Component {
             apiOptions: this.props.apiOptions,
             choice: choice,
             onContentChange: newProps => {
-              if ("content" in newProps) {
+              if (newProps.content != null) {
                 this.onContentChange(i, newProps.content);
               }
             },
             onClueChange: newProps => {
-              if ("content" in newProps) {
+              if (newProps.content != null) {
                 this.onClueChange(i, newProps.content);
               }
             },