@khanacademy/perseus 19.6.0 → 19.6.2

package/dist/index.js

@@ -24355,18 +24355,14 @@ class Categorizer extends React__namespace.Component {
         }, /*#__PURE__*/React__namespace.createElement("div", {
           className: ClassNames.INTERACTIVE,
           role: "button",
-          "aria-label": catName
-          // eslint-disable-next-line react/jsx-no-bind
-          ,
-          onClick: this.onChange.bind(this, itemNum, catNum)
+          "aria-label": catName,
+          onClick: () => this.onChange(itemNum, catNum)
         }, isMobile && /*#__PURE__*/React__namespace.createElement("input", {
           type: "radio",
           name: uniqueId,
           className: aphrodite.css(sharedStyles.responsiveInput, sharedStyles.responsiveRadioInput),
-          checked: selected
-          // eslint-disable-next-line react/jsx-no-bind
-          ,
-          onChange: this.onChange.bind(this, itemNum, catNum),
+          checked: selected,
+          onChange: () => this.onChange(itemNum, catNum),
           onClick: e => e.stopPropagation()
         }), !isMobile && /*#__PURE__*/React__namespace.createElement("span", {
           className: aphrodite.css(styles$r.radioSpan, selected && styles$r.checkedRadioSpan, this.props.static && selected && styles$r.staticCheckedRadioSpan)
@@ -24386,20 +24382,20 @@ class Categorizer extends React__namespace.Component {
       className: extraClassNames + " " + aphrodite.css(...inlineStyles)
     }, table);
   }
-  onChange = (itemNum, catNum) => {
+  onChange(itemNum, catNum) {
     const values = [...this.props.values];
     // @ts-expect-error - TS2322 - Type 'number' is not assignable to type 'never'.
     values[itemNum] = catNum;
     this.change("values", values);
     this.props.trackInteraction();
-  };
+  }
   simpleValidate = rubric => {
     return Categorizer.validate(this.getUserInput(), rubric);
   };
   static validate(userInput, rubric) {
     let completed = true;
     let allCorrect = true;
-    ___default["default"].each(rubric.values, function (value, i) {
+    rubric.values.forEach((value, i) => {
       if (userInput.values[i] == null) {
         completed = false;
       }
@@ -24970,22 +24966,19 @@ class Explanation extends React__namespace.Component {
     this.props.trackInteraction();
   };
   render() {
-    const {
-      Link
-    } = this.props.apiOptions.baseElements;
     const {
       isArticle,
       isMobile
     } = this.props.apiOptions;
-    const linkAnchor = this.state.expanded ? this.props.hidePrompt : this.props.showPrompt;
-    let linkContainer;
+    const promptText = this.state.expanded ? this.props.hidePrompt : this.props.showPrompt;
+    let promptContainer;
 
     // TODO(diedra): This isn't a valid href;
     // change this to a button that looks like a link.
     const href = "javascript:void(0)";
     const onClick = this._onClick;
     if (isMobile) {
-      linkContainer = /*#__PURE__*/React__namespace.createElement("div", {
+      promptContainer = /*#__PURE__*/React__namespace.createElement("div", {
         className: aphrodite.css(styles$o.linkContainer)
       }, /*#__PURE__*/React__namespace.createElement("a", {
         className: aphrodite.css(styles$o.mobileExplanationLink),
@@ -24993,7 +24986,7 @@ class Explanation extends React__namespace.Component {
         onClick: onClick,
         role: "button",
         "aria-expanded": this.state.expanded
-      }, linkAnchor), this.state.expanded && /*#__PURE__*/React__namespace.createElement("svg", {
+      }, promptText), this.state.expanded && /*#__PURE__*/React__namespace.createElement("svg", {
         className: aphrodite.css(styles$o.disclosureArrow)
       }, /*#__PURE__*/React__namespace.createElement("polygon", {
         style: {
@@ -25002,41 +24995,18 @@ class Explanation extends React__namespace.Component {
         points: `0,${arrowHeight} ` + `${arrowWidth},${arrowHeight} ` + `${arrowWidth / 2},0`
       })));
     } else {
-      if (isArticle) {
-        // NOTE: For articles, the baseElements `Link` may is either be
-        // an anchor tag (if rendered in a modal) or a Wonder Blocks
-        // link component in lesson page, see: `article-page.jsx`.
-        linkContainer = /*#__PURE__*/React__namespace.createElement("div", {
-          className: aphrodite.css(styles$o.linkContainer, styles$o.articleLink)
-        }, /*#__PURE__*/React__namespace.createElement(Link, {
-          className: aphrodite.css(styles$o.explanationLink)
-          // HACK(michaelpolyak): WB Link doesn't passthrough
-          // class name.
-          ,
-          style: styles$o.explanationLink,
-          href: href,
-          onClick: onClick,
-          role: "button",
-          "aria-expanded": this.state.expanded
-        }, `[${linkAnchor}]`));
-      } else {
-        // NOTE: For exercises, the baseElements `Link` is an
-        // anchor tag, see: `perseus-api.jsx`.
-        linkContainer = /*#__PURE__*/React__namespace.createElement("div", {
-          className: aphrodite.css(styles$o.linkContainer, styles$o.exerciseLink)
-        }, /*#__PURE__*/React__namespace.createElement(Link, {
-          className: aphrodite.css(styles$o.explanationLink),
-          href: href,
-          onClick: onClick,
-          role: "button",
-          "aria-expanded": this.state.expanded
-        }, `[${linkAnchor}]`));
-      }
+      const viewStyling = isArticle ? [styles$o.explanationLink, styles$o.articleLink] : [styles$o.explanationLink, styles$o.exerciseLink];
+      promptContainer = /*#__PURE__*/React__namespace.createElement(Clickable__default["default"], {
+        onClick: onClick,
+        "aria-expanded": this.state.expanded
+      }, () => /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+        style: viewStyling
+      }, `[${promptText}]`));
     }
     const expandedStyle = isMobile ? styles$o.contentExpandedMobile : styles$o.contentExpanded;
     return /*#__PURE__*/React__namespace.createElement("div", {
       className: aphrodite.css(styles$o.container)
-    }, linkContainer, this.state.expanded && /*#__PURE__*/React__namespace.createElement("div", {
+    }, promptContainer, this.state.expanded && /*#__PURE__*/React__namespace.createElement("div", {
       className: aphrodite.css(styles$o.content, isMobile && styles$o.contentMobile, this.state.expanded && expandedStyle)
       // eslint-disable-next-line react/no-string-refs
       ,
@@ -41718,7 +41688,7 @@ const init = function (options) {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "19.6.0";
+const libVersion = "19.6.2";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {