@khanacademy/perseus-editor 17.0.5 → 17.0.6

package/dist/components/graph-settings.d.ts

@@ -1,2 +1,93 @@
-declare const GraphSettings: any;
+/**
+ * Used in the editors for the Grapher and Interaction widgets.
+ */
+import { Changeable } from "@khanacademy/perseus";
+import * as React from "react";
+import type { Coords } from "@khanacademy/perseus";
+type Props = {
+    editableSettings: ReadonlyArray<"canvas" | "graph" | "snap" | "image" | "measure">;
+    box: readonly number[];
+    labels: readonly string[];
+    range: Coords;
+    step: [number, number];
+    gridStep: [number, number];
+    snapStep: [number, number];
+    valid: boolean;
+    backgroundImage: any;
+    markings: "graph" | "grid" | "none";
+    showProtractor?: boolean;
+    showRuler?: boolean;
+    showTooltips?: boolean;
+    rulerLabel: string;
+    rulerTicks: number;
+} & Changeable.ChangeableProps;
+type DefaultProps = {
+    editableSettings: Props["editableSettings"];
+    box: Props["box"];
+    labels: Props["labels"];
+    range: Props["range"];
+    step: Props["step"];
+    gridStep: Props["gridStep"];
+    snapStep: Props["snapStep"];
+    valid: Props["valid"];
+    backgroundImage: Props["backgroundImage"];
+    markings: Props["markings"];
+    rulerLabel: Props["rulerLabel"];
+    rulerTicks: Props["rulerTicks"];
+    showProtractor?: Props["showProtractor"];
+    showRuler?: Props["showRuler"];
+    showTooltips?: Props["showTooltips"];
+};
+type State = {
+    labelsTextbox: string[];
+    gridStepTextbox: number[];
+    snapStepTextbox: number[];
+    stepTextbox: number[];
+    rangeTextbox: any[];
+    backgroundImage: any;
+};
+declare class GraphSettings extends React.Component<Props, State> {
+    static displayName: "GraphSettings";
+    static defaultProps: DefaultProps;
+    _isMounted: boolean;
+    constructor(props: any);
+    getInitialState(): {
+        labelsTextbox: any;
+        gridStepTextbox: any;
+        snapStepTextbox: any;
+        stepTextbox: any;
+        rangeTextbox: any;
+        backgroundImage: any;
+    };
+    componentDidMount(): void;
+    UNSAFE_componentWillReceiveProps(nextProps: any): void;
+    componentWillUnmount(): void;
+    stateFromProps(props: any): {
+        labelsTextbox: any;
+        gridStepTextbox: any;
+        snapStepTextbox: any;
+        stepTextbox: any;
+        rangeTextbox: any;
+        backgroundImage: any;
+    };
+    change(...args: any[]): any;
+    changeRulerLabel(e: any): void;
+    changeRulerTicks(e: any): void;
+    changeBackgroundUrl(e: any): void;
+    renderLabelChoices(choices: any): React.JSX.Element[];
+    validRange(range: any): true | "Range must be a valid number" | "Range must have a higher number on the right";
+    validateStepValue(settings: any): string | true;
+    validSnapStep(step: any, range: any): string | true;
+    validGridStep(step: any, range: any): string | true;
+    validStep(step: any, range: any): string | true;
+    validBackgroundImageSize(image: any): true | "Image must be smaller than 450px x 450px.";
+    validateGraphSettings(range: any, step: any, gridStep: any, snapStep: any, image: any): any;
+    changeLabel(i: any, e: any): void;
+    changeRange(i: any, values: any): void;
+    changeStep(step: any): void;
+    changeSnapStep(snapStep: any): void;
+    changeGridStep(gridStep: any): void;
+    changeGraph(): void;
+    render(): React.JSX.Element;
+}
 export default GraphSettings;

package/dist/components/json-editor.d.ts

@@ -1,2 +1,28 @@
-declare const JsonEditor: any;
+import * as React from "react";
+type Props = {
+    multiLine: boolean;
+    value: any;
+    onChange: (newJson: any) => void;
+};
+type DefaultProps = {
+    value: Props["value"];
+};
+type State = {
+    currentValue: string | undefined;
+    valid: boolean | undefined;
+};
+declare class JsonEditor extends React.Component<Props, State> {
+    static displayName: "JsonEditor";
+    static defaultProps: DefaultProps;
+    constructor(props: any);
+    getInitialState(): {
+        currentValue: string;
+        valid: boolean;
+    };
+    UNSAFE_componentWillReceiveProps(nextProps: any): void;
+    handleKeyDown(e: any): void;
+    handleChange(e: any): void;
+    handleBlur(e: any): void;
+    render(): React.JSX.Element;
+}
 export default JsonEditor;

package/dist/es/index.js

@@ -4,7 +4,6 @@ export { widgets } from '@khanacademy/perseus';
 import * as React from 'react';
 import { useId, useRef, useEffect, useState } from 'react';
 import _ from 'underscore';
-import createReactClass from 'create-react-class';
 import Clickable from '@khanacademy/wonder-blocks-clickable';
 import { color, spacing, font } from '@khanacademy/wonder-blocks-tokens';
 import { StyleSheet, css } from 'aphrodite';
