@khanacademy/perseus 12.3.0 → 13.0.0

package/dist/item-renderer.d.ts

@@ -16,7 +16,9 @@ KeypadProps & {
     item: PerseusItem | any;
     onShowCalculator?: () => unknown;
     onShowChi2Table?: () => unknown;
-    onShowPeriodicTable?: () => unknown;
+    onShowPeriodicTable?: (options?: {
+        showKey: boolean;
+    }) => unknown;
     onShowTTable?: () => unknown;
     onShowZTable?: () => unknown;
     problemNum: number;

package/dist/perseus-types.d.ts

@@ -413,17 +413,19 @@ export type PerseusPassageRefWidgetOptions = {
     referenceNumber: number;
     summaryText: string;
 };
+export declare const plotterPlotTypes: readonly ["bar", "line", "pic", "histogram", "dotplot"];
+export type PlotType = typeof plotterPlotTypes[number];
 export type PerseusPlotterWidgetOptions = {
     labels: ReadonlyArray<string>;
     categories: ReadonlyArray<string>;
-    type: string;
+    type: PlotType;
     maxY: number;
     scaleY: number;
     labelInterval: number | null | undefined;
     snapsPerLine: number;
     starting: ReadonlyArray<number>;
     correct: ReadonlyArray<number>;
-    picUrl: number | null | undefined;
+    picUrl: string | null | undefined;
     picSize: number | null | undefined;
     picBoxHeight: number | null | undefined;
     plotDimensions: ReadonlyArray<number>;

package/dist/widgets/label-image/strings.d.ts

@@ -0,0 +1,3 @@
+export declare const strings: {
+    hideAnswersToggleLabel: string;
+};

package/dist/widgets/plotter.d.ts

@@ -1,25 +1,11 @@
 import * as React from "react";
-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;
+import type { PerseusPlotterWidgetOptions } from "../perseus-types";
+import type { WidgetProps } from "../types";
+type Rubric = PerseusPlotterWidgetOptions;
+type RenderProps = PerseusPlotterWidgetOptions;
+type Props = WidgetProps<RenderProps, Rubric> & {
+    labelInterval: NonNullable<PerseusPlotterWidgetOptions["labelInterval"]>;
+    picSize: NonNullable<PerseusPlotterWidgetOptions["picSize"]>;
 };
 type DefaultProps = {
     type: Props["type"];
@@ -35,7 +21,7 @@ type DefaultProps = {
     labelInterval: Props["labelInterval"];
 };
 type State = {
-    values: Array<number>;
+    values: ReadonlyArray<number>;
     categoryHeights: Record<string, number>;
 };
 export declare class Plotter extends React.Component<Props, State> {

package/package.json

@@ -3,7 +3,7 @@
     "description": "Core Perseus API (includes renderers and widgets)",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "12.3.0",
+    "version": "13.0.0",
     "publishConfig": {
         "access": "public"
     },
@@ -22,13 +22,13 @@
         "test": "bash -c 'yarn --silent --cwd \"../..\" test ${@:0} $($([[ ${@: -1} = -* ]] || [[ ${@: -1} = bash ]]) && echo $PWD)'"
     },
     "dependencies": {
-        "@khanacademy/kas": "^0.3.4",
-        "@khanacademy/kmath": "^0.1.5",
-        "@khanacademy/math-input": "^14.2.1",
-        "@khanacademy/perseus-core": "1.2.0",
-        "@khanacademy/perseus-linter": "^0.3.7",
-        "@khanacademy/pure-markdown": "^0.2.9",
-        "@khanacademy/simple-markdown": "^0.10.3"
+        "@khanacademy/kas": "^0.3.5",
+        "@khanacademy/kmath": "^0.1.6",
+        "@khanacademy/math-input": "^15.0.0",
+        "@khanacademy/perseus-core": "1.3.0",
+        "@khanacademy/perseus-linter": "^0.3.8",
+        "@khanacademy/pure-markdown": "^0.2.10",
+        "@khanacademy/simple-markdown": "^0.10.4"
     },
     "devDependencies": {
         "@khanacademy/wonder-blocks-button": "^4.1.3",
@@ -48,6 +48,7 @@
         "@khanacademy/wonder-blocks-tooltip": "^2.1.2",
         "@khanacademy/wonder-blocks-typography": "^2.1.3",
         "@khanacademy/wonder-stuff-core": "^1.5.1",
+        "@phosphor-icons/core": "^2.0.2",
         "aphrodite": "^1.2.5",
         "classnames": "^1.1.4",
         "create-react-class": "^15.6.3",
@@ -82,6 +83,7 @@
         "@khanacademy/wonder-blocks-tooltip": "^2.1.2",
         "@khanacademy/wonder-blocks-typography": "^2.1.3",
         "@khanacademy/wonder-stuff-core": "^1.5.1",
+        "@phosphor-icons/core": "^2.0.2",
         "aphrodite": "^1.2.5",
         "classnames": "^1.1.4",
         "create-react-class": "^15.6.3",

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

@@ -805,6 +805,47 @@ describe("item renderer", () => {
             expect(onShowTTable).toHaveBeenCalled();
             expect(onShowChi2Table).toHaveBeenCalled();
         });
+
+        it("should call onShowPeriodicTable with showKey option if selected", () => {
+            // Arrange
+            const item = {
+                ...itemWithInput,
+                answerArea: {
+                    zTable: false,
+                    chi2Table: false,
+                    tTable: false,
+                    calculator: false,
+                    periodicTable: true,
+                    periodicTableWithKey: true,
+                },
+            } as const;
+
+            const onShowCalculator = jest.fn();
+            const onShowPeriodicTable = jest.fn();
+            const onShowZTable = jest.fn();
+            const onShowTTable = jest.fn();
+            const onShowChi2Table = jest.fn();
+            const localExtraProps = {
+                ...extraProps,
+                onShowCalculator,
+                onShowPeriodicTable,
+                onShowZTable,
+                onShowTTable,
+                onShowChi2Table,
+            } as const;
+
+            // Act
+            renderQuestion(item, undefined, localExtraProps);
+
+            // Assert
+            expect(onShowCalculator).not.toHaveBeenCalled();
+            expect(onShowZTable).not.toHaveBeenCalled();
+            expect(onShowTTable).not.toHaveBeenCalled();
+            expect(onShowChi2Table).not.toHaveBeenCalled();
+            expect(onShowPeriodicTable).toHaveBeenCalledWith(
+                expect.objectContaining({showKey: true}),
+            );
+        });
     });
 
     describe("controlPeripherals is enabled", () => {

package/src/__tests__/widget-container.test.tsx

@@ -0,0 +1,126 @@
+import "@testing-library/jest-dom"; // Joyous side-effects
+import {render, screen} from "@testing-library/react";
+import * as React from "react";
+
+import {testDependencies} from "../../../../testing/test-dependencies";
+import * as Dependencies from "../dependencies";
+import WidgetContainer from "../widget-container";
+import {registerWidget} from "../widgets";
+import PassageWidget from "../widgets/passage";
+
+import type {WidgetExports} from "../types";
+
+const MockWidgetComponent = ({
+    text,
+    fail = false,
+}: {
+    text: string;
+    fail: boolean;
+}) => {
+    if (fail) {
+        throw new Error("MockWidget failed to render");
+    }
+
+    return <div>{text}</div>;
+};
+
+const MockWidget: WidgetExports<typeof MockWidgetComponent> = {
+    name: "mock-widget",
+    displayName: "Mock Widget",
+    widget: MockWidgetComponent,
+};
+
+describe("widget-container", () => {
+    it("should render nothing when requested widget not registered", () => {
+        // Arrange
+        const warnMock = jest.spyOn(console, "warn").mockImplementation();
+
+        // Act
+        render(
+            <WidgetContainer
+                type="invalid-widget"
+                id="invalid-widget 1"
+                shouldHighlight={false}
+                initialProps={{apiOptions: {isMobile: false}}}
+            />,
+        );
+
+        // Assert
+        expect(warnMock).toHaveBeenCalledWith(
+            "Widget type 'invalid-widget' not found!",
+        );
+    });
+
+    it("should render the requested widget", async () => {
+        // Arrange
+        jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
+            testDependencies,
+        );
+
+        registerWidget("passage", PassageWidget);
+
+        // Act
+        render(
+            <WidgetContainer
+                type="passage"
+                id="passage 1"
+                shouldHighlight={false}
+                initialProps={{
+                    passageTitle: "Greeting",
+                    passageText: "Hello world!",
+                    footnotes: null,
+                    showLineNumbers: true,
+
+                    findWidgets: () => [],
+
+                    apiOptions: {isMobile: false},
+                }}
+            />,
+        );
+
+        // Assert
+        expect(await screen.findByText("Greeting")).toBeInTheDocument();
+        expect(await screen.findByText("Hello world")).toBeInTheDocument();
+    });
+
+    it("should send analytics even when widget rendering errors", () => {
+        // Arrange
+        jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
+            testDependencies,
+        );
+        jest.spyOn(console, "error").mockImplementation(() => {});
+
+        const onAnalyticsEventSpy = jest.fn();
+        const depsV2 = {analytics: {onAnalyticsEvent: onAnalyticsEventSpy}};
+
+        registerWidget("mock-widget", MockWidget);
+
+        // Act
+        render(
+            <Dependencies.DependenciesContext.Provider value={depsV2}>
+                <WidgetContainer
+                    type="mock-widget"
+                    id="mock-widget 1"
+                    shouldHighlight={false}
+                    initialProps={{
+                        text: "Hello world!",
+                        fail: true,
+
+                        findWidgets: () => [],
+
+                        apiOptions: {isMobile: false},
+                    }}
+                />
+            </Dependencies.DependenciesContext.Provider>,
+        );
+
+        // Assert
+        expect(onAnalyticsEventSpy).toHaveBeenCalledWith({
+            type: "perseus:widget-rendering-error",
+            payload: {
+                widgetType: "mock-widget",
+                widgetId: "mock-widget 1",
+            },
+        });
+    });
+});

package/src/error-boundary.tsx

@@ -21,6 +21,7 @@ class ErrorBoundary extends React.Component<Props, State> {
 
     componentDidCatch(error: Error, info: any) {
         this.setState({error: error.toString()});
+        this.props.onError?.(error, info);
         Log.error("Perseus error boundary caught error", Errors.Internal, {
             cause: error,
             loggedMetadata: {

package/src/index.ts

@@ -62,7 +62,10 @@ export {default as KhanMath} from "./util/math";
 export {default as LoadingContext} from "./loading-context";
 export {default as mediaQueries} from "./styles/media-queries";
 export {default as PerseusMarkdown} from "./perseus-markdown";
-export {PerseusExpressionAnswerFormConsidered} from "./perseus-types";
+export {
+    PerseusExpressionAnswerFormConsidered,
+    plotterPlotTypes,
+} from "./perseus-types";
 export {traverse} from "./traversal";
 export {isItemRenderableByVersion} from "./renderability";
 export {violatingWidgets} from "./a11y";
@@ -123,6 +126,7 @@ export type {
     PerseusInteractiveGraphWidgetOptions,
     PerseusRadioWidgetOptions,
     PerseusExpressionWidgetOptions,
+    PerseusPlotterWidgetOptions,
     PerseusRenderer,
 } from "./perseus-types";
 export type {Coord} from "./interactive2/types";

package/src/item-renderer.tsx

@@ -39,7 +39,7 @@ type Props = // These props are used by the ProvideKeypad mixin.
         item: PerseusItem | any /* any for _multi items */;
         onShowCalculator?: () => unknown;
         onShowChi2Table?: () => unknown;
-        onShowPeriodicTable?: () => unknown;
+        onShowPeriodicTable?: (options?: {showKey: boolean}) => unknown;
         onShowTTable?: () => unknown;
         onShowZTable?: () => unknown;
         problemNum: number;
@@ -254,7 +254,9 @@ class ItemRenderer extends React.Component<Props, State> {
             }
             if (answerArea.periodicTable) {
                 this.props.onShowPeriodicTable &&
-                    this.props.onShowPeriodicTable();
+                    this.props.onShowPeriodicTable({
+                        showKey: answerArea.periodicTableWithKey,
+                    });
             }
             if (answerArea.zTable) {
                 this.props.onShowZTable && this.props.onShowZTable();

package/src/perseus-types.ts

@@ -848,13 +848,22 @@ export type PerseusPassageRefWidgetOptions = {
     summaryText: string;
 };
 
+export const plotterPlotTypes = [
+    "bar",
+    "line",
+    "pic",
+    "histogram",
+    "dotplot",
+] as const;
+export type PlotType = typeof plotterPlotTypes[number];
+
 export type PerseusPlotterWidgetOptions = {
     // Translatable Text; The Axis labels. e.g. ["X Label", "Y Label"]
     labels: ReadonlyArray<string>;
     // Translatable Text; Categories to display along the X access.  e.g. [">0", ">6", ">12", ">18"]
     categories: ReadonlyArray<string>;
     // The type of the graph. options "bar", "line", "pic", "histogram", "dotplot"
-    type: string;
+    type: PlotType;
     // The maximimum Y tick to display in the graph
     maxY: number;
     // The scale of the Y Axis
@@ -868,7 +877,7 @@ export type PerseusPlotterWidgetOptions = {
     // The Y values that represent the correct answer expected
     correct: ReadonlyArray<number>;
     // A picture to represent items in a graph.
-    picUrl: number | null | undefined;
+    picUrl: string | null | undefined;
     // deprecated
     picSize: number | null | undefined;
     // deprecated

package/src/styles/articles.less

@@ -498,7 +498,9 @@
         margin-bottom: 2 * @baseUnit;
     }
 
-    .perseus-renderer > .paragraph ul:not(.perseus-widget-radio) {
+    .perseus-renderer
+        > .paragraph
+        ul:not(.perseus-widget-radio, .indicatorContainer) {
         margin: 0 0 0 1em;
         padding: 0;
 

package/src/styles/perseus-renderer.less

@@ -133,7 +133,7 @@
         margin: -11px 0px 22px 0px; // first-level lists need padding
     }
 
-    .paragraph ul:not(.perseus-widget-radio) {
+    .paragraph ul:not(.perseus-widget-radio, .indicatorContainer) {
         padding-left: 35px;
         list-style-type: disc;
     }

package/src/widget-container.tsx

@@ -144,11 +144,12 @@ class WidgetContainer extends React.Component<Props, State> {
                                 widget_type: type,
                                 widget_id: this.props.id,
                             }}
-                            onError={(error) => {
+                            onError={() => {
                                 analytics.onAnalyticsEvent({
                                     type: "perseus:widget-rendering-error",
                                     payload: {
                                         widgetType: type,
+                                        widgetId: this.props.id,
                                     },
                                 });
                             }}

package/src/widgets/__tests__/__snapshots__/graded-group-set.test.ts.snap

@@ -38,32 +38,63 @@ exports[`graded group widget should snapshot 1`] = `
                 class="spacer_bc4egv"
               />
               <ul
-                class="indicatorContainer_rjg7c2"
+                class="indicatorContainer_2pd7o4 indicatorContainer"
               >
                 <li
-                  aria-label="Skip to Problem 1a"
-                  class="indicator_qk5jgn-o_O-selectedIndicator_14jsc6v"
-                  role="button"
-                  tabindex="0"
+                  class="indicator_7k5kza"
                 >
-                  <span
-                    class="srOnly_19bpjuy"
+                  <button
+                    aria-disabled="false"
+                    aria-label="Skip to Problem 1a"
+                    class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-indicatorButton_8uaklu"
+                    role="button"
+                    type="button"
                   >
-                    Current
-                  </span>
+                    <div
+                      class="default_xu2jcg-o_O-indicatorDot_yy8ygm"
+                    >
+                      <div
+                        class="default_xu2jcg-o_O-indicatorDotActive_1pky1a"
+                      >
+                        <span
+                          class="srOnly_19bpjuy"
+                        >
+                          Current
+                        </span>
+                      </div>
+                    </div>
+                  </button>
                 </li>
                 <li
-                  aria-label="Skip to Problem 1b"
-                  class="indicator_qk5jgn"
-                  role="button"
-                  tabindex="0"
-                />
+                  class="indicator_7k5kza"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-label="Skip to Problem 1b"
+                    class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-indicatorButton_8uaklu"
+                    role="button"
+                    type="button"
+                  >
+                    <div
+                      class="default_xu2jcg-o_O-indicatorDot_yy8ygm"
+                    />
+                  </button>
+                </li>
                 <li
-                  aria-label="Skip to Problem 1c"
-                  class="indicator_qk5jgn"
-                  role="button"
-                  tabindex="0"
-                />
+                  class="indicator_7k5kza"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-label="Skip to Problem 1c"
+                    class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-indicatorButton_8uaklu"
+                    role="button"
+                    type="button"
+                  >
+                    <div
+                      class="default_xu2jcg-o_O-indicatorDot_yy8ygm"
+                    />
+                  </button>
+                </li>
               </ul>
             </div>
             <div

package/src/widgets/__tests__/plotter.test.tsx

@@ -4,13 +4,12 @@ import React from "react";
 
 import {testDependencies} from "../../../../../testing/test-dependencies";
 import {setDependencies} from "../../dependencies";
+import {ApiOptions} from "../../perseus-api";
 import {question1} from "../__testdata__/plotter.testdata";
 import {Plotter} from "../plotter";
 
 import {renderQuestion} from "./renderQuestion";
 
-import type {APIOptions} from "../../types";
-
 describe("plotter widget", () => {
     beforeEach(() => {
         setDependencies(testDependencies);
@@ -26,15 +25,17 @@ describe("plotter widget", () => {
 
     it("should show drag text when not static", () => {
         // Arrange and Act
-        const apiOptions: APIOptions = {isMobile: true};
         render(
+            // @ts-expect-error - TS2769 - test works, but I can't figure out how to make the types happy
             <Plotter
                 static={false}
                 trackInteraction={() => {}}
                 onChange={() => {}}
-                apiOptions={apiOptions}
+                apiOptions={{
+                    ...ApiOptions.defaults,
+                    isMobile: true,
+                }}
                 starting={[0]}
-                markings={""}
             />,
         );
 
@@ -46,15 +47,17 @@ describe("plotter widget", () => {
 
     it("should not show drag text when static", () => {
         // Arrange and Act
-        const apiOptions: APIOptions = {isMobile: true};
         render(
+            // @ts-expect-error - TS2769 - test works, but I can't figure out how to make the types happy
             <Plotter
                 static={true}
                 trackInteraction={() => {}}
                 onChange={() => {}}
-                apiOptions={apiOptions}
+                apiOptions={{
+                    ...ApiOptions.defaults,
+                    isMobile: true,
+                }}
                 starting={[0]}
-                markings={""}
             />,
         );