@payloadcms/next 3.0.0-canary.220bb7c → 3.0.0-canary.294ea5c

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

@@ -1,112 +1,163 @@
 'use client';
+
+import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-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 { ShimmerEffect, useAllFormFields, useDocumentEvents } from '@payloadcms/ui';
+import { reduceFieldsToValues } from 'payload/shared';
 import React, { useEffect } from 'react';
 import { useLivePreviewContext } from '../Context/context.js';
 import { DeviceContainer } from '../Device/index.js';
 import { IFrame } from '../IFrame/index.js';
 import { LivePreviewToolbar } from '../Toolbar/index.js';
 const baseClass = 'live-preview-window';
-export const LivePreview = (props)=>{
-    const { appIsReady, iframeHasLoaded, iframeRef, popupRef, previewWindowType, setIframeHasLoaded, url } = useLivePreviewContext();
-    const { mostRecentUpdate } = useDocumentEvents();
-    const { breakpoint, fieldSchemaJSON } = useLivePreviewContext();
-    const prevWindowType = React.useRef(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
-    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(()=>{
+export const LivePreview = props => {
+  const $ = _c(39);
+  const {
+    appIsReady,
+    iframeHasLoaded,
+    iframeRef,
+    popupRef,
+    previewWindowType,
+    setIframeHasLoaded,
+    url
+  } = useLivePreviewContext();
+  const {
+    mostRecentUpdate
+  } = useDocumentEvents();
+  const {
+    breakpoint,
+    fieldSchemaJSON
+  } = useLivePreviewContext();
+  const prevWindowType = React.useRef(undefined);
+  const [fields] = useAllFormFields();
+  let t0;
+  if ($[0] !== fields || $[1] !== appIsReady || $[2] !== previewWindowType || $[3] !== mostRecentUpdate || $[4] !== fieldSchemaJSON || $[5] !== popupRef.current || $[6] !== url || $[7] !== iframeRef.current) {
+    t0 = () => {
+      if (fields && window && "postMessage" in window && appIsReady) {
+        const values = reduceFieldsToValues(fields, true);
+        const shouldSendSchema = !prevWindowType.current || prevWindowType.current !== previewWindowType;
+        prevWindowType.current = previewWindowType;
         const message = {
-            type: 'payload-document-event'
+          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);
+        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);
+        if (previewWindowType === "iframe" && iframeRef.current) {
+          iframeRef.current.contentWindow?.postMessage(message, url);
         }
-    }, [
-        mostRecentUpdate,
-        iframeRef,
-        popupRef,
-        previewWindowType,
-        url
-    ]);
-    if (previewWindowType === 'iframe') {
-        return /*#__PURE__*/ _jsx("div", {
-            className: [
-                baseClass,
-                breakpoint && breakpoint !== 'responsive' && `${baseClass}--has-breakpoint`
-            ].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%"
-                            })
-                        })
-                    })
-                ]
+      }
+    };
+    $[0] = fields;
+    $[1] = appIsReady;
+    $[2] = previewWindowType;
+    $[3] = mostRecentUpdate;
+    $[4] = fieldSchemaJSON;
+    $[5] = popupRef.current;
+    $[6] = url;
+    $[7] = iframeRef.current;
+    $[8] = t0;
+  } else {
+    t0 = $[8];
+  }
+  let t1;
+  if ($[9] !== fields || $[10] !== url || $[11] !== iframeHasLoaded || $[12] !== previewWindowType || $[13] !== popupRef || $[14] !== appIsReady || $[15] !== iframeRef || $[16] !== setIframeHasLoaded || $[17] !== fieldSchemaJSON || $[18] !== mostRecentUpdate) {
+    t1 = [fields, url, iframeHasLoaded, previewWindowType, popupRef, appIsReady, iframeRef, setIframeHasLoaded, fieldSchemaJSON, mostRecentUpdate];
+    $[9] = fields;
+    $[10] = url;
+    $[11] = iframeHasLoaded;
+    $[12] = previewWindowType;
+    $[13] = popupRef;
+    $[14] = appIsReady;
+    $[15] = iframeRef;
+    $[16] = setIframeHasLoaded;
+    $[17] = fieldSchemaJSON;
+    $[18] = mostRecentUpdate;
+    $[19] = t1;
+  } else {
+    t1 = $[19];
+  }
+  useEffect(t0, t1);
+  let t2;
+  if ($[20] !== previewWindowType || $[21] !== popupRef.current || $[22] !== url || $[23] !== iframeRef.current) {
+    t2 = () => {
+      const message_0 = {
+        type: "payload-document-event"
+      };
+      if (previewWindowType === "popup" && popupRef.current) {
+        popupRef.current.postMessage(message_0, url);
+      }
+      if (previewWindowType === "iframe" && iframeRef.current) {
+        iframeRef.current.contentWindow?.postMessage(message_0, url);
+      }
+    };
+    $[20] = previewWindowType;
+    $[21] = popupRef.current;
+    $[22] = url;
+    $[23] = iframeRef.current;
+    $[24] = t2;
+  } else {
+    t2 = $[24];
+  }
+  let t3;
+  if ($[25] !== mostRecentUpdate || $[26] !== iframeRef || $[27] !== popupRef || $[28] !== previewWindowType || $[29] !== url) {
+    t3 = [mostRecentUpdate, iframeRef, popupRef, previewWindowType, url];
+    $[25] = mostRecentUpdate;
+    $[26] = iframeRef;
+    $[27] = popupRef;
+    $[28] = previewWindowType;
+    $[29] = url;
+    $[30] = t3;
+  } else {
+    t3 = $[30];
+  }
+  useEffect(t2, t3);
+  if (previewWindowType === "iframe") {
+    const t4 = breakpoint && breakpoint !== "responsive" && `${baseClass}--has-breakpoint`;
+    let t5;
+    if ($[31] !== t4) {
+      t5 = [baseClass, t4].filter(Boolean);
+      $[31] = t4;
+      $[32] = t5;
+    } else {
+      t5 = $[32];
+    }
+    const t6 = t5.join(" ");
+    let t7;
+    if ($[33] !== props || $[34] !== url || $[35] !== iframeRef || $[36] !== setIframeHasLoaded || $[37] !== t6) {
+      t7 = _jsx("div", {
+        className: t6,
+        children: _jsxs("div", {
+          className: `${baseClass}__wrapper`,
+          children: [_jsx(LivePreviewToolbar, {
+            ...props
+          }), _jsx("div", {
+            className: `${baseClass}__main`,
+            children: _jsx(DeviceContainer, {
+              children: url ? _jsx(IFrame, {
+                ref: iframeRef,
+                setIframeHasLoaded,
+                url
+              }) : _jsx(ShimmerEffect, {
+                height: "100%"
+              })
             })
-        });
+          })]
+        })
+      });
+      $[33] = props;
+      $[34] = url;
+      $[35] = iframeRef;
+      $[36] = setIframeHasLoaded;
+      $[37] = t6;
+      $[38] = t7;
+    } else {
+      t7 = $[38];
     }
+    return t7;
+  }
 };
-
 //# sourceMappingURL=index.js.map

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']>(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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","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","t0","current","window","values","shouldSendSchema","message","type","data","externallyUpdatedRelationship","postMessage","contentWindow","t1","t2","message_0","t3","t4","t5","filter","Boolean","t6","join","t7","_jsx","className","children","_jsxs","ref","height"],"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"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAIA,SAASC,aAAa,EAAEC,gBAAgB,EAAEC,iBAAiB,QAAQ;AACnE,SAASC,oBAAoB,QAAQ;AACrC,OAAOC,KAAA,IAASC,SAAS,QAAQ;AAEjC,SAASC,qBAAqB,QAAQ;AACtC,SAASC,eAAe,QAAQ;AAChC,SAASC,MAAM,QAAQ;AACvB,SAASC,kBAAkB,QAAQ;AAGnC,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,WAAA,GAAuCC,KAAA;EAAA,MAAAC,CAAA,GAAAd,EAAA;EAClD;IAAAe,UAAA;IAAAC,eAAA;IAAAC,SAAA;IAAAC,QAAA;IAAAC,iBAAA;IAAAC,kBAAA;IAAAC;EAAA,IAQId,qBAAA;EAEJ;IAAAe;EAAA,IAA6BnB,iBAAA;EAE7B;IAAAoB,UAAA;IAAAC;EAAA,IAAwCjB,qBAAA;EAExC,MAAAkB,cAAA,GACEpB,KAAA,CAAAqB,MAAA,CAAAC,SAA4E;EAE9E,OAAAC,MAAA,IAAiB1B,gBAAA;EAAA,IAAA2B,EAAA;EAAA,IAAAf,CAAA,QAAAc,MAAA,IAAAd,CAAA,QAAAC,UAAA,IAAAD,CAAA,QAAAK,iBAAA,IAAAL,CAAA,QAAAQ,gBAAA,IAAAR,CAAA,QAAAU,eAAA,IAAAV,CAAA,QAAAI,QAAA,CAAAY,OAAA,IAAAhB,CAAA,QAAAO,GAAA,IAAAP,CAAA,QAAAG,SAAA,CAAAa,OAAA;IAMPD,EAAA,GAAAA,CAAA;MAAA,IAEJD,MAAA,IAAAG,MAAU,IAAU,iBAAAA,MAAiB,IAAUhB,UAAA;QACjD,MAAAiB,MAAA,GAAe5B,oBAAA,CAAqBwB,MAAA,MAAQ;QAM5C,MAAAK,gBAAA,GACE,CAACR,cAAA,CAAAK,OAAA,IAA0BL,cAAA,CAAAK,OAAA,KAA2BX,iBAAA;QAExDM,cAAA,CAAAK,OAAA,GAAyBX,iBAAA;QAEzB,MAAAe,OAAA;UAAAC,IAAA,EACQ;UAAAC,IAAA,EACAJ,MAAA;UAAAK,6BAAA,EACyBf,gBAAA;UAAAE,eAAA,EACdS,gBAAA,GAAmBT,eAAA,GAAAG;QAAkB;QACxD,IAGIR,iBAAA,KAAsB,WAAWD,QAAA,CAAAY,OAAgB;UACnDZ,QAAA,CAAAY,OAAA,CAAAQ,WAAA,CAA6BJ,OAAA,EAASb,GAAA;QAAA;QAAA,IAIpCF,iBAAA,KAAsB,YAAYF,SAAA,CAAAa,OAAiB;UACrDb,SAAA,CAAAa,OAAA,CAAAS,aAAA,EAAAD,WAAA,CAA6CJ,OAAA,EAASb,GAAA;QAAA;MAAA;IAAA;IAG5DP,CAAA,MAAAc,MAAA;IAAAd,CAAA,MAAAC,UAAA;IAAAD,CAAA,MAAAK,iBAAA;IAAAL,CAAA,MAAAQ,gBAAA;IAAAR,CAAA,MAAAU,eAAA;IAAAV,CAAA,MAAAI,QAAA,CAAAY,OAAA;IAAAhB,CAAA,MAAAO,GAAA;IAAAP,CAAA,MAAAG,SAAA,CAAAa,OAAA;IAAAhB,CAAA,MAAAe,EAAA;EAAA;IAAAA,EAAA,GAAAf,CAAA;EAAA;EAAA,IAAA0B,EAAA;EAAA,IAAA1B,CAAA,QAAAc,MAAA,IAAAd,CAAA,SAAAO,GAAA,IAAAP,CAAA,SAAAE,eAAA,IAAAF,CAAA,SAAAK,iBAAA,IAAAL,CAAA,SAAAI,QAAA,IAAAJ,CAAA,SAAAC,UAAA,IAAAD,CAAA,SAAAG,SAAA,IAAAH,CAAA,SAAAM,kBAAA,IAAAN,CAAA,SAAAU,eAAA,IAAAV,CAAA,SAAAQ,gBAAA;IAAGkB,EAAA,IACDZ,MAAA,EACAP,GAAA,EACAL,eAAA,EACAG,iBAAA,EACAD,QAAA,EACAH,UAAA,EACAE,SAAA,EACAG,kBAAA,EACAI,eAAA,EACAF,gBAAA;IACDR,CAAA,MAAAc,MAAA;IAAAd,CAAA,OAAAO,GAAA;IAAAP,CAAA,OAAAE,eAAA;IAAAF,CAAA,OAAAK,iBAAA;IAAAL,CAAA,OAAAI,QAAA;IAAAJ,CAAA,OAAAC,UAAA;IAAAD,CAAA,OAAAG,SAAA;IAAAH,CAAA,OAAAM,kBAAA;IAAAN,CAAA,OAAAU,eAAA;IAAAV,CAAA,OAAAQ,gBAAA;IAAAR,CAAA,OAAA0B,EAAA;EAAA;IAAAA,EAAA,GAAA1B,CAAA;EAAA;EA1CDR,SAAA,CAAUuB,EA+BV,EAAGW,EAWF;EAAA,IAAAC,EAAA;EAAA,IAAA3B,CAAA,SAAAK,iBAAA,IAAAL,CAAA,SAAAI,QAAA,CAAAY,OAAA,IAAAhB,CAAA,SAAAO,GAAA,IAAAP,CAAA,SAAAG,SAAA,CAAAa,OAAA;IAKSW,EAAA,GAAAA,CAAA;MACR,MAAAC,SAAA;QAAAP,IAAA,EACQ;MAAA;MACR,IAGIhB,iBAAA,KAAsB,WAAWD,QAAA,CAAAY,OAAgB;QACnDZ,QAAA,CAAAY,OAAA,CAAAQ,WAAA,CAA6BJ,SAAA,EAASb,GAAA;MAAA;MAAA,IAIpCF,iBAAA,KAAsB,YAAYF,SAAA,CAAAa,OAAiB;QACrDb,SAAA,CAAAa,OAAA,CAAAS,aAAA,EAAAD,WAAA,CAA6CJ,SAAA,EAASb,GAAA;MAAA;IAAA;IAE1DP,CAAA,OAAAK,iBAAA;IAAAL,CAAA,OAAAI,QAAA,CAAAY,OAAA;IAAAhB,CAAA,OAAAO,GAAA;IAAAP,CAAA,OAAAG,SAAA,CAAAa,OAAA;IAAAhB,CAAA,OAAA2B,EAAA;EAAA;IAAAA,EAAA,GAAA3B,CAAA;EAAA;EAAA,IAAA6B,EAAA;EAAA,IAAA7B,CAAA,SAAAQ,gBAAA,IAAAR,CAAA,SAAAG,SAAA,IAAAH,CAAA,SAAAI,QAAA,IAAAJ,CAAA,SAAAK,iBAAA,IAAAL,CAAA,SAAAO,GAAA;IAAGsB,EAAA,IAACrB,gBAAA,EAAkBL,SAAA,EAAWC,QAAA,EAAUC,iBAAA,EAAmBE,GAAA;IAAIP,CAAA,OAAAQ,gBAAA;IAAAR,CAAA,OAAAG,SAAA;IAAAH,CAAA,OAAAI,QAAA;IAAAJ,CAAA,OAAAK,iBAAA;IAAAL,CAAA,OAAAO,GAAA;IAAAP,CAAA,OAAA6B,EAAA;EAAA;IAAAA,EAAA,GAAA7B,CAAA;EAAA;EAdlER,SAAA,CAAUmC,EAcV,EAAGE,EAA+D;EAAA,IAE9DxB,iBAAA,KAAsB;IAKlB,MAAAyB,EAAA,GAAArB,UAAA,IAAcA,UAAA,KAAe,gBAAgB,GAAAZ,SAAA,kBAA8B;IAAA,IAAAkC,EAAA;IAAA,IAAA/B,CAAA,SAAA8B,EAAA;MAFlEC,EAAA,IAAAlC,SAAA,EAETiC,EAA2E,EAAAE,MAAA,CAAAC,OAEnE;MAAAjC,CAAA,OAAA8B,EAAA;MAAA9B,CAAA,OAAA+B,EAAA;IAAA;MAAAA,EAAA,GAAA/B,CAAA;IAAA;IAJC,MAAAkC,EAAA,GAAAH,EAID,CAAAI,IAAA,CACF;IAAA,IAAAC,EAAA;IAAA,IAAApC,CAAA,SAAAD,KAAA,IAAAC,CAAA,SAAAO,GAAA,IAAAP,CAAA,SAAAG,SAAA,IAAAH,CAAA,SAAAM,kBAAA,IAAAN,CAAA,SAAAkC,EAAA;MANVE,EAAA,GAAAC,IAAA,CAAC;QAAAC,SAAA,EACYJ,EAKH;QAAAK,QAAA,EAERC,KAAA,CAAC;UAAAF,SAAA,EAAe,GAAAzC,SAAA,WAAuB;UAAA0C,QAAA,GACrCF,IAAA,CAAAzC,kBAAA;YAAA,GAAwBG;UAAK,C,GAC7BsC,IAAA,CAAC;YAAAC,SAAA,EAAe,GAAAzC,SAAA,QAAoB;YAAA0C,QAAA,EAClCF,IAAA,CAAA3C,eAAA;cAAA6C,QAAA,EACGhC,GAAA,GACC8B,IAAA,CAAA1C,MAAA;gBAAA8C,GAAA,EAAatC,SAAA;gBAAAG,kBAAA;gBAAAC;cAAA,C,IAEb8B,IAAA,CAAAlD,aAAA;gBAAAuD,MAAA,EAAsB;cAAA,C;;;;;;;;;;;;;;WAfhCN,E;;CAuBN","ignoreList":[]}

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;AAOlD,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,cAAc,CAAA;AAKrB,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA8GnD,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,133 +1,150 @@
 'use client';
