@khanacademy/perseus 4.0.2 → 6.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (249) hide show
  1. package/CHANGELOG.md +57 -0
  2. package/dist/components/fixed-to-responsive.d.ts +27 -1
  3. package/dist/components/fixed-to-responsive.js.flow +27 -1
  4. package/dist/components/graph.d.ts +42 -26
  5. package/dist/components/graph.js.flow +42 -28
  6. package/dist/components/graphie.d.ts +34 -22
  7. package/dist/components/graphie.js.flow +37 -24
  8. package/dist/components/highlighting/highlightable-content.d.ts +4 -4
  9. package/dist/components/highlighting/highlightable-content.js.flow +4 -7
  10. package/dist/components/highlighting/ui/highlight-renderer.d.ts +6 -6
  11. package/dist/components/highlighting/ui/highlight-renderer.js.flow +6 -8
  12. package/dist/components/highlighting/ui/highlight-set-renderer.d.ts +5 -5
  13. package/dist/components/highlighting/ui/highlight-set-renderer.js.flow +5 -8
  14. package/dist/components/highlighting/ui/highlight-tooltip.d.ts +2 -2
  15. package/dist/components/highlighting/ui/highlight-tooltip.js.flow +2 -4
  16. package/dist/components/highlighting/ui/highlighting-ui.d.ts +2 -2
  17. package/dist/components/highlighting/ui/highlighting-ui.js.flow +2 -2
  18. package/dist/components/highlighting/ui/selection-tracker.d.ts +5 -5
  19. package/dist/components/highlighting/ui/selection-tracker.js.flow +5 -7
  20. package/dist/components/highlighting/word-indexer.d.ts +2 -2
  21. package/dist/components/highlighting/word-indexer.js.flow +2 -2
  22. package/dist/components/hud.d.ts +8 -14
  23. package/dist/components/hud.js.flow +7 -14
  24. package/dist/components/inline-icon.d.ts +27 -3
  25. package/dist/components/inline-icon.js.flow +26 -3
  26. package/dist/components/lint.d.ts +41 -13
  27. package/dist/components/lint.js.flow +42 -13
  28. package/dist/components/math-output.d.ts +15 -11
  29. package/dist/components/math-output.js.flow +15 -11
  30. package/dist/components/simple-keypad-input.d.ts +1 -1
  31. package/dist/components/simple-keypad-input.js.flow +1 -1
  32. package/dist/components/sortable.d.ts +17 -9
  33. package/dist/components/sortable.js.flow +22 -9
  34. package/dist/components/svg-image.d.ts +5 -3
  35. package/dist/components/svg-image.js.flow +5 -3
  36. package/dist/components/tex-buttons.d.ts +2 -2
  37. package/dist/components/tex-buttons.js.flow +2 -2
  38. package/dist/components/tooltip.d.ts +45 -4
  39. package/dist/components/tooltip.js.flow +44 -31
  40. package/dist/error-boundary.d.ts +4 -4
  41. package/dist/error-boundary.js.flow +4 -6
  42. package/dist/es/index.css +0 -3
  43. package/dist/es/index.js +484 -658
  44. package/dist/es/index.js.map +1 -1
  45. package/dist/index.css +0 -3
  46. package/dist/index.js +488 -655
  47. package/dist/index.js.map +1 -1
  48. package/dist/perseus-types.d.ts +11 -10
  49. package/dist/perseus-types.js.flow +11 -10
  50. package/dist/renderer.d.ts +2 -2
  51. package/dist/renderer.js.flow +1 -3
  52. package/dist/styles/shared.d.ts +0 -1
  53. package/dist/styles/shared.js.flow +0 -1
  54. package/dist/types.d.ts +0 -10
  55. package/dist/types.js.flow +0 -13
  56. package/dist/util/a11y.d.ts +0 -1
  57. package/dist/util/a11y.js.flow +0 -1
  58. package/dist/util/interactive.d.ts +2 -0
  59. package/dist/util/interactive.js.flow +2 -0
  60. package/dist/util.d.ts +3 -3
  61. package/dist/util.js.flow +4 -3
  62. package/dist/widgets/__stories__/test-keypad-context-wrapper.d.ts +2 -2
  63. package/dist/widgets/__stories__/test-keypad-context-wrapper.js.flow +2 -4
  64. package/dist/widgets/expression.d.ts +2 -2
  65. package/dist/widgets/expression.js.flow +2 -2
  66. package/dist/widgets/grapher.d.ts +1 -1
  67. package/dist/widgets/grapher.js.flow +12 -3
  68. package/dist/widgets/interaction/element-container.d.ts +5 -4
  69. package/dist/widgets/interaction/element-container.js.flow +6 -11
  70. package/dist/widgets/label-image/marker.d.ts +4 -4
  71. package/dist/widgets/label-image/marker.js.flow +4 -6
  72. package/dist/widgets/matcher.d.ts +7 -3
  73. package/dist/widgets/matcher.js.flow +7 -3
  74. package/dist/widgets/number-line.d.ts +1 -1
  75. package/dist/widgets/number-line.js.flow +1 -1
  76. package/dist/widgets/numeric-input.d.ts +0 -2
  77. package/dist/widgets/numeric-input.js.flow +0 -4
  78. package/dist/widgets/radio/base-radio.d.ts +7 -1
  79. package/dist/widgets/radio/base-radio.js.flow +7 -1
  80. package/dist/widgets/radio/choice-icon/choice-icon.d.ts +1 -1
  81. package/dist/widgets/radio/choice-icon/choice-icon.js.flow +1 -1
  82. package/dist/widgets/radio/choice-icon/cross-out-line.d.ts +2 -2
  83. package/dist/widgets/radio/choice-icon/cross-out-line.js.flow +2 -2
  84. package/dist/widgets/radio/focus-ring.d.ts +8 -1
  85. package/dist/widgets/radio/focus-ring.js.flow +8 -1
  86. package/dist/widgets/radio/option-status.d.ts +2 -2
  87. package/dist/widgets/radio/option-status.js.flow +2 -2
  88. package/dist/widgets/video-transcript-link.d.ts +1 -1
  89. package/dist/widgets/video-transcript-link.js.flow +1 -1
  90. package/package.json +4 -4
  91. package/src/__stories__/item-renderer.stories.tsx +2 -6
  92. package/src/__stories__/server-item-renderer.stories.tsx +2 -6
  93. package/src/__tests__/__snapshots__/item-renderer.test.tsx.snap +151 -159
  94. package/src/__tests__/__snapshots__/renderer.test.tsx.snap +358 -394
  95. package/src/__tests__/__snapshots__/server-item-renderer.test.tsx.snap +169 -189
  96. package/src/components/__stories__/button-group.stories.tsx +2 -6
  97. package/src/components/__stories__/fixed-to-responsive.stories.tsx +14 -16
  98. package/src/components/__stories__/graph.stories.tsx +3 -5
  99. package/src/components/__stories__/graphie.stories.tsx +3 -5
  100. package/src/components/__stories__/hud.stories.tsx +2 -6
  101. package/src/components/__stories__/icon.stories.tsx +1 -1
  102. package/src/components/__stories__/image-loader.stories.tsx +4 -4
  103. package/src/components/__stories__/info-tip.stories.tsx +2 -6
  104. package/src/components/__stories__/inline-icon.stories.tsx +4 -8
  105. package/src/components/__stories__/input-with-examples.stories.tsx +6 -10
  106. package/src/components/__stories__/lint.stories.tsx +62 -27
  107. package/src/components/__stories__/math-input.stories.tsx +4 -8
  108. package/src/components/__stories__/math-output.stories.tsx +3 -5
  109. package/src/components/__stories__/multi-button-group.stories.tsx +2 -6
  110. package/src/components/__stories__/number-input.stories.tsx +6 -8
  111. package/src/components/__stories__/prop-check-box.stories.tsx +9 -9
  112. package/src/components/__stories__/range-input.stories.tsx +4 -6
  113. package/src/components/__stories__/simple-keypad-input.stories.tsx +2 -4
  114. package/src/components/__stories__/sortable.stories.tsx +20 -20
  115. package/src/components/__stories__/stub-tag-editor.stories.tsx +5 -9
  116. package/src/components/__stories__/svg-image.stories.tsx +10 -18
  117. package/src/components/__stories__/tex.stories.tsx +1 -3
  118. package/src/components/__stories__/text-buttons.stories.tsx +10 -22
  119. package/src/components/__stories__/text-input.stories.tsx +4 -10
  120. package/src/components/__stories__/text-list-editor.stories.tsx +1 -3
  121. package/src/components/__stories__/tooltip.stories.tsx +52 -0
  122. package/src/components/__stories__/zoomable-tex.stories.tsx +6 -4
  123. package/src/components/__stories__/zoomable.stories.tsx +1 -3
  124. package/src/components/__tests__/__snapshots__/sortable.test.tsx.snap +114 -30
  125. package/src/components/__tests__/__snapshots__/sorter.test.tsx.snap +172 -204
  126. package/src/components/__tests__/sortable.test.tsx +54 -16
  127. package/src/components/__tests__/sorter.test.tsx +12 -9
  128. package/src/components/fixed-to-responsive.tsx +43 -38
  129. package/src/components/graph.tsx +95 -81
  130. package/src/components/graphie.tsx +62 -32
  131. package/src/components/highlighting/highlightable-content.tsx +4 -7
  132. package/src/components/highlighting/ui/highlight-renderer.tsx +6 -9
  133. package/src/components/highlighting/ui/highlight-set-renderer.tsx +5 -8
  134. package/src/components/highlighting/ui/highlight-tooltip.tsx +2 -2
  135. package/src/components/highlighting/ui/highlighting-ui.tsx +2 -2
  136. package/src/components/highlighting/ui/selection-tracker.tsx +5 -8
  137. package/src/components/highlighting/word-indexer.tsx +2 -2
  138. package/src/components/hud.tsx +104 -115
  139. package/src/components/inline-icon.tsx +17 -34
  140. package/src/components/input-with-examples.tsx +4 -4
  141. package/src/components/lint.tsx +47 -41
  142. package/src/components/math-output.tsx +17 -11
  143. package/src/components/simple-keypad-input.tsx +4 -4
  144. package/src/components/sortable.tsx +134 -94
  145. package/src/components/svg-image.tsx +10 -11
  146. package/src/components/tex-buttons.tsx +2 -2
  147. package/src/components/tooltip.tsx +189 -171
  148. package/src/components/visibility-observer/__stories__/visibility-observer.stories.tsx +1 -3
  149. package/src/error-boundary.tsx +4 -7
  150. package/src/interactive2/types.ts +2 -2
  151. package/src/multi-items/__stories__/multi-renderer.stories.tsx +1 -1
  152. package/src/multi-items/__tests__/__snapshots__/multi-renderer.test.tsx.snap +708 -764
  153. package/src/multi-items/__tests__/multi-renderer.test.tsx +2 -3
  154. package/src/perseus-types.ts +13 -12
  155. package/src/renderer.tsx +11 -22
  156. package/src/types.ts +0 -18
  157. package/src/util/graphie.ts +3 -3
  158. package/src/util/interactive.ts +18 -5
  159. package/src/util/tex.ts +13 -77
  160. package/src/util.ts +3 -4
  161. package/src/widgets/__stories__/categorizer.stories.tsx +1 -1
  162. package/src/widgets/__stories__/cs-program.stories.tsx +1 -1
  163. package/src/widgets/__stories__/definition.stories.tsx +3 -7
  164. package/src/widgets/__stories__/dropdown.stories.tsx +1 -1
  165. package/src/widgets/__stories__/explanation.stories.tsx +2 -2
  166. package/src/widgets/__stories__/expression.stories.tsx +5 -11
  167. package/src/widgets/__stories__/graded-group-set.stories.tsx +1 -1
  168. package/src/widgets/__stories__/graded-group.stories.tsx +1 -1
  169. package/src/widgets/__stories__/grapher.stories.tsx +7 -21
  170. package/src/widgets/__stories__/group.stories.tsx +1 -1
  171. package/src/widgets/__stories__/iframe.stories.tsx +1 -1
  172. package/src/widgets/__stories__/image.stories.tsx +1 -1
  173. package/src/widgets/__stories__/input-number.stories.tsx +3 -12
  174. package/src/widgets/__stories__/interaction.stories.tsx +1 -1
  175. package/src/widgets/__stories__/interactive-graph.stories.tsx +9 -9
  176. package/src/widgets/__stories__/matcher.stories.tsx +1 -1
  177. package/src/widgets/__stories__/matrix.stories.tsx +1 -1
  178. package/src/widgets/__stories__/number-line.stories.tsx +1 -1
  179. package/src/widgets/__stories__/numeric-input.stories.tsx +3 -5
  180. package/src/widgets/__stories__/orderer.stories.tsx +1 -1
  181. package/src/widgets/__stories__/passage-ref.stories.tsx +2 -2
  182. package/src/widgets/__stories__/passage.stories.tsx +3 -9
  183. package/src/widgets/__stories__/radio.stories.tsx +3 -5
  184. package/src/widgets/__stories__/sorter.stories.tsx +1 -1
  185. package/src/widgets/__stories__/test-keypad-context-wrapper.tsx +2 -4
  186. package/src/widgets/__stories__/transformer.stories.tsx +1 -1
  187. package/src/widgets/__stories__/unit.stories.tsx +1 -3
  188. package/src/widgets/__stories__/video-transcript-link.stories.tsx +2 -6
  189. package/src/widgets/__stories__/video.stories.tsx +1 -1
  190. package/src/widgets/__testdata__/group.testdata.ts +0 -2
  191. package/src/widgets/__tests__/__snapshots__/categorizer.test.ts.snap +717 -773
  192. package/src/widgets/__tests__/__snapshots__/cs-program.test.ts.snap +28 -36
  193. package/src/widgets/__tests__/__snapshots__/definition.test.ts.snap +52 -60
  194. package/src/widgets/__tests__/__snapshots__/dropdown.test.ts.snap +100 -108
  195. package/src/widgets/__tests__/__snapshots__/explanation.test.ts.snap +212 -260
  196. package/src/widgets/__tests__/__snapshots__/graded-group-set-jipt.test.ts.snap +613 -641
  197. package/src/widgets/__tests__/__snapshots__/graded-group-set.test.ts.snap +249 -261
  198. package/src/widgets/__tests__/__snapshots__/graded-group.test.ts.snap +671 -735
  199. package/src/widgets/__tests__/__snapshots__/grapher.test.ts.snap +2676 -2684
  200. package/src/widgets/__tests__/__snapshots__/group.test.tsx.snap +938 -1002
  201. package/src/widgets/__tests__/__snapshots__/iframe.test.ts.snap +28 -36
  202. package/src/widgets/__tests__/__snapshots__/image.test.ts.snap +227 -255
  203. package/src/widgets/__tests__/__snapshots__/input-number.test.ts.snap +353 -357
  204. package/src/widgets/__tests__/__snapshots__/interaction.test.ts.snap +255 -259
  205. package/src/widgets/__tests__/__snapshots__/interactive-graph.test.ts.snap +2401 -2433
  206. package/src/widgets/__tests__/__snapshots__/matcher.test.tsx.snap +600 -756
  207. package/src/widgets/__tests__/__snapshots__/matrix.test.ts.snap +420 -428
  208. package/src/widgets/__tests__/__snapshots__/number-line.test.ts.snap +762 -770
  209. package/src/widgets/__tests__/__snapshots__/numeric-input.test.ts.snap +373 -393
  210. package/src/widgets/__tests__/__snapshots__/orderer.test.ts.snap +116 -148
  211. package/src/widgets/__tests__/__snapshots__/passage-ref.test.ts.snap +289 -301
  212. package/src/widgets/__tests__/__snapshots__/passage.test.tsx.snap +1679 -1711
  213. package/src/widgets/__tests__/__snapshots__/radio.test.ts.snap +2692 -2960
  214. package/src/widgets/__tests__/__snapshots__/video.test.ts.snap +90 -98
  215. package/src/widgets/__tests__/group.test.tsx +0 -2
  216. package/src/widgets/__tests__/matcher.test.tsx +33 -9
  217. package/src/widgets/__tests__/radio/focus-ring.test.tsx +0 -1
  218. package/src/widgets/expression.tsx +12 -9
  219. package/src/widgets/grapher.tsx +3 -3
  220. package/src/widgets/image.tsx +2 -2
  221. package/src/widgets/interaction/element-container.tsx +7 -8
  222. package/src/widgets/interactive-graph.tsx +5 -5
  223. package/src/widgets/label-image/__stories__/answer-choices.stories.tsx +2 -4
  224. package/src/widgets/label-image/__stories__/marker.stories.tsx +9 -19
  225. package/src/widgets/label-image/marker.tsx +4 -4
  226. package/src/widgets/matcher.tsx +43 -24
  227. package/src/widgets/number-line.tsx +1 -1
  228. package/src/widgets/numeric-input.tsx +0 -3
  229. package/src/widgets/passage/passage-markdown.tsx +2 -2
  230. package/src/widgets/radio/__stories__/base-radio.stories.tsx +11 -19
  231. package/src/widgets/radio/__stories__/choice-icon.stories.tsx +9 -11
  232. package/src/widgets/radio/__stories__/choice-none-above.stories.tsx +1 -1
  233. package/src/widgets/radio/__stories__/choice.stories.tsx +4 -4
  234. package/src/widgets/radio/__stories__/focus-ring.stories.tsx +1 -1
  235. package/src/widgets/radio/__stories__/option-status.stories.tsx +2 -4
  236. package/src/widgets/radio/base-radio.tsx +1 -1
  237. package/src/widgets/radio/choice-icon/choice-icon.tsx +5 -5
  238. package/src/widgets/radio/choice-icon/cross-out-line.tsx +1 -3
  239. package/src/widgets/radio/choice-none-above.tsx +2 -2
  240. package/src/widgets/radio/choice.tsx +1 -3
  241. package/src/widgets/radio/focus-ring.tsx +1 -1
  242. package/src/widgets/radio/option-status.tsx +2 -4
  243. package/src/widgets/radio/widget.tsx +0 -1
  244. package/src/widgets/reaction-diagram.tsx +2 -2
  245. package/src/widgets/simulator.tsx +4 -6
  246. package/src/widgets/video-transcript-link.tsx +1 -1
  247. package/{tsconfig.json → tsconfig-build.json} +6 -6
  248. package/tsconfig-build.tsbuildinfo +1 -0
  249. package/tsconfig.tsbuildinfo +0 -1
package/src/__tests__/__snapshots__/renderer.test.tsx.snap CHANGED
@@ -2,584 +2,548 @@
2
2
 
3
3
  exports[`renderer rendering should render a table when isMobile: false 1`] = `
4
4
  <div>
5
- <span
6
- class="mock-KatexProvider"
5
+ <div
6
+ class="perseus-renderer perseus-renderer-responsive"
7
7
  >
8
8
  <div
9
- class="perseus-renderer perseus-renderer-responsive"
9
+ class="paragraph"
10
+ data-perseus-paragraph-index="0"
10
11
  >
11
- <div
12
- class="paragraph"
13
- data-perseus-paragraph-index="0"
14
- >
15
- <table>
16
- <thead>
17
- <tr>
18
- <th
19
- scope="col"
20
- >
21
- Heading 1
22
- </th>
23
- <th
24
- scope="col"
25
- >
26
- Heading 2
27
- </th>
28
- <th
29
- scope="col"
30
- >
31
- Heading 3
32
- </th>
33
- </tr>
34
- </thead>
35
- <tbody>
36
- <tr>
37
- <td>
38
- r1c1
39
- </td>
40
- <td>
41
- r1c2
42
- </td>
43
- <td>
44
- r1c3
45
- </td>
46
- </tr>
47
- <tr>
48
- <td>
49
- r2c1
50
- </td>
51
- <td>
52
- r2c2
53
- </td>
54
- <td>
55
- r2c3
56
- </td>
57
- </tr>
58
- <tr>
59
- <td>
60
- r3c1
61
- </td>
62
- <td>
63
- r3c2
64
- </td>
65
- <td>
66
- r3c3
67
- </td>
68
- </tr>
69
- </tbody>
70
- </table>
71
- </div>
12
+ <table>
13
+ <thead>
14
+ <tr>
15
+ <th
16
+ scope="col"
17
+ >
18
+ Heading 1
19
+ </th>
20
+ <th
21
+ scope="col"
22
+ >
23
+ Heading 2
24
+ </th>
25
+ <th
26
+ scope="col"
27
+ >
28
+ Heading 3
29
+ </th>
30
+ </tr>
31
+ </thead>
32
+ <tbody>
33
+ <tr>
34
+ <td>
35
+ r1c1
36
+ </td>
37
+ <td>
38
+ r1c2
39
+ </td>
40
+ <td>
41
+ r1c3
42
+ </td>
43
+ </tr>
44
+ <tr>
45
+ <td>
46
+ r2c1
47
+ </td>
48
+ <td>
49
+ r2c2
50
+ </td>
51
+ <td>
52
+ r2c3
53
+ </td>
54
+ </tr>
55
+ <tr>
56
+ <td>
57
+ r3c1
58
+ </td>
59
+ <td>
60
+ r3c2
61
+ </td>
62
+ <td>
63
+ r3c3
64
+ </td>
65
+ </tr>
66
+ </tbody>
67
+ </table>
72
68
  </div>
73
- </span>
69
+ </div>
74
70
  </div>
75
71
  `;
