@khanacademy/perseus-editor 14.11.0 → 14.11.2

package/dist/index.js

@@ -98,7 +98,7 @@ var arrowCounterClockwise__default = /*#__PURE__*/_interopDefaultLegacy(arrowCou
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus-editor";
-const libVersion = "14.11.0";
+const libVersion = "14.11.2";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -26594,14 +26594,15 @@ class ExpressionEditor extends React__namespace.Component {
     });
   };
 
-  // called when the options (including the expression itself) to an answer
-  // form change
-  updateForm = (i, props) => {
+  // 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.
+  updateAnswerForm(i, props) {
     const answerForms = lens(this.props.answerForms).merge([i], props).freeze();
     this.change({
       answerForms
     });
-  };
+  }
   handleReorder = components => {
     const answerForms = components.map(component => {
       const form = ___default["default"](component.props).pick("considered", "form", "simplify", "value");
@@ -26661,6 +26662,43 @@ class ExpressionEditor extends React__namespace.Component {
     newProps.functions = value.split(/[ ,]+/).filter(wonderStuffCore.isTruthy);
     this.props.onChange(newProps);
   };
+  changeSimplify(key, simplify) {
+    const answerForm = {
+      ...this.props.answerForms[key],
+      key: `${key}`,
+      simplify
+    };
+    this.updateAnswerForm(key, answerForm);
+  }
+  changeForm(key, form) {
+    const answerForm = {
+      ...this.props.answerForms[key],
+      form,
+      key: `${key}`
+    };
+    this.updateAnswerForm(key, answerForm);
+  }
+  changeConsidered(key, considered) {
+    const answerForm = {
+      ...this.props.answerForms[key],
+      key: `${key}`,
+      considered
+    };
+    this.updateAnswerForm(key, answerForm);
+  }
+  changeTimes(times) {
+    this.change({
+      times: times
+    });
+  }
+  changeExpressionWidget = (key, props) => {
+    const answerForm = {
+      ...this.props.answerForms[key],
+      key: `${key}`,
+      value: props.value
+    };
+    this.updateAnswerForm(key, answerForm);
+  };
   render() {
     const answerOptions = this.props.answerForms.map(ans => {
       const key = parseAnswerKey(ans);
@@ -26672,23 +26710,25 @@ class ExpressionEditor extends React__namespace.Component {
         functions: this.props.functions,
         buttonSets: this.props.buttonSets,
         buttonsVisible: "focused",
-        form: ans.form,
-        simplify: ans.simplify,
         value: ans.value,
-        onChange: props => this.updateForm(key, props),
+        onChange: props => this.changeExpressionWidget(key, props),
         trackInteraction: () => {},
-        widgetId: this.props.widgetId + "-" + ans.key
+        widgetId: this.props.widgetId + "-" + ans.key,
+        visibleLabel: this.props.visibleLabel,
+        ariaLabel: this.props.ariaLabel
       };
-      return lens(ans).merge([], {
-        key,
+      return /*#__PURE__*/React__namespace.createElement(AnswerOption, {
         draggable: true,
-        onChange: props => this.updateForm(Number.parseInt(ans.key ?? ""), props),
+        considered: ans.considered,
+        expressionProps: expressionProps,
+        form: ans.form,
+        simplify: ans.simplify,
         onDelete: () => this.handleRemoveForm(key),
-        expressionProps: expressionProps
-      }).freeze();
-    }).map(obj => /*#__PURE__*/React__namespace.createElement(AnswerOption, _extends({
-      key: obj.key
-    }, obj)));
+        onChangeSimplify: simplify => this.changeSimplify(key, simplify),
+        onChangeForm: form => this.changeForm(key, form),
+        onChangeConsidered: considered => this.changeConsidered(key, considered)
+      });
+    });
     const sortable = /*#__PURE__*/React__namespace.createElement(SortableArea, {
       components: answerOptions,
       onReorder: this.handleReorder
@@ -26740,10 +26780,8 @@ class ExpressionEditor extends React__namespace.Component {
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
       label: "Use \xD7 instead of \u22C5 for multiplication",
       checked: this.props.times,
-      onChange: value => {
-        this.props.onChange({
-          times: value
-        });
+      onChange: newCheckedState => {
+        this.changeTimes(newCheckedState);
       }
     }), /*#__PURE__*/React__namespace.createElement(InfoTip$k, null, /*#__PURE__*/React__namespace.createElement("p", null, "For pre-algebra problems this option displays multiplication as \\times instead of \\cdot in both the rendered output and the acceptable formats examples."))), /*#__PURE__*/React__namespace.createElement("div", {
       className: aphrodite.css(styles$M.paddedY)
@@ -26791,10 +26829,9 @@ class AnswerOption extends React__namespace.Component {
     });
   };
   toggleConsidered = () => {
+    // Update findNextIn to have stronger typing.
     const newVal = findNextIn(perseus.PerseusExpressionAnswerFormConsidered, this.props.considered);
-    this.change({
-      considered: newVal
-    });
+    this.props.onChangeConsidered(newVal);
   };
   render() {
     const removeButton = this.state.deleteFocused ? /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Button__default["default"], {
@@ -26828,21 +26865,13 @@ class AnswerOption extends React__namespace.Component {
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
       label: "Answer expression must have the same form.",
       checked: this.props.form,
-      onChange: value => {
-        this.props.onChange({
-          form: value
-        });
-      }
+      onChange: this.props.onChangeForm
     }), /*#__PURE__*/React__namespace.createElement(InfoTip$k, null, /*#__PURE__*/React__namespace.createElement("p", null, "The student's answer must be in the same form. Commutativity and excess negative signs are ignored."))), /*#__PURE__*/React__namespace.createElement("div", {
       className: aphrodite.css(styles$M.paddedY, styles$M.paddedX)
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
       label: "Answer expression must be fully expanded and simplified.",
       checked: this.props.simplify,
-      onChange: value => {
-        this.props.onChange({
-          simplify: value
-        });
-      }
+      onChange: this.props.onChangeSimplify
     }), /*#__PURE__*/React__namespace.createElement(InfoTip$k, null, /*#__PURE__*/React__namespace.createElement("p", null, "The student's answer must be fully expanded and simplified. Answering this equation (x^2+2x+1) with this factored equation (x+1)^2 will render this response \"Your answer is not fully expanded and simplified.\""))), /*#__PURE__*/React__namespace.createElement("div", {
       className: aphrodite.css(styles$M.buttonRow, styles$M.paddedY)
     }, removeButton)));
@@ -33994,8 +34023,7 @@ class InteractiveGraphEditor extends React__namespace.Component {
           // value for `match`; a value of undefined
           // means exact matching. The code happens
           // to work because "exact" falls through
-          // to the correct else branch in
-          // InteractiveGraph.validate()
+          // to the correct else branch when scoring
           match: newValue
         };
         this.props.onChange({
@@ -34031,8 +34059,7 @@ class InteractiveGraphEditor extends React__namespace.Component {
             // value for `match`; a value of undefined
             // means exact matching. The code happens
             // to work because "exact" falls through
-            // to the correct else branch in
-            // InteractiveGraph.validate()
+            // to the correct else branch when scoring
             match: newValue
           }
         });