@khanacademy/perseus 15.0.0 → 17.0.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @khanacademy/perseus
 
+## 17.0.0
+
+### Major Changes
+
+-   [#852](https://github.com/Khan/perseus/pull/852) [`204788f8`](https://github.com/Khan/perseus/commit/204788f8f583bda5ff94d74fd70ec542fedd3d6e) Thanks [@handeyeco](https://github.com/handeyeco)! - Remove ItemRenderer again
+
+*   [#838](https://github.com/Khan/perseus/pull/838) [`233fc9fc`](https://github.com/Khan/perseus/commit/233fc9fcd4c65d2ff0c8f1ebd1cb1b17b76cbe0c) Thanks [@handeyeco](https://github.com/handeyeco)! - Remove TexButtons and update ExpressionEditor
+
+### Patch Changes
+
+-   [#854](https://github.com/Khan/perseus/pull/854) [`2e2f2cc1`](https://github.com/Khan/perseus/commit/2e2f2cc1afe99613eb688ab1e4e1fccad0c8df57) Thanks [@handeyeco](https://github.com/handeyeco)! - Remove unused CSS images for next/prev steps
+
+-   Updated dependencies [[`41d3cd93`](https://github.com/Khan/perseus/commit/41d3cd93f78d4649c8a57b6fa4964c0c9f2c45b0), [`27f691aa`](https://github.com/Khan/perseus/commit/27f691aa11f061b54db487b5b35222431776260f), [`3803452b`](https://github.com/Khan/perseus/commit/3803452b0593649faf4043bf6e1d7681a14078e4), [`ef32b88f`](https://github.com/Khan/perseus/commit/ef32b88f5027154784fb496506d7c96ee3765eac), [`820febc5`](https://github.com/Khan/perseus/commit/820febc5814a5a10d7c1743be8aa9d220f2d9bd8), [`67a09051`](https://github.com/Khan/perseus/commit/67a09051c61df98b697349ad75760193e4228bfe)]:
+    -   @khanacademy/math-input@16.1.1
+
+## 16.0.0
+
+### Major Changes
+
+-   [#847](https://github.com/Khan/perseus/pull/847) [`45350a24`](https://github.com/Khan/perseus/commit/45350a2458cd3f816bc87af40997e426feb4b13b) Thanks [@handeyeco](https://github.com/handeyeco)! - Add back ItemRenderer temporarily
+
 ## 15.0.0
 
 ### Major Changes

package/dist/components.d.ts

@@ -12,5 +12,4 @@ export { default as PropCheckBox } from "./components/prop-check-box";
 export { default as RangeInput } from "./components/range-input";
 export { default as SvgImage } from "./components/svg-image";
 export { default as TextInput } from "./components/text-input";
-export { default as TexButtons } from "./components/tex-buttons";
 export { default as TextListEditor } from "./components/text-list-editor";

package/dist/es/index.css

@@ -675,30 +675,6 @@ div.timeline-total {
     width: 100px;
 }
 
-#previous-step {
-    margin: 5px;
-    cursor: pointer;
-    float: left;
-    width: 100px;
-}
-
-#next-step {
-    margin: 5px;
-    cursor: pointer;
-    float: right;
-    width: 80px;
-}
-
-#previous-step span {
-    background: url(/images/previous-step.png) no-repeat 0 50% transparent;
-    padding: 4px 0 4px 25px;
-}
-
-#next-step span {
-    background: url(/images/next-step.png) no-repeat 100% 50% transparent;
-    padding: 4px 25px 4px 0;
-}
-
 #next-problem {
     margin: 5px;
     cursor: pointer;
@@ -3584,48 +3560,6 @@ body.mobile .framework-perseus table.perseus-widget-table-of-values.non-markdown
     font-size: 18px;
   }
 }
