@khanacademy/perseus 5.0.0 → 6.0.0

package/dist/components/lint.js.flow

@@ -4,21 +4,50 @@
  * Flowgen v1.21.0
  * @flow
  */
-import PropTypes from "prop-types";
 import * as React from "react";
-declare type Props = any;
-declare type State = any;
+
+declare var Severity: {|
+  +Error: 1, // 1
+  +Warning: 2, // 2
+  +Recommendation: 3, // 3
+  +OfflineReportingOnly: 4, // 4
+|};
+declare type Props = {|
+  children: React.Node,
+  inline?: boolean,
+  message: string,
+  ruleName: string,
+  insideTable: boolean,
+  blockHighlight?: boolean,
+  severity?: $Values<typeof Severity>,
+|};
+declare 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 | void;
-  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 | void;
   state: State;
   componentDidMount(): void;
   componentWillUnmount(): void;

package/dist/components/math-output.d.ts

@@ -1,15 +1,19 @@
-import PropTypes from "prop-types";
 import * as React from "react";
-declare class MathOutput extends React.Component<any, any> {
-    static propTypes: {
-        value: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
-        className: PropTypes.Requireable<string>;
-        labelText: PropTypes.Requireable<string>;
-        onFocus: PropTypes.Requireable<(...args: any[]) => any>;
-        onBlur: PropTypes.Requireable<(...args: any[]) => any>;
-    };
-    static defaultProps: any;
-    state: any;
+type Props = {
+    value: string | number;
+    className?: string;
+    labelText?: string;
+    onFocus: () => void;
+    onBlur: () => void;
+};
+type DefaultProps = Pick<Props, "value" | "onFocus" | "onBlur">;
+type State = {
+    focused: boolean;
+    selectorNamespace: string;
+};
+declare class MathOutput extends React.Component<Props, State> {
+    static defaultProps: DefaultProps;
+    state: State;
     _getInputClassName: () => string;
     _getDisplayValue: (arg1: string | number) => string;
     render(): React.ReactNode;

package/dist/components/math-output.js.flow

@@ -4,18 +4,22 @@
  * Flowgen v1.21.0
  * @flow
  */
-import PropTypes from "prop-types";
 import * as React from "react";
-declare class MathOutput extends React.Component<any, any> {
-  static propTypes: {|
-    value: PropTypes.Requireable<$NonMaybeType<string | number | null | void>>,
-    className: PropTypes.Requireable<string>,
-    labelText: PropTypes.Requireable<string>,
-    onFocus: PropTypes.Requireable<(...args: any[]) => any>,
-    onBlur: PropTypes.Requireable<(...args: any[]) => any>,
-  |};
-  static defaultProps: any;
-  state: any;
+declare type Props = {|
+  value: string | number,
+  className?: string,
+  labelText?: string,
+  onFocus: () => void,
+  onBlur: () => void,
+|};
+declare type DefaultProps = Pick<Props, "value" | "onFocus" | "onBlur">;
+declare type State = {|
+  focused: boolean,
+  selectorNamespace: string,
+|};
+declare class MathOutput extends React.Component<Props, State> {
+  static defaultProps: DefaultProps;
+  state: State;
   _getInputClassName: () => string;
   _getDisplayValue: (arg1: string | number) => string;
   render(): React.Node;

package/dist/components/sortable.d.ts

@@ -1,6 +1,16 @@
 import * as React from "react";
+import { Position } from "../util";
 import type { LinterContextProps } from "../types";
-type SortableLayoutKind = "horizontal" | "vertical";
+export declare enum Layout {
+    HORIZONTAL = "horizontal",
+    VERTICAL = "vertical"
+}
+declare enum ItemState {
+    STATIC = "static",
+    DRAGGING = "dragging",
+    ANIMATING = "animating",
+    DISABLED = "disabled"
+}
 export type SortableOption = string;
 type SortableProps = {
     constraints: {
@@ -8,7 +18,7 @@ type SortableProps = {
         height: number;
     } | Record<any, any>;
     disabled: boolean;
-    layout: SortableLayoutKind;
+    layout: Layout;
     margin: number;
     onChange: (arg1: any) => void;
     onMeasure: (arg1: {
@@ -17,8 +27,8 @@ type SortableProps = {
     }) => void;
     padding: boolean;
     linterContext: LinterContextProps;
-    waitForKatexLoad: boolean;
     options: ReadonlyArray<SortableOption>;
+    waitForTexRendererToLoad: boolean;
 };
 type DefaultProps = {
     constraints: SortableProps["constraints"];
@@ -29,27 +39,25 @@ type DefaultProps = {
     onMeasure: SortableProps["onMeasure"];
     padding: SortableProps["padding"];
     linterContext: SortableProps["linterContext"];
-    waitForKatexLoad: SortableProps["waitForKatexLoad"];
+    waitForTexRendererToLoad: SortableProps["waitForTexRendererToLoad"];
 };
-type ItemState = "disabled" | "static" | "dragging" | "animating";
 type SortableItem = {
     option: SortableOption;
     key: number;
-    type: ItemState;
-    endPosition: any;
+    state: ItemState;
+    endPosition: Position | Record<string, never>;
     width: number;
     height: number;
 };
 type SortableState = {
     items: ReadonlyArray<SortableItem>;
-    katex: null | any;
+    texRendererLoaded: boolean;
 };
 declare class Sortable extends React.Component<SortableProps, SortableState> {
     static defaultProps: DefaultProps;
     constructor(props: SortableProps);
     UNSAFE_componentWillReceiveProps(nextProps: SortableProps): void;
     componentDidUpdate(): void;
-    componentDidMount(): void;
     static itemsFromProps(props: {
         disabled: boolean;
         options: ReadonlyArray<SortableOption>;

package/dist/components/sortable.js.flow

@@ -5,8 +5,20 @@
  * @flow
  */
 import * as React from "react";
+import { Position } from "../util";
 import type { LinterContextProps } from "../types";
-declare type SortableLayoutKind = "horizontal" | "vertical";
+
+declare export var Layout: {|
+  +HORIZONTAL: "horizontal", // "horizontal"
+  +VERTICAL: "vertical", // "vertical"
+|};
+
+declare var ItemState: {|
+  +STATIC: "static", // "static"
+  +DRAGGING: "dragging", // "dragging"
+  +ANIMATING: "animating", // "animating"
+  +DISABLED: "disabled", // "disabled"
+|};
 export type SortableOption = string;
 declare type SortableProps = {|
   constraints:
@@ -16,7 +28,7 @@ declare type SortableProps = {|
       |}
     | { [key: any]: any },
   disabled: boolean,
-  layout: SortableLayoutKind,
+  layout: $Values<typeof Layout>,
   margin: number,
   onChange: (arg1: any) => void,
   onMeasure: (arg1: {|
@@ -25,8 +37,8 @@ declare type SortableProps = {|
   |}) => void,
   padding: boolean,
   linterContext: LinterContextProps,
-  waitForKatexLoad: boolean,
   options: $ReadOnlyArray<SortableOption>,
+  waitForTexRendererToLoad: boolean,
 |};
 declare type DefaultProps = {|
   constraints: $PropertyType<SortableProps, "constraints">,
@@ -37,27 +49,28 @@ declare type DefaultProps = {|
   onMeasure: $PropertyType<SortableProps, "onMeasure">,
   padding: $PropertyType<SortableProps, "padding">,
   linterContext: $PropertyType<SortableProps, "linterContext">,
-  waitForKatexLoad: $PropertyType<SortableProps, "waitForKatexLoad">,
+  waitForTexRendererToLoad: $PropertyType<
+    SortableProps,
+    "waitForTexRendererToLoad"
+  >,
 |};
-declare type ItemState = "disabled" | "static" | "dragging" | "animating";
 declare type SortableItem = {|
   option: SortableOption,
   key: number,
-  type: ItemState,
-  endPosition: any,
+  state: $Values<typeof ItemState>,
+  endPosition: Position | { [key: string]: empty },
   width: number,
   height: number,
 |};
 declare type SortableState = {|
   items: $ReadOnlyArray<SortableItem>,
-  katex: null | any,
+  texRendererLoaded: boolean,
 |};
 declare class Sortable extends React.Component<SortableProps, SortableState> {
   static defaultProps: DefaultProps;
   constructor(props: SortableProps): this;
   UNSAFE_componentWillReceiveProps(nextProps: SortableProps): void;
   componentDidUpdate(): void;
-  componentDidMount(): void;
   static itemsFromProps(props: {|
     disabled: boolean,
     options: $ReadOnlyArray<SortableOption>,

package/dist/components/svg-image.d.ts

@@ -1,12 +1,14 @@
 import * as React from "react";
+import { Coord } from "../interactive2/types";
+import type { Size } from "../perseus-types";
 import type { Alignment, Dimensions } from "../types";
 type Props = {
     allowFullBleed?: boolean;
     alt: string;
     constrainHeight?: boolean;
     extraGraphie?: {
-        box: ReadonlyArray<any>;
-        range: ReadonlyArray<any>;
+        box: Size;
+        range: [Coord, Coord];
         labels: ReadonlyArray<any>;
     };
     height?: number;
@@ -38,7 +40,7 @@ type State = {
     labelsRendered: LabelsRenderedMap;
     labelDataIsLocalized: boolean;
     labels: ReadonlyArray<Label>;
-    range: ReadonlyArray<any>;
+    range: [Coord, Coord];
 };
 declare class SvgImage extends React.Component<Props, State> {
     _isMounted: boolean;

package/dist/components/svg-image.js.flow

@@ -5,14 +5,16 @@
  * @flow
  */
 import * as React from "react";
+import { Coord } from "../interactive2/types";
+import type { Size } from "../perseus-types";
 import type { Alignment, Dimensions } from "../types";
 declare type Props = {|
   allowFullBleed?: boolean,
   alt: string,
   constrainHeight?: boolean,
   extraGraphie?: {|
-    box: $ReadOnlyArray<any>,
-    range: $ReadOnlyArray<any>,
+    box: Size,
+    range: [Coord, Coord],
     labels: $ReadOnlyArray<any>,
   |},
   height?: number,
@@ -44,7 +46,7 @@ declare type State = {|
   labelsRendered: LabelsRenderedMap,
   labelDataIsLocalized: boolean,
   labels: $ReadOnlyArray<Label>,
-  range: $ReadOnlyArray<any>,
+  range: [Coord, Coord],
 |};
 declare class SvgImage extends React.Component<Props, State> {
   _isMounted: boolean;

package/dist/components/tooltip.d.ts

@@ -7,9 +7,9 @@
  * import Tooltip from "./tooltip";
  * <Tooltip
  *     className="class-for-tooltip-contents"
- *     horizontalPosition="left" // one of "left", "right"
- *     horizontalAlign="left" // one of "left", "right"
- *     verticalPosition="bottom" // one of "top", "bottom"
+ *     horizontalPosition={HoriziontalDirection.Left}
+ *     horizontalAlign={HoriziontalDirection.Left}
+ *     verticalPosition={VerticalDirection.Top}
  *     arrowSize={10} // arrow size in pixels
  *     borderColor="#ccc" // color of the border for the tooltip
  *     show={true} // whether the tooltip should currently be visible
@@ -28,5 +28,46 @@
  *     className should not specify a border; that is handled by borderColor
  *     so that the arrow and tooltip match
  */
-declare const Tooltip: any;
+import * as React from "react";
+export declare enum HorizontalDirection {
+    Left = "left",
+    Right = "right"
+}
+export declare enum VerticalDirection {
+    Top = "top",
+    Bottom = "bottom"
+}
+type Props = {
+    show: boolean;
+    className: string;
+    arrowSize: number;
+    borderColor: string;
+    verticalPosition: VerticalDirection;
+    horizontalPosition: HorizontalDirection;
+    horizontalAlign: HorizontalDirection.Left;
+    children: React.ReactNode;
+    targetContainerStyle: any;
+};
+type DefaultProps = {
+    className: Props["className"];
+    arrowSize: Props["arrowSize"];
+    borderColor: Props["borderColor"];
+    verticalPosition: Props["verticalPosition"];
+    horizontalPosition: Props["horizontalPosition"];
+    horizontalAlign: Props["horizontalAlign"];
+    targetContainerStyle: Props["targetContainerStyle"];
+};
+type State = {
+    height: number | null;
+};
+declare class Tooltip extends React.Component<Props, State> {
+    static defaultProps: DefaultProps;
+    state: State;
+    componentDidMount(): void;
+    UNSAFE_componentWillReceiveProps(): void;
+    componentDidUpdate(): void;
+    _renderToolTipDiv(isTooltipAbove?: boolean): JSX.Element;
+    _updateHeight(): void;
+    render(): JSX.Element;
+}
 export default Tooltip;

package/dist/components/tooltip.js.flow

@@ -4,35 +4,48 @@
  * Flowgen v1.21.0
  * @flow
  */
-/**
- * A generic tooltip library for React.js
- *
- * This should eventually end up in react-components
- *
- * Interface: ({a, b} means one of a or b)
- * import Tooltip from "./tooltip";
- * <Tooltip
- *     className="class-for-tooltip-contents"
- *     horizontalPosition="left" // one of "left", "right"
- *     horizontalAlign="left" // one of "left", "right"
- *     verticalPosition="bottom" // one of "top", "bottom"
- *     arrowSize={10} // arrow size in pixels
- *     borderColor="#ccc" // color of the border for the tooltip
- *     show={true} // whether the tooltip should currently be visible
- *     targetContainerStyle={targetContainerStyle}
- * >
- *     <TargetElementOfTheTooltip />
- *     <TooltipContents1 />
- *     <TooltipContents2 />
- * </Tooltip>
- *
- * To show/hide the tooltip, the parent component should call the
- * .show() and .hide() methods of the tooltip when appropriate.
- * (These are usually set up as handlers of events on the target element.)
- *
- * Notes:
- *     className should not specify a border; that is handled by borderColor
- *     so that the arrow and tooltip match
- */
-declare var Tooltip: any;
+import * as React from "react";
+
+declare export var HorizontalDirection: {|
+  +Left: "left", // "left"
+  +Right: "right", // "right"
+|};
+
+declare export var VerticalDirection: {|
+  +Top: "top", // "top"
+  +Bottom: "bottom", // "bottom"
+|};
+declare type Props = {|
+  show: boolean,
+  className: string,
+  arrowSize: number,
+  borderColor: string,
+  verticalPosition: $Values<typeof VerticalDirection>,
+  horizontalPosition: $Values<typeof HorizontalDirection>,
+  horizontalAlign: typeof HorizontalDirection.Left,
+  children: React.Node,
+  targetContainerStyle: any,
+|};
+declare type DefaultProps = {|
+  className: $PropertyType<Props, "className">,
+  arrowSize: $PropertyType<Props, "arrowSize">,
+  borderColor: $PropertyType<Props, "borderColor">,
+  verticalPosition: $PropertyType<Props, "verticalPosition">,
+  horizontalPosition: $PropertyType<Props, "horizontalPosition">,
+  horizontalAlign: $PropertyType<Props, "horizontalAlign">,
+  targetContainerStyle: $PropertyType<Props, "targetContainerStyle">,
+|};
+declare type State = {|
+  height: number | null,
+|};
+declare class Tooltip extends React.Component<Props, State> {
+  static defaultProps: DefaultProps;
+  state: State;
+  componentDidMount(): void;
+  UNSAFE_componentWillReceiveProps(): void;
+  componentDidUpdate(): void;
+  _renderToolTipDiv(isTooltipAbove?: boolean): React$Node;
+  _updateHeight(): void;
+  render(): React$Node;
+}
 declare export default typeof Tooltip;

package/dist/es/index.css

@@ -3606,9 +3606,6 @@ body.mobile .framework-perseus table.perseus-widget-table-of-values.non-markdown
   color: white !important;
   display: inline-block !important;
 }
-.keypad-container .katex {
-  color: inherit !important;
-}
 /**
  * Styles for managing the popover animations.
  *