@khanacademy/math-input 4.2.0 → 4.3.0

package/dist/es/index.js

@@ -4,7 +4,6 @@ import { getDecimalSeparator } from '@khanacademy/wonder-blocks-i18n';
 import { entries } from '@khanacademy/wonder-stuff-core';
 import { StyleSheet, css } from 'aphrodite';
 import * as React from 'react';
-import React__default from 'react';
 import ReactDOM from 'react-dom';
 import $ from 'jquery';
 import MathQuill from 'mathquill';
@@ -7329,88 +7328,6 @@ class ProvidedKeypad extends React.Component {
   }
 }
 
-const styles$1 = StyleSheet.create({
-  base: {
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    boxShadow: "0px 1px 0px rgba(33, 36, 44, 0.32)",
-    boxSizing: "border-box",
-    background: Color.white,
-    borderRadius: 4,
-    border: `1px solid transparent`,
-    flex: 1,
-    minHeight: 42,
-    minWidth: 42,
-    padding: 1
-  },
-  hovered: {
-    border: `1px solid ${Color.blue}`,
-    padding: 1,
-    boxShadow: "none"
-  },
-  focused: {
-    border: `2px solid ${Color.blue}`,
-    padding: 0,
-    boxShadow: "none"
-  },
-  pressed: {
-    border: "2px solid #1B50B3",
-    padding: 0,
-    background: `linear-gradient(0deg, rgba(24, 101, 242, 0.32), rgba(24, 101, 242, 0.32)), ${Color.white}`,
-    boxShadow: "none"
-  },
-  outerBoxBase: {
-    padding: 1,
-    height: "100%",
-    width: "100%",
-    boxSizing: "border-box",
-    borderRadius: 7,
-    border: "2px solid transparent"
-  },
-  outerBoxHover: {
-    border: `2px solid ${Color.blue}`
-  },
-  outerBoxPressed: {
-    border: "2px solid #1B50B3"
-  },
-  clickable: {
-    width: "100%",
-    height: "100%",
-    boxSizing: "border-box"
-  }
-});
-class Button extends React.Component {
-  render() {
-    const {
-      onPress,
-      ariaLabel,
-      children,
-      style,
-      tintColor
-    } = this.props;
-    return /*#__PURE__*/React.createElement(View$1, {
-      style: style
-    }, /*#__PURE__*/React.createElement(Clickable, {
-      onClick: onPress,
-      style: styles$1.clickable,
-      "aria-label": ariaLabel
-    }, ({
-      hovered,
-      focused,
-      pressed
-    }) => {
-      return /*#__PURE__*/React.createElement(View$1, {
-        style: [styles$1.outerBoxBase, hovered && styles$1.outerBoxHover, pressed && styles$1.outerBoxPressed]
-      }, /*#__PURE__*/React.createElement(View$1, {
-        style: [styles$1.base, tintColor != null ? {
-          background: tintColor
-        } : undefined, hovered && styles$1.hovered, focused && styles$1.focused, pressed && styles$1.pressed]
-      }, children));
-    }));
-  }
-}
-
 /*
 The SVGs in this file should be treated as binary assets. If, in the future,
 we need to make changes to update the color or size or shape of the glyph
@@ -8169,386 +8086,300 @@ function ButtonAsset({
   }
 }
 
-const KeypadPageContainer = ({
-  children
-}) => /*#__PURE__*/React.createElement(View$1, {
-  style: {
-    backgroundColor: "#DBDCDD",
-    width: "100%",
-    height: 192,
-    display: "grid",
-    gridTemplateColumns: "repeat(6, 1fr)",
-    gridTemplateRows: "repeat(4, 1fr)"
-  }
-}, children);
 const KeypadButton = ({
+  coord,
   keyConfig,
   onClickKey,
-  tintColor,
-  style
-}) => /*#__PURE__*/React.createElement(Button, {
-  onPress: () => onClickKey(keyConfig.id),
-  tintColor: tintColor,
-  style: style,
-  ariaLabel: keyConfig.ariaLabel
-}, /*#__PURE__*/React.createElement(ButtonAsset, {
-  id: keyConfig.id
-}));
-const SecondaryKeypadButton = ({
-  keyConfig,
-  onClickKey,
-  style
-}) => /*#__PURE__*/React.createElement(KeypadButton, {
-  keyConfig: keyConfig,
-  onClickKey: onClickKey,
-  style: style,
-  tintColor: "#F6F6F7"
-});
-const KeypadActionButton = ({
-  keyConfig,
-  onClickKey,
-  style
-}) => /*#__PURE__*/React.createElement(KeypadButton, {
-  keyConfig: keyConfig,
-  onClickKey: onClickKey,
-  style: style,
-  tintColor: "#DBDCDD"
-});
-
-/**
- * A placeholder button for the keypad. Optional count prop to render multiple
- * buttons. Defaults to 1.
- */
-const PlaceHolderButtons = ({
-  count: _count = 1
-}) => /*#__PURE__*/React.createElement(React.Fragment, null, Array.from({
-  length: _count
-}).map((_, index) => /*#__PURE__*/React.createElement(View$1, {
-  key: index,
-  style: {
+  style,
+  secondary,
+  action
+}) => {
+  const tintColor = secondary ? "#F6F6F7" : action ? "#DBDCDD" : undefined;
+  return /*#__PURE__*/React.createElement(View$1, {
+    style: _extends({
+      gridColumn: coord[0] + 1,
+      gridRow: coord[1] + 1
+    }, style)
+  }, /*#__PURE__*/React.createElement(Clickable, {
+    onClick: () => onClickKey(keyConfig.id),
+    style: styles$1.clickable,
+    "aria-label": keyConfig.ariaLabel
+  }, ({
+    hovered,
+    focused,
+    pressed
+  }) => {
+    return /*#__PURE__*/React.createElement(View$1, {
+      style: [styles$1.outerBoxBase, hovered && styles$1.outerBoxHover, pressed && styles$1.outerBoxPressed]
+    }, /*#__PURE__*/React.createElement(View$1, {
+      style: [styles$1.base, tintColor != null ? {
+        background: tintColor
+      } : undefined, hovered && styles$1.hovered, focused && styles$1.focused, pressed && styles$1.pressed]
+    }, /*#__PURE__*/React.createElement(ButtonAsset, {
+      id: keyConfig.id
+    })));
+  }));
+};
+const styles$1 = StyleSheet.create({
+  base: {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    boxShadow: "0px 1px 0px rgba(33, 36, 44, 0.32)",
+    boxSizing: "border-box",
+    background: Color.white,
+    borderRadius: 4,
+    border: `1px solid transparent`,
+    flex: 1,
+    minHeight: 42,
+    minWidth: 42,
+    padding: 1
+  },
+  hovered: {
+    border: `1px solid ${Color.blue}`,
+    padding: 1,
+    boxShadow: "none"
+  },
+  focused: {
+    border: `2px solid ${Color.blue}`,
+    padding: 0,
+    boxShadow: "none"
+  },
+  pressed: {
+    border: "2px solid #1B50B3",
+    padding: 0,
+    background: `linear-gradient(0deg, rgba(24, 101, 242, 0.32), rgba(24, 101, 242, 0.32)), ${Color.white}`,
+    boxShadow: "none"
+  },
+  outerBoxBase: {
+    padding: 1,
     height: "100%",
     width: "100%",
     boxSizing: "border-box",
     borderRadius: 7,
-    border: "4px solid transparent"
-  }
-}, /*#__PURE__*/React.createElement(View$1, {
-  style: {
-    background: "rgba(33, 36, 44, 0.04)",
+    border: "2px solid transparent"
+  },
+  outerBoxHover: {
+    border: `2px solid ${Color.blue}`
+  },
+  outerBoxPressed: {
+    border: "2px solid #1B50B3"
+  },
+  clickable: {
     width: "100%",
     height: "100%",
-    borderRadius: 4,
-    border: `1px solid transparent`
+    boxSizing: "border-box"
   }
-}))));
+});
 
-class ExtrasPage extends React.Component {
-  render() {
-    const {
-      extraKeys,
-      onClickKey
-    } = this.props;
-    return /*#__PURE__*/React.createElement(KeypadPageContainer, null, extraKeys.map(key => /*#__PURE__*/React.createElement(KeypadButton, {
+const columns = 4;
+function ExtrasPage(props) {
+  const {
+    extraKeys,
+    onClickKey
+  } = props;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, extraKeys.map((key, i) => {
+    // Map 1D array to Cartesian coordinates
+    const coordX = i % columns;
+    const coordY = i / columns;
+    return /*#__PURE__*/React.createElement(KeypadButton, {
       key: key,
       keyConfig: KeyConfigs[key],
-      onClickKey: onClickKey
-    })));
-  }
+      onClickKey: onClickKey,
+      coord: [coordX, coordY]
+    });
+  }));
 }
 
-class GeometryPage extends React.Component {
-  render() {
-    const {
-      onClickKey
-    } = this.props;
-    return /*#__PURE__*/React.createElement(KeypadPageContainer, null, /*#__PURE__*/React.createElement(SecondaryKeypadButton, {
-      keyConfig: KeyConfigs.SIN,
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React.createElement(SecondaryKeypadButton, {
-      keyConfig: KeyConfigs.COS,
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React.createElement(SecondaryKeypadButton, {
-      keyConfig: KeyConfigs.TAN,
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React.createElement(SecondaryKeypadButton, {
-      keyConfig: KeyConfigs.LEFT_PAREN,
-      onClickKey: onClickKey,
-      style: {
-        gridColumn: 5
-      }
-    }), /*#__PURE__*/React.createElement(SecondaryKeypadButton, {
-      keyConfig: KeyConfigs.RIGHT_PAREN,
-      onClickKey: onClickKey,
-      style: {
-        gridColumn: 6
-      }
-    }), /*#__PURE__*/React.createElement(SecondaryKeypadButton, {
-      keyConfig: KeyConfigs.x,
-      onClickKey: onClickKey,
-      style: {
-        gridColumn: 5
-      }
-    }), /*#__PURE__*/React.createElement(SecondaryKeypadButton, {
-      keyConfig: KeyConfigs.FRAC_INCLUSIVE,
-      onClickKey: onClickKey,
-      style: {
-        gridColumn: 6
-      }
-    }), /*#__PURE__*/React.createElement(SecondaryKeypadButton, {
-      keyConfig: KeyConfigs.PI,
-      onClickKey: onClickKey,
-      style: {
-        gridColumn: 5
-      }
-    }), /*#__PURE__*/React.createElement(KeypadActionButton, {
-      keyConfig: KeyConfigs.BACKSPACE,
-      style: {
-        gridColumn: "6"
-      },
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React.createElement(KeypadActionButton, {
-      keyConfig: KeyConfigs.DISMISS,
-      style: {
-        gridColumn: "6"
-      },
-      onClickKey: onClickKey
-    }));
-  }
+function GeometryPage(props) {
+  const {
+    onClickKey
+  } = props;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.SIN,
+    onClickKey: onClickKey,
+    coord: [0, 0]
+  }), /*#__PURE__*/React.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.COS,
+    onClickKey: onClickKey,
+    coord: [1, 0]
+  }), /*#__PURE__*/React.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.TAN,
+    onClickKey: onClickKey,
+    coord: [2, 0]
+  }));
 }
 
-class NumbersPage extends React.Component {
-  render() {
-    const {
-      onClickKey
-    } = this.props;
-    return /*#__PURE__*/React.createElement(KeypadPageContainer, null, /*#__PURE__*/React.createElement(KeypadButton, {
-      keyConfig: KeyConfigs.NUM_7,
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React.createElement(KeypadButton, {
-      keyConfig: KeyConfigs.NUM_8,
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React.createElement(KeypadButton, {
-      keyConfig: KeyConfigs.NUM_9,
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React.createElement(SecondaryKeypadButton, {
-      keyConfig: KeyConfigs.DIVIDE,
-      style: this.props.divisionKey ? {
-        gridColumn: "4",
-        gridRow: "1"
-      } : {
-        display: "none"
-      },
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React.createElement(SecondaryKeypadButton, {
-      keyConfig: this.props.multiplicationDot ? KeyConfigs.CDOT : KeyConfigs.TIMES,
-      style: this.props.divisionKey && {
-        gridColumn: "4",
-        gridRow: "2"
-      },
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React.createElement(SecondaryKeypadButton, {
-      keyConfig: KeyConfigs.LEFT_PAREN,
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React.createElement(SecondaryKeypadButton, {
-      keyConfig: KeyConfigs.RIGHT_PAREN,
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React.createElement(KeypadButton, {
-      keyConfig: KeyConfigs.NUM_4,
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React.createElement(KeypadButton, {
-      keyConfig: KeyConfigs.NUM_5,
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React.createElement(KeypadButton, {
-      keyConfig: KeyConfigs.NUM_6,
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React.createElement(SecondaryKeypadButton, {
-      keyConfig: KeyConfigs.MINUS,
-      style: this.props.divisionKey && {
-        gridColumn: "4",
-        gridRow: "3"
-      },
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React.createElement(SecondaryKeypadButton, {
-      keyConfig: KeyConfigs.FRAC_INCLUSIVE,
-      onClickKey: onClickKey,
-      style: {
-        gridColumn: "5 / 7"
-      }
-    }), /*#__PURE__*/React.createElement(KeypadButton, {
-      keyConfig: KeyConfigs.NUM_1,
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React.createElement(KeypadButton, {
-      keyConfig: KeyConfigs.NUM_2,
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React.createElement(KeypadButton, {
-      keyConfig: KeyConfigs.NUM_3,
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React.createElement(SecondaryKeypadButton, {
-      keyConfig: KeyConfigs.PLUS,
-      style: this.props.divisionKey ? {
-        gridColumn: "4",
-        gridRow: "4"
-      } : {
-        gridColumn: "4",
-        gridRowStart: "3",
-        gridRowEnd: "5"
-      },
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React.createElement(KeypadActionButton, {
-      keyConfig: KeyConfigs.BACKSPACE,
-      style: {
-        gridColumn: "6"
-      },
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React.createElement(KeypadButton, {
-      keyConfig: KeyConfigs.NUM_0,
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React.createElement(KeypadButton, {
-      keyConfig: KeyConfigs.DECIMAL,
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React.createElement(KeypadButton, {
-      keyConfig: KeyConfigs.NEGATIVE,
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React.createElement(KeypadActionButton, {
-      keyConfig: KeyConfigs.DISMISS,
-      style: {
-        gridColumn: "6"
-      },
-      onClickKey: onClickKey
-    }));
-  }
+function NumbersPage(props) {
+  const {
+    onClickKey
+  } = props;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.NUM_7,
+    onClickKey: onClickKey,
+    coord: [0, 0]
+  }), /*#__PURE__*/React.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.NUM_8,
+    onClickKey: onClickKey,
+    coord: [1, 0]
+  }), /*#__PURE__*/React.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.NUM_9,
+    onClickKey: onClickKey,
+    coord: [2, 0]
+  }), /*#__PURE__*/React.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.NUM_4,
+    onClickKey: onClickKey,
+    coord: [0, 1]
+  }), /*#__PURE__*/React.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.NUM_5,
+    onClickKey: onClickKey,
+    coord: [1, 1]
+  }), /*#__PURE__*/React.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.NUM_6,
+    onClickKey: onClickKey,
+    coord: [2, 1]
+  }), /*#__PURE__*/React.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.NUM_1,
+    onClickKey: onClickKey,
+    coord: [0, 2]
+  }), /*#__PURE__*/React.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.NUM_2,
+    onClickKey: onClickKey,
+    coord: [1, 2]
+  }), /*#__PURE__*/React.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.NUM_3,
+    onClickKey: onClickKey,
+    coord: [2, 2]
+  }), /*#__PURE__*/React.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.NUM_0,
+    onClickKey: onClickKey,
+    coord: [0, 3]
+  }), /*#__PURE__*/React.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.DECIMAL,
+    onClickKey: onClickKey,
+    coord: [1, 3]
+  }), /*#__PURE__*/React.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.NEGATIVE,
+    onClickKey: onClickKey,
+    coord: [2, 3]
+  }));
 }
 
-const AdvancedRelations = ({
-  onClickKey,
-  placeholder
-}) => placeholder ? /*#__PURE__*/React__default.createElement(PlaceHolderButtons, {
-  count: 3
-}) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(SecondaryKeypadButton, {
-  keyConfig: KeyConfigs.NEQ,
-  onClickKey: onClickKey
-}), /*#__PURE__*/React__default.createElement(SecondaryKeypadButton, {
-  keyConfig: KeyConfigs.LEQ,
-  onClickKey: onClickKey
-}), /*#__PURE__*/React__default.createElement(SecondaryKeypadButton, {
-  keyConfig: KeyConfigs.GEQ,
-  onClickKey: onClickKey
-}));
-
-const BasicRelations = ({
-  onClickKey,
-  placeholder
-}) => placeholder ? /*#__PURE__*/React__default.createElement(PlaceHolderButtons, {
-  count: 3
-}) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(SecondaryKeypadButton, {
-  keyConfig: KeyConfigs.EQUAL,
-  onClickKey: onClickKey
-}), /*#__PURE__*/React__default.createElement(SecondaryKeypadButton, {
-  keyConfig: KeyConfigs.LT,
-  onClickKey: onClickKey
-}), /*#__PURE__*/React__default.createElement(SecondaryKeypadButton, {
-  keyConfig: KeyConfigs.GT,
-  onClickKey: onClickKey
-}));
-
-const Logarithms = ({
-  onClickKey,
-  placeholder
-}) => placeholder ? /*#__PURE__*/React__default.createElement(PlaceHolderButtons, {
-  count: 3
-}) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(SecondaryKeypadButton, {
-  keyConfig: KeyConfigs.LOG,
-  onClickKey: onClickKey
-}), /*#__PURE__*/React__default.createElement(SecondaryKeypadButton, {
-  keyConfig: KeyConfigs.LOG_N,
-  onClickKey: onClickKey
-}), /*#__PURE__*/React__default.createElement(SecondaryKeypadButton, {
-  keyConfig: KeyConfigs.LN,
-  onClickKey: onClickKey
-}));
-
-const PreAlgebra = ({
-  onClickKey,
-  placeholder
-}) => placeholder ? /*#__PURE__*/React__default.createElement(PlaceHolderButtons, {
-  count: 4
-}) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(SecondaryKeypadButton, {
-  keyConfig: KeyConfigs.EXP_2,
-  onClickKey: onClickKey
-}), /*#__PURE__*/React__default.createElement(SecondaryKeypadButton, {
-  keyConfig: KeyConfigs.EXP,
-  onClickKey: onClickKey
-}), /*#__PURE__*/React__default.createElement(SecondaryKeypadButton, {
-  keyConfig: KeyConfigs.SQRT,
-  onClickKey: onClickKey
-}), /*#__PURE__*/React__default.createElement(SecondaryKeypadButton, {
-  keyConfig: KeyConfigs.RADICAL,
-  onClickKey: onClickKey
-}));
-
-class OperatorsPage extends React.Component {
-  render() {
-    const {
-      onClickKey
-    } = this.props;
-    return /*#__PURE__*/React.createElement(KeypadPageContainer, null, /*#__PURE__*/React.createElement(PreAlgebra, {
-      onClickKey: onClickKey,
-      placeholder: !this.props.preAlgebra
-    }), /*#__PURE__*/React.createElement(SecondaryKeypadButton, {
-      keyConfig: KeyConfigs.LEFT_PAREN,
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React.createElement(SecondaryKeypadButton, {
-      keyConfig: KeyConfigs.RIGHT_PAREN,
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React.createElement(Logarithms, {
-      onClickKey: onClickKey,
-      placeholder: !this.props.logarithms
-    }), /*#__PURE__*/React.createElement(SecondaryKeypadButton, {
-      keyConfig: KeyConfigs.x,
-      onClickKey: onClickKey,
-      style: {
-        gridColumn: 5
-      }
-    }), /*#__PURE__*/React.createElement(SecondaryKeypadButton, {
-      keyConfig: KeyConfigs.FRAC_INCLUSIVE,
-      onClickKey: onClickKey,
-      style: {
-        gridColumn: 6
-      }
-    }), /*#__PURE__*/React.createElement(BasicRelations, {
-      onClickKey: onClickKey,
-      placeholder: !this.props.basicRelations
-    }), /*#__PURE__*/React.createElement(SecondaryKeypadButton, {
-      keyConfig: KeyConfigs.PI,
-      onClickKey: onClickKey,
-      style: {
-        gridColumn: 5
-      }
-    }), /*#__PURE__*/React.createElement(KeypadActionButton, {
-      keyConfig: KeyConfigs.BACKSPACE,
-      style: {
-        gridColumn: 6
-      },
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React.createElement(AdvancedRelations, {
-      onClickKey: onClickKey,
-      placeholder: !this.props.advancedRelations
-    }), /*#__PURE__*/React.createElement(KeypadActionButton, {
-      keyConfig: KeyConfigs.DISMISS,
-      style: {
-        gridColumn: "6"
-      },
-      onClickKey: onClickKey
-    }));
-  }
+function OperatorsPage(props) {
+  const {
+    onClickKey,
+    preAlgebra,
+    logarithms,
+    basicRelations,
+    advancedRelations
+  } = props;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, preAlgebra && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.EXP_2,
+    onClickKey: onClickKey,
+    coord: [0, 0]
+  }), /*#__PURE__*/React.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.EXP,
+    onClickKey: onClickKey,
+    coord: [1, 0]
+  }), /*#__PURE__*/React.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.SQRT,
+    onClickKey: onClickKey,
+    coord: [2, 0]
+  }), /*#__PURE__*/React.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.RADICAL,
+    onClickKey: onClickKey,
+    coord: [3, 0]
+  })), logarithms && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.LOG,
+    onClickKey: onClickKey,
+    coord: [0, 1]
+  }), /*#__PURE__*/React.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.LOG_N,
+    onClickKey: onClickKey,
+    coord: [1, 1]
+  }), /*#__PURE__*/React.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.LN,
+    onClickKey: onClickKey,
+    coord: [2, 1]
+  })), basicRelations && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.EQUAL,
+    onClickKey: onClickKey,
+    coord: [0, 2]
+  }), /*#__PURE__*/React.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.LT,
+    onClickKey: onClickKey,
+    coord: [1, 2]
+  }), /*#__PURE__*/React.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.GT,
+    onClickKey: onClickKey,
+    coord: [2, 2]
+  })), advancedRelations && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.NEQ,
+    onClickKey: onClickKey,
+    coord: [0, 3]
+  }), /*#__PURE__*/React.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.LEQ,
+    onClickKey: onClickKey,
+    coord: [1, 3]
+  }), /*#__PURE__*/React.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.GEQ,
+    onClickKey: onClickKey,
+    coord: [2, 3]
+  })));
+}
+
+function SharedKeys(props) {
+  const {
+    onClickKey,
+    divisionKey,
+    multiplicationDot
+  } = props;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.PLUS,
+    onClickKey: onClickKey,
+    coord: [4, 0],
+    secondary: true
+  }), /*#__PURE__*/React.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.MINUS,
+    onClickKey: onClickKey,
+    coord: [5, 0],
+    secondary: true
+  }), /*#__PURE__*/React.createElement(KeypadButton, {
+    keyConfig: multiplicationDot ? KeyConfigs.CDOT : KeyConfigs.TIMES,
+    onClickKey: onClickKey,
+    coord: [4, 1],
+    secondary: true
+  }), divisionKey && /*#__PURE__*/React.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.DIVIDE,
+    onClickKey: onClickKey,
+    coord: [5, 1],
+    secondary: true
+  }), /*#__PURE__*/React.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.LEFT_PAREN,
+    onClickKey: onClickKey,
+    coord: [4, 2],
+    secondary: true
+  }), /*#__PURE__*/React.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.RIGHT_PAREN,
+    onClickKey: onClickKey,
+    coord: [5, 2],
+    secondary: true
+  }), /*#__PURE__*/React.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.FRAC_INCLUSIVE,
+    onClickKey: onClickKey,
+    coord: [4, 3],
+    secondary: true
+  }), /*#__PURE__*/React.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.BACKSPACE,
+    onClickKey: onClickKey,
+    coord: [5, 3],
+    action: true
+  }));
 }
 
 function allPages(props) {
   var _props$extraKeys;
   const pages = ["Numbers"];
-  if ((_props$extraKeys = props.extraKeys) != null && _props$extraKeys.length) {
-    pages.push("Extras");
-  }
   if (
   // OperatorsButtonSets
   props.preAlgebra || props.logarithms || props.basicRelations || props.advancedRelations) {
@@ -8557,38 +8388,63 @@ function allPages(props) {
   if (props.trigonometry) {
     pages.push("Geometry");
   }
+  if ((_props$extraKeys = props.extraKeys) != null && _props$extraKeys.length) {
+    pages.push("Extras");
+  }
   return pages;
 }
-class Keypad extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-      selectedPage: "Numbers"
-    };
-  }
-  render() {
-    const {
-      selectedPage
-    } = this.state;
-    const availablePages = allPages(this.props);
-    return /*#__PURE__*/React.createElement(View$1, null, /*#__PURE__*/React.createElement(Tabbar, {
-      items: availablePages,
-      selectedItem: selectedPage,
-      onSelectItem: tabbarItem => {
-        this.setState({
-          selectedPage: tabbarItem
-        });
-      },
-      style: styles.tabbar
-    }), selectedPage === "Numbers" && /*#__PURE__*/React.createElement(NumbersPage, this.props), selectedPage === "Extras" && /*#__PURE__*/React.createElement(ExtrasPage, this.props), selectedPage === "Operators" && /*#__PURE__*/React.createElement(OperatorsPage, this.props), selectedPage === "Geometry" && /*#__PURE__*/React.createElement(GeometryPage, this.props));
-  }
+function Keypad(props) {
+  const [selectedPage, setSelectedPage] = React.useState("Numbers");
+  const availablePages = allPages(props);
+  const {
+    onClickKey,
+    extraKeys = [],
+    multiplicationDot,
+    divisionKey,
+    preAlgebra,
+    logarithms,
+    basicRelations,
+    advancedRelations
+  } = props;
+  return /*#__PURE__*/React.createElement(View$1, null, /*#__PURE__*/React.createElement(Tabbar, {
+    items: availablePages,
+    selectedItem: selectedPage,
+    onSelectItem: tabbarItem => {
+      setSelectedPage(tabbarItem);
+    },
+    style: styles.tabbar
+  }), /*#__PURE__*/React.createElement(View$1, {
+    style: styles.grid
+  }, selectedPage === "Numbers" && /*#__PURE__*/React.createElement(NumbersPage, {
+    onClickKey: onClickKey
+  }), selectedPage === "Extras" && /*#__PURE__*/React.createElement(ExtrasPage, {
+    onClickKey: onClickKey,
+    extraKeys: extraKeys
+  }), selectedPage === "Operators" && /*#__PURE__*/React.createElement(OperatorsPage, {
+    onClickKey: onClickKey,
+    preAlgebra: preAlgebra,
+    logarithms: logarithms,
+    basicRelations: basicRelations,
+    advancedRelations: advancedRelations
+  }), selectedPage === "Geometry" && /*#__PURE__*/React.createElement(GeometryPage, {
+    onClickKey: onClickKey
+  }), /*#__PURE__*/React.createElement(SharedKeys, {
+    onClickKey: onClickKey,
+    multiplicationDot: multiplicationDot,
+    divisionKey: divisionKey
+  })));
 }
-Keypad.defaultProps = {
-  extraKeys: []
-};
 const styles = StyleSheet.create({
   tabbar: {
     background: Color.white
+  },
+  grid: {
+    display: "grid",
+    gridTemplateColumns: "repeat(6, 1fr)",
+    gridTemplateRows: "repeat(4, 1fr)",
+    backgroundColor: "#DBDCDD",
+    maxHeight: 200,
+    maxWidth: 300
   }
 });