+
+import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-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 { 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';
 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 zoomOptions = [50, 75, 100, 125, 150, 200];
+export const ToolbarControls = () => {
+  const $ = _c(14);
+  const {
+    breakpoint,
+    breakpoints,
+    setBreakpoint,
+    setPreviewWindowType,
+    setZoom,
+    url,
+    zoom
+  } = useLivePreviewContext();
+  const {
+    t
+  } = useTranslation();
+  let t0;
+  if ($[0] !== t || $[1] !== breakpoints || $[2] !== breakpoint || $[3] !== setBreakpoint || $[4] !== zoom || $[5] !== setZoom || $[6] !== setPreviewWindowType || $[7] !== url) {
     const customOption = {
-        label: t('general:custom'),
-        value: 'custom'
+      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(Chevron, {
-                            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(X, {})
-                    }),
-                    /*#__PURE__*/ _jsx(PreviewFrameSizeInput, {
-                        axis: "y"
-                    })
-                ]
-            }),
-            /*#__PURE__*/ _jsx(Popup, {
-                button: /*#__PURE__*/ _jsxs(React.Fragment, {
-                    children: [
-                        /*#__PURE__*/ _jsxs("span", {
-                            children: [
-                                zoom * 100,
-                                "%"
-                            ]
-                        }),
-                        " ",
-                        /*#__PURE__*/ _jsx(Chevron, {
-                            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');
+    let t2;
+    if ($[9] !== zoom || $[10] !== setZoom) {
+      t2 = t3 => {
+        const {
+          close: close_0
+        } = t3;
+        return _jsx(PopupList.ButtonGroup, {
+          children: _jsx(React.Fragment, {
+            children: zoomOptions.map(zoomValue => _jsxs(PopupList.Button, {
+              active: zoom * 100 == zoomValue,
+              onClick: () => {
+                setZoom(zoomValue / 100);
+                close_0();
+              },
+              children: [zoomValue, "%"]
+            }, zoomValue))
+          })
+        });
+      };
+      $[9] = zoom;
+      $[10] = setZoom;
+      $[11] = t2;
+    } else {
+      t2 = $[11];
+    }
+    let t3;
+    if ($[12] !== setPreviewWindowType) {
+      t3 = e => {
+        e.preventDefault();
+        setPreviewWindowType("popup");
+      };
+      $[12] = setPreviewWindowType;
+      $[13] = t3;
+    } else {
+      t3 = $[13];
+    }
+    t0 = _jsxs("div", {
+      className: baseClass,
+      children: [breakpoints?.length > 0 && _jsx(Popup, {
+        button: _jsxs(React.Fragment, {
+          children: [_jsx("span", {
+            children: breakpoints.find(bp => bp.name == breakpoint)?.label ?? customOption.label
+          }), "\xA0", _jsx(ChevronIcon, {
+            className: `${baseClass}__chevron`
+          })]
+        }),
+        className: `${baseClass}__breakpoint`,
+        horizontalAlign: "right",
+        render: t1 => {
+          const {
+            close
+          } = t1;
+          return _jsx(PopupList.ButtonGroup, {
+            children: _jsxs(React.Fragment, {
+              children: [breakpoints.map(bp_0 => _jsx(PopupList.Button, {
+                active: bp_0.name == breakpoint,
+                onClick: () => {
+                  setBreakpoint(bp_0.name);
+                  close();
+                },
+                children: bp_0.label
+              }, bp_0.name)), breakpoint === "custom" && _jsx(PopupList.Button, {
+                active: breakpoint == customOption.value,
+                onClick: () => {
+                  setBreakpoint(customOption.value);
+                  close();
                 },
-                type: "button",
-                children: /*#__PURE__*/ _jsx(LinkIcon, {})
+                children: customOption.label
+              })]
             })
-        ]
+          });
+        },
+        showScrollbar: true,
+        verticalAlign: "bottom"
+      }), _jsxs("div", {
+        className: `${baseClass}__device-size`,
+        children: [_jsx(PreviewFrameSizeInput, {
+          axis: "x"
+        }), _jsx("span", {
+          className: `${baseClass}__size-divider`,
+          children: _jsx(XIcon, {})
+        }), _jsx(PreviewFrameSizeInput, {
+          axis: "y"
+        })]
+      }), _jsx(Popup, {
+        button: _jsxs(React.Fragment, {
+          children: [_jsxs("span", {
+            children: [zoom * 100, "%"]
+          }), "\xA0", _jsx(ChevronIcon, {
+            className: `${baseClass}__chevron`
+          })]
+        }),
+        className: `${baseClass}__zoom`,
+        horizontalAlign: "right",
+        render: t2,
+        showScrollbar: true,
+        verticalAlign: "bottom"
+      }), _jsx("a", {
+        className: `${baseClass}__external`,
+        href: url,
+        onClick: t3,
+        type: "button",
+        children: _jsx(LinkIcon, {})
+      })]
     });
+    $[0] = t;
+    $[1] = breakpoints;
+    $[2] = breakpoint;
+    $[3] = setBreakpoint;
+    $[4] = zoom;
+    $[5] = setZoom;
+    $[6] = setPreviewWindowType;
+    $[7] = url;
+    $[8] = t0;
+  } else {
+    t0 = $[8];
+  }
+  return t0;
 };
-
 //# sourceMappingURL=index.js.map