@khanacademy/perseus 32.0.1 → 33.0.0

package/dist/index.d.ts

@@ -30,10 +30,6 @@ export { default as MatrixWidget } from "./widgets/matrix";
 export { default as TableWidget } from "./widgets/table";
 export { default as PlotterWidget } from "./widgets/plotter";
 export { default as GrapherWidget } from "./widgets/grapher";
-export { default as ArrowPicker } from "./widgets/interaction/arrow-picker";
-export { default as ColorPicker } from "./widgets/interaction/color-picker";
-export { default as DashPicker } from "./widgets/interaction/dash-picker";
-export { default as ElementContainer } from "./widgets/interaction/element-container";
 export * as GrapherUtil from "./widgets/grapher/util";
 /**
  * Misc

package/dist/index.js

@@ -10147,11 +10147,35 @@ const setLabelMargins = function (span, size) {
       marginTop: -height / 2 - y * scale
     });
   } else {
+    const $container = $span.closest(".svg-image");
+    // Ensuring that the line-height of the text doesn't throw off placement of the text element.
+    // Inherited line-height values can really mess up placement.
+    $container.css("line-height", "normal");
+
+    // The 'max-width' value is the same as the expected (100% scale) width of the graphie.
+    // We are using jQuery to get this information since we don't have a way to pass it to this function.
+    const expectedWidth = $container.css("max-width") ?? "0px";
+    // We can calculate the true scale of the graphie by taking actual width and dividing by the expected width.
+    // NOTE: Using 'slice' to remove the "px" unit from the end of the expected width value.
+    const scale = ($container.width() ?? 0) / parseInt(expectedWidth.replace(/px$/, "")) * 100;
+
+    // Any padding needs to be scaled accordingly.
+    const currentPadding = $span.css("padding") ?? "0px";
+    const newPadding = Math.round(parseInt(currentPadding.slice(0, -2)) * scale) / 100;
+
+    // "multipliers" basically move the position of the text by using 1, 0, -1
+    // 'margin-left' and 'margin-top' are used to position the text.
+    // Margin and font size need to be scaled accordingly.
     const multipliers = labelDirections[direction || "center"];
-    $span.css({
-      marginLeft: Math.round(width * multipliers[0]),
-      marginTop: Math.round(height * multipliers[1])
-    });
+    const styling = {
+      marginLeft: Math.round(width * multipliers[0] * scale) / 100,
+      marginTop: Math.round(height * multipliers[1] * scale) / 100,
+      padding: `${newPadding}px`
+    };
+    if (scale !== 1) {
+      styling["fontSize"] = `${Math.round(scale * 100) / 100}%`;
+    }
+    $span.css(styling);
   }
 };
 const GraphUtils = {
@@ -17536,9 +17560,16 @@ class SvgImage extends React__namespace.Component {
         // without coordinates. They don't seem to have any content, so
         // it seems fine to just ignore them (rather than error), but
         // we should figure out why this is happening.
-        const label = graphie.label(labelData.coordinates, labelData.content, labelData.alignment, labelData.typesetAsMath, {
+
+        // 'styling' - When a default scale (1) is used,
+        //     setting the font size to 100% is redundant.
+        // Also, setting the font size to 100% can counteract other scale-based styling.
+        // Therefore, when the scale is not applicable,
+        //     we set the value to 'null' so that no additional styling will be set.
+        const styling = this.props.scale !== 1 ? {
           "font-size": 100 * this.props.scale + "%"
-        });
+        } : null;
+        const label = graphie.label(labelData.coordinates, labelData.content, labelData.alignment, labelData.typesetAsMath, styling);
 
         // Convert absolute positioning css from pixels to percentages
         // TODO(alex): Dynamically resize font-size as well. This
@@ -32330,10 +32361,14 @@ const MafsGraph = props => {
     state,
     dispatch,
     labels,
-    readOnly
+    readOnly,
+    fullGraphAriaLabel,
+    fullGraphAriaDescription
   } = props;
   const [width, height] = props.box;
   const tickStep = props.step;
+  const uniqueId = React__namespace.useId();
+  const descriptionId = `interactive-graph-description-${uniqueId}`;
   const graphRef = React__namespace.useRef(null);
   return /*#__PURE__*/React__namespace.createElement(GraphConfigContext.Provider, {
     value: {
@@ -32368,9 +32403,19 @@ const MafsGraph = props => {
         graphRef.current?.focus();
       }
     },
+    "aria-label": fullGraphAriaLabel,
+    "aria-describedby": fullGraphAriaDescription ? descriptionId : undefined,
     ref: graphRef,
     tabIndex: 0
-  }, /*#__PURE__*/React__namespace.createElement(LegacyGrid, {
+  }, fullGraphAriaDescription && /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    id: descriptionId,
+    tabIndex: -1,
+    style: {
+      width: 0,
+      height: 0,
+      overflow: "hidden"
+    }
+  }, fullGraphAriaDescription), /*#__PURE__*/React__namespace.createElement(LegacyGrid, {
     box: props.box,
     backgroundImage: props.backgroundImage
   }), props.showLabelsFlag && props.lockedFigures && /*#__PURE__*/React__namespace.createElement(GraphLockedLabelsLayer, {
@@ -45054,7 +45099,7 @@ const init = function (options) {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "32.0.1";
+const libVersion = "33.0.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -45948,128 +45993,6 @@ const ref = /*#__PURE__*/React__namespace.forwardRef((props, ref) => /*#__PURE__
   }));
 }));
 