76
72
 
77
73
  exports[`renderer rendering should render a table when isMobile: true 1`] = `
78
74
  <div>
79
- <span
80
- class="mock-KatexProvider"
75
+ <div
76
+ class="perseus-renderer perseus-renderer-responsive"
81
77
  >
82
78
  <div
83
- class="perseus-renderer perseus-renderer-responsive"
79
+ class="paragraph"
80
+ data-perseus-paragraph-index="0"
84
81
  >
85
82
  <div
86
- class="paragraph"
87
- data-perseus-paragraph-index="0"
83
+ style="margin-left: -16px; margin-right: -16px;"
88
84
  >
89
85
  <div
90
- style="margin-left: -16px; margin-right: -16px;"
86
+ style="padding-left: 0px; padding-right: 0px; transform: translate3d(0,0,0); overflow-x: auto;"
91
87
  >
92
- <div
93
- style="padding-left: 0px; padding-right: 0px; transform: translate3d(0,0,0); overflow-x: auto;"
88
+ <span
89
+ style="display: block; width: 100%; transform: scale(1, 1) translate(0, 8px); transform-origin: 0 0; opacity: 0;"
94
90
  >
95
- <span
96
- style="display: block; width: 100%; transform: scale(1, 1) translate(0, 8px); transform-origin: 0 0; opacity: 0;"
91
+ <table
92
+ tabindex="0"
97
93
  >
98
- <table
99
- tabindex="0"
100
- >
101
- <thead>
102
- <tr>
103
- <th
104
- scope="col"
105
- >
106
- Heading 1
107
- </th>
108
- <th
109
- scope="col"
110
- >
111
- Heading 2
112
- </th>
113
- <th
114
- scope="col"
115
- >
116
- Heading 3
117
- </th>
118
- </tr>
119
- </thead>
120
- <tbody>
121
- <tr>
122
- <td>
123
- r1c1
124
- </td>
125
- <td>
126
- r1c2
127
- </td>
128
- <td>
129
- r1c3
130
- </td>
131
- </tr>
132
- <tr>
133
- <td>
134
- r2c1
135
- </td>
136
- <td>
137
- r2c2
138
- </td>
139
- <td>
140
- r2c3
141
- </td>
142
- </tr>
143
- <tr>
144
- <td>
145
- r3c1
146
- </td>
147
- <td>
148
- r3c2
149
- </td>
150
- <td>
151
- r3c3
152
- </td>
153
- </tr>
154
- </tbody>
155
- </table>
156
- </span>
157
- </div>
94
+ <thead>
95
+ <tr>
96
+ <th
97
+ scope="col"
98
+ >
99
+ Heading 1
100
+ </th>
101
+ <th
102
+ scope="col"
103
+ >
104
+ Heading 2
105
+ </th>
106
+ <th
107
+ scope="col"
108
+ >
109
+ Heading 3
110
+ </th>
111
+ </tr>
112
+ </thead>
113
+ <tbody>
114
+ <tr>
115
+ <td>
116
+ r1c1
117
+ </td>
118
+ <td>
119
+ r1c2
120
+ </td>
121
+ <td>
122
+ r1c3
123
+ </td>
124
+ </tr>
125
+ <tr>
126
+ <td>
127
+ r2c1
128
+ </td>
129
+ <td>
130
+ r2c2
131
+ </td>
132
+ <td>
133
+ r2c3
134
+ </td>
135
+ </tr>
136
+ <tr>
137
+ <td>
138
+ r3c1
139
+ </td>
140
+ <td>
141
+ r3c2
142
+ </td>
143
+ <td>
144
+ r3c3
145
+ </td>
146
+ </tr>
147
+ </tbody>
148
+ </table>
149
+ </span>
158
150
  </div>
159
151
  </div>
160
152
  </div>
161
- </span>
153
+ </div>
162
154
  </div>
163
155
  `;
