@khanacademy/perseus 36.0.0 → 36.1.0

package/dist/index.d.ts

@@ -61,7 +61,7 @@ export { default as KhanColors } from "./util/colors";
 export { default as preprocessTex } from "./util/tex-preprocess";
 export { registerAllWidgetsForTesting } from "./util/register-all-widgets-for-testing";
 export * as SizingUtils from "./util/sizing-utils";
-export { getAnswersFromWidgets, injectWidgets, isWrongAnswerSupported, shouldHaveIndividualAnswer, isWidgetIdInContent, getValidWidgetIds, getCorrectAnswerForWidgetId, getAnswerFromUserInput, } from "./util/extract-perseus-data";
+export { getAnswersFromWidgets, injectWidgets, isWrongAnswerSupported, shouldHaveIndividualAnswer, isWidgetIdInContent, getValidWidgetIds, getCorrectAnswerForWidgetId, getAnswerFromUserInput, getImagesWithoutAltData, } from "./util/extract-perseus-data";
 export { parsePerseusItem } from "./util/parse-perseus-json";
 export { generateTestPerseusItem, genericPerseusItemData, generateTestRadioWidget, generateTestInteractiveGraphWidget, generateTestCategorizerWidget, generateTestExpressionWidget, generateTestNumericInputWidget, } from "./util/test-utils";
 export { getWidgetTypeByWidgetId, contentHasWidgetType, getWidgetIdsFromContent, getWidgetIdsFromContentByType, getWidgetsMapFromItemData, getWidgetFromWidgetMap, getWidgetsFromWidgetMap, } from "./widget-type-utils";

package/dist/index.js

@@ -33597,7 +33597,7 @@ function calculateBisectorPoint(point1, point2, vertex, isReflex, allowReflex, a
   return scaledBisector;
 }
 
