@khanacademy/math-input 13.1.0 → 14.0.0

package/dist/index.d.ts

@@ -9,7 +9,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

@@ -5384,17 +5384,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 +5392,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 +5413,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 +5486,10 @@ class MobileKeypad extends React__namespace.Component {
   }
   render() {
     const {
+      keypadActive,
       style
     } = this.props;
     const {
-      active,
       hasBeenActivated,
       containerWidth,
       cursor,
@@ -5512,7 +5497,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 +5506,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 +5572,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 +9913,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));
@@ -9911,6 +9941,14 @@ class ProvidedKeypad extends React__namespace.Component {
     });
     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,
@@ -9965,27 +10003,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,10 +10033,11 @@ 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;