@khanacademy/perseus 5.0.0 → 6.0.0

package/CHANGELOG.md

@@ -1,5 +1,47 @@
 # @khanacademy/perseus
 
+## 6.0.0
+
+### Major Changes
+
+-   4a368030: Remove getKaTeX from the PerseusDependencies type
+
+    perseus-editor now detects KaTeX rendering errors by calling KaTeX directly,
+    rather than using getKaTeX from PerseusDependencies.
+
+    The logKaTeXError method, which was unused by Perseus, has been removed from
+    the PerseusDependencies type as well.
+
+    Clients should update their code by removing the getKaTeX and logKaTeXError
+    properties from their PerseusDependencies object. If they want to log an error
+    when TeX fails to render, they should do so in their TeX component.
+
+-   9c4a6c96: Remove obsolete properties from the PerseusDependencies type
+
+    We are in the process of migrating the webapp and mobile repos to use
+    MathJax 3 as their math renderer instead of KaTeX. This change removes some of
+    Perseus's dependencies on KaTeX.
+
+    Clients should update their code by removing the `getRenderA11yString`,
+    `loadMathjax`, `KatexProvider`, and `shouldUseFutureKaTeX` properties from
+    their PerseusDependencies object.
+
+### Patch Changes
+
+-   5cc23179: Upgraded <Lint> component to use TypeScript types for props
+-   e0a087d0: Upgraded <InlineIcon> component to use TypeScript types for props
+-   b062ad47: Upgraded <MathOutput> component to use TypeScript types for props
+-   8a47076d: Upgraded <Tooltip> component to use TypeScript types for props
+-   09ab3260: Upgraded HUD component to use TypeScript types for props
+-   5432857d: Upgraded <Sortable> component (not widget) to use TypeScript types for props
+-   40c2736d: Upgraded Graphie component to use TypeScript types for props
+-   b585fe29: Switch most @khanacademy/math-input psuedo-enums to enums
+-   91617cfa: Upgraded FixedToResponsive component to use TypeScript types for props
+-   e284e7c1: Upgraded Graph component to use TypeScript types for props
+-   Updated dependencies [b585fe29]
+-   Updated dependencies [0c1cf562]
+    -   @khanacademy/math-input@2.0.0
+
 ## 5.0.0
 
 ### Major Changes

package/dist/components/fixed-to-responsive.d.ts

@@ -1,2 +1,28 @@
-declare const FixedToResponsive: any;
+import * as React from "react";
+type Props = {
+    width: number;
+    height: number;
+    children: React.ReactNode;
+    className?: string;
+    constrainHeight?: boolean;
+    allowFullBleed?: boolean;
+};
+type DefaultProps = {
+    className: Props["className"];
+    constrainHeight: Props["constrainHeight"];
+    allowFullBleed: Props["allowFullBleed"];
+};
+type State = {
+    viewportHeight: number | null;
+    viewportWidth: number | null;
+};
+declare class FixedToResponsive extends React.Component<Props, State> {
+    _isMounted: boolean;
+    static defaultProps: DefaultProps;
+    state: State;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    _cacheViewportSize: () => void;
+    render(): JSX.Element;
+}
 export default FixedToResponsive;

package/dist/components/fixed-to-responsive.js.flow

@@ -4,5 +4,31 @@
  * Flowgen v1.21.0
  * @flow
  */
-declare var FixedToResponsive: any;
+import * as React from "react";
+declare type Props = {|
+  width: number,
+  height: number,
+  children: React.Node,
+  className?: string,
+  constrainHeight?: boolean,
+  allowFullBleed?: boolean,
+|};
+declare type DefaultProps = {|
+  className: $PropertyType<Props, "className">,
+  constrainHeight: $PropertyType<Props, "constrainHeight">,
+  allowFullBleed: $PropertyType<Props, "allowFullBleed">,
+|};
+declare type State = {|
+  viewportHeight: number | null,
+  viewportWidth: number | null,
+|};
+declare class FixedToResponsive extends React.Component<Props, State> {
+  _isMounted: boolean;
+  static defaultProps: DefaultProps;
+  state: State;
+  componentDidMount(): void;
+  componentWillUnmount(): void;
+  _cacheViewportSize: () => void;
+  render(): React$Node;
+}
 declare export default typeof FixedToResponsive;

package/dist/components/graph.d.ts

@@ -1,37 +1,52 @@
-import PropTypes from "prop-types";
 import * as React from "react";
-declare class Graph extends React.Component<any> {
+import { Coord } from "../interactive2/types";
+import { PerseusImageBackground } from "../perseus-types";
+type Props = {
+    box: Readonly<[number, number]>;
+    labels: ReadonlyArray<string>;
+    range: Readonly<[Coord, Coord]>;
+    step: Readonly<[number, number]>;
+    gridStep: Readonly<[number, number]>;
+    snapStep: Readonly<[number, number]>;
+    markings: string;
+    backgroundImage: PerseusImageBackground;
+    showProtractor: boolean;
+    showRuler: boolean;
+    rulerLabel: string;
+    rulerTicks: number;
+    instructions?: string;
+    isMobile: boolean;
+    onGraphieUpdated?: (graphie: any) => void;
+    onClick?: (Coord: any) => void;
+    onMouseDown?: (Coord: any) => void;
+    onMouseUp?: (Coord: any) => void;
+    onMouseMove?: (Coord: any) => void;
+    setDrawingAreaAvailable?: (boolean: any) => void;
+};
+type DefaultProps = {
+    labels: Props["labels"];
+    range: Props["range"];
+    step: Props["step"];
+    gridStep: Props["gridStep"];
+    snapStep: Props["snapStep"];
+    markings: Props["markings"];
+    backgroundImage: Props["backgroundImage"];
+    showProtractor: Props["showProtractor"];
+    showRuler: Props["showRuler"];
+    rulerLabel: Props["rulerLabel"];
+    rulerTicks: Props["rulerTicks"];
+    isMobile: Props["isMobile"];
+};
+declare class Graph extends React.Component<Props> {
     protractor: any;
     ruler: any;
     _graphie: any;
     _hasSetupGraphieThisUpdate: boolean;
     _shouldSetupGraphie: boolean;
-    static propTypes: {
-        box: PropTypes.Validator<any[]>;
-        labels: PropTypes.Requireable<(string | null | undefined)[]>;
-        range: PropTypes.Requireable<((number | null | undefined)[] | null | undefined)[]>;
-        step: PropTypes.Requireable<(number | null | undefined)[]>;
-        gridStep: PropTypes.Requireable<(number | null | undefined)[]>;
-        snapStep: PropTypes.Requireable<(number | null | undefined)[]>;
-        markings: PropTypes.Requireable<string>;
-        backgroundImage: PropTypes.Requireable<PropTypes.InferProps<{
-            url: PropTypes.Requireable<string>;
-        }>>;
-        showProtractor: PropTypes.Requireable<boolean>;
-        showRuler: PropTypes.Requireable<boolean>;
-        rulerLabel: PropTypes.Requireable<string>;
-        rulerTicks: PropTypes.Requireable<number>;
-        onGraphieUpdated: PropTypes.Requireable<(...args: any[]) => any>;
-        instructions: PropTypes.Requireable<string>;
-        onClick: PropTypes.Requireable<(...args: any[]) => any>;
-        setDrawingAreaAvailable: PropTypes.Requireable<(...args: any[]) => any>;
-        isMobile: PropTypes.Requireable<boolean>;
-    };
-    static defaultProps: any;
-    render(): React.ReactNode;
+    static defaultProps: DefaultProps;
     componentDidMount(): void;
-    componentDidUpdate(): void;
     UNSAFE_componentWillReceiveProps(nextProps: any): void;
+    componentDidUpdate(): void;
     reset: () => void;
     graphie: () => any;
     pointsFromNormalized: (arg1: any, arg2: any) => any;
@@ -40,5 +55,6 @@ declare class Graph extends React.Component<any> {
     _updateProtractor: () => void;
     _updateRuler: () => void;
     toJSON: () => any;
+    render(): React.ReactNode;
 }
 export default Graph;

package/dist/components/graph.js.flow

@@ -4,42 +4,55 @@
  * Flowgen v1.21.0
  * @flow
  */
-import PropTypes from "prop-types";
 import * as React from "react";
-declare class Graph extends React.Component<any> {
+import { Coord } from "../interactive2/types";
+import { PerseusImageBackground } from "../perseus-types";
+declare type Props = {|
+  box: $ReadOnly<[number, number]>,
+  labels: $ReadOnlyArray<string>,
+  range: $ReadOnly<[Coord, Coord]>,
+  step: $ReadOnly<[number, number]>,
+  gridStep: $ReadOnly<[number, number]>,
+  snapStep: $ReadOnly<[number, number]>,
+  markings: string,
+  backgroundImage: PerseusImageBackground,
+  showProtractor: boolean,
+  showRuler: boolean,
+  rulerLabel: string,
+  rulerTicks: number,
+  instructions?: string,
+  isMobile: boolean,
+  onGraphieUpdated?: (graphie: any) => void,
+  onClick?: (Coord: any) => void,
+  onMouseDown?: (Coord: any) => void,
+  onMouseUp?: (Coord: any) => void,
+  onMouseMove?: (Coord: any) => void,
+  setDrawingAreaAvailable?: (boolean: any) => void,
+|};
+declare type DefaultProps = {|
+  labels: $PropertyType<Props, "labels">,
+  range: $PropertyType<Props, "range">,
+  step: $PropertyType<Props, "step">,
+  gridStep: $PropertyType<Props, "gridStep">,
+  snapStep: $PropertyType<Props, "snapStep">,
+  markings: $PropertyType<Props, "markings">,
+  backgroundImage: $PropertyType<Props, "backgroundImage">,
+  showProtractor: $PropertyType<Props, "showProtractor">,
+  showRuler: $PropertyType<Props, "showRuler">,
+  rulerLabel: $PropertyType<Props, "rulerLabel">,
+  rulerTicks: $PropertyType<Props, "rulerTicks">,
+  isMobile: $PropertyType<Props, "isMobile">,
+|};
+declare class Graph extends React.Component<Props> {
   protractor: any;
   ruler: any;
   _graphie: any;
   _hasSetupGraphieThisUpdate: boolean;
   _shouldSetupGraphie: boolean;
-  static propTypes: {|
-    box: PropTypes.Validator<any[]>,
-    labels: PropTypes.Requireable<(string | null | void)[]>,
-    range: PropTypes.Requireable<((number | null | void)[] | null | void)[]>,
-    step: PropTypes.Requireable<(number | null | void)[]>,
-    gridStep: PropTypes.Requireable<(number | null | void)[]>,
-    snapStep: PropTypes.Requireable<(number | null | void)[]>,
-    markings: PropTypes.Requireable<string>,
-    backgroundImage: PropTypes.Requireable<
-      PropTypes.InferProps<{|
-        url: PropTypes.Requireable<string>,
-      |}>
-    >,
-    showProtractor: PropTypes.Requireable<boolean>,
-    showRuler: PropTypes.Requireable<boolean>,
-    rulerLabel: PropTypes.Requireable<string>,
-    rulerTicks: PropTypes.Requireable<number>,
-    onGraphieUpdated: PropTypes.Requireable<(...args: any[]) => any>,
-    instructions: PropTypes.Requireable<string>,
-    onClick: PropTypes.Requireable<(...args: any[]) => any>,
-    setDrawingAreaAvailable: PropTypes.Requireable<(...args: any[]) => any>,
-    isMobile: PropTypes.Requireable<boolean>,
-  |};
-  static defaultProps: any;
-  render(): React.Node;
+  static defaultProps: DefaultProps;
   componentDidMount(): void;
-  componentDidUpdate(): void;
   UNSAFE_componentWillReceiveProps(nextProps: any): void;
+  componentDidUpdate(): void;
   reset: () => void;
   graphie: () => any;
   pointsFromNormalized: (arg1: any, arg2: any) => any;
@@ -48,5 +61,6 @@ declare class Graph extends React.Component<any> {
   _updateProtractor: () => void;
   _updateRuler: () => void;
   toJSON: () => any;
+  render(): React.Node;
 }
 declare export default typeof Graph;

package/dist/components/graphie.d.ts

@@ -1,25 +1,37 @@
-import PropTypes from "prop-types";
 import * as React from "react";
-type Props = any;
+import type { Coord } from "../interactive2/types";
+import type { Range, Size } from "../perseus-types";
+type Props = {
+    addMouseLayer?: boolean;
+    box: Size;
+    range: [Coord, Coord];
+    ranges?: [Range, Range];
+    gridStep?: [number, number];
+    step?: [number, number];
+    scale?: [number, number];
+    isMobile?: boolean;
+    responsive?: boolean;
+    children?: React.ReactNode;
+    options: any;
+    setDrawingAreaAvailable?: (boolean: any) => void;
+    setup: (graphie: any, options: {
+        range: [Coord, Coord];
+        scale: [number, number];
+    }) => void;
+    onClick?: (at: Coord) => void;
+    onMouseDown?: (at: Coord) => void;
+    onMouseMove?: (at: Coord) => void;
+    onMouseUp?: (at: Coord) => void;
+};
+type DefaultProps = {
+    range: Props["range"];
+    options: Props["options"];
+    responsive: Props["responsive"];
+    addMouseLayer: Props["addMouseLayer"];
+};
 declare class Graphie extends React.Component<Props> {
-    static propTypes: {
-        addMouseLayer: PropTypes.Requireable<boolean>;
-        box: PropTypes.Validator<(number | null | undefined)[]>;
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        isMobile: PropTypes.Requireable<boolean>;
-        onClick: PropTypes.Requireable<(...args: any[]) => any>;
-        onMouseDown: PropTypes.Requireable<(...args: any[]) => any>;
-        onMouseMove: PropTypes.Requireable<(...args: any[]) => any>;
-        onMouseUp: PropTypes.Requireable<(...args: any[]) => any>;
-        options: PropTypes.Requireable<PropTypes.InferProps<{
-            snapStep: PropTypes.Requireable<(number | null | undefined)[]>;
-        }>>;
-        range: PropTypes.Requireable<((number | null | undefined)[] | null | undefined)[]>;
-        responsive: PropTypes.Requireable<boolean>;
-        setDrawingAreaAvailable: PropTypes.Requireable<(...args: any[]) => any>;
-        setup: PropTypes.Validator<(...args: any[]) => any>;
-    };
-    static defaultProps: any;
+    graphieDivRef: React.RefObject<HTMLDivElement>;
+    static defaultProps: DefaultProps;
     componentDidMount(): void;
     shouldComponentUpdate(nextProps: Props): boolean;
     componentDidUpdate(prevProps: Props): void;
@@ -32,8 +44,8 @@ declare class Graphie extends React.Component<Props> {
      * Use it for good and not evil.
      */
     getGraphie: () => any;
-    _range: () => ReadonlyArray<[number, number]>;
-    _box: () => ReadonlyArray<number>;
+    _range: () => [Coord, Coord];
+    _box: () => Size;
     _scale: () => ReadonlyArray<number>;
     _setupGraphie: () => void;
     _removeMovables: () => void;

package/dist/components/graphie.js.flow

@@ -4,30 +4,43 @@
  * Flowgen v1.21.0
  * @flow
  */
-import PropTypes from "prop-types";
 import * as React from "react";
-declare type Props = any;
+import type { Coord } from "../interactive2/types";
+import type { Range, Size } from "../perseus-types";
+declare type Props = {|
+  addMouseLayer?: boolean,
+  box: Size,
+  range: [Coord, Coord],
+  ranges?: [Range, Range],
+  gridStep?: [number, number],
+  step?: [number, number],
+  scale?: [number, number],
+  isMobile?: boolean,
+  responsive?: boolean,
+  children?: React.Node,
+  options: any,
+  setDrawingAreaAvailable?: (boolean: any) => void,
+  setup: (
+    graphie: any,
+    options: {|
+      range: [Coord, Coord],
+      scale: [number, number],
+    |}
+  ) => void,
+  onClick?: (at: Coord) => void,
+  onMouseDown?: (at: Coord) => void,
+  onMouseMove?: (at: Coord) => void,
+  onMouseUp?: (at: Coord) => void,
+|};
+declare type DefaultProps = {|
+  range: $PropertyType<Props, "range">,
+  options: $PropertyType<Props, "options">,
+  responsive: $PropertyType<Props, "responsive">,
+  addMouseLayer: $PropertyType<Props, "addMouseLayer">,
+|};
 declare class Graphie extends React.Component<Props> {
-  static propTypes: {|
-    addMouseLayer: PropTypes.Requireable<boolean>,
-    box: PropTypes.Validator<(number | null | void)[]>,
-    children: PropTypes.Requireable<PropTypes.ReactNodeLike>,
-    isMobile: PropTypes.Requireable<boolean>,
-    onClick: PropTypes.Requireable<(...args: any[]) => any>,
-    onMouseDown: PropTypes.Requireable<(...args: any[]) => any>,
-    onMouseMove: PropTypes.Requireable<(...args: any[]) => any>,
-    onMouseUp: PropTypes.Requireable<(...args: any[]) => any>,
-    options: PropTypes.Requireable<
-      PropTypes.InferProps<{|
-        snapStep: PropTypes.Requireable<(number | null | void)[]>,
-      |}>
-    >,
-    range: PropTypes.Requireable<((number | null | void)[] | null | void)[]>,
-    responsive: PropTypes.Requireable<boolean>,
-    setDrawingAreaAvailable: PropTypes.Requireable<(...args: any[]) => any>,
-    setup: PropTypes.Validator<(...args: any[]) => any>,
-  |};
-  static defaultProps: any;
+  graphieDivRef: React.RefObject<HTMLDivElement>;
+  static defaultProps: DefaultProps;
   componentDidMount(): void;
   shouldComponentUpdate(nextProps: Props): boolean;
   componentDidUpdate(prevProps: Props): void;
@@ -41,8 +54,8 @@ declare class Graphie extends React.Component<Props> {
    * Use it for good and not evil.
    */
   getGraphie: () => any;
-  _range: () => $ReadOnlyArray<[number, number]>;
-  _box: () => $ReadOnlyArray<number>;
+  _range: () => [Coord, Coord];
+  _box: () => Size;
   _scale: () => $ReadOnlyArray<number>;
   _setupGraphie: () => void;
   _removeMovables: () => void;

package/dist/components/hud.d.ts

@@ -1,15 +1,9 @@
-import PropTypes from "prop-types";
-import * as React from "react";
-declare class HUD extends React.Component<any> {
-    static propTypes: {
-        message: PropTypes.Validator<string>;
-        enabled: PropTypes.Validator<boolean>;
-        onClick: PropTypes.Validator<(...args: any[]) => any>;
-        fixedPosition: PropTypes.Requireable<boolean>;
-    };
-    static defaultProps: any;
-    renderVisibleIcon: () => React.ReactElement;
-    renderHiddenIcon: () => React.ReactElement;
-    render(): React.ReactNode;
-}
+/// <reference types="react" />
+type Props = {
+    message: string;
+    enabled: boolean;
+    onClick: () => void;
+    fixedPosition?: boolean;
+};
+declare const HUD: ({ message, enabled, onClick, fixedPosition }: Props) => JSX.Element;
 export default HUD;

package/dist/components/hud.js.flow

@@ -4,18 +4,11 @@
  * Flowgen v1.21.0
  * @flow
  */
-import PropTypes from "prop-types";
-import * as React from "react";
-declare class HUD extends React.Component<any> {
-  static propTypes: {|
-    message: PropTypes.Validator<string>,
-    enabled: PropTypes.Validator<boolean>,
-    onClick: PropTypes.Validator<(...args: any[]) => any>,
-    fixedPosition: PropTypes.Requireable<boolean>,
-  |};
-  static defaultProps: any;
-  renderVisibleIcon: () => React.Element<any>;
-  renderHiddenIcon: () => React.Element<any>;
-  render(): React.Node;
-}
+declare type Props = {|
+  message: string,
+  enabled: boolean,
+  onClick: () => void,
+  fixedPosition?: boolean,
+|};
+declare var HUD: (x: Props) => React$Node;
 declare export default typeof HUD;

package/dist/components/inline-icon.d.ts

@@ -1,3 +1,11 @@
+import * as React from "react";
+type InlineIconProps = {
+    path: string;
+    height: number;
+    width: number;
+    style?: React.CSSProperties;
+    title?: string;
+};
 /**
  * A stripped version of Icon.jsx from webapp. Takes an SVG icon and renders it
  * inline like Font Awesome did.
@@ -22,23 +30,5 @@
  *   <InlineIcon {...editIcon} />
  *
  */
-import PropTypes from "prop-types";
-import * as React from "react";
-declare const InlineIcon: {
-    ({ path, width, height, style, title, }: InlineIconProps): React.ReactElement;
-    propTypes: {
-        path: PropTypes.Validator<string>;
-        height: PropTypes.Validator<number>;
-        width: PropTypes.Validator<number>;
-        style: PropTypes.Requireable<object>;
-        title: PropTypes.Requireable<string>;
-    };
-};
-export type InlineIconProps = {
-    path: string;
-    height: number;
-    width: number;
-    style?: any;
-    title?: string;
-};
+declare const InlineIcon: ({ path, width, height, style, title, }: InlineIconProps) => React.ReactElement;
 export default InlineIcon;

package/dist/components/inline-icon.js.flow

@@ -4,23 +4,36 @@
  * Flowgen v1.21.0
  * @flow
  */
-import PropTypes from "prop-types";
 import * as React from "react";
-declare var InlineIcon: {|
-  (x: InlineIconProps): React.Element<any>,
-  propTypes: {|
-    path: PropTypes.Validator<string>,
-    height: PropTypes.Validator<number>,
-    width: PropTypes.Validator<number>,
-    style: PropTypes.Requireable<{ ... }>,
-    title: PropTypes.Requireable<string>,
-  |},
-|};
-export type InlineIconProps = {|
+declare type InlineIconProps = {|
   path: string,
   height: number,
   width: number,
-  style?: any,
+  style?: React.CSSProperties,
   title?: string,
 |};
+/**
+ * A stripped version of Icon.jsx from webapp. Takes an SVG icon and renders it
+ * inline like Font Awesome did.
+ *
+ * If you are looking for an icon that we've used before you should look in
+ * webapp's `icon-paths.js` which is a reference file for all the SVG paths
+ * that we've used. You'll need to copy the object from that file into
+ * whichever file you're using the icon and explicitly pass it in to the
+ * <InlineIcon/> React component.
+ *
+ * We assume that the viewBox is cropped and aligned to (0, 0), but icons can
+ * be defined differently. At some point we might want to add these attributes
+ * to `icon-paths.js`, but for now this is a fairly safe assumption.
+ *
+ * Sample usage:
+ *
+ *   const editIcon = {
+ *      path: "M41.209 53.753l5.39 0l0 5.39l3.136 0l6.468-6.517-8.477-8.526-6.517 6.517l0 3.136zm33.173-34.937q-.882-.882-1.862.049l-19.6 19.6q-.931.98-.049 1.862t1.862-.049l19.6-19.6q.931-.98.049-1.862zm-38.563 45.668l0-16.121l37.632-37.632 16.17 16.121-37.632 37.632l-16.17 0zm43.022-12.397l0 10.633q-.049 6.713-4.753 11.417t-11.368 4.704l-46.599 0q-6.713 0-11.417-4.753t-4.704-11.368l0-46.599q0-6.664 4.753-11.417t11.368-4.704l46.599 0q3.528 0 6.566 1.372.833.392.98 1.323t-.49 1.617l-2.744 2.744q-.784.784-1.96.441t-2.352-.343l-46.599 0q-3.675 0-6.321 2.646t-2.646 6.321l0 46.599q0 3.675 2.646 6.321t6.321 2.646l46.599 0q3.675 0 6.321-2.646t2.646-6.321l0-7.056q0-.735.49-1.225l3.577-3.577q.833-.833 1.96-.392t1.127 1.617zm7.203-51.646q2.254 0 3.773 1.568l8.526 8.526q1.568 1.568 1.568 3.822t-1.568 3.773l-5.145 5.145-16.121-16.121 5.145-5.145q1.568-1.568 3.822-1.568z",
+ *      width: 100,
+ *      height: 78.912,
+ *   };
+ *   <InlineIcon {...editIcon} />
+ */
+declare var InlineIcon: (x: InlineIconProps) => React.Element<any>;
 declare export default typeof InlineIcon;

package/dist/components/lint.d.ts

@@ -1,18 +1,46 @@
-import PropTypes from "prop-types";
 import * as React from "react";
-type Props = any;
-type State = any;
+declare enum Severity {
+    Error = 1,
+    Warning = 2,
+    Recommendation = 3,
+    OfflineReportingOnly = 4
+}
+type Props = {
+    children: React.ReactNode;
+    inline?: boolean;
+    message: string;
+    ruleName: string;
+    insideTable: boolean;
+    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
+ * perseus-linter/src/index).
+ *
+ * This component serves multiple purposes
+ *
+ * 1) It renders a small circle in the right margin to indicate that there
+ * is lint on (or near) that line.
+ *
+ * 2) The area around the circle is hoverable: when the mouse moves over it
+ * the linty content is highlighted and a tooltip is displayed that explains
+ * what the problem is.
+ *
+ * 3) The hoverable area is also an HTML <a> tag. Clicking on it opens
+ * a new tab and links to additional details about the specific lint rule.
+ *
+ * The CSS required to position the circles in the right margin is tricky
+ * and it does not always work perfectly. When lint occurs on a block element
+ * 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> {
-    _positionTimeout: number | null | undefined;
-    static propTypes: {
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        inline: PropTypes.Requireable<boolean>;
-        message: PropTypes.Validator<string>;
-        ruleName: PropTypes.Validator<string>;
-        insideTable: PropTypes.Validator<boolean>;
-        blockHighlight: PropTypes.Requireable<boolean>;
-        severity: PropTypes.Requireable<number>;
-    };
+    _positionTimeout: number | undefined;
     state: State;
     componentDidMount(): void;
     componentWillUnmount(): void;