@khanacademy/perseus-editor 2.15.5 → 2.15.7

package/dist/widgets/interaction-editor/function-editor.d.ts

@@ -1,24 +1,23 @@
-import PropTypes from "prop-types";
+import { Changeable } from "@khanacademy/perseus";
 import * as React from "react";
-type FunctionEditorProps = any;
-declare class FunctionEditor extends React.Component<FunctionEditorProps> {
-    static propTypes: {
-        value: PropTypes.Requireable<string>;
-        rangeMin: PropTypes.Requireable<string>;
-        rangeMax: PropTypes.Requireable<string>;
-        color: PropTypes.Requireable<string>;
-        strokeDashArray: PropTypes.Requireable<string>;
-        strokeWidth: PropTypes.Requireable<number>;
-        onChange: PropTypes.Validator<(...args: any[]) => any>;
-    };
-    static defaultProps: {
-        value: string;
-        rangeMin: string;
-        rangeMax: string;
-        color: "#6495ED";
-        strokeDasharray: string;
-        strokeWidth: number;
-    };
+type Props = Changeable.ChangeableProps & {
+    value: string;
+    rangeMin: string;
+    rangeMax: string;
+    color: string;
+    strokeDasharray: string;
+    strokeWidth: number;
+};
+type DefaultProps = {
+    value: Props["value"];
+    rangeMin: Props["rangeMin"];
+    rangeMax: Props["rangeMax"];
+    color: Props["color"];
+    strokeDasharray: Props["strokeDasharray"];
+    strokeWidth: Props["strokeWidth"];
+};
+declare class FunctionEditor extends React.Component<Props> {
+    static defaultProps: DefaultProps;
     change: (arg1: any, arg2?: any, arg3?: any) => any;
     serialize: () => any;
     render(): React.ReactNode;

package/dist/widgets/interaction-editor/interaction-editor.d.ts

@@ -1,19 +1,28 @@
-import PropTypes from "prop-types";
+import { Changeable } from "@khanacademy/perseus";
 import * as React from "react";
-type InteractionEditorProps = any;
-type InteractionEditorState = any;
-declare class InteractionEditor extends React.Component<InteractionEditorProps, InteractionEditorState> {
-    static propTypes: {
-        elements: PropTypes.Requireable<(object | null | undefined)[]>;
-        graph: PropTypes.Requireable<{
-            [x: string]: any;
-        }>;
-        onChange: PropTypes.Validator<(...args: any[]) => any>;
-    };
+type Graph = {
+    box: ReadonlyArray<number>;
+    labels: ReadonlyArray<string>;
+    range: ReadonlyArray<ReadonlyArray<number>>;
+    tickStep: ReadonlyArray<number>;
+    gridStep: ReadonlyArray<number>;
+    markings: string;
+    valid?: boolean;
+};
+type Props = Changeable.ChangeableProps & {
+    elements: ReadonlyArray<any>;
+    graph: Graph;
+};
+type DefaultProps = {
+    elements: Props["elements"];
+    graph: Props["graph"];
+};
+type State = any;
+declare class InteractionEditor extends React.Component<Props, State> {
     static widgetName: "interaction";
-    static defaultProps: InteractionEditorProps;
-    state: InteractionEditorState;
-    UNSAFE_componentWillReceiveProps(nextProps: InteractionEditorProps): void;
+    static defaultProps: DefaultProps;
+    state: State;
+    UNSAFE_componentWillReceiveProps(nextProps: Props): void;
     _getAllVarSubscripts(elements: ReadonlyArray<any>): ReadonlyArray<any>;
     _getAllFunctionNames(elements: ReadonlyArray<any>): ReadonlyArray<string>;
     _updateGraphProps: (arg1: any) => any;

package/dist/widgets/interaction-editor/label-editor.d.ts

@@ -1,20 +1,19 @@
-import PropTypes from "prop-types";
+import { Changeable } from "@khanacademy/perseus";
 import * as React from "react";
-type LabelEditorProps = any;
-declare class LabelEditor extends React.Component<LabelEditorProps> {
-    static propTypes: {
-        color: PropTypes.Requireable<string>;
-        coordX: PropTypes.Requireable<string>;
-        coordY: PropTypes.Requireable<string>;
-        label: PropTypes.Requireable<string>;
-        onChange: PropTypes.Validator<(...args: any[]) => any>;
-    };
-    static defaultProps: {
-        coordX: string;
-        coordY: string;
-        color: "black";
-        label: string;
-    };
+type Props = Changeable.ChangeableProps & {
+    color: string;
+    coordX: string;
+    coordY: string;
+    label: string;
+};
+type DefaultProps = {
+    color: Props["color"];
+    coordX: Props["coordX"];
+    coordY: Props["coordY"];
+    label: Props["label"];
+};
+declare class LabelEditor extends React.Component<Props> {
+    static defaultProps: DefaultProps;
     change: (arg1: any, arg2?: any, arg3?: any) => any;
     serialize: () => any;
     render(): React.ReactNode;

package/dist/widgets/interaction-editor/line-editor.d.ts

@@ -1,28 +1,27 @@
-import PropTypes from "prop-types";
+import { Changeable } from "@khanacademy/perseus";
 import * as React from "react";
-type LineEditorProps = any;
-declare class LineEditor extends React.Component<LineEditorProps> {
-    static propTypes: {
-        startX: PropTypes.Requireable<string>;
-        startY: PropTypes.Requireable<string>;
-        endX: PropTypes.Requireable<string>;
-        endY: PropTypes.Requireable<string>;
-        color: PropTypes.Requireable<string>;
-        strokeDasharray: PropTypes.Requireable<string>;
-        arrows: PropTypes.Requireable<string>;
-        strokeWidth: PropTypes.Requireable<number>;
-        onChange: PropTypes.Validator<(...args: any[]) => any>;
-    };
-    static defaultProps: {
-        startX: string;
-        startY: string;
-        endX: string;
-        endY: string;
-        color: "black";
-        strokeDasharray: string;
-        arrows: string;
-        strokeWidth: number;
-    };
+type Props = Changeable.ChangeableProps & {
+    startX: string;
+    startY: string;
+    endX: string;
+    endY: string;
+    color: string;
+    strokeDasharray: string;
+    arrows: string;
+    strokeWidth: number;
+};
+type DefaultProps = {
+    startX: Props["startX"];
+    startY: Props["startY"];
+    endX: Props["endX"];
+    endY: Props["endY"];
+    color: Props["color"];
+    strokeDasharray: Props["strokeDasharray"];
+    arrows: Props["arrows"];
+    strokeWidth: Props["strokeWidth"];
+};
+declare class LineEditor extends React.Component<Props> {
+    static defaultProps: DefaultProps;
     change: (arg1: any, arg2?: any, arg3?: any) => any;
     serialize: () => any;
     render(): React.ReactNode;

package/dist/widgets/interaction-editor/mathquill-input.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+type Props = {
+    value: string;
+    onChange: (value: string) => void;
+};
+/**
+ * A simple Mathquill MathField input for the InteractionEditor.
+ * Unlike our other uses of Mathquill, we're not using a keypad here;
+ * it's just the input itself for use writing TeX.
+ */
+export default function MathquillInput(props: Props): JSX.Element;
+export {};

package/dist/widgets/interaction-editor/movable-line-editor.d.ts

@@ -1,30 +1,27 @@
-import PropTypes from "prop-types";
+import { Changeable } from "@khanacademy/perseus";
 import * as React from "react";
-type MovableLineEditorProps = any;
-declare class MovableLineEditor extends React.Component<MovableLineEditorProps> {
-    static propTypes: {
-        startX: PropTypes.Requireable<string>;
-        startY: PropTypes.Requireable<string>;
-        endX: PropTypes.Requireable<string>;
-        endY: PropTypes.Requireable<string>;
-        constraint: PropTypes.Requireable<string>;
-        snap: PropTypes.Requireable<number>;
-        constraintFn: PropTypes.Requireable<string>;
-        onChange: PropTypes.Validator<(...args: any[]) => any>;
-    };
-    static defaultProps: {
-        startX: string;
-        startY: string;
-        endX: string;
-        endY: string;
-        constraint: string;
-        snap: number;
-        constraintFn: string;
-        constraintXMin: string;
-        constraintXMax: string;
-        constraintYMin: string;
-        constraintYMax: string;
-    };
+type Props = Changeable.ChangeableProps & {
+    startX: string;
+    startY: string;
+    endX: string;
+    endY: string;
+    constraint: string;
+    snap: number;
+    constraintFn: string;
+    startSubscript: number;
+    endSubscript: number;
+};
+type DefaultProps = {
+    startX: Props["startX"];
+    startY: Props["startY"];
+    endX: Props["endX"];
+    endY: Props["endY"];
+    constraint: Props["constraint"];
+    snap: Props["snap"];
+    constraintFn: Props["constraintFn"];
+};
+declare class MovableLineEditor extends React.Component<Props> {
+    static defaultProps: DefaultProps;
     change: (...args: any[]) => any;
     serialize: () => any;
     render(): React.ReactNode;

package/dist/widgets/interaction-editor/movable-point-editor.d.ts

@@ -1,26 +1,22 @@
-import PropTypes from "prop-types";
+import { Changeable } from "@khanacademy/perseus";
 import * as React from "react";
-type MovablePointEditorProps = any;
-declare class MovablePointEditor extends React.Component<MovablePointEditorProps> {
-    static propTypes: {
-        startX: PropTypes.Requireable<string>;
-        startY: PropTypes.Requireable<string>;
-        constraint: PropTypes.Requireable<string>;
-        snap: PropTypes.Requireable<number>;
-        constraintFn: PropTypes.Requireable<string>;
-        onChange: PropTypes.Validator<(...args: any[]) => any>;
-    };
-    static defaultProps: {
-        startX: string;
-        startY: string;
-        constraint: string;
-        snap: number;
-        constraintFn: string;
-        constraintXMin: string;
-        constraintXMax: string;
-        constraintYMin: string;
-        constraintYMax: string;
-    };
+type Props = Changeable.ChangeableProps & {
+    startX: string;
+    startY: string;
+    constraint: string;
+    snap: number;
+    constraintFn: string;
+    varSubscript: number;
+};
+type DefaultProps = {
+    startX: Props["startX"];
+    startY: Props["startY"];
+    constraint: Props["constraint"];
+    snap: Props["snap"];
+    constraintFn: Props["constraintFn"];
+};
+declare class MovablePointEditor extends React.Component<Props> {
+    static defaultProps: DefaultProps;
     change: (...args: any[]) => any;
     serialize: () => any;
     render(): React.ReactNode;

package/dist/widgets/interaction-editor/parametric-editor.d.ts

@@ -1,26 +1,25 @@
-import PropTypes from "prop-types";
+import { Changeable } from "@khanacademy/perseus";
 import * as React from "react";
-type ParametricEditorProps = any;
-declare class ParametricEditor extends React.Component<ParametricEditorProps> {
-    static propTypes: {
-        x: PropTypes.Requireable<string>;
-        y: PropTypes.Requireable<string>;
-        rangeMin: PropTypes.Requireable<string>;
-        rangeMax: PropTypes.Requireable<string>;
-        color: PropTypes.Requireable<string>;
-        strokeDashArray: PropTypes.Requireable<string>;
-        strokeWidth: PropTypes.Requireable<number>;
-        onChange: PropTypes.Validator<(...args: any[]) => any>;
-    };
-    static defaultProps: {
-        x: string;
-        y: string;
-        rangeMin: string;
-        rangeMax: string;
-        color: "#6495ED";
-        strokeDasharray: string;
-        strokeWidth: number;
-    };
+type Props = Changeable.ChangeableProps & {
+    x: string;
+    y: string;
+    rangeMin: string;
+    rangeMax: string;
+    color: string;
+    strokeDasharray: string;
+    strokeWidth: number;
+};
+type DefaultProps = {
+    x: Props["x"];
+    y: Props["y"];
+    rangeMin: Props["rangeMin"];
+    rangeMax: Props["rangeMax"];
+    color: Props["color"];
+    strokeDasharray: Props["strokeDasharray"];
+    strokeWidth: Props["strokeWidth"];
+};
+declare class ParametricEditor extends React.Component<Props> {
+    static defaultProps: DefaultProps;
     change: (arg1: any, arg2?: any, arg3?: any) => any;
     serialize: () => any;
     render(): React.ReactNode;

package/dist/widgets/interaction-editor/point-editor.d.ts

@@ -1,18 +1,17 @@
-import PropTypes from "prop-types";
+import { Changeable } from "@khanacademy/perseus";
 import * as React from "react";
-type PointEditorProps = any;
-declare class PointEditor extends React.Component<PointEditorProps> {
-    static propTypes: {
-        coordX: PropTypes.Requireable<string>;
-        coordY: PropTypes.Requireable<string>;
-        color: PropTypes.Requireable<string>;
-        onChange: PropTypes.Validator<(...args: any[]) => any>;
-    };
-    static defaultProps: {
-        coordX: string;
-        coordY: string;
-        color: "black";
-    };
+type Props = Changeable.ChangeableProps & {
+    coordX: string;
+    coordY: string;
+    color: string;
+};
+type DefaultProps = {
+    coordX: Props["coordX"];
+    coordY: Props["coordY"];
+    color: Props["color"];
+};
+declare class PointEditor extends React.Component<Props> {
+    static defaultProps: DefaultProps;
     change: (arg1: any, arg2?: any, arg3?: any) => any;
     serialize: () => any;
     render(): React.ReactNode;

package/dist/widgets/interaction-editor/rectangle-editor.d.ts

@@ -1,22 +1,21 @@
-import PropTypes from "prop-types";
+import { Changeable } from "@khanacademy/perseus";
 import * as React from "react";
-type RectangleEditorProps = any;
-declare class RectangleEditor extends React.Component<RectangleEditorProps> {
-    static propTypes: {
-        color: PropTypes.Requireable<string>;
-        coordX: PropTypes.Requireable<string>;
-        coordY: PropTypes.Requireable<string>;
-        height: PropTypes.Requireable<string>;
-        width: PropTypes.Requireable<string>;
-        onChange: PropTypes.Validator<(...args: any[]) => any>;
-    };
-    static defaultProps: {
-        coordX: string;
-        coordY: string;
-        width: string;
-        height: string;
-        color: "#9AB8ED";
-    };
+type Props = Changeable.ChangeableProps & {
+    color: string;
+    coordX: string;
+    coordY: string;
+    height: string;
+    width: string;
+};
+type DefaultProps = {
+    color: Props["color"];
+    coordX: Props["coordX"];
+    coordY: Props["coordY"];
+    height: Props["height"];
+    width: Props["width"];
+};
+declare class RectangleEditor extends React.Component<Props> {
+    static defaultProps: DefaultProps;
     change: (arg1: any, arg2?: any, arg3?: any) => any;
     serialize: () => any;
     render(): React.ReactNode;

package/package.json

@@ -3,7 +3,7 @@
     "description": "Perseus editors",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "2.15.5",
+    "version": "2.15.7",
     "publishConfig": {
         "access": "public"
     },
@@ -24,7 +24,8 @@
     "dependencies": {
         "@khanacademy/kas": "^0.3.7",
         "@khanacademy/kmath": "^0.1.8",
-        "@khanacademy/perseus": "^17.5.0",
+        "@khanacademy/math-input": "^16.4.0",
+        "@khanacademy/perseus": "^17.6.0",
         "@khanacademy/perseus-core": "1.4.1"
     },
     "devDependencies": {

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

@@ -1,6 +1,5 @@
-import {ApiOptions} from "@khanacademy/perseus";
-import {action} from "@storybook/addon-actions";
 import * as React from "react";
+import {useState} from "react";
 
 import InteractionEditor from "../interaction-editor";
 
@@ -15,10 +14,24 @@ export default {
 } as Story;
 
 export const Default = (args: StoryArgs): React.ReactElement => {
+    const [elements, setElements] = useState();
+    const [graph, setGraph] = useState();
+
+    function handleChange(next) {
+        if (next.graph) {
+            setGraph(next.graph);
+        }
+
+        if (next.elements) {
+            setElements(next.elements);
+        }
+    }
+
     return (
         <InteractionEditor
-            onChange={action("onChange")}
-            apiOptions={ApiOptions.defaults}
+            onChange={handleChange}
+            elements={elements}
+            graph={graph}
         />
     );
 };

package/src/widgets/interaction-editor/constraint-editor.tsx

@@ -1,7 +1,9 @@
 import {components, Changeable, Dependencies} from "@khanacademy/perseus";
 import * as React from "react";
 
-const {ButtonGroup, MathInput, NumberInput} = components;
+import MathquillInput from "./mathquill-input";
+
+const {ButtonGroup, NumberInput} = components;
 
 type Props = Changeable.ChangeableProps & {
     constraint: string;
@@ -45,8 +47,6 @@ class ConstraintEditor extends React.Component<Props> {
     render(): React.ReactNode {
         const {TeX} = Dependencies.getDependencies();
 
-        const analyticsStub = {onAnalyticsEvent: () => Promise.resolve()};
-
         return (
             <div>
                 <div className="perseus-widget-row">
@@ -77,11 +77,9 @@ class ConstraintEditor extends React.Component<Props> {
                     <div className="graph-settings">
                         <div className="perseus-widget-row">
                             <TeX>x=</TeX>{" "}
-                            <MathInput
-                                buttonsVisible="never"
+                            <MathquillInput
                                 value={this.props.constraintFn}
                                 onChange={this.change("constraintFn")}
-                                analytics={analyticsStub}
                             />
                         </div>
                     </div>
@@ -90,11 +88,9 @@ class ConstraintEditor extends React.Component<Props> {
                     <div className="graph-settings">
                         <div className="perseus-widget-row">
                             <TeX>y=</TeX>{" "}
-                            <MathInput
-                                buttonsVisible="never"
+                            <MathquillInput
                                 value={this.props.constraintFn}
                                 onChange={this.change("constraintFn")}
-                                analytics={analyticsStub}
                             />
                         </div>
                     </div>
@@ -103,18 +99,14 @@ class ConstraintEditor extends React.Component<Props> {
                 <div className="perseus-widget-row">
                     <div className="perseus-widget-row">
                         <TeX>x \in \Large[</TeX>{" "}
-                        <MathInput
-                            buttonsVisible="never"
+                        <MathquillInput
                             value={this.props.constraintXMin}
                             onChange={this.change("constraintXMin")}
-                            analytics={analyticsStub}
                         />
                         <TeX>, </TeX>{" "}
-                        <MathInput
-                            buttonsVisible="never"
+                        <MathquillInput
                             value={this.props.constraintXMax}
                             onChange={this.change("constraintXMax")}
-                            analytics={analyticsStub}
                         />{" "}
                         <TeX>\Large]</TeX>
                     </div>
@@ -122,18 +114,14 @@ class ConstraintEditor extends React.Component<Props> {
                 <div className="perseus-widget-row">
                     <div className="perseus-widget-row">
                         <TeX>y \in \Large[</TeX>{" "}
-                        <MathInput
-                            buttonsVisible="never"
+                        <MathquillInput
                             value={this.props.constraintYMin}
                             onChange={this.change("constraintYMin")}
-                            analytics={analyticsStub}
                         />
                         <TeX>, </TeX>{" "}
-                        <MathInput
-                            buttonsVisible="never"
+                        <MathquillInput
                             value={this.props.constraintYMax}
                             onChange={this.change("constraintYMax")}
-                            analytics={analyticsStub}
                         />{" "}
                         <TeX>\Large]</TeX>
                     </div>

package/src/widgets/interaction-editor/function-editor.tsx

@@ -7,32 +7,35 @@ import {
     ColorPicker,
     DashPicker,
 } from "@khanacademy/perseus";
-import PropTypes from "prop-types";
 import * as React from "react";
 import _ from "underscore";
 
-const {MathInput, NumberInput} = components;
+import MathquillInput from "./mathquill-input";
+
+const {NumberInput} = components;
 const {getDependencies} = Dependencies;
 
-type FunctionEditorProps = any;
+type Props = Changeable.ChangeableProps & {
+    value: string;
+    rangeMin: string;
+    rangeMax: string;
+    color: string;
+    strokeDasharray: string;
+    strokeWidth: number;
+};
 
-//
-// Editor for function plots
-//
-// TODO(eater): Factor this out
-//
-class FunctionEditor extends React.Component<FunctionEditorProps> {
-    static propTypes = {
-        ...Changeable.propTypes,
-        value: PropTypes.string,
-        rangeMin: PropTypes.string,
-        rangeMax: PropTypes.string,
-        color: PropTypes.string,
-        strokeDashArray: PropTypes.string,
-        strokeWidth: PropTypes.number,
-    };
+type DefaultProps = {
+    value: Props["value"];
+    rangeMin: Props["rangeMin"];
+    rangeMax: Props["rangeMax"];
+    color: Props["color"];
+    strokeDasharray: Props["strokeDasharray"];
+    strokeWidth: Props["strokeWidth"];
+};
 
-    static defaultProps = {
+// Editor for function plots
+class FunctionEditor extends React.Component<Props> {
+    static defaultProps: DefaultProps = {
         value: "x",
         rangeMin: "-10",
         rangeMax: "10",
@@ -51,33 +54,27 @@ class FunctionEditor extends React.Component<FunctionEditorProps> {
 
     render(): React.ReactNode {
         const {TeX} = getDependencies();
-        const analyticsStub = {onAnalyticsEvent: () => Promise.resolve()};
 
         return (
             <div className="graph-settings">
                 <div className="perseus-widget-row">
+                    {/* @ts-expect-error - TS2339 - Property 'funcName' does not exist on type props. */}
                     <TeX>{this.props.funcName + "(x)="}</TeX>{" "}
-                    <MathInput
-                        buttonsVisible="never"
+                    <MathquillInput
                         value={this.props.value}
                         onChange={this.change("value")}
-                        analytics={analyticsStub}
                     />
                 </div>
                 <div className="perseus-widget-row">
                     Range: <TeX>\Large(</TeX>
-                    <MathInput
-                        buttonsVisible="never"
+                    <MathquillInput
                         value={this.props.rangeMin}
                         onChange={this.change("rangeMin")}
-                        analytics={analyticsStub}
                     />
                     <TeX>,</TeX>{" "}
-                    <MathInput
-                        buttonsVisible="never"
+                    <MathquillInput
                         value={this.props.rangeMax}
                         onChange={this.change("rangeMax")}
-                        analytics={analyticsStub}
                     />
                     <TeX>\Large)</TeX>
                 </div>