@khanacademy/perseus 36.0.0 → 36.1.0

package/dist/es/index.js

@@ -2,7 +2,7 @@ import * as KAS from '@khanacademy/kas';
 import { MathInputI18nContext, CursorContext, getKeyTranslator, createMathField, getCursorContext, DesktopKeypad, convertDotToTimesByLocale, mathQuillInstance, KeypadInput, KeypadType, KeyArray, keypadElementPropType } from '@khanacademy/math-input';
 import * as PerseusLinter from '@khanacademy/perseus-linter';
 import { linterContextDefault, Rule } from '@khanacademy/perseus-linter';
-import { View, RenderStateRoot, UniqueIDProvider, useLatestRef, useUniqueIdWithMock, Text as Text$2 } from '@khanacademy/wonder-blocks-core';
+import { View, RenderStateRoot, UniqueIDProvider, useOnMountEffect, useLatestRef, useUniqueIdWithMock, Text as Text$2 } from '@khanacademy/wonder-blocks-core';
 import Tooltip$1 from '@khanacademy/wonder-blocks-tooltip';
 import { HeadingMedium, LabelSmall, Body, LabelMedium } from '@khanacademy/wonder-blocks-typography';
 import { StyleSheet, css } from 'aphrodite';
@@ -33280,7 +33280,7 @@ function calculateBisectorPoint(point1, point2, vertex, isReflex, allowReflex, a
   return scaledBisector;
 }
 
-const MovablePoint$1 = props => {
+const MovablePoint$1 = /*#__PURE__*/React.forwardRef((props, pointRef) => {
   const {
     snapStep
   } = useGraphConfig();
@@ -33303,7 +33303,21 @@ const MovablePoint$1 = props => {
     constrainKeyboardMovement: constrain
   });
   return /*#__PURE__*/React.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$1,
     dragging: dragging,
@@ -33319,7 +33333,7 @@ const MovablePoint$1 = props => {
     },
     cursor: cursor
   });
