@khanacademy/math-input 12.1.1 → 13.0.0

package/dist/types.d.ts

@@ -41,6 +41,7 @@ export type KeyConfig = NonManyKeyConfig | ManyKeyConfig;
 export type KeypadConfiguration = {
     keypadType: KeypadType;
     extraKeys?: ReadonlyArray<Key>;
+    times?: boolean;
 };
 export type KeyHandler = (key: Key) => Cursor;
 export type Cursor = {

package/package.json

@@ -3,7 +3,7 @@
     "description": "Khan Academy's new expression editor for the mobile web.",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "12.1.1",
+    "version": "13.0.0",
     "publishConfig": {
         "access": "public"
     },

package/src/components/keypad/__tests__/__snapshots__/keypad.test.tsx.snap

@@ -175,6 +175,7 @@ exports[`keypad should snapshot expanded: first render 1`] = `
         >
           <div
             class="default_xu2jcg-o_O-inlineStyles_1c2q4k1"
+            data-test-id="NUM_1"
           >
             <button
               aria-disabled="false"
@@ -206,6 +207,7 @@ exports[`keypad should snapshot expanded: first render 1`] = `
           </div>
           <div
             class="default_xu2jcg-o_O-inlineStyles_4h080i"
+            data-test-id="NUM_2"
           >
             <button
               aria-disabled="false"
@@ -237,6 +239,7 @@ exports[`keypad should snapshot expanded: first render 1`] = `
           </div>
           <div
             class="default_xu2jcg-o_O-inlineStyles_ei5lhv"
+            data-test-id="NUM_3"
           >
             <button
               aria-disabled="false"
@@ -268,6 +271,7 @@ exports[`keypad should snapshot expanded: first render 1`] = `
           </div>
           <div
             class="default_xu2jcg-o_O-inlineStyles_1drshe8"
+            data-test-id="NUM_4"
           >
             <button
               aria-disabled="false"
@@ -299,6 +303,7 @@ exports[`keypad should snapshot expanded: first render 1`] = `
           </div>
           <div
             class="default_xu2jcg-o_O-inlineStyles_1j1cer"
+            data-test-id="NUM_5"
           >
             <button
               aria-disabled="false"
@@ -330,6 +335,7 @@ exports[`keypad should snapshot expanded: first render 1`] = `
           </div>
           <div
             class="default_xu2jcg-o_O-inlineStyles_1qj00wi"
+            data-test-id="NUM_6"
           >
             <button
               aria-disabled="false"
@@ -361,6 +367,7 @@ exports[`keypad should snapshot expanded: first render 1`] = `
           </div>
           <div
             class="default_xu2jcg-o_O-inlineStyles_1o7q2hf"
+            data-test-id="NUM_7"
           >
             <button
               aria-disabled="false"
@@ -392,6 +399,7 @@ exports[`keypad should snapshot expanded: first render 1`] = `
           </div>
           <div
             class="default_xu2jcg-o_O-inlineStyles_11fd5hs"
+            data-test-id="NUM_8"
           >
             <button
               aria-disabled="false"
@@ -423,6 +431,7 @@ exports[`keypad should snapshot expanded: first render 1`] = `
           </div>
           <div
             class="default_xu2jcg-o_O-inlineStyles_mr6jkh"
+            data-test-id="NUM_9"
           >
             <button
               aria-disabled="false"
@@ -454,6 +463,7 @@ exports[`keypad should snapshot expanded: first render 1`] = `
           </div>
           <div
             class="default_xu2jcg-o_O-inlineStyles_xra0eu"
+            data-test-id="NUM_0"
           >
             <button
               aria-disabled="false"
@@ -485,6 +495,7 @@ exports[`keypad should snapshot expanded: first render 1`] = `
           </div>
           <div
             class="default_xu2jcg-o_O-inlineStyles_6bvuz9"
+            data-test-id="DECIMAL"
           >
             <button
               aria-disabled="false"
@@ -516,6 +527,7 @@ exports[`keypad should snapshot expanded: first render 1`] = `
           </div>
           <div
             class="default_xu2jcg-o_O-inlineStyles_l02gwk"
+            data-test-id="NEGATIVE"
           >
             <button
               aria-disabled="false"
@@ -549,6 +561,7 @@ exports[`keypad should snapshot expanded: first render 1`] = `
           </div>
           <div
             class="default_xu2jcg-o_O-inlineStyles_ma0as6"
+            data-test-id="PERCENT"
           >
             <button
               aria-disabled="false"
@@ -582,6 +595,7 @@ exports[`keypad should snapshot expanded: first render 1`] = `
           </div>
           <div
             class="default_xu2jcg-o_O-inlineStyles_wb5o9j"
+            data-test-id="PLUS"
           >
             <button
               aria-disabled="false"
@@ -621,6 +635,7 @@ exports[`keypad should snapshot expanded: first render 1`] = `
           </div>
           <div
             class="default_xu2jcg-o_O-inlineStyles_9isr9w"
+            data-test-id="MINUS"
           >
             <button
               aria-disabled="false"
@@ -654,10 +669,11 @@ exports[`keypad should snapshot expanded: first render 1`] = `
           </div>
           <div
             class="default_xu2jcg-o_O-inlineStyles_771h91"
+            data-test-id="FRAC"
           >
             <button
               aria-disabled="false"
-              aria-label="Fraction, with current expression in numerator"
+              aria-label="Fraction, excluding the current expression"
               class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-clickable_rukhmf"
               type="button"
             >
@@ -687,6 +703,7 @@ exports[`keypad should snapshot expanded: first render 1`] = `
           </div>
           <div
             class="default_xu2jcg-o_O-inlineStyles_lv836c"
+            data-test-id="CDOT"
           >
             <button
               aria-disabled="false"
@@ -707,18 +724,27 @@ exports[`keypad should snapshot expanded: first render 1`] = `
                     width="40"
                     xmlns="http://www.w3.org/2000/svg"
                   >
-                    <path
-                      clip-rule="evenodd"
-                      d="M14.3432 14.3428c.3905-.3905 1.0237-.3905 1.4142 0l9.8995 9.8995c.3905.3906.3905 1.0237 0 1.4143-.3905.3905-1.0237.3905-1.4142 0l-9.8995-9.8995c-.3905-.3906-.3905-1.0237 0-1.4143z"
-                      fill="#21242C"
-                      fill-rule="evenodd"
-                    />
-                    <path
-                      clip-rule="evenodd"
-                      d="M14.3431 25.6573c-.3905-.3905-.3905-1.0237 0-1.4142l9.8995-9.8995c.3905-.3905 1.0237-.3905 1.4142 0 .3905.3905.3905 1.0237 0 1.4142l-9.8995 9.8995c-.3905.3905-1.0237.3905-1.4142 0z"
-                      fill="#21242C"
-                      fill-rule="evenodd"
-                    />
+                    <g
+                      clip-path="url(#clip0_874_41555)"
+                    >
+                      <circle
+                        cx="20"
+                        cy="20"
+                        fill="#21242C"
+                        r="1.5"
+                      />
+                    </g>
+                    <defs>
+                      <clippath
+                        id="clip0_874_41555"
+                      >
+                        <path
+                          d="M0 0h3v3H0z"
+                          fill="#fff"
+                          transform="translate(18.5 18.5)"
+                        />
+                      </clippath>
+                    </defs>
                   </svg>
                 </div>
               </div>
@@ -726,6 +752,7 @@ exports[`keypad should snapshot expanded: first render 1`] = `
           </div>
           <div
             class="default_xu2jcg-o_O-inlineStyles_k65qc5"
+            data-test-id="LEFT_PAREN"
           >
             <button
               aria-disabled="false"
@@ -759,6 +786,7 @@ exports[`keypad should snapshot expanded: first render 1`] = `
           </div>
           <div
             class="default_xu2jcg-o_O-inlineStyles_1bljvrq"
+            data-test-id="RIGHT_PAREN"
           >
             <button
               aria-disabled="false"
@@ -792,6 +820,7 @@ exports[`keypad should snapshot expanded: first render 1`] = `
           </div>
           <div
             class="default_xu2jcg-o_O-inlineStyles_y8g975"
+            data-test-id="BACKSPACE"
           >
             <button
               aria-disabled="false"
@@ -1199,6 +1228,7 @@ exports[`keypad should snapshot unexpanded: first render 1`] = `
         >
           <div
             class="default_xu2jcg-o_O-inlineStyles_1c2q4k1"
+            data-test-id="NUM_1"
           >
             <button
               aria-disabled="false"
@@ -1230,6 +1260,7 @@ exports[`keypad should snapshot unexpanded: first render 1`] = `
           </div>
           <div
             class="default_xu2jcg-o_O-inlineStyles_4h080i"
+            data-test-id="NUM_2"
           >
             <button
               aria-disabled="false"
@@ -1261,6 +1292,7 @@ exports[`keypad should snapshot unexpanded: first render 1`] = `
           </div>
           <div
             class="default_xu2jcg-o_O-inlineStyles_ei5lhv"
+            data-test-id="NUM_3"
           >
             <button
               aria-disabled="false"
@@ -1292,6 +1324,7 @@ exports[`keypad should snapshot unexpanded: first render 1`] = `
           </div>
           <div
             class="default_xu2jcg-o_O-inlineStyles_1drshe8"
+            data-test-id="NUM_4"
           >
             <button
               aria-disabled="false"
@@ -1323,6 +1356,7 @@ exports[`keypad should snapshot unexpanded: first render 1`] = `
           </div>
           <div
             class="default_xu2jcg-o_O-inlineStyles_1j1cer"
+            data-test-id="NUM_5"
           >
             <button
               aria-disabled="false"
@@ -1354,6 +1388,7 @@ exports[`keypad should snapshot unexpanded: first render 1`] = `
           </div>
           <div
             class="default_xu2jcg-o_O-inlineStyles_1qj00wi"
+            data-test-id="NUM_6"
           >
             <button
               aria-disabled="false"
@@ -1385,6 +1420,7 @@ exports[`keypad should snapshot unexpanded: first render 1`] = `
           </div>
           <div
             class="default_xu2jcg-o_O-inlineStyles_1o7q2hf"
+            data-test-id="NUM_7"
           >
             <button
               aria-disabled="false"
@@ -1416,6 +1452,7 @@ exports[`keypad should snapshot unexpanded: first render 1`] = `
           </div>
           <div
             class="default_xu2jcg-o_O-inlineStyles_11fd5hs"
+            data-test-id="NUM_8"
           >
             <button
               aria-disabled="false"
@@ -1447,6 +1484,7 @@ exports[`keypad should snapshot unexpanded: first render 1`] = `
           </div>
           <div
             class="default_xu2jcg-o_O-inlineStyles_mr6jkh"
+            data-test-id="NUM_9"
           >
             <button
               aria-disabled="false"
@@ -1478,6 +1516,7 @@ exports[`keypad should snapshot unexpanded: first render 1`] = `
           </div>
           <div
             class="default_xu2jcg-o_O-inlineStyles_xra0eu"
+            data-test-id="NUM_0"
           >
             <button
               aria-disabled="false"
@@ -1509,6 +1548,7 @@ exports[`keypad should snapshot unexpanded: first render 1`] = `
           </div>
           <div
             class="default_xu2jcg-o_O-inlineStyles_6bvuz9"
+            data-test-id="DECIMAL"
           >
             <button
               aria-disabled="false"
@@ -1540,6 +1580,7 @@ exports[`keypad should snapshot unexpanded: first render 1`] = `
           </div>
           <div
             class="default_xu2jcg-o_O-inlineStyles_l02gwk"
+            data-test-id="NEGATIVE"
           >
             <button
               aria-disabled="false"
@@ -1573,6 +1614,7 @@ exports[`keypad should snapshot unexpanded: first render 1`] = `
           </div>
           <div
             class="default_xu2jcg-o_O-inlineStyles_ma0as6"
+            data-test-id="PERCENT"
           >
             <button
               aria-disabled="false"
@@ -1606,6 +1648,7 @@ exports[`keypad should snapshot unexpanded: first render 1`] = `
           </div>
           <div
             class="default_xu2jcg-o_O-inlineStyles_wb5o9j"
+            data-test-id="PLUS"
           >
             <button
               aria-disabled="false"
@@ -1645,6 +1688,7 @@ exports[`keypad should snapshot unexpanded: first render 1`] = `
           </div>
           <div
             class="default_xu2jcg-o_O-inlineStyles_9isr9w"
+            data-test-id="MINUS"
           >
             <button
               aria-disabled="false"
@@ -1678,10 +1722,11 @@ exports[`keypad should snapshot unexpanded: first render 1`] = `
           </div>
           <div
             class="default_xu2jcg-o_O-inlineStyles_771h91"
+            data-test-id="FRAC"
           >
             <button
               aria-disabled="false"
-              aria-label="Fraction, with current expression in numerator"
+              aria-label="Fraction, excluding the current expression"
               class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-clickable_rukhmf"
               type="button"
             >
@@ -1711,6 +1756,7 @@ exports[`keypad should snapshot unexpanded: first render 1`] = `
           </div>
           <div
             class="default_xu2jcg-o_O-inlineStyles_lv836c"
+            data-test-id="CDOT"
           >
             <button
               aria-disabled="false"
@@ -1731,18 +1777,27 @@ exports[`keypad should snapshot unexpanded: first render 1`] = `
                     width="40"
                     xmlns="http://www.w3.org/2000/svg"
                   >
-                    <path
-                      clip-rule="evenodd"
-                      d="M14.3432 14.3428c.3905-.3905 1.0237-.3905 1.4142 0l9.8995 9.8995c.3905.3906.3905 1.0237 0 1.4143-.3905.3905-1.0237.3905-1.4142 0l-9.8995-9.8995c-.3905-.3906-.3905-1.0237 0-1.4143z"
-                      fill="#21242C"
-                      fill-rule="evenodd"
-                    />
-                    <path
-                      clip-rule="evenodd"
-                      d="M14.3431 25.6573c-.3905-.3905-.3905-1.0237 0-1.4142l9.8995-9.8995c.3905-.3905 1.0237-.3905 1.4142 0 .3905.3905.3905 1.0237 0 1.4142l-9.8995 9.8995c-.3905.3905-1.0237.3905-1.4142 0z"
-                      fill="#21242C"
-                      fill-rule="evenodd"
-                    />
+                    <g
+                      clip-path="url(#clip0_874_41555)"
+                    >
+                      <circle
+                        cx="20"
+                        cy="20"
+                        fill="#21242C"
+                        r="1.5"
+                      />
+                    </g>
+                    <defs>
+                      <clippath
+                        id="clip0_874_41555"
+                      >
+                        <path
+                          d="M0 0h3v3H0z"
+                          fill="#fff"
+                          transform="translate(18.5 18.5)"
+                        />
+                      </clippath>
+                    </defs>
                   </svg>
                 </div>
               </div>
@@ -1750,6 +1805,7 @@ exports[`keypad should snapshot unexpanded: first render 1`] = `
           </div>
           <div
             class="default_xu2jcg-o_O-inlineStyles_k65qc5"
+            data-test-id="LEFT_PAREN"
           >
             <button
               aria-disabled="false"
@@ -1783,6 +1839,7 @@ exports[`keypad should snapshot unexpanded: first render 1`] = `
           </div>
           <div
             class="default_xu2jcg-o_O-inlineStyles_1bljvrq"
+            data-test-id="RIGHT_PAREN"
           >
             <button
               aria-disabled="false"
@@ -1816,6 +1873,7 @@ exports[`keypad should snapshot unexpanded: first render 1`] = `
           </div>
           <div
             class="default_xu2jcg-o_O-inlineStyles_y8g975"
+            data-test-id="BACKSPACE"
           >
             <button
               aria-disabled="false"

package/src/components/keypad/__tests__/keypad-v2-mathquill.test.tsx

@@ -72,7 +72,7 @@ function V2KeypadWithMathquill(props: Props) {
                             basicRelations
                             divisionKey
                             logarithms
-                            multiplicationDot
+                            convertDotToTimes
                             preAlgebra
                             trigonometry
                             onAnalyticsEvent={

package/src/components/keypad/__tests__/keypad.test.tsx

@@ -116,6 +116,36 @@ describe("keypad", () => {
         ).not.toBeInTheDocument();
     });
 
+    it(`shows the dot symbol when convertDotToTimes is false`, () => {
+        // Arrange
+        // Act
+        render(
+            <Keypad
+                onClickKey={() => {}}
+                convertDotToTimes={false}
+                onAnalyticsEvent={async () => {}}
+            />,
+        );
+
+        // Assert
+        expect(screen.getByTestId("CDOT")).toBeInTheDocument();
+    });
+
+    it(`shows the times symbol when convertDotToTimes is true`, () => {
+        // Arrange
+        // Act
+        render(
+            <Keypad
+                onClickKey={() => {}}
+                convertDotToTimes={true}
+                onAnalyticsEvent={async () => {}}
+            />,
+        );
+
+        // Assert
+        expect(screen.getByTestId("TIMES")).toBeInTheDocument();
+    });
+
     it(`hides the tabs if providing the Fraction Keypad`, () => {
         // Arrange
         // Act

package/src/components/keypad/keypad-button.tsx

@@ -38,6 +38,9 @@ export const KeypadButton = ({
                 gridRow: coord[1] + 1,
                 ...style,
             }}
+            // Unfortunately the CDOT and TIMES buttons are identical in the DOM
+            // apart from the ICON SVG, so we need to use testId.
+            testId={keyConfig.id}
         >
             <Clickable
                 onClick={(e) => onClickKey(keyConfig.id, e)}

package/src/components/keypad/keypad-mathquill.stories.tsx

@@ -78,7 +78,7 @@ export function V2KeypadWithMathquill() {
                             basicRelations
                             divisionKey
                             logarithms
-                            multiplicationDot
+                            convertDotToTimes
                             preAlgebra
                             trigonometry
                             onAnalyticsEvent={async (event) => {

package/src/components/keypad/keypad.stories.tsx

@@ -27,7 +27,7 @@ export default {
         divisionKey: false,
         logarithms: false,
         fractionsOnly: false,
-        multiplicationDot: false,
+        convertDotToTimes: false,
         preAlgebra: false,
         trigonometry: false,
         sendEvent: () => {},
@@ -113,7 +113,7 @@ Everything.args = {
     basicRelations: true,
     divisionKey: true,
     logarithms: true,
-    multiplicationDot: false,
+    convertDotToTimes: false,
     preAlgebra: true,
     trigonometry: true,
     expandedView: true,

package/src/components/keypad/keypad.tsx

@@ -26,7 +26,7 @@ export type Props = {
     showDismiss?: boolean;
     expandedView?: boolean;
 
-    multiplicationDot?: boolean;
+    convertDotToTimes?: boolean;
     divisionKey?: boolean;
     trigonometry?: boolean;
     preAlgebra?: boolean;
@@ -88,7 +88,7 @@ export default function Keypad(props: Props) {
         onClickKey,
         cursorContext,
         extraKeys,
-        multiplicationDot,
+        convertDotToTimes,
         divisionKey,
         preAlgebra,
         logarithms,
@@ -186,7 +186,7 @@ export default function Keypad(props: Props) {
                             <SharedKeys
                                 onClickKey={onClickKey}
                                 cursorContext={cursorContext}
-                                multiplicationDot={multiplicationDot}
+                                convertDotToTimes={convertDotToTimes}
                                 divisionKey={divisionKey}
                                 selectedPage={selectedPage}
                             />

package/src/components/keypad/mobile-keypad.tsx

@@ -39,6 +39,7 @@ type Props = {
 type State = {
     active: boolean;
     containerWidth: number;
+    hasBeenActivated: boolean;
     keypadConfig?: KeypadConfiguration;
     keyHandler?: KeyHandler;
     cursor?: Cursor;
@@ -53,6 +54,7 @@ class MobileKeypad extends React.Component<Props, State> implements KeypadAPI {
     state: State = {
         active: false,
         containerWidth: 0,
+        hasBeenActivated: false,
     };
 
     componentDidMount() {
@@ -107,7 +109,10 @@ class MobileKeypad extends React.Component<Props, State> implements KeypadAPI {
     };
 
     activate: () => void = () => {
-        this.setState({active: true});
+        this.setState({
+            active: true,
+            hasBeenActivated: true,
+        });
     };
 
     dismiss: () => void = () => {
@@ -158,7 +163,8 @@ class MobileKeypad extends React.Component<Props, State> implements KeypadAPI {
 
     render(): React.ReactNode {
         const {style} = this.props;
-        const {active, containerWidth, cursor, keypadConfig} = this.state;
+        const {active, hasBeenActivated, containerWidth, cursor, keypadConfig} =
+            this.state;
 
         const containerStyle = [
             // internal styles
@@ -168,11 +174,22 @@ class MobileKeypad extends React.Component<Props, State> implements KeypadAPI {
             ...(Array.isArray(style) ? style : [style]),
         ];
 
+        // If the keypad is yet to have ever been activated, we keep it invisible
+        // so as to avoid, e.g., the keypad flashing at the bottom of the page
+        // during the initial render.
+        // Done inline (dynamicStyle) since stylesheets might not be loaded yet.
+        let dynamicStyle = {};
+        if (!active && !hasBeenActivated) {
+            dynamicStyle = {visibility: "hidden"};
+        }
+
         const isExpression = keypadConfig?.keypadType === "EXPRESSION";
+        const convertDotToTimes = keypadConfig?.times;
 
         return (
             <View
                 style={containerStyle}
+                dynamicStyle={dynamicStyle}
                 forwardRef={this._containerRef}
                 ref={(element) => {
                     if (!this.hasMounted && element) {
@@ -203,7 +220,7 @@ class MobileKeypad extends React.Component<Props, State> implements KeypadAPI {
                     onClickKey={(key) => this._handleClickKey(key)}
                     cursorContext={cursor?.context}
                     fractionsOnly={!isExpression}
-                    multiplicationDot={isExpression}
+                    convertDotToTimes={convertDotToTimes}
                     divisionKey={isExpression}
                     trigonometry={isExpression}
                     preAlgebra={isExpression}

package/src/components/keypad/shared-keys.tsx

@@ -12,7 +12,7 @@ type Props = {
     onClickKey: ClickKeyCallback;
     selectedPage: KeypadPageType;
     cursorContext?: typeof CursorContext[keyof typeof CursorContext];
-    multiplicationDot?: boolean;
+    convertDotToTimes?: boolean;
     divisionKey?: boolean;
 };
 
@@ -21,7 +21,7 @@ export default function SharedKeys(props: Props) {
         onClickKey,
         cursorContext,
         divisionKey,
-        multiplicationDot,
+        convertDotToTimes,
         selectedPage,
     } = props;
 
@@ -48,7 +48,7 @@ export default function SharedKeys(props: Props) {
                 secondary
             />
             <KeypadButton
-                keyConfig={Keys.FRAC_INCLUSIVE}
+                keyConfig={Keys.FRAC}
                 onClickKey={onClickKey}
                 coord={fractionCoord}
                 secondary
@@ -56,7 +56,7 @@ export default function SharedKeys(props: Props) {
 
             {/* Row 2 */}
             <KeypadButton
-                keyConfig={multiplicationDot ? Keys.CDOT : Keys.TIMES}
+                keyConfig={convertDotToTimes ? Keys.TIMES : Keys.CDOT}
                 onClickKey={onClickKey}
                 coord={[4, 1]}
                 secondary