@payloadcms/ui 4.0.0-internal.d28e9fb → 4.0.0-internal.d3909a9

package/dist/elements/RelationshipTable/Pagination.js

@@ -6,49 +6,39 @@ import React from 'react';
 import { useListQuery } from '../../providers/ListQuery/index.js';
 import { Pagination } from '../Pagination/index.js';
 export const RelationshipTablePagination = () => {
-  const $ = _c(11);
+  const $ = _c(9);
   const {
     data,
     handlePageChange
   } = useListQuery();
-  const t0 = data.nextPage || 2;
-  let t1;
-  if ($[0] !== handlePageChange) {
-    t1 = e => {
-      handlePageChange(e);
-    };
-    $[0] = handlePageChange;
-    $[1] = t1;
-  } else {
-    t1 = $[1];
+  if (!data?.totalDocs || !data?.limit) {
+    return null;
   }
-  const t2 = data.page || 1;
-  const t3 = data.prevPage || undefined;
-  let t4;
-  if ($[2] !== data.hasNextPage || $[3] !== data.hasPrevPage || $[4] !== data.limit || $[5] !== data.totalPages || $[6] !== t0 || $[7] !== t1 || $[8] !== t2 || $[9] !== t3) {
-    t4 = _jsx(Pagination, {
+  let t0;
+  if ($[0] !== data.hasNextPage || $[1] !== data.hasPrevPage || $[2] !== data.limit || $[3] !== data.nextPage || $[4] !== data.page || $[5] !== data.prevPage || $[6] !== data.totalPages || $[7] !== handlePageChange) {
+    t0 = _jsx(Pagination, {
       hasNextPage: data.hasNextPage,
       hasPrevPage: data.hasPrevPage,
       limit: data.limit,
-      nextPage: t0,
+      nextPage: data.nextPage,
       numberOfNeighbors: 1,
-      onChange: t1,
-      page: t2,
-      prevPage: t3,
+      onChange: handlePageChange,
+      page: data.page,
+      prevPage: data.prevPage,
       totalPages: data.totalPages
     });
-    $[2] = data.hasNextPage;
-    $[3] = data.hasPrevPage;
-    $[4] = data.limit;
-    $[5] = data.totalPages;
-    $[6] = t0;
-    $[7] = t1;
-    $[8] = t2;
-    $[9] = t3;
-    $[10] = t4;
+    $[0] = data.hasNextPage;
+    $[1] = data.hasPrevPage;
+    $[2] = data.limit;
+    $[3] = data.nextPage;
+    $[4] = data.page;
+    $[5] = data.prevPage;
+    $[6] = data.totalPages;
+    $[7] = handlePageChange;
+    $[8] = t0;
   } else {
-    t4 = $[10];
+    t0 = $[8];
   }
-  return t4;
+  return t0;
 };
 //# sourceMappingURL=Pagination.js.map

package/dist/elements/RelationshipTable/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","names":["c","_c","React","useListQuery","Pagination","RelationshipTablePagination","$","data","handlePageChange","t0","nextPage","t1","e","t2","page","t3","prevPage","undefined","t4","hasNextPage","hasPrevPage","limit","totalPages","_jsx","numberOfNeighbors","onChange"],"sources":["../../../src/elements/RelationshipTable/Pagination.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nimport { useListQuery } from '../../providers/ListQuery/index.js'\nimport { Pagination } from '../Pagination/index.js'\n\nexport const RelationshipTablePagination: React.FC = () => {\n  const { data, handlePageChange } = useListQuery()\n\n  return (\n    <Pagination\n      hasNextPage={data.hasNextPage}\n      hasPrevPage={data.hasPrevPage}\n      limit={data.limit}\n      nextPage={data.nextPage || 2}\n      numberOfNeighbors={1}\n      onChange={(e) => {\n        void handlePageChange(e)\n      }}\n      page={data.page || 1}\n      prevPage={data.prevPage || undefined}\n      totalPages={data.totalPages}\n    />\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAEA,OAAOC,KAAA,MAAW;AAElB,SAASC,YAAY,QAAQ;AAC7B,SAASC,UAAU,QAAQ;AAE3B,OAAO,MAAMC,2BAAA,GAAwCA,CAAA;EAAA,MAAAC,CAAA,GAAAL,EAAA;EACnD;IAAAM,IAAA;IAAAC;EAAA,IAAmCL,YAAA;EAOrB,MAAAM,EAAA,GAAAF,IAAA,CAAAG,QAAA,KAAiB;EAAA,IAAAC,EAAA;EAAA,IAAAL,CAAA,QAAAE,gBAAA;IAEjBG,EAAA,GAAAC,CAAA;MACHJ,gBAAA,CAAiBI,CAAA;IAAA;IACxBN,CAAA,MAAAE,gBAAA;IAAAF,CAAA,MAAAK,EAAA;EAAA;IAAAA,EAAA,GAAAL,CAAA;EAAA;EACM,MAAAO,EAAA,GAAAN,IAAA,CAAAO,IAAA,KAAa;EACT,MAAAC,EAAA,GAAAR,IAAA,CAAAS,QAAA,IAAAC,SAAiB;EAAA,IAAAC,EAAA;EAAA,IAAAZ,CAAA,QAAAC,IAAA,CAAAY,WAAA,IAAAb,CAAA,QAAAC,IAAA,CAAAa,WAAA,IAAAd,CAAA,QAAAC,IAAA,CAAAc,KAAA,IAAAf,CAAA,QAAAC,IAAA,CAAAe,UAAA,IAAAhB,CAAA,QAAAG,EAAA,IAAAH,CAAA,QAAAK,EAAA,IAAAL,CAAA,QAAAO,EAAA,IAAAP,CAAA,QAAAS,EAAA;IAV7BG,EAAA,GAAAK,IAAA,CAAAnB,UAAA;MAAAe,WAAA,EACeZ,IAAA,CAAAY,WAAA;MAAAC,WAAA,EACAb,IAAA,CAAAa,WAAA;MAAAC,KAAA,EACNd,IAAA,CAAAc,KAAA;MAAAX,QAAA,EACGD,EAAiB;MAAAe,iBAAA;MAAAC,QAAA,EAEjBd,EAEV;MAAAG,IAAA,EACMD,EAAa;MAAAG,QAAA,EACTD,EAAiB;MAAAO,UAAA,EACff,IAAA,CAAAe;IAAA,C;;;;;;;;;;;;;SAXdJ,E;CAcJ","ignoreList":[]}
+{"version":3,"file":"Pagination.js","names":["c","_c","React","useListQuery","Pagination","RelationshipTablePagination","$","data","handlePageChange","totalDocs","limit","t0","hasNextPage","hasPrevPage","nextPage","page","prevPage","totalPages","_jsx","numberOfNeighbors","onChange"],"sources":["../../../src/elements/RelationshipTable/Pagination.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nimport { useListQuery } from '../../providers/ListQuery/index.js'\nimport { Pagination } from '../Pagination/index.js'\n\nexport const RelationshipTablePagination: React.FC = () => {\n  const { data, handlePageChange } = useListQuery()\n\n  if (!data?.totalDocs || !data?.limit) {\n    return null\n  }\n\n  return (\n    <Pagination\n      hasNextPage={data.hasNextPage}\n      hasPrevPage={data.hasPrevPage}\n      limit={data.limit}\n      nextPage={data.nextPage}\n      numberOfNeighbors={1}\n      onChange={handlePageChange}\n      page={data.page}\n      prevPage={data.prevPage}\n      totalPages={data.totalPages}\n    />\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAEA,OAAOC,KAAA,MAAW;AAElB,SAASC,YAAY,QAAQ;AAC7B,SAASC,UAAU,QAAQ;AAE3B,OAAO,MAAMC,2BAAA,GAAwCA,CAAA;EAAA,MAAAC,CAAA,GAAAL,EAAA;EACnD;IAAAM,IAAA;IAAAC;EAAA,IAAmCL,YAAA;EAAA,IAE/B,CAACI,IAAA,EAAAE,SAAA,KAAoBF,IAAA,EAAAG,KAAM;IAAA;EAAA;EAAA,IAAAC,EAAA;EAAA,IAAAL,CAAA,QAAAC,IAAA,CAAAK,WAAA,IAAAN,CAAA,QAAAC,IAAA,CAAAM,WAAA,IAAAP,CAAA,QAAAC,IAAA,CAAAG,KAAA,IAAAJ,CAAA,QAAAC,IAAA,CAAAO,QAAA,IAAAR,CAAA,QAAAC,IAAA,CAAAQ,IAAA,IAAAT,CAAA,QAAAC,IAAA,CAAAS,QAAA,IAAAV,CAAA,QAAAC,IAAA,CAAAU,UAAA,IAAAX,CAAA,QAAAE,gBAAA;IAK7BG,EAAA,GAAAO,IAAA,CAAAd,UAAA;MAAAQ,WAAA,EACeL,IAAA,CAAAK,WAAA;MAAAC,WAAA,EACAN,IAAA,CAAAM,WAAA;MAAAH,KAAA,EACNH,IAAA,CAAAG,KAAA;MAAAI,QAAA,EACGP,IAAA,CAAAO,QAAA;MAAAK,iBAAA;MAAAC,QAAA,EAEAZ,gBAAA;MAAAO,IAAA,EACJR,IAAA,CAAAQ,IAAA;MAAAC,QAAA,EACIT,IAAA,CAAAS,QAAA;MAAAC,UAAA,EACEV,IAAA,CAAAU;IAAA,C;;;;;;;;;;;;;SATdN,E;CAYJ","ignoreList":[]}

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

@@ -0,0 +1,31 @@
+@layer payload-default {
+  .drawer-link {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-1);
+  }
+
+  .drawer-link__doc-drawer-toggler {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    background: none;
+    padding: 0;
+    margin-top: calc(-1 * var(--spacer-1));
+    margin-bottom: calc(-1 * var(--spacer-1));
+    cursor: pointer;
+    color: var(--color-text);
+    font-size: inherit;
+    line-height: inherit;
+    border-radius: var(--radius-small);
+
+    &:hover {
+      background-color: var(--color-bg-transparent-hover);
+    }
+
+    &:active {
+      background-color: var(--color-bg-transparent-pressed);
+    }
+  }
+}

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { OnDrawerOpen } from '../../index.js';
-import './index.scss';
+import './index.css';
 export declare const DrawerLink: React.FC<{
     currentDrawerID?: string;
     onDrawerOpen: OnDrawerOpen;

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,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"}
+{"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;AAMlD,OAAO,aAAa,CAAA;AAEpB,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC;IAChC,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,YAAY,EAAE,YAAY,CAAA;CAC3B,CAmBA,CAAA"}

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

@@ -3,18 +3,33 @@
 import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { EditIcon } from '../../../../icons/Edit/index.js';
+import { WriteIcon } from '../../../../icons/Write/index.js';
 import { useCellProps } from '../../../../providers/TableColumns/RenderDefaultCell/index.js';
+import { useTranslation } from '../../../../providers/Translation/index.js';
 import { DefaultCell } from '../../../Table/DefaultCell/index.js';
-import './index.scss';
+import './index.css';
 export const DrawerLink = t0 => {
-  const $ = _c(3);
+  const $ = _c(7);
   const {
     onDrawerOpen
   } = t0;
   const cellProps = useCellProps();
+  const {
+    t
+  } = useTranslation();
   let t1;
-  if ($[0] !== cellProps || $[1] !== onDrawerOpen) {
+  if ($[0] !== cellProps || $[1] !== onDrawerOpen || $[2] !== t) {
+    let t2;
+    if ($[4] !== cellProps || $[5] !== onDrawerOpen) {
+      t2 = () => {
+        onDrawerOpen(cellProps.rowData.id, cellProps.collectionSlug);
+      };
+      $[4] = cellProps;
+      $[5] = onDrawerOpen;
+      $[6] = t2;
+    } else {
+      t2 = $[6];
+    }
     t1 = _jsxs("div", {
       className: "drawer-link",
       children: [_jsx(DefaultCell, {
@@ -23,19 +38,19 @@ export const DrawerLink = t0 => {
         link: false,
         onClick: null
       }), _jsx("button", {
+        "aria-label": t("general:edit"),
         className: "drawer-link__doc-drawer-toggler",
-        onClick: () => {
-          onDrawerOpen(cellProps.rowData.id, cellProps.collectionSlug);
-        },
+        onClick: t2,
         type: "button",
-        children: _jsx(EditIcon, {})
+        children: _jsx(WriteIcon, {})
       })]
     });
     $[0] = cellProps;
     $[1] = onDrawerOpen;
-    $[2] = t1;
+    $[2] = t;
+    $[3] = t1;
   } else {
-    t1 = $[2];
+    t1 = $[3];
   }
   return t1;
 };

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

@@ -1 +1 @@
-{"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","collectionSlug","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, cellProps.collectionSlug)\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,EAAA,EAAsBT,SAAA,CAAAU,cAAwB;QAAA;QAAAC,IAAA,EAExD;QAAAP,QAAA,EAELC,IAAA,CAAAZ,QAAA,IAAC;MAAA,C;;;;;;;;SATLQ,E;CAaJ","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","WriteIcon","useCellProps","useTranslation","DefaultCell","DrawerLink","t0","$","onDrawerOpen","cellProps","t","t1","t2","rowData","id","collectionSlug","_jsxs","className","children","_jsx","link","onClick","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 { WriteIcon } from '../../../../icons/Write/index.js'\nimport { useCellProps } from '../../../../providers/TableColumns/RenderDefaultCell/index.js'\nimport { useTranslation } from '../../../../providers/Translation/index.js'\nimport { DefaultCell } from '../../../Table/DefaultCell/index.js'\nimport './index.css'\n\nexport const DrawerLink: React.FC<{\n  currentDrawerID?: string\n  onDrawerOpen: OnDrawerOpen\n}> = ({ onDrawerOpen }) => {\n  const cellProps = useCellProps()\n  const { t } = useTranslation()\n\n  return (\n    <div className=\"drawer-link\">\n      <DefaultCell {...cellProps} className=\"drawer-link__cell\" link={false} onClick={null} />\n      <button\n        aria-label={t('general:edit')}\n        className=\"drawer-link__doc-drawer-toggler\"\n        onClick={() => {\n          onDrawerOpen(cellProps.rowData.id, cellProps.collectionSlug)\n        }}\n        type=\"button\"\n      >\n        <WriteIcon />\n      </button>\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAEA,OAAOC,KAAA,MAAW;AAIlB,SAASC,SAAS,QAAQ;AAC1B,SAASC,YAAY,QAAQ;AAC7B,SAASC,cAAc,QAAQ;AAC/B,SAASC,WAAW,QAAQ;AAC5B,OAAO;AAEP,OAAO,MAAMC,UAAA,GAGRC,EAAA;EAAA,MAAAC,CAAA,GAAAR,EAAA;EAAC;IAAAS;EAAA,IAAAF,EAAgB;EACpB,MAAAG,SAAA,GAAkBP,YAAA;EAClB;IAAAQ;EAAA,IAAcP,cAAA;EAAA,IAAAQ,EAAA;EAAA,IAAAJ,CAAA,QAAAE,SAAA,IAAAF,CAAA,QAAAC,YAAA,IAAAD,CAAA,QAAAG,CAAA;IAAA,IAAAE,EAAA;IAAA,IAAAL,CAAA,QAAAE,SAAA,IAAAF,CAAA,QAAAC,YAAA;MAQCI,EAAA,GAAAA,CAAA;QACPJ,YAAA,CAAaC,SAAA,CAAAI,OAAA,CAAAC,EAAA,EAAsBL,SAAA,CAAAM,cAAwB;MAAA;MAC7DR,CAAA,MAAAE,SAAA;MAAAF,CAAA,MAAAC,YAAA;MAAAD,CAAA,MAAAK,EAAA;IAAA;MAAAA,EAAA,GAAAL,CAAA;IAAA;IAPJI,EAAA,GAAAK,KAAA,CAAC;MAAAC,SAAA,EAAc;MAAAC,QAAA,GACbC,IAAA,CAAAf,WAAA;QAAA,GAAiBK,SAAS;QAAAQ,SAAA,EAAY;QAAAG,IAAA;QAAAC,OAAA;MAAA,C,GACtCF,IAAA,CAAC;QAAA,cACaT,CAAA,CAAE;QAAAO,SAAA,EACJ;QAAAI,OAAA,EACDT,EAET;QAAAU,IAAA,EACK;QAAAJ,QAAA,EAELC,IAAA,CAAAlB,SAAA,IAAC;MAAA,C;;;;;;;;;SAVLU,E;CAcJ","ignoreList":[]}

package/dist/elements/RelationshipTable/index.css

@@ -0,0 +1,71 @@
+@layer payload-default {
+  .relationship-table {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer-2);
+  }
+
+  .relationship-table__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .relationship-table__actions {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-2);
+  }
+
+  .relationship-table__toggle-columns .btn__icon {
+    color: var(--color-icon-secondary);
+  }
+
+  .relationship-table__toggle-columns:hover .btn__icon {
+    color: var(--color-text);
+  }
+
+  .relationship-table__add-new-polymorphic-wrapper {
+    display: inline-flex;
+  }
+
+  .relationship-table__add-new-polymorphic .btn__label {
+    display: flex;
+    text-wrap: nowrap;
+    align-items: center;
+  }
+
+  .relationship-table .table {
+    margin-bottom: 0;
+    background: var(--color-bg);
+    overflow: auto;
+
+    table {
+      width: 100%;
+    }
+
+    &:not(.table--appearance-condensed) table {
+      [class^='cell'] > p,
+      [class^='cell'] > span,
+      [class^='cell'] > a {
+        line-clamp: 4;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 4;
+        overflow: hidden;
+        display: -webkit-box;
+        max-width: 100vw;
+      }
+    }
+
+    th,
+    td:first-child {
+      min-width: 0;
+    }
+  }
+
+  /* Error state - table border changes to danger color */
+  .field-type.error .relationship-table .table {
+    border-color: var(--color-border-danger-strong);
+  }
+}

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

@@ -1,11 +1,12 @@
 import { type CollectionSlug, type JoinFieldClient, type PaginatedDocs, type Where } from 'payload';
 import React from 'react';
 import type { DocumentDrawerProps } from '../DocumentDrawer/types.js';
-import './index.scss';
+import './index.css';
 type RelationshipTableComponentProps = {
     readonly AfterInput?: React.ReactNode;
     readonly allowCreate?: boolean;
     readonly BeforeInput?: React.ReactNode;
+    readonly Description?: React.ReactNode;
     readonly disableTable?: boolean;
     readonly field: JoinFieldClient;
     readonly fieldPath?: string;

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,KAA6D,MAAM,OAAO,CAAA;AAEjF,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAA;AAmBrE,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,EAAE,cAAc,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;AAEzE,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,+BAA+B,CAyWvE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/RelationshipTable/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,cAAc,EAGnB,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,aAAa,CAAA;AAIpB,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,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,EAAE,cAAc,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;AAEzE,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,+BAA+B,CAwZvE,CAAA"}

package/dist/elements/RelationshipTable/index.js

@@ -1,33 +1,33 @@
 'use client';
 
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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, useRef, useState } from 'react';
-import { Pill } from '../../elements/Pill/index.js';
 import { useEffectEvent } from '../../hooks/useEffectEvent.js';
-import { ChevronIcon } from '../../icons/Chevron/index.js';
 import { useAuth } from '../../providers/Auth/index.js';
 import { useConfig } from '../../providers/Config/index.js';
+import { useDocumentEvents } from '../../providers/DocumentEvents/index.js';
 import { ListQueryProvider } from '../../providers/ListQuery/index.js';
 import { useServerFunctions } from '../../providers/ServerFunctions/index.js';
 import { TableColumnsProvider } from '../../providers/TableColumns/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
-import { AnimateHeight } from '../AnimateHeight/index.js';
-import { ColumnSelector } from '../ColumnSelector/index.js';
 import { useDocumentDrawer } from '../DocumentDrawer/index.js';
+import { ListColumnSelectionButton } from '../ListColumnSelectionButton/index.js';
 import { NoListResults } from '../NoListResults/index.js';
 import { RelationshipProvider } from '../Table/RelationshipProvider/index.js';
+import { TableIdentityProvider } from '../Table/TableIdentity.js';
 import { AddNewButton } from './AddNewButton.js';
 import { DrawerLink } from './cells/DrawerLink/index.js';
 import { RelationshipTablePagination } from './Pagination.js';
-import './index.scss';
+import './index.css';
 const baseClass = 'relationship-table';
 export const RelationshipTable = props => {
   const {
     AfterInput,
     allowCreate = true,
     BeforeInput,
+    Description,
     disableTable = false,
     field,
     fieldPath,
@@ -48,7 +48,6 @@ export const RelationshipTable = props => {
     t
   } = useTranslation();
   const [query, setQuery] = useState();
-  const [openColumnSelector, setOpenColumnSelector] = useState(false);
   const [collectionConfig] = useState(() => getEntityConfig({
     collectionSlug: relationTo
   }));
@@ -181,12 +180,46 @@ export const RelationshipTable = props => {
       setCurrentDrawerID(undefined);
     }
   }, [isDrawerOpen]);
-  const canCreate = allowCreate !== false && permissions?.collections?.[isPolymorphic ? relationTo[0] : relationTo]?.create;
+  // Keep this table in sync with documents created, updated, or deleted elsewhere
+  // (a sibling join table, the relationship field, or an inline drawer edit).
+  const {
+    mostRecentUpdate
+  } = useDocumentEvents();
+  const lastHandledEventRef = useRef(null);
+  const handleDocumentEvent = useEffectEvent(event => {
+    if (disableTable || !event || event === lastHandledEventRef.current) {
+      return;
+    }
+    const relationSlugs = Array.isArray(relationTo) ? relationTo : [relationTo];
+    if (!relationSlugs.includes(event.entitySlug)) {
+      return;
+    }
+    lastHandledEventRef.current = event;
+    // Skip the refetch when the current data already reflects this event — e.g. this
+    // table's own drawer already applied it optimistically via onDrawerSave/onDrawerDelete,
+    // or a fresh mount already loaded data that includes it. Otherwise saving/deleting from
+    // this table's own drawer (which also emits a matching event) would render a second time.
+    const eventDocID = event.doc?.id ?? event.id;
+    const existingDoc = isPolymorphic ? data?.docs?.find(doc => doc.relationTo === event.entitySlug && doc.value?.id === eventDocID) : data?.docs?.find(doc => doc.id === eventDocID);
+    const existingUpdatedAt = isPolymorphic ? existingDoc?.value?.updatedAt : existingDoc?.updatedAt;
+    const isAlreadyReflected = event.operation === 'delete' ? !existingDoc : Boolean(existingDoc) && existingUpdatedAt === event.updatedAt;
+    if (isAlreadyReflected) {
+      return;
+    }
+    void renderTable();
+  });
   useEffect(() => {
+    handleDocumentEvent(mostRecentUpdate);
+  }, [mostRecentUpdate]);
+  const canCreate = allowCreate !== false && permissions?.collections?.[isPolymorphic ? relationTo[0] : relationTo]?.create;
+  const openSelectedCollectionDrawer = useEffectEvent(() => {
     if (isPolymorphic && selectedCollection) {
       openDrawer();
     }
-  }, [selectedCollection, openDrawer, isPolymorphic]);
+  });
+  useEffect(() => {
+    openSelectedCollectionDrawer();
+  }, [selectedCollection, isPolymorphic]);
   useEffect(() => {
     if (isPolymorphic && !isDrawerOpen && selectedCollection) {
       setSelectedCollection(undefined);
@@ -201,95 +234,91 @@ export const RelationshipTable = props => {
     limit: field.defaultLimit ?? collectionConfig?.admin?.pagination?.defaultLimit,
     sort: field.defaultSort ?? collectionConfig?.defaultSort
   }), [columnState, field, collectionConfig]);
-  return /*#__PURE__*/_jsxs("div", {
-    className: baseClass,
-    children: [/*#__PURE__*/_jsxs("div", {
-      className: `${baseClass}__header`,
-      children: [Label, /*#__PURE__*/_jsxs("div", {
-        className: `${baseClass}__actions`,
-        children: [/*#__PURE__*/_jsx(AddNewButton, {
-          allowCreate: allowCreate !== false,
-          baseClass: baseClass,
-          buttonStyle: "none",
-          className: `${baseClass}__add-new${isPolymorphic ? '-polymorphic' : ' doc-drawer__toggler'}`,
-          collections: config.collections,
-          i18n: i18n,
-          icon: isPolymorphic ? 'plus' : undefined,
-          label: i18n.t('fields:addNew'),
-          onClick: isPolymorphic ? setSelectedCollection : openDrawer,
-          permissions: permissions,
-          relationTo: relationTo
-        }), /*#__PURE__*/_jsx(Pill, {
-          "aria-controls": `${baseClass}-columns`,
-          "aria-expanded": openColumnSelector,
-          className: `${baseClass}__toggle-columns ${openColumnSelector ? `${baseClass}__buttons-active` : ''}`,
-          icon: /*#__PURE__*/_jsx(ChevronIcon, {
-            direction: openColumnSelector ? 'up' : 'down'
-          }),
-          onClick: () => setOpenColumnSelector(!openColumnSelector),
-          pillStyle: "light",
-          size: "small",
-          children: t('general:columns')
+  const addNewButton = /*#__PURE__*/_jsx(AddNewButton, {
+    allowCreate: allowCreate !== false,
+    baseClass: baseClass,
+    buttonStyle: "ghost",
+    className: `${baseClass}__add-new${isPolymorphic ? '-polymorphic' : ''}`,
+    collections: config.collections,
+    i18n: i18n,
+    label: i18n.t('fields:addNew'),
+    onClick: isPolymorphic ? setSelectedCollection : openDrawer,
+    permissions: permissions,
+    relationTo: relationTo
+  });
+  const columnsButton = /*#__PURE__*/_jsx(ListColumnSelectionButton, {
+    collectionSlug: collectionConfig?.slug
+  });
+  return /*#__PURE__*/_jsx(TableIdentityProvider, {
+    collectionSlug: isPolymorphic ? 'results' : relationTo,
+    children: /*#__PURE__*/_jsxs("div", {
+      className: baseClass,
+      children: [isLoadingTable ? /*#__PURE__*/_jsxs(Fragment, {
+        children: [/*#__PURE__*/_jsxs("div", {
+          className: `${baseClass}__header`,
+          children: [Label, /*#__PURE__*/_jsx("div", {
+            className: `${baseClass}__actions`,
+            children: addNewButton
+          }), Description]
+        }), BeforeInput, /*#__PURE__*/_jsx("p", {
+          children: t('general:loading')
         })]
-      })]
-    }), BeforeInput, isLoadingTable ? /*#__PURE__*/_jsx("p", {
-      children: t('general:loading')
-    }) : /*#__PURE__*/_jsxs(Fragment, {
-      children: [data?.docs && data.docs.length === 0 && /*#__PURE__*/_jsx(NoListResults, {
-        Actions: canCreate ? [/*#__PURE__*/_jsx(AddNewButton, {
-          allowCreate: canCreate,
-          baseClass: baseClass,
-          collections: config.collections,
-          i18n: i18n,
-          label: i18n.t('general:createNewLabel', {
-            label: isPolymorphic ? i18n.t('general:document') : getTranslation(collectionConfig?.labels?.singular, i18n)
-          }),
-          onClick: isPolymorphic ? setSelectedCollection : openDrawer,
-          permissions: permissions,
-          relationTo: relationTo
-        }, "create")] : [],
-        Message: /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsx("h3", {
-            children: i18n.t('general:noResultsFound')
-          }), /*#__PURE__*/_jsx("p", {
-            children: i18n.t('general:noResults', {
+      }) : /*#__PURE__*/_jsxs(Fragment, {
+        children: [data?.docs && data.docs.length === 0 && /*#__PURE__*/_jsxs(Fragment, {
+          children: [/*#__PURE__*/_jsxs("div", {
+            className: `${baseClass}__header`,
+            children: [Label, /*#__PURE__*/_jsx("div", {
+              className: `${baseClass}__actions`,
+              children: addNewButton
+            }), Description]
+          }), BeforeInput, /*#__PURE__*/_jsx(NoListResults, {
+            Actions: canCreate ? [/*#__PURE__*/_jsx(AddNewButton, {
+              allowCreate: canCreate,
+              baseClass: baseClass,
+              collections: config.collections,
+              i18n: i18n,
+              label: i18n.t('general:createNewLabel', {
+                label: isPolymorphic ? i18n.t('general:document') : getTranslation(collectionConfig?.labels?.singular, i18n)
+              }),
+              onClick: isPolymorphic ? setSelectedCollection : openDrawer,
+              permissions: permissions,
+              relationTo: relationTo
+            }, "create")] : [],
+            description: i18n.t('general:noResults', {
               label: isPolymorphic ? i18n.t('general:documents') : getTranslation(collectionConfig?.labels?.plural, i18n)
-            })
-          })]
-        })
-      }), data?.docs && data.docs.length > 0 && /*#__PURE__*/_jsx(RelationshipProvider, {
-        children: /*#__PURE__*/_jsx(ListQueryProvider, {
-          data: data,
-          modifySearchParams: false,
-          onQueryChange: setQuery,
-          orderableFieldName: !field.orderable || Array.isArray(field.collection) ? undefined : `_${field.collection}_${fieldPath.replaceAll('.', '_')}_order`,
-          query: memoizedListQuery,
-          children: /*#__PURE__*/_jsxs(TableColumnsProvider, {
-            collectionSlug: isPolymorphic ? relationTo[0] : relationTo,
-            columnState: columnState,
-            LinkedCellOverride: /*#__PURE__*/_jsx(DrawerLink, {
-              currentDrawerID: currentDrawerID,
-              onDrawerOpen: onDrawerOpen
             }),
-            children: [/*#__PURE__*/_jsx(AnimateHeight, {
-              className: `${baseClass}__columns`,
-              height: openColumnSelector ? 'auto' : 0,
-              id: `${baseClass}-columns`,
-              children: /*#__PURE__*/_jsx("div", {
-                className: `${baseClass}__columns-inner`,
-                children: collectionConfig && /*#__PURE__*/_jsx(ColumnSelector, {
-                  collectionSlug: collectionConfig.slug
-                })
-              })
-            }), Table, /*#__PURE__*/_jsx(RelationshipTablePagination, {})]
+            title: i18n.t('general:noResultsFound')
+          })]
+        }), data?.docs && data.docs.length > 0 && /*#__PURE__*/_jsx(RelationshipProvider, {
+          children: /*#__PURE__*/_jsx(ListQueryProvider, {
+            data: data,
+            modifySearchParams: false,
+            onQueryChange: setQuery,
+            orderableFieldName: !field.orderable || Array.isArray(field.collection) ? undefined : `_${field.collection}_${fieldPath.replaceAll('.', '_')}_order`,
+            query: memoizedListQuery,
+            children: /*#__PURE__*/_jsxs(TableColumnsProvider, {
+              collectionSlug: isPolymorphic ? relationTo[0] : relationTo,
+              columnState: columnState,
+              LinkedCellOverride: /*#__PURE__*/_jsx(DrawerLink, {
+                currentDrawerID: currentDrawerID,
+                onDrawerOpen: onDrawerOpen
+              }),
+              children: [/*#__PURE__*/_jsxs("div", {
+                className: `${baseClass}__header`,
+                children: [Label, /*#__PURE__*/_jsxs("div", {
+                  className: `${baseClass}__actions`,
+                  children: [addNewButton, columnsButton]
+                }), Description]
+              }), BeforeInput, Table, /*#__PURE__*/_jsx(RelationshipTablePagination, {})]
+            })
           })
-        })
+        })]
+      }), AfterInput, /*#__PURE__*/_jsx(DocumentDrawer, {
+        initialData: initialDrawerData,
+        onDelete: onDrawerDelete,
+        onSave: onDrawerSave
       })]
-    }), AfterInput, /*#__PURE__*/_jsx(DocumentDrawer, {
-      initialData: initialDrawerData,
-      onDelete: onDrawerDelete,
-      onSave: onDrawerSave
-    })]
+    })
   });
 };
 //# sourceMappingURL=index.js.map