@khanacademy/math-input 25.0.2 → 25.0.3

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

@@ -1,7 +1,7 @@
 import * as React from "react";
 import type { ClickKeyCallback } from "../../types";
 import type { CursorContext } from "../input/cursor-contexts";
-import type { AnalyticsEventHandlerFn, KeypadKey } from "@khanacademy/perseus-core";
+import type { PerseusAnalyticsEvent, KeypadKey } from "@khanacademy/perseus-core";
 type Props = {
     extraKeys?: ReadonlyArray<KeypadKey>;
     cursorContext?: (typeof CursorContext)[keyof typeof CursorContext];
@@ -17,7 +17,9 @@ type Props = {
     fractionsOnly?: boolean;
     scientific?: boolean;
     onClickKey: ClickKeyCallback;
-    onAnalyticsEvent: AnalyticsEventHandlerFn;
+    onAnalyticsEvent: (event: Extract<PerseusAnalyticsEvent, {
+        type: "math-input:keypad-opened" | "math-input:keypad-closed";
+    }>) => void;
 };
 export default function Keypad({ extraKeys, ...props }: Props): React.JSX.Element;
 export {};

package/dist/es/index.js

@@ -15,7 +15,7 @@ import { TransitionGroup } from 'react-transition-group';
 import { withActionScheduler } from '@khanacademy/wonder-blocks-timing';
 import PropTypes from 'prop-types';
 
-const libName="@khanacademy/math-input";const libVersion="25.0.2";addLibraryVersionToPerseusDebug(libName,libVersion);
+const libName="@khanacademy/math-input";const libVersion="25.0.3";addLibraryVersionToPerseusDebug(libName,libVersion);
 
 var jsxRuntime = {exports: {}};
 
@@ -1456,7 +1456,7 @@ class TransitionChild extends React.Component{static getDerivedStateFromProps({i
 
 class AphroditeCSSTransitionGroup extends React.Component{render(){const{children}=this.props;return jsxRuntimeExports.jsx(TransitionGroup,{component:null,children:React.Children.map(children,child=>jsxRuntimeExports.jsx(TransitionChild$1,{transitionStyles:this.props.transitionStyle,appearTimeout:this.props.transitionAppearTimeout,enterTimeout:this.props.transitionEnterTimeout,leaveTimeout:this.props.transitionLeaveTimeout,children:child}))})}}
 
-const AnimationDurationInMS=200;class MobileKeypadInternals extends React.Component{componentDidMount(){this._resize();window.addEventListener("resize",this._throttleResizeHandler);window.addEventListener("orientationchange",this._throttleResizeHandler);if("ResizeObserver"in window){this._containerResizeObserver=new window.ResizeObserver(this._throttleResizeHandler);if(this._containerRef.current){this._containerResizeObserver.observe(this._containerRef.current);}}this.props.onElementMounted?.({activate:this.activate,dismiss:this.dismiss,configure:this.configure,setCursor:this.setCursor,setKeyHandler:this.setKeyHandler,getDOMNode:this.getDOMNode});}componentWillUnmount(){window.removeEventListener("resize",this._throttleResizeHandler);window.removeEventListener("orientationchange",this._throttleResizeHandler);this._containerResizeObserver?.disconnect();}_handleClickKey(key){if(key==="DISMISS"){this.dismiss();return}const cursor=this.state.keyHandler?.(key);this.setState({cursor});}render(){const{keypadActive,style}=this.props;const{containerWidth,cursor,keypadConfig}=this.state;const containerStyle=[styles.keypadContainer,...Array.isArray(style)?style:[style]];const isExpression=keypadConfig?.keypadType==="EXPRESSION";const convertDotToTimes=keypadConfig?.times;return jsxRuntimeExports.jsx(View,{style:containerStyle,forwardRef:this._containerRef,children:jsxRuntimeExports.jsx(AphroditeCSSTransitionGroup,{transitionEnterTimeout:AnimationDurationInMS,transitionLeaveTimeout:AnimationDurationInMS,transitionStyle:{enter:{transform:"translate3d(0, 100%, 0)",transition:`${AnimationDurationInMS}ms ease-out`},enterActive:{transform:"translate3d(0, 0, 0)"},leave:{transform:"translate3d(0, 0, 0)",transition:`${AnimationDurationInMS}ms ease-out`},leaveActive:{transform:"translate3d(0, 100%, 0)"}},children:keypadActive?jsxRuntimeExports.jsx(Keypad,{onAnalyticsEvent:this.props.onAnalyticsEvent,extraKeys:keypadConfig?.extraKeys,onClickKey:key=>this._handleClickKey(key),cursorContext:cursor?.context,fractionsOnly:!isExpression,convertDotToTimes:convertDotToTimes,divisionKey:isExpression,trigonometry:isExpression,preAlgebra:isExpression,logarithms:isExpression,basicRelations:isExpression,advancedRelations:isExpression,expandedView:containerWidth>expandedViewThreshold,showDismiss:true,scientific:isExpression&&keypadConfig?.scientific}):null})})}constructor(...args){super(...args),this._containerRef=React.createRef(),this._containerResizeObserver=null,this._throttleResize=false,this.state={containerWidth:0},this._resize=()=>{const containerWidth=this._containerRef.current?.clientWidth||0;this.setState({containerWidth});},this._throttleResizeHandler=()=>{if(this._throttleResize){return}this._throttleResize=true;setTimeout(()=>{this._resize();this._throttleResize=false;},100);},this.activate=()=>{this.props.setKeypadActive(true);},this.dismiss=()=>{this.props.setKeypadActive(false);this.props.onDismiss?.();},this.configure=(configuration,cb)=>{this.setState({keypadConfig:configuration});setTimeout(()=>cb&&cb());},this.setCursor=cursor=>{this.setState({cursor});},this.setKeyHandler=keyHandler=>{this.setState({keyHandler});},this.getDOMNode=()=>{return ReactDOM.findDOMNode(this)};}}const styles=StyleSheet.create({keypadContainer:{bottom:0,left:0,right:0,position:"fixed"}});
+const AnimationDurationInMS=200;class MobileKeypadInternals extends React.Component{componentDidMount(){this._resize();window.addEventListener("resize",this._throttleResizeHandler);window.addEventListener("orientationchange",this._throttleResizeHandler);if("ResizeObserver"in window){this._containerResizeObserver=new window.ResizeObserver(this._throttleResizeHandler);if(this._containerRef.current){this._containerResizeObserver.observe(this._containerRef.current);}}this.props.onElementMounted?.({activate:this.activate,dismiss:this.dismiss,configure:this.configure,setCursor:this.setCursor,setKeyHandler:this.setKeyHandler,getDOMNode:this.getDOMNode});}componentWillUnmount(){window.removeEventListener("resize",this._throttleResizeHandler);window.removeEventListener("orientationchange",this._throttleResizeHandler);this._containerResizeObserver?.disconnect();}_handleClickKey(key){if(key==="DISMISS"){this.dismiss();return}const cursor=this.state.keyHandler?.(key);this.setState({cursor});}render(){const{keypadActive,style}=this.props;const{containerWidth,cursor,keypadConfig}=this.state;const containerStyle=[styles.keypadContainer,...Array.isArray(style)?style:[style]];const isExpression=keypadConfig?.keypadType==="EXPRESSION";const convertDotToTimes=keypadConfig?.times;return jsxRuntimeExports.jsx(View,{style:containerStyle,forwardRef:this._containerRef,children:jsxRuntimeExports.jsx(AphroditeCSSTransitionGroup,{transitionEnterTimeout:AnimationDurationInMS,transitionLeaveTimeout:AnimationDurationInMS,transitionStyle:{appear:{transform:"translate3d(0, 100%, 0)",transition:`${AnimationDurationInMS}ms ease-out`},appearActive:{transform:"translate3d(0, 100%, 0)"},enter:{transform:"translate3d(0, 50%, 0)",transition:`${AnimationDurationInMS}ms ease-out`},enterActive:{transform:"translate3d(0, 0, 0)"},leave:{transform:"translate3d(0, 0, 0)",transition:`${AnimationDurationInMS}ms ease-out`},leaveActive:{transform:"translate3d(0, 100%, 0)"}},children:keypadActive?jsxRuntimeExports.jsx(Keypad,{onAnalyticsEvent:this.props.onAnalyticsEvent,extraKeys:keypadConfig?.extraKeys,onClickKey:key=>this._handleClickKey(key),cursorContext:cursor?.context,fractionsOnly:!isExpression,convertDotToTimes:convertDotToTimes,divisionKey:isExpression,trigonometry:isExpression,preAlgebra:isExpression,logarithms:isExpression,basicRelations:isExpression,advancedRelations:isExpression,expandedView:containerWidth>expandedViewThreshold,showDismiss:true,scientific:isExpression&&keypadConfig?.scientific}):null})})}constructor(...args){super(...args),this._containerRef=React.createRef(),this._containerResizeObserver=null,this._throttleResize=false,this.state={containerWidth:0},this._resize=()=>{const containerWidth=this._containerRef.current?.clientWidth||0;this.setState({containerWidth});},this._throttleResizeHandler=()=>{if(this._throttleResize){return}this._throttleResize=true;setTimeout(()=>{this._resize();this._throttleResize=false;},100);},this.activate=()=>{this.props.setKeypadActive(true);},this.dismiss=()=>{this.props.setKeypadActive(false);this.props.onDismiss?.();},this.configure=(configuration,cb)=>{this.setState({keypadConfig:configuration});setTimeout(()=>cb&&cb());},this.setCursor=cursor=>{this.setState({cursor});},this.setKeyHandler=keyHandler=>{this.setState({keyHandler});},this.getDOMNode=()=>{return ReactDOM.findDOMNode(this)};}}const styles=StyleSheet.create({keypadContainer:{bottom:0,left:0,right:0,position:"fixed"}});
 
 function MobileKeypad(props){return jsxRuntimeExports.jsx(KeypadContext.Consumer,{children:({keypadActive,setKeypadActive})=>jsxRuntimeExports.jsx(MobileKeypadInternals,{...props,keypadActive:keypadActive,setKeypadActive:setKeypadActive})})}