@khanacademy/perseus 8.0.0 → 10.0.0

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # @khanacademy/perseus
 
+## 10.0.0
+
+### Major Changes
+
+-   9eb50ae1: Removed `LinterContextProps` type. Moved to `@khanacademy/perseus-linter` in a previous release, but wasn't deleted from this package.
+
+### Patch Changes
+
+-   aea86eec: Convert all usages of JSX.LibraryManagedAttributes to WB Core's PropsFor type
+-   Updated dependencies [7b11736e]
+    -   @khanacademy/math-input@10.0.1
+
+## 9.0.0
+
+### Major Changes
+
+-   dd800c22: Rename analytics prop from onEvent to onAnalyticsEvent
+-   2b99fbda: Remove 'analytics' key from PerseusDependencies
+
+### Minor Changes
+
+-   ec50a510: Switch `virtualKeypadVersion` on `perseus:expression-evaluated` event to be non-optional
+-   673f61b3: Introduce `dependencies` on ArticleRenderer, ItemRenderer, MultiRenderer, and ServerItemRenderer.
+
+### Patch Changes
+
+-   2c69b0dc: Fix APIOptions `trackInteraction` type for better Flow type generation
+-   Updated dependencies [dd800c22]
+-   Updated dependencies [5352d512]
+-   Updated dependencies [673f61b3]
+    -   @khanacademy/math-input@10.0.0
+    -   @khanacademy/perseus-core@0.2.0
+
 ## 8.0.0
 
 ### Major Changes

package/dist/article-renderer.d.ts

@@ -5,7 +5,7 @@
 import * as React from "react";
 import type { KeypadProps } from "./mixins/provide-keypad";
 import type { PerseusRenderer } from "./perseus-types";
