@payloadcms/next 3.0.0-canary.6659da8 → 3.0.0-canary.67aae47

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payloadcms/next",
-  "version": "3.0.0-canary.6659da8",
+  "version": "3.0.0-canary.67aae47",
   "homepage": "https://payloadcms.com",
   "repository": {
     "type": "git",
@@ -11,65 +11,94 @@
   "exports": {
     "./css": {
       "import": "./dist/prod/styles.css",
-      "require": "./dist/prod/styles.css",
       "default": "./dist/prod/styles.css"
     },
     "./withPayload": {
       "import": "./dist/withPayload.js",
-      "require": "./dist/cjs/withPayload.cjs"
+      "require": "./dist/cjs/withPayload.cjs",
+      "default": "./dist/withPayload.js"
     },
-    "./*": {
-      "import": "./dist/exports/*.js",
-      "require": "./dist/exports/*.js",
-      "types": "./dist/exports/*.d.ts"
+    "./layouts": {
+      "import": "./dist/exports/layouts.js",
+      "types": "./dist/exports/layouts.d.ts",
+      "default": "./dist/exports/layouts.js"
+    },
+    "./routes": {
+      "import": "./dist/exports/routes.js",
+      "types": "./dist/exports/routes.d.ts",
+      "default": "./dist/exports/routes.js"
+    },
+    "./templates": {
+      "import": "./dist/exports/templates.js",
+      "types": "./dist/exports/templates.d.ts",
+      "default": "./dist/exports/templates.js"
+    },
+    "./utilities": {
+      "import": "./dist/exports/utilities.js",
+      "types": "./dist/exports/utilities.d.ts",
+      "default": "./dist/exports/utilities.js"
+    },
+    "./views": {
+      "import": "./dist/exports/views.js",
+      "types": "./dist/exports/views.d.ts",
+      "default": "./dist/exports/views.js"
     }
   },
   "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "types": "./dist/index.js",
   "files": [
     "dist"
   ],
+  "lint-staged": {
+    "**/package.json": "sort-package-json",
+    "*.{md,mdx,yml,json}": "prettier --write",
+    "*.{js,jsx,ts,tsx}": [
+      "prettier --write",
+      "eslint --cache --fix"
+    ]
+  },
   "dependencies": {
     "@dnd-kit/core": "6.0.8",
     "busboy": "^1.6.0",
-    "file-type": "17.1.6",
+    "file-type": "19.3.0",
     "graphql-http": "^1.22.0",
     "graphql-playground-html": "1.6.30",
     "http-status": "1.6.2",
     "path-to-regexp": "^6.2.1",
-    "qs": "6.11.2",
+    "qs-esm": "7.0.2",
     "react-diff-viewer-continued": "3.2.6",
     "sass": "1.77.4",
     "sonner": "^1.5.0",
+    "uuid": "10.0.0",
     "ws": "^8.16.0",
-    "@payloadcms/graphql": "3.0.0-canary.6659da8",
-    "@payloadcms/ui": "3.0.0-canary.6659da8",
-    "@payloadcms/translations": "3.0.0-canary.6659da8"
+    "@payloadcms/graphql": "3.0.0-canary.67aae47",
+    "@payloadcms/translations": "3.0.0-canary.67aae47",
+    "@payloadcms/ui": "3.0.0-canary.67aae47"
   },
   "devDependencies": {
-    "@next/eslint-plugin-next": "^14.1.0",
-    "@types/busboy": "^1.5.3",
-    "@types/react": "npm:types-react@19.0.0-beta.2",
-    "@types/react-dom": "npm:types-react-dom@19.0.0-beta.2",
+    "@babel/cli": "^7.24.5",
+    "@babel/core": "^7.24.5",
+    "@babel/preset-env": "^7.24.5",
+    "@babel/preset-react": "^7.24.1",
+    "@babel/preset-typescript": "^7.24.1",
+    "@next/eslint-plugin-next": "15.0.0",
+    "@types/busboy": "1.5.4",
+    "@types/react": "npm:types-react@19.0.0-rc.1",
+    "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1",
+    "@types/uuid": "10.0.0",
     "@types/ws": "^8.5.10",
-    "css-loader": "^6.10.0",
-    "css-minimizer-webpack-plugin": "^6.0.0",
-    "mini-css-extract-plugin": "1.6.2",
-    "postcss-loader": "^8.1.1",
-    "postcss-preset-env": "^9.5.14",
-    "sass-loader": "14.2.1",
-    "swc-loader": "^0.2.6",
-    "swc-plugin-transform-remove-imports": "^1.12.1",
-    "terser-webpack-plugin": "^5.3.10",
-    "webpack": "^5.78.0",
-    "webpack-cli": "^5.1.4",
-    "@payloadcms/eslint-config": "1.1.1",
-    "payload": "3.0.0-canary.6659da8"
+    "babel-plugin-react-compiler": "0.0.0-experimental-24ec0eb-20240918",
+    "esbuild": "0.23.1",
+    "esbuild-sass-plugin": "3.3.1",
+    "eslint-plugin-react-compiler": "0.0.0-experimental-7670337-20240918",
+    "swc-plugin-transform-remove-imports": "1.15.0",
+    "@payloadcms/eslint-config": "3.0.0-beta.112",
+    "payload": "3.0.0-canary.67aae47"
   },
   "peerDependencies": {
     "graphql": "^16.8.1",
-    "next": "^15.0.0-rc.0",
-    "payload": "3.0.0-canary.6659da8"
+    "next": "^15.0.0",
+    "payload": "3.0.0-canary.67aae47"
   },
   "engines": {
     "node": "^18.20.2 || >=20.9.0"
@@ -78,18 +107,21 @@
     "registry": "https://registry.npmjs.org/"
   },
   "overrides": {
-    "@types/react": "npm:types-react@19.0.0-beta.2",
-    "@types/react-dom": "npm:types-react-dom@19.0.0-beta.2"
+    "@types/react": "npm:types-react@19.0.0-rc.1",
+    "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1"
   },
   "scripts": {
-    "build": "rm -rf dist && rm -rf tsconfig.tsbuildinfo && pnpm copyfiles && pnpm build:types && pnpm build:swc && pnpm build:cjs && pnpm build:webpack",
+    "build": "pnpm build:reactcompiler",
+    "build:babel": "rm -rf dist_optimized && babel dist --out-dir dist_optimized --source-maps --extensions .ts,.js,.tsx,.jsx,.cjs,.mjs && rm -rf dist && mv dist_optimized dist",
     "build:cjs": "swc ./src/withPayload.js -o ./dist/cjs/withPayload.cjs --config-file .swcrc-cjs --strip-leading-paths",
+    "build:esbuild": "node bundleScss.js",
+    "build:reactcompiler": "rm -rf dist && rm -rf tsconfig.tsbuildinfo && pnpm build:swc && pnpm build:babel && pnpm copyfiles && pnpm build:types && pnpm build:esbuild  && pnpm build:cjs",
     "build:swc": "swc ./src -d ./dist --config-file .swcrc --strip-leading-paths",
     "build:types": "tsc --emitDeclarationOnly --outDir dist",
-    "build:webpack": "webpack --config webpack.config.js",
+    "build:without_reactcompiler": "rm -rf dist && rm -rf tsconfig.tsbuildinfo && pnpm copyfiles && pnpm build:types && pnpm build:swc && pnpm build:cjs && pnpm build:esbuild",
     "clean": "rimraf {dist,*.tsbuildinfo}",
-    "copyfiles": "copyfiles -u 1 \"src/**/*.{html,css,scss,ttf,woff,woff2,eot,svg,jpg,png,json}\" \"src/app/api/**\" dist/",
-    "fix": "eslint \"src/**/*.{ts,tsx}\" --fix",
-    "lint": "eslint \"src/**/*.{ts,tsx}\""
+    "copyfiles": "copyfiles -u 1 \"src/**/*.{html,css,scss,ttf,woff,woff2,eot,svg,jpg,png,json}\" dist/",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix"
   }
 }

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

@@ -1,4 +0,0 @@
-import React from 'react';
-import './index.scss';
-export declare const LeaveWithoutSaving: React.FC;
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/LeaveWithoutSaving/index.tsx"],"names":[],"mappings":"AASA,OAAO,KAAiC,MAAM,OAAO,CAAA;AAErD,OAAO,cAAc,CAAA;AA6CrB,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAyBtC,CAAA"}

package/dist/elements/LeaveWithoutSaving/index.js

@@ -1,86 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Modal, useAuth, useFormModified, useModal, useTranslation } from '@payloadcms/ui/client';
-import React, { useCallback, useEffect } from 'react';
-import { usePreventLeave } from './usePreventLeave.js';
-const modalSlug = 'leave-without-saving';
-const baseClass = 'leave-without-saving';
-const Component = ({ isActive, onCancel, onConfirm })=>{
-    const { closeModal, modalState, openModal } = useModal();
-    const { t } = useTranslation();
-    // Manually check for modal state as 'esc' key will not trigger the nav inactivity
-    // useEffect(() => {
-    //   if (!modalState?.[modalSlug]?.isOpen && isActive) {
-    //     onCancel()
-    //   }
-    // }, [modalState, isActive, onCancel])
-    useEffect(()=>{
-        if (isActive) openModal(modalSlug);
-        else closeModal(modalSlug);
-    }, [
-        isActive,
-        openModal,
-        closeModal
-    ]);
-    return /*#__PURE__*/ _jsx(Modal, {
-        className: baseClass,
-        onClose: onCancel,
-        slug: modalSlug,
-        children: /*#__PURE__*/ _jsxs("div", {
-            className: `${baseClass}__wrapper`,
-            children: [
-                /*#__PURE__*/ _jsxs("div", {
-                    className: `${baseClass}__content`,
-                    children: [
-                        /*#__PURE__*/ _jsx("h1", {
-                            children: t('general:leaveWithoutSaving')
-                        }),
-                        /*#__PURE__*/ _jsx("p", {
-                            children: t('general:changesNotSaved')
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ _jsxs("div", {
-                    className: `${baseClass}__controls`,
-                    children: [
-                        /*#__PURE__*/ _jsx(Button, {
-                            buttonStyle: "secondary",
-                            onClick: onCancel,
-                            children: t('general:stayOnThisPage')
-                        }),
-                        /*#__PURE__*/ _jsx(Button, {
-                            onClick: onConfirm,
-                            children: t('general:leaveAnyway')
-                        })
-                    ]
-                })
-            ]
-        })
-    });
-};
-export const LeaveWithoutSaving = ()=>{
-    const modified = useFormModified();
-    const { user } = useAuth();
-    const [show, setShow] = React.useState(false);
-    const [hasAccepted, setHasAccepted] = React.useState(false);
-    const prevent = Boolean(modified && user);
-    const onPrevent = useCallback(()=>{
-        setShow(true);
-    }, []);
-    usePreventLeave({
-        hasAccepted,
-        onPrevent,
-        prevent
-    });
-    return /*#__PURE__*/ _jsx(Component, {
-        isActive: show,
-        onCancel: ()=>{
-            setShow(false);
-        },
-        onConfirm: ()=>{
-            setHasAccepted(true);
-        }
-    });
-};
-
-//# sourceMappingURL=index.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/elements/LeaveWithoutSaving/index.tsx"],"sourcesContent":["'use client'\nimport {\n  Button,\n  Modal,\n  useAuth,\n  useFormModified,\n  useModal,\n  useTranslation,\n} from '@payloadcms/ui/client'\nimport React, { useCallback, useEffect } from 'react'\n\nimport './index.scss'\nimport { usePreventLeave } from './usePreventLeave.js'\n\nconst modalSlug = 'leave-without-saving'\n\nconst baseClass = 'leave-without-saving'\n\nconst Component: React.FC<{\n  isActive: boolean\n  onCancel: () => void\n  onConfirm: () => void\n}> = ({ isActive, onCancel, onConfirm }) => {\n  const { closeModal, modalState, openModal } = useModal()\n  const { t } = useTranslation()\n\n  // Manually check for modal state as 'esc' key will not trigger the nav inactivity\n  // useEffect(() => {\n  //   if (!modalState?.[modalSlug]?.isOpen && isActive) {\n  //     onCancel()\n  //   }\n  // }, [modalState, isActive, onCancel])\n\n  useEffect(() => {\n    if (isActive) openModal(modalSlug)\n    else closeModal(modalSlug)\n  }, [isActive, openModal, closeModal])\n\n  return (\n    <Modal className={baseClass} onClose={onCancel} slug={modalSlug}>\n      <div className={`${baseClass}__wrapper`}>\n        <div className={`${baseClass}__content`}>\n          <h1>{t('general:leaveWithoutSaving')}</h1>\n          <p>{t('general:changesNotSaved')}</p>\n        </div>\n        <div className={`${baseClass}__controls`}>\n          <Button buttonStyle=\"secondary\" onClick={onCancel}>\n            {t('general:stayOnThisPage')}\n          </Button>\n          <Button onClick={onConfirm}>{t('general:leaveAnyway')}</Button>\n        </div>\n      </div>\n    </Modal>\n  )\n}\n\nexport const LeaveWithoutSaving: React.FC = () => {\n  const modified = useFormModified()\n  const { user } = useAuth()\n  const [show, setShow] = React.useState(false)\n  const [hasAccepted, setHasAccepted] = React.useState(false)\n\n  const prevent = Boolean(modified && user)\n\n  const onPrevent = useCallback(() => {\n    setShow(true)\n  }, [])\n\n  usePreventLeave({ hasAccepted, onPrevent, prevent })\n\n  return (\n    <Component\n      isActive={show}\n      onCancel={() => {\n        setShow(false)\n      }}\n      onConfirm={() => {\n        setHasAccepted(true)\n      }}\n    />\n  )\n}\n"],"names":["Button","Modal","useAuth","useFormModified","useModal","useTranslation","React","useCallback","useEffect","usePreventLeave","modalSlug","baseClass","Component","isActive","onCancel","onConfirm","closeModal","modalState","openModal","t","className","onClose","slug","div","h1","p","buttonStyle","onClick","LeaveWithoutSaving","modified","user","show","setShow","useState","hasAccepted","setHasAccepted","prevent","Boolean","onPrevent"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AACA,SACEA,MAAM,EACNC,KAAK,EACLC,OAAO,EACPC,eAAe,EACfC,QAAQ,EACRC,cAAc,QACT,wBAAuB;AAC9B,OAAOC,SAASC,WAAW,EAAEC,SAAS,QAAQ,QAAO;AAGrD,SAASC,eAAe,QAAQ,uBAAsB;AAEtD,MAAMC,YAAY;AAElB,MAAMC,YAAY;AAElB,MAAMC,YAID,CAAC,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,SAAS,EAAE;IACrC,MAAM,EAAEC,UAAU,EAAEC,UAAU,EAAEC,SAAS,EAAE,GAAGd;IAC9C,MAAM,EAAEe,CAAC,EAAE,GAAGd;IAEd,kFAAkF;IAClF,oBAAoB;IACpB,wDAAwD;IACxD,iBAAiB;IACjB,MAAM;IACN,uCAAuC;IAEvCG,UAAU;QACR,IAAIK,UAAUK,UAAUR;aACnBM,WAAWN;IAClB,GAAG;QAACG;QAAUK;QAAWF;KAAW;IAEpC,qBACE,KAACf;QAAMmB,WAAWT;QAAWU,SAASP;QAAUQ,MAAMZ;kBACpD,cAAA,MAACa;YAAIH,WAAW,CAAC,EAAET,UAAU,SAAS,CAAC;;8BACrC,MAACY;oBAAIH,WAAW,CAAC,EAAET,UAAU,SAAS,CAAC;;sCACrC,KAACa;sCAAIL,EAAE;;sCACP,KAACM;sCAAGN,EAAE;;;;8BAER,MAACI;oBAAIH,WAAW,CAAC,EAAET,UAAU,UAAU,CAAC;;sCACtC,KAACX;4BAAO0B,aAAY;4BAAYC,SAASb;sCACtCK,EAAE;;sCAEL,KAACnB;4BAAO2B,SAASZ;sCAAYI,EAAE;;;;;;;AAKzC;AAEA,OAAO,MAAMS,qBAA+B;IAC1C,MAAMC,WAAW1B;IACjB,MAAM,EAAE2B,IAAI,EAAE,GAAG5B;IACjB,MAAM,CAAC6B,MAAMC,QAAQ,GAAG1B,MAAM2B,QAAQ,CAAC;IACvC,MAAM,CAACC,aAAaC,eAAe,GAAG7B,MAAM2B,QAAQ,CAAC;IAErD,MAAMG,UAAUC,QAAQR,YAAYC;IAEpC,MAAMQ,YAAY/B,YAAY;QAC5ByB,QAAQ;IACV,GAAG,EAAE;IAELvB,gBAAgB;QAAEyB;QAAaI;QAAWF;IAAQ;IAElD,qBACE,KAACxB;QACCC,UAAUkB;QACVjB,UAAU;YACRkB,QAAQ;QACV;QACAjB,WAAW;YACToB,eAAe;QACjB;;AAGN,EAAC"}

package/dist/elements/LeaveWithoutSaving/index.scss

@@ -1,36 +0,0 @@
-@import '../../scss/styles.scss';
-
-.leave-without-saving {
-  @include blur-bg;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-
-  &__wrapper {
-    z-index: 1;
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    gap: var(--base);
-  }
-
-  &__content {
-    display: flex;
-    flex-direction: column;
-    gap: var(--base);
-
-    > * {
-      margin: 0;
-    }
-  }
-
-  &__controls {
-    display: flex;
-    gap: var(--base);
-
-    .btn {
-      margin: 0;
-    }
-  }
-}

package/dist/elements/LeaveWithoutSaving/usePreventLeave.d.ts

@@ -1,8 +0,0 @@
-export declare const useBeforeUnload: (enabled?: (() => boolean) | boolean, message?: string) => void;
-export declare const usePreventLeave: ({ hasAccepted, message, onPrevent, prevent, }: {
-    hasAccepted: boolean;
-    message?: string;
-    onPrevent?: () => void;
-    prevent: boolean;
-}) => void;
-//# sourceMappingURL=usePreventLeave.d.ts.map

package/dist/elements/LeaveWithoutSaving/usePreventLeave.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"usePreventLeave.d.ts","sourceRoot":"","sources":["../../../src/elements/LeaveWithoutSaving/usePreventLeave.tsx"],"names":[],"mappings":"AAyBA,eAAO,MAAM,eAAe,aAAa,CAAC,MAAM,OAAO,CAAC,GAAG,OAAO,YAAmB,MAAM,SA6B1F,CAAA;AAED,eAAO,MAAM,eAAe,kDAKzB;IACD,WAAW,EAAE,OAAO,CAAA;IAEpB,OAAO,CAAC,EAAE,MAAM,CAAA;IAEhB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,OAAO,EAAE,OAAO,CAAA;CACjB,SA+EA,CAAA"}

package/dist/elements/LeaveWithoutSaving/usePreventLeave.js

@@ -1,114 +0,0 @@
-// Credit: @Taiki92777
-//    - Source: https://github.com/vercel/next.js/discussions/32231#discussioncomment-7284386
-// Credit: `react-use` maintainers
-//    -  Source: https://github.com/streamich/react-use/blob/ade8d3905f544305515d010737b4ae604cc51024/src/useBeforeUnload.ts#L2
-import { useRouter } from 'next/navigation.js';
-import { useCallback, useEffect, useRef } from 'react';
-function on(obj, ...args) {
-    if (obj && obj.addEventListener) {
-        obj.addEventListener(...args);
-    }
-}
-function off(obj, ...args) {
-    if (obj && obj.removeEventListener) {
-        obj.removeEventListener(...args);
-    }
-}
-export const useBeforeUnload = (enabled = true, message)=>{
-    const handler = useCallback((event)=>{
-        const finalEnabled = typeof enabled === 'function' ? enabled() : true;
-        if (!finalEnabled) {
-            return;
-        }
-        event.preventDefault();
-        if (message) {
-            event.returnValue = message;
-        }
-        return message;
-    }, [
-        enabled,
-        message
-    ]);
-    useEffect(()=>{
-        if (!enabled) {
-            return;
-        }
-        on(window, 'beforeunload', handler);
-        return ()=>off(window, 'beforeunload', handler);
-    }, [
-        enabled,
-        handler
-    ]);
-};
-export const usePreventLeave = ({ hasAccepted = false, message = 'Are you sure want to leave this page?', onPrevent, prevent = true })=>{
-    // check when page is about to be reloaded
-    useBeforeUnload(prevent, message);
-    const router = useRouter();
-    const cancelledURL = useRef('');
-    // check when page is about to be changed
-    useEffect(()=>{
-        function isAnchorOfCurrentUrl(currentUrl, newUrl) {
-            const currentUrlObj = new URL(currentUrl);
-            const newUrlObj = new URL(newUrl);
-            // Compare hostname, pathname, and search parameters
-            if (currentUrlObj.hostname === newUrlObj.hostname && currentUrlObj.pathname === newUrlObj.pathname && currentUrlObj.search === newUrlObj.search) {
-                // Check if the new URL is just an anchor of the current URL page
-                const currentHash = currentUrlObj.hash;
-                const newHash = newUrlObj.hash;
-                return currentHash !== newHash && currentUrlObj.href.replace(currentHash, '') === newUrlObj.href.replace(newHash, '');
-            }
-            return false;
-        }
-        function findClosestAnchor(element) {
-            while(element && element.tagName.toLowerCase() !== 'a'){
-                element = element.parentElement;
-            }
-            return element;
-        }
-        function handleClick(event) {
-            try {
-                const target = event.target;
-                const anchor = findClosestAnchor(target);
-                if (anchor) {
-                    const currentUrl = window.location.href;
-                    const newUrl = anchor.href;
-                    const isAnchor = isAnchorOfCurrentUrl(currentUrl, newUrl);
-                    const isDownloadLink = anchor.download !== '';
-                    const isPageLeaving = !(newUrl === currentUrl || isAnchor || isDownloadLink);
-                    if (isPageLeaving && prevent && (!onPrevent ? !window.confirm(message) : true)) {
-                        // Keep a reference of the href
-                        cancelledURL.current = newUrl;
-                        // Cancel the route change
-                        event.preventDefault();
-                        event.stopPropagation();
-                        if (typeof onPrevent === 'function') {
-                            onPrevent();
-                        }
-                    }
-                }
-            } catch (err) {
-                alert(err);
-            }
-        }
-        // Add the global click event listener
-        document.addEventListener('click', handleClick, true);
-        // Clean up the global click event listener when the component is unmounted
-        return ()=>{
-            document.removeEventListener('click', handleClick, true);
-        };
-    }, [
-        onPrevent,
-        prevent,
-        message
-    ]);
-    useEffect(()=>{
-        if (hasAccepted && cancelledURL.current) {
-            router.push(cancelledURL.current);
-        }
-    }, [
-        hasAccepted,
-        router
-    ]);
-};
-
-//# sourceMappingURL=usePreventLeave.js.map

package/dist/elements/LeaveWithoutSaving/usePreventLeave.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/elements/LeaveWithoutSaving/usePreventLeave.tsx"],"sourcesContent":["// Credit: @Taiki92777\n//    - Source: https://github.com/vercel/next.js/discussions/32231#discussioncomment-7284386\n// Credit: `react-use` maintainers\n//    -  Source: https://github.com/streamich/react-use/blob/ade8d3905f544305515d010737b4ae604cc51024/src/useBeforeUnload.ts#L2\nimport { useRouter } from 'next/navigation.js'\nimport { useCallback, useEffect, useRef } from 'react'\n\nfunction on<T extends Document | EventTarget | HTMLElement | Window>(\n  obj: T | null,\n  ...args: [string, Function | null, ...any] | Parameters<T['addEventListener']>\n): void {\n  if (obj && obj.addEventListener) {\n    obj.addEventListener(...(args as Parameters<HTMLElement['addEventListener']>))\n  }\n}\n\nfunction off<T extends Document | EventTarget | HTMLElement | Window>(\n  obj: T | null,\n  ...args: [string, Function | null, ...any] | Parameters<T['removeEventListener']>\n): void {\n  if (obj && obj.removeEventListener) {\n    obj.removeEventListener(...(args as Parameters<HTMLElement['removeEventListener']>))\n  }\n}\n\nexport const useBeforeUnload = (enabled: (() => boolean) | boolean = true, message?: string) => {\n  const handler = useCallback(\n    (event: BeforeUnloadEvent) => {\n      const finalEnabled = typeof enabled === 'function' ? enabled() : true\n\n      if (!finalEnabled) {\n        return\n      }\n\n      event.preventDefault()\n\n      if (message) {\n        event.returnValue = message\n      }\n\n      return message\n    },\n    [enabled, message],\n  )\n\n  useEffect(() => {\n    if (!enabled) {\n      return\n    }\n\n    on(window, 'beforeunload', handler)\n\n    return () => off(window, 'beforeunload', handler)\n  }, [enabled, handler])\n}\n\nexport const usePreventLeave = ({\n  hasAccepted = false,\n  message = 'Are you sure want to leave this page?',\n  onPrevent,\n  prevent = true,\n}: {\n  hasAccepted: boolean\n  // if no `onPrevent` is provided, the message will be displayed in a confirm dialog\n  message?: string\n  // to use a custom confirmation dialog, provide a function that returns a boolean\n  onPrevent?: () => void\n  prevent: boolean\n}) => {\n  // check when page is about to be reloaded\n  useBeforeUnload(prevent, message)\n\n  const router = useRouter()\n  const cancelledURL = useRef<string>('')\n\n  // check when page is about to be changed\n  useEffect(() => {\n    function isAnchorOfCurrentUrl(currentUrl: string, newUrl: string) {\n      const currentUrlObj = new URL(currentUrl)\n      const newUrlObj = new URL(newUrl)\n      // Compare hostname, pathname, and search parameters\n      if (\n        currentUrlObj.hostname === newUrlObj.hostname &&\n        currentUrlObj.pathname === newUrlObj.pathname &&\n        currentUrlObj.search === newUrlObj.search\n      ) {\n        // Check if the new URL is just an anchor of the current URL page\n        const currentHash = currentUrlObj.hash\n        const newHash = newUrlObj.hash\n        return (\n          currentHash !== newHash &&\n          currentUrlObj.href.replace(currentHash, '') === newUrlObj.href.replace(newHash, '')\n        )\n      }\n      return false\n    }\n\n    function findClosestAnchor(element: HTMLElement | null): HTMLAnchorElement | null {\n      while (element && element.tagName.toLowerCase() !== 'a') {\n        element = element.parentElement\n      }\n      return element as HTMLAnchorElement\n    }\n    function handleClick(event: MouseEvent) {\n      try {\n        const target = event.target as HTMLElement\n        const anchor = findClosestAnchor(target)\n        if (anchor) {\n          const currentUrl = window.location.href\n          const newUrl = anchor.href\n          const isAnchor = isAnchorOfCurrentUrl(currentUrl, newUrl)\n          const isDownloadLink = anchor.download !== ''\n\n          const isPageLeaving = !(newUrl === currentUrl || isAnchor || isDownloadLink)\n\n          if (isPageLeaving && prevent && (!onPrevent ? !window.confirm(message) : true)) {\n            // Keep a reference of the href\n            cancelledURL.current = newUrl\n\n            // Cancel the route change\n            event.preventDefault()\n            event.stopPropagation()\n\n            if (typeof onPrevent === 'function') {\n              onPrevent()\n            }\n          }\n        }\n      } catch (err) {\n        alert(err)\n      }\n    }\n\n    // Add the global click event listener\n    document.addEventListener('click', handleClick, true)\n\n    // Clean up the global click event listener when the component is unmounted\n    return () => {\n      document.removeEventListener('click', handleClick, true)\n    }\n  }, [onPrevent, prevent, message])\n\n  useEffect(() => {\n    if (hasAccepted && cancelledURL.current) {\n      router.push(cancelledURL.current)\n    }\n  }, [hasAccepted, router])\n}\n"],"names":["useRouter","useCallback","useEffect","useRef","on","obj","args","addEventListener","off","removeEventListener","useBeforeUnload","enabled","message","handler","event","finalEnabled","preventDefault","returnValue","window","usePreventLeave","hasAccepted","onPrevent","prevent","router","cancelledURL","isAnchorOfCurrentUrl","currentUrl","newUrl","currentUrlObj","URL","newUrlObj","hostname","pathname","search","currentHash","hash","newHash","href","replace","findClosestAnchor","element","tagName","toLowerCase","parentElement","handleClick","target","anchor","location","isAnchor","isDownloadLink","download","isPageLeaving","confirm","current","stopPropagation","err","alert","document","push"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}