@khanacademy/perseus-editor 14.11.0 → 14.11.1

package/dist/es/index.js

@@ -46,7 +46,7 @@ import arrowCounterClockwise from '@phosphor-icons/core/bold/arrow-counter-clock
 
 // 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.1";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -26551,14 +26551,6 @@ class ExpressionEditor extends React.Component {
         answerForms
       });
     };
-    // called when the options (including the expression itself) to an answer
-    // form change
-    this.updateForm = (i, props) => {
-      const answerForms = lens(this.props.answerForms).merge([i], props).freeze();
-      this.change({
-        answerForms
-      });
-    };
     this.handleReorder = components => {
       const answerForms = components.map(component => {
         const form = _(component.props).pick("considered", "form", "simplify", "value");
@@ -26615,6 +26607,13 @@ class ExpressionEditor extends React.Component {
       newProps.functions = value.split(/[ ,]+/).filter(isTruthy);
       this.props.onChange(newProps);
     };
+    this.changeExpressionWidget = (key, props) => {
+      const answerForm = _extends({}, this.props.answerForms[key], {
+        key: `${key}`,
+        value: props.value
+      });
+      this.updateAnswerForm(key, answerForm);
+    };
     this.state = {
       functionsInternal: this.props.functions.join(" ")
     };
@@ -26622,6 +26621,41 @@ class ExpressionEditor extends React.Component {
   change(...args) {
     return Changeable.change.apply(this, args);
   }
+  // 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
+    });
+  }
+  changeSimplify(key, simplify) {
+    const answerForm = _extends({}, this.props.answerForms[key], {
+      key: `${key}`,
+      simplify
+    });
+    this.updateAnswerForm(key, answerForm);
+  }
+  changeForm(key, form) {
+    const answerForm = _extends({}, this.props.answerForms[key], {
+      form,
+      key: `${key}`
+    });
+    this.updateAnswerForm(key, answerForm);
+  }
+  changeConsidered(key, considered) {
+    const answerForm = _extends({}, this.props.answerForms[key], {
+      key: `${key}`,
+      considered
+    });
+    this.updateAnswerForm(key, answerForm);
+  }
+  changeTimes(times) {
+    this.change({
+      times: times
+    });
+  }
   render() {
     const answerOptions = this.props.answerForms.map(ans => {
       const key = parseAnswerKey(ans);
@@ -26633,26 +26667,25 @@ class ExpressionEditor extends React.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.createElement(AnswerOption, {
         draggable: true,
-        onChange: props => {
-          var _ans$key;
-          return this.updateForm(Number.parseInt((_ans$key = ans.key) != null ? _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.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.createElement(SortableArea, {
       components: answerOptions,
       onReorder: this.handleReorder
@@ -26704,10 +26737,8 @@ class ExpressionEditor extends React.Component {
     }, /*#__PURE__*/React.createElement(Checkbox$1, {
       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.createElement(InfoTip$k, null, /*#__PURE__*/React.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.createElement("div", {
       className: css(styles$M.paddedY)
@@ -26758,10 +26789,9 @@ class AnswerOption extends React.Component {
       });
     };
     this.toggleConsidered = () => {
+      // Update findNextIn to have stronger typing.
       const newVal = findNextIn(PerseusExpressionAnswerFormConsidered, this.props.considered);
-      this.change({
-        considered: newVal
-      });
+      this.props.onChangeConsidered(newVal);
     };
   }
   render() {
@@ -26796,21 +26826,13 @@ class AnswerOption extends React.Component {
     }, /*#__PURE__*/React.createElement(Checkbox$1, {
       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.createElement(InfoTip$k, null, /*#__PURE__*/React.createElement("p", null, "The student's answer must be in the same form. Commutativity and excess negative signs are ignored."))), /*#__PURE__*/React.createElement("div", {
       className: css(styles$M.paddedY, styles$M.paddedX)
     }, /*#__PURE__*/React.createElement(Checkbox$1, {
       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.createElement(InfoTip$k, null, /*#__PURE__*/React.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.createElement("div", {
       className: css(styles$M.buttonRow, styles$M.paddedY)
     }, removeButton)));
@@ -33795,8 +33817,7 @@ class InteractiveGraphEditor extends React.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({
@@ -33831,8 +33852,7 @@ class InteractiveGraphEditor extends React.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
           })
         });