@payloadcms/next 3.0.0-beta.66 → 3.0.0-beta.68

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

@@ -0,0 +1,41 @@
+@import '../../../scss/styles.scss';
+
+.live-preview-toolbar {
+  display: flex;
+  background-color: var(--theme-bg);
+  color: var(--theme-text);
+  height: calc(var(--base) * 1.75);
+  align-items: center;
+  flex-shrink: 0;
+
+  &--static {
+    position: relative;
+    width: 100%;
+    justify-content: center;
+    border-bottom: 1px solid var(--theme-elevation-100);
+  }
+
+  &--draggable {
+    @include shadow-lg;
+    position: absolute;
+    top: 0;
+    left: 0;
+    margin: 0;
+    border-radius: 4px;
+  }
+
+  &__drag-handle {
+    background: transparent;
+    border: 0;
+    padding: 0;
+    cursor: grab;
+
+    .icon--drag-handle .fill {
+      fill: var(--theme-elevation-300);
+    }
+
+    &:active {
+      cursor: grabbing;
+    }
+  }
+}

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import './index.scss';
+export declare const ToolbarArea: React.FC<{
+    children: React.ReactNode;
+}>;
+//# sourceMappingURL=index.d.ts.map

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

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

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

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

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

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

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

@@ -0,0 +1,4 @@
+.toolbar-area {
+  width: 100%;
+  height: 100%;
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.client.d.ts","sourceRoot":"","sources":["../../../src/views/LivePreview/index.client.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAIV,IAAI,EACJ,iBAAiB,EAClB,MAAM,SAAS,CAAA;AAgBhB,OAAO,KAAgC,MAAM,OAAO,CAAA;AAQpD,OAAO,cAAc,CAAA;AAiLrB,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC;IACvC,WAAW,EAAE,iBAAiB,CAAC,aAAa,CAAC,CAAA;IAC7C,WAAW,EAAE,IAAI,CAAA;IACjB,GAAG,EAAE,MAAM,CAAA;CACZ,CA2DA,CAAA"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/views/LivePreview/index.client.tsx"],"sourcesContent":["'use client'\nimport type { FormProps } from '@payloadcms/ui'\nimport type { FieldMap } from '@payloadcms/ui/utilities/buildComponentMap'\nimport type {\n  ClientCollectionConfig,\n  ClientConfig,\n  ClientGlobalConfig,\n  Data,\n  LivePreviewConfig,\n} from 'payload'\n\nimport {\n  DocumentControls,\n  DocumentFields,\n  Form,\n  OperationProvider,\n  SetViewActions,\n  useAuth,\n  useComponentMap,\n  useConfig,\n  useDocumentEvents,\n  useDocumentInfo,\n  useTranslation,\n} from '@payloadcms/ui'\nimport { getFormState } from '@payloadcms/ui/shared'\nimport React, { Fragment, useCallback } from 'react'\n\nimport { LeaveWithoutSaving } from '../../elements/LeaveWithoutSaving/index.js'\nimport { SetDocumentStepNav } from '../Edit/Default/SetDocumentStepNav/index.js'\nimport { SetDocumentTitle } from '../Edit/Default/SetDocumentTitle/index.js'\nimport { useLivePreviewContext } from './Context/context.js'\nimport { LivePreviewProvider } from './Context/index.js'\nimport { LivePreview } from './Preview/index.js'\nimport './index.scss'\nimport { usePopupWindow } from './usePopupWindow.js'\n\nconst baseClass = 'live-preview'\n\ntype Props = {\n  apiRoute: string\n  collectionConfig?: ClientCollectionConfig\n  config: ClientConfig\n  fieldMap: FieldMap\n  globalConfig?: ClientGlobalConfig\n  schemaPath: string\n  serverURL: string\n}\n\nconst PreviewView: React.FC<Props> = ({\n  apiRoute,\n  collectionConfig,\n  config,\n  fieldMap,\n  globalConfig,\n  schemaPath,\n  serverURL,\n}) => {\n  const {\n    id,\n    AfterDocument,\n    AfterFields,\n    BeforeDocument,\n    BeforeFields,\n    action,\n    apiURL,\n    collectionSlug,\n    disableActions,\n    disableLeaveWithoutSaving,\n    docPermissions,\n    getDocPreferences,\n    globalSlug,\n    hasPublishPermission,\n    hasSavePermission,\n    initialData,\n    initialState,\n    isEditing,\n    isInitializing,\n    onSave: onSaveFromProps,\n  } = useDocumentInfo()\n\n  const operation = id ? 'update' : 'create'\n\n  const {\n    admin: { user: userSlug },\n  } = useConfig()\n  const { t } = useTranslation()\n  const { previewWindowType } = useLivePreviewContext()\n  const { refreshCookieAsync, user } = useAuth()\n  const { reportUpdate } = useDocumentEvents()\n\n  const onSave = useCallback(\n    (json) => {\n      reportUpdate({\n        id,\n        entitySlug: collectionSlug,\n        updatedAt: json?.result?.updatedAt || new Date().toISOString(),\n      })\n\n      // If we're editing the doc of the logged-in user,\n      // Refresh the cookie to get new permissions\n      if (user && collectionSlug === userSlug && id === user.id) {\n        void refreshCookieAsync()\n      }\n\n      if (typeof onSaveFromProps === 'function') {\n        void onSaveFromProps({\n          ...json,\n          operation: id ? 'update' : 'create',\n        })\n      }\n    },\n    [collectionSlug, id, onSaveFromProps, refreshCookieAsync, reportUpdate, user, userSlug],\n  )\n\n  const onChange: FormProps['onChange'][0] = useCallback(\n    async ({ formState: prevFormState }) => {\n      const docPreferences = await getDocPreferences()\n\n      return getFormState({\n        apiRoute,\n        body: {\n          id,\n          docPreferences,\n          formState: prevFormState,\n          operation,\n          schemaPath,\n        },\n        serverURL,\n      })\n    },\n    [serverURL, apiRoute, id, operation, schemaPath, getDocPreferences],\n  )\n\n  return (\n    <Fragment>\n      <OperationProvider operation={operation}>\n        <Form\n          action={action}\n          className={`${baseClass}__form`}\n          disabled={!hasSavePermission}\n          initialState={initialState}\n          isInitializing={isInitializing}\n          method={id ? 'PATCH' : 'POST'}\n          onChange={[onChange]}\n          onSuccess={onSave}\n        >\n          {((collectionConfig &&\n            !(collectionConfig.versions?.drafts && collectionConfig.versions?.drafts?.autosave)) ||\n            (globalConfig &&\n              !(globalConfig.versions?.drafts && globalConfig.versions?.drafts?.autosave))) &&\n            !disableLeaveWithoutSaving && <LeaveWithoutSaving />}\n          <SetDocumentStepNav\n            collectionSlug={collectionSlug}\n            globalLabel={globalConfig?.label}\n            globalSlug={globalSlug}\n            id={id}\n            pluralLabel={collectionConfig ? collectionConfig?.labels?.plural : undefined}\n            useAsTitle={collectionConfig ? collectionConfig?.admin?.useAsTitle : undefined}\n            view={t('general:livePreview')}\n          />\n          <SetDocumentTitle\n            collectionConfig={collectionConfig}\n            config={config}\n            fallback={id?.toString() || ''}\n            globalConfig={globalConfig}\n          />\n          <DocumentControls\n            apiURL={apiURL}\n            data={initialData}\n            disableActions={disableActions}\n            hasPublishPermission={hasPublishPermission}\n            hasSavePermission={hasSavePermission}\n            id={id}\n            isEditing={isEditing}\n            permissions={docPermissions}\n            slug={collectionConfig?.slug || globalConfig?.slug}\n          />\n          <div\n            className={[baseClass, previewWindowType === 'popup' && `${baseClass}--detached`]\n              .filter(Boolean)\n              .join(' ')}\n          >\n            <div\n              className={[\n                `${baseClass}__main`,\n                previewWindowType === 'popup' && `${baseClass}__main--popup-open`,\n              ]\n                .filter(Boolean)\n                .join(' ')}\n            >\n              {BeforeDocument}\n              <DocumentFields\n                AfterFields={AfterFields}\n                BeforeFields={BeforeFields}\n                docPermissions={docPermissions}\n                fieldMap={fieldMap}\n                forceSidebarWrap\n                readOnly={!hasSavePermission}\n                schemaPath={collectionSlug || globalSlug}\n              />\n              {AfterDocument}\n            </div>\n            <LivePreview collectionSlug={collectionSlug} globalSlug={globalSlug} />\n          </div>\n        </Form>\n      </OperationProvider>\n    </Fragment>\n  )\n}\n\nexport const LivePreviewClient: React.FC<{\n  breakpoints: LivePreviewConfig['breakpoints']\n  initialData: Data\n  url: string\n}> = (props) => {\n  const { breakpoints, url } = props\n  const { collectionSlug, globalSlug } = useDocumentInfo()\n\n  const config = useConfig()\n\n  const { isPopupOpen, openPopupWindow, popupRef } = usePopupWindow({\n    eventType: 'payload-live-preview',\n    url,\n  })\n\n  const {\n    collections,\n    globals,\n    routes: { api: apiRoute },\n    serverURL,\n  } = config\n\n  const collectionConfig =\n    collectionSlug && collections.find((collection) => collection.slug === collectionSlug)\n\n  const globalConfig = globalSlug && globals.find((global) => global.slug === globalSlug)\n\n  const schemaPath = collectionSlug || globalSlug\n\n  const { getComponentMap } = useComponentMap()\n\n  const componentMap = getComponentMap({ collectionSlug, globalSlug })\n\n  const { getFieldMap } = useComponentMap()\n\n  const fieldMap = getFieldMap({\n    collectionSlug: collectionConfig?.slug,\n    globalSlug: globalConfig?.slug,\n  })\n\n  return (\n    <Fragment>\n      <SetViewActions actions={componentMap?.actionsMap?.Edit?.LivePreview} />\n      <LivePreviewProvider\n        breakpoints={breakpoints}\n        fieldSchema={collectionConfig?.fields || globalConfig?.fields}\n        isPopupOpen={isPopupOpen}\n        openPopupWindow={openPopupWindow}\n        popupRef={popupRef}\n        url={url}\n      >\n        <PreviewView\n          apiRoute={apiRoute}\n          collectionConfig={collectionConfig}\n          config={config}\n          fieldMap={fieldMap}\n          globalConfig={globalConfig}\n          schemaPath={schemaPath}\n          serverURL={serverURL}\n        />\n      </LivePreviewProvider>\n    </Fragment>\n  )\n}\n"],"names":["DocumentControls","DocumentFields","Form","OperationProvider","SetViewActions","useAuth","useComponentMap","useConfig","useDocumentEvents","useDocumentInfo","useTranslation","getFormState","React","Fragment","useCallback","LeaveWithoutSaving","SetDocumentStepNav","SetDocumentTitle","useLivePreviewContext","LivePreviewProvider","LivePreview","usePopupWindow","baseClass","PreviewView","apiRoute","collectionConfig","config","fieldMap","globalConfig","schemaPath","serverURL","id","AfterDocument","AfterFields","BeforeDocument","BeforeFields","action","apiURL","collectionSlug","disableActions","disableLeaveWithoutSaving","docPermissions","getDocPreferences","globalSlug","hasPublishPermission","hasSavePermission","initialData","initialState","isEditing","isInitializing","onSave","onSaveFromProps","operation","admin","user","userSlug","t","previewWindowType","refreshCookieAsync","reportUpdate","json","entitySlug","updatedAt","result","Date","toISOString","onChange","formState","prevFormState","docPreferences","body","className","disabled","method","onSuccess","versions","drafts","autosave","globalLabel","label","pluralLabel","labels","plural","undefined","useAsTitle","view","fallback","toString","data","permissions","slug","div","filter","Boolean","join","forceSidebarWrap","readOnly","LivePreviewClient","props","breakpoints","url","isPopupOpen","openPopupWindow","popupRef","eventType","collections","globals","routes","api","find","collection","global","getComponentMap","componentMap","getFieldMap","actions","actionsMap","Edit","fieldSchema","fields"],"mappings":"AAAA;;AAWA,SACEA,gBAAgB,EAChBC,cAAc,EACdC,IAAI,EACJC,iBAAiB,EACjBC,cAAc,EACdC,OAAO,EACPC,eAAe,EACfC,SAAS,EACTC,iBAAiB,EACjBC,eAAe,EACfC,cAAc,QACT,iBAAgB;AACvB,SAASC,YAAY,QAAQ,wBAAuB;AACpD,OAAOC,SAASC,QAAQ,EAAEC,WAAW,QAAQ,QAAO;AAEpD,SAASC,kBAAkB,QAAQ,6CAA4C;AAC/E,SAASC,kBAAkB,QAAQ,8CAA6C;AAChF,SAASC,gBAAgB,QAAQ,4CAA2C;AAC5E,SAASC,qBAAqB,QAAQ,uBAAsB;AAC5D,SAASC,mBAAmB,QAAQ,qBAAoB;AACxD,SAASC,WAAW,QAAQ,qBAAoB;AAEhD,SAASC,cAAc,QAAQ,sBAAqB;AAEpD,MAAMC,YAAY;AAYlB,MAAMC,cAA+B,CAAC,EACpCC,QAAQ,EACRC,gBAAgB,EAChBC,MAAM,EACNC,QAAQ,EACRC,YAAY,EACZC,UAAU,EACVC,SAAS,EACV;IACC,MAAM,EACJC,EAAE,EACFC,aAAa,EACbC,WAAW,EACXC,cAAc,EACdC,YAAY,EACZC,MAAM,EACNC,MAAM,EACNC,cAAc,EACdC,cAAc,EACdC,yBAAyB,EACzBC,cAAc,EACdC,iBAAiB,EACjBC,UAAU,EACVC,oBAAoB,EACpBC,iBAAiB,EACjBC,WAAW,EACXC,YAAY,EACZC,SAAS,EACTC,cAAc,EACdC,QAAQC,eAAe,EACxB,GAAG1C;IAEJ,MAAM2C,YAAYrB,KAAK,WAAW;IAElC,MAAM,EACJsB,OAAO,EAAEC,MAAMC,QAAQ,EAAE,EAC1B,GAAGhD;IACJ,MAAM,EAAEiD,CAAC,EAAE,GAAG9C;IACd,MAAM,EAAE+C,iBAAiB,EAAE,GAAGvC;IAC9B,MAAM,EAAEwC,kBAAkB,EAAEJ,IAAI,EAAE,GAAGjD;IACrC,MAAM,EAAEsD,YAAY,EAAE,GAAGnD;IAEzB,MAAM0C,SAASpC,YACb,CAAC8C;QACCD,aAAa;YACX5B;YACA8B,YAAYvB;YACZwB,WAAWF,MAAMG,QAAQD,aAAa,IAAIE,OAAOC,WAAW;QAC9D;QAEA,kDAAkD;QAClD,4CAA4C;QAC5C,IAAIX,QAAQhB,mBAAmBiB,YAAYxB,OAAOuB,KAAKvB,EAAE,EAAE;YACzD,KAAK2B;QACP;QAEA,IAAI,OAAOP,oBAAoB,YAAY;YACzC,KAAKA,gBAAgB;gBACnB,GAAGS,IAAI;gBACPR,WAAWrB,KAAK,WAAW;YAC7B;QACF;IACF,GACA;QAACO;QAAgBP;QAAIoB;QAAiBO;QAAoBC;QAAcL;QAAMC;KAAS;IAGzF,MAAMW,WAAqCpD,YACzC,OAAO,EAAEqD,WAAWC,aAAa,EAAE;QACjC,MAAMC,iBAAiB,MAAM3B;QAE7B,OAAO/B,aAAa;YAClBa;YACA8C,MAAM;gBACJvC;gBACAsC;gBACAF,WAAWC;gBACXhB;gBACAvB;YACF;YACAC;QACF;IACF,GACA;QAACA;QAAWN;QAAUO;QAAIqB;QAAWvB;QAAYa;KAAkB;IAGrE,qBACE,KAAC7B;kBACC,cAAA,KAACV;YAAkBiD,WAAWA;sBAC5B,cAAA,MAAClD;gBACCkC,QAAQA;gBACRmC,WAAW,CAAC,EAAEjD,UAAU,MAAM,CAAC;gBAC/BkD,UAAU,CAAC3B;gBACXE,cAAcA;gBACdE,gBAAgBA;gBAChBwB,QAAQ1C,KAAK,UAAU;gBACvBmC,UAAU;oBAACA;iBAAS;gBACpBQ,WAAWxB;;oBAET,CAAA,AAACzB,oBACD,CAAEA,CAAAA,iBAAiBkD,QAAQ,EAAEC,UAAUnD,iBAAiBkD,QAAQ,EAAEC,QAAQC,QAAO,KAChFjD,gBACC,CAAEA,CAAAA,aAAa+C,QAAQ,EAAEC,UAAUhD,aAAa+C,QAAQ,EAAEC,QAAQC,QAAO,CAAE,KAC7E,CAACrC,2CAA6B,KAACzB;kCACjC,KAACC;wBACCsB,gBAAgBA;wBAChBwC,aAAalD,cAAcmD;wBAC3BpC,YAAYA;wBACZZ,IAAIA;wBACJiD,aAAavD,mBAAmBA,kBAAkBwD,QAAQC,SAASC;wBACnEC,YAAY3D,mBAAmBA,kBAAkB4B,OAAO+B,aAAaD;wBACrEE,MAAM7B,EAAE;;kCAEV,KAACvC;wBACCQ,kBAAkBA;wBAClBC,QAAQA;wBACR4D,UAAUvD,IAAIwD,cAAc;wBAC5B3D,cAAcA;;kCAEhB,KAAC5B;wBACCqC,QAAQA;wBACRmD,MAAM1C;wBACNP,gBAAgBA;wBAChBK,sBAAsBA;wBACtBC,mBAAmBA;wBACnBd,IAAIA;wBACJiB,WAAWA;wBACXyC,aAAahD;wBACbiD,MAAMjE,kBAAkBiE,QAAQ9D,cAAc8D;;kCAEhD,MAACC;wBACCpB,WAAW;4BAACjD;4BAAWmC,sBAAsB,WAAW,CAAC,EAAEnC,UAAU,UAAU,CAAC;yBAAC,CAC9EsE,MAAM,CAACC,SACPC,IAAI,CAAC;;0CAER,MAACH;gCACCpB,WAAW;oCACT,CAAC,EAAEjD,UAAU,MAAM,CAAC;oCACpBmC,sBAAsB,WAAW,CAAC,EAAEnC,UAAU,kBAAkB,CAAC;iCAClE,CACEsE,MAAM,CAACC,SACPC,IAAI,CAAC;;oCAEP5D;kDACD,KAACjC;wCACCgC,aAAaA;wCACbE,cAAcA;wCACdM,gBAAgBA;wCAChBd,UAAUA;wCACVoE,gBAAgB;wCAChBC,UAAU,CAACnD;wCACXhB,YAAYS,kBAAkBK;;oCAE/BX;;;0CAEH,KAACZ;gCAAYkB,gBAAgBA;gCAAgBK,YAAYA;;;;;;;;AAMrE;AAEA,OAAO,MAAMsD,oBAIR,CAACC;IACJ,MAAM,EAAEC,WAAW,EAAEC,GAAG,EAAE,GAAGF;IAC7B,MAAM,EAAE5D,cAAc,EAAEK,UAAU,EAAE,GAAGlC;IAEvC,MAAMiB,SAASnB;IAEf,MAAM,EAAE8F,WAAW,EAAEC,eAAe,EAAEC,QAAQ,EAAE,GAAGlF,eAAe;QAChEmF,WAAW;QACXJ;IACF;IAEA,MAAM,EACJK,WAAW,EACXC,OAAO,EACPC,QAAQ,EAAEC,KAAKpF,QAAQ,EAAE,EACzBM,SAAS,EACV,GAAGJ;IAEJ,MAAMD,mBACJa,kBAAkBmE,YAAYI,IAAI,CAAC,CAACC,aAAeA,WAAWpB,IAAI,KAAKpD;IAEzE,MAAMV,eAAee,cAAc+D,QAAQG,IAAI,CAAC,CAACE,SAAWA,OAAOrB,IAAI,KAAK/C;IAE5E,MAAMd,aAAaS,kBAAkBK;IAErC,MAAM,EAAEqE,eAAe,EAAE,GAAG1G;IAE5B,MAAM2G,eAAeD,gBAAgB;QAAE1E;QAAgBK;IAAW;IAElE,MAAM,EAAEuE,WAAW,EAAE,GAAG5G;IAExB,MAAMqB,WAAWuF,YAAY;QAC3B5E,gBAAgBb,kBAAkBiE;QAClC/C,YAAYf,cAAc8D;IAC5B;IAEA,qBACE,MAAC7E;;0BACC,KAACT;gBAAe+G,SAASF,cAAcG,YAAYC,MAAMjG;;0BACzD,KAACD;gBACCgF,aAAaA;gBACbmB,aAAa7F,kBAAkB8F,UAAU3F,cAAc2F;gBACvDlB,aAAaA;gBACbC,iBAAiBA;gBACjBC,UAAUA;gBACVH,KAAKA;0BAEL,cAAA,KAAC7E;oBACCC,UAAUA;oBACVC,kBAAkBA;oBAClBC,QAAQA;oBACRC,UAAUA;oBACVC,cAAcA;oBACdC,YAAYA;oBACZC,WAAWA;;;;;AAKrB,EAAC"}

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

@@ -0,0 +1,4 @@
+import type { EditViewComponent } from 'payload';
+import './index.scss';
+export declare const LivePreviewView: EditViewComponent;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/views/LivePreview/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAiC,MAAM,SAAS,CAAA;AAM/E,OAAO,cAAc,CAAA;AAErB,eAAO,MAAM,eAAe,EAAE,iBAgF7B,CAAA"}

package/dist/views/LivePreview/index.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { notFound } from 'next/navigation.js';
+import React from 'react';
+import { LivePreviewClient } from './index.client.js';
+export const LivePreviewView = async (props)=>{
+    const { initPageResult } = props;
+    const { collectionConfig, docID, globalConfig, locale, req: { payload: { config: { admin: { livePreview: topLevelLivePreviewConfig } } } = {} } = {} } = initPageResult;
+    let data;
+    try {
+        if (collectionConfig) {
+            data = await initPageResult.req.payload.findByID({
+                id: docID,
+                collection: collectionConfig.slug,
+                depth: 0,
+                draft: true,
+                fallbackLocale: null
+            });
+        }
+        if (globalConfig) {
+            data = await initPageResult.req.payload.findGlobal({
+                slug: globalConfig.slug,
+                depth: 0,
+                draft: true,
+                fallbackLocale: null
+            });
+        }
+    } catch (error) {
+        notFound();
+    }
+    let livePreviewConfig = topLevelLivePreviewConfig;
+    if (collectionConfig) {
+        livePreviewConfig = {
+            ...livePreviewConfig || {},
+            ...collectionConfig.admin.livePreview || {}
+        };
+    }
+    if (globalConfig) {
+        livePreviewConfig = {
+            ...livePreviewConfig || {},
+            ...globalConfig.admin.livePreview || {}
+        };
+    }
+    const breakpoints = [
+        ...livePreviewConfig?.breakpoints || [],
+        {
+            name: 'responsive',
+            height: '100%',
+            label: 'Responsive',
+            width: '100%'
+        }
+    ];
+    const url = typeof livePreviewConfig?.url === 'function' ? await livePreviewConfig.url({
+        collectionConfig,
+        data,
+        globalConfig,
+        locale,
+        payload: initPageResult.req.payload
+    }) : livePreviewConfig?.url;
+    return /*#__PURE__*/ _jsx(LivePreviewClient, {
+        breakpoints: breakpoints,
+        initialData: data,
+        url: url
+    });
+};
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/views/LivePreview/index.tsx"],"sourcesContent":["import type { EditViewComponent, LivePreviewConfig, TypeWithID } from 'payload'\n\nimport { notFound } from 'next/navigation.js'\nimport React from 'react'\n\nimport { LivePreviewClient } from './index.client.js'\nimport './index.scss'\n\nexport const LivePreviewView: EditViewComponent = async (props) => {\n  const { initPageResult } = props\n\n  const {\n    collectionConfig,\n    docID,\n    globalConfig,\n    locale,\n    req: {\n      payload: {\n        config: {\n          admin: { livePreview: topLevelLivePreviewConfig },\n        },\n      } = {},\n    } = {},\n  } = initPageResult\n\n  let data: Record<string, unknown> | TypeWithID\n\n  try {\n    if (collectionConfig) {\n      data = await initPageResult.req.payload.findByID({\n        id: docID,\n        collection: collectionConfig.slug,\n        depth: 0,\n        draft: true,\n        fallbackLocale: null,\n      })\n    }\n\n    if (globalConfig) {\n      data = await initPageResult.req.payload.findGlobal({\n        slug: globalConfig.slug,\n        depth: 0,\n        draft: true,\n        fallbackLocale: null,\n      })\n    }\n  } catch (error) {\n    notFound()\n  }\n\n  let livePreviewConfig: LivePreviewConfig = topLevelLivePreviewConfig\n\n  if (collectionConfig) {\n    livePreviewConfig = {\n      ...(livePreviewConfig || {}),\n      ...(collectionConfig.admin.livePreview || {}),\n    }\n  }\n\n  if (globalConfig) {\n    livePreviewConfig = {\n      ...(livePreviewConfig || {}),\n      ...(globalConfig.admin.livePreview || {}),\n    }\n  }\n\n  const breakpoints: LivePreviewConfig['breakpoints'] = [\n    ...(livePreviewConfig?.breakpoints || []),\n    {\n      name: 'responsive',\n      height: '100%',\n      label: 'Responsive',\n      width: '100%',\n    },\n  ]\n\n  const url =\n    typeof livePreviewConfig?.url === 'function'\n      ? await livePreviewConfig.url({\n          collectionConfig,\n          data,\n          globalConfig,\n          locale,\n          payload: initPageResult.req.payload,\n        })\n      : livePreviewConfig?.url\n\n  return <LivePreviewClient breakpoints={breakpoints} initialData={data} url={url} />\n}\n"],"names":["notFound","React","LivePreviewClient","LivePreviewView","props","initPageResult","collectionConfig","docID","globalConfig","locale","req","payload","config","admin","livePreview","topLevelLivePreviewConfig","data","findByID","id","collection","slug","depth","draft","fallbackLocale","findGlobal","error","livePreviewConfig","breakpoints","name","height","label","width","url","initialData"],"mappings":";AAEA,SAASA,QAAQ,QAAQ,qBAAoB;AAC7C,OAAOC,WAAW,QAAO;AAEzB,SAASC,iBAAiB,QAAQ,oBAAmB;AAGrD,OAAO,MAAMC,kBAAqC,OAAOC;IACvD,MAAM,EAAEC,cAAc,EAAE,GAAGD;IAE3B,MAAM,EACJE,gBAAgB,EAChBC,KAAK,EACLC,YAAY,EACZC,MAAM,EACNC,KAAK,EACHC,SAAS,EACPC,QAAQ,EACNC,OAAO,EAAEC,aAAaC,yBAAyB,EAAE,EAClD,EACF,GAAG,CAAC,CAAC,EACP,GAAG,CAAC,CAAC,EACP,GAAGV;IAEJ,IAAIW;IAEJ,IAAI;QACF,IAAIV,kBAAkB;YACpBU,OAAO,MAAMX,eAAeK,GAAG,CAACC,OAAO,CAACM,QAAQ,CAAC;gBAC/CC,IAAIX;gBACJY,YAAYb,iBAAiBc,IAAI;gBACjCC,OAAO;gBACPC,OAAO;gBACPC,gBAAgB;YAClB;QACF;QAEA,IAAIf,cAAc;YAChBQ,OAAO,MAAMX,eAAeK,GAAG,CAACC,OAAO,CAACa,UAAU,CAAC;gBACjDJ,MAAMZ,aAAaY,IAAI;gBACvBC,OAAO;gBACPC,OAAO;gBACPC,gBAAgB;YAClB;QACF;IACF,EAAE,OAAOE,OAAO;QACdzB;IACF;IAEA,IAAI0B,oBAAuCX;IAE3C,IAAIT,kBAAkB;QACpBoB,oBAAoB;YAClB,GAAIA,qBAAqB,CAAC,CAAC;YAC3B,GAAIpB,iBAAiBO,KAAK,CAACC,WAAW,IAAI,CAAC,CAAC;QAC9C;IACF;IAEA,IAAIN,cAAc;QAChBkB,oBAAoB;YAClB,GAAIA,qBAAqB,CAAC,CAAC;YAC3B,GAAIlB,aAAaK,KAAK,CAACC,WAAW,IAAI,CAAC,CAAC;QAC1C;IACF;IAEA,MAAMa,cAAgD;WAChDD,mBAAmBC,eAAe,EAAE;QACxC;YACEC,MAAM;YACNC,QAAQ;YACRC,OAAO;YACPC,OAAO;QACT;KACD;IAED,MAAMC,MACJ,OAAON,mBAAmBM,QAAQ,aAC9B,MAAMN,kBAAkBM,GAAG,CAAC;QAC1B1B;QACAU;QACAR;QACAC;QACAE,SAASN,eAAeK,GAAG,CAACC,OAAO;IACrC,KACAe,mBAAmBM;IAEzB,qBAAO,KAAC9B;QAAkByB,aAAaA;QAAaM,aAAajB;QAAMgB,KAAKA;;AAC9E,EAAC"}

package/dist/views/LivePreview/index.scss

@@ -0,0 +1,66 @@
+@import '../../scss/styles.scss';
+
+.live-preview {
+  width: 100%;
+  display: flex;
+  --gradient: linear-gradient(to left, rgba(0, 0, 0, 0.04) 0%, transparent 100%);
+
+  [dir='rtl'] & {
+    flex-direction: row-reverse;
+  }
+
+  &--popup-open {
+    .live-preview {
+      &__edit {
+        padding-right: var(--gutter-h);
+      }
+    }
+  }
+
+  &__main {
+    width: 40%;
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+    position: relative;
+
+    &--popup-open {
+      width: 100%;
+    }
+
+    &::after {
+      content: ' ';
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: calc(var(--base) * 2);
+      height: 100%;
+      background: var(--gradient);
+      pointer-events: none;
+      z-index: -1;
+    }
+  }
+
+  @include mid-break {
+    flex-direction: column;
+
+    &__main {
+      min-height: initial;
+      width: 100%;
+
+      &::after {
+        display: none;
+      }
+    }
+
+    &__form {
+      display: block;
+    }
+  }
+}
+
+html[data-theme='dark'] {
+  .live-preview {
+    --gradient: linear-gradient(to left, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
+  }
+}

package/dist/views/LivePreview/meta.d.ts

@@ -0,0 +1,3 @@
+import type { GenerateEditViewMetadata } from '../Document/getMetaBySegment.js';
+export declare const generateMetadata: GenerateEditViewMetadata;
+//# sourceMappingURL=meta.d.ts.map

package/dist/views/LivePreview/meta.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../../src/views/LivePreview/meta.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,iCAAiC,CAAA;AAI/E,eAAO,MAAM,gBAAgB,EAAE,wBAa3B,CAAA"}

package/dist/views/LivePreview/meta.js

@@ -0,0 +1,10 @@
+import { generateMetadata as generateDocumentMetadata } from '../Edit/meta.js';
+export const generateMetadata = async ({ collectionConfig, config, globalConfig, i18n, isEditing })=>generateDocumentMetadata({
+        collectionConfig,
+        config,
+        globalConfig,
+        i18n,
+        isEditing
+    });
+
+//# sourceMappingURL=meta.js.map

package/dist/views/LivePreview/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/views/LivePreview/meta.ts"],"sourcesContent":["import type { Metadata } from 'next'\n\nimport type { GenerateEditViewMetadata } from '../Document/getMetaBySegment.js'\n\nimport { generateMetadata as generateDocumentMetadata } from '../Edit/meta.js'\n\nexport const generateMetadata: GenerateEditViewMetadata = async ({\n  collectionConfig,\n  config,\n  globalConfig,\n  i18n,\n  isEditing,\n}): Promise<Metadata> =>\n  generateDocumentMetadata({\n    collectionConfig,\n    config,\n    globalConfig,\n    i18n,\n    isEditing,\n  })\n"],"names":["generateMetadata","generateDocumentMetadata","collectionConfig","config","globalConfig","i18n","isEditing"],"mappings":"AAIA,SAASA,oBAAoBC,wBAAwB,QAAQ,kBAAiB;AAE9E,OAAO,MAAMD,mBAA6C,OAAO,EAC/DE,gBAAgB,EAChBC,MAAM,EACNC,YAAY,EACZC,IAAI,EACJC,SAAS,EACV,GACCL,yBAAyB;QACvBC;QACAC;QACAC;QACAC;QACAC;IACF,GAAE"}

package/dist/views/LivePreview/usePopupWindow.d.ts

@@ -0,0 +1,19 @@
+export interface PopupMessage {
+    searchParams: {
+        [key: string]: string | undefined;
+        code: string;
+        installation_id: string;
+        state: string;
+    };
+    type: string;
+}
+export declare const usePopupWindow: (props: {
+    eventType?: string;
+    onMessage?: (searchParams: PopupMessage["searchParams"]) => Promise<void>;
+    url: string;
+}) => {
+    isPopupOpen: boolean;
+    openPopupWindow: () => void;
+    popupRef?: React.MutableRefObject<Window | null>;
+};
+//# sourceMappingURL=usePopupWindow.d.ts.map

package/dist/views/LivePreview/usePopupWindow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePopupWindow.d.ts","sourceRoot":"","sources":["../../../src/views/LivePreview/usePopupWindow.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,YAAY;IAC3B,YAAY,EAAE;QACZ,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAA;QACjC,IAAI,EAAE,MAAM,CAAA;QACZ,eAAe,EAAE,MAAM,CAAA;QACvB,KAAK,EAAE,MAAM,CAAA;KACd,CAAA;IACD,IAAI,EAAE,MAAM,CAAA;CACb;AAED,eAAO,MAAM,cAAc,UAAW;IACpC,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB,SAAS,CAAC,EAAE,CAAC,YAAY,EAAE,YAAY,CAAC,cAAc,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IACzE,GAAG,EAAE,MAAM,CAAA;CACZ,KAAG;IACF,WAAW,EAAE,OAAO,CAAA;IACpB,eAAe,EAAE,MAAM,IAAI,CAAA;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,MAAM,GAAG,IAAI,CAAC,CAAA;CAiHjD,CAAA"}

package/dist/views/LivePreview/usePopupWindow.js

@@ -0,0 +1,102 @@
+'use client';
+import { useConfig } from '@payloadcms/ui';
+import { useCallback, useEffect, useRef, useState } from 'react';
+export const usePopupWindow = (props)=>{
+    const { eventType, onMessage, url } = props;
+    const isReceivingMessage = useRef(false);
+    const [isOpen, setIsOpen] = useState(false);
+    const { serverURL } = useConfig();
+    const popupRef = useRef(null);
+    // Optionally broadcast messages back out to the parent component
+    useEffect(()=>{
+        const receiveMessage = async (event)=>{
+            if (event.origin !== window.location.origin || event.origin !== url || event.origin !== serverURL) {
+                // console.warn(`Message received by ${event.origin}; IGNORED.`) // eslint-disable-line no-console
+                return;
+            }
+            if (typeof onMessage === 'function' && event.data?.type === eventType && !isReceivingMessage.current) {
+                isReceivingMessage.current = true;
+                await onMessage(event.data?.searchParams);
+                isReceivingMessage.current = false;
+            }
+        };
+        if (isOpen && popupRef.current) {
+            window.addEventListener('message', receiveMessage, false);
+        }
+        return ()=>{
+            window.removeEventListener('message', receiveMessage);
+        };
+    }, [
+        onMessage,
+        eventType,
+        url,
+        serverURL,
+        isOpen
+    ]);
+    // Customize the size, position, and style of the popup window
+    const openPopupWindow = useCallback((e)=>{
+        if (e) {
+            e.preventDefault();
+        }
+        const features = {
+            height: 700,
+            left: 'auto',
+            menubar: 'no',
+            popup: 'yes',
+            toolbar: 'no',
+            top: 'auto',
+            width: 800
+        };
+        const popupOptions = Object.entries(features).reduce((str, [key, value])=>{
+            let strCopy = str;
+            if (value === 'auto') {
+                if (key === 'top') {
+                    const v = Math.round(window.innerHeight / 2 - features.height / 2);
+                    strCopy += `top=${v},`;
+                } else if (key === 'left') {
+                    const v = Math.round(window.innerWidth / 2 - features.width / 2);
+                    strCopy += `left=${v},`;
+                }
+                return strCopy;
+            }
+            strCopy += `${key}=${value},`;
+            return strCopy;
+        }, '').slice(0, -1) // remove last ',' (comma)
+        ;
+        const newWindow = window.open(url, '_blank', popupOptions);
+        popupRef.current = newWindow;
+        setIsOpen(true);
+    }, [
+        url
+    ]);
+    // this is the most stable and widely supported way to check if a popup window is no longer open
+    // we poll its ref every x ms and use the popup window's `closed` property
+    useEffect(()=>{
+        let timer;
+        if (isOpen) {
+            timer = setInterval(function() {
+                if (popupRef.current.closed) {
+                    clearInterval(timer);
+                    setIsOpen(false);
+                }
+            }, 1000);
+        } else {
+            clearInterval(timer);
+        }
+        return ()=>{
+            if (timer) {
+                clearInterval(timer);
+            }
+        };
+    }, [
+        isOpen,
+        popupRef
+    ]);
+    return {
+        isPopupOpen: isOpen,
+        openPopupWindow,
+        popupRef
+    };
+};
+
+//# sourceMappingURL=usePopupWindow.js.map

package/dist/views/LivePreview/usePopupWindow.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/views/LivePreview/usePopupWindow.ts"],"sourcesContent":["'use client'\nimport { useConfig } from '@payloadcms/ui'\nimport { useCallback, useEffect, useRef, useState } from 'react'\n\nexport interface PopupMessage {\n  searchParams: {\n    [key: string]: string | undefined\n    code: string\n    installation_id: string\n    state: string\n  }\n  type: string\n}\n\nexport const usePopupWindow = (props: {\n  eventType?: string\n\n  onMessage?: (searchParams: PopupMessage['searchParams']) => Promise<void>\n  url: string\n}): {\n  isPopupOpen: boolean\n  openPopupWindow: () => void\n  popupRef?: React.MutableRefObject<Window | null>\n} => {\n  const { eventType, onMessage, url } = props\n  const isReceivingMessage = useRef(false)\n  const [isOpen, setIsOpen] = useState(false)\n  const { serverURL } = useConfig()\n  const popupRef = useRef<Window | null>(null)\n\n  // Optionally broadcast messages back out to the parent component\n  useEffect(() => {\n    const receiveMessage = async (event: MessageEvent): Promise<void> => {\n      if (\n        event.origin !== window.location.origin ||\n        event.origin !== url ||\n        event.origin !== serverURL\n      ) {\n        // console.warn(`Message received by ${event.origin}; IGNORED.`) // eslint-disable-line no-console\n        return\n      }\n\n      if (\n        typeof onMessage === 'function' &&\n        event.data?.type === eventType &&\n        !isReceivingMessage.current\n      ) {\n        isReceivingMessage.current = true\n        await onMessage(event.data?.searchParams)\n        isReceivingMessage.current = false\n      }\n    }\n\n    if (isOpen && popupRef.current) {\n      window.addEventListener('message', receiveMessage, false)\n    }\n\n    return () => {\n      window.removeEventListener('message', receiveMessage)\n    }\n  }, [onMessage, eventType, url, serverURL, isOpen])\n\n  // Customize the size, position, and style of the popup window\n  const openPopupWindow = useCallback(\n    (e?: MouseEvent) => {\n      if (e) {\n        e.preventDefault()\n      }\n\n      const features = {\n        height: 700,\n        left: 'auto',\n        menubar: 'no',\n        popup: 'yes',\n        toolbar: 'no',\n        top: 'auto',\n        width: 800,\n      }\n\n      const popupOptions = Object.entries(features)\n        .reduce((str, [key, value]) => {\n          let strCopy = str\n          if (value === 'auto') {\n            if (key === 'top') {\n              const v = Math.round(window.innerHeight / 2 - features.height / 2)\n              strCopy += `top=${v},`\n            } else if (key === 'left') {\n              const v = Math.round(window.innerWidth / 2 - features.width / 2)\n              strCopy += `left=${v},`\n            }\n            return strCopy\n          }\n\n          strCopy += `${key}=${value},`\n          return strCopy\n        }, '')\n        .slice(0, -1) // remove last ',' (comma)\n\n      const newWindow = window.open(url, '_blank', popupOptions)\n\n      popupRef.current = newWindow\n\n      setIsOpen(true)\n    },\n    [url],\n  )\n\n  // this is the most stable and widely supported way to check if a popup window is no longer open\n  // we poll its ref every x ms and use the popup window's `closed` property\n  useEffect(() => {\n    let timer: NodeJS.Timeout\n\n    if (isOpen) {\n      timer = setInterval(function () {\n        if (popupRef.current.closed) {\n          clearInterval(timer)\n          setIsOpen(false)\n        }\n      }, 1000)\n    } else {\n      clearInterval(timer)\n    }\n\n    return () => {\n      if (timer) {\n        clearInterval(timer)\n      }\n    }\n  }, [isOpen, popupRef])\n\n  return {\n    isPopupOpen: isOpen,\n    openPopupWindow,\n    popupRef,\n  }\n}\n"],"names":["useConfig","useCallback","useEffect","useRef","useState","usePopupWindow","props","eventType","onMessage","url","isReceivingMessage","isOpen","setIsOpen","serverURL","popupRef","receiveMessage","event","origin","window","location","data","type","current","searchParams","addEventListener","removeEventListener","openPopupWindow","e","preventDefault","features","height","left","menubar","popup","toolbar","top","width","popupOptions","Object","entries","reduce","str","key","value","strCopy","v","Math","round","innerHeight","innerWidth","slice","newWindow","open","timer","setInterval","closed","clearInterval","isPopupOpen"],"mappings":"AAAA;AACA,SAASA,SAAS,QAAQ,iBAAgB;AAC1C,SAASC,WAAW,EAAEC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAO;AAYhE,OAAO,MAAMC,iBAAiB,CAACC;IAU7B,MAAM,EAAEC,SAAS,EAAEC,SAAS,EAAEC,GAAG,EAAE,GAAGH;IACtC,MAAMI,qBAAqBP,OAAO;IAClC,MAAM,CAACQ,QAAQC,UAAU,GAAGR,SAAS;IACrC,MAAM,EAAES,SAAS,EAAE,GAAGb;IACtB,MAAMc,WAAWX,OAAsB;IAEvC,iEAAiE;IACjED,UAAU;QACR,MAAMa,iBAAiB,OAAOC;YAC5B,IACEA,MAAMC,MAAM,KAAKC,OAAOC,QAAQ,CAACF,MAAM,IACvCD,MAAMC,MAAM,KAAKR,OACjBO,MAAMC,MAAM,KAAKJ,WACjB;gBACA,kGAAkG;gBAClG;YACF;YAEA,IACE,OAAOL,cAAc,cACrBQ,MAAMI,IAAI,EAAEC,SAASd,aACrB,CAACG,mBAAmBY,OAAO,EAC3B;gBACAZ,mBAAmBY,OAAO,GAAG;gBAC7B,MAAMd,UAAUQ,MAAMI,IAAI,EAAEG;gBAC5Bb,mBAAmBY,OAAO,GAAG;YAC/B;QACF;QAEA,IAAIX,UAAUG,SAASQ,OAAO,EAAE;YAC9BJ,OAAOM,gBAAgB,CAAC,WAAWT,gBAAgB;QACrD;QAEA,OAAO;YACLG,OAAOO,mBAAmB,CAAC,WAAWV;QACxC;IACF,GAAG;QAACP;QAAWD;QAAWE;QAAKI;QAAWF;KAAO;IAEjD,8DAA8D;IAC9D,MAAMe,kBAAkBzB,YACtB,CAAC0B;QACC,IAAIA,GAAG;YACLA,EAAEC,cAAc;QAClB;QAEA,MAAMC,WAAW;YACfC,QAAQ;YACRC,MAAM;YACNC,SAAS;YACTC,OAAO;YACPC,SAAS;YACTC,KAAK;YACLC,OAAO;QACT;QAEA,MAAMC,eAAeC,OAAOC,OAAO,CAACV,UACjCW,MAAM,CAAC,CAACC,KAAK,CAACC,KAAKC,MAAM;YACxB,IAAIC,UAAUH;YACd,IAAIE,UAAU,QAAQ;gBACpB,IAAID,QAAQ,OAAO;oBACjB,MAAMG,IAAIC,KAAKC,KAAK,CAAC7B,OAAO8B,WAAW,GAAG,IAAInB,SAASC,MAAM,GAAG;oBAChEc,WAAW,CAAC,IAAI,EAAEC,EAAE,CAAC,CAAC;gBACxB,OAAO,IAAIH,QAAQ,QAAQ;oBACzB,MAAMG,IAAIC,KAAKC,KAAK,CAAC7B,OAAO+B,UAAU,GAAG,IAAIpB,SAASO,KAAK,GAAG;oBAC9DQ,WAAW,CAAC,KAAK,EAAEC,EAAE,CAAC,CAAC;gBACzB;gBACA,OAAOD;YACT;YAEAA,WAAW,CAAC,EAAEF,IAAI,CAAC,EAAEC,MAAM,CAAC,CAAC;YAC7B,OAAOC;QACT,GAAG,IACFM,KAAK,CAAC,GAAG,CAAC,GAAG,0BAA0B;;QAE1C,MAAMC,YAAYjC,OAAOkC,IAAI,CAAC3C,KAAK,UAAU4B;QAE7CvB,SAASQ,OAAO,GAAG6B;QAEnBvC,UAAU;IACZ,GACA;QAACH;KAAI;IAGP,gGAAgG;IAChG,0EAA0E;IAC1EP,UAAU;QACR,IAAImD;QAEJ,IAAI1C,QAAQ;YACV0C,QAAQC,YAAY;gBAClB,IAAIxC,SAASQ,OAAO,CAACiC,MAAM,EAAE;oBAC3BC,cAAcH;oBACdzC,UAAU;gBACZ;YACF,GAAG;QACL,OAAO;YACL4C,cAAcH;QAChB;QAEA,OAAO;YACL,IAAIA,OAAO;gBACTG,cAAcH;YAChB;QACF;IACF,GAAG;QAAC1C;QAAQG;KAAS;IAErB,OAAO;QACL2C,aAAa9C;QACbe;QACAZ;IACF;AACF,EAAC"}