@khanacademy/math-input 8.1.0 → 8.1.2

package/dist/fake-react-native-web/view.d.ts

@@ -14,6 +14,7 @@ type Props = {
     onTouchStart?: (arg1: React.TouchEvent<HTMLDivElement>) => void;
     role?: string;
     style?: StyleType;
+    forwardRef?: React.RefObject<HTMLDivElement>;
 };
 declare class View extends React.Component<Props> {
     static styles: any;

package/dist/fake-react-native-web/view.js.flow

@@ -20,6 +20,7 @@ declare type Props = {|
   onTouchStart?: (arg1: SyntheticTouchEvent<HTMLDivElement>) => void,
   role?: string,
   style?: StyleType,
+  forwardRef?: React.RefObject<HTMLDivElement>,
 |};
 declare class View extends React.Component<Props> {
   static styles: any;

package/dist/index.css

@@ -102,7 +102,7 @@
   border-color: white;
 }
 .keypad-input .mq-hasCursor:empty:not(.mq-root-block):after {
-  content: 'c';
+  content: "c";
 }
 .keypad-input .mq-math-mode .mq-selection .mq-non-leaf,
 .keypad-input .mq-editable-field .mq-selection .mq-non-leaf {

package/dist/index.js

@@ -137,7 +137,8 @@ class View extends React__namespace.Component {
       onTouchMove: this.props.onTouchMove,
       onTouchStart: this.props.onTouchStart,
       "aria-label": this.props.ariaLabel,
-      role: this.props.role
+      role: this.props.role,
+      ref: this.props.forwardRef
     }, this.props.children);
   }
 }
@@ -200,10 +201,6 @@ const innerBorderColor = offBlack16;
 const innerBorderStyle = "solid";
 const innerBorderWidthPx = 1;
 
-// The width at which a device is classified as a "tablet" for the purposes
-// of the keypad layout.
-const tabletCutoffPx = 600;
-
 // The dimensions that define various components in the tree, which may be
 // needed outside of those components in order to determine various layout
 // parameters.
@@ -921,11 +918,6 @@ let DeviceOrientation = /*#__PURE__*/function (DeviceOrientation) {
   DeviceOrientation["PORTRAIT"] = "PORTRAIT";
   return DeviceOrientation;
 }({});
