@khanacademy/perseus 11.5.1 → 11.6.1

package/dist/item-renderer.d.ts

@@ -47,6 +47,9 @@ type SerializedState = {
         [id: string]: any;
     };
 };
+/**
+ * @depreciated use ServerItemRenderer
+ */
 declare class ItemRenderer extends React.Component<Props, State> {
     questionRenderer: Renderer;
     hintsRenderer: React.ElementRef<typeof HintsRenderer> | null | undefined;

package/dist/perseus-version.d.ts

@@ -0,0 +1,8 @@
+export declare const apiVersion: {
+    major: number;
+    minor: number;
+};
+export declare const itemDataVersion: {
+    major: number;
+    minor: number;
+};

package/dist/version.d.ts

@@ -1,11 +1 @@
-declare const _default: {
-    apiVersion: {
-        major: number;
-        minor: number;
-    };
-    itemDataVersion: {
-        major: number;
-        minor: number;
-    };
-};
-export default _default;
+export declare const libVersion = "__lib_version__";

package/dist/widgets/numeric-input.d.ts

@@ -36,7 +36,7 @@ export declare class NumericInput extends React.Component<Props, State> {
     static defaultProps: DefaultProps;
     static getUserInputFromProps(props: Props): UserInput;
     static getOneCorrectAnswerFromRubric(rubric: Rubric): string | null | undefined;
-    static validate(useInput: UserInput, rubric: Rubric): PerseusScore;
+    static validate(userInput: UserInput, rubric: Rubric): PerseusScore;
     state: State;
     examples: () => ReadonlyArray<string>;
     shouldShowExamples: () => boolean;

package/package.json

@@ -3,7 +3,7 @@
     "description": "Core Perseus API (includes renderers and widgets)",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "11.5.1",
+    "version": "11.6.1",
     "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.1",
-        "@khanacademy/kmath": "^0.1.2",
-        "@khanacademy/math-input": "^13.1.0",
-        "@khanacademy/perseus-core": "1.1.0",
-        "@khanacademy/perseus-linter": "^0.3.4",
-        "@khanacademy/pure-markdown": "^0.2.6",
-        "@khanacademy/simple-markdown": "^0.10.0"
+        "@khanacademy/kas": "^0.3.2",
+        "@khanacademy/kmath": "^0.1.3",
+        "@khanacademy/math-input": "^14.0.1",
+        "@khanacademy/perseus-core": "1.1.1",
+        "@khanacademy/perseus-linter": "^0.3.5",
+        "@khanacademy/pure-markdown": "^0.2.7",
+        "@khanacademy/simple-markdown": "^0.10.1"
     },
     "devDependencies": {
         "@khanacademy/wonder-blocks-button": "^4.1.3",
@@ -58,7 +58,7 @@
         "katex": "^0.11.1",
         "lodash.debounce": "^4.0.8",
         "mathquill": "git+https://git@github.com/Khan/mathquill.git#32d9f351aaa68537170b3120a52e99b8def3a2c3",
-        "perseus-build-settings": "^0.2.0",
+        "perseus-build-settings": "^0.2.1",
         "prop-types": "^15.6.1",
         "react": "16.14.0",
         "react-dom": "16.14.0",

package/src/__tests__/__snapshots__/server-item-renderer.test.tsx.snap

@@ -189,7 +189,7 @@ exports[`server item renderer should snapshot: initial render 1`] = `
         class=""
       >
         <div
-          class="perseus-hint-renderer"
+          class="hint perseus-hint-renderer"
           tabindex="-1"
         >
           <span
@@ -219,7 +219,7 @@ exports[`server item renderer should snapshot: initial render 1`] = `
           </div>
         </div>
         <div
-          class="perseus-hint-renderer"
+          class="hint perseus-hint-renderer"
           tabindex="-1"
         >
           <span
@@ -249,7 +249,7 @@ exports[`server item renderer should snapshot: initial render 1`] = `
           </div>
         </div>
         <div
-          class="perseus-hint-renderer last-hint last-rendered"
+          class="hint perseus-hint-renderer last-hint last-rendered"
           tabindex="-1"
         >
           <span

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

@@ -1,5 +1,6 @@
+import {StatefulKeypadContextProvider} from "@khanacademy/math-input";
 import {RenderStateRoot} from "@khanacademy/wonder-blocks-core";
-import {fireEvent, render, screen} from "@testing-library/react";
+import {fireEvent, render, screen, waitFor} from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import * as React from "react";
 import "@testing-library/jest-dom"; // Imports custom matchers
@@ -71,23 +72,25 @@ export const renderQuestion = (
     let renderer: ItemRenderer | null = null;
     const {container} = render(
         <RenderStateRoot>
-            <ItemRenderer
-                ref={(node) => (renderer = node)}
-                apiOptions={apiOptions}
-                item={question}
-                problemNum={0}
-                reviewMode={false}
-                savedState=""
-                controlPeripherals={false}
-                dependencies={testDependenciesV2}
-                {...optionalProps}
-            />
-            {/* The ItemRenderer _requires_ two divs: a work area and hints
+            <StatefulKeypadContextProvider>
+                <ItemRenderer
+                    ref={(node) => (renderer = node)}
+                    apiOptions={apiOptions}
+                    item={question}
+                    problemNum={0}
+                    reviewMode={false}
+                    savedState=""
+                    controlPeripherals={false}
+                    dependencies={testDependenciesV2}
+                    {...optionalProps}
+                />
+                {/* The ItemRenderer _requires_ two divs: a work area and hints
                 area. Without both of these, it fails to render anything! */}
-            <div id="workarea" />
-            <div id="hintsarea" />
+                <div id="workarea" />
+                <div id="hintsarea" />
 
-            <Peripherals />
+                <Peripherals />
+            </StatefulKeypadContextProvider>
         </RenderStateRoot>,
     );
     if (!renderer) {
@@ -309,18 +312,21 @@ describe("item renderer", () => {
             );
         });
 
-        it("should activate the keypad when widget with input is focused", () => {
+        it("should activate the keypad when widget with input is focused", async () => {
             // Arrange
             const {renderer} = renderQuestion(itemWithInput, {
                 isMobile: true,
                 customKeypad: true,
+                useV2Keypad: true,
             });
 
             // Act
             renderer.focus();
 
             // Assert
-            expect(screen.getByLabelText("7")).toBeVisible();
+            await waitFor(() => {
+                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__/graphie.stories.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import {ItemRendererWithDebugUI} from "../../../../../testing/item-renderer-with-debug-ui";
+import {ServerItemRendererWithDebugUI} from "../../../../../testing/server-item-renderer-with-debug-ui";
 import {itemWithPieChart} from "../../__testdata__/graphie.testdata";
 import Graphie from "../graphie";
 
@@ -29,5 +29,5 @@ export const SquareBoxSizeAndOtherwiseEmpty = (
 };
 
 export const PieChartGraphieLabels = (args: StoryArgs): React.ReactElement => {
-    return <ItemRendererWithDebugUI item={itemWithPieChart} />;
+    return <ServerItemRendererWithDebugUI item={itemWithPieChart} />;
 };

package/src/hint-renderer.tsx

@@ -62,6 +62,7 @@ class HintRenderer extends React.Component<Props> {
         const {isMobile} = apiOptions;
 
         const classNames = classnames(
+            "hint",
             !isMobile && "perseus-hint-renderer",
             isMobile && css(styles.newHint),
             isMobile && lastRendered && css(styles.lastRenderedNewHint),

package/src/index.ts

@@ -1,16 +1,13 @@
-/* eslint-disable @khanacademy/ts-no-error-suppressions */
 /**
  * Main entry point
  */
 
-import version from "./version";
-
 export {default as init} from "./init";
 
 export {ApiOptions, ClassNames} from "./perseus-api";
 
-export const apiVersion = version.apiVersion;
-export const itemDataVersion = version.itemDataVersion;
+export {libVersion} from "./version";
+export {apiVersion, itemDataVersion} from "./perseus-version";
 export {default as itemVersion} from "./item-version";
 
 /**

package/src/item-renderer.tsx

@@ -76,6 +76,9 @@ type SerializedState = {
     };
 };
 
+/**
+ * @depreciated use ServerItemRenderer
+ */
 class ItemRenderer extends React.Component<Props, State> {
     // @ts-expect-error - TS2564 - Property 'questionRenderer' has no initializer and is not definitely assigned in the constructor.
     questionRenderer: Renderer;

package/src/item-version.ts

@@ -1,10 +1,10 @@
 import allWidgets from "./all-widgets";
-import version from "./version";
+import {itemDataVersion} from "./perseus-version";
 import * as Widgets from "./widgets";
 
 Widgets.registerWidgets(allWidgets);
 
 const ItemVersion = Widgets.getVersionVector();
-ItemVersion["::renderer::"] = version.itemDataVersion;
+ItemVersion["::renderer::"] = itemDataVersion;
 
 export default ItemVersion;

package/src/multi-items/__tests__/__snapshots__/multi-renderer.test.tsx.snap

@@ -1128,7 +1128,7 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
         class=""
       >
         <div
-          class="perseus-hint-renderer last-rendered"
+          class="hint perseus-hint-renderer last-rendered"
           tabindex="-1"
         >
           <span

package/src/perseus-types.ts

@@ -762,7 +762,8 @@ export type PerseusNumericInputAnswer = {
     // The forms available for this answer.  Options: "integer, ""decimal", "proper", "improper", "mixed", or "pi"
     // NOTE: perseus_data.go says this is required even though it isn't necessary.
     answerForms?: ReadonlyArray<MathFormat>;
-    // Whether the answerForms should be strictly matched
+    // Whether we should check the answer strictly against the the configured answerForms (strict = true)
+    // or include the set of default answerForms (strict = false).
     strict: boolean;
     // A range of error +/- the value
     // NOTE: perseus_data.go says this is non-nullable even though we handle null values.

package/src/perseus-version.ts

@@ -0,0 +1,9 @@
+export const apiVersion = {
+    major: 12,
+    minor: 0,
+};
+
+export const itemDataVersion = {
+    major: 0,
+    minor: 1,
+};

package/src/styles/khan-exercise.css

@@ -10,6 +10,12 @@ var {
     font-style: normal;
 }
 
+.hint.last-hint {
+    .paragraph {
+        font-weight: bold;
+    }
+}
+
 .hint_blue {
     color: #6495ed;
 }
@@ -32,10 +38,6 @@ var {
     color: #9d38bd;
 }
 
-.last-hint {
-    font-weight: bold;
-}
-
 div.subhint {
     border: 1px solid #aaaaaa;
     background: #f9f9f9;

package/src/styles/perseus-renderer.less

@@ -144,7 +144,6 @@
     }
 
     .paragraph ul:not(.perseus-widget-radio) {
-        .legacy-typography;
         padding-left: 35px;
         list-style-type: disc;
     }

package/src/version.ts

@@ -1,11 +1,10 @@
-export default {
-    apiVersion: {
-        major: 12,
-        minor: 0,
-    },
+// This file is processed by a Rollup plugin (replace) to inject the production
+// version number during the release build.
+// In dev, you'll never see the version number.
 
-    itemDataVersion: {
-        major: 0,
-        minor: 1,
-    },
-};
+import {addLibraryVersionToPerseusDebug} from "@khanacademy/perseus-core";
+
+const libName = "@khanacademy/perseus";
+export const libVersion = "__lib_version__";
+
+addLibraryVersionToPerseusDebug(libName, libVersion);

package/src/widgets/__stories__/expression.stories.tsx

@@ -1,7 +1,7 @@
 import {KeypadContext, KeypadType} from "@khanacademy/math-input";
 import * as React from "react";
 
-import {ItemRendererWithDebugUI} from "../../../../../testing/item-renderer-with-debug-ui";
+import {ServerItemRendererWithDebugUI} from "../../../../../testing/server-item-renderer-with-debug-ui";
 import {
     expressionItem2,
     expressionItem3,
@@ -25,20 +25,27 @@ type Story = {
 type WrappedKeypadContextProps = {
     item: PerseusItem;
     customKeypad: boolean;
+    isMobile?: boolean;
 };
 
-const WrappedKeypadContext = (props: WrappedKeypadContextProps) => {
+const WrappedKeypadContext = ({
+    item,
+    customKeypad,
+    isMobile = false,
+}: WrappedKeypadContextProps) => {
     return (
         <TestKeypadContextWrapper>
             <KeypadContext.Consumer>
-                {({keypadElement, setRenderer, scrollableElement}) => {
+                {({keypadElement}) => {
                     return (
-                        <ItemRendererWithDebugUI
-                            item={props.item}
+                        <ServerItemRendererWithDebugUI
+                            item={item}
+                            keypadElement={keypadElement}
                             // Hardcoding the V2 Keypad to true as the Storybook Args
                             // were not working.
                             apiOptions={{
-                                customKeypad: props.customKeypad,
+                                isMobile: isMobile,
+                                customKeypad: customKeypad,
                                 useV2Keypad: true,
                             }}
                         />
@@ -98,13 +105,17 @@ export const Mobile = (args: StoryArgs): React.ReactElement => {
     return (
         <div>
             <p>
-                For some reason you need to be{" "}
+                MathInput uses touch events;{" "}
                 <a href="https://developer.chrome.com/docs/devtools/device-mode/">
-                    emulating mobile
+                    emulate mobile
                 </a>{" "}
-                to see the custom keypad.
+                to use the custom keypad.
             </p>
-            <WrappedKeypadContext item={expressionItem3} customKeypad={true} />
+            <WrappedKeypadContext
+                item={expressionItem3}
+                customKeypad
+                isMobile
+            />
         </div>
     );
 };

package/src/widgets/__stories__/test-keypad-context-wrapper.tsx

@@ -1,4 +1,8 @@
-import {KeypadContext, MobileKeypad} from "@khanacademy/math-input";
+import {
+    KeypadContext,
+    StatefulKeypadContextProvider,
+    MobileKeypad,
+} from "@khanacademy/math-input";
 import {View} from "@khanacademy/wonder-blocks-core";
 import {action} from "@storybook/addon-actions";
 import {StyleSheet} from "aphrodite";
@@ -29,29 +33,11 @@ type Props = {
 };
 
 const TestKeypadContextWrapper = (props: Props): React.ReactElement => {
-    const [keypadElement, setKeypadElement] = React.useState(null);
-    const [renderer, setRenderer] = React.useState(null);
-    const [scrollableElement, setScrollableElement] = React.useState(
-        document.body,
-    );
-
     return (
-        <KeypadContext.Provider
-            value={{
-                // @ts-expect-error - TS2322 - Type 'Dispatch<SetStateAction<HTMLElement>>' is not assignable to type '(scrollableElement?: HTMLElement | null | undefined) => void'.
-                setKeypadElement,
-                keypadElement,
-                // @ts-expect-error - TS2322 - Type 'Dispatch<SetStateAction<HTMLElement>>' is not assignable to type '(scrollableElement?: HTMLElement | null | undefined) => void'.
-                setRenderer,
-                renderer,
-                // @ts-expect-error - TS2322 - Type 'Dispatch<SetStateAction<HTMLElement>>' is not assignable to type '(scrollableElement?: HTMLElement | null | undefined) => void'.
-                setScrollableElement,
-                scrollableElement,
-            }}
-        >
+        <StatefulKeypadContextProvider>
             {props.children}
             <Footer />
-        </KeypadContext.Provider>
+        </StatefulKeypadContextProvider>
     );
 };
 

package/src/widgets/__tests__/expression-mobile.test.tsx

@@ -1,5 +1,9 @@
 import "@testing-library/jest-dom";
-import {KeypadContext, MobileKeypad} from "@khanacademy/math-input";
+import {
+    KeypadContext,
+    StatefulKeypadContextProvider,
+    MobileKeypad,
+} from "@khanacademy/math-input";
 import {RenderStateRoot} from "@khanacademy/wonder-blocks-core";
 import {
     fireEvent,
@@ -22,8 +26,6 @@ import {registerWidget} from "../../widgets";
 import {expressionItem2} from "../__testdata__/expression.testdata";
 import ExpressionExport from "../expression";
 
-import type {KeypadAPI} from "@khanacademy/math-input";
-
 const MQ = MathQuill.getInterface(2);
 
 function RendererWithContext({item}) {
@@ -67,27 +69,12 @@ function KeypadWithContext() {
 }
 
 function ConnectedRenderer({item = expressionItem2}) {
-    const [keypadElement, setKeypadElement] =
-        React.useState<KeypadAPI | null>();
-    const [renderer, setRenderer] = React.useState<any>(null);
-    const [scrollableElement, setScrollableElement] =
-        React.useState<HTMLElement | null>();
-
     return (
         <RenderStateRoot>
-            <KeypadContext.Provider
-                value={{
-                    setKeypadElement,
-                    keypadElement,
-                    setRenderer,
-                    renderer,
-                    setScrollableElement,
-                    scrollableElement,
-                }}
-            >
+            <StatefulKeypadContextProvider>
                 <RendererWithContext item={item} />
                 <KeypadWithContext />
-            </KeypadContext.Provider>
+            </StatefulKeypadContextProvider>
         </RenderStateRoot>
     );
 }

package/src/widgets/__tests__/numeric-input.test.ts

@@ -250,6 +250,41 @@ describe("static function validate", () => {
         expect(score.message?.includes("pi")).toBeFalsy();
     });
 
+    it("still validates against pi if provided in answerForms", () => {
+        const rubric: Rubric = {
+            answers: [
+                {
+                    maxError: null,
+                    message: "",
+                    simplify: "required",
+                    status: "correct",
+                    strict: false,
+                    value: 311.01767270538954,
+                    answerForms: ["pi"],
+                },
+            ],
+            labelText: "",
+            size: "normal",
+            static: false,
+            coefficient: false,
+        };
+
+        const userInput = {
+            currentValue: "99 pi",
+        } as const;
+
+        const score = NumericInput.validate(userInput, rubric);
+
+        expect(score).toMatchInlineSnapshot(`
+        {
+          "earned": 1,
+          "message": null,
+          "total": 1,
+          "type": "points",
+        }
+    `);
+    });
+
     it("with a strict answer", () => {
         const rubric: Rubric = {
             answers: [

package/src/widgets/numeric-input.tsx

@@ -15,6 +15,7 @@ import type {
     PerseusNumericInputAnswer,
     PerseusNumericInputWidgetOptions,
     PerseusNumericInputAnswerForm,
+    MathFormat,
 } from "../perseus-types";
 import type {
     FocusPath,
@@ -25,7 +26,11 @@ import type {
 
 const ParseTex = TexWrangler.parseTex;
 
-const answerFormButtons = [
+const answerFormButtons: ReadonlyArray<{
+    title: string;
+    value: MathFormat;
+    content: string;
+}> = [
     {title: "Integers", value: "integer", content: "6"},
     {title: "Decimals", value: "decimal", content: "0.75"},
     {title: "Proper fractions", value: "proper", content: "\u2157"},
@@ -149,8 +154,8 @@ export class NumericInput extends React.Component<Props, State> {
         return answerStrings[0];
     }
 
-    static validate(useInput: UserInput, rubric: Rubric): PerseusScore {
-        const allAnswerForms = answerFormButtons
+    static validate(userInput: UserInput, rubric: Rubric): PerseusScore {
+        const defaultAnswerForms = answerFormButtons
             .map((e) => e["value"])
             // Don't default to validating the answer as a pi answer
             // if answerForm isn't set on the answer
@@ -159,6 +164,18 @@ export class NumericInput extends React.Component<Props, State> {
 
         const createValidator = (answer: PerseusNumericInputAnswer) => {
             const stringAnswer = `${answer.value}`;
+
+            // Always validate against the provided answer forms (pi, decimal, etc.)
+            const validatorForms = [...(answer.answerForms ?? [])];
+
+            // When an answer is set to strict, we validate using ONLY
+            // the provided answerForms. If strict is false, or if there
+            // were no provided answer forms, we will include all
+            // of the default answer forms in our validator.
+            if (!answer.strict || validatorForms.length === 0) {
+                validatorForms.push(...defaultAnswerForms);
+            }
+
             return KhanAnswerTypes.number.createValidatorFunctional(
                 stringAnswer,
                 {
@@ -169,19 +186,14 @@ export class NumericInput extends React.Component<Props, State> {
                             : "optional",
                     inexact: true, // TODO(merlob) backfill / delete
                     maxError: answer.maxError,
-                    forms:
-                        answer.strict &&
-                        answer.answerForms &&
-                        answer.answerForms.length !== 0
-                            ? answer.answerForms
-                            : allAnswerForms,
+                    forms: validatorForms,
                 },
             );
         };
 
         // We may have received TeX; try to parse it before grading.
         // If `currentValue` is not TeX, this should be a no-op.
-        const currentValue = ParseTex(useInput.currentValue);
+        const currentValue = ParseTex(userInput.currentValue);
         const correctAnswers = rubric.answers.filter(
             (answer) => answer.status === "correct",
         );

package/tsconfig-build.json

@@ -18,6 +18,7 @@
         {"path": "../kmath/tsconfig-build.json"},
         {"path": "../math-input/tsconfig-build.json"},
         {"path": "../perseus-core/tsconfig-build.json"},
+        {"path": "../perseus-core/tsconfig-build.json"},
         {"path": "../perseus-linter/tsconfig-build.json"},
         {"path": "../pure-markdown/tsconfig-build.json"},
         {"path": "../simple-markdown/tsconfig-build.json"},