-const MovablePoint$1 = props => {
+const MovablePoint$1 = /*#__PURE__*/React__namespace.forwardRef((props, pointRef) => {
   const {
     snapStep
   } = useGraphConfig();
@@ -33620,7 +33620,21 @@ const MovablePoint$1 = props => {
     constrainKeyboardMovement: constrain
   });
   return /*#__PURE__*/React__namespace.createElement(MovablePointView, {
-    ref: elementRef,
+    ref: ref => {
+      // Note: This handles the case where pointRef is either a
+      // function or a MutableRefObject. Mostly this is to satisfy
+      // the type system, the function branch seems to be the only
+      // one that occurs
+      if (typeof pointRef === "function") {
+        pointRef(ref);
+      } else if (pointRef !== null) {
+        pointRef.current = ref;
+      }
+
+      // This ref is for the useDraggable and is not passed up the
+      // chain
+      elementRef.current = ref;
+    },
     point: point,
     color: color,
     dragging: dragging,
@@ -33635,7 +33649,7 @@ const MovablePoint$1 = props => {
     },
     cursor: cursor
   });
-};
+});
 
 const PolygonGraph = props => {
   const [hovered, setHovered] = React__namespace.useState(false);
@@ -34225,6 +34239,13 @@ function UnlimitedPointGraph(props) {
   const height = maxY - minY;
   const [[widthPx, heightPx]] = useTransformDimensionsToPixels([width, height]);
   const [[left, top]] = useTransformVectorsToPixels([minX, maxY]);
+  const itemsRef = React__namespace.useRef([]);
+  React__namespace.useEffect(() => {
+    const focusedIndex = props.graphState.focusedPointIndex;
+    if (focusedIndex != null) {
+      itemsRef.current[focusedIndex]?.focus();
+    }
+  }, [props.graphState.focusedPointIndex, itemsRef]);
   return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("rect", {
     style: {
       fill: "rgba(0,0,0,0)",
@@ -34245,12 +34266,23 @@ function UnlimitedPointGraph(props) {
     key: i,
     point: point,
     onMove: destination => dispatch(actions.pointGraph.movePoint(i, destination)),
+    ref: ref => {
+      itemsRef.current[i] = ref;
+    },
     onFocusChange: (event, isFocused) => {
       if (isFocused) {
         dispatch(actions.pointGraph.focusPoint(i));
       } else {
         if (event.relatedTarget?.id === REMOVE_BUTTON_ID) {
           return;
+          // This is an optimization: If the next target
+          // is a point then don't blur because it casues
+          // the remove button to get taken off the page
+          // and then put back on The new point will
+          // receive focus and set the correct state in
+          // the reducer
+        } else if (event.relatedTarget?.classList.contains("movable-point")) {
+          return;
         }
         dispatch(actions.pointGraph.blurPoint());
       }
@@ -34425,11 +34457,17 @@ const MafsGraph = props => {
     fullGraphAriaLabel,
     fullGraphAriaDescription
   } = props;
+  const {
+    type
+  } = state;
   const [width, height] = props.box;
   const tickStep = props.step;
   const uniqueId = React__namespace.useId();
   const descriptionId = `interactive-graph-description-${uniqueId}`;
   const graphRef = React__namespace.useRef(null);
+  const {
+    analytics
+  } = useDependencies();
 
   // Set up the SVG attributes for the nested SVGs that help lock
   // the grid and graph elements to the bounds of the graph.
@@ -34449,6 +34487,14 @@ const MafsGraph = props => {
   const {
     strings
   } = usePerseusI18n();
+  wonderBlocksCore.useOnMountEffect(() => {
+    analytics.onAnalyticsEvent({
+      type: "perseus:interactive-graph-widget:rendered",
+      payload: {
+        type
+      }
+    });
+  });
   return /*#__PURE__*/React__namespace.createElement(GraphConfigContext.Provider, {
     value: {
       range: state.range,
@@ -35233,11 +35279,14 @@ function doFocusPoint(state, action) {
 function doBlurPoint(state, action) {
   switch (state.type) {
     case "point":
-      return {
+      const nextState = {
         ...state,
-        focusedPointIndex: null,
         showRemovePointButton: false
       };
+      if (state.interactionMode === "mouse") {
+        nextState.focusedPointIndex = null;
+      }
+      return nextState;
     default:
       return state;
   }
@@ -35640,17 +35689,24 @@ function doAddPoint(state, action) {
     ...state,
     hasBeenInteractedWith: true,
     coords: [...state.coords, snappedPoint],
-    showRemovePointButton: false
+    showRemovePointButton: false,
+    focusedPointIndex: state.coords.length
   };
 }
 function doRemovePoint(state, action) {
   if (state.type !== "point") {
     return state;
   }
+  let nextFocusedPointIndex;
+  if (state.interactionMode === "mouse") {
+    nextFocusedPointIndex = null;
+  } else {
+    nextFocusedPointIndex = state.coords.length > 1 ? state.coords.length - 2 : null;
+  }
   return {
     ...state,
     coords: state.coords.filter((_, i) => i !== action.index),
-    focusedPointIndex: null,
+    focusedPointIndex: nextFocusedPointIndex,
     showRemovePointButton: false
   };
 }
@@ -45238,7 +45294,7 @@ const init = function (options) {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "36.0.0";
+const libVersion = "36.1.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -48426,6 +48482,38 @@ function injectWidgets(content, widgets, widgetProps) {
   return context;
 }
 
+/**
+ * Looks through widgets to identify images that do not have alt text.
+ *
+ * We pass in the fuller perseusRenderer object to allow for the possibility
+ * of expanding to include other img data from content & images in the future.
+ *
+ * @param {PerseusRenderer} perseusRenderer
+ * @returns a stringified list of {widgetId, imageUrl} for imgs that don't have alt text
+ */
+function getImagesWithoutAltData(perseusRenderer) {
+  if (!perseusRenderer.widgets) {
+    return "";
+  }
+  const imgsWithoutAltData = [];
+  Object.entries(perseusRenderer.widgets).forEach(_ref3 => {
+    let [widgetId, widget] = _ref3;
+    if (!widget.options) {
+      return;
+    }
+
+    // Add to imagesWithoutAltData if img alt is missing and
+    // image has valid img url data.
+    if (widget.type === "image" && !widget.options.alt && widget.options.backgroundImage?.url) {
+      imgsWithoutAltData.push({
+        widgetId,
+        imgUrl: widget.options.backgroundImage.url
+      });
+    }
+  });
+  return JSON.stringify(imgsWithoutAltData);
+}
+
 /* Widgets that have individual answers */
 const INDIVIDUAL_ANSWER_WIDGETS = ["interactive-graph", "categorizer", "grapher"];
 
@@ -48758,6 +48846,7 @@ exports.getAnswerFromUserInput = getAnswerFromUserInput;
 exports.getAnswersFromWidgets = getAnswersFromWidgets;
 exports.getCircleCoords = getCircleCoords;
 exports.getCorrectAnswerForWidgetId = getCorrectAnswerForWidgetId;
+exports.getImagesWithoutAltData = getImagesWithoutAltData;
 exports.getLineCoords = getLineCoords;
 exports.getLinearSystemCoords = getLinearSystemCoords;
 exports.getPointCoords = getPointCoords;