@khanacademy/perseus 25.1.1 → 26.1.0

package/dist/components/fixed-to-responsive.d.ts

@@ -23,6 +23,6 @@ declare class FixedToResponsive extends React.Component<Props, State> {
     componentDidMount(): void;
     componentWillUnmount(): void;
     _cacheViewportSize: () => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export default FixedToResponsive;

package/dist/components/hud.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
+import * as React from "react";
 type Props = {
     message: string;
     enabled: boolean;
     onClick: () => void;
     fixedPosition?: boolean;
 };
-declare const HUD: ({ message, enabled, onClick, fixedPosition }: Props) => JSX.Element;
+declare const HUD: ({ message, enabled, onClick, fixedPosition }: Props) => React.JSX.Element;
 export default HUD;

package/dist/components/i18n-context.d.ts

@@ -11,6 +11,6 @@ type I18nContextType = {
 };
 export declare const PerseusI18nContext: React.Context<I18nContextType>;
 type Props = React.PropsWithChildren<I18nContextType>;
-export declare function PerseusI18nContextProvider({ children, strings, locale }: Props): JSX.Element;
+export declare function PerseusI18nContextProvider({ children, strings, locale }: Props): React.JSX.Element;
 export declare const usePerseusI18n: () => I18nContextType;
 export {};

package/dist/components/info-tip/info-tip.d.ts

@@ -2,5 +2,5 @@ import * as React from "react";
 type Props = {
     children: string | React.ReactElement | React.ReactElement[];
 };
-export declare const InfoTip: (props: Props) => JSX.Element;
+export declare const InfoTip: (props: Props) => React.JSX.Element;
 export default InfoTip;

package/dist/components/math-input.d.ts

@@ -86,6 +86,6 @@ declare class MathInput extends React.Component<Props, State> {
     blur(): void;
     focus(): void;
     insert(value: any): void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export default MathInput;

package/dist/components/tooltip.d.ts

@@ -66,8 +66,8 @@ declare class Tooltip extends React.Component<Props, State> {
     componentDidMount(): void;
     UNSAFE_componentWillReceiveProps(): void;
     componentDidUpdate(): void;
-    _renderToolTipDiv(isTooltipAbove?: boolean): JSX.Element;
+    _renderToolTipDiv(isTooltipAbove?: boolean): React.JSX.Element;
     _updateHeight(): void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export default Tooltip;

package/dist/es/index.css

@@ -4148,11 +4148,11 @@ html body .mq-editable-field .mq-selection .mq-nthroot-container * {
     /* `pointer-events: all` is needed to make the hit target the size of the
      * entire <g> element and not just its visible subelements */
     pointer-events: all;
-    transition: transform 0.1s ease-out;
+    transition: transform 0.15s ease-out;
 }
 
 .MafsView .protractor-rotation-handle:hover {
-    transform: scale(1.3);
+    transform: scale(1.2);
 }
 
 .MafsView .protractor-rotation-handle-arrow-arc {

package/dist/es/index.js

@@ -501,6 +501,7 @@ class InnerMathInput extends React.Component {
     }), /*#__PURE__*/React.createElement(Popover, {
       opened: this.state.keypadOpen,
       onClose: () => this.closeKeypad(),
+      portal: false,
       dismissEnabled: true,
       content: () => {
         var _this$props$keypadBut, _this$props;
@@ -730,7 +731,7 @@ const denylist = [
 // (technically the renderer still adds them)
 "key", "ref",
 // added by src/renderer.jsx
-"containerSizeClass", "widgetId", "onChange", "problemNum", "apiOptions", "questionCompleted", "findWidgets",
+"containerSizeClass", "widgetId", "onChange", "problemNum", "apiOptions", "questionCompleted", "findWidgets", "hintMode",
 // added by src/editor.jsx, for widgets removing themselves
 // this is soooo not the right place for this, but alas.
 "onRemove",
@@ -8836,12 +8837,41 @@ class GraphBounds {
   }
 }
 
-function render(element, container, callback) {
-  // TODO(LP-11406): Replace this, or callers, with React Portal
-  // @ts-expect-error - TS2322 - Type 'void' is not assignable to type 'ElementRef<ElementType>'.
-  // eslint-disable-next-line no-restricted-syntax
-  return ReactDOM__default.render(
-  /*#__PURE__*/
+var createRoot;
+
+var m = ReactDOM__default;
+if (process.env.NODE_ENV === 'production') {
+  createRoot = m.createRoot;
+} else {
+  var i = m.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+  createRoot = function(c, o) {
+    i.usingClientEntryPoint = true;
+    try {
+      return m.createRoot(c, o);
+    } finally {
+      i.usingClientEntryPoint = false;
+    }
+  };
+}
+
+// We keep a cache of elements that have already had createRoot() called on
+// them. If we don't do this, React 18 warns every subsequent call:
+//   > You are calling ReactDOMClient.createRoot() on a container that has
+//   > already been passed to createRoot() before.
+//
+// Note that this cache uses a WeakMap<> so that the cache isn't causing a
+// memory leak (by retaining elements after they're released everywhere else).
+const reactRootCache = new WeakMap();
+
+/**
+ * Renders the given ReactNode inside the given container.
+ * @param element The JSX to render
+ * @param container The HTML elemetn to render into
+ *
+ * @deprecated this function is legacy and exists to support ancient code
+ * paths. Do not use in new code.
+ */
+function render(element, container) {
   /**
    * `RenderStateRoot` is responsible for tracking whether it's
    * the initial render or subsequent renders.  It's used by
@@ -8851,9 +8881,15 @@ function render(element, container, callback) {
    * components using that hook or those components will function
    * correctly.
    */
-  React.createElement(RenderStateRoot, {
+  const children = /*#__PURE__*/React.createElement(RenderStateRoot, {
     throwIfNested: false
-  }, element), container, callback);
+  }, element);
+  let root = reactRootCache.get(container);
+  if (root == null) {
+    root = createRoot(container);
+    reactRootCache.set(container, root);
+  }
+  root.render(children);
 }
 
 function findChildOrAdd(elem, className) {
@@ -8905,6 +8941,7 @@ var Tex$1 = {
       } = await getDependencies();
       // We use createElement instead of JSX here because we can't name this file tex.tsx;
       // that name is already taken.
+      // eslint-disable-next-line import/no-deprecated
       render( /*#__PURE__*/React.createElement(TeX, {
         children: text,
         onRender: callback
@@ -15305,6 +15342,7 @@ class MovablePoint$4 {
     }
     const showTrashTooltip = () => {
       this._showTooltip(container => {
+        // eslint-disable-next-line import/no-deprecated
         render( /*#__PURE__*/React.createElement("span", {
           style: {
             fontSize: "2em"
@@ -17572,7 +17610,6 @@ class Tex extends React.Component {
     super(props);
     this._hasRendered = void 0;
     this.handleRender = () => {
-      this.props.onRender();
       this.setState({
         rendered: true
       });
@@ -19695,6 +19732,7 @@ class Renderer extends React.Component {
         onBlur: _.partial(this._onWidgetBlur, id),
         findWidgets: this.findWidgets,
         reviewModeRubric: reviewModeRubric,
+        hintMode: this.props.hintMode,
         onChange: (newProps, cb, silent = false) => {
           this._setWidgetProps(id, newProps, cb, silent);
         },
@@ -20894,6 +20932,7 @@ Renderer.defaultProps = {
   findExternalWidgets: () => [],
   alwaysUpdate: false,
   reviewMode: false,
+  hintMode: false,
   serializedState: null,
   onSerializedStateUpdated: () => {},
   linterContext: PerseusLinter.linterContextDefault
@@ -31793,7 +31832,7 @@ const renderGraph = props => {
         dispatch: dispatch
       });
     default:
-      return new UnreachableCaseError(type);
+      throw new UnreachableCaseError(type);
   }
 };
 
@@ -34123,7 +34162,8 @@ class InteractiveGraph extends React.Component {
         gridStep: gridStep,
         snapStep: snapStep,
         box: box,
-        showTooltips: !!this.props.showTooltips
+        showTooltips: !!this.props.showTooltips,
+        hintMode: this.props.hintMode
       }));
     }
     return /*#__PURE__*/React.createElement(LegacyInteractiveGraph, _extends({
@@ -41802,6 +41842,7 @@ const rules = {
       }, getInitialParseState()));
       return {
         ref: ref,
+        // @ts-expect-error - TS2322- Type 'SingleASTNode[]' is not assignable to type 'ReactNode'.
         refContent: refContent
       };
     },
@@ -44933,7 +44974,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 = "25.1.1";
+const libVersion = "26.1.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -45175,6 +45216,7 @@ class HintRenderer extends React.Component {
       // eslint-disable-next-line react/no-string-refs
       , {
         ref: "renderer",
+        hintMode: true,
         widgets: hint.widgets,
         content: hint.content || "",
         images: hint.images,
@@ -45369,7 +45411,6 @@ class HintsRenderer extends React.Component {
     }, apiOptions.isMobile && hintsVisible > 0 && /*#__PURE__*/React.createElement("div", {
       className: css(styles$2.mobileHintStylesHintTitle, sharedStyles.responsiveLabel)
     }, this.context.strings.hints), hints, showGetAnotherHint && /*#__PURE__*/React.createElement("button", {
-      // @ts-expect-error - TS2322 - Type '{ children: Element[]; rel: string; className: string; onClick: (evt: MouseEvent<HTMLButtonElement, MouseEvent>) => void; }' is not assignable to type 'DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>'.
       rel: "button",
       className: css(styles$2.linkButton, styles$2.getAnotherHintButton, apiOptions.isMobile && styles$2.mobileHintStylesGetAnotherHintButton),
       onClick: evt => {