@khanacademy/perseus 2.0.0 → 2.1.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @khanacademy/perseus
 
+## 2.1.0
+
+### Minor Changes
+
+-   2c843b38: Update to use wonder-blocks deps after migrating wonder-blocks to TS
+
+### Patch Changes
+
+-   Updated dependencies [2c843b38]
+    -   @khanacademy/math-input@0.6.8
+
+## 2.0.1
+
+### Patch Changes
+
+-   6272dfbe: Bugfix for definition prompt size in articles
+
 ## 2.0.0
 
 ### Major Changes

package/dist/es/index.css

@@ -16,8 +16,6 @@ div.subhint {
     border: 1px solid #aaaaaa;
     background: #f9f9f9;
     display: none;
-    -moz-border-radius: 4px;
-    -webkit-border-radius: 4px;
     border-radius: 4px;
     margin-left: 20px;
     margin-right: 20px;
@@ -39,8 +37,6 @@ div.definition {
     border: 1px solid #aaaaaa;
     background: #f9f9f9;
     display: none;
-    -moz-border-radius: 4px;
-    -webkit-border-radius: 4px;
     border-radius: 4px;
     margin-left: 20px;
     margin-right: 20px;
@@ -152,9 +148,6 @@ body.debug .graphie { outline: 1px dashed #fdd; }
     padding-bottom: 40px;
 }
 #scratchpad div {
-    -moz-box-sizing: border-box;
-    -ms-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
     box-sizing: border-box;
     border: 1px solid #ccc;
     height: 100%;
@@ -232,7 +225,6 @@ body.debug .graphie { outline: 1px dashed #fdd; }
 
 #answer_area .calculator .history input {
     box-sizing: border-box;
-    -moz-box-sizing: border-box;
     display: block;
     font: inherit;
     margin: 5px 3px 3px;
@@ -362,8 +354,6 @@ body.debug .graphie { outline: 1px dashed #fdd; }
   list-style: none;
   border: 1px solid rgba(0, 0, 0, 0.3);
   padding-left: 10px;
-  -moz-border-radius: 5px;
-  -webkit-border-radius: 5px;
   border-radius: 5px;
   line-height: 22px;
   margin-bottom: 3px;
@@ -407,8 +397,6 @@ var, div.graphie {
   padding: 2px 5px;
   border: 1px solid #999;
   border-radius: 4px;
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
   float: left;
   cursor: pointer;
   color: white;
@@ -606,7 +594,7 @@ html.exercise-browser {
 	top: 12px;
 	padding: 0px;
 	border: none;
-	-webkit-box-shadow: none;
+	box-shadow: none;
 	overflow: visible;
 }
 
@@ -729,9 +717,6 @@ html.exercise-browser {
 
 #timelinecontainer .simple-button {
   -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -o-user-select: none;
   user-select: none;
   white-space: nowrap;
 }
@@ -754,8 +739,6 @@ html.exercise-browser {
   width: 200px;
   height: 100px;
   border: 1px solid #aaa;
-  -webkit-box-shadow: 0 0 3px #ccc;
-  -moz-box-shadow: 0 0 3px #ccc;
   box-shadow: 0 0 3px #ccc;
   margin-left: 14px; /* to line up with other titles */
   margin-bottom: 8px;
@@ -800,8 +783,6 @@ html.exercise-browser {
 	z-index: 2;
 
 	box-shadow: 0 1px 2px #ccc;
-	-moz-box-shadow: 0 1px 2px #ccc;
-	-webkit-box-shadow: 0 1px 2px #ccc;
 }
 
 .sortable > ul {
@@ -813,8 +794,6 @@ html.exercise-browser {
 	border: 1px solid #b9b9b9;
 	border-bottom-color: #939393;
 	border-radius: 4px;
-	-moz-border-radius: 4px;
-	-webkit-border-radius: 4px;
 	cursor: pointer;
 	margin-right: 4px;
 	min-width: 65px;
@@ -823,9 +802,6 @@ html.exercise-browser {
 	font-size: 1.2em;
 	float: left;
 	-webkit-user-select: none;
-	-khtml-user-select: none;
-	-moz-user-select: none;
-	-o-user-select: none;
 	user-select: none;
 }
 
@@ -844,10 +820,6 @@ html.exercise-browser {
 .sortable > ul > li:hover {
 	border-color: #ffa500;
 	box-shadow: 0 0 4px #c56f00;
-	-moz-box-shadow: 0 0 4px #c56f00;
-	-ms-box-shadow: 0 0 4px #c56f00;
-	-o-box-shadow: 0 0 4px #c56f00;
-	-webkit-box-shadow: 0 0 4px #c56f00;
 }
 
 .sortable > ul > li:active, .sortable > ul > li.dragging {
@@ -861,8 +833,6 @@ html.exercise-browser {
     border: 0;
     border-bottom: 0;
     box-shadow: 0 0 0;
-    -moz-box-shadow: 0 0 0;
-    -webkit-box-shadow: 0 0 0;
     padding-right: 0;
 }
 
@@ -895,8 +865,6 @@ html.exercise-browser {
 .qhint {
   border: 1px solid #aaaaaa;
   background: #f9f9f9;
-  -moz-border-radius: 4px;
-  -webkit-border-radius: 4px;
   border-radius: 4px;
   margin-right: 20px;
   margin-bottom: 20px;
@@ -1360,7 +1328,7 @@ body.mobile ul.inequalities-one-line-radios > li {
   margin: 0;
   max-width: none;
 }
-.bibliotron-article.framework-perseus.perseus-article:not(.perseus-mobile) .perseus-widget-container {
+.bibliotron-article.framework-perseus.perseus-article:not(.perseus-mobile) .perseus-widget-container:not(.perseus-widget__definition) {
   font-size: 14px;
   line-height: 19.6px;
 }
@@ -2183,8 +2151,6 @@ img.zoom-img {
   cursor: -moz-zoom-out;
 }
 .zoom-transition {
-  -webkit-transition: transform 300ms ease;
-  -ms-transition: transform 300ms ease;
   transition: transform 300ms ease;
 }
 .zoom-overlay {
@@ -2214,8 +2180,6 @@ img.zoom-img {
   bottom: 0;
   background: white;
   opacity: 0;
-  -webkit-transition: opacity 300ms;
-  -ms-transition: opacity 300ms;
   transition: opacity 300ms;
 }
 .zoom-overlay-open > .zoom-backdrop {
@@ -2228,10 +2192,7 @@ img.zoom-img {
   margin-top: 48px;
 }
 .no-select {
-  -moz-user-select: -moz-none;
-  -khtml-user-select: none;
   -webkit-user-select: none;
-  -o-user-select: none;
   user-select: none;
 }
 .blank-background {
@@ -2252,10 +2213,7 @@ img.zoom-img {
   background: #ffffff;
 }
 .graphie {
-  -moz-user-select: -moz-none;
-  -khtml-user-select: none;
   -webkit-user-select: none;
-  -o-user-select: none;
   user-select: none;
 }
 .perseus-interactive,
@@ -2645,8 +2603,6 @@ body.mobile .categorizer-container td.category input[type="radio"] + span:active
   overflow-y: hidden;
 }
 .perseus-widget-expression-old > .output > .placeholder > .error {
-  -webkit-border-radius: 10px;
-  -moz-border-radius: 10px;
   border-radius: 10px;
   background: #f7f7f7;
   border: 1px solid #ddd;
@@ -2941,6 +2897,7 @@ body.mobile .perseus-matrix .math-output {
   padding: 0 10px;
   cursor: pointer;
   position: relative;
+  -webkit-user-select: none;
   user-select: none;
   width: auto;
   display: flex;
@@ -2988,7 +2945,6 @@ body.mobile .perseus-matrix .math-output {
 .orderer.layout-vertical .bank,
 .orderer.layout-vertical .draggable-box {
   box-sizing: border-box;
-  -moz-box-sizing: border-box;
   float: left;
   max-width: 50%;
 }
@@ -3095,11 +3051,7 @@ body.sat-section .perseus-widget-passage {
   position: absolute;
 }
 .perseus-widget-plotter span.rotate {
-  -moz-transform: rotate(-90deg);
-  -o-transform: rotate(-90deg);
-  -webkit-transform: rotate(-90deg);
   transform: rotate(-90deg);
-  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
 }
 .set-from-scale-box {
   border: 2px solid #EEEEEE;
@@ -3192,8 +3144,6 @@ body.sat-section .perseus-widget-passage {
   border: 1px solid #ccc;
   border-bottom: 1px solid #aaa;
   box-shadow: 0 1px 2px #ccc;
-  -moz-box-shadow: 0 1px 2px #ccc;
-  -webkit-box-shadow: 0 1px 2px #ccc;
 }
 .draggy-boxy-thing .cards-area {
   position: relative;
@@ -3206,12 +3156,6 @@ body.sat-section .perseus-widget-passage {
   border: 1px solid #b9b9b9;
   border-bottom-color: #939393;
   border-radius: 4px;
-  -moz-border-radius: 4px;
-  -webkit-border-radius: 4px;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -o-user-select: none;
   cursor: pointer;
   touch-action: none;
 }
@@ -3242,8 +3186,6 @@ body.sat-section .perseus-widget-passage {
   border: 1px solid #b9b9b9;
   border-bottom-color: #939393;
   border-radius: 4px;
-  -moz-border-radius: 4px;
-  -webkit-border-radius: 4px;
   height: 100%;
   width: 100%;
   z-index: -1;
@@ -3254,10 +3196,6 @@ body.sat-section .perseus-widget-passage {
 .draggy-boxy-thing .card:hover {
   border-color: #ffa500;
   box-shadow: 0 0 4px #c78100;
-  -moz-box-shadow: 0 0 4px #c78100;
-  -ms-box-shadow: 0 0 4px #c78100;
-  -o-box-shadow: 0 0 4px #c78100;
-  -webkit-box-shadow: 0 0 4px #c78100;
 }
 .perseus-sortable div.paragraph {
   margin: 0;
@@ -3359,8 +3297,6 @@ body.mobile .framework-perseus table.perseus-widget-table-of-values.non-markdown
   transition: all 0.15s;
 }
 .perseus-widget-container.widget-highlight {
-  -webkit-box-shadow: 0px 0px 0px 2px #ffa500;
-  -moz-box-shadow: 0px 0px 0px 2px #ffa500;
   box-shadow: 0px 0px 0px 2px #ffa500;
   transition: all 0.15s;
 }

package/dist/es/index.js

@@ -10529,7 +10529,6 @@ var WrappedEllipse = function WrappedEllipse(graphie, center, radii, options) {
   if (options.shadow) {
     var filter = "drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.5))";
     var wrapper = this.wrapper;
-    wrapper.style.webkitFilter = filter;
     wrapper.style.filter = filter;
 
     this.moveTo = function (point) {
@@ -14988,7 +14987,6 @@ _.extend(MovablePoint$5.prototype, {
 
         if (state.shadow) {
           var filter = "none";
-          svgElem.style.webkitFilter = filter;
           svgElem.style.filter = filter;
         }
 
@@ -15008,7 +15006,6 @@ _.extend(MovablePoint$5.prototype, {
           if (state.shadow) {
             var content = svgElem.getElementsByClassName("tooltip-content")[0];
             var _filter = "drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.5))";
-            content.style.webkitFilter = _filter;
             content.style.filter = _filter;
           }
         }
@@ -15052,7 +15049,6 @@ _.extend(MovablePoint$5.prototype, {
 
         if (state.shadow) {
           var filter = "drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.5))";
-          svgElem.style.webkitFilter = filter;
           svgElem.style.filter = filter;
         }
 
@@ -15067,7 +15063,6 @@ _.extend(MovablePoint$5.prototype, {
           // tooltips.
           showTrashTooltip();
           var content = svgElem.getElementsByClassName("tooltip-content")[0];
-          content.style.webkitFilter = "none";
           content.style.filter = "none";
 
           this._tooltip.firstChild.addEventListener("touchstart", e => {
@@ -17599,14 +17594,8 @@ class Zoomable extends React.Component {
 
     var transitionStyle = visible ? {
       transitionProperty: property,
-      WebkitTransitionProperty: property,
-      msTransitionProperty: property,
       transitionDuration: "0.3s",
-      WebkitTransitionDuration: "0.3s",
-      msTransitionDuration: "0.3s",
-      transitionTimingFunction: "ease-out",
-      WebkitTransitionTimingfunction: "ease-out",
-      msTransitionTmingFunction: "ease-out"
+      transitionTimingFunction: "ease-out"
     } : {}; // Do a fancy little slide as we fade the contents in the first time.
 
     var translateOffset = visible ? "" : " translate(0, 8px)";
@@ -17618,11 +17607,7 @@ class Zoomable extends React.Component {
       width: "100%",
       height: zoomed ? expandedHeight : compactHeight,
       transform: transform,
-      WebkitTransform: transform,
-      msTransform: transform,
       transformOrigin: "0 0",
-      WebkitTransformOrigin: "0 0",
-      msTransformOrigin: "0 0",
       opacity: visible ? 1 : 0,
       WebkitTapHighlightColor: "transparent"
     }, transitionStyle);
@@ -19221,7 +19206,11 @@ class WidgetContainer extends React.Component {
     var className = classNames({
       "perseus-widget-container": true,
       "widget-highlight": this.props.shouldHighlight,
-      "widget-nohighlight": !this.props.shouldHighlight
+      "widget-nohighlight": !this.props.shouldHighlight,
+      // HACK(matthewc): perseus-widget-container is setting a font-size
+      // but we want the definition prompt to match the surrounding font
+      // I'm sorry, but there's a time crunch
+      "perseus-widget__definition": this.props.type === "definition"
     });
     var type = this.props.type;
     var WidgetType = getWidget(type);
@@ -20979,7 +20968,7 @@ var buttonSets = {
     }, i18n.doNotTranslate("\\geq")), "\\geq"];
   }]
 };
-var buttonSetsType = PropTypes.arrayOf(PropTypes.oneOf(_(buttonSets).keys()));
+var buttonSetsPropType = PropTypes.arrayOf(PropTypes.oneOf(_(buttonSets).keys()));
 
 class TexButtons extends React.Component {
   render() {
@@ -21015,18 +21004,11 @@ class TexButtons extends React.Component {
 
 }
 
-_defineProperty(TexButtons, "propTypes", {
-  sets: buttonSetsType.isRequired,
-  onInsert: PropTypes.func.isRequired,
-  className: PropTypes.string
-});
-
 _defineProperty(TexButtons, "buttonSets", buttonSets);
 
-_defineProperty(TexButtons, "buttonSetsType", buttonSetsType);
-
-var PT = PropTypes; // A WYSIWYG math input that calls `onChange(LaTeX-string)`
+_defineProperty(TexButtons, "buttonSetsType", buttonSetsPropType);
 
+// A WYSIWYG math input that calls `onChange(LaTeX-string)`
 class MathInput extends React.Component {
   constructor() {
     super(...arguments);
@@ -21138,63 +21120,6 @@ class MathInput extends React.Component {
     });
   }
 
-  render() {
-    var className = classNames({
-      "perseus-math-input": true,
-      // mathquill usually adds these itself but react removes them when
-      // updating the component.
-      "mq-editable-field": true,
-      "mq-math-mode": true
-    });
-
-    if (this.props.className) {
-      className = className + " " + this.props.className;
-    }
-
-    var buttons = null;
-
-    if (this._shouldShowButtons()) {
-      buttons = /*#__PURE__*/React.createElement(TexButtons, {
-        sets: this.props.buttonSets,
-        className: "math-input-buttons absolute",
-        convertDotToTimes: this.props.convertDotToTimes,
-        onInsert: this.insert
-      });
-    }
-
-    return /*#__PURE__*/React.createElement("div", {
-      style: {
-        display: "inline-block"
-      }
-    }, /*#__PURE__*/React.createElement("div", {
-      style: {
-        display: "inline-block"
-      }
-    }, /*#__PURE__*/React.createElement("span", {
-      className: className // eslint-disable-next-line react/no-string-refs
-      ,
-      ref: "mathinput",
-      "aria-label": this.props.labelText,
-      onFocus: this.handleFocus,
-      onBlur: this.handleBlur
-    })), /*#__PURE__*/React.createElement("div", {
-      style: {
-        position: "relative"
-      },
-      onBlur: this.handleBlur
-    }, buttons));
-  } // handlers:
-  // keep track of two related bits of state:
-  // * this.state.focused - whether the buttons are currently shown
-  // * this.mouseDown - whether a mouse click is active that started in the
-  //   buttons div
-
-
-  componentWillUnmount() {
-    window.removeEventListener("mousedown", this.handleMouseDown);
-    window.removeEventListener("mouseup", this.handleMouseUp);
-  }
-
   componentDidMount() {
     window.addEventListener("mousedown", this.handleMouseDown);
     window.addEventListener("mouseup", this.handleMouseUp);
@@ -21283,18 +21208,64 @@ class MathInput extends React.Component {
     initialized = true;
   }
 
-}
+  componentWillUnmount() {
+    window.removeEventListener("mousedown", this.handleMouseDown);
+    window.removeEventListener("mouseup", this.handleMouseUp);
+  } // handlers:
+  // keep track of two related bits of state:
+  // * this.state.focused - whether the buttons are currently shown
+  // * this.mouseDown - whether a mouse click is active that started in the
+  //   buttons div
 
-_defineProperty(MathInput, "propTypes", {
-  value: PT.string,
-  onChange: PT.func.isRequired,
-  convertDotToTimes: PT.bool,
-  buttonsVisible: PT.oneOf(["always", "never", "focused"]),
-  buttonSets: TexButtons.buttonSetsType.isRequired,
-  labelText: PropTypes.string,
-  onFocus: PT.func,
-  onBlur: PT.func
-});
+
+  render() {
+    var className = classNames({
+      "perseus-math-input": true,
+      // mathquill usually adds these itself but react removes them when
+      // updating the component.
+      "mq-editable-field": true,
+      "mq-math-mode": true
+    });
+
+    if (this.props.className) {
+      className = className + " " + this.props.className;
+    }
+
+    var buttons = null;
+
+    if (this._shouldShowButtons()) {
+      buttons = /*#__PURE__*/React.createElement(TexButtons, {
+        sets: this.props.buttonSets,
+        className: "math-input-buttons absolute",
+        convertDotToTimes: this.props.convertDotToTimes,
+        onInsert: this.insert
+      });
+    }
+
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: "inline-block"
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: "inline-block"
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      className: className // eslint-disable-next-line react/no-string-refs
+      ,
+      ref: "mathinput",
+      "aria-label": this.props.labelText,
+      onFocus: this.handleFocus,
+      onBlur: this.handleBlur
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        position: "relative"
+      },
+      onBlur: this.handleBlur
+    }, buttons));
+  }
+
+}
 
 _defineProperty(MathInput, "defaultProps", {
   value: "",
@@ -21988,8 +21959,6 @@ var Tooltip = createReactClass({
         top: settings["top"],
         left: settings.tooltipLeft,
         border: "1px solid " + this.props.borderColor,
-        WebkitBoxShadow: "0 1px 3px " + this.props.borderColor,
-        MozBoxShadow: "0 1px 3px " + this.props.borderColor,
         boxShadow: "0 1px 3px " + this.props.borderColor,
         zIndex: zIndex - 1
       }
@@ -32087,9 +32056,7 @@ var defaultInstructionsStyle = {
   backgroundColor: "white",
   position: "absolute",
   zIndex: 1,
-  transition: "opacity .25s ease-in-out",
-  "-moz-transition": "opacity .25s ease-in-out",
-  "-webkit-transition": "opacity .25s ease-in-out"
+  transition: "opacity .25s ease-in-out"
 };
 var instructionsTextStyle = {
   position: "relative",
@@ -43236,8 +43203,6 @@ class Simulator extends React.Component {
     var highlight = "0px 0px 0px 2px rgba(255, 165, 0, 1)";
 
     var highlightStyle = _.extend({}, inputStyle, {
-      WebkitBoxShadow: highlight,
-      MozBoxShadow: highlight,
       boxShadow: highlight,
       transition: "all 0.15s"
     });