@khanacademy/perseus-editor 6.2.0 → 6.2.2

package/dist/es/index.js

@@ -21,14 +21,15 @@ import { useMathInputI18n, createMathField } from '@khanacademy/math-input';
 import { SingleSelect, OptionItem, ActionMenu, ActionItem } 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 Switch from '@khanacademy/wonder-blocks-switch';
+import Banner from '@khanacademy/wonder-blocks-banner';
 import { AccordionSection } from '@khanacademy/wonder-blocks-accordion';
 import Button from '@khanacademy/wonder-blocks-button';
 import trashIcon from '@phosphor-icons/core/bold/trash-bold.svg';
+import Switch from '@khanacademy/wonder-blocks-switch';
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus-editor";
-const libVersion = "6.2.0";
+const libVersion = "6.2.2";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -28365,6 +28366,7 @@ function MathquillInput(props) {
   const mathFieldWrapperRef = useRef(null);
   const mathFieldInstance = useRef();
   const {
+    locale,
     strings
   } = useMathInputI18n();
   useEffect(() => {
@@ -28372,7 +28374,7 @@ function MathquillInput(props) {
     // make a new Mathquill input
     if (mathFieldWrapperRef.current && !mathFieldInstance.current) {
       // Initialize MathQuill.MathField instance
-      mathFieldInstance.current = createMathField(mathFieldWrapperRef.current, strings, baseConfig => _extends({}, baseConfig, {
+      mathFieldInstance.current = createMathField(mathFieldWrapperRef.current, locale, strings, baseConfig => _extends({}, baseConfig, {
         handlers: {
           edit: mathField => {
             // This handler is guaranteed to be called on change, but
@@ -29974,7 +29976,11 @@ class InteractiveGraphSettings extends React.Component {
       showProtractor: this.props.showProtractor,
       onChange: this.change,
       style: styles$k.resetSpaceTop
-    })), this.props.showRuler && /*#__PURE__*/React.createElement(View, {
+    })), (this.props.showRuler || this.props.showProtractor) && /*#__PURE__*/React.createElement(Banner, {
+      layout: "floating",
+      text: "The ruler and protractor are not accessible. Please consider an alternate approach.",
+      kind: "warning"
+    }), this.props.showRuler && /*#__PURE__*/React.createElement(View, {
       style: styles$k.spaceTop
     }, /*#__PURE__*/React.createElement(LabeledRow, {
       label: "Ruler label:",
@@ -30073,7 +30079,8 @@ const styles$k = StyleSheet.create({
   checkboxRow: {
     flexDirection: "row",
     alignItems: "center",
-    justifyContent: "space-between"
+    justifyContent: "space-between",
+    marginBottom: spacing.xSmall_8
   },
   rulerSection: {
     marginTop: spacing.xSmall_8,
@@ -30269,35 +30276,6 @@ const styles$h = StyleSheet.create({
   }
 });
 
-const LabeledSwitch = props => {
-  const {
-    checked,
-    label,
-    style,
-    onChange
-  } = props;
-  const ids = useUniqueIdWithMock();
-  const switchId = ids.get("switch");
-  return /*#__PURE__*/React.createElement(View, {
-    style: [styles$g.row, style]
-  }, /*#__PURE__*/React.createElement(Switch, {
-    id: switchId,
-    checked: checked,
-    onChange: onChange
-  }), /*#__PURE__*/React.createElement(Strut, {
-    size: spacing.xSmall_8
-  }), /*#__PURE__*/React.createElement(LabelMedium, {
-    tag: "label",
-    htmlFor: switchId
-  }, label));
-};
-const styles$g = StyleSheet.create({
-  row: {
-    flexDirection: "row",
-    alignItems: "center"
-  }
-});
-
 const LockedFigureSettingsAccordion = props => {
   const {
     children,
@@ -30312,14 +30290,14 @@ const LockedFigureSettingsAccordion = props => {
   , {
     className: "locked-figure-accordion"
   }, /*#__PURE__*/React.createElement(AccordionSection, {
-    style: [styles$f.container, containerStyle],
-    headerStyle: styles$f.accordionHeader,
+    style: [styles$g.container, containerStyle],
+    headerStyle: styles$g.accordionHeader,
     header: header
   }, /*#__PURE__*/React.createElement(View, {
-    style: [styles$f.accordionPanel, panelStyle]
+    style: [styles$g.accordionPanel, panelStyle]
   }, children)));
 };
-const styles$f = StyleSheet.create({
+const styles$g = StyleSheet.create({
   container: {
     backgroundColor: color.fadedBlue8,
     marginTop: spacing.xSmall_8
@@ -30351,16 +30329,16 @@ const LockedFigureSettingsActions = props => {
     figureAriaLabel
   } = props;
   return /*#__PURE__*/React.createElement(View, {
-    style: styles$e.container
+    style: styles$f.container
   }, /*#__PURE__*/React.createElement(Button, {
     startIcon: trashIcon,
     "aria-label": `Delete ${figureAriaLabel}`,
     onClick: onRemove,
     kind: "tertiary",
-    style: styles$e.deleteButton
+    style: styles$f.deleteButton
   }, "Delete"));
 };
-const styles$e = StyleSheet.create({
+const styles$f = StyleSheet.create({
   container: {
     width: "100%",
     flexDirection: "row",
@@ -30373,6 +30351,35 @@ const styles$e = StyleSheet.create({
   }
 });
 
+const LabeledSwitch = props => {
+  const {
+    checked,
+    label,
+    style,
+    onChange
+  } = props;
+  const ids = useUniqueIdWithMock();
+  const switchId = ids.get("switch");
+  return /*#__PURE__*/React.createElement(View, {
+    style: [styles$e.row, style]
+  }, /*#__PURE__*/React.createElement(Switch, {
+    id: switchId,
+    checked: checked,
+    onChange: onChange
+  }), /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.xSmall_8
+  }), /*#__PURE__*/React.createElement(LabelMedium, {
+    tag: "label",
+    htmlFor: switchId
+  }, label));
+};
+const styles$e = StyleSheet.create({
+  row: {
+    flexDirection: "row",
+    alignItems: "center"
+  }
+});
+
 function focusWithChromeStickyFocusBugWorkaround(element) {
   // NOTE(marksandstrom) Chrome sticky focus bug.
   //
@@ -30418,7 +30425,7 @@ function getValidNumberFromString(value) {
   // If the value is not a number, return 0.
   return isNaN(parsed) ? 0 : parsed;
 }
-const DEFAULT_COLOR = "green";
+const DEFAULT_COLOR = "grayH";
 function getDefaultFigureForType(type) {
   switch (type) {
     case "point":
@@ -30437,7 +30444,6 @@ function getDefaultFigureForType(type) {
         })],
         color: DEFAULT_COLOR,
         lineStyle: "solid",
-        showArrows: false,
         showStartPoint: false,
         showEndPoint: false
       };
@@ -30586,7 +30592,6 @@ const LockedLineSettings = props => {
     points,
     color: lineColor,
     lineStyle = "solid",
-    showArrows,
     showStartPoint,
     showEndPoint,
     onChangeProps,
@@ -30682,13 +30687,7 @@ const LockedLineSettings = props => {
   }), /*#__PURE__*/React.createElement(OptionItem, {
     value: "dashed",
     label: "dashed"
-  })))), /*#__PURE__*/React.createElement(LabeledSwitch, {
-    label: "show arrows",
-    checked: showArrows,
-    onChange: newValue => onChangeProps({
-      showArrows: newValue
-    })
-  }), /*#__PURE__*/React.createElement(LockedPointSettings, _extends({
+  })))), /*#__PURE__*/React.createElement(LockedPointSettings, _extends({
     label: "Start point",
     toggled: showStartPoint
   }, startPoint, {