-/**
- * Styles for managing the popover animations.
- *
- * Ideally, we'd be generating these styles with Aphrodite (along with
- * CSSTransitionGroup's support for custom classnames), but the generated
- * styles have issues on mobile Safari.
- *   See: https://github.com/Khan/aphrodite/issues/68.
- *
- * If the animation durations change, the corresponding values in
- * echo-manager.js must change as well.
- */
-.echo-slide-and-fade-enter {
-  opacity: 1 !important;
-  transform: translate3d(0, 0, 0) !important;
-}
-.echo-slide-and-fade-enter.echo-slide-and-fade-enter-active {
-  opacity: 0 !important;
-  transform: translate3d(0, -33%, 0) !important;
-  /**
-         * TODO(charlie): These times are intentionally different, which means
-         * that the animation really "ends" after 400ms
-         * cubic-bezier(1, 0, 0.9, 1) (since the opacity goes to 0), even though
-         * the transform doesn't complete. There's probably a way to achieve the
-         * same effect by manipulating the transform's Bezier curve and total
-         * displacement.
-         */
-  transition: transform 800ms cubic-bezier(0, 1, 0.25, 1), opacity 400ms cubic-bezier(1, 0, 0.9, 1) !important;
-}
-.echo-fade-only-enter {
-  opacity: 1 !important;
-}
-.echo-fade-only-enter.echo-fade-only-enter-active {
-  opacity: 0 !important;
-  transition: opacity 300ms cubic-bezier(0.25, 0, 0.75, 1) !important;
-}
-.echo-long-fade-only-enter {
-  opacity: 1 !important;
-}
-.echo-long-fade-only-enter.echo-long-fade-only-enter-active {
-  opacity: 0 !important;
-  transition: opacity 400ms cubic-bezier(0.75, 0, 0.75, 1) !important;
-}
 .keypad-input {
   outline: none !important;
 }
@@ -3706,24 +3640,6 @@ body.mobile .framework-perseus table.perseus-widget-table-of-values.non-markdown
   color: white !important;
   display: inline-block !important;
 }
