@payloadcms/ui 3.24.0-canary.4c8cafd → 3.24.0-canary.58e9eb5

package/dist/elements/ConfirmationModal/index.js

@@ -0,0 +1,143 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Modal, useModal } from '@faceless-ui/modal';
+import React from 'react';
+import { useEditDepth } from '../../providers/EditDepth/index.js';
+import { useTranslation } from '../../providers/Translation/index.js';
+import { Button } from '../Button/index.js';
+import { drawerZBase } from '../Drawer/index.js';
+import './index.scss';
+const baseClass = 'confirmation-modal';
+export function ConfirmationModal(props) {
+  const $ = _c(31);
+  const {
+    body,
+    cancelLabel,
+    confirmingLabel,
+    confirmLabel,
+    heading,
+    modalSlug,
+    onCancel,
+    onConfirm
+  } = props;
+  const editDepth = useEditDepth();
+  const [confirming, setConfirming] = React.useState(false);
+  const {
+    closeModal
+  } = useModal();
+  const {
+    t
+  } = useTranslation();
+  const t0 = drawerZBase + editDepth;
+  let t1;
+  if ($[0] !== body || $[1] !== cancelLabel || $[2] !== closeModal || $[3] !== confirmLabel || $[4] !== confirming || $[5] !== confirmingLabel || $[6] !== heading || $[7] !== modalSlug || $[8] !== onCancel || $[9] !== onConfirm || $[10] !== t || $[11] !== t0) {
+    let t2;
+    if ($[13] !== closeModal || $[14] !== confirming || $[15] !== modalSlug || $[16] !== onCancel) {
+      t2 = confirming ? undefined : () => {
+        closeModal(modalSlug);
+        if (typeof onCancel === "function") {
+          onCancel();
+        }
+      };
+      $[13] = closeModal;
+      $[14] = confirming;
+      $[15] = modalSlug;
+      $[16] = onCancel;
+      $[17] = t2;
+    } else {
+      t2 = $[17];
+    }
+    let t3;
+    if ($[18] !== cancelLabel || $[19] !== t) {
+      t3 = cancelLabel || t("general:cancel");
+      $[18] = cancelLabel;
+      $[19] = t;
+      $[20] = t3;
+    } else {
+      t3 = $[20];
+    }
+    let t4;
+    if ($[21] !== closeModal || $[22] !== confirming || $[23] !== modalSlug || $[24] !== onConfirm) {
+      t4 = () => {
+        if (!confirming) {
+          setConfirming(true);
+          onConfirm({
+            closeConfirmationModal: () => closeModal(modalSlug),
+            setConfirming: state => setConfirming(state)
+          });
+        }
+      };
+      $[21] = closeModal;
+      $[22] = confirming;
+      $[23] = modalSlug;
+      $[24] = onConfirm;
+      $[25] = t4;
+    } else {
+      t4 = $[25];
+    }
+    let t5;
+    if ($[26] !== confirmLabel || $[27] !== confirming || $[28] !== confirmingLabel || $[29] !== t) {
+      t5 = confirming ? confirmingLabel || t("general:loading") : confirmLabel || t("general:confirm");
+      $[26] = confirmLabel;
+      $[27] = confirming;
+      $[28] = confirmingLabel;
+      $[29] = t;
+      $[30] = t5;
+    } else {
+      t5 = $[30];
+    }
+    t1 = _jsx(Modal, {
+      className: baseClass,
+      slug: modalSlug,
+      style: {
+        zIndex: t0
+      },
+      children: _jsxs("div", {
+        className: `${baseClass}__wrapper`,
+        children: [_jsxs("div", {
+          className: `${baseClass}__content`,
+          children: [_jsx("h1", {
+            children: heading
+          }), _jsx("p", {
+            children: body
+          })]
+        }), _jsxs("div", {
+          className: `${baseClass}__controls`,
+          children: [_jsx(Button, {
+            buttonStyle: "secondary",
+            disabled: confirming,
+            id: "confirm-cancel",
+            onClick: t2,
+            size: "large",
+            type: "button",
+            children: t3
+          }), _jsx(Button, {
+            id: "confirm-action",
+            onClick: t4,
+            size: "large",
+            children: t5
+          })]
+        })]
+      })
+    });
+    $[0] = body;
+    $[1] = cancelLabel;
+    $[2] = closeModal;
+    $[3] = confirmLabel;
+    $[4] = confirming;
+    $[5] = confirmingLabel;
+    $[6] = heading;
+    $[7] = modalSlug;
+    $[8] = onCancel;
+    $[9] = onConfirm;
+    $[10] = t;
+    $[11] = t0;
+    $[12] = t1;
+  } else {
+    t1 = $[12];
+  }
+  return t1;
+}
+//# sourceMappingURL=index.js.map

package/dist/elements/ConfirmationModal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","Modal","useModal","React","useEditDepth","useTranslation","Button","drawerZBase","baseClass","ConfirmationModal","props","$","body","cancelLabel","confirmingLabel","confirmLabel","heading","modalSlug","onCancel","onConfirm","editDepth","confirming","setConfirming","useState","closeModal","t","t0","t1","t2","undefined","t3","t4","closeConfirmationModal","state","t5","_jsx","className","slug","style","zIndex","children","_jsxs","buttonStyle","disabled","id","onClick","size","type"],"sources":["../../../src/elements/ConfirmationModal/index.tsx"],"sourcesContent":["'use client'\nimport { Modal, useModal } from '@faceless-ui/modal'\nimport React from 'react'\n\nimport { useEditDepth } from '../../providers/EditDepth/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport { drawerZBase } from '../Drawer/index.js'\nimport './index.scss'\n\nconst baseClass = 'confirmation-modal'\n\nexport type OnConfirm = (args: {\n  closeConfirmationModal: () => void\n  setConfirming: (state: boolean) => void\n}) => Promise<void> | void\n\nexport type OnCancel = () => void\n\nexport type ConfirmationModalProps = {\n  body: React.ReactNode\n  cancelLabel?: string\n  confirmingLabel?: string\n  confirmLabel?: string\n  heading: React.ReactNode\n  modalSlug: string\n  onCancel?: OnCancel\n  onConfirm: OnConfirm\n}\n\nexport function ConfirmationModal(props: ConfirmationModalProps) {\n  const {\n    body,\n    cancelLabel,\n    confirmingLabel,\n    confirmLabel,\n    heading,\n    modalSlug,\n    onCancel,\n    onConfirm,\n  } = props\n\n  const editDepth = useEditDepth()\n\n  const [confirming, setConfirming] = React.useState(false)\n\n  const { closeModal } = useModal()\n  const { t } = useTranslation()\n\n  return (\n    <Modal\n      className={baseClass}\n      slug={modalSlug}\n      style={{\n        zIndex: drawerZBase + editDepth,\n      }}\n    >\n      <div className={`${baseClass}__wrapper`}>\n        <div className={`${baseClass}__content`}>\n          <h1>{heading}</h1>\n          <p>{body}</p>\n        </div>\n        <div className={`${baseClass}__controls`}>\n          <Button\n            buttonStyle=\"secondary\"\n            disabled={confirming}\n            id=\"confirm-cancel\"\n            onClick={\n              confirming\n                ? undefined\n                : () => {\n                    closeModal(modalSlug)\n                    if (typeof onCancel === 'function') {\n                      onCancel()\n                    }\n                  }\n            }\n            size=\"large\"\n            type=\"button\"\n          >\n            {cancelLabel || t('general:cancel')}\n          </Button>\n          <Button\n            id=\"confirm-action\"\n            onClick={() => {\n              if (!confirming) {\n                setConfirming(true)\n                void onConfirm({\n                  closeConfirmationModal: () => closeModal(modalSlug),\n                  setConfirming: (state) => setConfirming(state),\n                })\n              }\n            }}\n            size=\"large\"\n          >\n            {confirming\n              ? confirmingLabel || t('general:loading')\n              : confirmLabel || t('general:confirm')}\n          </Button>\n        </div>\n      </div>\n    </Modal>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/{GenerateConfirmation → ConfirmationModal}/index.scss

@@ -1,7 +1,7 @@
 @import '../../scss/styles.scss';
 
 @layer payload-default {
-  .generate-confirmation {
+  .confirmation-modal {
     @include blur-bg;
     display: flex;
     align-items: center;

package/dist/elements/DeleteDocument/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/DeleteDocument/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAKxD,OAAO,KAA2C,MAAM,OAAO,CAAA;AAG/D,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,+BAA+B,CAAA;AAc9E,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;IAC1B,QAAQ,CAAC,cAAc,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAA;IAC1D,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,QAAQ,CAAC,EAAE,yBAAyB,CAAC,UAAU,CAAC,CAAA;IACzD,QAAQ,CAAC,mBAAmB,CAAC,EAAE,OAAO,CAAA;IACtC,QAAQ,CAAC,aAAa,EAAE,yBAAyB,CAAC,QAAQ,CAAC,CAAC,UAAU,CAAC,CAAA;IACvE,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,UAAU,EAAE,yBAAyB,CAAC,OAAO,CAAC,CAAC,YAAY,CAAC,CAAA;CACtE,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA+L1C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/DeleteDocument/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAKxD,OAAO,KAAsB,MAAM,OAAO,CAAA;AAI1C,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,+BAA+B,CAAA;AAY9E,OAAO,cAAc,CAAA;AAErB,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;IAC1B,QAAQ,CAAC,cAAc,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAA;IAC1D,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,QAAQ,CAAC,EAAE,yBAAyB,CAAC,UAAU,CAAC,CAAA;IACzD,QAAQ,CAAC,mBAAmB,CAAC,EAAE,OAAO,CAAA;IACtC,QAAQ,CAAC,aAAa,EAAE,yBAAyB,CAAC,QAAQ,CAAC,CAAC,UAAU,CAAC,CAAA;IACvE,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,UAAU,EAAE,yBAAyB,CAAC,OAAO,CAAC,CAAC,YAAY,CAAC,CAAA;CACtE,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAwJ1C,CAAA"}

package/dist/elements/DeleteDocument/index.js

@@ -1,25 +1,22 @@
 'use client';
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Modal, useModal } from '@faceless-ui/modal';
+import { useModal } from '@faceless-ui/modal';
 import { getTranslation } from '@payloadcms/translations';
 import { useRouter } from 'next/navigation.js';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback } from 'react';
 import { toast } from 'sonner';
 import { useForm } from '../../forms/Form/context.js';
 import { useConfig } from '../../providers/Config/index.js';
 import { useDocumentInfo } from '../../providers/DocumentInfo/index.js';
-import { useEditDepth } from '../../providers/EditDepth/index.js';
 import { useRouteTransition } from '../../providers/RouteTransition/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { requests } from '../../utilities/api.js';
 import { formatAdminURL } from '../../utilities/formatAdminURL.js';
-import { Button } from '../Button/index.js';
-import { drawerZBase } from '../Drawer/index.js';
+import { ConfirmationModal } from '../ConfirmationModal/index.js';
 import { PopupList } from '../Popup/index.js';
 import { Translation } from '../Translation/index.js';
 import './index.scss';
-const baseClass = 'delete-document';
 export const DeleteDocument = props => {
   const {
     id,
@@ -46,11 +43,6 @@ export const DeleteDocument = props => {
   const {
     setModified
   } = useForm();
-  const [deleting, setDeleting] = useState(false);
-  const {
-    closeModal,
-    toggleModal
-  } = useModal();
   const router = useRouter();
   const {
     i18n,
@@ -59,25 +51,23 @@ export const DeleteDocument = props => {
   const {
     title
   } = useDocumentInfo();
-  const editDepth = useEditDepth();
   const {
     startRouteTransition
   } = useRouteTransition();
+  const {
+    openModal
+  } = useModal();
   const titleToRender = titleFromProps || title || id;
   const modalSlug = `delete-${id}`;
   const addDefaultError = useCallback(() => {
-    setDeleting(false);
     toast.error(t('error:deletingTitle', {
       title
     }));
   }, [t, title]);
-  useEffect(() => {
-    return () => {
-      closeModal(modalSlug);
-    };
-  }, [closeModal, modalSlug]);
-  const handleDelete = useCallback(async () => {
-    setDeleting(true);
+  const handleDelete = useCallback(async ({
+    closeConfirmationModal,
+    setConfirming
+  }) => {
     setModified(false);
     try {
       await requests.delete(`${serverURL}${api}/${collectionSlug}/${id}`, {
@@ -88,9 +78,9 @@ export const DeleteDocument = props => {
       }).then(async res => {
         try {
           const json = await res.json();
+          setConfirming(false);
+          closeConfirmationModal();
           if (res.status < 400) {
-            setDeleting(false);
-            toggleModal(modalSlug);
             toast.success(t('general:titleDeleted', {
               label: getTranslation(singularLabel, i18n),
               title
@@ -107,83 +97,52 @@ export const DeleteDocument = props => {
                 collectionConfig
               });
             }
-            toggleModal(modalSlug);
             return;
           }
-          toggleModal(modalSlug);
           if (json.errors) {
             json.errors.forEach(error => toast.error(error.message));
           } else {
             addDefaultError();
           }
           return false;
-        } catch (e_0) {
+        } catch (_err_0) {
           return addDefaultError();
         }
       });
-    } catch (e) {
-      addDefaultError();
+    } catch (_err) {
+      setConfirming(false);
+      closeConfirmationModal();
+      return addDefaultError();
     }
-  }, [setModified, serverURL, api, collectionSlug, id, toggleModal, modalSlug, t, singularLabel, i18n, title, router, adminRoute, addDefaultError, redirectAfterDelete, onDelete, collectionConfig, startRouteTransition]);
+  }, [setModified, serverURL, api, collectionSlug, id, t, singularLabel, addDefaultError, i18n, title, router, adminRoute, redirectAfterDelete, onDelete, collectionConfig, startRouteTransition]);
   if (id) {
     return /*#__PURE__*/_jsxs(React.Fragment, {
       children: [/*#__PURE__*/_jsx(PopupList.Button, {
         id: buttonId,
         onClick: () => {
-          setDeleting(false);
-          toggleModal(modalSlug);
+          openModal(modalSlug);
         },
         children: t('general:delete')
-      }), /*#__PURE__*/_jsx(Modal, {
-        className: baseClass,
-        slug: modalSlug,
-        style: {
-          zIndex: drawerZBase + editDepth
-        },
-        children: /*#__PURE__*/_jsxs("div", {
-          className: `${baseClass}__wrapper`,
-          children: [/*#__PURE__*/_jsxs("div", {
-            className: `${baseClass}__content`,
-            children: [/*#__PURE__*/_jsx("h1", {
-              children: t('general:confirmDeletion')
-            }), /*#__PURE__*/_jsx("p", {
-              children: /*#__PURE__*/_jsx(Translation, {
-                elements: {
-                  '1': ({
-                    children
-                  }) => /*#__PURE__*/_jsx("strong", {
-                    children: children
-                  })
-                },
-                i18nKey: "general:aboutToDelete",
-                t: t,
-                variables: {
-                  label: getTranslation(singularLabel, i18n),
-                  title: titleToRender
-                }
-              })
-            })]
-          }), /*#__PURE__*/_jsxs("div", {
-            className: `${baseClass}__controls`,
-            children: [/*#__PURE__*/_jsx(Button, {
-              buttonStyle: "secondary",
-              id: "confirm-cancel",
-              onClick: deleting ? undefined : () => toggleModal(modalSlug),
-              size: "large",
-              type: "button",
-              children: t('general:cancel')
-            }), /*#__PURE__*/_jsx(Button, {
-              id: "confirm-delete",
-              onClick: () => {
-                if (!deleting) {
-                  void handleDelete();
-                }
-              },
-              size: "large",
-              children: deleting ? t('general:deleting') : t('general:confirm')
-            })]
-          })]
-        })
+      }), /*#__PURE__*/_jsx(ConfirmationModal, {
+        body: /*#__PURE__*/_jsx(Translation, {
+          elements: {
+            '1': ({
+              children
+            }) => /*#__PURE__*/_jsx("strong", {
+              children: children
+            })
+          },
+          i18nKey: "general:aboutToDelete",
+          t: t,
+          variables: {
+            label: getTranslation(singularLabel, i18n),
+            title: titleToRender
+          }
+        }),
+        confirmingLabel: t('general:deleting'),
+        heading: t('general:confirmDeletion'),
+        modalSlug: modalSlug,
+        onConfirm: handleDelete
       })]
     });
   }

package/dist/elements/DeleteDocument/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Modal","useModal","getTranslation","useRouter","React","useCallback","useEffect","useState","toast","useForm","useConfig","useDocumentInfo","useEditDepth","useRouteTransition","useTranslation","requests","formatAdminURL","Button","drawerZBase","PopupList","Translation","baseClass","DeleteDocument","props","id","buttonId","collectionSlug","onDelete","redirectAfterDelete","singularLabel","title","titleFromProps","config","routes","admin","adminRoute","api","serverURL","getEntityConfig","collectionConfig","setModified","deleting","setDeleting","closeModal","toggleModal","router","i18n","t","editDepth","startRouteTransition","titleToRender","modalSlug","addDefaultError","error","handleDelete","delete","headers","language","then","res","json","status","success","label","message","push","path","errors","forEach","e","_jsxs","Fragment","_jsx","onClick","className","slug","style","zIndex","elements","1","children","i18nKey","variables","buttonStyle","undefined","size","type"],"sources":["../../../src/elements/DeleteDocument/index.tsx"],"sourcesContent":["'use client'\nimport type { SanitizedCollectionConfig } from 'payload'\n\nimport { Modal, useModal } from '@faceless-ui/modal'\nimport { getTranslation } from '@payloadcms/translations'\nimport { useRouter } from 'next/navigation.js'\nimport React, { useCallback, useEffect, useState } from 'react'\nimport { toast } from 'sonner'\n\nimport type { DocumentDrawerContextType } from '../DocumentDrawer/Provider.js'\n\nimport { useForm } from '../../forms/Form/context.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { useEditDepth } from '../../providers/EditDepth/index.js'\nimport { useRouteTransition } from '../../providers/RouteTransition/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { requests } from '../../utilities/api.js'\nimport { formatAdminURL } from '../../utilities/formatAdminURL.js'\nimport { Button } from '../Button/index.js'\nimport { drawerZBase } from '../Drawer/index.js'\nimport { PopupList } from '../Popup/index.js'\nimport { Translation } from '../Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'delete-document'\n\nexport type Props = {\n  readonly buttonId?: string\n  readonly collectionSlug: SanitizedCollectionConfig['slug']\n  readonly id?: string\n  readonly onDelete?: DocumentDrawerContextType['onDelete']\n  readonly redirectAfterDelete?: boolean\n  readonly singularLabel: SanitizedCollectionConfig['labels']['singular']\n  readonly title?: string\n  readonly useAsTitle: SanitizedCollectionConfig['admin']['useAsTitle']\n}\n\nexport const DeleteDocument: React.FC<Props> = (props) => {\n  const {\n    id,\n    buttonId,\n    collectionSlug,\n    onDelete,\n    redirectAfterDelete = true,\n    singularLabel,\n    title: titleFromProps,\n  } = props\n\n  const {\n    config: {\n      routes: { admin: adminRoute, api },\n      serverURL,\n    },\n    getEntityConfig,\n  } = useConfig()\n\n  const collectionConfig = getEntityConfig({ collectionSlug })\n\n  const { setModified } = useForm()\n  const [deleting, setDeleting] = useState(false)\n  const { closeModal, toggleModal } = useModal()\n  const router = useRouter()\n  const { i18n, t } = useTranslation()\n  const { title } = useDocumentInfo()\n  const editDepth = useEditDepth()\n  const { startRouteTransition } = useRouteTransition()\n\n  const titleToRender = titleFromProps || title || id\n\n  const modalSlug = `delete-${id}`\n\n  const addDefaultError = useCallback(() => {\n    setDeleting(false)\n    toast.error(t('error:deletingTitle', { title }))\n  }, [t, title])\n\n  useEffect(() => {\n    return () => {\n      closeModal(modalSlug)\n    }\n  }, [closeModal, modalSlug])\n\n  const handleDelete = useCallback(async () => {\n    setDeleting(true)\n    setModified(false)\n\n    try {\n      await requests\n        .delete(`${serverURL}${api}/${collectionSlug}/${id}`, {\n          headers: {\n            'Accept-Language': i18n.language,\n            'Content-Type': 'application/json',\n          },\n        })\n        .then(async (res) => {\n          try {\n            const json = await res.json()\n\n            if (res.status < 400) {\n              setDeleting(false)\n              toggleModal(modalSlug)\n\n              toast.success(\n                t('general:titleDeleted', { label: getTranslation(singularLabel, i18n), title }) ||\n                  json.message,\n              )\n\n              if (redirectAfterDelete) {\n                return startRouteTransition(() =>\n                  router.push(\n                    formatAdminURL({\n                      adminRoute,\n                      path: `/collections/${collectionSlug}`,\n                    }),\n                  ),\n                )\n              }\n\n              if (typeof onDelete === 'function') {\n                await onDelete({ id, collectionConfig })\n              }\n\n              toggleModal(modalSlug)\n\n              return\n            }\n\n            toggleModal(modalSlug)\n\n            if (json.errors) {\n              json.errors.forEach((error) => toast.error(error.message))\n            } else {\n              addDefaultError()\n            }\n            return false\n          } catch (e) {\n            return addDefaultError()\n          }\n        })\n    } catch (e) {\n      addDefaultError()\n    }\n  }, [\n    setModified,\n    serverURL,\n    api,\n    collectionSlug,\n    id,\n    toggleModal,\n    modalSlug,\n    t,\n    singularLabel,\n    i18n,\n    title,\n    router,\n    adminRoute,\n    addDefaultError,\n    redirectAfterDelete,\n    onDelete,\n    collectionConfig,\n    startRouteTransition,\n  ])\n\n  if (id) {\n    return (\n      <React.Fragment>\n        <PopupList.Button\n          id={buttonId}\n          onClick={() => {\n            setDeleting(false)\n            toggleModal(modalSlug)\n          }}\n        >\n          {t('general:delete')}\n        </PopupList.Button>\n        <Modal\n          className={baseClass}\n          slug={modalSlug}\n          style={{\n            zIndex: drawerZBase + editDepth,\n          }}\n        >\n          <div className={`${baseClass}__wrapper`}>\n            <div className={`${baseClass}__content`}>\n              <h1>{t('general:confirmDeletion')}</h1>\n              <p>\n                <Translation\n                  elements={{\n                    '1': ({ children }) => <strong>{children}</strong>,\n                  }}\n                  i18nKey=\"general:aboutToDelete\"\n                  t={t}\n                  variables={{\n                    label: getTranslation(singularLabel, i18n),\n                    title: titleToRender,\n                  }}\n                />\n              </p>\n            </div>\n            <div className={`${baseClass}__controls`}>\n              <Button\n                buttonStyle=\"secondary\"\n                id=\"confirm-cancel\"\n                onClick={deleting ? undefined : () => toggleModal(modalSlug)}\n                size=\"large\"\n                type=\"button\"\n              >\n                {t('general:cancel')}\n              </Button>\n              <Button\n                id=\"confirm-delete\"\n                onClick={() => {\n                  if (!deleting) {\n                    void handleDelete()\n                  }\n                }}\n                size=\"large\"\n              >\n                {deleting ? t('general:deleting') : t('general:confirm')}\n              </Button>\n            </div>\n          </div>\n        </Modal>\n      </React.Fragment>\n    )\n  }\n\n  return null\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["useModal","getTranslation","useRouter","React","useCallback","toast","useForm","useConfig","useDocumentInfo","useRouteTransition","useTranslation","requests","formatAdminURL","ConfirmationModal","PopupList","Translation","DeleteDocument","props","id","buttonId","collectionSlug","onDelete","redirectAfterDelete","singularLabel","title","titleFromProps","config","routes","admin","adminRoute","api","serverURL","getEntityConfig","collectionConfig","setModified","router","i18n","t","startRouteTransition","openModal","titleToRender","modalSlug","addDefaultError","error","handleDelete","closeConfirmationModal","setConfirming","delete","headers","language","then","res","json","status","success","label","message","push","path","errors","forEach","_err","_jsxs","Fragment","_jsx","Button","onClick","body","elements","1","children","i18nKey","variables","confirmingLabel","heading","onConfirm"],"sources":["../../../src/elements/DeleteDocument/index.tsx"],"sourcesContent":["'use client'\nimport type { SanitizedCollectionConfig } from 'payload'\n\nimport { useModal } from '@faceless-ui/modal'\nimport { getTranslation } from '@payloadcms/translations'\nimport { useRouter } from 'next/navigation.js'\nimport React, { useCallback } from 'react'\nimport { toast } from 'sonner'\n\nimport type { OnConfirm } from '../ConfirmationModal/index.js'\nimport type { DocumentDrawerContextType } from '../DocumentDrawer/Provider.js'\n\nimport { useForm } from '../../forms/Form/context.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { useRouteTransition } from '../../providers/RouteTransition/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { requests } from '../../utilities/api.js'\nimport { formatAdminURL } from '../../utilities/formatAdminURL.js'\nimport { ConfirmationModal } from '../ConfirmationModal/index.js'\nimport { PopupList } from '../Popup/index.js'\nimport { Translation } from '../Translation/index.js'\nimport './index.scss'\n\nexport type Props = {\n  readonly buttonId?: string\n  readonly collectionSlug: SanitizedCollectionConfig['slug']\n  readonly id?: string\n  readonly onDelete?: DocumentDrawerContextType['onDelete']\n  readonly redirectAfterDelete?: boolean\n  readonly singularLabel: SanitizedCollectionConfig['labels']['singular']\n  readonly title?: string\n  readonly useAsTitle: SanitizedCollectionConfig['admin']['useAsTitle']\n}\n\nexport const DeleteDocument: React.FC<Props> = (props) => {\n  const {\n    id,\n    buttonId,\n    collectionSlug,\n    onDelete,\n    redirectAfterDelete = true,\n    singularLabel,\n    title: titleFromProps,\n  } = props\n\n  const {\n    config: {\n      routes: { admin: adminRoute, api },\n      serverURL,\n    },\n    getEntityConfig,\n  } = useConfig()\n\n  const collectionConfig = getEntityConfig({ collectionSlug })\n\n  const { setModified } = useForm()\n  const router = useRouter()\n  const { i18n, t } = useTranslation()\n  const { title } = useDocumentInfo()\n  const { startRouteTransition } = useRouteTransition()\n  const { openModal } = useModal()\n\n  const titleToRender = titleFromProps || title || id\n\n  const modalSlug = `delete-${id}`\n\n  const addDefaultError = useCallback(() => {\n    toast.error(t('error:deletingTitle', { title }))\n  }, [t, title])\n\n  const handleDelete: OnConfirm = useCallback(\n    async ({ closeConfirmationModal, setConfirming }) => {\n      setModified(false)\n\n      try {\n        await requests\n          .delete(`${serverURL}${api}/${collectionSlug}/${id}`, {\n            headers: {\n              'Accept-Language': i18n.language,\n              'Content-Type': 'application/json',\n            },\n          })\n          .then(async (res) => {\n            try {\n              const json = await res.json()\n              setConfirming(false)\n              closeConfirmationModal()\n\n              if (res.status < 400) {\n                toast.success(\n                  t('general:titleDeleted', {\n                    label: getTranslation(singularLabel, i18n),\n                    title,\n                  }) || json.message,\n                )\n\n                if (redirectAfterDelete) {\n                  return startRouteTransition(() =>\n                    router.push(\n                      formatAdminURL({\n                        adminRoute,\n                        path: `/collections/${collectionSlug}`,\n                      }),\n                    ),\n                  )\n                }\n\n                if (typeof onDelete === 'function') {\n                  await onDelete({ id, collectionConfig })\n                }\n\n                return\n              }\n\n              if (json.errors) {\n                json.errors.forEach((error) => toast.error(error.message))\n              } else {\n                addDefaultError()\n              }\n\n              return false\n            } catch (_err) {\n              return addDefaultError()\n            }\n          })\n      } catch (_err) {\n        setConfirming(false)\n        closeConfirmationModal()\n        return addDefaultError()\n      }\n    },\n    [\n      setModified,\n      serverURL,\n      api,\n      collectionSlug,\n      id,\n      t,\n      singularLabel,\n      addDefaultError,\n      i18n,\n      title,\n      router,\n      adminRoute,\n      redirectAfterDelete,\n      onDelete,\n      collectionConfig,\n      startRouteTransition,\n    ],\n  )\n\n  if (id) {\n    return (\n      <React.Fragment>\n        <PopupList.Button\n          id={buttonId}\n          onClick={() => {\n            openModal(modalSlug)\n          }}\n        >\n          {t('general:delete')}\n        </PopupList.Button>\n        <ConfirmationModal\n          body={\n            <Translation\n              elements={{\n                '1': ({ children }) => <strong>{children}</strong>,\n              }}\n              i18nKey=\"general:aboutToDelete\"\n              t={t}\n              variables={{\n                label: getTranslation(singularLabel, i18n),\n                title: titleToRender,\n              }}\n            />\n          }\n          confirmingLabel={t('general:deleting')}\n          heading={t('general:confirmDeletion')}\n          modalSlug={modalSlug}\n          onConfirm={handleDelete}\n        />\n      </React.Fragment>\n    )\n  }\n\n  return null\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/DeleteDocument/index.scss

@@ -11,34 +11,5 @@
     &__toggle {
       @extend %btn-reset;
     }
-
-    &__wrapper {
-      z-index: 1;
-      position: relative;
-      display: flex;
-      flex-direction: column;
-      gap: base(0.8);
-      padding: base(2);
-      max-width: base(36);
-    }
-
-    &__content {
-      display: flex;
-      flex-direction: column;
-      gap: base(0.4);
-
-      > * {
-        margin: 0;
-      }
-    }
-
-    &__controls {
-      display: flex;
-      gap: base(0.4);
-
-      .btn {
-        margin: 0;
-      }
-    }
   }
 }

package/dist/elements/DeleteMany/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/DeleteMany/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAMrD,OAAO,KAAgC,MAAM,OAAO,CAAA;AAYpD,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,KAAK,GAAG;IAClB,UAAU,EAAE,sBAAsB,CAAA;IAClC,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAyJtC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/DeleteMany/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAMrD,OAAO,KAAsB,MAAM,OAAO,CAAA;AAc1C,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,KAAK,GAAG;IAClB,UAAU,EAAE,sBAAsB,CAAA;IAClC,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA6ItC,CAAA"}

package/dist/elements/DeleteMany/index.js

@@ -1,11 +1,11 @@
 'use client';
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Modal, useModal } from '@faceless-ui/modal';
+import { useModal } from '@faceless-ui/modal';
 import { getTranslation } from '@payloadcms/translations';
 import { useRouter, useSearchParams } from 'next/navigation.js';
 import * as qs from 'qs-esm';
-import React, { useCallback, useState } from 'react';
+import React, { useCallback } from 'react';
 import { toast } from 'sonner';
 import { useAuth } from '../../providers/Auth/index.js';
 import { useConfig } from '../../providers/Config/index.js';
@@ -14,7 +14,7 @@ import { SelectAllStatus, useSelection } from '../../providers/Selection/index.j
 import { useTranslation } from '../../providers/Translation/index.js';
 import { requests } from '../../utilities/api.js';
 import { mergeListSearchAndWhere } from '../../utilities/mergeListSearchAndWhere.js';
-import { Button } from '../Button/index.js';
+import { ConfirmationModal } from '../ConfirmationModal/index.js';
 import { Pill } from '../Pill/index.js';
 import './index.scss';
 const baseClass = 'delete-documents';
@@ -41,7 +41,7 @@ export const DeleteMany = props => {
     }
   } = useConfig();
   const {
-    toggleModal
+    openModal
   } = useModal();
   const {
     count,
@@ -53,7 +53,6 @@ export const DeleteMany = props => {
     i18n,
     t
   } = useTranslation();
-  const [deleting, setDeleting] = useState(false);
   const router = useRouter();
   const searchParams = useSearchParams();
   const {
@@ -65,8 +64,10 @@ export const DeleteMany = props => {
   const addDefaultError = useCallback(() => {
     toast.error(t('error:unknown'));
   }, [t]);
-  const handleDelete = useCallback(async () => {
-    setDeleting(true);
+  const handleDelete = useCallback(async ({
+    closeConfirmationModal,
+    setConfirming
+  }) => {
     const queryWithSearch = mergeListSearchAndWhere({
       collectionConfig: collection,
       search: searchParams.get('search')
@@ -80,7 +81,8 @@ export const DeleteMany = props => {
     }).then(async res => {
       try {
         const json = await res.json();
-        toggleModal(modalSlug);
+        setConfirming(false);
+        closeConfirmationModal();
         const deletedDocs = json?.docs.length || 0;
         const successLabel = deletedDocs > 1 ? plural : singular;
         if (res.status < 400 || deletedDocs > 0) {
@@ -107,14 +109,16 @@ export const DeleteMany = props => {
             description: json.errors.map(error_0 => error_0.message).join('\n')
           });
         } else {
-          addDefaultError();
+          return addDefaultError();
         }
         return false;
       } catch (_err) {
+        setConfirming(false);
+        closeConfirmationModal();
         return addDefaultError();
       }
     });
-  }, [searchParams, addDefaultError, api, getQueryParams, i18n, modalSlug, plural, router, selectAll, serverURL, singular, slug, t, toggleAll, toggleModal, clearRouteCache, collection]);
+  }, [searchParams, addDefaultError, api, getQueryParams, i18n, plural, router, selectAll, serverURL, singular, slug, t, toggleAll, clearRouteCache, collection]);
   if (selectAll === SelectAllStatus.None || !hasDeletePermission) {
     return null;
   }
@@ -122,42 +126,18 @@ export const DeleteMany = props => {
     children: [/*#__PURE__*/_jsx(Pill, {
       className: `${baseClass}__toggle`,
       onClick: () => {
-        setDeleting(false);
-        toggleModal(modalSlug);
+        openModal(modalSlug);
       },
       children: t('general:delete')
-    }), /*#__PURE__*/_jsx(Modal, {
-      className: baseClass,
-      slug: modalSlug,
-      children: /*#__PURE__*/_jsxs("div", {
-        className: `${baseClass}__wrapper`,
-        children: [/*#__PURE__*/_jsxs("div", {
-          className: `${baseClass}__content`,
-          children: [/*#__PURE__*/_jsx("h1", {
-            children: t('general:confirmDeletion')
-          }), /*#__PURE__*/_jsx("p", {
-            children: t('general:aboutToDeleteCount', {
-              count,
-              label: getTranslation(plural, i18n)
-            })
-          })]
-        }), /*#__PURE__*/_jsxs("div", {
-          className: `${baseClass}__controls`,
-          children: [/*#__PURE__*/_jsx(Button, {
-            buttonStyle: "secondary",
-            id: "confirm-cancel",
-            onClick: deleting ? undefined : () => toggleModal(modalSlug),
-            size: "large",
-            type: "button",
-            children: t('general:cancel')
-          }), /*#__PURE__*/_jsx(Button, {
-            id: "confirm-delete",
-            onClick: deleting ? undefined : handleDelete,
-            size: "large",
-            children: deleting ? t('general:deleting') : t('general:confirm')
-          })]
-        })]
-      })
+    }), /*#__PURE__*/_jsx(ConfirmationModal, {
+      body: t('general:aboutToDeleteCount', {
+        count,
+        label: getTranslation(count > 1 ? plural : singular, i18n)
+      }),
+      confirmingLabel: t('general:deleting'),
+      heading: t('general:confirmDeletion'),
+      modalSlug: modalSlug,
+      onConfirm: handleDelete
     })]
   });
 };