@khanacademy/perseus 4.0.2 → 5.0.0

package/dist/perseus-types.d.ts

@@ -361,7 +361,6 @@ export type PerseusNumericInputWidgetOptions = {
     labelText: string;
     size: string;
     coefficient: boolean;
-    multipleNumberInput?: boolean;
     rightAlign?: boolean;
     static: boolean;
     answerForms?: ReadonlyArray<PerseusNumericInputAnswerForm>;

package/dist/perseus-types.js.flow

@@ -532,7 +532,6 @@ export type PerseusNumericInputWidgetOptions = {|
   labelText: string,
   size: string,
   coefficient: boolean,
-  multipleNumberInput?: boolean,
   rightAlign?: boolean,
   static: boolean,
   answerForms?: $ReadOnlyArray<PerseusNumericInputAnswerForm>,

package/dist/widgets/__stories__/test-keypad-context-wrapper.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
-type TestKeypadContextWrapperProps = {
+type Props = {
     children: React.ReactElement;
 };
-declare const TestKeypadContextWrapper: (props: TestKeypadContextWrapperProps) => React.ReactElement;
+declare const TestKeypadContextWrapper: (props: Props) => React.ReactElement;
 export default TestKeypadContextWrapper;

package/dist/widgets/__stories__/test-keypad-context-wrapper.js.flow

@@ -5,10 +5,8 @@
  * @flow
  */
 import * as React from "react";
-declare type TestKeypadContextWrapperProps = {|
+declare type Props = {|
   children: React.Element<any>,
 |};
-declare var TestKeypadContextWrapper: (
-  props: TestKeypadContextWrapperProps
-) => React.Element<any>;
+declare var TestKeypadContextWrapper: (props: Props) => React.Element<any>;
 declare export default typeof TestKeypadContextWrapper;

package/dist/widgets/expression.d.ts

@@ -30,6 +30,8 @@ type DefaultProps = {
 };
 type OnInputErrorFunctionType = (arg1?: any, arg2?: any, arg3?: any) => boolean | null | undefined;
 export declare class Expression extends React.Component<Props, ExpressionState> {
+    _isMounted: boolean;
+    errorTimeout: null | number;
     static validate(userInput: string, rubric: Rubric, onInputError?: OnInputErrorFunctionType): PerseusScore;
     static getUserInputFromProps(props: Props): string;
     static getOneCorrectAnswerFromRubric(rubric: Rubric): string | null | undefined;
@@ -39,8 +41,6 @@ export declare class Expression extends React.Component<Props, ExpressionState>
     componentDidMount: () => void;
     componentDidUpdate: (prevProps: Props) => void;
     componentWillUnmount: () => void;
-    _isMounted: boolean;
-    errorTimeout: null | number;
     simpleValidate: (rubric: Rubric, onInputError: OnInputErrorFunctionType) => PerseusScore;
     getUserInput: () => string;
     change: (...args: any) => any | undefined;

package/dist/widgets/expression.js.flow

@@ -46,6 +46,8 @@ declare type OnInputErrorFunctionType = (
 declare export class Expression
   extends React.Component<Props, ExpressionState>
 {
+  _isMounted: boolean;
+  errorTimeout: null | number;
   static validate(
     userInput: string,
     rubric: Rubric,
@@ -59,8 +61,6 @@ declare export class Expression
   componentDidMount: () => void;
   componentDidUpdate: (prevProps: Props) => void;
   componentWillUnmount: () => void;
-  _isMounted: boolean;
-  errorTimeout: null | number;
   simpleValidate: (
     rubric: Rubric,
     onInputError: OnInputErrorFunctionType

package/dist/widgets/interaction/element-container.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-type ElementContainerProps = {
+type Props = {
     children: React.ReactElement<any> | ReadonlyArray<React.ReactElement<any>>;
     initiallyVisible: boolean;
     onDelete?: () => void | null | undefined;
@@ -7,14 +7,15 @@ type ElementContainerProps = {
     onUp?: () => void | null | undefined;
     title: string | React.ReactElement<any>;
 };
-declare class ElementContainer extends React.Component<ElementContainerProps, {
+type State = {
     show: boolean;
-}> {
+};
+declare class ElementContainer extends React.Component<Props, State> {
     static defaultProps: {
         initiallyVisible: boolean;
         title: string;
     };
-    constructor(props: ElementContainerProps);
+    constructor(props: Props);
     toggle: (e: React.SyntheticEvent) => void;
     render(): React.ReactNode;
 }

package/dist/widgets/interaction/element-container.js.flow

@@ -5,7 +5,7 @@
  * @flow
  */
 import * as React from "react";
-declare type ElementContainerProps = {|
+declare type Props = {|
   children: React.Element<any> | $ReadOnlyArray<React.Element<any>>,
   initiallyVisible: boolean,
   onDelete?: () => void | null | void,
@@ -13,20 +13,15 @@ declare type ElementContainerProps = {|
   onUp?: () => void | null | void,
   title: string | React.Element<any>,
 |};
-declare class ElementContainer
-  extends
-    React.Component<
-      ElementContainerProps,
-      {|
-        show: boolean,
-      |}
-    >
-{
+declare type State = {|
+  show: boolean,
+|};
+declare class ElementContainer extends React.Component<Props, State> {
   static defaultProps: {|
     initiallyVisible: boolean,
     title: string,
   |};
-  constructor(props: ElementContainerProps): this;
+  constructor(props: Props): this;
   toggle: (e: SyntheticEvent<>) => void;
   render(): React.Node;
 }

package/dist/widgets/label-image/marker.d.ts

@@ -5,21 +5,21 @@
  */
 import * as React from "react";
 import type { InteractiveMarkerType } from "./types";
-type MarkerProps = InteractiveMarkerType & {
+type Props = InteractiveMarkerType & {
     showSelected: boolean;
     showPulsate: boolean;
     onClick: (e: MouseEvent) => void;
     onKeyDown: (e: KeyboardEvent) => void;
 };
-type MarkerState = {
+type State = {
     isFocused: boolean;
 };
-export default class Marker extends React.Component<MarkerProps, MarkerState> {
+export default class Marker extends React.Component<Props, State> {
     _icon: HTMLElement | null | undefined;
     static defaultProps: {
         selected: ReadonlyArray<any>;
     };
-    state: MarkerState;
+    state: State;
     handleFocus(): void;
     handleBlur(): void;
     renderIcon(): React.ReactElement<React.ComponentProps<"div">>;

package/dist/widgets/label-image/marker.js.flow

@@ -6,7 +6,7 @@
  */
 import * as React from "react";
 import type { InteractiveMarkerType } from "./types";
-declare type MarkerProps = {|
+declare type Props = {|
   ...InteractiveMarkerType,
   ...{|
     showSelected: boolean,
@@ -15,17 +15,15 @@ declare type MarkerProps = {|
     onKeyDown: (e: KeyboardEvent) => void,
   |},
 |};
-declare type MarkerState = {|
+declare type State = {|
   isFocused: boolean,
 |};
-declare export default class Marker
-  extends React.Component<MarkerProps, MarkerState>
-{
+declare export default class Marker extends React.Component<Props, State> {
   _icon: HTMLElement | null | void;
   static defaultProps: {|
     selected: $ReadOnlyArray<any>,
   |};
-  state: MarkerState;
+  state: State;
   handleFocus(): void;
   handleBlur(): void;
   renderIcon(): React.Element<"div">;

package/dist/widgets/numeric-input.d.ts

@@ -16,7 +16,6 @@ type Props = ExternalProps & {
     answerForms: NonNullable<ExternalProps["answerForms"]>;
     labelText: NonNullable<ExternalProps["labelText"]>;
     linterContext: NonNullable<ExternalProps["linterContext"]>;
-    multipleNumberInput: NonNullable<ExternalProps["multipleNumberInput"]>;
     currentValue: string;
 };
 type DefaultProps = {
@@ -28,7 +27,6 @@ type DefaultProps = {
     answerForms: Props["answerForms"];
     labelText: Props["labelText"];
     linterContext: Props["linterContext"];
-    multipleNumberInput: Props["multipleNumberInput"];
 };
 type State = {
     previousValues: ReadonlyArray<string>;

package/dist/widgets/numeric-input.js.flow

@@ -31,9 +31,6 @@ declare type Props = {|
     answerForms: $NonMaybeType<$PropertyType<ExternalProps, "answerForms">>,
     labelText: $NonMaybeType<$PropertyType<ExternalProps, "labelText">>,
     linterContext: $NonMaybeType<$PropertyType<ExternalProps, "linterContext">>,
-    multipleNumberInput: $NonMaybeType<
-      $PropertyType<ExternalProps, "multipleNumberInput">
-    >,
     currentValue: string,
   |},
 |};
@@ -46,7 +43,6 @@ declare type DefaultProps = {|
   answerForms: $PropertyType<Props, "answerForms">,
   labelText: $PropertyType<Props, "labelText">,
   linterContext: $PropertyType<Props, "linterContext">,
-  multipleNumberInput: $PropertyType<Props, "multipleNumberInput">,
 |};
 declare type State = {|
   previousValues: $ReadOnlyArray<string>,

package/dist/widgets/radio/base-radio.d.ts

@@ -34,5 +34,11 @@ type Props = {
     registerFocusFunction?: (arg1: FocusFunction) => void;
     isLastUsedWidget?: boolean;
 };
-declare const BaseRadio: React.FC<Props>;
+declare const BaseRadio: {
+    (props: Props): React.ReactElement;
+    defaultProps: {
+        editMode: boolean;
+        multipleSelect: boolean;
+    };
+};
 export default BaseRadio;

package/dist/widgets/radio/base-radio.js.flow

@@ -40,5 +40,11 @@ declare type Props = {|
   registerFocusFunction?: (arg1: FocusFunction) => void,
   isLastUsedWidget?: boolean,
 |};
-declare var BaseRadio: React.StatelessFunctionalComponent<Props>;
+declare var BaseRadio: {|
+  (props: Props): React.Element<any>,
+  defaultProps: {|
+    editMode: boolean,
+    multipleSelect: boolean,
+  |},
+|};
 declare export default typeof BaseRadio;

package/dist/widgets/radio/choice-icon/choice-icon.d.ts

@@ -12,5 +12,5 @@ type ChoiceIconProps = {
     reviewMode: boolean;
     previouslyAnswered: boolean;
 };
-declare const ChoiceIcon: React.FC<ChoiceIconProps>;
+declare const ChoiceIcon: (props: ChoiceIconProps) => React.ReactElement;
 export default ChoiceIcon;

package/dist/widgets/radio/choice-icon/choice-icon.js.flow

@@ -18,5 +18,5 @@ declare type ChoiceIconProps = {|
   reviewMode: boolean,
   previouslyAnswered: boolean,
 |};
-declare var ChoiceIcon: React.StatelessFunctionalComponent<ChoiceIconProps>;
+declare var ChoiceIcon: (props: ChoiceIconProps) => React.Element<any>;
 declare export default typeof ChoiceIcon;

package/dist/widgets/radio/choice-icon/cross-out-line.d.ts

@@ -3,7 +3,7 @@ import * as React from "react";
  * The "cross-out line" that appears over the icon when the choice has been
  * `crossedOut`.
  */
-declare const CrossOutLine: React.FC<{
+declare const CrossOutLine: (props: {
     color: string;
-}>;
+}) => React.ReactElement;
 export default CrossOutLine;

package/dist/widgets/radio/choice-icon/cross-out-line.js.flow

@@ -10,7 +10,7 @@ import * as React from "react";
  * The "cross-out line" that appears over the icon when the choice has been
  * `crossedOut`.
  */
-declare var CrossOutLine: React.StatelessFunctionalComponent<{|
+declare var CrossOutLine: (props: {|
   color: string,
-|}>;
+|}) => React.Element<any>;
 declare export default typeof CrossOutLine;

package/dist/widgets/radio/focus-ring.d.ts

@@ -8,5 +8,12 @@ type Props = {
     color: string;
     multipleSelect: boolean;
 };
-declare const FocusRing: React.FC<Props>;
+declare const FocusRing: {
+    (props: Props): React.ReactElement;
+    defaultProps: {
+        visible: boolean;
+        color: string;
+        multipleSelect: boolean;
+    };
+};
 export default FocusRing;

package/dist/widgets/radio/focus-ring.js.flow

@@ -11,5 +11,12 @@ declare type Props = {|
   color: string,
   multipleSelect: boolean,
 |};
-declare var FocusRing: React.StatelessFunctionalComponent<Props>;
+declare var FocusRing: {|
+  (props: Props): React.Element<any>,
+  defaultProps: {|
+    visible: boolean,
+    color: string,
+    multipleSelect: boolean,
+  |},
+|};
 declare export default typeof FocusRing;

package/dist/widgets/radio/option-status.d.ts

@@ -6,12 +6,12 @@
  * between the states more immediately clear to users.
  */
 import * as React from "react";
-type OptionStatusProps = {
+type Props = {
     correct: boolean;
     checked: boolean;
     crossedOut: boolean;
     previouslyAnswered: boolean;
     reviewMode: boolean;
 };
-declare const OptionStatus: React.FC<OptionStatusProps>;
+declare const OptionStatus: (props: Props) => React.ReactElement;
 export default OptionStatus;

package/dist/widgets/radio/option-status.js.flow

@@ -5,12 +5,12 @@
  * @flow
  */
 import * as React from "react";
-declare type OptionStatusProps = {|
+declare type Props = {|
   correct: boolean,
   checked: boolean,
   crossedOut: boolean,
   previouslyAnswered: boolean,
   reviewMode: boolean,
 |};
-declare var OptionStatus: React.StatelessFunctionalComponent<OptionStatusProps>;
+declare var OptionStatus: (props: Props) => React.Element<any>;
 declare export default typeof OptionStatus;

package/dist/widgets/video-transcript-link.d.ts

@@ -8,5 +8,5 @@ type Props = {
 /**
  * Video Transcript Link Component.
  */
-declare const VideoTranscriptLink: React.FC<Props>;
+declare const VideoTranscriptLink: (props: Props) => React.ReactElement;
 export default VideoTranscriptLink;

package/dist/widgets/video-transcript-link.js.flow

@@ -11,5 +11,5 @@ declare type Props = {|
 /**
  * Video Transcript Link Component.
  */
-declare var VideoTranscriptLink: React.StatelessFunctionalComponent<Props>;
+declare var VideoTranscriptLink: (props: Props) => React.Element<any>;
 declare export default typeof VideoTranscriptLink;

package/package.json

@@ -3,7 +3,7 @@
     "description": "Core Perseus API (includes renderers and widgets)",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "4.0.2",
+    "version": "5.0.0",
     "publishConfig": {
         "access": "public"
     },
@@ -23,10 +23,10 @@
     "dependencies": {
         "@khanacademy/kas": "^0.3.1",
         "@khanacademy/kmath": "^0.1.1",
-        "@khanacademy/math-input": "^0.7.2",
+        "@khanacademy/math-input": "^1.0.0",
         "@khanacademy/perseus-linter": "^0.3.1",
-        "@khanacademy/pure-markdown": "^0.2.2",
-        "@khanacademy/simple-markdown": "^0.9.2",
+        "@khanacademy/pure-markdown": "^0.2.3",
+        "@khanacademy/simple-markdown": "^0.9.3",
         "mathquill": "git+https://git@github.com/Khan/mathquill.git#a9ae54e057c5c1acc8244a5627acbff29901d992"
     },
     "devDependencies": {

package/src/__stories__/item-renderer.stories.tsx

@@ -16,14 +16,10 @@ export default {
     title: "Perseus/Renderers/Item Renderer",
 } as Story;
 
-export const InputNumberItem: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const InputNumberItem = (args: StoryArgs): React.ReactElement => {
     return <ItemRendererWithDebugUI item={itemWithInput} />;
 };
 
-export const LabelImageItem: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const LabelImageItem = (args: StoryArgs): React.ReactElement => {
     return <ItemRendererWithDebugUI item={labelImageItem} />;
 };

package/src/__stories__/server-item-renderer.stories.tsx

@@ -16,14 +16,10 @@ export default {
     title: "Perseus/Renderers/Server Item Renderer",
 } as Story;
 
-export const InputNumberItem: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const InputNumberItem = (args: StoryArgs): React.ReactElement => {
     return <ServerItemRendererWithDebugUI item={itemWithInput} />;
 };
 
-export const LabelImageItem: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const LabelImageItem = (args: StoryArgs): React.ReactElement => {
     return <ServerItemRendererWithDebugUI item={labelImageItem} />;
 };

package/src/components/__stories__/button-group.stories.tsx

@@ -30,9 +30,7 @@ const HarnassedButtonGroup = (
     );
 };
 
-export const ButtonsWithNoTitles: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const ButtonsWithNoTitles = (args: StoryArgs): React.ReactElement => {
     return (
         <HarnassedButtonGroup
             buttons={[
@@ -44,9 +42,7 @@ export const ButtonsWithNoTitles: React.FC<StoryArgs> = (
     );
 };
 
-export const ButtonsWithTitles: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const ButtonsWithTitles = (args: StoryArgs): React.ReactElement => {
     return (
         <HarnassedButtonGroup
             buttons={[

package/src/components/__stories__/fixed-to-responsive.stories.tsx

@@ -21,8 +21,8 @@ export default {
     title: "Perseus/Components/Fixed to Responsive",
 } as Story;
 
-export const SmallImageWithSmallContainer: React.FC<StoryArgs> = (
-    args,
+export const SmallImageWithSmallContainer = (
+    args: StoryArgs,
 ): React.ReactElement => {
     return (
         <FixedToResponsive width={width} height={sizeSmall}>
@@ -36,8 +36,8 @@ export const SmallImageWithSmallContainer: React.FC<StoryArgs> = (
     );
 };
 
-export const SmallImageWithMediumContainer: React.FC<StoryArgs> = (
-    args,
+export const SmallImageWithMediumContainer = (
+    args: StoryArgs,
 ): React.ReactElement => {
     return (
         <FixedToResponsive width={width} height={sizeMedium}>
@@ -51,8 +51,8 @@ export const SmallImageWithMediumContainer: React.FC<StoryArgs> = (
     );
 };
 
-export const LargeImageWithLargeContainer: React.FC<StoryArgs> = (
-    args,
+export const LargeImageWithLargeContainer = (
+    args: StoryArgs,
 ): React.ReactElement => {
     return (
         <FixedToResponsive width={width} height={sizeLarge}>
@@ -66,8 +66,8 @@ export const LargeImageWithLargeContainer: React.FC<StoryArgs> = (
     );
 };
 
-export const LargeImageWithSmallerContainer: React.FC<StoryArgs> = (
-    args,
+export const LargeImageWithSmallerContainer = (
+    args: StoryArgs,
 ): React.ReactElement => {
     return (
         <FixedToResponsive width={width} height={sizeSmall}>
@@ -81,9 +81,9 @@ export const LargeImageWithSmallerContainer: React.FC<StoryArgs> = (
     );
 };
 
-export const TwoOverlayedImagesInsteadOneResponsiveContainer: React.FC<
-    StoryArgs
-> = (args): React.ReactElement => {
+export const TwoOverlayedImagesInsteadOneResponsiveContainer = (
+    args: StoryArgs,
+): React.ReactElement => {
     return (
         <FixedToResponsive width={width} height={sizeSmall}>
             <img
@@ -104,8 +104,8 @@ export const TwoOverlayedImagesInsteadOneResponsiveContainer: React.FC<
     );
 };
 
-export const HeightConstrainingAnImage: React.FC<StoryArgs> = (
-    args,
+export const HeightConstrainingAnImage = (
+    args: StoryArgs,
 ): React.ReactElement => {
     return (
         <FixedToResponsive
@@ -123,9 +123,7 @@ export const HeightConstrainingAnImage: React.FC<StoryArgs> = (
     );
 };
 
-export const AllowingFullBleed: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const AllowingFullBleed = (args: StoryArgs): React.ReactElement => {
     return (
         <FixedToResponsive
             width={width}

package/src/components/__stories__/graph.stories.tsx

@@ -15,15 +15,13 @@ export default {
     title: "Perseus/Components/Graph",
 } as Story;
 
-export const SquareBoxSizeAndOtherwiseEmpty: React.FC<StoryArgs> = (
-    args,
+export const SquareBoxSizeAndOtherwiseEmpty = (
+    args: StoryArgs,
 ): React.ReactElement => {
     return <Graph box={[size, size]} />;
 };
 
-export const LabeledSquaredBox: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const LabeledSquaredBox = (args: StoryArgs): React.ReactElement => {
     return (
         <Graph box={[size, size]} labels={["First label", "Second label"]} />
     );

package/src/components/__stories__/graphie.stories.tsx

@@ -16,8 +16,8 @@ export default {
     title: "Perseus/Components/Graphie",
 } as Story;
 
-export const SquareBoxSizeAndOtherwiseEmpty: React.FC<StoryArgs> = (
-    args,
+export const SquareBoxSizeAndOtherwiseEmpty = (
+    args: StoryArgs,
 ): React.ReactElement => {
     return (
         <Graphie
@@ -28,8 +28,6 @@ export const SquareBoxSizeAndOtherwiseEmpty: React.FC<StoryArgs> = (
     );
 };
 
-export const PieChartGraphieLabels: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const PieChartGraphieLabels = (args: StoryArgs): React.ReactElement => {
     return <ItemRendererWithDebugUI item={itemWithPieChart} />;
 };

package/src/components/__stories__/hud.stories.tsx

@@ -12,9 +12,7 @@ export default {
     title: "Perseus/Components/HUD",
 } as Story;
 
-export const TestMessageDisabled: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const TestMessageDisabled = (args: StoryArgs): React.ReactElement => {
     return (
         <Hud
             fixedPosition={false}
@@ -25,9 +23,7 @@ export const TestMessageDisabled: React.FC<StoryArgs> = (
     );
 };
 
-export const TestMessageEnabled: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const TestMessageEnabled = (args: StoryArgs): React.ReactElement => {
     return (
         <Hud
             fixedPosition={false}

package/src/components/__stories__/icon.stories.tsx

@@ -54,7 +54,7 @@ export default {
     },
 } as Story;
 
-export const Icon: React.FC<StoryArgs> = (args): React.ReactElement => (
+export const Icon = (args: StoryArgs): React.ReactElement => (
     <IconComponent
         style={{display: "block"}}
         icon={IconPaths.iconCheck}

package/src/components/__stories__/image-loader.stories.tsx

@@ -15,7 +15,7 @@ export default {
     title: "Perseus/Components/Image Loader",
 } as Story;
 
-export const SvgImage: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const SvgImage = (args: StoryArgs): React.ReactElement => {
     return (
         <ImageLoader
             src={svgUrl}
@@ -29,7 +29,7 @@ export const SvgImage: React.FC<StoryArgs> = (args): React.ReactElement => {
     );
 };
 
-export const PngImage: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const PngImage = (args: StoryArgs): React.ReactElement => {
     return (
         <ImageLoader
             src={imgUrl}
@@ -43,8 +43,8 @@ export const PngImage: React.FC<StoryArgs> = (args): React.ReactElement => {
     );
 };
 
-export const InvalidImageWithChildrenForFailedLoading: React.FC<StoryArgs> = (
-    args,
+export const InvalidImageWithChildrenForFailedLoading = (
+    args: StoryArgs,
 ): React.ReactElement => {
     return (
         <ImageLoader