@khanacademy/perseus 29.0.0 → 30.0.0

package/dist/index.js

@@ -18331,10 +18331,39 @@ 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;
@@ -18351,21 +18380,22 @@ class Lint extends React__namespace.Component {
       warningText = "Recommendation";
       warningTextStyle = styles$B.warning;
     }
-    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", {
+    return /*#__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))));
+    }, 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)
+    })));
   };
 
   // The main render method surrounds linty content with a block or
@@ -18568,11 +18598,54 @@ 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
@@ -44552,7 +44625,7 @@ const init = function (options) {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "29.0.0";
+const libVersion = "30.0.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {