@khanacademy/perseus 6.7.0 → 7.0.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @khanacademy/perseus
 
+## 7.0.0
+
+### Major Changes
+
+-   f9ee9d24: Move KeypadContext from Perseus to MathInput
+
+### Minor Changes
+
+-   b18986d3: Adds useV2Keypad API option for switching between new and legacy keypads
+
+### Patch Changes
+
+-   b18986d3: Replace Legacy/Mobile keypads with a component that switches between them
+-   Updated dependencies [f9ee9d24]
+-   Updated dependencies [b18986d3]
+    -   @khanacademy/math-input@8.0.0
+
 ## 6.7.0
 
 ### Minor Changes

package/dist/es/index.js

@@ -1,5 +1,5 @@
 import * as KAS from '@khanacademy/kas';
-import { keyTranslator, createMathField, mathQuillInstance, KeypadInput, KeypadType, keypadElementPropType, LegacyKeypad } from '@khanacademy/math-input';
+import { keyTranslator, createMathField, mathQuillInstance, KeypadInput, KeypadType, keypadElementPropType, Keypad } from '@khanacademy/math-input';
 import * as PerseusLinter from '@khanacademy/perseus-linter';
 import { linterContextDefault, Rule, linterContextProps } from '@khanacademy/perseus-linter';
 import * as i18n from '@khanacademy/wonder-blocks-i18n';
