@payloadcms/ui 3.49.0-canary.8 → 3.49.1

package/dist/elements/ListHeaderTabs/TrashPill.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrashPill.js","names":["c","_c","formatAdminURL","useConfig","useTranslation","Button","TrashPill","t0","$","collectionConfig","viewType","t","config","trash","t1","t2","t3","slug","t4","routes","admin","serverURL","_jsx","buttonStyle","disabled","el","id","to","adminRoute","path","children"],"sources":["../../../src/elements/ListHeaderTabs/TrashPill.tsx"],"sourcesContent":["'use client'\n\nimport type { ClientCollectionConfig, ViewTypes } from 'payload'\n\nimport { formatAdminURL } from 'payload/shared'\n\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\n\nexport function TrashPill({\n  collectionConfig,\n  viewType,\n}: {\n  collectionConfig: ClientCollectionConfig\n  readonly viewType: ViewTypes\n}) {\n  const { t } = useTranslation()\n  const { config } = useConfig()\n\n  if (!collectionConfig.trash) {\n    return null\n  }\n\n  return (\n    <Button\n      buttonStyle=\"tab\"\n      disabled={viewType === 'trash'}\n      el={viewType === 'list' || viewType === 'folders' ? 'link' : 'div'}\n      id=\"trash-view-pill\"\n      key=\"trash-view-pill\"\n      to={formatAdminURL({\n        adminRoute: config.routes.admin,\n        path: `/collections/${collectionConfig.slug}/trash`,\n        serverURL: config.serverURL,\n      })}\n    >\n      {t('general:trash')}\n    </Button>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAIA,SAASC,cAAc,QAAQ;AAE/B,SAASC,SAAS,QAAQ;AAC1B,SAASC,cAAc,QAAQ;AAC/B,SAASC,MAAM,QAAQ;AAEvB,OAAO,SAAAC,UAAAC,EAAA;EAAA,MAAAC,CAAA,GAAAP,EAAA;EAAmB;IAAAQ,gBAAA;IAAAC;EAAA,IAAAH,EAMzB;EACC;IAAAI;EAAA,IAAcP,cAAA;EACd;IAAAQ;EAAA,IAAmBT,SAAA;EAAA,KAEdM,gBAAA,CAAAI,KAAA;IAAA;EAAA;EAOS,MAAAC,EAAA,GAAAJ,QAAA,KAAa;EACnB,MAAAK,EAAA,GAAAL,QAAA,KAAa,UAAUA,QAAA,KAAa,YAAY,SAAS;EAKrD,MAAAM,EAAA,mBAAgBP,gBAAA,CAAAQ,IAAA,QAA6B;EAAA,IAAAC,EAAA;EAAA,IAAAV,CAAA,QAAAI,MAAA,CAAAO,MAAA,CAAAC,KAAA,IAAAZ,CAAA,QAAAI,MAAA,CAAAS,SAAA,IAAAb,CAAA,QAAAG,CAAA,IAAAH,CAAA,QAAAM,EAAA,IAAAN,CAAA,QAAAO,EAAA,IAAAP,CAAA,QAAAQ,EAAA;IARvDE,EAAA,GAAAI,IAAA,CAAAjB,MAAA;MAAAkB,WAAA,EACc;MAAAC,QAAA,EACFV,EAAa;MAAAW,EAAA,EACnBV,EAAyD;MAAAW,EAAA,EAC1D;MAAAC,EAAA,EAECzB,cAAA;QAAA0B,UAAA,EACUhB,MAAA,CAAAO,MAAA,CAAAC,KAAA;QAAAS,IAAA,EACNb,EAA6C;QAAAK,SAAA,EACxCT,MAAA,CAAAS;MAAA,CACb;MAAAS,QAAA,EAECnB,CAAA,CAAE;IAAA,GAPC;IAAAH,CAAA,MAAAI,MAAA,CAAAO,MAAA,CAAAC,KAAA;IAAAZ,CAAA,MAAAI,MAAA,CAAAS,SAAA;IAAAb,CAAA,MAAAG,CAAA;IAAAH,CAAA,MAAAM,EAAA;IAAAN,CAAA,MAAAO,EAAA;IAAAP,CAAA,MAAAQ,EAAA;IAAAR,CAAA,MAAAU,EAAA;EAAA;IAAAA,EAAA,GAAAV,CAAA;EAAA;EAAA,OALNU,EAKM;AAAA","ignoreList":[]}

package/dist/elements/{ListFolderPills → ListHeaderTabs}/index.scss

@@ -1,7 +1,6 @@
 @layer payload-default {
-  .list-folder-pills {
+  .list-pills {
     display: flex;
     gap: calc(var(--base) * 0.5);
-    margin-left: calc(var(--base) * 0.5);
   }
 }

package/dist/elements/ListSelection/index.scss

@@ -10,7 +10,7 @@
 
     &__actions {
       display: flex;
-      gap: calc(var(--base) * 0.3);
+      gap: calc(var(--base) * 0.5);
     }
 
     &__button {

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

@@ -0,0 +1,14 @@
+import type { SanitizedCollectionConfig } from 'payload';
+import React from 'react';
+import type { DocumentDrawerContextType } from '../DocumentDrawer/Provider.js';
+export type Props = {
+    readonly buttonId?: string;
+    readonly collectionSlug: SanitizedCollectionConfig['slug'];
+    readonly id?: string;
+    readonly onDelete?: DocumentDrawerContextType['onDelete'];
+    readonly redirectAfterDelete?: boolean;
+    readonly singularLabel: SanitizedCollectionConfig['labels']['singular'];
+    readonly title?: string;
+};
+export declare const PermanentlyDeleteButton: React.FC<Props>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/PermanentlyDeleteButton/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAOxD,OAAO,KAAgC,MAAM,OAAO,CAAA;AAGpD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,+BAA+B,CAAA;AAW9E,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;CACxB,CAAA;AAED,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA0InD,CAAA"}

package/dist/elements/PermanentlyDeleteButton/index.js

@@ -0,0 +1,147 @@
+'use client';
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useModal } from '@faceless-ui/modal';
+import { getTranslation } from '@payloadcms/translations';
+import { useRouter } from 'next/navigation.js';
+import { formatAdminURL } from 'payload/shared';
+import * as qs from 'qs-esm';
+import React, { Fragment, useCallback } from 'react';
+import { toast } from 'sonner';
+import { useConfig } from '../../providers/Config/index.js';
+import { useDocumentTitle } from '../../providers/DocumentTitle/index.js';
+import { useRouteTransition } from '../../providers/RouteTransition/index.js';
+import { useTranslation } from '../../providers/Translation/index.js';
+import { requests } from '../../utilities/api.js';
+import { Button } from '../Button/index.js';
+import { ConfirmationModal } from '../ConfirmationModal/index.js';
+import { Translation } from '../Translation/index.js';
+export const PermanentlyDeleteButton = props => {
+  const {
+    id,
+    buttonId,
+    collectionSlug,
+    onDelete,
+    redirectAfterDelete = true,
+    singularLabel,
+    title: titleFromProps
+  } = props;
+  const {
+    config: {
+      routes: {
+        admin: adminRoute,
+        api
+      },
+      serverURL
+    },
+    getEntityConfig
+  } = useConfig();
+  const collectionConfig = getEntityConfig({
+    collectionSlug
+  });
+  const router = useRouter();
+  const {
+    i18n,
+    t
+  } = useTranslation();
+  const {
+    title
+  } = useDocumentTitle();
+  const {
+    startRouteTransition
+  } = useRouteTransition();
+  const {
+    openModal
+  } = useModal();
+  const modalSlug = `perma-delete-${id}`;
+  const addDefaultError = useCallback(() => {
+    toast.error(t('error:deletingTitle', {
+      title
+    }));
+  }, [t, title]);
+  const handleDelete = useCallback(async () => {
+    try {
+      const url = `${serverURL}${api}/${collectionSlug}?${qs.stringify({
+        trash: true,
+        where: {
+          and: [{
+            id: {
+              equals: id
+            }
+          }, {
+            deletedAt: {
+              exists: true
+            }
+          }]
+        }
+      })}`;
+      const res = await requests.delete(url, {
+        headers: {
+          'Accept-Language': i18n.language,
+          'Content-Type': 'application/json'
+        }
+      });
+      const json = await res.json();
+      if (res.status < 400) {
+        toast.success(t('general:titleDeleted', {
+          label: getTranslation(singularLabel, i18n),
+          title
+        }) || json.message);
+        if (redirectAfterDelete) {
+          return startRouteTransition(() => router.push(formatAdminURL({
+            adminRoute,
+            path: `/collections/${collectionSlug}/trash`
+          })));
+        }
+        if (typeof onDelete === 'function') {
+          await onDelete({
+            id,
+            collectionConfig
+          });
+        }
+        return;
+      }
+      if (json.errors) {
+        json.errors.forEach(error => toast.error(error.message));
+      } else {
+        addDefaultError();
+      }
+    } catch (_err) {
+      addDefaultError();
+    }
+  }, [serverURL, api, collectionSlug, id, t, singularLabel, addDefaultError, i18n, title, router, adminRoute, redirectAfterDelete, onDelete, collectionConfig, startRouteTransition]);
+  if (id) {
+    return /*#__PURE__*/_jsxs(Fragment, {
+      children: [/*#__PURE__*/_jsx(Button, {
+        buttonStyle: "secondary",
+        id: buttonId,
+        onClick: () => {
+          openModal(modalSlug);
+        },
+        children: t('general:permanentlyDelete')
+      }), /*#__PURE__*/_jsx(ConfirmationModal, {
+        body: /*#__PURE__*/_jsx(Translation, {
+          elements: {
+            '1': ({
+              children
+            }) => /*#__PURE__*/_jsx("strong", {
+              children: children
+            })
+          },
+          i18nKey: "general:aboutToPermanentlyDelete",
+          t: t,
+          variables: {
+            label: getTranslation(singularLabel, i18n),
+            title: titleFromProps || title || id
+          }
+        }),
+        confirmingLabel: t('general:deleting'),
+        heading: t('general:confirmDeletion'),
+        modalSlug: modalSlug,
+        onConfirm: handleDelete
+      })]
+    });
+  }
+  return null;
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["useModal","getTranslation","useRouter","formatAdminURL","qs","React","Fragment","useCallback","toast","useConfig","useDocumentTitle","useRouteTransition","useTranslation","requests","Button","ConfirmationModal","Translation","PermanentlyDeleteButton","props","id","buttonId","collectionSlug","onDelete","redirectAfterDelete","singularLabel","title","titleFromProps","config","routes","admin","adminRoute","api","serverURL","getEntityConfig","collectionConfig","router","i18n","t","startRouteTransition","openModal","modalSlug","addDefaultError","error","handleDelete","url","stringify","trash","where","and","equals","deletedAt","exists","res","delete","headers","language","json","status","success","label","message","push","path","errors","forEach","_err","_jsxs","_jsx","buttonStyle","onClick","body","elements","1","children","i18nKey","variables","confirmingLabel","heading","onConfirm"],"sources":["../../../src/elements/PermanentlyDeleteButton/index.tsx"],"sourcesContent":["'use client'\n\nimport type { SanitizedCollectionConfig } from 'payload'\n\nimport { useModal } from '@faceless-ui/modal'\nimport { getTranslation } from '@payloadcms/translations'\nimport { useRouter } from 'next/navigation.js'\nimport { formatAdminURL } from 'payload/shared'\nimport * as qs from 'qs-esm'\nimport React, { Fragment, useCallback } from 'react'\nimport { toast } from 'sonner'\n\nimport type { DocumentDrawerContextType } from '../DocumentDrawer/Provider.js'\n\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useDocumentTitle } from '../../providers/DocumentTitle/index.js'\nimport { useRouteTransition } from '../../providers/RouteTransition/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { requests } from '../../utilities/api.js'\nimport { Button } from '../Button/index.js'\nimport { ConfirmationModal } from '../ConfirmationModal/index.js'\nimport { Translation } from '../Translation/index.js'\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}\n\nexport const PermanentlyDeleteButton: 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  const router = useRouter()\n  const { i18n, t } = useTranslation()\n  const { title } = useDocumentTitle()\n  const { startRouteTransition } = useRouteTransition()\n  const { openModal } = useModal()\n\n  const modalSlug = `perma-delete-${id}`\n\n  const addDefaultError = useCallback(() => {\n    toast.error(t('error:deletingTitle', { title }))\n  }, [t, title])\n\n  const handleDelete = useCallback(async () => {\n    try {\n      const url = `${serverURL}${api}/${collectionSlug}?${qs.stringify({\n        trash: true,\n        where: {\n          and: [{ id: { equals: id } }, { deletedAt: { exists: true } }],\n        },\n      })}`\n\n      const res = await requests.delete(url, {\n        headers: {\n          'Accept-Language': i18n.language,\n          'Content-Type': 'application/json',\n        },\n      })\n\n      const json = await res.json()\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}/trash`,\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    } catch (_err) {\n      addDefaultError()\n    }\n  }, [\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  if (id) {\n    return (\n      <Fragment>\n        <Button\n          buttonStyle=\"secondary\"\n          id={buttonId}\n          onClick={() => {\n            openModal(modalSlug)\n          }}\n        >\n          {t('general:permanentlyDelete')}\n        </Button>\n        <ConfirmationModal\n          body={\n            <Translation\n              elements={{\n                '1': ({ children }) => <strong>{children}</strong>,\n              }}\n              i18nKey=\"general:aboutToPermanentlyDelete\"\n              t={t}\n              variables={{\n                label: getTranslation(singularLabel, i18n),\n                title: titleFromProps || title || id,\n              }}\n            />\n          }\n          confirmingLabel={t('general:deleting')}\n          heading={t('general:confirmDeletion')}\n          modalSlug={modalSlug}\n          onConfirm={handleDelete}\n        />\n      </Fragment>\n    )\n  }\n\n  return null\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/RelationshipTable/cells/DrawerLink/index.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
-import type { DocumentDrawerProps } from '../../../DocumentDrawer/types.js';
+import type { OnDrawerOpen } from '../../index.js';
 import './index.scss';
 export declare const DrawerLink: React.FC<{
-    readonly onDrawerDelete?: DocumentDrawerProps['onDelete'];
-    readonly onDrawerSave?: DocumentDrawerProps['onSave'];
+    currentDrawerID?: string;
+    onDrawerOpen: OnDrawerOpen;
 }>;
 //# sourceMappingURL=index.d.ts.map

package/dist/elements/RelationshipTable/cells/DrawerLink/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/RelationshipTable/cells/DrawerLink/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsB,MAAM,OAAO,CAAA;AAE1C,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAA;AAM3E,OAAO,cAAc,CAAA;AAErB,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC;IAChC,QAAQ,CAAC,cAAc,CAAC,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAA;IACzD,QAAQ,CAAC,YAAY,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAA;CACtD,CAyCA,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/RelationshipTable/cells/DrawerLink/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAKlD,OAAO,cAAc,CAAA;AAErB,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC;IAChC,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,YAAY,EAAE,YAAY,CAAA;CAC3B,CAiBA,CAAA"}

package/dist/elements/RelationshipTable/cells/DrawerLink/index.js

@@ -2,92 +2,41 @@
 
 import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useCallback } from 'react';
+import React from 'react';
 import { EditIcon } from '../../../../icons/Edit/index.js';
 import { useCellProps } from '../../../../providers/TableColumns/RenderDefaultCell/index.js';
-import { useDocumentDrawer } from '../../../DocumentDrawer/index.js';
 import { DefaultCell } from '../../../Table/DefaultCell/index.js';
 import './index.scss';
-export const DrawerLink = props => {
-  const $ = _c(15);
+export const DrawerLink = t0 => {
+  const $ = _c(3);
   const {
-    onDrawerDelete: onDrawerDeleteFromProps,
-    onDrawerSave: onDrawerSaveFromProps
-  } = props;
+    onDrawerOpen
+  } = t0;
   const cellProps = useCellProps();
-  const t0 = cellProps?.rowData.id;
-  const t1 = cellProps?.collectionSlug;
-  let t2;
-  if ($[0] !== t0 || $[1] !== t1) {
-    t2 = {
-      id: t0,
-      collectionSlug: t1
-    };
-    $[0] = t0;
-    $[1] = t1;
-    $[2] = t2;
-  } else {
-    t2 = $[2];
-  }
-  const [DocumentDrawer, DocumentDrawerToggler, t3] = useDocumentDrawer(t2);
-  const {
-    closeDrawer
-  } = t3;
-  let t4;
-  if ($[3] !== closeDrawer || $[4] !== onDrawerSaveFromProps) {
-    t4 = args => {
-      closeDrawer();
-      if (typeof onDrawerSaveFromProps === "function") {
-        onDrawerSaveFromProps(args);
-      }
-    };
-    $[3] = closeDrawer;
-    $[4] = onDrawerSaveFromProps;
-    $[5] = t4;
-  } else {
-    t4 = $[5];
-  }
-  const onDrawerSave = t4;
-  let t5;
-  if ($[6] !== closeDrawer || $[7] !== onDrawerDeleteFromProps) {
-    t5 = args_0 => {
-      closeDrawer();
-      if (typeof onDrawerDeleteFromProps === "function") {
-        onDrawerDeleteFromProps(args_0);
-      }
-    };
-    $[6] = closeDrawer;
-    $[7] = onDrawerDeleteFromProps;
-    $[8] = t5;
-  } else {
-    t5 = $[8];
-  }
-  const onDrawerDelete = t5;
-  let t6;
-  if ($[9] !== DocumentDrawer || $[10] !== DocumentDrawerToggler || $[11] !== cellProps || $[12] !== onDrawerDelete || $[13] !== onDrawerSave) {
-    t6 = _jsxs("div", {
+  let t1;
+  if ($[0] !== cellProps || $[1] !== onDrawerOpen) {
+    t1 = _jsxs("div", {
       className: "drawer-link",
       children: [_jsx(DefaultCell, {
         ...cellProps,
         className: "drawer-link__cell",
         link: false,
         onClick: null
-      }), _jsx(DocumentDrawerToggler, {
+      }), _jsx("button", {
+        className: "drawer-link__doc-drawer-toggler",
+        onClick: () => {
+          onDrawerOpen(cellProps.rowData.id);
+        },
+        type: "button",
         children: _jsx(EditIcon, {})
-      }), _jsx(DocumentDrawer, {
-        onDelete: onDrawerDelete,
-        onSave: onDrawerSave
       })]
     });
-    $[9] = DocumentDrawer;
-    $[10] = DocumentDrawerToggler;
-    $[11] = cellProps;
-    $[12] = onDrawerDelete;
-    $[13] = onDrawerSave;
-    $[14] = t6;
+    $[0] = cellProps;
+    $[1] = onDrawerOpen;
+    $[2] = t1;
   } else {
-    t6 = $[14];
+    t1 = $[2];
   }
-  return t6;
+  return t1;
 };
 //# sourceMappingURL=index.js.map

package/dist/elements/RelationshipTable/cells/DrawerLink/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","useCallback","EditIcon","useCellProps","useDocumentDrawer","DefaultCell","DrawerLink","props","$","onDrawerDelete","onDrawerDeleteFromProps","onDrawerSave","onDrawerSaveFromProps","cellProps","t0","rowData","id","t1","collectionSlug","t2","DocumentDrawer","DocumentDrawerToggler","t3","closeDrawer","t4","args","t5","args_0","t6","_jsxs","className","children","_jsx","link","onClick","onDelete","onSave"],"sources":["../../../../../src/elements/RelationshipTable/cells/DrawerLink/index.tsx"],"sourcesContent":["'use client'\n\nimport React, { useCallback } from 'react'\n\nimport type { DocumentDrawerProps } from '../../../DocumentDrawer/types.js'\n\nimport { EditIcon } from '../../../../icons/Edit/index.js'\nimport { useCellProps } from '../../../../providers/TableColumns/RenderDefaultCell/index.js'\nimport { useDocumentDrawer } from '../../../DocumentDrawer/index.js'\nimport { DefaultCell } from '../../../Table/DefaultCell/index.js'\nimport './index.scss'\n\nexport const DrawerLink: React.FC<{\n  readonly onDrawerDelete?: DocumentDrawerProps['onDelete']\n  readonly onDrawerSave?: DocumentDrawerProps['onSave']\n}> = (props) => {\n  const { onDrawerDelete: onDrawerDeleteFromProps, onDrawerSave: onDrawerSaveFromProps } = props\n\n  const cellProps = useCellProps()\n\n  const [DocumentDrawer, DocumentDrawerToggler, { closeDrawer }] = useDocumentDrawer({\n    id: cellProps?.rowData.id,\n    collectionSlug: cellProps?.collectionSlug,\n  })\n\n  const onDrawerSave = useCallback<DocumentDrawerProps['onSave']>(\n    (args) => {\n      closeDrawer()\n\n      if (typeof onDrawerSaveFromProps === 'function') {\n        void onDrawerSaveFromProps(args)\n      }\n    },\n    [closeDrawer, onDrawerSaveFromProps],\n  )\n\n  const onDrawerDelete = useCallback<DocumentDrawerProps['onDelete']>(\n    (args) => {\n      closeDrawer()\n\n      if (typeof onDrawerDeleteFromProps === 'function') {\n        void onDrawerDeleteFromProps(args)\n      }\n    },\n    [closeDrawer, onDrawerDeleteFromProps],\n  )\n\n  return (\n    <div className=\"drawer-link\">\n      <DefaultCell {...cellProps} className=\"drawer-link__cell\" link={false} onClick={null} />\n      <DocumentDrawerToggler>\n        <EditIcon />\n      </DocumentDrawerToggler>\n      <DocumentDrawer onDelete={onDrawerDelete} onSave={onDrawerSave} />\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAEA,OAAOC,KAAA,IAASC,WAAW,QAAQ;AAInC,SAASC,QAAQ,QAAQ;AACzB,SAASC,YAAY,QAAQ;AAC7B,SAASC,iBAAiB,QAAQ;AAClC,SAASC,WAAW,QAAQ;AAC5B,OAAO;AAEP,OAAO,MAAMC,UAAA,GAGRC,KAAA;EAAA,MAAAC,CAAA,GAAAT,EAAA;EACH;IAAAU,cAAA,EAAAC,uBAAA;IAAAC,YAAA,EAAAC;EAAA,IAAyFL,KAAA;EAEzF,MAAAM,SAAA,GAAkBV,YAAA;EAGZ,MAAAW,EAAA,GAAAD,SAAA,EAAAE,OAAA,CAAAC,EAAA;EACY,MAAAC,EAAA,GAAAJ,SAAA,EAAAK,cAAA;EAAW,IAAAC,EAAA;EAAA,IAAAX,CAAA,QAAAM,EAAA,IAAAN,CAAA,QAAAS,EAAA;IAFsDE,EAAA;MAAAH,EAAA,EAC7EF,EAAmB;MAAAI,cAAA,EACPD;IAAW;IAC7BT,CAAA,MAAAM,EAAA;IAAAN,CAAA,MAAAS,EAAA;IAAAT,CAAA,MAAAW,EAAA;EAAA;IAAAA,EAAA,GAAAX,CAAA;EAAA;EAHA,OAAAY,cAAA,EAAAC,qBAAA,EAAAC,EAAA,IAAiElB,iBAAA,CAAkBe,EAGnF;EAH8C;IAAAI;EAAA,IAAAD,EAAe;EAAA,IAAAE,EAAA;EAAA,IAAAhB,CAAA,QAAAe,WAAA,IAAAf,CAAA,QAAAI,qBAAA;IAM3DY,EAAA,GAAAC,IAAA;MACEF,WAAA;MAAA,IAEI,OAAOX,qBAAA,KAA0B;QAC9BA,qBAAA,CAAsBa,IAAA;MAAA;IAAA;IAE/BjB,CAAA,MAAAe,WAAA;IAAAf,CAAA,MAAAI,qBAAA;IAAAJ,CAAA,MAAAgB,EAAA;EAAA;IAAAA,EAAA,GAAAhB,CAAA;EAAA;EAPF,MAAAG,YAAA,GAAqBa,EAQiB;EAAA,IAAAE,EAAA;EAAA,IAAAlB,CAAA,QAAAe,WAAA,IAAAf,CAAA,QAAAE,uBAAA;IAIpCgB,EAAA,GAAAC,MAAA;MACEJ,WAAA;MAAA,IAEI,OAAOb,uBAAA,KAA4B;QAChCA,uBAAA,CAAwBe,MAAA;MAAA;IAAA;IAEjCjB,CAAA,MAAAe,WAAA;IAAAf,CAAA,MAAAE,uBAAA;IAAAF,CAAA,MAAAkB,EAAA;EAAA;IAAAA,EAAA,GAAAlB,CAAA;EAAA;EAPF,MAAAC,cAAA,GAAuBiB,EAQiB;EAAA,IAAAE,EAAA;EAAA,IAAApB,CAAA,QAAAY,cAAA,IAAAZ,CAAA,SAAAa,qBAAA,IAAAb,CAAA,SAAAK,SAAA,IAAAL,CAAA,SAAAC,cAAA,IAAAD,CAAA,SAAAG,YAAA;IAItCiB,EAAA,GAAAC,KAAA,CAAC;MAAAC,SAAA,EAAc;MAAAC,QAAA,GACbC,IAAA,CAAA3B,WAAA;QAAA,GAAiBQ,SAAS;QAAAiB,SAAA,EAAY;QAAAG,IAAA;QAAAC,OAAA;MAAA,C,GACtCF,IAAA,CAACX,qBAAA;QAAAU,QAAA,EACCC,IAAA,CAAA9B,QAAA,IAAC;MAAA,C,GAEH8B,IAAA,CAACZ,cAAA;QAAAe,QAAA,EAAyB1B,cAAA;QAAA2B,MAAA,EAAwBzB;MAAA,C;;;;;;;;;;;SALpDiB,E;CAQJ","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","EditIcon","useCellProps","DefaultCell","DrawerLink","t0","$","onDrawerOpen","cellProps","t1","_jsxs","className","children","_jsx","link","onClick","rowData","id","type"],"sources":["../../../../../src/elements/RelationshipTable/cells/DrawerLink/index.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nimport type { OnDrawerOpen } from '../../index.js'\n\nimport { EditIcon } from '../../../../icons/Edit/index.js'\nimport { useCellProps } from '../../../../providers/TableColumns/RenderDefaultCell/index.js'\nimport { DefaultCell } from '../../../Table/DefaultCell/index.js'\nimport './index.scss'\n\nexport const DrawerLink: React.FC<{\n  currentDrawerID?: string\n  onDrawerOpen: OnDrawerOpen\n}> = ({ onDrawerOpen }) => {\n  const cellProps = useCellProps()\n\n  return (\n    <div className=\"drawer-link\">\n      <DefaultCell {...cellProps} className=\"drawer-link__cell\" link={false} onClick={null} />\n      <button\n        className=\"drawer-link__doc-drawer-toggler\"\n        onClick={() => {\n          onDrawerOpen(cellProps.rowData.id)\n        }}\n        type=\"button\"\n      >\n        <EditIcon />\n      </button>\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAEA,OAAOC,KAAA,MAAW;AAIlB,SAASC,QAAQ,QAAQ;AACzB,SAASC,YAAY,QAAQ;AAC7B,SAASC,WAAW,QAAQ;AAC5B,OAAO;AAEP,OAAO,MAAMC,UAAA,GAGRC,EAAA;EAAA,MAAAC,CAAA,GAAAP,EAAA;EAAC;IAAAQ;EAAA,IAAAF,EAAgB;EACpB,MAAAG,SAAA,GAAkBN,YAAA;EAAA,IAAAO,EAAA;EAAA,IAAAH,CAAA,QAAAE,SAAA,IAAAF,CAAA,QAAAC,YAAA;IAGhBE,EAAA,GAAAC,KAAA,CAAC;MAAAC,SAAA,EAAc;MAAAC,QAAA,GACbC,IAAA,CAAAV,WAAA;QAAA,GAAiBK,SAAS;QAAAG,SAAA,EAAY;QAAAG,IAAA;QAAAC,OAAA;MAAA,C,GACtCF,IAAA,CAAC;QAAAF,SAAA,EACW;QAAAI,OAAA,EAAAA,CAAA;UAERR,YAAA,CAAaC,SAAA,CAAAQ,OAAA,CAAAC,EAAoB;QAAA;QAAAC,IAAA,EAE9B;QAAAN,QAAA,EAELC,IAAA,CAAAZ,QAAA,IAAC;MAAA,C;;;;;;;;SATLQ,E;CAaJ","ignoreList":[]}

package/dist/elements/RelationshipTable/cells/DrawerLink/index.scss

@@ -2,5 +2,15 @@
   .drawer-link {
     display: flex;
     gap: calc(var(--base) / 2);
+
+    &__doc-drawer-toggler {
+      border: none;
+      background: none;
+      padding: 0;
+      cursor: pointer;
+      color: var(--color-text);
+      font-size: inherit;
+      line-height: inherit;
+    }
   }
 }

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

@@ -20,6 +20,7 @@ type RelationshipTableComponentProps = {
     };
     readonly relationTo: string | string[];
 };
+export type OnDrawerOpen = (id?: string) => void;
 export declare const RelationshipTable: React.FC<RelationshipTableComponentProps>;
 export {};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/RelationshipTable/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,cAAc,EAEnB,KAAK,eAAe,EAEpB,KAAK,aAAa,EAClB,KAAK,KAAK,EACX,MAAM,SAAS,CAAA;AAEhB,OAAO,KAAqD,MAAM,OAAO,CAAA;AAEzE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAA;AAiBrE,OAAO,cAAc,CAAA;AAKrB,KAAK,+BAA+B,GAAG;IACrC,QAAQ,CAAC,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACrC,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAA;IAC9B,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtC,QAAQ,CAAC,YAAY,CAAC,EAAE,OAAO,CAAA;IAC/B,QAAQ,CAAC,KAAK,EAAE,eAAe,CAAA;IAC/B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,aAAa,CAAC,EAAE,KAAK,CAAA;IAC9B,QAAQ,CAAC,WAAW,CAAC,EAAE,aAAa,CAAA;IACpC,QAAQ,CAAC,iBAAiB,CAAC,EAAE,mBAAmB,CAAC,aAAa,CAAC,CAAA;IAC/D,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAChC,QAAQ,CAAC,MAAM,CAAC,EAAE;QAChB,cAAc,EAAE,cAAc,CAAA;QAC9B,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;QACnB,QAAQ,EAAE,MAAM,CAAA;KACjB,CAAA;IACD,QAAQ,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;CACvC,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,+BAA+B,CAmTvE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/RelationshipTable/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,cAAc,EAEnB,KAAK,eAAe,EAEpB,KAAK,aAAa,EAClB,KAAK,KAAK,EACX,MAAM,SAAS,CAAA;AAEhB,OAAO,KAA6D,MAAM,OAAO,CAAA;AAEjF,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAA;AAkBrE,OAAO,cAAc,CAAA;AAIrB,KAAK,+BAA+B,GAAG;IACrC,QAAQ,CAAC,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACrC,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAA;IAC9B,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtC,QAAQ,CAAC,YAAY,CAAC,EAAE,OAAO,CAAA;IAC/B,QAAQ,CAAC,KAAK,EAAE,eAAe,CAAA;IAC/B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,aAAa,CAAC,EAAE,KAAK,CAAA;IAC9B,QAAQ,CAAC,WAAW,CAAC,EAAE,aAAa,CAAA;IACpC,QAAQ,CAAC,iBAAiB,CAAC,EAAE,mBAAmB,CAAC,aAAa,CAAC,CAAA;IAC/D,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAChC,QAAQ,CAAC,MAAM,CAAC,EAAE;QAChB,cAAc,EAAE,cAAc,CAAA;QAC9B,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;QACnB,QAAQ,EAAE,MAAM,CAAA;KACjB,CAAA;IACD,QAAQ,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;CACvC,CAAA;AAED,MAAM,MAAM,YAAY,GAAG,CAAC,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;AAEhD,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,+BAA+B,CAiVvE,CAAA"}

package/dist/elements/RelationshipTable/index.js

@@ -3,7 +3,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getTranslation } from '@payloadcms/translations';
 import { hoistQueryParamsToAnd, transformColumnsToPreferences } from 'payload/shared';
-import React, { Fragment, useCallback, useEffect, useState } from 'react';
+import React, { Fragment, useCallback, useEffect, useRef, useState } from 'react';
 import { Pill } from '../../elements/Pill/index.js';
 import { useEffectEvent } from '../../hooks/useEffectEvent.js';
 import { ChevronIcon } from '../../icons/Chevron/index.js';
@@ -19,8 +19,8 @@ import { useDocumentDrawer } from '../DocumentDrawer/index.js';
 import { RelationshipProvider } from '../Table/RelationshipProvider/index.js';
 import { AddNewButton } from './AddNewButton.js';
 import { DrawerLink } from './cells/DrawerLink/index.js';
-import './index.scss';
 import { RelationshipTablePagination } from './Pagination.js';
+import './index.scss';
 const baseClass = 'relationship-table';
 export const RelationshipTable = props => {
   const {
@@ -42,24 +42,6 @@ export const RelationshipTable = props => {
     config,
     getEntityConfig
   } = useConfig();
-  const {
-    permissions
-  } = useAuth();
-  const [initialData] = useState(() => {
-    if (initialDataFromProps) {
-      return {
-        ...initialDataFromProps,
-        docs: Array.isArray(initialDataFromProps.docs) ? initialDataFromProps.docs.reduce((acc, doc) => {
-          if (typeof doc === 'string') {
-            return [...acc, {
-              id: doc
-            }];
-          }
-          return [...acc, doc];
-        }, []) : []
-      };
-    }
-  });
   const {
     i18n,
     t
@@ -71,8 +53,31 @@ export const RelationshipTable = props => {
   }));
   const isPolymorphic = Array.isArray(relationTo);
   const [selectedCollection, setSelectedCollection] = useState(isPolymorphic ? undefined : relationTo);
+  const {
+    permissions
+  } = useAuth();
+  const openDrawerWhenRelationChanges = useRef(false);
+  const [currentDrawerID, setCurrentDrawerID] = useState(undefined);
+  const [DocumentDrawer,, {
+    closeDrawer,
+    isDrawerOpen,
+    openDrawer
+  }] = useDocumentDrawer({
+    id: currentDrawerID,
+    collectionSlug: selectedCollection
+  });
   const [isLoadingTable, setIsLoadingTable] = useState(!disableTable);
-  const [data, setData] = useState(initialData);
+  const [data, setData] = useState(() => initialDataFromProps ? {
+    ...initialDataFromProps,
+    docs: Array.isArray(initialDataFromProps.docs) ? initialDataFromProps.docs.reduce((acc, doc) => {
+      if (typeof doc === 'string' || typeof doc === 'number') {
+        return [...acc, {
+          id: doc
+        }];
+      }
+      return [...acc, doc];
+    }, []) : []
+  } : undefined);
   const [columnState, setColumnState] = useState();
   const {
     getTableState
@@ -122,38 +127,53 @@ export const RelationshipTable = props => {
   useEffect(() => {
     handleTableRender(query, disableTable);
   }, [query, disableTable]);
-  const [DocumentDrawer,, {
-    closeDrawer,
-    isDrawerOpen,
-    openDrawer
-  }] = useDocumentDrawer({
-    collectionSlug: selectedCollection
-  });
-  const onDrawerSave = useCallback(args => {
-    const foundDocIndex = data?.docs?.findIndex(doc => doc.id === args.doc.id);
+  const onDrawerSave = useCallback(({
+    doc,
+    operation
+  }) => {
+    if (operation === 'create') {
+      closeDrawer();
+    }
+    const foundDocIndex = data?.docs?.findIndex(d => d.id === doc.id);
     const withNewOrUpdatedData = {
       docs: []
     };
     if (foundDocIndex !== -1) {
       const newDocs = [...data.docs];
-      newDocs[foundDocIndex] = args.doc;
+      newDocs[foundDocIndex] = doc;
       withNewOrUpdatedData.docs = newDocs;
     } else {
-      withNewOrUpdatedData.docs = [args.doc, ...data.docs];
+      withNewOrUpdatedData.docs = [doc, ...data.docs];
     }
     void renderTable(withNewOrUpdatedData);
-  }, [data?.docs, renderTable]);
-  const onDrawerCreate = useCallback(args => {
-    closeDrawer();
-    void onDrawerSave(args);
-  }, [closeDrawer, onDrawerSave]);
+  }, [data?.docs, renderTable, closeDrawer]);
   const onDrawerDelete = useCallback(args => {
     const newDocs = data.docs.filter(doc => doc.id !== args.id);
     void renderTable({
       ...data,
       docs: newDocs
     });
+    setCurrentDrawerID(undefined);
   }, [data, renderTable]);
+  const onDrawerOpen = useCallback(id => {
+    openDrawerWhenRelationChanges.current = true;
+    if (id) {
+      setCurrentDrawerID(id);
+    } else {
+      setCurrentDrawerID(undefined);
+    }
+  }, []);
+  useEffect(() => {
+    if (openDrawerWhenRelationChanges.current) {
+      openDrawerWhenRelationChanges.current = false;
+      openDrawer();
+    }
+  }, [openDrawer]);
+  useEffect(() => {
+    if (!isDrawerOpen) {
+      setCurrentDrawerID(undefined);
+    }
+  }, [isDrawerOpen]);
   const canCreate = allowCreate !== false && permissions?.collections?.[isPolymorphic ? relationTo[0] : relationTo]?.create;
   useEffect(() => {
     if (isPolymorphic && selectedCollection) {
@@ -237,8 +257,8 @@ export const RelationshipTable = props => {
             collectionSlug: isPolymorphic ? relationTo[0] : relationTo,
             columnState: columnState,
             LinkedCellOverride: /*#__PURE__*/_jsx(DrawerLink, {
-              onDrawerDelete: onDrawerDelete,
-              onDrawerSave: onDrawerSave
+              currentDrawerID: currentDrawerID,
+              onDrawerOpen: onDrawerOpen
             }),
             children: [/*#__PURE__*/_jsx(AnimateHeight, {
               className: `${baseClass}__columns`,
@@ -256,7 +276,8 @@ export const RelationshipTable = props => {
       })]
     }), AfterInput, /*#__PURE__*/_jsx(DocumentDrawer, {
       initialData: initialDrawerData,
-      onSave: onDrawerCreate
+      onDelete: onDrawerDelete,
+      onSave: onDrawerSave
     })]
   });
 };