@khanacademy/math-input 8.1.1 → 8.1.3

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @khanacademy/math-input
 
+## 8.1.3
+
+### Patch Changes
+
+-   302ca7f7: Fix type for parameters of `moveOutOf` event.
+
+## 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

package/dist/components/input/mathquill-types.d.ts

@@ -148,7 +148,7 @@ export type MathFieldConfig = {
     handlers?: {
         edit?: (mathField: MathFieldInterface) => void;
         enter?: (mathField: MathFieldInterface) => void;
-        moveOutOf?: (mathField: MathFieldInterface) => void;
+        moveOutOf?: (direction: MathQuillDirection, mathField: MathFieldInterface) => void;
         upOutOf?: (mathField: MathFieldInterface) => void;
         downOutOf?: (mathField: MathFieldInterface) => void;
         deleteOutOf?: (direction: MathQuillDirection, mathField: MathFieldInterface) => void;

package/dist/components/input/mathquill-types.js.flow

@@ -171,7 +171,10 @@ export type MathFieldConfig = {|
   handlers?: {|
     edit?: (mathField: MathFieldInterface) => void,
     enter?: (mathField: MathFieldInterface) => void,
-    moveOutOf?: (mathField: MathFieldInterface) => void,
+    moveOutOf?: (
+      direction: MathQuillDirection,
+      mathField: MathFieldInterface
+    ) => void,
     upOutOf?: (mathField: MathFieldInterface) => void,
     downOutOf?: (mathField: MathFieldInterface) => void,
     deleteOutOf?: (

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

@@ -1,8 +1,8 @@
 import { StyleType } from "@khanacademy/wonder-blocks-core";
 import * as React from "react";
 import ReactDOM from "react-dom";
-import Key from "../../data/keys";
-import { Cursor, KeypadConfiguration, KeyHandler, KeypadAPI } from "../../types";
+import type Key from "../../data/keys";
+import type { Cursor, KeypadConfiguration, KeyHandler, KeypadAPI } from "../../types";
 /**
  * This is the v2 equivalent of v1's ProvidedKeypad. It follows the same
  * external API so that it can be hot-swapped with the v1 keypad and

package/dist/components/keypad/mobile-keypad.js.flow

@@ -8,7 +8,7 @@ import { StyleType } from "@khanacademy/wonder-blocks-core";
 import * as React from "react";
 import ReactDOM from "react-dom";
 import Key from "../../data/keys";
-import {
+import type {
   Cursor,
   KeypadConfiguration,
   KeyHandler,

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/components/prop-types.d.ts

@@ -0,0 +1,12 @@
+/**
+ * React PropTypes that may be shared between components.
+ */
+import PropTypes from "prop-types";
+export declare const keypadElementPropType: PropTypes.Requireable<PropTypes.InferProps<{
+    activate: PropTypes.Validator<(...args: any[]) => any>;
+    dismiss: PropTypes.Validator<(...args: any[]) => any>;
+    configure: PropTypes.Validator<(...args: any[]) => any>;
+    setCursor: PropTypes.Validator<(...args: any[]) => any>;
+    setKeyHandler: PropTypes.Validator<(...args: any[]) => any>;
+    getDOMNode: PropTypes.Validator<(...args: any[]) => any>;
+}>>;

package/dist/components/prop-types.js.flow

@@ -0,0 +1,17 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+import PropTypes from "prop-types";
+declare export var keypadElementPropType: PropTypes.Requireable<
+  PropTypes.InferProps<{|
+    activate: PropTypes.Validator<(...args: any[]) => any>,
+    dismiss: PropTypes.Validator<(...args: any[]) => any>,
+    configure: PropTypes.Validator<(...args: any[]) => any>,
+    setCursor: PropTypes.Validator<(...args: any[]) => any>,
+    setKeyHandler: PropTypes.Validator<(...args: any[]) => any>,
+    getDOMNode: PropTypes.Validator<(...args: any[]) => any>,
+  |}>
+>;

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 {