@khanacademy/perseus 8.0.0 → 10.0.0

package/dist/hint-renderer.d.ts

@@ -1,5 +1,6 @@
 import * as React from "react";
-import type { APIOptions, LinterContextProps } from "./types";
+import type { APIOptions } from "./types";
+import type { LinterContextProps } from "@khanacademy/perseus-linter";
 type Props = {
     apiOptions: APIOptions;
     className?: string;

package/dist/hints-renderer.d.ts

@@ -1,7 +1,8 @@
 import * as React from "react";
 import type Renderer from "./renderer";
 import type { APIOptionsWithDefaults } from "./types";
-type Props = JSX.LibraryManagedAttributes<Renderer, React.ComponentProps<typeof Renderer>> & {
+import type { PropsFor } from "@khanacademy/wonder-blocks-core";
+type Props = PropsFor<typeof Renderer> & {
     className?: string;
     hints: ReadonlyArray<any>;
     hintsVisible?: number;

package/dist/index.css

@@ -3679,7 +3679,7 @@ body.mobile .framework-perseus table.perseus-widget-table-of-values.non-markdown
   outline: none !important;
 }
 .keypad-input .mq-editable-field .mq-root-block {
-  overflow-x: scroll;
+  overflow-x: auto;
 }
 .keypad-input .mq-editable-field .mq-cursor:not(:only-child),
 .keypad-input .mq-editable-field .mq-root-block.mq-hasCursor > .mq-cursor:only-child {
@@ -3698,12 +3698,11 @@ body.mobile .framework-perseus table.perseus-widget-table-of-values.non-markdown
   margin-left: -1px !important;
   margin-right: -1px !important;
   opacity: 1 !important;
-  transition: opacity 500ms ease-out !important;
+  transition: opacity 300ms ease !important;
   visibility: visible !important;
 }
 .keypad-input .mq-editable-field .mq-cursor.mq-blink {
   opacity: 0 !important;
-  transition: opacity 500ms ease-in !important;
   visibility: visible !important;
 }
 .keypad-input .mq-editable-field .mq-non-leaf .mq-cursor:only-child {
@@ -3712,12 +3711,11 @@ body.mobile .framework-perseus table.perseus-widget-table-of-values.non-markdown
   border-radius: 1px;
   opacity: 1 !important;
   padding: 0 4px 0 4px;
-  transition: border-color 500ms ease-out !important;
+  transition: border-color 300ms ease !important;
 }
 .keypad-input .mq-editable-field .mq-non-leaf .mq-cursor:only-child.mq-blink {
   border-color: #1865f2 !important;
   opacity: 1 !important;
-  transition: border-color 500ms ease-in !important;
 }
 .keypad-input .mq-empty {
   background: transparent !important;

package/dist/index.d.ts

@@ -86,7 +86,7 @@ export { default as WIDGET_PROP_DENYLIST } from "./mixins/widget-prop-denylist";
 export type { PerseusOptions } from "./init";
 export type { ILogger, LogErrorOptions, ErrorKind } from "./logging/log";
 export type { ServerItemRenderer as ServerItemRendererComponent } from "./server-item-renderer";
-export type { Alignment, APIOptions, APIOptionsWithDefaults, ChangeHandler, DeviceType, DomInsertCheckFn, EditorMode, FocusPath, Hint, ImageDict, ImageUploader, JiptLabelStore, JiptRenderer, LinterContextProps, PerseusDependencies, PerseusScore, Version, VideoData, VideoKind, WidgetDict, WidgetExports, WidgetInfo, } from "./types";
+export type { Alignment, APIOptions, APIOptionsWithDefaults, ChangeHandler, DeviceType, DomInsertCheckFn, EditorMode, FocusPath, Hint, ImageDict, ImageUploader, JiptLabelStore, JiptRenderer, PerseusDependencies, PerseusScore, Version, VideoData, VideoKind, WidgetDict, WidgetExports, WidgetInfo, } from "./types";
 export type { ParsedValue } from "./util";
 export type { MathFormat, InputNumberWidget, PerseusImageBackground, PerseusInteractiveGraphWidgetOptions, PerseusRadioWidgetOptions, PerseusExpressionWidgetOptions, PerseusRenderer, } from "./perseus-types";
 export type { Coord } from "./interactive2/types";

package/dist/index.js

@@ -183,11 +183,26 @@ const getDependencies = () => {
   }
   throw new Error(["Perseus has not been provided required dependencies.", "setDependencies(dependencies) must be called first.", "Make sure Perseus is being imported from javascript/perseus/perseus.js."].join("\n"));
 };
+const DependenciesContext = /*#__PURE__*/React__namespace.createContext({
+  analytics: {
+    onAnalyticsEvent: async () => {}
+  }
+});
+
+/**
+ * useDependencies provides easy access to the current Perseus dependencies.
+ */
+const useDependencies = () => {
+  const deps = React__namespace.useContext(DependenciesContext);
+  return deps;
+};
 
 var dependencies = /*#__PURE__*/Object.freeze({
     __proto__: null,
     setDependencies: setDependencies,
-    getDependencies: getDependencies
+    getDependencies: getDependencies,
+    DependenciesContext: DependenciesContext,
+    useDependencies: useDependencies
 });
 
 const prettyBig = {
@@ -2489,14 +2504,6 @@ const KhanAnswerTypes = {
   }
 };
 
-const sendExpressionEvaluatedEvent = result => {
-  getDependencies().analytics({
-    type: "perseus:expression-evaluated",
-    payload: {
-      result
-    }
-  });
-};
 const ERROR_MESSAGE = i18n__namespace._("Sorry, I don't understand that!");
 const insertBraces = value => {
   // HACK(alex): Make sure that all LaTeX super/subscripts are wrapped
@@ -2519,6 +2526,13 @@ const insertBraces = value => {
   // TODO(alex): Properly hack MathQuill to always use explicit braces.
   return value.replace(/([_^])([^{])/g, "$1{$2}");
 };
+const deriveKeypadVersion = apiOptions => {
+  // We can derive which version of the keypad is in use. This is
+  // a bit tricky, but this code will be relatively short-lived
+  // as we coalesce onto the new, v2 Keypad, at which point we
+  // can remove this `virtualKeypadVersion` field entirely.
+  return apiOptions.nativeKeypadProxy != null ? "REACT_NATIVE_KEYPAD" : apiOptions.customKeypad === true ? apiOptions.useV2Keypad === true ? "MATH_INPUT_KEYPAD_V2" : "MATH_INPUT_KEYPAD_V1" : "PERSEUS_MATH_INPUT";
+};
 // The new, MathQuill input expression widget
 class Expression extends React__namespace.Component {
   constructor() {
@@ -2575,7 +2589,9 @@ class Expression extends React__namespace.Component {
     });
     _defineProperty(this, "simpleValidate", (rubric, onInputError) => {
       onInputError = onInputError || function () {};
-      return Expression.validate(this.getUserInput(), rubric, onInputError);
+      const result = Expression.validate(this.getUserInput(), rubric, onInputError);
+      this.sendExpressionEvaluatedEvent(result.type === "invalid" ? "invalid" : result.earned === result.total ? "correct" : "incorrect");
+      return result;
     });
     _defineProperty(this, "getUserInput", () => {
       return Expression.getUserInputFromProps(this.props);
@@ -2733,8 +2749,6 @@ class Expression extends React__namespace.Component {
     // we did, whether it's considered correct, incorrect, or ungraded
     if (!matchingAnswerForm) {
       if (firstUngradedResult) {
-        sendExpressionEvaluatedEvent("invalid");
-
         // While we didn't directly match with any answer form, we
         // did at some point get an "ungraded" validation result,
         // which might indicate e.g. a mismatch in variable casing.
@@ -2748,8 +2762,6 @@ class Expression extends React__namespace.Component {
         };
       }
       if (allEmpty) {
-        sendExpressionEvaluatedEvent("invalid");
-
         // If everything graded as empty, it's invalid.
         return {
           type: "invalid",
@@ -2758,7 +2770,6 @@ class Expression extends React__namespace.Component {
       }
       // We fell through all the possibilities and we're not empty,
       // so the answer is considered incorrect.
-      sendExpressionEvaluatedEvent("incorrect");
       return {
         type: "points",
         earned: 0,
@@ -2771,7 +2782,6 @@ class Expression extends React__namespace.Component {
       const apiResult = onInputError(null,
       // Reserved for some widget identifier
       userInput, matchMessage);
-      sendExpressionEvaluatedEvent("invalid");
       return {
         type: "invalid",
         message: apiResult === false ? null : matchMessage
@@ -2783,7 +2793,6 @@ class Expression extends React__namespace.Component {
     // TODO(eater): Seems silly to translate result to this
     // invalid/points thing and immediately translate it back in
     // ItemRenderer.scoreInput()
-    sendExpressionEvaluatedEvent(matchingAnswerForm.considered === "correct" ? "correct" : "incorrect");
     return {
       type: "points",
       earned: matchingAnswerForm.considered === "correct" ? 1 : 0,
@@ -2809,6 +2818,15 @@ class Expression extends React__namespace.Component {
     // @ts-expect-error - TS2339 - Property 'insert' does not exist on type 'ReactInstance'.
     this.refs.input.insert(keyPressed);
   }
+  sendExpressionEvaluatedEvent(result) {
+    this.props.analytics.onAnalyticsEvent({
+      type: "perseus:expression-evaluated",
+      payload: {
+        result,
+        virtualKeypadVersion: deriveKeypadVersion(this.props.apiOptions)
+      }
+    });
+  }
   render() {
     if (this.props.apiOptions.customKeypad) {
       return /*#__PURE__*/React__namespace.createElement(mathInput.KeypadInput
@@ -2969,11 +2987,18 @@ const propUpgrades$2 = {
     }]
   })
 };
+const ExpressionWithDependencies = /*#__PURE__*/React__namespace.forwardRef((props, ref) => {
+  const deps = useDependencies();
+  return /*#__PURE__*/React__namespace.createElement(Expression, _extends({
+    ref: ref,
+    analytics: deps.analytics
+  }, props));
+});
 var Expression$1 = {
   name: "expression",
   displayName: "Expression / Equation",
   defaultAlignment: "inline-block",
-  widget: Expression,
+  widget: ExpressionWithDependencies,
   transform: widgetOptions => {
     const {
       times,
@@ -19280,9 +19305,9 @@ class Renderer extends React__namespace.Component {
 
   // @ts-expect-error - TS2564 - Property 'widgetIds' has no initializer and is not definitely assigned in the constructor.
 
-  constructor(_props, context) {
+  constructor(_props) {
     var _this;
-    super(_props, context);
+    super(_props);
     _this = this;
     _defineProperty(this, "_currentFocus", void 0);
     _defineProperty(this, "_foundTextNodes", void 0);
@@ -44299,7 +44324,9 @@ class ArticleRenderer extends React__namespace.Component {
     // TODO(alex): Add mobile api functions and pass them down here
     const sections = this._sections().map((section, i) => {
       const refForSection = "section-".concat(i);
-      return /*#__PURE__*/React__namespace.createElement("div", {
+      return /*#__PURE__*/React__namespace.createElement(DependenciesContext.Provider, {
+        value: this.props.dependencies
+      }, /*#__PURE__*/React__namespace.createElement("div", {
         key: i,
         className: "clearfix"
       }, /*#__PURE__*/React__namespace.createElement(Renderer, _extends({}, section, {
@@ -44318,7 +44345,7 @@ class ArticleRenderer extends React__namespace.Component {
         },
         linterContext: PerseusLinter__namespace.pushContextStack(this.props.linterContext, "article"),
         legacyPerseusLint: this.props.legacyPerseusLint
-      })));
+      }))));
     });
     return /*#__PURE__*/React__namespace.createElement("div", {
       className: classes
@@ -44465,7 +44492,6 @@ class HintsRenderer extends React__namespace.Component {
       // false in hints.
       return {
         ...ApiOptions.defaults,
-        // @ts-expect-error - TS2339 - Property 'apiOptions' does not exist on type 'Readonly<{ className?: string | undefined; hints: readonly any[]; hintsVisible?: number | undefined; }> & Readonly<{ children?: ReactNode; }>'.
         ...this.props.apiOptions,
         readOnly: false
       };
@@ -44552,13 +44578,9 @@ class HintsRenderer extends React__namespace.Component {
         totalHints: this.props.hints.length,
         ref: "hintRenderer" + i,
         key: "hintRenderer" + i,
-        apiOptions: apiOptions
-        // @ts-expect-error - TS2339 - Property 'findExternalWidgets' does not exist on type 'Readonly<{ className?: string | undefined; hints: readonly any[]; hintsVisible?: number | undefined; }> & Readonly<{ children?: ReactNode; }>'.
-        ,
+        apiOptions: apiOptions,
         findExternalWidgets: this.props.findExternalWidgets,
-        linterContext: PerseusLinter__namespace.pushContextStack(
-        // @ts-expect-error - TS2339 - Property 'linterContext' does not exist on type 'Readonly<{ className?: string | undefined; hints: readonly any[]; hintsVisible?: number | undefined; }> & Readonly<{ children?: ReactNode; }>'.
-        this.props.linterContext, "hints[" + i + "]")
+        linterContext: PerseusLinter__namespace.pushContextStack(this.props.linterContext, "hints[" + i + "]")
       });
       if (isFinalHelpPage) {
         hints.push(renderer);
@@ -44784,7 +44806,9 @@ class ItemRenderer extends React__namespace.Component {
     // that have completely different places in the DOM, we have to do this
     // strangeness instead of relying on React's normal render() method.
     // TODO(alpert): Figure out how to clean this up somehow
-    render( /*#__PURE__*/React__namespace.createElement(Renderer, _extends({
+    render( /*#__PURE__*/React__namespace.createElement(DependenciesContext.Provider, {
+      value: this.props.dependencies
+    }, /*#__PURE__*/React__namespace.createElement(Renderer, _extends({
       ref: node => {
         if (!node) {
           return;
@@ -44812,18 +44836,18 @@ class ItemRenderer extends React__namespace.Component {
       linterContext: PerseusLinter__namespace.pushContextStack(this.props.linterContext, "question")
     }, this.props.item.question, {
       legacyPerseusLint: this.props.legacyPerseusLint
-    })),
+    }))),
     // @ts-expect-error - TS2345 - Argument of type 'Element' is not assignable to parameter of type 'HTMLElement'.
     workArea);
-    render( /*#__PURE__*/React__namespace.createElement(HintsRenderer, {
+    render( /*#__PURE__*/React__namespace.createElement(DependenciesContext.Provider, {
+      value: this.props.dependencies
+    }, /*#__PURE__*/React__namespace.createElement(HintsRenderer, {
       ref: node => this.hintsRenderer = node,
       hints: this.props.item.hints,
-      hintsVisible: this.state.hintsVisible
-      // @ts-expect-error - TS2769 - No overload matches this call.
-      ,
+      hintsVisible: this.state.hintsVisible,
       apiOptions: apiOptions,
       linterContext: PerseusLinter__namespace.pushContextStack(this.props.linterContext, "hints")
-    }),
+    })),
     // @ts-expect-error - TS2345 - Argument of type 'Element' is not assignable to parameter of type 'HTMLElement'.
     hintsArea);
     const answerArea = this.props.item.answerArea || {};
@@ -45040,7 +45064,9 @@ class ItemRenderer extends React__namespace.Component {
     this.questionRenderer.deselectIncorrectSelectedChoices();
   }
   render() {
-    return /*#__PURE__*/React__namespace.createElement("div", null);
+    return /*#__PURE__*/React__namespace.createElement(DependenciesContext.Provider, {
+      value: this.props.dependencies
+    }, /*#__PURE__*/React__namespace.createElement("div", null));
   }
 }
 _defineProperty(ItemRenderer, "defaultProps", {
@@ -45357,20 +45383,20 @@ class ServerItemRenderer extends React__namespace.Component {
     }));
     const hintsRenderer = /*#__PURE__*/React__namespace.createElement(HintsRenderer, {
       hints: this.props.item.hints,
-      hintsVisible: this.props.hintsVisible
-      // @ts-expect-error - TS2769 - No overload matches this call.
-      ,
+      hintsVisible: this.props.hintsVisible,
       apiOptions: apiOptions,
       ref: elem => this.hintsRenderer = elem
     });
-    return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", null, questionRenderer), /*#__PURE__*/React__namespace.createElement("div", {
+    return /*#__PURE__*/React__namespace.createElement(DependenciesContext.Provider, {
+      value: this.props.dependencies
+    }, /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", null, questionRenderer), /*#__PURE__*/React__namespace.createElement("div", {
       className:
       // Avoid adding any horizontal padding when applying the
       // mobile hint styles, which are flush to the left.
       // NOTE(charlie): We may still want to apply this
       // padding for desktop exercises.
       apiOptions.isMobile ? undefined : aphrodite.css(styles$3.hintsContainer)
-    }, hintsRenderer));
+    }, hintsRenderer)));
   }
 }
 _defineProperty(ServerItemRenderer, "defaultProps", {
@@ -46531,7 +46557,6 @@ class MultiRenderer extends React__namespace.Component {
       // _annotateRendererArray() needs this
       ref: null,
       makeRenderer: () => /*#__PURE__*/React__namespace.createElement(HintsRenderer, _extends({}, this._getRendererProps(), {
-        // @ts-expect-error - TS2769 - No overload matches this call.
         findExternalWidgets: findExternalWidgets,
         hints: [hint]
       }))
@@ -46697,7 +46722,6 @@ class MultiRenderer extends React__namespace.Component {
       const hintRendererDatas = rendererDatas;
       renderers = [...renderers];
       renderers.firstN = n => /*#__PURE__*/React__namespace.createElement(HintsRenderer, _extends({}, this._getRendererProps(), {
-        // @ts-expect-error - TS2769 - No overload matches this call.
         findExternalWidgets: hintRendererDatas[0] ? hintRendererDatas[0].findExternalWidgets : undefined,
         hints: hintRendererDatas.map(d => d.hint),
         hintsVisible: n
@@ -46727,9 +46751,11 @@ class MultiRenderer extends React__namespace.Component {
 
     // Pass the renderer tree to the `children` function, which will
     // determine the actual content of this component.
-    return this.props.children({
+    return /*#__PURE__*/React__namespace.createElement(DependenciesContext.Provider, {
+      value: this.props.dependencies
+    }, this.props.children({
       renderers: this._getRenderers()
-    });
+    }));
   }
 }
 const styles = aphrodite.StyleSheet.create({