@khanacademy/math-input 13.1.0 → 14.0.1

package/dist/index.d.ts

@@ -2,6 +2,7 @@
  * A single entry-point for all of the external-facing functionality.
  */
 import "../less/main.less";
+export { libVersion } from "./version";
 export { default as KeypadInput } from "./components/input/math-input";
 export { createMathField, mathQuillInstance, } from "./components/input/mathquill-instance";
 export { type MathFieldInterface } from "./components/input/mathquill-types";
@@ -9,7 +10,7 @@ export { CursorContext } from "./components/input/cursor-contexts";
 export { getCursorContext } from "./components/input/mathquill-helpers";
 export { default as MobileKeypad } from "./components/keypad-switch";
 export { default as DesktopKeypad } from "./components/keypad";
-export { default as KeypadContext } from "./components/keypad-context";
+export { KeypadContext, StatefulKeypadContextProvider, } from "./components/keypad-context";
 export { keypadElementPropType } from "./components/prop-types";
 export type { KeypadAPI, KeypadConfiguration } from "./types";
 export type { default as Keys } from "./data/keys";

package/dist/index.js

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var perseusCore = require('@khanacademy/perseus-core');
 var Color = require('@khanacademy/wonder-blocks-color');
 var i18n = require('@khanacademy/wonder-blocks-i18n');
 var wonderStuffCore = require('@khanacademy/wonder-stuff-core');
@@ -49,6 +50,11 @@ var katex__default = /*#__PURE__*/_interopDefaultLegacy(katex);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var Redux__namespace = /*#__PURE__*/_interopNamespace(Redux);
 
