@khanacademy/math-input 13.1.0 → 14.0.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @khanacademy/math-input
 
+## 14.0.1
+
+### Patch Changes
+
+-   4f8afadd: Fix provided-keypad so that it doesn't re-render unnecessarily.
+-   7d8905b6: Removes "grid" role from keypad to un-muddle screen reader experience.
+-   55d4cd00: Print package name and version when loaded in the page
+-   Updated dependencies [55d4cd00]
+    -   @khanacademy/perseus-core@1.1.1
+
+## 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,12 +14,15 @@ 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;
     setCursor: (cursor: Cursor) => void;
     setKeyHandler: (keyHandler: KeyHandler) => void;
     getDOMNode: () => ReturnType<typeof ReactDOM.findDOMNode>;
+    onElementMounted: (element: any) => void;
+    onDismiss: () => void;
     render(): React.ReactNode;
 }
 export default ProvidedKeypad;

package/dist/es/index.js

@@ -1,10 +1,11 @@
+import { addLibraryVersionToPerseusDebug } from '@khanacademy/perseus-core';
 import Color from '@khanacademy/wonder-blocks-color';
 import * as i18n from '@khanacademy/wonder-blocks-i18n';
 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';
@@ -16,6 +17,11 @@ import PropTypes from 'prop-types';
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
 import * as Redux from 'redux';
 
+// This file is processed by a Rollup plugin (replace) to inject the production
+const libName = "@khanacademy/math-input";
+const libVersion = "14.0.1";
+addLibraryVersionToPerseusDebug(libName, libVersion);
+
 function _extends() {
   _extends = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -5023,7 +5029,6 @@ function Keypad$2(props) {
     style: styles$d.keypadInnerContainer
   }, /*#__PURE__*/React.createElement(View$1, {
     style: [styles$d.keypadGrid, gridStyle],
-    role: "grid",
     tabIndex: 0,
     "aria-label": "Keypad"
   }, selectedPage === "Fractions" && /*#__PURE__*/React.createElement(FractionsPage, {
@@ -5085,17 +5090,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 +5098,6 @@ class MobileKeypad extends React.Component {
     this._throttleResize = false;
     this.hasMounted = false;
     this.state = {
-      active: false,
       containerWidth: 0,
       hasBeenActivated: false
     };
@@ -5126,18 +5119,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 +5192,10 @@ class MobileKeypad extends React.Component {
   }
   render() {
     const {
+      keypadActive,
       style
     } = this.props;
     const {
-      active,
       hasBeenActivated,
       containerWidth,
       cursor,
@@ -5213,7 +5203,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 +5212,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 +5277,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 +9720,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));
@@ -9711,46 +9746,56 @@ class ProvidedKeypad extends React.Component {
     this.getDOMNode = () => {
       return ReactDOM.findDOMNode(this);
     };
+    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 = _extends({}, 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 ? void 0 : _this$props$onElement.call(_this$props, elementWithDispatchMethods);
+    };
+    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 ? 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.createElement(Provider, {
       store: this.store
     }, /*#__PURE__*/React.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 = _extends({}, element, {
-          activate: this.activate,
-          dismiss: this.dismiss,
-          configure: this.configure,
-          setCursor: this.setCursor,
-          setKeyHandler: this.setKeyHandler,
-          getDOMNode: this.getDOMNode
-        });
-        onElementMounted == null ? void 0 : onElementMounted(elementWithDispatchMethods);
-      },
-      onDismiss: () => {
-        this.props.onAnalyticsEvent({
-          type: "math-input:keypad-closed",
-          payload: {
-            virtualKeypadVersion: "MATH_INPUT_KEYPAD_V1"
-          }
-        });
-        onDismiss == null ? void 0 : onDismiss();
-      },
+      onElementMounted: this.onElementMounted,
+      onDismiss: this.onDismiss,
       style: style
     }));
   }
@@ -9767,27 +9812,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 +9838,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, libVersion, mathQuillInstance };
 //# sourceMappingURL=index.js.map