@payloadcms/next 3.0.0-beta.7 → 3.0.0-beta.71

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

@@ -1,17 +1,21 @@
 '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();
+    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);
+    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
+    // its size is freshly populated again upon re-mounting, i.e. going from iframe->popup->iframe
     useEffect(()=>{
         if (measuredDeviceSize) {
             setMeasuredDeviceSize(measuredDeviceSize);
@@ -24,28 +28,54 @@ export const DeviceContainer = (props)=>{
     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`;
+        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';
+                }
+            } else {
+                if (zoom >= 1) {
+                    x = `${scaledDeviceDifferencePixels / 2}px`;
+                } else {
+                    const differenceFromDeviceToFrame = outerFrameSize.width - scaledDeviceWidth;
+                    x = `${differenceFromDeviceToFrame / 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`;
+        width = `${desiredSize?.width / (typeof zoom === 'number' ? zoom : 1)}px`;
+        height = `${desiredSize?.height / (typeof zoom === 'number' ? zoom : 1)}px`;
     }
-    return /*#__PURE__*/ React.createElement("div", {
-        ref: deviceFrameRef,
+    return /*#__PURE__*/ _jsx("div", {
+        ref: outerFrameRef,
         style: {
-            height,
-            margin,
-            transform: `translate3d(${x}, 0, 0)`,
-            width
-        }
-    }, children);
+            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,"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"],"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","div","ref","style","transform"],"mappings":"AAAA;;AACA,SAASA,SAAS,QAAQ,iBAAgB;AAC1C,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;IACpD,MAAMC,gBAAgBR,MAAMO,MAAM,CAAiB;IAEnD,MAAM,EAAEE,UAAU,EAAEC,qBAAqB,EAAEC,MAAMC,WAAW,EAAEC,IAAI,EAAE,GAAGX;IAEvE,iFAAiF;IACjF,2EAA2E;IAC3E,MAAM,EAAES,MAAMG,kBAAkB,EAAE,GAAGf,UAAUO,eAAeS,OAAO;IACrE,MAAM,EAAEJ,MAAMK,cAAc,EAAE,GAAGjB,UAAUS,cAAcO,OAAO;IAEhE,IAAIE,0BAAmC;IAEvC,qFAAqF;IACrF,iFAAiF;IACjF,8FAA8F;IAC9FhB,UAAU;QACR,IAAIa,oBAAoB;YACtBJ,sBAAsBI;QACxB;IACF,GAAG;QAACA;QAAoBJ;KAAsB;IAE9C,IAAIQ,IAAI;IACR,IAAIC,SAAS;IAEb,IAAIV,cAAcA,eAAe,cAAc;QAC7CS,IAAI;QAEJ,IACE,OAAOL,SAAS,YAChB,OAAOD,YAAYQ,KAAK,KAAK,YAC7B,OAAOR,YAAYS,MAAM,KAAK,YAC9B,OAAOP,mBAAmBM,KAAK,KAAK,YACpC,OAAON,mBAAmBO,MAAM,KAAK,UACrC;YACAF,SAAS;YACT,MAAMG,qBAAqBV,YAAYQ,KAAK,GAAGP;YAC/C,MAAMU,oBAAoBT,mBAAmBM,KAAK,GAAGP;YACrD,MAAMW,+BAA+BF,qBAAqBV,YAAYQ,KAAK;YAC3EH,0BAA0BM,oBAAoBP,eAAeI,KAAK;YAElE,IAAIH,yBAAyB;gBAC3B,IAAIJ,OAAO,GAAG;oBACZ,MAAMY,8BAA8BX,mBAAmBM,KAAK,GAAGJ,eAAeI,KAAK;oBACnF,IAAIK,8BAA8B,GAAGP,IAAI,CAAC,EAAEO,8BAA8B,EAAE,EAAE,CAAC;yBAC1EP,IAAI;gBACX,OAAO;oBACLA,IAAI;gBACN;YACF,OAAO;gBACL,IAAIL,QAAQ,GAAG;oBACbK,IAAI,CAAC,EAAEM,+BAA+B,EAAE,EAAE,CAAC;gBAC7C,OAAO;oBACL,MAAMC,8BAA8BT,eAAeI,KAAK,GAAGG;oBAC3DL,IAAI,CAAC,EAAEO,8BAA8B,EAAE,EAAE,CAAC;oBAC1CN,SAAS;gBACX;YACF;QACF;IACF;IAEA,IAAIC,QAAQP,OAAO,CAAC,EAAE,MAAMA,KAAK,CAAC,CAAC,GAAG;IACtC,IAAIQ,SAASR,OAAO,CAAC,EAAE,MAAMA,KAAK,CAAC,CAAC,GAAG;IAEvC,IAAIJ,eAAe,cAAc;QAC/BW,QAAQ,CAAC,EAAER,aAAaQ,QAAS,CAAA,OAAOP,SAAS,WAAWA,OAAO,CAAA,EAAG,EAAE,CAAC;QACzEQ,SAAS,CAAC,EAAET,aAAaS,SAAU,CAAA,OAAOR,SAAS,WAAWA,OAAO,CAAA,EAAG,EAAE,CAAC;IAC7E;IAEA,qBACE,KAACa;QACCC,KAAKnB;QACLoB,OAAO;YACLP,QAAQ;YACRD,OAAO;QACT;kBAEA,cAAA,KAACM;YACCC,KAAKrB;YACLsB,OAAO;gBACLP;gBACAF;gBACAU,WAAW,CAAC,YAAY,EAAEX,EAAE,OAAO,CAAC;gBACpCE;YACF;sBAECf;;;AAIT,EAAC"}

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

@@ -1,4 +1,5 @@
 'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { useLivePreviewContext } from '../Context/context.js';
 export const DeviceContainer = (props)=>{
@@ -16,14 +17,15 @@ export const DeviceContainer = (props)=>{
             margin = '0 auto';
         }
     }
-    return /*#__PURE__*/ React.createElement("div", {
+    return /*#__PURE__*/ _jsx("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);
+        },
+        children: children
+    });
 };
 
 //# 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,"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"],"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,KAACK;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;kBAECJ;;AAGP,EAAC"}

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

@@ -1,11 +1,12 @@
 '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", {
+    return /*#__PURE__*/ _jsx("iframe", {
         className: baseClass,
         onLoad: ()=>{
             setIframeHasLoaded(true);

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,"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"],"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,KAACQ;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"}

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,8 +1,7 @@
 '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 { 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';
@@ -13,8 +12,9 @@ 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 prevWindowType = React.useRef(undefined);
     const [fields] = useAllFormFields();
+    // For client-side apps, send data through `window.postMessage`
     // 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
@@ -55,23 +55,55 @@ export const LivePreview = (props)=>{
         fieldSchemaJSON,
         mostRecentUpdate
     ]);
+    // To support SSR, we transmit a `window.postMessage` event without a payload
+    // This is because the event will ultimately trigger a server-side roundtrip
+    // i.e., save, save draft, autosave, etc. will fire `router.refresh()`
+    useEffect(()=>{
+        const message = {
+            type: 'payload-document-event'
+        };
+        // 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);
+        }
+    }, [
+        mostRecentUpdate,
+        iframeRef,
+        popupRef,
+        previewWindowType,
+        url
+    ]);
     if (previewWindowType === 'iframe') {
-        return /*#__PURE__*/ React.createElement("div", {
+        return /*#__PURE__*/ _jsx("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%"
-        })))));
+            ].filter(Boolean).join(' '),
+            children: /*#__PURE__*/ _jsxs("div", {
+                className: `${baseClass}__wrapper`,
+                children: [
+                    /*#__PURE__*/ _jsx(LivePreviewToolbar, {
+                        ...props
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: `${baseClass}__main`,
+                        children: /*#__PURE__*/ _jsx(DeviceContainer, {
+                            children: url ? /*#__PURE__*/ _jsx(IFrame, {
+                                ref: iframeRef,
+                                setIframeHasLoaded: setIframeHasLoaded,
+                                url: url
+                            }) : /*#__PURE__*/ _jsx(ShimmerEffect, {
+                                height: "100%"
+                            })
+                        })
+                    })
+                ]
+            })
+        });
     }
 };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/views/LivePreview/Preview/index.tsx"],"sourcesContent":["'use client'\n\nimport type { EditViewProps } from 'payload/types'\n\nimport { ShimmerEffect } from '@payloadcms/ui/elements/ShimmerEffect'\nimport { useAllFormFields } from '@payloadcms/ui/forms/Form'\nimport { useDocumentEvents } from '@payloadcms/ui/providers/DocumentEvents'\nimport { reduceFieldsToValues } from '@payloadcms/ui/utilities/reduceFieldsToValues'\nimport React, { useEffect } from 'react'\n\nimport { useLivePreviewContext } from '../Context/context.js'\nimport { DeviceContainer } from '../Device/index.js'\nimport { IFrame } from '../IFrame/index.js'\nimport { LivePreviewToolbar } from '../Toolbar/index.js'\nimport './index.scss'\n\nconst baseClass = 'live-preview-window'\n\nexport const LivePreview: React.FC<EditViewProps> = (props) => {\n  const {\n    appIsReady,\n    iframeHasLoaded,\n    iframeRef,\n    popupRef,\n    previewWindowType,\n    setIframeHasLoaded,\n    url,\n  } = useLivePreviewContext()\n\n  const { mostRecentUpdate } = useDocumentEvents()\n\n  const { breakpoint, fieldSchemaJSON } = useLivePreviewContext()\n\n  const prevWindowType =\n    React.useRef<ReturnType<typeof useLivePreviewContext>['previewWindowType']>()\n\n  const [fields] = useAllFormFields()\n\n  // The preview could either be an iframe embedded on the page\n  // Or it could be a separate popup window\n  // We need to transmit data to both accordingly\n  useEffect(() => {\n    // For performance, do no reduce fields to values until after the iframe or popup has loaded\n    if (fields && window && 'postMessage' in window && appIsReady) {\n      const values = reduceFieldsToValues(fields, true)\n\n      // To reduce on large `postMessage` payloads, only send `fieldSchemaToJSON` one time\n      // To do this, the underlying JS function maintains a cache of this value\n      // So we need to send it through each time the window type changes\n      // But only once per window type change, not on every render, because this is a potentially large obj\n      const shouldSendSchema =\n        !prevWindowType.current || prevWindowType.current !== previewWindowType\n\n      prevWindowType.current = previewWindowType\n\n      const message = {\n        type: 'payload-live-preview',\n        data: values,\n        externallyUpdatedRelationship: mostRecentUpdate,\n        fieldSchemaJSON: shouldSendSchema ? fieldSchemaJSON : undefined,\n      }\n\n      // Post message to external popup window\n      if (previewWindowType === 'popup' && popupRef.current) {\n        popupRef.current.postMessage(message, url)\n      }\n\n      // Post message to embedded iframe\n      if (previewWindowType === 'iframe' && iframeRef.current) {\n        iframeRef.current.contentWindow?.postMessage(message, url)\n      }\n    }\n  }, [\n    fields,\n    url,\n    iframeHasLoaded,\n    previewWindowType,\n    popupRef,\n    appIsReady,\n    iframeRef,\n    setIframeHasLoaded,\n    fieldSchemaJSON,\n    mostRecentUpdate,\n  ])\n\n  if (previewWindowType === 'iframe') {\n    return (\n      <div\n        className={[\n          baseClass,\n          breakpoint && breakpoint !== 'responsive' && `${baseClass}--has-breakpoint`,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n      >\n        <div className={`${baseClass}__wrapper`}>\n          <LivePreviewToolbar {...props} />\n          <div className={`${baseClass}__main`}>\n            <DeviceContainer>\n              {url ? (\n                <IFrame ref={iframeRef} setIframeHasLoaded={setIframeHasLoaded} url={url} />\n              ) : (\n                <ShimmerEffect height=\"100%\" />\n              )}\n            </DeviceContainer>\n          </div>\n        </div>\n      </div>\n    )\n  }\n}\n"],"names":["ShimmerEffect","useAllFormFields","useDocumentEvents","reduceFieldsToValues","React","useEffect","useLivePreviewContext","DeviceContainer","IFrame","LivePreviewToolbar","baseClass","LivePreview","props","appIsReady","iframeHasLoaded","iframeRef","popupRef","previewWindowType","setIframeHasLoaded","url","mostRecentUpdate","breakpoint","fieldSchemaJSON","prevWindowType","useRef","fields","window","values","shouldSendSchema","current","message","type","data","externallyUpdatedRelationship","undefined","postMessage","contentWindow","div","className","filter","Boolean","join","ref","height"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AAIA,SAASA,aAAa,QAAQ,wCAAuC;AACrE,SAASC,gBAAgB,QAAQ,4BAA2B;AAC5D,SAASC,iBAAiB,QAAQ,0CAAyC;AAC3E,SAASC,oBAAoB,QAAQ,gDAA+C;AACpF,OAAOC,SAASC,SAAS,QAAQ,QAAO;AAExC,SAASC,qBAAqB,QAAQ,wBAAuB;AAC7D,SAASC,eAAe,QAAQ,qBAAoB;AACpD,SAASC,MAAM,QAAQ,qBAAoB;AAC3C,SAASC,kBAAkB,QAAQ,sBAAqB;AAGxD,MAAMC,YAAY;AAElB,OAAO,MAAMC,cAAuC,CAACC;IACnD,MAAM,EACJC,UAAU,EACVC,eAAe,EACfC,SAAS,EACTC,QAAQ,EACRC,iBAAiB,EACjBC,kBAAkB,EAClBC,GAAG,EACJ,GAAGb;IAEJ,MAAM,EAAEc,gBAAgB,EAAE,GAAGlB;IAE7B,MAAM,EAAEmB,UAAU,EAAEC,eAAe,EAAE,GAAGhB;IAExC,MAAMiB,iBACJnB,MAAMoB,MAAM;IAEd,MAAM,CAACC,OAAO,GAAGxB;IAEjB,6DAA6D;IAC7D,yCAAyC;IACzC,+CAA+C;IAC/CI,UAAU;QACR,4FAA4F;QAC5F,IAAIoB,UAAUC,UAAU,iBAAiBA,UAAUb,YAAY;YAC7D,MAAMc,SAASxB,qBAAqBsB,QAAQ;YAE5C,oFAAoF;YACpF,yEAAyE;YACzE,kEAAkE;YAClE,qGAAqG;YACrG,MAAMG,mBACJ,CAACL,eAAeM,OAAO,IAAIN,eAAeM,OAAO,KAAKZ;YAExDM,eAAeM,OAAO,GAAGZ;YAEzB,MAAMa,UAAU;gBACdC,MAAM;gBACNC,MAAML;gBACNM,+BAA+Bb;gBAC/BE,iBAAiBM,mBAAmBN,kBAAkBY;YACxD;YAEA,wCAAwC;YACxC,IAAIjB,sBAAsB,WAAWD,SAASa,OAAO,EAAE;gBACrDb,SAASa,OAAO,CAACM,WAAW,CAACL,SAASX;YACxC;YAEA,kCAAkC;YAClC,IAAIF,sBAAsB,YAAYF,UAAUc,OAAO,EAAE;gBACvDd,UAAUc,OAAO,CAACO,aAAa,EAAED,YAAYL,SAASX;YACxD;QACF;IACF,GAAG;QACDM;QACAN;QACAL;QACAG;QACAD;QACAH;QACAE;QACAG;QACAI;QACAF;KACD;IAED,IAAIH,sBAAsB,UAAU;QAClC,qBACE,oBAACoB;YACCC,WAAW;gBACT5B;gBACAW,cAAcA,eAAe,gBAAgB,CAAC,EAAEX,UAAU,gBAAgB,CAAC;aAC5E,CACE6B,MAAM,CAACC,SACPC,IAAI,CAAC;yBAER,oBAACJ;YAAIC,WAAW,CAAC,EAAE5B,UAAU,SAAS,CAAC;yBACrC,oBAACD,oBAAuBG,sBACxB,oBAACyB;YAAIC,WAAW,CAAC,EAAE5B,UAAU,MAAM,CAAC;yBAClC,oBAACH,uBACEY,oBACC,oBAACX;YAAOkC,KAAK3B;YAAWG,oBAAoBA;YAAoBC,KAAKA;2BAErE,oBAACnB;YAAc2C,QAAO;;IAOpC;AACF,EAAC"}
+{"version":3,"sources":["../../../../src/views/LivePreview/Preview/index.tsx"],"sourcesContent":["'use client'\n\nimport type { EditViewProps } from 'payload'\n\nimport { ShimmerEffect, useAllFormFields, useDocumentEvents } from '@payloadcms/ui'\nimport { reduceFieldsToValues } from 'payload/shared'\nimport React, { useEffect } from 'react'\n\nimport { useLivePreviewContext } from '../Context/context.js'\nimport { DeviceContainer } from '../Device/index.js'\nimport { IFrame } from '../IFrame/index.js'\nimport { LivePreviewToolbar } from '../Toolbar/index.js'\nimport './index.scss'\n\nconst baseClass = 'live-preview-window'\n\nexport const LivePreview: React.FC<EditViewProps> = (props) => {\n  const {\n    appIsReady,\n    iframeHasLoaded,\n    iframeRef,\n    popupRef,\n    previewWindowType,\n    setIframeHasLoaded,\n    url,\n  } = useLivePreviewContext()\n\n  const { mostRecentUpdate } = useDocumentEvents()\n\n  const { breakpoint, fieldSchemaJSON } = useLivePreviewContext()\n\n  const prevWindowType =\n    React.useRef<ReturnType<typeof useLivePreviewContext>['previewWindowType']>(undefined)\n\n  const [fields] = useAllFormFields()\n\n  // For client-side apps, send data through `window.postMessage`\n  // The preview could either be an iframe embedded on the page\n  // Or it could be a separate popup window\n  // We need to transmit data to both accordingly\n  useEffect(() => {\n    // For performance, do no reduce fields to values until after the iframe or popup has loaded\n    if (fields && window && 'postMessage' in window && appIsReady) {\n      const values = reduceFieldsToValues(fields, true)\n\n      // To reduce on large `postMessage` payloads, only send `fieldSchemaToJSON` one time\n      // To do this, the underlying JS function maintains a cache of this value\n      // So we need to send it through each time the window type changes\n      // But only once per window type change, not on every render, because this is a potentially large obj\n      const shouldSendSchema =\n        !prevWindowType.current || prevWindowType.current !== previewWindowType\n\n      prevWindowType.current = previewWindowType\n\n      const message = {\n        type: 'payload-live-preview',\n        data: values,\n        externallyUpdatedRelationship: mostRecentUpdate,\n        fieldSchemaJSON: shouldSendSchema ? fieldSchemaJSON : undefined,\n      }\n\n      // Post message to external popup window\n      if (previewWindowType === 'popup' && popupRef.current) {\n        popupRef.current.postMessage(message, url)\n      }\n\n      // Post message to embedded iframe\n      if (previewWindowType === 'iframe' && iframeRef.current) {\n        iframeRef.current.contentWindow?.postMessage(message, url)\n      }\n    }\n  }, [\n    fields,\n    url,\n    iframeHasLoaded,\n    previewWindowType,\n    popupRef,\n    appIsReady,\n    iframeRef,\n    setIframeHasLoaded,\n    fieldSchemaJSON,\n    mostRecentUpdate,\n  ])\n\n  // To support SSR, we transmit a `window.postMessage` event without a payload\n  // This is because the event will ultimately trigger a server-side roundtrip\n  // i.e., save, save draft, autosave, etc. will fire `router.refresh()`\n  useEffect(() => {\n    const message = {\n      type: 'payload-document-event',\n    }\n\n    // Post message to external popup window\n    if (previewWindowType === 'popup' && popupRef.current) {\n      popupRef.current.postMessage(message, url)\n    }\n\n    // Post message to embedded iframe\n    if (previewWindowType === 'iframe' && iframeRef.current) {\n      iframeRef.current.contentWindow?.postMessage(message, url)\n    }\n  }, [mostRecentUpdate, iframeRef, popupRef, previewWindowType, url])\n\n  if (previewWindowType === 'iframe') {\n    return (\n      <div\n        className={[\n          baseClass,\n          breakpoint && breakpoint !== 'responsive' && `${baseClass}--has-breakpoint`,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n      >\n        <div className={`${baseClass}__wrapper`}>\n          <LivePreviewToolbar {...props} />\n          <div className={`${baseClass}__main`}>\n            <DeviceContainer>\n              {url ? (\n                <IFrame ref={iframeRef} setIframeHasLoaded={setIframeHasLoaded} url={url} />\n              ) : (\n                <ShimmerEffect height=\"100%\" />\n              )}\n            </DeviceContainer>\n          </div>\n        </div>\n      </div>\n    )\n  }\n}\n"],"names":["ShimmerEffect","useAllFormFields","useDocumentEvents","reduceFieldsToValues","React","useEffect","useLivePreviewContext","DeviceContainer","IFrame","LivePreviewToolbar","baseClass","LivePreview","props","appIsReady","iframeHasLoaded","iframeRef","popupRef","previewWindowType","setIframeHasLoaded","url","mostRecentUpdate","breakpoint","fieldSchemaJSON","prevWindowType","useRef","undefined","fields","window","values","shouldSendSchema","current","message","type","data","externallyUpdatedRelationship","postMessage","contentWindow","div","className","filter","Boolean","join","ref","height"],"mappings":"AAAA;;AAIA,SAASA,aAAa,EAAEC,gBAAgB,EAAEC,iBAAiB,QAAQ,iBAAgB;AACnF,SAASC,oBAAoB,QAAQ,iBAAgB;AACrD,OAAOC,SAASC,SAAS,QAAQ,QAAO;AAExC,SAASC,qBAAqB,QAAQ,wBAAuB;AAC7D,SAASC,eAAe,QAAQ,qBAAoB;AACpD,SAASC,MAAM,QAAQ,qBAAoB;AAC3C,SAASC,kBAAkB,QAAQ,sBAAqB;AAGxD,MAAMC,YAAY;AAElB,OAAO,MAAMC,cAAuC,CAACC;IACnD,MAAM,EACJC,UAAU,EACVC,eAAe,EACfC,SAAS,EACTC,QAAQ,EACRC,iBAAiB,EACjBC,kBAAkB,EAClBC,GAAG,EACJ,GAAGb;IAEJ,MAAM,EAAEc,gBAAgB,EAAE,GAAGlB;IAE7B,MAAM,EAAEmB,UAAU,EAAEC,eAAe,EAAE,GAAGhB;IAExC,MAAMiB,iBACJnB,MAAMoB,MAAM,CAAgEC;IAE9E,MAAM,CAACC,OAAO,GAAGzB;IAEjB,+DAA+D;IAC/D,6DAA6D;IAC7D,yCAAyC;IACzC,+CAA+C;IAC/CI,UAAU;QACR,4FAA4F;QAC5F,IAAIqB,UAAUC,UAAU,iBAAiBA,UAAUd,YAAY;YAC7D,MAAMe,SAASzB,qBAAqBuB,QAAQ;YAE5C,oFAAoF;YACpF,yEAAyE;YACzE,kEAAkE;YAClE,qGAAqG;YACrG,MAAMG,mBACJ,CAACN,eAAeO,OAAO,IAAIP,eAAeO,OAAO,KAAKb;YAExDM,eAAeO,OAAO,GAAGb;YAEzB,MAAMc,UAAU;gBACdC,MAAM;gBACNC,MAAML;gBACNM,+BAA+Bd;gBAC/BE,iBAAiBO,mBAAmBP,kBAAkBG;YACxD;YAEA,wCAAwC;YACxC,IAAIR,sBAAsB,WAAWD,SAASc,OAAO,EAAE;gBACrDd,SAASc,OAAO,CAACK,WAAW,CAACJ,SAASZ;YACxC;YAEA,kCAAkC;YAClC,IAAIF,sBAAsB,YAAYF,UAAUe,OAAO,EAAE;gBACvDf,UAAUe,OAAO,CAACM,aAAa,EAAED,YAAYJ,SAASZ;YACxD;QACF;IACF,GAAG;QACDO;QACAP;QACAL;QACAG;QACAD;QACAH;QACAE;QACAG;QACAI;QACAF;KACD;IAED,6EAA6E;IAC7E,4EAA4E;IAC5E,sEAAsE;IACtEf,UAAU;QACR,MAAM0B,UAAU;YACdC,MAAM;QACR;QAEA,wCAAwC;QACxC,IAAIf,sBAAsB,WAAWD,SAASc,OAAO,EAAE;YACrDd,SAASc,OAAO,CAACK,WAAW,CAACJ,SAASZ;QACxC;QAEA,kCAAkC;QAClC,IAAIF,sBAAsB,YAAYF,UAAUe,OAAO,EAAE;YACvDf,UAAUe,OAAO,CAACM,aAAa,EAAED,YAAYJ,SAASZ;QACxD;IACF,GAAG;QAACC;QAAkBL;QAAWC;QAAUC;QAAmBE;KAAI;IAElE,IAAIF,sBAAsB,UAAU;QAClC,qBACE,KAACoB;YACCC,WAAW;gBACT5B;gBACAW,cAAcA,eAAe,gBAAgB,CAAC,EAAEX,UAAU,gBAAgB,CAAC;aAC5E,CACE6B,MAAM,CAACC,SACPC,IAAI,CAAC;sBAER,cAAA,MAACJ;gBAAIC,WAAW,CAAC,EAAE5B,UAAU,SAAS,CAAC;;kCACrC,KAACD;wBAAoB,GAAGG,KAAK;;kCAC7B,KAACyB;wBAAIC,WAAW,CAAC,EAAE5B,UAAU,MAAM,CAAC;kCAClC,cAAA,KAACH;sCACEY,oBACC,KAACX;gCAAOkC,KAAK3B;gCAAWG,oBAAoBA;gCAAoBC,KAAKA;+CAErE,KAACnB;gCAAc2C,QAAO;;;;;;;IAOpC;AACF,EAAC"}

package/dist/views/LivePreview/Toolbar/Controls/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 ToolbarControls: React.FC<EditViewProps>;

package/dist/views/LivePreview/Toolbar/Controls/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/views/LivePreview/Toolbar/Controls/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAMlD,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,cAAc,CAAA;AASrB,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAwGnD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/views/LivePreview/Toolbar/Controls/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAG5C,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,cAAc,CAAA;AAKrB,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA8GnD,CAAA"}

package/dist/views/LivePreview/Toolbar/Controls/index.js

@@ -1,8 +1,6 @@
 'use client';
-import { Popup, PopupList } from '@payloadcms/ui/elements/Popup';
-import { Chevron } from '@payloadcms/ui/icons/Chevron';
-import { LinkIcon } from '@payloadcms/ui/icons/Link';
-import { X } from '@payloadcms/ui/icons/X';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronIcon, LinkIcon, Popup, PopupList, XIcon, useTranslation } from '@payloadcms/ui';
 import React from 'react';
 import { useLivePreviewContext } from '../../Context/context.js';
 import { PreviewFrameSizeInput } from '../SizeInput/index.js';
@@ -15,69 +13,117 @@ const zoomOptions = [
     150,
     200
 ];
-const customOption = {
-    label: 'Custom',
-    value: 'custom'
-};
 export const ToolbarControls = ()=>{
     const { breakpoint, breakpoints, setBreakpoint, setPreviewWindowType, setZoom, url, zoom } = useLivePreviewContext();
-    return /*#__PURE__*/ React.createElement("div", {
-        className: baseClass
-    }, breakpoints?.length > 0 && /*#__PURE__*/ React.createElement(Popup, {
-        button: /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("span", null, breakpoints.find((bp)=>bp.name == breakpoint)?.label ?? customOption.label), " ", /*#__PURE__*/ React.createElement(Chevron, {
-            className: `${baseClass}__chevron`
-        })),
-        className: `${baseClass}__breakpoint`,
-        horizontalAlign: "right",
-        render: ({ close })=>/*#__PURE__*/ React.createElement(PopupList.ButtonGroup, null, /*#__PURE__*/ React.createElement(React.Fragment, null, breakpoints.map((bp)=>/*#__PURE__*/ React.createElement(PopupList.Button, {
-                    active: bp.name == breakpoint,
-                    key: bp.name,
-                    onClick: ()=>{
-                        setBreakpoint(bp.name);
-                        close();
-                    }
-                }, bp.label)), breakpoint === 'custom' && /*#__PURE__*/ React.createElement(PopupList.Button, {
-                active: breakpoint == customOption.value,
-                onClick: ()=>{
-                    setBreakpoint(customOption.value);
-                    close();
-                }
-            }, customOption.label))),
-        showScrollbar: true,
-        verticalAlign: "bottom"
-    }), /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__device-size`
-    }, /*#__PURE__*/ React.createElement(PreviewFrameSizeInput, {
-        axis: "x"
-    }), /*#__PURE__*/ React.createElement("span", {
-        className: `${baseClass}__size-divider`
-    }, /*#__PURE__*/ React.createElement(X, null)), /*#__PURE__*/ React.createElement(PreviewFrameSizeInput, {
-        axis: "y"
-    })), /*#__PURE__*/ React.createElement(Popup, {
-        button: /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("span", null, zoom * 100, "%"), " ", /*#__PURE__*/ React.createElement(Chevron, {
-            className: `${baseClass}__chevron`
-        })),
-        className: `${baseClass}__zoom`,
-        horizontalAlign: "right",
-        render: ({ close })=>/*#__PURE__*/ React.createElement(PopupList.ButtonGroup, null, /*#__PURE__*/ React.createElement(React.Fragment, null, zoomOptions.map((zoomValue)=>/*#__PURE__*/ React.createElement(PopupList.Button, {
-                    active: zoom * 100 == zoomValue,
-                    key: zoomValue,
-                    onClick: ()=>{
-                        setZoom(zoomValue / 100);
-                        close();
-                    }
-                }, zoomValue, "%")))),
-        showScrollbar: true,
-        verticalAlign: "bottom"
-    }), /*#__PURE__*/ React.createElement("a", {
-        className: `${baseClass}__external`,
-        href: url,
-        onClick: (e)=>{
-            e.preventDefault();
-            setPreviewWindowType('popup');
-        },
-        type: "button"
-    }, /*#__PURE__*/ React.createElement(LinkIcon, null)));
+    const { t } = useTranslation();
+    const customOption = {
+        label: t('general:custom'),
+        value: 'custom'
+    };
+    return /*#__PURE__*/ _jsxs("div", {
+        className: baseClass,
+        children: [
+            breakpoints?.length > 0 && /*#__PURE__*/ _jsx(Popup, {
+                button: /*#__PURE__*/ _jsxs(React.Fragment, {
+                    children: [
+                        /*#__PURE__*/ _jsx("span", {
+                            children: breakpoints.find((bp)=>bp.name == breakpoint)?.label ?? customOption.label
+                        }),
+                        " ",
+                        /*#__PURE__*/ _jsx(ChevronIcon, {
+                            className: `${baseClass}__chevron`
+                        })
+                    ]
+                }),
+                className: `${baseClass}__breakpoint`,
+                horizontalAlign: "right",
+                render: ({ close })=>/*#__PURE__*/ _jsx(PopupList.ButtonGroup, {
+                        children: /*#__PURE__*/ _jsxs(React.Fragment, {
+                            children: [
+                                breakpoints.map((bp)=>/*#__PURE__*/ _jsx(PopupList.Button, {
+                                        active: bp.name == breakpoint,
+                                        onClick: ()=>{
+                                            setBreakpoint(bp.name);
+                                            close();
+                                        },
+                                        children: bp.label
+                                    }, bp.name)),
+                                breakpoint === 'custom' && /*#__PURE__*/ _jsx(PopupList.Button, {
+                                    active: breakpoint == customOption.value,
+                                    onClick: ()=>{
+                                        setBreakpoint(customOption.value);
+                                        close();
+                                    },
+                                    children: customOption.label
+                                })
+                            ]
+                        })
+                    }),
+                showScrollbar: true,
+                verticalAlign: "bottom"
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: `${baseClass}__device-size`,
+                children: [
+                    /*#__PURE__*/ _jsx(PreviewFrameSizeInput, {
+                        axis: "x"
+                    }),
+                    /*#__PURE__*/ _jsx("span", {
+                        className: `${baseClass}__size-divider`,
+                        children: /*#__PURE__*/ _jsx(XIcon, {})
+                    }),
+                    /*#__PURE__*/ _jsx(PreviewFrameSizeInput, {
+                        axis: "y"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(Popup, {
+                button: /*#__PURE__*/ _jsxs(React.Fragment, {
+                    children: [
+                        /*#__PURE__*/ _jsxs("span", {
+                            children: [
+                                zoom * 100,
+                                "%"
+                            ]
+                        }),
+                        " ",
+                        /*#__PURE__*/ _jsx(ChevronIcon, {
+                            className: `${baseClass}__chevron`
+                        })
+                    ]
+                }),
+                className: `${baseClass}__zoom`,
+                horizontalAlign: "right",
+                render: ({ close })=>/*#__PURE__*/ _jsx(PopupList.ButtonGroup, {
+                        children: /*#__PURE__*/ _jsx(React.Fragment, {
+                            children: zoomOptions.map((zoomValue)=>/*#__PURE__*/ _jsxs(PopupList.Button, {
+                                    active: zoom * 100 == zoomValue,
+                                    onClick: ()=>{
+                                        setZoom(zoomValue / 100);
+                                        close();
+                                    },
+                                    children: [
+                                        zoomValue,
+                                        "%"
+                                    ]
+                                }, zoomValue))
+                        })
+                    }),
+                showScrollbar: true,
+                verticalAlign: "bottom"
+            }),
+            /*#__PURE__*/ _jsx("a", {
+                className: `${baseClass}__external`,
+                href: url,
+                onClick: (e)=>{
+                    e.preventDefault();
+                    setPreviewWindowType('popup');
+                },
+                type: "button",
+                children: /*#__PURE__*/ _jsx(LinkIcon, {})
+            })
+        ]
+    });
 };
 
 //# sourceMappingURL=index.js.map

package/dist/views/LivePreview/Toolbar/Controls/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/views/LivePreview/Toolbar/Controls/index.tsx"],"sourcesContent":["'use client'\n\nimport type { EditViewProps } from 'payload/types'\n\nimport { Popup, PopupList } from '@payloadcms/ui/elements/Popup'\nimport { Chevron } from '@payloadcms/ui/icons/Chevron'\nimport { LinkIcon } from '@payloadcms/ui/icons/Link'\nimport { X } from '@payloadcms/ui/icons/X'\nimport React from 'react'\n\nimport { useLivePreviewContext } from '../../Context/context.js'\nimport { PreviewFrameSizeInput } from '../SizeInput/index.js'\nimport './index.scss'\n\nconst baseClass = 'live-preview-toolbar-controls'\nconst zoomOptions = [50, 75, 100, 125, 150, 200]\nconst customOption = {\n  label: 'Custom', // TODO: Add i18n to this string\n  value: 'custom',\n}\n\nexport const ToolbarControls: React.FC<EditViewProps> = () => {\n  const { breakpoint, breakpoints, setBreakpoint, setPreviewWindowType, setZoom, url, zoom } =\n    useLivePreviewContext()\n\n  return (\n    <div className={baseClass}>\n      {breakpoints?.length > 0 && (\n        <Popup\n          button={\n            <React.Fragment>\n              <span>\n                {breakpoints.find((bp) => bp.name == breakpoint)?.label ?? customOption.label}\n              </span>\n              &nbsp;\n              <Chevron className={`${baseClass}__chevron`} />\n            </React.Fragment>\n          }\n          className={`${baseClass}__breakpoint`}\n          horizontalAlign=\"right\"\n          render={({ close }) => (\n            <PopupList.ButtonGroup>\n              <React.Fragment>\n                {breakpoints.map((bp) => (\n                  <PopupList.Button\n                    active={bp.name == breakpoint}\n                    key={bp.name}\n                    onClick={() => {\n                      setBreakpoint(bp.name)\n                      close()\n                    }}\n                  >\n                    {bp.label}\n                  </PopupList.Button>\n                ))}\n                {/* Dynamically add this option so that it only appears when the width and height inputs are explicitly changed */}\n                {breakpoint === 'custom' && (\n                  <PopupList.Button\n                    active={breakpoint == customOption.value}\n                    onClick={() => {\n                      setBreakpoint(customOption.value)\n                      close()\n                    }}\n                  >\n                    {customOption.label}\n                  </PopupList.Button>\n                )}\n              </React.Fragment>\n            </PopupList.ButtonGroup>\n          )}\n          showScrollbar\n          verticalAlign=\"bottom\"\n        />\n      )}\n      <div className={`${baseClass}__device-size`}>\n        <PreviewFrameSizeInput axis=\"x\" />\n        <span className={`${baseClass}__size-divider`}>\n          <X />\n        </span>\n        <PreviewFrameSizeInput axis=\"y\" />\n      </div>\n      <Popup\n        button={\n          <React.Fragment>\n            <span>{zoom * 100}%</span>\n            &nbsp;\n            <Chevron className={`${baseClass}__chevron`} />\n          </React.Fragment>\n        }\n        className={`${baseClass}__zoom`}\n        horizontalAlign=\"right\"\n        render={({ close }) => (\n          <PopupList.ButtonGroup>\n            <React.Fragment>\n              {zoomOptions.map((zoomValue) => (\n                <PopupList.Button\n                  active={zoom * 100 == zoomValue}\n                  key={zoomValue}\n                  onClick={() => {\n                    setZoom(zoomValue / 100)\n                    close()\n                  }}\n                >\n                  {zoomValue}%\n                </PopupList.Button>\n              ))}\n            </React.Fragment>\n          </PopupList.ButtonGroup>\n        )}\n        showScrollbar\n        verticalAlign=\"bottom\"\n      />\n      <a\n        className={`${baseClass}__external`}\n        href={url}\n        onClick={(e) => {\n          e.preventDefault()\n          setPreviewWindowType('popup')\n        }}\n        type=\"button\"\n      >\n        <LinkIcon />\n      </a>\n    </div>\n  )\n}\n"],"names":["Popup","PopupList","Chevron","LinkIcon","X","React","useLivePreviewContext","PreviewFrameSizeInput","baseClass","zoomOptions","customOption","label","value","ToolbarControls","breakpoint","breakpoints","setBreakpoint","setPreviewWindowType","setZoom","url","zoom","div","className","length","button","Fragment","span","find","bp","name","horizontalAlign","render","close","ButtonGroup","map","Button","active","key","onClick","showScrollbar","verticalAlign","axis","zoomValue","a","href","e","preventDefault","type"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AAIA,SAASA,KAAK,EAAEC,SAAS,QAAQ,gCAA+B;AAChE,SAASC,OAAO,QAAQ,+BAA8B;AACtD,SAASC,QAAQ,QAAQ,4BAA2B;AACpD,SAASC,CAAC,QAAQ,yBAAwB;AAC1C,OAAOC,WAAW,QAAO;AAEzB,SAASC,qBAAqB,QAAQ,2BAA0B;AAChE,SAASC,qBAAqB,QAAQ,wBAAuB;AAG7D,MAAMC,YAAY;AAClB,MAAMC,cAAc;IAAC;IAAI;IAAI;IAAK;IAAK;IAAK;CAAI;AAChD,MAAMC,eAAe;IACnBC,OAAO;IACPC,OAAO;AACT;AAEA,OAAO,MAAMC,kBAA2C;IACtD,MAAM,EAAEC,UAAU,EAAEC,WAAW,EAAEC,aAAa,EAAEC,oBAAoB,EAAEC,OAAO,EAAEC,GAAG,EAAEC,IAAI,EAAE,GACxFd;IAEF,qBACE,oBAACe;QAAIC,WAAWd;OACbO,aAAaQ,SAAS,mBACrB,oBAACvB;QACCwB,sBACE,oBAACnB,MAAMoB,QAAQ,sBACb,oBAACC,cACEX,YAAYY,IAAI,CAAC,CAACC,KAAOA,GAAGC,IAAI,IAAIf,aAAaH,SAASD,aAAaC,KAAK,GACxE,mBAEP,oBAACT;YAAQoB,WAAW,CAAC,EAAEd,UAAU,SAAS,CAAC;;QAG/Cc,WAAW,CAAC,EAAEd,UAAU,YAAY,CAAC;QACrCsB,iBAAgB;QAChBC,QAAQ,CAAC,EAAEC,KAAK,EAAE,iBAChB,oBAAC/B,UAAUgC,WAAW,sBACpB,oBAAC5B,MAAMoB,QAAQ,QACZV,YAAYmB,GAAG,CAAC,CAACN,mBAChB,oBAAC3B,UAAUkC,MAAM;oBACfC,QAAQR,GAAGC,IAAI,IAAIf;oBACnBuB,KAAKT,GAAGC,IAAI;oBACZS,SAAS;wBACPtB,cAAcY,GAAGC,IAAI;wBACrBG;oBACF;mBAECJ,GAAGjB,KAAK,IAIZG,eAAe,0BACd,oBAACb,UAAUkC,MAAM;gBACfC,QAAQtB,cAAcJ,aAAaE,KAAK;gBACxC0B,SAAS;oBACPtB,cAAcN,aAAaE,KAAK;oBAChCoB;gBACF;eAECtB,aAAaC,KAAK;QAM7B4B,eAAAA;QACAC,eAAc;sBAGlB,oBAACnB;QAAIC,WAAW,CAAC,EAAEd,UAAU,aAAa,CAAC;qBACzC,oBAACD;QAAsBkC,MAAK;sBAC5B,oBAACf;QAAKJ,WAAW,CAAC,EAAEd,UAAU,cAAc,CAAC;qBAC3C,oBAACJ,yBAEH,oBAACG;QAAsBkC,MAAK;uBAE9B,oBAACzC;QACCwB,sBACE,oBAACnB,MAAMoB,QAAQ,sBACb,oBAACC,cAAMN,OAAO,KAAI,MAAQ,mBAE1B,oBAAClB;YAAQoB,WAAW,CAAC,EAAEd,UAAU,SAAS,CAAC;;QAG/Cc,WAAW,CAAC,EAAEd,UAAU,MAAM,CAAC;QAC/BsB,iBAAgB;QAChBC,QAAQ,CAAC,EAAEC,KAAK,EAAE,iBAChB,oBAAC/B,UAAUgC,WAAW,sBACpB,oBAAC5B,MAAMoB,QAAQ,QACZhB,YAAYyB,GAAG,CAAC,CAACQ,0BAChB,oBAACzC,UAAUkC,MAAM;oBACfC,QAAQhB,OAAO,OAAOsB;oBACtBL,KAAKK;oBACLJ,SAAS;wBACPpB,QAAQwB,YAAY;wBACpBV;oBACF;mBAECU,WAAU;QAMrBH,eAAAA;QACAC,eAAc;sBAEhB,oBAACG;QACCrB,WAAW,CAAC,EAAEd,UAAU,UAAU,CAAC;QACnCoC,MAAMzB;QACNmB,SAAS,CAACO;YACRA,EAAEC,cAAc;YAChB7B,qBAAqB;QACvB;QACA8B,MAAK;qBAEL,oBAAC5C;AAIT,EAAC"}
+{"version":3,"sources":["../../../../../src/views/LivePreview/Toolbar/Controls/index.tsx"],"sourcesContent":["'use client'\n\nimport type { EditViewProps } from 'payload'\n\nimport { ChevronIcon, LinkIcon, Popup, PopupList, XIcon, useTranslation } from '@payloadcms/ui'\nimport React from 'react'\n\nimport { useLivePreviewContext } from '../../Context/context.js'\nimport { PreviewFrameSizeInput } from '../SizeInput/index.js'\nimport './index.scss'\n\nconst baseClass = 'live-preview-toolbar-controls'\nconst zoomOptions = [50, 75, 100, 125, 150, 200]\n\nexport const ToolbarControls: React.FC<EditViewProps> = () => {\n  const { breakpoint, breakpoints, setBreakpoint, setPreviewWindowType, setZoom, url, zoom } =\n    useLivePreviewContext()\n  const { t } = useTranslation()\n\n  const customOption = {\n    label: t('general:custom'),\n    value: 'custom',\n  }\n\n  return (\n    <div className={baseClass}>\n      {breakpoints?.length > 0 && (\n        <Popup\n          button={\n            <React.Fragment>\n              <span>\n                {breakpoints.find((bp) => bp.name == breakpoint)?.label ?? customOption.label}\n              </span>\n              &nbsp;\n              <ChevronIcon className={`${baseClass}__chevron`} />\n            </React.Fragment>\n          }\n          className={`${baseClass}__breakpoint`}\n          horizontalAlign=\"right\"\n          render={({ close }) => (\n            <PopupList.ButtonGroup>\n              <React.Fragment>\n                {breakpoints.map((bp) => (\n                  <PopupList.Button\n                    active={bp.name == breakpoint}\n                    key={bp.name}\n                    onClick={() => {\n                      setBreakpoint(bp.name)\n                      close()\n                    }}\n                  >\n                    {bp.label}\n                  </PopupList.Button>\n                ))}\n                {/* Dynamically add this option so that it only appears when the width and height inputs are explicitly changed */}\n                {breakpoint === 'custom' && (\n                  <PopupList.Button\n                    active={breakpoint == customOption.value}\n                    onClick={() => {\n                      setBreakpoint(customOption.value)\n                      close()\n                    }}\n                  >\n                    {customOption.label}\n                  </PopupList.Button>\n                )}\n              </React.Fragment>\n            </PopupList.ButtonGroup>\n          )}\n          showScrollbar\n          verticalAlign=\"bottom\"\n        />\n      )}\n      <div className={`${baseClass}__device-size`}>\n        <PreviewFrameSizeInput axis=\"x\" />\n        <span className={`${baseClass}__size-divider`}>\n          <XIcon />\n        </span>\n        <PreviewFrameSizeInput axis=\"y\" />\n      </div>\n      <Popup\n        button={\n          <React.Fragment>\n            <span>{zoom * 100}%</span>\n            &nbsp;\n            <ChevronIcon className={`${baseClass}__chevron`} />\n          </React.Fragment>\n        }\n        className={`${baseClass}__zoom`}\n        horizontalAlign=\"right\"\n        render={({ close }) => (\n          <PopupList.ButtonGroup>\n            <React.Fragment>\n              {zoomOptions.map((zoomValue) => (\n                <PopupList.Button\n                  active={zoom * 100 == zoomValue}\n                  key={zoomValue}\n                  onClick={() => {\n                    setZoom(zoomValue / 100)\n                    close()\n                  }}\n                >\n                  {zoomValue}%\n                </PopupList.Button>\n              ))}\n            </React.Fragment>\n          </PopupList.ButtonGroup>\n        )}\n        showScrollbar\n        verticalAlign=\"bottom\"\n      />\n      <a\n        className={`${baseClass}__external`}\n        href={url}\n        onClick={(e) => {\n          e.preventDefault()\n          setPreviewWindowType('popup')\n        }}\n        type=\"button\"\n      >\n        <LinkIcon />\n      </a>\n    </div>\n  )\n}\n"],"names":["ChevronIcon","LinkIcon","Popup","PopupList","XIcon","useTranslation","React","useLivePreviewContext","PreviewFrameSizeInput","baseClass","zoomOptions","ToolbarControls","breakpoint","breakpoints","setBreakpoint","setPreviewWindowType","setZoom","url","zoom","t","customOption","label","value","div","className","length","button","Fragment","span","find","bp","name","horizontalAlign","render","close","ButtonGroup","map","Button","active","onClick","showScrollbar","verticalAlign","axis","zoomValue","a","href","e","preventDefault","type"],"mappings":"AAAA;;AAIA,SAASA,WAAW,EAAEC,QAAQ,EAAEC,KAAK,EAAEC,SAAS,EAAEC,KAAK,EAAEC,cAAc,QAAQ,iBAAgB;AAC/F,OAAOC,WAAW,QAAO;AAEzB,SAASC,qBAAqB,QAAQ,2BAA0B;AAChE,SAASC,qBAAqB,QAAQ,wBAAuB;AAG7D,MAAMC,YAAY;AAClB,MAAMC,cAAc;IAAC;IAAI;IAAI;IAAK;IAAK;IAAK;CAAI;AAEhD,OAAO,MAAMC,kBAA2C;IACtD,MAAM,EAAEC,UAAU,EAAEC,WAAW,EAAEC,aAAa,EAAEC,oBAAoB,EAAEC,OAAO,EAAEC,GAAG,EAAEC,IAAI,EAAE,GACxFX;IACF,MAAM,EAAEY,CAAC,EAAE,GAAGd;IAEd,MAAMe,eAAe;QACnBC,OAAOF,EAAE;QACTG,OAAO;IACT;IAEA,qBACE,MAACC;QAAIC,WAAWf;;YACbI,aAAaY,SAAS,mBACrB,KAACvB;gBACCwB,sBACE,MAACpB,MAAMqB,QAAQ;;sCACb,KAACC;sCACEf,YAAYgB,IAAI,CAAC,CAACC,KAAOA,GAAGC,IAAI,IAAInB,aAAaS,SAASD,aAAaC,KAAK;;wBACxE;sCAEP,KAACrB;4BAAYwB,WAAW,CAAC,EAAEf,UAAU,SAAS,CAAC;;;;gBAGnDe,WAAW,CAAC,EAAEf,UAAU,YAAY,CAAC;gBACrCuB,iBAAgB;gBAChBC,QAAQ,CAAC,EAAEC,KAAK,EAAE,iBAChB,KAAC/B,UAAUgC,WAAW;kCACpB,cAAA,MAAC7B,MAAMqB,QAAQ;;gCACZd,YAAYuB,GAAG,CAAC,CAACN,mBAChB,KAAC3B,UAAUkC,MAAM;wCACfC,QAAQR,GAAGC,IAAI,IAAInB;wCAEnB2B,SAAS;4CACPzB,cAAcgB,GAAGC,IAAI;4CACrBG;wCACF;kDAECJ,GAAGT,KAAK;uCANJS,GAAGC,IAAI;gCAUfnB,eAAe,0BACd,KAACT,UAAUkC,MAAM;oCACfC,QAAQ1B,cAAcQ,aAAaE,KAAK;oCACxCiB,SAAS;wCACPzB,cAAcM,aAAaE,KAAK;wCAChCY;oCACF;8CAECd,aAAaC,KAAK;;;;;gBAM7BmB,aAAa;gBACbC,eAAc;;0BAGlB,MAAClB;gBAAIC,WAAW,CAAC,EAAEf,UAAU,aAAa,CAAC;;kCACzC,KAACD;wBAAsBkC,MAAK;;kCAC5B,KAACd;wBAAKJ,WAAW,CAAC,EAAEf,UAAU,cAAc,CAAC;kCAC3C,cAAA,KAACL;;kCAEH,KAACI;wBAAsBkC,MAAK;;;;0BAE9B,KAACxC;gBACCwB,sBACE,MAACpB,MAAMqB,QAAQ;;sCACb,MAACC;;gCAAMV,OAAO;gCAAI;;;wBAAQ;sCAE1B,KAAClB;4BAAYwB,WAAW,CAAC,EAAEf,UAAU,SAAS,CAAC;;;;gBAGnDe,WAAW,CAAC,EAAEf,UAAU,MAAM,CAAC;gBAC/BuB,iBAAgB;gBAChBC,QAAQ,CAAC,EAAEC,KAAK,EAAE,iBAChB,KAAC/B,UAAUgC,WAAW;kCACpB,cAAA,KAAC7B,MAAMqB,QAAQ;sCACZjB,YAAY0B,GAAG,CAAC,CAACO,0BAChB,MAACxC,UAAUkC,MAAM;oCACfC,QAAQpB,OAAO,OAAOyB;oCAEtBJ,SAAS;wCACPvB,QAAQ2B,YAAY;wCACpBT;oCACF;;wCAECS;wCAAU;;mCANNA;;;gBAYfH,aAAa;gBACbC,eAAc;;0BAEhB,KAACG;gBACCpB,WAAW,CAAC,EAAEf,UAAU,UAAU,CAAC;gBACnCoC,MAAM5B;gBACNsB,SAAS,CAACO;oBACRA,EAAEC,cAAc;oBAChBhC,qBAAqB;gBACvB;gBACAiC,MAAK;0BAEL,cAAA,KAAC/C;;;;AAIT,EAAC"}

package/dist/views/LivePreview/Toolbar/SizeInput/index.js

@@ -1,4 +1,5 @@
 'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useCallback, useEffect } from 'react';
 import { useLivePreviewContext } from '../../Context/context.js';
 const baseClass = 'toolbar-input';
@@ -46,7 +47,7 @@ export const PreviewFrameSizeInput = (props)=>{
         size,
         zoom
     ]);
-    return /*#__PURE__*/ React.createElement("input", {
+    return /*#__PURE__*/ _jsx("input", {
         className: baseClass,
         min: 0,
         name: axis === 'x' ? 'live-preview-width' : 'live-preview-height',