@khanacademy/perseus-editor 8.2.0 → 9.0.0

package/dist/components/angle-input.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import * as React from "react";
 type Props = {
     angle: number;
     onChange: (angle: number) => void;
 };
-declare const AngleInput: (props: Props) => JSX.Element;
+declare const AngleInput: (props: Props) => React.JSX.Element;
 export default AngleInput;

package/dist/components/coordinate-pair-input.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from "react";
 import type { Coord } from "@khanacademy/perseus";
 import type { StyleType } from "@khanacademy/wonder-blocks-core";
 type Props = {
@@ -8,5 +8,5 @@ type Props = {
     style?: StyleType;
     onChange: (newCoord: Coord) => void;
 };
-declare const CoordinatePairInput: (props: Props) => JSX.Element;
+declare const CoordinatePairInput: (props: Props) => React.JSX.Element;
 export default CoordinatePairInput;

package/dist/components/graph-locked-figures/color-select.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from "react";
 import type { LockedFigureColor } from "@khanacademy/perseus";
 import type { StyleType } from "@khanacademy/wonder-blocks-core";
 type Props = {
@@ -6,5 +6,5 @@ type Props = {
     style?: StyleType;
     onChange: (newValue: string) => void;
 };
-declare const ColorSelect: (props: Props) => JSX.Element;
+declare const ColorSelect: (props: Props) => React.JSX.Element;
 export default ColorSelect;

package/dist/components/graph-locked-figures/color-swatch.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
 import { type LockedFigureColor } from "@khanacademy/perseus";
+import * as React from "react";
 type Props = {
     color: LockedFigureColor;
     filled?: boolean;
     decorative?: boolean;
 };
-declare const ColorSwatch: (props: Props) => JSX.Element;
+declare const ColorSwatch: (props: Props) => React.JSX.Element;
 export default ColorSwatch;

package/dist/components/graph-locked-figures/defining-point-settings.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from "react";
 import type { LockedPointType } from "@khanacademy/perseus";
 export type Props = LockedPointType & {
     /**
@@ -31,5 +31,5 @@ export type Props = LockedPointType & {
      */
     onToggle?: (expanded: boolean) => void;
 };
-declare const DefiningPointSettings: (props: Props) => JSX.Element;
+declare const DefiningPointSettings: (props: Props) => React.JSX.Element;
 export default DefiningPointSettings;

package/dist/components/graph-locked-figures/ellipse-swatch.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
+import * as React from "react";
 import type { LockedFigureColor, LockedFigureFillType } from "@khanacademy/perseus";
 type Props = {
     color: LockedFigureColor;
     fillStyle: LockedFigureFillType;
     strokeStyle: "solid" | "dashed";
 };
-declare const EllipseSwatch: (props: Props) => JSX.Element;
+declare const EllipseSwatch: (props: Props) => React.JSX.Element;
 export default EllipseSwatch;

package/dist/components/graph-locked-figures/labeled-row.d.ts

@@ -6,5 +6,5 @@ declare const LabeledRow: (props: {
     labelSide?: "start" | "end";
     style?: StyleType;
     children: React.ReactNode;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export default LabeledRow;

package/dist/components/graph-locked-figures/labeled-switch.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from "react";
 import type { StyleType } from "@khanacademy/wonder-blocks-core";
 type Props = {
     label: string;
@@ -6,5 +6,5 @@ type Props = {
     style?: StyleType;
     onChange: (newValue: boolean) => void;
 };
-declare const LabeledSwitch: (props: Props) => JSX.Element;
+declare const LabeledSwitch: (props: Props) => React.JSX.Element;
 export default LabeledSwitch;

package/dist/components/graph-locked-figures/line-swatch.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
 import { type LockedFigureColor } from "@khanacademy/perseus";
+import * as React from "react";
 type Props = {
     color: LockedFigureColor;
     lineStyle: "solid" | "dashed";
 };
-declare const LineSwatch: (props: Props) => JSX.Element;
+declare const LineSwatch: (props: Props) => React.JSX.Element;
 export default LineSwatch;

package/dist/components/graph-locked-figures/locked-ellipse-settings.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from "react";
 import type { LockedFigureSettingsCommonProps } from "./locked-figure-settings";
 import type { LockedEllipseType } from "@khanacademy/perseus";
 export type Props = LockedFigureSettingsCommonProps & LockedEllipseType & {
@@ -7,5 +7,5 @@ export type Props = LockedFigureSettingsCommonProps & LockedEllipseType & {
      */
     onChangeProps: (newProps: Partial<LockedEllipseType>) => void;
 };
-declare const LockedEllipseSettings: (props: Props) => JSX.Element;
+declare const LockedEllipseSettings: (props: Props) => React.JSX.Element;
 export default LockedEllipseSettings;

package/dist/components/graph-locked-figures/locked-figure-select.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
+import * as React from "react";
 type Props = {
     showM2Features: boolean;
     showM2bFeatures: boolean;
     id: string;
     onChange: (value: string) => void;
 };
-declare const LockedFigureSelect: (props: Props) => JSX.Element;
+declare const LockedFigureSelect: (props: Props) => React.JSX.Element;
 export default LockedFigureSelect;

package/dist/components/graph-locked-figures/locked-figure-settings-actions.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from "react";
 import type { LockedFigureType } from "@khanacademy/perseus";
 export type LockedFigureSettingsMovementType = "back" | "backward" | "forward" | "front";
 type Props = {
@@ -7,5 +7,5 @@ type Props = {
     onMove: (movement: LockedFigureSettingsMovementType) => void;
     onRemove: () => void;
 };
-declare const LockedFigureSettingsActions: (props: Props) => JSX.Element;
+declare const LockedFigureSettingsActions: (props: Props) => React.JSX.Element;
 export default LockedFigureSettingsActions;

package/dist/components/graph-locked-figures/locked-figure-settings.d.ts

@@ -4,7 +4,7 @@
  *
  * Used in the interactive graph editor's locked figures section.
  */
-/// <reference types="react" />
+import * as React from "react";
 import type { Props as LockedEllipseProps } from "./locked-ellipse-settings";
 import type { LockedFigureSettingsMovementType } from "./locked-figure-settings-actions";
 import type { Props as LockedLineProps } from "./locked-line-settings";
@@ -32,5 +32,5 @@ export type LockedFigureSettingsCommonProps = {
     onToggle?: (expanded: boolean) => void;
 };
 type Props = LockedFigureSettingsCommonProps & (LockedPointProps | LockedLineProps | LockedEllipseProps | LockedVectorProps | LockedPolygonProps);
-declare const LockedFigureSettings: (props: Props) => JSX.Element | null;
+declare const LockedFigureSettings: (props: Props) => React.JSX.Element | null;
 export default LockedFigureSettings;

package/dist/components/graph-locked-figures/locked-figures-section.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from "react";
 import type { Props as InteractiveGraphEditorProps } from "../../widgets/interactive-graph-editor";
 import type { LockedFigure } from "@khanacademy/perseus";
 type Props = {
@@ -7,5 +7,5 @@ type Props = {
     figures?: Array<LockedFigure>;
     onChange: (props: Partial<InteractiveGraphEditorProps>) => void;
 };
-declare const LockedFiguresSection: (props: Props) => JSX.Element;
+declare const LockedFiguresSection: (props: Props) => React.JSX.Element;
 export default LockedFiguresSection;

package/dist/components/graph-locked-figures/locked-line-settings.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from "react";
 import type { LockedFigureSettingsCommonProps } from "./locked-figure-settings";
 import type { LockedFigure, LockedLineType } from "@khanacademy/perseus";
 export type Props = LockedLineType & LockedFigureSettingsCommonProps & {
@@ -7,5 +7,5 @@ export type Props = LockedLineType & LockedFigureSettingsCommonProps & {
      */
     onChangeProps: (newProps: Partial<LockedFigure>) => void;
 };
-declare const LockedLineSettings: (props: Props) => JSX.Element;
+declare const LockedLineSettings: (props: Props) => React.JSX.Element;
 export default LockedLineSettings;

package/dist/components/graph-locked-figures/locked-point-settings.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from "react";
 import type { LockedFigureSettingsCommonProps } from "./locked-figure-settings";
 import type { LockedPointType } from "@khanacademy/perseus";
 export type Props = LockedFigureSettingsCommonProps & LockedPointType & {
@@ -7,5 +7,5 @@ export type Props = LockedFigureSettingsCommonProps & LockedPointType & {
      */
     onChangeProps: (newProps: Partial<LockedPointType>) => void;
 };
-declare const LockedPointSettings: (props: Props) => JSX.Element;
+declare const LockedPointSettings: (props: Props) => React.JSX.Element;
 export default LockedPointSettings;

package/dist/components/graph-locked-figures/locked-polygon-settings.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { type LockedPolygonType } from "@khanacademy/perseus";
+import * as React from "react";
 import type { LockedFigureSettingsCommonProps } from "./locked-figure-settings";
 export type Props = LockedFigureSettingsCommonProps & LockedPolygonType & {
     /**
@@ -7,5 +7,5 @@ export type Props = LockedFigureSettingsCommonProps & LockedPolygonType & {
      */
     onChangeProps: (newProps: Partial<LockedPolygonType>) => void;
 };
-declare const LockedPolygonSettings: (props: Props) => JSX.Element;
+declare const LockedPolygonSettings: (props: Props) => React.JSX.Element;
 export default LockedPolygonSettings;

package/dist/components/graph-locked-figures/locked-vector-settings.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from "react";
 import type { LockedFigureSettingsCommonProps } from "./locked-figure-settings";
 import type { LockedFigure, LockedVectorType } from "@khanacademy/perseus";
 export type Props = LockedVectorType & LockedFigureSettingsCommonProps & {
@@ -7,5 +7,5 @@ export type Props = LockedVectorType & LockedFigureSettingsCommonProps & {
      */
     onChangeProps: (newProps: Partial<LockedFigure>) => void;
 };
-declare const LockedVectorSettings: (props: Props) => JSX.Element;
+declare const LockedVectorSettings: (props: Props) => React.JSX.Element;
 export default LockedVectorSettings;

package/dist/components/graph-locked-figures/polygon-swatch.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
+import * as React from "react";
 import type { LockedFigureColor, LockedFigureFillType } from "@khanacademy/perseus";
 type Props = {
     color: LockedFigureColor;
     fillStyle: LockedFigureFillType;
     strokeStyle: "solid" | "dashed";
 };
-declare const PolygonSwatch: (props: Props) => JSX.Element;
+declare const PolygonSwatch: (props: Props) => React.JSX.Element;
 export default PolygonSwatch;

package/dist/components/graph-points-count-selector.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import * as React from "react";
 import type { PointValue } from "../util/points";
 declare const GraphPointsCountSelector: ({ numPoints, onChange, }: {
     numPoints?: PointValue | undefined;
     onChange: (points: PointValue) => void;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export default GraphPointsCountSelector;

package/dist/components/graph-type-selector.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import * as React from "react";
 type GraphTypeSelectorProps = {
     graphType: string;
     onChange: (newGraphType: string) => void;
 };
-declare const GraphTypeSelector: (props: GraphTypeSelectorProps) => JSX.Element;
+declare const GraphTypeSelector: (props: GraphTypeSelectorProps) => React.JSX.Element;
 export default GraphTypeSelector;

package/dist/components/heading.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import * as React from "react";
 declare function Heading({ title, isOpen, isCollapsible, onToggle, }: {
     title: string;
     isOpen: boolean;
     isCollapsible: boolean;
     onToggle?: (isOpen: boolean) => void;
-}): JSX.Element;
+}): React.JSX.Element;
 export default Heading;

package/dist/components/interactive-graph-correct-answer.d.ts

@@ -3,5 +3,5 @@ type Props = {
     equationString: string;
     children: React.ReactNode;
 };
-export declare function InteractiveGraphCorrectAnswer(props: Props): JSX.Element;
+export declare function InteractiveGraphCorrectAnswer(props: Props): React.JSX.Element;
 export {};

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

@@ -137,6 +137,6 @@ declare class InteractiveGraphSettings extends React.Component<Props, State> {
     changeSnapStep: (snapStep: any) => void;
     changeGridStep: (gridStep: any) => void;
     changeGraph: () => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export default InteractiveGraphSettings;

package/dist/components/perseus-editor-accordion.d.ts

@@ -8,5 +8,5 @@ type Props = {
     panelStyle?: StyleType;
     onToggle?: (expanded: boolean) => void;
 };
-declare const PerseusEditorAccordion: (props: Props) => JSX.Element;
+declare const PerseusEditorAccordion: (props: Props) => React.JSX.Element;
 export default PerseusEditorAccordion;

package/dist/components/segment-count-selector.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import * as React from "react";
 declare const SegmentCountSelector: ({ numSegments, onChange, }: {
     numSegments?: number | undefined;
     onChange: (numSegments: number) => void;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export default SegmentCountSelector;

package/dist/components/start-coord-settings.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
+import * as React from "react";
 import type { PerseusGraphType, Range, CollinearTuple } from "@khanacademy/perseus";
 type Props = PerseusGraphType & {
     range: [x: Range, y: Range];
     step: [x: number, y: number];
     onChange: (startCoords: CollinearTuple) => void;
 };
-declare const StartCoordSettings: (props: Props) => JSX.Element | null;
+declare const StartCoordSettings: (props: Props) => React.JSX.Element | null;
 export default StartCoordSettings;

package/dist/components/toggleable-caret.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from "react";
 type Props = {
     isExpanded: boolean;
 };
@@ -6,5 +6,5 @@ type Props = {
  * Displays a caret in either expanded or collapsed state. For use in headings
  * that collapse a region.
  */
-declare function ToggleableCaret(props: Props): JSX.Element;
+declare function ToggleableCaret(props: Props): React.JSX.Element;
 export default ToggleableCaret;

package/dist/components/viewport-resizer.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from "react";
 import type { DeviceType } from "@khanacademy/perseus";
 type Props = {
     /** The current device type that is selected. */
@@ -9,5 +9,5 @@ type Props = {
      */
     onViewportSizeChanged: (deviceType: DeviceType) => unknown;
 };
-declare const ViewportResizer: (props: Props) => JSX.Element;
+declare const ViewportResizer: (props: Props) => React.JSX.Element;
 export default ViewportResizer;

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

@@ -21,7 +21,7 @@ declare class WidgetEditor extends React.Component<WidgetEditorProps, WidgetEdit
     _handleAlignmentChange: (e: React.SyntheticEvent<HTMLSelectElement>) => void;
     getSaveWarnings: () => any;
     serialize: () => {
-        type: "categorizer" | "iframe" | "table" | "video" | "image" | "radio" | "cs-program" | "definition" | "group" | "dropdown" | "example-graphie-widget" | "example-widget" | "explanation" | "expression" | "graded-group-set" | "graded-group" | "grapher" | "input-number" | "interaction" | "interactive-graph" | "label-image" | "matcher" | "matrix" | "measurer" | "molecule-renderer" | "number-line" | "numeric-input" | "orderer" | "passage-ref" | "passage" | "plotter" | "python-program" | "passage-ref-target" | "simple-markdown-tester" | "sorter" | "unit-input" | "deprecated-standin";
+        type: "categorizer" | "image" | "radio" | "table" | "cs-program" | "iframe" | "video" | "definition" | "group" | "dropdown" | "example-graphie-widget" | "example-widget" | "explanation" | "expression" | "graded-group-set" | "graded-group" | "grapher" | "input-number" | "interaction" | "interactive-graph" | "label-image" | "matcher" | "matrix" | "measurer" | "molecule-renderer" | "number-line" | "numeric-input" | "orderer" | "passage-ref" | "passage" | "plotter" | "python-program" | "passage-ref-target" | "simple-markdown-tester" | "sorter" | "unit-input" | "deprecated-standin";
         alignment: string | undefined;
         static: boolean | undefined;
         graded: boolean | undefined;

package/dist/es/index.js

@@ -37,7 +37,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 = "8.2.0";
+const libVersion = "9.0.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -29157,7 +29157,7 @@ class InteractionEditor extends React.Component {
       gridStep: this.props.graph.gridStep,
       markings: this.props.graph.markings,
       onChange: this._updateGraphProps
-    }), this.props.graph.valid !== true && /*#__PURE__*/React.createElement("div", null, this.props.graph.valid)), _.map(this.props.elements, function (element, n) {
+    }), /*#__PURE__*/React.createElement(React.Fragment, null, this.props.graph.valid !== true && /*#__PURE__*/React.createElement("div", null, this.props.graph.valid))), _.map(this.props.elements, function (element, n) {
       if (element.type === "movable-point") {
         return /*#__PURE__*/React.createElement(ElementContainer, {
           title: /*#__PURE__*/React.createElement("span", null, "Movable point", " ", /*#__PURE__*/React.createElement(TeX, null, "(x_{" + element.options.varSubscript + "}, y_{" + element.options.varSubscript + "})"))
@@ -29753,7 +29753,7 @@ const LockedFigureSelect = props => {
     key: `${id}-${figureType}`,
     label: figureType,
     onClick: () => onChange(figureType)
-  }, figureType))));
+  }))));
 };
 const styles$x = StyleSheet.create({
   container: {
@@ -29988,7 +29988,7 @@ const ColorSelect = props => {
       color: colorName,
       decorative: true
     })
-  }, colorName)))));
+  })))));
 };
 const styles$s = StyleSheet.create({
   row: {
@@ -30183,7 +30183,7 @@ const LockedEllipseSettings = props => {
     key: option,
     value: option,
     label: option
-  }, option))))), /*#__PURE__*/React.createElement(LabelMedium, {
+  }))))), /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
     style: styles$p.row
   }, "stroke", /*#__PURE__*/React.createElement(Strut, {
@@ -30199,10 +30199,10 @@ const LockedEllipseSettings = props => {
   }, /*#__PURE__*/React.createElement(OptionItem, {
     value: "solid",
     label: "solid"
-  }, "solid"), /*#__PURE__*/React.createElement(OptionItem, {
+  }), /*#__PURE__*/React.createElement(OptionItem, {
     value: "dashed",
     label: "dashed"
-  }, "dashed"))), /*#__PURE__*/React.createElement(LockedFigureSettingsActions, {
+  }))), /*#__PURE__*/React.createElement(LockedFigureSettingsActions, {
     showM2Features: props.showM2Features,
     figureType: props.type,
     onMove: onMove,
@@ -30670,7 +30670,7 @@ const LockedPolygonSettings = props => {
     key: option,
     value: option,
     label: option
-  }, option))))), /*#__PURE__*/React.createElement(LabelMedium, {
+  }))))), /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
     style: [styles$i.row, styles$i.spaceUnder]
   }, "stroke", /*#__PURE__*/React.createElement(Strut, {
@@ -30686,10 +30686,10 @@ const LockedPolygonSettings = props => {
   }, /*#__PURE__*/React.createElement(OptionItem, {
     value: "solid",
     label: "solid"
-  }, "solid"), /*#__PURE__*/React.createElement(OptionItem, {
+  }), /*#__PURE__*/React.createElement(OptionItem, {
     value: "dashed",
     label: "dashed"
-  }, "dashed"))), /*#__PURE__*/React.createElement(LabeledSwitch, {
+  }))), /*#__PURE__*/React.createElement(LabeledSwitch, {
     label: "show vertices",
     checked: showVertices,
     onChange: newValue => onChangeProps({