@khanacademy/perseus 4.0.1 → 5.0.0

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/label-image.tsx

@@ -11,7 +11,7 @@ import {Popover, PopoverContentCore} from "@khanacademy/wonder-blocks-popover";
 import {StyleSheet, css} from "aphrodite";
 import classNames from "classnames";
 import * as React from "react";
-import ReactDOM from "react-dom";
+import * as ReactDOM from "react-dom";
 
 import AssetContext from "../asset-context";
 import SvgImage from "../components/svg-image";

package/src/widgets/measurer.tsx

@@ -79,7 +79,6 @@ const Measurer: any = createReactClass({
                             left: image.left,
                         }}
                     >
-                        {/* $FlowFixMe[prop-missing]: alt prop is missing */}
                         {/* @ts-expect-error [FEI-5003] - TS2741 - Property 'alt' is missing in type '{ src: any; }' but required in type 'Pick<Readonly<Props> & Readonly<{ children?: ReactNode; }>, "children" | "height" | "width" | "title" | "alt" | "trackInteraction" | "preloader" | "allowFullBleed" | "extraGraphie" | "overrideAriaHidden">'. */}
                         <SvgImage src={image.url} />
                     </div>

package/src/widgets/number-line.tsx

@@ -160,7 +160,6 @@ const TickMarks: any = Graphie.createSimpleClass((graphie, props) => {
                       color: KhanColors.BLUE_D,
                   }
                 : {},
-            // $FlowFixMe[incompatible-call]
             () => _label(graphie, props.labelStyle, leftLabel, leftLabel, base),
         ),
     );
@@ -173,7 +172,6 @@ const TickMarks: any = Graphie.createSimpleClass((graphie, props) => {
                   }
                 : {},
             () =>
-                // $FlowFixMe[incompatible-call]
                 _label(graphie, props.labelStyle, rightLabel, rightLabel, base),
         ),
     );

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/orderer.tsx

@@ -502,10 +502,7 @@ class Orderer extends React.Component<OrdererProps, OrdererState> {
             current: list,
             dragging: true,
             placeholderIndex: placeholderIndex,
-            // $FlowFixMe[prop-missing]
-            // $FlowFixMe[incompatible-use]
             dragKey: opt.key,
-            // $FlowFixMe[incompatible-use]
             dragContent: opt.content,
             // @ts-expect-error [FEI-5003] - TS2339 - Property 'width' does not exist on type 'JQueryStatic'.
             dragWidth: $draggable.width(),

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>;
     }
@@ -150,7 +150,7 @@ const rules = {
 
                 // A "magic" capture that matches the opening {{
                 // but captures the full ref text internally :D
-                // unfortunately the "magic" makes Flow upset,
+                // unfortunately the "magic" makes TypeScript upset,
                 // so there's this questionable workaround
                 capture[1] = source.slice(2, closeIndex);
                 return capture;

package/src/widgets/passage-ref-target.tsx

@@ -47,7 +47,6 @@ class PassageRefTarget extends React.Component<any> {
 
     render(): React.ReactNode {
         return (
-            // $FlowFixMe[prop-missing]: inline doesn't exist in Renderer's declared props
             <Renderer
                 content={this.props.content}
                 // @ts-expect-error [FEI-5003] - TS2322 - Type '{ content: any; inline: boolean; apiOptions: any; linterContext: any; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Renderer> & Pick<Readonly<Props> & Readonly<{ children?: ReactNode; }>, "children" | ... 3 more ... | "legacyPerseusLint"> & InexactPartial<...> & InexactPartial<...>'.

package/src/widgets/passage.tsx

@@ -3,7 +3,7 @@ import * as i18n from "@khanacademy/wonder-blocks-i18n";
 import {StyleSheet, css} from "aphrodite";
 import $ from "jquery";
 import * as React from "react";
-import ReactDOM from "react-dom";
+import * as ReactDOM from "react-dom";
 import _ from "underscore";
 
 import HighlightableContent from "../components/highlighting/highlightable-content";

package/src/widgets/plotter.tsx

@@ -927,7 +927,6 @@ class Plotter extends React.Component<any, any> {
             if (i > 0) {
                 c.graph.lines[i] = Interactive2.addMovableLine(graphie, {
                     points: [c.graph.points[i - 1], c.graph.points[i]],
-                    // $FlowFixMe[prop-missing]
                     // @ts-expect-error [FEI-5003] - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
                     constraints: Interactive2.MovablePoint.constraints.fixed(),
                     normalStyle: {

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) => {
@@ -146,7 +140,7 @@ export const SingleKitchenSink: React.FC<StoryArgs> = (
 
     const rubricChoices = choices.map(({correct}) => ({
         // note(matthew): reviewModeRubric.choices requires content,
-        // but I don't see how it's getting used and Flow gets mad
+        // but I don't see how it's getting used and TypeScript gets mad
         // when I use choice.content because it's not a string.
         // reviewModeRubric could probably use a look over.
         content: "",
@@ -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) => {
@@ -186,7 +178,7 @@ export const MultipleKitchenSink: React.FC<StoryArgs> = (
 
     const rubricChoices = choices.map((c) => ({
         // note(matthew): reviewModeRubric.choices requires content,
-        // but I don't see how it's getting used and Flow gets mad
+        // but I don't see how it's getting used and TypeScript gets mad
         // when I use choice.content because it's not a string.
         // reviewModeRubric could probably use a look over.
         content: "",

package/src/widgets/radio/__stories__/choice-icon.stories.tsx

@@ -40,13 +40,11 @@ export default {
     args: defaultProps,
 };
 
-const Panel: React.FC<{
-    children: React.ReactNode;
-}> = (props): React.ReactElement => {
+const Panel = (props: {children: React.ReactNode}): React.ReactElement => {
     return <div style={{padding: "10px"}}>{props.children}</div>;
 };
 
-export const Interactive: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Interactive = (args: StoryArgs): React.ReactElement => {
     return (
         <Panel>
             <ChoiceIcon {...args} />
@@ -54,7 +52,7 @@ export const Interactive: React.FC<StoryArgs> = (args): React.ReactElement => {
     );
 };
 
-export const Default: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Default = (args: StoryArgs): React.ReactElement => {
     return (
         <Panel>
             <ChoiceIcon {...defaultProps} />
@@ -63,7 +61,7 @@ export const Default: React.FC<StoryArgs> = (args): React.ReactElement => {
     );
 };
 
-export const Focused: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Focused = (args: StoryArgs): React.ReactElement => {
     return (
         <Panel>
             <ChoiceIcon {...defaultProps} focused={true} />
@@ -76,7 +74,7 @@ export const Focused: React.FC<StoryArgs> = (args): React.ReactElement => {
     );
 };
 
-export const Checked: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Checked = (args: StoryArgs): React.ReactElement => {
     return (
         <Panel>
             <ChoiceIcon {...defaultProps} checked={true} />
@@ -89,7 +87,7 @@ export const Checked: React.FC<StoryArgs> = (args): React.ReactElement => {
     );
 };
 
-export const CrossedOut: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const CrossedOut = (args: StoryArgs): React.ReactElement => {
     return (
         <Panel>
             <ChoiceIcon {...defaultProps} crossedOut={true} />
@@ -102,7 +100,7 @@ export const CrossedOut: React.FC<StoryArgs> = (args): React.ReactElement => {
     );
 };
 
-export const Correct: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Correct = (args: StoryArgs): React.ReactElement => {
     return (
         <Panel>
             <ChoiceIcon
@@ -124,7 +122,7 @@ export const Correct: React.FC<StoryArgs> = (args): React.ReactElement => {
     );
 };
 
-export const Incorrect: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Incorrect = (args: StoryArgs): React.ReactElement => {
     return (
         <Panel>
             <ChoiceIcon
@@ -146,7 +144,7 @@ export const Incorrect: React.FC<StoryArgs> = (args): React.ReactElement => {
     );
 };
 
-export const AllPositions: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const AllPositions = (args: StoryArgs): React.ReactElement => {
     // @ts-expect-error [FEI-5003] - TS2554 - Expected 1-3 arguments, but got 0.
     const allLetters = Array(26).fill();
     return (

package/src/widgets/radio/__stories__/choice-none-above.stories.tsx

@@ -34,7 +34,7 @@ const ChoiceDefaults = {
     onChange: action("changed"),
 } as const;
 
-export const Example: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Example = (args: StoryArgs): React.ReactElement => {
     const combineProps = {...ChoiceDefaults, ...args} as const;
     return <ChoiceNoneAbove {...combineProps} />;
 };

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

@@ -45,11 +45,11 @@ export default {
     args: defaultProps,
 } as Story;
 
-export const Interactive: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Interactive = (args: StoryArgs): React.ReactElement => {
     return <Choice {...args} />;
 };
 
-export const Checked: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Checked = (args: StoryArgs): React.ReactElement => {
     const sharedProps = {
         ...defaultProps,
         checked: true,
@@ -73,7 +73,7 @@ export const Checked: React.FC<StoryArgs> = (args): React.ReactElement => {
     );
 };
 
-export const ReviewMode: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const ReviewMode = (args: StoryArgs): React.ReactElement => {
     const sharedProps = {
         ...defaultProps,
         showCorrectness: true,
@@ -108,7 +108,7 @@ export const ReviewMode: React.FC<StoryArgs> = (args): React.ReactElement => {
     );
 };
 
-export const Rationale: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Rationale = (args: StoryArgs): React.ReactElement => {
     const sharedProps = {
         ...defaultProps,
         checked: true,

package/src/widgets/radio/__stories__/focus-ring.stories.tsx

@@ -25,7 +25,7 @@ export default {
     },
 } as Story;
 
-export const Interactive: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Interactive = (args: StoryArgs): React.ReactElement => {
     // faux choice is just for demonstration
     const fauxChoiceStyles = {
         height: "20px",

package/src/widgets/radio/__stories__/option-status.stories.tsx

@@ -26,13 +26,11 @@ export default {
     },
 } as Story;
 
-export const Interactive: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Interactive = (args: StoryArgs): React.ReactElement => {
     return <OptionStatus {...args} />;
 };
 
-export const AllPossibleOutputs: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const AllPossibleOutputs = (args: StoryArgs): React.ReactElement => {
     return (
         <>
             <div>

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

@@ -86,7 +86,7 @@ function getInstructionsText(
     return i18n._("Choose 1 answer:");
 }
 
-const BaseRadio: React.FC<Props> = function (props): React.ReactElement {
+const BaseRadio = function (props: Props): React.ReactElement {
     const {
         apiOptions,
         reviewModeRubric,
@@ -325,7 +325,7 @@ const BaseRadio: React.FC<Props> = function (props): React.ReactElement {
 
                     let correctnessClass;
                     // reviewMode is only true if there's a rubric
-                    // but Flow doesn't understand that
+                    // but TypeScript doesn't understand that
                     if (reviewMode && reviewModeRubric) {
                         correctnessClass = reviewModeRubric.choices[i].correct
                             ? ApiClassNames.CORRECT

package/src/widgets/radio/choice-icon/choice-icon.tsx

@@ -27,11 +27,13 @@ type ChoiceIconProps = {
     previouslyAnswered: boolean;
 };
 
-function ChoiceInner(props: {
+type ChoiceInnerProps = {
     pos: number;
     showCorrectness: boolean;
     correct: boolean | null | undefined;
-}) {
+};
+
+function ChoiceInner(props: ChoiceInnerProps) {
     const {pos, showCorrectness, correct} = props;
     const letter = getChoiceLetter(pos);
 
@@ -96,9 +98,7 @@ function getDynamicStyles(
     return {backgroundColor, borderColor, color, borderRadius};
 }
 
-const ChoiceIcon: React.FC<ChoiceIconProps> = function (
-    props,
-): React.ReactElement {
+const ChoiceIcon = function (props: ChoiceIconProps): React.ReactElement {
     const {
         checked,
         crossedOut,

package/src/widgets/radio/choice-icon/cross-out-line.tsx

@@ -14,9 +14,7 @@ const CROSS_OUT_LINE_SIZE = CHOICE_ICON_SIZE + CROSS_OUT_LINE_PADDING * 2;
  * The "cross-out line" that appears over the icon when the choice has been
  * `crossedOut`.
  */
-const CrossOutLine: React.FC<{
-    color: string;
-}> = function (props): React.ReactElement {
+const CrossOutLine = function (props: {color: string}): React.ReactElement {
     return (
         <svg
             width={CROSS_OUT_LINE_SIZE}

package/src/widgets/radio/choice-none-above.tsx

@@ -17,8 +17,8 @@ type WithForwardRef = {
 
 type PropsWithForwardRef = Props & WithForwardRef;
 
-const ChoiceNoneAbove: React.FC<PropsWithForwardRef> = function (
-    props,
+const ChoiceNoneAbove = function (
+    props: PropsWithForwardRef,
 ): React.ReactElement {
     const {showContent, content, forwardedRef, ...rest} = props;
 

package/src/widgets/radio/choice.tsx

@@ -78,9 +78,7 @@ function uniqueId() {
     return `choice-${id++}`;
 }
 
-const Choice: React.FC<ChoicePropsWithForwardRef> = function (
-    props,
-): React.ReactElement {
+const Choice = function (props: ChoicePropsWithForwardRef): React.ReactElement {
     const {
         disabled = false,
         checked = false,

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

@@ -18,7 +18,7 @@ type Props = {
     multipleSelect: boolean;
 };
 
-const FocusRing: React.FC<Props> = function (props): React.ReactElement {
+const FocusRing = function (props: Props): React.ReactElement {
     const {visible, color, children, multipleSelect} = props;
 
     const borderColor = visible ? color : "transparent";

package/src/widgets/radio/option-status.tsx

@@ -11,7 +11,7 @@ import * as i18n from "@khanacademy/wonder-blocks-i18n";
 import {StyleSheet, css} from "aphrodite";
 import * as React from "react";
 
-type OptionStatusProps = {
+type Props = {
     // Was this option the correct answer?
     correct: boolean;
     // Did the user select this option as the answer?
@@ -47,9 +47,7 @@ function renderText(
     return i18n._("Incorrect");
 }
 
-const OptionStatus: React.FC<OptionStatusProps> = function (
-    props,
-): React.ReactElement {
+const OptionStatus = function (props: Props): React.ReactElement {
     const {checked, correct, crossedOut, previouslyAnswered, reviewMode} =
         props;
 

package/src/widgets/radio/widget.tsx

@@ -502,7 +502,6 @@ class Radio extends React.Component<Props> {
         return (
             <BaseRadio
                 labelWrap={true}
-                // @ts-expect-error [FEI-5003] - TS2322 - Type 'boolean | undefined' is not assignable to type 'boolean'.
                 multipleSelect={this.props.multipleSelect}
                 countChoices={this.props.countChoices}
                 numCorrect={this.props.numCorrect}

package/src/widgets/reaction-diagram.tsx

@@ -7,6 +7,8 @@ import {Molecule} from "./molecule";
 import type {WidgetExports} from "../types";
 
 class Separator extends React.Component<any> {
+    arrowLength = 100;
+
     static propTypes = {
         // TODO(colin): figure out and add shape.
         data: PropTypes.any,
@@ -21,8 +23,6 @@ class Separator extends React.Component<any> {
         this.drawArrow();
     }
 
-    arrowLength = 100;
-
     drawArrow = () => {
         // eslint-disable-next-line react/no-string-refs
         const canvas = this.refs["arrowCanvas" + this.props.index];