164
156
 
165
157
  exports[`renderer rendering should render block math 1`] = `
166
158
  <div>
167
- <span
168
- class="mock-KatexProvider"
159
+ <div
160
+ class="perseus-renderer perseus-renderer-responsive"
169
161
  >
170
162
  <div
171
- class="perseus-renderer perseus-renderer-responsive"
163
+ class="paragraph"
164
+ data-perseus-paragraph-index="0"
172
165
  >
173
166
  <div
174
167
  class="paragraph"
175
- data-perseus-paragraph-index="0"
176
168
  >
177
- <div
178
- class="paragraph"
179
- >
180
- This is some block math
181
- </div>
169
+ This is some block math
182
170
  </div>
171
+ </div>
172
+ <div
173
+ class="paragraph perseus-paragraph-centered"
174
+ data-perseus-paragraph-index="1"
175
+ >
183
176
  <div
184
- class="paragraph perseus-paragraph-centered"
185
- data-perseus-paragraph-index="1"
177
+ class="perseus-block-math"
186
178
  >
187
179
  <div
188
- class="perseus-block-math"
180
+ class="perseus-block-math-inner"
181
+ style="overflow-x: auto; overflow-y: hidden; padding-top: 10px; padding-bottom: 10px; margin-top: -10px; margin-bottom: -10px;"
189
182
  >
190
- <div
191
- class="perseus-block-math-inner"
192
- style="overflow-x: auto; overflow-y: hidden; padding-top: 10px; padding-bottom: 10px; margin-top: -10px; margin-bottom: -10px;"
183
+ <span
184
+ class="mock-TeX"
193
185
  >
194
- <span
195
- class="mock-TeX"
196
- >
197
- 1 + 2
198
- </span>
199
- </div>
186
+ 1 + 2
187
+ </span>
200
188
  </div>
201
189
  </div>
190
+ </div>
191
+ <div
192
+ class="paragraph"
193
+ data-perseus-paragraph-index="2"
194
+ >
202
195
  <div
203
196
  class="paragraph"
204
- data-perseus-paragraph-index="2"
205
197
  >
206
- <div
207
- class="paragraph"
208
- >
209
- And a footer.
210
- </div>
198
+ And a footer.
211
199
  </div>
212
200
  </div>
213
- </span>
201
+ </div>
214
202
  </div>
215
203
  `;
