@khanacademy/perseus 11.3.0 → 11.5.0

package/dist/widgets/expression.d.ts

@@ -1,9 +1,8 @@
-import { KeypadType } from "@khanacademy/math-input";
 import * as React from "react";
 import { useDependencies } from "../dependencies";
 import type { PerseusExpressionWidgetOptions } from "../perseus-types";
 import type { PerseusScore, WidgetProps } from "../types";
-import type { Keys as Key } from "@khanacademy/math-input";
+import type { Keys as Key, KeypadConfiguration } from "@khanacademy/math-input";
 type InputPath = ReadonlyArray<string>;
 type Rubric = PerseusExpressionWidgetOptions;
 type RenderProps = {
@@ -79,10 +78,7 @@ export declare class Expression extends React.Component<Props, ExpressionState>
  *       to be included as keys on the keypad. These are scraped from the answer
  *       forms.
  */
-declare const keypadConfigurationForProps: (widgetOptions: PerseusExpressionWidgetOptions) => {
-    keypadType: KeypadType;
-    extraKeys: string[];
-};
+declare const keypadConfigurationForProps: (widgetOptions: PerseusExpressionWidgetOptions) => KeypadConfiguration;
 declare const _default: Readonly<{
     name: string;
     displayName: string;

package/package.json

@@ -3,7 +3,7 @@
     "description": "Core Perseus API (includes renderers and widgets)",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "11.3.0",
+    "version": "11.5.0",
     "publishConfig": {
         "access": "public"
     },
@@ -24,10 +24,10 @@
     "dependencies": {
         "@khanacademy/kas": "^0.3.1",
         "@khanacademy/kmath": "^0.1.2",
-        "@khanacademy/math-input": "^12.1.0",
-        "@khanacademy/perseus-core": "1.0.0",
-        "@khanacademy/perseus-linter": "^0.3.3",
-        "@khanacademy/pure-markdown": "^0.2.5",
+        "@khanacademy/math-input": "^13.0.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"
     },
     "devDependencies": {

package/src/styles/articles.less

@@ -110,10 +110,6 @@
         color: inherit;
     }
 
-    .perseus-image-widget {
-        text-align: center;
-    }
-
     .perseus-image-caption .perseus-renderer .paragraph .paragraph,
     .perseus-image-caption .perseus-renderer .paragraph ol,
     .perseus-image-caption .perseus-renderer .paragraph ul {

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

@@ -11,6 +11,7 @@ import expressionExport from "../expression";
 import TestKeypadContextWrapper from "./test-keypad-context-wrapper";
 
 import type {PerseusItem} from "../../perseus-types";
+import type {Keys as Key} from "@khanacademy/math-input";
 
 type StoryArgs = {
     customKeypad: boolean;
@@ -34,8 +35,11 @@ const WrappedKeypadContext = (props: WrappedKeypadContextProps) => {
                     return (
                         <ItemRendererWithDebugUI
                             item={props.item}
+                            // Hardcoding the V2 Keypad to true as the Storybook Args
+                            // were not working.
                             apiOptions={{
                                 customKeypad: props.customKeypad,
+                                useV2Keypad: true,
                             }}
                         />
                     );
@@ -63,7 +67,7 @@ export const DesktopKitchenSink = (args: StoryArgs): React.ReactElement => {
 
     const keypadConfiguration = {
         keypadType: KeypadType.EXPRESSION,
-        extraKeys: ["x", "y", "z"],
+        extraKeys: ["x", "y", "z"] as Key[],
     };
 
     return (

package/src/widgets/expression.tsx

@@ -29,7 +29,7 @@ import type {
     WidgetExports,
     WidgetProps,
 } from "../types";
-import type {Keys as Key} from "@khanacademy/math-input";
+import type {Keys as Key, KeypadConfiguration} from "@khanacademy/math-input";
 import type {PropsFor} from "@khanacademy/wonder-blocks-core";
 
 type InputPath = ReadonlyArray<string>;
@@ -610,7 +610,7 @@ export class Expression extends React.Component<Props, ExpressionState> {
  */
 const keypadConfigurationForProps = (
     widgetOptions: PerseusExpressionWidgetOptions,
-) => {
+): KeypadConfiguration => {
     // Always use the Expression keypad, regardless of the button sets that have
     // been enabled.
     const keypadType = KeypadType.EXPRESSION;
@@ -642,20 +642,22 @@ const keypadConfigurationForProps = (
 
     // TODO(charlie): Alert the keypad as to which of these symbols should be
     // treated as functions.
-    const extraVariables = Object.keys(uniqueExtraVariables);
-    extraVariables.sort();
+    const extraVariables = Object.keys(
+        uniqueExtraVariables,
+    ).sort() as ReadonlyArray<Key>;
 
-    const extraConstants = Object.keys(uniqueExtraConstants);
-    extraConstants.sort();
+    const extraConstants = Object.keys(
+        uniqueExtraConstants,
+    ).sort() as ReadonlyArray<Key>;
 
-    const extraKeys = [...extraVariables, ...extraConstants];
+    let extraKeys = [...extraVariables, ...extraConstants];
     if (!extraKeys.length) {
         // If there are no extra symbols available, we include Pi anyway, so
         // that the "extra symbols" button doesn't appear empty.
-        extraKeys.push("PI");
+        extraKeys = ["PI"];
     }
 
-    return {keypadType, extraKeys};
+    return {keypadType, extraKeys, times: widgetOptions.times};
 };
 
 const propUpgrades = {