@payloadcms/ui 4.0.0-internal.e387174 → 4.0.0-internal.e38d3ac

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/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,14 +91,14 @@
 
   .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);
   }
 
   @media (max-width: 1440px) {

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,CAwFvC,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';
@@ -69,6 +70,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","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            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;
   }
@@ -135,20 +135,33 @@
     color: var(--color-text-tertiary);
   }
 
-  @container edit-main (max-width: 1024px) {
+  @container edit-main (min-width: 1024px) {
     .file-manager {
-      min-height: 400px;
-      border-bottom: var(--stroke-width-small) solid var(--color-border);
+      min-height: 100px;
+      border-bottom: none;
+    }
+
+    .file-manager__upload {
+      padding: var(--spacer-4);
+    }
+
+    .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,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,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,CAkblD,CAAA"}

package/dist/elements/FileManager/index.js

@@ -215,6 +215,12 @@ export const FileManager = ({
     setModified(true);
     updateUploadEdits(args);
   }, [setModified, updateUploadEdits]);
+  // Reset states for when replacing the file with a new upload
+  useEffect(() => {
+    setSelectedSize(null);
+    setRemovedFile(false);
+    setFileSrc('');
+  }, [data?.url, data?.filename]);
   useEffect(() => {
     if (initialState?.file?.value instanceof File) {
       setFileSrc(URL.createObjectURL(initialState.file.value));
@@ -228,9 +234,6 @@ export const FileManager = ({
       }
     };
   }, [fileSrc]);
-  useEffect(() => {
-    setSelectedSize(null);
-  }, [data?.url, data?.filename]);
   useEffect(() => {
     const handleControlFileUrl = async () => {
       if (uploadControlFileUrl) {
@@ -326,6 +329,7 @@ export const FileManager = ({
     className: [fieldBaseClass, baseClass].filter(Boolean).join(' '),
     children: [/*#__PURE__*/_jsx(FieldError, {
       message: errorMessage,
+      path: "filename",
       showError: showError
     }), /*#__PURE__*/_jsxs("div", {
       className: `${baseClass}__panel`,
@@ -350,7 +354,14 @@ export const FileManager = ({
           UploadFilePreview: UploadFilePreview
         }) : showUploadInput ? /*#__PURE__*/_jsxs("div", {
           className: `${baseClass}__upload`,
-          children: [!value && /*#__PURE__*/_jsx(Dropzone, {
+          children: [!value && removedFile && data?.filename && /*#__PURE__*/_jsx(Button, {
+            buttonStyle: "secondary",
+            className: `${baseClass}__remove`,
+            icon: "x",
+            onClick: () => setRemovedFile(false),
+            round: true,
+            tooltip: t('general:cancel')
+          }), !value && /*#__PURE__*/_jsx(Dropzone, {
             onChange: handleFileSelection,
             children: /*#__PURE__*/_jsxs("div", {
               className: `${baseClass}__dropzone-content`,