-let DeviceType = /*#__PURE__*/function (DeviceType) {
-  DeviceType["PHONE"] = "PHONE";
-  DeviceType["TABLET"] = "TABLET";
-  return DeviceType;
-}({});
 let LayoutMode = /*#__PURE__*/function (LayoutMode) {
   LayoutMode["FULLSCREEN"] = "FULLSCREEN";
   LayoutMode["COMPACT"] = "COMPACT";
@@ -4128,19 +4120,21 @@ const styles$e = aphrodite.StyleSheet.create({
     boxSizing: "border-box",
     background: Color__default["default"].white,
     borderRadius: 4,
-    border: "1px solid transparent",
+    borderWidth: 2,
+    borderStyle: "solid",
+    borderColor: "transparent",
     flex: 1,
     minHeight: 42,
     minWidth: 42,
     padding: 1
   },
   hovered: {
-    border: "2px solid ".concat(Color__default["default"].blue),
+    borderColor: Color__default["default"].blue,
     padding: 1,
     boxShadow: "none"
   },
   focused: {
-    border: "2px solid ".concat(Color__default["default"].blue),
+    borderColor: Color__default["default"].blue,
     padding: 0,
     boxShadow: "none"
   },
@@ -4594,12 +4588,19 @@ class MobileKeypad extends React__namespace.Component {
     });
   }
   render() {
+    const {
+      style
+    } = this.props;
     const {
       active,
       cursor,
       keypadConfig
     } = this.state;
-    const containerStyle = [styles$c.keypadContainer, active ? styles$c.activeKeypadContainer : null];
+    const containerStyle = [
+    // internal styles
+    styles$c.keypadContainer, active ? styles$c.activeKeypadContainer : null,
+    // styles passed as props
+    ...(Array.isArray(style) ? style : [style])];
     const isExpression = (keypadConfig === null || keypadConfig === void 0 ? void 0 : keypadConfig.keypadType) === "EXPRESSION";
     return /*#__PURE__*/React__namespace.createElement(View, {
       style: containerStyle,
@@ -6374,8 +6375,8 @@ const styleForButtonDimensions = (heightPx, widthPx) => {
 };
 const mapStateToProps$7 = state => {
   return {
-    heightPx: state.layout.buttonDimensions.heightPx,
-    widthPx: state.layout.buttonDimensions.widthPx
+    heightPx: state.layout.buttonDimensions.height,
+    widthPx: state.layout.buttonDimensions.width
   };
 };
 var KeypadButton$1 = reactRedux.connect(mapStateToProps$7, null, null, {
@@ -6785,11 +6786,13 @@ const configureKeypad = configuration => {
     configuration
   };
 };
-const setPageSize = (pageWidthPx, pageHeightPx) => {
+const setPageSize = (pageWidth, pageHeight, containerWidth, containerHeight) => {
   return {
     type: "SetPageSize",
-    pageWidthPx,
-    pageHeightPx
+    pageWidth,
+    pageHeight,
+    containerWidth,
+    containerHeight
   };
 };
 const removeEcho = animationId => {
@@ -7514,6 +7517,7 @@ const {
 class KeypadContainer extends React__namespace.Component {
   constructor() {
     super(...arguments);
+    _defineProperty(this, "_containerRef", /*#__PURE__*/React__namespace.createRef());
     _defineProperty(this, "_resizeTimeout", void 0);
     _defineProperty(this, "hasMounted", void 0);
     _defineProperty(this, "state", {
@@ -7531,13 +7535,15 @@ class KeypadContainer extends React__namespace.Component {
       }
     });
     _defineProperty(this, "_onResize", () => {
-      var _this$props$onPageSiz, _this$props;
+      var _this$_containerRef$c, _this$_containerRef$c2, _this$props$onPageSiz, _this$props;
       // Whenever the page resizes, we need to force an update, as the button
       // heights and keypad width are computed based on horizontal space.
       this.setState({
         viewportWidth: window.innerWidth
       });
-      (_this$props$onPageSiz = (_this$props = this.props).onPageSizeChange) === null || _this$props$onPageSiz === void 0 ? void 0 : _this$props$onPageSiz.call(_this$props, window.innerWidth, window.innerHeight);
+      const containerWidth = ((_this$_containerRef$c = this._containerRef.current) === null || _this$_containerRef$c === void 0 ? void 0 : _this$_containerRef$c.clientWidth) || 0;
+      const containerHeight = ((_this$_containerRef$c2 = this._containerRef.current) === null || _this$_containerRef$c2 === void 0 ? void 0 : _this$_containerRef$c2.clientHeight) || 0;
+      (_this$props$onPageSiz = (_this$props = this.props).onPageSizeChange) === null || _this$props$onPageSiz === void 0 ? void 0 : _this$props$onPageSiz.call(_this$props, window.innerWidth, window.innerHeight, containerWidth, containerHeight);
     });
     _defineProperty(this, "renderKeypad", () => {
       const {
@@ -7637,7 +7643,8 @@ class KeypadContainer extends React__namespace.Component {
     return /*#__PURE__*/React__namespace.createElement(View, {
       style: keypadContainerStyle,
       dynamicStyle: dynamicStyle,
-      extraClassName: "keypad-container"
+      extraClassName: "keypad-container",
+      forwardRef: this._containerRef
     }, /*#__PURE__*/React__namespace.createElement(View, {
       style: keypadStyle,
       ref: element => {
@@ -7723,8 +7730,8 @@ const mapStateToProps = state => {
 };
 const mapDispatchToProps = dispatch => {
   return {
-    onPageSizeChange: (pageWidthPx, pageHeightPx) => {
-      dispatch(setPageSize(pageWidthPx, pageHeightPx));
+    onPageSizeChange: (pageWidth, pageHeight, containerWidth, containerHeight) => {
+      dispatch(setPageSize(pageWidth, pageHeight, containerWidth, containerHeight));
     }
   };
 };
@@ -8676,93 +8683,91 @@ const maxPortraitBrowserChrome = safariToolbar + (safariNavBarWhenExpanded - saf
 // (We don't need to account for the expanded navbar, since we include the
 // difference when reserving space above the keypad.)
 const worstCaseAspectRatio = 320 / (480 - safariNavBarWhenShrunk);
-const computeLayoutParameters = (_ref, _ref2, _ref3, _ref4) => {
-  let {
+function getButtonWidth(gridDimensions, containerDimensions, navigationPadEnabled, paginationEnabled, isLandscape) {
+  const {
     numColumns,
-    numMaxVisibleRows,
     numPages
-  } = _ref;
-  let {
-    pageWidthPx,
-    pageHeightPx
-  } = _ref2;
-  let {
-    deviceOrientation,
-    deviceType
-  } = _ref3;
-  let {
-    navigationPadEnabled,
-    paginationEnabled,
-    toolbarEnabled
-  } = _ref4;
+  } = gridDimensions;
+
+  // We can use the container width as the effective width.
+  let effectiveWidth = containerDimensions.width;
+  if (navigationPadEnabled) {
+    effectiveWidth -= navigationPadWidthPx;
+  }
+  let buttonWidthPx;
+  if (numPages > 1) {
+    const effectiveNumColumns = paginationEnabled ? numColumns : numColumns * numPages;
+    buttonWidthPx = effectiveWidth / effectiveNumColumns;
+  } else {
+    buttonWidthPx = isLandscape ? maxButtonSize : effectiveWidth / numColumns;
+  }
+  return buttonWidthPx;
+}
+function getButtonHeight(gridDimensions, pageDimensions, containerDimensions, paginationEnabled, toolbarEnabled, isLandscape) {
+  const {
+    numMaxVisibleRows
+  } = gridDimensions;
+
+  // In many cases, the browser chrome will already have been factored
+  // into `pageHeight`. But we have no way of knowing if that's
+  // the case or not. As such, we take a conservative approach and
+  // assume that the chrome is _never_ included in `pageHeight`.
+  const browserChromeHeight = isLandscape ? maxLandscapeBrowserChrome : maxPortraitBrowserChrome;
+
+  // Count up all the space that we need to reserve on the page.
+  // Namely, we need to account for:
+  //  1. Space between the keypad and the top of the page.
+  //  2. The presence of the exercise toolbar.
+  //  3. The presence of the view pager indicator.
+  //  4. Any browser chrome that may appear later.
+  const reservedSpace = minSpaceAboveKeypad + browserChromeHeight + (toolbarEnabled ? toolbarHeightPx : 0) + (paginationEnabled ? pageIndicatorHeightPx : 0);
+
+  // For the height, we take
+  // another conservative measure when in portrait by assuming that
+  // the device has the worst possible aspect ratio. In other words,
+  // we ignore the device height in portrait and assume the worst.
+  // This prevents the keypad from changing size when browser chrome
+  // appears and disappears.
+  const effectiveHeight = isLandscape ? pageDimensions.height : containerDimensions.width / worstCaseAspectRatio;
+
+  // In computing the
+  // height, accommodate for the maximum number of rows that will ever be
+  // visible (since the toggling of popovers can increase the number of
+  // visible rows).
+  const maxKeypadHeight = effectiveHeight - reservedSpace;
+  const buttonHeightPx = Math.max(Math.min(maxKeypadHeight / numMaxVisibleRows, maxButtonSize), minButtonHeight);
+  return buttonHeightPx;
+}
+const computeLayoutParameters = (gridDimensions, pageDimensions, containerDimensions, deviceOrientation, navigationPadEnabled, paginationEnabled, toolbarEnabled) => {
+  const {
+    numColumns,
+    numPages
+  } = gridDimensions;
+
   // First, compute some values that will be used in multiple computations.
   const effectiveNumColumns = paginationEnabled ? numColumns : numColumns * numPages;
 
   // Then, compute the button dimensions based on the provided parameters.
-  let buttonDimensions;
-  if (deviceType === DeviceType.PHONE) {
-    const isLandscape = deviceOrientation === DeviceOrientation.LANDSCAPE;
-
-    // In many cases, the browser chrome will already have been factored
-    // into `pageHeightPx`. But we have no way of knowing if that's
-    // the case or not. As such, we take a conservative approach and
-    // assume that the chrome is _never_ included in `pageHeightPx`.
-    const browserChromeHeight = isLandscape ? maxLandscapeBrowserChrome : maxPortraitBrowserChrome;
-
-    // Count up all the space that we need to reserve on the page.
-    // Namely, we need to account for:
-    //  1. Space between the keypad and the top of the page.
-    //  2. The presence of the exercise toolbar.
-    //  3. The presence of the view pager indicator.
-    //  4. Any browser chrome that may appear later.
-    const reservedSpace = minSpaceAboveKeypad + browserChromeHeight + (toolbarEnabled ? toolbarHeightPx : 0) + (paginationEnabled ? pageIndicatorHeightPx : 0);
-
-    // Next, compute the effective width and height. We can use the page
-    // width as the effective width. For the height, though, we take
-    // another conservative measure when in portrait by assuming that
-    // the device has the worst possible aspect ratio. In other words,
-    // we ignore the device height in portrait and assume the worst.
-    // This prevents the keypad from changing size when browser chrome
-    // appears and disappears.
-    const effectiveWidth = pageWidthPx;
-    const effectiveHeight = isLandscape ? pageHeightPx : pageWidthPx / worstCaseAspectRatio;
-    const maxKeypadHeight = effectiveHeight - reservedSpace;
-
-    // Finally, compute the button height and width. In computing the
-    // height, accommodate for the maximum number of rows that will ever be
-    // visible (since the toggling of popovers can increase the number of
-    // visible rows).
-    const buttonHeightPx = Math.max(Math.min(maxKeypadHeight / numMaxVisibleRows, maxButtonSize), minButtonHeight);
-    let buttonWidthPx;
-    if (numPages > 1) {
-      const effectiveNumColumns = paginationEnabled ? numColumns : numColumns * numPages;
-      buttonWidthPx = effectiveWidth / effectiveNumColumns;
-    } else {
-      buttonWidthPx = isLandscape ? maxButtonSize : effectiveWidth / numColumns;
-    }
-    buttonDimensions = {
-      widthPx: buttonWidthPx,
-      heightPx: buttonHeightPx
-    };
-  } else if (deviceType === DeviceType.TABLET) {
-    buttonDimensions = {
-      widthPx: maxButtonSize,
-      heightPx: maxButtonSize
-    };
-  } else {
-    throw new Error("Invalid device type: " + deviceType);
-  }
+  const isLandscape = deviceOrientation === DeviceOrientation.LANDSCAPE;
+  const buttonWidth = getButtonWidth(gridDimensions, containerDimensions, navigationPadEnabled, paginationEnabled, isLandscape);
+  const buttonHeight = getButtonHeight(gridDimensions, pageDimensions, containerDimensions, paginationEnabled, toolbarEnabled, isLandscape);
+  const buttonDimensions = {
+    width: buttonWidth,
+    height: buttonHeight
+  };
 
   // Finally, determine whether the keypad should be rendered in the
   // fullscreen layout by determining its resultant width.
   const numSeparators = (navigationPadEnabled ? 1 : 0) + (!paginationEnabled ? numPages - 1 : 0);
-  const keypadWidth = effectiveNumColumns * buttonDimensions.widthPx + (navigationPadEnabled ? navigationPadWidthPx : 0) + numSeparators * innerBorderWidthPx;
+  const keypadWidth = effectiveNumColumns * buttonDimensions.width + (navigationPadEnabled ? navigationPadWidthPx : 0) + numSeparators * innerBorderWidthPx;
   return {
     buttonDimensions,
-    layoutMode: keypadWidth >= pageWidthPx ? LayoutMode.FULLSCREEN : LayoutMode.COMPACT
+    layoutMode: keypadWidth >= containerDimensions.width ? LayoutMode.FULLSCREEN : LayoutMode.COMPACT
   };
 };
 
+const expandedViewThreshold = 682;
+const navigationViewThreshold = 800;
 const initialLayoutState = {
   gridDimensions: {
     numRows: keypadForType[defaultKeypadType].rows,
@@ -8771,12 +8776,16 @@ const initialLayoutState = {
     numPages: keypadForType[defaultKeypadType].numPages
   },
   buttonDimensions: {
-    widthPx: 48,
-    heightPx: 48
+    width: 48,
+    height: 48
   },
   pageDimensions: {
-    pageWidthPx: 0,
-    pageHeightPx: 0
+    width: 0,
+    height: 0
+  },
+  containerDimensions: {
+    width: 0,
+    height: 0
   },
   layoutMode: LayoutMode.FULLSCREEN,
   paginationEnabled: false,
@@ -8787,38 +8796,17 @@ const initialLayoutState = {
  * Compute the additional layout state based on the provided page and grid
  * dimensions.
  */
-const layoutParametersForDimensions = (pageDimensions, gridDimensions) => {
-  const {
-    pageWidthPx,
-    pageHeightPx
-  } = pageDimensions;
-
+const layoutParametersForDimensions = (pageDimensions, containerDimensions, gridDimensions) => {
   // Determine the device type and orientation.
-  const deviceOrientation = pageWidthPx > pageHeightPx ? DeviceOrientation.LANDSCAPE : DeviceOrientation.PORTRAIT;
-  const deviceType = Math.min(pageWidthPx, pageHeightPx) > tabletCutoffPx ? DeviceType.TABLET : DeviceType.PHONE;
+  const deviceOrientation = containerDimensions.width > containerDimensions.height ? DeviceOrientation.LANDSCAPE : DeviceOrientation.PORTRAIT;
 
   // Using that information, make some decisions (or assumptions)
   // about the resulting layout.
-  const navigationPadEnabled = deviceType === DeviceType.TABLET;
-  const paginationEnabled = deviceType === DeviceType.PHONE && deviceOrientation === DeviceOrientation.PORTRAIT;
-  const deviceInfo = {
-    deviceOrientation,
-    deviceType
-  };
-  const layoutOptions = {
-    navigationPadEnabled,
-    paginationEnabled,
-    // HACK(charlie): It's not great that we're making assumptions about
-    // the toolbar (which is rendered by webapp, and should always be
-    // visible and anchored to the bottom of the page for phone and
-    // tablet exercises). But this is primarily a heuristic (the goal is
-    // to preserve a 'good' amount of space between the top of the
-    // keypad and the top of the page) so we afford to have some margin
-    // of error.
-    toolbarEnabled: true
-  };
+  const navigationPadEnabled = containerDimensions.width > navigationViewThreshold;
+  const paginationEnabled = containerDimensions.width < expandedViewThreshold;
+  const toolbarEnabled = true;
   return {
-    ...computeLayoutParameters(gridDimensions, pageDimensions, deviceInfo, layoutOptions),
+    ...computeLayoutParameters(gridDimensions, pageDimensions, containerDimensions, deviceOrientation, navigationPadEnabled, paginationEnabled, toolbarEnabled),
     // Pass along some of the layout information, so that other
     // components in the heirarchy can adapt appropriately.
     navigationPadEnabled,
@@ -8839,24 +8827,32 @@ const layoutReducer = function () {
         numMaxVisibleRows: keypadForType[keypadType].maxVisibleRows,
         numPages: keypadForType[keypadType].numPages
       };
+      const layoutParams = layoutParametersForDimensions(state.pageDimensions, state.containerDimensions, gridDimensions);
       return {
         ...state,
-        ...layoutParametersForDimensions(state.pageDimensions, gridDimensions),
+        ...layoutParams,
         gridDimensions
       };
     case "SetPageSize":
       const {
-        pageWidthPx,
-        pageHeightPx
+        pageWidth,
+        pageHeight,
+        containerWidth,
+        containerHeight
       } = action;
       const pageDimensions = {
-        pageWidthPx,
-        pageHeightPx
+        width: pageWidth,
+        height: pageHeight
+      };
+      const containerDimensions = {
+        width: containerWidth,
+        height: containerHeight
       };
       return {
         ...state,
-        ...layoutParametersForDimensions(pageDimensions, state.gridDimensions),
-        pageDimensions
+        ...layoutParametersForDimensions(pageDimensions, containerDimensions, state.gridDimensions),
+        pageDimensions,
+        containerDimensions
       };
     default:
       return state;