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

package/dist/elements/FieldDiffContainer/index.css

@@ -0,0 +1,73 @@
+@layer payload-default {
+  .field-diff__locale-label {
+    background: var(--color-bg-secondary);
+    border-radius: var(--radius-medium);
+    padding-inline: var(--spacer-1);
+    margin-inline-end: var(--spacer-1);
+  }
+
+  .field-diff-container {
+    position: relative;
+  }
+
+  .field-diff-content {
+    display: grid;
+    grid-template-columns: var(--field-diff-columns, minmax(0, 1fr) minmax(0, 1fr));
+    background: var(--color-bg-secondary);
+    padding-block: var(--spacer-2);
+    border-radius: var(--radius-medium);
+    overflow: clip;
+  }
+
+  .field-diff-content > * {
+    padding-inline: var(--spacer-2-5);
+  }
+
+  /* stylelint-disable-next-line plugin/no-max-width-media-query -- TODO: pre-existing; migrate to a mobile-first min-width query */
+  @media (max-width: 768px) {
+    .field-diff-container .field-diff-content {
+      grid-template-columns: 1fr;
+      gap: calc(var(--stroke-width-small) * 2);
+      padding: 0;
+      background: transparent;
+      isolation: isolate;
+    }
+
+    .field-diff-content > * {
+      background: var(--color-bg-secondary);
+      padding: var(--spacer-1) var(--spacer-2);
+      min-height: var(--spacer-5);
+      overflow: hidden;
+      align-content: center;
+    }
+
+    .field-diff-content > *:first-child {
+      border-radius: var(--radius-medium) var(--radius-medium) 0 0;
+    }
+
+    .field-diff-content > *:last-child {
+      border-radius: 0 0 var(--radius-medium) var(--radius-medium);
+    }
+
+    .field-diff-content > .html-diff__diff-old:has([data-match-type]) {
+      background: var(--diff-delete-parent-bg);
+    }
+
+    .field-diff-content > .html-diff__diff-new:has([data-match-type]) {
+      background: var(--diff-create-parent-bg);
+    }
+  }
+
+  .diff-no-value {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    max-height: var(--spacer-5);
+    background-color: var(--color-bg-secondary);
+    border-radius: var(--radius-medium);
+    color: var(--color-text-secondary);
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-font-weight);
+    line-height: var(--text-body-medium-line-height);
+  }
+}

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

@@ -1,6 +1,7 @@
 import type { LabelFunction, StaticLabel } from 'payload';
-import './index.scss';
+import './index.css';
 import { type I18nClient } from '@payloadcms/translations';
