@khanacademy/math-input 1.0.0 → 1.0.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @khanacademy/math-input
 
+## 1.0.1
+
+### Patch Changes
+
+-   0c1cf562: Removal of an unused keypad style
+
 ## 1.0.0
 
 ### Major Changes

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

@@ -8,7 +8,7 @@ type Props = {
 type State = {
     selectedPage: TabbarItemType;
 };
-export default class PreAlgebraKeypad extends React.Component<Props, State> {
+export default class Keypad extends React.Component<Props, State> {
     state: State;
     render(): React.ReactNode;
 }

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

@@ -14,9 +14,7 @@ declare type Props = {|
 declare type State = {|
   selectedPage: TabbarItemType,
 |};
-declare export default class PreAlgebraKeypad
-  extends React.Component<Props, State>
-{
+declare export default class Keypad extends React.Component<Props, State> {
   state: State;
   render(): React.Node;
 }

package/dist/components/node-manager.d.ts

@@ -1,4 +1,4 @@
-import type { Border } from "../types";
+import type { Border, LayoutProps } from "../types";
 /**
  * A manager for our node-to-ID system. In particular, this class is
  * responsible for maintaing a mapping between DOM nodes and node IDs, and
@@ -45,9 +45,6 @@ declare class NodeManager {
      * @returns {object} - the bounding client rect for the given node, along
      *                     with its borders
      */
-    layoutPropsForId(id: string): {
-        initialBounds: DOMRect;
-        borders: Border;
-    };
+    layoutPropsForId(id: string): LayoutProps;
 }
 export default NodeManager;

package/dist/components/node-manager.js.flow

@@ -4,7 +4,7 @@
  * Flowgen v1.21.0
  * @flow
  */
-import type { Border } from "../types";
+import type { Border, LayoutProps } from "../types";
 
 /**
  * A manager for our node-to-ID system. In particular, this class is
@@ -57,9 +57,6 @@ declare class NodeManager {
    * @returns {{...}} - the bounding client rect for the given node, along
    *   with its borders
    */
-  layoutPropsForId(id: string): {|
-    initialBounds: DOMRect,
-    borders: Border,
-  |};
+  layoutPropsForId(id: string): LayoutProps;
 }
 declare export default typeof NodeManager;

package/dist/components/popover-state-machine.d.ts

@@ -1,17 +1,10 @@
+import type { ActiveNodesObj } from "../types";
 /**
  * A state machine for the popover state. In particular, this class manages the
  * mapping of parent nodes to their children, and translates touch events that
  * traverse various nodes to actions that are conditioned on whether a popover
  * is present.
  */
-type ActiveNodesObjPopover = {
-    parentId: string;
-    childIds: ReadonlyArray<string>;
-};
-type ActiveNodesObj = {
-    popover: ActiveNodesObjPopover | null;
-    focus: string | null;
-};
 type Handlers = {
     onActiveNodesChanged: (activeNodes: ActiveNodesObj) => void;
     onClick: (keyId: string, domNodeId: string, inPopover: boolean) => void;

package/dist/components/popover-state-machine.js.flow

@@ -4,20 +4,14 @@
  * Flowgen v1.21.0
  * @flow
  */
+import type { ActiveNodesObj } from "../types";
+
 /**
  * A state machine for the popover state. In particular, this class manages the
  * mapping of parent nodes to their children, and translates touch events that
  * traverse various nodes to actions that are conditioned on whether a popover
  * is present.
  */
-declare type ActiveNodesObjPopover = {|
-  parentId: string,
-  childIds: $ReadOnlyArray<string>,
-|};
-declare type ActiveNodesObj = {|
-  popover: ActiveNodesObjPopover | null,
-  focus: string | null,
-|};
 declare type Handlers = {|
   onActiveNodesChanged: (activeNodes: ActiveNodesObj) => void,
   onClick: (keyId: string, domNodeId: string, inPopover: boolean) => void,

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

@@ -8,11 +8,8 @@ type Props = {
     style?: StyleType;
 };
 declare class ProvidedKeypad extends React.Component<Props> {
-    mounted?: boolean;
     store: any;
-    UNSAFE_componentWillMount(): void;
-    componentDidMount(): void;
-    componentWillUnmount(): void;
+    constructor(props: any);
     activate: () => void;
     dismiss: () => void;
     configure: (configuration: KeypadConfiguration, cb: () => void) => void;

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

@@ -14,11 +14,8 @@ declare type Props = {|
   style?: StyleType,
 |};
 declare class ProvidedKeypad extends React.Component<Props> {
-  mounted?: boolean;
   store: any;
-  UNSAFE_componentWillMount(): void;
-  componentDidMount(): void;
-  componentWillUnmount(): void;
+  constructor(props: any): this;
   activate: () => void;
   dismiss: () => void;
   configure: (configuration: KeypadConfiguration, cb: () => void) => void;

package/dist/es/index.css

@@ -122,9 +122,6 @@
   color: white !important;
   display: inline-block !important;
 }
-.keypad-container .katex {
-  color: inherit !important;
-}
 /**
  * Styles for managing the popover animations.
  *

package/dist/es/index.js

@@ -2165,6 +2165,7 @@ const activateKeypad = () => {
 /**
  * Configure the keypad with the provided configuration parameters.
  */
+
 const configureKeypad = configuration => {
   return {
     type: "ConfigureKeypad",
@@ -2186,6 +2187,7 @@ const removeEcho = animationId => {
 };
 
 // Input-related actions.
+
 const setKeyHandler = keyHandler => {
   return {
     type: "SetKeyHandler",
@@ -2199,6 +2201,36 @@ const setCursor = cursor => {
   };
 };
 
+// Gesture actions
+
+const onSwipeChange = dx => {
+  return {
+    type: "OnSwipeChange",
+    dx
+  };
+};
+const onSwipeEnd = dx => {
+  return {
+    type: "OnSwipeEnd",
+    dx
+  };
+};
+const setActiveNodes = activeNodes => {
+  return {
+    type: "SetActiveNodes",
+    activeNodes
+  };
+};
+const pressKey = (key, borders, initialBounds, inPopover) => {
+  return {
+    type: "PressKey",
+    key,
+    borders,
+    initialBounds,
+    inPopover
+  };
+};
+
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
   var target = {};
@@ -3295,7 +3327,6 @@ const echoReducer = function echoReducer(state = initialEchoState, action) {
       return state;
     case "RemoveEcho":
       const remainingEchoes = state.echoes.filter(echo => {
-        // @ts-expect-error [FEI-5003] - TS2339 - Property 'animationId' does not exist on type 'never'.
         return echo.animationId !== action.animationId;
       });
       return _extends({}, state, {
@@ -6353,7 +6384,6 @@ const keypadReducer = function keypadReducer(state = initialKeypadState, action)
         extraKeys: []
       }, action.configuration);
     case "PressKey":
-      // @ts-expect-error [FEI-5003] - TS2339 - Property 'key' does not exist on type '{ type: string; }'.
       const keyConfig = KeyConfigs[action.key];
       // NOTE(charlie): Our keypad system operates by triggering key
       // presses with key IDs in a dumb manner, such that the keys
@@ -6677,7 +6707,6 @@ const initialPagerState = {
 const pagerReducer = function pagerReducer(state = initialPagerState, action) {
   switch (action.type) {
     case "ConfigureKeypad":
-      // @ts-expect-error [FEI-5003] - TS2339 - Property 'configuration' does not exist on type '{ type: string; }'.
       const {
         keypadType
       } = action.configuration;
@@ -6692,47 +6721,25 @@ const pagerReducer = function pagerReducer(state = initialPagerState, action) {
       });
     case "SetPageSize":
       return _extends({}, state, {
-        // @ts-expect-error [FEI-5003] - TS2339 - Property 'pageWidthPx' does not exist on type '{ type: string; }'.
         pageWidthPx: action.pageWidthPx
       });
     case "PressKey":
-      // @ts-expect-error [FEI-5003] - TS2339 - Property 'key' does not exist on type '{ type: string; }'.
       const keyConfig = KeyConfigs[action.key];
 
       // Reset the keypad page if the user performs a math operation.
       if (keyConfig.type === KeyTypes.VALUE || keyConfig.type === KeyTypes.OPERATOR) {
-        return pagerReducer(state, {
-          type: "ResetKeypadPage"
+        return _extends({}, state, {
+          animateToPosition: true,
+          // We start at the right-most page.
+          currentPage: getDefaultPage(state.numPages),
+          dx: 0
         });
       }
       return state;
-    case "ResetKeypadPage":
-      return _extends({}, state, {
-        animateToPosition: true,
-        // We start at the right-most page.
-        currentPage: getDefaultPage(state.numPages),
-        dx: 0
-      });
-    case "PageKeypadRight":
-      const nextPage = Math.min(state.currentPage + 1, state.numPages - 1);
-      return _extends({}, state, {
-        animateToPosition: true,
-        currentPage: nextPage,
-        dx: 0
-      });
-    case "PageKeypadLeft":
-      const prevPage = Math.max(state.currentPage - 1, 0);
-      return _extends({}, state, {
-        animateToPosition: true,
-        currentPage: prevPage,
-        dx: 0
-      });
     case "OnSwipeChange":
-      // @ts-expect-error [FEI-5003] - TS2339 - Property 'dx' does not exist on type '{ type: string; }'.
       state.velocityTracker.push(action.dx);
       return _extends({}, state, {
         animateToPosition: false,
-        // @ts-expect-error [FEI-5003] - TS2339 - Property 'dx' does not exist on type '{ type: string; }'.
         dx: action.dx
       });
     case "OnSwipeEnd":
@@ -6740,7 +6747,6 @@ const pagerReducer = function pagerReducer(state = initialPagerState, action) {
         pageWidthPx,
         velocityTracker
       } = state;
-      // @ts-expect-error [FEI-5003] - TS2339 - Property 'dx' does not exist on type '{ type: string; }'.
       const {
         dx
       } = action;
@@ -6753,12 +6759,18 @@ const pagerReducer = function pagerReducer(state = initialPagerState, action) {
       const shouldPageRight = dx < -pageWidthPx / 2 || velocity < -minFlingVelocity && dx < -minFlingDistance;
       const shouldPageLeft = dx > pageWidthPx / 2 || velocity > minFlingVelocity && dx > minFlingDistance;
       if (shouldPageRight) {
-        return pagerReducer(state, {
-          type: "PageKeypadRight"
+        const nextPage = Math.min(state.currentPage + 1, state.numPages - 1);
+        return _extends({}, state, {
+          animateToPosition: true,
+          currentPage: nextPage,
+          dx: 0
         });
       } else if (shouldPageLeft) {
-        return pagerReducer(state, {
-          type: "PageKeypadLeft"
+        const prevPage = Math.max(state.currentPage - 1, 0);
+        return _extends({}, state, {
+          animateToPosition: true,
+          currentPage: prevPage,
+          dx: 0
         });
       }
       return _extends({}, state, {
@@ -6778,30 +6790,16 @@ const createStore = () => {
       swipeEnabled
     }, {
       onSwipeChange: dx => {
-        store.dispatch({
-          type: "OnSwipeChange",
-          dx
-        });
+        store.dispatch(onSwipeChange(dx));
       },
       onSwipeEnd: dx => {
-        store.dispatch({
-          type: "OnSwipeEnd",
-          dx
-        });
+        store.dispatch(onSwipeEnd(dx));
       },
       onActiveNodesChanged: activeNodes => {
-        store.dispatch({
-          type: "SetActiveNodes",
-          activeNodes
-        });
+        store.dispatch(setActiveNodes(activeNodes));
       },
       onClick: (key, layoutProps, inPopover) => {
-        store.dispatch(_extends({
-          type: "PressKey",
-          key
-        }, layoutProps, {
-          inPopover
-        }));
+        store.dispatch(pressKey(key, layoutProps.borders, layoutProps.initialBounds, inPopover));
       }
     }, [], [Keys.BACKSPACE, Keys.UP, Keys.RIGHT, Keys.DOWN, Keys.LEFT]);
   };
@@ -7188,9 +7186,8 @@ var KeypadContainer$1 = connect(mapStateToProps, mapDispatchToProps, null, {
 })(KeypadContainer);
 
 class ProvidedKeypad extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.mounted = void 0;
+  constructor(props) {
+    super(props);
     this.store = void 0;
     this.activate = () => {
       this.store.dispatch(activateKeypad());
@@ -7219,16 +7216,8 @@ class ProvidedKeypad extends React.Component {
     this.getDOMNode = () => {
       return ReactDOM.findDOMNode(this);
     };
-  }
-  UNSAFE_componentWillMount() {
     this.store = createStore();
   }
-  componentDidMount() {
-    this.mounted = true;
-  }
-  componentWillUnmount() {
-    this.mounted = false;
-  }
   render() {
     const {
       onElementMounted,