Allow FilePanel override in replace panel

[sauerben]

Adds support for overriding the file panel rendered by FileReplaceButton.

Rationale

Applications using a custom file panel currently need to copy and maintain the entire FileReplaceButton implementation. This change allows the same custom upload UI or tab configuration to be reused when adding and replacing files.

Changes

• Added an optional filePanel prop to FileReplaceButton
• Kept FilePanel as the default when no override is provided
• Documented how to supply custom tabs or a custom panel
• Updated the Uppy example to use the new API
• Removed the example's copied FileReplaceButton implementation

Impact

The change is backward compatible. Existing applications that do not provide filePanel continue to receive the default file panel.

Testing

• Manuel tested with with the 03-ui-components/11-uppy-file-panel example

Checklist

• Code follows the project's coding standards.
• Unit tests covering the new feature have been added.
• All existing tests pass.
• The documentation has been updated to reflect the new feature

Additional Notes

The Uppy file-panel example demonstrates using the same custom panel for both new file uploads and file replacement.

[vercel]

Someone is attempting to deploy a commit to the TypeCell Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Advanced

Run ID: a4097f28-cb4d-44ea-b644-ae6f4c067c0d

📥 Commits

Reviewing files that changed from the base of the PR and between 63c2389 and 2e9262a.

📒 Files selected for processing (3)

• examples/03-ui-components/11-uppy-file-panel/src/App.tsx
• examples/03-ui-components/11-uppy-file-panel/src/FileReplaceButton.tsx
• packages/react/src/components/FormattingToolbar/DefaultButtons/FileReplaceButton.tsx

💤 Files with no reviewable changes (1)

• examples/03-ui-components/11-uppy-file-panel/src/FileReplaceButton.tsx

Included review availability: Your plan provides up to 10 included reviews per hour; 9 remain after this review.

---

📝 Walkthrough

Walkthrough

FileReplaceButton now accepts a custom file panel component. The Uppy example uses UppyFilePanel through this shared component and removes its local replacement button.

Changes

File replacement panel

Layer / File(s)	Summary
Custom file panel support packages/react/src/components/FormattingToolbar/DefaultButtons/FileReplaceButton.tsx	FileReplaceButton accepts an optional filePanel prop and renders the selected panel for the active file block.
Uppy example integration examples/03-ui-components/11-uppy-file-panel/src/App.tsx, examples/03-ui-components/11-uppy-file-panel/src/FileReplaceButton.tsx	The example passes UppyFilePanel to the shared button and removes the local replacement button component.

Priority: ⬇️ Low — Defer the optional FilePanel override because it is a narrow, backward-compatible extension to FileReplaceButton and its Uppy example.

Estimated code review effort: 2 (Simple) | ~10 minutes

Merge Risk: ⚪ Minimal · up to 2e926

File replacement panels can now be customized while existing consumers retain the default panel behavior. The Uppy example uses the shared extension point, with no concrete current-head merge risk identified.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 1 functions across 2 files.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Title check	✅ Passed	The title clearly identifies the primary change: allowing a custom FilePanel for file replacement. It is concise and related to the pull request scope.
Description check	✅ Passed	The description covers the feature, rationale, changes, impact, testing, checklist, and additional notes. It aligns with the pull request objectives and explains backward compatibility. The testing st…

✨ Finishing Touches 💡 1

🛠️ Fix failing CI checks 💡

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{A rabbit finds a panel bright
Uppy hops into the toolbar light
One button serves the file
Custom panels stretch the style
The editor smiles awhile}

_{Comment @coderabbitai help to get the list of available commands.}