@khanacademy/perseus 14.0.0 → 15.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (57) hide show
  1. package/CHANGELOG.md +25 -0
  2. package/dist/article-renderer.d.ts +1 -2
  3. package/dist/es/index.js +16 -468
  4. package/dist/es/index.js.map +1 -1
  5. package/dist/index.d.ts +0 -1
  6. package/dist/index.js +13 -463
  7. package/dist/index.js.map +1 -1
  8. package/dist/multi-items/item-types.d.ts +1 -1
  9. package/dist/multi-items/multi-renderer.d.ts +2 -2
  10. package/dist/perseus-api.d.ts +0 -3
  11. package/dist/server-item-renderer.d.ts +2 -15
  12. package/dist/strings.js +1 -0
  13. package/dist/styles/shared.d.ts +1 -0
  14. package/dist/types.d.ts +0 -2
  15. package/dist/util/a11y.d.ts +1 -0
  16. package/dist/widgets/expression.d.ts +0 -12
  17. package/dist/widgets/graded-group.d.ts +1 -1
  18. package/dist/widgets/label-image.d.ts +1 -1
  19. package/dist/widgets/matcher.d.ts +0 -1
  20. package/dist/widgets/passage.d.ts +1 -1
  21. package/dist/widgets/radio/widget.d.ts +1 -1
  22. package/dist/widgets/simulator.d.ts +0 -1
  23. package/dist/widgets/sorter.d.ts +0 -1
  24. package/package.json +8 -8
  25. package/src/__stories__/server-item-renderer.stories.tsx +1 -1
  26. package/src/__testdata__/server-item-renderer.testdata.ts +160 -0
  27. package/src/__tests__/server-item-renderer.test.tsx +2 -2
  28. package/src/article-renderer.tsx +13 -15
  29. package/src/components/svg-image.tsx +1 -1
  30. package/src/hints-renderer.tsx +1 -0
  31. package/src/index.ts +0 -1
  32. package/src/multi-items/item-types.ts +1 -1
  33. package/src/multi-items/multi-renderer.tsx +4 -4
  34. package/src/perseus-api.tsx +0 -6
  35. package/src/server-item-renderer.tsx +12 -13
  36. package/src/types.ts +0 -5
  37. package/src/util.ts +1 -1
  38. package/src/widgets/__stories__/expression.stories.tsx +0 -1
  39. package/src/widgets/__tests__/expression-mobile.test.tsx +0 -1
  40. package/src/widgets/__tests__/expression.test.tsx +4 -15
  41. package/src/widgets/expression.tsx +1 -5
  42. package/src/widgets/graded-group.tsx +1 -1
  43. package/src/widgets/label-image/strings.ts +3 -1
  44. package/src/widgets/label-image.tsx +2 -2
  45. package/src/widgets/passage-ref.tsx +1 -1
  46. package/src/widgets/passage.tsx +1 -1
  47. package/src/widgets/radio/widget.tsx +1 -1
  48. package/src/widgets/radio.ts +1 -1
  49. package/tsconfig-build.tsbuildinfo +1 -1
  50. package/dist/item-renderer.d.ts +0 -125
  51. package/dist/mixins/provide-keypad.d.ts +0 -39
  52. package/src/__stories__/item-renderer.stories.tsx +0 -30
  53. package/src/__testdata__/item-renderer.testdata.ts +0 -299
  54. package/src/__tests__/__snapshots__/item-renderer.test.tsx.snap +0 -224
  55. package/src/__tests__/item-renderer.test.tsx +0 -930
  56. package/src/item-renderer.tsx +0 -529
  57. package/src/mixins/provide-keypad.tsx +0 -137
package/dist/index.d.ts CHANGED
@@ -10,7 +10,6 @@ export { default as itemVersion } from "./item-version";
10
10
  * Renderers
11
11
  */
12
12
  export { default as ArticleRenderer } from "./article-renderer";
13
- export { default as ItemRenderer } from "./item-renderer";
14
13
  export { default as ServerItemRenderer } from "./server-item-renderer";
