@khanacademy/perseus 7.1.1 → 7.2.1

package/dist/util.d.ts

@@ -1,3 +1,4 @@
+import * as GraphieUtil from "./util.graphie";
 import type { Range } from "./perseus-types";
 import type { Widget, PerseusScore } from "./types";
 import type { KEScore } from "@khanacademy/perseus-core";
@@ -171,13 +172,7 @@ declare function extractPointerLocation(event: any): Position | null | undefined
  * avoid sending the touch to the mobile scratchpad
  */
 declare function captureScratchpadTouchStart(e: TouchEvent): void;
-declare function getImageSizeModern(url: string): Promise<[number, number]>;
 declare function getImageSize(url: string, callback: (width: number, height: number) => void): void;
-declare function getRealImageUrl(url: string): string;
-declare function isLabeledSVG(url: string): boolean;
-declare function getBaseUrl(url: string): string;
-declare function getSvgUrl(url: string): string;
-declare function getDataUrl(url: string): string;
 /**
  * Gets the word right before where the textarea cursor is
  *
@@ -234,12 +229,12 @@ declare const Util: {
     readonly supportsPassiveEvents: () => boolean;
     readonly captureScratchpadTouchStart: typeof captureScratchpadTouchStart;
     readonly getImageSize: typeof getImageSize;
-    readonly getImageSizeModern: typeof getImageSizeModern;
-    readonly getRealImageUrl: typeof getRealImageUrl;
-    readonly isLabeledSVG: typeof isLabeledSVG;
-    readonly getBaseUrl: typeof getBaseUrl;
-    readonly getSvgUrl: typeof getSvgUrl;
-    readonly getDataUrl: typeof getDataUrl;
+    readonly getImageSizeModern: typeof GraphieUtil.getImageSizeModern;
+    readonly getRealImageUrl: typeof GraphieUtil.getRealImageUrl;
+    readonly isLabeledSVG: typeof GraphieUtil.isLabeledSVG;
+    readonly getBaseUrl: typeof GraphieUtil.getBaseUrl;
+    readonly getSvgUrl: typeof GraphieUtil.getSvgUrl;
+    readonly getDataUrl: typeof GraphieUtil.getDataUrl;
     readonly textarea: {
         readonly getWordBeforeCursor: typeof getWordBeforeCursor;
         readonly moveCursor: typeof moveCursor;

package/dist/util.graphie.d.ts

@@ -0,0 +1,6 @@
+export declare function getRealImageUrl(graphieUrl: string): string;
+export declare function isLabeledSVG(graphieUrl: string): boolean;
+export declare function getBaseUrl(graphieUrl: string): string;
+export declare function getSvgUrl(graphieUrl: string): string;
+export declare function getDataUrl(graphieUrl: string): string;
+export declare function getImageSizeModern(url: string): Promise<[number, number]>;

package/dist/util.graphie.js.flow

@@ -0,0 +1,14 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+declare export function getRealImageUrl(graphieUrl: string): string;
+declare export function isLabeledSVG(graphieUrl: string): boolean;
+declare export function getBaseUrl(graphieUrl: string): string;
+declare export function getSvgUrl(graphieUrl: string): string;
+declare export function getDataUrl(graphieUrl: string): string;
+declare export function getImageSizeModern(
+  url: string
+): Promise<[number, number]>;

package/dist/util.js.flow

@@ -4,6 +4,7 @@
  * Flowgen v1.21.0
  * @flow
  */
+import * as GraphieUtil from "./util.graphie";
 import type { Range } from "./perseus-types";
 import type { Widget, PerseusScore } from "./types";
 import type { KEScore } from "@khanacademy/perseus-core";
@@ -236,16 +237,10 @@ declare function extractPointerLocation(event: any): Position | null | void;
  * avoid sending the touch to the mobile scratchpad
  */
 declare function captureScratchpadTouchStart(e: TouchEvent): void;
-declare function getImageSizeModern(url: string): Promise<[number, number]>;
 declare function getImageSize(
   url: string,
   callback: (width: number, height: number) => void
 ): void;
-declare function getRealImageUrl(url: string): string;
-declare function isLabeledSVG(url: string): boolean;
-declare function getBaseUrl(url: string): string;
-declare function getSvgUrl(url: string): string;
-declare function getDataUrl(url: string): string;
 
 /**
  * Gets the word right before where the textarea cursor is
@@ -308,12 +303,12 @@ declare var Util: {|
   +supportsPassiveEvents: () => boolean,
   +captureScratchpadTouchStart: typeof captureScratchpadTouchStart,
   +getImageSize: typeof getImageSize,
-  +getImageSizeModern: typeof getImageSizeModern,
-  +getRealImageUrl: typeof getRealImageUrl,
-  +isLabeledSVG: typeof isLabeledSVG,
-  +getBaseUrl: typeof getBaseUrl,
-  +getSvgUrl: typeof getSvgUrl,
-  +getDataUrl: typeof getDataUrl,
+  +getImageSizeModern: typeof GraphieUtil.getImageSizeModern,
+  +getRealImageUrl: typeof GraphieUtil.getRealImageUrl,
+  +isLabeledSVG: typeof GraphieUtil.isLabeledSVG,
+  +getBaseUrl: typeof GraphieUtil.getBaseUrl,
+  +getSvgUrl: typeof GraphieUtil.getSvgUrl,
+  +getDataUrl: typeof GraphieUtil.getDataUrl,
   +textarea: {|
     +getWordBeforeCursor: typeof getWordBeforeCursor,
     +moveCursor: typeof moveCursor,

package/dist/widgets/plotter.d.ts

@@ -1,25 +1,58 @@
-import PropTypes from "prop-types";
 import * as React from "react";
-declare class Plotter extends React.Component<any, any> {
+import type { APIOptions } from "../types";
+declare const plotTypes: string[];
+type PlotType = typeof plotTypes[number];
+type Props = {
+    type: PlotType;
+    labels: ReadonlyArray<string>;
+    categories: ReadonlyArray<string | number>;
+    scaleY: number;
+    maxY: number;
+    snapsPerLine: number;
+    picSize: number;
+    picBoxHeight: number;
+    picUrl: string;
+    plotDimensions: ReadonlyArray<number>;
+    labelInterval: number;
+    starting: Array<number>;
+    static: boolean;
+    markings: any;
+    onChange: any;
+    trackInteraction: () => void;
+    apiOptions: APIOptions;
+};
+type DefaultProps = {
+    type: Props["type"];
+    labels: Props["labels"];
+    categories: Props["categories"];
+    scaleY: Props["scaleY"];
+    maxY: Props["maxY"];
+    snapsPerLine: Props["snapsPerLine"];
+    picSize: Props["picSize"];
+    picBoxHeight: Props["picBoxHeight"];
+    picUrl: Props["picUrl"];
+    plotDimensions: Props["plotDimensions"];
+    labelInterval: Props["labelInterval"];
+};
+type State = {
+    values: Array<number>;
+    categoryHeights: Record<string, number>;
+};
+export declare class Plotter extends React.Component<Props, State> {
     shouldSetupGraphie: boolean;
     _isMounted: boolean;
     horizHairline: any;
     hairlineRange: any;
     graphie: any;
-    static propTypes: {
-        onChange: PropTypes.Validator<(...args: any[]) => any>;
-        trackInteraction: PropTypes.Validator<(...args: any[]) => any>;
-    };
-    static defaultProps: any;
-    state: any;
+    static defaultProps: DefaultProps;
+    state: State;
+    componentDidMount(): void;
+    UNSAFE_componentWillReceiveProps(nextProps: Props): void;
+    componentDidUpdate(prevProps: Props, prevState: State): void;
+    componentWillUnmount(): void;
     DOT_PLOT_POINT_SIZE: () => number;
     DOT_PLOT_POINT_PADDING: () => number;
     DOT_TICK_POINT_SIZE: () => number;
-    render(): React.ReactNode;
-    componentDidUpdate(prevProps: any, prevState: any): void;
-    componentDidMount(): void;
-    UNSAFE_componentWillReceiveProps(nextProps: any): void;
-    componentWillUnmount(): void;
     setupGraphie: (arg1: any) => void;
     showHairlines: (arg1: any) => void;
     hideHairlines: () => void;
@@ -44,6 +77,7 @@ declare class Plotter extends React.Component<any, any> {
     drawPicHeights: (arg1: any, arg2: any) => void;
     getUserInput: () => any;
     simpleValidate: (arg1: any) => any;
+    render(): React.ReactNode;
 }
 declare const _default: Readonly<{
     name: string;

package/dist/widgets/plotter.js.flow

@@ -5,28 +5,61 @@
  * @flow
  */
 import * as $Flowgen$Import$_2e__2e__2f_types from "../types";
