@payloadcms/ui 3.86.0-internal.ac46214 → 4.0.0-internal.1f9ae9a

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

@@ -1 +1 @@
-{"version":3,"file":"AddNewButton.js","names":["getTranslation","Button","Popup","PopupList","AddNewButton","allowCreate","baseClass","buttonStyle","className","collections","i18n","icon","label","onClick","permissions","relationTo","isPolymorphic","Array","isArray","_jsx","button","buttonType","horizontalAlign","render","close","closePopup","ButtonGroup","map","relatedCollection","create","find","each","slug","labels","singular","size"],"sources":["../../../src/elements/RelationshipTable/AddNewButton.tsx"],"sourcesContent":["'use client'\nimport type { I18nClient } from '@payloadcms/translations'\nimport type { ClientCollectionConfig, SanitizedPermissions } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\n\nimport type { Props as ButtonProps } from '../../elements/Button/types.js'\n\nimport { Button } from '../../elements/Button/index.js'\nimport { Popup, PopupList } from '../Popup/index.js'\n\nexport const AddNewButton = ({\n  allowCreate,\n  baseClass,\n  buttonStyle,\n  className,\n  collections,\n  i18n,\n  icon,\n  label,\n  onClick,\n  permissions,\n  relationTo,\n}: {\n  allowCreate: boolean\n  baseClass: string\n  buttonStyle?: ButtonProps['buttonStyle']\n  className?: string\n  collections: ClientCollectionConfig[]\n  i18n: I18nClient\n  icon?: ButtonProps['icon']\n  label: string\n  onClick: (selectedCollection?: string) => void\n  permissions: SanitizedPermissions\n  relationTo: string | string[]\n}) => {\n  if (!allowCreate) {\n    return null\n  }\n\n  const isPolymorphic = Array.isArray(relationTo)\n\n  if (!isPolymorphic) {\n    return (\n      <Button buttonStyle={buttonStyle} className={className} onClick={() => onClick()}>\n        {label}\n      </Button>\n    )\n  }\n\n  return (\n    <div className={`${baseClass}__add-new-polymorphic-wrapper`}>\n      <Popup\n        button={\n          <Button buttonStyle={buttonStyle} className={className} icon={icon}>\n            {label}\n          </Button>\n        }\n        buttonType=\"custom\"\n        horizontalAlign=\"center\"\n        render={({ close: closePopup }) => (\n          <PopupList.ButtonGroup>\n            {relationTo.map((relatedCollection) => {\n              if (permissions.collections[relatedCollection]?.create) {\n                return (\n                  <PopupList.Button\n                    className={`${baseClass}__relation-button--${relatedCollection}`}\n                    key={relatedCollection}\n                    onClick={() => {\n                      closePopup()\n                      onClick(relatedCollection)\n                    }}\n                  >\n                    {getTranslation(\n                      collections.find((each) => each.slug === relatedCollection).labels.singular,\n                      i18n,\n                    )}\n                  </PopupList.Button>\n                )\n              }\n\n              return null\n            })}\n          </PopupList.ButtonGroup>\n        )}\n        size=\"medium\"\n      />\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AAIA,SAASA,cAAc,QAAQ;AAI/B,SAASC,MAAM,QAAQ;AACvB,SAASC,KAAK,EAAEC,SAAS,QAAQ;AAEjC,OAAO,MAAMC,YAAA,GAAeA,CAAC;EAC3BC,WAAW;EACXC,SAAS;EACTC,WAAW;EACXC,SAAS;EACTC,WAAW;EACXC,IAAI;EACJC,IAAI;EACJC,KAAK;EACLC,OAAO;EACPC,WAAW;EACXC;AAAU,CAaX;EACC,IAAI,CAACV,WAAA,EAAa;IAChB,OAAO;EACT;EAEA,MAAMW,aAAA,GAAgBC,KAAA,CAAMC,OAAO,CAACH,UAAA;EAEpC,IAAI,CAACC,aAAA,EAAe;IAClB,oBACEG,IAAA,CAAClB,MAAA;MAAOM,WAAA,EAAaA,WAAA;MAAaC,SAAA,EAAWA,SAAA;MAAWK,OAAA,EAASA,CAAA,KAAMA,OAAA;gBACpED;;EAGP;EAEA,oBACEO,IAAA,CAAC;IAAIX,SAAA,EAAW,GAAGF,SAAA,+BAAwC;cACzD,aAAAa,IAAA,CAACjB,KAAA;MACCkB,MAAA,eACED,IAAA,CAAClB,MAAA;QAAOM,WAAA,EAAaA,WAAA;QAAaC,SAAA,EAAWA,SAAA;QAAWG,IAAA,EAAMA,IAAA;kBAC3DC;;MAGLS,UAAA,EAAW;MACXC,eAAA,EAAgB;MAChBC,MAAA,EAAQA,CAAC;QAAEC,KAAA,EAAOC;MAAU,CAAE,kBAC5BN,IAAA,CAAChB,SAAA,CAAUuB,WAAW;kBACnBX,UAAA,CAAWY,GAAG,CAAEC,iBAAA;UACf,IAAId,WAAA,CAAYL,WAAW,CAACmB,iBAAA,CAAkB,EAAEC,MAAA,EAAQ;YACtD,oBACEV,IAAA,CAAChB,SAAA,CAAUF,MAAM;cACfO,SAAA,EAAW,GAAGF,SAAA,sBAA+BsB,iBAAA,EAAmB;cAEhEf,OAAA,EAASA,CAAA;gBACPY,UAAA;gBACAZ,OAAA,CAAQe,iBAAA;cACV;wBAEC5B,cAAA,CACCS,WAAA,CAAYqB,IAAI,CAAEC,IAAA,IAASA,IAAA,CAAKC,IAAI,KAAKJ,iBAAA,EAAmBK,MAAM,CAACC,QAAQ,EAC3ExB,IAAA;eARGkB,iBAAA;UAYX;UAEA,OAAO;QACT;;MAGJO,IAAA,EAAK;;;AAIb","ignoreList":[]}
+{"version":3,"file":"AddNewButton.js","names":["getTranslation","Button","Popup","PopupList","AddNewButton","allowCreate","baseClass","buttonStyle","className","collections","i18n","icon","label","onClick","permissions","relationTo","isPolymorphic","Array","isArray","_jsx","filter","Boolean","join","button","buttonType","horizontalAlign","render","close","closePopup","ButtonGroup","map","relatedCollection","create","find","each","slug","labels","singular","size"],"sources":["../../../src/elements/RelationshipTable/AddNewButton.tsx"],"sourcesContent":["'use client'\nimport type { I18nClient } from '@payloadcms/translations'\nimport type { ClientCollectionConfig, SanitizedPermissions } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\n\nimport type { Props as ButtonProps } from '../../elements/Button/types.js'\n\nimport { Button } from '../../elements/Button/index.js'\nimport { Popup, PopupList } from '../Popup/index.js'\n\nexport const AddNewButton = ({\n  allowCreate,\n  baseClass,\n  buttonStyle,\n  className,\n  collections,\n  i18n,\n  icon,\n  label,\n  onClick,\n  permissions,\n  relationTo,\n}: {\n  allowCreate: boolean\n  baseClass: string\n  buttonStyle?: ButtonProps['buttonStyle']\n  className?: string\n  collections: ClientCollectionConfig[]\n  i18n: I18nClient\n  icon?: ButtonProps['icon']\n  label: string\n  onClick: (selectedCollection?: string) => void\n  permissions: SanitizedPermissions\n  relationTo: string | string[]\n}) => {\n  if (!allowCreate) {\n    return null\n  }\n\n  const isPolymorphic = Array.isArray(relationTo)\n\n  if (!isPolymorphic) {\n    return (\n      <Button\n        buttonStyle={buttonStyle}\n        className={[className, 'doc-drawer__toggler'].filter(Boolean).join(' ')}\n        onClick={() => onClick()}\n      >\n        {label}\n      </Button>\n    )\n  }\n\n  return (\n    <div className={`${baseClass}__add-new-polymorphic-wrapper`}>\n      <Popup\n        button={\n          <Button buttonStyle={buttonStyle} className={className} icon={icon}>\n            {label}\n          </Button>\n        }\n        buttonType=\"custom\"\n        horizontalAlign=\"center\"\n        render={({ close: closePopup }) => (\n          <PopupList.ButtonGroup>\n            {relationTo.map((relatedCollection) => {\n              if (permissions.collections[relatedCollection]?.create) {\n                return (\n                  <PopupList.Button\n                    className={`${baseClass}__relation-button--${relatedCollection}`}\n                    key={relatedCollection}\n                    onClick={() => {\n                      closePopup()\n                      onClick(relatedCollection)\n                    }}\n                  >\n                    {getTranslation(\n                      collections.find((each) => each.slug === relatedCollection).labels.singular,\n                      i18n,\n                    )}\n                  </PopupList.Button>\n                )\n              }\n\n              return null\n            })}\n          </PopupList.ButtonGroup>\n        )}\n        size=\"medium\"\n      />\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AAIA,SAASA,cAAc,QAAQ;AAI/B,SAASC,MAAM,QAAQ;AACvB,SAASC,KAAK,EAAEC,SAAS,QAAQ;AAEjC,OAAO,MAAMC,YAAA,GAAeA,CAAC;EAC3BC,WAAW;EACXC,SAAS;EACTC,WAAW;EACXC,SAAS;EACTC,WAAW;EACXC,IAAI;EACJC,IAAI;EACJC,KAAK;EACLC,OAAO;EACPC,WAAW;EACXC;AAAU,CAaX;EACC,IAAI,CAACV,WAAA,EAAa;IAChB,OAAO;EACT;EAEA,MAAMW,aAAA,GAAgBC,KAAA,CAAMC,OAAO,CAACH,UAAA;EAEpC,IAAI,CAACC,aAAA,EAAe;IAClB,oBACEG,IAAA,CAAClB,MAAA;MACCM,WAAA,EAAaA,WAAA;MACbC,SAAA,EAAW,CAACA,SAAA,EAAW,sBAAsB,CAACY,MAAM,CAACC,OAAA,EAASC,IAAI,CAAC;MACnET,OAAA,EAASA,CAAA,KAAMA,OAAA;gBAEdD;;EAGP;EAEA,oBACEO,IAAA,CAAC;IAAIX,SAAA,EAAW,GAAGF,SAAA,+BAAwC;cACzD,aAAAa,IAAA,CAACjB,KAAA;MACCqB,MAAA,eACEJ,IAAA,CAAClB,MAAA;QAAOM,WAAA,EAAaA,WAAA;QAAaC,SAAA,EAAWA,SAAA;QAAWG,IAAA,EAAMA,IAAA;kBAC3DC;;MAGLY,UAAA,EAAW;MACXC,eAAA,EAAgB;MAChBC,MAAA,EAAQA,CAAC;QAAEC,KAAA,EAAOC;MAAU,CAAE,kBAC5BT,IAAA,CAAChB,SAAA,CAAU0B,WAAW;kBACnBd,UAAA,CAAWe,GAAG,CAAEC,iBAAA;UACf,IAAIjB,WAAA,CAAYL,WAAW,CAACsB,iBAAA,CAAkB,EAAEC,MAAA,EAAQ;YACtD,oBACEb,IAAA,CAAChB,SAAA,CAAUF,MAAM;cACfO,SAAA,EAAW,GAAGF,SAAA,sBAA+ByB,iBAAA,EAAmB;cAEhElB,OAAA,EAASA,CAAA;gBACPe,UAAA;gBACAf,OAAA,CAAQkB,iBAAA;cACV;wBAEC/B,cAAA,CACCS,WAAA,CAAYwB,IAAI,CAAEC,IAAA,IAASA,IAAA,CAAKC,IAAI,KAAKJ,iBAAA,EAAmBK,MAAM,CAACC,QAAQ,EAC3E3B,IAAA;eARGqB,iBAAA;UAYX;UAEA,OAAO;QACT;;MAGJO,IAAA,EAAK;;;AAIb","ignoreList":[]}

package/dist/elements/RelationshipTable/Pagination.css

@@ -0,0 +1,39 @@
+@layer payload-default {
+  .relationship-table-pagination {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-family: var(--text-body-medium-font-family);
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-font-weight);
+    line-height: var(--text-body-medium-line-height);
+    color: var(--color-text-secondary);
+  }
+
+  .relationship-table-pagination__nav {
+    display: flex;
+    gap: var(--spacer-3);
+    align-items: center;
+  }
+
+  .relationship-table-pagination__button {
+    background: none;
+    border: none;
+    padding: 0;
+    font: inherit;
+    color: var(--color-text-secondary);
+    cursor: pointer;
+
+    &:hover:not(:disabled) {
+      color: var(--color-text);
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
+
+  .relationship-table-pagination__count {
+    white-space: nowrap;
+  }
+}

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

@@ -1,3 +1,4 @@
 import React from 'react';
+import './Pagination.css';
 export declare const RelationshipTablePagination: React.FC;
 //# sourceMappingURL=Pagination.d.ts.map

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"}