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

package/dist/views/Version/Restore/index.js

@@ -1,97 +1,123 @@
 'use client';
+
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getTranslation } from '@payloadcms/translations';
-import { Button } from '@payloadcms/ui/elements/Button';
-import { Modal, useModal } from '@payloadcms/ui/elements/Modal';
-import { Pill } from '@payloadcms/ui/elements/Pill';
-import { useConfig } from '@payloadcms/ui/providers/Config';
-import { useTranslation } from '@payloadcms/ui/providers/Translation';
-import { MinimalTemplate } from '@payloadcms/ui/templates/Minimal';
-import { requests } from '@payloadcms/ui/utilities/api';
+import { Button, ChevronIcon, Modal, Pill, Popup, PopupList, useConfig, useModal, useTranslation } from '@payloadcms/ui';
+import { formatAdminURL, requests } from '@payloadcms/ui/shared';
 import { useRouter } from 'next/navigation.js';
 import React, { Fragment, useCallback, useState } from 'react';
-import { toast } from 'react-toastify';
+import { toast } from 'sonner';
+import { MinimalTemplate } from '../../../templates/Minimal/index.js';
 const baseClass = 'restore-version';
 const modalSlug = 'restore-version';
-const Restore = ({ className, collectionSlug, globalSlug, label, originalDocID, versionDate, versionID })=>{
-    const { routes: { admin, api }, serverURL } = useConfig();
-    const { toggleModal } = useModal();
-    const [processing, setProcessing] = useState(false);
-    const router = useRouter();
-    const { i18n, t } = useTranslation();
-    const restoreMessage = t('version:aboutToRestoreGlobal', {
-        label: getTranslation(label, i18n),
-        versionDate
-    });
-    let fetchURL = `${serverURL}${api}`;
-    let redirectURL;
-    if (collectionSlug) {
-        fetchURL = `${fetchURL}/${collectionSlug}/versions/${versionID}`;
-        redirectURL = `${admin}/collections/${collectionSlug}/${originalDocID}`;
+const Restore = ({
+  className,
+  collectionSlug,
+  globalSlug,
+  label,
+  originalDocID,
+  status,
+  versionDate,
+  versionID
+}) => {
+  const {
+    config: {
+      routes: {
+        admin: adminRoute,
+        api: apiRoute
+      },
+      serverURL
     }
-    if (globalSlug) {
-        fetchURL = `${fetchURL}/globals/${globalSlug}/versions/${versionID}`;
-        redirectURL = `${admin}/globals/${globalSlug}`;
-    }
-    const handleRestore = useCallback(async ()=>{
-        setProcessing(true);
-        const res = await requests.post(fetchURL, {
-            headers: {
-                'Accept-Language': i18n.language
-            }
-        });
-        if (res.status === 200) {
-            const json = await res.json();
-            toast.success(json.message);
-            router.push(redirectURL);
-        } else {
-            toast.error(t('version:problemRestoringVersion'));
-        }
-    }, [
-        fetchURL,
-        redirectURL,
-        t,
-        i18n,
-        router
-    ]);
-    return /*#__PURE__*/ _jsxs(Fragment, {
-        children: [
-            /*#__PURE__*/ _jsx(Pill, {
-                className: [
-                    baseClass,
-                    className
-                ].filter(Boolean).join(' '),
-                onClick: ()=>toggleModal(modalSlug),
-                children: t('version:restoreThisVersion')
-            }),
-            /*#__PURE__*/ _jsx(Modal, {
-                className: `${baseClass}__modal`,
-                slug: modalSlug,
-                children: /*#__PURE__*/ _jsxs(MinimalTemplate, {
-                    className: `${baseClass}__modal-template`,
-                    children: [
-                        /*#__PURE__*/ _jsx("h1", {
-                            children: t('version:confirmVersionRestoration')
-                        }),
-                        /*#__PURE__*/ _jsx("p", {
-                            children: restoreMessage
-                        }),
-                        /*#__PURE__*/ _jsx(Button, {
-                            buttonStyle: "secondary",
-                            onClick: processing ? undefined : ()=>toggleModal(modalSlug),
-                            type: "button",
-                            children: t('general:cancel')
-                        }),
-                        /*#__PURE__*/ _jsx(Button, {
-                            onClick: processing ? undefined : handleRestore,
-                            children: processing ? t('version:restoring') : t('general:confirm')
-                        })
-                    ]
-                })
-            })
-        ]
+  } = useConfig();
+  const {
+    toggleModal
+  } = useModal();
+  const [processing, setProcessing] = useState(false);
+  const router = useRouter();
+  const {
+    i18n,
+    t
+  } = useTranslation();
+  const [draft, setDraft] = useState(false);
+  const restoreMessage = t('version:aboutToRestoreGlobal', {
+    label: getTranslation(label, i18n),
+    versionDate
+  });
+  let fetchURL = `${serverURL}${apiRoute}`;
+  let redirectURL;
+  const canRestoreAsDraft = status !== 'draft';
+  if (collectionSlug) {
+    fetchURL = `${fetchURL}/${collectionSlug}/versions/${versionID}?draft=${draft}`;
+    redirectURL = formatAdminURL({
+      adminRoute,
+      path: `/collections/${collectionSlug}/${originalDocID}`
+    });
+  }
+  if (globalSlug) {
+    fetchURL = `${fetchURL}/globals/${globalSlug}/versions/${versionID}?draft=${draft}`;
+    redirectURL = formatAdminURL({
+      adminRoute,
+      path: `/globals/${globalSlug}`
     });
+  }
+  const handleRestore = useCallback(async () => {
+    setProcessing(true);
+    const res = await requests.post(fetchURL, {
+      headers: {
+        'Accept-Language': i18n.language
+      }
+    });
+    if (res.status === 200) {
+      const json = await res.json();
+      toast.success(json.message);
+      router.push(redirectURL);
+    } else {
+      toast.error(t('version:problemRestoringVersion'));
+    }
+  }, [fetchURL, redirectURL, t, i18n, router]);
+  return /*#__PURE__*/_jsxs(Fragment, {
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: [baseClass, className].filter(Boolean).join(' '),
+      children: [/*#__PURE__*/_jsx(Pill, {
+        className: [canRestoreAsDraft && `${baseClass}__button`].filter(Boolean).join(' '),
+        onClick: () => toggleModal(modalSlug),
+        children: t('version:restoreThisVersion')
+      }), canRestoreAsDraft && /*#__PURE__*/_jsx(Popup, {
+        button: /*#__PURE__*/_jsx(Pill, {
+          className: `${baseClass}__chevron`,
+          children: /*#__PURE__*/_jsx(ChevronIcon, {})
+        }),
+        caret: false,
+        render: () => /*#__PURE__*/_jsx(PopupList.ButtonGroup, {
+          children: /*#__PURE__*/_jsx(PopupList.Button, {
+            onClick: () => [setDraft(true), toggleModal(modalSlug)],
+            children: t('version:restoreAsDraft')
+          })
+        }),
+        size: "large",
+        verticalAlign: "bottom"
+      })]
+    }), /*#__PURE__*/_jsx(Modal, {
+      className: `${baseClass}__modal`,
+      slug: modalSlug,
+      children: /*#__PURE__*/_jsxs(MinimalTemplate, {
+        className: `${baseClass}__modal-template`,
+        children: [/*#__PURE__*/_jsx("h1", {
+          children: t('version:confirmVersionRestoration')
+        }), /*#__PURE__*/_jsx("p", {
+          children: restoreMessage
+        }), /*#__PURE__*/_jsx(Button, {
+          buttonStyle: "secondary",
+          onClick: processing ? undefined : () => toggleModal(modalSlug),
+          type: "button",
+          children: t('general:cancel')
+        }), /*#__PURE__*/_jsx(Button, {
+          onClick: processing ? undefined : () => void handleRestore(),
+          children: processing ? t('version:restoring') : t('general:confirm')
+        })]
+      })
+    })]
+  });
 };
 export default Restore;
-
 //# sourceMappingURL=index.js.map

package/dist/views/Version/Restore/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/views/Version/Restore/index.tsx"],"sourcesContent":["'use client'\nimport { getTranslation } from '@payloadcms/translations'\nimport { Button } from '@payloadcms/ui/elements/Button'\nimport { Modal, useModal } from '@payloadcms/ui/elements/Modal'\nimport { Pill } from '@payloadcms/ui/elements/Pill'\nimport { useConfig } from '@payloadcms/ui/providers/Config'\nimport { useTranslation } from '@payloadcms/ui/providers/Translation'\nimport { MinimalTemplate } from '@payloadcms/ui/templates/Minimal'\nimport { requests } from '@payloadcms/ui/utilities/api'\nimport { useRouter } from 'next/navigation.js'\nimport React, { Fragment, useCallback, useState } from 'react'\nimport { toast } from 'react-toastify'\n\nimport type { Props } from './types.js'\n\n// import { requests } from '../../../../api'\nimport './index.scss'\n\nconst baseClass = 'restore-version'\nconst modalSlug = 'restore-version'\n\nconst Restore: React.FC<Props> = ({\n  className,\n  collectionSlug,\n  globalSlug,\n  label,\n  originalDocID,\n  versionDate,\n  versionID,\n}) => {\n  const {\n    routes: { admin, api },\n    serverURL,\n  } = useConfig()\n  const { toggleModal } = useModal()\n  const [processing, setProcessing] = useState(false)\n  const router = useRouter()\n  const { i18n, t } = useTranslation()\n\n  const restoreMessage = t('version:aboutToRestoreGlobal', {\n    label: getTranslation(label, i18n),\n    versionDate,\n  })\n\n  let fetchURL = `${serverURL}${api}`\n  let redirectURL: string\n\n  if (collectionSlug) {\n    fetchURL = `${fetchURL}/${collectionSlug}/versions/${versionID}`\n    redirectURL = `${admin}/collections/${collectionSlug}/${originalDocID}`\n  }\n\n  if (globalSlug) {\n    fetchURL = `${fetchURL}/globals/${globalSlug}/versions/${versionID}`\n    redirectURL = `${admin}/globals/${globalSlug}`\n  }\n\n  const handleRestore = useCallback(async () => {\n    setProcessing(true)\n\n    const res = await requests.post(fetchURL, {\n      headers: {\n        'Accept-Language': i18n.language,\n      },\n    })\n\n    if (res.status === 200) {\n      const json = await res.json()\n      toast.success(json.message)\n      router.push(redirectURL)\n    } else {\n      toast.error(t('version:problemRestoringVersion'))\n    }\n  }, [fetchURL, redirectURL, t, i18n, router])\n\n  return (\n    <Fragment>\n      <Pill\n        className={[baseClass, className].filter(Boolean).join(' ')}\n        onClick={() => toggleModal(modalSlug)}\n      >\n        {t('version:restoreThisVersion')}\n      </Pill>\n      <Modal className={`${baseClass}__modal`} slug={modalSlug}>\n        <MinimalTemplate className={`${baseClass}__modal-template`}>\n          <h1>{t('version:confirmVersionRestoration')}</h1>\n          <p>{restoreMessage}</p>\n          <Button\n            buttonStyle=\"secondary\"\n            onClick={processing ? undefined : () => toggleModal(modalSlug)}\n            type=\"button\"\n          >\n            {t('general:cancel')}\n          </Button>\n          <Button onClick={processing ? undefined : handleRestore}>\n            {processing ? t('version:restoring') : t('general:confirm')}\n          </Button>\n        </MinimalTemplate>\n      </Modal>\n    </Fragment>\n  )\n}\n\nexport default Restore\n"],"names":["getTranslation","Button","Modal","useModal","Pill","useConfig","useTranslation","MinimalTemplate","requests","useRouter","React","Fragment","useCallback","useState","toast","baseClass","modalSlug","Restore","className","collectionSlug","globalSlug","label","originalDocID","versionDate","versionID","routes","admin","api","serverURL","toggleModal","processing","setProcessing","router","i18n","t","restoreMessage","fetchURL","redirectURL","handleRestore","res","post","headers","language","status","json","success","message","push","error","filter","Boolean","join","onClick","slug","h1","p","buttonStyle","undefined","type"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"file":"index.js","names":["getTranslation","Button","ChevronIcon","Modal","Pill","Popup","PopupList","useConfig","useModal","useTranslation","formatAdminURL","requests","useRouter","React","Fragment","useCallback","useState","toast","MinimalTemplate","baseClass","modalSlug","Restore","className","collectionSlug","globalSlug","label","originalDocID","status","versionDate","versionID","config","routes","admin","adminRoute","api","apiRoute","serverURL","toggleModal","processing","setProcessing","router","i18n","t","draft","setDraft","restoreMessage","fetchURL","redirectURL","canRestoreAsDraft","path","handleRestore","res","post","headers","language","json","success","message","push","error","_jsxs","filter","Boolean","join","_jsx","onClick","button","caret","render","ButtonGroup","size","verticalAlign","slug","buttonStyle","undefined","type"],"sources":["../../../../src/views/Version/Restore/index.tsx"],"sourcesContent":["'use client'\nimport { getTranslation } from '@payloadcms/translations'\nimport {\n  Button,\n  ChevronIcon,\n  Modal,\n  Pill,\n  Popup,\n  PopupList,\n  useConfig,\n  useModal,\n  useTranslation,\n} from '@payloadcms/ui'\nimport { formatAdminURL, requests } from '@payloadcms/ui/shared'\nimport { useRouter } from 'next/navigation.js'\nimport React, { Fragment, useCallback, useState } from 'react'\nimport { toast } from 'sonner'\n\nimport type { Props } from './types.js'\n\nimport { MinimalTemplate } from '../../../templates/Minimal/index.js'\nimport './index.scss'\n\nconst baseClass = 'restore-version'\nconst modalSlug = 'restore-version'\n\nconst Restore: React.FC<Props> = ({\n  className,\n  collectionSlug,\n  globalSlug,\n  label,\n  originalDocID,\n  status,\n  versionDate,\n  versionID,\n}) => {\n  const {\n    config: {\n      routes: { admin: adminRoute, api: apiRoute },\n      serverURL,\n    },\n  } = useConfig()\n\n  const { toggleModal } = useModal()\n  const [processing, setProcessing] = useState(false)\n  const router = useRouter()\n  const { i18n, t } = useTranslation()\n  const [draft, setDraft] = useState(false)\n\n  const restoreMessage = t('version:aboutToRestoreGlobal', {\n    label: getTranslation(label, i18n),\n    versionDate,\n  })\n\n  let fetchURL = `${serverURL}${apiRoute}`\n  let redirectURL: string\n  const canRestoreAsDraft = status !== 'draft'\n\n  if (collectionSlug) {\n    fetchURL = `${fetchURL}/${collectionSlug}/versions/${versionID}?draft=${draft}`\n    redirectURL = formatAdminURL({\n      adminRoute,\n      path: `/collections/${collectionSlug}/${originalDocID}`,\n    })\n  }\n\n  if (globalSlug) {\n    fetchURL = `${fetchURL}/globals/${globalSlug}/versions/${versionID}?draft=${draft}`\n    redirectURL = formatAdminURL({\n      adminRoute,\n      path: `/globals/${globalSlug}`,\n    })\n  }\n\n  const handleRestore = useCallback(async () => {\n    setProcessing(true)\n\n    const res = await requests.post(fetchURL, {\n      headers: {\n        'Accept-Language': i18n.language,\n      },\n    })\n\n    if (res.status === 200) {\n      const json = await res.json()\n      toast.success(json.message)\n      router.push(redirectURL)\n    } else {\n      toast.error(t('version:problemRestoringVersion'))\n    }\n  }, [fetchURL, redirectURL, t, i18n, router])\n  return (\n    <Fragment>\n      <div className={[baseClass, className].filter(Boolean).join(' ')}>\n        <Pill\n          className={[canRestoreAsDraft && `${baseClass}__button`].filter(Boolean).join(' ')}\n          onClick={() => toggleModal(modalSlug)}\n        >\n          {t('version:restoreThisVersion')}\n        </Pill>\n        {canRestoreAsDraft && (\n          <Popup\n            button={\n              <Pill className={`${baseClass}__chevron`}>\n                <ChevronIcon />\n              </Pill>\n            }\n            caret={false}\n            render={() => (\n              <PopupList.ButtonGroup>\n                <PopupList.Button onClick={() => [setDraft(true), toggleModal(modalSlug)]}>\n                  {t('version:restoreAsDraft')}\n                </PopupList.Button>\n              </PopupList.ButtonGroup>\n            )}\n            size=\"large\"\n            verticalAlign=\"bottom\"\n          />\n        )}\n      </div>\n      <Modal className={`${baseClass}__modal`} slug={modalSlug}>\n        <MinimalTemplate className={`${baseClass}__modal-template`}>\n          <h1>{t('version:confirmVersionRestoration')}</h1>\n          <p>{restoreMessage}</p>\n          <Button\n            buttonStyle=\"secondary\"\n            onClick={processing ? undefined : () => toggleModal(modalSlug)}\n            type=\"button\"\n          >\n            {t('general:cancel')}\n          </Button>\n          <Button onClick={processing ? undefined : () => void handleRestore()}>\n            {processing ? t('version:restoring') : t('general:confirm')}\n          </Button>\n        </MinimalTemplate>\n      </Modal>\n    </Fragment>\n  )\n}\n\nexport default Restore\n"],"mappings":"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","ignoreList":[]}

package/dist/views/Version/Restore/index.scss

@@ -2,6 +2,37 @@
 
 .restore-version {
   cursor: pointer;
+  display: flex;
+
+  .popup-button {
+    display: flex;
+  }
+
+  &__chevron {
+    background-color: var(--theme-elevation-150);
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    cursor: pointer;
+
+    .stroke {
+      stroke-width: 1px;
+    }
+
+    &:hover {
+      background: var(--theme-elevation-100);
+    }
+  }
+
+  &__button {
+    border-top-right-radius: 0px;
+    border-bottom-right-radius: 0px;
+    margin-right: 2px;
+
+    &:focus {
+      border-radius: 0;
+      outline-offset: 0;
+    }
+  }
 
   &__modal {
     @include blur-bg;

package/dist/views/Version/Restore/types.d.ts

@@ -1,10 +1,11 @@
-import type { SanitizedCollectionConfig, SanitizedGlobalConfig } from 'payload/types';
+import type { SanitizedCollectionConfig, SanitizedGlobalConfig } from 'payload';
 export type Props = {
     className?: string;
     collectionSlug?: SanitizedCollectionConfig['slug'];
     globalSlug?: SanitizedGlobalConfig['slug'];
     label: SanitizedCollectionConfig['labels']['singular'];
     originalDocID: number | string;
+    status?: string;
     versionDate: string;
     versionID: string;
 };

package/dist/views/Version/Restore/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/views/Version/Restore/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,yBAAyB,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAA;AAErF,MAAM,MAAM,KAAK,GAAG;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAA;IAClD,UAAU,CAAC,EAAE,qBAAqB,CAAC,MAAM,CAAC,CAAA;IAC1C,KAAK,EAAE,yBAAyB,CAAC,QAAQ,CAAC,CAAC,UAAU,CAAC,CAAA;IACtD,aAAa,EAAE,MAAM,GAAG,MAAM,CAAA;IAC9B,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,EAAE,MAAM,CAAA;CAClB,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/views/Version/Restore/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,yBAAyB,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAE/E,MAAM,MAAM,KAAK,GAAG;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAA;IAClD,UAAU,CAAC,EAAE,qBAAqB,CAAC,MAAM,CAAC,CAAA;IAC1C,KAAK,EAAE,yBAAyB,CAAC,QAAQ,CAAC,CAAC,UAAU,CAAC,CAAA;IACtD,aAAa,EAAE,MAAM,GAAG,MAAM,CAAA;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,EAAE,MAAM,CAAA;CAClB,CAAA"}

package/dist/views/Version/Restore/types.js

@@ -1,3 +1,2 @@
-export { };
-
+export {};
 //# sourceMappingURL=types.js.map

package/dist/views/Version/Restore/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/views/Version/Restore/types.ts"],"sourcesContent":["import type { SanitizedCollectionConfig, SanitizedGlobalConfig } from 'payload/types'\n\nexport type Props = {\n  className?: string\n  collectionSlug?: SanitizedCollectionConfig['slug']\n  globalSlug?: SanitizedGlobalConfig['slug']\n  label: SanitizedCollectionConfig['labels']['singular']\n  originalDocID: number | string\n  versionDate: string\n  versionID: string\n}\n"],"names":[],"rangeMappings":"","mappings":"AAEA,WAQC"}
+{"version":3,"file":"types.js","names":[],"sources":["../../../../src/views/Version/Restore/types.ts"],"sourcesContent":["import type { SanitizedCollectionConfig, SanitizedGlobalConfig } from 'payload'\n\nexport type Props = {\n  className?: string\n  collectionSlug?: SanitizedCollectionConfig['slug']\n  globalSlug?: SanitizedGlobalConfig['slug']\n  label: SanitizedCollectionConfig['labels']['singular']\n  originalDocID: number | string\n  status?: string\n  versionDate: string\n  versionID: string\n}\n"],"mappings":"AAEA","ignoreList":[]}

package/dist/views/Version/SelectComparison/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/Version/SelectComparison/index.tsx"],"names":[],"mappings":"AAWA,OAAO,KAA2C,MAAM,OAAO,CAAA;AAE/D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAGvC,OAAO,cAAc,CAAA;AAQrB,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAiH5C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/Version/SelectComparison/index.tsx"],"names":[],"mappings":"AAOA,OAAO,KAA2C,MAAM,OAAO,CAAA;AAE/D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAGvC,OAAO,cAAc,CAAA;AAQrB,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAyJ5C,CAAA"}

package/dist/views/Version/SelectComparison/index.js

@@ -1,138 +1,147 @@
 'use client';
+
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ReactSelect } from '@payloadcms/ui/elements/ReactSelect';
-import { fieldBaseClass } from '@payloadcms/ui/fields/shared';
-import { useConfig } from '@payloadcms/ui/providers/Config';
-import { useDocumentInfo } from '@payloadcms/ui/providers/DocumentInfo';
-import { useTranslation } from '@payloadcms/ui/providers/Translation';
-import { formatDate } from '@payloadcms/ui/utilities/formatDate';
-import qs from 'qs';
+import { ReactSelect, fieldBaseClass, useConfig, useTranslation } from '@payloadcms/ui';
+import { formatDate } from '@payloadcms/ui/shared';
+import * as qs from 'qs-esm';
 import React, { useCallback, useEffect, useState } from 'react';
-import { mostRecentVersionOption, publishedVersionOption } from '../shared.js';
+import { renderPill } from '../../Versions/cells/AutosaveCell/index.js';
 const baseClass = 'compare-version';
 const maxResultsPerRequest = 10;
-const baseOptions = [
-    mostRecentVersionOption
-];
-export const SelectComparison = (props)=>{
-    const { baseURL, onChange, parentID, publishedDoc, value, versionID } = props;
-    const { admin: { dateFormat } } = useConfig();
-    const { docConfig } = useDocumentInfo();
-    const [options, setOptions] = useState(baseOptions);
-    const [lastLoadedPage, setLastLoadedPage] = useState(1);
-    const [errorLoading, setErrorLoading] = useState('');
-    const { i18n, t } = useTranslation();
-    const loadedAllOptionsRef = React.useRef(false);
-    const getResults = useCallback(async ({ lastLoadedPage: lastLoadedPageArg })=>{
-        if (loadedAllOptionsRef.current) return;
-        const query = {
-            depth: 0,
-            limit: maxResultsPerRequest,
-            page: lastLoadedPageArg,
-            where: {
-                and: [
-                    {
-                        id: {
-                            not_equals: versionID
-                        }
-                    }
-                ]
-            }
-        };
-        if (docConfig.versions?.drafts) {
-            query.where.and.push({
-                latest: {
-                    not_equals: true
-                }
-            });
-        }
-        if (parentID) {
-            query.where.and.push({
-                parent: {
-                    equals: parentID
-                }
-            });
+const baseOptions = [];
+export const SelectComparison = props => {
+  const {
+    baseURL,
+    latestDraftVersion,
+    latestPublishedVersion,
+    onChange,
+    parentID,
+    value,
+    versionID
+  } = props;
+  const {
+    config: {
+      admin: {
+        dateFormat
+      }
+    }
+  } = useConfig();
+  const [options, setOptions] = useState(baseOptions);
+  const [lastLoadedPage, setLastLoadedPage] = useState(1);
+  const [errorLoading, setErrorLoading] = useState('');
+  const {
+    i18n,
+    t
+  } = useTranslation();
+  const loadedAllOptionsRef = React.useRef(false);
+  const getResults = useCallback(async ({
+    lastLoadedPage: lastLoadedPageArg
+  }) => {
+    if (loadedAllOptionsRef.current) return;
+    const query = {
+      depth: 0,
+      limit: maxResultsPerRequest,
+      page: lastLoadedPageArg,
+      where: {
+        and: [{
+          id: {
+            not_equals: versionID
+          }
+        }]
+      }
+    };
+    if (parentID) {
+      query.where.and.push({
+        parent: {
+          equals: parentID
         }
-        const search = qs.stringify(query);
-        const response = await fetch(`${baseURL}?${search}`, {
-            credentials: 'include',
-            headers: {
-                'Accept-Language': i18n.language
-            }
+      });
+    }
+    const search = qs.stringify(query);
+    const response = await fetch(`${baseURL}?${search}`, {
+      credentials: 'include',
+      headers: {
+        'Accept-Language': i18n.language
+      }
+    });
+    if (response.ok) {
+      const data = await response.json();
+      if (data.docs.length > 0) {
+        const versionInfo = {
+          draft: {
+            currentLabel: t('version:currentDraft'),
+            latestVersion: latestDraftVersion,
+            pillStyle: undefined,
+            previousLabel: t('version:draft')
+          },
+          published: {
+            currentLabel: t('version:currentPublishedVersion'),
+            latestVersion: latestPublishedVersion,
+            pillStyle: 'success',
+            previousLabel: t('version:previouslyPublished')
+          }
+        };
+        const additionalOptions = data.docs.map(doc => {
+          const status = doc.version._status;
+          const {
+            currentLabel,
+            latestVersion,
+            pillStyle,
+            previousLabel
+          } = versionInfo[status] || {};
+          return {
+            label: /*#__PURE__*/_jsxs("div", {
+              children: [formatDate({
+                date: doc.updatedAt,
+                i18n,
+                pattern: dateFormat
+              }), "  ", renderPill(doc, latestVersion, currentLabel, previousLabel, pillStyle)]
+            }),
+            value: doc.id
+          };
         });
-        if (response.ok) {
-            const data = await response.json();
-            if (data.docs.length > 0) {
-                setOptions((existingOptions)=>[
-                        ...existingOptions,
-                        ...data.docs.map((doc)=>({
-                                label: formatDate({
-                                    date: doc.updatedAt,
-                                    i18n,
-                                    pattern: dateFormat
-                                }),
-                                value: doc.id
-                            }))
-                    ]);
-                if (!data.hasNextPage) {
-                    loadedAllOptionsRef.current = true;
-                }
-                setLastLoadedPage(data.page);
-            }
-        } else {
-            setErrorLoading(t('error:unspecific'));
+        setOptions(existingOptions => [...existingOptions, ...additionalOptions]);
+        if (!data.hasNextPage) {
+          loadedAllOptionsRef.current = true;
         }
-    }, [
-        dateFormat,
-        baseURL,
-        parentID,
-        versionID,
-        t,
-        i18n,
-        docConfig.versions?.drafts
-    ]);
-    useEffect(()=>{
+        setLastLoadedPage(data.page);
+      }
+    } else {
+      setErrorLoading(t('error:unspecific'));
+    }
+  }, [dateFormat, baseURL, parentID, versionID, t, i18n, latestDraftVersion, latestPublishedVersion]);
+  useEffect(() => {
+    void getResults({
+      lastLoadedPage: 1
+    });
+  }, [getResults]);
+  const filteredOptions = options.filter((option, index, self) => self.findIndex(t_0 => t_0.value === option.value) === index);
+  useEffect(() => {
+    if (filteredOptions.length > 0 && !value) {
+      onChange(filteredOptions[0]);
+    }
+  }, [filteredOptions, value, onChange]);
+  return /*#__PURE__*/_jsxs("div", {
+    className: [fieldBaseClass, baseClass, errorLoading && 'error-loading'].filter(Boolean).join(' '),
+    children: [/*#__PURE__*/_jsx("div", {
+      className: `${baseClass}__label`,
+      children: t('version:compareVersion')
+    }), !errorLoading && /*#__PURE__*/_jsx(ReactSelect, {
+      isClearable: false,
+      isSearchable: false,
+      onChange: onChange,
+      onMenuScrollToBottom: () => {
         void getResults({
-            lastLoadedPage: 1
+          lastLoadedPage: lastLoadedPage + 1
         });
-    }, [
-        getResults
-    ]);
-    return /*#__PURE__*/ _jsxs("div", {
-        className: [
-            fieldBaseClass,
-            baseClass,
-            errorLoading && 'error-loading'
-        ].filter(Boolean).join(' '),
-        children: [
-            /*#__PURE__*/ _jsx("div", {
-                className: `${baseClass}__label`,
-                children: t('version:compareVersion')
-            }),
-            !errorLoading && /*#__PURE__*/ _jsx(ReactSelect, {
-                isClearable: false,
-                isSearchable: false,
-                onChange: onChange,
-                onMenuScrollToBottom: ()=>{
-                    void getResults({
-                        lastLoadedPage: lastLoadedPage + 1
-                    });
-                },
-                options: [
-                    ...publishedDoc?._status === 'published' ? [
-                        publishedVersionOption
-                    ] : [],
-                    ...options
-                ],
-                placeholder: t('version:selectVersionToCompare'),
-                value: value
-            }),
-            errorLoading && /*#__PURE__*/ _jsx("div", {
-                className: `${baseClass}__error-loading`,
-                children: errorLoading
-            })
-        ]
-    });
+      },
+      options: filteredOptions,
+      placeholder: t('version:selectVersionToCompare'),
+      value: value
+    }), errorLoading && /*#__PURE__*/_jsx("div", {
+      className: `${baseClass}__error-loading`,
+      children: errorLoading
+    })]
+  });
 };
-
 //# sourceMappingURL=index.js.map