@khanacademy/perseus 5.0.0 → 6.1.0

package/dist/perseus-types.d.ts

@@ -1,4 +1,6 @@
 import type { Coord } from "./interactive2/types";
+export type Range = [number, number];
+export type Size = [number, number];
 type Empty = Record<string, never>;
 export type PerseusItem = {
     question: PerseusRenderer;
@@ -87,8 +89,8 @@ export type VideoWidget = Widget<'video', PerseusVideoWidgetOptions>;
 export type PerseusWidget = CategorizerWidget | CSProgramWidget | DefinitionWidget | DropdownWidget | ExampleGraphieWidget | ExampleWidget | ExplanationWidget | ExpressionWidget | GradedGroupSetWidget | GradedGroupWidget | GrapherWidget | GroupWidget | IFrameWidget | ImageWidget | InputNumberWidget | InteractionWidget | InteractiveGraphWidget | LabelImageWidget | LightsPuzzleWidget | MatcherWidget | MatrixWidget | MeasurerWidget | MoleculeRendererWidget | NumberLineWidget | NumericInputWidget | OrdererWidget | PassageRefWidget | PassageWidget | PlotterWidget | RadioWidget | ReactionDiagramWidget | RefTargetWidget | SequenceWidget | SimpleMarkdownTesterWidget | SimulatorWidget | SorterWidget | TableWidget | TransformerWidget | UnitInputWidget | VideoWidget;
 export type PerseusImageBackground = {
     url: string | null | undefined;
-    width: number;
-    height: number;
+    width?: number;
+    height?: number;
     top?: number;
     left?: number;
     scale?: number | string;
@@ -227,8 +229,8 @@ export type PerseusImageWidgetOptions = {
     backgroundImage: PerseusImageBackground;
     static?: boolean;
     labels?: ReadonlyArray<PerseusImageLabel>;
-    range?: ReadonlyArray<ReadonlyArray<number>>;
-    box?: ReadonlyArray<number>;
+    range?: [Range, Range];
+    box?: Size;
 };
 export type PerseusImageLabel = {
     content: string;
@@ -606,19 +608,19 @@ export type PerseusInteractionWidgetOptions = {
 };
 export type PerseusInteractionGraph = {
     editableSettings?: ReadonlyArray<"canvas" | "graph">;
-    box: ReadonlyArray<number>;
+    box: Size;
     labels: ReadonlyArray<string>;
-    range: ReadonlyArray<ReadonlyArray<number>>;
-    gridStep: ReadonlyArray<number>;
+    range: [Range, Range];
+    gridStep: Readonly<[number, number]>;
     markings: string;
-    snapStep?: ReadonlyArray<number>;
+    snapStep?: Readonly<[number, number]>;
     valid?: boolean | string;
     backgroundImage?: PerseusImageBackground;
     showProtractor?: boolean;
     showRuler?: boolean;
     rulerLabel?: string;
     rulerTicks?: number;
-    tickStep: ReadonlyArray<number>;
+    tickStep: Readonly<[number, number]>;
 };
 export type PerseusInteractionElement = {
     type: "function";

package/dist/perseus-types.js.flow

@@ -5,6 +5,8 @@
  * @flow
  */
 import type { Coord } from "./interactive2/types";
+export type Range = [number, number];
+export type Size = [number, number];
 declare type Empty = { [key: string]: empty };
 export type PerseusItem = {|
   question: PerseusRenderer,
@@ -205,8 +207,8 @@ export type PerseusWidget =
   | VideoWidget;
 export type PerseusImageBackground = {|
   url: string | null | void,
-  width: number,
-  height: number,
+  width?: number,
+  height?: number,
   top?: number,
   left?: number,
   scale?: number | string,
@@ -354,8 +356,8 @@ export type PerseusImageWidgetOptions = {|
   backgroundImage: PerseusImageBackground,
   static?: boolean,
   labels?: $ReadOnlyArray<PerseusImageLabel>,
-  range?: $ReadOnlyArray<$ReadOnlyArray<number>>,
-  box?: $ReadOnlyArray<number>,
+  range?: [Range, Range],
+  box?: Size,
 |};
 export type PerseusImageLabel = {|
   content: string,
@@ -809,19 +811,19 @@ export type PerseusInteractionWidgetOptions = {|
 |};
 export type PerseusInteractionGraph = {|
   editableSettings?: $ReadOnlyArray<"canvas" | "graph">,
-  box: $ReadOnlyArray<number>,
+  box: Size,
   labels: $ReadOnlyArray<string>,
-  range: $ReadOnlyArray<$ReadOnlyArray<number>>,
-  gridStep: $ReadOnlyArray<number>,
+  range: [Range, Range],
+  gridStep: $ReadOnly<[number, number]>,
   markings: string,
-  snapStep?: $ReadOnlyArray<number>,
+  snapStep?: $ReadOnly<[number, number]>,
   valid?: boolean | string,
   backgroundImage?: PerseusImageBackground,
   showProtractor?: boolean,
   showRuler?: boolean,
   rulerLabel?: string,
   rulerTicks?: number,
-  tickStep: $ReadOnlyArray<number>,
+  tickStep: $ReadOnly<[number, number]>,
 |};
 export type PerseusInteractionElement =
   | {|

package/dist/renderer.d.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 import InteractionTracker from "./interaction-tracker";
 import TranslationLinter from "./translation-linter";
 import type { PerseusRenderer, PerseusWidgetOptions } from "./perseus-types";
-import type { APIOptions, APIOptionsWithDefaults, FilterCriterion, FocusPath, LinterContextProps, PerseusDependencies, PerseusScore, WidgetInfo, WidgetProps } from "./types";
+import type { APIOptions, APIOptionsWithDefaults, FilterCriterion, FocusPath, LinterContextProps, PerseusScore, WidgetInfo, WidgetProps } from "./types";
 import "./styles/perseus-renderer.less";
 type WidgetState = {
     isMobile?: boolean;
@@ -98,7 +98,7 @@ declare class Renderer extends React.Component<Props, State> {
     _isMounted: boolean;
     _isTwoColumn: boolean;
     _translationLinter: TranslationLinter;
-    lastRenderedMarkdown: React.ReactElement<React.ComponentProps<PerseusDependencies["KatexProvider"]>>;
+    lastRenderedMarkdown: React.ReactNode;
     reuseMarkdown: boolean;
     translationIndex: number;
     widgetIds: Array<string>;

package/dist/renderer.js.flow

@@ -14,7 +14,6 @@ import type {
   FilterCriterion,
   FocusPath,
   LinterContextProps,
-  PerseusDependencies,
   PerseusScore,
   WidgetInfo,
   WidgetProps,
@@ -135,8 +134,7 @@ declare class Renderer extends React.Component<Props, State> {
   _isMounted: boolean;
   _isTwoColumn: boolean;
   _translationLinter: TranslationLinter;
-  lastRenderedMarkdown: React.Element<$PropertyType<PerseusDependencies, "KatexProvider">
-  >;
+  lastRenderedMarkdown: React.Node;
   reuseMarkdown: boolean;
   translationIndex: number;
   widgetIds: Array<string>;

package/dist/styles/shared.d.ts

@@ -1,3 +1,2 @@
-import type { StyleDeclaration } from "aphrodite";
 declare const _default: StyleDeclaration;
 export default _default;

package/dist/styles/shared.js.flow

@@ -4,6 +4,5 @@
  * Flowgen v1.21.0
  * @flow
  */
-import type { StyleDeclaration } from "aphrodite";
 declare var _default: StyleDeclaration;
 declare export default typeof _default;

package/dist/types.d.ts

@@ -1,5 +1,3 @@
-import katex from "katex";
-import katexA11y from "katex/dist/contrib/render-a11y-string";
 import * as React from "react";
 import type { SerializedHighlightSet } from "./components/highlighting/types";
 import type { ILogger } from "./logging/log";
@@ -170,14 +168,6 @@ export type PerseusDependencies = {
     graphieMovablesJiptLabels: JiptLabelStore;
     svgImageJiptLabels: JiptLabelStore;
     rendererTranslationComponents: JiptTranslationComponents;
-    getKaTeX: () => Promise<katex>;
-    getRenderA11yString: () => Promise<katexA11y>;
-    loadMathjax: () => Promise<unknown>;
-    logKaTeXError: (expression: string, error: Error) => Promise<Response | null | undefined>;
-    KatexProvider: React.ComponentType<{
-        children: React.ReactNode;
-    }>;
-    shouldUseFutureKaTeX: (flag: boolean) => void;
     TeX: React.ComponentType<TeXProps>;
     staticUrl: StaticUrlFn;
     InitialRequestUrl: InitialRequestUrlInterface;

package/dist/types.js.flow

@@ -4,8 +4,6 @@
  * Flowgen v1.21.0
  * @flow
  */
-import katex from "katex";
-import katexA11y from "katex/dist/contrib/render-a11y-string";
 import * as React from "react";
 import type { SerializedHighlightSet } from "./components/highlighting/types";
 import type { ILogger } from "./logging/log";
@@ -200,17 +198,6 @@ export type PerseusDependencies = {|
   graphieMovablesJiptLabels: JiptLabelStore,
   svgImageJiptLabels: JiptLabelStore,
   rendererTranslationComponents: JiptTranslationComponents,
-  getKaTeX: () => Promise<katex>,
-  getRenderA11yString: () => Promise<katexA11y>,
-  loadMathjax: () => Promise<mixed>,
-  logKaTeXError: (
-    expression: string,
-    error: Error
-  ) => Promise<Response | null | void>,
-  KatexProvider: React.ComponentType<{|
-    children: React.Node,
-  |}>,
-  shouldUseFutureKaTeX: (flag: boolean) => void,
   TeX: React.ComponentType<TeXProps>,
   staticUrl: StaticUrlFn,
   InitialRequestUrl: InitialRequestUrlInterface,

package/dist/util/a11y.d.ts

@@ -1,3 +1,2 @@
-import type { StyleDeclaration } from "aphrodite";
 declare const _default: StyleDeclaration;
 export default _default;

package/dist/util/a11y.js.flow

@@ -4,6 +4,5 @@
  * Flowgen v1.21.0
  * @flow
  */
-import type { StyleDeclaration } from "aphrodite";
 declare var _default: StyleDeclaration;
 declare export default typeof _default;

package/dist/util/interactive.d.ts

@@ -5,5 +5,7 @@
  * `Graphie` prototype for dealing with interactive graphie elements.
  */
 import "../jquery.mobile.vmouse";
+import type { Coord } from "../interactive2/types";
+export type MouseHandler = (position: Coord) => void;
 declare const InteractiveUtils: any;
 export default InteractiveUtils;

package/dist/util/interactive.js.flow

@@ -5,5 +5,7 @@
  * @flow
  */
 import "../jquery.mobile.vmouse";
+import type { Coord } from "../interactive2/types";
+export type MouseHandler = (position: Coord) => void;
 declare var InteractiveUtils: any;
 declare export default typeof InteractiveUtils;

package/dist/util.d.ts

@@ -1,3 +1,4 @@
+import type { Range } from "./perseus-types";
 import type { Widget, PerseusScore, KEScore } from "./types";
 type WordPosition = {
     start: number;
@@ -21,7 +22,7 @@ export type GridDimensions = {
 type QueryParams = {
     [param: string]: string;
 };
-type Position = {
+export type Position = {
     top: number;
     left: number;
 };
@@ -107,13 +108,12 @@ declare function tickStepFromExtent(extent: Coordinates, dimensionConstraint: nu
  *      tickStepFromNumTicks(50, 6) // returns 10
  */
 declare function tickStepFromNumTicks(span: number, numTicks: number): number;
-type Range = [number, number];
 /**
  * Constrain tick steps intended for desktop size graphs
  * to something more suitable for mobile size graphs.
  * Specifically, we aim for 10 or fewer ticks per graph axis.
  */
-declare function constrainedTickStepsFromTickSteps(tickSteps: Coordinates, ranges: [Range, Range]): Coordinates;
+declare function constrainedTickStepsFromTickSteps(tickSteps: [number, number], ranges: [Range, Range]): Coordinates;
 /**
  * Approximate equality on numbers and primitives.
  */

package/dist/util.js.flow

@@ -4,6 +4,7 @@
  * Flowgen v1.21.0
  * @flow
  */
+import type { Range } from "./perseus-types";
 import type { Widget, PerseusScore, KEScore } from "./types";
 declare type WordPosition = {|
   start: number,
@@ -27,7 +28,7 @@ export type GridDimensions = {|
 declare type QueryParams = {
   [param: string]: string,
 };
-declare type Position = {|
+export type Position = {|
   top: number,
   left: number,
 |};
@@ -155,14 +156,14 @@ declare function tickStepFromExtent(
  *      tickStepFromNumTicks(50, 6) // returns 10
  */
 declare function tickStepFromNumTicks(span: number, numTicks: number): number;
-declare type Range = [number, number];
+
 /**
  * Constrain tick steps intended for desktop size graphs
  * to something more suitable for mobile size graphs.
  * Specifically, we aim for 10 or fewer ticks per graph axis.
  */
 declare function constrainedTickStepsFromTickSteps(
-  tickSteps: Coordinates,
+  tickSteps: [number, number],
   ranges: [Range, Range]
 ): Coordinates;
 

package/dist/widgets/grapher.d.ts

@@ -30,7 +30,7 @@ declare class Grapher extends React.Component<Props> {
         box: NonNullable<Props["graph"]["box"]>;
         gridStep: NonNullable<Props["graph"]["gridStep"]>;
     }): ReadonlyArray<GridDimensions>;
-    _calculateMobileTickStep(gridStep: JSX.LibraryManagedAttributes<typeof Graphie, React.ComponentProps<typeof Graphie>>["gridStep"], step: JSX.LibraryManagedAttributes<typeof Graphie, React.ComponentProps<typeof Graphie>>["step"], ranges: JSX.LibraryManagedAttributes<typeof Graphie, React.ComponentProps<typeof Graphie>>["ranges"]): any;
+    _calculateMobileTickStep(gridStep: JSX.LibraryManagedAttributes<typeof Graphie, Required<React.ComponentProps<typeof Graphie>>>["gridStep"], step: JSX.LibraryManagedAttributes<typeof Graphie, Required<React.ComponentProps<typeof Graphie>>>["step"], ranges: JSX.LibraryManagedAttributes<typeof Graphie, Required<React.ComponentProps<typeof Graphie>>>["ranges"]): any;
     _setupGraphie: (arg1: any, arg2: any) => void;
     showHairlines: (arg1: Coord) => void;
     hideHairlines: () => void;

package/dist/widgets/grapher.js.flow

@@ -47,15 +47,24 @@ declare class Grapher extends React.Component<Props> {
   |}): $ReadOnlyArray<GridDimensions>;
   _calculateMobileTickStep(
     gridStep: $PropertyType<
-      React.ElementConfig<typeof Graphie>,
+      JSX.LibraryManagedAttributes<
+        typeof Graphie,
+        Required<React.ElementProps<typeof Graphie>>
+      >,
       "gridStep"
     >,
     step: $PropertyType<
-      React.ElementConfig<typeof Graphie>,
+      JSX.LibraryManagedAttributes<
+        typeof Graphie,
+        Required<React.ElementProps<typeof Graphie>>
+      >,
       "step"
     >,
     ranges: $PropertyType<
-      React.ElementConfig<typeof Graphie>,
+      JSX.LibraryManagedAttributes<
+        typeof Graphie,
+        Required<React.ElementProps<typeof Graphie>>
+      >,
       "ranges"
     >
   ): any;

package/dist/widgets/matcher.d.ts

@@ -1,6 +1,11 @@
 import PropTypes from "prop-types";
 import * as React from "react";
 import type { SortableOption } from "../components/sortable";
+type State = {
+    leftHeight: number;
+    rightHeight: number;
+    texRendererLoaded: boolean;
+};
 declare class Matcher extends React.Component<any, any> {
     static propTypes: {
         apiOptions: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
@@ -48,9 +53,8 @@ declare class Matcher extends React.Component<any, any> {
         }>>;
     };
     static defaultProps: any;
-    state: any;
-    componentDidMount(): void;
-    render(): React.ReactNode;
+    state: State;
+    render(): React.ReactElement;
     changeAndTrack: (arg1: any) => void;
     onMeasureLeft: (arg1: any) => void;
     onMeasureRight: (arg1: any) => void;

package/dist/widgets/matcher.js.flow

@@ -8,6 +8,11 @@ import * as $Flowgen$Import$_2e__2e__2f_types from "../types";
 import PropTypes from "prop-types";
 import * as React from "react";
 import type { SortableOption } from "../components/sortable";
+declare type State = {|
+  leftHeight: number,
+  rightHeight: number,
+  texRendererLoaded: boolean,
+|};
 declare class Matcher extends React.Component<any, any> {
   static propTypes: {|
     apiOptions: PropTypes.Validator<
@@ -65,9 +70,8 @@ declare class Matcher extends React.Component<any, any> {
     >,
   |};
   static defaultProps: any;
-  state: any;
-  componentDidMount(): void;
-  render(): React.Node;
+  state: State;
+  render(): React.Element<any>;
   changeAndTrack: (arg1: any) => void;
   onMeasureLeft: (arg1: any) => void;
   onMeasureRight: (arg1: any) => void;

package/dist/widgets/number-line.d.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 import type { ChangeableProps } from "../mixins/changeable";
 import type { APIOptions } from "../types";
 type Props = ChangeableProps & {
-    range: ReadonlyArray<number>;
+    range: [number, number];
     labelRange: ReadonlyArray<number | null>;
     labelStyle: string;
     labelTicks: boolean;

package/dist/widgets/number-line.js.flow

@@ -11,7 +11,7 @@ import type { APIOptions } from "../types";
 declare type Props = {|
   ...ChangeableProps,
   ...{|
-    range: $ReadOnlyArray<number>,
+    range: [number, number],
     labelRange: $ReadOnlyArray<number | null>,
     labelStyle: string,
     labelTicks: boolean,

package/package.json

@@ -3,7 +3,7 @@
     "description": "Core Perseus API (includes renderers and widgets)",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "5.0.0",
+    "version": "6.1.0",
     "publishConfig": {
         "access": "public"
     },
@@ -23,7 +23,7 @@
     "dependencies": {
         "@khanacademy/kas": "^0.3.1",
         "@khanacademy/kmath": "^0.1.1",
-        "@khanacademy/math-input": "^1.0.0",
+        "@khanacademy/math-input": "^3.0.0",
         "@khanacademy/perseus-linter": "^0.3.1",
         "@khanacademy/pure-markdown": "^0.2.3",
         "@khanacademy/simple-markdown": "^0.9.3",