@khanacademy/perseus 7.2.0 → 7.2.1

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 (68) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/es/index.css +61 -61
  3. package/dist/es/index.js +50 -119
  4. package/dist/es/index.js.map +1 -1
  5. package/dist/index.css +61 -61
  6. package/dist/index.js +39 -77
  7. package/dist/index.js.map +1 -1
  8. package/dist/widgets/plotter.d.ts +47 -13
  9. package/dist/widgets/plotter.js.flow +47 -13
  10. package/package.json +2 -2
  11. package/src/__tests__/item-renderer.test.tsx +1 -1
  12. package/src/components/__stories__/image-loader.stories.tsx +1 -0
  13. package/src/components/graph.tsx +1 -0
  14. package/src/components/icon.tsx +1 -0
  15. package/src/components/image-loader.tsx +1 -0
  16. package/src/components/number-input.tsx +1 -0
  17. package/src/components/sortable.tsx +1 -0
  18. package/src/components/svg-image.tsx +1 -0
  19. package/src/components/tex-buttons.tsx +1 -0
  20. package/src/components/text-input.tsx +1 -0
  21. package/src/components/text-list-editor.tsx +1 -0
  22. package/src/components/zoomable.tsx +1 -0
  23. package/src/hints-renderer.tsx +1 -0
  24. package/src/index.ts +1 -0
  25. package/src/item-renderer.tsx +1 -0
  26. package/src/mixins/provide-keypad.tsx +1 -0
  27. package/src/multi-items/multi-renderer.tsx +1 -0
  28. package/src/renderer.tsx +1 -0
  29. package/src/server-item-renderer.tsx +1 -0
  30. package/src/styles/articles.less +8 -4
  31. package/src/styles/perseus-renderer.less +47 -38
  32. package/src/styles/util.less +1 -1
  33. package/src/styles/variables.boostrap.less +158 -182
  34. package/src/styles/variables.less +20 -20
  35. package/src/styles/variables.shared.less +162 -168
  36. package/src/styles/widgets/categorizer.less +1 -2
  37. package/src/styles/widgets/expression.less +7 -4
  38. package/src/styles/widgets/grapher.less +2 -1
  39. package/src/styles/widgets/image.less +3 -2
  40. package/src/styles/widgets/interactive-graph.less +4 -2
  41. package/src/styles/widgets/label-image.less +2 -1
  42. package/src/styles/widgets/matrix.less +11 -7
  43. package/src/styles/widgets/orderer.less +2 -1
  44. package/src/styles/widgets/passage.less +2 -1
  45. package/src/styles/widgets/plotter.less +4 -3
  46. package/src/styles/widgets/radio.less +4 -2
  47. package/src/styles/widgets/sortable.less +1 -1
  48. package/src/styles/widgets/table.less +2 -1
  49. package/src/styles/widgets/transformer.less +2 -1
  50. package/src/styles/widgets/unit.less +2 -1
  51. package/src/widgets/__stories__/plotter.stories.tsx +27 -0
  52. package/src/widgets/__testdata__/plotter.testdata.ts +36 -0
  53. package/src/widgets/__tests__/__snapshots__/plotter.test.tsx.snap +863 -0
  54. package/src/widgets/__tests__/plotter.test.tsx +65 -0
  55. package/src/widgets/categorizer.tsx +1 -0
  56. package/src/widgets/graded-group-set.tsx +1 -0
  57. package/src/widgets/graded-group.tsx +1 -0
  58. package/src/widgets/interaction.tsx +1 -0
  59. package/src/widgets/label-image/marker.tsx +1 -0
  60. package/src/widgets/matcher.tsx +1 -0
  61. package/src/widgets/orderer.tsx +1 -0
  62. package/src/widgets/passage-ref-target.tsx +1 -0
  63. package/src/widgets/plotter.tsx +108 -98
  64. package/src/widgets/radio/base-radio.tsx +1 -0
  65. package/src/widgets/radio/choice-icon/choice-icon.tsx +1 -0
  66. package/src/widgets/sorter.tsx +1 -0
  67. package/src/widgets/transformer.tsx +1 -0
  68. package/tsconfig-build.tsbuildinfo +1 -1
package/dist/index.css CHANGED
@@ -1666,9 +1666,9 @@ body.mobile ul.inequalities-one-line-radios > li {
1666
1666
  font-family: Courier, monospace;
1667
1667
  }
