@khanacademy/math-input 17.0.4 → 17.0.5

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 (82) hide show
  1. package/dist/es/index.js +1 -1
  2. package/dist/index.js +1 -1
  3. package/package.json +5 -2
  4. package/.eslintrc.js +0 -18
  5. package/CHANGELOG.md +0 -660
  6. package/less/main.less +0 -2
  7. package/less/overrides.less +0 -122
  8. package/src/components/__tests__/integration.test.tsx +0 -300
  9. package/src/components/aphrodite-css-transition-group/index.tsx +0 -78
  10. package/src/components/aphrodite-css-transition-group/transition-child.tsx +0 -192
  11. package/src/components/aphrodite-css-transition-group/types.ts +0 -20
  12. package/src/components/aphrodite-css-transition-group/util.ts +0 -97
  13. package/src/components/input/__tests__/context-tracking.test.ts +0 -176
  14. package/src/components/input/__tests__/mathquill-helpers.test.ts +0 -105
  15. package/src/components/input/__tests__/mathquill.test.ts +0 -747
  16. package/src/components/input/__tests__/test-math-wrapper.ts +0 -29
  17. package/src/components/input/cursor-contexts.ts +0 -37
  18. package/src/components/input/cursor-handle.tsx +0 -137
  19. package/src/components/input/cursor-styles.ts +0 -10
  20. package/src/components/input/drag-listener.ts +0 -79
  21. package/src/components/input/math-input.tsx +0 -1036
  22. package/src/components/input/math-wrapper.ts +0 -189
  23. package/src/components/input/mathquill-helpers.ts +0 -262
  24. package/src/components/input/mathquill-instance.ts +0 -106
  25. package/src/components/input/mathquill-types.ts +0 -32
  26. package/src/components/input/scroll-into-view.ts +0 -65
  27. package/src/components/key-handlers/__tests__/handle-jump-out.test.ts +0 -94
  28. package/src/components/key-handlers/handle-arrow.ts +0 -70
  29. package/src/components/key-handlers/handle-backspace.ts +0 -277
  30. package/src/components/key-handlers/handle-exponent.ts +0 -53
  31. package/src/components/key-handlers/handle-jump-out.ts +0 -107
  32. package/src/components/key-handlers/key-translator.ts +0 -222
  33. package/src/components/keypad/__tests__/__snapshots__/keypad.test.tsx.snap +0 -1913
  34. package/src/components/keypad/__tests__/__snapshots__/mobile-keypad.test.tsx.snap +0 -600
  35. package/src/components/keypad/__tests__/keypad-button.test.tsx +0 -84
  36. package/src/components/keypad/__tests__/keypad-v2-mathquill.test.tsx +0 -304
  37. package/src/components/keypad/__tests__/keypad-v2.cypress.ts +0 -16
  38. package/src/components/keypad/__tests__/keypad.test.tsx +0 -321
  39. package/src/components/keypad/__tests__/mobile-keypad.test.tsx +0 -115
  40. package/src/components/keypad/__tests__/test-data-tabs.ts +0 -21
  41. package/src/components/keypad/button-assets.tsx +0 -1880
  42. package/src/components/keypad/index.tsx +0 -2
  43. package/src/components/keypad/keypad-button.stories.tsx +0 -81
  44. package/src/components/keypad/keypad-button.tsx +0 -124
  45. package/src/components/keypad/keypad-mathquill.stories.tsx +0 -109
  46. package/src/components/keypad/keypad-pages/extras-page.tsx +0 -35
  47. package/src/components/keypad/keypad-pages/fractions-page.tsx +0 -125
  48. package/src/components/keypad/keypad-pages/geometry-page.tsx +0 -34
  49. package/src/components/keypad/keypad-pages/keypad-pages.stories.tsx +0 -37
  50. package/src/components/keypad/keypad-pages/numbers-page.tsx +0 -94
  51. package/src/components/keypad/keypad-pages/operators-page.tsx +0 -117
  52. package/src/components/keypad/keypad.tsx +0 -233
  53. package/src/components/keypad/mobile-keypad-internals.tsx +0 -240
  54. package/src/components/keypad/mobile-keypad.tsx +0 -24
  55. package/src/components/keypad/navigation-button.tsx +0 -127
  56. package/src/components/keypad/navigation-pad.stories.tsx +0 -26
  57. package/src/components/keypad/navigation-pad.tsx +0 -67
  58. package/src/components/keypad/shared-keys.tsx +0 -109
  59. package/src/components/keypad/utils.ts +0 -34
  60. package/src/components/keypad-context.tsx +0 -70
  61. package/src/components/prop-types.ts +0 -16
  62. package/src/components/tabbar/__tests__/tabbar.test.tsx +0 -105
  63. package/src/components/tabbar/icons.tsx +0 -122
  64. package/src/components/tabbar/index.ts +0 -1
  65. package/src/components/tabbar/item.tsx +0 -146
  66. package/src/components/tabbar/tabbar.stories.tsx +0 -83
  67. package/src/components/tabbar/tabbar.tsx +0 -65
  68. package/src/data/key-configs.ts +0 -770
  69. package/src/data/keys.ts +0 -123
  70. package/src/enums.ts +0 -27
  71. package/src/fake-react-native-web/index.ts +0 -11
  72. package/src/fake-react-native-web/text.tsx +0 -55
  73. package/src/fake-react-native-web/view.tsx +0 -91
  74. package/src/full-keypad.stories.tsx +0 -142
  75. package/src/full-mobile-input.stories.tsx +0 -115
  76. package/src/index.ts +0 -52
  77. package/src/types.ts +0 -70
  78. package/src/utils.test.ts +0 -33
  79. package/src/utils.ts +0 -61
  80. package/src/version.ts +0 -10
  81. package/tsconfig-build.json +0 -11
  82. package/tsconfig-build.tsbuildinfo +0 -1
