@khanacademy/math-input 4.3.1 → 5.0.0

package/dist/index.js

@@ -447,6 +447,12 @@ function createMathField(container, configCallback) {
   return mathQuillInstance.MathField(container, config);
 }
 
+/**
+ * Editable math fields have all of the above methods in addition to
+ * the ones listed here.
+ * https://docs.mathquill.com/en/latest/Api_Methods/
+ */
+
 let MathFieldActionType = /*#__PURE__*/function (MathFieldActionType) {
   MathFieldActionType["WRITE"] = "write";
   MathFieldActionType["CMD"] = "cmd";
@@ -455,9 +461,11 @@ let MathFieldActionType = /*#__PURE__*/function (MathFieldActionType) {
   return MathFieldActionType;
 }({});
 
-// The MathQuill MathField Cursor
-// it's not part of the public API for MathQuill,
-// we reach into the internals to get it
+/**
+ * The MathQuill MathField Cursor
+ * it's not part of the public API for MathQuill,
+ * we reach into the internals to get it
+ */
 
 const Numerals = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
 const GreekLetters = ["\\theta", "\\pi"];
@@ -625,8 +633,13 @@ function maybeFindCommand(initialNode) {
 function maybeFindCommandBeforeParens(leftParenNode) {
   return maybeFindCommand(leftParenNode[mathQuillInstance.L]);
 }
-function contextForCursor(cursor) {
+function getCursorContext(mathField) {
+  if (!mathField) {
+    return CursorContext.NONE;
+  }
+
   // First, try to find any fraction to the right, unimpeded.
+  const cursor = getCursor(mathField);
   let visitor = cursor;
   while (visitor[mathQuillInstance.R] !== MathFieldActionType.MQ_END) {
     if (isFraction(visitor[mathQuillInstance.R])) {
@@ -1048,7 +1061,7 @@ const KeysForJumpContext = {
  */
 function handleJumpOut(mathField, key) {
   const cursor = getCursor(mathField);
-  const context = contextForCursor(cursor);
+  const context = getCursorContext(mathField);
 
   // Validate that the current cursor context matches the key's intent.
   if (KeysForJumpContext[context] !== key) {
@@ -1064,6 +1077,7 @@ function handleJumpOut(mathField, key) {
       // Insert at the end of the parentheses, and then navigate right
       // once more to get 'beyond' the parentheses.
       cursor.insRightOf(cursor.parent.parent);
+      mathField.keystroke("Right");
       break;
     case CursorContext.BEFORE_FRACTION:
       // Find the nearest fraction to the right of the cursor.
@@ -1386,7 +1400,7 @@ class MathWrapper {
     // on the MathField, as that handler isn't triggered on navigation
     // events.
     return {
-      context: this.contextForCursor(cursor)
+      context: this.contextForCursor()
     };
   }
 
@@ -1427,7 +1441,7 @@ class MathWrapper {
       }
       if (this.callbacks.onCursorMove) {
         this.callbacks.onCursorMove({
-          context: this.contextForCursor(cursor)
+          context: this.contextForCursor()
         });
       }
     }
@@ -1441,8 +1455,8 @@ class MathWrapper {
 
   // note(Matthew): extracted this logic to keep this file focused,
   // but it's part of the public MathWrapper API
-  contextForCursor(cursor) {
-    return contextForCursor(cursor);
+  contextForCursor() {
+    return getCursorContext(this.mathField);
   }
   getSelection() {
     return this.getCursor().selection;
@@ -1797,7 +1811,7 @@ class MathInput extends React__namespace.Component {
       }
       // In that event, we need to update the cursor context ourselves.
       this.props.keypadElement && this.props.keypadElement.setCursor({
-        context: this.mathField.contextForCursor(cursor)
+        context: this.mathField.contextForCursor()
       });
     });
     _defineProperty(this, "handleTouchStart", e => {
@@ -4941,26 +4955,44 @@ const IconAsset = function (_ref) {
     case "Extras":
       {
         return /*#__PURE__*/React__namespace.createElement("svg", {
+          xmlns: "http://www.w3.org/2000/svg",
           width: "32",
           height: "32",
-          viewBox: "0 0 32 32",
           fill: "none",
-          xmlns: "http://www.w3.org/2000/svg"
+          viewBox: "0 0 32 32"
         }, /*#__PURE__*/React__namespace.createElement("g", {
-          clipPath: "url(#clip0_4011_87172)",
-          fillRule: "evenodd",
-          clipRule: "evenodd",
-          fill: tintColor
+          clipPath: "url(#a)"
         }, /*#__PURE__*/React__namespace.createElement("path", {
-          d: "M6.96605 10.5663c.21528-.0308.38682-.0477.50829-.0477.56911 0 1.09298.1467 1.56707.4407.38228.2296.68532.5084.90301.838.09208-.1207.15248-.2002.18138-.2387l.0047-.0063.0052-.0059c.5949-.6753 1.2944-1.0278 2.093-1.0278.6647 0 1.2196.1954 1.6441.6014.4361.3871.6588.8746.6588 1.45 0 .513-.1499.9563-.4578 1.3166-.3.3693-.7089.552-1.2051.552-.3307 0-.6179-.097-.8437-.304-.2288-.2097-.3392-.4865-.3392-.8103 0-.3888.1066-.7297.3291-1.0101.1474-.1857.3402-.3379.5729-.4597-.1089-.0413-.2631-.0674-.4734-.0674-.1874 0-.3034.0147-.3645.0334-.5098.2175-.9018.667-1.1616 1.3887l-.0009.0025c-.0181.0482-.0814.2776-.1937.7113-.1103.4259-.2644 1.0348-.46245 1.827-.398 1.5767-.60776 2.4474-.63636 2.6333l-.00136.0089c-.04319.2159-.06489.4313-.06489.6465 0 .3246.09331.559.26143.7271.16975.1698.39759.2614.70433.2614.5767 0 1.1059-.2376 1.5927-.7383.4978-.5273.8301-1.1009 1.0032-1.7212l.0011-.0037c.0246-.0819.0521-.156.0846-.2154.0241-.0443.0711-.1194.1545-.1578.0615-.0338.1345-.0465.1905-.0535.0726-.0091.1619-.013.2648-.013.1528 0 .2937.0152.4034.0614.0569.024.1156.0605.1606.1174.0474.0598.0703.1308.0703.2041 0 .022-.0038.0459-.0052.0547-.0023.015-.0055.0337-.0094.0554-.008.0436-.0197.104-.035.1806l-.0027.0138c-.2705.9863-.8277 1.8422-1.6623 2.5666l-.0072.0063c-.746.5872-1.5429.8884-2.3868.8884-1.03863 0-1.85432-.4315-2.43176-1.277-.43549.5807-.97515.9834-1.61932 1.1981l-.00979.0033-.01007.0022c-.15865.0353-.37406.0505-.63768.0505-.93641 0-1.63679-.3356-2.04681-1.0359C3.08287 19.9196 3 19.5787 3 19.1987c0-.5006.1515-.9365.45958-1.2959.31283-.365.71906-.5499 1.2033-.5499.35729 0 .6622.0872.87689.2969.21557.2106.30597.5111.30597.8631 0 .3146-.07482.5975-.23217.8402-.15675.2419-.38726.4314-.67931.5735-.00496.0025-.01055.0055-.01678.0089.15188.0606.31779.0917.49969.0917.44797 0 .86602-.2744 1.24399-.9286l.00246-.0043c.06785-.111.17746-.4008.32772-.9017.14728-.4909.32737-1.1618.5404-2.0139l.0005-.002c.09122-.3497.19011-.7376.29665-1.1637.10644-.4258.18171-.7498.22648-.9736l.00249-.0124c.05541-.2078.09408-.3468.11359-.4088.07445-.404.10861-.6812.10861-.8425 0-.3287-.08814-.5649-.2437-.7325-.15265-.1644-.36917-.2561-.67631-.2561-.62654 0-1.16936.2409-1.63736.7372l-.00199.0022c-.47891.4934-.81198 1.0647-1.00116 1.7162-.0166.0733-.03697.141-.06317.1987-.02519.0554-.06558.1237-.13399.1693l-.01036.0069-.01113.0056c-.03837.0192-.07945.0259-.09978.0289-.02704.0041-.05815.0069-.09148.009-.06706.0042-.15565.0061-.26391.0061h-.40284l-.05858-.0586c-.10441-.1044-.19572-.2369-.19572-.3929v-.0147l.00216-.0146c.06726-.454.32204-1.0087.73818-1.656l.00145-.0022c.74101-1.1194 1.68544-1.7837 2.83334-1.9616l.00234-.0003zM20.9726 10.5186h10.0353c.2631 0 .5155.1045.7016.2906.1861.1861.2906.4384.2906.7016s-.1045.5156-.2906.7016c-.1861.1861-.4385.2907-.7016.2907h-2.705v6.138c0 .2272.0902.445.2508.6056.1606.1606.3784.2508.6056.2508.2271 0 .4449-.0902.6055-.2508.1606-.1606.2508-.3784.2508-.6056 0-.2631.1045-.5155.2906-.7016.1861-.1861.4385-.2906.7017-.2906.2631 0 .5155.1045.7016.2906.1861.1861.2906.4385.2906.7016 0 .7535-.2993 1.4761-.8321 2.0088-.5327.5328-1.2553.8321-2.0087.8321-.7535 0-1.4761-.2993-2.0088-.8321-.5328-.5327-.8321-1.2553-.8321-2.0088v-6.138h-3.2972v7.9867c0 .2631-.1046.5155-.2906.7016-.1861.1861-.4385.2906-.7017.2906-.2631 0-.5155-.1045-.7016-.2906-.1861-.1861-.2906-.4385-.2906-.7016v-7.9867h-.0641c-.5773 0-1.131.2293-1.5392.6375-.4083.4083-.6376.9619-.6376 1.5393 0 .2631-.1045.5155-.2906.7016-.1861.1861-.4385.2906-.7017.2906-.2631 0-.5155-.1045-.7016-.2906-.1861-.1861-.2906-.4385-.2906-.7016.0013-1.1032.4401-2.1611 1.2201-2.9412.7801-.7801 1.838-1.2189 2.9412-1.2201z"
+          fill: tintColor,
+          fillRule: "evenodd",
+          d: "M6.127 10.454c.224-.032.403-.05.53-.05.591 0 1.137.153 1.63.459.398.239.713.529.94.872l.188-.248.005-.007.006-.006c.619-.703 1.347-1.07 2.178-1.07.691 0 1.269.204 1.71.626.454.403.686.91.686 1.51 0 .533-.156.994-.476 1.37-.312.383-.738.574-1.254.574-.345 0-.643-.101-.878-.317a1.1 1.1 0 0 1-.353-.843c0-.405.11-.76.342-1.051.153-.193.354-.352.596-.479a1.416 1.416 0 0 0-.492-.07c-.195 0-.316.016-.38.035-.53.226-.938.694-1.208 1.445l-.001.003c-.02.05-.085.289-.202.74-.115.443-.275 1.077-.481 1.901-.414 1.641-.633 2.547-.662 2.74l-.002.01a3.423 3.423 0 0 0-.067.673c0 .337.097.581.272.756.176.177.413.272.733.272.6 0 1.15-.247 1.657-.768.518-.549.864-1.146 1.044-1.791l.001-.004a1.2 1.2 0 0 1 .088-.224.368.368 0 0 1 .161-.164.564.564 0 0 1 .198-.056 2.19 2.19 0 0 1 .276-.014c.159 0 .305.016.42.064.059.025.12.063.167.122.05.063.073.137.073.213 0 .023-.004.048-.005.057a12.52 12.52 0 0 1-.046.245l-.004.015c-.281 1.026-.86 1.917-1.73 2.67l-.007.007c-.776.611-1.605.925-2.484.925-1.08 0-1.93-.45-2.53-1.33-.453.605-1.015 1.024-1.685 1.248l-.01.003-.011.002a3.23 3.23 0 0 1-.664.053c-.974 0-1.703-.35-2.13-1.078A2.05 2.05 0 0 1 2 19.437c0-.52.158-.975.478-1.349.326-.38.749-.572 1.252-.572.372 0 .69.091.913.31.224.218.318.531.318.898 0 .327-.078.621-.241.874a1.706 1.706 0 0 1-.707.597l-.018.009c.158.063.331.095.52.095.467 0 .902-.285 1.295-.966l.002-.005c.071-.115.185-.417.341-.938.154-.51.341-1.209.563-2.096v-.002c.095-.364.198-.767.31-1.21.11-.444.188-.78.235-1.014l.002-.013c.058-.216.098-.36.119-.425.077-.42.113-.709.113-.877 0-.342-.092-.588-.254-.762-.159-.171-.384-.267-.704-.267-.652 0-1.217.251-1.704.768l-.002.002A4.215 4.215 0 0 0 3.79 14.28a1.084 1.084 0 0 1-.065.207.41.41 0 0 1-.14.176l-.01.007-.012.006a.35.35 0 0 1-.104.03 1.16 1.16 0 0 1-.095.01 5.04 5.04 0 0 1-.275.006H2.67l-.061-.061c-.109-.11-.204-.247-.204-.41v-.015l.003-.015c.07-.472.335-1.05.768-1.723l.001-.002c.771-1.165 1.754-1.857 2.949-2.042h.002Z",
+          clipRule: "evenodd"
+        }), /*#__PURE__*/React__namespace.createElement("path", {
+          fill: tintColor,
+          d: "M21.084 10.284c.932-.008 2.301-.013 4.107-.013 1.325 0 2.327.003 3.007.007a75.812 75.812 0 0 1 .99.013c.025 0 .047.002.065.003h.002c.01 0 .04.003.067.01l.01.002.011.004c.201.07.37.183.488.347a.966.966 0 0 1 .169.574c0 .3-.078.568-.248.79-.168.221-.411.377-.708.479h-.002a1.01 1.01 0 0 1-.221.034 8.213 8.213 0 0 1-.35.016c-.29.008-.696.012-1.219.012h-1.39l-.038.223v.001c-.198 1.185-.295 2.156-.295 2.916 0 1.446.251 2.746.75 3.905l.004.007c.059.153.105.284.137.393.03.103.053.205.053.29 0 .359-.16.68-.44.961-.278.296-.63.445-1.041.445-.255 0-.492-.03-.654-.139l-.009-.006-.008-.006c-.126-.101-.236-.274-.338-.477l-.006-.012c-.331-.768-.49-1.722-.49-2.852 0-.595.007-1.002.025-1.212v-.005c.118-1.157.377-2.551.776-4.18v-.002c.024-.096.045-.18.061-.25h-1.948c-.008.038-.02.086-.034.143l-.002.007a35.14 35.14 0 0 0-.146.537c-.05.232-.1.448-.15.648v.001a230.673 230.673 0 0 1-1.312 4.936 41.285 41.285 0 0 1-.411 1.384c-.104.322-.19.557-.256.681-.115.262-.28.473-.5.617-.225.146-.49.212-.783.212-.449 0-.807-.173-1.006-.549l-.006-.011-.005-.012a1.37 1.37 0 0 1-.067-.486v-.326l.346-.745c1.24-2.61 2.136-4.858 2.695-6.747l.002-.008.094-.281h-.463c-.662 0-1.105.025-1.346.07-.198.04-.47.173-.824.43l-.007.005-.007.005c-.366.228-.69.542-.97.947-.044.069-.085.13-.125.18a.651.651 0 0 1-.141.136l-.027.017-.03.01a.8.8 0 0 1-.19.03c-.07.005-.156.008-.258.008-.17 0-.335-.021-.465-.09a.437.437 0 0 1-.216-.546c.014-.042.034-.086.057-.132.047-.093.113-.208.198-.343l.003-.005c1.147-1.745 2.311-2.774 3.508-2.96a2.345 2.345 0 0 1 .158-.015 60.295 60.295 0 0 1 1.369-.026Z"
         })), /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
-          id: "clip0_4011_87172"
+          id: "a"
         }, /*#__PURE__*/React__namespace.createElement("path", {
           fill: "#fff",
-          transform: "translate(3 10.5186)",
-          d: "M0 0h29v10.9635H0z"
+          d: "M0 0h28v11.457H0z",
+          transform: "translate(2 10.271)"
         }))));
       }
+    case "Dismiss":
+      {
+        return /*#__PURE__*/React__namespace.createElement("svg", {
+          width: "44",
+          height: "44",
+          viewBox: "0 0 44 44",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg"
+        }, /*#__PURE__*/React__namespace.createElement("path", {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M28.7071 15.2929C28.3166 14.9024 27.6834 14.9024 27.2929 15.2929L22 20.5858L16.7071 15.2929C16.3166 14.9024 15.6834 14.9024 15.2929 15.2929C14.9024 15.6834 14.9024 16.3166 15.2929 16.7071L20.5858 22L15.2929 27.2929C14.9024 27.6834 14.9024 28.3166 15.2929 28.7071C15.6834 29.0976 16.3166 29.0976 16.7071 28.7071L22 23.4142L27.2929 28.7071C27.6834 29.0976 28.3166 29.0976 28.7071 28.7071C29.0976 28.3166 29.0976 27.6834 28.7071 27.2929L23.4142 22L28.7071 16.7071C29.0976 16.3166 29.0976 15.6834 28.7071 15.2929Z",
+          fill: tintColor
+        }));
+      }
     default:
       {
         // type as never;
@@ -5034,7 +5066,9 @@ class TabbarItem extends React__namespace.Component {
     return /*#__PURE__*/React__namespace.createElement(Clickable__default["default"], {
       onClick: onClick,
       disabled: itemState === "disabled",
-      "aria-label": itemType
+      "aria-label": itemType,
+      "aria-selected": itemState === "active",
+      role: "tab"
     }, _ref => {
       let {
         hovered,
@@ -5062,19 +5096,28 @@ const styles$7 = aphrodite.StyleSheet.create({
   tabbar: {
     display: "flex",
     flexDirection: "row",
+    justifyContent: "space-between",
     paddingTop: 2,
     paddingBottom: 2
+  },
+  pages: {
+    display: "flex",
+    flexDirection: "row"
   }
 });
 function Tabbar(props) {
   const {
     items,
+    onClickClose,
     selectedItem,
     onSelectItem,
     style
   } = props;
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$7.tabbar, style]
+    style: [styles$7.tabbar, style],
+    role: "tablist"
+  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: [styles$7.pages]
   }, items.map(item => /*#__PURE__*/React__namespace.createElement(TabbarItem, {
     key: "tabbar-item-".concat(item),
     itemState: item === selectedItem ? "active" : "inactive",
@@ -5082,6 +5125,10 @@ function Tabbar(props) {
     onClick: () => {
       onSelectItem(item);
     }
+  }))), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, onClickClose && /*#__PURE__*/React__namespace.createElement(TabbarItem, {
+    itemState: "inactive",
+    itemType: "Dismiss",
+    onClick: onClickClose
   })));
 }
 
@@ -8075,12 +8122,15 @@ function ButtonAsset(_ref) {
     case "PERCENT":
       return /*#__PURE__*/React__namespace.createElement("svg", {
         xmlns: "http://www.w3.org/2000/svg",
-        width: "20",
-        height: "20",
-        fill: "currentColor",
-        viewBox: "0 0 256 256"
+        width: "40",
+        height: "40",
+        fill: "none",
+        viewBox: "0 0 40 40"
       }, /*#__PURE__*/React__namespace.createElement("path", {
-        d: "M205.66,61.64l-144,144a8,8,0,0,1-11.32-11.32l144-144a8,8,0,0,1,11.32,11.31ZM50.54,101.44a36,36,0,0,1,50.92-50.91h0a36,36,0,0,1-50.92,50.91ZM56,76A20,20,0,1,0,90.14,61.84h0A20,20,0,0,0,56,76ZM216,180a36,36,0,1,1-10.54-25.46h0A35.76,35.76,0,0,1,216,180Zm-16,0a20,20,0,1,0-5.86,14.14A19.87,19.87,0,0,0,200,180Z"
+        fill: "currentColor",
+        fillRule: "evenodd",
+        d: "M24.447 11.106a1 1 0 0 1 .447 1.341l-8 16a1 1 0 1 1-1.788-.894l8-16a1 1 0 0 1 1.341-.447ZM15 13a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm-4 2a4 4 0 1 1 8 0 4 4 0 0 1-8 0Zm12 10a2 2 0 1 1 4 0 2 2 0 0 1-4 0Zm2-4a4 4 0 1 0 0 8 4 4 0 0 0 0-8Z",
+        clipRule: "evenodd"
       }));
     case "PI":
       return /*#__PURE__*/React__namespace.createElement("svg", {
@@ -8162,6 +8212,28 @@ function ButtonAsset(_ref) {
         d: "M9 9c-.55228 0-1 .44772-1 1v6c0 .5523.44772 1 1 1h6c.5523 0 1-.4477 1-1v-6c0-.55228-.4477-1-1-1H9zm5 2h-4v4h4v-4z",
         fill: "#21242C"
       }));
+    case "JUMP_OUT_BASE":
+      return /*#__PURE__*/React__namespace.createElement("svg", {
+        width: "40",
+        height: "40",
+        viewBox: "0 0 40 40",
+        fill: "none",
+        style: {
+          display: "block",
+          transform: "scale(1,-1)"
+        },
+        xmlns: "http://www.w3.org/2000/svg"
+      }, /*#__PURE__*/React__namespace.createElement("path", {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M18.2929 15.2929c.3905-.3905 1.0237-.3905 1.4142 0L26 21.5858V20c0-.5523.4477-1 1-1s1 .4477 1 1v4.003c-.0004.1345-.0273.2627-.0759.3798-.0477.1152-.1178.2234-.2105.3177a.809004.809004 0 01-.0131.0131c-.1797.1765-.4259.2856-.6975.2864H23c-.5523 0-1-.4477-1-1s.4477-1 1-1h1.5858l-6.2929-6.2929c-.3905-.3905-.3905-1.0237 0-1.4142zM31 33c-.5523 0-1-.4477-1-1V16c0-.5523.4477-1 1-1s1 .4477 1 1v16c0 .5523-.4477 1-1 1z",
+        fill: "#1865F2"
+      }), /*#__PURE__*/React__namespace.createElement("path", {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M9 9c-.55228 0-1 .44772-1 1v6c0 .5523.44772 1 1 1h6c.5523 0 1-.4477 1-1v-6c0-.55228-.4477-1-1-1H9zm5 2h-4v4h4v-4z",
+        fill: "#21242C"
+      }));
     case "JUMP_INTO_NUMERATOR":
       return /*#__PURE__*/React__namespace.createElement("svg", {
         width: "40",
@@ -8275,7 +8347,6 @@ function ButtonAsset(_ref) {
     case "DOWN":
     case "LEFT":
     case "RIGHT":
-    case "JUMP_OUT_BASE":
     case "PHI":
     case "NTHROOT3":
     case "POW":
@@ -8444,7 +8515,7 @@ const styles$1 = aphrodite.StyleSheet.create({
   }
 });
 
-const columns = 4;
+const columns = 3;
 function ExtrasPage(props) {
   const {
     extraKeys,
@@ -8486,18 +8557,21 @@ function NumbersPage(props) {
   const {
     onClickKey
   } = props;
+  // These keys are arranged sequentially so that tabbing follows numerical order. This
+  // allows us to visually mimic a keypad without affecting a11y. The visual order of the
+  // keys in the keypad is determined by their coordinates, not their order in the DOM.
   return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.NUM_7,
+    keyConfig: KeyConfigs.NUM_1,
     onClickKey: onClickKey,
-    coord: [0, 0]
+    coord: [0, 2]
   }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.NUM_8,
+    keyConfig: KeyConfigs.NUM_2,
     onClickKey: onClickKey,
-    coord: [1, 0]
+    coord: [1, 2]
   }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.NUM_9,
+    keyConfig: KeyConfigs.NUM_3,
     onClickKey: onClickKey,
-    coord: [2, 0]
+    coord: [2, 2]
   }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
     keyConfig: KeyConfigs.NUM_4,
     onClickKey: onClickKey,
@@ -8511,17 +8585,17 @@ function NumbersPage(props) {
     onClickKey: onClickKey,
     coord: [2, 1]
   }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.NUM_1,
+    keyConfig: KeyConfigs.NUM_7,
     onClickKey: onClickKey,
-    coord: [0, 2]
+    coord: [0, 0]
   }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.NUM_2,
+    keyConfig: KeyConfigs.NUM_8,
     onClickKey: onClickKey,
-    coord: [1, 2]
+    coord: [1, 0]
   }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.NUM_3,
+    keyConfig: KeyConfigs.NUM_9,
     onClickKey: onClickKey,
-    coord: [2, 2]
+    coord: [2, 0]
   }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
     keyConfig: KeyConfigs.NUM_0,
     onClickKey: onClickKey,
@@ -8534,6 +8608,11 @@ function NumbersPage(props) {
     keyConfig: KeyConfigs.NEGATIVE,
     onClickKey: onClickKey,
     coord: [2, 3]
+  }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.PERCENT,
+    onClickKey: onClickKey,
+    coord: [3, 0],
+    secondary: true
   }));
 }
 
@@ -8600,12 +8679,39 @@ function OperatorsPage(props) {
   })));
 }
 
+function getCursorContextConfig(cursorContext) {
+  if (!cursorContext) {
+    return null;
+  }
+  switch (cursorContext) {
+    case CursorContext.NONE:
+      return null;
+    case CursorContext.IN_PARENS:
+      return KeyConfigs.JUMP_OUT_PARENTHESES;
+    case CursorContext.IN_SUPER_SCRIPT:
+      return KeyConfigs.JUMP_OUT_EXPONENT;
+    case CursorContext.IN_SUB_SCRIPT:
+      return KeyConfigs.JUMP_OUT_BASE;
+    case CursorContext.IN_NUMERATOR:
+      return KeyConfigs.JUMP_OUT_NUMERATOR;
+    case CursorContext.IN_DENOMINATOR:
+      return KeyConfigs.JUMP_OUT_DENOMINATOR;
+    case CursorContext.BEFORE_FRACTION:
+      return KeyConfigs.JUMP_INTO_NUMERATOR;
+  }
+}
 function SharedKeys(props) {
   const {
     onClickKey,
+    cursorContext,
     divisionKey,
-    multiplicationDot
+    multiplicationDot,
+    selectedPage
   } = props;
+  const cursorKeyConfig = getCursorContextConfig(cursorContext);
+
+  // Fraction position depends on the page
+  const fractionCoord = selectedPage === "Numbers" || selectedPage === "Operators" ? [3, 1] : [3, 0];
   return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(KeypadButton, {
     keyConfig: KeyConfigs.PLUS,
     onClickKey: onClickKey,
@@ -8616,6 +8722,11 @@ function SharedKeys(props) {
     onClickKey: onClickKey,
     coord: [5, 0],
     secondary: true
+  }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.FRAC_INCLUSIVE,
+    onClickKey: onClickKey,
+    coord: fractionCoord,
+    secondary: true
   }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
     keyConfig: multiplicationDot ? KeyConfigs.CDOT : KeyConfigs.TIMES,
     onClickKey: onClickKey,
@@ -8636,8 +8747,8 @@ function SharedKeys(props) {
     onClickKey: onClickKey,
     coord: [5, 2],
     secondary: true
-  }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.FRAC_INCLUSIVE,
+  }), cursorKeyConfig && /*#__PURE__*/React__namespace.createElement(KeypadButton, {
+    keyConfig: cursorKeyConfig,
     onClickKey: onClickKey,
     coord: [4, 3],
     secondary: true
@@ -8649,6 +8760,9 @@ function SharedKeys(props) {
   }));
 }
 
+const defaultProps = {
+  extraKeys: []
+};
 function allPages(props) {
   var _props$extraKeys;
   const pages = ["Numbers"];
@@ -8665,12 +8779,16 @@ function allPages(props) {
   }
   return pages;
 }
+
+// The main (v2) Keypad. Use this component to present an accessible, onscreen
+// keypad to learners for entering math expressions.
 function Keypad(props) {
   const [selectedPage, setSelectedPage] = React__namespace.useState("Numbers");
   const availablePages = allPages(props);
   const {
     onClickKey,
-    extraKeys = [],
+    cursorContext,
+    extraKeys,
     multiplicationDot,
     divisionKey,
     preAlgebra,
@@ -8684,9 +8802,13 @@ function Keypad(props) {
     onSelectItem: tabbarItem => {
       setSelectedPage(tabbarItem);
     },
-    style: styles.tabbar
+    style: styles.tabbar,
+    onClickClose: () => onClickKey("DISMISS")
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles.grid
+    style: styles.grid,
+    role: "grid",
+    tabIndex: 0,
+    "aria-label": "Keypad"
   }, selectedPage === "Numbers" && /*#__PURE__*/React__namespace.createElement(NumbersPage, {
     onClickKey: onClickKey
   }), selectedPage === "Extras" && /*#__PURE__*/React__namespace.createElement(ExtrasPage, {
@@ -8702,10 +8824,13 @@ function Keypad(props) {
     onClickKey: onClickKey
   }), /*#__PURE__*/React__namespace.createElement(SharedKeys, {
     onClickKey: onClickKey,
+    cursorContext: cursorContext,
     multiplicationDot: multiplicationDot,
-    divisionKey: divisionKey
+    divisionKey: divisionKey,
+    selectedPage: selectedPage
   })));
 }
+Keypad.defaultProps = defaultProps;
 const styles = aphrodite.StyleSheet.create({
   tabbar: {
     background: Color__default["default"].white