@open-mercato/ui 0.5.1-develop.2912.8d7b1fef24 → 0.5.1-develop.2924.d13908516e
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.
- package/.turbo/turbo-build.log +1 -1
- package/dist/backend/CrudForm.js +51 -4
- package/dist/backend/CrudForm.js.map +2 -2
- package/dist/backend/crud/CollapsibleGroup.js +57 -32
- package/dist/backend/crud/CollapsibleGroup.js.map +2 -2
- package/dist/backend/crud/SortableGroupHandle.js +40 -0
- package/dist/backend/crud/SortableGroupHandle.js.map +7 -0
- package/package.json +3 -3
- package/src/backend/CrudForm.tsx +56 -5
- package/src/backend/__tests__/CrudForm.sortable.test.tsx +96 -0
- package/src/backend/crud/CollapsibleGroup.tsx +52 -30
- package/src/backend/crud/SortableGroupHandle.tsx +50 -0
- package/src/backend/crud/__tests__/SortableGroupHandle.test.tsx +87 -0
package/.turbo/turbo-build.log
CHANGED
package/dist/backend/CrudForm.js
CHANGED
|
@@ -3,7 +3,14 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
|
3
3
|
import * as React from "react";
|
|
4
4
|
import Link from "next/link";
|
|
5
5
|
import { useRouter } from "next/navigation";
|
|
6
|
-
import {
|
|
6
|
+
import {
|
|
7
|
+
DndContext,
|
|
8
|
+
closestCenter,
|
|
9
|
+
PointerSensor,
|
|
10
|
+
KeyboardSensor,
|
|
11
|
+
useSensor,
|
|
12
|
+
useSensors
|
|
13
|
+
} from "@dnd-kit/core";
|
|
7
14
|
import { SortableContext, verticalListSortingStrategy, useSortable } from "@dnd-kit/sortable";
|
|
8
15
|
import { CSS } from "@dnd-kit/utilities";
|
|
9
16
|
import { DataLoader } from "../primitives/DataLoader.js";
|
|
@@ -72,6 +79,7 @@ import { parseBooleanWithDefault } from "@open-mercato/shared/lib/boolean";
|
|
|
72
79
|
import { cn } from "@open-mercato/shared/lib/utils";
|
|
73
80
|
import { useInjectionDataWidgets } from "./injection/useInjectionDataWidgets.js";
|
|
74
81
|
import { CollapsibleGroup } from "./crud/CollapsibleGroup.js";
|
|
82
|
+
import { SortableGroupHandleProvider } from "./crud/SortableGroupHandle.js";
|
|
75
83
|
import { useGroupOrder } from "./crud/useGroupOrder.js";
|
|
76
84
|
import { InjectedField } from "./injection/InjectedField.js";
|
|
77
85
|
import { evaluateInjectedVisibility } from "./injection/visibility-utils.js";
|
|
@@ -83,6 +91,30 @@ const CRUDFORM_EXTENDED_EVENTS_ENABLED = parseBooleanWithDefault(
|
|
|
83
91
|
process.env.NEXT_PUBLIC_OM_CRUDFORM_EXTENDED_EVENTS_ENABLED,
|
|
84
92
|
true
|
|
85
93
|
);
|
|
94
|
+
function isFormControlTarget(target) {
|
|
95
|
+
if (!target || typeof target.tagName !== "string") return false;
|
|
96
|
+
const el = target;
|
|
97
|
+
const tag = el.tagName;
|
|
98
|
+
if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return true;
|
|
99
|
+
if (el.isContentEditable) return true;
|
|
100
|
+
return false;
|
|
101
|
+
}
|
|
102
|
+
function resolveActivatorEventTarget(event) {
|
|
103
|
+
const native = event.nativeEvent;
|
|
104
|
+
if (native && typeof native.target !== "undefined") return native.target;
|
|
105
|
+
return event.target ?? null;
|
|
106
|
+
}
|
|
107
|
+
class GuardedKeyboardSensor extends KeyboardSensor {
|
|
108
|
+
static {
|
|
109
|
+
this.activators = KeyboardSensor.activators.map((activator) => ({
|
|
110
|
+
eventName: activator.eventName,
|
|
111
|
+
handler: (event, options, context) => {
|
|
112
|
+
if (isFormControlTarget(resolveActivatorEventTarget(event))) return false;
|
|
113
|
+
return activator.handler(event, options, context);
|
|
114
|
+
}
|
|
115
|
+
}));
|
|
116
|
+
}
|
|
117
|
+
}
|
|
86
118
|
function resolveInternalNavigationTarget(target) {
|
|
87
119
|
if (typeof window === "undefined" || target == null) return null;
|
|
88
120
|
try {
|
|
@@ -187,14 +219,29 @@ class FieldDefinitionsManagerErrorBoundary extends React.Component {
|
|
|
187
219
|
}
|
|
188
220
|
}
|
|
189
221
|
function SortableGroupItem({ id, children, disabled }) {
|
|
190
|
-
const {
|
|
222
|
+
const {
|
|
223
|
+
attributes,
|
|
224
|
+
listeners,
|
|
225
|
+
setNodeRef,
|
|
226
|
+
setActivatorNodeRef,
|
|
227
|
+
transform,
|
|
228
|
+
transition,
|
|
229
|
+
isDragging
|
|
230
|
+
} = useSortable({ id, disabled });
|
|
191
231
|
const style = {
|
|
192
232
|
transform: CSS.Transform.toString(transform),
|
|
193
233
|
transition,
|
|
194
234
|
opacity: isDragging ? 0.5 : 1,
|
|
195
235
|
position: "relative"
|
|
196
236
|
};
|
|
197
|
-
|
|
237
|
+
const handleProps = React.useMemo(() => ({
|
|
238
|
+
ref: setActivatorNodeRef,
|
|
239
|
+
attributes,
|
|
240
|
+
listeners,
|
|
241
|
+
isDragging,
|
|
242
|
+
disabled: !!disabled
|
|
243
|
+
}), [setActivatorNodeRef, attributes, listeners, isDragging, disabled]);
|
|
244
|
+
return /* @__PURE__ */ jsx("div", { ref: setNodeRef, style, children: /* @__PURE__ */ jsx(SortableGroupHandleProvider, { value: handleProps, children }) });
|
|
198
245
|
}
|
|
199
246
|
function CrudForm({
|
|
200
247
|
schema,
|
|
@@ -1277,7 +1324,7 @@ function CrudForm({
|
|
|
1277
1324
|
);
|
|
1278
1325
|
const sortableSensors = useSensors(
|
|
1279
1326
|
useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
|
|
1280
|
-
useSensor(
|
|
1327
|
+
useSensor(GuardedKeyboardSensor)
|
|
1281
1328
|
);
|
|
1282
1329
|
const handleGroupDragEnd = React.useCallback((event) => {
|
|
1283
1330
|
const { active, over } = event;
|