@khanacademy/math-input 8.1.0 → 8.1.2

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @khanacademy/math-input
 
+## 8.1.2
+
+### Patch Changes
+
+-   ea9dac75: Bugfix: allow legacy keypad to be positioned absolutely in column
+-   30a99b82: Allow v2 keypad to receive style prop like v1 keypad
+-   3fa556a3: Fixes bug where mouse hover causes grid to expand
+
+## 8.1.1
+
+### Patch Changes
+
+-   Updated dependencies [57f75510]
+    -   @khanacademy/perseus-core@0.1.1
+
 ## 8.1.0
 
 ### Minor Changes

package/dist/components/keypad-legacy/compute-layout-parameters.d.ts

@@ -18,22 +18,11 @@
  * to be conservative in our measurements and make things smaller than they
  * might need to be.
  */
-import { LayoutMode } from "../../enums";
-export declare const computeLayoutParameters: ({ numColumns, numMaxVisibleRows, numPages }: {
-    numColumns: any;
-    numMaxVisibleRows: any;
-    numPages: any;
-}, { pageWidthPx, pageHeightPx }: {
-    pageWidthPx: any;
-    pageHeightPx: any;
-}, { deviceOrientation, deviceType }: {
-    deviceOrientation: any;
-    deviceType: any;
-}, { navigationPadEnabled, paginationEnabled, toolbarEnabled }: {
-    navigationPadEnabled: any;
-    paginationEnabled: any;
-    toolbarEnabled: any;
-}) => {
-    buttonDimensions: any;
+import { DeviceOrientation, LayoutMode } from "../../enums";
+import { GridDimensions, WidthHeight } from "./store/types";
+type ComputedLayoutProperty = {
+    buttonDimensions: WidthHeight;
     layoutMode: LayoutMode;
 };
+export declare const computeLayoutParameters: (gridDimensions: GridDimensions, pageDimensions: WidthHeight, containerDimensions: WidthHeight, deviceOrientation: DeviceOrientation, navigationPadEnabled: boolean, paginationEnabled: boolean, toolbarEnabled: boolean) => ComputedLayoutProperty;
+export {};

package/dist/components/keypad-legacy/compute-layout-parameters.js.flow

@@ -4,27 +4,18 @@
  * Flowgen v1.21.0
  * @flow
  */
-import { LayoutMode } from "../../enums";
-declare export var computeLayoutParameters: (
-  x: {|
-    numColumns: any,
-    numMaxVisibleRows: any,
-    numPages: any,
-  |},
-  x: {|
-    pageWidthPx: any,
-    pageHeightPx: any,
-  |},
-  x: {|
-    deviceOrientation: any,
-    deviceType: any,
-  |},
-  x: {|
-    navigationPadEnabled: any,
-    paginationEnabled: any,
-    toolbarEnabled: any,
-  |}
-) => {|
-  buttonDimensions: any,
+import { DeviceOrientation, LayoutMode } from "../../enums";
+import { GridDimensions, WidthHeight } from "./store/types";
+declare type ComputedLayoutProperty = {|
+  buttonDimensions: WidthHeight,
   layoutMode: LayoutMode,
 |};
+declare export var computeLayoutParameters: (
+  gridDimensions: GridDimensions,
+  pageDimensions: WidthHeight,
+  containerDimensions: WidthHeight,
+  deviceOrientation: DeviceOrientation,
+  navigationPadEnabled: boolean,
+  paginationEnabled: boolean,
+  toolbarEnabled: boolean
+) => ComputedLayoutProperty;

package/dist/components/keypad-legacy/keypad-container.d.ts

@@ -11,7 +11,7 @@ interface ReduxProps {
 interface Props extends ReduxProps {
     onDismiss?: () => void;
     onElementMounted: (element: any) => void;
-    onPageSizeChange?: (width: number, height: number) => void;
+    onPageSizeChange?: (pageWidth: number, pageHeight: number, containerWidth: number, containerHeight: number) => void;
     style?: StyleType;
 }
 type State = {
@@ -19,6 +19,7 @@ type State = {
     viewportWidth: string | number;
 };
 declare class KeypadContainer extends React.Component<Props, State> {
+    _containerRef: React.RefObject<HTMLDivElement>;
     _resizeTimeout: number | null | undefined;
     hasMounted: boolean | undefined;
     state: {

package/dist/components/keypad-legacy/keypad-container.js.flow

@@ -18,7 +18,12 @@ declare interface ReduxProps {
 declare type Props = {
   onDismiss?: () => void,
   onElementMounted: (element: any) => void,
-  onPageSizeChange?: (width: number, height: number) => void,
+  onPageSizeChange?: (
+    pageWidth: number,
+    pageHeight: number,
+    containerWidth: number,
+    containerHeight: number
+  ) => void,
   style?: StyleType,
 } & ReduxProps;
 declare type State = {|
@@ -26,6 +31,7 @@ declare type State = {|
   viewportWidth: string | number,
 |};
 declare class KeypadContainer extends React.Component<Props, State> {
+  _containerRef: React.RefObject<HTMLDivElement>;
   _resizeTimeout: number | null | void;
   hasMounted: boolean | void;
   state: {|

package/dist/components/keypad-legacy/store/actions.d.ts

@@ -18,10 +18,12 @@ type ConfigureKeypadAction = {
 export declare const configureKeypad: (configuration: KeypadConfiguration) => ConfigureKeypadAction;
 type SetPageSizeAction = {
     type: "SetPageSize";
-    pageWidthPx: number;
-    pageHeightPx: number;
+    pageWidth: number;
+    pageHeight: number;
+    containerWidth: number;
+    containerHeight: number;
 };
-export declare const setPageSize: (pageWidthPx: number, pageHeightPx: number) => SetPageSizeAction;
+export declare const setPageSize: (pageWidth: number, pageHeight: number, containerWidth: number, containerHeight: number) => SetPageSizeAction;
 type RemoveEchoAction = {
     type: "RemoveEcho";
     animationId: string;

package/dist/components/keypad-legacy/store/actions.js.flow

@@ -32,12 +32,16 @@ declare export var configureKeypad: (
 ) => ConfigureKeypadAction;
 declare type SetPageSizeAction = {|
   type: "SetPageSize",
-  pageWidthPx: number,
-  pageHeightPx: number,
+  pageWidth: number,
+  pageHeight: number,
+  containerWidth: number,
+  containerHeight: number,
 |};
 declare export var setPageSize: (
-  pageWidthPx: number,
-  pageHeightPx: number
+  pageWidth: number,
+  pageHeight: number,
+  containerWidth: number,
+  containerHeight: number
 ) => SetPageSizeAction;
 declare type RemoveEchoAction = {|
   type: "RemoveEcho",

package/dist/components/keypad-legacy/store/types.d.ts

@@ -19,21 +19,21 @@ export interface GestureState {
 export interface EchoState {
     echoes: ReadonlyArray<Echo>;
 }
+export type GridDimensions = {
+    numRows: number;
+    numColumns: number;
+    numMaxVisibleRows: number;
+    numPages: number;
+};
+export type WidthHeight = {
+    width: number;
+    height: number;
+};
 export interface LayoutState {
-    gridDimensions: {
-        numRows: number;
-        numColumns: number;
-        numMaxVisibleRows: number;
-        numPages: number;
-    };
-    buttonDimensions: {
-        widthPx: number;
-        heightPx: number;
-    };
-    pageDimensions: {
-        pageWidthPx: number;
-        pageHeightPx: number;
-    };
+    gridDimensions: GridDimensions;
+    buttonDimensions: WidthHeight;
+    containerDimensions: WidthHeight;
+    pageDimensions: WidthHeight;
     layoutMode: LayoutMode;
     paginationEnabled: boolean;
     navigationPadEnabled: boolean;

package/dist/components/keypad-legacy/store/types.js.flow

@@ -25,21 +25,21 @@ export interface GestureState {
 export interface EchoState {
   echoes: $ReadOnlyArray<Echo>;
 }
+export type GridDimensions = {|
+  numRows: number,
+  numColumns: number,
+  numMaxVisibleRows: number,
+  numPages: number,
+|};
+export type WidthHeight = {|
+  width: number,
+  height: number,
+|};
 export interface LayoutState {
-  gridDimensions: {|
-    numRows: number,
-    numColumns: number,
-    numMaxVisibleRows: number,
-    numPages: number,
-  |};
-  buttonDimensions: {|
-    widthPx: number,
-    heightPx: number,
-  |};
-  pageDimensions: {|
-    pageWidthPx: number,
-    pageHeightPx: number,
-  |};
+  gridDimensions: GridDimensions;
+  buttonDimensions: WidthHeight;
+  containerDimensions: WidthHeight;
+  pageDimensions: WidthHeight;
   layoutMode: LayoutMode;
   paginationEnabled: boolean;
   navigationPadEnabled: boolean;

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

@@ -79,7 +79,8 @@ class View extends React.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);
   }
 }
@@ -142,10 +143,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.
@@ -862,11 +859,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";
@@ -3833,19 +3825,21 @@ const styles$e = StyleSheet.create({
     boxSizing: "border-box",
     background: Color.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 ${Color.blue}`,
+    borderColor: Color.blue,
     padding: 1,
     boxShadow: "none"
   },
   focused: {
-    border: `2px solid ${Color.blue}`,
+    borderColor: Color.blue,
     padding: 0,
     boxShadow: "none"
   },
@@ -4299,12 +4293,19 @@ class MobileKeypad extends React.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 ? void 0 : keypadConfig.keypadType) === "EXPRESSION";
     return /*#__PURE__*/React.createElement(View, {
       style: containerStyle,
@@ -6221,8 +6222,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 = connect(mapStateToProps$7, null, null, {
@@ -6631,11 +6632,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 => {
@@ -7362,6 +7365,7 @@ const {
 class KeypadContainer extends React.Component {
   constructor(...args) {
     super(...args);
+    this._containerRef = /*#__PURE__*/React.createRef();
     this._resizeTimeout = void 0;
     this.hasMounted = void 0;
     this.state = {
@@ -7379,13 +7383,15 @@ class KeypadContainer extends React.Component {
       }
     };
     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 ? void 0 : _this$props$onPageSiz.call(_this$props, window.innerWidth, window.innerHeight);
+      const containerWidth = ((_this$_containerRef$c = this._containerRef.current) == null ? void 0 : _this$_containerRef$c.clientWidth) || 0;
+      const containerHeight = ((_this$_containerRef$c2 = this._containerRef.current) == null ? void 0 : _this$_containerRef$c2.clientHeight) || 0;
+      (_this$props$onPageSiz = (_this$props = this.props).onPageSizeChange) == null ? void 0 : _this$props$onPageSiz.call(_this$props, window.innerWidth, window.innerHeight, containerWidth, containerHeight);
     };
     this.renderKeypad = () => {
       const {
@@ -7480,7 +7486,8 @@ class KeypadContainer extends React.Component {
     return /*#__PURE__*/React.createElement(View, {
       style: keypadContainerStyle,
       dynamicStyle: dynamicStyle,
-      extraClassName: "keypad-container"
+      extraClassName: "keypad-container",
+      forwardRef: this._containerRef
     }, /*#__PURE__*/React.createElement(View, {
       style: keypadStyle,
       ref: element => {
@@ -7566,8 +7573,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));
     }
   };
 };
@@ -8494,89 +8501,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 = ({
-  numColumns,
-  numMaxVisibleRows,
-  numPages
-}, {
-  pageWidthPx,
-  pageHeightPx
-}, {
-  deviceOrientation,
-  deviceType
-}, {
-  navigationPadEnabled,
-  paginationEnabled,
-  toolbarEnabled
-}) => {
+function getButtonWidth(gridDimensions, containerDimensions, navigationPadEnabled, paginationEnabled, isLandscape) {
+  const {
+    numColumns,
+    numPages
+  } = 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,
@@ -8585,12 +8594,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,
@@ -8601,37 +8614,16 @@ 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
-  };
-  return _extends({}, computeLayoutParameters(gridDimensions, pageDimensions, deviceInfo, layoutOptions), {
+  const navigationPadEnabled = containerDimensions.width > navigationViewThreshold;
+  const paginationEnabled = containerDimensions.width < expandedViewThreshold;
+  const toolbarEnabled = true;
+  return _extends({}, 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,
@@ -8650,20 +8642,28 @@ const layoutReducer = function layoutReducer(state = initialLayoutState, action)
         numMaxVisibleRows: keypadForType[keypadType].maxVisibleRows,
         numPages: keypadForType[keypadType].numPages
       };
-      return _extends({}, state, layoutParametersForDimensions(state.pageDimensions, gridDimensions), {
+      const layoutParams = layoutParametersForDimensions(state.pageDimensions, state.containerDimensions, gridDimensions);
+      return _extends({}, state, 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 _extends({}, state, layoutParametersForDimensions(pageDimensions, state.gridDimensions), {
-        pageDimensions
+      return _extends({}, state, layoutParametersForDimensions(pageDimensions, containerDimensions, state.gridDimensions), {
+        pageDimensions,
+        containerDimensions
       });
     default:
       return state;