@khanacademy/perseus 28.1.0 → 29.0.0

package/dist/index.css

@@ -1500,7 +1500,6 @@ body.mobile ul.inequalities-one-line-radios > li {
 .perseus-clearfix:after {
   clear: both;
 }
-/* Fall back colors? Eg educator, talks & interviews */
 .framework-perseus code {
   font-family: Courier, monospace;
 }
@@ -2418,7 +2417,7 @@ img.zoom-img {
   width: 40px;
 }
 .framework-perseus .number-input.invalid-input {
-  background-color: #cf5044;
+  background-color: #ffbaba;
   outline-color: red;
 }
 .framework-perseus .number-input.mini {
@@ -2604,7 +2603,7 @@ img.zoom-img {
   z-index: 2;
 }
 body.mobile .categorizer-container td.category input[type="radio"]:checked + span:before {
-  color: #005a88;
+  color: #1c758a;
 }
 body.mobile .categorizer-container td.category input[type="radio"] + span:active:before {
   color: #666;
@@ -2677,7 +2676,7 @@ body.mobile .categorizer-container td.category input[type="radio"] + span:active
   margin-left: 0;
 }
 .framework-perseus .perseus-graded-group.answer-incorrect {
-  border-left: 3px solid #b2392e;
+  border-left: 3px solid #ff8787;
   margin-left: 0;
 }
 .framework-perseus .perseus-graded-group .group-icon {
@@ -3490,7 +3489,7 @@ body.mobile .framework-perseus table.perseus-widget-table-of-values.non-markdown
   background-color: #fcc;
 }
 .perseus-error {
-  background: #cf5044;
+  background: #ffbaba;
   border: 2px solid red;
   border-radius: 5px;
   padding: 20px;

package/dist/index.d.ts

@@ -88,7 +88,7 @@ export type { ServerItemRenderer as ServerItemRendererComponent } from "./server
 export type { Alignment, APIOptions, APIOptionsWithDefaults, ChangeHandler, DeviceType, DomInsertCheckFn, EditorMode, FocusPath, ImageDict, ImageUploader, JiptLabelStore, JiptRenderer, PerseusDependencies, PerseusScore, Version, VideoData, VideoKind, WidgetDict, WidgetExports, } from "./types";
 export type { ParsedValue } from "./util";
 export type { Hint, LegacyButtonSets, LockedFigure, LockedFigureColor, LockedFigureFillType, LockedFigureType, LockedPointType, LockedLineType, LockedVectorType, LockedEllipseType, LockedPolygonType, LockedFunctionType, PerseusGraphType, PerseusAnswerArea, PerseusExpressionWidgetOptions, Range, Size, CollinearTuple, MathFormat, InputNumberWidget, // TODO(jeremy): remove?
-PerseusImageBackground, PerseusInputNumberWidgetOptions, PerseusInteractiveGraphWidgetOptions, PerseusItem, PerseusPlotterWidgetOptions, PerseusPythonProgramWidgetOptions, PerseusRadioWidgetOptions, PerseusExampleWidgetOptions, PerseusExampleGraphieWidgetOptions, PerseusSimpleMarkdownTesterWidgetOptions, PerseusRenderer, PerseusWidget, PerseusWidgetsMap, } from "./perseus-types";
+PerseusImageBackground, PerseusInputNumberWidgetOptions, PerseusInteractiveGraphWidgetOptions, PerseusItem, PerseusPlotterWidgetOptions, PerseusPythonProgramWidgetOptions, PerseusRadioWidgetOptions, PerseusExampleWidgetOptions, PerseusExampleGraphieWidgetOptions, PerseusSimpleMarkdownTesterWidgetOptions, PerseusRenderer, PerseusWidget, PerseusWidgetsMap, MultiItem, } from "./perseus-types";
 export type { Coord } from "./interactive2/types";
 export type { MarkerType } from "./widgets/label-image/types";
 /**

package/dist/index.js

@@ -869,7 +869,7 @@ const denylist = [
 // (technically the renderer still adds them)
 "key", "ref",
 // added by src/renderer.jsx
-"containerSizeClass", "widgetId", "onChange", "problemNum", "apiOptions", "questionCompleted", "findWidgets", "hintMode",
+"containerSizeClass", "widgetId", "onChange", "problemNum", "apiOptions", "questionCompleted", "findWidgets",
 // added by src/editor.jsx, for widgets removing themselves
 // this is soooo not the right place for this, but alas.
 "onRemove",
@@ -1395,7 +1395,7 @@ const KhanMath = {
    * with an approx symbol if num had to be rounded, and trailing 0s
    */
   toFixedApprox: function (num, precision) {
-    // TODO(aria): Make this locale-dependent like KhanUtil.localeToFixed
+    // TODO(aria): Make this locale-dependent
     const fixedStr = num.toFixed(precision);
     if (kmath.number.equal(+fixedStr, num)) {
       return fixedStr;
@@ -18331,39 +18331,10 @@ var Severity = /*#__PURE__*/function (Severity) {
  **/
 class Lint extends React__namespace.Component {
   _positionTimeout;
-  state = {
-    tooltipAbove: true
-  };
-  componentDidMount() {
-    // TODO(somewhatabstract): Use WB timing
-    // eslint-disable-next-line no-restricted-syntax
-    this._positionTimeout = window.setTimeout(this.getPosition);
-  }
-  componentWillUnmount() {
-    // TODO(somewhatabstract): Use WB timing
-    // eslint-disable-next-line no-restricted-syntax
-    window.clearTimeout(this._positionTimeout);
-  }
-
-  // We can't call setState in componentDidMount without risking a render
-  // thrash, and we can't call getBoundingClientRect in render, so we
-  // borrow a timeout approach from learnstorm-dashboard.jsx and set our
-  // state once the component has mounted and we can get what we need.
-  getPosition = () => {
-    // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'getBoundingClientRect' does not exist on type 'Element | Text'.
-    const rect = ReactDOM__default["default"].findDOMNode(this).getBoundingClientRect();
-    // TODO(scottgrant): This is a magic number! We don't know the size
-    // of the tooltip at this point, so we're arbitrarily choosing a
-    // point at which to flip the tooltip's position.
-    this.setState({
-      tooltipAbove: rect.top > 100
-    });
-  };
 
   // Render the <a> element that holds the indicator icon and the tooltip
   // We pass different styles for the inline and block cases
   renderLink = style => {
-    const tooltipAbove = this.state.tooltipAbove;
     let severityStyle;
     let warningText;
     let warningTextStyle;
@@ -18380,22 +18351,21 @@ class Lint extends React__namespace.Component {
       warningText = "Recommendation";
       warningTextStyle = styles$B.warning;
     }
-    return /*#__PURE__*/React__namespace.createElement("a", {
+    return /*#__PURE__*/React__namespace.createElement(Tooltip__default["default"], {
+      backgroundColor: "offBlack",
+      content: /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, this.props.message.split("\n\n").map((m, i) => /*#__PURE__*/React__namespace.createElement("p", {
+        key: i,
+        className: aphrodite.css(styles$B.tooltipParagraph)
+      }, /*#__PURE__*/React__namespace.createElement("span", {
+        className: aphrodite.css(warningTextStyle)
+      }, warningText, ":", " "), m)))
+    }, /*#__PURE__*/React__namespace.createElement("a", {
       href: `https://khanacademy.org/r/linter-rules#${this.props.ruleName}`,
       target: "lint-help-window",
       className: aphrodite.css(style)
     }, /*#__PURE__*/React__namespace.createElement("span", {
       className: aphrodite.css(styles$B.indicator, severityStyle)
-    }, this.props.severity === 1 && /*#__PURE__*/React__namespace.createElement(InlineIcon, exclamationIcon)), /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$B.tooltip, tooltipAbove && styles$B.tooltipAbove)
-    }, this.props.message.split("\n\n").map((m, i) => /*#__PURE__*/React__namespace.createElement("p", {
-      key: i,
-      className: aphrodite.css(styles$B.tooltipParagraph)
-    }, /*#__PURE__*/React__namespace.createElement("span", {
-      className: aphrodite.css(warningTextStyle)
-    }, warningText, ":", " "), m)), /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$B.tail, tooltipAbove && styles$B.tailAbove)
-    })));
+    }, this.props.severity === 1 && /*#__PURE__*/React__namespace.createElement(InlineIcon, exclamationIcon))));
   };
 
   // The main render method surrounds linty content with a block or
