@khanacademy/math-input 16.1.0 → 16.1.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 (70) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/README.md +1 -9
  3. package/dist/components/input/cursor-styles.d.ts +5 -0
  4. package/dist/components/input/scroll-into-view.d.ts +1 -0
  5. package/dist/enums.d.ts +0 -29
  6. package/dist/es/index.css +0 -66
  7. package/dist/es/index.js +18 -45
  8. package/dist/es/index.js.map +1 -1
  9. package/dist/index.css +0 -66
  10. package/dist/index.js +18 -45
  11. package/dist/index.js.map +1 -1
  12. package/dist/types.d.ts +1 -40
  13. package/less/main.less +0 -3
  14. package/package.json +3 -7
  15. package/src/components/input/cursor-handle.tsx +1 -1
  16. package/src/components/input/cursor-styles.ts +10 -0
  17. package/src/components/input/math-input.tsx +5 -7
  18. package/src/components/input/scroll-into-view.ts +4 -1
  19. package/src/data/key-configs.ts +0 -9
  20. package/src/enums.ts +0 -43
  21. package/src/types.ts +1 -54
  22. package/tsconfig-build.tsbuildinfo +1 -1
  23. package/dist/components/common-style.d.ts +0 -21
  24. package/index.html +0 -21
  25. package/less/echo.less +0 -56
  26. package/less/popover.less +0 -22
  27. package/less/tabbar.less +0 -6
  28. package/src/components/common-style.ts +0 -46
  29. package/tools/svg-to-react/convert.py +0 -111
  30. package/tools/svg-to-react/icons/math-keypad-icon-0.svg +0 -32
  31. package/tools/svg-to-react/icons/math-keypad-icon-1.svg +0 -32
  32. package/tools/svg-to-react/icons/math-keypad-icon-2.svg +0 -32
  33. package/tools/svg-to-react/icons/math-keypad-icon-3.svg +0 -32
  34. package/tools/svg-to-react/icons/math-keypad-icon-4.svg +0 -32
  35. package/tools/svg-to-react/icons/math-keypad-icon-5.svg +0 -32
  36. package/tools/svg-to-react/icons/math-keypad-icon-6.svg +0 -32
  37. package/tools/svg-to-react/icons/math-keypad-icon-7.svg +0 -32
  38. package/tools/svg-to-react/icons/math-keypad-icon-8.svg +0 -32
  39. package/tools/svg-to-react/icons/math-keypad-icon-9.svg +0 -32
  40. package/tools/svg-to-react/icons/math-keypad-icon-addition.svg +0 -34
  41. package/tools/svg-to-react/icons/math-keypad-icon-cos.svg +0 -38
  42. package/tools/svg-to-react/icons/math-keypad-icon-delete.svg +0 -36
  43. package/tools/svg-to-react/icons/math-keypad-icon-dismiss.svg +0 -36
  44. package/tools/svg-to-react/icons/math-keypad-icon-division.svg +0 -36
  45. package/tools/svg-to-react/icons/math-keypad-icon-equals-not.svg +0 -50
  46. package/tools/svg-to-react/icons/math-keypad-icon-equals.svg +0 -48
  47. package/tools/svg-to-react/icons/math-keypad-icon-exponent-2.svg +0 -38
  48. package/tools/svg-to-react/icons/math-keypad-icon-exponent-3.svg +0 -38
  49. package/tools/svg-to-react/icons/math-keypad-icon-exponent.svg +0 -38
  50. package/tools/svg-to-react/icons/math-keypad-icon-fraction.svg +0 -42
  51. package/tools/svg-to-react/icons/math-keypad-icon-greater-than.svg +0 -46
  52. package/tools/svg-to-react/icons/math-keypad-icon-jump-out-base.svg +0 -44
  53. package/tools/svg-to-react/icons/math-keypad-icon-jump-out-denominator.svg +0 -48
  54. package/tools/svg-to-react/icons/math-keypad-icon-jump-out-exponent.svg +0 -44
  55. package/tools/svg-to-react/icons/math-keypad-icon-jump-out-parentheses.svg +0 -44
  56. package/tools/svg-to-react/icons/math-keypad-icon-less-than.svg +0 -46
  57. package/tools/svg-to-react/icons/math-keypad-icon-log-10.svg +0 -36
  58. package/tools/svg-to-react/icons/math-keypad-icon-log-e.svg +0 -36
  59. package/tools/svg-to-react/icons/math-keypad-icon-log.svg +0 -38
  60. package/tools/svg-to-react/icons/math-keypad-icon-multiplication-cross.svg +0 -40
  61. package/tools/svg-to-react/icons/math-keypad-icon-multiplication-dot.svg +0 -38
  62. package/tools/svg-to-react/icons/math-keypad-icon-percent.svg +0 -42
  63. package/tools/svg-to-react/icons/math-keypad-icon-radical-2.svg +0 -36
  64. package/tools/svg-to-react/icons/math-keypad-icon-radical-3.svg +0 -38
  65. package/tools/svg-to-react/icons/math-keypad-icon-radical.svg +0 -38
  66. package/tools/svg-to-react/icons/math-keypad-icon-radix-character.svg +0 -32
  67. package/tools/svg-to-react/icons/math-keypad-icon-sin.svg +0 -38
  68. package/tools/svg-to-react/icons/math-keypad-icon-subtraction.svg +0 -32
  69. package/tools/svg-to-react/icons/math-keypad-icon-tan.svg +0 -38
  70. package/tools/svg-to-react/symbol_map.py +0 -41
