@khanacademy/perseus 15.0.0 → 16.0.0

package/dist/index.d.ts

@@ -10,6 +10,7 @@ export { default as itemVersion } from "./item-version";
  * Renderers
  */
 export { default as ArticleRenderer } from "./article-renderer";
+export { default as ItemRenderer } from "./item-renderer";
 export { default as ServerItemRenderer } from "./server-item-renderer";
 export { default as HintsRenderer } from "./hints-renderer";
 export { default as HintRenderer } from "./hint-renderer";

package/dist/index.js

@@ -10260,7 +10260,7 @@ const pluck = function (table, subKey) {
  *   });
  * {a: 2, b: 3}
  */
-const mapObject$2 = function (obj, lambda) {
+const mapObject$3 = function (obj, lambda) {
   const result = {};
   ___default["default"].each(___default["default"].keys(obj), function (key) {
     // @ts-expect-error - TS2345 - Argument of type 'string' is not assignable to parameter of type 'K'.
@@ -10286,7 +10286,7 @@ const mapObjectFromArray$1 = function (arr, lambda) {
 };
 var objective_ = {
   pluck: pluck,
-  mapObject: mapObject$2,
+  mapObject: mapObject$3,
   mapObjectFromArray: mapObjectFromArray$1
 };
 
@@ -18932,7 +18932,7 @@ class WidgetContainer extends React__namespace.Component {
 }
 
 const {
-  mapObject: mapObject$1,
+  mapObject: mapObject$2,
   mapObjectFromArray
 } = objective_;
 const rContainsNonWhitespace = /\S/;
@@ -19159,7 +19159,7 @@ class Renderer extends React__namespace.Component {
   // @ts-expect-error - TS2322 - Type '(props: Props) => Partial<Record<string, CategorizerWidget | CSProgramWidget | DefinitionWidget | DropdownWidget | ... 35 more ... | VideoWidget>>' is not assignable to type '(props: Props) => { [key: string]: PerseusWidget; }'.
   _getAllWidgetsInfo = props => {
     // @ts-expect-error - TS2345 - Argument of type '{ [key: string]: PerseusWidget; }' is not assignable to parameter of type 'Partial<Record<string, CategorizerWidget>>'.
-    return mapObject$1(props.widgets, (widgetInfo, widgetId) => {
+    return mapObject$2(props.widgets, (widgetInfo, widgetId) => {
       if (!widgetInfo.type || !widgetInfo.alignment) {
         const newValues = {};
         if (!widgetInfo.type) {
@@ -19175,7 +19175,7 @@ class Renderer extends React__namespace.Component {
   };
   _getAllWidgetsStartProps = (allWidgetInfo, props) => {
     // @ts-expect-error - TS2345 - Argument of type '{ [key: string]: PerseusWidget; }' is not assignable to parameter of type 'Partial<Record<string, CategorizerWidget>>'.
-    return mapObject$1(allWidgetInfo, widgetInfo => {
+    return mapObject$2(allWidgetInfo, widgetInfo => {
       return getRendererPropsForWidgetInfo(widgetInfo, props.problemNum);
     });
   };
@@ -19295,7 +19295,7 @@ class Renderer extends React__namespace.Component {
    * state from that instead of the current widget props.
    */
   getSerializedState = widgetProps => {
-    return mapObject$1(widgetProps || this.state.widgetProps, (props, widgetId) => {
+    return mapObject$2(widgetProps || this.state.widgetProps, (props, widgetId) => {
       const widget = this.getWidgetInstance(widgetId);
       if (widget && widget.getSerializedState) {
         return widget.getSerializedState();
@@ -19331,7 +19331,7 @@ class Renderer extends React__namespace.Component {
       }
     };
     this.setState({
-      widgetProps: mapObject$1(serializedState, (props, widgetId) => {
+      widgetProps: mapObject$2(serializedState, (props, widgetId) => {
         const widget = this.getWidgetInstance(widgetId);
         if (widget && widget.restoreSerializedState) {
           // Note that we probably can't call
@@ -44216,7 +44216,7 @@ const init = function (options) {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "15.0.0";
+const libVersion = "16.0.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -44726,6 +44726,454 @@ const styles$4 = aphrodite.StyleSheet.create({
   }
 });
 
+/* eslint-disable @khanacademy/ts-no-error-suppressions */
+
+// This represents the shape of any component that uses this ProvideKeypad
+// mixin.
+// NOTE: This is not a real component.  It's a collection of methods used to
+// create and manage a Keypad instances.
+// TODO(LP-10789): replace this with a React Context object to pass information
+// between Perseus and the Keypad.
+const ProvideKeypad = {
+  getInitialState() {
+    const _this = this;
+    let keypadElement = null;
+    if (_this.props.apiOptions && _this.props.apiOptions.customKeypad && _this.props.apiOptions.nativeKeypadProxy) {
+      keypadElement = _this.props.apiOptions.nativeKeypadProxy(
+      // @ts-expect-error - TS2339 - Property 'blur' does not exist on type '{ readonly propTypes: { readonly apiOptions: React.PropType<{ customKeypad?: boolean | undefined; nativeKeypadProxy?: ((...a: readonly any[]) => unknown) | undefined; }>; readonly keypadStyle: Requireable<any>; }; readonly getInitialState: () => { ...; }; readonly componentDidMount: () => void; readonly componentWil...'. | TS2339 - Property 'blur' does not exist on type '{ readonly propTypes: { readonly apiOptions: React.PropType<{ customKeypad?: boolean | undefined; nativeKeypadProxy?: ((...a: readonly any[]) => unknown) | undefined; }>; readonly keypadStyle: Requireable<any>; }; readonly getInitialState: () => { ...; }; readonly componentDidMount: () => void; readonly componentWil...'.
+      () => _this.blur && _this.blur());
+    }
+    return {
+      keypadElement
+    };
+  },
+  componentDidMount() {
+    const _this = this;
+    const apiOptions = _this.props.apiOptions;
+    if (apiOptions && apiOptions.customKeypad && !apiOptions.nativeKeypadProxy) {
+      // TODO(charlie): Render this and the wrapped component in the same
+      // React tree. We may also want to add this keypad asynchronously
+      // or on-demand in the future.
+      _this._keypadContainer = document.createElement("div");
+      document.body?.appendChild(_this._keypadContainer);
+      render( /*#__PURE__*/React__namespace.createElement(mathInput.MobileKeypad, {
+        onElementMounted: element => {
+          // NOTE(kevinb): The reason why this setState works is
+          // b/c we're calling it manually from item-renderer.jsx
+          // and we're manually setting the 'this' by using 'call'
+          // @ts-expect-error - TS2339 - Property 'setState' does not exist on type '{ readonly propTypes: { readonly apiOptions: React.PropType<{ customKeypad?: boolean | undefined; nativeKeypadProxy?: ((...a: readonly any[]) => unknown) | undefined; }>; readonly keypadStyle: Requireable<any>; }; readonly getInitialState: () => { ...; }; readonly componentDidMount: () => void; readonly componentWil...'.
+          _this.setState({
+            keypadElement: element
+          });
+        },
+        onDismiss: () => {
+          // @ts-expect-error - TS2339 - Property 'blur' does not exist on type '{ readonly propTypes: { readonly apiOptions: React.PropType<{ customKeypad?: boolean | undefined; nativeKeypadProxy?: ((...a: readonly any[]) => unknown) | undefined; }>; readonly keypadStyle: Requireable<any>; }; readonly getInitialState: () => { ...; }; readonly componentDidMount: () => void; readonly componentWil...'. | TS2339 - Property 'blur' does not exist on type '{ readonly propTypes: { readonly apiOptions: React.PropType<{ customKeypad?: boolean | undefined; nativeKeypadProxy?: ((...a: readonly any[]) => unknown) | undefined; }>; readonly keypadStyle: Requireable<any>; }; readonly getInitialState: () => { ...; }; readonly componentDidMount: () => void; readonly componentWil...'.
+          _this.blur && _this.blur();
+        }
+        // @ts-expect-error - TS2339 - Property 'props' does not exist on type '{ readonly propTypes: { readonly apiOptions: React.PropType<{ customKeypad?: boolean | undefined; nativeKeypadProxy?: ((...a: readonly any[]) => unknown) | undefined; }>; readonly keypadStyle: Requireable<any>; }; readonly getInitialState: () => { ...; }; readonly componentDidMount: () => void; readonly componentWil...'.
+        ,
+        style: _this.props.keypadStyle,
+        onAnalyticsEvent: async () => {
+          // Intentionally left empty. This component is
+          // deprecated and so we don't want/need to instrument
+          // it.
+        }
+      }), _this._keypadContainer);
+    }
+  },
+  componentWillUnmount() {
+    const _this = this;
+    if (_this._keypadContainer) {
+      ReactDOM__default["default"].unmountComponentAtNode(_this._keypadContainer);
+      if (_this._keypadContainer.parentNode) {
+        // Note ChildNode.remove() isn't available in older Android
+        // webviews.
+        _this._keypadContainer.parentNode.removeChild(_this._keypadContainer);
+      }
+      _this._keypadContainer = null;
+    }
+  },
+  keypadElement() {
+    const _this = this;
+    return _this.state.keypadElement;
+  }
+};
+
+const {
+  mapObject: mapObject$1
+} = objective_;
+/**
+ * @depreciated use ServerItemRenderer
+ */
+class ItemRenderer extends React__namespace.Component {
+  // @ts-expect-error - TS2564 - Property 'questionRenderer' has no initializer and is not definitely assigned in the constructor.
+
+  static defaultProps = {
+    apiOptions: ApiOptions.defaults,
+    // defaults are set in `this.update()`
+    controlPeripherals: true,
+    hintsAreaSelector: "#hintsarea",
+    initialHintsVisible: 0,
+    workAreaSelector: "#workarea",
+    reviewMode: false,
+    linterContext: PerseusLinter__namespace.linterContextDefault
+  };
+  constructor(props) {
+    super(props);
+    this.state = {
+      // NOTE: This value is used in provide-keypad.jsx which contains a
+      // "mixin" that this file calls methods on.
+      ...ProvideKeypad.getInitialState.call(this),
+      hintsVisible: props.initialHintsVisible || 0,
+      questionCompleted: false,
+      questionHighlightedWidgets: []
+    };
+  }
+  componentDidMount() {
+    ProvideKeypad.componentDidMount.call(this);
+    if (this.props.controlPeripherals && this.props.apiOptions.setDrawingAreaAvailable) {
+      this.props.apiOptions.setDrawingAreaAvailable(true);
+    }
+    this._currentFocus = null;
+    this.update();
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    this.setState({
+      questionHighlightedWidgets: []
+    });
+  }
+  componentDidUpdate() {
+    this.update();
+  }
+  componentWillUnmount() {
+    ProvideKeypad.componentWillUnmount.call(this);
+    const workArea = document.querySelector(this.props.workAreaSelector);
+    if (workArea != null) {
+      ReactDOM__namespace.unmountComponentAtNode(workArea);
+    }
+    const hintsArea = document.querySelector(this.props.hintsAreaSelector);
+    if (hintsArea != null) {
+      ReactDOM__namespace.unmountComponentAtNode(hintsArea);
+    }
+    if (this.props.controlPeripherals) {
+      const answerArea = this.props.item.answerArea || {};
+      if (answerArea.calculator) {
+        $__default["default"]("#calculator").hide();
+      }
+      if (answerArea.periodicTable) {
+        $__default["default"](".periodic-table-info-box").hide();
+      }
+      if (answerArea.zTable) {
+        $__default["default"](".z-table-info-box").hide();
+      }
+      if (answerArea.tTable) {
+        $__default["default"](".t-table-info-box").hide();
+      }
+      if (answerArea.chi2Table) {
+        $__default["default"](".chi2-table-info-box").hide();
+      }
+    }
+  }
+  keypadElement() {
+    return ProvideKeypad.keypadElement.call(this);
+  }
+  update() {
+    const apiOptions = {
+      ...ApiOptions.defaults,
+      ...this.props.apiOptions,
+      onFocusChange: this._handleFocusChange
+    };
+    const workArea = document.querySelector(this.props.workAreaSelector);
+    const hintsArea = document.querySelector(this.props.hintsAreaSelector);
+    if (!workArea || !hintsArea) {
+      return;
+    }
+
+    // Since the item renderer works by rendering things into three divs
+    // 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(DependenciesContext.Provider, {
+      value: this.props.dependencies
+    }, /*#__PURE__*/React__namespace.createElement(Renderer, _extends({
+      ref: node => {
+        if (!node) {
+          return;
+        }
+        this.questionRenderer = node;
+
+        // NOTE(jeremy): Why don't we just pass this into the
+        // renderer as a prop?
+        const {
+          answerableCallback
+        } = apiOptions;
+        if (answerableCallback) {
+          const isAnswerable = this.questionRenderer.emptyWidgets().length === 0;
+          answerableCallback(isAnswerable);
+        }
+      },
+      keypadElement: this.keypadElement(),
+      problemNum: this.props.problemNum,
+      onInteractWithWidget: this.handleInteractWithWidget,
+      highlightedWidgets: this.state.questionHighlightedWidgets,
+      apiOptions: apiOptions,
+      questionCompleted: this.state.questionCompleted,
+      reviewMode: this.props.reviewMode,
+      savedState: this.props.savedState,
+      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(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,
+      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 || {};
+    if (this.props.controlPeripherals) {
+      $__default["default"]("#calculator").toggle(answerArea.calculator || false);
+      $__default["default"](".periodic-table-info-box").toggle(answerArea.periodicTable || false);
+      $__default["default"](".z-table-info-box").toggle(answerArea.zTable || false);
+      $__default["default"](".t-table-info-box").toggle(answerArea.tTable || false);
+      $__default["default"](".chi2-table-info-box").toggle(answerArea.chi2Table || false);
+    } else {
+      if (answerArea.calculator) {
+        this.props.onShowCalculator && this.props.onShowCalculator();
+      }
+      if (answerArea.periodicTable) {
+        this.props.onShowPeriodicTable && this.props.onShowPeriodicTable({
+          showKey: answerArea.periodicTableWithKey
+        });
+      }
+      if (answerArea.zTable) {
+        this.props.onShowZTable && this.props.onShowZTable();
+      }
+      if (answerArea.tTable) {
+        this.props.onShowTTable && this.props.onShowTTable();
+      }
+      if (answerArea.chi2Table) {
+        this.props.onShowChi2Table && this.props.onShowChi2Table();
+      }
+    }
+  }
+  _handleFocusChange = (newFocus, oldFocus) => {
+    if (newFocus != null) {
+      this._setCurrentFocus(newFocus);
+    } else {
+      this._onRendererBlur(oldFocus);
+    }
+  };
+
+  // Sets the current focus path and element and send an onChangeFocus event
+  // back to our parent.
+  _setCurrentFocus(newFocus) {
+    const keypadElement = this.keypadElement();
+    // By the time this happens, newFocus cannot be a prefix of
+    // prevFocused, since we must have either been called from
+    // an onFocusChange within a renderer, which is only called when
+    // this is not a prefix, or between the question and answer areas,
+    // which can never prefix each other.
+    const prevFocus = this._currentFocus;
+    this._currentFocus = newFocus;
+
+    // Determine whether the newly focused path represents an input.
+    const inputPaths = this.getInputPaths();
+    const didFocusInput = this._currentFocus && inputPaths.some(inputPath => {
+      return Util.inputPathsEqual(inputPath, this._currentFocus);
+    });
+    if (this.props.apiOptions.onFocusChange != null) {
+      this.props.apiOptions.onFocusChange(this._currentFocus, prevFocus, didFocusInput && keypadElement && keypadElement.getDOMNode());
+    }
+    if (keypadElement) {
+      if (didFocusInput) {
+        keypadElement.activate();
+      } else {
+        keypadElement.dismiss();
+      }
+    }
+  }
+  _onRendererBlur(blurPath) {
+    const blurringFocusPath = this._currentFocus;
+
+    // Failsafe: abort if ID is different, because focus probably happened
+    // before blur.
+    if (!Util.inputPathsEqual(blurPath, blurringFocusPath)) {
+      return;
+    }
+
+    // Wait until after any new focus events fire this tick before
+    // declaring that nothing is focused, since if there were a focus change
+    // across Renderers (e.g., from the HintsRenderer to the
+    // QuestionRenderer), we could receive the blur before the focus.
+    // TODO(jeff, CP-3128): Use Wonder Blocks Timing API
+    // eslint-disable-next-line no-restricted-syntax
+    setTimeout(() => {
+      if (Util.inputPathsEqual(this._currentFocus, blurringFocusPath)) {
+        this._setCurrentFocus(null);
+      }
+    });
+  }
+
+  /**
+   * Accepts a question area widgetId, or an answer area widgetId of
+   * the form "answer-input-number 1", or the string "answer-area"
+   * for the whole answer area (if the answer area is a single widget).
+   */
+  _setWidgetProps(widgetId, newProps, callback) {
+    this.questionRenderer._setWidgetProps(widgetId, newProps, callback);
+  }
+
+  /**
+   * Sets the input value into the widget found at `path`. The `focus`
+   * function provided is called when all affected widgets have been
+   * re-rendered with the new value.
+   */
+  setInputValue(path, newValue, focus) {
+    return this.questionRenderer.setInputValue(path, newValue, focus);
+  }
+  focusPath(path) {
+    return this.questionRenderer.focusPath(path);
+  }
+  blurPath(path) {
+    return this.questionRenderer.blurPath(path);
+  }
+  getDOMNodeForPath(path) {
+    return this.questionRenderer.getDOMNodeForPath(path);
+  }
+  getGrammarTypeForPath(path) {
+    return this.questionRenderer.getGrammarTypeForPath(path);
+  }
+  getInputPaths() {
+    const questionAreaInputPaths = this.questionRenderer.getInputPaths();
+    return questionAreaInputPaths;
+  }
+
+  // NOTE: this must remain as an arrow function because we pass it Renderer
+  handleInteractWithWidget = widgetId => {
+    const withRemoved = ___default["default"].difference(this.state.questionHighlightedWidgets, [widgetId]);
+    this.setState({
+      questionCompleted: false,
+      questionHighlightedWidgets: withRemoved
+    });
+    if (this.props.apiOptions.interactionCallback) {
+      this.props.apiOptions.interactionCallback();
+    }
+  };
+  focus() {
+    return this.questionRenderer.focus();
+  }
+  blur() {
+    if (this._currentFocus) {
+      this.blurPath(this._currentFocus);
+    }
+  }
+  showHint() {
+    if (this.state.hintsVisible < this.getNumHints()) {
+      this.setState({
+        hintsVisible: this.state.hintsVisible + 1
+      });
+    }
+  }
+  getNumHints() {
+    return this.props.item.hints.length;
+  }
+
+  /**
+   * Grades the item.
+   *
+   * Returns a KE-style score of {
+   *     empty: bool,
+   *     correct: bool,
+   *     message: string|null,
+   *     guess: Array
+   * }
+   */
+  scoreInput() {
+    const guessAndScore = this.questionRenderer.guessAndScore();
+    const guess = guessAndScore[0];
+    const score = guessAndScore[1];
+
+    // Continue to include an empty guess for the now defunct answer area.
+    // TODO(alex): Check whether we rely on the format here for
+    //             analyzing ProblemLogs. If not, remove this layer.
+    const maxCompatGuess = [guess, []];
+    const keScore = Util.keScoreFromPerseusScore(score, maxCompatGuess, this.questionRenderer.getSerializedState());
+    const emptyQuestionAreaWidgets = this.questionRenderer.emptyWidgets();
+    this.setState({
+      questionCompleted: keScore.correct,
+      questionHighlightedWidgets: emptyQuestionAreaWidgets
+    });
+    return keScore;
+  }
+
+  /**
+   * Returns an array of all widget IDs in the order they occur in
+   * the question content.
+   */
+  getWidgetIds() {
+    return this.questionRenderer.getWidgetIds();
+  }
+
+  /**
+   * Returns an object mapping from widget ID to KE-style score.
+   * The keys of this object are the values of the array returned
+   * from `getWidgetIds`.
+   */
+  scoreWidgets() {
+    const qScore = this.questionRenderer.scoreWidgets();
+    const qGuess = this.questionRenderer.getUserInputForWidgets();
+    const state = this.questionRenderer.getSerializedState();
+    // @ts-expect-error - TS2322 - Type 'Partial<Record<string, KEScore>>' is not assignable to type '{ [id: string]: KEScore; }'. | TS2345 - Argument of type '{ [widgetId: string]: PerseusScore; }' is not assignable to parameter of type 'Partial<Record<string, { type: "invalid"; message?: string | null | undefined; suppressAlmostThere?: boolean | null | undefined; }>>'.
+    return mapObject$1(qScore, (score, id) => {
+      return Util.keScoreFromPerseusScore(score, qGuess[id], state[id]);
+    });
+  }
+
+  /**
+   * Get a representation of the current state of the item.
+   */
+  getSerializedState() {
+    return {
+      question: this.questionRenderer.getSerializedState(),
+      hints: this.hintsRenderer?.getSerializedState()
+    };
+  }
+
+  // TODO(kevinb): make the type for this state better
+  restoreSerializedState(state, callback) {
+    // We need to wait for both the question renderer and the hints
+    // renderer to finish restoring their states.
+    let numCallbacks = 2;
+    const fireCallback = () => {
+      --numCallbacks;
+      if (callback && numCallbacks === 0) {
+        callback();
+      }
+    };
+    this.questionRenderer.restoreSerializedState(state.question, fireCallback);
+    this.hintsRenderer?.restoreSerializedState(state.hints, fireCallback);
+  }
+  showRationalesForCurrentlySelectedChoices() {
+    this.questionRenderer.showRationalesForCurrentlySelectedChoices();
+  }
+  deselectIncorrectSelectedChoices() {
+    this.questionRenderer.deselectIncorrectSelectedChoices();
+  }
+  render() {
+    return /*#__PURE__*/React__namespace.createElement(DependenciesContext.Provider, {
+      value: this.props.dependencies
+    }, /*#__PURE__*/React__namespace.createElement("div", null));
+  }
+}
+
 /**
  * A React context for signaling when all of the components in a Perseus
  * renderer is fully rendered.  This means that all images and math have
@@ -47009,6 +47457,7 @@ exports.HintRenderer = HintRenderer;
 exports.HintsRenderer = HintsRenderer;
 exports.InputNumber = InputNumber$1;
 exports.InteractiveGraphWidget = InteractiveGraph$1;
+exports.ItemRenderer = ItemRenderer;
 exports.JiptParagraphs = JiptParagraphs;
 exports.KhanColors = KhanColors;
 exports.KhanMath = KhanMath;