@measured/puck 0.16.0-canary.53c8bfc → 0.16.0-canary.555902

package/dist/index.js

@@ -183,31 +183,26 @@ init_react_import();
 // lib/get-class-name-factory.ts
 init_react_import();
 var import_classnames = __toESM(require_classnames());
-var getClassNameFactory = (rootClass, styles, { baseClass = "" } = {}) => (options = {}) => {
-  let descendant = false;
-  let modifiers = false;
+var getClassNameFactory = (rootClass, styles, config = { baseClass: "" }) => (options = {}) => {
   if (typeof options === "string") {
-    descendant = options;
-  } else if (typeof options === "object") {
-    modifiers = options;
-  }
-  if (descendant) {
+    const descendant = options;
     const style = styles[`${rootClass}-${descendant}`];
     if (style) {
-      return baseClass + styles[`${rootClass}-${descendant}`] || "";
+      return config.baseClass + styles[`${rootClass}-${descendant}`] || "";
     }
     return "";
-  } else if (modifiers) {
+  } else if (typeof options === "object") {
+    const modifiers = options;
     const prefixedModifiers = {};
     for (let modifier in modifiers) {
       prefixedModifiers[styles[`${rootClass}--${modifier}`]] = modifiers[modifier];
     }
     const c = styles[rootClass];
-    return baseClass + (0, import_classnames.default)(__spreadValues({
+    return config.baseClass + (0, import_classnames.default)(__spreadValues({
       [c]: !!c
     }, prefixedModifiers));
   } else {
-    return baseClass + styles[rootClass] || "";
+    return config.baseClass + styles[rootClass] || "";
   }
 };
 var get_class_name_factory_default = getClassNameFactory;
@@ -660,25 +655,29 @@ var rootDroppableId = "default-zone";
 
 // lib/setup-zone.ts
 init_react_import();
+function ensureZones(data) {
+  return __spreadProps(__spreadValues({}, data), {
+    zones: data.zones || {}
+  });
+}
 var setupZone = (data, zoneKey) => {
   if (zoneKey === rootDroppableId) {
     return data;
   }
-  const newData = __spreadValues({}, data);
-  newData.zones = data.zones || {};
+  const newData = ensureZones(data);
   newData.zones[zoneKey] = newData.zones[zoneKey] || [];
   return newData;
 };
 
 // lib/get-item.ts
-var getItem = (selector, data, dynamicProps = {}) => {
+function getItem(selector, data, dynamicProps = {}) {
   if (!selector.zone || selector.zone === rootDroppableId) {
     const item2 = data.content[selector.index];
     return (item2 == null ? void 0 : item2.props) ? __spreadProps(__spreadValues({}, item2), { props: dynamicProps[item2.props.id] || item2.props }) : void 0;
   }
   const item = setupZone(data, selector.zone).zones[selector.zone][selector.index];
   return (item == null ? void 0 : item.props) ? __spreadProps(__spreadValues({}, item), { props: dynamicProps[item.props.id] || item.props }) : void 0;
-};
+}
 
 // components/ViewportControls/default-viewports.ts
 init_react_import();
@@ -692,7 +691,7 @@ var defaultViewports = [
 var import_ua_parser_js = require("ua-parser-js");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var defaultAppState = {
-  data: { content: [], root: { props: {} } },
+  data: { content: [], root: {} },
   ui: {
     leftSideBarVisible: true,
     rightSideBarVisible: true,
@@ -1483,7 +1482,7 @@ var ExternalInput = ({
                     }
                   ) })
                 ] })
-              ] }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Heading, { rank: 2, size: "xs", children: field.placeholder || "Select data" }) }),
+              ] }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Heading, { rank: "2", size: "xs", children: field.placeholder || "Select data" }) }),
               /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: getClassNameModal("grid"), children: [
                 hasFilterFields && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: getClassNameModal("filters"), children: hasFilterFields && Object.keys(filterFields).map((fieldName) => {
                   const filterField = filterFields[fieldName];
@@ -2905,7 +2904,7 @@ var SidebarSection = ({
             ),
             /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ChevronRight, { size: 16 })
           ] }, i)) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: getClassName19("heading"), children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Heading, { rank: 2, size: "xs", children: title }) })
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: getClassName19("heading"), children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Heading, { rank: "2", size: "xs", children: title }) })
         ] }) }),
         /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: getClassName19("content"), children }),
         isLoading && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: getClassName19("loadingOverlay"), children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Loader, { size: 32 }) })
@@ -2938,7 +2937,7 @@ var remove = (list, index) => {
 
 // lib/reduce-related-zones.ts
 init_react_import();
-var reduceRelatedZones = (item, data, fn) => {
+function reduceRelatedZones(item, data, fn) {
   return __spreadProps(__spreadValues({}, data), {
     zones: Object.keys(data.zones || {}).reduce(
       (acc, key) => {
@@ -2952,28 +2951,34 @@ var reduceRelatedZones = (item, data, fn) => {
       {}
     )
   });
-};
+}
 var findRelatedByZoneId = (zoneId, data) => {
   const [zoneParentId] = getZoneId(zoneId);
-  return (data.zones[zoneId] || []).reduce((acc, zoneItem) => {
-    const related = findRelatedByItem(zoneItem, data);
-    if (zoneItem.props.id === zoneParentId) {
-      return __spreadProps(__spreadValues(__spreadValues({}, acc), related), { [zoneId]: zoneItem });
-    }
-    return __spreadValues(__spreadValues({}, acc), related);
-  }, {});
+  return (data.zones[zoneId] || []).reduce(
+    (acc, zoneItem) => {
+      const related = findRelatedByItem(zoneItem, data);
+      if (zoneItem.props.id === zoneParentId) {
+        return __spreadProps(__spreadValues(__spreadValues({}, acc), related), { [zoneId]: zoneItem });
+      }
+      return __spreadValues(__spreadValues({}, acc), related);
+    },
+    {}
+  );
 };
 var findRelatedByItem = (item, data) => {
-  return Object.keys(data.zones || {}).reduce((acc, zoneId) => {
-    const [zoneParentId] = getZoneId(zoneId);
-    if (item.props.id === zoneParentId) {
-      const related = findRelatedByZoneId(zoneId, data);
-      return __spreadProps(__spreadValues(__spreadValues({}, acc), related), {
-        [zoneId]: data.zones[zoneId]
-      });
-    }
-    return acc;
-  }, {});
+  return Object.keys(data.zones || {}).reduce(
+    (acc, zoneId) => {
+      const [zoneParentId] = getZoneId(zoneId);
+      if (item.props.id === zoneParentId) {
+        const related = findRelatedByZoneId(zoneId, data);
+        return __spreadProps(__spreadValues(__spreadValues({}, acc), related), {
+          [zoneId]: data.zones[zoneId]
+        });
+      }
+      return acc;
+    },
+    {}
+  );
 };
 var removeRelatedZones = (item, data) => {
   const newData = __spreadValues({}, data);
@@ -2983,7 +2988,7 @@ var removeRelatedZones = (item, data) => {
   });
   return newData;
 };
-var duplicateRelatedZones = (item, data, newId) => {
+function duplicateRelatedZones(item, data, newId) {
   return reduceRelatedZones(item, data, (acc, key, zone) => {
     const dupedZone = zone.map((zoneItem) => __spreadProps(__spreadValues({}, zoneItem), {
       props: __spreadProps(__spreadValues({}, zoneItem.props), { id: generateId(zoneItem.type) })
@@ -2998,7 +3003,7 @@ var duplicateRelatedZones = (item, data, newId) => {
       [`${newId}:${zoneId}`]: dupedZone
     });
   });
-};
+}
 
 // reducer/data.ts
 var zoneCache = {};
@@ -3022,7 +3027,7 @@ var replaceAction = (data, action) => {
     })
   });
 };
-var insertAction = (data, action, config) => {
+function insertAction(data, action, config) {
   const emptyComponentData = {
     type: action.componentType,
     props: __spreadProps(__spreadValues({}, config.components[action.componentType].defaultProps || {}), {
@@ -3048,8 +3053,8 @@ var insertAction = (data, action, config) => {
       )
     })
   });
-};
-var reduceData = (data, action, config) => {
+}
+function reduceData(data, action, config) {
   if (action.type === "insert") {
     return insertAction(data, action, config);
   }
@@ -3198,7 +3203,7 @@ var reduceData = (data, action, config) => {
     return __spreadValues(__spreadValues({}, data), action.data(data));
   }
   return data;
-};
+}
 
 // reducer/state.ts
 init_react_import();
