@pie-lib/mask-markup 3.1.3 → 4.0.0-next.37

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 (113) hide show
  1. package/dist/_virtual/_rolldown/runtime.js +4 -0
  2. package/dist/choices/choice.d.ts +28 -0
  3. package/dist/choices/choice.js +92 -0
  4. package/dist/choices/index.d.ts +29 -0
  5. package/dist/choices/index.js +59 -0
  6. package/dist/componentize.d.ts +12 -0
  7. package/dist/componentize.js +4 -0
  8. package/dist/components/blank.d.ts +45 -0
  9. package/dist/components/blank.js +273 -0
  10. package/dist/components/correct-input.d.ts +11 -0
  11. package/dist/components/dropdown.d.ts +37 -0
  12. package/dist/components/dropdown.js +311 -0
  13. package/dist/components/input.d.ts +37 -0
  14. package/dist/constructed-response.d.ts +44 -0
  15. package/dist/constructed-response.js +56 -0
  16. package/dist/customizable.d.ts +43 -0
  17. package/dist/customizable.js +8 -0
  18. package/dist/drag-in-the-blank.d.ts +47 -0
  19. package/dist/drag-in-the-blank.js +220 -0
  20. package/dist/index.d.ts +15 -0
  21. package/dist/index.js +7 -0
  22. package/dist/inline-dropdown.d.ts +44 -0
  23. package/dist/inline-dropdown.js +24 -0
  24. package/dist/keyboard-coordinates.d.ts +25 -0
  25. package/dist/keyboard-coordinates.js +49 -0
  26. package/dist/mask.d.ts +30 -0
  27. package/dist/mask.js +95 -0
  28. package/dist/node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.js +16 -0
  29. package/dist/node_modules/.bun/to-style@1.3.3/node_modules/to-style/index.js +17 -0
  30. package/dist/node_modules/.bun/to-style@1.3.3/node_modules/to-style/src/cssPrefix.js +9 -0
  31. package/dist/node_modules/.bun/to-style@1.3.3/node_modules/to-style/src/cssUnitless.js +26 -0
  32. package/dist/node_modules/.bun/to-style@1.3.3/node_modules/to-style/src/hasOwn.js +11 -0
  33. package/dist/node_modules/.bun/to-style@1.3.3/node_modules/to-style/src/isFunction.js +11 -0
  34. package/dist/node_modules/.bun/to-style@1.3.3/node_modules/to-style/src/isObject.js +11 -0
  35. package/dist/node_modules/.bun/to-style@1.3.3/node_modules/to-style/src/prefixInfo.js +24 -0
  36. package/dist/node_modules/.bun/to-style@1.3.3/node_modules/to-style/src/prefixProperties.js +32 -0
  37. package/dist/node_modules/.bun/to-style@1.3.3/node_modules/to-style/src/prefixer.js +29 -0
  38. package/dist/node_modules/.bun/to-style@1.3.3/node_modules/to-style/src/stringUtils/camelize.js +14 -0
  39. package/dist/node_modules/.bun/to-style@1.3.3/node_modules/to-style/src/stringUtils/hyphenRe.js +8 -0
  40. package/dist/node_modules/.bun/to-style@1.3.3/node_modules/to-style/src/stringUtils/hyphenate.js +12 -0
  41. package/dist/node_modules/.bun/to-style@1.3.3/node_modules/to-style/src/stringUtils/separate.js +11 -0
  42. package/dist/node_modules/.bun/to-style@1.3.3/node_modules/to-style/src/stringUtils/toLowerFirst.js +10 -0
  43. package/dist/node_modules/.bun/to-style@1.3.3/node_modules/to-style/src/stringUtils/toUpperFirst.js +10 -0
  44. package/dist/node_modules/.bun/to-style@1.3.3/node_modules/to-style/src/toStyleObject.js +55 -0
  45. package/dist/node_modules/.bun/to-style@1.3.3/node_modules/to-style/src/toStyleString.js +16 -0
  46. package/dist/serialization.d.ts +34 -0
  47. package/dist/serialization.js +132 -0
  48. package/dist/with-mask.d.ts +55 -0
  49. package/dist/with-mask.js +45 -0
  50. package/package.json +35 -19
  51. package/CHANGELOG.json +0 -17
  52. package/CHANGELOG.md +0 -1353
  53. package/LICENSE.md +0 -5
  54. package/lib/choices/choice.js +0 -138
  55. package/lib/choices/choice.js.map +0 -1
  56. package/lib/choices/index.js +0 -126
  57. package/lib/choices/index.js.map +0 -1
  58. package/lib/componentize.js +0 -21
  59. package/lib/componentize.js.map +0 -1
  60. package/lib/components/blank.js +0 -489
  61. package/lib/components/blank.js.map +0 -1
  62. package/lib/components/correct-input.js +0 -94
  63. package/lib/components/correct-input.js.map +0 -1
  64. package/lib/components/dropdown.js +0 -480
  65. package/lib/components/dropdown.js.map +0 -1
  66. package/lib/components/input.js +0 -50
  67. package/lib/components/input.js.map +0 -1
  68. package/lib/constructed-response.js +0 -101
  69. package/lib/constructed-response.js.map +0 -1
  70. package/lib/customizable.js +0 -42
  71. package/lib/customizable.js.map +0 -1
  72. package/lib/drag-in-the-blank.js +0 -363
  73. package/lib/drag-in-the-blank.js.map +0 -1
  74. package/lib/index.js +0 -55
  75. package/lib/index.js.map +0 -1
  76. package/lib/inline-dropdown.js +0 -40
  77. package/lib/inline-dropdown.js.map +0 -1
  78. package/lib/keyboard-coordinates.js +0 -156
  79. package/lib/keyboard-coordinates.js.map +0 -1
  80. package/lib/mask.js +0 -203
  81. package/lib/mask.js.map +0 -1
  82. package/lib/serialization.js +0 -261
  83. package/lib/serialization.js.map +0 -1
  84. package/lib/with-mask.js +0 -97
  85. package/lib/with-mask.js.map +0 -1
  86. package/src/__tests__/drag-in-the-blank.test.js +0 -256
  87. package/src/__tests__/index.test.js +0 -38
  88. package/src/__tests__/keyboard-coordinates.test.js +0 -202
  89. package/src/__tests__/mask.test.js +0 -479
  90. package/src/__tests__/serialization.test.js +0 -54
  91. package/src/__tests__/utils.js +0 -1
  92. package/src/__tests__/with-mask.test.js +0 -76
  93. package/src/choices/__tests__/index.test.js +0 -212
  94. package/src/choices/choice.jsx +0 -113
  95. package/src/choices/index.jsx +0 -88
  96. package/src/componentize.js +0 -13
  97. package/src/components/__tests__/blank.test.js +0 -413
  98. package/src/components/__tests__/correct-input.test.js +0 -90
  99. package/src/components/__tests__/dropdown.test.js +0 -129
  100. package/src/components/__tests__/input.test.js +0 -102
  101. package/src/components/blank.jsx +0 -504
  102. package/src/components/correct-input.jsx +0 -82
  103. package/src/components/dropdown.jsx +0 -421
  104. package/src/components/input.jsx +0 -48
  105. package/src/constructed-response.jsx +0 -87
  106. package/src/customizable.jsx +0 -34
  107. package/src/drag-in-the-blank.jsx +0 -351
  108. package/src/index.js +0 -16
  109. package/src/inline-dropdown.jsx +0 -29
  110. package/src/keyboard-coordinates.js +0 -147
  111. package/src/mask.jsx +0 -174
  112. package/src/serialization.js +0 -260
  113. package/src/with-mask.jsx +0 -75
@@ -0,0 +1,220 @@
1
+ import { withMask as e } from "./with-mask.js";
2
+ import t from "./choices/choice.js";
3
+ import n from "./choices/index.js";
4
+ import r from "./components/blank.js";
5
+ import { closestDroppableKeyboardCoordinates as i } from "./keyboard-coordinates.js";
6
+ import a from "react";
7
+ import o from "prop-types";
8
+ import { jsx as s, jsxs as c } from "react/jsx-runtime";
9
+ import { DragProvider as l } from "@pie-lib/drag";
10
+ import { DragOverlay as u, rectIntersection as d } from "@dnd-kit/core";
11
+ //#region src/drag-in-the-blank.tsx
12
+ var f = 250, p = e("blank", (e) => (t, n, i) => {
13
+ let a = t.data?.dataset || {};
14
+ if (a.component === "blank") {
15
+ let { disabled: o, duplicates: c, correctResponse: l, feedback: u, showCorrectAnswer: d, emptyResponseAreaWidth: f, emptyResponseAreaHeight: p, instanceId: m, isDragging: h, selectedItem: g, onSelectClick: _, onPlacementClick: v } = e, y = d ? l[a.id] : n[a.id], b = y && e.choices.find((e) => e.id === y);
16
+ return /* @__PURE__ */ s(r, {
17
+ correct: d || u && u[a.id],
18
+ disabled: o,
19
+ duplicates: c,
20
+ choice: b,
21
+ id: a.id,
22
+ emptyResponseAreaWidth: f,
23
+ emptyResponseAreaHeight: p,
24
+ onChange: (e, t) => {
25
+ let r = { ...n };
26
+ t === void 0 ? delete r[e] : r[e] = t, i(r);
27
+ },
28
+ instanceId: m,
29
+ isDragging: h,
30
+ selectedItem: g,
31
+ onSelectClick: _,
32
+ onPlacementClick: v
33
+ }, `${t.type}-${a.id}`);
34
+ }
35
+ }), m = class extends a.Component {
36
+ constructor(e) {
37
+ super(e), this.state = {
38
+ activeDragItem: null,
39
+ dropAnimation: void 0,
40
+ selectedItem: null
41
+ }, this.lastDragEndAt = 0;
42
+ }
43
+ static propTypes = {
44
+ markup: o.string,
45
+ layout: o.object,
46
+ choicesPosition: o.string,
47
+ choices: o.array,
48
+ value: o.object,
49
+ onChange: o.func,
50
+ duplicates: o.bool,
51
+ disabled: o.bool,
52
+ feedback: o.object,
53
+ correctResponse: o.object,
54
+ showCorrectAnswer: o.bool,
55
+ emptyResponseAreaWidth: o.oneOfType([o.string, o.number]),
56
+ emptyResponseAreaHeight: o.oneOfType([o.string, o.number]),
57
+ instanceId: o.string
58
+ };
59
+ static defaultProps = { instanceId: "drag-in-the-blank" };
60
+ handleDragStart = (e) => {
61
+ let { active: t } = e;
62
+ t?.data?.current && this.setState({
63
+ activeDragItem: t.data.current,
64
+ dropAnimation: void 0,
65
+ selectedItem: t.data.current
66
+ });
67
+ };
68
+ renderDragOverlay = () => {
69
+ let { activeDragItem: e } = this.state;
70
+ return e && e.type === "MaskBlank" ? /* @__PURE__ */ s(t, {
71
+ disabled: e.disabled,
72
+ choice: e.choice,
73
+ instanceId: e.instanceId
74
+ }) : null;
75
+ };
76
+ commitPlacement = (e, t) => {
77
+ let { onChange: n, value: r } = this.props;
78
+ if (n) {
79
+ if (t === void 0) {
80
+ if (!e.fromChoice && e.id) {
81
+ let t = { ...r };
82
+ delete t[e.id], n(t);
83
+ }
84
+ return;
85
+ }
86
+ if (e.fromChoice === !0) {
87
+ let i = { ...r };
88
+ i[t] = e.choice.id, n(i);
89
+ } else if (e.id && e.id !== t) {
90
+ let i = { ...r };
91
+ i[t] = e.choice.id, delete i[e.id], n(i);
92
+ }
93
+ }
94
+ };
95
+ handleDragEnd = (e) => {
96
+ let { active: t, over: n } = e, r = t?.data?.current, i = n?.data?.current, a = !!t && !!n && r?.type === "MaskBlank" && i?.accepts?.includes("MaskBlank");
97
+ if (this.setState({
98
+ activeDragItem: null,
99
+ dropAnimation: a ? null : void 0
100
+ }), this.cancelSelection(), this.lastDragEndAt = Date.now(), !a) return;
101
+ let o = i.toChoiceBoard === !0 ? void 0 : i.id;
102
+ this.commitPlacement(r, o);
103
+ };
104
+ onDragCancel = () => {
105
+ this.setState({
106
+ activeDragItem: null,
107
+ dropAnimation: void 0
108
+ }), this.cancelSelection(), this.lastDragEndAt = Date.now();
109
+ };
110
+ isSameItem = (e, t) => !e || !t || e.fromChoice !== t.fromChoice ? !1 : e.fromChoice ? e.choice.id === t.choice.id : e.id === t.id;
111
+ toggleItemSelection = (e) => {
112
+ this.setState((t) => ({ selectedItem: this.isSameItem(t.selectedItem, e) ? null : e }));
113
+ };
114
+ cancelSelection = () => {
115
+ this.setState({ selectedItem: null });
116
+ };
117
+ endAnyLiveKeyboardDrag = () => {
118
+ this.state.activeDragItem && document.dispatchEvent(new KeyboardEvent("keydown", {
119
+ code: "Escape",
120
+ bubbles: !0,
121
+ cancelable: !0
122
+ }));
123
+ };
124
+ placeSelectedItem = (e) => {
125
+ let { selectedItem: t } = this.state;
126
+ t && (this.commitPlacement(t, e), this.cancelSelection(), this.endAnyLiveKeyboardDrag());
127
+ };
128
+ isClickSoonAfterDragEnd = () => Date.now() - this.lastDragEndAt < f;
129
+ onItemClick = (e) => {
130
+ this.isClickSoonAfterDragEnd() || (this.endAnyLiveKeyboardDrag(), this.toggleItemSelection(e));
131
+ };
132
+ onPlacementClick = (e) => {
133
+ this.isClickSoonAfterDragEnd() || this.placeSelectedItem(e);
134
+ };
135
+ getPositionDirection = (e) => {
136
+ let t, n, r;
137
+ switch (e) {
138
+ case "left":
139
+ t = "row", r = "center";
140
+ break;
141
+ case "right":
142
+ t = "row-reverse", n = "flex-end", r = "center";
143
+ break;
144
+ case "below":
145
+ t = "column-reverse";
146
+ break;
147
+ default:
148
+ t = "column";
149
+ break;
150
+ }
151
+ return {
152
+ flexDirection: t,
153
+ justifyContent: n,
154
+ alignItems: r
155
+ };
156
+ };
157
+ render() {
158
+ let { markup: e, duplicates: t, value: r, onChange: a, choicesPosition: o, choices: f, correctResponse: m, disabled: h, feedback: g, showCorrectAnswer: _, emptyResponseAreaWidth: v, emptyResponseAreaHeight: y, layout: b, instanceId: x } = this.props, S = o || "below", C = {
159
+ display: "flex",
160
+ minWidth: "100px",
161
+ ...this.getPositionDirection(S)
162
+ };
163
+ return /* @__PURE__ */ s(l, {
164
+ onDragStart: this.handleDragStart,
165
+ onDragEnd: this.handleDragEnd,
166
+ onDragCancel: this.onDragCancel,
167
+ collisionDetection: d,
168
+ keyboardCoordinateGetter: i,
169
+ keyboardCodes: {
170
+ start: ["Space", "Enter"],
171
+ cancel: ["Escape"],
172
+ end: ["Space", "Enter"]
173
+ },
174
+ children: /* @__PURE__ */ c("div", {
175
+ ref: (e) => this.rootRef = e,
176
+ style: C,
177
+ children: [
178
+ /* @__PURE__ */ s(n, {
179
+ choicePosition: S,
180
+ choices: f,
181
+ value: r,
182
+ duplicates: t,
183
+ disabled: h,
184
+ instanceId: x,
185
+ selectedItem: this.state.selectedItem,
186
+ onSelectClick: this.onItemClick,
187
+ onPlacementClick: this.onPlacementClick
188
+ }),
189
+ /* @__PURE__ */ s(p, {
190
+ elementType: "drag-in-the-blank",
191
+ markup: e,
192
+ layout: b,
193
+ value: r,
194
+ choices: f,
195
+ onChange: a,
196
+ disabled: h,
197
+ duplicates: t,
198
+ feedback: g,
199
+ correctResponse: m,
200
+ showCorrectAnswer: _,
201
+ emptyResponseAreaWidth: v,
202
+ emptyResponseAreaHeight: y,
203
+ instanceId: x,
204
+ isDragging: !!this.state.activeDragItem,
205
+ selectedItem: this.state.selectedItem,
206
+ onSelectClick: this.onItemClick,
207
+ onPlacementClick: this.onPlacementClick
208
+ }),
209
+ /* @__PURE__ */ s(u, {
210
+ style: { pointerEvents: "none" },
211
+ dropAnimation: this.state.dropAnimation,
212
+ children: this.renderDragOverlay()
213
+ })
214
+ ]
215
+ })
216
+ });
217
+ }
218
+ };
219
+ //#endregion
220
+ export { m as default };
@@ -0,0 +1,15 @@
1
+ /**
2
+ * @synced-from pie-lib/packages/mask-markup/src/index.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
+ import { buildLayoutFromMarkup, withMask } from './with-mask.js';
10
+ import DragInTheBlank from './drag-in-the-blank.js';
11
+ import ConstructedResponse from './constructed-response.js';
12
+ import Customizable from './customizable.js';
13
+ import InlineDropdown from './inline-dropdown.js';
14
+ import componentize from './componentize.js';
15
+ export { withMask, buildLayoutFromMarkup, DragInTheBlank, ConstructedResponse, InlineDropdown, componentize, Customizable, };
package/dist/index.js ADDED
@@ -0,0 +1,7 @@
1
+ import e from "./componentize.js";
2
+ import { buildLayoutFromMarkup as t, withMask as n } from "./with-mask.js";
3
+ import r from "./drag-in-the-blank.js";
4
+ import i from "./constructed-response.js";
5
+ import a from "./customizable.js";
6
+ import o from "./inline-dropdown.js";
7
+ export { i as ConstructedResponse, a as Customizable, r as DragInTheBlank, o as InlineDropdown, t as buildLayoutFromMarkup, e as componentize, n as withMask };
@@ -0,0 +1,44 @@
1
+ /**
2
+ * @synced-from pie-lib/packages/mask-markup/src/inline-dropdown.jsx
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
+ import React from 'react';
10
+ declare const _default: {
11
+ new (props: any): {
12
+ componentDidUpdate(prevProps: any): void;
13
+ render(): React.JSX.Element;
14
+ context: unknown;
15
+ setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<{}>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
16
+ forceUpdate(callback?: (() => void) | undefined): void;
17
+ readonly props: Readonly<{}>;
18
+ state: Readonly<{}>;
19
+ refs: {
20
+ [key: string]: React.ReactInstance;
21
+ };
22
+ componentDidMount?(): void;
23
+ shouldComponentUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): boolean;
24
+ componentWillUnmount?(): void;
25
+ componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
26
+ getSnapshotBeforeUpdate?(prevProps: Readonly<{}>, prevState: Readonly<{}>): any;
27
+ componentWillMount?(): void;
28
+ UNSAFE_componentWillMount?(): void;
29
+ componentWillReceiveProps?(nextProps: Readonly<{}>, nextContext: any): void;
30
+ UNSAFE_componentWillReceiveProps?(nextProps: Readonly<{}>, nextContext: any): void;
31
+ componentWillUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): void;
32
+ UNSAFE_componentWillUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): void;
33
+ };
34
+ propTypes: {
35
+ markup: import("prop-types").Requireable<string>;
36
+ layout: import("prop-types").Requireable<object>;
37
+ value: import("prop-types").Requireable<object>;
38
+ onChange: import("prop-types").Requireable<(...args: any[]) => any>;
39
+ customMarkMarkupComponent: import("prop-types").Requireable<(...args: any[]) => any>;
40
+ elementType: import("prop-types").Requireable<string>;
41
+ };
42
+ contextType?: React.Context<any> | undefined;
43
+ };
44
+ export default _default;
@@ -0,0 +1,24 @@
1
+ import { withMask as e } from "./with-mask.js";
2
+ import t from "./components/dropdown.js";
3
+ import "react";
4
+ import { jsx as n } from "react/jsx-runtime";
5
+ //#region src/inline-dropdown.tsx
6
+ var r = e("dropdown", (e) => (r, i, a) => {
7
+ let o = r.data && r.data.dataset || {};
8
+ if (o.component === "dropdown") {
9
+ let { choices: s, disabled: c, feedback: l, showCorrectAnswer: u } = e, d = s && s[o.id] && s[o.id].find((e) => e.correct), f = u ? d && d.value : i[o.id];
10
+ return /* @__PURE__ */ n(t, {
11
+ correct: l && l[o.id] && l[o.id] === "correct",
12
+ disabled: c || u,
13
+ value: f,
14
+ correctValue: u ? d && d.label : void 0,
15
+ id: o.id,
16
+ onChange: a,
17
+ choices: s[o.id],
18
+ showCorrectAnswer: u,
19
+ singleQuery: Object.keys(s).length == 1
20
+ }, `${r.type}-dropdown-${o.id}`);
21
+ }
22
+ });
23
+ //#endregion
24
+ export { r as default };
@@ -0,0 +1,25 @@
1
+ /**
2
+ * @synced-from pie-lib/packages/mask-markup/src/keyboard-coordinates.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
+ * Custom keyboard coordinate getter for drag-in-the-blank's Tab-based placement.
11
+ *
12
+ * Tab/Shift+Tab cycle the dragged item directly onto the next/previous enabled
13
+ * droppable — a blank (`mask-blank-drop-{id}`), sorted by on-screen position
14
+ * (top-to-bottom, then left-to-right, since blanks sit inline in flowing text rather
15
+ * than a simple list) — followed by the choice board as a fixed last stop (see below
16
+ * for why the board isn't sorted alongside the blanks).
17
+ *
18
+ * Arrow keys are delegated to dnd-kit's own `defaultKeyboardCoordinateGetter`, leaving
19
+ * the existing free-form arrow-key dragging behavior completely unchanged.
20
+ */
21
+ export declare const closestDroppableKeyboardCoordinates: (event: any, { active, context, currentCoordinates }: {
22
+ active: any;
23
+ context: any;
24
+ currentCoordinates: any;
25
+ }) => any;
@@ -0,0 +1,49 @@
1
+ import { KeyboardCode as e, defaultKeyboardCoordinateGetter as t } from "@dnd-kit/core";
2
+ //#region src/keyboard-coordinates.ts
3
+ var n = "drag-in-the-blank-droppable", r = (r, { active: a, context: o, currentCoordinates: s }) => {
4
+ let { code: c } = r, l = c === e.Tab, u = c === e.Down || c === e.Up || c === e.Left || c === e.Right;
5
+ if (!l && !u) return;
6
+ if (u) return t(r, {
7
+ context: o,
8
+ currentCoordinates: s
9
+ });
10
+ r.preventDefault();
11
+ let { droppableRects: d, droppableContainers: f, collisionRect: p } = o;
12
+ if (!d || d.size === 0) return s;
13
+ let m = a?.data?.current, h = m && m.fromChoice === !1 && m.id != null ? `mask-blank-drop-${m.id}` : void 0, g = [], _;
14
+ for (let [e, t] of f) {
15
+ if (t?.disabled || e === h) continue;
16
+ let r = t?.node?.current?.getBoundingClientRect() ?? d.get(e);
17
+ if (!r) continue;
18
+ let i = {
19
+ x: r.left + r.width / 2,
20
+ y: r.top + r.height / 2
21
+ }, a = p?.height ?? 0, o = {
22
+ id: e,
23
+ rect: r,
24
+ dropPosition: {
25
+ x: r.left,
26
+ y: r.top + r.height / 2 - a / 2
27
+ },
28
+ center: i
29
+ };
30
+ e === n ? _ = o : g.push(o);
31
+ }
32
+ if (g.length === 0 && !_) return s;
33
+ let v = r.shiftKey;
34
+ g.sort((e, t) => Math.abs(e.center.y - t.center.y) > 10 ? e.center.y - t.center.y : e.center.x - t.center.x), _ && g.push(_);
35
+ let y = p ? {
36
+ x: p.left + p.width / 2,
37
+ y: p.top + p.height / 2
38
+ } : s, b = g.findIndex((e) => y.x >= e.rect.left && y.x <= e.rect.right && y.y >= e.rect.top && y.y <= e.rect.bottom);
39
+ if (b === -1) {
40
+ let e = Infinity;
41
+ for (let t = 0; t < g.length; t++) {
42
+ let n = i(s, g[t].dropPosition);
43
+ n < e && (e = n, b = t);
44
+ }
45
+ }
46
+ return g[v ? (b - 1 + g.length) % g.length : (b + 1) % g.length].dropPosition;
47
+ }, i = (e, t) => Math.sqrt((e.x - t.x) ** 2 + (e.y - t.y) ** 2);
48
+ //#endregion
49
+ export { r as closestDroppableKeyboardCoordinates };
package/dist/mask.d.ts ADDED
@@ -0,0 +1,30 @@
1
+ /**
2
+ * @synced-from pie-lib/packages/mask-markup/src/mask.jsx
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
+ import React from 'react';
10
+ import PropTypes from 'prop-types';
11
+ export declare const renderChildren: (layout: any, value: any, onChange: any, rootRenderChildren: any, parentNode: any, elementType: any) => any[] | null;
12
+ /**
13
+ * Renders a layout that uses the slate.js Value model structure.
14
+ */
15
+ export default class Mask extends React.Component {
16
+ constructor(props: any);
17
+ static propTypes: {
18
+ renderChildren: PropTypes.Requireable<(...args: any[]) => any>;
19
+ layout: PropTypes.Requireable<object>;
20
+ value: PropTypes.Requireable<object>;
21
+ onChange: PropTypes.Requireable<(...args: any[]) => any>;
22
+ elementType: PropTypes.Requireable<string>;
23
+ containerRef: PropTypes.Requireable<NonNullable<((...args: any[]) => any) | PropTypes.InferProps<{
24
+ current: PropTypes.Requireable<Element>;
25
+ }> | null | undefined>>;
26
+ };
27
+ componentDidMount(): void;
28
+ handleChange: any;
29
+ render(): React.JSX.Element;
30
+ }
package/dist/mask.js ADDED
@@ -0,0 +1,95 @@
1
+ import { MARK_TAGS as e } from "./serialization.js";
2
+ import t from "react";
3
+ import n from "prop-types";
4
+ import { get as r } from "@pie-element/shared-lodash";
5
+ import { styled as i } from "@mui/material/styles";
6
+ import { renderMath as a } from "@pie-element/shared-math-rendering-mathjax";
7
+ import { jsx as o } from "react/jsx-runtime";
8
+ //#region src/mask.tsx
9
+ var s = i("div")(({ theme: e }) => ({
10
+ paddingTop: e.spacing(.5),
11
+ paddingBottom: e.spacing(.5)
12
+ })), c = i("span")(() => ({
13
+ display: "inline-block",
14
+ width: ".75em"
15
+ })), l = ["tbody", "tr"], u = (e, t) => {
16
+ let n = t.trim() === "", r = e && e.type;
17
+ if (!(n && l.includes(r))) return t;
18
+ }, d = (e) => {
19
+ let t = e.leaves.find((e) => r(e, "marks", []).length);
20
+ return t ? t.marks : null;
21
+ }, f = (t, n, r, i, a, l) => {
22
+ if (!n) return null;
23
+ let p = [];
24
+ return (t.nodes || []).forEach((t, m) => {
25
+ let h = t.type ? `${t.type}-${m}` : `${m}`;
26
+ if (t.isMath) return p.push(/* @__PURE__ */ o("span", { dangerouslySetInnerHTML: { __html: `<math displaystyle="true">${t.nodes[0].innerHTML}</math>` } })), p;
27
+ if (i) {
28
+ let e = i(t, n, r);
29
+ if (e) {
30
+ let n = t.data?.dataset?.component === "blank";
31
+ n && p.push(/* @__PURE__ */ o(c, {}, `spacer-${m}-before`)), p.push(e), n && p.push(/* @__PURE__ */ o(c, {}, `spacer-${m}-after`));
32
+ return;
33
+ }
34
+ }
35
+ if (t.object === "text") {
36
+ let n = t.leaves.reduce((e, t) => {
37
+ let n = t.text, r = u(a, n);
38
+ return r ? e + r : e;
39
+ }, ""), r = d(t);
40
+ if (r?.length > 0) {
41
+ let t = r.map((t) => Object.keys(e).find((n) => e[n] === t.type)).filter(Boolean);
42
+ t.length > 0 ? p.push(t.reduceRight((e, t, n) => /* @__PURE__ */ o(t, { children: e }, `${h}-${t}-${n}`), n)) : p.push(n);
43
+ } else n.length > 0 && p.push(n);
44
+ } else {
45
+ let e = f(t, n, r, i, t, l);
46
+ if (t.type === "p" || t.type === "paragraph") p.push(/* @__PURE__ */ o(s, { children: e }, h));
47
+ else {
48
+ let n = t.type;
49
+ t.nodes && t.nodes.length > 0 ? p.push(/* @__PURE__ */ o(n, {
50
+ ...t.data.attributes,
51
+ children: e
52
+ }, h)) : p.push(/* @__PURE__ */ o(n, { ...t.data.attributes }, h));
53
+ }
54
+ }
55
+ }), p;
56
+ }, p = i("div")(() => ({
57
+ display: "initial",
58
+ "&:not(.MathJax) table": { borderCollapse: "collapse" },
59
+ "&:not(.MathJax) table td, &:not(.MathJax) table th": {
60
+ padding: "8px 12px",
61
+ textAlign: "left"
62
+ }
63
+ })), m = class extends t.Component {
64
+ constructor(e) {
65
+ super(e), this.internalContainerRef = t.createRef();
66
+ }
67
+ static propTypes = {
68
+ renderChildren: n.func,
69
+ layout: n.object,
70
+ value: n.object,
71
+ onChange: n.func,
72
+ elementType: n.string,
73
+ containerRef: n.oneOfType([n.func, n.shape({ current: n.instanceOf(Element) })])
74
+ };
75
+ componentDidMount() {
76
+ let e = this.props.containerRef || this.internalContainerRef;
77
+ e.current && typeof a == "function" && a(e.current);
78
+ }
79
+ handleChange = (e, t) => {
80
+ let n = {
81
+ ...this.props.value,
82
+ [e]: t
83
+ };
84
+ this.props.onChange(n);
85
+ };
86
+ render() {
87
+ let { value: e, layout: t, elementType: n, containerRef: r } = this.props, i = f(t, e, this.handleChange, this.props.renderChildren, null, n);
88
+ return /* @__PURE__ */ o(p, {
89
+ ref: r || this.internalContainerRef,
90
+ children: i
91
+ });
92
+ }
93
+ };
94
+ //#endregion
95
+ export { m as default, f as renderChildren };
@@ -0,0 +1,16 @@
1
+ //#region ../../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
2
+ function e(t) {
3
+ var n, r, i = "";
4
+ if (typeof t == "string" || typeof t == "number") i += t;
5
+ else if (typeof t == "object") if (Array.isArray(t)) {
6
+ var a = t.length;
7
+ for (n = 0; n < a; n++) t[n] && (r = e(t[n])) && (i && (i += " "), i += r);
8
+ } else for (r in t) t[r] && (i && (i += " "), i += r);
9
+ return i;
10
+ }
11
+ function t() {
12
+ for (var t, n, r = 0, i = "", a = arguments.length; r < a; r++) (t = arguments[r]) && (n = e(t)) && (i && (i += " "), i += n);
13
+ return i;
14
+ }
15
+ //#endregion
16
+ export { t as clsx, t as default };
@@ -0,0 +1,17 @@
1
+ import { __commonJSMin as e } from "../../../../../_virtual/_rolldown/runtime.js";
2
+ import { require_prefixProperties as t } from "./src/prefixProperties.js";
3
+ import { require_cssUnitless as n } from "./src/cssUnitless.js";
4
+ import { require_toStyleObject as r } from "./src/toStyleObject.js";
5
+ import { require_toStyleString as i } from "./src/toStyleString.js";
6
+ //#region ../../../node_modules/.bun/to-style@1.3.3/node_modules/to-style/index.js
7
+ var a = /* @__PURE__ */ e(((e, a) => {
8
+ a.exports = {
9
+ prefixProperties: t(),
10
+ cssUnitless: n(),
11
+ object: r(),
12
+ string: i()
13
+ };
14
+ }));
15
+ //#endregion
16
+ export default a();
17
+ export { a as require_to_style };
@@ -0,0 +1,9 @@
1
+ import { __commonJSMin as e } from "../../../../../../_virtual/_rolldown/runtime.js";
2
+ import { require_prefixer as t } from "./prefixer.js";
3
+ //#region ../../../node_modules/.bun/to-style@1.3.3/node_modules/to-style/src/cssPrefix.js
4
+ var n = /* @__PURE__ */ e(((e, n) => {
5
+ n.exports = t()();
6
+ }));
7
+ //#endregion
8
+ export default n();
9
+ export { n as require_cssPrefix };
@@ -0,0 +1,26 @@
1
+ "use exports";
2
+ import { __commonJSMin as e } from "../../../../../../_virtual/_rolldown/runtime.js";
3
+ //#region ../../../node_modules/.bun/to-style@1.3.3/node_modules/to-style/src/cssUnitless.js
4
+ var t = /* @__PURE__ */ e(((e, t) => {
5
+ t.exports = {
6
+ animation: 1,
7
+ "column-count": 1,
8
+ columns: 1,
9
+ "font-weight": 1,
10
+ opacity: 1,
11
+ "order ": 1,
12
+ "z-index": 1,
13
+ zoom: 1,
14
+ flex: 1,
15
+ "box-flex": 1,
16
+ transform: 1,
17
+ perspective: 1,
18
+ "box-pack": 1,
19
+ "box-align": 1,
20
+ colspan: 1,
21
+ rowspan: 1
22
+ };
23
+ }));
24
+ //#endregion
25
+ export default t();
26
+ export { t as require_cssUnitless };
@@ -0,0 +1,11 @@
1
+ import { __commonJSMin as e } from "../../../../../../_virtual/_rolldown/runtime.js";
2
+ //#region ../../../node_modules/.bun/to-style@1.3.3/node_modules/to-style/src/hasOwn.js
3
+ var t = /* @__PURE__ */ e(((e, t) => {
4
+ var n = Object.prototype.hasOwnProperty;
5
+ t.exports = function(e, t) {
6
+ return n.call(e, t);
7
+ };
8
+ }));
9
+ //#endregion
10
+ export default t();
11
+ export { t as require_hasOwn };
@@ -0,0 +1,11 @@
1
+ import { __commonJSMin as e } from "../../../../../../_virtual/_rolldown/runtime.js";
2
+ //#region ../../../node_modules/.bun/to-style@1.3.3/node_modules/to-style/src/isFunction.js
3
+ var t = /* @__PURE__ */ e(((e, t) => {
4
+ var n = Object.prototype.toString;
5
+ t.exports = function(e) {
6
+ return n.apply(e) === "[object Function]";
7
+ };
8
+ }));
9
+ //#endregion
10
+ export default t();
11
+ export { t as require_isFunction };
@@ -0,0 +1,11 @@
1
+ import { __commonJSMin as e } from "../../../../../../_virtual/_rolldown/runtime.js";
2
+ //#region ../../../node_modules/.bun/to-style@1.3.3/node_modules/to-style/src/isObject.js
3
+ var t = /* @__PURE__ */ e(((e, t) => {
4
+ var n = Object.prototype.toString;
5
+ t.exports = function(e) {
6
+ return !!e && n.call(e) === "[object Object]";
7
+ };
8
+ }));
9
+ //#endregion
10
+ export default t();
11
+ export { t as require_isObject };
@@ -0,0 +1,24 @@
1
+ import { __commonJSMin as e } from "../../../../../../_virtual/_rolldown/runtime.js";
2
+ import { require_toUpperFirst as t } from "./stringUtils/toUpperFirst.js";
3
+ //#region ../../../node_modules/.bun/to-style@1.3.3/node_modules/to-style/src/prefixInfo.js
4
+ var n = /* @__PURE__ */ e(((e, n) => {
5
+ var r = t(), i = /^(Moz|Webkit|Khtml|O|ms|Icab)(?=[A-Z])/, a = typeof document > "u" ? {} : document.documentElement.style;
6
+ n.exports = (function() {
7
+ var e = (function() {
8
+ for (var e in a) if (i.test(e)) return e.match(i)[0];
9
+ return "WebkitOpacity" in a ? "Webkit" : "KhtmlOpacity" in a ? "Khtml" : "";
10
+ })();
11
+ return {
12
+ style: e,
13
+ css: "-" + e.toLowerCase() + "-",
14
+ dom: {
15
+ Webkit: "WebKit",
16
+ ms: "MS",
17
+ o: "WebKit"
18
+ }[e] || r(e)
19
+ };
20
+ })();
21
+ }));
22
+ //#endregion
23
+ export default n();
24
+ export { n as require_prefixInfo };