@payloadcms/next 3.0.0-beta.9 → 3.0.0-beta.91

package/dist/views/LivePreview/Device/index.js

@@ -1,51 +1,88 @@
 'use client';
-import { useResize } from '@payloadcms/ui/hooks/useResize';
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useResize } from '@payloadcms/ui';
 import React, { useEffect } from 'react';
 import { useLivePreviewContext } from '../Context/context.js';
-export const DeviceContainer = (props)=>{
-    const { children } = props;
-    const deviceFrameRef = React.useRef(null);
-    const { breakpoint, setMeasuredDeviceSize, size, zoom } = useLivePreviewContext();
-    // Keep an accurate measurement of the actual device size as it is truly rendered
-    // This is helpful when `sizes` are non-number units like percentages, etc.
-    const { size: measuredDeviceSize } = useResize(deviceFrameRef);
-    // Sync the measured device size with the context so that other components can use it
-    // This happens from the bottom up so that as this component mounts and unmounts,
-    // Its size is freshly populated again upon re-mounting, i.e. going from iframe->popup->iframe
-    useEffect(()=>{
-        if (measuredDeviceSize) {
-            setMeasuredDeviceSize(measuredDeviceSize);
+export const DeviceContainer = props => {
+  const {
+    children
+  } = props;
+  const deviceFrameRef = React.useRef(null);
+  const outerFrameRef = React.useRef(null);
+  const {
+    breakpoint,
+    setMeasuredDeviceSize,
+    size: desiredSize,
+    zoom
+  } = useLivePreviewContext();
+  // Keep an accurate measurement of the actual device size as it is truly rendered
+  // This is helpful when `sizes` are non-number units like percentages, etc.
+  const {
+    size: measuredDeviceSize
+  } = useResize(deviceFrameRef.current);
+  const {
+    size: outerFrameSize
+  } = useResize(outerFrameRef.current);
+  let deviceIsLargerThanFrame = false;
+  // Sync the measured device size with the context so that other components can use it
+  // This happens from the bottom up so that as this component mounts and unmounts,
+  // its size is freshly populated again upon re-mounting, i.e. going from iframe->popup->iframe
+  useEffect(() => {
+    if (measuredDeviceSize) {
+      setMeasuredDeviceSize(measuredDeviceSize);
+    }
+  }, [measuredDeviceSize, setMeasuredDeviceSize]);
+  let x = '0';
+  let margin = '0';
+  if (breakpoint && breakpoint !== 'responsive') {
+    x = '-50%';
+    if (typeof zoom === 'number' && typeof desiredSize.width === 'number' && typeof desiredSize.height === 'number' && typeof measuredDeviceSize.width === 'number' && typeof measuredDeviceSize.height === 'number') {
+      margin = '0 auto';
+      const scaledDesiredWidth = desiredSize.width / zoom;
+      const scaledDeviceWidth = measuredDeviceSize.width * zoom;
+      const scaledDeviceDifferencePixels = scaledDesiredWidth - desiredSize.width;
+      deviceIsLargerThanFrame = scaledDeviceWidth > outerFrameSize.width;
+      if (deviceIsLargerThanFrame) {
+        if (zoom > 1) {
+          const differenceFromDeviceToFrame = measuredDeviceSize.width - outerFrameSize.width;
+          if (differenceFromDeviceToFrame < 0) x = `${differenceFromDeviceToFrame / 2}px`;else x = '0';
+        } else {
+          x = '0';
         }
-    }, [
-        measuredDeviceSize,
-        setMeasuredDeviceSize
-    ]);
-    let x = '0';
-    let margin = '0';
-    if (breakpoint && breakpoint !== 'responsive') {
-        x = '-50%';
-        if (typeof zoom === 'number' && typeof size.width === 'number' && typeof size.height === 'number') {
-            const scaledWidth = size.width / zoom;
-            const difference = scaledWidth - size.width;
-            x = `${difference / 2}px`;
-            margin = '0 auto';
+      } else {
+        if (zoom >= 1) {
+          x = `${scaledDeviceDifferencePixels / 2}px`;
+        } else {
+          const differenceFromDeviceToFrame_0 = outerFrameSize.width - scaledDeviceWidth;
+          x = `${differenceFromDeviceToFrame_0 / 2}px`;
+          margin = '0';
         }
+      }
     }
-    let width = zoom ? `${100 / zoom}%` : '100%';
-    let height = zoom ? `${100 / zoom}%` : '100%';
-    if (breakpoint !== 'responsive') {
-        width = `${size?.width / (typeof zoom === 'number' ? zoom : 1)}px`;
-        height = `${size?.height / (typeof zoom === 'number' ? zoom : 1)}px`;
-    }
-    return /*#__PURE__*/ React.createElement("div", {
-        ref: deviceFrameRef,
-        style: {
-            height,
-            margin,
-            transform: `translate3d(${x}, 0, 0)`,
-            width
-        }
-    }, children);
+  }
+  let width = zoom ? `${100 / zoom}%` : '100%';
+  let height = zoom ? `${100 / zoom}%` : '100%';
+  if (breakpoint !== 'responsive') {
+    width = `${desiredSize?.width / (typeof zoom === 'number' ? zoom : 1)}px`;
+    height = `${desiredSize?.height / (typeof zoom === 'number' ? zoom : 1)}px`;
+  }
+  return /*#__PURE__*/_jsx("div", {
+    ref: outerFrameRef,
+    style: {
+      height: '100%',
+      width: '100%'
+    },
+    children: /*#__PURE__*/_jsx("div", {
+      ref: deviceFrameRef,
+      style: {
+        height,
+        margin,
+        transform: `translate3d(${x}, 0, 0)`,
+        width
+      },
+      children: children
+    })
+  });
 };
-
 //# sourceMappingURL=index.js.map

package/dist/views/LivePreview/Device/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/views/LivePreview/Device/index.tsx"],"sourcesContent":["'use client'\nimport { useResize } from '@payloadcms/ui/hooks/useResize'\nimport React, { useEffect } from 'react'\n\nimport { useLivePreviewContext } from '../Context/context.js'\n\nexport const DeviceContainer: React.FC<{\n  children: React.ReactNode\n}> = (props) => {\n  const { children } = props\n\n  const deviceFrameRef = React.useRef<HTMLDivElement>(null)\n\n  const { breakpoint, setMeasuredDeviceSize, size, zoom } = useLivePreviewContext()\n\n  // Keep an accurate measurement of the actual device size as it is truly rendered\n  // This is helpful when `sizes` are non-number units like percentages, etc.\n  const { size: measuredDeviceSize } = useResize(deviceFrameRef)\n\n  // Sync the measured device size with the context so that other components can use it\n  // This happens from the bottom up so that as this component mounts and unmounts,\n  // Its size is freshly populated again upon re-mounting, i.e. going from iframe->popup->iframe\n  useEffect(() => {\n    if (measuredDeviceSize) {\n      setMeasuredDeviceSize(measuredDeviceSize)\n    }\n  }, [measuredDeviceSize, setMeasuredDeviceSize])\n\n  let x = '0'\n  let margin = '0'\n\n  if (breakpoint && breakpoint !== 'responsive') {\n    x = '-50%'\n\n    if (\n      typeof zoom === 'number' &&\n      typeof size.width === 'number' &&\n      typeof size.height === 'number'\n    ) {\n      const scaledWidth = size.width / zoom\n      const difference = scaledWidth - size.width\n      x = `${difference / 2}px`\n      margin = '0 auto'\n    }\n  }\n\n  let width = zoom ? `${100 / zoom}%` : '100%'\n  let height = zoom ? `${100 / zoom}%` : '100%'\n\n  if (breakpoint !== 'responsive') {\n    width = `${size?.width / (typeof zoom === 'number' ? zoom : 1)}px`\n    height = `${size?.height / (typeof zoom === 'number' ? zoom : 1)}px`\n  }\n\n  return (\n    <div\n      ref={deviceFrameRef}\n      style={{\n        height,\n        margin,\n        transform: `translate3d(${x}, 0, 0)`,\n        width,\n      }}\n    >\n      {children}\n    </div>\n  )\n}\n"],"names":["useResize","React","useEffect","useLivePreviewContext","DeviceContainer","props","children","deviceFrameRef","useRef","breakpoint","setMeasuredDeviceSize","size","zoom","measuredDeviceSize","x","margin","width","height","scaledWidth","difference","div","ref","style","transform"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,SAASA,SAAS,QAAQ,iCAAgC;AAC1D,OAAOC,SAASC,SAAS,QAAQ,QAAO;AAExC,SAASC,qBAAqB,QAAQ,wBAAuB;AAE7D,OAAO,MAAMC,kBAER,CAACC;IACJ,MAAM,EAAEC,QAAQ,EAAE,GAAGD;IAErB,MAAME,iBAAiBN,MAAMO,MAAM,CAAiB;IAEpD,MAAM,EAAEC,UAAU,EAAEC,qBAAqB,EAAEC,IAAI,EAAEC,IAAI,EAAE,GAAGT;IAE1D,iFAAiF;IACjF,2EAA2E;IAC3E,MAAM,EAAEQ,MAAME,kBAAkB,EAAE,GAAGb,UAAUO;IAE/C,qFAAqF;IACrF,iFAAiF;IACjF,8FAA8F;IAC9FL,UAAU;QACR,IAAIW,oBAAoB;YACtBH,sBAAsBG;QACxB;IACF,GAAG;QAACA;QAAoBH;KAAsB;IAE9C,IAAII,IAAI;IACR,IAAIC,SAAS;IAEb,IAAIN,cAAcA,eAAe,cAAc;QAC7CK,IAAI;QAEJ,IACE,OAAOF,SAAS,YAChB,OAAOD,KAAKK,KAAK,KAAK,YACtB,OAAOL,KAAKM,MAAM,KAAK,UACvB;YACA,MAAMC,cAAcP,KAAKK,KAAK,GAAGJ;YACjC,MAAMO,aAAaD,cAAcP,KAAKK,KAAK;YAC3CF,IAAI,CAAC,EAAEK,aAAa,EAAE,EAAE,CAAC;YACzBJ,SAAS;QACX;IACF;IAEA,IAAIC,QAAQJ,OAAO,CAAC,EAAE,MAAMA,KAAK,CAAC,CAAC,GAAG;IACtC,IAAIK,SAASL,OAAO,CAAC,EAAE,MAAMA,KAAK,CAAC,CAAC,GAAG;IAEvC,IAAIH,eAAe,cAAc;QAC/BO,QAAQ,CAAC,EAAEL,MAAMK,QAAS,CAAA,OAAOJ,SAAS,WAAWA,OAAO,CAAA,EAAG,EAAE,CAAC;QAClEK,SAAS,CAAC,EAAEN,MAAMM,SAAU,CAAA,OAAOL,SAAS,WAAWA,OAAO,CAAA,EAAG,EAAE,CAAC;IACtE;IAEA,qBACE,oBAACQ;QACCC,KAAKd;QACLe,OAAO;YACLL;YACAF;YACAQ,WAAW,CAAC,YAAY,EAAET,EAAE,OAAO,CAAC;YACpCE;QACF;OAECV;AAGP,EAAC"}
+{"version":3,"file":"index.js","names":["useResize","React","useEffect","useLivePreviewContext","DeviceContainer","props","children","deviceFrameRef","useRef","outerFrameRef","breakpoint","setMeasuredDeviceSize","size","desiredSize","zoom","measuredDeviceSize","current","outerFrameSize","deviceIsLargerThanFrame","x","margin","width","height","scaledDesiredWidth","scaledDeviceWidth","scaledDeviceDifferencePixels","differenceFromDeviceToFrame","_jsx","ref","style","transform"],"sources":["../../../../src/views/LivePreview/Device/index.tsx"],"sourcesContent":["'use client'\nimport { useResize } from '@payloadcms/ui'\nimport React, { useEffect } from 'react'\n\nimport { useLivePreviewContext } from '../Context/context.js'\n\nexport const DeviceContainer: React.FC<{\n  children: React.ReactNode\n}> = (props) => {\n  const { children } = props\n\n  const deviceFrameRef = React.useRef<HTMLDivElement>(null)\n  const outerFrameRef = React.useRef<HTMLDivElement>(null)\n\n  const { breakpoint, setMeasuredDeviceSize, size: desiredSize, zoom } = useLivePreviewContext()\n\n  // Keep an accurate measurement of the actual device size as it is truly rendered\n  // This is helpful when `sizes` are non-number units like percentages, etc.\n  const { size: measuredDeviceSize } = useResize(deviceFrameRef.current)\n  const { size: outerFrameSize } = useResize(outerFrameRef.current)\n\n  let deviceIsLargerThanFrame: boolean = false\n\n  // Sync the measured device size with the context so that other components can use it\n  // This happens from the bottom up so that as this component mounts and unmounts,\n  // its size is freshly populated again upon re-mounting, i.e. going from iframe->popup->iframe\n  useEffect(() => {\n    if (measuredDeviceSize) {\n      setMeasuredDeviceSize(measuredDeviceSize)\n    }\n  }, [measuredDeviceSize, setMeasuredDeviceSize])\n\n  let x = '0'\n  let margin = '0'\n\n  if (breakpoint && breakpoint !== 'responsive') {\n    x = '-50%'\n\n    if (\n      typeof zoom === 'number' &&\n      typeof desiredSize.width === 'number' &&\n      typeof desiredSize.height === 'number' &&\n      typeof measuredDeviceSize.width === 'number' &&\n      typeof measuredDeviceSize.height === 'number'\n    ) {\n      margin = '0 auto'\n      const scaledDesiredWidth = desiredSize.width / zoom\n      const scaledDeviceWidth = measuredDeviceSize.width * zoom\n      const scaledDeviceDifferencePixels = scaledDesiredWidth - desiredSize.width\n      deviceIsLargerThanFrame = scaledDeviceWidth > outerFrameSize.width\n\n      if (deviceIsLargerThanFrame) {\n        if (zoom > 1) {\n          const differenceFromDeviceToFrame = measuredDeviceSize.width - outerFrameSize.width\n          if (differenceFromDeviceToFrame < 0) x = `${differenceFromDeviceToFrame / 2}px`\n          else x = '0'\n        } else {\n          x = '0'\n        }\n      } else {\n        if (zoom >= 1) {\n          x = `${scaledDeviceDifferencePixels / 2}px`\n        } else {\n          const differenceFromDeviceToFrame = outerFrameSize.width - scaledDeviceWidth\n          x = `${differenceFromDeviceToFrame / 2}px`\n          margin = '0'\n        }\n      }\n    }\n  }\n\n  let width = zoom ? `${100 / zoom}%` : '100%'\n  let height = zoom ? `${100 / zoom}%` : '100%'\n\n  if (breakpoint !== 'responsive') {\n    width = `${desiredSize?.width / (typeof zoom === 'number' ? zoom : 1)}px`\n    height = `${desiredSize?.height / (typeof zoom === 'number' ? zoom : 1)}px`\n  }\n\n  return (\n    <div\n      ref={outerFrameRef}\n      style={{\n        height: '100%',\n        width: '100%',\n      }}\n    >\n      <div\n        ref={deviceFrameRef}\n        style={{\n          height,\n          margin,\n          transform: `translate3d(${x}, 0, 0)`,\n          width,\n        }}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/views/LivePreview/DeviceContainer/index.js

@@ -1,29 +1,55 @@
 'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { useLivePreviewContext } from '../Context/context.js';
-export const DeviceContainer = (props)=>{
-    const { children } = props;
-    const { breakpoint, breakpoints, size, zoom } = useLivePreviewContext();
-    const foundBreakpoint = breakpoint && breakpoints?.find((bp)=>bp.name === breakpoint);
-    let x = '0';
-    let margin = '0';
-    if (foundBreakpoint && breakpoint !== 'responsive') {
-        x = '-50%';
-        if (typeof zoom === 'number' && typeof size.width === 'number' && typeof size.height === 'number') {
-            const scaledWidth = size.width / zoom;
-            const difference = scaledWidth - size.width;
-            x = `${difference / 2}px`;
-            margin = '0 auto';
-        }
+export const DeviceContainer = props => {
+  const $ = _c(6);
+  const {
+    children
+  } = props;
+  const {
+    breakpoint,
+    breakpoints,
+    size,
+    zoom
+  } = useLivePreviewContext();
+  const foundBreakpoint = breakpoint && breakpoints?.find(bp => bp.name === breakpoint);
+  let x = "0";
+  let margin = "0";
+  if (foundBreakpoint && breakpoint !== "responsive") {
+    x = "-50%";
+    if (typeof zoom === "number" && typeof size.width === "number" && typeof size.height === "number") {
+      const scaledWidth = size.width / zoom;
+      const difference = scaledWidth - size.width;
+      x = `${difference / 2}px`;
+      margin = "0 auto";
     }
-    return /*#__PURE__*/ React.createElement("div", {
-        style: {
-            height: foundBreakpoint && foundBreakpoint?.name !== 'responsive' ? `${size?.height / (typeof zoom === 'number' ? zoom : 1)}px` : typeof zoom === 'number' ? `${100 / zoom}%` : '100%',
-            margin,
-            transform: `translate3d(${x}, 0, 0)`,
-            width: foundBreakpoint && foundBreakpoint?.name !== 'responsive' ? `${size?.width / (typeof zoom === 'number' ? zoom : 1)}px` : typeof zoom === 'number' ? `${100 / zoom}%` : '100%'
-        }
-    }, children);
+  }
+  const t0 = foundBreakpoint && foundBreakpoint?.name !== "responsive" ? `${size?.height / (typeof zoom === "number" ? zoom : 1)}px` : typeof zoom === "number" ? `${100 / zoom}%` : "100%";
+  const t1 = `translate3d(${x}, 0, 0)`;
+  const t2 = foundBreakpoint && foundBreakpoint?.name !== "responsive" ? `${size?.width / (typeof zoom === "number" ? zoom : 1)}px` : typeof zoom === "number" ? `${100 / zoom}%` : "100%";
+  let t3;
+  if ($[0] !== t0 || $[1] !== margin || $[2] !== t1 || $[3] !== t2 || $[4] !== children) {
+    t3 = _jsx("div", {
+      style: {
+        height: t0,
+        margin,
+        transform: t1,
+        width: t2
+      },
+      children
+    });
+    $[0] = t0;
+    $[1] = margin;
+    $[2] = t1;
+    $[3] = t2;
+    $[4] = children;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  return t3;
 };
-
 //# sourceMappingURL=index.js.map

package/dist/views/LivePreview/DeviceContainer/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/views/LivePreview/DeviceContainer/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { useLivePreviewContext } from '../Context/context.js'\n\nexport const DeviceContainer: React.FC<{\n  children: React.ReactNode\n}> = (props) => {\n  const { children } = props\n\n  const { breakpoint, breakpoints, size, zoom } = useLivePreviewContext()\n\n  const foundBreakpoint = breakpoint && breakpoints?.find((bp) => bp.name === breakpoint)\n\n  let x = '0'\n  let margin = '0'\n\n  if (foundBreakpoint && breakpoint !== 'responsive') {\n    x = '-50%'\n\n    if (\n      typeof zoom === 'number' &&\n      typeof size.width === 'number' &&\n      typeof size.height === 'number'\n    ) {\n      const scaledWidth = size.width / zoom\n      const difference = scaledWidth - size.width\n      x = `${difference / 2}px`\n      margin = '0 auto'\n    }\n  }\n\n  return (\n    <div\n      style={{\n        height:\n          foundBreakpoint && foundBreakpoint?.name !== 'responsive'\n            ? `${size?.height / (typeof zoom === 'number' ? zoom : 1)}px`\n            : typeof zoom === 'number'\n              ? `${100 / zoom}%`\n              : '100%',\n        margin,\n        transform: `translate3d(${x}, 0, 0)`,\n        width:\n          foundBreakpoint && foundBreakpoint?.name !== 'responsive'\n            ? `${size?.width / (typeof zoom === 'number' ? zoom : 1)}px`\n            : typeof zoom === 'number'\n              ? `${100 / zoom}%`\n              : '100%',\n      }}\n    >\n      {children}\n    </div>\n  )\n}\n"],"names":["React","useLivePreviewContext","DeviceContainer","props","children","breakpoint","breakpoints","size","zoom","foundBreakpoint","find","bp","name","x","margin","width","height","scaledWidth","difference","div","style","transform"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,OAAOA,WAAW,QAAO;AAEzB,SAASC,qBAAqB,QAAQ,wBAAuB;AAE7D,OAAO,MAAMC,kBAER,CAACC;IACJ,MAAM,EAAEC,QAAQ,EAAE,GAAGD;IAErB,MAAM,EAAEE,UAAU,EAAEC,WAAW,EAAEC,IAAI,EAAEC,IAAI,EAAE,GAAGP;IAEhD,MAAMQ,kBAAkBJ,cAAcC,aAAaI,KAAK,CAACC,KAAOA,GAAGC,IAAI,KAAKP;IAE5E,IAAIQ,IAAI;IACR,IAAIC,SAAS;IAEb,IAAIL,mBAAmBJ,eAAe,cAAc;QAClDQ,IAAI;QAEJ,IACE,OAAOL,SAAS,YAChB,OAAOD,KAAKQ,KAAK,KAAK,YACtB,OAAOR,KAAKS,MAAM,KAAK,UACvB;YACA,MAAMC,cAAcV,KAAKQ,KAAK,GAAGP;YACjC,MAAMU,aAAaD,cAAcV,KAAKQ,KAAK;YAC3CF,IAAI,CAAC,EAAEK,aAAa,EAAE,EAAE,CAAC;YACzBJ,SAAS;QACX;IACF;IAEA,qBACE,oBAACK;QACCC,OAAO;YACLJ,QACEP,mBAAmBA,iBAAiBG,SAAS,eACzC,CAAC,EAAEL,MAAMS,SAAU,CAAA,OAAOR,SAAS,WAAWA,OAAO,CAAA,EAAG,EAAE,CAAC,GAC3D,OAAOA,SAAS,WACd,CAAC,EAAE,MAAMA,KAAK,CAAC,CAAC,GAChB;YACRM;YACAO,WAAW,CAAC,YAAY,EAAER,EAAE,OAAO,CAAC;YACpCE,OACEN,mBAAmBA,iBAAiBG,SAAS,eACzC,CAAC,EAAEL,MAAMQ,QAAS,CAAA,OAAOP,SAAS,WAAWA,OAAO,CAAA,EAAG,EAAE,CAAC,GAC1D,OAAOA,SAAS,WACd,CAAC,EAAE,MAAMA,KAAK,CAAC,CAAC,GAChB;QACV;OAECJ;AAGP,EAAC"}
+{"version":3,"file":"index.js","names":["c","_c","React","useLivePreviewContext","DeviceContainer","props","$","children","breakpoint","breakpoints","size","zoom","foundBreakpoint","find","bp","name","x","margin","width","height","scaledWidth","difference","t0","t1","t2","t3","_jsx","style","transform"],"sources":["../../../../src/views/LivePreview/DeviceContainer/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { useLivePreviewContext } from '../Context/context.js'\n\nexport const DeviceContainer: React.FC<{\n  children: React.ReactNode\n}> = (props) => {\n  const { children } = props\n\n  const { breakpoint, breakpoints, size, zoom } = useLivePreviewContext()\n\n  const foundBreakpoint = breakpoint && breakpoints?.find((bp) => bp.name === breakpoint)\n\n  let x = '0'\n  let margin = '0'\n\n  if (foundBreakpoint && breakpoint !== 'responsive') {\n    x = '-50%'\n\n    if (\n      typeof zoom === 'number' &&\n      typeof size.width === 'number' &&\n      typeof size.height === 'number'\n    ) {\n      const scaledWidth = size.width / zoom\n      const difference = scaledWidth - size.width\n      x = `${difference / 2}px`\n      margin = '0 auto'\n    }\n  }\n\n  return (\n    <div\n      style={{\n        height:\n          foundBreakpoint && foundBreakpoint?.name !== 'responsive'\n            ? `${size?.height / (typeof zoom === 'number' ? zoom : 1)}px`\n            : typeof zoom === 'number'\n              ? `${100 / zoom}%`\n              : '100%',\n        margin,\n        transform: `translate3d(${x}, 0, 0)`,\n        width:\n          foundBreakpoint && foundBreakpoint?.name !== 'responsive'\n            ? `${size?.width / (typeof zoom === 'number' ? zoom : 1)}px`\n            : typeof zoom === 'number'\n              ? `${100 / zoom}%`\n              : '100%',\n      }}\n    >\n      {children}\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,MAAW;AAElB,SAASC,qBAAqB,QAAQ;AAEtC,OAAO,MAAMC,eAAA,GAERC,KAAA;EAAA,MAAAC,CAAA,GAAAL,EAAA;EACH;IAAAM;EAAA,IAAqBF,KAAA;EAErB;IAAAG,UAAA;IAAAC,WAAA;IAAAC,IAAA;IAAAC;EAAA,IAAgDR,qBAAA;EAEhD,MAAAS,eAAA,GAAwBJ,UAAA,IAAcC,WAAA,EAAAI,IAAA,CAAAC,EAAA,IAA0BA,EAAA,CAAAC,IAAA,KAAYP,UAAA;EAE5E,IAAAQ,CAAA,GAAQ;EACR,IAAAC,MAAA,GAAa;EAAA,IAETL,eAAA,IAAmBJ,UAAA,KAAe;IACpCQ,CAAA,CAAAA,CAAA,CAAIA,MAAA;IAAJ,IAGE,OAAOL,IAAA,KAAS,YAChB,OAAOD,IAAA,CAAAQ,KAAA,KAAe,YACtB,OAAOR,IAAA,CAAAS,MAAA,KAAgB;MAEvB,MAAAC,WAAA,GAAoBV,IAAA,CAAAQ,KAAA,GAAaP,IAAA;MACjC,MAAAU,UAAA,GAAmBD,WAAA,GAAcV,IAAA,CAAAQ,KAAU;MAC3CF,CAAA,CAAAA,CAAA,CAAIA,GAAGK,UAAA,IAAa,IAAK;MACzBJ,MAAA,CAAAA,CAAA,CAASA,QAAA;IAAT;EAAA;EAQI,MAAAK,EAAA,GAAAV,eAAA,IAAmBA,eAAA,EAAAG,IAAA,KAA0B,eACzC,GAAGL,IAAA,EAAAS,MAAA,IAAgB,OAAOR,IAAA,KAAS,WAAWA,IAAA,IAAO,KAAM,GAC3D,OAAOA,IAAA,KAAS,WACd,GAAG,MAAMA,IAAA,GAAO,GAChB;EAEG,MAAAY,EAAA,kBAAeP,CAAA,SAAU;EAElC,MAAAQ,EAAA,GAAAZ,eAAA,IAAmBA,eAAA,EAAAG,IAAA,KAA0B,eACzC,GAAGL,IAAA,EAAAQ,KAAA,IAAe,OAAOP,IAAA,KAAS,WAAWA,IAAA,IAAO,KAAM,GAC1D,OAAOA,IAAA,KAAS,WACd,GAAG,MAAMA,IAAA,GAAO,GAChB;EAAA,IAAAc,EAAA;EAAA,IAAAnB,CAAA,QAAAgB,EAAA,IAAAhB,CAAA,QAAAW,MAAA,IAAAX,CAAA,QAAAiB,EAAA,IAAAjB,CAAA,QAAAkB,EAAA,IAAAlB,CAAA,QAAAC,QAAA;IAfZkB,EAAA,GAAAC,IAAA,CAAC;MAAAC,KAAA;QAAAR,MAAA,EAGKG,EAIM;QAAAL,MAAA;QAAAW,SAAA,EAEGL,EAAyB;QAAAL,KAAA,EAElCM;MAIM;MAAAjB;IAAA,C;;;;;;;;;;SAfZkB,E;CAqBJ","ignoreList":[]}

package/dist/views/LivePreview/IFrame/index.js

@@ -1,22 +1,28 @@
 'use client';
+
+import { jsx as _jsx } from "react/jsx-runtime";
 import React, { forwardRef } from 'react';
 import { useLivePreviewContext } from '../Context/context.js';
 const baseClass = 'live-preview-iframe';
-export const IFrame = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const { setIframeHasLoaded, url } = props;
-    const { zoom } = useLivePreviewContext();
-    return /*#__PURE__*/ React.createElement("iframe", {
-        className: baseClass,
-        onLoad: ()=>{
-            setIframeHasLoaded(true);
-        },
-        ref: ref,
-        src: url,
-        style: {
-            transform: typeof zoom === 'number' ? `scale(${zoom}) ` : undefined
-        },
-        title: url
-    });
+export const IFrame = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    setIframeHasLoaded,
+    url
+  } = props;
+  const {
+    zoom
+  } = useLivePreviewContext();
+  return /*#__PURE__*/_jsx("iframe", {
+    className: baseClass,
+    onLoad: () => {
+      setIframeHasLoaded(true);
+    },
+    ref: ref,
+    src: url,
+    style: {
+      transform: typeof zoom === 'number' ? `scale(${zoom}) ` : undefined
+    },
+    title: url
+  });
 });
-
 //# sourceMappingURL=index.js.map

package/dist/views/LivePreview/IFrame/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/views/LivePreview/IFrame/index.tsx"],"sourcesContent":["'use client'\nimport React, { forwardRef } from 'react'\n\nimport { useLivePreviewContext } from '../Context/context.js'\nimport './index.scss'\n\nconst baseClass = 'live-preview-iframe'\n\ntype Props = {\n  setIframeHasLoaded: (value: boolean) => void\n  url: string\n}\n\nexport const IFrame = forwardRef<HTMLIFrameElement, Props>((props, ref) => {\n  const { setIframeHasLoaded, url } = props\n\n  const { zoom } = useLivePreviewContext()\n\n  return (\n    <iframe\n      className={baseClass}\n      onLoad={() => {\n        setIframeHasLoaded(true)\n      }}\n      ref={ref}\n      src={url}\n      style={{\n        transform: typeof zoom === 'number' ? `scale(${zoom}) ` : undefined,\n      }}\n      title={url}\n    />\n  )\n})\n"],"names":["React","forwardRef","useLivePreviewContext","baseClass","IFrame","props","ref","setIframeHasLoaded","url","zoom","iframe","className","onLoad","src","style","transform","undefined","title"],"rangeMappings":";;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,OAAOA,SAASC,UAAU,QAAQ,QAAO;AAEzC,SAASC,qBAAqB,QAAQ,wBAAuB;AAG7D,MAAMC,YAAY;AAOlB,OAAO,MAAMC,uBAASH,WAAqC,CAACI,OAAOC;IACjE,MAAM,EAAEC,kBAAkB,EAAEC,GAAG,EAAE,GAAGH;IAEpC,MAAM,EAAEI,IAAI,EAAE,GAAGP;IAEjB,qBACE,oBAACQ;QACCC,WAAWR;QACXS,QAAQ;YACNL,mBAAmB;QACrB;QACAD,KAAKA;QACLO,KAAKL;QACLM,OAAO;YACLC,WAAW,OAAON,SAAS,WAAW,CAAC,MAAM,EAAEA,KAAK,EAAE,CAAC,GAAGO;QAC5D;QACAC,OAAOT;;AAGb,GAAE"}
+{"version":3,"file":"index.js","names":["React","forwardRef","useLivePreviewContext","baseClass","IFrame","props","ref","setIframeHasLoaded","url","zoom","_jsx","className","onLoad","src","style","transform","undefined","title"],"sources":["../../../../src/views/LivePreview/IFrame/index.tsx"],"sourcesContent":["'use client'\nimport React, { forwardRef } from 'react'\n\nimport { useLivePreviewContext } from '../Context/context.js'\nimport './index.scss'\n\nconst baseClass = 'live-preview-iframe'\n\ntype Props = {\n  setIframeHasLoaded: (value: boolean) => void\n  url: string\n}\n\nexport const IFrame = forwardRef<HTMLIFrameElement, Props>((props, ref) => {\n  const { setIframeHasLoaded, url } = props\n\n  const { zoom } = useLivePreviewContext()\n\n  return (\n    <iframe\n      className={baseClass}\n      onLoad={() => {\n        setIframeHasLoaded(true)\n      }}\n      ref={ref}\n      src={url}\n      style={{\n        transform: typeof zoom === 'number' ? `scale(${zoom}) ` : undefined,\n      }}\n      title={url}\n    />\n  )\n})\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,IAASC,UAAU,QAAQ;AAElC,SAASC,qBAAqB,QAAQ;AAGtC,MAAMC,SAAA,GAAY;AAOlB,OAAO,MAAMC,MAAA,gBAASH,UAAA,CAAqC,CAACI,KAAA,EAAOC,GAAA;EACjE,MAAM;IAAEC,kBAAkB;IAAEC;EAAG,CAAE,GAAGH,KAAA;EAEpC,MAAM;IAAEI;EAAI,CAAE,GAAGP,qBAAA;EAEjB,oBACEQ,IAAA,CAAC;IACCC,SAAA,EAAWR,SAAA;IACXS,MAAA,EAAQA,CAAA;MACNL,kBAAA,CAAmB;IACrB;IACAD,GAAA,EAAKA,GAAA;IACLO,GAAA,EAAKL,GAAA;IACLM,KAAA,EAAO;MACLC,SAAA,EAAW,OAAON,IAAA,KAAS,WAAW,SAASA,IAAA,IAAQ,GAAGO;IAC5D;IACAC,KAAA,EAAOT;;AAGb","ignoreList":[]}

package/dist/views/LivePreview/Preview/index.d.ts

@@ -1,4 +1,4 @@
-import type { EditViewProps } from 'payload/types';
+import type { EditViewProps } from 'payload';
 import React from 'react';
 import './index.scss';
 export declare const LivePreview: React.FC<EditViewProps>;

package/dist/views/LivePreview/Preview/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/LivePreview/Preview/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAMlD,OAAO,KAAoB,MAAM,OAAO,CAAA;AAMxC,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA4F/C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/LivePreview/Preview/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAI5C,OAAO,KAAoB,MAAM,OAAO,CAAA;AAMxC,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAgH/C,CAAA"}

package/dist/views/LivePreview/Preview/index.js

@@ -1,78 +1,163 @@
 'use client';
-import { ShimmerEffect } from '@payloadcms/ui/elements/ShimmerEffect';
-import { useAllFormFields } from '@payloadcms/ui/forms/Form';
-import { useDocumentEvents } from '@payloadcms/ui/providers/DocumentEvents';
-import { reduceFieldsToValues } from '@payloadcms/ui/utilities/reduceFieldsToValues';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ShimmerEffect, useAllFormFields, useDocumentEvents } from '@payloadcms/ui';
+import { reduceFieldsToValues } from 'payload/shared';
 import React, { useEffect } from 'react';
 import { useLivePreviewContext } from '../Context/context.js';
 import { DeviceContainer } from '../Device/index.js';
 import { IFrame } from '../IFrame/index.js';
 import { LivePreviewToolbar } from '../Toolbar/index.js';
 const baseClass = 'live-preview-window';
-export const LivePreview = (props)=>{
-    const { appIsReady, iframeHasLoaded, iframeRef, popupRef, previewWindowType, setIframeHasLoaded, url } = useLivePreviewContext();
-    const { mostRecentUpdate } = useDocumentEvents();
-    const { breakpoint, fieldSchemaJSON } = useLivePreviewContext();
-    const prevWindowType = React.useRef();
-    const [fields] = useAllFormFields();
-    // The preview could either be an iframe embedded on the page
-    // Or it could be a separate popup window
-    // We need to transmit data to both accordingly
-    useEffect(()=>{
-        // For performance, do no reduce fields to values until after the iframe or popup has loaded
-        if (fields && window && 'postMessage' in window && appIsReady) {
-            const values = reduceFieldsToValues(fields, true);
-            // To reduce on large `postMessage` payloads, only send `fieldSchemaToJSON` one time
-            // To do this, the underlying JS function maintains a cache of this value
-            // So we need to send it through each time the window type changes
-            // But only once per window type change, not on every render, because this is a potentially large obj
-            const shouldSendSchema = !prevWindowType.current || prevWindowType.current !== previewWindowType;
-            prevWindowType.current = previewWindowType;
-            const message = {
-                type: 'payload-live-preview',
-                data: values,
-                externallyUpdatedRelationship: mostRecentUpdate,
-                fieldSchemaJSON: shouldSendSchema ? fieldSchemaJSON : undefined
-            };
-            // Post message to external popup window
-            if (previewWindowType === 'popup' && popupRef.current) {
-                popupRef.current.postMessage(message, url);
-            }
-            // Post message to embedded iframe
-            if (previewWindowType === 'iframe' && iframeRef.current) {
-                iframeRef.current.contentWindow?.postMessage(message, url);
-            }
+export const LivePreview = props => {
+  const $ = _c(39);
+  const {
+    appIsReady,
+    iframeHasLoaded,
+    iframeRef,
+    popupRef,
+    previewWindowType,
+    setIframeHasLoaded,
+    url
+  } = useLivePreviewContext();
+  const {
+    mostRecentUpdate
+  } = useDocumentEvents();
+  const {
+    breakpoint,
+    fieldSchemaJSON
+  } = useLivePreviewContext();
+  const prevWindowType = React.useRef(undefined);
+  const [fields] = useAllFormFields();
+  let t0;
+  if ($[0] !== fields || $[1] !== appIsReady || $[2] !== previewWindowType || $[3] !== mostRecentUpdate || $[4] !== fieldSchemaJSON || $[5] !== popupRef.current || $[6] !== url || $[7] !== iframeRef.current) {
+    t0 = () => {
+      if (fields && window && "postMessage" in window && appIsReady) {
+        const values = reduceFieldsToValues(fields, true);
+        const shouldSendSchema = !prevWindowType.current || prevWindowType.current !== previewWindowType;
+        prevWindowType.current = previewWindowType;
+        const message = {
+          type: "payload-live-preview",
+          data: values,
+          externallyUpdatedRelationship: mostRecentUpdate,
+          fieldSchemaJSON: shouldSendSchema ? fieldSchemaJSON : undefined
+        };
+        if (previewWindowType === "popup" && popupRef.current) {
+          popupRef.current.postMessage(message, url);
+        }
+        if (previewWindowType === "iframe" && iframeRef.current) {
+          iframeRef.current.contentWindow?.postMessage(message, url);
         }
-    }, [
-        fields,
-        url,
-        iframeHasLoaded,
-        previewWindowType,
-        popupRef,
-        appIsReady,
-        iframeRef,
-        setIframeHasLoaded,
-        fieldSchemaJSON,
-        mostRecentUpdate
-    ]);
-    if (previewWindowType === 'iframe') {
-        return /*#__PURE__*/ React.createElement("div", {
-            className: [
-                baseClass,
-                breakpoint && breakpoint !== 'responsive' && `${baseClass}--has-breakpoint`
-            ].filter(Boolean).join(' ')
-        }, /*#__PURE__*/ React.createElement("div", {
-            className: `${baseClass}__wrapper`
-        }, /*#__PURE__*/ React.createElement(LivePreviewToolbar, props), /*#__PURE__*/ React.createElement("div", {
-            className: `${baseClass}__main`
-        }, /*#__PURE__*/ React.createElement(DeviceContainer, null, url ? /*#__PURE__*/ React.createElement(IFrame, {
-            ref: iframeRef,
-            setIframeHasLoaded: setIframeHasLoaded,
-            url: url
-        }) : /*#__PURE__*/ React.createElement(ShimmerEffect, {
-            height: "100%"
-        })))));
+      }
+    };
+    $[0] = fields;
+    $[1] = appIsReady;
+    $[2] = previewWindowType;
+    $[3] = mostRecentUpdate;
+    $[4] = fieldSchemaJSON;
+    $[5] = popupRef.current;
+    $[6] = url;
+    $[7] = iframeRef.current;
+    $[8] = t0;
+  } else {
+    t0 = $[8];
+  }
+  let t1;
+  if ($[9] !== fields || $[10] !== url || $[11] !== iframeHasLoaded || $[12] !== previewWindowType || $[13] !== popupRef || $[14] !== appIsReady || $[15] !== iframeRef || $[16] !== setIframeHasLoaded || $[17] !== fieldSchemaJSON || $[18] !== mostRecentUpdate) {
+    t1 = [fields, url, iframeHasLoaded, previewWindowType, popupRef, appIsReady, iframeRef, setIframeHasLoaded, fieldSchemaJSON, mostRecentUpdate];
+    $[9] = fields;
+    $[10] = url;
+    $[11] = iframeHasLoaded;
+    $[12] = previewWindowType;
+    $[13] = popupRef;
+    $[14] = appIsReady;
+    $[15] = iframeRef;
+    $[16] = setIframeHasLoaded;
+    $[17] = fieldSchemaJSON;
+    $[18] = mostRecentUpdate;
+    $[19] = t1;
+  } else {
+    t1 = $[19];
+  }
+  useEffect(t0, t1);
+  let t2;
+  if ($[20] !== previewWindowType || $[21] !== popupRef.current || $[22] !== url || $[23] !== iframeRef.current) {
+    t2 = () => {
+      const message_0 = {
+        type: "payload-document-event"
+      };
+      if (previewWindowType === "popup" && popupRef.current) {
+        popupRef.current.postMessage(message_0, url);
+      }
+      if (previewWindowType === "iframe" && iframeRef.current) {
+        iframeRef.current.contentWindow?.postMessage(message_0, url);
+      }
+    };
+    $[20] = previewWindowType;
+    $[21] = popupRef.current;
+    $[22] = url;
+    $[23] = iframeRef.current;
+    $[24] = t2;
+  } else {
+    t2 = $[24];
+  }
+  let t3;
+  if ($[25] !== mostRecentUpdate || $[26] !== iframeRef || $[27] !== popupRef || $[28] !== previewWindowType || $[29] !== url) {
+    t3 = [mostRecentUpdate, iframeRef, popupRef, previewWindowType, url];
+    $[25] = mostRecentUpdate;
+    $[26] = iframeRef;
+    $[27] = popupRef;
+    $[28] = previewWindowType;
+    $[29] = url;
+    $[30] = t3;
+  } else {
+    t3 = $[30];
+  }
+  useEffect(t2, t3);
+  if (previewWindowType === "iframe") {
+    const t4 = breakpoint && breakpoint !== "responsive" && `${baseClass}--has-breakpoint`;
+    let t5;
+    if ($[31] !== t4) {
+      t5 = [baseClass, t4].filter(Boolean);
+      $[31] = t4;
+      $[32] = t5;
+    } else {
+      t5 = $[32];
     }
+    const t6 = t5.join(" ");
+    let t7;
+    if ($[33] !== props || $[34] !== url || $[35] !== iframeRef || $[36] !== setIframeHasLoaded || $[37] !== t6) {
+      t7 = _jsx("div", {
+        className: t6,
+        children: _jsxs("div", {
+          className: `${baseClass}__wrapper`,
+          children: [_jsx(LivePreviewToolbar, {
+            ...props
+          }), _jsx("div", {
+            className: `${baseClass}__main`,
+            children: _jsx(DeviceContainer, {
+              children: url ? _jsx(IFrame, {
+                ref: iframeRef,
+                setIframeHasLoaded,
+                url
+              }) : _jsx(ShimmerEffect, {
+                height: "100%"
+              })
+            })
+          })]
+        })
+      });
+      $[33] = props;
+      $[34] = url;
+      $[35] = iframeRef;
+      $[36] = setIframeHasLoaded;
+      $[37] = t6;
+      $[38] = t7;
+    } else {
+      t7 = $[38];
+    }
+    return t7;
+  }
 };
-
 //# sourceMappingURL=index.js.map