@khanacademy/math-input 10.0.0 → 10.1.0

package/dist/index.css

@@ -44,7 +44,7 @@
   outline: none !important;
 }
 .keypad-input .mq-editable-field .mq-root-block {
-  overflow-x: scroll;
+  overflow-x: auto;
 }
 .keypad-input .mq-editable-field .mq-cursor:not(:only-child),
 .keypad-input .mq-editable-field .mq-root-block.mq-hasCursor > .mq-cursor:only-child {
@@ -63,12 +63,11 @@
   margin-left: -1px !important;
   margin-right: -1px !important;
   opacity: 1 !important;
-  transition: opacity 500ms ease-out !important;
+  transition: opacity 300ms ease !important;
   visibility: visible !important;
 }
 .keypad-input .mq-editable-field .mq-cursor.mq-blink {
   opacity: 0 !important;
-  transition: opacity 500ms ease-in !important;
   visibility: visible !important;
 }
 .keypad-input .mq-editable-field .mq-non-leaf .mq-cursor:only-child {
@@ -77,12 +76,11 @@
   border-radius: 1px;
   opacity: 1 !important;
   padding: 0 4px 0 4px;
-  transition: border-color 500ms ease-out !important;
+  transition: border-color 300ms ease !important;
 }
 .keypad-input .mq-editable-field .mq-non-leaf .mq-cursor:only-child.mq-blink {
   border-color: #1865f2 !important;
   opacity: 1 !important;
-  transition: border-color 500ms ease-in !important;
 }
 .keypad-input .mq-empty {
   background: transparent !important;

package/dist/index.js

@@ -98,7 +98,7 @@ class Text extends React__namespace.Component {
       numberOfLines,
       style
     } = this.props;
-    const className = aphrodite.css(styles$i.initial, ...(Array.isArray(style) ? style : [style]), numberOfLines === 1 && styles$i.singleLineStyle);
+    const className = aphrodite.css(styles$k.initial, ...(Array.isArray(style) ? style : [style]), numberOfLines === 1 && styles$k.singleLineStyle);
     return /*#__PURE__*/React__namespace.createElement("span", {
       className: className,
       style: this.props.dynamicStyle
@@ -107,7 +107,7 @@ class Text extends React__namespace.Component {
 }
 
 // https://github.com/necolas/react-native-web/blob/master/src/components/Text/index.js
-const styles$i = aphrodite.StyleSheet.create({
+const styles$k = aphrodite.StyleSheet.create({
   initial: {
     color: "inherit",
     display: "inline",
@@ -2144,7 +2144,7 @@ class MathInput extends React__namespace.Component {
     // to the open the keyboard, and then remove the second half of this label.
     const ariaLabel = i18n__namespace._("Math input box") + " " + i18n__namespace._("Tap with one or two fingers to open keyboard");
     return /*#__PURE__*/React__namespace.createElement(View, {
-      style: styles$h.input,
+      style: styles$j.input,
       onTouchStart: this.handleTouchStart,
       onTouchMove: this.handleTouchMove,
       onTouchEnd: this.handleTouchEnd,
@@ -2190,7 +2190,7 @@ const numeralHeightPx = 20;
 const totalDesiredPadding = 12;
 const minHeightPx = numeralHeightPx + totalDesiredPadding * 2;
 const minWidthPx = 64;
-const styles$h = aphrodite.StyleSheet.create({
+const styles$j = aphrodite.StyleSheet.create({
   input: {
     position: "relative",
     display: "inline-block",
@@ -2320,7 +2320,7 @@ const IconAsset = function (_ref) {
   }
 };
 
-const styles$g = aphrodite.StyleSheet.create({
+const styles$i = aphrodite.StyleSheet.create({
   base: {
     display: "flex",
     width: 44,
@@ -2391,7 +2391,7 @@ class TabbarItem extends React__namespace.Component {
       onClick: onClick,
       disabled: itemState === "disabled",
       "aria-label": itemType,
-      style: styles$g.clickable,
+      style: styles$i.clickable,
       "aria-selected": itemState === "active",
       role: "tab"
     }, _ref => {
@@ -2402,14 +2402,14 @@ class TabbarItem extends React__namespace.Component {
       } = _ref;
       const tintColor = imageTintColor(itemState, hovered, focused, pressed);
       return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-        style: [styles$g.base, itemState !== "disabled" && hovered && styles$g.hovered, focused && styles$g.focused, pressed && styles$g.pressed]
+        style: [styles$i.base, itemState !== "disabled" && hovered && styles$i.hovered, focused && styles$i.focused, pressed && styles$i.pressed]
       }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-        style: [styles$g.innerBox, pressed && styles$g.innerBoxPressed]
+        style: [styles$i.innerBox, pressed && styles$i.innerBoxPressed]
       }, /*#__PURE__*/React__namespace.createElement(IconAsset, {
         type: itemType,
         tintColor: tintColor
       })), itemState === "active" && /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-        style: [styles$g.activeIndicator, {
+        style: [styles$i.activeIndicator, {
           backgroundColor: tintColor
         }]
       }));
@@ -2417,7 +2417,7 @@ class TabbarItem extends React__namespace.Component {
   }
 }
 
-const styles$f = aphrodite.StyleSheet.create({
+const styles$h = aphrodite.StyleSheet.create({
   tabbar: {
     display: "flex",
     flexDirection: "row",
@@ -2439,10 +2439,10 @@ function Tabbar(props) {
     style
   } = props;
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$f.tabbar, style],
+    style: [styles$h.tabbar, style],
     role: "tablist"
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$f.pages]
+    style: [styles$h.pages]
   }, items.map(item => /*#__PURE__*/React__namespace.createElement(TabbarItem, {
     key: "tabbar-item-".concat(item),
     itemState: item === selectedItem ? "active" : "inactive",
@@ -4526,16 +4526,99 @@ function ButtonAsset(_ref) {
         transform: "translate(8 19)",
         d: "M0 0h12v2H0z"
       }))));
+    case "UP":
+      return /*#__PURE__*/React__namespace.createElement("svg", {
+        width: "48",
+        height: "48",
+        viewBox: "0 0 48 48"
+      }, /*#__PURE__*/React__namespace.createElement("g", {
+        fill: "none",
+        fillRule: "evenodd",
+        transform: "rotate(90 24 24)"
+      }, /*#__PURE__*/React__namespace.createElement("path", {
+        fill: "none",
+        d: "M0 0h48v48H0z"
+      }), /*#__PURE__*/React__namespace.createElement("path", {
+        fill: "none",
+        d: "M12 12h24v24H12z"
+      }), /*#__PURE__*/React__namespace.createElement("path", {
+        stroke: "#21242C",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        d: "M22 18l-6 6 6 6M16 24h16"
+      })));
+    case "DOWN":
+      return /*#__PURE__*/React__namespace.createElement("svg", {
+        width: "48",
+        height: "48",
+        viewBox: "0 0 48 48"
+      }, /*#__PURE__*/React__namespace.createElement("g", {
+        fill: "none",
+        fillRule: "evenodd",
+        transform: "rotate(270 24 24)"
+      }, /*#__PURE__*/React__namespace.createElement("path", {
+        fill: "none",
+        d: "M0 0h48v48H0z"
+      }), /*#__PURE__*/React__namespace.createElement("path", {
+        fill: "none",
+        d: "M12 12h24v24H12z"
+      }), /*#__PURE__*/React__namespace.createElement("path", {
+        stroke: "#21242C",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        d: "M22 18l-6 6 6 6M16 24h16"
+      })));
+    case "LEFT":
+      return /*#__PURE__*/React__namespace.createElement("svg", {
+        width: "48",
+        height: "48",
+        viewBox: "0 0 48 48"
+      }, /*#__PURE__*/React__namespace.createElement("g", {
+        fill: "none",
+        fillRule: "evenodd"
+      }, /*#__PURE__*/React__namespace.createElement("path", {
+        fill: "none",
+        d: "M0 0h48v48H0z"
+      }), /*#__PURE__*/React__namespace.createElement("path", {
+        fill: "none",
+        d: "M12 12h24v24H12z"
+      }), /*#__PURE__*/React__namespace.createElement("path", {
+        stroke: "#21242C",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        d: "M22 18l-6 6 6 6M16 24h16"
+      })));
+    case "RIGHT":
+      return /*#__PURE__*/React__namespace.createElement("svg", {
+        width: "48",
+        height: "48",
+        viewBox: "0 0 48 48"
+      }, /*#__PURE__*/React__namespace.createElement("g", {
+        fill: "none",
+        fillRule: "evenodd",
+        transform: "rotate(180 24 24)"
+      }, /*#__PURE__*/React__namespace.createElement("path", {
+        fill: "none",
+        d: "M0 0h48v48H0z"
+      }), /*#__PURE__*/React__namespace.createElement("path", {
+        fill: "none",
+        d: "M12 12h24v24H12z"
+      }), /*#__PURE__*/React__namespace.createElement("path", {
+        stroke: "#21242C",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        d: "M22 18l-6 6 6 6M16 24h16"
+      })));
 
     /**
      * ANYTHING BELOW IS NOT YET HANDLED
      */
     case "MANY":
     case "NOOP":
-    case "UP":
-    case "DOWN":
-    case "LEFT":
-    case "RIGHT":
     case "PHI":
     case "NTHROOT3":
     case "POW":
@@ -4583,7 +4666,7 @@ const KeypadButton$2 = _ref => {
     }
   }, /*#__PURE__*/React__namespace.createElement(Clickable__default["default"], {
     onClick: e => onClickKey(keyConfig.id, e),
-    style: styles$e.clickable,
+    style: styles$g.clickable,
     "aria-label": keyConfig.ariaLabel
   }, _ref2 => {
     let {
@@ -4592,22 +4675,22 @@ const KeypadButton$2 = _ref => {
       pressed
     } = _ref2;
     return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: [styles$e.outerBoxBase]
+      style: [styles$g.outerBoxBase]
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: [styles$e.base, tintColor != null ? {
+      style: [styles$g.base, tintColor != null ? {
         background: tintColor
-      } : undefined, hovered && styles$e.hovered, focused && styles$e.focused, pressed && styles$e.pressed]
+      } : undefined, hovered && styles$g.hovered, focused && styles$g.focused, pressed && styles$g.pressed]
     }, /*#__PURE__*/React__namespace.createElement(ButtonAsset, {
       id: keyConfig.id
     })));
   }));
 };
-const styles$e = aphrodite.StyleSheet.create({
+const styles$g = aphrodite.StyleSheet.create({
   base: {
     display: "flex",
     justifyContent: "center",
     alignItems: "center",
-    boxShadow: "0px 1px 0px rgba(33, 36, 44, 0.32)",
+    boxShadow: "0px 1px 0px ".concat(Color__default["default"].offBlack32),
     boxSizing: "border-box",
     background: Color__default["default"].white,
     borderRadius: 4,
@@ -4672,6 +4755,10 @@ function ExtrasPage(props) {
   }));
 }
 
+// This is just a magic number, I just played around with it
+// until the transition from expanded -> regular -> expanded felt natural
+const expandedViewThreshold$1 = 500;
+
 // This is a helper function that returns the correct context for the cursor
 // based on the cursorContext prop.  It is used in the keypad to determine
 // which key to render as the "jump out" key.
@@ -4927,6 +5014,154 @@ function OperatorsPage(props) {
   })));
 }
 
+function getStyles(key) {
+  switch (key) {
+    case "UP":
+      return styles$f.up;
+    case "RIGHT":
+      return styles$f.right;
+    case "DOWN":
+      return styles$f.down;
+    case "LEFT":
+      return styles$f.left;
+    default:
+      throw new Error("Invalid key: ".concat(key));
+  }
+}
+function NavigationButton(_ref) {
+  let {
+    coord,
+    keyConfig,
+    onClickKey
+  } = _ref;
+  const key = keyConfig.id;
+  const directionalStyles = getStyles(key);
+  return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: {
+      gridColumn: coord[0] + 1,
+      gridRow: coord[1] + 1
+    }
+  }, /*#__PURE__*/React__namespace.createElement(Clickable__default["default"], {
+    onClick: e => onClickKey(keyConfig.id, e),
+    style: styles$f.clickable,
+    "aria-label": keyConfig.ariaLabel
+  }, _ref2 => {
+    let {
+      hovered,
+      focused,
+      pressed
+    } = _ref2;
+    return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+      style: styles$f.outerBoxBase
+    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+      style: [styles$f.base, directionalStyles, hovered && styles$f.hovered, focused && styles$f.focused, pressed && styles$f.pressed]
+    }, /*#__PURE__*/React__namespace.createElement(ButtonAsset, {
+      id: keyConfig.id
+    })));
+  }));
+}
+const borderRadiusPx$1 = 4;
+const styles$f = aphrodite.StyleSheet.create({
+  clickable: {
+    width: "100%",
+    height: "100%",
+    ":focus": {
+      outline: "none"
+    }
+  },
+  outerBoxBase: {
+    height: "100%",
+    width: "100%"
+  },
+  base: {
+    boxShadow: "0px 1px 0px ".concat(Color__default["default"].offBlack32),
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    background: Color__default["default"].white,
+    borderWidth: 2,
+    borderColor: Color__default["default"].white
+  },
+  up: {
+    borderTopLeftRadius: borderRadiusPx$1,
+    borderTopRightRadius: borderRadiusPx$1
+  },
+  right: {
+    borderTopRightRadius: borderRadiusPx$1,
+    borderBottomRightRadius: borderRadiusPx$1
+  },
+  down: {
+    borderBottomLeftRadius: borderRadiusPx$1,
+    borderBottomRightRadius: borderRadiusPx$1
+  },
+  left: {
+    borderTopLeftRadius: borderRadiusPx$1,
+    borderBottomLeftRadius: borderRadiusPx$1
+  },
+  hovered: {
+    borderColor: Color__default["default"].blue,
+    boxShadow: "none"
+  },
+  focused: {
+    borderColor: Color__default["default"].blue,
+    boxShadow: "none"
+  },
+  pressed: {
+    border: "2px solid #1B50B3",
+    background: "linear-gradient(0deg, rgba(24, 101, 242, 0.32), rgba(24, 101, 242, 0.32)), ".concat(Color__default["default"].white),
+    boxShadow: "none"
+  }
+});
+
+function NavigationPad$1(props) {
+  const {
+    onClickKey
+  } = props;
+  return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: styles$e.container
+  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: styles$e.grid
+  }, /*#__PURE__*/React__namespace.createElement(NavigationButton, {
+    keyConfig: KeyConfigs.UP,
+    onClickKey: onClickKey,
+    coord: [1, 0]
+  }), /*#__PURE__*/React__namespace.createElement(NavigationButton, {
+    keyConfig: KeyConfigs.RIGHT,
+    onClickKey: onClickKey,
+    coord: [2, 1]
+  }), /*#__PURE__*/React__namespace.createElement(NavigationButton, {
+    keyConfig: KeyConfigs.DOWN,
+    onClickKey: onClickKey,
+    coord: [1, 2]
+  }), /*#__PURE__*/React__namespace.createElement(NavigationButton, {
+    keyConfig: KeyConfigs.LEFT,
+    onClickKey: onClickKey,
+    coord: [0, 1]
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: styles$e.spacer
+  })));
+}
+const styles$e = aphrodite.StyleSheet.create({
+  container: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: "0 1.5rem"
+  },
+  grid: {
+    width: 140,
+    height: 140,
+    display: "grid",
+    gridTemplateColumns: "repeat(3, 1fr)",
+    gridTemplateRows: "repeat(3, 1fr)"
+  },
+  spacer: {
+    gridColumn: 2,
+    gridRow: 2,
+    background: Color__default["default"].white
+  }
+});
+
 function SharedKeys(props) {
   const {
     onClickKey,
@@ -5034,7 +5269,8 @@ function Keypad$2(props) {
     advancedRelations,
     showDismiss,
     onAnalyticsEvent,
-    fractionsOnly
+    fractionsOnly,
+    expandedView
   } = props;
 
   // Use a different grid for our fraction keypad
@@ -5066,15 +5302,20 @@ function Keypad$2(props) {
       }
     };
   }, [onAnalyticsEvent, isMounted]);
