@khanacademy/perseus-editor 8.1.0 → 8.2.0

package/dist/components/heading.d.ts

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

package/dist/components/interactive-graph-correct-answer.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+type Props = {
+    equationString: string;
+    children: React.ReactNode;
+};
+export declare function InteractiveGraphCorrectAnswer(props: Props): JSX.Element;
+export {};

package/dist/es/index.js

@@ -20,7 +20,7 @@ import { isTruthy, UnreachableCaseError } from '@khanacademy/wonder-stuff-core';
 import { useMathInputI18n, createMathField } from '@khanacademy/math-input';
 import { ActionMenu, ActionItem, SingleSelect, OptionItem } from '@khanacademy/wonder-blocks-dropdown';
 import { TextField, Checkbox as Checkbox$1 } from '@khanacademy/wonder-blocks-form';
-import { LabelSmall, LabelMedium, LabelLarge, BodyMonospace } from '@khanacademy/wonder-blocks-typography';
+import { LabelSmall, LabelLarge, LabelMedium, LabelXSmall, BodyMonospace } from '@khanacademy/wonder-blocks-typography';
 import Button from '@khanacademy/wonder-blocks-button';
 import { AccordionSection } from '@khanacademy/wonder-blocks-accordion';
 import IconButton from '@khanacademy/wonder-blocks-icon-button';
@@ -37,7 +37,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 = "8.1.0";
+const libVersion = "8.2.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -29593,6 +29593,38 @@ const strutStyle = size => {
   };
 };
 
+function Heading({
+  title,
+  isOpen,
+  isCollapsible,
+  onToggle
+}) {
+  return /*#__PURE__*/React.createElement(View, {
+    style: {
+      flexDirection: "row",
+      justifyContent: "space-between",
+      backgroundColor: color.offBlack8,
+      padding: spacing.xSmall_8,
+      marginTop: 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 == null ? void 0 : onToggle(!isOpen))
+  }, /*#__PURE__*/React.createElement(LabelLarge, {
+    style: {
+      fontSize: 14,
+      fontWeight: 600
+    }
+  }, title), isCollapsible && /*#__PURE__*/React.createElement(ToggleableCaret, {
+    isExpanded: isOpen
+  }));
+}
+
 function focusWithChromeStickyFocusBugWorkaround(element) {
   // NOTE(marksandstrom) Chrome sticky focus bug.
   //
@@ -30885,6 +30917,7 @@ const LockedFiguresSection = props => {
   // expand/collapse all button. Set the whole array to false initially.
   const collapsedStateArray = Array(((_props$figures = props.figures) != null ? _props$figures : []).length).fill(false);
   const [expandedStates, setExpandedStates] = React.useState(collapsedStateArray);
+  const [isExpanded, setIsExpanded] = React.useState(true);
   const uniqueId = useUniqueIdWithMock().get("locked-figures-section");
   const {
     figures,
@@ -30971,7 +31004,12 @@ const LockedFiguresSection = props => {
   const allCollapsed = expandedStates.every(value => !value);
   const buttonLabel = allCollapsed ? "Expand all" : "Collapse all";
   const showExpandButton = !!(figures != null && figures.length);
-  return /*#__PURE__*/React.createElement(View, null, figures == null ? void 0 : figures.map((figure, index) => {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Heading, {
+    title: "Locked Figures",
+    isOpen: isExpanded,
+    onToggle: () => setIsExpanded(!isExpanded),
+    isCollapsible: true
+  }), isExpanded && /*#__PURE__*/React.createElement(View, null, figures == null ? void 0 : figures.map((figure, index) => {
     if (figure.type === "function") {
       // TODO(LEMS-1947): Add locked function settings.
       // Remove this block once function locked figure settings are
@@ -31006,7 +31044,7 @@ const LockedFiguresSection = props => {
     kind: "secondary",
     onClick: () => toggleExpanded(allCollapsed),
     style: styles$g.button
-  }, buttonLabel)));
+  }, buttonLabel))));
 };
 const styles$g = StyleSheet.create({
   buttonContainer: {
@@ -31108,29 +31146,27 @@ const styles$e = StyleSheet.create({
   }
 });
 
-function Heading({
-  title,
-  isOpen,
-  onToggle
-}) {
-  return /*#__PURE__*/React.createElement(View, {
+function InteractiveGraphCorrectAnswer(props) {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Heading, {
+    title: "Correct Answer",
+    isOpen: true,
+    isCollapsible: false
+  }), /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(LabelXSmall, {
     style: {
-      flexDirection: "row",
-      justifyContent: "space-between",
-      backgroundColor: color.offBlack8,
-      padding: spacing.xSmall_8,
-      marginTop: 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 == null ? void 0 : onToggle(!isOpen)
-  }, /*#__PURE__*/React.createElement(LabelSmall, null, title), /*#__PURE__*/React.createElement(ToggleableCaret, {
-    isExpanded: isOpen
-  }));
+      paddingTop: spacing.xxSmall_6,
+      paddingBottom: spacing.xxSmall_6,
+      color: color.offBlack64
+    }
+  }, "Graph the correct answer in the graph below and ensure the equation or point coordinates displayed represent the correct answer."), /*#__PURE__*/React.createElement(BodyMonospace, {
+    style: {
+      fontSize: 12,
+      backgroundColor: "#eee",
+      paddingInline: spacing.xxSmall_6,
+      borderColor: "#ccc",
+      borderStyle: "solid",
+      borderWidth: 1
+    }
+  }, props.equationString)), props.children));
 }
 
 const {
@@ -31423,6 +31459,7 @@ class InteractiveGraphSettings extends React.Component {
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Heading, {
       title: "Common Graph Settings",
       isOpen: this.state.isExpanded,
+      isCollapsible: true,
       onToggle: () => this.setState({
         isExpanded: !this.state.isExpanded
       })
@@ -31733,6 +31770,7 @@ const StartCoordSettings = props => {
   return /*#__PURE__*/React.createElement(View, {
     style: styles$b.container
   }, /*#__PURE__*/React.createElement(Heading, {
+    isCollapsible: true,
     title: "Start coordinates",
     isOpen: isOpen,
     onToggle: () => setIsOpen(!isOpen)
@@ -31915,7 +31953,9 @@ class InteractiveGraphEditor extends React.Component {
           }
         });
       }
-    })), ((_this$props$correct = this.props.correct) == null ? void 0 : _this$props$correct.type) === "point" && /*#__PURE__*/React.createElement(LabeledRow, {
+    })), /*#__PURE__*/React.createElement(InteractiveGraphCorrectAnswer, {
+      equationString: equationString
+    }, graph), ((_this$props$correct = this.props.correct) == null ? void 0 : _this$props$correct.type) === "point" && /*#__PURE__*/React.createElement(LabeledRow, {
       label: "Number of Points:"
     }, /*#__PURE__*/React.createElement(GraphPointsCountSelector, {
       numPoints: (_this$props$correct2 = this.props.correct) == null ? void 0 : _this$props$correct2.numPoints,
@@ -32095,18 +32135,7 @@ class InteractiveGraphEditor extends React.Component {
     }), /*#__PURE__*/React.createElement(OptionItem, {
       value: "congruent",
       label: "be congruent"
-    })), /*#__PURE__*/React.createElement(InfoTip$b, null, /*#__PURE__*/React.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.createElement(LabeledRow, {
-      label: "Correct answer:"
-    }, /*#__PURE__*/React.createElement(BodyMonospace, {
-      style: {
-        fontSize: 12,
-        backgroundColor: "#eee",
-        paddingInline: spacing.xxSmall_6,
-        borderColor: "#ccc",
-        borderStyle: "solid",
-        borderWidth: 1
-      }
-    }, equationString), /*#__PURE__*/React.createElement(InfoTip$b, null, /*#__PURE__*/React.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.createElement(InfoTip$b, null, /*#__PURE__*/React.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$apiOption2 = this.props.apiOptions) == null || (_this$props$apiOption2 = _this$props$apiOption2.flags) == null || (_this$props$apiOption2 = _this$props$apiOption2.mafs) == null ? void 0 : _this$props$apiOption2[this.props.graph.type]) && /*#__PURE__*/React.createElement(LockedFiguresSection, {