@khanacademy/perseus 4.0.2 → 5.0.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @khanacademy/perseus
 
+## 5.0.0
+
+### Major Changes
+
+-   472e20e1: Remove all references to multipleNumberInput (ie. Ask for (one|all) correct solution)
+
+### Patch Changes
+
+-   22c5d564: Remove the use of React.FC<> and use types named Props/State in more components
+-   Updated dependencies [4c03a43d]
+-   Updated dependencies [22c5d564]
+    -   @khanacademy/math-input@1.0.0
+    -   @khanacademy/simple-markdown@0.9.3
+    -   @khanacademy/pure-markdown@0.2.3
+
 ## 4.0.2
 
 ### Patch Changes

package/dist/components/highlighting/highlightable-content.d.ts

@@ -1,19 +1,19 @@
 import * as React from "react";
 import type { DOMHighlight, DOMHighlightSet, SerializedHighlightSet, DOMRange } from "./types";
-type HighlightableContentProps = {
+type Props = {
     children?: React.ReactElement<any>;
     editable: boolean;
     enabled: boolean;
     onSerializedHighlightsUpdate: (serializedHighlights: SerializedHighlightSet) => unknown;
     serializedHighlights: SerializedHighlightSet;
 };
-type HighlightableContentState = {
+type State = {
     wordRanges: ReadonlyArray<DOMRange>;
 };
-declare class HighlightableContent extends React.PureComponent<HighlightableContentProps, HighlightableContentState> {
+declare class HighlightableContent extends React.PureComponent<Props, State> {
     _container: HTMLElement | null | undefined;
     _content: HTMLElement | null | undefined;
-    state: HighlightableContentState;
+    state: State;
     _buildHighlight(highlightRange: DOMRange): DOMHighlight | null | undefined;
     /**
      * Take the highlights from props, and deserialize them into DOMHighlights,

package/dist/components/highlighting/highlightable-content.js.flow

@@ -11,7 +11,7 @@ import type {
   SerializedHighlightSet,
   DOMRange,
 } from "./types";
-declare type HighlightableContentProps = {|
+declare type Props = {|
   children?: React.Element<any>,
   editable: boolean,
   enabled: boolean,
@@ -20,16 +20,13 @@ declare type HighlightableContentProps = {|
   ) => mixed,
   serializedHighlights: SerializedHighlightSet,
 |};
-declare type HighlightableContentState = {|
+declare type State = {|
   wordRanges: $ReadOnlyArray<DOMRange>,
 |};
-declare class HighlightableContent
-  extends
-    React.PureComponent<HighlightableContentProps, HighlightableContentState>
-{
+declare class HighlightableContent extends React.PureComponent<Props, State> {
   _container: HTMLElement | null | void;
   _content: HTMLElement | null | void;
-  state: HighlightableContentState;
+  state: State;
   _buildHighlight(highlightRange: DOMRange): DOMHighlight | null | void;
 
   /**

package/dist/components/highlighting/ui/highlight-renderer.d.ts

@@ -1,23 +1,23 @@
 import * as React from "react";
 import type { DOMHighlight, Position, Rect, ZIndexes } from "./types";
-type HighlightRendererProps = {
+type Props = {
     highlight: DOMHighlight;
     highlightKey: string;
     offsetParent: Element;
     zIndexes: ZIndexes;
 };
-type HighlightRendererState = {
+type State = {
     cachedHighlightRects: ReadonlyArray<Rect>;
 };
-declare class HighlightRenderer extends React.PureComponent<HighlightRendererProps, HighlightRendererState> {
-    state: HighlightRendererState;
-    UNSAFE_componentWillReceiveProps(nextProps: HighlightRendererProps): void;
+declare class HighlightRenderer extends React.PureComponent<Props, State> {
+    state: State;
+    UNSAFE_componentWillReceiveProps(nextProps: Props): void;
     /**
      * Compute the set of rectangles that cover the highlighted content, with
      * coordinates relative to the offset parent. That way, we can use them
      * for CSS positioning.
      */
-    _computeRects(props: HighlightRendererProps): ReadonlyArray<Rect>;
+    _computeRects(props: Props): ReadonlyArray<Rect>;
     /**
      * Return whether the given mouse position (coordinates relative to this
      * component's offset parent) is hovering over the given rectangle

package/dist/components/highlighting/ui/highlight-renderer.js.flow

@@ -6,27 +6,25 @@
  */
 import * as React from "react";
 import type { DOMHighlight, Position, Rect, ZIndexes } from "./types";
-declare type HighlightRendererProps = {|
+declare type Props = {|
   highlight: DOMHighlight,
   highlightKey: string,
   offsetParent: Element,
   zIndexes: ZIndexes,
 |};
-declare type HighlightRendererState = {|
+declare type State = {|
   cachedHighlightRects: $ReadOnlyArray<Rect>,
 |};
-declare class HighlightRenderer
-  extends React.PureComponent<HighlightRendererProps, HighlightRendererState>
-{
-  state: HighlightRendererState;
-  UNSAFE_componentWillReceiveProps(nextProps: HighlightRendererProps): void;
+declare class HighlightRenderer extends React.PureComponent<Props, State> {
+  state: State;
+  UNSAFE_componentWillReceiveProps(nextProps: Props): void;
 
   /**
    * Compute the set of rectangles that cover the highlighted content, with
    * coordinates relative to the offset parent. That way, we can use them
    * for CSS positioning.
    */
-  _computeRects(props: HighlightRendererProps): $ReadOnlyArray<Rect>;
+  _computeRects(props: Props): $ReadOnlyArray<Rect>;
 
   /**
    * Return whether the given mouse position (coordinates relative to this

package/dist/components/highlighting/ui/highlight-set-renderer.d.ts

@@ -1,24 +1,24 @@
 import * as React from "react";
 import HighlightRenderer from "./highlight-renderer";
 import type { DOMHighlightSet, Position, ZIndexes } from "./types";
-type HighlightSetRendererProps = {
+type Props = {
     editable: boolean;
     highlights: DOMHighlightSet;
     offsetParent: Element;
     onRemoveHighlight: (highlightKey: string) => unknown;
     zIndexes: ZIndexes;
 };
-type HighlightSetRendererState = {
+type State = {
     hoveredHighlightKey: string | null | undefined;
     hoveringTooltipFor: string | null | undefined;
 };
-declare class HighlightSetRenderer extends React.PureComponent<HighlightSetRendererProps, HighlightSetRendererState> {
-    state: HighlightSetRendererState;
+declare class HighlightSetRenderer extends React.PureComponent<Props, State> {
+    state: State;
     _highlightRenderers: {
         [highlightKey: string]: HighlightRenderer;
     };
     componentDidMount(): void;
-    UNSAFE_componentWillReceiveProps(nextProps: HighlightSetRendererProps): void;
+    UNSAFE_componentWillReceiveProps(nextProps: Props): void;
     componentWillUnmount(): void;
     /**
      * Given whether we were previously listening to mousemove events, and

package/dist/components/highlighting/ui/highlight-set-renderer.js.flow

@@ -7,27 +7,24 @@
 import * as React from "react";
 import HighlightRenderer from "./highlight-renderer";
 import type { DOMHighlightSet, Position, ZIndexes } from "./types";
-declare type HighlightSetRendererProps = {|
+declare type Props = {|
   editable: boolean,
   highlights: DOMHighlightSet,
   offsetParent: Element,
   onRemoveHighlight: (highlightKey: string) => mixed,
   zIndexes: ZIndexes,
 |};
-declare type HighlightSetRendererState = {|
+declare type State = {|
   hoveredHighlightKey: string | null | void,
   hoveringTooltipFor: string | null | void,
 |};
-declare class HighlightSetRenderer
-  extends
-    React.PureComponent<HighlightSetRendererProps, HighlightSetRendererState>
-{
-  state: HighlightSetRendererState;
+declare class HighlightSetRenderer extends React.PureComponent<Props, State> {
+  state: State;
   _highlightRenderers: {
     [highlightKey: string]: HighlightRenderer,
   };
   componentDidMount(): void;
-  UNSAFE_componentWillReceiveProps(nextProps: HighlightSetRendererProps): void;
+  UNSAFE_componentWillReceiveProps(nextProps: Props): void;
   componentWillUnmount(): void;
 
   /**

package/dist/components/highlighting/ui/highlight-tooltip.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import type { Rect } from "./types";
-type HighlightTooltipProps = {
+type Props = {
     label: string;
     onClick: () => unknown;
     onMouseEnter?: () => unknown;
@@ -9,7 +9,7 @@ type HighlightTooltipProps = {
     focusOffset: number;
     offsetParent: Element;
 };
-declare class HighlightTooltip extends React.PureComponent<HighlightTooltipProps> {
+declare class HighlightTooltip extends React.PureComponent<Props> {
     _getFocusRect(): Rect | null | undefined;
     render(): null | React.ReactNode;
 }

package/dist/components/highlighting/ui/highlight-tooltip.js.flow

@@ -6,7 +6,7 @@
  */
 import * as React from "react";
 import type { Rect } from "./types";
-declare type HighlightTooltipProps = {|
+declare type Props = {|
   label: string,
   onClick: () => mixed,
   onMouseEnter?: () => mixed,
@@ -15,9 +15,7 @@ declare type HighlightTooltipProps = {|
   focusOffset: number,
   offsetParent: Element,
 |};
-declare class HighlightTooltip
-  extends React.PureComponent<HighlightTooltipProps>
-{
+declare class HighlightTooltip extends React.PureComponent<Props> {
   _getFocusRect(): Rect | null | void;
   render(): null | React.Node;
 }

package/dist/components/highlighting/ui/highlighting-ui.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import type { TrackedSelection } from "./selection-tracker";
 import type { DOMHighlight, DOMHighlightSet, DOMRange, ZIndexes } from "./types";
-type HighlightingUIProps = {
+type Props = {
     buildHighlight: (range: DOMRange) => DOMHighlight | null | undefined;
     contentNode: Node;
     editable: boolean;
@@ -11,7 +11,7 @@ type HighlightingUIProps = {
     onRemoveHighlight: (highlightKey: string) => unknown;
     zIndexes: ZIndexes;
 };
-declare class HighlightingUI extends React.PureComponent<HighlightingUIProps> {
+declare class HighlightingUI extends React.PureComponent<Props> {
     _handleAddHighlight(highlightToAdd: DOMHighlight): void;
     _selectionIsValid(trackedSelection?: TrackedSelection | null): trackedSelection is TrackedSelection;
     render(): React.ReactNode;

package/dist/components/highlighting/ui/highlighting-ui.js.flow

@@ -12,7 +12,7 @@ import type {
   DOMRange,
   ZIndexes,
 } from "./types";
-declare type HighlightingUIProps = {|
+declare type Props = {|
   buildHighlight: (range: DOMRange) => DOMHighlight | null | void,
   contentNode: Node,
   editable: boolean,
@@ -22,7 +22,7 @@ declare type HighlightingUIProps = {|
   onRemoveHighlight: (highlightKey: string) => mixed,
   zIndexes: ZIndexes,
 |};
-declare class HighlightingUI extends React.PureComponent<HighlightingUIProps> {
+declare class HighlightingUI extends React.PureComponent<Props> {
   _handleAddHighlight(highlightToAdd: DOMHighlight): void;
   _selectionIsValid(trackedSelection?: TrackedSelection | null): boolean;
   render(): React.Node;

package/dist/components/highlighting/ui/selection-tracker.d.ts

@@ -9,19 +9,19 @@ export type TrackedSelection = {
     focusOffset: number;
     proposedHighlight: DOMHighlight;
 };
-type SelectionTrackerProps = {
+type Props = {
     buildHighlight: (domRange: DOMRange) => DOMHighlight | null | undefined;
     children?: (trackedSelection: TrackedSelection | null | undefined, userIsMouseSelecting: boolean) => React.ReactElement<any>;
     enabled: boolean;
 };
-type SelectionTrackerState = {
+type State = {
     mouseState: "down" | "down-and-selecting" | "up";
     trackedSelection: TrackedSelection | null | undefined;
 };
-declare class SelectionTracker extends React.PureComponent<SelectionTrackerProps, SelectionTrackerState> {
-    state: SelectionTrackerState;
+declare class SelectionTracker extends React.PureComponent<Props, State> {
+    state: State;
     componentDidMount(): void;
-    componentDidUpdate(prevProps: SelectionTrackerProps): void;
+    componentDidUpdate(prevProps: Props): void;
     componentWillUnmount(): void;
     _updateListeners(wasListening: boolean, willListen: boolean): void;
     /**

package/dist/components/highlighting/ui/selection-tracker.js.flow

@@ -11,7 +11,7 @@ export type TrackedSelection = {|
   focusOffset: number,
   proposedHighlight: DOMHighlight,
 |};
-declare type SelectionTrackerProps = {|
+declare type Props = {|
   buildHighlight: (domRange: DOMRange) => DOMHighlight | null | void,
   children?: (
     trackedSelection: TrackedSelection | null | void,
@@ -19,16 +19,14 @@ declare type SelectionTrackerProps = {|
   ) => React.Element<any>,
   enabled: boolean,
 |};
-declare type SelectionTrackerState = {|
+declare type State = {|
   mouseState: "down" | "down-and-selecting" | "up",
   trackedSelection: TrackedSelection | null | void,
 |};
-declare class SelectionTracker
-  extends React.PureComponent<SelectionTrackerProps, SelectionTrackerState>
-{
-  state: SelectionTrackerState;
+declare class SelectionTracker extends React.PureComponent<Props, State> {
+  state: State;
   componentDidMount(): void;
-  componentDidUpdate(prevProps: SelectionTrackerProps): void;
+  componentDidUpdate(prevProps: Props): void;
   componentWillUnmount(): void;
   _updateListeners(wasListening: boolean, willListen: boolean): void;
 

package/dist/components/highlighting/word-indexer.d.ts

@@ -13,11 +13,11 @@
  */
 import * as React from "react";
 import type { DOMRange } from "./types";
-type WordIndexerProps = {
+type Props = {
     children?: React.ReactElement<any>;
     onWordsUpdate: (wordRanges: ReadonlyArray<DOMRange>) => unknown;
 };
-declare class WordIndexer extends React.PureComponent<WordIndexerProps> {
+declare class WordIndexer extends React.PureComponent<Props> {
     _container: HTMLElement | null | undefined;
     componentDidMount(): void;
     componentDidUpdate(): void;

package/dist/components/highlighting/word-indexer.js.flow

@@ -6,11 +6,11 @@
  */
 import * as React from "react";
 import type { DOMRange } from "./types";
-declare type WordIndexerProps = {|
+declare type Props = {|
   children?: React.Element<any>,
   onWordsUpdate: (wordRanges: $ReadOnlyArray<DOMRange>) => mixed,
 |};
-declare class WordIndexer extends React.PureComponent<WordIndexerProps> {
+declare class WordIndexer extends React.PureComponent<Props> {
   _container: HTMLElement | null | void;
   componentDidMount(): void;
   componentDidUpdate(): void;

package/dist/components/inline-icon.d.ts

@@ -1,5 +1,39 @@
+/**
+ * A stripped version of Icon.jsx from webapp. Takes an SVG icon and renders it
+ * inline like Font Awesome did.
+ *
+ * If you are looking for an icon that we've used before you should look in
+ * webapp's `icon-paths.js` which is a reference file for all the SVG paths
+ * that we've used. You'll need to copy the object from that file into
+ * whichever file you're using the icon and explicitly pass it in to the
+ * <InlineIcon/> React component.
+ *
+ * We assume that the viewBox is cropped and aligned to (0, 0), but icons can
+ * be defined differently. At some point we might want to add these attributes
+ * to `icon-paths.js`, but for now this is a fairly safe assumption.
+ *
+ * Sample usage:
+ *
+ *   const editIcon = {
+ *      path: "M41.209 53.753l5.39 0l0 5.39l3.136 0l6.468-6.517-8.477-8.526-6.517 6.517l0 3.136zm33.173-34.937q-.882-.882-1.862.049l-19.6 19.6q-.931.98-.049 1.862t1.862-.049l19.6-19.6q.931-.98.049-1.862zm-38.563 45.668l0-16.121l37.632-37.632 16.17 16.121-37.632 37.632l-16.17 0zm43.022-12.397l0 10.633q-.049 6.713-4.753 11.417t-11.368 4.704l-46.599 0q-6.713 0-11.417-4.753t-4.704-11.368l0-46.599q0-6.664 4.753-11.417t11.368-4.704l46.599 0q3.528 0 6.566 1.372.833.392.98 1.323t-.49 1.617l-2.744 2.744q-.784.784-1.96.441t-2.352-.343l-46.599 0q-3.675 0-6.321 2.646t-2.646 6.321l0 46.599q0 3.675 2.646 6.321t6.321 2.646l46.599 0q3.675 0 6.321-2.646t2.646-6.321l0-7.056q0-.735.49-1.225l3.577-3.577q.833-.833 1.96-.392t1.127 1.617zm7.203-51.646q2.254 0 3.773 1.568l8.526 8.526q1.568 1.568 1.568 3.822t-1.568 3.773l-5.145 5.145-16.121-16.121 5.145-5.145q1.568-1.568 3.822-1.568z",
+ *      width: 100,
+ *      height: 78.912,
+ *   };
+ *   <InlineIcon {...editIcon} />
+ *
+ */
+import PropTypes from "prop-types";
 import * as React from "react";
-declare const InlineIcon: React.FC<InlineIconProps>;
+declare const InlineIcon: {
+    ({ path, width, height, style, title, }: InlineIconProps): React.ReactElement;
+    propTypes: {
+        path: PropTypes.Validator<string>;
+        height: PropTypes.Validator<number>;
+        width: PropTypes.Validator<number>;
+        style: PropTypes.Requireable<object>;
+        title: PropTypes.Requireable<string>;
+    };
+};
 export type InlineIconProps = {
     path: string;
     height: number;

package/dist/components/inline-icon.js.flow

@@ -4,8 +4,18 @@
  * Flowgen v1.21.0
  * @flow
  */
+import PropTypes from "prop-types";
 import * as React from "react";
-declare var InlineIcon: React.StatelessFunctionalComponent<InlineIconProps>;
+declare var InlineIcon: {|
+  (x: InlineIconProps): React.Element<any>,
+  propTypes: {|
+    path: PropTypes.Validator<string>,
+    height: PropTypes.Validator<number>,
+    width: PropTypes.Validator<number>,
+    style: PropTypes.Requireable<{ ... }>,
+    title: PropTypes.Requireable<string>,
+  |},
+|};
 export type InlineIconProps = {|
   path: string,
   height: number,

package/dist/components/simple-keypad-input.d.ts

@@ -9,9 +9,9 @@
  */
 import * as React from "react";
 export default class SimpleKeypadInput extends React.Component<any> {
+    _isMounted: boolean;
     componentDidMount(): void;
     componentWillUnmount(): void;
-    _isMounted: boolean;
     focus(): void;
     blur(): void;
     getValue(): string | number;

package/dist/components/simple-keypad-input.js.flow

@@ -6,9 +6,9 @@
  */
 import * as React from "react";
 declare export default class SimpleKeypadInput extends React.Component<any> {
+  _isMounted: boolean;
   componentDidMount(): void;
   componentWillUnmount(): void;
-  _isMounted: boolean;
   focus(): void;
   blur(): void;
   getValue(): string | number;

package/dist/components/tex-buttons.d.ts

@@ -6,13 +6,13 @@ type ButtonSets = {
 };
 declare const buttonSets: ButtonSets;
 export type ButtonSetsType = ReadonlyArray<keyof typeof buttonSets>;
-type TexButtonProps = {
+type Props = {
     sets: ButtonSetsType;
     onInsert: (arg1: Inserter) => void;
     className?: string;
     convertDotToTimes?: boolean;
 };
-declare class TexButtons extends React.Component<TexButtonProps> {
+declare class TexButtons extends React.Component<Props> {
     static buttonSets: typeof buttonSets;
     static buttonSetsType: any;
     render(): React.ReactNode;

package/dist/components/tex-buttons.js.flow

@@ -12,13 +12,13 @@ declare type ButtonSets = {
 };
 declare var buttonSets: ButtonSets;
 export type ButtonSetsType = $ReadOnlyArray<$Keys<typeof buttonSets>>;
-declare type TexButtonProps = {|
+declare type Props = {|
   sets: ButtonSetsType,
   onInsert: (arg1: Inserter) => void,
   className?: string,
   convertDotToTimes?: boolean,
 |};
-declare class TexButtons extends React.Component<TexButtonProps> {
+declare class TexButtons extends React.Component<Props> {
   static buttonSets: typeof buttonSets;
   static buttonSetsType: any;
   render(): React.Node;

package/dist/error-boundary.d.ts

@@ -1,12 +1,12 @@
 import * as React from "react";
-type ErrorBoundaryProps = {
+type Props = {
     children: React.ReactNode;
 };
-type ErrorBoundaryState = {
+type State = {
     error: string;
 };
-declare class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
-    constructor(props: ErrorBoundaryProps);
+declare class ErrorBoundary extends React.Component<Props, State> {
+    constructor(props: Props);
     componentDidCatch(error: Error, info: any): void;
     render(): React.ReactNode;
 }

package/dist/error-boundary.js.flow

@@ -5,16 +5,14 @@
  * @flow
  */
 import * as React from "react";
-declare type ErrorBoundaryProps = {|
+declare type Props = {|
   children: React.Node,
 |};
-declare type ErrorBoundaryState = {|
+declare type State = {|
   error: string,
 |};
-declare class ErrorBoundary
-  extends React.Component<ErrorBoundaryProps, ErrorBoundaryState>
-{
-  constructor(props: ErrorBoundaryProps): this;
+declare class ErrorBoundary extends React.Component<Props, State> {
+  constructor(props: Props): this;
   componentDidCatch(error: Error, info: any): void;
   render(): React.Node;
 }

package/dist/es/index.js

@@ -2541,6 +2541,8 @@ const insertBraces = value => {
 class Expression extends React.Component {
   constructor(..._args) {
     super(..._args);
+    this._isMounted = false;
+    this.errorTimeout = null;
     this.displayName = "Expression";
     this.state = {
       showErrorTooltip: false,
@@ -2587,8 +2589,6 @@ class Expression extends React.Component {
       clearTimeout(this.errorTimeout);
       this._isMounted = false;
     };
-    this._isMounted = false;
-    this.errorTimeout = null;
     this.simpleValidate = (rubric, onInputError) => {
       onInputError = onInputError || function () {};
       return Expression.validate(this.getUserInput(), rubric, onInputError);
@@ -9991,7 +9991,7 @@ GraphUtils.createGraphie = function (el) {
      *                         the function at i
      * @param  {[]} rangeArray array of ranges over which the
      *                         corresponding functions are defined
-     * @return {Raphael set}
+     * @return {Set<any>}      set of paths
      */
     plotPiecewise: function (fnArray, rangeArray) {
       const paths = raphael$1.set();
@@ -10013,8 +10013,8 @@ GraphUtils.createGraphie = function (el) {
      * return a Raphael set of Raphael circle objects at those
      * coordinates
      *
-     * @param  {Array of arrays} endpointArray
-     * @return {Raphael set}
+     * @param  {Array<[number, number]>} endpointArray
+     * @return {Set<any>} set of circles
      */
     plotEndpointCircles: function (endpointArray) {
       const circles = raphael$1.set();
@@ -21796,8 +21796,7 @@ NumericInput.defaultProps = {
   coefficient: false,
   answerForms: [],
   labelText: "",
-  linterContext: linterContextDefault,
-  multipleNumberInput: false
+  linterContext: linterContextDefault
 };
 const unionAnswerForms = function unionAnswerForms(answerFormsList) {
   // Takes a list of lists of answer forms, and returns a list of the forms
@@ -23754,9 +23753,7 @@ class Radio$1 extends React.Component {
       };
     });
     return /*#__PURE__*/React.createElement(BaseRadio, {
-      labelWrap: true
-      // @ts-expect-error [FEI-5003] - TS2322 - Type 'boolean | undefined' is not assignable to type 'boolean'.
-      ,
+      labelWrap: true,
       multipleSelect: this.props.multipleSelect,
       countChoices: this.props.countChoices,
       numCorrect: this.props.numCorrect,