@payloadcms/ui 3.0.0-canary.23fcb9e → 3.0.0-canary.291e44c

package/dist/elements/StepNav/index.scss

@@ -1,80 +1,81 @@
 @import '../../scss/styles.scss';
+@layer payload-default {
+  .step-nav {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--base) / 2);
 
-.step-nav {
-  display: flex;
-  align-items: center;
-  gap: calc(var(--base) / 2);
-
-  &::after {
-    content: ' ';
-    position: sticky;
-    top: 0;
-    right: 0;
-    width: var(--base);
-    background: linear-gradient(to right, transparent, var(--theme-bg));
-  }
+    &::after {
+      content: ' ';
+      position: sticky;
+      top: 0;
+      right: 0;
+      width: var(--base);
+      background: linear-gradient(to right, transparent, var(--theme-bg));
+    }
 
-  // Use a pseudo element for the accessability so that it doesn't take up DOM space
-  // Also because the parent element has `overflow: hidden` which would clip an outline
-  &__home {
-    width: 18px;
-    height: 18px;
-    position: relative;
+    // Use a pseudo element for the accessability so that it doesn't take up DOM space
+    // Also because the parent element has `overflow: hidden` which would clip an outline
+    &__home {
+      width: 18px;
+      height: 18px;
+      position: relative;
 
-    &:focus-visible {
-      outline: none;
+      &:focus-visible {
+        outline: none;
 
-      &::after {
-        content: '';
-        border: var(--accessibility-outline);
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        pointer-events: none;
+        &::after {
+          content: '';
+          border: var(--accessibility-outline);
+          position: absolute;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          left: 0;
+          pointer-events: none;
+        }
       }
     }
-  }
 
-  * {
-    display: block;
-  }
+    * {
+      display: block;
+    }
 
-  a {
-    border: 0;
-    display: flex;
-    align-items: center;
-    font-weight: 600;
-    text-decoration: none;
+    a {
+      border: 0;
+      display: flex;
+      align-items: center;
+      font-weight: 600;
+      text-decoration: none;
 
-    label {
-      cursor: pointer;
-    }
+      label {
+        cursor: pointer;
+      }
 
-    &:hover,
-    &:focus-visible {
-      text-decoration: underline;
+      &:hover,
+      &:focus-visible {
+        text-decoration: underline;
+      }
     }
-  }
 
-  span {
-    max-width: base(8);
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-  }
+    span {
+      max-width: base(8);
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    }
 
-  @include mid-break {
-    .step-nav {
-      &__home {
-        width: 16px;
-        height: 16px;
+    @include mid-break {
+      .step-nav {
+        &__home {
+          width: 16px;
+          height: 16px;
+        }
       }
     }
-  }
 
-  @include small-break {
-    gap: base(0.4);
+    @include small-break {
+      gap: base(0.4);
+    }
   }
 }

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

@@ -1,6 +1,6 @@
-import type { BlockFieldClient, DefaultCellComponentProps } from 'payload';
+import type { BlocksFieldClient, DefaultCellComponentProps } from 'payload';
 import React from 'react';
-export interface BlocksCellProps extends DefaultCellComponentProps<any, BlockFieldClient> {
+export interface BlocksCellProps extends DefaultCellComponentProps<any, BlocksFieldClient> {
 }
 export declare const BlocksCell: React.FC<BlocksCellProps>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/elements/Table/DefaultCell/fields/Blocks/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAG1E,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,WAAW,eAAgB,SAAQ,yBAAyB,CAAC,GAAG,EAAE,gBAAgB,CAAC;CAAG;AAE5F,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAoChD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/elements/Table/DefaultCell/fields/Blocks/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAG3E,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,WAAW,eAAgB,SAAQ,yBAAyB,CAAC,GAAG,EAAE,iBAAiB,CAAC;CAAG;AAE7F,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAoChD,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","getTranslation","React","useTranslation","BlocksCell","t0","$","cellData","field","t1","blocks","labels","i18n","selectedBlocks","Array","isArray","map","_temp","translatedBlockLabels","b","slug","label","singular","plural","formatBlockList","blocks_0","b_0","filtered","filter","f","join","length","more","t","count","items","slice","t2","_jsx","children","blockType"],"sources":["../../../../../../src/elements/Table/DefaultCell/fields/Blocks/index.tsx"],"sourcesContent":["'use client'\nimport type { BlockFieldClient, DefaultCellComponentProps } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport { useTranslation } from '../../../../../providers/Translation/index.js'\n\nexport interface BlocksCellProps extends DefaultCellComponentProps<any, BlockFieldClient> {}\n\nexport const BlocksCell: React.FC<BlocksCellProps> = ({ cellData, field: { blocks, labels } }) => {\n  const { i18n } = useTranslation()\n\n  const selectedBlocks = Array.isArray(cellData) ? cellData.map(({ blockType }) => blockType) : []\n\n  const translatedBlockLabels = blocks?.map((b) => ({\n    slug: b.slug,\n    label: getTranslation(b.labels.singular, i18n),\n  }))\n\n  let label = `0 ${getTranslation(labels?.plural, i18n)}`\n\n  const formatBlockList = (blocks) =>\n    blocks\n      .map((b) => {\n        const filtered = translatedBlockLabels.filter((f) => f.slug === b)?.[0]\n        return filtered?.label\n      })\n      .join(', ')\n\n  const itemsToShow = 5\n\n  if (selectedBlocks.length > itemsToShow) {\n    const more = selectedBlocks.length - itemsToShow\n    label = `${selectedBlocks.length} ${getTranslation(labels?.plural, i18n)} - ${i18n.t(\n      'fields:itemsAndMore',\n      { count: more, items: formatBlockList(selectedBlocks.slice(0, itemsToShow)) },\n    )}`\n  } else if (selectedBlocks.length > 0) {\n    label = `${selectedBlocks.length} ${getTranslation(\n      selectedBlocks.length === 1 ? labels?.singular : labels?.plural,\n      i18n,\n    )} - ${formatBlockList(selectedBlocks)}`\n  }\n\n  return <span>{label}</span>\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,SAASC,cAAc,QAAQ;AAC/B,OAAOC,KAAA,MAAW;AAElB,SAASC,cAAc,QAAQ;AAI/B,OAAO,MAAMC,UAAA,GAAwCC,EAAA;EAAA,MAAAC,CAAA,GAAAN,EAAA;EAAC;IAAAO,QAAA;IAAAC,KAAA,EAAAC;EAAA,IAAAJ,EAAuC;EAApB;IAAAK,MAAA;IAAAC;EAAA,IAAAF,EAAkB;EACzF;IAAAG;EAAA,IAAiBT,cAAA;EAEjB,MAAAU,cAAA,GAAuBC,KAAA,CAAAC,OAAA,CAAcR,QAAA,IAAYA,QAAA,CAAAS,GAAA,CAAAC,KAAgC,MAAe;EAEhG,MAAAC,qBAAA,GAA8BR,MAAA,EAAAM,GAAA,CAAAG,CAAA;IAAAC,IAAA,EACtBD,CAAA,CAAAC,IAAA;IAAAC,KAAA,EACCpB,cAAA,CAAekB,CAAA,CAAAR,MAAA,CAAAW,QAAA,EAAmBV,IAAA;EAAA;EAG3C,IAAAS,KAAA,GAAY,KAAKpB,cAAA,CAAeU,MAAA,EAAAY,MAAA,EAAgBX,IAAA,GAAO;EAEvD,MAAAY,eAAA,GAAAC,QAAA,IACEf,QAAA,CAAAM,GAAA,CAAAU,GAAA;IAEI,MAAAC,QAAA,GAAiBT,qBAAA,CAAAU,MAAA,CAAAC,CAAA,IAAoCA,CAAA,CAAAT,IAAA,KAAWD,GAAA;IAAO,OAChEQ,QAAA,EAAAN,KAAA;EAAA,CACT,EAAAS,IAAA,CACM;EAAA,IAINjB,cAAA,CAAAkB,MAAA,IAAwB;IAC1B,MAAAC,IAAA,GAAanB,cAAA,CAAAkB,MAAA,IAAwB;IACrCV,KAAA,CAAAA,CAAA,CAAQA,GAAGR,cAAA,CAAAkB,MAAA,IAAyB9B,cAAA,CAAeU,MAAA,EAAAY,MAAA,EAAgBX,IAAA,OAAWA,IAAA,CAAAqB,CAAA,CAC5E;MAAAC,KAAA,EACSF,IAAA;MAAAG,KAAA,EAAaX,eAAA,CAAgBX,cAAA,CAAAuB,KAAA,KAAwB;IAAA,CAAc,GAC3E;EAHH;IAAA,IAISvB,cAAA,CAAAkB,MAAA,IAAwB;MACjCV,KAAA,CAAAA,CAAA,CAAQA,GAAGR,cAAA,CAAAkB,MAAA,IAAyB9B,cAAA,CAClCY,cAAA,CAAAkB,MAAA,MAA0B,GAAIpB,MAAA,EAAAW,QAAA,GAAmBX,MAAA,EAAAY,MAAQ,EACzDX,IAAA,OACKY,eAAA,CAAgBX,cAAA,GAAiB;IAHxC;EAAA;EAAA,IAAAwB,EAAA;EAAA,IAAA/B,CAAA,QAAAe,KAAA;IAMKgB,EAAA,GAAAC,IAAA,CAAC;MAAAC,QAAA,EAAMlB;IAAA,C;;;;;;SAAPgB,E;CACT;AApCqD,SAAApB,MAAAZ,EAAA;EAGY;IAAAmC;EAAA,IAAAnC,EAAa;EAAA,OAAKmC,SAAA;AAAA","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","getTranslation","React","useTranslation","BlocksCell","t0","$","cellData","field","t1","blocks","labels","i18n","selectedBlocks","Array","isArray","map","_temp","translatedBlockLabels","b","slug","label","singular","plural","formatBlockList","blocks_0","b_0","filtered","filter","f","join","length","more","t","count","items","slice","t2","_jsx","children","blockType"],"sources":["../../../../../../src/elements/Table/DefaultCell/fields/Blocks/index.tsx"],"sourcesContent":["'use client'\nimport type { BlocksFieldClient, DefaultCellComponentProps } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport { useTranslation } from '../../../../../providers/Translation/index.js'\n\nexport interface BlocksCellProps extends DefaultCellComponentProps<any, BlocksFieldClient> {}\n\nexport const BlocksCell: React.FC<BlocksCellProps> = ({ cellData, field: { blocks, labels } }) => {\n  const { i18n } = useTranslation()\n\n  const selectedBlocks = Array.isArray(cellData) ? cellData.map(({ blockType }) => blockType) : []\n\n  const translatedBlockLabels = blocks?.map((b) => ({\n    slug: b.slug,\n    label: getTranslation(b.labels.singular, i18n),\n  }))\n\n  let label = `0 ${getTranslation(labels?.plural, i18n)}`\n\n  const formatBlockList = (blocks) =>\n    blocks\n      .map((b) => {\n        const filtered = translatedBlockLabels.filter((f) => f.slug === b)?.[0]\n        return filtered?.label\n      })\n      .join(', ')\n\n  const itemsToShow = 5\n\n  if (selectedBlocks.length > itemsToShow) {\n    const more = selectedBlocks.length - itemsToShow\n    label = `${selectedBlocks.length} ${getTranslation(labels?.plural, i18n)} - ${i18n.t(\n      'fields:itemsAndMore',\n      { count: more, items: formatBlockList(selectedBlocks.slice(0, itemsToShow)) },\n    )}`\n  } else if (selectedBlocks.length > 0) {\n    label = `${selectedBlocks.length} ${getTranslation(\n      selectedBlocks.length === 1 ? labels?.singular : labels?.plural,\n      i18n,\n    )} - ${formatBlockList(selectedBlocks)}`\n  }\n\n  return <span>{label}</span>\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,SAASC,cAAc,QAAQ;AAC/B,OAAOC,KAAA,MAAW;AAElB,SAASC,cAAc,QAAQ;AAI/B,OAAO,MAAMC,UAAA,GAAwCC,EAAA;EAAA,MAAAC,CAAA,GAAAN,EAAA;EAAC;IAAAO,QAAA;IAAAC,KAAA,EAAAC;EAAA,IAAAJ,EAAuC;EAApB;IAAAK,MAAA;IAAAC;EAAA,IAAAF,EAAkB;EACzF;IAAAG;EAAA,IAAiBT,cAAA;EAEjB,MAAAU,cAAA,GAAuBC,KAAA,CAAAC,OAAA,CAAcR,QAAA,IAAYA,QAAA,CAAAS,GAAA,CAAAC,KAAgC,MAAe;EAEhG,MAAAC,qBAAA,GAA8BR,MAAA,EAAAM,GAAA,CAAAG,CAAA;IAAAC,IAAA,EACtBD,CAAA,CAAAC,IAAA;IAAAC,KAAA,EACCpB,cAAA,CAAekB,CAAA,CAAAR,MAAA,CAAAW,QAAA,EAAmBV,IAAA;EAAA;EAG3C,IAAAS,KAAA,GAAY,KAAKpB,cAAA,CAAeU,MAAA,EAAAY,MAAA,EAAgBX,IAAA,GAAO;EAEvD,MAAAY,eAAA,GAAAC,QAAA,IACEf,QAAA,CAAAM,GAAA,CAAAU,GAAA;IAEI,MAAAC,QAAA,GAAiBT,qBAAA,CAAAU,MAAA,CAAAC,CAAA,IAAoCA,CAAA,CAAAT,IAAA,KAAWD,GAAA;IAAO,OAChEQ,QAAA,EAAAN,KAAA;EAAA,CACT,EAAAS,IAAA,CACM;EAAA,IAINjB,cAAA,CAAAkB,MAAA,IAAwB;IAC1B,MAAAC,IAAA,GAAanB,cAAA,CAAAkB,MAAA,IAAwB;IACrCV,KAAA,CAAAA,CAAA,CAAQA,GAAGR,cAAA,CAAAkB,MAAA,IAAyB9B,cAAA,CAAeU,MAAA,EAAAY,MAAA,EAAgBX,IAAA,OAAWA,IAAA,CAAAqB,CAAA,CAC5E;MAAAC,KAAA,EACSF,IAAA;MAAAG,KAAA,EAAaX,eAAA,CAAgBX,cAAA,CAAAuB,KAAA,KAAwB;IAAA,CAAc,GAC3E;EAHH;IAAA,IAISvB,cAAA,CAAAkB,MAAA,IAAwB;MACjCV,KAAA,CAAAA,CAAA,CAAQA,GAAGR,cAAA,CAAAkB,MAAA,IAAyB9B,cAAA,CAClCY,cAAA,CAAAkB,MAAA,MAA0B,GAAIpB,MAAA,EAAAW,QAAA,GAAmBX,MAAA,EAAAY,MAAQ,EACzDX,IAAA,OACKY,eAAA,CAAgBX,cAAA,GAAiB;IAHxC;EAAA;EAAA,IAAAwB,EAAA;EAAA,IAAA/B,CAAA,QAAAe,KAAA;IAMKgB,EAAA,GAAAC,IAAA,CAAC;MAAAC,QAAA,EAAMlB;IAAA,C;;;;;;SAAPgB,E;CACT;AApCqD,SAAApB,MAAAZ,EAAA;EAGY;IAAAmC;EAAA,IAAAnC,EAAa;EAAA,OAAKmC,SAAA;AAAA","ignoreList":[]}

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

@@ -1,22 +1,24 @@
 @import '../../../../../scss/styles.scss';
 
-.bool-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-s;
-  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 {
+  .bool-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-s;
+    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/Code/index.js

@@ -7,7 +7,7 @@ export const CodeCell = ({
   cellData,
   nowrap
 }) => {
-  const textToShow = cellData.length > 100 ? `${cellData.substring(0, 100)}\u2026` : cellData;
+  const textToShow = cellData?.length > 100 ? `${cellData.substring(0, 100)}\u2026` : cellData;
   const noWrapStyle = nowrap ? {
     whiteSpace: 'nowrap'
   } : {};

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","CodeCell","cellData","nowrap","textToShow","length","substring","noWrapStyle","whiteSpace","_jsx","className","style"],"sources":["../../../../../../src/elements/Table/DefaultCell/fields/Code/index.tsx"],"sourcesContent":["'use client'\nimport type { CodeFieldClient, DefaultCellComponentProps } from 'payload'\n\nimport React from 'react'\n\nimport './index.scss'\n\nexport interface CodeCellProps extends DefaultCellComponentProps<string, CodeFieldClient> {\n  readonly nowrap?: boolean\n}\n\nexport const CodeCell: React.FC<CodeCellProps> = ({ cellData, nowrap }) => {\n  const textToShow = cellData.length > 100 ? `${cellData.substring(0, 100)}\\u2026` : cellData\n\n  const noWrapStyle: React.CSSProperties = nowrap ? { whiteSpace: 'nowrap' } : {}\n\n  return (\n    <code className=\"code-cell\" style={noWrapStyle}>\n      <span>{textToShow}</span>\n    </code>\n  )\n}\n"],"mappings":"AAAA;;;AAGA,OAAOA,KAAA,MAAW;AAElB,OAAO;AAMP,OAAO,MAAMC,QAAA,GAAoCA,CAAC;EAAEC,QAAQ;EAAEC;AAAM,CAAE;EACpE,MAAMC,UAAA,GAAaF,QAAA,CAASG,MAAM,GAAG,MAAM,GAAGH,QAAA,CAASI,SAAS,CAAC,GAAG,YAAY,GAAGJ,QAAA;EAEnF,MAAMK,WAAA,GAAmCJ,MAAA,GAAS;IAAEK,UAAA,EAAY;EAAS,IAAI,CAAC;EAE9E,oBACEC,IAAA,CAAC;IAAKC,SAAA,EAAU;IAAYC,KAAA,EAAOJ,WAAA;cACjC,aAAAE,IAAA,CAAC;gBAAML;;;AAGb","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","CodeCell","cellData","nowrap","textToShow","length","substring","noWrapStyle","whiteSpace","_jsx","className","style"],"sources":["../../../../../../src/elements/Table/DefaultCell/fields/Code/index.tsx"],"sourcesContent":["'use client'\nimport type { CodeFieldClient, DefaultCellComponentProps } from 'payload'\n\nimport React from 'react'\n\nimport './index.scss'\n\nexport interface CodeCellProps extends DefaultCellComponentProps<string, CodeFieldClient> {\n  readonly nowrap?: boolean\n}\n\nexport const CodeCell: React.FC<CodeCellProps> = ({ cellData, nowrap }) => {\n  const textToShow = cellData?.length > 100 ? `${cellData.substring(0, 100)}\\u2026` : cellData\n\n  const noWrapStyle: React.CSSProperties = nowrap ? { whiteSpace: 'nowrap' } : {}\n\n  return (\n    <code className=\"code-cell\" style={noWrapStyle}>\n      <span>{textToShow}</span>\n    </code>\n  )\n}\n"],"mappings":"AAAA;;;AAGA,OAAOA,KAAA,MAAW;AAElB,OAAO;AAMP,OAAO,MAAMC,QAAA,GAAoCA,CAAC;EAAEC,QAAQ;EAAEC;AAAM,CAAE;EACpE,MAAMC,UAAA,GAAaF,QAAA,EAAUG,MAAA,GAAS,MAAM,GAAGH,QAAA,CAASI,SAAS,CAAC,GAAG,YAAY,GAAGJ,QAAA;EAEpF,MAAMK,WAAA,GAAmCJ,MAAA,GAAS;IAAEK,UAAA,EAAY;EAAS,IAAI,CAAC;EAE9E,oBACEC,IAAA,CAAC;IAAKC,SAAA,EAAU;IAAYC,KAAA,EAAOJ,WAAA;cACjC,aAAAE,IAAA,CAAC;gBAAML;;;AAGb","ignoreList":[]}

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

@@ -1,27 +1,29 @@
 @import '../../../../../scss/styles.scss';
 
-.code-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);
-  background: var(--theme-elevation-100);
-  color: var(--theme-elevation-800);
+@layer payload-default {
+  .code-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);
+    background: var(--theme-elevation-100);
+    color: var(--theme-elevation-800);
 
-  [dir='ltr'] & {
-    padding-left: base(0.0875 + 0.25);
-  }
+    [dir='ltr'] & {
+      padding-left: base(0.0875 + 0.25);
+    }
 
-  [dir='rtl'] & {
-    padding-right: base(0.0875 + 0.25);
-  }
+    [dir='rtl'] & {
+      padding-right: base(0.0875 + 0.25);
+    }
 
-  &:hover {
-    text-decoration: inherit;
+    &:hover {
+      text-decoration: inherit;
+    }
   }
 }

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.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,7 +1,6 @@
-import type { DefaultCellComponentProps, RelationshipFieldClient, UploadFieldClient } from 'payload';
+import type { DefaultCellComponentProps, JoinFieldClient, RelationshipFieldClient, UploadFieldClient } from 'payload';
 import React from 'react';
 import './index.scss';
-export interface RelationshipCellProps extends DefaultCellComponentProps<any, RelationshipFieldClient | UploadFieldClient> {
-}
+export type RelationshipCellProps = DefaultCellComponentProps<any, 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,yBAAyB,EAAE,uBAAuB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAGpG,OAAO,KAA8B,MAAM,OAAO,CAAA;AASlD,OAAO,cAAc,CAAA;AAMrB,MAAM,WAAW,qBACf,SAAQ,yBAAyB,CAAC,GAAG,EAAE,uBAAuB,GAAG,iBAAiB,CAAC;CAAG;AAExF,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAwG5D,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/elements/Table/DefaultCell/fields/Relationship/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,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,GAAG,EACH,eAAe,GAAG,uBAAuB,GAAG,iBAAiB,CAC9D,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAiH5D,CAAA"}

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

@@ -3,7 +3,7 @@
 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';
@@ -17,15 +17,18 @@ const totalToShow = 3;
 export const RelationshipCell = t0 => {
   const $ = _c(40);
   const {
-    cellData,
+    cellData: cellDataFromProps,
     customCellContext,
     field,
     field: t1
   } = t0;
   const {
-    label,
-    relationTo
+    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
   } = useConfig();
@@ -34,14 +37,14 @@ export const RelationshipCell = t0 => {
     routes
   } = config;
   const [intersectionRef, entry] = useIntersect();
-  let t2;
+  let t3;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t2 = [];
-    $[0] = t2;
+    t3 = [];
+    $[0] = t3;
   } else {
-    t2 = $[0];
+    t3 = $[0];
   }
-  const [values, setValues] = useState(t2);
+  const [values, setValues] = useState(t3);
   const {
     documents,
     getRelationships
@@ -52,9 +55,9 @@ export const RelationshipCell = t0 => {
     t
   } = useTranslation();
   const isAboveViewport = canUseDOM ? entry?.boundingClientRect?.top < window.innerHeight : false;
-  let t3;
+  let t4;
   if ($[1] !== cellData || $[2] !== isAboveViewport || $[3] !== hasRequested || $[4] !== relationTo || $[5] !== getRelationships) {
-    t3 = () => {
+    t4 = () => {
       if ((cellData || typeof cellData === "number") && isAboveViewport && !hasRequested) {
         const formattedValues = [];
         const arrayCellData = Array.isArray(cellData) ? cellData : [cellData];
@@ -79,13 +82,13 @@ export const RelationshipCell = t0 => {
     $[3] = hasRequested;
     $[4] = relationTo;
     $[5] = getRelationships;
-    $[6] = t3;
+    $[6] = t4;
   } else {
-    t3 = $[6];
+    t4 = $[6];
   }
-  let t4;
+  let t5;
   if ($[7] !== cellData || $[8] !== relationTo || $[9] !== collections || $[10] !== isAboveViewport || $[11] !== routes.api || $[12] !== hasRequested || $[13] !== getRelationships) {
-    t4 = [cellData, relationTo, collections, isAboveViewport, routes.api, hasRequested, getRelationships];
+    t5 = [cellData, relationTo, collections, isAboveViewport, routes.api, hasRequested, getRelationships];
     $[7] = cellData;
     $[8] = relationTo;
     $[9] = collections;
@@ -93,46 +96,46 @@ export const RelationshipCell = t0 => {
     $[11] = routes.api;
     $[12] = hasRequested;
     $[13] = getRelationships;
-    $[14] = t4;
+    $[14] = t5;
   } else {
-    t4 = $[14];
+    t5 = $[14];
   }
-  useEffect(t3, t4);
-  let t5;
+  useEffect(t4, t5);
+  let t6;
   if ($[15] !== hasRequested) {
-    t5 = () => {
+    t6 = () => {
       if (hasRequested) {
         setHasRequested(false);
       }
     };
     $[15] = hasRequested;
-    $[16] = t5;
+    $[16] = t6;
   } else {
-    t5 = $[16];
+    t6 = $[16];
   }
-  let t6;
+  let t7;
   if ($[17] !== cellData) {
-    t6 = [cellData];
+    t7 = [cellData];
     $[17] = cellData;
-    $[18] = t6;
+    $[18] = t7;
   } else {
-    t6 = $[18];
+    t7 = $[18];
   }
-  useEffect(t5, t6);
-  let t7;
+  useEffect(t6, t7);
+  let t8;
   if ($[19] !== documents || $[20] !== collections || $[21] !== config.admin.dateFormat || $[22] !== t || $[23] !== i18n || $[24] !== field || $[25] !== customCellContext || $[26] !== values || $[27] !== cellData || $[28] !== label || $[29] !== intersectionRef) {
-    let t8;
+    let t9;
     if ($[31] !== documents || $[32] !== collections || $[33] !== config.admin.dateFormat || $[34] !== t || $[35] !== i18n || $[36] !== field || $[37] !== customCellContext || $[38] !== values.length) {
-      t8 = (t9, i) => {
+      t9 = (t10, i) => {
         const {
           relationTo: relationTo_0,
           value
-        } = t9;
+        } = t10;
         const document = documents[relationTo_0][value];
-        const relatedCollection = collections.find(t10 => {
+        const relatedCollection = collections.find(t11 => {
           const {
             slug
-          } = t10;
+          } = t11;
           return slug === relationTo_0;
         });
         const label_0 = formatDocTitle({
@@ -167,14 +170,14 @@ export const RelationshipCell = t0 => {
       $[36] = field;
       $[37] = customCellContext;
       $[38] = values.length;
-      $[39] = t8;
+      $[39] = t9;
     } else {
-      t8 = $[39];
+      t9 = $[39];
     }
-    t7 = _jsxs("div", {
+    t8 = _jsxs("div", {
       className: baseClass,
       ref: intersectionRef,
-      children: [values.map(t8), Array.isArray(cellData) && cellData.length > totalToShow && t("fields:itemsAndMore", {
+      children: [values.map(t9), Array.isArray(cellData) && cellData.length > totalToShow && t("fields:itemsAndMore", {
         count: cellData.length - totalToShow,
         items: ""
       }), values.length === 0 && t("general:noLabel", {
@@ -192,10 +195,10 @@ export const RelationshipCell = t0 => {
     $[27] = cellData;
     $[28] = label;
     $[29] = intersectionRef;
-    $[30] = t7;
+    $[30] = t8;
   } else {
-    t7 = $[30];
+    t8 = $[30];
   }
-  return t7;
+  return t8;
 };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","getTranslation","React","useEffect","useState","useIntersect","useConfig","useTranslation","canUseDOM","formatDocTitle","useListRelationships","FileCell","baseClass","totalToShow","RelationshipCell","t0","$","cellData","customCellContext","field","t1","label","relationTo","config","collections","routes","intersectionRef","entry","t2","Symbol","for","values","setValues","documents","getRelationships","hasRequested","setHasRequested","i18n","t","isAboveViewport","boundingClientRect","top","window","innerHeight","t3","formattedValues","arrayCellData","Array","isArray","slice","length","forEach","cell","push","value","t4","api","t5","t6","t7","admin","dateFormat","t8","t9","i","relationTo_0","document","relatedCollection","find","t10","slug","label_0","collectionConfig","data","fallback","fileField","type","relatedCollectionPreview","upload","displayPreview","previewAllowed","rowData","_jsxs","Fragment","children","className","ref","map","count","items"],"sources":["../../../../../../src/elements/Table/DefaultCell/fields/Relationship/index.tsx"],"sourcesContent":["'use client'\nimport type { DefaultCellComponentProps, RelationshipFieldClient, UploadFieldClient } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React, { useEffect, useState } from 'react'\n\nimport { useIntersect } from '../../../../../hooks/useIntersect.js'\nimport { useConfig } from '../../../../../providers/Config/index.js'\nimport { useTranslation } from '../../../../../providers/Translation/index.js'\nimport { canUseDOM } from '../../../../../utilities/canUseDOM.js'\nimport { formatDocTitle } from '../../../../../utilities/formatDocTitle.js'\nimport { useListRelationships } from '../../../RelationshipProvider/index.js'\nimport { FileCell } from '../File/index.js'\nimport './index.scss'\n\ntype Value = { relationTo: string; value: number | string }\nconst baseClass = 'relationship-cell'\nconst totalToShow = 3\n\nexport interface RelationshipCellProps\n  extends DefaultCellComponentProps<any, RelationshipFieldClient | UploadFieldClient> {}\n\nexport const RelationshipCell: React.FC<RelationshipCellProps> = ({\n  cellData,\n  customCellContext,\n  field,\n  field: { label, relationTo },\n}) => {\n  const { config } = useConfig()\n  const { collections, routes } = config\n  const [intersectionRef, entry] = useIntersect()\n  const [values, setValues] = useState<Value[]>([])\n  const { documents, getRelationships } = useListRelationships()\n  const [hasRequested, setHasRequested] = useState(false)\n  const { i18n, t } = useTranslation()\n\n  const isAboveViewport = canUseDOM ? entry?.boundingClientRect?.top < window.innerHeight : false\n\n  useEffect(() => {\n    if ((cellData || typeof cellData === 'number') && isAboveViewport && !hasRequested) {\n      const formattedValues: Value[] = []\n      const arrayCellData = Array.isArray(cellData) ? cellData : [cellData]\n      arrayCellData\n        .slice(0, arrayCellData.length < totalToShow ? arrayCellData.length : totalToShow)\n        .forEach((cell) => {\n          if (typeof cell === 'object' && 'relationTo' in cell && 'value' in cell) {\n            formattedValues.push(cell)\n          }\n          if (\n            (typeof cell === 'number' || typeof cell === 'string') &&\n            typeof relationTo === 'string'\n          ) {\n            formattedValues.push({\n              relationTo,\n              value: cell,\n            })\n          }\n        })\n      getRelationships(formattedValues)\n      setHasRequested(true)\n      setValues(formattedValues)\n    }\n  }, [\n    cellData,\n    relationTo,\n    collections,\n    isAboveViewport,\n    routes.api,\n    hasRequested,\n    getRelationships,\n  ])\n\n  useEffect(() => {\n    if (hasRequested) {\n      setHasRequested(false)\n    }\n  }, [cellData])\n\n  return (\n    <div className={baseClass} ref={intersectionRef}>\n      {values.map(({ relationTo, value }, i) => {\n        const document = documents[relationTo][value]\n        const relatedCollection = collections.find(({ slug }) => slug === relationTo)\n\n        const label = formatDocTitle({\n          collectionConfig: relatedCollection,\n          data: document || null,\n          dateFormat: config.admin.dateFormat,\n          fallback: `${t('general:untitled')} - ID: ${value}`,\n          i18n,\n        })\n\n        let fileField = null\n\n        if (field.type === 'upload') {\n          const relatedCollectionPreview = !!relatedCollection.upload.displayPreview\n          const previewAllowed =\n            field.displayPreview || (relatedCollectionPreview && field.displayPreview !== false)\n\n          if (previewAllowed && document) {\n            fileField = (\n              <FileCell\n                cellData={label}\n                customCellContext={customCellContext}\n                field={field}\n                rowData={document}\n              />\n            )\n          }\n        }\n\n        return (\n          <React.Fragment key={i}>\n            {document === false && `${t('general:untitled')} - ID: ${value}`}\n            {document === null && `${t('general:loading')}...`}\n            {document ? fileField || label : null}\n            {values.length > i + 1 && ', '}\n          </React.Fragment>\n        )\n      })}\n      {Array.isArray(cellData) &&\n        cellData.length > totalToShow &&\n        t('fields:itemsAndMore', { count: cellData.length - totalToShow, items: '' })}\n      {values.length === 0 && t('general:noLabel', { label: getTranslation(label || '', i18n) })}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","getTranslation","React","useEffect","useMemo","useState","useIntersect","useConfig","useTranslation","canUseDOM","formatDocTitle","useListRelationships","FileCell","baseClass","totalToShow","RelationshipCell","t0","$","cellData","cellDataFromProps","customCellContext","field","t1","label","relationTo","collection","t2","docs","config","collections","routes","intersectionRef","entry","t3","Symbol","for","values","setValues","documents","getRelationships","hasRequested","setHasRequested","i18n","t","isAboveViewport","boundingClientRect","top","window","innerHeight","t4","formattedValues","arrayCellData","Array","isArray","slice","length","forEach","cell","push","value","t5","api","t6","t7","t8","admin","dateFormat","t9","t10","i","relationTo_0","document","relatedCollection","find","t11","slug","label_0","collectionConfig","data","fallback","fileField","type","relatedCollectionPreview","upload","displayPreview","previewAllowed","rowData","_jsxs","Fragment","children","className","ref","map","count","items"],"sources":["../../../../../../src/elements/Table/DefaultCell/fields/Relationship/index.tsx"],"sourcesContent":["'use client'\nimport type {\n  DefaultCellComponentProps,\n  JoinFieldClient,\n  RelationshipFieldClient,\n  UploadFieldClient,\n} from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React, { useEffect, useMemo, useState } from 'react'\n\nimport { useIntersect } from '../../../../../hooks/useIntersect.js'\nimport { useConfig } from '../../../../../providers/Config/index.js'\nimport { useTranslation } from '../../../../../providers/Translation/index.js'\nimport { canUseDOM } from '../../../../../utilities/canUseDOM.js'\nimport { formatDocTitle } from '../../../../../utilities/formatDocTitle.js'\nimport { useListRelationships } from '../../../RelationshipProvider/index.js'\nimport { FileCell } from '../File/index.js'\nimport './index.scss'\n\ntype Value = { relationTo: string; value: number | string }\nconst baseClass = 'relationship-cell'\nconst totalToShow = 3\n\nexport type RelationshipCellProps = DefaultCellComponentProps<\n  any,\n  JoinFieldClient | RelationshipFieldClient | UploadFieldClient\n>\n\nexport const RelationshipCell: React.FC<RelationshipCellProps> = ({\n  cellData: cellDataFromProps,\n  customCellContext,\n  field,\n  field: { label },\n}) => {\n  // conditionally extract relationTo both both relationship and join fields\n  const relationTo =\n    ('relationTo' in field && field.relationTo) || ('collection' in field && field.collection)\n\n  // conditionally extract docs from join fields\n  const cellData = useMemo(() => {\n    return 'collection' in field ? cellDataFromProps?.docs : cellDataFromProps\n  }, [cellDataFromProps, field])\n\n  const { config } = useConfig()\n  const { collections, routes } = config\n  const [intersectionRef, entry] = useIntersect()\n  const [values, setValues] = useState<Value[]>([])\n  const { documents, getRelationships } = useListRelationships()\n  const [hasRequested, setHasRequested] = useState(false)\n  const { i18n, t } = useTranslation()\n\n  const isAboveViewport = canUseDOM ? entry?.boundingClientRect?.top < window.innerHeight : false\n\n  useEffect(() => {\n    if ((cellData || typeof cellData === 'number') && isAboveViewport && !hasRequested) {\n      const formattedValues: Value[] = []\n      const arrayCellData = Array.isArray(cellData) ? cellData : [cellData]\n      arrayCellData\n        .slice(0, arrayCellData.length < totalToShow ? arrayCellData.length : totalToShow)\n        .forEach((cell) => {\n          if (typeof cell === 'object' && 'relationTo' in cell && 'value' in cell) {\n            formattedValues.push(cell)\n          }\n          if (\n            (typeof cell === 'number' || typeof cell === 'string') &&\n            typeof relationTo === 'string'\n          ) {\n            formattedValues.push({\n              relationTo,\n              value: cell,\n            })\n          }\n        })\n      getRelationships(formattedValues)\n      setHasRequested(true)\n      setValues(formattedValues)\n    }\n  }, [\n    cellData,\n    relationTo,\n    collections,\n    isAboveViewport,\n    routes.api,\n    hasRequested,\n    getRelationships,\n  ])\n\n  useEffect(() => {\n    if (hasRequested) {\n      setHasRequested(false)\n    }\n  }, [cellData])\n\n  return (\n    <div className={baseClass} ref={intersectionRef}>\n      {values.map(({ relationTo, value }, i) => {\n        const document = documents[relationTo][value]\n        const relatedCollection = collections.find(({ slug }) => slug === relationTo)\n\n        const label = formatDocTitle({\n          collectionConfig: relatedCollection,\n          data: document || null,\n          dateFormat: config.admin.dateFormat,\n          fallback: `${t('general:untitled')} - ID: ${value}`,\n          i18n,\n        })\n\n        let fileField = null\n\n        if (field.type === 'upload') {\n          const relatedCollectionPreview = !!relatedCollection.upload.displayPreview\n          const previewAllowed =\n            field.displayPreview || (relatedCollectionPreview && field.displayPreview !== false)\n\n          if (previewAllowed && document) {\n            fileField = (\n              <FileCell\n                cellData={label}\n                customCellContext={customCellContext}\n                field={field}\n                rowData={document}\n              />\n            )\n          }\n        }\n\n        return (\n          <React.Fragment key={i}>\n            {document === false && `${t('general:untitled')} - ID: ${value}`}\n            {document === null && `${t('general:loading')}...`}\n            {document ? fileField || label : null}\n            {values.length > i + 1 && ', '}\n          </React.Fragment>\n        )\n      })}\n      {Array.isArray(cellData) &&\n        cellData.length > totalToShow &&\n        t('fields:itemsAndMore', { count: cellData.length - totalToShow, items: '' })}\n      {values.length === 0 && t('general:noLabel', { label: getTranslation(label || '', i18n) })}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,3 +0,0 @@
-.relationship-cell {
-  min-width: 250px;
-}