+import React from 'react';
 export declare const FieldDiffContainer: React.FC<{
     className?: string;
     From: React.ReactNode;

package/dist/elements/FieldDiffContainer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/FieldDiffContainer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAEzD,OAAO,cAAc,CAAA;AAErB,OAAO,EAAkB,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAM1E,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB,IAAI,EAAE,UAAU,CAAA;IAChB,KAAK,EAAE;QACL,KAAK,CAAC,EAAE,KAAK,GAAG,aAAa,GAAG,WAAW,CAAA;QAC3C,MAAM,CAAC,EAAE,MAAM,CAAA;KAChB,CAAA;IACD,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,EAAE,EAAE,KAAK,CAAC,SAAS,CAAA;CACpB,CA2CA,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/FieldDiffContainer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAEzD,OAAO,aAAa,CAAA;AAEpB,OAAO,EAAkB,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAC1E,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB,IAAI,EAAE,UAAU,CAAA;IAChB,KAAK,EAAE;QACL,KAAK,CAAC,EAAE,KAAK,GAAG,aAAa,GAAG,WAAW,CAAA;QAC3C,MAAM,CAAC,EAAE,MAAM,CAAA;KAChB,CAAA;IACD,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,EAAE,EAAE,KAAK,CAAC,SAAS,CAAA;CACpB,CAuCA,CAAA"}

package/dist/elements/FieldDiffContainer/index.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import './index.scss';
+import './index.css';
 import { getTranslation } from '@payloadcms/translations';
+import React from 'react';
 import { FieldDiffLabel } from '../FieldDiffLabel/index.js';
 const baseClass = 'field-diff';
+const gutterOffset = 6.5;
 export const FieldDiffContainer = args => {
   const {
     className,
@@ -15,23 +17,23 @@ export const FieldDiffContainer = args => {
     nestingLevel = 0,
     To
   } = args;
+  const labelID = React.useId();
+  const labelText = label !== false ? getTranslation(label || '', i18n) : '';
+  const a11yID = locale || labelText ? labelID : undefined;
   return /*#__PURE__*/_jsxs("div", {
+    "aria-labelledby": a11yID,
     className: `${baseClass}-container${className ? ` ${className}` : ''} nested-level-${nestingLevel}`,
-    style: nestingLevel ? {
-      // Need to use % instead of fr, as calc() doesn't work with fr when this is used in gridTemplateColumns
-      '--left-offset': `calc(50%  - (${nestingLevel} * calc( calc(var(--base)* 0.5) - 2.5px  )))`
-    } : {
-      '--left-offset': '50%'
-    },
+    role: a11yID ? 'group' : undefined,
     children: [/*#__PURE__*/_jsxs(FieldDiffLabel, {
+      id: a11yID,
       children: [locale && /*#__PURE__*/_jsx("span", {
         className: `${baseClass}__locale-label`,
         children: locale
-      }), typeof label !== 'function' && getTranslation(label || '', i18n)]
+      }), labelText]
     }), /*#__PURE__*/_jsxs("div", {
       className: `${baseClass}-content`,
       style: nestingLevel ? {
-        gridTemplateColumns: `calc(var(--left-offset) - calc(var(--base)*0.5) )     calc(50% - calc(var(--base)*0.5) + calc(50% - var(--left-offset)))`
+        '--field-diff-columns': `calc(50% - ${nestingLevel * gutterOffset}px) calc(50% + ${nestingLevel * gutterOffset}px)`
       } : undefined,
       children: [From, To]
     })]

package/dist/elements/FieldDiffContainer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["getTranslation","FieldDiffLabel","baseClass","FieldDiffContainer","args","className","From","i18n","label","locale","nestingLevel","To","_jsxs","style","_jsx","gridTemplateColumns","undefined"],"sources":["../../../src/elements/FieldDiffContainer/index.tsx"],"sourcesContent":["import type { LabelFunction, StaticLabel } from 'payload'\n\nimport './index.scss'\n\nimport { getTranslation, type I18nClient } from '@payloadcms/translations'\n\nimport { FieldDiffLabel } from '../FieldDiffLabel/index.js'\n\nconst baseClass = 'field-diff'\n\nexport const FieldDiffContainer: React.FC<{\n  className?: string\n  From: React.ReactNode\n  i18n: I18nClient\n  label: {\n    label?: false | LabelFunction | StaticLabel\n    locale?: string\n  }\n  nestingLevel?: number\n  To: React.ReactNode\n}> = (args) => {\n  const {\n    className,\n    From,\n    i18n,\n    label: { label, locale },\n    nestingLevel = 0,\n    To,\n  } = args\n\n  return (\n    <div\n      className={`${baseClass}-container${className ? ` ${className}` : ''} nested-level-${nestingLevel}`}\n      style={\n        nestingLevel\n          ? ({\n              // Need to use % instead of fr, as calc() doesn't work with fr when this is used in gridTemplateColumns\n              '--left-offset': `calc(50%  - (${nestingLevel} * calc( calc(var(--base)* 0.5) - 2.5px  )))`,\n            } as React.CSSProperties)\n          : ({\n              '--left-offset': '50%',\n            } as React.CSSProperties)\n      }\n    >\n      <FieldDiffLabel>\n        {locale && <span className={`${baseClass}__locale-label`}>{locale}</span>}\n        {typeof label !== 'function' && getTranslation(label || '', i18n)}\n      </FieldDiffLabel>\n      <div\n        className={`${baseClass}-content`}\n        style={\n          nestingLevel\n            ? {\n                gridTemplateColumns: `calc(var(--left-offset) - calc(var(--base)*0.5) )     calc(50% - calc(var(--base)*0.5) + calc(50% - var(--left-offset)))`,\n              }\n            : undefined\n        }\n      >\n        {From}\n        {To}\n      </div>\n    </div>\n  )\n}\n"],"mappings":";AAEA,OAAO;AAEP,SAASA,cAAc,QAAyB;AAEhD,SAASC,cAAc,QAAQ;AAE/B,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,kBAAA,GAUPC,IAAA;EACJ,MAAM;IACJC,SAAS;IACTC,IAAI;IACJC,IAAI;IACJC,KAAA,EAAO;MAAEA,KAAK;MAAEC;IAAM,CAAE;IACxBC,YAAA,GAAe,CAAC;IAChBC;EAAE,CACH,GAAGP,IAAA;EAEJ,oBACEQ,KAAA,CAAC;IACCP,SAAA,EAAW,GAAGH,SAAA,aAAsBG,SAAA,GAAY,IAAIA,SAAA,EAAW,GAAG,mBAAmBK,YAAA,EAAc;IACnGG,KAAA,EACEH,YAAA,GACK;MACC;MACA,iBAAiB,gBAAgBA,YAAA;IACnC,IACC;MACC,iBAAiB;IACnB;4BAGNE,KAAA,CAACX,cAAA;iBACEQ,MAAA,iBAAUK,IAAA,CAAC;QAAKT,SAAA,EAAW,GAAGH,SAAA,gBAAyB;kBAAGO;UAC1D,OAAOD,KAAA,KAAU,cAAcR,cAAA,CAAeQ,KAAA,IAAS,IAAID,IAAA;qBAE9DK,KAAA,CAAC;MACCP,SAAA,EAAW,GAAGH,SAAA,UAAmB;MACjCW,KAAA,EACEH,YAAA,GACI;QACEK,mBAAA,EAAqB;MACvB,IACAC,SAAA;iBAGLV,IAAA,EACAK,EAAA;;;AAIT","ignoreList":[]}
+{"version":3,"file":"index.js","names":["getTranslation","React","FieldDiffLabel","baseClass","gutterOffset","FieldDiffContainer","args","className","From","i18n","label","locale","nestingLevel","To","labelID","useId","labelText","a11yID","undefined","_jsxs","role","id","_jsx","style"],"sources":["../../../src/elements/FieldDiffContainer/index.tsx"],"sourcesContent":["import type { LabelFunction, StaticLabel } from 'payload'\n\nimport './index.css'\n\nimport { getTranslation, type I18nClient } from '@payloadcms/translations'\nimport React from 'react'\n\nimport { FieldDiffLabel } from '../FieldDiffLabel/index.js'\n\nconst baseClass = 'field-diff'\n\nconst gutterOffset = 6.5\n\nexport const FieldDiffContainer: React.FC<{\n  className?: string\n  From: React.ReactNode\n  i18n: I18nClient\n  label: {\n    label?: false | LabelFunction | StaticLabel\n    locale?: string\n  }\n  nestingLevel?: number\n  To: React.ReactNode\n}> = (args) => {\n  const {\n    className,\n    From,\n    i18n,\n    label: { label, locale },\n    nestingLevel = 0,\n    To,\n  } = args\n\n  const labelID = React.useId()\n  const labelText = label !== false ? getTranslation(label || '', i18n) : ''\n  const a11yID = locale || labelText ? labelID : undefined\n\n  return (\n    <div\n      aria-labelledby={a11yID}\n      className={`${baseClass}-container${className ? ` ${className}` : ''} nested-level-${nestingLevel}`}\n      role={a11yID ? 'group' : undefined}\n    >\n      <FieldDiffLabel id={a11yID}>\n        {locale && <span className={`${baseClass}__locale-label`}>{locale}</span>}\n        {labelText}\n      </FieldDiffLabel>\n      <div\n        className={`${baseClass}-content`}\n        style={\n          nestingLevel\n            ? ({\n                '--field-diff-columns': `calc(50% - ${nestingLevel * gutterOffset}px) calc(50% + ${nestingLevel * gutterOffset}px)`,\n              } as React.CSSProperties)\n            : undefined\n        }\n      >\n        {From}\n        {To}\n      </div>\n    </div>\n  )\n}\n"],"mappings":";AAEA,OAAO;AAEP,SAASA,cAAc,QAAyB;AAChD,OAAOC,KAAA,MAAW;AAElB,SAASC,cAAc,QAAQ;AAE/B,MAAMC,SAAA,GAAY;AAElB,MAAMC,YAAA,GAAe;AAErB,OAAO,MAAMC,kBAAA,GAUPC,IAAA;EACJ,MAAM;IACJC,SAAS;IACTC,IAAI;IACJC,IAAI;IACJC,KAAA,EAAO;MAAEA,KAAK;MAAEC;IAAM,CAAE;IACxBC,YAAA,GAAe,CAAC;IAChBC;EAAE,CACH,GAAGP,IAAA;EAEJ,MAAMQ,OAAA,GAAUb,KAAA,CAAMc,KAAK;EAC3B,MAAMC,SAAA,GAAYN,KAAA,KAAU,QAAQV,cAAA,CAAeU,KAAA,IAAS,IAAID,IAAA,IAAQ;EACxE,MAAMQ,MAAA,GAASN,MAAA,IAAUK,SAAA,GAAYF,OAAA,GAAUI,SAAA;EAE/C,oBACEC,KAAA,CAAC;IACC,mBAAiBF,MAAA;IACjBV,SAAA,EAAW,GAAGJ,SAAA,aAAsBI,SAAA,GAAY,IAAIA,SAAA,EAAW,GAAG,mBAAmBK,YAAA,EAAc;IACnGQ,IAAA,EAAMH,MAAA,GAAS,UAAUC,SAAA;4BAEzBC,KAAA,CAACjB,cAAA;MAAemB,EAAA,EAAIJ,MAAA;iBACjBN,MAAA,iBAAUW,IAAA,CAAC;QAAKf,SAAA,EAAW,GAAGJ,SAAA,gBAAyB;kBAAGQ;UAC1DK,SAAA;qBAEHG,KAAA,CAAC;MACCZ,SAAA,EAAW,GAAGJ,SAAA,UAAmB;MACjCoB,KAAA,EACEX,YAAA,GACK;QACC,wBAAwB,cAAcA,YAAA,GAAeR,YAAA,kBAA8BQ,YAAA,GAAeR,YAAA;MACpG,IACAc,SAAA;iBAGLV,IAAA,EACAK,EAAA;;;AAIT","ignoreList":[]}

package/dist/elements/FieldDiffLabel/index.css

@@ -0,0 +1,21 @@
+@layer payload-default {
+  .field-diff-label {
+    margin-bottom: var(--spacer-2);
+    font-size: var(--text-body-medium-bold-font-size);
+    font-weight: var(--text-body-medium-bold-font-weight);
+    line-height: var(--text-body-medium-bold-line-height);
+    letter-spacing: var(--text-body-medium-bold-letter-spacing);
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+    align-items: center;
+    color: var(--color-text);
+  }
+
+  /* stylelint-disable-next-line plugin/no-max-width-media-query -- TODO: pre-existing; migrate to a mobile-first min-width query */
+  @media (max-width: 768px) {
+    .field-diff-label {
+      height: min-content;
+    }
+  }
+}

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

@@ -1,6 +1,7 @@
 import React from 'react';
-import './index.scss';
+import './index.css';
 export declare const FieldDiffLabel: React.FC<{
     children?: React.ReactNode;
+    id?: string;
 }>;
 //# sourceMappingURL=index.d.ts.map

package/dist/elements/FieldDiffLabel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/FieldDiffLabel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAEnE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/FieldDiffLabel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,CAAA;CAAE,CAOhF,CAAA"}

package/dist/elements/FieldDiffLabel/index.js

@@ -1,11 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import './index.scss';
+import './index.css';
 const baseClass = 'field-diff-label';
 export const FieldDiffLabel = ({
+  id,
   children
 }) => /*#__PURE__*/_jsx("div", {
   className: baseClass,
+  id: id,
   children: children
 });
 //# sourceMappingURL=index.js.map

package/dist/elements/FieldDiffLabel/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","baseClass","FieldDiffLabel","children","_jsx","className"],"sources":["../../../src/elements/FieldDiffLabel/index.tsx"],"sourcesContent":["import React from 'react'\n\nimport './index.scss'\n\nconst baseClass = 'field-diff-label'\n\nexport const FieldDiffLabel: React.FC<{ children?: React.ReactNode }> = ({ children }) => (\n  <div className={baseClass}>{children}</div>\n)\n"],"mappings":";AAAA,OAAOA,KAAA,MAAW;AAElB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,cAAA,GAA2DA,CAAC;EAAEC;AAAQ,CAAE,kBACnFC,IAAA,CAAC;EAAIC,SAAA,EAAWJ,SAAA;YAAYE","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","baseClass","FieldDiffLabel","id","children","_jsx","className"],"sources":["../../../src/elements/FieldDiffLabel/index.tsx"],"sourcesContent":["import React from 'react'\n\nimport './index.css'\n\nconst baseClass = 'field-diff-label'\n\nexport const FieldDiffLabel: React.FC<{ children?: React.ReactNode; id?: string }> = ({\n  id,\n  children,\n}) => (\n  <div className={baseClass} id={id}>\n    {children}\n  </div>\n)\n"],"mappings":";AAAA,OAAOA,KAAA,MAAW;AAElB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,cAAA,GAAwEA,CAAC;EACpFC,EAAE;EACFC;AAAQ,CACT,kBACCC,IAAA,CAAC;EAAIC,SAAA,EAAWL,SAAA;EAAWE,EAAA,EAAIA,EAAA;YAC5BC","ignoreList":[]}

package/dist/elements/FieldSelect/index.css

@@ -0,0 +1,8 @@
+@layer payload-default {
+  .field-select {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer-2);
+    margin-bottom: var(--spacer-3);
+  }
+}

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

@@ -2,7 +2,7 @@ import type { ClientField, FormState, SanitizedFieldPermissions } from 'payload'
 import React from 'react';
 import type { FieldAction } from '../../forms/Form/types.js';
 import type { FieldOption } from './reduceFieldOptions.js';
-import './index.scss';
+import './index.css';
 export type OnFieldSelect = ({ dispatchFields, formState, selected, }: {
     dispatchFields: React.Dispatch<FieldAction>;
     formState: FormState;

package/dist/elements/FieldSelect/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/FieldSelect/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAEhF,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAA;AAC5D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAA;AAQ1D,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,aAAa,GAAG,CAAC,EAC3B,cAAc,EACd,SAAS,EACT,QAAQ,GACT,EAAE;IACD,cAAc,EAAE,KAAK,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAA;IAC3C,SAAS,EAAE,SAAS,CAAA;IACpB,QAAQ,EAAE,WAAW,EAAE,CAAA;CACxB,KAAK,IAAI,CAAA;AAEV,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,CAAC,MAAM,EAAE,WAAW,EAAE,CAAA;IAC9B,QAAQ,CAAC,QAAQ,EAAE,aAAa,CAAA;IAChC,QAAQ,CAAC,WAAW,EAChB;QACE,CAAC,SAAS,EAAE,MAAM,GAAG,yBAAyB,CAAA;KAC/C,GACD,yBAAyB,CAAA;CAC9B,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA8BlD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/FieldSelect/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAEhF,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAA;AAC5D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAA;AAQ1D,OAAO,aAAa,CAAA;AAIpB,MAAM,MAAM,aAAa,GAAG,CAAC,EAC3B,cAAc,EACd,SAAS,EACT,QAAQ,GACT,EAAE;IACD,cAAc,EAAE,KAAK,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAA;IAC3C,SAAS,EAAE,SAAS,CAAA;IACpB,QAAQ,EAAE,WAAW,EAAE,CAAA;CACxB,KAAK,IAAI,CAAA;AAEV,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,CAAC,MAAM,EAAE,WAAW,EAAE,CAAA;IAC9B,QAAQ,CAAC,QAAQ,EAAE,aAAa,CAAA;IAChC,QAAQ,CAAC,WAAW,EAChB;QACE,CAAC,SAAS,EAAE,MAAM,GAAG,yBAAyB,CAAA;KAC/C,GACD,yBAAyB,CAAA;CAC9B,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAuClD,CAAA"}

package/dist/elements/FieldSelect/index.js

@@ -9,16 +9,17 @@ import { useTranslation } from '../../providers/Translation/index.js';
 import { filterOutUploadFields } from '../../utilities/filterOutUploadFields.js';
 import { ReactSelect } from '../ReactSelect/index.js';
 import { reduceFieldOptions } from './reduceFieldOptions.js';
-import './index.scss';
+import './index.css';
 const baseClass = 'field-select';
 export const FieldSelect = t0 => {
-  const $ = _c(14);
+  const $ = _c(17);
   const {
     fields,
     onChange,
     permissions
   } = t0;
   const {
+    i18n,
     t
   } = useTranslation();
   const {
@@ -26,62 +27,87 @@ export const FieldSelect = t0 => {
     getFields
   } = useForm();
   let t1;
-  if ($[0] !== fields || $[1] !== getFields || $[2] !== permissions) {
+  if ($[0] !== fields || $[1] !== getFields || $[2] !== i18n || $[3] !== permissions) {
     t1 = () => reduceFieldOptions({
       fields: filterOutUploadFields(fields),
       formState: getFields(),
+      i18n,
       permissions
     });
     $[0] = fields;
     $[1] = getFields;
-    $[2] = permissions;
-    $[3] = t1;
+    $[2] = i18n;
+    $[3] = permissions;
+    $[4] = t1;
   } else {
-    t1 = $[3];
+    t1 = $[4];
   }
   const [options] = useState(t1);
   let t2;
-  if ($[4] !== dispatchFields || $[5] !== getFields || $[6] !== onChange || $[7] !== options || $[8] !== t) {
-    let t3;
-    if ($[10] !== dispatchFields || $[11] !== getFields || $[12] !== onChange) {
-      t3 = selected => onChange({
+  if ($[5] !== dispatchFields || $[6] !== getFields || $[7] !== onChange || $[8] !== options || $[9] !== t) {
+    const selectLabel = t("fields:selectFieldsToEdit");
+    const t3 = _jsx(FieldLabel, {
+      label: selectLabel
+    });
+    let t4;
+    if ($[11] !== t) {
+      t4 = t("general:clear");
+      $[11] = t;
+      $[12] = t4;
+    } else {
+      t4 = $[12];
+    }
+    let t5;
+    if ($[13] !== dispatchFields || $[14] !== getFields || $[15] !== onChange) {
+      t5 = selected => onChange({
         dispatchFields,
         formState: getFields(),
         selected
       });
-      $[10] = dispatchFields;
-      $[11] = getFields;
-      $[12] = onChange;
-      $[13] = t3;
+      $[13] = dispatchFields;
+      $[14] = getFields;
+      $[15] = onChange;
+      $[16] = t5;
     } else {
-      t3 = $[13];
+      t5 = $[16];
     }
     t2 = _jsxs("div", {
       className: baseClass,
-      children: [_jsx(FieldLabel, {
-        label: t("fields:selectFieldsToEdit")
-      }), _jsx(ReactSelect, {
-        getOptionValue: _temp,
+      children: [t3, _jsx(ReactSelect, {
+        "aria-label": selectLabel,
+        customProps: {
+          clearValueLabel: `${t4} ${selectLabel}`,
+          removeValueLabel: t("general:remove")
+        },
+        formatOptionLabel: _temp,
+        getOptionLabel: _temp2,
+        getOptionValue: _temp3,
         isMulti: true,
-        onChange: t3,
+        onChange: t5,
         options
       })]
     });
-    $[4] = dispatchFields;
-    $[5] = getFields;
-    $[6] = onChange;
-    $[7] = options;
-    $[8] = t;
-    $[9] = t2;
+    $[5] = dispatchFields;
+    $[6] = getFields;
+    $[7] = onChange;
+    $[8] = options;
+    $[9] = t;
+    $[10] = t2;
   } else {
-    t2 = $[9];
+    t2 = $[10];
   }
   return t2;
 };
 function _temp(option) {
-  if (typeof option.value === "object" && "path" in option.value) {
-    return String(option.value.path);
+  return option.label;
+}
+function _temp2(option_0) {
+  return option_0.plainTextLabel;
+}
+function _temp3(option_1) {
+  if (typeof option_1.value === "object" && "path" in option_1.value) {
+    return String(option_1.value.path);
   }
-  return String(option.value);
+  return String(option_1.value);
 }
 //# sourceMappingURL=index.js.map

package/dist/elements/FieldSelect/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","useState","FieldLabel","useForm","useTranslation","filterOutUploadFields","ReactSelect","reduceFieldOptions","baseClass","FieldSelect","t0","$","fields","onChange","permissions","t","dispatchFields","getFields","t1","formState","options","t2","t3","selected","_jsxs","className","children","_jsx","label","getOptionValue","_temp","isMulti","option","value","String","path"],"sources":["../../../src/elements/FieldSelect/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientField, FormState, SanitizedFieldPermissions } from 'payload'\n\nimport React, { useState } from 'react'\n\nimport type { FieldAction } from '../../forms/Form/types.js'\nimport type { FieldOption } from './reduceFieldOptions.js'\n\nimport { FieldLabel } from '../../fields/FieldLabel/index.js'\nimport { useForm } from '../../forms/Form/context.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { filterOutUploadFields } from '../../utilities/filterOutUploadFields.js'\nimport { ReactSelect } from '../ReactSelect/index.js'\nimport { reduceFieldOptions } from './reduceFieldOptions.js'\nimport './index.scss'\n\nconst baseClass = 'field-select'\n\nexport type OnFieldSelect = ({\n  dispatchFields,\n  formState,\n  selected,\n}: {\n  dispatchFields: React.Dispatch<FieldAction>\n  formState: FormState\n  selected: FieldOption[]\n}) => void\n\nexport type FieldSelectProps = {\n  readonly fields: ClientField[]\n  readonly onChange: OnFieldSelect\n  readonly permissions:\n    | {\n        [fieldName: string]: SanitizedFieldPermissions\n      }\n    | SanitizedFieldPermissions\n}\n\nexport const FieldSelect: React.FC<FieldSelectProps> = ({ fields, onChange, permissions }) => {\n  const { t } = useTranslation()\n  const { dispatchFields, getFields } = useForm()\n\n  const [options] = useState<FieldOption[]>(() =>\n    reduceFieldOptions({\n      fields: filterOutUploadFields(fields),\n      formState: getFields(),\n      permissions,\n    }),\n  )\n\n  return (\n    <div className={baseClass}>\n      <FieldLabel label={t('fields:selectFieldsToEdit')} />\n      <ReactSelect\n        getOptionValue={(option) => {\n          if (typeof option.value === 'object' && 'path' in option.value) {\n            return String(option.value.path)\n          }\n          return String(option.value)\n        }}\n        isMulti\n        onChange={(selected: FieldOption[]) =>\n          onChange({ dispatchFields, formState: getFields(), selected })\n        }\n        options={options}\n      />\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,OAAOC,KAAA,IAASC,QAAQ,QAAQ;AAKhC,SAASC,UAAU,QAAQ;AAC3B,SAASC,OAAO,QAAQ;AACxB,SAASC,cAAc,QAAQ;AAC/B,SAASC,qBAAqB,QAAQ;AACtC,SAASC,WAAW,QAAQ;AAC5B,SAASC,kBAAkB,QAAQ;AACnC,OAAO;AAEP,MAAMC,SAAA,GAAY;AAsBlB,OAAO,MAAMC,WAAA,GAA0CC,EAAA;EAAA,MAAAC,CAAA,GAAAZ,EAAA;EAAC;IAAAa,MAAA;IAAAC,QAAA;IAAAC;EAAA,IAAAJ,EAAiC;EACvF;IAAAK;EAAA,IAAcX,cAAA;EACd;IAAAY,cAAA;IAAAC;EAAA,IAAsCd,OAAA;EAAA,IAAAe,EAAA;EAAA,IAAAP,CAAA,QAAAC,MAAA,IAAAD,CAAA,QAAAM,SAAA,IAAAN,CAAA,QAAAG,WAAA;IAEII,EAAA,GAAAA,CAAA,KACxCX,kBAAA;MAAAK,MAAA,EACUP,qBAAA,CAAsBO,MAAA;MAAAO,SAAA,EACnBF,SAAA;MAAAH;IAAA,CAEb;IAAAH,CAAA,MAAAC,MAAA;IAAAD,CAAA,MAAAM,SAAA;IAAAN,CAAA,MAAAG,WAAA;IAAAH,CAAA,MAAAO,EAAA;EAAA;IAAAA,EAAA,GAAAP,CAAA;EAAA;EALF,OAAAS,OAAA,IAAkBnB,QAAA,CAAwBiB,EAKxC;EAAA,IAAAG,EAAA;EAAA,IAAAV,CAAA,QAAAK,cAAA,IAAAL,CAAA,QAAAM,SAAA,IAAAN,CAAA,QAAAE,QAAA,IAAAF,CAAA,QAAAS,OAAA,IAAAT,CAAA,QAAAI,CAAA;IAAA,IAAAO,EAAA;IAAA,IAAAX,CAAA,SAAAK,cAAA,IAAAL,CAAA,SAAAM,SAAA,IAAAN,CAAA,SAAAE,QAAA;MAccS,EAAA,GAAAC,QAAA,IACRV,QAAA;QAAAG,cAAA;QAAAG,SAAA,EAAsCF,SAAA;QAAAM;MAAA,CAAsB;MAAAZ,CAAA,OAAAK,cAAA;MAAAL,CAAA,OAAAM,SAAA;MAAAN,CAAA,OAAAE,QAAA;MAAAF,CAAA,OAAAW,EAAA;IAAA;MAAAA,EAAA,GAAAX,CAAA;IAAA;IAXlEU,EAAA,GAAAG,KAAA,CAAC;MAAAC,SAAA,EAAAjB,SAAA;MAAAkB,QAAA,GACCC,IAAA,CAAAzB,UAAA;QAAA0B,KAAA,EAAmBb,CAAA,CAAE;MAAA,C,GACrBY,IAAA,CAAArB,WAAA;QAAAuB,cAAA,EAAAC,KAAA;QAAAC,OAAA;QAAAlB,QAAA,EAQYS,EACoD;QAAAF;MAAA,C;;;;;;;;;;;SAXlEC,E;CAiBJ;AA9BuD,SAAAS,MAAAE,MAAA;EAAA,IAiBzC,OAAOA,MAAA,CAAAC,KAAA,KAAiB,YAAY,UAAUD,MAAA,CAAAC,KAAY;IAAA,OACrDC,MAAA,CAAOF,MAAA,CAAAC,KAAA,CAAAE,IAAiB;EAAA;EAAA,OAE1BD,MAAA,CAAOF,MAAA,CAAAC,KAAY;AAAA","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","useState","FieldLabel","useForm","useTranslation","filterOutUploadFields","ReactSelect","reduceFieldOptions","baseClass","FieldSelect","t0","$","fields","onChange","permissions","i18n","t","dispatchFields","getFields","t1","formState","options","t2","selectLabel","t3","_jsx","label","t4","t5","selected","_jsxs","className","children","customProps","clearValueLabel","removeValueLabel","formatOptionLabel","_temp","getOptionLabel","_temp2","getOptionValue","_temp3","isMulti","option","option_0","plainTextLabel","option_1","value","String","path"],"sources":["../../../src/elements/FieldSelect/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientField, FormState, SanitizedFieldPermissions } from 'payload'\n\nimport React, { useState } from 'react'\n\nimport type { FieldAction } from '../../forms/Form/types.js'\nimport type { FieldOption } from './reduceFieldOptions.js'\n\nimport { FieldLabel } from '../../fields/FieldLabel/index.js'\nimport { useForm } from '../../forms/Form/context.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { filterOutUploadFields } from '../../utilities/filterOutUploadFields.js'\nimport { ReactSelect } from '../ReactSelect/index.js'\nimport { reduceFieldOptions } from './reduceFieldOptions.js'\nimport './index.css'\n\nconst baseClass = 'field-select'\n\nexport type OnFieldSelect = ({\n  dispatchFields,\n  formState,\n  selected,\n}: {\n  dispatchFields: React.Dispatch<FieldAction>\n  formState: FormState\n  selected: FieldOption[]\n}) => void\n\nexport type FieldSelectProps = {\n  readonly fields: ClientField[]\n  readonly onChange: OnFieldSelect\n  readonly permissions:\n    | {\n        [fieldName: string]: SanitizedFieldPermissions\n      }\n    | SanitizedFieldPermissions\n}\n\nexport const FieldSelect: React.FC<FieldSelectProps> = ({ fields, onChange, permissions }) => {\n  const { i18n, t } = useTranslation()\n  const { dispatchFields, getFields } = useForm()\n\n  const [options] = useState<FieldOption[]>(() =>\n    reduceFieldOptions({\n      fields: filterOutUploadFields(fields),\n      formState: getFields(),\n      i18n,\n      permissions,\n    }),\n  )\n  const selectLabel = t('fields:selectFieldsToEdit')\n\n  return (\n    <div className={baseClass}>\n      <FieldLabel label={selectLabel} />\n      <ReactSelect\n        aria-label={selectLabel}\n        customProps={{\n          clearValueLabel: `${t('general:clear')} ${selectLabel}`,\n          removeValueLabel: t('general:remove'),\n        }}\n        formatOptionLabel={(option) => (option as FieldOption).label}\n        getOptionLabel={(option) => (option as FieldOption).plainTextLabel}\n        getOptionValue={(option) => {\n          if (typeof option.value === 'object' && 'path' in option.value) {\n            return String(option.value.path)\n          }\n          return String(option.value)\n        }}\n        isMulti\n        onChange={(selected: FieldOption[]) =>\n          onChange({ dispatchFields, formState: getFields(), selected })\n        }\n        options={options}\n      />\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/FieldSelect/reduceFieldOptions.d.ts

@@ -1,3 +1,4 @@
+import type { I18nClient } from '@payloadcms/translations';
 import type { ClientField, FormState, SanitizedFieldPermissions } from 'payload';
 export type SelectedField = {
     field: ClientField;
@@ -6,17 +7,20 @@ export type SelectedField = {
 };
 export type FieldOption = {
     label: React.ReactNode;
+    plainTextLabel: string;
     value: SelectedField;
 };
 export declare const ignoreFromBulkEdit: (field: ClientField) => boolean;
-export declare const reduceFieldOptions: ({ fields, formState, labelPrefix, parentPath, path, permissions, }: {
+export declare const reduceFieldOptions: ({ fields, formState, i18n, labelPrefix, parentPath, path, permissions, plainTextLabelPrefix, }: {
     readonly fields: ClientField[];
     readonly formState?: FormState;
+    readonly i18n?: I18nClient;
     readonly labelPrefix?: React.ReactNode;
     readonly parentPath?: string;
     readonly path?: string;
     readonly permissions: {
         [fieldName: string]: SanitizedFieldPermissions;
     } | SanitizedFieldPermissions;
+    readonly plainTextLabelPrefix?: string;
 }) => FieldOption[];
 //# sourceMappingURL=reduceFieldOptions.d.ts.map

package/dist/elements/FieldSelect/reduceFieldOptions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"reduceFieldOptions.d.ts","sourceRoot":"","sources":["../../../src/elements/FieldSelect/reduceFieldOptions.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAahF,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,WAAW,CAAA;IAClB,gBAAgB,EAAE,yBAAyB,CAAA;IAC3C,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,KAAK,EAAE,aAAa,CAAA;CACrB,CAAA;AAED,eAAO,MAAM,kBAAkB,UAAW,WAAW,KAAG,OAOrD,CAAA;AAEH,eAAO,MAAM,kBAAkB,uEAO5B;IACD,QAAQ,CAAC,MAAM,EAAE,WAAW,EAAE,CAAA;IAC9B,QAAQ,CAAC,SAAS,CAAC,EAAE,SAAS,CAAA;IAC9B,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtC,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAA;IAC5B,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,WAAW,EAChB;QACE,CAAC,SAAS,EAAE,MAAM,GAAG,yBAAyB,CAAA;KAC/C,GACD,yBAAyB,CAAA;CAC9B,KAAG,WAAW,EAkFd,CAAA"}
+{"version":3,"file":"reduceFieldOptions.d.ts","sourceRoot":"","sources":["../../../src/elements/FieldSelect/reduceFieldOptions.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAC1D,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAehF,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,WAAW,CAAA;IAClB,gBAAgB,EAAE,yBAAyB,CAAA;IAC3C,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,cAAc,EAAE,MAAM,CAAA;IACtB,KAAK,EAAE,aAAa,CAAA;CACrB,CAAA;AAgBD,eAAO,MAAM,kBAAkB,UAAW,WAAW,KAAG,OAOrD,CAAA;AAEH,eAAO,MAAM,kBAAkB,mGAS5B;IACD,QAAQ,CAAC,MAAM,EAAE,WAAW,EAAE,CAAA;IAC9B,QAAQ,CAAC,SAAS,CAAC,EAAE,SAAS,CAAA;IAC9B,QAAQ,CAAC,IAAI,CAAC,EAAE,UAAU,CAAA;IAC1B,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtC,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAA;IAC5B,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,WAAW,EAChB;QACE,CAAC,SAAS,EAAE,MAAM,GAAG,yBAAyB,CAAA;KAC/C,GACD,yBAAyB,CAAA;IAC7B,QAAQ,CAAC,oBAAoB,CAAC,EAAE,MAAM,CAAA;CACvC,KAAG,WAAW,EAwGd,CAAA"}

package/dist/elements/FieldSelect/reduceFieldOptions.js

@@ -1,14 +1,28 @@
-import { fieldAffectsData, fieldHasSubFields, fieldIsHiddenOrDisabled, getFieldPermissions, isFieldDisabled } from 'payload/shared';
+import { getTranslation } from '@payloadcms/translations';
+import { fieldAffectsData, fieldHasSubFields, fieldIsHiddenOrDisabled, getFieldPermissions, isFieldDisabled, toWords } from 'payload/shared';
 import { createNestedClientFieldPath } from '../../forms/Form/createNestedClientFieldPath.js';
 import { combineFieldLabel } from '../../utilities/combineFieldLabel.js';
+const getPlainTextFieldLabel = (field, i18n) => {
+  if ('label' in field && field.label) {
+    if (typeof field.label === 'string') {
+      return field.label;
+    }
+    if (i18n) {
+      return getTranslation(field.label, i18n);
+    }
+  }
+  return 'name' in field && field.name ? toWords(field.name) : '';
+};
 export const ignoreFromBulkEdit = field => Boolean((fieldAffectsData(field) || field.type === 'ui') && (isFieldDisabled(field, 'bulkEdit') || field.unique || fieldIsHiddenOrDisabled(field) || 'readOnly' in field && field.readOnly));
 export const reduceFieldOptions = ({
   fields,
   formState,
+  i18n,
   labelPrefix = null,
   parentPath = '',
   path = '',
-  permissions
+  permissions,
+  plainTextLabelPrefix = ''
 }) => {
   if (!fields) {
     return [];
@@ -31,8 +45,10 @@ export const reduceFieldOptions = ({
     }
     if (!(field.type === 'array' || field.type === 'blocks') && fieldHasSubFields(field)) {
       const fieldHasLabel = 'label' in field && field.label;
+      const fieldPlainTextLabel = getPlainTextFieldLabel(field, i18n);
       return [...fieldsToUse, ...reduceFieldOptions({
         fields: field.fields,
+        i18n,
         labelPrefix: fieldHasLabel ? combineFieldLabel({
           CustomLabel,
           field,
@@ -40,19 +56,24 @@ export const reduceFieldOptions = ({
         }) : labelPrefix,
         parentPath: path,
         path: createNestedClientFieldPath(path, field),
-        permissions: fieldPermissions
+        permissions: fieldPermissions,
+        plainTextLabelPrefix: fieldHasLabel ? [plainTextLabelPrefix, fieldPlainTextLabel].filter(Boolean).join(' > ') : plainTextLabelPrefix
       })];
     }
     if (field.type === 'tabs' && 'tabs' in field) {
       return [...fieldsToUse, ...field.tabs.reduce((tabFields, tab) => {
         if ('fields' in tab) {
           const isNamedTab = 'name' in tab && tab.name;
+          const namedTabPermissions = isNamedTab && fieldPermissions && fieldPermissions !== true ? fieldPermissions[tab.name] : undefined;
+          const tabPermissions = isNamedTab ? namedTabPermissions === true ? true : namedTabPermissions?.fields ?? fieldPermissions : fieldPermissions;
           return [...tabFields, ...reduceFieldOptions({
             fields: tab.fields,
+            i18n,
             labelPrefix,
             parentPath: path,
             path: isNamedTab ? createNestedClientFieldPath(path, tab) : path,
-            permissions: fieldPermissions
+            permissions: tabPermissions,
+            plainTextLabelPrefix
           })];
         }
       }, [])];
@@ -63,6 +84,7 @@ export const reduceFieldOptions = ({
         field,
         prefix: labelPrefix
       }),
+      plainTextLabel: [plainTextLabelPrefix, getPlainTextFieldLabel(field, i18n)].filter(Boolean).join(' > '),
       value: {
         field,
         fieldPermissions: fieldPermissions,

package/dist/elements/FieldSelect/reduceFieldOptions.js.map

@@ -1 +1 @@
-{"version":3,"file":"reduceFieldOptions.js","names":["fieldAffectsData","fieldHasSubFields","fieldIsHiddenOrDisabled","getFieldPermissions","isFieldDisabled","createNestedClientFieldPath","combineFieldLabel","ignoreFromBulkEdit","field","Boolean","type","unique","readOnly","reduceFieldOptions","fields","formState","labelPrefix","parentPath","path","permissions","CustomLabel","customComponents","Label","reduce","fieldsToUse","operation","hasOperationPermission","fieldPermissions","read","hasReadPermission","parentName","includes","split","length","fieldHasLabel","label","prefix","tabs","tabFields","tab","isNamedTab","name","formattedField","value"],"sources":["../../../src/elements/FieldSelect/reduceFieldOptions.ts"],"sourcesContent":["import type { ClientField, FormState, SanitizedFieldPermissions } from 'payload'\n\nimport {\n  fieldAffectsData,\n  fieldHasSubFields,\n  fieldIsHiddenOrDisabled,\n  getFieldPermissions,\n  isFieldDisabled,\n} from 'payload/shared'\n\nimport { createNestedClientFieldPath } from '../../forms/Form/createNestedClientFieldPath.js'\nimport { combineFieldLabel } from '../../utilities/combineFieldLabel.js'\n\nexport type SelectedField = {\n  field: ClientField\n  fieldPermissions: SanitizedFieldPermissions\n  path: string\n}\n\nexport type FieldOption = {\n  label: React.ReactNode\n  value: SelectedField\n}\n\nexport const ignoreFromBulkEdit = (field: ClientField): boolean =>\n  Boolean(\n    (fieldAffectsData(field) || field.type === 'ui') &&\n      (isFieldDisabled(field, 'bulkEdit') ||\n        field.unique ||\n        fieldIsHiddenOrDisabled(field) ||\n        ('readOnly' in field && field.readOnly)),\n  )\n\nexport const reduceFieldOptions = ({\n  fields,\n  formState,\n  labelPrefix = null,\n  parentPath = '',\n  path = '',\n  permissions,\n}: {\n  readonly fields: ClientField[]\n  readonly formState?: FormState\n  readonly labelPrefix?: React.ReactNode\n  readonly parentPath?: string\n  readonly path?: string\n  readonly permissions:\n    | {\n        [fieldName: string]: SanitizedFieldPermissions\n      }\n    | SanitizedFieldPermissions\n}): FieldOption[] => {\n  if (!fields) {\n    return []\n  }\n\n  const CustomLabel = formState?.[path]?.customComponents?.Label\n\n  return fields?.reduce((fieldsToUse, field) => {\n    const {\n      operation: hasOperationPermission,\n      permissions: fieldPermissions,\n      read: hasReadPermission,\n    } = getFieldPermissions({\n      field,\n      operation: 'update',\n      parentName: parentPath?.includes('.')\n        ? parentPath.split('.')[parentPath.split('.').length - 1]\n        : parentPath,\n      permissions,\n    })\n\n    // escape for a variety of reasons, include ui fields as they have `name`.\n    if (\n      (fieldAffectsData(field) || field.type === 'ui') &&\n      (isFieldDisabled(field, 'bulkEdit') ||\n        field.unique ||\n        fieldIsHiddenOrDisabled(field) ||\n        ('readOnly' in field && field.readOnly) ||\n        !hasOperationPermission ||\n        !hasReadPermission)\n    ) {\n      return fieldsToUse\n    }\n\n    if (!(field.type === 'array' || field.type === 'blocks') && fieldHasSubFields(field)) {\n      const fieldHasLabel = 'label' in field && field.label\n      return [\n        ...fieldsToUse,\n        ...reduceFieldOptions({\n          fields: field.fields,\n          labelPrefix: fieldHasLabel\n            ? combineFieldLabel({ CustomLabel, field, prefix: labelPrefix })\n            : labelPrefix,\n          parentPath: path,\n          path: createNestedClientFieldPath(path, field),\n          permissions: fieldPermissions,\n        }),\n      ]\n    }\n\n    if (field.type === 'tabs' && 'tabs' in field) {\n      return [\n        ...fieldsToUse,\n        ...field.tabs.reduce((tabFields, tab) => {\n          if ('fields' in tab) {\n            const isNamedTab = 'name' in tab && tab.name\n            return [\n              ...tabFields,\n              ...reduceFieldOptions({\n                fields: tab.fields,\n                labelPrefix,\n                parentPath: path,\n                path: isNamedTab ? createNestedClientFieldPath(path, tab as ClientField) : path,\n                permissions: fieldPermissions,\n              }),\n            ]\n          }\n        }, []),\n      ]\n    }\n\n    const formattedField: FieldOption = {\n      label: combineFieldLabel({ CustomLabel, field, prefix: labelPrefix }),\n      value: {\n        field,\n        fieldPermissions: fieldPermissions as SanitizedFieldPermissions,\n        path: createNestedClientFieldPath(path, field),\n      },\n    }\n\n    return [...fieldsToUse, formattedField]\n  }, [])\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"reduceFieldOptions.js","names":["getTranslation","fieldAffectsData","fieldHasSubFields","fieldIsHiddenOrDisabled","getFieldPermissions","isFieldDisabled","toWords","createNestedClientFieldPath","combineFieldLabel","getPlainTextFieldLabel","field","i18n","label","name","ignoreFromBulkEdit","Boolean","type","unique","readOnly","reduceFieldOptions","fields","formState","labelPrefix","parentPath","path","permissions","plainTextLabelPrefix","CustomLabel","customComponents","Label","reduce","fieldsToUse","operation","hasOperationPermission","fieldPermissions","read","hasReadPermission","parentName","includes","split","length","fieldHasLabel","fieldPlainTextLabel","prefix","filter","join","tabs","tabFields","tab","isNamedTab","namedTabPermissions","undefined","tabPermissions","formattedField","plainTextLabel","value"],"sources":["../../../src/elements/FieldSelect/reduceFieldOptions.ts"],"sourcesContent":["import type { I18nClient } from '@payloadcms/translations'\nimport type { ClientField, FormState, SanitizedFieldPermissions } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport {\n  fieldAffectsData,\n  fieldHasSubFields,\n  fieldIsHiddenOrDisabled,\n  getFieldPermissions,\n  isFieldDisabled,\n  toWords,\n} from 'payload/shared'\n\nimport { createNestedClientFieldPath } from '../../forms/Form/createNestedClientFieldPath.js'\nimport { combineFieldLabel } from '../../utilities/combineFieldLabel.js'\n\nexport type SelectedField = {\n  field: ClientField\n  fieldPermissions: SanitizedFieldPermissions\n  path: string\n}\n\nexport type FieldOption = {\n  label: React.ReactNode\n  plainTextLabel: string\n  value: SelectedField\n}\n\nconst getPlainTextFieldLabel = (field: ClientField, i18n?: I18nClient): string => {\n  if ('label' in field && field.label) {\n    if (typeof field.label === 'string') {\n      return field.label\n    }\n\n    if (i18n) {\n      return getTranslation(field.label, i18n)\n    }\n  }\n\n  return 'name' in field && field.name ? toWords(field.name) : ''\n}\n\nexport const ignoreFromBulkEdit = (field: ClientField): boolean =>\n  Boolean(\n    (fieldAffectsData(field) || field.type === 'ui') &&\n    (isFieldDisabled(field, 'bulkEdit') ||\n      field.unique ||\n      fieldIsHiddenOrDisabled(field) ||\n      ('readOnly' in field && field.readOnly)),\n  )\n\nexport const reduceFieldOptions = ({\n  fields,\n  formState,\n  i18n,\n  labelPrefix = null,\n  parentPath = '',\n  path = '',\n  permissions,\n  plainTextLabelPrefix = '',\n}: {\n  readonly fields: ClientField[]\n  readonly formState?: FormState\n  readonly i18n?: I18nClient\n  readonly labelPrefix?: React.ReactNode\n  readonly parentPath?: string\n  readonly path?: string\n  readonly permissions:\n    | {\n        [fieldName: string]: SanitizedFieldPermissions\n      }\n    | SanitizedFieldPermissions\n  readonly plainTextLabelPrefix?: string\n}): FieldOption[] => {\n  if (!fields) {\n    return []\n  }\n\n  const CustomLabel = formState?.[path]?.customComponents?.Label\n\n  return fields?.reduce((fieldsToUse, field) => {\n    const {\n      operation: hasOperationPermission,\n      permissions: fieldPermissions,\n      read: hasReadPermission,\n    } = getFieldPermissions({\n      field,\n      operation: 'update',\n      parentName: parentPath?.includes('.')\n        ? parentPath.split('.')[parentPath.split('.').length - 1]\n        : parentPath,\n      permissions,\n    })\n\n    // escape for a variety of reasons, include ui fields as they have `name`.\n    if (\n      (fieldAffectsData(field) || field.type === 'ui') &&\n      (isFieldDisabled(field, 'bulkEdit') ||\n        field.unique ||\n        fieldIsHiddenOrDisabled(field) ||\n        ('readOnly' in field && field.readOnly) ||\n        !hasOperationPermission ||\n        !hasReadPermission)\n    ) {\n      return fieldsToUse\n    }\n\n    if (!(field.type === 'array' || field.type === 'blocks') && fieldHasSubFields(field)) {\n      const fieldHasLabel = 'label' in field && field.label\n      const fieldPlainTextLabel = getPlainTextFieldLabel(field, i18n)\n      return [\n        ...fieldsToUse,\n        ...reduceFieldOptions({\n          fields: field.fields,\n          i18n,\n          labelPrefix: fieldHasLabel\n            ? combineFieldLabel({ CustomLabel, field, prefix: labelPrefix })\n            : labelPrefix,\n          parentPath: path,\n          path: createNestedClientFieldPath(path, field),\n          permissions: fieldPermissions,\n          plainTextLabelPrefix: fieldHasLabel\n            ? [plainTextLabelPrefix, fieldPlainTextLabel].filter(Boolean).join(' > ')\n            : plainTextLabelPrefix,\n        }),\n      ]\n    }\n\n    if (field.type === 'tabs' && 'tabs' in field) {\n      return [\n        ...fieldsToUse,\n        ...field.tabs.reduce((tabFields, tab) => {\n          if ('fields' in tab) {\n            const isNamedTab = 'name' in tab && tab.name\n\n            const namedTabPermissions =\n              isNamedTab && fieldPermissions && fieldPermissions !== true\n                ? fieldPermissions[tab.name]\n                : undefined\n\n            const tabPermissions = isNamedTab\n              ? namedTabPermissions === true\n                ? true\n                : (namedTabPermissions?.fields ?? fieldPermissions)\n              : fieldPermissions\n\n            return [\n              ...tabFields,\n              ...reduceFieldOptions({\n                fields: tab.fields,\n                i18n,\n                labelPrefix,\n                parentPath: path,\n                path: isNamedTab ? createNestedClientFieldPath(path, tab as ClientField) : path,\n                permissions: tabPermissions,\n                plainTextLabelPrefix,\n              }),\n            ]\n          }\n        }, []),\n      ]\n    }\n\n    const formattedField: FieldOption = {\n      label: combineFieldLabel({ CustomLabel, field, prefix: labelPrefix }),\n      plainTextLabel: [plainTextLabelPrefix, getPlainTextFieldLabel(field, i18n)]\n        .filter(Boolean)\n        .join(' > '),\n      value: {\n        field,\n        fieldPermissions: fieldPermissions as SanitizedFieldPermissions,\n        path: createNestedClientFieldPath(path, field),\n      },\n    }\n\n    return [...fieldsToUse, formattedField]\n  }, [])\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/FileDetails/DraggableFileDetails/index.css

@@ -0,0 +1,32 @@
+@layer payload-default {
+  .file-details-draggable {
+    display: flex;
+    gap: var(--spacer-2);
+    align-items: center;
+    background: var(--color-bg-secondary);
+    border-radius: var(--radius-small);
+    padding: var(--spacer-2-5);
+  }
+
+  .file-details-draggable--drag-wrapper {
+    display: flex;
+    gap: var(--spacer-2);
+    align-items: center;
+  }
+
+  .file-details-draggable__thumbnail {
+    max-width: var(--spacer-4);
+  }
+
+  .file-details-draggable__actions {
+    flex-grow: 2;
+    display: flex;
+    gap: var(--spacer-2);
+    align-items: center;
+    justify-content: flex-end;
+  }
+
+  .file-details-draggable__remove.btn--style-icon-label {
+    margin: 0;
+  }
+}

package/dist/elements/FileDetails/DraggableFileDetails/index.d.ts

@@ -1,17 +1,17 @@
 import React from 'react';
-import './index.scss';
+import './index.css';
 import type { Data, FileSizes, SanitizedCollectionConfig } from 'payload';
 export type DraggableFileDetailsProps = {
     collectionSlug: string;
     customUploadActions?: React.ReactNode[];
     doc: {
-        sizes?: FileSizes;
+        variants?: FileSizes;
     } & Data;
     enableAdjustments?: boolean;
     hasImageSizes?: boolean;
     hasMany: boolean;
     hideRemoveFile?: boolean;
-    imageCacheTag?: string;
+    imageCacheTag?: false | string;
     isSortable?: boolean;
     removeItem?: (index: number) => void;
     rowIndex: number;