@khanacademy/perseus 65.3.5 → 65.3.7

package/dist/index.js

@@ -1791,7 +1791,9 @@ const{captureScratchpadTouchStart: captureScratchpadTouchStart$2}=Util;function
 
 let Radio$3 = class Radio extends React__namespace.Component{static getUserInputFromProps(props,unshuffle=true){if(props.choiceStates){const choiceStates=props.choiceStates;const choicesSelected=choiceStates.map(()=>false);for(let i=0;i<choicesSelected.length;i++){const index=unshuffle?props.choices[i].originalIndex:i;choicesSelected[index]=choiceStates[i].selected;}return {choicesSelected}}const{values}=props;if(values){const choicesSelected=[...values];const valuesLength=values.length;for(let i=0;i<valuesLength;i++){const index=unshuffle?props.choices[i].originalIndex:i;choicesSelected[index]=values[i];}return {choicesSelected}}return {choicesSelected:props.choices.map(()=>false)}}focus(choiceIndex){if(this.focusFunction){return this.focusFunction(choiceIndex)}return false}registerFocusFunction(fun){this.focusFunction=fun;}getUserInput(){return Radio.getUserInputFromProps(this.props)}getPromptJSON(){const userInput=Radio.getUserInputFromProps(this.props,false);return getPromptJSON$q(this.props,userInput)}render(){const{choices}=this.props;const{strings}=this.context;let choiceStates;if(this.props.static){choiceStates=choices.map(choice=>({selected:!!choice.correct,crossedOut:false,readOnly:true,highlighted:false,rationaleShown:true,correctnessShown:true,previouslyAnswered:false}));}else if(this.props.showSolutions==="all"){choiceStates=choices.map(({correct})=>({selected:!!correct,crossedOut:false,readOnly:true,highlighted:false,rationaleShown:true,correctnessShown:true,previouslyAnswered:false}));}else if(this.props.choiceStates){choiceStates=this.props.choiceStates;}else if(this.props.values){choiceStates=this.props.values.map(val=>({selected:val,crossedOut:false,readOnly:false,highlighted:false,rationaleShown:false,correctnessShown:false,previouslyAnswered:false}));}else {choiceStates=choices.map(()=>({selected:false,crossedOut:false,readOnly:false,highlighted:false,rationaleShown:false,correctnessShown:false,previouslyAnswered:false}));}const choicesProp=choices.map((choice,i)=>{const content=choice.isNoneOfTheAbove&&!choice.content?strings.noneOfTheAbove:choice.content;const{selected,rationaleShown,correctnessShown,readOnly,highlighted,previouslyAnswered}=choiceStates[i];const reviewChoice=this.props.reviewModeRubric?.choices[i];return {content:this._renderRenderer(content),checked:selected,correct:choice.correct===undefined?!!reviewChoice&&!!reviewChoice.correct:choice.correct,disabled:readOnly,hasRationale:!!choice.rationale,rationale:this._renderRenderer(choice.rationale),showRationale:rationaleShown,showCorrectness:correctnessShown,isNoneOfTheAbove:!!choice.isNoneOfTheAbove,revealNoneOfTheAbove:!!(this.props.questionCompleted&&selected),highlighted,previouslyAnswered:previouslyAnswered}});return jsxRuntimeExports.jsx(BaseRadio$1,{labelWrap:true,multipleSelect:this.props.multipleSelect,countChoices:this.props.countChoices,numCorrect:this.props.numCorrect,choices:choicesProp,onChange:this.updateChoices,reviewModeRubric:this.props.reviewModeRubric,reviewMode:this.props.reviewMode,deselectEnabled:this.props.deselectEnabled,apiOptions:this.props.apiOptions,isLastUsedWidget:this.props.isLastUsedWidget,registerFocusFunction:i=>this.registerFocusFunction(i)})}constructor(...args){super(...args),this._renderRenderer=(content="")=>{let nextPassageRefId=1;const widgets={};const modContent=content.replace(/\{\{passage-ref (\d+) (\d+)(?: "([^"]*)")?\}\}/g,(match,passageNum,refNum,summaryText)=>{const widgetId="passage-ref "+nextPassageRefId;nextPassageRefId++;widgets[widgetId]={type:"passage-ref",graded:false,options:{passageNumber:parseInt(passageNum),referenceNumber:parseInt(refNum),summaryText:summaryText},version:PassageRef$1.version};return "[["+Util.snowman+" "+widgetId+"]]"});return jsxRuntimeExports.jsx(Renderer,{content:modContent,widgets:widgets,findExternalWidgets:this.props.findWidgets,alwaysUpdate:true,linterContext:{...this.props.linterContext,blockHighlight:true},strings:this.context.strings},"choiceContentRenderer")},this.updateChoices=newValueLists=>{const{choiceStates,choices}=this.props;const newChoiceStates=choiceStates?choiceStates.map(state=>({...state})):choices.map(()=>({selected:false,highlighted:false,rationaleShown:false,correctnessShown:false,previouslyAnswered:false,readOnly:false}));newChoiceStates.forEach((choiceState,i)=>{choiceState.selected=newValueLists.checked[i];});this.props.onChange({choiceStates:newChoiceStates});this.props.trackInteraction();};}};Radio$3.contextType=PerseusI18nContext;Radio$3.defaultProps={choices:[],multipleSelect:false,countChoices:false,deselectEnabled:false,linterContext:PerseusLinter.linterContextDefault,showSolutions:"none"};
 
-const SCROLL_DISTANCE=100;function ScrollableView({overflowX,overflowY,children,scrollDescription,style,role="group",...additionalProps}){const{strings}=usePerseusI18n();const containerRef=React.useRef(null);const[isScrollable,setIsScrollable]=React.useState(false);const[canScrollStart,setCanScrollStart]=React.useState(false);const[canScrollEnd,setCanScrollEnd]=React.useState(false);const[isRtl,setIsRtl]=React.useState(false);const updateScrollState=React__namespace.useCallback(()=>{if(!containerRef.current){return}const{scrollLeft,scrollWidth,clientWidth}=containerRef.current;setIsRtl(getComputedStyle(containerRef.current).direction==="rtl");const scrollableThreshold=5;setIsScrollable(scrollWidth>clientWidth+scrollableThreshold);if(isRtl){setCanScrollStart(Math.abs(scrollLeft)<scrollWidth-clientWidth-scrollableThreshold);setCanScrollEnd(scrollLeft<-5);}else {setCanScrollStart(scrollLeft>scrollableThreshold);setCanScrollEnd(scrollLeft+clientWidth<scrollWidth-scrollableThreshold);}},[isRtl]);const scroll=direction=>{if(!containerRef.current){return}const scrollNegative=isRtl&&direction!=="start"||!isRtl&&direction==="start";const scrollAmount=scrollNegative?-100:SCROLL_DISTANCE;containerRef.current.scrollBy({left:scrollAmount,behavior:"smooth"});};React.useEffect(()=>{const container=containerRef.current;if(!container){return}updateScrollState();container.addEventListener("scroll",updateScrollState);window.addEventListener("resize",updateScrollState);return ()=>{container.removeEventListener("scroll",updateScrollState);window.removeEventListener("resize",updateScrollState);}},[children,updateScrollState]);const mergeStyle={overflowX:isScrollable&&overflowX==="auto"?"scroll":overflowX,overflowY:isScrollable&&overflowY==="auto"?"scroll":overflowY,scrollbarWidth:"thin",...style};return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[canScrollEnd&&jsxRuntimeExports.jsx("div",{style:{...styles$u.scrollFade,...isRtl?styles$u.scrollFadeRight:styles$u.scrollFadeLeft}}),canScrollStart&&jsxRuntimeExports.jsx("div",{style:{...styles$u.scrollFade,...isRtl?styles$u.scrollFadeLeft:styles$u.scrollFadeRight}}),jsxRuntimeExports.jsx("div",{...additionalProps,role:role,style:mergeStyle,ref:containerRef,children:children}),isScrollable&&jsxRuntimeExports.jsx(ScrollButtons,{onScrollStart:()=>isRtl?scroll("end"):scroll("start"),onScrollEnd:()=>isRtl?scroll("start"):scroll("end"),canScrollStart:canScrollStart,canScrollEnd:canScrollEnd,scrollDescription:scrollDescription?scrollDescription:strings.scrollAnswers,isRTL:isRtl})]})}function ScrollButtons({onScrollStart,onScrollEnd,canScrollStart,canScrollEnd,scrollDescription,isRTL}){const{strings}=usePerseusI18n();return jsxRuntimeExports.jsxs(wonderBlocksCore.View,{style:styles$u.scrollButtonsContainer,children:[jsxRuntimeExports.jsx(IconButton__default.default,{icon:isRTL?caretRightIcon__default.default:caretLeftIcon__default.default,actionType:"neutral",kind:"secondary",size:"small",onClick:isRTL?onScrollEnd:onScrollStart,"aria-label":strings.scrollStart,disabled:isRTL?!canScrollEnd:!canScrollStart}),jsxRuntimeExports.jsx(IconButton__default.default,{icon:isRTL?caretLeftIcon__default.default:caretRightIcon__default.default,actionType:"neutral",kind:"secondary",size:"small",onClick:isRTL?onScrollStart:onScrollEnd,"aria-label":strings.scrollEnd,disabled:isRTL?!canScrollStart:!canScrollEnd}),jsxRuntimeExports.jsx(wonderBlocksTypography.LabelSmall,{children:scrollDescription})]})}const styles$u={scrollButtonsContainer:{alignItems:"center",flexDirection:"row",gap:wonderBlocksTokens.spacing.xSmall_8,padding:wonderBlocksTokens.spacing.small_12},scrollFade:{position:"absolute",top:0,height:"100%",width:"max-content",pointerEvents:"none",zIndex:1,transition:"opacity 0.3s ease"},scrollFadeRight:{right:0,background:"linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0))"},scrollFadeLeft:{left:0,background:"linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0))"}};
+var styles$u = {"scrollButtonsContainer":"perseus_kjDHiWdD","scrollFade":"perseus_KB5rz4XY","scrollFadeLeft":"perseus_tP0ytdCp","scrollFadeRight":"perseus_t5yijnoR"};
+
+const SCROLL_DISTANCE=100;function ScrollableView({overflowX,overflowY,children,className,scrollDescription,style,role="group",...additionalProps}){const{strings}=usePerseusI18n();const containerRef=React.useRef(null);const[isScrollable,setIsScrollable]=React.useState(false);const[canScrollStart,setCanScrollStart]=React.useState(false);const[canScrollEnd,setCanScrollEnd]=React.useState(false);const[isRtl,setIsRtl]=React.useState(false);const updateScrollState=React__namespace.useCallback(()=>{if(!containerRef.current){return}const{scrollLeft,scrollWidth,clientWidth}=containerRef.current;setIsRtl(getComputedStyle(containerRef.current).direction==="rtl");const scrollableThreshold=5;setIsScrollable(scrollWidth>clientWidth+scrollableThreshold);if(isRtl){setCanScrollStart(Math.abs(scrollLeft)<scrollWidth-clientWidth-scrollableThreshold);setCanScrollEnd(scrollLeft<-5);}else {setCanScrollStart(scrollLeft>scrollableThreshold);setCanScrollEnd(scrollLeft+clientWidth<scrollWidth-scrollableThreshold);}},[isRtl]);const scroll=direction=>{if(!containerRef.current){return}const scrollNegative=isRtl&&direction!=="start"||!isRtl&&direction==="start";const scrollAmount=scrollNegative?-100:SCROLL_DISTANCE;containerRef.current.scrollBy({left:scrollAmount,behavior:"smooth"});};React.useEffect(()=>{const container=containerRef.current;if(!container){return}updateScrollState();container.addEventListener("scroll",updateScrollState);window.addEventListener("resize",updateScrollState);return ()=>{container.removeEventListener("scroll",updateScrollState);window.removeEventListener("resize",updateScrollState);}},[children,updateScrollState]);const mergeStyle={overflowX:isScrollable&&overflowX==="auto"?"scroll":overflowX,overflowY:isScrollable&&overflowY==="auto"?"scroll":overflowY,scrollbarWidth:"thin",...style};return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[canScrollEnd&&jsxRuntimeExports.jsx("div",{className:`${styles$u.scrollFade} ${isRtl?styles$u.scrollFadeRight:styles$u.scrollFadeLeft}`}),canScrollStart&&jsxRuntimeExports.jsx("div",{className:`${styles$u.scrollFade} ${isRtl?styles$u.scrollFadeLeft:styles$u.scrollFadeRight}`}),jsxRuntimeExports.jsx("div",{...additionalProps,role:role,className:className,style:mergeStyle,ref:containerRef,children:children}),isScrollable&&jsxRuntimeExports.jsx(ScrollButtons,{onScrollStart:()=>isRtl?scroll("end"):scroll("start"),onScrollEnd:()=>isRtl?scroll("start"):scroll("end"),canScrollStart:canScrollStart,canScrollEnd:canScrollEnd,scrollDescription:scrollDescription?scrollDescription:strings.scrollAnswers,isRTL:isRtl})]})}function ScrollButtons({onScrollStart,onScrollEnd,canScrollStart,canScrollEnd,scrollDescription,isRTL}){const{strings}=usePerseusI18n();return jsxRuntimeExports.jsxs("div",{className:styles$u.scrollButtonsContainer,children:[jsxRuntimeExports.jsx(IconButton__default.default,{icon:isRTL?caretRightIcon__default.default:caretLeftIcon__default.default,actionType:"neutral",kind:"secondary",size:"small",onClick:isRTL?onScrollEnd:onScrollStart,"aria-label":strings.scrollStart,disabled:isRTL?!canScrollEnd:!canScrollStart}),jsxRuntimeExports.jsx(IconButton__default.default,{icon:isRTL?caretLeftIcon__default.default:caretRightIcon__default.default,actionType:"neutral",kind:"secondary",size:"small",onClick:isRTL?onScrollStart:onScrollEnd,"aria-label":strings.scrollEnd,disabled:isRTL?!canScrollStart:!canScrollEnd}),jsxRuntimeExports.jsx(wonderBlocksTypography.LabelSmall,{children:scrollDescription})]})}
 
 const CHOICE_ICON_SIZE=24;const styles$t={iconWrapper:{display:"inline-block",position:"relative",background:"linear-gradient(to right, white 10%, transparent)"}};
 
@@ -1962,7 +1964,7 @@ function GraphLockedLabelsLayer(props){const{lockedFigures}=props;return lockedF
 
 const LockedEllipse=props=>{const{center,radius,angle,color,fillStyle,strokeStyle,ariaLabel}=props;const hasAria=!!ariaLabel;return jsxRuntimeExports.jsx("g",{className:"locked-ellipse","aria-label":hasAria?ariaLabel:undefined,"aria-hidden":!hasAria,role:"img",children:jsxRuntimeExports.jsx(mafs.Ellipse,{center:center,radius:radius,angle:angle,fillOpacity:perseusCore.lockedFigureFillStyles[fillStyle],strokeStyle:strokeStyle,color:perseusCore.lockedFigureColors[color],svgEllipseProps:{style:{fill:fillStyle==="white"?wonderBlocksTokens.color.white:perseusCore.lockedFigureColors[color]}}})})};
 
-function clampDomain(domain,graphBounds){if(domain[0]>domain[1]){return graphBounds}if(domain[0]<graphBounds[0]&&domain[1]<graphBounds[0]||domain[0]>graphBounds[1]&&domain[1]>graphBounds[1]){return null}const min=Math.max(domain[0],graphBounds[0]);const max=Math.min(domain[1],graphBounds[1]);return [min,max]}
+const strokeWeights={thin:1,medium:2,thick:4};function clampDomain(domain,graphBounds){if(domain[0]>domain[1]){return graphBounds}if(domain[0]<graphBounds[0]&&domain[1]<graphBounds[0]||domain[0]>graphBounds[1]&&domain[1]>graphBounds[1]){return null}const min=Math.max(domain[0],graphBounds[0]);const max=Math.min(domain[1],graphBounds[1]);return [min,max]}
 
 const LockedFunction=props=>{const{range}=useGraphConfig();const[equation,setEquation]=React.useState();const{color,strokeStyle,directionalAxis,domain}=props;const plotProps={color:perseusCore.lockedFigureColors[color],style:strokeStyle};const hasAria=!!props.ariaLabel;React.useEffect(()=>{setEquation(KAS__namespace.parse(props.equation).expr);},[props.equation]);if(typeof equation==="undefined"){return null}const clampedDomain=directionalAxis==="x"?clampDomain(domain,range[0]):clampDomain(domain,range[1]);if(clampedDomain===null){return null}return jsxRuntimeExports.jsxs("g",{className:"locked-function","aria-label":hasAria?props.ariaLabel:undefined,"aria-hidden":!hasAria,role:"img",children:[directionalAxis==="x"&&jsxRuntimeExports.jsx(mafs.Plot.OfX,{y:x=>equation.eval({x}),domain:clampedDomain,...plotProps}),directionalAxis==="y"&&jsxRuntimeExports.jsx(mafs.Plot.OfY,{x:y=>equation.eval({y}),domain:clampedDomain,...plotProps})]})};
 
@@ -1978,7 +1980,7 @@ const{calculateAngleInDegrees: calculateAngleInDegrees$2}=kmath.angles;const Loc
 
 const LockedPoint=props=>{const{color,coord,filled,ariaLabel}=props;const[x,y]=coord;const hasAria=!!ariaLabel;return jsxRuntimeExports.jsx("g",{className:"locked-point","aria-label":hasAria?ariaLabel:undefined,"aria-hidden":!hasAria,role:"img",children:jsxRuntimeExports.jsx(mafs.Point,{x:x,y:y,svgCircleProps:{style:{fill:filled?perseusCore.lockedFigureColors[color]:wonderBlocksTokens.color.white,stroke:perseusCore.lockedFigureColors[color],strokeWidth:wonderBlocksTokens.spacing.xxxxSmall_2}}})})};
 
-const LockedPolygon=props=>{const{points,color,showVertices,fillStyle,strokeStyle}=props;const hasAria=!!props.ariaLabel;return jsxRuntimeExports.jsxs("g",{className:"locked-polygon","aria-label":hasAria?props.ariaLabel:undefined,"aria-hidden":!hasAria,role:"img",children:[jsxRuntimeExports.jsx(mafs.Polygon,{points:[...points],fillOpacity:perseusCore.lockedFigureFillStyles[fillStyle],strokeStyle:strokeStyle,color:perseusCore.lockedFigureColors[color],svgPolygonProps:{style:{fill:fillStyle==="white"?wonderBlocksTokens.color.white:perseusCore.lockedFigureColors[color]}}}),showVertices&&points.map((point,index)=>jsxRuntimeExports.jsx(mafs.Point,{x:point[X],y:point[Y],color:perseusCore.lockedFigureColors[color]},`locked-polygon-point-${index}`))]})};
+const LockedPolygon=props=>{const{points,color,showVertices,fillStyle,strokeStyle,weight="medium"}=props;const hasAria=!!props.ariaLabel;return jsxRuntimeExports.jsxs("g",{className:"locked-polygon","aria-label":hasAria?props.ariaLabel:undefined,"aria-hidden":!hasAria,role:"img",children:[jsxRuntimeExports.jsx(mafs.Polygon,{points:[...points],fillOpacity:perseusCore.lockedFigureFillStyles[fillStyle],strokeStyle:strokeStyle,color:perseusCore.lockedFigureColors[color],weight:strokeWeights[weight],svgPolygonProps:{style:{fill:fillStyle==="white"?wonderBlocksTokens.color.white:perseusCore.lockedFigureColors[color]}}}),showVertices&&points.map((point,index)=>jsxRuntimeExports.jsx(mafs.Point,{x:point[X],y:point[Y],color:perseusCore.lockedFigureColors[color]},`locked-polygon-point-${index}`))]})};
 
 const LockedVector=props=>{const{color,points,ariaLabel}=props;const[tail,tip]=points;const hasAria=!!ariaLabel;return jsxRuntimeExports.jsx("g",{className:"locked-vector","aria-label":hasAria?ariaLabel:undefined,"aria-hidden":!hasAria,role:"img",children:jsxRuntimeExports.jsx(Vector,{tail:tail,tip:tip,color:perseusCore.lockedFigureColors[color]})})};
 
@@ -2116,7 +2118,7 @@ var extraWidgets = [CSProgram$1,Categorizer$1,Definition$1,DeprecatedStandin$1,D
 
 const init=function(){registerWidgets(basicWidgets);registerWidgets(extraWidgets);replaceDeprecatedWidgets();};
 
-const libName="@khanacademy/perseus";const libVersion="65.3.5";perseusUtils.addLibraryVersionToPerseusDebug(libName,libVersion);
+const libName="@khanacademy/perseus";const libVersion="65.3.7";perseusUtils.addLibraryVersionToPerseusDebug(libName,libVersion);
 
 const apiVersion={major:12,minor:0};