@payloadcms/next 3.0.0-beta.35 → 3.0.0-beta.37

package/dist/views/List/index.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { HydrateClientUser } from '@payloadcms/ui/elements/HydrateClientUser';
 import { RenderCustomComponent } from '@payloadcms/ui/elements/RenderCustomComponent';
 import { TableColumnsProvider } from '@payloadcms/ui/elements/TableColumns';
@@ -14,7 +15,7 @@ export const ListView = async ({ initPageResult, params, searchParams })=>{
     const { collectionConfig, locale: fullLocale, permissions, req: { i18n, locale, payload, payload: { config }, query, user }, visibleEntities } = initPageResult;
     const collectionSlug = collectionConfig?.slug;
     if (!permissions?.collections?.[collectionSlug]?.read?.permission) {
-        return /*#__PURE__*/ React.createElement(UnauthorizedView, {
+        return /*#__PURE__*/ _jsx(UnauthorizedView, {
             initPageResult: initPageResult,
             searchParams: searchParams
         });
@@ -73,48 +74,56 @@ export const ListView = async ({ initPageResult, params, searchParams })=>{
             collectionSlug,
             listSearchableFields: collectionConfig.admin.listSearchableFields
         };
-        return /*#__PURE__*/ React.createElement(Fragment, null, /*#__PURE__*/ React.createElement(HydrateClientUser, {
-            permissions: permissions,
-            user: user
-        }), /*#__PURE__*/ React.createElement(ListInfoProvider, {
-            collectionConfig: createClientCollectionConfig({
-                collection: collectionConfig,
-                t: initPageResult.req.i18n.t
-            }),
-            collectionSlug: collectionSlug,
-            hasCreatePermission: permissions?.collections?.[collectionSlug]?.create?.permission,
-            newDocumentURL: `${admin}/collections/${collectionSlug}/create`
-        }, /*#__PURE__*/ React.createElement(ListQueryProvider, {
-            data: data,
-            defaultLimit: limit || collectionConfig?.admin?.pagination?.defaultLimit,
-            defaultSort: sort,
-            modifySearchParams: true,
-            preferenceKey: preferenceKey
-        }, /*#__PURE__*/ React.createElement(TableColumnsProvider, {
-            collectionSlug: collectionSlug,
-            enableRowSelections: true,
-            listPreferences: listPreferences,
-            preferenceKey: preferenceKey
-        }, /*#__PURE__*/ React.createElement(RenderCustomComponent, {
-            CustomComponent: CustomListView,
-            DefaultComponent: DefaultListView,
-            componentProps: viewComponentProps,
-            serverOnlyProps: {
-                collectionConfig,
-                data,
-                hasCreatePermission: permissions?.collections?.[collectionSlug]?.create?.permission,
-                i18n,
-                limit,
-                listPreferences,
-                locale: fullLocale,
-                newDocumentURL: `${admin}/collections/${collectionSlug}/create`,
-                params,
-                payload,
-                permissions,
-                searchParams,
-                user
-            }
-        })))));
+        return /*#__PURE__*/ _jsxs(Fragment, {
+            children: [
+                /*#__PURE__*/ _jsx(HydrateClientUser, {
+                    permissions: permissions,
+                    user: user
+                }),
+                /*#__PURE__*/ _jsx(ListInfoProvider, {
+                    collectionConfig: createClientCollectionConfig({
+                        collection: collectionConfig,
+                        t: initPageResult.req.i18n.t
+                    }),
+                    collectionSlug: collectionSlug,
+                    hasCreatePermission: permissions?.collections?.[collectionSlug]?.create?.permission,
+                    newDocumentURL: `${admin}/collections/${collectionSlug}/create`,
+                    children: /*#__PURE__*/ _jsx(ListQueryProvider, {
+                        data: data,
+                        defaultLimit: limit || collectionConfig?.admin?.pagination?.defaultLimit,
+                        defaultSort: sort,
+                        modifySearchParams: true,
+                        preferenceKey: preferenceKey,
+                        children: /*#__PURE__*/ _jsx(TableColumnsProvider, {
+                            collectionSlug: collectionSlug,
+                            enableRowSelections: true,
+                            listPreferences: listPreferences,
+                            preferenceKey: preferenceKey,
+                            children: /*#__PURE__*/ _jsx(RenderCustomComponent, {
+                                CustomComponent: CustomListView,
+                                DefaultComponent: DefaultListView,
+                                componentProps: viewComponentProps,
+                                serverOnlyProps: {
+                                    collectionConfig,
+                                    data,
+                                    hasCreatePermission: permissions?.collections?.[collectionSlug]?.create?.permission,
+                                    i18n,
+                                    limit,
+                                    listPreferences,
+                                    locale: fullLocale,
+                                    newDocumentURL: `${admin}/collections/${collectionSlug}/create`,
+                                    params,
+                                    payload,
+                                    permissions,
+                                    searchParams,
+                                    user
+                                }
+                            })
+                        })
+                    })
+                })
+            ]
+        });
     }
     return notFound();
 };

package/dist/views/List/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/views/List/index.tsx"],"sourcesContent":["import type { Where } from 'payload/types'\n\nimport { HydrateClientUser } from '@payloadcms/ui/elements/HydrateClientUser'\nimport { RenderCustomComponent } from '@payloadcms/ui/elements/RenderCustomComponent'\nimport { TableColumnsProvider } from '@payloadcms/ui/elements/TableColumns'\nimport { ListInfoProvider } from '@payloadcms/ui/providers/ListInfo'\nimport { ListQueryProvider } from '@payloadcms/ui/providers/ListQuery'\nimport { notFound } from 'next/navigation.js'\nimport { createClientCollectionConfig } from 'payload/config'\nimport { type AdminViewProps } from 'payload/types'\nimport { isNumber, isReactComponentOrFunction, mergeListSearchAndWhere } from 'payload/utilities'\nimport React, { Fragment } from 'react'\n\nimport type { DefaultListViewProps, ListPreferences } from './Default/types.js'\n\nimport { UnauthorizedView } from '../Unauthorized/index.js'\nimport { DefaultListView } from './Default/index.js'\n\nexport { generateListMetadata } from './meta.js'\n\nexport const ListView: React.FC<AdminViewProps> = async ({\n  initPageResult,\n  params,\n  searchParams,\n}) => {\n  const {\n    collectionConfig,\n    locale: fullLocale,\n    permissions,\n    req: {\n      i18n,\n      locale,\n      payload,\n      payload: { config },\n      query,\n      user,\n    },\n    visibleEntities,\n  } = initPageResult\n\n  const collectionSlug = collectionConfig?.slug\n\n  if (!permissions?.collections?.[collectionSlug]?.read?.permission) {\n    return <UnauthorizedView initPageResult={initPageResult} searchParams={searchParams} />\n  }\n\n  let listPreferences: ListPreferences\n  const preferenceKey = `${collectionSlug}-list`\n\n  try {\n    listPreferences = (await payload\n      .find({\n        collection: 'payload-preferences',\n        depth: 0,\n        limit: 1,\n        user,\n        where: {\n          key: {\n            equals: preferenceKey,\n          },\n        },\n      })\n      ?.then((res) => res?.docs?.[0]?.value)) as ListPreferences\n  } catch (error) {} // eslint-disable-line no-empty\n\n  const {\n    routes: { admin },\n  } = config\n\n  if (collectionConfig) {\n    const {\n      admin: { components: { views: { List: CustomList } = {} } = {} },\n    } = collectionConfig\n\n    if (!visibleEntities.collections.includes(collectionSlug)) {\n      return notFound()\n    }\n\n    let CustomListView = null\n\n    if (CustomList && typeof CustomList === 'function') {\n      CustomListView = CustomList\n    } else if (typeof CustomList === 'object' && isReactComponentOrFunction(CustomList.Component)) {\n      CustomListView = CustomList.Component\n    }\n\n    const page = isNumber(query?.page) ? Number(query.page) : 0\n    const whereQuery = mergeListSearchAndWhere({\n      collectionConfig,\n      query: {\n        search: typeof query?.search === 'string' ? query.search : undefined,\n        where: (query?.where as Where) || undefined,\n      },\n    })\n    const limit = isNumber(query?.limit)\n      ? Number(query.limit)\n      : listPreferences?.limit || collectionConfig.admin.pagination.defaultLimit\n    const sort =\n      query?.sort && typeof query.sort === 'string'\n        ? query.sort\n        : listPreferences?.sort || undefined\n\n    const data = await payload.find({\n      collection: collectionSlug,\n      depth: 0,\n      draft: true,\n      fallbackLocale: null,\n      limit,\n      locale,\n      overrideAccess: false,\n      page,\n      sort,\n      user,\n      where: whereQuery || {},\n    })\n\n    const viewComponentProps: DefaultListViewProps = {\n      collectionSlug,\n      listSearchableFields: collectionConfig.admin.listSearchableFields,\n    }\n\n    return (\n      <Fragment>\n        <HydrateClientUser permissions={permissions} user={user} />\n        <ListInfoProvider\n          collectionConfig={createClientCollectionConfig({\n            collection: collectionConfig,\n            t: initPageResult.req.i18n.t,\n          })}\n          collectionSlug={collectionSlug}\n          hasCreatePermission={permissions?.collections?.[collectionSlug]?.create?.permission}\n          newDocumentURL={`${admin}/collections/${collectionSlug}/create`}\n        >\n          <ListQueryProvider\n            data={data}\n            defaultLimit={limit || collectionConfig?.admin?.pagination?.defaultLimit}\n            defaultSort={sort}\n            modifySearchParams\n            preferenceKey={preferenceKey}\n          >\n            <TableColumnsProvider\n              collectionSlug={collectionSlug}\n              enableRowSelections\n              listPreferences={listPreferences}\n              preferenceKey={preferenceKey}\n            >\n              <RenderCustomComponent\n                CustomComponent={CustomListView}\n                DefaultComponent={DefaultListView}\n                componentProps={viewComponentProps}\n                serverOnlyProps={{\n                  collectionConfig,\n                  data,\n                  hasCreatePermission:\n                    permissions?.collections?.[collectionSlug]?.create?.permission,\n                  i18n,\n                  limit,\n                  listPreferences,\n                  locale: fullLocale,\n                  newDocumentURL: `${admin}/collections/${collectionSlug}/create`,\n                  params,\n                  payload,\n                  permissions,\n                  searchParams,\n                  user,\n                }}\n              />\n            </TableColumnsProvider>\n          </ListQueryProvider>\n        </ListInfoProvider>\n      </Fragment>\n    )\n  }\n\n  return notFound()\n}\n"],"names":["HydrateClientUser","RenderCustomComponent","TableColumnsProvider","ListInfoProvider","ListQueryProvider","notFound","createClientCollectionConfig","isNumber","isReactComponentOrFunction","mergeListSearchAndWhere","React","Fragment","UnauthorizedView","DefaultListView","generateListMetadata","ListView","initPageResult","params","searchParams","collectionConfig","locale","fullLocale","permissions","req","i18n","payload","config","query","user","visibleEntities","collectionSlug","slug","collections","read","permission","listPreferences","preferenceKey","find","collection","depth","limit","where","key","equals","then","res","docs","value","error","routes","admin","components","views","List","CustomList","includes","CustomListView","Component","page","Number","whereQuery","search","undefined","pagination","defaultLimit","sort","data","draft","fallbackLocale","overrideAccess","viewComponentProps","listSearchableFields","t","hasCreatePermission","create","newDocumentURL","defaultSort","modifySearchParams","enableRowSelections","CustomComponent","DefaultComponent","componentProps","serverOnlyProps"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../../../src/views/List/index.tsx"],"sourcesContent":["import type { Where } from 'payload/types'\n\nimport { HydrateClientUser } from '@payloadcms/ui/elements/HydrateClientUser'\nimport { RenderCustomComponent } from '@payloadcms/ui/elements/RenderCustomComponent'\nimport { TableColumnsProvider } from '@payloadcms/ui/elements/TableColumns'\nimport { ListInfoProvider } from '@payloadcms/ui/providers/ListInfo'\nimport { ListQueryProvider } from '@payloadcms/ui/providers/ListQuery'\nimport { notFound } from 'next/navigation.js'\nimport { createClientCollectionConfig } from 'payload/config'\nimport { type AdminViewProps } from 'payload/types'\nimport { isNumber, isReactComponentOrFunction, mergeListSearchAndWhere } from 'payload/utilities'\nimport React, { Fragment } from 'react'\n\nimport type { DefaultListViewProps, ListPreferences } from './Default/types.js'\n\nimport { UnauthorizedView } from '../Unauthorized/index.js'\nimport { DefaultListView } from './Default/index.js'\n\nexport { generateListMetadata } from './meta.js'\n\nexport const ListView: React.FC<AdminViewProps> = async ({\n  initPageResult,\n  params,\n  searchParams,\n}) => {\n  const {\n    collectionConfig,\n    locale: fullLocale,\n    permissions,\n    req: {\n      i18n,\n      locale,\n      payload,\n      payload: { config },\n      query,\n      user,\n    },\n    visibleEntities,\n  } = initPageResult\n\n  const collectionSlug = collectionConfig?.slug\n\n  if (!permissions?.collections?.[collectionSlug]?.read?.permission) {\n    return <UnauthorizedView initPageResult={initPageResult} searchParams={searchParams} />\n  }\n\n  let listPreferences: ListPreferences\n  const preferenceKey = `${collectionSlug}-list`\n\n  try {\n    listPreferences = (await payload\n      .find({\n        collection: 'payload-preferences',\n        depth: 0,\n        limit: 1,\n        user,\n        where: {\n          key: {\n            equals: preferenceKey,\n          },\n        },\n      })\n      ?.then((res) => res?.docs?.[0]?.value)) as ListPreferences\n  } catch (error) {} // eslint-disable-line no-empty\n\n  const {\n    routes: { admin },\n  } = config\n\n  if (collectionConfig) {\n    const {\n      admin: { components: { views: { List: CustomList } = {} } = {} },\n    } = collectionConfig\n\n    if (!visibleEntities.collections.includes(collectionSlug)) {\n      return notFound()\n    }\n\n    let CustomListView = null\n\n    if (CustomList && typeof CustomList === 'function') {\n      CustomListView = CustomList\n    } else if (typeof CustomList === 'object' && isReactComponentOrFunction(CustomList.Component)) {\n      CustomListView = CustomList.Component\n    }\n\n    const page = isNumber(query?.page) ? Number(query.page) : 0\n    const whereQuery = mergeListSearchAndWhere({\n      collectionConfig,\n      query: {\n        search: typeof query?.search === 'string' ? query.search : undefined,\n        where: (query?.where as Where) || undefined,\n      },\n    })\n    const limit = isNumber(query?.limit)\n      ? Number(query.limit)\n      : listPreferences?.limit || collectionConfig.admin.pagination.defaultLimit\n    const sort =\n      query?.sort && typeof query.sort === 'string'\n        ? query.sort\n        : listPreferences?.sort || undefined\n\n    const data = await payload.find({\n      collection: collectionSlug,\n      depth: 0,\n      draft: true,\n      fallbackLocale: null,\n      limit,\n      locale,\n      overrideAccess: false,\n      page,\n      sort,\n      user,\n      where: whereQuery || {},\n    })\n\n    const viewComponentProps: DefaultListViewProps = {\n      collectionSlug,\n      listSearchableFields: collectionConfig.admin.listSearchableFields,\n    }\n\n    return (\n      <Fragment>\n        <HydrateClientUser permissions={permissions} user={user} />\n        <ListInfoProvider\n          collectionConfig={createClientCollectionConfig({\n            collection: collectionConfig,\n            t: initPageResult.req.i18n.t,\n          })}\n          collectionSlug={collectionSlug}\n          hasCreatePermission={permissions?.collections?.[collectionSlug]?.create?.permission}\n          newDocumentURL={`${admin}/collections/${collectionSlug}/create`}\n        >\n          <ListQueryProvider\n            data={data}\n            defaultLimit={limit || collectionConfig?.admin?.pagination?.defaultLimit}\n            defaultSort={sort}\n            modifySearchParams\n            preferenceKey={preferenceKey}\n          >\n            <TableColumnsProvider\n              collectionSlug={collectionSlug}\n              enableRowSelections\n              listPreferences={listPreferences}\n              preferenceKey={preferenceKey}\n            >\n              <RenderCustomComponent\n                CustomComponent={CustomListView}\n                DefaultComponent={DefaultListView}\n                componentProps={viewComponentProps}\n                serverOnlyProps={{\n                  collectionConfig,\n                  data,\n                  hasCreatePermission:\n                    permissions?.collections?.[collectionSlug]?.create?.permission,\n                  i18n,\n                  limit,\n                  listPreferences,\n                  locale: fullLocale,\n                  newDocumentURL: `${admin}/collections/${collectionSlug}/create`,\n                  params,\n                  payload,\n                  permissions,\n                  searchParams,\n                  user,\n                }}\n              />\n            </TableColumnsProvider>\n          </ListQueryProvider>\n        </ListInfoProvider>\n      </Fragment>\n    )\n  }\n\n  return notFound()\n}\n"],"names":["HydrateClientUser","RenderCustomComponent","TableColumnsProvider","ListInfoProvider","ListQueryProvider","notFound","createClientCollectionConfig","isNumber","isReactComponentOrFunction","mergeListSearchAndWhere","React","Fragment","UnauthorizedView","DefaultListView","generateListMetadata","ListView","initPageResult","params","searchParams","collectionConfig","locale","fullLocale","permissions","req","i18n","payload","config","query","user","visibleEntities","collectionSlug","slug","collections","read","permission","listPreferences","preferenceKey","find","collection","depth","limit","where","key","equals","then","res","docs","value","error","routes","admin","components","views","List","CustomList","includes","CustomListView","Component","page","Number","whereQuery","search","undefined","pagination","defaultLimit","sort","data","draft","fallbackLocale","overrideAccess","viewComponentProps","listSearchableFields","t","hasCreatePermission","create","newDocumentURL","defaultSort","modifySearchParams","enableRowSelections","CustomComponent","DefaultComponent","componentProps","serverOnlyProps"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/dist/views/LivePreview/Context/context.d.ts

@@ -9,7 +9,7 @@ export interface LivePreviewContextType {
     breakpoints: LivePreviewConfig['breakpoints'];
     fieldSchemaJSON?: ReturnType<typeof fieldSchemaToJSON>;
     iframeHasLoaded: boolean;
-    iframeRef: React.RefObject<HTMLIFrameElement>;
+    iframeRef: React.RefObject<HTMLIFrameElement | null>;
     isPopupOpen: boolean;
     measuredDeviceSize: {
         height: number;

package/dist/views/LivePreview/Context/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../src/views/LivePreview/Context/context.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AACvD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAA;AAC1D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAIrC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAC1D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AAEzD,MAAM,WAAW,sBAAsB;IACrC,UAAU,EAAE,OAAO,CAAA;IACnB,UAAU,EAAE,iBAAiB,CAAC,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAA;IAC5D,WAAW,EAAE,iBAAiB,CAAC,aAAa,CAAC,CAAA;IAC7C,eAAe,CAAC,EAAE,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAA;IACtD,eAAe,EAAE,OAAO,CAAA;IACxB,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAA;IAC7C,WAAW,EAAE,OAAO,CAAA;IACpB,kBAAkB,EAAE;QAClB,MAAM,EAAE,MAAM,CAAA;QACd,KAAK,EAAE,MAAM,CAAA;KACd,CAAA;IACD,eAAe,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC,iBAAiB,CAAC,CAAA;IACrE,QAAQ,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,MAAM,GAAG,IAAI,CAAC,CAAA;IAChD,iBAAiB,EAAE,QAAQ,GAAG,OAAO,CAAA;IACrC,aAAa,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAA;IAC5C,aAAa,EAAE,CAAC,UAAU,EAAE,iBAAiB,CAAC,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,KAAK,IAAI,CAAA;IACrF,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC,kBAAkB,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAA;IAC7C,qBAAqB,EAAE,CAAC,IAAI,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IACxE,oBAAoB,EAAE,CAAC,iBAAiB,EAAE,QAAQ,GAAG,OAAO,KAAK,IAAI,CAAA;IACrE,OAAO,EAAE,QAAQ,CAAC,iBAAiB,CAAC,CAAA;IACpC,kBAAkB,EAAE,CAAC,QAAQ,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IAChE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/B,IAAI,EAAE;QACJ,MAAM,EAAE,MAAM,CAAA;QACd,KAAK,EAAE,MAAM,CAAA;KACd,CAAA;IACD,eAAe,EAAE;QACf,CAAC,EAAE,MAAM,CAAA;QACT,CAAC,EAAE,MAAM,CAAA;KACV,CAAA;IACD,GAAG,EAAE,MAAM,GAAG,SAAS,CAAA;IACvB,IAAI,EAAE,MAAM,CAAA;CACb;AAED,eAAO,MAAM,kBAAkB,iDAmC7B,CAAA;AAEF,eAAO,MAAM,qBAAqB,8BAAuC,CAAA"}
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../src/views/LivePreview/Context/context.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AACvD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAA;AAC1D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAIrC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAC1D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AAEzD,MAAM,WAAW,sBAAsB;IACrC,UAAU,EAAE,OAAO,CAAA;IACnB,UAAU,EAAE,iBAAiB,CAAC,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAA;IAC5D,WAAW,EAAE,iBAAiB,CAAC,aAAa,CAAC,CAAA;IAC7C,eAAe,CAAC,EAAE,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAA;IACtD,eAAe,EAAE,OAAO,CAAA;IACxB,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAA;IACpD,WAAW,EAAE,OAAO,CAAA;IACpB,kBAAkB,EAAE;QAClB,MAAM,EAAE,MAAM,CAAA;QACd,KAAK,EAAE,MAAM,CAAA;KACd,CAAA;IACD,eAAe,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC,iBAAiB,CAAC,CAAA;IACrE,QAAQ,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,MAAM,GAAG,IAAI,CAAC,CAAA;IAChD,iBAAiB,EAAE,QAAQ,GAAG,OAAO,CAAA;IACrC,aAAa,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAA;IAC5C,aAAa,EAAE,CAAC,UAAU,EAAE,iBAAiB,CAAC,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,KAAK,IAAI,CAAA;IACrF,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC,kBAAkB,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAA;IAC7C,qBAAqB,EAAE,CAAC,IAAI,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IACxE,oBAAoB,EAAE,CAAC,iBAAiB,EAAE,QAAQ,GAAG,OAAO,KAAK,IAAI,CAAA;IACrE,OAAO,EAAE,QAAQ,CAAC,iBAAiB,CAAC,CAAA;IACpC,kBAAkB,EAAE,CAAC,QAAQ,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IAChE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/B,IAAI,EAAE;QACJ,MAAM,EAAE,MAAM,CAAA;QACd,KAAK,EAAE,MAAM,CAAA;KACd,CAAA;IACD,eAAe,EAAE;QACf,CAAC,EAAE,MAAM,CAAA;QACT,CAAC,EAAE,MAAM,CAAA;KACV,CAAA;IACD,GAAG,EAAE,MAAM,GAAG,SAAS,CAAA;IACvB,IAAI,EAAE,MAAM,CAAA;CACb;AAED,eAAO,MAAM,kBAAkB,iDAmC7B,CAAA;AAEF,eAAO,MAAM,qBAAqB,8BAAuC,CAAA"}

package/dist/views/LivePreview/Context/context.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/views/LivePreview/Context/context.ts"],"sourcesContent":["import type { LivePreviewConfig } from 'payload/config'\nimport type { fieldSchemaToJSON } from 'payload/utilities'\nimport type { Dispatch } from 'react'\n\nimport { createContext, useContext } from 'react'\n\nimport type { usePopupWindow } from '../usePopupWindow.js'\nimport type { SizeReducerAction } from './sizeReducer.js'\n\nexport interface LivePreviewContextType {\n  appIsReady: boolean\n  breakpoint: LivePreviewConfig['breakpoints'][number]['name']\n  breakpoints: LivePreviewConfig['breakpoints']\n  fieldSchemaJSON?: ReturnType<typeof fieldSchemaToJSON>\n  iframeHasLoaded: boolean\n  iframeRef: React.RefObject<HTMLIFrameElement>\n  isPopupOpen: boolean\n  measuredDeviceSize: {\n    height: number\n    width: number\n  }\n  openPopupWindow: ReturnType<typeof usePopupWindow>['openPopupWindow']\n  popupRef?: React.MutableRefObject<Window | null>\n  previewWindowType: 'iframe' | 'popup'\n  setAppIsReady: (appIsReady: boolean) => void\n  setBreakpoint: (breakpoint: LivePreviewConfig['breakpoints'][number]['name']) => void\n  setHeight: (height: number) => void\n  setIframeHasLoaded: (loaded: boolean) => void\n  setMeasuredDeviceSize: (size: { height: number; width: number }) => void\n  setPreviewWindowType: (previewWindowType: 'iframe' | 'popup') => void\n  setSize: Dispatch<SizeReducerAction>\n  setToolbarPosition: (position: { x: number; y: number }) => void\n  setWidth: (width: number) => void\n  setZoom: (zoom: number) => void\n  size: {\n    height: number\n    width: number\n  }\n  toolbarPosition: {\n    x: number\n    y: number\n  }\n  url: string | undefined\n  zoom: number\n}\n\nexport const LivePreviewContext = createContext<LivePreviewContextType>({\n  appIsReady: false,\n  breakpoint: undefined,\n  breakpoints: undefined,\n  fieldSchemaJSON: undefined,\n  iframeHasLoaded: false,\n  iframeRef: undefined,\n  isPopupOpen: false,\n  measuredDeviceSize: {\n    height: 0,\n    width: 0,\n  },\n  openPopupWindow: () => {},\n  popupRef: undefined,\n  previewWindowType: 'iframe',\n  setAppIsReady: () => {},\n  setBreakpoint: () => {},\n  setHeight: () => {},\n  setIframeHasLoaded: () => {},\n  setMeasuredDeviceSize: () => {},\n  setPreviewWindowType: () => {},\n  setSize: () => {},\n  setToolbarPosition: () => {},\n  setWidth: () => {},\n  setZoom: () => {},\n  size: {\n    height: 0,\n    width: 0,\n  },\n  toolbarPosition: {\n    x: 0,\n    y: 0,\n  },\n  url: undefined,\n  zoom: 1,\n})\n\nexport const useLivePreviewContext = () => useContext(LivePreviewContext)\n"],"names":["createContext","useContext","LivePreviewContext","appIsReady","breakpoint","undefined","breakpoints","fieldSchemaJSON","iframeHasLoaded","iframeRef","isPopupOpen","measuredDeviceSize","height","width","openPopupWindow","popupRef","previewWindowType","setAppIsReady","setBreakpoint","setHeight","setIframeHasLoaded","setMeasuredDeviceSize","setPreviewWindowType","setSize","setToolbarPosition","setWidth","setZoom","size","toolbarPosition","x","y","url","zoom","useLivePreviewContext"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAIA,SAASA,aAAa,EAAEC,UAAU,QAAQ,QAAO;AA0CjD,OAAO,MAAMC,qBAAqBF,cAAsC;IACtEG,YAAY;IACZC,YAAYC;IACZC,aAAaD;IACbE,iBAAiBF;IACjBG,iBAAiB;IACjBC,WAAWJ;IACXK,aAAa;IACbC,oBAAoB;QAClBC,QAAQ;QACRC,OAAO;IACT;IACAC,iBAAiB,KAAO;IACxBC,UAAUV;IACVW,mBAAmB;IACnBC,eAAe,KAAO;IACtBC,eAAe,KAAO;IACtBC,WAAW,KAAO;IAClBC,oBAAoB,KAAO;IAC3BC,uBAAuB,KAAO;IAC9BC,sBAAsB,KAAO;IAC7BC,SAAS,KAAO;IAChBC,oBAAoB,KAAO;IAC3BC,UAAU,KAAO;IACjBC,SAAS,KAAO;IAChBC,MAAM;QACJf,QAAQ;QACRC,OAAO;IACT;IACAe,iBAAiB;QACfC,GAAG;QACHC,GAAG;IACL;IACAC,KAAK1B;IACL2B,MAAM;AACR,GAAE;AAEF,OAAO,MAAMC,wBAAwB,IAAMhC,WAAWC,oBAAmB"}
+{"version":3,"sources":["../../../../src/views/LivePreview/Context/context.ts"],"sourcesContent":["import type { LivePreviewConfig } from 'payload/config'\nimport type { fieldSchemaToJSON } from 'payload/utilities'\nimport type { Dispatch } from 'react'\n\nimport { createContext, useContext } from 'react'\n\nimport type { usePopupWindow } from '../usePopupWindow.js'\nimport type { SizeReducerAction } from './sizeReducer.js'\n\nexport interface LivePreviewContextType {\n  appIsReady: boolean\n  breakpoint: LivePreviewConfig['breakpoints'][number]['name']\n  breakpoints: LivePreviewConfig['breakpoints']\n  fieldSchemaJSON?: ReturnType<typeof fieldSchemaToJSON>\n  iframeHasLoaded: boolean\n  iframeRef: React.RefObject<HTMLIFrameElement | null>\n  isPopupOpen: boolean\n  measuredDeviceSize: {\n    height: number\n    width: number\n  }\n  openPopupWindow: ReturnType<typeof usePopupWindow>['openPopupWindow']\n  popupRef?: React.MutableRefObject<Window | null>\n  previewWindowType: 'iframe' | 'popup'\n  setAppIsReady: (appIsReady: boolean) => void\n  setBreakpoint: (breakpoint: LivePreviewConfig['breakpoints'][number]['name']) => void\n  setHeight: (height: number) => void\n  setIframeHasLoaded: (loaded: boolean) => void\n  setMeasuredDeviceSize: (size: { height: number; width: number }) => void\n  setPreviewWindowType: (previewWindowType: 'iframe' | 'popup') => void\n  setSize: Dispatch<SizeReducerAction>\n  setToolbarPosition: (position: { x: number; y: number }) => void\n  setWidth: (width: number) => void\n  setZoom: (zoom: number) => void\n  size: {\n    height: number\n    width: number\n  }\n  toolbarPosition: {\n    x: number\n    y: number\n  }\n  url: string | undefined\n  zoom: number\n}\n\nexport const LivePreviewContext = createContext<LivePreviewContextType>({\n  appIsReady: false,\n  breakpoint: undefined,\n  breakpoints: undefined,\n  fieldSchemaJSON: undefined,\n  iframeHasLoaded: false,\n  iframeRef: undefined,\n  isPopupOpen: false,\n  measuredDeviceSize: {\n    height: 0,\n    width: 0,\n  },\n  openPopupWindow: () => {},\n  popupRef: undefined,\n  previewWindowType: 'iframe',\n  setAppIsReady: () => {},\n  setBreakpoint: () => {},\n  setHeight: () => {},\n  setIframeHasLoaded: () => {},\n  setMeasuredDeviceSize: () => {},\n  setPreviewWindowType: () => {},\n  setSize: () => {},\n  setToolbarPosition: () => {},\n  setWidth: () => {},\n  setZoom: () => {},\n  size: {\n    height: 0,\n    width: 0,\n  },\n  toolbarPosition: {\n    x: 0,\n    y: 0,\n  },\n  url: undefined,\n  zoom: 1,\n})\n\nexport const useLivePreviewContext = () => useContext(LivePreviewContext)\n"],"names":["createContext","useContext","LivePreviewContext","appIsReady","breakpoint","undefined","breakpoints","fieldSchemaJSON","iframeHasLoaded","iframeRef","isPopupOpen","measuredDeviceSize","height","width","openPopupWindow","popupRef","previewWindowType","setAppIsReady","setBreakpoint","setHeight","setIframeHasLoaded","setMeasuredDeviceSize","setPreviewWindowType","setSize","setToolbarPosition","setWidth","setZoom","size","toolbarPosition","x","y","url","zoom","useLivePreviewContext"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAIA,SAASA,aAAa,EAAEC,UAAU,QAAQ,QAAO;AA0CjD,OAAO,MAAMC,qBAAqBF,cAAsC;IACtEG,YAAY;IACZC,YAAYC;IACZC,aAAaD;IACbE,iBAAiBF;IACjBG,iBAAiB;IACjBC,WAAWJ;IACXK,aAAa;IACbC,oBAAoB;QAClBC,QAAQ;QACRC,OAAO;IACT;IACAC,iBAAiB,KAAO;IACxBC,UAAUV;IACVW,mBAAmB;IACnBC,eAAe,KAAO;IACtBC,eAAe,KAAO;IACtBC,WAAW,KAAO;IAClBC,oBAAoB,KAAO;IAC3BC,uBAAuB,KAAO;IAC9BC,sBAAsB,KAAO;IAC7BC,SAAS,KAAO;IAChBC,oBAAoB,KAAO;IAC3BC,UAAU,KAAO;IACjBC,SAAS,KAAO;IAChBC,MAAM;QACJf,QAAQ;QACRC,OAAO;IACT;IACAe,iBAAiB;QACfC,GAAG;QACHC,GAAG;IACL;IACAC,KAAK1B;IACL2B,MAAM;AACR,GAAE;AAEF,OAAO,MAAMC,wBAAwB,IAAMhC,WAAWC,oBAAmB"}

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

@@ -1,4 +1,5 @@
 'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { DndContext } from '@dnd-kit/core';
 import { fieldSchemaToJSON } from 'payload/utilities';
 import React, { useCallback, useEffect, useState } from 'react';
@@ -116,7 +117,7 @@ export const LivePreviewProvider = ({ breakpoints, children, fieldSchema, isPopu
         isPopupOpen,
         handleWindowChange
     ]);
-    return /*#__PURE__*/ React.createElement(LivePreviewContext.Provider, {
+    return /*#__PURE__*/ _jsx(LivePreviewContext.Provider, {
         value: {
             appIsReady,
             breakpoint,
@@ -143,11 +144,13 @@ export const LivePreviewProvider = ({ breakpoints, children, fieldSchema, isPopu
             toolbarPosition: position,
             url,
             zoom
-        }
-    }, /*#__PURE__*/ React.createElement(DndContext, {
-        collisionDetection: customCollisionDetection,
-        onDragEnd: handleDragEnd
-    }, listeningForMessages && children));
+        },
+        children: /*#__PURE__*/ _jsx(DndContext, {
+            collisionDetection: customCollisionDetection,
+            onDragEnd: handleDragEnd,
+            children: listeningForMessages && children
+        })
+    });
 };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/views/LivePreview/Context/index.tsx"],"sourcesContent":["'use client'\nimport type { LivePreviewConfig } from 'payload/config'\nimport type { ClientFieldConfig, Field } from 'payload/types'\n\nimport { DndContext } from '@dnd-kit/core'\nimport { fieldSchemaToJSON } from 'payload/utilities'\nimport React, { useCallback, useEffect, useState } from 'react'\n\nimport type { usePopupWindow } from '../usePopupWindow.js'\n\nimport { customCollisionDetection } from './collisionDetection.js'\nimport { LivePreviewContext } from './context.js'\nimport { sizeReducer } from './sizeReducer.js'\n\nexport type LivePreviewProviderProps = {\n  appIsReady?: boolean\n  breakpoints?: LivePreviewConfig['breakpoints']\n  children: React.ReactNode\n  deviceSize?: {\n    height: number\n    width: number\n  }\n  fieldSchema: ClientFieldConfig[]\n  isPopupOpen?: boolean\n  openPopupWindow?: ReturnType<typeof usePopupWindow>['openPopupWindow']\n  popupRef?: React.MutableRefObject<Window>\n  url?: string\n}\n\nexport const LivePreviewProvider: React.FC<LivePreviewProviderProps> = ({\n  breakpoints,\n  children,\n  fieldSchema,\n  isPopupOpen,\n  openPopupWindow,\n  popupRef,\n  url,\n}) => {\n  const [previewWindowType, setPreviewWindowType] = useState<'iframe' | 'popup'>('iframe')\n\n  const [appIsReady, setAppIsReady] = useState(false)\n  const [listeningForMessages, setListeningForMessages] = useState(false)\n\n  const iframeRef = React.useRef<HTMLIFrameElement>(null)\n\n  const [iframeHasLoaded, setIframeHasLoaded] = useState(false)\n\n  const [zoom, setZoom] = useState(1)\n\n  const [position, setPosition] = useState({ x: 0, y: 0 })\n\n  const [size, setSize] = React.useReducer(sizeReducer, { height: 0, width: 0 })\n\n  const [measuredDeviceSize, setMeasuredDeviceSize] = useState({\n    height: 0,\n    width: 0,\n  })\n\n  const [breakpoint, setBreakpoint] =\n    React.useState<LivePreviewConfig['breakpoints'][0]['name']>('responsive')\n\n  const [fieldSchemaJSON] = useState(() => {\n    return fieldSchemaToJSON(fieldSchema)\n  })\n\n  // The toolbar needs to freely drag and drop around the page\n  const handleDragEnd = (ev) => {\n    // only update position if the toolbar is completely within the preview area\n    // otherwise reset it back to the previous position\n    // TODO: reset to the nearest edge of the preview area\n    if (ev.over && ev.over.id === 'live-preview-area') {\n      const newPos = {\n        x: position.x + ev.delta.x,\n        y: position.y + ev.delta.y,\n      }\n\n      setPosition(newPos)\n    } else {\n      // reset\n    }\n  }\n\n  const setWidth = useCallback(\n    (width) => {\n      setSize({ type: 'width', value: width })\n    },\n    [setSize],\n  )\n\n  const setHeight = useCallback(\n    (height) => {\n      setSize({ type: 'height', value: height })\n    },\n    [setSize],\n  )\n\n  // explicitly set new width and height when as new breakpoints are selected\n  // exclude `custom` breakpoint as it is handled by the `setWidth` and `setHeight` directly\n  useEffect(() => {\n    const foundBreakpoint = breakpoints?.find((bp) => bp.name === breakpoint)\n\n    if (\n      foundBreakpoint &&\n      breakpoint !== 'responsive' &&\n      breakpoint !== 'custom' &&\n      typeof foundBreakpoint?.width === 'number' &&\n      typeof foundBreakpoint?.height === 'number'\n    ) {\n      setSize({\n        type: 'reset',\n        value: {\n          height: foundBreakpoint.height,\n          width: foundBreakpoint.width,\n        },\n      })\n    }\n  }, [breakpoint, breakpoints])\n\n  // Receive the `ready` message from the popup window\n  // This indicates that the app is ready to receive `window.postMessage` events\n  // This is also the only cross-origin way of detecting when a popup window has loaded\n  // Unlike iframe elements which have an `onLoad` handler, there is no way to access `window.open` on popups\n  useEffect(() => {\n    const handleMessage = (event: MessageEvent) => {\n      if (\n        url?.startsWith(event.origin) &&\n        event.data &&\n        typeof event.data === 'object' &&\n        event.data.type === 'payload-live-preview'\n      ) {\n        if (event.data.ready) {\n          setAppIsReady(true)\n        }\n      }\n    }\n\n    window.addEventListener('message', handleMessage)\n\n    setListeningForMessages(true)\n\n    return () => {\n      window.removeEventListener('message', handleMessage)\n    }\n  }, [url, listeningForMessages])\n\n  const handleWindowChange = useCallback(\n    (type: 'iframe' | 'popup') => {\n      setAppIsReady(false)\n      setPreviewWindowType(type)\n      if (type === 'popup') openPopupWindow()\n    },\n    [openPopupWindow],\n  )\n\n  // when the user closes the popup window, switch back to the iframe\n  // the `usePopupWindow` reports the `isPopupOpen` state for us to use here\n  useEffect(() => {\n    const newPreviewWindowType = isPopupOpen ? 'popup' : 'iframe'\n\n    if (newPreviewWindowType !== previewWindowType) {\n      handleWindowChange('iframe')\n    }\n  }, [previewWindowType, isPopupOpen, handleWindowChange])\n\n  return (\n    <LivePreviewContext.Provider\n      value={{\n        appIsReady,\n        breakpoint,\n        breakpoints,\n        fieldSchemaJSON,\n        iframeHasLoaded,\n        iframeRef,\n        isPopupOpen,\n        measuredDeviceSize,\n        openPopupWindow,\n        popupRef,\n        previewWindowType,\n        setAppIsReady,\n        setBreakpoint,\n        setHeight,\n        setIframeHasLoaded,\n        setMeasuredDeviceSize,\n        setPreviewWindowType: handleWindowChange,\n        setSize,\n        setToolbarPosition: setPosition,\n        setWidth,\n        setZoom,\n        size,\n        toolbarPosition: position,\n        url,\n        zoom,\n      }}\n    >\n      <DndContext collisionDetection={customCollisionDetection} onDragEnd={handleDragEnd}>\n        {listeningForMessages && children}\n      </DndContext>\n    </LivePreviewContext.Provider>\n  )\n}\n"],"names":["DndContext","fieldSchemaToJSON","React","useCallback","useEffect","useState","customCollisionDetection","LivePreviewContext","sizeReducer","LivePreviewProvider","breakpoints","children","fieldSchema","isPopupOpen","openPopupWindow","popupRef","url","previewWindowType","setPreviewWindowType","appIsReady","setAppIsReady","listeningForMessages","setListeningForMessages","iframeRef","useRef","iframeHasLoaded","setIframeHasLoaded","zoom","setZoom","position","setPosition","x","y","size","setSize","useReducer","height","width","measuredDeviceSize","setMeasuredDeviceSize","breakpoint","setBreakpoint","fieldSchemaJSON","handleDragEnd","ev","over","id","newPos","delta","setWidth","type","value","setHeight","foundBreakpoint","find","bp","name","handleMessage","event","startsWith","origin","data","ready","window","addEventListener","removeEventListener","handleWindowChange","newPreviewWindowType","Provider","setToolbarPosition","toolbarPosition","collisionDetection","onDragEnd"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../../../../src/views/LivePreview/Context/index.tsx"],"sourcesContent":["'use client'\nimport type { LivePreviewConfig } from 'payload/config'\nimport type { ClientFieldConfig, Field } from 'payload/types'\n\nimport { DndContext } from '@dnd-kit/core'\nimport { fieldSchemaToJSON } from 'payload/utilities'\nimport React, { useCallback, useEffect, useState } from 'react'\n\nimport type { usePopupWindow } from '../usePopupWindow.js'\n\nimport { customCollisionDetection } from './collisionDetection.js'\nimport { LivePreviewContext } from './context.js'\nimport { sizeReducer } from './sizeReducer.js'\n\nexport type LivePreviewProviderProps = {\n  appIsReady?: boolean\n  breakpoints?: LivePreviewConfig['breakpoints']\n  children: React.ReactNode\n  deviceSize?: {\n    height: number\n    width: number\n  }\n  fieldSchema: ClientFieldConfig[]\n  isPopupOpen?: boolean\n  openPopupWindow?: ReturnType<typeof usePopupWindow>['openPopupWindow']\n  popupRef?: React.MutableRefObject<Window>\n  url?: string\n}\n\nexport const LivePreviewProvider: React.FC<LivePreviewProviderProps> = ({\n  breakpoints,\n  children,\n  fieldSchema,\n  isPopupOpen,\n  openPopupWindow,\n  popupRef,\n  url,\n}) => {\n  const [previewWindowType, setPreviewWindowType] = useState<'iframe' | 'popup'>('iframe')\n\n  const [appIsReady, setAppIsReady] = useState(false)\n  const [listeningForMessages, setListeningForMessages] = useState(false)\n\n  const iframeRef = React.useRef<HTMLIFrameElement>(null)\n\n  const [iframeHasLoaded, setIframeHasLoaded] = useState(false)\n\n  const [zoom, setZoom] = useState(1)\n\n  const [position, setPosition] = useState({ x: 0, y: 0 })\n\n  const [size, setSize] = React.useReducer(sizeReducer, { height: 0, width: 0 })\n\n  const [measuredDeviceSize, setMeasuredDeviceSize] = useState({\n    height: 0,\n    width: 0,\n  })\n\n  const [breakpoint, setBreakpoint] =\n    React.useState<LivePreviewConfig['breakpoints'][0]['name']>('responsive')\n\n  const [fieldSchemaJSON] = useState(() => {\n    return fieldSchemaToJSON(fieldSchema)\n  })\n\n  // The toolbar needs to freely drag and drop around the page\n  const handleDragEnd = (ev) => {\n    // only update position if the toolbar is completely within the preview area\n    // otherwise reset it back to the previous position\n    // TODO: reset to the nearest edge of the preview area\n    if (ev.over && ev.over.id === 'live-preview-area') {\n      const newPos = {\n        x: position.x + ev.delta.x,\n        y: position.y + ev.delta.y,\n      }\n\n      setPosition(newPos)\n    } else {\n      // reset\n    }\n  }\n\n  const setWidth = useCallback(\n    (width) => {\n      setSize({ type: 'width', value: width })\n    },\n    [setSize],\n  )\n\n  const setHeight = useCallback(\n    (height) => {\n      setSize({ type: 'height', value: height })\n    },\n    [setSize],\n  )\n\n  // explicitly set new width and height when as new breakpoints are selected\n  // exclude `custom` breakpoint as it is handled by the `setWidth` and `setHeight` directly\n  useEffect(() => {\n    const foundBreakpoint = breakpoints?.find((bp) => bp.name === breakpoint)\n\n    if (\n      foundBreakpoint &&\n      breakpoint !== 'responsive' &&\n      breakpoint !== 'custom' &&\n      typeof foundBreakpoint?.width === 'number' &&\n      typeof foundBreakpoint?.height === 'number'\n    ) {\n      setSize({\n        type: 'reset',\n        value: {\n          height: foundBreakpoint.height,\n          width: foundBreakpoint.width,\n        },\n      })\n    }\n  }, [breakpoint, breakpoints])\n\n  // Receive the `ready` message from the popup window\n  // This indicates that the app is ready to receive `window.postMessage` events\n  // This is also the only cross-origin way of detecting when a popup window has loaded\n  // Unlike iframe elements which have an `onLoad` handler, there is no way to access `window.open` on popups\n  useEffect(() => {\n    const handleMessage = (event: MessageEvent) => {\n      if (\n        url?.startsWith(event.origin) &&\n        event.data &&\n        typeof event.data === 'object' &&\n        event.data.type === 'payload-live-preview'\n      ) {\n        if (event.data.ready) {\n          setAppIsReady(true)\n        }\n      }\n    }\n\n    window.addEventListener('message', handleMessage)\n\n    setListeningForMessages(true)\n\n    return () => {\n      window.removeEventListener('message', handleMessage)\n    }\n  }, [url, listeningForMessages])\n\n  const handleWindowChange = useCallback(\n    (type: 'iframe' | 'popup') => {\n      setAppIsReady(false)\n      setPreviewWindowType(type)\n      if (type === 'popup') openPopupWindow()\n    },\n    [openPopupWindow],\n  )\n\n  // when the user closes the popup window, switch back to the iframe\n  // the `usePopupWindow` reports the `isPopupOpen` state for us to use here\n  useEffect(() => {\n    const newPreviewWindowType = isPopupOpen ? 'popup' : 'iframe'\n\n    if (newPreviewWindowType !== previewWindowType) {\n      handleWindowChange('iframe')\n    }\n  }, [previewWindowType, isPopupOpen, handleWindowChange])\n\n  return (\n    <LivePreviewContext.Provider\n      value={{\n        appIsReady,\n        breakpoint,\n        breakpoints,\n        fieldSchemaJSON,\n        iframeHasLoaded,\n        iframeRef,\n        isPopupOpen,\n        measuredDeviceSize,\n        openPopupWindow,\n        popupRef,\n        previewWindowType,\n        setAppIsReady,\n        setBreakpoint,\n        setHeight,\n        setIframeHasLoaded,\n        setMeasuredDeviceSize,\n        setPreviewWindowType: handleWindowChange,\n        setSize,\n        setToolbarPosition: setPosition,\n        setWidth,\n        setZoom,\n        size,\n        toolbarPosition: position,\n        url,\n        zoom,\n      }}\n    >\n      <DndContext collisionDetection={customCollisionDetection} onDragEnd={handleDragEnd}>\n        {listeningForMessages && children}\n      </DndContext>\n    </LivePreviewContext.Provider>\n  )\n}\n"],"names":["DndContext","fieldSchemaToJSON","React","useCallback","useEffect","useState","customCollisionDetection","LivePreviewContext","sizeReducer","LivePreviewProvider","breakpoints","children","fieldSchema","isPopupOpen","openPopupWindow","popupRef","url","previewWindowType","setPreviewWindowType","appIsReady","setAppIsReady","listeningForMessages","setListeningForMessages","iframeRef","useRef","iframeHasLoaded","setIframeHasLoaded","zoom","setZoom","position","setPosition","x","y","size","setSize","useReducer","height","width","measuredDeviceSize","setMeasuredDeviceSize","breakpoint","setBreakpoint","fieldSchemaJSON","handleDragEnd","ev","over","id","newPos","delta","setWidth","type","value","setHeight","foundBreakpoint","find","bp","name","handleMessage","event","startsWith","origin","data","ready","window","addEventListener","removeEventListener","handleWindowChange","newPreviewWindowType","Provider","setToolbarPosition","toolbarPosition","collisionDetection","onDragEnd"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

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

@@ -1,4 +1,5 @@
 'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useResize } from '@payloadcms/ui/hooks/useResize';
 import React, { useEffect } from 'react';
 import { useLivePreviewContext } from '../Context/context.js';
@@ -37,15 +38,16 @@ export const DeviceContainer = (props)=>{
         width = `${size?.width / (typeof zoom === 'number' ? zoom : 1)}px`;
         height = `${size?.height / (typeof zoom === 'number' ? zoom : 1)}px`;
     }
-    return /*#__PURE__*/ React.createElement("div", {
+    return /*#__PURE__*/ _jsx("div", {
         ref: deviceFrameRef,
         style: {
             height,
             margin,
             transform: `translate3d(${x}, 0, 0)`,
             width
-        }
-    }, children);
+        },
+        children: children
+    });
 };
 
 //# sourceMappingURL=index.js.map

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

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

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

@@ -1,4 +1,5 @@
 'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { useLivePreviewContext } from '../Context/context.js';
 export const DeviceContainer = (props)=>{
@@ -16,14 +17,15 @@ export const DeviceContainer = (props)=>{
             margin = '0 auto';
         }
     }
-    return /*#__PURE__*/ React.createElement("div", {
+    return /*#__PURE__*/ _jsx("div", {
         style: {
             height: foundBreakpoint && foundBreakpoint?.name !== 'responsive' ? `${size?.height / (typeof zoom === 'number' ? zoom : 1)}px` : typeof zoom === 'number' ? `${100 / zoom}%` : '100%',
             margin,
             transform: `translate3d(${x}, 0, 0)`,
             width: foundBreakpoint && foundBreakpoint?.name !== 'responsive' ? `${size?.width / (typeof zoom === 'number' ? zoom : 1)}px` : typeof zoom === 'number' ? `${100 / zoom}%` : '100%'
-        }
-    }, children);
+        },
+        children: children
+    });
 };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/views/LivePreview/DeviceContainer/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { useLivePreviewContext } from '../Context/context.js'\n\nexport const DeviceContainer: React.FC<{\n  children: React.ReactNode\n}> = (props) => {\n  const { children } = props\n\n  const { breakpoint, breakpoints, size, zoom } = useLivePreviewContext()\n\n  const foundBreakpoint = breakpoint && breakpoints?.find((bp) => bp.name === breakpoint)\n\n  let x = '0'\n  let margin = '0'\n\n  if (foundBreakpoint && breakpoint !== 'responsive') {\n    x = '-50%'\n\n    if (\n      typeof zoom === 'number' &&\n      typeof size.width === 'number' &&\n      typeof size.height === 'number'\n    ) {\n      const scaledWidth = size.width / zoom\n      const difference = scaledWidth - size.width\n      x = `${difference / 2}px`\n      margin = '0 auto'\n    }\n  }\n\n  return (\n    <div\n      style={{\n        height:\n          foundBreakpoint && foundBreakpoint?.name !== 'responsive'\n            ? `${size?.height / (typeof zoom === 'number' ? zoom : 1)}px`\n            : typeof zoom === 'number'\n              ? `${100 / zoom}%`\n              : '100%',\n        margin,\n        transform: `translate3d(${x}, 0, 0)`,\n        width:\n          foundBreakpoint && foundBreakpoint?.name !== 'responsive'\n            ? `${size?.width / (typeof zoom === 'number' ? zoom : 1)}px`\n            : typeof zoom === 'number'\n              ? `${100 / zoom}%`\n              : '100%',\n      }}\n    >\n      {children}\n    </div>\n  )\n}\n"],"names":["React","useLivePreviewContext","DeviceContainer","props","children","breakpoint","breakpoints","size","zoom","foundBreakpoint","find","bp","name","x","margin","width","height","scaledWidth","difference","div","style","transform"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,OAAOA,WAAW,QAAO;AAEzB,SAASC,qBAAqB,QAAQ,wBAAuB;AAE7D,OAAO,MAAMC,kBAER,CAACC;IACJ,MAAM,EAAEC,QAAQ,EAAE,GAAGD;IAErB,MAAM,EAAEE,UAAU,EAAEC,WAAW,EAAEC,IAAI,EAAEC,IAAI,EAAE,GAAGP;IAEhD,MAAMQ,kBAAkBJ,cAAcC,aAAaI,KAAK,CAACC,KAAOA,GAAGC,IAAI,KAAKP;IAE5E,IAAIQ,IAAI;IACR,IAAIC,SAAS;IAEb,IAAIL,mBAAmBJ,eAAe,cAAc;QAClDQ,IAAI;QAEJ,IACE,OAAOL,SAAS,YAChB,OAAOD,KAAKQ,KAAK,KAAK,YACtB,OAAOR,KAAKS,MAAM,KAAK,UACvB;YACA,MAAMC,cAAcV,KAAKQ,KAAK,GAAGP;YACjC,MAAMU,aAAaD,cAAcV,KAAKQ,KAAK;YAC3CF,IAAI,CAAC,EAAEK,aAAa,EAAE,EAAE,CAAC;YACzBJ,SAAS;QACX;IACF;IAEA,qBACE,oBAACK;QACCC,OAAO;YACLJ,QACEP,mBAAmBA,iBAAiBG,SAAS,eACzC,CAAC,EAAEL,MAAMS,SAAU,CAAA,OAAOR,SAAS,WAAWA,OAAO,CAAA,EAAG,EAAE,CAAC,GAC3D,OAAOA,SAAS,WACd,CAAC,EAAE,MAAMA,KAAK,CAAC,CAAC,GAChB;YACRM;YACAO,WAAW,CAAC,YAAY,EAAER,EAAE,OAAO,CAAC;YACpCE,OACEN,mBAAmBA,iBAAiBG,SAAS,eACzC,CAAC,EAAEL,MAAMQ,QAAS,CAAA,OAAOP,SAAS,WAAWA,OAAO,CAAA,EAAG,EAAE,CAAC,GAC1D,OAAOA,SAAS,WACd,CAAC,EAAE,MAAMA,KAAK,CAAC,CAAC,GAChB;QACV;OAECJ;AAGP,EAAC"}
+{"version":3,"sources":["../../../../src/views/LivePreview/DeviceContainer/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { useLivePreviewContext } from '../Context/context.js'\n\nexport const DeviceContainer: React.FC<{\n  children: React.ReactNode\n}> = (props) => {\n  const { children } = props\n\n  const { breakpoint, breakpoints, size, zoom } = useLivePreviewContext()\n\n  const foundBreakpoint = breakpoint && breakpoints?.find((bp) => bp.name === breakpoint)\n\n  let x = '0'\n  let margin = '0'\n\n  if (foundBreakpoint && breakpoint !== 'responsive') {\n    x = '-50%'\n\n    if (\n      typeof zoom === 'number' &&\n      typeof size.width === 'number' &&\n      typeof size.height === 'number'\n    ) {\n      const scaledWidth = size.width / zoom\n      const difference = scaledWidth - size.width\n      x = `${difference / 2}px`\n      margin = '0 auto'\n    }\n  }\n\n  return (\n    <div\n      style={{\n        height:\n          foundBreakpoint && foundBreakpoint?.name !== 'responsive'\n            ? `${size?.height / (typeof zoom === 'number' ? zoom : 1)}px`\n            : typeof zoom === 'number'\n              ? `${100 / zoom}%`\n              : '100%',\n        margin,\n        transform: `translate3d(${x}, 0, 0)`,\n        width:\n          foundBreakpoint && foundBreakpoint?.name !== 'responsive'\n            ? `${size?.width / (typeof zoom === 'number' ? zoom : 1)}px`\n            : typeof zoom === 'number'\n              ? `${100 / zoom}%`\n              : '100%',\n      }}\n    >\n      {children}\n    </div>\n  )\n}\n"],"names":["React","useLivePreviewContext","DeviceContainer","props","children","breakpoint","breakpoints","size","zoom","foundBreakpoint","find","bp","name","x","margin","width","height","scaledWidth","difference","div","style","transform"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AACA,OAAOA,WAAW,QAAO;AAEzB,SAASC,qBAAqB,QAAQ,wBAAuB;AAE7D,OAAO,MAAMC,kBAER,CAACC;IACJ,MAAM,EAAEC,QAAQ,EAAE,GAAGD;IAErB,MAAM,EAAEE,UAAU,EAAEC,WAAW,EAAEC,IAAI,EAAEC,IAAI,EAAE,GAAGP;IAEhD,MAAMQ,kBAAkBJ,cAAcC,aAAaI,KAAK,CAACC,KAAOA,GAAGC,IAAI,KAAKP;IAE5E,IAAIQ,IAAI;IACR,IAAIC,SAAS;IAEb,IAAIL,mBAAmBJ,eAAe,cAAc;QAClDQ,IAAI;QAEJ,IACE,OAAOL,SAAS,YAChB,OAAOD,KAAKQ,KAAK,KAAK,YACtB,OAAOR,KAAKS,MAAM,KAAK,UACvB;YACA,MAAMC,cAAcV,KAAKQ,KAAK,GAAGP;YACjC,MAAMU,aAAaD,cAAcV,KAAKQ,KAAK;YAC3CF,IAAI,CAAC,EAAEK,aAAa,EAAE,EAAE,CAAC;YACzBJ,SAAS;QACX;IACF;IAEA,qBACE,KAACK;QACCC,OAAO;YACLJ,QACEP,mBAAmBA,iBAAiBG,SAAS,eACzC,CAAC,EAAEL,MAAMS,SAAU,CAAA,OAAOR,SAAS,WAAWA,OAAO,CAAA,EAAG,EAAE,CAAC,GAC3D,OAAOA,SAAS,WACd,CAAC,EAAE,MAAMA,KAAK,CAAC,CAAC,GAChB;YACRM;YACAO,WAAW,CAAC,YAAY,EAAER,EAAE,OAAO,CAAC;YACpCE,OACEN,mBAAmBA,iBAAiBG,SAAS,eACzC,CAAC,EAAEL,MAAMQ,QAAS,CAAA,OAAOP,SAAS,WAAWA,OAAO,CAAA,EAAG,EAAE,CAAC,GAC1D,OAAOA,SAAS,WACd,CAAC,EAAE,MAAMA,KAAK,CAAC,CAAC,GAChB;QACV;kBAECJ;;AAGP,EAAC"}

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

@@ -1,11 +1,12 @@
 'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
 import React, { forwardRef } from 'react';
 import { useLivePreviewContext } from '../Context/context.js';
 const baseClass = 'live-preview-iframe';
 export const IFrame = /*#__PURE__*/ forwardRef((props, ref)=>{
     const { setIframeHasLoaded, url } = props;
     const { zoom } = useLivePreviewContext();
-    return /*#__PURE__*/ React.createElement("iframe", {
+    return /*#__PURE__*/ _jsx("iframe", {
         className: baseClass,
         onLoad: ()=>{
             setIframeHasLoaded(true);

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/views/LivePreview/IFrame/index.tsx"],"sourcesContent":["'use client'\nimport React, { forwardRef } from 'react'\n\nimport { useLivePreviewContext } from '../Context/context.js'\nimport './index.scss'\n\nconst baseClass = 'live-preview-iframe'\n\ntype Props = {\n  setIframeHasLoaded: (value: boolean) => void\n  url: string\n}\n\nexport const IFrame = forwardRef<HTMLIFrameElement, Props>((props, ref) => {\n  const { setIframeHasLoaded, url } = props\n\n  const { zoom } = useLivePreviewContext()\n\n  return (\n    <iframe\n      className={baseClass}\n      onLoad={() => {\n        setIframeHasLoaded(true)\n      }}\n      ref={ref}\n      src={url}\n      style={{\n        transform: typeof zoom === 'number' ? `scale(${zoom}) ` : undefined,\n      }}\n      title={url}\n    />\n  )\n})\n"],"names":["React","forwardRef","useLivePreviewContext","baseClass","IFrame","props","ref","setIframeHasLoaded","url","zoom","iframe","className","onLoad","src","style","transform","undefined","title"],"rangeMappings":";;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,OAAOA,SAASC,UAAU,QAAQ,QAAO;AAEzC,SAASC,qBAAqB,QAAQ,wBAAuB;AAG7D,MAAMC,YAAY;AAOlB,OAAO,MAAMC,uBAASH,WAAqC,CAACI,OAAOC;IACjE,MAAM,EAAEC,kBAAkB,EAAEC,GAAG,EAAE,GAAGH;IAEpC,MAAM,EAAEI,IAAI,EAAE,GAAGP;IAEjB,qBACE,oBAACQ;QACCC,WAAWR;QACXS,QAAQ;YACNL,mBAAmB;QACrB;QACAD,KAAKA;QACLO,KAAKL;QACLM,OAAO;YACLC,WAAW,OAAON,SAAS,WAAW,CAAC,MAAM,EAAEA,KAAK,EAAE,CAAC,GAAGO;QAC5D;QACAC,OAAOT;;AAGb,GAAE"}
+{"version":3,"sources":["../../../../src/views/LivePreview/IFrame/index.tsx"],"sourcesContent":["'use client'\nimport React, { forwardRef } from 'react'\n\nimport { useLivePreviewContext } from '../Context/context.js'\nimport './index.scss'\n\nconst baseClass = 'live-preview-iframe'\n\ntype Props = {\n  setIframeHasLoaded: (value: boolean) => void\n  url: string\n}\n\nexport const IFrame = forwardRef<HTMLIFrameElement, Props>((props, ref) => {\n  const { setIframeHasLoaded, url } = props\n\n  const { zoom } = useLivePreviewContext()\n\n  return (\n    <iframe\n      className={baseClass}\n      onLoad={() => {\n        setIframeHasLoaded(true)\n      }}\n      ref={ref}\n      src={url}\n      style={{\n        transform: typeof zoom === 'number' ? `scale(${zoom}) ` : undefined,\n      }}\n      title={url}\n    />\n  )\n})\n"],"names":["React","forwardRef","useLivePreviewContext","baseClass","IFrame","props","ref","setIframeHasLoaded","url","zoom","iframe","className","onLoad","src","style","transform","undefined","title"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AACA,OAAOA,SAASC,UAAU,QAAQ,QAAO;AAEzC,SAASC,qBAAqB,QAAQ,wBAAuB;AAG7D,MAAMC,YAAY;AAOlB,OAAO,MAAMC,uBAASH,WAAqC,CAACI,OAAOC;IACjE,MAAM,EAAEC,kBAAkB,EAAEC,GAAG,EAAE,GAAGH;IAEpC,MAAM,EAAEI,IAAI,EAAE,GAAGP;IAEjB,qBACE,KAACQ;QACCC,WAAWR;QACXS,QAAQ;YACNL,mBAAmB;QACrB;QACAD,KAAKA;QACLO,KAAKL;QACLM,OAAO;YACLC,WAAW,OAAON,SAAS,WAAW,CAAC,MAAM,EAAEA,KAAK,EAAE,CAAC,GAAGO;QAC5D;QACAC,OAAOT;;AAGb,GAAE"}

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

@@ -1,4 +1,5 @@
 'use client';
+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';
@@ -13,7 +14,7 @@ export const LivePreview = (props)=>{
     const { appIsReady, iframeHasLoaded, iframeRef, popupRef, previewWindowType, setIframeHasLoaded, url } = useLivePreviewContext();
     const { mostRecentUpdate } = useDocumentEvents();
     const { breakpoint, fieldSchemaJSON } = useLivePreviewContext();
-    const prevWindowType = React.useRef();
+    const prevWindowType = React.useRef(undefined);
     const [fields] = useAllFormFields();
     // For client-side apps, send data through `window.postMessage`
     // The preview could either be an iframe embedded on the page
@@ -79,22 +80,32 @@ export const LivePreview = (props)=>{
         url
     ]);
     if (previewWindowType === 'iframe') {
-        return /*#__PURE__*/ React.createElement("div", {
+        return /*#__PURE__*/ _jsx("div", {
             className: [
                 baseClass,
                 breakpoint && breakpoint !== 'responsive' && `${baseClass}--has-breakpoint`
-            ].filter(Boolean).join(' ')
-        }, /*#__PURE__*/ React.createElement("div", {
-            className: `${baseClass}__wrapper`
-        }, /*#__PURE__*/ React.createElement(LivePreviewToolbar, props), /*#__PURE__*/ React.createElement("div", {
-            className: `${baseClass}__main`
-        }, /*#__PURE__*/ React.createElement(DeviceContainer, null, url ? /*#__PURE__*/ React.createElement(IFrame, {
-            ref: iframeRef,
-            setIframeHasLoaded: setIframeHasLoaded,
-            url: url
-        }) : /*#__PURE__*/ React.createElement(ShimmerEffect, {
-            height: "100%"
-        })))));
+            ].filter(Boolean).join(' '),
+            children: /*#__PURE__*/ _jsxs("div", {
+                className: `${baseClass}__wrapper`,
+                children: [
+                    /*#__PURE__*/ _jsx(LivePreviewToolbar, {
+                        ...props
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: `${baseClass}__main`,
+                        children: /*#__PURE__*/ _jsx(DeviceContainer, {
+                            children: url ? /*#__PURE__*/ _jsx(IFrame, {
+                                ref: iframeRef,
+                                setIframeHasLoaded: setIframeHasLoaded,
+                                url: url
+                            }) : /*#__PURE__*/ _jsx(ShimmerEffect, {
+                                height: "100%"
+                            })
+                        })
+                    })
+                ]
+            })
+        });
     }
 };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/views/LivePreview/Preview/index.tsx"],"sourcesContent":["'use client'\n\nimport type { EditViewProps } from 'payload/types'\n\nimport { ShimmerEffect } from '@payloadcms/ui/elements/ShimmerEffect'\nimport { useAllFormFields } from '@payloadcms/ui/forms/Form'\nimport { useDocumentEvents } from '@payloadcms/ui/providers/DocumentEvents'\nimport { reduceFieldsToValues } from '@payloadcms/ui/utilities/reduceFieldsToValues'\nimport React, { useEffect } from 'react'\n\nimport { useLivePreviewContext } from '../Context/context.js'\nimport { DeviceContainer } from '../Device/index.js'\nimport { IFrame } from '../IFrame/index.js'\nimport { LivePreviewToolbar } from '../Toolbar/index.js'\nimport './index.scss'\n\nconst baseClass = 'live-preview-window'\n\nexport const LivePreview: React.FC<EditViewProps> = (props) => {\n  const {\n    appIsReady,\n    iframeHasLoaded,\n    iframeRef,\n    popupRef,\n    previewWindowType,\n    setIframeHasLoaded,\n    url,\n  } = useLivePreviewContext()\n\n  const { mostRecentUpdate } = useDocumentEvents()\n\n  const { breakpoint, fieldSchemaJSON } = useLivePreviewContext()\n\n  const prevWindowType =\n    React.useRef<ReturnType<typeof useLivePreviewContext>['previewWindowType']>()\n\n  const [fields] = useAllFormFields()\n\n  // 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"}
+{"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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"}