@khanacademy/perseus 11.0.0 → 11.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 (11) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/es/index.js +2 -1
  3. package/dist/es/index.js.map +1 -1
  4. package/dist/index.js +2 -1
  5. package/dist/index.js.map +1 -1
  6. package/package.json +1 -1
  7. package/src/multi-items/__tests__/__snapshots__/multi-renderer.test.tsx.snap +5 -5
  8. package/src/widgets/__tests__/__snapshots__/group.test.tsx.snap +5 -5
  9. package/src/widgets/__tests__/__snapshots__/radio.test.ts.snap +28 -28
  10. package/src/widgets/radio/choice.tsx +2 -1
  11. package/tsconfig-build.tsbuildinfo +1 -1
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "Core Perseus API (includes renderers and widgets)",
4
4
  "author": "Khan Academy",
5
5
  "license": "MIT",
6
- "version": "11.0.0",
6
+ "version": "11.1.0",
7
7
  "publishConfig": {
8
8
  "access": "public"
9
9
  },
package/src/multi-items/__tests__/__snapshots__/multi-renderer.test.tsx.snap CHANGED
@@ -133,7 +133,7 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
133
133
  style="flex-direction: column; color: rgb(33, 36, 44);"
134
134
  >
135
135
  <div
136
- style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
136
+ style="display: flex; flex-direction: row; opacity: 1; overflow-x: auto; overflow-y: hidden;"
137
137
  >
138
138
  <div
139
139
  class="perseus-sr-only"
@@ -300,7 +300,7 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
300
300
  style="flex-direction: column; color: rgb(33, 36, 44);"
301
301
  >
302
302
  <div
303
- style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
303
+ style="display: flex; flex-direction: row; opacity: 1; overflow-x: auto; overflow-y: hidden;"
304
304
  >
305
305
  <div
306
306
  class="perseus-sr-only"
@@ -467,7 +467,7 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
467
467
  style="flex-direction: column; color: rgb(33, 36, 44);"
468
468
  >
469
469
  <div
470
- style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
470
+ style="display: flex; flex-direction: row; opacity: 1; overflow-x: auto; overflow-y: hidden;"
471
471
  >
472
472
  <div
473
473
  class="perseus-sr-only"
@@ -634,7 +634,7 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
634
634
  style="flex-direction: column; color: rgb(33, 36, 44);"
635
635
  >
636
636
  <div
637
- style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
637
+ style="display: flex; flex-direction: row; opacity: 1; overflow-x: auto; overflow-y: hidden;"
638
638
  >
639
639
  <div
640
640
  class="perseus-sr-only"
@@ -801,7 +801,7 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
801
801
  style="flex-direction: column; color: rgb(33, 36, 44);"
802
802
  >
803
803
  <div
804
- style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
804
+ style="display: flex; flex-direction: row; opacity: 1; overflow-x: auto; overflow-y: hidden;"
805
805
  >
806
806
  <div
807
807
  class="perseus-sr-only"
package/src/widgets/__tests__/__snapshots__/group.test.tsx.snap CHANGED
@@ -133,7 +133,7 @@ exports[`group widget should snapshot: initial render 1`] = `
133
133
  style="flex-direction: column; color: rgb(33, 36, 44);"
134
134
  >
135
135
  <div
136
- style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
136
+ style="display: flex; flex-direction: row; opacity: 1; overflow-x: auto; overflow-y: hidden;"
137
137
  >
138
138
  <div
139
139
  class="perseus-sr-only"
@@ -248,7 +248,7 @@ exports[`group widget should snapshot: initial render 1`] = `
248
248
  style="flex-direction: column; color: rgb(33, 36, 44);"
249
249
  >
250
250
  <div
251
- style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
251
+ style="display: flex; flex-direction: row; opacity: 1; overflow-x: auto; overflow-y: hidden;"
252
252
  >
253
253
  <div
254
254
  class="perseus-sr-only"
@@ -363,7 +363,7 @@ exports[`group widget should snapshot: initial render 1`] = `
363
363
  style="flex-direction: column; color: rgb(33, 36, 44);"
364
364
  >
365
365
  <div
366
- style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
366
+ style="display: flex; flex-direction: row; opacity: 1; overflow-x: auto; overflow-y: hidden;"
367
367
  >
368
368
  <div
369
369
  class="perseus-sr-only"
@@ -478,7 +478,7 @@ exports[`group widget should snapshot: initial render 1`] = `
478
478
  style="flex-direction: column; color: rgb(33, 36, 44);"
479
479
  >
480
480
  <div
481
- style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
481
+ style="display: flex; flex-direction: row; opacity: 1; overflow-x: auto; overflow-y: hidden;"
482
482
  >
483
483
  <div
484
484
  class="perseus-sr-only"
@@ -593,7 +593,7 @@ exports[`group widget should snapshot: initial render 1`] = `
593
593
  style="flex-direction: column; color: rgb(33, 36, 44);"
594
594
  >
595
595
  <div
596
- style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
596
+ style="display: flex; flex-direction: row; opacity: 1; overflow-x: auto; overflow-y: hidden;"
597
597
  >
598
598
  <div
599
599
  class="perseus-sr-only"
package/src/widgets/__tests__/__snapshots__/radio.test.ts.snap CHANGED
@@ -68,7 +68,7 @@ exports[`multi-choice question should snapshot the same when invalid: invalid st
68
68
  style="flex-direction: column; color: rgb(33, 36, 44);"
69
69
  >
70
70
  <div
71
- style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
71
+ style="display: flex; flex-direction: row; opacity: 1; overflow-x: auto; overflow-y: hidden;"
72
72
  >
73
73
  <div
74
74
  class="perseus-sr-only"
@@ -183,7 +183,7 @@ exports[`multi-choice question should snapshot the same when invalid: invalid st
183
183
  style="flex-direction: column; color: rgb(33, 36, 44);"
184
184
  >
185
185
  <div
186
- style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
186
+ style="display: flex; flex-direction: row; opacity: 1; overflow-x: auto; overflow-y: hidden;"
187
187
  >
188
188
  <div
189
189
  class="perseus-sr-only"
@@ -298,7 +298,7 @@ exports[`multi-choice question should snapshot the same when invalid: invalid st
298
298
  style="flex-direction: column; color: rgb(33, 36, 44);"
299
299
  >
300
300
  <div
301
- style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
301
+ style="display: flex; flex-direction: row; opacity: 1; overflow-x: auto; overflow-y: hidden;"
302
302
  >
303
303
  <div
304
304
  class="perseus-sr-only"
@@ -413,7 +413,7 @@ exports[`multi-choice question should snapshot the same when invalid: invalid st
413
413
  style="flex-direction: column; color: rgb(33, 36, 44);"
414
414
  >
415
415
  <div
416
- style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
416
+ style="display: flex; flex-direction: row; opacity: 1; overflow-x: auto; overflow-y: hidden;"
417
417
  >
418
418
  <div
419
419
  class="perseus-sr-only"
@@ -628,7 +628,7 @@ exports[`single-choice question reviewMode: false should snapshot the same with
628
628
  style="flex-direction: column; color: rgb(33, 36, 44);"
629
629
  >
630
630
  <div
631
- style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
631
+ style="display: flex; flex-direction: row; opacity: 1; overflow-x: auto; overflow-y: hidden;"
632
632
  >
633
633
  <div
634
634
  class="perseus-sr-only"
@@ -769,7 +769,7 @@ exports[`single-choice question reviewMode: false should snapshot the same with
769
769
  style="flex-direction: column; color: rgb(33, 36, 44);"
770
770
  >
771
771
  <div
772
- style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
772
+ style="display: flex; flex-direction: row; opacity: 1; overflow-x: auto; overflow-y: hidden;"
773
773
  >
774
774
  <div
775
775
  class="perseus-sr-only"
@@ -884,7 +884,7 @@ exports[`single-choice question reviewMode: false should snapshot the same with
884
884
  style="flex-direction: column; color: rgb(33, 36, 44);"
885
885
  >
886
886
  <div
887
- style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
887
+ style="display: flex; flex-direction: row; opacity: 1; overflow-x: auto; overflow-y: hidden;"
888
888
  >
889
889
  <div
890
890
  class="perseus-sr-only"
@@ -999,7 +999,7 @@ exports[`single-choice question reviewMode: false should snapshot the same with
999
999
  style="flex-direction: column; color: rgb(33, 36, 44);"
1000
1000
  >
1001
1001
  <div
1002
- style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
1002
+ style="display: flex; flex-direction: row; opacity: 1; overflow-x: auto; overflow-y: hidden;"
1003
1003
  >
1004
1004
  <div
1005
1005
  class="perseus-sr-only"
@@ -1200,7 +1200,7 @@ exports[`single-choice question reviewMode: false should snapshot the same with
1200
1200
  style="flex-direction: column; color: rgb(33, 36, 44);"
1201
1201
  >
1202
1202
  <div
1203
- style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
1203
+ style="display: flex; flex-direction: row; opacity: 1; overflow-x: auto; overflow-y: hidden;"
1204
1204
  >
1205
1205
  <div
1206
1206
  class="perseus-sr-only"
@@ -1341,7 +1341,7 @@ exports[`single-choice question reviewMode: false should snapshot the same with
1341
1341
  style="flex-direction: column; color: rgb(33, 36, 44);"
1342
1342
  >
1343
1343
  <div
1344
- style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
1344
+ style="display: flex; flex-direction: row; opacity: 1; overflow-x: auto; overflow-y: hidden;"
1345
1345
  >
1346
1346
  <div
1347
1347
  class="perseus-sr-only"
@@ -1456,7 +1456,7 @@ exports[`single-choice question reviewMode: false should snapshot the same with
1456
1456
  style="flex-direction: column; color: rgb(33, 36, 44);"
1457
1457
  >
1458
1458
  <div
1459
- style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
1459
+ style="display: flex; flex-direction: row; opacity: 1; overflow-x: auto; overflow-y: hidden;"
1460
1460
  >
1461
1461
  <div
1462
1462
  class="perseus-sr-only"
@@ -1571,7 +1571,7 @@ exports[`single-choice question reviewMode: false should snapshot the same with
1571
1571
  style="flex-direction: column; color: rgb(33, 36, 44);"
1572
1572
  >
1573
1573
  <div
1574
- style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
1574
+ style="display: flex; flex-direction: row; opacity: 1; overflow-x: auto; overflow-y: hidden;"
1575
1575
  >
1576
1576
  <div
1577
1577
  class="perseus-sr-only"
@@ -1772,7 +1772,7 @@ exports[`single-choice question reviewMode: false should snapshot the same: firs
1772
1772
  style="flex-direction: column; color: rgb(33, 36, 44);"
1773
1773
  >
1774
1774
  <div
1775
- style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
1775
+ style="display: flex; flex-direction: row; opacity: 1; overflow-x: auto; overflow-y: hidden;"
1776
1776
  >
1777
1777
  <div
1778
1778
  class="perseus-sr-only"
@@ -1913,7 +1913,7 @@ exports[`single-choice question reviewMode: false should snapshot the same: firs
1913
1913
  style="flex-direction: column; color: rgb(33, 36, 44);"
1914
1914
  >
1915
1915
  <div
1916
- style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
1916
+ style="display: flex; flex-direction: row; opacity: 1; overflow-x: auto; overflow-y: hidden;"
1917
1917
  >
1918
1918
  <div
1919
1919
  class="perseus-sr-only"
@@ -2028,7 +2028,7 @@ exports[`single-choice question reviewMode: false should snapshot the same: firs
2028
2028
  style="flex-direction: column; color: rgb(33, 36, 44);"
2029
2029
  >
2030
2030
  <div
2031
- style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
2031
+ style="display: flex; flex-direction: row; opacity: 1; overflow-x: auto; overflow-y: hidden;"
2032
2032
  >
2033
2033
  <div
2034
2034
  class="perseus-sr-only"
@@ -2143,7 +2143,7 @@ exports[`single-choice question reviewMode: false should snapshot the same: firs
2143
2143
  style="flex-direction: column; color: rgb(33, 36, 44);"
2144
2144
  >
2145
2145
  <div
2146
- style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
2146
+ style="display: flex; flex-direction: row; opacity: 1; overflow-x: auto; overflow-y: hidden;"
2147
2147
  >
2148
2148
  <div
2149
2149
  class="perseus-sr-only"
@@ -2344,7 +2344,7 @@ exports[`single-choice question reviewMode: true should snapshot the same with c
2344
2344
  style="flex-direction: column; color: rgb(33, 36, 44);"
2345
2345
  >
2346
2346
  <div
2347
- style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
2347
+ style="display: flex; flex-direction: row; opacity: 1; overflow-x: auto; overflow-y: hidden;"
2348
2348
  >
2349
2349
  <div
2350
2350
  class="perseus-sr-only"
@@ -2485,7 +2485,7 @@ exports[`single-choice question reviewMode: true should snapshot the same with c
2485
2485
  style="flex-direction: column; color: rgb(33, 36, 44);"
2486
2486
  >
2487
2487
  <div
2488
- style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
2488
+ style="display: flex; flex-direction: row; opacity: 1; overflow-x: auto; overflow-y: hidden;"
2489
2489
  >
2490
2490
  <div
2491
2491
  class="perseus-sr-only"
@@ -2600,7 +2600,7 @@ exports[`single-choice question reviewMode: true should snapshot the same with c
2600
2600
  style="flex-direction: column; color: rgb(33, 36, 44);"
2601
2601
  >
2602
2602
  <div
2603
- style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
2603
+ style="display: flex; flex-direction: row; opacity: 1; overflow-x: auto; overflow-y: hidden;"
2604
2604
  >
2605
2605
  <div
2606
2606
  class="perseus-sr-only"
@@ -2715,7 +2715,7 @@ exports[`single-choice question reviewMode: true should snapshot the same with c
2715
2715
  style="flex-direction: column; color: rgb(33, 36, 44);"
2716
2716
  >
2717
2717
  <div
2718
- style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
2718
+ style="display: flex; flex-direction: row; opacity: 1; overflow-x: auto; overflow-y: hidden;"
2719
2719
  >
2720
2720
  <div
2721
2721
  class="perseus-sr-only"
@@ -2916,7 +2916,7 @@ exports[`single-choice question reviewMode: true should snapshot the same with i
2916
2916
  style="flex-direction: column; color: rgb(33, 36, 44);"
2917
2917
  >
2918
2918
  <div
2919
- style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
2919
+ style="display: flex; flex-direction: row; opacity: 1; overflow-x: auto; overflow-y: hidden;"
2920
2920
  >
2921
2921
  <div
2922
2922
  class="perseus-sr-only"
@@ -3057,7 +3057,7 @@ exports[`single-choice question reviewMode: true should snapshot the same with i
3057
3057
  style="flex-direction: column; color: rgb(33, 36, 44);"
3058
3058
  >
3059
3059
  <div
3060
- style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
3060
+ style="display: flex; flex-direction: row; opacity: 1; overflow-x: auto; overflow-y: hidden;"
3061
3061
  >
3062
3062
  <div
3063
3063
  class="perseus-sr-only"
@@ -3172,7 +3172,7 @@ exports[`single-choice question reviewMode: true should snapshot the same with i
3172
3172
  style="flex-direction: column; color: rgb(33, 36, 44);"
3173
3173
  >
3174
3174
  <div
3175
- style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
3175
+ style="display: flex; flex-direction: row; opacity: 1; overflow-x: auto; overflow-y: hidden;"
3176
3176
  >
3177
3177
  <div
3178
3178
  class="perseus-sr-only"
@@ -3287,7 +3287,7 @@ exports[`single-choice question reviewMode: true should snapshot the same with i
3287
3287
  style="flex-direction: column; color: rgb(33, 36, 44);"
3288
3288
  >
3289
3289
  <div
3290
- style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
3290
+ style="display: flex; flex-direction: row; opacity: 1; overflow-x: auto; overflow-y: hidden;"
3291
3291
  >
3292
3292
  <div
3293
3293
  class="perseus-sr-only"
@@ -3488,7 +3488,7 @@ exports[`single-choice question reviewMode: true should snapshot the same: first
3488
3488
  style="flex-direction: column; color: rgb(33, 36, 44);"
3489
3489
  >
3490
3490
  <div
3491
- style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
3491
+ style="display: flex; flex-direction: row; opacity: 1; overflow-x: auto; overflow-y: hidden;"
3492
3492
  >
3493
3493
  <div
3494
3494
  class="perseus-sr-only"
@@ -3710,7 +3710,7 @@ exports[`single-choice question reviewMode: true should snapshot the same: first
3710
3710
  style="flex-direction: column; color: rgb(33, 36, 44);"
3711
3711
  >
3712
3712
  <div
3713
- style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
3713
+ style="display: flex; flex-direction: row; opacity: 1; overflow-x: auto; overflow-y: hidden;"
3714
3714
  >
3715
3715
  <div
3716
3716
  class="perseus-sr-only"
@@ -3890,7 +3890,7 @@ exports[`single-choice question reviewMode: true should snapshot the same: first
3890
3890
  style="flex-direction: column; color: rgb(33, 36, 44);"
3891
3891
  >
3892
3892
  <div
3893
- style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
3893
+ style="display: flex; flex-direction: row; opacity: 1; overflow-x: auto; overflow-y: hidden;"
3894
3894
  >
3895
3895
  <div
3896
3896
  class="perseus-sr-only"
@@ -4065,7 +4065,7 @@ exports[`single-choice question reviewMode: true should snapshot the same: first
4065
4065
  style="flex-direction: column; color: rgb(33, 36, 44);"
4066
4066
  >
4067
4067
  <div
4068
- style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
4068
+ style="display: flex; flex-direction: row; opacity: 1; overflow-x: auto; overflow-y: hidden;"
4069
4069
  >
4070
4070
  <div
4071
4071
  class="perseus-sr-only"
package/src/widgets/radio/choice.tsx CHANGED
@@ -160,7 +160,8 @@ const Choice = function (props: ChoicePropsWithForwardRef): React.ReactElement {
160
160
  display: "flex",
161
161
  flexDirection: "row",
162
162
  opacity: showDimmed ? 0.5 : 1.0,
163
- overflow: "auto",
163
+ overflowX: "auto",
164
+ overflowY: "hidden",
164
165
  }}
165
166
  >
166
167
  <div className="perseus-sr-only">