@khanacademy/perseus-editor 14.8.1 → 14.9.1

package/dist/components/checkbox.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-export type CheckboxProps = {
+type CheckboxProps = {
     checked: boolean;
     disabled?: boolean;
     appearDisabled?: boolean;
@@ -18,3 +18,4 @@ export default class Checkbox extends React.Component<CheckboxProps> {
     };
     render(): React.ReactNode;
 }
+export {};

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

@@ -1,18 +1,15 @@
 import * as React from "react";
-export type OptionRenderer = (children: React.ReactElement<any> | null | undefined, value: string, selected: boolean, disabled?: boolean) => React.ReactElement<any>;
 type Props = {
     value: string;
     children?: React.ReactNode;
     selected?: boolean;
     disabled?: boolean;
     onClick?: () => void;
-    optionRenderer?: OptionRenderer;
     onDropdownClose?: () => void;
     hideFocusState?: boolean;
     testId?: string;
     ariaLabel?: string;
 };
-export declare const optionHeight = 30;
 declare class Option extends React.Component<Props> {
     node: HTMLDivElement;
     handleKeyDown(event: any): void;
@@ -22,7 +19,6 @@ declare class OptionGroup extends React.Component<{
     onSelected: (value: string) => void;
     children?: Array<React.ReactElement<React.ComponentProps<typeof Option>>>;
     selectedValues: Array<string>;
-    optionRenderer?: OptionRenderer;
     noMargin?: boolean;
     onDropdownClose?: () => void;
     hideFocusState?: boolean;

package/dist/editor-page.d.ts

@@ -2,7 +2,6 @@ import * as React from "react";
 import CombinedHintsEditor from "./hint-editor";
 import ItemEditor from "./item-editor";
 import type { APIOptions, APIOptionsWithDefaults, ChangeHandler, DeviceType, Hint, ImageUploader, Version, PerseusItem } from "@khanacademy/perseus";
-import type { KEScore } from "@khanacademy/perseus-core";
 type Props = {
     apiOptions?: APIOptions;
     answerArea?: any;
@@ -51,7 +50,6 @@ declare class EditorPage extends React.Component<Props, State> {
     }): any | PerseusItem;
     handleChange: ChangeHandler;
     changeJSON: (newJson: PerseusItem) => void;
-    scorePreview(): KEScore | null | undefined;
     render(): React.ReactNode;
 }
 export default EditorPage;

package/dist/es/index.js

@@ -46,7 +46,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 = "14.8.1";
+const libVersion = "14.9.1";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -24285,13 +24285,6 @@ class EditorPage extends React.Component {
       hints: (_this$hintsEditor$cur2 = this.hintsEditor.current) == null ? void 0 : _this$hintsEditor$cur2.serialize(options)
     });
   }
