@measured/puck 0.17.4-canary.62d9972 → 0.17.4-canary.e778246

package/dist/index.d.mts

@@ -156,7 +156,9 @@ declare function Puck<UserConfig extends Config = Config, G extends UserGenerics
 }): react_jsx_runtime.JSX.Element;
 declare namespace Puck {
     var Components: () => react_jsx_runtime.JSX.Element;
-    var Fields: () => react_jsx_runtime.JSX.Element;
+    var Fields: ({ wrapFields }: {
+        wrapFields?: boolean;
+    }) => react_jsx_runtime.JSX.Element;
     var Outline: () => react_jsx_runtime.JSX.Element;
     var Preview: ({ id }: {
         id?: string;

package/dist/index.d.ts

@@ -156,7 +156,9 @@ declare function Puck<UserConfig extends Config = Config, G extends UserGenerics
 }): react_jsx_runtime.JSX.Element;
 declare namespace Puck {
     var Components: () => react_jsx_runtime.JSX.Element;
-    var Fields: () => react_jsx_runtime.JSX.Element;
+    var Fields: ({ wrapFields }: {
+        wrapFields?: boolean;
+    }) => react_jsx_runtime.JSX.Element;
     var Outline: () => react_jsx_runtime.JSX.Element;
     var Preview: ({ id }: {
         id?: string;

package/dist/index.js

@@ -1736,12 +1736,13 @@ var DefaultField = ({
   field,
   onChange,
   readOnly,
-  value,
+  value: _value,
   name,
   label,
   Label,
   id
 }) => {
+  const value = _value;
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     Label,
     {
@@ -1759,7 +1760,7 @@ var DefaultField = ({
           type: field.type,
           title: label || name,
           name,
-          value: typeof value === "undefined" ? "" : value.toString(),
+          value: (value == null ? void 0 : value.toString) ? value.toString() : "",
           onChange: (e) => {
             if (field.type === "number") {
               const numberValue = Number(e.currentTarget.value);
@@ -3345,7 +3346,7 @@ function DropZone(props) {
 
 // components/Puck/index.tsx
 init_react_import();
-var import_react37 = require("react");
+var import_react39 = require("react");
 
 // lib/use-placeholder-style.ts
 init_react_import();
@@ -3956,33 +3957,58 @@ init_react_import();
 var styles_module_default16 = { "PuckFields": "_PuckFields_jp3lw_1", "PuckFields--isLoading": "_PuckFields--isLoading_jp3lw_6", "PuckFields-loadingOverlay": "_PuckFields-loadingOverlay_jp3lw_10", "PuckFields-loadingOverlayInner": "_PuckFields-loadingOverlayInner_jp3lw_25" };
 
 // components/Puck/components/Fields/index.tsx
-var import_react26 = require("react");
+var import_react28 = require("react");
+
+// lib/use-resolved-fields.ts
+init_react_import();
+var import_react27 = require("react");
 
 // lib/use-parent.ts
 init_react_import();
 var import_react25 = require("react");
-var useParent = (itemSelector) => {
+var getParent = (itemSelector, pathData, data) => {
   var _a;
-  const { selectedItem, state } = useAppContext();
-  const { pathData } = (0, import_react25.useContext)(dropZoneContext) || {};
-  const item = itemSelector ? getItem(itemSelector, state.data) : selectedItem;
-  const breadcrumbs = convertPathDataToBreadcrumbs(item, pathData, state.data);
+  if (!itemSelector) return null;
+  const item = getItem(itemSelector, data);
+  const breadcrumbs = convertPathDataToBreadcrumbs(item, pathData, data);
   const lastItem = breadcrumbs[breadcrumbs.length - 1];
-  const parent = (lastItem == null ? void 0 : lastItem.selector) ? (_a = getItem(lastItem.selector, state.data)) != null ? _a : null : null;
+  const parent = (lastItem == null ? void 0 : lastItem.selector) ? (_a = getItem(lastItem.selector, data)) != null ? _a : null : null;
   return parent || null;
 };
+var useGetParent = () => {
+  const { state } = useAppContext();
+  const { pathData } = (0, import_react25.useContext)(dropZoneContext) || {};
+  return (0, import_react25.useCallback)(
+    () => getParent(state.ui.itemSelector, pathData, state.data),
+    [state.ui.itemSelector, pathData, state.data]
+  );
+};
+var useParent = () => {
+  return useGetParent()();
+};
 
-// components/Puck/components/Fields/index.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
-var getClassName21 = get_class_name_factory_default("PuckFields", styles_module_default16);
+// lib/use-on-value-change.ts
+init_react_import();
+var import_react26 = require("react");
+function useOnValueChange(value, onChange, compare = Object.is, deps = []) {
+  const tracked = (0, import_react26.useRef)(value);
+  (0, import_react26.useEffect)(() => {
+    const oldValue = tracked.current;
+    if (!compare(value, oldValue)) {
+      tracked.current = value;
+      onChange(value, oldValue);
+    }
+  }, [onChange, compare, value, ...deps]);
+}
+
+// lib/selector-is.ts
+init_react_import();
+var selectorIs = (a, b) => (a == null ? void 0 : a.zone) === (b == null ? void 0 : b.zone) && (a == null ? void 0 : a.index) === (b == null ? void 0 : b.index);
+
+// lib/use-resolved-fields.ts
 var defaultPageFields = {
   title: { type: "text" }
 };
-var DefaultFields = ({
-  children
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_jsx_runtime28.Fragment, { children });
-};
 var useResolvedFields = () => {
   var _a, _b;
   const { selectedItem, state, config } = useAppContext();
@@ -3990,20 +4016,21 @@ var useResolvedFields = () => {
   const { data } = state;
   const rootFields = ((_a = config.root) == null ? void 0 : _a.fields) || defaultPageFields;
   const componentConfig = selectedItem ? config.components[selectedItem.type] : null;
-  const defaultFields = (0, import_react26.useMemo)(
+  const defaultFields = (0, import_react27.useMemo)(
     () => (selectedItem ? componentConfig == null ? void 0 : componentConfig.fields : rootFields) || {},
     [selectedItem, rootFields, componentConfig == null ? void 0 : componentConfig.fields]
   );
   const rootProps = data.root.props || data.root;
-  const [lastSelectedData, setLastSelectedData] = (0, import_react26.useState)({});
-  const [resolvedFields, setResolvedFields] = (0, import_react26.useState)(defaultFields);
-  const [fieldsLoading, setFieldsLoading] = (0, import_react26.useState)(false);
+  const [lastSelectedData, setLastSelectedData] = (0, import_react27.useState)({});
+  const [resolvedFields, setResolvedFields] = (0, import_react27.useState)(defaultFields);
+  const [fieldsLoading, setFieldsLoading] = (0, import_react27.useState)(false);
+  const lastFields = (0, import_react27.useRef)(defaultFields);
   const defaultResolveFields = (_componentData, _params) => defaultFields;
   const componentData = selectedItem ? selectedItem : { props: rootProps, readOnly: data.root.readOnly };
   const hasComponentResolver = selectedItem && (componentConfig == null ? void 0 : componentConfig.resolveFields);
   const hasRootResolver = !selectedItem && ((_b = config.root) == null ? void 0 : _b.resolveFields);
   const hasResolver = hasComponentResolver || hasRootResolver;
-  const resolveFields = (0, import_react26.useCallback)(
+  const resolveFields = (0, import_react27.useCallback)(
     (..._0) => __async(void 0, [..._0], function* (fields = {}) {
       var _a2;
       const lastData = ((_a2 = lastSelectedData.props) == null ? void 0 : _a2.id) === componentData.props.id ? lastSelectedData : null;
@@ -4015,7 +4042,7 @@ var useResolvedFields = () => {
           {
             changed,
             fields,
-            lastFields: resolvedFields,
+            lastFields: lastFields.current,
             lastData,
             appState: state,
             parent
@@ -4026,7 +4053,7 @@ var useResolvedFields = () => {
         return yield config.root.resolveFields(componentData, {
           changed,
           fields,
-          lastFields: resolvedFields,
+          lastFields: lastFields.current,
           lastData,
           appState: state,
           parent
@@ -4035,40 +4062,56 @@ var useResolvedFields = () => {
       return defaultResolveFields(componentData, {
         changed,
         fields,
-        lastFields: resolvedFields,
+        lastFields: lastFields.current,
         lastData
       });
     }),
-    [data, config, componentData, selectedItem, resolvedFields, state, parent]
+    [data, config, componentData, selectedItem, state, parent]
   );
-  const [hasParent, setHasParent] = (0, import_react26.useState)(false);
-  (0, import_react26.useEffect)(() => {
-    setHasParent(!!parent);
-  }, [parent]);
-  (0, import_react26.useEffect)(() => {
+  const triggerResolver = (0, import_react27.useCallback)(() => {
     var _a2, _b2;
-    if (!((_a2 = state.ui.itemSelector) == null ? void 0 : _a2.zone) || ((_b2 = state.ui.itemSelector) == null ? void 0 : _b2.zone) === "default-zone" || hasParent) {
+    if (!((_a2 = state.ui.itemSelector) == null ? void 0 : _a2.zone) || ((_b2 = state.ui.itemSelector) == null ? void 0 : _b2.zone) === "default-zone" || parent) {
       if (hasResolver) {
         setFieldsLoading(true);
         resolveFields(defaultFields).then((fields) => {
           setResolvedFields(fields || {});
+          lastFields.current = fields;
           setFieldsLoading(false);
         });
-      } else {
-        setResolvedFields(defaultFields);
+        return;
       }
     }
-  }, [
-    data,
-    defaultFields,
+    setResolvedFields(defaultFields);
+  }, [defaultFields, state.ui.itemSelector, hasResolver, parent]);
+  useOnValueChange(
     state.ui.itemSelector,
-    selectedItem,
-    hasResolver,
-    hasParent
-  ]);
+    () => {
+      lastFields.current = defaultFields;
+    },
+    selectorIs
+  );
+  useOnValueChange(
+    { data, parent, itemSelector: state.ui.itemSelector },
+    () => {
+      triggerResolver();
+    },
+    (a, b) => JSON.stringify(a) === JSON.stringify(b)
+  );
+  (0, import_react27.useEffect)(() => {
+    triggerResolver();
+  }, []);
   return [resolvedFields, fieldsLoading];
 };
-var Fields = () => {
+
+// components/Puck/components/Fields/index.tsx
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var getClassName21 = get_class_name_factory_default("PuckFields", styles_module_default16);
+var DefaultFields = ({
+  children
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_jsx_runtime28.Fragment, { children });
+};
+var Fields = ({ wrapFields = true }) => {
   var _a, _b;
   const {
     selectedItem,
@@ -4086,7 +4129,7 @@ var Fields = () => {
   const componentResolving = selectedItem ? ((_a = componentState[selectedItem == null ? void 0 : selectedItem.props.id]) == null ? void 0 : _a.loadingCount) > 0 : ((_b = componentState["puck-root"]) == null ? void 0 : _b.loadingCount) > 0;
   const isLoading = fieldsResolving || componentResolving;
   const rootProps = data.root.props || data.root;
-  const Wrapper = (0, import_react26.useMemo)(() => overrides.fields || DefaultFields, [overrides]);
+  const Wrapper = (0, import_react28.useMemo)(() => overrides.fields || DefaultFields, [overrides]);
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
     "form",
     {
@@ -4209,7 +4252,7 @@ init_react_import();
 
 // lib/use-component-list.tsx
 init_react_import();
-var import_react27 = require("react");
+var import_react29 = require("react");
 
 // components/ComponentList/index.tsx
 init_react_import();
@@ -4287,8 +4330,8 @@ ComponentList.Item = ComponentListItem;
 // lib/use-component-list.tsx
 var import_jsx_runtime30 = require("react/jsx-runtime");
 var useComponentList = (config, ui) => {
-  const [componentList, setComponentList] = (0, import_react27.useState)();
-  (0, import_react27.useEffect)(() => {
+  const [componentList, setComponentList] = (0, import_react29.useState)();
+  (0, import_react29.useEffect)(() => {
     var _a, _b, _c;
     if (Object.keys(ui.componentList).length > 0) {
       const matchedComponents = [];
@@ -4357,22 +4400,22 @@ var useComponentList = (config, ui) => {
 };
 
 // components/Puck/components/Components/index.tsx
-var import_react28 = require("react");
+var import_react30 = require("react");
 var import_jsx_runtime31 = require("react/jsx-runtime");
 var Components = () => {
   const { config, state, overrides } = useAppContext();
   const componentList = useComponentList(config, state.ui);
-  const Wrapper = (0, import_react28.useMemo)(() => overrides.components || "div", [overrides]);
+  const Wrapper = (0, import_react30.useMemo)(() => overrides.components || "div", [overrides]);
   return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Wrapper, { children: componentList ? componentList : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ComponentList, { id: "all" }) });
 };
 
 // components/Puck/components/Preview/index.tsx
 init_react_import();
-var import_react30 = require("react");
+var import_react32 = require("react");
 
 // components/AutoFrame/index.tsx
 init_react_import();
-var import_react29 = require("react");
+var import_react31 = require("react");
 var import_object_hash = __toESM(require("object-hash"));
 var import_react_dom2 = require("react-dom");
 var import_jsx_runtime32 = require("react/jsx-runtime");
@@ -4418,7 +4461,7 @@ var CopyHostStyles = ({
   onStylesLoaded = () => null
 }) => {
   const { document: doc, window: win } = useFrame();
-  (0, import_react29.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     if (!win || !doc) {
       return () => {
       };
@@ -4577,8 +4620,8 @@ var CopyHostStyles = ({
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_jsx_runtime32.Fragment, { children });
 };
-var autoFrameContext = (0, import_react29.createContext)({});
-var useFrame = () => (0, import_react29.useContext)(autoFrameContext);
+var autoFrameContext = (0, import_react31.createContext)({});
+var useFrame = () => (0, import_react31.useContext)(autoFrameContext);
 function AutoFrame(_a) {
   var _b = _a, {
     children,
@@ -4593,11 +4636,11 @@ function AutoFrame(_a) {
     "id",
     "onStylesLoaded"
   ]);
-  const [loaded, setLoaded] = (0, import_react29.useState)(false);
-  const [ctx, setCtx] = (0, import_react29.useState)({});
-  const ref = (0, import_react29.useRef)(null);
-  const [mountTarget, setMountTarget] = (0, import_react29.useState)();
-  (0, import_react29.useEffect)(() => {
+  const [loaded, setLoaded] = (0, import_react31.useState)(false);
+  const [ctx, setCtx] = (0, import_react31.useState)({});
+  const ref = (0, import_react31.useRef)(null);
+  const [mountTarget, setMountTarget] = (0, import_react31.useState)();
+  (0, import_react31.useEffect)(() => {
     var _a2;
     if (ref.current) {
       setCtx({
@@ -4633,7 +4676,7 @@ var import_jsx_runtime33 = require("react/jsx-runtime");
 var getClassName23 = get_class_name_factory_default("PuckPreview", styles_module_default18);
 var Preview = ({ id = "puck-preview" }) => {
   const { config, dispatch, state, setStatus, iframe, overrides } = useAppContext();
-  const Page = (0, import_react30.useCallback)(
+  const Page = (0, import_react32.useCallback)(
     (pageProps) => {
       var _a, _b;
       return ((_a = config.root) == null ? void 0 : _a.render) ? (_b = config.root) == null ? void 0 : _b.render(__spreadValues({
@@ -4642,7 +4685,7 @@ var Preview = ({ id = "puck-preview" }) => {
     },
     [config.root]
   );
-  const Frame = (0, import_react30.useMemo)(() => overrides.iframe, [overrides]);
+  const Frame = (0, import_react32.useMemo)(() => overrides.iframe, [overrides]);
   const rootProps = state.data.root.props || state.data.root;
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     "div",
@@ -4731,7 +4774,7 @@ var scrollIntoView = (el) => {
 };
 
 // components/LayerTree/index.tsx
-var import_react31 = require("react");
+var import_react33 = require("react");
 
 // lib/is-child-of-zone.ts
 init_react_import();
@@ -4758,7 +4801,7 @@ var LayerTree = ({
   label
 }) => {
   const zones = data.zones || {};
-  const ctx = (0, import_react31.useContext)(dropZoneContext);
+  const ctx = (0, import_react33.useContext)(dropZoneContext);
   return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: getClassName24("zoneTitle"), children: [
       /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassName24("zoneIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Layers, { size: "16" }) }),
@@ -4864,13 +4907,13 @@ var LayerTree = ({
 };
 
 // components/Puck/components/Outline/index.tsx
-var import_react32 = require("react");
+var import_react34 = require("react");
 var import_jsx_runtime35 = require("react/jsx-runtime");
 var Outline = () => {
   const { dispatch, state, overrides, config } = useAppContext();
   const { data, ui } = state;
   const { itemSelector } = ui;
-  const setItemSelector = (0, import_react32.useCallback)(
+  const setItemSelector = (0, import_react34.useCallback)(
     (newItemSelector) => {
       dispatch({
         type: "setUi",
@@ -4879,7 +4922,7 @@ var Outline = () => {
     },
     []
   );
-  const Wrapper = (0, import_react32.useMemo)(() => overrides.outline || "div", [overrides]);
+  const Wrapper = (0, import_react34.useMemo)(() => overrides.outline || "div", [overrides]);
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Wrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(dropZoneContext.Consumer, { children: (ctx) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
     (ctx == null ? void 0 : ctx.activeZones) && (ctx == null ? void 0 : ctx.activeZones[rootDroppableId]) && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       LayerTree,
@@ -4993,19 +5036,19 @@ function usePuckHistory({
 
 // lib/use-history-store.ts
 init_react_import();
-var import_react33 = require("react");
+var import_react35 = require("react");
 var import_use_debounce3 = require("use-debounce");
 var EMPTY_HISTORY_INDEX = 0;
 function useHistoryStore(initialHistory) {
   var _a, _b;
-  const [histories, setHistories] = (0, import_react33.useState)(
+  const [histories, setHistories] = (0, import_react35.useState)(
     (_a = initialHistory == null ? void 0 : initialHistory.histories) != null ? _a : []
   );
   const updateHistories = (histories2) => {
     setHistories(histories2);
     setIndex(histories2.length - 1);
   };
-  const [index, setIndex] = (0, import_react33.useState)(
+  const [index, setIndex] = (0, import_react35.useState)(
     (_b = initialHistory == null ? void 0 : initialHistory.index) != null ? _b : EMPTY_HISTORY_INDEX
   );
   const hasPast = index > EMPTY_HISTORY_INDEX;
@@ -5165,11 +5208,11 @@ var getBox = function getBox2(el) {
 };
 
 // components/Puck/components/Canvas/index.tsx
-var import_react35 = require("react");
+var import_react37 = require("react");
 
 // components/ViewportControls/index.tsx
 init_react_import();
-var import_react34 = require("react");
+var import_react36 = require("react");
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/ViewportControls/styles.module.css#css-module
 init_react_import();
@@ -5192,8 +5235,8 @@ var ViewportButton = ({
   onClick
 }) => {
   const { state } = useAppContext();
-  const [isActive, setIsActive] = (0, import_react34.useState)(false);
-  (0, import_react34.useEffect)(() => {
+  const [isActive, setIsActive] = (0, import_react36.useState)(false);
+  (0, import_react36.useEffect)(() => {
     setIsActive(width === state.ui.viewports.current.width);
   }, [width, state.ui.viewports.current.width]);
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: getClassNameButton({ isActive }), children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
@@ -5229,7 +5272,7 @@ var ViewportControls = ({
   const defaultsContainAutoZoom = defaultZoomOptions.find(
     (option) => option.value === autoZoom
   );
-  const zoomOptions = (0, import_react34.useMemo)(
+  const zoomOptions = (0, import_react36.useMemo)(
     () => [
       ...defaultZoomOptions,
       ...defaultsContainAutoZoom ? [] : [
@@ -5352,17 +5395,17 @@ var Canvas = () => {
   const { status, iframe } = useAppContext();
   const { dispatch, state, overrides, setUi, zoomConfig, setZoomConfig } = useAppContext();
   const { ui } = state;
-  const frameRef = (0, import_react35.useRef)(null);
-  const [showTransition, setShowTransition] = (0, import_react35.useState)(false);
-  const defaultRender = (0, import_react35.useMemo)(() => {
+  const frameRef = (0, import_react37.useRef)(null);
+  const [showTransition, setShowTransition] = (0, import_react37.useState)(false);
+  const defaultRender = (0, import_react37.useMemo)(() => {
     const PuckDefault = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_jsx_runtime37.Fragment, { children });
     return PuckDefault;
   }, []);
-  const CustomPreview = (0, import_react35.useMemo)(
+  const CustomPreview = (0, import_react37.useMemo)(
     () => overrides.preview || defaultRender,
     [overrides]
   );
-  const getFrameDimensions = (0, import_react35.useCallback)(() => {
+  const getFrameDimensions = (0, import_react37.useCallback)(() => {
     if (frameRef.current) {
       const frame = frameRef.current;
       const box = getBox(frame);
@@ -5370,7 +5413,7 @@ var Canvas = () => {
     }
     return { width: 0, height: 0 };
   }, [frameRef]);
-  const resetAutoZoom = (0, import_react35.useCallback)(
+  const resetAutoZoom = (0, import_react37.useCallback)(
     (ui2 = state.ui) => {
       if (frameRef.current) {
         setZoomConfig(
@@ -5380,11 +5423,11 @@ var Canvas = () => {
     },
     [frameRef, zoomConfig, state.ui]
   );
-  (0, import_react35.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     setShowTransition(false);
     resetAutoZoom();
   }, [frameRef, ui.leftSideBarVisible, ui.rightSideBarVisible]);
-  (0, import_react35.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     const { height: frameHeight } = getFrameDimensions();
     if (ui.viewports.current.height === "auto") {
       setZoomConfig(__spreadProps(__spreadValues({}, zoomConfig), {
@@ -5392,13 +5435,13 @@ var Canvas = () => {
       }));
     }
   }, [zoomConfig.zoom]);
-  (0, import_react35.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     if (ZOOM_ON_CHANGE) {
       setShowTransition(true);
       resetAutoZoom(ui);
     }
   }, [ui.viewports.current.width]);
-  (0, import_react35.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     const observer = new ResizeObserver(() => {
       setShowTransition(false);
       resetAutoZoom();
@@ -5410,8 +5453,8 @@ var Canvas = () => {
       observer.disconnect();
     };
   }, []);
-  const [showLoader, setShowLoader] = (0, import_react35.useState)(false);
-  (0, import_react35.useEffect)(() => {
+  const [showLoader, setShowLoader] = (0, import_react37.useState)(false);
+  (0, import_react37.useEffect)(() => {
     setTimeout(() => {
       setShowLoader(true);
     }, 500);
@@ -5514,7 +5557,7 @@ var insertComponent = (componentType, zone, index, {
 
 // lib/use-loaded-overrides.ts
 init_react_import();
-var import_react36 = require("react");
+var import_react38 = require("react");
 
 // lib/load-overrides.ts
 init_react_import();
@@ -5553,7 +5596,7 @@ var useLoadedOverrides = ({
   overrides,
   plugins
 }) => {
-  return (0, import_react36.useMemo)(() => {
+  return (0, import_react38.useMemo)(() => {
     return loadOverrides({ overrides, plugins });
   }, [plugins, overrides]);
 };
@@ -5592,7 +5635,7 @@ function Puck({
     enabled: true,
     waitForStyles: true
   }, _iframe);
-  const [generatedAppState] = (0, import_react37.useState)(() => {
+  const [generatedAppState] = (0, import_react39.useState)(() => {
     var _a2, _b2, _c, _d, _e, _f, _g, _h, _i;
     const initial = __spreadValues(__spreadValues({}, defaultAppState.ui), initialUi);
     let clientUiState = {};
@@ -5664,14 +5707,14 @@ function Puck({
     histories,
     index: initialHistoryIndex
   });
-  const [reducer] = (0, import_react37.useState)(
+  const [reducer] = (0, import_react39.useState)(
     () => createReducer({
       config,
       record: historyStore.record,
       onAction
     })
   );
-  const [appState, dispatch] = (0, import_react37.useReducer)(
+  const [appState, dispatch] = (0, import_react39.useReducer)(
     reducer,
     flushZones(initialAppState)
   );
@@ -5682,9 +5725,9 @@ function Puck({
     historyStore,
     iframeEnabled: (_a = _iframe == null ? void 0 : _iframe.enabled) != null ? _a : true
   });
-  const [menuOpen, setMenuOpen] = (0, import_react37.useState)(false);
+  const [menuOpen, setMenuOpen] = (0, import_react39.useState)(false);
   const { itemSelector, leftSideBarVisible, rightSideBarVisible } = ui;
-  const setItemSelector = (0, import_react37.useCallback)(
+  const setItemSelector = (0, import_react39.useCallback)(
     (newItemSelector) => {
       if (newItemSelector === itemSelector) return;
       dispatch({
@@ -5696,13 +5739,13 @@ function Puck({
     [itemSelector]
   );
   const selectedItem = itemSelector ? getItem(itemSelector, data) : null;
-  (0, import_react37.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     if (onChange) onChange(data);
   }, [data]);
   const { onDragStartOrUpdate, placeholderStyle } = usePlaceholderStyle();
-  const [draggedItem, setDraggedItem] = (0, import_react37.useState)();
+  const [draggedItem, setDraggedItem] = (0, import_react39.useState)();
   const rootProps = data.root.props || data.root;
-  const toggleSidebars = (0, import_react37.useCallback)(
+  const toggleSidebars = (0, import_react39.useCallback)(
     (sidebar) => {
       const widerViewport = window.matchMedia("(min-width: 638px)").matches;
       const sideBarVisible = sidebar === "left" ? leftSideBarVisible : rightSideBarVisible;
@@ -5716,7 +5759,7 @@ function Puck({
     },
     [dispatch, leftSideBarVisible, rightSideBarVisible]
   );
-  (0, import_react37.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     if (!window.matchMedia("(min-width: 638px)").matches) {
       dispatch({
         type: "setUi",
@@ -5739,7 +5782,7 @@ function Puck({
       window.removeEventListener("resize", handleResize);
     };
   }, []);
-  const defaultHeaderRender = (0, import_react37.useMemo)(() => {
+  const defaultHeaderRender = (0, import_react39.useMemo)(() => {
     if (renderHeader) {
       console.warn(
         "`renderHeader` is deprecated. Please use `overrides.header` and the `usePuck` hook instead"
@@ -5753,7 +5796,7 @@ function Puck({
     }
     return DefaultOverride;
   }, [renderHeader]);
-  const defaultHeaderActionsRender = (0, import_react37.useMemo)(() => {
+  const defaultHeaderActionsRender = (0, import_react39.useMemo)(() => {
     if (renderHeaderActions) {
       console.warn(
         "`renderHeaderActions` is deprecated. Please use `overrides.headerActions` and the `usePuck` hook instead."
@@ -5770,20 +5813,20 @@ function Puck({
     overrides,
     plugins
   });
-  const CustomPuck = (0, import_react37.useMemo)(
+  const CustomPuck = (0, import_react39.useMemo)(
     () => loadedOverrides.puck || DefaultOverride,
     [loadedOverrides]
   );
-  const CustomHeader = (0, import_react37.useMemo)(
+  const CustomHeader = (0, import_react39.useMemo)(
     () => loadedOverrides.header || defaultHeaderRender,
     [loadedOverrides]
   );
-  const CustomHeaderActions = (0, import_react37.useMemo)(
+  const CustomHeaderActions = (0, import_react39.useMemo)(
     () => loadedOverrides.headerActions || defaultHeaderActionsRender,
     [loadedOverrides]
   );
-  const [mounted, setMounted] = (0, import_react37.useState)(false);
-  (0, import_react37.useEffect)(() => {
+  const [mounted, setMounted] = (0, import_react39.useState)(false);
+  (0, import_react39.useEffect)(() => {
     setMounted(true);
   }, []);
   const selectedComponentConfig = selectedItem && config.components[selectedItem.type];

package/dist/index.mjs

@@ -1551,12 +1551,13 @@ var DefaultField = ({
   field,
   onChange,
   readOnly,
-  value,
+  value: _value,
   name,
   label,
   Label,
   id
 }) => {
+  const value = _value;
   return /* @__PURE__ */ jsx11(
     Label,
     {
@@ -1574,7 +1575,7 @@ var DefaultField = ({
           type: field.type,
           title: label || name,
           name,
-          value: typeof value === "undefined" ? "" : value.toString(),
+          value: (value == null ? void 0 : value.toString) ? value.toString() : "",
           onChange: (e) => {
             if (field.type === "number") {
               const numberValue = Number(e.currentTarget.value);
@@ -3179,9 +3180,9 @@ function DropZone(props) {
 // components/Puck/index.tsx
 init_react_import();
 import {
-  useCallback as useCallback11,
-  useEffect as useEffect18,
-  useMemo as useMemo16,
+  useCallback as useCallback12,
+  useEffect as useEffect19,
+  useMemo as useMemo17,
   useReducer,
   useState as useState21
 } from "react";
@@ -3795,33 +3796,58 @@ init_react_import();
 var styles_module_default16 = { "PuckFields": "_PuckFields_jp3lw_1", "PuckFields--isLoading": "_PuckFields--isLoading_jp3lw_6", "PuckFields-loadingOverlay": "_PuckFields-loadingOverlay_jp3lw_10", "PuckFields-loadingOverlayInner": "_PuckFields-loadingOverlayInner_jp3lw_25" };
 
 // components/Puck/components/Fields/index.tsx
-import { useCallback as useCallback7, useEffect as useEffect13, useMemo as useMemo9, useState as useState15 } from "react";
+import { useMemo as useMemo10 } from "react";
+
+// lib/use-resolved-fields.ts
+init_react_import();
+import { useCallback as useCallback8, useEffect as useEffect14, useMemo as useMemo9, useRef as useRef3, useState as useState15 } from "react";
 
 // lib/use-parent.ts
 init_react_import();
-import { useContext as useContext7 } from "react";
-var useParent = (itemSelector) => {
+import { useCallback as useCallback7, useContext as useContext7 } from "react";
+var getParent = (itemSelector, pathData, data) => {
   var _a;
-  const { selectedItem, state } = useAppContext();
-  const { pathData } = useContext7(dropZoneContext) || {};
-  const item = itemSelector ? getItem(itemSelector, state.data) : selectedItem;
-  const breadcrumbs = convertPathDataToBreadcrumbs(item, pathData, state.data);
+  if (!itemSelector) return null;
+  const item = getItem(itemSelector, data);
+  const breadcrumbs = convertPathDataToBreadcrumbs(item, pathData, data);
   const lastItem = breadcrumbs[breadcrumbs.length - 1];
-  const parent = (lastItem == null ? void 0 : lastItem.selector) ? (_a = getItem(lastItem.selector, state.data)) != null ? _a : null : null;
+  const parent = (lastItem == null ? void 0 : lastItem.selector) ? (_a = getItem(lastItem.selector, data)) != null ? _a : null : null;
   return parent || null;
 };
+var useGetParent = () => {
+  const { state } = useAppContext();
+  const { pathData } = useContext7(dropZoneContext) || {};
+  return useCallback7(
+    () => getParent(state.ui.itemSelector, pathData, state.data),
+    [state.ui.itemSelector, pathData, state.data]
+  );
+};
+var useParent = () => {
+  return useGetParent()();
+};
 
-// components/Puck/components/Fields/index.tsx
-import { Fragment as Fragment12, jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
-var getClassName21 = get_class_name_factory_default("PuckFields", styles_module_default16);
+// lib/use-on-value-change.ts
+init_react_import();
+import { useRef as useRef2, useEffect as useEffect13 } from "react";
+function useOnValueChange(value, onChange, compare = Object.is, deps = []) {
+  const tracked = useRef2(value);
+  useEffect13(() => {
+    const oldValue = tracked.current;
+    if (!compare(value, oldValue)) {
+      tracked.current = value;
+      onChange(value, oldValue);
+    }
+  }, [onChange, compare, value, ...deps]);
+}
+
+// lib/selector-is.ts
+init_react_import();
+var selectorIs = (a, b) => (a == null ? void 0 : a.zone) === (b == null ? void 0 : b.zone) && (a == null ? void 0 : a.index) === (b == null ? void 0 : b.index);
+
+// lib/use-resolved-fields.ts
 var defaultPageFields = {
   title: { type: "text" }
 };
-var DefaultFields = ({
-  children
-}) => {
-  return /* @__PURE__ */ jsx28(Fragment12, { children });
-};
 var useResolvedFields = () => {
   var _a, _b;
   const { selectedItem, state, config } = useAppContext();
@@ -3837,12 +3863,13 @@ var useResolvedFields = () => {
   const [lastSelectedData, setLastSelectedData] = useState15({});
   const [resolvedFields, setResolvedFields] = useState15(defaultFields);
   const [fieldsLoading, setFieldsLoading] = useState15(false);
+  const lastFields = useRef3(defaultFields);
   const defaultResolveFields = (_componentData, _params) => defaultFields;
   const componentData = selectedItem ? selectedItem : { props: rootProps, readOnly: data.root.readOnly };
   const hasComponentResolver = selectedItem && (componentConfig == null ? void 0 : componentConfig.resolveFields);
   const hasRootResolver = !selectedItem && ((_b = config.root) == null ? void 0 : _b.resolveFields);
   const hasResolver = hasComponentResolver || hasRootResolver;
-  const resolveFields = useCallback7(
+  const resolveFields = useCallback8(
     (..._0) => __async(void 0, [..._0], function* (fields = {}) {
       var _a2;
       const lastData = ((_a2 = lastSelectedData.props) == null ? void 0 : _a2.id) === componentData.props.id ? lastSelectedData : null;
@@ -3854,7 +3881,7 @@ var useResolvedFields = () => {
           {
             changed,
             fields,
-            lastFields: resolvedFields,
+            lastFields: lastFields.current,
             lastData,
             appState: state,
             parent
@@ -3865,7 +3892,7 @@ var useResolvedFields = () => {
         return yield config.root.resolveFields(componentData, {
           changed,
           fields,
-          lastFields: resolvedFields,
+          lastFields: lastFields.current,
           lastData,
           appState: state,
           parent
@@ -3874,40 +3901,56 @@ var useResolvedFields = () => {
       return defaultResolveFields(componentData, {
         changed,
         fields,
-        lastFields: resolvedFields,
+        lastFields: lastFields.current,
         lastData
       });
     }),
-    [data, config, componentData, selectedItem, resolvedFields, state, parent]
+    [data, config, componentData, selectedItem, state, parent]
   );
-  const [hasParent, setHasParent] = useState15(false);
-  useEffect13(() => {
-    setHasParent(!!parent);
-  }, [parent]);
-  useEffect13(() => {
+  const triggerResolver = useCallback8(() => {
     var _a2, _b2;
-    if (!((_a2 = state.ui.itemSelector) == null ? void 0 : _a2.zone) || ((_b2 = state.ui.itemSelector) == null ? void 0 : _b2.zone) === "default-zone" || hasParent) {
+    if (!((_a2 = state.ui.itemSelector) == null ? void 0 : _a2.zone) || ((_b2 = state.ui.itemSelector) == null ? void 0 : _b2.zone) === "default-zone" || parent) {
       if (hasResolver) {
         setFieldsLoading(true);
         resolveFields(defaultFields).then((fields) => {
           setResolvedFields(fields || {});
+          lastFields.current = fields;
           setFieldsLoading(false);
         });
-      } else {
-        setResolvedFields(defaultFields);
+        return;
       }
     }
-  }, [
-    data,
-    defaultFields,
+    setResolvedFields(defaultFields);
+  }, [defaultFields, state.ui.itemSelector, hasResolver, parent]);
+  useOnValueChange(
     state.ui.itemSelector,
-    selectedItem,
-    hasResolver,
-    hasParent
-  ]);
+    () => {
+      lastFields.current = defaultFields;
+    },
+    selectorIs
+  );
+  useOnValueChange(
+    { data, parent, itemSelector: state.ui.itemSelector },
+    () => {
+      triggerResolver();
+    },
+    (a, b) => JSON.stringify(a) === JSON.stringify(b)
+  );
+  useEffect14(() => {
+    triggerResolver();
+  }, []);
   return [resolvedFields, fieldsLoading];
 };
-var Fields = () => {
+
+// components/Puck/components/Fields/index.tsx
+import { Fragment as Fragment12, jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
+var getClassName21 = get_class_name_factory_default("PuckFields", styles_module_default16);
+var DefaultFields = ({
+  children
+}) => {
+  return /* @__PURE__ */ jsx28(Fragment12, { children });
+};
+var Fields = ({ wrapFields = true }) => {
   var _a, _b;
   const {
     selectedItem,
@@ -3925,7 +3968,7 @@ var Fields = () => {
   const componentResolving = selectedItem ? ((_a = componentState[selectedItem == null ? void 0 : selectedItem.props.id]) == null ? void 0 : _a.loadingCount) > 0 : ((_b = componentState["puck-root"]) == null ? void 0 : _b.loadingCount) > 0;
   const isLoading = fieldsResolving || componentResolving;
   const rootProps = data.root.props || data.root;
-  const Wrapper = useMemo9(() => overrides.fields || DefaultFields, [overrides]);
+  const Wrapper = useMemo10(() => overrides.fields || DefaultFields, [overrides]);
   return /* @__PURE__ */ jsxs15(
     "form",
     {
@@ -4048,7 +4091,7 @@ init_react_import();
 
 // lib/use-component-list.tsx
 init_react_import();
-import { useEffect as useEffect14, useState as useState16 } from "react";
+import { useEffect as useEffect15, useState as useState16 } from "react";
 
 // components/ComponentList/index.tsx
 init_react_import();
@@ -4127,7 +4170,7 @@ ComponentList.Item = ComponentListItem;
 import { jsx as jsx30 } from "react/jsx-runtime";
 var useComponentList = (config, ui) => {
   const [componentList, setComponentList] = useState16();
-  useEffect14(() => {
+  useEffect15(() => {
     var _a, _b, _c;
     if (Object.keys(ui.componentList).length > 0) {
       const matchedComponents = [];
@@ -4196,26 +4239,26 @@ var useComponentList = (config, ui) => {
 };
 
 // components/Puck/components/Components/index.tsx
-import { useMemo as useMemo10 } from "react";
+import { useMemo as useMemo11 } from "react";
 import { jsx as jsx31 } from "react/jsx-runtime";
 var Components = () => {
   const { config, state, overrides } = useAppContext();
   const componentList = useComponentList(config, state.ui);
-  const Wrapper = useMemo10(() => overrides.components || "div", [overrides]);
+  const Wrapper = useMemo11(() => overrides.components || "div", [overrides]);
   return /* @__PURE__ */ jsx31(Wrapper, { children: componentList ? componentList : /* @__PURE__ */ jsx31(ComponentList, { id: "all" }) });
 };
 
 // components/Puck/components/Preview/index.tsx
 init_react_import();
-import { useCallback as useCallback8, useMemo as useMemo11 } from "react";
+import { useCallback as useCallback9, useMemo as useMemo12 } from "react";
 
 // components/AutoFrame/index.tsx
 init_react_import();
 import {
   createContext as createContext5,
   useContext as useContext8,
-  useEffect as useEffect15,
-  useRef as useRef2,
+  useEffect as useEffect16,
+  useRef as useRef4,
   useState as useState17
 } from "react";
 import hash from "object-hash";
@@ -4263,7 +4306,7 @@ var CopyHostStyles = ({
   onStylesLoaded = () => null
 }) => {
   const { document: doc, window: win } = useFrame();
-  useEffect15(() => {
+  useEffect16(() => {
     if (!win || !doc) {
       return () => {
       };
@@ -4440,9 +4483,9 @@ function AutoFrame(_a) {
   ]);
   const [loaded, setLoaded] = useState17(false);
   const [ctx, setCtx] = useState17({});
-  const ref = useRef2(null);
+  const ref = useRef4(null);
   const [mountTarget, setMountTarget] = useState17();
-  useEffect15(() => {
+  useEffect16(() => {
     var _a2;
     if (ref.current) {
       setCtx({
@@ -4478,7 +4521,7 @@ import { Fragment as Fragment14, jsx as jsx33 } from "react/jsx-runtime";
 var getClassName23 = get_class_name_factory_default("PuckPreview", styles_module_default18);
 var Preview = ({ id = "puck-preview" }) => {
   const { config, dispatch, state, setStatus, iframe, overrides } = useAppContext();
-  const Page = useCallback8(
+  const Page = useCallback9(
     (pageProps) => {
       var _a, _b;
       return ((_a = config.root) == null ? void 0 : _a.render) ? (_b = config.root) == null ? void 0 : _b.render(__spreadValues({
@@ -4487,7 +4530,7 @@ var Preview = ({ id = "puck-preview" }) => {
     },
     [config.root]
   );
-  const Frame = useMemo11(() => overrides.iframe, [overrides]);
+  const Frame = useMemo12(() => overrides.iframe, [overrides]);
   const rootProps = state.data.root.props || state.data.root;
   return /* @__PURE__ */ jsx33(
     "div",
@@ -4709,13 +4752,13 @@ var LayerTree = ({
 };
 
 // components/Puck/components/Outline/index.tsx
-import { useCallback as useCallback9, useMemo as useMemo12 } from "react";
+import { useCallback as useCallback10, useMemo as useMemo13 } from "react";
 import { Fragment as Fragment16, jsx as jsx35, jsxs as jsxs18 } from "react/jsx-runtime";
 var Outline = () => {
   const { dispatch, state, overrides, config } = useAppContext();
   const { data, ui } = state;
   const { itemSelector } = ui;
-  const setItemSelector = useCallback9(
+  const setItemSelector = useCallback10(
     (newItemSelector) => {
       dispatch({
         type: "setUi",
@@ -4724,7 +4767,7 @@ var Outline = () => {
     },
     []
   );
-  const Wrapper = useMemo12(() => overrides.outline || "div", [overrides]);
+  const Wrapper = useMemo13(() => overrides.outline || "div", [overrides]);
   return /* @__PURE__ */ jsx35(Wrapper, { children: /* @__PURE__ */ jsx35(dropZoneContext.Consumer, { children: (ctx) => /* @__PURE__ */ jsxs18(Fragment16, { children: [
     (ctx == null ? void 0 : ctx.activeZones) && (ctx == null ? void 0 : ctx.activeZones[rootDroppableId]) && /* @__PURE__ */ jsx35(
       LayerTree,
@@ -5011,16 +5054,16 @@ var getBox = function getBox2(el) {
 
 // components/Puck/components/Canvas/index.tsx
 import {
-  useCallback as useCallback10,
-  useEffect as useEffect17,
-  useMemo as useMemo14,
-  useRef as useRef3,
+  useCallback as useCallback11,
+  useEffect as useEffect18,
+  useMemo as useMemo15,
+  useRef as useRef5,
   useState as useState20
 } from "react";
 
 // components/ViewportControls/index.tsx
 init_react_import();
-import { useEffect as useEffect16, useMemo as useMemo13, useState as useState19 } from "react";
+import { useEffect as useEffect17, useMemo as useMemo14, useState as useState19 } from "react";
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/ViewportControls/styles.module.css#css-module
 init_react_import();
@@ -5044,7 +5087,7 @@ var ViewportButton = ({
 }) => {
   const { state } = useAppContext();
   const [isActive, setIsActive] = useState19(false);
-  useEffect16(() => {
+  useEffect17(() => {
     setIsActive(width === state.ui.viewports.current.width);
   }, [width, state.ui.viewports.current.width]);
   return /* @__PURE__ */ jsx36("span", { className: getClassNameButton({ isActive }), children: /* @__PURE__ */ jsx36(
@@ -5080,7 +5123,7 @@ var ViewportControls = ({
   const defaultsContainAutoZoom = defaultZoomOptions.find(
     (option) => option.value === autoZoom
   );
-  const zoomOptions = useMemo13(
+  const zoomOptions = useMemo14(
     () => [
       ...defaultZoomOptions,
       ...defaultsContainAutoZoom ? [] : [
@@ -5203,17 +5246,17 @@ var Canvas = () => {
   const { status, iframe } = useAppContext();
   const { dispatch, state, overrides, setUi, zoomConfig, setZoomConfig } = useAppContext();
   const { ui } = state;
-  const frameRef = useRef3(null);
+  const frameRef = useRef5(null);
   const [showTransition, setShowTransition] = useState20(false);
-  const defaultRender = useMemo14(() => {
+  const defaultRender = useMemo15(() => {
     const PuckDefault = ({ children }) => /* @__PURE__ */ jsx37(Fragment17, { children });
     return PuckDefault;
   }, []);
-  const CustomPreview = useMemo14(
+  const CustomPreview = useMemo15(
     () => overrides.preview || defaultRender,
     [overrides]
   );
-  const getFrameDimensions = useCallback10(() => {
+  const getFrameDimensions = useCallback11(() => {
     if (frameRef.current) {
       const frame = frameRef.current;
       const box = getBox(frame);
@@ -5221,7 +5264,7 @@ var Canvas = () => {
     }
     return { width: 0, height: 0 };
   }, [frameRef]);
-  const resetAutoZoom = useCallback10(
+  const resetAutoZoom = useCallback11(
     (ui2 = state.ui) => {
       if (frameRef.current) {
         setZoomConfig(
@@ -5231,11 +5274,11 @@ var Canvas = () => {
     },
     [frameRef, zoomConfig, state.ui]
   );
-  useEffect17(() => {
+  useEffect18(() => {
     setShowTransition(false);
     resetAutoZoom();
   }, [frameRef, ui.leftSideBarVisible, ui.rightSideBarVisible]);
-  useEffect17(() => {
+  useEffect18(() => {
     const { height: frameHeight } = getFrameDimensions();
     if (ui.viewports.current.height === "auto") {
       setZoomConfig(__spreadProps(__spreadValues({}, zoomConfig), {
@@ -5243,13 +5286,13 @@ var Canvas = () => {
       }));
     }
   }, [zoomConfig.zoom]);
-  useEffect17(() => {
+  useEffect18(() => {
     if (ZOOM_ON_CHANGE) {
       setShowTransition(true);
       resetAutoZoom(ui);
     }
   }, [ui.viewports.current.width]);
-  useEffect17(() => {
+  useEffect18(() => {
     const observer = new ResizeObserver(() => {
       setShowTransition(false);
       resetAutoZoom();
@@ -5262,7 +5305,7 @@ var Canvas = () => {
     };
   }, []);
   const [showLoader, setShowLoader] = useState20(false);
-  useEffect17(() => {
+  useEffect18(() => {
     setTimeout(() => {
       setShowLoader(true);
     }, 500);
@@ -5365,7 +5408,7 @@ var insertComponent = (componentType, zone, index, {
 
 // lib/use-loaded-overrides.ts
 init_react_import();
-import { useMemo as useMemo15 } from "react";
+import { useMemo as useMemo16 } from "react";
 
 // lib/load-overrides.ts
 init_react_import();
@@ -5404,7 +5447,7 @@ var useLoadedOverrides = ({
   overrides,
   plugins
 }) => {
-  return useMemo15(() => {
+  return useMemo16(() => {
     return loadOverrides({ overrides, plugins });
   }, [plugins, overrides]);
 };
@@ -5535,7 +5578,7 @@ function Puck({
   });
   const [menuOpen, setMenuOpen] = useState21(false);
   const { itemSelector, leftSideBarVisible, rightSideBarVisible } = ui;
-  const setItemSelector = useCallback11(
+  const setItemSelector = useCallback12(
     (newItemSelector) => {
       if (newItemSelector === itemSelector) return;
       dispatch({
@@ -5547,13 +5590,13 @@ function Puck({
     [itemSelector]
   );
   const selectedItem = itemSelector ? getItem(itemSelector, data) : null;
-  useEffect18(() => {
+  useEffect19(() => {
     if (onChange) onChange(data);
   }, [data]);
   const { onDragStartOrUpdate, placeholderStyle } = usePlaceholderStyle();
   const [draggedItem, setDraggedItem] = useState21();
   const rootProps = data.root.props || data.root;
-  const toggleSidebars = useCallback11(
+  const toggleSidebars = useCallback12(
     (sidebar) => {
       const widerViewport = window.matchMedia("(min-width: 638px)").matches;
       const sideBarVisible = sidebar === "left" ? leftSideBarVisible : rightSideBarVisible;
@@ -5567,7 +5610,7 @@ function Puck({
     },
     [dispatch, leftSideBarVisible, rightSideBarVisible]
   );
-  useEffect18(() => {
+  useEffect19(() => {
     if (!window.matchMedia("(min-width: 638px)").matches) {
       dispatch({
         type: "setUi",
@@ -5590,7 +5633,7 @@ function Puck({
       window.removeEventListener("resize", handleResize);
     };
   }, []);
-  const defaultHeaderRender = useMemo16(() => {
+  const defaultHeaderRender = useMemo17(() => {
     if (renderHeader) {
       console.warn(
         "`renderHeader` is deprecated. Please use `overrides.header` and the `usePuck` hook instead"
@@ -5604,7 +5647,7 @@ function Puck({
     }
     return DefaultOverride;
   }, [renderHeader]);
-  const defaultHeaderActionsRender = useMemo16(() => {
+  const defaultHeaderActionsRender = useMemo17(() => {
     if (renderHeaderActions) {
       console.warn(
         "`renderHeaderActions` is deprecated. Please use `overrides.headerActions` and the `usePuck` hook instead."
@@ -5621,20 +5664,20 @@ function Puck({
     overrides,
     plugins
   });
-  const CustomPuck = useMemo16(
+  const CustomPuck = useMemo17(
     () => loadedOverrides.puck || DefaultOverride,
     [loadedOverrides]
   );
-  const CustomHeader = useMemo16(
+  const CustomHeader = useMemo17(
     () => loadedOverrides.header || defaultHeaderRender,
     [loadedOverrides]
   );
-  const CustomHeaderActions = useMemo16(
+  const CustomHeaderActions = useMemo17(
     () => loadedOverrides.headerActions || defaultHeaderActionsRender,
     [loadedOverrides]
   );
   const [mounted, setMounted] = useState21(false);
-  useEffect18(() => {
+  useEffect19(() => {
     setMounted(true);
   }, []);
   const selectedComponentConfig = selectedItem && config.components[selectedItem.type];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@measured/puck",
-  "version": "0.17.4-canary.62d9972",
+  "version": "0.17.4-canary.e778246",
   "author": "Measured Corporation Ltd <hello@measured.co>",
   "repository": "measuredco/puck",
   "bugs": "https://github.com/measuredco/puck/issues",