@khanacademy/perseus 31.0.1 → 31.1.0

package/dist/es/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/es/index.js

@@ -45,31 +45,23 @@ import cornersOutIcon from '@phosphor-icons/core/regular/corners-out.svg';
 import Link from '@khanacademy/wonder-blocks-link';
 
 function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
     }
-    return target;
-  };
-  return _extends.apply(this, arguments);
+    return n;
+  }, _extends.apply(null, arguments);
 }
 
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (e.includes(n)) continue;
+    t[n] = r[n];
   }
-  return target;
+  return t;
 }
 
 /**
@@ -532,6 +524,7 @@ class InnerMathInput extends React.Component {
       onFocus: () => this.focus(),
       onBlur: () => this.blur()
     }), /*#__PURE__*/React.createElement(Popover, {
+      rootBoundary: "document",
       opened: this.state.keypadOpen,
       onClose: () => this.closeKeypad(),
       dismissEnabled: true,
@@ -4515,16 +4508,14 @@ const InteractiveUtil = {
   }
 };
 
-function _classPrivateFieldBase(receiver, privateKey) {
-  if (!Object.prototype.hasOwnProperty.call(receiver, privateKey)) {
-    throw new TypeError("attempted to use private field on non-instance");
-  }
-  return receiver;
+function _classPrivateFieldBase(e, t) {
+  if (!{}.hasOwnProperty.call(e, t)) throw new TypeError("attempted to use private field on non-instance");
+  return e;
 }
 
 var id = 0;
-function _classPrivateFieldKey(name) {
-  return "__private_" + id++ + "_" + name;
+function _classPrivateFieldKey(e) {
+  return "__private_" + id++ + "_" + e;
 }
 
 /*!
@@ -30234,7 +30225,8 @@ const actions = {
   },
   pointGraph: {
     movePoint,
-    addPoint
+    addPoint,
+    removePoint
   },
   polygon: {
     movePoint,
@@ -30270,6 +30262,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 {
@@ -30557,7 +30556,8 @@ const MovablePointView = /*#__PURE__*/forwardRef((props, hitboxRef) => {
     color: color$1 = color.blue,
     dragging,
     focusBehavior,
-    cursor
+    cursor,
+    onClick = () => {}
   } = props;
 
   // WB Tooltip requires a color name for the background color.
@@ -30592,7 +30592,12 @@ const MovablePointView = /*#__PURE__*/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.createElement("circle", {
     className: "movable-point-hitbox",
     r: hitboxSizePx / 2,
@@ -30640,6 +30645,12 @@ function tabIndex(config) {
   }
   return undefined;
 }
+function getOnFocusChangeCallback(config) {
+  if (config.type === "uncontrolled") {
+    return config.onFocusChange;
+  }
+  return () => {};
+}
 
 const MovableLine = props => {
   const {
@@ -31229,7 +31240,8 @@ const MovablePoint$1 = props => {
   const elementRef = useRef(null);
   const {
     point,
-    onMove,
+    onMove = () => {},
+    onFocusChange = () => {},
     cursor,
     color: color$1 = color.blue,
     constrain = p => snap(snapStep, p)
@@ -31249,7 +31261,12 @@ const MovablePoint$1 = props => {
     dragging: dragging,
     focusBehavior: {
       type: "uncontrolled",
-      tabIndex: 0
+      tabIndex: 0,
+      onFocusChange
+    },
+    onClick: () => {
+      var _elementRef$current;
+      return (_elementRef$current = elementRef.current) == null ? void 0 : _elementRef$current.focus();
     },
     cursor: cursor
   });
@@ -32465,6 +32482,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 UnreachableCaseError(action);
   }
@@ -32812,6 +32831,14 @@ function doAddPoint(state, action) {
     coords: [...state.coords, snappedPoint]
   });
 }
+function doRemovePoint(state, action) {
+  if (state.type !== "point") {
+    return state;
+  }
+  return _extends({}, 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]));
@@ -42950,7 +42977,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
@@ -43001,9 +43031,6 @@ class PhetSimulation extends React.Component {
     };
     this.locale = this.getPhetCompatibleLocale(getDependencies().kaLocale);
   }
-  getUserInput() {
-    return null;
-  }
   async componentDidMount() {
     await this.updateSimState(this.props.url);
   }
@@ -43013,53 +43040,8 @@ class PhetSimulation extends React.Component {
       await this.updateSimState(this.props.url);
     }
   }
-  render() {
-    var _this$state$url;
-    // 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.createElement(View, {
-      style: styles$6.container
-    }, this.state.banner !== null &&
-    /*#__PURE__*/
-    // TODO(anna): Make this banner focusable
-    React.createElement(View, {
-      style: {
-        marginBottom: phoneMargin
-      }
-    }, /*#__PURE__*/React.createElement(Banner, {
-      layout: "floating",
-      kind: this.state.banner.kind,
-      text: this.state.banner.message
-    })), /*#__PURE__*/React.createElement("iframe", {
-      ref: this.iframeRef,
-      title: this.props.description,
-      sandbox: sandboxProperties,
-      style: {
-        minWidth: 400,
-        height: 360,
-        width: "100%",
-        borderWidth: 0
-      },
-      src: (_this$state$url = this.state.url) == null ? void 0 : _this$state$url.toString(),
-      allow: "fullscreen"
-    }), /*#__PURE__*/React.createElement(IconButton, {
-      icon: cornersOutIcon,
-      onClick: () => {
-        var _this$iframeRef$curre;
-        (_this$iframeRef$curre = this.iframeRef.current) == null || _this$iframeRef$curre.requestFullscreen();
-      },
-      kind: "secondary",
-      "aria-label": "Fullscreen",
-      style: {
-        marginTop: 5,
-        marginBottom: 5,
-        alignSelf: "flex-end"
-      },
-      disabled: this.state.url === null
-    }));
+  getUserInput() {
+    return null;
   }
   async updateSimState(urlString) {
     const url = makeSafeUrl(urlString, this.locale);
@@ -43117,6 +43099,54 @@ class PhetSimulation extends React.Component {
     }
     return true;
   }
+  render() {
+    var _this$state$url;
+    // 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.createElement(View, {
+      style: styles$6.container
+    }, this.state.banner !== null &&
+    /*#__PURE__*/
+    // TODO(anna): Make this banner focusable
+    React.createElement(View, {
+      style: {
+        marginBottom: phoneMargin
+      }
+    }, /*#__PURE__*/React.createElement(Banner, {
+      layout: "floating",
+      kind: this.state.banner.kind,
+      text: this.state.banner.message
+    })), /*#__PURE__*/React.createElement("iframe", {
+      ref: this.iframeRef,
+      title: this.props.description,
+      sandbox: sandboxProperties,
+      style: {
+        minWidth: 400,
+        height: 360,
+        width: "100%",
+        borderWidth: 0
+      },
+      src: (_this$state$url = this.state.url) == null ? void 0 : _this$state$url.toString(),
+      allow: "fullscreen"
+    }), /*#__PURE__*/React.createElement(IconButton, {
+      icon: cornersOutIcon,
+      onClick: () => {
+        var _this$iframeRef$curre;
+        (_this$iframeRef$curre = this.iframeRef.current) == null || _this$iframeRef$curre.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
@@ -43132,14 +43162,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 = StyleSheet.create({
   container: {
     borderRadius: borderRadiusLarge,
@@ -43150,6 +43172,14 @@ const styles$6 = 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 {
@@ -44655,7 +44685,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 = "31.0.1";
+const libVersion = "31.1.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {