@payloadcms/ui 4.0.0-internal.38b7f1d → 4.0.0-internal.5f0cd13

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

@@ -1 +1 @@
-{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../src/elements/RelationshipTable/Pagination.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,eAAO,MAAM,2BAA2B,EAAE,KAAK,CAAC,EAkB/C,CAAA"}
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../src/elements/RelationshipTable/Pagination.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,kBAAkB,CAAA;AAIzB,eAAO,MAAM,2BAA2B,EAAE,KAAK,CAAC,EAuC/C,CAAA"}

package/dist/elements/RelationshipTable/Pagination.js

@@ -1,54 +1,94 @@
 'use client';
 
 import { c as _c } from "react/compiler-runtime";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { useListQuery } from '../../providers/ListQuery/index.js';
-import { Pagination } from '../Pagination/index.js';
+import { useTranslation } from '../../providers/Translation/index.js';
+import './Pagination.css';
+const baseClass = 'relationship-table-pagination';
 export const RelationshipTablePagination = () => {
-  const $ = _c(11);
+  const $ = _c(18);
   const {
     data,
     handlePageChange
   } = useListQuery();
-  const t0 = data.nextPage || 2;
+  const {
+    t
+  } = useTranslation();
+  const {
+    hasNextPage,
+    hasPrevPage,
+    limit,
+    nextPage,
+    page,
+    prevPage,
+    totalDocs,
+    totalPages
+  } = data;
+  if (!totalPages || totalPages <= 1 || !totalDocs || !page || !limit) {
+    return null;
+  }
+  const currentRangeStart = (page - 1) * limit + 1;
+  const currentRangeEnd = Math.min(page * limit, totalDocs);
+  const t0 = !hasPrevPage;
   let t1;
-  if ($[0] !== handlePageChange) {
-    t1 = e => {
-      handlePageChange(e);
-    };
+  if ($[0] !== handlePageChange || $[1] !== prevPage) {
+    t1 = () => void handlePageChange(prevPage || 1);
     $[0] = handlePageChange;
-    $[1] = t1;
+    $[1] = prevPage;
+    $[2] = t1;
   } else {
-    t1 = $[1];
+    t1 = $[2];
   }
-  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, {
-      hasNextPage: data.hasNextPage,
-      hasPrevPage: data.hasPrevPage,
-      limit: data.limit,
-      nextPage: t0,
-      numberOfNeighbors: 1,
-      onChange: t1,
-      page: t2,
-      prevPage: t3,
-      totalPages: data.totalPages
+  let t2;
+  if ($[3] !== currentRangeEnd || $[4] !== currentRangeStart || $[5] !== handlePageChange || $[6] !== hasNextPage || $[7] !== nextPage || $[8] !== page || $[9] !== t || $[10] !== t0 || $[11] !== t1 || $[12] !== totalDocs) {
+    let t3;
+    if ($[14] !== handlePageChange || $[15] !== nextPage || $[16] !== page) {
+      t3 = () => void handlePageChange(nextPage || page + 1);
+      $[14] = handlePageChange;
+      $[15] = nextPage;
+      $[16] = page;
+      $[17] = t3;
+    } else {
+      t3 = $[17];
+    }
+    t2 = _jsxs("div", {
+      className: baseClass,
+      children: [_jsxs("div", {
+        className: `${baseClass}__nav`,
+        children: [_jsx("button", {
+          className: `${baseClass}__button`,
+          disabled: t0,
+          onClick: t1,
+          type: "button",
+          children: t("general:previous")
+        }), _jsx("button", {
+          className: `${baseClass}__button`,
+          disabled: !hasNextPage,
+          onClick: t3,
+          type: "button",
+          children: t("general:next")
+        })]
+      }), _jsxs("div", {
+        className: `${baseClass}__count`,
+        children: [currentRangeStart, " \u2013 ", currentRangeEnd, " ", t("general:of"), " ", totalDocs]
+      })]
     });
-    $[2] = data.hasNextPage;
-    $[3] = data.hasPrevPage;
-    $[4] = data.limit;
-    $[5] = data.totalPages;
-    $[6] = t0;
-    $[7] = t1;
-    $[8] = t2;
-    $[9] = t3;
-    $[10] = t4;
+    $[3] = currentRangeEnd;
+    $[4] = currentRangeStart;
+    $[5] = handlePageChange;
+    $[6] = hasNextPage;
+    $[7] = nextPage;
+    $[8] = page;
+    $[9] = t;
+    $[10] = t0;
+    $[11] = t1;
+    $[12] = totalDocs;
+    $[13] = t2;
   } else {
-    t4 = $[10];
+    t2 = $[13];
   }
-  return t4;
+  return t2;
 };
 //# 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","useTranslation","baseClass","RelationshipTablePagination","$","data","handlePageChange","t","hasNextPage","hasPrevPage","limit","nextPage","page","prevPage","totalDocs","totalPages","currentRangeStart","currentRangeEnd","Math","min","t0","t1","t2","t3","_jsxs","className","children","_jsx","disabled","onClick","type"],"sources":["../../../src/elements/RelationshipTable/Pagination.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nimport { useListQuery } from '../../providers/ListQuery/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './Pagination.css'\n\nconst baseClass = 'relationship-table-pagination'\n\nexport const RelationshipTablePagination: React.FC = () => {\n  const { data, handlePageChange } = useListQuery()\n  const { t } = useTranslation()\n\n  const { hasNextPage, hasPrevPage, limit, nextPage, page, prevPage, totalDocs, totalPages } = data\n\n  // Don't render pagination if there's only one page, no docs, or missing data\n  if (!totalPages || totalPages <= 1 || !totalDocs || !page || !limit) {\n    return null\n  }\n\n  const currentRangeStart = (page - 1) * limit + 1\n  const currentRangeEnd = Math.min(page * limit, totalDocs)\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__nav`}>\n        <button\n          className={`${baseClass}__button`}\n          disabled={!hasPrevPage}\n          onClick={() => void handlePageChange(prevPage || 1)}\n          type=\"button\"\n        >\n          {t('general:previous')}\n        </button>\n        <button\n          className={`${baseClass}__button`}\n          disabled={!hasNextPage}\n          onClick={() => void handlePageChange(nextPage || page + 1)}\n          type=\"button\"\n        >\n          {t('general:next')}\n        </button>\n      </div>\n      <div className={`${baseClass}__count`}>\n        {currentRangeStart} – {currentRangeEnd} {t('general:of')} {totalDocs}\n      </div>\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAEA,OAAOC,KAAA,MAAW;AAElB,SAASC,YAAY,QAAQ;AAC7B,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,2BAAA,GAAwCA,CAAA;EAAA,MAAAC,CAAA,GAAAN,EAAA;EACnD;IAAAO,IAAA;IAAAC;EAAA,IAAmCN,YAAA;EACnC;IAAAO;EAAA,IAAcN,cAAA;EAEd;IAAAO,WAAA;IAAAC,WAAA;IAAAC,KAAA;IAAAC,QAAA;IAAAC,IAAA;IAAAC,QAAA;IAAAC,SAAA;IAAAC;EAAA,IAA6FV,IAAA;EAAA,IAGzF,CAACU,UAAA,IAAcA,UAAA,KAAc,KAAMD,SAAA,KAAcF,IAAA,KAASF,KAAA;IAAA;EAAA;EAI9D,MAAAM,iBAAA,GAA0B,CAACJ,IAAA,IAAO,IAAKF,KAAA,IAAQ;EAC/C,MAAAO,eAAA,GAAwBC,IAAA,CAAAC,GAAA,CAASP,IAAA,GAAOF,KAAA,EAAOI,SAAA;EAO7B,MAAAM,EAAA,IAACX,WAAA;EAAA,IAAAY,EAAA;EAAA,IAAAjB,CAAA,QAAAE,gBAAA,IAAAF,CAAA,QAAAS,QAAA;IACFQ,EAAA,GAAAA,CAAA,UAAWf,gBAAA,CAAiBO,QAAA,KAAY;IAAAT,CAAA,MAAAE,gBAAA;IAAAF,CAAA,MAAAS,QAAA;IAAAT,CAAA,MAAAiB,EAAA;EAAA;IAAAA,EAAA,GAAAjB,CAAA;EAAA;EAAA,IAAAkB,EAAA;EAAA,IAAAlB,CAAA,QAAAa,eAAA,IAAAb,CAAA,QAAAY,iBAAA,IAAAZ,CAAA,QAAAE,gBAAA,IAAAF,CAAA,QAAAI,WAAA,IAAAJ,CAAA,QAAAO,QAAA,IAAAP,CAAA,QAAAQ,IAAA,IAAAR,CAAA,QAAAG,CAAA,IAAAH,CAAA,SAAAgB,EAAA,IAAAhB,CAAA,SAAAiB,EAAA,IAAAjB,CAAA,SAAAU,SAAA;IAAA,IAAAS,EAAA;IAAA,IAAAnB,CAAA,SAAAE,gBAAA,IAAAF,CAAA,SAAAO,QAAA,IAAAP,CAAA,SAAAQ,IAAA;MAQxCW,EAAA,GAAAA,CAAA,UAAWjB,gBAAA,CAAiBK,QAAA,IAAYC,IAAA,IAAO;MAAAR,CAAA,OAAAE,gBAAA;MAAAF,CAAA,OAAAO,QAAA;MAAAP,CAAA,OAAAQ,IAAA;MAAAR,CAAA,OAAAmB,EAAA;IAAA;MAAAA,EAAA,GAAAnB,CAAA;IAAA;IAb9DkB,EAAA,GAAAE,KAAA,CAAC;MAAAC,SAAA,EAAAvB,SAAA;MAAAwB,QAAA,GACCF,KAAA,CAAC;QAAAC,SAAA,EAAe,GAAAvB,SAAA,OAAmB;QAAAwB,QAAA,GACjCC,IAAA,CAAC;UAAAF,SAAA,EACY,GAAAvB,SAAA,UAAsB;UAAA0B,QAAA,EACvBR,EAAC;UAAAS,OAAA,EACFR,EAAwC;UAAAS,IAAA,EAC5C;UAAAJ,QAAA,EAEJnB,CAAA,CAAE;QAAA,C,GAELoB,IAAA,CAAC;UAAAF,SAAA,EACY,GAAAvB,SAAA,UAAsB;UAAA0B,QAAA,GACtBpB,WAAA;UAAAqB,OAAA,EACFN,EAA+C;UAAAO,IAAA,EACnD;UAAAJ,QAAA,EAEJnB,CAAA,CAAE;QAAA,C;UAGPiB,KAAA,CAAC;QAAAC,SAAA,EAAe,GAAAvB,SAAA,SAAqB;QAAAwB,QAAA,GAClCV,iBAAA,EAAkB,YAAIC,eAAA,EAAgB,KAAEV,CAAA,CAAE,eAAc,KAAEO,SAAA;MAAA,C;;;;;;;;;;;;;;;;SApB/DQ,E;CAwBJ","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,74 @@
+@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);
+    border: var(--stroke-width-small) solid var(--color-border);
+    border-radius: var(--radius-medium);
+    overflow: hidden;
+
+    table {
+      width: 100%;
+      overflow: auto;
+    }
+
+    &: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,7 +1,7 @@
 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;

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,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;AAgBrE,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,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,CA8VvE,CAAA"}

package/dist/elements/RelationshipTable/index.js

@@ -1,27 +1,24 @@
 '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 { 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 { ColumnsButton } from '../ColumnsButton/index.js';
 import { useDocumentDrawer } from '../DocumentDrawer/index.js';
 import { NoListResults } from '../NoListResults/index.js';
 import { RelationshipProvider } from '../Table/RelationshipProvider/index.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 {
@@ -48,7 +45,6 @@ export const RelationshipTable = props => {
     t
   } = useTranslation();
   const [query, setQuery] = useState();
-  const [openColumnSelector, setOpenColumnSelector] = useState(false);
   const [collectionConfig] = useState(() => getEntityConfig({
     collectionSlug: relationTo
   }));
@@ -201,62 +197,59 @@ export const RelationshipTable = props => {
     limit: field.defaultLimit ?? collectionConfig?.admin?.pagination?.defaultLimit,
     sort: field.defaultSort ?? collectionConfig?.defaultSort
   }), [columnState, field, collectionConfig]);
+  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(ColumnsButton, {
+    collectionSlug: collectionConfig?.slug
+  });
   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')
+    children: [isLoadingTable ? /*#__PURE__*/_jsxs(Fragment, {
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: `${baseClass}__header`,
+        children: [Label, /*#__PURE__*/_jsx("div", {
+          className: `${baseClass}__actions`,
+          children: addNewButton
         })]
+      }), 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', {
-              label: isPolymorphic ? i18n.t('general:documents') : getTranslation(collectionConfig?.labels?.plural, i18n)
-            })
+      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
           })]
-        })
+        }), 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)
+          }),
+          title: i18n.t('general:noResultsFound')
+        })]
       }), data?.docs && data.docs.length > 0 && /*#__PURE__*/_jsx(RelationshipProvider, {
         children: /*#__PURE__*/_jsx(ListQueryProvider, {
           data: data,
@@ -271,17 +264,13 @@ export const RelationshipTable = props => {
               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, {})]
+            children: [/*#__PURE__*/_jsxs("div", {
+              className: `${baseClass}__header`,
+              children: [Label, /*#__PURE__*/_jsxs("div", {
+                className: `${baseClass}__actions`,
+                children: [addNewButton, columnsButton]
+              })]
+            }), BeforeInput, Table, /*#__PURE__*/_jsx(RelationshipTablePagination, {})]
           })
         })
       })]