@khanacademy/perseus 6.6.0 → 7.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 (44) hide show
  1. package/CHANGELOG.md +23 -0
  2. package/dist/es/index.css +50 -19
  3. package/dist/es/index.js +21 -37
  4. package/dist/es/index.js.map +1 -1
  5. package/dist/index.css +50 -19
  6. package/dist/index.d.ts +1 -2
  7. package/dist/index.js +20 -37
  8. package/dist/index.js.flow +0 -3
  9. package/dist/index.js.map +1 -1
  10. package/dist/item-renderer.d.ts +2 -1
  11. package/dist/item-renderer.js.flow +2 -6
  12. package/dist/perseus-api.d.ts +3 -0
  13. package/dist/perseus-api.js.flow +3 -0
  14. package/dist/server-item-renderer.d.ts +2 -1
  15. package/dist/server-item-renderer.js.flow +2 -6
  16. package/dist/types.d.ts +2 -17
  17. package/dist/types.js.flow +2 -17
  18. package/dist/util.d.ts +2 -1
  19. package/dist/util.js.flow +2 -1
  20. package/dist/widgets/matcher.d.ts +1 -0
  21. package/dist/widgets/matcher.js.flow +1 -0
  22. package/dist/widgets/simulator.d.ts +1 -0
  23. package/dist/widgets/simulator.js.flow +1 -0
  24. package/dist/widgets/sorter.d.ts +1 -0
  25. package/dist/widgets/sorter.js.flow +1 -0
  26. package/package.json +2 -2
  27. package/src/index.ts +0 -3
  28. package/src/item-renderer.tsx +2 -1
  29. package/src/mixins/provide-keypad.tsx +10 -8
  30. package/src/perseus-api.tsx +6 -0
  31. package/src/server-item-renderer.tsx +2 -1
  32. package/src/styles/articles.less +8 -6
  33. package/src/styles/widgets/interactive-graph.less +3 -2
  34. package/src/styles/widgets/label-image.less +1 -1
  35. package/src/styles/widgets/passage.less +1 -1
  36. package/src/styles/widgets/plotter.less +2 -1
  37. package/src/types.ts +5 -20
  38. package/src/util.ts +2 -1
  39. package/src/widgets/__stories__/expression.stories.tsx +1 -1
  40. package/src/widgets/__stories__/test-keypad-context-wrapper.tsx +3 -5
  41. package/tsconfig-build.tsbuildinfo +1 -1
  42. package/dist/keypad-context.d.ts +0 -20
  43. package/dist/keypad-context.js.flow +0 -18
  44. package/src/keypad-context.ts +0 -34
package/CHANGELOG.md CHANGED
@@ -1,5 +1,28 @@
1
1
  # @khanacademy/perseus
2
2
 
3
+ ## 7.0.0
4
+
5
+ ### Major Changes
6
+
7
+ - f9ee9d24: Move KeypadContext from Perseus to MathInput
8
+
9
+ ### Minor Changes
10
+
11
+ - b18986d3: Adds useV2Keypad API option for switching between new and legacy keypads
12
+
13
+ ### Patch Changes
14
+
15
+ - b18986d3: Replace Legacy/Mobile keypads with a component that switches between them
16
+ - Updated dependencies [f9ee9d24]
17
+ - Updated dependencies [b18986d3]
18
+ - @khanacademy/math-input@8.0.0
19
+
20
+ ## 6.7.0
21
+
22
+ ### Minor Changes
23
+
24
+ - a0c71567: Make KaTeX CSS styles also apply to MathJax 3
25
+
3
26
  ## 6.6.0
4
27
 
5
28
  ### Minor Changes
package/dist/es/index.css CHANGED
@@ -1576,7 +1576,8 @@ body.mobile ul.inequalities-one-line-radios > li {
1576
1576
  margin-bottom: 32px;
1577
1577
  margin-top: 0;
1578
1578
  }
1579
- .bibliotron-article.framework-perseus.perseus-article:not(.perseus-mobile) .perseus-renderer > .paragraph .paragraph .katex {
1579
+ .bibliotron-article.framework-perseus.perseus-article:not(.perseus-mobile) .perseus-renderer > .paragraph .paragraph .katex,
1580
+ .bibliotron-article.framework-perseus.perseus-article:not(.perseus-mobile) .perseus-renderer > .paragraph .paragraph mjx-container {
1580
1581
  font-size: 100%;
1581
1582
  }
1582
1583
  .bibliotron-article.framework-perseus.perseus-article:not(.perseus-mobile) .perseus-renderer > .paragraph ul:not(.perseus-widget-radio) {
@@ -1724,7 +1725,8 @@ body.mobile ul.inequalities-one-line-radios > li {
1724
1725
  line-height: 1.25;
1725
1726
  color: #21242C;
1726
1727
  }
1727
- .framework-perseus:not(.perseus-article):not(.perseus-mobile) .perseus-radio-rationale-content .perseus-renderer > .paragraph .paragraph .katex {
1728
+ .framework-perseus:not(.perseus-article):not(.perseus-mobile) .perseus-radio-rationale-content .perseus-renderer > .paragraph .paragraph .katex,
1729
+ .framework-perseus:not(.perseus-article):not(.perseus-mobile) .perseus-radio-rationale-content .perseus-renderer > .paragraph .paragraph mjx-container {
1728
1730
  color: #21242C;
1729
1731
  }
1730
1732
  .bibliotron-article.framework-perseus.perseus-article.perseus-mobile :not(blockquote) > div.paragraph,
@@ -1895,7 +1897,9 @@ body.mobile ul.inequalities-one-line-radios > li {
1895
1897
  color: #21242C;
1896
1898
  }
1897
1899
  .bibliotron-article.framework-perseus.perseus-article.perseus-mobile .perseus-radio-rationale-content .perseus-renderer > .paragraph .paragraph .katex,
1898
- .framework-perseus:not(.perseus-article).perseus-mobile .perseus-radio-rationale-content .perseus-renderer > .paragraph .paragraph .katex {
1900
+ .framework-perseus:not(.perseus-article).perseus-mobile .perseus-radio-rationale-content .perseus-renderer > .paragraph .paragraph .katex,
1901
+ .bibliotron-article.framework-perseus.perseus-article.perseus-mobile .perseus-radio-rationale-content .perseus-renderer > .paragraph .paragraph mjx-container,
1902
+ .framework-perseus:not(.perseus-article).perseus-mobile .perseus-radio-rationale-content .perseus-renderer > .paragraph .paragraph mjx-container {
1899
1903
  color: #21242C;
1900
1904
  }
1901
1905
  .bibliotron-article.framework-perseus.perseus-article.perseus-mobile .perseus-image-caption .paragraph .paragraph,
@@ -1910,18 +1914,24 @@ body.mobile ul.inequalities-one-line-radios > li {
1910
1914
  color: #3B3E40;
1911
1915
  }
1912
1916
  .bibliotron-article.framework-perseus.perseus-article.perseus-mobile .katex,
1913
- .framework-perseus:not(.perseus-article).perseus-mobile .katex {
1917
+ .framework-perseus:not(.perseus-article).perseus-mobile .katex,
1918
+ .bibliotron-article.framework-perseus.perseus-article.perseus-mobile mjx-container,
1919
+ .framework-perseus:not(.perseus-article).perseus-mobile mjx-container {
1914
1920
  font-size: 21px;
1915
1921
  line-height: 1.2;
1916
1922
  color: #21242C;
1917
1923
  }
1918
1924
  .bibliotron-article.framework-perseus.perseus-article.perseus-mobile .perseus-block-math .katex,
1919
- .framework-perseus:not(.perseus-article).perseus-mobile .perseus-block-math .katex {
1925
+ .framework-perseus:not(.perseus-article).perseus-mobile .perseus-block-math .katex,
1926
+ .bibliotron-article.framework-perseus.perseus-article.perseus-mobile .perseus-block-math mjx-container,
1927
+ .framework-perseus:not(.perseus-article).perseus-mobile .perseus-block-math mjx-container {
1920
1928
  font-size: 21px;
1921
1929
  line-height: 1.5;
1922
1930
  }
1923
1931
  .bibliotron-article.framework-perseus.perseus-article.perseus-mobile .graphie-label .katex,
1924
- .framework-perseus:not(.perseus-article).perseus-mobile .graphie-label .katex {
1932
+ .framework-perseus:not(.perseus-article).perseus-mobile .graphie-label .katex,
1933
+ .bibliotron-article.framework-perseus.perseus-article.perseus-mobile .graphie-label mjx-container,
1934
+ .framework-perseus:not(.perseus-article).perseus-mobile .graphie-label mjx-container {
1925
1935
  font-size: 1.21em;
1926
1936
  line-height: 1.2;
1927
1937
  }
@@ -2059,7 +2069,9 @@ body.mobile ul.inequalities-one-line-radios > li {
2059
2069
  color: #21242C;
2060
2070
  }
2061
2071
  .bibliotron-article.framework-perseus.perseus-article.perseus-mobile .perseus-radio-rationale-content .perseus-renderer > .paragraph .paragraph .katex,
2062
- .framework-perseus:not(.perseus-article).perseus-mobile .perseus-radio-rationale-content .perseus-renderer > .paragraph .paragraph .katex {
2072
+ .framework-perseus:not(.perseus-article).perseus-mobile .perseus-radio-rationale-content .perseus-renderer > .paragraph .paragraph .katex,
2073
+ .bibliotron-article.framework-perseus.perseus-article.perseus-mobile .perseus-radio-rationale-content .perseus-renderer > .paragraph .paragraph mjx-container,
2074
+ .framework-perseus:not(.perseus-article).perseus-mobile .perseus-radio-rationale-content .perseus-renderer > .paragraph .paragraph mjx-container {
2063
2075
  color: #21242C;
2064
2076
  }
2065
2077
  .bibliotron-article.framework-perseus.perseus-article.perseus-mobile .perseus-image-caption .paragraph .paragraph,
@@ -2074,18 +2086,24 @@ body.mobile ul.inequalities-one-line-radios > li {
2074
2086
  color: #3B3E40;
2075
2087
  }
2076
2088
  .bibliotron-article.framework-perseus.perseus-article.perseus-mobile .katex,
2077
- .framework-perseus:not(.perseus-article).perseus-mobile .katex {
2089
+ .framework-perseus:not(.perseus-article).perseus-mobile .katex,
2090
+ .bibliotron-article.framework-perseus.perseus-article.perseus-mobile mjx-container,
2091
+ .framework-perseus:not(.perseus-article).perseus-mobile mjx-container {
2078
2092
  font-size: 23px;
2079
2093
  line-height: 1.3;
2080
2094
  color: #21242C;
2081
2095
  }
2082
2096
  .bibliotron-article.framework-perseus.perseus-article.perseus-mobile .perseus-block-math .katex,
2083
- .framework-perseus:not(.perseus-article).perseus-mobile .perseus-block-math .katex {
2097
+ .framework-perseus:not(.perseus-article).perseus-mobile .perseus-block-math .katex,
2098
+ .bibliotron-article.framework-perseus.perseus-article.perseus-mobile .perseus-block-math mjx-container,
2099
+ .framework-perseus:not(.perseus-article).perseus-mobile .perseus-block-math mjx-container {
2084
2100
  font-size: 30px;
2085
2101
  line-height: 1.3;
2086
2102
  }
2087
2103
  .bibliotron-article.framework-perseus.perseus-article.perseus-mobile .graphie-label .katex,
2088
- .framework-perseus:not(.perseus-article).perseus-mobile .graphie-label .katex {
2104
+ .framework-perseus:not(.perseus-article).perseus-mobile .graphie-label .katex,
2105
+ .bibliotron-article.framework-perseus.perseus-article.perseus-mobile .graphie-label mjx-container,
2106
+ .framework-perseus:not(.perseus-article).perseus-mobile .graphie-label mjx-container {
2089
2107
  font-size: 1.21em;
2090
2108
  line-height: 1.2;
2091
2109
  }
@@ -2223,7 +2241,9 @@ body.mobile ul.inequalities-one-line-radios > li {
2223
2241
  color: #21242C;
2224
2242
  }
2225
2243
  .bibliotron-article.framework-perseus.perseus-article.perseus-mobile .perseus-radio-rationale-content .perseus-renderer > .paragraph .paragraph .katex,
2226
- .framework-perseus:not(.perseus-article).perseus-mobile .perseus-radio-rationale-content .perseus-renderer > .paragraph .paragraph .katex {
2244
+ .framework-perseus:not(.perseus-article).perseus-mobile .perseus-radio-rationale-content .perseus-renderer > .paragraph .paragraph .katex,
2245
+ .bibliotron-article.framework-perseus.perseus-article.perseus-mobile .perseus-radio-rationale-content .perseus-renderer > .paragraph .paragraph mjx-container,
2246
+ .framework-perseus:not(.perseus-article).perseus-mobile .perseus-radio-rationale-content .perseus-renderer > .paragraph .paragraph mjx-container {
2227
2247
  color: #21242C;
2228
2248
  }
2229
2249
  .bibliotron-article.framework-perseus.perseus-article.perseus-mobile .perseus-image-caption .paragraph .paragraph,
@@ -2238,18 +2258,24 @@ body.mobile ul.inequalities-one-line-radios > li {
2238
2258
  color: #3B3E40;
2239
2259
  }
2240
2260
  .bibliotron-article.framework-perseus.perseus-article.perseus-mobile .katex,
2241
- .framework-perseus:not(.perseus-article).perseus-mobile .katex {
2261
+ .framework-perseus:not(.perseus-article).perseus-mobile .katex,
2262
+ .bibliotron-article.framework-perseus.perseus-article.perseus-mobile mjx-container,
2263
+ .framework-perseus:not(.perseus-article).perseus-mobile mjx-container {
2242
2264
  font-size: 25px;
2243
2265
  line-height: 1.2;
2244
2266
  color: #21242C;
2245
2267
  }
2246
2268
  .bibliotron-article.framework-perseus.perseus-article.perseus-mobile .perseus-block-math .katex,
2247
- .framework-perseus:not(.perseus-article).perseus-mobile .perseus-block-math .katex {
2269
+ .framework-perseus:not(.perseus-article).perseus-mobile .perseus-block-math .katex,
2270
+ .bibliotron-article.framework-perseus.perseus-article.perseus-mobile .perseus-block-math mjx-container,
2271
+ .framework-perseus:not(.perseus-article).perseus-mobile .perseus-block-math mjx-container {
2248
2272
  font-size: 30px;
2249
2273
  line-height: 1.3;
2250
2274
  }
2251
2275
  .bibliotron-article.framework-perseus.perseus-article.perseus-mobile .graphie-label .katex,
2252
- .framework-perseus:not(.perseus-article).perseus-mobile .graphie-label .katex {
2276
+ .framework-perseus:not(.perseus-article).perseus-mobile .graphie-label .katex,
2277
+ .bibliotron-article.framework-perseus.perseus-article.perseus-mobile .graphie-label mjx-container,
2278
+ .framework-perseus:not(.perseus-article).perseus-mobile .graphie-label mjx-container {
2253
2279
  font-size: 1.21em;
2254
2280
  line-height: 1.2;
2255
2281
  }
@@ -2951,10 +2977,12 @@ body.mobile .categorizer-container td.category input[type="radio"] + span:active
2951
2977
  min-width: 30px;
2952
2978
  text-align: center;
2953
2979
  }
2954
- .perseus-mobile .tooltip.visible .tooltip-content .katex {
2980
+ .perseus-mobile .tooltip.visible .tooltip-content .katex,
2981
+ .perseus-mobile .tooltip.visible .tooltip-content mjx-container {
2955
2982
  color: #71b307 !important;
2956
2983
  }
2957
- .perseus-mobile .graphie-label .katex {
2984
+ .perseus-mobile .graphie-label .katex,
2985
+ .perseus-mobile .graphie-label mjx-container {
2958
2986
  color: inherit !important;
2959
2987
  }
2960
2988
  .framework-perseus .perseus-label-image-widget-instructions div.paragraph {
@@ -2971,7 +2999,8 @@ body.mobile .categorizer-container td.category input[type="radio"] + span:active
2971
2999
  .framework-perseus:not(.perseus-article).perseus-mobile .perseus-label-image-widget-instructions .perseus-block-math {
2972
3000
  padding: 0;
2973
3001
  }
2974
- .framework-perseus:not(.perseus-article).perseus-mobile .perseus-label-image-widget-instructions .perseus-block-math .katex {
3002
+ .framework-perseus:not(.perseus-article).perseus-mobile .perseus-label-image-widget-instructions .perseus-block-math .katex,
3003
+ .framework-perseus:not(.perseus-article).perseus-mobile .perseus-label-image-widget-instructions .perseus-block-math mjx-container {
2975
3004
  font-size: initial !important;
2976
3005
  line-height: initial !important;
2977
3006
  }
@@ -3209,7 +3238,8 @@ body.mobile .perseus-matrix .math-output {
3209
3238
  [id^="perseus-widget-passage-container"] [id^="perseus-widget-passage"] .passage-text div.paragraph em {
3210
3239
  line-height: 0;
3211
3240
  }
3212
- [id^="perseus-widget-passage-container"] .katex {
3241
+ [id^="perseus-widget-passage-container"] .katex,
3242
+ [id^="perseus-widget-passage-container"] mjx-container {
3213
3243
  line-height: 18px;
3214
3244
  }
3215
3245
  [id^="perseus-widget-passage-container"] .footnotes {
@@ -3284,7 +3314,8 @@ body.sat-section .perseus-widget-passage {
3284
3314
  border: solid 0.5px #BABEC2;
3285
3315
  border-radius: 4px;
3286
3316
  }
3287
- .perseus-mobile .perseus-widget-plotter .graphie-label .katex {
3317
+ .perseus-mobile .perseus-widget-plotter .graphie-label .katex,
3318
+ .perseus-mobile .perseus-widget-plotter .graphie-label mjx-container {
3288
3319
  color: #626569;
3289
3320
  }
3290
3321
  .perseus-widget-radio.perseus-rendered-radio div,
package/dist/es/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as KAS from '@khanacademy/kas';
2
- import { keyTranslator, createMathField, mathQuillInstance, KeypadInput, KeypadType, keypadElementPropType, LegacyKeypad } from '@khanacademy/math-input';
2
+ import { keyTranslator, createMathField, mathQuillInstance, KeypadInput, KeypadType, keypadElementPropType, Keypad } from '@khanacademy/math-input';
3
3
  import * as PerseusLinter from '@khanacademy/perseus-linter';
4
4
  import { linterContextDefault, Rule, linterContextProps } from '@khanacademy/perseus-linter';
5
5
  import * as i18n from '@khanacademy/wonder-blocks-i18n';
@@ -1433,6 +1433,10 @@ const ApiOptions = {
1433
1433
  nativeKeypadProxy: PropTypes.func,
1434
1434
  // Indicates whether or not to use mobile styling.
1435
1435
  isMobile: PropTypes.bool,
1436
+ // Whether to use v1 (Legacy) Keypad for MathInput mobile or
1437
+ // use the new v2 Keypad
1438
+ // TODO [LC-1088]: remove after v2 release
1439
+ useV2Keypad: PropTypes.bool,
1436
1440
  // A function, called with a bool indicating whether use of the
1437
1441
  // drawing area (scratchpad) should be allowed/disallowed.
1438
1442
  // Previously handled by `Khan.scratchpad.enable/disable`
@@ -1471,6 +1475,7 @@ const ApiOptions = {
1471
1475
  defaults: {
1472
1476
  isArticle: false,
1473
1477
  isMobile: false,
1478
+ useV2Keypad: false,
1474
1479
  onInputError: function () {},
1475
1480
  onFocusChange: function () {},
1476
1481
  GroupMetadataEditor: StubTagEditor,
@@ -2938,7 +2943,7 @@ const defaultContext$2 = {
2938
2943
  assetStatuses: {},
2939
2944
  setAssetStatus: (assetKey, loaded) => {}
2940
2945
  };
2941
- const context$2 = /*#__PURE__*/React.createContext(defaultContext$2);
2946
+ const context$1 = /*#__PURE__*/React.createContext(defaultContext$2);
2942
2947
 
2943
2948
  /* eslint-disable @babel/no-invalid-this, getter-return, one-var */
2944
2949
  let supportsPassive = false;
@@ -17597,7 +17602,7 @@ class ZoomableTeX extends React.Component {
17597
17602
  return /*#__PURE__*/React.createElement(Zoomable, {
17598
17603
  readyToMeasure: this.state.isRendered,
17599
17604
  computeChildBounds: computeMathBounds
17600
- }, /*#__PURE__*/React.createElement(context$2.Consumer, null, ({
17605
+ }, /*#__PURE__*/React.createElement(context$1.Consumer, null, ({
17601
17606
  setAssetStatus
17602
17607
  }) => /*#__PURE__*/React.createElement(Tex, {
17603
17608
  onRender: this.handleRender,
@@ -19687,7 +19692,7 @@ class Renderer extends React.Component {
19687
19692
  }, /*#__PURE__*/React.createElement(ErrorBoundary, null, /*#__PURE__*/React.createElement("div", {
19688
19693
  className: "perseus-block-math-inner",
19689
19694
  style: innerStyle
19690
- }, /*#__PURE__*/React.createElement(context$2.Consumer, null, ({
19695
+ }, /*#__PURE__*/React.createElement(context$1.Consumer, null, ({
19691
19696
  setAssetStatus
19692
19697
  }) => /*#__PURE__*/React.createElement(Tex, {
19693
19698
  setAssetStatus: setAssetStatus
@@ -19709,7 +19714,7 @@ class Renderer extends React.Component {
19709
19714
  // wrap to the next line
19710
19715
  whiteSpace: "nowrap"
19711
19716
  }
19712
- }, /*#__PURE__*/React.createElement(ErrorBoundary, null, /*#__PURE__*/React.createElement("span", null), /*#__PURE__*/React.createElement(context$2.Consumer, null, ({
19717
+ }, /*#__PURE__*/React.createElement(ErrorBoundary, null, /*#__PURE__*/React.createElement("span", null), /*#__PURE__*/React.createElement(context$1.Consumer, null, ({
19713
19718
  setAssetStatus
19714
19719
  }) => /*#__PURE__*/React.createElement(Tex, {
19715
19720
  onRender: this.props.onRender,
@@ -19737,7 +19742,7 @@ class Renderer extends React.Component {
19737
19742
  const responsive = !state.inTable;
19738
19743
  return /*#__PURE__*/React.createElement(ErrorBoundary, {
19739
19744
  key: state.key
19740
- }, /*#__PURE__*/React.createElement(context$2.Consumer, null, ({
19745
+ }, /*#__PURE__*/React.createElement(context$1.Consumer, null, ({
19741
19746
  setAssetStatus
19742
19747
  }) => /*#__PURE__*/React.createElement(SvgImage, _extends({
19743
19748
  setAssetStatus: setAssetStatus
@@ -31728,7 +31733,7 @@ class LabelImage extends React.Component {
31728
31733
  // than its rendered in the widget, this would
31729
31734
  // result in a zoom of the image.
31730
31735
  selectedMarkerIndex !== -1 && styles$f.imageInteractionDisabled)
31731
- }, /*#__PURE__*/React.createElement(context$2.Consumer, null, ({
31736
+ }, /*#__PURE__*/React.createElement(context$1.Consumer, null, ({
31732
31737
  setAssetStatus
31733
31738
  }) => /*#__PURE__*/React.createElement(SvgImage, {
31734
31739
  alt: imageAlt,
@@ -43944,13 +43949,9 @@ const ProvideKeypad = {
43944
43949
  },
43945
43950
  componentDidMount() {
43946
43951
  const _this = this;
43947
- if (
43948
- // @ts-expect-error [FEI-5003] - 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...'.
43949
- _this.props.apiOptions &&
43950
- // @ts-expect-error [FEI-5003] - 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...'.
43951
- _this.props.apiOptions.customKeypad &&
43952
43952
  // @ts-expect-error [FEI-5003] - 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...'.
43953
- !_this.props.apiOptions.nativeKeypadProxy) {
43953
+ const apiOptions = _this.props.apiOptions;
43954
+ if (apiOptions && apiOptions.customKeypad && !apiOptions.nativeKeypadProxy) {
43954
43955
  var _document$body;
43955
43956
  // TODO(charlie): Render this and the wrapped component in the same
43956
43957
  // React tree. We may also want to add this keypad asynchronously
@@ -43959,7 +43960,7 @@ const ProvideKeypad = {
43959
43960
  _this._keypadContainer = document.createElement("div");
43960
43961
  // @ts-expect-error [FEI-5003] - TS2339 - Property '_keypadContainer' 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...'.
43961
43962
  (_document$body = document.body) == null ? void 0 : _document$body.appendChild(_this._keypadContainer);
43962
- render( /*#__PURE__*/React.createElement(LegacyKeypad, {
43963
+ render( /*#__PURE__*/React.createElement(Keypad, {
43963
43964
  onElementMounted: element => {
43964
43965
  // NOTE(kevinb): The reason why this setState works is
43965
43966
  // b/c we're calling it manually from item-renderer.jsx
@@ -43975,7 +43976,8 @@ const ProvideKeypad = {
43975
43976
  }
43976
43977
  // @ts-expect-error [FEI-5003] - 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...'.
43977
43978
  ,
43978
- style: _this.props.keypadStyle
43979
+ style: _this.props.keypadStyle,
43980
+ useV2Keypad: apiOptions.useV2Keypad
43979
43981
  }),
43980
43982
  // @ts-expect-error [FEI-5003] - TS2339 - Property '_keypadContainer' 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...'.
43981
43983
  _this._keypadContainer);
@@ -44889,7 +44891,7 @@ ItemRenderer.defaultProps = {
44889
44891
  const defaultContext = {
44890
44892
  onRendered: isRendered => {}
44891
44893
  };
44892
- const context$1 = /*#__PURE__*/React.createContext(defaultContext);
44894
+ const context = /*#__PURE__*/React.createContext(defaultContext);
44893
44895
 
44894
44896
  const {
44895
44897
  mapObject
@@ -45157,7 +45159,7 @@ class ServerItemRenderer extends React.Component {
45157
45159
  assetStatuses: this.state.assetStatuses,
45158
45160
  setAssetStatus: this.setAssetStatus
45159
45161
  };
45160
- const questionRenderer = /*#__PURE__*/React.createElement(context$2.Provider, {
45162
+ const questionRenderer = /*#__PURE__*/React.createElement(context$1.Provider, {
45161
45163
  value: contextValue
45162
45164
  }, /*#__PURE__*/React.createElement(Renderer, {
45163
45165
  keypadElement: this.props.keypadElement,
@@ -45204,7 +45206,7 @@ const styles$3 = StyleSheet.create({
45204
45206
  marginLeft: 50
45205
45207
  }
45206
45208
  });
45207
- const ref = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(context$1.Consumer, null, ({
45209
+ const ref = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(context.Consumer, null, ({
45208
45210
  onRendered
45209
45211
  }) => /*#__PURE__*/React.createElement(ServerItemRenderer, _extends({}, props, {
45210
45212
  onRendered: onRendered,
@@ -45695,24 +45697,6 @@ var constants = /*#__PURE__*/Object.freeze({
45695
45697
  perseusFrameBorderWidth: perseusFrameBorderWidth
45696
45698
  });
45697
45699
 
45698
- /**
45699
- * KeypadContext provides a way to the Keypad and (Server)ItemRenderer to
45700
- * communicate.
45701
- *
45702
- * The KeypadContext.Provider wraps the ExerciseFooter while KeypadContext.Consumer
45703
- * wraps each (Server)ItemRenderer render site and the Keypad rendered in the
45704
- * ExerciseFooter.
45705
- */
45706
- // @ts-expect-error [FEI-5003] - TS2322 - Type 'Context<{ setKeypadElement: (keypadElement: HTMLElement | null | undefined) => void; keypadElement: null; setRenderer: (renderer: RendererInterface | null | undefined) => void; renderer: null; setScrollableElement: (scrollableElement: HTMLElement | ... 1 more ... | undefined) => void; scrollableElement: null; }>' is not assignable to type 'Context<KeypadContext>'.
45707
- const context = /*#__PURE__*/React.createContext({
45708
- setKeypadElement: keypadElement => {},
45709
- keypadElement: null,
45710
- setRenderer: renderer => {},
45711
- renderer: null,
45712
- setScrollableElement: scrollableElement => {},
45713
- scrollableElement: null
45714
- });
45715
-
45716
45700
  // TODO(FEI-4010): Remove `Perseus` prefix for all types here
45717
45701
  // TODO(FEI-4011): Use types generated by https://github.com/jaredly/generate-perseus-flowtypes
45718
45702
 
@@ -46881,5 +46865,5 @@ const EditorJsonify = {
46881
46865
  const apiVersion = version.apiVersion;
46882
46866
  const itemDataVersion = version.itemDataVersion;
46883
46867
 
46884
- export { ApiOptions, ArrowPicker, ArticleRenderer, BaseRadio, Categorizer$1 as Categorizer, changeable as Changeable, ClassNames, ColorPicker, DashPicker, dependencies as Dependencies, EditorJsonify, ElementContainer, Errors, Expression, util as GrapherUtil, Grapher$1 as GrapherWidget, HintRenderer, HintsRenderer, InputNumber$1 as InputNumber, InteractiveGraph$1 as InteractiveGraphWidget, ItemRenderer, JiptParagraphs, context as KeypadContext, KhanColors, KhanMath, context$1 as LoadingContext, Log, Matrix$1 as MatrixWidget, MultiItems, NumericInput$1 as NumericInput, PerseusError, PerseusExpressionAnswerFormConsidered, PerseusMarkdown, Plotter$1 as PlotterWidget, Radio, Renderer, ref as ServerItemRenderer, sizingUtils as SizingUtils, Table$1 as TableWidget, Transformer$1 as TransformerWidget, Util, denylist as WIDGET_PROP_DENYLIST, WidgetJsonifyDeprecated, widgets$1 as Widgets, apiVersion, buildEmptyItemTreeForShape, buildMapper, components, constants, displaySigFigs, globalConstants, globalStyles, iconPaths as icons, init, interactiveSizes$1 as interactiveSizes, isItemRenderableByVersion, itemDataVersion, itemToTree, ItemVersion as itemVersion, mediaQueries, preprocessTex, registerAllWidgetsForTesting, shapes, traverse, violatingWidgets, allWidgets as widgets };
46868
+ export { ApiOptions, ArrowPicker, ArticleRenderer, BaseRadio, Categorizer$1 as Categorizer, changeable as Changeable, ClassNames, ColorPicker, DashPicker, dependencies as Dependencies, EditorJsonify, ElementContainer, Errors, Expression, util as GrapherUtil, Grapher$1 as GrapherWidget, HintRenderer, HintsRenderer, InputNumber$1 as InputNumber, InteractiveGraph$1 as InteractiveGraphWidget, ItemRenderer, JiptParagraphs, KhanColors, KhanMath, context as LoadingContext, Log, Matrix$1 as MatrixWidget, MultiItems, NumericInput$1 as NumericInput, PerseusError, PerseusExpressionAnswerFormConsidered, PerseusMarkdown, Plotter$1 as PlotterWidget, Radio, Renderer, ref as ServerItemRenderer, sizingUtils as SizingUtils, Table$1 as TableWidget, Transformer$1 as TransformerWidget, Util, denylist as WIDGET_PROP_DENYLIST, WidgetJsonifyDeprecated, widgets$1 as Widgets, apiVersion, buildEmptyItemTreeForShape, buildMapper, components, constants, displaySigFigs, globalConstants, globalStyles, iconPaths as icons, init, interactiveSizes$1 as interactiveSizes, isItemRenderableByVersion, itemDataVersion, itemToTree, ItemVersion as itemVersion, mediaQueries, preprocessTex, registerAllWidgetsForTesting, shapes, traverse, violatingWidgets, allWidgets as widgets };
46885
46869
  //# sourceMappingURL=index.js.map