@khanacademy/math-input - npm Package Compare versions

Comparing version 0.0.0-PR472-20230414161627 to 0.0.0-PR477-20230414191532

CHANGELOG.md

 # @khanacademy/math-input
 
-## 0.0.0-PR472-20230414161627
+## 0.0.0-PR477-20230414191532
 
@@ -5,0 +5,0 @@ ### Patch Changes

dist/components/input/cursor-handle.d.ts

@@ -6,3 +6,3 @@ /**
 type Props = {
-    animateIntoPosition: boolean;
+    animateIntoPosition: boolean | null | undefined;
     onTouchCancel: (arg1: React.TouchEvent<HTMLSpanElement>) => void;
@@ -9,0 +9,0 @@ onTouchEnd: (arg1: React.TouchEvent<HTMLSpanElement>) => void;

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

 import * as React from "react";
-import ProvidedKeypad from "../provided-keypad";
 type Props = {
-    keypadElement: ProvidedKeypad;
+    keypadElement: any;
     onBlur: () => void;
-    onChange: (value: string, cb: any) => void;
+    onChange: any;
     onFocus: () => void;
@@ -16,3 +15,3 @@ style: any;
 type HandleState = {
-    animateIntoPosition?: boolean;
+    animateIntoPosition?: boolean | null | undefined;
     visible: boolean;
@@ -51,3 +50,3 @@ x?: number;
     _getKeypadBounds: () => any;
-    _updateCursorHandle: (arg1?: boolean) => void;
+    _updateCursorHandle: (arg1?: boolean | null | undefined) => void;
     _hideCursorHandle: () => void;
@@ -54,0 +53,0 @@ _handleScroll: () => void;

dist/components/keypad/button.d.ts

@@ -9,5 +9,6 @@ import * as React from "react";
 };
-export default class Button extends React.Component<Props> {
+type State = Record<any, any>;
+export default class Button extends React.Component<Props, State> {
     render(): React.ReactNode;
 }
 export {};

dist/components/keypad/keypad-page-items.d.ts

@@ -17,3 +17,3 @@ import * as React from "react";
     keyConfig: KeyConfig;
-    style?: StyleType;
+    style?: any;
     onClickKey: (keyConfig: string) => void;
@@ -24,3 +24,3 @@ };
     keyConfig: KeyConfig;
-    style?: StyleType;
+    style?: any;
     onClickKey: (keyConfig: string) => void;
@@ -27,0 +27,0 @@ };

dist/components/provided-keypad.d.ts

 import * as React from "react";
 import ReactDOM from "react-dom";
-import type { Cursor, KeypadConfiguration, KeyHandler } from "../types";
-import type { StyleType } from "@khanacademy/wonder-blocks-core";
+import type { CSSProperties } from "aphrodite";
 type Props = {
     onElementMounted?: (arg1: any) => void;
-    onDismiss?: () => void;
-    style?: StyleType;
+    onDismiss?: () => unknown;
+    style?: CSSProperties;
 };
 declare class ProvidedKeypad extends React.Component<Props> {
-    mounted?: boolean;
+    mounted: boolean;
     store: any;
@@ -18,5 +17,5 @@ UNSAFE_componentWillMount(): void;
     dismiss: () => void;
-    configure: (configuration: KeypadConfiguration, cb: () => void) => void;
-    setCursor: (cursor: Cursor) => void;
-    setKeyHandler: (keyHandler: KeyHandler) => void;
+    configure: () => void;
+    setCursor: () => void;
+    setKeyHandler: (keyHandler: any) => void;
     getDOMNode: () => ReturnType<typeof ReactDOM.findDOMNode>;
@@ -23,0 +22,0 @@ render(): React.ReactNode;

dist/components/tabbar/item.d.ts

@@ -9,3 +9,4 @@ import * as React from "react";
 };
-declare class TabbarItem extends React.Component<Props> {
+type State = Record<any, any>;
+declare class TabbarItem extends React.Component<Props, State> {
     render(): React.ReactNode;
@@ -12,0 +13,0 @@ }

dist/components/tabbar/tabbar.d.ts

@@ -7,3 +7,3 @@ import * as React from "react";
 type Props = {
-    items: ReadonlyArray<TabbarItemType>;
+    items: Array<TabbarItemType>;
     onSelect: (item: TabbarItemType) => void;
@@ -10,0 +10,0 @@ };

dist/fake-react-native-web/text.d.ts

 import * as React from "react";
-import type { StyleType } from "@khanacademy/wonder-blocks-core";
 import type { CSSProperties } from "aphrodite";
@@ -8,3 +7,3 @@ type Props = {
     numberOfLines?: number;
-    style?: StyleType;
+    style?: CSSProperties;
 };
@@ -11,0 +10,0 @@ declare class Text extends React.Component<Props> {

dist/fake-react-native-web/view.d.ts

 /// <reference path="../../types/aphrodite.d.ts" />
 import * as React from "react";
-import type { StyleType } from "@khanacademy/wonder-blocks-core";
 import type { CSSProperties } from "aphrodite";
 type Props = {
     ariaLabel?: string;
-    children?: React.ReactNode;
+    children: React.ReactNode;
     dynamicStyle?: CSSProperties;
@@ -17,3 +16,3 @@ extraClassName?: string;
     role?: string;
-    style?: StyleType;
+    style?: CSSProperties;
 };
@@ -20,0 +19,0 @@ declare class View extends React.Component<Props> {

dist/index.d.ts

@@ -6,3 +6,3 @@ /**
 export { default as KeypadInput } from "./components/input/math-input";
-export { keypadElementPropType } from "./components/prop-types";
+export { keypadConfigurationPropType, keypadElementPropType, } from "./components/prop-types";
 export { default as Keypad } from "./components/provided-keypad";
@@ -9,0 +9,0 @@ export { KeypadTypes } from "./consts";

dist/store/index.d.ts

@@ -1,74 +0,1 @@
-import * as Redux from "redux";
-import { Cursor, KeyHandler } from "../types";
-export declare const createStore: () => Redux.Store<Redux.EmptyObject & {
-    input: {
-        keyHandler: any;
-        cursor: Cursor;
-    } | {
-        cursor: any;
-        keyHandler: KeyHandler | null;
-    };
-    keypad: any;
-    pager: any;
-    gestures: any;
-    echoes: {
-        readonly echoes: readonly [];
-    } | {
-        echoes: {
-            animationId: string;
-            animationType: "FADE_ONLY" | "LONG_FADE_ONLY";
-            borders: any;
-            id: any;
-            initialBounds: any;
-        }[];
-    };
-    layout: {
-        readonly gridDimensions: {
-            readonly numRows: number;
-            readonly numColumns: number;
-            readonly numMaxVisibleRows: number;
-            readonly numPages: number;
-        };
-        readonly buttonDimensions: {
-            readonly widthPx: 48;
-            readonly heightPx: 48;
-        };
-        readonly pageDimensions: {
-            readonly pageWidthPx: 0;
-            readonly pageHeightPx: 0;
-        };
-        readonly layoutMode: "FULLSCREEN";
-        readonly paginationEnabled: false;
-        readonly navigationPadEnabled: false;
-    } | {
-        gridDimensions: {
-            readonly numRows: any;
-            readonly numColumns: any;
-            readonly numMaxVisibleRows: any;
-            readonly numPages: any;
-        };
-        navigationPadEnabled: boolean;
-        paginationEnabled: boolean;
-        buttonDimensions: any;
-        layoutMode: "FULLSCREEN" | "COMPACT";
-        pageDimensions: {
-            readonly pageWidthPx: 0;
-            readonly pageHeightPx: 0;
-        };
-    } | {
-        pageDimensions: {
-            readonly pageWidthPx: any;
-            readonly pageHeightPx: any;
-        };
-        navigationPadEnabled: boolean;
-        paginationEnabled: boolean;
-        buttonDimensions: any;
-        layoutMode: "FULLSCREEN" | "COMPACT";
-        gridDimensions: {
-            readonly numRows: number;
-            readonly numColumns: number;
-            readonly numMaxVisibleRows: number;
-            readonly numPages: number;
-        };
-    };
-}, Redux.AnyAction>;
+export declare const createStore: () => any;

package.json

@@ -6,3 +6,3 @@ {
     "license": "MIT",
-    "version": "0.0.0-PR472-20230414161627",
+    "version": "0.0.0-PR477-20230414191532",
     "publishConfig": {
@@ -9,0 +9,0 @@ "access": "public"

src/components/prop-types.js

@@ -7,4 +7,34 @@ /**
 
+import {
+    BorderDirections,
+    EchoAnimationTypes,
+    IconTypes,
+    KeyTypes,
+    KeypadTypes,
+} from "../consts";
+import KeyConfigs from "../data/key-configs";
+
+import * as CursorContexts from "./input/cursor-contexts";
+
+export const iconPropType = PropTypes.shape({
+    type: PropTypes.oneOf(Object.keys(IconTypes)).isRequired,
+    data: PropTypes.string.isRequired,
+});
+
+export const keyIdPropType = PropTypes.oneOf(Object.keys(KeyConfigs));
+
+export const keyConfigPropType = PropTypes.shape({
+    ariaLabel: PropTypes.string,
+    id: keyIdPropType.isRequired,
+    type: PropTypes.oneOf(Object.keys(KeyTypes)).isRequired,
+    childKeyIds: PropTypes.arrayOf(keyIdPropType),
+    icon: iconPropType.isRequired,
+});
+
+export const keypadConfigurationPropType = PropTypes.shape({
+    keypadType: PropTypes.oneOf(Object.keys(KeypadTypes)).isRequired,
+    extraKeys: PropTypes.arrayOf(keyIdPropType),
+});
+
 // NOTE(jared): This is no longer guaranteed to be React element
-// NOTE(matthewc): only seems to be used in Perseus
 export const keypadElementPropType = PropTypes.shape({
@@ -18,1 +48,37 @@ activate: PropTypes.func.isRequired,
 });
+
+export const bordersPropType = PropTypes.arrayOf(
+    PropTypes.oneOf(Object.keys(BorderDirections)),
+);
+
+export const boundingBoxPropType = PropTypes.shape({
+    height: PropTypes.number,
+    width: PropTypes.number,
+    top: PropTypes.number,
+    right: PropTypes.number,
+    bottom: PropTypes.number,
+    left: PropTypes.number,
+});
+
+export const echoPropType = PropTypes.shape({
+    animationId: PropTypes.string.isRequired,
+    animationType: PropTypes.oneOf(Object.keys(EchoAnimationTypes)).isRequired,
+    borders: bordersPropType,
+    id: keyIdPropType.isRequired,
+    initialBounds: boundingBoxPropType.isRequired,
+});
+
+export const cursorContextPropType = PropTypes.oneOf(
+    Object.keys(CursorContexts),
+);
+
+export const popoverPropType = PropTypes.shape({
+    parentId: keyIdPropType.isRequired,
+    bounds: boundingBoxPropType.isRequired,
+    childKeyIds: PropTypes.arrayOf(keyIdPropType).isRequired,
+});
+
+export const childrenPropType = PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+]);

src/index.ts

@@ -8,3 +8,6 @@ /**
 export {default as KeypadInput} from "./components/input/math-input";
-export {keypadElementPropType} from "./components/prop-types";
+export {
+    keypadConfigurationPropType,
+    keypadElementPropType,
+} from "./components/prop-types";
 export {default as Keypad} from "./components/provided-keypad";
@@ -11,0 +14,0 @@ export {KeypadTypes} from "./consts";

src/store/index.ts

@@ -20,3 +20,2 @@ import * as Redux from "redux";
 import Keys from "../data/keys";
-import {Cursor, KeyHandler} from "../types";
 
@@ -28,6 +27,6 @@ const keypadForType = {
 
-export const createStore = () => {
+export const createStore = (): any => {
     const initialInputState: {
-        keyHandler: KeyHandler | null;
-        cursor: Cursor;
+        keyHandler: any;
+        cursor: any;
     } = {
@@ -56,3 +55,3 @@ keyHandler: null,
                         ...state,
-                        cursor: state.keyHandler?.(keyConfig.id),
+                        cursor: state.keyHandler(keyConfig.id),
                     };
@@ -59,0 +58,0 @@ }

No alert changes

Worsened metrics

Total package byte prevSize

2361308

decreased by-2.42%

Number of package files

227

decreased by-22.53%

Lines of code

27001

decreased by-2.6%

No dependency changes