@khanacademy/perseus 47.0.1 → 48.1.0

package/dist/es/index.js

@@ -2287,9 +2287,6 @@ function scoreExpression(userInput, rubric, strings, locale) {
   // We matched a graded answer form, so we can now tell the user
   // whether their input was correct or incorrect, and hand out
   // points accordingly
-  // TODO(eater): Seems silly to translate result to this
-  // invalid/points thing and immediately translate it back in
-  // ItemRenderer.scoreInput()
   return {
     type: "points",
     earned: matchingAnswerForm.considered === "correct" ? 1 : 0,
@@ -3240,7 +3237,7 @@ const supportsPassiveEvents = () => {
     window.addEventListener("testPassive", null, opts);
     // @ts-expect-error - TS2769 - No overload matches this call.
     window.removeEventListener("testPassive", null, opts);
-  } catch (e) {
+  } catch (_unused) {
     // Intentionally left empty!
   }
   return supportsPassive;
@@ -3376,6 +3373,162 @@ const Util = {
   deepClone
 };
 
+// For offline exercises in the mobile app, we download the graphie data
+// (svgs and localized data files) and serve them from the local file
+// system (with file://). We replace urls that start with `web+graphie`
+// in the perseus json with this `file+graphie` prefix to indicate that
+// they should have the `file://` protocol instead of `https://`.
+const svgLocalLabelsRegex = /^file\+graphie:/;
+const hashRegex = /\/([^/]+)$/;
+
+/**
+ * A Graphie axis range.
+ */
+
+/**
+ * A Graphie label.
+ */
+
+/**
+ * The Graphie data (labels, etc.)
+ */
+
+function getLocale() {
+  const {
+    JIPT,
+    kaLocale
+  } = getDependencies();
+  return JIPT.useJIPT ? "en-pt" : kaLocale;
+}
+function shouldUseLocalizedData() {
+  return getLocale() !== "en";
+}
+
+// A regex to split at the last / of a URL, separating the base part from the
+// hash. This is used to create the localized label data URLs.
+const splitHashRegex = /\/(?=[^/]+$)/;
+function getLocalizedDataUrl(url) {
+  // For local (cached) graphie images, they are already localized.
+  if (svgLocalLabelsRegex.test(url)) {
+    return Util.getDataUrl(url);
+  }
+  const [base, hash] = Util.getBaseUrl(url).split(splitHashRegex);
+  return `${base}/${getLocale()}/${hash}-data.json`;
+}
+
+// Get the hash from the url, which is just the filename
+function getUrlHash(url) {
+  const match = url.match(hashRegex);
+  if (match == null) {
+    throw new PerseusError("not a valid URL", Errors.InvalidInput);
+  }
+  return match && match[1];
+}
+
+/**
+ * Parse JSONP for a web+graphie://... hash to extract Graphie data, or throw
+ * an error if invalid JSONP.
+ */
+function parseDataFromJSONP(graphieHash, graphieJSONP, errorCallback) {
+  // The JSONP is expected to be in the form of `svgDataHASH(...)` or `svgOtherDataHASH(...)`
+  const match = graphieJSONP.match(new RegExp(`^(?:svgData|svgOtherData)${graphieHash}\\((.+)\\);$`));
+
+  // It is also possible that the JSONP is simply a JSON object,
+  //  in which case we can parse it directly.
+  const jsonToParse = match ? match[1] : graphieJSONP;
+
+  // Try to parse the JSONP, and if it fails, call the error callback
+  try {
+    return JSON.parse(jsonToParse);
+  } catch (error) {
+    errorCallback(error);
+    return null;
+  }
+}
+// The global cache of label data. Its format is:
+// {
+//   hash (e.g. "c21435944d2cf0c8f39d9059cb35836aa701d04a"): {
+//     loaded: a boolean of whether the data has been loaded or not
+//     dataCallbacks: a list of callbacks to call with the data when the data
+//                    is loaded
+//     data: the other data for this hash
+//   },
+//   ...
+// }
+const labelDataCache = {};
+function loadGraphie(url, onDataLoaded) {
+  const hash = getUrlHash(url);
+
+  // We can't make multiple jsonp calls to the same file because their
+  // callbacks will collide with each other. Instead, we cache the data
+  // and only make the jsonp calls once.
+  const entry = labelDataCache[hash];
+  if (entry != null) {
+    if (entry.loaded) {
+      const {
+        data,
+        localized
+      } = entry;
+      onDataLoaded(data, localized);
+    } else {
+      entry.dataCallbacks.push(onDataLoaded);
+    }
+  } else {
+    const cacheData = {
+      loaded: false,
+      dataCallbacks: [onDataLoaded],
+      localized: shouldUseLocalizedData()
+    };
+    labelDataCache[hash] = cacheData;
+    const retrieveData = async (url, errorCallback) => {
+      const response = await fetch(url);
+      if (!(response != null && response.ok)) {
+        errorCallback();
+        return;
+      }
+      const jsonp = await response.text();
+      const data = parseDataFromJSONP(hash, jsonp, error => {
+        Log.error("Failed to parse JSONP for svg-image", Errors.Service, {
+          cause: error,
+          loggedMetadata: {
+            dataUrl: Util.getDataUrl(url),
+            jsonp
+          }
+        });
+      });
+
+      // If the data is null, then we failed to parse the JSONP
+      if (!data) {
+        return;
+      }
+      const newCacheEntry = labelDataCache[hash] = _extends({}, labelDataCache[hash], {
+        loaded: true,
+        data
+      });
+      newCacheEntry.dataCallbacks.forEach(callback => {
+        callback(newCacheEntry.data, cacheData.localized);
+      });
+    };
+    const dataLoadErrorHandler = (x, status, error) => {
+      Log.error("Data load failed for svg-image", Errors.Service, {
+        cause: error,
+        loggedMetadata: {
+          dataUrl: Util.getDataUrl(url),
+          status
+        }
+      });
+    };
+    if (shouldUseLocalizedData()) {
+      cacheData.localized = false;
+      // If there is isn't any localized data, fall back to
+      // the original, unlocalized data
+      retrieveData(getLocalizedDataUrl(url), dataLoadErrorHandler);
+    } else {
+      retrieveData(Util.getDataUrl(url), dataLoadErrorHandler);
+    }
+  }
+}
+
 // Derived from the MIT-licensed:
 
 /*jshint browser:true, node:true */
@@ -3483,7 +3636,9 @@ function changeViewportTag(contentString, callback) {
     // finished resetting.
     // TODO(jeff, CP-3128): Use Wonder Blocks Timing API.
     // eslint-disable-next-line no-restricted-syntax
-    callback && setTimeout(callback, 0);
+    if (callback != null) {
+      setTimeout(callback, 0);
+    }
   }, 0);
 }
 
