@khanacademy/perseus 4.0.2 → 5.0.0

package/src/widgets/__stories__/interactive-graph.stories.tsx

@@ -19,39 +19,39 @@ export default {
 
 type StoryArgs = Record<any, any>;
 
-export const Angle: React.FC<StoryArgs> = (args): React.ReactElement => (
+export const Angle = (args: StoryArgs): React.ReactElement => (
     <RendererWithDebugUI question={angleQuestion} />
 );
 
-export const Circle: React.FC<StoryArgs> = (args): React.ReactElement => (
+export const Circle = (args: StoryArgs): React.ReactElement => (
     <RendererWithDebugUI question={circleQuestion} />
 );
 
-export const Linear: React.FC<StoryArgs> = (args): React.ReactElement => (
+export const Linear = (args: StoryArgs): React.ReactElement => (
     <RendererWithDebugUI question={linearQuestion} />
 );
 
-export const LinearSystem: React.FC<StoryArgs> = (args): React.ReactElement => (
+export const LinearSystem = (args: StoryArgs): React.ReactElement => (
     <RendererWithDebugUI question={linearSystemQuestion} />
 );
 
-export const Point: React.FC<StoryArgs> = (args): React.ReactElement => (
+export const Point = (args: StoryArgs): React.ReactElement => (
     <RendererWithDebugUI question={pointQuestion} />
 );
 
-export const Polygon: React.FC<StoryArgs> = (args): React.ReactElement => (
+export const Polygon = (args: StoryArgs): React.ReactElement => (
     <RendererWithDebugUI question={polygonQuestion} />
 );
 
-export const Ray: React.FC<StoryArgs> = (args): React.ReactElement => (
+export const Ray = (args: StoryArgs): React.ReactElement => (
     <RendererWithDebugUI question={rayQuestion} />
 );
 
-export const Segment: React.FC<StoryArgs> = (args): React.ReactElement => (
+export const Segment = (args: StoryArgs): React.ReactElement => (
     <RendererWithDebugUI question={segmentQuestion} />
 );
 
-export const Sinusoid: React.FC<StoryArgs> = (args): React.ReactElement => (
+export const Sinusoid = (args: StoryArgs): React.ReactElement => (
     <RendererWithDebugUI question={sinusoidQuestion} />
 );
 

package/src/widgets/__stories__/matcher.stories.tsx

@@ -9,6 +9,6 @@ export default {
 
 type StoryArgs = Record<any, any>;
 
-export const Question1: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Question1 = (args: StoryArgs): React.ReactElement => {
     return <RendererWithDebugUI question={question1} />;
 };

package/src/widgets/__stories__/matrix.stories.tsx

@@ -9,6 +9,6 @@ export default {
 
 type StoryArgs = Record<any, any>;
 
-export const Question1: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Question1 = (args: StoryArgs): React.ReactElement => {
     return <RendererWithDebugUI question={question1} />;
 };

package/src/widgets/__stories__/number-line.stories.tsx

@@ -9,6 +9,6 @@ export default {
 
 type StoryArgs = Record<any, any>;
 
-export const Question1: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Question1 = (args: StoryArgs): React.ReactElement => {
     return <RendererWithDebugUI question={question1} />;
 };

package/src/widgets/__stories__/numeric-input.stories.tsx

@@ -62,13 +62,13 @@ export const Question1 = (): React.ReactElement => {
     return <RendererWithDebugUI question={question1} />;
 };
 
-export const Interactive: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Interactive = (args: StoryArgs): React.ReactElement => {
     const props = generateProps(args);
 
     return <NumericInput {...props} />;
 };
 
-export const Sizes: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Sizes = (args: StoryArgs): React.ReactElement => {
     const smallProps = generateProps({...args, size: "small"});
     const normalProps = generateProps({...args, size: "normal"});
 
@@ -86,9 +86,7 @@ export const Sizes: React.FC<StoryArgs> = (args): React.ReactElement => {
     );
 };
 
-export const TextAlignment: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const TextAlignment = (args: StoryArgs): React.ReactElement => {
     const leftProps = generateProps({...args, rightAlign: false});
     const rightProps = generateProps({...args, rightAlign: true});
 

package/src/widgets/__stories__/orderer.stories.tsx

@@ -9,6 +9,6 @@ export default {
 
 type StoryArgs = Record<any, any>;
 
-export const Question1: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Question1 = (args: StoryArgs): React.ReactElement => {
     return <RendererWithDebugUI question={question1} />;
 };

package/src/widgets/__stories__/passage-ref.stories.tsx

@@ -13,10 +13,10 @@ export default {
     title: "Perseus/Widgets/PassageRef",
 } as Story;
 
-export const ShortPassage: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const ShortPassage = (args: StoryArgs): React.ReactElement => {
     return <RendererWithDebugUI question={question1} />;
 };
 
-export const LongPassage: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const LongPassage = (args: StoryArgs): React.ReactElement => {
     return <RendererWithDebugUI question={question2} />;
 };

package/src/widgets/__stories__/passage.stories.tsx

@@ -13,20 +13,14 @@ export default {
 
 type StoryArgs = Record<any, any>;
 
-export const SimpleQuestion: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const SimpleQuestion = (args: StoryArgs): React.ReactElement => {
     return <RendererWithDebugUI question={question1} />;
 };
 
-export const MultiPassageQuestion: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const MultiPassageQuestion = (args: StoryArgs): React.ReactElement => {
     return <RendererWithDebugUI question={question2} />;
 };
 
-export const SingleNumberedPassage: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const SingleNumberedPassage = (args: StoryArgs): React.ReactElement => {
     return <RendererWithDebugUI question={question3} />;
 };

package/src/widgets/__stories__/radio.stories.tsx

@@ -55,7 +55,7 @@ const buildApiOptions = (args: StoryArgs): APIOptions => {
     };
 };
 
-export const SingleSelect: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const SingleSelect = (args: StoryArgs): React.ReactElement => {
     return (
         <RendererWithDebugUI
             question={applyStoryArgs(questionWithPassage, args)}
@@ -65,9 +65,7 @@ export const SingleSelect: React.FC<StoryArgs> = (args): React.ReactElement => {
     );
 };
 
-export const MultiSelectSimple: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const MultiSelectSimple = (args: StoryArgs): React.ReactElement => {
     return (
         <RendererWithDebugUI
             question={applyStoryArgs(multiChoiceQuestionSimple, args)}
@@ -77,7 +75,7 @@ export const MultiSelectSimple: React.FC<StoryArgs> = (
     );
 };
 
-export const MultiSelect: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const MultiSelect = (args: StoryArgs): React.ReactElement => {
     return (
         <RendererWithDebugUI
             question={applyStoryArgs(multiChoiceQuestion, args)}

package/src/widgets/__stories__/sorter.stories.tsx

@@ -9,6 +9,6 @@ export default {
 
 type StoryArgs = Record<any, any>;
 
-export const Question1: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Question1 = (args: StoryArgs): React.ReactElement => {
     return <RendererWithDebugUI question={question1} />;
 };

package/src/widgets/__stories__/test-keypad-context-wrapper.tsx

@@ -21,13 +21,11 @@ const Footer = (): React.ReactElement => {
     );
 };
 
-type TestKeypadContextWrapperProps = {
+type Props = {
     children: React.ReactElement;
 };
 
-const TestKeypadContextWrapper = (
-    props: TestKeypadContextWrapperProps,
-): React.ReactElement => {
+const TestKeypadContextWrapper = (props: Props): React.ReactElement => {
     const [keypadElement, setKeypadElement] = React.useState(null);
     const [renderer, setRenderer] = React.useState(null);
     const [scrollableElement, setScrollableElement] = React.useState(

package/src/widgets/__stories__/transformer.stories.tsx

@@ -9,6 +9,6 @@ export default {
 
 type StoryArgs = Record<any, any>;
 
-export const Question: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Question = (args: StoryArgs): React.ReactElement => {
     return <RendererWithDebugUI question={question} />;
 };

package/src/widgets/__stories__/unit.stories.tsx

@@ -13,9 +13,7 @@ export default {
     title: "Perseus/Widgets/Unit",
 } as Story;
 
-export const NonStaticRender: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const NonStaticRender = (args: StoryArgs): React.ReactElement => {
     return (
         <OldUnitInput
             apiOptions={{

package/src/widgets/__stories__/video-transcript-link.stories.tsx

@@ -12,16 +12,12 @@ export default {
     title: "Perseus/Components/Video Transcript Link",
 } as Story;
 
-export const YoutubeVideoLink: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const YoutubeVideoLink = (args: StoryArgs): React.ReactElement => {
     return (
         <VideoTranscriptLink location="https://www.youtube.com/watch?v=YoutubeId" />
     );
 };
 
-export const SlugVideoLink: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const SlugVideoLink = (args: StoryArgs): React.ReactElement => {
     return <VideoTranscriptLink location="slug-video-id" />;
 };

package/src/widgets/__stories__/video.stories.tsx

@@ -9,6 +9,6 @@ export default {
 
 type StoryArgs = Record<any, any>;
 
-export const Question1: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Question1 = (args: StoryArgs): React.ReactElement => {
     return <RendererWithDebugUI question={question1} />;
 };

package/src/widgets/__testdata__/group.testdata.ts

@@ -93,7 +93,6 @@ export const question1: PerseusRenderer = {
                             ],
                             coefficient: false,
                             labelText: "value rounded to the nearest ten",
-                            multipleNumberInput: false,
                             rightAlign: false,
                             size: "normal",
                             static: false,
@@ -118,7 +117,6 @@ export const question1: PerseusRenderer = {
                             ],
                             coefficient: false,
                             labelText: "value rounded to the nearest hundred",
-                            multipleNumberInput: false,
                             rightAlign: false,
                             size: "normal",
                             static: false,

package/src/widgets/__tests__/group.test.tsx

@@ -279,7 +279,6 @@ describe("group widget", () => {
                   "coefficient": false,
                   "currentValue": "99",
                   "labelText": "value rounded to the nearest ten",
-                  "multipleNumberInput": false,
                   "rightAlign": false,
                   "size": "normal",
                   "static": false,
@@ -288,7 +287,6 @@ describe("group widget", () => {
                   "answerForms": [],
                   "coefficient": false,
                   "labelText": "value rounded to the nearest hundred",
-                  "multipleNumberInput": false,
                   "rightAlign": false,
                   "size": "normal",
                   "static": false,

package/src/widgets/__tests__/radio/focus-ring.test.tsx

@@ -10,7 +10,6 @@ describe("choice icon", () => {
     describe.each([[true], [false]])("multipleSelect: %s", (multipleSelect) => {
         it("renders with the correct border radius", () => {
             // Arrange/Act
-            // @ts-expect-error [FEI-5003] - TS2739 - Type '{ multipleSelect: any; }' is missing the following properties from type 'Props': visible, color
             render(<FocusRing multipleSelect={multipleSelect} />);
 
             const focusRing = screen.getByTestId("focus-ring");

package/src/widgets/expression.tsx

@@ -87,6 +87,9 @@ type OnInputErrorFunctionType = (
 
 // The new, MathQuill input expression widget
 export class Expression extends React.Component<Props, ExpressionState> {
+    _isMounted = false;
+    errorTimeout: null | number = null;
+
     //#region Previously a class extension
     /* Content creators input a list of answers which are matched from top to
      * bottom. The intent is that they can include spcific solutions which should
@@ -334,9 +337,6 @@ export class Expression extends React.Component<Props, ExpressionState> {
         this._isMounted = false;
     };
 
-    _isMounted = false;
-    errorTimeout: null | number = null;
-
     simpleValidate: (
         rubric: Rubric,
         onInputError: OnInputErrorFunctionType,

package/src/widgets/interaction/element-container.tsx

@@ -10,7 +10,7 @@ import {
     iconTrash,
 } from "../../icon-paths";
 
-type ElementContainerProps = {
+type Props = {
     children: React.ReactElement<any> | ReadonlyArray<React.ReactElement<any>>;
     initiallyVisible: boolean;
     onDelete?: () => void | null | undefined;
@@ -19,12 +19,11 @@ type ElementContainerProps = {
     title: string | React.ReactElement<any>;
 };
 
-class ElementContainer extends React.Component<
-    ElementContainerProps,
-    {
-        show: boolean;
-    }
-> {
+type State = {
+    show: boolean;
+};
+
+class ElementContainer extends React.Component<Props, State> {
     static defaultProps: {
         initiallyVisible: boolean;
         title: string;
@@ -33,7 +32,7 @@ class ElementContainer extends React.Component<
         title: "More",
     };
 
-    constructor(props: ElementContainerProps) {
+    constructor(props: Props) {
         super(props);
 
         this.state = {

package/src/widgets/label-image/__stories__/answer-choices.stories.tsx

@@ -87,12 +87,10 @@ class WithState extends React.Component<
     }
 }
 
-export const SingleSelect: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const SingleSelect = (args: StoryArgs): React.ReactElement => {
     return <WithState />;
 };
 
-export const MultipleSelect: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const MultipleSelect = (args: StoryArgs): React.ReactElement => {
     return <WithState multipleSelect={true} />;
 };

package/src/widgets/label-image/__stories__/marker.stories.tsx

@@ -31,7 +31,7 @@ const Wrapper = (props) => (
 // TODO(jeremy): There are a bunch of props that we have to pass to the Marker
 // that are not used by it, but required because we share a props type.
 
-export const Unfilled: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Unfilled = (args: StoryArgs): React.ReactElement => {
     const props = {
         answers: ["BMW", "Ferrari"],
         selected: [],
@@ -46,9 +46,7 @@ export const Unfilled: React.FC<StoryArgs> = (args): React.ReactElement => {
     return <Wrapper {...props} />;
 };
 
-export const UnfilledPulsate: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const UnfilledPulsate = (args: StoryArgs): React.ReactElement => {
     const props = {
         answers: ["BMW", "Ferrari"],
         selected: [],
@@ -63,9 +61,7 @@ export const UnfilledPulsate: React.FC<StoryArgs> = (
     return <Wrapper {...props} />;
 };
 
-export const UnfilledSelected: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const UnfilledSelected = (args: StoryArgs): React.ReactElement => {
     const props = {
         answers: ["BMW", "Ferrari"],
         selected: [],
@@ -80,7 +76,7 @@ export const UnfilledSelected: React.FC<StoryArgs> = (
     return <Wrapper {...props} />;
 };
 
-export const Filled: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Filled = (args: StoryArgs): React.ReactElement => {
     const props = {
         answers: ["BMW", "Ferrari"],
         selected: ["Fiat"],
@@ -95,9 +91,7 @@ export const Filled: React.FC<StoryArgs> = (args): React.ReactElement => {
     return <Wrapper {...props} />;
 };
 
-export const FilledSelected: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const FilledSelected = (args: StoryArgs): React.ReactElement => {
     const props = {
         answers: ["BMW", "Ferrari"],
         selected: ["Fiat"],
@@ -112,7 +106,7 @@ export const FilledSelected: React.FC<StoryArgs> = (
     return <Wrapper {...props} />;
 };
 
-export const Incorrect: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Incorrect = (args: StoryArgs): React.ReactElement => {
     const props = {
         answers: ["BMW", "Ferrari"],
         selected: ["Fiat"],
@@ -128,9 +122,7 @@ export const Incorrect: React.FC<StoryArgs> = (args): React.ReactElement => {
     return <Wrapper {...props} />;
 };
 
-export const IncorrectSelected: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const IncorrectSelected = (args: StoryArgs): React.ReactElement => {
     const props = {
         answers: ["BMW", "Ferrari"],
         selected: ["Fiat"],
@@ -146,7 +138,7 @@ export const IncorrectSelected: React.FC<StoryArgs> = (
     return <Wrapper {...props} />;
 };
 
-export const Correct: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Correct = (args: StoryArgs): React.ReactElement => {
     const props = {
         answers: ["BMW", "Ferrari"],
         selected: ["BMW", "Ferrari"],
@@ -162,9 +154,7 @@ export const Correct: React.FC<StoryArgs> = (args): React.ReactElement => {
     return <Wrapper {...props} />;
 };
 
-export const CorrectSelected: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const CorrectSelected = (args: StoryArgs): React.ReactElement => {
     const props = {
         answers: ["BMW", "Ferrari"],
         selected: ["BMW", "Ferrari"],

package/src/widgets/label-image/marker.tsx

@@ -13,7 +13,7 @@ import {iconCheck, iconMinus} from "../../icon-paths";
 
 import type {InteractiveMarkerType} from "./types";
 
-type MarkerProps = InteractiveMarkerType & {
+type Props = InteractiveMarkerType & {
     // Whether this marker has been selected by user.
     showSelected: boolean;
     // Whether this marker should pulsate to draw user attention.
@@ -23,12 +23,12 @@ type MarkerProps = InteractiveMarkerType & {
     onKeyDown: (e: KeyboardEvent) => void;
 };
 
-type MarkerState = {
+type State = {
     // Whether the marker button has input focus.
     isFocused: boolean;
 };
 
-export default class Marker extends React.Component<MarkerProps, MarkerState> {
+export default class Marker extends React.Component<Props, State> {
     // The marker icon element.
     _icon: HTMLElement | null | undefined;
 
@@ -38,7 +38,7 @@ export default class Marker extends React.Component<MarkerProps, MarkerState> {
         selected: [],
     };
 
-    state: MarkerState = {
+    state: State = {
         isFocused: false,
     };
 

package/src/widgets/numeric-input.tsx

@@ -76,7 +76,6 @@ type Props = ExternalProps & {
     answerForms: NonNullable<ExternalProps["answerForms"]>;
     labelText: NonNullable<ExternalProps["labelText"]>;
     linterContext: NonNullable<ExternalProps["linterContext"]>;
-    multipleNumberInput: NonNullable<ExternalProps["multipleNumberInput"]>;
     currentValue: string;
 };
 
@@ -89,7 +88,6 @@ type DefaultProps = {
     answerForms: Props["answerForms"];
     labelText: Props["labelText"];
     linterContext: Props["linterContext"];
-    multipleNumberInput: Props["multipleNumberInput"];
 };
 
 type State = {
@@ -110,7 +108,6 @@ export class NumericInput extends React.Component<Props, State> {
         answerForms: [],
         labelText: "",
         linterContext: linterContextDefault,
-        multipleNumberInput: false,
     };
 
     static getUserInputFromProps(props: Props): UserInput {

package/src/widgets/passage/passage-markdown.tsx

@@ -48,7 +48,7 @@ type HighlightNode = {
     content: string;
 };
 
-type RefStartProps = {
+type Props = {
     refContent: React.ReactNode;
 };
 
@@ -63,7 +63,7 @@ function getInitialParseState(): ParseState {
     };
 }
 
-class RefStart extends React.Component<RefStartProps> {
+class RefStart extends React.Component<Props> {
     render(): React.ReactNode {
         return <span style={REF_STYLE}>{i18n.doNotTranslate("_")}</span>;
     }

package/src/widgets/radio/__stories__/base-radio.stories.tsx

@@ -60,27 +60,27 @@ const defaultProps = {
     isLastUsedWidget: false,
 } as const;
 
-export const Interactive: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Interactive = (args: StoryArgs): React.ReactElement => {
     const overwrittenProps = {...defaultProps, ...args} as const;
     return <BaseRadio {...overwrittenProps} />;
 };
 
-export const SingleSelectWithNothingSelected: React.FC<StoryArgs> = (
-    args,
+export const SingleSelectWithNothingSelected = (
+    args: StoryArgs,
 ): React.ReactElement => {
     const overwrittenProps = {...defaultProps, multipleSelect: false} as const;
     return <BaseRadio {...overwrittenProps} />;
 };
 
-export const MultipleSelectWithNothingSelected: React.FC<StoryArgs> = (
-    args,
+export const MultipleSelectWithNothingSelected = (
+    args: StoryArgs,
 ): React.ReactElement => {
     const overwrittenProps = {...defaultProps, multipleSelect: true} as const;
     return <BaseRadio {...overwrittenProps} />;
 };
 
-export const MultipleSelectWithCountChoicesLabel: React.FC<StoryArgs> = (
-    args,
+export const MultipleSelectWithCountChoicesLabel = (
+    args: StoryArgs,
 ): React.ReactElement => {
     const overwrittenProps = {
         ...defaultProps,
@@ -91,9 +91,7 @@ export const MultipleSelectWithCountChoicesLabel: React.FC<StoryArgs> = (
     return <BaseRadio {...overwrittenProps} />;
 };
 
-export const SingleSelected: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const SingleSelected = (args: StoryArgs): React.ReactElement => {
     const choices = Array(4)
         .fill(null)
         .map((_, i) => generateChoice({content: `Choice ${i + 1}`}));
@@ -107,9 +105,7 @@ export const SingleSelected: React.FC<StoryArgs> = (
     return <BaseRadio {...overwrittenProps} />;
 };
 
-export const MultipleSelected: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const MultipleSelected = (args: StoryArgs): React.ReactElement => {
     const choices = Array(4)
         .fill(null)
         .map((_, i) => generateChoice({content: `Choice ${i + 1}`}));
@@ -124,9 +120,7 @@ export const MultipleSelected: React.FC<StoryArgs> = (
     return <BaseRadio {...overwrittenProps} />;
 };
 
-export const SingleKitchenSink: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const SingleKitchenSink = (args: StoryArgs): React.ReactElement => {
     const choices = Array(4)
         .fill(null)
         .map((_, i) => {
@@ -162,9 +156,7 @@ export const SingleKitchenSink: React.FC<StoryArgs> = (
     return <BaseRadio {...overwrittenProps} />;
 };
 
-export const MultipleKitchenSink: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const MultipleKitchenSink = (args: StoryArgs): React.ReactElement => {
     const choices = Array(4)
         .fill(null)
         .map((_, i) => {