216
204
 
217
205
  exports[`renderer rendering should render block math on mobile 1`] = `
218
206
  <div>
219
- <span
220
- class="mock-KatexProvider"
207
+ <div
208
+ class="perseus-renderer perseus-renderer-responsive"
221
209
  >
222
210
  <div
223
- class="perseus-renderer perseus-renderer-responsive"
211
+ class="paragraph"
212
+ data-perseus-paragraph-index="0"
224
213
  >
225
214
  <div
226
215
  class="paragraph"
227
- data-perseus-paragraph-index="0"
228
216
  >
229
- <div
230
- class="paragraph"
231
- >
232
- This is some block math
233
- </div>
217
+ This is some block math
234
218
  </div>
219
+ </div>
220
+ <div
221
+ class="paragraph perseus-paragraph-centered"
222
+ data-perseus-paragraph-index="1"
223
+ >
235
224
  <div
236
- class="paragraph perseus-paragraph-centered"
237
- data-perseus-paragraph-index="1"
225
+ class="perseus-block-math"
226
+ style="margin-left: -16px; margin-right: -16px;"
238
227
  >
239
228
  <div
240
- class="perseus-block-math"
241
- style="margin-left: -16px; margin-right: -16px;"
229
+ class="perseus-block-math-inner"
230
+ style="overflow-x: auto; overflow-y: hidden; margin-top: -10px; margin-bottom: -10px; transform: translate3d(0,0,0); padding: 10px 16px 10px 16px;"
242
231
  >
243
- <div
244
- class="perseus-block-math-inner"
245
- style="overflow-x: auto; overflow-y: hidden; margin-top: -10px; margin-bottom: -10px; transform: translate3d(0,0,0); padding: 10px 16px 10px 16px;"
232
+ <span
233
+ style="display: block; width: 100%; transform: scale(1, 1) translate(0, 8px); transform-origin: 0 0; opacity: 0;"
246
234
  >
247
235
  <span
248
- style="display: block; width: 100%; transform: scale(1, 1) translate(0, 8px); transform-origin: 0 0; opacity: 0;"
236
+ class="mock-TeX"
249
237
  >
250
- <span
251
- class="mock-TeX"
252
- >
253
- 1 + 2
254
- </span>
238
+ 1 + 2
255
239
  </span>
256
- </div>
240
+ </span>
257
241
  </div>
258
242
  </div>
243
+ </div>
244
+ <div
245
+ class="paragraph"
246
+ data-perseus-paragraph-index="2"
247
+ >
259
248
  <div
260
249
  class="paragraph"
261
- data-perseus-paragraph-index="2"
262
250
  >
263
- <div
264
- class="paragraph"
265
- >
266
- And a footer.
267
- </div>
251
+ And a footer.
268
252
  </div>
269
253
  </div>
270
- </span>
254
+ </div>
271
255
  </div>
272
256
  `;
273
257
 
274
258
  exports[`renderer rendering should render columns 1`] = `
275
259
  <div>
276
- <span
277
- class="mock-KatexProvider"
260
+ <div
261
+ class="perseus-renderer perseus-renderer-responsive perseus-renderer-two-columns"
278
262
  >
279
263
  <div
280
- class="perseus-renderer perseus-renderer-responsive perseus-renderer-two-columns"
264
+ class="paragraph"
265
+ data-perseus-paragraph-index="0"
281
266
  >
282
267
  <div
283
- class="paragraph"
284
- data-perseus-paragraph-index="0"
268
+ class="perseus-two-columns"
285
269
  >
286
270
  <div
287
- class="perseus-two-columns"
271
+ class="perseus-column"
288
272
  >
289
273
  <div
290
- class="perseus-column"
274
+ class="perseus-column-content"
291
275
  >
292
276
  <div
293
- class="perseus-column-content"
277
+ class="paragraph"
294
278
  >
295
- <div
296
- class="paragraph"
297
- >
298
- Stuff in column 1
299
- </div>
279
+ Stuff in column 1
300
280
  </div>
301
281
  </div>
282
+ </div>
283
+ <div
284
+ class="perseus-column"
285
+ >
302
286
  <div
303
- class="perseus-column"
287
+ class="perseus-column-content"
304
288
  >
305
289
  <div
306
- class="perseus-column-content"
290
+ class="paragraph"
307
291
  >
308
- <div
309
- class="paragraph"
310
- >
311
- Stuff in column 2
312
- </div>
292
+ Stuff in column 2
313
293
  </div>
314
294
  </div>
315
295
  </div>
316
296
  </div>
317
297
  </div>
318
- </span>
298
+ </div>
319
299
  </div>
320
300
  `;
321
301
 
322
302
  exports[`renderer rendering should render the math 1`] = `
323
303
  <div>
324
- <span
325
- class="mock-KatexProvider"
304
+ <div
305
+ class="perseus-renderer perseus-renderer-responsive"
326
306
  >
327
307
  <div
328
- class="perseus-renderer perseus-renderer-responsive"
308
+ class="paragraph"
309
+ data-perseus-paragraph-index="0"
329
310
  >
330
311
  <div
331
312
  class="paragraph"
332
- data-perseus-paragraph-index="0"
333
313
  >
334
- <div
335
- class="paragraph"
314
+ This is some inline math:
315
+ <span
316
+ style="white-space: nowrap;"
336
317
  >
337
- This is some inline math:
318
+ <span />
338
319
  <span
339
- style="white-space: nowrap;"
320
+ class="mock-TeX"
340
321
  >
341
- <span />
342
- <span
343
- class="mock-TeX"
344
- >
345
- 1 + 2
346
- </span>
347
- <span />
322
+ 1 + 2
348
323
  </span>
349
- </div>
324
+ <span />
325
+ </span>
350
326
  </div>
351
327
  </div>
352
- </span>
328
+ </div>
353
329
  </div>
354
330
  `;
355
331
 
356
332
  exports[`renderer snapshots correct answer: correct answer 1`] = `
357
333
  <div>
358
- <span
359
- class="mock-KatexProvider"
334
+ <div
335
+ class="perseus-renderer perseus-renderer-responsive"
360
336
  >
361
337
  <div
362
- class="perseus-renderer perseus-renderer-responsive"
338
+ class="paragraph"
339
+ data-perseus-paragraph-index="0"
363
340
  >
364
341
  <div
365
342
  class="paragraph"
366
- data-perseus-paragraph-index="0"
367
343
  >
344
+ The total number of boxes the forklift can carry is
368
345
  <div
369
- class="paragraph"
346
+ class="perseus-widget-container widget-nohighlight widget-inline-block"
370
347
  >
371
- The total number of boxes the forklift can carry is
372
- <div
373
- class="perseus-widget-container widget-nohighlight widget-inline-block"
374
- >
375
- <div>
376
- <div
377
- class="default_xu2jcg-o_O-menuWrapper_wvrnr4"
348
+ <div>
349
+ <div
350
+ class="default_xu2jcg-o_O-menuWrapper_wvrnr4"
351
+ >
352
+ <span
353
+ aria-atomic="true"
354
+ aria-live="polite"
355
+ aria-relevant="additions text"
356
+ class="srOnly_19bpjuy"
357
+ data-test-id="dropdown-live-region"
358
+ />
359
+ <button
360
+ aria-expanded="false"
361
+ aria-haspopup="listbox"
362
+ class="button_vr44p2-o_O-shared_u51dsh-o_O-default_kjzwx1-o_O-focus_1qpi544"
363
+ type="button"
378
364
  >
379
365
  <span
380
- aria-atomic="true"
381
- aria-live="polite"
382
- aria-relevant="additions text"
383
- class="srOnly_19bpjuy"
384
- data-test-id="dropdown-live-region"
385
- />
386
- <button
387
- aria-expanded="false"
388
- aria-haspopup="listbox"
389
- class="button_vr44p2-o_O-shared_u51dsh-o_O-default_kjzwx1-o_O-focus_1qpi544"
390
- type="button"
366
+ class="text_f1191h-o_O-LabelMedium_1rew30o-o_O-text_16ujc3c"
391
367
  >
392
- <span
393
- class="text_f1191h-o_O-LabelMedium_1rew30o-o_O-text_16ujc3c"
394
- >
395
- less than or equal to
396
- </span>
397
- <svg
398
- aria-hidden="true"
399
- class="svg_aeiopc-o_O-caret_ntkmq"
400
- height="16"
401
- viewBox="0 0 16 16"
402
- width="16"
403
- >
404
- <path
405
- d="M8 8.586l3.293-3.293a1 1 0 0 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 1.414-1.414L8 8.586z"
406
- fill="rgba(33,36,44,0.64)"
407
- />
408
- </svg>
409
- </button>
410
- </div>
368
+ less than or equal to
369
+ </span>
370
+ <svg
371
+ aria-hidden="true"
372
+ class="svg_aeiopc-o_O-caret_ntkmq"
373
+ height="16"
374
+ viewBox="0 0 16 16"
375
+ width="16"
376
+ >
377
+ <path
378
+ d="M8 8.586l3.293-3.293a1 1 0 0 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 1.414-1.414L8 8.586z"
379
+ fill="rgba(33,36,44,0.64)"
380
+ />
381
+ </svg>
382
+ </button>
411
383
  </div>
412
384
  </div>
413
-
385
+ </div>
386
+
387
+ <span
388
+ style="white-space: nowrap;"
389
+ >
390
+ <span />
414
391
  <span
415
- style="white-space: nowrap;"
392
+ class="mock-TeX"
416
393
  >
417
- <span />
418
- <span
419
- class="mock-TeX"
420
- >
421
- 60
422
- </span>
423
- <span />
394
+ 60
424
395
  </span>
425
- .
426
- </div>
396
+ <span />
397
+ </span>
398
+ .
427
399
  </div>
428
400
  </div>
429
- </span>
401
+ </div>
430
402
  </div>
431
403
  `;
432
404
 
433
405
  exports[`renderer snapshots incorrect answer: incorrect answer 1`] = `
434
406
  <div>
435
- <span
436
- class="mock-KatexProvider"
407
+ <div
408
+ class="perseus-renderer perseus-renderer-responsive"
437
409
  >
438
410
  <div
439
- class="perseus-renderer perseus-renderer-responsive"
411
+ class="paragraph"
412
+ data-perseus-paragraph-index="0"
440
413
  >
441
414
  <div
442
415
  class="paragraph"
443
- data-perseus-paragraph-index="0"
444
416
  >
417
+ The total number of boxes the forklift can carry is
445
418
  <div
446
- class="paragraph"
419
+ class="perseus-widget-container widget-nohighlight widget-inline-block"
447
420
  >
448
- The total number of boxes the forklift can carry is
449
- <div
450
- class="perseus-widget-container widget-nohighlight widget-inline-block"
451
- >
452
- <div>
453
- <div
454
- class="default_xu2jcg-o_O-menuWrapper_wvrnr4"
421
+ <div>
422
+ <div
423
+ class="default_xu2jcg-o_O-menuWrapper_wvrnr4"
424
+ >
425
+ <span
426
+ aria-atomic="true"
427
+ aria-live="polite"
428
+ aria-relevant="additions text"
429
+ class="srOnly_19bpjuy"
430
+ data-test-id="dropdown-live-region"
431
+ />
432
+ <button
433
+ aria-expanded="false"
434
+ aria-haspopup="listbox"
435
+ class="button_vr44p2-o_O-shared_u51dsh-o_O-default_kjzwx1-o_O-focus_1qpi544"
436
+ type="button"
455
437
  >
456
438
  <span
457
- aria-atomic="true"
458
- aria-live="polite"
459
- aria-relevant="additions text"
460
- class="srOnly_19bpjuy"
461
- data-test-id="dropdown-live-region"
462
- />
463
- <button
464
- aria-expanded="false"
465
- aria-haspopup="listbox"
466
- class="button_vr44p2-o_O-shared_u51dsh-o_O-default_kjzwx1-o_O-focus_1qpi544"
467
- type="button"
439
+ class="text_f1191h-o_O-LabelMedium_1rew30o-o_O-text_16ujc3c"
468
440
  >
469
- <span
470
- class="text_f1191h-o_O-LabelMedium_1rew30o-o_O-text_16ujc3c"
471
- >
472
- greater than or equal to
473
- </span>
474
- <svg
475
- aria-hidden="true"
476
- class="svg_aeiopc-o_O-caret_ntkmq"
477
- height="16"
478
- viewBox="0 0 16 16"
479
- width="16"
480
- >
481
- <path
482
- d="M8 8.586l3.293-3.293a1 1 0 0 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 1.414-1.414L8 8.586z"
483
- fill="rgba(33,36,44,0.64)"
484
- />
485
- </svg>
486
- </button>
487
- </div>
441
+ greater than or equal to
442
+ </span>
443
+ <svg
444
+ aria-hidden="true"
445
+ class="svg_aeiopc-o_O-caret_ntkmq"
446
+ height="16"
447
+ viewBox="0 0 16 16"
448
+ width="16"
449
+ >
450
+ <path
451
+ d="M8 8.586l3.293-3.293a1 1 0 0 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 1.414-1.414L8 8.586z"
452
+ fill="rgba(33,36,44,0.64)"
453
+ />
454
+ </svg>
455
+ </button>
488
456
  </div>
489
457
  </div>
490
-
458
+ </div>
459
+
460
+ <span
461
+ style="white-space: nowrap;"
462
+ >
463
+ <span />
491
464
  <span
492
- style="white-space: nowrap;"
465
+ class="mock-TeX"
493
466
  >
494
- <span />
495
- <span
496
- class="mock-TeX"
497
- >
498
- 60
499
- </span>
500
- <span />
467
+ 60
501
468
  </span>
502
- .
503
- </div>
469
+ <span />
470
+ </span>
471
+ .
504
472
  </div>
505
473
  </div>
506
- </span>
474
+ </div>
507
475
  </div>
508
476
  `;