@@ -46,7 +45,7 @@ import arrowCounterClockwise from '@phosphor-icons/core/bold/arrow-counter-clock
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus-editor";
-const libVersion = "17.0.5";
+const libVersion = "17.0.6";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -142,21 +141,27 @@ const DeviceFramer = ({
 };
 
 /* eslint-disable @babel/no-invalid-this */
-const JsonEditor = createReactClass({
-  displayName: "JsonEditor",
-  getInitialState: function () {
+class JsonEditor extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = this.getInitialState();
+    this.handleBlur = this.handleBlur.bind(this);
+    this.handleChange = this.handleChange.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+  }
+  getInitialState() {
     return {
       currentValue: JSON.stringify(this.props.value, null, 4),
       valid: true
     };
-  },
-  UNSAFE_componentWillReceiveProps: function (nextProps) {
-    const shouldReplaceContent = !this.state.valid || !_.isEqual(nextProps.value, JSON.parse(this.state.currentValue));
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const shouldReplaceContent = !this.state.valid || !_.isEqual(nextProps.value, JSON.parse(this.state.currentValue ? this.state.currentValue : ""));
     if (shouldReplaceContent) {
       this.setState(this.getInitialState());
     }
-  },
-  handleKeyDown: function (e) {
+  }
+  handleKeyDown(e) {
     // This handler allows the tab character to be entered by pressing
     // tab, instead of jumping to the next (non-existant) field
     if (e.key === "Tab") {
@@ -170,8 +175,8 @@ const JsonEditor = createReactClass({
       e.preventDefault();
       this.handleChange(e);
     }
-  },
-  handleChange: function (e) {
+  }
+  handleChange(e) {
     const nextString = e.target.value;
     try {
       let json = JSON.parse(nextString);
@@ -195,10 +200,11 @@ const JsonEditor = createReactClass({
         valid: false
       });
     }
-  },
+  }
+
   // You can type whatever you want as you're typing, but if it's not valid
   // when you blur, it will revert to the last valid value.
-  handleBlur: function (e) {
+  handleBlur(e) {
     const nextString = e.target.value;
     try {
       let json = JSON.parse(nextString);
@@ -222,8 +228,8 @@ const JsonEditor = createReactClass({
         valid: true
       });
     }
-  },
-  render: function () {
+  }
+  render() {
     const classes = "perseus-json-editor " + (this.state.valid ? "valid" : "invalid");
     return /*#__PURE__*/React.createElement("textarea", {
       className: classes,
@@ -233,7 +239,11 @@ const JsonEditor = createReactClass({
       onBlur: this.handleBlur
     });
   }
-});
+}
+JsonEditor.displayName = void 0;
+JsonEditor.defaultProps = {
+  value: {}
+};
 
 const {
   InlineIcon: InlineIcon$a
@@ -25817,6 +25827,7 @@ GradedGroupSetEditor.defaultProps = {
 };
 const setArrayItem = (list, i, value) => [...list.slice(0, i), value, ...list.slice(i + 1)];
 
+/* eslint-disable react/forbid-prop-types, react/no-unsafe */
 const {
   ButtonGroup: ButtonGroup$7,
   InfoTip: InfoTip$j,
@@ -25830,62 +25841,40 @@ const defaultBackgroundImage$3 = {
 function numSteps$1(range, step) {
   return Math.floor((range[1] - range[0]) / step);
 }
-const GraphSettings = createReactClass({
-  displayName: "GraphSettings",
-  propTypes: _extends({}, Changeable.propTypes, {
-    editableSettings: PropTypes.arrayOf(PropTypes.oneOf(["canvas", "graph", "snap", "image", "measure"])),
-    box: PropTypes.arrayOf(PropTypes.number),
-    labels: PropTypes.arrayOf(PropTypes.string),
-    range: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.number)),
-    step: PropTypes.arrayOf(PropTypes.number),
-    gridStep: PropTypes.arrayOf(PropTypes.number),
-    snapStep: PropTypes.arrayOf(PropTypes.number),
-    valid: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-    backgroundImage: PropTypes.object,
-    markings: PropTypes.oneOf(["graph", "grid", "none"]),
-    showProtractor: PropTypes.bool,
-    showRuler: PropTypes.bool,
-    showTooltips: PropTypes.bool,
-    rulerLabel: PropTypes.string,
-    rulerTicks: PropTypes.number
-  }),
-  getDefaultProps: function () {
-    return {
-      editableSettings: ["graph", "snap", "image", "measure"],
-      box: [interactiveSizes.defaultBoxSizeSmall, interactiveSizes.defaultBoxSizeSmall],
-      labels: ["x", "y"],
-      range: [[-10, 10], [-10, 10]],
-      step: [1, 1],
-      gridStep: [1, 1],
-      snapStep: [1, 1],
-      valid: true,
-      backgroundImage: defaultBackgroundImage$3,
-      markings: "graph",
-      showProtractor: false,
-      showRuler: false,
-      showTooltips: false,
-      rulerLabel: "",
-      rulerTicks: 10
-    };
-  },
-  getInitialState: function () {
+class GraphSettings extends React.Component {
+  constructor(props) {
+    super(props);
+    this._isMounted = false;
+    this.state = this.getInitialState();
+    this.change = this.change.bind(this);
+    this.changeBackgroundUrl = this.changeBackgroundUrl.bind(this);
+    this.changeGraph = this.changeGraph.bind(this);
+    this.changeGridStep = this.changeGridStep.bind(this);
+    this.changeLabel = this.changeLabel.bind(this);
+    this.changeRange = this.changeRange.bind(this);
+    this.changeRulerLabel = this.changeRulerLabel.bind(this);
+    this.changeRulerTicks = this.changeRulerTicks.bind(this);
+    this.changeSnapStep = this.changeSnapStep.bind(this);
+    this.changeStep = this.changeStep.bind(this);
+  }
+  getInitialState() {
     return this.stateFromProps(this.props);
-  },
-  componentDidMount: function () {
+  }
+  componentDidMount() {
     // TODO(scottgrant): This is a hack to remove the deprecated call to
     // this.isMounted() but is still considered an anti-pattern.
     this._isMounted = true;
     this.changeGraph = _.debounce(this.changeGraph, 300);
-  },
-  UNSAFE_componentWillReceiveProps: function (nextProps) {
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (!_.isEqual(this.props.labels, nextProps.labels) || !_.isEqual(this.props.gridStep, nextProps.gridStep) || !_.isEqual(this.props.snapStep, nextProps.snapStep) || !_.isEqual(this.props.step, nextProps.step) || !_.isEqual(this.props.range, nextProps.range) || !_.isEqual(this.props.backgroundImage, nextProps.backgroundImage)) {
       this.setState(this.stateFromProps(nextProps));
     }
-  },
-  componentWillUnmount: function () {
+  }
+  componentWillUnmount() {
     this._isMounted = false;
-  },
-  stateFromProps: function (props) {
+  }
+  stateFromProps(props) {
     return {
       labelsTextbox: props.labels,
       gridStepTextbox: props.gridStep,
@@ -25894,27 +25883,29 @@ const GraphSettings = createReactClass({
       rangeTextbox: props.range,
       backgroundImage: _.clone(props.backgroundImage)
     };
-  },
+  }
+
   // TODO(benchristel): Refactor this component to be an ES6 class, so we can
   // type change as ChangeFn.
   change(...args) {
     // TODO(LEMS-2656): remove TS suppression
     // @ts-expect-error: Argument of type 'any[]' is not assignable to parameter of type '[newPropsOrSinglePropName: string | { [key: string]: any; }, propValue?: any, callback?: (() => unknown) | undefined]'. Target requires 1 element(s) but source may have fewer.
     return Changeable.change.apply(this, args);
-  },
+  }
+
   // TODO(aria): Make either a wrapper for standard events to work
   // with this.change, or make these use some TextInput/NumberInput box
-  changeRulerLabel: function (e) {
+  changeRulerLabel(e) {
     this.change({
       rulerLabel: e.target.value
     });
-  },
-  changeRulerTicks: function (e) {
+  }
+  changeRulerTicks(e) {
     this.change({
       rulerTicks: +e.target.value
     });
-  },
-  changeBackgroundUrl: function (e) {
+  }
+  changeBackgroundUrl(e) {
     // Only continue on blur or "enter"
     if (e.type === "keypress" && e.key !== "Enter") {
       return;
@@ -25940,16 +25931,16 @@ const GraphSettings = createReactClass({
     } else {
       setUrl(null, 0, 0);
     }
-  },
-  renderLabelChoices: function (choices) {
+  }
+  renderLabelChoices(choices) {
     return _.map(choices, function ([name, value]) {
       return /*#__PURE__*/React.createElement("option", {
         key: value,
         value: value
       }, name);
     });
-  },
-  validRange: function (range) {
+  }
+  validRange(range) {
     const numbers = _.every(range, function (num) {
       return _.isFinite(num);
     });
@@ -25960,8 +25951,8 @@ const GraphSettings = createReactClass({
       return "Range must have a higher number on the right";
     }
     return true;
-  },
-  validateStepValue: function (settings) {
+  }
+  validateStepValue(settings) {
     const {
       step,
       range,
@@ -25980,8 +25971,8 @@ const GraphSettings = createReactClass({
       return name + " is too small, there can be at most " + maxTicks + " ticks.";
     }
     return true;
-  },
-  validSnapStep: function (step, range) {
+  }
+  validSnapStep(step, range) {
     return this.validateStepValue({
       step: step,
       range: range,
@@ -25989,8 +25980,8 @@ const GraphSettings = createReactClass({
       minTicks: 5,
       maxTicks: 60
     });
-  },
-  validGridStep: function (step, range) {
+  }
+  validGridStep(step, range) {
     return this.validateStepValue({
       step: step,
       range: range,
@@ -25998,8 +25989,8 @@ const GraphSettings = createReactClass({
       minTicks: 3,
       maxTicks: 60
     });
-  },
-  validStep: function (step, range) {
+  }
+  validStep(step, range) {
     return this.validateStepValue({
       step: step,
       range: range,
@@ -26007,8 +25998,8 @@ const GraphSettings = createReactClass({
       minTicks: 3,
       maxTicks: 20
     });
-  },
-  validBackgroundImageSize: function (image) {
+  }
+  validBackgroundImageSize(image) {
     // Ignore empty images
     if (!image.url) {
       return true;
@@ -26018,8 +26009,8 @@ const GraphSettings = createReactClass({
       return "Image must be smaller than 450px x 450px.";
     }
     return true;
-  },
-  validateGraphSettings: function (range, step, gridStep, snapStep, image) {
+  }
+  validateGraphSettings(range, step, gridStep, snapStep, image) {
     const self = this;
     let msg;
     const goodRange = _.every(range, function (range) {
@@ -26056,16 +26047,16 @@ const GraphSettings = createReactClass({
       return msg;
     }
     return true;
-  },
-  changeLabel: function (i, e) {
+  }
+  changeLabel(i, e) {
     const val = e.target.value;
     const labels = this.state.labelsTextbox.slice();
     labels[i] = val;
     this.setState({
       labelsTextbox: labels
     }, this.changeGraph);
-  },
-  changeRange: function (i, values) {
+  }
+  changeRange(i, values) {
     const ranges = this.state.rangeTextbox.slice();
     ranges[i] = values;
     const step = this.state.stepTextbox.slice();
@@ -26074,6 +26065,9 @@ const GraphSettings = createReactClass({
     const scale = Util.scaleFromExtent(ranges[i], this.props.box[i]);
     if (this.validRange(ranges[i]) === true) {
       step[i] = Util.tickStepFromExtent(ranges[i], this.props.box[i]);
+      // Need to use the cast to number since gridStepFromTickStep
+      // can return null or undefined. Ideally in the future let's adjust
+      // the code to take this into account.
       gridStep[i] = Util.gridStepFromTickStep(step[i], scale);
       snapStep[i] = gridStep[i] / 2;
     }
@@ -26083,26 +26077,26 @@ const GraphSettings = createReactClass({
       snapStepTextbox: snapStep,
       rangeTextbox: ranges
     }, this.changeGraph);
-  },
-  changeStep: function (step) {
+  }
+  changeStep(step) {
     this.setState({
       stepTextbox: step
     }, this.changeGraph);
-  },
-  changeSnapStep: function (snapStep) {
+  }
+  changeSnapStep(snapStep) {
     this.setState({
       snapStepTextbox: snapStep
     }, this.changeGraph);
-  },
-  changeGridStep: function (gridStep) {
+  }
+  changeGridStep(gridStep) {
     this.setState({
       gridStepTextbox: gridStep,
       snapStepTextbox: _.map(gridStep, function (step) {
         return step / 2;
       })
     }, this.changeGraph);
-  },
-  changeGraph: function () {
+  }
+  changeGraph() {
     const labels = this.state.labelsTextbox;
     const range = _.map(this.state.rangeTextbox, function (range) {
       return _.map(range, Number);
@@ -26134,9 +26128,9 @@ const GraphSettings = createReactClass({
         valid: validationResult // a string message, not false
       });
     }
-  },
+  }
 
-  render: function () {
+  render() {
     const scale = [KhanMath.roundTo(2, Util.scaleFromExtent(this.props.range[0], this.props.box[0])), KhanMath.roundTo(2, Util.scaleFromExtent(this.props.range[1], this.props.box[1]))];
     const {
       TeX
@@ -26323,7 +26317,25 @@ const GraphSettings = createReactClass({
       }, n);
     })))))));
   }
-});
+}
+GraphSettings.displayName = void 0;
+GraphSettings.defaultProps = {
+  editableSettings: ["graph", "snap", "image", "measure"],
+  box: [interactiveSizes.defaultBoxSizeSmall, interactiveSizes.defaultBoxSizeSmall],
+  labels: ["x", "y"],
+  range: [[-10, 10], [-10, 10]],
+  step: [1, 1],
+  gridStep: [1, 1],
+  snapStep: [1, 1],
+  valid: true,
+  backgroundImage: defaultBackgroundImage$3,
+  markings: "graph",
+  rulerLabel: "",
+  rulerTicks: 10,
+  showProtractor: false,
+  showRuler: false,
+  showTooltips: false
+};
 
 const {
   InfoTip: InfoTip$i,
@@ -27832,17 +27844,6 @@ const {
 const {
   unescapeMathMode
 } = Util;
-const defaultInteractionProps = {
-  graph: {
-    box: [400, 400],
-    labels: ["x", "y"],
-    range: [[-10, 10], [-10, 10]],
-    tickStep: [1, 1],
-    gridStep: [1, 1],
-    markings: "graph"
-  },
-  elements: []
-};
 class InteractionEditor extends React.Component {
   constructor(..._args) {
     super(..._args);
@@ -28271,7 +28272,17 @@ class InteractionEditor extends React.Component {
   }
 }
 InteractionEditor.widgetName = "interaction";
-InteractionEditor.defaultProps = defaultInteractionProps;
+InteractionEditor.defaultProps = {
+  graph: {
+    box: [400, 400],
+    labels: ["x", "y"],
+    range: [[-10, 10], [-10, 10]],
+    tickStep: [1, 1],
+    gridStep: [1, 1],
+    markings: "graph"
+  },
+  elements: []
+};
 
 var isProduction = process.env.NODE_ENV === 'production';
 var prefix = 'Invariant failed';
@@ -28948,7 +28959,7 @@ class InteractiveGraphSettings extends React.Component {
 }
 InteractiveGraphSettings.defaultProps = {
   box: [interactiveSizes.defaultBoxSizeSmall, interactiveSizes.defaultBoxSizeSmall],
-  labels: ["x", "y"],
+  labels: ["$x$", "$y$"],
   range: [[-10, 10], [-10, 10]],
   step: [1, 1],
   gridStep: [1, 1],