@payloadcms/ui 3.71.0-canary.2 → 3.71.0-internal-debug.dea9d74

package/dist/elements/LivePreview/Window/index.js

@@ -1,7 +1,5 @@
 'use client';
-
-import { c as _c } from "react/compiler-runtime";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import { reduceFieldsToValues } from 'payload/shared';
 import React, { useEffect } from 'react';
 import { useAllFormFields } from '../../../forms/Form/context.js';
@@ -15,173 +13,141 @@ import { IFrame } from '../IFrame/index.js';
 import { LivePreviewToolbar } from '../Toolbar/index.js';
 import './index.scss';
 const baseClass = 'live-preview-window';
-export const LivePreviewWindow = props => {
-  const $ = _c(49);
-  const {
-    appIsReady,
-    breakpoint,
-    iframeRef,
-    isLivePreviewing,
-    loadedURL,
-    popupRef,
-    previewWindowType,
-    url
-  } = useLivePreviewContext();
-  const locale = useLocale();
-  const {
-    mostRecentUpdate
-  } = useDocumentEvents();
-  const [formState] = useAllFormFields();
-  const {
-    id,
-    collectionSlug,
-    globalSlug
-  } = useDocumentInfo();
-  let t0;
-  if ($[0] !== appIsReady || $[1] !== collectionSlug || $[2] !== formState || $[3] !== globalSlug || $[4] !== id || $[5] !== iframeRef || $[6] !== isLivePreviewing || $[7] !== locale || $[8] !== mostRecentUpdate || $[9] !== popupRef || $[10] !== previewWindowType || $[11] !== url) {
-    t0 = () => {
-      if (!isLivePreviewing || !appIsReady) {
-        return;
-      }
-      if (formState) {
-        const values = reduceFieldsToValues(formState, true);
-        if (!values.id) {
-          values.id = id;
+export const LivePreviewWindow = (props)=>{
+    const { appIsReady, breakpoint, iframeRef, isLivePreviewing, loadedURL, popupRef, previewWindowType, url } = useLivePreviewContext();
+    const locale = useLocale();
+    const { mostRecentUpdate } = useDocumentEvents();
+    const [formState] = useAllFormFields();
+    const { id, collectionSlug, globalSlug } = useDocumentInfo();
+    /**
+   * 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(()=>{
+        if (!isLivePreviewing || !appIsReady) {
+            return;
+        }
+        // For performance, do not reduce fields to values until after the iframe or popup has loaded
+        if (formState) {
+            const values = reduceFieldsToValues(formState, true);
+            if (!values.id) {
+                values.id = id;
+            }
+            const message = {
+                type: 'payload-live-preview',
+                collectionSlug,
+                data: values,
+                externallyUpdatedRelationship: mostRecentUpdate,
+                globalSlug,
+                locale: locale.code
+            };
+            // 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);
+            }
+        }
+    }, [
+        formState,
+        url,
+        collectionSlug,
+        globalSlug,
+        id,
+        previewWindowType,
+        popupRef,
+        appIsReady,
+        iframeRef,
+        mostRecentUpdate,
+        locale,
+        isLivePreviewing,
+        loadedURL
+    ]);
+    /**
+   * 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(()=>{
+        if (!isLivePreviewing || !appIsReady) {
+            return;
         }
         const message = {
-          type: "payload-live-preview",
-          collectionSlug,
-          data: values,
-          externallyUpdatedRelationship: mostRecentUpdate,
-          globalSlug,
-          locale: locale.code
+            type: 'payload-document-event'
         };
-        if (previewWindowType === "popup" && popupRef.current) {
-          popupRef.current.postMessage(message, url);
+        // Post message to external popup window
+        if (previewWindowType === 'popup' && popupRef.current) {
+            popupRef.current.postMessage(message, url);
         }
-        if (previewWindowType === "iframe" && iframeRef.current) {
-          iframeRef.current.contentWindow?.postMessage(message, url);
+        // Post message to embedded iframe
+        if (previewWindowType === 'iframe' && iframeRef.current) {
+            iframeRef.current.contentWindow?.postMessage(message, url);
         }
-      }
-    };
-    $[0] = appIsReady;
-    $[1] = collectionSlug;
-    $[2] = formState;
-    $[3] = globalSlug;
-    $[4] = id;
-    $[5] = iframeRef;
-    $[6] = isLivePreviewing;
-    $[7] = locale;
-    $[8] = mostRecentUpdate;
-    $[9] = popupRef;
-    $[10] = previewWindowType;
-    $[11] = url;
-    $[12] = t0;
-  } else {
-    t0 = $[12];
-  }
-  let t1;
-  if ($[13] !== appIsReady || $[14] !== collectionSlug || $[15] !== formState || $[16] !== globalSlug || $[17] !== id || $[18] !== iframeRef || $[19] !== isLivePreviewing || $[20] !== loadedURL || $[21] !== locale || $[22] !== mostRecentUpdate || $[23] !== popupRef || $[24] !== previewWindowType || $[25] !== url) {
-    t1 = [formState, url, collectionSlug, globalSlug, id, previewWindowType, popupRef, appIsReady, iframeRef, mostRecentUpdate, locale, isLivePreviewing, loadedURL];
-    $[13] = appIsReady;
-    $[14] = collectionSlug;
-    $[15] = formState;
-    $[16] = globalSlug;
-    $[17] = id;
-    $[18] = iframeRef;
-    $[19] = isLivePreviewing;
-    $[20] = loadedURL;
-    $[21] = locale;
-    $[22] = mostRecentUpdate;
-    $[23] = popupRef;
-    $[24] = previewWindowType;
-    $[25] = url;
-    $[26] = t1;
-  } else {
-    t1 = $[26];
-  }
-  useEffect(t0, t1);
-  let t2;
-  if ($[27] !== appIsReady || $[28] !== iframeRef || $[29] !== isLivePreviewing || $[30] !== popupRef || $[31] !== previewWindowType || $[32] !== url) {
-    t2 = () => {
-      if (!isLivePreviewing || !appIsReady) {
-        return;
-      }
-      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);
-      }
-    };
-    $[27] = appIsReady;
-    $[28] = iframeRef;
-    $[29] = isLivePreviewing;
-    $[30] = popupRef;
-    $[31] = previewWindowType;
-    $[32] = url;
-    $[33] = t2;
-  } else {
-    t2 = $[33];
-  }
-  let t3;
-  if ($[34] !== appIsReady || $[35] !== iframeRef || $[36] !== isLivePreviewing || $[37] !== mostRecentUpdate || $[38] !== popupRef || $[39] !== previewWindowType || $[40] !== url) {
-    t3 = [mostRecentUpdate, iframeRef, popupRef, previewWindowType, url, isLivePreviewing, appIsReady];
-    $[34] = appIsReady;
-    $[35] = iframeRef;
-    $[36] = isLivePreviewing;
-    $[37] = mostRecentUpdate;
-    $[38] = popupRef;
-    $[39] = previewWindowType;
-    $[40] = url;
-    $[41] = t3;
-  } else {
-    t3 = $[41];
-  }
-  useEffect(t2, t3);
-  if (previewWindowType !== "iframe") {
-    return null;
-  }
-  const t4 = isLivePreviewing && `${baseClass}--is-live-previewing`;
-  const t5 = breakpoint && breakpoint !== "responsive" && `${baseClass}--has-breakpoint`;
-  let t6;
-  if ($[42] !== t4 || $[43] !== t5) {
-    t6 = [baseClass, t4, t5].filter(Boolean);
-    $[42] = t4;
-    $[43] = t5;
-    $[44] = t6;
-  } else {
-    t6 = $[44];
-  }
-  const t7 = t6.join(" ");
-  let t8;
-  if ($[45] !== props || $[46] !== t7 || $[47] !== url) {
-    t8 = _jsx("div", {
-      className: t7,
-      children: _jsxs("div", {
-        className: `${baseClass}__wrapper`,
-        children: [_jsx(LivePreviewToolbar, {
-          ...props
-        }), _jsx("div", {
-          className: `${baseClass}__main`,
-          children: _jsx(DeviceContainer, {
-            children: url ? _jsx(IFrame, {}) : _jsx(ShimmerEffect, {
-              height: "100%"
-            })
-          })
-        })]
-      })
-    });
-    $[45] = props;
-    $[46] = t7;
-    $[47] = url;
-    $[48] = t8;
-  } else {
-    t8 = $[48];
-  }
-  return t8;
+    }, [
+        mostRecentUpdate,
+        iframeRef,
+        popupRef,
+        previewWindowType,
+        url,
+        isLivePreviewing,
+        appIsReady
+    ]);
+    if (previewWindowType !== 'iframe') {
+        return null;
+    }
+    return /*#__PURE__*/ _jsxDEV("div", {
+        className: [
+            baseClass,
+            isLivePreviewing && `${baseClass}--is-live-previewing`,
+            breakpoint && breakpoint !== 'responsive' && `${baseClass}--has-breakpoint`
+        ].filter(Boolean).join(' '),
+        children: /*#__PURE__*/ _jsxDEV("div", {
+            className: `${baseClass}__wrapper`,
+            children: [
+                /*#__PURE__*/ _jsxDEV(LivePreviewToolbar, {
+                    ...props
+                }, void 0, false, {
+                    fileName: "src/elements/LivePreview/Window/index.tsx",
+                    lineNumber: 134,
+                    columnNumber: 9
+                }, this),
+                /*#__PURE__*/ _jsxDEV("div", {
+                    className: `${baseClass}__main`,
+                    children: /*#__PURE__*/ _jsxDEV(DeviceContainer, {
+                        children: url ? /*#__PURE__*/ _jsxDEV(IFrame, {}, void 0, false, {
+                            fileName: "src/elements/LivePreview/Window/index.tsx",
+                            lineNumber: 136,
+                            columnNumber: 35
+                        }, this) : /*#__PURE__*/ _jsxDEV(ShimmerEffect, {
+                            height: "100%"
+                        }, void 0, false, {
+                            fileName: "src/elements/LivePreview/Window/index.tsx",
+                            lineNumber: 136,
+                            columnNumber: 48
+                        }, this)
+                    }, void 0, false, {
+                        fileName: "src/elements/LivePreview/Window/index.tsx",
+                        lineNumber: 136,
+                        columnNumber: 11
+                    }, this)
+                }, void 0, false, {
+                    fileName: "src/elements/LivePreview/Window/index.tsx",
+                    lineNumber: 135,
+                    columnNumber: 9
+                }, this)
+            ]
+        }, void 0, true, {
+            fileName: "src/elements/LivePreview/Window/index.tsx",
+            lineNumber: 133,
+            columnNumber: 7
+        }, this)
+    }, void 0, false, {
+        fileName: "src/elements/LivePreview/Window/index.tsx",
+        lineNumber: 124,
+        columnNumber: 5
+    }, this);
 };
+
 //# sourceMappingURL=index.js.map

package/dist/elements/LivePreview/Window/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","reduceFieldsToValues","React","useEffect","useAllFormFields","useDocumentEvents","useDocumentInfo","useLivePreviewContext","useLocale","ShimmerEffect","DeviceContainer","IFrame","LivePreviewToolbar","baseClass","LivePreviewWindow","props","$","appIsReady","breakpoint","iframeRef","isLivePreviewing","loadedURL","popupRef","previewWindowType","url","locale","mostRecentUpdate","formState","id","collectionSlug","globalSlug","t0","values","message","type","data","externallyUpdatedRelationship","code","current","postMessage","contentWindow","t1","t2","message_0","t3","t4","t5","t6","filter","Boolean","t7","join","t8","_jsx","className","children","_jsxs","height"],"sources":["../../../../src/elements/LivePreview/Window/index.tsx"],"sourcesContent":["'use client'\n\nimport type { EditViewProps } from 'payload'\n\nimport { reduceFieldsToValues } from 'payload/shared'\nimport React, { useEffect } from 'react'\n\nimport { useAllFormFields } from '../../../forms/Form/context.js'\nimport { useDocumentEvents } from '../../../providers/DocumentEvents/index.js'\nimport { useDocumentInfo } from '../../../providers/DocumentInfo/index.js'\nimport { useLivePreviewContext } from '../../../providers/LivePreview/context.js'\nimport { useLocale } from '../../../providers/Locale/index.js'\nimport { ShimmerEffect } from '../../ShimmerEffect/index.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 LivePreviewWindow: React.FC<EditViewProps> = (props) => {\n  const {\n    appIsReady,\n    breakpoint,\n    iframeRef,\n    isLivePreviewing,\n    loadedURL,\n    popupRef,\n    previewWindowType,\n    url,\n  } = useLivePreviewContext()\n\n  const locale = useLocale()\n\n  const { mostRecentUpdate } = useDocumentEvents()\n\n  const [formState] = useAllFormFields()\n  const { id, collectionSlug, globalSlug } = useDocumentInfo()\n\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   */\n  useEffect(() => {\n    if (!isLivePreviewing || !appIsReady) {\n      return\n    }\n\n    // For performance, do not reduce fields to values until after the iframe or popup has loaded\n    if (formState) {\n      const values = reduceFieldsToValues(formState, true)\n\n      if (!values.id) {\n        values.id = id\n      }\n\n      const message = {\n        type: 'payload-live-preview',\n        collectionSlug,\n        data: values,\n        externallyUpdatedRelationship: mostRecentUpdate,\n        globalSlug,\n        locale: locale.code,\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    formState,\n    url,\n    collectionSlug,\n    globalSlug,\n    id,\n    previewWindowType,\n    popupRef,\n    appIsReady,\n    iframeRef,\n    mostRecentUpdate,\n    locale,\n    isLivePreviewing,\n    loadedURL,\n  ])\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   */\n  useEffect(() => {\n    if (!isLivePreviewing || !appIsReady) {\n      return\n    }\n\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, isLivePreviewing, appIsReady])\n\n  if (previewWindowType !== 'iframe') {\n    return null\n  }\n\n  return (\n    <div\n      className={[\n        baseClass,\n        isLivePreviewing && `${baseClass}--is-live-previewing`,\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>{url ? <IFrame /> : <ShimmerEffect height=\"100%\" />}</DeviceContainer>\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"sources":["../../../../src/elements/LivePreview/Window/index.tsx"],"sourcesContent":["'use client'\n\nimport type { EditViewProps } from 'payload'\n\nimport { reduceFieldsToValues } from 'payload/shared'\nimport React, { useEffect } from 'react'\n\nimport { useAllFormFields } from '../../../forms/Form/context.js'\nimport { useDocumentEvents } from '../../../providers/DocumentEvents/index.js'\nimport { useDocumentInfo } from '../../../providers/DocumentInfo/index.js'\nimport { useLivePreviewContext } from '../../../providers/LivePreview/context.js'\nimport { useLocale } from '../../../providers/Locale/index.js'\nimport { ShimmerEffect } from '../../ShimmerEffect/index.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 LivePreviewWindow: React.FC<EditViewProps> = (props) => {\n  const {\n    appIsReady,\n    breakpoint,\n    iframeRef,\n    isLivePreviewing,\n    loadedURL,\n    popupRef,\n    previewWindowType,\n    url,\n  } = useLivePreviewContext()\n\n  const locale = useLocale()\n\n  const { mostRecentUpdate } = useDocumentEvents()\n\n  const [formState] = useAllFormFields()\n  const { id, collectionSlug, globalSlug } = useDocumentInfo()\n\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   */\n  useEffect(() => {\n    if (!isLivePreviewing || !appIsReady) {\n      return\n    }\n\n    // For performance, do not reduce fields to values until after the iframe or popup has loaded\n    if (formState) {\n      const values = reduceFieldsToValues(formState, true)\n\n      if (!values.id) {\n        values.id = id\n      }\n\n      const message = {\n        type: 'payload-live-preview',\n        collectionSlug,\n        data: values,\n        externallyUpdatedRelationship: mostRecentUpdate,\n        globalSlug,\n        locale: locale.code,\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    formState,\n    url,\n    collectionSlug,\n    globalSlug,\n    id,\n    previewWindowType,\n    popupRef,\n    appIsReady,\n    iframeRef,\n    mostRecentUpdate,\n    locale,\n    isLivePreviewing,\n    loadedURL,\n  ])\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   */\n  useEffect(() => {\n    if (!isLivePreviewing || !appIsReady) {\n      return\n    }\n\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, isLivePreviewing, appIsReady])\n\n  if (previewWindowType !== 'iframe') {\n    return null\n  }\n\n  return (\n    <div\n      className={[\n        baseClass,\n        isLivePreviewing && `${baseClass}--is-live-previewing`,\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>{url ? <IFrame /> : <ShimmerEffect height=\"100%\" />}</DeviceContainer>\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"names":["reduceFieldsToValues","React","useEffect","useAllFormFields","useDocumentEvents","useDocumentInfo","useLivePreviewContext","useLocale","ShimmerEffect","DeviceContainer","IFrame","LivePreviewToolbar","baseClass","LivePreviewWindow","props","appIsReady","breakpoint","iframeRef","isLivePreviewing","loadedURL","popupRef","previewWindowType","url","locale","mostRecentUpdate","formState","id","collectionSlug","globalSlug","values","message","type","data","externallyUpdatedRelationship","code","current","postMessage","contentWindow","div","className","filter","Boolean","join","height"],"mappings":"AAAA;;AAIA,SAASA,oBAAoB,QAAQ,iBAAgB;AACrD,OAAOC,SAASC,SAAS,QAAQ,QAAO;AAExC,SAASC,gBAAgB,QAAQ,iCAAgC;AACjE,SAASC,iBAAiB,QAAQ,6CAA4C;AAC9E,SAASC,eAAe,QAAQ,2CAA0C;AAC1E,SAASC,qBAAqB,QAAQ,4CAA2C;AACjF,SAASC,SAAS,QAAQ,qCAAoC;AAC9D,SAASC,aAAa,QAAQ,+BAA8B;AAC5D,SAASC,eAAe,QAAQ,qBAAoB;AACpD,SAASC,MAAM,QAAQ,qBAAoB;AAC3C,SAASC,kBAAkB,QAAQ,sBAAqB;AACxD,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,OAAO,MAAMC,oBAA6C,CAACC;IACzD,MAAM,EACJC,UAAU,EACVC,UAAU,EACVC,SAAS,EACTC,gBAAgB,EAChBC,SAAS,EACTC,QAAQ,EACRC,iBAAiB,EACjBC,GAAG,EACJ,GAAGhB;IAEJ,MAAMiB,SAAShB;IAEf,MAAM,EAAEiB,gBAAgB,EAAE,GAAGpB;IAE7B,MAAM,CAACqB,UAAU,GAAGtB;IACpB,MAAM,EAAEuB,EAAE,EAAEC,cAAc,EAAEC,UAAU,EAAE,GAAGvB;IAE3C;;;;;GAKC,GACDH,UAAU;QACR,IAAI,CAACgB,oBAAoB,CAACH,YAAY;YACpC;QACF;QAEA,6FAA6F;QAC7F,IAAIU,WAAW;YACb,MAAMI,SAAS7B,qBAAqByB,WAAW;YAE/C,IAAI,CAACI,OAAOH,EAAE,EAAE;gBACdG,OAAOH,EAAE,GAAGA;YACd;YAEA,MAAMI,UAAU;gBACdC,MAAM;gBACNJ;gBACAK,MAAMH;gBACNI,+BAA+BT;gBAC/BI;gBACAL,QAAQA,OAAOW,IAAI;YACrB;YAEA,wCAAwC;YACxC,IAAIb,sBAAsB,WAAWD,SAASe,OAAO,EAAE;gBACrDf,SAASe,OAAO,CAACC,WAAW,CAACN,SAASR;YACxC;YAEA,kCAAkC;YAClC,IAAID,sBAAsB,YAAYJ,UAAUkB,OAAO,EAAE;gBACvDlB,UAAUkB,OAAO,CAACE,aAAa,EAAED,YAAYN,SAASR;YACxD;QACF;IACF,GAAG;QACDG;QACAH;QACAK;QACAC;QACAF;QACAL;QACAD;QACAL;QACAE;QACAO;QACAD;QACAL;QACAC;KACD;IAED;;;;GAIC,GACDjB,UAAU;QACR,IAAI,CAACgB,oBAAoB,CAACH,YAAY;YACpC;QACF;QAEA,MAAMe,UAAU;YACdC,MAAM;QACR;QAEA,wCAAwC;QACxC,IAAIV,sBAAsB,WAAWD,SAASe,OAAO,EAAE;YACrDf,SAASe,OAAO,CAACC,WAAW,CAACN,SAASR;QACxC;QAEA,kCAAkC;QAClC,IAAID,sBAAsB,YAAYJ,UAAUkB,OAAO,EAAE;YACvDlB,UAAUkB,OAAO,CAACE,aAAa,EAAED,YAAYN,SAASR;QACxD;IACF,GAAG;QAACE;QAAkBP;QAAWG;QAAUC;QAAmBC;QAAKJ;QAAkBH;KAAW;IAEhG,IAAIM,sBAAsB,UAAU;QAClC,OAAO;IACT;IAEA,qBACE,QAACiB;QACCC,WAAW;YACT3B;YACAM,oBAAoB,GAAGN,UAAU,oBAAoB,CAAC;YACtDI,cAAcA,eAAe,gBAAgB,GAAGJ,UAAU,gBAAgB,CAAC;SAC5E,CACE4B,MAAM,CAACC,SACPC,IAAI,CAAC;kBAER,cAAA,QAACJ;YAAIC,WAAW,GAAG3B,UAAU,SAAS,CAAC;;8BACrC,QAACD;oBAAoB,GAAGG,KAAK;;;;;;8BAC7B,QAACwB;oBAAIC,WAAW,GAAG3B,UAAU,MAAM,CAAC;8BAClC,cAAA,QAACH;kCAAiBa,oBAAM,QAACZ;;;;iDAAY,QAACF;4BAAcmC,QAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKrE,EAAC"}

package/dist/elements/Loading/index.js

@@ -1,7 +1,5 @@
 'use client';
-
-import { c as _c } from "react/compiler-runtime";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import { getTranslation } from '@payloadcms/translations';
 import React from 'react';
 import { useLoadingOverlay } from '../../elements/LoadingOverlay/index.js';
@@ -9,150 +7,120 @@ import { useFormProcessing } from '../../forms/Form/context.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import './index.scss';
 const baseClass = 'loading-overlay';
-export const LoadingOverlay = t0 => {
-  const $ = _c(8);
-  const {
-    animationDuration,
-    loadingText,
-    overlayType,
-    show: t1
-  } = t0;
-  const show = t1 === undefined ? true : t1;
-  const {
-    t
-  } = useTranslation();
-  const t2 = show ? `${baseClass}--entering` : `${baseClass}--exiting`;
-  const t3 = overlayType ? `${baseClass}--${overlayType}` : "";
-  let t4;
-  if ($[0] !== t2 || $[1] !== t3) {
-    t4 = [baseClass, t2, t3].filter(Boolean);
-    $[0] = t2;
-    $[1] = t3;
-    $[2] = t4;
-  } else {
-    t4 = $[2];
-  }
-  const t5 = t4.join(" ");
-  const t6 = animationDuration || "500ms";
-  let t7;
-  if ($[3] !== loadingText || $[4] !== t || $[5] !== t5 || $[6] !== t6) {
-    t7 = _jsxs("div", {
-      className: t5,
-      style: {
-        animationDuration: t6
-      },
-      children: [_jsxs("div", {
-        className: `${baseClass}__bars`,
-        children: [_jsx("div", {
-          className: `${baseClass}__bar`
-        }), _jsx("div", {
-          className: `${baseClass}__bar`
-        }), _jsx("div", {
-          className: `${baseClass}__bar`
-        }), _jsx("div", {
-          className: `${baseClass}__bar`
-        }), _jsx("div", {
-          className: `${baseClass}__bar`
-        })]
-      }), _jsx("span", {
-        className: `${baseClass}__text`,
-        children: loadingText || t("general:loading")
-      })]
-    });
-    $[3] = loadingText;
-    $[4] = t;
-    $[5] = t5;
-    $[6] = t6;
-    $[7] = t7;
-  } else {
-    t7 = $[7];
-  }
-  return t7;
+export const LoadingOverlay = ({ animationDuration, loadingText, overlayType, show = true })=>{
+    const { t } = useTranslation();
+    return /*#__PURE__*/ _jsxDEV("div", {
+        className: [
+            baseClass,
+            show ? `${baseClass}--entering` : `${baseClass}--exiting`,
+            overlayType ? `${baseClass}--${overlayType}` : ''
+        ].filter(Boolean).join(' '),
+        style: {
+            animationDuration: animationDuration || '500ms'
+        },
+        children: [
+            /*#__PURE__*/ _jsxDEV("div", {
+                className: `${baseClass}__bars`,
+                children: [
+                    /*#__PURE__*/ _jsxDEV("div", {
+                        className: `${baseClass}__bar`
+                    }, void 0, false, {
+                        fileName: "src/elements/Loading/index.tsx",
+                        lineNumber: 43,
+                        columnNumber: 9
+                    }, this),
+                    /*#__PURE__*/ _jsxDEV("div", {
+                        className: `${baseClass}__bar`
+                    }, void 0, false, {
+                        fileName: "src/elements/Loading/index.tsx",
+                        lineNumber: 44,
+                        columnNumber: 9
+                    }, this),
+                    /*#__PURE__*/ _jsxDEV("div", {
+                        className: `${baseClass}__bar`
+                    }, void 0, false, {
+                        fileName: "src/elements/Loading/index.tsx",
+                        lineNumber: 45,
+                        columnNumber: 9
+                    }, this),
+                    /*#__PURE__*/ _jsxDEV("div", {
+                        className: `${baseClass}__bar`
+                    }, void 0, false, {
+                        fileName: "src/elements/Loading/index.tsx",
+                        lineNumber: 46,
+                        columnNumber: 9
+                    }, this),
+                    /*#__PURE__*/ _jsxDEV("div", {
+                        className: `${baseClass}__bar`
+                    }, void 0, false, {
+                        fileName: "src/elements/Loading/index.tsx",
+                        lineNumber: 47,
+                        columnNumber: 9
+                    }, this)
+                ]
+            }, void 0, true, {
+                fileName: "src/elements/Loading/index.tsx",
+                lineNumber: 42,
+                columnNumber: 7
+            }, this),
+            /*#__PURE__*/ _jsxDEV("span", {
+                className: `${baseClass}__text`,
+                children: loadingText || t('general:loading')
+            }, void 0, false, {
+                fileName: "src/elements/Loading/index.tsx",
+                lineNumber: 50,
+                columnNumber: 7
+            }, this)
+        ]
+    }, void 0, true, {
+        fileName: "src/elements/Loading/index.tsx",
+        lineNumber: 30,
+        columnNumber: 5
+    }, this);
 };
-export const LoadingOverlayToggle = t0 => {
-  const $ = _c(7);
-  const {
-    name: key,
-    type: t1,
-    loadingText,
-    show
-  } = t0;
-  const type = t1 === undefined ? "fullscreen" : t1;
-  const {
-    toggleLoadingOverlay
-  } = useLoadingOverlay();
-  let t2;
-  let t3;
-  if ($[0] !== key || $[1] !== loadingText || $[2] !== show || $[3] !== toggleLoadingOverlay || $[4] !== type) {
-    t2 = () => {
-      toggleLoadingOverlay({
-        type,
-        isLoading: show,
-        key,
-        loadingText: loadingText || undefined
-      });
-      return () => {
+export const LoadingOverlayToggle = ({ name: key, type = 'fullscreen', loadingText, show })=>{
+    const { toggleLoadingOverlay } = useLoadingOverlay();
+    React.useEffect(()=>{
         toggleLoadingOverlay({
-          type,
-          isLoading: false,
-          key
+            type,
+            isLoading: show,
+            key,
+            loadingText: loadingText || undefined
         });
-      };
-    };
-    t3 = [show, toggleLoadingOverlay, key, type, loadingText];
-    $[0] = key;
-    $[1] = loadingText;
-    $[2] = show;
-    $[3] = toggleLoadingOverlay;
-    $[4] = type;
-    $[5] = t2;
-    $[6] = t3;
-  } else {
-    t2 = $[5];
-    t3 = $[6];
-  }
-  React.useEffect(t2, t3);
-  return null;
+        return ()=>{
+            toggleLoadingOverlay({
+                type,
+                isLoading: false,
+                key
+            });
+        };
+    }, [
+        show,
+        toggleLoadingOverlay,
+        key,
+        type,
+        loadingText
+    ]);
+    return null;
 };
-export const FormLoadingOverlayToggle = t0 => {
-  const $ = _c(6);
-  const {
-    name,
-    type: t1,
-    action,
-    formIsLoading: t2,
-    loadingSuffix
-  } = t0;
-  const type = t1 === undefined ? "fullscreen" : t1;
-  const formIsLoading = t2 === undefined ? false : t2;
-  const isProcessing = useFormProcessing();
-  const {
-    i18n,
-    t
-  } = useTranslation();
-  const labels = {
-    create: t("general:creating"),
-    loading: t("general:loading"),
-    update: t("general:updating")
-  };
-  const t3 = `${labels[action]} ${loadingSuffix ? getTranslation(loadingSuffix, i18n) : ""}`;
-  let t4;
-  if ($[0] !== formIsLoading || $[1] !== isProcessing || $[2] !== name || $[3] !== t3 || $[4] !== type) {
-    t4 = _jsx(LoadingOverlayToggle, {
-      loadingText: t3.trim(),
-      name,
-      show: formIsLoading || isProcessing,
-      type
-    });
-    $[0] = formIsLoading;
-    $[1] = isProcessing;
-    $[2] = name;
-    $[3] = t3;
-    $[4] = type;
-    $[5] = t4;
-  } else {
-    t4 = $[5];
-  }
-  return t4;
+export const FormLoadingOverlayToggle = ({ name, type = 'fullscreen', action, formIsLoading = false, loadingSuffix })=>{
+    const isProcessing = useFormProcessing();
+    const { i18n, t } = useTranslation();
+    const labels = {
+        create: t('general:creating'),
+        loading: t('general:loading'),
+        update: t('general:updating')
+    };
+    return /*#__PURE__*/ _jsxDEV(LoadingOverlayToggle, {
+        loadingText: `${labels[action]} ${loadingSuffix ? getTranslation(loadingSuffix, i18n) : ''}`.trim(),
+        name: name,
+        show: formIsLoading || isProcessing,
+        type: type
+    }, void 0, false, {
+        fileName: "src/elements/Loading/index.tsx",
+        lineNumber: 114,
+        columnNumber: 5
+    }, this);
 };
+
 //# sourceMappingURL=index.js.map