@khanacademy/perseus 5.0.0 → 6.1.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 (115) hide show
  1. package/CHANGELOG.md +62 -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/hud.d.ts +8 -14
  9. package/dist/components/hud.js.flow +7 -14
  10. package/dist/components/inline-icon.d.ts +9 -19
  11. package/dist/components/inline-icon.js.flow +26 -13
  12. package/dist/components/lint.d.ts +41 -13
  13. package/dist/components/lint.js.flow +42 -13
  14. package/dist/components/math-output.d.ts +15 -11
  15. package/dist/components/math-output.js.flow +15 -11
  16. package/dist/components/sortable.d.ts +17 -9
  17. package/dist/components/sortable.js.flow +22 -9
  18. package/dist/components/svg-image.d.ts +5 -3
  19. package/dist/components/svg-image.js.flow +5 -3
  20. package/dist/components/tooltip.d.ts +45 -4
  21. package/dist/components/tooltip.js.flow +44 -31
  22. package/dist/es/index.css +0 -3
  23. package/dist/es/index.js +478 -649
  24. package/dist/es/index.js.map +1 -1
  25. package/dist/index.css +0 -3
  26. package/dist/index.js +482 -646
  27. package/dist/index.js.map +1 -1
  28. package/dist/perseus-types.d.ts +11 -9
  29. package/dist/perseus-types.js.flow +11 -9
  30. package/dist/renderer.d.ts +2 -2
  31. package/dist/renderer.js.flow +1 -3
  32. package/dist/styles/shared.d.ts +0 -1
  33. package/dist/styles/shared.js.flow +0 -1
  34. package/dist/types.d.ts +0 -10
  35. package/dist/types.js.flow +0 -13
  36. package/dist/util/a11y.d.ts +0 -1
  37. package/dist/util/a11y.js.flow +0 -1
  38. package/dist/util/interactive.d.ts +2 -0
  39. package/dist/util/interactive.js.flow +2 -0
  40. package/dist/util.d.ts +3 -3
  41. package/dist/util.js.flow +4 -3
  42. package/dist/widgets/grapher.d.ts +1 -1
  43. package/dist/widgets/grapher.js.flow +12 -3
  44. package/dist/widgets/matcher.d.ts +7 -3
  45. package/dist/widgets/matcher.js.flow +7 -3
  46. package/dist/widgets/number-line.d.ts +1 -1
  47. package/dist/widgets/number-line.js.flow +1 -1
  48. package/package.json +2 -2
  49. package/src/__tests__/__snapshots__/item-renderer.test.tsx.snap +151 -159
  50. package/src/__tests__/__snapshots__/renderer.test.tsx.snap +358 -394
  51. package/src/__tests__/__snapshots__/server-item-renderer.test.tsx.snap +169 -189
  52. package/src/components/__stories__/lint.stories.tsx +56 -21
  53. package/src/components/__stories__/sortable.stories.tsx +5 -5
  54. package/src/components/__stories__/tooltip.stories.tsx +52 -0
  55. package/src/components/__tests__/__snapshots__/sortable.test.tsx.snap +114 -30
  56. package/src/components/__tests__/__snapshots__/sorter.test.tsx.snap +172 -204
  57. package/src/components/__tests__/sortable.test.tsx +54 -16
  58. package/src/components/__tests__/sorter.test.tsx +12 -9
  59. package/src/components/fixed-to-responsive.tsx +43 -38
  60. package/src/components/graph.tsx +95 -81
  61. package/src/components/graphie.tsx +62 -32
  62. package/src/components/hud.tsx +104 -115
  63. package/src/components/inline-icon.tsx +15 -32
  64. package/src/components/input-with-examples.tsx +4 -4
  65. package/src/components/lint.tsx +47 -41
  66. package/src/components/math-output.tsx +17 -11
  67. package/src/components/simple-keypad-input.tsx +2 -2
  68. package/src/components/sortable.tsx +134 -94
  69. package/src/components/svg-image.tsx +10 -11
  70. package/src/components/tooltip.tsx +189 -171
  71. package/src/interactive2/types.ts +2 -2
  72. package/src/mixins/provide-keypad.tsx +2 -2
  73. package/src/multi-items/__tests__/__snapshots__/multi-renderer.test.tsx.snap +708 -764
  74. package/src/perseus-types.ts +13 -9
  75. package/src/renderer.tsx +11 -22
  76. package/src/types.ts +0 -18
  77. package/src/util/interactive.ts +18 -5
  78. package/src/util/tex.ts +13 -77
  79. package/src/util.ts +3 -4
  80. package/src/widgets/__stories__/test-keypad-context-wrapper.tsx +2 -2
  81. package/src/widgets/__tests__/__snapshots__/categorizer.test.ts.snap +717 -773
  82. package/src/widgets/__tests__/__snapshots__/cs-program.test.ts.snap +28 -36
  83. package/src/widgets/__tests__/__snapshots__/definition.test.ts.snap +52 -60
  84. package/src/widgets/__tests__/__snapshots__/dropdown.test.ts.snap +100 -108
  85. package/src/widgets/__tests__/__snapshots__/explanation.test.ts.snap +212 -260
  86. package/src/widgets/__tests__/__snapshots__/graded-group-set-jipt.test.ts.snap +613 -641
  87. package/src/widgets/__tests__/__snapshots__/graded-group-set.test.ts.snap +249 -261
  88. package/src/widgets/__tests__/__snapshots__/graded-group.test.ts.snap +671 -735
  89. package/src/widgets/__tests__/__snapshots__/grapher.test.ts.snap +2676 -2684
  90. package/src/widgets/__tests__/__snapshots__/group.test.tsx.snap +938 -1002
  91. package/src/widgets/__tests__/__snapshots__/iframe.test.ts.snap +28 -36
  92. package/src/widgets/__tests__/__snapshots__/image.test.ts.snap +227 -255
  93. package/src/widgets/__tests__/__snapshots__/input-number.test.ts.snap +353 -357
  94. package/src/widgets/__tests__/__snapshots__/interaction.test.ts.snap +255 -259
  95. package/src/widgets/__tests__/__snapshots__/interactive-graph.test.ts.snap +2401 -2433
  96. package/src/widgets/__tests__/__snapshots__/matcher.test.tsx.snap +600 -756
  97. package/src/widgets/__tests__/__snapshots__/matrix.test.ts.snap +420 -428
  98. package/src/widgets/__tests__/__snapshots__/number-line.test.ts.snap +762 -770
  99. package/src/widgets/__tests__/__snapshots__/numeric-input.test.ts.snap +373 -393
  100. package/src/widgets/__tests__/__snapshots__/orderer.test.ts.snap +116 -148
  101. package/src/widgets/__tests__/__snapshots__/passage-ref.test.ts.snap +289 -301
  102. package/src/widgets/__tests__/__snapshots__/passage.test.tsx.snap +1679 -1711
  103. package/src/widgets/__tests__/__snapshots__/radio.test.ts.snap +2692 -2960
  104. package/src/widgets/__tests__/__snapshots__/video.test.ts.snap +90 -98
  105. package/src/widgets/__tests__/matcher.test.tsx +33 -9
  106. package/src/widgets/expression.tsx +9 -6
  107. package/src/widgets/grapher.tsx +3 -3
  108. package/src/widgets/image.tsx +2 -2
  109. package/src/widgets/interactive-graph.tsx +5 -5
  110. package/src/widgets/matcher.tsx +43 -24
  111. package/src/widgets/number-line.tsx +1 -1
  112. package/src/widgets/simulator.tsx +4 -6
  113. package/{tsconfig.json → tsconfig-build.json} +6 -6
  114. package/tsconfig-build.tsbuildinfo +1 -0
  115. package/tsconfig.tsbuildinfo +0 -1
package/src/widgets/__tests__/__snapshots__/orderer.test.ts.snap CHANGED
@@ -2,274 +2,242 @@
2
2
 
3
3
  exports[`orderer widget should snapshot on mobile: first mobile render 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
12
  <div
12
13
  class="paragraph"
13
- data-perseus-paragraph-index="0"
14
14
  >
15
- <div
16
- class="paragraph"
17
- >
18
- <strong>
19
- Without using a calculator, put the numbers in order from least to greatest.
20
- </strong>
21
-
22
- </div>
15
+ <strong>
16
+ Without using a calculator, put the numbers in order from least to greatest.
17
+ </strong>
18
+
23
19
  </div>
20
+ </div>
21
+ <div
22
+ class="paragraph"
23
+ data-perseus-paragraph-index="1"
24
+ >
24
25
  <div
25
26
  class="paragraph"
26
- data-perseus-paragraph-index="1"
27
27
  >
28
28
  <div
29
- class="paragraph"
29
+ class="perseus-widget-container widget-nohighlight widget-block"
30
30
  >
31
31
  <div
32
- class="perseus-widget-container widget-nohighlight widget-block"
32
+ class="draggy-boxy-thing orderer height-normal layout-horizontal above-scratchpad blank-background perseus-clearfix perseus-interactive"
33
33
  >
34
34
  <div
35
- class="draggy-boxy-thing orderer height-normal layout-horizontal above-scratchpad blank-background perseus-clearfix perseus-interactive"
35
+ class="bank perseus-clearfix"
36
36
  >
37
37
  <div
38
- class="bank perseus-clearfix"
38
+ class="card-wrap perseus-interactive"
39
39
  >
40
40
  <div
41
- class="card-wrap perseus-interactive"
41
+ class="card stack"
42
42
  >
43
43
  <div
44
- class="card stack"
44
+ class="perseus-renderer perseus-renderer-responsive"
45
45
  >
46
- <span
47
- class="mock-KatexProvider"
46
+ <div
47
+ class="paragraph"
48
+ data-perseus-paragraph-index="0"
48
49
  >
49
50
  <div
50
- class="perseus-renderer perseus-renderer-responsive"
51
+ class="paragraph"
51
52
  >
52
- <div
53
- class="paragraph"
54
- data-perseus-paragraph-index="0"
55
- >
56
- <div
57
- class="paragraph"
58
- >
59
- 1
60
- </div>
61
- </div>
53
+ 1
62
54
  </div>
63
- </span>
55
+ </div>
64
56
  </div>
65
57
  </div>
58
+ </div>
59
+ <div
60
+ class="card-wrap perseus-interactive"
61
+ >
66
62
  <div
67
- class="card-wrap perseus-interactive"
63
+ class="card stack"
68
64
  >
69
65
  <div
70
- class="card stack"
66
+ class="perseus-renderer perseus-renderer-responsive"
71
67
  >
72
- <span
73
- class="mock-KatexProvider"
68
+ <div
69
+ class="paragraph"
70
+ data-perseus-paragraph-index="0"
74
71
  >
75
72
  <div
76
- class="perseus-renderer perseus-renderer-responsive"
73
+ class="paragraph"
77
74
  >
78
- <div
79
- class="paragraph"
80
- data-perseus-paragraph-index="0"
81
- >
82
- <div
83
- class="paragraph"
84
- >
85
- 3
86
- </div>
87
- </div>
75
+ 3
88
76
  </div>
89
- </span>
77
+ </div>
90
78
  </div>
91
79
  </div>
80
+ </div>
81
+ <div
82
+ class="card-wrap perseus-interactive"
83
+ >
92
84
  <div
93
- class="card-wrap perseus-interactive"
85
+ class="card stack"
94
86
  >
95
87
  <div
96
- class="card stack"
88
+ class="perseus-renderer perseus-renderer-responsive"
97
89
  >
98
- <span
99
- class="mock-KatexProvider"
90
+ <div
91
+ class="paragraph"
92
+ data-perseus-paragraph-index="0"
100
93
  >
101
94
  <div
102
- class="perseus-renderer perseus-renderer-responsive"
95
+ class="paragraph"
103
96
  >
104
- <div
105
- class="paragraph"
106
- data-perseus-paragraph-index="0"
107
- >
108
- <div
109
- class="paragraph"
110
- >
111
- 2
112
- </div>
113
- </div>
97
+ 2
114
98
  </div>
115
- </span>
99
+ </div>
116
100
  </div>
117
101
  </div>
118
102
  </div>
103
+ </div>
104
+ <div
105
+ class="perseus-clearfix draggable-box"
106
+ >
119
107
  <div
120
- class="perseus-clearfix draggable-box"
108
+ class="card-wrap perseus-interactive"
121
109
  >
122
110
  <div
123
- class="card-wrap perseus-interactive"
124
- >
125
- <div
126
- class="card drag-hint"
127
- />
128
- </div>
129
- <div />
111
+ class="card drag-hint"
112
+ />
130
113
  </div>
114
+ <div />
131
115
  </div>
132
116
  </div>
133
117
  </div>
134
118
  </div>
135
119
  </div>
136
- </span>
120
+ </div>
137
121
  </div>
138
122
  `;
139
123
 
140
124
  exports[`orderer widget should snapshot: first render 1`] = `
141
125
  <div>
142
- <span
143
- class="mock-KatexProvider"
126
+ <div
127
+ class="perseus-renderer perseus-renderer-responsive"
144
128
  >
145
129
  <div
146
- class="perseus-renderer perseus-renderer-responsive"
130
+ class="paragraph"
131
+ data-perseus-paragraph-index="0"
147
132
  >
148
133
  <div
149
134
  class="paragraph"
150
- data-perseus-paragraph-index="0"
151
135
  >
152
- <div
153
- class="paragraph"
154
- >
155
- <strong>
156
- Without using a calculator, put the numbers in order from least to greatest.
157
- </strong>
158
-
159
- </div>
136
+ <strong>
137
+ Without using a calculator, put the numbers in order from least to greatest.
138
+ </strong>
139
+
160
140
  </div>
141
+ </div>
142
+ <div
143
+ class="paragraph"
144
+ data-perseus-paragraph-index="1"
145
+ >
161
146
  <div
162
147
  class="paragraph"
163
- data-perseus-paragraph-index="1"
164
148
  >
165
149
  <div
166
- class="paragraph"
150
+ class="perseus-widget-container widget-nohighlight widget-block"
167
151
  >
168
152
  <div
169
- class="perseus-widget-container widget-nohighlight widget-block"
153
+ class="draggy-boxy-thing orderer height-normal layout-horizontal above-scratchpad blank-background perseus-clearfix perseus-interactive"
170
154
  >
171
155
  <div
172
- class="draggy-boxy-thing orderer height-normal layout-horizontal above-scratchpad blank-background perseus-clearfix perseus-interactive"
156
+ class="bank perseus-clearfix"
173
157
  >
174
158
  <div
175
- class="bank perseus-clearfix"
159
+ class="card-wrap perseus-interactive"
176
160
  >
177
161
  <div
178
- class="card-wrap perseus-interactive"
162
+ class="card stack"
179
163
  >
180
164
  <div
181
- class="card stack"
165
+ class="perseus-renderer perseus-renderer-responsive"
182
166
  >
183
- <span
184
- class="mock-KatexProvider"
167
+ <div
168
+ class="paragraph"
169
+ data-perseus-paragraph-index="0"
185
170
  >
186
171
  <div
187
- class="perseus-renderer perseus-renderer-responsive"
172
+ class="paragraph"
188
173
  >
189
- <div
190
- class="paragraph"
191
- data-perseus-paragraph-index="0"
192
- >
193
- <div
194
- class="paragraph"
195
- >
196
- 1
197
- </div>
198
- </div>
174
+ 1
199
175
  </div>
200
- </span>
176
+ </div>
201
177
  </div>
202
178
  </div>
179
+ </div>
180
+ <div
181
+ class="card-wrap perseus-interactive"
182
+ >
203
183
  <div
204
- class="card-wrap perseus-interactive"
184
+ class="card stack"
205
185
  >
206
186
  <div
207
- class="card stack"
187
+ class="perseus-renderer perseus-renderer-responsive"
208
188
  >
209
- <span
210
- class="mock-KatexProvider"
189
+ <div
190
+ class="paragraph"
191
+ data-perseus-paragraph-index="0"
211
192
  >
212
193
  <div
213
- class="perseus-renderer perseus-renderer-responsive"
194
+ class="paragraph"
214
195
  >
215
- <div
216
- class="paragraph"
217
- data-perseus-paragraph-index="0"
218
- >
219
- <div
220
- class="paragraph"
221
- >
222
- 3
223
- </div>
224
- </div>
196
+ 3
225
197
  </div>
226
- </span>
198
+ </div>
227
199
  </div>
228
200
  </div>
201
+ </div>
202
+ <div
203
+ class="card-wrap perseus-interactive"
204
+ >
229
205
  <div
230
- class="card-wrap perseus-interactive"
206
+ class="card stack"
231
207
  >
232
208
  <div
233
- class="card stack"
209
+ class="perseus-renderer perseus-renderer-responsive"
234
210
  >
235
- <span
236
- class="mock-KatexProvider"
211
+ <div
212
+ class="paragraph"
213
+ data-perseus-paragraph-index="0"
237
214
  >
238
215
  <div
239
- class="perseus-renderer perseus-renderer-responsive"
216
+ class="paragraph"
240
217
  >
241
- <div
242
- class="paragraph"
243
- data-perseus-paragraph-index="0"
244
- >
245
- <div
246
- class="paragraph"
247
- >
248
- 2
249
- </div>
250
- </div>
218
+ 2
251
219
  </div>
252
- </span>
220
+ </div>
253
221
  </div>
254
222
  </div>
255
223
  </div>
224
+ </div>
225
+ <div
226
+ class="perseus-clearfix draggable-box"
227
+ >
256
228
  <div
257
- class="perseus-clearfix draggable-box"
229
+ class="card-wrap perseus-interactive"
258
230
  >
259
231
  <div
260
- class="card-wrap perseus-interactive"
261
- >
262
- <div
263
- class="card drag-hint"
264
- />
265
- </div>
266
- <div />
232
+ class="card drag-hint"
233
+ />
267
234
  </div>
235
+ <div />
268
236
  </div>
269
237
  </div>
270
238
  </div>
271
239
  </div>
272
240
  </div>
273
- </span>
241
+ </div>
274
242
  </div>
275
243
  `;