@khanacademy/math-input 26.6.8 → 27.0.0

package/dist/index.js

@@ -47,7 +47,7 @@ var xBold__default = /*#__PURE__*/_interopDefaultCompat(xBold);
 var Clickable__default = /*#__PURE__*/_interopDefaultCompat(Clickable);
 var PropTypes__default = /*#__PURE__*/_interopDefaultCompat(PropTypes);
 
-const libName="@khanacademy/math-input";const libVersion="26.6.8";perseusUtils.addLibraryVersionToPerseusDebug(libName,libVersion);
+const libName="@khanacademy/math-input";const libVersion="27.0.0";perseusUtils.addLibraryVersionToPerseusDebug(libName,libVersion);
 
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -1512,7 +1512,7 @@ class TransitionChild extends React__namespace.Component{static getDerivedStateF
 
 class AphroditeCSSTransitionGroup extends React__namespace.Component{render(){const{children}=this.props;return jsxRuntimeExports.jsx(reactTransitionGroup.TransitionGroup,{component:null,children:React__namespace.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__namespace.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(wonderBlocksCore.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__namespace.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__default.default.findDOMNode(this)};}}const styles=aphrodite.StyleSheet.create({keypadContainer:{bottom:0,left:0,right:0,position:"fixed",borderStyle:"solid",borderWidth:1,borderColor:wonderBlocksTokens.semanticColor.core.border.neutral.subtle}});
+const AnimationDurationInMS=200;class MobileKeypadInternals extends React__namespace.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(wonderBlocksCore.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__namespace.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=aphrodite.StyleSheet.create({keypadContainer:{bottom:0,left:0,right:0,position:"fixed",borderStyle:"solid",borderWidth:1,borderColor:wonderBlocksTokens.semanticColor.core.border.neutral.subtle}});
 
 function MobileKeypad(props){return jsxRuntimeExports.jsx(keypadContext.KeypadContext.Consumer,{children:({keypadActive,setKeypadActive})=>jsxRuntimeExports.jsx(MobileKeypadInternals,{...props,keypadActive:keypadActive,setKeypadActive:setKeypadActive})})}