@@ -8960,6 +9115,9 @@ class Graphie$1 {
     $(el).css("position", "relative");
     this.raphael = Raphael$1(el);
 
+    // Hide the Raphael canvas from screen readers
+    $(el).attr("aria-hidden", "true");
+
     // For a sometimes-reproducible IE8 bug; doesn't affect SVG browsers at all
     $(el).children("div").css("position", "absolute");
   }
@@ -16768,7 +16926,7 @@ class ImageLoader extends React.Component {
         onKeyUp = e => {
           // 13 is enter key, 32 is space key
           if (e.keyCode === 13 || e.keyCode === 32) {
-            imgProps.onClick && imgProps.onClick(e);
+            imgProps.onClick == null || imgProps.onClick(e);
           }
         };
         onKeyDown = e => {
@@ -16833,99 +16991,11 @@ class ImageLoader extends React.Component {
 
 // Minimum image width to make an image appear as zoomable.
 const ZOOMABLE_THRESHOLD = 700;
-
-// The global cache of label data. Its format is:
-// {
-//   hash (e.g. "c21435944d2cf0c8f39d9059cb35836aa701d04a"): {
-//     loaded: a boolean of whether the data has been loaded or not
-//     dataCallbacks: a list of callbacks to call with the data when the data
-//                    is loaded
-//     data: the other data for this hash
-//   },
-//   ...
-// }
-const labelDataCache = {};
-
-// Write our own JSONP handler because all the other ones don't do things we
-// need.
-const doJSONP = function doJSONP(url, options) {
-  options = _extends({
-    callbackName: "callback",
-    success: $.noop,
-    error: $.noop
-  }, options);
-
-  // Create the script
-  const script = document.createElement("script");
-  script.setAttribute("async", "");
-  script.setAttribute("src", url);
-
-  // A cleanup function to run when we're done.
-  function cleanup() {
-    document.head && document.head.removeChild(script);
-    delete window[options.callbackName];
-  }
-
-  // Add the global callback.
-  // @ts-expect-error - TS2740 - Type '() => void' is missing the following properties from type 'Window': clientInformation, closed, customElements, devicePixelRatio, and 206 more.
-  window[options.callbackName] = function (...args) {
-    cleanup();
-    options.success.apply(null, args);
-  };
-
-  // Add the error handler.
-  script.addEventListener("error", function (...args) {
-    cleanup();
-    options.error.apply(null, args);
-  });
-
-  // Insert the script to start the download.
-  document.head && document.head.appendChild(script);
-};
-
-// For offline exercises in the mobile app, we download the graphie data
-// (svgs and localized data files) and serve them from the local file
-// system (with file://). We replace urls that start with `web+graphie`
-// in the perseus json with this `file+graphie` prefix to indicate that
-// they should have the `file://` protocol instead of `https://`.
-const svgLocalLabelsRegex = /^file\+graphie:/;
-const hashRegex = /\/([^/]+)$/;
 function isImageProbablyPhotograph(imageUrl) {
   // TODO(david): Do an inventory to refine this heuristic. For example, what
   //     % of .png images are illustrations?
   return /\.(jpg|jpeg)$/i.test(imageUrl);
 }
-function getLocale() {
-  const {
-    JIPT,
-    kaLocale
-  } = getDependencies();
-  return JIPT.useJIPT ? "en-pt" : kaLocale;
-}
-function shouldUseLocalizedData() {
-  return getLocale() !== "en";
-}
-
-// A regex to split at the last / of a URL, separating the base part from the
-// hash. This is used to create the localized label data URLs.
-const splitHashRegex = /\/(?=[^/]+$)/;
-function getLocalizedDataUrl(url) {
-  // For local (cached) graphie images, they are already localized.
-  if (svgLocalLabelsRegex.test(url)) {
-    return Util.getDataUrl(url);
-  }
-  const [base, hash] = Util.getBaseUrl(url).split(splitHashRegex);
-  return `${base}/${getLocale()}/${hash}-data.json`;
-}
-
-// Get the hash from the url, which is just the filename
-function getUrlHash(url) {
-  const match = url.match(hashRegex);
-  if (match == null) {
-    throw new PerseusError("not a valid URL", Errors.InvalidInput);
-  }
-  return match && match[1];
-}
 function defaultPreloader(dimensions) {
   return /*#__PURE__*/React.createElement("span", {
     style: {
@@ -16947,20 +17017,6 @@ class SvgImage extends React.Component {
   constructor(props) {
     super(props);
     this._isMounted = void 0;
-    this.onDataLoaded = (data, localized) => {
-      if (this._isMounted && data.labels && data.range) {
-        const labelsRendered = data.labels.reduce((dict, label) => _extends({}, dict, {
-          [label.content]: false
-        }), {});
-        this.setState({
-          dataLoaded: true,
-          labelDataIsLocalized: localized,
-          labelsRendered,
-          labels: data.labels,
-          range: data.range
-        });
-      }
-    };
     this.onImageLoad = () => {
       // Only need to do this if rendering a Graphie
       if (this.sizeProvided()) {
@@ -17050,6 +17106,7 @@ class SvgImage extends React.Component {
       });
     };
     this._handleZoomClick = e => {
+      var _this$props$trackInte, _this$props;
       const $image = $(e.target);
 
       // It's possible that the image is already displayed at its
@@ -17066,7 +17123,7 @@ class SvgImage extends React.Component {
       $image.width() < this.props.width || this.props.zoomToFullSizeOnMobile) {
         ZoomService.handleZoomClick(e, this.props.zoomToFullSizeOnMobile);
       }
-      this.props.trackInteraction && this.props.trackInteraction();
+      (_this$props$trackInte = (_this$props = this.props).trackInteraction) == null || _this$props$trackInte.call(_this$props);
     };
     this.handleUpdate = status => {
       this.props.onUpdate();
@@ -17135,74 +17192,21 @@ class SvgImage extends React.Component {
     return Util.isLabeledSVG(this.props.src) ? state.imageLoaded && state.dataLoaded : state.imageLoaded;
   }
   loadResources() {
-    const hash = getUrlHash(this.props.src);
-
-    // We can't make multiple jsonp calls to the same file because their
-    // callbacks will collide with each other. Instead, we cache the data
-    // and only make the jsonp calls once.
-    if (labelDataCache[hash]) {
-      if (labelDataCache[hash].loaded) {
-        const {
-          data,
-          localized
-        } = labelDataCache[hash];
-        this.onDataLoaded(data, localized);
-      } else {
-        labelDataCache[hash].dataCallbacks.push(this.onDataLoaded);
-      }
-    } else {
-      const cacheData = {
-        loaded: false,
-        dataCallbacks: [this.onDataLoaded],
-        data: null,
-        localized: shouldUseLocalizedData()
-      };
-      labelDataCache[hash] = cacheData;
-      const retrieveData = (url, errorCallback) => {
-        doJSONP(url, {
-          callbackName: "svgData" + hash,
-          success: data => {
-            // @ts-expect-error - TS2540 - Cannot assign to 'data' because it is a read-only property.
-            cacheData.data = data;
-            // @ts-expect-error - TS2540 - Cannot assign to 'loaded' because it is a read-only property.
-            cacheData.loaded = true;
-            _.each(cacheData.dataCallbacks, callback => {
-              // @ts-expect-error - TS2345 - Argument of type 'null' is not assignable to parameter of type '{ labels: readonly any[]; range: readonly any[]; }'.
-              callback(cacheData.data, cacheData.localized);
-            });
-          },
-          error: errorCallback
-        });
-      };
-      if (shouldUseLocalizedData()) {
-        retrieveData(getLocalizedDataUrl(this.props.src), (x, status, error) => {
-          // @ts-expect-error - TS2540 - Cannot assign to 'localized' because it is a read-only property.
-          cacheData.localized = false;
-
-          // If there is isn't any localized data, fall back to
-          // the original, unlocalized data
-          retrieveData(Util.getDataUrl(this.props.src), (x, status, error) => {
-            Log.error("Data load failed for svg-image", Errors.Service, {
-              cause: error,
-              loggedMetadata: {
-                dataUrl: Util.getDataUrl(this.props.src),
-                status
-              }
-            });
-          });
+    loadGraphie(this.props.src, (data, localized) => {
+      if (this._isMounted && data.labels && data.range) {
+        const labelsRendered = {};
+        data.labels.forEach(label => {
+          labelsRendered[label.content] = false;
         });
-      } else {
-        retrieveData(Util.getDataUrl(this.props.src), (x, status, error) => {
-          Log.error("Data load failed for svg-image", Errors.Service, {
-            cause: error,
-            loggedMetadata: {
-              dataUrl: Util.getDataUrl(this.props.src),
-              status
-            }
-          });
+        this.setState({
+          dataLoaded: true,
+          labelDataIsLocalized: localized,
+          labelsRendered,
+          labels: data.labels,
+          range: data.range
         });
       }
-    }
+    });
   }
   sizeProvided() {
     return this.props.width != null && this.props.height != null;
@@ -19602,8 +19606,8 @@ class WidgetContainer extends React.Component {
     });
 
     // Note: if you add more props here, please consider whether or not
-    // it should be auto-serialized (e.g. used in scoreInput()). See
-    // widget-jsonify-deprecated.jsx and widget-prop-denylist.jsx
+    // it should be auto-serialized.
+    // See widget-jsonify-deprecated.jsx and widget-prop-denylist.jsx
 
     // We default to an empty object for style instead of null
     // because of a strange bug where the static styles aren't applied
@@ -20582,14 +20586,6 @@ class Renderer extends React.Component {
     this.getWidgetIds = () => {
       return this.widgetIds;
     };
-    /**
-     * @deprecated use scorePerseusItem
-     */
-    this.guessAndScore = () => {
-      const totalGuess = this.getUserInput();
-      const totalScore = this.score();
-      return [totalGuess, totalScore];
-    };
     // TranslationLinter callback
     this.handletranslationLintErrors = lintErrors => {
       if (!this._isMounted) {
@@ -21556,11 +21552,11 @@ class SimpleKeypadInput extends React.Component {
               keypadType: KeypadType.FRACTION
             }, () => {
               if (_this._isMounted) {
-                onFocus && onFocus();
+                onFocus == null || onFocus();
               }
             });
           } else {
-            onFocus && onFocus();
+            onFocus == null || onFocus();
           }
         },
         value: value == null ? "" : "" + value
@@ -21799,9 +21795,6 @@ function scoreInputNumber(userInput, rubric, strings) {
   // If `currentValue` is not TeX, this should be a no-op.
   const currentValue = ParseTex$1(userInput.currentValue);
   const result = val(currentValue);
-
-  // TODO(eater): Seems silly to translate result to this invalid/points
-  // thing and immediately translate it back in ItemRenderer.scoreInput()
   if (result.empty) {
     return {
       type: "invalid",
@@ -22168,10 +22161,6 @@ function scoreNumericInput(userInput, rubric, strings) {
     message: (_matchedAnswer$messag = matchedAnswer == null ? void 0 : matchedAnswer.message) != null ? _matchedAnswer$messag : null,
     guess: localValue
   };
-
-  // TODO(eater): Seems silly to translate result to this
-  // invalid/points thing and immediately translate it
-  // back in ItemRenderer.scoreInput()
   if (result.empty) {
     return {
       type: "invalid",
@@ -25024,7 +25013,7 @@ const scrollElementToOffset = (elementOrWindow, offset, duration = 0, callback)
       // TODO(jeff, WEB-1378): Use Wonder Blocks Timing API
       // eslint-disable-next-line no-restricted-syntax
       clearInterval(scrollInterval);
-      callback && callback();
+      callback == null || callback();
     }
   }, tickLength);
 };
@@ -27048,7 +27037,7 @@ class CSProgram extends React.Component {
       let data = {};
       try {
         data = JSON.parse(e.originalEvent.data);
-      } catch (err) {
+      } catch (_unused) {
         return;
       }
       if (_.isUndefined(data.testsPassed)) {
@@ -28104,7 +28093,6 @@ class GradedGroupSet extends React.Component {
     };
   }
   shouldComponentUpdate(nextProps, nextState) {
-    nextProps.gradedGroups;
     return nextProps !== this.props || nextState !== this.state;
   }
   getPromptJSON() {
@@ -29573,7 +29561,7 @@ class Iframe extends React.Component {
       let data = {};
       try {
         data = JSON.parse(e.originalEvent.data);
-      } catch (err) {
+      } catch (_unused) {
         return;
       }
       if (_.isUndefined(data.testsPassed)) {
@@ -30638,10 +30626,12 @@ class Graph extends React.Component {
         this.props.onMouseDown(coord);
       }, this) : undefined;
       const onMouseOver = $instructionsWrapper ? function () {
-        $instructionsWrapper && $instructionsWrapper.css("opacity", invisible);
+        var _$instructionsWrapper;
+        (_$instructionsWrapper = $instructionsWrapper) == null || _$instructionsWrapper.css("opacity", invisible);
       } : undefined;
       const onMouseOut = $instructionsWrapper ? function () {
-        $instructionsWrapper && $instructionsWrapper.css("opacity", visible);
+        var _$instructionsWrapper2;
+        (_$instructionsWrapper2 = $instructionsWrapper) == null || _$instructionsWrapper2.css("opacity", visible);
       } : undefined;
       /* eslint-enable indent */
 
@@ -31373,6 +31363,7 @@ function replaceOutsideTeX(mathString) {
   const parsed = mathOnlyParser(mathString);
   let result = "";
   for (const piece of parsed) {
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
     piece.type === "math" ? result += "$" + piece.content + "$" : piece.type === "specialCharacter" ? result += escapeIfUnescaped(piece.content) : result += piece.content;
   }
   return `\\text{${result}}`;
@@ -34323,43 +34314,64 @@ function renderPointGraph(state, dispatch) {
   };
 }
 function PointGraph(props) {
-  const numPoints = props.graphState.numPoints;
+  const {
+    numPoints
+  } = props.graphState;
+  const graphConfig = useGraphConfig();
+  const pointsRef = React.useRef([]);
+
+  // Dimensions to build the graph overlay for Unlimited Point.
+  const {
+    range: [x, y]
+  } = graphConfig;
+  const [[left, top]] = useTransformVectorsToPixels([x[0], y[1]]);
+
+  // This useEffect is to handle the focus snapping for Unlimited Point.
+  React.useEffect(() => {
+    const focusedIndex = props.graphState.focusedPointIndex;
+    if (focusedIndex != null) {
+      var _pointsRef$current$fo;
+      (_pointsRef$current$fo = pointsRef.current[focusedIndex]) == null || _pointsRef$current$fo.focus();
+    }
+  }, [props.graphState.focusedPointIndex, pointsRef]);
+  const statefulProps = _extends({}, props, {
+    graphConfig,
+    pointsRef,
+    top,
+    left
+  });
   if (numPoints === "unlimited") {
-    return UnlimitedPointGraph(props);
+    return UnlimitedPointGraph(statefulProps);
   }
-  return LimitedPointGraph(props);
+  return LimitedPointGraph(statefulProps);
 }
-function LimitedPointGraph(props) {
+function LimitedPointGraph(statefulProps) {
   const {
     dispatch
-  } = props;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, props.graphState.coords.map((point, i) => /*#__PURE__*/React.createElement(MovablePoint$1, {
+  } = statefulProps;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, statefulProps.graphState.coords.map((point, i) => /*#__PURE__*/React.createElement(MovablePoint$1, {
     key: i,
     point: point,
     sequenceNumber: i + 1,
     onMove: destination => dispatch(actions.pointGraph.movePoint(i, destination))
   })));
 }
-function UnlimitedPointGraph(props) {
+function UnlimitedPointGraph(statefulProps) {
   const {
-    dispatch
-  } = props;
-  const graphConfig = useGraphConfig();
+    dispatch,
+    graphConfig,
+    pointsRef,
+    top,
+    left
+  } = statefulProps;
   const {
-    range: [[minX, maxX], [minY, maxY]]
+    coords
+  } = statefulProps.graphState;
+  const {
+    graphDimensionsInPixels
   } = graphConfig;
-  const width = maxX - minX;
-  const height = maxY - minY;
-  const [[widthPx, heightPx]] = useTransformDimensionsToPixels([width, height]);
-  const [[left, top]] = useTransformVectorsToPixels([minX, maxY]);
-  const itemsRef = React.useRef([]);
-  React.useEffect(() => {
-    const focusedIndex = props.graphState.focusedPointIndex;
-    if (focusedIndex != null) {
-      var _itemsRef$current$foc;
-      (_itemsRef$current$foc = itemsRef.current[focusedIndex]) == null || _itemsRef$current$foc.focus();
-    }
-  }, [props.graphState.focusedPointIndex, itemsRef]);
+  const widthPx = graphDimensionsInPixels[0];
+  const heightPx = graphDimensionsInPixels[1];
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("rect", {
     style: {
       fill: "rgba(0,0,0,0)",
@@ -34376,13 +34388,13 @@ function UnlimitedPointGraph(props) {
       const graphCoordinates = pixelsToVectors([[x, y]], graphConfig);
       dispatch(actions.pointGraph.addPoint(graphCoordinates[0]));
     }
-  }), props.graphState.coords.map((point, i) => /*#__PURE__*/React.createElement(MovablePoint$1, {
+  }), coords.map((point, i) => /*#__PURE__*/React.createElement(MovablePoint$1, {
     key: i,
     point: point,
     sequenceNumber: i + 1,
     onMove: destination => dispatch(actions.pointGraph.movePoint(i, destination)),
     ref: ref => {
-      itemsRef.current[i] = ref;
+      pointsRef.current[i] = ref;
     },
     onFocus: () => {
       dispatch(actions.pointGraph.focusPoint(i));
@@ -34429,36 +34441,42 @@ function renderPolygonGraph(state, dispatch) {
     interactiveElementsDescription: null
   };
 }
-const LimitedPolygonGraph = props => {
-  const [hovered, setHovered] = React.useState(false);
-  // This is more so required for the re-rendering that occurs when state
-  // updates; specifically with regard to line weighting and polygon focus.
-  const [focusVisible, setFocusVisible] = React.useState(false);
+const PolygonGraph = props => {
   const {
     dispatch
   } = props;
   const {
+    numSides,
     coords,
-    showAngles,
-    showSides,
-    range,
     snapStep,
     snapTo = "grid"
   } = props.graphState;
+  const graphConfig = useGraphConfig();
+
+  // Ref to implement the dragging behavior on a Limited/Closed Polygon.
+  const polygonRef = React.useRef(null);
+  // Ref to manage dynamic focus for the points in Unlimited Polygon
+  const pointsRef = React.useRef([]);
+  // Ref to manage the last move time for a Limited Polygon.
+  const lastMoveTimeRef = React.useRef(0);
+
+  // Dimensions to build the graph overlay for Unlimited Polgyon.
   const {
-    disableKeyboardInteraction
-  } = useGraphConfig();
+    range: [x, y]
+  } = graphConfig;
+  const [[left, top]] = useTransformVectorsToPixels([x[0], y[1]]);
 
   // TODO(benchristel): can the default set of points be removed here? I don't
   // think coords can be null.
   const points = coords != null ? coords : [[0, 0]];
-  const ref = React.useRef(null);
+
+  // Logic to build the dragging experience. Primarily used by Limited Polygon.
   const dragReferencePoint = points[0];
   const constrain = ["angles", "sides"].includes(snapTo) ? p => p : p => snap(snapStep, p);
   const {
     dragging
   } = useDraggable({
-    gestureTarget: ref,
+    gestureTarget: polygonRef,
     point: dragReferencePoint,
     onMove: newPoint => {
       const delta = vec.sub(newPoint, dragReferencePoint);
@@ -34466,7 +34484,61 @@ const LimitedPolygonGraph = props => {
     },
     constrainKeyboardMovement: constrain
   });
-  const lastMoveTime = React.useRef(0);
+
+  // Hover/focus state for Limited Polgyon effects.
+  const [hovered, setHovered] = React.useState(false);
+  // This is more so required for the re-rendering that occurs when state
+  // updates; specifically with regard to line weighting and polygon focus.
+  const [focusVisible, setFocusVisible] = React.useState(false);
+
+  // This useEffect is to handle the focus snapping for Unlimited Polygon.
+  React.useEffect(() => {
+    const focusedIndex = props.graphState.focusedPointIndex;
+    if (focusedIndex != null) {
+      var _pointsRef$current$fo;
+      (_pointsRef$current$fo = pointsRef.current[focusedIndex]) == null || _pointsRef$current$fo.focus();
+    }
+  }, [props.graphState.focusedPointIndex, pointsRef]);
+  const statefulProps = _extends({}, props, {
+    graphConfig,
+    polygonRef,
+    pointsRef,
+    lastMoveTimeRef,
+    left,
+    top,
+    dragging,
+    points,
+    constrain,
+    hovered,
+    setHovered,
+    focusVisible,
+    setFocusVisible
+  });
+  return numSides === "unlimited" ? UnlimitedPolygonGraph(statefulProps) : LimitedPolygonGraph(statefulProps);
+};
+const LimitedPolygonGraph = statefulProps => {
+  const {
+    dispatch,
+    hovered,
+    setHovered,
+    focusVisible,
+    setFocusVisible,
+    graphConfig,
+    polygonRef,
+    lastMoveTimeRef,
+    dragging,
+    points,
+    constrain
+  } = statefulProps;
+  const {
+    showAngles,
+    showSides,
+    range,
+    snapTo = "grid"
+  } = statefulProps.graphState;
+  const {
+    disableKeyboardInteraction
+  } = graphConfig;
   const lines = getLines(points);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Polygon, {
     points: [...points],
@@ -34504,7 +34576,7 @@ const LimitedPolygonGraph = props => {
     points: [...points],
     color: "transparent",
     svgPolygonProps: {
-      ref,
+      ref: polygonRef,
       tabIndex: disableKeyboardInteraction ? -1 : 0,
       strokeWidth: TARGET_SIZE,
       style: {
@@ -34516,13 +34588,13 @@ const LimitedPolygonGraph = props => {
       // Required to remove line weighting when user clicks away
       // from the focused polygon
       onKeyDownCapture: () => {
-        setFocusVisible(hasFocusVisible(ref.current));
+        setFocusVisible(hasFocusVisible(polygonRef.current));
       },
       // Required for lines to darken on focus
-      onFocus: () => setFocusVisible(hasFocusVisible(ref.current)),
+      onFocus: () => setFocusVisible(hasFocusVisible(polygonRef.current)),
       // Required for line weighting to update on blur. Without this,
       // the user has to hover over the shape for it to update
-      onBlur: () => setFocusVisible(hasFocusVisible(ref.current)),
+      onBlur: () => setFocusVisible(hasFocusVisible(polygonRef.current)),
       className: "movable-polygon"
     }
   }), points.map((point, i) => /*#__PURE__*/React.createElement(MovablePoint$1, {
@@ -34534,94 +34606,85 @@ const LimitedPolygonGraph = props => {
       const now = Date.now();
       const targetFPS = 40;
       const moveThresholdTime = 1000 / targetFPS;
-      if (now - lastMoveTime.current > moveThresholdTime) {
+      if (now - lastMoveTimeRef.current > moveThresholdTime) {
         dispatch(actions.polygon.movePoint(i, destination));
-        lastMoveTime.current = now;
+        lastMoveTimeRef.current = now;
       }
     }
   })));
 };
-const UnlimitedPolygonGraph = props => {
+const UnlimitedPolygonGraph = statefulProps => {
   const {
-    dispatch
-  } = props;
+    dispatch,
+    graphConfig,
+    left,
+    top,
+    pointsRef,
+    points
+  } = statefulProps;
   const {
     coords,
     closedPolygon
-  } = props.graphState;
-  const graphConfig = useGraphConfig();
+  } = statefulProps.graphState;
+
+  // If the polygon is closed, return a LimitedPolygon component.
+  if (closedPolygon) {
+    const closedPolygonProps = _extends({}, statefulProps, {
+      numSides: coords.length
+    });
+    return /*#__PURE__*/React.createElement(LimitedPolygonGraph, closedPolygonProps);
+  }
   const {
-    range: [x, y],
     graphDimensionsInPixels
   } = graphConfig;
   const widthPx = graphDimensionsInPixels[0];
   const heightPx = graphDimensionsInPixels[1];
-  const [[left, top]] = useTransformVectorsToPixels([x[0], y[1]]);
-  const pointRef = React.useRef([]);
-
-  // TODO(benchristel): can the default set of points be removed here? I don't
-  // think coords can be null.
-  const points = coords != null ? coords : [[0, 0]];
-  React.useEffect(() => {
-    const focusedIndex = props.graphState.focusedPointIndex;
-    if (focusedIndex != null) {
-      var _pointRef$current$foc;
-      (_pointRef$current$foc = pointRef.current[focusedIndex]) == null || _pointRef$current$foc.focus();
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("rect", {
+    style: {
+      fill: "rgba(0,0,0,0)",
+      cursor: "crosshair"
+    },
+    width: widthPx,
+    height: heightPx,
+    x: left,
+    y: top,
+    onClick: event => {
+      const elementRect = event.currentTarget.getBoundingClientRect();
+      const x = event.clientX - elementRect.x;
+      const y = event.clientY - elementRect.y;
+      const graphCoordinates = pixelsToVectors([[x, y]], graphConfig);
+      dispatch(actions.polygon.addPoint(graphCoordinates[0]));
     }
-  }, [props.graphState.focusedPointIndex, pointRef]);
-  if (closedPolygon) {
-    const closedPolygonProps = _extends({}, props, {
-      numSides: coords.length
-    });
-    return /*#__PURE__*/React.createElement(LimitedPolygonGraph, closedPolygonProps);
-  } else {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("rect", {
+  }), /*#__PURE__*/React.createElement(Polyline, {
+    points: [...points],
+    color: "var(--movable-line-stroke-color)",
+    svgPolylineProps: {
+      strokeWidth: "var(--movable-line-stroke-weight)",
       style: {
-        fill: "rgba(0,0,0,0)",
-        cursor: "crosshair"
-      },
-      width: widthPx,
-      height: heightPx,
-      x: left,
-      y: top,
-      onClick: event => {
-        const elementRect = event.currentTarget.getBoundingClientRect();
-        const x = event.clientX - elementRect.x;
-        const y = event.clientY - elementRect.y;
-        const graphCoordinates = pixelsToVectors([[x, y]], graphConfig);
-        dispatch(actions.polygon.addPoint(graphCoordinates[0]));
-      }
-    }), /*#__PURE__*/React.createElement(Polyline, {
-      points: [...points],
-      color: "var(--movable-line-stroke-color)",
-      svgPolylineProps: {
-        strokeWidth: "var(--movable-line-stroke-weight)",
-        style: {
-          fill: "transparent"
-        }
+        fill: "transparent"
       }
-    }), props.graphState.coords.map((point, i) => /*#__PURE__*/React.createElement(MovablePoint$1, {
-      key: i,
-      point: point,
-      sequenceNumber: i + 1,
-      onMove: destination => dispatch(actions.polygon.movePoint(i, destination)),
-      ref: ref => {
-        pointRef.current[i] = ref;
-      },
-      onFocus: () => {
-        dispatch(actions.polygon.focusPoint(i));
-      },
-      onClick: () => {
-        // If the point being clicked is the first point and
-        // there's enough points to form a polygon (3 or more)
-        // Close the shape before setting focus.
-        if (i === 0 && props.graphState.coords.length >= 3) {
-          dispatch(actions.polygon.closePolygon());
-        }
-        dispatch(actions.polygon.clickPoint(i));
+    }
+  }), coords.map((point, i) => /*#__PURE__*/React.createElement(MovablePoint$1, {
+    key: i,
+    point: point,
+    sequenceNumber: i + 1,
+    onMove: destination => dispatch(actions.polygon.movePoint(i, destination)),
+    ref: ref => {
+      pointsRef.current[i] = ref;
+    },
+    onFocus: () => {
+      dispatch(actions.polygon.focusPoint(i));
+    },
+    onClick: () => {
+      // If the point being clicked is the first point and
+      // there's enough points to form a polygon (3 or more)
+      // Close the shape before setting focus.
+      if (i === 0 && coords.length >= 3) {
+        dispatch(actions.polygon.closePolygon());
       }
-    })));
-  }
+      dispatch(actions.polygon.clickPoint(i));
+    }
+  })));
 };
 function getLines(points) {
   return points.map((point, i) => {
@@ -34636,17 +34699,13 @@ const hasFocusVisible = element => {
   };
   try {
     return matches(":focus-visible");
-  } catch (e) {
+  } catch (_unused) {
     // jsdom doesn't support :focus-visible
     // (see https://github.com/jsdom/jsdom/issues/3426),
     // so the call to matches(":focus-visible") will fail in tests.
     return matches(":focus");
   }
 };
-const PolygonGraph = props => {
-  const numSides = props.graphState.numSides;
-  return numSides === "unlimited" ? UnlimitedPolygonGraph(props) : LimitedPolygonGraph(props);
-};
 
 function renderQuadraticGraph(state, dispatch) {
   return {
@@ -40012,7 +40071,8 @@ class Sortable extends React.Component {
     this.setState({
       items
     }, () => {
-      this.props.onMeasure && this.props.onMeasure({
+      var _this$props$onMeasure, _this$props;
+      (_this$props$onMeasure = (_this$props = this.props).onMeasure) == null || _this$props$onMeasure.call(_this$props, {
         widths: widths,
         heights: heights
       });
@@ -40038,6 +40098,7 @@ class Sortable extends React.Component {
   // for testing and other cases where dragging and dropping may
   // not be available
   moveOptionToIndex(option, index) {
+    var _this$props$onChange, _this$props2;
     const {
       items
     } = this.state;
@@ -40062,7 +40123,7 @@ class Sortable extends React.Component {
     this.setState({
       items: nextItems
     });
-    this.props.onChange && this.props.onChange({});
+    (_this$props$onChange = (_this$props2 = this.props).onChange) == null || _this$props$onChange.call(_this$props2, {});
   }
   onMouseMove(key) {
     // Dragging: Rearrange items based on draggable's position
@@ -40120,6 +40181,7 @@ class Sortable extends React.Component {
     // TODO(jeff, CP-3128): Use Wonder Blocks Timing API.
     // eslint-disable-next-line no-restricted-syntax
     const nextAnimationFrame = requestAnimationFrame(() => {
+      var _this$props$onChange2, _this$props3;
       const items = _.map(this.state.items, function (item) {
         if (item.key === key) {
           item.state = ItemState.ANIMATING;
@@ -40142,7 +40204,7 @@ class Sortable extends React.Component {
       // HACK: We need to know *that* the widget changed, but currently it's
       // not set up in a nice way to tell us *how* it changed, since the
       // permutation of the items is stored in state.
-      this.props.onChange && this.props.onChange({});
+      (_this$props$onChange2 = (_this$props3 = this.props).onChange) == null || _this$props$onChange2.call(_this$props3, {});
     });
 
     // @ts-expect-error - TS2339 - Property 'animationFrameRequest' does not exist on type 'Sortable'.
@@ -42820,11 +42882,12 @@ class Card extends React.Component {
       event.preventDefault();
       const loc = Util.extractPointerLocation(event);
       if (loc) {
+        var _this$props$onMouseDo, _this$props;
         this.setState({
           dragging: true
         });
         this.bindMouseMoveUp();
-        this.props.onMouseDown && this.props.onMouseDown(loc, this);
+        (_this$props$onMouseDo = (_this$props = this.props).onMouseDown) == null || _this$props$onMouseDo.call(_this$props, loc, this);
       }
     };
     this.onMouseMove = event => {
@@ -42834,18 +42897,20 @@ class Card extends React.Component {
       event.preventDefault();
       const loc = Util.extractPointerLocation(event);
       if (loc) {
-        this.props.onMouseMove && this.props.onMouseMove(loc);
+        var _this$props$onMouseMo, _this$props2;
+        (_this$props$onMouseMo = (_this$props2 = this.props).onMouseMove) == null || _this$props$onMouseMo.call(_this$props2, loc);
       }
     };
     this.onMouseUp = event => {
       event.preventDefault();
       const loc = Util.extractPointerLocation(event);
       if (loc) {
+        var _this$props$onMouseUp, _this$props3;
         this.setState({
           dragging: false
         });
         this.unbindMouseMoveUp();
-        this.props.onMouseUp && this.props.onMouseUp(loc);
+        (_this$props$onMouseUp = (_this$props3 = this.props).onMouseUp) == null || _this$props$onMouseUp.call(_this$props3, loc);
       }
     };
   }
@@ -45107,7 +45172,7 @@ const init = function init() {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "47.0.1";
+const libVersion = "48.1.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -45869,28 +45934,6 @@ class ServerItemRenderer extends React.Component {
     return this.questionRenderer.getUserInputMap();
   }
 
-  /**
-   * Grades the item.
-   *
-   * @deprecated use scorePerseusItem
-   */
-  scoreInput() {
-    const guess = this.getUserInput();
-    const score = scorePerseusItem(this.props.item.question, guess, this.context.strings, this.context.locale);
-
-    // Continue to include an empty guess for the now defunct answer area.
-    // TODO(alex): Check whether we rely on the format here for
-    //             analyzing ProblemLogs. If not, remove this layer.
-    const maxCompatGuess = [this.questionRenderer.getUserInput(), []];
-    const keScore = keScoreFromPerseusScore(score, maxCompatGuess, this.questionRenderer.getSerializedState());
-    const emptyQuestionAreaWidgets = this.questionRenderer.emptyWidgets();
-    this.setState({
-      questionCompleted: keScore.correct,
-      questionHighlightedWidgets: emptyQuestionAreaWidgets
-    });
-    return keScore;
-  }
-
   /**
    * Returns an array of all widget IDs in the order they occur in
    * the question content.
@@ -48681,5 +48724,5 @@ const ScoringUtil = {
  * Types
  */
 
-export { ApiOptions, ArticleRenderer, BaseRadio, Categorizer$1 as Categorizer, changeable as Changeable, ClassNames, dependencies as Dependencies, EditorJsonify, Expression, GrapherUtil, Grapher$1 as GrapherWidget, HintRenderer, HintsRenderer, InputNumber$1 as InputNumber, InteractiveGraph$1 as InteractiveGraphWidget, ItemExtras, JiptParagraphs, KhanColors, KhanMath, context as LoadingContext, Log, Matrix$1 as MatrixWidget, NumericInput$1 as NumericInput, PerseusExpressionAnswerFormConsidered, PerseusI18nContext, PerseusI18nContextProvider, PerseusMarkdown, Plotter$1 as PlotterWidget, QUESTION_WIDGETS, Radio, Renderer, ScoringUtil, ref as ServerItemRenderer, Table$1 as TableWidget, Util, denylist as WIDGET_PROP_DENYLIST, widgets$1 as Widgets, addWidget, apiVersion, bodyXsmallBold, components, containerSizeClass, contentHasWidgetType, convertWidgetNameToEnum, displaySigFigs, generateTestCategorizerWidget, generateTestExpressionWidget, generateTestInteractiveGraphWidget, generateTestNumericInputWidget, generateTestPerseusItem, generateTestRadioWidget, genericPerseusItemData, getAngleCoords, getAnswerFromUserInput, getAnswersFromWidgets, getCircleCoords, getClockwiseAngle, getCorrectAnswerForWidgetId, getImagesWithoutAltData, getInteractiveBoxFromSizeClass, getLineCoords, getLinearSystemCoords, getPointCoords, getPolygonCoords, getQuadraticCoords, getSegmentCoords, getSinusoidCoords, getValidWidgetIds, getWidgetFromWidgetMap, getWidgetIdsFromContent, getWidgetIdsFromContentByType, getWidgetTypeByWidgetId, getWidgetsFromWidgetMap, getWidgetsMapFromItemData, iconChevronDown, iconTrash, init, injectWidgets, interactiveSizes$1 as interactiveSizes, isItemRenderableByVersion, isWidgetIdInContent, isWrongAnswerSupported, itemDataVersion, ItemVersion as itemVersion, libVersion, lockedFigureColors, lockedFigureFillStyles, makeSafeUrl, mathOnlyParser, mediaQueries, parsePerseusItem, plotterPlotTypes, preprocessTex, registerAllWidgetsForTesting, scorePerseusItem, shouldHaveIndividualAnswer, traverse, usePerseusI18n, violatingWidgets, allWidgets as widgets };
+export { ApiOptions, ArticleRenderer, BaseRadio, Categorizer$1 as Categorizer, changeable as Changeable, ClassNames, dependencies as Dependencies, EditorJsonify, Expression, GrapherUtil, Grapher$1 as GrapherWidget, HintRenderer, HintsRenderer, InputNumber$1 as InputNumber, InteractiveGraph$1 as InteractiveGraphWidget, ItemExtras, JiptParagraphs, KhanColors, KhanMath, context as LoadingContext, Log, Matrix$1 as MatrixWidget, NumericInput$1 as NumericInput, PerseusExpressionAnswerFormConsidered, PerseusI18nContext, PerseusI18nContextProvider, PerseusMarkdown, Plotter$1 as PlotterWidget, QUESTION_WIDGETS, Radio, Renderer, ScoringUtil, ref as ServerItemRenderer, Table$1 as TableWidget, Util, denylist as WIDGET_PROP_DENYLIST, widgets$1 as Widgets, addWidget, apiVersion, bodyXsmallBold, components, containerSizeClass, contentHasWidgetType, convertWidgetNameToEnum, displaySigFigs, generateTestCategorizerWidget, generateTestExpressionWidget, generateTestInteractiveGraphWidget, generateTestNumericInputWidget, generateTestPerseusItem, generateTestRadioWidget, genericPerseusItemData, getAngleCoords, getAnswerFromUserInput, getAnswersFromWidgets, getCircleCoords, getClockwiseAngle, getCorrectAnswerForWidgetId, getImagesWithoutAltData, getInteractiveBoxFromSizeClass, getLineCoords, getLinearSystemCoords, getPointCoords, getPolygonCoords, getQuadraticCoords, getSegmentCoords, getSinusoidCoords, getValidWidgetIds, getWidgetFromWidgetMap, getWidgetIdsFromContent, getWidgetIdsFromContentByType, getWidgetTypeByWidgetId, getWidgetsFromWidgetMap, getWidgetsMapFromItemData, iconChevronDown, iconTrash, init, injectWidgets, interactiveSizes$1 as interactiveSizes, isItemRenderableByVersion, isWidgetIdInContent, isWrongAnswerSupported, itemDataVersion, ItemVersion as itemVersion, libVersion, lockedFigureColors, lockedFigureFillStyles, makeSafeUrl, mathOnlyParser, mediaQueries, parseDataFromJSONP, parsePerseusItem, plotterPlotTypes, preprocessTex, registerAllWidgetsForTesting, scorePerseusItem, shouldHaveIndividualAnswer, traverse, usePerseusI18n, violatingWidgets, allWidgets as widgets };
 //# sourceMappingURL=index.js.map