@@ -18598,54 +18568,11 @@ const styles$B = aphrodite.StyleSheet.create({
   indicatorGuideline: {
     backgroundColor: "#ffbe26"
   },
-  // These are the styles for the tooltip
-  tooltip: {
-    // Absolute positioning relative to the lint indicator circle.
-    position: "absolute",
-    right: -12,
-    // The tooltip is hidden by default; only displayed on hover
-    display: "none",
-    // When it is displayed, it goes on top!
-    zIndex: 1000,
-    // These styles control what the tooltip looks like
-    color: white$1,
-    backgroundColor: gray17,
-    opacity: 0.9,
-    fontFamily: baseFontFamily$1,
-    fontSize: "12px",
-    lineHeight: "15px",
-    width: "320px",
-    borderRadius: "4px"
-  },
-  // If we're going to render the tooltip above the warning circle, we use
-  // the previous rules in tooltip, but change the position slightly.
-  tooltipAbove: {
-    bottom: 32
-  },
-  // We give the tooltip a little triangular "tail" that points down at
-  // the lint indicator circle. This is inside the tooltip and positioned
-  // relative to it. It also shares the opacity of the tooltip. We're using
-  // the standard CSS trick for drawing triangles with a thick border.
-  tail: {
-    position: "absolute",
-    top: -12,
-    right: 16,
-    width: 0,
-    height: 0,
-    // This is the CSS triangle trick
-    borderLeft: "8px solid transparent",
-    borderRight: "8px solid transparent",
-    borderBottom: "12px solid " + gray17
-  },
-  tailAbove: {
-    bottom: -12,
-    borderBottom: "none",
-    borderTop: "12px solid " + gray17,
-    top: "auto"
-  },
   // Each warning in the tooltip is its own <p>. They are 12 pixels from
   // the edges of the tooltip and 12 pixels from each other.
   tooltipParagraph: {
+    fontFamily: wonderBlocksTokens.font.family.sans,
+    color: wonderBlocksTokens.color.white,
     margin: 12
   },
   // The text "Warning" inside the tooltip is highlighted like this
@@ -19151,7 +19078,7 @@ const {
 // Note: these size cutoffs represent content-width cutoffs as specified in
 // http://zpl.io/1mVmvU (broken link - we no longer use Zeplin)
 // TODO(benkomalo): these values aren't used in JS outside of this file, but
-// are coupled to the values in styles/articles.less - DRY it up at some point
+// are coupled to the values in styles/styles.less - DRY it up at some point
 const smMax = articleMaxWidthTableInPx;
 const mdMax = articleMaxWidthInPx;
 const containerSizeClass = {
@@ -19832,7 +19759,6 @@ class Renderer extends React__namespace.Component {
     findExternalWidgets: () => [],
     alwaysUpdate: false,
     reviewMode: false,
-    hintMode: false,
     serializedState: null,
     onSerializedStateUpdated: () => {},
     linterContext: PerseusLinter__namespace.linterContextDefault
@@ -20111,9 +20037,7 @@ class Renderer extends React__namespace.Component {
       ...widgetProps,
       widgetId: id,
       alignment: widgetInfo && widgetInfo.alignment,
-      // When determining if a widget is static, we verify that the widget is not an
-      // exercise question by verifying that it has no problem number.
-      static: widgetInfo && widgetInfo.static && !this.props.problemNum,
+      static: widgetInfo?.static,
       problemNum: this.props.problemNum,
       apiOptions: this.getApiOptions(),
       keypadElement: this.props.keypadElement,
@@ -20123,7 +20047,6 @@ class Renderer extends React__namespace.Component {
       onBlur: ___default["default"].partial(this._onWidgetBlur, id),
       findWidgets: this.findWidgets,
       reviewModeRubric: reviewModeRubric,
-      hintMode: this.props.hintMode,
       onChange: function (newProps, cb) {
         let silent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
         _this._setWidgetProps(id, newProps, cb, silent);
@@ -20511,7 +20434,7 @@ class Renderer extends React__namespace.Component {
       }
       // Widgets can contain text nodes, so we don't center them with
       // markdown magic here.
-      // Instead, we center them with css magic in articles.less
+      // Instead, we center them with css magic in styles.less
       // /cry(aria)
       this._foundTextNodes = true;
       if (___default["default"].contains(this.widgetIds, node.id)) {
@@ -22796,7 +22719,7 @@ var sharedStyles = aphrodite.StyleSheet.create({
     zIndex: zIndexAboveScratchpad
   },
   blankBackground: {
-    // TODO(emily): Use KhanUtil._BACKGROUND?
+    // TODO(emily): Use WB colors?
     backgroundColor: "#FDFDFD"
   },
   perseusSrOnly: {
@@ -22811,7 +22734,7 @@ var sharedStyles = aphrodite.StyleSheet.create({
   },
   responsiveLabel: {
     // NOTE(charlie): The values used here should be kept in sync with the
-    // caption text sizing in Perseus' articles.less.
+    // caption text sizing in Perseus' styles.less.
     // TODO(charlie): Migrate the captions over to using this style.
     [mediaQueries.smOrSmaller]: {
       fontSize: 14,
@@ -27186,7 +27109,7 @@ const propTransform$2 = editorProps => {
 
 // Note that in addition to the standard staticTransform, in static
 // mode we set static=true for the graph's handles in FunctionGrapher.
-const staticTransform$3 = editorProps => {
+const staticTransform$4 = editorProps => {
   return {
     ...propTransform$2(editorProps),
     // Don't display graph type choices if we're in static mode
@@ -27200,7 +27123,7 @@ var Grapher$1 = {
   displayName: "Grapher",
   widget: Grapher,
   transform: propTransform$2,
-  staticTransform: staticTransform$3
+  staticTransform: staticTransform$4
 };
 
 // exports has no 'transform'
@@ -30001,6 +29924,18 @@ const LegacyGrid = _ref => {
 
 // Range is replaced within this file with Interval, but it is used elsewhere
 // and exported from the package, so we need to keep it around.
+/**
+ * A "PerseusItem" is a classic Perseus item. It is rendered by the
+ * `ServerItemRenderer` and the layout is pre-set.
+ *
+ * To render more complex Perseus items, see the `Item` type in the multi item
+ * area.
+ */
+/**
+ * A "MultiItem" is an advanced Perseus item. It is rendered by the
+ * `MultiRenderer` and you can control the layout of individual parts of the
+ * item.
+ */
 const ItemExtras = [
 // The user might benefit from using a Scientific Calculator.  Provided on Khan Academy when true
 "calculator",
@@ -32195,7 +32130,6 @@ const MafsGraph = props => {
     state,
     dispatch,
     labels,
-    hintMode,
     readOnly
   } = props;
   const [width, height] = props.box;
@@ -32212,7 +32146,7 @@ const MafsGraph = props => {
       width,
       height,
       labels,
-      disableKeyboardInteraction: hintMode || readOnly
+      disableKeyboardInteraction: readOnly || !!props.static
     }
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
     className: "mafs-graph",
@@ -32224,7 +32158,8 @@ const MafsGraph = props => {
       boxSizing: "content-box",
       marginLeft: "20px",
       marginBottom: "20px",
-      pointerEvents: hintMode ? "none" : "auto"
+      pointerEvents: props.static ? "none" : "auto",
+      userSelect: "none"
     }
   }, /*#__PURE__*/React__namespace.createElement(LegacyGrid, {
     box: props.box,
@@ -33377,6 +33312,18 @@ const StatefulMafsGraph = /*#__PURE__*/React__namespace.forwardRef((props, ref)
       dispatch(reinitialize(latestPropsRef.current));
     }
   }, [graph.type, numPoints, numSegments, numSides, snapTo, showAngles, showSides, latestPropsRef, graph.startCoords]);
+
+  // If the graph is static, it always displays the correct answer. This is
+  // standard behavior for Perseus widgets (e.g. compare the Radio widget).
+  if (props.static) {
+    return /*#__PURE__*/React__namespace.createElement(MafsGraph, _extends({}, props, {
+      state: initializeGraphState({
+        ...props,
+        graph: props.correct
+      }),
+      dispatch: dispatch
+    }));
+  }
   return /*#__PURE__*/React__namespace.createElement(MafsGraph, _extends({}, props, {
     state: state,
     dispatch: dispatch
@@ -34680,7 +34627,6 @@ class InteractiveGraph extends React__namespace.Component {
         snapStep: snapStep,
         box: box,
         showTooltips: !!this.props.showTooltips,
-        hintMode: this.props.hintMode,
         readOnly: this.props.apiOptions?.readOnly
       }));
     }
@@ -35256,10 +35202,13 @@ function shouldUseMafs(mafsFlags, graph) {
       return Boolean(mafsFlags[graph.type]);
   }
 }
+// We don't need to change any of the original props for static mode
+const staticTransform$3 = ___default["default"].identity;
 var InteractiveGraph$1 = {
   name: "interactive-graph",
   displayName: "Interactive graph",
-  widget: InteractiveGraph
+  widget: InteractiveGraph,
+  staticTransform: staticTransform$3
 };
 
 const black = "#000000";
@@ -44603,7 +44552,7 @@ const init = function (options) {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "28.1.0";
+const libVersion = "29.0.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -44851,7 +44800,6 @@ class HintRenderer extends React__namespace.Component {
       // eslint-disable-next-line react/no-string-refs
       , {
         ref: "renderer",
-        hintMode: true,
         widgets: hint.widgets,
         content: hint.content || "",
         images: hint.images,
@@ -48025,7 +47973,6 @@ const genericPerseusItemData = {
     minor: 1
   },
   hints: [],
-  _multi: null,
   answer: null
 };