-};
+});
 
 const PolygonGraph = props => {
   const [hovered, setHovered] = React.useState(false);
@@ -33899,6 +33913,14 @@ function UnlimitedPointGraph(props) {
   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]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("rect", {
     style: {
       fill: "rgba(0,0,0,0)",
@@ -33919,13 +33941,24 @@ 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 {
-        var _event$relatedTarget;
+        var _event$relatedTarget, _event$relatedTarget2;
         if (((_event$relatedTarget = event.relatedTarget) == null ? void 0 : _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$relatedTarget2 = event.relatedTarget) != null && _event$relatedTarget2.classList.contains("movable-point")) {
+          return;
         }
         dispatch(actions.pointGraph.blurPoint());
       }
@@ -34101,11 +34134,17 @@ const MafsGraph = props => {
     fullGraphAriaLabel,
     fullGraphAriaDescription
   } = props;
+  const {
+    type
+  } = state;
   const [width, height] = props.box;
   const tickStep = props.step;
   const uniqueId = React.useId();
   const descriptionId = `interactive-graph-description-${uniqueId}`;
   const graphRef = React.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.
@@ -34125,6 +34164,14 @@ const MafsGraph = props => {
   const {
     strings
   } = usePerseusI18n();
+  useOnMountEffect(() => {
+    analytics.onAnalyticsEvent({
+      type: "perseus:interactive-graph-widget:rendered",
+      payload: {
+        type
+      }
+    });
+  });
   return /*#__PURE__*/React.createElement(GraphConfigContext.Provider, {
     value: {
       range: state.range,
@@ -34888,10 +34935,13 @@ function doFocusPoint(state, action) {
 function doBlurPoint(state, action) {
   switch (state.type) {
     case "point":
-      return _extends({}, state, {
-        focusedPointIndex: null,
+      const nextState = _extends({}, state, {
         showRemovePointButton: false
       });
+      if (state.interactionMode === "mouse") {
+        nextState.focusedPointIndex = null;
+      }
+      return nextState;
     default:
       return state;
   }
@@ -35275,16 +35325,23 @@ function doAddPoint(state, action) {
   return _extends({}, 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 _extends({}, state, {
     coords: state.coords.filter((_, i) => i !== action.index),
-    focusedPointIndex: null,
+    focusedPointIndex: nextFocusedPointIndex,
     showRemovePointButton: false
   });
 }
@@ -44873,7 +44930,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 = "36.0.0";
+const libVersion = "36.1.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -48050,6 +48107,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(([widgetId, widget]) => {
+    var _widget$options$backg;
+    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$backg = widget.options.backgroundImage) != null && _widget$options$backg.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"];
 
@@ -48319,5 +48408,5 @@ const EditorJsonify = {
   }
 };
 
-export { ApiOptions, ArticleRenderer, BaseRadio, Categorizer$1 as Categorizer, changeable as Changeable, ClassNames, dependencies as Dependencies, EditorJsonify, Expression, util as 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, MultiItems, NumericInput$1 as NumericInput, PerseusExpressionAnswerFormConsidered, PerseusI18nContext, PerseusI18nContextProvider, PerseusMarkdown, Plotter$1 as PlotterWidget, QUESTION_WIDGETS, Radio, Renderer, ref as ServerItemRenderer, sizingUtils as SizingUtils, Table$1 as TableWidget, Util, denylist as WIDGET_PROP_DENYLIST, widgets$1 as Widgets, addWidget, apiVersion, buildEmptyItemTreeForShape, buildMapper, components, constants, contentHasWidgetType, convertWidgetNameToEnum, displaySigFigs, generateTestCategorizerWidget, generateTestExpressionWidget, generateTestInteractiveGraphWidget, generateTestNumericInputWidget, generateTestPerseusItem, generateTestRadioWidget, genericPerseusItemData, getAngleCoords, getAnswerFromUserInput, getAnswersFromWidgets, getCircleCoords, getCorrectAnswerForWidgetId, getLineCoords, getLinearSystemCoords, getPointCoords, getPolygonCoords, getQuadraticCoords, getSegmentCoords, getSinusoidCoords, getValidWidgetIds, getWidgetFromWidgetMap, getWidgetIdsFromContent, getWidgetIdsFromContentByType, getWidgetTypeByWidgetId, getWidgetsFromWidgetMap, getWidgetsMapFromItemData, globalConstants, globalStyles, iconPaths as icons, init, injectWidgets, interactiveSizes$1 as interactiveSizes, isItemRenderableByVersion, isWidgetIdInContent, isWrongAnswerSupported, itemDataVersion, itemToTree, ItemVersion as itemVersion, libVersion, lockedFigureColors, lockedFigureFillStyles, makeSafeUrl, mediaQueries, parsePerseusItem, plotterPlotTypes, preprocessTex, registerAllWidgetsForTesting, shapes, shouldHaveIndividualAnswer, traverse, usePerseusI18n, violatingWidgets, allWidgets as widgets };
+export { ApiOptions, ArticleRenderer, BaseRadio, Categorizer$1 as Categorizer, changeable as Changeable, ClassNames, dependencies as Dependencies, EditorJsonify, Expression, util as 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, MultiItems, NumericInput$1 as NumericInput, PerseusExpressionAnswerFormConsidered, PerseusI18nContext, PerseusI18nContextProvider, PerseusMarkdown, Plotter$1 as PlotterWidget, QUESTION_WIDGETS, Radio, Renderer, ref as ServerItemRenderer, sizingUtils as SizingUtils, Table$1 as TableWidget, Util, denylist as WIDGET_PROP_DENYLIST, widgets$1 as Widgets, addWidget, apiVersion, buildEmptyItemTreeForShape, buildMapper, components, constants, contentHasWidgetType, convertWidgetNameToEnum, displaySigFigs, generateTestCategorizerWidget, generateTestExpressionWidget, generateTestInteractiveGraphWidget, generateTestNumericInputWidget, generateTestPerseusItem, generateTestRadioWidget, genericPerseusItemData, getAngleCoords, getAnswerFromUserInput, getAnswersFromWidgets, getCircleCoords, getCorrectAnswerForWidgetId, getImagesWithoutAltData, getLineCoords, getLinearSystemCoords, getPointCoords, getPolygonCoords, getQuadraticCoords, getSegmentCoords, getSinusoidCoords, getValidWidgetIds, getWidgetFromWidgetMap, getWidgetIdsFromContent, getWidgetIdsFromContentByType, getWidgetTypeByWidgetId, getWidgetsFromWidgetMap, getWidgetsMapFromItemData, globalConstants, globalStyles, iconPaths as icons, init, injectWidgets, interactiveSizes$1 as interactiveSizes, isItemRenderableByVersion, isWidgetIdInContent, isWrongAnswerSupported, itemDataVersion, itemToTree, ItemVersion as itemVersion, libVersion, lockedFigureColors, lockedFigureFillStyles, makeSafeUrl, mediaQueries, parsePerseusItem, plotterPlotTypes, preprocessTex, registerAllWidgetsForTesting, shapes, shouldHaveIndividualAnswer, traverse, usePerseusI18n, violatingWidgets, allWidgets as widgets };
 //# sourceMappingURL=index.js.map