@khanacademy/perseus 11.5.1 → 11.6.0

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.0",
     "publishConfig": {
         "access": "public"
     },
@@ -24,7 +24,7 @@
     "dependencies": {
         "@khanacademy/kas": "^0.3.1",
         "@khanacademy/kmath": "^0.1.2",
-        "@khanacademy/math-input": "^13.1.0",
+        "@khanacademy/math-input": "^14.0.0",
         "@khanacademy/perseus-core": "1.1.0",
         "@khanacademy/perseus-linter": "^0.3.4",
         "@khanacademy/pure-markdown": "^0.2.6",

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/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/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/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/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",
         );