@khanacademy/perseus 28.2.0 → 29.0.0

package/dist/components/lint.d.ts

@@ -14,9 +14,6 @@ type Props = {
     blockHighlight?: boolean;
     severity?: Severity;
 };
-type State = {
-    tooltipAbove: boolean;
-};
 /**
  * This component renders "lint" nodes in a markdown parse tree. Lint nodes
  * are inserted into the tree by the Perseus linter (see
@@ -39,12 +36,8 @@ type State = {
  * that has a right margin (like anything blockquoted) the circle will appear
  * to the left of where it belongs.  And if there is more
  **/
-declare class Lint extends React.Component<Props, State> {
+declare class Lint extends React.Component<Props> {
     _positionTimeout: number | undefined;
-    state: State;
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    getPosition: () => void;
     renderLink: (arg1: any) => React.ReactElement;
     render(): React.ReactNode;
 }

package/dist/es/index.js

@@ -15,7 +15,7 @@ import ReactDOM__default from 'react-dom';
 import _, { debounce as debounce$1 } from 'underscore';
 import Clickable from '@khanacademy/wonder-blocks-clickable';
 import { Popover, PopoverContentCore, PopoverContent } from '@khanacademy/wonder-blocks-popover';
-import { color, spacing } from '@khanacademy/wonder-blocks-tokens';
+import { color, spacing, font } from '@khanacademy/wonder-blocks-tokens';
 import $ from 'jquery';
 import { v4 } from 'uuid';
 import PropTypes from 'prop-types';
@@ -1293,7 +1293,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 (number.equal(+fixedStr, num)) {
       return fixedStr;
@@ -18171,27 +18171,9 @@ class Lint extends React.Component {
   constructor(...args) {
     super(...args);
     this._positionTimeout = void 0;
-    this.state = {
-      tooltipAbove: true
-    };
-    // 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.
-    this.getPosition = () => {
-      // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'getBoundingClientRect' does not exist on type 'Element | Text'.
-      const rect = ReactDOM__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
     this.renderLink = style => {
-      const tooltipAbove = this.state.tooltipAbove;
       let severityStyle;
       let warningText;
       let warningTextStyle;
@@ -18208,34 +18190,23 @@ class Lint extends React.Component {
         warningText = "Recommendation";
         warningTextStyle = styles$B.warning;
       }
-      return /*#__PURE__*/React.createElement("a", {
+      return /*#__PURE__*/React.createElement(Tooltip$1, {
+        backgroundColor: "offBlack",
+        content: /*#__PURE__*/React.createElement(React.Fragment, null, this.props.message.split("\n\n").map((m, i) => /*#__PURE__*/React.createElement("p", {
+          key: i,
+          className: css(styles$B.tooltipParagraph)
+        }, /*#__PURE__*/React.createElement("span", {
+          className: css(warningTextStyle)
+        }, warningText, ":", " "), m)))
+      }, /*#__PURE__*/React.createElement("a", {
         href: `https://khanacademy.org/r/linter-rules#${this.props.ruleName}`,
         target: "lint-help-window",
         className: css(style)
       }, /*#__PURE__*/React.createElement("span", {
         className: css(styles$B.indicator, severityStyle)
-      }, this.props.severity === 1 && /*#__PURE__*/React.createElement(InlineIcon, exclamationIcon)), /*#__PURE__*/React.createElement("div", {
-        className: css(styles$B.tooltip, tooltipAbove && styles$B.tooltipAbove)
-      }, this.props.message.split("\n\n").map((m, i) => /*#__PURE__*/React.createElement("p", {
-        key: i,
-        className: css(styles$B.tooltipParagraph)
-      }, /*#__PURE__*/React.createElement("span", {
-        className: css(warningTextStyle)
-      }, warningText, ":", " "), m)), /*#__PURE__*/React.createElement("div", {
-        className: css(styles$B.tail, tooltipAbove && styles$B.tailAbove)
-      })));
+      }, this.props.severity === 1 && /*#__PURE__*/React.createElement(InlineIcon, exclamationIcon))));
     };
   }
-  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);
-  }
   // The main render method surrounds linty content with a block or
   // inline container and the link element that displays the indicator
   // and holds the tooltip.
@@ -18436,54 +18407,11 @@ const styles$B = 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: font.family.sans,
+    color: color.white,
     margin: 12
   },
   // The text "Warning" inside the tooltip is highlighted like this
@@ -22577,7 +22505,7 @@ var sharedStyles = StyleSheet.create({
     zIndex: zIndexAboveScratchpad
   },
   blankBackground: {
-    // TODO(emily): Use KhanUtil._BACKGROUND?
+    // TODO(emily): Use WB colors?
     backgroundColor: "#FDFDFD"
   },
   perseusSrOnly: {
@@ -29692,6 +29620,18 @@ const LegacyGrid = ({
 
 // 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",
@@ -31892,7 +31832,8 @@ const MafsGraph = props => {
       boxSizing: "content-box",
       marginLeft: "20px",
       marginBottom: "20px",
-      pointerEvents: props.static ? "none" : "auto"
+      pointerEvents: props.static ? "none" : "auto",
+      userSelect: "none"
     }
   }, /*#__PURE__*/React.createElement(LegacyGrid, {
     box: props.box,
@@ -44260,7 +44201,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.2.0";
+const libVersion = "29.0.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -47670,7 +47611,6 @@ const genericPerseusItemData = {
     minor: 1
   },
   hints: [],
-  _multi: null,
   answer: null
 };