@khanacademy/perseus 10.1.0 → 11.1.0

package/dist/index.js

@@ -22825,7 +22825,8 @@ const Choice = function (props) {
       display: "flex",
       flexDirection: "row",
       opacity: showDimmed ? 0.5 : 1.0,
-      overflow: "auto"
+      overflowX: "auto",
+      overflowY: "hidden"
     }
   }, /*#__PURE__*/React__namespace.createElement("div", {
     className: "perseus-sr-only"
@@ -44146,80 +44147,10 @@ registerWidgets(allWidgets);
 const ItemVersion = getVersionVector();
 ItemVersion["::renderer::"] = version.itemDataVersion;
 
-/* eslint-disable @khanacademy/ts-no-error-suppressions */
-// NOTE: This is not a real component.  It's a collection of methods used to
-// create and manage a Keypad instances.
-// TODO(LP-10789): replace this with a React Context object to pass information
-// between Perseus and the Keypad.
-const ProvideKeypad = {
-  getInitialState() {
-    const _this = this;
-    let keypadElement = null;
-    if (_this.props.apiOptions && _this.props.apiOptions.customKeypad && _this.props.apiOptions.nativeKeypadProxy) {
-      keypadElement = _this.props.apiOptions.nativeKeypadProxy(
-      // @ts-expect-error - TS2339 - Property 'blur' 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...'. | TS2339 - Property 'blur' 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.blur && _this.blur());
-    }
-    return {
-      keypadElement
-    };
-  },
-  componentDidMount() {
-    const _this = this;
-    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
-      // or on-demand in the future.
-      _this._keypadContainer = document.createElement("div");
-      (_document$body = document.body) === null || _document$body === void 0 ? void 0 : _document$body.appendChild(_this._keypadContainer);
-      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
-          // and we're manually setting the 'this' by using 'call'
-          // @ts-expect-error - TS2339 - Property 'setState' 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.setState({
-            keypadElement: element
-          });
-        },
-        onDismiss: () => {
-          // @ts-expect-error - TS2339 - Property 'blur' 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...'. | TS2339 - Property 'blur' 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.blur && _this.blur();
-        }
-        // @ts-expect-error - 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,
-        useV2Keypad: apiOptions.useV2Keypad
-      }), _this._keypadContainer);
-    }
-  },
-  componentWillUnmount() {
-    const _this = this;
-    if (_this._keypadContainer) {
-      ReactDOM__default["default"].unmountComponentAtNode(_this._keypadContainer);
-      if (_this._keypadContainer.parentNode) {
-        // Note ChildNode.remove() isn't available in older Android
-        // webviews.
-        _this._keypadContainer.parentNode.removeChild(_this._keypadContainer);
-      }
-      _this._keypadContainer = null;
-    }
-  },
-  keypadElement() {
-    const _this = this;
-    return _this.state.keypadElement;
-  }
-};
-
 class ArticleRenderer extends React__namespace.Component {
   constructor(props) {
     super(props);
     _defineProperty(this, "_currentFocus", void 0);
-    _defineProperty(this, "keypadElement", () => {
-      return ProvideKeypad.keypadElement.call(this);
-    });
     _defineProperty(this, "_handleFocusChange", (newFocusPath, oldFocusPath) => {
       // TODO(charlie): DRY this up--some of this logic is repeated in
       // ItemRenderer.
@@ -44230,7 +44161,13 @@ class ArticleRenderer extends React__namespace.Component {
       }
     });
     _defineProperty(this, "_setCurrentFocus", newFocusPath => {
-      const keypadElement = this.keypadElement();
+      const {
+        keypadElement,
+        apiOptions
+      } = this.props;
+      const {
+        isMobile
+      } = apiOptions;
       const prevFocusPath = this._currentFocus;
       this._currentFocus = newFocusPath;
 
@@ -44248,18 +44185,12 @@ class ArticleRenderer extends React__namespace.Component {
         });
       }
       if (this.props.apiOptions.onFocusChange != null) {
-        this.props.apiOptions.onFocusChange(this._currentFocus, prevFocusPath,
-        // @ts-expect-error - TS2339 - Property 'getDOMNode' does not exist on type 'never'.
-        didFocusInput && keypadElement && keypadElement.getDOMNode());
+        this.props.apiOptions.onFocusChange(this._currentFocus, prevFocusPath, didFocusInput ? keypadElement === null || keypadElement === void 0 ? void 0 : keypadElement.getDOMNode() : null);
       }
-
-      // @ts-expect-error - TS1345 - An expression of type 'void' cannot be tested for truthiness.
-      if (keypadElement) {
+      if (keypadElement && isMobile) {
         if (didFocusInput) {
-          // @ts-expect-error - TS2339 - Property 'activate' does not exist on type 'never'.
           keypadElement.activate();
         } else {
-          // @ts-expect-error - TS2339 - Property 'dismiss' does not exist on type 'never'.
           keypadElement.dismiss();
         }
       }
@@ -44295,17 +44226,12 @@ class ArticleRenderer extends React__namespace.Component {
     _defineProperty(this, "_sections", () => {
       return Array.isArray(this.props.json) ? this.props.json : [this.props.json];
     });
-    this.state = ProvideKeypad.getInitialState.call(this);
   }
   componentDidMount() {
-    ProvideKeypad.componentDidMount.call(this);
     this._currentFocus = null;
   }
-  shouldComponentUpdate(nextProps, nextState) {
-    return nextProps !== this.props || nextState !== this.state;
-  }
-  componentWillUnmount() {
-    ProvideKeypad.componentWillUnmount.call(this);
+  shouldComponentUpdate(nextProps) {
+    return nextProps !== this.props;
   }
   render() {
     const apiOptions = {
@@ -44333,7 +44259,7 @@ class ArticleRenderer extends React__namespace.Component {
         ref: refForSection,
         key: i,
         key_: i,
-        keypadElement: this.keypadElement(),
+        keypadElement: this.props.keypadElement,
         apiOptions: {
           ...apiOptions,
           onFocusChange: (newFocusPath, oldFocusPath) => {
@@ -44705,6 +44631,73 @@ const styles$4 = aphrodite.StyleSheet.create({
   }
 });
 
+/* eslint-disable @khanacademy/ts-no-error-suppressions */
+// NOTE: This is not a real component.  It's a collection of methods used to
+// create and manage a Keypad instances.
+// TODO(LP-10789): replace this with a React Context object to pass information
+// between Perseus and the Keypad.
+const ProvideKeypad = {
+  getInitialState() {
+    const _this = this;
+    let keypadElement = null;
+    if (_this.props.apiOptions && _this.props.apiOptions.customKeypad && _this.props.apiOptions.nativeKeypadProxy) {
+      keypadElement = _this.props.apiOptions.nativeKeypadProxy(
+      // @ts-expect-error - TS2339 - Property 'blur' 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...'. | TS2339 - Property 'blur' 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.blur && _this.blur());
+    }
+    return {
+      keypadElement
+    };
+  },
+  componentDidMount() {
+    const _this = this;
+    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
+      // or on-demand in the future.
+      _this._keypadContainer = document.createElement("div");
+      (_document$body = document.body) === null || _document$body === void 0 ? void 0 : _document$body.appendChild(_this._keypadContainer);
+      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
+          // and we're manually setting the 'this' by using 'call'
+          // @ts-expect-error - TS2339 - Property 'setState' 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.setState({
+            keypadElement: element
+          });
+        },
+        onDismiss: () => {
+          // @ts-expect-error - TS2339 - Property 'blur' 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...'. | TS2339 - Property 'blur' 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.blur && _this.blur();
+        }
+        // @ts-expect-error - 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,
+        useV2Keypad: apiOptions.useV2Keypad
+      }), _this._keypadContainer);
+    }
+  },
+  componentWillUnmount() {
+    const _this = this;
+    if (_this._keypadContainer) {
+      ReactDOM__default["default"].unmountComponentAtNode(_this._keypadContainer);
+      if (_this._keypadContainer.parentNode) {
+        // Note ChildNode.remove() isn't available in older Android
+        // webviews.
+        _this._keypadContainer.parentNode.removeChild(_this._keypadContainer);
+      }
+      _this._keypadContainer = null;
+    }
+  },
+  keypadElement() {
+    const _this = this;
+    return _this.state.keypadElement;
+  }
+};
+
 const {
   mapObject: mapObject$1
 } = objective_;
@@ -45201,8 +45194,8 @@ class ServerItemRenderer extends React__namespace.Component {
       return Util.inputPathsEqual(inputPath, this._currentFocus);
     });
     if (onFocusChange != null) {
-      onFocusChange(this._currentFocus, prevFocus, didFocusInput && keypadElement && keypadElement.getDOMNode(),
-      // @ts-expect-error - TS2345 - Argument of type 'false | Element | Text | null | undefined' is not assignable to parameter of type 'HTMLElement | undefined'.
+      onFocusChange(this._currentFocus, prevFocus, didFocusInput ? keypadElement === null || keypadElement === void 0 ? void 0 : keypadElement.getDOMNode() : null,
+      // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'false | Element | Text | null | undefined' is not assignable to parameter of type 'HTMLElement | undefined'.
       didFocusInput && this.questionRenderer.getDOMNodeForPath(newFocus));
     }
     if (keypadElement && isMobile) {