@khanacademy/perseus-editor 5.0.1 → 5.0.3

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

@@ -1,34 +1,83 @@
 import * as React from "react";
 import type { PerseusImageBackground } from "@khanacademy/perseus";
-type EditableSetting = "canvas" | "graph" | "snap" | "image" | "measure";
+type Range = [min: number, max: number];
 type Props = {
-    editableSettings: ReadonlyArray<EditableSetting>;
-    box: [number, number];
+    /**
+     * The size of the graph area in pixels.
+     */
+    box: [x: number, y: number];
+    /**
+     * The labels for the x and y axes.
+     */
     labels: ReadonlyArray<string>;
-    range: [[number, number], [number, number]];
-    step: [number, number];
-    gridStep: [number, number];
-    snapStep: [number, number];
+    /**
+     * The range of the graph.
+     */
+    range: [x: Range, y: Range];
+    /**
+     * How far apart the tick marks on the axes are in the x and y
+     * directions.
+     */
+    step: [x: number, y: number];
+    /**
+     * How far apart the grid lines are in the x and y directions.
+     */
+    gridStep: [x: number, y: number];
+    /**
+     * How far apart the snap-to points are in the x and y directions.
+     */
+    snapStep: [x: number, y: number];
+    /**
+     * An error message to display in the graph area, or true if the
+     * graph is valid.
+     */
     valid: boolean | string;
+    /**
+     * The background image to display in the graph area and its properties.
+     */
     backgroundImage: PerseusImageBackground;
+    /**
+     * The type of markings to display on the graph.
+     * - graph: shows the axes and the grid lines
+     * - grid: shows only the grid lines
+     * - none: shows no markings
+     */
     markings: "graph" | "grid" | "none";
+    /**
+     * Whether to show the protractor on the graph.
+     */
     showProtractor: boolean;
+    /**
+     * Whether to show the ruler on the graph.
+     */
     showRuler: boolean;
+    /**
+     * Whether to show tooltips on the graph.
+     */
     showTooltips: boolean;
+    /**
+     * The label to display on the ruler, if any.
+     */
     rulerLabel: string;
+    /**
+     * The number of ticks to display on the ruler.
+     */
     rulerTicks: number;
     onChange: (arg1: Partial<Props>) => void;
 };
 type State = {
     labelsTextbox: ReadonlyArray<string>;
-    gridStepTextbox: [number, number];
-    snapStepTextbox: [number, number];
-    stepTextbox: [number, number];
-    rangeTextbox: [[number, number], [number, number]];
+    gridStepTextbox: [x: number, y: number];
+    snapStepTextbox: [x: number, y: number];
+    stepTextbox: [x: number, y: number];
+    rangeTextbox: [x: Range, y: Range];
     backgroundImage: PerseusImageBackground;
 };
 declare class InteractiveGraphSettings extends React.Component<Props, State> {
     _isMounted: boolean;
+    bgUrlRef: React.RefObject<HTMLInputElement>;
+    labelXRef: React.RefObject<HTMLInputElement>;
+    labelYRef: React.RefObject<HTMLInputElement>;
     static stateFromProps(props: any): {
         labelsTextbox: any;
         gridStepTextbox: any;
@@ -39,7 +88,6 @@ declare class InteractiveGraphSettings extends React.Component<Props, State> {
     };
     constructor(props: Props);
     static defaultProps: {
-        editableSettings: string[];
         box: 288[];
         labels: string[];
         range: number[][];
@@ -66,7 +114,7 @@ declare class InteractiveGraphSettings extends React.Component<Props, State> {
     changeRulerLabel: (e: any) => void;
     changeRulerTicks: (e: any) => void;
     changeBackgroundUrl: (e: any) => void;
-    renderLabelChoices: (choices: any) => JSX.Element[];
+    renderLabelChoices: (choices: any) => any;
     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;

package/dist/components/labeled-row.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+import type { StyleType } from "@khanacademy/wonder-blocks-core";
+declare const LabeledRow: (props: {
+    id?: string;
+    label: string;
+    labelSide?: "start" | "end";
+    style?: StyleType;
+    children: React.ReactNode;
+}) => JSX.Element;
+export default LabeledRow;