@khanacademy/perseus-editor 8.1.0 → 9.0.0

package/dist/index.js

@@ -83,7 +83,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 = "8.1.0";
+const libVersion = "9.0.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -29245,7 +29245,7 @@ class InteractionEditor extends React__namespace.Component {
       gridStep: this.props.graph.gridStep,
       markings: this.props.graph.markings,
       onChange: this._updateGraphProps
-    }), this.props.graph.valid !== true && /*#__PURE__*/React__namespace.createElement("div", null, this.props.graph.valid)), ___default["default"].map(this.props.elements, function (element, n) {
+    }), /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, this.props.graph.valid !== true && /*#__PURE__*/React__namespace.createElement("div", null, this.props.graph.valid))), ___default["default"].map(this.props.elements, function (element, n) {
       if (element.type === "movable-point") {
         return /*#__PURE__*/React__namespace.createElement(perseus.ElementContainer, {
           title: /*#__PURE__*/React__namespace.createElement("span", null, "Movable point", " ", /*#__PURE__*/React__namespace.createElement(TeX, null, "(x_{" + element.options.varSubscript + "}, y_{" + element.options.varSubscript + "})"))
@@ -29679,6 +29679,39 @@ const strutStyle = size => {
   };
 };
 
+function Heading(_ref) {
+  let {
+    title,
+    isOpen,
+    isCollapsible,
+    onToggle
+  } = _ref;
+  return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: {
+      flexDirection: "row",
+      justifyContent: "space-between",
+      backgroundColor: wonderBlocksTokens.color.offBlack8,
+      padding: wonderBlocksTokens.spacing.xSmall_8,
+      marginTop: wonderBlocksTokens.spacing.small_12,
+      // NOTE(jeremy): This is the inverse of the @editorPadding CSS
+      // variable found in perseus-editor.less. For now, it must
+      // match otherwise there's a gap from this header to the edge
+      // of the editor borders.
+      marginInline: -10,
+      cursor: isCollapsible ? "pointer" : "default",
+      userSelect: "none"
+    },
+    onClick: () => isCollapsible && onToggle?.(!isOpen)
+  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, {
+    style: {
+      fontSize: 14,
+      fontWeight: 600
+    }
+  }, title), isCollapsible && /*#__PURE__*/React__namespace.createElement(ToggleableCaret, {
+    isExpanded: isOpen
+  }));
+}
+
 function focusWithChromeStickyFocusBugWorkaround(element) {
   // NOTE(marksandstrom) Chrome sticky focus bug.
   //
@@ -29808,7 +29841,7 @@ const LockedFigureSelect = props => {
     key: `${id}-${figureType}`,
     label: figureType,
     onClick: () => onChange(figureType)
-  }, figureType))));
+  }))));
 };
 const styles$x = aphrodite.StyleSheet.create({
   container: {
@@ -30043,7 +30076,7 @@ const ColorSelect = props => {
       color: colorName,
       decorative: true
     })
-  }, colorName)))));
+  })))));
 };
 const styles$s = aphrodite.StyleSheet.create({
   row: {
@@ -30238,7 +30271,7 @@ const LockedEllipseSettings = props => {
     key: option,
     value: option,
     label: option
-  }, option))))), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
+  }))))), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
     style: styles$p.row
   }, "stroke", /*#__PURE__*/React__namespace.createElement(Strut, {
@@ -30254,10 +30287,10 @@ const LockedEllipseSettings = props => {
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
     value: "solid",
     label: "solid"
-  }, "solid"), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
     value: "dashed",
     label: "dashed"
-  }, "dashed"))), /*#__PURE__*/React__namespace.createElement(LockedFigureSettingsActions, {
+  }))), /*#__PURE__*/React__namespace.createElement(LockedFigureSettingsActions, {
     showM2Features: props.showM2Features,
     figureType: props.type,
     onMove: onMove,
@@ -30730,7 +30763,7 @@ const LockedPolygonSettings = props => {
     key: option,
     value: option,
     label: option
-  }, option))))), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
+  }))))), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
     style: [styles$i.row, styles$i.spaceUnder]
   }, "stroke", /*#__PURE__*/React__namespace.createElement(Strut, {
@@ -30746,10 +30779,10 @@ const LockedPolygonSettings = props => {
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
     value: "solid",
     label: "solid"
-  }, "solid"), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
     value: "dashed",
     label: "dashed"
-  }, "dashed"))), /*#__PURE__*/React__namespace.createElement(LabeledSwitch, {
+  }))), /*#__PURE__*/React__namespace.createElement(LabeledSwitch, {
     label: "show vertices",
     checked: showVertices,
     onChange: newValue => onChangeProps({
@@ -30976,6 +31009,7 @@ const LockedFiguresSection = props => {
   // expand/collapse all button. Set the whole array to false initially.
   const collapsedStateArray = Array((props.figures ?? []).length).fill(false);
   const [expandedStates, setExpandedStates] = React__namespace.useState(collapsedStateArray);
+  const [isExpanded, setIsExpanded] = React__namespace.useState(true);
   const uniqueId = wonderBlocksCore.useUniqueIdWithMock().get("locked-figures-section");
   const {
     figures,
@@ -31065,7 +31099,12 @@ const LockedFiguresSection = props => {
   const allCollapsed = expandedStates.every(value => !value);
   const buttonLabel = allCollapsed ? "Expand all" : "Collapse all";
   const showExpandButton = !!figures?.length;
-  return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, figures?.map((figure, index) => {
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Heading, {
+    title: "Locked Figures",
+    isOpen: isExpanded,
+    onToggle: () => setIsExpanded(!isExpanded),
+    isCollapsible: true
+  }), isExpanded && /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, figures?.map((figure, index) => {
     if (figure.type === "function") {
       // TODO(LEMS-1947): Add locked function settings.
       // Remove this block once function locked figure settings are
@@ -31100,7 +31139,7 @@ const LockedFiguresSection = props => {
     kind: "secondary",
     onClick: () => toggleExpanded(allCollapsed),
     style: styles$g.button
-  }, buttonLabel)));
+  }, buttonLabel))));
 };
 const styles$g = aphrodite.StyleSheet.create({
   buttonContainer: {
@@ -31203,30 +31242,27 @@ const styles$e = aphrodite.StyleSheet.create({
   }
 });
 
-function Heading(_ref) {
-  let {
-    title,
-    isOpen,
-    onToggle
-  } = _ref;
-  return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+function InteractiveGraphCorrectAnswer(props) {
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Heading, {
+    title: "Correct Answer",
+    isOpen: true,
+    isCollapsible: false
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelXSmall, {
     style: {
-      flexDirection: "row",
-      justifyContent: "space-between",
-      backgroundColor: wonderBlocksTokens.color.offBlack8,
-      padding: wonderBlocksTokens.spacing.xSmall_8,
-      marginTop: wonderBlocksTokens.spacing.small_12,
-      // NOTE(jeremy): This is the inverse of the @editorPadding CSS
-      // variable found in perseus-editor.less. For now, it must
-      // match otherwise there's a gap from this header to the edge
-      // of the editor borders.
-      marginInline: -10,
-      cursor: "pointer"
-    },
-    onClick: () => onToggle?.(!isOpen)
-  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelSmall, null, title), /*#__PURE__*/React__namespace.createElement(ToggleableCaret, {
-    isExpanded: isOpen
-  }));
+      paddingTop: wonderBlocksTokens.spacing.xxSmall_6,
+      paddingBottom: wonderBlocksTokens.spacing.xxSmall_6,
+      color: wonderBlocksTokens.color.offBlack64
+    }
+  }, "Graph the correct answer in the graph below and ensure the equation or point coordinates displayed represent the correct answer."), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.BodyMonospace, {
+    style: {
+      fontSize: 12,
+      backgroundColor: "#eee",
+      paddingInline: wonderBlocksTokens.spacing.xxSmall_6,
+      borderColor: "#ccc",
+      borderStyle: "solid",
+      borderWidth: 1
+    }
+  }, props.equationString)), props.children));
 }
 
 /* eslint-disable react/forbid-prop-types, react/no-unsafe */