-  return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, /*#__PURE__*/React__namespace.createElement(Tabbar, {
+  return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: expandedView ? styles$d.keypadOuterContainer : null
+  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: [styles$d.wrapper, expandedView ? styles$d.expandedWrapper : null]
+  }, /*#__PURE__*/React__namespace.createElement(Tabbar, {
     items: availableTabs,
     selectedItem: selectedPage,
     onSelectItem: tabbarItem => {
       setSelectedPage(tabbarItem);
     },
-    style: styles$d.tabbar,
     onClickClose: showDismiss ? () => onClickKey("DISMISS") : undefined
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: styles$d.keypadInnerContainer
+  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
     style: [styles$d.keypadGrid, gridStyle],
     role: "grid",
     tabIndex: 0,
@@ -5101,17 +5342,34 @@ function Keypad$2(props) {
     multiplicationDot: multiplicationDot,
     divisionKey: divisionKey,
     selectedPage: selectedPage
-  })));
+  })), expandedView && /*#__PURE__*/React__namespace.createElement(NavigationPad$1, {
+    onClickKey: onClickKey
+  }))));
 }
 Keypad$2.defaultProps = defaultProps;
 const styles$d = aphrodite.StyleSheet.create({
-  tabbar: {
+  keypadOuterContainer: {
+    display: "flex",
+    alignItems: "center"
+  },
+  wrapper: {
     background: Color__default["default"].white
   },
+  expandedWrapper: {
+    borderWidth: "1px 1px 0 1px",
+    borderColor: Color__default["default"].offBlack32,
+    maxWidth: expandedViewThreshold$1,
+    borderRadius: "3px 3px 0 0"
+  },
+  keypadInnerContainer: {
+    display: "flex",
+    flexDirection: "row",
+    backgroundColor: "#DBDCDD"
+  },
   keypadGrid: {
     display: "grid",
     gridTemplateRows: "repeat(4, 1fr)",
-    backgroundColor: "#DBDCDD"
+    flex: 1
   },
   expressionGrid: {
     gridTemplateColumns: "repeat(6, 1fr)"
@@ -5135,10 +5393,31 @@ const styles$d = aphrodite.StyleSheet.create({
 class MobileKeypad extends React__namespace.Component {
   constructor() {
     super(...arguments);
+    _defineProperty(this, "_containerRef", /*#__PURE__*/React__namespace.createRef());
+    _defineProperty(this, "_containerResizeObserver", null);
+    _defineProperty(this, "_throttleResize", false);
     _defineProperty(this, "hasMounted", false);
     _defineProperty(this, "state", {
+      containerWidth: 0,
       active: false
     });
+    _defineProperty(this, "_resize", () => {
+      var _this$_containerRef$c;
+      const containerWidth = ((_this$_containerRef$c = this._containerRef.current) === null || _this$_containerRef$c === void 0 ? void 0 : _this$_containerRef$c.clientWidth) || 0;
+      this.setState({
+        containerWidth
+      });
+    });
+    _defineProperty(this, "_throttleResizeHandler", () => {
+      if (this._throttleResize) {
+        return;
+      }
+      this._throttleResize = true;
+      setTimeout(() => {
+        this._resize();
+        this._throttleResize = false;
+      }, 100);
+    });
     _defineProperty(this, "activate", () => {
       this.setState({
         active: true
@@ -5182,6 +5461,21 @@ class MobileKeypad extends React__namespace.Component {
       return ReactDOM__default["default"].findDOMNode(this);
     });
   }
+  componentDidMount() {
+    this._resize();
+    window.addEventListener("resize", this._throttleResizeHandler);
+    window.addEventListener("orientationchange", this._throttleResizeHandler);
+    this._containerResizeObserver = new ResizeObserver(this._throttleResizeHandler);
+    if (this._containerRef.current) {
+      this._containerResizeObserver.observe(this._containerRef.current);
+    }
+  }
+  componentWillUnMount() {
+    var _this$_containerResiz;
+    window.removeEventListener("resize", this._throttleResizeHandler);
+    window.removeEventListener("orientationchange", this._throttleResizeHandler);
+    (_this$_containerResiz = this._containerResizeObserver) === null || _this$_containerResiz === void 0 ? void 0 : _this$_containerResiz.disconnect();
+  }
   _handleClickKey(key) {
     var _this$state$keyHandle, _this$state;
     if (key === "DISMISS") {
@@ -5199,6 +5493,7 @@ class MobileKeypad extends React__namespace.Component {
     } = this.props;
     const {
       active,
+      containerWidth,
       cursor,
       keypadConfig
     } = this.state;
@@ -5210,6 +5505,7 @@ class MobileKeypad extends React__namespace.Component {
     const isExpression = (keypadConfig === null || keypadConfig === void 0 ? void 0 : keypadConfig.keypadType) === "EXPRESSION";
     return /*#__PURE__*/React__namespace.createElement(View, {
       style: containerStyle,
+      forwardRef: this._containerRef,
       ref: element => {
         if (!this.hasMounted && element) {
           var _this$props$onElement, _this$props2;
@@ -5245,6 +5541,7 @@ class MobileKeypad extends React__namespace.Component {
       logarithms: isExpression,
       basicRelations: isExpression,
       advancedRelations: isExpression,
+      expandedView: containerWidth > expandedViewThreshold$1,
       showDismiss: true
     }));
   }
@@ -6944,7 +7241,7 @@ const styles$6 = aphrodite.StyleSheet.create({
     backgroundColor: wonderBlocksBlue
   },
   light: {
-    backgroundColor: "rgba(33, 36, 44, 0.1)"
+    backgroundColor: Color__default["default"].offBlack32
   },
   iconWrapper: {
     zIndex: focusBoxZIndex + 1