@khanacademy/perseus 33.2.0 → 33.3.0

package/dist/es/index.js

@@ -23743,9 +23743,8 @@ const BaseRadio = function BaseRadio(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.
@@ -23772,19 +23771,11 @@ const BaseRadio = function BaseRadio(props) {
     // somehow break something happening inside a choice's
     // child Renderers, by changing when we mount/unmount?
     return /*#__PURE__*/React.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.createElement(Element, _extends({}, elementProps, {
       ref: ref
     })));
@@ -29386,9 +29377,7 @@ class NumberInput extends React.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
@@ -29666,7 +29655,8 @@ function LockedLabel(props) {
       left: x,
       top: y,
       color: lockedFigureColors[color],
-      fontSize: font.size[size]
+      fontSize: font.size[size],
+      backgroundColor: "rgba(255, 255, 255, 0.8)"
     }
   }, /*#__PURE__*/React.createElement(TeX, null, text));
 }
@@ -30044,7 +30034,8 @@ const actions = {
     addPoint,
     removePoint,
     focusPoint,
-    blurPoint
+    blurPoint,
+    clickPoint
   },
   polygon: {
     movePoint,
@@ -30106,6 +30097,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 {
@@ -30430,10 +30428,14 @@ const MovablePointView = /*#__PURE__*/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.createElement("circle", {
     className: "movable-point-hitbox",
@@ -31079,6 +31081,7 @@ const MovablePoint$1 = props => {
     point,
     onMove = () => {},
     onFocusChange = () => {},
+    onClick = () => {},
     cursor,
     color: color$1 = color.blue,
     constrain = p => snap(snapStep, p)
@@ -31103,7 +31106,8 @@ const MovablePoint$1 = props => {
     },
     onClick: () => {
       var _elementRef$current;
-      return (_elementRef$current = elementRef.current) == null ? void 0 : _elementRef$current.focus();
+      onClick && onClick();
+      (_elementRef$current = elementRef.current) == null || _elementRef$current.focus();
     },
     cursor: cursor
   });
@@ -31305,6 +31309,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);
 }
 
@@ -31702,12 +31711,19 @@ 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 {
+        var _event$relatedTarget;
+        if (((_event$relatedTarget = event.relatedTarget) == null ? void 0 : _event$relatedTarget.id) === REMOVE_BUTTON_ID) {
+          return;
+        }
         dispatch(actions.pointGraph.blurPoint());
       }
+    },
+    onClick: () => {
+      dispatch(actions.pointGraph.clickPoint(i));
     }
   })));
 }
