@khanacademy/perseus 33.2.0 → 33.3.0

package/dist/index.js

@@ -23977,9 +23977,8 @@ const BaseRadio = function (props) {
     // element) We have to add some extra behavior to make
     // sure that we can still check the choice.
     let listElem = null;
-    let clickHandler = null;
+    let clickHandler;
     if (editMode) {
-      // @ts-expect-error - TS2322 - Type '(e: any) => void' is not assignable to type 'null'.
       clickHandler = e => {
         // Traverse the parent nodes of the clicked
         // element.
@@ -24006,19 +24005,11 @@ const BaseRadio = function (props) {
     // somehow break something happening inside a choice's
     // child Renderers, by changing when we mount/unmount?
     return /*#__PURE__*/React__namespace.createElement("li", {
-      key: i
-      // @ts-expect-error - TS2322 - Type 'HTMLLIElement | null' is not assignable to type 'null'.
-      ,
-      ref: e => listElem = e
-      // @ts-expect-error - TS2322 - Type 'readonly string[]' is not assignable to type 'string'.
-      ,
-      className: className
-      // @ts-expect-error - TS2322 - Type 'null' is not assignable to type 'MouseEventHandler<HTMLLIElement> | undefined'.
-      ,
-      onClick: clickHandler
-      // @ts-expect-error - TS2322 - Type '((e: TouchEvent) => void) | null' is not assignable to type 'TouchEventHandler<HTMLLIElement> | undefined'.
-      ,
-      onTouchStart: !labelWrap ? null : captureScratchpadTouchStart$1
+      key: i,
+      ref: e => listElem = e,
+      className: className,
+      onClick: clickHandler,
+      onTouchStart: labelWrap ? undefined : captureScratchpadTouchStart$1
     }, /*#__PURE__*/React__namespace.createElement(Element, _extends({}, elementProps, {
       ref: ref
     })));
@@ -29718,9 +29709,7 @@ class NumberInput extends React__namespace.Component {
       onFocus: this._handleFocus,
       onBlur: this._handleBlur,
       onKeyPress: this._handleBlur,
-      onKeyDown: this._onKeyDown
-      // @ts-expect-error - TS2322 - Type '(e: TouchEvent) => void' is not assignable to type 'TouchEventHandler<HTMLInputElement>'.
-      ,
+      onKeyDown: this._onKeyDown,
       onTouchStart: captureScratchpadTouchStart,
       defaultValue: toNumericString(this.props.value, this.state.format),
       value: undefined
@@ -29980,7 +29969,8 @@ function LockedLabel(props) {
       left: x,
       top: y,
       color: lockedFigureColors[color],
-      fontSize: wonderBlocksTokens.font.size[size]
+      fontSize: wonderBlocksTokens.font.size[size],
+      backgroundColor: "rgba(255, 255, 255, 0.8)"
     }
   }, /*#__PURE__*/React__namespace.createElement(TeX, null, text));
 }
@@ -30358,7 +30348,8 @@ const actions = {
     addPoint,
     removePoint,
     focusPoint,
-    blurPoint
+    blurPoint,
+    clickPoint
   },
   polygon: {
     movePoint,
@@ -30420,6 +30411,13 @@ function blurPoint() {
     type: BLUR_POINT
   };
 }
+const CLICK_POINT = "click-point";
+function clickPoint(index) {
+  return {
+    type: CLICK_POINT,
+    index
+  };
+}
 const MOVE_ALL = "move-all";
 function moveAll(delta) {
   return {
@@ -30748,10 +30746,14 @@ const MovablePointView = /*#__PURE__*/React.forwardRef((props, hitboxRef) => {
     },
     "data-testid": "movable-point",
     tabIndex: disableKeyboardInteraction ? -1 : tabIndex(focusBehavior),
-    onFocus: () => {
-      return getOnFocusChangeCallback(focusBehavior)(true);
+    onFocus: event => {
+      const callback = getOnFocusChangeCallback(focusBehavior);
+      callback && callback(event, true);
+    },
+    onBlur: event => {
+      const callback = getOnFocusChangeCallback(focusBehavior);
+      callback && callback(event, false);
     },
-    onBlur: () => getOnFocusChangeCallback(focusBehavior)(false),
     onClick: onClick
   }, /*#__PURE__*/React__namespace.createElement("circle", {
     className: "movable-point-hitbox",
@@ -31405,6 +31407,7 @@ const MovablePoint$1 = props => {
     point,
     onMove = () => {},
     onFocusChange = () => {},
+    onClick = () => {},
     cursor,
     color = wonderBlocksTokens.color.blue,
     constrain = p => snap(snapStep, p)
@@ -31427,7 +31430,10 @@ const MovablePoint$1 = props => {
       tabIndex: 0,
       onFocusChange
     },
-    onClick: () => elementRef.current?.focus(),
+    onClick: () => {
+      onClick && onClick();
+      elementRef.current?.focus();
+    },
     cursor: cursor
   });
 };
@@ -31638,6 +31644,11 @@ function getGradableGraph(state, initialGraph) {
       allowReflexAngles: state.allowReflexAngles
     };
   }
+  if (state.type === "none" && initialGraph.type === "none") {
+    return {
+      type: "none"
+    };
+  }
   throw new Error("Mafs is not yet implemented for graph type: " + initialGraph.type);
 }
 
@@ -32035,12 +32046,18 @@ function UnlimitedPointGraph(props) {
     key: i,
     point: point,
     onMove: destination => dispatch(actions.pointGraph.movePoint(i, destination)),
-    onFocusChange: isFocused => {
+    onFocusChange: (event, isFocused) => {
       if (isFocused) {
         dispatch(actions.pointGraph.focusPoint(i));
       } else {
+        if (event.relatedTarget?.id === REMOVE_BUTTON_ID) {
+          return;
+        }
         dispatch(actions.pointGraph.blurPoint());
       }
+    },
+    onClick: () => {
+      dispatch(actions.pointGraph.clickPoint(i));
     }
   })));
 }
