@khanacademy/math-input 26.6.8 → 27.0.0

package/dist/components/keypad/mobile-keypad-internals.d.ts

@@ -1,10 +1,9 @@
 import * as React from "react";
-import ReactDOM from "react-dom";
 import type { Cursor, KeyHandler, KeypadAPI } from "../../types";
 import type { AnalyticsEventHandlerFn, KeypadConfiguration, KeypadKey } from "@khanacademy/perseus-core";
 import type { StyleType } from "@khanacademy/wonder-blocks-core";
 type Props = {
-    onElementMounted?: (arg1: any) => void;
+    onElementMounted?: (api: KeypadAPI | null) => void;
     onDismiss?: () => void;
     style?: StyleType;
     onAnalyticsEvent: AnalyticsEventHandlerFn;
@@ -41,7 +40,7 @@ declare class MobileKeypadInternals extends React.Component<Props, State> implem
     configure: (configuration: KeypadConfiguration, cb: () => void) => void;
     setCursor: (cursor: Cursor) => void;
     setKeyHandler: (keyHandler: KeyHandler) => void;
-    getDOMNode: () => ReturnType<typeof ReactDOM.findDOMNode>;
+    getDOMNode: () => HTMLElement | null;
     _handleClickKey(key: KeypadKey): void;
     render(): React.ReactNode;
 }

package/dist/es/index.js

@@ -17,7 +17,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="26.6.8";addLibraryVersionToPerseusDebug(libName,libVersion);
+const libName="@khanacademy/math-input";const libVersion="27.0.0";addLibraryVersionToPerseusDebug(libName,libVersion);
 
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -1482,7 +1482,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,ref: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",borderStyle:"solid",borderWidth:1,borderColor:semanticColor.core.border.neutral.subtle}});
+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?.();this.props.onElementMounted?.(null);}_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,ref: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 this._containerRef.current};}}const styles=StyleSheet.create({keypadContainer:{bottom:0,left:0,right:0,position:"fixed",borderStyle:"solid",borderWidth:1,borderColor:semanticColor.core.border.neutral.subtle}});
 
 function MobileKeypad(props){return jsxRuntimeExports.jsx(KeypadContext.Consumer,{children:({keypadActive,setKeypadActive})=>jsxRuntimeExports.jsx(MobileKeypadInternals,{...props,keypadActive:keypadActive,setKeypadActive:setKeypadActive})})}