@khanacademy/perseus 28.0.0 → 28.2.0

package/dist/es/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/es/index.js

@@ -669,9 +669,11 @@ const styles$D = StyleSheet.create({
     borderRadius: 1
   },
   iconInactive: {
+    border: "2px solid transparent",
     backgroundColor: color.offBlack8
   },
   iconActive: {
+    border: `2px solid ${color.white}`,
     backgroundColor: color.offBlack64
   },
   outerWrapper: {
@@ -764,7 +766,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",
@@ -18970,7 +18972,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 = {
@@ -19761,9 +19763,7 @@ class Renderer extends React.Component {
       return _extends({}, 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 == null ? void 0 : widgetInfo.static,
         problemNum: this.props.problemNum,
         apiOptions: this.getApiOptions(),
         keypadElement: this.props.keypadElement,
@@ -19773,7 +19773,6 @@ class Renderer extends React.Component {
         onBlur: _.partial(this._onWidgetBlur, id),
         findWidgets: this.findWidgets,
         reviewModeRubric: reviewModeRubric,
-        hintMode: this.props.hintMode,
         onChange: (newProps, cb, silent = false) => {
           this._setWidgetProps(id, newProps, cb, silent);
         },
@@ -20148,7 +20147,7 @@ class Renderer extends React.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 (_.contains(this.widgetIds, node.id)) {
@@ -20976,7 +20975,6 @@ Renderer.defaultProps = {
   findExternalWidgets: () => [],
   alwaysUpdate: false,
   reviewMode: false,
-  hintMode: false,
   serializedState: null,
   onSerializedStateUpdated: () => {},
   linterContext: PerseusLinter.linterContextDefault
@@ -21052,28 +21050,24 @@ class TextInput extends React.Component {
       style
     } = this.props;
     const formattedValue = value === null ? "" : value.toString();
-    return (
-      /*#__PURE__*/
-      // $FlowIgnore
-      React.createElement(TextField, {
-        style: style,
-        disabled: disabled,
-        id: this.id,
-        value: formattedValue,
-        type: "text",
-        "aria-label": labelText,
-        onChange: value => this.props.onChange(value),
-        placeholder: placeholder,
-        onFocus: onFocus,
-        onBlur: onBlur,
-        onKeyDown: onKeyDown
-        // @ts-expect-error - TS2322 - Type '{ style: StyleType; disabled: boolean | undefined; id: string; value: string; type: "text"; "aria-label": string | undefined; onChange: (value: string) => void; placeholder: string | undefined; ... 5 more ...; autoComplete: string; }' is not assignable to type 'IntrinsicAttributes & ExportProps & RefAttributes<HTMLInputElement>'.
-        ,
-        autoCorrect: "off",
-        autoCapitalize: "off",
-        autoComplete: "off"
-      })
-    );
+    return /*#__PURE__*/React.createElement(TextField, {
+      style: style,
+      disabled: disabled,
+      id: this.id,
+      value: formattedValue,
+      type: "text",
+      "aria-label": labelText,
+      onChange: value => this.props.onChange(value),
+      placeholder: placeholder,
+      onFocus: onFocus,
+      onBlur: onBlur,
+      onKeyDown: onKeyDown
+      // @ts-expect-error - TS2322 - Type '{ style: StyleType; disabled: boolean | undefined; id: string; value: string; type: "text"; "aria-label": string | undefined; onChange: (value: string) => void; placeholder: string | undefined; ... 5 more ...; autoComplete: string; }' is not assignable to type 'IntrinsicAttributes & ExportProps & RefAttributes<HTMLInputElement>'.
+      ,
+      autoCorrect: "off",
+      autoCapitalize: "off",
+      autoComplete: "off"
+    });
   }
 }
 TextInput.defaultProps = {
@@ -22598,7 +22592,7 @@ var sharedStyles = 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,
@@ -26917,7 +26911,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 _extends({}, propTransform$2(editorProps), {
     // Don't display graph type choices if we're in static mode
     availableTypes: [editorProps.correct.type],
@@ -26930,7 +26924,7 @@ var Grapher$1 = {
   displayName: "Grapher",
   widget: Grapher,
   transform: propTransform$2,
-  staticTransform: staticTransform$3
+  staticTransform: staticTransform$4
 };
 
 // exports has no 'transform'
@@ -31870,7 +31864,6 @@ const MafsGraph = props => {
     state,
     dispatch,
     labels,
-    hintMode,
     readOnly
   } = props;
   const [width, height] = props.box;
@@ -31887,7 +31880,7 @@ const MafsGraph = props => {
       width,
       height,
       labels,
-      disableKeyboardInteraction: hintMode || readOnly
+      disableKeyboardInteraction: readOnly || !!props.static
     }
   }, /*#__PURE__*/React.createElement(View, {
     className: "mafs-graph",
@@ -31899,7 +31892,7 @@ const MafsGraph = props => {
       boxSizing: "content-box",
       marginLeft: "20px",
       marginBottom: "20px",
-      pointerEvents: hintMode ? "none" : "auto"
+      pointerEvents: props.static ? "none" : "auto"
     }
   }, /*#__PURE__*/React.createElement(LegacyGrid, {
     box: props.box,
@@ -33015,6 +33008,17 @@ const StatefulMafsGraph = /*#__PURE__*/React.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.createElement(MafsGraph, _extends({}, props, {
+      state: initializeGraphState(_extends({}, props, {
+        graph: props.correct
+      })),
+      dispatch: dispatch
+    }));
+  }
   return /*#__PURE__*/React.createElement(MafsGraph, _extends({}, props, {
     state: state,
     dispatch: dispatch
@@ -34334,7 +34338,6 @@ class InteractiveGraph extends React.Component {
         snapStep: snapStep,
         box: box,
         showTooltips: !!this.props.showTooltips,
-        hintMode: this.props.hintMode,
         readOnly: (_this$props$apiOption2 = this.props.apiOptions) == null ? void 0 : _this$props$apiOption2.readOnly
       }));
     }
@@ -34924,10 +34927,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 = _.identity;
 var InteractiveGraph$1 = {
   name: "interactive-graph",
   displayName: "Interactive graph",
-  widget: InteractiveGraph
+  widget: InteractiveGraph,
+  staticTransform: staticTransform$3
 };
 
 const black = "#000000";
@@ -44254,7 +44260,7 @@ const init = function init(options) {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "28.0.0";
+const libVersion = "28.2.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -44496,7 +44502,6 @@ class HintRenderer extends React.Component {
       // eslint-disable-next-line react/no-string-refs
       , {
         ref: "renderer",
-        hintMode: true,
         widgets: hint.widgets,
         content: hint.content || "",
         images: hint.images,