@@ -31548,6 +31584,7 @@ class InteractiveGraphSettings extends React__namespace.Component {
     return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Heading, {
       title: "Common Graph Settings",
       isOpen: this.state.isExpanded,
+      isCollapsible: true,
       onToggle: () => this.setState({
         isExpanded: !this.state.isExpanded
       })
@@ -31846,6 +31883,7 @@ const StartCoordSettings = props => {
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
     style: styles$b.container
   }, /*#__PURE__*/React__namespace.createElement(Heading, {
+    isCollapsible: true,
     title: "Start coordinates",
     isOpen: isOpen,
     onToggle: () => setIsOpen(!isOpen)
@@ -32009,7 +32047,9 @@ class InteractiveGraphEditor extends React__namespace.Component {
           }
         });
       }
-    })), this.props.correct?.type === "point" && /*#__PURE__*/React__namespace.createElement(LabeledRow, {
+    })), /*#__PURE__*/React__namespace.createElement(InteractiveGraphCorrectAnswer, {
+      equationString: equationString
+    }, graph), this.props.correct?.type === "point" && /*#__PURE__*/React__namespace.createElement(LabeledRow, {
       label: "Number of Points:"
     }, /*#__PURE__*/React__namespace.createElement(GraphPointsCountSelector, {
       numPoints: this.props.correct?.numPoints,
@@ -32193,18 +32233,7 @@ class InteractiveGraphEditor extends React__namespace.Component {
     }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
       value: "congruent",
       label: "be congruent"
-    })), /*#__PURE__*/React__namespace.createElement(InfoTip$b, null, /*#__PURE__*/React__namespace.createElement("p", null, "Congruency requires only that the angle measures are the same. An exact match implies congruency, but also requires that the angles have the same orientation and that the vertices are in the same position."))), /*#__PURE__*/React__namespace.createElement(LabeledRow, {
-      label: "Correct answer:"
-    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.BodyMonospace, {
-      style: {
-        fontSize: 12,
-        backgroundColor: "#eee",
-        paddingInline: wonderBlocksTokens.spacing.xxSmall_6,
-        borderColor: "#ccc",
-        borderStyle: "solid",
-        borderWidth: 1
-      }
-    }, equationString), /*#__PURE__*/React__namespace.createElement(InfoTip$b, null, /*#__PURE__*/React__namespace.createElement("p", null, "Graph the correct answer in the graph below and ensure the equation or point coordinates displayed represent the correct answer."))), graph,
+    })), /*#__PURE__*/React__namespace.createElement(InfoTip$b, null, /*#__PURE__*/React__namespace.createElement("p", null, "Congruency requires only that the angle measures are the same. An exact match implies congruency, but also requires that the angles have the same orientation and that the vertices are in the same position."))),
     // Only show the "Add locked figure" dropdown if the graph
     // is using Mafs.
     this.props.graph && this.props.apiOptions?.flags?.mafs?.[this.props.graph.type] && /*#__PURE__*/React__namespace.createElement(LockedFiguresSection, {