@khanacademy/perseus 6.5.0 → 6.6.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @khanacademy/perseus
 
+## 6.6.0
+
+### Minor Changes
+
+-   d0f28dbd: Add story for ExpressionEditor
+-   077b125e: Extend argument object type for APIOptions.trackInteraction callback to support the arbitrary data each widget may add
+
+### Patch Changes
+
+-   Updated dependencies [04e68d1c]
+-   Updated dependencies [d0f28dbd]
+-   Updated dependencies [acafa72d]
+-   Updated dependencies [54590cc7]
+    -   @khanacademy/math-input@7.0.0
+
+## 6.5.1
+
+### Patch Changes
+
+-   6ec8d96e: Clarify parameter type for APIOptions.trackInteraction
+-   a022ff6c: Switch from `classname` to `id` for passage wrappers.
+
 ## 6.5.0
 
 ### Minor Changes

package/dist/es/index.css

@@ -3181,54 +3181,57 @@ body.mobile .perseus-matrix .math-output {
 .orderer.layout-vertical .draggable-box .placeholder {
   box-sizing: border-box;
 }
-.perseus-widget-passage-container .perseus-widget-passage {
+[id^="perseus-widget-passage-container"] [id^="perseus-widget-passage"] {
   line-height: 20px;
   margin: 22px;
   position: relative;
 }
-.perseus-widget-passage-container .perseus-widget-passage div.paragraph {
+[id^="perseus-widget-passage-container"] [id^="perseus-widget-passage"] div.paragraph {
   font-family: "minion-pro", KaTeX_Main, Times, "Times New Roman", serif;
 }
-.perseus-widget-passage-container .katex {
-  line-height: 18px;
-}
-.perseus-widget-passage-container .passage-title div.paragraph {
+[id^="perseus-widget-passage-container"] [id^="perseus-widget-passage"] .passage-title div.paragraph {
   font-family: "Noto Serif", serif;
   font-weight: 700;
   font-size: 20px;
   line-height: 22px;
   margin: 0 0 10px;
 }
-.perseus-widget-passage-container .passage-text div.paragraph {
+[id^="perseus-widget-passage-container"] [id^="perseus-widget-passage"] .passage-text div.paragraph {
   font-weight: 400;
   font-size: 16px;
   line-height: 20px;
   text-indent: 20px;
   margin: 0;
 }
-.perseus-widget-passage-container .passage-text div.paragraph span {
+[id^="perseus-widget-passage-container"] [id^="perseus-widget-passage"] .passage-text div.paragraph span {
   text-indent: 0;
 }
-.perseus-widget-passage-container .footnotes {
+[id^="perseus-widget-passage-container"] [id^="perseus-widget-passage"] .passage-text div.paragraph em {
+  line-height: 0;
+}
+[id^="perseus-widget-passage-container"] .katex {
+  line-height: 18px;
+}
+[id^="perseus-widget-passage-container"] .footnotes {
   margin-top: 22px;
 }
-.perseus-widget-passage-container .footnotes div.paragraph {
+[id^="perseus-widget-passage-container"] .footnotes div.paragraph {
   font-size: 14px;
   margin: 0;
 }
-.perseus-widget-passage-container .perseus-highlight {
-  background-color: #FFFABE;
+[id^="perseus-widget-passage-container"] .perseus-highlight {
+  background-color: #fffabe;
 }
-.perseus-widget-passage-container .perseus-review-highlight {
-  background-color: #EEE7B2;
+[id^="perseus-widget-passage-container"] .perseus-review-highlight {
+  background-color: #eee7b2;
 }
-.perseus-widget-passage-container .perseus-passage-square-label,
-.perseus-widget-passage-container .perseus-passage-circle-label,
-.perseus-widget-passage-container .perseus-passage-bracket-label {
+[id^="perseus-widget-passage-container"] .perseus-passage-square-label,
+[id^="perseus-widget-passage-container"] .perseus-passage-circle-label,
+[id^="perseus-widget-passage-container"] .perseus-passage-bracket-label {
   font-family: Times, "Times New Roman", serif;
   font-size: 16px;
 }
-.perseus-widget-passage-container .line-numbers {
+[id^="perseus-widget-passage-container"] .line-numbers {
   font-size: 12px;
   font-style: italic;
   font-weight: 600;
@@ -3240,15 +3243,15 @@ body.mobile .perseus-matrix .math-output {
   left: -52px;
   width: 37px;
 }
-.perseus-widget-passage-container .line-numbers span {
+[id^="perseus-widget-passage-container"] .line-numbers span {
   display: block;
   line-height: 20px;
   position: relative;
   top: 2px;
   visibility: hidden;
 }
-.perseus-widget-passage-container .line-numbers span:nth-of-type(5n),
-.perseus-widget-passage-container .line-numbers .line-marker {
+[id^="perseus-widget-passage-container"] .line-numbers span:nth-of-type(5n),
+[id^="perseus-widget-passage-container"] .line-numbers .line-marker {
   visibility: visible;
 }
 .perseus-widget-passage-editor .perseus-single-editor {

package/dist/es/index.js

@@ -17702,10 +17702,7 @@ class InteractionTracker {
 
   // @ts-expect-error [FEI-5003] - TS2564 - Property 'widgetType' has no initializer and is not definitely assigned in the constructor.
 
-  constructor(trackApi,
-  // original apiOptions.trackInteraction
-  widgetType, widgetID, setting // "" means track once
-  ) {
+  constructor(trackApi, widgetType, widgetID, setting) {
     this._tracked = void 0;
     this.setting = void 0;
     this.track = void 0;
@@ -37976,10 +37973,11 @@ class Passage extends React.Component {
     const parsedContent = PassageMarkdown.parse(doubleQuoteParsedContent, parseState);
     // Check if the title has any non-empty text in it.
     const hasTitle = /\S/.test(this.props.passageTitle);
+    const joinedTitle = joinString(this.props.passageTitle);
     return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-      className: "perseus-widget-passage-container"
+      id: "perseus-widget-passage-container" + joinedTitle
     }, this._renderInstructions(parseState), /*#__PURE__*/React.createElement("div", {
-      className: "perseus-widget-passage"
+      id: "perseus-widget-passage" + joinedTitle
     }, hasTitle && /*#__PURE__*/React.createElement("h3", {
       className: "passage-title"
     }, /*#__PURE__*/React.createElement(Renderer, {
@@ -38010,6 +38008,8 @@ class Passage extends React.Component {
     }, i18n._("End of reading passage.")))));
   }
 }
+
+// That's All, Folks! => -thats-all-folks
 Passage.defaultProps = {
   passageTitle: "",
   passageText: "",
@@ -38018,6 +38018,7 @@ Passage.defaultProps = {
   highlights: {},
   linterContext: linterContextDefault
 };
+const joinString = title => "-" + title.toLowerCase().replace(/[^\w\s]/gi, "").trim().split(/\s+/).join("-");
 var Passage$1 = {
   name: "passage",
   displayName: "Passage (SAT only)",
@@ -39127,16 +39128,6 @@ class Sequence extends React.Component {
     }));
   }
 }
-Sequence.propTypes = _extends({}, propTypes, {
-  apiOptions: ApiOptions.propTypes,
-  json: PropTypes.arrayOf(PropTypes.shape({
-    content: PropTypes.string,
-    images: PropTypes.objectOf(PropTypes.any),
-    widgets: PropTypes.objectOf(PropTypes.any)
-  })),
-  trackInteraction: PropTypes.func.isRequired,
-  linterContext: linterContextProps
-});
 Sequence.defaultProps = {
   json: [{
     content: "",