@khanacademy/perseus 31.0.1 → 31.1.0

package/dist/index.css

@@ -4440,7 +4440,7 @@ html body .mq-editable-field .mq-selection .mq-nthroot-container * {
 }
 
 .MafsView
-    .movable-point:is(:focus-visible, .movable-point--focus)
+    .movable-point:is(:focus, .movable-point--focus)
     .movable-point-focus-outline {
     visibility: visible;
 }

package/dist/index.js

@@ -650,6 +650,7 @@ class InnerMathInput extends React__namespace.Component {
       onFocus: () => this.focus(),
       onBlur: () => this.blur()
     }), /*#__PURE__*/React__namespace.createElement(wonderBlocksPopover.Popover, {
+      rootBoundary: "document",
       opened: this.state.keypadOpen,
       onClose: () => this.closeKeypad(),
       dismissEnabled: true,
@@ -30541,7 +30542,8 @@ const actions = {
   },
   pointGraph: {
     movePoint,
-    addPoint
+    addPoint,
+    removePoint
   },
   polygon: {
     movePoint,
@@ -30577,6 +30579,13 @@ function addPoint(location) {
     location
   };
 }
+const REMOVE_POINT = "remove-point";
+function removePoint(index) {
+  return {
+    type: REMOVE_POINT,
+    index
+  };
+}
 const MOVE_ALL = "move-all";
 function moveAll(delta) {
   return {
@@ -30865,7 +30874,8 @@ const MovablePointView = /*#__PURE__*/React.forwardRef((props, hitboxRef) => {
     color = wonderBlocksTokens.color.blue,
     dragging,
     focusBehavior,
-    cursor
+    cursor,
+    onClick = () => {}
   } = props;
 
   // WB Tooltip requires a color name for the background color.
@@ -30903,7 +30913,12 @@ const MovablePointView = /*#__PURE__*/React.forwardRef((props, hitboxRef) => {
       cursor
     },
     "data-testid": "movable-point",
-    tabIndex: disableKeyboardInteraction ? -1 : tabIndex(focusBehavior)
+    tabIndex: disableKeyboardInteraction ? -1 : tabIndex(focusBehavior),
+    onFocus: () => {
+      return getOnFocusChangeCallback(focusBehavior)(true);
+    },
+    onBlur: () => getOnFocusChangeCallback(focusBehavior)(false),
+    onClick: onClick
   }, /*#__PURE__*/React__namespace.createElement("circle", {
     className: "movable-point-hitbox",
     r: hitboxSizePx / 2,
@@ -30951,6 +30966,12 @@ function tabIndex(config) {
   }
   return undefined;
 }
+function getOnFocusChangeCallback(config) {
+  if (config.type === "uncontrolled") {
+    return config.onFocusChange;
+  }
+  return () => {};
+}
 
 const MovableLine = props => {
   const {
@@ -31548,7 +31569,8 @@ const MovablePoint$1 = props => {
   const elementRef = React.useRef(null);
   const {
     point,
-    onMove,
+    onMove = () => {},
+    onFocusChange = () => {},
     cursor,
     color = wonderBlocksTokens.color.blue,
     constrain = p => snap(snapStep, p)
@@ -31568,8 +31590,10 @@ const MovablePoint$1 = props => {
     dragging: dragging,
     focusBehavior: {
       type: "uncontrolled",
-      tabIndex: 0
+      tabIndex: 0,
+      onFocusChange
     },
+    onClick: () => elementRef.current?.focus(),
     cursor: cursor
   });
 };
@@ -32801,6 +32825,8 @@ function interactiveGraphReducer(state, action) {
       return doChangeRange(state, action);
     case ADD_POINT:
       return doAddPoint(state, action);
+    case REMOVE_POINT:
+      return doRemovePoint(state, action);
     default:
       throw new wonderStuffCore.UnreachableCaseError(action);
   }
@@ -33164,6 +33190,15 @@ function doAddPoint(state, action) {
     coords: [...state.coords, snappedPoint]
   };
 }
+function doRemovePoint(state, action) {
+  if (state.type !== "point") {
+    return state;
+  }
+  return {
+    ...state,
+    coords: state.coords.filter((_, i) => i !== action.index)
+  };
+}
 const getDeltaVertex = (maxMoves, minMoves, delta) => {
   const [deltaX, deltaY] = delta;
   const maxXMove = Math.min(...maxMoves.map(move => move[X]));
@@ -43308,7 +43343,10 @@ var PassageRefTarget$1 = {
   isLintable: true
 };
 
-/* eslint-disable react/forbid-prop-types, react/sort-comp */
+/**
+ * This is a PhET simulation widget. It is used for rendering simulations
+ * from https://phet.colorado.edu/.
+ */
 
 // For returning user input, but currently the PhET widget
 // does not support accessing user input
@@ -43325,9 +43363,6 @@ class PhetSimulation extends React__namespace.Component {
     super(props);
     this.locale = this.getPhetCompatibleLocale(getDependencies().kaLocale);
   }
-  getUserInput() {
-    return null;
-  }
   async componentDidMount() {
     await this.updateSimState(this.props.url);
   }
@@ -43337,51 +43372,8 @@ class PhetSimulation extends React__namespace.Component {
       await this.updateSimState(this.props.url);
     }
   }
-  render() {
-    // We sandbox the iframe so that we allowlist only the functionality
-    // that we need. This makes it safer to present third-party content
-    // from the PhET website.
-    // http://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/
-    const sandboxProperties = "allow-same-origin allow-scripts";
-    return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$6.container
-    }, this.state.banner !== null &&
-    /*#__PURE__*/
-    // TODO(anna): Make this banner focusable
-    React__namespace.createElement(wonderBlocksCore.View, {
-      style: {
-        marginBottom: phoneMargin
-      }
-    }, /*#__PURE__*/React__namespace.createElement(Banner__default["default"], {
-      layout: "floating",
-      kind: this.state.banner.kind,
-      text: this.state.banner.message
-    })), /*#__PURE__*/React__namespace.createElement("iframe", {
-      ref: this.iframeRef,
-      title: this.props.description,
-      sandbox: sandboxProperties,
-      style: {
-        minWidth: 400,
-        height: 360,
-        width: "100%",
-        borderWidth: 0
-      },
-      src: this.state.url?.toString(),
-      allow: "fullscreen"
-    }), /*#__PURE__*/React__namespace.createElement(IconButton__default["default"], {
-      icon: cornersOutIcon__default["default"],
-      onClick: () => {
-        this.iframeRef.current?.requestFullscreen();
-      },
-      kind: "secondary",
-      "aria-label": "Fullscreen",
-      style: {
-        marginTop: 5,
-        marginBottom: 5,
-        alignSelf: "flex-end"
-      },
-      disabled: this.state.url === null
-    }));
+  getUserInput() {
+    return null;
   }
   change = (() => {
     var _this = this;
@@ -43481,6 +43473,52 @@ class PhetSimulation extends React__namespace.Component {
     }
     return true;
   }
+  render() {
+    // We sandbox the iframe so that we allowlist only the functionality
+    // that we need. This makes it safer to present third-party content
+    // from the PhET website.
+    // http://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/
+    const sandboxProperties = "allow-same-origin allow-scripts";
+    return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+      style: styles$6.container
+    }, this.state.banner !== null &&
+    /*#__PURE__*/
+    // TODO(anna): Make this banner focusable
+    React__namespace.createElement(wonderBlocksCore.View, {
+      style: {
+        marginBottom: phoneMargin
+      }
+    }, /*#__PURE__*/React__namespace.createElement(Banner__default["default"], {
+      layout: "floating",
+      kind: this.state.banner.kind,
+      text: this.state.banner.message
+    })), /*#__PURE__*/React__namespace.createElement("iframe", {
+      ref: this.iframeRef,
+      title: this.props.description,
+      sandbox: sandboxProperties,
+      style: {
+        minWidth: 400,
+        height: 360,
+        width: "100%",
+        borderWidth: 0
+      },
+      src: this.state.url?.toString(),
+      allow: "fullscreen"
+    }), /*#__PURE__*/React__namespace.createElement(IconButton__default["default"], {
+      icon: cornersOutIcon__default["default"],
+      onClick: () => {
+        this.iframeRef.current?.requestFullscreen();
+      },
+      kind: "secondary",
+      "aria-label": "Fullscreen",
+      style: {
+        marginTop: 5,
+        marginBottom: 5,
+        alignSelf: "flex-end"
+      },
+      disabled: this.state.url === null
+    }));
+  }
 }
 
 // Setting URL to null will display an error message in the iframe
@@ -43495,14 +43533,6 @@ const makeSafeUrl = (urlString, locale) => {
   url.searchParams.set("locale", locale);
   return url;
 };
-var PhetSimulation$1 = {
-  name: "phet-simulation",
-  displayName: "PhET Simulation",
-  widget: PhetSimulation,
-  // Hides widget from content creators until full release
-  hidden: true,
-  isLintable: true
-};
 const styles$6 = aphrodite.StyleSheet.create({
   container: {
     borderRadius: borderRadiusLarge,
@@ -43513,6 +43543,14 @@ const styles$6 = aphrodite.StyleSheet.create({
     width: 650
   }
 });
+var PhetSimulation$1 = {
+  name: "phet-simulation",
+  displayName: "PhET Simulation",
+  widget: PhetSimulation,
+  // Hides widget from content creators until full release
+  hidden: true,
+  isLintable: true
+};
 
 /* eslint-disable react/no-unsafe */
 const {
@@ -45015,7 +45053,7 @@ const init = function (options) {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "31.0.1";
+const libVersion = "31.1.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {