@khanacademy/perseus-editor 6.4.1 → 6.5.1

package/dist/components/coordinate-pair-input.d.ts

@@ -2,6 +2,7 @@
 import type { LockedPointType } from "@khanacademy/perseus";
 type Props = {
     coord: [number, number];
+    error?: boolean;
     onChangeProps: (newProps: Partial<LockedPointType>) => void;
 };
 declare const CoordinatePairInput: (props: Props) => JSX.Element;

package/dist/components/defining-point-settings.d.ts

@@ -11,6 +11,10 @@ export type Props = AccordionProps & LockedPointType & {
      * Whether the extra point settings are toggled open.
      */
     showPoint?: boolean;
+    /**
+     * Optional error message to display.
+     */
+    error?: string | null;
     /**
      * Called when the extra settings toggle switch is changed.
      */

package/dist/components/interactive-graph-settings.d.ts

@@ -66,6 +66,7 @@ type Props = {
     onChange: (arg1: Partial<Props>) => void;
 };
 type State = {
+    isExpanded: boolean;
     labelsTextbox: ReadonlyArray<string>;
     gridStepTextbox: [x: number, y: number];
     snapStepTextbox: [x: number, y: number];
@@ -78,13 +79,21 @@ declare class InteractiveGraphSettings extends React.Component<Props, State> {
     bgUrlRef: React.RefObject<HTMLInputElement>;
     labelXRef: React.RefObject<HTMLInputElement>;
     labelYRef: React.RefObject<HTMLInputElement>;
-    static stateFromProps(props: any): {
-        labelsTextbox: any;
-        gridStepTextbox: any;
-        snapStepTextbox: any;
-        stepTextbox: any;
-        rangeTextbox: any;
-        backgroundImage: any;
+    static stateFromProps(props: Props): {
+        labelsTextbox: readonly string[];
+        gridStepTextbox: [x: number, y: number];
+        snapStepTextbox: [x: number, y: number];
+        stepTextbox: [x: number, y: number];
+        rangeTextbox: [x: Range, y: Range];
+        backgroundImage: {
+            url: string | null | undefined;
+            width?: number | undefined;
+            height?: number | undefined;
+            top?: number | undefined;
+            left?: number | undefined;
+            scale?: string | number | undefined;
+            bottom?: number | undefined;
+        };
     };
     constructor(props: Props);
     static defaultProps: {

package/dist/components/toggleable-caret.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+type Props = {
+    isExpanded: boolean;
+};
+/**
+ * Displays a caret in either expanded or collapsed state. For use in headings
+ * that collapse a region.
+ */
+declare function ToggleableCaret(props: Props): JSX.Element;
+export default ToggleableCaret;

package/dist/es/index.js

@@ -29,7 +29,7 @@ import trashIcon from '@phosphor-icons/core/bold/trash-bold.svg';
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus-editor";
-const libVersion = "6.4.1";
+const libVersion = "6.5.1";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -219,7 +219,7 @@ class SectionControlButton extends React.Component {
       role: "button",
       hideDefaultFocusRing: true,
       "aria-label": title,
-      style: styles$y.button
+      style: styles$z.button
     }, ({
       hovered,
       focused,
@@ -227,7 +227,7 @@ class SectionControlButton extends React.Component {
     }) => /*#__PURE__*/React.createElement(InlineIcon$b, icon));
   }
 }
-const styles$y = StyleSheet.create({
+const styles$z = StyleSheet.create({
   button: {
     backgroundColor: color.gold,
     margin: 2,
@@ -20727,6 +20727,27 @@ class WidgetSelect extends React.Component {
   }
 }
 
+/**
+ * Displays a caret in either expanded or collapsed state. For use in headings
+ * that collapse a region.
+ */
+function ToggleableCaret(props) {
+  const iconStyle = props.isExpanded ? styles$y.expanded : styles$y.collapsed;
+  return /*#__PURE__*/React.createElement(PhosphorIcon, {
+    icon: caretRight,
+    style: iconStyle
+  });
+}
+const styles$y = StyleSheet.create({
+  collapsed: {
+    transition: ".15s"
+  },
+  expanded: {
+    transform: "rotate(90deg)",
+    transition: ".15s"
+  }
+});
+
 /**
  * Displays a collapsable list of TeX rendering errors.
  */
@@ -20749,15 +20770,13 @@ class TexErrorView extends React.Component {
     const {
       showErrors
     } = this.state;
-    const iconStyle = showErrors ? styles$x.iconExpanded : styles$x.iconCollapsed;
     return /*#__PURE__*/React.createElement(View, {
       style: styles$x.errorContainer
     }, /*#__PURE__*/React.createElement(View, {
       style: styles$x.title,
       onClick: this.handleToggleTexErrors
-    }, /*#__PURE__*/React.createElement(PhosphorIcon, {
-      icon: caretRight,
-      style: iconStyle
+    }, /*#__PURE__*/React.createElement(ToggleableCaret, {
+      isExpanded: showErrors
     }), "\xA0 TeX Errors (", errorList.length, ")"), showErrors && /*#__PURE__*/React.createElement(View, {
       style: styles$x.errorExplanation
     }, "If your math doesn't display correctly, these errors might help you troubleshoot. Message #content-kitchen for help."), showErrors && errorList.map((e, index) => /*#__PURE__*/React.createElement(View, {
@@ -20790,13 +20809,6 @@ const styles$x = StyleSheet.create({
   },
   error: {
     padding: "4px 10px"
-  },
-  iconCollapsed: {
-    transition: ".15s"
-  },
-  iconExpanded: {
-    transform: "rotate(90deg)",
-    transition: ".15s"
   }
 });
 
@@ -29584,6 +29596,30 @@ const defaultBackgroundImage$1 = {
 function numSteps(range, step) {
   return Math.floor((range[1] - range[0]) / step);
 }
+function Heading({
+  title,
+  isOpen,
+  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: "pointer"
+    },
+    onClick: () => onToggle == null ? void 0 : onToggle(!isOpen)
+  }, /*#__PURE__*/React.createElement(LabelSmall, null, title), /*#__PURE__*/React.createElement(ToggleableCaret, {
+    isExpanded: isOpen
+  }));
+}
 class InteractiveGraphSettings extends React.Component {
   static stateFromProps(props) {
     return {
@@ -29836,7 +29872,9 @@ class InteractiveGraphSettings extends React.Component {
         });
       }
     };
-    this.state = InteractiveGraphSettings.stateFromProps(props);
+    this.state = _extends({
+      isExpanded: true
+    }, InteractiveGraphSettings.stateFromProps(props));
   }
   componentDidMount() {
     // TODO(scottgrant): This is a hack to remove the deprecated call to
@@ -29855,7 +29893,13 @@ class InteractiveGraphSettings extends React.Component {
     this._isMounted = false;
   }
   render() {
-    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Heading, {
+      title: "Common Graph Settings",
+      isOpen: this.state.isExpanded,
+      onToggle: () => this.setState({
+        isExpanded: !this.state.isExpanded
+      })
+    }), this.state.isExpanded && /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement("div", {
       className: "graph-settings"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
@@ -30040,7 +30084,7 @@ class InteractiveGraphSettings extends React.Component {
       key: value,
       value: `${value}`,
       label: `${value}`
-    })))))));
+    }))))))));
   }
 }
 InteractiveGraphSettings.defaultProps = {
@@ -30280,6 +30324,7 @@ const styles$l = StyleSheet.create({
 const CoordinatePairInput = props => {
   const {
     coord,
+    error,
     onChangeProps
   } = props;
 
@@ -30313,7 +30358,7 @@ const CoordinatePairInput = props => {
       coord: newCoords
     });
   }
-  return /*#__PURE__*/React.createElement(View, {
+  return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(View, {
     style: [styles$k.row, styles$k.spaceUnder]
   }, /*#__PURE__*/React.createElement(LabelMedium, {
     htmlFor: xCoordId,
@@ -30324,7 +30369,7 @@ const CoordinatePairInput = props => {
     type: "number",
     value: coordState[0],
     onChange: newValue => handleCoordChange(newValue, 0),
-    style: styles$k.textField
+    style: [styles$k.textField, error ? styles$k.errorField : undefined]
   }), /*#__PURE__*/React.createElement(Strut, {
     size: spacing.medium_16
   }), /*#__PURE__*/React.createElement(LabelMedium, {
@@ -30336,8 +30381,8 @@ const CoordinatePairInput = props => {
     type: "number",
     value: coordState[1],
     onChange: newValue => handleCoordChange(newValue, 1),
-    style: styles$k.textField
-  }));
+    style: [styles$k.textField, error ? styles$k.errorField : undefined]
+  })));
 };
 const styles$k = StyleSheet.create({
   row: {
@@ -30352,6 +30397,10 @@ const styles$k = StyleSheet.create({
   },
   textField: {
     width: spacing.xxxLarge_64
+  },
+  errorField: {
+    borderColor: color.red,
+    backgroundColor: color.fadedRed8
   }
 });
 
@@ -30443,6 +30492,7 @@ const DefiningPointSettings = props => {
     filled = true,
     label,
     showPoint = "false",
+    error,
     onChangeProps,
     onTogglePoint
   } = props;
@@ -30469,6 +30519,7 @@ const DefiningPointSettings = props => {
     }))
   }, /*#__PURE__*/React.createElement(CoordinatePairInput, {
     coord: coord,
+    error: !!error,
     onChangeProps: onChangeProps
   }), onTogglePoint && /*#__PURE__*/React.createElement(LabeledSwitch, {
     label: "show point on graph",
@@ -30569,6 +30620,7 @@ const styles$f = StyleSheet.create({
   }
 });
 
+const lengthZeroStr = "The line cannot have length 0.";
 const LockedLineSettings = props => {
   const {
     kind,
@@ -30590,6 +30642,7 @@ const LockedLineSettings = props => {
   const capitalizeKind = kind.charAt(0).toUpperCase() + kind.slice(1);
   const lineLabel = `${capitalizeKind} (${point1.coord[0]},
         ${point1.coord[1]}), (${point2.coord[0]}, ${point2.coord[1]})`;
+  const isInvalid = point1.coord[0] === point2.coord[0] && point1.coord[1] === point2.coord[1];
   function handleChangePoint(newPointProps, index) {
     const newPoints = [...points];
     newPoints[index] = _extends({}, points[index], newPointProps);
@@ -30637,12 +30690,12 @@ const LockedLineSettings = props => {
   }, /*#__PURE__*/React.createElement(OptionItem, {
     value: "line",
     label: "line"
-  }), /*#__PURE__*/React.createElement(OptionItem, {
-    value: "segment",
-    label: "segment"
   }), /*#__PURE__*/React.createElement(OptionItem, {
     value: "ray",
     label: "ray"
+  }), /*#__PURE__*/React.createElement(OptionItem, {
+    value: "segment",
+    label: "segment"
   }))), /*#__PURE__*/React.createElement(View, {
     style: [styles$e.row, styles$e.spaceUnder]
   }, /*#__PURE__*/React.createElement(ColorSelect, {
@@ -30672,9 +30725,12 @@ const LockedLineSettings = props => {
   }), /*#__PURE__*/React.createElement(OptionItem, {
     value: "dashed",
     label: "dashed"
-  })))), /*#__PURE__*/React.createElement(DefiningPointSettings, _extends({
+  })))), isInvalid && /*#__PURE__*/React.createElement(LabelMedium, {
+    style: styles$e.errorText
+  }, lengthZeroStr), /*#__PURE__*/React.createElement(DefiningPointSettings, _extends({
     label: "Point 1",
-    showPoint: showPoint1
+    showPoint: showPoint1,
+    error: isInvalid ? lengthZeroStr : null
   }, point1, {
     onTogglePoint: newValue => onChangeProps({
       showPoint1: newValue
@@ -30682,7 +30738,8 @@ const LockedLineSettings = props => {
     onChangeProps: newProps => handleChangePoint(newProps, 0)
   })), /*#__PURE__*/React.createElement(DefiningPointSettings, _extends({
     label: "Point 2",
-    showPoint: showPoint2
+    showPoint: showPoint2,
+    error: isInvalid ? lengthZeroStr : null
   }, point2, {
     onTogglePoint: newValue => onChangeProps({
       showPoint2: newValue
@@ -30709,6 +30766,9 @@ const styles$e = StyleSheet.create({
   selectMarginOffset: {
     // Align with the point settings accordions.
     marginInlineEnd: -spacing.xxxSmall_4
+  },
+  errorText: {
+    color: color.red
   }
 });
 
@@ -30865,7 +30925,8 @@ const LockedFiguresSection = props => {
   var _props$figures;
   // Keep track of all figures' accordions' expanded states for the
   // expand/collapse all button. Set the whole array to false initially.
-  const [expandedStates, setExpandedStates] = React.useState(Array((_props$figures = props.figures) == null ? void 0 : _props$figures.length).fill(false));
+  const collapsedStateArray = Array(((_props$figures = props.figures) != null ? _props$figures : []).length).fill(false);
+  const [expandedStates, setExpandedStates] = React.useState(collapsedStateArray);
   const uniqueId = useUniqueIdWithMock().get("locked-figures-section");
   const {
     figures,