@khanacademy/perseus 10.1.0 → 11.1.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @khanacademy/perseus
 
+## 11.1.0
+
+### Minor Changes
+
+-   8dc86906: Ensure that radio widget choices can scroll horizontally, but not vertically.
+    Previously, unnecessary vertical scrollbars appeared on some choices containing
+    MathJax elements.
+
+## 11.0.0
+
+### Major Changes
+
+-   2af4f9fa: Switch from using ProvideKeypad in ArticleRenderer to passing the keypad element down instead
+
+### Patch Changes
+
+-   Updated dependencies [2af4f9fa]
+    -   @khanacademy/math-input@11.0.0
+    -   @khanacademy/perseus-core@1.0.0
+
 ## 10.1.0
 
 ### Minor Changes

package/dist/article-renderer.d.ts

@@ -6,6 +6,8 @@ import * as React from "react";
 import type { KeypadProps } from "./mixins/provide-keypad";
 import type { PerseusRenderer } from "./perseus-types";
 import type { APIOptions, PerseusDependenciesV2 } from "./types";
+import type { KeypadAPI } from "@khanacademy/math-input";
+import type { KeypadContextRendererInterface } from "@khanacademy/perseus-core";
 import type { LinterContextProps } from "@khanacademy/perseus-linter";
 type Props = {
     apiOptions: APIOptions;
@@ -16,6 +18,7 @@ type Props = {
     useNewStyles: boolean;
     linterContext: LinterContextProps;
     legacyPerseusLint?: ReadonlyArray<string>;
+    keypadElement?: KeypadAPI | null | undefined;
     dependencies: PerseusDependenciesV2;
 } & KeypadProps;
 type DefaultProps = {
@@ -23,17 +26,12 @@ type DefaultProps = {
     useNewStyles: Props["useNewStyles"];
     linterContext: Props["linterContext"];
 };
-type State = {
-    keypadElement: any | null;
-};
-declare class ArticleRenderer extends React.Component<Props, State> {
+declare class ArticleRenderer extends React.Component<Props> implements KeypadContextRendererInterface {
     _currentFocus: any;
     static defaultProps: DefaultProps;
     constructor(props: Props);
     componentDidMount(): void;
-    shouldComponentUpdate(nextProps: Props, nextState: State): boolean;
-    componentWillUnmount(): void;
-    keypadElement: () => void;
+    shouldComponentUpdate(nextProps: Props): boolean;
     _handleFocusChange: (arg1: any, arg2: any) => void;
     _setCurrentFocus: (arg1: any) => void;
     _onRendererBlur: (arg1: any) => void;

package/dist/es/index.js

@@ -22719,7 +22719,8 @@ const Choice = function Choice(props) {
       display: "flex",
       flexDirection: "row",
       opacity: showDimmed ? 0.5 : 1.0,
-      overflow: "auto"
+      overflowX: "auto",
+      overflowY: "hidden"
     }
   }, /*#__PURE__*/React.createElement("div", {
     className: "perseus-sr-only"
@@ -43882,80 +43883,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 ? void 0 : _document$body.appendChild(_this._keypadContainer);
-      render( /*#__PURE__*/React.createElement(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.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.Component {
   constructor(props) {
     super(props);
     this._currentFocus = void 0;
-    this.keypadElement = () => {
-      return ProvideKeypad.keypadElement.call(this);
-    };
     this._handleFocusChange = (newFocusPath, oldFocusPath) => {
       // TODO(charlie): DRY this up--some of this logic is repeated in
       // ItemRenderer.
@@ -43966,7 +43897,13 @@ class ArticleRenderer extends React.Component {
       }
     };
     this._setCurrentFocus = newFocusPath => {
-      const keypadElement = this.keypadElement();
+      const {
+        keypadElement,
+        apiOptions
+      } = this.props;
+      const {
+        isMobile
+      } = apiOptions;
       const prevFocusPath = this._currentFocus;
       this._currentFocus = newFocusPath;
 
@@ -43984,18 +43921,12 @@ class ArticleRenderer extends React.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 ? 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();
         }
       }
@@ -44031,17 +43962,12 @@ class ArticleRenderer extends React.Component {
     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 = _extends({}, ApiOptions.defaults, this.props.apiOptions, {
@@ -44067,7 +43993,7 @@ class ArticleRenderer extends React.Component {
         ref: refForSection,
         key: i,
         key_: i,
-        keypadElement: this.keypadElement(),
+        keypadElement: this.props.keypadElement,
         apiOptions: _extends({}, apiOptions, {
           onFocusChange: (newFocusPath, oldFocusPath) => {
             // Prefix the paths with the relevant section,
@@ -44435,6 +44361,73 @@ const styles$4 = 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 ? void 0 : _document$body.appendChild(_this._keypadContainer);
+      render( /*#__PURE__*/React.createElement(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.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_;
@@ -44925,8 +44918,8 @@ class ServerItemRenderer extends React.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 ? 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) {