509
477
 
510
478
  exports[`renderer snapshots initial render: initial render 1`] = `
511
479
  <div>
512
- <span
513
- class="mock-KatexProvider"
480
+ <div
481
+ class="perseus-renderer perseus-renderer-responsive"
514
482
  >
515
483
  <div
516
- class="perseus-renderer perseus-renderer-responsive"
484
+ class="paragraph"
485
+ data-perseus-paragraph-index="0"
517
486
  >
518
487
  <div
519
488
  class="paragraph"
520
- data-perseus-paragraph-index="0"
521
489
  >
490
+ The total number of boxes the forklift can carry is
522
491
  <div
523
- class="paragraph"
492
+ class="perseus-widget-container widget-nohighlight widget-inline-block"
524
493
  >
525
- The total number of boxes the forklift can carry is
526
- <div
527
- class="perseus-widget-container widget-nohighlight widget-inline-block"
528
- >
529
- <div>
530
- <div
531
- class="default_xu2jcg-o_O-menuWrapper_wvrnr4"
494
+ <div>
495
+ <div
496
+ class="default_xu2jcg-o_O-menuWrapper_wvrnr4"
497
+ >
498
+ <span
499
+ aria-atomic="true"
500
+ aria-live="polite"
501
+ aria-relevant="additions text"
502
+ class="srOnly_19bpjuy"
503
+ data-test-id="dropdown-live-region"
504
+ />
505
+ <button
506
+ aria-expanded="false"
507
+ aria-haspopup="listbox"
508
+ class="button_vr44p2-o_O-shared_u51dsh-o_O-default_kjzwx1"
509
+ type="button"
532
510
  >
533
511
  <span
534
- aria-atomic="true"
535
- aria-live="polite"
536
- aria-relevant="additions text"
537
- class="srOnly_19bpjuy"
538
- data-test-id="dropdown-live-region"
539
- />
540
- <button
541
- aria-expanded="false"
542
- aria-haspopup="listbox"
543
- class="button_vr44p2-o_O-shared_u51dsh-o_O-default_kjzwx1"
544
- type="button"
512
+ class="text_f1191h-o_O-LabelMedium_1rew30o-o_O-text_16ujc3c"
545
513
  >
546
- <span
547
- class="text_f1191h-o_O-LabelMedium_1rew30o-o_O-text_16ujc3c"
548
- >
549
- greater/less than or equal to
550
- </span>
551
- <svg
552
- aria-hidden="true"
553
- class="svg_aeiopc-o_O-caret_ntkmq"
554
- height="16"
555
- viewBox="0 0 16 16"
556
- width="16"
557
- >
558
- <path
559
- d="M8 8.586l3.293-3.293a1 1 0 0 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 1.414-1.414L8 8.586z"
560
- fill="rgba(33,36,44,0.64)"
561
- />
562
- </svg>
563
- </button>
564
- </div>
514
+ greater/less than or equal to
515
+ </span>
516
+ <svg
517
+ aria-hidden="true"
518
+ class="svg_aeiopc-o_O-caret_ntkmq"
519
+ height="16"
520
+ viewBox="0 0 16 16"
521
+ width="16"
522
+ >
523
+ <path
524
+ d="M8 8.586l3.293-3.293a1 1 0 0 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 1.414-1.414L8 8.586z"
525
+ fill="rgba(33,36,44,0.64)"
526
+ />
527
+ </svg>
528
+ </button>
565
529
  </div>
566
530
  </div>
567
-
531
+ </div>
532
+
533
+ <span
534
+ style="white-space: nowrap;"
535
+ >
536
+ <span />
568
537
  <span
569
- style="white-space: nowrap;"
538
+ class="mock-TeX"
570
539
  >
571
- <span />
572
- <span
573
- class="mock-TeX"
574
- >
575
- 60
576
- </span>
577
- <span />
540
+ 60
578
541
  </span>
579
- .
580
- </div>
542
+ <span />
543
+ </span>
544
+ .
581
545
  </div>
582
546
  </div>
583
- </span>
547
+ </div>
584
548
  </div>
585
549
  `;