@khanacademy/math-input 4.1.1 → 4.3.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @khanacademy/math-input
 
+## 4.3.0
+
+### Minor Changes
+
+-   cf29ed88: Update layout of MathInput's keypad
+
+## 4.2.0
+
+### Minor Changes
+
+-   d497118e: MathInput exports tools for generating MathFields, replacing the need for direct MathQuill access
+
+### Patch Changes
+
+-   e7d21b67: Add keypress logic from MathInput to key translator
+-   eceb4510: Updated aria-labels to be more descriptive and tests that used aria-labels.
+
 ## 4.1.1
 
 ### Patch Changes

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

@@ -9,7 +9,7 @@ import { MathFieldInterface, MathFieldCursor } from "./mathquill-types";
 declare class MathWrapper {
     mathField: MathFieldInterface;
     callbacks: any;
-    constructor(element: any, options?: {}, callbacks?: {});
+    constructor(element: any, callbacks?: {});
     focus(): void;
     blur(): void;
     /**

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

@@ -17,7 +17,7 @@ import { MathFieldInterface, MathFieldCursor } from "./mathquill-types";
 declare class MathWrapper {
   mathField: MathFieldInterface;
   callbacks: any;
-  constructor(element: any, options?: {||}, callbacks?: {||}): this;
+  constructor(element: any, callbacks?: {||}): this;
   focus(): void;
   blur(): void;
 

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

@@ -1,3 +1,14 @@
-import { MathQuillInterface } from "./mathquill-types";
-declare const _default: MathQuillInterface;
-export default _default;
+import { MathQuillInterface, MathFieldConfig } from "./mathquill-types";
+export declare const mathQuillInstance: MathQuillInterface;
+/**
+ * Creates a new [MathField](http://docs.mathquill.com/en/latest/Api_Methods/#mqmathfieldhtml_element-config)
+ * instance within the given `container`.
+ *
+ * An optional configuration callback can be provided to customize
+ * the created MathField. A default configuration is passed to this
+ * callback which can then be adjusted as needed. The configuration
+ * returned from this callback is used to create the MathField.
+ * This allows callers to do minimal configuration as only configs
+ * that vary from the default need to be provided.
+ */
+export declare function createMathField(container: HTMLDivElement | HTMLSpanElement, configCallback?: (baseConfig: MathFieldConfig) => MathFieldConfig): import("./mathquill-types").MathFieldInterface;

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

@@ -4,6 +4,21 @@
  * Flowgen v1.21.0
  * @flow
  */
-import { MathQuillInterface } from "./mathquill-types";
-declare var _default: MathQuillInterface;
-declare export default typeof _default;
+import * as $Flowgen$Import$_2e__2f_mathquill_2d_types from "./mathquill-types";
+import { MathQuillInterface, MathFieldConfig } from "./mathquill-types";
+declare export var mathQuillInstance: MathQuillInterface;
+/**
+ * Creates a new [MathField](http://docs.mathquill.com/en/latest/Api_Methods/#mqmathfieldhtml_element-config)
+ * instance within the given `container`.
+ *
+ * An optional configuration callback can be provided to customize
+ * the created MathField. A default configuration is passed to this
+ * callback which can then be adjusted as needed. The configuration
+ * returned from this callback is used to create the MathField.
+ * This allows callers to do minimal configuration as only configs
+ * that vary from the default need to be provided.
+ */
+declare export function createMathField(
+  container: HTMLDivElement | HTMLSpanElement,
+  configCallback?: (baseConfig: MathFieldConfig) => MathFieldConfig
+): $Flowgen$Import$_2e__2f_mathquill_2d_types.MathFieldInterface;

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

@@ -2,17 +2,40 @@ import Key from "../../data/keys";
 export interface MathQuillInterface {
     L: "L";
     R: "R";
-    MathField: (mount: HTMLDivElement, options: any) => MathFieldInterface;
+    MathField: (mount: HTMLDivElement | HTMLSpanElement, config: MathFieldConfig) => MathFieldInterface;
 }
+type MathQuillDir = "L" | "R";
+export type MathFieldConfig = {
+    spaceBehavesLikeTab?: boolean;
+    leftRightIntoCmdGoes?: string;
+    restrictMismatchedBrackets?: boolean;
+    sumStartsWithNEquals?: boolean;
+    supSubsRequireOperand?: boolean;
+    charsThatBreakOutOfSupSub?: string;
+    autoSubscriptNumerals?: boolean;
+    autoCommands?: string;
+    autoOperatorNames?: string;
+    maxDepth?: number;
+    substituteTextarea?: () => HTMLElement;
+    handlers?: {
+        edit?: (mathField: MathFieldInterface) => void;
+        upOutOf?: (mathField: MathFieldInterface) => void;
+        moveOutOf?: (dir: MathQuillDir, mathField: MathFieldInterface) => void;
+    };
+};
 export interface MathFieldInterface {
-    write: (input: string) => void;
-    cmd: (input: string) => void;
-    keystroke: (input: string) => void;
-    typedText: (input: string) => void;
+    focus: () => MathFieldInterface;
+    blur: () => MathFieldInterface;
+    write: (input: string) => MathFieldInterface;
+    cmd: (input: string) => MathFieldInterface;
+    keystroke: (input: string) => MathFieldInterface;
+    typedText: (input: string) => MathFieldInterface;
     latex: (input?: string) => string;
     moveToDirEnd: (direction: "L" | "R") => void;
     select: () => void;
     clearSelection: () => void;
+    cursorAtRightEnd: () => boolean;
+    cursorAtLeftEnd: () => boolean;
     __controller: any;
 }
 export declare enum MathFieldActionType {
@@ -22,4 +45,5 @@ export declare enum MathFieldActionType {
     MQ_END = 0
 }
 export type MathFieldCursor = any;
-export type MathQuillUpdaterCallback = (mathQuill: MathFieldInterface, key: Key) => void;
+export type MathFieldUpdaterCallback = (mathField: MathFieldInterface, key: Key) => void;
+export {};

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

@@ -8,17 +8,43 @@ import Key from "../../data/keys";
 export interface MathQuillInterface {
   L: "L";
   R: "R";
-  MathField: (mount: HTMLDivElement, options: any) => MathFieldInterface;
+  MathField: (
+    mount: HTMLDivElement | HTMLSpanElement,
+    config: MathFieldConfig
+  ) => MathFieldInterface;
 }
+declare type MathQuillDir = "L" | "R";
+export type MathFieldConfig = {|
+  spaceBehavesLikeTab?: boolean,
+  leftRightIntoCmdGoes?: string,
+  restrictMismatchedBrackets?: boolean,
+  sumStartsWithNEquals?: boolean,
+  supSubsRequireOperand?: boolean,
+  charsThatBreakOutOfSupSub?: string,
+  autoSubscriptNumerals?: boolean,
+  autoCommands?: string,
+  autoOperatorNames?: string,
+  maxDepth?: number,
+  substituteTextarea?: () => HTMLElement,
+  handlers?: {|
+    edit?: (mathField: MathFieldInterface) => void,
+    upOutOf?: (mathField: MathFieldInterface) => void,
+    moveOutOf?: (dir: MathQuillDir, mathField: MathFieldInterface) => void,
+  |},
+|};
 export interface MathFieldInterface {
-  write: (input: string) => void;
-  cmd: (input: string) => void;
-  keystroke: (input: string) => void;
-  typedText: (input: string) => void;
+  focus: () => MathFieldInterface;
+  blur: () => MathFieldInterface;
+  write: (input: string) => MathFieldInterface;
+  cmd: (input: string) => MathFieldInterface;
+  keystroke: (input: string) => MathFieldInterface;
+  typedText: (input: string) => MathFieldInterface;
   latex: (input?: string) => string;
   moveToDirEnd: (direction: "L" | "R") => void;
   select: () => void;
   clearSelection: () => void;
+  cursorAtRightEnd: () => boolean;
+  cursorAtLeftEnd: () => boolean;
   __controller: any;
 }
 declare export var MathFieldActionType: {|
@@ -28,7 +54,7 @@ declare export var MathFieldActionType: {|
   +MQ_END: 0, // 0
 |};
 export type MathFieldCursor = any;
-export type MathQuillUpdaterCallback = (
-  mathQuill: MathFieldInterface,
+export type MathFieldUpdaterCallback = (
+  mathField: MathFieldInterface,
   key: Key
 ) => void;

package/dist/components/key-handlers/handle-arrow.d.ts

@@ -0,0 +1,3 @@
+import Key from "../../data/keys";
+import { MathFieldInterface } from "../input/mathquill-types";
+export default function handleArrow(mathField: MathFieldInterface, key: Key): void;

package/dist/components/{input/key-handlers → key-handlers}/handle-arrow.js.flow

@@ -4,8 +4,8 @@
  * Flowgen v1.21.0
  * @flow
  */
-import Key from "../../../data/keys";
-import { MathFieldInterface } from "../mathquill-types";
+import Key from "../../data/keys";
+import { MathFieldInterface } from "../input/mathquill-types";
 declare export default function handleArrow(
   mathField: MathFieldInterface,
   key: Key

package/dist/components/{input/key-handlers → key-handlers}/handle-backspace.d.ts

@@ -1,4 +1,4 @@
-import { MathFieldInterface } from "../mathquill-types";
+import { MathFieldInterface } from "../input/mathquill-types";
 /**
  * Selects and deletes part of the expression based on the cursor location.
  * See inline comments for precise behavior of different cases.

package/dist/components/{input/key-handlers → key-handlers}/handle-backspace.js.flow

@@ -4,7 +4,7 @@
  * Flowgen v1.21.0
  * @flow
  */
-import { MathFieldInterface } from "../mathquill-types";
+import { MathFieldInterface } from "../input/mathquill-types";
 
 /**
  * Selects and deletes part of the expression based on the cursor location.

package/dist/components/key-handlers/handle-exponent.d.ts

@@ -0,0 +1,3 @@
+import Key from "../../data/keys";
+import { MathFieldInterface } from "../input/mathquill-types";
+export default function handleExponent(mathField: MathFieldInterface, key: Key): void;

package/dist/components/{input/key-handlers → key-handlers}/handle-exponent.js.flow

@@ -4,8 +4,8 @@
  * Flowgen v1.21.0
  * @flow
  */
-import Key from "../../../data/keys";
-import { MathFieldInterface } from "../mathquill-types";
+import Key from "../../data/keys";
+import { MathFieldInterface } from "../input/mathquill-types";
 declare export default function handleExponent(
   mathField: MathFieldInterface,
   key: Key

package/dist/components/{input/key-handlers → key-handlers}/handle-jump-out.d.ts

@@ -1,5 +1,5 @@
-import Key from "../../../data/keys";
-import { MathFieldInterface } from "../mathquill-types";
+import Key from "../../data/keys";
+import { MathFieldInterface } from "../input/mathquill-types";
 /**
  * Advances the cursor to the next logical position.
  */

package/dist/components/{input/key-handlers → key-handlers}/handle-jump-out.js.flow

@@ -4,8 +4,8 @@
  * Flowgen v1.21.0
  * @flow
  */
-import Key from "../../../data/keys";
-import { MathFieldInterface } from "../mathquill-types";
+import Key from "../../data/keys";
+import { MathFieldInterface } from "../input/mathquill-types";
 
 /**
  * Advances the cursor to the next logical position.

package/dist/components/key-handlers/key-translator.d.ts

@@ -0,0 +1,4 @@
+import Key from "../../data/keys";
+import { MathFieldUpdaterCallback } from "../input/mathquill-types";
+declare const keyToMathquillMap: Record<Key, MathFieldUpdaterCallback>;
+export default keyToMathquillMap;

package/dist/components/{key-translator.js.flow → key-handlers/key-translator.js.flow}

@@ -4,7 +4,7 @@
  * Flowgen v1.21.0
  * @flow
  */
-import Key from "../data/keys";
-import { MathQuillUpdaterCallback } from "./input/mathquill-types";
-declare var keyToMathquillMap: { [key: Key]: MathQuillUpdaterCallback };
+import Key from "../../data/keys";
+import { MathFieldUpdaterCallback } from "../input/mathquill-types";
+declare var keyToMathquillMap: { [key: Key]: MathFieldUpdaterCallback };
 declare export default typeof keyToMathquillMap;

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

@@ -1,23 +1,15 @@
-import * as React from "react";
+/// <reference types="react" />
 import Key from "../../data/keys";
 import { ClickKeyCallback } from "../../types";
-import { TabbarItemType } from "../tabbar/types";
-import { NumbersPageOptions } from "./numbers-page/types";
-import { OperatorsButtonSets } from "./operators-page/types";
 export type Props = {
     onClickKey: ClickKeyCallback;
     trigonometry?: boolean;
     extraKeys: ReadonlyArray<Key>;
-} & OperatorsButtonSets & NumbersPageOptions;
-type State = {
-    selectedPage: TabbarItemType;
+    multiplicationDot?: boolean;
+    divisionKey?: boolean;
+    preAlgebra?: boolean;
+    logarithms?: boolean;
+    basicRelations?: boolean;
+    advancedRelations?: boolean;
 };
-type DefaultProps = {
-    extraKeys: Props["extraKeys"];
-};
-export default class Keypad extends React.Component<Props, State> {
-    state: State;
-    static defaultProps: DefaultProps;
-    render(): React.ReactNode;
-}
-export {};
+export default function Keypad(props: Props): JSX.Element;

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

@@ -4,29 +4,17 @@
  * Flowgen v1.21.0
  * @flow
  */
-import * as React from "react";
 import Key from "../../data/keys";
 import { ClickKeyCallback } from "../../types";
-import { TabbarItemType } from "../tabbar/types";
-import { NumbersPageOptions } from "./numbers-page/types";
-import { OperatorsButtonSets } from "./operators-page/types";
 export type Props = {|
-  ...{|
-    onClickKey: ClickKeyCallback,
-    trigonometry?: boolean,
-    extraKeys: $ReadOnlyArray<Key>,
-  |},
-  ...OperatorsButtonSets,
-  ...NumbersPageOptions,
+  onClickKey: ClickKeyCallback,
+  trigonometry?: boolean,
+  extraKeys: $ReadOnlyArray<Key>,
+  multiplicationDot?: boolean,
+  divisionKey?: boolean,
+  preAlgebra?: boolean,
+  logarithms?: boolean,
+  basicRelations?: boolean,
+  advancedRelations?: boolean,
 |};
-declare type State = {|
-  selectedPage: TabbarItemType,
-|};
-declare type DefaultProps = {|
-  extraKeys: $PropertyType<Props, "extraKeys">,
-|};
-declare export default class Keypad extends React.Component<Props, State> {
-  state: State;
-  static defaultProps: DefaultProps;
-  render(): React.Node;
-}
+declare export default function Keypad(props: Props): React$Node;

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

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { KeyConfig, ClickKeyCallback } from "../../types";
+import type { StyleType } from "@khanacademy/wonder-blocks-core";
+export type KeypadButtonProps = {
+    coord: readonly [number, number];
+    keyConfig: KeyConfig;
+    onClickKey: ClickKeyCallback;
+    action?: boolean;
+    secondary?: boolean;
+    style?: StyleType;
+};
+export declare const KeypadButton: ({ coord, keyConfig, onClickKey, style, secondary, action, }: KeypadButtonProps) => React.ReactElement;

package/dist/components/keypad/keypad-button.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 { KeyConfig, ClickKeyCallback } from "../../types";
+import type { StyleType } from "@khanacademy/wonder-blocks-core";
+export type KeypadButtonProps = {|
+  coord: [number, number],
+  keyConfig: KeyConfig,
+  onClickKey: ClickKeyCallback,
+  action?: boolean,
+  secondary?: boolean,
+  style?: StyleType,
+|};
+declare export var KeypadButton: (x: KeypadButtonProps) => React.Element<any>;

package/dist/components/keypad/keypad-pages/extras-page.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import Key from "../../../data/keys";
+import { ClickKeyCallback } from "../../../types";
+type Props = {
+    extraKeys: ReadonlyArray<Key>;
+    onClickKey: ClickKeyCallback;
+};
+export default function ExtrasPage(props: Props): JSX.Element;
+export {};

package/dist/components/keypad/{operators-page/basic-relations-buttons.js.flow → keypad-pages/extras-page.js.flow}

@@ -4,10 +4,10 @@
  * Flowgen v1.21.0
  * @flow
  */
-import React from "react";
+import Key from "../../../data/keys";
 import { ClickKeyCallback } from "../../../types";
 declare type Props = {|
+  extraKeys: $ReadOnlyArray<Key>,
   onClickKey: ClickKeyCallback,
-  placeholder?: boolean,
 |};
-declare export var BasicRelations: (x: Props) => React.ReactElement;
+declare export default function ExtrasPage(props: Props): React$Node;

package/dist/components/keypad/keypad-pages/geometry-page.d.ts

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

package/dist/components/keypad/{operators-page/logarithms-buttons.js.flow → keypad-pages/geometry-page.js.flow}

@@ -4,10 +4,8 @@
  * Flowgen v1.21.0
  * @flow
  */
-import React from "react";
 import { ClickKeyCallback } from "../../../types";
 declare type Props = {|
   onClickKey: ClickKeyCallback,
-  placeholder?: boolean,
 |};
-declare export var Logarithms: (x: Props) => React.ReactElement;
+declare export default function GeometryPage(props: Props): React$Node;

package/dist/components/keypad/keypad-pages/numbers-page.d.ts

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

package/dist/components/keypad/{operators-page/pre-algebra-buttons.js.flow → keypad-pages/numbers-page.js.flow}

@@ -4,10 +4,8 @@
  * Flowgen v1.21.0
  * @flow
  */
-import React from "react";
 import { ClickKeyCallback } from "../../../types";
 declare type Props = {|
   onClickKey: ClickKeyCallback,
-  placeholder?: boolean,
 |};
-declare export var PreAlgebra: (x: Props) => React.ReactElement;
+declare export default function NumbersPage(props: Props): React$Node;

package/dist/components/keypad/keypad-pages/operators-page.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { ClickKeyCallback } from "../../../types";
+type Props = {
+    onClickKey: ClickKeyCallback;
+    preAlgebra?: boolean;
+    logarithms?: boolean;
+    basicRelations?: boolean;
+    advancedRelations?: boolean;
+};
+export default function OperatorsPage(props: Props): JSX.Element;
+export {};

package/dist/components/keypad/{geometry-page/index.js.flow → keypad-pages/operators-page.js.flow}

@@ -4,11 +4,12 @@
  * Flowgen v1.21.0
  * @flow
  */
-import * as React from "react";
 import { ClickKeyCallback } from "../../../types";
 declare type Props = {|
   onClickKey: ClickKeyCallback,
+  preAlgebra?: boolean,
+  logarithms?: boolean,
+  basicRelations?: boolean,
+  advancedRelations?: boolean,
 |};
-declare export default class GeometryPage extends React.Component<Props> {
-  render(): React.Node;
-}
+declare export default function OperatorsPage(props: Props): React$Node;

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

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

package/dist/components/keypad/{numbers-page/types.js.flow → shared-keys.js.flow}

@@ -4,7 +4,10 @@
  * Flowgen v1.21.0
  * @flow
  */
-export type NumbersPageOptions = {|
+import { ClickKeyCallback } from "../../types";
+declare type Props = {|
+  onClickKey: ClickKeyCallback,
   multiplicationDot?: boolean,
   divisionKey?: boolean,
 |};
+declare export default function SharedKeys(props: Props): React$Node;