@@ -1433,6 +1433,10 @@ const ApiOptions = {
     nativeKeypadProxy: PropTypes.func,
     // Indicates whether or not to use mobile styling.
     isMobile: PropTypes.bool,
+    // Whether to use v1 (Legacy) Keypad for MathInput mobile or
+    // use the new v2 Keypad
+    // TODO [LC-1088]: remove after v2 release
+    useV2Keypad: PropTypes.bool,
     // A function, called with a bool indicating whether use of the
     // drawing area (scratchpad) should be allowed/disallowed.
     // Previously handled by `Khan.scratchpad.enable/disable`
@@ -1471,6 +1475,7 @@ const ApiOptions = {
   defaults: {
     isArticle: false,
     isMobile: false,
+    useV2Keypad: false,
     onInputError: function () {},
     onFocusChange: function () {},
     GroupMetadataEditor: StubTagEditor,
@@ -2938,7 +2943,7 @@ const defaultContext$2 = {
   assetStatuses: {},
   setAssetStatus: (assetKey, loaded) => {}
 };
-const context$2 = /*#__PURE__*/React.createContext(defaultContext$2);
+const context$1 = /*#__PURE__*/React.createContext(defaultContext$2);
 
 /* eslint-disable @babel/no-invalid-this, getter-return, one-var */
 let supportsPassive = false;
@@ -17597,7 +17602,7 @@ class ZoomableTeX extends React.Component {
     return /*#__PURE__*/React.createElement(Zoomable, {
       readyToMeasure: this.state.isRendered,
       computeChildBounds: computeMathBounds
-    }, /*#__PURE__*/React.createElement(context$2.Consumer, null, ({
+    }, /*#__PURE__*/React.createElement(context$1.Consumer, null, ({
       setAssetStatus
     }) => /*#__PURE__*/React.createElement(Tex, {
       onRender: this.handleRender,
@@ -19687,7 +19692,7 @@ class Renderer extends React.Component {
         }, /*#__PURE__*/React.createElement(ErrorBoundary, null, /*#__PURE__*/React.createElement("div", {
           className: "perseus-block-math-inner",
           style: innerStyle
-        }, /*#__PURE__*/React.createElement(context$2.Consumer, null, ({
+        }, /*#__PURE__*/React.createElement(context$1.Consumer, null, ({
           setAssetStatus
         }) => /*#__PURE__*/React.createElement(Tex, {
           setAssetStatus: setAssetStatus
@@ -19709,7 +19714,7 @@ class Renderer extends React.Component {
             // wrap to the next line
             whiteSpace: "nowrap"
           }
-        }, /*#__PURE__*/React.createElement(ErrorBoundary, null, /*#__PURE__*/React.createElement("span", null), /*#__PURE__*/React.createElement(context$2.Consumer, null, ({
+        }, /*#__PURE__*/React.createElement(ErrorBoundary, null, /*#__PURE__*/React.createElement("span", null), /*#__PURE__*/React.createElement(context$1.Consumer, null, ({
           setAssetStatus
         }) => /*#__PURE__*/React.createElement(Tex, {
           onRender: this.props.onRender,
@@ -19737,7 +19742,7 @@ class Renderer extends React.Component {
         const responsive = !state.inTable;
         return /*#__PURE__*/React.createElement(ErrorBoundary, {
           key: state.key
-        }, /*#__PURE__*/React.createElement(context$2.Consumer, null, ({
+        }, /*#__PURE__*/React.createElement(context$1.Consumer, null, ({
           setAssetStatus
         }) => /*#__PURE__*/React.createElement(SvgImage, _extends({
           setAssetStatus: setAssetStatus
@@ -31728,7 +31733,7 @@ class LabelImage extends React.Component {
       // than its rendered in the widget, this would
       // result in a zoom of the image.
       selectedMarkerIndex !== -1 && styles$f.imageInteractionDisabled)
-    }, /*#__PURE__*/React.createElement(context$2.Consumer, null, ({
+    }, /*#__PURE__*/React.createElement(context$1.Consumer, null, ({
       setAssetStatus
     }) => /*#__PURE__*/React.createElement(SvgImage, {
       alt: imageAlt,
@@ -43944,13 +43949,9 @@ const ProvideKeypad = {
   },
   componentDidMount() {
     const _this = this;
-    if (
-    // @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...'.
-    _this.props.apiOptions &&
-    // @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...'.
-    _this.props.apiOptions.customKeypad &&
     // @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...'.
-    !_this.props.apiOptions.nativeKeypadProxy) {
+    const apiOptions = _this.props.apiOptions;
+    if (apiOptions && apiOptions.customKeypad && !apiOptions.nativeKeypadProxy) {
       var _document$body;
       // TODO(charlie): Render this and the wrapped component in the same
       // React tree. We may also want to add this keypad asynchronously
@@ -43959,7 +43960,7 @@ const ProvideKeypad = {
       _this._keypadContainer = document.createElement("div");
       // @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...'.
       (_document$body = document.body) == null ? void 0 : _document$body.appendChild(_this._keypadContainer);
-      render( /*#__PURE__*/React.createElement(LegacyKeypad, {
+      render( /*#__PURE__*/React.createElement(Keypad, {
         onElementMounted: element => {
           // NOTE(kevinb): The reason why this setState works is
           // b/c we're calling it manually from item-renderer.jsx
@@ -43975,7 +43976,8 @@ const ProvideKeypad = {
         }
         // @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...'.
         ,
-        style: _this.props.keypadStyle
+        style: _this.props.keypadStyle,
+        useV2Keypad: apiOptions.useV2Keypad
       }),
       // @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...'.
       _this._keypadContainer);
@@ -44889,7 +44891,7 @@ ItemRenderer.defaultProps = {
 const defaultContext = {
   onRendered: isRendered => {}
 };
-const context$1 = /*#__PURE__*/React.createContext(defaultContext);
+const context = /*#__PURE__*/React.createContext(defaultContext);
 
 const {
   mapObject
@@ -45157,7 +45159,7 @@ class ServerItemRenderer extends React.Component {
       assetStatuses: this.state.assetStatuses,
       setAssetStatus: this.setAssetStatus
     };
-    const questionRenderer = /*#__PURE__*/React.createElement(context$2.Provider, {
+    const questionRenderer = /*#__PURE__*/React.createElement(context$1.Provider, {
       value: contextValue
     }, /*#__PURE__*/React.createElement(Renderer, {
       keypadElement: this.props.keypadElement,
@@ -45204,7 +45206,7 @@ const styles$3 = StyleSheet.create({
     marginLeft: 50
   }
 });
-const ref = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(context$1.Consumer, null, ({
+const ref = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(context.Consumer, null, ({
   onRendered
 }) => /*#__PURE__*/React.createElement(ServerItemRenderer, _extends({}, props, {
   onRendered: onRendered,
@@ -45695,24 +45697,6 @@ var constants = /*#__PURE__*/Object.freeze({
     perseusFrameBorderWidth: perseusFrameBorderWidth
 });
 
-/**
- * KeypadContext provides a way to the Keypad and (Server)ItemRenderer to
- * communicate.
- *
- * The KeypadContext.Provider wraps the ExerciseFooter while KeypadContext.Consumer
- * wraps each (Server)ItemRenderer render site and the Keypad rendered in the
- * ExerciseFooter.
- */
-// @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>'.
-const context = /*#__PURE__*/React.createContext({
-  setKeypadElement: keypadElement => {},
-  keypadElement: null,
-  setRenderer: renderer => {},
-  renderer: null,
-  setScrollableElement: scrollableElement => {},
-  scrollableElement: null
-});
-
 // TODO(FEI-4010): Remove `Perseus` prefix for all types here
 // TODO(FEI-4011): Use types generated by https://github.com/jaredly/generate-perseus-flowtypes
 
@@ -46881,5 +46865,5 @@ const EditorJsonify = {
 const apiVersion = version.apiVersion;
 const itemDataVersion = version.itemDataVersion;
 
-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 };
+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 };
 //# sourceMappingURL=index.js.map