@measured/puck 0.14.1 → 0.14.2-canary.23db292

package/README.md

@@ -108,7 +108,7 @@ Available recipes include:
 
 Puck is developed and maintained by **Measured**, a small group of industry veterans with decades of experience helping companies solve hard UI problems. We offer consultancy and development services for scale-ups, SMEs and enterprises.
 
-If you need support integrating Puck or creating a beautiful component library, please reach out via [our website](https://measured.co).
+If you need support integrating Puck or creating a beautiful component library, please reach out via the [Measured](https://measured.co) website.
 
 ## License
 

package/dist/index.css

@@ -135,6 +135,9 @@
 }
 
 /* styles.css */
+.Puck {
+  min-height: 100%;
+}
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/Button/Button.module.css/#css-module-data */
 ._Button_1t64k_1 {
@@ -283,25 +286,25 @@
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css/#css-module-data */
-._DraggableComponent_1542z_1 {
+._DraggableComponent_59z7f_1 {
   pointer-events: auto;
   --overlay-background: color-mix( in srgb, var(--puck-color-azure-08) 30%, transparent );
 }
-._DraggableComponent--isDragging_1542z_11 {
+._DraggableComponent--isDragging_59z7f_11 {
   background: color-mix(in srgb, var(--puck-color-azure-08) 10%, transparent);
   overflow: hidden;
 }
-._DraggableComponent-contents_1542z_16 {
+._DraggableComponent-contents_59z7f_16 {
   position: relative;
   pointer-events: none;
   z-index: 0;
 }
-._DraggableComponent-contents_1542z_16::before,
-._DraggableComponent-contents_1542z_16::after {
+._DraggableComponent-contents_59z7f_16::before,
+._DraggableComponent-contents_59z7f_16::after {
   content: " ";
   display: table;
 }
-._DraggableComponent-overlay_1542z_29 {
+._DraggableComponent-overlay_59z7f_29 {
   cursor: pointer;
   height: 100%;
   width: 100%;
@@ -312,13 +315,13 @@
   box-sizing: border-box;
   z-index: 1;
 }
-._DraggableComponent_1542z_1:focus-visible > ._DraggableComponent-overlay_1542z_29 {
+._DraggableComponent_59z7f_1:focus-visible > ._DraggableComponent-overlay_59z7f_29 {
   outline: 1px solid var(--puck-color-azure-05);
 }
-._DraggableComponent--isDragging_1542z_11 > ._DraggableComponent-overlay_1542z_29 {
-  outline: 1px var(--puck-color-azure-09) solid !important;
+._DraggableComponent--isDragging_59z7f_11 > ._DraggableComponent-overlay_59z7f_29 {
+  outline: 2px var(--puck-color-azure-09) solid !important;
 }
-._DraggableComponent-loadingOverlay_1542z_49 {
+._DraggableComponent-loadingOverlay_59z7f_49 {
   background: var(--puck-color-white);
   color: var(--puck-color-grey-03);
   border-radius: 4px;
@@ -333,32 +336,32 @@
   opacity: 0.8;
   z-index: 1;
 }
-._DraggableComponent_1542z_1:hover:not(._DraggableComponent--isLocked_1542z_65) > ._DraggableComponent-overlay_1542z_29 {
+._DraggableComponent_59z7f_1:hover:not(._DraggableComponent--isLocked_59z7f_65) > ._DraggableComponent-overlay_59z7f_29 {
   background: var(--overlay-background);
   pointer-events: none;
 }
-._DraggableComponent--forceHover_1542z_71 > ._DraggableComponent-overlay_1542z_29 {
+._DraggableComponent--forceHover_59z7f_71 > ._DraggableComponent-overlay_59z7f_29 {
   background: var(--overlay-background);
   pointer-events: none;
 }
-._DraggableComponent_1542z_1:not(._DraggableComponent--isSelected_1542z_76):hover > ._DraggableComponent-overlay_1542z_29 {
+._DraggableComponent_59z7f_1:not(._DraggableComponent--isSelected_59z7f_76):hover > ._DraggableComponent-overlay_59z7f_29 {
   outline: 2px var(--puck-color-azure-09) solid !important;
 }
-._DraggableComponent--indicativeHover_1542z_81 > ._DraggableComponent-overlay_1542z_29 {
+._DraggableComponent--indicativeHover_59z7f_81 > ._DraggableComponent-overlay_59z7f_29 {
   pointer-events: none;
 }
-._DraggableComponent_1542z_1:not(._DraggableComponent--isSelected_1542z_76):has(._DraggableComponent_1542z_1:hover > ._DraggableComponent-overlay_1542z_29) > ._DraggableComponent-overlay_1542z_29 {
+._DraggableComponent_59z7f_1:not(._DraggableComponent--isSelected_59z7f_76):has(._DraggableComponent_59z7f_1:hover > ._DraggableComponent-overlay_59z7f_29) > ._DraggableComponent-overlay_59z7f_29 {
   display: none;
 }
-._DraggableComponent--isSelected_1542z_76 > ._DraggableComponent-overlay_1542z_29 {
+._DraggableComponent--isSelected_59z7f_76 > ._DraggableComponent-overlay_59z7f_29 {
   outline: 2px var(--puck-color-azure-07) solid !important;
 }
-._DraggableComponent--isSelected_1542z_76 > ._DraggableComponent-actionsOverlay_1542z_97 {
+._DraggableComponent--isSelected_59z7f_76 > ._DraggableComponent-actionsOverlay_59z7f_97 {
   display: block;
   position: sticky;
   z-index: 2;
 }
-._DraggableComponent-actions_1542z_97 {
+._DraggableComponent-actions_59z7f_97 {
   position: absolute;
   width: auto;
   padding: 4px;
@@ -375,10 +378,10 @@
   box-sizing: border-box;
   transform-origin: right top;
 }
-._DraggableComponent--isSelected_1542z_76 > ._DraggableComponent-actionsOverlay_1542z_97 > ._DraggableComponent-actions_1542z_97 {
+._DraggableComponent--isSelected_59z7f_76 > ._DraggableComponent-actionsOverlay_59z7f_97 > ._DraggableComponent-actions_59z7f_97 {
   display: flex;
 }
-._DraggableComponent-actionsLabel_1542z_127 {
+._DraggableComponent-actionsLabel_59z7f_127 {
   color: var(--puck-color-grey-08);
   display: flex;
   font-size: var(--puck-font-size-xxxs);
@@ -392,7 +395,7 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-._DraggableComponent-action_1542z_97 {
+._DraggableComponent-action_59z7f_97 {
   background: transparent;
   border: none;
   color: var(--puck-color-grey-08);
@@ -405,60 +408,60 @@
   justify-content: center;
   transition: color 50ms ease-in;
 }
-._DraggableComponent-action_1542z_97:focus-visible {
+._DraggableComponent-action_59z7f_97:focus-visible {
   outline: 2px solid var(--puck-color-azure-05);
   outline-offset: -2px;
 }
 @media (hover: hover) and (pointer: fine) {
-  ._DraggableComponent-action_1542z_97:hover {
+  ._DraggableComponent-action_59z7f_97:hover {
     color: var(--puck-color-azure-06);
     transition: none;
   }
 }
-._DraggableComponent-action_1542z_97:active {
+._DraggableComponent-action_59z7f_97:active {
   color: var(--puck-color-azure-07);
   transition: none;
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/DropZone/styles.module.css/#css-module-data */
-._DropZone_w4btq_1 {
+._DropZone_djoti_1 {
   margin-left: auto;
   margin-right: auto;
   position: relative;
-  height: 100%;
-  outline-offset: -1px;
+  min-height: 100%;
+  outline-offset: -2px;
   width: 100%;
 }
-._DropZone-content_w4btq_10 {
+._DropZone-content_djoti_10 {
   min-height: 128px;
   height: 100%;
 }
-._DropZone--userIsDragging_w4btq_15 ._DropZone-content_w4btq_10 {
+._DropZone--userIsDragging_djoti_15 ._DropZone-content_djoti_10 {
   pointer-events: all;
 }
-._DropZone--userIsDragging_w4btq_15:not(._DropZone--draggingOverArea_w4btq_19):not(._DropZone--draggingNewComponent_w4btq_20) > ._DropZone-content_w4btq_10 {
+._DropZone--userIsDragging_djoti_15:not(._DropZone--draggingOverArea_djoti_19):not(._DropZone--draggingNewComponent_djoti_20) > ._DropZone-content_djoti_10 {
   pointer-events: none;
 }
-._DropZone--isAreaSelected_w4btq_26,
-._DropZone--draggingOverArea_w4btq_19:not(:has(._DropZone--hoveringOverArea_w4btq_27)),
-._DropZone--hoveringOverArea_w4btq_27:not(._DropZone--isDisabled_w4btq_28):not(._DropZone--isRootZone_w4btq_29):not(._DropZone--hasChildren_w4btq_30) {
+._DropZone--isAreaSelected_djoti_26,
+._DropZone--draggingOverArea_djoti_19:not(:has(._DropZone--hoveringOverArea_djoti_27)),
+._DropZone--hoveringOverArea_djoti_27:not(._DropZone--isDisabled_djoti_28):not(._DropZone--isRootZone_djoti_29):not(._DropZone--hasChildren_djoti_30) {
   background: color-mix(in srgb, var(--puck-color-azure-09) 30%, transparent);
   outline: 2px dashed var(--puck-color-azure-08);
 }
-._DropZone_w4btq_1:not(._DropZone--hasChildren_w4btq_30) {
+._DropZone_djoti_1:not(._DropZone--hasChildren_djoti_30) {
   background: color-mix(in srgb, var(--puck-color-azure-09) 30%, transparent);
   outline: 2px dashed var(--puck-color-azure-08);
 }
-._DropZone--isDestination_w4btq_40 {
+._DropZone--isDestination_djoti_40 {
   outline: 2px dashed var(--puck-color-azure-04) !important;
 }
-._DropZone--isDestination_w4btq_40:not(._DropZone--isRootZone_w4btq_29) {
+._DropZone--isDestination_djoti_40:not(._DropZone--isRootZone_djoti_29) {
   background: color-mix(in srgb, var(--puck-color-azure-09) 30%, transparent) !important;
 }
-._DropZone-item_w4btq_52 {
+._DropZone-item_djoti_52 {
   position: relative;
 }
-._DropZone-hitbox_w4btq_56 {
+._DropZone-hitbox_djoti_56 {
   position: absolute;
   bottom: -12px;
   height: 24px;
@@ -1531,12 +1534,12 @@ textarea._Input-input_1qi5b_46 {
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Preview/styles.module.css/#css-module-data */
-._PuckPreview_1mia0_1 {
+._PuckPreview_rxwlr_1 {
   height: 100%;
 }
-._PuckPreview-frame_1mia0_5 {
+._PuckPreview-frame_rxwlr_5 {
   border: none;
-  height: 100%;
+  min-height: 100%;
   width: 100%;
 }
 

package/dist/index.js

@@ -29296,10 +29296,10 @@ var setupZone = (data, zoneKey) => {
 var getItem = (selector, data, dynamicProps = {}) => {
   if (!selector.zone || selector.zone === rootDroppableId) {
     const item2 = data.content[selector.index];
-    return __spreadProps(__spreadValues({}, item2), { props: dynamicProps[item2.props.id] || item2.props });
+    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 __spreadProps(__spreadValues({}, item), { props: dynamicProps[item.props.id] || item.props });
+  return (item == null ? void 0 : item.props) ? __spreadProps(__spreadValues({}, item), { props: dynamicProps[item.props.id] || item.props }) : void 0;
 };
 
 // components/ViewportControls/default-viewports.ts
@@ -29311,6 +29311,7 @@ var defaultViewports = [
 ];
 
 // components/Puck/context.tsx
+var import_ua_parser_js = require("ua-parser-js");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var defaultAppState = {
   data: { content: [], root: { props: { title: "" } } },
@@ -29350,7 +29351,8 @@ var defaultContext = {
   setZoomConfig: () => null,
   status: "LOADING",
   setStatus: () => null,
-  iframe: {}
+  iframe: {},
+  safariFallbackMode: false
 };
 var appContext = (0, import_react3.createContext)(defaultContext);
 var AppProvider = ({
@@ -29362,10 +29364,34 @@ var AppProvider = ({
   (0, import_react3.useEffect)(() => {
     setStatus("MOUNTED");
   }, []);
+  const [safariFallbackMode, setSafariFallbackMode] = (0, import_react3.useState)(false);
+  (0, import_react3.useEffect)(() => {
+    var _a, _b, _c;
+    const ua = new import_ua_parser_js.UAParser(navigator.userAgent);
+    const { browser } = ua.getResult();
+    if (browser.name === "Safari" && (((_a = browser.version) == null ? void 0 : _a.indexOf("17.2.")) || ((_b = browser.version) == null ? void 0 : _b.indexOf("17.3.")) || ((_c = browser.version) == null ? void 0 : _c.indexOf("17.4.")))) {
+      if (process.env.NODE_ENV !== "production" && value.iframe.enabled) {
+        console.warn(
+          `Detected Safari ${browser.version}, which contains a bug that prevents Puck DropZones from detecting a mouseover event within an iframe. This affects Safari versions 17.2, 17.3 and 17.4.
+
+Running in compatibility mode, which may have some DropZone side-effects. Alternatively, consider disabling iframes: https://puckeditor.com/docs/integrating-puck/viewports#opting-out-of-iframes.
+
+See https://github.com/measuredco/puck/issues/411 for more information. This message will not show in production.`
+        );
+      }
+      setSafariFallbackMode(true);
+    }
+  }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     appContext.Provider,
     {
-      value: __spreadProps(__spreadValues({}, value), { zoomConfig, setZoomConfig, status, setStatus }),
+      value: __spreadProps(__spreadValues({}, value), {
+        zoomConfig,
+        setZoomConfig,
+        status,
+        setStatus,
+        safariFallbackMode
+      }),
       children
     }
   );
@@ -29589,7 +29615,7 @@ var import_dnd3 = require("@measured/dnd");
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css#css-module
 init_react_import();
-var styles_module_default3 = { "DraggableComponent": "_DraggableComponent_1542z_1", "DraggableComponent--isDragging": "_DraggableComponent--isDragging_1542z_11", "DraggableComponent-contents": "_DraggableComponent-contents_1542z_16", "DraggableComponent-overlay": "_DraggableComponent-overlay_1542z_29", "DraggableComponent-loadingOverlay": "_DraggableComponent-loadingOverlay_1542z_49", "DraggableComponent--isLocked": "_DraggableComponent--isLocked_1542z_65", "DraggableComponent--forceHover": "_DraggableComponent--forceHover_1542z_71", "DraggableComponent--isSelected": "_DraggableComponent--isSelected_1542z_76", "DraggableComponent--indicativeHover": "_DraggableComponent--indicativeHover_1542z_81", "DraggableComponent-actionsOverlay": "_DraggableComponent-actionsOverlay_1542z_97", "DraggableComponent-actions": "_DraggableComponent-actions_1542z_97", "DraggableComponent-actionsLabel": "_DraggableComponent-actionsLabel_1542z_127", "DraggableComponent-action": "_DraggableComponent-action_1542z_97" };
+var styles_module_default3 = { "DraggableComponent": "_DraggableComponent_59z7f_1", "DraggableComponent--isDragging": "_DraggableComponent--isDragging_59z7f_11", "DraggableComponent-contents": "_DraggableComponent-contents_59z7f_16", "DraggableComponent-overlay": "_DraggableComponent-overlay_59z7f_29", "DraggableComponent-loadingOverlay": "_DraggableComponent-loadingOverlay_59z7f_49", "DraggableComponent--isLocked": "_DraggableComponent--isLocked_59z7f_65", "DraggableComponent--forceHover": "_DraggableComponent--forceHover_59z7f_71", "DraggableComponent--isSelected": "_DraggableComponent--isSelected_59z7f_76", "DraggableComponent--indicativeHover": "_DraggableComponent--indicativeHover_59z7f_81", "DraggableComponent-actionsOverlay": "_DraggableComponent-actionsOverlay_59z7f_97", "DraggableComponent-actions": "_DraggableComponent-actions_59z7f_97", "DraggableComponent-actionsLabel": "_DraggableComponent-actionsLabel_59z7f_127", "DraggableComponent-action": "_DraggableComponent-action_59z7f_97" };
 
 // ../../node_modules/lucide-react/dist/esm/lucide-react.js
 init_react_import();
@@ -30000,7 +30026,7 @@ var DraggableComponent = ({
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/DropZone/styles.module.css#css-module
 init_react_import();
-var styles_module_default4 = { "DropZone": "_DropZone_w4btq_1", "DropZone-content": "_DropZone-content_w4btq_10", "DropZone--userIsDragging": "_DropZone--userIsDragging_w4btq_15", "DropZone--draggingOverArea": "_DropZone--draggingOverArea_w4btq_19", "DropZone--draggingNewComponent": "_DropZone--draggingNewComponent_w4btq_20", "DropZone--isAreaSelected": "_DropZone--isAreaSelected_w4btq_26", "DropZone--hoveringOverArea": "_DropZone--hoveringOverArea_w4btq_27", "DropZone--isDisabled": "_DropZone--isDisabled_w4btq_28", "DropZone--isRootZone": "_DropZone--isRootZone_w4btq_29", "DropZone--hasChildren": "_DropZone--hasChildren_w4btq_30", "DropZone--isDestination": "_DropZone--isDestination_w4btq_40", "DropZone-item": "_DropZone-item_w4btq_52", "DropZone-hitbox": "_DropZone-hitbox_w4btq_56" };
+var styles_module_default4 = { "DropZone": "_DropZone_djoti_1", "DropZone-content": "_DropZone-content_djoti_10", "DropZone--userIsDragging": "_DropZone--userIsDragging_djoti_15", "DropZone--draggingOverArea": "_DropZone--draggingOverArea_djoti_19", "DropZone--draggingNewComponent": "_DropZone--draggingNewComponent_djoti_20", "DropZone--isAreaSelected": "_DropZone--isAreaSelected_djoti_26", "DropZone--hoveringOverArea": "_DropZone--hoveringOverArea_djoti_27", "DropZone--isDisabled": "_DropZone--isDisabled_djoti_28", "DropZone--isRootZone": "_DropZone--isRootZone_djoti_29", "DropZone--hasChildren": "_DropZone--hasChildren_djoti_30", "DropZone--isDestination": "_DropZone--isDestination_djoti_40", "DropZone-item": "_DropZone-item_djoti_52", "DropZone-hitbox": "_DropZone-hitbox_djoti_56" };
 
 // components/DropZone/context.tsx
 init_react_import();
@@ -30193,7 +30219,11 @@ function DropZoneEdit({ zone, allow, disallow, style }) {
   let isEnabled = userWillDrag;
   if (userIsDragging) {
     if (draggingNewComponent) {
-      isEnabled = hoveringOverArea;
+      if (appContext2.safariFallbackMode) {
+        isEnabled = true;
+      } else {
+        isEnabled = hoveringOverArea;
+      }
     } else {
       isEnabled = draggingOverArea && hoveringOverZone;
     }
@@ -32073,7 +32103,7 @@ var SelectField = ({
           disabled: readOnly,
           onChange: (e) => {
             if (e.currentTarget.value === "true" || e.currentTarget.value === "false") {
-              onChange(Boolean(e.currentTarget.value));
+              onChange(JSON.parse(e.currentTarget.value));
               return;
             }
             onChange(e.currentTarget.value);
@@ -32535,10 +32565,11 @@ var useComponentList = (config, ui) => {
               children: category.components.map((componentName, i) => {
                 var _a2;
                 matchedComponents.push(componentName);
+                const componentConf = config.components[componentName] || {};
                 return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                   ComponentList.Item,
                   {
-                    label: (_a2 = config.components[componentName]["label"]) != null ? _a2 : componentName,
+                    label: (_a2 = componentConf["label"]) != null ? _a2 : componentName,
                     name: componentName,
                     index: i
                   },
@@ -32562,11 +32593,12 @@ var useComponentList = (config, ui) => {
               title: ((_c = ui.componentList.other) == null ? void 0 : _c.title) || "Other",
               children: remainingComponents.map((componentName, i) => {
                 var _a2;
+                const componentConf = config.components[componentName] || {};
                 return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                   ComponentList.Item,
                   {
                     name: componentName,
-                    label: (_a2 = config.components[componentName]["label"]) != null ? _a2 : componentName,
+                    label: (_a2 = componentConf["label"]) != null ? _a2 : componentName,
                     index: i
                   },
                   componentName
@@ -32600,7 +32632,7 @@ var import_auto_frame_component = __toESM(require("@measured/auto-frame-componen
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Preview/styles.module.css#css-module
 init_react_import();
-var styles_module_default16 = { "PuckPreview": "_PuckPreview_1mia0_1", "PuckPreview-frame": "_PuckPreview-frame_1mia0_5" };
+var styles_module_default16 = { "PuckPreview": "_PuckPreview_rxwlr_1", "PuckPreview-frame": "_PuckPreview-frame_rxwlr_5" };
 
 // components/Puck/components/Preview/index.tsx
 var import_jsx_runtime29 = require("react/jsx-runtime");
@@ -33380,7 +33412,7 @@ var Canvas = () => {
           {
             className: getClassName24("root"),
             style: {
-              width: iframe.enabled ? ui.viewports.current.width : void 0,
+              width: iframe.enabled ? ui.viewports.current.width : "100%",
               height: zoomConfig.rootHeight,
               transform: iframe.enabled ? `scale(${zoomConfig.zoom})` : void 0,
               transition: showTransition ? "width 150ms ease-out, height 150ms ease-out, transform 150ms ease-out" : "",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@measured/puck",
-  "version": "0.14.1",
+  "version": "0.14.2-canary.23db292",
   "author": "Measured Corporation Ltd <hello@measured.co>",
   "repository": "measuredco/puck",
   "bugs": "https://github.com/measuredco/puck/issues",
@@ -46,6 +46,7 @@
     "@types/jest": "^29.5.4",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
+    "@types/ua-parser-js": "^0.7.39",
     "css-box-model": "^1.2.1",
     "eslint": "^7.32.0",
     "eslint-config-custom": "*",
@@ -59,11 +60,12 @@
     "typescript": "^4.5.2"
   },
   "dependencies": {
-    "@measured/auto-frame-component": "0.1.1",
-    "@measured/dnd": "16.6.0-canary.c7c88e8",
+    "@measured/auto-frame-component": "0.1.3",
+    "@measured/dnd": "16.6.0-canary.4cba1d1",
     "deep-diff": "^1.0.2",
     "react-hotkeys-hook": "^4.4.1",
     "react-spinners": "^0.13.8",
+    "ua-parser-js": "^1.0.37",
     "use-debounce": "^9.0.4",
     "uuid": "^9.0.1"
   },