@khanacademy/perseus 57.2.1 → 57.2.2

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

@@ -45,6 +45,7 @@ var reactPopper = require('react-popper');
 var IconButton = require('@khanacademy/wonder-blocks-icon-button');
 var cornersOutIcon = require('@phosphor-icons/core/regular/corners-out.svg');
 var Link = require('@khanacademy/wonder-blocks-link');
+var perseusUtils = require('@khanacademy/perseus-utils');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -1069,9 +1070,12 @@ class InnerMathInput extends React__namespace.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?.type === "click") {
       this.focus();
     }
+    if (key === "DISMISS") {
+      this.closeKeypad();
+    }
   };
   render() {
     let className = classNames__default["default"]({
@@ -1111,17 +1115,15 @@ 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,
+      rootBoundary: "document",
       "aria-label": this.context.strings.mathInputTitle,
       "aria-describedby": `popover-content-${popoverContentUniqueId}`,
       content: () => /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.HeadingMedium, {
         id: `popover-content-${popoverContentUniqueId}`,
         style: a11y.srOnly
       }, this.context.strings.mathInputDescription), /*#__PURE__*/React__namespace.createElement(wonderBlocksPopover.PopoverContentCore, {
-        closeButtonVisible: true,
         style: styles$D.popoverContent
       }, /*#__PURE__*/React__namespace.createElement(mathInput.DesktopKeypad, _extends__default["default"]({
         onAnalyticsEvent: this.props.onAnalyticsEvent,
@@ -1129,7 +1131,9 @@ class InnerMathInput extends React__namespace.Component {
         onClickKey: this.handleKeypadPress,
         cursorContext: this.state.cursorContext,
         convertDotToTimes: this.props.convertDotToTimes
-      }, this.props.keypadButtonSets ?? mapButtonSets(this.props?.buttonSets)))))
+      }, this.props.keypadButtonSets ?? mapButtonSets(this.props?.buttonSets), {
+        showDismiss: true
+      }))))
     }, this.props.buttonsVisible === "never" ? /*#__PURE__*/React__namespace.createElement(MathInputIcon, {
       hovered: false,
       focused: false,
@@ -1272,7 +1276,6 @@ const styles$D = aphrodite.StyleSheet.create({
   },
   popoverContent: {
     padding: 0,
-    paddingBottom: wonderBlocksTokens.spacing.xxSmall_6,
     maxWidth: "initial"
   }
 });
@@ -3275,6 +3278,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 () {
@@ -8244,6 +8248,7 @@ var createRoot;
 var m = ReactDOM__default["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) {
@@ -16147,12 +16152,19 @@ class ImageLoader extends React__namespace.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__namespace.createElement("img", _extends__default["default"]({
         // 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
@@ -30845,11 +30857,11 @@ const MovablePointView = /*#__PURE__*/React.forwardRef((props, hitboxRef) => {
   const {
     markings,
     showTooltips,
-    interactiveColor
+    interactiveColor,
+    disableKeyboardInteraction
   } = useGraphConfig();
   const {
     point,
-    color = interactiveColor,
     dragging,
     focused,
     cursor,
@@ -30857,12 +30869,14 @@ const MovablePointView = /*#__PURE__*/React.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(wonderBlocksTokens.color).find(_ref => {
-    let [_, value] = _ref;
-    return value === color;
-  })?.[0] ?? "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";
@@ -30875,7 +30889,7 @@ const MovablePointView = /*#__PURE__*/React.forwardRef((props, hitboxRef) => {
     ref: hitboxRef,
     className: pointClasses,
     style: {
-      "--movable-point-color": color,
+      "--movable-point-color": interactiveColor,
       cursor
     },
     "data-testid": "movable-point",
@@ -30902,7 +30916,7 @@ const MovablePointView = /*#__PURE__*/React.forwardRef((props, hitboxRef) => {
     cx: x,
     cy: y,
     style: {
-      fill: color
+      fill: interactiveColor
     },
     "data-testid": "movable-point__center"
   }));
@@ -30937,7 +30951,6 @@ function useControlPoint(params) {
     ariaDescribedBy,
     ariaLabel,
     ariaLive = "polite",
-    color,
     constrain = p => snap(snapStep, p),
     cursor,
     forwardedRef = noop$1,
@@ -30999,6 +31012,7 @@ function useControlPoint(params) {
     "aria-describedby": ariaDescribedBy,
     "aria-label": pointAriaLabel,
     "aria-live": ariaLive,
+    "aria-disabled": disableKeyboardInteraction,
     onFocus: event => {
       onFocus(event);
       setFocused(true);
@@ -31017,7 +31031,6 @@ function useControlPoint(params) {
     point: point,
     dragging: dragging,
     focused: focused,
-    color: color,
     ref: visiblePointRef,
     showFocusRing: focused
   });
@@ -31161,6 +31174,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: {
@@ -31719,6 +31733,7 @@ function MovableCircle(props) {
     "aria-label": ariaLabel,
     "aria-describedby": ariaDescribedBy,
     "aria-live": "polite",
+    "aria-disabled": disableKeyboardInteraction,
     ref: draggableRef,
     role: "button",
     tabIndex: disableKeyboardInteraction ? -1 : 0,
@@ -33648,7 +33663,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}`;
@@ -34938,7 +34954,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 => {
@@ -41996,51 +42012,10 @@ const init = function () {
   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") {
-    globalThis.__perseus_debug__ = globalThis.__perseus_debug__ ?? {};
-    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.1";
-addLibraryVersionToPerseusDebug(libName, libVersion);
+const libVersion = "57.2.2";
+perseusUtils.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
   major: 12,