@khanacademy/perseus-editor 2.0.1 → 2.0.3

package/src/multirenderer-editor.tsx

@@ -70,7 +70,7 @@ class ModeDropdown extends React.Component<ModeDropdownProps> {
     _handleSelectMode = (event: React.ChangeEvent<HTMLSelectElement>) => {
         if (this.props.onChange) {
             // event.target.value corresponds to the options' values below which
-            // are limited to EditorMode, but flow doesn't know that so we have
+            // are limited to EditorMode, but TypeScript doesn't know that so we have
             // to cast through any here.
             const value = event.target.value as EditorMode;
             this.props.onChange(value);
@@ -141,13 +141,9 @@ type HeaderProps = {
     depth: number;
 };
 
-const Header: React.FC<HeaderProps> = ({
-    depth,
-    ...props
-}): React.ReactElement => {
+const Header = ({depth, ...props}: HeaderProps): React.ReactElement => {
     const headerLevel = Math.min(depth, 5) + 1;
     const HeaderTag = `h${headerLevel}`;
-    // @ts-expect-error [FEI-5003] - TS2559 - Type '{ children?: ReactNode; }' has no properties in common with type 'IntrinsicAttributes'.
     return <HeaderTag {...props} />;
 };
 
@@ -268,13 +264,13 @@ type LeafContainerProps = {
     path: Path;
     shape: Shape;
 };
-const LeafContainer: React.FC<LeafContainerProps> = ({
+const LeafContainer = ({
     name,
     controls,
     children,
     path,
     shape,
-}): React.ReactElement => {
+}: LeafContainerProps): React.ReactElement => {
     const hasPreviewHeading = shape.type === "content" || shape.type === "hint";
     const previewHeading = hasPreviewHeading && (
         <div className={css(styles.containerHeader)}>
@@ -314,9 +310,7 @@ type ArrayContainerProps = {
     shape: ArrayShape;
     actions: ArrayContainerActions;
 };
-const ArrayContainer: React.FC<ArrayContainerProps> = (
-    props,
-): React.ReactElement => {
+const ArrayContainer = (props: ArrayContainerProps): React.ReactElement => {
     const {name, controls, children, path, shape, actions} = props;
     return (
         <div className={css(styles.container)}>
@@ -347,12 +341,12 @@ type ObjectContainerProps = {
     children?: React.ReactNode;
     path: Path;
 };
-const ObjectContainer: React.FC<ObjectContainerProps> = ({
+const ObjectContainer = ({
     name,
     controls,
     children,
     path,
-}): React.ReactElement => {
+}: ObjectContainerProps): React.ReactElement => {
     const headingEditor = (
         <div className={css(styles.containerHeader)}>
             {/* @ts-expect-error [FEI-5003] - TS2322 - Type '{ children: string; depth: number; className: string; }' is not assignable to type 'IntrinsicAttributes & HeaderProps & { children?: ReactNode; }'. */}
@@ -409,7 +403,7 @@ const NodeContent = (props: NodePropTypes) => {
 
     // All uses of `data` have been cast through any which isn't safe. This was
     // done to avoid introducing new logic which may have resulted in a change
-    // of behavior.  Also, there doesn't appear to be a way to tell flow the
+    // of behavior.  Also, there doesn't appear to be a way to tell TypeScript the
     // difference between and `TagsNode` and `ItemArrayNode`, see
     // perseus-all-package/multi-items/item-types.js.
     if (shape.type === "content") {
@@ -520,12 +514,6 @@ const withStickiness = <
 
         render(): React.ReactNode {
             return (
-                /**
-                 * $FlowFixMe[incompatible-exact]
-                 * TODO(somewhatabstract, JIRA-XXXX):
-                 * Cannot create WrappedComponent element because inexact props
-                 * [1] is incompatible with exact WithStickiness [2].
-                 */
                 // @ts-expect-error [FEI-5003] - TS2322 - Type 'Readonly<Config> & { sticky: boolean; children?: ReactNode; }' is not assignable to type 'IntrinsicAttributes & LibraryManagedAttributes<Component, PropsWithChildren<WithStickiness<Config>>>'.
                 <WrappedComponent {...this.props} sticky={this.state.sticky} />
             );
@@ -548,9 +536,6 @@ const ItemNodeContent = withStickiness(
                         <div className={css(sticky && styles.sticky)}>
                             {/* TODO(CP-4852): only pass the props to Editor that it uses. */}
                             {
-                                // $FlowFixMe[incompatible-exact]: {...data} pass too many props
-                                // $FlowFixMe[incompatible-type]
-                                // $FlowFixMe[prop-missing]
                                 // @ts-expect-error [FEI-5003] - TS2769 - No overload matches this call.
                                 <Editor
                                     {...data}
@@ -585,13 +570,6 @@ const HintNodeContent = withStickiness(
             <div className={css(styles.row)}>
                 <div className={css(styles.columnLeft)}>
                     <div className={css(sticky && styles.sticky)}>
-                        {/**
-                         * $FlowFixMe[incompatible-exact]
-                         * TODO(somewhatabstract, JIRA-XXXX):
-                         * Cannot create WrappedComponent element because
-                         * inexact props [1] is incompatible with exact
-                         * WithStickiness [2].
-                         */}
                         <HintEditor
                             {...data}
                             className={css(styles.hintEditor)}
@@ -673,8 +651,6 @@ const ArrayNodeContent = (props: NodePropTypes<ArrayShape, ItemArrayNode>) => {
                     </SimpleButton>
                 </div>
             ),
-            // $FlowFixMe[unsafe-addition]
-            // $FlowFixMe[prop-missing]
             i < data.length - 1 && (
                 <div key="moveArrayElementDown" className={css(styles.control)}>
                     <SimpleButton

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

@@ -85,9 +85,6 @@ class WithState extends React.Component<Empty, State> {
                             ...props,
                         })
                     }
-                    // TODO(mdr): We found a new Flow error when upgrading:
-                    //     "widget (null) This type is incompatible with this._widget (LabelImageEditor)"
-                    // $FlowFixMe[incompatible-type](0.52.0->0.53.0)
                     // @ts-expect-error [FEI-5003] - TS2322 - Type 'LabelImageEditor | null' is not assignable to type 'LabelImageEditor'.
                     ref={(widget) => (this._widget = widget)}
                 />
@@ -96,6 +93,6 @@ class WithState extends React.Component<Empty, State> {
     }
 }
 
-export const Default: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Default = (args: StoryArgs): React.ReactElement => {
     return <WithState />;
 };

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

@@ -102,7 +102,6 @@ class WithState extends React.Component<Empty, PerseusRadioWidgetOptions> {
                             ...props,
                         })
                     }
-                    // $FlowFixMe[incompatible-type] - can be null
                     // @ts-expect-error [FEI-5003] - TS2322 - Type 'RadioEditor | null' is not assignable to type 'RadioEditor'.
                     ref={(widget) => (this._widget = widget)}
                 />
@@ -111,6 +110,6 @@ class WithState extends React.Component<Empty, PerseusRadioWidgetOptions> {
     }
 }
 
-export const Default: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Default = (args: StoryArgs): React.ReactElement => {
     return <WithState />;
 };

package/src/widgets/categorizer-editor.tsx

@@ -84,7 +84,6 @@ class CategorizerEditor extends React.Component<Props> {
                 {/* There are a bunch of props that renderer.jsx passes to each widget
                     via widget-container.jsx that we aren't passing to Categorizer here.
                     See perseus-all-package/types.js#WidgetProps for details. */}
-                {/* $FlowFixMe[prop-missing] */}
                 {/* @ts-expect-error [FEI-5003] - TS2769 - No overload matches this call. */}
                 <Categorizer
                     apiOptions={this.props.apiOptions}

package/src/widgets/cs-program-editor.tsx

@@ -53,7 +53,6 @@ class PairEditor extends React.Component<any> {
                     Name:{" "}
                     <BlurInput
                         value={this.props.name}
-                        // $FlowFixMe[incompatible-type] single-param call returns a callback
                         onChange={this.change("name")}
                     />
                 </label>
@@ -62,7 +61,6 @@ class PairEditor extends React.Component<any> {
                     Value:{" "}
                     <BlurInput
                         value={this.props.value}
-                        // $FlowFixMe[incompatible-type] single-param call returns a callback
                         onChange={this.change("value")}
                     />
                 </label>

package/src/widgets/expression-editor.tsx

@@ -223,8 +223,6 @@ class ExpressionEditor extends React.Component<any, any> {
                         className="math-input-buttons"
                         sets={this.props.buttonSets}
                         convertDotToTimes={this.props.times}
-                        // onInsert is typed as `(string | ((input: $FlowFixMe) => void)) => void`
-                        // $FlowFixMe[incompatible-type]
                         onInsert={this.handleTexInsert}
                     />
                 )}

package/src/widgets/grapher-editor.tsx

@@ -68,7 +68,6 @@ class GrapherEditor extends React.Component<Props> {
                 // NOTE(jeremy): This editor doesn't pass in a bunch of
                 // standard props that the Renderer provides normally (eg.
                 // alignment, findWidgets, etc).
-                // $FlowFixMe[prop-missing]
                 // @ts-expect-error [FEI-5003] - TS2769 - No overload matches this call.
                 <Grapher
                     {...graphProps}

package/src/widgets/iframe-editor.tsx

@@ -36,7 +36,6 @@ class PairEditor extends React.Component<PairEditorProps> {
                     Name:
                     <BlurInput
                         value={this.props.name}
-                        // $FlowFixMe[incompatible-type] single-param call returns a callback
                         onChange={this.change("name")}
                     />
                 </label>
@@ -44,7 +43,6 @@ class PairEditor extends React.Component<PairEditorProps> {
                     Value:
                     <BlurInput
                         value={this.props.value}
-                        // $FlowFixMe[incompatible-type] single-param call returns a callback
                         onChange={this.change("value")}
                     />
                 </label>

package/src/widgets/input-number-editor.tsx

@@ -204,7 +204,6 @@ class InputNumberEditor extends React.Component<Props> {
                             onBlur={(e) => {
                                 const ans =
                                     "" +
-                                    // $FlowFixMe[incompatible-type]
                                     (Util.firstNumericalParse(e.target.value) ||
                                         0);
                                 e.target.value = ans;

package/src/widgets/interaction-editor.tsx

@@ -964,7 +964,6 @@ class InteractionEditor extends React.Component<
                         markings={this.props.graph.markings}
                         onChange={this._updateGraphProps}
                     />
-                    {/* $FlowFixMe[incompatible-type] */}
                     {this.props.graph.valid !== true && (
                         <div>{this.props.graph.valid}</div>
                     )}

package/src/widgets/interactive-graph-editor.tsx

@@ -122,7 +122,6 @@ const InteractiveGraphEditor: any = createReactClass({
                 // There are a bunch of props that renderer.jsx passes to widgets via
                 // getWidgetProps() and widget-container.jsx that the editors don't
                 // bother passing.
-                // $FlowFixMe[prop-missing]
                 // @ts-expect-error [FEI-5003] - TS2769 - No overload matches this call.
                 <InteractiveGraph
                     {...graphProps}

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

@@ -57,16 +57,12 @@ class WithState extends React.Component<
     }
 }
 
-export const EmptyNonInteractive: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const EmptyNonInteractive = (args: StoryArgs): React.ReactElement => {
     const props = {choices: [], onChange: (...args) => {}} as const;
     return <Wrapper {...props} />;
 };
 
-export const FilledNonInteractive: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const FilledNonInteractive = (args: StoryArgs): React.ReactElement => {
     const props = {
         choices: [
             "Lamborghini",
@@ -81,6 +77,6 @@ export const FilledNonInteractive: React.FC<StoryArgs> = (
     return <Wrapper {...props} />;
 };
 
-export const Interactive: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Interactive = (args: StoryArgs): React.ReactElement => {
     return <WithState />;
 };

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

@@ -13,7 +13,7 @@ export default {
     title: "Perseus/Editor/Widgets/Label Image/Behavior",
 } as Story;
 
-export const Default: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Default = (args: StoryArgs): React.ReactElement => {
     const [state, setState] = React.useState({
         multipleAnswers: false,
         hideChoicesFromInstructions: false,

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

@@ -33,7 +33,7 @@ const Wrapper = (props) => (
     </div>
 );
 
-export const Empty: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Empty = (args: StoryArgs): React.ReactElement => {
     const props = {
         answers: [],
         choices: [],
@@ -50,7 +50,7 @@ export const Empty: React.FC<StoryArgs> = (args): React.ReactElement => {
     return <Wrapper {...props} />;
 };
 
-export const WithAnswers: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const WithAnswers = (args: StoryArgs): React.ReactElement => {
     const props = {
         answers: ["BMW", "Ferrari"],
         choices: [

package/src/widgets/label-image/__stories__/question-markers.stories.tsx

@@ -70,7 +70,7 @@ class WithState extends React.Component<
     }
 }
 
-export const Empty: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Empty = (args: StoryArgs): React.ReactElement => {
     const props = {
         choices: [],
         imageUrl: "",
@@ -82,7 +82,7 @@ export const Empty: React.FC<StoryArgs> = (args): React.ReactElement => {
     return <Wrapper {...props} />;
 };
 
-export const Filled: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Filled = (args: StoryArgs): React.ReactElement => {
     const props = {
         choices: [],
         imageUrl:
@@ -102,6 +102,6 @@ export const Filled: React.FC<StoryArgs> = (args): React.ReactElement => {
     return <Wrapper {...props} />;
 };
 
-export const Interactive: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Interactive = (args: StoryArgs): React.ReactElement => {
     return <WithState />;
 };

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

@@ -36,7 +36,7 @@ const WithState = () => {
     );
 };
 
-export const Empty: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Empty = (args: StoryArgs): React.ReactElement => {
     const props = {
         url: "",
         onChange: () => {},
@@ -45,7 +45,7 @@ export const Empty: React.FC<StoryArgs> = (args): React.ReactElement => {
     return <Wrapper {...props} />;
 };
 
-export const Filled: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Filled = (args: StoryArgs): React.ReactElement => {
     const props = {
         url: "https://ka-perseus-images.s3.amazonaws.com/2ee5fc32e35c5178373b39fd304b325b2994c913.png",
         onChange: () => {},
@@ -54,6 +54,6 @@ export const Filled: React.FC<StoryArgs> = (args): React.ReactElement => {
     return <Wrapper {...props} />;
 };
 
-export const Interactive: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Interactive = (args: StoryArgs): React.ReactElement => {
     return <WithState />;
 };

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

@@ -89,7 +89,7 @@ const DraggableGripIcon = () => (
 /**
  * A button link to add a new answer.
  */
-const AddAnswer: React.FC<AddAnswerProps> = ({onClick}): React.ReactElement => (
+const AddAnswer = ({onClick}: AddAnswerProps): React.ReactElement => (
     <Link
         className={css(styles.addAnswer, editorStyles.addAnswer)}
         onClick={onClick}
@@ -105,11 +105,11 @@ const AddAnswer: React.FC<AddAnswerProps> = ({onClick}): React.ReactElement => (
  *
  * TODO(michaelpolyak): Implement answer reordering, CP-117
  */
-const Answer: React.FC<AnswerProps> = ({
+const Answer = ({
     answer,
     onChange,
     onRemove,
-}): React.ReactElement => (
+}: AnswerProps): React.ReactElement => (
     <li className={css(styles.answer)}>
         <Link onClick={onRemove}>
             <Icon icon={removeIcon} size={24} color="#D92916" />
@@ -137,10 +137,10 @@ const Answer: React.FC<AnswerProps> = ({
 /**
  * The list of choices, handles adding, removing and reording of answers.
  */
-const AnswerChoices: React.FC<AnswerChoicesProps> = ({
+const AnswerChoices = ({
     choices,
     onChange,
-}): React.ReactElement => (
+}: AnswerChoicesProps): React.ReactElement => (
     <div>
         <div className={css(styles.title)}>Answer Choices</div>
 

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

@@ -10,7 +10,7 @@ import Checkbox from "../../components/checkbox";
 
 const {colors, typography} = globalStyles;
 
-type BehaviorProps = {
+type Props = {
     // Whether multiple answer choices may be selected for markers.
     multipleAnswers: boolean;
     // Whether to hide answer choices from user instructions.
@@ -22,11 +22,11 @@ type BehaviorProps = {
     }) => void;
 };
 
-const Behavior: React.FC<BehaviorProps> = ({
+const Behavior = ({
     multipleAnswers,
     hideChoicesFromInstructions,
     onChange,
-}): React.ReactElement => (
+}: Props): React.ReactElement => (
     <div>
         <div className={css(styles.title)}>Behavior</div>
 

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

@@ -17,7 +17,7 @@ import type {MarkerType} from "@khanacademy/perseus";
 
 const {colors, borderRadius} = globalStyles;
 
-type MarkerProps = MarkerType & {
+type Props = MarkerType & {
     // The list of possible answer choices.
     choices: ReadonlyArray<string>;
     // Callback for when any of the marker props are changed.
@@ -26,16 +26,16 @@ type MarkerProps = MarkerType & {
     onRemove: () => void;
 };
 
-type MarkerState = {
+type State = {
     // Whether answer choices dropdown is shown, controlled by the user clicking
     // on the marker icon.
     showDropdown: boolean;
 };
 
-export default class Marker extends React.Component<MarkerProps, MarkerState> {
+export default class Marker extends React.Component<Props, State> {
     _marker: HTMLElement | null | undefined;
 
-    constructor(props: MarkerProps) {
+    constructor(props: Props) {
         super(props);
 
         this.state = {
@@ -47,7 +47,7 @@ export default class Marker extends React.Component<MarkerProps, MarkerState> {
         document.addEventListener("click", this.handleClick, true);
     }
 
-    UNSAFE_componentWillReceiveProps(nextProps: MarkerProps) {
+    UNSAFE_componentWillReceiveProps(nextProps: Props) {
         const {answers} = this.props;
 
         // Exclude those answers that are no longer present in choices.
@@ -162,7 +162,6 @@ export default class Marker extends React.Component<MarkerProps, MarkerState> {
                             <OptionGroup
                                 onSelected={this.handleSelectAnswer}
                                 // TODO(WB-1096): make selectedValues immutable in wonder-blocks
-                                // $FlowFixMe[incompatible-type]
                                 // @ts-expect-error [FEI-5003] - TS2769 - No overload matches this call.
                                 selectedValues={answers}
                             >

package/src/widgets/label-image/question-markers.tsx

@@ -13,7 +13,7 @@ import type {MarkerType} from "@khanacademy/perseus";
 
 const {colors, typography} = globalStyles;
 
-type QuestionMarkersProps = {
+type Props = {
     // The list of possible answers in a specific order.
     choices: ReadonlyArray<string>;
     // The question image properties.
@@ -26,7 +26,7 @@ type QuestionMarkersProps = {
     onChange: (markers: ReadonlyArray<MarkerType>) => void;
 };
 
-export default class QuestionMarkers extends React.Component<QuestionMarkersProps> {
+export default class QuestionMarkers extends React.Component<Props> {
     _markers: Array<Marker | null | undefined> = [];
 
     openDropdownForMarkerIndices(indices: ReadonlyArray<number>) {

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

@@ -11,17 +11,14 @@ import FormWrappedTextField from "../../components/form-wrapped-text-field";
 
 const {colors, typography} = globalStyles;
 
-type SelectImageProps = {
+type Props = {
     // Callback for when image URL is changed.
     onChange: (url: string) => void;
     // The selected image URL.
     url: string;
 };
 
-const SelectImage: React.FC<SelectImageProps> = ({
-    onChange,
-    url,
-}): React.ReactElement => (
+const SelectImage = ({onChange, url}: Props): React.ReactElement => (
     <div>
         <div className={css(styles.title)}>Image</div>
 

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

@@ -19,7 +19,7 @@ import SelectImage from "./label-image/select-image";
 
 import type {MarkerType} from "@khanacademy/perseus";
 
-type LabelImageEditorProps = {
+type Props = {
     // List of answer choices to label question image with.
     choices: ReadonlyArray<string>;
     // The question image properties.
@@ -37,7 +37,7 @@ type LabelImageEditorProps = {
     onChange: (options: any) => void;
 };
 
-class LabelImageEditor extends React.Component<LabelImageEditorProps> {
+class LabelImageEditor extends React.Component<Props> {
     _questionMarkers: QuestionMarkers | null | undefined;
 
     static defaultProps: {
@@ -62,7 +62,7 @@ class LabelImageEditor extends React.Component<LabelImageEditorProps> {
 
     static widgetName = "label-image" as const;
 
-    componentDidUpdate(prevProps: LabelImageEditorProps) {
+    componentDidUpdate(prevProps: Props) {
         const coordsToMarkers: Record<string, any> = {};
 
         prevProps.markers.forEach(

package/src/widgets/numeric-input-editor.tsx

@@ -66,7 +66,6 @@ const NumericInputEditor: any = createReactClass({
             size: "normal",
             coefficient: false,
             labelText: "",
-            multipleNumberInput: false,
             rightAlign: false,
         };
     },
@@ -417,16 +416,6 @@ const NumericInputEditor: any = createReactClass({
 
         return (
             <div className="perseus-input-number-editor">
-                <div ref={(e) => (this.multInputOption = e)}>
-                    <select onChange={this.onMultipleInputChange}>
-                        <option value="simple-numeric-input">
-                            Ask for one correct solution
-                        </option>
-                        <option value="multiple-numeric-input">
-                            Ask for all correct solutions
-                        </option>
-                    </select>
-                </div>
                 <div className="ui-title">User input</div>
                 <div className="msg-title">
                     Message shown to user on attempt
@@ -480,15 +469,6 @@ const NumericInputEditor: any = createReactClass({
         });
     },
 
-    onMultipleInputChange: function (event) {
-        const newOption = event.target.value;
-        if (newOption === "multiple-numeric-input") {
-            this.props.onChange({multipleNumberInput: true});
-        } else {
-            this.props.onChange({multipleNumberInput: false});
-        }
-    },
-
     updateAnswer: function (choiceIndex, update) {
         if (!_.isObject(update)) {
             return _.partial(

package/src/widgets/transformer-editor.tsx

@@ -852,7 +852,6 @@ class TransformationsShapeEditor extends React.Component<any> {
 
     updateCoords = () => {
         this.props.onChange({
-            // $FlowFixMe[prop-missing]
             // @ts-expect-error [FEI-5003] - TS2339 - Property 'shape' does not exist on type 'TransformationsShapeEditor'.
             shape: this.shape.toJSON(),
         });