@payloadcms/ui 4.0.0-internal.ccea85d → 4.0.0-internal.cd47d20

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/StaticFileDetails/index.css

@@ -1,7 +1,7 @@
 @layer payload-default {
   .file-details {
-    background: var(--theme-elevation-50);
-    border: var(--stroke-width-small) solid var(--theme-border-color);
+    background: var(--color-bg-secondary);
+    border: var(--stroke-width-small) solid var(--color-border);
     border-radius: var(--radius-medium);
     box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1);
   }
@@ -25,10 +25,9 @@
   }
 
   .file-details__remove .btn__icon {
-    border: var(--stroke-width-small) solid var(--theme-border-color);
-    background: var(--theme-input-bg);
+    border: var(--stroke-width-small) solid var(--color-border);
+    background: var(--color-bg);
     box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1);
-    transition: border 100ms cubic-bezier(0, 0.2, 0.2, 1);
   }
 
   .file-details__remove .btn__icon:not(:disabled):hover {
@@ -36,7 +35,7 @@
   }
 
   .file-details__remove .btn__icon:hover {
-    border: var(--stroke-width-small) solid var(--theme-elevation-400);
+    border: var(--stroke-width-small) solid var(--special-border-translucent-strong);
   }
 
   .file-details__main-detail {
@@ -81,7 +80,7 @@
   }
 
   .file-details__size-label {
-    color: var(--theme-elevation-400);
+    color: var(--color-text-tertiary);
   }
 
   .file-details__file-mutation {
@@ -92,16 +91,17 @@
 
   .file-details__edit {
     cursor: pointer;
-    background-color: var(--theme-elevation-150);
+    background-color: var(--color-bg-tertiary);
     border: none;
     border-radius: var(--radius-medium);
     padding: var(--spacer-1) var(--spacer-2);
   }
 
   .file-details__edit:hover {
-    background-color: var(--theme-elevation-100);
+    background-color: var(--color-bg-secondary);
   }
 
+  /* stylelint-disable-next-line plugin/no-max-width-media-query -- TODO: pre-existing; migrate to a mobile-first min-width query */
   @media (max-width: 1440px) {
     .file-details__main-detail {
       padding: var(--spacer-4);
@@ -118,6 +118,7 @@
     }
   }
 
+  /* stylelint-disable-next-line plugin/no-max-width-media-query -- TODO: pre-existing; migrate to a mobile-first min-width query */
   @media (max-width: 1024px) {
     .file-details header {
       flex-wrap: wrap;

package/dist/elements/FileManager/FilePreview/index.css

@@ -1,7 +1,7 @@
 @layer payload-default {
   .file-preview {
     display: flex;
-    flex-direction: row;
+    flex-direction: column-reverse;
     flex: 1 1 0;
     min-height: 0;
     /* Visible so the mini carousel can grow past the panel as the headers scroll away. */
@@ -75,9 +75,9 @@
     min-width: 0;
   }
 
-  @container edit-main (max-width: 768px) {
+  @container edit-main (min-width: 768px) {
     .file-preview {
-      flex-direction: column-reverse;
+      flex-direction: row;
     }
   }
 }

package/dist/elements/FileManager/FileToolbar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/FileManager/FileToolbar/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAiB,MAAM,OAAO,CAAA;AAarC,OAAO,aAAa,CAAA;AAIpB,KAAK,KAAK,GAAG;IACX,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAA;IACzB,QAAQ,CAAC,OAAO,CAAC,EAAE,IAAI,GAAG,MAAM,CAAA;IAChC,QAAQ,CAAC,OAAO,CAAC,EAAE,IAAI,GAAG,MAAM,CAAA;IAChC,QAAQ,CAAC,cAAc,CAAC,EAAE,OAAO,CAAA;IACjC,QAAQ,CAAC,YAAY,CAAC,EAAE,OAAO,CAAA;IAC/B,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IACjC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CAChC,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAkFvC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/FileManager/FileToolbar/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAiB,MAAM,OAAO,CAAA;AAcrC,OAAO,aAAa,CAAA;AAIpB,KAAK,KAAK,GAAG;IACX,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAA;IACzB,QAAQ,CAAC,OAAO,CAAC,EAAE,IAAI,GAAG,MAAM,CAAA;IAChC,QAAQ,CAAC,OAAO,CAAC,EAAE,IAAI,GAAG,MAAM,CAAA;IAChC,QAAQ,CAAC,cAAc,CAAC,EAAE,OAAO,CAAA;IACjC,QAAQ,CAAC,YAAY,CAAC,EAAE,OAAO,CAAA;IAC/B,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IACjC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CAChC,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAyFvC,CAAA"}

package/dist/elements/FileManager/FileToolbar/index.js

@@ -6,6 +6,7 @@ import { useElementHeightVariable } from '../../../hooks/useElementHeightVariabl
 import { ChevronIcon } from '../../../icons/Chevron/index.js';
 import { CropIcon } from '../../../icons/Crop/index.js';
 import { DownloadIcon } from '../../../icons/Download/index.js';
+import { LinkIcon } from '../../../icons/Link/index.js';
 import { NewTabIcon } from '../../../icons/NewTab/index.js';
 import { SwapIcon } from '../../../icons/Swap/index.js';
 import { useTranslation } from '../../../providers/Translation/index.js';
@@ -55,6 +56,7 @@ export const FileToolbar = ({
         }),
         buttonType: "custom",
         horizontalAlign: "left",
+        popupType: "menu",
         portalClassName: `${baseClass}__filename-popup`,
         size: "fit-content",
         verticalAlign: "bottom",
@@ -69,6 +71,8 @@ export const FileToolbar = ({
     }), /*#__PURE__*/_jsxs("div", {
       className: `${baseClass}__right`,
       children: [fileUrl && /*#__PURE__*/_jsx(CopyToClipboard, {
+        defaultMessage: t('upload:copyLinkToFile'),
+        icon: /*#__PURE__*/_jsx(LinkIcon, {}),
         value: fileUrl
       }), isAdjustable && /*#__PURE__*/_jsx(Button, {
         "aria-label": t('upload:editImage'),

package/dist/elements/FileManager/FileToolbar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useRef","useElementHeightVariable","ChevronIcon","CropIcon","DownloadIcon","NewTabIcon","SwapIcon","useTranslation","Button","CopyToClipboard","Popup","PopupList","baseClass","FileToolbar","filename","fileSrc","fileUrl","hideRemoveFile","isAdjustable","onEditImage","onReplace","t","ref","cssVar","_jsxs","className","_jsx","button","size","buttonType","horizontalAlign","portalClassName","verticalAlign","MenuItem","icon","onClick","value","buttonStyle","margin","round","tooltip","href","rel","target","title","download"],"sources":["../../../../src/elements/FileManager/FileToolbar/index.tsx"],"sourcesContent":["'use client'\nimport React, { useRef } from 'react'\n\nimport { useElementHeightVariable } from '../../../hooks/useElementHeightVariable.js'\nimport { ChevronIcon } from '../../../icons/Chevron/index.js'\nimport { CropIcon } from '../../../icons/Crop/index.js'\nimport { DownloadIcon } from '../../../icons/Download/index.js'\nimport { NewTabIcon } from '../../../icons/NewTab/index.js'\nimport { SwapIcon } from '../../../icons/Swap/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Button } from '../../Button/index.js'\nimport { CopyToClipboard } from '../../CopyToClipboard/index.js'\nimport { Popup } from '../../Popup/index.js'\nimport * as PopupList from '../../Popup/PopupButtonList/index.js'\nimport './index.css'\n\nconst baseClass = 'file-toolbar'\n\ntype Props = {\n  readonly filename: string\n  readonly fileSrc?: null | string\n  readonly fileUrl?: null | string\n  readonly hideRemoveFile?: boolean\n  readonly isAdjustable?: boolean\n  readonly onEditImage?: () => void\n  readonly onReplace?: () => void\n}\n\nexport const FileToolbar: React.FC<Props> = ({\n  filename,\n  fileSrc,\n  fileUrl,\n  hideRemoveFile,\n  isAdjustable,\n  onEditImage,\n  onReplace,\n}) => {\n  const { t } = useTranslation()\n  const ref = useRef<HTMLDivElement>(null)\n  useElementHeightVariable({ cssVar: '--file-toolbar-height', ref })\n\n  return (\n    <div className={baseClass} ref={ref}>\n      <div className={`${baseClass}__left`}>\n        {hideRemoveFile ? (\n          <span className={`${baseClass}__filename-btn ${baseClass}__filename-btn--static`}>\n            <span className={`${baseClass}__filename-text`}>{filename}</span>\n          </span>\n        ) : (\n          <Popup\n            button={\n              <span className={`${baseClass}__filename-btn`}>\n                <span className={`${baseClass}__filename-text`}>{filename}</span>\n                <ChevronIcon size={16} />\n              </span>\n            }\n            buttonType=\"custom\"\n            horizontalAlign=\"left\"\n            portalClassName={`${baseClass}__filename-popup`}\n            size=\"fit-content\"\n            verticalAlign=\"bottom\"\n          >\n            <PopupList.MenuItem>\n              <PopupList.Button icon={<SwapIcon />} onClick={onReplace}>\n                {t('upload:replaceFile')}\n              </PopupList.Button>\n            </PopupList.MenuItem>\n          </Popup>\n        )}\n      </div>\n\n      <div className={`${baseClass}__right`}>\n        {fileUrl && <CopyToClipboard value={fileUrl} />}\n        {isAdjustable && (\n          <Button\n            aria-label={t('upload:editImage')}\n            buttonStyle=\"ghost\"\n            icon={<CropIcon size={24} />}\n            margin={false}\n            onClick={onEditImage}\n            round={false}\n            tooltip={t('upload:editImage')}\n          />\n        )}\n        {fileSrc && (\n          <a\n            aria-label={t('fields:openInNewTab')}\n            className={`${baseClass}__icon-link`}\n            href={fileSrc}\n            rel=\"noopener noreferrer\"\n            target=\"_blank\"\n            title={t('fields:openInNewTab')}\n          >\n            <NewTabIcon size={24} />\n          </a>\n        )}\n        {fileSrc && (\n          <a\n            aria-label={t('upload:download')}\n            className={`${baseClass}__icon-link`}\n            download={filename}\n            href={fileSrc}\n            title={t('upload:download')}\n          >\n            <DownloadIcon size={24} />\n          </a>\n        )}\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useRef","useElementHeightVariable","ChevronIcon","CropIcon","DownloadIcon","LinkIcon","NewTabIcon","SwapIcon","useTranslation","Button","CopyToClipboard","Popup","PopupList","baseClass","FileToolbar","filename","fileSrc","fileUrl","hideRemoveFile","isAdjustable","onEditImage","onReplace","t","ref","cssVar","_jsxs","className","_jsx","button","size","buttonType","horizontalAlign","popupType","portalClassName","verticalAlign","MenuItem","icon","onClick","defaultMessage","value","buttonStyle","margin","round","tooltip","href","rel","target","title","download"],"sources":["../../../../src/elements/FileManager/FileToolbar/index.tsx"],"sourcesContent":["'use client'\nimport React, { useRef } from 'react'\n\nimport { useElementHeightVariable } from '../../../hooks/useElementHeightVariable.js'\nimport { ChevronIcon } from '../../../icons/Chevron/index.js'\nimport { CropIcon } from '../../../icons/Crop/index.js'\nimport { DownloadIcon } from '../../../icons/Download/index.js'\nimport { LinkIcon } from '../../../icons/Link/index.js'\nimport { NewTabIcon } from '../../../icons/NewTab/index.js'\nimport { SwapIcon } from '../../../icons/Swap/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Button } from '../../Button/index.js'\nimport { CopyToClipboard } from '../../CopyToClipboard/index.js'\nimport { Popup } from '../../Popup/index.js'\nimport * as PopupList from '../../Popup/PopupButtonList/index.js'\nimport './index.css'\n\nconst baseClass = 'file-toolbar'\n\ntype Props = {\n  readonly filename: string\n  readonly fileSrc?: null | string\n  readonly fileUrl?: null | string\n  readonly hideRemoveFile?: boolean\n  readonly isAdjustable?: boolean\n  readonly onEditImage?: () => void\n  readonly onReplace?: () => void\n}\n\nexport const FileToolbar: React.FC<Props> = ({\n  filename,\n  fileSrc,\n  fileUrl,\n  hideRemoveFile,\n  isAdjustable,\n  onEditImage,\n  onReplace,\n}) => {\n  const { t } = useTranslation()\n  const ref = useRef<HTMLDivElement>(null)\n  useElementHeightVariable({ cssVar: '--file-toolbar-height', ref })\n\n  return (\n    <div className={baseClass} ref={ref}>\n      <div className={`${baseClass}__left`}>\n        {hideRemoveFile ? (\n          <span className={`${baseClass}__filename-btn ${baseClass}__filename-btn--static`}>\n            <span className={`${baseClass}__filename-text`}>{filename}</span>\n          </span>\n        ) : (\n          <Popup\n            button={\n              <span className={`${baseClass}__filename-btn`}>\n                <span className={`${baseClass}__filename-text`}>{filename}</span>\n                <ChevronIcon size={16} />\n              </span>\n            }\n            buttonType=\"custom\"\n            horizontalAlign=\"left\"\n            popupType=\"menu\"\n            portalClassName={`${baseClass}__filename-popup`}\n            size=\"fit-content\"\n            verticalAlign=\"bottom\"\n          >\n            <PopupList.MenuItem>\n              <PopupList.Button icon={<SwapIcon />} onClick={onReplace}>\n                {t('upload:replaceFile')}\n              </PopupList.Button>\n            </PopupList.MenuItem>\n          </Popup>\n        )}\n      </div>\n\n      <div className={`${baseClass}__right`}>\n        {fileUrl && (\n          <CopyToClipboard\n            defaultMessage={t('upload:copyLinkToFile')}\n            icon={<LinkIcon />}\n            value={fileUrl}\n          />\n        )}\n        {isAdjustable && (\n          <Button\n            aria-label={t('upload:editImage')}\n            buttonStyle=\"ghost\"\n            icon={<CropIcon size={24} />}\n            margin={false}\n            onClick={onEditImage}\n            round={false}\n            tooltip={t('upload:editImage')}\n          />\n        )}\n        {fileSrc && (\n          <a\n            aria-label={t('fields:openInNewTab')}\n            className={`${baseClass}__icon-link`}\n            href={fileSrc}\n            rel=\"noopener noreferrer\"\n            target=\"_blank\"\n            title={t('fields:openInNewTab')}\n          >\n            <NewTabIcon size={24} />\n          </a>\n        )}\n        {fileSrc && (\n          <a\n            aria-label={t('upload:download')}\n            className={`${baseClass}__icon-link`}\n            download={filename}\n            href={fileSrc}\n            title={t('upload:download')}\n          >\n            <DownloadIcon size={24} />\n          </a>\n        )}\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/FileManager/index.css

@@ -1,13 +1,14 @@
 @layer payload-default {
   .file-manager {
+    --file-fields-max-width: 600px;
     position: relative;
-    flex: 1 0 0;
     align-self: stretch;
     width: 100%;
     margin-bottom: 0;
     border-radius: 0;
     background: var(--color-bg-secondary);
-    min-height: 100px;
+    min-height: 400px;
+    border-bottom: var(--stroke-width-small) solid var(--color-border);
 
     .dropzone {
       border: none;
@@ -16,25 +17,23 @@
   }
 
   .file-manager__panel {
-    position: sticky;
-    top: var(--doc-controls-height);
-    height: calc(
-      100dvh - var(--app-header-height) - var(--doc-controls-height) - var(--doc-header-height)
-    );
+    position: static;
+    height: auto;
+    min-height: 400px;
     display: flex;
     flex-direction: column;
     /* Visible so the mini carousel can grow past the panel to fill the area left behind as the
        app/doc headers scroll away (see MiniCarousel). */
     overflow: visible;
-    /* Scroll-driven: grow height as the app header and doc header scroll away, matching the
-       extra space they free up. Mirrors the MiniCarousel approach. Falls back to static height. */
   }
 
   .file-manager__content {
     display: flex;
-    flex-direction: row;
-    flex: 1 1 0;
-    min-height: 0;
+    flex-direction: column;
+    /* flex-basis: auto (not 0) so this sizes to its content when the panel's height is auto
+       (stacked layout) instead of collapsing — flex-basis 0 only makes sense when the panel
+       has a definite height to grow into (see the min-width override below). */
+    flex: 1 1 auto;
     overflow: visible;
   }
 
@@ -44,7 +43,8 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    padding: var(--spacer-4);
+    gap: var(--spacer-4);
+    padding: var(--spacer-4) var(--gutter-h);
     position: relative;
   }
 
@@ -58,10 +58,10 @@
     justify-content: center;
   }
 
-  .file-manager__remove {
+  .file-manager__upload .file-manager__remove {
     position: absolute;
-    top: var(--spacer-2);
-    right: var(--spacer-2);
+    top: var(--gutter-h);
+    right: var(--gutter-h);
     margin: 0;
     z-index: 1;
   }
@@ -105,50 +105,33 @@
     line-height: var(--text-body-small-line-height);
   }
 
-  .file-manager__hidden-input {
-    display: none;
-  }
-
-  .file-manager__dropzone-content {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: var(--spacer-2);
-    width: 100%;
-  }
-
-  .file-manager__dropzone-buttons {
-    display: flex;
-    gap: var(--spacer-2);
-    align-items: center;
-  }
-
-  .file-manager__or-text {
-    color: var(--color-text-tertiary);
-    text-transform: lowercase;
-  }
+  @container edit-main (min-width: 1024px) {
+    .file-manager {
+      min-height: 100px;
+      border-bottom: none;
+    }
 
-  .file-manager__drag-text {
-    flex-shrink: 0;
-    margin: 0;
-    text-transform: lowercase;
-    color: var(--color-text-tertiary);
-  }
+    .file-manager__upload {
+      padding: var(--spacer-4);
+    }
 
-  @container edit-main (max-width: 1024px) {
-    .file-manager {
-      min-height: 400px;
-      border-bottom: var(--stroke-width-small) solid var(--color-border);
+    .file-manager__file-adjustments {
+      max-width: var(--file-fields-max-width);
     }
 
     .file-manager__panel {
-      position: static;
-      height: auto;
-      min-height: 400px;
+      position: sticky;
+      top: var(--doc-controls-height);
+      /* Scroll-driven: grow height as the app header and doc header scroll away, matching the
+         extra space they free up. Mirrors the MiniCarousel approach. Falls back to static height. */
+      height: calc(
+        100dvh - var(--app-header-height) - var(--doc-controls-height) - var(--doc-header-height)
+      );
     }
 
     .file-manager__content {
-      flex-direction: column;
+      flex-direction: row;
+      min-height: 0;
     }
   }
 }

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

@@ -10,7 +10,7 @@ export type FileManagerProps = {
      */
     readonly resetUploadEdits?: () => void;
     readonly updateUploadEdits?: (args: UploadEdits) => void;
-    readonly uploadConfig: SanitizedCollectionConfig['upload'];
+    readonly uploadConfig: Omit<SanitizedCollectionConfig['upload'], 'uploadInstructions'>;
     readonly UploadControls?: React.ReactNode;
     readonly uploadEdits?: UploadEdits;
     readonly UploadFilePreview?: React.ReactNode;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/FileManager/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,yBAAyB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAIrE,OAAO,KAA6D,MAAM,OAAO,CAAA;AA2BjF,OAAO,aAAa,CAAA;AAcpB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAA;IAC/B,QAAQ,CAAC,YAAY,CAAC,EAAE,OAAO,SAAS,EAAE,SAAS,CAAA;IACnD;;;OAGG;IACH,QAAQ,CAAC,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAA;IACtC,QAAQ,CAAC,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAA;IACxD,QAAQ,CAAC,YAAY,EAAE,yBAAyB,CAAC,QAAQ,CAAC,CAAA;IAC1D,QAAQ,CAAC,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzC,QAAQ,CAAC,WAAW,CAAC,EAAE,WAAW,CAAA;IAClC,QAAQ,CAAC,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC7C,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAqalD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/FileManager/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,yBAAyB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAIrE,OAAO,KAAqD,MAAM,OAAO,CAAA;AA4BzE,OAAO,aAAa,CAAA;AAcpB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAA;IAC/B,QAAQ,CAAC,YAAY,CAAC,EAAE,OAAO,SAAS,EAAE,SAAS,CAAA;IACnD;;;OAGG;IACH,QAAQ,CAAC,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAA;IACtC,QAAQ,CAAC,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAA;IACxD,QAAQ,CAAC,YAAY,EAAE,IAAI,CAAC,yBAAyB,CAAC,QAAQ,CAAC,EAAE,oBAAoB,CAAC,CAAA;IACtF,QAAQ,CAAC,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzC,QAAQ,CAAC,WAAW,CAAC,EAAE,WAAW,CAAA;IAClC,QAAQ,CAAC,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC7C,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA2VlD,CAAA"}