@khanacademy/math-input 26.4.10 → 26.4.12

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.4.10";perseusUtils.addLibraryVersionToPerseusDebug(libName,libVersion);
+const libName="@khanacademy/math-input";const libVersion="26.4.12";perseusUtils.addLibraryVersionToPerseusDebug(libName,libVersion);
 
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -1462,7 +1462,7 @@ class MathWrapper{focus(){this.mathField.cursor().show();this.mathField.focus();
 
 const toolbarHeightPx=60;const scrollIntoView=(containerNode,keypadNode)=>{const containerBounds=containerNode.getBoundingClientRect();const containerBottomPx=containerBounds.bottom;const containerTopPx=containerBounds.top;const scrollNode=document.scrollingElement;const desiredMarginPx=16;if(keypadNode){const pageHeightPx=window.innerHeight;const keypadHeightPx=keypadNode.clientHeight;const keypadTopPx=pageHeightPx-(keypadHeightPx+toolbarHeightPx);if(containerBottomPx>keypadTopPx){const scrollOffset=Math.min(containerBottomPx-keypadTopPx+desiredMarginPx,containerTopPx);if(scrollNode){scrollNode.scrollTop+=scrollOffset;}return}}if(scrollNode&&containerTopPx<desiredMarginPx){scrollNode.scrollTop-=containerBounds.height+desiredMarginPx;}};
 
-const constrainingFrictionFactor=.8;class MathInput extends React__namespace.Component{componentDidMount(){this._isMounted=true;this.mathField=new MathWrapper(this._mathContainer,this.props.ariaLabel,this.context.strings,this.context.locale,{onCursorMove:cursor=>{this.props.keypadElement?.setCursor(cursor);}});this.mathField.setContent(this.props.value);this._updateInputPadding();this._container=ReactDOM__default.default.findDOMNode(this);this._root=this._container.querySelector(".mq-root-block");this._root.addEventListener("scroll",this._handleScroll);const isWithinKeypadBounds=(x,y)=>{const bounds=this._getKeypadBounds();if(!bounds){return false}return bounds.left<=x&&bounds.right>=x&&bounds.top<=y&&bounds.bottom>=y||bounds.bottom<y};this.recordTouchStartOutside=evt=>{if(this.state.focused){if(!this._container.contains(evt.target)){let touchDidStartInOrBelowKeypad=false;if(this.props.keypadElement&&this.props.keypadElement.getDOMNode()){for(let i=0;i<evt.changedTouches.length;i++){const[x,y]=[evt.changedTouches[i].clientX,evt.changedTouches[i].clientY];if(isWithinKeypadBounds(x,y)){touchDidStartInOrBelowKeypad=true;break}}}if(!touchDidStartInOrBelowKeypad){this.didTouchOutside=true;if(this.dragListener){this.dragListener.detach();}this.dragListener=new DragListener(()=>{this.didScroll=true;this.dragListener.detach();},evt);this.dragListener.attach();}}}};this.blurOnTouchEndOutside=evt=>{if(this.state.focused&&this.didTouchOutside&&!this.didScroll){this.blur();this.mathField.blur();this.props.onBlur?.();}this.didTouchOutside=false;this.didScroll=false;if(this.dragListener){this.dragListener.detach();}};this.blurOnClickOutside=evt=>{if(this.state.focused){if(!this._container.contains(evt.target)){if(this.props.keypadElement&&this.props.keypadElement.getDOMNode()){const[x,y]=[evt.clientX,evt.clientY];if(!isWithinKeypadBounds(x,y)){this.blur();this.props.onBlur?.();}}}}};window.addEventListener("touchstart",this.recordTouchStartOutside);window.addEventListener("touchend",this.blurOnTouchEndOutside);window.addEventListener("touchcancel",this.blurOnTouchEndOutside);window.addEventListener("click",this.blurOnClickOutside);}componentDidUpdate(prevProps,prevState){if(this.mathField.getContent()!==this.props.value){this.mathField.setContent(this.props.value);}if(prevState.focused!==this.state.focused){this._updateInputPadding();}}componentWillUnmount(){this._isMounted=false;window.removeEventListener("touchstart",this.recordTouchStartOutside);window.removeEventListener("touchend",this.blurOnTouchEndOutside);window.removeEventListener("touchcancel",this.blurOnTouchEndOutside);window.removeEventListener("click",this.blurOnClickOutside);}_getKeypadBounds(){const keypadNode=this.props.keypadElement?.getDOMNode();if(keypadNode instanceof Element){return keypadNode.getBoundingClientRect()}return null}render(){const{showInputFocusStyle,handle}=this.state;const{style}=this.props;const innerStyle={...inlineStyles.innerContainer,borderWidth:this.getBorderWidthPx(),...showInputFocusStyle?{borderColor:wonderBlocksTokens.semanticColor.core.border.instructive.default}:{},...style};const ariaLabel=this.context.strings.mathInputBox+" "+this.context.strings.fingerTap;return jsxRuntimeExports.jsx(keypadContext.KeypadContext.Consumer,{children:({keypadActive,setKeypadActive})=>jsxRuntimeExports.jsxs(wonderBlocksCore.View,{style:styles$6.input,onTouchStart:e=>{this.handleTouchStart(e,keypadActive,setKeypadActive);},onTouchMove:this.handleTouchMove,onTouchEnd:this.handleTouchEnd,onClick:e=>{this.handleClick(e,keypadActive,setKeypadActive);},role:"textbox","aria-label":ariaLabel,children:[jsxRuntimeExports.jsx("div",{className:"keypad-input",tabIndex:0,ref:node=>{this.inputRef=node;},onFocus:()=>{this.focus(setKeypadActive);},onBlur:this.blur,onKeyUp:this.handleKeyUp,children:jsxRuntimeExports.jsx("div",{ref:node=>{this._mathContainer=ReactDOM__default.default.findDOMNode(node);},style:innerStyle})}),showInputFocusStyle&&handle.visible&&jsxRuntimeExports.jsx(CursorHandle,{...handle,onTouchStart:this.onCursorHandleTouchStart,onTouchMove:this.onCursorHandleTouchMove,onTouchEnd:this.onCursorHandleTouchEnd,onTouchCancel:this.onCursorHandleTouchCancel})]})})}constructor(...args){super(...args),this.state={focused:false,showInputFocusStyle:false,handle:{animateIntoPosition:false,visible:false,x:0,y:0}},this._updateInputPadding=()=>{this._container=ReactDOM__default.default.findDOMNode(this);this._root=this._container.querySelector(".mq-root-block");const padding=this.getInputInnerPadding();this._root.style.padding=`${padding.paddingTop}px ${padding.paddingRight}px`+` ${padding.paddingBottom}px ${padding.paddingLeft}px`;this._root.style.fontSize=`${fontSizePt}pt`;},this._updateCursorHandle=animateIntoPosition=>{const containerBounds=this._container.getBoundingClientRect();const cursor=this._container.querySelector(".mq-cursor");const cursorBounds=cursor.getBoundingClientRect();const cursorWidth=cursorBounds.width;const gapBelowCursor=2;const inputInnerPadding=this.getInputInnerPadding();const furthestRightCursorBound=containerBounds.right-cursorWidth-inputInnerPadding.paddingRight;const furthestLeftCursorBound=containerBounds.left+cursorWidth+inputInnerPadding.paddingLeft;let cursorBoundsLeft=cursorBounds.left;if(cursorBounds.left>furthestRightCursorBound){cursorBoundsLeft=furthestRightCursorBound;}else if(cursorBounds.left<furthestLeftCursorBound){cursorBoundsLeft=furthestLeftCursorBound;}this.setState({handle:{visible:true,animateIntoPosition,x:cursorBoundsLeft+cursorWidth/2-containerBounds.left,y:cursorBounds.bottom+gapBelowCursor-containerBounds.top}});},this._hideCursorHandle=()=>{this.setState({handle:{visible:false,x:0,y:0}});},this._handleScroll=()=>{if(this.state.handle.animateIntoPosition!==false){this._hideCursorHandle();}},this.blur=()=>{this.mathField.blur();this.setState({showInputFocusStyle:false,handle:{visible:false}});},this.focus=setKeypadActive=>{this.props.keypadElement?.setKeyHandler(key=>{const cursor=this.mathField.pressKey(key);const hideCursor=()=>{this.setState({handle:{visible:false}});};const value=this.mathField.getContent();if(this.props.value!==value){this.props.onChange(value,hideCursor);}else {hideCursor();}return cursor});this.mathField.focus();this.props?.onFocus();setKeypadActive(true);this.setState({focused:true,showInputFocusStyle:true},()=>{setTimeout(()=>{if(this._isMounted){const maybeKeypadNode=this.props.keypadElement?.getDOMNode();scrollIntoView(this._container,maybeKeypadNode);}});});},this._findHitNode=(containerBounds,x,y,dx,dy)=>{while(y>=containerBounds.top&&y<=containerBounds.bottom){y+=dy;const points=[[x-dx,y],[x,y],[x+dx,y]];const elements=points.map(point=>document.elementFromPoint(...point)).filter(element=>element&&this._root.contains(element)&&(!element.classList.contains("mq-root-block")&&!element.classList.contains("mq-non-leaf")||element.classList.contains("mq-empty")||element.classList.contains("mq-hasCursor")));let hitNode=null;const nonLeafElements=[];let max=0;const counts={};const elementsById={};for(const element of elements){const id=element?.getAttribute("mathquill-command-id");if(id!=null){counts[id]=(counts[id]||0)+1;elementsById[id]=element;}else {nonLeafElements.push(element);}}for(const[id,count]of wonderStuffCore.entries(counts)){if(count>max){max=count;hitNode=elementsById[id];}}if(hitNode==null&&nonLeafElements.length>0){hitNode=nonLeafElements[0];}if(hitNode!==null){this.mathField.setCursorPosition(x,y,hitNode);return true}}return false},this._insertCursorAtClosestNode=(x,y)=>{const cursor=this.mathField.getCursor();if(!this._root.hasChildNodes()){cursor.insAtLeftEnd(this.mathField.mathField.controller().root);return}if(y>this._containerBounds.bottom){y=this._containerBounds.bottom-10;}else if(y<this._containerBounds.top){y=this._containerBounds.top+10;}if(x>this._containerBounds.right){x=this._containerBounds.right-15;}else if(x<this._containerBounds.left){x=this._containerBounds.left+15;}let dy;dy=-8;const dx=5;if(this._findHitNode(this._containerBounds,x,y,dx,dy)){return}y=this._containerBounds.top;dy=8;if(this._findHitNode(this._containerBounds,x,y,dx,dy)){return}const firstChildBounds=this._root.firstChild.getBoundingClientRect();const lastChildBounds=this._root.lastChild.getBoundingClientRect();const left=firstChildBounds.left;const right=lastChildBounds.right;if(Math.abs(x-right)<Math.abs(x-left)){cursor.insAtRightEnd(this.mathField.mathField.controller().root);}else {cursor.insAtLeftEnd(this.mathField.mathField.controller().root);}this.props.keypadElement?.setCursor({context:this.mathField.contextForCursor()});},this.handleTouchStart=(e,keypadActive,setKeypadActive)=>{e.stopPropagation();this._hideCursorHandle();if(this.mathField.getContent()!==""){this._containerBounds=this._container.getBoundingClientRect();const touch=e.changedTouches[0];this._insertCursorAtClosestNode(touch.clientX,touch.clientY);}if(this.state.focused&&!keypadActive){setKeypadActive(true);}if(!this.state.focused){this.focus(setKeypadActive);}this.inputRef?.focus();},this.handleClick=(e,keypadActive,setKeypadActive)=>{e.stopPropagation();this._hideCursorHandle();if(this.mathField.getContent()!==""){this._containerBounds=this._container.getBoundingClientRect();this._insertCursorAtClosestNode(e.clientX,e.clientY);}if(this.state.focused&&!keypadActive){setKeypadActive(true);}if(!this.state.focused){this.focus(setKeypadActive);}this.inputRef?.focus();},this.handleTouchMove=e=>{e.stopPropagation();if(this.mathField.getContent()!==""&&this.state.focused){const touch=e.changedTouches[0];this._insertCursorAtClosestNode(touch.clientX,touch.clientY);}},this.handleTouchEnd=e=>{e.stopPropagation();if(this.mathField.getContent()!==""&&this.state.focused){this._updateCursorHandle();}},this.onCursorHandleTouchStart=e=>{e.stopPropagation();e.preventDefault();this._containerBounds=this._container.getBoundingClientRect();},this._constrainToBound=(value,min,max,friction)=>{if(value<min){return min+(value-min)*friction}else if(value>max){return max+(value-max)*friction}else {return value}},this.onCursorHandleTouchMove=e=>{e.stopPropagation();const x=e.changedTouches[0].clientX;const y=e.changedTouches[0].clientY;const relativeX=x-this._containerBounds.left;const relativeY=y-2*cursorHandleRadiusPx*cursorHandleDistanceMultiplier-this._containerBounds.top;this.setState({handle:{animateIntoPosition:false,visible:true,x:this._constrainToBound(relativeX,0,this._containerBounds.width,constrainingFrictionFactor),y:this._constrainToBound(relativeY,0,this._containerBounds.height,constrainingFrictionFactor)}});const distanceAboveFingerToTrySelecting=22;const adjustedY=y-distanceAboveFingerToTrySelecting;this._insertCursorAtClosestNode(x,adjustedY);},this.onCursorHandleTouchEnd=e=>{e.stopPropagation();this._updateCursorHandle(true);},this.onCursorHandleTouchCancel=e=>{e.stopPropagation();this._updateCursorHandle(true);},this.domKeyToMathQuillKey=key=>{const keyMap={"+":"PLUS","-":"MINUS","*":"TIMES","/":"DIVIDE",".":"DECIMAL","%":"PERCENT","=":"EQUAL",">":"GT","<":"LT","^":"EXP"};if(["0","1","2","3","4","5","6","7","8","9"].includes(key)){return `NUM_${key}`}else if(key==="Backspace"){return "BACKSPACE"}else if(key in keyMap){return keyMap[key]}return null},this.handleKeyUp=event=>{const mathQuillKey=this.domKeyToMathQuillKey(event.key);if(mathQuillKey){this.mathField.pressKey(mathQuillKey);const value=this.mathField.getContent();if(this.props.value!==value){this.mathField.setContent(this.props.value);this.props.onChange(value,()=>{});this._hideCursorHandle();}}},this.getBorderWidthPx=()=>{const normalBorderWidthPx=1;const focusedBorderWidthPx=2;return this.state.focused?focusedBorderWidthPx:normalBorderWidthPx},this.getInputInnerPadding=()=>{const paddingInset=totalDesiredPadding-this.getBorderWidthPx();const symbolaPaddingBottom=3;const symbolaPaddingTop=1;const cursorPadding=2;const padding={paddingTop:paddingInset-symbolaPaddingTop,paddingRight:paddingInset+cursorPadding,paddingBottom:paddingInset-symbolaPaddingBottom,paddingLeft:paddingInset+cursorPadding};return padding};}}MathInput.contextType=MathInputI18nContext;MathInput.defaultProps={style:{},value:""};MathInput.contextType=MathInputI18nContext;const fontSizePt=18;const inputMaxWidth=128;const numeralHeightPx=20;const totalDesiredPadding=12;const minHeightPx=numeralHeightPx+totalDesiredPadding*2;const minWidthPx=64;const styles$6=aphrodite.StyleSheet.create({input:{position:"relative",display:"inline-block",verticalAlign:"middle",maxWidth:inputMaxWidth}});const inlineStyles={innerContainer:{backgroundColor:"white",minHeight:minHeightPx,minWidth:minWidthPx,maxWidth:inputMaxWidth,boxSizing:"border-box",position:"relative",borderStyle:"solid",borderColor:wonderBlocksTokens.semanticColor.core.border.neutral.default,borderRadius:4,color:wonderBlocksTokens.semanticColor.core.foreground.neutral.strong}};
+const constrainingFrictionFactor=.8;class MathInput extends React__namespace.Component{componentDidMount(){this._isMounted=true;this.mathField=new MathWrapper(this._mathContainer,this.props.ariaLabel,this.context.strings,this.context.locale,{onCursorMove:cursor=>{this.props.keypadElement?.setCursor(cursor);}});this.mathField.setContent(this.props.value);this._updateInputPadding();this._container=ReactDOM__default.default.findDOMNode(this);this._root=this._container.querySelector(".mq-root-block");this._root.addEventListener("scroll",this._handleScroll);const isWithinKeypadBounds=(x,y)=>{const bounds=this._getKeypadBounds();if(!bounds){return false}return bounds.left<=x&&bounds.right>=x&&bounds.top<=y&&bounds.bottom>=y||bounds.bottom<y};this.recordTouchStartOutside=evt=>{if(this.state.focused){if(!this._container.contains(evt.target)){let touchDidStartInOrBelowKeypad=false;if(this.props.keypadElement&&this.props.keypadElement.getDOMNode()){for(let i=0;i<evt.changedTouches.length;i++){const[x,y]=[evt.changedTouches[i].clientX,evt.changedTouches[i].clientY];if(isWithinKeypadBounds(x,y)){touchDidStartInOrBelowKeypad=true;break}}}if(!touchDidStartInOrBelowKeypad){this.didTouchOutside=true;if(this.dragListener){this.dragListener.detach();}this.dragListener=new DragListener(()=>{this.didScroll=true;this.dragListener.detach();},evt);this.dragListener.attach();}}}};this.blurOnTouchEndOutside=evt=>{if(this.state.focused&&this.didTouchOutside&&!this.didScroll){this.blur();this.mathField.blur();this.props.onBlur?.();}this.didTouchOutside=false;this.didScroll=false;if(this.dragListener){this.dragListener.detach();}};this.blurOnClickOutside=evt=>{if(this.state.focused){if(!this._container.contains(evt.target)){if(this.props.keypadElement&&this.props.keypadElement.getDOMNode()){const[x,y]=[evt.clientX,evt.clientY];if(!isWithinKeypadBounds(x,y)){this.blur();this.props.onBlur?.();}}}}};window.addEventListener("touchstart",this.recordTouchStartOutside);window.addEventListener("touchend",this.blurOnTouchEndOutside);window.addEventListener("touchcancel",this.blurOnTouchEndOutside);window.addEventListener("click",this.blurOnClickOutside);}componentDidUpdate(prevProps,prevState){if(this.mathField.getContent()!==this.props.value){this.mathField.setContent(this.props.value);}if(prevState.focused!==this.state.focused){this._updateInputPadding();}}componentWillUnmount(){this._isMounted=false;window.removeEventListener("touchstart",this.recordTouchStartOutside);window.removeEventListener("touchend",this.blurOnTouchEndOutside);window.removeEventListener("touchcancel",this.blurOnTouchEndOutside);window.removeEventListener("click",this.blurOnClickOutside);}_getKeypadBounds(){const keypadNode=this.props.keypadElement?.getDOMNode();if(keypadNode instanceof Element){return keypadNode.getBoundingClientRect()}return null}_findHitNode(containerBounds,x,y,dx,dy){while(y>=containerBounds.top&&y<=containerBounds.bottom){y+=dy;const points=[[x-dx,y],[x,y],[x+dx,y]];const elements=points.map(point=>document.elementFromPoint(...point)).filter(element=>element&&this._root.contains(element)&&(!element.classList.contains("mq-root-block")&&!element.classList.contains("mq-non-leaf")||element.classList.contains("mq-empty")||element.classList.contains("mq-hasCursor")));let hitNode=null;const nonLeafElements=[];let max=0;const counts={};const elementsById={};for(const element of elements){const id=element?.getAttribute("mathquill-command-id");if(id!=null){counts[id]=(counts[id]||0)+1;elementsById[id]=element;}else {nonLeafElements.push(element);}}for(const[id,count]of wonderStuffCore.entries(counts)){if(count>max){max=count;hitNode=elementsById[id];}}if(hitNode==null&&nonLeafElements.length>0){hitNode=nonLeafElements[0];}if(hitNode!==null){this.mathField.setCursorPosition(x,y,hitNode);return true}}return false}_insertCursorAtClosestNode(x,y){const cursor=this.mathField.getCursor();if(!this._root.hasChildNodes()){cursor.insAtLeftEnd(this.mathField.mathField.controller().root);return}if(y>this._containerBounds.bottom){y=this._containerBounds.bottom-10;}else if(y<this._containerBounds.top){y=this._containerBounds.top+10;}if(x>this._containerBounds.right){x=this._containerBounds.right-15;}else if(x<this._containerBounds.left){x=this._containerBounds.left+15;}let dy;dy=-8;const dx=5;if(this._findHitNode(this._containerBounds,x,y,dx,dy)){return}y=this._containerBounds.top;dy=8;if(this._findHitNode(this._containerBounds,x,y,dx,dy)){return}const firstChildBounds=this._root.firstChild.getBoundingClientRect();const lastChildBounds=this._root.lastChild.getBoundingClientRect();const left=firstChildBounds.left;const right=lastChildBounds.right;if(Math.abs(x-right)<Math.abs(x-left)){cursor.insAtRightEnd(this.mathField.mathField.controller().root);}else {cursor.insAtLeftEnd(this.mathField.mathField.controller().root);}this.props.keypadElement?.setCursor({context:this.mathField.contextForCursor()});}_constrainToBound(value,min,max,friction){if(value<min){return min+(value-min)*friction}else if(value>max){return max+(value-max)*friction}else {return value}}render(){const{showInputFocusStyle,handle}=this.state;const{style}=this.props;const innerStyle={...inlineStyles.innerContainer,borderWidth:this.getBorderWidthPx(),...showInputFocusStyle?{borderColor:wonderBlocksTokens.semanticColor.core.border.instructive.default}:{},...style};const ariaLabel=this.context.strings.mathInputBox+" "+this.context.strings.fingerTap;return jsxRuntimeExports.jsx(keypadContext.KeypadContext.Consumer,{children:({keypadActive,setKeypadActive})=>jsxRuntimeExports.jsxs(wonderBlocksCore.View,{style:styles$6.input,onTouchStart:e=>{this.handleTouchStart(e,keypadActive,setKeypadActive);},onTouchMove:this.handleTouchMove,onTouchEnd:this.handleTouchEnd,onClick:e=>{this.handleClick(e,keypadActive,setKeypadActive);},role:"textbox","aria-label":ariaLabel,children:[jsxRuntimeExports.jsx("div",{className:"keypad-input",tabIndex:0,ref:node=>{this.inputRef=node;},onFocus:()=>{this.focus(setKeypadActive);},onBlur:this.blur,onKeyUp:this.handleKeyUp,children:jsxRuntimeExports.jsx("div",{ref:node=>{this._mathContainer=ReactDOM__default.default.findDOMNode(node);},style:innerStyle})}),showInputFocusStyle&&handle.visible&&jsxRuntimeExports.jsx(CursorHandle,{...handle,onTouchStart:this.onCursorHandleTouchStart,onTouchMove:this.onCursorHandleTouchMove,onTouchEnd:this.onCursorHandleTouchEnd,onTouchCancel:this.onCursorHandleTouchCancel})]})})}constructor(...args){super(...args),this.state={focused:false,showInputFocusStyle:false,handle:{animateIntoPosition:false,visible:false,x:0,y:0}},this._updateInputPadding=()=>{this._container=ReactDOM__default.default.findDOMNode(this);this._root=this._container.querySelector(".mq-root-block");const padding=this.getInputInnerPadding();this._root.style.padding=`${padding.paddingTop}px ${padding.paddingRight}px`+` ${padding.paddingBottom}px ${padding.paddingLeft}px`;this._root.style.fontSize=`${fontSizePt}pt`;},this._updateCursorHandle=animateIntoPosition=>{const containerBounds=this._container.getBoundingClientRect();const cursor=this._container.querySelector(".mq-cursor");const cursorBounds=cursor.getBoundingClientRect();const cursorWidth=cursorBounds.width;const gapBelowCursor=2;const inputInnerPadding=this.getInputInnerPadding();const furthestRightCursorBound=containerBounds.right-cursorWidth-inputInnerPadding.paddingRight;const furthestLeftCursorBound=containerBounds.left+cursorWidth+inputInnerPadding.paddingLeft;let cursorBoundsLeft=cursorBounds.left;if(cursorBounds.left>furthestRightCursorBound){cursorBoundsLeft=furthestRightCursorBound;}else if(cursorBounds.left<furthestLeftCursorBound){cursorBoundsLeft=furthestLeftCursorBound;}this.setState({handle:{visible:true,animateIntoPosition,x:cursorBoundsLeft+cursorWidth/2-containerBounds.left,y:cursorBounds.bottom+gapBelowCursor-containerBounds.top}});},this._hideCursorHandle=()=>{this.setState({handle:{visible:false,x:0,y:0}});},this._handleScroll=()=>{if(this.state.handle.animateIntoPosition!==false){this._hideCursorHandle();}},this.blur=()=>{this.mathField.blur();this.setState({showInputFocusStyle:false,handle:{visible:false}});},this.focus=setKeypadActive=>{this.props.keypadElement?.setKeyHandler(key=>{const cursor=this.mathField.pressKey(key);const hideCursor=()=>{this.setState({handle:{visible:false}});};const value=this.mathField.getContent();if(this.props.value!==value){this.props.onChange(value,hideCursor);}else {hideCursor();}return cursor});this.mathField.focus();this.props?.onFocus();setKeypadActive(true);this.setState({focused:true,showInputFocusStyle:true},()=>{setTimeout(()=>{if(this._isMounted){const maybeKeypadNode=this.props.keypadElement?.getDOMNode();scrollIntoView(this._container,maybeKeypadNode);}});});},this.handleTouchStart=(e,keypadActive,setKeypadActive)=>{e.stopPropagation();this._hideCursorHandle();if(this.mathField.getContent()!==""){this._containerBounds=this._container.getBoundingClientRect();const touch=e.changedTouches[0];this._insertCursorAtClosestNode(touch.clientX,touch.clientY);}if(this.state.focused&&!keypadActive){setKeypadActive(true);}if(!this.state.focused){this.focus(setKeypadActive);}this.inputRef?.focus();},this.handleClick=(e,keypadActive,setKeypadActive)=>{e.stopPropagation();this._hideCursorHandle();if(this.mathField.getContent()!==""){this._containerBounds=this._container.getBoundingClientRect();this._insertCursorAtClosestNode(e.clientX,e.clientY);}if(this.state.focused&&!keypadActive){setKeypadActive(true);}if(!this.state.focused){this.focus(setKeypadActive);}this.inputRef?.focus();},this.handleTouchMove=e=>{e.stopPropagation();if(this.mathField.getContent()!==""&&this.state.focused){const touch=e.changedTouches[0];this._insertCursorAtClosestNode(touch.clientX,touch.clientY);}},this.handleTouchEnd=e=>{e.stopPropagation();if(this.mathField.getContent()!==""&&this.state.focused){this._updateCursorHandle();}},this.onCursorHandleTouchStart=e=>{e.stopPropagation();e.preventDefault();this._containerBounds=this._container.getBoundingClientRect();},this.onCursorHandleTouchMove=e=>{e.stopPropagation();const x=e.changedTouches[0].clientX;const y=e.changedTouches[0].clientY;const relativeX=x-this._containerBounds.left;const relativeY=y-2*cursorHandleRadiusPx*cursorHandleDistanceMultiplier-this._containerBounds.top;this.setState({handle:{animateIntoPosition:false,visible:true,x:this._constrainToBound(relativeX,0,this._containerBounds.width,constrainingFrictionFactor),y:this._constrainToBound(relativeY,0,this._containerBounds.height,constrainingFrictionFactor)}});const distanceAboveFingerToTrySelecting=22;const adjustedY=y-distanceAboveFingerToTrySelecting;this._insertCursorAtClosestNode(x,adjustedY);},this.onCursorHandleTouchEnd=e=>{e.stopPropagation();this._updateCursorHandle(true);},this.onCursorHandleTouchCancel=e=>{e.stopPropagation();this._updateCursorHandle(true);},this.domKeyToMathQuillKey=key=>{const keyMap={"+":"PLUS","-":"MINUS","*":"TIMES","/":"DIVIDE",".":"DECIMAL","%":"PERCENT","=":"EQUAL",">":"GT","<":"LT","^":"EXP"};if(["0","1","2","3","4","5","6","7","8","9"].includes(key)){return `NUM_${key}`}else if(key==="Backspace"){return "BACKSPACE"}else if(key in keyMap){return keyMap[key]}return null},this.handleKeyUp=e=>{const mathQuillKey=this.domKeyToMathQuillKey(e.key);if(mathQuillKey){this.mathField.pressKey(mathQuillKey);const value=this.mathField.getContent();if(this.props.value!==value){this.mathField.setContent(this.props.value);this.props.onChange(value,()=>{});this._hideCursorHandle();}}},this.getBorderWidthPx=()=>{const normalBorderWidthPx=1;const focusedBorderWidthPx=2;return this.state.focused?focusedBorderWidthPx:normalBorderWidthPx},this.getInputInnerPadding=()=>{const paddingInset=totalDesiredPadding-this.getBorderWidthPx();const symbolaPaddingBottom=3;const symbolaPaddingTop=1;const cursorPadding=2;const padding={paddingTop:paddingInset-symbolaPaddingTop,paddingRight:paddingInset+cursorPadding,paddingBottom:paddingInset-symbolaPaddingBottom,paddingLeft:paddingInset+cursorPadding};return padding};}}MathInput.contextType=MathInputI18nContext;MathInput.defaultProps={style:{},value:""};MathInput.contextType=MathInputI18nContext;const fontSizePt=18;const inputMaxWidth=128;const numeralHeightPx=20;const totalDesiredPadding=12;const minHeightPx=numeralHeightPx+totalDesiredPadding*2;const minWidthPx=64;const styles$6=aphrodite.StyleSheet.create({input:{position:"relative",display:"inline-block",verticalAlign:"middle",maxWidth:inputMaxWidth}});const inlineStyles={innerContainer:{backgroundColor:"white",minHeight:minHeightPx,minWidth:minWidthPx,maxWidth:inputMaxWidth,boxSizing:"border-box",position:"relative",borderStyle:"solid",borderColor:wonderBlocksTokens.semanticColor.core.border.neutral.default,borderRadius:4,color:wonderBlocksTokens.semanticColor.core.foreground.neutral.strong}};
 
 const getDefaultOperatorFields=({key,keyType="OPERATOR",ariaLabel=key,data=key})=>({id:key,type:keyType,ariaLabel,icon:{data}});const getDefaultValueFields=({key,keyType="VALUE",ariaLabel=key,data=key})=>({id:key,type:keyType,ariaLabel,icon:{data}});const getDefaultNumberFields=({key,data=key.replace("NUM_",""),keyType="VALUE",ariaLabel=data})=>({id:key,type:keyType,ariaLabel,icon:{data}});const KeyConfigs=strings=>({PLUS:{...getDefaultOperatorFields({key:"PLUS",ariaLabel:strings.plus})},MINUS:{...getDefaultOperatorFields({key:"MINUS",ariaLabel:strings.minus})},NEGATIVE:{...getDefaultOperatorFields({key:"NEGATIVE",ariaLabel:strings.negative})},TIMES:{...getDefaultOperatorFields({key:"TIMES",ariaLabel:strings.times})},DIVIDE:{...getDefaultOperatorFields({key:"DIVIDE",ariaLabel:strings.divide})},DECIMAL:{...getDefaultOperatorFields({key:"DECIMAL",keyType:"VALUE",ariaLabel:strings.decimal})},PERIOD:{...getDefaultOperatorFields({key:"PERIOD",keyType:"VALUE",ariaLabel:"."})},PERCENT:{...getDefaultOperatorFields({key:"PERCENT",ariaLabel:strings.percent})},CDOT:{...getDefaultOperatorFields({key:"CDOT",ariaLabel:strings.cdot})},EQUAL:{...getDefaultOperatorFields({key:"EQUAL",ariaLabel:strings.equalsSign})},NEQ:{...getDefaultOperatorFields({key:"NEQ",ariaLabel:strings.notEqualsSign})},GT:{...getDefaultOperatorFields({key:"GT",ariaLabel:strings.greaterThanSign})},LT:{...getDefaultOperatorFields({key:"LT",ariaLabel:strings.lessThanSign})},GEQ:{...getDefaultOperatorFields({key:"GEQ",ariaLabel:strings.greaterThanOrEqualToSign})},LEQ:{...getDefaultOperatorFields({key:"LEQ",ariaLabel:strings.lessThanOrEqualSign})},FRAC_INCLUSIVE:{...getDefaultOperatorFields({key:"FRAC_INCLUSIVE",ariaLabel:strings.fractionExpressionInNumerator})},FRAC_EXCLUSIVE:{...getDefaultOperatorFields({key:"FRAC_EXCLUSIVE",ariaLabel:strings.fractionExcludingExpression})},FRAC:{...getDefaultOperatorFields({key:"FRAC",ariaLabel:strings.fractionExcludingExpression})},EXP:{...getDefaultOperatorFields({key:"EXP",ariaLabel:strings.customExponent})},EXP_2:{...getDefaultOperatorFields({key:"EXP_2",ariaLabel:strings.square})},EXP_3:{...getDefaultOperatorFields({key:"EXP_3",ariaLabel:strings.cube})},SQRT:{...getDefaultOperatorFields({key:"SQRT",ariaLabel:strings.squareRoot})},CUBE_ROOT:{...getDefaultOperatorFields({key:"CUBE_ROOT",ariaLabel:strings.cubeRoot})},RADICAL:{...getDefaultOperatorFields({key:"RADICAL",ariaLabel:strings.radicalWithCustomRoot})},LEFT_PAREN:{...getDefaultOperatorFields({key:"LEFT_PAREN",ariaLabel:strings.leftParenthesis})},RIGHT_PAREN:{...getDefaultOperatorFields({key:"RIGHT_PAREN",ariaLabel:strings.rightParenthesis})},LN:{...getDefaultOperatorFields({key:"LN",ariaLabel:strings.naturalLog})},LOG:{...getDefaultOperatorFields({key:"LOG",ariaLabel:strings.logBase10})},LOG_N:{...getDefaultOperatorFields({key:"LOG_N",ariaLabel:strings.logCustomBase})},SIN:{...getDefaultOperatorFields({key:"SIN",ariaLabel:strings.sine})},COS:{...getDefaultOperatorFields({key:"COS",ariaLabel:strings.cosine})},TAN:{...getDefaultOperatorFields({key:"TAN",ariaLabel:strings.tangent})},PI:{...getDefaultValueFields({key:"PI",data:"\\pi",ariaLabel:strings.pi})},THETA:{...getDefaultValueFields({key:"THETA",data:"\\theta",ariaLabel:strings.theta})},UP:{...getDefaultOperatorFields({key:"UP",keyType:"INPUT_NAVIGATION",ariaLabel:strings.upArrow})},RIGHT:{...getDefaultOperatorFields({key:"RIGHT",keyType:"INPUT_NAVIGATION",ariaLabel:strings.rightArrow})},DOWN:{...getDefaultOperatorFields({key:"DOWN",keyType:"INPUT_NAVIGATION",ariaLabel:strings.downArrow})},LEFT:{...getDefaultOperatorFields({key:"LEFT",keyType:"INPUT_NAVIGATION",ariaLabel:strings.leftArrow})},JUMP_OUT_PARENTHESES:{...getDefaultOperatorFields({key:"JUMP_OUT_PARENTHESES",keyType:"INPUT_NAVIGATION",ariaLabel:strings.navOutOfParentheses})},JUMP_OUT_EXPONENT:{...getDefaultOperatorFields({key:"JUMP_OUT_EXPONENT",keyType:"INPUT_NAVIGATION",ariaLabel:strings.navOutOfExponent})},JUMP_OUT_BASE:{...getDefaultOperatorFields({key:"JUMP_OUT_BASE",keyType:"INPUT_NAVIGATION",ariaLabel:strings.navOutOfBase})},JUMP_INTO_NUMERATOR:{...getDefaultOperatorFields({key:"JUMP_INTO_NUMERATOR",keyType:"INPUT_NAVIGATION",ariaLabel:strings.navIntoNumerator})},JUMP_OUT_NUMERATOR:{...getDefaultOperatorFields({key:"JUMP_OUT_NUMERATOR",keyType:"INPUT_NAVIGATION",ariaLabel:strings.navOutOfNumeratorIntoDenominator})},JUMP_OUT_DENOMINATOR:{...getDefaultOperatorFields({key:"JUMP_OUT_DENOMINATOR",keyType:"INPUT_NAVIGATION",ariaLabel:strings.navOutOfDenominator})},BACKSPACE:{...getDefaultOperatorFields({key:"BACKSPACE",keyType:"INPUT_NAVIGATION",ariaLabel:strings.delete})},DISMISS:{...getDefaultOperatorFields({key:"DISMISS",keyType:"KEYPAD_NAVIGATION",ariaLabel:strings.dismiss})},NUM_0:{...getDefaultNumberFields({key:"NUM_0"})},NUM_1:{...getDefaultNumberFields({key:"NUM_1"})},NUM_2:{...getDefaultNumberFields({key:"NUM_2"})},NUM_3:{...getDefaultNumberFields({key:"NUM_3"})},NUM_4:{...getDefaultNumberFields({key:"NUM_4"})},NUM_5:{...getDefaultNumberFields({key:"NUM_5"})},NUM_6:{...getDefaultNumberFields({key:"NUM_6"})},NUM_7:{...getDefaultNumberFields({key:"NUM_7"})},NUM_8:{...getDefaultNumberFields({key:"NUM_8"})},NUM_9:{...getDefaultNumberFields({key:"NUM_9"})},A:{...getDefaultValueFields({key:"A"})},B:{...getDefaultValueFields({key:"B"})},C:{...getDefaultValueFields({key:"C"})},D:{...getDefaultValueFields({key:"D"})},E:{...getDefaultValueFields({key:"E"})},F:{...getDefaultValueFields({key:"F"})},G:{...getDefaultValueFields({key:"G"})},H:{...getDefaultValueFields({key:"H"})},I:{...getDefaultValueFields({key:"I"})},J:{...getDefaultValueFields({key:"J"})},K:{...getDefaultValueFields({key:"K"})},L:{...getDefaultValueFields({key:"L"})},M:{...getDefaultValueFields({key:"M"})},N:{...getDefaultValueFields({key:"N"})},O:{...getDefaultValueFields({key:"O"})},P:{...getDefaultValueFields({key:"P"})},Q:{...getDefaultValueFields({key:"Q"})},R:{...getDefaultValueFields({key:"R"})},S:{...getDefaultValueFields({key:"S"})},T:{...getDefaultValueFields({key:"T"})},U:{...getDefaultValueFields({key:"U"})},V:{...getDefaultValueFields({key:"V"})},W:{...getDefaultValueFields({key:"W"})},X:{...getDefaultValueFields({key:"X"})},Y:{...getDefaultValueFields({key:"Y"})},Z:{...getDefaultValueFields({key:"Z"})},a:{...getDefaultValueFields({key:"a"})},b:{...getDefaultValueFields({key:"b"})},c:{...getDefaultValueFields({key:"c"})},d:{...getDefaultValueFields({key:"d"})},e:{...getDefaultValueFields({key:"e"})},f:{...getDefaultValueFields({key:"f"})},g:{...getDefaultValueFields({key:"g"})},h:{...getDefaultValueFields({key:"h"})},i:{...getDefaultValueFields({key:"i"})},j:{...getDefaultValueFields({key:"j"})},k:{...getDefaultValueFields({key:"k"})},l:{...getDefaultValueFields({key:"l"})},m:{...getDefaultValueFields({key:"m"})},n:{...getDefaultValueFields({key:"n"})},o:{...getDefaultValueFields({key:"o"})},p:{...getDefaultValueFields({key:"p"})},q:{...getDefaultValueFields({key:"q"})},r:{...getDefaultValueFields({key:"r"})},s:{...getDefaultValueFields({key:"s"})},t:{...getDefaultValueFields({key:"t"})},u:{...getDefaultValueFields({key:"u"})},v:{...getDefaultValueFields({key:"v"})},w:{...getDefaultValueFields({key:"w"})},x:{...getDefaultValueFields({key:"x"})},y:{...getDefaultValueFields({key:"y"})},z:{...getDefaultValueFields({key:"z"})}});