@@ -32188,6 +32205,18 @@ function useDraggablePx(args) {
   });
 }
 
+/**
+ * Render the Mafs graph with the specified background and graph elements.
+ *
+ * Render order (back to front):
+ * - Grid
+ * - Axis Ticks, Axis Arrows, and Axis Labels
+ * - Locked Figures
+ * - Locked Labels
+ * - Protractor
+ * - Interactive Graph Elements
+ */
+const REMOVE_BUTTON_ID = "perseus_mafs_remove_button";
 const MafsGraph = props => {
   const {
     state,
@@ -32266,8 +32295,6 @@ const MafsGraph = props => {
   }, fullGraphAriaDescription), /*#__PURE__*/React__namespace.createElement(LegacyGrid, {
     box: props.box,
     backgroundImage: props.backgroundImage
-  }), props.showLabelsFlag && props.lockedFigures && /*#__PURE__*/React__namespace.createElement(GraphLockedLabelsLayer, {
-    lockedFigures: props.lockedFigures
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
     style: {
       position: "absolute",
@@ -32297,10 +32324,27 @@ const MafsGraph = props => {
   props.markings === "graph" && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(AxisTicks, null), /*#__PURE__*/React__namespace.createElement(AxisArrows, null)), /*#__PURE__*/React__namespace.createElement("svg", nestedSVGAttributes, props.lockedFigures && /*#__PURE__*/React__namespace.createElement(GraphLockedLayer, {
     lockedFigures: props.lockedFigures,
     range: state.range
-  }), props.showProtractor && /*#__PURE__*/React__namespace.createElement(Protractor, null), renderGraph({
+  }))), props.showLabelsFlag && props.lockedFigures && /*#__PURE__*/React__namespace.createElement(GraphLockedLabelsLayer, {
+    lockedFigures: props.lockedFigures
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: {
+      position: "absolute"
+    }
+  }, /*#__PURE__*/React__namespace.createElement(mafs.Mafs, {
+    preserveAspectRatio: false,
+    viewBox: {
+      x: state.range[X],
+      y: state.range[Y],
+      padding: 0
+    },
+    pan: false,
+    zoom: false,
+    width: width,
+    height: height
+  }, /*#__PURE__*/React__namespace.createElement("svg", nestedSVGAttributes, props.showProtractor && /*#__PURE__*/React__namespace.createElement(Protractor, null), renderGraph({
     state,
     dispatch
-  }))))), renderGraphControls({
+  })))))), renderGraphControls({
     state,
     dispatch,
     width
@@ -32311,26 +32355,17 @@ const renderPointGraphControls = props => /*#__PURE__*/React__namespace.createEl
     flexDirection: "row",
     width: props.width
   }
-}, /*#__PURE__*/React__namespace.createElement(Button__default["default"], {
-  kind: "secondary",
-  style: {
-    width: "100%",
-    marginLeft: "20px"
-  },
-  tabIndex: 0,
-  onClick: () => {
-    props.dispatch(actions.pointGraph.addPoint([0, 0]));
-  }
-}, "Add Point"), (props.state.focusedPointIndex !== null || props.state.previouslyFocusedPointIndex !== null) && /*#__PURE__*/React__namespace.createElement(Button__default["default"], {
+}, props.state.showRemovePointButton && props.state.focusedPointIndex !== null && /*#__PURE__*/React__namespace.createElement(Button__default["default"], {
+  id: REMOVE_BUTTON_ID,
   kind: "secondary",
   color: "destructive",
-  tabIndex: 0,
+  tabIndex: -1,
   style: {
     width: "100%",
     marginLeft: "20px"
   },
   onClick: event => {
-    props.dispatch(actions.pointGraph.removePoint(props.state.previouslyFocusedPointIndex));
+    props.dispatch(actions.pointGraph.removePoint(props.state.focusedPointIndex));
   }
 }, "Remove Point"));
 const renderGraphControls = props => {
@@ -32465,6 +32500,8 @@ const renderGraph = props => {
         graphState: state,
         dispatch: dispatch
       });
+    case "none":
+      return null;
     default:
       throw new wonderStuffCore.UnreachableCaseError(type);
   }
@@ -32523,7 +32560,7 @@ function initializeGraphState(params) {
         coords: getPointCoords(graph, range, step),
         numPoints: graph.numPoints || 0,
         focusedPointIndex: null,
-        previouslyFocusedPointIndex: null
+        showRemovePointButton: false
       };
     case "circle":
       return {
@@ -32557,6 +32594,11 @@ function initializeGraphState(params) {
         allowReflexAngles: Boolean(graph.allowReflexAngles),
         snapDegrees: Number(graph.snapDegrees)
       };
+    case "none":
+      return {
+        ...shared,
+        type: "none"
+      };
     default:
       throw new wonderStuffCore.UnreachableCaseError(graph);
   }
@@ -32789,6 +32831,8 @@ function interactiveGraphReducer(state, action) {
       return doBlurPoint(state);
     case DELETE_INTENT:
       return doDeleteIntent(state);
+    case CLICK_POINT:
+      return doClickPoint(state, action);
     default:
       throw new wonderStuffCore.UnreachableCaseError(action);
   }
@@ -32820,13 +32864,26 @@ function doBlurPoint(state, action) {
     case "point":
       return {
         ...state,
-        previouslyFocusedPointIndex: state.focusedPointIndex,
-        focusedPointIndex: null
+        focusedPointIndex: null,
+        showRemovePointButton: false
       };
     default:
       return state;
   }
 }
