@measured/puck 0.18.3-canary.154e7f7 → 0.18.3-canary.934cfae
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 +174 -163
- package/dist/index.mjs +192 -181
- package/package.json +1 -1
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);
|
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);
|
@@ -3128,7 +3139,7 @@ import {
|
|
3128
3139
|
useContext as useContext7,
|
3129
3140
|
useEffect as useEffect15,
|
3130
3141
|
useId,
|
3131
|
-
useRef as
|
3142
|
+
useRef as useRef4,
|
3132
3143
|
useState as useState18
|
3133
3144
|
} from "react";
|
3134
3145
|
import { AutoScroller, defaultPreset } from "@dnd-kit/dom";
|
@@ -3141,7 +3152,7 @@ import {
|
|
3141
3152
|
useContext as useContext6,
|
3142
3153
|
useEffect as useEffect14,
|
3143
3154
|
useMemo as useMemo8,
|
3144
|
-
useRef as
|
3155
|
+
useRef as useRef3
|
3145
3156
|
} from "react";
|
3146
3157
|
|
3147
3158
|
// components/DraggableComponent/index.tsx
|
@@ -3151,7 +3162,7 @@ import {
|
|
3151
3162
|
useContext as useContext5,
|
3152
3163
|
useEffect as useEffect10,
|
3153
3164
|
useMemo as useMemo7,
|
3154
|
-
useRef,
|
3165
|
+
useRef as useRef2,
|
3155
3166
|
useState as useState14
|
3156
3167
|
} from "react";
|
3157
3168
|
|
@@ -3401,7 +3412,7 @@ var DraggableComponent = ({
|
|
3401
3412
|
}
|
3402
3413
|
});
|
3403
3414
|
const thisIsDragging = status === "dragging";
|
3404
|
-
const ref =
|
3415
|
+
const ref = useRef2(null);
|
3405
3416
|
const refSetter = useCallback7(
|
3406
3417
|
(el) => {
|
3407
3418
|
sortableRef(el);
|
@@ -3947,7 +3958,7 @@ var DropZoneEdit = forwardRef3(
|
|
3947
3958
|
}
|
3948
3959
|
return data.content || [];
|
3949
3960
|
}, [data, zoneCompound]);
|
3950
|
-
const ref =
|
3961
|
+
const ref = useRef3(null);
|
3951
3962
|
const acceptsTarget = useCallback10(
|
3952
3963
|
(componentType) => {
|
3953
3964
|
if (!componentType) {
|
@@ -4870,7 +4881,7 @@ function useDragListener(type, fn, deps = []) {
|
|
4870
4881
|
}
|
4871
4882
|
var AREA_CHANGE_DEBOUNCE_MS = 100;
|
4872
4883
|
var useTempDisableFallback = (timeout3) => {
|
4873
|
-
const lastFallbackDisable =
|
4884
|
+
const lastFallbackDisable = useRef4(null);
|
4874
4885
|
return useCallback11((manager) => {
|
4875
4886
|
collisionStore.setState({ fallbackEnabled: false });
|
4876
4887
|
const fallbackId = generateId();
|
@@ -4890,7 +4901,7 @@ var DragDropContextClient = ({
|
|
4890
4901
|
const { state, config, dispatch, resolveData } = useAppContext();
|
4891
4902
|
const id = useId();
|
4892
4903
|
const { data } = state;
|
4893
|
-
const debouncedParamsRef =
|
4904
|
+
const debouncedParamsRef = useRef4(null);
|
4894
4905
|
const tempDisableFallback = useTempDisableFallback(100);
|
4895
4906
|
const [zoneStore] = useState18(
|
4896
4907
|
() => createStore3(() => ({
|
@@ -5011,7 +5022,7 @@ var DragDropContextClient = ({
|
|
5011
5022
|
const sensors = useSensors();
|
5012
5023
|
const [dragListeners, setDragListeners] = useState18({});
|
5013
5024
|
const [pathData, setPathData] = useState18();
|
5014
|
-
const dragMode =
|
5025
|
+
const dragMode = useRef4(null);
|
5015
5026
|
const registerPath = useCallback11(
|
5016
5027
|
(id2, selector, label) => {
|
5017
5028
|
const [area] = getZoneId(selector.zone);
|
@@ -5040,7 +5051,7 @@ var DragDropContextClient = ({
|
|
5040
5051
|
},
|
5041
5052
|
[data, setPathData]
|
5042
5053
|
);
|
5043
|
-
const initialSelector =
|
5054
|
+
const initialSelector = useRef4(void 0);
|
5044
5055
|
return /* @__PURE__ */ jsx23("div", { id, children: /* @__PURE__ */ jsx23(
|
5045
5056
|
dragListenerContext.Provider,
|
5046
5057
|
{
|
@@ -5599,7 +5610,7 @@ import { useMemo as useMemo12 } from "react";
|
|
5599
5610
|
|
5600
5611
|
// lib/use-resolved-fields.ts
|
5601
5612
|
init_react_import();
|
5602
|
-
import { useCallback as useCallback13, useEffect as useEffect17, useMemo as useMemo11, useRef as
|
5613
|
+
import { useCallback as useCallback13, useEffect as useEffect17, useMemo as useMemo11, useRef as useRef6, useState as useState20 } from "react";
|
5603
5614
|
|
5604
5615
|
// lib/use-parent.ts
|
5605
5616
|
init_react_import();
|
@@ -5627,9 +5638,9 @@ var useParent = () => {
|
|
5627
5638
|
|
5628
5639
|
// lib/use-on-value-change.ts
|
5629
5640
|
init_react_import();
|
5630
|
-
import { useRef as
|
5641
|
+
import { useRef as useRef5, useEffect as useEffect16 } from "react";
|
5631
5642
|
function useOnValueChange(value, onChange, compare = Object.is, deps = []) {
|
5632
|
-
const tracked =
|
5643
|
+
const tracked = useRef5(value);
|
5633
5644
|
useEffect16(() => {
|
5634
5645
|
const oldValue = tracked.current;
|
5635
5646
|
if (!compare(value, oldValue)) {
|
@@ -5668,7 +5679,7 @@ var useResolvedFields = ({
|
|
5668
5679
|
id: selectedItem == null ? void 0 : selectedItem.props.id
|
5669
5680
|
});
|
5670
5681
|
const [fieldsLoading, setFieldsLoading] = useState20(false);
|
5671
|
-
const lastFields =
|
5682
|
+
const lastFields = useRef6(defaultFields);
|
5672
5683
|
const defaultResolveFields = (_componentData, _params) => defaultFields;
|
5673
5684
|
const componentData = useMemo11(
|
5674
5685
|
() => selectedItem ? selectedItem : { props: rootProps, readOnly: data.root.readOnly || {} },
|
@@ -6059,7 +6070,7 @@ var Components = () => {
|
|
6059
6070
|
|
6060
6071
|
// components/Puck/components/Preview/index.tsx
|
6061
6072
|
init_react_import();
|
6062
|
-
import { useCallback as useCallback14, useEffect as useEffect20, useRef as
|
6073
|
+
import { useCallback as useCallback14, useEffect as useEffect20, useRef as useRef8, useMemo as useMemo14 } from "react";
|
6063
6074
|
|
6064
6075
|
// components/AutoFrame/index.tsx
|
6065
6076
|
init_react_import();
|
@@ -6433,7 +6444,7 @@ var Preview2 = ({ id = "puck-preview" }) => {
|
|
6433
6444
|
);
|
6434
6445
|
const Frame = useMemo14(() => overrides.iframe, [overrides]);
|
6435
6446
|
const rootProps = state.data.root.props || state.data.root;
|
6436
|
-
const ref =
|
6447
|
+
const ref = useRef8(null);
|
6437
6448
|
useBubbleIframeEvents(ref);
|
6438
6449
|
const inner = state.ui.previewMode === "edit" ? /* @__PURE__ */ jsx33(
|
6439
6450
|
Page,
|
@@ -6988,7 +6999,7 @@ import {
|
|
6988
6999
|
useCallback as useCallback16,
|
6989
7000
|
useEffect as useEffect22,
|
6990
7001
|
useMemo as useMemo17,
|
6991
|
-
useRef as
|
7002
|
+
useRef as useRef9,
|
6992
7003
|
useState as useState25
|
6993
7004
|
} from "react";
|
6994
7005
|
|
@@ -7177,7 +7188,7 @@ var Canvas = () => {
|
|
7177
7188
|
const { status, iframe } = useAppContext();
|
7178
7189
|
const { dispatch, state, overrides, setUi, zoomConfig, setZoomConfig } = useAppContext();
|
7179
7190
|
const { ui } = state;
|
7180
|
-
const frameRef =
|
7191
|
+
const frameRef = useRef9(null);
|
7181
7192
|
const [showTransition, setShowTransition] = useState25(false);
|
7182
7193
|
const defaultRender = useMemo17(() => {
|
7183
7194
|
const PuckDefault = ({ children }) => /* @__PURE__ */ jsx37(Fragment13, { children });
|
package/package.json
CHANGED