@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.
Files changed (3) hide show
  1. package/dist/index.js +174 -163
  2. package/dist/index.mjs +192 -181
  3. 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 document.querySelector("[data-dnd-container]");
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)("div", { className: getClassName5("inner"), "data-dnd-container": true, children: localState.arrayState.items.map((item, i) => {
2177
- const { _arrayId = `${id}-${i}`, _originalIndex = i } = item;
2178
- const data = Array.from(localState.value || [])[i] || {};
2179
- return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
2180
- Sortable,
2181
- {
2182
- id: _arrayId,
2183
- index: i,
2184
- disabled: readOnly,
2185
- children: ({ status, ref }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
2186
- "div",
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
- ref,
2189
- className: getClassNameItem({
2190
- isExpanded: arrayState.openId === _arrayId,
2191
- isDragging: status === "dragging",
2192
- readOnly
2193
- }),
2194
- children: [
2195
- /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
2196
- "div",
2197
- {
2198
- onClick: (e) => {
2199
- if (isDragging) return;
2200
- e.preventDefault();
2201
- e.stopPropagation();
2202
- if (arrayState.openId === _arrayId) {
2203
- setUi(
2204
- mapArrayStateToUi({
2205
- openId: ""
2206
- })
2207
- );
2208
- } else {
2209
- setUi(
2210
- mapArrayStateToUi({
2211
- openId: _arrayId
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("summary"),
2217
- children: [
2218
- field.getItemSummary ? field.getItemSummary(data, i) : `Item #${_originalIndex}`,
2219
- /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: getClassNameItem("rhs"), children: [
2220
- !readOnly && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: getClassNameItem("actions"), children: [
2221
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: getClassNameItem("action"), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
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
- subPath
2323
- );
2324
- })
2325
- }
2326
- ) })
2327
- ]
2328
- }
2329
- )
2330
- },
2331
- _arrayId
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)((val, ui) => {
3258
- setLocalValue(val);
3259
- onChangeDb(val, ui);
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 document.querySelector("[data-dnd-container]");
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("div", { className: getClassName5("inner"), "data-dnd-container": true, children: localState.arrayState.items.map((item, i) => {
1998
- const { _arrayId = `${id}-${i}`, _originalIndex = i } = item;
1999
- const data = Array.from(localState.value || [])[i] || {};
2000
- return /* @__PURE__ */ jsx8(
2001
- Sortable,
2002
- {
2003
- id: _arrayId,
2004
- index: i,
2005
- disabled: readOnly,
2006
- children: ({ status, ref }) => /* @__PURE__ */ jsxs3(
2007
- "div",
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
- ref,
2010
- className: getClassNameItem({
2011
- isExpanded: arrayState.openId === _arrayId,
2012
- isDragging: status === "dragging",
2013
- readOnly
2014
- }),
2015
- children: [
2016
- /* @__PURE__ */ jsxs3(
2017
- "div",
2018
- {
2019
- onClick: (e) => {
2020
- if (isDragging) return;
2021
- e.preventDefault();
2022
- e.stopPropagation();
2023
- if (arrayState.openId === _arrayId) {
2024
- setUi(
2025
- mapArrayStateToUi({
2026
- openId: ""
2027
- })
2028
- );
2029
- } else {
2030
- setUi(
2031
- mapArrayStateToUi({
2032
- openId: _arrayId
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("summary"),
2038
- children: [
2039
- field.getItemSummary ? field.getItemSummary(data, i) : `Item #${_originalIndex}`,
2040
- /* @__PURE__ */ jsxs3("div", { className: getClassNameItem("rhs"), children: [
2041
- !readOnly && /* @__PURE__ */ jsxs3("div", { className: getClassNameItem("actions"), children: [
2042
- /* @__PURE__ */ jsx8("div", { className: getClassNameItem("action"), children: /* @__PURE__ */ jsx8(
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
- subPath
2144
- );
2145
- })
2146
- }
2147
- ) })
2148
- ]
2149
- }
2150
- )
2151
- },
2152
- _arrayId
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((val, ui) => {
3085
- setLocalValue(val);
3086
- onChangeDb(val, ui);
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 useRef3,
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 useRef2
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 = useRef(null);
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 = useRef2(null);
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 = useRef3(null);
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 = useRef3(null);
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 = useRef3(null);
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 = useRef3(void 0);
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 useRef5, useState as useState20 } from "react";
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 useRef4, useEffect as useEffect16 } from "react";
5641
+ import { useRef as useRef5, useEffect as useEffect16 } from "react";
5631
5642
  function useOnValueChange(value, onChange, compare = Object.is, deps = []) {
5632
- const tracked = useRef4(value);
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 = useRef5(defaultFields);
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 useRef7, useMemo as useMemo14 } from "react";
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 = useRef7(null);
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 useRef8,
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 = useRef8(null);
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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@measured/puck",
3
- "version": "0.18.3-canary.154e7f7",
3
+ "version": "0.18.3-canary.934cfae",
4
4
  "author": "Measured Corporation Ltd <hello@measured.co>",
5
5
  "repository": "measuredco/puck",
6
6
  "bugs": "https://github.com/measuredco/puck/issues",