-import PropTypes from "prop-types";
 import * as React from "react";
-declare class Plotter extends React.Component<any, any> {
+import type { APIOptions } from "../types";
+declare var plotTypes: string[];
+declare type PlotType = $ElementType<typeof plotTypes, number>;
+declare type Props = {|
+  type: PlotType,
+  labels: $ReadOnlyArray<string>,
+  categories: $ReadOnlyArray<string | number>,
+  scaleY: number,
+  maxY: number,
+  snapsPerLine: number,
+  picSize: number,
+  picBoxHeight: number,
+  picUrl: string,
+  plotDimensions: $ReadOnlyArray<number>,
+  labelInterval: number,
+  starting: Array<number>,
+  static: boolean,
+  markings: any,
+  onChange: any,
+  trackInteraction: () => void,
+  apiOptions: APIOptions,
+|};
+declare type DefaultProps = {|
+  type: $PropertyType<Props, "type">,
+  labels: $PropertyType<Props, "labels">,
+  categories: $PropertyType<Props, "categories">,
+  scaleY: $PropertyType<Props, "scaleY">,
+  maxY: $PropertyType<Props, "maxY">,
+  snapsPerLine: $PropertyType<Props, "snapsPerLine">,
+  picSize: $PropertyType<Props, "picSize">,
+  picBoxHeight: $PropertyType<Props, "picBoxHeight">,
+  picUrl: $PropertyType<Props, "picUrl">,
+  plotDimensions: $PropertyType<Props, "plotDimensions">,
+  labelInterval: $PropertyType<Props, "labelInterval">,
+|};
+declare type State = {|
+  values: Array<number>,
+  categoryHeights: { [key: string]: number },
+|};
+declare export class Plotter extends React.Component<Props, State> {
   shouldSetupGraphie: boolean;
   _isMounted: boolean;
   horizHairline: any;
   hairlineRange: any;
   graphie: any;
-  static propTypes: {|
-    onChange: PropTypes.Validator<(...args: any[]) => any>,
-    trackInteraction: PropTypes.Validator<(...args: any[]) => any>,
-  |};
-  static defaultProps: any;
-  state: any;
+  static defaultProps: DefaultProps;
+  state: State;
+  componentDidMount(): void;
+  UNSAFE_componentWillReceiveProps(nextProps: Props): void;
+  componentDidUpdate(prevProps: Props, prevState: State): void;
+  componentWillUnmount(): void;
   DOT_PLOT_POINT_SIZE: () => number;
   DOT_PLOT_POINT_PADDING: () => number;
   DOT_TICK_POINT_SIZE: () => number;
-  render(): React.Node;
-  componentDidUpdate(prevProps: any, prevState: any): void;
-  componentDidMount(): void;
-  UNSAFE_componentWillReceiveProps(nextProps: any): void;
-  componentWillUnmount(): void;
   setupGraphie: (arg1: any) => void;
   showHairlines: (arg1: any) => void;
   hideHairlines: () => void;
@@ -52,6 +85,7 @@ declare class Plotter extends React.Component<any, any> {
   drawPicHeights: (arg1: any, arg2: any) => void;
   getUserInput: () => any;
   simpleValidate: (arg1: any) => any;
+  render(): React.Node;
 }
 declare var _default: $ReadOnly<{|
   name: string,

package/package.json

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

package/src/__tests__/item-renderer.test.tsx

@@ -309,7 +309,7 @@ describe("item renderer", () => {
             renderer.focus();
 
             // Assert
-            expect(screen.getByLabelText("Up arrow")).toBeVisible();
+            expect(screen.getByLabelText("7")).toBeVisible();
         });
 
         it("should provide current and previous focus paths on focus change to, and away from, a single widget", () => {

package/src/components/__stories__/image-loader.stories.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @khanacademy/ts-no-error-suppressions */
 import * as React from "react";
 
 type StoryArgs = Record<any, any>;

package/src/components/graph.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @khanacademy/ts-no-error-suppressions */
 /* eslint-disable react/no-unsafe */
 import $ from "jquery";
 import * as React from "react";

package/src/components/icon.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @khanacademy/ts-no-error-suppressions */
 /**
  * SVG Icon React Component
  *

package/src/components/image-loader.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @khanacademy/ts-no-error-suppressions */
 /* eslint-disable jsx-a11y/alt-text, react/no-unsafe */
 // TODO(scottgrant): Enable the alt-text eslint rule above.
 /**

package/src/components/number-input.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @khanacademy/ts-no-error-suppressions */
 /* eslint-disable react/sort-comp */
 import {number as knumber} from "@khanacademy/kmath";
 import classNames from "classnames";

package/src/components/sortable.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @khanacademy/ts-no-error-suppressions */
 /* eslint-disable @babel/no-invalid-this, react/no-unsafe, react/sort-comp */
 import * as PerseusLinter from "@khanacademy/perseus-linter";
 import {CircularSpinner} from "@khanacademy/wonder-blocks-progress-spinner";

package/src/components/svg-image.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @khanacademy/ts-no-error-suppressions */
 /* eslint-disable no-useless-escape, react/no-unsafe */
 import {CircularSpinner} from "@khanacademy/wonder-blocks-progress-spinner";
 import classNames from "classnames";

package/src/components/tex-buttons.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @khanacademy/ts-no-error-suppressions */
 import {Keys} from "@khanacademy/math-input";
 import * as i18n from "@khanacademy/wonder-blocks-i18n";
 import PropTypes from "prop-types";

package/src/components/text-input.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @khanacademy/ts-no-error-suppressions */
 /* eslint-disable react/sort-comp */
 import {TextField} from "@khanacademy/wonder-blocks-form";
 import * as React from "react";

package/src/components/text-list-editor.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @khanacademy/ts-no-error-suppressions */
 /* eslint-disable @babel/no-invalid-this, react/forbid-prop-types, react/no-unsafe, react/sort-comp */
 import $ from "jquery";
 import PropTypes from "prop-types";

package/src/components/zoomable.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @khanacademy/ts-no-error-suppressions */
 /**
  * Zooms child to fit with tap-to-zoom behavior.
  */

package/src/hints-renderer.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @khanacademy/ts-no-error-suppressions */
 import * as PerseusLinter from "@khanacademy/perseus-linter";
 import * as i18n from "@khanacademy/wonder-blocks-i18n";
 import {StyleSheet, css} from "aphrodite";

package/src/index.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @khanacademy/ts-no-error-suppressions */
 /**
  * Main entry point
  */

package/src/item-renderer.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @khanacademy/ts-no-error-suppressions */
 /* eslint-disable react/no-unsafe */
 import * as PerseusLinter from "@khanacademy/perseus-linter";
 import $ from "jquery";

package/src/mixins/provide-keypad.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @khanacademy/ts-no-error-suppressions */
 /**
  * A mixin that renders a custom software keypad in additional to the base
  * component. The base component will receive blur events when the keypad is

package/src/multi-items/multi-renderer.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @khanacademy/ts-no-error-suppressions */
 /* eslint-disable react/no-unsafe */
 // TODO(mdr): There are some TypeScript errors in this file, and they're tricky, so
 //     I'm skipping TypeScript errors for now.

package/src/renderer.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @khanacademy/ts-no-error-suppressions */
 /* eslint-disable react/no-unsafe */
 import * as PerseusLinter from "@khanacademy/perseus-linter";
 import classNames from "classnames";

package/src/server-item-renderer.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @khanacademy/ts-no-error-suppressions */
 import {StyleSheet, css} from "aphrodite";
 /**
  * A copy of the ItemRenderer which renders its question renderer and hints

package/src/styles/articles.less

@@ -58,7 +58,8 @@
         // inline, so we rely on the "actual paragraph" check above
         // (a .paragraph that contains another .paragraph instead of a
         // .perseus-block-math).
-        .katex, mjx-container {
+        .katex,
+        mjx-container {
             font-size: 100%;
         }
 
@@ -243,7 +244,8 @@
             .paragraph {
                 .text(@choiceTextSize, @choiceLineHeight, @gray17);
 
-                .katex, mjx-container {
+                .katex,
+                mjx-container {
                     color: @gray17;
                 }
             }
@@ -391,7 +393,8 @@
             .paragraph {
                 .text(@choiceTextSize, @choiceLineHeight, @gray17);
 
-                .katex, mjx-container {
+                .katex,
+                mjx-container {
                     color: @gray17;
                 }
             }
@@ -418,7 +421,8 @@
 
     .math(@blockMathTextSize; @blockMathLineHeight;
           @inlineMathTextSize; @inlineMathLineHeight) {
-        .katex, mjx-container {
+        .katex,
+        mjx-container {
             font-size: @inlineMathTextSize;
             line-height: @inlineMathLineHeight;
             color: @gray17;