@khanacademy/math-input 6.0.3 → 8.0.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @khanacademy/math-input
 
+## 8.0.0
+
+### Major Changes
+
+-   f9ee9d24: Move KeypadContext from Perseus to MathInput
+-   b18986d3: Replace Legacy/Mobile keypads with a component that switches between them
+
+## 7.0.0
+
+### Major Changes
+
+-   04e68d1c: Change keypadElement from LegacyKeypad to KeypadAPI
+
+### Minor Changes
+
+-   acafa72d: Add MobileKeypad to v2 keypad in MathInput
+
+### Patch Changes
+
+-   d0f28dbd: Add story for ExpressionEditor
+-   54590cc7: Add index.ts files to some dirs in MathInput for organization
+
 ## 6.0.3
 
 ### Patch Changes

package/dist/components/input/math-input.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
-import ProvidedKeypad from "../keypad-legacy/provided-keypad";
+import type { KeypadAPI } from "../../types";
 type Props = {
-    keypadElement: ProvidedKeypad;
+    keypadElement?: KeypadAPI;
     onBlur: () => void;
     onChange: (value: string, callback: any) => void;
     onFocus: () => void;

package/dist/components/input/math-input.js.flow

@@ -5,9 +5,9 @@
  * @flow
  */
 import * as React from "react";
-import ProvidedKeypad from "../keypad-legacy/provided-keypad";
+import type { KeypadAPI } from "../../types";
 declare type Props = {|
-  keypadElement: ProvidedKeypad,
+  keypadElement?: KeypadAPI,
   onBlur: () => void,
   onChange: (value: string, callback: any) => void,
   onFocus: () => void,

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

@@ -1,26 +1,2 @@
-/// <reference types="react" />
-import Key from "../../data/keys";
-import { ClickKeyCallback } from "../../types";
-import { CursorContext } from "../input/cursor-contexts";
-import type { SendEventFn } from "@khanacademy/perseus-core";
-export type Props = {
-    extraKeys: ReadonlyArray<Key>;
-    cursorContext?: typeof CursorContext[keyof typeof CursorContext];
-    showDismiss?: boolean;
-    multiplicationDot?: boolean;
-    divisionKey?: boolean;
-    trigonometry?: boolean;
-    preAlgebra?: boolean;
-    logarithms?: boolean;
-    basicRelations?: boolean;
-    advancedRelations?: boolean;
-    onClickKey: ClickKeyCallback;
-    sendEvent: SendEventFn;
-};
-declare function Keypad(props: Props): JSX.Element;
-declare namespace Keypad {
-    var defaultProps: {
-        extraKeys: never[];
-    };
-}
-export default Keypad;
+export { default } from "./keypad";
+export { default as MobileKeypad } from "./mobile-keypad";

package/dist/components/keypad/index.js.flow

@@ -4,34 +4,5 @@
  * Flowgen v1.21.0
  * @flow
  */
-import Key from "../../data/keys";
-import { ClickKeyCallback } from "../../types";
-import { CursorContext } from "../input/cursor-contexts";
-import type { SendEventFn } from "@khanacademy/perseus-core";
-export type Props = {|
-  extraKeys: $ReadOnlyArray<Key>,
-  cursorContext?: $ElementType<
-    typeof CursorContext,
-    $Keys<typeof CursorContext>
-  >,
-  showDismiss?: boolean,
-  multiplicationDot?: boolean,
-  divisionKey?: boolean,
-  trigonometry?: boolean,
-  preAlgebra?: boolean,
-  logarithms?: boolean,
-  basicRelations?: boolean,
-  advancedRelations?: boolean,
-  onClickKey: ClickKeyCallback,
-  sendEvent: SendEventFn,
-|};
-declare var Keypad: typeof npm$namespace$Keypad;
-
-declare var npm$namespace$Keypad: {|
-  (props: Props): React$Node,
-  defaultProps: typeof Keypad$defaultProps,
-|};
-declare var Keypad$defaultProps: {|
-  extraKeys: empty[],
-|};
-declare export default typeof Keypad;
+declare export { default } from "./keypad";
+declare export { default as MobileKeypad } from "./mobile-keypad";

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

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import Key from "../../data/keys";
+import { ClickKeyCallback } from "../../types";
+import { CursorContext } from "../input/cursor-contexts";
+import type { SendEventFn } from "@khanacademy/perseus-core";
+export type Props = {
+    extraKeys: ReadonlyArray<Key>;
+    cursorContext?: typeof CursorContext[keyof typeof CursorContext];
+    showDismiss?: boolean;
+    multiplicationDot?: boolean;
+    divisionKey?: boolean;
+    trigonometry?: boolean;
+    preAlgebra?: boolean;
+    logarithms?: boolean;
+    basicRelations?: boolean;
+    advancedRelations?: boolean;
+    onClickKey: ClickKeyCallback;
+    sendEvent: SendEventFn;
+};
+declare function Keypad(props: Props): JSX.Element;
+declare namespace Keypad {
+    var defaultProps: {
+        extraKeys: never[];
+    };
+}
+export default Keypad;

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

@@ -0,0 +1,37 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+import Key from "../../data/keys";
+import { ClickKeyCallback } from "../../types";
+import { CursorContext } from "../input/cursor-contexts";
+import type { SendEventFn } from "@khanacademy/perseus-core";
+export type Props = {|
+  extraKeys: $ReadOnlyArray<Key>,
+  cursorContext?: $ElementType<
+    typeof CursorContext,
+    $Keys<typeof CursorContext>
+  >,
+  showDismiss?: boolean,
+  multiplicationDot?: boolean,
+  divisionKey?: boolean,
+  trigonometry?: boolean,
+  preAlgebra?: boolean,
+  logarithms?: boolean,
+  basicRelations?: boolean,
+  advancedRelations?: boolean,
+  onClickKey: ClickKeyCallback,
+  sendEvent: SendEventFn,
+|};
+declare var Keypad: typeof npm$namespace$Keypad;
+
+declare var npm$namespace$Keypad: {|
+  (props: Props): React$Node,
+  defaultProps: typeof Keypad$defaultProps,
+|};
+declare var Keypad$defaultProps: {|
+  extraKeys: empty[],
+|};
+declare export default typeof Keypad;

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

@@ -0,0 +1,39 @@
+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";
+/**
+ * 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
+ * is responsible for connecting the keypad with MathInput and the Renderer.
+ *
+ * Ideally this strategy of attaching methods on the class component for
+ * other components to call will be replaced props/callbacks since React
+ * doesn't support this type of code anymore (functional components
+ * can't have methods attached to them).
+ */
+type Props = {
+    onElementMounted?: (arg1: any) => void;
+    onDismiss?: () => void;
+    style?: StyleType;
+};
+type State = {
+    active: boolean;
+    keypadConfig?: KeypadConfiguration;
+    keyHandler?: KeyHandler;
+    cursor?: Cursor;
+};
+declare class MobileKeypad extends React.Component<Props, State> implements KeypadAPI {
+    hasMounted: boolean;
+    state: State;
+    activate: () => void;
+    dismiss: () => void;
+    configure: (configuration: KeypadConfiguration, cb: () => void) => void;
+    setCursor: (cursor: Cursor) => void;
+    setKeyHandler: (keyHandler: KeyHandler) => void;
+    getDOMNode: () => ReturnType<typeof ReactDOM.findDOMNode>;
+    _handleClickKey(key: Key): void;
+    render(): React.ReactNode;
+}
+export default MobileKeypad;

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

@@ -0,0 +1,57 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+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";
+
+/**
+ * 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
+ * is responsible for connecting the keypad with MathInput and the Renderer.
+ *
+ * Ideally this strategy of attaching methods on the class component for
+ * other components to call will be replaced props/callbacks since React
+ * doesn't support this type of code anymore (functional components
+ * can't have methods attached to them).
+ */
+declare type Props = {|
+  onElementMounted?: (arg1: any) => void,
+  onDismiss?: () => void,
+  style?: StyleType,
+|};
+declare type State = {|
+  active: boolean,
+  keypadConfig?: KeypadConfiguration,
+  keyHandler?: KeyHandler,
+  cursor?: Cursor,
+|};
+declare class MobileKeypad
+  extends React.Component<Props, State>
+  implements KeypadAPI
+{
+  hasMounted: boolean;
+  state: State;
+  activate: () => void;
+  dismiss: () => void;
+  configure: (configuration: KeypadConfiguration, cb: () => void) => void;
+  setCursor: (cursor: Cursor) => void;
+  setKeyHandler: (keyHandler: KeyHandler) => void;
+  getDOMNode: () => $Call<
+    <R>((...args: any[]) => R) => R,
+    typeof ReactDOM.findDOMNode
+  >;
+  _handleClickKey(key: Key): void;
+  render(): React.Node;
+}
+declare export default typeof MobileKeypad;

package/dist/components/keypad/shared-keys.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { ClickKeyCallback } from "../../types";
 import { CursorContext } from "../input/cursor-contexts";
-import { TabbarItemType } from "../tabbar/types";
+import { TabbarItemType } from "../tabbar";
 type Props = {
     onClickKey: ClickKeyCallback;
     selectedPage: TabbarItemType;

package/dist/components/keypad/shared-keys.js.flow

@@ -6,7 +6,7 @@
  */
 import { ClickKeyCallback } from "../../types";
 import { CursorContext } from "../input/cursor-contexts";
-import { TabbarItemType } from "../tabbar/types";
+import { TabbarItemType } from "../tabbar";
 declare type Props = {|
   onClickKey: ClickKeyCallback,
   selectedPage: TabbarItemType,

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

@@ -0,0 +1,20 @@
+/**
+ * KeypadContext provides a way to the Keypad and (Server)ItemRenderer to
+ * communicate.
+ *
+ * The KeypadContext.Provider wraps the ExerciseFooter while KeypadContext.Consumer
+ * wraps each (Server)ItemRenderer render site and the Keypad rendered in the
+ * ExerciseFooter.
+ */
+import * as React from "react";
+import type { RendererInterface } from "@khanacademy/perseus-core";
+type KeypadContext = {
+    setKeypadElement: (keypadElement?: HTMLElement | null | undefined) => void;
+    keypadElement: HTMLElement | null | undefined;
+    setRenderer: (renderer?: RendererInterface | null | undefined) => void;
+    renderer: RendererInterface | null | undefined;
+    setScrollableElement: (scrollableElement?: HTMLElement | null | undefined) => void;
+    scrollableElement: HTMLElement | null | undefined;
+};
+declare const context: React.Context<KeypadContext>;
+export default context;

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

@@ -0,0 +1,18 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+import * as React from "react";
+import type { RendererInterface } from "@khanacademy/perseus-core";
+declare type KeypadContext = {|
+  setKeypadElement: (keypadElement?: HTMLElement | null | void) => void,
+  keypadElement: HTMLElement | null | void,
+  setRenderer: (renderer?: RendererInterface | null | void) => void,
+  renderer: RendererInterface | null | void,
+  setScrollableElement: (scrollableElement?: HTMLElement | null | void) => void,
+  scrollableElement: HTMLElement | null | void,
+|};
+declare var context: React.Context<KeypadContext>;
+declare export default typeof context;

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

@@ -0,0 +1 @@
+export { default } from "./provided-keypad";

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

@@ -0,0 +1,7 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+declare export { default } from "./provided-keypad";

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

@@ -44,9 +44,9 @@ declare class KeypadButton extends React.PureComponent<Props> {
 }
 declare const _default: import("react-redux").ConnectedComponent<typeof KeypadButton, import("react-redux").Omit<Pick<React.ClassAttributes<KeypadButton> & Props, "style" | "ref" | "ariaLabel" | "onTouchCancel" | "onTouchEnd" | "onTouchMove" | "onTouchStart" | "type" | "icon" | "key" | "heightPx" | "widthPx"> & {
     focused?: boolean | undefined;
+    disabled?: boolean | undefined;
     borders?: readonly (BorderDirection | undefined)[] | undefined;
     childKeys?: readonly NonManyKeyConfig[] | undefined;
-    disabled?: boolean | undefined;
     popoverEnabled?: boolean | undefined;
 } & {}, "heightPx" | "widthPx">>;
 export default _default;

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

@@ -67,9 +67,9 @@ declare var _default: $Flowgen$Import$react_2d_redux.ConnectedComponent<
       >,
       ...{|
         focused?: boolean | void,
+        disabled?: boolean | void,
         borders?: $ReadOnlyArray<BorderDirection | void> | void,
         childKeys?: $ReadOnlyArray<NonManyKeyConfig> | void,
-        disabled?: boolean | void,
         popoverEnabled?: boolean | void,
       |},
       ...{||},

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

@@ -35,5 +35,5 @@ declare class KeypadContainer extends React.Component<Props, State> {
     renderKeypad: () => JSX.Element;
     render(): JSX.Element;
 }
-declare const _default: import("react-redux").ConnectedComponent<typeof KeypadContainer, import("react-redux").Omit<React.ClassAttributes<KeypadContainer> & Props, "active" | "extraKeys" | "onPageSizeChange" | "keypadType" | "layoutMode" | "navigationPadEnabled">>;
+declare const _default: import("react-redux").ConnectedComponent<typeof KeypadContainer, import("react-redux").Omit<React.ClassAttributes<KeypadContainer> & Props, "active" | "extraKeys" | "keypadType" | "onPageSizeChange" | "layoutMode" | "navigationPadEnabled">>;
 export default _default;

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

@@ -48,8 +48,8 @@ declare var _default: $Flowgen$Import$react_2d_redux.ConnectedComponent<
     {| ...React.ClassAttributes<KeypadContainer>, ...Props |},
     | "active"
     | "extraKeys"
-    | "onPageSizeChange"
     | "keypadType"
+    | "onPageSizeChange"
     | "layoutMode"
     | "navigationPadEnabled"
   >

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

@@ -27,5 +27,5 @@ declare class Keypad extends React.Component<Props> {
     _onResize: () => void;
     render(): JSX.Element;
 }
-declare const _default: import("react-redux").ConnectedComponent<typeof Keypad, import("react-redux").Omit<React.ClassAttributes<Keypad> & Props, "popover" | "active" | "echoes" | "removeEcho">>;
+declare const _default: import("react-redux").ConnectedComponent<typeof Keypad, import("react-redux").Omit<React.ClassAttributes<Keypad> & Props, "active" | "popover" | "echoes" | "removeEcho">>;
 export default _default;

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

@@ -34,7 +34,7 @@ declare var _default: $Flowgen$Import$react_2d_redux.ConnectedComponent<
   typeof Keypad,
   $Flowgen$Import$react_2d_redux.Omit<
     {| ...React.ClassAttributes<Keypad>, ...Props |},
-    "popover" | "active" | "echoes" | "removeEcho"
+    "active" | "popover" | "echoes" | "removeEcho"
   >
 >;
 declare export default typeof _default;

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

@@ -1,13 +1,13 @@
 import * as React from "react";
 import ReactDOM from "react-dom";
-import type { Cursor, KeypadConfiguration, KeyHandler } from "../../types";
+import type { Cursor, KeypadConfiguration, KeyHandler, KeypadAPI } from "../../types";
 import type { StyleType } from "@khanacademy/wonder-blocks-core";
 type Props = {
     onElementMounted?: (arg1: any) => void;
     onDismiss?: () => void;
     style?: StyleType;
 };
-declare class ProvidedKeypad extends React.Component<Props> {
+declare class ProvidedKeypad extends React.Component<Props> implements KeypadAPI {
     store: any;
     constructor(props: any);
     activate: () => void;

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

@@ -6,14 +6,22 @@
  */
 import * as React from "react";
 import ReactDOM from "react-dom";
-import type { Cursor, KeypadConfiguration, KeyHandler } from "../../types";
+import type {
+  Cursor,
+  KeypadConfiguration,
+  KeyHandler,
+  KeypadAPI,
+} from "../../types";
 import type { StyleType } from "@khanacademy/wonder-blocks-core";
 declare type Props = {|
   onElementMounted?: (arg1: any) => void,
   onDismiss?: () => void,
   style?: StyleType,
 |};
-declare class ProvidedKeypad extends React.Component<Props> {
+declare class ProvidedKeypad
+  extends React.Component<Props>
+  implements KeypadAPI
+{
   store: any;
   constructor(props: any): this;
   activate: () => void;

package/dist/components/keypad-legacy/touchable-keypad-button.d.ts

@@ -33,5 +33,5 @@ declare class TouchableKeypadButton extends React.Component<Props> {
     componentWillUnmount(): void;
     render(): JSX.Element;
 }
-declare const _default: import("react-redux").ConnectedComponent<typeof TouchableKeypadButton, import("react-redux").Omit<React.ClassAttributes<TouchableKeypadButton> & Props, "style" | "ariaLabel" | "type" | "id" | "icon" | "childKeyIds" | "focused" | "borders" | "childKeys" | "disabled" | "popoverEnabled" | "gestureManager"> & OwnProps>;
+declare const _default: import("react-redux").ConnectedComponent<typeof TouchableKeypadButton, import("react-redux").Omit<React.ClassAttributes<TouchableKeypadButton> & Props, "style" | "ariaLabel" | "type" | "id" | "icon" | "focused" | "disabled" | "childKeyIds" | "borders" | "childKeys" | "popoverEnabled" | "gestureManager"> & OwnProps>;
 export default _default;

package/dist/components/keypad-legacy/touchable-keypad-button.js.flow

@@ -45,11 +45,11 @@ declare var _default: $Flowgen$Import$react_2d_redux.ConnectedComponent<
       | "type"
       | "id"
       | "icon"
-      | "childKeyIds"
       | "focused"
+      | "disabled"
+      | "childKeyIds"
       | "borders"
       | "childKeys"
-      | "disabled"
       | "popoverEnabled"
       | "gestureManager"
     >,

package/dist/components/keypad-legacy/two-page-keypad.d.ts

@@ -2,7 +2,7 @@
  * A keypad with two pages of keys.
  */
 import * as React from "react";
-import { TabbarItemType } from "../tabbar/types";
+import type { TabbarItemType } from "../tabbar";
 interface ReduxProps {
     paginationEnabled: boolean;
 }

package/dist/components/keypad-legacy/two-page-keypad.js.flow

@@ -6,7 +6,7 @@
  */
 import * as $Flowgen$Import$react_2d_redux from "react-redux";
 import * as React from "react";
-import { TabbarItemType } from "../tabbar/types";
+import type { TabbarItemType } from "../tabbar";
 declare interface ReduxProps {
   paginationEnabled: boolean;
 }

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { StyleType } from "@khanacademy/wonder-blocks-core";
+type Props = {
+    onElementMounted?: (arg1: any) => void;
+    onDismiss?: () => void;
+    style?: StyleType;
+    useV2Keypad?: boolean;
+};
+declare function KeypadSwitch(props: Props): JSX.Element;
+export default KeypadSwitch;

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

@@ -0,0 +1,15 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+import { StyleType } from "@khanacademy/wonder-blocks-core";
+declare type Props = {|
+  onElementMounted?: (arg1: any) => void,
+  onDismiss?: () => void,
+  style?: StyleType,
+  useV2Keypad?: boolean,
+|};
+declare function KeypadSwitch(props: Props): React$Node;
+declare export default typeof KeypadSwitch;

package/dist/components/tabbar/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./tabbar";
+export { TabbarItemType } from "./types";

package/dist/components/tabbar/index.js.flow

@@ -0,0 +1,8 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+declare export { default } from "./tabbar";
+declare export { TabbarItemType } from "./types";