@khanacademy/perseus 57.2.0 → 57.2.2

package/dist/es/index.css

@@ -1078,7 +1078,7 @@ div.graphie {
   font-size: 14px;
 }
 .framework-perseus .number-input {
-  border: 1px solid #ccc;
+  border: 1px solid #909296;
   border-radius: 5px;
   margin: 0;
   padding: 5px 0;
@@ -2966,7 +2966,6 @@ html body .mq-editable-field .mq-selection .mq-nthroot-container * {
     --movable-point-hover-expansion: 2px;
     --movable-point-focus-ring-offset: 2px;
 
-    --movable-line-stroke-color: var(--mafs-blue);
     --movable-line-stroke-weight: 2px;
     --movable-line-stroke-weight-active: 4px;
     overflow: visible !important;

package/dist/es/index.js

@@ -27,7 +27,7 @@ import { KeypadContext } from '@khanacademy/keypad-context';
 import { TextField } from '@khanacademy/wonder-blocks-form';
 import { entries, UnreachableCaseError, keys } from '@khanacademy/wonder-stuff-core';
 import { CircularSpinner } from '@khanacademy/wonder-blocks-progress-spinner';
-import { point, KhanMath, number, vector as vector$3, line, geometry, angles, coefficients } from '@khanacademy/kmath';
+import { point, KhanMath, vector as vector$3, number, line, geometry, angles, coefficients } from '@khanacademy/kmath';
 import _classPrivateFieldLooseBase from '@babel/runtime/helpers/classPrivateFieldLooseBase';
 import _classPrivateFieldLooseKey from '@babel/runtime/helpers/classPrivateFieldLooseKey';
 import SimpleMarkdown from '@khanacademy/simple-markdown';
@@ -48,6 +48,7 @@ import { Popper } from 'react-popper';
 import IconButton from '@khanacademy/wonder-blocks-icon-button';
 import cornersOutIcon from '@phosphor-icons/core/regular/corners-out.svg';
 import Link from '@khanacademy/wonder-blocks-link';
+import { addLibraryVersionToPerseusDebug } from '@khanacademy/perseus-utils';
 
 /**
  * The translated strings that are used to render Perseus.
@@ -767,9 +768,12 @@ class InnerMathInput extends React.Component {
       //   a keyboard event is "keydown" type.
       //   In react without WonderBlocks, "enter" or "space" keydown events
       //   are also "click" events, differentiated by "detail".
-      if (e.type === "click") {
+      if ((e == null ? void 0 : e.type) === "click") {
         this.focus();
       }
+      if (key === "DISMISS") {
+        this.closeKeypad();
+      }
     };
   }
   componentDidMount() {
@@ -829,10 +833,9 @@ 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,
+      rootBoundary: "document",
       "aria-label": this.context.strings.mathInputTitle,
       "aria-describedby": `popover-content-${popoverContentUniqueId}`,
       content: () => {
@@ -841,7 +844,6 @@ class InnerMathInput extends React.Component {
           id: `popover-content-${popoverContentUniqueId}`,
           style: a11y.srOnly
         }, this.context.strings.mathInputDescription), /*#__PURE__*/React.createElement(PopoverContentCore, {
-          closeButtonVisible: true,
           style: styles$D.popoverContent
         }, /*#__PURE__*/React.createElement(DesktopKeypad, _extends({
           onAnalyticsEvent: this.props.onAnalyticsEvent,
@@ -849,7 +851,9 @@ class InnerMathInput extends React.Component {
           onClickKey: this.handleKeypadPress,
           cursorContext: this.state.cursorContext,
           convertDotToTimes: this.props.convertDotToTimes
-        }, (_this$props$keypadBut = this.props.keypadButtonSets) != null ? _this$props$keypadBut : mapButtonSets((_this$props = this.props) == null ? void 0 : _this$props.buttonSets)))));
+        }, (_this$props$keypadBut = this.props.keypadButtonSets) != null ? _this$props$keypadBut : mapButtonSets((_this$props = this.props) == null ? void 0 : _this$props.buttonSets), {
+          showDismiss: true
+        }))));
       }
     }, this.props.buttonsVisible === "never" ? /*#__PURE__*/React.createElement(MathInputIcon, {
       hovered: false,
@@ -1003,7 +1007,6 @@ const styles$D = StyleSheet.create({
   },
   popoverContent: {
     padding: 0,
-    paddingBottom: spacing.xxSmall_6,
     maxWidth: "initial"
   }
 });
@@ -3021,6 +3024,7 @@ Zoom.prototype.zoomImage = function () {
   img.src = this._targetImage.src;
   img.alt = this._targetImage.alt;
   img.tabIndex = 0;
+  img.role = "button";
   this.$zoomedImage = $zoomedImage;
 };
 Zoom.prototype._zoomOriginal = function () {
@@ -7980,6 +7984,7 @@ var createRoot;
 var m = ReactDOM__default;
 if (process.env.NODE_ENV === 'production') {
   createRoot = m.createRoot;
+  m.hydrateRoot;
 } else {
   var i = m.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
   createRoot = function(c, o) {
@@ -15810,12 +15815,19 @@ class ImageLoader extends React.Component {
         };
       }
       const staticUrl = getDependencies().staticUrl;
+
+      // If the image is interactive, it should have a role of "button"
+      // to indicate that it is interactive.
+      const imageRole = imgProps.onClick !== null ? "button" : "img";
       return (
         /*#__PURE__*/
-        // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- TODO(LEMS-2871): Address a11y error
+        // (LEMS-2871) NOTE: This image IS interactive if it requires zooming, and LevelAccess specifically requested
+        // that the role and tabIndex be set here. When users interact with the image on mobile, it will zoom in.
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
         React.createElement("img", _extends({
           // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- TODO(LEMS-2871): Address a11y error
           tabIndex: 0,
+          role: imageRole,
           src: staticUrl(src),
           onKeyUp: onKeyUp,
           onKeyDown: onKeyDown
@@ -28928,7 +28940,28 @@ const LockedEllipse = props => {
   }));
 };
 
+function clampDomain(domain, graphBounds) {
+  // If the domain is invalid, return the graph bounds
+  if (domain[0] > domain[1]) {
+    return graphBounds;
+  }
+
+  // If the domain is outside the graph bounds, return null
+  if (domain[0] < graphBounds[0] && domain[1] < graphBounds[0] || domain[0] > graphBounds[1] && domain[1] > graphBounds[1]) {
+    return null;
+  }
+
+  // Clamp the function to the bounds of the graph to prevent memory
+  // leaks when the domain is set to something like [-Infinity, Infinity].
+  const min = Math.max(domain[0], graphBounds[0]);
+  const max = Math.min(domain[1], graphBounds[1]);
+  return [min, max];
+}
+
 const LockedFunction = props => {
+  const {
+    range
+  } = useGraphConfig();
   const [equation, setEquation] = useState();
   const {
     color,
@@ -28938,8 +28971,7 @@ const LockedFunction = props => {
   } = props;
   const plotProps = {
     color: lockedFigureColors[color],
-    style: strokeStyle,
-    domain
+    style: strokeStyle
   };
   const hasAria = !!props.ariaLabel;
   useEffect(() => {
@@ -28950,6 +28982,12 @@ const LockedFunction = props => {
   if (typeof equation === "undefined") {
     return null;
   }
+  const clampedDomain = directionalAxis === "x" ? clampDomain(domain, range[0]) : clampDomain(domain, range[1]);
+
+  // The domain entirely is outside the bounds of the graph. Don't render.
+  if (clampedDomain === null) {
+    return null;
+  }
   return /*#__PURE__*/React.createElement("g", {
     className: "locked-function",
     "aria-label": hasAria ? props.ariaLabel : undefined,
@@ -28958,11 +28996,13 @@ const LockedFunction = props => {
   }, directionalAxis === "x" && /*#__PURE__*/React.createElement(Plot$2.OfX, _extends({
     y: x => equation.eval({
       x
-    })
+    }),
+    domain: clampedDomain
   }, plotProps)), directionalAxis === "y" && /*#__PURE__*/React.createElement(Plot$2.OfY, _extends({
     x: y => equation.eval({
       y
-    })
+    }),
+    domain: clampedDomain
   }, plotProps)));
 };
 
@@ -30344,15 +30384,14 @@ const hitboxSizePx = 48;
 // function with no state or effects) that renders the SVG for a movable point
 // on an interactive graph.
 const MovablePointView = /*#__PURE__*/forwardRef((props, hitboxRef) => {
-  var _Object$entries$find$, _Object$entries$find;
   const {
     markings,
     showTooltips,
-    interactiveColor
+    interactiveColor,
+    disableKeyboardInteraction
   } = useGraphConfig();
   const {
     point,
-    color: color$1 = interactiveColor,
     dragging,
     focused,
     cursor,
@@ -30360,9 +30399,14 @@ const MovablePointView = /*#__PURE__*/forwardRef((props, hitboxRef) => {
     onClick = () => {}
   } = 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";
+  // WB Tooltip requires a WB color name for the background color.
+  // We use the blue color when the points are interactive, and
+  // offBlack64 when they are disabled.
+  // Note: The disabled point color is offBlack50 to contrast with
+  // the interactive blue color, but the tooltip background has to be
+  // darker to contrast with its white text - using offBlack64.
+  const wbColorName = disableKeyboardInteraction ? "fadedOffBlack64" // not see-through
+  : "blue";
   const pointClasses = classNames("movable-point", dragging && "movable-point--dragging", showFocusRing && "movable-point--focus");
   const [[x, y]] = useTransformVectorsToPixels(point);
   const showHairlines = (dragging || focused) && markings !== "none";
@@ -30375,7 +30419,7 @@ const MovablePointView = /*#__PURE__*/forwardRef((props, hitboxRef) => {
     ref: hitboxRef,
     className: pointClasses,
     style: {
-      "--movable-point-color": color$1,
+      "--movable-point-color": interactiveColor,
       cursor
     },
     "data-testid": "movable-point",
@@ -30402,7 +30446,7 @@ const MovablePointView = /*#__PURE__*/forwardRef((props, hitboxRef) => {
     cx: x,
     cy: y,
     style: {
-      fill: color$1
+      fill: interactiveColor
     },
     "data-testid": "movable-point__center"
   }));
@@ -30434,7 +30478,6 @@ function useControlPoint(params) {
     ariaDescribedBy,
     ariaLabel,
     ariaLive = "polite",
-    color,
     constrain = p => snap(snapStep, p),
     cursor,
     forwardedRef = noop$1,
@@ -30497,6 +30540,7 @@ function useControlPoint(params) {
     "aria-describedby": ariaDescribedBy,
     "aria-label": pointAriaLabel,
     "aria-live": ariaLive,
+    "aria-disabled": disableKeyboardInteraction,
     onFocus: event => {
       onFocus(event);
       setFocused(true);
@@ -30516,7 +30560,6 @@ function useControlPoint(params) {
     point: point,
     dragging: dragging,
     focused: focused,
-    color: color,
     ref: visiblePointRef,
     showFocusRing: focused
   });
@@ -30660,6 +30703,7 @@ const Line$1 = props => {
     "aria-label": ariaLabel,
     "aria-describedby": ariaDescribedBy,
     "aria-live": ariaLive,
+    "aria-disabled": disableKeyboardInteraction,
     className: "movable-line",
     "data-testid": "movable-line",
     style: {
@@ -31203,6 +31247,7 @@ function MovableCircle(props) {
     "aria-label": ariaLabel,
     "aria-describedby": ariaDescribedBy,
     "aria-live": "polite",
+    "aria-disabled": disableKeyboardInteraction,
     ref: draggableRef,
     role: "button",
     tabIndex: disableKeyboardInteraction ? -1 : 0,
@@ -33079,7 +33124,8 @@ const LimitedPolygonGraph = statefulProps => {
       // Accessibility-related fields
       role: "button",
       "aria-label": srPolygonGraphPoints ? `${srPolygonElementsNum} ${srPolygonGraphPoints}` : srPolygonElementsNum,
-      "aria-live": ariaLives[0]
+      "aria-live": ariaLives[0],
+      "aria-disabled": disableKeyboardInteraction
     }
   }), points.map((point, i) => {
     const angleId = `${id}-angle-${i}`;
@@ -34363,7 +34409,7 @@ const MafsGraph = props => {
       handleKeyboardEvent(event, state, dispatch);
     },
     "aria-label": fullGraphAriaLabel,
-    "aria-describedby": describedByIds(fullGraphAriaDescription && descriptionId, interactiveElementsDescription && interactiveElementsDescriptionId, isUnlimitedGraphState(state) && unlimitedGraphKeyboardPromptId, state.type !== "none" && instructionsId),
+    "aria-describedby": describedByIds(fullGraphAriaDescription && descriptionId, interactiveElementsDescription && interactiveElementsDescriptionId, isUnlimitedGraphState(state) && unlimitedGraphKeyboardPromptId, state.type !== "none" && !disableInteraction && instructionsId),
     ref: graphRef,
     tabIndex: 0,
     onFocus: event => {
@@ -41404,51 +41450,9 @@ const init = function init() {
   replaceDeprecatedWidgets();
 };
 
-/**
- * Adds the given perseus library version information to the __perseus_debug__
- * object and ensures that the object is attached to `globalThis` (`window` in
- * browser environments).
- *
- * This allows each library to provide runtime version information to assist in
- * debugging in production environments.
- */
-const addLibraryVersionToPerseusDebug = (libraryName, libraryVersion) => {
-  // If the library version is the default value, then we don't want to
-  // prefix it with a "v" to indicate that it is a version number.
-  let prefix = "v";
-  if (libraryVersion === "__lib_version__") {
-    prefix = "";
-  }
-  const formattedVersion = `${prefix}${libraryVersion}`;
-  if (typeof globalThis !== "undefined") {
-    var _globalThis$__perseus;
-    globalThis.__perseus_debug__ = (_globalThis$__perseus = globalThis.__perseus_debug__) != null ? _globalThis$__perseus : {};
-    const existingVersionEntry = globalThis.__perseus_debug__[libraryName];
-    if (existingVersionEntry) {
-      // If we already have an entry and it doesn't match the registered
-      // version, we morph the entry into an array and log a warning.
-      if (existingVersionEntry !== formattedVersion) {
-        // Existing entry might be an array already (oops, at least 2
-        // versions of the library already loaded!).
-        const allVersions = Array.isArray(existingVersionEntry) ? existingVersionEntry : [existingVersionEntry];
-        allVersions.push(formattedVersion);
-        globalThis.__perseus_debug__[libraryName] = allVersions;
-
-        // eslint-disable-next-line no-console
-        console.warn(`Multiple versions of ${libraryName} loaded on this page: ${allVersions.sort().join(", ")}`);
-      }
-    } else {
-      globalThis.__perseus_debug__[libraryName] = formattedVersion;
-    }
-  } else {
-    // eslint-disable-next-line no-console
-    console.warn(`globalThis not found found (${formattedVersion})`);
-  }
-};
-
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "57.2.0";
+const libVersion = "57.2.2";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {