@khanacademy/perseus 5.0.0 → 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 (113) hide show
  1. package/CHANGELOG.md +42 -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 +477 -648
  24. package/dist/es/index.js.map +1 -1
  25. package/dist/index.css +0 -3
  26. package/dist/index.js +481 -645
  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/multi-items/__tests__/__snapshots__/multi-renderer.test.tsx.snap +708 -764
  73. package/src/perseus-types.ts +13 -9
  74. package/src/renderer.tsx +11 -22
  75. package/src/types.ts +0 -18
  76. package/src/util/interactive.ts +18 -5
  77. package/src/util/tex.ts +13 -77
  78. package/src/util.ts +3 -4
  79. package/src/widgets/__tests__/__snapshots__/categorizer.test.ts.snap +717 -773
  80. package/src/widgets/__tests__/__snapshots__/cs-program.test.ts.snap +28 -36
  81. package/src/widgets/__tests__/__snapshots__/definition.test.ts.snap +52 -60
  82. package/src/widgets/__tests__/__snapshots__/dropdown.test.ts.snap +100 -108
  83. package/src/widgets/__tests__/__snapshots__/explanation.test.ts.snap +212 -260
  84. package/src/widgets/__tests__/__snapshots__/graded-group-set-jipt.test.ts.snap +613 -641
  85. package/src/widgets/__tests__/__snapshots__/graded-group-set.test.ts.snap +249 -261
  86. package/src/widgets/__tests__/__snapshots__/graded-group.test.ts.snap +671 -735
  87. package/src/widgets/__tests__/__snapshots__/grapher.test.ts.snap +2676 -2684
  88. package/src/widgets/__tests__/__snapshots__/group.test.tsx.snap +938 -1002
  89. package/src/widgets/__tests__/__snapshots__/iframe.test.ts.snap +28 -36
  90. package/src/widgets/__tests__/__snapshots__/image.test.ts.snap +227 -255
  91. package/src/widgets/__tests__/__snapshots__/input-number.test.ts.snap +353 -357
  92. package/src/widgets/__tests__/__snapshots__/interaction.test.ts.snap +255 -259
  93. package/src/widgets/__tests__/__snapshots__/interactive-graph.test.ts.snap +2401 -2433
  94. package/src/widgets/__tests__/__snapshots__/matcher.test.tsx.snap +600 -756
  95. package/src/widgets/__tests__/__snapshots__/matrix.test.ts.snap +420 -428
  96. package/src/widgets/__tests__/__snapshots__/number-line.test.ts.snap +762 -770
  97. package/src/widgets/__tests__/__snapshots__/numeric-input.test.ts.snap +373 -393
  98. package/src/widgets/__tests__/__snapshots__/orderer.test.ts.snap +116 -148
  99. package/src/widgets/__tests__/__snapshots__/passage-ref.test.ts.snap +289 -301
  100. package/src/widgets/__tests__/__snapshots__/passage.test.tsx.snap +1679 -1711
  101. package/src/widgets/__tests__/__snapshots__/radio.test.ts.snap +2692 -2960
  102. package/src/widgets/__tests__/__snapshots__/video.test.ts.snap +90 -98
  103. package/src/widgets/__tests__/matcher.test.tsx +33 -9
  104. package/src/widgets/expression.tsx +9 -6
  105. package/src/widgets/grapher.tsx +3 -3
  106. package/src/widgets/image.tsx +2 -2
  107. package/src/widgets/interactive-graph.tsx +5 -5
  108. package/src/widgets/matcher.tsx +43 -24
  109. package/src/widgets/number-line.tsx +1 -1
  110. package/src/widgets/simulator.tsx +4 -6
  111. package/{tsconfig.json → tsconfig-build.json} +6 -6
  112. package/tsconfig-build.tsbuildinfo +1 -0
  113. package/tsconfig.tsbuildinfo +0 -1
package/src/__tests__/__snapshots__/item-renderer.test.tsx.snap CHANGED
@@ -6,191 +6,183 @@ exports[`item renderer should snapshot: initial render 1`] = `
6
6
  <div
7
7
  id="workarea"
8
8
  >
9
- <span
10
- class="mock-KatexProvider"
9
+ <div
10
+ class="perseus-renderer perseus-renderer-responsive"
11
11
  >
12
12
  <div
13
- class="perseus-renderer perseus-renderer-responsive"
13
+ class="paragraph"
14
+ data-perseus-paragraph-index="0"
14
15
  >
15
16
  <div
16
17
  class="paragraph"
17
- data-perseus-paragraph-index="0"
18
18
  >
19
- <div
20
- class="paragraph"
19
+ Enter the number
20
+ <span
21
+ style="white-space: nowrap;"
21
22
  >
22
- Enter the number
23
+ <span />
23
24
  <span
24
- style="white-space: nowrap;"
25
- >
26
- <span />
27
- <span
28
- class="mock-TeX"
29
- />
30
- <span />
31
- </span>
32
- -42
25
+ class="mock-TeX"
26
+ />
27
+ <span />
28
+ </span>
29
+ -42
30
+ <span
31
+ style="white-space: nowrap;"
32
+ >
33
+ <span />
33
34
  <span
34
- style="white-space: nowrap;"
35
- >
36
- <span />
37
- <span
38
- class="mock-TeX"
39
- />
40
- <span />
41
- </span>
42
- in the box:
43
- <div
44
- class="perseus-widget-container widget-nohighlight widget-inline-block"
45
- >
46
- <span>
47
- <div>
48
- <input
49
- autocapitalize="off"
50
- autocomplete="off"
51
- autocorrect="off"
52
- class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3-o_O-default_1gznapd-o_O-leftAlign_7jg4r4"
53
- id="input-with-examples-aW5wdXQtbnVtYmVyIDE"
54
- type="text"
55
- value=""
56
- />
57
- </div>
35
+ class="mock-TeX"
36
+ />
37
+ <span />
38
+ </span>
39
+ in the box:
40
+ <div
41
+ class="perseus-widget-container widget-nohighlight widget-inline-block"
42
+ >
43
+ <span>
44
+ <div>
45
+ <input
46
+ autocapitalize="off"
47
+ autocomplete="off"
48
+ autocorrect="off"
49
+ class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3-o_O-default_1gznapd-o_O-leftAlign_7jg4r4"
50
+ id="input-with-examples-aW5wdXQtbnVtYmVyIDE"
51
+ type="text"
52
+ value=""
53
+ />
54
+ </div>
55
+ <div
56
+ style="position: relative; height: 0px; display: none;"
57
+ >
58
58
  <div
59
- style="position: relative; height: 0px; display: none;"
59
+ class="tooltipContainer"
60
+ style="position: absolute; left: 0px;"
60
61
  >
61
62
  <div
62
- class="tooltipContainer"
63
- style="position: absolute; left: 0px;"
63
+ style="display: block; position: relative; visibility: visible; left: 0px; top: -1px; width: 12px; height: 11px; margin-top: -1px; margin-bottom: -2px; z-index: 10;"
64
64
  >
65
65
  <div
66
- style="display: block; position: relative; visibility: visible; left: 0px; top: -1px; width: 12px; height: 11px; margin-top: -1px; margin-bottom: -2px; z-index: 10;"
67
- >
68
- <div
69
- style="display: block; height: 0px; width: 0px; position: absolute; left: 0px; top: -1px; border-right: 12px solid transparent; border-bottom: 12px solid #ccc;"
70
- />
71
- <div
72
- style="display: block; height: 0px; width: 0px; position: absolute; left: 1px; top: 1px; border-right: 10px solid transparent; border-bottom: 10px solid white;"
73
- />
74
- </div>
66
+ style="display: block; height: 0px; width: 0px; position: absolute; left: 0px; top: -1px; border-right: 12px solid transparent; border-bottom: 12px solid #ccc;"
67
+ />
68
+ <div
69
+ style="display: block; height: 0px; width: 0px; position: absolute; left: 1px; top: 1px; border-right: 10px solid transparent; border-bottom: 10px solid white;"
70
+ />
71
+ </div>
72
+ <div
73
+ class="perseus-formats-tooltip preview-measure"
74
+ style="position: relative; top: 0px; left: 0px; border: 1px solid #ccc; box-shadow: 0 1px 3px #ccc; z-index: 9;"
75
+ >
75
76
  <div
76
- class="perseus-formats-tooltip preview-measure"
77
- style="position: relative; top: 0px; left: 0px; border: 1px solid #ccc; box-shadow: 0 1px 3px #ccc; z-index: 9;"
77
+ id="input-with-examples-aW5wdXQtbnVtYmVyIDE"
78
78
  >
79
79
  <div
80
- id="input-with-examples-aW5wdXQtbnVtYmVyIDE"
80
+ class="perseus-renderer perseus-renderer-responsive"
81
81
  >
82
- <span
83
- class="mock-KatexProvider"
82
+ <div
83
+ class="paragraph"
84
+ data-perseus-paragraph-index="0"
84
85
  >
85
- <div
86
- class="perseus-renderer perseus-renderer-responsive"
87
- >
88
- <div
89
- class="paragraph"
90
- data-perseus-paragraph-index="0"
91
- >
92
- <ul>
93
- <li>
94
- <strong>
95
- Your answer should be
96
- </strong>
97
- </li>
98
- <li>
99
- an integer, like
100
- <span
101
- style="white-space: nowrap;"
102
- >
103
- <span />
104
- <span
105
- class="mock-TeX"
106
- >
107
- 6
108
- </span>
109
- <span />
110
- </span>
111
- </li>
112
- <li>
113
- an
114
- <em>
115
- exact
116
- </em>
117
- decimal, like
118
- <span
119
- style="white-space: nowrap;"
120
- >
121
- <span />
122
- <span
123
- class="mock-TeX"
124
- >
125
- 0.75
126
- </span>
127
- <span />
128
- </span>
129
- </li>
130
- <li>
131
- a
132
- <em>
133
- simplified proper
134
- </em>
135
- fraction, like
136
- <span
137
- style="white-space: nowrap;"
138
- >
139
- <span />
140
- <span
141
- class="mock-TeX"
142
- >
143
- 3/5
144
- </span>
145
- <span />
146
- </span>
147
- </li>
148
- <li>
149
- a
150
- <em>
151
- simplified improper
152
- </em>
153
- fraction, like
154
- <span
155
- style="white-space: nowrap;"
156
- >
157
- <span />
158
- <span
159
- class="mock-TeX"
160
- >
161
- 7/4
162
- </span>
163
- <span />
164
- </span>
165
- </li>
166
- <li>
167
- a mixed number, like
168
- <span
169
- style="white-space: nowrap;"
170
- >
171
- <span />
172
- <span
173
- class="mock-TeX"
174
- >
175
- 1\\ 3/4
176
- </span>
177
- <span />
178
- </span>
179
- </li>
180
- </ul>
181
- </div>
182
- </div>
183
- </span>
86
+ <ul>
87
+ <li>
88
+ <strong>
89
+ Your answer should be
90
+ </strong>
91
+ </li>
92
+ <li>
93
+ an integer, like
94
+ <span
95
+ style="white-space: nowrap;"
96
+ >
97
+ <span />
98
+ <span
99
+ class="mock-TeX"
100
+ >
101
+ 6
102
+ </span>
103
+ <span />
104
+ </span>
105
+ </li>
106
+ <li>
107
+ an
108
+ <em>
109
+ exact
110
+ </em>
111
+ decimal, like
112
+ <span
113
+ style="white-space: nowrap;"
114
+ >
115
+ <span />
116
+ <span
117
+ class="mock-TeX"
118
+ >
119
+ 0.75
120
+ </span>
121
+ <span />
122
+ </span>
123
+ </li>
124
+ <li>
125
+ a
126
+ <em>
127
+ simplified proper
128
+ </em>
129
+ fraction, like
130
+ <span
131
+ style="white-space: nowrap;"
132
+ >
133
+ <span />
134
+ <span
135
+ class="mock-TeX"
136
+ >
137
+ 3/5
138
+ </span>
139
+ <span />
140
+ </span>
141
+ </li>
142
+ <li>
143
+ a
144
+ <em>
145
+ simplified improper
146
+ </em>
147
+ fraction, like
148
+ <span
149
+ style="white-space: nowrap;"
150
+ >
151
+ <span />
152
+ <span
153
+ class="mock-TeX"
154
+ >
155
+ 7/4
156
+ </span>
157
+ <span />
158
+ </span>
159
+ </li>
160
+ <li>
161
+ a mixed number, like
162
+ <span
163
+ style="white-space: nowrap;"
164
+ >
165
+ <span />
166
+ <span
167
+ class="mock-TeX"
168
+ >
169
+ 1\\ 3/4
170
+ </span>
171
+ <span />
172
+ </span>
173
+ </li>
174
+ </ul>
175
+ </div>
184
176
  </div>
185
177
  </div>
186
178
  </div>
187
179
  </div>
188
- </span>
189
- </div>
180
+ </div>
181
+ </span>
190
182
  </div>
191
183
  </div>
192
184
  </div>
193
- </span>
185
+ </div>
194
186
  </div>
195
187
  <div
196
188
  id="hintsarea"