package/dist/index.css CHANGED
@@ -1,45 +1,3 @@
1
- /**
2
- * Styles for managing the popover animations.
3
- *
4
- * Ideally, we'd be generating these styles with Aphrodite (along with
5
- * CSSTransitionGroup's support for custom classnames), but the generated
6
- * styles have issues on mobile Safari.
7
- * See: https://github.com/Khan/aphrodite/issues/68.
8
- *
9
- * If the animation durations change, the corresponding values in
10
- * echo-manager.js must change as well.
11
- */
12
- .echo-slide-and-fade-enter {
13
- opacity: 1 !important;
14
- transform: translate3d(0, 0, 0) !important;
15
- }
16
- .echo-slide-and-fade-enter.echo-slide-and-fade-enter-active {
17
- opacity: 0 !important;
18
- transform: translate3d(0, -33%, 0) !important;
19
- /**
20
- * TODO(charlie): These times are intentionally different, which means
21
- * that the animation really "ends" after 400ms
22
- * cubic-bezier(1, 0, 0.9, 1) (since the opacity goes to 0), even though
23
- * the transform doesn't complete. There's probably a way to achieve the
24
- * same effect by manipulating the transform's Bezier curve and total
25
- * displacement.
26
- */
27
- transition: transform 800ms cubic-bezier(0, 1, 0.25, 1), opacity 400ms cubic-bezier(1, 0, 0.9, 1) !important;
28
- }
29
- .echo-fade-only-enter {
30
- opacity: 1 !important;
31
- }
32
- .echo-fade-only-enter.echo-fade-only-enter-active {
33
- opacity: 0 !important;
34
- transition: opacity 300ms cubic-bezier(0.25, 0, 0.75, 1) !important;
35
- }
36
- .echo-long-fade-only-enter {
37
- opacity: 1 !important;
38
- }
39
- .echo-long-fade-only-enter.echo-long-fade-only-enter-active {
40
- opacity: 0 !important;
41
- transition: opacity 400ms cubic-bezier(0.75, 0, 0.75, 1) !important;
42
- }
43
1
  .keypad-input {
44
2
  outline: none !important;
45
3
  }
@@ -120,24 +78,6 @@
120
78
  color: white !important;
121
79
  display: inline-block !important;
122
80
  }
123
- /**
124
- * Styles for managing the popover animations.
125
- *
126
- * Ideally, we'd be generating these styles with Aphrodite (along with
127
- * CSSTransitionGroup's support for custom classnames), but the generated
128
- * styles have issues on mobile Safari.
129
- * See: https://github.com/Khan/aphrodite/issues/68.
130
- *
131
- * If the animation durations change, the corresponding values in
132
- * popover-manager.js must change as well.
133
- */
134
- .popover-enter {
135
- opacity: 0 !important;
136
- }
137
- .popover-enter.popover-enter-active {
138
- opacity: 1 !important;
139
- transition: opacity 200ms ease-out !important;
140
- }
141
81
  /*
142
82
  * MathQuill v0.10.1 http://mathquill.com
143
83
  * by Han, Jeanine, and Mary maintainers@mathquill.com
@@ -574,9 +514,3 @@
574
514
  margin-top: -0.1em;
575
515
  }
576
516
 
577
- .tabbar_item {
578
- background-color: red;
579
- }
580
- .tabbar_item:focus {
581
- background-color: green;
582
- }
package/dist/index.js CHANGED
@@ -48,7 +48,7 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
48
48
 
49
49
  // This file is processed by a Rollup plugin (replace) to inject the production
50
50
  const libName = "@khanacademy/math-input";
51
- const libVersion = "16.1.0";
51
+ const libVersion = "16.1.1";
52
52
  perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
53
53
 
54
54
  function _extends() {
@@ -134,11 +134,6 @@ class View extends React__namespace.Component {
134
134
  /**
135
135
  * Common parameters used to style components.
136
136
  */
137
- const wonderBlocksBlue = Color__default["default"].blue;
138
- const offBlack = Color__default["default"].offBlack;
139
- Color__default["default"].offBlack32;
140
- Color__default["default"].offBlack16;
141
- Color__default["default"].offBlack8;
142
137
  const cursorHandleRadiusPx = 11;
143
138
 
144
139
  // The amount to multiply the radius by to get the distance from the
@@ -146,10 +141,6 @@ const cursorHandleRadiusPx = 11;
146
141
  // one quadrant replace with a square. The hypotenuse of the square is
147
142
  // 1.045 times the radius of the circle.
148
143
  const cursorHandleDistanceMultiplier = 1.045;
149
- // HACK(charlie): This should be injected by webapp somehow.
150
- // TODO(charlie): Add a link to the webapp location as soon as the footer
151
- // has settled down.
152
- const toolbarHeightPx = 60;
153
144
 
154
145
  /**
155
146
  * Renders the green tear-shaped handle under the cursor.
@@ -1353,6 +1344,11 @@ class MathWrapper {
1353
1344
  * TODO(charlie): Move this scroll logic out of our components and into a higher
1354
1345
  * level in the component tree--perhaps even into webapp, beyond Perseus.
1355
1346
  */
1347
+
1348
+ // HACK(charlie): This should be injected by webapp somehow.
1349
+ // TODO(charlie): Add a link to the webapp location as soon as the footer
1350
+ // has settled down.
1351
+ const toolbarHeightPx = 60;
1356
1352
  const scrollIntoView = (containerNode, keypadNode) => {
1357
1353
  // TODO(charlie): There's no need for us to be reading the keypad bounds
1358
1354
  // here, since they're pre-determined by logic in the store. We should
@@ -2070,7 +2066,7 @@ class MathInput extends React__namespace.Component {
2070
2066
  ...inlineStyles.innerContainer,
2071
2067
  borderWidth: this.getBorderWidthPx(),
2072
2068
  ...(focused ? {
2073
- borderColor: wonderBlocksBlue
2069
+ borderColor: Color__default["default"].blue
2074
2070
  } : {}),
2075
2071
  ...style
2076
2072
  };
@@ -2154,7 +2150,7 @@ const inlineStyles = {
2154
2150
  borderStyle: "solid",
2155
2151
  borderColor: Color__default["default"].offBlack50,
2156
2152
  borderRadius: 4,
2157
- color: offBlack
2153
+ color: Color__default["default"].offBlack
2158
2154
  }
2159
2155
  };
2160
2156
 
@@ -2393,33 +2389,6 @@ function Tabbar(props) {
2393
2389
  })));
2394
2390
  }
2395
2391
 