1668
1668
  .framework-perseus.perseus-article:not(.perseus-mobile) pre {
1669
- background-color: #F0F1F2;
1669
+ background-color: #f0f1f2;
1670
1670
  border-radius: 4px;
1671
- color: #21242C;
1671
+ color: #21242c;
1672
1672
  font-size: 18px;
1673
1673
  padding: 16px;
1674
1674
  white-space: pre;
@@ -1679,29 +1679,29 @@ body.mobile ul.inequalities-one-line-radios > li {
1679
1679
  font-family: inherit;
1680
1680
  font-size: 14px;
1681
1681
  line-height: 1.25;
1682
- color: #21242C;
1682
+ color: #21242c;
1683
1683
  }
1684
1684
  .framework-perseus:not(.perseus-article):not(.perseus-mobile) .perseus-radio-option-content .perseus-renderer > .paragraph .paragraph {
1685
1685
  font-family: inherit;
1686
1686
  font-size: 14px;
1687
1687
  line-height: 1.25;
1688
- color: #21242C;
1688
+ color: #21242c;
1689
1689
  }
1690
1690
  .framework-perseus:not(.perseus-article):not(.perseus-mobile) .perseus-radio-rationale-content .perseus-renderer > .paragraph {
1691
1691
  font-family: inherit;
1692
1692
  font-size: 14px;
1693
1693
  line-height: 1.25;
1694
- color: #21242C;
1694
+ color: #21242c;
1695
1695
  }
1696
1696
  .framework-perseus:not(.perseus-article):not(.perseus-mobile) .perseus-radio-rationale-content .perseus-renderer > .paragraph .paragraph {
1697
1697
  font-family: inherit;
1698
1698
  font-size: 14px;
1699
1699
  line-height: 1.25;
1700
- color: #21242C;
1700
+ color: #21242c;
1701
1701
  }
1702
1702
  .framework-perseus:not(.perseus-article):not(.perseus-mobile) .perseus-radio-rationale-content .perseus-renderer > .paragraph .paragraph .katex,
1703
1703
  .framework-perseus:not(.perseus-article):not(.perseus-mobile) .perseus-radio-rationale-content .perseus-renderer > .paragraph .paragraph mjx-container {
1704
- color: #21242C;
1704
+ color: #21242c;
1705
1705
  }
1706
1706
  .framework-perseus.perseus-mobile .perseus-article .perseus-widget-container.widget-float-left {
1707
1707
  float: left;
@@ -1780,7 +1780,7 @@ body.mobile ul.inequalities-one-line-radios > li {
1780
1780
  font-family: inherit;
1781
1781
  font-size: 24px;
1782
1782
  line-height: 1.2;
1783
- color: #21242C;
1783
+ color: #21242c;
1784
1784
  }
1785
1785
  .framework-perseus.perseus-mobile h2 {
1786
1786
  font-weight: 700;
@@ -1788,7 +1788,7 @@ body.mobile ul.inequalities-one-line-radios > li {
1788
1788
  font-family: inherit;
1789
1789
  font-size: 24px;
1790
1790
  line-height: 1.2;
1791
- color: #3B3E40;
1791
+ color: #3b3e40;
1792
1792
  }
1793
1793
  .framework-perseus.perseus-mobile h3,
1794
1794
  .framework-perseus.perseus-mobile h4 {
@@ -1834,7 +1834,7 @@ body.mobile ul.inequalities-one-line-radios > li {
1834
1834
  font-size: 18px;
1835
1835
  line-height: 1.4;
1836
1836
  color: #626569;
1837
- color: #888D93;
1837
+ color: #888d93;
1838
1838
  }
1839
1839
  .framework-perseus.perseus-mobile table {
1840
1840
  font-family: inherit;
@@ -1846,44 +1846,44 @@ body.mobile ul.inequalities-one-line-radios > li {
1846
1846
  font-family: inherit;
1847
1847
  font-size: 16px;
1848
1848
  line-height: 1.25;
1849
- color: #21242C;
1849
+ color: #21242c;
1850
1850
  }
1851
1851
  .framework-perseus.perseus-mobile .perseus-radio-option-content .perseus-renderer > .paragraph .paragraph {
1852
1852
  font-family: inherit;
1853
1853
  font-size: 16px;
1854
1854
  line-height: 1.25;
1855
- color: #21242C;
1855
+ color: #21242c;
1856
1856
  }
1857
1857
  .framework-perseus.perseus-mobile .perseus-radio-rationale-content .perseus-renderer > .paragraph {
1858
1858
  font-family: inherit;
1859
1859
  font-size: 16px;
1860
1860
  line-height: 1.25;
1861
- color: #21242C;
1861
+ color: #21242c;
1862
1862
  }
1863
1863
  .framework-perseus.perseus-mobile .perseus-radio-rationale-content .perseus-renderer > .paragraph .paragraph {
1864
1864
  font-family: inherit;
1865
1865
  font-size: 16px;
1866
1866
  line-height: 1.25;
1867
- color: #21242C;
1867
+ color: #21242c;
1868
1868
  }
1869
1869
  .framework-perseus.perseus-mobile .perseus-radio-rationale-content .perseus-renderer > .paragraph .paragraph .katex,
1870
1870
  .framework-perseus.perseus-mobile .perseus-radio-rationale-content .perseus-renderer > .paragraph .paragraph mjx-container {
1871
- color: #21242C;
1871
+ color: #21242c;
1872
1872
  }
1873
1873
  .framework-perseus.perseus-mobile .perseus-image-caption .paragraph .paragraph {
1874
- color: #888D93;
1874
+ color: #888d93;
1875
1875
  font-size: 14px;
1876
1876
  line-height: 1.3;
1877
1877
  text-align: left;
1878
1878
  }
1879
1879
  .framework-perseus.perseus-mobile .perseus-image-caption.has-title .paragraph .paragraph strong:first-child {
1880
- color: #3B3E40;
1880
+ color: #3b3e40;
1881
1881
  }
1882
1882
  .framework-perseus.perseus-mobile .katex,
1883
1883
  .framework-perseus.perseus-mobile mjx-container {
1884
1884
  font-size: 21px;
1885
1885
  line-height: 1.2;
1886
- color: #21242C;
1886
+ color: #21242c;
1887
1887
  }
1888
1888
  .framework-perseus.perseus-mobile .perseus-block-math .katex,
1889
1889
  .framework-perseus.perseus-mobile .perseus-block-math mjx-container {
@@ -1899,9 +1899,9 @@ body.mobile ul.inequalities-one-line-radios > li {
1899
1899
  font-family: Courier, monospace;
1900
1900
  }
1901
1901
  .framework-perseus.perseus-mobile pre {
1902
- background-color: #F0F1F2;
1902
+ background-color: #f0f1f2;
1903
1903
  border-radius: 4px;
1904
- color: #21242C;
1904
+ color: #21242c;
1905
1905
  font-size: 18px;
1906
1906
  line-height: 1.6;
1907
1907
  padding: 16px;
@@ -1923,7 +1923,7 @@ body.mobile ul.inequalities-one-line-radios > li {
1923
1923
  font-family: inherit;
1924
1924
  font-size: 30px;
1925
1925
  line-height: 1.1;
1926
- color: #21242C;
1926
+ color: #21242c;
1927
1927
  }
1928
1928
  .framework-perseus.perseus-mobile h2 {
1929
1929
  font-weight: 700;
@@ -1931,7 +1931,7 @@ body.mobile ul.inequalities-one-line-radios > li {
1931
1931
  font-family: inherit;
1932
1932
  font-size: 30px;
1933
1933
  line-height: 1.1;
1934
- color: #3B3E40;
1934
+ color: #3b3e40;
1935
1935
  }
1936
1936
  .framework-perseus.perseus-mobile h3,
1937
1937
  .framework-perseus.perseus-mobile h4 {
@@ -1977,7 +1977,7 @@ body.mobile ul.inequalities-one-line-radios > li {
1977
1977
  font-size: 20px;
1978
1978
  line-height: 1.5;
1979
1979
  color: #626569;
1980
- color: #888D93;
1980
+ color: #888d93;
1981
1981
  }
1982
1982
  .framework-perseus.perseus-mobile table {
1983
1983
  font-family: inherit;
@@ -1989,44 +1989,44 @@ body.mobile ul.inequalities-one-line-radios > li {
1989
1989
  font-family: inherit;
1990
1990
  font-size: 18px;
1991
1991
  line-height: 1.25;
1992
- color: #21242C;
1992
+ color: #21242c;
1993
1993
  }
1994
1994
  .framework-perseus.perseus-mobile .perseus-radio-option-content .perseus-renderer > .paragraph .paragraph {
1995
1995
  font-family: inherit;
1996
1996
  font-size: 18px;
1997
1997
  line-height: 1.25;
1998
- color: #21242C;
1998
+ color: #21242c;
1999
1999
  }
2000
2000
  .framework-perseus.perseus-mobile .perseus-radio-rationale-content .perseus-renderer > .paragraph {
2001
2001
  font-family: inherit;
2002
2002
  font-size: 18px;
2003
2003
  line-height: 1.25;
2004
- color: #21242C;
2004
+ color: #21242c;
2005
2005
  }
2006
2006
  .framework-perseus.perseus-mobile .perseus-radio-rationale-content .perseus-renderer > .paragraph .paragraph {
2007
2007
  font-family: inherit;
2008
2008
  font-size: 18px;
2009
2009
  line-height: 1.25;
2010
- color: #21242C;
2010
+ color: #21242c;
2011
2011
  }
2012
2012
  .framework-perseus.perseus-mobile .perseus-radio-rationale-content .perseus-renderer > .paragraph .paragraph .katex,
2013
2013
  .framework-perseus.perseus-mobile .perseus-radio-rationale-content .perseus-renderer > .paragraph .paragraph mjx-container {
2014
- color: #21242C;
2014
+ color: #21242c;
2015
2015
  }
2016
2016
  .framework-perseus.perseus-mobile .perseus-image-caption .paragraph .paragraph {
2017
- color: #888D93;
2017
+ color: #888d93;
2018
2018
  font-size: 17px;
2019
2019
  line-height: 1.4;
2020
2020
  text-align: left;
2021
2021
  }
2022
2022
  .framework-perseus.perseus-mobile .perseus-image-caption.has-title .paragraph .paragraph strong:first-child {
2023
- color: #3B3E40;
2023
+ color: #3b3e40;
2024
2024
  }
2025
2025
  .framework-perseus.perseus-mobile .katex,
2026
2026
  .framework-perseus.perseus-mobile mjx-container {
2027
2027
  font-size: 23px;
2028
2028
  line-height: 1.3;
2029
- color: #21242C;
2029
+ color: #21242c;
2030
2030
  }
2031
2031
  .framework-perseus.perseus-mobile .perseus-block-math .katex,
2032
2032
  .framework-perseus.perseus-mobile .perseus-block-math mjx-container {
@@ -2042,9 +2042,9 @@ body.mobile ul.inequalities-one-line-radios > li {
2042
2042
  font-family: Courier, monospace;
2043
2043
  }
2044
2044
  .framework-perseus.perseus-mobile pre {
2045
- background-color: #F0F1F2;
2045
+ background-color: #f0f1f2;
2046
2046
  border-radius: 4px;
2047
- color: #21242C;
2047
+ color: #21242c;
2048
2048
  font-size: 18px;
2049
2049
  line-height: 1.6;
2050
2050
  padding: 16px;
@@ -2066,7 +2066,7 @@ body.mobile ul.inequalities-one-line-radios > li {
2066
2066
  font-family: inherit;
2067
2067
  font-size: 35px;
2068
2068
  line-height: 1.1;
2069
- color: #21242C;
2069
+ color: #21242c;
2070
2070
  }
2071
2071
  .framework-perseus.perseus-mobile h2 {
2072
2072
  font-weight: 700;
@@ -2074,7 +2074,7 @@ body.mobile ul.inequalities-one-line-radios > li {
2074
2074
  font-family: inherit;
2075
2075
  font-size: 35px;
2076
2076
  line-height: 1.1;
2077
- color: #3B3E40;
2077
+ color: #3b3e40;
2078
2078
  }
2079
2079
  .framework-perseus.perseus-mobile h3,
2080
2080
  .framework-perseus.perseus-mobile h4 {
@@ -2120,7 +2120,7 @@ body.mobile ul.inequalities-one-line-radios > li {
2120
2120
  font-size: 22px;
2121
2121
  line-height: 1.4;
2122
2122
  color: #626569;
2123
- color: #888D93;
2123
+ color: #888d93;
2124
2124
  }
2125
2125
  .framework-perseus.perseus-mobile table {
2126
2126
  font-family: inherit;
@@ -2132,44 +2132,44 @@ body.mobile ul.inequalities-one-line-radios > li {
2132
2132
  font-family: inherit;
2133
2133
  font-size: 20px;
2134
2134
  line-height: 1.25;
2135
- color: #21242C;
2135
+ color: #21242c;
2136
2136
  }
2137
2137
  .framework-perseus.perseus-mobile .perseus-radio-option-content .perseus-renderer > .paragraph .paragraph {
2138
2138
  font-family: inherit;
2139
2139
  font-size: 20px;
2140
2140
  line-height: 1.25;
2141
- color: #21242C;
2141
+ color: #21242c;
2142
2142
  }
2143
2143
  .framework-perseus.perseus-mobile .perseus-radio-rationale-content .perseus-renderer > .paragraph {
2144
2144
  font-family: inherit;
2145
2145
  font-size: 20px;
2146
2146
  line-height: 1.25;
2147
- color: #21242C;
2147
+ color: #21242c;
2148
2148
  }
2149
2149
  .framework-perseus.perseus-mobile .perseus-radio-rationale-content .perseus-renderer > .paragraph .paragraph {
2150
2150
  font-family: inherit;
2151
2151
  font-size: 20px;
2152
2152
  line-height: 1.25;
2153
- color: #21242C;
2153
+ color: #21242c;
2154
2154
  }
2155
2155
  .framework-perseus.perseus-mobile .perseus-radio-rationale-content .perseus-renderer > .paragraph .paragraph .katex,
2156
2156
  .framework-perseus.perseus-mobile .perseus-radio-rationale-content .perseus-renderer > .paragraph .paragraph mjx-container {
2157
- color: #21242C;
2157
+ color: #21242c;
2158
2158
  }
2159
2159
  .framework-perseus.perseus-mobile .perseus-image-caption .paragraph .paragraph {
2160
- color: #888D93;
2160
+ color: #888d93;
2161
2161
  font-size: 20px;
2162
2162
  line-height: 1.4;
2163
2163
  text-align: left;
2164
2164
  }
2165
2165
  .framework-perseus.perseus-mobile .perseus-image-caption.has-title .paragraph .paragraph strong:first-child {
2166
- color: #3B3E40;
2166
+ color: #3b3e40;
2167
2167
  }
2168
2168
  .framework-perseus.perseus-mobile .katex,
2169
2169
  .framework-perseus.perseus-mobile mjx-container {
2170
2170
  font-size: 25px;
2171
2171
  line-height: 1.2;
2172
- color: #21242C;
2172
+ color: #21242c;
2173
2173
  }
2174
2174
  .framework-perseus.perseus-mobile .perseus-block-math .katex,
2175
2175
  .framework-perseus.perseus-mobile .perseus-block-math mjx-container {
@@ -2185,9 +2185,9 @@ body.mobile ul.inequalities-one-line-radios > li {
2185
2185
  font-family: Courier, monospace;
2186
2186
  }
2187
2187
  .framework-perseus.perseus-mobile pre {
2188
- background-color: #F0F1F2;
2188
+ background-color: #f0f1f2;
2189
2189
  border-radius: 4px;
2190
- color: #21242C;
2190
+ color: #21242c;
2191
2191
  font-size: 18px;
2192
2192
  line-height: 1.6;
2193
2193
  padding: 16px;
@@ -2320,7 +2320,7 @@ img.zoom-img {
2320
2320
  user-select: none;
2321
2321
  }
2322
2322
  .blank-background {
2323
- background-color: #FDFDFD;
2323
+ background-color: #fdfdfd;
2324
2324
  }
2325
2325
  #answer_area .blank-background {
2326
2326
  background-color: transparent;
@@ -2331,7 +2331,7 @@ img.zoom-img {
2331
2331
  }
2332
2332
  .graphie.above-scratchpad,
2333
2333
  .graphie-container.above-scratchpad {
2334
- background-color: #FDFDFD;
2334
+ background-color: #fdfdfd;
2335
2335
  }
2336
2336
  .perseus-mobile .graphie-container.above-scratchpad {
2337
2337
  background: #ffffff;
@@ -2527,12 +2527,12 @@ img.zoom-img {
2527
2527
  padding: 5px 10px;
2528
2528
  text-align: left;
2529
2529
  }
2530
- .framework-perseus:not(.perseus-mobile) table th[align=center],
2531
- .framework-perseus:not(.perseus-mobile) table td[align=center] {
2530
+ .framework-perseus:not(.perseus-mobile) table th[align="center"],
2531
+ .framework-perseus:not(.perseus-mobile) table td[align="center"] {
2532
2532
  text-align: center;
2533
2533
  }
2534
- .framework-perseus:not(.perseus-mobile) table th[align=right],
2535
- .framework-perseus:not(.perseus-mobile) table td[align=right] {
2534
+ .framework-perseus:not(.perseus-mobile) table th[align="right"],
2535
+ .framework-perseus:not(.perseus-mobile) table td[align="right"] {
2536
2536
  text-align: right;
2537
2537
  }
2538
2538
  .framework-perseus:not(.perseus-mobile) table th {
@@ -2584,12 +2584,12 @@ img.zoom-img {
2584
2584
  padding: 16px;
2585
2585
  text-align: left;
2586
2586
  }
2587
- .framework-perseus.perseus-mobile table th[align=center],
2588
- .framework-perseus.perseus-mobile table td[align=center] {
2587
+ .framework-perseus.perseus-mobile table th[align="center"],
2588
+ .framework-perseus.perseus-mobile table td[align="center"] {
2589
2589
  text-align: center;
2590
2590
  }
2591
- .framework-perseus.perseus-mobile table th[align=right],
2592
- .framework-perseus.perseus-mobile table td[align=right] {
2591
+ .framework-perseus.perseus-mobile table th[align="right"],
2592
+ .framework-perseus.perseus-mobile table td[align="right"] {
2593
2593
  text-align: right;
2594
2594
  }
2595
2595
  .framework-perseus.perseus-mobile table td {
@@ -2967,7 +2967,7 @@ body.mobile .categorizer-container td.category input[type="radio"] + span:active
2967
2967
  .perseus-matrix.the-matrix .matrix-bracket,
2968
2968
  .perseus-matrix.the-matrix .matrix-left,
2969
2969
  .perseus-matrix.the-matrix .matrix-right {
2970
- border-color: #29F139;
2970
+ border-color: #29f139;
2971
2971
  }
2972
2972
  .perseus-matrix.the-matrix .matrix-input {
2973
2973
  background: #222;
@@ -2975,7 +2975,7 @@ body.mobile .categorizer-container td.category input[type="radio"] + span:active
2975
2975
  .perseus-matrix.the-matrix input,
2976
2976
  .perseus-matrix.the-matrix .number-input {
2977
2977
  background: #666;
2978
- color: #29F139;
2978
+ color: #29f139;
2979
2979
  font-weight: bold;
2980
2980
  }
2981
2981
  .perseus-matrix.the-matrix input.outside,
@@ -3204,7 +3204,7 @@ body.sat-section .perseus-widget-passage {
3204
3204
  transform: rotate(-90deg);
3205
3205
  }
3206
3206
  .set-from-scale-box {
3207
- border: 2px solid #EEEEEE;
3207
+ border: 2px solid #eeeeee;
3208
3208
  border-radius: 3px;
3209
3209
  padding: 3px;
3210
3210
  }
@@ -3212,7 +3212,7 @@ body.sat-section .perseus-widget-passage {
3212
3212
  font-size: 14px;
3213
3213
  }
3214
3214
  .perseus-mobile .perseus-widget-plotter {
3215
- border: solid 0.5px #BABEC2;
3215
+ border: solid 0.5px #babec2;
3216
3216
  border-radius: 4px;
3217
3217
  }
3218
3218
  .perseus-mobile .perseus-widget-plotter .graphie-label .katex,
@@ -3737,7 +3737,7 @@ body.mobile .framework-perseus table.perseus-widget-table-of-values.non-markdown
3737
3737
  border-color: white;
3738
3738
  }
3739
3739
  .keypad-input .mq-hasCursor:empty:not(.mq-root-block):after {
3740
- content: 'c';
3740
+ content: "c";
3741
3741
  }
3742
3742
  .keypad-input .mq-math-mode .mq-selection .mq-non-leaf,
3743
3743
  .keypad-input .mq-editable-field .mq-selection .mq-non-leaf {
package/dist/index.js CHANGED
@@ -38310,26 +38310,11 @@ var PassageRefTarget$1 = {
38310
38310
  const {
38311
38311
  deepEq: deepEq$1
38312
38312
  } = Util;
38313
- const BAR = "bar",
38314
- LINE = "line",
38315
- PIC = "pic",
38316
- HISTOGRAM = "histogram",
38317
- DOTPLOT = "dotplot";
38318
- ({
38319
- type: PropTypes__default["default"].oneOf([BAR, LINE, PIC, HISTOGRAM, DOTPLOT]),
38320
- labels: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
38321
- categories: PropTypes__default["default"].arrayOf(PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string])),
38322
- scaleY: PropTypes__default["default"].number,
38323
- maxY: PropTypes__default["default"].number,
38324
- snapsPerLine: PropTypes__default["default"].number,
38325
- picSize: PropTypes__default["default"].number,
38326
- pixBoxHeight: PropTypes__default["default"].number,
38327
- picUrl: PropTypes__default["default"].string,
38328
- plotDimensions: PropTypes__default["default"].arrayOf(PropTypes__default["default"].number),
38329
- labelInterval: PropTypes__default["default"].number,
38330
- starting: PropTypes__default["default"].arrayOf(PropTypes__default["default"].number),
38331
- static: PropTypes__default["default"].bool
38332
- });
38313
+ const BAR = "bar";
38314
+ const LINE = "line";
38315
+ const PIC = "pic";
38316
+ const HISTOGRAM = "histogram";
38317
+ const DOTPLOT = "dotplot";
38333
38318
  class Plotter extends React__namespace.Component {
38334
38319
  constructor() {
38335
38320
  super(...arguments);
@@ -38368,11 +38353,11 @@ class Plotter extends React__namespace.Component {
38368
38353
  self.graphie = graphie;
38369
38354
  self.graphie.pics = [];
38370
38355
  self.graphie.dotTicks = [];
38371
- const isBar = self.props.type === BAR,
38372
- isLine = self.props.type === LINE,
38373
- isPic = self.props.type === PIC,
38374
- isHistogram = self.props.type === HISTOGRAM,
38375
- isDotplot = self.props.type === DOTPLOT;
38356
+ const isBar = self.props.type === BAR;
38357
+ const isLine = self.props.type === LINE;
38358
+ const isPic = self.props.type === PIC;
38359
+ const isHistogram = self.props.type === HISTOGRAM;
38360
+ const isDotplot = self.props.type === DOTPLOT;
38376
38361
  const isTiledPlot = isPic || isDotplot;
38377
38362
  const config = {};
38378
38363
  const c = config; // c for short
@@ -38433,9 +38418,7 @@ class Plotter extends React__namespace.Component {
38433
38418
 
38434
38419
  // TODO(michaelpolyak): Handle other plot types: Dot, Histogram, Line.
38435
38420
  if (isMobile && (isBar || isTiledPlot)) {
38436
- const maxCategoryHeight = Math.max(0,
38437
- // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'unknown' is not assignable to parameter of type 'number'.
38438
- ...Object.values(self.state.categoryHeights));
38421
+ const maxCategoryHeight = Math.max(0, ...Object.values(self.state.categoryHeights));
38439
38422
  if (maxCategoryHeight) {
38440
38423
  // Account for bottom label position, height.
38441
38424
  let offsetY = 25;
@@ -38488,7 +38471,7 @@ class Plotter extends React__namespace.Component {
38488
38471
  });
38489
38472
  }
38490
38473
  }
38491
- if ((isBar || isLine) && isMobile) {
38474
+ if ((isBar || isLine) && isMobile && !this.props.static) {
38492
38475
  self.graphie.dragPrompt = graphie.label([c.dimX / 2, c.dimY / 2], i18n__namespace._("Drag handles to make graph"), "center", false).css("font-weight", "bold").css("color", KhanColors.KA_GREEN).css("display", "none");
38493
38476
  }
38494
38477
  self.setupCategories(config);
@@ -38740,8 +38723,8 @@ class Plotter extends React__namespace.Component {
38740
38723
  config.graph.bars[i].scale(1, Math.max(isMobile ? 0.2 : 0.01, height / config.scaleY), center[0], center[1]);
38741
38724
  if (isHistogram) {
38742
38725
  // Scale dividers between buckets
38743
- const leftDivider = config.graph.dividers[i - 1],
38744
- rightDivider = config.graph.dividers[i];
38726
+ const leftDivider = config.graph.dividers[i - 1];
38727
+ const rightDivider = config.graph.dividers[i];
38745
38728
  if (leftDivider) {
38746
38729
  const divHeight = Math.min(self.state.values[i - 1], height);
38747
38730
  leftDivider.scale(1, Math.max(0.01, divHeight / config.scaleY), center[0], center[1]);
@@ -39066,38 +39049,13 @@ class Plotter extends React__namespace.Component {
39066
39049
  return Plotter.validate(this.getUserInput(), rubric);
39067
39050
  });
39068
39051
  }
39069
- render() {
39070
- // TODO(kevinb) actually compute the size of the graphie correctly and
39071
- // make it that size so we don't have to add extra padding. The value
39072
- // was determined by eye-balling the layout. :(
39073
- const paddingForBottomLabel = 75;
39074
- const style = {
39075
- marginBottom: this.props.labels[0] ? paddingForBottomLabel : 0
39076
- };
39077
- return /*#__PURE__*/React__namespace.createElement("div", {
39078
- className: "perseus-widget-plotter graphie " + ClassNames.INTERACTIVE
39079
- // eslint-disable-next-line react/no-string-refs
39080
- ,
39081
- ref: "graphieDiv",
39082
- style: style
39083
- });
39084
- }
39085
- componentDidUpdate(prevProps, prevState) {
39086
- this.shouldSetupGraphie = this.shouldSetupGraphie || !___default["default"].isEqual(this.state.categoryHeights, prevState.categoryHeights);
39087
- if (this.shouldSetupGraphie) {
39088
- this.setupGraphie(prevState);
39089
- }
39090
- }
39091
39052
  componentDidMount() {
39092
39053
  this._isMounted = true;
39093
39054
  this.setupGraphie(this.state);
39094
39055
  }
39095
39056
  UNSAFE_componentWillReceiveProps(nextProps) {
39096
39057
  const props = ["type", "labels", "categories", "scaleY", "maxY", "snapsPerLine", "picUrl", "labelInterval", "static"];
39097
- this.shouldSetupGraphie = ___default["default"].any(props, function (prop) {
39098
- // @ts-expect-error [FEI-5003] - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
39099
- return !___default["default"].isEqual(this.props[prop], nextProps[prop]);
39100
- }, this);
39058
+ this.shouldSetupGraphie = ___default["default"].any(props, prop => !___default["default"].isEqual(this.props[prop], nextProps[prop]), this);
39101
39059
  if (!___default["default"].isEqual(this.props.starting, nextProps.starting) && !___default["default"].isEqual(this.state.values, nextProps.starting)) {
39102
39060
  this.shouldSetupGraphie = true;
39103
39061
  this.setState({
@@ -39105,16 +39063,32 @@ class Plotter extends React__namespace.Component {
39105
39063
  });
39106
39064
  }
39107
39065
  }
39066
+ componentDidUpdate(prevProps, prevState) {
39067
+ this.shouldSetupGraphie = this.shouldSetupGraphie || !___default["default"].isEqual(this.state.categoryHeights, prevState.categoryHeights);
39068
+ if (this.shouldSetupGraphie) {
39069
+ this.setupGraphie(prevState);
39070
+ }
39071
+ }
39108
39072
  componentWillUnmount() {
39109
39073
  this._isMounted = false;
39110
39074
  }
39075
+ render() {
39076
+ // TODO(kevinb) actually compute the size of the graphie correctly and
39077
+ // make it that size so we don't have to add extra padding. The value
39078
+ // was determined by eye-balling the layout. :(
39079
+ const paddingForBottomLabel = 75;
39080
+ const style = {
39081
+ marginBottom: this.props.labels[0] ? paddingForBottomLabel : 0
39082
+ };
39083
+ return /*#__PURE__*/React__namespace.createElement("div", {
39084
+ className: "perseus-widget-plotter graphie " + ClassNames.INTERACTIVE
39085
+ // eslint-disable-next-line react/no-string-refs
39086
+ ,
39087
+ ref: "graphieDiv",
39088
+ style: style
39089
+ });
39090
+ }
39111
39091
  }
39112
- _defineProperty(Plotter, "propTypes", {
39113
- onChange: PropTypes__default["default"].func.isRequired,
39114
- trackInteraction: PropTypes__default["default"].func.isRequired
39115
- // TODO(alex): Figure out why lint chokes on this line
39116
- // ...widgetPropTypes,
39117
- });
39118
39092
  _defineProperty(Plotter, "defaultProps", {
39119
39093
  type: BAR,
39120
39094
  labels: ["", ""],
@@ -44147,17 +44121,7 @@ registerWidgets(allWidgets);
44147
44121
  const ItemVersion = getVersionVector();
44148
44122
  ItemVersion["::renderer::"] = version.itemDataVersion;
44149
44123
 
44150
- /**
44151
- * A mixin that renders a custom software keypad in additional to the base
44152
- * component. The base component will receive blur events when the keypad is
44153
- * dismissed and can access the keypad element itself so as to manage its
44154
- * activation and dismissal.
44155
- *
44156
- * TODO(charlie): This would make a nicer higher-order component, except that
44157
- * we need to expose methods on the base component (i.e., `ItemRenderer`). When
44158
- * `ItemRenderer` and friends are written as ES6 Classes, we can have them
44159
- * extend a `ProvideKeypad` component instead of using this mixin.
44160
- */
44124
+ /* eslint-disable @khanacademy/ts-no-error-suppressions */
44161
44125
  // NOTE: This is not a real component. It's a collection of methods used to
44162
44126
  // create and manage a Keypad instances.
44163
44127
  // TODO(LP-10789): replace this with a React Context object to pass information
@@ -47078,9 +47042,7 @@ const EditorJsonify = {
47078
47042
  }
47079
47043
  };
47080
47044
 
47081
- /**
47082
- * Main entry point
47083
- */
47045
+ /* eslint-disable @khanacademy/ts-no-error-suppressions */
47084
47046
  const apiVersion = version.apiVersion;
47085
47047
  const itemDataVersion = version.itemDataVersion;
47086
47048