Confirm Delete File

ProNew

A file explorer where the Delete key opens a confirmation that names the file and counts what a folder contains, then returns focus to the next row. Use this when deleting from a tree is risky and keyboard users must not lose their place.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

aria-label

Guide and examples

When to use it

Use it for file managers, media libraries and editors where Delete is one key away from a mistake.

Do not use it when deletion can be undone cheaply (delete at once and offer Undo), or for destroying a project (use confirm-destructive-action).

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`nodes`	`TreeNode[]`	-	The files; the pattern keeps its own copy.
`onNodesChange`	`(nodes) => void`	-	Called after a deletion.
`defaultExpanded`	`string[]`	`[]`	Open folders.
`aria-label`	`string`	`"Files"`	Names the tree.

Accessibility

The confirmation is an alertdialog named by the question ("Delete c.md?") and described by what will be lost.
Cancel is the default focus; Escape cancels.
After a deletion focus goes to the row that took its place (the next one, or the previous at the end), never to the page.

Testing

The pattern ships with a Testing Library test (confirm-delete-file.test.tsx) that covers the question, the folder count, cancelling and the focus after deleting.