+// This file is processed by a Rollup plugin (replace) to inject the production
+const libName = "@khanacademy/math-input";
+const libVersion = "14.0.1";
+perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
+
 function _defineProperty(obj, key, value) {
   key = _toPropertyKey(key);
   if (key in obj) {
@@ -5322,7 +5328,6 @@ function Keypad$2(props) {
     style: styles$d.keypadInnerContainer
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
     style: [styles$d.keypadGrid, gridStyle],
-    role: "grid",
     tabIndex: 0,
     "aria-label": "Keypad"
   }, selectedPage === "Fractions" && /*#__PURE__*/React__namespace.createElement(FractionsPage, {
@@ -5384,17 +5389,6 @@ const styles$d = aphrodite.StyleSheet.create({
   }
 });
 
-/**
- * This is the v2 equivalent of v1's ProvidedKeypad. It follows the same
- * external API so that it can be hot-swapped with the v1 keypad and
- * is responsible for connecting the keypad with MathInput and the Renderer.
- *
- * Ideally this strategy of attaching methods on the class component for
- * other components to call will be replaced props/callbacks since React
- * doesn't support this type of code anymore (functional components
- * can't have methods attached to them).
- */
-
 class MobileKeypad extends React__namespace.Component {
   constructor() {
     super(...arguments);
@@ -5403,7 +5397,6 @@ class MobileKeypad extends React__namespace.Component {
     _defineProperty(this, "_throttleResize", false);
     _defineProperty(this, "hasMounted", false);
     _defineProperty(this, "state", {
-      active: false,
       containerWidth: 0,
       hasBeenActivated: false
     });
@@ -5425,18 +5418,15 @@ class MobileKeypad extends React__namespace.Component {
       }, 100);
     });
     _defineProperty(this, "activate", () => {
+      this.props.setKeypadActive(true);
       this.setState({
-        active: true,
         hasBeenActivated: true
       });
     });
     _defineProperty(this, "dismiss", () => {
-      this.setState({
-        active: false
-      }, () => {
-        var _this$props$onDismiss, _this$props;
-        (_this$props$onDismiss = (_this$props = this.props).onDismiss) === null || _this$props$onDismiss === void 0 ? void 0 : _this$props$onDismiss.call(_this$props);
-      });
+      var _this$props$onDismiss, _this$props;
+      this.props.setKeypadActive(false);
+      (_this$props$onDismiss = (_this$props = this.props).onDismiss) === null || _this$props$onDismiss === void 0 ? void 0 : _this$props$onDismiss.call(_this$props);
     });
     _defineProperty(this, "configure", (configuration, cb) => {
       this.setState({
@@ -5501,10 +5491,10 @@ class MobileKeypad extends React__namespace.Component {
   }
   render() {
     const {
+      keypadActive,
       style
     } = this.props;
     const {
-      active,
       hasBeenActivated,
       containerWidth,
       cursor,
@@ -5512,7 +5502,7 @@ class MobileKeypad extends React__namespace.Component {
     } = this.state;
     const containerStyle = [
     // internal styles
-    styles$c.keypadContainer, active && styles$c.activeKeypadContainer,
+    styles$c.keypadContainer, keypadActive && styles$c.activeKeypadContainer,
     // styles passed as props
     ...(Array.isArray(style) ? style : [style])];
 
@@ -5521,7 +5511,7 @@ class MobileKeypad extends React__namespace.Component {
     // during the initial render.
     // Done inline (dynamicStyle) since stylesheets might not be loaded yet.
     let dynamicStyle = {};
-    if (!active && !hasBeenActivated) {
+    if (!keypadActive && !hasBeenActivated) {
       dynamicStyle = {
         visibility: "hidden"
       };
@@ -5587,6 +5577,51 @@ const styles$c = aphrodite.StyleSheet.create({
   }
 });
 
+/**
+ * KeypadContext provides a way to the Keypad and Perseus Renderers to
+ * communicate.
+ *
+ * The StatefulKeypadContextProvider wraps the application
+ * while KeypadContext.Consumer wraps things that need this state:
+ * - mobile keypad usages
+ * - Perseus Renderers (Server/Item/Article)
+ */
+// @ts-expect-error - 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 KeypadContext = /*#__PURE__*/React__namespace.createContext({
+  setKeypadActive: keypadActive => {},
+  keypadActive: false,
+  setKeypadElement: keypadElement => {},
+  keypadElement: null,
+  setRenderer: renderer => {},
+  renderer: null,
+  setScrollableElement: scrollableElement => {},
+  scrollableElement: null
+});
+function StatefulKeypadContextProvider(props) {
+  // whether or not to display the keypad
+  const [keypadActive, setKeypadActive] = React.useState(false);
+  // used to communicate between the keypad and the Renderer
+  const [keypadElement, setKeypadElement] = React.useState();
+  // this is a KeypadContextRendererInterface from Perseus
+  const [renderer, setRenderer] = React.useState();
+  const [scrollableElement, setScrollableElement] = React.useState();
+  return /*#__PURE__*/React__namespace.createElement(KeypadContext.Provider, {
+    value: {
+      setKeypadActive,
+      keypadActive,
+      setKeypadElement,
+      keypadElement,
+      setRenderer,
+      renderer,
+      // The scrollableElement options can likely be removed after
+      // the exercises-package is officially deprecated. They don't appear
+      // to be used anywhere except for the exercises-package and tests.
+      setScrollableElement,
+      scrollableElement
+    }
+  }, props.children);
+}
+
 /**
  * A small triangular decal to sit in the corner of a parent component.
  */
@@ -9883,10 +9918,10 @@ class ProvidedKeypad extends React__namespace.Component {
     super(props);
     _defineProperty(this, "store", void 0);
     _defineProperty(this, "activate", () => {
-      this.store.dispatch(activateKeypad());
+      this.props.setKeypadActive(true);
     });
     _defineProperty(this, "dismiss", () => {
-      this.store.dispatch(dismissKeypad());
+      this.props.setKeypadActive(false);
     });
     _defineProperty(this, "configure", (configuration, cb) => {
       this.store.dispatch(configureKeypad(configuration));
@@ -9909,47 +9944,57 @@ class ProvidedKeypad extends React__namespace.Component {
     _defineProperty(this, "getDOMNode", () => {
       return ReactDOM__default["default"].findDOMNode(this);
     });
+    _defineProperty(this, "onElementMounted", element => {
+      var _this$props$onElement, _this$props;
+      this.props.onAnalyticsEvent({
+        type: "math-input:keypad-opened",
+        payload: {
+          virtualKeypadVersion: "MATH_INPUT_KEYPAD_V1"
+        }
+      });
+
+      // Append the dispatch methods that we want to expose
+      // externally to the returned React element.
+      const elementWithDispatchMethods = {
+        ...element,
+        activate: this.activate,
+        dismiss: this.dismiss,
+        configure: this.configure,
+        setCursor: this.setCursor,
+        setKeyHandler: this.setKeyHandler,
+        getDOMNode: this.getDOMNode
+      };
+      (_this$props$onElement = (_this$props = this.props).onElementMounted) === null || _this$props$onElement === void 0 ? void 0 : _this$props$onElement.call(_this$props, elementWithDispatchMethods);
+    });
+    _defineProperty(this, "onDismiss", () => {
+      var _this$props$onDismiss, _this$props2;
+      this.props.onAnalyticsEvent({
+        type: "math-input:keypad-closed",
+        payload: {
+          virtualKeypadVersion: "MATH_INPUT_KEYPAD_V1"
+        }
+      });
+      (_this$props$onDismiss = (_this$props2 = this.props).onDismiss) === null || _this$props$onDismiss === void 0 ? void 0 : _this$props$onDismiss.call(_this$props2);
+    });
     this.store = createStore();
   }
+  componentDidUpdate(prevProps) {
+    if (this.props.keypadActive && !prevProps.keypadActive) {
+      this.store.dispatch(activateKeypad());
+    }
+    if (!this.props.keypadActive && prevProps.keypadActive) {
+      this.store.dispatch(dismissKeypad());
+    }
+  }
   render() {
     const {
-      onElementMounted,
-      onDismiss,
       style
     } = this.props;
     return /*#__PURE__*/React__namespace.createElement(reactRedux.Provider, {
       store: this.store
     }, /*#__PURE__*/React__namespace.createElement(KeypadContainer$1, {
-      onElementMounted: element => {
-        this.props.onAnalyticsEvent({
-          type: "math-input:keypad-opened",
-          payload: {
-            virtualKeypadVersion: "MATH_INPUT_KEYPAD_V1"
-          }
-        });
-
-        // Append the dispatch methods that we want to expose
-        // externally to the returned React element.
-        const elementWithDispatchMethods = {
-          ...element,
-          activate: this.activate,
-          dismiss: this.dismiss,
-          configure: this.configure,
-          setCursor: this.setCursor,
-          setKeyHandler: this.setKeyHandler,
-          getDOMNode: this.getDOMNode
-        };
-        onElementMounted === null || onElementMounted === void 0 ? void 0 : onElementMounted(elementWithDispatchMethods);
-      },
-      onDismiss: () => {
-        this.props.onAnalyticsEvent({
-          type: "math-input:keypad-closed",
-          payload: {
-            virtualKeypadVersion: "MATH_INPUT_KEYPAD_V1"
-          }
-        });
-        onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
-      },
+      onElementMounted: this.onElementMounted,
+      onDismiss: this.onDismiss,
       style: style
     }));
   }
@@ -9965,27 +10010,18 @@ function KeypadSwitch(props) {
   // Note: Although we pass the "onAnalyticsEvent" to both keypad components,
   // only the current one uses it. There's no point in instrumenting the
   // legacy keypad given that it's on its way out the door.
-  return /*#__PURE__*/React__namespace.createElement(KeypadComponent, rest);
+  return /*#__PURE__*/React__namespace.createElement(KeypadContext.Consumer, null, _ref => {
+    let {
+      setKeypadActive,
+      keypadActive
+    } = _ref;
+    return /*#__PURE__*/React__namespace.createElement(KeypadComponent, _extends({}, rest, {
+      keypadActive: keypadActive,
+      setKeypadActive: setKeypadActive
+    }));
+  });
 }
 
-/**
- * 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 - 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
-});
-
 /**
  * React PropTypes that may be shared between components.
  */
@@ -10004,13 +10040,15 @@ const keypadElementPropType = PropTypes__default["default"].shape({
 exports.CursorContext = CursorContext;
 exports.DesktopKeypad = Keypad$2;
 exports.KeyConfigs = KeyConfigs;
-exports.KeypadContext = context;
+exports.KeypadContext = KeypadContext;
 exports.KeypadInput = MathInput;
 exports.KeypadType = KeypadType;
 exports.MobileKeypad = KeypadSwitch;
+exports.StatefulKeypadContextProvider = StatefulKeypadContextProvider;
 exports.createMathField = createMathField;
 exports.getCursorContext = getCursorContext;
 exports.keyTranslator = keyToMathquillMap;
 exports.keypadElementPropType = keypadElementPropType;
+exports.libVersion = libVersion;
 exports.mathQuillInstance = mathQuillInstance;
 //# sourceMappingURL=index.js.map