@khanacademy/math-input 26.6.2 → 26.6.3

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.2";addLibraryVersionToPerseusDebug(libName,libVersion);
+const libName="@khanacademy/math-input";const libVersion="26.6.3";addLibraryVersionToPerseusDebug(libName,libVersion);
 
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -1474,7 +1474,7 @@ const TabIconLabel=function({tintColor,type}){switch(type){case "Geometry":{retu
 
 function getAvailableTabs(props,selectedPage){const{onClickKey,cursorContext,preAlgebra,logarithms,basicRelations,advancedRelations,scientific,extraKeys}=props;const tabPanels=[{id:"Fractions",label:jsxRuntimeExports.jsx(TabIconLabel,{type:"Fractions",tintColor:"currentColor"}),panel:jsxRuntimeExports.jsx(RenderKeyPadPanel,{...props,selectedPage:selectedPage,children:jsxRuntimeExports.jsx(FractionsPage,{onClickKey:onClickKey,cursorContext:cursorContext})}),"aria-label":"Fractions"},{id:"Numbers",label:jsxRuntimeExports.jsx(TabIconLabel,{type:"Numbers",tintColor:"currentColor"}),panel:jsxRuntimeExports.jsx(RenderKeyPadPanel,{...props,selectedPage:selectedPage,children:jsxRuntimeExports.jsx(NumbersPage,{onClickKey:onClickKey,scientific:scientific})}),"aria-label":"Numbers"},{id:"Extras",label:jsxRuntimeExports.jsx(TabIconLabel,{type:"Extras",tintColor:"currentColor"}),panel:jsxRuntimeExports.jsx(RenderKeyPadPanel,{...props,selectedPage:selectedPage,children:jsxRuntimeExports.jsx(ExtrasPage,{onClickKey:onClickKey,extraKeys:extraKeys??[]})}),"aria-label":"Extras"},{id:"Operators",label:jsxRuntimeExports.jsx(TabIconLabel,{type:"Operators",tintColor:"currentColor"}),panel:jsxRuntimeExports.jsx(RenderKeyPadPanel,{...props,selectedPage:selectedPage,children:jsxRuntimeExports.jsx(OperatorsPage,{onClickKey:onClickKey,preAlgebra:preAlgebra,logarithms:logarithms,basicRelations:basicRelations,advancedRelations:advancedRelations})}),"aria-label":"Operators"},{id:"Geometry",label:jsxRuntimeExports.jsx(TabIconLabel,{type:"Geometry",tintColor:"currentColor"}),panel:jsxRuntimeExports.jsx(RenderKeyPadPanel,{...props,selectedPage:selectedPage,children:jsxRuntimeExports.jsx(GeometryPage,{onClickKey:onClickKey})}),"aria-label":"Geometry"}];const tabIds=["Numbers"];if(props.preAlgebra||props.logarithms||props.basicRelations||props.advancedRelations){tabIds.push("Operators");}if(props.trigonometry){tabIds.push("Geometry");}if(props.extraKeys?.length){tabIds.push("Extras");}return tabPanels.filter(tab=>tabIds.includes(tab.id))}
 
-const keypadOuterContainerStyle={display:"flex",alignItems:"center",justifyContent:"center"};const expandedWrapperStyle={borderWidth:border.width.thin,borderStyle:"solid",borderColor:semanticColor.core.border.neutral.subtle,maxWidth:500,borderRadius:border.radius.radius_040};const tabsStyles={tab:{marginBlockStart:sizing.size_080,marginBlockEnd:sizing.size_080},tablist:{gap:sizing.size_080,paddingInline:sizing.size_080},tabPanel:{display:"flex",flexDirection:"row",flexWrap:"nowrap",backgroundColor:semanticColor.core.background.disabled.strong,direction:"ltr"}};function Keypad({extraKeys=[],...props}){const{onAnalyticsEvent,fractionsOnly,expandedView,showDismiss,onClickKey}=props;const defaultSelectedPage=fractionsOnly?"Fractions":"Numbers";const[selectedPage,setSelectedPage]=React.useState(defaultSelectedPage);const[isMounted,setIsMounted]=React.useState(false);useEffect(()=>{setSelectedPage(defaultSelectedPage);},[fractionsOnly,defaultSelectedPage]);useEffect(()=>{if(!isMounted){onAnalyticsEvent({type:"math-input:keypad-opened",payload:{virtualKeypadVersion:"MATH_INPUT_KEYPAD_V2"}});setIsMounted(true);}return ()=>{if(isMounted){onAnalyticsEvent({type:"math-input:keypad-closed",payload:{virtualKeypadVersion:"MATH_INPUT_KEYPAD_V2"}});setIsMounted(false);}}},[onAnalyticsEvent,isMounted]);if(fractionsOnly){return jsxRuntimeExports.jsx(KeypadFractionsOnly,{...props})}const availableTabs=getAvailableTabs({...props,extraKeys},selectedPage);return jsxRuntimeExports.jsx(View,{className:expandedView?styles$4.keypadOuterContainer:"",style:expandedView?keypadOuterContainerStyle:undefined,children:jsxRuntimeExports.jsxs(View,{className:`${styles$4.wrapper} ${expandedView?styles$4.expandedWrapper:""}`,style:expandedView?{...expandedWrapperStyle,position:"relative"}:{position:"relative"},children:[showDismiss&&jsxRuntimeExports.jsx(View,{style:{position:"absolute",top:sizing.size_120,right:sizing.size_080,zIndex:10},children:jsxRuntimeExports.jsx(IconButton,{icon:xBold,kind:"tertiary","aria-label":"Dismiss",onClick:()=>onClickKey("DISMISS"),size:"xsmall",tabIndex:0,style:{color:semanticColor.core.foreground.neutral.default}})}),jsxRuntimeExports.jsx(Tabs,{"aria-label":"Keypad",tabs:availableTabs,selectedTabId:selectedPage,onTabSelected:newSelectedPage=>{setSelectedPage(newSelectedPage);},styles:tabsStyles})]})})}
+const keypadOuterContainerStyle={display:"flex",alignItems:"center",justifyContent:"center"};const expandedWrapperStyle={borderWidth:border.width.thin,borderStyle:"solid",borderColor:semanticColor.core.border.neutral.subtle,maxWidth:500,borderRadius:border.radius.radius_040};const tabsStyles={tab:{marginBlockStart:sizing.size_080,marginBlockEnd:sizing.size_080},tablist:{gap:sizing.size_080,paddingInline:sizing.size_080},tabPanel:{display:"flex",flexDirection:"row",flexWrap:"nowrap",backgroundColor:semanticColor.core.background.disabled.strong,direction:"ltr"}};function Keypad({extraKeys=[],...props}){const{onAnalyticsEvent,fractionsOnly,expandedView,showDismiss,onClickKey}=props;const defaultSelectedPage=fractionsOnly?"Fractions":"Numbers";const[selectedPage,setSelectedPage]=React.useState(defaultSelectedPage);const[isMounted,setIsMounted]=React.useState(false);useEffect(()=>{setSelectedPage(defaultSelectedPage);},[fractionsOnly,defaultSelectedPage]);useEffect(()=>{if(!isMounted){onAnalyticsEvent({type:"math-input:keypad-opened",payload:{virtualKeypadVersion:"MATH_INPUT_KEYPAD_V2"}});setIsMounted(true);}return ()=>{if(isMounted){onAnalyticsEvent({type:"math-input:keypad-closed",payload:{virtualKeypadVersion:"MATH_INPUT_KEYPAD_V2"}});setIsMounted(false);}}},[onAnalyticsEvent,isMounted]);if(fractionsOnly){return jsxRuntimeExports.jsx(KeypadFractionsOnly,{...props})}const availableTabs=getAvailableTabs({...props,extraKeys},selectedPage);return jsxRuntimeExports.jsx(View,{className:expandedView?styles$4.keypadOuterContainer:"",style:expandedView?keypadOuterContainerStyle:undefined,children:jsxRuntimeExports.jsxs(View,{className:`${styles$4.wrapper} ${expandedView?styles$4.expandedWrapper:""}`,style:expandedView?{...expandedWrapperStyle,position:"relative"}:{position:"relative"},children:[showDismiss&&jsxRuntimeExports.jsx(View,{style:{position:"absolute",top:sizing.size_120,insetInlineEnd:sizing.size_080,zIndex:10},children:jsxRuntimeExports.jsx(IconButton,{icon:xBold,kind:"tertiary","aria-label":"Dismiss",onClick:()=>onClickKey("DISMISS"),size:"xsmall",tabIndex:0,style:{color:semanticColor.core.foreground.neutral.default}})}),jsxRuntimeExports.jsx(Tabs,{"aria-label":"Keypad",tabs:availableTabs,selectedTabId:selectedPage,onTabSelected:newSelectedPage=>{setSelectedPage(newSelectedPage);},styles:tabsStyles})]})})}
 
 function flatten(list){const result=[];if(!list){return result}if(Array.isArray(list)){for(const item of list){result.push(...flatten(item));}}else {result.push(list);}return result}function processStyleType(style){const stylesheetStyles=[];const inlineStyles=[];if(!style){return {style:{},className:""}}const shouldInlineStyles=typeof globalThis!=="undefined"&&globalThis.SNAPSHOT_INLINE_APHRODITE;flatten(style).forEach(child=>{const _definition=child._definition;if(_definition!=null){if(shouldInlineStyles){const def={};for(const[key,value]of entries(_definition)){def[key.replace(/-[a-z]/g,match=>match[1].toUpperCase())]=value;}inlineStyles.push(def);}else {stylesheetStyles.push(child);}}else {inlineStyles.push(child);}});const inlineStylesObject=Object.assign({},...inlineStyles);if(inlineStyles.length>0&&!shouldInlineStyles){const inlineStylesStyleSheet=StyleSheet.create({inlineStyles:inlineStylesObject});stylesheetStyles.push(inlineStylesStyleSheet.inlineStyles);}return {style:shouldInlineStyles?inlineStylesObject:{},className:css(...stylesheetStyles)}}