+function doClickPoint(state, action) {
+  if (state.type !== "point") {
+    return state;
+  }
+  if (state.numPoints === "unlimited") {
+    return {
+      ...state,
+      focusedPointIndex: action.index,
+      showRemovePointButton: true
+    };
+  }
+  return state;
+}
 function doMovePointInFigure(state, action) {
   switch (state.type) {
     case "segment":
@@ -32867,6 +32924,8 @@ function doMovePointInFigure(state, action) {
       }
     case "angle":
     case "circle":
+      throw new Error("FIXME implement circle reducer");
+    case "none":
     case "point":
     case "polygon":
     case "quadratic":
@@ -33182,7 +33241,8 @@ function doAddPoint(state, action) {
   return {
     ...state,
     hasBeenInteractedWith: true,
-    coords: [...state.coords, snappedPoint]
+    coords: [...state.coords, snappedPoint],
+    showRemovePointButton: false
   };
 }
 function doRemovePoint(state, action) {
@@ -33193,7 +33253,7 @@ function doRemovePoint(state, action) {
     ...state,
     coords: state.coords.filter((_, i) => i !== action.index),
     focusedPointIndex: null,
-    previouslyFocusedPointIndex: null
+    showRemovePointButton: false
   };
 }
 const getDeltaVertex = (maxMoves, minMoves, delta) => {
@@ -33592,6 +33652,7 @@ const StatefulMafsGraph = /*#__PURE__*/React__namespace.forwardRef((props, ref)
   const snapTo = graph.type === "polygon" ? graph.snapTo : null;
   const showAngles = graph.type === "polygon" ? graph.showAngles : null;
   const showSides = graph.type === "polygon" ? graph.showSides : null;
+  const startCoords = "startCoords" in graph ? graph.startCoords : null;
   const originalPropsRef = React.useRef(props);
   const latestPropsRef = wonderBlocksCore.useLatestRef(props);
   React.useEffect(() => {
@@ -33602,7 +33663,7 @@ const StatefulMafsGraph = /*#__PURE__*/React__namespace.forwardRef((props, ref)
     if (latestPropsRef.current !== originalPropsRef.current) {
       dispatch(reinitialize(latestPropsRef.current));
     }
-  }, [graph.type, numPoints, numSegments, numSides, snapTo, showAngles, showSides, latestPropsRef, graph.startCoords]);
+  }, [graph.type, numPoints, numSegments, numSides, snapTo, showAngles, showSides, latestPropsRef, startCoords]);
 
   // If the graph is static, it always displays the correct answer. This is
   // standard behavior for Perseus widgets (e.g. compare the Radio widget).
@@ -33928,6 +33989,8 @@ class LegacyInteractiveGraph extends React__namespace.Component {
     ___default["default"].invoke(this.points, "remove");
     this.line?.remove();
   };
+  addNoneControls = () => {};
+  removeNoneControls = () => {};
   addLinearControls = () => {
     this.addLine("line");
   };
@@ -35130,6 +35193,9 @@ class InteractiveGraph extends React__namespace.Component {
       });
     });
   }
+  static getNoneEquationString() {
+    return "";
+  }
   static getLinearEquationString(props) {
     const coords = InteractiveGraph.getLineCoords(props.graph, props);
     if (eq(coords[0][0], coords[1][0])) {
@@ -35243,6 +35309,16 @@ class InteractiveGraph extends React__namespace.Component {
     return angle.toFixed(0) + "\u00B0 angle" + " at (" + coords[1].join(", ") + ")";
   }
   static validate(userInput, rubric, component) {
+    // None-type graphs are not graded
+    if (userInput.type === "none" && rubric.correct.type === "none") {
+      return {
+        type: "points",
+        earned: 0,
+        total: 0,
+        message: null
+      };
+    }
+
     // When nothing has moved, there will neither be coords nor the
     // circle's center/radius fields. When those fields are absent, skip
     // all these checks; just go mark the answer as empty.
@@ -35458,6 +35534,8 @@ function shouldUseMafs(mafsFlags, graph) {
     return false;
   }
   switch (graph.type) {
+    case "none":
+      return true;
     case "point":
       if (graph.numPoints === UNLIMITED) {
         return Boolean(mafsFlags["unlimited-point"]);
@@ -43459,7 +43537,7 @@ class PhetSimulation extends React__namespace.Component {
       className: aphrodite.css(styles$6.iframeResponsive),
       src: this.state.url?.toString(),
       allow: "fullscreen"
-    })), /*#__PURE__*/React__namespace.createElement(IconButton__default["default"], {
+    })), this.state.url !== null && /*#__PURE__*/React__namespace.createElement(IconButton__default["default"], {
       icon: cornersOutIcon__default["default"],
       onClick: () => {
         this.iframeRef.current?.requestFullscreen();
@@ -43470,8 +43548,7 @@ class PhetSimulation extends React__namespace.Component {
         marginTop: 5,
         marginBottom: 5,
         alignSelf: "flex-end"
-      },
-      disabled: this.state.url === null
+      }
     }));
   }
 }
@@ -45022,7 +45099,7 @@ const init = function (options) {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "33.2.0";
+const libVersion = "33.3.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {