@payloadcms/ui 4.0.0-internal.c2b57ce → 4.0.0-internal.c3ac604

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,CAiCA,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,
@@ -17,21 +19,15 @@ export const FieldDiffContainer = args => {
   } = args;
   return /*#__PURE__*/_jsxs("div", {
     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%'
-    },
     children: [/*#__PURE__*/_jsxs(FieldDiffLabel, {
       children: [locale && /*#__PURE__*/_jsx("span", {
         className: `${baseClass}__locale-label`,
         children: locale
-      }), typeof label !== 'function' && getTranslation(label || '', i18n)]
+      }), label !== false && typeof label !== 'function' && getTranslation(label || '', i18n)]
     }), /*#__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","_jsxs","_jsx","style","undefined"],"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  return (\n    <div\n      className={`${baseClass}-container${className ? ` ${className}` : ''} nested-level-${nestingLevel}`}\n    >\n      <FieldDiffLabel>\n        {locale && <span className={`${baseClass}__locale-label`}>{locale}</span>}\n        {label !== false && typeof label !== 'function' && getTranslation(label || '', i18n)}\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,oBACEQ,KAAA,CAAC;IACCP,SAAA,EAAW,GAAGJ,SAAA,aAAsBI,SAAA,GAAY,IAAIA,SAAA,EAAW,GAAG,mBAAmBK,YAAA,EAAc;4BAEnGE,KAAA,CAACZ,cAAA;iBACES,MAAA,iBAAUI,IAAA,CAAC;QAAKR,SAAA,EAAW,GAAGJ,SAAA,gBAAyB;kBAAGQ;UAC1DD,KAAA,KAAU,SAAS,OAAOA,KAAA,KAAU,cAAcV,cAAA,CAAeU,KAAA,IAAS,IAAID,IAAA;qBAEjFK,KAAA,CAAC;MACCP,SAAA,EAAW,GAAGJ,SAAA,UAAmB;MACjCa,KAAA,EACEJ,YAAA,GACK;QACC,wBAAwB,cAAcA,YAAA,GAAeR,YAAA,kBAA8BQ,YAAA,GAAeR,YAAA;MACpG,IACAa,SAAA;iBAGLT,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-family: var(--text-body-medium-strong-font-family);
+    font-size: var(--text-body-medium-strong-font-size);
+    font-weight: var(--text-body-medium-strong-font-weight);
+    line-height: var(--text-body-medium-strong-line-height);
+    letter-spacing: var(--text-body-medium-strong-letter-spacing);
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+    align-items: center;
+    color: var(--color-text);
+  }
+
+  @media (max-width: 768px) {
+    .field-diff-label {
+      height: min-content;
+    }
+  }
+}

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import './index.scss';
+import './index.css';
 export declare const FieldDiffLabel: React.FC<{
     children?: React.ReactNode;
 }>;

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,CAAA;CAAE,CAEnE,CAAA"}

package/dist/elements/FieldDiffLabel/index.js

@@ -1,6 +1,6 @@
 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 = ({
   children

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","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 }> = ({ 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":[]}

package/dist/elements/FieldSelect/index.css

@@ -1,5 +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/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,GAAI,OAAO,WAAW,KAAG,OAOrD,CAAA;AAEH,eAAO,MAAM,kBAAkB,GAAI,oEAOhC;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,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,EA8Fd,CAAA"}

package/dist/elements/FieldSelect/reduceFieldOptions.js

@@ -47,12 +47,14 @@ export const reduceFieldOptions = ({
       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,
             labelPrefix,
             parentPath: path,
             path: isNamedTab ? createNestedClientFieldPath(path, tab) : path,
-            permissions: fieldPermissions
+            permissions: tabPermissions
           })];
         }
       }, [])];

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":["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","namedTabPermissions","undefined","tabPermissions","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\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                labelPrefix,\n                parentPath: path,\n                path: isNamedTab ? createNestedClientFieldPath(path, tab as ClientField) : path,\n                permissions: tabPermissions,\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":[]}

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

@@ -0,0 +1,143 @@
+import { describe, expect, it, vi } from 'vitest';
+// Mock the JSX label builder: irrelevant to permission logic and avoids needing a React runtime here.
+vi.mock('../../utilities/combineFieldLabel.js', () => ({
+  combineFieldLabel: () => null
+}));
+import { reduceFieldOptions } from './reduceFieldOptions.js';
+const text = name => ({
+  name,
+  type: 'text'
+});
+const namesOf = options => options.map(option => 'name' in option.value.field ? option.value.field.name : undefined);
+const optionsFor = (fields, permissions) => reduceFieldOptions({
+  fields,
+  permissions: permissions
+});
+// Granted sets the operation to `true`; denied omits the key, mirroring `populateFieldPermissions`.
+const granted = {
+  create: true,
+  read: true,
+  update: true
+};
+const readOnly = {
+  create: true,
+  read: true
+};
+describe('reduceFieldOptions', () => {
+  it('excludes a restricted field inside a named tab while keeping its clean siblings', () => {
+    const fields = [{
+      type: 'tabs',
+      tabs: [{
+        name: 'namedTab',
+        fields: [text('okInTab'), text('restrictedInTab')]
+      }]
+    }];
+    const permissions = {
+      namedTab: {
+        ...granted,
+        fields: {
+          okInTab: granted,
+          restrictedInTab: readOnly
+        }
+      }
+    };
+    const options = optionsFor(fields, permissions);
+    const names = namesOf(options);
+    expect(names).toContain('okInTab');
+    expect(names).not.toContain('restrictedInTab');
+  });
+  it('excludes a restricted field inside a nested named tab', () => {
+    const fields = [{
+      type: 'tabs',
+      tabs: [{
+        name: 'outerTab',
+        fields: [{
+          type: 'tabs',
+          tabs: [{
+            name: 'innerTab',
+            fields: [text('deepOk'), text('deepRestricted')]
+          }]
+        }]
+      }]
+    }];
+    const permissions = {
+      outerTab: {
+        ...granted,
+        fields: {
+          innerTab: {
+            ...granted,
+            fields: {
+              deepOk: granted,
+              deepRestricted: readOnly
+            }
+          }
+        }
+      }
+    };
+    const options = optionsFor(fields, permissions);
+    const names = namesOf(options);
+    expect(names).toContain('deepOk');
+    expect(names).not.toContain('deepRestricted');
+  });
+  it('only affects the named tab that contains the restricted field', () => {
+    const fields = [{
+      type: 'tabs',
+      tabs: [{
+        name: 'cleanTab',
+        fields: [text('cleanField')]
+      }, {
+        name: 'restrictedHostTab',
+        fields: [text('restrictedField')]
+      }]
+    }];
+    const permissions = {
+      cleanTab: {
+        ...granted,
+        fields: {
+          cleanField: granted
+        }
+      },
+      restrictedHostTab: {
+        ...granted,
+        fields: {
+          restrictedField: readOnly
+        }
+      }
+    };
+    const options = optionsFor(fields, permissions);
+    const names = namesOf(options);
+    expect(names).toContain('cleanField');
+    expect(names).not.toContain('restrictedField');
+  });
+  it('includes every named-tab field when permissions are fully granted', () => {
+    const fields = [{
+      type: 'tabs',
+      tabs: [{
+        name: 'namedTab',
+        fields: [text('a'), text('b')]
+      }]
+    }];
+    const options = optionsFor(fields, true);
+    const names = namesOf(options);
+    expect(names).toEqual(expect.arrayContaining(['a', 'b']));
+  });
+  it('applies parent permissions to an unnamed tab and excludes its restricted fields', () => {
+    const fields = [{
+      type: 'tabs',
+      tabs: [{
+        label: 'Unnamed',
+        fields: [text('okAtRoot'), text('restrictedAtRoot')]
+      }]
+    }];
+    // Unnamed tabs share the parent's permission map, so subfields resolve at the parent level.
+    const permissions = {
+      okAtRoot: granted,
+      restrictedAtRoot: readOnly
+    };
+    const options = optionsFor(fields, permissions);
+    const names = namesOf(options);
+    expect(names).toContain('okAtRoot');
+    expect(names).not.toContain('restrictedAtRoot');
+  });
+});
+//# sourceMappingURL=reduceFieldOptions.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"reduceFieldOptions.spec.js","names":["describe","expect","it","vi","mock","combineFieldLabel","reduceFieldOptions","text","name","type","namesOf","options","map","option","value","field","undefined","optionsFor","fields","permissions","granted","create","read","update","readOnly","tabs","namedTab","okInTab","restrictedInTab","names","toContain","not","outerTab","innerTab","deepOk","deepRestricted","cleanTab","cleanField","restrictedHostTab","restrictedField","toEqual","arrayContaining","label","okAtRoot","restrictedAtRoot"],"sources":["../../../src/elements/FieldSelect/reduceFieldOptions.spec.ts"],"sourcesContent":["import type { ClientField } from 'payload'\n\nimport { describe, expect, it, vi } from 'vitest'\n\nimport type { FieldOption } from './reduceFieldOptions.js'\n\n// Mock the JSX label builder: irrelevant to permission logic and avoids needing a React runtime here.\nvi.mock('../../utilities/combineFieldLabel.js', () => ({\n  combineFieldLabel: () => null,\n}))\n\nimport { reduceFieldOptions } from './reduceFieldOptions.js'\n\nconst text = (name: string): ClientField => ({ name, type: 'text' }) as ClientField\n\nconst namesOf = (options: FieldOption[]): (string | undefined)[] =>\n  options.map((option) => ('name' in option.value.field ? option.value.field.name : undefined))\n\n// A denied field omits the operation key at runtime, which `SanitizedFieldPermissions` can't express — cast at the boundary.\ntype Permissions = Parameters<typeof reduceFieldOptions>[0]['permissions']\nconst optionsFor = (fields: ClientField[], permissions: unknown): FieldOption[] =>\n  reduceFieldOptions({ fields, permissions: permissions as Permissions })\n\n// Granted sets the operation to `true`; denied omits the key, mirroring `populateFieldPermissions`.\nconst granted = { create: true, read: true, update: true }\nconst readOnly = { create: true, read: true }\n\ndescribe('reduceFieldOptions', () => {\n  it('excludes a restricted field inside a named tab while keeping its clean siblings', () => {\n    const fields: ClientField[] = [\n      {\n        type: 'tabs',\n        tabs: [{ name: 'namedTab', fields: [text('okInTab'), text('restrictedInTab')] }],\n      } as ClientField,\n    ]\n\n    const permissions = {\n      namedTab: {\n        ...granted,\n        fields: {\n          okInTab: granted,\n          restrictedInTab: readOnly,\n        },\n      },\n    }\n\n    const options = optionsFor(fields, permissions)\n    const names = namesOf(options)\n\n    expect(names).toContain('okInTab')\n    expect(names).not.toContain('restrictedInTab')\n  })\n\n  it('excludes a restricted field inside a nested named tab', () => {\n    const fields: ClientField[] = [\n      {\n        type: 'tabs',\n        tabs: [\n          {\n            name: 'outerTab',\n            fields: [\n              {\n                type: 'tabs',\n                tabs: [{ name: 'innerTab', fields: [text('deepOk'), text('deepRestricted')] }],\n              },\n            ],\n          },\n        ],\n      } as ClientField,\n    ]\n\n    const permissions = {\n      outerTab: {\n        ...granted,\n        fields: {\n          innerTab: {\n            ...granted,\n            fields: {\n              deepOk: granted,\n              deepRestricted: readOnly,\n            },\n          },\n        },\n      },\n    }\n\n    const options = optionsFor(fields, permissions)\n    const names = namesOf(options)\n\n    expect(names).toContain('deepOk')\n    expect(names).not.toContain('deepRestricted')\n  })\n\n  it('only affects the named tab that contains the restricted field', () => {\n    const fields: ClientField[] = [\n      {\n        type: 'tabs',\n        tabs: [\n          { name: 'cleanTab', fields: [text('cleanField')] },\n          { name: 'restrictedHostTab', fields: [text('restrictedField')] },\n        ],\n      } as ClientField,\n    ]\n\n    const permissions = {\n      cleanTab: { ...granted, fields: { cleanField: granted } },\n      restrictedHostTab: { ...granted, fields: { restrictedField: readOnly } },\n    }\n\n    const options = optionsFor(fields, permissions)\n    const names = namesOf(options)\n\n    expect(names).toContain('cleanField')\n    expect(names).not.toContain('restrictedField')\n  })\n\n  it('includes every named-tab field when permissions are fully granted', () => {\n    const fields: ClientField[] = [\n      {\n        type: 'tabs',\n        tabs: [{ name: 'namedTab', fields: [text('a'), text('b')] }],\n      } as ClientField,\n    ]\n\n    const options = optionsFor(fields, true)\n    const names = namesOf(options)\n\n    expect(names).toEqual(expect.arrayContaining(['a', 'b']))\n  })\n\n  it('applies parent permissions to an unnamed tab and excludes its restricted fields', () => {\n    const fields: ClientField[] = [\n      {\n        type: 'tabs',\n        tabs: [{ label: 'Unnamed', fields: [text('okAtRoot'), text('restrictedAtRoot')] }],\n      } as ClientField,\n    ]\n\n    // Unnamed tabs share the parent's permission map, so subfields resolve at the parent level.\n    const permissions = {\n      okAtRoot: granted,\n      restrictedAtRoot: readOnly,\n    }\n\n    const options = optionsFor(fields, permissions)\n    const names = namesOf(options)\n\n    expect(names).toContain('okAtRoot')\n    expect(names).not.toContain('restrictedAtRoot')\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,5 +1,5 @@
 import React from 'react';
-import './index.scss';
+import './index.css';
 import type { Data, FileSizes, SanitizedCollectionConfig } from 'payload';
 export type DraggableFileDetailsProps = {
     collectionSlug: string;
@@ -11,7 +11,7 @@ export type DraggableFileDetailsProps = {
     hasImageSizes?: boolean;
     hasMany: boolean;
     hideRemoveFile?: boolean;
-    imageCacheTag?: string;
+    imageCacheTag?: false | string;
     isSortable?: boolean;
     removeItem?: (index: number) => void;
     rowIndex: number;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/FileDetails/DraggableFileDetails/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,cAAc,CAAA;AAIrB,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAOzE,MAAM,MAAM,yBAAyB,GAAG;IACtC,cAAc,EAAE,MAAM,CAAA;IACtB,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;IACvC,GAAG,EAAE;QACH,KAAK,CAAC,EAAE,SAAS,CAAA;KAClB,GAAG,IAAI,CAAA;IACR,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,OAAO,EAAE,OAAO,CAAA;IAChB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,QAAQ,EAAE,MAAM,CAAA;IAChB,YAAY,EAAE,yBAAyB,CAAC,QAAQ,CAAC,CAAA;CAClD,CAAA;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CA4EpE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/FileDetails/DraggableFileDetails/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,aAAa,CAAA;AAIpB,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAOzE,MAAM,MAAM,yBAAyB,GAAG;IACtC,cAAc,EAAE,MAAM,CAAA;IACtB,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;IACvC,GAAG,EAAE;QACH,KAAK,CAAC,EAAE,SAAS,CAAA;KAClB,GAAG,IAAI,CAAA;IACR,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,OAAO,EAAE,OAAO,CAAA;IAChB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,aAAa,CAAC,EAAE,KAAK,GAAG,MAAM,CAAA;IAC9B,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,QAAQ,EAAE,MAAM,CAAA;IAChB,YAAY,EAAE,yBAAyB,CAAC,QAAQ,CAAC,CAAA;CAClD,CAAA;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CA6EpE,CAAA"}

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

@@ -5,14 +5,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { Button } from '../../Button/index.js';
 import { Thumbnail } from '../../Thumbnail/index.js';
-import './index.scss';
+import './index.css';
 const baseClass = 'file-details-draggable';
 import { DraggableSortableItem } from '../../../elements/DraggableSortable/DraggableSortableItem/index.js';
 import { AlignJustifiedIcon } from '../../../icons/AlignJustified/index.js';
 import { EditIcon } from '../../../icons/Edit/index.js';
 import { useDocumentDrawer } from '../../DocumentDrawer/index.js';
 export const DraggableFileDetails = props => {
-  const $ = _c(20);
+  const $ = _c(21);
   const {
     collectionSlug,
     doc,
@@ -43,7 +43,7 @@ export const DraggableFileDetails = props => {
   }
   const [DocumentDrawer, DocumentDrawerToggler] = useDocumentDrawer(t0);
   let t1;
-  if ($[3] !== DocumentDrawer || $[4] !== DocumentDrawerToggler || $[5] !== collectionSlug || $[6] !== doc || $[7] !== filename || $[8] !== hideRemoveFile || $[9] !== imageCacheTag || $[10] !== isSortable || $[11] !== removeItem || $[12] !== rowIndex || $[13] !== thumbnailURL || $[14] !== uploadConfig || $[15] !== url) {
+  if ($[3] !== DocumentDrawer || $[4] !== DocumentDrawerToggler || $[5] !== collectionSlug || $[6] !== doc || $[7] !== filename || $[8] !== hideRemoveFile || $[9] !== id || $[10] !== imageCacheTag || $[11] !== isSortable || $[12] !== removeItem || $[13] !== rowIndex || $[14] !== thumbnailURL || $[15] !== uploadConfig || $[16] !== url) {
     t1 = draggableSortableItemProps => _jsxs("div", {
       className: [baseClass, draggableSortableItemProps && isSortable && `${baseClass}--has-drag-handle`].filter(Boolean).join(" "),
       ref: draggableSortableItemProps.setNodeRef,
@@ -82,35 +82,36 @@ export const DraggableFileDetails = props => {
           round: true
         })]
       })]
-    });
+    }, id);
     $[3] = DocumentDrawer;
     $[4] = DocumentDrawerToggler;
     $[5] = collectionSlug;
     $[6] = doc;
     $[7] = filename;
     $[8] = hideRemoveFile;
-    $[9] = imageCacheTag;
-    $[10] = isSortable;
-    $[11] = removeItem;
-    $[12] = rowIndex;
-    $[13] = thumbnailURL;
-    $[14] = uploadConfig;
-    $[15] = url;
-    $[16] = t1;
+    $[9] = id;
+    $[10] = imageCacheTag;
+    $[11] = isSortable;
+    $[12] = removeItem;
+    $[13] = rowIndex;
+    $[14] = thumbnailURL;
+    $[15] = uploadConfig;
+    $[16] = url;
+    $[17] = t1;
   } else {
-    t1 = $[16];
+    t1 = $[17];
   }
   let t2;
-  if ($[17] !== id || $[18] !== t1) {
+  if ($[18] !== id || $[19] !== t1) {
     t2 = _jsx(DraggableSortableItem, {
       id,
       children: t1
     }, id);
-    $[17] = id;
-    $[18] = t1;
-    $[19] = t2;
+    $[18] = id;
+    $[19] = t1;
+    $[20] = t2;
   } else {
-    t2 = $[19];
+    t2 = $[20];
   }
   return t2;
 };

package/dist/elements/FileDetails/DraggableFileDetails/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","Button","Thumbnail","baseClass","DraggableSortableItem","AlignJustifiedIcon","EditIcon","useDocumentDrawer","DraggableFileDetails","props","$","collectionSlug","doc","hideRemoveFile","imageCacheTag","isSortable","removeItem","rowIndex","uploadConfig","id","filename","thumbnailURL","url","t0","DocumentDrawer","DocumentDrawerToggler","t1","draggableSortableItemProps","_jsxs","className","filter","Boolean","join","ref","setNodeRef","style","transform","transition","zIndex","isDragging","undefined","children","_jsx","attributes","listeners","fileSrc","buttonStyle","icon","onClick","round","t2"],"sources":["../../../../src/elements/FileDetails/DraggableFileDetails/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { Button } from '../../Button/index.js'\nimport { Thumbnail } from '../../Thumbnail/index.js'\nimport './index.scss'\n\nconst baseClass = 'file-details-draggable'\n\nimport type { Data, FileSizes, SanitizedCollectionConfig } from 'payload'\n\nimport { DraggableSortableItem } from '../../../elements/DraggableSortable/DraggableSortableItem/index.js'\nimport { AlignJustifiedIcon } from '../../../icons/AlignJustified/index.js'\nimport { EditIcon } from '../../../icons/Edit/index.js'\nimport { useDocumentDrawer } from '../../DocumentDrawer/index.js'\n\nexport type DraggableFileDetailsProps = {\n  collectionSlug: string\n  customUploadActions?: React.ReactNode[]\n  doc: {\n    sizes?: FileSizes\n  } & Data\n  enableAdjustments?: boolean\n  hasImageSizes?: boolean\n  hasMany: boolean\n  hideRemoveFile?: boolean\n  imageCacheTag?: string\n  isSortable?: boolean\n  removeItem?: (index: number) => void\n  rowIndex: number\n  uploadConfig: SanitizedCollectionConfig['upload']\n}\n\nexport const DraggableFileDetails: React.FC<DraggableFileDetailsProps> = (props) => {\n  const {\n    collectionSlug,\n    doc,\n    hideRemoveFile,\n    imageCacheTag,\n    isSortable,\n    removeItem,\n    rowIndex,\n    uploadConfig,\n  } = props\n\n  const { id, filename, thumbnailURL, url } = doc\n\n  const [DocumentDrawer, DocumentDrawerToggler] = useDocumentDrawer({\n    id,\n    collectionSlug,\n  })\n\n  return (\n    <DraggableSortableItem id={id} key={id}>\n      {(draggableSortableItemProps) => (\n        <div\n          className={[\n            baseClass,\n            draggableSortableItemProps && isSortable && `${baseClass}--has-drag-handle`,\n          ]\n            .filter(Boolean)\n            .join(' ')}\n          ref={draggableSortableItemProps.setNodeRef}\n          style={{\n            transform: draggableSortableItemProps.transform,\n            transition: draggableSortableItemProps.transition,\n            zIndex: draggableSortableItemProps.isDragging ? 1 : undefined,\n          }}\n        >\n          <div className={`${baseClass}--drag-wrapper`}>\n            {isSortable && draggableSortableItemProps && (\n              <div\n                className={`${baseClass}__drag`}\n                {...draggableSortableItemProps.attributes}\n                {...draggableSortableItemProps.listeners}\n              >\n                <AlignJustifiedIcon />\n              </div>\n            )}\n            <Thumbnail\n              className={`${baseClass}__thumbnail`}\n              collectionSlug={collectionSlug}\n              doc={doc}\n              fileSrc={thumbnailURL || url}\n              imageCacheTag={imageCacheTag}\n              uploadConfig={uploadConfig}\n            />\n          </div>\n          <div className={`${baseClass}__main-detail`}>{filename}</div>\n\n          <div className={`${baseClass}__actions`}>\n            <DocumentDrawer />\n            <DocumentDrawerToggler>\n              <EditIcon />\n            </DocumentDrawerToggler>\n            {!hideRemoveFile && removeItem && (\n              <Button\n                buttonStyle=\"ghost\"\n                className={`${baseClass}__remove`}\n                icon=\"x\"\n                onClick={() => removeItem(rowIndex)}\n                round\n              />\n            )}\n          </div>\n        </div>\n      )}\n    </DraggableSortableItem>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","Button","Thumbnail","baseClass","DraggableSortableItem","AlignJustifiedIcon","EditIcon","useDocumentDrawer","DraggableFileDetails","props","$","collectionSlug","doc","hideRemoveFile","imageCacheTag","isSortable","removeItem","rowIndex","uploadConfig","id","filename","thumbnailURL","url","t0","DocumentDrawer","DocumentDrawerToggler","t1","draggableSortableItemProps","_jsxs","className","filter","Boolean","join","ref","setNodeRef","style","transform","transition","zIndex","isDragging","undefined","children","_jsx","attributes","listeners","fileSrc","buttonStyle","icon","onClick","round","t2"],"sources":["../../../../src/elements/FileDetails/DraggableFileDetails/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { Button } from '../../Button/index.js'\nimport { Thumbnail } from '../../Thumbnail/index.js'\nimport './index.css'\n\nconst baseClass = 'file-details-draggable'\n\nimport type { Data, FileSizes, SanitizedCollectionConfig } from 'payload'\n\nimport { DraggableSortableItem } from '../../../elements/DraggableSortable/DraggableSortableItem/index.js'\nimport { AlignJustifiedIcon } from '../../../icons/AlignJustified/index.js'\nimport { EditIcon } from '../../../icons/Edit/index.js'\nimport { useDocumentDrawer } from '../../DocumentDrawer/index.js'\n\nexport type DraggableFileDetailsProps = {\n  collectionSlug: string\n  customUploadActions?: React.ReactNode[]\n  doc: {\n    sizes?: FileSizes\n  } & Data\n  enableAdjustments?: boolean\n  hasImageSizes?: boolean\n  hasMany: boolean\n  hideRemoveFile?: boolean\n  imageCacheTag?: false | string\n  isSortable?: boolean\n  removeItem?: (index: number) => void\n  rowIndex: number\n  uploadConfig: SanitizedCollectionConfig['upload']\n}\n\nexport const DraggableFileDetails: React.FC<DraggableFileDetailsProps> = (props) => {\n  const {\n    collectionSlug,\n    doc,\n    hideRemoveFile,\n    imageCacheTag,\n    isSortable,\n    removeItem,\n    rowIndex,\n    uploadConfig,\n  } = props\n\n  const { id, filename, thumbnailURL, url } = doc\n\n  const [DocumentDrawer, DocumentDrawerToggler] = useDocumentDrawer({\n    id,\n    collectionSlug,\n  })\n\n  return (\n    <DraggableSortableItem id={id} key={id}>\n      {(draggableSortableItemProps) => (\n        <div\n          className={[\n            baseClass,\n            draggableSortableItemProps && isSortable && `${baseClass}--has-drag-handle`,\n          ]\n            .filter(Boolean)\n            .join(' ')}\n          key={id}\n          ref={draggableSortableItemProps.setNodeRef}\n          style={{\n            transform: draggableSortableItemProps.transform,\n            transition: draggableSortableItemProps.transition,\n            zIndex: draggableSortableItemProps.isDragging ? 1 : undefined,\n          }}\n        >\n          <div className={`${baseClass}--drag-wrapper`}>\n            {isSortable && draggableSortableItemProps && (\n              <div\n                className={`${baseClass}__drag`}\n                {...draggableSortableItemProps.attributes}\n                {...draggableSortableItemProps.listeners}\n              >\n                <AlignJustifiedIcon />\n              </div>\n            )}\n            <Thumbnail\n              className={`${baseClass}__thumbnail`}\n              collectionSlug={collectionSlug}\n              doc={doc}\n              fileSrc={thumbnailURL || url}\n              imageCacheTag={imageCacheTag}\n              uploadConfig={uploadConfig}\n            />\n          </div>\n          <div className={`${baseClass}__main-detail`}>{filename}</div>\n\n          <div className={`${baseClass}__actions`}>\n            <DocumentDrawer />\n            <DocumentDrawerToggler>\n              <EditIcon />\n            </DocumentDrawerToggler>\n            {!hideRemoveFile && removeItem && (\n              <Button\n                buttonStyle=\"ghost\"\n                className={`${baseClass}__remove`}\n                icon=\"x\"\n                onClick={() => removeItem(rowIndex)}\n                round\n              />\n            )}\n          </div>\n        </div>\n      )}\n    </DraggableSortableItem>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,27 @@
+@layer payload-default {
+  .file-meta__url {
+    display: flex;
+    gap: var(--spacer-2);
+  }
+
+  .file-meta__url a {
+    font-weight: 600;
+    text-decoration: none;
+  }
+
+  .file-meta__url a:hover,
+  .file-meta__url a:focus-visible {
+    text-decoration: underline;
+  }
+
+  .file-meta__size-type,
+  .file-meta__url a {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .file-meta__edit {
+    position: relative;
+  }
+}

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

@@ -8,6 +8,6 @@ export type FileMetaProps = {
     url: string;
     width?: number;
 };
-import './index.scss';
+import './index.css';
 export declare const FileMeta: React.FC<FileMetaProps>;
 //# sourceMappingURL=index.d.ts.map

package/dist/elements/FileDetails/FileMeta/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/FileDetails/FileMeta/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,MAAM,aAAa,GAAG;IAC1B,QAAQ,EAAE,MAAM,CAAA;IAChB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,EAAE,MAAM,CAAA;IAChB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAGD,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA4B5C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/FileDetails/FileMeta/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,MAAM,aAAa,GAAG;IAC1B,QAAQ,EAAE,MAAM,CAAA;IAChB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,EAAE,MAAM,CAAA;IAChB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAGD,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA4B5C,CAAA"}

package/dist/elements/FileDetails/FileMeta/index.js

@@ -4,7 +4,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { formatFilesize } from 'payload/shared';
 import React from 'react';
 import { CopyToClipboard } from '../../CopyToClipboard/index.js';
-import './index.scss';
+import './index.css';
 const baseClass = 'file-meta';
 export const FileMeta = props => {
   const {

package/dist/elements/FileDetails/FileMeta/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["formatFilesize","React","CopyToClipboard","baseClass","FileMeta","props","filename","filesize","height","mimeType","url","fileURL","width","_jsxs","className","_jsx","href","rel","target","defaultMessage","value","Fragment"],"sources":["../../../../src/elements/FileDetails/FileMeta/index.tsx"],"sourcesContent":["'use client'\nimport { formatFilesize } from 'payload/shared'\nimport React from 'react'\n\nexport type FileMetaProps = {\n  filename: string\n  filesize: number\n  height?: number\n  mimeType: string\n  sizes?: unknown\n  url: string\n  width?: number\n}\n\nimport { CopyToClipboard } from '../../CopyToClipboard/index.js'\nimport './index.scss'\n\nconst baseClass = 'file-meta'\n\nexport const FileMeta: React.FC<FileMetaProps> = (props) => {\n  const { filename, filesize, height, mimeType, url: fileURL, width } = props\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__url`}>\n        <a href={fileURL} rel=\"noopener noreferrer\" target=\"_blank\">\n          {filename}\n        </a>\n        <CopyToClipboard defaultMessage=\"Copy URL\" value={fileURL} />\n      </div>\n      <div className={`${baseClass}__size-type`}>\n        {formatFilesize(filesize)}\n        {typeof width === 'number' && typeof height === 'number' && (\n          <React.Fragment>\n            &nbsp;-&nbsp;\n            {width}x{height}\n          </React.Fragment>\n        )}\n        {mimeType && (\n          <React.Fragment>\n            &nbsp;-&nbsp;\n            {mimeType}\n          </React.Fragment>\n        )}\n      </div>\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AACA,SAASA,cAAc,QAAQ;AAC/B,OAAOC,KAAA,MAAW;AAYlB,SAASC,eAAe,QAAQ;AAChC,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,QAAA,GAAqCC,KAAA;EAChD,MAAM;IAAEC,QAAQ;IAAEC,QAAQ;IAAEC,MAAM;IAAEC,QAAQ;IAAEC,GAAA,EAAKC,OAAO;IAAEC;EAAK,CAAE,GAAGP,KAAA;EAEtE,oBACEQ,KAAA,CAAC;IAAIC,SAAA,EAAWX,SAAA;4BACdU,KAAA,CAAC;MAAIC,SAAA,EAAW,GAAGX,SAAA,OAAgB;8BACjCY,IAAA,CAAC;QAAEC,IAAA,EAAML,OAAA;QAASM,GAAA,EAAI;QAAsBC,MAAA,EAAO;kBAChDZ;uBAEHS,IAAA,CAACb,eAAA;QAAgBiB,cAAA,EAAe;QAAWC,KAAA,EAAOT;;qBAEpDE,KAAA,CAAC;MAAIC,SAAA,EAAW,GAAGX,SAAA,aAAsB;iBACtCH,cAAA,CAAeO,QAAA,GACf,OAAOK,KAAA,KAAU,YAAY,OAAOJ,MAAA,KAAW,yBAC9CK,KAAA,CAACZ,KAAA,CAAMoB,QAAQ;mBAAC,OAEbT,KAAA,EAAM,KAAEJ,MAAA;UAGZC,QAAA,iBACCI,KAAA,CAACZ,KAAA,CAAMoB,QAAQ;mBAAC,OAEbZ,QAAA;;;;AAMb","ignoreList":[]}
+{"version":3,"file":"index.js","names":["formatFilesize","React","CopyToClipboard","baseClass","FileMeta","props","filename","filesize","height","mimeType","url","fileURL","width","_jsxs","className","_jsx","href","rel","target","defaultMessage","value","Fragment"],"sources":["../../../../src/elements/FileDetails/FileMeta/index.tsx"],"sourcesContent":["'use client'\nimport { formatFilesize } from 'payload/shared'\nimport React from 'react'\n\nexport type FileMetaProps = {\n  filename: string\n  filesize: number\n  height?: number\n  mimeType: string\n  sizes?: unknown\n  url: string\n  width?: number\n}\n\nimport { CopyToClipboard } from '../../CopyToClipboard/index.js'\nimport './index.css'\n\nconst baseClass = 'file-meta'\n\nexport const FileMeta: React.FC<FileMetaProps> = (props) => {\n  const { filename, filesize, height, mimeType, url: fileURL, width } = props\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__url`}>\n        <a href={fileURL} rel=\"noopener noreferrer\" target=\"_blank\">\n          {filename}\n        </a>\n        <CopyToClipboard defaultMessage=\"Copy URL\" value={fileURL} />\n      </div>\n      <div className={`${baseClass}__size-type`}>\n        {formatFilesize(filesize)}\n        {typeof width === 'number' && typeof height === 'number' && (\n          <React.Fragment>\n            &nbsp;-&nbsp;\n            {width}x{height}\n          </React.Fragment>\n        )}\n        {mimeType && (\n          <React.Fragment>\n            &nbsp;-&nbsp;\n            {mimeType}\n          </React.Fragment>\n        )}\n      </div>\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AACA,SAASA,cAAc,QAAQ;AAC/B,OAAOC,KAAA,MAAW;AAYlB,SAASC,eAAe,QAAQ;AAChC,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,QAAA,GAAqCC,KAAA;EAChD,MAAM;IAAEC,QAAQ;IAAEC,QAAQ;IAAEC,MAAM;IAAEC,QAAQ;IAAEC,GAAA,EAAKC,OAAO;IAAEC;EAAK,CAAE,GAAGP,KAAA;EAEtE,oBACEQ,KAAA,CAAC;IAAIC,SAAA,EAAWX,SAAA;4BACdU,KAAA,CAAC;MAAIC,SAAA,EAAW,GAAGX,SAAA,OAAgB;8BACjCY,IAAA,CAAC;QAAEC,IAAA,EAAML,OAAA;QAASM,GAAA,EAAI;QAAsBC,MAAA,EAAO;kBAChDZ;uBAEHS,IAAA,CAACb,eAAA;QAAgBiB,cAAA,EAAe;QAAWC,KAAA,EAAOT;;qBAEpDE,KAAA,CAAC;MAAIC,SAAA,EAAW,GAAGX,SAAA,aAAsB;iBACtCH,cAAA,CAAeO,QAAA,GACf,OAAOK,KAAA,KAAU,YAAY,OAAOJ,MAAA,KAAW,yBAC9CK,KAAA,CAACZ,KAAA,CAAMoB,QAAQ;mBAAC,OAEbT,KAAA,EAAM,KAAEJ,MAAA;UAGZC,QAAA,iBACCI,KAAA,CAACZ,KAAA,CAAMoB,QAAQ;mBAAC,OAEbZ,QAAA;;;;AAMb","ignoreList":[]}