@payloadcms/ui 3.0.0-beta.9 → 3.0.0-beta.90

package/dist/elements/Dropzone/index.js

@@ -1,101 +1,168 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { Button } from '../Button/index.js';
-const handleDragOver = (e)=>{
-    e.preventDefault();
-    e.stopPropagation();
+import './index.scss';
+const handleDragOver = e => {
+  e.preventDefault();
+  e.stopPropagation();
 };
 const baseClass = 'dropzone';
-export const Dropzone = ({ className, mimeTypes, onChange })=>{
-    const dropRef = React.useRef(null);
-    const [dragging, setDragging] = React.useState(false);
-    const inputRef = React.useRef(null);
-    const { t } = useTranslation();
-    const handlePaste = React.useCallback((e)=>{
-        e.preventDefault();
-        e.stopPropagation();
-        if (e.clipboardData.files && e.clipboardData.files.length > 0) {
-            onChange(e.clipboardData.files);
-        }
-    }, [
-        onChange
-    ]);
-    const handleDragEnter = React.useCallback((e)=>{
-        e.preventDefault();
-        e.stopPropagation();
-        setDragging(true);
-    }, []);
-    const handleDragLeave = React.useCallback((e)=>{
-        e.preventDefault();
-        e.stopPropagation();
-        setDragging(false);
-    }, []);
-    const handleDrop = React.useCallback((e)=>{
-        e.preventDefault();
-        e.stopPropagation();
+export const Dropzone = t0 => {
+  const $ = _c(14);
+  const {
+    className,
+    mimeTypes,
+    multipleFiles,
+    onChange,
+    onPasteUrlClick
+  } = t0;
+  const dropRef = React.useRef(null);
+  const [dragging, setDragging] = React.useState(false);
+  const inputRef = React.useRef(null);
+  const {
+    t
+  } = useTranslation();
+  let t1;
+  if ($[0] !== onChange) {
+    t1 = e => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (e.clipboardData.files && e.clipboardData.files.length > 0) {
+        onChange(e.clipboardData.files);
+      }
+    };
+    $[0] = onChange;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const handlePaste = t1;
+  let t2;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = e_0 => {
+      e_0.preventDefault();
+      e_0.stopPropagation();
+      setDragging(true);
+    };
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  const handleDragEnter = t2;
+  let t3;
+  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = e_1 => {
+      e_1.preventDefault();
+      e_1.stopPropagation();
+      setDragging(false);
+    };
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  const handleDragLeave = t3;
+  let t4;
+  if ($[4] !== onChange) {
+    t4 = e_2 => {
+      e_2.preventDefault();
+      e_2.stopPropagation();
+      setDragging(false);
+      if (e_2.dataTransfer.files && e_2.dataTransfer.files.length > 0) {
+        onChange(e_2.dataTransfer.files);
         setDragging(false);
-        if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
-            onChange(e.dataTransfer.files);
-            setDragging(false);
-            e.dataTransfer.clearData();
-        }
-    }, [
-        onChange
-    ]);
-    const handleFileSelection = React.useCallback((e)=>{
-        if (e.target.files && e.target.files.length > 0) {
-            onChange(e.target.files);
-        }
-    }, [
-        onChange
-    ]);
-    React.useEffect(()=>{
-        const div = dropRef.current;
-        if (div) {
-            div.addEventListener('dragenter', handleDragEnter);
-            div.addEventListener('dragleave', handleDragLeave);
-            div.addEventListener('dragover', handleDragOver);
-            div.addEventListener('drop', handleDrop);
-            div.addEventListener('paste', handlePaste);
-            return ()=>{
-                div.removeEventListener('dragenter', handleDragEnter);
-                div.removeEventListener('dragleave', handleDragLeave);
-                div.removeEventListener('dragover', handleDragOver);
-                div.removeEventListener('drop', handleDrop);
-                div.removeEventListener('paste', handlePaste);
-            };
-        }
-        return ()=>null;
-    }, [
-        handleDragEnter,
-        handleDragLeave,
-        handleDrop,
-        handlePaste
-    ]);
-    const classes = [
-        baseClass,
-        className,
-        dragging ? 'dragging' : ''
-    ].filter(Boolean).join(' ');
-    return /*#__PURE__*/ React.createElement("div", {
-        className: classes,
-        ref: dropRef
-    }, /*#__PURE__*/ React.createElement(Button, {
-        buttonStyle: "secondary",
-        className: `${baseClass}__file-button`,
-        onClick: ()=>{
-            inputRef.current.click();
-        },
-        size: "small"
-    }, t('upload:selectFile')), /*#__PURE__*/ React.createElement("input", {
-        accept: mimeTypes?.join(','),
-        className: `${baseClass}__hidden-input`,
-        onChange: handleFileSelection,
-        ref: inputRef,
-        type: "file"
-    }), /*#__PURE__*/ React.createElement("p", {
-        className: `${baseClass}__label`
-    }, t('general:or'), " ", t('upload:dragAndDrop')));
+        e_2.dataTransfer.clearData();
+      }
+    };
+    $[4] = onChange;
+    $[5] = t4;
+  } else {
+    t4 = $[5];
+  }
+  const handleDrop = t4;
+  let t5;
+  if ($[6] !== onChange) {
+    t5 = e_3 => {
+      if (e_3.target.files && e_3.target.files.length > 0) {
+        onChange(e_3.target.files);
+      }
+    };
+    $[6] = onChange;
+    $[7] = t5;
+  } else {
+    t5 = $[7];
+  }
+  const handleFileSelection = t5;
+  let t6;
+  if ($[8] !== handleDrop || $[9] !== handlePaste) {
+    t6 = [handleDragEnter, handleDragLeave, handleDrop, handlePaste];
+    $[8] = handleDrop;
+    $[9] = handlePaste;
+    $[10] = t6;
+  } else {
+    t6 = $[10];
+  }
+  React.useEffect(() => {
+    const div = dropRef.current;
+    if (div) {
+      div.addEventListener("dragenter", handleDragEnter);
+      div.addEventListener("dragleave", handleDragLeave);
+      div.addEventListener("dragover", handleDragOver);
+      div.addEventListener("drop", handleDrop);
+      div.addEventListener("paste", handlePaste);
+      return () => {
+        div.removeEventListener("dragenter", handleDragEnter);
+        div.removeEventListener("dragleave", handleDragLeave);
+        div.removeEventListener("dragover", handleDragOver);
+        div.removeEventListener("drop", handleDrop);
+        div.removeEventListener("paste", handlePaste);
+      };
+    }
+    return () => null;
+  }, t6);
+  const t7 = dragging ? "dragging" : "";
+  let t8;
+  if ($[11] !== className || $[12] !== t7) {
+    t8 = [baseClass, className, t7].filter(Boolean);
+    $[11] = className;
+    $[12] = t7;
+    $[13] = t8;
+  } else {
+    t8 = $[13];
+  }
+  const classes = t8.join(" ");
+  return _jsxs("div", {
+    className: classes,
+    ref: dropRef,
+    children: [_jsx(Button, {
+      buttonStyle: "secondary",
+      className: `${baseClass}__file-button`,
+      onClick: () => {
+        inputRef.current.click();
+      },
+      size: "medium",
+      children: t("upload:selectFile")
+    }), typeof onPasteUrlClick === "function" && _jsx(Button, {
+      buttonStyle: "secondary",
+      className: `${baseClass}__file-button`,
+      onClick: onPasteUrlClick,
+      size: "medium",
+      children: t("upload:pasteURL")
+    }), _jsx("input", {
+      accept: mimeTypes?.join(","),
+      "aria-hidden": "true",
+      className: `${baseClass}__hidden-input`,
+      multiple: multipleFiles,
+      onChange: handleFileSelection,
+      ref: inputRef,
+      type: "file"
+    }), _jsxs("p", {
+      className: `${baseClass}__label`,
+      children: [t("general:or"), " ", t("upload:dragAndDrop")]
+    })]
+  });
 };
-
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Dropzone/index.tsx"],"sourcesContent":["import React from 'react'\n\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport './index.scss'\n\nconst handleDragOver = (e: DragEvent) => {\n  e.preventDefault()\n  e.stopPropagation()\n}\n\nconst baseClass = 'dropzone'\n\nexport type Props = {\n  className?: string\n  mimeTypes?: string[]\n  onChange: (e: FileList) => void\n}\n\nexport const Dropzone: React.FC<Props> = ({ className, mimeTypes, onChange }) => {\n  const dropRef = React.useRef<HTMLDivElement>(null)\n  const [dragging, setDragging] = React.useState(false)\n  const inputRef = React.useRef(null)\n\n  const { t } = useTranslation()\n\n  const handlePaste = React.useCallback(\n    (e: ClipboardEvent) => {\n      e.preventDefault()\n      e.stopPropagation()\n\n      if (e.clipboardData.files && e.clipboardData.files.length > 0) {\n        onChange(e.clipboardData.files)\n      }\n    },\n    [onChange],\n  )\n\n  const handleDragEnter = React.useCallback((e: DragEvent) => {\n    e.preventDefault()\n    e.stopPropagation()\n    setDragging(true)\n  }, [])\n\n  const handleDragLeave = React.useCallback((e: DragEvent) => {\n    e.preventDefault()\n    e.stopPropagation()\n    setDragging(false)\n  }, [])\n\n  const handleDrop = React.useCallback(\n    (e: DragEvent) => {\n      e.preventDefault()\n      e.stopPropagation()\n      setDragging(false)\n\n      if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {\n        onChange(e.dataTransfer.files)\n        setDragging(false)\n\n        e.dataTransfer.clearData()\n      }\n    },\n    [onChange],\n  )\n\n  const handleFileSelection = React.useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      if (e.target.files && e.target.files.length > 0) {\n        onChange(e.target.files)\n      }\n    },\n    [onChange],\n  )\n\n  React.useEffect(() => {\n    const div = dropRef.current\n\n    if (div) {\n      div.addEventListener('dragenter', handleDragEnter)\n      div.addEventListener('dragleave', handleDragLeave)\n      div.addEventListener('dragover', handleDragOver)\n      div.addEventListener('drop', handleDrop)\n      div.addEventListener('paste', handlePaste)\n\n      return () => {\n        div.removeEventListener('dragenter', handleDragEnter)\n        div.removeEventListener('dragleave', handleDragLeave)\n        div.removeEventListener('dragover', handleDragOver)\n        div.removeEventListener('drop', handleDrop)\n        div.removeEventListener('paste', handlePaste)\n      }\n    }\n\n    return () => null\n  }, [handleDragEnter, handleDragLeave, handleDrop, handlePaste])\n\n  const classes = [baseClass, className, dragging ? 'dragging' : ''].filter(Boolean).join(' ')\n\n  return (\n    <div className={classes} ref={dropRef}>\n      <Button\n        buttonStyle=\"secondary\"\n        className={`${baseClass}__file-button`}\n        onClick={() => {\n          inputRef.current.click()\n        }}\n        size=\"small\"\n      >\n        {t('upload:selectFile')}\n      </Button>\n\n      <input\n        accept={mimeTypes?.join(',')}\n        className={`${baseClass}__hidden-input`}\n        onChange={handleFileSelection}\n        ref={inputRef}\n        type=\"file\"\n      />\n\n      <p className={`${baseClass}__label`}>\n        {t('general:or')} {t('upload:dragAndDrop')}\n      </p>\n    </div>\n  )\n}\n"],"names":["React","useTranslation","Button","handleDragOver","e","preventDefault","stopPropagation","baseClass","Dropzone","className","mimeTypes","onChange","dropRef","useRef","dragging","setDragging","useState","inputRef","t","handlePaste","useCallback","clipboardData","files","length","handleDragEnter","handleDragLeave","handleDrop","dataTransfer","clearData","handleFileSelection","target","useEffect","div","current","addEventListener","removeEventListener","classes","filter","Boolean","join","ref","buttonStyle","onClick","click","size","input","accept","type","p"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","React","useTranslation","Button","handleDragOver","e","preventDefault","stopPropagation","baseClass","Dropzone","t0","$","className","mimeTypes","multipleFiles","onChange","onPasteUrlClick","dropRef","useRef","dragging","setDragging","useState","inputRef","t","t1","clipboardData","files","length","handlePaste","t2","Symbol","for","e_0","handleDragEnter","t3","e_1","handleDragLeave","t4","e_2","dataTransfer","clearData","handleDrop","t5","e_3","target","handleFileSelection","t6","useEffect","div","current","addEventListener","removeEventListener","t7","t8","filter","Boolean","classes","join","_jsxs","ref","children","_jsx","buttonStyle","onClick","click","size","accept","multiple","type"],"sources":["../../../src/elements/Dropzone/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport './index.scss'\n\nconst handleDragOver = (e: DragEvent) => {\n  e.preventDefault()\n  e.stopPropagation()\n}\n\nconst baseClass = 'dropzone'\n\nexport type Props = {\n  readonly className?: string\n  readonly mimeTypes?: string[]\n  readonly multipleFiles?: boolean\n  readonly onChange: (e: FileList) => void\n  readonly onPasteUrlClick?: () => void\n}\n\nexport const Dropzone: React.FC<Props> = ({\n  className,\n  mimeTypes,\n  multipleFiles,\n  onChange,\n  onPasteUrlClick,\n}) => {\n  const dropRef = React.useRef<HTMLDivElement>(null)\n  const [dragging, setDragging] = React.useState(false)\n  const inputRef = React.useRef(null)\n\n  const { t } = useTranslation()\n\n  const handlePaste = React.useCallback(\n    (e: ClipboardEvent) => {\n      e.preventDefault()\n      e.stopPropagation()\n\n      if (e.clipboardData.files && e.clipboardData.files.length > 0) {\n        onChange(e.clipboardData.files)\n      }\n    },\n    [onChange],\n  )\n\n  const handleDragEnter = React.useCallback((e: DragEvent) => {\n    e.preventDefault()\n    e.stopPropagation()\n    setDragging(true)\n  }, [])\n\n  const handleDragLeave = React.useCallback((e: DragEvent) => {\n    e.preventDefault()\n    e.stopPropagation()\n    setDragging(false)\n  }, [])\n\n  const handleDrop = React.useCallback(\n    (e: DragEvent) => {\n      e.preventDefault()\n      e.stopPropagation()\n      setDragging(false)\n\n      if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {\n        onChange(e.dataTransfer.files)\n        setDragging(false)\n\n        e.dataTransfer.clearData()\n      }\n    },\n    [onChange],\n  )\n\n  const handleFileSelection = React.useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      if (e.target.files && e.target.files.length > 0) {\n        onChange(e.target.files)\n      }\n    },\n    [onChange],\n  )\n\n  React.useEffect(() => {\n    const div = dropRef.current\n\n    if (div) {\n      div.addEventListener('dragenter', handleDragEnter)\n      div.addEventListener('dragleave', handleDragLeave)\n      div.addEventListener('dragover', handleDragOver)\n      div.addEventListener('drop', handleDrop)\n      div.addEventListener('paste', handlePaste)\n\n      return () => {\n        div.removeEventListener('dragenter', handleDragEnter)\n        div.removeEventListener('dragleave', handleDragLeave)\n        div.removeEventListener('dragover', handleDragOver)\n        div.removeEventListener('drop', handleDrop)\n        div.removeEventListener('paste', handlePaste)\n      }\n    }\n\n    return () => null\n  }, [handleDragEnter, handleDragLeave, handleDrop, handlePaste])\n\n  const classes = [baseClass, className, dragging ? 'dragging' : ''].filter(Boolean).join(' ')\n\n  return (\n    <div className={classes} ref={dropRef}>\n      <Button\n        buttonStyle=\"secondary\"\n        className={`${baseClass}__file-button`}\n        onClick={() => {\n          inputRef.current.click()\n        }}\n        size=\"medium\"\n      >\n        {t('upload:selectFile')}\n      </Button>\n      {typeof onPasteUrlClick === 'function' && (\n        <Button\n          buttonStyle=\"secondary\"\n          className={`${baseClass}__file-button`}\n          onClick={onPasteUrlClick}\n          size=\"medium\"\n        >\n          {t('upload:pasteURL')}\n        </Button>\n      )}\n      <input\n        accept={mimeTypes?.join(',')}\n        aria-hidden=\"true\"\n        className={`${baseClass}__hidden-input`}\n        multiple={multipleFiles}\n        onChange={handleFileSelection}\n        ref={inputRef}\n        type=\"file\"\n      />\n\n      <p className={`${baseClass}__label`}>\n        {t('general:or')} {t('upload:dragAndDrop')}\n      </p>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/Dropzone/index.scss

@@ -4,20 +4,26 @@
   position: relative;
   display: flex;
   align-items: center;
-  gap: $baseline;
-  padding: base(2);
-  background: var(--theme-elevation-100);
+  gap: base(0.4);
+  padding: base(1.6);
+  background: var(--theme-elevation-50);
   border: 1px dotted var(--theme-elevation-400);
+  border-radius: var(--style-radius-s);
   height: 100%;
   width: 100%;
+  box-shadow: 0 0 0 0 transparent;
+  transition: all 100ms cubic-bezier(0, 0.2, 0.2, 1);
 
   .btn {
     margin: 0;
+    display: flex;
+    justify-content: center;
   }
 
   &.dragging {
     border-color: var(--theme-success-500);
     background: var(--theme-success-150);
+    @include shadow-m;
 
     * {
       pointer-events: none;

package/dist/elements/DuplicateDocument/index.d.ts

@@ -1,4 +1,4 @@
-import type { SanitizedCollectionConfig } from 'payload/types';
+import type { SanitizedCollectionConfig } from 'payload';
 import React from 'react';
 import './index.scss';
 export type Props = {

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/DuplicateDocument/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,eAAe,CAAA;AAK9D,OAAO,KAAgC,MAAM,OAAO,CAAA;AAWpD,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,KAAK,GAAG;IAClB,EAAE,EAAE,MAAM,CAAA;IACV,aAAa,EAAE,yBAAyB,CAAC,QAAQ,CAAC,CAAC,UAAU,CAAC,CAAA;IAC9D,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA4G7C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/DuplicateDocument/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAKxD,OAAO,KAAgC,MAAM,OAAO,CAAA;AAWpD,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,KAAK,GAAG;IAClB,EAAE,EAAE,MAAM,CAAA;IACV,aAAa,EAAE,yBAAyB,CAAC,QAAQ,CAAC,CAAC,UAAU,CAAC,CAAA;IAC9D,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA+G7C,CAAA"}

package/dist/elements/DuplicateDocument/index.js

@@ -1,100 +1,186 @@
 'use client';
-import * as facelessUIImport from '@faceless-ui/modal';
+
+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 { getTranslation } from '@payloadcms/translations';
 import { useRouter } from 'next/navigation.js';
 import React, { useCallback, useState } from 'react';
-import { toast } from 'react-toastify';
+import { toast } from 'sonner';
 import { useForm, useFormModified } from '../../forms/Form/context.js';
 import { useConfig } from '../../providers/Config/index.js';
 import { useLocale } from '../../providers/Locale/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
-import { MinimalTemplate } from '../../templates/Minimal/index.js';
 import { requests } from '../../utilities/api.js';
+import { formatAdminURL } from '../../utilities/formatAdminURL.js';
 import { Button } from '../Button/index.js';
 import { PopupList } from '../Popup/index.js';
+import './index.scss';
 const baseClass = 'duplicate';
-export const DuplicateDocument = ({ id, slug, singularLabel })=>{
-    const { Modal, useModal } = facelessUIImport;
-    const router = useRouter();
-    const modified = useFormModified();
-    const { toggleModal } = useModal();
-    const locale = useLocale();
-    const { setModified } = useForm();
-    const { routes: { api }, serverURL } = useConfig();
-    const { routes: { admin } } = useConfig();
-    const [hasClicked, setHasClicked] = useState(false);
-    const { i18n, t } = useTranslation();
-    const modalSlug = `duplicate-${id}`;
-    const handleClick = useCallback(async (override = false)=>{
-        setHasClicked(true);
-        if (modified && !override) {
-            toggleModal(modalSlug);
-            return;
+export const DuplicateDocument = t0 => {
+  const $ = _c(34);
+  const {
+    id,
+    slug,
+    singularLabel
+  } = t0;
+  const router = useRouter();
+  const modified = useFormModified();
+  const {
+    toggleModal
+  } = useModal();
+  const locale = useLocale();
+  const {
+    setModified
+  } = useForm();
+  const {
+    config: t1
+  } = useConfig();
+  const {
+    routes: t2,
+    serverURL
+  } = t1;
+  const {
+    admin: adminRoute,
+    api: apiRoute
+  } = t2;
+  const [hasClicked, setHasClicked] = useState(false);
+  const {
+    i18n,
+    t
+  } = useTranslation();
+  const modalSlug = `duplicate-${id}`;
+  let t3;
+  if ($[0] !== modified || $[1] !== toggleModal || $[2] !== modalSlug || $[3] !== serverURL || $[4] !== apiRoute || $[5] !== slug || $[6] !== id || $[7] !== locale || $[8] !== i18n || $[9] !== t || $[10] !== singularLabel || $[11] !== setModified || $[12] !== router || $[13] !== adminRoute) {
+    t3 = async t4 => {
+      const override = t4 === undefined ? false : t4;
+      setHasClicked(true);
+      if (modified && !override) {
+        toggleModal(modalSlug);
+        return;
+      }
+      await requests.post(`${serverURL}${apiRoute}/${slug}/${id}/duplicate${locale?.code ? `?locale=${locale.code}` : ""}`, {
+        body: JSON.stringify({}),
+        headers: {
+          "Accept-Language": i18n.language,
+          "Content-Type": "application/json",
+          credentials: "include"
         }
-        await requests.post(`${serverURL}${api}/${slug}/${id}/duplicate?locale=${locale.code}`, {
-            body: JSON.stringify({}),
-            headers: {
-                'Accept-Language': i18n.language,
-                'Content-Type': 'application/json',
-                credentials: 'include'
-            }
-        }).then(async (res)=>{
-            const { doc, errors, message } = await res.json();
-            if (res.status < 400) {
-                toast.success(message || t('general:successfullyDuplicated', {
-                    label: getTranslation(singularLabel, i18n)
-                }), {
-                    autoClose: 3000
-                });
-                setModified(false);
-                router.push(`${admin}/collections/${slug}/${doc.id}?locale=${locale.code}`);
-            } else {
-                toast.error(errors?.[0].message || message || t('error:unspecific', {
-                    label: getTranslation(singularLabel, i18n)
-                }), {
-                    autoClose: 5000
-                });
-            }
-        });
-    }, [
-        locale,
-        modified,
-        serverURL,
-        api,
-        slug,
-        id,
-        i18n,
-        toggleModal,
-        modalSlug,
-        t,
-        singularLabel,
-        setModified,
-        router,
-        admin
-    ]);
-    const confirm = useCallback(async ()=>{
-        setHasClicked(false);
-        await handleClick(true);
-    }, [
-        handleClick
-    ]);
-    return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(PopupList.Button, {
-        id: "action-duplicate",
-        onClick: ()=>handleClick(false)
-    }, t('general:duplicate')), modified && hasClicked && /*#__PURE__*/ React.createElement(Modal, {
+      }).then(async res => {
+        const {
+          doc,
+          errors,
+          message
+        } = await res.json();
+        if (res.status < 400) {
+          toast.success(message || t("general:successfullyDuplicated", {
+            label: getTranslation(singularLabel, i18n)
+          }));
+          setModified(false);
+          router.push(formatAdminURL({
+            adminRoute,
+            path: `/collections/${slug}/${doc.id}${locale?.code ? `?locale=${locale.code}` : ""}`
+          }));
+        } else {
+          toast.error(errors?.[0].message || message || t("error:unspecific", {
+            label: getTranslation(singularLabel, i18n)
+          }));
+        }
+      });
+    };
+    $[0] = modified;
+    $[1] = toggleModal;
+    $[2] = modalSlug;
+    $[3] = serverURL;
+    $[4] = apiRoute;
+    $[5] = slug;
+    $[6] = id;
+    $[7] = locale;
+    $[8] = i18n;
+    $[9] = t;
+    $[10] = singularLabel;
+    $[11] = setModified;
+    $[12] = router;
+    $[13] = adminRoute;
+    $[14] = t3;
+  } else {
+    t3 = $[14];
+  }
+  const handleClick = t3;
+  let t4;
+  if ($[15] !== handleClick) {
+    t4 = async () => {
+      setHasClicked(false);
+      await handleClick(true);
+    };
+    $[15] = handleClick;
+    $[16] = t4;
+  } else {
+    t4 = $[16];
+  }
+  const confirm = t4;
+  let t5;
+  if ($[17] !== handleClick) {
+    t5 = () => void handleClick(false);
+    $[17] = handleClick;
+    $[18] = t5;
+  } else {
+    t5 = $[18];
+  }
+  let t6;
+  if ($[19] !== t || $[20] !== t5 || $[21] !== modified || $[22] !== hasClicked || $[23] !== toggleModal || $[24] !== modalSlug || $[25] !== confirm) {
+    let t7;
+    if ($[27] !== modified || $[28] !== hasClicked || $[29] !== t || $[30] !== toggleModal || $[31] !== modalSlug || $[32] !== confirm) {
+      t7 = modified && hasClicked && _jsx(Modal, {
         className: `${baseClass}__modal`,
-        slug: modalSlug
-    }, /*#__PURE__*/ React.createElement(MinimalTemplate, {
-        className: `${baseClass}__modal-template`
-    }, /*#__PURE__*/ React.createElement("h1", null, t('general:confirmDuplication')), /*#__PURE__*/ React.createElement("p", null, t('general:unsavedChangesDuplicate')), /*#__PURE__*/ React.createElement(Button, {
-        buttonStyle: "secondary",
-        id: "confirm-cancel",
-        onClick: ()=>toggleModal(modalSlug),
-        type: "button"
-    }, t('general:cancel')), /*#__PURE__*/ React.createElement(Button, {
-        id: "confirm-duplicate",
-        onClick: confirm
-    }, t('general:duplicateWithoutSaving')))));
+        slug: modalSlug,
+        children: _jsxs("div", {
+          className: `${baseClass}__modal-template`,
+          children: [_jsx("h1", {
+            children: t("general:confirmDuplication")
+          }), _jsx("p", {
+            children: t("general:unsavedChangesDuplicate")
+          }), _jsx(Button, {
+            buttonStyle: "secondary",
+            id: "confirm-cancel",
+            onClick: () => toggleModal(modalSlug),
+            type: "button",
+            children: t("general:cancel")
+          }), _jsx(Button, {
+            id: "confirm-duplicate",
+            onClick: () => void confirm(),
+            children: t("general:duplicateWithoutSaving")
+          })]
+        })
+      });
+      $[27] = modified;
+      $[28] = hasClicked;
+      $[29] = t;
+      $[30] = toggleModal;
+      $[31] = modalSlug;
+      $[32] = confirm;
+      $[33] = t7;
+    } else {
+      t7 = $[33];
+    }
+    t6 = _jsxs(React.Fragment, {
+      children: [_jsx(PopupList.Button, {
+        id: "action-duplicate",
+        onClick: t5,
+        children: t("general:duplicate")
+      }), t7]
+    });
+    $[19] = t;
+    $[20] = t5;
+    $[21] = modified;
+    $[22] = hasClicked;
+    $[23] = toggleModal;
+    $[24] = modalSlug;
+    $[25] = confirm;
+    $[26] = t6;
+  } else {
+    t6 = $[26];
+  }
+  return t6;
 };
-
 //# sourceMappingURL=index.js.map