@khanacademy/math-input 0.6.7 → 0.7.0

package/src/components/keypad/{button.js → button.tsx}

@@ -1,4 +1,3 @@
-// @flow
 import Clickable from "@khanacademy/wonder-blocks-clickable";
 import Color from "@khanacademy/wonder-blocks-color";
 import {View} from "@khanacademy/wonder-blocks-core";
@@ -6,6 +5,7 @@ import {StyleSheet} from "aphrodite";
 import * as React from "react";
 
 import type {StyleType} from "@khanacademy/wonder-blocks-core";
+// @ts-expect-error [FEI-5003] - TS2305 - Module '"react"' has no exported member 'Node'.
 import type {Node} from "React";
 
 const styles = StyleSheet.create({
@@ -60,16 +60,16 @@ const styles = StyleSheet.create({
     },
 });
 
-type Props = {|
-    onPress: () => void,
-    children: Node,
-    style?: StyleType,
-    tintColor?: string,
-|};
+type Props = {
+    onPress: () => void;
+    children: Node;
+    style?: StyleType;
+    tintColor?: string;
+};
 
-type State = {};
+type State = Record<any, any>;
 export default class Button extends React.Component<Props, State> {
-    render(): React.Node {
+    render(): React.ReactNode {
         const {onPress, children, style, tintColor} = this.props;
         return (
             <View style={style}>

package/src/components/keypad/{index.js → index.tsx}

@@ -1,25 +1,24 @@
-//@flow
 import {View} from "@khanacademy/wonder-blocks-core";
 import * as React from "react";
 
-import Tabbar from "../tabbar/tabbar.js";
+import Tabbar from "../tabbar/tabbar";
 
-import NumericInputPage from "./numeric-input-page.js";
-import PreAlgebraPage from "./pre-algebra-page.js";
-import TrigonometryPage from "./trigonometry-page.js";
+import NumericInputPage from "./numeric-input-page";
+import PreAlgebraPage from "./pre-algebra-page";
+import TrigonometryPage from "./trigonometry-page";
 
-import type {TabbarItemType} from "../tabbar/types.js";
+import type {TabbarItemType} from "../tabbar/types";
 
-type Props = {|
-    onClickKey: (keyConfig: string) => void,
-    preAlgebra: boolean,
-    trigonometry: boolean,
-|};
+type Props = {
+    onClickKey: (keyConfig: string) => void;
+    preAlgebra: boolean;
+    trigonometry: boolean;
+};
 type State = {
-    selectedPage: TabbarItemType,
+    selectedPage: TabbarItemType;
 };
 
-function allPages(props: Props): Array<TabbarItemType> {
+const allPages: React.FC<Props> = function (props): React.ReactElement {
     const pages: Array<TabbarItemType> = ["Numbers"];
 
     if (props.preAlgebra) {
@@ -28,14 +27,15 @@ function allPages(props: Props): Array<TabbarItemType> {
     if (props.trigonometry) {
         pages.push("Geometry");
     }
+    // @ts-expect-error [FEI-5003] - TS2739 - Type 'TabbarItemType[]' is missing the following properties from type 'ReactElement<any, string | JSXElementConstructor<any>>': type, props, key
     return pages;
-}
+};
 
 export default class PreAlgebraKeypad extends React.Component<Props, State> {
     state: State = {
         selectedPage: "Numbers",
     };
-    render(): React.Node {
+    render(): React.ReactNode {
         const {selectedPage} = this.state;
         const {onClickKey} = this.props;
 
@@ -44,6 +44,7 @@ export default class PreAlgebraKeypad extends React.Component<Props, State> {
         return (
             <View>
                 <Tabbar
+                    // @ts-expect-error [FEI-5003] - TS2769 - No overload matches this call.
                     items={availablePages}
                     onSelect={(tabbarItem: TabbarItemType) => {
                         this.setState({selectedPage: tabbarItem});

package/src/components/keypad/{keypad-page-items.js → keypad-page-items.tsx}

@@ -1,19 +1,17 @@
-// @flow
 import {View} from "@khanacademy/wonder-blocks-core";
 import * as React from "react";
 
-import ButtonAsset from "./button-assets.js";
-import Button from "./button.js";
+import Button from "./button";
+import ButtonAsset from "./button-assets";
 
-import type {KeyConfig} from "../../data/key-configs.js";
+import type {KeyConfig} from "../../data/key-configs";
 import type {StyleType} from "@khanacademy/wonder-blocks-core";
+// @ts-expect-error [FEI-5003] - TS2305 - Module '"react"' has no exported member 'Node'.
 import type {Node} from "React";
 
-export const KeypadPageContainer = ({
-    children,
-}: {
-    children: Node,
-}): React.Node => (
+export const KeypadPageContainer: React.FC<{
+    children: Node;
+}> = ({children}): React.ReactElement => (
     <View
         style={{
             backgroundColor: "#DBDCDD",
@@ -29,17 +27,12 @@ export const KeypadPageContainer = ({
     </View>
 );
 
-export const KeypadButton = ({
-    keyConfig,
-    onClickKey,
-    tintColor,
-    style,
-}: {
-    keyConfig: KeyConfig,
-    tintColor?: string,
-    style?: StyleType,
-    onClickKey: (keyConfig: string) => void,
-}): React.Node => (
+export const KeypadButton: React.FC<{
+    keyConfig: KeyConfig;
+    tintColor?: string;
+    style?: StyleType;
+    onClickKey: (keyConfig: string) => void;
+}> = ({keyConfig, onClickKey, tintColor, style}): React.ReactElement => (
     <Button
         onPress={() => onClickKey(keyConfig.id)}
         tintColor={tintColor}
@@ -49,15 +42,11 @@ export const KeypadButton = ({
     </Button>
 );
 
-export const SecondaryKeypadButton = ({
-    keyConfig,
-    onClickKey,
-    style,
-}: {
-    keyConfig: KeyConfig,
-    style?: any,
-    onClickKey: (keyConfig: string) => void,
-}): React.Node => (
+export const SecondaryKeypadButton: React.FC<{
+    keyConfig: KeyConfig;
+    style?: any;
+    onClickKey: (keyConfig: string) => void;
+}> = ({keyConfig, onClickKey, style}): React.ReactElement => (
     <KeypadButton
         keyConfig={keyConfig}
         onClickKey={onClickKey}
@@ -66,15 +55,11 @@ export const SecondaryKeypadButton = ({
     />
 );
 
-export const KeypadActionButton = ({
-    keyConfig,
-    onClickKey,
-    style,
-}: {
-    keyConfig: KeyConfig,
-    style?: any,
-    onClickKey: (keyConfig: string) => void,
-}): React.Node => (
+export const KeypadActionButton: React.FC<{
+    keyConfig: KeyConfig;
+    style?: any;
+    onClickKey: (keyConfig: string) => void;
+}> = ({keyConfig, onClickKey, style}): React.ReactElement => (
     <KeypadButton
         keyConfig={keyConfig}
         onClickKey={onClickKey}
@@ -83,7 +68,7 @@ export const KeypadActionButton = ({
     />
 );
 
-export const PlaceHolderButton = (): React.Node => (
+export const PlaceHolderButton = (): React.ReactElement => (
     <View
         style={{
             height: "100%",

package/src/components/keypad/{keypad-pages.stories.js → keypad-pages.stories.tsx}

@@ -1,12 +1,10 @@
-//@flow
-
 import {action} from "@storybook/addon-actions";
 import {withKnobs} from "@storybook/addon-knobs";
 import * as React from "react";
 
-import NumericInputPage from "./numeric-input-page.js";
-import PrealgebraInputPage from "./pre-algebra-page.js";
-import TrigonometryInputPage from "./trigonometry-page.js";
+import NumericInputPage from "./numeric-input-page";
+import PrealgebraInputPage from "./pre-algebra-page";
+import TrigonometryInputPage from "./trigonometry-page";
 
 export default {
     title: "Keypad pages",
@@ -19,14 +17,14 @@ export default {
     },
 };
 
-export const NumericInput = (): React.Node => (
+export const NumericInput = (): React.ReactElement => (
     <NumericInputPage onClickKey={action("onClickKey")} />
 );
 
-export const PreAlgebraInput = (): React.Node => (
+export const PreAlgebraInput = (): React.ReactElement => (
     <PrealgebraInputPage onClickKey={action("onClickKey")} />
 );
 
-export const TrigonometryInput = (): React.Node => (
+export const TrigonometryInput = (): React.ReactElement => (
     <TrigonometryInputPage onClickKey={action("onClickKey")} />
 );

package/src/components/keypad/{keypad.stories.js → keypad.stories.tsx}

@@ -1,11 +1,9 @@
-//@flow
-
 import {action} from "@storybook/addon-actions";
 import {withKnobs} from "@storybook/addon-knobs";
 import {INITIAL_VIEWPORTS} from "@storybook/addon-viewport";
 import * as React from "react";
 
-import Keypad from "./index.js";
+import Keypad from "./index";
 
 export default {
     title: "Full Keypad",
@@ -18,7 +16,7 @@ export default {
     },
 };
 
-export const PreAlgebra = (): React.Node => (
+export const PreAlgebra = (): React.ReactElement => (
     <Keypad
         onClickKey={action("onClickKey")}
         preAlgebra={true}
@@ -26,7 +24,7 @@ export const PreAlgebra = (): React.Node => (
     />
 );
 
-export const Trigonometry = (): React.Node => (
+export const Trigonometry = (): React.ReactElement => (
     <Keypad
         onClickKey={action("onClickKey")}
         preAlgebra={true}

package/src/components/keypad/{numeric-input-page.js → numeric-input-page.tsx}

@@ -1,21 +1,20 @@
-// @flow
 import * as React from "react";
 
-import Keys from "../../data/key-configs.js";
+import Keys from "../../data/key-configs";
 
 import {
     KeypadPageContainer,
     KeypadButton,
     SecondaryKeypadButton,
     KeypadActionButton,
-} from "./keypad-page-items.js";
+} from "./keypad-page-items";
 
-type Props = {|
-    onClickKey: (keyConfig: string) => void,
-|};
+type Props = {
+    onClickKey: (keyConfig: string) => void;
+};
 
 export default class NumericInputPage extends React.Component<Props> {
-    render(): React.Node {
+    render(): React.ReactNode {
         const {onClickKey} = this.props;
         return (
             <KeypadPageContainer>

package/src/components/keypad/{pre-algebra-page.js → pre-algebra-page.tsx}

@@ -1,21 +1,20 @@
-// @flow
 import * as React from "react";
 
-import Keys from "../../data/key-configs.js";
+import Keys from "../../data/key-configs";
 
 import {
     KeypadPageContainer,
     SecondaryKeypadButton,
     KeypadActionButton,
     PlaceHolderButton,
-} from "./keypad-page-items.js";
+} from "./keypad-page-items";
 
-type Props = {|
-    onClickKey: (keyConfig: string) => void,
-|};
+type Props = {
+    onClickKey: (keyConfig: string) => void;
+};
 
-export default class NumericInputPage extends React.Component<Props> {
-    render(): React.Node {
+export default class PreAlgebraPage extends React.Component<Props> {
+    render(): React.ReactNode {
         const {onClickKey} = this.props;
         return (
             <KeypadPageContainer>

package/src/components/keypad/{trigonometry-page.js → trigonometry-page.tsx}

@@ -1,20 +1,19 @@
-// @flow
 import * as React from "react";
 
-import Keys from "../../data/key-configs.js";
+import Keys from "../../data/key-configs";
 
 import {
     KeypadPageContainer,
     SecondaryKeypadButton,
     KeypadActionButton,
-} from "./keypad-page-items.js";
+} from "./keypad-page-items";
 
-type Props = {|
-    onClickKey: (keyConfig: string) => void,
-|};
+type Props = {
+    onClickKey: (keyConfig: string) => void;
+};
 
 export default class TrigonometryInputPage extends React.Component<Props> {
-    render(): React.Node {
+    render(): React.ReactNode {
         const {onClickKey} = this.props;
         return (
             <KeypadPageContainer>

package/src/components/keypad-button.js

@@ -7,8 +7,8 @@ import PropTypes from "prop-types";
 import * as React from "react";
 import {connect} from "react-redux";
 
-import {KeyTypes, BorderDirections, BorderStyles} from "../consts.js";
-import {View} from "../fake-react-native-web/index.js";
+import {KeyTypes, BorderDirections, BorderStyles} from "../consts";
+import {View} from "../fake-react-native-web/index";
 
 import {
     wonderBlocksBlue,
@@ -19,15 +19,11 @@ import {
     operatorGrey,
     controlGrey,
     emptyGrey,
-} from "./common-style.js";
-import CornerDecal from "./corner-decal.js";
-import Icon from "./icon.js";
-import MultiSymbolGrid from "./multi-symbol-grid.js";
-import {
-    bordersPropType,
-    iconPropType,
-    keyConfigPropType,
-} from "./prop-types.js";
+} from "./common-style";
+import CornerDecal from "./corner-decal";
+import Icon from "./icon";
+import MultiSymbolGrid from "./multi-symbol-grid";
+import {bordersPropType, iconPropType, keyConfigPropType} from "./prop-types";
 
 // eslint-disable-next-line react/no-unsafe
 class KeypadButton extends React.PureComponent {

package/src/components/keypad-container.js

@@ -3,22 +3,22 @@ import PropTypes from "prop-types";
 import * as React from "react";
 import {connect} from "react-redux";
 
-import {setPageSize} from "../actions/index.js";
-import {KeypadTypes, LayoutModes} from "../consts.js";
-import {View} from "../fake-react-native-web/index.js";
+import {setPageSize} from "../actions/index";
+import {KeypadTypes, LayoutModes} from "../consts";
+import {View} from "../fake-react-native-web/index";
 
 import {
     innerBorderColor,
     innerBorderStyle,
     innerBorderWidthPx,
     compactKeypadBorderRadiusPx,
-} from "./common-style.js";
-import ExpressionKeypad from "./expression-keypad.js";
-import FractionKeypad from "./fraction-keypad.js";
-import NavigationPad from "./navigation-pad.js";
-import {keyIdPropType} from "./prop-types.js";
-import Styles from "./styles.js";
-import * as zIndexes from "./z-indexes.js";
+} from "./common-style";
+import ExpressionKeypad from "./expression-keypad";
+import FractionKeypad from "./fraction-keypad";
+import NavigationPad from "./navigation-pad";
+import {keyIdPropType} from "./prop-types";
+import Styles from "./styles";
+import * as zIndexes from "./z-indexes";
 
 const {row, centered, fullWidth} = Styles;
 
@@ -270,14 +270,10 @@ const inlineStyles = {
     },
 
     hidden: {
-        msTransform: "translate3d(0, 100%, 0)",
-        WebkitTransform: "translate3d(0, 100%, 0)",
         transform: "translate3d(0, 100%, 0)",
     },
 
     active: {
-        msTransform: "translate3d(0, 0, 0)",
-        WebkitTransform: "translate3d(0, 0, 0)",
         transform: "translate3d(0, 0, 0)",
     },
 };

package/src/components/keypad.js

@@ -8,12 +8,12 @@ import * as React from "react";
 import ReactDOM from "react-dom";
 import {connect} from "react-redux";
 
-import {removeEcho} from "../actions/index.js";
-import {View} from "../fake-react-native-web/index.js";
+import {removeEcho} from "../actions/index";
+import {View} from "../fake-react-native-web/index";
 
-import EchoManager from "./echo-manager.js";
-import PopoverManager from "./popover-manager.js";
-import {echoPropType, popoverPropType} from "./prop-types.js";
+import EchoManager from "./echo-manager";
+import PopoverManager from "./popover-manager";
+import {echoPropType, popoverPropType} from "./prop-types";
 
 // eslint-disable-next-line react/no-unsafe
 class Keypad extends React.Component {

package/src/components/many-keypad-button.js

@@ -6,13 +6,13 @@
 import PropTypes from "prop-types";
 import * as React from "react";
 
-import {KeyTypes} from "../consts.js";
-import KeyConfigs from "../data/key-configs.js";
-import Keys from "../data/keys.js";
+import {KeyTypes} from "../consts";
+import KeyConfigs from "../data/key-configs";
+import Keys from "../data/keys";
 
-import EmptyKeypadButton from "./empty-keypad-button.js";
-import {keyIdPropType} from "./prop-types.js";
-import TouchableKeypadButton from "./touchable-keypad-button.js";
+import EmptyKeypadButton from "./empty-keypad-button";
+import {keyIdPropType} from "./prop-types";
+import TouchableKeypadButton from "./touchable-keypad-button";
 
 class ManyKeypadButton extends React.Component {
     static propTypes = {

package/src/components/math-icon.js

@@ -8,10 +8,10 @@ import PropTypes from "prop-types";
 import * as React from "react";
 import ReactDOM from "react-dom";
 
-import {View} from "../fake-react-native-web/index.js";
+import {View} from "../fake-react-native-web/index";
 
-import {iconSizeHeightPx, iconSizeWidthPx} from "./common-style.js";
-import Styles from "./styles.js";
+import {iconSizeHeightPx, iconSizeWidthPx} from "./common-style";
+import Styles from "./styles";
 
 const {row, centered} = Styles;
 

package/src/components/multi-symbol-grid.js

@@ -7,13 +7,13 @@ import {StyleSheet} from "aphrodite";
 import PropTypes from "prop-types";
 import * as React from "react";
 
-import {IconTypes} from "../consts.js";
-import {View} from "../fake-react-native-web/index.js";
+import {IconTypes} from "../consts";
+import {View} from "../fake-react-native-web/index";
 
-import {iconSizeHeightPx, iconSizeWidthPx} from "./common-style.js";
-import Icon from "./icon.js";
-import {iconPropType} from "./prop-types.js";
-import Styles from "./styles.js";
+import {iconSizeHeightPx, iconSizeWidthPx} from "./common-style";
+import Icon from "./icon";
+import {iconPropType} from "./prop-types";
+import Styles from "./styles";
 
 const {row, column, centered, fullWidth} = Styles;
 

package/src/components/multi-symbol-popover.js

@@ -6,12 +6,12 @@ import {StyleSheet} from "aphrodite";
 import PropTypes from "prop-types";
 import * as React from "react";
 
-import {BorderStyles} from "../consts.js";
-import {View} from "../fake-react-native-web/index.js";
+import {BorderStyles} from "../consts";
+import {View} from "../fake-react-native-web/index";
 
-import {keyConfigPropType} from "./prop-types.js";
-import TouchableKeypadButton from "./touchable-keypad-button.js";
-import * as zIndexes from "./z-indexes.js";
+import {keyConfigPropType} from "./prop-types";
+import TouchableKeypadButton from "./touchable-keypad-button";
+import * as zIndexes from "./z-indexes";
 
 class MultiSymbolPopover extends React.Component {
     static propTypes = {

package/src/components/navigation-pad.js

@@ -7,18 +7,18 @@ import {StyleSheet} from "aphrodite";
 import PropTypes from "prop-types";
 import * as React from "react";
 
-import {BorderStyles} from "../consts.js";
-import KeyConfigs from "../data/key-configs.js";
-import {View} from "../fake-react-native-web/index.js";
+import {BorderStyles} from "../consts";
+import KeyConfigs from "../data/key-configs";
+import {View} from "../fake-react-native-web/index";
 
 import {
     navigationPadWidthPx,
     controlGrey,
     valueGrey,
     offBlack16,
-} from "./common-style.js";
-import Styles from "./styles.js";
-import TouchableKeypadButton from "./touchable-keypad-button.js";
+} from "./common-style";
+import Styles from "./styles";
+import TouchableKeypadButton from "./touchable-keypad-button";
 
 const {row, column, centered, stretch, roundedTopLeft} = Styles;
 

package/src/components/popover-manager.js

@@ -7,14 +7,14 @@ import PropTypes from "prop-types";
 import * as React from "react";
 import {CSSTransition} from "react-transition-group";
 
-import KeyConfigs from "../data/key-configs.js";
+import KeyConfigs from "../data/key-configs";
 
-import MultiSymbolPopover from "./multi-symbol-popover.js";
+import MultiSymbolPopover from "./multi-symbol-popover";
 import {
     boundingBoxPropType,
     keyConfigPropType,
     popoverPropType,
-} from "./prop-types.js";
+} from "./prop-types";
 
 // NOTE(charlie): These must be kept in sync with the transition durations and
 // classnames specified in popover.less.

package/src/components/prop-types.js

@@ -10,10 +10,10 @@ import {
     IconTypes,
     KeyTypes,
     KeypadTypes,
-} from "../consts.js";
-import KeyConfigs from "../data/key-configs.js";
+} from "../consts";
+import KeyConfigs from "../data/key-configs";
 
-import * as CursorContexts from "./input/cursor-contexts.js";
+import * as CursorContexts from "./input/cursor-contexts";
 
 export const iconPropType = PropTypes.shape({
     type: PropTypes.oneOf(Object.keys(IconTypes)).isRequired,