-  scorePreview() {
-    // Do we actually ever set this.renderer anywhere in the codebase?
-    if (this.renderer) {
-      return this.renderer.scoreInput();
-    }
-    return null;
-  }
   render() {
     let className = "framework-perseus";
     const touch = this.props.previewDevice === "phone" || this.props.previewDevice === "tablet";
@@ -25617,10 +25610,6 @@ const StatefulEditorPage = createReactClass({
       this.setState(newState, cb);
     }
   },
-  scorePreview: function () {
-    // eslint-disable-next-line react/no-string-refs
-    return this.refs.editor.scorePreview();
-  },
   render: function () {
     const Component = this.props.componentClass;
     return /*#__PURE__*/React.createElement(Component, this.state);
@@ -30969,6 +30958,22 @@ function getDefaultFigureForType(type) {
       throw new UnreachableCaseError(type);
   }
 }
+function generateLockedFigureAppearanceDescription(color, strokeStyle = "solid", fill) {
+  const convertedColor = color === "grayH" ? "gray" : color;
+  switch (fill) {
+    case "none":
+      return `. Appearance ${strokeStyle} ${convertedColor} border, with no fill.`;
+    case "white":
+      return `. Appearance ${strokeStyle} ${convertedColor} border, with a white fill.`;
+    case "solid":
+    case "translucent":
+      return `. Appearance ${strokeStyle} ${convertedColor} border, with a ${fill} ${convertedColor} fill.`;
+    case undefined:
+      return `. Appearance ${strokeStyle} ${convertedColor}.`;
+    default:
+      throw new UnreachableCaseError(fill);
+  }
+}
 
 const {
   InfoTip: InfoTip$c
@@ -30994,7 +30999,7 @@ const LockedEllipseSettings = props => {
   function getPrepopulatedAriaLabel() {
     let visiblelabel = "";
     if (labels && labels.length > 0) {
-      visiblelabel += ` ${labels.map(l => l.text).join(" ")}`;
+      visiblelabel += ` ${labels.map(l => l.text).join(", ")}`;
     }
     const isCircle = radius[0] === radius[1];
     let str = "";
@@ -31007,6 +31012,8 @@ const LockedEllipseSettings = props => {
     if (!isCircle && angle !== 0) {
       str += `, rotated by ${radianToDegree(angle)} degrees`;
     }
+    const ellipseAppearance = generateLockedFigureAppearanceDescription(color, strokeStyle, fillStyle);
+    str += ellipseAppearance;
     return str;
   }
   function handleCenterChange(newCoord) {
@@ -31263,6 +31270,8 @@ const LockedFunctionSettings = props => {
     if (domain && !(domain[0] === -Infinity && domain[1] === Infinity)) {
       str += `, domain from ${domain[0]} to ${domain[1]}`;
     }
+    const functionAppearance = generateLockedFigureAppearanceDescription(lineColor, strokeStyle);
+    str += functionAppearance;
     return str;
   }
 
@@ -31689,7 +31698,9 @@ const LockedPointSettings = props => {
     if (labels && labels.length > 0) {
       visiblelabel += ` ${labels.map(l => l.text).join(", ")}`;
     }
-    const str = `Point${visiblelabel} at (${coord[0]}, ${coord[1]})`;
+    let str = `Point${visiblelabel} at (${coord[0]}, ${coord[1]})`;
+    const pointAppearance = generateLockedFigureAppearanceDescription(pointColor);
+    str += pointAppearance;
     return str;
   }
   function handleColorChange(newValue) {
@@ -31890,7 +31901,9 @@ const LockedLineSettings = props => {
     if (labels && labels.length > 0) {
       visiblelabel += ` ${labels.map(l => l.text).join(", ")}`;
     }
-    const str = `${capitalizeKind}${visiblelabel} from (${point1.coord[0]}, ${point1.coord[1]}) to (${point2.coord[0]}, ${point2.coord[1]})`;
+    let str = `${capitalizeKind}${visiblelabel} from (${point1.coord[0]}, ${point1.coord[1]}) to (${point2.coord[0]}, ${point2.coord[1]})`;
+    const lineAppearance = generateLockedFigureAppearanceDescription(lineColor, lineStyle);
+    str += lineAppearance;
     return str;
   }
   function handleChangePoint(newPointProps, index) {
@@ -32156,6 +32169,8 @@ const LockedPolygonSettings = props => {
 
     // Add the coordinates of each point to the aria label
     str += points.map(([x, y]) => `(${x}, ${y})`).join(", ");
+    const polygonAppearance = generateLockedFigureAppearanceDescription(color, strokeStyle, fillStyle);
+    str += polygonAppearance;
     return str;
   }
   function handleColorChange(newValue) {
@@ -32471,7 +32486,9 @@ const LockedVectorSettings = props => {
     if (labels && labels.length > 0) {
       visiblelabel += ` ${labels.map(l => l.text).join(", ")}`;
     }
-    const str = `Vector${visiblelabel} from (${tail[0]}, ${tail[1]}) to (${tip[0]}, ${tip[1]})`;
+    let str = `Vector${visiblelabel} from (${tail[0]}, ${tail[1]}) to (${tip[0]}, ${tip[1]})`;
+    const vectorAppearance = generateLockedFigureAppearanceDescription(lineColor);
+    str += vectorAppearance;
     return str;
   }
   function handleChangePoint(newCoord, index) {
@@ -34701,7 +34718,6 @@ class Option extends React.Component {
       value,
       onClick,
       children,
-      optionRenderer,
       disabled,
       hideFocusState,
       testId,
@@ -34728,14 +34744,7 @@ class Option extends React.Component {
       "aria-disabled": disabled,
       "aria-label": ariaLabel,
       "data-testid": testId
-    }, optionRenderer && optionRenderer(
-    /*#__PURE__*/
-    /**
-     * This expects a `React.Element<>` but `children` is a
-     * `React.Node`. We can convert a `React.Node` to a
-     * `React.Element<>` by wrapping it in a fragment.
-     */
-    React.createElement(React.Fragment, null, children), value || "", selected || false, disabled), !optionRenderer && /*#__PURE__*/React.createElement("span", {
+    }, /*#__PURE__*/React.createElement("span", {
       className: css(styles$4.option, selected && styles$4.optionSelected, disabled && styles$4.optionDisabled)
     }, children, selected && /*#__PURE__*/React.createElement("span", {
       className: css(styles$4.check)
@@ -34765,7 +34774,6 @@ class OptionGroup extends React.Component {
       children,
       onSelected,
       selectedValues,
-      optionRenderer,
       noMargin,
       onDropdownClose,
       hideFocusState
@@ -34787,7 +34795,6 @@ class OptionGroup extends React.Component {
         selected: selected,
         // @ts-expect-error - TS2532 - Object is possibly 'undefined'.
         onClick: () => onSelected(child.props.value),
-        optionRenderer: optionRenderer,
         ref: reference,
         onDropdownClose: onDropdownClose,
         hideFocusState: hideFocusState
@@ -37423,6 +37430,7 @@ class RadioEditor extends React.Component {
       editMode: true,
       labelWrap: false,
       apiOptions: this.props.apiOptions,
+      reviewMode: false,
       choices: this.props.choices.map((choice, i) => {
         return {
           content: /*#__PURE__*/React.createElement(ChoiceEditor, {