@payloadcms/ui 3.0.0-canary.fb81f02 → 3.0.0

package/dist/elements/Table/DefaultCell/fields/Date/index.js

@@ -1,20 +1,68 @@
 'use client';
+
+import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { useConfig } from '../../../../../providers/Config/index.js';
 import { useTranslation } from '../../../../../providers/Translation/index.js';
 import { formatDate } from '../../../../../utilities/formatDate.js';
-export const DateCell = ({ cellData, dateDisplayFormat })=>{
-    const { admin: { dateFormat: dateFormatFromConfig } } = useConfig();
-    const { i18n } = useTranslation();
-    const dateFormat = dateDisplayFormat || dateFormatFromConfig;
-    return /*#__PURE__*/ _jsx("span", {
-        children: cellData && formatDate({
-            date: cellData,
-            i18n,
-            pattern: dateFormat
-        })
+export const DateCell = t0 => {
+  const $ = _c(8);
+  const {
+    cellData,
+    field: t1
+  } = t0;
+  const {
+    admin: t2
+  } = t1;
+  let t3;
+  if ($[0] !== t2) {
+    t3 = t2 === undefined ? {} : t2;
+    $[0] = t2;
+    $[1] = t3;
+  } else {
+    t3 = $[1];
+  }
+  const {
+    date
+  } = t3;
+  const {
+    config: t4
+  } = useConfig();
+  const {
+    admin: t5
+  } = t4;
+  const {
+    dateFormat: dateFormatFromRoot
+  } = t5;
+  const dateFormat = date?.displayFormat || dateFormatFromRoot;
+  const {
+    i18n
+  } = useTranslation();
+  let t6;
+  if ($[2] !== cellData || $[3] !== i18n || $[4] !== dateFormat) {
+    t6 = cellData && formatDate({
+      date: cellData,
+      i18n,
+      pattern: dateFormat
+    });
+    $[2] = cellData;
+    $[3] = i18n;
+    $[4] = dateFormat;
+    $[5] = t6;
+  } else {
+    t6 = $[5];
+  }
+  let t7;
+  if ($[6] !== t6) {
+    t7 = _jsx("span", {
+      children: t6
     });
+    $[6] = t6;
+    $[7] = t7;
+  } else {
+    t7 = $[7];
+  }
+  return t7;
 };
-
 //# sourceMappingURL=index.js.map

package/dist/elements/Table/DefaultCell/fields/Date/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/elements/Table/DefaultCell/fields/Date/index.tsx"],"sourcesContent":["'use client'\nimport type { DefaultCellComponentProps } from 'payload'\n\nimport React from 'react'\n\nimport { useConfig } from '../../../../../providers/Config/index.js'\nimport { useTranslation } from '../../../../../providers/Translation/index.js'\nimport { formatDate } from '../../../../../utilities/formatDate.js'\n\nexport const DateCell: React.FC<DefaultCellComponentProps<Date | number | string>> = ({\n  cellData,\n  dateDisplayFormat,\n}) => {\n  const {\n    admin: { dateFormat: dateFormatFromConfig },\n  } = useConfig()\n\n  const { i18n } = useTranslation()\n\n  const dateFormat = dateDisplayFormat || dateFormatFromConfig\n\n  return <span>{cellData && formatDate({ date: cellData, i18n, pattern: dateFormat })}</span>\n}\n"],"names":["React","useConfig","useTranslation","formatDate","DateCell","cellData","dateDisplayFormat","admin","dateFormat","dateFormatFromConfig","i18n","span","date","pattern"],"mappings":"AAAA;;AAGA,OAAOA,WAAW,QAAO;AAEzB,SAASC,SAAS,QAAQ,2CAA0C;AACpE,SAASC,cAAc,QAAQ,gDAA+C;AAC9E,SAASC,UAAU,QAAQ,yCAAwC;AAEnE,OAAO,MAAMC,WAAwE,CAAC,EACpFC,QAAQ,EACRC,iBAAiB,EAClB;IACC,MAAM,EACJC,OAAO,EAAEC,YAAYC,oBAAoB,EAAE,EAC5C,GAAGR;IAEJ,MAAM,EAAES,IAAI,EAAE,GAAGR;IAEjB,MAAMM,aAAaF,qBAAqBG;IAExC,qBAAO,KAACE;kBAAMN,YAAYF,WAAW;YAAES,MAAMP;YAAUK;YAAMG,SAASL;QAAW;;AACnF,EAAC"}
+{"version":3,"file":"index.js","names":["c","_c","React","useConfig","useTranslation","formatDate","DateCell","t0","$","cellData","field","t1","admin","t2","t3","undefined","date","config","t4","t5","dateFormat","dateFormatFromRoot","displayFormat","i18n","t6","pattern","t7","_jsx","children"],"sources":["../../../../../../src/elements/Table/DefaultCell/fields/Date/index.tsx"],"sourcesContent":["'use client'\nimport type { DateFieldClient, DefaultCellComponentProps } from 'payload'\n\nimport React from 'react'\n\nimport { useConfig } from '../../../../../providers/Config/index.js'\nimport { useTranslation } from '../../../../../providers/Translation/index.js'\nimport { formatDate } from '../../../../../utilities/formatDate.js'\n\nexport const DateCell: React.FC<DefaultCellComponentProps<DateFieldClient>> = ({\n  cellData,\n  field: { admin: { date } = {} },\n}) => {\n  const {\n    config: {\n      admin: { dateFormat: dateFormatFromRoot },\n    },\n  } = useConfig()\n\n  const dateFormat = date?.displayFormat || dateFormatFromRoot\n\n  const { i18n } = useTranslation()\n\n  return <span>{cellData && formatDate({ date: cellData, i18n, pattern: dateFormat })}</span>\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,OAAOC,KAAA,MAAW;AAElB,SAASC,SAAS,QAAQ;AAC1B,SAASC,cAAc,QAAQ;AAC/B,SAASC,UAAU,QAAQ;AAE3B,OAAO,MAAMC,QAAA,GAAiEC,EAAA;EAAA,MAAAC,CAAA,GAAAP,EAAA;EAAC;IAAAQ,QAAA;IAAAC,KAAA,EAAAC;EAAA,IAAAJ,EAG9E;EADQ;IAAAK,KAAA,EAAAC;EAAA,IAAAF,EAAwB;EAAA,IAAAG,EAAA;EAAA,IAAAN,CAAA,QAAAK,EAAA;IAAfC,EAAA,GAAAD,EAAa,KAAAE,SAAA,QAAbF,EAAa;IAAAL,CAAA,MAAAK,EAAA;IAAAL,CAAA,MAAAM,EAAA;EAAA;IAAAA,EAAA,GAAAN,CAAA;EAAA;EAAb;IAAAQ;EAAA,IAAAF,EAAa;EAE7B;IAAAG,MAAA,EAAAC;EAAA,IAIIf,SAAA;EAHM;IAAAS,KAAA,EAAAO;EAAA,IAAAD,EAEP;EADQ;IAAAE,UAAA,EAAAC;EAAA,IAAAF,EAAkC;EAI7C,MAAAC,UAAA,GAAmBJ,IAAA,EAAAM,aAAA,IAAuBD,kBAAA;EAE1C;IAAAE;EAAA,IAAiBnB,cAAA;EAAA,IAAAoB,EAAA;EAAA,IAAAhB,CAAA,QAAAC,QAAA,IAAAD,CAAA,QAAAe,IAAA,IAAAf,CAAA,QAAAY,UAAA;IAEHI,EAAA,GAAAf,QAAA,IAAYJ,UAAA;MAAAW,IAAA,EAAmBP,QAAA;MAAAc,IAAA;MAAAE,OAAA,EAAyBL;IAAA,CAAW;IAAAZ,CAAA,MAAAC,QAAA;IAAAD,CAAA,MAAAe,IAAA;IAAAf,CAAA,MAAAY,UAAA;IAAAZ,CAAA,MAAAgB,EAAA;EAAA;IAAAA,EAAA,GAAAhB,CAAA;EAAA;EAAA,IAAAkB,EAAA;EAAA,IAAAlB,CAAA,QAAAgB,EAAA;IAA1EE,EAAA,GAAAC,IAAA,CAAC;MAAAC,QAAA,EAAMJ;IAAmE,C;;;;;;SAA1EE,E;CACT","ignoreList":[]}

package/dist/elements/Table/DefaultCell/fields/File/index.d.ts

@@ -1,7 +1,7 @@
-import type { DefaultCellComponentProps } from 'payload';
+import type { DefaultCellComponentProps, TextFieldClient, UploadFieldClient } from 'payload';
 import React from 'react';
 import './index.scss';
-export interface FileCellProps extends DefaultCellComponentProps<any> {
+export interface FileCellProps extends DefaultCellComponentProps<TextFieldClient | UploadFieldClient> {
 }
 export declare const FileCell: React.FC<FileCellProps>;
 //# sourceMappingURL=index.d.ts.map

package/dist/elements/Table/DefaultCell/fields/File/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/elements/Table/DefaultCell/fields/File/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAExD,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,cAAc,CAAA;AAIrB,MAAM,WAAW,aAAc,SAAQ,yBAAyB,CAAC,GAAG,CAAC;CAAG;AAExE,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAuB5C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/elements/Table/DefaultCell/fields/File/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,yBAAyB,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAE5F,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,cAAc,CAAA;AAIrB,MAAM,WAAW,aACf,SAAQ,yBAAyB,CAAC,eAAe,GAAG,iBAAiB,CAAC;CAAG;AAE3E,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAqB5C,CAAA"}

package/dist/elements/Table/DefaultCell/fields/File/index.js

@@ -1,31 +1,31 @@
 'use client';
+
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { Thumbnail } from '../../../../Thumbnail/index.js';
 import './index.scss';
 const baseClass = 'file';
-export const FileCell = ({ cellData: filename, customCellContext, rowData })=>{
-    const { collectionSlug, uploadConfig } = customCellContext;
-    return /*#__PURE__*/ _jsxs("div", {
-        className: baseClass,
-        children: [
-            /*#__PURE__*/ _jsx(Thumbnail, {
-                className: `${baseClass}__thumbnail`,
-                collectionSlug: collectionSlug,
-                doc: {
-                    ...rowData,
-                    filename
-                },
-                fileSrc: rowData?.thumbnailURL || rowData?.url,
-                size: "small",
-                uploadConfig: uploadConfig
-            }),
-            /*#__PURE__*/ _jsx("span", {
-                className: `${baseClass}__filename`,
-                children: String(filename)
-            })
-        ]
-    });
+export const FileCell = ({
+  cellData: filename,
+  collectionConfig,
+  rowData
+}) => {
+  return /*#__PURE__*/_jsxs("div", {
+    className: baseClass,
+    children: [/*#__PURE__*/_jsx(Thumbnail, {
+      className: `${baseClass}__thumbnail`,
+      collectionSlug: collectionConfig?.slug,
+      doc: {
+        ...rowData,
+        filename
+      },
+      fileSrc: rowData?.thumbnailURL || rowData?.url,
+      size: "small",
+      uploadConfig: collectionConfig?.upload
+    }), /*#__PURE__*/_jsx("span", {
+      className: `${baseClass}__filename`,
+      children: String(filename)
+    })]
+  });
 };
-
 //# sourceMappingURL=index.js.map

package/dist/elements/Table/DefaultCell/fields/File/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/elements/Table/DefaultCell/fields/File/index.tsx"],"sourcesContent":["'use client'\nimport type { DefaultCellComponentProps } from 'payload'\n\nimport React from 'react'\n\nimport { Thumbnail } from '../../../../Thumbnail/index.js'\nimport './index.scss'\n\nconst baseClass = 'file'\n\nexport interface FileCellProps extends DefaultCellComponentProps<any> {}\n\nexport const FileCell: React.FC<FileCellProps> = ({\n  cellData: filename,\n  customCellContext,\n  rowData,\n}) => {\n  const { collectionSlug, uploadConfig } = customCellContext\n\n  return (\n    <div className={baseClass}>\n      <Thumbnail\n        className={`${baseClass}__thumbnail`}\n        collectionSlug={collectionSlug}\n        doc={{\n          ...rowData,\n          filename,\n        }}\n        fileSrc={rowData?.thumbnailURL || rowData?.url}\n        size=\"small\"\n        uploadConfig={uploadConfig}\n      />\n      <span className={`${baseClass}__filename`}>{String(filename)}</span>\n    </div>\n  )\n}\n"],"names":["React","Thumbnail","baseClass","FileCell","cellData","filename","customCellContext","rowData","collectionSlug","uploadConfig","div","className","doc","fileSrc","thumbnailURL","url","size","span","String"],"mappings":"AAAA;;AAGA,OAAOA,WAAW,QAAO;AAEzB,SAASC,SAAS,QAAQ,iCAAgC;AAC1D,OAAO,eAAc;AAErB,MAAMC,YAAY;AAIlB,OAAO,MAAMC,WAAoC,CAAC,EAChDC,UAAUC,QAAQ,EAClBC,iBAAiB,EACjBC,OAAO,EACR;IACC,MAAM,EAAEC,cAAc,EAAEC,YAAY,EAAE,GAAGH;IAEzC,qBACE,MAACI;QAAIC,WAAWT;;0BACd,KAACD;gBACCU,WAAW,CAAC,EAAET,UAAU,WAAW,CAAC;gBACpCM,gBAAgBA;gBAChBI,KAAK;oBACH,GAAGL,OAAO;oBACVF;gBACF;gBACAQ,SAASN,SAASO,gBAAgBP,SAASQ;gBAC3CC,MAAK;gBACLP,cAAcA;;0BAEhB,KAACQ;gBAAKN,WAAW,CAAC,EAAET,UAAU,UAAU,CAAC;0BAAGgB,OAAOb;;;;AAGzD,EAAC"}
+{"version":3,"file":"index.js","names":["React","Thumbnail","baseClass","FileCell","cellData","filename","collectionConfig","rowData","_jsxs","className","_jsx","collectionSlug","slug","doc","fileSrc","thumbnailURL","url","size","uploadConfig","upload","String"],"sources":["../../../../../../src/elements/Table/DefaultCell/fields/File/index.tsx"],"sourcesContent":["'use client'\nimport type { DefaultCellComponentProps, TextFieldClient, UploadFieldClient } from 'payload'\n\nimport React from 'react'\n\nimport { Thumbnail } from '../../../../Thumbnail/index.js'\nimport './index.scss'\n\nconst baseClass = 'file'\n\nexport interface FileCellProps\n  extends DefaultCellComponentProps<TextFieldClient | UploadFieldClient> {}\n\nexport const FileCell: React.FC<FileCellProps> = ({\n  cellData: filename,\n  collectionConfig,\n  rowData,\n}) => {\n  return (\n    <div className={baseClass}>\n      <Thumbnail\n        className={`${baseClass}__thumbnail`}\n        collectionSlug={collectionConfig?.slug}\n        doc={{\n          ...rowData,\n          filename,\n        }}\n        fileSrc={rowData?.thumbnailURL || rowData?.url}\n        size=\"small\"\n        uploadConfig={collectionConfig?.upload}\n      />\n      <span className={`${baseClass}__filename`}>{String(filename)}</span>\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AAGA,OAAOA,KAAA,MAAW;AAElB,SAASC,SAAS,QAAQ;AAC1B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAKlB,OAAO,MAAMC,QAAA,GAAoCA,CAAC;EAChDC,QAAA,EAAUC,QAAQ;EAClBC,gBAAgB;EAChBC;AAAO,CACR;EACC,oBACEC,KAAA,CAAC;IAAIC,SAAA,EAAWP,SAAA;4BACdQ,IAAA,CAACT,SAAA;MACCQ,SAAA,EAAW,GAAGP,SAAA,aAAsB;MACpCS,cAAA,EAAgBL,gBAAA,EAAkBM,IAAA;MAClCC,GAAA,EAAK;QACH,GAAGN,OAAO;QACVF;MACF;MACAS,OAAA,EAASP,OAAA,EAASQ,YAAA,IAAgBR,OAAA,EAASS,GAAA;MAC3CC,IAAA,EAAK;MACLC,YAAA,EAAcZ,gBAAA,EAAkBa;qBAElCT,IAAA,CAAC;MAAKD,SAAA,EAAW,GAAGP,SAAA,YAAqB;gBAAGkB,MAAA,CAAOf,QAAA;;;AAGzD","ignoreList":[]}

package/dist/elements/Table/DefaultCell/fields/File/index.scss

@@ -1,23 +1,25 @@
 @import '../../../../../scss/styles.scss';
 
-.file {
-  display: flex;
-  flex-wrap: nowrap;
-  margin: base(-0.25) 0;
+@layer payload-default {
+  .file {
+    display: flex;
+    flex-wrap: nowrap;
 
-  &__thumbnail {
-    display: inline-block;
-    max-width: base(3);
-    height: base(3);
-  }
-
-  &__filename {
-    align-self: center;
-    [dir='ltr'] & {
-      margin-left: base(1);
+    &__thumbnail {
+      display: inline-block;
+      max-width: calc(var(--base) * 2);
+      height: calc(var(--base) * 2);
+      border-radius: var(--style-radius-s);
     }
-    [dir='rtl'] & {
-      margin-right: base(1);
+
+    &__filename {
+      align-self: center;
+      [dir='ltr'] & {
+        margin-left: var(--base);
+      }
+      [dir='rtl'] & {
+        margin-right: var(--base);
+      }
     }
   }
 }

package/dist/elements/Table/DefaultCell/fields/JSON/index.d.ts

@@ -1,5 +1,5 @@
-import type { DefaultCellComponentProps } from 'payload';
+import type { DefaultCellComponentProps, JSONFieldClient } from 'payload';
 import React from 'react';
 import './index.scss';
-export declare const JSONCell: React.FC<DefaultCellComponentProps<string>>;
+export declare const JSONCell: React.FC<DefaultCellComponentProps<JSONFieldClient>>;
 //# sourceMappingURL=index.d.ts.map

package/dist/elements/Table/DefaultCell/fields/JSON/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/elements/Table/DefaultCell/fields/JSON/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAExD,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,cAAc,CAAA;AAErB,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAAC,MAAM,CAAC,CAQhE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/elements/Table/DefaultCell/fields/JSON/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,yBAAyB,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAEzE,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,cAAc,CAAA;AAErB,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAAC,eAAe,CAAC,CAQzE,CAAA"}

package/dist/elements/Table/DefaultCell/fields/JSON/index.js

@@ -1,15 +1,17 @@
 'use client';
+
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import './index.scss';
-export const JSONCell = ({ cellData })=>{
-    const textToShow = cellData?.length > 100 ? `${cellData.substring(0, 100)}\u2026` : cellData;
-    return /*#__PURE__*/ _jsx("code", {
-        className: "json-cell",
-        children: /*#__PURE__*/ _jsx("span", {
-            children: JSON.stringify(textToShow)
-        })
-    });
+export const JSONCell = ({
+  cellData
+}) => {
+  const textToShow = cellData?.length > 100 ? `${cellData.substring(0, 100)}\u2026` : cellData;
+  return /*#__PURE__*/_jsx("code", {
+    className: "json-cell",
+    children: /*#__PURE__*/_jsx("span", {
+      children: JSON.stringify(textToShow)
+    })
+  });
 };
-
 //# sourceMappingURL=index.js.map

package/dist/elements/Table/DefaultCell/fields/JSON/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/elements/Table/DefaultCell/fields/JSON/index.tsx"],"sourcesContent":["'use client'\nimport type { DefaultCellComponentProps } from 'payload'\n\nimport React from 'react'\n\nimport './index.scss'\n\nexport const JSONCell: React.FC<DefaultCellComponentProps<string>> = ({ cellData }) => {\n  const textToShow = cellData?.length > 100 ? `${cellData.substring(0, 100)}\\u2026` : cellData\n\n  return (\n    <code className=\"json-cell\">\n      <span>{JSON.stringify(textToShow)}</span>\n    </code>\n  )\n}\n"],"names":["React","JSONCell","cellData","textToShow","length","substring","code","className","span","JSON","stringify"],"mappings":"AAAA;;AAGA,OAAOA,WAAW,QAAO;AAEzB,OAAO,eAAc;AAErB,OAAO,MAAMC,WAAwD,CAAC,EAAEC,QAAQ,EAAE;IAChF,MAAMC,aAAaD,UAAUE,SAAS,MAAM,CAAC,EAAEF,SAASG,SAAS,CAAC,GAAG,KAAK,MAAM,CAAC,GAAGH;IAEpF,qBACE,KAACI;QAAKC,WAAU;kBACd,cAAA,KAACC;sBAAMC,KAAKC,SAAS,CAACP;;;AAG5B,EAAC"}
+{"version":3,"file":"index.js","names":["React","JSONCell","cellData","textToShow","length","substring","_jsx","className","JSON","stringify"],"sources":["../../../../../../src/elements/Table/DefaultCell/fields/JSON/index.tsx"],"sourcesContent":["'use client'\nimport type { DefaultCellComponentProps, JSONFieldClient } from 'payload'\n\nimport React from 'react'\n\nimport './index.scss'\n\nexport const JSONCell: React.FC<DefaultCellComponentProps<JSONFieldClient>> = ({ cellData }) => {\n  const textToShow = cellData?.length > 100 ? `${cellData.substring(0, 100)}\\u2026` : cellData\n\n  return (\n    <code className=\"json-cell\">\n      <span>{JSON.stringify(textToShow)}</span>\n    </code>\n  )\n}\n"],"mappings":"AAAA;;;AAGA,OAAOA,KAAA,MAAW;AAElB,OAAO;AAEP,OAAO,MAAMC,QAAA,GAAiEA,CAAC;EAAEC;AAAQ,CAAE;EACzF,MAAMC,UAAA,GAAaD,QAAA,EAAUE,MAAA,GAAS,MAAM,GAAGF,QAAA,CAASG,SAAS,CAAC,GAAG,YAAY,GAAGH,QAAA;EAEpF,oBACEI,IAAA,CAAC;IAAKC,SAAA,EAAU;cACd,aAAAD,IAAA,CAAC;gBAAME,IAAA,CAAKC,SAAS,CAACN,UAAA;;;AAG5B","ignoreList":[]}

package/dist/elements/Table/DefaultCell/fields/JSON/index.scss

@@ -1,22 +1,24 @@
 @import '../../../../../scss/styles.scss';
 
-.json-cell {
-  font-size: 1rem;
-  line-height: base(1);
-  border: 0;
-  display: inline-flex;
-  vertical-align: middle;
-  background: var(--theme-elevation-150);
-  color: var(--theme-elevation-800);
-  border-radius: $style-radius-m;
-  padding: 0 base(0.25);
-  [dir='ltr'] & {
-    padding-left: base(0.0875 + 0.25);
-  }
-  [dir='rtl'] & {
-    padding-right: base(0.0875 + 0.25);
-  }
+@layer payload-default {
+  .json-cell {
+    font-size: 1rem;
+    line-height: base(1);
+    border: 0;
+    display: inline-flex;
+    vertical-align: middle;
+    background: var(--theme-elevation-150);
+    color: var(--theme-elevation-800);
+    border-radius: $style-radius-m;
+    padding: 0 base(0.25);
+    [dir='ltr'] & {
+      padding-left: base(0.0875 + 0.25);
+    }
+    [dir='rtl'] & {
+      padding-right: base(0.0875 + 0.25);
+    }
 
-  background: var(--theme-elevation-100);
-  color: var(--theme-elevation-800);
+    background: var(--theme-elevation-100);
+    color: var(--theme-elevation-800);
+  }
 }

package/dist/elements/Table/DefaultCell/fields/Relationship/index.d.ts

@@ -1,9 +1,6 @@
-import type { CellComponentProps, DefaultCellComponentProps } from 'payload';
+import type { DefaultCellComponentProps, JoinFieldClient, RelationshipFieldClient, UploadFieldClient } from 'payload';
 import React from 'react';
 import './index.scss';
-export interface RelationshipCellProps extends DefaultCellComponentProps<any> {
-    label: CellComponentProps['label'];
-    relationTo: CellComponentProps['relationTo'];
-}
+export type RelationshipCellProps = DefaultCellComponentProps<JoinFieldClient | RelationshipFieldClient | UploadFieldClient>;
 export declare const RelationshipCell: React.FC<RelationshipCellProps>;
 //# sourceMappingURL=index.d.ts.map

package/dist/elements/Table/DefaultCell/fields/Relationship/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/elements/Table/DefaultCell/fields/Relationship/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAG5E,OAAO,KAA8B,MAAM,OAAO,CAAA;AASlD,OAAO,cAAc,CAAA;AAMrB,MAAM,WAAW,qBAAsB,SAAQ,yBAAyB,CAAC,GAAG,CAAC;IAC3E,KAAK,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAA;IAClC,UAAU,EAAE,kBAAkB,CAAC,YAAY,CAAC,CAAA;CAC7C;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAyG5D,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/elements/Table/DefaultCell/fields/Relationship/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAEV,yBAAyB,EACzB,eAAe,EACf,uBAAuB,EACvB,iBAAiB,EAClB,MAAM,SAAS,CAAA;AAGhB,OAAO,KAAuC,MAAM,OAAO,CAAA;AAS3D,OAAO,cAAc,CAAA;AAMrB,MAAM,MAAM,qBAAqB,GAAG,yBAAyB,CAC3D,eAAe,GAAG,uBAAuB,GAAG,iBAAiB,CAC9D,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAoH5D,CAAA"}

package/dist/elements/Table/DefaultCell/fields/Relationship/index.js

@@ -1,7 +1,9 @@
 'use client';
+
+import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getTranslation } from '@payloadcms/translations';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { useIntersect } from '../../../../../hooks/useIntersect.js';
 import { useConfig } from '../../../../../providers/Config/index.js';
 import { useTranslation } from '../../../../../providers/Translation/index.js';
@@ -12,99 +14,190 @@ import { FileCell } from '../File/index.js';
 import './index.scss';
 const baseClass = 'relationship-cell';
 const totalToShow = 3;
-export const RelationshipCell = ({ cellData, fieldType, label, relationTo, ...props })=>{
-    const config = useConfig();
-    const { collections, routes } = config;
-    const [intersectionRef, entry] = useIntersect();
-    const [values, setValues] = useState([]);
-    const { documents, getRelationships } = useListRelationships();
-    const [hasRequested, setHasRequested] = useState(false);
-    const { i18n, t } = useTranslation();
-    const isAboveViewport = canUseDOM ? entry?.boundingClientRect?.top < window.innerHeight : false;
-    useEffect(()=>{
-        if ((cellData || typeof cellData === 'number') && isAboveViewport && !hasRequested) {
-            const formattedValues = [];
-            const arrayCellData = Array.isArray(cellData) ? cellData : [
-                cellData
-            ];
-            arrayCellData.slice(0, arrayCellData.length < totalToShow ? arrayCellData.length : totalToShow).forEach((cell)=>{
-                if (typeof cell === 'object' && 'relationTo' in cell && 'value' in cell) {
-                    formattedValues.push(cell);
-                }
-                if ((typeof cell === 'number' || typeof cell === 'string') && typeof relationTo === 'string') {
-                    formattedValues.push({
-                        relationTo,
-                        value: cell
-                    });
-                }
+export const RelationshipCell = t0 => {
+  const $ = _c(40);
+  const {
+    cellData: cellDataFromProps,
+    customCellProps: customCellContext,
+    field,
+    field: t1
+  } = t0;
+  const {
+    label
+  } = t1;
+  const relationTo = "relationTo" in field && field.relationTo || "collection" in field && field.collection;
+  let t2;
+  t2 = "collection" in field ? cellDataFromProps?.docs : cellDataFromProps;
+  const cellData = t2;
+  const {
+    config,
+    getEntityConfig
+  } = useConfig();
+  const {
+    collections,
+    routes
+  } = config;
+  const [intersectionRef, entry] = useIntersect();
+  let t3;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = [];
+    $[0] = t3;
+  } else {
+    t3 = $[0];
+  }
+  const [values, setValues] = useState(t3);
+  const {
+    documents,
+    getRelationships
+  } = useListRelationships();
+  const [hasRequested, setHasRequested] = useState(false);
+  const {
+    i18n,
+    t
+  } = useTranslation();
+  const isAboveViewport = canUseDOM ? entry?.boundingClientRect?.top < window.innerHeight : false;
+  let t4;
+  if ($[1] !== cellData || $[2] !== isAboveViewport || $[3] !== hasRequested || $[4] !== relationTo || $[5] !== getRelationships) {
+    t4 = () => {
+      if ((cellData || typeof cellData === "number") && isAboveViewport && !hasRequested) {
+        const formattedValues = [];
+        const arrayCellData = Array.isArray(cellData) ? cellData : [cellData];
+        arrayCellData.slice(0, arrayCellData.length < totalToShow ? arrayCellData.length : totalToShow).forEach(cell => {
+          if (typeof cell === "object" && "relationTo" in cell && "value" in cell) {
+            formattedValues.push(cell);
+          }
+          if ((typeof cell === "number" || typeof cell === "string") && typeof relationTo === "string") {
+            formattedValues.push({
+              relationTo,
+              value: cell
             });
-            getRelationships(formattedValues);
-            setHasRequested(true);
-            setValues(formattedValues);
-        }
-    }, [
-        cellData,
-        relationTo,
-        collections,
-        isAboveViewport,
-        routes.api,
-        hasRequested,
-        getRelationships
-    ]);
-    useEffect(()=>{
-        if (hasRequested) {
-            setHasRequested(false);
+          }
+        });
+        getRelationships(formattedValues);
+        setHasRequested(true);
+        setValues(formattedValues);
+      }
+    };
+    $[1] = cellData;
+    $[2] = isAboveViewport;
+    $[3] = hasRequested;
+    $[4] = relationTo;
+    $[5] = getRelationships;
+    $[6] = t4;
+  } else {
+    t4 = $[6];
+  }
+  let t5;
+  if ($[7] !== cellData || $[8] !== relationTo || $[9] !== collections || $[10] !== isAboveViewport || $[11] !== routes.api || $[12] !== hasRequested || $[13] !== getRelationships) {
+    t5 = [cellData, relationTo, collections, isAboveViewport, routes.api, hasRequested, getRelationships];
+    $[7] = cellData;
+    $[8] = relationTo;
+    $[9] = collections;
+    $[10] = isAboveViewport;
+    $[11] = routes.api;
+    $[12] = hasRequested;
+    $[13] = getRelationships;
+    $[14] = t5;
+  } else {
+    t5 = $[14];
+  }
+  useEffect(t4, t5);
+  let t6;
+  if ($[15] !== hasRequested) {
+    t6 = () => {
+      if (hasRequested) {
+        setHasRequested(false);
+      }
+    };
+    $[15] = hasRequested;
+    $[16] = t6;
+  } else {
+    t6 = $[16];
+  }
+  let t7;
+  if ($[17] !== cellData) {
+    t7 = [cellData];
+    $[17] = cellData;
+    $[18] = t7;
+  } else {
+    t7 = $[18];
+  }
+  useEffect(t6, t7);
+  let t8;
+  if ($[19] !== documents || $[20] !== getEntityConfig || $[21] !== config.admin.dateFormat || $[22] !== t || $[23] !== i18n || $[24] !== field || $[25] !== customCellContext || $[26] !== values || $[27] !== cellData || $[28] !== label || $[29] !== intersectionRef) {
+    let t9;
+    if ($[31] !== documents || $[32] !== getEntityConfig || $[33] !== config.admin.dateFormat || $[34] !== t || $[35] !== i18n || $[36] !== field || $[37] !== customCellContext || $[38] !== values.length) {
+      t9 = (t10, i) => {
+        const {
+          relationTo: relationTo_0,
+          value
+        } = t10;
+        const document = documents[relationTo_0][value];
+        const relatedCollection = getEntityConfig({
+          collectionSlug: relationTo_0
+        });
+        const label_0 = formatDocTitle({
+          collectionConfig: relatedCollection,
+          data: document || null,
+          dateFormat: config.admin.dateFormat,
+          fallback: `${t("general:untitled")} - ID: ${value}`,
+          i18n
+        });
+        let fileField = null;
+        if (field.type === "upload") {
+          const relatedCollectionPreview = !!relatedCollection.upload.displayPreview;
+          const previewAllowed = field.displayPreview || relatedCollectionPreview && field.displayPreview !== false;
+          if (previewAllowed && document) {
+            fileField = _jsx(FileCell, {
+              cellData: label_0,
+              collectionConfig: relatedCollection,
+              customCellProps: customCellContext,
+              field,
+              rowData: document
+            });
+          }
         }
-    }, [
-        cellData
-    ]);
-    return /*#__PURE__*/ _jsxs("div", {
-        className: baseClass,
-        ref: intersectionRef,
-        children: [
-            values.map(({ relationTo, value }, i)=>{
-                const document = documents[relationTo][value];
-                const relatedCollection = collections.find(({ slug })=>slug === relationTo);
-                const label = formatDocTitle({
-                    collectionConfig: relatedCollection,
-                    data: document || null,
-                    dateFormat: config.admin.dateFormat,
-                    fallback: `${t('general:untitled')} - ID: ${value}`,
-                    i18n
-                });
-                let fileField = null;
-                if (fieldType === 'upload') {
-                    const { name, customCellContext, displayPreview, schemaPath } = props;
-                    const relatedCollectionPreview = !!relatedCollection.upload.displayPreview;
-                    const previewAllowed = displayPreview || relatedCollectionPreview && displayPreview !== false;
-                    if (previewAllowed && document) {
-                        fileField = /*#__PURE__*/ _jsx(FileCell, {
-                            cellData: label,
-                            customCellContext: customCellContext,
-                            name: name,
-                            rowData: document,
-                            schemaPath: schemaPath
-                        });
-                    }
-                }
-                return /*#__PURE__*/ _jsxs(React.Fragment, {
-                    children: [
-                        document === false && `${t('general:untitled')} - ID: ${value}`,
-                        document === null && `${t('general:loading')}...`,
-                        document ? fileField || label : null,
-                        values.length > i + 1 && ', '
-                    ]
-                }, i);
-            }),
-            Array.isArray(cellData) && cellData.length > totalToShow && t('fields:itemsAndMore', {
-                count: cellData.length - totalToShow,
-                items: ''
-            }),
-            values.length === 0 && t('general:noLabel', {
-                label: getTranslation(label || '', i18n)
-            })
-        ]
+        return _jsxs(React.Fragment, {
+          children: [document === false && `${t("general:untitled")} - ID: ${value}`, document === null && `${t("general:loading")}...`, document ? fileField || label_0 : null, values.length > i + 1 && ", "]
+        }, i);
+      };
+      $[31] = documents;
+      $[32] = getEntityConfig;
+      $[33] = config.admin.dateFormat;
+      $[34] = t;
+      $[35] = i18n;
+      $[36] = field;
+      $[37] = customCellContext;
+      $[38] = values.length;
+      $[39] = t9;
+    } else {
+      t9 = $[39];
+    }
+    t8 = _jsxs("div", {
+      className: baseClass,
+      ref: intersectionRef,
+      children: [values.map(t9), Array.isArray(cellData) && cellData.length > totalToShow && t("fields:itemsAndMore", {
+        count: cellData.length - totalToShow,
+        items: ""
+      }), values.length === 0 && t("general:noLabel", {
+        label: getTranslation(label || "", i18n)
+      })]
     });
+    $[19] = documents;
+    $[20] = getEntityConfig;
+    $[21] = config.admin.dateFormat;
+    $[22] = t;
+    $[23] = i18n;
+    $[24] = field;
+    $[25] = customCellContext;
+    $[26] = values;
+    $[27] = cellData;
+    $[28] = label;
+    $[29] = intersectionRef;
+    $[30] = t8;
+  } else {
+    t8 = $[30];
+  }
+  return t8;
 };
-
 //# sourceMappingURL=index.js.map