@khanacademy/perseus 4.0.2 → 6.0.0

package/dist/components/highlighting/ui/highlighting-ui.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import type { TrackedSelection } from "./selection-tracker";
 import type { DOMHighlight, DOMHighlightSet, DOMRange, ZIndexes } from "./types";
-type HighlightingUIProps = {
+type Props = {
     buildHighlight: (range: DOMRange) => DOMHighlight | null | undefined;
     contentNode: Node;
     editable: boolean;
@@ -11,7 +11,7 @@ type HighlightingUIProps = {
     onRemoveHighlight: (highlightKey: string) => unknown;
     zIndexes: ZIndexes;
 };
-declare class HighlightingUI extends React.PureComponent<HighlightingUIProps> {
+declare class HighlightingUI extends React.PureComponent<Props> {
     _handleAddHighlight(highlightToAdd: DOMHighlight): void;
     _selectionIsValid(trackedSelection?: TrackedSelection | null): trackedSelection is TrackedSelection;
     render(): React.ReactNode;

package/dist/components/highlighting/ui/highlighting-ui.js.flow

@@ -12,7 +12,7 @@ import type {
   DOMRange,
   ZIndexes,
 } from "./types";
-declare type HighlightingUIProps = {|
+declare type Props = {|
   buildHighlight: (range: DOMRange) => DOMHighlight | null | void,
   contentNode: Node,
   editable: boolean,
@@ -22,7 +22,7 @@ declare type HighlightingUIProps = {|
   onRemoveHighlight: (highlightKey: string) => mixed,
   zIndexes: ZIndexes,
 |};
-declare class HighlightingUI extends React.PureComponent<HighlightingUIProps> {
+declare class HighlightingUI extends React.PureComponent<Props> {
   _handleAddHighlight(highlightToAdd: DOMHighlight): void;
   _selectionIsValid(trackedSelection?: TrackedSelection | null): boolean;
   render(): React.Node;

package/dist/components/highlighting/ui/selection-tracker.d.ts

@@ -9,19 +9,19 @@ export type TrackedSelection = {
     focusOffset: number;
     proposedHighlight: DOMHighlight;
 };
-type SelectionTrackerProps = {
+type Props = {
     buildHighlight: (domRange: DOMRange) => DOMHighlight | null | undefined;
     children?: (trackedSelection: TrackedSelection | null | undefined, userIsMouseSelecting: boolean) => React.ReactElement<any>;
     enabled: boolean;
 };
-type SelectionTrackerState = {
+type State = {
     mouseState: "down" | "down-and-selecting" | "up";
     trackedSelection: TrackedSelection | null | undefined;
 };
-declare class SelectionTracker extends React.PureComponent<SelectionTrackerProps, SelectionTrackerState> {
-    state: SelectionTrackerState;
+declare class SelectionTracker extends React.PureComponent<Props, State> {
+    state: State;
     componentDidMount(): void;
-    componentDidUpdate(prevProps: SelectionTrackerProps): void;
+    componentDidUpdate(prevProps: Props): void;
     componentWillUnmount(): void;
     _updateListeners(wasListening: boolean, willListen: boolean): void;
     /**

package/dist/components/highlighting/ui/selection-tracker.js.flow

@@ -11,7 +11,7 @@ export type TrackedSelection = {|
   focusOffset: number,
   proposedHighlight: DOMHighlight,
 |};
-declare type SelectionTrackerProps = {|
+declare type Props = {|
   buildHighlight: (domRange: DOMRange) => DOMHighlight | null | void,
   children?: (
     trackedSelection: TrackedSelection | null | void,
@@ -19,16 +19,14 @@ declare type SelectionTrackerProps = {|
   ) => React.Element<any>,
   enabled: boolean,
 |};
-declare type SelectionTrackerState = {|
+declare type State = {|
   mouseState: "down" | "down-and-selecting" | "up",
   trackedSelection: TrackedSelection | null | void,
 |};
-declare class SelectionTracker
-  extends React.PureComponent<SelectionTrackerProps, SelectionTrackerState>
-{
-  state: SelectionTrackerState;
+declare class SelectionTracker extends React.PureComponent<Props, State> {
+  state: State;
   componentDidMount(): void;
-  componentDidUpdate(prevProps: SelectionTrackerProps): void;
+  componentDidUpdate(prevProps: Props): void;
   componentWillUnmount(): void;
   _updateListeners(wasListening: boolean, willListen: boolean): void;
 

package/dist/components/highlighting/word-indexer.d.ts

@@ -13,11 +13,11 @@
  */
 import * as React from "react";
 import type { DOMRange } from "./types";
-type WordIndexerProps = {
+type Props = {
     children?: React.ReactElement<any>;
     onWordsUpdate: (wordRanges: ReadonlyArray<DOMRange>) => unknown;
 };
-declare class WordIndexer extends React.PureComponent<WordIndexerProps> {
+declare class WordIndexer extends React.PureComponent<Props> {
     _container: HTMLElement | null | undefined;
     componentDidMount(): void;
     componentDidUpdate(): void;

package/dist/components/highlighting/word-indexer.js.flow

@@ -6,11 +6,11 @@
  */
 import * as React from "react";
 import type { DOMRange } from "./types";
-declare type WordIndexerProps = {|
+declare type Props = {|
   children?: React.Element<any>,
   onWordsUpdate: (wordRanges: $ReadOnlyArray<DOMRange>) => mixed,
 |};
-declare class WordIndexer extends React.PureComponent<WordIndexerProps> {
+declare class WordIndexer extends React.PureComponent<Props> {
   _container: HTMLElement | null | void;
   componentDidMount(): void;
   componentDidUpdate(): 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,10 +1,34 @@
 import * as React from "react";
-declare const InlineIcon: React.FC<InlineIconProps>;
-export type InlineIconProps = {
+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 const InlineIcon: ({ path, width, height, style, title, }: InlineIconProps) => React.ReactElement;
 export default InlineIcon;

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

@@ -5,12 +5,35 @@
  * @flow
  */
 import * as React from "react";
-declare var InlineIcon: React.StatelessFunctionalComponent<InlineIconProps>;
-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;

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/simple-keypad-input.d.ts

@@ -9,9 +9,9 @@
  */
 import * as React from "react";
 export default class SimpleKeypadInput extends React.Component<any> {
+    _isMounted: boolean;
     componentDidMount(): void;
     componentWillUnmount(): void;
-    _isMounted: boolean;
     focus(): void;
     blur(): void;
     getValue(): string | number;

package/dist/components/simple-keypad-input.js.flow

@@ -6,9 +6,9 @@
  */
 import * as React from "react";
 declare export default class SimpleKeypadInput extends React.Component<any> {
+  _isMounted: boolean;
   componentDidMount(): void;
   componentWillUnmount(): void;
-  _isMounted: boolean;
   focus(): void;
   blur(): void;
   getValue(): string | number;

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;