@khanacademy/perseus-editor 7.0.0 → 7.0.2

package/dist/components/heading.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+declare function Heading({ title, isOpen, onToggle, }: {
+    title: string;
+    isOpen: boolean;
+    onToggle?: (isOpen: boolean) => void;
+}): JSX.Element;
+export default Heading;

package/dist/components/{graph-locked-figures/locked-figure-settings-accordion.d.ts → perseus-editor-accordion.d.ts}

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

package/dist/es/index.js

@@ -36,7 +36,7 @@ import Banner from '@khanacademy/wonder-blocks-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";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -29768,71 +29768,6 @@ const styles$v = StyleSheet.create({
   }
 });
 
-const ColorSwatch = props => {
-  const {
-    color: color$1,
-    filled = true,
-    decorative = false
-  } = props;
-  return /*#__PURE__*/React.createElement(View, {
-    "aria-label":
-    // Don't include an aria label for decorative circles.
-    !decorative ? `${color$1}, ${filled ? "filled" : "open"}` : undefined,
-    style: [styles$u.colorSwatch, {
-      border: `4px solid ${lockedFigureColors[color$1]}`,
-      backgroundColor: filled ? lockedFigureColors[color$1] : color.white
-    }]
-  });
-};
-const styles$u = 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 ${color.offWhite}`,
-    borderRadius: "50%",
-    width: spacing.large_24,
-    height: spacing.large_24
-  }
-});
-
-const possibleColors = Object.keys(lockedFigureColors);
-const ColorSelect = props => {
-  const {
-    selectedValue,
-    style,
-    onChange
-  } = props;
-  return /*#__PURE__*/React.createElement(View, {
-    style: [styles$t.row, style]
-  }, /*#__PURE__*/React.createElement(LabelMedium, {
-    tag: "label",
-    style: styles$t.row
-  }, "color", /*#__PURE__*/React.createElement(Strut, {
-    size: spacing.xxSmall_6
-  }), /*#__PURE__*/React.createElement(SingleSelect, {
-    selectedValue: selectedValue,
-    onChange: onChange
-    // Placeholder is required, but never gets used.
-    ,
-    placeholder: ""
-  }, possibleColors.map(colorName => /*#__PURE__*/React.createElement(OptionItem, {
-    key: colorName,
-    value: colorName,
-    label: colorName,
-    leftAccessory: /*#__PURE__*/React.createElement(ColorSwatch, {
-      color: colorName,
-      decorative: true
-    })
-  }, colorName)))));
-};
-const styles$t = StyleSheet.create({
-  row: {
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center"
-  }
-});
-
 const CoordinatePairInput = props => {
   const {
     coord,
@@ -29865,32 +29800,32 @@ const CoordinatePairInput = props => {
     onChange(newCoords);
   }
   return /*#__PURE__*/React.createElement(View, {
-    style: [styles$s.row, style]
+    style: [styles$u.row, style]
   }, /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: styles$s.row
+    style: styles$u.row
   }, labels ? labels[0] : "x coord", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
   }), /*#__PURE__*/React.createElement(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.createElement(Strut, {
     size: spacing.medium_16
   }), /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: styles$s.row
+    style: styles$u.row
   }, labels ? labels[1] : "y coord", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
   }), /*#__PURE__*/React.createElement(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 = StyleSheet.create({
+const styles$u = StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -29905,44 +29840,7 @@ const styles$s = StyleSheet.create({
   }
 });
 
-const EllipseSwatch = props => {
-  const {
-    color,
-    fillStyle,
-    strokeStyle
-  } = props;
-  return /*#__PURE__*/React.createElement(View, {
-    "aria-label": `${color}, stroke ${strokeStyle}, fill ${fillStyle}`,
-    style: [styles$r.container, {
-      border: `4px ${strokeStyle} ${lockedFigureColors[color]}`
-    }]
-  }, /*#__PURE__*/React.createElement(View, {
-    style: [styles$r.innerCircle, {
-      backgroundColor: lockedFigureColors[color],
-      opacity: lockedFigureFillStyles[fillStyle]
-    }]
-  }));
-};
-const styles$r = 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 ${color.offWhite}`,
-    borderRadius: "50%",
-    width: spacing.xLarge_32,
-    height: spacing.large_24,
-    backgroundColor: color.white,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  innerCircle: {
-    width: 28,
-    height: 20,
-    borderRadius: "50%"
-  }
-});
-
-const LockedFigureSettingsAccordion = props => {
+const PerseusEditorAccordion = props => {
   const {
     children,
     header,
@@ -29956,18 +29854,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.createElement(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.createElement(View, {
-    style: [styles$q.accordionPanel, panelStyle]
+    style: [styles$t.accordionPanel, panelStyle]
   }, children)));
 };
-const styles$q = StyleSheet.create({
+const styles$t = StyleSheet.create({
   container: {
     backgroundColor: color.fadedBlue8,
     marginTop: spacing.xSmall_8
@@ -29988,6 +29886,108 @@ const styles$q = StyleSheet.create({
   }
 });
 
+const ColorSwatch = props => {
+  const {
+    color: color$1,
+    filled = true,
+    decorative = false
+  } = props;
+  return /*#__PURE__*/React.createElement(View, {
+    "aria-label":
+    // Don't include an aria label for decorative circles.
+    !decorative ? `${color$1}, ${filled ? "filled" : "open"}` : undefined,
+    style: [styles$s.colorSwatch, {
+      border: `4px solid ${lockedFigureColors[color$1]}`,
+      backgroundColor: filled ? lockedFigureColors[color$1] : color.white
+    }]
+  });
+};
+const styles$s = 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 ${color.offWhite}`,
+    borderRadius: "50%",
+    width: spacing.large_24,
+    height: spacing.large_24
+  }
+});
+
+const possibleColors = Object.keys(lockedFigureColors);
+const ColorSelect = props => {
+  const {
+    selectedValue,
+    style,
+    onChange
+  } = props;
+  return /*#__PURE__*/React.createElement(View, {
+    style: [styles$r.row, style]
+  }, /*#__PURE__*/React.createElement(LabelMedium, {
+    tag: "label",
+    style: styles$r.row
+  }, "color", /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.xxSmall_6
+  }), /*#__PURE__*/React.createElement(SingleSelect, {
+    selectedValue: selectedValue,
+    onChange: onChange
+    // Placeholder is required, but never gets used.
+    ,
+    placeholder: ""
+  }, possibleColors.map(colorName => /*#__PURE__*/React.createElement(OptionItem, {
+    key: colorName,
+    value: colorName,
+    label: colorName,
+    leftAccessory: /*#__PURE__*/React.createElement(ColorSwatch, {
+      color: colorName,
+      decorative: true
+    })
+  }, colorName)))));
+};
+const styles$r = StyleSheet.create({
+  row: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center"
+  }
+});
+
+const EllipseSwatch = props => {
+  const {
+    color,
+    fillStyle,
+    strokeStyle
+  } = props;
+  return /*#__PURE__*/React.createElement(View, {
+    "aria-label": `${color}, stroke ${strokeStyle}, fill ${fillStyle}`,
+    style: [styles$q.container, {
+      border: `4px ${strokeStyle} ${lockedFigureColors[color]}`
+    }]
+  }, /*#__PURE__*/React.createElement(View, {
+    style: [styles$q.innerCircle, {
+      backgroundColor: lockedFigureColors[color],
+      opacity: lockedFigureFillStyles[fillStyle]
+    }]
+  }));
+};
+const styles$q = 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 ${color.offWhite}`,
+    borderRadius: "50%",
+    width: spacing.xLarge_32,
+    height: spacing.large_24,
+    backgroundColor: 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
@@ -30073,7 +30073,7 @@ const LockedEllipseSettings = props => {
       color: newValue
     });
   }
-  return /*#__PURE__*/React.createElement(LockedFigureSettingsAccordion, {
+  return /*#__PURE__*/React.createElement(PerseusEditorAccordion, {
     expanded: expanded,
     onToggle: onToggle,
     header:
@@ -30226,7 +30226,7 @@ const DefiningPointSettings = props => {
       color: newValue
     });
   }
-  return /*#__PURE__*/React.createElement(LockedFigureSettingsAccordion, {
+  return /*#__PURE__*/React.createElement(PerseusEditorAccordion, {
     expanded: expanded,
     onToggle: onToggle,
     containerStyle: styles$m.container,
@@ -30355,7 +30355,7 @@ const LockedLineSettings = props => {
       })]
     });
   }
-  return /*#__PURE__*/React.createElement(LockedFigureSettingsAccordion, {
+  return /*#__PURE__*/React.createElement(PerseusEditorAccordion, {
     expanded: props.expanded,
     onToggle: props.onToggle,
     header: /*#__PURE__*/React.createElement(View, {
@@ -30480,7 +30480,7 @@ const LockedPointSettings = props => {
       color: newValue
     });
   }
-  return /*#__PURE__*/React.createElement(LockedFigureSettingsAccordion, {
+  return /*#__PURE__*/React.createElement(PerseusEditorAccordion, {
     expanded: props.expanded,
     onToggle: props.onToggle,
     header:
@@ -30584,7 +30584,7 @@ const LockedPolygonSettings = props => {
       color: newValue
     });
   }
-  return /*#__PURE__*/React.createElement(LockedFigureSettingsAccordion, {
+  return /*#__PURE__*/React.createElement(PerseusEditorAccordion, {
     expanded: expanded,
     onToggle: onToggle,
     header:
@@ -30649,7 +30649,7 @@ const LockedPolygonSettings = props => {
       showVertices: newValue
     }),
     style: styles$h.spaceUnder
-  }), /*#__PURE__*/React.createElement(LockedFigureSettingsAccordion, {
+  }), /*#__PURE__*/React.createElement(PerseusEditorAccordion, {
     header: /*#__PURE__*/React.createElement(LabelLarge, null, "Points"),
     expanded: true,
     containerStyle: styles$h.pointAccordionContainer,
@@ -30757,7 +30757,7 @@ const LockedVectorSettings = props => {
       color: newColor
     });
   }
-  return /*#__PURE__*/React.createElement(LockedFigureSettingsAccordion, {
+  return /*#__PURE__*/React.createElement(PerseusEditorAccordion, {
     expanded: props.expanded,
     onToggle: props.onToggle,
     header: /*#__PURE__*/React.createElement(View, {
@@ -30775,7 +30775,7 @@ const LockedVectorSettings = props => {
     onChange: handleColorChange
   })), isInvalid && /*#__PURE__*/React.createElement(LabelMedium, {
     style: styles$g.errorText
-  }, lengthErrorMessage), /*#__PURE__*/React.createElement(LockedFigureSettingsAccordion, {
+  }, lengthErrorMessage), /*#__PURE__*/React.createElement(PerseusEditorAccordion, {
     expanded: true // Initial state is expanded
     ,
     containerStyle: styles$g.container,
@@ -30789,7 +30789,7 @@ const LockedVectorSettings = props => {
     onChange: newProps => {
       handleChangePoint(newProps, 0);
     }
-  })), /*#__PURE__*/React.createElement(LockedFigureSettingsAccordion, {
+  })), /*#__PURE__*/React.createElement(PerseusEditorAccordion, {
     expanded: true // Initial state is expanded
     ,
     containerStyle: styles$g.container,
@@ -31087,20 +31087,6 @@ const styles$d = StyleSheet.create({
   }
 });
 
-const {
-  ButtonGroup: ButtonGroup$2,
-  InfoTip: InfoTip$c,
-  PropCheckBox: PropCheckBox$7,
-  RangeInput: RangeInput$4
-} = components;
-const defaultBackgroundImage$1 = {
-  url: null,
-  width: 0,
-  height: 0
-};
-function numSteps(range, step) {
-  return Math.floor((range[1] - range[0]) / step);
-}
 function Heading({
   title,
   isOpen,
@@ -31125,6 +31111,21 @@ function Heading({
     isExpanded: isOpen
   }));
 }
+
+const {
+  ButtonGroup: ButtonGroup$2,
+  InfoTip: InfoTip$c,
+  PropCheckBox: PropCheckBox$7,
+  RangeInput: RangeInput$4
+} = 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.Component {
   static stateFromProps(props) {
     return {
@@ -31731,15 +31732,6 @@ class InteractiveGraphEditor extends React.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() {
     var _this$props$graph$typ, _this$props$graph, _this$props$correct, _this$props$correct2, _this$props$correct3, _this$props$correct4, _this$props$correct5, _this$props$correct6, _this$props$correct7, _this$props$correct8, _this$props$correct9, _this$props$correct10, _this$props$correct11, _this$props$apiOption, _this$props$apiOption2, _this$props$apiOption3;
     let graph;
@@ -31783,9 +31775,6 @@ class InteractiveGraphEditor extends React.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
@@ -31793,7 +31782,6 @@ class InteractiveGraphEditor extends React.Component {
       // bother passing.
       // @ts-expect-error - TS2769 - No overload matches this call.
       React.createElement(InteractiveGraph, _extends({}, graphProps, {
-        key: graphKey,
         containerSizeClass: sizeClass,
         apiOptions: _extends({}, this.props.apiOptions, {
           isMobile: false
@@ -31831,6 +31819,10 @@ class InteractiveGraphEditor extends React.Component {
           correct: {
             type: "point",
             numPoints: points
+          },
+          graph: {
+            type: "point",
+            numPoints: points
           }
         });
       }
@@ -31850,7 +31842,8 @@ class InteractiveGraphEditor extends React.Component {
           snapTo: "grid"
         });
         this.props.onChange({
-          correct: graph
+          correct: graph,
+          graph: graph
         });
       },
       style: styles$a.singleSelectShort
@@ -31892,11 +31885,17 @@ class InteractiveGraphEditor extends React.Component {
       // Don't show indeterminate checkbox state
       !!((_this$props$correct8 = this.props.correct) != null && _this$props$correct8.showAngles),
       onChange: () => {
-        this.props.onChange({
-          correct: _extends({}, this.props.correct, {
-            showAngles: !this.props.correct.showAngles
-          })
-        });
+        var _this$props$graph2;
+        if (((_this$props$graph2 = this.props.graph) == null ? void 0 : _this$props$graph2.type) === "polygon") {
+          this.props.onChange({
+            correct: _extends({}, this.props.correct, {
+              showAngles: !this.props.correct.showAngles
+            }),
+            graph: _extends({}, this.props.graph, {
+              showAngles: !this.props.graph.showAngles
+            })
+          });
+        }
       }
     }), /*#__PURE__*/React.createElement(InfoTip$b, null, /*#__PURE__*/React.createElement("p", null, "Displays the interior angle measures."))), /*#__PURE__*/React.createElement(View, {
       style: styles$a.row
@@ -31906,11 +31905,17 @@ class InteractiveGraphEditor extends React.Component {
       // Don't show indeterminate checkbox state
       !!((_this$props$correct9 = this.props.correct) != null && _this$props$correct9.showSides),
       onChange: () => {
-        this.props.onChange({
-          correct: _extends({}, this.props.correct, {
-            showSides: !this.props.correct.showSides
-          })
-        });
+        var _this$props$graph3;
+        if (((_this$props$graph3 = this.props.graph) == null ? void 0 : _this$props$graph3.type) === "polygon") {
+          this.props.onChange({
+            correct: _extends({}, this.props.correct, {
+              showSides: !this.props.correct.showSides
+            }),
+            graph: _extends({}, this.props.graph, {
+              showSides: !this.props.graph.showSides
+            })
+          });
+        }
       }
     }), /*#__PURE__*/React.createElement(InfoTip$b, null, /*#__PURE__*/React.createElement("p", null, "Displays the side lengths.")))), ((_this$props$correct10 = this.props.correct) == null ? void 0 : _this$props$correct10.type) === "segment" && /*#__PURE__*/React.createElement(LabeledRow, {
       label: "Number of segments:"
@@ -31922,6 +31927,10 @@ class InteractiveGraphEditor extends React.Component {
             type: "segment",
             numSegments: sides,
             coords: null
+          },
+          graph: {
+            type: "segment",
+            numSegments: sides
           }
         });
       }