@khanacademy/perseus 19.7.3 → 19.9.0

package/dist/es/index.js

@@ -19,7 +19,7 @@ import PropTypes from 'prop-types';
 import * as ReactDOM from 'react-dom';
 import ReactDOM__default from 'react-dom';
 import { number, point, vector as vector$1, line } from '@khanacademy/kmath';
-import { entries, keys } from '@khanacademy/wonder-stuff-core';
+import { entries, UnreachableCaseError, keys } from '@khanacademy/wonder-stuff-core';
 import { CircularSpinner } from '@khanacademy/wonder-blocks-progress-spinner';
 import SimpleMarkdown from '@khanacademy/simple-markdown';
 import { pureMarkdownRules } from '@khanacademy/pure-markdown';
@@ -29,7 +29,7 @@ import { Strut } from '@khanacademy/wonder-blocks-layout';
 import Banner from '@khanacademy/wonder-blocks-banner';
 import { OptionItem, SingleSelect, MultiSelect } from '@khanacademy/wonder-blocks-dropdown';
 import debounce$1 from 'lodash.debounce';
-import { useMovablePoint, Line as Line$4, Coordinates, Mafs } from 'mafs';
+import { vec, Line as Line$4, MovablePoint as MovablePoint$6, Coordinates, Mafs } from 'mafs';
 import createReactClass from 'create-react-class';
 import Switch from '@khanacademy/wonder-blocks-switch';
 import { LabelMedium } from '@khanacademy/wonder-blocks-typography';
@@ -1902,7 +1902,7 @@ const KhanAnswerTypes = {
   }
 };
 
-const _excluded$5 = ["scoring"];
+const _excluded$4 = ["scoring"];
 const ERROR_TITLE = i18n._("Oops!");
 const ERROR_MESSAGE = i18n._("Sorry, I don't understand that!");
 
