@khanacademy/perseus 11.6.0 → 12.0.0

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # @khanacademy/perseus
 
+## 12.0.0
+
+### Major Changes
+
+-   5bcf118c: # Update MathInput
+
+    -   `buttonSets` is now deprecated in favor of `keypadButtonSets`, but currently maps to the new prop for backwards compatability.
+    -   `buttonsVisible` is now a bit misleading: "focused" is the default state with a toggle-able keypad and "always" shows the keypad by default.
+
+### Minor Changes
+
+-   5bcf118c: Desktop Expression Widget now uses v2 keypad
+
+### Patch Changes
+
+-   Updated dependencies [5bcf118c]
+    -   @khanacademy/math-input@14.1.0
+
+## 11.6.1
+
+### Patch Changes
+
+-   1721c05c: Fix broken Expression Mobile test
+-   55d4cd00: Print package name and version when loaded in the page
+-   Updated dependencies [4f8afadd]
+-   Updated dependencies [7d8905b6]
+-   Updated dependencies [55d4cd00]
+    -   @khanacademy/math-input@14.0.1
+    -   @khanacademy/kas@0.3.2
+    -   @khanacademy/kmath@0.1.3
+    -   @khanacademy/perseus-core@1.1.1
+    -   @khanacademy/perseus-linter@0.3.5
+    -   @khanacademy/pure-markdown@0.2.7
+    -   @khanacademy/simple-markdown@0.10.1
+
 ## 11.6.0
 
 ### Minor Changes

package/dist/components/math-input.d.ts

@@ -1,25 +1,55 @@
+import { CursorContext } from "@khanacademy/math-input";
 import * as React from "react";
-import type { ButtonSetsType } from "./tex-buttons";
-import type { MathFieldInterface } from "@khanacademy/math-input";
+import type { LegacyButtonSets } from "../perseus-types";
+import type { PerseusDependenciesV2 } from "../types";
+import type { Keys, MathFieldInterface } from "@khanacademy/math-input";
 type ButtonsVisibleType = "always" | "never" | "focused";
+type KeypadButtonSets = {
+    advancedRelations?: boolean;
+    basicRelations?: boolean;
+    divisionKey?: boolean;
+    logarithms?: boolean;
+    preAlgebra?: boolean;
+    trigonometry?: boolean;
+};
 type Props = {
     className?: string;
     value: string;
     onChange: any;
     convertDotToTimes: boolean;
-    buttonsVisible: ButtonsVisibleType;
-    buttonSets: ButtonSetsType;
+    /**
+     * @deprecated Use `keypadButtonSets` instead. Maps to `keypadButtonSets`.
+     * @see keypadButtonSets
+     */
+    buttonSets?: LegacyButtonSets;
+    /**
+     * Overrides deprecated `buttonSets` prop.
+     */
+    keypadButtonSets?: KeypadButtonSets;
     labelText?: string;
     onFocus?: () => void;
     onBlur?: () => void;
+    hasError?: boolean;
+    extraKeys?: ReadonlyArray<Keys>;
+    /**
+     * Whether to show the keypad buttons.
+     * The strings now misleading, but we keep them for backwards compatibility.
+     * - `focused` means that the keypad **appears on toggle, *off* by default**.
+     * - `always` means that the keypad **appears on toggle, *on* by default.**
+     * - `never` means that the keypad is **never shown**.
+     */
+    buttonsVisible?: ButtonsVisibleType;
+    analytics: PerseusDependenciesV2["analytics"];
 };
 type DefaultProps = {
     value: Props["value"];
     convertDotToTimes: Props["convertDotToTimes"];
-    buttonsVisible: Props["buttonsVisible"];
 };
 type State = {
     focused: boolean;
+    keypadOpen: boolean;
+    cursorContext: typeof CursorContext[keyof typeof CursorContext];
+    openedWithEventType?: string;
 };
 declare class MathInput extends React.Component<Props, State> {
     mouseDown: boolean;
@@ -28,16 +58,13 @@ declare class MathInput extends React.Component<Props, State> {
     static defaultProps: DefaultProps;
     state: State;
     componentDidMount(): void;
-    componentWillUnmount(): void;
-    handleFocus: () => void;
-    handleMouseDown: (arg1: MouseEvent) => void;
-    handleMouseUp: (arg1: MouseEvent) => void;
-    handleBlur: (arg1: React.FocusEvent) => void;
-    _shouldShowButtons: () => boolean;
+    openKeypad(): void;
+    closeKeypad(): void;
     insert: (value: any) => void;
     mathField: () => MathFieldInterface | null;
     focus: () => void;
     blur: () => void;
+    handleKeypadPress: (key: Keys, e: any) => void;
     render(): React.ReactNode;
 }
 export default MathInput;

package/dist/components/tex-buttons.d.ts

@@ -1,4 +1,5 @@
 import * as React from "react";
+import type { LegacyButtonSets } from "../perseus-types";
 import type { Keys } from "@khanacademy/math-input";
 type ButtonSet = (props: any) => [
     React.ReactNode,
@@ -6,7 +7,7 @@ type ButtonSet = (props: any) => [
     string
 ];
 type ButtonSets = {
-    readonly [key: string]: ReadonlyArray<ButtonSet>;
+    readonly [key in LegacyButtonSets[number]]: ReadonlyArray<ButtonSet>;
 };
 declare const buttonSets: ButtonSets;
 export type ButtonSetsType = ReadonlyArray<keyof typeof buttonSets>;

package/dist/es/index.css

@@ -2666,9 +2666,6 @@ body.mobile .categorizer-container td.category input[type="radio"] + span:active
   padding: 5px;
   width: 210px;
 }
-.perseus-widget-expression.show-error-tooltip .perseus-math-input.mq-editable-field.mq-math-mode > .mq-root-block {
-  padding-right: 25px;
-}
 .perseus-widget-expression .perseus-formats-tooltip {
   width: 190px;
 }
@@ -3562,11 +3559,13 @@ body.mobile .framework-perseus table.perseus-widget-table-of-values.non-markdown
   list-style-type: none;
 }
 .perseus-math-input.mq-editable-field.mq-math-mode {
-  background: #fff;
+  background-color: transparent;
   font-size: 18px;
   min-width: 100px;
-  border-color: #a4a4a4;
-  border-radius: 5px;
+  border: unset;
+}
+.perseus-math-input.mq-editable-field.mq-math-mode.mq-focused {
+  box-shadow: unset;
 }
 .perseus-math-input.mq-editable-field.mq-math-mode > .mq-root-block {
   padding: 4px;