@@ -1,20 +0,0 @@
1
- import type {StyleType} from "@khanacademy/wonder-blocks-core";
2
- import type {CSSProperties} from "aphrodite";
3
-
4
- export type AnimationStyles = {
5
- enter?: StyleType;
6
- enterActive?: StyleType;
7
- leave?: StyleType;
8
- leaveActive?: StyleType;
9
- appear?: StyleType;
10
- appearActive?: StyleType;
11
- };
12
-
13
- export type InAnimationStyles = {
14
- enter?: CSSProperties;
15
- enterActive?: CSSProperties;
16
- leave?: CSSProperties;
17
- leaveActive?: CSSProperties;
18
- appear?: CSSProperties;
19
- appearActive?: CSSProperties;
20
- };
@@ -1,97 +0,0 @@
1
- import {entries} from "@khanacademy/wonder-stuff-core";
2
- import {StyleSheet, css} from "aphrodite";
3
-
4
- import type {InAnimationStyles} from "./types";
5
- import type {StyleType} from "@khanacademy/wonder-blocks-core";
6
- import type {CSSProperties} from "aphrodite";
7
-
8
- function flatten(list?: StyleType): ReadonlyArray<CSSProperties> {
9
- const result: Array<CSSProperties> = [];
10
-
11
- if (!list) {
12
- return result;
13
- }
14
- if (Array.isArray(list)) {
15
- for (const item of list) {
16
- result.push(...flatten(item));
17
- }
18
- } else {
19
- result.push(list as any);
20
- }
21
-
22
- return result;
23
- }
24
-
25
- export function processStyleType(style?: StyleType): {
26
- className: string;
27
- style: Record<any, any>;
28
- } {
29
- const stylesheetStyles: Array<CSSProperties> = [];
30
- const inlineStyles: Array<CSSProperties> = [];
31
-
32
- if (!style) {
33
- return {
34
- style: {},
35
- className: "",
36
- };
37
- }
38
-
39
- // Check to see if we should inline all the styles for snapshot tests.
40
- const shouldInlineStyles =
41
- typeof globalThis !== "undefined" &&
42
- globalThis.SNAPSHOT_INLINE_APHRODITE;
43
-
44
- flatten(style).forEach((child) => {
45
- // Check for aphrodite internal property
46
- const _definition = (child as any)._definition;
47
- if (_definition != null) {
48
- if (shouldInlineStyles) {
49
- const def: Record<string, any> = {};
50
- // React 16 complains about invalid keys in inline styles.
51
- // It doesn't accept kebab-case in media queries and instead
52
- // prefers camelCase.
53
- for (const [key, value] of entries(_definition)) {
54
- // This regex converts all instances of -{lowercaseLetter}
55
- // to the uppercase version of that letter, without the
56
- // leading dash.
57
- def[
58
- key.replace(/-[a-z]/g, (match) =>
59
- match[1].toUpperCase(),
60
- )
61
- ] = value;
62
- }
63
- inlineStyles.push(def);
64
- } else {
65
- stylesheetStyles.push(child);
66
- }
67
- } else {
68
- inlineStyles.push(child);
69
- }
70
- });
71
-
72
- const inlineStylesObject = Object.assign({}, ...inlineStyles);
73
-
74
- // TODO(somewhatabstract): When aphrodite no longer puts "!important" on
75
- // all the styles, remove this <ADD JIRA ISSUE HERE IF THIS PASSES REVIEW>
76
- // If we're not snapshotting styles, let's create a class for the inline
77
- // styles so that they can apply to the element even with aphrodite's
78
- // use of !important.
79
- if (inlineStyles.length > 0 && !shouldInlineStyles) {
80
- const inlineStylesStyleSheet = StyleSheet.create({
81
- inlineStyles: inlineStylesObject,
82
- });
83
- stylesheetStyles.push(inlineStylesStyleSheet.inlineStyles);
84
- }
85
-
86
- return {
87
- style: shouldInlineStyles ? inlineStylesObject : {},
88
- className: css(...stylesheetStyles),
89
- };
90
- }
91
-
92
- export const createTransition = (styles: InAnimationStyles) => {
93
- // NOTE(kevinb): TypeScript infers the optional properties on `InAnimationStyles`
94
- // as `CSSProperties | undefined`. This is not compatible with `StyleSheet.create`
95
- // which expects `CSSProperties` on the object that's passed in to it.
96
- return StyleSheet.create(styles as any);
97
- };
@@ -1,176 +0,0 @@
1
- import {CursorContext} from "../cursor-contexts";
2
-
3
- import TestMathWrapper from "./test-math-wrapper";
4
-
5
- describe("Cursor context", () => {
6
- let mathField;
7
- let span;
8
-
9
- beforeEach(() => {
10
- span = document.createElement("span");
11
- document.body.appendChild(span);
12
-
13
- mathField = new TestMathWrapper(span);
14
- });
15
-
16
- afterEach(() => {
17
- document.body.removeChild(span);
18
- });
19
-
20
- it("should treat number-only expressions as non-jumpable", () => {
21
- mathField.pressKey("NUM_1");
22
- mathField.pressKey("NUM_2");
23
- const cursor = mathField.pressKey("NUM_3");
24
- expect(cursor.context).toEqual(CursorContext.NONE);
25
- });
26
-
27
- it("should treat numbers and ternary operators as non-jumpable", () => {
28
- mathField.pressKey("NUM_1");
29
- mathField.pressKey("CDOT");
30
- const cursor = mathField.pressKey("NUM_2");
31
- expect(cursor.context).toEqual(CursorContext.NONE);
32
- });
33
-
34
- describe("Before fraction", () => {
35
- it("should detect when immediately to the left", () => {
36
- const cursor = mathField.pressKey("FRAC_EXCLUSIVE");
37
- expect(cursor.context).toEqual(CursorContext.BEFORE_FRACTION);
38
- });
39
-
40
- it("should detect when numbers are between", () => {
41
- mathField.pressKey("NUM_1");
42
- mathField.pressKey("FRAC_EXCLUSIVE");
43
- mathField.pressKey("LEFT");
44
- const cursor = mathField.pressKey("LEFT");
45
- expect(cursor.context).toEqual(CursorContext.BEFORE_FRACTION);
46
- });
47
-
48
- it("should not detect when operators are between", () => {
49
- mathField.pressKey("NUM_1");
50
- mathField.pressKey("PLUS");
51
- mathField.pressKey("NUM_2");
52
- mathField.pressKey("FRAC_EXCLUSIVE");
53
- mathField.pressKey("LEFT");
54
- mathField.pressKey("LEFT");
55
- mathField.pressKey("LEFT");
56
- const cursor = mathField.pressKey("LEFT");
57
- expect(cursor.context).toEqual(CursorContext.NONE);
58
- });
59
-
60
- it("should not detect when parens are between", () => {
61
- mathField.pressKey("NUM_1");
62
- mathField.pressKey("LEFT_PAREN");
63
- mathField.pressKey("RIGHT_PAREN");
64
- mathField.pressKey("NUM_2");
65
- mathField.pressKey("FRAC_EXCLUSIVE");
66
- mathField.pressKey("LEFT");
67
- mathField.pressKey("LEFT");
68
- mathField.pressKey("LEFT");
69
- mathField.pressKey("LEFT");
70
- const cursor = mathField.pressKey("LEFT");
71
- expect(cursor.context).toEqual(CursorContext.NONE);
72
- });
73
- });
74
-
75
- describe("In parens", () => {
76
- it("should detect when inside empty parens", () => {
77
- mathField.pressKey("LEFT_PAREN");
78
- mathField.pressKey("RIGHT_PAREN");
79
- const cursor = mathField.pressKey("LEFT");
80
- expect(cursor.context).toEqual(CursorContext.IN_PARENS);
81
- });
82
-
83
- it("should detect when inside non-empty parens", () => {
84
- mathField.pressKey("LEFT_PAREN");
85
- mathField.pressKey("NUM_2");
86
- mathField.pressKey("RIGHT_PAREN");
87
- const cursor = mathField.pressKey("LEFT");
88
- expect(cursor.context).toEqual(CursorContext.IN_PARENS);
89
- });
90
- });
91
-
92
- describe("In superscript", () => {
93
- it("should detect when inside empty superscript", () => {
94
- mathField.pressKey("NUM_2");
95
- const cursor = mathField.pressKey("EXP");
96
- expect(cursor.context).toEqual(CursorContext.IN_SUPER_SCRIPT);
97
- });
98
-
99
- it("should detect when inside non-empty superscript", () => {
100
- mathField.pressKey("NUM_2");
101
- mathField.pressKey("EXP");
102
- const cursor = mathField.pressKey("NUM_3");
103
- expect(cursor.context).toEqual(CursorContext.IN_SUPER_SCRIPT);
104
- });
105
- });
106
-
107
- describe("In subscript", () => {
108
- it("should detect when inside empty superscript", () => {
109
- const cursor = mathField.pressKey("LOG_N");
110
- expect(cursor.context).toEqual(CursorContext.IN_SUB_SCRIPT);
111
- });
112
-
113
- it("should detect when inside non-empty superscript", () => {
114
- mathField.pressKey("LOG_N");
115
- const cursor = mathField.pressKey("NUM_2");
116
- expect(cursor.context).toEqual(CursorContext.IN_SUB_SCRIPT);
117
- });
118
- });
119
-
120
- describe("In numerator", () => {
121
- it("should detect when inside empty numerator", () => {
122
- const cursor = mathField.pressKey("FRAC_INCLUSIVE");
123
- expect(cursor.context).toEqual(CursorContext.IN_NUMERATOR);
124
- });
125
-
126
- it("should detect when inside non-empty numerator", () => {
127
- mathField.pressKey("FRAC_INCLUSIVE");
128
- const cursor = mathField.pressKey("NUM_2");
129
- expect(cursor.context).toEqual(CursorContext.IN_NUMERATOR);
130
- });
131
- });
132
-
133
- describe("In denominator", () => {
134
- it("should detect when inside empty denominator", () => {
135
- mathField.pressKey("FRAC_INCLUSIVE");
136
- const cursor = mathField.pressKey("RIGHT");
137
- expect(cursor.context).toEqual(CursorContext.IN_DENOMINATOR);
138
- });
139
-
140
- it("should detect when inside non-empty denominator", () => {
141
- mathField.pressKey("FRAC_INCLUSIVE");
142
- mathField.pressKey("RIGHT");
143
- const cursor = mathField.pressKey("NUM_2");
144
- expect(cursor.context).toEqual(CursorContext.IN_DENOMINATOR);
145
- });
146
- });
147
-
148
- describe("Nesting", () => {
149
- it("should defer to jumping into fraction if possible", () => {
150
- // Move inside parens, but include a fraction.
151
- mathField.pressKey("LEFT_PAREN");
152
- mathField.pressKey("NUM_2");
153
- mathField.pressKey("FRAC_EXCLUSIVE");
154
- const cursor = mathField.pressKey("LEFT");
155
- expect(cursor.context).toEqual(CursorContext.BEFORE_FRACTION);
156
- });
157
-
158
- it("should defer to the nearest parent (1)", () => {
159
- // Move inside parens, inside a superscript.
160
- mathField.pressKey("NUM_2");
161
- mathField.pressKey("EXP");
162
- mathField.pressKey("LEFT_PAREN");
163
- const cursor = mathField.pressKey("NUM_3");
164
- expect(cursor.context).toEqual(CursorContext.IN_PARENS);
165
- });
166
-
167
- it("should defer to the nearest parent (2)", () => {
168
- // Nest fractions, and put cursor in the denominator of the fraction
169
- // in the numerator.
170
- mathField.pressKey("FRAC_INCLUSIVE");
171
- mathField.pressKey("FRAC_INCLUSIVE");
172
- const cursor = mathField.pressKey("RIGHT");
173
- expect(cursor.context).toEqual(CursorContext.IN_DENOMINATOR);
174
- });
175
- });
176
- });
@@ -1,105 +0,0 @@
1
- import {CursorContext} from "../cursor-contexts";
2
- import {getCursorContext} from "../mathquill-helpers";
3
- import {createMathField} from "../mathquill-instance";
4
-
5
- describe("MathQuill Helpers", () => {
6
- describe("getCursorContext", () => {
7
- it("returns NONE for empty MathField", () => {
8
- // Arrange
9
- const mount = document.createElement("div");
10
- const mathField = createMathField(mount);
11
-
12
- // Act
13
- const context = getCursorContext(mathField);
14
-
15
- // Assert
16
- expect(context).toBe(CursorContext.NONE);
17
- });
18
-
19
- it("returns BEFORE_FRACTION when before a fraction", () => {
20
- // Arrange
21
- const mount = document.createElement("div");
22
- const mathField = createMathField(mount);
23
- // create fraction and move cursor before it
24
- mathField.cmd("\\frac");
25
- mathField.keystroke("Left");
26
-
27
- // Act
28
- const context = getCursorContext(mathField);
29
-
30
- // Assert
31
- expect(context).toBe(CursorContext.BEFORE_FRACTION);
32
- });
33
-
34
- it("returns IN_PARENS when in parenthesis", () => {
35
- // Arrange
36
- const mount = document.createElement("div");
37
- const mathField = createMathField(mount);
38
- // MQ puts you inside parens when you start a paren
39
- mathField.typedText("(");
40
-
41
- // Act
42
- const context = getCursorContext(mathField);
43
-
44
- // Assert
45
- expect(context).toBe(CursorContext.IN_PARENS);
46
- });
47
-
48
- it("returns IN_NUMERATOR when in numerator", () => {
49
- // Arrange
50
- const mount = document.createElement("div");
51
- const mathField = createMathField(mount);
52
- // MQ puts you in the numerator when making a fraction
53
- mathField.cmd("\\frac");
54
-
55
- // Act
56
- const context = getCursorContext(mathField);
57
-
58
- // Assert
59
- expect(context).toBe(CursorContext.IN_NUMERATOR);
60
- });
61
-
62
- it("returns IN_DENOMINATOR when in denominator", () => {
63
- // Arrange
64
- const mount = document.createElement("div");
65
- const mathField = createMathField(mount);
66
- // create fraction and move cursor to denominator
67
- mathField.cmd("\\frac");
68
- mathField.keystroke("Down");
69
-
70
- // Act
71
- const context = getCursorContext(mathField);
72
-
73
- // Assert
74
- expect(context).toBe(CursorContext.IN_DENOMINATOR);
75
- });
76
-
77
- it("returns IN_SUB_SCRIPT when in subscript", () => {
78
- // Arrange
79
- const mount = document.createElement("div");
80
- const mathField = createMathField(mount);
81
- // "_" triggers a subscript
82
- mathField.typedText("6_");
83
-
84
- // Act
85
- const context = getCursorContext(mathField);
86
-
87
- // Assert
88
- expect(context).toBe(CursorContext.IN_SUB_SCRIPT);
89
- });
90
-
91
- it("returns IN_SUPER_SCRIPT when in superscript", () => {
92
- // Arrange
93
- const mount = document.createElement("div");
94
- const mathField = createMathField(mount);
95
- // "^" triggers a superscript
96
- mathField.typedText("6^");
97
-
98
- // Act
99
- const context = getCursorContext(mathField);
100
-
101
- // Assert
102
- expect(context).toBe(CursorContext.IN_SUPER_SCRIPT);
103
- });
104
- });
105
- });