2396
- /**
2397
- * Constants that are shared between multiple files.
2398
- */
2399
-
2400
- let KeypadType = /*#__PURE__*/function (KeypadType) {
2401
- KeypadType["FRACTION"] = "FRACTION";
2402
- KeypadType["EXPRESSION"] = "EXPRESSION";
2403
- return KeypadType;
2404
- }({});
2405
- let BorderDirection = /*#__PURE__*/function (BorderDirection) {
2406
- BorderDirection["LEFT"] = "LEFT";
2407
- BorderDirection["BOTTOM"] = "BOTTOM";
2408
- return BorderDirection;
2409
- }({});
2410
- ({
2411
- LEFT: [BorderDirection.LEFT],
2412
- BOTTOM: [BorderDirection.BOTTOM],
2413
- ALL: [BorderDirection.LEFT, BorderDirection.BOTTOM],
2414
- NONE: []
2415
- });
2416
- let IconType = /*#__PURE__*/function (IconType) {
2417
- IconType["MATH"] = "MATH";
2418
- IconType["SVG"] = "SVG";
2419
- IconType["TEXT"] = "TEXT";
2420
- return IconType;
2421
- }({});
2422
-
2423
2392
  /**
2424
2393
  * This file contains configuration settings for the buttons in the keypad.
2425
2394
  */
@@ -2427,7 +2396,6 @@ const getDefaultOperatorFields = _ref => {
2427
2396
  let {
2428
2397
  key,
2429
2398
  keyType = "OPERATOR",
2430
- iconType = IconType.SVG,
2431
2399
  ariaLabel = key,
2432
2400
  data = key
2433
2401
  } = _ref;
@@ -2436,7 +2404,6 @@ const getDefaultOperatorFields = _ref => {
2436
2404
  type: keyType,
2437
2405
  ariaLabel,
2438
2406
  icon: {
2439
- type: iconType,
2440
2407
  data
2441
2408
  }
2442
2409
  };
@@ -2445,7 +2412,6 @@ const getDefaultValueFields = _ref2 => {
2445
2412
  let {
2446
2413
  key,
2447
2414
  keyType = "VALUE",
2448
- iconType = IconType.MATH,
2449
2415
  ariaLabel = key,
2450
2416
  data = key
2451
2417
  } = _ref2;
@@ -2454,7 +2420,6 @@ const getDefaultValueFields = _ref2 => {
2454
2420
  type: keyType,
2455
2421
  ariaLabel,
2456
2422
  icon: {
2457
- type: iconType,
2458
2423
  data
2459
2424
  }
2460
2425
  };
@@ -2464,7 +2429,6 @@ const getDefaultNumberFields = _ref3 => {
2464
2429
  key,
2465
2430
  data = key.replace("NUM_", ""),
2466
2431
  keyType = "VALUE",
2467
- iconType = IconType.TEXT,
2468
2432
  ariaLabel = data
2469
2433
  } = _ref3;
2470
2434
  return {
@@ -2472,7 +2436,6 @@ const getDefaultNumberFields = _ref3 => {
2472
2436
  type: keyType,
2473
2437
  ariaLabel,
2474
2438
  icon: {
2475
- type: iconType,
2476
2439
  data
2477
2440
  }
2478
2441
  };
@@ -5890,6 +5853,16 @@ const KeyArray = ["PLUS", "MINUS", "NEGATIVE", "TIMES", "DIVIDE", "DECIMAL", "PE
5890
5853
  // Perseus' Expression MathInput
5891
5854
  "PHI", "NTHROOT3", "POW", "LOG_B"];
5892
5855
 
5856
+ /**
5857
+ * Constants that are shared between multiple files.
5858
+ */
5859
+
5860
+ let KeypadType = /*#__PURE__*/function (KeypadType) {
5861
+ KeypadType["FRACTION"] = "FRACTION";
5862
+ KeypadType["EXPRESSION"] = "EXPRESSION";
5863
+ return KeypadType;
5864
+ }({});
5865
+
5893
5866
  exports.CursorContext = CursorContext;
5894
5867
  exports.DesktopKeypad = Keypad;
5895
5868
  exports.KeyArray = KeyArray;