@khanacademy/perseus 13.1.0 → 14.0.0

package/dist/renderer.d.ts

@@ -33,7 +33,7 @@ export type Widget = {
     blurInputPath?: (path: FocusPath) => null;
     focusInputPath?: (path: FocusPath) => null;
     getInputPaths?: () => ReadonlyArray<FocusPath>;
-    setInputValue?: (path: FocusPath, newValue: string, focus: () => unknown) => void;
+    setInputValue?: (path: FocusPath, newValue: string, focus?: () => unknown) => void;
     getUserInput?: () => WidgetUserInput | null | undefined;
     simpleValidate?: (options?: any, onOutputError?: (widgetId: any, value: string, message?: string | null | undefined) => unknown | null | undefined) => PerseusScore;
     showRationalesForCurrentlySelectedChoices?: (options?: any) => void;
@@ -210,7 +210,7 @@ declare class Renderer extends React.Component<Props, State> {
     serialize: () => Record<any, any>;
     emptyWidgets: () => any;
     _setWidgetProps: SetWidgetPropsFn;
-    setInputValue: (path: FocusPath, newValue: string, focus: () => unknown) => void;
+    setInputValue: (path: FocusPath, newValue: string, focus?: () => unknown) => void;
     /**
      * Returns an array of the widget `.getUserInput()` results
      */

package/dist/widgets/matcher.d.ts

@@ -6,7 +6,7 @@ type State = {
     rightHeight: number;
     texRendererLoaded: boolean;
 };
-declare class Matcher extends React.Component<any, any> {
+export declare class Matcher extends React.Component<any, any> {
     static propTypes: {
         apiOptions: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
             isArticle: PropTypes.Validator<boolean>;

package/package.json

@@ -3,7 +3,7 @@
     "description": "Core Perseus API (includes renderers and widgets)",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "13.1.0",
+    "version": "14.0.0",
     "publishConfig": {
         "access": "public"
     },
@@ -24,29 +24,29 @@
     "dependencies": {
         "@khanacademy/kas": "^0.3.5",
         "@khanacademy/kmath": "^0.1.6",
-        "@khanacademy/math-input": "^15.0.1",
+        "@khanacademy/math-input": "^16.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"
+        "@khanacademy/pure-markdown": "^0.2.11",
+        "@khanacademy/simple-markdown": "^0.11.0"
     },
     "devDependencies": {
-        "@khanacademy/wonder-blocks-button": "^4.1.3",
-        "@khanacademy/wonder-blocks-clickable": "^4.0.0",
-        "@khanacademy/wonder-blocks-color": "^2.0.1",
-        "@khanacademy/wonder-blocks-core": "^6.0.0",
-        "@khanacademy/wonder-blocks-data": "^12.0.0",
-        "@khanacademy/wonder-blocks-dropdown": "^3.0.21",
-        "@khanacademy/wonder-blocks-form": "^4.3.3",
+        "@khanacademy/wonder-blocks-button": "^6.2.2",
+        "@khanacademy/wonder-blocks-clickable": "^4.0.11",
+        "@khanacademy/wonder-blocks-color": "^3.0.0",
+        "@khanacademy/wonder-blocks-core": "^6.3.0",
+        "@khanacademy/wonder-blocks-data": "^13.0.5",
+        "@khanacademy/wonder-blocks-dropdown": "^3.1.8",
+        "@khanacademy/wonder-blocks-form": "^4.3.16",
         "@khanacademy/wonder-blocks-i18n": "^2.0.2",
-        "@khanacademy/wonder-blocks-layout": "^2.0.17",
-        "@khanacademy/wonder-blocks-link": "^5.0.0",
-        "@khanacademy/wonder-blocks-modal": "^4.0.19",
-        "@khanacademy/wonder-blocks-popover": "^3.0.0",
-        "@khanacademy/wonder-blocks-progress-spinner": "^2.0.17",
-        "@khanacademy/wonder-blocks-spacing": "^3.0.5",
-        "@khanacademy/wonder-blocks-tooltip": "^2.1.2",
-        "@khanacademy/wonder-blocks-typography": "^2.1.3",
+        "@khanacademy/wonder-blocks-layout": "^2.0.24",
+        "@khanacademy/wonder-blocks-link": "^6.0.2",
+        "@khanacademy/wonder-blocks-modal": "^4.0.35",
+        "@khanacademy/wonder-blocks-popover": "^3.0.16",
+        "@khanacademy/wonder-blocks-progress-spinner": "^2.0.24",
+        "@khanacademy/wonder-blocks-spacing": "^4.0.1",
+        "@khanacademy/wonder-blocks-tooltip": "^2.1.18",
+        "@khanacademy/wonder-blocks-typography": "^2.1.9",
         "@khanacademy/wonder-stuff-core": "^1.5.1",
         "@phosphor-icons/core": "^2.0.2",
         "aphrodite": "^1.2.5",
@@ -59,29 +59,29 @@
         "katex": "^0.11.1",
         "lodash.debounce": "^4.0.8",
         "mathquill": "git+https://git@github.com/Khan/mathquill.git#48410e80d760bbd5105544d4a4ab459a28dc2cbc",
-        "perseus-build-settings": "^0.2.1",
+        "perseus-build-settings": "^0.3.0",
         "prop-types": "^15.6.1",
         "react": "16.14.0",
         "react-dom": "16.14.0",
         "underscore": "^1.4.4"
     },
     "peerDependencies": {
-        "@khanacademy/wonder-blocks-button": "^4.1.3",
-        "@khanacademy/wonder-blocks-clickable": "^4.0.0",
-        "@khanacademy/wonder-blocks-color": "^2.0.1",
-        "@khanacademy/wonder-blocks-core": "^6.0.0",
-        "@khanacademy/wonder-blocks-data": "^12.0.0",
-        "@khanacademy/wonder-blocks-dropdown": "^3.0.21",
-        "@khanacademy/wonder-blocks-form": "^4.3.3",
+        "@khanacademy/wonder-blocks-button": "^6.2.2",
+        "@khanacademy/wonder-blocks-clickable": "^4.0.11",
+        "@khanacademy/wonder-blocks-color": "^3.0.0",
+        "@khanacademy/wonder-blocks-core": "^6.3.0",
+        "@khanacademy/wonder-blocks-data": "^13.0.5",
+        "@khanacademy/wonder-blocks-dropdown": "^3.1.8",
+        "@khanacademy/wonder-blocks-form": "^4.3.16",
         "@khanacademy/wonder-blocks-i18n": "^2.0.2",
-        "@khanacademy/wonder-blocks-layout": "^2.0.17",
-        "@khanacademy/wonder-blocks-link": "^5.0.0",
-        "@khanacademy/wonder-blocks-modal": "^4.0.19",
-        "@khanacademy/wonder-blocks-popover": "^3.0.0",
-        "@khanacademy/wonder-blocks-progress-spinner": "^2.0.17",
-        "@khanacademy/wonder-blocks-spacing": "^3.0.5",
-        "@khanacademy/wonder-blocks-tooltip": "^2.1.2",
-        "@khanacademy/wonder-blocks-typography": "^2.1.3",
+        "@khanacademy/wonder-blocks-layout": "^2.0.24",
+        "@khanacademy/wonder-blocks-link": "^6.0.2",
+        "@khanacademy/wonder-blocks-modal": "^4.0.35",
+        "@khanacademy/wonder-blocks-popover": "^3.0.16",
+        "@khanacademy/wonder-blocks-progress-spinner": "^2.0.24",
+        "@khanacademy/wonder-blocks-spacing": "^4.0.1",
+        "@khanacademy/wonder-blocks-tooltip": "^2.1.18",
+        "@khanacademy/wonder-blocks-typography": "^2.1.9",
         "@khanacademy/wonder-stuff-core": "^1.5.1",
         "@phosphor-icons/core": "^2.0.2",
         "aphrodite": "^1.2.5",

package/src/__stories__/hints-renderer.stories.tsx

@@ -3,56 +3,53 @@ import React from "react";
 
 import HintsRenderer from "../hints-renderer";
 
-type StoryArgs = {
-    hints: ReadonlyArray<any>;
-    hintsVisible: number;
-};
-
-type Story = {
-    title: string;
-    argTypes: any;
-};
+import type {Meta, StoryObj} from "@storybook/react";
 
-export default {
+const meta: Meta<typeof HintsRenderer> = {
     title: "Perseus/Renderers/Hints Renderer",
-    argTypes: {
-        hints: {
-            control: "object",
-            defaultValue: [
-                {
-                    content: "this is hint 1",
-                    images: {},
-                    replace: false,
-                    widgets: {},
-                },
-                {
-                    content: "this is hint 2",
-                    images: {},
-                    replace: false,
-                    widgets: {},
-                },
-                {
-                    content: "this is hint 3",
-                    images: {},
-                    replace: false,
-                    widgets: {},
-                },
-            ],
+    component: HintsRenderer,
+    decorators: [
+        (Story) => {
+            return (
+                <View style={{left: 80}}>
+                    <Story />
+                </View>
+            );
         },
+    ],
+    argTypes: {
         hintsVisible: {
-            control: {type: "number", min: 0},
+            control: {min: 0},
             defaultValue: 3,
         },
     },
-} as Story;
+};
+
+export default meta;
 
-export const Interactive = (args: StoryArgs): any => {
-    return (
-        // Sorry for the hacks! The HintRenderer uses absolute positioning
-        // for the "1 / 3" label that is rendered left of the hint. So we shift
-        // everything over so we can see it.
-        <View style={{left: 80}}>
-            <HintsRenderer {...args} />
-        </View>
-    );
+type Story = StoryObj<typeof HintsRenderer>;
+
+export const Interactive: Story = {
+    args: {
+        hints: [
+            {
+                content: "this is hint 1",
+                images: {},
+                replace: false,
+                widgets: {},
+            },
+            {
+                content: "this is hint 2",
+                images: {},
+                replace: false,
+                widgets: {},
+            },
+            {
+                content: "this is hint 3",
+                images: {},
+                replace: false,
+                widgets: {},
+            },
+        ],
+    },
 };

package/src/__tests__/__snapshots__/renderer.test.tsx.snap

@@ -367,18 +367,10 @@ exports[`renderer snapshots correct answer: correct answer 1`] = `
                 >
                   less than or equal to
                 </span>
-                <svg
+                <span
                   aria-hidden="true"
-                  class="svg_aeiopc-o_O-caret_ntkmq"
-                  height="16"
-                  viewBox="0 0 16 16"
-                  width="16"
-                >
-                  <path
-                    d="M8 8.586l3.293-3.293a1 1 0 0 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 1.414-1.414L8 8.586z"
-                    fill="rgba(33,36,44,0.64)"
-                  />
-                </svg>
+                  class="svg_aeiopc-o_O-caret_ntkmq-o_O-inlineStyles_13xtep5"
+                />
               </button>
             </div>
           </div>
@@ -440,18 +432,10 @@ exports[`renderer snapshots incorrect answer: incorrect answer 1`] = `
                 >
                   greater than or equal to
                 </span>
-                <svg
+                <span
                   aria-hidden="true"
-                  class="svg_aeiopc-o_O-caret_ntkmq"
-                  height="16"
-                  viewBox="0 0 16 16"
-                  width="16"
-                >
-                  <path
-                    d="M8 8.586l3.293-3.293a1 1 0 0 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 1.414-1.414L8 8.586z"
-                    fill="rgba(33,36,44,0.64)"
-                  />
-                </svg>
+                  class="svg_aeiopc-o_O-caret_ntkmq-o_O-inlineStyles_13xtep5"
+                />
               </button>
             </div>
           </div>
@@ -513,18 +497,10 @@ exports[`renderer snapshots initial render: initial render 1`] = `
                 >
                   greater/less than or equal to
                 </span>
-                <svg
+                <span
                   aria-hidden="true"
-                  class="svg_aeiopc-o_O-caret_ntkmq"
-                  height="16"
-                  viewBox="0 0 16 16"
-                  width="16"
-                >
-                  <path
-                    d="M8 8.586l3.293-3.293a1 1 0 0 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 1.414-1.414L8 8.586z"
-                    fill="rgba(33,36,44,0.64)"
-                  />
-                </svg>
+                  class="svg_aeiopc-o_O-caret_ntkmq-o_O-inlineStyles_13xtep5"
+                />
               </button>
             </div>
           </div>

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

@@ -1,6 +1,7 @@
 import {
     StatefulKeypadContextProvider,
     KeypadContext,
+    MobileKeypad,
 } from "@khanacademy/math-input";
 import {RenderStateRoot} from "@khanacademy/wonder-blocks-core";
 import {screen, render, fireEvent, waitFor} from "@testing-library/react";
@@ -11,7 +12,6 @@ import {
     testDependencies,
     testDependenciesV2,
 } from "../../../../testing/test-dependencies";
-import KeypadSwitch from "../../../math-input/src/components/keypad-switch";
 import {articleWithExpression} from "../__testdata__/article-renderer.testdata";
 import ArticleRenderer from "../article-renderer";
 import * as Dependencies from "../dependencies";
@@ -24,11 +24,10 @@ function KeypadWithContext() {
         <KeypadContext.Consumer>
             {({setKeypadElement}) => {
                 return (
-                    <KeypadSwitch
+                    <MobileKeypad
                         onElementMounted={setKeypadElement}
                         onDismiss={() => {}}
                         onAnalyticsEvent={async () => {}}
-                        useV2Keypad
                     />
                 );
             }}

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

@@ -1,26 +1,22 @@
 import {describe, beforeEach, it} from "@jest/globals";
-import {RenderStateRoot} from "@khanacademy/wonder-blocks-core";
-import {mount} from "enzyme"; // eslint-disable-line no-restricted-imports
 import $ from "jquery";
 import * as React from "react";
 import ReactDOM from "react-dom";
 import TestUtils from "react-dom/test-utils";
 import _ from "underscore";
-import "jest-enzyme";
 
 import {testDependencies} from "../../../../testing/test-dependencies";
 import * as Dependencies from "../dependencies";
 import {ClassNames} from "../perseus-api";
 import Renderer from "../renderer";
 import {registerAllWidgetsForTesting} from "../util/register-all-widgets-for-testing";
+import {renderQuestion} from "../widgets/__tests__/renderQuestion";
 
 import imageItem from "./test-items/image-item";
 import inputNumber1Item from "./test-items/input-number-1-item";
 import inputNumber2Item from "./test-items/input-number-2-item";
 import tableItem from "./test-items/table-item";
 
-import type {APIOptions} from "../types";
-
 const itemWidget = inputNumber1Item;
 
 // Returns a promise that will resolve shortly after the end of this
@@ -33,26 +29,6 @@ const delayedPromise = (value: undefined) => {
     return deferred.promise();
 };
 
-const renderQuestionArea = function (item, apiOptions?: APIOptions): any {
-    const wrapper = mount(
-        <RenderStateRoot>
-            <Dependencies.DependenciesContext.Provider
-                value={{analytics: {onAnalyticsEvent: async () => undefined}}}
-            >
-                <Renderer
-                    content={item.question.content}
-                    images={item.question.images}
-                    widgets={item.question.widgets}
-                    problemNum={0}
-                    apiOptions={apiOptions}
-                />
-            </Dependencies.DependenciesContext.Provider>
-        </RenderStateRoot>,
-        {includeDefaultTestHarness: false},
-    );
-    return wrapper.childAt(0).instance();
-};
-
 describe("Perseus API", function () {
     beforeEach(() => {
         jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
@@ -63,34 +39,40 @@ describe("Perseus API", function () {
 
     describe("setInputValue", function () {
         it("should be able to produce a correctly graded value", function () {
-            const renderer = renderQuestionArea(inputNumber1Item);
-            renderer.setInputValue(["input-number 1"], "5");
-            const score = renderer.guessAndScore()[1];
-            expect(score.type).toBe("points");
-            expect(score.earned).toBe(score.total);
+            // Arrange
+            const {renderer} = renderQuestion(inputNumber1Item.question);
+
+            // Act
+            renderer.setInputValue(["input-number 1"], "5", () => undefined);
+
+            // Assert
+            expect(renderer).toHaveBeenAnsweredCorrectly();
         });
 
         it("should be able to produce a wrong value", function () {
-            const renderer = renderQuestionArea(inputNumber1Item);
-            renderer.setInputValue(["input-number 1"], "3", () => {});
-            const score = renderer.guessAndScore()[1];
-            expect(score.type).toBe("points");
-            expect(score.earned).toBe(0);
+            // Arrange
+            const {renderer} = renderQuestion(inputNumber1Item.question);
+
+            // Act
+            renderer.setInputValue(["input-number 1"], "3");
+
+            // Assert
+            expect(renderer).toHaveBeenAnsweredIncorrectly();
         });
 
         it("should be able to produce an empty score", function () {
-            const renderer = renderQuestionArea(inputNumber1Item);
+            // Arrange
+            const {renderer} = renderQuestion(inputNumber1Item.question);
+
             renderer.setInputValue(["input-number 1"], "3");
-            let score = renderer.guessAndScore()[1];
-            expect(score.type).toBe("points");
-            expect(score.earned).toBe(0);
+            expect(renderer).toHaveBeenAnsweredIncorrectly();
+
             renderer.setInputValue(["input-number 1"], "");
-            score = renderer.guessAndScore()[1];
-            expect(score.type).toBe("invalid");
+            expect(renderer).toHaveInvalidInput();
         });
 
         it("should be able to accept a callback", function (done) {
-            const renderer = renderQuestionArea(inputNumber1Item);
+            const {renderer} = renderQuestion(inputNumber1Item.question);
             renderer.setInputValue(["input-number 1"], "3", function () {
                 const guess = renderer.getUserInput()[0];
                 expect(guess.currentValue).toBe("3");
@@ -102,13 +84,13 @@ describe("Perseus API", function () {
 
     describe("getInputPaths", function () {
         it("should be able to find all the input widgets", function () {
-            const renderer = renderQuestionArea(inputNumber2Item);
+            const {renderer} = renderQuestion(inputNumber2Item.question);
             const numPaths = renderer.getInputPaths().length;
             expect(numPaths).toBe(2);
         });
 
         it("should be able to find all inputs within widgets", function () {
-            const renderer = renderQuestionArea(tableItem);
+            const {renderer} = renderQuestion(tableItem.question);
             const numPaths = renderer.getInputPaths().length;
             expect(numPaths).toBe(8);
         });
@@ -116,7 +98,7 @@ describe("Perseus API", function () {
 
     describe("getDOMNodeForPath", function () {
         it("should find one DOM node per <input>", function () {
-            const renderer = renderQuestionArea(inputNumber2Item);
+            const {renderer} = renderQuestion(inputNumber2Item.question);
             const inputPaths = renderer.getInputPaths();
             const allInputs = TestUtils.scryRenderedDOMComponentsWithTag(
                 renderer,
@@ -126,13 +108,14 @@ describe("Perseus API", function () {
         });
 
         it("should find the right DOM nodes for the <input>s", function () {
-            const renderer = renderQuestionArea(inputNumber2Item);
+            const {renderer} = renderQuestion(inputNumber2Item.question);
             const inputPaths = renderer.getInputPaths();
             const allInputs = TestUtils.scryRenderedDOMComponentsWithTag(
                 renderer,
                 "input",
             );
             _.each(inputPaths, (inputPath, i) => {
+                // @ts-expect-error - TS2769 - No overload matches this call.
                 const $node = $(renderer.getDOMNodeForPath(inputPath));
                 // @ts-expect-error - TS2769 - No overload matches this call.
                 const $input = $(ReactDOM.findDOMNode(allInputs[i]));
@@ -145,13 +128,13 @@ describe("Perseus API", function () {
     describe("onInputError", function () {
         it("should call a callback when grading an empty input-number", function () {
             let wasCalled;
-            const renderer = renderQuestionArea(inputNumber1Item, {
+            const {renderer} = renderQuestion(inputNumber1Item.question, {
                 onInputError: function (widgetId) {
                     wasCalled = true;
                 },
             });
-            const score = renderer.guessAndScore()[1];
-            expect(score.type).toBe("invalid");
+
+            expect(renderer).toHaveInvalidInput();
             expect(wasCalled).toBe(true);
         });
     });
@@ -164,7 +147,7 @@ describe("Perseus API", function () {
                 // version
                 expect(ClassNames.FOCUSED).toBe("perseus-focused");
 
-                const renderer = renderQuestionArea(inputNumber1Item);
+                const {renderer} = renderQuestion(inputNumber1Item.question);
 
                 const input =
                     // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'querySelector' does not exist on type 'Element | Text'.
@@ -191,7 +174,7 @@ describe("Perseus API", function () {
             let callCount = 0;
             let newFocusResult;
             let oldFocusResult;
-            const renderer = renderQuestionArea(inputNumber1Item, {
+            const {renderer} = renderQuestion(inputNumber1Item.question, {
                 onFocusChange: function (newFocus, oldFocus) {
                     callCount++;
                     newFocusResult = newFocus;
@@ -235,7 +218,7 @@ describe("Perseus API", function () {
             let callCount = 0;
             let newFocusResult;
             let oldFocusResult;
-            const renderer = renderQuestionArea(inputNumber2Item, {
+            const {renderer} = renderQuestion(inputNumber2Item.question, {
                 onFocusChange: function (newFocus, oldFocus) {
                     callCount++;
                     newFocusResult = newFocus;

package/src/components/graph.tsx

@@ -5,6 +5,7 @@ import * as React from "react";
 import ReactDOM from "react-dom";
 import _ from "underscore";
 
+import AssetContext from "../asset-context";
 import {interactiveSizes} from "../styles/constants";
 import Util from "../util";
 import GraphUtils from "../util/graph-utils";
@@ -395,14 +396,19 @@ class Graph extends React.Component<Props> {
         if (imageData.url) {
             const scale = this.props.box[0] / interactiveSizes.defaultBoxSize;
             image = (
-                // @ts-expect-error - TS2741 - Property 'alt' is missing in type '{ src: any; width: any; height: any; scale: number; responsive: false; }' but required in type 'Pick<Readonly<Props> & Readonly<{ children?: ReactNode; }>, "children" | "height" | "width" | "title" | "alt" | "trackInteraction" | "preloader" | "allowFullBleed" | "extraGraphie" | "overrideAriaHidden">'.
-                <SvgImage
-                    src={imageData.url}
-                    width={imageData.width}
-                    height={imageData.height}
-                    scale={scale}
-                    responsive={false}
-                />
+                <AssetContext.Consumer>
+                    {({setAssetStatus}) => (
+                        <SvgImage
+                            // @ts-expect-error - TS2741 - Property 'alt' is missing in type '{ src: any; width: any; height: any; scale: number; responsive: false; }' but required in type 'Pick<Readonly<Props> & Readonly<{ children?: ReactNode; }>, "children" | "height" | "width" | "title" | "alt" | "trackInteraction" | "preloader" | "allowFullBleed" | "extraGraphie" | "overrideAriaHidden">'.
+                            src={imageData.url}
+                            width={imageData.width}
+                            height={imageData.height}
+                            scale={scale}
+                            responsive={false}
+                            setAssetStatus={setAssetStatus}
+                        />
+                    )}
+                </AssetContext.Consumer>
             );
         } else {
             image = null;

package/src/components/svg-image.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
-/* eslint-disable no-useless-escape, react/no-unsafe */
+/* eslint-disable react/no-unsafe */
 import {CircularSpinner} from "@khanacademy/wonder-blocks-progress-spinner";
 import classNames from "classnames";
 import $ from "jquery";
@@ -79,7 +79,7 @@ const doJSONP = function (url: string, options) {
 // system (with file://). We replace urls that start with `web+graphie`
 // in the perseus json with this `file+graphie` prefix to indicate that
 // they should have the `file://` protocol instead of `https://`.
-const svgLocalLabelsRegex = /^file\+graphie\:/;
+const svgLocalLabelsRegex = /^file\+graphie:/;
 const hashRegex = /\/([^/]+)$/;
 
 function isImageProbablyPhotograph(imageUrl) {
@@ -180,6 +180,16 @@ type Props = {
     setAssetStatus: (assetKey: string, loaded: boolean) => void;
 };
 
+type DefaultProps = {
+    constrainHeight: NonNullable<Props["constrainHeight"]>;
+    onUpdate: NonNullable<Props["onUpdate"]>;
+    responsive: NonNullable<Props["responsive"]>;
+    scale: NonNullable<Props["scale"]>;
+    setAssetStatus: NonNullable<Props["setAssetStatus"]>;
+    src: NonNullable<Props["src"]>;
+    zoomToFullSizeOnMobile: NonNullable<Props["zoomToFullSizeOnMobile"]>;
+};
+
 type Label = {
     coordinates: ReadonlyArray<any>;
     content: string;
@@ -212,15 +222,7 @@ type State = {
 class SvgImage extends React.Component<Props, State> {
     _isMounted: boolean;
 
-    static defaultProps: {
-        constrainHeight: boolean;
-        onUpdate: () => void;
-        responsive: boolean;
-        scale: number;
-        setAssetStatus: (src: string, status: boolean) => void;
-        src: string;
-        zoomToFullSizeOnMobile: boolean;
-    } = {
+    static defaultProps: DefaultProps = {
         constrainHeight: false,
         onUpdate: () => {},
         responsive: true,

package/src/mixins/provide-keypad.tsx

@@ -102,7 +102,6 @@ const ProvideKeypad = {
                     }}
                     // @ts-expect-error - TS2339 - Property 'props' does not exist on type '{ readonly propTypes: { readonly apiOptions: React.PropType<{ customKeypad?: boolean | undefined; nativeKeypadProxy?: ((...a: readonly any[]) => unknown) | undefined; }>; readonly keypadStyle: Requireable<any>; }; readonly getInitialState: () => { ...; }; readonly componentDidMount: () => void; readonly componentWil...'.
                     style={_this.props.keypadStyle}
-                    useV2Keypad={apiOptions.useV2Keypad}
                     onAnalyticsEvent={async () => {
                         // Intentionally left empty. This component is
                         // deprecated and so we don't want/need to instrument