@khanacademy/perseus 27.0.1 → 27.1.0

package/dist/components/math-input.d.ts

@@ -27,7 +27,7 @@ type Props = {
      * Overrides deprecated `buttonSets` prop.
      */
     keypadButtonSets?: KeypadButtonSets;
-    labelText?: string;
+    ariaLabel: string;
     onFocus?: () => void;
     onBlur?: () => void;
     hasError?: boolean;
@@ -83,6 +83,7 @@ declare class MathInput extends React.Component<Props, State> {
     }>;
     context: React.ContextType<typeof MathInputI18nContext>;
     inputRef: React.RefObject<InnerMathInput>;
+    static defaultProps: Pick<Props, "ariaLabel">;
     blur(): void;
     focus(): void;
     insert(value: any): void;

package/dist/es/index.css

@@ -3329,6 +3329,7 @@ body.mobile .framework-perseus table.perseus-widget-table-of-values.non-markdown
 }
 .perseus-widget-container.widget-inline-block {
   display: inline-block;
+  vertical-align: bottom;
 }
 .bibliotron-exercise .perseus-hint-renderer {
   border-left: 4px solid #f6f7f7;

package/dist/es/index.js

@@ -5,18 +5,19 @@ import * as PerseusLinter from '@khanacademy/perseus-linter';
 import { linterContextDefault, Rule, linterContextProps } from '@khanacademy/perseus-linter';
 import { View, RenderStateRoot, UniqueIDProvider, useLatestRef, useUniqueIdWithMock, Text as Text$2 } from '@khanacademy/wonder-blocks-core';
 import Tooltip$1 from '@khanacademy/wonder-blocks-tooltip';
+import { LabelSmall, Body, LabelMedium } from '@khanacademy/wonder-blocks-typography';
+import { StyleSheet, css } from 'aphrodite';
 import classNames from 'classnames';
 import * as React from 'react';
 import React__default, { useContext, useState, useEffect, useRef, createContext, forwardRef, useImperativeHandle } from 'react';
+import * as ReactDOM from 'react-dom';
+import ReactDOM__default from 'react-dom';
 import _, { debounce as debounce$1 } from 'underscore';
 import Clickable from '@khanacademy/wonder-blocks-clickable';
 import { Popover, PopoverContentCore, PopoverContent } from '@khanacademy/wonder-blocks-popover';
 import { color, spacing } from '@khanacademy/wonder-blocks-tokens';
-import { StyleSheet, css } from 'aphrodite';
 import $ from 'jquery';
 import PropTypes from 'prop-types';
-import * as ReactDOM from 'react-dom';
-import ReactDOM__default from 'react-dom';
 import { number, point, vector as vector$1, line } from '@khanacademy/kmath';
 import { entries, UnreachableCaseError, keys } from '@khanacademy/wonder-stuff-core';
 import { CircularSpinner } from '@khanacademy/wonder-blocks-progress-spinner';
@@ -32,7 +33,6 @@ import caretUp from '@phosphor-icons/core/regular/caret-up.svg';
 import debounce$2 from 'lodash.debounce';
 import { vec, Coordinates, Ellipse, Plot as Plot$3, Line as Line$4, Point as Point$2, Polygon, useTransformContext, Text as Text$1, Mafs } from 'mafs';
 import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
-import { Body, LabelSmall, LabelMedium } from '@khanacademy/wonder-blocks-typography';
 import questionIcon from '@phosphor-icons/core/regular/question.svg';
 import createReactClass from 'create-react-class';
 import { useDrag } from '@use-gesture/react';
@@ -79,6 +79,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
 const mockStrings = {
   closeKeypad: "close math keypad",
   openKeypad: "open math keypad",
+  mathInputBox: "Math input box",
   removeHighlight: "Remove highlight",
   addHighlight: "Add highlight",
   hintPos: ({
@@ -337,6 +338,7 @@ class InnerMathInput extends React.Component {
       input == null || input.focus();
     };
     this.mathField = () => {
+      var _this$__mathField;
       if (!this.__mathField && this.__mathFieldWrapperRef) {
         const {
           locale
@@ -403,6 +405,7 @@ class InnerMathInput extends React.Component {
           }
         }));
       }
+      (_this$__mathField = this.__mathField) == null || _this$__mathField.setAriaLabel(this.props.ariaLabel);
       return this.__mathField;
     };
     this.focus = () => {
@@ -473,7 +476,7 @@ class InnerMathInput extends React.Component {
       className = className + " " + this.props.className;
     }
     return /*#__PURE__*/React.createElement(View, {
-      style: [styles$D.outerWrapper, this.state.focused && styles$D.wrapperFocused, this.props.hasError && styles$D.wrapperError]
+      style: [styles$E.outerWrapper, this.state.focused && styles$E.wrapperFocused, this.props.hasError && styles$E.wrapperError]
     }, /*#__PURE__*/React.createElement("div", {
       style: {
         display: "flex",
@@ -495,19 +498,17 @@ class InnerMathInput extends React.Component {
     }, /*#__PURE__*/React.createElement("span", {
       className: className,
       ref: ref => this.__mathFieldWrapperRef = ref,
-      "aria-label": this.props.labelText,
       onFocus: () => this.focus(),
       onBlur: () => this.blur()
     }), /*#__PURE__*/React.createElement(Popover, {
       opened: this.state.keypadOpen,
       onClose: () => this.closeKeypad(),
-      portal: false,
       dismissEnabled: true,
       content: () => {
         var _this$props$keypadBut, _this$props;
         return /*#__PURE__*/React.createElement(PopoverContentCore, {
           closeButtonVisible: true,
-          style: styles$D.popoverContent
+          style: styles$E.popoverContent
         }, /*#__PURE__*/React.createElement(DesktopKeypad, _extends({
           onAnalyticsEvent: this.props.analytics.onAnalyticsEvent,
           extraKeys: this.props.extraKeys,
@@ -563,6 +564,9 @@ class MathInput extends React.Component {
   }
 }
 MathInput.contextType = MathInputI18nContext;
+MathInput.defaultProps = {
+  ariaLabel: "Math input"
+};
 const MathInputIcon = ({
   hovered,
   focused,
@@ -580,9 +584,9 @@ const MathInputIcon = ({
       fillColor = color.offBlack;
       break;
   }
-  const dynamicClass = active || focused ? styles$D.iconActive : styles$D.iconInactive;
+  const dynamicClass = active || focused ? styles$E.iconActive : styles$E.iconInactive;
   return /*#__PURE__*/React.createElement(View, {
-    style: [styles$D.iconContainer, dynamicClass]
+    style: [styles$E.iconContainer, dynamicClass]
   }, /*#__PURE__*/React.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
@@ -627,7 +631,7 @@ const inputFocused = {
   borderColor: color.blue,
   margin: -1
 };
-const styles$D = StyleSheet.create({
+const styles$E = StyleSheet.create({
   iconContainer: {
     display: "flex",
     justifyContent: "center",
@@ -2151,6 +2155,7 @@ const getDecimalSeparator = locale => {
 class Expression extends React.Component {
   constructor(..._args) {
     super(..._args);
+    this._textareaId = `expression_textarea_${Date.now()}`;
     this._isMounted = false;
     this.displayName = "Expression";
     this.state = {
@@ -2164,6 +2169,17 @@ class Expression extends React.Component {
       // TODO(scottgrant): This is a hack to remove the deprecated call to
       // this.isMounted() but is still considered an anti-pattern.
       this._isMounted = true;
+
+      // HACK: imperatively add an ID onto the Mathquill input
+      // (which in mobile is a span; desktop a textarea)
+      // in order to associate a visual label with it
+      if (this.refs.input) {
+        const isMobile = this.props.apiOptions.customKeypad;
+        const container = ReactDOM__default.findDOMNode(this.refs.input);
+        const selector = isMobile ? ".mq-textarea > span" : "textarea";
+        const inputElement = container.querySelector(selector);
+        inputElement == null || inputElement.setAttribute("id", this._textareaId);
+      }
     };
     // Whenever the input value changes, attempt to parse it.
     //
@@ -2458,10 +2474,16 @@ class Expression extends React.Component {
   render() {
     var _this$props$keypadCon, _this$props$analytics3;
     if (this.props.apiOptions.customKeypad) {
-      return /*#__PURE__*/React.createElement(KeypadInput
+      return /*#__PURE__*/React.createElement(View, {
+        className: css(styles$D.mobileLabelInputWrapper)
+      }, !!this.props.visibleLabel && /*#__PURE__*/React.createElement(LabelSmall, {
+        htmlFor: this._textareaId,
+        tag: "label"
+      }, this.props.visibleLabel), /*#__PURE__*/React.createElement(KeypadInput
       // eslint-disable-next-line react/no-string-refs
       , {
         ref: "input",
+        ariaLabel: this.props.ariaLabel || this.context.strings.mathInputBox,
         value: this.props.value,
         keypadElement: this.props.keypadElement,
         onChange: this.changeAndTrack,
@@ -2477,7 +2499,7 @@ class Expression extends React.Component {
           });
         },
         onBlur: this._handleBlur
-      });
+      }));
     }
     const className = classNames({
       "perseus-widget-expression": true,
@@ -2487,7 +2509,12 @@ class Expression extends React.Component {
       ERROR_MESSAGE,
       ERROR_TITLE
     } = this.context.strings;
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React.createElement(View, {
+      className: css(styles$D.desktopLabelInputWrapper)
+    }, !!this.props.visibleLabel && /*#__PURE__*/React.createElement(LabelSmall, {
+      htmlFor: this._textareaId,
+      tag: "label"
+    }, this.props.visibleLabel), /*#__PURE__*/React.createElement("div", {
       className: className,
       onBlur: () => this.state.invalid && this.setState({
         showErrorTooltip: true,
@@ -2516,13 +2543,33 @@ class Expression extends React.Component {
       onFocus: this._handleFocus,
       onBlur: this._handleBlur,
       hasError: this.state.showErrorStyle,
+      ariaLabel: this.props.ariaLabel || this.context.strings.mathInputBox,
       extraKeys: (_this$props$keypadCon = this.props.keypadConfiguration) == null ? void 0 : _this$props$keypadCon.extraKeys,
       analytics: (_this$props$analytics3 = this.props.analytics) != null ? _this$props$analytics3 : {
         onAnalyticsEvent: async function () {}
       }
-    })));
+    }))));
   }
 }
+Expression.contextType = PerseusI18nContext;
+Expression.defaultProps = {
+  value: "",
+  times: false,
+  functions: [],
+  buttonSets: ["basic", "trig", "prealgebra", "logarithms"],
+  onFocus: () => {},
+  onBlur: () => {},
+  apiOptions: ApiOptions.defaults,
+  linterContext: linterContextDefault
+};
+const styles$D = StyleSheet.create({
+  mobileLabelInputWrapper: {
+    padding: "15px 4px 0"
+  },
+  desktopLabelInputWrapper: {
+    margin: "5px 5px 0"
+  }
+});
 
 /**
  * Determine the keypad configuration parameters for the input, based on the
@@ -2535,17 +2582,6 @@ class Expression extends React.Component {
  *       to be included as keys on the keypad. These are scraped from the answer
  *       forms.
  */
-Expression.contextType = PerseusI18nContext;
-Expression.defaultProps = {
-  value: "",
-  times: false,
-  functions: [],
-  buttonSets: ["basic", "trig", "prealgebra", "logarithms"],
-  onFocus: () => {},
-  onBlur: () => {},
-  apiOptions: ApiOptions.defaults,
-  linterContext: linterContextDefault
-};
 const keypadConfigurationForProps = widgetOptions => {
   // Always use the Expression keypad, regardless of the button sets that have
   // been enabled.
@@ -2603,6 +2639,8 @@ const propUpgrades$2 = {
     buttonSets: v0props.buttonSets,
     functions: v0props.functions,
     buttonsVisible: v0props.buttonsVisible,
+    visibleLabel: v0props.visibleLabel,
+    ariaLabel: v0props.ariaLabel,
     answerForms: [{
       considered: "correct",
       form: v0props.form,
@@ -2640,14 +2678,18 @@ var Expression$1 = {
       times,
       functions,
       buttonSets,
-      buttonsVisible
+      buttonsVisible,
+      visibleLabel,
+      ariaLabel
     } = widgetOptions;
     return {
       keypadConfiguration: keypadConfigurationForProps(widgetOptions),
       times,
       functions,
       buttonSets,
-      buttonsVisible
+      buttonsVisible,
+      visibleLabel,
+      ariaLabel
     };
   },
   version: {
@@ -32096,16 +32138,17 @@ function getQuadraticCoords(graph, range, step) {
   return normalizePoints(range, step, defaultCoords, true);
 }
 function getCircleCoords(graph) {
+  var _graph$startCoords3;
   if (graph.center != null && graph.radius != null) {
     return {
       center: graph.center,
       radiusPoint: vec.add(graph.center, [graph.radius, 0])
     };
   }
-  if (graph.startCoords) {
+  if ((_graph$startCoords3 = graph.startCoords) != null && _graph$startCoords3.center && graph.startCoords.radius) {
     return {
-      center: graph.startCoords,
-      radiusPoint: vec.add(graph.startCoords, [2, 0])
+      center: graph.startCoords.center,
+      radiusPoint: vec.add(graph.startCoords.center, [graph.startCoords.radius, 0])
     };
   }
   return {
@@ -44115,7 +44158,7 @@ const init = function init(options) {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "27.0.1";
+const libVersion = "27.1.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -47695,5 +47738,5 @@ const EditorJsonify = {
   }
 };
 
-export { ApiOptions, ArrowPicker, ArticleRenderer, BaseRadio, Categorizer$1 as Categorizer, changeable as Changeable, ClassNames, ColorPicker, DashPicker, dependencies as Dependencies, EditorJsonify, ElementContainer, Expression, util as GrapherUtil, Grapher$1 as GrapherWidget, HintRenderer, HintsRenderer, InputNumber$1 as InputNumber, InteractiveGraph$1 as InteractiveGraphWidget, ItemExtras, JiptParagraphs, KhanColors, KhanMath, context as LoadingContext, Log, Matrix$1 as MatrixWidget, MultiItems, NumericInput$1 as NumericInput, PerseusExpressionAnswerFormConsidered, PerseusI18nContext, PerseusI18nContextProvider, PerseusMarkdown, Plotter$1 as PlotterWidget, QUESTION_WIDGETS, Radio, Renderer, ref as ServerItemRenderer, sizingUtils as SizingUtils, Table$1 as TableWidget, Util, denylist as WIDGET_PROP_DENYLIST, WidgetJsonifyDeprecated, widgets$1 as Widgets, addWidget, apiVersion, buildEmptyItemTreeForShape, buildMapper, components, constants, contentHasWidgetType, convertWidgetNameToEnum, displaySigFigs, generateTestCategorizerWidget, generateTestExpressionWidget, generateTestInteractiveGraphWidget, generateTestNumericInputWidget, generateTestPerseusItem, generateTestRadioWidget, genericPerseusItemData, getAnswerFromUserInput, getAnswersFromWidgets, getCorrectAnswerForWidgetId, getLineCoords, getLinearSystemCoords, getSegmentCoords, getValidWidgetIds, getWidgetFromWidgetMap, getWidgetIdsFromContent, getWidgetIdsFromContentByType, getWidgetTypeByWidgetId, getWidgetsFromWidgetMap, getWidgetsMapFromItemData, globalConstants, globalStyles, iconPaths as icons, init, injectWidgets, interactiveSizes$1 as interactiveSizes, isItemRenderableByVersion, isWidgetIdInContent, isWrongAnswerSupported, itemDataVersion, itemToTree, ItemVersion as itemVersion, libVersion, lockedFigureColors, lockedFigureFillStyles, mediaQueries, parsePerseusItem, plotterPlotTypes, preprocessTex, registerAllWidgetsForTesting, shapes, shouldHaveIndividualAnswer, traverse, usePerseusI18n, violatingWidgets, allWidgets as widgets };
+export { ApiOptions, ArrowPicker, ArticleRenderer, BaseRadio, Categorizer$1 as Categorizer, changeable as Changeable, ClassNames, ColorPicker, DashPicker, dependencies as Dependencies, EditorJsonify, ElementContainer, Expression, util as GrapherUtil, Grapher$1 as GrapherWidget, HintRenderer, HintsRenderer, InputNumber$1 as InputNumber, InteractiveGraph$1 as InteractiveGraphWidget, ItemExtras, JiptParagraphs, KhanColors, KhanMath, context as LoadingContext, Log, Matrix$1 as MatrixWidget, MultiItems, NumericInput$1 as NumericInput, PerseusExpressionAnswerFormConsidered, PerseusI18nContext, PerseusI18nContextProvider, PerseusMarkdown, Plotter$1 as PlotterWidget, QUESTION_WIDGETS, Radio, Renderer, ref as ServerItemRenderer, sizingUtils as SizingUtils, Table$1 as TableWidget, Util, denylist as WIDGET_PROP_DENYLIST, WidgetJsonifyDeprecated, widgets$1 as Widgets, addWidget, apiVersion, buildEmptyItemTreeForShape, buildMapper, components, constants, contentHasWidgetType, convertWidgetNameToEnum, displaySigFigs, generateTestCategorizerWidget, generateTestExpressionWidget, generateTestInteractiveGraphWidget, generateTestNumericInputWidget, generateTestPerseusItem, generateTestRadioWidget, genericPerseusItemData, getAnswerFromUserInput, getAnswersFromWidgets, getCircleCoords, getCorrectAnswerForWidgetId, getLineCoords, getLinearSystemCoords, getSegmentCoords, getValidWidgetIds, getWidgetFromWidgetMap, getWidgetIdsFromContent, getWidgetIdsFromContentByType, getWidgetTypeByWidgetId, getWidgetsFromWidgetMap, getWidgetsMapFromItemData, globalConstants, globalStyles, iconPaths as icons, init, injectWidgets, interactiveSizes$1 as interactiveSizes, isItemRenderableByVersion, isWidgetIdInContent, isWrongAnswerSupported, itemDataVersion, itemToTree, ItemVersion as itemVersion, libVersion, lockedFigureColors, lockedFigureFillStyles, mediaQueries, parsePerseusItem, plotterPlotTypes, preprocessTex, registerAllWidgetsForTesting, shapes, shouldHaveIndividualAnswer, traverse, usePerseusI18n, violatingWidgets, allWidgets as widgets };
 //# sourceMappingURL=index.js.map