@@ -1990,7 +1990,7 @@ class Expression extends React.Component {
       let {
           scoring
         } = _ref,
-        rubric = _objectWithoutPropertiesLoose(_ref, _excluded$5);
+        rubric = _objectWithoutPropertiesLoose(_ref, _excluded$4);
       const score = Expression.validate(this.getUserInput(), rubric, onInputError || function () {});
 
       // "scoring" is a flag that indicates when we are checking answers.
@@ -18909,7 +18909,7 @@ const getRendererPropsForWidgetInfo = (widgetInfo, problemNum) => {
     // It shouldn't matter what we return here, but for consistency
     // we return the untransformed options, as if the widget did
     // not have a transform defined.
-    return widgetInfo.options;
+    return widgetInfo;
   }
   let transform;
   if (widgetInfo.static) {
@@ -19389,11 +19389,8 @@ class Renderer extends React.Component {
 
       // The widget needs access to its "rubric" at all times when in review
       // mode (which is really just part of its widget info).
-      let reviewModeRubric = null;
       const widgetInfo = this.state.widgetInfo[id];
-      if (this.props.reviewMode && widgetInfo) {
-        reviewModeRubric = widgetInfo.options;
-      }
+      const reviewModeRubric = this.props.reviewMode && widgetInfo ? widgetInfo.options : null;
       if (!this._interactionTrackers) {
         this._interactionTrackers = {};
       }
@@ -21393,7 +21390,7 @@ InputWithExamples.defaultProps = {
   className: ""
 };
 
-const _excluded$4 = ["keypadElement", "onFocus", "value"];
+const _excluded$3 = ["keypadElement", "onFocus", "value"];
 class SimpleKeypadInput extends React.Component {
   constructor(...args) {
     super(...args);
@@ -21432,7 +21429,7 @@ class SimpleKeypadInput extends React.Component {
         onFocus,
         value
       } = _this$props,
-      rest = _objectWithoutPropertiesLoose(_this$props, _excluded$4);
+      rest = _objectWithoutPropertiesLoose(_this$props, _excluded$3);
     return (
       /*#__PURE__*/
       // @ts-expect-error - TS2769 - No overload matches this call.
@@ -23263,14 +23260,14 @@ var Choice$1 = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.
   forwardedRef: ref
 })));
 
-const _excluded$3 = ["showContent", "content", "forwardedRef"];
+const _excluded$2 = ["showContent", "content", "forwardedRef"];
 const ChoiceNoneAbove = function ChoiceNoneAbove(props) {
   const {
       showContent,
       content,
       forwardedRef
     } = props,
-    rest = _objectWithoutPropertiesLoose(props, _excluded$3);
+    rest = _objectWithoutPropertiesLoose(props, _excluded$2);
   const choiceProps = _extends({}, rest, {
     content: showContent ? content :
     /*#__PURE__*/
@@ -28174,39 +28171,167 @@ Graph.defaultProps = {
   isMobile: false
 };
 
-const useInteractivePoint = (coords, snaps, range) => useMovablePoint(coords, {
-  constrain: coord => constrain(coord, snaps, range),
-  color: Color.blue
-});
+const MOVE_CONTROL_POINT = "move-control-point";
+function moveControlPoint(objectIndex, pointIndex, destination) {
+  return {
+    type: MOVE_CONTROL_POINT,
+    objectIndex,
+    pointIndex,
+    destination
+  };
+}
+const MOVE_SEGMENT = "move-segment";
+function moveSegment(segmentIndex, delta) {
+  return {
+    type: MOVE_SEGMENT,
+    segmentIndex,
+    delta
+  };
+}
 
-/**
- * We do not want to call `onGraphChange` until the user
- * has interacted with the graph. See the test,
- * "should reject no interaction"
- */
-const useEffectAfterFirstRender = (fn, deps) => {
-  const firstRender = useRef(true);
-  useEffect(() => {
-    if (firstRender.current) {
-      firstRender.current = false;
-      return;
-    }
-    fn();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [fn, ...deps]);
-};
-const snap = (val, step) => {
-  const inverse = 1 / step;
-  return Math.round(val * inverse) / inverse;
+const SegmentGraph = props => {
+  const {
+    dispatch
+  } = props;
+  const {
+    segments,
+    snapStep,
+    range
+  } = props.graphState;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, segments.map((segment, i) => /*#__PURE__*/React.createElement(SegmentView, {
+    key: i,
+    segment: segment,
+    snaps: snapStep,
+    range: range,
+    onMoveSegment: delta => {
+      dispatch(moveSegment(i, delta));
+    },
+    onMovePoint: (endpointIndex, destination) => dispatch(moveControlPoint(i, endpointIndex, destination)),
+    "data-testid": "segment" + i
+  })));
 };
-const clamp = (n, min, max) => Math.max(min, Math.min(max, n));
-const constrain = (coord, snapStep, range) => {
-  const [x, y] = coord;
-  const [xSnap, ySnap] = snapStep;
-  const [[xMin, xMax], [yMin, yMax]] = range;
-  return [clamp(snap(x, xSnap), xMin, xMax), clamp(snap(y, ySnap), yMin, yMax)];
+const SegmentView = props => {
+  const [pt1, pt2] = props.segment;
+  const midpoint = vec.midpoint(pt1, pt2);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Line$4.Segment, {
+    point1: pt1,
+    point2: pt2
+  }), /*#__PURE__*/React.createElement(MovablePoint$6, {
+    point: midpoint,
+    color: Color.blue,
+    onMove: newPoint => {
+      props.onMoveSegment(vec.sub(newPoint, midpoint));
+    }
+  }), /*#__PURE__*/React.createElement(MovablePoint$6, {
+    point: pt1,
+    color: Color.blue,
+    onMove: newPoint => {
+      props.onMovePoint(0, newPoint);
+    }
+  }), /*#__PURE__*/React.createElement(MovablePoint$6, {
+    point: pt2,
+    color: Color.blue,
+    onMove: newPoint => {
+      props.onMovePoint(1, newPoint);
+    }
+  }));
 };
 
+const renderLineLabel = (n, [min, max]) => n !== -1 && n !== min && n !== max;
+const axisOptions = (props, index) => ({
+  axis: props.markings === "graph",
+  lines: props.step[index],
+  subdivisions: props.step[index] / props.gridStep[index],
+  labels: n => renderLineLabel(n, props.range[index]) ? n : ""
+});
+const Grid = props => props.markings === "none" ? null : /*#__PURE__*/React.createElement(Coordinates.Cartesian, {
+  xAxis: axisOptions(props, 0),
+  yAxis: axisOptions(props, 1)
+});
+
+function interactiveGraphReducer(state, action) {
+  switch (action.type) {
+    case "move-control-point":
+      {
+        const newSegments = updateAtIndex(state.segments, action.objectIndex, segment => setAtIndex(segment, action.pointIndex, snap(state, bound$1(state, action.destination))));
+        if (!validSegments(newSegments)) {
+          return state;
+        }
+        return _extends({}, state, {
+          hasBeenInteractedWith: true,
+          segments: newSegments
+        });
+      }
+    case "move-segment":
+      {
+        const oldSegment = state.segments[action.segmentIndex];
+        const maxMoves = oldSegment.map(point => maxMove(state, point));
+        const minMoves = oldSegment.map(point => minMove(state, point));
+        const maxXMove = Math.min(...maxMoves.map(move => move[0]));
+        const maxYMove = Math.min(...maxMoves.map(move => move[1]));
+        const minXMove = Math.max(...minMoves.map(move => move[0]));
+        const minYMove = Math.max(...minMoves.map(move => move[1]));
+        const dx = clamp(action.delta[0], minXMove, maxXMove);
+        const dy = clamp(action.delta[1], minYMove, maxYMove);
+        const newSegment = oldSegment.map(point => snap(state, vector$1.add(point, [dx, dy])));
+        const newSegments = setAtIndex(state.segments, action.segmentIndex, newSegment);
+        return _extends({}, state, {
+          hasBeenInteractedWith: true,
+          segments: newSegments
+        });
+      }
+    default:
+      throw new UnreachableCaseError(action);
+  }
+}
+function snap(state, point) {
+  const [requestedX, requestedY] = point;
+  const [snapX, snapY] = state.snapStep;
+  return [Math.round(requestedX / snapX) * snapX, Math.round(requestedY / snapY) * snapY];
+}
+
+// Returns the closest point to the given `point` that is within the graph
+// bounds given in `state`.
+function bound$1(state, point) {
+  const [requestedX, requestedY] = point;
+  const [snapX, snapY] = state.snapStep;
+  const [[minX, maxX], [minY, maxY]] = state.range;
+  return [clamp(requestedX, minX + snapX, maxX - snapX), clamp(requestedY, minY + snapY, maxY - snapY)];
+}
+
+// Returns the vector from the given point to the top-right corner of the graph
+function maxMove(state, point) {
+  const topRight = bound$1(state, [Infinity, Infinity]);
+  return vec.sub(topRight, point);
+}
+
+// Returns the vector from the given point to the bottom-left corner of the
+// graph
+function minMove(state, point) {
+  const bottomLeft = bound$1(state, [-Infinity, -Infinity]);
+  return vec.sub(bottomLeft, point);
+}
+function clamp(value, min, max) {
+  if (value < min) {
+    return min;
+  }
+  if (value > max) {
+    return max;
+  }
+  return value;
+}
+function validSegments(segments) {
+  return segments.every(([start, end]) => !vector$1.equal(start, end));
+}
+function updateAtIndex(array, index, update) {
+  return setAtIndex(array, index, update(array[index]));
+}
+function setAtIndex(array, index, newValue) {
+  const copy = [...array];
+  copy[index] = newValue;
+  return copy;
+}
+
 // same as pointsFromNormalized in interactive-graph.tsx
 const normalizePoints = (range, step, coordsList, noSnap) => coordsList.map(coords =>
 // maps over [x, y]
@@ -28227,11 +28352,30 @@ const normalizeCoords = (coordsList, ranges) => coordsList.map(coords => coords.
   return (coord + ranges[i][1]) / extent;
 }));
 
-const getSegmentCoords = props => {
-  const coords = props.graph.coords;
-  if (coords) {
-    return coords;
+function initializeGraphState(params) {
+  const {
+    graph,
+    step,
+    snapStep,
+    range
+  } = params;
+  switch (graph.type) {
+    case "segment":
+      return {
+        type: "segment",
+        hasBeenInteractedWith: false,
+        range,
+        snapStep,
+        segments: getDefaultSegments({
+          graph,
+          step,
+          range
+        })
+      };
   }
+  throw new Error("Mafs not yet implemented for graph type: " + graph.type);
+}
+const getDefaultSegments = props => {
   const ys = n => {
     switch (n) {
       case 2:
@@ -28249,56 +28393,12 @@ const getSegmentCoords = props => {
     }
   };
   return ys(props.graph.numSegments).map(y => {
-    let segment = [[-5, y], [5, y]];
-    segment = normalizeCoords(segment, props.range);
-    segment = normalizePoints(props.range, props.step, segment);
-    return segment;
+    let endpoints = [[-5, y], [5, y]];
+    endpoints = normalizeCoords(endpoints, props.range);
+    endpoints = normalizePoints(props.range, props.step, endpoints);
+    return endpoints;
   });
 };
-const updateSegmentsArray = (segments, index, segment) => segments.map((seg, i) => index === i ? segment : seg);
-const SegmentGraph = props => {
-  const segments = getSegmentCoords(props);
-  const handleChange = (i, segment) => props.onGraphChange(current => _extends({}, current, {
-    coords: current.coords ? updateSegmentsArray(current.coords, i, segment) : updateSegmentsArray(segments, i, segment)
-  }));
-  return /*#__PURE__*/React.createElement(React.Fragment, null, segments.map((segment, i) => /*#__PURE__*/React.createElement(Segment, {
-    key: i,
-    i: i,
-    segment: segment,
-    snaps: props.snapStep,
-    range: props.range,
-    onChange: handleChange,
-    "data-testid": "segment" + i
-  })));
-};
-const Segment = props => {
-  const [start, end] = props.segment;
-  const {
-    point: pt1,
-    element: el1
-  } = useInteractivePoint(start, props.snaps, props.range);
-  const {
-    point: pt2,
-    element: el2
-  } = useInteractivePoint(end, props.snaps, props.range);
-  useEffectAfterFirstRender(() => props.onChange(props.i, [pt1, pt2]), [pt1, pt2]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Line$4.Segment, {
-    point1: pt1,
-    point2: pt2
-  }), el1, el2);
-};
-
-const renderLineLabel = (n, [min, max]) => n !== -1 && n !== min && n !== max;
-const axisOptions = (props, index) => ({
-  axis: props.markings === "graph",
-  lines: props.step[index],
-  subdivisions: props.step[index] / props.gridStep[index],
-  labels: n => renderLineLabel(n, props.range[index]) ? n : ""
-});
-const Grid = props => props.markings === "none" ? null : /*#__PURE__*/React.createElement(Coordinates.Cartesian, {
-  xAxis: axisOptions(props, 0),
-  yAxis: axisOptions(props, 1)
-});
 
 // Displays a stylized open eye: lint warnings are visible
 const VisibleIcon = () => /*#__PURE__*/React.createElement("svg", {
@@ -28646,7 +28746,7 @@ const styles$h = StyleSheet.create({
   }
 });
 
-const _excluded$2 = ["onFormatChange", "checkValidity", "useArrowKeys"];
+const _excluded$1 = ["onFormatChange", "checkValidity", "useArrowKeys"];
 const {
   firstNumericalParse,
   captureScratchpadTouchStart
@@ -28793,7 +28893,7 @@ class NumberInput extends React.Component {
       classes = classes + " " + this.props.className;
     }
     const _this$props = this.props,
-      restProps = _objectWithoutPropertiesLoose(_this$props, _excluded$2);
+      restProps = _objectWithoutPropertiesLoose(_this$props, _excluded$1);
     return /*#__PURE__*/React.createElement("input", _extends({}, restProps, {
       className: classes,
       type: "text"
@@ -28986,33 +29086,40 @@ const getLegacyGrid = (box, backgroundImage) => {
   return null;
 };
 
-const _excluded$1 = ["graph"];
 const renderGraph = props => {
   const {
-      graph
-    } = props,
-    rest = _objectWithoutPropertiesLoose(props, _excluded$1);
-  switch (graph.type) {
+    state,
+    dispatch
+  } = props;
+  switch (state.type) {
     case "segment":
-      return /*#__PURE__*/React.createElement(SegmentGraph, _extends({}, rest, {
-        graph: graph,
-        onGraphChange: props.onGraphChange
-      }));
+      return /*#__PURE__*/React.createElement(SegmentGraph, {
+        graphState: state,
+        dispatch: dispatch
+      });
   }
+  throw new Error("Mafs is not yet implemented for graph type: " + state.type);
 };
+function getGradableGraph(state, initialGraph) {
+  if (!state.hasBeenInteractedWith) {
+    return initialGraph;
+  }
+  switch (initialGraph.type) {
+    case "segment":
+      return _extends({}, initialGraph, {
+        coords: state.segments
+      });
+  }
+  throw new Error("Mafs is not yet implemented for graph type: " + initialGraph.type);
+}
 const MafsGraph = /*#__PURE__*/React.forwardRef((props, ref) => {
   var _props$backgroundImag, _props$backgroundImag2, _props$backgroundImag3, _props$backgroundImag4;
-  // Storing the gradable state in a ref so that it can be updated without
-  // causing a re-render.
-  const graphRef = React.useRef(props.graph);
-  const handleGraphUpdate = callback => {
-    graphRef.current = callback(graphRef.current);
-  };
-  React.useImperativeHandle(ref, () => ({
-    getUserInput: () => graphRef.current
-  }));
   const [width, height] = props.box;
   const legacyGrid = getLegacyGrid([width, height], props.backgroundImage);
+  const [state, dispatch] = React.useReducer(interactiveGraphReducer, props, initializeGraphState);
+  React.useImperativeHandle(ref, () => ({
+    getUserInput: () => getGradableGraph(state, props.graph)
+  }));
   return /*#__PURE__*/React.createElement(View, {
     style: {
       width: (_props$backgroundImag = (_props$backgroundImag2 = props.backgroundImage) == null ? void 0 : _props$backgroundImag2.width) != null ? _props$backgroundImag : width,
@@ -29035,9 +29142,10 @@ const MafsGraph = /*#__PURE__*/React.forwardRef((props, ref) => {
     zoom: false,
     width: width,
     height: height
-  }, !legacyGrid && /*#__PURE__*/React.createElement(Grid, props), renderGraph(_extends({}, props, {
-    onGraphChange: handleGraphUpdate
-  })))));
+  }, !legacyGrid && /*#__PURE__*/React.createElement(Grid, props), renderGraph({
+    state,
+    dispatch
+  }))));
 });
 
 const {
@@ -32782,6 +32890,8 @@ var LabelImage$1 = {
   isLintable: true
 };
 
+/* eslint-disable @typescript-eslint/no-unused-vars, react/sort-comp */
+
 // Styling
 const CELL_PADDING = 5;
 const TABLE_STYLE = {
@@ -32821,7 +32931,11 @@ class Tile extends React.Component {
   constructor(...args) {
     super(...args);
     this._flip = () => {
-      this.props.onChange(!this.props.value);
+      // On change requires a value, but we don't actually have access
+      // to the coordinates here, so we just pass the inverse value as a workaround.
+      this.props.onChange({
+        value: !this.props.value
+      });
     };
   }
   render() {
@@ -32848,7 +32962,7 @@ class TileGrid extends React.Component {
     return /*#__PURE__*/React.createElement("div", {
       style: TABLE_STYLE,
       className: "no-select"
-    }, _.map(this.props.cells, (row, y) => {
+    }, this.props.cells && _.map(this.props.cells, (row, y) => {
       return /*#__PURE__*/React.createElement("div", {
         key: y,
         style: ROW_STYLE
@@ -32859,7 +32973,12 @@ class TileGrid extends React.Component {
         }, /*#__PURE__*/React.createElement(Tile, {
           value: cell,
           size: this.props.size,
-          onChange: _.partial(this.props.onChange, y, x)
+          onChange: _.partial(this.props.onChange, {
+            value: {
+              y,
+              x
+            }
+          })
         }));
       }));
     }));
@@ -32868,10 +32987,6 @@ class TileGrid extends React.Component {
 
 // Returns a copy of the tiles, with tiles flipped according to
 // whether or not their y, x position satisfies the predicate
-TileGrid.propTypes = {
-  cells: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.bool)).isRequired,
-  size: PropTypes.number.isRequired
-};
 const flipTilesPredicate = (oldCells, predicate) => {
   return _.map(oldCells, (row, y) => {
     return _.map(row, (cell, x) => {
@@ -32906,27 +33021,36 @@ class LightsPuzzle extends React.Component {
       return change.apply(this, args);
     };
     this._width = () => {
-      if (this.props.cells.length !== 0) {
+      if (this.props.cells && this.props.cells.length !== 0) {
         return this.props.cells[0].length;
       }
       return 0; // default to 0
     };
     this._initNextPatterns = () => {
-      this._currPattern = PATTERNS[this.props.flipPattern](0);
-      this._nextPattern = PATTERNS[this.props.flipPattern](1);
+      if (this.props.flipPattern) {
+        this._currPattern = PATTERNS[this.props.flipPattern](0);
+        this._nextPattern = PATTERNS[this.props.flipPattern](1);
+      }
       this._patternIndex = 2;
     };
     this._shiftPatterns = () => {
-      this._currPattern = this._nextPattern;
-      this._nextPattern = PATTERNS[this.props.flipPattern](this._patternIndex);
-      this._patternIndex++;
+      if (this.props.flipPattern) {
+        this._currPattern = this._nextPattern;
+        this._nextPattern = PATTERNS[this.props.flipPattern](this._patternIndex);
+        this._patternIndex++;
+      }
     };
-    this._flipTile = (tileY, tileX) => {
-      const newCells = flipTilesPattern(this.props.cells, tileY, tileX, this._currPattern);
+    this._flipTile = ({
+      value: {
+        y,
+        x
+      }
+    }) => {
+      const newCells = flipTilesPattern(this.props.cells, y, x, this._currPattern);
       this._shiftPatterns();
       this.change({
         cells: newCells,
-        moveCount: this.props.moveCount + 1
+        moveCount: (this.props.moveCount || 0) + 1
       });
     };
     this._reset = () => {
@@ -32975,12 +33099,6 @@ class LightsPuzzle extends React.Component {
 }
 
 // grading function
-LightsPuzzle.propTypes = _extends({}, propTypes, {
-  cells: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.bool)),
-  startCells: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.bool)),
-  flipPattern: PropTypes.string.isRequired,
-  moveCount: PropTypes.number.isRequired
-});
 LightsPuzzle.defaultProps = {
   cells: [[false, false, false], [false, false, false], [false, false, false]],
   startCells: [[false, false, false], [false, false, false], [false, false, false]],
@@ -35456,7 +35574,7 @@ class Molecule extends React.Component {
     // screen readers?
     let content = /*#__PURE__*/React.createElement("canvas", {
       className: "molecule-canvas",
-      id: this.props.id + "-molecule"
+      id: this.props.widgetId + "-molecule"
       // eslint-disable-next-line react/no-string-refs
       ,
       ref: "canvas"
@@ -35473,11 +35591,6 @@ class Molecule extends React.Component {
     }, content);
   }
 }
-Molecule.propTypes = {
-  id: PropTypes.string.isRequired,
-  rotationAngle: PropTypes.number,
-  smiles: PropTypes.string
-};
 class MoleculeWidget extends React.Component {
   constructor(...args) {
     super(...args);
@@ -35506,17 +35619,12 @@ class MoleculeWidget extends React.Component {
   }
   render() {
     return /*#__PURE__*/React.createElement(Molecule, {
-      id: this.props.widgetId,
+      widgetId: this.props.widgetId,
       smiles: this.props.smiles,
       rotationAngle: this.props.rotationAngle
     });
   }
 }
-MoleculeWidget.propTypes = {
-  rotationAngle: PropTypes.number,
-  smiles: PropTypes.string,
-  widgetId: PropTypes.string
-};
 MoleculeWidget.defaultProps = {
   rotationAngle: 0
 };
@@ -38850,6 +38958,7 @@ var Passage$1 = {
   isLintable: true
 };
 
+/* eslint-disable @khanacademy/ts-no-error-suppressions */
 class PassageRefTarget extends React.Component {
   constructor(..._args) {
     super(..._args);
@@ -38885,10 +38994,6 @@ class PassageRefTarget extends React.Component {
     });
   }
 }
-PassageRefTarget.propTypes = _extends({}, propTypes, {
-  content: PropTypes.string,
-  linterContext: linterContextProps
-});
 PassageRefTarget.defaultProps = {
   content: "",
   linterContext: linterContextDefault
@@ -39828,11 +39933,6 @@ class Separator extends React.Component {
     }, this.props.data.bottomText));
   }
 }
-Separator.propTypes = {
-  // TODO(colin): figure out and add shape.
-  data: PropTypes.any,
-  index: PropTypes.number
-};
 class ReactionDiagramWidget extends React.Component {
   constructor(...args) {
     super(...args);
@@ -39874,7 +39974,7 @@ class ReactionDiagramWidget extends React.Component {
           key: id,
           className: "molecule-container"
         }, /*#__PURE__*/React.createElement(Molecule, {
-          id: id,
+          widgetId: id,
           rotationAngle: this.props.rotationAngle[i],
           smiles: s
         }), i === this.props.smiles.length - 1 ? null : /*#__PURE__*/React.createElement(Separator, {
@@ -39885,16 +39985,6 @@ class ReactionDiagramWidget extends React.Component {
     );
   }
 }
-ReactionDiagramWidget.propTypes = {
-  // TODO(colin): at the moment, these must be arrays of two elements;
-  // we're limited to a single reaction step.  At some point, add support
-  // for more steps in the reaction.
-  rotationAngle: PropTypes.arrayOf(PropTypes.number),
-  // eslint-disable-next-line react/forbid-prop-types
-  separators: PropTypes.arrayOf(PropTypes.object),
-  smiles: PropTypes.arrayOf(PropTypes.string),
-  widgetId: PropTypes.string
-};
 ReactionDiagramWidget.defaultProps = {
   smiles: [],
   rotationAngle: [],
@@ -42128,7 +42218,7 @@ const init = function init(options) {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "19.7.3";
+const libVersion = "19.9.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -42690,17 +42780,13 @@ class ServerItemRenderer extends React.Component {
     this.blurTimeoutID = void 0;
     this._handleFocusChange = (newFocus, oldFocus) => {
       if (newFocus != null) {
-        var _this$props$apiOption;
         this._setCurrentFocus(newFocus);
-
-        // Call the interactionCallback, if it exists, with the current user input data
-        (_this$props$apiOption = this.props.apiOptions) == null || _this$props$apiOption.interactionCallback == null || _this$props$apiOption.interactionCallback(this.questionRenderer.getUserInputForWidgets());
       } else {
         this._onRendererBlur(oldFocus);
       }
     };
     this.handleInteractWithWidget = widgetId => {
-      var _this$props$apiOption2;
+      var _this$props$apiOption;
       const withRemoved = _.difference(this.state.questionHighlightedWidgets, [widgetId]);
       this.setState({
         questionCompleted: false,
@@ -42708,7 +42794,7 @@ class ServerItemRenderer extends React.Component {
       });
 
       // Call the interactionCallback, if it exists, with the current user input data
-      (_this$props$apiOption2 = this.props.apiOptions) == null || _this$props$apiOption2.interactionCallback == null || _this$props$apiOption2.interactionCallback(this.questionRenderer.getUserInputForWidgets());
+      (_this$props$apiOption = this.props.apiOptions) == null || _this$props$apiOption.interactionCallback == null || _this$props$apiOption.interactionCallback(this.questionRenderer.getUserInputForWidgets());
     };
     // This must be pre-bound otherwise SvgImage's shouldComponentUpdate
     // won't behave correctly and we'll get an infinite loop.
@@ -43266,8 +43352,6 @@ const ItemExtras = [
 const PerseusExpressionAnswerFormConsidered = ["correct", "wrong", "ungraded"];
 const plotterPlotTypes = ["bar", "line", "pic", "histogram", "dotplot"];
 
-// TODO(FEI-3983): Create proper types for these.
-
 /**
  * Traverses a {content, widgets, images} renderer props object,
  * such as `itemData.question`