@@ -31855,6 +31871,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,
@@ -31934,8 +31962,6 @@ const MafsGraph = props => {
   }, fullGraphAriaDescription), /*#__PURE__*/React.createElement(LegacyGrid, {
     box: props.box,
     backgroundImage: props.backgroundImage
-  }), props.showLabelsFlag && props.lockedFigures && /*#__PURE__*/React.createElement(GraphLockedLabelsLayer, {
-    lockedFigures: props.lockedFigures
   }), /*#__PURE__*/React.createElement(View, {
     style: {
       position: "absolute",
@@ -31965,10 +31991,27 @@ const MafsGraph = props => {
   props.markings === "graph" && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AxisTicks, null), /*#__PURE__*/React.createElement(AxisArrows, null)), /*#__PURE__*/React.createElement("svg", nestedSVGAttributes, props.lockedFigures && /*#__PURE__*/React.createElement(GraphLockedLayer, {
     lockedFigures: props.lockedFigures,
     range: state.range
-  }), props.showProtractor && /*#__PURE__*/React.createElement(Protractor, null), renderGraph({
+  }))), props.showLabelsFlag && props.lockedFigures && /*#__PURE__*/React.createElement(GraphLockedLabelsLayer, {
+    lockedFigures: props.lockedFigures
+  }), /*#__PURE__*/React.createElement(View, {
+    style: {
+      position: "absolute"
+    }
+  }, /*#__PURE__*/React.createElement(Mafs, {
+    preserveAspectRatio: false,
+    viewBox: {
+      x: state.range[X],
+      y: state.range[Y],
+      padding: 0
+    },
+    pan: false,
+    zoom: false,
+    width: width,
+    height: height
+  }, /*#__PURE__*/React.createElement("svg", nestedSVGAttributes, props.showProtractor && /*#__PURE__*/React.createElement(Protractor, null), renderGraph({
     state,
     dispatch
-  }))))), renderGraphControls({
+  })))))), renderGraphControls({
     state,
     dispatch,
     width
@@ -31979,26 +32022,17 @@ const renderPointGraphControls = props => /*#__PURE__*/React.createElement(View,
     flexDirection: "row",
     width: props.width
   }
-}, /*#__PURE__*/React.createElement(Button, {
-  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.createElement(Button, {
+}, props.state.showRemovePointButton && props.state.focusedPointIndex !== null && /*#__PURE__*/React.createElement(Button, {
+  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 => {
@@ -32133,6 +32167,8 @@ const renderGraph = props => {
         graphState: state,
         dispatch: dispatch
       });
+    case "none":
+      return null;
     default:
       throw new UnreachableCaseError(type);
   }
@@ -32186,7 +32222,7 @@ function initializeGraphState(params) {
         coords: getPointCoords(graph, range, step),
         numPoints: graph.numPoints || 0,
         focusedPointIndex: null,
-        previouslyFocusedPointIndex: null
+        showRemovePointButton: false
       });
     case "circle":
       return _extends({}, shared, {
@@ -32215,6 +32251,10 @@ function initializeGraphState(params) {
         allowReflexAngles: Boolean(graph.allowReflexAngles),
         snapDegrees: Number(graph.snapDegrees)
       });
+    case "none":
+      return _extends({}, shared, {
+        type: "none"
+      });
     default:
       throw new UnreachableCaseError(graph);
   }
@@ -32450,6 +32490,8 @@ function interactiveGraphReducer(state, action) {
       return doBlurPoint(state);
     case DELETE_INTENT:
       return doDeleteIntent(state);
+    case CLICK_POINT:
+      return doClickPoint(state, action);
     default:
       throw new UnreachableCaseError(action);
   }
@@ -32479,13 +32521,25 @@ function doBlurPoint(state, action) {
   switch (state.type) {
     case "point":
       return _extends({}, 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 _extends({}, state, {
+      focusedPointIndex: action.index,
+      showRemovePointButton: true
+    });
+  }
+  return state;
+}
 function doMovePointInFigure(state, action) {
   switch (state.type) {
     case "segment":
@@ -32524,6 +32578,8 @@ function doMovePointInFigure(state, action) {
       }
     case "angle":
     case "circle":
+      throw new Error("FIXME implement circle reducer");
+    case "none":
     case "point":
     case "polygon":
     case "quadratic":
@@ -32825,7 +32881,8 @@ function doAddPoint(state, action) {
   // If there's no point in spot where we want the new point to go we add it there
   return _extends({}, state, {
     hasBeenInteractedWith: true,
-    coords: [...state.coords, snappedPoint]
+    coords: [...state.coords, snappedPoint],
+    showRemovePointButton: false
   });
 }
 function doRemovePoint(state, action) {
@@ -32835,7 +32892,7 @@ function doRemovePoint(state, action) {
   return _extends({}, state, {
     coords: state.coords.filter((_, i) => i !== action.index),
     focusedPointIndex: null,
-    previouslyFocusedPointIndex: null
+    showRemovePointButton: false
   });
 }
 const getDeltaVertex = (maxMoves, minMoves, delta) => {
@@ -33219,6 +33276,7 @@ const StatefulMafsGraph = /*#__PURE__*/React.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 = useRef(props);
   const latestPropsRef = useLatestRef(props);
   useEffect(() => {
@@ -33229,7 +33287,7 @@ const StatefulMafsGraph = /*#__PURE__*/React.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).
@@ -33506,6 +33564,8 @@ class LegacyInteractiveGraph extends React.Component {
       _.invoke(this.points, "remove");
       (_this$line = this.line) == null || _this$line.remove();
     };
+    this.addNoneControls = () => {};
+    this.removeNoneControls = () => {};
     this.addLinearControls = () => {
       this.addLine("line");
     };
@@ -34773,6 +34833,9 @@ class InteractiveGraph extends React.Component {
       });
     });
   }
+  static getNoneEquationString() {
+    return "";
+  }
   static getLinearEquationString(props) {
     const coords = InteractiveGraph.getLineCoords(props.graph, props);
     if (eq(coords[0][0], coords[1][0])) {
@@ -34886,6 +34949,16 @@ class InteractiveGraph extends React.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.
@@ -35115,6 +35188,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"]);
@@ -43098,7 +43173,7 @@ class PhetSimulation extends React.Component {
       className: css(styles$6.iframeResponsive),
       src: (_this$state$url = this.state.url) == null ? void 0 : _this$state$url.toString(),
       allow: "fullscreen"
-    })), /*#__PURE__*/React.createElement(IconButton, {
+    })), this.state.url !== null && /*#__PURE__*/React.createElement(IconButton, {
       icon: cornersOutIcon,
       onClick: () => {
         var _this$iframeRef$curre;
@@ -43110,8 +43185,7 @@ class PhetSimulation extends React.Component {
         marginTop: 5,
         marginBottom: 5,
         alignSelf: "flex-end"
-      },
-      disabled: this.state.url === null
+      }
     }));
   }
 }
@@ -44666,7 +44740,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 = "33.2.0";
+const libVersion = "33.3.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {