@khanacademy/perseus-editor 2.0.1 → 2.0.3

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @khanacademy/perseus-editor
 
+## 2.0.3
+
+### Patch Changes
+
+-   472e20e1: Remove all references to multipleNumberInput (ie. Ask for (one|all) correct solution)
+-   22c5d564: Remove the use of React.FC<> and use types named Props/State in more components
+-   Updated dependencies [472e20e1]
+-   Updated dependencies [22c5d564]
+    -   @khanacademy/perseus@5.0.0
+
+## 2.0.2
+
+### Patch Changes
+
+-   Updated dependencies [90c1833e]
+    -   @khanacademy/perseus@4.0.2
+
 ## 2.0.1
 
 ### Patch Changes

package/dist/article-editor.d.ts

@@ -19,7 +19,7 @@ type DefaultProps = {
     sectionImageUploadGenerator: (i: number) => React.ReactElement<React.ComponentProps<"span">>;
     useNewStyles: boolean;
 };
-type PerseusArticleEditorProps = DefaultProps & {
+type Props = DefaultProps & {
     apiOptions?: APIOptions;
     imageUploader?: (arg1: string, arg2: (arg1: string) => unknown) => unknown;
     previewURL: string;
@@ -27,7 +27,7 @@ type PerseusArticleEditorProps = DefaultProps & {
 type State = {
     highlightLint: boolean;
 };
-export default class ArticleEditor extends React.Component<PerseusArticleEditorProps, State> {
+export default class ArticleEditor extends React.Component<Props, State> {
     static defaultProps: DefaultProps;
     state: State;
     componentDidMount(): void;

package/dist/article-editor.js.flow

@@ -23,7 +23,7 @@ declare type DefaultProps = {|
   ) => React.Element<"span">,
   useNewStyles: boolean,
 |};
-declare type PerseusArticleEditorProps = {|
+declare type Props = {|
   ...DefaultProps,
   ...{|
     apiOptions?: APIOptions,
@@ -36,7 +36,7 @@ declare type State = {|
   highlightLint: boolean,
 |};
 declare export default class ArticleEditor
-  extends React.Component<PerseusArticleEditorProps, State>
+  extends React.Component<Props, State>
 {
   static defaultProps: DefaultProps;
   state: State;

package/dist/components/dropdown-option.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 export type OptionRenderer = (children: React.ReactElement<any> | null | undefined, value: string, selected: boolean, disabled?: boolean) => React.ReactElement<any>;
-type OptionProps = {
+type Props = {
     value: string;
     children?: React.ReactNode;
     selected?: boolean;
@@ -13,7 +13,7 @@ type OptionProps = {
     ariaLabel?: string;
 };
 export declare const optionHeight = 30;
-declare class Option extends React.Component<OptionProps> {
+declare class Option extends React.Component<Props> {
     node: HTMLDivElement;
     handleKeyDown(event: any): void;
     render(): React.ReactNode;

package/dist/components/dropdown-option.js.flow

@@ -11,7 +11,7 @@ export type OptionRenderer = (
   selected: boolean,
   disabled?: boolean
 ) => React.Element<any>;
-declare type OptionProps = {|
+declare type Props = {|
   value: string,
   children?: React.Node,
   selected?: boolean,
@@ -24,7 +24,7 @@ declare type OptionProps = {|
   ariaLabel?: string,
 |};
 declare export var optionHeight: 30;
-declare class Option extends React.Component<OptionProps> {
+declare class Option extends React.Component<Props> {
   node: HTMLDivElement;
   handleKeyDown(event: any): void;
   render(): React.Node;

package/dist/components/link.d.ts

@@ -6,7 +6,7 @@ type DefaultProps = {
     href: string;
     style: CSSProperties | Array<CSSProperties>;
 };
-type LinkProps = DefaultProps & {
+type Props = DefaultProps & {
     children?: React.ReactNode;
     className?: string;
     inlineStyles?: {
@@ -34,7 +34,7 @@ type LinkProps = DefaultProps & {
 /**
  * A wrapper that creates an anchor tag with normalized styles
  */
-declare class Link extends React.Component<LinkProps> {
+declare class Link extends React.Component<Props> {
     static defaultProps: DefaultProps;
     render(): React.ReactNode;
 }

package/dist/components/link.js.flow

@@ -12,7 +12,7 @@ declare type DefaultProps = {|
   href: string,
   style: CSSProperties | Array<CSSProperties>,
 |};
-declare type LinkProps = {|
+declare type Props = {|
   ...DefaultProps,
   ...{|
     children?: React.Node,
@@ -43,7 +43,7 @@ declare type LinkProps = {|
 /**
  * A wrapper that creates an anchor tag with normalized styles
  */
-declare class Link extends React.Component<LinkProps> {
+declare class Link extends React.Component<Props> {
   static defaultProps: DefaultProps;
   render(): React.Node;
 }

package/dist/diffs/__stories__/perseus-diff-wrapper.d.ts

@@ -1,5 +1,6 @@
 import * as React from "react";
-declare const Wrapper: React.FC<{
+type Props = {
     children: React.ReactNode;
-}>;
+};
+declare const Wrapper: ({ children }: Props) => React.ReactElement;
 export default Wrapper;

package/dist/diffs/__stories__/perseus-diff-wrapper.js.flow

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

package/dist/editor.d.ts

@@ -1,7 +1,7 @@
 import katex from "katex";
 import * as React from "react";
 import type { ChangeHandler, WidgetInfo } from "@khanacademy/perseus";
-type EditorProps = Readonly<{
+type Props = Readonly<{
     apiOptions: any;
     className?: string;
     content: string;
@@ -34,20 +34,20 @@ type DeafultProps = {
         [name: string]: WidgetInfo;
     };
 };
-type EditorState = {
+type State = {
     showKatexErrors: boolean;
     textAreaValue: string;
     katex?: katex;
 };
-declare class Editor extends React.Component<EditorProps, EditorState> {
+declare class Editor extends React.Component<Props, State> {
     lastUserValue: string | null | undefined;
     deferredChange: any | null | undefined;
     widgetIds: any | null | undefined;
     static defaultProps: DeafultProps;
-    state: EditorState;
+    state: State;
     componentDidMount(): void;
-    UNSAFE_componentWillReceiveProps(nextProps: EditorProps): void;
-    componentDidUpdate(prevProps: EditorProps): void;
+    UNSAFE_componentWillReceiveProps(nextProps: Props): void;
+    componentDidUpdate(prevProps: Props): void;
     componentWillUnmount(): void;
     getWidgetEditor: (id: string, type: string) => undefined | React.ReactNode;
     _handleWidgetEditorChange: (id: string, newWidgetInfo: WidgetInfo, cb?: () => unknown, silent?: boolean) => void;
@@ -56,7 +56,7 @@ declare class Editor extends React.Component<EditorProps, EditorState> {
      * Calculate the size of all the images in props.content, and send
      * those sizes to this.props.images using props.onChange.
      */
-    _sizeImages: (props: EditorProps) => void;
+    _sizeImages: (props: Props) => void;
     handleDrop: (e: DragEvent) => void;
     handleChange: (e: React.SyntheticEvent<HTMLTextAreaElement>) => void;
     _handleKeyDown: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;

package/dist/editor.js.flow

@@ -7,7 +7,7 @@
 import katex from "katex";
 import * as React from "react";
 import type { ChangeHandler, WidgetInfo } from "@khanacademy/perseus";
-declare type EditorProps = $ReadOnly<{|
+declare type Props = $ReadOnly<{|
   apiOptions: any,
   className?: string,
   content: string,
@@ -40,20 +40,20 @@ declare type DeafultProps = {|
     [name: string]: WidgetInfo,
   },
 |};
-declare type EditorState = {|
+declare type State = {|
   showKatexErrors: boolean,
   textAreaValue: string,
   katex?: katex,
 |};
-declare class Editor extends React.Component<EditorProps, EditorState> {
+declare class Editor extends React.Component<Props, State> {
   lastUserValue: string | null | void;
   deferredChange: any | null | void;
   widgetIds: any | null | void;
   static defaultProps: DeafultProps;
-  state: EditorState;
+  state: State;
   componentDidMount(): void;
-  UNSAFE_componentWillReceiveProps(nextProps: EditorProps): void;
-  componentDidUpdate(prevProps: EditorProps): void;
+  UNSAFE_componentWillReceiveProps(nextProps: Props): void;
+  componentDidUpdate(prevProps: Props): void;
   componentWillUnmount(): void;
   getWidgetEditor: (id: string, type: string) => void | React.Node;
   _handleWidgetEditorChange: (
@@ -68,7 +68,7 @@ declare class Editor extends React.Component<EditorProps, EditorState> {
    * Calculate the size of all the images in props.content, and send
    * those sizes to this.props.images using props.onChange.
    */
-  _sizeImages: (props: EditorProps) => void;
+  _sizeImages: (props: Props) => void;
   handleDrop: (e: DragEvent) => void;
   handleChange: (e: SyntheticEvent<HTMLTextAreaElement>) => void;
   _handleKeyDown: (e: SyntheticKeyboardEvent<HTMLTextAreaElement>) => void;

package/dist/es/index.js

@@ -1002,7 +1002,6 @@ class Editor extends React.Component {
       }, function () {
         Util.textarea.moveCursor(
         // findDOMNode can return Text but we know this is Element
-        // $FlowFixMe[incompatible-call]
         // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'Element | Text | null' is not assignable to parameter of type 'HTMLTextAreaElement'.
         textarea,
         // We want to put the cursor after the widget
@@ -1856,7 +1855,6 @@ class ArticleEditor extends React.Component {
 }
 ArticleEditor.defaultProps = {
   contentPaths: [],
-  // $FlowFixMe[incompatible-exact]
   json: [{}],
   mode: "edit",
   screen: "desktop",
@@ -4601,7 +4599,7 @@ class ModeDropdown extends React.Component {
     this._handleSelectMode = event => {
       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;
         this.props.onChange(value);
@@ -4673,7 +4671,6 @@ const Header = _ref => {
     props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
   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 /*#__PURE__*/React.createElement(HeaderTag, props);
 };
 
@@ -4835,7 +4832,7 @@ const NodeContent = props => {
 
   // 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") {
@@ -4914,12 +4911,6 @@ const withStickiness = WrappedComponent => {
     render() {
       return (
         /*#__PURE__*/
-        /**
-         * $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>>>'.
         React.createElement(WrappedComponent, _extends({}, this.props, {
           sticky: this.state.sticky
@@ -4948,9 +4939,6 @@ const ItemNodeContent = withStickiness(props => {
     className: css(sticky && styles$c.sticky)
   },
   /*#__PURE__*/
-  // $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.
   React.createElement(Editor, _extends({}, data, {
     onChange: newVal => actions.mergeValueAtPath(path, newVal),
@@ -5054,10 +5042,7 @@ const ArrayNodeContent = props => {
       onClick: () => actions.moveArrayElementUp(subpath)
     }, /*#__PURE__*/React.createElement("div", {
       className: css(styles$c.verticalFlip)
-    }, /*#__PURE__*/React.createElement(InlineIcon$7, iconChevronDown)))),
-    // $FlowFixMe[unsafe-addition]
-    // $FlowFixMe[prop-missing]
-    i < data.length - 1 && /*#__PURE__*/React.createElement("div", {
+    }, /*#__PURE__*/React.createElement(InlineIcon$7, iconChevronDown)))), i < data.length - 1 && /*#__PURE__*/React.createElement("div", {
       key: "moveArrayElementDown",
       className: css(styles$c.control)
     }, /*#__PURE__*/React.createElement(SimpleButton, {
@@ -5677,14 +5662,10 @@ class PairEditor$1 extends React.Component {
     return /*#__PURE__*/React.createElement("fieldset", {
       className: "pair-editor"
     }, /*#__PURE__*/React.createElement("label", null, "Name:", " ", /*#__PURE__*/React.createElement(BlurInput, {
-      value: this.props.name
-      // $FlowFixMe[incompatible-type] single-param call returns a callback
-      ,
+      value: this.props.name,
       onChange: this.change("name")
     })), /*#__PURE__*/React.createElement("label", null, " ", "Value:", " ", /*#__PURE__*/React.createElement(BlurInput, {
-      value: this.props.value
-      // $FlowFixMe[incompatible-type] single-param call returns a callback
-      ,
+      value: this.props.value,
       onChange: this.change("value")
     })));
   }
@@ -6790,10 +6771,7 @@ class ExpressionEditor extends React.Component {
     })), /*#__PURE__*/React.createElement(InfoTip$j, null, /*#__PURE__*/React.createElement("p", null, "Single-letter variables listed here will be interpreted as functions. This let us know that f(x) means \"f of x\" and not \"f times x\"."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, "Button sets:"), buttonSetChoices), this.state.isTex && /*#__PURE__*/React.createElement(TexButtons, {
       className: "math-input-buttons",
       sets: this.props.buttonSets,
-      convertDotToTimes: this.props.times
-      // onInsert is typed as `(string | ((input: $FlowFixMe) => void)) => void`
-      // $FlowFixMe[incompatible-type]
-      ,
+      convertDotToTimes: this.props.times,
       onInsert: this.handleTexInsert
     }), /*#__PURE__*/React.createElement("h3", {
       className: "expression-editor-h3"
@@ -7662,7 +7640,6 @@ class GrapherEditor extends React.Component {
       // 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.
       React.createElement(Grapher, _extends({}, graphProps, {
         apiOptions: this.props.apiOptions,
@@ -7789,14 +7766,10 @@ class PairEditor extends React.Component {
   }
   render() {
     return /*#__PURE__*/React.createElement("fieldset", null, /*#__PURE__*/React.createElement("label", null, "Name:", /*#__PURE__*/React.createElement(BlurInput, {
-      value: this.props.name
-      // $FlowFixMe[incompatible-type] single-param call returns a callback
-      ,
+      value: this.props.name,
       onChange: this.change("name")
     })), /*#__PURE__*/React.createElement("label", null, "Value:", /*#__PURE__*/React.createElement(BlurInput, {
-      value: this.props.value
-      // $FlowFixMe[incompatible-type] single-param call returns a callback
-      ,
+      value: this.props.value,
       onChange: this.change("value")
     })));
   }
@@ -8264,9 +8237,7 @@ class InputNumberEditor extends React.Component {
       disabled: !this.props.inexact,
       defaultValue: this.props.maxError,
       onBlur: e => {
-        const ans = "" + (
-        // $FlowFixMe[incompatible-type]
-        Util.firstNumericalParse(e.target.value) || 0);
+        const ans = "" + (Util.firstNumericalParse(e.target.value) || 0);
         e.target.value = ans;
         this.props.onChange({
           maxError: ans
@@ -9613,7 +9584,6 @@ const InteractiveGraphEditor = 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.
       React.createElement(InteractiveGraph, _extends({}, graphProps, {
         containerSizeClass: sizeClass,
@@ -10497,9 +10467,6 @@ class Option extends React.Component {
       ariaLabel
     } = this.props;
     return /*#__PURE__*/React.createElement("button", {
-      // TODO(mdr): We found a new Flow error when upgrading:
-      //     "node (null) This type is incompatible with this.node (HTMLDivElement)"
-      // $FlowFixMe[incompatible-type](0.52.0->0.53.0)
       // @ts-expect-error [FEI-5003] - TS2322 - Type 'HTMLButtonElement | null' is not assignable to type 'HTMLDivElement'.
       ref: node => this.node = node,
       value: value,
@@ -10510,11 +10477,6 @@ class Option extends React.Component {
       ,
       onClick: value => {
         if (!disabled && onClick) {
-          // TODO(mdr): We found a new Flow error here when upgrading
-          //     from 0.35.0 to 0.52.0: "value (unused function
-          //     argument)". This comment was automatically added to
-          //     this file, to suppress the error for now. Please
-          //     consider fixing!
           // @ts-expect-error [FEI-5003] - TS2554 - Expected 0 arguments, but got 1.
           onClick(value);
         }
@@ -10771,7 +10733,6 @@ class Marker extends React.Component {
     }), /*#__PURE__*/React.createElement(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
@@ -12163,7 +12124,6 @@ const NumericInputEditor = createReactClass({
       size: "normal",
       coefficient: false,
       labelText: "",
-      multipleNumberInput: false,
       rightAlign: false
     };
   },
@@ -12357,14 +12317,6 @@ const NumericInputEditor = createReactClass({
     return /*#__PURE__*/React.createElement("div", {
       className: "perseus-input-number-editor"
     }, /*#__PURE__*/React.createElement("div", {
-      ref: e => this.multInputOption = e
-    }, /*#__PURE__*/React.createElement("select", {
-      onChange: this.onMultipleInputChange
-    }, /*#__PURE__*/React.createElement("option", {
-      value: "simple-numeric-input"
-    }, "Ask for one correct solution"), /*#__PURE__*/React.createElement("option", {
-      value: "multiple-numeric-input"
-    }, "Ask for all correct solutions"))), /*#__PURE__*/React.createElement("div", {
       className: "ui-title"
     }, "User input"), /*#__PURE__*/React.createElement("div", {
       className: "msg-title"
@@ -12407,18 +12359,6 @@ const NumericInputEditor = createReactClass({
       simplify: newStatus === "correct" ? "required" : "accepted"
     });
   },
-  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((choiceIndex, key, value) => {
@@ -14520,7 +14460,6 @@ class TransformationsShapeEditor extends React.Component {
     };
     this.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()
       });