@khanacademy/perseus 49.0.0 → 49.0.2

package/dist/es/index.js

@@ -2,13 +2,13 @@ import * as KAS from '@khanacademy/kas';
 import { MathInputI18nContext, CursorContext, getKeyTranslator, createMathField, getCursorContext, DesktopKeypad, convertDotToTimesByLocale, mathQuillInstance, KeypadInput, KeypadType, KeyArray, keypadElementPropType } from '@khanacademy/math-input';
 import * as PerseusLinter from '@khanacademy/perseus-linter';
 import { linterContextDefault, Rule } from '@khanacademy/perseus-linter';
-import { View, RenderStateRoot, UniqueIDProvider, useOnMountEffect, useLatestRef, useUniqueIdWithMock, Text as Text$2 } from '@khanacademy/wonder-blocks-core';
+import { View, RenderStateRoot, Id, useOnMountEffect, useLatestRef, Text as Text$2 } from '@khanacademy/wonder-blocks-core';
 import Tooltip$1 from '@khanacademy/wonder-blocks-tooltip';
 import { HeadingMedium, LabelSmall, LabelLarge, Body, LabelMedium } from '@khanacademy/wonder-blocks-typography';
 import { StyleSheet, css } from 'aphrodite';
 import classNames$1 from 'classnames';
 import * as React from 'react';
-import React__default, { useContext, useState, useEffect, useRef, createContext, forwardRef, useLayoutEffect, useImperativeHandle } from 'react';
+import React__default, { useContext, useState, useEffect, useRef, createContext, forwardRef, useLayoutEffect, useImperativeHandle, useId } from 'react';
 import * as ReactDOM from 'react-dom';
 import ReactDOM__default from 'react-dom';
 import _, { debounce as debounce$1 } from 'underscore';
@@ -244,11 +244,11 @@ const mockStrings = {
   tan: "tan",
   simulationLoadFail: "Sorry, this simulation cannot load.",
   simulationLocaleWarning: "Sorry, this simulation isn't available in your language.",
-  addPoint: "Add Point",
-  removePoint: "Remove Point",
-  graphKeyboardPrompt: "Press Shift + Enter to interact with the graph",
   selectAnAnswer: "Select an answer",
   // The following strings are used for interactive graph SR descriptions.
+  graphKeyboardPrompt: "Press Shift + Enter to interact with the graph",
+  addPoint: "Add Point",
+  removePoint: "Remove Point",
   closePolygon: "Close shape",
   openPolygon: "Re-open shape",
   srPointAtCoordinates: ({
@@ -260,19 +260,19 @@ const mockStrings = {
     elements
   }) => `Interactive elements: ${elements}`,
   srNoInteractiveElements: "No interactive elements",
-  circleGraphAriaLabel: "A circle on a coordinate plane.",
-  circleShapeAriaLabel: ({
+  srCircleGraph: "A circle on a coordinate plane.",
+  srCircleShape: ({
     centerX,
     centerY
   }) => `Circle. The center point is at ${centerX} comma ${centerY}.`,
-  circleRadiusPointAriaLabel: ({
+  srCircleRadiusPoint: ({
     radiusPointX,
     radiusPointY
   }) => `Radius point at ${radiusPointX} comma ${radiusPointY}.`,
-  circleRadiusDescription: ({
+  srCircleRadius: ({
     radius
   }) => `Circle radius is ${radius}.`,
-  circleOuterPointsDescription: ({
+  srCircleOuterPoints: ({
     point1X,
     point1Y,
     point2X,
@@ -8870,13 +8870,10 @@ const reactRootCache = new WeakMap();
  */
 function render(element, container) {
   /**
-   * `RenderStateRoot` is responsible for tracking whether it's
-   * the initial render or subsequent renders.  It's used by
-   * `useUniqueId` and will be used by `UniqueIDProvider` and
-   * `WithSSRPlaceholder` in the future.  We're placing it as
-   * high up in the render tree as possible to ensure that any
-   * components using that hook or those components will function
-   * correctly.
+   * `RenderStateRoot` is responsible for tracking whether it's the initial
+   * render or subsequent renders.  It's used by `WithSSRPlaceholder`.  We're
+   * placing it as high up in the render tree as possible to ensure that any
+   * components using that hook or those components will function correctly.
    */
   const children = /*#__PURE__*/React.createElement(RenderStateRoot, {
     throwIfNested: false
@@ -27385,41 +27382,33 @@ class Dropdown extends React.Component {
       value: String(i + 1),
       label: choice
     }))];
-    return (
-      /*#__PURE__*/
-      // TODO(WB-1812, somewhatabstract): Migrate to Id or useId
-      // eslint-disable-next-line no-restricted-syntax
-      React.createElement(UniqueIDProvider, {
-        scope: "dropdown-widget",
-        mockOnFirstRender: true
-      }, ids => /*#__PURE__*/React.createElement(View
-      // NOTE(jared): These are required to prevent weird behavior
-      // When there's a dropdown in a zoomable table.
-      , {
-        onClick: e => {
-          e.stopPropagation();
-        },
-        onTouchStart: e => {
-          e.stopPropagation();
-        }
-      }, this.props.visibleLabel && /*#__PURE__*/React.createElement(LabelLarge, {
-        tag: "label",
-        htmlFor: ids.get("dropdown")
-      }, this.props.visibleLabel), /*#__PURE__*/React.createElement(SingleSelect, {
-        id: ids.get("dropdown"),
-        placeholder: "",
-        onChange: value => this._handleChange(parseInt(value)),
-        selectedValue: String(this.props.selected),
-        disabled: this.props.apiOptions.readOnly,
-        "aria-label": this.props.ariaLabel || this.props.visibleLabel || this.context.strings.selectAnAnswer
-        // This is currently necessary for SRs to read the labels properly.
-        // However, WB is working on a change to add the "combobox" role to
-        // all dropdowns.
-        // See https://khanacademy.atlassian.net/browse/WB-1671
-        ,
-        role: "combobox"
-      }, children)))
-    );
+    return /*#__PURE__*/React.createElement(Id, null, dropdownId => /*#__PURE__*/React.createElement(View
+    // NOTE(jared): These are required to prevent weird behavior
+    // When there's a dropdown in a zoomable table.
+    , {
+      onClick: e => {
+        e.stopPropagation();
+      },
+      onTouchStart: e => {
+        e.stopPropagation();
+      }
+    }, this.props.visibleLabel && /*#__PURE__*/React.createElement(LabelLarge, {
+      tag: "label",
+      htmlFor: dropdownId
+    }, this.props.visibleLabel), /*#__PURE__*/React.createElement(SingleSelect, {
+      id: dropdownId,
+      placeholder: "",
+      onChange: value => this._handleChange(parseInt(value)),
+      selectedValue: String(this.props.selected),
+      disabled: this.props.apiOptions.readOnly,
+      "aria-label": this.props.ariaLabel || this.props.visibleLabel || this.context.strings.selectAnAnswer
+      // This is currently necessary for SRs to read the labels properly.
+      // However, WB is working on a change to add the "combobox" role to
+      // all dropdowns.
+      // See https://khanacademy.atlassian.net/browse/WB-1671
+      ,
+      role: "combobox"
+    }, children)));
   }
 }
 Dropdown.contextType = PerseusI18nContext;
@@ -27522,37 +27511,29 @@ class Explanation extends React.Component {
       "white-space": "normal"
     };
     const contentStyling = [styles$k.content, this.state.expanded ? styles$k.contentExpanded : styles$k.contentCollapsed, allowTransition && (this.state.expanded ? styles$k.transitionExpanded : styles$k.transitionCollapsed)];
-    return (
-      /*#__PURE__*/
-      // TODO(WB-1812, somewhatabstract): Migrate to Id or useId
-      // eslint-disable-next-line no-restricted-syntax
-      React.createElement(UniqueIDProvider, {
-        mockOnFirstRender: true,
-        scope: "explanation-widget"
-      }, ids => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
-        "aria-expanded": this.state.expanded,
-        "aria-controls": ids.get("content"),
-        endIcon: caretIcon,
-        kind: "tertiary",
-        labelStyle: labelStyle,
-        onClick: this._onClick,
-        size: "small",
-        style: buttonStyleOverrides
-      }, promptText), /*#__PURE__*/React.createElement(View, {
-        id: ids.get("content"),
-        style: contentStyling,
-        "aria-hidden": !this.state.expanded,
-        testId: "content-container"
-      }, /*#__PURE__*/React.createElement(View, {
-        style: styles$k.contentWrapper
-      }, /*#__PURE__*/React.createElement(Renderer, {
-        apiOptions: this.props.apiOptions,
-        content: this.props.explanation,
-        widgets: this.props.widgets,
-        linterContext: this.props.linterContext,
-        strings: this.context.strings
-      })))))
-    );
+    return /*#__PURE__*/React.createElement(Id, null, contentId => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+      "aria-expanded": this.state.expanded,
+      "aria-controls": contentId,
+      endIcon: caretIcon,
+      kind: "tertiary",
+      labelStyle: labelStyle,
+      onClick: this._onClick,
+      size: "small",
+      style: buttonStyleOverrides
+    }, promptText), /*#__PURE__*/React.createElement(View, {
+      id: contentId,
+      style: contentStyling,
+      "aria-hidden": !this.state.expanded,
+      testId: "content-container"
+    }, /*#__PURE__*/React.createElement(View, {
+      style: styles$k.contentWrapper
+    }, /*#__PURE__*/React.createElement(Renderer, {
+      apiOptions: this.props.apiOptions,
+      content: this.props.explanation,
+      widgets: this.props.widgets,
+      linterContext: this.props.linterContext,
+      strings: this.context.strings
+    })))));
   }
 }
 Explanation.contextType = PerseusI18nContext;
@@ -32708,6 +32689,17 @@ const getIntersectionOfRayWithBox = (initialPoint, throughPoint, box) => {
 function isBetween(x, low, high) {
   return x >= low && x <= high;
 }
+function getArrayWithoutDuplicates(array) {
+  const returnArray = [];
+  for (const coordPair of array) {
+    if (
+    // Check if the coordPair is not already in the returnArray
+    !returnArray.some(([x, y]) => x === coordPair[0] && y === coordPair[1])) {
+      returnArray.push(coordPair);
+    }
+  }
+  return returnArray;
+}
 
 const LockedLine = props => {
   var _flags$mafs;
@@ -34118,11 +34110,23 @@ function getGradableGraph(state, initialGraph) {
     });
   }
   if (state.type === "polygon" && initialGraph.type === "polygon") {
+    // Unless the polygon is closed it is not considered score-able.
+    if (state.numSides === "unlimited" && !state.closedPolygon) {
+      return _extends({}, initialGraph, {
+        coords: null
+      });
+    }
     return _extends({}, initialGraph, {
       coords: state.coords
     });
   }
   if (state.type === "point" && initialGraph.type === "point") {
+    // The unlimited point graph must have at least 1 coordinate or else it is not considered score-able.
+    if (state.numPoints === "unlimited" && state.coords.length === 0) {
+      return _extends({}, initialGraph, {
+        coords: null
+      });
+    }
     return _extends({}, initialGraph, {
       coords: state.coords
     });
@@ -34196,7 +34200,8 @@ function CircleGraph(props) {
     radiusPoint
   } = graphState;
   const {
-    strings
+    strings,
+    locale
   } = usePerseusI18n();
   const [radiusPointAriaLive, setRadiusPointAriaLive] = React.useState("off");
   const radius = getRadius(graphState);
@@ -34206,27 +34211,27 @@ function CircleGraph(props) {
   const outerPointsId = id + "-outer-points";
 
   // Aria label strings
-  const circleGraphAriaLabel = strings.circleGraphAriaLabel;
-  const circleShapeAriaLabel = strings.circleShapeAriaLabel({
-    centerX: center[0],
-    centerY: center[1]
+  const circleGraphAriaLabel = strings.srCircleGraph;
+  const circleShapeAriaLabel = strings.srCircleShape({
+    centerX: srFormatNumber(center[0], locale),
+    centerY: srFormatNumber(center[1], locale)
   });
-  const circleRadiusPointAriaLabel = strings.circleRadiusPointAriaLabel({
-    radiusPointX: radiusPoint[0],
-    radiusPointY: radiusPoint[1]
+  const circleRadiusPointAriaLabel = strings.srCircleRadiusPoint({
+    radiusPointX: srFormatNumber(radiusPoint[0], locale),
+    radiusPointY: srFormatNumber(radiusPoint[1], locale)
   });
-  const circleRadiusDescription = strings.circleRadiusDescription({
+  const circleRadiusDescription = strings.srCircleRadius({
     radius
   });
-  const circleOuterPointsDescription = strings.circleOuterPointsDescription({
-    point1X: center[0] + radius,
-    point1Y: center[1],
-    point2X: center[0],
-    point2Y: center[1] + radius,
-    point3X: center[0] - radius,
-    point3Y: center[1],
-    point4X: center[0],
-    point4Y: center[1] - radius
+  const circleOuterPointsDescription = strings.srCircleOuterPoints({
+    point1X: srFormatNumber(center[0] + radius, locale),
+    point1Y: srFormatNumber(center[1], locale),
+    point2X: srFormatNumber(center[0], locale),
+    point2Y: srFormatNumber(center[1] + radius, locale),
+    point3X: srFormatNumber(center[0] - radius, locale),
+    point3Y: srFormatNumber(center[1], locale),
+    point4X: srFormatNumber(center[0], locale),
+    point4Y: srFormatNumber(center[1] - radius, locale)
   });
   return /*#__PURE__*/React.createElement("g", {
     // Outer circle minimal description
@@ -34629,6 +34634,15 @@ const PolygonGraph = props => {
       (_pointsRef$current$fo = pointsRef.current[focusedIndex]) == null || _pointsRef$current$fo.focus();
     }
   }, [props.graphState.focusedPointIndex, pointsRef]);
+
+  // If the unlimited polygon is rendered with 3 or more coordinates
+  // Close the polygon, but only on first render.
+  React.useEffect(() => {
+    if (numSides === "unlimited" && props.graphState.coords.length > 2) {
+      dispatch(actions.polygon.closePolygon());
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
   const statefulProps = _extends({}, props, {
     graphConfig,
     polygonRef,
@@ -34769,7 +34783,16 @@ const UnlimitedPolygonGraph = statefulProps => {
   } = graphConfig;
   const widthPx = graphDimensionsInPixels[0];
   const heightPx = graphDimensionsInPixels[1];
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("rect", {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Polyline, {
+    points: [...points],
+    color: "var(--movable-line-stroke-color)",
+    svgPolylineProps: {
+      strokeWidth: "var(--movable-line-stroke-weight)",
+      style: {
+        fill: "transparent"
+      }
+    }
+  }), /*#__PURE__*/React.createElement("rect", {
     style: {
       fill: "rgba(0,0,0,0)",
       cursor: "crosshair"
@@ -34785,15 +34808,6 @@ const UnlimitedPolygonGraph = statefulProps => {
       const graphCoordinates = pixelsToVectors([[x, y]], graphConfig);
       dispatch(actions.polygon.addPoint(graphCoordinates[0]));
     }
-  }), /*#__PURE__*/React.createElement(Polyline, {
-    points: [...points],
-    color: "var(--movable-line-stroke-color)",
-    svgPolylineProps: {
-      strokeWidth: "var(--movable-line-stroke-weight)",
-      style: {
-        fill: "transparent"
-      }
-    }
   }), coords.map((point, i) => /*#__PURE__*/React.createElement(MovablePoint$1, {
     key: i,
     point: point,
@@ -34807,9 +34821,10 @@ const UnlimitedPolygonGraph = statefulProps => {
     },
     onClick: () => {
       // If the point being clicked is the first point and
-      // there's enough points to form a polygon (3 or more)
-      // Close the shape before setting focus.
-      if (i === 0 && coords.length >= 3) {
+      // there's enough non-duplicated points to form
+      // a polygon (3 or more), close the shape before
+      // setting focus.
+      if (i === 0 && getArrayWithoutDuplicates(coords).length >= 3) {
         dispatch(actions.polygon.closePolygon());
       }
       dispatch(actions.polygon.clickPoint(i));
@@ -35432,7 +35447,7 @@ const renderPolygonGraphControls = props => {
 
   // We want to disable the closePolygon button when
   // there are not enough coords to make a polygon
-  const disableCloseButton = coords.length < 3;
+  const disableCloseButton = getArrayWithoutDuplicates(coords).length < 3;
 
   // If polygon is closed, show open button.
   // If polygon is open, show close button.
@@ -36132,7 +36147,13 @@ function doClickPoint(state, action) {
 }
 function doClosePolygon(state) {
   if (isUnlimitedGraphState(state) && state.type === "polygon") {
+    // We want to remove any duplicate points when closing the polygon to
+    // (1) prevent the polygon from sides with length zero, and
+    // (2) make sure the question is can be marked correct if the polygon
+    //     LOOKS correct, even if two of the points are at the same coords.
+    const noDupedPoints = getArrayWithoutDuplicates(state.coords);
     return _extends({}, state, {
+      coords: noDupedPoints,
       closedPolygon: true
     });
   }
@@ -38914,11 +38935,8 @@ const AnswerChoices = props => {
 };
 
 const HideAnswersToggle = props => {
-  // TODO(WB-1812, somewhatabstract): Migrate to Id or useId
-  // eslint-disable-next-line no-restricted-syntax
-  const idFactory = useUniqueIdWithMock();
-  const switchId = idFactory.get("hide-answers-toggle");
-  const labelId = idFactory.get("hide-answers-label");
+  const switchId = useId();
+  const labelId = useId();
   const {
     strings
   } = usePerseusI18n();
@@ -38961,10 +38979,7 @@ const AnswerPill = props => {
     focused,
     hovered
   } = props;
-
-  // TODO(WB-1812, somewhatabstract): Migrate to Id or useId
-  // eslint-disable-next-line no-restricted-syntax
-  const idFactory = useUniqueIdWithMock();
+  const pillId = useId();
   const {
     strings
   } = usePerseusI18n();
@@ -38991,7 +39006,7 @@ const AnswerPill = props => {
   }) => /*#__PURE__*/React.createElement(Pill, {
     size: "large",
     kind: "accent",
-    id: idFactory.get("perseus-label-image-widget-answer-pill"),
+    id: pillId,
     onClick: correct ? undefined : onClick,
     ref: ref,
     style: [style, popperStyle, styles$b.pill, correct && styles$b.correct, incorrect && styles$b.incorrect, (focused || hovered) && BringToFront]
@@ -45307,7 +45322,7 @@ const init = function init() {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "49.0.0";
+const libVersion = "49.0.2";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {