@payloadcms/next 3.0.0-alpha.7 → 3.0.0-alpha.70

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

@@ -0,0 +1,101 @@
+'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 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();
+    // 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
+    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);
+            }
+        }
+    }, [
+        fields,
+        url,
+        iframeHasLoaded,
+        previewWindowType,
+        popupRef,
+        appIsReady,
+        iframeRef,
+        setIframeHasLoaded,
+        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", {
+            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%"
+        })))));
+    }
+};
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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  // 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","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,+DAA+D;IAC/D,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,6EAA6E;IAC7E,4EAA4E;IAC5E,sEAAsE;IACtEf,UAAU;QACR,MAAMyB,UAAU;YACdC,MAAM;QACR;QAEA,wCAAwC;QACxC,IAAId,sBAAsB,WAAWD,SAASa,OAAO,EAAE;YACrDb,SAASa,OAAO,CAACM,WAAW,CAACL,SAASX;QACxC;QAEA,kCAAkC;QAClC,IAAIF,sBAAsB,YAAYF,UAAUc,OAAO,EAAE;YACvDd,UAAUc,OAAO,CAACO,aAAa,EAAED,YAAYL,SAASX;QACxD;IACF,GAAG;QAACC;QAAkBL;QAAWC;QAAUC;QAAmBE;KAAI;IAElE,IAAIF,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"}

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

@@ -0,0 +1,5 @@
+import type { EditViewProps } from 'payload/types';
+import React from 'react';
+import './index.scss';
+export declare const ToolbarControls: React.FC<EditViewProps>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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;AAOlD,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

@@ -0,0 +1,85 @@
+'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 { useTranslation } from '@payloadcms/ui/providers/Translation';
+import React from 'react';
+import { useLivePreviewContext } from '../../Context/context.js';
+import { PreviewFrameSizeInput } from '../SizeInput/index.js';
+const baseClass = 'live-preview-toolbar-controls';
+const zoomOptions = [
+    50,
+    75,
+    100,
+    125,
+    150,
+    200
+];
+export const ToolbarControls = ()=>{
+    const { breakpoint, breakpoints, setBreakpoint, setPreviewWindowType, setZoom, url, zoom } = useLivePreviewContext();
+    const { t } = useTranslation();
+    const customOption = {
+        label: t('general:custom'),
+        value: 'custom'
+    };
+    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)));
+};
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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 { useTranslation } from '@payloadcms/ui/providers/Translation'\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              <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","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","key","onClick","showScrollbar","verticalAlign","axis","zoomValue","a","href","e","preventDefault","type"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/views/LivePreview/Toolbar/SizeInput/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAiC,MAAM,OAAO,CAAA;AAGrD,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC;IAC3C,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAA;CACjB,CA0DA,CAAA"}

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

@@ -0,0 +1,60 @@
+'use client';
+import React, { useCallback, useEffect } from 'react';
+import { useLivePreviewContext } from '../../Context/context.js';
+const baseClass = 'toolbar-input';
+export const PreviewFrameSizeInput = (props)=>{
+    const { axis } = props;
+    const { breakpoint, measuredDeviceSize, setBreakpoint, setSize, size, zoom } = useLivePreviewContext();
+    const [internalState, setInternalState] = React.useState((axis === 'x' ? measuredDeviceSize?.width : measuredDeviceSize?.height) || 0);
+    // when the input is changed manually, we need to set the breakpoint as `custom`
+    // this will then allow us to set an explicit width and height
+    const handleChange = useCallback((e)=>{
+        let newValue = Number(e.target.value);
+        if (newValue < 0) newValue = 0;
+        setInternalState(newValue);
+        setBreakpoint('custom');
+        // be sure to set _both_ axis values to so that the other axis doesn't fallback to 0 on initial change
+        // this is because the `responsive` size is '100%' in CSS, and `0` in initial state
+        setSize({
+            type: 'reset',
+            value: {
+                height: axis === 'y' ? newValue : Number(measuredDeviceSize?.height.toFixed(0)) * zoom,
+                width: axis === 'x' ? newValue : Number(measuredDeviceSize?.width.toFixed(0)) * zoom
+            }
+        });
+    }, [
+        axis,
+        setBreakpoint,
+        measuredDeviceSize,
+        setSize,
+        zoom
+    ]);
+    // if the breakpoint is `responsive` then the device's div will have `100%` width and height
+    // so we need to take the measurements provided by `actualDeviceSize` and sync internal state
+    useEffect(()=>{
+        if (breakpoint === 'responsive' && measuredDeviceSize) {
+            if (axis === 'x') setInternalState(Number(measuredDeviceSize.width.toFixed(0)) * zoom);
+            else setInternalState(Number(measuredDeviceSize.height.toFixed(0)) * zoom);
+        }
+        if (breakpoint !== 'responsive' && size) {
+            setInternalState(axis === 'x' ? size.width : size.height);
+        }
+    }, [
+        breakpoint,
+        axis,
+        measuredDeviceSize,
+        size,
+        zoom
+    ]);
+    return /*#__PURE__*/ React.createElement("input", {
+        className: baseClass,
+        min: 0,
+        name: axis === 'x' ? 'live-preview-width' : 'live-preview-height',
+        onChange: handleChange,
+        step: 1,
+        type: "number",
+        value: internalState || 0
+    });
+};
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/views/LivePreview/Toolbar/SizeInput/index.tsx"],"sourcesContent":["'use client'\nimport React, { useCallback, useEffect } from 'react'\n\nimport { useLivePreviewContext } from '../../Context/context.js'\nimport './index.scss'\n\nconst baseClass = 'toolbar-input'\n\nexport const PreviewFrameSizeInput: React.FC<{\n  axis?: 'x' | 'y'\n}> = (props) => {\n  const { axis } = props\n\n  const { breakpoint, measuredDeviceSize, setBreakpoint, setSize, size, zoom } =\n    useLivePreviewContext()\n\n  const [internalState, setInternalState] = React.useState<number>(\n    (axis === 'x' ? measuredDeviceSize?.width : measuredDeviceSize?.height) || 0,\n  )\n\n  // when the input is changed manually, we need to set the breakpoint as `custom`\n  // this will then allow us to set an explicit width and height\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      let newValue = Number(e.target.value)\n\n      if (newValue < 0) newValue = 0\n\n      setInternalState(newValue)\n      setBreakpoint('custom')\n\n      // be sure to set _both_ axis values to so that the other axis doesn't fallback to 0 on initial change\n      // this is because the `responsive` size is '100%' in CSS, and `0` in initial state\n      setSize({\n        type: 'reset',\n        value: {\n          height: axis === 'y' ? newValue : Number(measuredDeviceSize?.height.toFixed(0)) * zoom,\n          width: axis === 'x' ? newValue : Number(measuredDeviceSize?.width.toFixed(0)) * zoom,\n        },\n      })\n    },\n    [axis, setBreakpoint, measuredDeviceSize, setSize, zoom],\n  )\n\n  // if the breakpoint is `responsive` then the device's div will have `100%` width and height\n  // so we need to take the measurements provided by `actualDeviceSize` and sync internal state\n  useEffect(() => {\n    if (breakpoint === 'responsive' && measuredDeviceSize) {\n      if (axis === 'x') setInternalState(Number(measuredDeviceSize.width.toFixed(0)) * zoom)\n      else setInternalState(Number(measuredDeviceSize.height.toFixed(0)) * zoom)\n    }\n\n    if (breakpoint !== 'responsive' && size) {\n      setInternalState(axis === 'x' ? size.width : size.height)\n    }\n  }, [breakpoint, axis, measuredDeviceSize, size, zoom])\n\n  return (\n    <input\n      className={baseClass}\n      min={0}\n      name={axis === 'x' ? 'live-preview-width' : 'live-preview-height'}\n      onChange={handleChange}\n      step={1}\n      type=\"number\"\n      value={internalState || 0}\n    />\n  )\n}\n"],"names":["React","useCallback","useEffect","useLivePreviewContext","baseClass","PreviewFrameSizeInput","props","axis","breakpoint","measuredDeviceSize","setBreakpoint","setSize","size","zoom","internalState","setInternalState","useState","width","height","handleChange","e","newValue","Number","target","value","type","toFixed","input","className","min","name","onChange","step"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,OAAOA,SAASC,WAAW,EAAEC,SAAS,QAAQ,QAAO;AAErD,SAASC,qBAAqB,QAAQ,2BAA0B;AAGhE,MAAMC,YAAY;AAElB,OAAO,MAAMC,wBAER,CAACC;IACJ,MAAM,EAAEC,IAAI,EAAE,GAAGD;IAEjB,MAAM,EAAEE,UAAU,EAAEC,kBAAkB,EAAEC,aAAa,EAAEC,OAAO,EAAEC,IAAI,EAAEC,IAAI,EAAE,GAC1EV;IAEF,MAAM,CAACW,eAAeC,iBAAiB,GAAGf,MAAMgB,QAAQ,CACtD,AAACT,CAAAA,SAAS,MAAME,oBAAoBQ,QAAQR,oBAAoBS,MAAK,KAAM;IAG7E,gFAAgF;IAChF,8DAA8D;IAC9D,MAAMC,eAAelB,YACnB,CAACmB;QACC,IAAIC,WAAWC,OAAOF,EAAEG,MAAM,CAACC,KAAK;QAEpC,IAAIH,WAAW,GAAGA,WAAW;QAE7BN,iBAAiBM;QACjBX,cAAc;QAEd,sGAAsG;QACtG,mFAAmF;QACnFC,QAAQ;YACNc,MAAM;YACND,OAAO;gBACLN,QAAQX,SAAS,MAAMc,WAAWC,OAAOb,oBAAoBS,OAAOQ,QAAQ,MAAMb;gBAClFI,OAAOV,SAAS,MAAMc,WAAWC,OAAOb,oBAAoBQ,MAAMS,QAAQ,MAAMb;YAClF;QACF;IACF,GACA;QAACN;QAAMG;QAAeD;QAAoBE;QAASE;KAAK;IAG1D,4FAA4F;IAC5F,6FAA6F;IAC7FX,UAAU;QACR,IAAIM,eAAe,gBAAgBC,oBAAoB;YACrD,IAAIF,SAAS,KAAKQ,iBAAiBO,OAAOb,mBAAmBQ,KAAK,CAACS,OAAO,CAAC,MAAMb;iBAC5EE,iBAAiBO,OAAOb,mBAAmBS,MAAM,CAACQ,OAAO,CAAC,MAAMb;QACvE;QAEA,IAAIL,eAAe,gBAAgBI,MAAM;YACvCG,iBAAiBR,SAAS,MAAMK,KAAKK,KAAK,GAAGL,KAAKM,MAAM;QAC1D;IACF,GAAG;QAACV;QAAYD;QAAME;QAAoBG;QAAMC;KAAK;IAErD,qBACE,oBAACc;QACCC,WAAWxB;QACXyB,KAAK;QACLC,MAAMvB,SAAS,MAAM,uBAAuB;QAC5CwB,UAAUZ;QACVa,MAAM;QACNP,MAAK;QACLD,OAAOV,iBAAiB;;AAG9B,EAAC"}

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

@@ -0,0 +1,7 @@
+import type { EditViewProps } from 'payload/types';
+import React from 'react';
+import './index.scss';
+export declare const LivePreviewToolbar: React.FC<EditViewProps & {
+    draggable?: boolean;
+}>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/LivePreview/Toolbar/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAIlD,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,cAAc,CAAA;AAgDrB,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CACvC,aAAa,GAAG;IACd,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CASF,CAAA"}

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

@@ -0,0 +1,49 @@
+'use client';
+import { useDraggable } from '@dnd-kit/core';
+import { DragHandle } from '@payloadcms/ui/icons/DragHandle';
+import React from 'react';
+import { useLivePreviewContext } from '../Context/context.js';
+import { ToolbarControls } from './Controls/index.js';
+const baseClass = 'live-preview-toolbar';
+const DraggableToolbar = (props)=>{
+    const { toolbarPosition } = useLivePreviewContext();
+    const { attributes, listeners, setNodeRef, transform } = useDraggable({
+        id: 'live-preview-toolbar'
+    });
+    return /*#__PURE__*/ React.createElement("div", {
+        className: [
+            baseClass,
+            `${baseClass}--draggable`
+        ].join(' '),
+        style: {
+            left: `${toolbarPosition.x}px`,
+            top: `${toolbarPosition.y}px`,
+            ...transform ? {
+                transform: transform ? `translate3d(${transform?.x || 0}px, ${transform?.y || 0}px, 0)` : undefined
+            } : {}
+        }
+    }, /*#__PURE__*/ React.createElement("button", {
+        ...listeners,
+        ...attributes,
+        className: `${baseClass}__drag-handle`,
+        ref: setNodeRef,
+        type: "button"
+    }, /*#__PURE__*/ React.createElement(DragHandle, null)), /*#__PURE__*/ React.createElement(ToolbarControls, props));
+};
+const StaticToolbar = (props)=>{
+    return /*#__PURE__*/ React.createElement("div", {
+        className: [
+            baseClass,
+            `${baseClass}--static`
+        ].join(' ')
+    }, /*#__PURE__*/ React.createElement(ToolbarControls, props));
+};
+export const LivePreviewToolbar = (props)=>{
+    const { draggable } = props;
+    if (draggable) {
+        return /*#__PURE__*/ React.createElement(DraggableToolbar, props);
+    }
+    return /*#__PURE__*/ React.createElement(StaticToolbar, props);
+};
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/views/LivePreview/Toolbar/index.tsx"],"sourcesContent":["'use client'\nimport type { EditViewProps } from 'payload/types'\n\nimport { useDraggable } from '@dnd-kit/core'\nimport { DragHandle } from '@payloadcms/ui/icons/DragHandle'\nimport React from 'react'\n\nimport { useLivePreviewContext } from '../Context/context.js'\nimport { ToolbarControls } from './Controls/index.js'\nimport './index.scss'\n\nconst baseClass = 'live-preview-toolbar'\n\nconst DraggableToolbar: React.FC<EditViewProps> = (props) => {\n  const { toolbarPosition } = useLivePreviewContext()\n\n  const { attributes, listeners, setNodeRef, transform } = useDraggable({\n    id: 'live-preview-toolbar',\n  })\n\n  return (\n    <div\n      className={[baseClass, `${baseClass}--draggable`].join(' ')}\n      style={{\n        left: `${toolbarPosition.x}px`,\n        top: `${toolbarPosition.y}px`,\n        ...(transform\n          ? {\n              transform: transform\n                ? `translate3d(${transform?.x || 0}px, ${transform?.y || 0}px, 0)`\n                : undefined,\n            }\n          : {}),\n      }}\n    >\n      <button\n        {...listeners}\n        {...attributes}\n        className={`${baseClass}__drag-handle`}\n        ref={setNodeRef}\n        type=\"button\"\n      >\n        <DragHandle />\n      </button>\n      <ToolbarControls {...props} />\n    </div>\n  )\n}\n\nconst StaticToolbar: React.FC<EditViewProps> = (props) => {\n  return (\n    <div className={[baseClass, `${baseClass}--static`].join(' ')}>\n      <ToolbarControls {...props} />\n    </div>\n  )\n}\n\nexport const LivePreviewToolbar: React.FC<\n  EditViewProps & {\n    draggable?: boolean\n  }\n> = (props) => {\n  const { draggable } = props\n\n  if (draggable) {\n    return <DraggableToolbar {...props} />\n  }\n\n  return <StaticToolbar {...props} />\n}\n"],"names":["useDraggable","DragHandle","React","useLivePreviewContext","ToolbarControls","baseClass","DraggableToolbar","props","toolbarPosition","attributes","listeners","setNodeRef","transform","id","div","className","join","style","left","x","top","y","undefined","button","ref","type","StaticToolbar","LivePreviewToolbar","draggable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AAGA,SAASA,YAAY,QAAQ,gBAAe;AAC5C,SAASC,UAAU,QAAQ,kCAAiC;AAC5D,OAAOC,WAAW,QAAO;AAEzB,SAASC,qBAAqB,QAAQ,wBAAuB;AAC7D,SAASC,eAAe,QAAQ,sBAAqB;AAGrD,MAAMC,YAAY;AAElB,MAAMC,mBAA4C,CAACC;IACjD,MAAM,EAAEC,eAAe,EAAE,GAAGL;IAE5B,MAAM,EAAEM,UAAU,EAAEC,SAAS,EAAEC,UAAU,EAAEC,SAAS,EAAE,GAAGZ,aAAa;QACpEa,IAAI;IACN;IAEA,qBACE,oBAACC;QACCC,WAAW;YAACV;YAAW,CAAC,EAAEA,UAAU,WAAW,CAAC;SAAC,CAACW,IAAI,CAAC;QACvDC,OAAO;YACLC,MAAM,CAAC,EAAEV,gBAAgBW,CAAC,CAAC,EAAE,CAAC;YAC9BC,KAAK,CAAC,EAAEZ,gBAAgBa,CAAC,CAAC,EAAE,CAAC;YAC7B,GAAIT,YACA;gBACEA,WAAWA,YACP,CAAC,YAAY,EAAEA,WAAWO,KAAK,EAAE,IAAI,EAAEP,WAAWS,KAAK,EAAE,MAAM,CAAC,GAChEC;YACN,IACA,CAAC,CAAC;QACR;qBAEA,oBAACC;QACE,GAAGb,SAAS;QACZ,GAAGD,UAAU;QACdM,WAAW,CAAC,EAAEV,UAAU,aAAa,CAAC;QACtCmB,KAAKb;QACLc,MAAK;qBAEL,oBAACxB,kCAEH,oBAACG,iBAAoBG;AAG3B;AAEA,MAAMmB,gBAAyC,CAACnB;IAC9C,qBACE,oBAACO;QAAIC,WAAW;YAACV;YAAW,CAAC,EAAEA,UAAU,QAAQ,CAAC;SAAC,CAACW,IAAI,CAAC;qBACvD,oBAACZ,iBAAoBG;AAG3B;AAEA,OAAO,MAAMoB,qBAIT,CAACpB;IACH,MAAM,EAAEqB,SAAS,EAAE,GAAGrB;IAEtB,IAAIqB,WAAW;QACb,qBAAO,oBAACtB,kBAAqBC;IAC/B;IAEA,qBAAO,oBAACmB,eAAkBnB;AAC5B,EAAC"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/LivePreview/ToolbarArea/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAYA,CAAA"}

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

@@ -0,0 +1,16 @@
+'use client';
+import { useDroppable } from '@dnd-kit/core';
+import React from 'react';
+const baseClass = 'toolbar-area';
+export const ToolbarArea = (props)=>{
+    const { children } = props;
+    const { setNodeRef } = useDroppable({
+        id: 'live-preview-area'
+    });
+    return /*#__PURE__*/ React.createElement("div", {
+        className: baseClass,
+        ref: setNodeRef
+    }, children);
+};
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/views/LivePreview/ToolbarArea/index.tsx"],"sourcesContent":["'use client'\nimport { useDroppable } from '@dnd-kit/core'\nimport React from 'react'\n\nimport './index.scss'\n\nconst baseClass = 'toolbar-area'\n\nexport const ToolbarArea: React.FC<{\n  children: React.ReactNode\n}> = (props) => {\n  const { children } = props\n\n  const { setNodeRef } = useDroppable({\n    id: 'live-preview-area',\n  })\n\n  return (\n    <div className={baseClass} ref={setNodeRef}>\n      {children}\n    </div>\n  )\n}\n"],"names":["useDroppable","React","baseClass","ToolbarArea","props","children","setNodeRef","id","div","className","ref"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA;AACA,SAASA,YAAY,QAAQ,gBAAe;AAC5C,OAAOC,WAAW,QAAO;AAIzB,MAAMC,YAAY;AAElB,OAAO,MAAMC,cAER,CAACC;IACJ,MAAM,EAAEC,QAAQ,EAAE,GAAGD;IAErB,MAAM,EAAEE,UAAU,EAAE,GAAGN,aAAa;QAClCO,IAAI;IACN;IAEA,qBACE,oBAACC;QAAIC,WAAWP;QAAWQ,KAAKJ;OAC7BD;AAGP,EAAC"}

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

@@ -0,0 +1,10 @@
+import type { LivePreviewConfig } from 'payload/config';
+import type { Data } from 'payload/types';
+import React from 'react';
+import './index.scss';
+export declare const LivePreviewClient: React.FC<{
+    breakpoints: LivePreviewConfig['breakpoints'];
+    initialData: Data;
+    url: string;
+}>;
+//# sourceMappingURL=index.client.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.client.d.ts","sourceRoot":"","sources":["../../../src/views/LivePreview/index.client.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AACvD,OAAO,KAAK,EAA4D,IAAI,EAAE,MAAM,eAAe,CAAA;AAanG,OAAO,KAAgC,MAAM,OAAO,CAAA;AAQpD,OAAO,cAAc,CAAA;AA+KrB,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC;IACvC,WAAW,EAAE,iBAAiB,CAAC,aAAa,CAAC,CAAA;IAC7C,WAAW,EAAE,IAAI,CAAA;IACjB,GAAG,EAAE,MAAM,CAAA;CACZ,CA2DA,CAAA"}

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

@@ -0,0 +1,170 @@
+'use client';
+import { DocumentControls } from '@payloadcms/ui/elements/DocumentControls';
+import { DocumentFields } from '@payloadcms/ui/elements/DocumentFields';
+import { LoadingOverlay } from '@payloadcms/ui/elements/Loading';
+import { Form } from '@payloadcms/ui/forms/Form';
+import { SetViewActions } from '@payloadcms/ui/providers/Actions';
+import { useComponentMap } from '@payloadcms/ui/providers/ComponentMap';
+import { useConfig } from '@payloadcms/ui/providers/Config';
+import { useDocumentInfo } from '@payloadcms/ui/providers/DocumentInfo';
+import { OperationProvider } from '@payloadcms/ui/providers/Operation';
+import { useTranslation } from '@payloadcms/ui/providers/Translation';
+import { getFormState } from '@payloadcms/ui/utilities/getFormState';
+import React, { Fragment, useCallback } from 'react';
+import { LeaveWithoutSaving } from '../../elements/LeaveWithoutSaving/index.js';
+import { SetDocumentStepNav } from '../Edit/Default/SetDocumentStepNav/index.js';
+import { SetDocumentTitle } from '../Edit/Default/SetDocumentTitle/index.js';
+import { useLivePreviewContext } from './Context/context.js';
+import { LivePreviewProvider } from './Context/index.js';
+import { LivePreview } from './Preview/index.js';
+import { usePopupWindow } from './usePopupWindow.js';
+const baseClass = 'live-preview';
+const PreviewView = ({ apiRoute, collectionConfig, config, fieldMap, globalConfig, schemaPath, serverURL })=>{
+    const { id, AfterDocument, AfterFields, BeforeDocument, BeforeFields, action, apiURL, collectionSlug, disableActions, disableLeaveWithoutSaving, docPermissions, getDocPreferences, globalSlug, hasSavePermission, initialData, initialState, onSave: onSaveFromProps } = useDocumentInfo();
+    const operation = id ? 'update' : 'create';
+    const { t } = useTranslation();
+    const { previewWindowType } = useLivePreviewContext();
+    const onSave = useCallback((json)=>{
+        // reportUpdate({
+        //   id,
+        //   entitySlug: collectionConfig.slug,
+        //   updatedAt: json?.result?.updatedAt || new Date().toISOString(),
+        // })
+        // if (auth && id === user.id) {
+        //   await refreshCookieAsync()
+        // }
+        if (typeof onSaveFromProps === 'function') {
+            void onSaveFromProps({
+                ...json,
+                operation: id ? 'update' : 'create'
+            });
+        }
+    }, [
+        id,
+        onSaveFromProps
+    ]);
+    const onChange = useCallback(async ({ formState: prevFormState })=>{
+        const docPreferences = await getDocPreferences();
+        return getFormState({
+            apiRoute,
+            body: {
+                id,
+                docPreferences,
+                formState: prevFormState,
+                operation,
+                schemaPath
+            },
+            serverURL
+        });
+    }, [
+        serverURL,
+        apiRoute,
+        id,
+        operation,
+        schemaPath,
+        getDocPreferences
+    ]);
+    // Allow the `DocumentInfoProvider` to hydrate
+    if (!collectionSlug && !globalSlug) {
+        return /*#__PURE__*/ React.createElement(LoadingOverlay, null);
+    }
+    return /*#__PURE__*/ React.createElement(Fragment, null, /*#__PURE__*/ React.createElement(OperationProvider, {
+        operation: operation
+    }, /*#__PURE__*/ React.createElement(Form, {
+        action: action,
+        className: `${baseClass}__form`,
+        disabled: !hasSavePermission,
+        initialState: initialState,
+        method: id ? 'PATCH' : 'POST',
+        onChange: [
+            onChange
+        ],
+        onSuccess: onSave
+    }, (collectionConfig && !(collectionConfig.versions?.drafts && collectionConfig.versions?.drafts?.autosave) || globalConfig && !(globalConfig.versions?.drafts && globalConfig.versions?.drafts?.autosave)) && !disableLeaveWithoutSaving && /*#__PURE__*/ React.createElement(LeaveWithoutSaving, null), /*#__PURE__*/ React.createElement(SetDocumentStepNav, {
+        collectionSlug: collectionSlug,
+        globalLabel: globalConfig?.label,
+        globalSlug: globalSlug,
+        id: id,
+        pluralLabel: collectionConfig ? collectionConfig?.labels?.plural : undefined,
+        useAsTitle: collectionConfig ? collectionConfig?.admin?.useAsTitle : undefined,
+        view: t('general:livePreview')
+    }), /*#__PURE__*/ React.createElement(SetDocumentTitle, {
+        collectionConfig: collectionConfig,
+        config: config,
+        fallback: id?.toString() || '',
+        globalConfig: globalConfig
+    }), /*#__PURE__*/ React.createElement(DocumentControls, {
+        apiURL: apiURL,
+        data: initialData,
+        disableActions: disableActions,
+        hasSavePermission: hasSavePermission,
+        id: id,
+        isEditing: Boolean(id),
+        permissions: docPermissions,
+        slug: collectionConfig?.slug || globalConfig?.slug
+    }), /*#__PURE__*/ React.createElement("div", {
+        className: [
+            baseClass,
+            previewWindowType === 'popup' && `${baseClass}--detached`
+        ].filter(Boolean).join(' ')
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: [
+            `${baseClass}__main`,
+            previewWindowType === 'popup' && `${baseClass}__main--popup-open`
+        ].filter(Boolean).join(' ')
+    }, BeforeDocument, /*#__PURE__*/ React.createElement(DocumentFields, {
+        AfterFields: AfterFields,
+        BeforeFields: BeforeFields,
+        docPermissions: docPermissions,
+        fieldMap: fieldMap,
+        forceSidebarWrap: true,
+        readOnly: !hasSavePermission,
+        schemaPath: collectionSlug || globalSlug
+    }), AfterDocument), /*#__PURE__*/ React.createElement(LivePreview, {
+        collectionSlug: collectionSlug,
+        globalSlug: globalSlug
+    })))));
+};
+export const LivePreviewClient = (props)=>{
+    const { breakpoints, url } = props;
+    const { collectionSlug, globalSlug } = useDocumentInfo();
+    const config = useConfig();
+    const { isPopupOpen, openPopupWindow, popupRef } = usePopupWindow({
+        eventType: 'payload-live-preview',
+        url
+    });
+    const { collections, globals, routes: { api: apiRoute }, serverURL } = config;
+    const collectionConfig = collectionSlug && collections.find((collection)=>collection.slug === collectionSlug);
+    const globalConfig = globalSlug && globals.find((global)=>global.slug === globalSlug);
+    const schemaPath = collectionSlug || globalSlug;
+    const { getComponentMap } = useComponentMap();
+    const componentMap = getComponentMap({
+        collectionSlug,
+        globalSlug
+    });
+    const { getFieldMap } = useComponentMap();
+    const fieldMap = getFieldMap({
+        collectionSlug: collectionConfig?.slug,
+        globalSlug: globalConfig?.slug
+    });
+    return /*#__PURE__*/ React.createElement(Fragment, null, /*#__PURE__*/ React.createElement(SetViewActions, {
+        actions: componentMap?.actionsMap?.Edit?.LivePreview
+    }), /*#__PURE__*/ React.createElement(LivePreviewProvider, {
+        breakpoints: breakpoints,
+        fieldSchema: collectionConfig?.fields || globalConfig?.fields,
+        isPopupOpen: isPopupOpen,
+        openPopupWindow: openPopupWindow,
+        popupRef: popupRef,
+        url: url
+    }, /*#__PURE__*/ React.createElement(PreviewView, {
+        apiRoute: apiRoute,
+        collectionConfig: collectionConfig,
+        config: config,
+        fieldMap: fieldMap,
+        globalConfig: globalConfig,
+        schemaPath: schemaPath,
+        serverURL: serverURL
+    })));
+};
+
+//# sourceMappingURL=index.client.js.map