@khanacademy/math-input 10.0.0 → 10.1.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @khanacademy/math-input
 
+## 10.1.0
+
+### Minor Changes
+
+-   781551f9: Add an expanded view in the v2 MobileKeypad for larger screens
+
+## 10.0.1
+
+### Patch Changes
+
+-   7b11736e: Fix cursor animation for MathInput
+
 ## 10.0.0
 
 ### Major Changes

package/dist/components/keypad/keypad.d.ts

@@ -7,6 +7,7 @@ export type Props = {
     extraKeys: ReadonlyArray<Key>;
     cursorContext?: typeof CursorContext[keyof typeof CursorContext];
     showDismiss?: boolean;
+    expandedView?: boolean;
     multiplicationDot?: boolean;
     divisionKey?: boolean;
     trigonometry?: boolean;

package/dist/components/keypad/mobile-keypad.d.ts

@@ -20,13 +20,21 @@ type Props = {
 };
 type State = {
     active: boolean;
+    containerWidth: number;
     keypadConfig?: KeypadConfiguration;
     keyHandler?: KeyHandler;
     cursor?: Cursor;
 };
 declare class MobileKeypad extends React.Component<Props, State> implements KeypadAPI {
+    _containerRef: React.RefObject<HTMLDivElement>;
+    _containerResizeObserver: ResizeObserver | null;
+    _throttleResize: boolean;
     hasMounted: boolean;
     state: State;
+    componentDidMount(): void;
+    componentWillUnMount(): void;
+    _resize: () => void;
+    _throttleResizeHandler: () => void;
     activate: () => void;
     dismiss: () => void;
     configure: (configuration: KeypadConfiguration, cb: () => void) => void;

package/dist/components/keypad/navigation-button.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { KeyConfig, ClickKeyCallback } from "../../types";
+export type KeypadButtonProps = {
+    coord: readonly [number, number];
+    keyConfig: KeyConfig;
+    onClickKey: ClickKeyCallback;
+};
+export default function NavigationButton({ coord, keyConfig, onClickKey, }: KeypadButtonProps): JSX.Element;

package/dist/components/keypad/navigation-pad.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import type { ClickKeyCallback } from "../../types";
+export type Props = {
+    onClickKey: ClickKeyCallback;
+};
+export default function NavigationPad(props: Props): JSX.Element;

package/dist/components/keypad/utils.d.ts

@@ -1,2 +1,3 @@
 import { CursorContext } from "../input/cursor-contexts";
+export declare const expandedViewThreshold = 500;
 export declare function getCursorContextConfig(cursorContext?: typeof CursorContext[keyof typeof CursorContext]): import("../../types").NonManyKeyConfig | null;

package/dist/es/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/es/index.js

@@ -40,7 +40,7 @@ class Text extends React.Component {
       numberOfLines,
       style
     } = this.props;
-    const className = css(styles$i.initial, ...(Array.isArray(style) ? style : [style]), numberOfLines === 1 && styles$i.singleLineStyle);
+    const className = css(styles$k.initial, ...(Array.isArray(style) ? style : [style]), numberOfLines === 1 && styles$k.singleLineStyle);
     return /*#__PURE__*/React.createElement("span", {
       className: className,
       style: this.props.dynamicStyle
@@ -49,7 +49,7 @@ class Text extends React.Component {
 }
 
 // https://github.com/necolas/react-native-web/blob/master/src/components/Text/index.js
-const styles$i = StyleSheet.create({
+const styles$k = StyleSheet.create({
   initial: {
     color: "inherit",
     display: "inline",
@@ -2079,7 +2079,7 @@ class MathInput extends React.Component {
     // to the open the keyboard, and then remove the second half of this label.
     const ariaLabel = i18n._("Math input box") + " " + i18n._("Tap with one or two fingers to open keyboard");
     return /*#__PURE__*/React.createElement(View, {
-      style: styles$h.input,
+      style: styles$j.input,
       onTouchStart: this.handleTouchStart,
       onTouchMove: this.handleTouchMove,
       onTouchEnd: this.handleTouchEnd,
@@ -2125,7 +2125,7 @@ const numeralHeightPx = 20;
 const totalDesiredPadding = 12;
 const minHeightPx = numeralHeightPx + totalDesiredPadding * 2;
 const minWidthPx = 64;
-const styles$h = StyleSheet.create({
+const styles$j = StyleSheet.create({
   input: {
     position: "relative",
     display: "inline-block",
@@ -2269,7 +2269,7 @@ const IconAsset = function IconAsset({
   }
 };
 
-const styles$g = StyleSheet.create({
+const styles$i = StyleSheet.create({
   base: {
     display: "flex",
     width: 44,
@@ -2340,7 +2340,7 @@ class TabbarItem extends React.Component {
       onClick: onClick,
       disabled: itemState === "disabled",
       "aria-label": itemType,
-      style: styles$g.clickable,
+      style: styles$i.clickable,
       "aria-selected": itemState === "active",
       role: "tab"
     }, ({
@@ -2350,14 +2350,14 @@ class TabbarItem extends React.Component {
     }) => {
       const tintColor = imageTintColor(itemState, hovered, focused, pressed);
       return /*#__PURE__*/React.createElement(View$1, {
-        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.createElement(View$1, {
-        style: [styles$g.innerBox, pressed && styles$g.innerBoxPressed]
+        style: [styles$i.innerBox, pressed && styles$i.innerBoxPressed]
       }, /*#__PURE__*/React.createElement(IconAsset, {
         type: itemType,
         tintColor: tintColor
       })), itemState === "active" && /*#__PURE__*/React.createElement(View$1, {
-        style: [styles$g.activeIndicator, {
+        style: [styles$i.activeIndicator, {
           backgroundColor: tintColor
         }]
       }));
@@ -2365,7 +2365,7 @@ class TabbarItem extends React.Component {
   }
 }
 
-const styles$f = StyleSheet.create({
+const styles$h = StyleSheet.create({
   tabbar: {
     display: "flex",
     flexDirection: "row",
@@ -2387,10 +2387,10 @@ function Tabbar(props) {
     style
   } = props;
   return /*#__PURE__*/React.createElement(View$1, {
-    style: [styles$f.tabbar, style],
+    style: [styles$h.tabbar, style],
     role: "tablist"
   }, /*#__PURE__*/React.createElement(View$1, {
-    style: [styles$f.pages]
+    style: [styles$h.pages]
   }, items.map(item => /*#__PURE__*/React.createElement(TabbarItem, {
     key: `tabbar-item-${item}`,
     itemState: item === selectedItem ? "active" : "inactive",
@@ -4234,16 +4234,99 @@ function ButtonAsset({
         transform: "translate(8 19)",
         d: "M0 0h12v2H0z"
       }))));
+    case "UP":
+      return /*#__PURE__*/React.createElement("svg", {
+        width: "48",
+        height: "48",
+        viewBox: "0 0 48 48"
+      }, /*#__PURE__*/React.createElement("g", {
+        fill: "none",
+        fillRule: "evenodd",
+        transform: "rotate(90 24 24)"
+      }, /*#__PURE__*/React.createElement("path", {
+        fill: "none",
+        d: "M0 0h48v48H0z"
+      }), /*#__PURE__*/React.createElement("path", {
+        fill: "none",
+        d: "M12 12h24v24H12z"
+      }), /*#__PURE__*/React.createElement("path", {
+        stroke: "#21242C",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        d: "M22 18l-6 6 6 6M16 24h16"
+      })));
+    case "DOWN":
+      return /*#__PURE__*/React.createElement("svg", {
+        width: "48",
+        height: "48",
+        viewBox: "0 0 48 48"
+      }, /*#__PURE__*/React.createElement("g", {
+        fill: "none",
+        fillRule: "evenodd",
+        transform: "rotate(270 24 24)"
+      }, /*#__PURE__*/React.createElement("path", {
+        fill: "none",
+        d: "M0 0h48v48H0z"
+      }), /*#__PURE__*/React.createElement("path", {
+        fill: "none",
+        d: "M12 12h24v24H12z"
+      }), /*#__PURE__*/React.createElement("path", {
+        stroke: "#21242C",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        d: "M22 18l-6 6 6 6M16 24h16"
+      })));
+    case "LEFT":
+      return /*#__PURE__*/React.createElement("svg", {
+        width: "48",
+        height: "48",
+        viewBox: "0 0 48 48"
+      }, /*#__PURE__*/React.createElement("g", {
+        fill: "none",
+        fillRule: "evenodd"
+      }, /*#__PURE__*/React.createElement("path", {
+        fill: "none",
+        d: "M0 0h48v48H0z"
+      }), /*#__PURE__*/React.createElement("path", {
+        fill: "none",
+        d: "M12 12h24v24H12z"
+      }), /*#__PURE__*/React.createElement("path", {
+        stroke: "#21242C",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        d: "M22 18l-6 6 6 6M16 24h16"
+      })));
+    case "RIGHT":
+      return /*#__PURE__*/React.createElement("svg", {
+        width: "48",
+        height: "48",
+        viewBox: "0 0 48 48"
+      }, /*#__PURE__*/React.createElement("g", {
+        fill: "none",
+        fillRule: "evenodd",
+        transform: "rotate(180 24 24)"
+      }, /*#__PURE__*/React.createElement("path", {
+        fill: "none",
+        d: "M0 0h48v48H0z"
+      }), /*#__PURE__*/React.createElement("path", {
+        fill: "none",
+        d: "M12 12h24v24H12z"
+      }), /*#__PURE__*/React.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":
@@ -4289,7 +4372,7 @@ const KeypadButton$2 = ({
     }, style)
   }, /*#__PURE__*/React.createElement(Clickable, {
     onClick: e => onClickKey(keyConfig.id, e),
-    style: styles$e.clickable,
+    style: styles$g.clickable,
     "aria-label": keyConfig.ariaLabel
   }, ({
     hovered,
@@ -4297,22 +4380,22 @@ const KeypadButton$2 = ({
     pressed
   }) => {
     return /*#__PURE__*/React.createElement(View$1, {
-      style: [styles$e.outerBoxBase]
+      style: [styles$g.outerBoxBase]
     }, /*#__PURE__*/React.createElement(View$1, {
-      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.createElement(ButtonAsset, {
       id: keyConfig.id
     })));
   }));
 };
-const styles$e = StyleSheet.create({
+const styles$g = StyleSheet.create({
   base: {
     display: "flex",
     justifyContent: "center",
     alignItems: "center",
-    boxShadow: "0px 1px 0px rgba(33, 36, 44, 0.32)",
+    boxShadow: `0px 1px 0px ${Color.offBlack32}`,
     boxSizing: "border-box",
     background: Color.white,
     borderRadius: 4,
@@ -4377,6 +4460,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.
@@ -4632,6 +4719,150 @@ 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: ${key}`);
+  }
+}
+function NavigationButton({
+  coord,
+  keyConfig,
+  onClickKey
+}) {
+  const key = keyConfig.id;
+  const directionalStyles = getStyles(key);
+  return /*#__PURE__*/React.createElement(View$1, {
+    style: {
+      gridColumn: coord[0] + 1,
+      gridRow: coord[1] + 1
+    }
+  }, /*#__PURE__*/React.createElement(Clickable, {
+    onClick: e => onClickKey(keyConfig.id, e),
+    style: styles$f.clickable,
+    "aria-label": keyConfig.ariaLabel
+  }, ({
+    hovered,
+    focused,
+    pressed
+  }) => /*#__PURE__*/React.createElement(View$1, {
+    style: styles$f.outerBoxBase
+  }, /*#__PURE__*/React.createElement(View$1, {
+    style: [styles$f.base, directionalStyles, hovered && styles$f.hovered, focused && styles$f.focused, pressed && styles$f.pressed]
+  }, /*#__PURE__*/React.createElement(ButtonAsset, {
+    id: keyConfig.id
+  })))));
+}
+const borderRadiusPx$1 = 4;
+const styles$f = StyleSheet.create({
+  clickable: {
+    width: "100%",
+    height: "100%",
+    ":focus": {
+      outline: `none`
+    }
+  },
+  outerBoxBase: {
+    height: "100%",
+    width: "100%"
+  },
+  base: {
+    boxShadow: `0px 1px 0px ${Color.offBlack32}`,
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    background: Color.white,
+    borderWidth: 2,
+    borderColor: Color.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.blue,
+    boxShadow: "none"
+  },
+  focused: {
+    borderColor: Color.blue,
+    boxShadow: "none"
+  },
+  pressed: {
+    border: "2px solid #1B50B3",
+    background: `linear-gradient(0deg, rgba(24, 101, 242, 0.32), rgba(24, 101, 242, 0.32)), ${Color.white}`,
+    boxShadow: "none"
+  }
+});
+
+function NavigationPad$1(props) {
+  const {
+    onClickKey
+  } = props;
+  return /*#__PURE__*/React.createElement(View$1, {
+    style: styles$e.container
+  }, /*#__PURE__*/React.createElement(View$1, {
+    style: styles$e.grid
+  }, /*#__PURE__*/React.createElement(NavigationButton, {
+    keyConfig: KeyConfigs.UP,
+    onClickKey: onClickKey,
+    coord: [1, 0]
+  }), /*#__PURE__*/React.createElement(NavigationButton, {
+    keyConfig: KeyConfigs.RIGHT,
+    onClickKey: onClickKey,
+    coord: [2, 1]
+  }), /*#__PURE__*/React.createElement(NavigationButton, {
+    keyConfig: KeyConfigs.DOWN,
+    onClickKey: onClickKey,
+    coord: [1, 2]
+  }), /*#__PURE__*/React.createElement(NavigationButton, {
+    keyConfig: KeyConfigs.LEFT,
+    onClickKey: onClickKey,
+    coord: [0, 1]
+  }), /*#__PURE__*/React.createElement(View$1, {
+    style: styles$e.spacer
+  })));
+}
+const styles$e = 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.white
+  }
+});
+
 function SharedKeys(props) {
   const {
     onClickKey,
@@ -4739,7 +4970,8 @@ function Keypad$2(props) {
     advancedRelations,
     showDismiss,
     onAnalyticsEvent,
-    fractionsOnly
+    fractionsOnly,
+    expandedView
   } = props;
 
   // Use a different grid for our fraction keypad
@@ -4771,15 +5003,20 @@ function Keypad$2(props) {
       }
     };
   }, [onAnalyticsEvent, isMounted]);
-  return /*#__PURE__*/React.createElement(View$1, null, /*#__PURE__*/React.createElement(Tabbar, {
+  return /*#__PURE__*/React.createElement(View$1, {
+    style: expandedView ? styles$d.keypadOuterContainer : null
+  }, /*#__PURE__*/React.createElement(View$1, {
+    style: [styles$d.wrapper, expandedView ? styles$d.expandedWrapper : null]
+  }, /*#__PURE__*/React.createElement(Tabbar, {
     items: availableTabs,
     selectedItem: selectedPage,
     onSelectItem: tabbarItem => {
       setSelectedPage(tabbarItem);
     },
-    style: styles$d.tabbar,
     onClickClose: showDismiss ? () => onClickKey("DISMISS") : undefined
   }), /*#__PURE__*/React.createElement(View$1, {
+    style: styles$d.keypadInnerContainer
+  }, /*#__PURE__*/React.createElement(View$1, {
     style: [styles$d.keypadGrid, gridStyle],
     role: "grid",
     tabIndex: 0,
@@ -4806,17 +5043,34 @@ function Keypad$2(props) {
     multiplicationDot: multiplicationDot,
     divisionKey: divisionKey,
     selectedPage: selectedPage
-  })));
+  })), expandedView && /*#__PURE__*/React.createElement(NavigationPad$1, {
+    onClickKey: onClickKey
+  }))));
 }
 Keypad$2.defaultProps = defaultProps;
 const styles$d = StyleSheet.create({
-  tabbar: {
+  keypadOuterContainer: {
+    display: "flex",
+    alignItems: "center"
+  },
+  wrapper: {
     background: Color.white
   },
+  expandedWrapper: {
+    borderWidth: "1px 1px 0 1px",
+    borderColor: Color.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)"
@@ -4840,10 +5094,31 @@ const styles$d = StyleSheet.create({
 class MobileKeypad extends React.Component {
   constructor(...args) {
     super(...args);
+    this._containerRef = /*#__PURE__*/React.createRef();
+    this._containerResizeObserver = null;
+    this._throttleResize = false;
     this.hasMounted = false;
     this.state = {
+      containerWidth: 0,
       active: false
     };
+    this._resize = () => {
+      var _this$_containerRef$c;
+      const containerWidth = ((_this$_containerRef$c = this._containerRef.current) == null ? void 0 : _this$_containerRef$c.clientWidth) || 0;
+      this.setState({
+        containerWidth
+      });
+    };
+    this._throttleResizeHandler = () => {
+      if (this._throttleResize) {
+        return;
+      }
+      this._throttleResize = true;
+      setTimeout(() => {
+        this._resize();
+        this._throttleResize = false;
+      }, 100);
+    };
     this.activate = () => {
       this.setState({
         active: true
@@ -4887,6 +5162,21 @@ class MobileKeypad extends React.Component {
       return ReactDOM.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 ? void 0 : _this$_containerResiz.disconnect();
+  }
   _handleClickKey(key) {
     var _this$state$keyHandle, _this$state;
     if (key === "DISMISS") {
@@ -4904,6 +5194,7 @@ class MobileKeypad extends React.Component {
     } = this.props;
     const {
       active,
+      containerWidth,
       cursor,
       keypadConfig
     } = this.state;
@@ -4915,6 +5206,7 @@ class MobileKeypad extends React.Component {
     const isExpression = (keypadConfig == null ? void 0 : keypadConfig.keypadType) === "EXPRESSION";
     return /*#__PURE__*/React.createElement(View, {
       style: containerStyle,
+      forwardRef: this._containerRef,
       ref: element => {
         if (!this.hasMounted && element) {
           var _this$props$onElement, _this$props2;
@@ -4949,6 +5241,7 @@ class MobileKeypad extends React.Component {
       logarithms: isExpression,
       basicRelations: isExpression,
       advancedRelations: isExpression,
+      expandedView: containerWidth > expandedViewThreshold$1,
       showDismiss: true
     }));
   }
@@ -6791,7 +7084,7 @@ const styles$6 = StyleSheet.create({
     backgroundColor: wonderBlocksBlue
   },
   light: {
-    backgroundColor: "rgba(33, 36, 44, 0.1)"
+    backgroundColor: Color.offBlack32
   },
   iconWrapper: {
     zIndex: focusBoxZIndex + 1