@measured/puck 0.18.2 → 0.18.3-canary.098fdd1
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/dist/index.js +176 -165
- package/dist/index.mjs +195 -185
- package/package.json +2 -2
package/dist/index.js
CHANGED
@@ -1938,6 +1938,7 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => (input
|
|
1938
1938
|
var import_modifiers = require("@dnd-kit/dom/modifiers");
|
1939
1939
|
var import_jsx_runtime6 = require("react/jsx-runtime");
|
1940
1940
|
var SortableProvider = ({
|
1941
|
+
container,
|
1941
1942
|
children,
|
1942
1943
|
onDragStart,
|
1943
1944
|
onDragEnd,
|
@@ -1952,7 +1953,7 @@ var SortableProvider = ({
|
|
1952
1953
|
modifiers: [
|
1953
1954
|
import_modifiers.RestrictToElement.configure({
|
1954
1955
|
element() {
|
1955
|
-
return
|
1956
|
+
return container.current;
|
1956
1957
|
}
|
1957
1958
|
})
|
1958
1959
|
],
|
@@ -2126,6 +2127,7 @@ var ArrayField = ({
|
|
2126
2127
|
}
|
2127
2128
|
}, []);
|
2128
2129
|
const [isDragging, setIsDragging] = (0, import_react13.useState)(false);
|
2130
|
+
const dndContainerRef = (0, import_react13.useRef)(null);
|
2129
2131
|
const forceReadOnly = getPermissions({ item: selectedItem }).edit === false;
|
2130
2132
|
if (field.type !== "array" || !field.arrayFields) {
|
2131
2133
|
return null;
|
@@ -2141,6 +2143,7 @@ var ArrayField = ({
|
|
2141
2143
|
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
2142
2144
|
SortableProvider,
|
2143
2145
|
{
|
2146
|
+
container: dndContainerRef,
|
2144
2147
|
onDragStart: () => setIsDragging(true),
|
2145
2148
|
onDragEnd: () => setIsDragging(false),
|
2146
2149
|
onMove: (move) => {
|
@@ -2169,168 +2172,173 @@ var ArrayField = ({
|
|
2169
2172
|
hasItems: Array.isArray(value) && value.length > 0,
|
2170
2173
|
addDisabled
|
2171
2174
|
}),
|
2172
|
-
onClick: (e) => {
|
2173
|
-
e.preventDefault();
|
2174
|
-
},
|
2175
2175
|
children: [
|
2176
|
-
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
2177
|
-
|
2178
|
-
|
2179
|
-
|
2180
|
-
|
2181
|
-
|
2182
|
-
|
2183
|
-
|
2184
|
-
|
2185
|
-
|
2186
|
-
|
2176
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
2177
|
+
"div",
|
2178
|
+
{
|
2179
|
+
ref: dndContainerRef,
|
2180
|
+
className: getClassName5("inner"),
|
2181
|
+
"data-dnd-container": true,
|
2182
|
+
children: localState.arrayState.items.map((item, i) => {
|
2183
|
+
const { _arrayId = `${id}-${i}`, _originalIndex = i } = item;
|
2184
|
+
const data = Array.from(localState.value || [])[i] || {};
|
2185
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
2186
|
+
Sortable,
|
2187
2187
|
{
|
2188
|
-
|
2189
|
-
|
2190
|
-
|
2191
|
-
|
2192
|
-
|
2193
|
-
|
2194
|
-
|
2195
|
-
|
2196
|
-
|
2197
|
-
|
2198
|
-
|
2199
|
-
|
2200
|
-
|
2201
|
-
|
2202
|
-
|
2203
|
-
|
2204
|
-
|
2205
|
-
|
2206
|
-
|
2207
|
-
|
2208
|
-
|
2209
|
-
|
2210
|
-
|
2211
|
-
|
2212
|
-
|
2213
|
-
|
2188
|
+
id: _arrayId,
|
2189
|
+
index: i,
|
2190
|
+
disabled: readOnly,
|
2191
|
+
children: ({ status, ref }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
2192
|
+
"div",
|
2193
|
+
{
|
2194
|
+
ref,
|
2195
|
+
className: getClassNameItem({
|
2196
|
+
isExpanded: arrayState.openId === _arrayId,
|
2197
|
+
isDragging: status === "dragging",
|
2198
|
+
readOnly
|
2199
|
+
}),
|
2200
|
+
children: [
|
2201
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
2202
|
+
"div",
|
2203
|
+
{
|
2204
|
+
onClick: (e) => {
|
2205
|
+
if (isDragging) return;
|
2206
|
+
e.preventDefault();
|
2207
|
+
e.stopPropagation();
|
2208
|
+
if (arrayState.openId === _arrayId) {
|
2209
|
+
setUi(
|
2210
|
+
mapArrayStateToUi({
|
2211
|
+
openId: ""
|
2212
|
+
})
|
2213
|
+
);
|
2214
|
+
} else {
|
2215
|
+
setUi(
|
2216
|
+
mapArrayStateToUi({
|
2217
|
+
openId: _arrayId
|
2218
|
+
})
|
2219
|
+
);
|
2220
|
+
}
|
2221
|
+
},
|
2222
|
+
className: getClassNameItem("summary"),
|
2223
|
+
children: [
|
2224
|
+
field.getItemSummary ? field.getItemSummary(data, i) : `Item #${_originalIndex}`,
|
2225
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: getClassNameItem("rhs"), children: [
|
2226
|
+
!readOnly && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: getClassNameItem("actions"), children: [
|
2227
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: getClassNameItem("action"), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
2228
|
+
IconButton,
|
2229
|
+
{
|
2230
|
+
type: "button",
|
2231
|
+
disabled: !!addDisabled,
|
2232
|
+
onClick: (e) => {
|
2233
|
+
e.stopPropagation();
|
2234
|
+
const existingValue = [...value || []];
|
2235
|
+
existingValue.splice(
|
2236
|
+
i,
|
2237
|
+
0,
|
2238
|
+
existingValue[i]
|
2239
|
+
);
|
2240
|
+
onChange(
|
2241
|
+
existingValue,
|
2242
|
+
mapArrayStateToUi(
|
2243
|
+
regenerateArrayState(existingValue)
|
2244
|
+
)
|
2245
|
+
);
|
2246
|
+
},
|
2247
|
+
title: "Duplicate",
|
2248
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Copy, { size: 16 })
|
2249
|
+
}
|
2250
|
+
) }),
|
2251
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: getClassNameItem("action"), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
2252
|
+
IconButton,
|
2253
|
+
{
|
2254
|
+
type: "button",
|
2255
|
+
disabled: field.min !== void 0 && field.min >= localState.arrayState.items.length,
|
2256
|
+
onClick: (e) => {
|
2257
|
+
e.stopPropagation();
|
2258
|
+
const existingValue = [...value || []];
|
2259
|
+
const existingItems = [
|
2260
|
+
...arrayState.items || []
|
2261
|
+
];
|
2262
|
+
existingValue.splice(i, 1);
|
2263
|
+
existingItems.splice(i, 1);
|
2264
|
+
onChange(
|
2265
|
+
existingValue,
|
2266
|
+
mapArrayStateToUi({
|
2267
|
+
items: existingItems
|
2268
|
+
})
|
2269
|
+
);
|
2270
|
+
},
|
2271
|
+
title: "Delete",
|
2272
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Trash, { size: 16 })
|
2273
|
+
}
|
2274
|
+
) })
|
2275
|
+
] }),
|
2276
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DragIcon, {}) })
|
2277
|
+
] })
|
2278
|
+
]
|
2214
2279
|
}
|
2215
|
-
|
2216
|
-
className: getClassNameItem("
|
2217
|
-
|
2218
|
-
|
2219
|
-
|
2220
|
-
|
2221
|
-
|
2222
|
-
IconButton,
|
2223
|
-
{
|
2224
|
-
type: "button",
|
2225
|
-
disabled: !!addDisabled,
|
2226
|
-
onClick: (e) => {
|
2227
|
-
e.stopPropagation();
|
2228
|
-
const existingValue = [...value || []];
|
2229
|
-
existingValue.splice(
|
2230
|
-
i,
|
2231
|
-
0,
|
2232
|
-
existingValue[i]
|
2233
|
-
);
|
2234
|
-
onChange(
|
2235
|
-
existingValue,
|
2236
|
-
mapArrayStateToUi(
|
2237
|
-
regenerateArrayState(existingValue)
|
2238
|
-
)
|
2239
|
-
);
|
2240
|
-
},
|
2241
|
-
title: "Duplicate",
|
2242
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Copy, { size: 16 })
|
2243
|
-
}
|
2244
|
-
) }),
|
2245
|
-
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: getClassNameItem("action"), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
2246
|
-
IconButton,
|
2247
|
-
{
|
2248
|
-
type: "button",
|
2249
|
-
disabled: field.min !== void 0 && field.min >= localState.arrayState.items.length,
|
2250
|
-
onClick: (e) => {
|
2251
|
-
e.stopPropagation();
|
2252
|
-
const existingValue = [...value || []];
|
2253
|
-
const existingItems = [
|
2254
|
-
...arrayState.items || []
|
2255
|
-
];
|
2256
|
-
existingValue.splice(i, 1);
|
2257
|
-
existingItems.splice(i, 1);
|
2258
|
-
onChange(
|
2259
|
-
existingValue,
|
2260
|
-
mapArrayStateToUi({
|
2261
|
-
items: existingItems
|
2262
|
-
})
|
2263
|
-
);
|
2264
|
-
},
|
2265
|
-
title: "Delete",
|
2266
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Trash, { size: 16 })
|
2267
|
-
}
|
2268
|
-
) })
|
2269
|
-
] }),
|
2270
|
-
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DragIcon, {}) })
|
2271
|
-
] })
|
2272
|
-
]
|
2273
|
-
}
|
2274
|
-
),
|
2275
|
-
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: getClassNameItem("body"), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
2276
|
-
"fieldset",
|
2277
|
-
{
|
2278
|
-
className: getClassNameItem("fieldset"),
|
2279
|
-
onPointerDownCapture: (e) => {
|
2280
|
-
e.stopPropagation();
|
2281
|
-
},
|
2282
|
-
children: Object.keys(field.arrayFields).map((subName) => {
|
2283
|
-
const subField = field.arrayFields[subName];
|
2284
|
-
const indexName = `${name}[${i}]`;
|
2285
|
-
const subPath = `${indexName}.${subName}`;
|
2286
|
-
const localIndexName = `${localName}[${i}]`;
|
2287
|
-
const localWildcardName = `${localName}[*]`;
|
2288
|
-
const localSubPath = `${localIndexName}.${subName}`;
|
2289
|
-
const localWildcardSubPath = `${localWildcardName}.${subName}`;
|
2290
|
-
const subReadOnly = forceReadOnly ? forceReadOnly : typeof readOnlyFields[subPath] !== "undefined" ? readOnlyFields[localSubPath] : readOnlyFields[localWildcardSubPath];
|
2291
|
-
const label2 = subField.label || subName;
|
2292
|
-
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
2293
|
-
NestedFieldProvider,
|
2294
|
-
{
|
2295
|
-
name: localIndexName,
|
2296
|
-
wildcardName: localWildcardName,
|
2297
|
-
subName,
|
2298
|
-
readOnlyFields,
|
2299
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
2300
|
-
AutoFieldPrivate,
|
2301
|
-
{
|
2302
|
-
name: subPath,
|
2303
|
-
label: label2,
|
2304
|
-
id: `${_arrayId}_${subName}`,
|
2305
|
-
readOnly: subReadOnly,
|
2306
|
-
field: __spreadProps(__spreadValues({}, subField), {
|
2307
|
-
label: label2
|
2308
|
-
// May be used by custom fields
|
2309
|
-
}),
|
2310
|
-
value: data[subName],
|
2311
|
-
onChange: (val, ui) => {
|
2312
|
-
onChange(
|
2313
|
-
replace(value, i, __spreadProps(__spreadValues({}, data), {
|
2314
|
-
[subName]: val
|
2315
|
-
})),
|
2316
|
-
ui
|
2317
|
-
);
|
2318
|
-
}
|
2319
|
-
}
|
2320
|
-
)
|
2280
|
+
),
|
2281
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: getClassNameItem("body"), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
2282
|
+
"fieldset",
|
2283
|
+
{
|
2284
|
+
className: getClassNameItem("fieldset"),
|
2285
|
+
onPointerDownCapture: (e) => {
|
2286
|
+
e.stopPropagation();
|
2321
2287
|
},
|
2322
|
-
|
2323
|
-
|
2324
|
-
|
2325
|
-
|
2326
|
-
|
2327
|
-
|
2328
|
-
|
2329
|
-
|
2330
|
-
|
2331
|
-
|
2332
|
-
|
2333
|
-
|
2288
|
+
children: Object.keys(field.arrayFields).map((subName) => {
|
2289
|
+
const subField = field.arrayFields[subName];
|
2290
|
+
const indexName = `${name}[${i}]`;
|
2291
|
+
const subPath = `${indexName}.${subName}`;
|
2292
|
+
const localIndexName = `${localName}[${i}]`;
|
2293
|
+
const localWildcardName = `${localName}[*]`;
|
2294
|
+
const localSubPath = `${localIndexName}.${subName}`;
|
2295
|
+
const localWildcardSubPath = `${localWildcardName}.${subName}`;
|
2296
|
+
const subReadOnly = forceReadOnly ? forceReadOnly : typeof readOnlyFields[subPath] !== "undefined" ? readOnlyFields[localSubPath] : readOnlyFields[localWildcardSubPath];
|
2297
|
+
const label2 = subField.label || subName;
|
2298
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
2299
|
+
NestedFieldProvider,
|
2300
|
+
{
|
2301
|
+
name: localIndexName,
|
2302
|
+
wildcardName: localWildcardName,
|
2303
|
+
subName,
|
2304
|
+
readOnlyFields,
|
2305
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
2306
|
+
AutoFieldPrivate,
|
2307
|
+
{
|
2308
|
+
name: subPath,
|
2309
|
+
label: label2,
|
2310
|
+
id: `${_arrayId}_${subName}`,
|
2311
|
+
readOnly: subReadOnly,
|
2312
|
+
field: __spreadProps(__spreadValues({}, subField), {
|
2313
|
+
label: label2
|
2314
|
+
// May be used by custom fields
|
2315
|
+
}),
|
2316
|
+
value: data[subName],
|
2317
|
+
onChange: (val, ui) => {
|
2318
|
+
onChange(
|
2319
|
+
replace(value, i, __spreadProps(__spreadValues({}, data), {
|
2320
|
+
[subName]: val
|
2321
|
+
})),
|
2322
|
+
ui
|
2323
|
+
);
|
2324
|
+
}
|
2325
|
+
}
|
2326
|
+
)
|
2327
|
+
},
|
2328
|
+
subPath
|
2329
|
+
);
|
2330
|
+
})
|
2331
|
+
}
|
2332
|
+
) })
|
2333
|
+
]
|
2334
|
+
}
|
2335
|
+
)
|
2336
|
+
},
|
2337
|
+
_arrayId
|
2338
|
+
);
|
2339
|
+
})
|
2340
|
+
}
|
2341
|
+
),
|
2334
2342
|
!addDisabled && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
2335
2343
|
"button",
|
2336
2344
|
{
|
@@ -3254,10 +3262,13 @@ function AutoFieldPrivate(props) {
|
|
3254
3262
|
50,
|
3255
3263
|
{ leading: true }
|
3256
3264
|
);
|
3257
|
-
const onChangeLocal = (0, import_react21.useCallback)(
|
3258
|
-
|
3259
|
-
|
3260
|
-
|
3265
|
+
const onChangeLocal = (0, import_react21.useCallback)(
|
3266
|
+
(val, ui) => {
|
3267
|
+
setLocalValue(val);
|
3268
|
+
onChangeDb(val, ui);
|
3269
|
+
},
|
3270
|
+
[onChange]
|
3271
|
+
);
|
3261
3272
|
(0, import_react21.useEffect)(() => {
|
3262
3273
|
if (state.ui.field.focus !== props.name) {
|
3263
3274
|
setLocalValue(value);
|
@@ -5034,7 +5045,7 @@ var DragDropContextClient = ({
|
|
5034
5045
|
disableAutoScroll
|
5035
5046
|
}) => {
|
5036
5047
|
const { state, config, dispatch, resolveData } = useAppContext();
|
5037
|
-
const id = (
|
5048
|
+
const id = useSafeId();
|
5038
5049
|
const { data } = state;
|
5039
5050
|
const debouncedParamsRef = (0, import_react32.useRef)(null);
|
5040
5051
|
const tempDisableFallback = useTempDisableFallback(100);
|
@@ -5517,7 +5528,7 @@ var Drawer = ({
|
|
5517
5528
|
"Warning: The `direction` prop on Drawer is deprecated and no longer required to achieve multi-directional dragging."
|
5518
5529
|
);
|
5519
5530
|
}
|
5520
|
-
const id = (
|
5531
|
+
const id = useSafeId();
|
5521
5532
|
const { ref } = useDroppableSafe({
|
5522
5533
|
id,
|
5523
5534
|
type: "void",
|
package/dist/index.mjs
CHANGED
@@ -674,7 +674,7 @@ var IconButton = ({
|
|
674
674
|
};
|
675
675
|
|
676
676
|
// components/AutoField/fields/ArrayField/index.tsx
|
677
|
-
import { useCallback as useCallback3, useEffect as useEffect4, useState as useState7 } from "react";
|
677
|
+
import { useCallback as useCallback3, useEffect as useEffect4, useRef, useState as useState7 } from "react";
|
678
678
|
|
679
679
|
// components/DragIcon/index.tsx
|
680
680
|
init_react_import();
|
@@ -1759,6 +1759,7 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => (input
|
|
1759
1759
|
import { RestrictToElement } from "@dnd-kit/dom/modifiers";
|
1760
1760
|
import { jsx as jsx6 } from "react/jsx-runtime";
|
1761
1761
|
var SortableProvider = ({
|
1762
|
+
container,
|
1762
1763
|
children,
|
1763
1764
|
onDragStart,
|
1764
1765
|
onDragEnd,
|
@@ -1773,7 +1774,7 @@ var SortableProvider = ({
|
|
1773
1774
|
modifiers: [
|
1774
1775
|
RestrictToElement.configure({
|
1775
1776
|
element() {
|
1776
|
-
return
|
1777
|
+
return container.current;
|
1777
1778
|
}
|
1778
1779
|
})
|
1779
1780
|
],
|
@@ -1947,6 +1948,7 @@ var ArrayField = ({
|
|
1947
1948
|
}
|
1948
1949
|
}, []);
|
1949
1950
|
const [isDragging, setIsDragging] = useState7(false);
|
1951
|
+
const dndContainerRef = useRef(null);
|
1950
1952
|
const forceReadOnly = getPermissions({ item: selectedItem }).edit === false;
|
1951
1953
|
if (field.type !== "array" || !field.arrayFields) {
|
1952
1954
|
return null;
|
@@ -1962,6 +1964,7 @@ var ArrayField = ({
|
|
1962
1964
|
children: /* @__PURE__ */ jsx8(
|
1963
1965
|
SortableProvider,
|
1964
1966
|
{
|
1967
|
+
container: dndContainerRef,
|
1965
1968
|
onDragStart: () => setIsDragging(true),
|
1966
1969
|
onDragEnd: () => setIsDragging(false),
|
1967
1970
|
onMove: (move) => {
|
@@ -1990,168 +1993,173 @@ var ArrayField = ({
|
|
1990
1993
|
hasItems: Array.isArray(value) && value.length > 0,
|
1991
1994
|
addDisabled
|
1992
1995
|
}),
|
1993
|
-
onClick: (e) => {
|
1994
|
-
e.preventDefault();
|
1995
|
-
},
|
1996
1996
|
children: [
|
1997
|
-
/* @__PURE__ */ jsx8(
|
1998
|
-
|
1999
|
-
|
2000
|
-
|
2001
|
-
|
2002
|
-
|
2003
|
-
|
2004
|
-
|
2005
|
-
|
2006
|
-
|
2007
|
-
|
1997
|
+
/* @__PURE__ */ jsx8(
|
1998
|
+
"div",
|
1999
|
+
{
|
2000
|
+
ref: dndContainerRef,
|
2001
|
+
className: getClassName5("inner"),
|
2002
|
+
"data-dnd-container": true,
|
2003
|
+
children: localState.arrayState.items.map((item, i) => {
|
2004
|
+
const { _arrayId = `${id}-${i}`, _originalIndex = i } = item;
|
2005
|
+
const data = Array.from(localState.value || [])[i] || {};
|
2006
|
+
return /* @__PURE__ */ jsx8(
|
2007
|
+
Sortable,
|
2008
2008
|
{
|
2009
|
-
|
2010
|
-
|
2011
|
-
|
2012
|
-
|
2013
|
-
|
2014
|
-
|
2015
|
-
|
2016
|
-
|
2017
|
-
|
2018
|
-
|
2019
|
-
|
2020
|
-
|
2021
|
-
|
2022
|
-
|
2023
|
-
|
2024
|
-
|
2025
|
-
|
2026
|
-
|
2027
|
-
|
2028
|
-
|
2029
|
-
|
2030
|
-
|
2031
|
-
|
2032
|
-
|
2033
|
-
|
2034
|
-
|
2009
|
+
id: _arrayId,
|
2010
|
+
index: i,
|
2011
|
+
disabled: readOnly,
|
2012
|
+
children: ({ status, ref }) => /* @__PURE__ */ jsxs3(
|
2013
|
+
"div",
|
2014
|
+
{
|
2015
|
+
ref,
|
2016
|
+
className: getClassNameItem({
|
2017
|
+
isExpanded: arrayState.openId === _arrayId,
|
2018
|
+
isDragging: status === "dragging",
|
2019
|
+
readOnly
|
2020
|
+
}),
|
2021
|
+
children: [
|
2022
|
+
/* @__PURE__ */ jsxs3(
|
2023
|
+
"div",
|
2024
|
+
{
|
2025
|
+
onClick: (e) => {
|
2026
|
+
if (isDragging) return;
|
2027
|
+
e.preventDefault();
|
2028
|
+
e.stopPropagation();
|
2029
|
+
if (arrayState.openId === _arrayId) {
|
2030
|
+
setUi(
|
2031
|
+
mapArrayStateToUi({
|
2032
|
+
openId: ""
|
2033
|
+
})
|
2034
|
+
);
|
2035
|
+
} else {
|
2036
|
+
setUi(
|
2037
|
+
mapArrayStateToUi({
|
2038
|
+
openId: _arrayId
|
2039
|
+
})
|
2040
|
+
);
|
2041
|
+
}
|
2042
|
+
},
|
2043
|
+
className: getClassNameItem("summary"),
|
2044
|
+
children: [
|
2045
|
+
field.getItemSummary ? field.getItemSummary(data, i) : `Item #${_originalIndex}`,
|
2046
|
+
/* @__PURE__ */ jsxs3("div", { className: getClassNameItem("rhs"), children: [
|
2047
|
+
!readOnly && /* @__PURE__ */ jsxs3("div", { className: getClassNameItem("actions"), children: [
|
2048
|
+
/* @__PURE__ */ jsx8("div", { className: getClassNameItem("action"), children: /* @__PURE__ */ jsx8(
|
2049
|
+
IconButton,
|
2050
|
+
{
|
2051
|
+
type: "button",
|
2052
|
+
disabled: !!addDisabled,
|
2053
|
+
onClick: (e) => {
|
2054
|
+
e.stopPropagation();
|
2055
|
+
const existingValue = [...value || []];
|
2056
|
+
existingValue.splice(
|
2057
|
+
i,
|
2058
|
+
0,
|
2059
|
+
existingValue[i]
|
2060
|
+
);
|
2061
|
+
onChange(
|
2062
|
+
existingValue,
|
2063
|
+
mapArrayStateToUi(
|
2064
|
+
regenerateArrayState(existingValue)
|
2065
|
+
)
|
2066
|
+
);
|
2067
|
+
},
|
2068
|
+
title: "Duplicate",
|
2069
|
+
children: /* @__PURE__ */ jsx8(Copy, { size: 16 })
|
2070
|
+
}
|
2071
|
+
) }),
|
2072
|
+
/* @__PURE__ */ jsx8("div", { className: getClassNameItem("action"), children: /* @__PURE__ */ jsx8(
|
2073
|
+
IconButton,
|
2074
|
+
{
|
2075
|
+
type: "button",
|
2076
|
+
disabled: field.min !== void 0 && field.min >= localState.arrayState.items.length,
|
2077
|
+
onClick: (e) => {
|
2078
|
+
e.stopPropagation();
|
2079
|
+
const existingValue = [...value || []];
|
2080
|
+
const existingItems = [
|
2081
|
+
...arrayState.items || []
|
2082
|
+
];
|
2083
|
+
existingValue.splice(i, 1);
|
2084
|
+
existingItems.splice(i, 1);
|
2085
|
+
onChange(
|
2086
|
+
existingValue,
|
2087
|
+
mapArrayStateToUi({
|
2088
|
+
items: existingItems
|
2089
|
+
})
|
2090
|
+
);
|
2091
|
+
},
|
2092
|
+
title: "Delete",
|
2093
|
+
children: /* @__PURE__ */ jsx8(Trash, { size: 16 })
|
2094
|
+
}
|
2095
|
+
) })
|
2096
|
+
] }),
|
2097
|
+
/* @__PURE__ */ jsx8("div", { children: /* @__PURE__ */ jsx8(DragIcon, {}) })
|
2098
|
+
] })
|
2099
|
+
]
|
2035
2100
|
}
|
2036
|
-
|
2037
|
-
className: getClassNameItem("
|
2038
|
-
|
2039
|
-
|
2040
|
-
|
2041
|
-
|
2042
|
-
|
2043
|
-
IconButton,
|
2044
|
-
{
|
2045
|
-
type: "button",
|
2046
|
-
disabled: !!addDisabled,
|
2047
|
-
onClick: (e) => {
|
2048
|
-
e.stopPropagation();
|
2049
|
-
const existingValue = [...value || []];
|
2050
|
-
existingValue.splice(
|
2051
|
-
i,
|
2052
|
-
0,
|
2053
|
-
existingValue[i]
|
2054
|
-
);
|
2055
|
-
onChange(
|
2056
|
-
existingValue,
|
2057
|
-
mapArrayStateToUi(
|
2058
|
-
regenerateArrayState(existingValue)
|
2059
|
-
)
|
2060
|
-
);
|
2061
|
-
},
|
2062
|
-
title: "Duplicate",
|
2063
|
-
children: /* @__PURE__ */ jsx8(Copy, { size: 16 })
|
2064
|
-
}
|
2065
|
-
) }),
|
2066
|
-
/* @__PURE__ */ jsx8("div", { className: getClassNameItem("action"), children: /* @__PURE__ */ jsx8(
|
2067
|
-
IconButton,
|
2068
|
-
{
|
2069
|
-
type: "button",
|
2070
|
-
disabled: field.min !== void 0 && field.min >= localState.arrayState.items.length,
|
2071
|
-
onClick: (e) => {
|
2072
|
-
e.stopPropagation();
|
2073
|
-
const existingValue = [...value || []];
|
2074
|
-
const existingItems = [
|
2075
|
-
...arrayState.items || []
|
2076
|
-
];
|
2077
|
-
existingValue.splice(i, 1);
|
2078
|
-
existingItems.splice(i, 1);
|
2079
|
-
onChange(
|
2080
|
-
existingValue,
|
2081
|
-
mapArrayStateToUi({
|
2082
|
-
items: existingItems
|
2083
|
-
})
|
2084
|
-
);
|
2085
|
-
},
|
2086
|
-
title: "Delete",
|
2087
|
-
children: /* @__PURE__ */ jsx8(Trash, { size: 16 })
|
2088
|
-
}
|
2089
|
-
) })
|
2090
|
-
] }),
|
2091
|
-
/* @__PURE__ */ jsx8("div", { children: /* @__PURE__ */ jsx8(DragIcon, {}) })
|
2092
|
-
] })
|
2093
|
-
]
|
2094
|
-
}
|
2095
|
-
),
|
2096
|
-
/* @__PURE__ */ jsx8("div", { className: getClassNameItem("body"), children: /* @__PURE__ */ jsx8(
|
2097
|
-
"fieldset",
|
2098
|
-
{
|
2099
|
-
className: getClassNameItem("fieldset"),
|
2100
|
-
onPointerDownCapture: (e) => {
|
2101
|
-
e.stopPropagation();
|
2102
|
-
},
|
2103
|
-
children: Object.keys(field.arrayFields).map((subName) => {
|
2104
|
-
const subField = field.arrayFields[subName];
|
2105
|
-
const indexName = `${name}[${i}]`;
|
2106
|
-
const subPath = `${indexName}.${subName}`;
|
2107
|
-
const localIndexName = `${localName}[${i}]`;
|
2108
|
-
const localWildcardName = `${localName}[*]`;
|
2109
|
-
const localSubPath = `${localIndexName}.${subName}`;
|
2110
|
-
const localWildcardSubPath = `${localWildcardName}.${subName}`;
|
2111
|
-
const subReadOnly = forceReadOnly ? forceReadOnly : typeof readOnlyFields[subPath] !== "undefined" ? readOnlyFields[localSubPath] : readOnlyFields[localWildcardSubPath];
|
2112
|
-
const label2 = subField.label || subName;
|
2113
|
-
return /* @__PURE__ */ jsx8(
|
2114
|
-
NestedFieldProvider,
|
2115
|
-
{
|
2116
|
-
name: localIndexName,
|
2117
|
-
wildcardName: localWildcardName,
|
2118
|
-
subName,
|
2119
|
-
readOnlyFields,
|
2120
|
-
children: /* @__PURE__ */ jsx8(
|
2121
|
-
AutoFieldPrivate,
|
2122
|
-
{
|
2123
|
-
name: subPath,
|
2124
|
-
label: label2,
|
2125
|
-
id: `${_arrayId}_${subName}`,
|
2126
|
-
readOnly: subReadOnly,
|
2127
|
-
field: __spreadProps(__spreadValues({}, subField), {
|
2128
|
-
label: label2
|
2129
|
-
// May be used by custom fields
|
2130
|
-
}),
|
2131
|
-
value: data[subName],
|
2132
|
-
onChange: (val, ui) => {
|
2133
|
-
onChange(
|
2134
|
-
replace(value, i, __spreadProps(__spreadValues({}, data), {
|
2135
|
-
[subName]: val
|
2136
|
-
})),
|
2137
|
-
ui
|
2138
|
-
);
|
2139
|
-
}
|
2140
|
-
}
|
2141
|
-
)
|
2101
|
+
),
|
2102
|
+
/* @__PURE__ */ jsx8("div", { className: getClassNameItem("body"), children: /* @__PURE__ */ jsx8(
|
2103
|
+
"fieldset",
|
2104
|
+
{
|
2105
|
+
className: getClassNameItem("fieldset"),
|
2106
|
+
onPointerDownCapture: (e) => {
|
2107
|
+
e.stopPropagation();
|
2142
2108
|
},
|
2143
|
-
|
2144
|
-
|
2145
|
-
|
2146
|
-
|
2147
|
-
|
2148
|
-
|
2149
|
-
|
2150
|
-
|
2151
|
-
|
2152
|
-
|
2153
|
-
|
2154
|
-
|
2109
|
+
children: Object.keys(field.arrayFields).map((subName) => {
|
2110
|
+
const subField = field.arrayFields[subName];
|
2111
|
+
const indexName = `${name}[${i}]`;
|
2112
|
+
const subPath = `${indexName}.${subName}`;
|
2113
|
+
const localIndexName = `${localName}[${i}]`;
|
2114
|
+
const localWildcardName = `${localName}[*]`;
|
2115
|
+
const localSubPath = `${localIndexName}.${subName}`;
|
2116
|
+
const localWildcardSubPath = `${localWildcardName}.${subName}`;
|
2117
|
+
const subReadOnly = forceReadOnly ? forceReadOnly : typeof readOnlyFields[subPath] !== "undefined" ? readOnlyFields[localSubPath] : readOnlyFields[localWildcardSubPath];
|
2118
|
+
const label2 = subField.label || subName;
|
2119
|
+
return /* @__PURE__ */ jsx8(
|
2120
|
+
NestedFieldProvider,
|
2121
|
+
{
|
2122
|
+
name: localIndexName,
|
2123
|
+
wildcardName: localWildcardName,
|
2124
|
+
subName,
|
2125
|
+
readOnlyFields,
|
2126
|
+
children: /* @__PURE__ */ jsx8(
|
2127
|
+
AutoFieldPrivate,
|
2128
|
+
{
|
2129
|
+
name: subPath,
|
2130
|
+
label: label2,
|
2131
|
+
id: `${_arrayId}_${subName}`,
|
2132
|
+
readOnly: subReadOnly,
|
2133
|
+
field: __spreadProps(__spreadValues({}, subField), {
|
2134
|
+
label: label2
|
2135
|
+
// May be used by custom fields
|
2136
|
+
}),
|
2137
|
+
value: data[subName],
|
2138
|
+
onChange: (val, ui) => {
|
2139
|
+
onChange(
|
2140
|
+
replace(value, i, __spreadProps(__spreadValues({}, data), {
|
2141
|
+
[subName]: val
|
2142
|
+
})),
|
2143
|
+
ui
|
2144
|
+
);
|
2145
|
+
}
|
2146
|
+
}
|
2147
|
+
)
|
2148
|
+
},
|
2149
|
+
subPath
|
2150
|
+
);
|
2151
|
+
})
|
2152
|
+
}
|
2153
|
+
) })
|
2154
|
+
]
|
2155
|
+
}
|
2156
|
+
)
|
2157
|
+
},
|
2158
|
+
_arrayId
|
2159
|
+
);
|
2160
|
+
})
|
2161
|
+
}
|
2162
|
+
),
|
2155
2163
|
!addDisabled && /* @__PURE__ */ jsx8(
|
2156
2164
|
"button",
|
2157
2165
|
{
|
@@ -3081,10 +3089,13 @@ function AutoFieldPrivate(props) {
|
|
3081
3089
|
50,
|
3082
3090
|
{ leading: true }
|
3083
3091
|
);
|
3084
|
-
const onChangeLocal = useCallback5(
|
3085
|
-
|
3086
|
-
|
3087
|
-
|
3092
|
+
const onChangeLocal = useCallback5(
|
3093
|
+
(val, ui) => {
|
3094
|
+
setLocalValue(val);
|
3095
|
+
onChangeDb(val, ui);
|
3096
|
+
},
|
3097
|
+
[onChange]
|
3098
|
+
);
|
3088
3099
|
useEffect9(() => {
|
3089
3100
|
if (state.ui.field.focus !== props.name) {
|
3090
3101
|
setLocalValue(value);
|
@@ -3117,7 +3128,7 @@ init_react_import();
|
|
3117
3128
|
var styles_module_default10 = { "Drawer": "_Drawer_fkqfo_1", "Drawer-draggable": "_Drawer-draggable_fkqfo_8", "Drawer-draggableBg": "_Drawer-draggableBg_fkqfo_12", "Drawer-draggableFg": "_Drawer-draggableFg_fkqfo_21", "DrawerItem-draggable": "_DrawerItem-draggable_fkqfo_25", "DrawerItem--disabled": "_DrawerItem--disabled_fkqfo_38", "DrawerItem": "_DrawerItem_fkqfo_25", "Drawer--isDraggingFrom": "_Drawer--isDraggingFrom_fkqfo_48", "DrawerItem-name": "_DrawerItem-name_fkqfo_66" };
|
3118
3129
|
|
3119
3130
|
// components/Drawer/index.tsx
|
3120
|
-
import {
|
3131
|
+
import { useMemo as useMemo9, useState as useState19 } from "react";
|
3121
3132
|
|
3122
3133
|
// components/DragDropContext/index.tsx
|
3123
3134
|
init_react_import();
|
@@ -3127,8 +3138,7 @@ import {
|
|
3127
3138
|
useCallback as useCallback11,
|
3128
3139
|
useContext as useContext7,
|
3129
3140
|
useEffect as useEffect15,
|
3130
|
-
|
3131
|
-
useRef as useRef3,
|
3141
|
+
useRef as useRef4,
|
3132
3142
|
useState as useState18
|
3133
3143
|
} from "react";
|
3134
3144
|
import { AutoScroller, defaultPreset } from "@dnd-kit/dom";
|
@@ -3141,7 +3151,7 @@ import {
|
|
3141
3151
|
useContext as useContext6,
|
3142
3152
|
useEffect as useEffect14,
|
3143
3153
|
useMemo as useMemo8,
|
3144
|
-
useRef as
|
3154
|
+
useRef as useRef3
|
3145
3155
|
} from "react";
|
3146
3156
|
|
3147
3157
|
// components/DraggableComponent/index.tsx
|
@@ -3151,7 +3161,7 @@ import {
|
|
3151
3161
|
useContext as useContext5,
|
3152
3162
|
useEffect as useEffect10,
|
3153
3163
|
useMemo as useMemo7,
|
3154
|
-
useRef,
|
3164
|
+
useRef as useRef2,
|
3155
3165
|
useState as useState14
|
3156
3166
|
} from "react";
|
3157
3167
|
|
@@ -3401,7 +3411,7 @@ var DraggableComponent = ({
|
|
3401
3411
|
}
|
3402
3412
|
});
|
3403
3413
|
const thisIsDragging = status === "dragging";
|
3404
|
-
const ref =
|
3414
|
+
const ref = useRef2(null);
|
3405
3415
|
const refSetter = useCallback7(
|
3406
3416
|
(el) => {
|
3407
3417
|
sortableRef(el);
|
@@ -3947,7 +3957,7 @@ var DropZoneEdit = forwardRef3(
|
|
3947
3957
|
}
|
3948
3958
|
return data.content || [];
|
3949
3959
|
}, [data, zoneCompound]);
|
3950
|
-
const ref =
|
3960
|
+
const ref = useRef3(null);
|
3951
3961
|
const acceptsTarget = useCallback10(
|
3952
3962
|
(componentType) => {
|
3953
3963
|
if (!componentType) {
|
@@ -4870,7 +4880,7 @@ function useDragListener(type, fn, deps = []) {
|
|
4870
4880
|
}
|
4871
4881
|
var AREA_CHANGE_DEBOUNCE_MS = 100;
|
4872
4882
|
var useTempDisableFallback = (timeout3) => {
|
4873
|
-
const lastFallbackDisable =
|
4883
|
+
const lastFallbackDisable = useRef4(null);
|
4874
4884
|
return useCallback11((manager) => {
|
4875
4885
|
collisionStore.setState({ fallbackEnabled: false });
|
4876
4886
|
const fallbackId = generateId();
|
@@ -4888,9 +4898,9 @@ var DragDropContextClient = ({
|
|
4888
4898
|
disableAutoScroll
|
4889
4899
|
}) => {
|
4890
4900
|
const { state, config, dispatch, resolveData } = useAppContext();
|
4891
|
-
const id =
|
4901
|
+
const id = useSafeId();
|
4892
4902
|
const { data } = state;
|
4893
|
-
const debouncedParamsRef =
|
4903
|
+
const debouncedParamsRef = useRef4(null);
|
4894
4904
|
const tempDisableFallback = useTempDisableFallback(100);
|
4895
4905
|
const [zoneStore] = useState18(
|
4896
4906
|
() => createStore3(() => ({
|
@@ -5011,7 +5021,7 @@ var DragDropContextClient = ({
|
|
5011
5021
|
const sensors = useSensors();
|
5012
5022
|
const [dragListeners, setDragListeners] = useState18({});
|
5013
5023
|
const [pathData, setPathData] = useState18();
|
5014
|
-
const dragMode =
|
5024
|
+
const dragMode = useRef4(null);
|
5015
5025
|
const registerPath = useCallback11(
|
5016
5026
|
(id2, selector, label) => {
|
5017
5027
|
const [area] = getZoneId(selector.zone);
|
@@ -5040,7 +5050,7 @@ var DragDropContextClient = ({
|
|
5040
5050
|
},
|
5041
5051
|
[data, setPathData]
|
5042
5052
|
);
|
5043
|
-
const initialSelector =
|
5053
|
+
const initialSelector = useRef4(void 0);
|
5044
5054
|
return /* @__PURE__ */ jsx23("div", { id, children: /* @__PURE__ */ jsx23(
|
5045
5055
|
dragListenerContext.Provider,
|
5046
5056
|
{
|
@@ -5371,7 +5381,7 @@ var Drawer = ({
|
|
5371
5381
|
"Warning: The `direction` prop on Drawer is deprecated and no longer required to achieve multi-directional dragging."
|
5372
5382
|
);
|
5373
5383
|
}
|
5374
|
-
const id =
|
5384
|
+
const id = useSafeId();
|
5375
5385
|
const { ref } = useDroppableSafe({
|
5376
5386
|
id,
|
5377
5387
|
type: "void",
|
@@ -5599,7 +5609,7 @@ import { useMemo as useMemo12 } from "react";
|
|
5599
5609
|
|
5600
5610
|
// lib/use-resolved-fields.ts
|
5601
5611
|
init_react_import();
|
5602
|
-
import { useCallback as useCallback13, useEffect as useEffect17, useMemo as useMemo11, useRef as
|
5612
|
+
import { useCallback as useCallback13, useEffect as useEffect17, useMemo as useMemo11, useRef as useRef6, useState as useState20 } from "react";
|
5603
5613
|
|
5604
5614
|
// lib/use-parent.ts
|
5605
5615
|
init_react_import();
|
@@ -5627,9 +5637,9 @@ var useParent = () => {
|
|
5627
5637
|
|
5628
5638
|
// lib/use-on-value-change.ts
|
5629
5639
|
init_react_import();
|
5630
|
-
import { useRef as
|
5640
|
+
import { useRef as useRef5, useEffect as useEffect16 } from "react";
|
5631
5641
|
function useOnValueChange(value, onChange, compare = Object.is, deps = []) {
|
5632
|
-
const tracked =
|
5642
|
+
const tracked = useRef5(value);
|
5633
5643
|
useEffect16(() => {
|
5634
5644
|
const oldValue = tracked.current;
|
5635
5645
|
if (!compare(value, oldValue)) {
|
@@ -5668,7 +5678,7 @@ var useResolvedFields = ({
|
|
5668
5678
|
id: selectedItem == null ? void 0 : selectedItem.props.id
|
5669
5679
|
});
|
5670
5680
|
const [fieldsLoading, setFieldsLoading] = useState20(false);
|
5671
|
-
const lastFields =
|
5681
|
+
const lastFields = useRef6(defaultFields);
|
5672
5682
|
const defaultResolveFields = (_componentData, _params) => defaultFields;
|
5673
5683
|
const componentData = useMemo11(
|
5674
5684
|
() => selectedItem ? selectedItem : { props: rootProps, readOnly: data.root.readOnly || {} },
|
@@ -6059,7 +6069,7 @@ var Components = () => {
|
|
6059
6069
|
|
6060
6070
|
// components/Puck/components/Preview/index.tsx
|
6061
6071
|
init_react_import();
|
6062
|
-
import { useCallback as useCallback14, useEffect as useEffect20, useRef as
|
6072
|
+
import { useCallback as useCallback14, useEffect as useEffect20, useRef as useRef8, useMemo as useMemo14 } from "react";
|
6063
6073
|
|
6064
6074
|
// components/AutoFrame/index.tsx
|
6065
6075
|
init_react_import();
|
@@ -6433,7 +6443,7 @@ var Preview2 = ({ id = "puck-preview" }) => {
|
|
6433
6443
|
);
|
6434
6444
|
const Frame = useMemo14(() => overrides.iframe, [overrides]);
|
6435
6445
|
const rootProps = state.data.root.props || state.data.root;
|
6436
|
-
const ref =
|
6446
|
+
const ref = useRef8(null);
|
6437
6447
|
useBubbleIframeEvents(ref);
|
6438
6448
|
const inner = state.ui.previewMode === "edit" ? /* @__PURE__ */ jsx33(
|
6439
6449
|
Page,
|
@@ -6988,7 +6998,7 @@ import {
|
|
6988
6998
|
useCallback as useCallback16,
|
6989
6999
|
useEffect as useEffect22,
|
6990
7000
|
useMemo as useMemo17,
|
6991
|
-
useRef as
|
7001
|
+
useRef as useRef9,
|
6992
7002
|
useState as useState25
|
6993
7003
|
} from "react";
|
6994
7004
|
|
@@ -7177,7 +7187,7 @@ var Canvas = () => {
|
|
7177
7187
|
const { status, iframe } = useAppContext();
|
7178
7188
|
const { dispatch, state, overrides, setUi, zoomConfig, setZoomConfig } = useAppContext();
|
7179
7189
|
const { ui } = state;
|
7180
|
-
const frameRef =
|
7190
|
+
const frameRef = useRef9(null);
|
7181
7191
|
const [showTransition, setShowTransition] = useState25(false);
|
7182
7192
|
const defaultRender = useMemo17(() => {
|
7183
7193
|
const PuckDefault = ({ children }) => /* @__PURE__ */ jsx37(Fragment13, { children });
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@measured/puck",
|
3
|
-
"version": "0.18.
|
3
|
+
"version": "0.18.3-canary.098fdd1",
|
4
4
|
"author": "Measured Corporation Ltd <hello@measured.co>",
|
5
5
|
"repository": "measuredco/puck",
|
6
6
|
"bugs": "https://github.com/measuredco/puck/issues",
|
@@ -75,7 +75,7 @@
|
|
75
75
|
"react-hotkeys-hook": "^4.6.1",
|
76
76
|
"use-debounce": "^9.0.4",
|
77
77
|
"uuid": "^9.0.1",
|
78
|
-
"zustand": "^5.
|
78
|
+
"zustand": "^4.5.6"
|
79
79
|
},
|
80
80
|
"peerDependencies": {
|
81
81
|
"react": "^17.0.0 || ^18.0.0 || ^19.0.0"
|