@khanacademy/perseus 48.2.0 → 49.0.1

package/dist/index.js

@@ -8993,13 +8993,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__namespace.createElement(wonderBlocksCore.RenderStateRoot, {
     throwIfNested: false
@@ -27638,10 +27635,7 @@ class Dropdown extends React__namespace.Component {
       value: String(i + 1),
       label: choice
     }))];
-    return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.UniqueIDProvider, {
-      scope: "dropdown-widget",
-      mockOnFirstRender: true
-    }, ids => /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View
+    return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.Id, null, dropdownId => /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View
     // NOTE(jared): These are required to prevent weird behavior
     // When there's a dropdown in a zoomable table.
     , {
@@ -27653,9 +27647,9 @@ class Dropdown extends React__namespace.Component {
       }
     }, this.props.visibleLabel && /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, {
       tag: "label",
-      htmlFor: ids.get("dropdown")
+      htmlFor: dropdownId
     }, this.props.visibleLabel), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
-      id: ids.get("dropdown"),
+      id: dropdownId,
       placeholder: "",
       onChange: value => this._handleChange(parseInt(value)),
       selectedValue: String(this.props.selected),
@@ -27775,12 +27769,9 @@ class Explanation extends React__namespace.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__*/React__namespace.createElement(wonderBlocksCore.UniqueIDProvider, {
-      mockOnFirstRender: true,
-      scope: "explanation-widget"
-    }, ids => /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Button__default["default"], {
+    return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.Id, null, contentId => /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Button__default["default"], {
       "aria-expanded": this.state.expanded,
-      "aria-controls": ids.get("content"),
+      "aria-controls": contentId,
       endIcon: caretIcon,
       kind: "tertiary",
       labelStyle: labelStyle,
@@ -27788,7 +27779,7 @@ class Explanation extends React__namespace.Component {
       size: "small",
       style: buttonStyleOverrides
     }, promptText), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      id: ids.get("content"),
+      id: contentId,
       style: contentStyling,
       "aria-hidden": !this.state.expanded,
       testId: "content-container"
@@ -32988,6 +32979,20 @@ 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(_ref => {
+      let [x, y] = _ref;
+      return x === coordPair[0] && y === coordPair[1];
+    })) {
+      returnArray.push(coordPair);
+    }
+  }
+  return returnArray;
+}
 
 const LockedLine = props => {
   const {
@@ -34414,6 +34419,13 @@ 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 {
+        ...initialGraph,
+        coords: null
+      };
+    }
     return {
       ...initialGraph,
       coords: state.coords
@@ -34934,6 +34946,15 @@ const PolygonGraph = props => {
       pointsRef.current[focusedIndex]?.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__namespace.useEffect(() => {
+    if (numSides === "unlimited" && props.graphState.coords.length > 2) {
+      dispatch(actions.polygon.closePolygon());
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
   const statefulProps = {
     ...props,
     graphConfig,
@@ -35077,7 +35098,16 @@ const UnlimitedPolygonGraph = statefulProps => {
   } = graphConfig;
   const widthPx = graphDimensionsInPixels[0];
   const heightPx = graphDimensionsInPixels[1];
-  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("rect", {
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(mafs.Polyline, {
+    points: [...points],
+    color: "var(--movable-line-stroke-color)",
+    svgPolylineProps: {
+      strokeWidth: "var(--movable-line-stroke-weight)",
+      style: {
+        fill: "transparent"
+      }
+    }
+  }), /*#__PURE__*/React__namespace.createElement("rect", {
     style: {
       fill: "rgba(0,0,0,0)",
       cursor: "crosshair"
@@ -35093,15 +35123,6 @@ const UnlimitedPolygonGraph = statefulProps => {
       const graphCoordinates = pixelsToVectors([[x, y]], graphConfig);
       dispatch(actions.polygon.addPoint(graphCoordinates[0]));
     }
-  }), /*#__PURE__*/React__namespace.createElement(mafs.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__namespace.createElement(MovablePoint$1, {
     key: i,
     point: point,
@@ -35115,9 +35136,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));
@@ -35736,7 +35758,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.
@@ -36461,8 +36483,14 @@ 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 {
       ...state,
+      coords: noDupedPoints,
       closedPolygon: true
     };
   }
@@ -39251,9 +39279,8 @@ const AnswerChoices = props => {
 };
 
 const HideAnswersToggle = props => {
-  const idFactory = wonderBlocksCore.useUniqueIdWithMock();
-  const switchId = idFactory.get("hide-answers-toggle");
-  const labelId = idFactory.get("hide-answers-label");
+  const switchId = React.useId();
+  const labelId = React.useId();
   const {
     strings
   } = usePerseusI18n();
@@ -39296,7 +39323,7 @@ const AnswerPill = props => {
     focused,
     hovered
   } = props;
-  const idFactory = wonderBlocksCore.useUniqueIdWithMock();
+  const pillId = React.useId();
   const {
     strings
   } = usePerseusI18n();
@@ -39325,7 +39352,7 @@ const AnswerPill = props => {
     return /*#__PURE__*/React__namespace.createElement(Pill__default["default"], {
       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]
@@ -45643,7 +45670,7 @@ const init = function () {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "48.2.0";
+const libVersion = "49.0.1";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {