@khanacademy/perseus 6.7.0 → 7.0.1

package/dist/index.d.ts

@@ -55,7 +55,6 @@ export * as Dependencies from "./dependencies";
 export { Errors, Log } from "./logging/log";
 export { PerseusError } from "./perseus-error";
 export { default as JiptParagraphs } from "./jipt-paragraphs";
-export { default as KeypadContext } from "./keypad-context";
 export { default as KhanMath } from "./util/math";
 export { default as LoadingContext } from "./loading-context";
 export { default as mediaQueries } from "./styles/media-queries";
@@ -87,7 +86,7 @@ export { default as WIDGET_PROP_DENYLIST } from "./mixins/widget-prop-denylist";
 export type { PerseusOptions } from "./init";
 export type { ILogger, LogErrorOptions, ErrorKind } from "./logging/log";
 export type { ServerItemRenderer as ServerItemRendererComponent } from "./server-item-renderer";
-export type { Alignment, APIOptions, APIOptionsWithDefaults, ChangeHandler, DeviceType, DomInsertCheckFn, EditorMode, FocusPath, Hint, ImageDict, ImageUploader, JiptLabelStore, JiptRenderer, KEScore, LinterContextProps, PerseusDependencies, PerseusScore, RendererInterface, Version, VideoData, VideoKind, WidgetDict, WidgetExports, WidgetInfo, } from "./types";
+export type { Alignment, APIOptions, APIOptionsWithDefaults, ChangeHandler, DeviceType, DomInsertCheckFn, EditorMode, FocusPath, Hint, ImageDict, ImageUploader, JiptLabelStore, JiptRenderer, LinterContextProps, PerseusDependencies, PerseusScore, Version, VideoData, VideoKind, WidgetDict, WidgetExports, WidgetInfo, } from "./types";
 export type { ParsedValue } from "./util";
 export type { MathFormat, InputNumberWidget, PerseusImageBackground, PerseusInteractiveGraphWidgetOptions, PerseusRadioWidgetOptions, PerseusExpressionWidgetOptions, PerseusRenderer, } from "./perseus-types";
 export type { Coord } from "./interactive2/types";

package/dist/index.js