15
14
  export { default as HintsRenderer } from "./hints-renderer";
16
15
  export { default as HintRenderer } from "./hint-renderer";
package/dist/index.js CHANGED
@@ -891,10 +891,6 @@ const ApiOptions = {
891
891
  nativeKeypadProxy: PropTypes__default["default"].func,
892
892
  // Indicates whether or not to use mobile styling.
893
893
  isMobile: PropTypes__default["default"].bool,
894
- // Whether to use v1 (Legacy) Keypad for MathInput mobile or
895
- // use the new v2 Keypad
896
- // TODO [LC-1088]: remove after v2 release
897
- useV2Keypad: PropTypes__default["default"].bool,
898
894
  // A function, called with a bool indicating whether use of the
899
895
  // drawing area (scratchpad) should be allowed/disallowed.
900
896
  // Previously handled by `Khan.scratchpad.enable/disable`
@@ -933,7 +929,6 @@ const ApiOptions = {
933
929
  defaults: {
934
930
  isArticle: false,
935
931
  isMobile: false,
936
- useV2Keypad: false,
937
932
  onInputError: function () {},
938
933
  onFocusChange: function () {},
939
934
  GroupMetadataEditor: StubTagEditor,
@@ -1940,7 +1935,7 @@ const deriveKeypadVersion = apiOptions => {
1940
1935
  // a bit tricky, but this code will be relatively short-lived
1941
1936
  // as we coalesce onto the new, v2 Keypad, at which point we
1942
1937
  // can remove this `virtualKeypadVersion` field entirely.
1943
- return apiOptions.nativeKeypadProxy != null ? "REACT_NATIVE_KEYPAD" : apiOptions.customKeypad === true ? apiOptions.useV2Keypad === true ? "MATH_INPUT_KEYPAD_V2" : "MATH_INPUT_KEYPAD_V1" : "PERSEUS_MATH_INPUT";
1938
+ return apiOptions.nativeKeypadProxy != null ? "REACT_NATIVE_KEYPAD" : "MATH_INPUT_KEYPAD_V2";
1944
1939
  };
1945
1940
  // The new, MathQuill input expression widget
1946
1941
  class Expression extends React__namespace.Component {
@@ -10265,7 +10260,7 @@ const pluck = function (table, subKey) {
10265
10260
  * });
10266
10261
  * {a: 2, b: 3}
10267
10262
  */
10268
- const mapObject$3 = function (obj, lambda) {
10263
+ const mapObject$2 = function (obj, lambda) {
10269
10264
  const result = {};
10270
10265
  ___default["default"].each(___default["default"].keys(obj), function (key) {
10271
10266
  // @ts-expect-error - TS2345 - Argument of type 'string' is not assignable to parameter of type 'K'.
@@ -10291,7 +10286,7 @@ const mapObjectFromArray$1 = function (arr, lambda) {
10291
10286
  };
10292
10287
  var objective_ = {
10293
10288
  pluck: pluck,
10294
- mapObject: mapObject$3,
10289
+ mapObject: mapObject$2,
10295
10290
  mapObjectFromArray: mapObjectFromArray$1
10296
10291
  };
10297
10292
 
@@ -18937,7 +18932,7 @@ class WidgetContainer extends React__namespace.Component {
18937
18932
  }
18938
18933
 
18939
18934
  const {
18940
- mapObject: mapObject$2,
18935
+ mapObject: mapObject$1,
18941
18936
  mapObjectFromArray
18942
18937
  } = objective_;
18943
18938
  const rContainsNonWhitespace = /\S/;
@@ -19164,7 +19159,7 @@ class Renderer extends React__namespace.Component {
19164
19159
  // @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; }'.
19165
19160
  _getAllWidgetsInfo = props => {
19166
19161
  // @ts-expect-error - TS2345 - Argument of type '{ [key: string]: PerseusWidget; }' is not assignable to parameter of type 'Partial<Record<string, CategorizerWidget>>'.
19167
- return mapObject$2(props.widgets, (widgetInfo, widgetId) => {
19162
+ return mapObject$1(props.widgets, (widgetInfo, widgetId) => {
19168
19163
  if (!widgetInfo.type || !widgetInfo.alignment) {
19169
19164
  const newValues = {};
19170
19165
  if (!widgetInfo.type) {
@@ -19180,7 +19175,7 @@ class Renderer extends React__namespace.Component {
19180
19175
  };
19181
19176
  _getAllWidgetsStartProps = (allWidgetInfo, props) => {
19182
19177
  // @ts-expect-error - TS2345 - Argument of type '{ [key: string]: PerseusWidget; }' is not assignable to parameter of type 'Partial<Record<string, CategorizerWidget>>'.
19183
- return mapObject$2(allWidgetInfo, widgetInfo => {
19178
+ return mapObject$1(allWidgetInfo, widgetInfo => {
19184
19179
  return getRendererPropsForWidgetInfo(widgetInfo, props.problemNum);
19185
19180
  });
19186
19181
  };
@@ -19300,7 +19295,7 @@ class Renderer extends React__namespace.Component {
19300
19295
  * state from that instead of the current widget props.
19301
19296
  */
19302
19297
  getSerializedState = widgetProps => {
19303
- return mapObject$2(widgetProps || this.state.widgetProps, (props, widgetId) => {
19298
+ return mapObject$1(widgetProps || this.state.widgetProps, (props, widgetId) => {
19304
19299
  const widget = this.getWidgetInstance(widgetId);
19305
19300
  if (widget && widget.getSerializedState) {
19306
19301
  return widget.getSerializedState();
@@ -19336,7 +19331,7 @@ class Renderer extends React__namespace.Component {
19336
19331
  }
19337
19332
  };
19338
19333
  this.setState({
19339
- widgetProps: mapObject$2(serializedState, (props, widgetId) => {
19334
+ widgetProps: mapObject$1(serializedState, (props, widgetId) => {
19340
19335
  const widget = this.getWidgetInstance(widgetId);
19341
19336
  if (widget && widget.restoreSerializedState) {
19342
19337
  // Note that we probably can't call
@@ -44221,7 +44216,7 @@ const init = function (options) {
44221
44216
 
44222
44217
  // This file is processed by a Rollup plugin (replace) to inject the production
44223
44218
  const libName = "@khanacademy/perseus";
44224
- const libVersion = "14.0.0";
44219
+ const libVersion = "15.0.0";
44225
44220
  perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
44226
44221
 
44227
44222
  const apiVersion = {
@@ -44495,6 +44490,8 @@ class HintsRenderer extends React__namespace.Component {
44495
44490
  componentDidMount() {
44496
44491
  this._cacheHintImages();
44497
44492
  }
44493
+
44494
+ // eslint-disable-next-line react/no-unsafe
44498
44495
  UNSAFE_componentWillReceiveProps(nextProps) {
44499
44496
  // @ts-expect-error - TS2532 - Object is possibly 'undefined'. | TS2532 - Object is possibly 'undefined'.
44500
44497
  if (nextProps.hintsVisible - this.props.hintsVisible > 1) {
@@ -44729,454 +44726,6 @@ const styles$4 = aphrodite.StyleSheet.create({
44729
44726
  }
44730
44727
  });
44731
44728
 
44732
- /* eslint-disable @khanacademy/ts-no-error-suppressions */
44733
-
44734
- // This represents the shape of any component that uses this ProvideKeypad
44735
- // mixin.
44736
- // NOTE: This is not a real component. It's a collection of methods used to
44737
- // create and manage a Keypad instances.
44738
- // TODO(LP-10789): replace this with a React Context object to pass information
44739
- // between Perseus and the Keypad.
44740
- const ProvideKeypad = {
44741
- getInitialState() {
44742
- const _this = this;
44743
- let keypadElement = null;
44744
- if (_this.props.apiOptions && _this.props.apiOptions.customKeypad && _this.props.apiOptions.nativeKeypadProxy) {
44745
- keypadElement = _this.props.apiOptions.nativeKeypadProxy(
44746
- // @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...'.
44747
- () => _this.blur && _this.blur());
44748
- }
44749
- return {
44750
- keypadElement
44751
- };
44752
- },
44753
- componentDidMount() {
44754
- const _this = this;
44755
- const apiOptions = _this.props.apiOptions;
44756
- if (apiOptions && apiOptions.customKeypad && !apiOptions.nativeKeypadProxy) {
44757
- // TODO(charlie): Render this and the wrapped component in the same
44758
- // React tree. We may also want to add this keypad asynchronously
44759
- // or on-demand in the future.
44760
- _this._keypadContainer = document.createElement("div");
44761
- document.body?.appendChild(_this._keypadContainer);
44762
- render( /*#__PURE__*/React__namespace.createElement(mathInput.MobileKeypad, {
44763
- onElementMounted: element => {
44764
- // NOTE(kevinb): The reason why this setState works is
44765
- // b/c we're calling it manually from item-renderer.jsx
44766
- // and we're manually setting the 'this' by using 'call'
44767
- // @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...'.
44768
- _this.setState({
44769
- keypadElement: element
44770
- });
44771
- },
44772
- onDismiss: () => {
44773
- // @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...'.
44774
- _this.blur && _this.blur();
44775
- }
44776
- // @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...'.
44777
- ,
44778
- style: _this.props.keypadStyle,
44779
- onAnalyticsEvent: async () => {
44780
- // Intentionally left empty. This component is
44781
- // deprecated and so we don't want/need to instrument
44782
- // it.
44783
- }
44784
- }), _this._keypadContainer);
44785
- }
44786
- },
44787
- componentWillUnmount() {
44788
- const _this = this;
44789
- if (_this._keypadContainer) {
44790
- ReactDOM__default["default"].unmountComponentAtNode(_this._keypadContainer);
44791
- if (_this._keypadContainer.parentNode) {
44792
- // Note ChildNode.remove() isn't available in older Android
44793
- // webviews.
44794
- _this._keypadContainer.parentNode.removeChild(_this._keypadContainer);
44795
- }
44796
- _this._keypadContainer = null;
44797
- }
44798
- },
44799
- keypadElement() {
44800
- const _this = this;
44801
- return _this.state.keypadElement;
44802
- }
44803
- };
44804
-
44805
- const {
44806
- mapObject: mapObject$1
44807
- } = objective_;
44808
- /**
44809
- * @depreciated use ServerItemRenderer
44810
- */
44811
- class ItemRenderer extends React__namespace.Component {
44812
- // @ts-expect-error - TS2564 - Property 'questionRenderer' has no initializer and is not definitely assigned in the constructor.
44813
-
44814
- static defaultProps = {
44815
- apiOptions: ApiOptions.defaults,
44816
- // defaults are set in `this.update()`
44817
- controlPeripherals: true,
44818
- hintsAreaSelector: "#hintsarea",
44819
- initialHintsVisible: 0,
44820
- workAreaSelector: "#workarea",
44821
- reviewMode: false,
44822
- linterContext: PerseusLinter__namespace.linterContextDefault
44823
- };
44824
- constructor(props) {
44825
- super(props);
44826
- this.state = {
44827
- // NOTE: This value is used in provide-keypad.jsx which contains a
44828
- // "mixin" that this file calls methods on.
44829
- ...ProvideKeypad.getInitialState.call(this),
44830
- hintsVisible: props.initialHintsVisible || 0,
44831
- questionCompleted: false,
44832
- questionHighlightedWidgets: []
44833
- };
44834
- }
44835
- componentDidMount() {
44836
- ProvideKeypad.componentDidMount.call(this);
44837
- if (this.props.controlPeripherals && this.props.apiOptions.setDrawingAreaAvailable) {
44838
- this.props.apiOptions.setDrawingAreaAvailable(true);
44839
- }
44840
- this._currentFocus = null;
44841
- this.update();
44842
- }
44843
- UNSAFE_componentWillReceiveProps(nextProps) {
44844
- this.setState({
44845
- questionHighlightedWidgets: []
44846
- });
44847
- }
44848
- componentDidUpdate() {
44849
- this.update();
44850
- }
44851
- componentWillUnmount() {
44852
- ProvideKeypad.componentWillUnmount.call(this);
44853
- const workArea = document.querySelector(this.props.workAreaSelector);
44854
- if (workArea != null) {
44855
- ReactDOM__namespace.unmountComponentAtNode(workArea);
44856
- }
44857
- const hintsArea = document.querySelector(this.props.hintsAreaSelector);
44858
- if (hintsArea != null) {
44859
- ReactDOM__namespace.unmountComponentAtNode(hintsArea);
44860
- }
44861
- if (this.props.controlPeripherals) {
44862
- const answerArea = this.props.item.answerArea || {};
44863
- if (answerArea.calculator) {
44864
- $__default["default"]("#calculator").hide();
44865
- }
44866
- if (answerArea.periodicTable) {
44867
- $__default["default"](".periodic-table-info-box").hide();
44868
- }
44869
- if (answerArea.zTable) {
44870
- $__default["default"](".z-table-info-box").hide();
44871
- }
44872
- if (answerArea.tTable) {
44873
- $__default["default"](".t-table-info-box").hide();
44874
- }
44875
- if (answerArea.chi2Table) {
44876
- $__default["default"](".chi2-table-info-box").hide();
44877
- }
44878
- }
44879
- }
44880
- keypadElement() {
44881
- return ProvideKeypad.keypadElement.call(this);
44882
- }
44883
- update() {
44884
- const apiOptions = {
44885
- ...ApiOptions.defaults,
44886
- ...this.props.apiOptions,
44887
- onFocusChange: this._handleFocusChange
44888
- };
44889
- const workArea = document.querySelector(this.props.workAreaSelector);
44890
- const hintsArea = document.querySelector(this.props.hintsAreaSelector);
44891
- if (!workArea || !hintsArea) {
44892
- return;
44893
- }
44894
-
44895
- // Since the item renderer works by rendering things into three divs
44896
- // that have completely different places in the DOM, we have to do this
44897
- // strangeness instead of relying on React's normal render() method.
44898
- // TODO(alpert): Figure out how to clean this up somehow
44899
- render( /*#__PURE__*/React__namespace.createElement(DependenciesContext.Provider, {
44900
- value: this.props.dependencies
44901
- }, /*#__PURE__*/React__namespace.createElement(Renderer, _extends({
44902
- ref: node => {
44903
- if (!node) {
44904
- return;
44905
- }
44906
- this.questionRenderer = node;
44907
-
44908
- // NOTE(jeremy): Why don't we just pass this into the
44909
- // renderer as a prop?
44910
- const {
44911
- answerableCallback
44912
- } = apiOptions;
44913
- if (answerableCallback) {
44914
- const isAnswerable = this.questionRenderer.emptyWidgets().length === 0;
44915
- answerableCallback(isAnswerable);
44916
- }
44917
- },
44918
- keypadElement: this.keypadElement(),
44919
- problemNum: this.props.problemNum,
44920
- onInteractWithWidget: this.handleInteractWithWidget,
44921
- highlightedWidgets: this.state.questionHighlightedWidgets,
44922
- apiOptions: apiOptions,
44923
- questionCompleted: this.state.questionCompleted,
44924
- reviewMode: this.props.reviewMode,
44925
- savedState: this.props.savedState,
44926
- linterContext: PerseusLinter__namespace.pushContextStack(this.props.linterContext, "question")
44927
- }, this.props.item.question, {
44928
- legacyPerseusLint: this.props.legacyPerseusLint
44929
- }))),
44930
- // @ts-expect-error - TS2345 - Argument of type 'Element' is not assignable to parameter of type 'HTMLElement'.
44931
- workArea);
44932
- render( /*#__PURE__*/React__namespace.createElement(DependenciesContext.Provider, {
44933
- value: this.props.dependencies
44934
- }, /*#__PURE__*/React__namespace.createElement(HintsRenderer, {
44935
- ref: node => this.hintsRenderer = node,
44936
- hints: this.props.item.hints,
44937
- hintsVisible: this.state.hintsVisible,
44938
- apiOptions: apiOptions,
44939
- linterContext: PerseusLinter__namespace.pushContextStack(this.props.linterContext, "hints")
44940
- })),
44941
- // @ts-expect-error - TS2345 - Argument of type 'Element' is not assignable to parameter of type 'HTMLElement'.
44942
- hintsArea);
44943
- const answerArea = this.props.item.answerArea || {};
44944
- if (this.props.controlPeripherals) {
44945
- $__default["default"]("#calculator").toggle(answerArea.calculator || false);
44946
- $__default["default"](".periodic-table-info-box").toggle(answerArea.periodicTable || false);
44947
- $__default["default"](".z-table-info-box").toggle(answerArea.zTable || false);
44948
- $__default["default"](".t-table-info-box").toggle(answerArea.tTable || false);
44949
- $__default["default"](".chi2-table-info-box").toggle(answerArea.chi2Table || false);
44950
- } else {
44951
- if (answerArea.calculator) {
44952
- this.props.onShowCalculator && this.props.onShowCalculator();
44953
- }
44954
- if (answerArea.periodicTable) {
44955
- this.props.onShowPeriodicTable && this.props.onShowPeriodicTable({
44956
- showKey: answerArea.periodicTableWithKey
44957
- });
44958
- }
44959
- if (answerArea.zTable) {
44960
- this.props.onShowZTable && this.props.onShowZTable();
44961
- }
44962
- if (answerArea.tTable) {
44963
- this.props.onShowTTable && this.props.onShowTTable();
44964
- }
44965
- if (answerArea.chi2Table) {
44966
- this.props.onShowChi2Table && this.props.onShowChi2Table();
44967
- }
44968
- }
44969
- }
44970
- _handleFocusChange = (newFocus, oldFocus) => {
44971
- if (newFocus != null) {
44972
- this._setCurrentFocus(newFocus);
44973
- } else {
44974
- this._onRendererBlur(oldFocus);
44975
- }
44976
- };
44977
-
44978
- // Sets the current focus path and element and send an onChangeFocus event
44979
- // back to our parent.
44980
- _setCurrentFocus(newFocus) {
44981
- const keypadElement = this.keypadElement();
44982
- // By the time this happens, newFocus cannot be a prefix of
44983
- // prevFocused, since we must have either been called from
44984
- // an onFocusChange within a renderer, which is only called when
44985
- // this is not a prefix, or between the question and answer areas,
44986
- // which can never prefix each other.
44987
- const prevFocus = this._currentFocus;
44988
- this._currentFocus = newFocus;
44989
-
44990
- // Determine whether the newly focused path represents an input.
44991
- const inputPaths = this.getInputPaths();
44992
- const didFocusInput = this._currentFocus && inputPaths.some(inputPath => {
44993
- return Util.inputPathsEqual(inputPath, this._currentFocus);
44994
- });
44995
- if (this.props.apiOptions.onFocusChange != null) {
44996
- this.props.apiOptions.onFocusChange(this._currentFocus, prevFocus, didFocusInput && keypadElement && keypadElement.getDOMNode());
44997
- }
44998
- if (keypadElement) {
44999
- if (didFocusInput) {
45000
- keypadElement.activate();
45001
- } else {
45002
- keypadElement.dismiss();
45003
- }
45004
- }
45005
- }
45006
- _onRendererBlur(blurPath) {
45007
- const blurringFocusPath = this._currentFocus;
45008
-
45009
- // Failsafe: abort if ID is different, because focus probably happened
45010
- // before blur.
45011
- if (!Util.inputPathsEqual(blurPath, blurringFocusPath)) {
45012
- return;
45013
- }
45014
-
45015
- // Wait until after any new focus events fire this tick before
45016
- // declaring that nothing is focused, since if there were a focus change
45017
- // across Renderers (e.g., from the HintsRenderer to the
45018
- // QuestionRenderer), we could receive the blur before the focus.
45019
- // TODO(jeff, CP-3128): Use Wonder Blocks Timing API
45020
- // eslint-disable-next-line no-restricted-syntax
45021
- setTimeout(() => {
45022
- if (Util.inputPathsEqual(this._currentFocus, blurringFocusPath)) {
45023
- this._setCurrentFocus(null);
45024
- }
45025
- });
45026
- }
45027
-
45028
- /**
45029
- * Accepts a question area widgetId, or an answer area widgetId of
45030
- * the form "answer-input-number 1", or the string "answer-area"
45031
- * for the whole answer area (if the answer area is a single widget).
45032
- */
45033
- _setWidgetProps(widgetId, newProps, callback) {
45034
- this.questionRenderer._setWidgetProps(widgetId, newProps, callback);
45035
- }
45036
-
45037
- /**
45038
- * Sets the input value into the widget found at `path`. The `focus`
45039
- * function provided is called when all affected widgets have been
45040
- * re-rendered with the new value.
45041
- */
45042
- setInputValue(path, newValue, focus) {
45043
- return this.questionRenderer.setInputValue(path, newValue, focus);
45044
- }
45045
- focusPath(path) {
45046
- return this.questionRenderer.focusPath(path);
45047
- }
45048
- blurPath(path) {
45049
- return this.questionRenderer.blurPath(path);
45050
- }
45051
- getDOMNodeForPath(path) {
45052
- return this.questionRenderer.getDOMNodeForPath(path);
45053
- }
45054
- getGrammarTypeForPath(path) {
45055
- return this.questionRenderer.getGrammarTypeForPath(path);
45056
- }
45057
- getInputPaths() {
45058
- const questionAreaInputPaths = this.questionRenderer.getInputPaths();
45059
- return questionAreaInputPaths;
45060
- }
45061
-
45062
- // NOTE: this must remain as an arrow function because we pass it Renderer
45063
- handleInteractWithWidget = widgetId => {
45064
- const withRemoved = ___default["default"].difference(this.state.questionHighlightedWidgets, [widgetId]);
45065
- this.setState({
45066
- questionCompleted: false,
45067
- questionHighlightedWidgets: withRemoved
45068
- });
45069
- if (this.props.apiOptions.interactionCallback) {
45070
- this.props.apiOptions.interactionCallback();
45071
- }
45072
- };
45073
- focus() {
45074
- return this.questionRenderer.focus();
45075
- }
45076
- blur() {
45077
- if (this._currentFocus) {
45078
- this.blurPath(this._currentFocus);
45079
- }
45080
- }
45081
- showHint() {
45082
- if (this.state.hintsVisible < this.getNumHints()) {
45083
- this.setState({
45084
- hintsVisible: this.state.hintsVisible + 1
45085
- });
45086
- }
45087
- }
45088
- getNumHints() {
45089
- return this.props.item.hints.length;
45090
- }
45091
-
45092
- /**
45093
- * Grades the item.
45094
- *
45095
- * Returns a KE-style score of {
45096
- * empty: bool,
45097
- * correct: bool,
45098
- * message: string|null,
45099
- * guess: Array
45100
- * }
45101
- */
45102
- scoreInput() {
45103
- const guessAndScore = this.questionRenderer.guessAndScore();
45104
- const guess = guessAndScore[0];
45105
- const score = guessAndScore[1];
45106
-
45107
- // Continue to include an empty guess for the now defunct answer area.
45108
- // TODO(alex): Check whether we rely on the format here for
45109
- // analyzing ProblemLogs. If not, remove this layer.
45110
- const maxCompatGuess = [guess, []];
45111
- const keScore = Util.keScoreFromPerseusScore(score, maxCompatGuess, this.questionRenderer.getSerializedState());
45112
- const emptyQuestionAreaWidgets = this.questionRenderer.emptyWidgets();
45113
- this.setState({
45114
- questionCompleted: keScore.correct,
45115
- questionHighlightedWidgets: emptyQuestionAreaWidgets
45116
- });
45117
- return keScore;
45118
- }
45119
-
45120
- /**
45121
- * Returns an array of all widget IDs in the order they occur in
45122
- * the question content.
45123
- */
45124
- getWidgetIds() {
45125
- return this.questionRenderer.getWidgetIds();
45126
- }
45127
-
45128
- /**
45129
- * Returns an object mapping from widget ID to KE-style score.
45130
- * The keys of this object are the values of the array returned
45131
- * from `getWidgetIds`.
45132
- */
45133
- scoreWidgets() {
45134
- const qScore = this.questionRenderer.scoreWidgets();
45135
- const qGuess = this.questionRenderer.getUserInputForWidgets();
45136
- const state = this.questionRenderer.getSerializedState();
45137
- // @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; }>>'.
45138
- return mapObject$1(qScore, (score, id) => {
45139
- return Util.keScoreFromPerseusScore(score, qGuess[id], state[id]);
45140
- });
45141
- }
45142
-
45143
- /**
45144
- * Get a representation of the current state of the item.
45145
- */
45146
- getSerializedState() {
45147
- return {
45148
- question: this.questionRenderer.getSerializedState(),
45149
- hints: this.hintsRenderer?.getSerializedState()
45150
- };
45151
- }
45152
-
45153
- // TODO(kevinb): make the type for this state better
45154
- restoreSerializedState(state, callback) {
45155
- // We need to wait for both the question renderer and the hints
45156
- // renderer to finish restoring their states.
45157
- let numCallbacks = 2;
45158
- const fireCallback = () => {
45159
- --numCallbacks;
45160
- if (callback && numCallbacks === 0) {
45161
- callback();
45162
- }
45163
- };
45164
- this.questionRenderer.restoreSerializedState(state.question, fireCallback);
45165
- this.hintsRenderer?.restoreSerializedState(state.hints, fireCallback);
45166
- }
45167
- showRationalesForCurrentlySelectedChoices() {
45168
- this.questionRenderer.showRationalesForCurrentlySelectedChoices();
45169
- }
45170
- deselectIncorrectSelectedChoices() {
45171
- this.questionRenderer.deselectIncorrectSelectedChoices();
45172
- }
45173
- render() {
45174
- return /*#__PURE__*/React__namespace.createElement(DependenciesContext.Provider, {
45175
- value: this.props.dependencies
45176
- }, /*#__PURE__*/React__namespace.createElement("div", null));
45177
- }
45178
- }
45179
-
45180
44729
  /**
45181
44730
  * A React context for signaling when all of the components in a Perseus
45182
44731
  * renderer is fully rendered. This means that all images and math have
@@ -45215,6 +44764,8 @@ class ServerItemRenderer extends React__namespace.Component {
45215
44764
  this._currentFocus = null;
45216
44765
  this._fullyRendered = false;
45217
44766
  }
44767
+
44768
+ // eslint-disable-next-line react/no-unsafe
45218
44769
  UNSAFE_componentWillReceiveProps(nextProps) {
45219
44770
  this.setState({
45220
44771
  questionHighlightedWidgets: []
@@ -47458,7 +47009,6 @@ exports.HintRenderer = HintRenderer;
47458
47009
  exports.HintsRenderer = HintsRenderer;
47459
47010
  exports.InputNumber = InputNumber$1;
47460
47011
  exports.InteractiveGraphWidget = InteractiveGraph$1;
47461
- exports.ItemRenderer = ItemRenderer;
47462
47012
  exports.JiptParagraphs = JiptParagraphs;
47463
47013
  exports.KhanColors = KhanColors;
47464
47014
  exports.KhanMath = KhanMath;