-class ArrowPicker extends React__namespace.Component {
-  static defaultProps = {
-    value: ""
-  };
-  render() {
-    return /*#__PURE__*/React__namespace.createElement(ButtonGroup, {
-      value: this.props.value,
-      allowEmpty: false,
-      buttons: [{
-        value: "",
-        content: /*#__PURE__*/React__namespace.createElement("span", null, "\u2014")
-      }, {
-        value: "->",
-        content: /*#__PURE__*/React__namespace.createElement("span", null, "\u2192")
-      }
-      /*
-      TODO(eater): fix khan-exercises so these are supported
-      {value: "<-", content: <span>&#x2190;</span>},
-      {value: "<->", content: <span>&#x2194;</span>}
-      */],
-
-      onChange: this.props.onChange
-    });
-  }
-}
-
-const COLORS = [KhanColors.BLACK, KhanColors.BLUE, KhanColors.GREEN, KhanColors.PINK, KhanColors.PURPLE, KhanColors.RED, KhanColors.GRAY];
-const LIGHT_COLORS = [KhanColors.LIGHT_BLUE, KhanColors.LIGHT_ORANGE, KhanColors.LIGHT_PINK, KhanColors.LIGHT_GREEN, KhanColors.LIGHT_PURPLE, KhanColors.LIGHT_RED, "#fff"];
-class ColorPicker extends React__namespace.Component {
-  static defaultProps = {
-    value: KhanColors.BLACK,
-    lightColors: false
-  };
-  render() {
-    const colors = this.props.lightColors ? LIGHT_COLORS : COLORS;
-    return /*#__PURE__*/React__namespace.createElement(ButtonGroup, {
-      value: this.props.value,
-      allowEmpty: false,
-      buttons: ___default["default"].map(colors, color => {
-        return {
-          value: color,
-          content: /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement("span", {
-            className: "colorpicker-circle",
-            style: {
-              background: color
-            }
-          }), "\xA0")
-        };
-      }),
-      onChange: this.props.onChange
-    });
-  }
-}
-
-class DashPicker extends React__namespace.Component {
-  static defaultProps = {
-    value: ""
-  };
-  render() {
-    return /*#__PURE__*/React__namespace.createElement(ButtonGroup, {
-      value: this.props.value,
-      allowEmpty: false,
-      buttons: [{
-        value: "",
-        content: /*#__PURE__*/React__namespace.createElement("span", null, "\u2014")
-      }, {
-        value: "-",
-        content: /*#__PURE__*/React__namespace.createElement("span", null, "\u2013\u2013\u2013")
-      }, {
-        value: "- ",
-        content: /*#__PURE__*/React__namespace.createElement("span", null, "\u2013\xA0\xA0\u2013")
-      }, {
-        value: ".",
-        content: /*#__PURE__*/React__namespace.createElement("span", null, "\xB7\xB7\xB7\xB7")
-      }, {
-        value: ". ",
-        content: /*#__PURE__*/React__namespace.createElement("span", null, "\xB7 \xB7 \xB7")
-      }],
-      onChange: this.props.onChange
-    });
-  }
-}
-
-/* eslint-disable jsx-a11y/anchor-is-valid */
-class ElementContainer extends React__namespace.Component {
-  static defaultProps = {
-    initiallyVisible: false,
-    title: "More"
-  };
-  constructor(props) {
-    super(props);
-    this.state = {
-      show: props.initiallyVisible
-    };
-  }
-  toggle = e => {
-    e.preventDefault();
-    this.setState({
-      show: !this.state.show
-    });
-  };
-  render() {
-    return /*#__PURE__*/React__namespace.createElement("div", {
-      className: "perseus-interaction-element"
-    }, /*#__PURE__*/React__namespace.createElement("a", {
-      href: "#",
-      className: "perseus-interaction-element-title " + (this.state.show ? "open" : "closed"),
-      onClick: this.toggle
-    }, this.state.show ? /*#__PURE__*/React__namespace.createElement(InlineIcon, iconChevronDown) : /*#__PURE__*/React__namespace.createElement(InlineIcon, iconChevronRight), this.props.title), /*#__PURE__*/React__namespace.createElement("div", {
-      className: "perseus-interaction-element-content " + (this.state.show ? "enter" : "leave")
-    }, this.props.children, (this.props.onUp != null || this.props.onDown != null || this.props.onDelete != null) && /*#__PURE__*/React__namespace.createElement("div", {
-      className: "edit-controls"
-    }, this.props.onUp != null && /*#__PURE__*/React__namespace.createElement("button", {
-      onClick: this.props.onUp
-    }, /*#__PURE__*/React__namespace.createElement(InlineIcon, iconCircleArrowUp)), this.props.onDown != null && /*#__PURE__*/React__namespace.createElement("button", {
-      onClick: this.props.onDown
-    }, /*#__PURE__*/React__namespace.createElement(InlineIcon, iconCircleArrowDown)), this.props.onDelete != null && /*#__PURE__*/React__namespace.createElement("button", {
-      onClick: this.props.onDelete
-    }, /*#__PURE__*/React__namespace.createElement(InlineIcon, iconTrash)))));
-  }
-}
-
 const devices = {
   PHONE: "phone",
   TABLET: "tablet",
@@ -48655,17 +48578,13 @@ const EditorJsonify = {
 };
 
 exports.ApiOptions = ApiOptions;
-exports.ArrowPicker = ArrowPicker;
 exports.ArticleRenderer = ArticleRenderer;
 exports.BaseRadio = BaseRadio;
 exports.Categorizer = Categorizer$1;
 exports.Changeable = changeable;
 exports.ClassNames = ClassNames;
-exports.ColorPicker = ColorPicker;
-exports.DashPicker = DashPicker;
 exports.Dependencies = dependencies;
 exports.EditorJsonify = EditorJsonify;
-exports.ElementContainer = ElementContainer;
 exports.Expression = Expression;
 exports.GrapherUtil = util;
 exports.GrapherWidget = Grapher$1;