@khanacademy/perseus-editor 7.0.0 → 7.0.2

package/dist/index.js

@@ -81,7 +81,7 @@ var Banner__default = /*#__PURE__*/_interopDefaultLegacy(Banner);
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus-editor";
-const libVersion = "7.0.0";
+const libVersion = "7.0.2";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -29854,71 +29854,6 @@ const styles$v = aphrodite.StyleSheet.create({
   }
 });
 
-const ColorSwatch = props => {
-  const {
-    color,
-    filled = true,
-    decorative = false
-  } = props;
-  return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    "aria-label":
-    // Don't include an aria label for decorative circles.
-    !decorative ? `${color}, ${filled ? "filled" : "open"}` : undefined,
-    style: [styles$u.colorSwatch, {
-      border: `4px solid ${perseus.lockedFigureColors[color]}`,
-      backgroundColor: filled ? perseus.lockedFigureColors[color] : wonderBlocksTokens.color.white
-    }]
-  });
-};
-const styles$u = aphrodite.StyleSheet.create({
-  colorSwatch: {
-    // Add a white outline so that the color swatch is visible when
-    // the dropdown option is highlighted with its blue background.
-    outline: `2px solid ${wonderBlocksTokens.color.offWhite}`,
-    borderRadius: "50%",
-    width: wonderBlocksTokens.spacing.large_24,
-    height: wonderBlocksTokens.spacing.large_24
-  }
-});
-
-const possibleColors = Object.keys(perseus.lockedFigureColors);
-const ColorSelect = props => {
-  const {
-    selectedValue,
-    style,
-    onChange
-  } = props;
-  return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$t.row, style]
-  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
-    tag: "label",
-    style: styles$t.row
-  }, "color", /*#__PURE__*/React__namespace.createElement(Strut, {
-    size: wonderBlocksTokens.spacing.xxSmall_6
-  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
-    selectedValue: selectedValue,
-    onChange: onChange
-    // Placeholder is required, but never gets used.
-    ,
-    placeholder: ""
-  }, possibleColors.map(colorName => /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
-    key: colorName,
-    value: colorName,
-    label: colorName,
-    leftAccessory: /*#__PURE__*/React__namespace.createElement(ColorSwatch, {
-      color: colorName,
-      decorative: true
-    })
-  }, colorName)))));
-};
-const styles$t = aphrodite.StyleSheet.create({
-  row: {
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center"
-  }
-});
-
 const CoordinatePairInput = props => {
   const {
     coord,
@@ -29951,32 +29886,32 @@ const CoordinatePairInput = props => {
     onChange(newCoords);
   }
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$s.row, style]
+    style: [styles$u.row, style]
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: styles$s.row
+    style: styles$u.row
   }, labels ? labels[0] : "x coord", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.TextField, {
     type: "number",
     value: coordState[0],
     onChange: newValue => handleCoordChange(newValue, 0),
-    style: [styles$s.textField, error ? styles$s.errorField : undefined]
+    style: [styles$u.textField, error ? styles$u.errorField : undefined]
   })), /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.medium_16
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: styles$s.row
+    style: styles$u.row
   }, labels ? labels[1] : "y coord", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.TextField, {
     type: "number",
     value: coordState[1],
     onChange: newValue => handleCoordChange(newValue, 1),
-    style: [styles$s.textField, error ? styles$s.errorField : undefined]
+    style: [styles$u.textField, error ? styles$u.errorField : undefined]
   })));
 };
-const styles$s = aphrodite.StyleSheet.create({
+const styles$u = aphrodite.StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -29991,44 +29926,7 @@ const styles$s = aphrodite.StyleSheet.create({
   }
 });
 
-const EllipseSwatch = props => {
-  const {
-    color,
-    fillStyle,
-    strokeStyle
-  } = props;
-  return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    "aria-label": `${color}, stroke ${strokeStyle}, fill ${fillStyle}`,
-    style: [styles$r.container, {
-      border: `4px ${strokeStyle} ${perseus.lockedFigureColors[color]}`
-    }]
-  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$r.innerCircle, {
-      backgroundColor: perseus.lockedFigureColors[color],
-      opacity: perseus.lockedFigureFillStyles[fillStyle]
-    }]
-  }));
-};
-const styles$r = aphrodite.StyleSheet.create({
-  container: {
-    // Add a white outline so that the color swatch is visible when
-    // the dropdown option is highlighted with its blue background.
-    outline: `2px solid ${wonderBlocksTokens.color.offWhite}`,
-    borderRadius: "50%",
-    width: wonderBlocksTokens.spacing.xLarge_32,
-    height: wonderBlocksTokens.spacing.large_24,
-    backgroundColor: wonderBlocksTokens.color.white,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  innerCircle: {
-    width: 28,
-    height: 20,
-    borderRadius: "50%"
-  }
-});
-
-const LockedFigureSettingsAccordion = props => {
+const PerseusEditorAccordion = props => {
   const {
     children,
     header,
@@ -30042,18 +29940,18 @@ const LockedFigureSettingsAccordion = props => {
   // .heading > h2 > .header styles from the articles.less
   // file (which is imported in perseus-renderer.less).
   , {
-    className: "locked-figure-accordion"
+    className: "perseus-editor-accordion"
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksAccordion.AccordionSection, {
     expanded: expanded,
     onToggle: onToggle,
-    style: [styles$q.container, containerStyle],
-    headerStyle: styles$q.accordionHeader,
+    style: [styles$t.container, containerStyle],
+    headerStyle: styles$t.accordionHeader,
     header: header
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$q.accordionPanel, panelStyle]
+    style: [styles$t.accordionPanel, panelStyle]
   }, children)));
 };
-const styles$q = aphrodite.StyleSheet.create({
+const styles$t = aphrodite.StyleSheet.create({
   container: {
     backgroundColor: wonderBlocksTokens.color.fadedBlue8,
     marginTop: wonderBlocksTokens.spacing.xSmall_8
@@ -30074,6 +29972,108 @@ const styles$q = aphrodite.StyleSheet.create({
   }
 });
 
+const ColorSwatch = props => {
+  const {
+    color,
+    filled = true,
+    decorative = false
+  } = props;
+  return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    "aria-label":
+    // Don't include an aria label for decorative circles.
+    !decorative ? `${color}, ${filled ? "filled" : "open"}` : undefined,
+    style: [styles$s.colorSwatch, {
+      border: `4px solid ${perseus.lockedFigureColors[color]}`,
+      backgroundColor: filled ? perseus.lockedFigureColors[color] : wonderBlocksTokens.color.white
+    }]
+  });
+};
+const styles$s = aphrodite.StyleSheet.create({
+  colorSwatch: {
+    // Add a white outline so that the color swatch is visible when
+    // the dropdown option is highlighted with its blue background.
+    outline: `2px solid ${wonderBlocksTokens.color.offWhite}`,
+    borderRadius: "50%",
+    width: wonderBlocksTokens.spacing.large_24,
+    height: wonderBlocksTokens.spacing.large_24
+  }
+});
+
+const possibleColors = Object.keys(perseus.lockedFigureColors);
+const ColorSelect = props => {
+  const {
+    selectedValue,
+    style,
+    onChange
+  } = props;
+  return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: [styles$r.row, style]
+  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
+    tag: "label",
+    style: styles$r.row
+  }, "color", /*#__PURE__*/React__namespace.createElement(Strut, {
+    size: wonderBlocksTokens.spacing.xxSmall_6
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
+    selectedValue: selectedValue,
+    onChange: onChange
+    // Placeholder is required, but never gets used.
+    ,
+    placeholder: ""
+  }, possibleColors.map(colorName => /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
+    key: colorName,
+    value: colorName,
+    label: colorName,
+    leftAccessory: /*#__PURE__*/React__namespace.createElement(ColorSwatch, {
+      color: colorName,
+      decorative: true
+    })
+  }, colorName)))));
+};
+const styles$r = aphrodite.StyleSheet.create({
+  row: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center"
+  }
+});
+
+const EllipseSwatch = props => {
+  const {
+    color,
+    fillStyle,
+    strokeStyle
+  } = props;
+  return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    "aria-label": `${color}, stroke ${strokeStyle}, fill ${fillStyle}`,
+    style: [styles$q.container, {
+      border: `4px ${strokeStyle} ${perseus.lockedFigureColors[color]}`
+    }]
+  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: [styles$q.innerCircle, {
+      backgroundColor: perseus.lockedFigureColors[color],
+      opacity: perseus.lockedFigureFillStyles[fillStyle]
+    }]
+  }));
+};
+const styles$q = aphrodite.StyleSheet.create({
+  container: {
+    // Add a white outline so that the color swatch is visible when
+    // the dropdown option is highlighted with its blue background.
+    outline: `2px solid ${wonderBlocksTokens.color.offWhite}`,
+    borderRadius: "50%",
+    width: wonderBlocksTokens.spacing.xLarge_32,
+    height: wonderBlocksTokens.spacing.large_24,
+    backgroundColor: wonderBlocksTokens.color.white,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  innerCircle: {
+    width: 28,
+    height: 20,
+    borderRadius: "50%"
+  }
+});
+
 /**
  * The part of a locked figure settings panel that contains actions
  * for this panel and its associated locked figure, including
@@ -30159,7 +30159,7 @@ const LockedEllipseSettings = props => {
       color: newValue
     });
   }
-  return /*#__PURE__*/React__namespace.createElement(LockedFigureSettingsAccordion, {
+  return /*#__PURE__*/React__namespace.createElement(PerseusEditorAccordion, {
     expanded: expanded,
     onToggle: onToggle,
     header:
@@ -30312,7 +30312,7 @@ const DefiningPointSettings = props => {
       color: newValue
     });
   }
-  return /*#__PURE__*/React__namespace.createElement(LockedFigureSettingsAccordion, {
+  return /*#__PURE__*/React__namespace.createElement(PerseusEditorAccordion, {
     expanded: expanded,
     onToggle: onToggle,
     containerStyle: styles$m.container,
@@ -30446,7 +30446,7 @@ const LockedLineSettings = props => {
       }]
     });
   }
-  return /*#__PURE__*/React__namespace.createElement(LockedFigureSettingsAccordion, {
+  return /*#__PURE__*/React__namespace.createElement(PerseusEditorAccordion, {
     expanded: props.expanded,
     onToggle: props.onToggle,
     header: /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
@@ -30571,7 +30571,7 @@ const LockedPointSettings = props => {
       color: newValue
     });
   }
-  return /*#__PURE__*/React__namespace.createElement(LockedFigureSettingsAccordion, {
+  return /*#__PURE__*/React__namespace.createElement(PerseusEditorAccordion, {
     expanded: props.expanded,
     onToggle: props.onToggle,
     header:
@@ -30675,7 +30675,7 @@ const LockedPolygonSettings = props => {
       color: newValue
     });
   }
-  return /*#__PURE__*/React__namespace.createElement(LockedFigureSettingsAccordion, {
+  return /*#__PURE__*/React__namespace.createElement(PerseusEditorAccordion, {
     expanded: expanded,
     onToggle: onToggle,
     header:
@@ -30740,7 +30740,7 @@ const LockedPolygonSettings = props => {
       showVertices: newValue
     }),
     style: styles$h.spaceUnder
-  }), /*#__PURE__*/React__namespace.createElement(LockedFigureSettingsAccordion, {
+  }), /*#__PURE__*/React__namespace.createElement(PerseusEditorAccordion, {
     header: /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, "Points"),
     expanded: true,
     containerStyle: styles$h.pointAccordionContainer,
@@ -30848,7 +30848,7 @@ const LockedVectorSettings = props => {
       color: newColor
     });
   }
-  return /*#__PURE__*/React__namespace.createElement(LockedFigureSettingsAccordion, {
+  return /*#__PURE__*/React__namespace.createElement(PerseusEditorAccordion, {
     expanded: props.expanded,
     onToggle: props.onToggle,
     header: /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
@@ -30866,7 +30866,7 @@ const LockedVectorSettings = props => {
     onChange: handleColorChange
   })), isInvalid && /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     style: styles$g.errorText
-  }, lengthErrorMessage), /*#__PURE__*/React__namespace.createElement(LockedFigureSettingsAccordion, {
+  }, lengthErrorMessage), /*#__PURE__*/React__namespace.createElement(PerseusEditorAccordion, {
     expanded: true // Initial state is expanded
     ,
     containerStyle: styles$g.container,
@@ -30880,7 +30880,7 @@ const LockedVectorSettings = props => {
     onChange: newProps => {
       handleChangePoint(newProps, 0);
     }
-  })), /*#__PURE__*/React__namespace.createElement(LockedFigureSettingsAccordion, {
+  })), /*#__PURE__*/React__namespace.createElement(PerseusEditorAccordion, {
     expanded: true // Initial state is expanded
     ,
     containerStyle: styles$g.container,
@@ -31181,21 +31181,6 @@ const styles$d = aphrodite.StyleSheet.create({
   }
 });
 
-/* eslint-disable react/forbid-prop-types, react/no-unsafe */
-const {
-  ButtonGroup: ButtonGroup$2,
-  InfoTip: InfoTip$c,
-  PropCheckBox: PropCheckBox$7,
-  RangeInput: RangeInput$4
-} = perseus.components;
-const defaultBackgroundImage$1 = {
-  url: null,
-  width: 0,
-  height: 0
-};
-function numSteps(range, step) {
-  return Math.floor((range[1] - range[0]) / step);
-}
 function Heading(_ref) {
   let {
     title,
@@ -31221,6 +31206,22 @@ function Heading(_ref) {
     isExpanded: isOpen
   }));
 }
+
+/* eslint-disable react/forbid-prop-types, react/no-unsafe */
+const {
+  ButtonGroup: ButtonGroup$2,
+  InfoTip: InfoTip$c,
+  PropCheckBox: PropCheckBox$7,
+  RangeInput: RangeInput$4
+} = perseus.components;
+const defaultBackgroundImage$1 = {
+  url: null,
+  width: 0,
+  height: 0
+};
+function numSteps(range, step) {
+  return Math.floor((range[1] - range[0]) / step);
+}
 class InteractiveGraphSettings extends React__namespace.Component {
   _isMounted = false;
   bgUrlRef = /*#__PURE__*/React__namespace.createRef();
@@ -31834,15 +31835,6 @@ class InteractiveGraphEditor extends React__namespace.Component {
   UNSAFE_componentWillMount() {
     DeprecationMixin.UNSAFE_componentWillMount.call(this);
   }
-  static buildGraphKey(correct) {
-    const testGraphKey = [];
-    for (const key in correct) {
-      if (correct[key]) {
-        typeof correct[key] === "number" || typeof correct[key] === "string" || typeof correct[key] === "boolean" ? testGraphKey.push(correct[key]) : testGraphKey.push(0);
-      }
-    }
-    return testGraphKey.join(":");
-  }
   render() {
     let graph;
     let equationString;
@@ -31885,9 +31877,6 @@ class InteractiveGraphEditor extends React__namespace.Component {
           });
         }
       };
-      // This is used to force a remount of the graph component
-      // when there's a significant change
-      const graphKey = InteractiveGraphEditor.buildGraphKey(correct);
       graph =
       /*#__PURE__*/
       // There are a bunch of props that renderer.jsx passes to widgets via
@@ -31895,7 +31884,6 @@ class InteractiveGraphEditor extends React__namespace.Component {
       // bother passing.
       // @ts-expect-error - TS2769 - No overload matches this call.
       React__namespace.createElement(InteractiveGraph, _extends({}, graphProps, {
-        key: graphKey,
         containerSizeClass: sizeClass,
         apiOptions: {
           ...this.props.apiOptions,
@@ -31934,6 +31922,10 @@ class InteractiveGraphEditor extends React__namespace.Component {
           correct: {
             type: "point",
             numPoints: points
+          },
+          graph: {
+            type: "point",
+            numPoints: points
           }
         });
       }
@@ -31954,7 +31946,8 @@ class InteractiveGraphEditor extends React__namespace.Component {
           snapTo: "grid"
         };
         this.props.onChange({
-          correct: graph
+          correct: graph,
+          graph: graph
         });
       },
       style: styles$a.singleSelectShort
@@ -31997,12 +31990,18 @@ class InteractiveGraphEditor extends React__namespace.Component {
       // Don't show indeterminate checkbox state
       !!this.props.correct?.showAngles,
       onChange: () => {
-        this.props.onChange({
-          correct: {
-            ...this.props.correct,
-            showAngles: !this.props.correct.showAngles
-          }
-        });
+        if (this.props.graph?.type === "polygon") {
+          this.props.onChange({
+            correct: {
+              ...this.props.correct,
+              showAngles: !this.props.correct.showAngles
+            },
+            graph: {
+              ...this.props.graph,
+              showAngles: !this.props.graph.showAngles
+            }
+          });
+        }
       }
     }), /*#__PURE__*/React__namespace.createElement(InfoTip$b, null, /*#__PURE__*/React__namespace.createElement("p", null, "Displays the interior angle measures."))), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
       style: styles$a.row
@@ -32012,12 +32011,18 @@ class InteractiveGraphEditor extends React__namespace.Component {
       // Don't show indeterminate checkbox state
       !!this.props.correct?.showSides,
       onChange: () => {
-        this.props.onChange({
-          correct: {
-            ...this.props.correct,
-            showSides: !this.props.correct.showSides
-          }
-        });
+        if (this.props.graph?.type === "polygon") {
+          this.props.onChange({
+            correct: {
+              ...this.props.correct,
+              showSides: !this.props.correct.showSides
+            },
+            graph: {
+              ...this.props.graph,
+              showSides: !this.props.graph.showSides
+            }
+          });
+        }
       }
     }), /*#__PURE__*/React__namespace.createElement(InfoTip$b, null, /*#__PURE__*/React__namespace.createElement("p", null, "Displays the side lengths.")))), this.props.correct?.type === "segment" && /*#__PURE__*/React__namespace.createElement(LabeledRow, {
       label: "Number of segments:"
@@ -32029,6 +32034,10 @@ class InteractiveGraphEditor extends React__namespace.Component {
             type: "segment",
             numSegments: sides,
             coords: null
+          },
+          graph: {
+            type: "segment",
+            numSegments: sides
           }
         });
       }