@measured/puck 0.17.0-canary.f71da6d → 0.17.0-canary.fe9321f

package/dist/index.mjs

@@ -23,35 +23,45 @@ var require_classnames = __commonJS({
     (function() {
       "use strict";
       var hasOwn = {}.hasOwnProperty;
-      var nativeCodeString = "[native code]";
       function classNames() {
-        var classes = [];
+        var classes = "";
         for (var i = 0; i < arguments.length; i++) {
           var arg = arguments[i];
-          if (!arg) continue;
-          var argType = typeof arg;
-          if (argType === "string" || argType === "number") {
-            classes.push(arg);
-          } else if (Array.isArray(arg)) {
-            if (arg.length) {
-              var inner = classNames.apply(null, arg);
-              if (inner) {
-                classes.push(inner);
-              }
-            }
-          } else if (argType === "object") {
-            if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes("[native code]")) {
-              classes.push(arg.toString());
-              continue;
-            }
-            for (var key in arg) {
-              if (hasOwn.call(arg, key) && arg[key]) {
-                classes.push(key);
-              }
-            }
+          if (arg) {
+            classes = appendClass(classes, parseValue(arg));
           }
         }
-        return classes.join(" ");
+        return classes;
+      }
+      function parseValue(arg) {
+        if (typeof arg === "string" || typeof arg === "number") {
+          return arg;
+        }
+        if (typeof arg !== "object") {
+          return "";
+        }
+        if (Array.isArray(arg)) {
+          return classNames.apply(null, arg);
+        }
+        if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes("[native code]")) {
+          return arg.toString();
+        }
+        var classes = "";
+        for (var key in arg) {
+          if (hasOwn.call(arg, key) && arg[key]) {
+            classes = appendClass(classes, key);
+          }
+        }
+        return classes;
+      }
+      function appendClass(value, newClass) {
+        if (!newClass) {
+          return value;
+        }
+        if (value) {
+          return value + " " + newClass;
+        }
+        return value + newClass;
       }
       if (typeof module !== "undefined" && module.exports) {
         classNames.default = classNames;
@@ -184,7 +194,7 @@ var styles_module_default2 = { "InputWrapper": "_InputWrapper_1l5m8_1", "Input":
 import {
   useCallback as useCallback5,
   useEffect as useEffect9,
-  useMemo as useMemo2,
+  useMemo as useMemo4,
   useState as useState10
 } from "react";
 
@@ -1449,6 +1459,7 @@ var DefaultField = ({
           className: getClassName6("input"),
           autoComplete: "off",
           type: field.type,
+          title: label || name,
           name,
           value: typeof value === "undefined" ? "" : value.toString(),
           onChange: (e) => {
@@ -1869,6 +1880,20 @@ var ExternalField = ({
 
 // components/AutoField/fields/RadioField/index.tsx
 init_react_import();
+import { useMemo as useMemo2 } from "react";
+
+// lib/safe-json-parse.ts
+init_react_import();
+var safeJsonParse = (str) => {
+  try {
+    const jsonValue = JSON.parse(str);
+    return jsonValue;
+  } catch (e) {
+    return str;
+  }
+};
+
+// components/AutoField/fields/RadioField/index.tsx
 import { jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
 var getClassName11 = get_class_name_factory_default("Input", styles_module_default2);
 var RadioField = ({
@@ -1881,6 +1906,10 @@ var RadioField = ({
   label,
   Label
 }) => {
+  const flatOptions = useMemo2(
+    () => field.type === "radio" ? field.options.map(({ value: value2 }) => value2) : [],
+    [field]
+  );
   if (field.type !== "radio" || !field.options) {
     return null;
   }
@@ -1904,11 +1933,12 @@ var RadioField = ({
                 value: option.value,
                 name,
                 onChange: (e) => {
-                  if (e.currentTarget.value === "true" || e.currentTarget.value === "false") {
-                    onChange(JSON.parse(e.currentTarget.value));
-                    return;
+                  const jsonValue = safeJsonParse(e.target.value) || e.target.value;
+                  if (flatOptions.indexOf(jsonValue) > -1) {
+                    onChange(jsonValue);
+                  } else {
+                    onChange(e.target.value);
                   }
-                  onChange(e.currentTarget.value);
                 },
                 disabled: readOnly,
                 checked: value === option.value
@@ -1925,6 +1955,7 @@ var RadioField = ({
 
 // components/AutoField/fields/SelectField/index.tsx
 init_react_import();
+import { useMemo as useMemo3 } from "react";
 import { jsx as jsx17 } from "react/jsx-runtime";
 var getClassName12 = get_class_name_factory_default("Input", styles_module_default2);
 var SelectField = ({
@@ -1937,6 +1968,10 @@ var SelectField = ({
   readOnly,
   id
 }) => {
+  const flatOptions = useMemo3(
+    () => field.type === "select" ? field.options.map(({ value: value2 }) => value2) : [],
+    [field]
+  );
   if (field.type !== "select" || !field.options) {
     return null;
   }
@@ -1950,14 +1985,16 @@ var SelectField = ({
         "select",
         {
           id,
+          title: label || name,
           className: getClassName12("input"),
           disabled: readOnly,
           onChange: (e) => {
-            if (e.currentTarget.value === "true" || e.currentTarget.value === "false") {
-              onChange(JSON.parse(e.currentTarget.value));
-              return;
+            const jsonValue = safeJsonParse(e.target.value) || e.target.value;
+            if (flatOptions.indexOf(jsonValue) > -1) {
+              onChange(jsonValue);
+            } else {
+              onChange(e.target.value);
             }
-            onChange(e.currentTarget.value);
           },
           value,
           children: field.options.map((option) => /* @__PURE__ */ jsx17(
@@ -2117,7 +2154,7 @@ var FieldLabelInternal2 = ({
   readOnly
 }) => {
   const { overrides } = useAppContext();
-  const Wrapper = useMemo2(
+  const Wrapper = useMemo4(
     () => overrides.fieldLabel || FieldLabel,
     [overrides]
   );
@@ -2203,7 +2240,18 @@ function AutoFieldInternal(props) {
   }
   const children = defaultFields[field.type](mergedProps);
   const Render2 = render[field.type];
-  return /* @__PURE__ */ jsx20("div", { className: getClassNameWrapper(), onFocus, onBlur, children: /* @__PURE__ */ jsx20(Render2, __spreadProps(__spreadValues({}, mergedProps), { children })) });
+  return /* @__PURE__ */ jsx20(
+    "div",
+    {
+      className: getClassNameWrapper(),
+      onFocus,
+      onBlur,
+      onClick: (e) => {
+        e.stopPropagation();
+      },
+      children: /* @__PURE__ */ jsx20(Render2, __spreadProps(__spreadValues({}, mergedProps), { children }))
+    }
+  );
 }
 function AutoFieldPrivate(props) {
   const { state } = useAppContext();
@@ -2232,7 +2280,7 @@ function AutoFieldPrivate(props) {
   return /* @__PURE__ */ jsx20(AutoFieldInternal, __spreadValues(__spreadValues({}, props), localProps));
 }
 function AutoField(props) {
-  const DefaultLabel = useMemo2(() => {
+  const DefaultLabel = useMemo4(() => {
     const DefaultLabel2 = (labelProps) => /* @__PURE__ */ jsx20(
       "div",
       __spreadProps(__spreadValues({}, labelProps), {
@@ -2255,7 +2303,7 @@ var styles_module_default10 = { "Drawer": "_Drawer_1oa7v_1", "DrawerItem--disabl
 import {
   createContext as createContext2,
   useContext as useContext2,
-  useMemo as useMemo3
+  useMemo as useMemo5
 } from "react";
 import { jsx as jsx21, jsxs as jsxs10 } from "react/jsx-runtime";
 var getClassName16 = get_class_name_factory_default("Drawer", styles_module_default10);
@@ -2293,7 +2341,7 @@ var DrawerItem = ({
 }) => {
   const ctx = useContext2(drawerContext);
   const resolvedId = `${ctx.droppableId}::${id || name}`;
-  const CustomInner = useMemo3(
+  const CustomInner = useMemo5(
     () => children || (({ children: children2, name: name2 }) => /* @__PURE__ */ jsx21("div", { className: getClassNameItem2("default"), children: children2 })),
     [children]
   );
@@ -2340,7 +2388,7 @@ import { useContext as useContext3, useEffect as useEffect12 } from "react";
 init_react_import();
 import {
   useEffect as useEffect11,
-  useMemo as useMemo4,
+  useMemo as useMemo6,
   useState as useState12
 } from "react";
 import { Draggable as Draggable2 } from "@measured/dnd";
@@ -2430,7 +2478,7 @@ var DraggableComponent = ({
       setDisableSecondaryAnimation(true);
     }
   }, []);
-  const CustomActionBar = useMemo4(
+  const CustomActionBar = useMemo6(
     () => overrides.actionBar || DefaultActionBar,
     [overrides.actionBar]
   );
@@ -2961,7 +3009,7 @@ init_react_import();
 import {
   useCallback as useCallback11,
   useEffect as useEffect18,
-  useMemo as useMemo13,
+  useMemo as useMemo15,
   useReducer,
   useState as useState21
 } from "react";
@@ -3036,7 +3084,7 @@ var styles_module_default13 = { "SidebarSection": "_SidebarSection_125qe_1", "Si
 
 // lib/use-breadcrumbs.ts
 init_react_import();
-import { useContext as useContext4, useMemo as useMemo5 } from "react";
+import { useContext as useContext4, useMemo as useMemo7 } from "react";
 var convertPathDataToBreadcrumbs = (selectedItem, pathData, data) => {
   const id = selectedItem ? selectedItem == null ? void 0 : selectedItem.props.id : "";
   const currentPathData = pathData && id && pathData[id] ? __spreadValues({}, pathData[id]) : { label: "Page", path: [] };
@@ -3087,7 +3135,7 @@ var useBreadcrumbs = (renderCount) => {
     selectedItem
   } = useAppContext();
   const dzContext = useContext4(dropZoneContext);
-  return useMemo5(() => {
+  return useMemo7(() => {
     const breadcrumbs = convertPathDataToBreadcrumbs(
       selectedItem,
       dzContext == null ? void 0 : dzContext.pathData,
@@ -3571,7 +3619,7 @@ 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 useMemo6, useState as useState15 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect13, useMemo as useMemo8, useState as useState15 } from "react";
 
 // lib/use-parent.ts
 init_react_import();
@@ -3605,7 +3653,7 @@ 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 = useMemo6(
+  const defaultFields = useMemo8(
     () => (selectedItem ? componentConfig == null ? void 0 : componentConfig.fields : rootFields) || {},
     [selectedItem, rootFields, componentConfig == null ? void 0 : componentConfig.fields]
   );
@@ -3687,7 +3735,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 = useMemo6(() => overrides.fields || DefaultFields, [overrides]);
+  const Wrapper = useMemo8(() => overrides.fields || DefaultFields, [overrides]);
   return /* @__PURE__ */ jsxs15(
     "form",
     {
@@ -3766,34 +3814,36 @@ var Fields = () => {
             const { edit } = getPermissions({
               item: selectedItem
             });
+            const id = `${selectedItem.props.id}_${field.type}_${fieldName}`;
             return /* @__PURE__ */ jsx27(
               AutoFieldPrivate,
               {
                 field,
                 name: fieldName,
-                id: `${selectedItem.props.id}_${fieldName}`,
+                id,
                 readOnly: !edit || readOnly[fieldName],
                 value: selectedItem.props[fieldName],
                 onChange
               },
-              `${selectedItem.props.id}_${fieldName}`
+              id
             );
           } else {
             const readOnly = data.root.readOnly || {};
             const { edit } = getPermissions({
               root: true
             });
+            const id = `root_${field.type}_${fieldName}`;
             return /* @__PURE__ */ jsx27(
               AutoFieldPrivate,
               {
                 field,
                 name: fieldName,
-                id: `root_${fieldName}`,
+                id,
                 readOnly: !edit || readOnly[fieldName],
                 value: rootProps[fieldName],
                 onChange
               },
-              `page_${fieldName}`
+              id
             );
           }
         }) }),
@@ -3956,18 +4006,18 @@ var useComponentList = (config, ui) => {
 };
 
 // components/Puck/components/Components/index.tsx
-import { useMemo as useMemo7 } from "react";
+import { useMemo as useMemo9 } from "react";
 import { jsx as jsx30 } from "react/jsx-runtime";
 var Components = () => {
   const { config, state, overrides } = useAppContext();
   const componentList = useComponentList(config, state.ui);
-  const Wrapper = useMemo7(() => overrides.components || "div", [overrides]);
+  const Wrapper = useMemo9(() => overrides.components || "div", [overrides]);
   return /* @__PURE__ */ jsx30(Wrapper, { children: componentList ? componentList : /* @__PURE__ */ jsx30(ComponentList, { id: "all" }) });
 };
 
 // components/Puck/components/Preview/index.tsx
 init_react_import();
-import { useCallback as useCallback8, useMemo as useMemo8 } from "react";
+import { useCallback as useCallback8, useMemo as useMemo10 } from "react";
 
 // components/AutoFrame/index.tsx
 init_react_import();
@@ -4247,7 +4297,7 @@ var Preview = ({ id = "puck-preview" }) => {
     },
     [config.root]
   );
-  const Frame = useMemo8(() => overrides.iframe, [overrides]);
+  const Frame = useMemo10(() => overrides.iframe, [overrides]);
   const rootProps = state.data.root.props || state.data.root;
   return /* @__PURE__ */ jsx32(
     "div",
@@ -4469,7 +4519,7 @@ var LayerTree = ({
 };
 
 // components/Puck/components/Outline/index.tsx
-import { useCallback as useCallback9, useMemo as useMemo9 } from "react";
+import { useCallback as useCallback9, useMemo as useMemo11 } from "react";
 import { Fragment as Fragment16, jsx as jsx34, jsxs as jsxs18 } from "react/jsx-runtime";
 var Outline = () => {
   const { dispatch, state, overrides, config } = useAppContext();
@@ -4484,7 +4534,7 @@ var Outline = () => {
     },
     []
   );
-  const Wrapper = useMemo9(() => overrides.outline || "div", [overrides]);
+  const Wrapper = useMemo11(() => overrides.outline || "div", [overrides]);
   return /* @__PURE__ */ jsx34(Wrapper, { children: /* @__PURE__ */ jsx34(dropZoneContext.Consumer, { children: (ctx) => /* @__PURE__ */ jsxs18(Fragment16, { children: [
     (ctx == null ? void 0 : ctx.activeZones) && (ctx == null ? void 0 : ctx.activeZones[rootDroppableId]) && /* @__PURE__ */ jsx34(
       LayerTree,
@@ -4748,14 +4798,14 @@ var getBox = function getBox2(el) {
 import {
   useCallback as useCallback10,
   useEffect as useEffect17,
-  useMemo as useMemo11,
+  useMemo as useMemo13,
   useRef as useRef4,
   useState as useState20
 } from "react";
 
 // components/ViewportControls/index.tsx
 init_react_import();
-import { useEffect as useEffect16, useMemo as useMemo10, useState as useState19 } from "react";
+import { useEffect as useEffect16, useMemo as useMemo12, useState as useState19 } from "react";
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/ViewportControls/styles.module.css#css-module
 init_react_import();
@@ -4815,7 +4865,7 @@ var ViewportControls = ({
   const defaultsContainAutoZoom = defaultZoomOptions.find(
     (option) => option.value === autoZoom
   );
-  const zoomOptions = useMemo10(
+  const zoomOptions = useMemo12(
     () => [
       ...defaultZoomOptions,
       ...defaultsContainAutoZoom ? [] : [
@@ -4940,11 +4990,11 @@ var Canvas = () => {
   const { ui } = state;
   const frameRef = useRef4(null);
   const [showTransition, setShowTransition] = useState20(false);
-  const defaultRender = useMemo11(() => {
+  const defaultRender = useMemo13(() => {
     const PuckDefault = ({ children }) => /* @__PURE__ */ jsx36(Fragment17, { children });
     return PuckDefault;
   }, []);
-  const CustomPreview = useMemo11(
+  const CustomPreview = useMemo13(
     () => overrides.preview || defaultRender,
     [overrides]
   );
@@ -5100,7 +5150,7 @@ var insertComponent = (componentType, zone, index, {
 
 // lib/use-loaded-overrides.ts
 init_react_import();
-import { useMemo as useMemo12 } from "react";
+import { useMemo as useMemo14 } from "react";
 
 // lib/load-overrides.ts
 init_react_import();
@@ -5139,7 +5189,7 @@ var useLoadedOverrides = ({
   overrides,
   plugins
 }) => {
-  return useMemo12(() => {
+  return useMemo14(() => {
     return loadOverrides({ overrides, plugins });
   }, [plugins, overrides]);
 };
@@ -5320,7 +5370,7 @@ function Puck({
       window.removeEventListener("resize", handleResize);
     };
   }, []);
-  const defaultHeaderRender = useMemo13(() => {
+  const defaultHeaderRender = useMemo15(() => {
     if (renderHeader) {
       console.warn(
         "`renderHeader` is deprecated. Please use `overrides.header` and the `usePuck` hook instead"
@@ -5334,7 +5384,7 @@ function Puck({
     }
     return DefaultOverride;
   }, [renderHeader]);
-  const defaultHeaderActionsRender = useMemo13(() => {
+  const defaultHeaderActionsRender = useMemo15(() => {
     if (renderHeaderActions) {
       console.warn(
         "`renderHeaderActions` is deprecated. Please use `overrides.headerActions` and the `usePuck` hook instead."
@@ -5351,15 +5401,15 @@ function Puck({
     overrides,
     plugins
   });
-  const CustomPuck = useMemo13(
+  const CustomPuck = useMemo15(
     () => loadedOverrides.puck || DefaultOverride,
     [loadedOverrides]
   );
-  const CustomHeader = useMemo13(
+  const CustomHeader = useMemo15(
     () => loadedOverrides.header || defaultHeaderRender,
     [loadedOverrides]
   );
-  const CustomHeaderActions = useMemo13(
+  const CustomHeaderActions = useMemo15(
     () => loadedOverrides.headerActions || defaultHeaderActionsRender,
     [loadedOverrides]
   );
@@ -5727,6 +5777,11 @@ var usePuck = () => {
     getPermissions,
     refreshPermissions
   } = useAppContext();
+  if (dispatch === defaultContext.dispatch) {
+    throw new Error(
+      "usePuck was used outside of the <Puck> component. The usePuck hook must be rendered within the <Puck> context as children, overrides or plugins as described in https://puckeditor.com/docs/api-reference/functions/use-puck."
+    );
+  }
   return {
     appState,
     config,

package/dist/{resolve-all-data-C7aAQCY3.d.mts → resolve-all-data-zN5E6nBu.d.mts}

@@ -1,4 +1,4 @@
-import { CSSProperties, ReactElement, ReactNode } from 'react';
+import { CSSProperties, ReactElement, JSX, ReactNode } from 'react';
 
 type ItemSelector = {
     index: number;

package/dist/{resolve-all-data-C7aAQCY3.d.ts → resolve-all-data-zN5E6nBu.d.ts}

@@ -1,4 +1,4 @@
-import { CSSProperties, ReactElement, ReactNode } from 'react';
+import { CSSProperties, ReactElement, JSX, ReactNode } from 'react';
 
 type ItemSelector = {
     index: number;

package/dist/rsc.d.mts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { C as Config, D as Data } from './resolve-all-data-C7aAQCY3.mjs';
-export { a4 as resolveAllData } from './resolve-all-data-C7aAQCY3.mjs';
+import { C as Config, D as Data } from './resolve-all-data-zN5E6nBu.mjs';
+export { a4 as resolveAllData } from './resolve-all-data-zN5E6nBu.mjs';
 import 'react';
 
 declare function Render<UserConfig extends Config = Config>({ config, data, }: {

package/dist/rsc.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { C as Config, D as Data } from './resolve-all-data-C7aAQCY3.js';
-export { a4 as resolveAllData } from './resolve-all-data-C7aAQCY3.js';
+import { C as Config, D as Data } from './resolve-all-data-zN5E6nBu.js';
+export { a4 as resolveAllData } from './resolve-all-data-zN5E6nBu.js';
 import 'react';
 
 declare function Render<UserConfig extends Config = Config>({ config, data, }: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@measured/puck",
-  "version": "0.17.0-canary.f71da6d",
+  "version": "0.17.0-canary.fe9321f",
   "author": "Measured Corporation Ltd <hello@measured.co>",
   "repository": "measuredco/puck",
   "bugs": "https://github.com/measuredco/puck/issues",
@@ -11,20 +11,20 @@
   "exports": {
     ".": {
       "react-server": {
+        "types": "./dist/rsc.d.ts",
         "import": "./dist/rsc.mjs",
-        "require": "./dist/rsc.js",
-        "types": "./dist/rsc.d.ts"
+        "require": "./dist/rsc.js"
       },
       "default": {
+        "types": "./dist/index.d.ts",
         "import": "./dist/index.mjs",
-        "require": "./dist/index.js",
-        "types": "./dist/index.d.ts"
+        "require": "./dist/index.js"
       }
     },
     "./rsc": {
+      "types": "./dist/rsc.d.ts",
       "import": "./dist/rsc.mjs",
-      "require": "./dist/rsc.js",
-      "types": "./dist/rsc.d.ts"
+      "require": "./dist/rsc.js"
     },
     "./puck.css": "./dist/index.css",
     "./dist/index.css": "./dist/index.css"
@@ -48,7 +48,7 @@
     "dist"
   ],
   "devDependencies": {
-    "@testing-library/react": "^14.0.0",
+    "@testing-library/react": "^16.1.0",
     "@types/deep-diff": "^1.0.3",
     "@types/jest": "^29.5.4",
     "@types/object-hash": "^3.0.6",
@@ -78,6 +78,6 @@
     "uuid": "^9.0.1"
   },
   "peerDependencies": {
-    "react": "^17.0.0 || ^18.0.0"
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
   }
 }