@measured/puck 0.19.0-canary.59cb0d9 → 0.19.0-canary.7e231b7
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 +188 -177
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -2758,6 +2758,7 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => (input
|
|
|
2758
2758
|
var import_modifiers = require("@dnd-kit/dom/modifiers");
|
|
2759
2759
|
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
2760
2760
|
var SortableProvider = ({
|
|
2761
|
+
container,
|
|
2761
2762
|
children,
|
|
2762
2763
|
onDragStart,
|
|
2763
2764
|
onDragEnd,
|
|
@@ -2772,7 +2773,7 @@ var SortableProvider = ({
|
|
|
2772
2773
|
modifiers: [
|
|
2773
2774
|
import_modifiers.RestrictToElement.configure({
|
|
2774
2775
|
element() {
|
|
2775
|
-
return
|
|
2776
|
+
return container.current;
|
|
2776
2777
|
}
|
|
2777
2778
|
})
|
|
2778
2779
|
],
|
|
@@ -2949,6 +2950,7 @@ var ArrayField = ({
|
|
|
2949
2950
|
}
|
|
2950
2951
|
}, []);
|
|
2951
2952
|
const [isDragging, setIsDragging] = (0, import_react16.useState)(false);
|
|
2953
|
+
const dndContainerRef = (0, import_react16.useRef)(null);
|
|
2952
2954
|
const canEdit = useAppStore(
|
|
2953
2955
|
(s) => s.permissions.getPermissions({ item: s.selectedItem }).edit
|
|
2954
2956
|
);
|
|
@@ -2967,6 +2969,7 @@ var ArrayField = ({
|
|
|
2967
2969
|
children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
2968
2970
|
SortableProvider,
|
|
2969
2971
|
{
|
|
2972
|
+
container: dndContainerRef,
|
|
2970
2973
|
onDragStart: () => setIsDragging(true),
|
|
2971
2974
|
onDragEnd: () => setIsDragging(false),
|
|
2972
2975
|
onMove: (move) => {
|
|
@@ -2996,168 +2999,173 @@ var ArrayField = ({
|
|
|
2996
2999
|
hasItems: Array.isArray(value) && value.length > 0,
|
|
2997
3000
|
addDisabled
|
|
2998
3001
|
}),
|
|
2999
|
-
onClick: (e) => {
|
|
3000
|
-
e.preventDefault();
|
|
3001
|
-
},
|
|
3002
3002
|
children: [
|
|
3003
|
-
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
3004
|
-
|
|
3005
|
-
|
|
3006
|
-
|
|
3007
|
-
|
|
3008
|
-
|
|
3009
|
-
|
|
3010
|
-
|
|
3011
|
-
|
|
3012
|
-
|
|
3013
|
-
|
|
3003
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
3004
|
+
"div",
|
|
3005
|
+
{
|
|
3006
|
+
ref: dndContainerRef,
|
|
3007
|
+
className: getClassName5("inner"),
|
|
3008
|
+
"data-dnd-container": true,
|
|
3009
|
+
children: localState.arrayState.items.map((item, i) => {
|
|
3010
|
+
const { _arrayId = `${id}-${i}`, _originalIndex = i } = item;
|
|
3011
|
+
const data = Array.from(localState.value || [])[i] || {};
|
|
3012
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
3013
|
+
Sortable,
|
|
3014
3014
|
{
|
|
3015
|
-
|
|
3016
|
-
|
|
3017
|
-
|
|
3018
|
-
|
|
3019
|
-
|
|
3020
|
-
|
|
3021
|
-
|
|
3022
|
-
|
|
3023
|
-
|
|
3024
|
-
|
|
3025
|
-
|
|
3026
|
-
|
|
3027
|
-
|
|
3028
|
-
|
|
3029
|
-
|
|
3030
|
-
|
|
3031
|
-
|
|
3032
|
-
|
|
3033
|
-
|
|
3034
|
-
|
|
3035
|
-
|
|
3036
|
-
|
|
3037
|
-
|
|
3038
|
-
|
|
3039
|
-
|
|
3040
|
-
|
|
3015
|
+
id: _arrayId,
|
|
3016
|
+
index: i,
|
|
3017
|
+
disabled: readOnly,
|
|
3018
|
+
children: ({ status, ref }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
3019
|
+
"div",
|
|
3020
|
+
{
|
|
3021
|
+
ref,
|
|
3022
|
+
className: getClassNameItem({
|
|
3023
|
+
isExpanded: arrayState.openId === _arrayId,
|
|
3024
|
+
isDragging: status === "dragging",
|
|
3025
|
+
readOnly
|
|
3026
|
+
}),
|
|
3027
|
+
children: [
|
|
3028
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
3029
|
+
"div",
|
|
3030
|
+
{
|
|
3031
|
+
onClick: (e) => {
|
|
3032
|
+
if (isDragging) return;
|
|
3033
|
+
e.preventDefault();
|
|
3034
|
+
e.stopPropagation();
|
|
3035
|
+
if (arrayState.openId === _arrayId) {
|
|
3036
|
+
setUi(
|
|
3037
|
+
mapArrayStateToUi({
|
|
3038
|
+
openId: ""
|
|
3039
|
+
})
|
|
3040
|
+
);
|
|
3041
|
+
} else {
|
|
3042
|
+
setUi(
|
|
3043
|
+
mapArrayStateToUi({
|
|
3044
|
+
openId: _arrayId
|
|
3045
|
+
})
|
|
3046
|
+
);
|
|
3047
|
+
}
|
|
3048
|
+
},
|
|
3049
|
+
className: getClassNameItem("summary"),
|
|
3050
|
+
children: [
|
|
3051
|
+
field.getItemSummary ? field.getItemSummary(data, i) : `Item #${_originalIndex}`,
|
|
3052
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: getClassNameItem("rhs"), children: [
|
|
3053
|
+
!readOnly && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: getClassNameItem("actions"), children: [
|
|
3054
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: getClassNameItem("action"), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
3055
|
+
IconButton,
|
|
3056
|
+
{
|
|
3057
|
+
type: "button",
|
|
3058
|
+
disabled: !!addDisabled,
|
|
3059
|
+
onClick: (e) => {
|
|
3060
|
+
e.stopPropagation();
|
|
3061
|
+
const existingValue = [...value || []];
|
|
3062
|
+
existingValue.splice(
|
|
3063
|
+
i,
|
|
3064
|
+
0,
|
|
3065
|
+
existingValue[i]
|
|
3066
|
+
);
|
|
3067
|
+
onChange(
|
|
3068
|
+
existingValue,
|
|
3069
|
+
mapArrayStateToUi(
|
|
3070
|
+
regenerateArrayState(existingValue)
|
|
3071
|
+
)
|
|
3072
|
+
);
|
|
3073
|
+
},
|
|
3074
|
+
title: "Duplicate",
|
|
3075
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Copy, { size: 16 })
|
|
3076
|
+
}
|
|
3077
|
+
) }),
|
|
3078
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: getClassNameItem("action"), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
3079
|
+
IconButton,
|
|
3080
|
+
{
|
|
3081
|
+
type: "button",
|
|
3082
|
+
disabled: field.min !== void 0 && field.min >= localState.arrayState.items.length,
|
|
3083
|
+
onClick: (e) => {
|
|
3084
|
+
e.stopPropagation();
|
|
3085
|
+
const existingValue = [...value || []];
|
|
3086
|
+
const existingItems = [
|
|
3087
|
+
...arrayState.items || []
|
|
3088
|
+
];
|
|
3089
|
+
existingValue.splice(i, 1);
|
|
3090
|
+
existingItems.splice(i, 1);
|
|
3091
|
+
onChange(
|
|
3092
|
+
existingValue,
|
|
3093
|
+
mapArrayStateToUi({
|
|
3094
|
+
items: existingItems
|
|
3095
|
+
})
|
|
3096
|
+
);
|
|
3097
|
+
},
|
|
3098
|
+
title: "Delete",
|
|
3099
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Trash, { size: 16 })
|
|
3100
|
+
}
|
|
3101
|
+
) })
|
|
3102
|
+
] }),
|
|
3103
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DragIcon, {}) })
|
|
3104
|
+
] })
|
|
3105
|
+
]
|
|
3041
3106
|
}
|
|
3042
|
-
|
|
3043
|
-
className: getClassNameItem("
|
|
3044
|
-
|
|
3045
|
-
|
|
3046
|
-
|
|
3047
|
-
|
|
3048
|
-
|
|
3049
|
-
IconButton,
|
|
3050
|
-
{
|
|
3051
|
-
type: "button",
|
|
3052
|
-
disabled: !!addDisabled,
|
|
3053
|
-
onClick: (e) => {
|
|
3054
|
-
e.stopPropagation();
|
|
3055
|
-
const existingValue = [...value || []];
|
|
3056
|
-
existingValue.splice(
|
|
3057
|
-
i,
|
|
3058
|
-
0,
|
|
3059
|
-
existingValue[i]
|
|
3060
|
-
);
|
|
3061
|
-
onChange(
|
|
3062
|
-
existingValue,
|
|
3063
|
-
mapArrayStateToUi(
|
|
3064
|
-
regenerateArrayState(existingValue)
|
|
3065
|
-
)
|
|
3066
|
-
);
|
|
3067
|
-
},
|
|
3068
|
-
title: "Duplicate",
|
|
3069
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Copy, { size: 16 })
|
|
3070
|
-
}
|
|
3071
|
-
) }),
|
|
3072
|
-
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: getClassNameItem("action"), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
3073
|
-
IconButton,
|
|
3074
|
-
{
|
|
3075
|
-
type: "button",
|
|
3076
|
-
disabled: field.min !== void 0 && field.min >= localState.arrayState.items.length,
|
|
3077
|
-
onClick: (e) => {
|
|
3078
|
-
e.stopPropagation();
|
|
3079
|
-
const existingValue = [...value || []];
|
|
3080
|
-
const existingItems = [
|
|
3081
|
-
...arrayState.items || []
|
|
3082
|
-
];
|
|
3083
|
-
existingValue.splice(i, 1);
|
|
3084
|
-
existingItems.splice(i, 1);
|
|
3085
|
-
onChange(
|
|
3086
|
-
existingValue,
|
|
3087
|
-
mapArrayStateToUi({
|
|
3088
|
-
items: existingItems
|
|
3089
|
-
})
|
|
3090
|
-
);
|
|
3091
|
-
},
|
|
3092
|
-
title: "Delete",
|
|
3093
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Trash, { size: 16 })
|
|
3094
|
-
}
|
|
3095
|
-
) })
|
|
3096
|
-
] }),
|
|
3097
|
-
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DragIcon, {}) })
|
|
3098
|
-
] })
|
|
3099
|
-
]
|
|
3100
|
-
}
|
|
3101
|
-
),
|
|
3102
|
-
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: getClassNameItem("body"), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
3103
|
-
"fieldset",
|
|
3104
|
-
{
|
|
3105
|
-
className: getClassNameItem("fieldset"),
|
|
3106
|
-
onPointerDownCapture: (e) => {
|
|
3107
|
-
e.stopPropagation();
|
|
3108
|
-
},
|
|
3109
|
-
children: Object.keys(field.arrayFields).map((subName) => {
|
|
3110
|
-
const subField = field.arrayFields[subName];
|
|
3111
|
-
const indexName = `${name}[${i}]`;
|
|
3112
|
-
const subPath = `${indexName}.${subName}`;
|
|
3113
|
-
const localIndexName = `${localName}[${i}]`;
|
|
3114
|
-
const localWildcardName = `${localName}[*]`;
|
|
3115
|
-
const localSubPath = `${localIndexName}.${subName}`;
|
|
3116
|
-
const localWildcardSubPath = `${localWildcardName}.${subName}`;
|
|
3117
|
-
const subReadOnly = forceReadOnly ? forceReadOnly : typeof readOnlyFields[subPath] !== "undefined" ? readOnlyFields[localSubPath] : readOnlyFields[localWildcardSubPath];
|
|
3118
|
-
const label2 = subField.label || subName;
|
|
3119
|
-
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
3120
|
-
NestedFieldProvider,
|
|
3121
|
-
{
|
|
3122
|
-
name: localIndexName,
|
|
3123
|
-
wildcardName: localWildcardName,
|
|
3124
|
-
subName,
|
|
3125
|
-
readOnlyFields,
|
|
3126
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
3127
|
-
AutoFieldPrivate,
|
|
3128
|
-
{
|
|
3129
|
-
name: subPath,
|
|
3130
|
-
label: label2,
|
|
3131
|
-
id: `${_arrayId}_${subName}`,
|
|
3132
|
-
readOnly: subReadOnly,
|
|
3133
|
-
field: __spreadProps(__spreadValues({}, subField), {
|
|
3134
|
-
label: label2
|
|
3135
|
-
// May be used by custom fields
|
|
3136
|
-
}),
|
|
3137
|
-
value: data[subName],
|
|
3138
|
-
onChange: (val, ui) => {
|
|
3139
|
-
onChange(
|
|
3140
|
-
replace(value, i, __spreadProps(__spreadValues({}, data), {
|
|
3141
|
-
[subName]: val
|
|
3142
|
-
})),
|
|
3143
|
-
ui
|
|
3144
|
-
);
|
|
3145
|
-
}
|
|
3146
|
-
}
|
|
3147
|
-
)
|
|
3107
|
+
),
|
|
3108
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: getClassNameItem("body"), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
3109
|
+
"fieldset",
|
|
3110
|
+
{
|
|
3111
|
+
className: getClassNameItem("fieldset"),
|
|
3112
|
+
onPointerDownCapture: (e) => {
|
|
3113
|
+
e.stopPropagation();
|
|
3148
3114
|
},
|
|
3149
|
-
|
|
3150
|
-
|
|
3151
|
-
|
|
3152
|
-
|
|
3153
|
-
|
|
3154
|
-
|
|
3155
|
-
|
|
3156
|
-
|
|
3157
|
-
|
|
3158
|
-
|
|
3159
|
-
|
|
3160
|
-
|
|
3115
|
+
children: Object.keys(field.arrayFields).map((subName) => {
|
|
3116
|
+
const subField = field.arrayFields[subName];
|
|
3117
|
+
const indexName = `${name}[${i}]`;
|
|
3118
|
+
const subPath = `${indexName}.${subName}`;
|
|
3119
|
+
const localIndexName = `${localName}[${i}]`;
|
|
3120
|
+
const localWildcardName = `${localName}[*]`;
|
|
3121
|
+
const localSubPath = `${localIndexName}.${subName}`;
|
|
3122
|
+
const localWildcardSubPath = `${localWildcardName}.${subName}`;
|
|
3123
|
+
const subReadOnly = forceReadOnly ? forceReadOnly : typeof readOnlyFields[subPath] !== "undefined" ? readOnlyFields[localSubPath] : readOnlyFields[localWildcardSubPath];
|
|
3124
|
+
const label2 = subField.label || subName;
|
|
3125
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
3126
|
+
NestedFieldProvider,
|
|
3127
|
+
{
|
|
3128
|
+
name: localIndexName,
|
|
3129
|
+
wildcardName: localWildcardName,
|
|
3130
|
+
subName,
|
|
3131
|
+
readOnlyFields,
|
|
3132
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
3133
|
+
AutoFieldPrivate,
|
|
3134
|
+
{
|
|
3135
|
+
name: subPath,
|
|
3136
|
+
label: label2,
|
|
3137
|
+
id: `${_arrayId}_${subName}`,
|
|
3138
|
+
readOnly: subReadOnly,
|
|
3139
|
+
field: __spreadProps(__spreadValues({}, subField), {
|
|
3140
|
+
label: label2
|
|
3141
|
+
// May be used by custom fields
|
|
3142
|
+
}),
|
|
3143
|
+
value: data[subName],
|
|
3144
|
+
onChange: (val, ui) => {
|
|
3145
|
+
onChange(
|
|
3146
|
+
replace(value, i, __spreadProps(__spreadValues({}, data), {
|
|
3147
|
+
[subName]: val
|
|
3148
|
+
})),
|
|
3149
|
+
ui
|
|
3150
|
+
);
|
|
3151
|
+
}
|
|
3152
|
+
}
|
|
3153
|
+
)
|
|
3154
|
+
},
|
|
3155
|
+
subPath
|
|
3156
|
+
);
|
|
3157
|
+
})
|
|
3158
|
+
}
|
|
3159
|
+
) })
|
|
3160
|
+
]
|
|
3161
|
+
}
|
|
3162
|
+
)
|
|
3163
|
+
},
|
|
3164
|
+
_arrayId
|
|
3165
|
+
);
|
|
3166
|
+
})
|
|
3167
|
+
}
|
|
3168
|
+
),
|
|
3161
3169
|
!addDisabled && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
3162
3170
|
"button",
|
|
3163
3171
|
{
|
|
@@ -4073,10 +4081,13 @@ function AutoFieldPrivate(props) {
|
|
|
4073
4081
|
const isFocused = useAppStore((s) => s.state.ui.field.focus === props.name);
|
|
4074
4082
|
const { value, onChange } = props;
|
|
4075
4083
|
const [localValue, setLocalValue] = (0, import_react24.useState)(value);
|
|
4076
|
-
const onChangeLocal = (0, import_react24.useCallback)(
|
|
4077
|
-
|
|
4078
|
-
|
|
4079
|
-
|
|
4084
|
+
const onChangeLocal = (0, import_react24.useCallback)(
|
|
4085
|
+
(val, ui) => {
|
|
4086
|
+
setLocalValue(val);
|
|
4087
|
+
onChange(val, ui);
|
|
4088
|
+
},
|
|
4089
|
+
[onChange]
|
|
4090
|
+
);
|
|
4080
4091
|
(0, import_react24.useEffect)(() => {
|
|
4081
4092
|
if (!isFocused) {
|
|
4082
4093
|
setLocalValue(value);
|
package/dist/index.mjs
CHANGED
|
@@ -676,7 +676,7 @@ var IconButton = ({
|
|
|
676
676
|
};
|
|
677
677
|
|
|
678
678
|
// components/AutoField/fields/ArrayField/index.tsx
|
|
679
|
-
import { useCallback as useCallback2, useEffect as useEffect6, useState as useState4 } from "react";
|
|
679
|
+
import { useCallback as useCallback2, useEffect as useEffect6, useRef, useState as useState4 } from "react";
|
|
680
680
|
|
|
681
681
|
// components/DragIcon/index.tsx
|
|
682
682
|
init_react_import();
|
|
@@ -2566,6 +2566,7 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => (input
|
|
|
2566
2566
|
import { RestrictToElement } from "@dnd-kit/dom/modifiers";
|
|
2567
2567
|
import { jsx as jsx5 } from "react/jsx-runtime";
|
|
2568
2568
|
var SortableProvider = ({
|
|
2569
|
+
container,
|
|
2569
2570
|
children,
|
|
2570
2571
|
onDragStart,
|
|
2571
2572
|
onDragEnd,
|
|
@@ -2580,7 +2581,7 @@ var SortableProvider = ({
|
|
|
2580
2581
|
modifiers: [
|
|
2581
2582
|
RestrictToElement.configure({
|
|
2582
2583
|
element() {
|
|
2583
|
-
return
|
|
2584
|
+
return container.current;
|
|
2584
2585
|
}
|
|
2585
2586
|
})
|
|
2586
2587
|
],
|
|
@@ -2757,6 +2758,7 @@ var ArrayField = ({
|
|
|
2757
2758
|
}
|
|
2758
2759
|
}, []);
|
|
2759
2760
|
const [isDragging, setIsDragging] = useState4(false);
|
|
2761
|
+
const dndContainerRef = useRef(null);
|
|
2760
2762
|
const canEdit = useAppStore(
|
|
2761
2763
|
(s) => s.permissions.getPermissions({ item: s.selectedItem }).edit
|
|
2762
2764
|
);
|
|
@@ -2775,6 +2777,7 @@ var ArrayField = ({
|
|
|
2775
2777
|
children: /* @__PURE__ */ jsx7(
|
|
2776
2778
|
SortableProvider,
|
|
2777
2779
|
{
|
|
2780
|
+
container: dndContainerRef,
|
|
2778
2781
|
onDragStart: () => setIsDragging(true),
|
|
2779
2782
|
onDragEnd: () => setIsDragging(false),
|
|
2780
2783
|
onMove: (move) => {
|
|
@@ -2804,168 +2807,173 @@ var ArrayField = ({
|
|
|
2804
2807
|
hasItems: Array.isArray(value) && value.length > 0,
|
|
2805
2808
|
addDisabled
|
|
2806
2809
|
}),
|
|
2807
|
-
onClick: (e) => {
|
|
2808
|
-
e.preventDefault();
|
|
2809
|
-
},
|
|
2810
2810
|
children: [
|
|
2811
|
-
/* @__PURE__ */ jsx7(
|
|
2812
|
-
|
|
2813
|
-
|
|
2814
|
-
|
|
2815
|
-
|
|
2816
|
-
|
|
2817
|
-
|
|
2818
|
-
|
|
2819
|
-
|
|
2820
|
-
|
|
2821
|
-
|
|
2811
|
+
/* @__PURE__ */ jsx7(
|
|
2812
|
+
"div",
|
|
2813
|
+
{
|
|
2814
|
+
ref: dndContainerRef,
|
|
2815
|
+
className: getClassName5("inner"),
|
|
2816
|
+
"data-dnd-container": true,
|
|
2817
|
+
children: localState.arrayState.items.map((item, i) => {
|
|
2818
|
+
const { _arrayId = `${id}-${i}`, _originalIndex = i } = item;
|
|
2819
|
+
const data = Array.from(localState.value || [])[i] || {};
|
|
2820
|
+
return /* @__PURE__ */ jsx7(
|
|
2821
|
+
Sortable,
|
|
2822
2822
|
{
|
|
2823
|
-
|
|
2824
|
-
|
|
2825
|
-
|
|
2826
|
-
|
|
2827
|
-
|
|
2828
|
-
|
|
2829
|
-
|
|
2830
|
-
|
|
2831
|
-
|
|
2832
|
-
|
|
2833
|
-
|
|
2834
|
-
|
|
2835
|
-
|
|
2836
|
-
|
|
2837
|
-
|
|
2838
|
-
|
|
2839
|
-
|
|
2840
|
-
|
|
2841
|
-
|
|
2842
|
-
|
|
2843
|
-
|
|
2844
|
-
|
|
2845
|
-
|
|
2846
|
-
|
|
2847
|
-
|
|
2848
|
-
|
|
2823
|
+
id: _arrayId,
|
|
2824
|
+
index: i,
|
|
2825
|
+
disabled: readOnly,
|
|
2826
|
+
children: ({ status, ref }) => /* @__PURE__ */ jsxs3(
|
|
2827
|
+
"div",
|
|
2828
|
+
{
|
|
2829
|
+
ref,
|
|
2830
|
+
className: getClassNameItem({
|
|
2831
|
+
isExpanded: arrayState.openId === _arrayId,
|
|
2832
|
+
isDragging: status === "dragging",
|
|
2833
|
+
readOnly
|
|
2834
|
+
}),
|
|
2835
|
+
children: [
|
|
2836
|
+
/* @__PURE__ */ jsxs3(
|
|
2837
|
+
"div",
|
|
2838
|
+
{
|
|
2839
|
+
onClick: (e) => {
|
|
2840
|
+
if (isDragging) return;
|
|
2841
|
+
e.preventDefault();
|
|
2842
|
+
e.stopPropagation();
|
|
2843
|
+
if (arrayState.openId === _arrayId) {
|
|
2844
|
+
setUi(
|
|
2845
|
+
mapArrayStateToUi({
|
|
2846
|
+
openId: ""
|
|
2847
|
+
})
|
|
2848
|
+
);
|
|
2849
|
+
} else {
|
|
2850
|
+
setUi(
|
|
2851
|
+
mapArrayStateToUi({
|
|
2852
|
+
openId: _arrayId
|
|
2853
|
+
})
|
|
2854
|
+
);
|
|
2855
|
+
}
|
|
2856
|
+
},
|
|
2857
|
+
className: getClassNameItem("summary"),
|
|
2858
|
+
children: [
|
|
2859
|
+
field.getItemSummary ? field.getItemSummary(data, i) : `Item #${_originalIndex}`,
|
|
2860
|
+
/* @__PURE__ */ jsxs3("div", { className: getClassNameItem("rhs"), children: [
|
|
2861
|
+
!readOnly && /* @__PURE__ */ jsxs3("div", { className: getClassNameItem("actions"), children: [
|
|
2862
|
+
/* @__PURE__ */ jsx7("div", { className: getClassNameItem("action"), children: /* @__PURE__ */ jsx7(
|
|
2863
|
+
IconButton,
|
|
2864
|
+
{
|
|
2865
|
+
type: "button",
|
|
2866
|
+
disabled: !!addDisabled,
|
|
2867
|
+
onClick: (e) => {
|
|
2868
|
+
e.stopPropagation();
|
|
2869
|
+
const existingValue = [...value || []];
|
|
2870
|
+
existingValue.splice(
|
|
2871
|
+
i,
|
|
2872
|
+
0,
|
|
2873
|
+
existingValue[i]
|
|
2874
|
+
);
|
|
2875
|
+
onChange(
|
|
2876
|
+
existingValue,
|
|
2877
|
+
mapArrayStateToUi(
|
|
2878
|
+
regenerateArrayState(existingValue)
|
|
2879
|
+
)
|
|
2880
|
+
);
|
|
2881
|
+
},
|
|
2882
|
+
title: "Duplicate",
|
|
2883
|
+
children: /* @__PURE__ */ jsx7(Copy, { size: 16 })
|
|
2884
|
+
}
|
|
2885
|
+
) }),
|
|
2886
|
+
/* @__PURE__ */ jsx7("div", { className: getClassNameItem("action"), children: /* @__PURE__ */ jsx7(
|
|
2887
|
+
IconButton,
|
|
2888
|
+
{
|
|
2889
|
+
type: "button",
|
|
2890
|
+
disabled: field.min !== void 0 && field.min >= localState.arrayState.items.length,
|
|
2891
|
+
onClick: (e) => {
|
|
2892
|
+
e.stopPropagation();
|
|
2893
|
+
const existingValue = [...value || []];
|
|
2894
|
+
const existingItems = [
|
|
2895
|
+
...arrayState.items || []
|
|
2896
|
+
];
|
|
2897
|
+
existingValue.splice(i, 1);
|
|
2898
|
+
existingItems.splice(i, 1);
|
|
2899
|
+
onChange(
|
|
2900
|
+
existingValue,
|
|
2901
|
+
mapArrayStateToUi({
|
|
2902
|
+
items: existingItems
|
|
2903
|
+
})
|
|
2904
|
+
);
|
|
2905
|
+
},
|
|
2906
|
+
title: "Delete",
|
|
2907
|
+
children: /* @__PURE__ */ jsx7(Trash, { size: 16 })
|
|
2908
|
+
}
|
|
2909
|
+
) })
|
|
2910
|
+
] }),
|
|
2911
|
+
/* @__PURE__ */ jsx7("div", { children: /* @__PURE__ */ jsx7(DragIcon, {}) })
|
|
2912
|
+
] })
|
|
2913
|
+
]
|
|
2849
2914
|
}
|
|
2850
|
-
|
|
2851
|
-
className: getClassNameItem("
|
|
2852
|
-
|
|
2853
|
-
|
|
2854
|
-
|
|
2855
|
-
|
|
2856
|
-
|
|
2857
|
-
IconButton,
|
|
2858
|
-
{
|
|
2859
|
-
type: "button",
|
|
2860
|
-
disabled: !!addDisabled,
|
|
2861
|
-
onClick: (e) => {
|
|
2862
|
-
e.stopPropagation();
|
|
2863
|
-
const existingValue = [...value || []];
|
|
2864
|
-
existingValue.splice(
|
|
2865
|
-
i,
|
|
2866
|
-
0,
|
|
2867
|
-
existingValue[i]
|
|
2868
|
-
);
|
|
2869
|
-
onChange(
|
|
2870
|
-
existingValue,
|
|
2871
|
-
mapArrayStateToUi(
|
|
2872
|
-
regenerateArrayState(existingValue)
|
|
2873
|
-
)
|
|
2874
|
-
);
|
|
2875
|
-
},
|
|
2876
|
-
title: "Duplicate",
|
|
2877
|
-
children: /* @__PURE__ */ jsx7(Copy, { size: 16 })
|
|
2878
|
-
}
|
|
2879
|
-
) }),
|
|
2880
|
-
/* @__PURE__ */ jsx7("div", { className: getClassNameItem("action"), children: /* @__PURE__ */ jsx7(
|
|
2881
|
-
IconButton,
|
|
2882
|
-
{
|
|
2883
|
-
type: "button",
|
|
2884
|
-
disabled: field.min !== void 0 && field.min >= localState.arrayState.items.length,
|
|
2885
|
-
onClick: (e) => {
|
|
2886
|
-
e.stopPropagation();
|
|
2887
|
-
const existingValue = [...value || []];
|
|
2888
|
-
const existingItems = [
|
|
2889
|
-
...arrayState.items || []
|
|
2890
|
-
];
|
|
2891
|
-
existingValue.splice(i, 1);
|
|
2892
|
-
existingItems.splice(i, 1);
|
|
2893
|
-
onChange(
|
|
2894
|
-
existingValue,
|
|
2895
|
-
mapArrayStateToUi({
|
|
2896
|
-
items: existingItems
|
|
2897
|
-
})
|
|
2898
|
-
);
|
|
2899
|
-
},
|
|
2900
|
-
title: "Delete",
|
|
2901
|
-
children: /* @__PURE__ */ jsx7(Trash, { size: 16 })
|
|
2902
|
-
}
|
|
2903
|
-
) })
|
|
2904
|
-
] }),
|
|
2905
|
-
/* @__PURE__ */ jsx7("div", { children: /* @__PURE__ */ jsx7(DragIcon, {}) })
|
|
2906
|
-
] })
|
|
2907
|
-
]
|
|
2908
|
-
}
|
|
2909
|
-
),
|
|
2910
|
-
/* @__PURE__ */ jsx7("div", { className: getClassNameItem("body"), children: /* @__PURE__ */ jsx7(
|
|
2911
|
-
"fieldset",
|
|
2912
|
-
{
|
|
2913
|
-
className: getClassNameItem("fieldset"),
|
|
2914
|
-
onPointerDownCapture: (e) => {
|
|
2915
|
-
e.stopPropagation();
|
|
2916
|
-
},
|
|
2917
|
-
children: Object.keys(field.arrayFields).map((subName) => {
|
|
2918
|
-
const subField = field.arrayFields[subName];
|
|
2919
|
-
const indexName = `${name}[${i}]`;
|
|
2920
|
-
const subPath = `${indexName}.${subName}`;
|
|
2921
|
-
const localIndexName = `${localName}[${i}]`;
|
|
2922
|
-
const localWildcardName = `${localName}[*]`;
|
|
2923
|
-
const localSubPath = `${localIndexName}.${subName}`;
|
|
2924
|
-
const localWildcardSubPath = `${localWildcardName}.${subName}`;
|
|
2925
|
-
const subReadOnly = forceReadOnly ? forceReadOnly : typeof readOnlyFields[subPath] !== "undefined" ? readOnlyFields[localSubPath] : readOnlyFields[localWildcardSubPath];
|
|
2926
|
-
const label2 = subField.label || subName;
|
|
2927
|
-
return /* @__PURE__ */ jsx7(
|
|
2928
|
-
NestedFieldProvider,
|
|
2929
|
-
{
|
|
2930
|
-
name: localIndexName,
|
|
2931
|
-
wildcardName: localWildcardName,
|
|
2932
|
-
subName,
|
|
2933
|
-
readOnlyFields,
|
|
2934
|
-
children: /* @__PURE__ */ jsx7(
|
|
2935
|
-
AutoFieldPrivate,
|
|
2936
|
-
{
|
|
2937
|
-
name: subPath,
|
|
2938
|
-
label: label2,
|
|
2939
|
-
id: `${_arrayId}_${subName}`,
|
|
2940
|
-
readOnly: subReadOnly,
|
|
2941
|
-
field: __spreadProps(__spreadValues({}, subField), {
|
|
2942
|
-
label: label2
|
|
2943
|
-
// May be used by custom fields
|
|
2944
|
-
}),
|
|
2945
|
-
value: data[subName],
|
|
2946
|
-
onChange: (val, ui) => {
|
|
2947
|
-
onChange(
|
|
2948
|
-
replace(value, i, __spreadProps(__spreadValues({}, data), {
|
|
2949
|
-
[subName]: val
|
|
2950
|
-
})),
|
|
2951
|
-
ui
|
|
2952
|
-
);
|
|
2953
|
-
}
|
|
2954
|
-
}
|
|
2955
|
-
)
|
|
2915
|
+
),
|
|
2916
|
+
/* @__PURE__ */ jsx7("div", { className: getClassNameItem("body"), children: /* @__PURE__ */ jsx7(
|
|
2917
|
+
"fieldset",
|
|
2918
|
+
{
|
|
2919
|
+
className: getClassNameItem("fieldset"),
|
|
2920
|
+
onPointerDownCapture: (e) => {
|
|
2921
|
+
e.stopPropagation();
|
|
2956
2922
|
},
|
|
2957
|
-
|
|
2958
|
-
|
|
2959
|
-
|
|
2960
|
-
|
|
2961
|
-
|
|
2962
|
-
|
|
2963
|
-
|
|
2964
|
-
|
|
2965
|
-
|
|
2966
|
-
|
|
2967
|
-
|
|
2968
|
-
|
|
2923
|
+
children: Object.keys(field.arrayFields).map((subName) => {
|
|
2924
|
+
const subField = field.arrayFields[subName];
|
|
2925
|
+
const indexName = `${name}[${i}]`;
|
|
2926
|
+
const subPath = `${indexName}.${subName}`;
|
|
2927
|
+
const localIndexName = `${localName}[${i}]`;
|
|
2928
|
+
const localWildcardName = `${localName}[*]`;
|
|
2929
|
+
const localSubPath = `${localIndexName}.${subName}`;
|
|
2930
|
+
const localWildcardSubPath = `${localWildcardName}.${subName}`;
|
|
2931
|
+
const subReadOnly = forceReadOnly ? forceReadOnly : typeof readOnlyFields[subPath] !== "undefined" ? readOnlyFields[localSubPath] : readOnlyFields[localWildcardSubPath];
|
|
2932
|
+
const label2 = subField.label || subName;
|
|
2933
|
+
return /* @__PURE__ */ jsx7(
|
|
2934
|
+
NestedFieldProvider,
|
|
2935
|
+
{
|
|
2936
|
+
name: localIndexName,
|
|
2937
|
+
wildcardName: localWildcardName,
|
|
2938
|
+
subName,
|
|
2939
|
+
readOnlyFields,
|
|
2940
|
+
children: /* @__PURE__ */ jsx7(
|
|
2941
|
+
AutoFieldPrivate,
|
|
2942
|
+
{
|
|
2943
|
+
name: subPath,
|
|
2944
|
+
label: label2,
|
|
2945
|
+
id: `${_arrayId}_${subName}`,
|
|
2946
|
+
readOnly: subReadOnly,
|
|
2947
|
+
field: __spreadProps(__spreadValues({}, subField), {
|
|
2948
|
+
label: label2
|
|
2949
|
+
// May be used by custom fields
|
|
2950
|
+
}),
|
|
2951
|
+
value: data[subName],
|
|
2952
|
+
onChange: (val, ui) => {
|
|
2953
|
+
onChange(
|
|
2954
|
+
replace(value, i, __spreadProps(__spreadValues({}, data), {
|
|
2955
|
+
[subName]: val
|
|
2956
|
+
})),
|
|
2957
|
+
ui
|
|
2958
|
+
);
|
|
2959
|
+
}
|
|
2960
|
+
}
|
|
2961
|
+
)
|
|
2962
|
+
},
|
|
2963
|
+
subPath
|
|
2964
|
+
);
|
|
2965
|
+
})
|
|
2966
|
+
}
|
|
2967
|
+
) })
|
|
2968
|
+
]
|
|
2969
|
+
}
|
|
2970
|
+
)
|
|
2971
|
+
},
|
|
2972
|
+
_arrayId
|
|
2973
|
+
);
|
|
2974
|
+
})
|
|
2975
|
+
}
|
|
2976
|
+
),
|
|
2969
2977
|
!addDisabled && /* @__PURE__ */ jsx7(
|
|
2970
2978
|
"button",
|
|
2971
2979
|
{
|
|
@@ -3887,10 +3895,13 @@ function AutoFieldPrivate(props) {
|
|
|
3887
3895
|
const isFocused = useAppStore((s) => s.state.ui.field.focus === props.name);
|
|
3888
3896
|
const { value, onChange } = props;
|
|
3889
3897
|
const [localValue, setLocalValue] = useState9(value);
|
|
3890
|
-
const onChangeLocal = useCallback4(
|
|
3891
|
-
|
|
3892
|
-
|
|
3893
|
-
|
|
3898
|
+
const onChangeLocal = useCallback4(
|
|
3899
|
+
(val, ui) => {
|
|
3900
|
+
setLocalValue(val);
|
|
3901
|
+
onChange(val, ui);
|
|
3902
|
+
},
|
|
3903
|
+
[onChange]
|
|
3904
|
+
);
|
|
3894
3905
|
useEffect11(() => {
|
|
3895
3906
|
if (!isFocused) {
|
|
3896
3907
|
setLocalValue(value);
|
|
@@ -3934,7 +3945,7 @@ import {
|
|
|
3934
3945
|
useContext as useContext7,
|
|
3935
3946
|
useEffect as useEffect17,
|
|
3936
3947
|
useId,
|
|
3937
|
-
useRef as
|
|
3948
|
+
useRef as useRef4,
|
|
3938
3949
|
useState as useState15
|
|
3939
3950
|
} from "react";
|
|
3940
3951
|
import { AutoScroller, defaultPreset } from "@dnd-kit/dom";
|
|
@@ -3947,7 +3958,7 @@ import {
|
|
|
3947
3958
|
useContext as useContext6,
|
|
3948
3959
|
useEffect as useEffect16,
|
|
3949
3960
|
useMemo as useMemo8,
|
|
3950
|
-
useRef as
|
|
3961
|
+
useRef as useRef3
|
|
3951
3962
|
} from "react";
|
|
3952
3963
|
|
|
3953
3964
|
// components/DraggableComponent/index.tsx
|
|
@@ -3957,7 +3968,7 @@ import {
|
|
|
3957
3968
|
useContext as useContext5,
|
|
3958
3969
|
useEffect as useEffect12,
|
|
3959
3970
|
useMemo as useMemo7,
|
|
3960
|
-
useRef,
|
|
3971
|
+
useRef as useRef2,
|
|
3961
3972
|
useState as useState11
|
|
3962
3973
|
} from "react";
|
|
3963
3974
|
|
|
@@ -4194,7 +4205,7 @@ var DraggableComponent = ({
|
|
|
4194
4205
|
}
|
|
4195
4206
|
});
|
|
4196
4207
|
const thisIsDragging = status === "dragging";
|
|
4197
|
-
const ref =
|
|
4208
|
+
const ref = useRef2(null);
|
|
4198
4209
|
const refSetter = useCallback6(
|
|
4199
4210
|
(el) => {
|
|
4200
4211
|
sortableRef(el);
|
|
@@ -4871,7 +4882,7 @@ var DropZoneEdit = forwardRef3(
|
|
|
4871
4882
|
return content.map(({ props }) => props.id);
|
|
4872
4883
|
})
|
|
4873
4884
|
);
|
|
4874
|
-
const ref =
|
|
4885
|
+
const ref = useRef3(null);
|
|
4875
4886
|
const acceptsTarget = useCallback9(
|
|
4876
4887
|
(componentType) => {
|
|
4877
4888
|
if (!componentType) {
|
|
@@ -5373,7 +5384,7 @@ function useDragListener(type, fn, deps = []) {
|
|
|
5373
5384
|
}
|
|
5374
5385
|
var AREA_CHANGE_DEBOUNCE_MS = 100;
|
|
5375
5386
|
var useTempDisableFallback = (timeout3) => {
|
|
5376
|
-
const lastFallbackDisable =
|
|
5387
|
+
const lastFallbackDisable = useRef4(null);
|
|
5377
5388
|
return useCallback10((manager) => {
|
|
5378
5389
|
collisionStore.setState({ fallbackEnabled: false });
|
|
5379
5390
|
const fallbackId = generateId();
|
|
@@ -5396,7 +5407,7 @@ var DragDropContextClient = ({
|
|
|
5396
5407
|
const metadata = useAppStore((s) => s.metadata);
|
|
5397
5408
|
const appStore = useAppStoreApi();
|
|
5398
5409
|
const id = useId();
|
|
5399
|
-
const debouncedParamsRef =
|
|
5410
|
+
const debouncedParamsRef = useRef4(null);
|
|
5400
5411
|
const tempDisableFallback = useTempDisableFallback(100);
|
|
5401
5412
|
const [zoneStore] = useState15(
|
|
5402
5413
|
() => createStore3(() => ({
|
|
@@ -5516,8 +5527,8 @@ var DragDropContextClient = ({
|
|
|
5516
5527
|
]);
|
|
5517
5528
|
const sensors = useSensors();
|
|
5518
5529
|
const [dragListeners, setDragListeners] = useState15({});
|
|
5519
|
-
const dragMode =
|
|
5520
|
-
const initialSelector =
|
|
5530
|
+
const dragMode = useRef4(null);
|
|
5531
|
+
const initialSelector = useRef4(void 0);
|
|
5521
5532
|
return /* @__PURE__ */ jsx23("div", { id, children: /* @__PURE__ */ jsx23(
|
|
5522
5533
|
dragListenerContext.Provider,
|
|
5523
5534
|
{
|
|
@@ -6331,7 +6342,7 @@ var Components = () => {
|
|
|
6331
6342
|
|
|
6332
6343
|
// components/Puck/components/Preview/index.tsx
|
|
6333
6344
|
init_react_import();
|
|
6334
|
-
import { useCallback as useCallback12, useEffect as useEffect20, useRef as
|
|
6345
|
+
import { useCallback as useCallback12, useEffect as useEffect20, useRef as useRef5, useMemo as useMemo13 } from "react";
|
|
6335
6346
|
|
|
6336
6347
|
// components/AutoFrame/index.tsx
|
|
6337
6348
|
init_react_import();
|
|
@@ -6683,7 +6694,7 @@ var Preview3 = ({ id = "puck-preview" }) => {
|
|
|
6683
6694
|
);
|
|
6684
6695
|
const Frame = useMemo13(() => overrides.iframe, [overrides]);
|
|
6685
6696
|
const rootProps = root.props || root;
|
|
6686
|
-
const ref =
|
|
6697
|
+
const ref = useRef5(null);
|
|
6687
6698
|
useBubbleIframeEvents(ref);
|
|
6688
6699
|
const inner = !renderData ? /* @__PURE__ */ jsx32(
|
|
6689
6700
|
Page,
|
|
@@ -7115,7 +7126,7 @@ import {
|
|
|
7115
7126
|
useCallback as useCallback14,
|
|
7116
7127
|
useEffect as useEffect22,
|
|
7117
7128
|
useMemo as useMemo16,
|
|
7118
|
-
useRef as
|
|
7129
|
+
useRef as useRef6,
|
|
7119
7130
|
useState as useState20
|
|
7120
7131
|
} from "react";
|
|
7121
7132
|
|
|
@@ -7328,7 +7339,7 @@ var Canvas = () => {
|
|
|
7328
7339
|
viewports: s.state.ui.viewports
|
|
7329
7340
|
}))
|
|
7330
7341
|
);
|
|
7331
|
-
const frameRef =
|
|
7342
|
+
const frameRef = useRef6(null);
|
|
7332
7343
|
const [showTransition, setShowTransition] = useState20(false);
|
|
7333
7344
|
const defaultRender = useMemo16(() => {
|
|
7334
7345
|
const PuckDefault = ({ children }) => /* @__PURE__ */ jsx36(Fragment13, { children });
|
package/package.json
CHANGED