-import type { APIOptions } from "./types";
+import type { APIOptions, PerseusDependenciesV2 } from "./types";
 import type { LinterContextProps } from "@khanacademy/perseus-linter";
 type Props = {
     apiOptions: APIOptions;
@@ -16,6 +16,7 @@ type Props = {
     useNewStyles: boolean;
     linterContext: LinterContextProps;
     legacyPerseusLint?: ReadonlyArray<string>;
+    dependencies: PerseusDependenciesV2;
 } & KeypadProps;
 type DefaultProps = {
     apiOptions: Props["apiOptions"];

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

@@ -6,7 +6,8 @@
  */
 import * as React from "react";
 import ReactComponentsInfoTip from "./info-tip/info-tip";
-type Props = JSX.LibraryManagedAttributes<typeof ReactComponentsInfoTip, React.ComponentProps<typeof ReactComponentsInfoTip>>;
+import type { PropsFor } from "@khanacademy/wonder-blocks-core";
+type Props = PropsFor<typeof ReactComponentsInfoTip>;
 type State = {
     didMount: boolean;
 };

package/dist/components/input-with-examples.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { LinterContextProps } from "../types";
+import type { LinterContextProps } from "@khanacademy/perseus-linter";
 import type { StyleType } from "@khanacademy/wonder-blocks-core";
 type Props = {
     type: "math" | "text" | "tex";

package/dist/components/sortable.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
-import type { LinterContextProps } from "../types";
 import type { Position } from "../util";
+import type { LinterContextProps } from "@khanacademy/perseus-linter";
 export declare enum Layout {
     HORIZONTAL = "horizontal",
     VERTICAL = "vertical"

package/dist/dependencies.d.ts

@@ -1,3 +1,9 @@
-import type { PerseusDependencies } from "./types";
+import * as React from "react";
+import type { PerseusDependencies, PerseusDependenciesV2 } from "./types";
 export declare const setDependencies: (dependencies: PerseusDependencies) => void;
 export declare const getDependencies: () => PerseusDependencies;
+export declare const DependenciesContext: React.Context<PerseusDependenciesV2>;
+/**
+ * useDependencies provides easy access to the current Perseus dependencies.
+ */
+export declare const useDependencies: () => PerseusDependenciesV2;

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

@@ -113,11 +113,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.createContext({
+  analytics: {
+    onAnalyticsEvent: async () => {}
+  }
+});
+
+/**
+ * useDependencies provides easy access to the current Perseus dependencies.
+ */
+const useDependencies = () => {
+  const deps = React.useContext(DependenciesContext);
+  return deps;
+};
 
 var dependencies = /*#__PURE__*/Object.freeze({
     __proto__: null,
     setDependencies: setDependencies,
-    getDependencies: getDependencies
+    getDependencies: getDependencies,
+    DependenciesContext: DependenciesContext,
+    useDependencies: useDependencies
 });
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
@@ -2430,14 +2445,6 @@ const KhanAnswerTypes = {
   }
 };
 
-const sendExpressionEvaluatedEvent = result => {
-  getDependencies().analytics({
-    type: "perseus:expression-evaluated",
-    payload: {
-      result
-    }
-  });
-};
 const ERROR_MESSAGE = i18n._("Sorry, I don't understand that!");
 const insertBraces = value => {
   // HACK(alex): Make sure that all LaTeX super/subscripts are wrapped
@@ -2460,6 +2467,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.Component {
   constructor(..._args) {
@@ -2514,7 +2528,9 @@ class Expression extends React.Component {
     };
     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;
     };
     this.getUserInput = () => {
       return Expression.getUserInputFromProps(this.props);
@@ -2670,8 +2686,6 @@ class Expression extends React.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.
@@ -2685,8 +2699,6 @@ class Expression extends React.Component {
         };
       }
       if (allEmpty) {
-        sendExpressionEvaluatedEvent("invalid");
-
         // If everything graded as empty, it's invalid.
         return {
           type: "invalid",
@@ -2695,7 +2707,6 @@ class Expression extends React.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,
@@ -2708,7 +2719,6 @@ class Expression extends React.Component {
       const apiResult = onInputError(null,
       // Reserved for some widget identifier
       userInput, matchMessage);
-      sendExpressionEvaluatedEvent("invalid");
       return {
         type: "invalid",
         message: apiResult === false ? null : matchMessage
@@ -2720,7 +2730,6 @@ class Expression extends React.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,
@@ -2746,6 +2755,15 @@ class Expression extends React.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.createElement(KeypadInput
@@ -2906,11 +2924,18 @@ const propUpgrades$2 = {
     }]
   })
 };
+const ExpressionWithDependencies = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const deps = useDependencies();
+  return /*#__PURE__*/React.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,
@@ -19195,8 +19220,8 @@ class Renderer extends React.Component {
 
   // @ts-expect-error - TS2564 - Property 'widgetIds' has no initializer and is not definitely assigned in the constructor.
 
-  constructor(_props, context) {
-    super(_props, context);
+  constructor(_props) {
+    super(_props);
     this._currentFocus = void 0;
     this._foundTextNodes = void 0;
     this._interactionTrackers = void 0;
@@ -44033,7 +44058,9 @@ class ArticleRenderer extends React.Component {
     // TODO(alex): Add mobile api functions and pass them down here
     const sections = this._sections().map((section, i) => {
       const refForSection = `section-${i}`;
-      return /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React.createElement(DependenciesContext.Provider, {
+        value: this.props.dependencies
+      }, /*#__PURE__*/React.createElement("div", {
         key: i,
         className: "clearfix"
       }, /*#__PURE__*/React.createElement(Renderer, _extends({}, section, {
@@ -44051,7 +44078,7 @@ class ArticleRenderer extends React.Component {
         }),
         linterContext: PerseusLinter.pushContextStack(this.props.linterContext, "article"),
         legacyPerseusLint: this.props.legacyPerseusLint
-      })));
+      }))));
     });
     return /*#__PURE__*/React.createElement("div", {
       className: classes
@@ -44281,13 +44308,9 @@ class HintsRenderer extends React.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.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.pushContextStack(this.props.linterContext, "hints[" + i + "]")
       });
       if (isFinalHelpPage) {
         hints.push(renderer);
@@ -44508,7 +44531,9 @@ class ItemRenderer extends React.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.createElement(Renderer, _extends({
+    render( /*#__PURE__*/React.createElement(DependenciesContext.Provider, {
+      value: this.props.dependencies
+    }, /*#__PURE__*/React.createElement(Renderer, _extends({
       ref: node => {
         if (!node) {
           return;
@@ -44536,18 +44561,18 @@ class ItemRenderer extends React.Component {
       linterContext: PerseusLinter.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.createElement(HintsRenderer, {
+    render( /*#__PURE__*/React.createElement(DependenciesContext.Provider, {
+      value: this.props.dependencies
+    }, /*#__PURE__*/React.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.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 || {};
@@ -44764,7 +44789,9 @@ class ItemRenderer extends React.Component {
     this.questionRenderer.deselectIncorrectSelectedChoices();
   }
   render() {
-    return /*#__PURE__*/React.createElement("div", null);
+    return /*#__PURE__*/React.createElement(DependenciesContext.Provider, {
+      value: this.props.dependencies
+    }, /*#__PURE__*/React.createElement("div", null));
   }
 }
 ItemRenderer.defaultProps = {
@@ -45078,20 +45105,20 @@ class ServerItemRenderer extends React.Component {
     }));
     const hintsRenderer = /*#__PURE__*/React.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.createElement("div", null, /*#__PURE__*/React.createElement("div", null, questionRenderer), /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React.createElement(DependenciesContext.Provider, {
+      value: this.props.dependencies
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, questionRenderer), /*#__PURE__*/React.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 : css(styles$3.hintsContainer)
-    }, hintsRenderer));
+    }, hintsRenderer)));
   }
 }
 ServerItemRenderer.defaultProps = {
@@ -46296,7 +46323,6 @@ class MultiRenderer extends React.Component {
       // _annotateRendererArray() needs this
       ref: null,
       makeRenderer: () => /*#__PURE__*/React.createElement(HintsRenderer, _extends({}, this._getRendererProps(), {
-        // @ts-expect-error - TS2769 - No overload matches this call.
         findExternalWidgets: findExternalWidgets,
         hints: [hint]
       }))
@@ -46462,7 +46488,6 @@ class MultiRenderer extends React.Component {
       const hintRendererDatas = rendererDatas;
       renderers = [...renderers];
       renderers.firstN = n => /*#__PURE__*/React.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
@@ -46492,9 +46517,11 @@ class MultiRenderer extends React.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.createElement(DependenciesContext.Provider, {
+      value: this.props.dependencies
+    }, this.props.children({
       renderers: this._getRenderers()
-    });
+    }));
   }
 }
 const styles = StyleSheet.create({