-/**
- * Styles for managing the popover animations.
- *
- * Ideally, we'd be generating these styles with Aphrodite (along with
- * CSSTransitionGroup's support for custom classnames), but the generated
- * styles have issues on mobile Safari.
- *   See: https://github.com/Khan/aphrodite/issues/68.
- *
- * If the animation durations change, the corresponding values in
- * popover-manager.js must change as well.
- */
-.popover-enter {
-  opacity: 0 !important;
-}
-.popover-enter.popover-enter-active {
-  opacity: 1 !important;
-  transition: opacity 200ms ease-out !important;
-}
 /*
  * MathQuill v0.10.1               http://mathquill.com
  * by Han, Jeanine, and Mary  maintainers@mathquill.com
@@ -4160,9 +4076,3 @@ body.mobile .framework-perseus table.perseus-widget-table-of-values.non-markdown
   margin-top: -0.1em;
 }
 
-.tabbar_item {
-  background-color: red;
-}
-.tabbar_item:focus {
-  background-color: green;
-}

package/dist/es/index.js

@@ -44079,7 +44079,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 = "15.0.0";
+const libVersion = "17.0.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -44883,13 +44883,15 @@ class ServerItemRenderer extends React.Component {
       },
       content: this.props.item.question.content,
       widgets: this.props.item.question.widgets,
-      images: this.props.item.question.images
+      images: this.props.item.question.images,
+      linterContext: PerseusLinter.pushContextStack(this.props.linterContext, "question")
     }, this.props.dependencies)));
     const hintsRenderer = /*#__PURE__*/React.createElement(HintsRenderer, {
       hints: this.props.item.hints,
       hintsVisible: this.props.hintsVisible,
       apiOptions: apiOptions,
-      ref: elem => this.hintsRenderer = elem
+      ref: elem => this.hintsRenderer = elem,
+      linterContext: PerseusLinter.pushContextStack(this.props.linterContext, "hints")
     });
     return /*#__PURE__*/React.createElement(DependenciesContext.Provider, {
       value: this.props.dependencies
@@ -44906,6 +44908,7 @@ class ServerItemRenderer extends React.Component {
 ServerItemRenderer.defaultProps = {
   apiOptions: {},
   // a deep default is done in `this.update()`
+  linterContext: PerseusLinter.linterContextDefault,
   onRendered: isRendered => {}
 };
 const styles$3 = StyleSheet.create({
@@ -45362,238 +45365,6 @@ RangeInput.defaultProps = {
   placeholder: [null, null]
 };
 
-/* eslint-disable @khanacademy/ts-no-error-suppressions */
-const prettyBig = {
-  fontSize: "150%"
-};
-const slightlyBig = {
-  fontSize: "120%"
-};
-const symbStyle = {
-  fontSize: "130%"
-};
-// These are functions because we want to generate a new component for each use
-// on the page rather than reusing an instance (which will cause an error).
-// Also, it's useful for things which might look different depending on the
-// props.
-const basic = [() => [/*#__PURE__*/React.createElement("span", {
-  key: "plus",
-  style: slightlyBig
-}, "+"), "PLUS", i18n._("Plus")], () => [/*#__PURE__*/React.createElement("span", {
-  key: "minus",
-  style: prettyBig
-}, "-"), "MINUS", i18n._("Minus")],
-// TODO(joel) - display as \cdot when appropriate
-props => {
-  const {
-    TeX
-  } = getDependencies();
-  if (props.convertDotToTimes) {
-    return [/*#__PURE__*/React.createElement(TeX, {
-      key: "times",
-      style: prettyBig
-    }, i18n.doNotTranslate("\\times")), "TIMES", i18n._("Multiply")];
-  }
-  return [/*#__PURE__*/React.createElement(TeX, {
-    key: "times",
-    style: prettyBig
-  }, i18n.doNotTranslate("\\cdot")), "CDOT", i18n._("Multiply")];
-}, () => {
-  const {
-    TeX
-  } = getDependencies();
-  return [/*#__PURE__*/React.createElement(TeX, {
-    key: "frac",
-    style: prettyBig
-  }, i18n.doNotTranslate("\\frac{x}{y}")), "FRAC", i18n._("Fraction, excluding the current expression")];
-}];
-const buttonSets = {
-  basic,
-  "basic+div": basic.concat([() => {
-    const {
-      TeX
-    } = getDependencies();
-    return [/*#__PURE__*/React.createElement(TeX, {
-      key: "div"
-    }, i18n.doNotTranslate("\\div")), "DIVIDE", i18n._("Divide")];
-  }]),
-  trig: [() => {
-    const {
-      TeX
-    } = getDependencies();
-    return [/*#__PURE__*/React.createElement(TeX, {
-      key: "sin"
-    }, i18n.doNotTranslate("\\sin")), "SIN", i18n._("Sine")];
-  }, () => {
-    const {
-      TeX
-    } = getDependencies();
-    return [/*#__PURE__*/React.createElement(TeX, {
-      key: "cos"
-    }, i18n.doNotTranslate("\\cos")), "COS", i18n._("Cosine")];
-  }, () => {
-    const {
-      TeX
-    } = getDependencies();
-    return [/*#__PURE__*/React.createElement(TeX, {
-      key: "tan"
-    }, i18n.doNotTranslate("\\tan")), "TAN", i18n._("Tangent")];
-  }, () => {
-    const {
-      TeX
-    } = getDependencies();
-    return [/*#__PURE__*/React.createElement(TeX, {
-      key: "theta",
-      style: symbStyle
-    }, i18n.doNotTranslate("\\theta")), "THETA", i18n._("Theta")];
-  }, () => {
-    const {
-      TeX
-    } = getDependencies();
-    return [/*#__PURE__*/React.createElement("span", {
-      key: "phi"
-    }, /*#__PURE__*/React.createElement("span", {
-      className: "perseus-sr-only"
-    }, i18n.doNotTranslate("phi")), /*#__PURE__*/React.createElement(TeX, {
-      key: "pi",
-      style: symbStyle
-    }, i18n.doNotTranslate("\\phi"))), "PHI", i18n._("Phi")];
-  }],
-  prealgebra: [() => {
-    const {
-      TeX
-    } = getDependencies();
-    return [/*#__PURE__*/React.createElement(TeX, {
-      key: "sqrt"
-    }, i18n.doNotTranslate("\\sqrt{x}")), "SQRT", i18n._("Square root")];
-  },
-  // TODO(joel) - how does desmos do this?
-  () => {
-    const {
-      TeX
-    } = getDependencies();
-    return [/*#__PURE__*/React.createElement(TeX, {
-      key: "nthroot"
-    }, i18n.doNotTranslate("\\sqrt[3]{x}")), "NTHROOT3", i18n._("Cube root")];
-  }, () => {
-    const {
-      TeX
-    } = getDependencies();
-    return [/*#__PURE__*/React.createElement(TeX, {
-      key: "pow",
-      style: slightlyBig
-    }, i18n.doNotTranslate("a^b")), "POW", i18n._("Exponent")];
-  }, () => {
-    const {
-      TeX
-    } = getDependencies();
-    return [/*#__PURE__*/React.createElement(TeX, {
-      key: "pi",
-      style: slightlyBig
-    }, i18n.doNotTranslate("\\pi")), "PI", i18n._("Pi")];
-  }],
-  logarithms: [() => {
-    const {
-      TeX
-    } = getDependencies();
-    return [/*#__PURE__*/React.createElement(TeX, {
-      key: "log"
-    }, i18n.doNotTranslate("\\log")), "LOG", i18n._("Logarithm with base 10")];
-  }, () => {
-    const {
-      TeX
-    } = getDependencies();
-    return [/*#__PURE__*/React.createElement(TeX, {
-      key: "ln"
-    }, i18n.doNotTranslate("\\ln")), "LN", i18n._("Natural logarithm")];
-  }, () => {
-    const {
-      TeX
-    } = getDependencies();
-    return [/*#__PURE__*/React.createElement(TeX, {
-      key: "log_b"
-    }, i18n.doNotTranslate("\\log_b")), "LOG_B", i18n._("Logarithm with custom base")];
-  }],
-  "basic relations": [() => {
-    const {
-      TeX
-    } = getDependencies();
-    return [/*#__PURE__*/React.createElement(TeX, {
-      key: "eq"
-    }, "="), "EQUAL", i18n._("Equals sign")];
-  }, () => {
-    const {
-      TeX
-    } = getDependencies();
-    return [/*#__PURE__*/React.createElement(TeX, {
-      key: "lt"
-    }, i18n.doNotTranslate("\\lt")), "LT", i18n._("Less than sign")];
-  }, () => {
-    const {
-      TeX
-    } = getDependencies();
-    return [/*#__PURE__*/React.createElement(TeX, {
-      key: "gt"
-    }, i18n.doNotTranslate("\\gt")), "GT", i18n._("Greater than sign")];
-  }],
-  "advanced relations": [() => {
-    const {
-      TeX
-    } = getDependencies();
-    return [/*#__PURE__*/React.createElement(TeX, {
-      key: "neq"
-    }, i18n.doNotTranslate("\\neq")), "NEQ", i18n._("Not-equals sign")];
-  }, () => {
-    const {
-      TeX
-    } = getDependencies();
-    return [/*#__PURE__*/React.createElement(TeX, {
-      key: "leq"
-    }, i18n.doNotTranslate("\\leq")), "LEQ", i18n._("Less than or equal to sign")];
-  }, () => {
-    const {
-      TeX
-    } = getDependencies();
-    return [/*#__PURE__*/React.createElement(TeX, {
-      key: "geq"
-    }, i18n.doNotTranslate("\\geq")), "GEQ", i18n._("Greater than or equal to sign")];
-  }]
-};
-const buttonSetsPropType = PropTypes.arrayOf(PropTypes.oneOf(_(buttonSets).keys()));
-class TexButtons extends React.Component {
-  render() {
-    // Always show buttonSets in the same order. Note: Technically it's ok
-    // for _.keys() to return the keys in an arbitrary order, but in
-    // practice, they will be ordered as listed above.
-    const sortedButtonSets = _.sortBy(this.props.sets, setName => _.keys(buttonSets).indexOf(setName));
-    const buttons = _(sortedButtonSets).map(setName => buttonSets[setName]);
-    const buttonRows = _(buttons).map(row => row.map(symbGen => {
-      // create a (component, thing we should send to mathquill) pair
-      const symbol = symbGen(this.props);
-      return /*#__PURE__*/React.createElement("button", {
-        onClick: () => this.props.onInsert(symbol[1]),
-        className: "tex-button"
-        // @ts-expect-error - TS2533 - Object is possibly 'null' or 'undefined'. | TS2339 - Property 'key' does not exist on type 'boolean | ReactChild | ReactFragment | ReactPortal'.
-        ,
-        key: symbol[0].key,
-        type: "button",
-        "aria-label": symbol[2]
-      }, symbol[0]);
-    }));
-    const buttonPopup = _(buttonRows).map((row, i) => {
-      return /*#__PURE__*/React.createElement("div", {
-        className: "clearfix tex-button-row",
-        key: this.props.sets[i]
-      }, row);
-    });
-    return /*#__PURE__*/React.createElement("div", {
-      className: `${this.props.className || ""} preview-measure`
-    }, buttonPopup);
-  }
-}
-TexButtons.buttonSets = buttonSets;
-TexButtons.buttonSetsType = buttonSetsPropType;
-
 var components = /*#__PURE__*/Object.freeze({
   __proto__: null,
   ButtonGroup: ButtonGroup,
@@ -45610,7 +45381,6 @@ var components = /*#__PURE__*/Object.freeze({
   RangeInput: RangeInput,
   SvgImage: SvgImage,
   TextInput: TextInput,
-  TexButtons: TexButtons,
   TextListEditor: TextListEditor
 });