@pie-lib/math-input 8.1.1-next.3 → 8.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 (185) hide show
  1. package/CHANGELOG.json +17 -0
  2. package/CHANGELOG.md +1178 -0
  3. package/LICENSE.md +5 -0
  4. package/lib/horizontal-keypad.js +96 -0
  5. package/lib/horizontal-keypad.js.map +1 -0
  6. package/lib/index.js +69 -0
  7. package/lib/index.js.map +1 -0
  8. package/lib/keypad/index.js +413 -0
  9. package/lib/keypad/index.js.map +1 -0
  10. package/lib/keypad/keys-layout.js +22 -0
  11. package/lib/keypad/keys-layout.js.map +1 -0
  12. package/lib/keys/basic-operators.js +33 -0
  13. package/lib/keys/basic-operators.js.map +1 -0
  14. package/lib/keys/chars.js +12 -0
  15. package/lib/keys/chars.js.map +1 -0
  16. package/lib/keys/comparison.js +39 -0
  17. package/lib/keys/comparison.js.map +1 -0
  18. package/lib/keys/constants.js +37 -0
  19. package/lib/keys/constants.js.map +1 -0
  20. package/lib/keys/digits.js +46 -0
  21. package/lib/keys/digits.js.map +1 -0
  22. package/lib/keys/edit.js +14 -0
  23. package/lib/keys/edit.js.map +1 -0
  24. package/lib/keys/exponent.js +30 -0
  25. package/lib/keys/exponent.js.map +1 -0
  26. package/lib/keys/fractions.js +29 -0
  27. package/lib/keys/fractions.js.map +1 -0
  28. package/lib/keys/geometry.js +140 -0
  29. package/lib/keys/geometry.js.map +1 -0
  30. package/lib/keys/grades.js +259 -0
  31. package/lib/keys/grades.js.map +1 -0
  32. package/lib/keys/index.js +35 -0
  33. package/lib/keys/index.js.map +1 -0
  34. package/lib/keys/log.js +27 -0
  35. package/lib/keys/log.js.map +1 -0
  36. package/lib/keys/logic.js +19 -0
  37. package/lib/keys/logic.js.map +1 -0
  38. package/lib/keys/matrices.js +19 -0
  39. package/lib/keys/matrices.js.map +1 -0
  40. package/lib/keys/misc.js +62 -0
  41. package/lib/keys/misc.js.map +1 -0
  42. package/lib/keys/navigation.js +20 -0
  43. package/lib/keys/navigation.js.map +1 -0
  44. package/lib/keys/operators.js +15 -0
  45. package/lib/keys/operators.js.map +1 -0
  46. package/lib/keys/statistics.js +40 -0
  47. package/lib/keys/statistics.js.map +1 -0
  48. package/lib/keys/sub-sup.js +19 -0
  49. package/lib/keys/sub-sup.js.map +1 -0
  50. package/lib/keys/trigonometry.js +45 -0
  51. package/lib/keys/trigonometry.js.map +1 -0
  52. package/lib/keys/utils.js +87 -0
  53. package/lib/keys/utils.js.map +1 -0
  54. package/lib/keys/vars.js +24 -0
  55. package/lib/keys/vars.js.map +1 -0
  56. package/lib/math-input.js +141 -0
  57. package/lib/math-input.js.map +1 -0
  58. package/lib/mq/common-mq-styles.js +102 -0
  59. package/lib/mq/common-mq-styles.js.map +1 -0
  60. package/lib/mq/custom-elements.js +20 -0
  61. package/lib/mq/custom-elements.js.map +1 -0
  62. package/lib/mq/index.js +28 -0
  63. package/lib/mq/index.js.map +1 -0
  64. package/lib/mq/input.js +186 -0
  65. package/lib/mq/input.js.map +1 -0
  66. package/lib/mq/mathquill-instance.js +52 -0
  67. package/lib/mq/mathquill-instance.js.map +1 -0
  68. package/lib/mq/static.js +301 -0
  69. package/lib/mq/static.js.map +1 -0
  70. package/lib/updateSpans.js +19 -0
  71. package/lib/updateSpans.js.map +1 -0
  72. package/package.json +18 -33
  73. package/src/__tests__/horizontal-keypad.test.jsx +463 -0
  74. package/src/__tests__/index.test.js +247 -0
  75. package/src/__tests__/math-input-test.jsx +45 -0
  76. package/src/__tests__/updateSpans.test.js +297 -0
  77. package/src/horizontal-keypad.jsx +69 -0
  78. package/src/index.jsx +28 -0
  79. package/src/keypad/__tests__/index.test.jsx +25 -0
  80. package/src/keypad/__tests__/keys-layout.test.js +14 -0
  81. package/src/keypad/index.jsx +439 -0
  82. package/src/keypad/keys-layout.js +16 -0
  83. package/src/keys/__tests__/utils.test.js +57 -0
  84. package/src/keys/basic-operators.js +32 -0
  85. package/src/keys/chars.js +5 -0
  86. package/src/keys/comparison.js +28 -0
  87. package/src/keys/constants.js +35 -0
  88. package/src/keys/digits.js +40 -0
  89. package/src/keys/edit.js +3 -0
  90. package/src/keys/exponent.js +28 -0
  91. package/src/keys/fractions.js +26 -0
  92. package/src/keys/geometry.js +144 -0
  93. package/src/keys/grades.js +367 -0
  94. package/src/keys/index.js +20 -0
  95. package/src/keys/log.js +22 -0
  96. package/src/keys/logic.js +15 -0
  97. package/src/keys/matrices.js +15 -0
  98. package/src/keys/misc.js +65 -0
  99. package/src/keys/navigation.js +8 -0
  100. package/src/keys/operators.js +10 -0
  101. package/src/keys/statistics.js +38 -0
  102. package/src/keys/sub-sup.js +15 -0
  103. package/src/keys/trigonometry.js +15 -0
  104. package/src/keys/utils.js +66 -0
  105. package/src/keys/vars.js +19 -0
  106. package/src/math-input.jsx +119 -0
  107. package/src/mq/__tests__/custom-elements.test.js +342 -0
  108. package/src/mq/__tests__/input.test.jsx +40 -0
  109. package/src/mq/__tests__/mathquill-instance.test.js +67 -0
  110. package/src/mq/__tests__/static.test.jsx +33 -0
  111. package/src/mq/common-mq-styles.js +109 -0
  112. package/src/mq/custom-elements.js +11 -0
  113. package/src/mq/index.js +5 -0
  114. package/src/mq/input.jsx +166 -0
  115. package/src/mq/mathquill-instance.js +45 -0
  116. package/src/mq/static.jsx +290 -0
  117. package/src/updateSpans.js +15 -0
  118. package/dist/_virtual/_rolldown/runtime.js +0 -11
  119. package/dist/horizontal-keypad.d.ts +0 -31
  120. package/dist/horizontal-keypad.js +0 -57
  121. package/dist/index.d.ts +0 -18
  122. package/dist/index.js +0 -19
  123. package/dist/keypad/accessible-keypad.d.ts +0 -37
  124. package/dist/keypad/accessible-keypad.js +0 -614
  125. package/dist/keypad/index.d.ts +0 -2
  126. package/dist/keypad/keys-layout.d.ts +0 -15
  127. package/dist/keypad/keys-layout.js +0 -5
  128. package/dist/keypad/model.d.ts +0 -28
  129. package/dist/keypad/model.js +0 -4
  130. package/dist/keys/basic-operators.d.ts +0 -13
  131. package/dist/keys/basic-operators.js +0 -30
  132. package/dist/keys/chars.d.ts +0 -13
  133. package/dist/keys/comparison.d.ts +0 -12
  134. package/dist/keys/comparison.js +0 -32
  135. package/dist/keys/constants.d.ts +0 -12
  136. package/dist/keys/constants.js +0 -35
  137. package/dist/keys/digits.d.ts +0 -23
  138. package/dist/keys/digits.js +0 -34
  139. package/dist/keys/edit.d.ts +0 -14
  140. package/dist/keys/edit.js +0 -9
  141. package/dist/keys/exponent.d.ts +0 -12
  142. package/dist/keys/exponent.js +0 -28
  143. package/dist/keys/fractions.d.ts +0 -11
  144. package/dist/keys/fractions.js +0 -27
  145. package/dist/keys/geometry.d.ts +0 -31
  146. package/dist/keys/geometry.js +0 -127
  147. package/dist/keys/grades.d.ts +0 -17
  148. package/dist/keys/grades.js +0 -414
  149. package/dist/keys/index.d.ts +0 -14
  150. package/dist/keys/index.js +0 -50
  151. package/dist/keys/log.d.ts +0 -11
  152. package/dist/keys/log.js +0 -25
  153. package/dist/keys/logic.d.ts +0 -10
  154. package/dist/keys/logic.js +0 -13
  155. package/dist/keys/matrices.d.ts +0 -10
  156. package/dist/keys/matrices.js +0 -17
  157. package/dist/keys/misc.d.ts +0 -18
  158. package/dist/keys/misc.js +0 -60
  159. package/dist/keys/navigation.d.ts +0 -10
  160. package/dist/keys/navigation.js +0 -13
  161. package/dist/keys/operators.d.ts +0 -9
  162. package/dist/keys/operators.js +0 -11
  163. package/dist/keys/statistics.d.ts +0 -13
  164. package/dist/keys/statistics.js +0 -38
  165. package/dist/keys/sub-sup.d.ts +0 -10
  166. package/dist/keys/sub-sup.js +0 -17
  167. package/dist/keys/trigonometry.d.ts +0 -14
  168. package/dist/keys/trigonometry.js +0 -43
  169. package/dist/keys/utils.d.ts +0 -13
  170. package/dist/keys/utils.js +0 -24
  171. package/dist/keys/vars.d.ts +0 -11
  172. package/dist/keys/vars.js +0 -22
  173. package/dist/math-input.d.ts +0 -30
  174. package/dist/mq/common-mq-styles.d.ts +0 -225
  175. package/dist/mq/common-mq-styles.js +0 -54
  176. package/dist/mq/custom-elements.d.ts +0 -10
  177. package/dist/mq/custom-elements.js +0 -10
  178. package/dist/mq/index.d.ts +0 -12
  179. package/dist/mq/index.js +0 -12
  180. package/dist/mq/input.d.ts +0 -35
  181. package/dist/mq/input.js +0 -83
  182. package/dist/mq/static.d.ts +0 -43
  183. package/dist/mq/static.js +0 -142
  184. package/dist/updateSpans.d.ts +0 -10
  185. package/dist/updateSpans.js +0 -9
