@khanacademy/perseus-editor 14.8.1 → 14.9.1

package/dist/index.js

@@ -98,7 +98,7 @@ var arrowCounterClockwise__default = /*#__PURE__*/_interopDefaultLegacy(arrowCou
 
 // 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";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -24297,13 +24297,6 @@ class EditorPage extends React__namespace.Component {
     });
     this.props.onChange(newJson);
   };
-  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__default["default"]({
       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__namespace.createElement(Component, this.state);
@@ -31079,6 +31068,24 @@ function getDefaultFigureForType(type) {
       throw new wonderStuffCore.UnreachableCaseError(type);
   }
 }
+function generateLockedFigureAppearanceDescription(color) {
+  let strokeStyle = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "solid";
+  let fill = arguments.length > 2 ? arguments[2] : undefined;
+  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 wonderStuffCore.UnreachableCaseError(fill);
+  }
+}
 
 const {
   InfoTip: InfoTip$c
@@ -31103,7 +31110,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 = "";
@@ -31116,6 +31123,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) {
@@ -31376,6 +31385,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;
   }
 
@@ -31805,7 +31816,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) {
@@ -32010,7 +32023,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) {
@@ -32289,6 +32304,8 @@ const LockedPolygonSettings = props => {
       let [x, y] = _ref;
       return `(${x}, ${y})`;
     }).join(", ");
+    const polygonAppearance = generateLockedFigureAppearanceDescription(color, strokeStyle, fillStyle);
+    str += polygonAppearance;
     return str;
   }
   function handleColorChange(newValue) {
@@ -32623,7 +32640,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) {
@@ -34945,7 +34964,6 @@ class Option extends React__namespace.Component {
       value,
       onClick,
       children,
-      optionRenderer,
       disabled,
       hideFocusState,
       testId,
@@ -34972,14 +34990,7 @@ class Option extends React__namespace.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__namespace.createElement(React__namespace.Fragment, null, children), value || "", selected || false, disabled), !optionRenderer && /*#__PURE__*/React__namespace.createElement("span", {
+    }, /*#__PURE__*/React__namespace.createElement("span", {
       className: aphrodite.css(styles$4.option, selected && styles$4.optionSelected, disabled && styles$4.optionDisabled)
     }, children, selected && /*#__PURE__*/React__namespace.createElement("span", {
       className: aphrodite.css(styles$4.check)
@@ -35006,7 +35017,6 @@ class OptionGroup extends React__namespace.Component {
       children,
       onSelected,
       selectedValues,
-      optionRenderer,
       noMargin,
       onDropdownClose,
       hideFocusState
@@ -35030,7 +35040,6 @@ class OptionGroup extends React__namespace.Component {
         selected: selected,
         // @ts-expect-error - TS2532 - Object is possibly 'undefined'.
         onClick: () => onSelected(child.props.value),
-        optionRenderer: optionRenderer,
         ref: reference,
         onDropdownClose: onDropdownClose,
         hideFocusState: hideFocusState
@@ -37735,6 +37744,7 @@ class RadioEditor extends React__namespace.Component {
       editMode: true,
       labelWrap: false,
       apiOptions: this.props.apiOptions,
+      reviewMode: false,
       choices: this.props.choices.map((choice, i) => {
         return {
           content: /*#__PURE__*/React__namespace.createElement(ChoiceEditor, {