@@ -3216,7 +3221,7 @@ var reduceUi = (ui, action) => {
 init_react_import();
 
 // reducer/index.ts
-var storeInterceptor = (reducer, record, onAction) => {
+function storeInterceptor(reducer, record, onAction) {
   return (state, action) => {
     const newAppState = reducer(state, action);
     const isValidType = ![
@@ -3232,7 +3237,7 @@ var storeInterceptor = (reducer, record, onAction) => {
     onAction == null ? void 0 : onAction(action, newAppState, state);
     return newAppState;
   };
-};
+}
 var setAction = (state, action) => {
   if (typeof action.state === "object") {
     return __spreadValues(__spreadValues({}, state), action.state);
@@ -3347,28 +3352,30 @@ var applyDynamicProps = (data, dynamicProps, rootData) => {
 // lib/resolve-root-data.ts
 init_react_import();
 var cache3 = {};
-var resolveRootData = (data, config) => __async(void 0, null, function* () {
-  var _a, _b, _c, _d, _e;
-  if (((_a = config.root) == null ? void 0 : _a.resolveData) && data.root.props) {
-    if (((_b = cache3.lastChange) == null ? void 0 : _b.original) === data.root) {
-      return cache3.lastChange.resolved;
+function resolveRootData(data, config) {
+  return __async(this, null, function* () {
+    var _a, _b, _c, _d, _e;
+    if (((_a = config.root) == null ? void 0 : _a.resolveData) && data.root.props) {
+      if (((_b = cache3.lastChange) == null ? void 0 : _b.original) === data.root) {
+        return cache3.lastChange.resolved;
+      }
+      const changed = getChanged(data.root, (_c = cache3.lastChange) == null ? void 0 : _c.original);
+      const rootWithProps = data.root;
+      const resolvedRoot = yield (_e = config.root) == null ? void 0 : _e.resolveData(rootWithProps, {
+        changed,
+        lastData: ((_d = cache3.lastChange) == null ? void 0 : _d.original) || {}
+      });
+      cache3.lastChange = {
+        original: data.root,
+        resolved: resolvedRoot
+      };
+      return __spreadProps(__spreadValues(__spreadValues({}, data.root), resolvedRoot), {
+        props: __spreadValues(__spreadValues({}, data.root.props), resolvedRoot.props)
+      });
     }
-    const changed = getChanged(data.root, (_c = cache3.lastChange) == null ? void 0 : _c.original);
-    const rootWithProps = data.root;
-    const resolvedRoot = yield (_e = config.root) == null ? void 0 : _e.resolveData(rootWithProps, {
-      changed,
-      lastData: ((_d = cache3.lastChange) == null ? void 0 : _d.original) || {}
-    });
-    cache3.lastChange = {
-      original: data.root,
-      resolved: resolvedRoot
-    };
-    return __spreadProps(__spreadValues(__spreadValues({}, data.root), resolvedRoot), {
-      props: __spreadValues(__spreadValues({}, data.root.props), resolvedRoot.props)
-    });
-  }
-  return data.root;
-});
+    return data.root;
+  });
+}
 
 // lib/use-resolved-data.ts
 var useResolvedData = (appState, config, dispatch) => {
@@ -3473,15 +3480,14 @@ var styles_module_default14 = { "MenuBar": "_MenuBar_8pf8c_1", "MenuBar--menuOpe
 // components/MenuBar/index.tsx
 var import_jsx_runtime27 = require("react/jsx-runtime");
 var getClassName20 = get_class_name_factory_default("MenuBar", styles_module_default14);
-var MenuBar = ({
+function MenuBar({
   appState,
-  data = { content: [], root: {} },
   dispatch,
   menuOpen = false,
   onPublish,
   renderHeaderActions,
   setMenuOpen
-}) => {
+}) {
   const {
     history: { back, forward, historyStore }
   } = useAppContext();
@@ -3512,7 +3518,7 @@ var MenuBar = ({
       ] })
     }
   );
-};
+}
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/styles.module.css#css-module
 init_react_import();
@@ -3545,9 +3551,7 @@ var useResolvedFields = () => {
   const componentConfig = selectedItem ? config.components[selectedItem.type] : null;
   const defaultFields = selectedItem ? componentConfig == null ? void 0 : componentConfig.fields : rootFields;
   const rootProps = data.root.props || data.root;
-  const [lastSelectedData, setLastSelectedData] = (0, import_react20.useState)(
-    {}
-  );
+  const [lastSelectedData, setLastSelectedData] = (0, import_react20.useState)({});
   const [resolvedFields, setResolvedFields] = (0, import_react20.useState)(defaultFields || {});
   const [fieldsLoading, setFieldsLoading] = (0, import_react20.useState)(false);
   const defaultResolveFields = (_componentData, _params) => defaultFields;
@@ -3710,7 +3714,7 @@ var Fields = () => {
               `${selectedItem.props.id}_${fieldName}`
             );
           } else {
-            const { readOnly = {} } = data.root;
+            const readOnly = data.root.readOnly || {};
             return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
               AutoFieldPrivate,
               {
@@ -4165,13 +4169,9 @@ var Preview = ({ id = "puck-preview" }) => {
   const Page = (0, import_react24.useCallback)(
     (pageProps) => {
       var _a, _b;
-      return ((_a = config.root) == null ? void 0 : _a.render) ? (_b = config.root) == null ? void 0 : _b.render(__spreadProps(__spreadValues({
+      return ((_a = config.root) == null ? void 0 : _a.render) ? (_b = config.root) == null ? void 0 : _b.render(__spreadValues({
         id: "puck-root"
-      }, pageProps), {
-        editMode: true,
-        // DEPRECATED
-        puck: { renderDropZone: DropZone, isEditing: true }
-      })) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_jsx_runtime33.Fragment, { children: pageProps.children });
+      }, pageProps)) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_jsx_runtime33.Fragment, { children: pageProps.children });
     },
     [config.root]
   );
@@ -4195,14 +4195,28 @@ var Preview = ({ id = "puck-preview" }) => {
             setStatus("READY");
           },
           children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(autoFrameContext.Consumer, { children: ({ document: document2 }) => {
-            const inner = /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Page, __spreadProps(__spreadValues({ dispatch, state }, rootProps), { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(DropZone, { zone: rootDroppableId }) }));
+            const inner = /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+              Page,
+              __spreadProps(__spreadValues({}, rootProps), {
+                puck: { renderDropZone: DropZone, isEditing: true },
+                editMode: true,
+                children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(DropZone, { zone: rootDroppableId })
+              })
+            );
             if (Frame) {
               return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Frame, { document: document2, children: inner });
             }
             return inner;
           } })
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { id: "preview-frame", className: getClassName23("frame"), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Page, __spreadProps(__spreadValues({ dispatch, state }, rootProps), { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(DropZone, { zone: rootDroppableId }) })) })
+      ) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { id: "preview-frame", className: getClassName23("frame"), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        Page,
+        __spreadProps(__spreadValues({}, rootProps), {
+          puck: { renderDropZone: DropZone, isEditing: true },
+          editMode: true,
+          children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(DropZone, { zone: rootDroppableId })
+        })
+      ) })
     }
   );
 };
@@ -4998,7 +5012,8 @@ var loadOverrides = ({
 }) => {
   const collected = __spreadValues({}, overrides);
   plugins == null ? void 0 : plugins.forEach((plugin) => {
-    Object.keys(plugin.overrides).forEach((overridesType) => {
+    Object.keys(plugin.overrides).forEach((_overridesType) => {
+      const overridesType = _overridesType;
       if (overridesType === "fieldTypes") {
         const fieldTypes = plugin.overrides.fieldTypes;
         Object.keys(fieldTypes).forEach((fieldType) => {
@@ -5038,7 +5053,7 @@ var getLayoutClassName = get_class_name_factory_default("PuckLayout", styles_mod
 function Puck({
   children,
   config,
-  data: initialData = { content: [], root: {} },
+  data: initialData,
   ui: initialUi,
   onChange,
   onPublish,
@@ -5060,10 +5075,14 @@ function Puck({
   var _a;
   const historyStore = useHistoryStore(initialHistory);
   const [reducer] = (0, import_react31.useState)(
-    () => createReducer({ config, record: historyStore.record, onAction })
+    () => createReducer({
+      config,
+      record: historyStore.record,
+      onAction
+    })
   );
   const [initialAppState] = (0, import_react31.useState)(() => {
-    var _a2, _b, _c, _d, _e, _f, _g;
+    var _a2, _b, _c, _d, _e, _f, _g, _h, _i;
     const initial = __spreadValues(__spreadValues({}, defaultAppState.ui), initialUi);
     let clientUiState = {};
     if (typeof window !== "undefined") {
@@ -5083,20 +5102,20 @@ function Puck({
         clientUiState = {
           viewports: __spreadProps(__spreadValues({}, initial.viewports), {
             current: __spreadProps(__spreadValues({}, initial.viewports.current), {
-              height: ((_b = (_a2 = initialUi == null ? void 0 : initialUi.viewports) == null ? void 0 : _a2.current) == null ? void 0 : _b.height) || viewports[closestViewport].height || "auto",
-              width: ((_d = (_c = initialUi == null ? void 0 : initialUi.viewports) == null ? void 0 : _c.current) == null ? void 0 : _d.width) || viewports[closestViewport].width
+              height: ((_b = (_a2 = initialUi == null ? void 0 : initialUi.viewports) == null ? void 0 : _a2.current) == null ? void 0 : _b.height) || ((_c = viewports[closestViewport]) == null ? void 0 : _c.height) || "auto",
+              width: ((_e = (_d = initialUi == null ? void 0 : initialUi.viewports) == null ? void 0 : _d.current) == null ? void 0 : _e.width) || ((_f = viewports[closestViewport]) == null ? void 0 : _f.width)
             })
           })
         };
       }
     }
-    if (Object.keys((initialData == null ? void 0 : initialData.root) || {}).length > 0 && !((_e = initialData == null ? void 0 : initialData.root) == null ? void 0 : _e.props)) {
+    if (Object.keys((initialData == null ? void 0 : initialData.root) || {}).length > 0 && !((_g = initialData == null ? void 0 : initialData.root) == null ? void 0 : _g.props)) {
       console.error(
         "Warning: Defining props on `root` is deprecated. Please use `root.props`, or republish this page to migrate automatically."
       );
     }
-    const rootProps2 = ((_f = initialData == null ? void 0 : initialData.root) == null ? void 0 : _f.props) || (initialData == null ? void 0 : initialData.root) || {};
-    const defaultedRootProps = __spreadValues(__spreadValues({}, (_g = config.root) == null ? void 0 : _g.defaultProps), rootProps2);
+    const rootProps2 = ((_h = initialData == null ? void 0 : initialData.root) == null ? void 0 : _h.props) || (initialData == null ? void 0 : initialData.root) || {};
+    const defaultedRootProps = __spreadValues(__spreadValues({}, (_i = config.root) == null ? void 0 : _i.defaultProps), rootProps2);
     return __spreadProps(__spreadValues({}, defaultAppState), {
       data: __spreadProps(__spreadValues({}, initialData), {
         root: __spreadProps(__spreadValues({}, initialData == null ? void 0 : initialData.root), { props: defaultedRootProps }),
@@ -5388,7 +5407,7 @@ function Puck({
                                 }
                               )
                             ] }),
-                            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: getLayoutClassName("headerTitle"), children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Heading, { rank: 2, size: "xs", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: getLayoutClassName("headerTitle"), children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Heading, { rank: "2", size: "xs", children: [
                               headerTitle || rootProps.title || "Page",
                               headerPath && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
                                 " ",
@@ -5416,7 +5435,6 @@ function Puck({
                                 MenuBar,
                                 {
                                   appState,
-                                  data,
                                   dispatch,
                                   onPublish,
                                   menuOpen,
@@ -5472,10 +5490,7 @@ Puck.Preview = Preview;
 // components/Render/index.tsx
 init_react_import();
 var import_jsx_runtime39 = require("react/jsx-runtime");
-function Render({
-  config,
-  data
-}) {
+function Render({ config, data }) {
   var _a;
   const defaultedData = __spreadProps(__spreadValues({}, data), {
     root: data.root || {},