@@ -1,614 +0,0 @@
1
- import { baseSet as e } from "../keys/index.js";
2
- import { commonMqKeyboardStyles as t } from "../mq/common-mq-styles.js";
3
- import { getAriaLabel as n } from "./model.js";
4
- import { sortKeys as r } from "./keys-layout.js";
5
- import { flatten as i } from "@pie-element/shared-lodash";
6
- import a from "react";
7
- import o from "prop-types";
8
- import s from "@mui/material/Button";
9
- import c from "@mui/material/IconButton";
10
- import { styled as l } from "@mui/material/styles";
11
- import u from "debug";
12
- import { color as d } from "@pie-lib/render-ui";
13
- import { jsx as f, jsxs as p } from "react/jsx-runtime";
14
- //#region src/keypad/accessible-keypad.tsx
15
- var m = u("pie-lib:math-inline:keypad:a11y"), h = l("div")(() => ({
16
- ...t,
17
- width: "100%",
18
- display: "grid",
19
- gridTemplateRows: "repeat(5, minmax(40px, 60px))",
20
- gridAutoFlow: "column",
21
- border: `1px solid ${d.borderLight()}`,
22
- "&.character": {
23
- textTransform: "initial !important",
24
- gridTemplateRows: "repeat(5, minmax(40px, 50px)) !important"
25
- },
26
- "&.language": {
27
- gridTemplateRows: "repeat(4, minmax(40px, 50px)) !important",
28
- "& *": { fontFamily: "Roboto, Helvetica, Arial, sans-serif !important" }
29
- }
30
- }));
31
- l("div")(({ operator: e }) => ({
32
- flex: e ? "0 0 auto" : "1 1 0",
33
- display: "grid",
34
- gridAutoFlow: "column",
35
- gridTemplateRows: "repeat(5, minmax(44px, 56px))",
36
- gridAutoColumns: "minmax(72px, 1fr)",
37
- backgroundColor: e ? d.blueGrey300() : d.blueGrey100()
38
- }));
39
- var g = l(s, { shouldForwardProp: (e) => e !== "operator" })(({ operator: e }) => ({
40
- minWidth: "auto",
41
- borderRadius: 0,
42
- color: d.text(),
43
- backgroundColor: e ? d.blueGrey300() : d.blueGrey100(),
44
- textTransform: "none",
45
- fontSize: "1.6rem",
46
- lineHeight: 1,
47
- "&:hover": { backgroundColor: e ? d.blueGrey600() : d.blueGrey300() },
48
- "&:focus-visible": {
49
- outline: `3px solid ${d.focusCheckedBorder()}`,
50
- outlineOffset: -3,
51
- zIndex: 2
52
- }
53
- })), _ = l(c, { shouldForwardProp: (e) => e !== "operator" })(({ operator: e }) => ({
54
- minWidth: "auto",
55
- borderRadius: 0,
56
- color: d.text(),
57
- backgroundColor: e ? d.blueGrey300() : d.blueGrey100(),
58
- "&:hover": { backgroundColor: e ? d.blueGrey600() : d.blueGrey300() },
59
- "&:focus-visible": {
60
- outline: `3px solid ${d.focusCheckedBorder()}`,
61
- outlineOffset: -3,
62
- zIndex: 2
63
- },
64
- "& .icon": { height: "30px" }
65
- })), v = l("span")(() => ({
66
- pointerEvents: "none",
67
- color: d.text(),
68
- display: "inline-flex",
69
- alignItems: "center",
70
- justifyContent: "center",
71
- minHeight: 40,
72
- minWidth: 34,
73
- "& .MathJax": {
74
- fontSize: "1.45rem",
75
- lineHeight: 1.1
76
- },
77
- "& mjx-container": {
78
- overflow: "visible !important",
79
- lineHeight: 1.1
80
- },
81
- "& .tpl-root": {
82
- display: "inline-flex",
83
- alignItems: "center",
84
- justifyContent: "center",
85
- gap: 4,
86
- fontSize: "1.5rem",
87
- lineHeight: 1,
88
- minHeight: 34,
89
- fontFamily: "\"Times New Roman\", Times, serif",
90
- textTransform: "none"
91
- },
92
- "& .mq-keycap": {
93
- fontFamily: "\"STIX Two Text\", MJXZERO, MJXTEX, \"Times New Roman\", Times, serif",
94
- fontStyle: "normal"
95
- },
96
- "& .mq-keycap var": {
97
- fontFamily: "\"STIX Two Text\", MJXZERO, MJXTEX-I, \"Times New Roman\", Times, serif",
98
- fontStyle: "italic"
99
- },
100
- "& .mq-keycap .mq-operator-name": {
101
- fontFamily: "\"STIX Two Text\", MJXZERO, MJXTEX, \"Times New Roman\", Times, serif",
102
- fontStyle: "normal"
103
- },
104
- "& .tpl-fraction": {
105
- display: "inline-grid",
106
- gridTemplateRows: "auto 1px auto",
107
- justifyItems: "center",
108
- alignItems: "center",
109
- minWidth: 22
110
- },
111
- "& .tpl-frac-line": {
112
- width: "1.05em",
113
- borderTop: `2px solid ${d.text()}`,
114
- margin: "2px 0"
115
- },
116
- "& .tpl-mixed-fraction": {
117
- display: "inline-flex",
118
- alignItems: "center",
119
- gap: 3
120
- },
121
- "& .tpl-frac-cell": {
122
- display: "inline-flex",
123
- alignItems: "center",
124
- justifyContent: "center",
125
- minHeight: "0.55em"
126
- },
127
- "& .tpl-placeholder": {
128
- display: "inline-block",
129
- width: "0.42em",
130
- height: "0.76em",
131
- backgroundColor: d.secondaryLight()
132
- },
133
- "& .tpl-longdiv": {
134
- display: "inline-flex",
135
- alignItems: "center",
136
- gap: 3
137
- },
138
- "& .tpl-longdiv-radicand": {
139
- display: "inline-flex",
140
- alignItems: "center",
141
- borderTop: `2px solid ${d.text()}`,
142
- paddingTop: "0.15em",
143
- minWidth: "0.8em",
144
- justifyContent: "center"
145
- },
146
- "& .tpl-sup": {
147
- display: "inline-flex",
148
- alignItems: "flex-start"
149
- },
150
- "& .tpl-sup .tpl-placeholder": {
151
- width: "0.3em",
152
- height: "0.5em",
153
- marginLeft: "0.05em",
154
- transform: "translateY(-0.35em)"
155
- },
156
- "& .tpl-sub": {
157
- display: "inline-flex",
158
- alignItems: "flex-end"
159
- },
160
- "& .tpl-sub .tpl-placeholder": {
161
- width: "0.3em",
162
- height: "0.5em",
163
- marginLeft: "0.05em",
164
- transform: "translateY(0.3em)"
165
- },
166
- "& .tpl-root-radical": {
167
- display: "inline-flex",
168
- alignItems: "flex-start"
169
- },
170
- "& .tpl-root-sign": {
171
- fontSize: "1.15em",
172
- lineHeight: 1
173
- },
174
- "& .tpl-radicand": {
175
- borderTop: `2px solid ${d.text()}`,
176
- padding: "0.05em 0 0 0.08em",
177
- marginLeft: "0.03em"
178
- },
179
- "& .tpl-over": {
180
- display: "inline-grid",
181
- justifyItems: "center",
182
- gap: 2
183
- },
184
- "& .tpl-over-line": {
185
- display: "block",
186
- width: "1em",
187
- borderTop: `2px solid ${d.text()}`
188
- },
189
- "& .tpl-over-arrow": {
190
- display: "block",
191
- fontSize: "0.65em",
192
- lineHeight: 1
193
- },
194
- "& .tpl-over-arc": {
195
- display: "block",
196
- fontSize: "0.8em",
197
- lineHeight: 1,
198
- transform: "translateY(0.1em)"
199
- }
200
- })), y = l(s, { shouldForwardProp: (e) => e !== "operator" })(({ operator: e }) => ({
201
- minWidth: "auto",
202
- borderRadius: 0,
203
- padding: "6px",
204
- overflow: "visible",
205
- textTransform: "none",
206
- color: d.text(),
207
- backgroundColor: e ? d.blueGrey300() : d.blueGrey100(),
208
- "&:hover": { backgroundColor: e ? d.blueGrey600() : d.blueGrey300() },
209
- "&:focus-visible": {
210
- outline: `3px solid ${d.focusCheckedBorder()}`,
211
- outlineOffset: -3,
212
- zIndex: 2
213
- }
214
- })), b = {
215
- "\\theta": "θ",
216
- "\\pi": "π",
217
- "\\infty": "∞",
218
- "\\propto": "∝",
219
- "\\sin": "sin",
220
- "\\cos": "cos",
221
- "\\tan": "tan",
222
- "\\sec": "sec",
223
- "\\csc": "csc",
224
- "\\cot": "cot",
225
- "\\log": "log",
226
- "\\ln": "ln",
227
- "\\pm": "±",
228
- "\\approx": "≈",
229
- "\\napprox": "≉",
230
- "\\neq": "≠",
231
- "\\sim": "∼",
232
- "\\nsim": "≁",
233
- "\\mu": "μ",
234
- "\\Sigma": "Σ",
235
- "\\sigma": "σ",
236
- "\\parallel": "∥",
237
- "\\nparallel": "∦",
238
- "\\perp": "⟂",
239
- "\\angle": "∠",
240
- "\\measuredangle": "∡",
241
- "\\triangle": "△",
242
- "\\square": "□",
243
- "\\parallelogram": "▱",
244
- "\\odot": "⊙",
245
- "\\degree": "°",
246
- "\\cong": "≅",
247
- "\\ncong": "≇",
248
- "\\leftarrow": "←",
249
- "\\rightarrow": "→",
250
- "\\leftrightarrow": "↔",
251
- "\\le": "≤",
252
- "\\ge": "≥"
253
- }, x = new Set([
254
- "\\sin",
255
- "\\cos",
256
- "\\tan",
257
- "\\sec",
258
- "\\csc",
259
- "\\cot",
260
- "\\log",
261
- "\\ln"
262
- ]), S = new Set([
263
- "x",
264
- "y",
265
- "i",
266
- "e",
267
- "AB"
268
- ]), C = (e = "") => S.has(e) ? /* @__PURE__ */ f("var", { children: e }) : /* @__PURE__ */ f("span", { children: e }), w = (e = "") => {
269
- if (x.has(e)) return /* @__PURE__ */ f("var", {
270
- className: "mq-operator-name",
271
- children: e.replace(/^\\/, "")
272
- });
273
- let t = b[e];
274
- return t ? S.has(t) ? /* @__PURE__ */ f("var", { children: t }) : /* @__PURE__ */ f("span", { children: t }) : C(e.replace(/^\\/, "").replace(/\\(left|right)/g, "").replace(/[{}\\]/g, "").replace(/\s+/g, " ").trim());
275
- }, T = ({ short: e = !1 }) => /* @__PURE__ */ f("span", {
276
- className: "tpl-placeholder",
277
- style: e ? {
278
- width: "0.3em",
279
- height: "0.55em"
280
- } : void 0
281
- }), E = ({ body: e, marker: t }) => /* @__PURE__ */ p("span", {
282
- className: "tpl-root tpl-over mq-keycap",
283
- "aria-hidden": !0,
284
- children: [/* @__PURE__ */ f("span", {
285
- className: t,
286
- children: t === "tpl-over-line" ? "" : t === "tpl-over-arrow" ? "↔" : "◠"
287
- }), /* @__PURE__ */ f("span", { children: e })]
288
- }), D = ({ definition: e }) => {
289
- let t = e.key?.latex || "";
290
- switch (e.visualType) {
291
- case "fractionTemplate": return t === "\\frac{x}{ }" ? /* @__PURE__ */ f("span", {
292
- className: "tpl-root mq-keycap",
293
- "aria-hidden": !0,
294
- children: /* @__PURE__ */ p("span", {
295
- className: "tpl-fraction",
296
- children: [
297
- /* @__PURE__ */ f("var", { children: "x" }),
298
- /* @__PURE__ */ f("span", { className: "tpl-frac-line" }),
299
- /* @__PURE__ */ f(T, {})
300
- ]
301
- })
302
- }) : /* @__PURE__ */ f("span", {
303
- className: "tpl-root mq-keycap",
304
- "aria-hidden": !0,
305
- children: /* @__PURE__ */ p("span", {
306
- className: "tpl-fraction",
307
- children: [
308
- /* @__PURE__ */ f(T, {}),
309
- /* @__PURE__ */ f("span", { className: "tpl-frac-line" }),
310
- /* @__PURE__ */ f(T, {})
311
- ]
312
- })
313
- });
314
- case "mixedFractionTemplate": return /* @__PURE__ */ p("span", {
315
- className: "tpl-root tpl-mixed-fraction mq-keycap",
316
- "aria-hidden": !0,
317
- children: [/* @__PURE__ */ f("var", { children: "x" }), /* @__PURE__ */ p("span", {
318
- className: "tpl-fraction",
319
- style: { minWidth: "0.9em" },
320
- children: [
321
- /* @__PURE__ */ f("span", {
322
- className: "tpl-frac-cell",
323
- children: /* @__PURE__ */ f(T, { short: !0 })
324
- }),
325
- /* @__PURE__ */ f("span", { className: "tpl-frac-line" }),
326
- /* @__PURE__ */ f("span", {
327
- className: "tpl-frac-cell",
328
- children: /* @__PURE__ */ f(T, { short: !0 })
329
- })
330
- ]
331
- })]
332
- });
333
- case "squaredTemplate": return /* @__PURE__ */ p("span", {
334
- className: "tpl-root tpl-sup mq-keycap",
335
- "aria-hidden": !0,
336
- children: [/* @__PURE__ */ f("var", { children: "x" }), /* @__PURE__ */ f("span", {
337
- style: {
338
- fontSize: "0.7em",
339
- transform: "translateY(-0.25em)"
340
- },
341
- children: "2"
342
- })]
343
- });
344
- case "longdivTemplate": return /* @__PURE__ */ f("span", {
345
- className: "tpl-root mq-keycap",
346
- "aria-hidden": !0,
347
- children: /* @__PURE__ */ p("span", {
348
- className: "tpl-longdiv",
349
- children: [/* @__PURE__ */ f("span", { children: ")" }), /* @__PURE__ */ f("span", {
350
- className: "tpl-longdiv-radicand",
351
- children: /* @__PURE__ */ f(T, {})
352
- })]
353
- })
354
- });
355
- case "supTemplate": return /* @__PURE__ */ p("span", {
356
- className: "tpl-root tpl-sup mq-keycap",
357
- "aria-hidden": !0,
358
- children: [/* @__PURE__ */ f("var", { children: "x" }), /* @__PURE__ */ f(T, { short: !0 })]
359
- });
360
- case "subTemplate": return /* @__PURE__ */ p("span", {
361
- className: "tpl-root tpl-sub mq-keycap",
362
- "aria-hidden": !0,
363
- children: [/* @__PURE__ */ f("var", { children: "x" }), /* @__PURE__ */ f(T, { short: !0 })]
364
- });
365
- case "sqrtTemplate": return /* @__PURE__ */ p("span", {
366
- className: "tpl-root tpl-root-radical mq-keycap",
367
- "aria-hidden": !0,
368
- children: [/* @__PURE__ */ f("span", {
369
- className: "tpl-root-sign",
370
- children: "√"
371
- }), /* @__PURE__ */ f("span", {
372
- className: "tpl-radicand",
373
- children: /* @__PURE__ */ f(T, {})
374
- })]
375
- });
376
- case "nthRootTemplate": return /* @__PURE__ */ p("span", {
377
- className: "tpl-root tpl-root-radical mq-keycap",
378
- "aria-hidden": !0,
379
- children: [
380
- /* @__PURE__ */ f("span", {
381
- style: {
382
- fontSize: "0.55em",
383
- transform: "translate(0.15em,-0.2em)"
384
- },
385
- children: /* @__PURE__ */ f(T, { short: !0 })
386
- }),
387
- /* @__PURE__ */ f("span", {
388
- className: "tpl-root-sign",
389
- children: "√"
390
- }),
391
- /* @__PURE__ */ f("span", {
392
- className: "tpl-radicand",
393
- children: /* @__PURE__ */ f(T, {})
394
- })
395
- ]
396
- });
397
- case "parenTemplate": return /* @__PURE__ */ p("span", {
398
- className: "tpl-root mq-keycap",
399
- "aria-hidden": !0,
400
- children: [
401
- "(",
402
- /* @__PURE__ */ f(T, {}),
403
- ")"
404
- ]
405
- });
406
- case "bracketTemplate": return /* @__PURE__ */ p("span", {
407
- className: "tpl-root mq-keycap",
408
- "aria-hidden": !0,
409
- children: [
410
- "[",
411
- /* @__PURE__ */ f(T, {}),
412
- "]"
413
- ]
414
- });
415
- case "absTemplate": return /* @__PURE__ */ p("span", {
416
- className: "tpl-root mq-keycap",
417
- "aria-hidden": !0,
418
- children: [
419
- "|",
420
- /* @__PURE__ */ f(T, {}),
421
- "|"
422
- ]
423
- });
424
- case "logSubTemplate": return /* @__PURE__ */ p("span", {
425
- className: "tpl-root tpl-sub mq-keycap",
426
- "aria-hidden": !0,
427
- children: [/* @__PURE__ */ f("var", {
428
- className: "mq-operator-name",
429
- children: "log"
430
- }), /* @__PURE__ */ f(T, { short: !0 })]
431
- });
432
- case "overlineTemplate": return /* @__PURE__ */ f(E, {
433
- body: t.includes("y") ? /* @__PURE__ */ f("var", { children: "y" }) : t.includes("x") ? /* @__PURE__ */ f("var", { children: "x" }) : /* @__PURE__ */ f(T, {}),
434
- marker: "tpl-over-line"
435
- });
436
- case "overArrowTemplate": return /* @__PURE__ */ f(E, {
437
- body: /* @__PURE__ */ f(T, {}),
438
- marker: "tpl-over-arrow"
439
- });
440
- case "overBiArrowTemplate": return /* @__PURE__ */ f(E, {
441
- body: t.includes("AB") ? /* @__PURE__ */ f("var", { children: "AB" }) : /* @__PURE__ */ f(T, {}),
442
- marker: "tpl-over-arrow"
443
- });
444
- case "overArcTemplate": return /* @__PURE__ */ f(E, {
445
- body: /* @__PURE__ */ f(T, {}),
446
- marker: "tpl-over-arc"
447
- });
448
- case "symbolText": return /* @__PURE__ */ f("span", {
449
- className: "tpl-root mq-keycap",
450
- "aria-hidden": !0,
451
- children: w(t)
452
- });
453
- default: return /* @__PURE__ */ f("span", {
454
- className: "tpl-root",
455
- "aria-hidden": !0,
456
- children: e.key?.label || e.key?.write || e.key?.name
457
- });
458
- }
459
- }, O = (e) => e && e.name === "" && e.latex === "" && e.write === "", k = (e = "") => e.replace(/\$\$/g, "").replace(/^\$|\$$/g, "").trim(), A = (e) => e ? {
460
- gridTemplateColumns: `repeat(${e.columns}, minmax(min-content, 150px))`,
461
- gridTemplateRows: `repeat(${e.rows}, minmax(40px, 60px))`,
462
- gridAutoFlow: "initial"
463
- } : {}, j = class extends a.Component {
464
- static propTypes = {
465
- className: o.string,
466
- controlledKeypadMode: o.bool,
467
- baseSet: o.array,
468
- additionalKeys: o.array,
469
- layoutForKeyPad: o.object,
470
- onPress: o.func.isRequired,
471
- onFocus: o.func,
472
- noDecimal: o.bool,
473
- setKeypadInteraction: o.func,
474
- mode: o.oneOfType([o.string, o.number]),
475
- onRequestClose: o.func
476
- };
477
- static defaultProps = {
478
- baseSet: e,
479
- noDecimal: !1
480
- };
481
- constructor(e) {
482
- super(e), this.keypadRef = a.createRef(), this.buttonRefs = [], this.state = { activeIndex: 0 };
483
- }
484
- componentDidMount() {
485
- let e = this.keypadRef?.current, t = e?.closest(".main-container"), n = e?.closest(".pie-toolbar");
486
- if (this.props.controlledKeypadMode && t && n) {
487
- let e = t.getBoundingClientRect(), r = n.getBoundingClientRect(), i = e.top + e.height - (r.top + r.height);
488
- i < 0 && t && (t.style.height = `${e.height + e.top - i}px`);
489
- }
490
- e && (e.addEventListener("touchstart", this.handleKeypadInteraction, !0), e.addEventListener("mousedown", this.handleKeypadInteraction, !0));
491
- }
492
- componentWillUnmount() {
493
- let e = this.keypadRef?.current;
494
- if (this.props.controlledKeypadMode && e) {
495
- let t = e.closest(".main-container");
496
- t && (t.style.height = "unset");
497
- }
498
- e && (e.removeEventListener("touchstart", this.handleKeypadInteraction, !0), e.removeEventListener("mousedown", this.handleKeypadInteraction, !0));
499
- }
500
- handleKeypadInteraction = () => {
501
- this.props.setKeypadInteraction && this.props.setKeypadInteraction(!0);
502
- };
503
- keyIsNotAllowed = (e) => {
504
- let { noDecimal: t } = this.props;
505
- return (e.write === "." && e.label === "." || e.write === "," && e.label === ",") && t;
506
- };
507
- flowKeys = (e, t) => i([...r([...(e || []).map((e) => [...e])]), ...r([...(t || []).map((e) => [...e])])]);
508
- toRenderModel = () => {
509
- let { baseSet: e, additionalKeys: t, mode: r } = this.props;
510
- return ([
511
- "non-negative-integers",
512
- "integers",
513
- "decimals",
514
- "fractions",
515
- "item-authoring",
516
- "language"
517
- ].includes(r) ? this.flowKeys([], t || []) : this.flowKeys(e, t || [])).filter((e) => e && !O(e)).map((e) => e.latex ? {
518
- ...e,
519
- latex: k(e.latex),
520
- write: typeof e.write == "string" ? k(e.write) : e.write,
521
- label: typeof e.label == "string" ? k(e.label) : e.label
522
- } : e).map((e, t) => ({
523
- id: `${e.label || e.latex || e.name || e.command || "key"}-${t}`,
524
- ariaLabel: n(e),
525
- key: e
526
- }));
527
- };
528
- pressKey = (e) => {
529
- !e || this.keyIsNotAllowed(e.key) || (m("[pressKey]", e.id), this.props.onPress(e.key));
530
- };
531
- moveFocus = (e) => {
532
- let t = Math.max(0, Math.min(e, this.buttonRefs.length - 1));
533
- this.setState({ activeIndex: t }, () => {
534
- let e = this.buttonRefs[t];
535
- e && !e.disabled && e.focus();
536
- });
537
- };
538
- onButtonKeyDown = (e, t) => {
539
- if (e.key === "ArrowRight" || e.key === "ArrowDown") {
540
- e.preventDefault(), this.moveFocus(t + 1);
541
- return;
542
- }
543
- if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
544
- e.preventDefault(), this.moveFocus(t - 1);
545
- return;
546
- }
547
- if (e.key === "Home") {
548
- e.preventDefault(), this.moveFocus(0);
549
- return;
550
- }
551
- if (e.key === "End") {
552
- e.preventDefault(), this.moveFocus(this.buttonRefs.length - 1);
553
- return;
554
- }
555
- e.key === "Escape" && this.props.onRequestClose && (e.preventDefault(), this.props.onRequestClose());
556
- };
557
- renderKey = (e, t) => {
558
- let r = e.key, i = r.category === "operators", a = this.keyIsNotAllowed(r), o = {
559
- key: `${e.id}-${t}`,
560
- onClick: () => this.pressKey(e),
561
- onKeyDown: (e) => this.onButtonKeyDown(e, t),
562
- onFocus: () => this.setState({ activeIndex: t }),
563
- tabIndex: this.state.activeIndex === t ? 0 : -1,
564
- disabled: a,
565
- "aria-label": e.ariaLabel || n(r),
566
- ...r.actions || {},
567
- ...r.extraProps || {}
568
- };
569
- if (r.icon) {
570
- let e = r.icon ? r.icon : "div";
571
- return /* @__PURE__ */ f(_, {
572
- ...o,
573
- operator: i,
574
- children: /* @__PURE__ */ f(e, {
575
- className: "icon",
576
- "aria-hidden": "true"
577
- })
578
- });
579
- }
580
- return r.latex ? /* @__PURE__ */ f(y, {
581
- ...o,
582
- operator: i,
583
- children: /* @__PURE__ */ f(v, { children: /* @__PURE__ */ f(D, { definition: e }) })
584
- }) : /* @__PURE__ */ f(g, {
585
- ...o,
586
- operator: i,
587
- children: r.label || r.write || r.name
588
- });
589
- };
590
- render() {
591
- let { className: e, onFocus: t, layoutForKeyPad: n } = this.props;
592
- this.buttonRefs = [];
593
- let r = this.toRenderModel(), i = r.length % 5 ? 1 : 0, o = {
594
- gridTemplateColumns: `repeat(${Math.floor(r.length / 5) + i}, minmax(min-content, 150px))`,
595
- ...A(n)
596
- }, s = 0, c = (e) => {
597
- let t = s++, n = this.renderKey(e, t);
598
- return a.cloneElement(n, { ref: (e) => {
599
- this.buttonRefs[t] = e;
600
- } });
601
- };
602
- return /* @__PURE__ */ f(h, {
603
- ref: this.keypadRef,
604
- className: [e, this.props.mode].filter(Boolean).join(" "),
605
- style: o,
606
- onFocus: t,
607
- role: "grid",
608
- "aria-label": "Math keypad",
609
- children: r.map((e) => c(e))
610
- });
611
- }
612
- };
613
- //#endregion
614
- export { j as default };
@@ -1,2 +0,0 @@
1
- export { default as KeyPad } from './accessible-keypad';
2
- export { default } from './accessible-keypad';
@@ -1,15 +0,0 @@
1
- /**
2
- * @synced-from pie-lib/packages/math-input/src/keypad/keys-layout.js
3
- * @auto-generated
4
- *
5
- * This file is automatically synced from pie-elements and converted to TypeScript.
6
- * Manual edits will be overwritten on next sync.
7
- * To make changes, edit the upstream JavaScript file and run sync again.
8
- */
9
- /**
10
- * Sort additional keys.
11
- *
12
- * Expects an array of rows.
13
- * @param {} keys
14
- */
15
- export declare const sortKeys: (keys: any) => unknown[][];
@@ -1,5 +0,0 @@
1
- import { times as e, zip as t } from "@pie-element/shared-lodash";
2
- //#region src/keypad/keys-layout.ts
3
- var n = (n) => (e(5 - n.length, () => n.push([])), t.apply(null, n));
4
- //#endregion
5
- export { n as sortKeys };
@@ -1,28 +0,0 @@
1
- export type KeypadLane = 'numbers' | 'operators' | 'templates';
2
- export type KeyVisualType = 'text' | 'icon' | 'symbolText' | 'fractionTemplate' | 'mixedFractionTemplate' | 'longdivTemplate' | 'squaredTemplate' | 'supTemplate' | 'subTemplate' | 'sqrtTemplate' | 'nthRootTemplate' | 'parenTemplate' | 'bracketTemplate' | 'absTemplate' | 'logSubTemplate' | 'overlineTemplate' | 'overArrowTemplate' | 'overBiArrowTemplate' | 'overArcTemplate';
3
- export interface LegacyKey {
4
- name?: string;
5
- label?: string;
6
- latex?: string;
7
- write?: string;
8
- command?: string | string[];
9
- keystroke?: string;
10
- icon?: any;
11
- category?: string;
12
- ariaLabel?: string;
13
- actions?: Record<string, unknown>;
14
- extraProps?: Record<string, unknown>;
15
- }
16
- export interface KeyDefinition {
17
- id: string;
18
- lane: KeypadLane;
19
- visualType: KeyVisualType;
20
- ariaLabel: string;
21
- key: LegacyKey;
22
- }
23
- export declare const toColumnMajor: (rows: LegacyKey[][]) => LegacyKey[];
24
- export declare const getAriaLabel: (key: LegacyKey) => string;
25
- export declare const toDefinition: (key: LegacyKey, index: number) => KeyDefinition;
26
- export declare const buildKeyDefinitions: (orderedKeys: LegacyKey[]) => KeyDefinition[];
27
- export declare const laneDefinitions: (definitions: KeyDefinition[]) => Record<KeypadLane, KeyDefinition[]>;
28
- export declare const toLaneGrid: (items: KeyDefinition[], rowCount?: number) => (KeyDefinition | null)[][];
@@ -1,4 +0,0 @@
1
- //#region src/keypad/model.ts
2
- var e = (e) => e.ariaLabel || e.name || e.label || e.latex || "keypad action";
3
- //#endregion
4
- export { e as getAriaLabel };
@@ -1,13 +0,0 @@
1
- /**
2
- * @synced-from pie-lib/packages/math-input/src/keys/basic-operators.js
3
- * @auto-generated
4
- *
5
- * This file is automatically synced from pie-elements and converted to TypeScript.
6
- * Manual edits will be overwritten on next sync.
7
- * To make changes, edit the upstream JavaScript file and run sync again.
8
- */
9
- export declare const equals: any;
10
- export declare const plus: any;
11
- export declare const minus: any;
12
- export declare const divide: any;
13
- export declare const multiply: any;