@measured/puck 0.18.2 → 0.18.3-canary.098fdd1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/index.js +176 -165
  2. package/dist/index.mjs +195 -185
  3. package/package.json +2 -2
package/dist/index.js CHANGED
@@ -1938,6 +1938,7 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => (input
1938
1938
  var import_modifiers = require("@dnd-kit/dom/modifiers");
1939
1939
  var import_jsx_runtime6 = require("react/jsx-runtime");
1940
1940
  var SortableProvider = ({
1941
+ container,
1941
1942
  children,
1942
1943
  onDragStart,
1943
1944
  onDragEnd,
@@ -1952,7 +1953,7 @@ var SortableProvider = ({
1952
1953
  modifiers: [
1953
1954
  import_modifiers.RestrictToElement.configure({
1954
1955
  element() {
1955
- return 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);
@@ -5034,7 +5045,7 @@ var DragDropContextClient = ({
5034
5045
  disableAutoScroll
5035
5046
  }) => {
5036
5047
  const { state, config, dispatch, resolveData } = useAppContext();
5037
- const id = (0, import_react32.useId)();
5048
+ const id = useSafeId();
5038
5049
  const { data } = state;
5039
5050
  const debouncedParamsRef = (0, import_react32.useRef)(null);
5040
5051
  const tempDisableFallback = useTempDisableFallback(100);
@@ -5517,7 +5528,7 @@ var Drawer = ({
5517
5528
  "Warning: The `direction` prop on Drawer is deprecated and no longer required to achieve multi-directional dragging."
5518
5529
  );
5519
5530
  }
5520
- const id = (0, import_react33.useId)();
5531
+ const id = useSafeId();
5521
5532
  const { ref } = useDroppableSafe({
5522
5533
  id,
5523
5534
  type: "void",
package/dist/index.mjs CHANGED
@@ -674,7 +674,7 @@ var IconButton = ({
674
674
  };
675
675
 
676
676
  // components/AutoField/fields/ArrayField/index.tsx
677
- import { useCallback as useCallback3, useEffect as useEffect4, useState as useState7 } from "react";
677
+ import { useCallback as useCallback3, useEffect as useEffect4, useRef, useState as useState7 } from "react";
678
678
 
679
679
  // components/DragIcon/index.tsx
680
680
  init_react_import();
@@ -1759,6 +1759,7 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => (input
1759
1759
  import { RestrictToElement } from "@dnd-kit/dom/modifiers";
1760
1760
  import { jsx as jsx6 } from "react/jsx-runtime";
1761
1761
  var SortableProvider = ({
1762
+ container,
1762
1763
  children,
1763
1764
  onDragStart,
1764
1765
  onDragEnd,
@@ -1773,7 +1774,7 @@ var SortableProvider = ({
1773
1774
  modifiers: [
1774
1775
  RestrictToElement.configure({
1775
1776
  element() {
1776
- return 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);
@@ -3117,7 +3128,7 @@ init_react_import();
3117
3128
  var styles_module_default10 = { "Drawer": "_Drawer_fkqfo_1", "Drawer-draggable": "_Drawer-draggable_fkqfo_8", "Drawer-draggableBg": "_Drawer-draggableBg_fkqfo_12", "Drawer-draggableFg": "_Drawer-draggableFg_fkqfo_21", "DrawerItem-draggable": "_DrawerItem-draggable_fkqfo_25", "DrawerItem--disabled": "_DrawerItem--disabled_fkqfo_38", "DrawerItem": "_DrawerItem_fkqfo_25", "Drawer--isDraggingFrom": "_Drawer--isDraggingFrom_fkqfo_48", "DrawerItem-name": "_DrawerItem-name_fkqfo_66" };
3118
3129
 
3119
3130
  // components/Drawer/index.tsx
3120
- import { useId as useId2, useMemo as useMemo9, useState as useState19 } from "react";
3131
+ import { useMemo as useMemo9, useState as useState19 } from "react";
3121
3132
 
3122
3133
  // components/DragDropContext/index.tsx
3123
3134
  init_react_import();
@@ -3127,8 +3138,7 @@ import {
3127
3138
  useCallback as useCallback11,
3128
3139
  useContext as useContext7,
3129
3140
  useEffect as useEffect15,
3130
- useId,
3131
- useRef as useRef3,
3141
+ useRef as useRef4,
3132
3142
  useState as useState18
3133
3143
  } from "react";
3134
3144
  import { AutoScroller, defaultPreset } from "@dnd-kit/dom";
@@ -3141,7 +3151,7 @@ import {
3141
3151
  useContext as useContext6,
3142
3152
  useEffect as useEffect14,
3143
3153
  useMemo as useMemo8,
3144
- useRef as useRef2
3154
+ useRef as useRef3
3145
3155
  } from "react";
3146
3156
 
3147
3157
  // components/DraggableComponent/index.tsx
@@ -3151,7 +3161,7 @@ import {
3151
3161
  useContext as useContext5,
3152
3162
  useEffect as useEffect10,
3153
3163
  useMemo as useMemo7,
3154
- useRef,
3164
+ useRef as useRef2,
3155
3165
  useState as useState14
3156
3166
  } from "react";
3157
3167
 
@@ -3401,7 +3411,7 @@ var DraggableComponent = ({
3401
3411
  }
3402
3412
  });
3403
3413
  const thisIsDragging = status === "dragging";
3404
- const ref = useRef(null);
3414
+ const ref = useRef2(null);
3405
3415
  const refSetter = useCallback7(
3406
3416
  (el) => {
3407
3417
  sortableRef(el);
@@ -3947,7 +3957,7 @@ var DropZoneEdit = forwardRef3(
3947
3957
  }
3948
3958
  return data.content || [];
3949
3959
  }, [data, zoneCompound]);
3950
- const ref = useRef2(null);
3960
+ const ref = useRef3(null);
3951
3961
  const acceptsTarget = useCallback10(
3952
3962
  (componentType) => {
3953
3963
  if (!componentType) {
@@ -4870,7 +4880,7 @@ function useDragListener(type, fn, deps = []) {
4870
4880
  }
4871
4881
  var AREA_CHANGE_DEBOUNCE_MS = 100;
4872
4882
  var useTempDisableFallback = (timeout3) => {
4873
- const lastFallbackDisable = useRef3(null);
4883
+ const lastFallbackDisable = useRef4(null);
4874
4884
  return useCallback11((manager) => {
4875
4885
  collisionStore.setState({ fallbackEnabled: false });
4876
4886
  const fallbackId = generateId();
@@ -4888,9 +4898,9 @@ var DragDropContextClient = ({
4888
4898
  disableAutoScroll
4889
4899
  }) => {
4890
4900
  const { state, config, dispatch, resolveData } = useAppContext();
4891
- const id = useId();
4901
+ const id = useSafeId();
4892
4902
  const { data } = state;
4893
- const debouncedParamsRef = useRef3(null);
4903
+ const debouncedParamsRef = useRef4(null);
4894
4904
  const tempDisableFallback = useTempDisableFallback(100);
4895
4905
  const [zoneStore] = useState18(
4896
4906
  () => createStore3(() => ({
@@ -5011,7 +5021,7 @@ var DragDropContextClient = ({
5011
5021
  const sensors = useSensors();
5012
5022
  const [dragListeners, setDragListeners] = useState18({});
5013
5023
  const [pathData, setPathData] = useState18();
5014
- const dragMode = useRef3(null);
5024
+ const dragMode = useRef4(null);
5015
5025
  const registerPath = useCallback11(
5016
5026
  (id2, selector, label) => {
5017
5027
  const [area] = getZoneId(selector.zone);
@@ -5040,7 +5050,7 @@ var DragDropContextClient = ({
5040
5050
  },
5041
5051
  [data, setPathData]
5042
5052
  );
5043
- const initialSelector = useRef3(void 0);
5053
+ const initialSelector = useRef4(void 0);
5044
5054
  return /* @__PURE__ */ jsx23("div", { id, children: /* @__PURE__ */ jsx23(
5045
5055
  dragListenerContext.Provider,
5046
5056
  {
@@ -5371,7 +5381,7 @@ var Drawer = ({
5371
5381
  "Warning: The `direction` prop on Drawer is deprecated and no longer required to achieve multi-directional dragging."
5372
5382
  );
5373
5383
  }
5374
- const id = useId2();
5384
+ const id = useSafeId();
5375
5385
  const { ref } = useDroppableSafe({
5376
5386
  id,
5377
5387
  type: "void",
@@ -5599,7 +5609,7 @@ import { useMemo as useMemo12 } from "react";
5599
5609
 
5600
5610
  // lib/use-resolved-fields.ts
5601
5611
  init_react_import();
5602
- import { useCallback as useCallback13, useEffect as useEffect17, useMemo as useMemo11, useRef as useRef5, useState as useState20 } from "react";
5612
+ import { useCallback as useCallback13, useEffect as useEffect17, useMemo as useMemo11, useRef as useRef6, useState as useState20 } from "react";
5603
5613
 
5604
5614
  // lib/use-parent.ts
5605
5615
  init_react_import();
@@ -5627,9 +5637,9 @@ var useParent = () => {
5627
5637
 
5628
5638
  // lib/use-on-value-change.ts
5629
5639
  init_react_import();
5630
- import { useRef as useRef4, useEffect as useEffect16 } from "react";
5640
+ import { useRef as useRef5, useEffect as useEffect16 } from "react";
5631
5641
  function useOnValueChange(value, onChange, compare = Object.is, deps = []) {
5632
- const tracked = useRef4(value);
5642
+ const tracked = useRef5(value);
5633
5643
  useEffect16(() => {
5634
5644
  const oldValue = tracked.current;
5635
5645
  if (!compare(value, oldValue)) {
@@ -5668,7 +5678,7 @@ var useResolvedFields = ({
5668
5678
  id: selectedItem == null ? void 0 : selectedItem.props.id
5669
5679
  });
5670
5680
  const [fieldsLoading, setFieldsLoading] = useState20(false);
5671
- const lastFields = useRef5(defaultFields);
5681
+ const lastFields = useRef6(defaultFields);
5672
5682
  const defaultResolveFields = (_componentData, _params) => defaultFields;
5673
5683
  const componentData = useMemo11(
5674
5684
  () => selectedItem ? selectedItem : { props: rootProps, readOnly: data.root.readOnly || {} },
@@ -6059,7 +6069,7 @@ var Components = () => {
6059
6069
 
6060
6070
  // components/Puck/components/Preview/index.tsx
6061
6071
  init_react_import();
6062
- import { useCallback as useCallback14, useEffect as useEffect20, useRef as useRef7, useMemo as useMemo14 } from "react";
6072
+ import { useCallback as useCallback14, useEffect as useEffect20, useRef as useRef8, useMemo as useMemo14 } from "react";
6063
6073
 
6064
6074
  // components/AutoFrame/index.tsx
6065
6075
  init_react_import();
@@ -6433,7 +6443,7 @@ var Preview2 = ({ id = "puck-preview" }) => {
6433
6443
  );
6434
6444
  const Frame = useMemo14(() => overrides.iframe, [overrides]);
6435
6445
  const rootProps = state.data.root.props || state.data.root;
6436
- const ref = useRef7(null);
6446
+ const ref = useRef8(null);
6437
6447
  useBubbleIframeEvents(ref);
6438
6448
  const inner = state.ui.previewMode === "edit" ? /* @__PURE__ */ jsx33(
6439
6449
  Page,
@@ -6988,7 +6998,7 @@ import {
6988
6998
  useCallback as useCallback16,
6989
6999
  useEffect as useEffect22,
6990
7000
  useMemo as useMemo17,
6991
- useRef as useRef8,
7001
+ useRef as useRef9,
6992
7002
  useState as useState25
6993
7003
  } from "react";
6994
7004
 
@@ -7177,7 +7187,7 @@ var Canvas = () => {
7177
7187
  const { status, iframe } = useAppContext();
7178
7188
  const { dispatch, state, overrides, setUi, zoomConfig, setZoomConfig } = useAppContext();
7179
7189
  const { ui } = state;
7180
- const frameRef = useRef8(null);
7190
+ const frameRef = useRef9(null);
7181
7191
  const [showTransition, setShowTransition] = useState25(false);
7182
7192
  const defaultRender = useMemo17(() => {
7183
7193
  const PuckDefault = ({ children }) => /* @__PURE__ */ jsx37(Fragment13, { children });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@measured/puck",
3
- "version": "0.18.2",
3
+ "version": "0.18.3-canary.098fdd1",
4
4
  "author": "Measured Corporation Ltd <hello@measured.co>",
5
5
  "repository": "measuredco/puck",
6
6
  "bugs": "https://github.com/measuredco/puck/issues",
@@ -75,7 +75,7 @@
75
75
  "react-hotkeys-hook": "^4.6.1",
76
76
  "use-debounce": "^9.0.4",
77
77
  "uuid": "^9.0.1",
78
- "zustand": "^5.0.2"
78
+ "zustand": "^4.5.6"
79
79
  },
80
80
  "peerDependencies": {
81
81
  "react": "^17.0.0 || ^18.0.0 || ^19.0.0"