@@ -1492,6 +1492,10 @@ const ApiOptions = {
     nativeKeypadProxy: PropTypes__default["default"].func,
     // Indicates whether or not to use mobile styling.
     isMobile: PropTypes__default["default"].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__default["default"].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`
@@ -1530,6 +1534,7 @@ const ApiOptions = {
   defaults: {
     isArticle: false,
     isMobile: false,
+    useV2Keypad: false,
     onInputError: function () {},
     onFocusChange: function () {},
     GroupMetadataEditor: StubTagEditor,
@@ -3002,7 +3007,7 @@ const defaultContext$2 = {
   assetStatuses: {},
   setAssetStatus: (assetKey, loaded) => {}
 };
-const context$2 = /*#__PURE__*/React__namespace.createContext(defaultContext$2);
+const context$1 = /*#__PURE__*/React__namespace.createContext(defaultContext$2);
 
 /* eslint-disable @babel/no-invalid-this, getter-return, one-var */
 let supportsPassive = false;
@@ -3678,6 +3683,21 @@ const supportsPassiveEvents = () => {
 function captureScratchpadTouchStart$4(e) {
   e.stopPropagation();
 }
+async function getImageSizeModern(url) {
+  const image = new Image();
+  return new Promise((resolve, reject) => {
+    // Handle the success case
+    image.onload = () => {
+      resolve([image.naturalWidth, image.naturalHeight]);
+    };
+
+    // Handle the error case
+    image.onerror = reject;
+
+    // Kick off the loading
+    image.src = url;
+  });
+}
 function getImageSize(url, callback) {
   const img = new Image();
   img.onload = function () {
@@ -3812,6 +3832,7 @@ const Util = {
   supportsPassiveEvents,
   captureScratchpadTouchStart: captureScratchpadTouchStart$4,
   getImageSize,
+  getImageSizeModern,
   getRealImageUrl,
   isLabeledSVG,
   getBaseUrl,
@@ -17659,7 +17680,7 @@ class ZoomableTeX extends React__namespace.Component {
     return /*#__PURE__*/React__namespace.createElement(Zoomable, {
       readyToMeasure: this.state.isRendered,
       computeChildBounds: computeMathBounds
-    }, /*#__PURE__*/React__namespace.createElement(context$2.Consumer, null, _ref => {
+    }, /*#__PURE__*/React__namespace.createElement(context$1.Consumer, null, _ref => {
       let {
         setAssetStatus
       } = _ref;
@@ -19787,7 +19808,7 @@ class Renderer extends React__namespace.Component {
         }, /*#__PURE__*/React__namespace.createElement(ErrorBoundary, null, /*#__PURE__*/React__namespace.createElement("div", {
           className: "perseus-block-math-inner",
           style: innerStyle
-        }, /*#__PURE__*/React__namespace.createElement(context$2.Consumer, null, _ref => {
+        }, /*#__PURE__*/React__namespace.createElement(context$1.Consumer, null, _ref => {
           let {
             setAssetStatus
           } = _ref;
@@ -19812,7 +19833,7 @@ class Renderer extends React__namespace.Component {
             // wrap to the next line
             whiteSpace: "nowrap"
           }
-        }, /*#__PURE__*/React__namespace.createElement(ErrorBoundary, null, /*#__PURE__*/React__namespace.createElement("span", null), /*#__PURE__*/React__namespace.createElement(context$2.Consumer, null, _ref2 => {
+        }, /*#__PURE__*/React__namespace.createElement(ErrorBoundary, null, /*#__PURE__*/React__namespace.createElement("span", null), /*#__PURE__*/React__namespace.createElement(context$1.Consumer, null, _ref2 => {
           let {
             setAssetStatus
           } = _ref2;
@@ -19843,7 +19864,7 @@ class Renderer extends React__namespace.Component {
         const responsive = !state.inTable;
         return /*#__PURE__*/React__namespace.createElement(ErrorBoundary, {
           key: state.key
-        }, /*#__PURE__*/React__namespace.createElement(context$2.Consumer, null, _ref3 => {
+        }, /*#__PURE__*/React__namespace.createElement(context$1.Consumer, null, _ref3 => {
           let {
             setAssetStatus
           } = _ref3;
@@ -31908,7 +31929,7 @@ class LabelImage extends React__namespace.Component {
       // than its rendered in the widget, this would
       // result in a zoom of the image.
       selectedMarkerIndex !== -1 && styles$f.imageInteractionDisabled)
-    }, /*#__PURE__*/React__namespace.createElement(context$2.Consumer, null, _ref => {
+    }, /*#__PURE__*/React__namespace.createElement(context$1.Consumer, null, _ref => {
       let {
         setAssetStatus
       } = _ref;
@@ -44177,13 +44198,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
@@ -44192,7 +44209,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 || _document$body === void 0 ? void 0 : _document$body.appendChild(_this._keypadContainer);
-      render( /*#__PURE__*/React__namespace.createElement(mathInput.LegacyKeypad, {
+      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
@@ -44208,7 +44225,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);
@@ -45135,7 +45153,7 @@ _defineProperty(ItemRenderer, "defaultProps", {
 const defaultContext = {
   onRendered: isRendered => {}
 };
-const context$1 = /*#__PURE__*/React__namespace.createContext(defaultContext);
+const context = /*#__PURE__*/React__namespace.createContext(defaultContext);
 
 const {
   mapObject
@@ -45406,7 +45424,7 @@ class ServerItemRenderer extends React__namespace.Component {
       assetStatuses: this.state.assetStatuses,
       setAssetStatus: this.setAssetStatus
     };
-    const questionRenderer = /*#__PURE__*/React__namespace.createElement(context$2.Provider, {
+    const questionRenderer = /*#__PURE__*/React__namespace.createElement(context$1.Provider, {
       value: contextValue
     }, /*#__PURE__*/React__namespace.createElement(Renderer, {
       keypadElement: this.props.keypadElement,
@@ -45453,7 +45471,7 @@ const styles$3 = aphrodite.StyleSheet.create({
     marginLeft: 50
   }
 });
-const ref = /*#__PURE__*/React__namespace.forwardRef((props, ref) => /*#__PURE__*/React__namespace.createElement(context$1.Consumer, null, _ref => {
+const ref = /*#__PURE__*/React__namespace.forwardRef((props, ref) => /*#__PURE__*/React__namespace.createElement(context.Consumer, null, _ref => {
   let {
     onRendered
   } = _ref;
@@ -45947,24 +45965,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__namespace.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
 
@@ -47107,10 +47107,9 @@ exports.InputNumber = InputNumber$1;
 exports.InteractiveGraphWidget = InteractiveGraph$1;
 exports.ItemRenderer = ItemRenderer;
 exports.JiptParagraphs = JiptParagraphs;
-exports.KeypadContext = context;
 exports.KhanColors = KhanColors;
 exports.KhanMath = KhanMath;
-exports.LoadingContext = context$1;
+exports.LoadingContext = context;
 exports.Log = Log;
 exports.MatrixWidget = Matrix$1;
 exports.MultiItems = MultiItems;

package/dist/index.js.flow

@@ -49,7 +49,6 @@ declare export * as Dependencies from "./dependencies";
 declare export { Errors, Log } from "./logging/log";
 declare export { PerseusError } from "./perseus-error";
 declare export { default as JiptParagraphs } from "./jipt-paragraphs";
-declare export { default as KeypadContext } from "./keypad-context";
 declare export { default as KhanMath } from "./util/math";
 declare export { default as LoadingContext } from "./loading-context";
 declare export { default as mediaQueries } from "./styles/media-queries";
@@ -86,11 +85,9 @@ export type {
   ImageUploader,
   JiptLabelStore,
   JiptRenderer,
-  KEScore,
   LinterContextProps,
   PerseusDependencies,
   PerseusScore,
-  RendererInterface,
   Version,
   VideoData,
   VideoKind,