@khanacademy/math-input 13.1.0 → 14.0.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @khanacademy/math-input
 
+## 14.0.0
+
+### Major Changes
+
+-   14138bb0: Move StatefulKeypadContextProvider into math-input
+-   14138bb0: Hoist keypad active state into keypad context
+
 ## 13.1.0
 
 ### Minor Changes

package/dist/components/keypad/mobile-keypad.d.ts

@@ -19,9 +19,10 @@ type Props = {
     onDismiss?: () => void;
     style?: StyleType;
     onAnalyticsEvent: AnalyticsEventHandlerFn;
+    setKeypadActive: (keypadActive: boolean) => void;
+    keypadActive: boolean;
 };
 type State = {
-    active: boolean;
     containerWidth: number;
     hasBeenActivated: boolean;
     keypadConfig?: KeypadConfiguration;

package/dist/components/keypad-context.d.ts

@@ -1,21 +1,15 @@
 /**
- * KeypadContext provides a way to the Keypad and (Server)ItemRenderer to
+ * KeypadContext provides a way to the Keypad and Perseus Renderers to
  * communicate.
  *
- * The KeypadContext.Provider wraps the ExerciseFooter while KeypadContext.Consumer
- * wraps each (Server)ItemRenderer render site and the Keypad rendered in the
- * ExerciseFooter.
+ * The StatefulKeypadContextProvider wraps the application
+ * while KeypadContext.Consumer wraps things that need this state:
+ * - mobile keypad usages
+ * - Perseus Renderers (Server/Item/Article)
  */
 import * as React from "react";
-import type { KeypadAPI } from "../types";
-import type { KeypadContextRendererInterface } from "@khanacademy/perseus-core";
-type KeypadContext = {
-    setKeypadElement: (keypadElement?: KeypadAPI) => void;
-    keypadElement: KeypadAPI | null | undefined;
-    setRenderer: (renderer?: KeypadContextRendererInterface | null | undefined) => void;
-    renderer: KeypadContextRendererInterface | null | undefined;
-    setScrollableElement: (scrollableElement?: HTMLElement | null | undefined) => void;
-    scrollableElement: HTMLElement | null | undefined;
-};
-declare const context: React.Context<KeypadContext>;
-export default context;
+import type { KeypadContextType } from "../types";
+export declare const KeypadContext: React.Context<KeypadContextType>;
+type Props = React.PropsWithChildren<unknown>;
+export declare function StatefulKeypadContextProvider(props: Props): JSX.Element;
+export {};

package/dist/components/keypad-legacy/provided-keypad.d.ts

@@ -4,6 +4,8 @@ import type { Cursor, KeypadConfiguration, KeyHandler, KeypadAPI } from "../../t
 import type { AnalyticsEventHandlerFn } from "@khanacademy/perseus-core";
 import type { StyleType } from "@khanacademy/wonder-blocks-core";
 type Props = {
+    setKeypadActive: (keypadActive: boolean) => void;
+    keypadActive: boolean;
     onElementMounted?: (arg1: any) => void;
     onDismiss?: () => void;
     style?: StyleType;
@@ -12,6 +14,7 @@ type Props = {
 declare class ProvidedKeypad extends React.Component<Props> implements KeypadAPI {
     store: any;
     constructor(props: any);
+    componentDidUpdate(prevProps: any): void;
     activate: () => void;
     dismiss: () => void;
     configure: (configuration: KeypadConfiguration, cb: () => void) => void;

package/dist/es/index.js

@@ -4,7 +4,7 @@ import { getDecimalSeparator } from '@khanacademy/wonder-blocks-i18n';
 import { entries } from '@khanacademy/wonder-stuff-core';
 import { StyleSheet, css } from 'aphrodite';
 import * as React from 'react';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
 import $ from 'jquery';
 import MathQuill from 'mathquill';
@@ -5085,17 +5085,6 @@ const styles$d = 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.Component {
   constructor(...args) {
     super(...args);
@@ -5104,7 +5093,6 @@ class MobileKeypad extends React.Component {
     this._throttleResize = false;
     this.hasMounted = false;
     this.state = {
-      active: false,
       containerWidth: 0,
       hasBeenActivated: false
     };
@@ -5126,18 +5114,15 @@ class MobileKeypad extends React.Component {
       }, 100);
     };
     this.activate = () => {
+      this.props.setKeypadActive(true);
       this.setState({
-        active: true,
         hasBeenActivated: true
       });
     };
     this.dismiss = () => {
-      this.setState({
-        active: false
-      }, () => {
-        var _this$props$onDismiss, _this$props;
-        (_this$props$onDismiss = (_this$props = this.props).onDismiss) == null ? 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 ? void 0 : _this$props$onDismiss.call(_this$props);
     };
     this.configure = (configuration, cb) => {
       this.setState({
@@ -5202,10 +5187,10 @@ class MobileKeypad extends React.Component {
   }
   render() {
     const {
+      keypadActive,
       style
     } = this.props;
     const {
-      active,
       hasBeenActivated,
       containerWidth,
       cursor,
@@ -5213,7 +5198,7 @@ class MobileKeypad extends React.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])];
 
@@ -5222,7 +5207,7 @@ class MobileKeypad extends React.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"
       };
@@ -5287,6 +5272,51 @@ const styles$c = 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.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] = useState(false);
+  // used to communicate between the keypad and the Renderer
+  const [keypadElement, setKeypadElement] = useState();
+  // this is a KeypadContextRendererInterface from Perseus
+  const [renderer, setRenderer] = useState();
+  const [scrollableElement, setScrollableElement] = useState();
+  return /*#__PURE__*/React.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.
  */
@@ -9685,10 +9715,10 @@ class ProvidedKeypad extends React.Component {
     super(props);
     this.store = void 0;
     this.activate = () => {
-      this.store.dispatch(activateKeypad());
+      this.props.setKeypadActive(true);
     };
     this.dismiss = () => {
-      this.store.dispatch(dismissKeypad());
+      this.props.setKeypadActive(false);
     };
     this.configure = (configuration, cb) => {
       this.store.dispatch(configureKeypad(configuration));
@@ -9713,6 +9743,14 @@ class ProvidedKeypad extends React.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,
@@ -9767,27 +9805,17 @@ 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.createElement(KeypadComponent, rest);
+  return /*#__PURE__*/React.createElement(KeypadContext.Consumer, null, ({
+    setKeypadActive,
+    keypadActive
+  }) => {
+    return /*#__PURE__*/React.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.createContext({
-  setKeypadElement: keypadElement => {},
-  keypadElement: null,
-  setRenderer: renderer => {},
-  renderer: null,
-  setScrollableElement: scrollableElement => {},
-  scrollableElement: null
-});
-
 /**
  * React PropTypes that may be shared between components.
  */
@@ -9803,5 +9831,5 @@ const keypadElementPropType = PropTypes.shape({
   getDOMNode: PropTypes.func.isRequired
 });
 
-export { CursorContext, Keypad$2 as DesktopKeypad, KeyConfigs, context as KeypadContext, MathInput as KeypadInput, KeypadType, KeypadSwitch as MobileKeypad, createMathField, getCursorContext, keyToMathquillMap as keyTranslator, keypadElementPropType, mathQuillInstance };
+export { CursorContext, Keypad$2 as DesktopKeypad, KeyConfigs, KeypadContext, MathInput as KeypadInput, KeypadType, KeypadSwitch as MobileKeypad, StatefulKeypadContextProvider, createMathField, getCursorContext, keyToMathquillMap as keyTranslator, keypadElementPropType, mathQuillInstance };
 //# sourceMappingURL=index.js.map