@khanacademy/perseus 22.4.0 → 22.4.1

package/dist/es/index.css

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

package/dist/es/index.js

@@ -6,7 +6,7 @@ import { View, RenderStateRoot, useUniqueIdWithMock, UniqueIDProvider, Text as T
 import Tooltip$1 from '@khanacademy/wonder-blocks-tooltip';
 import classNames from 'classnames';
 import * as React from 'react';
-import React__default, { useContext, useState, useEffect, useRef, createContext, useImperativeHandle } from 'react';
+import React__default, { useContext, useState, useEffect, useRef, createContext, forwardRef, useImperativeHandle } from 'react';
 import _, { debounce as debounce$1 } from 'underscore';
 import Clickable from '@khanacademy/wonder-blocks-clickable';
 import { Popover, PopoverContentCore, PopoverContent } from '@khanacademy/wonder-blocks-popover';
@@ -341,7 +341,7 @@ class InnerMathInput extends React.Component {
           locale
         } = this.context;
         // Initialize MathQuill.MathField instance
-        this.__mathField = createMathField(this.__mathFieldWrapperRef, this.props.mathInputStrings, baseConfig => _extends({}, baseConfig, {
+        this.__mathField = createMathField(this.__mathFieldWrapperRef, locale, this.props.mathInputStrings, baseConfig => _extends({}, baseConfig, {
           handlers: {
             edit: debounce(mathField => {
               // This handler is guaranteed to be called on change, but
@@ -29046,6 +29046,192 @@ function snap(snapStep, point) {
   return [Math.round(requestedX / snapX) * snapX, Math.round(requestedY / snapY) * snapY];
 }
 
+// The hitbox size of 48px by 48px is preserved from the legacy interactive
+// graph.
+const hitboxSizePx = 48;
+
+// MovablePointView is a purely presentational component (i.e. it is a pure
+// function with no state or effects) that renders the SVG for a movable point
+// on an interactive graph.
+//
+// It has two modes for managing tabbing / focus: "controlled" (where the caller
+// manages the display of the focus ring, and the point itself cannot be
+// focused) and "uncontrolled" (where the point is focusable, and the browser
+// manages the focus state and styling). For context on why we did this, see
+// the description of https://github.com/Khan/perseus/pull/1240
+const MovablePointView = /*#__PURE__*/forwardRef((props, hitboxRef) => {
+  var _Object$entries$find$, _Object$entries$find;
+  const {
+    range,
+    markings,
+    showTooltips
+  } = useGraphConfig();
+  const {
+    point,
+    color: color$1 = color.blue,
+    dragging,
+    focusBehavior
+  } = props;
+
+  // WB Tooltip requires a color name for the background color.
+  // Since the color in props is a hex value, a reverse lookup is needed.
+  const wbColorName = (_Object$entries$find$ = (_Object$entries$find = Object.entries(color).find(([_, value]) => value === color$1)) == null ? void 0 : _Object$entries$find[0]) != null ? _Object$entries$find$ : "blue";
+  const pointClasses = `movable-point ${dragging ? "movable-point--dragging" : ""} ${focusClass(focusBehavior)}`;
+  const [[x, y]] = useTransformVectorsToPixels(point);
+  const [xMin, xMax] = range[0];
+  const [yMin, yMax] = range[1];
+  const [[verticalStartX]] = useTransformVectorsToPixels([xMin, 0]);
+  const [[verticalEndX]] = useTransformVectorsToPixels([xMax, 0]);
+  const [[_, horizontalStartY]] = useTransformVectorsToPixels([0, yMin]);
+  const [[__, horizontalEndY]] = useTransformVectorsToPixels([0, yMax]);
+  const showHairlines = dragging && markings !== "none";
+  const hairlines = /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("line", {
+    x1: verticalStartX,
+    y1: y,
+    x2: verticalEndX,
+    y2: y,
+    stroke: color$1
+  }), /*#__PURE__*/React.createElement("line", {
+    x1: x,
+    y1: horizontalStartY,
+    x2: x,
+    y2: horizontalEndY,
+    stroke: color$1
+  }));
+  const svgForPoint = /*#__PURE__*/React.createElement("g", {
+    ref: hitboxRef,
+    className: pointClasses,
+    style: {
+      "--movable-point-color": color$1
+    },
+    "data-testid": "movable-point",
+    tabIndex: tabIndex(focusBehavior)
+  }, /*#__PURE__*/React.createElement("circle", {
+    className: "movable-point-hitbox",
+    r: hitboxSizePx / 2,
+    cx: x,
+    cy: y
+  }), /*#__PURE__*/React.createElement("circle", {
+    className: "movable-point-halo",
+    cx: x,
+    cy: y
+  }), /*#__PURE__*/React.createElement("circle", {
+    className: "movable-point-ring",
+    cx: x,
+    cy: y
+  }), /*#__PURE__*/React.createElement("circle", {
+    className: "movable-point-focus-outline",
+    cx: x,
+    cy: y
+  }), /*#__PURE__*/React.createElement("circle", {
+    className: "movable-point-center",
+    cx: x,
+    cy: y,
+    style: {
+      fill: color$1
+    },
+    "data-testid": "movable-point__center"
+  }));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, showHairlines && hairlines, showTooltips ? /*#__PURE__*/React.createElement(Tooltip$1, {
+    autoUpdate: true,
+    backgroundColor: wbColorName,
+    content: `(${point[0]}, ${point[1]})`,
+    contentStyle: {
+      color: "white"
+    }
+  }, svgForPoint) : svgForPoint);
+});
+function focusClass(config) {
+  if (config.type === "controlled" && config.showFocusRing) {
+    return "movable-point--focus";
+  }
+  return "";
+}
+function tabIndex(config) {
+  if (config.type === "uncontrolled") {
+    return config.tabIndex;
+  }
+  return undefined;
+}
+
+const Segment = props => {
+  const {
+    onMoveLine,
+    color,
+    points: [start, end],
+    extend
+  } = props;
+
+  // We use separate focusableHandle elements, instead of letting the movable
+  // points themselves be focusable, to allow the tab order of the points to
+  // be different from the rendering order. We had to solve for the following
+  // constraints:
+  // - SVG has no equivalent of z-index, so the order of elements in the
+  //   document determines the order in which they're painted. We want the
+  //   movable line segment to render behind its endpoints (it looks weird
+  //   otherwise) so we have to render the line first.
+  // - There isn't a browser-native way to customize tab order, other than
+  //   setting tabindex > 0. But that bumps elements to the front of the
+  //   tab order for the entire page, which is not what we want.
+  const {
+    visiblePoint: visiblePoint1,
+    focusableHandle: focusableHandle1
+  } = useControlPoint(start, color, p => props.onMovePoint(0, p));
+  const {
+    visiblePoint: visiblePoint2,
+    focusableHandle: focusableHandle2
+  } = useControlPoint(end, color, p => props.onMovePoint(1, p));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, focusableHandle1, /*#__PURE__*/React.createElement(MovableLine, {
+    start: start,
+    end: end,
+    stroke: color,
+    extend: extend,
+    onMove: onMoveLine
+  }), focusableHandle2, visiblePoint1, visiblePoint2);
+};
+function useControlPoint(point, color, onMovePoint) {
+  const {
+    snapStep
+  } = useGraphConfig();
+  const [focused, setFocused] = useState(false);
+  const keyboardHandleRef = useRef(null);
+  useMovable({
+    gestureTarget: keyboardHandleRef,
+    point,
+    onMove: onMovePoint,
+    constrain: p => snap(snapStep, p)
+  });
+  const visiblePointRef = useRef(null);
+  const {
+    dragging
+  } = useMovable({
+    gestureTarget: visiblePointRef,
+    point,
+    onMove: onMovePoint,
+    constrain: p => snap(snapStep, p)
+  });
+  const focusableHandle = /*#__PURE__*/React.createElement("g", {
+    "data-testid": "movable-point__focusable-handle",
+    tabIndex: 0,
+    ref: keyboardHandleRef,
+    onFocus: () => setFocused(true),
+    onBlur: () => setFocused(false)
+  });
+  const visiblePoint = /*#__PURE__*/React.createElement(MovablePointView, {
+    point: point,
+    dragging: dragging,
+    color: color,
+    ref: visiblePointRef,
+    focusBehavior: {
+      type: "controlled",
+      showFocusRing: focused
+    }
+  });
+  return {
+    focusableHandle,
+    visiblePoint
+  };
+}
 const defaultStroke = "var(--movable-line-stroke-color)";
 const MovableLine = props => {
   const {
@@ -29058,12 +29244,13 @@ const MovableLine = props => {
   const midpoint = vec.midpoint(start, end);
   const [startPtPx, endPtPx] = useTransformVectorsToPixels(start, end);
   const {
+    range,
     graphDimensionsInPixels
   } = useGraphConfig();
   let startExtend = undefined;
   let endExtend = undefined;
   if (extend) {
-    const trimmedRange = trimRange(extend.range, graphDimensionsInPixels);
+    const trimmedRange = trimRange(range, graphDimensionsInPixels);
     startExtend = extend.start ? getIntersectionOfRayWithBox(start, end, trimmedRange) : undefined;
     endExtend = extend.end ? getIntersectionOfRayWithBox(end, start, trimmedRange) : undefined;
   }
@@ -29142,101 +29329,6 @@ function size(interval) {
   return interval[1] - interval[0];
 }
 
-// The hitbox size of 48px by 48px is preserved from the legacy interactive
-// graph.
-const hitboxSizePx = 48;
-const StyledMovablePoint = props => {
-  var _Object$entries$find$, _Object$entries$find;
-  const {
-    range,
-    snapStep,
-    markings,
-    showTooltips
-  } = useGraphConfig();
-  const hitboxRef = useRef(null);
-  const {
-    point,
-    onMove,
-    color: color$1 = color.blue
-  } = props;
-
-  // WB Tooltip requires a color name for the background color.
-  // Since the color in props is a hex value, a reverse lookup is needed.
-  const wbColorName = (_Object$entries$find$ = (_Object$entries$find = Object.entries(color).find(([_, value]) => value === color$1)) == null ? void 0 : _Object$entries$find[0]) != null ? _Object$entries$find$ : "blue";
-  const {
-    dragging
-  } = useMovable({
-    gestureTarget: hitboxRef,
-    point,
-    onMove,
-    constrain: p => snap(snapStep, p)
-  });
-  const pointClasses = `movable-point ${dragging ? "movable-point--dragging" : ""}`;
-  const [[x, y]] = useTransformVectorsToPixels(point);
-  const [xMin, xMax] = range[0];
-  const [yMin, yMax] = range[1];
-  const [[verticalStartX]] = useTransformVectorsToPixels([xMin, 0]);
-  const [[verticalEndX]] = useTransformVectorsToPixels([xMax, 0]);
-  const [[_, horizontalStartY]] = useTransformVectorsToPixels([0, yMin]);
-  const [[__, horizontalEndY]] = useTransformVectorsToPixels([0, yMax]);
-  const showHairlines = dragging && markings !== "none";
-  const hairlines = /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("line", {
-    x1: verticalStartX,
-    y1: y,
-    x2: verticalEndX,
-    y2: y,
-    stroke: color$1
-  }), /*#__PURE__*/React.createElement("line", {
-    x1: x,
-    y1: horizontalStartY,
-    x2: x,
-    y2: horizontalEndY,
-    stroke: color$1
-  }));
-  const svgForPoint = /*#__PURE__*/React.createElement("g", {
-    ref: hitboxRef,
-    className: pointClasses,
-    tabIndex: 0,
-    style: {
-      "--movable-point-color": color$1
-    },
-    "data-testid": "movable-point"
-  }, /*#__PURE__*/React.createElement("circle", {
-    className: "movable-point-hitbox",
-    r: hitboxSizePx / 2,
-    cx: x,
-    cy: y
-  }), /*#__PURE__*/React.createElement("circle", {
-    className: "movable-point-halo",
-    cx: x,
-    cy: y
-  }), /*#__PURE__*/React.createElement("circle", {
-    className: "movable-point-ring",
-    cx: x,
-    cy: y
-  }), /*#__PURE__*/React.createElement("circle", {
-    className: "movable-point-focus-outline",
-    cx: x,
-    cy: y
-  }), /*#__PURE__*/React.createElement("circle", {
-    className: "movable-point-center",
-    cx: x,
-    cy: y,
-    style: {
-      fill: color$1
-    },
-    "data-testid": "movable-point__center"
-  }));
-  return /*#__PURE__*/React.createElement(React.Fragment, null, showHairlines && hairlines, showTooltips ? /*#__PURE__*/React.createElement(Tooltip$1, {
-    autoUpdate: true,
-    backgroundColor: wbColorName,
-    content: `(${point[0]}, ${point[1]})`,
-    contentStyle: {
-      color: "white"
-    }
-  }, svgForPoint) : svgForPoint);
-};
-
 const SegmentGraph = props => {
   const {
     dispatch
@@ -29244,7 +29336,7 @@ const SegmentGraph = props => {
   const {
     coords: segments
   } = props.graphState;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, segments == null ? void 0 : segments.map((segment, i) => /*#__PURE__*/React.createElement(SegmentView, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, segments == null ? void 0 : segments.map((segment, i) => /*#__PURE__*/React.createElement(Segment, {
     key: i,
     points: segment,
     onMoveLine: delta => {
@@ -29255,27 +29347,6 @@ const SegmentGraph = props => {
     }
   })));
 };
-const SegmentView = props => {
-  const {
-    onMoveLine: onMoveSegment,
-    points: [start, end]
-  } = props;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MovableLine, {
-    start: start,
-    end: end,
-    onMove: onMoveSegment
-  }), /*#__PURE__*/React.createElement(StyledMovablePoint, {
-    point: start,
-    onMove: newPoint => {
-      props.onMovePoint(0, newPoint);
-    }
-  }), /*#__PURE__*/React.createElement(StyledMovablePoint, {
-    point: end,
-    onMove: newPoint => {
-      props.onMovePoint(1, newPoint);
-    }
-  }));
-};
 
 const LinearGraph = props => {
   const {
@@ -29285,49 +29356,19 @@ const LinearGraph = props => {
     coords: lines
   } = props.graphState;
   const colors = ["var(--movable-line-stroke-color)", "var(--mafs-violet)"];
-  return /*#__PURE__*/React.createElement(React.Fragment, null, lines == null ? void 0 : lines.map((line, i) => /*#__PURE__*/React.createElement(LineView, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, lines == null ? void 0 : lines.map((line, i) => /*#__PURE__*/React.createElement(Segment, {
     key: i,
     points: line,
     onMoveLine: delta => {
       dispatch(moveLine(i, delta));
     },
-    onMovePoint: (endpointIndex, destination) => dispatch(moveControlPoint(endpointIndex, destination, i)),
-    stroke: colors[i]
-  })));
-};
-const LineView = props => {
-  const {
-    onMoveLine,
-    onMovePoint,
-    points: [start, end],
-    stroke
-  } = props;
-  const {
-    range
-  } = useGraphConfig();
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MovableLine, {
-    start: start,
-    end: end,
-    onMove: onMoveLine,
     extend: {
       start: true,
-      end: true,
-      range
+      end: true
     },
-    stroke: stroke
-  }), /*#__PURE__*/React.createElement(StyledMovablePoint, {
-    point: start,
-    onMove: newPoint => {
-      onMovePoint(0, newPoint);
-    },
-    color: stroke
-  }), /*#__PURE__*/React.createElement(StyledMovablePoint, {
-    point: end,
-    onMove: newPoint => {
-      onMovePoint(1, newPoint);
-    },
-    color: stroke
-  }));
+    onMovePoint: (endpointIndex, destination) => dispatch(moveControlPoint(endpointIndex, destination, i)),
+    color: colors[i]
+  })));
 };
 
 const RayGraph = props => {
@@ -29335,30 +29376,21 @@ const RayGraph = props => {
     dispatch
   } = props;
   const {
-    coords: lines,
-    range
+    coords: lines
   } = props.graphState;
-
-  // a ray only has one line
-  const [start, end] = lines[0];
   const handleMoveLine = delta => dispatch(moveLine(0, delta));
-  const handleMovePoint = (newPoint, pointIndex) => dispatch(moveControlPoint(pointIndex, newPoint, 0));
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MovableLine, {
-    start: start,
-    end: end,
-    onMove: handleMoveLine,
+  const handleMovePoint = (pointIndex, newPoint) => dispatch(moveControlPoint(pointIndex, newPoint, 0));
+  return /*#__PURE__*/React.createElement(Segment
+  // a ray only has one line
+  , {
+    points: lines[0],
+    onMoveLine: handleMoveLine,
+    onMovePoint: handleMovePoint,
     extend: {
-      end: true,
       start: false,
-      range
+      end: true
     }
-  }), /*#__PURE__*/React.createElement(StyledMovablePoint, {
-    point: start,
-    onMove: newPoint => handleMovePoint(newPoint, 0)
-  }), /*#__PURE__*/React.createElement(StyledMovablePoint, {
-    point: end,
-    onMove: newPoint => handleMovePoint(newPoint, 1)
-  }));
+  });
 };
 
 /**
@@ -29522,8 +29554,37 @@ const linesIntersect = ([[a, b], [c, d]], [[p, q], [r, s]]) => {
 };
 const isEven = n => n % 2 === 0;
 
+const StyledMovablePoint = props => {
+  const {
+    snapStep
+  } = useGraphConfig();
+  const elementRef = useRef(null);
+  const {
+    point,
+    onMove,
+    color: color$1 = color.blue
+  } = props;
+  const {
+    dragging
+  } = useMovable({
+    gestureTarget: elementRef,
+    point,
+    onMove,
+    constrain: p => snap(snapStep, p)
+  });
+  return /*#__PURE__*/React.createElement(MovablePointView, {
+    ref: elementRef,
+    point: point,
+    color: color$1,
+    dragging: dragging,
+    focusBehavior: {
+      type: "uncontrolled",
+      tabIndex: 0
+    }
+  });
+};
+
 const PolygonGraph = props => {
-  var _points$length;
   const [focused, setFocused] = React.useState(false);
   const [hovered, setHovered] = React.useState(false);
   const {
@@ -29536,17 +29597,19 @@ const PolygonGraph = props => {
     range,
     snapStep
   } = props.graphState;
+
+  // TODO(benchristel): can the default set of points be removed here? I don't
+  // think coords can be null.
   const points = coords != null ? coords : [[0, 0]];
-  const pointsSum = points.reduce((acc, point) => vec.add(acc, point), [0, 0]);
-  const midpoint = pointsSum && vec.scale(pointsSum, 1 / ((_points$length = points.length) != null ? _points$length : 1));
   const ref = React.useRef(null);
+  const dragReferencePoint = points[0];
   const {
     dragging
   } = useMovable({
     gestureTarget: ref,
-    point: midpoint,
+    point: dragReferencePoint,
     onMove: newPoint => {
-      const delta = vec.sub(newPoint, midpoint);
+      const delta = vec.sub(newPoint, dragReferencePoint);
       dispatch(moveAll(delta));
     },
     constrain: p => snap(snapStep, p)
@@ -43231,7 +43294,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 = "22.4.0";
+const libVersion = "22.4.1";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {